diff --git a/.bowerrc b/.bowerrc
index baa91a3e3f6c..9b2abeb660ab 100644
--- a/.bowerrc
+++ b/.bowerrc
@@ -1,3 +1,3 @@
 {
-  "directory": "bower_components"
-}
\ No newline at end of file
+  "directory" : "bower_components"
+}
diff --git a/.circleci/README.md b/.circleci/README.md
new file mode 100644
index 000000000000..314caba8f32e
--- /dev/null
+++ b/.circleci/README.md
@@ -0,0 +1,19 @@
+# Encryption
+
+Based on https://github.com/circleci/encrypted-files
+
+In the CircleCI web UI, we have a secret variable called `KEY`
+https://circleci.com/gh/angular/angular/edit#env-vars
+which is only exposed to non-fork builds
+(see "Pass secrets to builds from forked pull requests" under
+https://circleci.com/gh/angular/angular/edit#advanced-settings)
+
+We use this as a symmetric AES encryption key to encrypt tokens like
+a GitHub token that enables publishing snapshots.
+
+To create the github_token file, we take this approach:
+- Find the angular-builds:token in http://valentine
+- Go inside the ngcontainer docker image so you use the same version of openssl as we will at runtime: `docker run --rm -it angular/ngcontainer`
+- echo "https://[token]:@github.com" > credentials
+- openssl aes-256-cbc -e -in credentials -out .circleci/github_token -k $KEY
+- If needed, base64-encode the result so you can copy-paste it out of docker: `base64 github_token`
\ No newline at end of file
diff --git a/.circleci/bazel.rc b/.circleci/bazel.rc
new file mode 100644
index 000000000000..b63cdfecbdfd
--- /dev/null
+++ b/.circleci/bazel.rc
@@ -0,0 +1,42 @@
+# These options are enabled when running on CI
+# We do this by copying this file to /etc/bazel.bazelrc at the start of the build.
+# See remote cache documentation in /docs/BAZEL.md
+
+# Don't be spammy in the logs
+# TODO(gmagolan): Hide progress again once build performance improves
+# Presently, CircleCI can timeout during bazel test ... with the following
+# error: Too long with no output (exceeded 10m0s)
+# build --noshow_progress
+
+# Don't run manual tests
+test --test_tag_filters=-manual
+
+# Print all the options that apply to the build.
+# This helps us diagnose which options override others
+# (e.g. /etc/bazel.bazelrc vs. tools/bazel.rc)
+build --announce_rc
+
+# Create dist/bin symlink to $(bazel info bazel-bin)
+# We use this when uploading artifacts after the build finishes
+build --symlink_prefix=dist/
+
+# Enable experimental CircleCI bazel remote cache proxy
+# See remote cache documentation in /docs/BAZEL.md
+build --experimental_remote_spawn_cache --remote_rest_cache=http://localhost:7643
+
+# Prevent unstable environment variables from tainting cache keys
+build --experimental_strict_action_env
+
+# Save downloaded repositories such as the go toolchain
+# This directory can then be included in the CircleCI cache
+# It should save time running the first build
+build --experimental_repository_cache=/home/circleci/bazel_repository_cache
+
+# Workaround https://github.com/bazelbuild/bazel/issues/3645
+# Bazel doesn't calculate the memory ceiling correctly when running under Docker.
+# Limit Bazel to consuming resources that fit in CircleCI "xlarge" class
+# https://circleci.com/docs/2.0/configuration-reference/#resource_class
+build --local_resources=14336,8.0,1.0
+
+# Retry in the event of flakes, eg. https://circleci.com/gh/angular/angular/31309
+test --flaky_test_attempts=2
diff --git a/.circleci/config.yml b/.circleci/config.yml
new file mode 100644
index 000000000000..2469efc165a4
--- /dev/null
+++ b/.circleci/config.yml
@@ -0,0 +1,275 @@
+# 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/
+
+# Variables
+
+## IMPORTANT
+# If you change the `docker_image` version, also change the `cache_key` suffix and the version of
+# `com_github_bazelbuild_buildtools` in the `/WORKSPACE` file.
+var_1: &docker_image angular/ngcontainer:0.3.3
+var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.3.3
+
+# Define common ENV vars
+var_3: &define_env_vars
+  run: echo "export PROJECT_ROOT=$(pwd)" >> $BASH_ENV
+
+# See remote cache documentation in /docs/BAZEL.md
+var_4: &setup-bazel-remote-cache
+  run:
+    name: Start up bazel remote cache proxy
+    command: ~/bazel-remote-proxy -backend circleci://
+    background: true
+
+# Settings common to each job
+anchor_1: &job_defaults
+  working_directory: ~/ng
+  docker:
+    - image: *docker_image
+
+# 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/${CIRCLE_PULL_REQUEST//*pull\//}/merge"
+
+version: 2
+jobs:
+  lint:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
+
+      # Check BUILD.bazel formatting before we have a node_modules directory
+      # Then we don't need any exclude pattern to avoid checking those files
+      - run: 'buildifier -mode=check $(find . -type f \( -name "*.bzl" -or -name BUILD.bazel -or -name BUILD \)) ||
+              (echo "BUILD files not formatted. Please run ''yarn buildifier''" ; exit 1)'
+      # Run the skylark linter to check our Bazel rules
+      # deprecated-api is disabled because we use actions.new_file(genfiles_dir)
+      # which has no replacement, see https://github.com/bazelbuild/bazel/issues/4858
+      - run: 'find . -type f -name "*.bzl" |
+              xargs java -jar /usr/local/bin/Skylint_deploy.jar --disable-checks=deprecated-api ||
+              (echo -e "\n.bzl files have lint errors. Please run ''yarn skylint''"; exit 1)'
+
+      - restore_cache:
+          key: *cache_key
+
+      - run: yarn install --frozen-lockfile --non-interactive
+      - run: ./node_modules/.bin/gulp lint
+
+  test:
+    <<: *job_defaults
+    resource_class: xlarge
+    steps:
+      - *define_env_vars
+      - checkout:
+          <<: *post_checkout
+      # See remote cache documentation in /docs/BAZEL.md
+      - run: .circleci/setup_cache.sh
+      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
+      - *setup-bazel-remote-cache
+
+      - restore_cache:
+          key: *cache_key
+
+      - run: ls /home/circleci/bazel_repository_cache || true
+      - run: bazel info release
+      - run: bazel run @nodejs//:yarn
+      # Use bazel query so that we explicitly ask for all buildable targets to be built as well
+      # This avoids waiting for the slowest build target to finish before running the first test
+      # See https://github.com/bazelbuild/bazel/issues/4257
+      # NOTE: Angular developers should typically just bazel build //packages/... or bazel test //packages/...
+      - run: bazel query --output=label //... | xargs bazel test --build_tag_filters=-ivy-only --test_tag_filters=-manual,-ivy-only
+
+      # CircleCI will allow us to go back and view/download these artifacts from past builds.
+      # Also we can use a service like https://buildsize.org/ to automatically track binary size of these artifacts.
+      # The destination keys need be format {projectName}/{context}/{fileName} so that the github-robot can process them for size calculations
+      # projectName should remain consistant to group files
+      # context and fileName can be almost anything (within usual URI rules)
+      # There should only be exactly 2 forward slashes in the path
+      # This is so they're backwards compatiable with the existing data we have on bundle sizes
+      - store_artifacts:
+          path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js
+          destination: core/hello_world/bundle
+      - store_artifacts:
+          path: dist/bin/packages/core/test/bundling/todo/bundle.min.js
+          destination: core/todo/bundle
+      - store_artifacts:
+          path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js.br
+          destination: core/hello_world/bundle.br
+      - store_artifacts:
+          path: dist/bin/packages/core/test/bundling/todo/bundle.min.js.br
+          destination: core/todo/bundle.br
+      - save_cache:
+          key: *cache_key
+          paths:
+            - "node_modules"
+            - "~/bazel_repository_cache"
+  # Temporary job to test what will happen when we flip the Ivy flag to true
+  test_ivy_jit:
+    <<: *job_defaults
+    resource_class: xlarge
+    steps:
+      - *define_env_vars
+      - checkout:
+          <<: *post_checkout
+      # See remote cache documentation in /docs/BAZEL.md
+      - run: .circleci/setup_cache.sh
+      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
+      - *setup-bazel-remote-cache
+
+      - restore_cache:
+          key: *cache_key
+
+      - run: bazel run @yarn//:yarn
+      - run: bazel query --output=label //... | xargs bazel test --define=compile=jit --build_tag_filters=ivy-jit --test_tag_filters=-manual,ivy-jit
+
+  test_ivy_aot:
+    <<: *job_defaults
+    resource_class: xlarge
+    steps:
+      - *define_env_vars
+      - checkout:
+          <<: *post_checkout
+      # See remote cache documentation in /docs/BAZEL.md
+      - run: .circleci/setup_cache.sh
+      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
+      - *setup-bazel-remote-cache
+
+      - restore_cache:
+          key: *cache_key
+
+      - run: bazel run @yarn//:yarn
+      - run: bazel query --output=label //... | xargs bazel test --define=compile=local --build_tag_filters=ivy-local --test_tag_filters=-manual,ivy-local
+
+  # This job exists only for backwards-compatibility with old scripts and tests
+  # that rely on the pre-Bazel dist/packages-dist layout.
+  # It duplicates some work with the job above: we build the bazel packages
+  # twice. Even though we have a remote cache, these jobs will typically run in
+  # parallel so up-to-date outputs will not be available at the time the build
+  # starts.
+  # No new jobs should depend on this one.
+  build-packages-dist:
+    <<: *job_defaults
+    resource_class: xlarge
+    steps:
+      - *define_env_vars
+      - checkout:
+          <<: *post_checkout
+      # See remote cache documentation in /docs/BAZEL.md
+      - run: .circleci/setup_cache.sh
+      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
+      - *setup-bazel-remote-cache
+
+      - run: bazel run @nodejs//:yarn
+      - run: scripts/build-packages-dist.sh
+
+      # Save the npm packages from //packages/... for other workflow jobs to read
+      # https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - packages-dist
+            - packages-dist-ivy-jit
+            - packages-dist-ivy-local
+
+  # We run the integration tests outside of Bazel for now.
+  # They are a separate workflow job so that they can be easily re-run.
+  # When the tests are ported to bazel test targets, they should move to the "test"
+  # job above, as part of the bazel test command. That has flaky_test_attempts so the
+  # need to re-run manually should be alleviated.
+  # See comments inside the integration/run_tests.sh script.
+  integration_test:
+    <<: *job_defaults
+    # Note: we run Bazel in one of the integration tests, and it can consume >2G
+    # of memory. Together with the system under test, this can exhaust the RAM
+    # on a 4G worker so we use a larger machine here too.
+    resource_class: xlarge
+    steps:
+      - *define_env_vars
+      - checkout:
+          <<: *post_checkout
+      - attach_workspace:
+          at: dist
+      - run: xvfb-run --auto-servernum ./integration/run_tests.sh
+
+  # This job updates the content of repos like github.com/angular/core-builds
+  # for every green build on angular/angular.
+  publish_snapshot:
+    <<: *job_defaults
+    steps:
+      # See below - ideally this job should not trigger for non-upstream builds.
+      # But since it does, we have to check this condition.
+      - run:
+          name: Skip this job for Pull Requests and Fork builds
+          # Note, `|| true` on the end makes this step always exit 0
+          command: '[[
+              -v CIRCLE_PR_NUMBER
+              || "$CIRCLE_PROJECT_USERNAME" != "angular"
+              || "$CIRCLE_PROJECT_REPONAME" != "angular"
+          ]] && circleci step halt || true'
+      - checkout:
+          <<: *post_checkout
+      - attach_workspace:
+          at: dist
+      # CircleCI has a config setting to force SSH for all github connections
+      # This is not compatible with our mechanism of using a Personal Access Token
+      # Clear the global setting
+      - run: git config --global --unset "url.ssh://git@github.com.insteadof"
+      - run:
+          name: Decrypt github credentials
+          command: 'openssl aes-256-cbc -d -in .circleci/github_token -k "${KEY}" -out ~/.git_credentials'
+      - run: ./scripts/ci/publish-build-artifacts.sh
+
+  aio_monitoring:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - run: xvfb-run --auto-servernum ./aio/scripts/test-production.sh
+
+workflows:
+  version: 2
+  default_workflow:
+    jobs:
+      - lint
+      - test
+      - test_ivy_jit
+      - test_ivy_aot
+      - build-packages-dist
+      - integration_test:
+          requires:
+            - build-packages-dist
+      - publish_snapshot:
+          # Note: no filters on this job because we want it to run for all upstream branches
+          # We'd really like to filter out pull requests here, but not yet available:
+          # https://discuss.circleci.com/t/workflows-pull-request-filter/14396/4
+          # Instead, the job just exits immediately at the first step.
+          requires:
+            # Only publish if tests and integration tests pass
+            - test
+            - test_ivy_jit
+            - test_ivy_aot
+            - integration_test
+            # Get the artifacts to publish from the build-packages-dist job
+            # since the publishing script expects the legacy outputs layout.
+            - build-packages-dist
+
+  aio_monitoring:
+    jobs:
+      - aio_monitoring
+    triggers:
+      - schedule:
+          cron: "0 0 * * *"
+          filters:
+            branches:
+              only:
+                - master
diff --git a/.circleci/github_token b/.circleci/github_token
new file mode 100644
index 000000000000..e20db1488733
Binary files /dev/null and b/.circleci/github_token differ
diff --git a/.circleci/setup_cache.sh b/.circleci/setup_cache.sh
new file mode 100755
index 000000000000..232596df4a98
--- /dev/null
+++ b/.circleci/setup_cache.sh
@@ -0,0 +1,11 @@
+#!/bin/sh
+# Install bazel remote cache proxy
+# This is temporary until the feature is no longer experimental on CircleCI.
+# See remote cache documentation in /docs/BAZEL.md
+
+set -u -e
+
+readonly DOWNLOAD_URL="https://5-116431813-gh.circle-artifacts.com/0/pkg/bazel-remote-proxy-$(uname -s)_$(uname -m)"
+
+curl --fail -o ~/bazel-remote-proxy "$DOWNLOAD_URL"
+chmod +x ~/bazel-remote-proxy
diff --git a/.gitattributes b/.gitattributes
index b7ca95b5b77a..0acf0cd70da0 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,5 +1,9 @@
 # Auto detect text files and perform LF normalization
 * text=auto
 
-# JS files must always use LF for tools to work
+# JS and TS files must always use LF for tools to work
 *.js eol=lf
+*.ts eol=lf
+
+# Must keep Windows line ending to be parsed correctly
+scripts/windows/packages.txt eol=crlf
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 000000000000..ac818aa530c2
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,59 @@
+<!--
+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 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 -->
+[ ] Performance issue
+[ ] 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
+[ ] Other... Please describe:
+</code></pre>
+
+## Current behavior
+<!-- Describe how the issue manifests. -->
+
+
+## Expected behavior
+<!-- Describe what the desired behavior would be. -->
+
+
+## Minimal reproduction of the problem with instructions
+<!--
+For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
+https://stackblitz.com or similar (you can use this template as a starting point: https://stackblitz.com/fork/angular-gitter).
+-->
+
+## What is the motivation / use case for changing the behavior?
+<!-- Describe the motivation or the concrete use case. -->
+
+
+## Environment
+
+<pre><code>
+Angular version: X.Y.Z
+<!-- Check whether this is still an issue in the most recent Angular version -->
+
+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
+ 
+For Tooling issues:
+- Node version: XX  <!-- run `node --version` -->
+- Platform:  <!-- Mac, Linux, Windows -->
+
+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
new file mode 100644
index 000000000000..b74eed5b0809
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,43 @@
+## 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)
+
+
+## PR Type
+What kind of change does this PR introduce?
+
+<!-- Please check the one that applies to this PR using "x". -->
+```
+[ ] Bugfix
+[ ] Feature
+[ ] Code style update (formatting, local variables)
+[ ] 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?
+<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
+
+Issue Number: N/A
+
+
+## What is the new behavior?
+
+
+## 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 below. -->
+
+
+## Other information
diff --git a/.github/angular-robot.yml b/.github/angular-robot.yml
new file mode 100644
index 000000000000..d807d258e1cd
--- /dev/null
+++ b/.github/angular-robot.yml
@@ -0,0 +1,129 @@
+# Configuration for angular-robot
+
+#options for the size plugin
+size:
+  disabled: false
+  maxSizeIncrease: 1000
+  circleCiStatusName: "ci/circleci: build-packages-dist"
+  status:
+    disabled: false
+    context: "ci/angular: size"
+
+# options for the merge plugin
+merge:
+  # the status will be added to your pull requests
+  status:
+    # set to true to disable
+    disabled: false
+    # the name of the status
+    context: "ci/angular: merge status"
+    # text to show when all checks pass
+    successText: "All checks passed!"
+    # text to show when some checks are failing
+    failureText: "The following checks are failing:"
+
+  # the g3 status will be added to your pull requests if they include files that match the patterns
+  g3Status:
+    # set to true to disable
+    disabled: false
+    # the name of the status
+    context: "google3"
+    # text to show when the status is pending, {{PRNumber}} will be replaced by the PR number
+    pendingDesc: "Googler: run g3sync presubmit {{PRNumber}}"
+    # text to show when the status is success
+    successDesc: "Does not affect google3"
+    # link to use for the details
+    url: "http://go/angular-g3sync"
+    # list of patterns to check for the files changed by the PR
+    # this list must be manually kept in sync with google3/third_party/javascript/angular2/copy.bara.sky
+    include:
+      - "LICENSE"
+      - "modules/**"
+      - "packages/**"
+    # list of patterns to ignore for the files changed by the PR
+    exclude:
+      - "packages/language-service/**"
+      - "**/.gitignore"
+      - "**/.gitkeep"
+      - "**/package.json"
+      - "**/tsconfig-build.json"
+      - "**/tsconfig.json"
+      - "**/rollup.config.js"
+      - "**/BUILD.bazel"
+      - "packages/**/integrationtest/**"
+      - "packages/**/test/**"
+
+  # comment that will be added to a PR when there is a conflict, leave empty or set to false to disable
+  mergeConflictComment: "Hi @{{PRAuthor}}! This PR has merge conflicts due to recent upstream merges.
+\nPlease help to unblock it by resolving these conflicts. Thanks!"
+
+  # label to monitor
+  mergeLabel: "PR action: merge"
+
+  # list of checks that will determine if the merge label can be added
+  checks:
+
+    # require that the PR has reviews from all requested reviewers
+    #
+    # This enables us to request reviews from both eng and tech writers, or multiple eng folks, and prevents accidental merges.
+    # Rather than merging PRs with pending reviews, if all PullApprove requirements are satisfied and additional reviews are not needed pending reviewers should be removed via GitHub UI (this also leaves an audit trail behind these decisions).
+    requireReviews: true,
+  
+    # whether the PR shouldn't have a conflict with the base branch
+    noConflict: true
+    # list of labels that a PR needs to have, checked with a regexp (e.g. "PR target:" will work for the label "PR target: master")
+    requiredLabels:
+      - "PR target: *"
+      - "cla: yes"
+
+    # list of labels that a PR shouldn't have, checked after the required labels with a regexp
+    forbiddenLabels:
+      - "PR target: TBD"
+      - "PR action: cleanup"
+      - "PR action: review"
+      - "PR state: blocked"
+      - "cla: no"
+
+    # list of PR statuses that need to be successful
+    requiredStatuses:
+      - "continuous-integration/travis-ci/pr"
+      - "code-review/pullapprove"
+      - "ci/circleci: build"
+      - "ci/circleci: lint"
+
+  # the comment that will be added when the merge label is added despite failing checks, leave empty or set to false to disable
+  # {{MERGE_LABEL}} will be replaced by the value of the mergeLabel option
+  # {{PLACEHOLDER}} will be replaced by the list of failing checks
+  mergeRemovedComment: "I see that you just added the `{{MERGE_LABEL}}` label, but the following checks are still failing:
+\n{{PLACEHOLDER}}
+\n
+\n**If you want your PR to be merged, it has to pass all the CI checks.**
+\n
+\nIf you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help."
+
+# options for the triage plugin
+triage:
+  # number of the milestone to apply when the issue has not been triaged yet
+  needsTriageMilestone: 83,
+  # number of the milestone to apply when the issue is triaged
+  defaultMilestone: 82,
+  # arrays of labels that determine if an issue has been triaged by the caretaker
+  l1TriageLabels:
+    -
+      - "comp: *"
+  # arrays of labels that determine if an issue has been fully triaged
+  l2TriageLabels:
+    -
+      - "type: bug/fix"
+      - "severity*"
+      - "freq*"
+      - "comp: *"
+    -
+      - "type: feature"
+      - "comp: *"
+    -
+      - "type: refactor"
+      - "comp: *"
+    -
+      - "type: RFC / Discussion / question"
+      - "comp: *"
diff --git a/.gitignore b/.gitignore
index 2e93d12431ba..eae2571fe11d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,40 +1,32 @@
 .DS_STORE
 
-# Don’t commit the following directories created by pub.
-packages
-pubspec.lock
-.pub
-.packages
-
 /dist/
-.buildlog
+bazel-*
+e2e_test.*
 node_modules
 bower_components
-
-# Or broccoli working directory
-tmp
-
-# Or the files created by dart2js.
-*.dart.js
-*.dart.precompiled.js
-*.js_
-*.js.deps
-*.js.map
-
-# Or type definitions we mirror from github
-**/typings/**/*.d.ts
-**/typings/tsd.cached.json
+tools/gulp-tasks/cldr/cldr-data/
 
 # Include when developing application packages.
 pubspec.lock
 .c9
 .idea/
+.settings/
 *.swo
+modules/.settings
+.bazelrc
+.vscode
+modules/.vscode
 
 # Don't check in secret files
 *secret.js
 
-# Ignore npm debug log
+# Ignore npm/yarn debug log
 npm-debug.log
+yarn-error.log
+
+# build-analytics
+.build-analytics
 
-/docs/bower_components/
+# rollup-test output
+/modules/rollup-test/dist/
diff --git a/.mailmap b/.mailmap
new file mode 100644
index 000000000000..1f2f86feb549
--- /dev/null
+++ b/.mailmap
@@ -0,0 +1 @@
+Michał Gołębiowski-Owczarek <m.goleb@gmail.com>
diff --git a/.nvmrc b/.nvmrc
index c43e1055fd3f..fa97ecedc28f 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-0.12
+8.9
diff --git a/.pullapprove.yml b/.pullapprove.yml
new file mode 100644
index 000000000000..6bdd9ccb9f79
--- /dev/null
+++ b/.pullapprove.yml
@@ -0,0 +1,539 @@
+# Configuration for pullapprove.com
+#
+# Approval access and primary role is determined by info in the project ownership spreadsheet:
+# https://docs.google.com/spreadsheets/d/1-HIlzfbPYGsPr9KuYMe6bLfc4LXzPjpoALqtYRYTZB0/edit?pli=1#gid=0&vpid=A5
+#
+# === GitHub username to Full name map ===
+#
+# alexeagle - Alex Eagle
+# alxhub - Alex Rickabaugh
+# andrewseguin - Andrew Seguin
+# benlesh - Ben Lesh
+# brandonroberts - Brandon Roberts
+# brocco - Mike Brocchi
+# filipesilva - Filipe Silva
+# gkalpak - George Kalpakas
+# hansl - Hans Larsen
+# IgorMinar - Igor Minar
+# jasonaden - Jason Aden
+# jenniferfell - Jennifer Fell
+# kara - Kara Erickson
+# kyliau - Keen Yee Liau
+# matsko - Matias Niemelä
+# mhevery - Misko Hevery
+# petebacondarwin - Pete Bacon Darwin
+# pkozlowski-opensource - Pawel Kozlowski
+# robwormald - Rob Wormald
+# vicb - Victor Berchet
+# vikerman - Vikram Subramanian
+
+
+version: 2
+
+group_defaults:
+  required: 1
+  reset_on_reopened:
+    enabled: true
+  approve_by_comment:
+    enabled: false
+  # see http://docs.pullapprove.com/groups/author_approval/
+  author_approval:
+    # If the author is a reviewer on the PR, they will automatically have an "approved" status.
+    auto: true
+
+groups:
+  # Require all PRs to have at least one approval from *someone*
+  all:
+    users: all
+    required: 1
+    rejection_value: -999
+    # In this group, your self-approval does not count
+    author_approval:
+      auto: false
+      ignored: true
+    files:
+      include:
+        - "*"
+
+  root:
+    conditions:
+      files:
+        include:
+          - "*"
+        exclude:
+          - "WORKSPACE"
+          - "BUILD.bazel"
+          - ".circleci/*"
+          - "aio/*"
+          - "integration/*"
+          - "modules/*"
+          - "packages/*"
+          - "tools/*"
+    users:
+      - alexeagle
+      - IgorMinar
+      - mhevery
+
+  public-api:
+    conditions:
+      files:
+        include:
+          - "tools/public_api_guard/*"
+    users:
+      - IgorMinar
+      - mhevery
+
+  bazel:
+    conditions:
+      files:
+        include:
+          - "WORKSPACE"
+          - "*.bazel"
+          - "*.bzl"
+          - "packages/bazel/*"
+          - "tools/bazel.rc"
+          - "/docs/BAZEL.md"
+    users:
+      - alexeagle #primary
+      - kyliau
+      - IgorMinar #fallback
+      - mhevery
+      - vikerman #fallback
+
+  build-and-ci:
+    conditions:
+      files:
+        include:
+          - "*.yml"
+          - "*.json"
+          - "*.lock"
+          - "tools/*"
+        exclude:
+          - "tools/bazel.rc"
+          - "tools/public_api_guard/*"
+          - "aio/*"
+    users:
+      - IgorMinar #primary
+      - alexeagle
+      - jasonaden
+      - mhevery #fallback
+
+  integration:
+    conditions:
+      files:
+        - "integration/*"
+    users:
+      - alexeagle
+      - mhevery
+      - vicb
+      - IgorMinar #fallback
+
+  core:
+    conditions:
+      files:
+        - "packages/core/*"
+        - "aio/content/guide/bootstrapping.md"
+        - "aio/content/examples/bootstrapping/*"
+        - "aio/content/guide/attribute-directives.md"
+        - "aio/content/examples/attribute-directives/*"
+        - "aio/content/images/guide/attribute-directives/*"
+        - "aio/content/guide/structural-directives.md"
+        - "aio/content/examples/structural-directives/*"
+        - "aio/content/images/guide/structural-directives/*"
+        - "aio/content/guide/dynamic-component-loader.md"
+        - "aio/content/examples/dynamic-component-loader/*"
+        - "aio/content/images/guide/dynamic-component-loader/*"
+        - "aio/content/guide/template-syntax.md"
+        - "aio/content/examples/template-syntax/*"
+        - "aio/content/images/guide/template-syntax/*"
+        - "aio/content/guide/dependency-injection.md"
+        - "aio/content/examples/dependency-injection/*"
+        - "aio/content/images/guide/dependency-injection/*"
+        - "aio/content/guide/dependency-injection-in-action.md"
+        - "aio/content/examples/dependency-injection-in-action/*"
+        - "aio/content/images/guide/dependency-injection-in-action/*"
+        - "aio/content/guide/hierarchical-dependency-injection.md"
+        - "aio/content/examples/hierarchical-dependency-injection/*"
+        - "aio/content/guide/singleton-services.md"
+        - "aio/content/guide/dependency-injection-pattern.md"
+        - "aio/content/guide/providers.md"
+        - "aio/content/examples/providers/*"
+        - "aio/content/guide/component-interaction.md"
+        - "aio/content/examples/component-interaction/*"
+        - "aio/content/images/guide/component-interaction/*"
+        - "aio/content/guide/component-styles.md"
+        - "aio/content/examples/component-styles/*"
+        - "aio/content/guide/lifecycle-hooks.md"
+        - "aio/content/examples/lifecycle-hooks/*"
+        - "aio/content/images/guide/lifecycle-hooks/*"
+        - "aio/content/examples/ngcontainer/*"
+        - "aio/content/images/guide/ngcontainer/*"
+        - "aio/content/guide/pipes.md"
+        - "aio/content/examples/pipes/*"
+        - "aio/content/images/guide/pipes/*"
+        - "aio/content/guide/entry-components.md"
+        - "aio/content/guide/set-document-title.md"
+        - "aio/content/examples/set-document-title/*"
+        - "aio/content/images/guide/set-document-title/*"
+        - "aio/content/guide/ngmodules.md"
+        - "aio/content/examples/ngmodules/*"
+        - "aio/content/examples/ngmodule/*"
+        - "aio/content/images/guide/ngmodule/*"
+        - "aio/content/guide/ngmodule-faq.md"
+        - "aio/content/examples/ngmodule-faq/*"
+        - "aio/content/guide/module-types.md"
+        - "aio/content/guide/sharing-ngmodules.md"
+        - "aio/content/guide/frequent-ngmodules.md"
+        - "aio/content/images/guide/frequent-ngmodules/*"
+        - "aio/content/guide/ngmodule-api.md"
+        - "aio/content/guide/ngmodule-vs-jsmodule.md"
+        - "aio/content/guide/feature-modules.md"
+        - "aio/content/examples/feature-modules/*"
+        - "aio/content/images/guide/feature-modules/*"
+        - "aio/content/guide/lazy-loading-ngmodules.md"
+        - "aio/content/examples/lazy-loading-ngmodules/*"
+        - "aio/content/images/guide/lazy-loading-ngmodules"
+    users:
+      - mhevery #primary
+      - jasonaden
+      - kara
+      - vicb
+      - IgorMinar
+      - jenniferfell #docs only
+
+  animations:
+    conditions:
+      files:
+        - "packages/animations/*"
+        - "packages/platform-browser/animations/*"
+        - "aio/content/guide/animations.md"
+        - "aio/content/examples/animations/*"
+        - "aio/content/images/guide/animations/*"
+    users:
+      - matsko #primary
+      - mhevery #fallback
+      - IgorMinar #fallback
+      - jenniferfell #docs only
+
+  compiler/i18n:
+    conditions:
+      files:
+        - "packages/compiler/src/i18n/*"
+        - "aio/content/guide/i18n.md"
+        - "aio/content/examples/i18n/*"
+    users:
+      - vicb #primary
+      - alxhub
+      - IgorMinar #fallback
+      - mhevery #fallback
+      - jenniferfell #docs only
+
+  compiler:
+    conditions:
+      files:
+        - "packages/compiler/*"
+        - "aio/content/guide/aot-compiler.md"
+    users:
+      - alxhub #primary
+      - vicb
+      - mhevery
+      - IgorMinar #fallback
+      - jenniferfell #docs only
+
+  compiler-cli/ngtools:
+    conditions:
+      files:
+        - "packages/compiler-cli/src/ngtools*"
+    users:
+      - hansl
+      - filipesilva #fallback
+      - IgorMinar #fallback
+
+  compiler-cli:
+    conditions:
+      files:
+        include:
+          - "packages/compiler-cli/*"
+          - "packages/bazel/*"
+        exclude:
+          - "packages/compiler-cli/src/ngtools*"
+    users:
+      - alexeagle
+      - alxhub
+      - vicb
+      - IgorMinar #fallback
+      - mhevery #fallback
+
+  common:
+    conditions:
+      files:
+        include:
+          - "packages/common/*"
+        exclude:
+          - "packages/common/http/*"
+    users:
+      - pkozlowski-opensource #primary
+      - vicb
+      - IgorMinar #fallback
+      - mhevery #fallback
+
+  forms:
+    conditions:
+      files:
+        - "packages/forms/*"
+        - "aio/content/guide/forms.md"
+        - "aio/content/examples/forms/*"
+        - "aio/content/images/guide/forms/*"
+        - "aio/content/guide/form-validation.md"
+        - "aio/content/examples/form-validation/*"
+        - "aio/content/images/guide/form-validation/*"
+        - "aio/content/guide/dynamic-form.md"
+        - "aio/content/examples/dynamic-form/*"
+        - "aio/content/images/guide/dynamic-form/*"
+        - "aio/content/guide/reactive-forms.md"
+        - "aio/content/examples/reactive-forms/*"
+        - "aio/content/images/guide/reactive-forms/*"
+    users:
+      - kara #primary
+      - IgorMinar #fallback
+      - mhevery #fallback
+      - jenniferfell #docs only
+
+  http:
+    conditions:
+      files:
+        - "packages/common/http/*"
+        - "packages/http/*"
+        - "aio/content/guide/http.md"
+        - "aio/content/examples/http/*"
+        - "aio/content/images/guide/http/*"
+    users:
+      - alxhub #primary
+      - IgorMinar
+      - mhevery #fallback
+      - jenniferfell #docs only
+
+  language-service:
+    conditions:
+      files:
+        - "packages/language-service/*"
+        - "aio/content/guide/language-service.md"
+        - "aio/content/images/guide/language-service/*"
+    users:
+      - kyliau #primary
+      # needs secondary
+      - vicb
+      - IgorMinar #fallback
+      - mhevery #fallback
+      - jenniferfell #docs only
+
+  router:
+    conditions:
+      files:
+        - "packages/router/*"
+        - "aio/content/guide/router.md"
+        - "aio/content/examples/router/*"
+        - "aio/content/images/guide/router/*"
+    users:
+      - jasonaden #primary
+      - vicb
+      - IgorMinar #fallback
+      - mhevery #fallback
+      - jenniferfell #docs only
+
+  testing:
+    conditions:
+      files:
+        - "*/testing/*"
+        - "aio/content/guide/testing.md"
+        - "aio/content/examples/testing/*"
+        - "aio/content/images/guide/testing/*"
+    users:
+      - vikerman
+      - IgorMinar #fallback
+      - mhevery #fallback
+      - jenniferfell #docs only
+
+  upgrade:
+    conditions:
+      files:
+        - "packages/upgrade/*"
+        - "aio/content/guide/upgrade.md"
+        - "aio/content/examples/upgrade-module/*"
+        - "aio/content/images/guide/upgrade/*"
+        - "aio/content/examples/upgrade-phonecat-1-typescript/*"
+        - "aio/content/examples/upgrade-phonecat-2-hybrid/*"
+        - "aio/content/examples/upgrade-phonecat-3-final/*"
+        - "aio/content/guide/upgrade-performance.md"
+        - "aio/content/guide/ajs-quick-reference.md"
+        - "aio/content/examples/ajs-quick-reference/*"
+    users:
+      - petebacondarwin #primary
+      - gkalpak
+      - IgorMinar #fallback
+      - mhevery #fallback
+      - jenniferfell #docs only
+
+  platform-browser:
+    conditions:
+      files:
+        - "packages/platform-browser/*"
+    users:
+      - vicb #primary
+      # needs secondary
+      - IgorMinar #fallback
+      - mhevery #fallback
+
+  platform-server:
+    conditions:
+      files:
+        - "packages/platform-server/*"
+        - "aio/content/guide/universal.md"
+        - "aio/content/examples/universal/*"
+    users:
+      - vikerman #primary
+      - alxhub #secondary
+      - vicb
+      - IgorMinar #fallback
+      - mhevery #fallback
+      - jenniferfell #docs only
+
+  platform-webworker:
+    conditions:
+      files:
+        - "packages/platform-webworker/*"
+    users:
+      - vicb #primary
+      # needs secondary
+      - IgorMinar #fallback
+      - mhevery #fallback
+
+  service-worker:
+    conditions:
+      files:
+        - "packages/service-worker/*"
+        - "aio/content/guide/service-worker-getting-started.md"
+        - "aio/content/examples/service-worker-getting-started/*"
+        - "aio/content/guide/service-worker-communications.md"
+        - "aio/content/guide/service-worker-config.md"
+        - "aio/content/guide/service-worker-devops.md"
+        - "aio/content/guide/service-worker-intro.md"
+        - "aio/content/images/guide/service-worker/*"
+    users:
+      - gkalpak #primary
+      - alxhub
+      - IgorMinar
+      - mhevery #fallback
+      - jenniferfell #docs only
+
+  elements:
+    conditions:
+      files:
+        - "packages/elements/*"
+        - "aio/content/examples/elements/*"
+        - "aio/content/images/guide/elements/*"
+        - "aio/content/guide/elements.md"
+    users:
+      - andrewseguin #primary
+      - gkalpak
+      - robwormald
+      - IgorMinar #fallback
+      - mhevery #fallback
+      - jenniferfell #docs only
+
+  benchpress:
+    conditions:
+      files:
+        - "packages/benchpress/*"
+    users:
+      - alxhub # primary
+      # needs secondary
+      - IgorMinar #fallback
+      - mhevery #fallback
+
+  docs-infra:
+    conditions:
+      files:
+        include:
+          - "aio/*"
+        exclude:
+          - "aio/content/*"
+    users:
+      - petebacondarwin #primary
+      - IgorMinar
+      - gkalpak
+      - mhevery #fallback
+
+  docs/guide-and-tutorial:
+    conditions:
+      files:
+        include:
+          - "aio/content/*"
+        exclude:
+          - "aio/content/marketing/*"
+          - "aio/content/navigation.json"
+          - "aio/content/license.md"
+    users:
+      - stephenfluin
+      - jenniferfell
+      - brandonroberts
+      - petebacondarwin
+      - gkalpak
+      - IgorMinar
+      - mhevery #fallback
+
+  docs/marketing:
+    conditions:
+      files:
+        include:
+          - "aio/content/marketing/*"
+          - "aio/content/images/marketing/*"
+          - "aio/content/navigation.json"
+          - "aio/content/license.md"
+    users:
+      - stephenfluin
+      - petebacondarwin
+      - gkalpak
+      - IgorMinar
+      - robwormald
+      - mhevery #fallback
+
+  docs/observables:
+    conditions:
+      files:
+        - "aio/content/examples/observables/*"
+        - "aio/content/images/guide/observables/*"
+        - "aio/content/guide/observables.md"
+        - "aio/content/guide/comparing-observables.md"
+        - "aio/content/examples/observables-in-angular/*"
+        - "aio/content/images/guide/observables-in-angular/*"
+        - "aio/content/guide/observables-in-angular.md"
+        - "aio/content/examples/practical-observable-usage/*"
+        - "aio/content/guide/practical-observable-usage.md"
+        - "aio/content/examples/rx-library/*"
+        - "aio/content/guide/rx-library.md"
+    users:
+      - jasonaden
+      - benlesh
+      - IgorMinar
+      - mhevery
+      - jenniferfell #docs only
+
+  docs/packaging:
+    conditions:
+      files:
+        - "aio/content/guide/npm-packages.md"
+        - "aio/content/guide/browser-support.md"
+        - "aio/content/guide/typescript-configuration.md"
+        - "aio/content/guide/setup-systemjs-anatomy.md"
+        - "aio/content/examples/setup/*"
+        - "aio/content/guide/setup.md"
+        - "aio/content/guide/deployment.md"
+        - "aio/content/guide/releases.md"
+        - "aio/content/guide/updating.md"
+    users:
+      - IgorMinar #primary
+      - alexeagle
+      - hansl
+      - mhevery #fallback
+      - jenniferfell #docs only
diff --git a/.settings/settings.json b/.settings/settings.json
deleted file mode 100644
index 3c0bb208e954..000000000000
--- a/.settings/settings.json
+++ /dev/null
@@ -1,12 +0,0 @@
-// Place your settings in this file to overwrite default and user settings.
-{
-	"search.excludeFolders": [
-		".git",
-		"node_modules",
-		"bower_components",
-		"packages",
-		"build",
-		"dist",
-		"tmp"
-	]
-}
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
index 33320bad8b8d..e06b84fa54b6 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,70 +1,80 @@
 language: node_js
 sudo: false
+dist: trusty
 node_js:
-- '0.12'
+  - '8.9.1'
+
+addons:
+#  firefox: "38.0"
+  apt:
+    sources:
+      # needed to install g++ that is used by npms's native modules
+      - ubuntu-toolchain-r-test
+    packages:
+      # needed to install g++ that is used by npms's native modules
+      - g++-4.8
+  # https://docs.travis-ci.com/user/jwt
+  jwt:
+    # SAUCE_ACCESS_KEY<=secret for NGBUILDS_IO_KEY to work around travis-ci/travis-ci#7223, unencrypted value in valentine as NGBUILDS_IO_KEY>
+    # we alias NGBUILDS_IO_KEY to $SAUCE_ACCESS_KEY in env.sh and set the SAUCE_ACCESS_KEY there
+    - secure: "L7nrZwkAtFtYrP2DykPXgZvEKjkv0J/TwQ/r2QGxFTaBq4VZn+2Dw0YS7uCxoMqYzDwH0aAOqxoutibVpk8Z/16nE3tNmU5RzltMd6Xmt3qU2f/JDQLMo6PSlBodnjOUsDHJgmtrcbjhqrx/znA237BkNUu6UZRT7mxhXIZpn0U="
+branches:
+  except:
+    - g3
 
 cache:
+  yarn: true
   directories:
-    - node_modules
-    - $HOME/.pub-cache
+     - ./node_modules
+     - ./.chrome/chromium
+     - ./aio/node_modules
 
 env:
   global:
-  - KARMA_BROWSERS=DartiumWithWebPlatform
-  - E2E_BROWSERS=Dartium
-  - LOGS_DIR=/tmp/angular-build/logs
-  - ARCH=linux-x64
-  # Token for tsd to increase github rate limit
-  # See https://github.com/DefinitelyTyped/tsd#tsdrc
-  # This does not use http://docs.travis-ci.com/user/environment-variables/#Secure-Variables
-  # because those are not visible for pull requests, and those should also be reliable.
-  # This SSO token belongs to github account angular-github-ratelimit-token which has no access
-  # (password is in Valentine)
-  - TSDRC='{"token":"ef474500309daea53d5991b3079159a29520a40b"}'
+    # 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: "aCdHveZuY8AT4Jr1JoJB4LxZsnGWRe/KseZh1YXYe5UtufFCtTVHvUcLn0j2aLBF0KpdyS+hWf0i4np9jthKu2xPKriefoPgCMpisYeC0MFkwbmv+XlgkUbgkgVZMGiVyX7DCYXVahxIoOUjVMEDCbNiHTIrfEuyq24U3ok2tHc="
+    # FIREBASE_TOKEN
+    # 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:
-  - MODE=js DART_CHANNEL=dev
-  - MODE=dart DART_CHANNEL=stable
-  # Deactivate dev mode for Dart as there are breaking changes.
-  # Reactivate when https://github.com/angular/angular/issues/2798 is fixed!
-  # (Note: we need the dev channel as Google3 is close to it and ahead of stable channel)
-  # - MODE=dart DART_CHANNEL=dev
+    # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
+    - CI_MODE=e2e
+    - CI_MODE=js
+    - CI_MODE=saucelabs_required
+    # deactivated, see #19768
+    # - CI_MODE=browserstack_required
+    - CI_MODE=saucelabs_optional
+    - CI_MODE=browserstack_optional
+    - CI_MODE=aio_tools_test
+    - CI_MODE=aio
+    - CI_MODE=aio_e2e AIO_SHARD=0
+    - CI_MODE=aio_e2e AIO_SHARD=1
 
-addons:
-  firefox: "38.0"
+matrix:
+  fast_finish: true
+  allow_failures:
+    - env: "CI_MODE=saucelabs_optional"
+    - env: "CI_MODE=browserstack_optional"
 
 before_install:
-- echo ${TSDRC} > .tsdrc
-- export DISPLAY=:99.0
-- export GIT_SHA=$(git rev-parse HEAD)
-- ./scripts/ci/init_android.sh
-- ./scripts/ci/install_dart.sh ${DART_CHANNEL} ${ARCH}
-- sh -e /etc/init.d/xvfb start
-- if [[ -e SKIP_TRAVIS_TESTS ]]; then { cat SKIP_TRAVIS_TESTS ; exit 0; } fi
+  # source the env.sh script so that the exported variables are available to other scripts later on
+  - source ./scripts/ci/env.sh print
 
 install:
-  # Update npm
-  - npm install -g npm@2.9.1
-  - npm --version
-  # Check the size of caches
-  - du -sh ./node_modules || true
-  # Install npm dependecies
-  - npm install
-
-before_script:
-- mkdir -p $LOGS_DIR
+  - ./scripts/ci/install.sh
 
 script:
-- ./scripts/ci/build_and_test.sh ${MODE}
-
-after_script:
-- ./scripts/ci/print-logs.sh
-
-notifications:
-  webhooks:
-    urls:
-    - https://webhooks.gitter.im/e/1ef62e23078036f9cee4
-    on_success: change  # options: [always|never|change] default: always
-    on_failure: always  # options: [always|never|change] default: always
-    on_start: false     # default: false
-  slack:
-    secure: EP4MzZ8JMyNQJ4S3cd5LEPWSMjC7ZRdzt3veelDiOeorJ6GwZfCDHncR+4BahDzQAuqyE/yNpZqaLbwRWloDi15qIUsm09vgl/1IyNky1Sqc6lEknhzIXpWSalo4/T9ZP8w870EoDvM/UO+LCV99R3wS8Nm9o99eLoWVb2HIUu0=
+  - ./scripts/ci/build.sh
+  - ./scripts/ci/test.sh
+  # deploy is part of 'script' and not 'after_success' so that we fail the build if the deployment fails
+  - ./scripts/ci/deploy.sh
+  - ./scripts/ci/angular.sh
+  # all the scripts under this line will not quickly abort in case ${TRAVIS_TEST_RESULT} is 1 (job failure)
+  - ./scripts/ci/cleanup.sh
+  - ./scripts/ci/print-logs.sh
diff --git a/BUILD.bazel b/BUILD.bazel
new file mode 100644
index 000000000000..ed2e3b7975fa
--- /dev/null
+++ b/BUILD.bazel
@@ -0,0 +1,45 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "node_modules_filegroup")
+
+exports_files([
+    "tsconfig.json",
+    "LICENSE",
+    "protractor-perf.conf.js",
+])
+
+# Developers should always run `bazel run :install`
+# This ensures that package.json in subdirectories get installed as well.
+alias(
+    name = "install",
+    actual = "@nodejs//:yarn",
+)
+
+alias(
+    name = "node_modules",
+    actual = "@angular_deps//:node_modules",
+)
+
+filegroup(
+    name = "web_test_bootstrap_scripts",
+    # do not sort
+    srcs = [
+        "@angular_deps//:node_modules/reflect-metadata/Reflect.js",
+        "@angular_deps//:node_modules/zone.js/dist/zone.js",
+        "@angular_deps//:node_modules/zone.js/dist/zone-testing.js",
+        "@angular_deps//:node_modules/zone.js/dist/task-tracking.js",
+        "//:test-events.js",
+    ],
+)
+
+filegroup(
+    name = "angularjs_scripts",
+    srcs = [
+        "@angular_deps//:node_modules/angular-1.5/angular.js",
+        "@angular_deps//:node_modules/angular-1.6/angular.js",
+        "@angular_deps//:node_modules/angular-mocks-1.5/angular-mocks.js",
+        "@angular_deps//:node_modules/angular-mocks-1.6/angular-mocks.js",
+        "@angular_deps//:node_modules/angular-mocks/angular-mocks.js",
+        "@angular_deps//:node_modules/angular/angular.js",
+    ],
+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a500efa83707..f3fd561d5fd7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,690 +1,3301 @@
-<a name"2.0.0-alpha.29"></a>
-### 2.0.0-alpha.29 (2015-07-01)
-
-
-#### Bug Fixes
-
-* export top-level pipe factories as const ([393f703a](https://github.com/angular/angular/commit/393f703a))
-* **Router:** mark Pipeline and RouteRegistry as Injectable ([eea989be](https://github.com/angular/angular/commit/eea989be))
-* **build:**
-  * Reduce rx typings to what we actually require. ([8bab6dd2](https://github.com/angular/angular/commit/8bab6dd2))
-  * add missing return types now enforced by linter ([44891996](https://github.com/angular/angular/commit/44891996))
-  * fix paths in `test.typings` task ([1c8a5896](https://github.com/angular/angular/commit/1c8a5896))
-* **bundle:**
-  * don’t bundle traceur/reflect into benchpress - amended change ([d629ed7d](https://github.com/angular/angular/commit/d629ed7d))
-  * don’t bundle traceur/reflect into benchpress ([da4de21f](https://github.com/angular/angular/commit/da4de21f))
-* **change detectors:** Fix deduping of protos in transformed dart mode. ([73a939e7](https://github.com/angular/angular/commit/73a939e7))
-* **compiler:** don't trigger duplicated directives ([0598226e](https://github.com/angular/angular/commit/0598226e), closes [#2756](https://github.com/angular/angular/issues/2756), [#2568](https://github.com/angular/angular/issues/2568))
-* **docs:**
-  * to run js test 'gulp docs' is needed ([3e650378](https://github.com/angular/angular/commit/3e650378), closes [#2762](https://github.com/angular/angular/issues/2762))
-  * link to clang-format ([f1cf5298](https://github.com/angular/angular/commit/f1cf5298))
-* **dynamic_component_loader:** check whether the dynamically loaded component has already been destroyed ([d6cef88d](https://github.com/angular/angular/commit/d6cef88d), closes [#2748](https://github.com/angular/angular/issues/2748), [#2767](https://github.com/angular/angular/issues/2767))
-* **transformer:**
-  * Add getters for `events`. ([5a21dc53](https://github.com/angular/angular/commit/5a21dc53))
-  * Don't hang on bad urls and log better errors ([d037c082](https://github.com/angular/angular/commit/d037c082))
-  * Fix annotation_matcher for NgForm directive. ([9c768501](https://github.com/angular/angular/commit/9c768501))
-* **typings:** Minor issues preventing angular2.d.ts from working in TS 1.4. ([7a4a3c85](https://github.com/angular/angular/commit/7a4a3c85))
-
-
-#### Features
-
-* upgrade clang-format and gulp-clang-format. ([1f7296c0](https://github.com/angular/angular/commit/1f7296c0))
-* **NgStyle:** add new NgStyle directive ([b50edfd1](https://github.com/angular/angular/commit/b50edfd1), closes [#2665](https://github.com/angular/angular/issues/2665))
-* **async:** added PromiseWrapper.wrap ([b688dee4](https://github.com/angular/angular/commit/b688dee4))
-* **benchpress:** initial support for firefox ([0949a4b0](https://github.com/angular/angular/commit/0949a4b0), closes [#2419](https://github.com/angular/angular/issues/2419))
-* **build:** add tslint to the build. ([bc585f27](https://github.com/angular/angular/commit/bc585f27))
-* **di:**
-  * removed app injector ([f0e962c5](https://github.com/angular/angular/commit/f0e962c5))
-  * changed InstantiationError to print the original stack ([eb0fd796](https://github.com/angular/angular/commit/eb0fd796))
-* **facade:** add ListWrapper.toJSON method ([23350755](https://github.com/angular/angular/commit/23350755))
-* **http:** refactor library to work in dart ([55bf0e55](https://github.com/angular/angular/commit/55bf0e55), closes [#2415](https://github.com/angular/angular/issues/2415))
-* **lang:** added originalException and originalStack to BaseException ([56245c6a](https://github.com/angular/angular/commit/56245c6a))
-* **pipes:**
-  * add limitTo pipe ([0b502588](https://github.com/angular/angular/commit/0b502588))
-  * support arguments in transform function ([600d53c6](https://github.com/angular/angular/commit/600d53c6))
-* **router:** support deep-linking to anywhere in the app ([f66ce096](https://github.com/angular/angular/commit/f66ce096), closes [#2642](https://github.com/angular/angular/issues/2642))
-* **transformers:** provide a flag to disable inlining views ([dcdd7306](https://github.com/angular/angular/commit/dcdd7306), closes [#2658](https://github.com/angular/angular/issues/2658))
-
-
-#### Breaking Changes
-
-* 
-THe appInjector property has been removed. Instead use viewInjector or hostInjector.
-
- ([f0e962c5](https://github.com/angular/angular/commit/f0e962c5))
-*     The Http module previously would return RxJS Observables from method calls
-    of the Http class. In order to support Dart, the module was refactored to
-    return the EventEmitter abstraction instead, which does not contain the same
-    combinators or subscription semantics as an RxJS Observable. However, the
-    EventEmitter provides a toRx() method which will return an RxJS Subject,
-    providing the same subscription and combinator conveniences as were
-    available prior to this refactor.
-
-    This is temporary, until issue #2794 is resolved, when Observables will
-    again be returned directly from Http class methods.
-
- ([34eaf65a](https://github.com/angular/angular/commit/34eaf65a))
-* HttpFactory is no longer available. 
-    This factory provided a function alternative to the `request` method of the
-    Http class, but added no real value. The additional factory required an
-    additional IHttp interface, an odd way to inject while preserving type information
-    (`@Inject(HttpFactory) http:IHttp`), and required additional documentation in the
-    http module.
-
-Closes #2564
-
- ([146dbf12](https://github.com/angular/angular/commit/146dbf12))
-
-
-<a name"2.0.0-alpha.28"></a>
-### 2.0.0-alpha.28 (2015-06-24)
-
-
-#### Bug Fixes
-
-* **ShadowDomStrategy:** always inline import rules ([1c4d233f](https://github.com/angular/angular/commit/1c4d233f), closes [#1694](https://github.com/angular/angular/issues/1694))
-* **XHRImpl:** file:/// and IE9 bugs ([cd735c48](https://github.com/angular/angular/commit/cd735c48))
-* **annotations:** swap DirectiveArgs & ComponentArgs ([dcc4bc27](https://github.com/angular/angular/commit/dcc4bc27))
-* **benchmarks:** add waits for naive scrolling benchmark to ensure loading ([d8929c1d](https://github.com/angular/angular/commit/d8929c1d), closes [#1706](https://github.com/angular/angular/issues/1706))
-* **benchpress:** do not throw on unkown frame timestamp event ([ed3af5f7](https://github.com/angular/angular/commit/ed3af5f7), closes [#2622](https://github.com/angular/angular/issues/2622))
-* **change detection:** preserve memoized results from pure functions ([5beaf6d7](https://github.com/angular/angular/commit/5beaf6d7))
-* **compiler:** make text interpolation more robust ([9d4111d6](https://github.com/angular/angular/commit/9d4111d6), closes [#2591](https://github.com/angular/angular/issues/2591))
-* **docs:** Fix docs for Directive.compileChildren ([9700e806](https://github.com/angular/angular/commit/9700e806))
-* **injectors:** sync injector tree with dom element tree. ([d800d2f5](https://github.com/angular/angular/commit/d800d2f5))
-* **parse5:** do not try to insert empty text node ([0a2f6ddc](https://github.com/angular/angular/commit/0a2f6ddc))
-* **render:** fix failing tests in dynamic_component_loader.ts ([6149ce28](https://github.com/angular/angular/commit/6149ce28))
-* **router:** return promise with error handler ([bc798b18](https://github.com/angular/angular/commit/bc798b18))
-* **transformer:** Throw unimplemented errors in HtmlAdapter. ([f9d72bd8](https://github.com/angular/angular/commit/f9d72bd8), 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 ([5dee8e26](https://github.com/angular/angular/commit/5dee8e26), closes [#2472](https://github.com/angular/angular/issues/2472), [#2339](https://github.com/angular/angular/issues/2339))
-
-
-#### Features
-
-* update clang-format to 1.0.21. ([254e58c2](https://github.com/angular/angular/commit/254e58c2))
-* remove MapWrapper.clear(). ([94136201](https://github.com/angular/angular/commit/94136201))
-* remove MapWrapper.contains(). ([dfd30910](https://github.com/angular/angular/commit/dfd30910))
-* remove MapWrapper.create()/get()/set(). ([be7ac9fd](https://github.com/angular/angular/commit/be7ac9fd))
-* add constructors without type arguments. ([35e882e7](https://github.com/angular/angular/commit/35e882e7))
-* upgrade ts2dart to 0.6.4. ([58b38c92](https://github.com/angular/angular/commit/58b38c92))
-* **CSSClass:** add support for string and array expresions ([8c993dca](https://github.com/angular/angular/commit/8c993dca), closes [#2025](https://github.com/angular/angular/issues/2025))
-* **compiler:** detect dangling property bindings ([d7b9345b](https://github.com/angular/angular/commit/d7b9345b), closes [#2598](https://github.com/angular/angular/issues/2598))
-* **element_injector:** support multiple injectables with the same token ([c899b0a7](https://github.com/angular/angular/commit/c899b0a7))
-* **host:** limits host properties to renames ([92ffc465](https://github.com/angular/angular/commit/92ffc465))
-* **mock:** add mock module and bundle ([29323777](https://github.com/angular/angular/commit/29323777), closes [#2325](https://github.com/angular/angular/issues/2325))
-* **query:** added support for querying by var bindings ([b0e2ebda](https://github.com/angular/angular/commit/b0e2ebda))
-* **render:** don’t use the reflector for setting properties ([0a51ccbd](https://github.com/angular/angular/commit/0a51ccbd), closes [#2637](https://github.com/angular/angular/issues/2637))
-* **router:**
-  * add support for hash-based location ([a67f2314](https://github.com/angular/angular/commit/a67f2314), closes [#2555](https://github.com/angular/angular/issues/2555))
-  * enforce usage of ... syntax for parent to child component routes ([2d2ae9b8](https://github.com/angular/angular/commit/2d2ae9b8))
-* **transformers:** inline styleUrls to view directive ([f2ef90b2](https://github.com/angular/angular/commit/f2ef90b2), closes [#2566](https://github.com/angular/angular/issues/2566))
-* **typings:** add typing specs ([24646e7e](https://github.com/angular/angular/commit/24646e7e))
-
-
-#### Breaking Changes
-
-* 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).
-
-Closes #2598
-
- ([d7b9345b](https://github.com/angular/angular/commit/d7b9345b))
-* 
-This PR remove an ability to use pipes in the properties config. Instead, inject the pipe registry.
-
- ([20a8f0db](https://github.com/angular/angular/commit/20a8f0db))
-
-
-<a name"2.0.0-alpha.27"></a>
-### 2.0.0-alpha.27 (2015-06-16)
-
-
-#### Bug Fixes
-
-* makes NgModel work in strict mode ([eb3586d7](https://github.com/angular/angular/commit/eb3586d7))
-* Class factory now adds annotations ([bc9e482b](https://github.com/angular/angular/commit/bc9e482b))
-* improve type safety by typing `refs`. ([4ae7df27](https://github.com/angular/angular/commit/4ae7df27))
-* improve type of TreeNode.children. ([c3c2ad14](https://github.com/angular/angular/commit/c3c2ad14))
-* add types for ts2dart's façade handling. ([f3d74185](https://github.com/angular/angular/commit/f3d74185))
-* rename FORWARD_REF to forwardRef in the Angular code base. ([c4ecbf0a](https://github.com/angular/angular/commit/c4ecbf0a))
-* declare var global. ([13466604](https://github.com/angular/angular/commit/13466604))
-* Improve error message on missing dependency ([2ccc65d7](https://github.com/angular/angular/commit/2ccc65d7))
-* compare strings with StringWrapper.equals ([633cf636](https://github.com/angular/angular/commit/633cf636))
-* corrected var/# parsing in template ([a4183971](https://github.com/angular/angular/commit/a4183971), closes [#2084](https://github.com/angular/angular/issues/2084))
-* increase the stack frame size for tests ([ab8eb4f6](https://github.com/angular/angular/commit/ab8eb4f6))
-* include error message in the stack trace ([8d081ea7](https://github.com/angular/angular/commit/8d081ea7))
-* **Compiler:** fix text nodes after content tags ([d599fd34](https://github.com/angular/angular/commit/d599fd34), closes [#2095](https://github.com/angular/angular/issues/2095))
-* **DirectiveMetadata:** add support for events, changeDetection ([b4e82b8b](https://github.com/angular/angular/commit/b4e82b8b))
-* **JsonPipe:** always transform to json ([e77710a3](https://github.com/angular/angular/commit/e77710a3))
-* **Parser:** Parse pipes in arguments ([f9745327](https://github.com/angular/angular/commit/f9745327), closes [#1680](https://github.com/angular/angular/issues/1680))
-* **ShadowDom:** fix emulation integration spec to test all 3 strategies ([6e385154](https://github.com/angular/angular/commit/6e385154), closes [#2546](https://github.com/angular/angular/issues/2546))
-* **analzyer:** removed unused imports ([902759e1](https://github.com/angular/angular/commit/902759e1))
-* **benchmarks:** Do not apply the angular transformer to e2e tests ([cee26826](https://github.com/angular/angular/commit/cee26826))
-* **bootstrap:** temporary disable jit change detection because of a bug in handling pure functio ([9908def8](https://github.com/angular/angular/commit/9908def8))
-* **broccoli:** ensure that inputTrees are stable ([928ec1c5](https://github.com/angular/angular/commit/928ec1c5))
-* **build:**
-  * ensure that asset files are copied over to example directories ([60b97b27](https://github.com/angular/angular/commit/60b97b27))
-  * Minify files for angular2.min.js bundle ([76797dfb](https://github.com/angular/angular/commit/76797dfb))
-  * only pass ts files to ts2dart transpilation. ([b5431e4c](https://github.com/angular/angular/commit/b5431e4c))
-* **bundle:** makes interfaces.ts non-empty when transpiled. ([83e99fc7](https://github.com/angular/angular/commit/83e99fc7))
-* **change detect:** Fix bug in JIT change detectors ([e0fbd4b6](https://github.com/angular/angular/commit/e0fbd4b6))
-* **ci:** remove non-existent gulp task from test_e2e_dart ([1cf807c3](https://github.com/angular/angular/commit/1cf807c3), closes [#2509](https://github.com/angular/angular/issues/2509))
-* **dartfmt:** don't break win32 command line limit ([617d6931](https://github.com/angular/angular/commit/617d6931), 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 ([7611f92f](https://github.com/angular/angular/commit/7611f92f))
-* **docs:**
-  * order class members in order of declaration ([ea27704e](https://github.com/angular/angular/commit/ea27704e), closes [#2569](https://github.com/angular/angular/issues/2569))
-  * update link paths in annotations ([dd23bab3](https://github.com/angular/angular/commit/dd23bab3), closes [#2475](https://github.com/angular/angular/issues/2475))
-  * ensure no duplicates in alias names of docs ([05d02fa9](https://github.com/angular/angular/commit/05d02fa9))
-  * Working generated angular2.d.ts ([7141c15e](https://github.com/angular/angular/commit/7141c15e))
-* **dynamic_component_loader:**
-  * Fix for ts2dart issue ([bbfb4e1d](https://github.com/angular/angular/commit/bbfb4e1d))
-  * implemented dispose for dynamically-loaded components ([21dcfc89](https://github.com/angular/angular/commit/21dcfc89))
-* **element_injector:** changed visibility rules to expose hostInjector of the component to its shadow d ([c51aef9f](https://github.com/angular/angular/commit/c51aef9f))
-* **forms:**
-  * updated form examples to contain select elements ([c34cb014](https://github.com/angular/angular/commit/c34cb014))
-  * fixed the handling of the select element ([f1541e65](https://github.com/angular/angular/commit/f1541e65))
-  * fixed the selector of NgRequiredValidator ([35197acc](https://github.com/angular/angular/commit/35197acc))
-  * getError does not work without path ([a858f6ac](https://github.com/angular/angular/commit/a858f6ac))
-* **life_cycle:** throw when recursively reentering LifeCycle.tick ([af35ab56](https://github.com/angular/angular/commit/af35ab56))
-* **locals:** improved an error message ([4eb8c9b2](https://github.com/angular/angular/commit/4eb8c9b2))
-* **ng_zone:** updated zone not to run onTurnDown when invoking run synchronously from onTurnDo ([15dab7c5](https://github.com/angular/angular/commit/15dab7c5))
-* **npm:** update scripts and readme for npm packages. ([8923103c](https://github.com/angular/angular/commit/8923103c), closes [#2377](https://github.com/angular/angular/issues/2377))
-* **router:**
-  * ensure that root URL redirect doesn't redirect non-root URLs ([73d15250](https://github.com/angular/angular/commit/73d15250), closes [#2221](https://github.com/angular/angular/issues/2221))
-  * rethrow exceptions ([5782f063](https://github.com/angular/angular/commit/5782f063), closes [#2391](https://github.com/angular/angular/issues/2391))
-  * avoid two slash values between the baseHref and the path ([cdc7b03e](https://github.com/angular/angular/commit/cdc7b03e))
-  * do not prepend the root URL with a starting slash ([e372cc77](https://github.com/angular/angular/commit/e372cc77))
-* **selector:** select by attribute independent of value and order ([9bad70be](https://github.com/angular/angular/commit/9bad70be), closes [#2513](https://github.com/angular/angular/issues/2513))
-* **shadow_dom:** moves the imported nodes into the correct location. ([92d56584](https://github.com/angular/angular/commit/92d56584))
-* **shrinkwrap:** restore fsevents dependency ([833048f3](https://github.com/angular/angular/commit/833048f3), closes [#2511](https://github.com/angular/angular/issues/2511))
-* **view:** local variables override local variables set by ng-for ([d8e27953](https://github.com/angular/angular/commit/d8e27953))
-
-
-#### Features
-
-* allow Type.annotations = Component(...).View(...) ([b2c66949](https://github.com/angular/angular/commit/b2c66949), closes [#2577](https://github.com/angular/angular/issues/2577))
-* support decorator chaining and class creation in ES5 ([c3ae34f0](https://github.com/angular/angular/commit/c3ae34f0), closes [#2534](https://github.com/angular/angular/issues/2534))
-* update ts2dart to 0.6.1. ([96137724](https://github.com/angular/angular/commit/96137724))
-* adjust formatting for clang-format v1.0.19. ([a6e71239](https://github.com/angular/angular/commit/a6e71239))
-* upgrade to clang-format v1.0.19. ([1c2abbc6](https://github.com/angular/angular/commit/1c2abbc6))
-* **AstTranformer:** add support for missing nodes ([da60381c](https://github.com/angular/angular/commit/da60381c))
-* **BaseRequestOptions:** add merge method to make copies of options ([93596dff](https://github.com/angular/angular/commit/93596dff))
-* **Directive:** Have a single Directive.host which mimics HTML ([f3b49378](https://github.com/angular/angular/commit/f3b49378), closes [#2268](https://github.com/angular/angular/issues/2268))
-* **ElementInjector:** throw if multiple directives define the same host injectable ([6a6b43de](https://github.com/angular/angular/commit/6a6b43de))
-* **Events:** allow a different event vs field name ([29c72abc](https://github.com/angular/angular/commit/29c72abc), 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 ([53694eb6](https://github.com/angular/angular/commit/53694eb6))
-* **Http:** add Http class ([b68e561c](https://github.com/angular/angular/commit/b68e561c), closes [#2530](https://github.com/angular/angular/issues/2530))
-* **Parser:**
-  * support if statements in actions ([7d328799](https://github.com/angular/angular/commit/7d328799), closes [#2022](https://github.com/angular/angular/issues/2022))
-  * implement Unparser ([331a051e](https://github.com/angular/angular/commit/331a051e), closes [#1949](https://github.com/angular/angular/issues/1949), [#2395](https://github.com/angular/angular/issues/2395))
-* **View:** add support for styleUrls and styles ([ac3e624d](https://github.com/angular/angular/commit/ac3e624d), closes [#2382](https://github.com/angular/angular/issues/2382))
-* **benchpress:**
-  * more smoothness metrics ([35589a6b](https://github.com/angular/angular/commit/35589a6b))
-  * add mean frame time metric ([6834c499](https://github.com/angular/angular/commit/6834c499), closes [#2474](https://github.com/angular/angular/issues/2474))
-* **broccoli:**
-  * improve merge-trees plugin and add "overwrite" option ([dc8dac7c](https://github.com/angular/angular/commit/dc8dac7c))
-  * add diffing MergeTrees plugin ([4ee3fdaf](https://github.com/angular/angular/commit/4ee3fdaf), closes [#1815](https://github.com/angular/angular/issues/1815), [#2064](https://github.com/angular/angular/issues/2064))
-* **build:** add `test.unit.dartvm` for a faster roundtrip of dartvm tests ([46eeee6b](https://github.com/angular/angular/commit/46eeee6b))
-* **change detect:** Throw on attempts to use dehydrated detector ([b6e95bb9](https://github.com/angular/angular/commit/b6e95bb9))
-* **diffing-broccoli-plugin:** support multiple inputTrees ([41ae8e76](https://github.com/angular/angular/commit/41ae8e76), closes [#1815](https://github.com/angular/angular/issues/1815), [#2064](https://github.com/angular/angular/issues/2064))
-* **e2e:** added e2e tests for forms ([552d1ed6](https://github.com/angular/angular/commit/552d1ed6))
-* **facade:** add isMap method ([548f3dd5](https://github.com/angular/angular/commit/548f3dd5))
-* **forms:**
-  * set exportAs to form for all form related directives ([e7e82cbe](https://github.com/angular/angular/commit/e7e82cbe))
-  * export validator directives as part of formDirectives ([73bce402](https://github.com/angular/angular/commit/73bce402))
-  * changed forms to capture submit events and fires synthetic ng-submit events ([5fc23cae](https://github.com/angular/angular/commit/5fc23cae))
-  * added hasError and getError methods to all controls ([1a4d2374](https://github.com/angular/angular/commit/1a4d2374))
-* **forms.ts:** formInjectables with FormBuilder ([a6cb86ba](https://github.com/angular/angular/commit/a6cb86ba), closes [#2367](https://github.com/angular/angular/issues/2367))
-* **http:** add basic http service ([21568106](https://github.com/angular/angular/commit/21568106), closes [#2028](https://github.com/angular/angular/issues/2028))
-* **query:**
-  * notify on changes ([5bfcca2d](https://github.com/angular/angular/commit/5bfcca2d))
-  * adds support for descendants and more list apis. ([355ab5b3](https://github.com/angular/angular/commit/355ab5b3))
-* **router:**
-  * allow configuring app base href via token ([cab1d0ef](https://github.com/angular/angular/commit/cab1d0ef))
-  * add routing to async components ([cd95e078](https://github.com/angular/angular/commit/cd95e078))
-* **transform:** update for Directive.host ([591f742d](https://github.com/angular/angular/commit/591f742d))
-* **transformers:** updated transformers ([e5419feb](https://github.com/angular/angular/commit/e5419feb))
-* **view:** added support for exportAs, so any directive can be assigned to a variable ([69b75b7f](https://github.com/angular/angular/commit/69b75b7f))
-
-
-#### Breaking Changes
-
-* By default Query only queries direct children.
-
- ([355ab5b3](https://github.com/angular/angular/commit/355ab5b3))
-* 
-Before
-
-    @Directive({
-      hostListeners: {'event': 'statement'},
-      hostProperties: {'expression': 'hostProp'},
-      hostAttributes: {'attr': 'value'},
-      hostActions: {'action': 'statement'}
-    })
+<a name="7.0.0-beta.2"></a>
+# [7.0.0-beta.2](https://github.com/angular/angular/compare/7.0.0-beta.1...7.0.0-beta.2) (2018-08-15)
+
+
+### Bug Fixes
+
+* **bazel:** correct type concatenated to devmode_js ([#25467](https://github.com/angular/angular/issues/25467)) ([fb2c524](https://github.com/angular/angular/commit/fb2c524))
+* **service-worker:** `Cache-Control: no-cache` on assets breaks service worker ([#25408](https://github.com/angular/angular/issues/25408)) ([01ec5fd](https://github.com/angular/angular/commit/01ec5fd)), closes [#25442](https://github.com/angular/angular/issues/25442)
+
+
+
+<a name="7.0.0-beta.1"></a>
+# [7.0.0-beta.1](https://github.com/angular/angular/compare/7.0.0-beta.0...7.0.0-beta.1) (2018-08-08)
+
+
+### Bug Fixes
+
+* **compiler-cli:** use the oldProgram option in watch mode ([#21364](https://github.com/angular/angular/issues/21364)) ([c6e5b97](https://github.com/angular/angular/commit/c6e5b97)), closes [#21361](https://github.com/angular/angular/issues/21361)
+* **core:** In Testability.whenStable update callback, pass more complete ([#25010](https://github.com/angular/angular/issues/25010)) ([16c03c0](https://github.com/angular/angular/commit/16c03c0))
+* add mappings for ngfactory & ngsummary files to their module names in aot summary resolver ([#25335](https://github.com/angular/angular/issues/25335)) ([02e201a](https://github.com/angular/angular/commit/02e201a))
+* **router:** take base uri into account in `setUpLocationSync()` ([#20244](https://github.com/angular/angular/issues/20244)) ([ba1e25f](https://github.com/angular/angular/commit/ba1e25f)), closes [#20061](https://github.com/angular/angular/issues/20061)
+
+
+### Features
+
+* **core:** add DoBootstrap interface. ([#24558](https://github.com/angular/angular/issues/24558)) ([732026c](https://github.com/angular/angular/commit/732026c)), closes [#24557](https://github.com/angular/angular/issues/24557)
+
+
+
+<a name="6.1.2"></a>
+## [6.1.2](https://github.com/angular/angular/compare/6.1.1...6.1.2) (2018-08-08)
+
+
+### Bug Fixes
+
+* **router:** take base uri into account in `setUpLocationSync()` ([#20244](https://github.com/angular/angular/issues/20244)) ([ae9b4e6](https://github.com/angular/angular/commit/ae9b4e6)), closes [#20061](https://github.com/angular/angular/issues/20061)
+* add mappings for ngfactory & ngsummary files to their module names in aot summary resolver ([#25335](https://github.com/angular/angular/issues/25335)) ([054fbbe](https://github.com/angular/angular/commit/054fbbe))
+
+
+<a name="7.0.0-beta.0"></a>
+# [7.0.0-beta.0](https://github.com/angular/angular/compare/6.1.0...7.0.0-beta.0) (2018-08-02)
+
+### Bug Fixes
+
+* **bazel:** allow compile_strategy to be (privately) imported ([#25080](https://github.com/angular/angular/issues/25080)) ([0d1d589](https://github.com/angular/angular/commit/0d1d589))
+* **compiler:** update compiler to flatten nested template fns ([#24943](https://github.com/angular/angular/issues/24943)) ([fe14f18](https://github.com/angular/angular/commit/fe14f18))
+* **compiler-cli:** correct realPath to realpath. ([#25023](https://github.com/angular/angular/issues/25023)) ([01e6dab](https://github.com/angular/angular/commit/01e6dab))
+* **core:** throw error message when @Output not initialized ([#19116](https://github.com/angular/angular/issues/19116)) ([adf510f](https://github.com/angular/angular/commit/adf510f)), closes [#3664](https://github.com/angular/angular/issues/3664)
+
+
+### Features
+
+* **compiler:** add "original" placeholder value on extracted XMB ([#25079](https://github.com/angular/angular/issues/25079)) ([e99d860](https://github.com/angular/angular/commit/e99d860))
+
+
+
+<a name="6.1.1"></a>
+## [6.1.1](https://github.com/angular/angular/compare/6.1.0...6.1.1) (2018-08-02)
+
+* **compiler-cli:** correct tsickle dependency version to fix typescript 2.9 compatibility ([fec29fa](https://github.com/angular/angular/commit/317c7087c56b72aa74cd6d6a8f719e6e7fec29fa))
+
+
+
+<a name="6.1.0"></a>
+# [6.1.0](https://github.com/angular/angular/compare/6.0.0-rc.5...6.1.0) (2018-07-25)
+
+### Bug Fixes
+
+* **animations:** always render end-state styles for orphaned DOM nodes ([#24236](https://github.com/angular/angular/issues/24236)) ([dc4a3d0](https://github.com/angular/angular/commit/dc4a3d0))
+* **animations:** set animations styles properly on platform-server ([#24624](https://github.com/angular/angular/issues/24624)) ([0b356d4](https://github.com/angular/angular/commit/0b356d4))
+* **animations:** do not throw errors when a destroyed component is animated ([#23836](https://github.com/angular/angular/issues/23836)) ([d2a8687](https://github.com/angular/angular/commit/d2a8687))
+* **animations:** Fix browser detection logic ([#24188](https://github.com/angular/angular/issues/24188)) ([b492b9e](https://github.com/angular/angular/commit/b492b9e))
+* **animations:** properly clean up queried element styles in safari/edge ([#23633](https://github.com/angular/angular/issues/23633)) ([da9ff25](https://github.com/angular/angular/commit/da9ff25))
+* **animations:** retain state styling for nodes that are moved around ([#23534](https://github.com/angular/angular/issues/23534)) ([65211f4](https://github.com/angular/angular/commit/65211f4))
+* **animations:** retain trigger-state for nodes that are moved around ([#24238](https://github.com/angular/angular/issues/24238)) ([8db928d](https://github.com/angular/angular/commit/8db928d))
+* **bazel:** Allow ng_module to depend on targets w no deps ([#24446](https://github.com/angular/angular/issues/24446)) ([282d351](https://github.com/angular/angular/commit/282d351))
+* **benchpress:** Fix promise chain in chrome_driver_extension. ([#23458](https://github.com/angular/angular/issues/23458)) ([d4b6c41](https://github.com/angular/angular/commit/d4b6c41))
+* **common:** do not round factional seconds ([#24831](https://github.com/angular/angular/issues/24831)) ([a527c69](https://github.com/angular/angular/commit/a527c69)), closes [#24384](https://github.com/angular/angular/issues/24384)
+* **common:** format fractional seconds ([#24844](https://github.com/angular/angular/issues/24844)) ([0b4d85e](https://github.com/angular/angular/commit/0b4d85e)), closes [#24831](https://github.com/angular/angular/issues/24831)
+* **common:** properly update collection reference in NgForOf ([#24684](https://github.com/angular/angular/issues/24684)) ([ff84c5c](https://github.com/angular/angular/commit/ff84c5c)), closes [#24155](https://github.com/angular/angular/issues/24155)
+* **common:** use correct currency format for locale de-AT ([#24658](https://github.com/angular/angular/issues/24658)) ([dcabb05](https://github.com/angular/angular/commit/dcabb05)), closes [#24609](https://github.com/angular/angular/issues/24609)
+* **common:** use correct ICU plural for locale mk ([#24659](https://github.com/angular/angular/issues/24659)) ([64a8584](https://github.com/angular/angular/commit/64a8584))
+* **compiler:** fix a few non-tree-shakeable code patterns ([#24677](https://github.com/angular/angular/issues/24677)) ([50d4a4f](https://github.com/angular/angular/commit/50d4a4f))
+* **compiler:** i18n_extractor now outputs the correct source file name ([#24885](https://github.com/angular/angular/issues/24885)) ([c8ad965](https://github.com/angular/angular/commit/c8ad965)), closes [#24884](https://github.com/angular/angular/issues/24884)
+* **compiler:** support `.` in import statements. ([#20634](https://github.com/angular/angular/issues/20634)) ([d8f7b29](https://github.com/angular/angular/commit/d8f7b29)), closes [#20363](https://github.com/angular/angular/issues/20363)
+* **compiler:** avoid a crash in ngc-wrapped. ([#23468](https://github.com/angular/angular/issues/23468)) ([e1c4930](https://github.com/angular/angular/commit/e1c4930))
+* **compiler:** generate constant array for i18n attributes ([#23837](https://github.com/angular/angular/issues/23837)) ([cfde36d](https://github.com/angular/angular/commit/cfde36d))
+* **compiler:** generate core-compliant hostBindings property ([#24087](https://github.com/angular/angular/issues/24087)) ([01b5acd](https://github.com/angular/angular/commit/01b5acd)), closes [#24013](https://github.com/angular/angular/issues/24013)
+* **compiler:** handle undefined annotation metadata ([#23349](https://github.com/angular/angular/issues/23349)) ([ca776c5](https://github.com/angular/angular/commit/ca776c5))
+* **compiler-cli:** Use typescript to resolve modules for metadata ([#22856](https://github.com/angular/angular/issues/22856)) ([0d5f2d3](https://github.com/angular/angular/commit/0d5f2d3))
+* **compiler-cli:** don't rely on incompatible TS method ([#23550](https://github.com/angular/angular/issues/23550)) ([b1f040f](https://github.com/angular/angular/commit/b1f040f))
+* **core:** stop reusing provider definitions across NgModuleRef instances ([#25022](https://github.com/angular/angular/issues/25022)) ([6b859da](https://github.com/angular/angular/commit/6b859da)), closes [#25018](https://github.com/angular/angular/issues/25018)
+* **core:** mark NgModule as not the root if APP_ROOT is set to false ([#24814](https://github.com/angular/angular/issues/24814)) ([1089261](https://github.com/angular/angular/commit/1089261))
+* **core:** use addCustomEqualityTester instead of overriding toEqual ([#22983](https://github.com/angular/angular/issues/22983)) ([0922228](https://github.com/angular/angular/commit/0922228)), closes [#22939](https://github.com/angular/angular/issues/22939)
+* **core:** Injector correctly honors the @Self flag ([#24520](https://github.com/angular/angular/issues/24520)) ([ccbda9d](https://github.com/angular/angular/commit/ccbda9d))
+* **core:** avoid eager providers re-initialization ([#23559](https://github.com/angular/angular/issues/23559)) ([0c6dc45](https://github.com/angular/angular/commit/0c6dc45))
+* **core:** call ngOnDestroy on all services that have it ([#23755](https://github.com/angular/angular/issues/23755)) ([fc03427](https://github.com/angular/angular/commit/fc03427)), closes [#22466](https://github.com/angular/angular/issues/22466) [#22240](https://github.com/angular/angular/issues/22240) [#14818](https://github.com/angular/angular/issues/14818)
+* **docs-infra:** fix table header layout in API pages ([#24919](https://github.com/angular/angular/issues/24919)) ([3cd9645](https://github.com/angular/angular/commit/3cd9645))
+* **elements:** always check to create strategy ([#23825](https://github.com/angular/angular/issues/23825)) ([b1cda36](https://github.com/angular/angular/commit/b1cda36))
+* **elements:** prevent closure renaming of platform properties ([#23843](https://github.com/angular/angular/issues/23843)) ([d4b8b24](https://github.com/angular/angular/commit/d4b8b24))
+* **forms:** properly handle special properties in FormGroup.get ([#22249](https://github.com/angular/angular/issues/22249)) ([9367e91](https://github.com/angular/angular/commit/9367e91)), closes [#17195](https://github.com/angular/angular/issues/17195)
+* **language-service:** do not overwrite native `Reflect` ([#24299](https://github.com/angular/angular/issues/24299)) ([6881404](https://github.com/angular/angular/commit/6881404)), closes [#21420](https://github.com/angular/angular/issues/21420)
+* **platform-browser:** add missing deps for HammerGesturesPlugin ([#24682](https://github.com/angular/angular/issues/24682)) ([13d60ea](https://github.com/angular/angular/commit/13d60ea))
+* **platform-browser:** mark Meta and Title services as tree shakable providers ([#24815](https://github.com/angular/angular/issues/24815)) ([197387d](https://github.com/angular/angular/commit/197387d))
+* **platform-browser:** workaround wrong import path generated by ngc for DOCUMENT ([#24830](https://github.com/angular/angular/issues/24830)) ([7d27ecc](https://github.com/angular/angular/commit/7d27ecc))
+* **platform-server:** avoid clash between server and client style encapsulation attributes ([#24158](https://github.com/angular/angular/issues/24158)) ([b96a3c8](https://github.com/angular/angular/commit/b96a3c8))
+* **platform-server:** avoid dependency cycle when using http interceptor ([#24229](https://github.com/angular/angular/issues/24229)) ([60aa943](https://github.com/angular/angular/commit/60aa943)), closes [#23023](https://github.com/angular/angular/issues/23023)
+* **platform-server:** don't reflect innerHTML property to attribute ([#24213](https://github.com/angular/angular/issues/24213)) ([6a663a4](https://github.com/angular/angular/commit/6a663a4)), closes [#19278](https://github.com/angular/angular/issues/19278)
+* **platform-server:** provide Domino DOM types globally ([#24116](https://github.com/angular/angular/issues/24116)) ([c73196e](https://github.com/angular/angular/commit/c73196e)), closes [#23280](https://github.com/angular/angular/issues/23280) [#23133](https://github.com/angular/angular/issues/23133)
+* **router:** Fix _lastPathIndex in deeply nested empty paths ([#22394](https://github.com/angular/angular/issues/22394)) ([968f153](https://github.com/angular/angular/commit/968f153))
+* **router:** add ability to recover from malformed url ([#23283](https://github.com/angular/angular/issues/23283)) ([86d254d](https://github.com/angular/angular/commit/86d254d)), closes [#21468](https://github.com/angular/angular/issues/21468)
+* **router:** fix lazy loading of aux routes ([#23459](https://github.com/angular/angular/issues/23459)) ([5731d07](https://github.com/angular/angular/commit/5731d07)), closes [#10981](https://github.com/angular/angular/issues/10981)
+* **router:** avoid freezing queryParams in-place ([#22663](https://github.com/angular/angular/issues/22663)) ([89f64e5](https://github.com/angular/angular/commit/89f64e5)), closes [#22617](https://github.com/angular/angular/issues/22617)
+* **router:** cache route handle if found ([#22475](https://github.com/angular/angular/issues/22475)) ([4cfa571](https://github.com/angular/angular/commit/4cfa571)), closes [#22474](https://github.com/angular/angular/issues/22474)
+* **router:** correct the segment parsing so it won't break on ampersand ([#23684](https://github.com/angular/angular/issues/23684)) ([553a680](https://github.com/angular/angular/commit/553a680))
+* **service-worker:** don't include sourceMappingURL in ngsw-worker ([#24877](https://github.com/angular/angular/issues/24877)) ([8620373](https://github.com/angular/angular/commit/8620373)), closes [#23596](https://github.com/angular/angular/issues/23596)
+* **service-worker:** avoid network requests when looking up hashed resources in cache ([#24127](https://github.com/angular/angular/issues/24127)) ([52d43a9](https://github.com/angular/angular/commit/52d43a9))
+* **service-worker:** fix `SwPush.unsubscribe()` ([#24162](https://github.com/angular/angular/issues/24162)) ([3ed2d75](https://github.com/angular/angular/commit/3ed2d75)), closes [#24095](https://github.com/angular/angular/issues/24095)
+* **service-worker:** add badge to NOTIFICATION_OPTION_NAMES ([#23241](https://github.com/angular/angular/issues/23241)) ([fb59b2d](https://github.com/angular/angular/commit/fb59b2d)), closes [#23196](https://github.com/angular/angular/issues/23196)
+* **service-worker:** check platformBrowser before accessing navigator.serviceWorker ([#21231](https://github.com/angular/angular/issues/21231)) ([0bdd30e](https://github.com/angular/angular/commit/0bdd30e))
+* **service-worker:** correctly handle requests with empty `clientId` ([#23625](https://github.com/angular/angular/issues/23625)) ([e0ed59e](https://github.com/angular/angular/commit/e0ed59e)), closes [#23526](https://github.com/angular/angular/issues/23526)
+* **service-worker:** deprecate `versionedFiles` in asset-group resources ([#23584](https://github.com/angular/angular/issues/23584)) ([1d378e2](https://github.com/angular/angular/commit/1d378e2))
+
+### Features
+
+* **bazel:** Initial commit of protractor_web_test_suite ([#24787](https://github.com/angular/angular/issues/24787)) ([71e0df0](https://github.com/angular/angular/commit/71e0df0))
+* **bazel:** protractor_web_test_suite for release ([#24787](https://github.com/angular/angular/issues/24787)) ([161ff5c](https://github.com/angular/angular/commit/161ff5c))
+* **common:** introduce KeyValuePipe ([#24319](https://github.com/angular/angular/issues/24319)) ([2b49bf7](https://github.com/angular/angular/commit/2b49bf7))
+* **compiler:** support `// ...` and `// TODO` in mock compiler expectations ([#23441](https://github.com/angular/angular/issues/23441)) ([c6b206e](https://github.com/angular/angular/commit/c6b206e))
+* **compiler-cli:** update `tsickle` to `0.29.x` ([#24233](https://github.com/angular/angular/issues/24233)) ([f69ac67](https://github.com/angular/angular/commit/f69ac67))
+* **core:** export defaultKeyValueDiffers to private api ([#24319](https://github.com/angular/angular/issues/24319)) ([92b278c](https://github.com/angular/angular/commit/92b278c))
+* **core:** expose a Compiler API for accessing module ids from NgModule types ([#24258](https://github.com/angular/angular/issues/24258)) ([bd02b27](https://github.com/angular/angular/commit/bd02b27))
+* **core:** KeyValueDiffer#diff allows null values ([#24319](https://github.com/angular/angular/issues/24319)) ([52ce9d5](https://github.com/angular/angular/commit/52ce9d5))
+* **core:** add support for ShadowDOM v1 ([#24718](https://github.com/angular/angular/issues/24718)) ([3553977](https://github.com/angular/angular/commit/3553977))
+(https://github.com/angular/angular/commit/328971f)), closes [#24616](https://github.com/angular/angular/issues/24616)
+* **platform-browser:** add HammerJS lazy-loader symbols to public API ([#23943](https://github.com/angular/angular/issues/23943)) ([26fbf1d](https://github.com/angular/angular/commit/26fbf1d))
+* **platform-browser:** allow lazy-loading HammerJS ([#23906](https://github.com/angular/angular/issues/23906)) ([313bdce](https://github.com/angular/angular/commit/313bdce))
+* **platform-server:** use EventManagerPlugin on the server ([#24132](https://github.com/angular/angular/issues/24132)) ([d6595eb](https://github.com/angular/angular/commit/d6595eb))
+* **router:** add urlUpdateStrategy allow updating the browser URL at the beginning of navigation ([#24820](https://github.com/angular/angular/issues/24820)) ([328971f]
+* **router:** add navigation execution context info to activation hooks ([#24204](https://github.com/angular/angular/issues/24204)) ([20c463e](https://github.com/angular/angular/commit/20c463e)), closes [#24202](https://github.com/angular/angular/issues/24202)
+* **router:** implement scrolling restoration service ([#20030](https://github.com/angular/angular/issues/20030)) ([49c5234](https://github.com/angular/angular/commit/49c5234)), closes [#13636](https://github.com/angular/angular/issues/13636) [#10929](https://github.com/angular/angular/issues/10929) [#7791](https://github.com/angular/angular/issues/7791) [#6595](https://github.com/angular/angular/issues/6595)
+* **service-worker:** add support for `?` in SW config globbing ([#24105](https://github.com/angular/angular/issues/24105)) ([250527c](https://github.com/angular/angular/commit/250527c))
+* typescript 2.9 support ([#24652](https://github.com/angular/angular/issues/24652)) ([e3064d5](https://github.com/angular/angular/commit/e3064d5))
+
+### build
+
+* **bazel:** turn on preserve-symlinks ([#24881](https://github.com/angular/angular/issues/24881)) ([c438b5e](https://github.com/angular/angular/commit/c438b5e))
+
+### Angular Labs (experimental feature) breaking change
+
+* **bazel:** Use of @angular/bazel rules now requires calling ng_setup_workspace() in your WORKSPACE file.
+
+For example:
+
+    local_repository(
+        name = "angular",
+        path = "node_modules/@angular/bazel",
+    )
+
+    load("@angular//:index.bzl", "ng_setup_workspace")
+
+    ng_setup_workspace()
+
+<a name="6.0.9"></a>
+## [6.0.9](https://github.com/angular/angular/compare/6.0.8...6.0.9) (2018-07-11)
+
+
+### Bug Fixes
+* **common:** format fractional seconds ([#24844](https://github.com/angular/angular/issues/24844)) ([3c93d07](https://github.com/angular/angular/commit/3c93d07)), closes [#24831](https://github.com/angular/angular/issues/24831)
+
+
+<a name="6.0.8"></a>
+## [6.0.8](https://github.com/angular/angular/compare/6.0.7...6.0.8) (2018-07-11)
+
+
+### Bug Fixes
+
+* **common:** do not round factional seconds ([#24831](https://github.com/angular/angular/issues/24831)) ([0746485](https://github.com/angular/angular/commit/0746485)), closes [#24384](https://github.com/angular/angular/issues/24384)
+* **common:** properly update collection reference in NgForOf ([#24684](https://github.com/angular/angular/issues/24684)) ([9a98de9](https://github.com/angular/angular/commit/9a98de9)), closes [#24155](https://github.com/angular/angular/issues/24155)
+* **common:** use correct currency format for locale de-AT ([#24658](https://github.com/angular/angular/issues/24658)) ([a92f111](https://github.com/angular/angular/commit/a92f111)), closes [#24609](https://github.com/angular/angular/issues/24609)
+* **compiler-cli:** Use typescript to resolve modules for metadata ([#22856](https://github.com/angular/angular/issues/22856)) ([7717ff1](https://github.com/angular/angular/commit/7717ff1))
+* **core:** use addCustomEqualityTester instead of overriding toEqual ([#22983](https://github.com/angular/angular/issues/22983)) ([b8975a9](https://github.com/angular/angular/commit/b8975a9)), closes [#22939](https://github.com/angular/angular/issues/22939)
+* **language-service:** do not overwrite native `Reflect` ([#24299](https://github.com/angular/angular/issues/24299)) ([de1c44f](https://github.com/angular/angular/commit/de1c44f)), closes [#21420](https://github.com/angular/angular/issues/21420)
+* **router:** add ability to recover from malformed url ([#23283](https://github.com/angular/angular/issues/23283)) ([2d4f4b5](https://github.com/angular/angular/commit/2d4f4b5)), closes [#21468](https://github.com/angular/angular/issues/21468)
+* **service-worker:** avoid network requests when looking up hashed resources in cache ([#24127](https://github.com/angular/angular/issues/24127)) ([183b079](https://github.com/angular/angular/commit/183b079))
+
+
+### Features
+
+* **core:** add support for ShadowDOM v1 ([#24718](https://github.com/angular/angular/issues/24718)) ([6c55a13](https://github.com/angular/angular/commit/6c55a13))
+
+<a name="6.0.7"></a>
+## [6.0.7](https://github.com/angular/angular/compare/6.0.6...6.0.7) (2018-06-27)
+
+
+### Bug Fixes
+
+* **animations:** set animations styles properly on platform-server ([#24624](https://github.com/angular/angular/issues/24624)) ([0b356d4](https://github.com/angular/angular/commit/0b356d4))
+* **common:** use correct ICU plural for locale mk ([#24659](https://github.com/angular/angular/issues/24659)) ([64a8584](https://github.com/angular/angular/commit/64a8584))
+
+<a name="6.0.6"></a>
+## [6.0.6](https://github.com/angular/angular/compare/6.0.5...6.0.6) (2018-06-20)
+
+
+### Bug Fixes
+
+* **compiler:** support `.` in import statements. ([#20634](https://github.com/angular/angular/issues/20634)) ([e543c73](https://github.com/angular/angular/commit/e543c73)), closes [#20363](https://github.com/angular/angular/issues/20363)
+* **core:** Injector correctly honors the @Self flag ([#24520](https://github.com/angular/angular/issues/24520)) ([f5b3661](https://github.com/angular/angular/commit/f5b3661))
 
-After
+<a name="6.0.5"></a>
+## [6.0.5](https://github.com/angular/angular/compare/6.0.4...6.0.5) (2018-06-13)
 
-    @Directive({
-      host: {
-        '(event)': 'statement',
-        '[hostProp]': 'expression'  // k & v swapped
-        'attr': 'value',
-        '@action': 'statement'
+* **animations:** always render end-state styles for orphaned DOM nodes ([#24236](https://github.com/angular/angular/issues/24236)) ([0139173](https://github.com/angular/angular/commit/0139173))
+* **bazel:** Allow ng_module to depend on targets w no deps ([#24446](https://github.com/angular/angular/issues/24446)) ([ea3669e](https://github.com/angular/angular/commit/ea3669e))
+* **docs-infra:** use script nomodule to load IE polyfills, skip other polyfills ([#24317](https://github.com/angular/angular/issues/24317)) ([e876535](https://github.com/angular/angular/commit/e876535)), closes [#23647](https://github.com/angular/angular/issues/23647)
+* **router:** fix lazy loading of aux routes ([#23459](https://github.com/angular/angular/issues/23459)) ([d20877b](https://github.com/angular/angular/commit/d20877b)), closes [#10981](https://github.com/angular/angular/issues/10981)
+* **service-worker:** fix `SwPush.unsubscribe()` ([#24162](https://github.com/angular/angular/issues/24162)) ([ea2987c](https://github.com/angular/angular/commit/ea2987c)), closes [#24095](https://github.com/angular/angular/issues/24095)
+
+<a name="6.0.4"></a>
+## [6.0.4](https://github.com/angular/angular/compare/6.0.3...6.0.4) (2018-06-06)
+
+
+### Bug Fixes
+
+* **animations:** Fix browser detection logic ([#24188](https://github.com/angular/angular/issues/24188)) ([c9eb491](https://github.com/angular/angular/commit/c9eb491))
+* **animations:** retain trigger-state for nodes that are moved around ([#24238](https://github.com/angular/angular/issues/24238)) ([19deca1](https://github.com/angular/angular/commit/19deca1))
+* **forms:** properly handle special properties in FormGroup.get ([#22249](https://github.com/angular/angular/issues/22249)) ([dc3e8aa](https://github.com/angular/angular/commit/dc3e8aa)), closes [#17195](https://github.com/angular/angular/issues/17195)
+* **platform-server:** avoid clash between server and client style encapsulation attributes ([#24158](https://github.com/angular/angular/issues/24158)) ([e9f2203](https://github.com/angular/angular/commit/e9f2203))
+* **platform-server:** avoid dependency cycle when using http interceptor ([#24229](https://github.com/angular/angular/issues/24229)) ([2991b1b](https://github.com/angular/angular/commit/2991b1b)), closes [#23023](https://github.com/angular/angular/issues/23023)
+* **platform-server:** don't reflect innerHTML property to attibute ([#24213](https://github.com/angular/angular/issues/24213)) ([c17098d](https://github.com/angular/angular/commit/c17098d)), closes [#19278](https://github.com/angular/angular/issues/19278)
+* **platform-server:** provide Domino DOM types globally ([#24116](https://github.com/angular/angular/issues/24116)) ([906b3ec](https://github.com/angular/angular/commit/906b3ec)), closes [#23280](https://github.com/angular/angular/issues/23280) [#23133](https://github.com/angular/angular/issues/23133)
+
+
+<a name="6.0.3"></a>
+## [6.0.3](https://github.com/angular/angular/compare/6.0.2...6.0.3) (2018-05-22)
+
+
+### Bug Fixes
+
+* **service-worker:** check platformBrowser before accessing navigator.serviceWorker ([#21231](https://github.com/angular/angular/issues/21231)) ([0ee5b7e](https://github.com/angular/angular/commit/0ee5b7e))
+
+
+
+<a name="6.0.2"></a>
+## [6.0.2](https://github.com/angular/angular/compare/6.0.1...6.0.2) (2018-05-15)
+
+
+### Bug Fixes
+
+* **animations:** do not throw errors when a destroyed component is animated ([#23836](https://github.com/angular/angular/issues/23836)) ([752b83a](https://github.com/angular/angular/commit/752b83a))
+* **service-worker:** deprecate `versionedFiles` in asset-group resources ([#23584](https://github.com/angular/angular/issues/23584)) ([c6b618d](https://github.com/angular/angular/commit/c6b618d))
+
+
+
+<a name="6.0.1"></a>
+# [6.0.1](https://github.com/angular/angular/compare/6.0.0...6.0.1) (2018-05-11)
+
+
+### Bug Fixes
+
+* **animations:** properly clean up queried element styles in safari/edge ([#23686](https://github.com/angular/angular/issues/23686)) ([3824e3f](https://github.com/angular/angular/commit/3824e3f))
+* **animations:** retain state styling for nodes that are moved around ([#23686](https://github.com/angular/angular/issues/23686)) ([05aa5e0](https://github.com/angular/angular/commit/05aa5e0))
+* **core:** call ngOnDestroy on all services that have it ([#23755](https://github.com/angular/angular/issues/23755)) ([5581e97](https://github.com/angular/angular/commit/5581e97)), closes [#22466](https://github.com/angular/angular/issues/22466) [#22240](https://github.com/angular/angular/issues/22240) [#14818](https://github.com/angular/angular/issues/14818)
+* **elements:** always check to create strategy ([#23825](https://github.com/angular/angular/issues/23825)) ([d280077](https://github.com/angular/angular/commit/d280077))
+* **router:** avoid freezing queryParams in-place ([#22663](https://github.com/angular/angular/issues/22663)) ([3d8799b](https://github.com/angular/angular/commit/3d8799b)), closes [#22617](https://github.com/angular/angular/issues/22617)
+* **router:** correct the segment parsing so it won't break on ampersand ([#23684](https://github.com/angular/angular/issues/23684)) ([8733843](https://github.com/angular/angular/commit/8733843))
+* **service-worker:** correctly handle requests with empty `clientId` ([#23625](https://github.com/angular/angular/issues/23625)) ([2254ac2](https://github.com/angular/angular/commit/2254ac2)), closes [#23526](https://github.com/angular/angular/issues/23526)
+
+
+
+<a name="6.0.0"></a>
+# [6.0.0](https://github.com/angular/angular/compare/6.0.0-beta.0...6.0.0) (2018-05-03)
+
+### Release Highlights & Update instructions
+
+Angular v6 is the first release of Angular that unifies the Framework, Material and CLI.
+
+To learn about the release highlights and our new CLI-powered update workflow for your projects please check out the [v6 release announcement](https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4).
+
+
+
+### Dependency updates
+
+* @angular/core now depends on
+  * TypeScript 2.7
+  * RxJS 6.0.0
+  * tslib 1.9.0
+* @angular/platform-server now depends on Domino 2.0
+
+
+
+### Small Features
+
+* **animations:** only use the WA-polyfill alongside AnimationBuilder ([#22143](https://github.com/angular/angular/issues/22143)) ([b2f366b](https://github.com/angular/angular/commit/b2f366b)), closes [#17496](https://github.com/angular/angular/issues/17496)
+* **animations:** expose `element` and `params` within transition matchers ([#22693](https://github.com/angular/angular/issues/22693)) ([58b94e6](https://github.com/angular/angular/commit/58b94e6))
+* **common:** better error message when non-template element used in NgIf ([#22274](https://github.com/angular/angular/issues/22274)) ([67cf11d](https://github.com/angular/angular/commit/67cf11d)), closes [#16410](https://github.com/angular/angular/issues/16410)
+* **common:** export functions to format numbers, percents, currencies & dates ([#22423](https://github.com/angular/angular/issues/22423)) ([4180912](https://github.com/angular/angular/commit/4180912)), closes [#20536](https://github.com/angular/angular/issues/20536)
+* **compiler:** lower @NgModule ids if needed ([#23031](https://github.com/angular/angular/issues/23031)) ([bd024c0](https://github.com/angular/angular/commit/bd024c0))
+* **compiler:** implement "enableIvy" compiler option ([#21427](https://github.com/angular/angular/issues/21427)) ([64d16de](https://github.com/angular/angular/commit/64d16de))
+* **compiler:** mark @NgModules in provider lists for identification at runtime ([#22005](https://github.com/angular/angular/issues/22005)) ([2d5e7d1](https://github.com/angular/angular/commit/2d5e7d1))
+* **compiler:** add support for marker tags in xliff serializers ([#21250](https://github.com/angular/angular/issues/21250)) ([f74130c](https://github.com/angular/angular/commit/f74130c)), closes [#21078](https://github.com/angular/angular/issues/21078)
+* **compiler:** support for singleline, multiline & jsdoc comments ([#22715](https://github.com/angular/angular/issues/22715)) ([3b167be](https://github.com/angular/angular/commit/3b167be))
+* **compiler-cli:** lower loadChildren fields to allow dynamic module paths ([#23088](https://github.com/angular/angular/issues/23088)) ([550433a](https://github.com/angular/angular/commit/550433a))
+* **compiler-cli:** check unvalidated combination of ngc and TypeScript ([#22293](https://github.com/angular/angular/issues/22293)) ([3ceee99](https://github.com/angular/angular/commit/3ceee99)), closes [#20669](https://github.com/angular/angular/issues/20669)
+* **compiler-cli:** reflect static methods added to classes in metadata ([#21926](https://github.com/angular/angular/issues/21926)) ([eb8ddd2](https://github.com/angular/angular/commit/eb8ddd2))
+* **compiler-cli:** Check unvalidated combination of ngc and TypeScript ([#22293](https://github.com/angular/angular/issues/22293)) ([3ceee99](https://github.com/angular/angular/commit/3ceee99)), closes [#20669](https://github.com/angular/angular/issues/20669)
+* **compiler-cli:** add resource inlining to ngc ([#22615](https://github.com/angular/angular/issues/22615)) ([b5be18f](https://github.com/angular/angular/commit/b5be18f))
+* **compiler-cli:** require node 8 as runtime engine ([#22669](https://github.com/angular/angular/issues/22669)) ([c602563](https://github.com/angular/angular/commit/c602563))
+* **core:** add binding name to content changed error ([#20352](https://github.com/angular/angular/issues/20352)) ([d3bf54b](https://github.com/angular/angular/commit/d3bf54b))
+* **core:** optional generic type for ElementRef ([#20765](https://github.com/angular/angular/issues/20765)) ([d3d9aac](https://github.com/angular/angular/commit/d3d9aac)), closes [#13139](https://github.com/angular/angular/issues/13139)
+* **core:** set `preserveWhitespaces` to false by default ([#22046](https://github.com/angular/angular/issues/22046)) ([f1a0632](https://github.com/angular/angular/commit/f1a0632)), closes [#22027](https://github.com/angular/angular/issues/22027)
+* **core:** support metadata reflection for native class types ([#22356](https://github.com/angular/angular/issues/22356)) ([5c89d6b](https://github.com/angular/angular/commit/5c89d6b)), closes [#21731](https://github.com/angular/angular/issues/21731)
+* **core:** change @Injectable() to support tree-shakeable tokens ([#22005](https://github.com/angular/angular/issues/22005)) ([235a235](https://github.com/angular/angular/commit/235a235))
+* **core:** support metadata reflection for native class types ([#22356](https://github.com/angular/angular/issues/22356)) ([b7544cc](https://github.com/angular/angular/commit/b7544cc)), closes [#21731](https://github.com/angular/angular/issues/21731)
+* **core:** allow direct scoping of @Injectables to the root injector ([#22185](https://github.com/angular/angular/issues/22185)) ([7ac34e4](https://github.com/angular/angular/commit/7ac34e4))
+* **core:** add task tracking to Testability ([#16863](https://github.com/angular/angular/issues/16863)) ([37fedd0](https://github.com/angular/angular/commit/37fedd0))
+* **forms:** handle string with and without line boundary on pattern validator ([#19256](https://github.com/angular/angular/issues/19256)) ([54bf179](https://github.com/angular/angular/commit/54bf179))
+* **forms:** multiple validators for array method ([#20766](https://github.com/angular/angular/issues/20766)) ([941e88f](https://github.com/angular/angular/commit/941e88f)), closes [#20665](https://github.com/angular/angular/issues/20665)
+* **forms:** allow markAsPending to emit events ([#20212](https://github.com/angular/angular/issues/20212)) ([e86b64b](https://github.com/angular/angular/commit/e86b64b)), closes [#17958](https://github.com/angular/angular/issues/17958)
+* **platform-browser:** add token marking which the type of animation module nearest in the injector tree ([#23075](https://github.com/angular/angular/issues/23075)) ([b551f84](https://github.com/angular/angular/commit/b551f84))
+* **platform-browser:** do not throw error when Hammer.js not loaded ([#22257](https://github.com/angular/angular/issues/22257)) ([991300b](https://github.com/angular/angular/commit/991300b)), closes [#16992](https://github.com/angular/angular/issues/16992)
+* **platform-browser:** fix [#19604](https://github.com/angular/angular/issues/19604), can config hammerOptions ([#21979](https://github.com/angular/angular/issues/21979)) ([1d571b2](https://github.com/angular/angular/commit/1d571b2))
+* **platform-server:** bump Domino to v2.0 ([#22411](https://github.com/angular/angular/issues/22411)) ([d3827a0](https://github.com/angular/angular/commit/d3827a0))
+* **router:** add navigationSource and restoredState to NavigationStart event ([#21728](https://github.com/angular/angular/issues/21728)) ([c40ae7f](https://github.com/angular/angular/commit/c40ae7f))
+* **service-worker:** add support for configuring navigations URLs ([#23339](https://github.com/angular/angular/issues/23339)) ([08325aa](https://github.com/angular/angular/commit/08325aa)), closes [#20404](https://github.com/angular/angular/issues/20404)
+* **service-worker:** add helper script which will uninstall SW ([#21863](https://github.com/angular/angular/issues/21863)) ([b10540a](https://github.com/angular/angular/commit/b10540a))
+
+
+
+
+### Bug Fixes
+
+* **animations:** report correct totalTime value even during noOp animations ([#22225](https://github.com/angular/angular/issues/22225)) ([e1bf067](https://github.com/angular/angular/commit/e1bf067))
+* **animations:** avoid animation insertions during router back/refresh ([#21977](https://github.com/angular/angular/issues/21977)) ([f88fba0](https://github.com/angular/angular/commit/f88fba0)), closes [#19712](https://github.com/angular/angular/issues/19712)
+* **animations:** treat numeric state name values as strings ([#22923](https://github.com/angular/angular/issues/22923)) ([e5e1b0d](https://github.com/angular/angular/commit/e5e1b0d))
+* **animations:** fix increment/decrement aliases example ([#18323](https://github.com/angular/angular/issues/18323)) ([d2aa8ac](https://github.com/angular/angular/commit/d2aa8ac))
+* **common:** NgClass should properly take className changes into account ([#21937](https://github.com/angular/angular/issues/21937)) ([4a42669](https://github.com/angular/angular/commit/4a42669)), closes [#21932](https://github.com/angular/angular/issues/21932)
+* **common:** fix the titlecase pipe ([#22600](https://github.com/angular/angular/issues/22600)) ([7966744](https://github.com/angular/angular/commit/7966744))
+* **common:** add locale currency values ([#21783](https://github.com/angular/angular/issues/21783)) ([420cc7a](https://github.com/angular/angular/commit/420cc7a)), closes [#20385](https://github.com/angular/angular/issues/20385)
+* **common:** round currencies based on decimal digits in `CurrencyPipe` ([#21783](https://github.com/angular/angular/issues/21783)) ([44154e7](https://github.com/angular/angular/commit/44154e7)), closes [#10189](https://github.com/angular/angular/issues/10189)
+* **common:** weaken AsyncPipe transform signature ([#22169](https://github.com/angular/angular/issues/22169)) ([be59c3a](https://github.com/angular/angular/commit/be59c3a))
+* **common:** http testing library should not convert null to a string when flushing a mock request ([#21417](https://github.com/angular/angular/issues/21417)) ([8b14488](https://github.com/angular/angular/commit/8b14488)), closes [#20744](https://github.com/angular/angular/issues/20744)
+* **common:** correct mapping of Observable methods ([#20518](https://github.com/angular/angular/issues/20518)) ([2639b4b](https://github.com/angular/angular/commit/2639b4b)), closes [#20516](https://github.com/angular/angular/issues/20516)
+* **common:** then and else template might be set to null ([#22298](https://github.com/angular/angular/issues/22298)) ([8115edc](https://github.com/angular/angular/commit/8115edc))
+* **common:** A null value should remove the style on IE ([#21679](https://github.com/angular/angular/issues/21679)) ([7d49443](https://github.com/angular/angular/commit/7d49443)), closes [#21064](https://github.com/angular/angular/issues/21064)
+* **common:** fallback to last defined value for named date and time formats ([#21299](https://github.com/angular/angular/issues/21299)) ([879756d](https://github.com/angular/angular/commit/879756d)), closes [#21282](https://github.com/angular/angular/issues/21282)
+* **common:** set correct timezone for ISO8601 dates in Safari ([#21506](https://github.com/angular/angular/issues/21506)) ([05208b8](https://github.com/angular/angular/commit/05208b8)), closes [#21491](https://github.com/angular/angular/issues/21491)
+* **compiler:** fix ICU select messages to use male/female/other ([#21713](https://github.com/angular/angular/issues/21713)) ([cb5090c](https://github.com/angular/angular/commit/cb5090c))
+* **compiler:** avoid a crash in ngc-wrapped. ([#23468](https://github.com/angular/angular/issues/23468)) ([0bc8443](https://github.com/angular/angular/commit/0bc8443))
+* **compiler:** handle undefined annotation metadata ([#23349](https://github.com/angular/angular/issues/23349)) ([b9431e8](https://github.com/angular/angular/commit/b9431e8))
+* **compiler:** don't typecheck all inputs ([#22899](https://github.com/angular/angular/issues/22899)) ([838a610](https://github.com/angular/angular/commit/838a610))
+* **compiler:** fix support for html-like text in translatable attributes ([#23053](https://github.com/angular/angular/issues/23053)) ([28058b7](https://github.com/angular/angular/commit/28058b7))
+* **compiler:** take quoting into account when determining if object literals can be shared ([#22942](https://github.com/angular/angular/issues/22942)) ([d98e9e7](https://github.com/angular/angular/commit/d98e9e7))
+* **compiler:** do not emit line/char in ngsummary files. ([#22840](https://github.com/angular/angular/issues/22840)) ([5c387a7](https://github.com/angular/angular/commit/5c387a7))
+* **compiler:** make unary plus operator consistent to JavaScript ([#22154](https://github.com/angular/angular/issues/22154)) ([72f8abd](https://github.com/angular/angular/commit/72f8abd)), closes [#22089](https://github.com/angular/angular/issues/22089)
+* **compiler:** allow tree-shakeable injectables to depend on string tokens ([#22376](https://github.com/angular/angular/issues/22376)) ([dd53447](https://github.com/angular/angular/commit/dd53447))
+* **compiler:** don't strip `/*# sourceURL ... */` ([#16088](https://github.com/angular/angular/issues/16088)) ([5f681f9](https://github.com/angular/angular/commit/5f681f9))
+* **compiler:** cache external reference resolution ([#21359](https://github.com/angular/angular/issues/21359)) ([e3e2fc0](https://github.com/angular/angular/commit/e3e2fc0))
+* **compiler:** make `.ngsummary.json` files idempotent ([#21448](https://github.com/angular/angular/issues/21448)) ([e64b1e9](https://github.com/angular/angular/commit/e64b1e9))
+* **compiler-cli:** shorten resolved module name in fileNameToModuleName to npm package name for typings ([#23231](https://github.com/angular/angular/issues/23231)) ([6199ea5](https://github.com/angular/angular/commit/6199ea5))
+* **compiler-cli:** strictMetadataEmit should not break on non-compliant libraries ([#23275](https://github.com/angular/angular/issues/23275)) ([5814355](https://github.com/angular/angular/commit/5814355)), closes [#22210](https://github.com/angular/angular/issues/22210)
+* **compiler-cli:** flat module index metadata should be transformed ([#23129](https://github.com/angular/angular/issues/23129)) ([f99cb5c](https://github.com/angular/angular/commit/f99cb5c))
+* **compiler-cli:** use numeric comparison for TypeScript version ([#22705](https://github.com/angular/angular/issues/22705)) ([193737a](https://github.com/angular/angular/commit/193737a)), closes [#22593](https://github.com/angular/angular/issues/22593)
+* **compiler-cli:** disableTypeScriptVersionCheck should be applied even for older tsc versions ([#22669](https://github.com/angular/angular/issues/22669)) ([3f70aba](https://github.com/angular/angular/commit/3f70aba))
+* **compiler-cli:** emit correct css string escape sequences ([#22776](https://github.com/angular/angular/issues/22776)) ([6e5e819](https://github.com/angular/angular/commit/6e5e819))
+* **compiler-cli:** do not fold errors past calls in the collector ([#21708](https://github.com/angular/angular/issues/21708)) ([dd86790](https://github.com/angular/angular/commit/dd86790))
+* **compiler-cli:** do not lower expressions in non-modules ([#21649](https://github.com/angular/angular/issues/21649)) ([7f93aad](https://github.com/angular/angular/commit/7f93aad))
+* **core:** fix [#20582](https://github.com/angular/angular/issues/20582), don't need to wrap zone in location change listener ([#20640](https://github.com/angular/angular/issues/20640)) ([f791e9f](https://github.com/angular/angular/commit/f791e9f))
+* **core:** fix proper propagation of subscriptions in EventEmitter ([#22016](https://github.com/angular/angular/issues/22016)) ([e81606c](https://github.com/angular/angular/commit/e81606c)), closes [#21999](https://github.com/angular/angular/issues/21999)
+* **core:** fix chained http call ([#20924](https://github.com/angular/angular/issues/20924)) ([7e3f9a4](https://github.com/angular/angular/commit/7e3f9a4)), closes [#20921](https://github.com/angular/angular/issues/20921)
+* **core:** should check Zone existence when scheduleMicroTask ([#20656](https://github.com/angular/angular/issues/20656)) ([3a86940](https://github.com/angular/angular/commit/3a86940))
+* **core:** avoid eager providers re-initialization ([#23559](https://github.com/angular/angular/issues/23559)) ([697b6c0](https://github.com/angular/angular/commit/697b6c0))
+* **core:** add stacktrace in log when error during cleanup component in TestBed ([#22162](https://github.com/angular/angular/issues/22162)) ([16d1700](https://github.com/angular/angular/commit/16d1700))
+* **core:** ensure initial value of QueryList length ([#21980](https://github.com/angular/angular/issues/21980)) ([#21982](https://github.com/angular/angular/issues/21982)) ([e56de10](https://github.com/angular/angular/commit/e56de10)), closes [#21980](https://github.com/angular/angular/issues/21980)
+* **core:** use appropriate inert document strategy for Firefox & Safari ([#17019](https://github.com/angular/angular/issues/17019)) ([a751649](https://github.com/angular/angular/commit/a751649))
+* **core:** properly handle function without prototype in reflector ([#22284](https://github.com/angular/angular/issues/22284)) ([a7ebf5a](https://github.com/angular/angular/commit/a7ebf5a)), closes [#19978](https://github.com/angular/angular/issues/19978)
+* **core:** require factory to be provided for shakeable InjectionToken ([#22207](https://github.com/angular/angular/issues/22207)) ([f755db7](https://github.com/angular/angular/commit/f755db7)), closes [#22205](https://github.com/angular/angular/issues/22205)
+* **core:** remove core animation import symbols ([#22692](https://github.com/angular/angular/issues/22692)) ([f5a98f4](https://github.com/angular/angular/commit/f5a98f4))
+* **forms:** improve error message for invalid value accessors ([#22731](https://github.com/angular/angular/issues/22731)) ([23cc3ef](https://github.com/angular/angular/commit/23cc3ef))
+* **forms:** make Validators.email support optional controls ([#20869](https://github.com/angular/angular/issues/20869)) ([140e7c0](https://github.com/angular/angular/commit/140e7c0))
+* **forms:** prevent event emission on enable/disable when emitEvent is false ([#12366](https://github.com/angular/angular/issues/12366)) ([#21018](https://github.com/angular/angular/issues/21018)) ([0bcfae7](https://github.com/angular/angular/commit/0bcfae7))
+* **forms:** set state before emitting a value from ngModelChange ([#21514](https://github.com/angular/angular/issues/21514)) ([9744a1c](https://github.com/angular/angular/commit/9744a1c)), closes [#21513](https://github.com/angular/angular/issues/21513)
+* **forms:** publish missing types ([#19941](https://github.com/angular/angular/issues/19941)) ([2707012](https://github.com/angular/angular/commit/2707012))
+* **forms:** set state before emitting a value from ngModelChange ([#21514](https://github.com/angular/angular/issues/21514)) ([3e6a86f](https://github.com/angular/angular/commit/3e6a86f)), closes [#21513](https://github.com/angular/angular/issues/21513)
+* **language-service:** Clear caches when program changes ([#21337](https://github.com/angular/angular/issues/21337)) ([43e1520](https://github.com/angular/angular/commit/43e1520)), closes [#19405](https://github.com/angular/angular/issues/19405)
+* **platform-browser:** add @Injectable where it was missing ([#22005](https://github.com/angular/angular/issues/22005)) ([0a1a397](https://github.com/angular/angular/commit/0a1a397))
+* **platform-browser:** support 0/false/null values in transfer_state ([#22179](https://github.com/angular/angular/issues/22179)) ([6435ecd](https://github.com/angular/angular/commit/6435ecd))
+* **platform-browser:** do not throw error when Hammer.js not loaded ([#22257](https://github.com/angular/angular/issues/22257)) ([991300b](https://github.com/angular/angular/commit/991300b)), closes [#16992](https://github.com/angular/angular/issues/16992)
+* **platform-browser:** fix [#19604](https://github.com/angular/angular/issues/19604), can config hammerOptions ([#21979](https://github.com/angular/angular/issues/21979)) ([1d571b2](https://github.com/angular/angular/commit/1d571b2))
+* **platform-server:** require node v8+ ([#23331](https://github.com/angular/angular/issues/23331)) ([bbfa1d3](https://github.com/angular/angular/commit/bbfa1d3))
+* **platform-server:** generate correct stylings for camel case names ([#22263](https://github.com/angular/angular/issues/22263)) ([40ba009](https://github.com/angular/angular/commit/40ba009)), closes [#19235](https://github.com/angular/angular/issues/19235)
+* **platform-server:** add styles to elements correctly ([#22527](https://github.com/angular/angular/issues/22527)) ([cd2ebd2](https://github.com/angular/angular/commit/cd2ebd2))
+* **router:** cache route handle if found ([#22475](https://github.com/angular/angular/issues/22475)) ([d8de648](https://github.com/angular/angular/commit/d8de648)), closes [#22474](https://github.com/angular/angular/issues/22474)
+* **router:** don't use spread operator to workaround an issue in closure compiler ([#22884](https://github.com/angular/angular/issues/22884)) ([e6c731f](https://github.com/angular/angular/commit/e6c731f))
+* **router:** make locationSyncBootstrapListener public due to change in output after TS 2.7 update in [#22669](https://github.com/angular/angular/issues/22669) ([#22896](https://github.com/angular/angular/issues/22896)) ([623d769](https://github.com/angular/angular/commit/623d769))
+* **router:** correct over-encoding of URL fragment ([#22687](https://github.com/angular/angular/issues/22687)) ([0bf6fa5](https://github.com/angular/angular/commit/0bf6fa5))
+* **router:** don't mutate route configs ([#22358](https://github.com/angular/angular/issues/22358)) ([45eff4c](https://github.com/angular/angular/commit/45eff4c)), closes [#22203](https://github.com/angular/angular/issues/22203)
+* **router:** fix URL serialization so special characters are only encoded where needed ([#22337](https://github.com/angular/angular/issues/22337)) ([094666d](https://github.com/angular/angular/commit/094666d)), closes [#10280](https://github.com/angular/angular/issues/10280)
+* **router:** don't use ParamsInheritanceStrategy in declarations ([#21574](https://github.com/angular/angular/issues/21574)) ([925e654](https://github.com/angular/angular/commit/925e654)), closes [#21456](https://github.com/angular/angular/issues/21456)
+* **service-worker:** add badge to NOTIFICATION_OPTION_NAMES ([#23241](https://github.com/angular/angular/issues/23241)) ([fb59b2d](https://github.com/angular/angular/commit/fb59b2d)), closes [#23196](https://github.com/angular/angular/issues/23196)
+* **service-worker:** let `*` match 0 characters in globs ([#23339](https://github.com/angular/angular/issues/23339)) ([6c2c958](https://github.com/angular/angular/commit/6c2c958))
+* **service-worker:** do not enter degraded mode when offline ([#22883](https://github.com/angular/angular/issues/22883)) ([9e9b8dd](https://github.com/angular/angular/commit/9e9b8dd)), closes [#21636](https://github.com/angular/angular/issues/21636)
+* **service-worker:** fix LruList bugs ([#22769](https://github.com/angular/angular/issues/22769)) ([8c2a578](https://github.com/angular/angular/commit/8c2a578)), closes [#22218](https://github.com/angular/angular/issues/22218) [#22768](https://github.com/angular/angular/issues/22768)
+* **service-worker:** ignore invalid `only-if-cached` requests ([#22883](https://github.com/angular/angular/issues/22883)) ([d9dc46e](https://github.com/angular/angular/commit/d9dc46e)), closes [#22362](https://github.com/angular/angular/issues/22362)
+* **service-worker:** properly handle invalid hashes in all scenarios ([#21288](https://github.com/angular/angular/issues/21288)) ([3951098](https://github.com/angular/angular/commit/3951098))
+* **upgrade:** correctly handle downgraded `OnPush` components ([#22209](https://github.com/angular/angular/issues/22209)) ([ad9ce5c](https://github.com/angular/angular/commit/ad9ce5c)), closes [#14286](https://github.com/angular/angular/issues/14286)
+* **upgrade:** propagate return value of resumeBootstrap ([#22754](https://github.com/angular/angular/issues/22754)) ([a2330ff](https://github.com/angular/angular/commit/a2330ff)), closes [#22723](https://github.com/angular/angular/issues/22723)
+* **upgrade:** two-way binding and listening for event ([#22772](https://github.com/angular/angular/issues/22772)) ([2b3de63](https://github.com/angular/angular/commit/2b3de63)), closes [#22734](https://github.com/angular/angular/issues/22734)
+* **upgrade:** correctly destroy nested downgraded component ([#22400](https://github.com/angular/angular/issues/22400)) ([8a85888](https://github.com/angular/angular/commit/8a85888)), closes [#22392](https://github.com/angular/angular/issues/22392)
+* **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([f089bf5](https://github.com/angular/angular/commit/f089bf5))
+* **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([13ab91e](https://github.com/angular/angular/commit/13ab91e)), closes [#22175](https://github.com/angular/angular/issues/22175)
+
+
+
+### Possible Breaking Changes
+
+* **animations:** When animation is triggered within a disabled zone, the associated event (which an instance of AnimationEvent) will no longer report the totalTime as 0 (it will emit the actual time of the animation).
+
+  To detect if an animation event is reporting a disabled animation then the `event.disabled` property can be used instead.
+
+
+* **compiler:** The `<template>` tag was deprecated in Angular v4 to avoid collisions (i.e. when using Web Components).
+
+  This change removes support for `<template>`. `<ng-template>` should be used instead.
+
+  BEFORE:
+
+      <!-- html template -->
+      <template>some template content</template>
+
+      # tsconfig.json
+      {
+        # ...
+        "angularCompilerOptions": {
+          # ...
+          # This option is no more supported and will have no effect
+          "enableLegacyTemplate": [true|false]
+        }
       }
-    })
 
- ([f3b49378](https://github.com/angular/angular/commit/f3b49378))
-* 
-no longer cache ref
-
- ([e77710a3](https://github.com/angular/angular/commit/e77710a3))
-
-
-<a name"2.0.0-alpha.26"></a>
-### 2.0.0-alpha.26 (2015-06-03)
-
-
-#### Bug Fixes
-
-* format a file that slipped in. ([471a1b6d](https://github.com/angular/angular/commit/471a1b6d))
-* fix clang errors ([01fb8e66](https://github.com/angular/angular/commit/01fb8e66))
-* **ShadowCss:** keyframes tests failing in Safari ([4c8e11a5](https://github.com/angular/angular/commit/4c8e11a5), closes [#2283](https://github.com/angular/angular/issues/2283))
-* **Tools:** Moves files out of dart2js/**/web. ([40150379](https://github.com/angular/angular/commit/40150379))
-* **ast:** fix the size of a list in _evalListCache ([0387221d](https://github.com/angular/angular/commit/0387221d))
-* **benchpress:**
-  * support nested intervals ([c280fe81](https://github.com/angular/angular/commit/c280fe81))
-  * add index to root of module ([383f0a1f](https://github.com/angular/angular/commit/383f0a1f))
-* **binding:** unbalanced curly brackets in documentation ([a80921b4](https://github.com/angular/angular/commit/a80921b4))
-* **browser_adapter:**
-  * HTMLStyleElement.innerText does not trigger creation of CSS rules (Firefox) ([b2a24e02](https://github.com/angular/angular/commit/b2a24e02))
-  * event creation fails (IE11, Firefox) ([665ccafd](https://github.com/angular/angular/commit/665ccafd))
-  * element.getBoundingClientRect fails when element not in DOM (IE11) ([f35dbb99](https://github.com/angular/angular/commit/f35dbb99))
-  * element.matches only available with prefix (IE11) ([a393f84f](https://github.com/angular/angular/commit/a393f84f))
-  * assigning null to document.title sets the title to "null" (IE11, Firefox) ([92c2c33a](https://github.com/angular/angular/commit/92c2c33a))
-* **build:**
-  * remove nonexistant dart format task from gulpfile ([f74d7727](https://github.com/angular/angular/commit/f74d7727))
-  * make dart formatter errors more readable ([31b66878](https://github.com/angular/angular/commit/31b66878))
-  * also run ts tests in node. ([05774f6c](https://github.com/angular/angular/commit/05774f6c))
-* **collection:**
-  * iterator on Map keys is not supported (Safari) ([4b98ed11](https://github.com/angular/angular/commit/4b98ed11), closes [#2096](https://github.com/angular/angular/issues/2096))
-  * new Map(iterable) is not supported (Safari) ([d308e55e](https://github.com/angular/angular/commit/d308e55e))
-  * new Set(iterable) is not supported (IE11, Safari) ([57b88ec2](https://github.com/angular/angular/commit/57b88ec2), closes [#2063](https://github.com/angular/angular/issues/2063))
-* **core:** resurrect OnChange interface ([d48fae35](https://github.com/angular/angular/commit/d48fae35))
-* **dartdocs:** Hide duplicate exports from guinness. ([17e1d7f1](https://github.com/angular/angular/commit/17e1d7f1))
-* **deps:** Update clang-format to 1.0.14. ([15f1eb28](https://github.com/angular/angular/commit/15f1eb28))
-* **di:** allow `@Inject(…)` to work in dart2js and dynamic reflection ([4a3fd5e8](https://github.com/angular/angular/commit/4a3fd5e8), closes [#2185](https://github.com/angular/angular/issues/2185))
-* **docs:** generate d.ts file only for angular2/angular2. ([0a0b84a0](https://github.com/angular/angular/commit/0a0b84a0))
-* **dom:**
-  * allow to correctly clone document fragments ([2351896c](https://github.com/angular/angular/commit/2351896c))
-  * `querySelectorAll` should only query child nodes ([307011a9](https://github.com/angular/angular/commit/307011a9))
-* **example:** unused event ([f83f1ee0](https://github.com/angular/angular/commit/f83f1ee0))
-* **examples:** update form example to use NgIf ([1ad65582](https://github.com/angular/angular/commit/1ad65582))
-* **facade:**
-  * Make PromiseWrapper#all semantics equivalent ([22f59252](https://github.com/angular/angular/commit/22f59252))
-  * Fix bug in TS indexOf ([cda35101](https://github.com/angular/angular/commit/cda35101))
-* **fake_async:** fixed fakeAsync to throw instead of crashing on cjs ([5c53cf64](https://github.com/angular/angular/commit/5c53cf64))
-* **forms:** disabled form tests on cjs until fakeAsync is fixed ([cd52d8a3](https://github.com/angular/angular/commit/cd52d8a3))
-* **gulp:** prevent duplicate error messages ([381d4cb3](https://github.com/angular/angular/commit/381d4cb3), closes [#2021](https://github.com/angular/angular/issues/2021))
-* **injectable:** add missing @Injectables annotations ([0c7f05f5](https://github.com/angular/angular/commit/0c7f05f5), closes [#2173](https://github.com/angular/angular/issues/2173))
-* **package.json:** add `reflect-metadata` to package.json ([60801777](https://github.com/angular/angular/commit/60801777), closes [#2170](https://github.com/angular/angular/issues/2170))
-* **render:**
-  * only look for content tags in views that might have them. ([ba7956f5](https://github.com/angular/angular/commit/ba7956f5), closes [#2297](https://github.com/angular/angular/issues/2297))
-  * don’t store a document fragment as bound element ([24bc4b66](https://github.com/angular/angular/commit/24bc4b66))
-* **router:** event.defaultPrevented is not reliable (IE11) ([2287938f](https://github.com/angular/angular/commit/2287938f))
-* **selector:** support multiple `:not` clauses ([62a95823](https://github.com/angular/angular/commit/62a95823), closes [#2243](https://github.com/angular/angular/issues/2243))
-* **test:**
-  * clang formatting errors ([05d66bba](https://github.com/angular/angular/commit/05d66bba))
-  * solve CSS discrepancies across browsers ([fb42d590](https://github.com/angular/angular/commit/fb42d590), closes [#2177](https://github.com/angular/angular/issues/2177))
-  * use a not expandable CSS rule in ShadowCSS spec (Firefox) ([588fbfd8](https://github.com/angular/angular/commit/588fbfd8), closes [#2061](https://github.com/angular/angular/issues/2061))
-  * adds longer timers for NgZone and PromisePipe tests (IE11) ([661a0479](https://github.com/angular/angular/commit/661a0479), closes [#2055](https://github.com/angular/angular/issues/2055))
-  * native shadow DOM is required (IE11, Firefox) ([9802debf](https://github.com/angular/angular/commit/9802debf))
-  * function.name is not available (IE11) ([5103f080](https://github.com/angular/angular/commit/5103f080))
-* **tests:** disable mobile emulation so benchmarks run on current chrome ([b071b66b](https://github.com/angular/angular/commit/b071b66b))
-* **types:** parametrize QueryList. ([552985e3](https://github.com/angular/angular/commit/552985e3))
-
-
-#### Features
-
-* add support for the safe navigation (aka Elvis) operator ([a9be2ebf](https://github.com/angular/angular/commit/a9be2ebf), closes [#791](https://github.com/angular/angular/issues/791))
-* **Directive:** convert properties to an array ([d7df853b](https://github.com/angular/angular/commit/d7df853b), closes [#2013](https://github.com/angular/angular/issues/2013))
-* **ElementInjector:** support an arbitrary number of bindings ([b1c9bf14](https://github.com/angular/angular/commit/b1c9bf14), closes [#1853](https://github.com/angular/angular/issues/1853))
-* **OpaqueToken:** now a const constructor ([c571b269](https://github.com/angular/angular/commit/c571b269))
-* **RegExpWrapper:** implement a test method ([551586ce](https://github.com/angular/angular/commit/551586ce))
-* **benchpress:** Add extension for ff metrics reporting ([b390f441](https://github.com/angular/angular/commit/b390f441), closes [#1976](https://github.com/angular/angular/issues/1976))
-* **binding:** throw on binding to a blank alias ([ec2d8cc2](https://github.com/angular/angular/commit/ec2d8cc2), closes [#2068](https://github.com/angular/angular/issues/2068))
-* **broccoli:** add incremental dartfmt plugin ([e5d06e47](https://github.com/angular/angular/commit/e5d06e47), closes [#2211](https://github.com/angular/angular/issues/2211))
-* **change_detection:** added onInit and onCheck hooks ([c39c8ebc](https://github.com/angular/angular/commit/c39c8ebc))
-* **change_detection.ts:** export PipeFactory ([93f464a1](https://github.com/angular/angular/commit/93f464a1), closes [#2245](https://github.com/angular/angular/issues/2245))
-* **core:**
-  * added support for detecting lifecycle events based on interfaces ([30b6542f](https://github.com/angular/angular/commit/30b6542f))
-  * added missing interfaces for onDestroy and onAllChangesDone lifecycle events ([2b6a6530](https://github.com/angular/angular/commit/2b6a6530))
-* **di:** added optional self parameter to Parent, Ancestor, and Unbounded ([34cfc9f4](https://github.com/angular/angular/commit/34cfc9f4))
-* **dom:** add `setData()` method. ([6f3368ef](https://github.com/angular/angular/commit/6f3368ef))
-* **facade:** add read/write access to global variables ([cdf791f0](https://github.com/angular/angular/commit/cdf791f0))
-* **fakeAsync:** flush the microtasks before returning ([c7572ac1](https://github.com/angular/angular/commit/c7572ac1), closes [#2269](https://github.com/angular/angular/issues/2269))
-* **form:** implemented an imperative way of updating the view by updating the value of a co ([652ed0cf](https://github.com/angular/angular/commit/652ed0cf))
-* **forms:**
-  * added support for status classes ([3baf815d](https://github.com/angular/angular/commit/3baf815d))
-  * added touched and untouched to Control ([ec3a7828](https://github.com/angular/angular/commit/ec3a7828))
-  * renamed control, control-group into ng-control and ng-control-group ([f543834b](https://github.com/angular/angular/commit/f543834b))
-  * changed the selector of TemplatdrivenFormDirective to match <form> ([6bef1c41](https://github.com/angular/angular/commit/6bef1c41))
-  * added ng-model ([559f54e9](https://github.com/angular/angular/commit/559f54e9))
-  * implemented template-driven forms ([a9d6fd9a](https://github.com/angular/angular/commit/a9d6fd9a))
-* **key_event:** alias esc to escape ([10bc7e94](https://github.com/angular/angular/commit/10bc7e94), closes [#2010](https://github.com/angular/angular/issues/2010))
-* **reflector:** added a method to get type's interfaces ([34d75e89](https://github.com/angular/angular/commit/34d75e89))
-* **render:** re-export render and export `DirectiveResolver` ([662da0d7](https://github.com/angular/angular/commit/662da0d7), closes [#2026](https://github.com/angular/angular/issues/2026))
-* **router:** add the router bundle to the bundle task. ([05fa9bc9](https://github.com/angular/angular/commit/05fa9bc9))
-* **router.js:**
-  * export router injectables ([28ee0612](https://github.com/angular/angular/commit/28ee0612))
-  * export routerDirectives ([1f20ef97](https://github.com/angular/angular/commit/1f20ef97))
-* **test:**
-  * added not.toBeNull ([74882c6c](https://github.com/angular/angular/commit/74882c6c))
-  * add element probe ([f9908cd4](https://github.com/angular/angular/commit/f9908cd4), closes [#1992](https://github.com/angular/angular/issues/1992))
-* **test_lib:**
-  * add method to compare stringified DOM element ([c6335c12](https://github.com/angular/angular/commit/c6335c12), closes [#2106](https://github.com/angular/angular/issues/2106))
-  * add `containsRegex` ([23d59df8](https://github.com/angular/angular/commit/23d59df8))
-* **tests:** add TestComponentBuilder ([c32dbad7](https://github.com/angular/angular/commit/c32dbad7), closes [#1812](https://github.com/angular/angular/issues/1812))
-* **transformers:** added support for lifecycle events ([f19970a4](https://github.com/angular/angular/commit/f19970a4))
-* **view:**
-  * introduce free embedded views ([5030ffb0](https://github.com/angular/angular/commit/5030ffb0))
-  * add `AppViewListener` interface ([75578f41](https://github.com/angular/angular/commit/75578f41))
-
-
-#### Breaking Changes
-
-* 
-- `Renderer.detachFreeHostView` was renamed to
-  `Renderer.detachFreeView`
-- `DomRenderer.getHostElement()` was generalized into
-  `DomRenderer.getRootNodes()`
-
- ([5030ffb0](https://github.com/angular/angular/commit/5030ffb0))
-* 
-now a `const` constructor
-
- ([c571b269](https://github.com/angular/angular/commit/c571b269))
-* 
-Before
-
-    @Directive(properties: {
-      'sameName': 'sameName',
-      'directiveProp': 'elProp | pipe'
-    })
+  AFTER:
+
+      <!-- html template -->
+      <ng-template>some template content</ng-template>
+
+* **core:** it is no longer possible to import animation-related functions from @angular/core. All animation symbols must now be imported from @angular/animations.
+
+
+* **forms:** - `AbstractControl#statusChanges` now emits an event of `'PENDING'` when you call `AbstractControl#markAsPending`
+  - Previously it did not emit an event when you called `markAsPending`
+  - To migrate you would need to ensure that if you are filtering or checking events from `statusChanges` that you account for the new event when calling `markAsPending`
+
+
+* **forms:** ngModelChange is now emitted after the value/validity is updated on its control.
+
+  Previously, ngModelChange was emitted before its underlying control was updated.
+  This was fine if you passed through the value directly through the $event keyword, e.g.
+
+  ```
+  <input [(ngModel)]="name" (ngModelChange)="onChange($event)">
+
+  onChange(value) {
+     console.log(value);               // would log updated value
+  }
+  ```
+
+  However, if you had a handler for the ngModelChange event that checked the value through the control,
+  you would get the old value rather than the updated value. e.g:
+
+  ```
+  <input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">
+
+  onChange(ngModel: NgModel) {
+    console.log(ngModel.value);        // would log old value, not updated value
+  }
+  ```
+
+  Now the value and validity will be updated before the ngModelChange event is emitted,
+  so the same setup will log the updated value.
+
+  ```
+  onChange(ngModel: NgModel) {
+     console.log(ngModel.value);       // will log updated value
+  }
+  ```
+
+  We think this order will be less confusing when the control is checked directly.
+  You will only need to update your app if it has relied on this bug to keep track of the old control value.
+  If that is the case, you should be able to track the old value directly by saving it on your component.
+
+
+
+<a name="5.2.10"></a>
+## [5.2.10](https://github.com/angular/angular/compare/5.2.9...5.2.10) (2018-04-16)
+
+
+### Bug Fixes
+
+* **animations:** avoid animation insertions during router back/refresh ([#21977](https://github.com/angular/angular/issues/21977)) ([641cc49](https://github.com/angular/angular/commit/641cc49)), closes [#19712](https://github.com/angular/angular/issues/19712)
+* **common:** properly take className changes into account ([#21937](https://github.com/angular/angular/issues/21937)) ([54e9108](https://github.com/angular/angular/commit/54e9108)), closes [#21932](https://github.com/angular/angular/issues/21932)
+* **compiler:** fix support for html-like text in translatable attributes ([#23053](https://github.com/angular/angular/issues/23053)) ([4f7c369](https://github.com/angular/angular/commit/4f7c369))
+* **compiler-cli:** emit correct css string escape sequences ([#22776](https://github.com/angular/angular/issues/22776)) ([db0afa9](https://github.com/angular/angular/commit/db0afa9))
+* **forms:** improve error message for invalid value accessors ([#22731](https://github.com/angular/angular/issues/22731)) ([dd61595](https://github.com/angular/angular/commit/dd61595))
+* **service-worker:** add badge to NOTIFICATION_OPTION_NAMES ([#23241](https://github.com/angular/angular/issues/23241)) ([7b23983](https://github.com/angular/angular/commit/7b23983)), closes [#23196](https://github.com/angular/angular/issues/23196)
+* **service-worker:** do not enter degraded mode when offline ([#22883](https://github.com/angular/angular/issues/22883)) ([ae9c25f](https://github.com/angular/angular/commit/ae9c25f)), closes [#21636](https://github.com/angular/angular/issues/21636)
+* **service-worker:** fix LruList bugs ([#22769](https://github.com/angular/angular/issues/22769)) ([65f8943](https://github.com/angular/angular/commit/65f8943)), closes [#22218](https://github.com/angular/angular/issues/22218) [#22768](https://github.com/angular/angular/issues/22768)
+* **service-worker:** ignore invalid `only-if-cached` requests ([#22883](https://github.com/angular/angular/issues/22883)) ([0d4fe38](https://github.com/angular/angular/commit/0d4fe38)), closes [#22362](https://github.com/angular/angular/issues/22362)
+* **upgrade:** correctly handle downgraded `OnPush` components ([#22209](https://github.com/angular/angular/issues/22209)) ([f43fba6](https://github.com/angular/angular/commit/f43fba6)), closes [#14286](https://github.com/angular/angular/issues/14286)
+* **upgrade:** propagate return value of resumeBootstrap ([#22754](https://github.com/angular/angular/issues/22754)) ([ae76eec](https://github.com/angular/angular/commit/ae76eec)), closes [#22723](https://github.com/angular/angular/issues/22723)
+* **upgrade:** two-way binding and listening for event ([#22772](https://github.com/angular/angular/issues/22772)) ([5391f96](https://github.com/angular/angular/commit/5391f96)), closes [#22734](https://github.com/angular/angular/issues/22734)
+
+
+
+<a name="4.4.7"></a>
+## [4.4.7](https://github.com/angular/angular/compare/4.4.6...4.4.7) (2018-04-16)
+
+
+### Bug Fixes
+
+* **core:** use appropriate inert document strategy for Firefox & Safari ([#22077](https://github.com/angular/angular/issues/22077)) ([2c5cf19](https://github.com/angular/angular/commit/2c5cf19))
+
+
+
+<a name="5.2.9"></a>
+## [5.2.9](https://github.com/angular/angular/compare/5.2.8...5.2.9) (2018-03-14)
+
+
+### Bug Fixes
+
+* **platform-server:** add styles to elements correctly ([#22527](https://github.com/angular/angular/issues/22527)) ([fc6dfc2](https://github.com/angular/angular/commit/fc6dfc2))
+* **router:** correct over-encoding of URL fragment ([#22687](https://github.com/angular/angular/issues/22687)) ([86517f2](https://github.com/angular/angular/commit/86517f2))
+
+
+
+<a name="5.2.8"></a>
+## [5.2.8](https://github.com/angular/angular/compare/5.2.7...5.2.8) (2018-03-07)
+
+
+### Bug Fixes
+
+* **platform-server:** generate correct stylings for camel case names ([#22263](https://github.com/angular/angular/issues/22263)) ([de02a7a](https://github.com/angular/angular/commit/de02a7a)), closes [#19235](https://github.com/angular/angular/issues/19235)
+* **router:** don't mutate route configs ([#22358](https://github.com/angular/angular/issues/22358)) ([8f0a064](https://github.com/angular/angular/commit/8f0a064)), closes [#22203](https://github.com/angular/angular/issues/22203)
+* **router:** fix URL serialization so special characters are only encoded where needed ([#22337](https://github.com/angular/angular/issues/22337)) ([789a47e](https://github.com/angular/angular/commit/789a47e)), closes [#10280](https://github.com/angular/angular/issues/10280)
+* **upgrade:** correctly destroy nested downgraded component ([#22400](https://github.com/angular/angular/issues/22400)) ([4aef9de](https://github.com/angular/angular/commit/4aef9de)), closes [#22392](https://github.com/angular/angular/issues/22392)
+* **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([6638390](https://github.com/angular/angular/commit/6638390))
+* **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([a9a0e27](https://github.com/angular/angular/commit/a9a0e27)), closes [#22175](https://github.com/angular/angular/issues/22175)
+
+
+
+<a name="5.2.7"></a>
+## [5.2.7](https://github.com/angular/angular/compare/5.2.6...5.2.7) (2018-02-28)
+
+
+### Bug Fixes
+
+* **platform-server:** generate correct stylings for camel case names ([#22263](https://github.com/angular/angular/issues/22263)) ([de02a7a](https://github.com/angular/angular/commit/de02a7a)), closes [#19235](https://github.com/angular/angular/issues/19235)
+* **router:** don't mutate route configs ([#22358](https://github.com/angular/angular/issues/22358)) ([8f0a064](https://github.com/angular/angular/commit/8f0a064)), closes [#22203](https://github.com/angular/angular/issues/22203)
+* **upgrade:** correctly destroy nested downgraded component ([#22400](https://github.com/angular/angular/issues/22400)) ([4aef9de](https://github.com/angular/angular/commit/4aef9de)), closes [#22392](https://github.com/angular/angular/issues/22392)
+* **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([6638390](https://github.com/angular/angular/commit/6638390))
+* **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([a9a0e27](https://github.com/angular/angular/commit/a9a0e27)), closes [#22175](https://github.com/angular/angular/issues/22175)
+
+
+
+<a name="5.2.6"></a>
+## [5.2.6](https://github.com/angular/angular/compare/5.2.5...5.2.6) (2018-02-22)
+
+### Bug Fixes
+
+* **common:** correct mapping of Observable methods ([#20518](https://github.com/angular/angular/issues/20518)) ([ce5e8fa](https://github.com/angular/angular/commit/ce5e8fa)), closes [#20516](https://github.com/angular/angular/issues/20516)
+* **common:** then and else template might be set to null ([#22298](https://github.com/angular/angular/issues/22298)) ([af6a056](https://github.com/angular/angular/commit/af6a056))
+* **compiler-cli:** add missing entry point to package, update tsickle ([#22295](https://github.com/angular/angular/issues/22295)) ([c5418c7](https://github.com/angular/angular/commit/c5418c7))
+* **core:** properly handle function without prototype in reflector ([#22284](https://github.com/angular/angular/issues/22284)) ([5ec38f2](https://github.com/angular/angular/commit/5ec38f2)), closes [#19978](https://github.com/angular/angular/issues/19978)
+* **core:** support metadata reflection for native class types ([#22356](https://github.com/angular/angular/issues/22356)) ([ee91de9](https://github.com/angular/angular/commit/ee91de9)), closes [#21731](https://github.com/angular/angular/issues/21731)
+
+
+
+<a name="5.2.5"></a>
+## [5.2.5](https://github.com/angular/angular/compare/5.2.4...5.2.5) (2018-02-14)
+
+### Bug Fixes
+
+* **aio:** update Firebase redirects and SW routes ([#21763](https://github.com/angular/angular/pull/21763)) ([#22104](https://github.com/angular/angular/pull/22104)) ([15ff7ba](https://github.com/angular/angular/commit/15ff7ba)), closes [#21377](https://github.com/angular/angular/issues/21377)
+* **bazel:** allow TS to read ambient typings ([#21876](https://github.com/angular/angular/issues/21876)) ([d57fd0b](https://github.com/angular/angular/commit/d57fd0b)), closes [#21872](https://github.com/angular/angular/issues/21872)
+* **bazel:** improve error message for missing assets ([#22096](https://github.com/angular/angular/issues/22096)) ([c5ec8d9](https://github.com/angular/angular/commit/c5ec8d9)), closes [#22095](https://github.com/angular/angular/issues/22095)
+* **common:** weaken AsyncPipe transform signature ([#22169](https://github.com/angular/angular/issues/22169)) ([c6bdc83](https://github.com/angular/angular/commit/c6bdc83))
+* **compiler:** make unary plus operator consistent to JavaScript ([#22154](https://github.com/angular/angular/issues/22154)) ([1b8ea10](https://github.com/angular/angular/commit/1b8ea10)), closes [#22089](https://github.com/angular/angular/issues/22089)
+* **core:** add stacktrace in log when error during cleanup component in TestBed ([#22162](https://github.com/angular/angular/issues/22162)) ([c4f841f](https://github.com/angular/angular/commit/c4f841f))
+* **core:** ensure initial value of QueryList length ([#21980](https://github.com/angular/angular/issues/21980)) ([#21982](https://github.com/angular/angular/issues/21982)) ([47b73fd](https://github.com/angular/angular/commit/47b73fd)), closes [#21980](https://github.com/angular/angular/issues/21980)
+* **core:** use appropriate inert document strategy for Firefox & Safari ([#17019](https://github.com/angular/angular/issues/17019)) ([47b71d9](https://github.com/angular/angular/commit/47b71d9))
+* **forms:** prevent event emission on enable/disable when emitEvent is false ([#12366](https://github.com/angular/angular/issues/12366)) ([#21018](https://github.com/angular/angular/issues/21018)) ([56b9591](https://github.com/angular/angular/commit/56b9591))
+* **language-service:** correct instructions to install the language service ([#22000](https://github.com/angular/angular/issues/22000)) ([0b23573](https://github.com/angular/angular/commit/0b23573))
+* **platform-browser:** support 0/false/null values in transfer_state ([#22179](https://github.com/angular/angular/issues/22179)) ([da6ab91](https://github.com/angular/angular/commit/da6ab91))
+
+
+
+<a name="5.2.4"></a>
+## [5.2.4](https://github.com/angular/angular/compare/5.2.3...5.2.4) (2018-02-07)
+
+
+### Bug Fixes
+
+* **common:** don't convert null to a string when flushing a mock request ([#21417](https://github.com/angular/angular/issues/21417)) ([c4fb696](https://github.com/angular/angular/commit/c4fb696)), closes [#20744](https://github.com/angular/angular/issues/20744)
+* **core:** fix [#20582](https://github.com/angular/angular/issues/20582), don't need to wrap zone in location change listener ([#22007](https://github.com/angular/angular/issues/22007)) ([ce51ea9](https://github.com/angular/angular/commit/ce51ea9))
+* **core:** fix proper propagation of subscriptions in EventEmitter ([#22016](https://github.com/angular/angular/issues/22016)) ([c6645e7](https://github.com/angular/angular/commit/c6645e7)), closes [#21999](https://github.com/angular/angular/issues/21999)
+* **core:** should check Zone existence when scheduleMicroTask ([#20656](https://github.com/angular/angular/issues/20656)) ([aa9ba7f](https://github.com/angular/angular/commit/aa9ba7f))
+
+
+
+<a name="5.2.3"></a>
+## [5.2.3](https://github.com/angular/angular/compare/5.2.2...5.2.3) (2018-01-31)
+
+
+### Bug Fixes
+
+* **common:** allow HttpInterceptors to inject HttpClient ([#19809](https://github.com/angular/angular/issues/19809)) ([ed2b717](https://github.com/angular/angular/commit/ed2b717)), closes [#18224](https://github.com/angular/angular/issues/18224)
+* **common:** generate closure-locale data file with exported plural functions ([#21873](https://github.com/angular/angular/issues/21873)) ([c2f5ed5](https://github.com/angular/angular/commit/c2f5ed5)), closes [#21870](https://github.com/angular/angular/issues/21870)
+* **core:** fix retrieving the binding name when an expression changes ([#21814](https://github.com/angular/angular/issues/21814)) ([81d64d6](https://github.com/angular/angular/commit/81d64d6)), closes [#21735](https://github.com/angular/angular/issues/21735) [#21788](https://github.com/angular/angular/issues/21788)
+* **forms:** allow FormBuilder to create controls with any formState type ([#20917](https://github.com/angular/angular/issues/20917)) ([56f3e18](https://github.com/angular/angular/commit/56f3e18)), closes [#20368](https://github.com/angular/angular/issues/20368)
+* **forms:** inserting and removing controls should work in re-bound form arrays ([#21822](https://github.com/angular/angular/issues/21822)) ([fad99cc](https://github.com/angular/angular/commit/fad99cc)), closes [#21501](https://github.com/angular/angular/issues/21501)
+* **language-service:** ensure correct paths are passed to TypeScript ([#21812](https://github.com/angular/angular/issues/21812)) ([250c8da](https://github.com/angular/angular/commit/250c8da))
+* **language-service:** spell diagnostics correctly ([#21812](https://github.com/angular/angular/issues/21812)) ([778e6e7](https://github.com/angular/angular/commit/778e6e7))
+* **router:** remove [@internal](https://github.com/internal) tag on ParamInheritanceType ([#21773](https://github.com/angular/angular/issues/21773)) ([35a0721](https://github.com/angular/angular/commit/35a0721)), closes [#21456](https://github.com/angular/angular/issues/21456)
+
+
+
+<a name="5.2.2"></a>
+## [5.2.2](https://github.com/angular/angular/compare/5.2.1...5.2.2) (2018-01-25)
+
+
+### Bug Fixes
+
+* **common:** A null value should remove the style on IE ([#21679](https://github.com/angular/angular/issues/21679)) ([c12ea3a](https://github.com/angular/angular/commit/c12ea3a)), closes [#21064](https://github.com/angular/angular/issues/21064)
+* **common:** don't remove special characters when extracting CLDR data ([#21626](https://github.com/angular/angular/issues/21626)) ([a62c186](https://github.com/angular/angular/commit/a62c186))
+* **common:** extract plural function from i18n locale data files for TS 2.6 ([#21626](https://github.com/angular/angular/issues/21626)) ([71f9eaa](https://github.com/angular/angular/commit/71f9eaa)), closes [#21608](https://github.com/angular/angular/issues/21608)
+* **common:** fallback to last defined value for named date and time formats ([#21299](https://github.com/angular/angular/issues/21299)) ([982eb7b](https://github.com/angular/angular/commit/982eb7b)), closes [#21282](https://github.com/angular/angular/issues/21282)
+* **compiler:** add support for marker tags in xliff serializers ([#21250](https://github.com/angular/angular/issues/21250)) ([02352bc](https://github.com/angular/angular/commit/02352bc)), closes [#21078](https://github.com/angular/angular/issues/21078)
+* **compiler:** Don't strip `/*# sourceURL ... */` ([#16088](https://github.com/angular/angular/issues/16088)) ([de6c644](https://github.com/angular/angular/commit/de6c644))
+* **compiler:** fix ICU select messages to use male/female/other ([#21713](https://github.com/angular/angular/issues/21713)) ([8e44577](https://github.com/angular/angular/commit/8e44577))
+* **compiler-cli:** do not fold errors past calls in the collector ([#21708](https://github.com/angular/angular/issues/21708)) ([52970c0](https://github.com/angular/angular/commit/52970c0))
+* **compiler-cli:** do not lower expressions in non-modules ([#21649](https://github.com/angular/angular/issues/21649)) ([ba4ea82](https://github.com/angular/angular/commit/ba4ea82))
+* **router:** don't use ParamsInheritanceStrategy in declarations ([#21574](https://github.com/angular/angular/issues/21574)) ([8b3fbb5](https://github.com/angular/angular/commit/8b3fbb5)), closes [#21456](https://github.com/angular/angular/issues/21456)
+
+
+
+<a name="5.2.1"></a>
+## [5.2.1](https://github.com/angular/angular/compare/5.2.0...5.2.1) (2018-01-17)
+
+
+### Bug Fixes
+
+* **animations:** fix increment/decrement aliases example ([#18323](https://github.com/angular/angular/issues/18323)) ([48c1898](https://github.com/angular/angular/commit/48c1898))
+* **benchpress:** should still support selenium_webdriver < 3.6.0 ([#21477](https://github.com/angular/angular/issues/21477)) ([3c6a506](https://github.com/angular/angular/commit/3c6a506))
+* **common:** set correct timezone for ISO8601 dates in Safari ([#21506](https://github.com/angular/angular/issues/21506)) ([8e9cd57](https://github.com/angular/angular/commit/8e9cd57)), closes [#21491](https://github.com/angular/angular/issues/21491)
+* **compiler:** cache external reference resolution ([#21359](https://github.com/angular/angular/issues/21359)) ([c32e833](https://github.com/angular/angular/commit/c32e833))
+* **compiler:** make `.ngsummary.json` files idempotent ([#21448](https://github.com/angular/angular/issues/21448)) ([a931a41](https://github.com/angular/angular/commit/a931a41))
+* **core:** fix chained http call ([#20924](https://github.com/angular/angular/issues/20924)) ([54e7576](https://github.com/angular/angular/commit/54e7576)), closes [#20921](https://github.com/angular/angular/issues/20921)
+* **language-service:** Clear caches when program changes ([#21337](https://github.com/angular/angular/issues/21337)) ([cc9419d](https://github.com/angular/angular/commit/cc9419d)), closes [#19405](https://github.com/angular/angular/issues/19405)
+* **service-worker:** properly handle invalid hashes in all scenarios ([#21288](https://github.com/angular/angular/issues/21288)) ([51eb3d4](https://github.com/angular/angular/commit/51eb3d4))
+
+
+### Features
+
+* **core:** add binding name to content changed error ([#20352](https://github.com/angular/angular/issues/20352)) ([4556532](https://github.com/angular/angular/commit/4556532))
+* **forms:** handle string with and without line boundary on pattern validator ([#19256](https://github.com/angular/angular/issues/19256)) ([75f8522](https://github.com/angular/angular/commit/75f8522))
+
+
+
+<a name="5.2.0"></a>
+# [5.2.0](https://github.com/angular/angular/compare/5.2.0-rc.0...5.2.0) (2018-01-10)
+
+
+### Bug Fixes
+
+* **bazel:** Give correct module names for ES6 output ([#21320](https://github.com/angular/angular/issues/21320)) ([9728dce](https://github.com/angular/angular/commit/9728dce)), closes [#21022](https://github.com/angular/angular/issues/21022)
+* **benchpress:** forward compat with selenium_webdriver 3.6.0 ([#21399](https://github.com/angular/angular/issues/21399)) ([6040ee3](https://github.com/angular/angular/commit/6040ee3))
+* **benchpress:** work around missing events from Chrome 63 ([#21396](https://github.com/angular/angular/issues/21396)) ([fa03ae1](https://github.com/angular/angular/commit/fa03ae1))
+* **common:** export currencies via `getCurrencySymbol` ([#20983](https://github.com/angular/angular/issues/20983)) ([fecf768](https://github.com/angular/angular/commit/fecf768))
+
+Note: Due to an animation fix back in 5.1.1 ([c2b3792](https://github.com/angular/angular/commit/c2b3792a3b5fa5215fe2ef7e0ac6511086ffe4c1)) which allows for nested :leave queries to work within animation sequences, all elements that are dynamically inserted (*ngIf, *ngFor, etc…) now contain the special CSS class: “ng-star-inserted”. This may cause failures within unit tests if there are any assertions that match against element.className directly. (An easy fix for this is to match using a regular expression instead of asserting the className string directly.)
+
+<a name="5.2.0-rc.0"></a>
+# [5.2.0-rc.0](https://github.com/angular/angular/compare/5.2.0-beta.1...5.2.0-rc.0) (2018-01-04)
+
+
+### Bug Fixes
+
+* **animations:** avoid infinite loop with multiple blocked sub triggers ([#21119](https://github.com/angular/angular/issues/21119)) ([86a36ea](https://github.com/angular/angular/commit/86a36ea))
+* **animations:** renaming issue with DOMAnimation. ([#21125](https://github.com/angular/angular/issues/21125)) ([871ece6](https://github.com/angular/angular/commit/871ece6))
+* **common:** handle JS floating point errors in percent pipe ([#20329](https://github.com/angular/angular/issues/20329)) ([07b81ae](https://github.com/angular/angular/commit/07b81ae)), closes [#20136](https://github.com/angular/angular/issues/20136)
+* **language-service:** ignore null metadatas ([#20557](https://github.com/angular/angular/issues/20557)) ([3e47ea2](https://github.com/angular/angular/commit/3e47ea2)), closes [#20260](https://github.com/angular/angular/issues/20260)
+* **router:** fix wildcard route with lazy loaded module (again) ([#18139](https://github.com/angular/angular/issues/18139)) ([5ba1cf1](https://github.com/angular/angular/commit/5ba1cf1)), closes [#13848](https://github.com/angular/angular/issues/13848)
+
+
+
+<a name="5.1.3"></a>
+## [5.1.3](https://github.com/angular/angular/compare/5.1.2...5.1.3) (2018-01-03)
+
+
+### Bug Fixes
+
+* **animations:** avoid infinite loop with multiple blocked sub triggers ([#21119](https://github.com/angular/angular/issues/21119)) ([3e34fa8](https://github.com/angular/angular/commit/3e34fa8))
+* **animations:** renaming issue with DOMAnimation. ([#21125](https://github.com/angular/angular/issues/21125)) ([d1f4500](https://github.com/angular/angular/commit/d1f4500))
+* **common:** handle JS floating point errors in percent pipe ([#20329](https://github.com/angular/angular/issues/20329)) ([fa0e8ef](https://github.com/angular/angular/commit/fa0e8ef)), closes [#20136](https://github.com/angular/angular/issues/20136)
+* **language-service:** ignore null metadatas ([#20557](https://github.com/angular/angular/issues/20557)) ([48a1f32](https://github.com/angular/angular/commit/48a1f32)), closes [#20260](https://github.com/angular/angular/issues/20260)
+* **router:** fix wildcard route with lazy loaded module (again) ([#18139](https://github.com/angular/angular/issues/18139)) ([8c99175](https://github.com/angular/angular/commit/8c99175)), closes [#13848](https://github.com/angular/angular/issues/13848)
+
+
+<a name="5.2.0-beta.1"></a>
+# [5.2.0-beta.1](https://github.com/angular/angular/compare/5.2.0-beta.0...5.2.0-beta.1) (2017-12-20)
+
+
+### Bug Fixes
+
+* **compiler:** generate the correct imports for summary type-check ([d91ff17](https://github.com/angular/angular/commit/d91ff17))
+* **forms:** avoid producing an error with hostBindingTypeCheck ([d213a20](https://github.com/angular/angular/commit/d213a20))
+
+
+### Features
+
+* **compiler:** allow ngIf to use the ngIf expression directly as a guard ([82bcd83](https://github.com/angular/angular/commit/82bcd83))
+* **router:** add "paramsInheritanceStrategy" router configuration option ([5efea2f](https://github.com/angular/angular/commit/5efea2f)), closes [#20572](https://github.com/angular/angular/issues/20572)
+
+
+
+<a name="5.1.2"></a>
+## [5.1.2](https://github.com/angular/angular/compare/5.1.1...5.1.2) (2017-12-20)
+
+
+### Bug Fixes
+
+* **common:** fix a Closure compilation issue. ([267ebf3](https://github.com/angular/angular/commit/267ebf3))
+* **compiler:** make tsx file aot compatible ([756dd34](https://github.com/angular/angular/commit/756dd34)), closes [#20555](https://github.com/angular/angular/issues/20555)
+* **compiler:** report an error for recursive module references ([ced575f](https://github.com/angular/angular/commit/ced575f))
+* **compiler-cli:** do not emit invalid .metadata.json files ([a1d4c2d](https://github.com/angular/angular/commit/a1d4c2d))
+* **compiler-cli:** do not force type checking on .js files ([3b63e16](https://github.com/angular/angular/commit/3b63e16))
+* **service-worker:** check for updates on navigation ([a33182c](https://github.com/angular/angular/commit/a33182c)), closes [#20877](https://github.com/angular/angular/issues/20877)
+* **upgrade:** replaces get/setAngularLib with get/setAngularJSGlobal ([66cc2fa](https://github.com/angular/angular/commit/66cc2fa))
+
+
+
+<a name="5.2.0-beta.0"></a>
+# [5.2.0-beta.0](https://github.com/angular/angular/compare/5.1.0...5.2.0-beta.0) (2017-12-13)
+
+
+### Features
+
+* **animations:** re-introduce support for transition matching functions ([#20723](https://github.com/angular/angular/issues/20723)) ([590d93b](https://github.com/angular/angular/commit/590d93b)), closes [#18959](https://github.com/angular/angular/issues/18959)
+* **compiler:** add a pseudo $any() function to disable type checking ([#20876](https://github.com/angular/angular/issues/20876)) ([70cd124](https://github.com/angular/angular/commit/70cd124))
+* **compiler:** narrow types of expressions used in *ngIf ([#20702](https://github.com/angular/angular/issues/20702)) ([e7d9cb3](https://github.com/angular/angular/commit/e7d9cb3))
+* **core:** add source to `StaticInjectorError` message ([#20817](https://github.com/angular/angular/issues/20817)) ([b7738e1](https://github.com/angular/angular/commit/b7738e1)), closes [#19302](https://github.com/angular/angular/issues/19302)
+* **forms:** allow nulls on setAsyncValidators ([#20327](https://github.com/angular/angular/issues/20327)) ([d41d2c4](https://github.com/angular/angular/commit/d41d2c4)), closes [#20296](https://github.com/angular/angular/issues/20296)
+
+
+
+<a name="5.1.1"></a>
+## [5.1.1](https://github.com/angular/angular/compare/5.1.0...5.1.1) (2017-12-13)
+
+
+### Bug Fixes
+
+* **animations:** ensure multi-level route leave animations are queryable ([#20787](https://github.com/angular/angular/issues/20787)) ([d09d497](https://github.com/angular/angular/commit/d09d497)), closes [#19807](https://github.com/angular/angular/issues/19807)
+* **animations:** ensure the web-animations driver properly handles empty keyframes ([#20648](https://github.com/angular/angular/issues/20648)) ([c3e8731](https://github.com/angular/angular/commit/c3e8731)), closes [#15858](https://github.com/angular/angular/issues/15858)
+* **animations:** properly recover and cleanup DOM when CD failures occur ([#20719](https://github.com/angular/angular/issues/20719)) ([e6a2805](https://github.com/angular/angular/commit/e6a2805)), closes [#19093](https://github.com/angular/angular/issues/19093)
+* **animations:** support webkit-based vendor prefixes for prop validations ([#19055](https://github.com/angular/angular/issues/19055)) ([501f01e](https://github.com/angular/angular/commit/501f01e)), closes [#18921](https://github.com/angular/angular/issues/18921)
+* **bazel:** don't equate moduleName with fileName ([#20895](https://github.com/angular/angular/issues/20895)) ([0c9f7b0](https://github.com/angular/angular/commit/0c9f7b0))
+* **compiler:** support referencing enums in namespaces ([#20947](https://github.com/angular/angular/issues/20947)) ([d6da798](https://github.com/angular/angular/commit/d6da798)), closes [#18170](https://github.com/angular/angular/issues/18170)
+* **compiler-cli:** disable checkTypes in emit. ([#20828](https://github.com/angular/angular/issues/20828)) ([160a154](https://github.com/angular/angular/commit/160a154))
+* **compiler-cli:** fix swallowed Error messages ([#20846](https://github.com/angular/angular/issues/20846)) ([6727336](https://github.com/angular/angular/commit/6727336))
+* **compiler-cli:** merge [@fileoverview](https://github.com/fileoverview) comments. ([#20870](https://github.com/angular/angular/issues/20870)) ([be9a737](https://github.com/angular/angular/commit/be9a737))
+* **router:** NavigationError and NavigationCancel should be emitted after resetting the URL ([#20803](https://github.com/angular/angular/issues/20803)) ([baeec4d](https://github.com/angular/angular/commit/baeec4d))
+
+
+
+<a name="5.1.0"></a>
+# [5.1.0](https://github.com/angular/angular/compare/5.1.0-rc.1...5.1.0) (2017-12-06)
+
+
+### Bug Fixes
+
+* **animations:** ensure DOM is cleaned up after multiple [@trigger](https://github.com/trigger) leave animations finish ([#20740](https://github.com/angular/angular/issues/20740)) ([b78ada1](https://github.com/angular/angular/commit/b78ada1)), closes [#20541](https://github.com/angular/angular/issues/20541)
+* **service-worker:** initialize in browser only ([#20782](https://github.com/angular/angular/issues/20782)) ([7cabaa0](https://github.com/angular/angular/commit/7cabaa0)), closes [#20360](https://github.com/angular/angular/issues/20360)
+* **service-worker:** esm2015 points to wrong path ([#20800](https://github.com/angular/angular/issues/20800)) ([da3563c](https://github.com/angular/angular/commit/da3563c))
+
+
+
+<a name="5.1.0-rc.1"></a>
+# [5.1.0-rc.1](https://github.com/angular/angular/compare/5.1.0-rc.0...5.1.0-rc.1) (2017-12-01)
+
+
+### Bug Fixes
+
+* **compiler-cli:** propagate ts.SourceFile moduleName into metadata ([f841fbe](https://github.com/angular/angular/commit/f841fbe))
+* **service-worker:** allow disabling SW while still using services ([65f4fad](https://github.com/angular/angular/commit/65f4fad))
+* **service-worker:** don't crash if SW not supported ([b9a91a5](https://github.com/angular/angular/commit/b9a91a5))
+* **service-worker:** send initialization signal from the application ([3fbcde9](https://github.com/angular/angular/commit/3fbcde9))
+* **service-worker:** use relative path for ngsw.json ([f582620](https://github.com/angular/angular/commit/f582620))
+
+
+
+<a name="5.0.5"></a>
+## [5.0.5](https://github.com/angular/angular/compare/5.0.4...5.0.5) (2017-12-01)
+
+
+### Bug Fixes
+
+* **compiler-cli:** propagate ts.SourceFile moduleName into metadata ([a2ff4ab](https://github.com/angular/angular/commit/a2ff4ab))
+* **service-worker:** allow disabling SW while still using services ([f99335b](https://github.com/angular/angular/commit/f99335b))
+* **service-worker:** don't crash if SW not supported ([ee37d4b](https://github.com/angular/angular/commit/ee37d4b))
+* **service-worker:** send initialization signal from the application ([6bf07b4](https://github.com/angular/angular/commit/6bf07b4))
+* **service-worker:** use relative path for ngsw.json ([56c98f7](https://github.com/angular/angular/commit/56c98f7))
+
+
+
+<a name="5.1.0-rc.0"></a>
+# [5.1.0-rc.0](https://github.com/angular/angular/compare/5.1.0-beta.2...5.1.0-rc.0) (2017-12-01)
+
+
+### Bug Fixes
+
+* **animations:** ensure multi-level enter animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([dd6237e](https://github.com/angular/angular/commit/dd6237e))
+* **animations:** ensure multi-level enter animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([b2a586c](https://github.com/angular/angular/commit/b2a586c))
+* **animations:** ensure multi-level leave animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([1366762](https://github.com/angular/angular/commit/1366762))
+* **animations:** ensure multi-level leave animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([c2b3792](https://github.com/angular/angular/commit/c2b3792))
+* **bazel:** produce named AMD modules for codegen ([#20547](https://github.com/angular/angular/issues/20547)) ([6e83204](https://github.com/angular/angular/commit/6e83204)), closes [#19422](https://github.com/angular/angular/issues/19422)
+* **common:** accept falsy values as HTTP bodies ([#19958](https://github.com/angular/angular/issues/19958)) ([15a54df](https://github.com/angular/angular/commit/15a54df)), closes [#19825](https://github.com/angular/angular/issues/19825) [#19195](https://github.com/angular/angular/issues/19195)
+* **common:** don't strip XSSI prefix for if error isn't JSON ([#19958](https://github.com/angular/angular/issues/19958)) ([aafa75d](https://github.com/angular/angular/commit/aafa75d))
+* **common:** remove useless guard in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([eb01ad5](https://github.com/angular/angular/commit/eb01ad5)), closes [#19223](https://github.com/angular/angular/issues/19223)
+* **common:** treat an empty body as null when parsing JSON in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([503be69](https://github.com/angular/angular/commit/503be69)), closes [#18680](https://github.com/angular/angular/issues/18680) [#19413](https://github.com/angular/angular/issues/19413) [#19502](https://github.com/angular/angular/issues/19502) [#19555](https://github.com/angular/angular/issues/19555)
+* **compiler:** correctly detect when to serialze summary metadata ([#20668](https://github.com/angular/angular/issues/20668)) ([8bb42df](https://github.com/angular/angular/commit/8bb42df))
+* **compiler-cli:** fix memory leak in program creation ([#20692](https://github.com/angular/angular/issues/20692)) ([71e5de6](https://github.com/angular/angular/commit/71e5de6)), closes [#20691](https://github.com/angular/angular/issues/20691)
+* **compiler-cli:** normalize sourcepaths for i18n extracted files ([#20417](https://github.com/angular/angular/issues/20417)) ([de78307](https://github.com/angular/angular/commit/de78307)), closes [#20416](https://github.com/angular/angular/issues/20416)
+* **core:** should use native addEventListener in ngZone ([#20672](https://github.com/angular/angular/issues/20672)) ([65a2cb8](https://github.com/angular/angular/commit/65a2cb8))
+* **language-service:** Allow empty templates ([#20651](https://github.com/angular/angular/issues/20651)) ([3203069](https://github.com/angular/angular/commit/3203069)), closes [#19406](https://github.com/angular/angular/issues/19406)
+* **language-service:** Fix crash when no script files are found ([#20550](https://github.com/angular/angular/issues/20550)) ([54bfe14](https://github.com/angular/angular/commit/54bfe14)), closes [#19325](https://github.com/angular/angular/issues/19325)
+
+
+### Features
+
+* **common:** add locale id parameter to `registerLocaleData` ([#20623](https://github.com/angular/angular/issues/20623)) ([24bf3e2](https://github.com/angular/angular/commit/24bf3e2))
+* **compiler-cli:** improve error messages produced during structural errors ([#20459](https://github.com/angular/angular/issues/20459)) ([8ecda94](https://github.com/angular/angular/commit/8ecda94))
+
+
+
+<a name="5.0.4"></a>
+## [5.0.4](https://github.com/angular/angular/compare/5.0.3...5.0.4) (2017-12-01)
+
+
+### Bug Fixes
+
+* **animations:** ensure multi-level enter animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([22bbd6e](https://github.com/angular/angular/commit/22bbd6e))
+* **animations:** ensure multi-level leave animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([c7b211c](https://github.com/angular/angular/commit/c7b211c))
+* **common:** accept falsy values as HTTP bodies ([#19958](https://github.com/angular/angular/issues/19958)) ([66fd1f8](https://github.com/angular/angular/commit/66fd1f8)), closes [#19825](https://github.com/angular/angular/issues/19825) [#19195](https://github.com/angular/angular/issues/19195)
+* **common:** don't strip XSSI prefix for if error isn't JSON ([#19958](https://github.com/angular/angular/issues/19958)) ([ead7596](https://github.com/angular/angular/commit/ead7596))
+* **common:** remove useless guard in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([e099911](https://github.com/angular/angular/commit/e099911)), closes [#19223](https://github.com/angular/angular/issues/19223)
+* **common:** treat an empty body as null when parsing JSON in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([bdaee50](https://github.com/angular/angular/commit/bdaee50)), closes [#18680](https://github.com/angular/angular/issues/18680) [#19413](https://github.com/angular/angular/issues/19413) [#19502](https://github.com/angular/angular/issues/19502) [#19555](https://github.com/angular/angular/issues/19555)
+* **compiler-cli:** fix memory leak in program creation ([#20692](https://github.com/angular/angular/issues/20692)) ([38be44d](https://github.com/angular/angular/commit/38be44d)), closes [#20691](https://github.com/angular/angular/issues/20691)
+* **compiler-cli:** normalize sourcepaths for i18n extracted files ([#20417](https://github.com/angular/angular/issues/20417)) ([2b0c896](https://github.com/angular/angular/commit/2b0c896)), closes [#20416](https://github.com/angular/angular/issues/20416)
+
+
+
+<a name="5.1.0-beta.2"></a>
+# [5.1.0-beta.2](https://github.com/angular/angular/compare/5.1.0-beta.1...5.1.0-beta.2) (2017-11-22)
+
+
+### Bug Fixes
+
+* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([0e012c9](https://github.com/angular/angular/commit/0e012c9)), closes [#19100](https://github.com/angular/angular/issues/19100)
+* **animations:** always fire start and done callbacks in order for noop animations ([#20570](https://github.com/angular/angular/issues/20570)) ([ffb6dbe](https://github.com/angular/angular/commit/ffb6dbe))
+* **animations:** validate against trigger() names that use @ symbols ([#20326](https://github.com/angular/angular/issues/20326)) ([1861e41](https://github.com/angular/angular/commit/1861e41))
+* **benchpress:** Allow ignoring navigationStart events in perflog metric. ([#20312](https://github.com/angular/angular/issues/20312)) ([717ac5a](https://github.com/angular/angular/commit/717ac5a))
+* **common:** return ISubscription from Location.subscribe() ([#20429](https://github.com/angular/angular/issues/20429)) ([437a044](https://github.com/angular/angular/commit/437a044)), closes [#20406](https://github.com/angular/angular/issues/20406)
+* **compiler:** emit correct type-check-blocks with TemplateRef's ([#20463](https://github.com/angular/angular/issues/20463)) ([68b53c0](https://github.com/angular/angular/commit/68b53c0))
+* **compiler:** support event bindings in `fullTemplateTypeCheck` ([#20490](https://github.com/angular/angular/issues/20490)) ([4ed0439](https://github.com/angular/angular/commit/4ed0439))
+* **core:** fix [#20532](https://github.com/angular/angular/issues/20532), should be able to cancel listener from mixed zone ([#20538](https://github.com/angular/angular/issues/20538)) ([a740e4f](https://github.com/angular/angular/commit/a740e4f))
+* **core:** should support event.stopImmediatePropagation ([#20469](https://github.com/angular/angular/issues/20469)) ([997336b](https://github.com/angular/angular/commit/997336b))
+* **forms:** updateOn should check if change occurred ([#20358](https://github.com/angular/angular/issues/20358)) ([69c53c3](https://github.com/angular/angular/commit/69c53c3)), closes [#20259](https://github.com/angular/angular/issues/20259)
+
+
+### Features
+
+* **platform-browser-dynamic:** export `JitCompilerFactory` ([#20478](https://github.com/angular/angular/issues/20478)) ([d7a727c](https://github.com/angular/angular/commit/d7a727c)), closes [#20125](https://github.com/angular/angular/issues/20125)
+
+
+
+<a name="5.0.3"></a>
+## [5.0.3](https://github.com/angular/angular/compare/5.0.2...5.0.3) (2017-11-22)
+
+
+### Bug Fixes
+
+* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([814f062](https://github.com/angular/angular/commit/814f062)), closes [#19100](https://github.com/angular/angular/issues/19100)
+* **animations:** validate against trigger() names that use @ symbols ([#20326](https://github.com/angular/angular/issues/20326)) ([15795d0](https://github.com/angular/angular/commit/15795d0))
+* **benchpress:** Allow ignoring navigationStart events in perflog metric. ([#20312](https://github.com/angular/angular/issues/20312)) ([9ca6ee9](https://github.com/angular/angular/commit/9ca6ee9))
+* **common:** return ISubscription from Location.subscribe() ([#20429](https://github.com/angular/angular/issues/20429)) ([bc904b1](https://github.com/angular/angular/commit/bc904b1)), closes [#20406](https://github.com/angular/angular/issues/20406)
+* **compiler:** emit correct type-check-blocks with TemplateRef's ([#20463](https://github.com/angular/angular/issues/20463)) ([81f1d42](https://github.com/angular/angular/commit/81f1d42))
+* **compiler:** support event bindings in `fullTemplateTypeCheck` ([#20490](https://github.com/angular/angular/issues/20490)) ([b53ead4](https://github.com/angular/angular/commit/b53ead4))
+* **core:** fix [#20532](https://github.com/angular/angular/issues/20532), should be able to cancel listener from mixed zone ([#20538](https://github.com/angular/angular/issues/20538)) ([0feba49](https://github.com/angular/angular/commit/0feba49))
+* **core:** should support event.stopImmediatePropagation ([#20469](https://github.com/angular/angular/issues/20469)) ([82aace6](https://github.com/angular/angular/commit/82aace6))
+* **forms:** updateOn should check if change occurred ([#20358](https://github.com/angular/angular/issues/20358)) ([f9f2c20](https://github.com/angular/angular/commit/f9f2c20)), closes [#20259](https://github.com/angular/angular/issues/20259)
+
+
+<a name="5.1.0-beta.1"></a>
+# [5.1.0-beta.1](https://github.com/angular/angular/compare/5.1.0-beta.0...5.1.0-beta.1) (2017-11-16)
+
+
+### Bug Fixes
+
+* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([d47b2a6](https://github.com/angular/angular/commit/d47b2a6)), closes [#19100](https://github.com/angular/angular/issues/19100)
+* **animations:** ensure final state() styles are applied within @.disabled animations ([#20267](https://github.com/angular/angular/issues/20267)) ([20aafff](https://github.com/angular/angular/commit/20aafff)), closes [#20266](https://github.com/angular/angular/issues/20266)
+* **bazel:** adjust mock of tsconfig for ng_module rule unit test ([#20175](https://github.com/angular/angular/issues/20175)) ([c2a24b4](https://github.com/angular/angular/commit/c2a24b4))
+* **compiler:** fix corner cases in shadow CSS ([c32f5fd](https://github.com/angular/angular/commit/c32f5fd))
+* **compiler:** recognize @NgModule with a redundant @Injectable ([#20320](https://github.com/angular/angular/issues/20320)) ([c33a576](https://github.com/angular/angular/commit/c33a576))
+* **compiler:** show explanatory text in template errors ([#20313](https://github.com/angular/angular/issues/20313)) ([3257fcd](https://github.com/angular/angular/commit/3257fcd))
+* **core:** ensure init lifecycle events are called ([#20258](https://github.com/angular/angular/issues/20258)) ([24cf8b3](https://github.com/angular/angular/commit/24cf8b3))
+* **language-service:** pass compilerOptions.paths to ReflectorHost ([#20222](https://github.com/angular/angular/issues/20222)) ([eb8013e](https://github.com/angular/angular/commit/eb8013e))
+* **router:** 'merge' queryParamHandling strategy should be able to remove query params ([#19733](https://github.com/angular/angular/issues/19733)) ([a622e19](https://github.com/angular/angular/commit/a622e19)), closes [#18463](https://github.com/angular/angular/issues/18463) [#17202](https://github.com/angular/angular/issues/17202)
+* Update test code to type-check under TS 2.5 ([#20175](https://github.com/angular/angular/issues/20175)) ([5ec1717](https://github.com/angular/angular/commit/5ec1717))
+
+### Features
+
+* **typescript:** support TypeScript 2.5 ([a9f3e2b](https://github.com/angular/angular/commit/a9f3e2b)), closes [#20175](https://github.com/angular/angular/issues/20175)
+
+> Note, if you do `Injector.get(Token)` where `Token` has static members, you'll run into https://github.com/Microsoft/TypeScript/issues/20102 where the returned type is `{}` rather than `Token`. Use `Injector.get<Token>(Token)` to work around.
+
+<a name="5.0.2"></a>
+## [5.0.2](https://github.com/angular/angular/compare/5.0.1...5.0.2) (2017-11-16)
+
+
+### Bug Fixes
+
+* **animations:** ensure final state() styles are applied within @.disabled animations ([#20267](https://github.com/angular/angular/issues/20267)) ([8b1a6b1](https://github.com/angular/angular/commit/8b1a6b1)), closes [#20266](https://github.com/angular/angular/issues/20266)
+* **compiler:** fix corner cases in shadow CSS ([5d1cd57](https://github.com/angular/angular/commit/5d1cd57))
+* **compiler:** recognize @NgModule with a redundant @Injectable ([#20320](https://github.com/angular/angular/issues/20320)) ([4cc6abb](https://github.com/angular/angular/commit/4cc6abb))
+* **compiler:** show explanatory text in template errors ([#20313](https://github.com/angular/angular/issues/20313)) ([424a323](https://github.com/angular/angular/commit/424a323))
+* **router:** 'merge' queryParamHandling strategy should be able to remove query params ([#19733](https://github.com/angular/angular/issues/19733)) ([b732fb9](https://github.com/angular/angular/commit/b732fb9)), closes [#18463](https://github.com/angular/angular/issues/18463) [#17202](https://github.com/angular/angular/issues/17202)
+
+
+<a name="5.1.0-beta.0"></a>
+# [5.1.0-beta.0](https://github.com/angular/angular/compare/5.0.0-rc.4...5.1.0-beta.0) (2017-11-08)
+
+### Bug Fixes
+
+* **compiler:** don't overwrite missingTranslation's value in JIT ([#19952](https://github.com/angular/angular/issues/19952)) ([799cbb9](https://github.com/angular/angular/commit/799cbb9))
+* **compiler:** report a reasonable error with invalid metadata ([#20062](https://github.com/angular/angular/issues/20062)) ([da22c48](https://github.com/angular/angular/commit/da22c48))
+* **compiler-cli:** don't report emit diagnostics when `--noEmitOnError` is off ([#20063](https://github.com/angular/angular/issues/20063)) ([8639995](https://github.com/angular/angular/commit/8639995))
+* **core:** `__symbol__` should return `__zone_symbol__` without zone.js loaded ([#19541](https://github.com/angular/angular/issues/19541)) ([678d1cf](https://github.com/angular/angular/commit/678d1cf))
+* **core:** should support event.stopImmediatePropagation ([#19222](https://github.com/angular/angular/issues/19222)) ([7083791](https://github.com/angular/angular/commit/7083791))
+* **platform-browser:** support Symbols in custom `jasmineToString()` method ([#19794](https://github.com/angular/angular/issues/19794)) ([5a6efa7](https://github.com/angular/angular/commit/5a6efa7))
+
+### Features
+
+* **compiler:** introduce `TestBed.overrideTemplateUsingTestingModule` ([a460066](https://github.com/angular/angular/commit/a460066)), closes [#19815](https://github.com/angular/angular/issues/19815)
+
+
+<a name="5.0.1"></a>
+## [5.0.1](https://github.com/angular/angular/compare/5.0.0...5.0.1) (2017-11-08)
+
+
+### Bug Fixes
+
+* **compiler:** don't overwrite missingTranslation's value in JIT ([#19952](https://github.com/angular/angular/issues/19952)) ([799cbb9](https://github.com/angular/angular/commit/799cbb9))
+* **compiler:** report a reasonable error with invalid metadata ([#20062](https://github.com/angular/angular/issues/20062)) ([da22c48](https://github.com/angular/angular/commit/da22c48))
+* **compiler-cli:** don't report emit diagnostics when `--noEmitOnError` is off ([#20063](https://github.com/angular/angular/issues/20063)) ([8639995](https://github.com/angular/angular/commit/8639995))
+* **core:** `__symbol__` should return `__zone_symbol__` without zone.js loaded ([#19541](https://github.com/angular/angular/issues/19541)) ([678d1cf](https://github.com/angular/angular/commit/678d1cf))
+* **core:** should support event.stopImmediatePropagation ([#19222](https://github.com/angular/angular/issues/19222)) ([7083791](https://github.com/angular/angular/commit/7083791))
+* **platform-browser:** support Symbols in custom `jasmineToString()` method ([#19794](https://github.com/angular/angular/issues/19794)) ([5a6efa7](https://github.com/angular/angular/commit/5a6efa7))
+
+
+<a name="5.0.0"></a>
+# [5.0.0](https://github.com/angular/angular/compare/5.0.0-rc.9...5.0.0) pentagonal-donut (2017-11-01)
+
+### Features
+
+* **animations:** allow @.disabled property to work without an expression ([#18713](https://github.com/angular/angular/issues/18713)) ([2159342](https://github.com/angular/angular/commit/2159342))
+* **animations:** report errors when invalid CSS properties are detected ([#18718](https://github.com/angular/angular/issues/18718)) ([409688f](https://github.com/angular/angular/commit/409688f)), closes [#18701](https://github.com/angular/angular/issues/18701)
+* **animations:** support :increment and :decrement transition aliases ([6f45519](https://github.com/angular/angular/commit/6f45519))
+* **animations:** support negative query limit values ([86ffacf](https://github.com/angular/angular/commit/86ffacf)), closes [#19259](https://github.com/angular/angular/issues/19259)
+* **common:** accept object map for HttpClient headers & params ([#18490](https://github.com/angular/angular/issues/18490)) ([1b1d5f1](https://github.com/angular/angular/commit/1b1d5f1))
+* **common:** drop use of the Intl API to improve browser support ([#18284](https://github.com/angular/angular/issues/18284)) ([079d884](https://github.com/angular/angular/commit/079d884)), closes [#10809](https://github.com/angular/angular/issues/10809) [#9524](https://github.com/angular/angular/issues/9524) [#7008](https://github.com/angular/angular/issues/7008) [#9324](https://github.com/angular/angular/issues/9324) [#7590](https://github.com/angular/angular/issues/7590) [#6724](https://github.com/angular/angular/issues/6724) [#3429](https://github.com/angular/angular/issues/3429) [#17576](https://github.com/angular/angular/issues/17576) [#17478](https://github.com/angular/angular/issues/17478) [#17319](https://github.com/angular/angular/issues/17319) [#17200](https://github.com/angular/angular/issues/17200) [#16838](https://github.com/angular/angular/issues/16838) [#16624](https://github.com/angular/angular/issues/16624) [#16625](https://github.com/angular/angular/issues/16625) [#16591](https://github.com/angular/angular/issues/16591) [#14131](https://github.com/angular/angular/issues/14131) [#12632](https://github.com/angular/angular/issues/12632) [#11376](https://github.com/angular/angular/issues/11376) [#11187](https://github.com/angular/angular/issues/11187)
+* **common:** generate `closure-locale.ts` to tree shake locale data ([#18907](https://github.com/angular/angular/issues/18907)) ([4878936](https://github.com/angular/angular/commit/4878936))
+* **common:** mark NgTemplateOutlet API as stable ([0a73e8d](https://github.com/angular/angular/commit/0a73e8d))
+* **compiler-cli:** add watch mode to `ngc` ([#18818](https://github.com/angular/angular/issues/18818)) ([06d01b2](https://github.com/angular/angular/commit/06d01b2))
+* **compiler-cli:** lower metadata `useValue` and `data` literal fields ([#18905](https://github.com/angular/angular/issues/18905)) ([0e64261](https://github.com/angular/angular/commit/0e64261))
+* **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)
+* **compiler:** allow multiple exportAs names ([#18723](https://github.com/angular/angular/issues/18723)) ([7ec28fe](https://github.com/angular/angular/commit/7ec28fe))
+* **compiler:** enabled strict checking of parameters to an `@Injectable` ([#19412](https://github.com/angular/angular/issues/19412)) ([dfb8d21](https://github.com/angular/angular/commit/dfb8d21))
+* **compiler:** make `.ngsummary.json` files portable ([2572bf5](https://github.com/angular/angular/commit/2572bf5))
+* **compiler:** reuse the TypeScript typecheck for template typechecking. ([#19152](https://github.com/angular/angular/issues/19152)) ([996c7c2](https://github.com/angular/angular/commit/996c7c2))
+* **compiler:** set `enableLegacyTemplate` to false by default ([#18756](https://github.com/angular/angular/issues/18756)) ([56238fe](https://github.com/angular/angular/commit/56238fe))
+* **compiler:** use typescript for resolving resource paths ([43226cb](https://github.com/angular/angular/commit/43226cb))
+* **core:** Create StaticInjector which does not depend on Reflect polyfill. ([d9d00bd](https://github.com/angular/angular/commit/d9d00bd))
+* **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
+* **core:** support for bootstrap with custom zone ([#17672](https://github.com/angular/angular/issues/17672)) ([344a5ca](https://github.com/angular/angular/commit/344a5ca))
+* **forms:** add default updateOn values for groups and arrays ([#18536](https://github.com/angular/angular/issues/18536)) ([ff5c58b](https://github.com/angular/angular/commit/ff5c58b))
+* **forms:** add options arg to abstract controls ([ebef5e6](https://github.com/angular/angular/commit/ebef5e6))
+* **forms:** add status to `AbstractControlDirective` ([233ef93](https://github.com/angular/angular/commit/233ef93))
+* **forms:** add updateOn and ngFormOptions to NgForm ([0d45828](https://github.com/angular/angular/commit/0d45828))
+* **forms:** add updateOn blur option to FormControls ([#18408](https://github.com/angular/angular/issues/18408)) ([333a708](https://github.com/angular/angular/commit/333a708)), closes [#7113](https://github.com/angular/angular/issues/7113)
+* **forms:** add updateOn submit option to FormControls ([#18514](https://github.com/angular/angular/issues/18514)) ([f69561b](https://github.com/angular/angular/commit/f69561b))
+* **forms:** add updateOn support to ngModelOptions ([1cfa79c](https://github.com/angular/angular/commit/1cfa79c))
+* **platform-server:** add an API to transfer state from server ([#19134](https://github.com/angular/angular/issues/19134)) ([cfd9ca0](https://github.com/angular/angular/commit/cfd9ca0))
+* **platform-server:** provide a DOM implementation on the server ([2f2d5f3](https://github.com/angular/angular/commit/2f2d5f3)), closes [#14638](https://github.com/angular/angular/issues/14638)
+* **platform-server:** provide a way to hook into renderModule* ([#19023](https://github.com/angular/angular/issues/19023)) ([8dfc3c3](https://github.com/angular/angular/commit/8dfc3c3))
+* **router:** add ActivationStart/End events ([8f79150](https://github.com/angular/angular/commit/8f79150))
+* **router:** add events tracking activation of individual routes ([49cd851](https://github.com/angular/angular/commit/49cd851))
+* **service-worker:** introduce the [@angular](https://github.com/angular)/service-worker package ([#19274](https://github.com/angular/angular/issues/19274)) ([d442b68](https://github.com/angular/angular/commit/d442b68))
+* **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))
+* update angular to support TypeScript 2.4 ([ca5aeba](https://github.com/angular/angular/commit/ca5aeba))
+
+
+### Performance Improvements
+
+* **animations:** reduce size of bundle by removing AST classes ([#19539](https://github.com/angular/angular/issues/19539)) ([d5c9c5f](https://github.com/angular/angular/commit/d5c9c5f))
+* **compiler:** don’t emit summaries for jit by default ([b086891](https://github.com/angular/angular/commit/b086891))
+* **compiler:** fix perf issue in loading aot summaries in jit compiler ([fbc9537](https://github.com/angular/angular/commit/fbc9537))
+* **compiler:** make the creation of `ts.Program` faster. ([#19275](https://github.com/angular/angular/issues/19275)) ([edd5f5a](https://github.com/angular/angular/commit/edd5f5a))
+* **compiler:** only emit changed files for incremental compilation ([745b59f](https://github.com/angular/angular/commit/745b59f))
+* **compiler:** only type check input files when using bazel ([#19581](https://github.com/angular/angular/issues/19581)) ([0b06ea1](https://github.com/angular/angular/commit/0b06ea1))
+* **compiler:** only use tsickle if needed ([#19275](https://github.com/angular/angular/issues/19275)) ([8f95b75](https://github.com/angular/angular/commit/8f95b75))
+* **compiler:** skip type check and emit in bazel in some cases. ([#19646](https://github.com/angular/angular/issues/19646)) ([a22121d](https://github.com/angular/angular/commit/a22121d))
+* **compiler:** speed up loading of summaries for bazel. ([#19581](https://github.com/angular/angular/issues/19581)) ([81167d9](https://github.com/angular/angular/commit/81167d9))
+* **compiler:** speed up watch mode ([#19275](https://github.com/angular/angular/issues/19275)) ([6665d76](https://github.com/angular/angular/commit/6665d76))
+* **core:** Remove decorator DSL which depends on Reflect ([cac130e](https://github.com/angular/angular/commit/cac130e))
+* **core:** add option to remove blank text nodes from compiled templates ([d2c0d98](https://github.com/angular/angular/commit/d2c0d98))
+* **core:** use native addEventListener for faster rendering. ([#18107](https://github.com/angular/angular/issues/18107)) ([6279e50](https://github.com/angular/angular/commit/6279e50))
+* **core** switch angular to use StaticInjector instead of ReflectiveInjector ([fcadbf4](https://github.com/angular/angular/commit/fcadbf4)), closes [#18496](https://github.com/angular/angular/issues/18496)
+* 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))
+
+
+### BREAKING CHANGES
+
+* **compiler**: Angular now requires TypeScript 2.4.x.
+* **compiler**: split compiler and core. `@angular/platform-server` now additionally depends on `@angular/platform-browser-dynamic` as a peer dependency. ([#18683](https://github.com/angular/angular/issues/18683)) ([0cc77b4](https://github.com/angular/angular/commit/0cc77b4))
+* `platformXXXX()` no longer accepts providers which depend on reflection. Specifically the method signature went from `Provider[]` to `StaticProvider[]`.
+
+Example:
+Before:
+```
+[
+  MyClass,
+  {provide: ClassA, useClass: SubClassA}
+]
+
+```
+
+After:
+```
+[
+  {provide: MyClass, deps: [Dep1,...]},
+  {provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
+]
+```
+
+NOTE: This only applies to platform creation and providers for the JIT
+compiler. It does not apply to `@Component` or `@NgModule` provides
+declarations.
+
+Benchpress note: Previously Benchpress also supported reflective
+provides, which now require static providers.
+
+
+#### I18n Changes (@angular/common)
+Because of multiple bugs and browser inconsistencies, we have dropped the intl api in favor of data exported from the Unicode Common Locale Data Repository (CLDR). Unfortunately we had to change the i18n pipes (date, number, currency, percent) and there are some breaking changes.
+
+  ##### I18n pipes:
+  - Breaking change:
+    - By default Angular now only contains locale data for the language `en-US`, if you set the value of `LOCALE_ID` to another locale, you will have to import new locale data for this language because we don't use the intl API anymore.
+  - Features:
+    - you don't need to use the intl polyfill for Angular anymore.
+    - all i18n pipes now have an additional last parameter `locale` which allows you to use a specific locale instead of the one defined in the token `LOCALE_ID` (whose default value is `en-US`).
+    - the new locale data extracted from CLDR are now available to developers as well and can be used through an API (which should be especially useful for library authors).
+    - you can still use the old pipes for now, but their names have been changed and they are no longer included in the `CommonModule`. To use them, you will have to import the `DeprecatedI18NPipesModule` after the `CommonModule` (the order is important):
+
+    ```ts
+    import { NgModule } from '@angular/core';
+    import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';
+
+    @NgModule({
+      imports: [
+        CommonModule,
+        // import deprecated module after
+        DeprecatedI18NPipesModule
+      ]
+    })
+    export class AppModule { }
+    ```
+
+    Don't forget that you will still need to import the intl API polyfill if you want to use those deprecated pipes.
+
+  ##### Date pipe
+  - Breaking changes:
+    - the predefined formats (`short`, `shortTime`, `shortDate`, `medium`, ...) now use the patterns given by CLDR (like it was in AngularJS) instead of the ones from the intl API. You might notice some changes, e.g. `shortDate` will be `8/15/17` instead of `8/15/2017` for `en-US`.
+    - the narrow version of eras is now `GGGGG` instead of `G`, the format `G` is now similar to `GG` and `GGG`.
+    - the narrow version of months is now `MMMMM` instead of `L`, the format `L` is now the short standalone version of months.
+    - the narrow version of the week day is now `EEEEE` instead of `E`, the format `E` is now similar to `EE` and `EEE`.
+    - the timezone `z` will now fallback to `O` and output `GMT+1` instead of the complete zone name (e.g. `Pacific Standard Time`), this is because the quantity of data required to have all the zone names in all of the existing locales is too big.
+    - the timezone `Z` will now output the ISO8601 basic format, e.g. `+0100`, you should now use `ZZZZ` to get `GMT+01:00`.
+
+    | Field type | Format        | Example value         | v4 | v5            |
+    |------------|---------------|-----------------------|----|---------------|
+    | Eras       | Narrow        | A for AD              | G  | GGGGG         |
+    | Months     | Narrow        | S for September       | L  | MMMMM         |
+    | Week day   | Narrow        | M for Monday          | E  | EEEEE         |
+    | Timezone   | Long location | Pacific Standard Time | z  | Not available |
+    | Timezone   | Long GMT      | GMT+01:00             | Z  | ZZZZ          |
+
+  - Features
+    - new predefined formats `long`, `full`, `longTime`, `fullTime`.
+    - the format `yyy` is now supported, e.g. the year `52` will be `052` and the year `2017` will be `2017`.
+    - standalone months are now supported with the formats `L` to `LLLLL`.
+    - week of the year is now supported with the formats `w` and `ww`, e.g. weeks `5` and `05`.
+    - week of the month is now supported with the format `W`, e.g. week `3`.
+    - fractional seconds are now supported with the format `S` to `SSS`.
+    - day periods for AM/PM now supports additional formats `aa`, `aaa`, `aaaa` and `aaaaa`. The formats `a` to `aaa` are similar, while `aaaa` is the wide version if available (e.g. `ante meridiem` for `am`), or equivalent to `a` otherwise, and `aaaaa` is the narrow version (e.g. `a` for `am`).
+    - extra day periods are now supported with the formats `b` to `bbbbb` (and `B` to `BBBBB` for the standalone equivalents), e.g. `morning`, `noon`, `afternoon`, ....
+    - the short non-localized timezones are now available with the format `O` to `OOOO`. The formats `O` to `OOO` will output `GMT+1` while the format `OOOO` will be `GMT+01:00`.
+    - the ISO8601 basic time zones are now available with the formats `Z` to `ZZZZZ`. The formats `Z` to `ZZZ` will output `+0100`, while the format `ZZZZ` will be `GMT+01:00` and `ZZZZZ` will be `+01:00`.
+
+  - Bug fixes
+    - the date pipe will now work exactly the same across all browsers, which will fix a lot of bugs for safari and IE.
+    - eras can now be used on their own without the date, e.g. the format `GG` will be `AD` instead of `8 15, 2017 AD`.
+
+  ##### Currency pipe
+  - Breaking change:
+    - the default value for `symbolDisplay` is now `symbol` instead of `code`. This means that by default you will see `$4.99` for `en-US` instead of `USD4.99` previously.
+
+  * Deprecation:
+    - the second parameter of the currency pipe (`symbolDisplay`) is no longer a boolean, it now takes the values `code`, `symbol` or `symbol-narrow`. A boolean value is still valid for now, but it is deprecated and it will print a warning message in the console.
+
+  - Features:
+    - you can now choose between `code`, `symbol` or `symbol-narrow` which gives you access to more options for some currencies (e.g. the canadian dollar with the code `CAD` has the symbol `CA$` and the symbol-narrow `$`).
+
+  ##### Percent pipe
+  - Breaking change
+    - if you don't specify the number of digits to round to, the local format will be used (and it usually rounds numbers to 0 digits, instead of not rounding previously), e.g. `{{ 3.141592 | percent }}` will output `314%` for the locale `en-US` instead of `314.1592%` previously.
+
+
+### Deprecated code
+* **compiler**: The method `ngGetContentSelectors()` has been removed as it was deprecated since v4. Use `ComponentFactory.ngContentSelectors` instead.
+* **compiler**: the compiler option `enableLegacyTemplate` is now disabled by default as the `<template>` element was deprecated since v4. Use `<ng-template>` instead. The option `enableLegacyTemplate` and the `<template>` element will both be removed in Angular v6.
+* **compiler**: the option `useDebug` for the compiler has been removed as it had no effect and was deprecated since v4. ([#18778](https://github.com/angular/angular/issues/18778)) ([499d05d](https://github.com/angular/angular/commit/499d05d))
+* **compiler**: deprecate i18n comments in favor of `ng-container` ([#18998](https://github.com/angular/angular/issues/18998)) ([66a5dab](https://github.com/angular/angular/commit/66a5dab))
+* **common**: `NgFor` has been removed as it was deprecated since v4. Use `NgForOf` instead. This does not impact the use of `*ngFor` in your templates. ([#18758](https://github.com/angular/angular/issues/18758)) ([ec56760](https://github.com/angular/angular/commit/ec56760))
+* **common**: `NgTemplateOutlet#ngOutletContext` has been removed as it was deprecated since v4. Use `NgTemplateOutlet#ngTemplateOutletContext` instead. ([#18780](https://github.com/angular/angular/issues/18780)) ([7522987](https://github.com/angular/angular/commit/7522987))
+* **core**: `ErrorHandler` no longer takes a parameter as it was not used and deprecated since v4. ([#18759](https://github.com/angular/angular/issues/18759)) ([8f41326](https://github.com/angular/angular/commit/8f41326))
+* **core**: `ReflectiveInjector` is now deprecated. Use `Injector.create` as a replacement.
+* **core**: `Testability#findBindings` has been removed as it was deprecated since v4. Use `Testability#findProviders` instead. ([#18782](https://github.com/angular/angular/issues/18782)) ([f2a2a6b](https://github.com/angular/angular/commit/f2a2a6b))
+* **core**: `DebugNode#source` has been removed as it was deprecated since v4. ([#18779](https://github.com/angular/angular/issues/18779)) ([d61b902](https://github.com/angular/angular/commit/d61b902))
+* **core**: `OpaqueToken` has been removed as it was deprecated since v4. Use `InjectionToken` instead. ([#18971](https://github.com/angular/angular/issues/18971)) ([3c4eef8](https://github.com/angular/angular/commit/3c4eef8))
+* **core**: `DifferFactory.create` no longer takes ChangeDetectionRef as a first argument as it was not used and deprecated since v4. ([#18757](https://github.com/angular/angular/issues/18757)) ([be9713c](https://github.com/angular/angular/commit/be9713c))
+* **core**: `TrackByFn` has been removed because it was deprecated since v4. Use `TrackByFunction` instead. ([#18757](https://github.com/angular/angular/issues/18757)) ([596e9f4](https://github.com/angular/angular/commit/596e9f4))
+* **http**: deprecate @angular/http in favor of @angular/common/http ([#18906](https://github.com/angular/angular/issues/18906)) ([72c7b6e](https://github.com/angular/angular/commit/72c7b6e))
+* **router**: `RouterOutlet` properties `locationInjector` and `locationFactoryResolver` have been removed as they were deprecated since v4. ([#18781](https://github.com/angular/angular/issues/18781)) ([d1c4a94](https://github.com/angular/angular/commit/d1c4a94), [a9ef858](https://github.com/angular/angular/commit/a9ef858))
+* **router**: the values `true`, `false`, `legacy_enabled` and `legacy_disabled` for the router parameter `initialNavigation` have been removed as they were deprecated. Use `enabled` or `disabled` instead. ([#18781](https://github.com/angular/angular/issues/18781)) ([d76761b](https://github.com/angular/angular/commit/d76761b))
+* **platform-browser**: `NgProbeToken` has been removed from `@angular/platform-browser` as it was deprecated since v4. Import it from `@angular/core` instead. ([#18760](https://github.com/angular/angular/issues/18760)) ([d7f42bf](https://github.com/angular/angular/commit/d7f42bf))
+* **platform-webworker**: `PRIMITIVE` has been removed as it was deprecated since v4. Use `SerializerTypes.PRIMITIVE` instead. ([#18761](https://github.com/angular/angular/issues/18761)) ([a56468c](https://github.com/angular/angular/commit/a56468c))
+
+
+
+<a name="4.4.6"></a>
+## [4.4.6](https://github.com/angular/angular/compare/4.4.5...4.4.6) (2017-10-18)
+
+
+### Bug Fixes
+
+* **animations:** properly support boolean-based transitions and state changes ([#19672](https://github.com/angular/angular/issues/19672)) ([f983a6c](https://github.com/angular/angular/commit/f983a6c)), closes [#9396](https://github.com/angular/angular/issues/9396) [#12337](https://github.com/angular/angular/issues/12337)
+* **common:** attempt to JSON.parse errors for JSON responses ([#19773](https://github.com/angular/angular/issues/19773)) ([269f5ac](https://github.com/angular/angular/commit/269f5ac))
+* **router:** RouterLinkActive should update its state right after checking the children ([53a807a](https://github.com/angular/angular/commit/53a807a)), closes [#18983](https://github.com/angular/angular/issues/18983)
+
+
+### Performance Improvements
+
+* **animations:** reduce size of bundle by removing AST classes ([#19673](https://github.com/angular/angular/issues/19673)) ([76d2496](https://github.com/angular/angular/commit/76d2496))
+
+
+
+<a name="4.4.5"></a>
+## [4.4.5](https://github.com/angular/angular/compare/4.4.4...4.4.5) (2017-10-12)
+
+
+### Bug Fixes
+
+* **compiler:** `TestBed.overrideProvider` should keep imported `NgModule`s eager ([#19624](https://github.com/angular/angular/issues/19624)) ([734378c](https://github.com/angular/angular/commit/734378c))
+* **compiler:** correctly instantiate eager providers that are used via `Injector.get` ([#19558](https://github.com/angular/angular/issues/19558)) ([e292548](https://github.com/angular/angular/commit/e292548)), closes [#15501](https://github.com/angular/angular/issues/15501)
+* **compiler:** disallow references for select and index evaluation ([95f3b1d](https://github.com/angular/angular/commit/95f3b1d))
+* **core:** make dynamic & inline code checking behave the same ([#19189](https://github.com/angular/angular/issues/19189)) ([6c66031](https://github.com/angular/angular/commit/6c66031))
+* **platform-browser:** support customEqualityTesters when overriding Jasmine toEqual ([cc8ae32](https://github.com/angular/angular/commit/cc8ae32))
+* **tsc-wrapped:** don't rewrite imports when annotating for closure ([#19579](https://github.com/angular/angular/issues/19579)) ([c9f8718](https://github.com/angular/angular/commit/c9f8718))
+
+
+<a name="4.4.4"></a>
+## [4.4.4](https://github.com/angular/angular/compare/4.4.3...4.4.4) (2017-09-28)
+
+
+### Bug Fixes
+
+* **animations:** support negative query limit value ([#19419](https://github.com/angular/angular/issues/19419)) ([bc81fbd](https://github.com/angular/angular/commit/bc81fbd)), closes [#19232](https://github.com/angular/angular/issues/19232)
+* **compiler:** correctly map error message locations ([#19424](https://github.com/angular/angular/issues/19424)) ([c3b39ba](https://github.com/angular/angular/commit/c3b39ba))
+* **compiler:** do not consider a reference with members as a reference ([#19466](https://github.com/angular/angular/issues/19466)) ([7fc2dce](https://github.com/angular/angular/commit/7fc2dce))
+* **compiler:** skip &nbsp; when trimming / removing whitespaces ([#19310](https://github.com/angular/angular/issues/19310)) ([c7aa8a1](https://github.com/angular/angular/commit/c7aa8a1)), closes [#19304](https://github.com/angular/angular/issues/19304)
+* **tsc-wrapped:** add metadata for `type` declarations ([#19040](https://github.com/angular/angular/issues/19040)) ([ae52851](https://github.com/angular/angular/commit/ae52851))
+
+
+<a name="4.4.3"></a>
+## [4.4.3](https://github.com/angular/angular/compare/4.4.2...4.4.3) (2017-09-19)
+
+
+### Bug Fixes
+
+* **tsc-wrapped:** deduplicate metadata only when the module is the same ([#19261](https://github.com/angular/angular/issues/19261)) ([0371538](https://github.com/angular/angular/commit/0371538)), closes [#19219](https://github.com/angular/angular/issues/19219)
+
+
+<a name="4.4.2"></a>
+## [4.4.2](https://github.com/angular/angular/compare/4.4.1...4.4.2) (2017-09-18)
+
+
+### Bug Fixes
+
+* **platform-server**: fix for packaging issues [#19250](https://github.com/angular/angular/issues/19250)
+
+
+<a name="4.4.1"></a>
+## [4.4.1](https://github.com/angular/angular/compare/4.3.6...4.4.1) (2017-09-15)
+
+
+### Bug Fixes
+
+* **animations:** do not leak DOM nodes/styling for host triggered animations ([#18853](https://github.com/angular/angular/issues/18853)) ([1cc3fe2](https://github.com/angular/angular/commit/1cc3fe2)), closes [#18606](https://github.com/angular/angular/issues/18606)
+* **common:** fix improper packaging for [@angular](https://github.com/angular)/common/http ([#18613](https://github.com/angular/angular/issues/18613)) ([a203a95](https://github.com/angular/angular/commit/a203a95))
+* **common:** fix XSSI prefix stripping by using JSON.parse always ([#18466](https://github.com/angular/angular/issues/18466)) ([8821723](https://github.com/angular/angular/commit/8821723)), closes [#18396](https://github.com/angular/angular/issues/18396) [#18453](https://github.com/angular/angular/issues/18453)
+* **compiler:** normalize the locale name ([#18963](https://github.com/angular/angular/issues/18963)) ([497e017](https://github.com/angular/angular/commit/497e017))
+* **core:** complete EventEmitter in QueryList on component destroy ([#18902](https://github.com/angular/angular/issues/18902)) ([7d137d7](https://github.com/angular/angular/commit/7d137d7)), closes [#18741](https://github.com/angular/angular/issues/18741)
+* **tsc-wrapped:** deduplicate metadata for re-exported modules ([48ae1a6](https://github.com/angular/angular/commit/48ae1a6))
+* **tsc-wrapped:** fix metadata symbol reference ([f6a7183](https://github.com/angular/angular/commit/f6a7183))
+* **upgrade:** remove code setting id attribute. ([#19182](https://github.com/angular/angular/issues/19182)) ([b20c5d2](https://github.com/angular/angular/commit/b20c5d2)), closes [#18446](https://github.com/angular/angular/issues/18446)
+
+
+### Features
+
+* **compiler:** allow multiple exportAs names ([#18723](https://github.com/angular/angular/issues/18723)) ([7ec28fe](https://github.com/angular/angular/commit/7ec28fe))
+* **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
+
+
+Note: the 4.4.0 release on npm accidentally glitched-out midway, so we cut 4.4.1 instead. oops :-)
+
+
+
+<a name="4.3.6"></a>
+## [4.3.6](https://github.com/angular/angular/compare/4.3.5...4.3.6) (2017-08-23)
+
+
+### Bug Fixes
+
+* **animations:** ensure animations are disabled on the element containing the @.disabled flag ([#18714](https://github.com/angular/angular/issues/18714)) ([5d68c83](https://github.com/angular/angular/commit/5d68c83))
+* **animations:** make sure @.disabled respects disabled parent/sub animation sequences ([#18715](https://github.com/angular/angular/issues/18715)) ([c3dcbf9](https://github.com/angular/angular/commit/c3dcbf9))
+* **animations:** make sure animation cancellations respect AUTO style values ([#18787](https://github.com/angular/angular/issues/18787)) ([9a754f9](https://github.com/angular/angular/commit/9a754f9)), closes [#17450](https://github.com/angular/angular/issues/17450)
+* **animations:** resolve error when using AnimationBuilder with platform-server ([#18642](https://github.com/angular/angular/issues/18642)) ([f9b2905](https://github.com/angular/angular/commit/f9b2905)), closes [#18635](https://github.com/angular/angular/issues/18635)
+* **animations:** restore auto-style support for removed DOM nodes ([#18787](https://github.com/angular/angular/issues/18787)) ([e1f45a3](https://github.com/angular/angular/commit/e1f45a3))
+* **core:** correct order in ContentChildren query result ([#18326](https://github.com/angular/angular/issues/18326)) ([fec3b1a](https://github.com/angular/angular/commit/fec3b1a)), closes [#16568](https://github.com/angular/angular/issues/16568)
+* **core:** make sure onStable runs in the right zone ([#18706](https://github.com/angular/angular/issues/18706)) ([ee5591d](https://github.com/angular/angular/commit/ee5591d))
+
+
+### Features
+
+* **animations:** allow @.disabled property to work without an expression ([#18713](https://github.com/angular/angular/issues/18713)) ([ac58914](https://github.com/angular/angular/commit/ac58914))
+* **common:** add an empty DeprecatedI18NPipesModule module ([793f31b](https://github.com/angular/angular/commit/793f31b))
+
+
+
+<a name="4.3.5"></a>
+## [4.3.5](https://github.com/angular/angular/compare/4.3.4...4.3.5) (2017-08-16)
+
+
+### Bug Fixes
+
+* **core:** forbid destroyed views to be inserted or moved in VC ([972538b](https://github.com/angular/angular/commit/972538b)), closes [#18615](https://github.com/angular/angular/issues/18615)
+* **forms:** re-assigning options should not clear select ([a1624f2](https://github.com/angular/angular/commit/a1624f2)), closes [#18330](https://github.com/angular/angular/issues/18330)
+
+
+<a name="4.3.4"></a>
+## [4.3.4](https://github.com/angular/angular/compare/4.3.3...4.3.4) (2017-08-10)
+
+### Bug Fixes
+
+* **animations:** revert container/queried animations accordingly during cancel ([#18516](https://github.com/angular/angular/issues/18516)) ([5a165eb](https://github.com/angular/angular/commit/5a165eb))
+* **animations:** support persisting dynamic styles within animation states ([#18468](https://github.com/angular/angular/issues/18468)) ([e0660b1](https://github.com/angular/angular/commit/e0660b1)), closes [#18423](https://github.com/angular/angular/issues/18423) [#17505](https://github.com/angular/angular/issues/17505)
+* **benchpress:** compile cleanly with TS 2.4 ([#18455](https://github.com/angular/angular/issues/18455)) ([5afc7ab](https://github.com/angular/angular/commit/5afc7ab))
+* **compiler:** cleanly compile with TypeScript 2.4 ([#18456](https://github.com/angular/angular/issues/18456)) ([5e4054b](https://github.com/angular/angular/commit/5e4054b))
+* **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([e7e7622](https://github.com/angular/angular/commit/e7e7622)), closes [#18038](https://github.com/angular/angular/issues/18038)
+
+
+<a name="4.3.3"></a>
+## [4.3.3](https://github.com/angular/angular/compare/4.3.2...4.3.3) (2017-08-02)
+
+### Bug Fixes
+
+* **compiler:** fix for element needing implicit parent placed in top-level ng-container ([f5cbc2e](https://github.com/angular/angular/commit/f5cbc2e)), closes [#18314](https://github.com/angular/angular/issues/18314)
+
+
+<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="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)
+
+
+### Bug Fixes
+
+* **compiler:** fix inheritance for AOT with summaries ([#15583](https://github.com/angular/angular/issues/15583)) ([1864ccb](https://github.com/angular/angular/commit/1864ccb))
+* **language-service:** avoid throwing exceptions when reporting metadata errors ([0861fda](https://github.com/angular/angular/commit/0861fda))
+* **language-service:** detect when there isn't a tsconfig.json ([168a2eb](https://github.com/angular/angular/commit/168a2eb)), closes [#15874](https://github.com/angular/angular/issues/15874)
+* **language-service:** improve resilience to incomplete information ([e4277a0](https://github.com/angular/angular/commit/e4277a0))
+* **language-service:** initialize static reflector correctly ([5b99533](https://github.com/angular/angular/commit/5b99533)), closes [#15768](https://github.com/angular/angular/issues/15768)
+* **language-service:** parse extended i18n forms ([c9c7acd](https://github.com/angular/angular/commit/c9c7acd))
+* **language-service:** resolve any parameter types to any result ([feae7b6](https://github.com/angular/angular/commit/feae7b6))
+* **router:** fix query param parsing ([2f41b52](https://github.com/angular/angular/commit/2f41b52))
+* **router:** the preloader use the module from the loaded config ([978f809](https://github.com/angular/angular/commit/978f809))
+* **tsc-wrapped:** ensure valid path separators in metadata ([c10e50c](https://github.com/angular/angular/commit/c10e50c))
+
+
+
+<a name="4.1.0-beta.0"></a>
+# [4.1.0-beta.0](https://github.com/angular/angular/compare/4.0.0...4.1.0-beta.0) (2017-03-29)
+
+### Features
+
+* **compiler:** support ICU messages in XLIFF ([b8d5f87](https://github.com/angular/angular/commit/b8d5f87)), closes [#12636](https://github.com/angular/angular/issues/12636) [#15068](https://github.com/angular/angular/issues/15068)
+
+Note: 4.1.0-beta.0 release also contains all the changes present in the 4.0.1 release.
+
+
+<a name="4.0.1"></a>
+## [4.0.1](https://github.com/angular/angular/compare/4.0.0...4.0.1) (2017-03-29)
+
+
+### Bug Fixes
+
+* **animations:** make sure style calculations are not computed too early ([#15540](https://github.com/angular/angular/issues/15540)) ([c828511](https://github.com/angular/angular/commit/c828511)), closes [#15507](https://github.com/angular/angular/issues/15507)
+* **compiler:** allow single quotes into named interpolations ([#15461](https://github.com/angular/angular/issues/15461)) ([a654875](https://github.com/angular/angular/commit/a654875)), closes [#15318](https://github.com/angular/angular/issues/15318)
+* **compiler:** ignore errors when evaluating base classes ([#15560](https://github.com/angular/angular/issues/15560)) ([a88413f](https://github.com/angular/angular/commit/a88413f)), closes [#15536](https://github.com/angular/angular/issues/15536)
+* **compiler:** throw when a component defines both template and templateUrl ([#15572](https://github.com/angular/angular/issues/15572)) ([902bb2f](https://github.com/angular/angular/commit/902bb2f)), closes [#15566](https://github.com/angular/angular/issues/15566)
+* **core:** check for undefined on normalizeDebugBindingValue ([#15503](https://github.com/angular/angular/issues/15503)) ([b8c0a97](https://github.com/angular/angular/commit/b8c0a97)), closes [#15494](https://github.com/angular/angular/issues/15494)
+* **core:** fix inheritance in JIT mode for TS 2.1 ([#15599](https://github.com/angular/angular/issues/15599)) ([ca66530](https://github.com/angular/angular/commit/ca66530)), closes [#15502](https://github.com/angular/angular/issues/15502)
+* **core:** fix the key/value differ ([#15539](https://github.com/angular/angular/issues/15539)) ([e72124c](https://github.com/angular/angular/commit/e72124c)), closes [#15457](https://github.com/angular/angular/issues/15457)
+* **core:** improve error msg for invalid KeyValueDiffer.diff arg ([#15489](https://github.com/angular/angular/issues/15489)) ([d74e4d0](https://github.com/angular/angular/commit/d74e4d0)), closes [#15402](https://github.com/angular/angular/issues/15402)
+* **core:** Update types for TypeScript nullability support ([#15472](https://github.com/angular/angular/issues/15472)) ([8c4b963](https://github.com/angular/angular/commit/8c4b963))
+* **language-service:** be resilient to invalidate ordering ([#15470](https://github.com/angular/angular/issues/15470)) ([a2c2b87](https://github.com/angular/angular/commit/a2c2b87)), closes [#15466](https://github.com/angular/angular/issues/15466)
+* **language-service:** correctly determine base members of types ([#15600](https://github.com/angular/angular/issues/15600)) ([0fe4985](https://github.com/angular/angular/commit/0fe4985)), closes [#15460](https://github.com/angular/angular/issues/15460)
+* **language-service:** don't require `reflect-metadata` module to be provided ([#15569](https://github.com/angular/angular/issues/15569)) ([bfa4f70](https://github.com/angular/angular/commit/bfa4f70)), closes [#15568](https://github.com/angular/angular/issues/15568)
+* **language-service:** guard access to `Symbol.members` ([#15529](https://github.com/angular/angular/issues/15529)) ([bf25e94](https://github.com/angular/angular/commit/bf25e94)), closes [#15528](https://github.com/angular/angular/issues/15528)
+* **language-service:** improve performance of `updateModuleAnalysis()` ([#15543](https://github.com/angular/angular/issues/15543)) ([5597fd3](https://github.com/angular/angular/commit/5597fd3))
+* **router:** should run CanActivate after CanDeactivate guards ([75478b2](https://github.com/angular/angular/commit/75478b2)), closes [#14059](https://github.com/angular/angular/issues/14059) [#15467](https://github.com/angular/angular/issues/15467)
+* **router:** shouldn't execute CanLoad when a route has been loaded ([2360676](https://github.com/angular/angular/commit/2360676)), closes [#14475](https://github.com/angular/angular/issues/14475) [#15438](https://github.com/angular/angular/issues/15438)
+
+
+### Performance Improvements
+
+* **router:** don't create new serializer every time UrlTree.toString is called ([#15565](https://github.com/angular/angular/issues/15565)) ([fd61145](https://github.com/angular/angular/commit/fd61145))
+
+<a name="4.0.0"></a>
+# [4.0.0](https://github.com/angular/angular/compare/4.0.0-rc.6...4.0.0) invisible-makeover (2017-03-23)
+
+
+### Bug Fixes
+
+* **compiler:** assume queries with no matches as static ([#15429](https://github.com/angular/angular/issues/15429)) ([c8ab5cb](https://github.com/angular/angular/commit/c8ab5cb)), closes [#15417](https://github.com/angular/angular/issues/15417)
+* **compiler:** correctly handle when `toString` is exported ([#15430](https://github.com/angular/angular/issues/15430)) ([0dda01e](https://github.com/angular/angular/commit/0dda01e)), closes [#15420](https://github.com/angular/angular/issues/15420)
+* **platform-browser:** setAttribute should work with xmlns namespace ([#14874](https://github.com/angular/angular/issues/14874)) ([92084f2](https://github.com/angular/angular/commit/92084f2)), closes [#14865](https://github.com/angular/angular/issues/14865)
+* **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)
+
+
+### Bug Fixes
+
+* **animations:** correct the main entry path in package.json ([#15300](https://github.com/angular/angular/issues/15300)) ([2489e4b](https://github.com/angular/angular/commit/2489e4b))
+* **animations:** ensure empty animate() steps work at the end of a sequence ([#15328](https://github.com/angular/angular/issues/15328)) ([fbccd5c](https://github.com/angular/angular/commit/fbccd5c)), closes [#15310](https://github.com/angular/angular/issues/15310)
+* **animations:** ensure enter/leave cancellations work ([#15323](https://github.com/angular/angular/issues/15323)) ([9bf2fb4](https://github.com/angular/angular/commit/9bf2fb4)), closes [#15315](https://github.com/angular/angular/issues/15315)
+* **animations:** make sure easing values work with web-animations ([#15195](https://github.com/angular/angular/issues/15195)) ([f925910](https://github.com/angular/angular/commit/f925910)), closes [#15115](https://github.com/angular/angular/issues/15115)
+* **animations:** make sure non-transitioned leave operations cancel existing animations ([#15254](https://github.com/angular/angular/issues/15254)) ([a6fb78e](https://github.com/angular/angular/commit/a6fb78e)), closes [#15213](https://github.com/angular/angular/issues/15213)
+* **animations:** only process element nodes through the animation engine ([#15268](https://github.com/angular/angular/issues/15268)) ([80075af](https://github.com/angular/angular/commit/80075af)), closes [#15267](https://github.com/angular/angular/issues/15267)
+* **animations:** only treat view removals as `void` state transitions ([#15245](https://github.com/angular/angular/issues/15245)) ([c66437f](https://github.com/angular/angular/commit/c66437f)), closes [#15223](https://github.com/angular/angular/issues/15223)
+* **animations:** stringify boolean values as `1` and `0` ([#15311](https://github.com/angular/angular/issues/15311)) ([94da801](https://github.com/angular/angular/commit/94da801)), closes [#15247](https://github.com/angular/angular/issues/15247)
+* **compiler:** add an empty content for source file of non mapped code. ([#15246](https://github.com/angular/angular/issues/15246)) ([8415910](https://github.com/angular/angular/commit/8415910))
+* **compiler:** don’t call `check` if we don’t need to ([#15322](https://github.com/angular/angular/issues/15322)) ([764e90f](https://github.com/angular/angular/commit/764e90f))
+* **compiler:** look for flat module resources using declaration module path ([#15367](https://github.com/angular/angular/issues/15367)) ([90d2518](https://github.com/angular/angular/commit/90d2518)), closes [#15221](https://github.com/angular/angular/issues/15221)
+* **compiler:** only log template deprecation warning once ([#15364](https://github.com/angular/angular/issues/15364)) ([08d8675](https://github.com/angular/angular/commit/08d8675))
+* **compiler:** use attribute id to merge translations ([#15302](https://github.com/angular/angular/issues/15302)) ([1d7693c](https://github.com/angular/angular/commit/1d7693c)), closes [#15234](https://github.com/angular/angular/issues/15234)
+* **compiler-cli:** adding missing format xliff for the extractor ([#15386](https://github.com/angular/angular/issues/15386)) ([a50d79d](https://github.com/angular/angular/commit/a50d79d))
+* **core:** allow tree shaking of component factories and styles ([#15214](https://github.com/angular/angular/issues/15214)) ([2a0e55f](https://github.com/angular/angular/commit/2a0e55f)), closes [#15181](https://github.com/angular/angular/issues/15181)
+* **core:** don’t create a comment for components with empty template. ([#15260](https://github.com/angular/angular/issues/15260)) ([f8c075a](https://github.com/angular/angular/commit/f8c075a)), closes [#15143](https://github.com/angular/angular/issues/15143)
+* **core:** mark components for check when host events trigger. ([#15359](https://github.com/angular/angular/issues/15359)) ([64beae9](https://github.com/angular/angular/commit/64beae9)), closes [#15352](https://github.com/angular/angular/issues/15352)
+* **core:** only apply `WrappedValue` to the binding of the pipe ([#15257](https://github.com/angular/angular/issues/15257)) ([0c43535](https://github.com/angular/angular/commit/0c43535)), closes [#15116](https://github.com/angular/angular/issues/15116)
+* **core:** provide `NgModuleRef` in `ViewContainerRef.createComponent`. ([#15350](https://github.com/angular/angular/issues/15350)) ([431eb30](https://github.com/angular/angular/commit/431eb30)), closes [#15241](https://github.com/angular/angular/issues/15241)
+* **core:** stringify shouldn't throw when toString returns null/undefined ([#14975](https://github.com/angular/angular/issues/14975)) ([8e6995c](https://github.com/angular/angular/commit/8e6995c)), closes [#14948](https://github.com/angular/angular/issues/14948)
+* **core:** trigger host animations for elements that are removed. ([#15251](https://github.com/angular/angular/issues/15251)) ([0d3e314](https://github.com/angular/angular/commit/0d3e314)), closes [#14813](https://github.com/angular/angular/issues/14813) [#15193](https://github.com/angular/angular/issues/15193)
+* **core:** update peer dep on zone.js to ^0.8.5 ([#15365](https://github.com/angular/angular/issues/15365)) ([97149f9](https://github.com/angular/angular/commit/97149f9)), closes [#15185](https://github.com/angular/angular/issues/15185)
+* **forms:** make composition event buffering configurable ([#15256](https://github.com/angular/angular/issues/15256)) ([5efc860](https://github.com/angular/angular/commit/5efc860)), closes [#15079](https://github.com/angular/angular/issues/15079)
+* **platform-server:** interpret Native view encapsulation as Emulated on the server ([#15155](https://github.com/angular/angular/issues/15155)) ([de3d2ee](https://github.com/angular/angular/commit/de3d2ee))
+* **platform-server:** setup NoopAnimationsModule in ServerModule by default ([#15131](https://github.com/angular/angular/issues/15131)) ([5c5c2ae](https://github.com/angular/angular/commit/5c5c2ae)), closes [#15098](https://github.com/angular/angular/issues/15098) [#14784](https://github.com/angular/angular/issues/14784)
+* **platform-server:** throw a better error message for relative URLs ([#15357](https://github.com/angular/angular/issues/15357)) ([15a082c](https://github.com/angular/angular/commit/15a082c)), closes [#15349](https://github.com/angular/angular/issues/15349)
+* **tsc-wrapped:** emit flat module format correctly on Windows ([#15215](https://github.com/angular/angular/issues/15215)) ([6e9264a](https://github.com/angular/angular/commit/6e9264a)), closes [#15192](https://github.com/angular/angular/issues/15192)
+* **tsc-wrapped:** use windows friendly path normalization in bundler ([#15374](https://github.com/angular/angular/issues/15374)) ([c584997](https://github.com/angular/angular/commit/c584997)), closes [#15289](https://github.com/angular/angular/issues/15289)
+* **upgrade:** component injectors should not link the module injector tree ([#15385](https://github.com/angular/angular/issues/15385)) ([ea49a95](https://github.com/angular/angular/commit/ea49a95))
+
+
+### Features
+
+* **core:** expose `inputs`, `outputs` and `ngContentSelectors` on `ComponentFactory`. ([#15214](https://github.com/angular/angular/issues/15214)) ([791534f](https://github.com/angular/angular/commit/791534f))
+* **router:** add `ParamMap.keys` to get a list of parameters ([d3eda7a](https://github.com/angular/angular/commit/d3eda7a))
+* **router:** introduce `ParamMap` to access parameters ([a755b71](https://github.com/angular/angular/commit/a755b71))
+* **tsc-wrapped:** record original location of flattened symbols ([#15367](https://github.com/angular/angular/issues/15367)) ([7354949](https://github.com/angular/angular/commit/7354949))
+* **upgrade:** use `ComponentFactory.inputs/outputs/ngContentSelectors` ([#15214](https://github.com/angular/angular/issues/15214)) ([9429032](https://github.com/angular/angular/commit/9429032))
+
+
+
+<a name="4.0.0-rc.5"></a>
+# [4.0.0-rc.5](https://github.com/angular/angular/compare/4.0.0-rc.4...4.0.0-rc.5) (2017-03-17)
+
+
+### Bug Fixes
+
+* **compiler-cli:** update the tsc-wrapped dependency version ([#15226](https://github.com/angular/angular/issues/15226)) ([7fb4528](https://github.com/angular/angular/commit/7fb4528))
+
+
+
+<a name="4.0.0-rc.4"></a>
+# [4.0.0-rc.4](https://github.com/angular/angular/compare/4.0.0-rc.3...4.0.0-rc.4) (2017-03-17)
+
+
+### Bug Fixes
+
+* **animations:** always fire callbacks even for noop animations ([#15170](https://github.com/angular/angular/issues/15170)) ([3f38c6f](https://github.com/angular/angular/commit/3f38c6f))
+* **animations:** make sure easing values are applied to an empty animate() step ([#15174](https://github.com/angular/angular/issues/15174)) ([62d5543](https://github.com/angular/angular/commit/62d5543)), closes [#15115](https://github.com/angular/angular/issues/15115)
+* **animations:** support multiple state names per state() call ([#15147](https://github.com/angular/angular/issues/15147)) ([36ce0af](https://github.com/angular/angular/commit/36ce0af)), closes [#14732](https://github.com/angular/angular/issues/14732)
+* **compiler:** always use `ng://` prefix for sourcemap urls ([#15218](https://github.com/angular/angular/issues/15218)) ([994089d](https://github.com/angular/angular/commit/994089d))
+* **compiler:** fix utf8encode, move to sharted utils, add tests ([#15076](https://github.com/angular/angular/issues/15076)) ([959a03a](https://github.com/angular/angular/commit/959a03a))
+* **compiler:** generated code should pass `noUnusedLocals` check ([50ab06e](https://github.com/angular/angular/commit/50ab06e)), closes [#14797](https://github.com/angular/angular/issues/14797)
+* **compiler:** Improve error message for missing annotations ([#14724](https://github.com/angular/angular/issues/14724)) ([3c15916](https://github.com/angular/angular/commit/3c15916))
+* **compiler:** improve error msg for unexpected closing tags ([#14747](https://github.com/angular/angular/issues/14747)) ([5f9fb91](https://github.com/angular/angular/commit/5f9fb91)), closes [#6652](https://github.com/angular/angular/issues/6652)
+* **compiler:** make sourcemaps work in AOT mode ([492153a](https://github.com/angular/angular/commit/492153a))
+* **compiler:** only warn for `[@Injectable](https://github.com/Injectable)` classes with invalid args. ([5c34066](https://github.com/angular/angular/commit/5c34066)), closes [#15003](https://github.com/angular/angular/issues/15003)
+* **compiler:** shouldn't throw when Symbol is used as DI token ([#13701](https://github.com/angular/angular/issues/13701)) ([8b5c6b2](https://github.com/angular/angular/commit/8b5c6b2)), closes [#13314](https://github.com/angular/angular/issues/13314)
+* **compiler:** support interface types in injectable constructors ([#14894](https://github.com/angular/angular/issues/14894)) ([b00fe20](https://github.com/angular/angular/commit/b00fe20)), closes [#12631](https://github.com/angular/angular/issues/12631)
+* **compiler:** warning prints "WARNING" instead of "ERROR" ([#15125](https://github.com/angular/angular/issues/15125)) ([3b1956b](https://github.com/angular/angular/commit/3b1956b))
+* **core:** don’t recreate `TemplateRef` when used as a reference. ([#15066](https://github.com/angular/angular/issues/15066)) ([df914ef](https://github.com/angular/angular/commit/df914ef)), closes [#14873](https://github.com/angular/angular/issues/14873)
+* **core:** don’t throw if queries change during change detection. ([06fc42b](https://github.com/angular/angular/commit/06fc42b)), closes [#14925](https://github.com/angular/angular/issues/14925)
+* **core:** ErrorHandler should not rethrow an error by default ([#15077](https://github.com/angular/angular/issues/15077)) ([#15208](https://github.com/angular/angular/issues/15208)) ([77fd91d](https://github.com/angular/angular/commit/77fd91d)), closes [#14949](https://github.com/angular/angular/issues/14949) [#15182](https://github.com/angular/angular/issues/15182) [#14316](https://github.com/angular/angular/issues/14316)
+* **core:** update peer dep on zone.js to ^0.8.4 ([#15209](https://github.com/angular/angular/issues/15209)) ([d2fbbb4](https://github.com/angular/angular/commit/d2fbbb4)), closes [#15180](https://github.com/angular/angular/issues/15180) [#15185](https://github.com/angular/angular/issues/15185)
+* **core:** use presence of .subscribe to detect observables rather then Symbol.observable ([#15171](https://github.com/angular/angular/issues/15171)) ([6e98757](https://github.com/angular/angular/commit/6e98757)), closes [#14298](https://github.com/angular/angular/issues/14298) [#14473](https://github.com/angular/angular/issues/14473) [#14926](https://github.com/angular/angular/issues/14926)
+* **forms:** ensure observable validators are properly canceled ([#15132](https://github.com/angular/angular/issues/15132)) ([26d4ce2](https://github.com/angular/angular/commit/26d4ce2))
+* **forms:** remove equalsTo validator ([#15050](https://github.com/angular/angular/issues/15050)) ([778f7d6](https://github.com/angular/angular/commit/778f7d6))
+* element injector vs module injector ([#15044](https://github.com/angular/angular/issues/15044)) ([13686bb](https://github.com/angular/angular/commit/13686bb)), closes [#12869](https://github.com/angular/angular/issues/12869) [#12889](https://github.com/angular/angular/issues/12889) [#13885](https://github.com/angular/angular/issues/13885) [#13870](https://github.com/angular/angular/issues/13870)
+* **http:** Make ResponseOptionsArgs an interface ([#14607](https://github.com/angular/angular/issues/14607)) ([#14623](https://github.com/angular/angular/issues/14623)) ([f1b33ab](https://github.com/angular/angular/commit/f1b33ab)), closes [#13708](https://github.com/angular/angular/issues/13708)
+* **platform-browser:** prevent clobbered elements from freezing the browser ([a4076c7](https://github.com/angular/angular/commit/a4076c7))
+* **platform-server:** correctly implement get href in parse5 adapter ([#15022](https://github.com/angular/angular/issues/15022)) ([80649ea](https://github.com/angular/angular/commit/80649ea))
+* **platform-server:** fix an exception when HostListener('window:scroll') is used on the server ([#15019](https://github.com/angular/angular/issues/15019)) ([4f7d62a](https://github.com/angular/angular/commit/4f7d62a))
+* correct UMD resolutions for platform-browser_animations ([#15190](https://github.com/angular/angular/issues/15190)) ([923d0c5](https://github.com/angular/angular/commit/923d0c5)), closes [#15114](https://github.com/angular/angular/issues/15114)
+* don't instantiate providers with ngOnDestroy eagerly. ([#15070](https://github.com/angular/angular/issues/15070)) ([2c5a671](https://github.com/angular/angular/commit/2c5a671)), closes [#14552](https://github.com/angular/angular/issues/14552)
+* fix path locally to empty.js ([#15073](https://github.com/angular/angular/issues/15073)) ([80112a9](https://github.com/angular/angular/commit/80112a9))
+* **platform-server:** fix get/set title in parse5 adapter ([#14965](https://github.com/angular/angular/issues/14965)) ([018e5c9](https://github.com/angular/angular/commit/018e5c9))
+* **platform-server:** handle styles with extra ':'s correctly ([#15189](https://github.com/angular/angular/issues/15189)) ([013d806](https://github.com/angular/angular/commit/013d806))
+* **platform-server:** support svg elements with namespaced attributes ([#15101](https://github.com/angular/angular/issues/15101)) ([f093501](https://github.com/angular/angular/commit/f093501))
+* **router:** fix query parameters with multiple values ([#15129](https://github.com/angular/angular/issues/15129)) ([029d0f2](https://github.com/angular/angular/commit/029d0f2)), closes [#14796](https://github.com/angular/angular/issues/14796)
+* **tsc-wrapped:** emit js files in all cases ([c0e05e6](https://github.com/angular/angular/commit/c0e05e6))
+
+
+### Code Refactoring
+
+* **core:** use flags in `Renderer2.setStyle` instead of booleans ([#15045](https://github.com/angular/angular/issues/15045)) ([ff71eff](https://github.com/angular/angular/commit/ff71eff))
+
+### Features
+
+* **common:** support `as` syntax in template/* bindings ([#15025](https://github.com/angular/angular/issues/15025)) ([c10c060](https://github.com/angular/angular/commit/c10c060)), closes [#15020](https://github.com/angular/angular/issues/15020)
+* **compiler-cli:** support metadata file aliases ([0ab49d4](https://github.com/angular/angular/commit/0ab49d4))
+* **core:** allow to provide multiple default testing modules ([#15054](https://github.com/angular/angular/issues/15054)) ([6c8638c](https://github.com/angular/angular/commit/6c8638c))
+* **core:** expose `inputs`, `outputs` and `ngContentSelectors` on `ComponentFactory`. ([1171f91](https://github.com/angular/angular/commit/1171f91))
+* **upgrade:** support multi-slot projection in upgrade/static ([#14282](https://github.com/angular/angular/issues/14282)) ([914797a](https://github.com/angular/angular/commit/914797a)), closes [#14261](https://github.com/angular/angular/issues/14261)
+* **upgrade:** use `ComponentFactory.inputs/outputs/ngContentSelectors` ([a3e32fb](https://github.com/angular/angular/commit/a3e32fb))
+* introduce source maps for templates ([#15011](https://github.com/angular/angular/issues/15011)) ([cdc882b](https://github.com/angular/angular/commit/cdc882b))
+
+### BREAKING CHANGES
+
+* Previously, any provider that had an ngOnDestroy lifecycle hook would be created eagerly.
+
+  Now, only classes that are annotated with @Component, @Directive, @Pipe, @NgModule are eager. Providers only become eager if they are either directly or transitively injected into one of the above.
+
+  This also makes all `useValue` providers eager, which
+  should have no observable impact other than code size.
+
+  **EXPECTED IMPACT**:
+  Making providers eager was an incorrect behavior and never documented.
+  Also, providers that are used by a directive / pipe / ngModule stay eager.
+  So the impact should be rather small.
+
+* DebugNode.source no longer returns the source location of a node.
+
+  Closes 14013
+
+* core: (since v4 rc.1)
+  - `Renderer2.setStyle` no longer takes booleans but rather a
+     bit mask of flags.
+
+
+
+<a name="2.4.10"></a>
+## [2.4.10](https://github.com/angular/angular/compare/2.4.9...2.4.10) (2017-03-17)
+
+### Bug Fixes
+
+* **compiler:** fix decoding surrogate pairs ([#15154](https://github.com/angular/angular/issues/15154)) ([e5c9bbc](https://github.com/angular/angular/commit/e5c9bbc))
+* **router:** do not finish bootstrap until all the routes are resolved ([#15121](https://github.com/angular/angular/issues/15121)) ([34403cd](https://github.com/angular/angular/commit/34403cd))
+
+
+<a name="4.0.0-rc.3"></a>
+# [4.0.0-rc.3](https://github.com/angular/angular/compare/4.0.0-rc.2...4.0.0-rc.3) (2017-03-10)
+
+
+### Bug Fixes
+
+* **compiler:** don’t throw for empty array literal in assignments ([#14878](https://github.com/angular/angular/issues/14878)) ([6cd3326](https://github.com/angular/angular/commit/6cd3326)), closes [#14782](https://github.com/angular/angular/issues/14782)
+* **compiler:** improve error message when a module imports itself ([#14646](https://github.com/angular/angular/issues/14646)) ([6bc6482](https://github.com/angular/angular/commit/6bc6482)), closes [#14644](https://github.com/angular/angular/issues/14644)
+* **core:** allow to use the `Renderer` outside of views. ([#14882](https://github.com/angular/angular/issues/14882)) ([ba4b6f5](https://github.com/angular/angular/commit/ba4b6f5)), closes [#14872](https://github.com/angular/angular/issues/14872)
+* **router:** do not finish bootstrap until all the routes are resolved ([#14762](https://github.com/angular/angular/issues/14762)) ([5df998d](https://github.com/angular/angular/commit/5df998d))
+* **upgrade:** populate upgraded component's view before creating the controller ([#14289](https://github.com/angular/angular/issues/14289)) ([07122f0](https://github.com/angular/angular/commit/07122f0)), closes [#13912](https://github.com/angular/angular/issues/13912)
+* throw for synthetic properties / listeners by default ([#14880](https://github.com/angular/angular/issues/14880)) ([3651d8d](https://github.com/angular/angular/commit/3651d8d))
+
+
+### BREAKING CHANGES
+
+#### since 4.0 rc.1:
+- rename `RendererV2` to `Renderer2`
+- rename `RendererTypeV2` to `RendererType2`
+- rename `RendererFactoryV2` to `RendererFactory2`
+
+<a name="2.4.9"></a>
+## [2.4.9](https://github.com/angular/angular/compare/2.4.8...2.4.9) (2017-03-02)
+
+
+### Bug Fixes
+
+* **http:** Make ResponseOptionsArgs an interface ([b658fa9](https://github.com/angular/angular/commit/b658fa9)), closes [#13708](https://github.com/angular/angular/issues/13708)
+* **router:** improve robustness ([#14602](https://github.com/angular/angular/issues/14602)) ([2a12346](https://github.com/angular/angular/commit/2a12346))
+
+
+### Reverts
+
+* fix(router): do not finish bootstrap until all the routes are resolved ([#14327](https://github.com/angular/angular/issues/14327)) ([de36f8a](https://github.com/angular/angular/commit/de36f8a)), closes [#14681](https://github.com/angular/angular/issues/14681) [#14588](https://github.com/angular/angular/issues/14588)
+
+
+
+<a name="4.0.0-rc.2"></a>
+## [4.0.0-rc.2](https://github.com/angular/angular/compare/4.0.0-rc.1...4.0.0-rc.2) (2017-03-02)
+
+
+### Bug Fixes
+
+* **animations:** make animations work in AOT ([#14775](https://github.com/angular/angular/issues/14775)) ([9560ad8](https://github.com/angular/angular/commit/9560ad8))
+* **compiler:** apply element bindings before host bindings ([#14823](https://github.com/angular/angular/issues/14823)) ([79fc1e3](https://github.com/angular/angular/commit/79fc1e3))
+* **compiler:** fix identifier names of `EMPTY_MAP` / `EMPTY_ARRAY` ([#14806](https://github.com/angular/angular/issues/14806)) ([5ba55b0](https://github.com/angular/angular/commit/5ba55b0))
+* **compiler:** quote `animation` in `RendererTypeV2` and skip if empty ([#14773](https://github.com/angular/angular/issues/14773)) ([77682a3](https://github.com/angular/angular/commit/77682a3))
+* **core:** call lifecycle hooks for siblings in declaration order ([d2e4256](https://github.com/angular/angular/commit/d2e4256))
+* **core:** fix `isComponentView()` and `isEmbeddedView()` tests ([#14789](https://github.com/angular/angular/issues/14789)) ([5753de5](https://github.com/angular/angular/commit/5753de5)), closes [#14778](https://github.com/angular/angular/issues/14778)
+* **language-service:** tolerate errors in decorators ([#14634](https://github.com/angular/angular/issues/14634)) ([6bae737](https://github.com/angular/angular/commit/6bae737)), closes [#14631](https://github.com/angular/angular/issues/14631)
+* **platform-server:** don't setup Testability and TestabilityRegistry on the server ([#14510](https://github.com/angular/angular/issues/14510)) ([47bdc2b](https://github.com/angular/angular/commit/47bdc2b))
+* **tsc-wrapped:** validate metadata in static members of a class ([#14772](https://github.com/angular/angular/issues/14772)) ([a6996a9](https://github.com/angular/angular/commit/a6996a9)), closes [#13481](https://github.com/angular/angular/issues/13481)
+* **upgrade:** fix upgrade component Closure optimization. ([#14801](https://github.com/angular/angular/issues/14801)) ([968995a](https://github.com/angular/angular/commit/968995a))
+
+
+### Performance Improvements
+
+* delete pre-view-engine core, compiler, platform-browser, etc code ([#14788](https://github.com/angular/angular/issues/14788)) ([126fda2](https://github.com/angular/angular/commit/126fda2))
+* **compiler:** make identifiers for generated code small to improve dev size ([5caab71](https://github.com/angular/angular/commit/5caab71f7dc64b10f3544b2a3b2650e1666adbf1))
+
+
+
+<a name="4.0.0-rc.1"></a>
+# [4.0.0-rc.1](https://github.com/angular/angular/compare/4.0.0-beta.8...4.0.0-rc.1) (2017-02-24)
+
+We are excited to share 4.0.0-RC.1 with the community. This is a feature-complete pre-release of 4.0.0. Upgrade to get to know the new features to be released in 4.0.0, and to help us validate the release.
+
+It’s important to note that this release has been tested extensively. All Angular applications within Google use the master branch of Angular, so every commit is tested and validated at scale prior to any release.
+
+## We Need Your Help
+Please give this RC a try and test it with your projects! We have spent a significant amount of time working to ensure that this release is backwards compatible and will work with your existing code, but you may have use cases we haven’t anticipated. If you are broken by this release, let us know so that we can look into it right away. We are also looking for feedback related to the ergonomics of any newly added APIs.
+
+## What’s New
+
+### View Engine
+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
+Our template binding syntax now supports a couple helpful changes. You can now use an if/else style syntax, and assign local variables such as when unrolling an observable.
+
+```
+<ng-template #loading>Loading...</ng-template>
+<div *ngIf="userObservable | async; else loading; let user">
+  {{ user.name }}
+</div>
+```
+
+
+### Animation Package
+We have pulled Animations into their own package. This means that if you don’t use Animations, this extra code will not end up in your production bundles. This also allows you to more easily find documentation and to take better advantage of autocompletion. If you do need animations, libraries like Material will automatically import the module (once you install it via NPM), or you can add it yourself to your main NgModule.
+
+
+### TypeScript 2.1
+We’ve updated Angular to a more recent version of TypeScript. This will improve the speed of `ngc` and you will get better type checking throughout your application.
+
+
+### StrictNullChecks
+Angular is now compliant with [TypeScript’s StrictNullChecks](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html). This means that you can enable StrictNullChecks in your project, if desired.
+
+
+### Universal
+Universal, the project that allows developers to run Angular on a server, is now up to date with Angular again, and has been adopted by the Angular team. This release now includes the results of the work from the Universal team over the last few months. The majority of the Universal code is now in platform-server. To learn more about this change, take a look the new [`renderModuleFactory`](https://github.com/angular/angular/blob/56f232cdd70a352cb9151bc7cfe8981bc2710ea6/modules/%40angular/platform-server/src/utils.ts#L63-L72) method, or Rob Wormald’s [Demo Repository](https://github.com/robwormald/ng-universal-demo/). More documentation is forthcoming.
+
+
+<a name="flat-es-modules-esm"></a><!-- legacy anchor link, keep it here -->
+### Flat ES Modules (Flat ESM / FESM)
+We now ship flattened versions of our modules ("rolled up" version of our code in the EcmaScript Module format, see [example file](https://github.com/angular/core-builds/blob/85cbe3f8d6107af033b0f8b56456c181cbcb5eb7/%40angular/core.js)). This format should help tree-shaking, help reduce the size of your generated bundles, and speed up build, transpilation, and loading in the browser in certain scenarios.
+
+
+### ES2015 Builds
+We now also ship our packages in the ES2015 Flat ESM format. This option is experimental and opt-in (configure your webpack to resolve ["es2015" property](https://github.com/angular/core-builds/blob/dc0c8d828a8bae6591d2b9c77974271481af818c/package.json#L7) in package.json over the regular ["module" property](https://github.com/angular/core-builds/blob/dc0c8d828a8bae6591d2b9c77974271481af818c/package.json#L6)).
+
+
+## Known Issues
+
+The following is a list of known issues that will be fixed in the next rcs.
+
+- Source maps are missing in npm packages
+- Generated bundles will be larger temporarily while we validate new code paths and remove old ones
+- angular.io docs have not been updated to reflect API changes in 4.0
+- legacy UMD bundles don't have correct RxJS mappings when running in ES5 mode without a module system
+
+
+## Installing RC.1
+We have two main ways to update. If you have an existing project, you should be able to run:
+
+On Linux/Mac: `npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next --save`
+On Windows: `npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save`
+
+
+Then run whatever `ng serve` or `npm start` command you normally use, and everything should work.
+
+*Please ensure that you are using Typescript v2.1.6 or higher.*
+
+*If you rely on Animations* you’ll also need to install the animations package `@angular/animations` and import the new `BrowserAnimationsModule` from `@angular/platform-browser/animations` in your root NgModule. Without this, your code will compile and run, but animations won’t activate.
+Imports from `@angular/core` were deprecated, use imports from the new package `import { trigger, state, style, transition, animate } from '@angular/animations';`.
+
+## What's next?
+We have [three more release candidates scheduled](https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md) before our planned GA the week of March 22. In the meantime we'll be looking for your feedback, fixing bugs and working on docs.
+
+
+## Commit Summary
+
+### Features
+
+* **compiler:** Add a `enableLegacyTemplate` option to support `<template>` ([e99d721](https://github.com/angular/angular/commit/e99d721))
+* **compiler:** introduce `<ng-template>`, deprecate `<template>` and `template` attribute ([bf8eb41](https://github.com/angular/angular/commit/bf8eb41))
+* **compiler-cli:** add a `locale` option to ng-xi18n ([234f059](https://github.com/angular/angular/commit/234f059)), closes [#12303](https://github.com/angular/angular/issues/12303) [#14537](https://github.com/angular/angular/issues/14537)
+* **compiler-cli:** add an `outFile` option to ng-xi18n ([39f56fa](https://github.com/angular/angular/commit/39f56fa)), closes [#11416](https://github.com/angular/angular/issues/11416) [#14508](https://github.com/angular/angular/issues/14508) [#14657](https://github.com/angular/angular/issues/14657)
+* **core:** enable new view engine ([d3a98c7](https://github.com/angular/angular/commit/d3a98c7))
+* **core:** make `new Inject()` optional for deps specified as `InjectionToken` ([#14486](https://github.com/angular/angular/issues/14486)) ([d6a58f9](https://github.com/angular/angular/commit/d6a58f9)), closes [#10625](https://github.com/angular/angular/issues/10625)
+* **core:** add a PLATFORM_ID token that provides a platform id Object. ([#14647](https://github.com/angular/angular/issues/14647)) ([a1d4769](https://github.com/angular/angular/commit/a1d4769))
+* **forms:** add option to use browser's native validation and angular forms ([#13566](https://github.com/angular/angular/issues/13566)) ([8742432](https://github.com/angular/angular/commit/8742432)), closes [#13573](https://github.com/angular/angular/issues/13573)
+* **forms:** introduce AsyncValidator interface ([#13483](https://github.com/angular/angular/issues/13483)) ([551fe50](https://github.com/angular/angular/commit/551fe50)), closes [#13398](https://github.com/angular/angular/issues/13398)
+* **router:** add `RouteConfigLoadStart` and `RouteConfigLoadEnd` events ([78e8814](https://github.com/angular/angular/commit/78e8814))
+* **router:** add an option to rerun guards and resolvers when query changes ([c2e0f71](https://github.com/angular/angular/commit/c2e0f71)), closes [#14514](https://github.com/angular/angular/issues/14514) [#14567](https://github.com/angular/angular/issues/14567)
+* **router:** add an option to rerun guards and resolvers when query changes ([#14624](https://github.com/angular/angular/issues/14624)) ([41da599](https://github.com/angular/angular/commit/41da599)), closes [#14514](https://github.com/angular/angular/issues/14514) [#14567](https://github.com/angular/angular/issues/14567)
+* **router:** introduce RouteConfigLoaded event ([7df6f46](https://github.com/angular/angular/commit/7df6f46)), closes [#14036](https://github.com/angular/angular/issues/14036)
+
+
+### Bug Fixes
+
+* **common:** do not reference deprecated classes in providers ([#14523](https://github.com/angular/angular/issues/14523)) ([#14523](https://github.com/angular/angular/issues/14523)) ([a23634d](https://github.com/angular/angular/commit/a23634d)), closes [#14521](https://github.com/angular/angular/issues/14521)
+* **core:** host bindings and host listeners for animations ([5049a50](https://github.com/angular/angular/commit/5049a50))
+* **http:** Make ResponseOptionsArgs an interface ([#14607](https://github.com/angular/angular/issues/14607)) ([fbe4b76](https://github.com/angular/angular/commit/fbe4b76)), closes [#13708](https://github.com/angular/angular/issues/13708)
+* **packaging:** properly build the core-testing bundle ([4301dce](https://github.com/angular/angular/commit/4301dce))
+* **platform-webworker:** integrate review feedback ([601fd3e](https://github.com/angular/angular/commit/601fd3e)), closes [#14581](https://github.com/angular/angular/issues/14581)
+* **router:** do not finish bootstrap until all the routes are resolved ([#14608](https://github.com/angular/angular/issues/14608)) ([2a191ca](https://github.com/angular/angular/commit/2a191ca)), closes [#12162](https://github.com/angular/angular/issues/12162) [#14155](https://github.com/angular/angular/issues/14155)
+* app ids for better style tag management for ssr ([#14632](https://github.com/angular/angular/issues/14632)) ([88bc143](https://github.com/angular/angular/commit/88bc143))
+
+
+### Code Refactoring
+
+* **core:** deprecate `RootRenderer` / `Renderer` ([ccb636c](https://github.com/angular/angular/commit/ccb636c))
+* **core:** change abstract classes for interfaces ([#12324](https://github.com/angular/angular/issues/12324)) ([ee747f7](https://github.com/angular/angular/commit/ee747f7)), closes [#10083](https://github.com/angular/angular/issues/10083)
+
+
+### Performance Improvements
+
+* distribute smaller bundled code and include es2015 bundle ([de795ea](https://github.com/angular/angular/commit/de795ea))
+
+
+### BREAKING CHANGES
+
+* core: Because all lifecycle hooks are now interfaces the code that uses 'extends' keyword will no longer compile. Introduced by ([ee747f7](https://github.com/angular/angular/commit/ee747f7)).
+
+  To migrate the code follow the example below:
+
+  Before:
+  ```
+  @Component()
+  class SomeComponent extends OnInit {}
+  ```
+  After:
+  ```
+  @Component()
+  class SomeComponent implements OnInit {}
+  ```
+
+  Based on our research we don't expect anyone to be affected by this change.
+
+* `RootRenderer` cannot be used any more, use `RendererFactoryV2` instead. Introduced by ([ccb636c](https://github.com/angular/angular/commit/ccb636c)).
+
+  Note: `Renderer` can still be injected/used, but is deprecated.
+
+Note: the 4.0.0-rc.0 release on npm accidentally omitted one bug fix, so we cut rc.1 instead. oops :-)
+
+
+
+<a name="4.0.0-beta.8"></a>
+## [4.0.0-beta.8](https://github.com/angular/angular/compare/4.0.0-beta.7...4.0.0-beta.8) (2017-02-18)
+
+
+### Features
+* **packaging**: allow applications to turn on strictNullChecks mode in TypeScript ([#14382](https://github.com/angular/angular/pull/14382)) ([03e855a](https://github.com/angular/angular/commit/03e855ae8f9e9b86251320c7551a96092bd8b0c4))
+* **common:** added typed overloaded for `AsyncPipe.transform()` ([#14367](https://github.com/angular/angular/issues/14367)) ([4da7925](https://github.com/angular/angular/commit/4da7925))
+* **compiler:** add support for source map generation ([#14258](https://github.com/angular/angular/issues/14258)) ([7ac38aa](https://github.com/angular/angular/commit/7ac38aa)), closes [#14125](https://github.com/angular/angular/issues/14125)
+* **compiler:** add target locale to the translation bundles ([#14290](https://github.com/angular/angular/issues/14290)) ([bb4db2d](https://github.com/angular/angular/commit/bb4db2d))
+* **compiler:** generate shallow imports compiler generated references ([#14388](https://github.com/angular/angular/issues/14388)) ([8b81bb1](https://github.com/angular/angular/commit/8b81bb1))
+* **compiler:** implement style encapsulation for new view engine ([#14518](https://github.com/angular/angular/issues/14518)) ([0fa3895](https://github.com/angular/angular/commit/0fa3895))
+* **compiler:** integrate compiler with view engine - change detection tests work ([#14412](https://github.com/angular/angular/issues/14412)) ([e4e9dbe](https://github.com/angular/angular/commit/e4e9dbe))
+* **compiler:** integrate compiler with view engine - main integration tests work ([#14284](https://github.com/angular/angular/issues/14284)) ([baa654a](https://github.com/angular/angular/commit/baa654a))
+* **compiler:** integrate compiler with view engine ([#14487](https://github.com/angular/angular/issues/14487)) ([4e7752a](https://github.com/angular/angular/commit/4e7752a))
+* **core:** add isStable Observable property to ApplicationRef to indicate when it's stable and unstable ([#14337](https://github.com/angular/angular/issues/14337)) ([c481798](https://github.com/angular/angular/commit/c481798))
+* **platform-server:** add API to render Module and ModuleFactory to string ([#14381](https://github.com/angular/angular/issues/14381)) ([b4d444a](https://github.com/angular/angular/commit/b4d444a))
+* **platform-server:** Implement PlatformLocation for platformServer() ([#14405](https://github.com/angular/angular/issues/14405)) ([9e28568](https://github.com/angular/angular/commit/9e28568))
+* **platform-server:** support [@angular](https://github.com/angular)/http from [@angular](https://github.com/angular)/platform-server ([9559d3e](https://github.com/angular/angular/commit/9559d3e))
+* **tsc-wrapped:** add an option to `ngc` to bundle metadata ([#14509](https://github.com/angular/angular/issues/14509)) ([3b89670](https://github.com/angular/angular/commit/3b89670))
+
+
+### Bug Fixes
+
+* **compiler:** disable non-components as an entry component ([#14335](https://github.com/angular/angular/issues/14335)) ([44bb337](https://github.com/angular/angular/commit/44bb337))
+* **compiler:** improve error message for unknown elements ([#14373](https://github.com/angular/angular/issues/14373)) ([2c6dab9](https://github.com/angular/angular/commit/2c6dab9))
+* **compiler:** improve error messages in aot compiler ([#14333](https://github.com/angular/angular/issues/14333)) ([a696f4a](https://github.com/angular/angular/commit/a696f4a))
+* **compiler:** improve error msg for unknown properties on ([#14373](https://github.com/angular/angular/issues/14373)) ([e5a144d](https://github.com/angular/angular/commit/e5a144d)), closes [#14070](https://github.com/angular/angular/issues/14070)
+* **core:** Remove ChangeDetectorRef Parameter from KeyValueDifferFactory and IterableDifferFactory ([#14311](https://github.com/angular/angular/issues/14311)) ([45cc444](https://github.com/angular/angular/commit/45cc444))
+* **core:** suppress a Closure Compiler warning ([#14484](https://github.com/angular/angular/issues/14484)) ([2f2b65b](https://github.com/angular/angular/commit/2f2b65b))
+* **forms:** getRawValue should correctly work with nested FormGroups/Arrays ([#12964](https://github.com/angular/angular/issues/12964)) ([1ece736](https://github.com/angular/angular/commit/1ece736)), closes [#12963](https://github.com/angular/angular/issues/12963)
+* **http:** REVERT: remove dots from jsonp callback name ([#13219](https://github.com/angular/angular/issues/13219)) ([4676df5](https://github.com/angular/angular/commit/4676df5))
+* **platform-browser:** allow to mix shadow dom with non shadow dom ([ab26b65](https://github.com/angular/angular/commit/ab26b65))
+* **platform-browser:** should not throw for debug attrs containing $ ([#14353](https://github.com/angular/angular/issues/14353)) ([1cfbefe](https://github.com/angular/angular/commit/1cfbefe)), closes [#9566](https://github.com/angular/angular/issues/9566)
+* **platform-browser:** should only add styles with native encapsulation in shadow DOM ([#14313](https://github.com/angular/angular/issues/14313)) ([53cf2ec](https://github.com/angular/angular/commit/53cf2ec)), closes [#7887](https://github.com/angular/angular/issues/7887)
+* **platform-server:** allow multiple instances of platformServer and platformDynamicServer ([17486fd](https://github.com/angular/angular/commit/17486fd))
+* **platform-server:** default unspecified sections of the url to empty string ([#14512](https://github.com/angular/angular/issues/14512)) ([612f120](https://github.com/angular/angular/commit/612f120))
+* **platform-server:** read initial location from INITIAL_CONFIG if present ([56f232c](https://github.com/angular/angular/commit/56f232c))
+* **platform-server:** reflect properties to attributes for known elements, for serialization ([047cda5](https://github.com/angular/angular/commit/047cda5))
+* **platform-server:** render styles in app component instead of <head> ([30380d0](https://github.com/angular/angular/commit/30380d0))
+* **upgrade:** Prevent property renaming for $inject. ([96d06f7](https://github.com/angular/angular/commit/96d06f7))
+
+
+### DEPRECATIONS
+
+* core: `KeyValueDifferFactory` and `IterableDifferFactory` no longer have `ChangeDetectorRef` as
+  a parameter. It was not used and has been there for historical reasons. If you call
+  `DifferFactory.create(...)` remove the `ChangeDetectorRef` argument. Introduced by ([#14311](https://github.com/angular/angular/pull/14311)).
+
+
+### BREAKING CHANGES
+
+* common: Classes that derive from `AsyncPipe` and override
+`transform()` might not compile correctly. The much more common use of `async` pipe in
+templates is unaffected. We expect no or little impact on apps from this change, file an issue if we break you. Introduced by ([#14367](https://github.com/angular/angular/issues/14367)) ([4da7925](https://github.com/angular/angular/commit/4da7925)).
+
+  * Mitigation: Update derived classes of `AsyncPipe` that override `transform()` to include the type parameter overloads.
+
+
+
+<a name="2.4.8"></a>
+## [2.4.8](https://github.com/angular/angular/compare/2.4.7...2.4.8) (2017-02-18)
+
+
+### Bug Fixes
+
+* **forms:** getRawValue should correctly work with nested FormGroups/Arrays ([#12964](https://github.com/angular/angular/issues/12964)) ([ea7737e](https://github.com/angular/angular/commit/ea7737e)), closes [#12963](https://github.com/angular/angular/issues/12963)
+* **http:** REVERT: remove dots from jsonp callback name ([#13219](https://github.com/angular/angular/issues/13219)) ([9ceb5d1](https://github.com/angular/angular/commit/9ceb5d1))
+* **platform-browser:** should only add styles with native encapsulation in shadow DOM ([#14313](https://github.com/angular/angular/issues/14313)) ([fadaf1e](https://github.com/angular/angular/commit/fadaf1e)), closes [#7887](https://github.com/angular/angular/issues/7887)
+* **router:** do not finish bootstrap until all the routes are resolved ([#14327](https://github.com/angular/angular/issues/14327)) ([541de26](https://github.com/angular/angular/commit/541de26)), closes [#12162](https://github.com/angular/angular/issues/12162)
+* **upgrade:** correctly project content on downgraded components with structural directives ([#14274](https://github.com/angular/angular/issues/14274)) ([74cb575](https://github.com/angular/angular/commit/74cb575)), closes [#14260](https://github.com/angular/angular/issues/14260)
+* **upgrade:** pass correct values to `ngOnChanges` for interpolation bindings ([#14400](https://github.com/angular/angular/issues/14400)) ([7c87c52](https://github.com/angular/angular/commit/7c87c52))
+
+
+
+<a name="4.0.0-beta.7"></a>
+## [4.0.0-beta.7](https://github.com/angular/angular/compare/4.0.0-beta.6...4.0.0-beta.7) (2017-02-09)
+
+
+### Bug Fixes
+
+* build and test fixes for TS 2.1 ([#13294](https://github.com/angular/angular/issues/13294)) ([ef32e6b](https://github.com/angular/angular/commit/ef32e6b))
+* **benchmarks:** don’t force gc on the `profile` buttons ([#14345](https://github.com/angular/angular/issues/14345)) ([f6b5965](https://github.com/angular/angular/commit/f6b5965))
+* **build:** make fsevents an optional dependency in npm ([#13945](https://github.com/angular/angular/issues/13945)) ([4370049](https://github.com/angular/angular/commit/4370049))
+* **compiler-cli:** prevent ng-xi18n from emitting the compilation output ([#14115](https://github.com/angular/angular/issues/14115)) ([e58d683](https://github.com/angular/angular/commit/e58d683)), closes [#13567](https://github.com/angular/angular/issues/13567)
+* **tsc-wrapped:** use tsickle's new source map composition feature ([#14150](https://github.com/angular/angular/issues/14150)) ([5bccff0](https://github.com/angular/angular/commit/5bccff0))
+* **upgrade:** pass correct values to `ngOnChanges` for interpolation bindings ([#14301](https://github.com/angular/angular/issues/14301)) ([1e3dd3d](https://github.com/angular/angular/commit/1e3dd3d))
+
+
+### Performance Improvements
+
+* **upgrade:** unregister `$doCheck` watcher when destroying upgraded component ([#14303](https://github.com/angular/angular/issues/14303)) ([94312f0](https://github.com/angular/angular/commit/94312f0))
+* Don’t subclass Error; resulting in smaller binary ([#14160](https://github.com/angular/angular/issues/14160)) ([c33fda2](https://github.com/angular/angular/commit/c33fda2))
+
+
+### BREAKING CHANGES
+
+* Angular 4 will support only TypeScript 2.1, so we no longer provide backwards compatibility to TS 1.8.
+
+
+
+<a name="2.4.7"></a>
+## [2.4.7](https://github.com/angular/angular/compare/2.4.6...2.4.7) (2017-02-09)
+
+
+### Bug Fixes
+
+* **upgrade:** allow non-element selectors for downgraded components ([#14291](https://github.com/angular/angular/issues/14291)) ([5bb47db](https://github.com/angular/angular/commit/5bb47db))
+
+
+<a name="4.0.0-beta.6"></a>
+## [4.0.0-beta.6](https://github.com/angular/angular/compare/4.0.0-beta.5...4.0.0-beta.6) (2017-02-03)
+
+
+### Bug Fixes
+
+* suppress some closure compiler warnings ([#14198](https://github.com/angular/angular/issues/14198)) ([2205829](https://github.com/angular/angular/commit/2205829))
+* **common:** add PopStateEvent interface ([#13400](https://github.com/angular/angular/issues/13400)) ([fe44118](https://github.com/angular/angular/commit/fe44118)), closes [#13378](https://github.com/angular/angular/issues/13378)
+* **common:** DatePipe shouldn't throw for NaN ([#14117](https://github.com/angular/angular/issues/14117)) ([7ad616a](https://github.com/angular/angular/commit/7ad616a)), closes [#14103](https://github.com/angular/angular/issues/14103)
+* **common:** DatePipe should parses input string even if it's not a valid date in browser ([#13895](https://github.com/angular/angular/issues/13895)) ([093cc04](https://github.com/angular/angular/commit/093cc04)), closes [#12334](https://github.com/angular/angular/issues/12334) [#13874](https://github.com/angular/angular/issues/13874)
+* **common:** use Symbol.observable to detect observables rather then presence of .subscribe ([#14067](https://github.com/angular/angular/issues/14067)) ([ff290af](https://github.com/angular/angular/commit/ff290af)), closes [#8848](https://github.com/angular/angular/issues/8848)
+* **compiler:** allow empty translations for attributes ([#14085](https://github.com/angular/angular/issues/14085)) ([05b2b49](https://github.com/angular/angular/commit/05b2b49)), closes [#13897](https://github.com/angular/angular/issues/13897)
+* avoid closure compiler warning ([#14229](https://github.com/angular/angular/issues/14229)) ([1bc5368](https://github.com/angular/angular/commit/1bc5368))
+* **router:** should allow navigation from root component in ngOnInit hook ([#13932](https://github.com/angular/angular/issues/13932)) ([47d41d4](https://github.com/angular/angular/commit/47d41d4)), closes [#13795](https://github.com/angular/angular/issues/13795)
+* failing integration test ([8270bec](https://github.com/angular/angular/commit/8270bec))
+* lint errors to make circle-ci green ([e0e5e78](https://github.com/angular/angular/commit/e0e5e78))
+* **router:** should find guard provided in a lazy loaded module ([#13929](https://github.com/angular/angular/issues/13929)) ([e075b1b](https://github.com/angular/angular/commit/e075b1b)), closes [#13530](https://github.com/angular/angular/issues/13530)
+* ngModel should use rxjs/symbol/observable to detect observable ([#14236](https://github.com/angular/angular/issues/14236)) ([a7479f6](https://github.com/angular/angular/commit/a7479f6))
+* **compiler:** allow expressions or functions in extends ([#14158](https://github.com/angular/angular/issues/14158)) ([b4214d6](https://github.com/angular/angular/commit/b4214d6)), closes [#14154](https://github.com/angular/angular/issues/14154)
+* **compiler:** fix missing translations handling ([#14113](https://github.com/angular/angular/issues/14113)) ([827c3fe](https://github.com/angular/angular/commit/827c3fe))
+* **compiler:** only lex messages that are needed by angular ([#14208](https://github.com/angular/angular/issues/14208)) ([5921c87](https://github.com/angular/angular/commit/5921c87))
+* **core:** add bootstrapped modules into platform modules list ([#13740](https://github.com/angular/angular/issues/13740)) ([863285a](https://github.com/angular/angular/commit/863285a)), closes [#12015](https://github.com/angular/angular/issues/12015)
+* **core:** ViewContainerRef.indexOf should not throw error when empty ([#13220](https://github.com/angular/angular/issues/13220)) ([a277e97](https://github.com/angular/angular/commit/a277e97))
+* **forms:** async validator cancels previous subscription when input has changed ([#13222](https://github.com/angular/angular/issues/13222)) ([6c7300c](https://github.com/angular/angular/commit/6c7300c)), closes [#12709](https://github.com/angular/angular/issues/12709) [#9120](https://github.com/angular/angular/issues/9120) [#10074](https://github.com/angular/angular/issues/10074) [#8923](https://github.com/angular/angular/issues/8923)
+* **forms:** fix broken unit test ([#14179](https://github.com/angular/angular/issues/14179)) ([1df9319](https://github.com/angular/angular/commit/1df9319))
+* **forms:** show a blank line when nothing is selected in IE or Edge ([#13903](https://github.com/angular/angular/issues/13903)) ([029f558](https://github.com/angular/angular/commit/029f558)), closes [#10010](https://github.com/angular/angular/issues/10010)
+* **forms:** verify functions passed into async validators returns Observable or Promise ([#14053](https://github.com/angular/angular/issues/14053)) ([94f84c5](https://github.com/angular/angular/commit/94f84c5))
+* **http:** remove dots from jsonp callback name ([#13219](https://github.com/angular/angular/issues/13219)) ([9e5617e](https://github.com/angular/angular/commit/9e5617e))
+* **http:** use params without RequestOptions ([#14101](https://github.com/angular/angular/issues/14101)) ([5f2b317](https://github.com/angular/angular/commit/5f2b317)), closes [#14100](https://github.com/angular/angular/issues/14100)
+* **language-service:** do not crash when Angular cannot be located ([#14123](https://github.com/angular/angular/issues/14123)) ([49fb814](https://github.com/angular/angular/commit/49fb814)), closes [#14122](https://github.com/angular/angular/issues/14122)
+* **platform-browser:** remove style nodes on destroy ([#13744](https://github.com/angular/angular/issues/13744)) ([cd3901f](https://github.com/angular/angular/commit/cd3901f)), closes [#11746](https://github.com/angular/angular/issues/11746)
+* **router:** fix CanActivateChild guard provided in a lazy loaded module ([#13989](https://github.com/angular/angular/issues/13989)) ([579567c](https://github.com/angular/angular/commit/579567c)), closes [#12275](https://github.com/angular/angular/issues/12275)
+* **testing:** async/fakeAsync/inject/withModule helpers should pass through context to callback functions ([#13718](https://github.com/angular/angular/issues/13718)) ([5f40e5b](https://github.com/angular/angular/commit/5f40e5b))
+* **upgrade:** detect async downgrade component changes ([#14039](https://github.com/angular/angular/issues/14039)) ([20b454c](https://github.com/angular/angular/commit/20b454c)), closes [#6385](https://github.com/angular/angular/issues/6385) [#6385](https://github.com/angular/angular/issues/6385)
+* **upgrade:** respect hierarchical injectors for downgraded components ([#14037](https://github.com/angular/angular/issues/14037)) ([1367cd9](https://github.com/angular/angular/commit/1367cd9))
+* **compiler:** improve error messages in aot compiler ([#14017](https://github.com/angular/angular/issues/14017)) ([665dde2](https://github.com/angular/angular/commit/665dde2))
+
+
+### Features
+
+* **common:** rename underlying `NgFor` class and add a type parameter ([#14104](https://github.com/angular/angular/issues/14104)) ([86b2b25](https://github.com/angular/angular/commit/86b2b25))
+* **compiler:** allow missing translations ([#14113](https://github.com/angular/angular/issues/14113)) ([8775ab9](https://github.com/angular/angular/commit/8775ab9)), closes [#13861](https://github.com/angular/angular/issues/13861)
+* **compiler:** do not parse xtb messages not needed by angular ([#14111](https://github.com/angular/angular/issues/14111)) ([f7fba74](https://github.com/angular/angular/commit/f7fba74)), closes [#14046](https://github.com/angular/angular/issues/14046)
+* **compiler:** generate type parameters for generic type references ([#14104](https://github.com/angular/angular/issues/14104)) ([69e14b5](https://github.com/angular/angular/commit/69e14b5))
+* **core:** add query support to view engine ([1e729d7](https://github.com/angular/angular/commit/1e729d7)), closes [#14084](https://github.com/angular/angular/issues/14084)
+* **forms:** add email validator ([#13709](https://github.com/angular/angular/issues/13709)) ([d69717c](https://github.com/angular/angular/commit/d69717c)), closes [#13706](https://github.com/angular/angular/issues/13706)
+* **forms:** add equalsTo validator ([#14052](https://github.com/angular/angular/issues/14052)) ([7b7ae5f](https://github.com/angular/angular/commit/7b7ae5f))
+* **core:** add NgModule support to NgComponentOutlet directive ([#14088](https://github.com/angular/angular/issues/14088)) ([3ef73c2](https://github.com/angular/angular/commit/3ef73c2)), closes [#14043](https://github.com/angular/angular/issues/14043)
+* **router:** deprecate preserveQueryParams,add queryParamsHandling ([#14095](https://github.com/angular/angular/issues/14095)) ([c87c3be](https://github.com/angular/angular/commit/c87c3be))
+* **tsc-wrapped:** record arity of generic classes ([#14104](https://github.com/angular/angular/issues/14104)) ([1079b93](https://github.com/angular/angular/commit/1079b93))
+* **upgrade:** allow non-element selectors for downgraded components ([#14037](https://github.com/angular/angular/issues/14037)) ([9aafdc7](https://github.com/angular/angular/commit/9aafdc7))
+* **upgrade:** export VERSION from `upgrade/static` ([#14037](https://github.com/angular/angular/issues/14037)) ([7670cc1](https://github.com/angular/angular/commit/7670cc1))
+* **upgrade:** return a function (instead of array) from `downgradeInjectable()` ([#14037](https://github.com/angular/angular/issues/14037)) ([1f90f29](https://github.com/angular/angular/commit/1f90f29))
+* **forms:** provide a method to compare options ([#13349](https://github.com/angular/angular/issues/13349)) ([f89d004](https://github.com/angular/angular/commit/f89d004)), closes [#13268](https://github.com/angular/angular/issues/13268)
+
+
+### Performance Improvements
+
+* use abstract keyword where possible to decrease file size. ([#14112](https://github.com/angular/angular/issues/14112)) ([670b680](https://github.com/angular/angular/commit/670b680))
+* **core** simplify ReflectiveInjector by removing code for Dart implementation ([#14126](https://github.com/angular/angular/issues/14126)) ([670b680](https://github.com/angular/angular/commit/670b680))
+
+
+### BREAKING CHANGES
+
+* common: A definition of `Iterable<T>` is now required to correctly compile
+Angular applications. Support for `Iterable<T>` is not required at
+runtime but a type definition `Iterable<T>` must be available.
+
+`NgFor`, and now `NgForOf<T>`, already supports `Iterable<T>` at
+runtime. With this change the type definition is updated to reflect
+this support.
+
+Migration:
+- add "es2015.iterable.ts" to your tsconfig.json "libs" fields.
+
+Part of #12398
+* upgrade: Previously, `upgrade/static/downgradeInjectable` returned an array of the form:
+
+```js
+['dep1', 'dep2', ..., function factory(dep1, dep2, ...) { ... }]
+```
+
+Now it returns a function with an `$inject` property:
+
+```js
+factory.$inject = ['dep1', 'dep2', ...];
+function factory(dep1, dep2, ...) { ... }
+```
+
+It shouldn't affect the behavior of apps, since both forms are equally suitable
+to be used for registering AngularJS injectable services, but it is possible
+that type-checking might fail or that current code breaks if it relies on the
+returned value being an array.
+
+
+
+<a name="2.4.6"></a>
+## [2.4.6](https://github.com/angular/angular/compare/2.4.5...2.4.6) (2017-02-03)
+
+
+### Bug Fixes
+
+* **common:** add PopStateEvent interface ([#13400](https://github.com/angular/angular/issues/13400)) ([71567d1](https://github.com/angular/angular/commit/71567d1)), closes [#13378](https://github.com/angular/angular/issues/13378)
+* **common:** DatePipe doesn't throw for NaN ([#14117](https://github.com/angular/angular/issues/14117)) ([32cc675](https://github.com/angular/angular/commit/32cc675)), closes [#14103](https://github.com/angular/angular/issues/14103)
+* **common:** DatePipe parses input string if it's not a valid date in browser ([#13895](https://github.com/angular/angular/issues/13895)) ([e641636](https://github.com/angular/angular/commit/e641636)), closes [#12334](https://github.com/angular/angular/issues/12334) [#13874](https://github.com/angular/angular/issues/13874)
+* **common:** introduce isObservable method ([#14067](https://github.com/angular/angular/issues/14067)) ([109f0d1](https://github.com/angular/angular/commit/109f0d1)), closes [#8848](https://github.com/angular/angular/issues/8848)
+* **compiler:** allow empty translations for attributes ([#14085](https://github.com/angular/angular/issues/14085)) ([f3d5506](https://github.com/angular/angular/commit/f3d5506)), closes [#13897](https://github.com/angular/angular/issues/13897)
+* **core:** add bootstrapped modules into platform modules list ([#13740](https://github.com/angular/angular/issues/13740)) ([250dbc4](https://github.com/angular/angular/commit/250dbc4)), closes [#12015](https://github.com/angular/angular/issues/12015)
+* **core:** ViewContainerRef.indexOf should not throw error when empty ([#13220](https://github.com/angular/angular/issues/13220)) ([41b8d95](https://github.com/angular/angular/commit/41b8d95))
+* **forms:** show a blank line when nothing is selected in IE or Edge ([#13903](https://github.com/angular/angular/issues/13903)) ([09e2d20](https://github.com/angular/angular/commit/09e2d20)), closes [#10010](https://github.com/angular/angular/issues/10010)
+* **forms:** verify functions passed into async validators returns Observable or Promise ([#14053](https://github.com/angular/angular/issues/14053)) ([774e1db](https://github.com/angular/angular/commit/774e1db))
+* ngModel should use rxjs/symbol/observable to detect observable ([#14236](https://github.com/angular/angular/issues/14236)) ([7e639aa](https://github.com/angular/angular/commit/7e639aa))
+* **http:** remove dots from jsonp callback name ([#13219](https://github.com/angular/angular/issues/13219)) ([1eece50](https://github.com/angular/angular/commit/1eece50))
+* **i18n:** parse ICU messages while normalizing templates ([#14153](https://github.com/angular/angular/issues/14153)) ([8d4aa82](https://github.com/angular/angular/commit/8d4aa82))
+* **language-service:** do not crash when Angular cannot be located ([#14123](https://github.com/angular/angular/issues/14123)) ([a5b4af0](https://github.com/angular/angular/commit/a5b4af0)), closes [#14122](https://github.com/angular/angular/issues/14122)
+* **platform-browser:** remove style nodes on destroy ([#13744](https://github.com/angular/angular/issues/13744)) ([0614289](https://github.com/angular/angular/commit/0614289)), closes [#11746](https://github.com/angular/angular/issues/11746)
+* **router:** fix CanActivate redirect to the root on initial load ([#13929](https://github.com/angular/angular/issues/13929)) ([a047124](https://github.com/angular/angular/commit/a047124)), closes [#13530](https://github.com/angular/angular/issues/13530)
+* **router:** should find guard provided in a lazy loaded module ([#13989](https://github.com/angular/angular/issues/13989)) ([0965636](https://github.com/angular/angular/commit/0965636)), closes [#12275](https://github.com/angular/angular/issues/12275)
+* **router:** should allow navigation from root component in ngOnInit hook ([#13932](https://github.com/angular/angular/issues/13932)) ([4d2901d](https://github.com/angular/angular/commit/4d2901d)), closes [#13795](https://github.com/angular/angular/issues/13795)
+* **testing:** async/fakeAsync/inject/withModule helpers should pass through context to callback functions ([#13718](https://github.com/angular/angular/issues/13718)) ([70bbdf5](https://github.com/angular/angular/commit/70bbdf5))
+* **upgrade:** detect async downgrade component changes ([#14039](https://github.com/angular/angular/issues/14039)) ([117fa79](https://github.com/angular/angular/commit/117fa79)), closes [#6385](https://github.com/angular/angular/issues/6385) [#6385](https://github.com/angular/angular/issues/6385)
+
+
+
+<a name="4.0.0-beta.5"></a>
+## [4.0.0-beta.5](https://github.com/angular/angular/compare/4.0.0-beta.3...4.0.0-beta.5) (2017-01-25)
+
+
+### Bug Fixes
+
+* **animations:** fix internal jscompiler issue and AOT quoting ([#13798](https://github.com/angular/angular/issues/13798)) ([c2aa981](https://github.com/angular/angular/commit/c2aa981))
+* **common:** support numeric value as discrete cases for NgPlural ([#13876](https://github.com/angular/angular/issues/13876)) ([f364557](https://github.com/angular/angular/commit/f364557))
+* **compiler:** [i18n] XMB/XTB placeholder names can contain only A-Z, 0-9, _n ([d02eab4](https://github.com/angular/angular/commit/d02eab4))
+* **compiler:** fix regexp to support firefox 31 ([#14082](https://github.com/angular/angular/issues/14082)) ([b2f9d56](https://github.com/angular/angular/commit/b2f9d56)), closes [#14029](https://github.com/angular/angular/issues/14029) [#13900](https://github.com/angular/angular/issues/13900)
+* **core:** export animation classes required for Renderer impl ([#14002](https://github.com/angular/angular/issues/14002)) ([83361d8](https://github.com/angular/angular/commit/83361d8)), closes [#14001](https://github.com/angular/angular/issues/14001)
+* **core:** fix not declared variable in view engine ([#14045](https://github.com/angular/angular/issues/14045)) ([d3a3a8e](https://github.com/angular/angular/commit/d3a3a8e))
+* **http:** don't create a blob out of ArrayBuffer when type is application/octet-stream ([#13992](https://github.com/angular/angular/issues/13992)) ([1200cf2](https://github.com/angular/angular/commit/1200cf2)), closes [#13973](https://github.com/angular/angular/issues/13973)
+* **router:** enable loadChildren with function in aot ([#13909](https://github.com/angular/angular/issues/13909)) ([635bf02](https://github.com/angular/angular/commit/635bf02)), closes [#11075](https://github.com/angular/angular/issues/11075)
+* **router:** routerLinkActive should not throw when not initialized ([#13273](https://github.com/angular/angular/issues/13273)) ([e8ea741](https://github.com/angular/angular/commit/e8ea741)), closes [#13270](https://github.com/angular/angular/issues/13270)
+* **upgrade:** detect async downgrade component changes ([#13812](https://github.com/angular/angular/issues/13812)) ([d6382bf](https://github.com/angular/angular/commit/d6382bf)), closes [#6385](https://github.com/angular/angular/issues/6385) [#6385](https://github.com/angular/angular/issues/6385) [#10660](https://github.com/angular/angular/issues/10660) [#12318](https://github.com/angular/angular/issues/12318) [#12034](https://github.com/angular/angular/issues/12034)
+* **upgrade/static:** ensure upgraded injector is initialized early enough ([#14065](https://github.com/angular/angular/issues/14065)) ([6152eb2](https://github.com/angular/angular/commit/6152eb2)), closes [#13811](https://github.com/angular/angular/issues/13811)
+
+
+### Features
+
+* **build:** optionally build an ES2015 distro ([#13471](https://github.com/angular/angular/issues/13471)) ([be6c95a](https://github.com/angular/angular/commit/be6c95a))
+* **core:** add event support to view engine ([0adb97b](https://github.com/angular/angular/commit/0adb97b))
+* **core:** add initial view engine ([#14014](https://github.com/angular/angular/issues/14014)) ([2f87eb5](https://github.com/angular/angular/commit/2f87eb5))
+* **core:** add pure expression support to view engine ([6541737](https://github.com/angular/angular/commit/6541737))
+* **core:** Add type information to injector.get() ([#13785](https://github.com/angular/angular/issues/13785)) ([d169c24](https://github.com/angular/angular/commit/d169c24))
+* **security:** allow calc and gradient functions. ([#13943](https://github.com/angular/angular/issues/13943)) ([e19bf70](https://github.com/angular/angular/commit/e19bf70))
+* **tsc-wrapped:** Support of vinyl like config file was added ([#13987](https://github.com/angular/angular/issues/13987)) ([0c7726d](https://github.com/angular/angular/commit/0c7726d))
+* **upgrade:** Support ng-model in downgraded components ([#10578](https://github.com/angular/angular/issues/10578)) ([e21e9c5](https://github.com/angular/angular/commit/e21e9c5))
+
+### DEPRECATIONS
+
+* `OpaqueToken` is now deprecated, use `InjectionToken<T>` instead.
+* `Injector.get(token: any, notFoundValue?: any): any` is now deprecated
+  use the same method which is now overloaded as
+  `Injector.get<T>(token: Type<T>|InjectionToken<T>, notFoundValue?: T): T;`
+
+### BREAKING CHANGES
+
+* core: - Because `injector.get()` is now parameterize it is possible that code
+  which used to work no longer type checks. Example would be if one
+  injects `Foo` but configures it as `{provide: Foo, useClass: MockFoo}`.
+  The injection instance will be that of `MockFoo` but the type will be
+  `Foo` instead of `any` as in the past. This means that it was possible
+  to call a method on `MockFoo` in the past which now will fail type
+  check. See this example:
+
+```
+class Foo {}
+class MockFoo extends Foo {
+  setupMock();
+}
+
+var PROVIDERS = [
+  {provide: Foo, useClass: MockFoo}
+];
+
+...
+
+function myTest(injector: Injector) {
+  var foo = injector.get(Foo);
+  // This line used to work since `foo` used to be `any` before this
+  // change, it will now be `Foo`, and `Foo` does not have `setUpMock()`.
+  // The fix is to downcast: `injector.get(Foo) as MockFoo`.
+  foo.setUpMock();
+}
+```
+
+
+
+<a name="2.4.5"></a>
+## [2.4.5](https://github.com/angular/angular/compare/2.4.4...2.4.5) (2017-01-25)
+
+
+### Bug Fixes
+
+* **compiler:** [i18n] XMB/XTB placeholder names can contain only A-Z, 0-9, _n ([5492fad](https://github.com/angular/angular/commit/5492fad))
+* **compiler:** fix regexp to support firefox 31 ([#14082](https://github.com/angular/angular/issues/14082)) ([bd2eecb](https://github.com/angular/angular/commit/bd2eecb)), closes [#14029](https://github.com/angular/angular/issues/14029) [#13900](https://github.com/angular/angular/issues/13900)
+* **core:** export animation classes required for Renderer impl ([#14002](https://github.com/angular/angular/issues/14002)) ([fd4f9ac](https://github.com/angular/angular/commit/fd4f9ac)), closes [#14001](https://github.com/angular/angular/issues/14001)
+* **upgrade:** ensure upgraded injector is initialized early enough ([#14065](https://github.com/angular/angular/issues/14065)) ([3b2fb23](https://github.com/angular/angular/commit/3b2fb23)), closes [#13811](https://github.com/angular/angular/issues/13811)
+
+
+
+<a name="4.0.0-beta.4"></a>
+## [4.0.0-beta.4](https://github.com/angular/angular/compare/4.0.0-beta.3...4.0.0-beta.4) (2017-01-19)
+
+
+### Bug Fixes
+
+* **animations:** fix internal jscompiler issue and AOT quoting ([#13798](https://github.com/angular/angular/issues/13798)) ([c2aa981](https://github.com/angular/angular/commit/c2aa981))
+* **common:** support numeric value as discrete cases for NgPlural ([#13876](https://github.com/angular/angular/issues/13876)) ([f364557](https://github.com/angular/angular/commit/f364557))
+* **http:** don't create a blob out of ArrayBuffer when type is application/octet-stream ([#13992](https://github.com/angular/angular/issues/13992)) ([1200cf2](https://github.com/angular/angular/commit/1200cf2)), closes [#13973](https://github.com/angular/angular/issues/13973)
+* **router:** enable loadChildren with function in aot ([#13909](https://github.com/angular/angular/issues/13909)) ([635bf02](https://github.com/angular/angular/commit/635bf02)), closes [#11075](https://github.com/angular/angular/issues/11075)
+* **router:** routerLinkActive should not throw when not initialized ([#13273](https://github.com/angular/angular/issues/13273)) ([e8ea741](https://github.com/angular/angular/commit/e8ea741)), closes [#13270](https://github.com/angular/angular/issues/13270)
+* **security:** allow calc and gradient functions. ([#13943](https://github.com/angular/angular/issues/13943)) ([e19bf70](https://github.com/angular/angular/commit/e19bf70))
+* **upgrade:** detect async downgrade component changes ([#13812](https://github.com/angular/angular/issues/13812)) ([d6382bf](https://github.com/angular/angular/commit/d6382bf)), closes [#6385](https://github.com/angular/angular/issues/6385) [#6385](https://github.com/angular/angular/issues/6385) [#10660](https://github.com/angular/angular/issues/10660) [#12318](https://github.com/angular/angular/issues/12318) [#12034](https://github.com/angular/angular/issues/12034)
+
+
+### Features
+
+* **build:** optionally build an ES2015 distro ([#13471](https://github.com/angular/angular/issues/13471)) ([be6c95a](https://github.com/angular/angular/commit/be6c95a))
+* **core:** Add type information to injector.get() ([#13785](https://github.com/angular/angular/issues/13785)) ([d169c24](https://github.com/angular/angular/commit/d169c24))
+
+
+### BREAKING CHANGES
+
+* core: - Because `injector.get()` is now parameterized it is possible that code
+  which used to work no longer type checks. Example would be if one
+  injects `Foo` but configures it as `{provide: Foo, useClass: MockFoo}`.
+  The injection instance will be that of `MockFoo` but the type will be
+  `Foo` instead of `any` as in the past. This means that it was possible
+  to call a method on `MockFoo` in the past which now will fail type
+  check. See this example:
+
+```
+class Foo {}
+class MockFoo extends Foo {
+  setupMock();
+}
+
+var PROVIDERS = [
+  {provide: Foo, useClass: MockFoo}
+];
+
+...
+
+function myTest(injector: Injector) {
+  var foo = injector.get(Foo);
+  // This line used to work since `foo` used to be `any` before this
+  // change, it will now be `Foo`, and `Foo` does not have `setUpMock()`.
+  // The fix is to downcast: `injector.get(Foo) as MockFoo`.
+  foo.setUpMock();
+}
+```
+
+
+
+<a name="2.4.4"></a>
+## [2.4.4](https://github.com/angular/angular/compare/2.4.3...2.4.4) (2017-01-19)
+
+* **animations:** fix internal jscompiler issue and AOT quoting ([#13798](https://github.com/angular/angular/issues/13798)) ([261fd16](https://github.com/angular/angular/commit/261fd16))
+* **common:** support numeric value as discrete cases for NgPlural ([#13876](https://github.com/angular/angular/issues/13876)) ([3d0b1b8](https://github.com/angular/angular/commit/3d0b1b8))
+* **http:** don't create a blob out of ArrayBuffer when type is application/octet-stream ([#13992](https://github.com/angular/angular/issues/13992)) ([015878a](https://github.com/angular/angular/commit/015878a)), closes [#13973](https://github.com/angular/angular/issues/13973)
+* **router:** enable loadChildren with function in aot ([#13909](https://github.com/angular/angular/issues/13909)) ([2af5862](https://github.com/angular/angular/commit/2af5862)), closes [#11075](https://github.com/angular/angular/issues/11075)
+* **router:** routerLinkActive should not throw when not initialized ([#13273](https://github.com/angular/angular/issues/13273)) ([49c4b0f](https://github.com/angular/angular/commit/49c4b0f)), closes [#13270](https://github.com/angular/angular/issues/13270)
+* **security:** allow calc and gradient functions. ([#13943](https://github.com/angular/angular/issues/13943)) ([bd15110](https://github.com/angular/angular/commit/bd15110))
+* **upgrade:** detect async downgrade component changes ([#13812](https://github.com/angular/angular/issues/13812)) ([2250082](https://github.com/angular/angular/commit/2250082)), closes [#6385](https://github.com/angular/angular/issues/6385) [#6385](https://github.com/angular/angular/issues/6385) [#10660](https://github.com/angular/angular/issues/10660) [#12318](https://github.com/angular/angular/issues/12318) [#12034](https://github.com/angular/angular/issues/12034)
+
+
+
+<a name="4.0.0-beta.3"></a>
+## [4.0.0-beta.3](https://github.com/angular/angular/compare/4.0.0-beta.2...4.0.0-beta.3) (2017-01-11)
+
+
+### Bug Fixes
+
+* **compiler:** avoid evaluating arguments to unknown decorators ([d061adc](https://github.com/angular/angular/commit/d061adc)), closes [#13605](https://github.com/angular/angular/issues/13605)
+* **compiler:** fix template binding parsing (`*directive="-..."`) ([e5c6bb4](https://github.com/angular/angular/commit/e5c6bb4)), closes [#13800](https://github.com/angular/angular/issues/13800)
+* **compiler-cli:** add support for more than 2 levels of nested lazy routes ([5d9cbd7](https://github.com/angular/angular/commit/5d9cbd7)), closes [angular/angular-cli#3663](https://github.com/angular/angular-cli/issues/3663)
+* **compiler-cli:** avoid handling functions in loadChildren as lazy load routes paths ([aeed737](https://github.com/angular/angular/commit/aeed737)), closes [angular/angular-cli#3204](https://github.com/angular/angular-cli/issues/3204)
+* **core:** Add type information to  differs ([8c7e93b](https://github.com/angular/angular/commit/8c7e93b)), closes [#13382](https://github.com/angular/angular/issues/13382)
+* **i18n:** translate attributes inside elements marked for translation ([424e6c4](https://github.com/angular/angular/commit/424e6c4)), closes [#13796](https://github.com/angular/angular/issues/13796) [#13814](https://github.com/angular/angular/issues/13814)
+* **router:** RouterLink mirrors input `target` as attribute ([d9a22da](https://github.com/angular/angular/commit/d9a22da)), closes [#13837](https://github.com/angular/angular/issues/13837)
+* **router:** throw an error when navigate to null/undefined path ([46cb04d](https://github.com/angular/angular/commit/46cb04d)), closes [#10560](https://github.com/angular/angular/issues/10560) [#13384](https://github.com/angular/angular/issues/13384)
+* **router:** fix checking for object intersection ([6d29fae](https://github.com/angular/angular/commit/6d29fae))
+
+
+### Features
+
+* **animations:** expose the `element` value within transition events ([4bae4b3](https://github.com/angular/angular/commit/4bae4b3))
+* **animations:** expose the `triggerName` within the transition event ([3f67ab0](https://github.com/angular/angular/commit/3f67ab0)), closes [#13600](https://github.com/angular/angular/issues/13600)
+* **animations:** support function types in transitions ([9211a22](https://github.com/angular/angular/commit/9211a22)), closes [#13538](https://github.com/angular/angular/issues/13538) [#13537](https://github.com/angular/angular/issues/13537)
+* **language-service:** support TS2.2 plugin model ([99aa49a](https://github.com/angular/angular/commit/99aa49a))
+* **NgComponentOutlet:** add NgComponentOutlet directive ([8578682](https://github.com/angular/angular/commit/8578682)), closes [#11168](https://github.com/angular/angular/issues/11168)
+* **NgTemplateOutlet:** Make NgTemplateOutlet compatible with * syntax ([c0178de](https://github.com/angular/angular/commit/c0178de))
+* **router:** call resolver when upstream params change ([#12942](https://github.com/angular/angular/issues/12942)) ([d4d3782](https://github.com/angular/angular/commit/d4d3782))
+
+
+### BREAKING CHANGES
+
+* core: - `IterableChangeRecord` is now an interface and parameterized on `<V>`.
+  This should not be an issue unless your code does
+  `new IterableChangeRecord` which it should not have a reason to do.
+- `KeyValueChangeRecord` is now an interface and parameterized on `<V>`.
+  This should not be an issue unless your code does
+  `new KeyValueChangeRecord` which it should not have a reason to do.
+
+### DEPRECATION
+
+* Deprecate `ngOutletContext`. Use `ngTemplateOutletContext` instead.
+* `CollectionChangeRecord` is renamed to `IterableChangeRecord`.
+  `CollectionChangeRecord` is aliased to `IterableChangeRecord` and is
+  marked as `@deprecated`. It will be removed in `v6.x.x`.
+* Deprecate `DefaultIterableDiffer` as it is private class which
+  was erroneously exposed.
+* Deprecate `KeyValueDiffers#factories` as it is private field which
+  was erroneously exposed.
+* Deprecate `IterableDiffers#factories` as it is private field which
+  was erroneously exposed.
+
+
+
+<a name="2.4.3"></a>
+## [2.4.3](https://github.com/angular/angular/compare/2.4.2...2.4.3) (2017-01-11)
+
+
+### Bug Fixes
+
+* **compiler:** avoid evaluating arguments to unknown decorators ([5e9d3db](https://github.com/angular/angular/commit/5e9d3db)), closes [#13605](https://github.com/angular/angular/issues/13605)
+* **compiler:** fix template binding parsing (`*directive="-..."`) ([7dc12b9](https://github.com/angular/angular/commit/7dc12b9)), closes [#13800](https://github.com/angular/angular/issues/13800)
+* **compiler-cli:** add support for more than 2 levels of nested lazy routes ([6164eb2](https://github.com/angular/angular/commit/6164eb2)), closes [angular/angular-cli#3663](https://github.com/angular/angular-cli/issues/3663)
+* **compiler-cli:** avoid handling functions in loadChildren as lazy load routes paths ([313683f](https://github.com/angular/angular/commit/313683f)), closes [angular/angular-cli#3204](https://github.com/angular/angular-cli/issues/3204)
+* **i18n:** translate attributes inside elements marked for translation ([d7f2a3c](https://github.com/angular/angular/commit/d7f2a3c))
+* **router:** RouterLink mirrors input `target` as attribute ([1c82b58](https://github.com/angular/angular/commit/1c82b58)), closes [#13837](https://github.com/angular/angular/issues/13837)
+* **router:** throw an error when navigate to null/undefined path ([61ba223](https://github.com/angular/angular/commit/61ba223)), closes [#10560](https://github.com/angular/angular/issues/10560) [#13384](https://github.com/angular/angular/issues/13384)
+* **router:** fix checking for object intersection ([1692265](https://github.com/angular/angular/commit/1692265))
+
+
+
+<a name="2.4.2"></a>
+## [2.4.2](https://github.com/angular/angular/compare/2.4.1...2.4.2) (2017-01-06)
+
+
+### Bug Fixes
+
+* **common:** add link to trackBy docs from the error message ([#13634](https://github.com/angular/angular/issues/13634)) ([f723437](https://github.com/angular/angular/commit/f723437))
+* **common:** do not override locale provided on bootstrap ([#13654](https://github.com/angular/angular/issues/13654)) ([5f49c3e](https://github.com/angular/angular/commit/5f49c3e)), closes [#13607](https://github.com/angular/angular/issues/13607)
+* **common:** allow null/undefined values for `NgForTrackBy` ([6be55cc](https://github.com/angular/angular/commit/6be55cc)), closes [#13641](https://github.com/angular/angular/issues/13641)
+* **compiler:** don’t throw when using `ANALYZE_FOR_ENTRY_COMPONENTS` with user classes ([#13679](https://github.com/angular/angular/issues/13679)) ([230e33f](https://github.com/angular/angular/commit/230e33f)), closes [#13565](https://github.com/angular/angular/issues/13565)
+* **compiler:** query `<template>` elements before their children. ([#13677](https://github.com/angular/angular/issues/13677)) ([1cd73c7](https://github.com/angular/angular/commit/1cd73c7)), closes [#13118](https://github.com/angular/angular/issues/13118) [#13167](https://github.com/angular/angular/issues/13167)
+* **compiler:** allow "." in attribute selectors ([#13653](https://github.com/angular/angular/issues/13653)) ([29ffdfd](https://github.com/angular/angular/commit/29ffdfd)), closes [#13645](https://github.com/angular/angular/issues/13645) [#13982](https://github.com/angular/angular/issues/13982)
+* **core:** animations no longer silently exits if the element is not apart of the DOM ([#13763](https://github.com/angular/angular/issues/13763)) ([f1cde43](https://github.com/angular/angular/commit/f1cde43))
+* **core:** animations should blend in all previously transitioned styles into next animation if interrupted ([#13148](https://github.com/angular/angular/issues/13148)) ([b245b92](https://github.com/angular/angular/commit/b245b92))
+* **core:** remove reference to "Angular 2" in dev mode warning ([#13751](https://github.com/angular/angular/issues/13751)) ([21f5f05](https://github.com/angular/angular/commit/21f5f05))
+* **core/testing:** improve misleading error message when don't call compileComponents ([#13543](https://github.com/angular/angular/issues/13543)) ([0e7f9f0](https://github.com/angular/angular/commit/0e7f9f0)), closes [#11301](https://github.com/angular/angular/issues/11301)
+* **forms:** Validators.required properly validate arrays ([#13362](https://github.com/angular/angular/issues/13362)) ([17c5fa9](https://github.com/angular/angular/commit/17c5fa9)), closes [#12274](https://github.com/angular/angular/issues/12274)
+* **language-service:** support TypeScript 2.1 ([#13655](https://github.com/angular/angular/issues/13655)) ([56b4296](https://github.com/angular/angular/commit/56b4296))
+* **router:** fix lazy loaded module with wildcard route ([#13649](https://github.com/angular/angular/issues/13649)) ([5754ecc](https://github.com/angular/angular/commit/5754ecc)), closes [#12955](https://github.com/angular/angular/issues/12955)
+* **router:** routerLink support of null ([#13380](https://github.com/angular/angular/issues/13380)) ([018865e](https://github.com/angular/angular/commit/018865e)), closes [#6971](https://github.com/angular/angular/issues/6971)
+* **router:** update route snapshot before emit new values ([#13558](https://github.com/angular/angular/issues/13558)) ([9f6a647](https://github.com/angular/angular/commit/9f6a647)), closes [#12912](https://github.com/angular/angular/issues/12912)
+* **upgrade:** fix/improve support for lifecycle hooks ([#13020](https://github.com/angular/angular/issues/13020)) ([21942a8](https://github.com/angular/angular/commit/21942a8))
+
+
+
+<a name="4.0.0-beta.2"></a>
+## [4.0.0-beta.2](https://github.com/angular/angular/compare/4.0.0-beta.1...4.0.0-beta.2) (2017-01-06)
+
+
+### Features
+
+* **compiler:** generate less code for bindings to DOM elements ([db49d42](https://github.com/angular/angular/commit/db49d42))
+* **compiler:** generate proper reexports in `.ngfactory.ts` files to not need transitive deps for compiling `.ngfactory.ts` files. ([#13524](https://github.com/angular/angular/issues/13524)) ([9c69703](https://github.com/angular/angular/commit/9c69703)), closes [#12787](https://github.com/angular/angular/issues/12787)
+* **router:** add an extra argument to CanDeactivate interface ([#13560](https://github.com/angular/angular/issues/13560)) ([69fa3bb](https://github.com/angular/angular/commit/69fa3bb)), closes [#9853](https://github.com/angular/angular/issues/9853)
+
+
+### Bug Fixes
+
+* **compiler:** improve error message for undefined providers ([#13546](https://github.com/angular/angular/issues/13546)) ([6b02b80](https://github.com/angular/angular/commit/6b02b80)), closes [#10835](https://github.com/angular/angular/issues/10835)
+* **compiler:** improve the error when template is not a string ([2c0c86e](https://github.com/angular/angular/commit/2c0c86e)), closes [#8708](https://github.com/angular/angular/issues/8708) [#13377](https://github.com/angular/angular/issues/13377)
+* **compiler:** throw an error for invalid provider ([#13544](https://github.com/angular/angular/issues/13544)) ([445ed43](https://github.com/angular/angular/commit/445ed43)), closes [#8870](https://github.com/angular/angular/issues/8870)
+* **i18n:** parse ICU messages while normalizing templates ([e74d8aa](https://github.com/angular/angular/commit/e74d8aa))
+
+Note: 4.0.0-beta.2 release also contains all the changes present in the 2.4.2 release.
+
+
+### BREAKING CHANGES
+
+* **core**: `SimpleChange` now takes an additional argument that defines whether this is the first
+change or not. This is a low profile API and we don't expect anyone to be affected by this change.
+If you are impacted by this change please file an issue. ([465516b](https://github.com/angular/angular/commit/465516b))
+
+
+
+
+<a name="4.0.0-beta.1"></a>
+## [4.0.0-beta.1](https://github.com/angular/angular/compare/2.4.0-marker...4.0.0-beta.1) (2016-12-22)
+
+### Features
+
+* **upgrade:** support the `$doCheck()` lifecycle hook in `UpgradeComponent` ([#13015](https://github.com/angular/angular/issues/13015)) ([9da4c25](https://github.com/angular/angular/commit/9da4c25))
+
+Note: 4.0.0-beta.1 release also contains all the changes present in the 2.4.0 and the 2.4.1 releases.
+
+<a name="2.4.1"></a>
+## [2.4.1](https://github.com/angular/angular/compare/2.4.0...2.4.1) (2016-12-21)
+
+### Bug Fixes
+
+* **animations:** always quote string map key values in AOT code ([#13602](https://github.com/angular/angular/issues/13602)) ([6a5e46c](https://github.com/angular/angular/commit/6a5e46c))
+* **animations:** always recover from a failed animation step ([#13604](https://github.com/angular/angular/issues/13604)) ([d788c67](https://github.com/angular/angular/commit/d788c67))
+* **compiler:** ignore `@import` in comments ([#13368](https://github.com/angular/angular/issues/13368)) ([6316e5d](https://github.com/angular/angular/commit/6316e5d)), closes [#12196](https://github.com/angular/angular/issues/12196)
+* **core:** improve error message when component factory cannot be found ([#13541](https://github.com/angular/angular/issues/13541)) ([b9e979e](https://github.com/angular/angular/commit/b9e979e)), closes [#12678](https://github.com/angular/angular/issues/12678)
+* **router:** should reset location if a navigation by location is successful ([#13545](https://github.com/angular/angular/issues/13545)) ([a38f14b](https://github.com/angular/angular/commit/a38f14b)), closes [#13491](https://github.com/angular/angular/issues/13491)
+
+
+
+<a name="2.4.0"></a>
+# [2.4.0 stability-interjection](https://github.com/angular/angular/compare/2.3.1...2.4.0) (2016-12-20)
+
+
+### Bug Fixes
+
+* **animations:** allow players to be destroyed before initialized ([#13346](https://github.com/angular/angular/issues/13346)) ([b36f4bc](https://github.com/angular/angular/commit/b36f4bc)), closes [#13293](https://github.com/angular/angular/issues/13293)
+* **build:** use bash string comparison operator ([#13502](https://github.com/angular/angular/issues/13502)) ([50afbe0](https://github.com/angular/angular/commit/50afbe0))
+* **compiler:** do not lex `}}` when interpolation is disabled ([#13531](https://github.com/angular/angular/issues/13531)) ([9b87bb6](https://github.com/angular/angular/commit/9b87bb6)), closes [#13525](https://github.com/angular/angular/issues/13525)
+* **compiler-cli:** produce metadata for .d.ts files without metadata ([#13526](https://github.com/angular/angular/issues/13526)) ([debb0c9](https://github.com/angular/angular/commit/debb0c9)), closes [#13307](https://github.com/angular/angular/issues/13307) [#13473](https://github.com/angular/angular/issues/13473) [#13521](https://github.com/angular/angular/issues/13521)
+* **i18n:** add a default example to xmb placeholders ([#13507](https://github.com/angular/angular/issues/13507)) ([3f17841](https://github.com/angular/angular/commit/3f17841))
+* **upgrade:** fix `registerForNg1Tests` ([#13522](https://github.com/angular/angular/issues/13522)) ([c26c24c](https://github.com/angular/angular/commit/c26c24c))
+
+
+### Features
+
+* update to `rxjs@5.0.1` and unpin the rxjs peerDeps via `^5.0.1` ([#13572](https://github.com/angular/angular/issues/13572)) ([8d5da1e](https://github.com/angular/angular/commit/8d5da1e)), closes [#13561](https://github.com/angular/angular/issues/13561) [#13478](https://github.com/angular/angular/issues/13478)
+
+
+<a name="4.0.0-beta.0"></a>
+## [4.0.0-beta.0](https://github.com/angular/angular/compare/2.3.0...4.0.0-beta.0) (2016-12-15)
+
+
+### Features
+
+* **common:** add a `titlecase` pipe ([#13324](https://github.com/angular/angular/issues/13324)) ([61d7c1e](https://github.com/angular/angular/commit/61d7c1e)), closes [#11436](https://github.com/angular/angular/issues/11436)
+* **common:** export NgLocaleLocalization ([#13367](https://github.com/angular/angular/issues/13367)) ([56dce0e](https://github.com/angular/angular/commit/56dce0e)), closes [#11921](https://github.com/angular/angular/issues/11921)
+* **compiler:** add id property to i18nMessage ([6dd5201](https://github.com/angular/angular/commit/6dd5201))
+* **compiler:** digest methods return i18nMessage id if sets ([562f7a2](https://github.com/angular/angular/commit/562f7a2))
+* **forms:** add novalidate by default ([#13092](https://github.com/angular/angular/issues/13092)) ([4c35be3](https://github.com/angular/angular/commit/4c35be3))
+* **http:** simplify URLSearchParams creation ([#13338](https://github.com/angular/angular/issues/13338)) ([90c2235](https://github.com/angular/angular/commit/90c2235)), closes [#8858](https://github.com/angular/angular/issues/8858)
+* **language-service:** warn when a method isn't called in an event ([#13437](https://github.com/angular/angular/issues/13437)) ([9ec0a4e](https://github.com/angular/angular/commit/9ec0a4e))
+* **platform browser:** introduce Meta service ([#12322](https://github.com/angular/angular/issues/12322)) ([72361fb](https://github.com/angular/angular/commit/72361fb))
+* **router:** routerLink add tabindex attribute ([#13094](https://github.com/angular/angular/issues/13094)) ([a006c14](https://github.com/angular/angular/commit/a006c14)), closes [#10895](https://github.com/angular/angular/issues/10895)
+* **testing:** add overrideTemplate method ([#13372](https://github.com/angular/angular/issues/13372)) ([169ed82](https://github.com/angular/angular/commit/169ed82)), closes [#10685](https://github.com/angular/angular/issues/10685)
+* **common** ngIf now supports else; saves condition to local var ([b4db73d](https://github.com/angular/angular/commit/b4db73d)), closes [#13061](https://github.com/angular/angular/issues/13061) [#13297](https://github.com/angular/angular/issues/13297)
+
+Note: 4.0.0-beta.0 release also contains all the changes present in the 2.3.1 release.
+
+<a name="2.3.1"></a>
+## [2.3.1](https://github.com/angular/angular/compare/2.3.0...2.3.1) (2016-12-15)
+
+
+### Bug Fixes
+
+* **animations:** always cleanup players after they have finished internally ([#13334](https://github.com/angular/angular/issues/13334)) ([a26e054](https://github.com/angular/angular/commit/a26e054)), closes [#13333](https://github.com/angular/angular/issues/13333)
+* **animations:** throw errors and normalize offset beyond the range of [0,1] ([6557bc3](https://github.com/angular/angular/commit/6557bc3)), closes [#13348](https://github.com/angular/angular/issues/13348) [#13440](https://github.com/angular/angular/issues/13440)
+* **compiler:** emit quoted object literal keys if the source is quoted ([ecfad46](https://github.com/angular/angular/commit/ecfad46)), closes [#13249](https://github.com/angular/angular/issues/13249) [#13356](https://github.com/angular/angular/issues/13356)
+* **compiler:** fix merge error in compiler_host ([69b52eb](https://github.com/angular/angular/commit/69b52eb))
+* **compiler:** fix PR 13322 ([#13331](https://github.com/angular/angular/issues/13331)) ([79728b4](https://github.com/angular/angular/commit/79728b4))
+* **compiler:** fix simplify a reference without a name ([1c279b3](https://github.com/angular/angular/commit/1c279b3)), closes [#13470](https://github.com/angular/angular/issues/13470)
+* **compiler:** fix transpiled ES5 code ([#13322](https://github.com/angular/angular/issues/13322)) ([6c1d790](https://github.com/angular/angular/commit/6c1d790)), closes [#13301](https://github.com/angular/angular/issues/13301)
+* **compiler:** generated CSS files suffixed with ngstyle. ([#13353](https://github.com/angular/angular/issues/13353)) ([c8a9b70](https://github.com/angular/angular/commit/c8a9b70)), closes [#13141](https://github.com/angular/angular/issues/13141)
+* **compiler:** make sure provider values with `name` property don’t break. ([efa2d80](https://github.com/angular/angular/commit/efa2d80)), closes [#13394](https://github.com/angular/angular/issues/13394) [#13445](https://github.com/angular/angular/issues/13445)
+* **compiler:** narrow the span reported for invalid pipes ([307d305](https://github.com/angular/angular/commit/307d305)), closes [#13326](https://github.com/angular/angular/issues/13326) [#13411](https://github.com/angular/angular/issues/13411)
+* **compiler:** propagate exports when upgrading metadata to v2 ([f6ef7d6](https://github.com/angular/angular/commit/f6ef7d6))
+* **compiler:** resolver should merge host bindings and listeners ([#13474](https://github.com/angular/angular/issues/13474)) ([6aeaca3](https://github.com/angular/angular/commit/6aeaca3)), closes [#13327](https://github.com/angular/angular/issues/13327)
+* **compiler:** support dotted property binding ([8db184d](https://github.com/angular/angular/commit/8db184d)), closes [angular/flex-layout#34](https://github.com/angular/flex-layout/issues/34)
+* **compiler:** update to metadata version 3 ([#13464](https://github.com/angular/angular/issues/13464)) ([b9b557c](https://github.com/angular/angular/commit/b9b557c))
+* **core:** detectChanges() doesn't work on detached instance ([4d6ac9d](https://github.com/angular/angular/commit/4d6ac9d)), closes [#13426](https://github.com/angular/angular/issues/13426) [#13472](https://github.com/angular/angular/issues/13472)
+* **core:** properly destroy embedded Views attatched to ApplicationRef ([#13459](https://github.com/angular/angular/issues/13459)) ([d40bbf4](https://github.com/angular/angular/commit/d40bbf4)), closes [#13062](https://github.com/angular/angular/issues/13062)
+* **core:** remove logError from logGroup ([#12925](https://github.com/angular/angular/issues/12925)) ([5fab871](https://github.com/angular/angular/commit/5fab871))
+* **forms:** ensure `select[multiple]` retains selections ([b3dcff0](https://github.com/angular/angular/commit/b3dcff0)), closes [#12527](https://github.com/angular/angular/issues/12527) [#12654](https://github.com/angular/angular/issues/12654)
+* **forms:** fix Validators.min/maxLength with FormArray ([#13095](https://github.com/angular/angular/issues/13095)) ([7383e4a](https://github.com/angular/angular/commit/7383e4a)), closes [#13089](https://github.com/angular/angular/issues/13089)
+* **forms:** introduce checkbox required validator ([124267c](https://github.com/angular/angular/commit/124267c)), closes [#11459](https://github.com/angular/angular/issues/11459) [#13364](https://github.com/angular/angular/issues/13364)
+* **http:** check response body text against undefined ([#13017](https://github.com/angular/angular/issues/13017)) ([f106a18](https://github.com/angular/angular/commit/f106a18))
+* **http:** create a copy of headers when merge options ([#13365](https://github.com/angular/angular/issues/13365)) ([65c9b5b](https://github.com/angular/angular/commit/65c9b5b)), closes [#11980](https://github.com/angular/angular/issues/11980)
+* **language-service:** correctly type `undefined` ([0a7364f](https://github.com/angular/angular/commit/0a7364f)), closes [#13412](https://github.com/angular/angular/issues/13412) [#13414](https://github.com/angular/angular/issues/13414)
+* **compiler**: better error when directive not listed in NgModule.declarations ([b0cd514](https://github.com/angular/angular/commit/b0cd514))
+* **language-service:** treat string unions as strings ([#13406](https://github.com/angular/angular/issues/13406)) ([14dd2b3](https://github.com/angular/angular/commit/14dd2b3)), closes [#13403](https://github.com/angular/angular/issues/13403)
+* **router:** add support for query params with multiple values ([e4d5a5f](https://github.com/angular/angular/commit/e4d5a5f)), closes [#11373](https://github.com/angular/angular/issues/11373)
+* **router:** Use T type in Resolve interface ([#13242](https://github.com/angular/angular/issues/13242)) ([5ee8155](https://github.com/angular/angular/commit/5ee8155))
+* **selector:** SelectorMatcher match elements with :not selector ([#12977](https://github.com/angular/angular/issues/12977)) ([392c9ac](https://github.com/angular/angular/commit/392c9ac))
+* **tsc-wrapped:** generate metadata for exports without module specifier ([cd03c77](https://github.com/angular/angular/commit/cd03c77)), closes [#13327](https://github.com/angular/angular/issues/13327)
+* **upgrade:** fix downgrade content projection and injector inheritance ([86c5098](https://github.com/angular/angular/commit/86c5098)), closes [#6629](https://github.com/angular/angular/issues/6629) [#7727](https://github.com/angular/angular/issues/7727) [#8729](https://github.com/angular/angular/issues/8729) [#9643](https://github.com/angular/angular/issues/9643) [#9649](https://github.com/angular/angular/issues/9649) [#12675](https://github.com/angular/angular/issues/12675)
+* **upgrade:** enable AngularJS unit testing of upgrade module ([2fc0560](https://github.com/angular/angular/commit/2fc0560)), closes [#5462](https://github.com/angular/angular/issues/5462) [#12675](https://github.com/angular/angular/issues/12675)
+
+
+### Performance Improvements
+
+* **animations:** always run the animation queue outside of zones ([e2622ad](https://github.com/angular/angular/commit/e2622ad)), closes [#13440](https://github.com/angular/angular/issues/13440)
+
+### Note ###
+
+Due to regression in the 2.3.0 release that was fixed by [#13464](https://github.com/angular/angular/pull/13464),
+components that have been compiled using 2.3.0 and published to npm will need to be recompiled and republished.
+
+The >=2.3.1 compiler will issue is the following error if it encounters components compiled with 2.3.0:
+`Unsupported metadata version 2 for module ${module}. This module should be compiled with a newer version of ngc`.
+
+We are adding more tests to our test suite to catch these kinds of problems before we cut a release.
+
+<a name="2.3.0"></a>
+# [2.3.0](https://github.com/angular/angular/compare/2.3.0-rc.0...2.3.0) (2016-12-07)
+
+
+### Bug Fixes
+
+* **common:** make sure the plural category exists ([#13169](https://github.com/angular/angular/issues/13169)) ([82c81cd](https://github.com/angular/angular/commit/82c81cd)), closes [#12379](https://github.com/angular/angular/issues/12379)
+* **compiler:** include the summaries of reexported modules / directives / pipes ([#13196](https://github.com/angular/angular/issues/13196)) ([75d1617](https://github.com/angular/angular/commit/75d1617))
+* **compiler:** serialize any `StaticSymbol` correctly, not matter in which context ([5614c4f](https://github.com/angular/angular/commit/5614c4f))
+* **compiler:** short-circuit expressions with an index ([#13263](https://github.com/angular/angular/issues/13263)) ([f31c947](https://github.com/angular/angular/commit/f31c947)), closes [#13254](https://github.com/angular/angular/issues/13254)
+* **core:** display framework version on bootstrapped component ([#13252](https://github.com/angular/angular/issues/13252)) ([16efb13](https://github.com/angular/angular/commit/16efb13))
+* **facade:** cache original format string ([#12764](https://github.com/angular/angular/issues/12764)) ([a132287](https://github.com/angular/angular/commit/a132287))
+* **http:** set the default Accept header ([#12989](https://github.com/angular/angular/issues/12989)) ([986abbe](https://github.com/angular/angular/commit/986abbe)), closes [#6354](https://github.com/angular/angular/issues/6354)
+* **language-service:** avoid throwing for invalid class declarations ([#13257](https://github.com/angular/angular/issues/13257)) ([93556a5](https://github.com/angular/angular/commit/93556a5)), closes [#13253](https://github.com/angular/angular/issues/13253)
+* **language-service:** do not throw for invalid metadata ([#13261](https://github.com/angular/angular/issues/13261)) ([4a09c81](https://github.com/angular/angular/commit/4a09c81)), closes [#13255](https://github.com/angular/angular/issues/13255)
+* **language-service:** remove incompletely used parameter from `createLanguageServiceFromTypescript()` ([#13278](https://github.com/angular/angular/issues/13278)) ([25c2141](https://github.com/angular/angular/commit/25c2141)), closes [#13277](https://github.com/angular/angular/issues/13277)
+* **language-service:** update to use `CompilerHost` from compiler-cli ([#13189](https://github.com/angular/angular/issues/13189)) ([3ff6554](https://github.com/angular/angular/commit/3ff6554))
+* **router:** allow specifying a matcher without specifying a path ([bbb7a39](https://github.com/angular/angular/commit/bbb7a39)), closes [#12972](https://github.com/angular/angular/issues/12972)
+* **router:** fix replaceUrl on RouterLink directives ([349ad75](https://github.com/angular/angular/commit/349ad75))
+* **router:** fix skipLocationChanges on RouterLink directives ([f562cbf](https://github.com/angular/angular/commit/f562cbf)), closes [#13156](https://github.com/angular/angular/issues/13156)
+* **router:** make setUpLocationChangeListener idempotent ([25e5b2f](https://github.com/angular/angular/commit/25e5b2f))
+* **router:** runs guards every time when unsuccessfully navigating to the same url over and over again ([#13209](https://github.com/angular/angular/issues/13209)) ([d46b8de](https://github.com/angular/angular/commit/d46b8de))
+* **router:** throw a better error message when AngularJS is not bootstraped ([c767df0](https://github.com/angular/angular/commit/c767df0))
+* **router:** validate nested routes ([#13224](https://github.com/angular/angular/issues/13224)) ([2893c2c](https://github.com/angular/angular/commit/2893c2c)), closes [#12827](https://github.com/angular/angular/issues/12827)
+* **tsc-wrapped:** have UserError display the actual error ([393c100](https://github.com/angular/angular/commit/393c100))
+
+
+### Features
+
+* **compiler:** read and write `.ngsummary.json` files ([614a35d](https://github.com/angular/angular/commit/614a35d)), closes [#12787](https://github.com/angular/angular/issues/12787)
+
+
+
+<a name="2.3.0-rc.0"></a>
+# [2.3.0-rc.0](https://github.com/angular/angular/compare/2.3.0-beta.0...2.3.0-rc.0) (2016-11-30)
+
+
+### Bug Fixes
+
+* **animations:** blend in all previously transitioned styles into next animation if interrupted ([#13014](https://github.com/angular/angular/issues/13014)) ([ef96763](https://github.com/angular/angular/commit/ef96763)), closes [#13013](https://github.com/angular/angular/issues/13013)
+* **benchmarks:** use sanitized style values ([#12943](https://github.com/angular/angular/issues/12943)) ([fc5ac1e](https://github.com/angular/angular/commit/fc5ac1e))
+* **build:** update versions of umd bundles ([#13038](https://github.com/angular/angular/issues/13038)) ([86ffa88](https://github.com/angular/angular/commit/86ffa88)), closes [#13037](https://github.com/angular/angular/issues/13037)
+* **changelog:** replace beta.1 with beta.0 ([#12961](https://github.com/angular/angular/issues/12961)) ([07a986d](https://github.com/angular/angular/commit/07a986d))
+* **ci:** pin version of npm on CircleCI ([#12954](https://github.com/angular/angular/issues/12954)) ([a3884db](https://github.com/angular/angular/commit/a3884db))
+* **closure:** quote date pattern aliases ([#13012](https://github.com/angular/angular/issues/13012)) ([7dcca30](https://github.com/angular/angular/commit/7dcca30))
+* **common:** update DatePipe to allow closure compilation ([b2b7219](https://github.com/angular/angular/commit/b2b7219))
+* **compiler:** correctly evaluate references to static functions ([#13133](https://github.com/angular/angular/issues/13133)) ([627282d](https://github.com/angular/angular/commit/627282d))
+* **compiler:** fix performance regression caused by 5b0f9e2 ([43c0e9a](https://github.com/angular/angular/commit/43c0e9a)), closes [#13146](https://github.com/angular/angular/issues/13146)
+* **compiler:** fix versions of `@angular/tsc-wrapped` ([bccf0e6](https://github.com/angular/angular/commit/bccf0e6))
+* **compiler-cli:** fix paths in source maps to be relative ([2a3ca7b](https://github.com/angular/angular/commit/2a3ca7b)), closes [#13040](https://github.com/angular/angular/issues/13040)
+* **compiler-cli:** pin the version of `tsc-wrapped` ([966bcba](https://github.com/angular/angular/commit/966bcba))
+* **language-service:** harden against partial normalization of directives ([2975d89](https://github.com/angular/angular/commit/2975d89))
+* **core:** shrinkwrap was out of date with packages. ([e45b7ff](https://github.com/angular/angular/commit/e45b7ff))
+* **language-service:** make link check pass ([7194fc2](https://github.com/angular/angular/commit/7194fc2))
+* **router:** guards restore an incorrect url when used with skipLocationChange ([ad20d7d](https://github.com/angular/angular/commit/ad20d7d)), closes [#12825](https://github.com/angular/angular/issues/12825)
+* **router:** support redirects to named outlets ([602522b](https://github.com/angular/angular/commit/602522b)), closes [#12740](https://github.com/angular/angular/issues/12740) [#9921](https://github.com/angular/angular/issues/9921)
+* **tsc-wrapped:** set correct version number ([897555c](https://github.com/angular/angular/commit/897555c))
+* **tsc-wrapped:** still emit version 1 metadata to allow use of new components in old setups ([bc69c74](https://github.com/angular/angular/commit/bc69c74))
+* **upgrade:** call ng1 lifecycle hooks ([#12875](https://github.com/angular/angular/issues/12875)) ([1ef4696](https://github.com/angular/angular/commit/1ef4696))
+* **version:** take all of version string after patch version ([f275f36](https://github.com/angular/angular/commit/f275f36))
+
+
+### Features
+
+* **core:** update RxJS peer dependency to 5.0.0-rc.4 Please see [this gist](https://gist.github.com/robwormald/19dea0c70a6e01aadced6731aed4f9f7) if you depend on the `cache` operator ([2d6a003](https://github.com/angular/angular/commit/2d6a003)), closes [#13125](https://github.com/angular/angular/issues/13125)
+* **core:** upgrade zone.js to v0.7.1 ([c4bbafc](https://github.com/angular/angular/commit/c4bbafc))
+* **build:** record angular version in the dom ([#13164](https://github.com/angular/angular/issues/13164)) ([e628b66](https://github.com/angular/angular/commit/e628b66))
+* **core:** expose destroy() method on ViewRef ([808275a](https://github.com/angular/angular/commit/808275a))
+* **core:** properly support inheritance ([f5c8e09](https://github.com/angular/angular/commit/f5c8e09)), closes [#11606](https://github.com/angular/angular/issues/11606) [#12892](https://github.com/angular/angular/issues/12892)
+* **language-service:** add services to support editors ([#12987](https://github.com/angular/angular/issues/12987)) ([519a324](https://github.com/angular/angular/commit/519a324))
+* **router:** add support for custom route reuse strategies ([42cf06f](https://github.com/angular/angular/commit/42cf06f))
+* **tools:** allow disabling annotation lowering ([c1a62e2](https://github.com/angular/angular/commit/c1a62e2))
+
+
+
+<a name="2.2.4"></a>
+## [2.2.4](https://github.com/angular/angular/compare/2.2.3...2.2.4) (2016-11-30)
+
+
+### Bug Fixes
+
+* **common:** update DatePipe to allow closure compilation ([eba53fd](https://github.com/angular/angular/commit/eba53fd))
+* **compiler:** fix performance regression caused by 5b0f9e2 ([ee2d6e5](https://github.com/angular/angular/commit/ee2d6e5)), closes [#13146](https://github.com/angular/angular/issues/13146)
+* **compiler-cli:** fix paths in source maps to be relative ([eb173bc](https://github.com/angular/angular/commit/eb173bc)), closes [#13040](https://github.com/angular/angular/issues/13040)
+
+
+
+<a name="2.2.3"></a>
+## [2.2.3](https://github.com/angular/angular/compare/2.2.2...2.2.3) (2016-11-23)
+
+### Bug Fixes
+
+* **compiler:** Revert: fix versions of `@angular/tsc-wrapped` ([015ca47](https://github.com/angular/angular/commit/015ca47))
+* **animations:** Revert: blend in all previously transitioned styles into next animation if interrupted ([c12e56e](https://github.com/angular/angular/commit/c12e56e))
+
+
+
+<a name="2.2.2"></a>
+## [2.2.2](https://github.com/angular/angular/compare/2.2.1...2.2.2) (2016-11-22)
+
+
+### Bug Fixes
+
+* **animations:** blend in all previously transitioned styles into next animation if interrupted ([#13014](https://github.com/angular/angular/issues/13014)) ([ea4fc9b](https://github.com/angular/angular/commit/ea4fc9b)), closes [#13013](https://github.com/angular/angular/issues/13013)
+* **benchmarks:** use sanitized style values ([#12943](https://github.com/angular/angular/issues/12943)) ([33a7902](https://github.com/angular/angular/commit/33a7902))
+* **closure:** quote date pattern aliases ([#13012](https://github.com/angular/angular/issues/13012)) ([0956ace](https://github.com/angular/angular/commit/0956ace))
+* **compiler:** fix versions of `@angular/tsc-wrapped` ([2fe6fb1](https://github.com/angular/angular/commit/2fe6fb1))
+* **router:** add a banner file for the router ([#12919](https://github.com/angular/angular/issues/12919)) ([8df328b](https://github.com/angular/angular/commit/8df328b))
+* **router:** add a banner file for the router ([#12919](https://github.com/angular/angular/issues/12919)) ([511cd4d](https://github.com/angular/angular/commit/511cd4d))
+* **router:** removes a peer dependency from router to upgrade ([115f18f](https://github.com/angular/angular/commit/115f18f))
+* **router:** removes a peer dependency from router to upgrade ([87d5d49](https://github.com/angular/angular/commit/87d5d49))
+* **router:** support redirects to named outlets ([09226d9](https://github.com/angular/angular/commit/09226d9)), closes [#12740](https://github.com/angular/angular/issues/12740) [#9921](https://github.com/angular/angular/issues/9921)
+* **upgrade:** call ng1 lifecycle hooks ([#12875](https://github.com/angular/angular/issues/12875)) ([462316b](https://github.com/angular/angular/commit/462316b))
+
+
+
+<a name="2.3.0-beta.0"></a>
+# [2.3.0-beta.0](https://github.com/angular/angular/compare/2.2.0...2.3.0-beta.0) (2016-11-17)
+
+### Bug Fixes
+
+* **compiler:** assert xliff messages have translations ([7908679](https://github.com/angular/angular/commit/7908679)), closes [#12815](https://github.com/angular/angular/issues/12815) [#12604](https://github.com/angular/angular/issues/12604)
+* **compiler:** updates hash algo for xmb/xtb files ([2f14415](https://github.com/angular/angular/commit/2f14415))
+* **core:** fix placeholders handling in i18n. ([76e4911](https://github.com/angular/angular/commit/76e4911)), closes [#12512](https://github.com/angular/angular/issues/12512)
+* **core:** misc i18n fixes ([ed5e98d](https://github.com/angular/angular/commit/ed5e98d))
+* **core:** xmb serializer uses decimal messaged IDs ([08c038e](https://github.com/angular/angular/commit/08c038e)), closes [#12511](https://github.com/angular/angular/issues/12511)
+* **platform-browser:** enable AOT ([efbbefd](https://github.com/angular/angular/commit/efbbefd)), closes [#12783](https://github.com/angular/angular/issues/12783)
+
+### Features
+
+* **core:** add `attachView` / `detachView` to ApplicationRef ([9f7d32a](https://github.com/angular/angular/commit/9f7d32a)), closes [#9293](https://github.com/angular/angular/issues/9293)
+* **core:** expose `ViewRef` as `ChangeDetectorRef` ([1b5384e](https://github.com/angular/angular/commit/1b5384e)), closes [#12722](https://github.com/angular/angular/issues/12722)
+* **core:** implements a decimal fingerprint for i18n ([582550a](https://github.com/angular/angular/commit/582550a))
+* **router:** register router with ngprobe ([c2fae72](https://github.com/angular/angular/commit/c2fae72))
+* **router_link:** add skipLocationChange and replaceUrl inputs ([#12850](https://github.com/angular/angular/issues/12850)) ([46d1502](https://github.com/angular/angular/commit/46d1502))
+
+Note: The 2.3.0-beta.0 release also contains all the changes present in the 2.2.1 release.
+
+
+
+<a name="2.2.1"></a>
+## [2.2.1](https://github.com/angular/angular/compare/2.2.0...2.2.1) (2016-11-17)
+
+
+### Bug Fixes
+
+* **animations:** only pass in same typed players as previous players into web-animations ([#12907](https://github.com/angular/angular/issues/12907)) ([583d283](https://github.com/angular/angular/commit/583d283))
+* **animations:** retain styling when transition destinations are changed ([#12208](https://github.com/angular/angular/issues/12208)) ([5c46c49](https://github.com/angular/angular/commit/5c46c49)), closes [#9661](https://github.com/angular/angular/issues/9661)
+* **core:** support `ngTemplateOutlet` in production mode ([#12921](https://github.com/angular/angular/issues/12921)) ([4628798](https://github.com/angular/angular/commit/4628798)), closes [#12911](https://github.com/angular/angular/issues/12911)
+* **http:** correctly handle response body for 204 status code ([21a4de9](https://github.com/angular/angular/commit/21a4de9)), closes [#12830](https://github.com/angular/angular/issues/12830) [#12393](https://github.com/angular/angular/issues/12393)
+* **http:** return request url if it cannot be retrieved from response ([845ea23](https://github.com/angular/angular/commit/845ea23)), closes [#12837](https://github.com/angular/angular/issues/12837)
+* **upgrade:** make AoT ngUpgrade work with the testability API and resumeBootstrap() ([#12910](https://github.com/angular/angular/issues/12910)) ([dc1662a](https://github.com/angular/angular/commit/dc1662a))
+* **platform-browser:** fix disableDebugTools() ([#12918](https://github.com/angular/angular/issues/12918)) ([7b67bad](https://github.com/angular/angular/commit/7b67bad))
+* **router:** add a banner file for the router ([#12919](https://github.com/angular/angular/issues/12919)) ([364642d](https://github.com/angular/angular/commit/364642d))
+* **router:** removes a peer dependency from router to upgrade ([1dcf1f4](https://github.com/angular/angular/commit/1dcf1f4))
+* **forms** allow for null values in HTML select options bound with ngValue ([e0ce545](https://github.com/angular/angular/commit/e0ce545)), closes [#10349](https://github.com/angular/angular/issues/10349)
+* **router:** should not create a route state if navigation is canceled ([#12868](https://github.com/angular/angular/issues/12868)) ([dabaf85](https://github.com/angular/angular/commit/dabaf85)), closes [#12776](https://github.com/angular/angular/issues/12776)
+* **common:** select should allow for null values in HTML select options bound with ngValue ([e02c180](https://github.com/angular/angular/commit/e02c180)), closes [#12829](https://github.com/angular/angular/issues/12829)
+* **compiler-cli:** support ctorParams in function closure ([#12876](https://github.com/angular/angular/issues/12876)) ([6cdc3b5](https://github.com/angular/angular/commit/6cdc3b5))
+
+
+<a name="2.2.0"></a>
+# [2.2.0 upgrade-firebooster](https://github.com/angular/angular/compare/2.2.0-rc.0...2.2.0) (2016-11-14)
+
+### Features (summary of all features from 2.2.0-beta.0 - 2.2.0-rc.0 releases)
+
+* **common:** support narrow forms for month and weekdays in DatePipe ([#12297](https://github.com/angular/angular/issues/12297)) ([f77ab6a](https://github.com/angular/angular/commit/f77ab6a)), closes [#12294](https://github.com/angular/angular/issues/12294)
+* **core:** map 'for' attribute to 'htmlFor' property ([#10546](https://github.com/angular/angular/issues/10546)) ([634b3bb](https://github.com/angular/angular/commit/634b3bb)), closes [#7516](https://github.com/angular/angular/issues/7516)
+* **core:** add the find method to QueryList ([7c16ef9](https://github.com/angular/angular/commit/7c16ef9))
+* **forms:** add hasError and getError to AbstractControlDirective ([#11985](https://github.com/angular/angular/issues/11985)) ([592f40a](https://github.com/angular/angular/commit/592f40a)), closes [#7255](https://github.com/angular/angular/issues/7255)
+* **forms:** add ng-pending CSS class during async validation ([#11243](https://github.com/angular/angular/issues/11243)) ([97bc971](https://github.com/angular/angular/commit/97bc971)), closes [#10336](https://github.com/angular/angular/issues/10336)
+* **forms:** add emitEvent to AbstractControl methods ([#11949](https://github.com/angular/angular/issues/11949)) ([b9fc090](https://github.com/angular/angular/commit/b9fc090))
+* **forms:** make 'parent' a public property of 'AbstractControl' ([#11855](https://github.com/angular/angular/issues/11855)) ([445e592](https://github.com/angular/angular/commit/445e592))
+* **forms:** Validator.pattern accepts a RegExp ([#12323](https://github.com/angular/angular/issues/12323)) ([bf60418](https://github.com/angular/angular/commit/bf60418))
+* **router:** add a provider making angular1/angular2 integration easier ([#12769](https://github.com/angular/angular/issues/12769)) ([6e35d13](https://github.com/angular/angular/commit/6e35d13))
+* **router:** add support for custom url matchers ([7340735](https://github.com/angular/angular/commit/7340735)), closes [#12442](https://github.com/angular/angular/issues/12442) [#12772](https://github.com/angular/angular/issues/12772)
+* **router:** export routerLinkActive w/ isActive property ([c9f58cf](https://github.com/angular/angular/commit/c9f58cf))
+* **router:** add support for ng1/ng2 migration ([#12160](https://github.com/angular/angular/issues/12160)) ([8b9ab44](https://github.com/angular/angular/commit/8b9ab44))
+* **upgrade:** add support for AoT compiled upgrade applications ([d6791ff](https://github.com/angular/angular/commit/d6791ff)), closes [#12239](https://github.com/angular/angular/issues/12239)
+* **upgrade:** add support for `require` in UpgradeComponent ([fe1d0e2](https://github.com/angular/angular/commit/fe1d0e2))
+* **upgrade:** add/improve support for lifecycle hooks in UpgradeComponent ([469010e](https://github.com/angular/angular/commit/469010e))
+
+
+
+### Performance Improvements
+
+* **compiler:** introduce direct rendering ([9c23884](https://github.com/angular/angular/commit/9c23884))
+* **core:** don’t use `DomAdapter` nor zone for regular events ([648ce59](https://github.com/angular/angular/commit/648ce59))
+* **core:** use `array.push` / `array.pop` instead of `splice` if possible ([0fc11a4](https://github.com/angular/angular/commit/0fc11a4))
+* **platform-browser:** cache plugin resolution in the EventManager ([73593d4](https://github.com/angular/angular/commit/73593d4)), closes [#12824](https://github.com/angular/angular/issues/12824)
+* **platform-browser:** don’t use `DomAdapter` any more ([d708a88](https://github.com/angular/angular/commit/d708a88))
+
+
+
+
+### Bug Fixes
+
+* **animations:** allow animations to be destroyed manually ([#12719](https://github.com/angular/angular/issues/12719)) ([fe35bc3](https://github.com/angular/angular/commit/fe35bc3)), closes [#12456](https://github.com/angular/angular/issues/12456)
+* **animations:** always normalize style properties and values during compilation ([#12755](https://github.com/angular/angular/issues/12755)) ([a0e9fde](https://github.com/angular/angular/commit/a0e9fde)), closes [#11582](https://github.com/angular/angular/issues/11582) [#12481](https://github.com/angular/angular/issues/12481)
+* **animations:** always trigger animations after the change detection check ([#12713](https://github.com/angular/angular/issues/12713)) ([383f23b](https://github.com/angular/angular/commit/383f23b))
+* **animations:** ensure animations work with web-workers ([#12656](https://github.com/angular/angular/issues/12656)) ([19e869e](https://github.com/angular/angular/commit/19e869e))
+* **animations:** ensure web-animations are caught within the Angular zone ([f80a157](https://github.com/angular/angular/commit/f80a157)), closes [#11881](https://github.com/angular/angular/issues/11881) [#11712](https://github.com/angular/angular/issues/11712) [#12355](https://github.com/angular/angular/issues/12355) [#11881](https://github.com/angular/angular/issues/11881) [#12546](https://github.com/angular/angular/issues/12546) [#12707](https://github.com/angular/angular/issues/12707) [#12774](https://github.com/angular/angular/issues/12774)
+* **common:** `NgSwitch` - don’t create the default case if another case matches ([#12726](https://github.com/angular/angular/issues/12726)) ([d8f23f4](https://github.com/angular/angular/commit/d8f23f4)), closes [#11297](https://github.com/angular/angular/issues/11297) [#9420](https://github.com/angular/angular/issues/9420)
+* **common:** I18nSelectPipe selects other case on default ([4708b24](https://github.com/angular/angular/commit/4708b24))
+* **common:** no TZ Offset added by DatePipe for dates without time ([#12380](https://github.com/angular/angular/issues/12380)) ([2aba8b0](https://github.com/angular/angular/commit/2aba8b0))
+* **common:** NgClass should throw a descriptive error when CSS class is not a string ([#12662](https://github.com/angular/angular/issues/12662)) ([f3793b5](https://github.com/angular/angular/commit/f3793b5)), closes [#12586](https://github.com/angular/angular/issues/12586)
+* **common:** DatePipe should handle empty string ([#12374](https://github.com/angular/angular/issues/12374)) ([3dc6177](https://github.com/angular/angular/commit/3dc6177))
+* **compiler:** don't convert undefined to null literals ([#11503](https://github.com/angular/angular/issues/11503)) ([f0cdb42](https://github.com/angular/angular/commit/f0cdb42)), closes [#11493](https://github.com/angular/angular/issues/11493)
+* **compiler:** generate safe access strictNullChecks compatible code ([#12800](https://github.com/angular/angular/issues/12800)) ([a965d11](https://github.com/angular/angular/commit/a965d11)), closes [#12795](https://github.com/angular/angular/issues/12795)
+* **compiler:** support more than 9 interpolations ([#12710](https://github.com/angular/angular/issues/12710)) ([22c021c](https://github.com/angular/angular/commit/22c021c)), closes [#10253](https://github.com/angular/angular/issues/10253)
+* **compiler:** use the other case by default in ICU messages ([55dc0e4](https://github.com/angular/angular/commit/55dc0e4))
+* **compiler-cli:** suppress closure compiler suspiciousCode check in codegen ([#12666](https://github.com/angular/angular/issues/12666)) ([7103754](https://github.com/angular/angular/commit/7103754))
+* **compiler-cli:** suppress two more closure compiler checks in codegen ([#12698](https://github.com/angular/angular/issues/12698)) ([77cbf7f](https://github.com/angular/angular/commit/77cbf7f))
+* **core:** allow to query content of templates that are stamped out at a different place ([f2bbef3](https://github.com/angular/angular/commit/f2bbef3)), closes [#12283](https://github.com/angular/angular/issues/12283) [#12094](https://github.com/angular/angular/issues/12094)
+* **core:** apply host attributes to root elements ([#12761](https://github.com/angular/angular/issues/12761)) ([ad3bf6c](https://github.com/angular/angular/commit/ad3bf6c)), closes [#12744](https://github.com/angular/angular/issues/12744)
+* **core:** ensure that component views that have no bindings recurse into nested components / view containers. ([051d748](https://github.com/angular/angular/commit/051d748))
+* **core:** fix pseudo-selector shimming ([#12754](https://github.com/angular/angular/issues/12754)) ([acbf1d8](https://github.com/angular/angular/commit/acbf1d8)), closes [#12730](https://github.com/angular/angular/issues/12730) [#12354](https://github.com/angular/angular/issues/12354)
+* **forms:** check if registerOnValidatorChange exists on validator before trying to invoke it ([#12801](https://github.com/angular/angular/issues/12801)) ([ef88147](https://github.com/angular/angular/commit/ef88147)), closes [#12593](https://github.com/angular/angular/issues/12593)
+* **forms:** getRawValue returns any instead of Object ([#12599](https://github.com/angular/angular/issues/12599)) ([09092ac](https://github.com/angular/angular/commit/09092ac))
+* **http:** preserve header case when copying headers ([#12697](https://github.com/angular/angular/issues/12697)) ([121e508](https://github.com/angular/angular/commit/121e508))
+* **router:** advance a route only after its children have been deactivated ([#12676](https://github.com/angular/angular/issues/12676)) ([9ddf9b3](https://github.com/angular/angular/commit/9ddf9b3)), closes [#11715](https://github.com/angular/angular/issues/11715)
+* **router:** avoid router initialization for non root components ([2a4bf9a](https://github.com/angular/angular/commit/2a4bf9a)), closes [#12338](https://github.com/angular/angular/issues/12338) [#12814](https://github.com/angular/angular/issues/12814)
+* **router:** check if windows.console exists before using it ([#12348](https://github.com/angular/angular/issues/12348)) ([7886561](https://github.com/angular/angular/commit/7886561))
+* **router:** correctly export concatMap operator in es5 ([#12430](https://github.com/angular/angular/issues/12430)) ([e25baa0](https://github.com/angular/angular/commit/e25baa0))
+* **router:** do not require the creation of empty-path routes when no url left ([2c11093](https://github.com/angular/angular/commit/2c11093)), closes [#12133](https://github.com/angular/angular/issues/12133)
+* **router:** ignore null or undefined query parameters ([#12333](https://github.com/angular/angular/issues/12333)) ([3052fb2](https://github.com/angular/angular/commit/3052fb2))
+* **router:** incorrect injector is used when instantiating components loaded lazily ([#12817](https://github.com/angular/angular/issues/12817)) ([52be848](https://github.com/angular/angular/commit/52be848))
+* **router:** resolve guard observables on the first emit ([#10412](https://github.com/angular/angular/issues/10412)) ([2e78b76](https://github.com/angular/angular/commit/2e78b76))
+* **router:** Route.isActive also compares query params ([#12321](https://github.com/angular/angular/issues/12321)) ([785b7b6](https://github.com/angular/angular/commit/785b7b6))
+* **router:** router should not swallow "unhandled" errors ([e5a753e](https://github.com/angular/angular/commit/e5a753e)), closes [#12802](https://github.com/angular/angular/issues/12802)
+* **router:** throw an error when encounter undefined route ([#12389](https://github.com/angular/angular/issues/12389)) ([77dc1ab](https://github.com/angular/angular/commit/77dc1ab))
+* **platform-browser:** enableDebugTools should create AngularTools by merging into context.ng ([#12003](https://github.com/angular/angular/issues/12003)) ([b2cf379](https://github.com/angular/angular/commit/b2cf379)), closes [#12002](https://github.com/angular/angular/issues/12002)
+* **platform-browser:** provide the ability to register global hammer.js events ([768cddb](https://github.com/angular/angular/commit/768cddb)), closes [#12797](https://github.com/angular/angular/issues/12797)
+* **tsc-wrapped:** harden collector against invalid asts ([#12793](https://github.com/angular/angular/issues/12793)) ([69f87ca](https://github.com/angular/angular/commit/69f87ca))
+
+
+
+<a name="2.2.0-rc.0"></a>
+# [2.2.0-rc.0](https://github.com/angular/angular/compare/2.2.0-beta.1...2.2.0-rc.0) (2016-11-02)
+
+
+### Bug Fixes
+
+* **compiler:** dedupe NgModule declarations, … ([a178bc6](https://github.com/angular/angular/commit/a178bc6))
+* **compiler:** don’t double bind functions ([e391cac](https://github.com/angular/angular/commit/e391cac))
+* **compiler:** Don’t throw on empty property bindings ([642c1db](https://github.com/angular/angular/commit/642c1db)), closes [#12583](https://github.com/angular/angular/issues/12583)
+* **compiler:** support multiple components in a view container ([6fda972](https://github.com/angular/angular/commit/6fda972))
+* **core:** improve error when multiple components match the same element ([e9fd864](https://github.com/angular/angular/commit/e9fd864)), closes [#7067](https://github.com/angular/angular/issues/7067)
+* **router:** call data observers when the path changes ([1de04b2](https://github.com/angular/angular/commit/1de04b2))
+* **router:** CanDeactivate receives a wrong component ([830a780](https://github.com/angular/angular/commit/830a780)), closes [#12592](https://github.com/angular/angular/issues/12592)
+* **router:** rerun resolvers when url changes ([fe47e6b](https://github.com/angular/angular/commit/fe47e6b)), closes [#12603](https://github.com/angular/angular/issues/12603)
+* **router:** reset URL to the stable state when a navigation gets canceled ([d509ee0](https://github.com/angular/angular/commit/d509ee0)), closes [#10321](https://github.com/angular/angular/issues/10321)
+* **router:** routerLink should not prevent default on non-link elements ([8e221b8](https://github.com/angular/angular/commit/8e221b8))
+* **router:** run navigations serially ([091c390](https://github.com/angular/angular/commit/091c390)), closes [#11754](https://github.com/angular/angular/issues/11754)
+* **upgrade:** silent bootstrap failures ([fa93fd6](https://github.com/angular/angular/commit/fa93fd6)), closes [#12062](https://github.com/angular/angular/issues/12062)
+
+
+### Features
+
+* **core:** add the find method to QueryList ([7c16ef9](https://github.com/angular/angular/commit/7c16ef9))
+
+
+
+<a name="2.1.2"></a>
+# [2.1.2](https://github.com/angular/angular/compare/2.1.1...2.1.2) (2016-10-27)
+
+### Bug Fixes
+
+* **compiler:** don't access view local variables nor pipes in host expressions ([#12396](https://github.com/angular/angular/issues/12396)) ([867494a](https://github.com/angular/angular/commit/867494a)), closes [#12004](https://github.com/angular/angular/issues/12004) [#12071](https://github.com/angular/angular/issues/12071)
+* **compiler:** walk third party modules ([#12453](https://github.com/angular/angular/issues/12453)) ([a838aba](https://github.com/angular/angular/commit/a838aba)), closes [#11889](https://github.com/angular/angular/issues/11889) [#12428](https://github.com/angular/angular/issues/12428)
+* **compiler:** remove double exports of template_ast ([7742ec0](https://github.com/angular/angular/commit/7742ec0))
+* **compiler:** use Maps instead of objects in selector implementation ([d321b0e](https://github.com/angular/angular/commit/d321b0e))
+* **compiler-cli:** fix types ([ef15364](https://github.com/angular/angular/commit/ef15364))
+* **compiler-cli:** assert that all pipes and directives are declared by a module  ([7221632](https://github.com/angular/angular/commit/7221632))
+* **http:** overwrite already set xsrf header ([b4265e0](https://github.com/angular/angular/commit/b4265e0))
+* **router:** add a test to make sure canDeactivate guards are called for aux routes ([fc60fa7](https://github.com/angular/angular/commit/fc60fa7)), closes [#11345](https://github.com/angular/angular/issues/11345)
+* **router:** canDeactivate guards are not triggered for componentless routes ([b741853](https://github.com/angular/angular/commit/b741853)), closes [#12375](https://github.com/angular/angular/issues/12375)
+* **router:** change router not to deactivate aux routes when navigating from a componentless routes ([52a853e](https://github.com/angular/angular/commit/52a853e))
+* **router:** disallow component routes with named outlets ([8f2fa0f](https://github.com/angular/angular/commit/8f2fa0f)), closes [#11208](https://github.com/angular/angular/issues/11208) [#11082](https://github.com/angular/angular/issues/11082)
+* **router:** preserve resolve data ([6ccbfd4](https://github.com/angular/angular/commit/6ccbfd4)), closes [#12306](https://github.com/angular/angular/issues/12306)
+
+
+
+<a name="2.2.0-beta.1"></a>
+# [2.2.0-beta.1](https://github.com/angular/angular/compare/2.2.0-beta.0...2.2.0-beta.1) (2016-10-27)
+
+### Code Refactoring
+
+* **upgrade:** re-export the new static upgrade APIs on new entry ([a26dd28](https://github.com/angular/angular/commit/a26dd28))
+
+
+### Features
+
+* **router:** export routerLinkActive w/ isActive property ([c9f58cf](https://github.com/angular/angular/commit/c9f58cf))
+
+
+### BREAKING CHANGES (only for beta version users)
+
+* upgrade: Four newly added APIs in 2.2.0-beta:
+downgradeComponent, downgradeInjectable, UpgradeComponent, and UpgradeModule are no longer exported by @angular/upgrade.
+Import these from @angular/upgrade/static instead.
+
+
+Note: The 2.2.0-beta.1 release also contains all the changes present in the 2.1.2 release.
+
+
+
+# [2.1.1](https://github.com/angular/angular/compare/2.1.0...2.1.1) (2016-10-20)
+
+### Bug Fixes
+
+* **compiler:** generate aot code for animation trigger output events ([#12291](https://github.com/angular/angular/issues/12291)) ([6e5f8b5](https://github.com/angular/angular/commit/6e5f8b5)), closes [#11707](https://github.com/angular/angular/issues/11707)
+* **compiler:** don't redeclare a var in the same scope ([#12386](https://github.com/angular/angular/issues/12386)) ([cca4a5c](https://github.com/angular/angular/commit/cca4a5c))
+* **core:** fix decorator default values ([bd1dcb5](https://github.com/angular/angular/commit/bd1dcb5))
+* **core:** fix property decorators ([3993279](https://github.com/angular/angular/commit/3993279)), closes [#12224](https://github.com/angular/angular/issues/12224)
+* **http:** make normalizeMethodName optimizer-compatible. ([#12370](https://github.com/angular/angular/issues/12370)) ([8409b65](https://github.com/angular/angular/commit/8409b65))
+* **router:** correctly export filter operator in es5 ([#12286](https://github.com/angular/angular/issues/12286)) ([27d7677](https://github.com/angular/angular/commit/27d7677))
+* **router:** do not update primary route if only secondary outlet is given ([#11797](https://github.com/angular/angular/issues/11797)) ([da5fc69](https://github.com/angular/angular/commit/da5fc69))
+* **router:** fix lazy loading triggered by redirects from wildcard routes ([5ae6915](https://github.com/angular/angular/commit/5ae6915)), closes [#12183](https://github.com/angular/angular/issues/12183)
+* **router:** module loader should start compiling modules when stubbedModules are set ([#11742](https://github.com/angular/angular/issues/11742)) ([b44b6ef](https://github.com/angular/angular/commit/b44b6ef))
+
+
+### Performance Improvements
+
+* **common:** optimize NgSwitch default case ([fdf4309](https://github.com/angular/angular/commit/fdf4309))
+
+
+
+<a name="2.2.0-beta.0"></a>
+# [2.2.0-beta.0](https://github.com/angular/angular/compare/2.1.0...2.2.0-beta.0) (2016-10-20)
+
+### Features
+
+* **common:** support narrow forms for month and weekdays in DatePipe ([#12297](https://github.com/angular/angular/issues/12297)) ([f77ab6a](https://github.com/angular/angular/commit/f77ab6a)), closes [#12294](https://github.com/angular/angular/issues/12294)
+* **forms:** add hasError and getError to AbstractControlDirective ([#11985](https://github.com/angular/angular/issues/11985)) ([592f40a](https://github.com/angular/angular/commit/592f40a)), closes [#7255](https://github.com/angular/angular/issues/7255)
+* **forms:** add ng-pending CSS class during async validation ([#11243](https://github.com/angular/angular/issues/11243)) ([97bc971](https://github.com/angular/angular/commit/97bc971)), closes [#10336](https://github.com/angular/angular/issues/10336)
+* **forms:** Added emitEvent to AbstractControl methods ([#11949](https://github.com/angular/angular/issues/11949)) ([b9fc090](https://github.com/angular/angular/commit/b9fc090))
+* **forms:** make 'parent' a public property of 'AbstractControl' ([#11855](https://github.com/angular/angular/issues/11855)) ([445e592](https://github.com/angular/angular/commit/445e592))
+* **forms:** Validator.pattern accepts a RegExp ([#12323](https://github.com/angular/angular/issues/12323)) ([bf60418](https://github.com/angular/angular/commit/bf60418))
+* **upgrade:** add support for AoT compiled upgrade applications ([d6791ff](https://github.com/angular/angular/commit/d6791ff)), closes [#12239](https://github.com/angular/angular/issues/12239)
+* **router:** add support for ng1/ng2 migration ([#12160](https://github.com/angular/angular/issues/12160)) ([8b9ab44](https://github.com/angular/angular/commit/8b9ab44))
+
+Note: The 2.2.0-beta.0 release also contains all the changes present in the 2.1.1 release.
+
+
+
+<a name="2.1.0"></a>
+# [2.1.0 incremental-metamorphosis](https://github.com/angular/angular/compare/2.1.0-rc.0...2.1.0) (2016-10-12)
+
+
+### Bug Fixes
+
+* **compiler:** allow whitespace as `<ng-content>` content ([#12225](https://github.com/angular/angular/issues/12225)) ([df1718d](https://github.com/angular/angular/commit/df1718d))
+* **compiler:** interpolation expressions report the correct offset ([#12125](https://github.com/angular/angular/issues/12125)) ([d641c36](https://github.com/angular/angular/commit/d641c36))
+* **compiler:** properly shim `:host:before` and `:host(:before)` ([#12171](https://github.com/angular/angular/issues/12171)) ([aa92512](https://github.com/angular/angular/commit/aa92512)), closes [#12165](https://github.com/angular/angular/issues/12165)
+* **compiler:** validate `@HostBinding` name ([#12139](https://github.com/angular/angular/issues/12139)) ([13ecc14](https://github.com/angular/angular/commit/13ecc14))
+* **compiler-cli:** don't clone static symbols when simplifying annotation metadata ([#12158](https://github.com/angular/angular/issues/12158)) ([8c477b2](https://github.com/angular/angular/commit/8c477b2))
+* **compiler-cli:** remove peerDependency on [@angular](https://github.com/angular)/platform-server ([#12122](https://github.com/angular/angular/issues/12122)) ([71b7654](https://github.com/angular/angular/commit/71b7654))
+* **compiler-cli:** remove unused parse5 dependency from package.json ([eaaec69](https://github.com/angular/angular/commit/eaaec69))
+* **forms:** allow optional fields with pattern and minlength validators ([#12147](https://github.com/angular/angular/issues/12147)) ([d22eeb7](https://github.com/angular/angular/commit/d22eeb7))
+* **forms:** properly validate blank strings with minlength ([#12091](https://github.com/angular/angular/issues/12091)) ([f50c1da](https://github.com/angular/angular/commit/f50c1da))
+* **http:** fix Headers initialization from Headers and Object ([#12106](https://github.com/angular/angular/issues/12106)) ([f4566f8](https://github.com/angular/angular/commit/f4566f8))
+* **http:** Headers.append should append to the list ([a67c067](https://github.com/angular/angular/commit/a67c067))
+* **platform-browser-dynamic:** mark platformBrowserDynamic as stable API ([#12154](https://github.com/angular/angular/issues/12154)) ([bcef5ef](https://github.com/angular/angular/commit/bcef5ef))
+* **router:** improve error message ([#12102](https://github.com/angular/angular/issues/12102)) ([e06303a](https://github.com/angular/angular/commit/e06303a))
+* **router:** parent resolve should complete before merging resolved data ([1681e4f](https://github.com/angular/angular/commit/1681e4f)), closes [#12032](https://github.com/angular/angular/issues/12032)
+* **router:** wildcards routes should support lazy loading ([40b92dd](https://github.com/angular/angular/commit/40b92dd)), closes [#12024](https://github.com/angular/angular/issues/12024)
+* **upgrade:** allow compilerOptions in bootstrap ([#10575](https://github.com/angular/angular/issues/10575)) ([5effc33](https://github.com/angular/angular/commit/5effc33))
+
+
+
+<a name="2.1.0-rc.0"></a>
+# [2.1.0-rc.0](https://github.com/angular/angular/compare/2.1.0-beta.0...2.1.0-rc.0) (2016-10-05)
+
+### Features
+
+* **animations:** provide aliases for `:enter` and `:leave` transitions ([#11991](https://github.com/angular/angular/issues/11991)) ([e884f48](https://github.com/angular/angular/commit/e884f48))
+
+Note: 2.1.0-rc.0 release also contains all the changes present in the 2.0.2 release.
+
+
+
+<a name="2.1.0-beta.0"></a>
+# [2.1.0-beta.0](https://github.com/angular/angular/compare/2.0.0...2.1.0-beta.0) (2016-09-23)
+
+### Features
+
+* **router:** add router preloader to optimistically preload routes ([5a84982](https://github.com/angular/angular/commit/5a84982))
 
-After
 
-    @Directive(properties: [
-      'sameName',
-      'directiveProp: elProp | pipe'
-    ])
+### Bug Fixes
+* **router:** update the router not to reset router state when updating root component ([#11799](https://github.com/angular/angular/issues/11799)) ([31dce72](https://github.com/angular/angular/commit/31dce72))
 
- ([d7df853b](https://github.com/angular/angular/commit/d7df853b))
+Note: 2.1.0-beta.0 release also contains all the changes present in the 2.0.1 release.
 
 
-<a name"2.0.0-alpha.25"></a>
-### 2.0.0-alpha.25 (2015-05-21)
 
+<a name="2.0.2"></a>
+## [2.0.2](https://github.com/angular/angular/compare/2.0.1...2.0.2) (2016-10-05)
 
-#### Bug Fixes
 
-* don't call onAllChangesDone on checkNoChanges ([a664f5a6](https://github.com/angular/angular/commit/a664f5a6))
-* **XHRImpl:** fix errors, add a spec ([91ccc9af](https://github.com/angular/angular/commit/91ccc9af), closes [#1715](https://github.com/angular/angular/issues/1715))
-* **browser:** template elements should have content imported instead of the element itself. ([c9ab8e4b](https://github.com/angular/angular/commit/c9ab8e4b))
-* **di:** changed host and view injector to respect visibility ([705ee46f](https://github.com/angular/angular/commit/705ee46f))
-* **element_injector:**
-  * fixed element injector to inject view dependencies into its components ([b6b52e62](https://github.com/angular/angular/commit/b6b52e62))
-  * fixed element injector to resolve dependencies of regular services ([28c2b8f4](https://github.com/angular/angular/commit/28c2b8f4))
-* **forms:** changed forms to create only one value accessor instead of always creating Defau ([30c3e5a8](https://github.com/angular/angular/commit/30c3e5a8))
-* **gulp:** continue watching when tasks throw ([ac28ac32](https://github.com/angular/angular/commit/ac28ac32), closes [#1915](https://github.com/angular/angular/issues/1915))
-* **router:** router link should navigate to non-base Url. ([c4528321](https://github.com/angular/angular/commit/c4528321))
-* **test_lib:** fixes nested beforeEach. ([826af401](https://github.com/angular/angular/commit/826af401))
+### Bug Fixes
 
+* **common:** correctly removes styles on IE ([#11953](https://github.com/angular/angular/pull/11953)), closes [#7916](https://github.com/angular/angular/issues/7916)
+* **compiler:** do not embed templateUrl in view factories in non-debug mode. ([#11818](https://github.com/angular/angular/issues/11818)) ([51e1994](https://github.com/angular/angular/commit/51e1994)), closes [#11117](https://github.com/angular/angular/issues/11117)
+* **compiler:** move detection of unsafe properties for binding to ElementSchemaRegistry ([#11378](https://github.com/angular/angular/issues/11378)) ([5911c3b](https://github.com/angular/angular/commit/5911c3b))
+* **compiler:** fix `:host(tag)` and `:host-context(tag)` ([a6bb84e0](https://github.com/angular/angular/commit/a6bb84e02b7579f8d957ef6ba5b10d83482ed756)), closes [#11972](https://github.com/angular/angular/issues/11972)
+* **compiler:** fix attribute selectors in :host and :host-context ([#12056](https://github.com/angular/angular/issues/12056)) ([6f7ed32](https://github.com/angular/angular/commit/6f7ed32)), closes [#11917](https://github.com/angular/angular/issues/11917)
+* **compiler:** support `@page` and `@document` CSS rules ([#11878](https://github.com/angular/angular/issues/11878)) ([c99ef49](https://github.com/angular/angular/commit/c99ef49)), closes [#11860](https://github.com/angular/angular/issues/11860)
+* **compiler:** support `[attr="value with space"]` ([bd012ef](https://github.com/angular/angular/commit/bd012ef)), closes [#6249](https://github.com/angular/angular/issues/6249)
+* **compiler:** support quoted attribute values ([7395400](https://github.com/angular/angular/commit/7395400)), closes [#6085](https://github.com/angular/angular/issues/6085)
+* **compiler:** fix `<x>` ctype names ([7578d85](https://github.com/angular/angular/commit/7578d85)), closes [#12000](https://github.com/angular/angular/issues/12000)
+* **compiler-cli:** allow ReflectorHost passed as argument to CodeGenerator#create ([#11951](https://github.com/angular/angular/issues/11951)) ([826c98e](https://github.com/angular/angular/commit/826c98e))
+* **forms:** properly validate empty strings with patterns ([#11450](https://github.com/angular/angular/issues/11450)) ([e00de0c](https://github.com/angular/angular/commit/e00de0c))
+* **http:** preserve case of the first init, `set()` or `append()` ([#12023](https://github.com/angular/angular/issues/12023)) ([adb17fe](https://github.com/angular/angular/commit/adb17fe)), closes [#11624](https://github.com/angular/angular/issues/11624)
+* **http:** remove url params if provided value is null or undefined ([#11990](https://github.com/angular/angular/issues/11990)) ([9cc0a4e](https://github.com/angular/angular/commit/9cc0a4e))
+* **router:** do not reset the router state when updating the component ([#11867](https://github.com/angular/angular/issues/11867)) ([cf750e1](https://github.com/angular/angular/commit/cf750e1))
+* **upgrade:** bind optional properties when upgrading from ng1 ([#11411](https://github.com/angular/angular/issues/11411)) ([0851238](https://github.com/angular/angular/commit/0851238)), closes [#10181](https://github.com/angular/angular/issues/10181)
 
-#### Features
 
-* **CD:** add support for === and !== ([0ae89ac0](https://github.com/angular/angular/commit/0ae89ac0))
-* **PromisePipe:** remove ref onDestroy ([4afd2b41](https://github.com/angular/angular/commit/4afd2b41))
-* **di:** changed toFactory to support dependency annotations ([f210c41c](https://github.com/angular/angular/commit/f210c41c))
-* **forms:** migrated forms to typescript ([00c3693d](https://github.com/angular/angular/commit/00c3693d))
-* **injector:** support forwardRef in toAlias ([fed86fc8](https://github.com/angular/angular/commit/fed86fc8))
+<a name="2.0.1"></a>
+## [2.0.1](https://github.com/angular/angular/compare/2.0.0...2.0.1) (2016-09-23)
 
 
-<a name"2.0.0-alpha.24"></a>
-### 2.0.0-alpha.24 (2015-05-19)
-
-
-#### Bug Fixes
-
-* **Compiler:** add an error when a directive is null or undefined ([25cd6e43](https://github.com/angular/angular/commit/25cd6e43), closes [#1908](https://github.com/angular/angular/issues/1908))
-* **benchmark:**
-  * change If for NgIf ([cdbb2473](https://github.com/angular/angular/commit/cdbb2473))
-  * fixes ng-if ng-for renaming for templates. ([38926f71](https://github.com/angular/angular/commit/38926f71))
-* **build:** npm shrinkwrap to pick up changed SHA1. ([04a9eb88](https://github.com/angular/angular/commit/04a9eb88))
-* **directives:** fix import path ([c20060d2](https://github.com/angular/angular/commit/c20060d2))
-* **errors:** require passing stack traces explicitly in ng2 own code ([8ab77353](https://github.com/angular/angular/commit/8ab77353))
-* **examples:** prefix directives with Ng ([0e82970a](https://github.com/angular/angular/commit/0e82970a))
-* **facade:** MapWrapper.createFromPairs ([af9dcad8](https://github.com/angular/angular/commit/af9dcad8), closes [#1640](https://github.com/angular/angular/issues/1640))
-* **ng1 benchmarks:** revert *ng-if to ng-if ([909233f7](https://github.com/angular/angular/commit/909233f7))
-* **router:**
-  * use appRootComponentToken to get root route configs ([791caf00](https://github.com/angular/angular/commit/791caf00), closes [#1947](https://github.com/angular/angular/issues/1947))
-  * improve route matching priorities ([5db89071](https://github.com/angular/angular/commit/5db89071))
-  * generate links for router-link with baseHref ([390cfb79](https://github.com/angular/angular/commit/390cfb79))
-  * sort possible routes by cost ([17392f66](https://github.com/angular/angular/commit/17392f66))
-* **tree-differ:** treat symlinks to deleted paths as removals ([aad57954](https://github.com/angular/angular/commit/aad57954), closes [#1961](https://github.com/angular/angular/issues/1961))
-
-
-#### Features
-
-* allow for forward references in injection ([1eea2b25](https://github.com/angular/angular/commit/1eea2b25), closes [#1891](https://github.com/angular/angular/issues/1891))
-* **change_detection:**
-  * json pipe ([98603824](https://github.com/angular/angular/commit/98603824), closes [#1957](https://github.com/angular/angular/issues/1957))
-  * uppercase and lowercase pipes ([7a4a6353](https://github.com/angular/angular/commit/7a4a6353))
-  * implemented change detection that can be configured with pregenerated change det ([08f21dbf](https://github.com/angular/angular/commit/08f21dbf))
-* **compiler:**
-  * special-case class attribute in hostAttributes ([3011cd86](https://github.com/angular/angular/commit/3011cd86), closes [#1774](https://github.com/angular/angular/issues/1774), [#1841](https://github.com/angular/angular/issues/1841))
-  * added support for [()] syntax ([685a6507](https://github.com/angular/angular/commit/685a6507))
-* **di:**
-  * added hostInjector and viewInjector to the Directive annotation ([b066b8d1](https://github.com/angular/angular/commit/b066b8d1))
-  * removed publishAs ([3a53f679](https://github.com/angular/angular/commit/3a53f679))
-* **element_injector:** allow @Optional for ProtoViewRef ([bb2eda2d](https://github.com/angular/angular/commit/bb2eda2d))
-* **errors:** preserve stack traces of user exceptions in Dart ([b6f29b44](https://github.com/angular/angular/commit/b6f29b44))
-* **facade:** toUpperCase and toLowerCase ([557d54b3](https://github.com/angular/angular/commit/557d54b3))
-* **fakeAsync:** allow simulating the passage of time ([0f002a5b](https://github.com/angular/angular/commit/0f002a5b))
-* **forms:** improved error messages ([11e43851](https://github.com/angular/angular/commit/11e43851), closes [#1839](https://github.com/angular/angular/issues/1839))
-* **pipe:** reexported pipes to genereate docs ([155b1e2b](https://github.com/angular/angular/commit/155b1e2b))
+### Bug Fixes
 
+* **common:** fix ngOnChanges signature of NgTemplateOutlet directive ([14ee759](https://github.com/angular/angular/commit/14ee759))
+* **compiler:** `[attribute~=value]` selector ([#11696](https://github.com/angular/angular/issues/11696)) ([734b8b8](https://github.com/angular/angular/commit/734b8b8)), closes [#9644](https://github.com/angular/angular/issues/9644)
+* **compiler:** safe property access expressions work in event bindings ([#11724](https://github.com/angular/angular/issues/11724)) ([a95d652](https://github.com/angular/angular/commit/a95d652))
+* **compiler:** throw when Component.moduleId is not a string ([bd4045b](https://github.com/angular/angular/commit/bd4045b)), closes [#11590](https://github.com/angular/angular/issues/11590)
+* **compiler:** do not provide I18N values when they're not specified ([03aedbe](https://github.com/angular/angular/commit/03aedbe)), closes [#11643](https://github.com/angular/angular/issues/11643)
+* **core:** ContentChild descendants should be queried by default ([0dc15eb](https://github.com/angular/angular/commit/0dc15eb)), closes [#11645](https://github.com/angular/angular/issues/11645)
+* **forms:** disable all radios with disable() ([2860418](https://github.com/angular/angular/commit/2860418))
+* **forms:** make setDisabledState optional for reactive form directives ([#11731](https://github.com/angular/angular/issues/11731)) ([51d73d3](https://github.com/angular/angular/commit/51d73d3)), closes [#11719](https://github.com/angular/angular/issues/11719)
+* **forms:** support unbound disabled in ngModel ([#11736](https://github.com/angular/angular/issues/11736)) ([39e251e](https://github.com/angular/angular/commit/39e251e))
+* **upgrade:** allow attribute selectors for components in ng2 which are not part of upgrade ([#11808](https://github.com/angular/angular/issues/11808)) ([b81e2e7](https://github.com/angular/angular/commit/b81e2e7)), closes [#11280](https://github.com/angular/angular/issues/11280)
 
-#### Breaking Changes
 
-* `AppViewManager.createInPlaceHostView` is replaced by
-`AppViewManager.createRootHostView` (for bootstrap) and
-`AppViewManager.createFreeHostView` (for imperative components).
-
-The later creates new host elements that are not attached anywhere.
-To attach them, use `DomRenderer.getHostElement(hostviewRef)`
-to get the host element.
-
-Closes #1920
-
- ([421d8916](https://github.com/angular/angular/commit/421d8916))
-* - renames `DirectiveMetadataReader` into `DirectiveResolver`
-  and removes `src/core/compiler/directive_metadata`.
-
-Fixes #1712
-Fixes #1713
- ([ecb06801](https://github.com/angular/angular/commit/ecb06801))
-
-
-<a name"2.0.0-alpha.23"></a>
-### 2.0.0-alpha.23 (2015-05-12)
-
-
-#### Bug Fixes
-
-* **change_detection:** updated dynamic change detector not to mutate when throwing ([d717529e](https://github.com/angular/angular/commit/d717529e), closes [#1762](https://github.com/angular/angular/issues/1762))
-* **dart:** Remove unused imports. ([4ce0d5e0](https://github.com/angular/angular/commit/4ce0d5e0))
-* **forms:** export directives as const in Dart ([5036086f](https://github.com/angular/angular/commit/5036086f), closes [#1283](https://github.com/angular/angular/issues/1283))
-* **gulpfile:** fixed test.unit.dart to format dart code before running test ([92d6aa1f](https://github.com/angular/angular/commit/92d6aa1f))
-* **location:** dartium does not like pushState with null. ([c2a42d5d](https://github.com/angular/angular/commit/c2a42d5d))
-* **router:**
-  * add baseUrl to relative paths, but not absolute. ([a5741541](https://github.com/angular/angular/commit/a5741541), closes [#1783](https://github.com/angular/angular/issues/1783))
-  * reuse common parent components ([ac80df09](https://github.com/angular/angular/commit/ac80df09))
-  * router-link works without params ([77d1fc14](https://github.com/angular/angular/commit/77d1fc14))
-  * strip base href from URLs when navigating ([853d1de6](https://github.com/angular/angular/commit/853d1de6))
-* **test_lib:** spy funcs should match null arguments ([84dc6ae7](https://github.com/angular/angular/commit/84dc6ae7))
-* **transformer:** remove classDefParser in favor of hardcoded strings to speed up build ([01d5c295](https://github.com/angular/angular/commit/01d5c295))
-* **view:** fixed ProtoViewFactory to get all property bindings ([7f976381](https://github.com/angular/angular/commit/7f976381))
-
-
-#### Features
-
-* **PromisePipe:** add pipe for promises ([74987585](https://github.com/angular/angular/commit/74987585))
-* **VmTurnZone:** Rework the implementation to minimize change detection runs ([e8a6c95e](https://github.com/angular/angular/commit/e8a6c95e))
-* **change_detection.js:** export null pipes ([4b62a722](https://github.com/angular/angular/commit/4b62a722), closes [#1624](https://github.com/angular/angular/issues/1624))
-* **compiler:**
-  * added support for host actions ([f9c1de46](https://github.com/angular/angular/commit/f9c1de46))
-  * allow setting attributes on a host element ([51839ca6](https://github.com/angular/angular/commit/51839ca6), closes [#1402](https://github.com/angular/angular/issues/1402))
-* **di:**
-  * support type literals in DI ([358a6750](https://github.com/angular/angular/commit/358a6750))
-  * expose parent injector ([2185e7ce](https://github.com/angular/angular/commit/2185e7ce))
-  * components can self-publish via publishAs ([1a0da11e](https://github.com/angular/angular/commit/1a0da11e))
-* **directives:** export collection of core directives ([a5638a94](https://github.com/angular/angular/commit/a5638a94), closes [#1524](https://github.com/angular/angular/issues/1524))
-* **dom:** add getBaseHref method ([05219a54](https://github.com/angular/angular/commit/05219a54))
-* **facade:** add equals method to StringMapWrapper ([aff85b50](https://github.com/angular/angular/commit/aff85b50))
-* **gulpfuile:** added watch.js.dev ([3256ff1c](https://github.com/angular/angular/commit/3256ff1c))
-* **lang:** support const expressions in TS/JS and Dart ([4665726f](https://github.com/angular/angular/commit/4665726f), closes [#1796](https://github.com/angular/angular/issues/1796))
-* **material:**
-  * add early version of md-grid-list. ([8ef183b5](https://github.com/angular/angular/commit/8ef183b5), closes [#1683](https://github.com/angular/angular/issues/1683))
-  * early version of md-input ([ad239218](https://github.com/angular/angular/commit/ad239218), closes [#1753](https://github.com/angular/angular/issues/1753))
-* **view:** allow to transplant a view into a ViewContainer at another place. ([4f3433b5](https://github.com/angular/angular/commit/4f3433b5), closes [#1492](https://github.com/angular/angular/issues/1492))
-
-
-#### Breaking Changes
-
-* 
-VmTurnZone has been renamed to NgZone.
-
-- The public API has not chnanged,
-- The "outer" zone is now named "mount" zone (private to NgZone).
-
- ([e11c2054](https://github.com/angular/angular/commit/e11c2054))
-* 
-A collection of all the form directives is exported
-under `formDirectives`
-while those were previously available
-under `FormDirectives`.
-
-Closes #1804
-
- ([229e770a](https://github.com/angular/angular/commit/229e770a))
-
-
-<a name"2.0.0-alpha.22"></a>
-### 2.0.0-alpha.22 (2015-05-07)
-
-
-#### Bug Fixes
-
-* **brocolli:** escape special regexp characters when building regexps ([a58c9f83](https://github.com/angular/angular/commit/a58c9f83), closes [#1721](https://github.com/angular/angular/issues/1721), [#1752](https://github.com/angular/angular/issues/1752))
-* **build:**
-  * build the broccoli tools with correct typescript version. ([6bba289a](https://github.com/angular/angular/commit/6bba289a))
-  * use correct tsd command to get typings at requested versions ([1205f54d](https://github.com/angular/angular/commit/1205f54d))
-  * revert typescript upgrade which broke the build. ([b5032fd3](https://github.com/angular/angular/commit/b5032fd3))
-  * refer to newest version of hammerjs typings ([a7a94636](https://github.com/angular/angular/commit/a7a94636))
-* **bundle:** update the bundle config to point to rx.js ([cf322130](https://github.com/angular/angular/commit/cf322130))
-* **change_detector:** ensure that locals are only used when implicit receiver ([d4925b61](https://github.com/angular/angular/commit/d4925b61), closes [#1542](https://github.com/angular/angular/issues/1542))
-* **compiler:**
-  * clone templates before compiling them ([9e8d31d5](https://github.com/angular/angular/commit/9e8d31d5), closes [#1058](https://github.com/angular/angular/issues/1058))
-  * changed the compiler to set up event listeners and host properties on host view  ([e3c11045](https://github.com/angular/angular/commit/e3c11045), closes [#1584](https://github.com/angular/angular/issues/1584))
-  * only sets viewDefinition absUrl if the view has either a template or templateUrl ([3d625463](https://github.com/angular/angular/commit/3d625463), closes [#1326](https://github.com/angular/angular/issues/1326), [#1327](https://github.com/angular/angular/issues/1327))
-* **decorators:**
-  * incorrect annotation to decorator adapter ([b0c735f7](https://github.com/angular/angular/commit/b0c735f7))
-  * fixed decorators ([49777648](https://github.com/angular/angular/commit/49777648))
-  * fixes decorator reflection. ([be7504d4](https://github.com/angular/angular/commit/be7504d4))
-  * updates missing benchmark and fixes typo. ([87dcd5eb](https://github.com/angular/angular/commit/87dcd5eb))
-* **decorators.es6:** export Directive decorator ([93c331d1](https://github.com/angular/angular/commit/93c331d1), closes [#1688](https://github.com/angular/angular/issues/1688))
-* **di:** improve error messages for invalid bindings ([ee1b574b](https://github.com/angular/angular/commit/ee1b574b), closes [#1515](https://github.com/angular/angular/issues/1515), [#1573](https://github.com/angular/angular/issues/1573))
-* **docs:** fix broken docs test after addition of .ts extension to dgeni regex. ([62bf777e](https://github.com/angular/angular/commit/62bf777e))
-* **exception_handler:** log errors via `console.error` ([ead21c91](https://github.com/angular/angular/commit/ead21c91))
-* **formatter:** point to the newest clang-format ([51c47792](https://github.com/angular/angular/commit/51c47792))
-* **router:**
-  * fix for leading slash in dart ([c9cec600](https://github.com/angular/angular/commit/c9cec600))
-  * navigate on popstate event ([2713b787](https://github.com/angular/angular/commit/2713b787))
-  * throw if config does not contain required fields ([259f872c](https://github.com/angular/angular/commit/259f872c))
-  * infer top-level routing from app component ([46ad3552](https://github.com/angular/angular/commit/46ad3552), closes [#1600](https://github.com/angular/angular/issues/1600))
-  * use lists for RouteConfig annotations ([4965226f](https://github.com/angular/angular/commit/4965226f))
-* **view:** changed view manager to hydrate change detector after creating directives ([c1579222](https://github.com/angular/angular/commit/c1579222))
-
-
-#### Features
-
-* **benchmark:** added an implementation of the tree benchmark in React ([e4342743](https://github.com/angular/angular/commit/e4342743))
-* **benchmarks:** Add basic dart transformer benchmarks. ([1864f60a](https://github.com/angular/angular/commit/1864f60a))
-* **decorators:**
-  * adds decorator versions of DI annotations. ([457c15cd](https://github.com/angular/angular/commit/457c15cd))
-  * adds support for parameter decorators. ([f863ea0d](https://github.com/angular/angular/commit/f863ea0d))
-  * adds decorators to be used by TS and Babel transpiled apps. ([fb67e373](https://github.com/angular/angular/commit/fb67e373))
-* **dom:** add location and history as DOM-like APIs. ([f356d033](https://github.com/angular/angular/commit/f356d033))
-* **material:** add prototype dialog component w/ demo. ([f88c4b77](https://github.com/angular/angular/commit/f88c4b77))
-* **router:**
-  * adds the router to the self-executing bundle. ([8e1d53b5](https://github.com/angular/angular/commit/8e1d53b5))
-  * export decorator version of RouteConfig ([75da6e4c](https://github.com/angular/angular/commit/75da6e4c))
-  * route redirects ([91533313](https://github.com/angular/angular/commit/91533313))
-  * sibling outlets ([9d5c33f9](https://github.com/angular/angular/commit/9d5c33f9))
-  * export routerInjectables ([ef7014fe](https://github.com/angular/angular/commit/ef7014fe))
-  * add location service ([ea546f50](https://github.com/angular/angular/commit/ea546f50))
-
-
-#### Breaking Changes
-
-* Previously, `Directive` was the abstract base class of several directives.
-Now, `Directive` is the former `Decorator`, and `Component` inherits from it.
-
- ([f75a50c1](https://github.com/angular/angular/commit/f75a50c1))
-* A dynamic component is just a component that has no @View annotation…
- ([8faf6364](https://github.com/angular/angular/commit/8faf6364))
-
-
-<a name="2.0.0-alpha.21"></a>
-# 2.0.0-alpha.21 (2015-04-27)
-
-
-## Features
-
-- **dart/transform:** Dedup getters, setters, & methods
-  ([15376a6d](https://github.com/angular/angular/commit/15376a6d243740c73cf90f55525d1710cdd156f5))
-- **facade:** add isType method
-  ([e617ca63](https://github.com/angular/angular/commit/e617ca6323902bd98c0f1eb990b82f6b8d3c98e3))
-- **parser:** support === and !== operators
-  ([afe0e454](https://github.com/angular/angular/commit/afe0e454537f9252f9cf313647e649cfa464f96f),
-   [#1496](https://github.com/angular/angular/issues/1496), [#1500](https://github.com/angular/angular/issues/1500))
-- **router:** add initial implementation
-  ([1b2754da](https://github.com/angular/angular/commit/1b2754dacdd15e8fea429d56cdacb28eae76d2b1))
-- **view:** reimplemented property setters using change detection
-  ([8ccafb05](https://github.com/angular/angular/commit/8ccafb0524e3ac4c51af34ef88e0fe27482336a6))
-
-
-## Performance Improvements
-
-- **benchmarks:**
-  - benchmark that measure cost of dynamic components
-  ([427f0d02](https://github.com/angular/angular/commit/427f0d021c51ea6923edd07574a4cc74a1ef84e6))
-  - benchmark measuring cost of decorators (fixes #1479)
-  ([9fc9d535](https://github.com/angular/angular/commit/9fc9d535667c620017367877dbc2a3bc56d358b7))
-
-
-## Other (malformed commit messages)
-
-- **other:**
-  - feat: alllow specifying directives as bindings
-  ([4bab25b3](https://github.com/angular/angular/commit/4bab25b3666f4247434ad5cb871906fb063fef51),
-   [#1498](https://github.com/angular/angular/issues/1498))
-  - fix: export ShadowDom strategies
-  ([6896305e](https://github.com/angular/angular/commit/6896305e34082c246769829e4258631c1d2363d1),
-   [#1510](https://github.com/angular/angular/issues/1510), [#1511](https://github.com/angular/angular/issues/1511))
 
+<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)
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 000000000000..7ea7f3dda0cd
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,12 @@
+# Contributor Code of Conduct
+## Version 0.3b-angular
+
+As contributors and maintainers of the Angular project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.
+
+Communication through any of Angular's channels (GitHub, Gitter, IRC, mailing lists, Google+, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+
+We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Angular project to do the same.
+
+If any member of the community violates this code of conduct, the maintainers of the Angular project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate.
+
+If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at [conduct@angular.io](mailto:conduct@angular.io).
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a7fe5eedab5d..44142a7d68fc 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,6 @@
-# Contributing to Angular 2
+# Contributing to Angular
 
-We would love for you to contribute to Angular 2 and help make it even better than it is
+We would love for you to contribute to Angular and help make it even better than it is
 today! As a contributor, here are the guidelines we would like you to follow:
 
  - [Code of Conduct](#coc)
@@ -17,19 +17,27 @@ Help us keep Angular open and inclusive. Please read and follow our [Code of Con
 
 ## <a name="question"></a> Got a Question or Problem?
 
-If you have questions about how to *use* Angular, please direct them to the [Google Group][angular-group]
-discussion list or [StackOverflow][stackoverflow]. Please note that Angular 2 is still in early developer preview, and the core team's capacity to answer usage questions is limited. We are also available on [Gitter][gitter].
+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`.
 
-## <a name="issue"></a> Found an Issue?
-If you find a bug in the source code or a mistake in the documentation, you can help us by
+Stack Overflow is a much better place to ask questions since:
+
+- 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
+- Stack Overflow's voting system assures that the best answers are prominently visible.
+
+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].
+
+## <a name="issue"></a> Found a Bug?
+If you find a bug in the source code, you can help us by
 [submitting an issue](#submit-issue) to our [GitHub Repository][github]. Even better, you can
 [submit a Pull Request](#submit-pr) with a fix.
 
-## <a name="feature"></a> Want a Feature?
-You can *request* a new feature by [submitting an issue](#submit-issue) to our [GitHub
-Repository][github]. If you would like to *implement* a new feature, please submit an issue with
-a proposal for your work first, to be sure that we can use it. Angular 2 is in developer preview
-and we are not ready to accept major contributions ahead of the full release.
+## <a name="feature"></a> Missing a Feature?
+You can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub
+Repository. If you would like to *implement* a new feature, please submit an issue with
+a proposal for your work first, to be sure that we can use it.
 Please consider what kind of change it is:
 
 * For a **Major Feature**, first open an issue and outline your proposal so that it can be
@@ -40,58 +48,61 @@ and help you to craft the change so that it is successfully accepted into the pr
 ## <a name="submit"></a> Submission Guidelines
 
 ### <a name="submit-issue"></a> Submitting an Issue
-Before you submit an issue, search the archive, maybe your question was already answered.
-
-If your issue appears to be a bug, and hasn't been reported, open a new issue.
-Help us to maximize the effort we can spend fixing issues and adding new
-features, by not reporting duplicate issues.  Providing the following information will increase the
-chances of your issue being dealt with quickly:
-
-* **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
-* **Motivation for or Use Case** - explain why this is a bug for you
-* **Browsers and Operating System** - is this a problem with all browsers?
-* **Reproduce the Error** - provide a live example (using [Plunker][plunker],
-  [JSFiddle][jsfiddle] or [Runnable][runnable]) or a unambiguous set of steps.
-* **Related Issues** - has a similar issue been reported before?
-* **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
-  causing the problem (line of code or commit)
+
+Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.
+
+We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us a wealth of important information without going back & forth to you with additional questions like:
+
+- version of Angular used
+- 3rd-party libraries and their versions
+- and most importantly - a use-case that fails
+
+A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem. If plunker is not a suitable way to demonstrate the problem (for example for issues related to our npm packaging), please create a standalone git repository demonstrating the problem.
+
+We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
+
+Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you we are going to close an issue that doesn't have enough info to be reproduced.
+
+You can file new issues by filling out our [new issue form](https://github.com/angular/angular/issues/new).
+
 
 ### <a name="submit-pr"></a> Submitting a Pull Request (PR)
 Before you submit your Pull Request (PR) consider the following guidelines:
 
-* Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR
+1. Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR
   that relates to your submission. You don't want to duplicate effort.
-* Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
-  We cannot accept code without this.
-* Make your changes in a new git branch:
+1. Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
+  We cannot accept code without this. Make sure you sign with the primary email address of the Git identity that has been granted access to the Angular repository.
+1. Fork the angular/angular repo.
+1. Make your changes in a new git branch:
 
      ```shell
      git checkout -b my-fix-branch master
      ```
 
-* Create your patch, **including appropriate test cases**.
-* Follow our [Coding Rules](#rules).
-* Run the full Angular test suite, as described in the [developer documentation][dev-doc],
+1. Create your patch, **including appropriate test cases**.
+1. Follow our [Coding Rules](#rules).
+1. Run the full Angular test suite, as described in the [developer documentation][dev-doc],
   and ensure that all tests pass.
-* Commit your changes using a descriptive commit message that follows our
+1. Commit your changes using a descriptive commit message that follows our
   [commit message conventions](#commit). Adherence to these conventions
   is necessary because release notes are automatically generated from these messages.
 
      ```shell
      git commit -a
      ```
-  Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
+    Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
 
-* Push your branch to GitHub:
+1. Push your branch to GitHub:
 
     ```shell
     git push origin my-fix-branch
     ```
 
-* In GitHub, send a pull request to `angular:master`.
+1. In GitHub, send a pull request to `angular:master`.
 * If we suggest changes then:
   * Make the required updates.
-  * Re-run the Angular 2 test suites for JS and Dart to ensure tests are still passing.
+  * Re-run the Angular test suites to ensure tests are still passing.
   * Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
 
     ```shell
@@ -137,7 +148,7 @@ To ensure consistency throughout the source code, keep these rules in mind as yo
 * All public API methods **must be documented**. (Details TBC).
 * We follow [Google's JavaScript Style Guide][js-style-guide], but wrap all code at
   **100 characters**. An automated formatter is available, see
-  [DEVELOPER.md](DEVELOPER.md#clang-format).
+  [DEVELOPER.md](docs/DEVELOPER.md#clang-format).
 
 ## <a name="commit"></a> Commit Message Guidelines
 
@@ -157,32 +168,80 @@ format that includes a **type**, a **scope** and a **subject**:
 <footer>
 ```
 
+The **header** is mandatory and the **scope** of the header is optional.
+
 Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
 to read on GitHub as well as in various git tools.
 
+The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
+
+Samples: (even more [samples](https://github.com/angular/angular/commits/master))
+
+```
+docs(changelog): update changelog to beta.5
+```
+```
+fix(release): need to depend on latest rxjs and zone.js
+
+The version in our package.json gets copied to the one we publish, and users need the latest of these.
+```
+
+### Revert
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+
 ### Type
 Must be one of the following:
 
+* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
+* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
+* **docs**: Documentation only changes
 * **feat**: A new feature
 * **fix**: A bug fix
-* **docs**: Documentation only changes
-* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
-  semi-colons, etc)
-* **refactor**: A code change that neither fixes a bug nor adds a feature
 * **perf**: A code change that improves performance
-* **test**: Adding missing tests
-* **chore**: Changes to the build process or auxiliary tools and libraries such as documentation
-  generation
+* **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)
+* **test**: Adding missing tests or correcting existing tests
 
 ### Scope
-The scope could be anything specifying place of the commit change. For example
-`Compiler`, `ElementInjector`, etc.
+The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.
+
+The following is the list of supported scopes:
+
+* **animations**
+* **common**
+* **compiler**
+* **compiler-cli**
+* **core**
+* **elements**
+* **forms**
+* **http**
+* **language-service**
+* **platform-browser**
+* **platform-browser-dynamic**
+* **platform-server**
+* **platform-webworker**
+* **platform-webworker-dynamic**
+* **router**
+* **service-worker**
+* **upgrade**
+
+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
+* **docs-infra**: used for docs-app (angular.io) related changes within the /aio directory of the
+  repo
+* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all
+  packages (e.g. `style: add missing semicolons`) and for docs changes that are not related to a
+  specific package (e.g. `docs: fix typo in tutorial`).
 
 ### Subject
-The subject contains succinct description of the change:
+The subject contains a succinct description of the change:
 
 * use the imperative, present tense: "change" not "changed" nor "changes"
-* don't capitalize first letter
+* don't capitalize the first letter
 * no dot (.) at the end
 
 ### Body
@@ -193,6 +252,7 @@ The body should include the motivation for the change and contrast this with pre
 The footer should contain any information about **Breaking Changes** and is also the place to
 reference GitHub issues that this commit **Closes**.
 
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
 
 A detailed explanation can be found in this [document][commit-message-format].
 
@@ -205,17 +265,30 @@ changes to be accepted, the CLA must be signed. It's a quick process, we promise
 * For corporations we'll need you to
   [print, sign and one of scan+email, fax or mail the form][corporate-cla].
 
+<hr>
+
+  If you have more than one Git identity, you must make sure that you sign the CLA using the primary email address associated with the ID that has been granted access to the Angular repository. Git identities can be associated with more than one email address, and only one is primary. Here are some links to help you sort out multiple Git identities and email addresses:
+
+  * https://help.github.com/articles/setting-your-commit-email-address-in-git/
+  * https://stackoverflow.com/questions/37245303/what-does-usera-committed-with-userb-13-days-ago-on-github-mean
+  * https://help.github.com/articles/about-commit-email-addresses/
+  * https://help.github.com/articles/blocking-command-line-pushes-that-expose-your-personal-email-address/
+
+  Note that if you have more than one Git identity, it is important to verify that you are logged in with the same ID with which you signed the CLA, before you commit changes. If not, your PR will fail the CLA check.
+
+<hr>
+
 
 [angular-group]: https://groups.google.com/forum/#!forum/angular
 [coc]: https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md
 [commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#
 [corporate-cla]: http://code.google.com/legal/corporate-cla-v1.0.html
-[dev-doc]: https://github.com/angular/angular/blob/master/DEVELOPER.md
+[dev-doc]: https://github.com/angular/angular/blob/master/docs/DEVELOPER.md
 [github]: https://github.com/angular/angular
 [gitter]: https://gitter.im/angular/angular
 [individual-cla]: http://code.google.com/legal/individual-cla-v1.0.html
-[js-style-guide]: http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
-[jsfiddle]: http://jsfiddle.net/
+[js-style-guide]: https://google.github.io/styleguide/jsguide.html
+[jsfiddle]: http://jsfiddle.net
 [plunker]: http://plnkr.co/edit
-[runnable]: http://runnable.com/
+[runnable]: http://runnable.com
 [stackoverflow]: http://stackoverflow.com/questions/tagged/angular
diff --git a/DEVELOPER.md b/DEVELOPER.md
deleted file mode 100644
index e8691edf8aa5..000000000000
--- a/DEVELOPER.md
+++ /dev/null
@@ -1,316 +0,0 @@
-# Building and Testing Angular 2 for JS and Dart
-
-This document describes how to set up your development environment to build and test Angular, both
-JS and Dart versions. It also explains the basic mechanics of using `git`, `node`, and `npm`.
-
-* [Prerequisite Software](#prerequisite-software)
-* [Getting the Sources](#getting-the-sources)
-* [Environment Variable Setup](#environment-variable-setup)
-* [Installing NPM Modules and Dart Packages](#installing-npm-modules-and-dart-packages)
-* [Running Tests Locally](#running-tests-locally)
-* [Formatting](#clang-format)
-* [Project Information](#project-information)
-* [CI using Travis](#ci-using-travis)
-* [Transforming Dart code](#transforming-dart-code)
-* [Debugging](#debugging)
-
-See the [contribution guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md)
-if you'd like to contribute to Angular.
-
-## Prerequisite Software
-
-Before you can build and test Angular, you must install and configure the
-following products on your development machine:
-
-* [Dart](https://www.dartlang.org) (version ` >=1.10.0-dev.1.10 <2.0.0`), specifically the Dart-SDK and
-  Dartium (a version of [Chromium](http://www.chromium.org) with native support for Dart through
-  the Dart VM). One of the **simplest** ways to get both is to install the **Dart Editor bundle**,
-  which includes the editor, SDK and Dartium. See the [Dart tools](https://www.dartlang.org/tools)
-  download [page for instructions](https://www.dartlang.org/tools/download.html). You can also
-  download both **stable** and **dev** channel versions from the [download
-  archive](https://www.dartlang.org/tools/download-archive).
-
-* [Git](http://git-scm.com) and/or the **GitHub app** (for [Mac](http://mac.github.com) or
-  [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), which is used to run a development web server, run tests, and
-  generate distributable files. We also use Node's Package Manager, `npm`, which comes with Node.
-  Depending on your system, you can install Node either from source or as a pre-packaged bundle.
-
-* [Chrome Canary](https://www.google.com/chrome/browser/canary.html), a version of Chrome with
-  bleeding edge functionality, built especially for developers (and early adopters).
-
-* [Bower](http://bower.io/).
-
-
-## Getting the Sources
-
-Fork and clone the Angular repository:
-
-1. Login to your GitHub account or create one by following the instructions given
-   [here](https://github.com/signup/free).
-2. [Fork](http://help.github.com/forking) the [main Angular
-   repository](https://github.com/angular/angular).
-3. Clone your fork of the Angular repository and define an `upstream` remote pointing back to
-   the Angular repository that you forked in the first place.
-
-```shell
-# Clone your GitHub repository:
-git clone git@github.com:<github username>/angular.git
-
-# Go to the Angular directory:
-cd angular
-
-# Add the main Angular repository as an upstream remote to your repository:
-git remote add upstream https://github.com/angular/angular.git
-```
-
-## Environment Variable Setup
-
-Define the environment variables listed below. These are mainly needed for the testing. The
-notation shown here is for [`bash`](http://www.gnu.org/software/bash); adapt as appropriate for
-your favorite shell.
-
-Examples given below of possible values for initializing the environment variables assume **Mac OS
-X** and that you have installed the Dart Editor in the directory named by
-`DART_EDITOR_DIR=/Applications/dart`. This is only for illustrative purposes.
-
-```shell
-# DARTIUM_BIN: path to a Dartium browser executable; used by Karma to run Dart tests
-export DARTIUM_BIN="$DART_EDITOR_DIR/chromium/Chromium.app/Contents/MacOS/Chromium"
-```
-
-Add the Dart SDK `bin` directory to your path and/or define `DART_SDK` (this is also detailed
-[here](https://www.dartlang.org/tools/pub/installing.html)):
-
-```shell
-# DART_SDK: path to a Dart SDK directory
-export DART_SDK="$DART_EDITOR_DIR/dart-sdk"
-
-# Update PATH to include the Dart SDK bin directory
-PATH+=":$DART_SDK/bin"
-```
-
-## Installing NPM Modules and Dart Packages
-
-Next, install the JavaScript modules and Dart packages needed to build and test Angular:
-
-```shell
-# Install Angular project dependencies (package.json)
-npm install
-```
-
-**Optional**: In this document, we make use of project local `npm` package scripts and binaries
-(stored under `./node_modules/.bin`) by prefixing these command invocations with `$(npm bin)`; in
-particular `gulp` and `protractor` commands. If you prefer, you can drop this path prefix by either:
-
-*Option 1*: globally installing these two packages as follows:
-
-* `npm install -g gulp` (you might need to prefix this command with `sudo`)
-* `npm install -g protractor` (you might need to prefix this command with `sudo`)
-
-Since global installs can become stale, and required versions can vary by project, we avoid their
-use in these instructions.
-
-*Option 2*: 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`.
-
-## Build commands
-
-To build Angular and prepare tests, run:
-
-```shell
-$(npm bin)/gulp build
-```
-
-Notes:
-* Results are put in the `dist` folder.
-* This will also run `pub get` for the subfolders in `modules` and run `dartanalyzer` for
-  every file that matches `<module>/src/<module>.dart`, e.g. `di/src/di.dart`.
-
-You can selectively build either the JS or Dart versions as follows:
-
-* `$(npm bin)/gulp build.js`
-* `$(npm bin)/gulp build.dart`
-
-Also note that in order for the whole test suite to succeed you will need to generate the docs by running:
-
-```shell
-$(npm bin)/gulp docs
-```
-
-To clean out the `dist` folder, run:
-
-```shell
-$(npm bin)/gulp clean
-```
-
-## Running Tests Locally
-
-### Full test suite
-
-* `npm test`: full test suite for both JS and Dart versions of Angular. These are the same tests
-  that run on Travis.
-
-You can selectively run either the JS or Dart versions as follows:
-
-* `$(npm bin)/gulp test.all.js`
-* `$(npm bin)/gulp test.all.dart`
-
-### Unit tests
-
-You can run just the unit tests as follows:
-
-* `$(npm bin)/gulp test.unit.js`: JS tests in a browser; runs in **watch mode** (i.e.
-   watches the test files for changes and re-runs tests when files are updated).
-* `$(npm bin)/gulp test.unit.cjs`: JS tests in NodeJS; runs in **watch mode**.
-* `$(npm bin)/gulp test.unit.dart`: Dart tests in Dartium; runs in **watch mode**.
-
-If you prefer running tests in "single-run" mode rather than watch mode use:
-
-* `$(npm bin)/gulp test.unit.js/ci`
-* `$(npm bin)/gulp test.unit.cjs/ci`
-* `$(npm bin)/gulp test.unit.dart/ci`
-
-The task updates the dist folder with transpiled code whenever a source or test file changes, and
-Karma is run against the new output.
-
-**Note**: If you want to only run a single test you can alter the test you wish to run by changing
-`it` to `iit` or `describe` to `ddescribe`. This will only run that individual test and make it
-much easier to debug. `xit` and `xdescribe` can also be useful to exclude a test and a group of
-tests respectively.
-
-### E2E tests
-
-1. `$(npm bin)/gulp build.js.cjs` (builds benchpress and tests into `dist/js/cjs` folder).
-2. `$(npm bin)/gulp serve.js.prod serve.js.dart2js` (runs a local webserver).
-3. `$(npm bin)/protractor protractor-js.conf.js`: JS e2e tests.
-4. `$(npm bin)/protractor protractor-dart2js.conf.js`: dart2js e2e tests.
-
-Angular specific command line options when running protractor:
-  - `$(npm bin)/protractor protractor-{js|dart2js}-conf.js --ng-help`
-
-### Performance tests
-
-1. `$(npm bin)/gulp build.js.cjs` (builds benchpress and tests into `dist/js/cjs` folder)
-2. `$(npm bin)/gulp serve.js.prod serve.js.dart2js` (runs a local webserver)
-3. `$(npm bin)/protractor protractor-js.conf.js --benchmark`: JS performance tests
-4. `$(npm bin)/protractor protractor-dart2js.conf.js --benchmark`: dart2js performance tests
-
-Angular specific command line options when running protractor (e.g. force gc, ...):
-`$(npm bin)/protractor protractor-{js|dart2js}-conf.js --ng-help`
-
-## Formatting with <a name="clang-format">clang-format</a>
-
-We use [clang-format](http://clang.llvm.org/docs/ClangFormat.html) to automatically enforce code
-style for our TypeScript code. This allows us to focus our code reviews more on the content, and
-less on style nit-picking. It also lets us encode our style guide in the `.clang-format` file in the
-repository, allowing many tools and editors to share our settings.
-
-To check the formatting of your code, run
-
-    gulp check-format
-
-Note that the continuous build on Travis runs `gulp enforce-format`. Unlike the `check-format` task,
-this will actually fail the build if files aren't formatted according to the style guide.
-
-Your life will be easier if you include the formatter in your standard workflow. Otherwise, you'll
-likely forget to check the formatting, and waste time waiting for a build on Travis that fails due
-to some whitespace difference.
-
-* Install clang-format with `npm install -g clang-format`.
-* Use `clang-format -i [file name]` to format a file (or multiple).
-  Note that `clang-format` tries to load a `clang-format` node module close to the sources being
-  formatted, or from the `$CWD`, and only then uses the globally installed one - so the version used
-  should automatically match the one required by the project.
-  Use `clang-format -version` in case you get confused.
-* Use `gulp enforce-format` to check if your code is `clang-format` clean. This also gives
-  you a command line to format your code.
-* `clang-format` also includes a git hook, run `git clang-format` to format all files you
-  touched.
-* You can run this as a **git pre-commit hook** to automatically format your delta regions when you
-  commit a change. In the angular repo, run
-
-```
-    $ echo -e '#!/bin/sh\nexec git clang-format' > .git/hooks/pre-commit
-    $ chmod u+x !$
-```
-
-* **WebStorm** can run clang-format on the current file.
-  1. Under Preferences, open Tools > External Tools.
-  1. Plus icon to Create Tool
-  1. Fill in the form:
-    - Name: clang-format
-    - Description: Format
-    - Synchronize files after execution: checked
-    - Open console: not checked
-    - Show in: Editor menu
-    - Program: [path to clang-format, try `$ echo $(npm config get prefix)/bin/clang-format`]
-    - Parameters: `-i -style=file $FilePath$`
-    - Working directory: `$ProjectFileDir$`
-* `clang-format` integrations are also available for many popular editors (`vim`, `emacs`,
-  `Sublime Text`, etc.).
-
-## Project Information
-
-### Folder structure
-
-* `modules/*`: modules that will be loaded in the browser
-* `tools/*`: tools that are needed to build Angular
-* `dist/*`: build files are placed here.
-
-### File suffixes
-
-* `*.ts`: TypeScript files that get transpiled to Dart and EcmaScript 5/6
-* `*.dart`: Dart files that don't get transpiled
-
-## CI using Travis
-
-For instructions on setting up Continuous Integration using Travis, see the instructions given
-[here](https://github.com/angular/angular.dart/blob/master/travis.md).
-
-## Transforming Dart code
-
-See the [wiki](//github.com/angular/angular/wiki/Angular-2-Dart-Transformer).
-
-## Debugging
-
-### Debug the transpiler
-
-If you need to debug the transpiler:
-
-- add a `debugger;` statement in the transpiler code,
-- from the root folder, execute `node debug $(npm bin)/gulp build` to enter the node
-  debugger
-- press "c" to execute the program until you reach the `debugger;` statement,
-- you can then type "repl" to enter the REPL and inspect variables in the context.
-
-See the [Node.js manual](http://nodejs.org/api/debugger.html) for more information.
-
-Notes:
-- You can also execute `node $(npm bin)/karma start karma-dart.conf.js` depending on which
-  code you want to debug (the former will process the "modules" folder while the later processes
-  the transpiler specs).
-- You can also add `debugger;` statements in the specs (JavaScript). The execution will halt when
-  the developer tools are opened in the browser running Karma.
-
-### Debug the tests
-
-If you need to debug the tests:
-
-- add a `debugger;` statement to the test you want to debug (or the source code),
-- execute karma `$(npm bin)/gulp test.js`,
-- press the top right "DEBUG" button,
-- open the DevTools and press F5,
-- the execution halts at the `debugger;` statement
-
-**Note (WebStorm users)**:
-
-1. Create a Karma run config from WebStorm.
-2. Then in the "Run" menu, press "Debug 'karma-js.conf.js'", and WebStorm will stop in the generated
-   code on the `debugger;` statement.
-3. You can then step into the code and add watches.
-
-The `debugger;` statement is needed because WebStorm will stop in a transpiled file. Breakpoints in
-the original source files are not supported at the moment.
diff --git a/LICENSE b/LICENSE
index e06d2081865a..f868eadca1df 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,202 +1,21 @@
-Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "{}"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright {yyyy} {name of copyright owner}
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
-
+The MIT License
+
+Copyright (c) 2014-2018 Google, Inc. http://angular.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
index 5759d4056037..bb62a9035d5c 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,22 @@
-[![Build Status](https://travis-ci.org/angular/angular.svg?branch=master)](https://travis-ci.org/angular/angular) 
+[![Build Status](https://travis-ci.org/angular/angular.svg?branch=master)](https://travis-ci.org/angular/angular)
+[![CircleCI](https://circleci.com/gh/angular/angular/tree/master.svg?style=shield)](https://circleci.com/gh/angular/angular/tree/master)
+[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06)](https://www.browserstack.com/automate/public-build/LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06)
 [![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)](http://issuestats.com/github/angular/angular)
-[![Issue Stats](http://issuestats.com/github/angular/angular/badge/issue)](http://issuestats.com/github/angular/angular)
-[![npm version](https://badge.fury.io/js/angular2.svg)](http://badge.fury.io/js/angular2)
-[![Downloads](http://img.shields.io/npm/dm/angular2.svg)](https://npmjs.org/package/angular2)
+[![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/@angular/core)
 
-Angular 
-=========
 
-Angular is a development platform for building mobile and desktop web applications. This is the
-repository for [Angular 2][ng2], both the JavaScript (JS) and [Dart][dart] versions.
+# Angular
 
-Angular 2 is currently in **Developer Preview**. We recommend using Angular 1.X for production
-applications:
-
-* [AngularJS][ngJS]: [angular/angular.js](http://github.com/angular/angular.js).
-* [AngularDart][ngDart]: [angular/angular.dart](http://github.com/angular/angular.dart).
+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]
+[Get started in 5 minutes][quickstart].
+
 
-## Setup & Install Angular 2
+## Changelog
 
-Follow the instructions given on the [Angular download page][download].
+[Learn about the latest improvements][changelog]. 
 
 
 ## Want to help?
@@ -31,12 +24,8 @@ Follow the instructions given on the [Angular download page][download].
 Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our
 guidelines for [contributing][contributing] and then check out one of our issues in the [hotlist: community-help](https://github.com/angular/angular/labels/hotlist%3A%20community-help).
 
-
-[contributing]: http://github.com/angular/angular/blob/master/CONTRIBUTING.md
-[dart]: http://www.dartlang.org
-[dartium]: http://www.dartlang.org/tools/dartium
-[download]: http://angular.io/download
-[quickstart]: https://angular.io/docs/js/latest/quickstart.html
-[ng2]: http://angular.io
-[ngDart]: http://angulardart.org
-[ngJS]: http://angularjs.org
+[browserstack]: https://www.browserstack.com/automate/public-build/LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06
+[contributing]: https://github.com/angular/angular/blob/master/CONTRIBUTING.md
+[quickstart]: https://angular.io/guide/quickstart
+[changelog]: https://github.com/angular/angular/blob/master/CHANGELOG.md
+[ng]: https://angular.io
diff --git a/TRIAGE_AND_LABELS.md b/TRIAGE_AND_LABELS.md
deleted file mode 100644
index 80971aaf15ac..000000000000
--- a/TRIAGE_AND_LABELS.md
+++ /dev/null
@@ -1,167 +0,0 @@
-# Triage Process and Github Labels for Angular 2
-
-This document describes how the Angular team uses labels and milestones to triage issues on github.
-
-# Issues and PRs
-## Triaged vs Untriaged Issues
-
-Every triaged issue must have four attributes assigned to it:
-
-* `priority` -- P0 through P4. P0 issues are "drop everything and do this now". P4 are nice to have.
-* `component` -- Which area of Angular knowledge this relates to.
-* `effort` -- Rough assessment of how much work this issue is. E.g. `effort: easy` means 
-"probably a few hours of work".
-* `type` -- Whether this issue is a bug, feature, or other kind of task.
-
-Untriaged issues are any issues in the queue that don't yet have these four attributes. 
-
-You can view a report of untriaged issues here, in our 
-[Angular Triage Dashboard](http://mhevery.github.io/github_issues/).
-
-Issues should also have a clear action to complete that can be addressed or resolved within the 
-scope of Angular 2. We'll close issues that don't meet these criteria. 
-
-### 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 Untriaged PRs
-
-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: 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` -- OK to merge this as soon as tests are green, `pr_state: LGTM`, and `CLA: 
-yes` are true. assignee (or anyone else) can merge.
-* `pr_action: review` -- work is complete and comment is needed from the assignee.
-
-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.
-
-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 
-uncontroversial change.
-
-PRs do not need to be assigned to milestones, unless a milestone release should be held for that 
-PR to land.
-
-Victor (`vsavkin`) and Tobias (`tbosch`) are owners of the PR queue. Here is a list of [current 
-untriaged PRs](https://github.com/angular/angular/pulls?utf8=%E2%9C%93&q=is%3Aopen+no%3Amilestone+is%3Apr+-label%3A%22pr_action%3A+cleanup%22+-label%3A%22pr_action%3A+merge%22+-label%3A%22pr_action%3A+review%22+-label%3A%22pr_action%3A+discuss%22+-label%3A%22pr_state%3A+blocked%22+-label%3A%22pr_state%3A+WIP%22+).
- 
-# Prioritization of Work
-
-What should you be working on?
-
-1. Any PRs that are assigned to you that don't have `pr_state: WIP` or `pr_state: blocked`
-1. Any issues that are assigned to you in the lowest-numbered Milestone
-1. Any issues that are assigned to you in any Milestone
-
-If there are no issues assigned to you in any Milestone, pick an issue, self-assign it, and add 
-it to the most appropriate Milestone based on effort.
-
-Here are some suggestions for what to work on next:
-
-* Filter for issues in a component that you are knowledgeable about, and pick something that has a
- high priority.
-* Filter for any small effort task that has the special `cust: GT` or `cust:Ionic` tags, 
-and priority > P3.
-* Add a new task that's really important, add `component`, `priority`, `effort`, `type` and 
-assign it to yourself and the most appropriate milestone.
-
-# Labels Used in Triage
-
-## Priority
-How urgent is this issue? We use priority to determine what should be worked on in each new 
-milestone.
-
-* `P0: critical` -- drop everything to work on this
-* `P1: urgent` -- resolve quickly in the current milestone. people are blocked
-* `P2: required` -- needed for development but not urgent yet. workaround exists, or e.g. new API
-* `P3: important` -- must complete before Angular 2 is ready for release
-* `P4: nice to have` -- a good idea, but maybe not until after release
-
-
-## Effort
-Rough, non-binding estimate of how much work this issue represents. Please change this assessment
-for anything you're working on to better reflect reality.
-
-* `effort: easy` -- straightforward issue that can be resolved in a few hours, e.g. < 1 day of work.
-* `effort: medium` -- issue that will be a few days of work. Can be completed within a single 
-milestone.
-* `effort: tough` -- issue that will likely take more than 1 milestone to complete.
-
-<!-- We don't like these label names as 
-they're not absolute (what is one developer-hour, really?) but decided it wasn't worth arguing 
-over terms. -->
-
-## Component
-Which area of Angular knowledge is this issue most closely related to? Helpful when deciding what
-to work on next.
-
- * `comp: benchpress` -- benchmarks and performance testing &rarr; *tbosch*, *crossj*
- * `comp: build/dev-productivity` -- build process, e.g. CLI and related tasks &rarr; *iminar*, *caitp*
- * `comp: build/pipeline` -- build pipeline, e.g. ts2dart &rarr; *mprobst*, *alexeagle*
- * `comp: core` -- general core Angular issues, not related to a sub-category (see below) &rarr; 
-   *mhevery*
- * `comp: core/animations` -- animations framework &rarr; *matsko*
- * `comp: core/change_detection` -- change detection &rarr; *vsavkin*
- * `comp: core/di` -- dependency injection &rarr; *vicb*, *rkirov*
- * `comp: core/directives` -- directives 
- * `comp: core/forms` -- forms &rarr; *vsavkin*
- * `comp: core/pipes` -- pipes
- * `comp: core/view` -- runtime processing of the `View`s
- * `comp: core/view/compiler` -- static analysis of the templates which generate `ProtoView`s.
- * `comp: core/testbed` -- e2e tests and support for them
- * `comp: dart-transformer` -- Dart transforms &rarr; *kegluneq*, *jakemac* 
- * `comp: data-access` -- &rarr; *jeffbcross*
- * `comp: docs` -- API docs and doc generation &rarr; *naomiblack*, *petebacondarwin*
- * `comp: material-components` -- Angular Material components built in Angular 2 &rarr; *jelbourn*
- * `comp: router` -- Component Router &rarr; *btford*, *igorminar*, *matsko*
- * `comp: wrenchjs`
-
-## Type
-What kind of problem is this?
-
-* `type RFC / discussion / question`
-* `type bug`
-* `type chore`
-* `type feature`
-* `type performance`
-* `type refactor`
-
-## Special Labels
-
-### action:design
-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` should be merged into master.
-
-### cust
-This is an issue causing user pain for early adopter customers `cust: GT` or `cust: Ionic`.
-
-### WORKS_AS_INTENDED
-
-Only used on closed issues, to indicate to the reporter why we closed it.
diff --git a/WORKSPACE b/WORKSPACE
new file mode 100644
index 000000000000..82057ef80236
--- /dev/null
+++ b/WORKSPACE
@@ -0,0 +1,170 @@
+workspace(name = "angular")
+
+#
+# Download Bazel toolchain dependencies as needed by build actions
+#
+
+http_archive(
+    name = "build_bazel_rules_nodejs",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/archive/0.11.4.zip"],
+    strip_prefix = "rules_nodejs-0.11.4",
+    sha256 = "c31c4ead696944a50fad2b3ee9dfbbeffe31a8dcca0b21b9bf5b3e6c6b069801",
+)
+
+http_archive(
+    name = "bazel_skylib",
+    urls = ["https://github.com/bazelbuild/bazel-skylib/archive/0.3.1.zip"],
+    strip_prefix = "bazel-skylib-0.3.1",
+    sha256 = "95518adafc9a2b656667bbf517a952e54ce7f350779d0dd95133db4eb5c27fb1",
+)
+
+http_archive(
+    name = "io_bazel_rules_webtesting",
+    url = "https://github.com/bazelbuild/rules_webtesting/archive/0.2.1.zip",
+    strip_prefix = "rules_webtesting-0.2.1",
+    sha256 = "7d490aadff9b5262e5251fa69427ab2ffd1548422467cb9f9e1d110e2c36f0fa",
+)
+
+http_archive(
+    name = "build_bazel_rules_typescript",
+    url = "https://github.com/bazelbuild/rules_typescript/archive/0.16.0.zip",
+    strip_prefix = "rules_typescript-0.16.0",
+    sha256 = "e65c5639a42e2f6d3f9d2bda62487d6b42734830dda45be1620c3e2b1115070c",
+)
+
+http_archive(
+    name = "io_bazel_rules_go",
+    url = "https://github.com/bazelbuild/rules_go/releases/download/0.10.3/rules_go-0.10.3.tar.gz",
+    sha256 = "feba3278c13cde8d67e341a837f69a029f698d7a27ddbb2a202be7a10b22142a",
+)
+
+http_archive(
+    name = "io_bazel_rules_sass",
+    url = "https://github.com/bazelbuild/rules_sass/archive/0.1.0.zip",
+    strip_prefix = "rules_sass-0.1.0",
+    sha256 = "b243c4d64f054c174051785862ab079050d90b37a1cef7da93821c6981cb9ad4",
+)
+
+# This commit matches the version of buildifier in angular/ngcontainer
+# If you change this, also check if it matches the version in the angular/ngcontainer
+# version in /.circleci/config.yml
+BAZEL_BUILDTOOLS_VERSION = "82b21607e00913b16fe1c51bec80232d9d6de31c"
+
+http_archive(
+    name = "com_github_bazelbuild_buildtools",
+    url = "https://github.com/bazelbuild/buildtools/archive/%s.zip" % BAZEL_BUILDTOOLS_VERSION,
+    strip_prefix = "buildtools-%s" % BAZEL_BUILDTOOLS_VERSION,
+    sha256 = "edb24c2f9c55b10a820ec74db0564415c0cf553fa55e9fc709a6332fb6685eff",
+)
+
+# Fetching the Bazel source code allows us to compile the Skylark linter
+http_archive(
+    name = "io_bazel",
+    url = "https://github.com/bazelbuild/bazel/archive/968f87900dce45a7af749a965b72dbac51b176b3.zip",
+    strip_prefix = "bazel-968f87900dce45a7af749a965b72dbac51b176b3",
+    sha256 = "e373d2ae24955c1254c495c9c421c009d88966565c35e4e8444c082cb1f0f48f",
+)
+
+http_archive(
+    name = "io_bazel_skydoc",
+    # TODO: switch to upstream when https://github.com/bazelbuild/skydoc/pull/103 is merged
+    url = "https://github.com/alexeagle/skydoc/archive/fe2e9f888d28e567fef62ec9d4a93c425526d701.zip",
+    strip_prefix = "skydoc-fe2e9f888d28e567fef62ec9d4a93c425526d701",
+    sha256 = "7bfb5545f59792a2745f2523b9eef363f9c3e7274791c030885e7069f8116016",
+)
+
+# We have a source dependency on the Devkit repository, because it's built with
+# Bazel.
+# This allows us to edit sources and have the effect appear immediately without
+# re-packaging or "npm link"ing.
+# Even better, things like aspects will visit the entire graph including
+# ts_library rules in the devkit repository.
+http_archive(
+    name = "angular_cli",
+    url = "https://github.com/angular/angular-cli/archive/v6.1.0-rc.0.zip",
+    strip_prefix = "angular-cli-6.1.0-rc.0",
+    sha256 = "8cf320ea58c321e103f39087376feea502f20eaf79c61a4fdb05c7286c8684fd",
+)
+
+http_archive(
+    name = "org_brotli",
+    url = "https://github.com/google/brotli/archive/f9b8c02673c576a3e807edbf3a9328e9e7af6d7c.zip",
+    strip_prefix = "brotli-f9b8c02673c576a3e807edbf3a9328e9e7af6d7c",
+    sha256 = "8a517806d2b7c8505ba5c53934e7d7c70d341b68ffd268e9044d35b564a48828",
+)
+
+#
+# Point Bazel to WORKSPACEs that live in subdirectories
+#
+
+local_repository(
+    name = "rxjs",
+    path = "node_modules/rxjs/src",
+)
+
+# Point to the integration test workspace just so that Bazel doesn't descend into it
+# when expanding the //... pattern
+local_repository(
+    name = "bazel_integration_test",
+    path = "integration/bazel",
+)
+
+#
+# Load and install our dependencies downloaded above.
+#
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
+
+check_bazel_version("0.15.0")
+node_repositories(
+  package_json = ["//:package.json"],
+  preserve_symlinks = True,
+)
+
+load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
+
+go_rules_dependencies()
+go_register_toolchains()
+
+load("@io_bazel_rules_webtesting//web:repositories.bzl", "browser_repositories", "web_test_repositories")
+
+web_test_repositories()
+browser_repositories(
+    chromium = True,
+    firefox = True,
+)
+
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
+
+ts_setup_workspace()
+
+load("@angular//:index.bzl", "ng_setup_workspace")
+
+ng_setup_workspace()
+
+#
+# Ask Bazel to manage these toolchain dependencies for us.
+# Bazel will run `yarn install` when one of these toolchains is requested during
+# a build.
+#
+
+yarn_install(
+    name = "ts-api-guardian_runtime_deps",
+    package_json = "//tools/ts-api-guardian:package.json",
+    yarn_lock = "//tools/ts-api-guardian:yarn.lock",
+)
+
+yarn_install(
+    name = "http-server_runtime_deps",
+    package_json = "//tools/http-server:package.json",
+    yarn_lock = "//tools/http-server:yarn.lock",
+)
+
+##################################
+# Skylark documentation generation
+
+load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
+sass_repositories()
+
+load("@io_bazel_skydoc//skylark:skylark.bzl", "skydoc_repositories")
+skydoc_repositories()
diff --git a/aio/.gitignore b/aio/.gitignore
new file mode 100644
index 000000000000..4790f4f2f739
--- /dev/null
+++ b/aio/.gitignore
@@ -0,0 +1,49 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/out-tsc
+/src/generated
+/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
+debug.log
+npm-debug.log
+testem.log
+/typings
+yarn-error.log
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+protractor-results*.txt
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# copied dependencies
+src/assets/js/lunr*
diff --git a/aio/README.md b/aio/README.md
new file mode 100644
index 000000000000..a773f7f652c8
--- /dev/null
+++ b/aio/README.md
@@ -0,0 +1,142 @@
+# Angular documentation project (https://angular.io)
+
+Everything in this folder is part of the documentation project. This includes
+
+* 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 live-example and zip files from the examples.
+
+## Developer tasks
+
+We use [Yarn](https://yarnpkg.com) 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:
+
+* `yarn` - install all the dependencies.
+* `yarn setup` - install all the dependencies, boilerplate, stackblitz, zips and run dgeni on the docs.
+* `yarn setup-local` - same as `setup`, but use the locally built Angular packages for aio and docs examples boilerplate.
+
+* `yarn build` - create a production build of the application (after installing dependencies, boilerplate, etc).
+* `yarn build-local` - same as `build`, but use `setup-local` instead of `setup`.
+
+* `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` - run all the unit tests once.
+* `yarn test --watch` - 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.
+
+* `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.
+
+* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally. Add the option `--local` to use your local version of Angular contained in the "dist" folder.
+* `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
+* `yarn generate-stackblitz` - generate the stackblitz 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.
+
+* `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"
+  - `yarn example-e2e --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
+
+* `yarn build-ie-polyfills` - generates a js file of polyfills that can be loaded in Internet Explorer.
+
+## Developing on Windows
+The `packages/` directory may contain Linux-specific symlinks, which are not recognized by Windows.
+These unresolved links cause the docs generation process to fail because it cannot locate certain files.
+
+> Hint: The following steps require administration rights or [Windows Developer Mode](https://docs.microsoft.com/en-us/windows/uwp/get-started/enable-your-device-for-development) enabled!
+
+To fix this problem, run `scripts/windows/create-symlinks.sh`. This command creates temporary files where the symlinks used to be. Make sure not to commit those files with your documentation changes.
+When you are done making and testing your documentation changes, you can restore the original symlinks and delete the temporary files by running `scripts/windows/remove-symlinks.sh`. 
+
+It's necessary to remove the temporary files, because otherwise they're displayed as local changes in your git working copy and certain operations are blocked.
+
+## Using ServiceWorker locally
+
+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).
+
+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`.
+
+For more details see #16745.
+
+
+## Guide to authoring
+
+There are two types of content in the documentation:
+
+* **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.
+
+* **Code examples**: code examples need to be testable to ensure their accuracy.
+Also, our examples have a specific look and feel and allow the user to copy the source code. For larger
+examples they are rendered in a tabbed interface (e.g. template, HTML, and TypeScript on separate
+tabs). Additionally, some are live examples, which provide links where the code can be edited, executed, and/or downloaded. For details on working with code examples, please read the [Code snippets](https://angular.io/guide/docs-style-guide#code-snippets), [Source code markup](https://angular.io/guide/docs-style-guide#source-code-markup), and [Live examples](https://angular.io/guide/docs-style-guide#live-examples) pages of the [Authors Style Guide](https://angular.io/guide/docs-style-guide).
+
+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 setup
+yarn start
+```
+
+* Open a second terminal and start watching the docs
+
+```bash
+yarn docs-watch
+```
+
+>Alternatively, try the consolidated `serve-and-sync` command that builds, watches and serves in the same terminal window
+```bash
+yarn serve-and-sync
+```
+
+* 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.
+
+* If you get a build error complaining about examples or any other odd behavior, be sure to consult
+the [Authors Style Guide](https://angular.io/guide/docs-style-guide).
diff --git a/aio/aio-builds-setup/dockerbuild/.dockerignore b/aio/aio-builds-setup/dockerbuild/.dockerignore
new file mode 100644
index 000000000000..a53938b615eb
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/.dockerignore
@@ -0,0 +1,3 @@
+scripts-js/lib
+scripts-js/node_modules
+scripts-js/**/test
diff --git a/aio/aio-builds-setup/dockerbuild/Dockerfile b/aio/aio-builds-setup/dockerbuild/Dockerfile
new file mode 100644
index 000000000000..206af101ce1a
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/Dockerfile
@@ -0,0 +1,168 @@
+# Image metadata and config
+FROM debian:jessie
+
+LABEL name="angular.io PR preview" \
+      description="This image implements the PR preview functionality for angular.io." \
+      vendor="Angular" \
+      version="1.0"
+
+VOLUME /aio-secrets
+VOLUME /var/www/aio-builds
+
+EXPOSE 80 443
+
+
+# Build-time args and env vars
+ARG      AIO_BUILDS_DIR=/var/www/aio-builds
+ARG TEST_AIO_BUILDS_DIR=/tmp/aio-builds
+ARG      AIO_DOMAIN_NAME=ngbuilds.io
+ARG TEST_AIO_DOMAIN_NAME=$AIO_DOMAIN_NAME.localhost
+ARG      AIO_GITHUB_ORGANIZATION=angular
+ARG TEST_AIO_GITHUB_ORGANIZATION=angular
+ARG      AIO_GITHUB_TEAM_SLUGS=team,aio-contributors
+ARG TEST_AIO_GITHUB_TEAM_SLUGS=team,aio-contributors
+ARG      AIO_NGINX_HOSTNAME=$AIO_DOMAIN_NAME
+ARG TEST_AIO_NGINX_HOSTNAME=$TEST_AIO_DOMAIN_NAME
+ARG      AIO_NGINX_PORT_HTTP=80
+ARG TEST_AIO_NGINX_PORT_HTTP=8080
+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
+ARG TEST_AIO_UPLOAD_MAX_SIZE=20971520
+ARG      AIO_UPLOAD_PORT=3000
+ARG TEST_AIO_UPLOAD_PORT=3001
+
+ENV AIO_BUILDS_DIR=$AIO_BUILDS_DIR                     TEST_AIO_BUILDS_DIR=$TEST_AIO_BUILDS_DIR                     \
+    AIO_DOMAIN_NAME=$AIO_DOMAIN_NAME                   TEST_AIO_DOMAIN_NAME=$TEST_AIO_DOMAIN_NAME                   \
+    AIO_GITHUB_ORGANIZATION=$AIO_GITHUB_ORGANIZATION   TEST_AIO_GITHUB_ORGANIZATION=$TEST_AIO_GITHUB_ORGANIZATION   \
+    AIO_GITHUB_TEAM_SLUGS=$AIO_GITHUB_TEAM_SLUGS       TEST_AIO_GITHUB_TEAM_SLUGS=$TEST_AIO_GITHUB_TEAM_SLUGS       \
+    AIO_LOCALCERTS_DIR=/etc/ssl/localcerts             TEST_AIO_LOCALCERTS_DIR=/etc/ssl/localcerts-test             \
+    AIO_NGINX_HOSTNAME=$AIO_NGINX_HOSTNAME             TEST_AIO_NGINX_HOSTNAME=$TEST_AIO_NGINX_HOSTNAME             \
+    AIO_NGINX_LOGS_DIR=/var/log/aio/nginx              TEST_AIO_NGINX_LOGS_DIR=/var/log/aio/nginx-test              \
+    AIO_NGINX_PORT_HTTP=$AIO_NGINX_PORT_HTTP           TEST_AIO_NGINX_PORT_HTTP=$TEST_AIO_NGINX_PORT_HTTP           \
+    AIO_NGINX_PORT_HTTPS=$AIO_NGINX_PORT_HTTPS         TEST_AIO_NGINX_PORT_HTTPS=$TEST_AIO_NGINX_PORT_HTTPS         \
+    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
+
+
+# Create directory for logs
+RUN mkdir /var/log/aio
+
+
+# Add extra package sources
+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
+RUN apt-get update -y && apt-get install -y \
+    chkconfig \
+    cron \
+    dnsmasq \
+    nano \
+    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
+RUN crontab /etc/cron.d/aio-builds-cleanup
+RUN printenv | grep AIO_ >> /etc/environment
+
+
+# Set up dnsmasq
+COPY dnsmasq/dnsmasq.conf /etc/
+RUN sed -i "s|{{\$AIO_NGINX_HOSTNAME}}|$AIO_NGINX_HOSTNAME|g" /etc/dnsmasq.conf
+RUN sed -i "s|{{\$AIO_UPLOAD_HOSTNAME}}|$AIO_UPLOAD_HOSTNAME|g" /etc/dnsmasq.conf
+RUN sed -i "s|{{\$TEST_AIO_NGINX_HOSTNAME}}|$TEST_AIO_NGINX_HOSTNAME|g" /etc/dnsmasq.conf
+RUN sed -i "s|{{\$TEST_AIO_UPLOAD_HOSTNAME}}|$TEST_AIO_UPLOAD_HOSTNAME|g" /etc/dnsmasq.conf
+
+
+# Set up SSL/TLS certificates
+COPY nginx/create-selfsigned-cert.sh /tmp/
+RUN chmod a+x /tmp/create-selfsigned-cert.sh
+RUN /tmp/create-selfsigned-cert.sh "selfcert-prod" "$AIO_NGINX_HOSTNAME" "$AIO_LOCALCERTS_DIR"
+RUN /tmp/create-selfsigned-cert.sh "selfcert-test" "$TEST_AIO_NGINX_HOSTNAME" "$TEST_AIO_LOCALCERTS_DIR"
+RUN rm /tmp/create-selfsigned-cert.sh
+RUN update-ca-certificates
+
+
+# Set up nginx (for production and testing)
+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/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/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
+RUN pm2 startup systemv -u root > /dev/null
+RUN chkconfig pm2-root on
+
+
+# Set up the shell scripts
+COPY scripts-sh/ $AIO_SCRIPTS_SH_DIR/
+RUN chmod a+x $AIO_SCRIPTS_SH_DIR/*
+RUN find $AIO_SCRIPTS_SH_DIR -maxdepth 1 -type f -printf "%P\n" \
+    | while read file; do ln -s $AIO_SCRIPTS_SH_DIR/$file /usr/local/bin/aio-${file%.*}; done
+
+
+# Set up the Node.js scripts
+COPY scripts-js/ $AIO_SCRIPTS_JS_DIR/
+WORKDIR $AIO_SCRIPTS_JS_DIR/
+RUN yarn install --production --frozen-lockfile
+
+
+# Set up health check
+HEALTHCHECK --interval=5m CMD /usr/local/bin/aio-health-check
+
+
+# Go!
+WORKDIR /
+CMD aio-init && tail -f /dev/null
diff --git a/aio/aio-builds-setup/dockerbuild/cronjobs/aio-builds-cleanup b/aio/aio-builds-setup/dockerbuild/cronjobs/aio-builds-cleanup
new file mode 100644
index 000000000000..3e6e5117eae8
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/cronjobs/aio-builds-cleanup
@@ -0,0 +1,2 @@
+# Periodically clean up builds that do not correspond to currently open PRs
+0 12 * * * root /usr/local/bin/aio-clean-up >> /var/log/cron.log 2>&1
diff --git a/aio/aio-builds-setup/dockerbuild/dnsmasq/dnsmasq.conf b/aio/aio-builds-setup/dockerbuild/dnsmasq/dnsmasq.conf
new file mode 100644
index 000000000000..231625141cfc
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/dnsmasq/dnsmasq.conf
@@ -0,0 +1,16 @@
+# Do not read /etc/resolv.conf. Get servers from this file instead.
+no-resolv
+server=8.8.8.8
+server=8.8.4.4
+
+# Listen for DHCP and DNS requests only on this address.
+listen-address=127.0.0.1
+
+# Force an IP address for these domains.
+address=/{{$AIO_NGINX_HOSTNAME}}/127.0.0.1
+address=/{{$AIO_UPLOAD_HOSTNAME}}/127.0.0.1
+address=/{{$TEST_AIO_NGINX_HOSTNAME}}/127.0.0.1
+address=/{{$TEST_AIO_UPLOAD_HOSTNAME}}/127.0.0.1
+
+# Run as root (required from inside docker container).
+user=root
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 000000000000..165009cd5512
--- /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 000000000000..59d434243ecb
--- /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 000000000000..d3f2fc618847
--- /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
new file mode 100644
index 000000000000..ec2a244f4817
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/nginx/aio-builds.conf
@@ -0,0 +1,110 @@
+# Redirect all HTTP traffic to HTTPS
+server {
+  server_name _;
+
+  listen {{$AIO_NGINX_PORT_HTTP}} default_server;
+  listen [::]:{{$AIO_NGINX_PORT_HTTP}};
+
+  access_log {{$AIO_NGINX_LOGS_DIR}}/access.log;
+  error_log  {{$AIO_NGINX_LOGS_DIR}}/error.log;
+
+  # Ideally we want 308 (permanent + keep original method),
+  # but it is relatively new and not supported by some clients (e.g. cURL).
+  return 307 https://$host:{{$AIO_NGINX_PORT_HTTPS}}$request_uri;
+}
+
+# Serve PR-preview requests
+server {
+  server_name "~^pr(?<pr>[1-9][0-9]*)-(?<sha>[0-9a-f]{7,40})\.";
+
+  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_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;
+
+  location "~/[^/]+\.[^/]+$" {
+    try_files $uri $uri/ =404;
+  }
+
+  location / {
+    try_files $uri $uri/ /index.html =404;
+  }
+}
+
+# Handle all other requests
+server {
+  server_name _;
+
+  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_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;
+
+  # Health check
+  location "~^/health-check/?$" {
+    add_header Content-Type text/plain;
+    return 200 '';
+  }
+
+  # Upload builds
+  location "~^/create-build/(?<pr>[1-9][0-9]*)/(?<sha>[0-9a-f]{40})/?$" {
+    if ($request_method != "POST") {
+      add_header Allow "POST";
+      return 405;
+    }
+
+    client_body_temp_path    /tmp/aio-create-builds;
+    client_body_buffer_size  128K;
+    client_max_body_size     {{$AIO_UPLOAD_MAX_SIZE}};
+    client_body_in_file_only on;
+
+    proxy_pass_request_headers on;
+    proxy_set_header           X-FILE $request_body_file;
+    proxy_set_body             off;
+    proxy_redirect             off;
+    proxy_method               GET;
+    proxy_pass                 http://{{$AIO_UPLOAD_HOSTNAME}}:{{$AIO_UPLOAD_PORT}}$request_uri;
+
+    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/nginx/create-selfsigned-cert.sh b/aio/aio-builds-setup/dockerbuild/nginx/create-selfsigned-cert.sh
new file mode 100755
index 000000000000..286639e8801f
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/nginx/create-selfsigned-cert.sh
@@ -0,0 +1,20 @@
+#!/bin/bash
+set -eu -o pipefail
+
+
+# Variables
+confFile=/tmp/$1.conf
+domainName=$2
+outDir=$3
+
+
+# Create certificate
+cp /etc/ssl/openssl.cnf "$confFile"
+echo "[subjectAltName]" >> "$confFile"
+echo "subjectAltName = DNS:$domainName, DNS:*.$domainName" >> "$confFile"
+mkdir -p $outDir
+openssl req -days 365 -newkey rsa:2048 -nodes -sha256 -x509 \
+            -config "$confFile" -extensions subjectAltName -subj "/CN=$domainName" \
+            -out "$outDir/$domainName.crt" -keyout "$outDir/$domainName.key"
+chmod -R 400 "$outDir"
+cp "$outDir/$domainName.crt" /usr/local/share/ca-certificates
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/.gitignore b/aio/aio-builds-setup/dockerbuild/scripts-js/.gitignore
new file mode 100644
index 000000000000..c925c21d56cb
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/.gitignore
@@ -0,0 +1,2 @@
+/dist
+/node_modules
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
new file mode 100644
index 000000000000..a5fef4bb4b5e
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/clean-up/build-cleaner.ts
@@ -0,0 +1,80 @@
+// Imports
+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';
+
+// Classes
+export class BuildCleaner {
+  // Constructor
+  constructor(protected buildsDir: string, protected repoSlug: string, protected githubToken: string) {
+    assertNotMissingOrEmpty('buildsDir', buildsDir);
+    assertNotMissingOrEmpty('repoSlug', repoSlug);
+    assertNotMissingOrEmpty('githubToken', githubToken);
+  }
+
+  // Methods - Public
+  public cleanUp(): Promise<void> {
+    return Promise.all([
+      this.getExistingBuildNumbers(),
+      this.getOpenPrNumbers(),
+    ]).then(([existingBuilds, openPrs]) => this.removeUnnecessaryBuilds(existingBuilds, openPrs));
+  }
+
+  // Methods - Protected
+  protected getExistingBuildNumbers(): Promise<number[]> {
+    return new Promise((resolve, reject) => {
+      fs.readdir(this.buildsDir, (err, files) => {
+        if (err) {
+          return reject(err);
+        }
+
+        const buildNumbers = files.
+          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);
+      });
+    });
+  }
+
+  protected getOpenPrNumbers(): Promise<number[]> {
+    const githubPullRequests = new GithubPullRequests(this.githubToken, this.repoSlug);
+
+    return githubPullRequests.
+      fetchAll('open').
+      then(prs => prs.map(pr => pr.number));
+  }
+
+  protected removeDir(dir: string) {
+    try {
+      if (shell.test('-d', dir)) {
+        shell.chmod('-R', 'a+w', dir);
+        shell.rm('-rf', dir);
+      }
+    } catch (err) {
+      console.error(`ERROR: Unable to remove '${dir}' due to:`, err);
+    }
+  }
+
+  protected removeUnnecessaryBuilds(existingBuildNumbers: number[], openPrNumbers: number[]) {
+    const toRemove = existingBuildNumbers.filter(num => !openPrNumbers.includes(num));
+
+    console.log(`Existing builds: ${existingBuildNumbers.length}`);
+    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/clean-up/index.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/clean-up/index.ts
new file mode 100644
index 000000000000..c9819dd9985b
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/clean-up/index.ts
@@ -0,0 +1,23 @@
+// Imports
+import {getEnvVar} from '../common/utils';
+import {BuildCleaner} from './build-cleaner';
+
+// Constants
+const AIO_BUILDS_DIR = getEnvVar('AIO_BUILDS_DIR');
+const AIO_GITHUB_TOKEN = getEnvVar('AIO_GITHUB_TOKEN', true);
+const AIO_REPO_SLUG = getEnvVar('AIO_REPO_SLUG');
+
+// Run
+_main();
+
+// Functions
+function _main() {
+  console.log(`[${new Date()}] - Cleaning up builds...`);
+
+  const buildCleaner = new BuildCleaner(AIO_BUILDS_DIR, AIO_REPO_SLUG, AIO_GITHUB_TOKEN);
+
+  buildCleaner.cleanUp().catch(err => {
+    console.error('ERROR:', err);
+    process.exit(1);
+  });
+}
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 000000000000..c5064c5dfc1a
--- /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
new file mode 100644
index 000000000000..820944cb5f1e
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-api.ts
@@ -0,0 +1,110 @@
+// Imports
+import {IncomingMessage} from 'http';
+import * as https from 'https';
+import {assertNotMissingOrEmpty} from './utils';
+
+// Constants
+const GITHUB_HOSTNAME = 'api.github.com';
+
+// Interfaces - Types
+interface RequestParams {
+  [key: string]: string | number;
+}
+
+type RequestParamsOrNull = RequestParams | null;
+
+// Classes
+export class GithubApi {
+  protected requestHeaders: {[key: string]: string};
+
+  // Constructor
+  constructor(githubToken: string) {
+    assertNotMissingOrEmpty('githubToken', githubToken);
+
+    this.requestHeaders = {
+      'Authorization': `token ${githubToken}`,
+      'User-Agent': `Node/${process.versions.node}`,
+    };
+  }
+
+  // Methods - Public
+  public get<T>(pathname: string, params?: RequestParamsOrNull): Promise<T> {
+    const path = this.buildPath(pathname, params);
+    return this.request<T>('get', path);
+  }
+
+  public post<T>(pathname: string, params?: RequestParamsOrNull, data?: any): Promise<T> {
+    const path = this.buildPath(pathname, params);
+    return this.request<T>('post', path, data);
+  }
+
+  // Methods - Protected
+  protected buildPath(pathname: string, params?: RequestParamsOrNull): string {
+    if (params == null) {
+      return pathname;
+    }
+
+    const search = (params === null) ? '' : this.serializeSearchParams(params);
+    const joiner = search && '?';
+
+    return `${pathname}${joiner}${search}`;
+  }
+
+  protected getPaginated<T>(pathname: string, baseParams: RequestParams = {}, currentPage: number = 0): Promise<T[]> {
+    const perPage = 100;
+    const params = {
+      ...baseParams,
+      page: currentPage,
+      per_page: perPage,
+    };
+
+    return this.get<T[]>(pathname, params).then(items => {
+      if (items.length < perPage) {
+        return items;
+      }
+
+      return this.getPaginated<T>(pathname, baseParams, currentPage + 1).then(moreItems => [...items, ...moreItems]);
+    });
+  }
+
+  protected request<T>(method: string, path: string, data: any = null): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+      const options = {
+        headers: {...this.requestHeaders},
+        host: GITHUB_HOSTNAME,
+        method,
+        path,
+      };
+
+      const onError = (statusCode: number, responseText: string) => {
+        const url = `https://${GITHUB_HOSTNAME}${path}`;
+        reject(`Request to '${url}' failed (status: ${statusCode}): ${responseText}`);
+      };
+      const onSuccess = (responseText: string) => {
+        try { resolve(JSON.parse(responseText)); } catch (err) { reject(err); }
+      };
+      const onResponse = (res: IncomingMessage) => {
+        const statusCode = res.statusCode || -1;
+        const isSuccess = (200 <= statusCode) && (statusCode < 400);
+        let responseText = '';
+
+        res.
+          on('data', d => responseText += d).
+          on('end', () => isSuccess ? onSuccess(responseText) : onError(statusCode, responseText)).
+          on('error', reject);
+      };
+
+      https.
+        request(options, onResponse).
+        on('error', reject).
+        end(data && JSON.stringify(data));
+    });
+  }
+
+  protected serializeSearchParams(params: RequestParams): string {
+    return Object.keys(params).
+      filter(key => params[key] != null).
+      map(key => `${key}=${encodeURIComponent(String(params[key]))}`).
+      join('&');
+  }
+}
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
new file mode 100644
index 000000000000..0075b17f989d
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-pull-requests.ts
@@ -0,0 +1,46 @@
+// Imports
+import {assertNotMissingOrEmpty} from '../common/utils';
+import {GithubApi} from './github-api';
+
+// Interfaces - Types
+export interface PullRequest  {
+  number: number;
+  user: {login: string};
+  labels: {name: string}[];
+}
+
+export type PullRequestState = 'all' | 'closed' | 'open';
+
+// Classes
+export class GithubPullRequests extends GithubApi {
+  // Constructor
+  constructor(githubToken: string, protected repoSlug: string) {
+    super(githubToken);
+    assertNotMissingOrEmpty('repoSlug', repoSlug);
+  }
+
+  // Methods - Public
+  public addComment(pr: number, body: string): Promise<void> {
+    if (!(pr > 0)) {
+      throw new Error(`Invalid PR number: ${pr}`);
+    } else if (!body) {
+      throw new Error(`Invalid or empty comment body: ${body}`);
+    }
+
+    return this.post<void>(`/repos/${this.repoSlug}/issues/${pr}/comments`, null, {body});
+  }
+
+  public fetch(pr: number): Promise<PullRequest> {
+    // 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[]> {
+    console.log(`Fetching ${state} pull requests...`);
+
+    const pathname = `/repos/${this.repoSlug}/pulls`;
+    const params = {state};
+
+    return this.getPaginated<PullRequest>(pathname, params);
+  }
+}
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-teams.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-teams.ts
new file mode 100644
index 000000000000..ab1a2e0f1605
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-teams.ts
@@ -0,0 +1,45 @@
+// Imports
+import {assertNotMissingOrEmpty} from '../common/utils';
+import {GithubApi} from './github-api';
+
+// Interfaces - Types
+interface Team {
+  id: number;
+  slug: string;
+}
+
+interface TeamMembership {
+  state: string;
+}
+
+// Classes
+export class GithubTeams extends GithubApi {
+  // Constructor
+  constructor(githubToken: string, protected organization: string) {
+    super(githubToken);
+    assertNotMissingOrEmpty('organization', organization);
+  }
+
+  // Methods - Public
+  public fetchAll(): Promise<Team[]> {
+    return this.getPaginated<Team>(`/orgs/${this.organization}/teams`);
+  }
+
+  public isMemberById(username: string, teamIds: number[]): Promise<boolean> {
+    const getMembership = (teamId: number) =>
+      this.get<TeamMembership>(`/teams/${teamId}/memberships/${username}`).
+        then(membership => membership.state === 'active').
+        catch(() => false);
+    const reduceFn = (promise: Promise<boolean>, teamId: number) =>
+      promise.then(isMember => isMember || getMembership(teamId));
+
+    return teamIds.reduce(reduceFn, Promise.resolve(false));
+  }
+
+  public isMemberBySlug(username: string, teamSlugs: string[]): Promise<boolean> {
+    return this.fetchAll().
+      then(teams => teams.filter(team => teamSlugs.includes(team.slug)).map(team => team.id)).
+      then(teamIds => this.isMemberById(username, teamIds)).
+      catch(() => false);
+  }
+}
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/run-tests.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/run-tests.ts
new file mode 100644
index 000000000000..296b910d39a5
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/run-tests.ts
@@ -0,0 +1,23 @@
+export const runTests = (specFiles: string[], helpers?: string[]) => {
+  // We can't use `import` here, because of the following mess:
+  // - GitHub project `jasmine/jasmine` is `jasmine-core` on npm and its typings `@types/jasmine`.
+  // - GitHub project `jasmine/jasmine-npm` is `jasmine` on npm and has no typings.
+  //
+  // Using `import...from 'jasmine'` here, would import from `@types/jasmine` (which refers to the
+  // `jasmine-core` module and the `jasmine` module).
+  // tslint:disable-next-line: no-var-requires variable-name
+  const Jasmine = require('jasmine');
+  const config = {
+    helpers,
+    random: true,
+    spec_files: specFiles,
+    stopSpecOnExpectationFailure: true,
+  };
+
+  process.on('unhandledRejection', (reason: any) => console.log('Unhandled rejection:', reason));
+
+  const runner = new Jasmine();
+  runner.loadConfig(config);
+  runner.onComplete((passed: boolean) => process.exit(passed ? 0 : 1));
+  runner.execute();
+};
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/utils.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/utils.ts
new file mode 100644
index 000000000000..50e4ee5b7dc5
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/utils.ts
@@ -0,0 +1,17 @@
+// Functions
+export const assertNotMissingOrEmpty = (name: string, value: string | null | undefined) => {
+  if (!value) {
+    throw new Error(`Missing or empty required parameter '${name}'!`);
+  }
+};
+
+export const getEnvVar = (name: string, isOptional = false): string => {
+  const value = process.env[name];
+
+  if (!isOptional && !value) {
+    console.error(`ERROR: Missing required environment variable '${name}'!`);
+    process.exit(1);
+  }
+
+  return value || '';
+};
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
new file mode 100644
index 000000000000..899b3ab7beec
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts
@@ -0,0 +1,140 @@
+// Imports
+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 {HIDDEN_DIR_PREFIX, SHORT_SHA_LEN} from '../common/constants';
+import {assertNotMissingOrEmpty} from '../common/utils';
+import {ChangedPrVisibilityEvent, CreatedBuildEvent} from './build-events';
+import {UploadError} from './upload-error';
+
+// Classes
+export class BuildCreator extends EventEmitter {
+  // Constructor
+  constructor(protected buildsDir: string) {
+    super();
+    assertNotMissingOrEmpty('buildsDir', buildsDir);
+  }
+
+  // Methods - Public
+  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.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) {
+          const publicOrNot = isPublic ? 'public' : 'non-public';
+          throw new UploadError(409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
+        }
+
+        dirToRemoveOnError = prDirExisted ? shaDir : prDir;
+
+        return Promise.resolve().
+          then(() => shell.mkdir('-p', shaDir)).
+          then(() => this.extractArchive(archivePath, shaDir)).
+          then(() => this.emit(CreatedBuildEvent.type, new CreatedBuildEvent(+pr, sha, isPublic))).
+          then(() => undefined);
+      }).
+      catch(err => {
+        if (dirToRemoveOnError) {
+          shell.rm('-rf', dirToRemoveOnError);
+        }
+
+        if (!(err instanceof UploadError)) {
+          err = new UploadError(500, `Error while uploading to directory: ${shaDir}\n${err}`);
+        }
+
+        throw err;
+      });
+  }
+
+  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)));
+  }
+
+  protected extractArchive(inputFile: string, outputDir: string): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      const cmd = `tar --extract --gzip --directory "${outputDir}" --file "${inputFile}"`;
+
+      cp.exec(cmd, (err, _stdout, stderr) => {
+        if (err) {
+          return reject(err);
+        }
+
+        if (stderr) {
+          console.warn(stderr);
+        }
+
+        try {
+          shell.chmod('-R', 'a-w', outputDir);
+          shell.rm('-f', inputFile);
+          resolve();
+        } catch (err) {
+          reject(err);
+        }
+      });
+    });
+  }
+
+  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
new file mode 100644
index 000000000000..39dcbf10eb5f
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-events.ts
@@ -0,0 +1,16 @@
+// Classes
+export class ChangedPrVisibilityEvent {
+  // Properties - Public, Static
+  public static type = 'pr.changedVisibility';
+
+  // Constructor
+  constructor(public pr: number, public shas: string[], public isPublic: boolean) {}
+}
+
+export class CreatedBuildEvent {
+  // Properties - Public, Static
+  public static type = 'build.created';
+
+  // Constructor
+  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
new file mode 100644
index 000000000000..bfabb47525d3
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-verifier.ts
@@ -0,0 +1,87 @@
+// Imports
+import * as jwt from 'jsonwebtoken';
+import {GithubPullRequests, PullRequest} from '../common/github-pull-requests';
+import {GithubTeams} from '../common/github-teams';
+import {assertNotMissingOrEmpty} from '../common/utils';
+import {UploadError} from './upload-error';
+
+// Interfaces - Types
+interface JwtPayload {
+  slug: string;
+  'pull-request': number;
+}
+
+// Enums
+export enum BUILD_VERIFICATION_STATUS {
+  verifiedAndTrusted,
+  verifiedNotTrusted,
+}
+
+// Classes
+export class BuildVerifier {
+  // Properties - Protected
+  protected githubPullRequests: GithubPullRequests;
+  protected githubTeams: GithubTeams;
+
+  // Constructor
+  constructor(protected secret: string, githubToken: string, protected repoSlug: string, organization: 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 getPrIsTrusted(pr: number): Promise<boolean> {
+    return Promise.resolve().
+      then(() => this.githubPullRequests.fetch(pr)).
+      then(prInfo => this.hasLabel(prInfo, this.trustedPrLabel) ||
+                     this.githubTeams.isMemberBySlug(prInfo.user.login, this.allowedTeamSlugs));
+  }
+
+  public verify(expectedPr: number, authHeader: string): Promise<BUILD_VERIFICATION_STATUS> {
+    return Promise.resolve().
+      then(() => this.extractJwtString(authHeader)).
+      then(jwtString => this.verifyJwt(expectedPr, jwtString)).
+      then(jwtPayload => this.verifyPr(jwtPayload['pull-request'])).
+      catch(err => { throw new UploadError(403, `Error while verifying upload for PR ${expectedPr}: ${err}`); });
+  }
+
+  // Methods - Protected
+  protected extractJwtString(input: string): string {
+    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: JwtPayload) => {
+        if (err) {
+          reject(err.message || err);
+        } else if (payload.slug !== this.repoSlug) {
+          reject(`jwt slug invalid. expected: ${this.repoSlug}`);
+        } else if (payload['pull-request'] !== expectedPr) {
+          reject(`jwt pull-request invalid. expected: ${expectedPr}`);
+        } else {
+          resolve(payload);
+        }
+      });
+    });
+  }
+
+  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
new file mode 100644
index 000000000000..6cc058e61b9c
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index-preverify-pr.ts
@@ -0,0 +1,39 @@
+// Imports
+import {getEnvVar} from '../common/utils';
+import {BuildVerifier} from './build-verifier';
+
+// Run
+_main();
+
+// Functions
+function _main() {
+  const secret = 'unused';
+  const githubToken = getEnvVar('AIO_GITHUB_TOKEN');
+  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,
+                                          trustedPrLabel);
+
+  // Exit codes:
+  // - 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(', ')}`);
+      }
+
+      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.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index.ts
new file mode 100644
index 000000000000..e7b705c0c23b
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index.ts
@@ -0,0 +1,34 @@
+// Imports
+import {getEnvVar} from '../common/utils';
+import {uploadServerFactory} from './upload-server-factory';
+
+// Constants
+const AIO_BUILDS_DIR = getEnvVar('AIO_BUILDS_DIR');
+const AIO_DOMAIN_NAME = getEnvVar('AIO_DOMAIN_NAME');
+const AIO_GITHUB_ORGANIZATION = getEnvVar('AIO_GITHUB_ORGANIZATION');
+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');
+
+// Run
+_main();
+
+// Functions
+function _main() {
+  uploadServerFactory.
+    create({
+      buildsDir: AIO_BUILDS_DIR,
+      domainName: AIO_DOMAIN_NAME,
+      githubOrganization: AIO_GITHUB_ORGANIZATION,
+      githubTeamSlugs: AIO_GITHUB_TEAM_SLUGS.split(','),
+      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-error.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/upload-error.ts
new file mode 100644
index 000000000000..877a3c2bafa4
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/upload-error.ts
@@ -0,0 +1,8 @@
+// Classes
+export class UploadError extends Error {
+  // Constructor
+  constructor(public status: number = 500, message?: string) {
+    super(message);
+    Object.setPrototypeOf(this, UploadError.prototype);
+  }
+}
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
new file mode 100644
index 000000000000..48e60e3cc115
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/upload-server-factory.ts
@@ -0,0 +1,153 @@
+// 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 {ChangedPrVisibilityEvent, CreatedBuildEvent} from './build-events';
+import {BUILD_VERIFICATION_STATUS, BuildVerifier} from './build-verifier';
+import {UploadError} from './upload-error';
+
+// Constants
+const AUTHORIZATION_HEADER = 'AUTHORIZATION';
+const X_FILE_HEADER = 'X-FILE';
+
+// Interfaces - Types
+interface UploadServerConfig {
+  buildsDir: string;
+  domainName: string;
+  githubOrganization: string;
+  githubTeamSlugs: string[];
+  githubToken: string;
+  repoSlug: string;
+  secret: string;
+  trustedPrLabel: string;
+}
+
+// Classes
+class UploadServerFactory {
+  // Methods - Public
+  public create({
+    buildsDir,
+    domainName,
+    githubOrganization,
+    githubTeamSlugs,
+    githubToken,
+    repoSlug,
+    secret,
+    trustedPrLabel,
+  }: UploadServerConfig): http.Server {
+    assertNotMissingOrEmpty('domainName', domainName);
+
+    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 as any);
+
+    httpServer.on('listening', () => {
+      const info = httpServer.address();
+      console.info(`Up and running (and listening on ${info.address}:${info.port})...`);
+    });
+
+    return httpServer;
+  }
+
+  // Methods - Protected
+  protected createBuildCreator(buildsDir: string, githubToken: string, repoSlug: string,
+                               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');
+
+      return 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;
+  }
+
+  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];
+      const sha = req.params[1];
+      const archive = req.header(X_FILE_HEADER);
+      const authHeader = req.header(AUTHORIZATION_HEADER);
+
+      if (!authHeader) {
+        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));
+      }
+    });
+    middleware.get(/^\/health-check\/?$/, (_req, res) => res.sendStatus(200));
+    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;
+  }
+
+  protected respondWithError(res: express.Response, err: any) {
+    if (!(err instanceof UploadError)) {
+      err = new UploadError(500, String((err && err.message) || err));
+    }
+
+    const statusText = http.STATUS_CODES[err.status] || '???';
+    console.error(`Upload error: ${err.status} - ${statusText}`);
+    console.error(err.message);
+
+    res.status(err.status).end(err.message);
+  }
+
+  protected throwRequestError(status: number, error: string, req: express.Request) {
+    const message = `${error} in request: ${req.method} ${req.originalUrl}` +
+                    (!req.body ? '' : ` ${JSON.stringify(req.body)}`);
+
+    throw new UploadError(status, message);
+  }
+}
+
+// Exports
+export const uploadServerFactory = new UploadServerFactory();
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 000000000000..92e7f15a31e2
--- /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
new file mode 100644
index 000000000000..e5b232249486
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/helper.ts
@@ -0,0 +1,214 @@
+// Imports
+import * as cp from 'child_process';
+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 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');
+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 | null; stdout: string; stderr: string; }
+export interface FileSpecs { content?: string; size?: number; }
+
+export type CleanUpFn = () => void;
+export type TestSuiteFactory = (scheme: string, port: number) => void;
+export type VerifyCmdResultFn = (result: CmdResult) => void;
+
+// Classes
+class Helper {
+  // Properties - Public
+  public get buildsDir() { return TEST_AIO_BUILDS_DIR; }
+  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 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[] = [];
+  protected portPerScheme: {[scheme: string]: number} = {
+    http: this.nginxPortHttp,
+    https: this.nginxPortHttps,
+  };
+
+  // Constructor
+  constructor() {
+    shell.mkdir('-p', 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.
+      this.cleanUpFns[0]();
+    }
+
+    if (fs.readdirSync(this.buildsDir).length) {
+      throw new Error(`Directory '${this.buildsDir}' is not empty after clean-up.`);
+    }
+  }
+
+  public createDummyArchive(pr: string, sha: string, archivePath: string): CleanUpFn {
+    const inputDir = this.getShaDir(this.getPrDir(`uploaded/${pr}`, true), sha);
+    const cmd1 = `tar --create --gzip --directory "${inputDir}" --file "${archivePath}" .`;
+    const cmd2 = `chown ${this.wwwUser} ${archivePath}`;
+
+    const cleanUpTemp = this.createDummyBuild(`uploaded/${pr}`, sha, true, true);
+    shell.exec(cmd1);
+    shell.exec(cmd2);
+    cleanUpTemp();
+
+    return this.createCleanUpFn(() => shell.rm('-rf', archivePath));
+  }
+
+  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.wwwUser} ${prDir}`);
+
+    return this.createCleanUpFn(() => shell.rm('-rf', prDir));
+  }
+
+  public deletePrDir(pr: string, isPublic = true) {
+    const prDir = this.getPrDir(pr, isPublic);
+
+    if (fs.existsSync(prDir)) {
+      shell.chmod('-R', 'a+w', prDir);
+      shell.rm('-rf', prDir);
+    }
+  }
+
+  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');
+  }
+
+  public runCmd(cmd: string, opts: cp.ExecFileOptions = {}): Promise<CmdResult> {
+    return new Promise(resolve => {
+      const proc = cp.exec(cmd, opts, (err, stdout, stderr) => resolve({success: !err, err, stdout, stderr}));
+      this.createCleanUpFn(() => proc.kill());
+    });
+  }
+
+  public runForAllSupportedSchemes(suiteFactory: TestSuiteFactory) {
+    Object.keys(this.portPerScheme).forEach(scheme => suiteFactory(scheme, this.portPerScheme[scheme]));
+  }
+
+  public verifyResponse(status: number | [number, string], regex = /^/): VerifyCmdResultFn {
+    let statusCode: number;
+    let statusText: string;
+
+    if (Array.isArray(status)) {
+      statusCode = status[0];
+      statusText = status[1];
+    } else {
+      statusCode = status;
+      statusText = http.STATUS_CODES[statusCode] || 'UNKNOWN_STATUS_CODE';
+    }
+
+    return (result: CmdResult) => {
+      const [headers, body] = result.stdout.
+        split(/(?:\r?\n){2,}/).
+        map(s => s.trim()).
+        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);
+        console.log('Stderr:', result.stderr);
+        console.log('Error:', result.err);
+      }
+
+      expect(result.success).toBe(true);
+      expect(headers).toContain(`${statusCode} ${statusText}`);
+      expect(body).toMatch(regex);
+    };
+  }
+
+  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);
+  }
+
+  public writeFile(filePath: string, {content, size}: FileSpecs, force = false): CleanUpFn {
+    if (!force && fs.existsSync(filePath)) {
+      throw new Error(`Refusing to overwrite existing file '${filePath}'.`);
+    }
+
+    let cleanUpTarget = filePath;
+    while (!fs.existsSync(path.dirname(cleanUpTarget))) {
+      cleanUpTarget = path.dirname(cleanUpTarget);
+    }
+
+    shell.mkdir('-p', path.dirname(filePath));
+    if (size) {
+      // Create a file of the specified size.
+      cp.execSync(`fallocate -l ${size} ${filePath}`);
+    } else {
+      // Create a file with the specified content.
+      fs.writeFileSync(filePath, content || '');
+    }
+    shell.exec(`chown ${this.wwwUser} ${filePath}`);
+
+    return this.createCleanUpFn(() => shell.rm('-rf', cleanUpTarget));
+  }
+
+  // Methods - Protected
+  protected createCleanUpFn(fn: () => void): CleanUpFn {
+    const cleanUpFn = () => {
+      const idx = this.cleanUpFns.indexOf(cleanUpFn);
+      if (idx !== -1) {
+        this.cleanUpFns.splice(idx, 1);
+        fn();
+      }
+    };
+
+    this.cleanUpFns.push(cleanUpFn);
+
+    return cleanUpFn;
+  }
+}
+
+// Exports
+export const helper = new Helper();
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/index.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/index.ts
new file mode 100644
index 000000000000..37e6d19a530f
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/index.ts
@@ -0,0 +1,6 @@
+// Imports
+import {runTests} from '../common/run-tests';
+
+// Run
+const specFiles = [`${__dirname}/**/*.e2e.js`];
+runTests(specFiles);
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
new file mode 100644
index 000000000000..a3e15992f39f
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/nginx.e2e.ts
@@ -0,0 +1,389 @@
+// Imports
+import * as path from 'path';
+import {helper as h} from './helper';
+
+// Tests
+describe(`nginx`, () => {
+
+  beforeEach(() => jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000);
+  afterEach(() => h.cleanUp());
+
+
+  it('should redirect HTTP to HTTPS', done => {
+    const httpHost = `${h.nginxHostname}:${h.nginxPortHttp}`;
+    const httpsHost = `${h.nginxHostname}:${h.nginxPortHttps}`;
+    const urlMap = {
+      [`http://${httpHost}/`]: `https://${httpsHost}/`,
+      [`http://${httpHost}/foo`]: `https://${httpsHost}/foo`,
+      [`http://foo.${httpHost}/`]: `https://foo.${httpsHost}/`,
+    };
+
+    const verifyRedirection = (httpUrl: string) => h.runCmd(`curl -i ${httpUrl}`).then(result => {
+      h.verifyResponse(307)(result);
+
+      const headers = result.stdout.split(/(?:\r?\n){2,}/)[0];
+      expect(headers).toContain(`Location: ${urlMap[httpUrl]}`);
+    });
+
+    Promise.
+      all(Object.keys(urlMap).map(verifyRedirection)).
+      then(done);
+  });
+
+
+  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}/*`, () => {
+
+      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);
+        });
+
+      });
+
+
+      describe('(for hidden builds)', () => {
+
+        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 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.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);
+        });
+
+      });
+
+    });
+
+
+    describe(`${host}/health-check`, () => {
+
+      it('should respond with 200', done => {
+        Promise.all([
+          h.runCmd(`curl -iL ${scheme}://${host}/health-check`).then(h.verifyResponse(200)),
+          h.runCmd(`curl -iL ${scheme}://${host}/health-check/`).then(h.verifyResponse(200)),
+        ]).then(done);
+      });
+
+
+      it('should respond with 404 if the path does not match exactly', done => {
+        Promise.all([
+          h.runCmd(`curl -iL ${scheme}://${host}/health-check/foo`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://${host}/health-check-foo`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://${host}/health-checknfoo`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://${host}/foo/health-check`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://${host}/foo-health-check`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://${host}/foonhealth-check`).then(h.verifyResponse(404)),
+        ]).then(done);
+      });
+
+    });
+
+
+    describe(`${host}/create-build/<pr>/<sha>`, () => {
+
+      it('should disallow non-POST requests', done => {
+        const url = `${scheme}://${host}/create-build/${pr}/${sha9}`;
+
+        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 reject files larger than ${h.uploadMaxSize}B (according to header)`, done => {
+        const headers = `--header "Content-Length: ${1.5 * h.uploadMaxSize}"`;
+        const url = `${scheme}://${host}/create-build/${pr}/${sha9}`;
+
+        h.runCmd(`curl -iLX POST ${headers} ${url}`).
+          then(h.verifyResponse([413, 'Request Entity Too Large'])).
+          then(done);
+      });
+
+
+      it(`should reject files larger than ${h.uploadMaxSize}B (without header)`, done => {
+        const filePath = path.join(h.buildsDir, 'snapshot.tar.gz');
+        const url = `${scheme}://${host}/create-build/${pr}/${sha9}`;
+
+        h.writeFile(filePath, {size: 1.5 * h.uploadMaxSize});
+
+        h.runCmd(`curl -iLX POST --data-binary "@${filePath}" ${url}`).
+          then(h.verifyResponse([413, 'Request Entity Too Large'])).
+          then(done);
+      });
+
+
+      it('should pass requests through to the upload server', done => {
+        h.runCmd(`curl -iLX POST ${scheme}://${host}/create-build/${pr}/${sha9}`).
+          then(h.verifyResponse(401, /Missing or empty 'AUTHORIZATION' header/)).
+          then(done);
+      });
+
+
+      it('should respond with 404 for unknown paths', done => {
+        const cmdPrefix = `curl -iLX POST ${scheme}://${host}`;
+
+        Promise.all([
+          h.runCmd(`${cmdPrefix}/foo/create-build/${pr}/${sha9}`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/foo-create-build/${pr}/${sha9}`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/fooncreate-build/${pr}/${sha9}`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/create-build/foo/${pr}/${sha9}`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/create-build-foo/${pr}/${sha9}`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/create-buildnfoo/${pr}/${sha9}`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/create-build/pr${pr}/${sha9}`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/create-build/${pr}/${sha9}42`).then(h.verifyResponse(404)),
+        ]).then(done);
+      });
+
+
+      it('should reject PRs with leading zeros', done => {
+        h.runCmd(`curl -iLX POST ${scheme}://${host}/create-build/0${pr}/${sha9}`).
+          then(h.verifyResponse(404)).
+          then(done);
+      });
+
+
+      it('should accept SHAs with leading zeros (but not trim the zeros)', done => {
+        const cmdPrefix = `curl -iLX POST  ${scheme}://${host}/create-build/${pr}`;
+        const bodyRegex = /Missing or empty 'AUTHORIZATION' header/;
+
+        Promise.all([
+          h.runCmd(`${cmdPrefix}/0${sha9}`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/${sha0}`).then(h.verifyResponse(401, bodyRegex)),
+        ]).then(done);
+      });
+
+    });
+
+
+    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 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}`});
+        });
+
+        Promise.all([
+          h.runCmd(`curl -iL ${scheme}://${host}/index.html`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://${host}/`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://${host}`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://foo.${host}/index.html`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://foo.${host}/`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://foo.${host}`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://${host}/foo.js`).then(h.verifyResponse(404)),
+          h.runCmd(`curl -iL ${scheme}://${host}/foo/index.html`).then(h.verifyResponse(404)),
+        ]).then(done);
+      });
+
+    });
+
+  }));
+
+});
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
new file mode 100644
index 000000000000..6e9467e83738
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/server-integration.e2e.ts
@@ -0,0 +1,319 @@
+// Imports
+import * as path from 'path';
+import * as c from './constants';
+import {helper as h} from './helper';
+
+// Tests
+h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme.toUpperCase()})`, () => {
+  const hostname = h.nginxHostname;
+  const host = `${hostname}:${port}`;
+  const pr9 = '9';
+  const sha9 = '9'.repeat(40);
+  const sha0 = '0'.repeat(40);
+  const archivePath = path.join(h.buildsDir, 'snapshot.tar.gz');
+
+  const getFile = (pr: string, sha: string, file: string) =>
+    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();
+  });
+
+
+  describe('for a new/non-existing PR', () => {
+
+    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);
+    });
+
+  });
+
+
+  describe('for an existing PR', () => {
+
+    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$`);
+
+      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);
+      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 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$`);
+
+      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);
+    });
+
+  });
+
+}));
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 000000000000..3450d1bc0cbd
--- /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
new file mode 100644
index 000000000000..002d93de3e5f
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts
@@ -0,0 +1,571 @@
+// Imports
+import * as fs from 'fs';
+import * as path from 'path';
+import * as c from './constants';
+import {CmdResult, helper as h} from './helper';
+
+// Tests
+describe('upload-server (on HTTP)', () => {
+  const hostname = h.uploadHostname;
+  const port = h.uploadPort;
+  const host = `${hostname}:${port}`;
+  const pr = '9';
+  const sha9 = '9'.repeat(40);
+  const sha0 = '0'.repeat(40);
+
+  beforeEach(() => jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000);
+  afterEach(() => h.cleanUp());
+
+
+  describe(`${host}/create-build/<pr>/<sha>`, () => {
+    const authorizationHeader = `--header "Authorization: Token FOO"`;
+    const xFileHeader = `--header "X-File: ${h.buildsDir}/snapshot.tar.gz"`;
+    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 = /^Unknown resource/;
+
+      Promise.all([
+        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);
+    });
+
+
+    it('should reject requests without an \'AUTHORIZATION\' header', done => {
+      const headers1 = '';
+      const headers2 = '--header "AUTHORIXATION: "';
+      const url = `http://${host}/create-build/${pr}/${sha9}`;
+      const bodyRegex = /^Missing or empty 'AUTHORIZATION' header/;
+
+      Promise.all([
+        h.runCmd(curl(url, headers1)).then(h.verifyResponse(401, bodyRegex)),
+        h.runCmd(curl(url, headers2)).then(h.verifyResponse(401, bodyRegex)),
+      ]).then(done);
+    });
+
+
+    it('should reject requests without an \'X-FILE\' header', done => {
+      const headers1 = authorizationHeader;
+      const headers2 = `${authorizationHeader} --header "X-FILE: "`;
+      const url = `http://${host}/create-build/${pr}/${sha9}`;
+      const bodyRegex = /^Missing or empty 'X-FILE' header/;
+
+      Promise.all([
+        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}`);
+
+      Promise.all([
+        h.runCmd(`${cmdPrefix}/foo/create-build/${pr}/${sha9}`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/foo-create-build/${pr}/${sha9}`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/fooncreate-build/${pr}/${sha9}`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/create-build/foo/${pr}/${sha9}`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/create-build-foo/${pr}/${sha9}`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/create-buildnfoo/${pr}/${sha9}`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/create-build/pr${pr}/${sha9}`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/create-build/${pr}/${sha9}42`).then(h.verifyResponse(404)),
+      ]).then(done);
+    });
+
+
+    it('should reject PRs with leading zeros', done => {
+      h.runCmd(curl(`http://${host}/create-build/0${pr}/${sha9}`)).
+        then(h.verifyResponse(404)).
+        then(done);
+    });
+
+
+    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)),
+      ]).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}`);
+      const overwriteRe = RegExp(`^Request to overwrite existing ${isPublic ? 'public' : 'non-public'} directory`);
+
+
+      it('should not overwrite existing builds', done => {
+        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}/${sha9}`).
+          then(h.verifyResponse(409, overwriteRe)).
+          then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
+          then(done);
+      });
+
+
+      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, overwriteRe)).
+          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.buildExists(pr, sha9, isPublic)).toBe(false);
+            expect(h.buildExists(pr, '', isPublic)).toBe(true);
+          }).
+          then(done);
+      });
+
+
+      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);
+        });
+
+      });
+
+
+      describe('when the PR\'s visibility has changed', () => {
+        const archivePath = path.join(h.buildsDir, 'snapshot.tar.gz');
+        const statusCode = isPublic ? 201 : 202;
+
+        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, overwriteRe)).
+            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);
+        });
+
+      });
+
+    }));
+
+  });
+
+
+  describe(`${host}/health-check`, () => {
+
+    it('should respond with 200', done => {
+      Promise.all([
+        h.runCmd(`curl -iL http://${host}/health-check`).then(h.verifyResponse(200)),
+        h.runCmd(`curl -iL http://${host}/health-check/`).then(h.verifyResponse(200)),
+      ]).then(done);
+    });
+
+
+    it('should respond with 404 if the path does not match exactly', done => {
+      Promise.all([
+        h.runCmd(`curl -iL http://${host}/health-check/foo`).then(h.verifyResponse(404)),
+        h.runCmd(`curl -iL http://${host}/health-check-foo`).then(h.verifyResponse(404)),
+        h.runCmd(`curl -iL http://${host}/health-checknfoo`).then(h.verifyResponse(404)),
+        h.runCmd(`curl -iL http://${host}/foo/health-check`).then(h.verifyResponse(404)),
+        h.runCmd(`curl -iL http://${host}/foo-health-check`).then(h.verifyResponse(404)),
+        h.runCmd(`curl -iL http://${host}/foonhealth-check`).then(h.verifyResponse(404)),
+      ]).then(done);
+    });
+
+  });
+
+
+  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 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)),
+        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
new file mode 100644
index 000000000000..05ba8a807c68
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "aio-scripts-js",
+  "version": "1.0.0",
+  "description": "Performing various tasks on PR build artifacts for angular.io.",
+  "repository": "https://github.com/angular/angular.git",
+  "author": "Angular",
+  "license": "MIT",
+  "scripts": {
+    "prebuild": "yarn clean-dist",
+    "build": "tsc",
+    "build-watch": "yarn build --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 lint",
+    "~~test-only": "node dist/test",
+    "pretest": "yarn build",
+    "test": "yarn ~~test-only",
+    "pretest-watch": "yarn build",
+    "test-watch": "nodemon --exec \"yarn ~~test-only\" --watch dist"
+  },
+  "dependencies": {
+    "body-parser": "^1.18.2",
+    "express": "^4.15.4",
+    "jasmine": "^2.8.0",
+    "jsonwebtoken": "^8.0.1",
+    "shelljs": "^0.7.8",
+    "tslib": "^1.7.1"
+  },
+  "devDependencies": {
+    "@types/body-parser": "^1.16.5",
+    "@types/express": "^4.0.37",
+    "@types/jasmine": "^2.6.0",
+    "@types/jsonwebtoken": "^7.2.3",
+    "@types/node": "^8.0.30",
+    "@types/shelljs": "^0.8.0",
+    "@types/supertest": "^2.0.3",
+    "concurrently": "^3.5.0",
+    "nodemon": "^1.12.1",
+    "supertest": "^3.0.0",
+    "tslint": "^5.7.0",
+    "tslint-jasmine-noSkipOrFocus": "^1.0.8",
+    "typescript": "^2.5.2"
+  }
+}
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
new file mode 100644
index 000000000000..df9b7e074a98
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/clean-up/build-cleaner.spec.ts
@@ -0,0 +1,360 @@
+// 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
+describe('BuildCleaner', () => {
+  let cleaner: BuildCleaner;
+
+  beforeEach(() => cleaner = new BuildCleaner('/foo/bar', 'baz/qux', '12345'));
+
+
+  describe('constructor()', () => {
+
+    it('should throw if \'buildsDir\' is empty', () => {
+      expect(() => new BuildCleaner('', '/baz/qux', '12345')).
+        toThrowError('Missing or empty required parameter \'buildsDir\'!');
+    });
+
+
+    it('should throw if \'repoSlug\' is empty', () => {
+      expect(() => new BuildCleaner('/foo/bar', '', '12345')).
+        toThrowError('Missing or empty required parameter \'repoSlug\'!');
+    });
+
+
+    it('should throw if \'githubToken\' is empty', () => {
+      expect(() => new BuildCleaner('/foo/bar', 'baz/qux', '')).
+        toThrowError('Missing or empty required parameter \'githubToken\'!');
+    });
+
+  });
+
+
+  describe('cleanUp()', () => {
+    let cleanerGetExistingBuildNumbersSpy: jasmine.Spy;
+    let cleanerGetOpenPrNumbersSpy: jasmine.Spy;
+    let cleanerRemoveUnnecessaryBuildsSpy: jasmine.Spy;
+    let existingBuildsDeferred: {resolve: (v?: any) => void, reject: (e?: any) => void};
+    let openPrsDeferred: {resolve: (v?: any) => void, reject: (e?: any) => void};
+    let promise: Promise<void>;
+
+    beforeEach(() => {
+      cleanerGetExistingBuildNumbersSpy = spyOn(cleaner as any, 'getExistingBuildNumbers').and.callFake(() => {
+        return new Promise((resolve, reject) => existingBuildsDeferred = {resolve, reject});
+      });
+      cleanerGetOpenPrNumbersSpy = spyOn(cleaner as any, 'getOpenPrNumbers').and.callFake(() => {
+        return new Promise((resolve, reject) => openPrsDeferred = {resolve, reject});
+      });
+      cleanerRemoveUnnecessaryBuildsSpy = spyOn(cleaner as any, 'removeUnnecessaryBuilds');
+
+      promise = cleaner.cleanUp();
+    });
+
+
+    it('should return a promise', () => {
+      expect(promise).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should get the existing builds', () => {
+      expect(cleanerGetExistingBuildNumbersSpy).toHaveBeenCalled();
+    });
+
+
+    it('should get the open PRs', () => {
+      expect(cleanerGetOpenPrNumbersSpy).toHaveBeenCalled();
+    });
+
+
+    it('should reject if \'getExistingBuildNumbers()\' rejects', done => {
+      promise.catch(err => {
+        expect(err).toBe('Test');
+        done();
+      });
+
+      existingBuildsDeferred.reject('Test');
+    });
+
+
+    it('should reject if \'getOpenPrNumbers()\' rejects', done => {
+      promise.catch(err => {
+        expect(err).toBe('Test');
+        done();
+      });
+
+      openPrsDeferred.reject('Test');
+    });
+
+
+    it('should reject if \'removeUnnecessaryBuilds()\' rejects', done => {
+      promise.catch(err => {
+        expect(err).toBe('Test');
+        done();
+      });
+
+      cleanerRemoveUnnecessaryBuildsSpy.and.returnValue(Promise.reject('Test'));
+      existingBuildsDeferred.resolve();
+      openPrsDeferred.resolve();
+    });
+
+
+    it('should pass existing builds and open PRs to \'removeUnnecessaryBuilds()\'', done => {
+      promise.then(() => {
+        expect(cleanerRemoveUnnecessaryBuildsSpy).toHaveBeenCalledWith('foo', 'bar');
+        done();
+      });
+
+      existingBuildsDeferred.resolve('foo');
+      openPrsDeferred.resolve('bar');
+    });
+
+
+    it('should resolve with the value returned by \'removeUnnecessaryBuilds()\'', done => {
+      promise.then(result => {
+        expect(result as any).toBe('Test');
+        done();
+      });
+
+      cleanerRemoveUnnecessaryBuildsSpy.and.returnValue(Promise.resolve('Test'));
+      existingBuildsDeferred.resolve();
+      openPrsDeferred.resolve();
+    });
+
+  });
+
+
+  // Protected methods
+
+  describe('getExistingBuildNumbers()', () => {
+    let fsReaddirSpy: jasmine.Spy;
+    let readdirCb: (err: any, files?: string[]) => void;
+    let promise: Promise<number[]>;
+
+    beforeEach(() => {
+      fsReaddirSpy = spyOn(fs, 'readdir').and.callFake((_: string, cb: typeof readdirCb) => readdirCb = cb);
+      promise = (cleaner as any).getExistingBuildNumbers();
+    });
+
+
+    it('should return a promise', () => {
+      expect(promise).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should get the contents of the builds directory', () => {
+      expect(fsReaddirSpy).toHaveBeenCalled();
+      expect(fsReaddirSpy.calls.argsFor(0)[0]).toBe('/foo/bar');
+    });
+
+
+    it('should reject if an error occurs while getting the files', done => {
+      promise.catch(err => {
+        expect(err).toBe('Test');
+        done();
+      });
+
+      readdirCb('Test');
+    });
+
+
+    it('should resolve with the returned files (as numbers)', done => {
+      promise.then(result => {
+        expect(result).toEqual([12, 34, 56]);
+        done();
+      });
+
+      readdirCb(null, ['12', '34', '56']);
+    });
+
+
+    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]);
+        done();
+      });
+
+      readdirCb(null, ['12', 'foo', '34', 'bar', '56', '000']);
+    });
+
+  });
+
+
+  describe('getOpenPrNumbers()', () => {
+    let prDeferred: {resolve: (v: any) => void, reject: (v: any) => void};
+    let promise: Promise<number[]>;
+
+    beforeEach(() => {
+      spyOn(GithubPullRequests.prototype, 'fetchAll').and.callFake(() => {
+        return new Promise((resolve, reject) => prDeferred = {resolve, reject});
+      });
+
+      promise = (cleaner as any).getOpenPrNumbers();
+    });
+
+
+    it('should return a promise', () => {
+      expect(promise).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should fetch open PRs via \'GithubPullRequests\'', () => {
+      expect(GithubPullRequests.prototype.fetchAll).toHaveBeenCalledWith('open');
+    });
+
+
+    it('should reject if an error occurs while fetching PRs', done => {
+      promise.catch(err => {
+        expect(err).toBe('Test');
+        done();
+      });
+
+      prDeferred.reject('Test');
+    });
+
+
+    it('should resolve with the numbers of the fetched PRs', done => {
+      promise.then(prNumbers => {
+        expect(prNumbers).toEqual([1, 2, 3]);
+        done();
+      });
+
+      prDeferred.resolve([{id: 0, number: 1}, {id: 1, number: 2}, {id: 2, number: 3}]);
+    });
+
+  });
+
+
+  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();
+    });
+
+
+    it('should remove the specified directory and its content', () => {
+      (cleaner as any).removeDir('/foo/bar');
+      expect(shellRmSpy).toHaveBeenCalledWith('-rf', '/foo/bar');
+    });
+
+
+    it('should make the directory and its content writable before removing', () => {
+      shellRmSpy.and.callFake(() => expect(shellChmodSpy).toHaveBeenCalledWith('-R', 'a+w', '/foo/bar'));
+      (cleaner as any).removeDir('/foo/bar');
+
+      expect(shellRmSpy).toHaveBeenCalled();
+    });
+
+
+    it('should catch errors and log them', () => {
+      const consoleErrorSpy = spyOn(console, 'error');
+      shellRmSpy.and.callFake(() => {
+        // tslint:disable-next-line: no-string-throw
+        throw 'Test';
+      });
+
+      (cleaner as any).removeDir('/foo/bar');
+
+      expect(consoleErrorSpy).toHaveBeenCalled();
+      expect(consoleErrorSpy.calls.argsFor(0)[0]).toContain('Unable to remove \'/foo/bar\'');
+      expect(consoleErrorSpy.calls.argsFor(0)[1]).toBe('Test');
+    });
+
+  });
+
+
+  describe('removeUnnecessaryBuilds()', () => {
+    let consoleLogSpy: jasmine.Spy;
+    let cleanerRemoveDirSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      consoleLogSpy = spyOn(console, 'log');
+      cleanerRemoveDirSpy = spyOn(cleaner as any, 'removeDir');
+    });
+
+
+    it('should log the number of existing builds, open PRs and builds to be removed', () => {
+      (cleaner as any).removeUnnecessaryBuilds([1, 2, 3], [3, 4, 5, 6]);
+
+      expect(console.log).toHaveBeenCalledWith('Existing builds: 3');
+      expect(console.log).toHaveBeenCalledWith('Open pull requests: 4');
+      expect(console.log).toHaveBeenCalledWith('Removing 2 build(s): 1, 2');
+    });
+
+
+    it('should construct full paths to directories (by prepending \'buildsDir\')', () => {
+      (cleaner as any).removeUnnecessaryBuilds([1, 2, 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(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]);
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledTimes(0);
+      cleanerRemoveDirSpy.calls.reset();
+
+      (cleaner as any).removeUnnecessaryBuilds([1, 2, 3, 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
new file mode 100644
index 000000000000..65ff54f61a8b
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-api.spec.ts
@@ -0,0 +1,410 @@
+// Imports
+import {EventEmitter} from 'events';
+import {ClientRequest, IncomingMessage} from 'http';
+import * as https from 'https';
+import {GithubApi} from '../../lib/common/github-api';
+
+// Tests
+describe('GithubApi', () => {
+  let api: GithubApi;
+
+  beforeEach(() => api = new GithubApi('12345'));
+
+
+  describe('constructor()', () => {
+
+    it('should throw if \'githubToken\' is missing or empty', () => {
+      expect(() => new GithubApi('')).toThrowError('Missing or empty required parameter \'githubToken\'!');
+    });
+
+  });
+
+
+  describe('get()', () => {
+    let apiBuildPathSpy: jasmine.Spy;
+    let apiRequestSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      apiBuildPathSpy = spyOn(api as any, 'buildPath');
+      apiRequestSpy = spyOn(api as any, 'request');
+    });
+
+
+    it('should call \'buildPath()\' with the pathname and params', () => {
+      api.get('/foo', {bar: 'baz'});
+
+      expect(apiBuildPathSpy).toHaveBeenCalled();
+      expect(apiBuildPathSpy.calls.argsFor(0)).toEqual(['/foo', {bar: 'baz'}]);
+    });
+
+
+    it('should call \'request()\' with the correct method', () => {
+      api.get('/foo');
+
+      expect(apiRequestSpy).toHaveBeenCalled();
+      expect(apiRequestSpy.calls.argsFor(0)[0]).toBe('get');
+    });
+
+
+    it('should call \'request()\' with the correct path', () => {
+      apiBuildPathSpy.and.returnValue('/foo/bar');
+      api.get('foo');
+
+      expect(apiRequestSpy).toHaveBeenCalled();
+      expect(apiRequestSpy.calls.argsFor(0)[1]).toBe('/foo/bar');
+    });
+
+
+    it('should not pass data to \'request()\'', () => {
+      (api.get as any)('foo', {}, {});
+
+      expect(apiRequestSpy).toHaveBeenCalled();
+      expect(apiRequestSpy.calls.argsFor(0)[2]).toBeUndefined();
+    });
+
+  });
+
+
+  describe('post()', () => {
+    let apiBuildPathSpy: jasmine.Spy;
+    let apiRequestSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      apiBuildPathSpy = spyOn(api as any, 'buildPath');
+      apiRequestSpy = spyOn(api as any, 'request');
+    });
+
+
+    it('should call \'buildPath()\' with the pathname and params', () => {
+      api.post('/foo', {bar: 'baz'});
+
+      expect(apiBuildPathSpy).toHaveBeenCalled();
+      expect(apiBuildPathSpy.calls.argsFor(0)).toEqual(['/foo', {bar: 'baz'}]);
+    });
+
+
+    it('should call \'request()\' with the correct method', () => {
+      api.post('/foo');
+
+      expect(apiRequestSpy).toHaveBeenCalled();
+      expect(apiRequestSpy.calls.argsFor(0)[0]).toBe('post');
+    });
+
+
+    it('should call \'request()\' with the correct path', () => {
+      apiBuildPathSpy.and.returnValue('/foo/bar');
+      api.post('/foo');
+
+      expect(apiRequestSpy).toHaveBeenCalled();
+      expect(apiRequestSpy.calls.argsFor(0)[1]).toBe('/foo/bar');
+    });
+
+
+    it('should pass the data to \'request()\'', () => {
+      api.post('/foo', {}, {bar: 'baz'});
+
+      expect(apiRequestSpy).toHaveBeenCalled();
+      expect(apiRequestSpy.calls.argsFor(0)[2]).toEqual({bar: 'baz'});
+    });
+
+  });
+
+
+  // Protected methods
+
+  describe('buildPath()', () => {
+
+    it('should return the pathname if no params', () => {
+      expect((api as any).buildPath('/foo')).toBe('/foo');
+      expect((api as any).buildPath('/foo', undefined)).toBe('/foo');
+      expect((api as any).buildPath('/foo', null)).toBe('/foo');
+    });
+
+
+    it('should append the params to the pathname', () => {
+      expect((api as any).buildPath('/foo', {bar: 'baz'})).toBe('/foo?bar=baz');
+    });
+
+
+    it('should join the params with \'&\'', () => {
+      expect((api as any).buildPath('/foo', {bar: 1, baz: 2})).toBe('/foo?bar=1&baz=2');
+    });
+
+
+    it('should ignore undefined/null params', () => {
+      expect((api as any).buildPath('/foo', {bar: undefined, baz: null})).toBe('/foo');
+    });
+
+
+    it('should encode param values as URI components', () => {
+      expect((api as any).buildPath('/foo', {bar: 'b a&z'})).toBe('/foo?bar=b%20a%26z');
+    });
+
+  });
+
+
+  describe('getPaginated()', () => {
+    let deferreds: {resolve: (v: any) => void, reject: (v: any) => void}[];
+
+    beforeEach(() => {
+      deferreds = [];
+      spyOn(api, 'get').and.callFake(() => new Promise((resolve, reject) => deferreds.push({resolve, reject})));
+    });
+
+
+    it('should return a promise', () => {
+      expect((api as any).getPaginated()).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should call \'get()\' with the correct pathname and params', () => {
+      (api as any).getPaginated('/foo/bar');
+      (api as any).getPaginated('/foo/bar', {baz: 'qux'});
+
+      expect(api.get).toHaveBeenCalledWith('/foo/bar', {page: 0, per_page: 100});
+      expect(api.get).toHaveBeenCalledWith('/foo/bar', {baz: 'qux', page: 0, per_page: 100});
+    });
+
+
+    it('should reject if the request fails', done => {
+      (api as any).getPaginated('/foo/bar').catch((err: any) => {
+        expect(err).toBe('Test');
+        done();
+      });
+
+      deferreds[0].reject('Test');
+    });
+
+
+    it('should resolve with the returned items', done => {
+      const items = [{id: 1}, {id: 2}];
+
+      (api as any).getPaginated('/foo/bar').then((data: any) => {
+        expect(data).toEqual(items);
+        done();
+      });
+
+      deferreds[0].resolve(items);
+    });
+
+
+    it('should iteratively call \'get()\' to fetch all items', done => {
+      // Create an array or 250 objects.
+      const allItems = '.'.repeat(250).split('').map((_, i) => ({id: i}));
+      const apiGetSpy = api.get as jasmine.Spy;
+
+      (api as any).getPaginated('/foo/bar', {baz: 'qux'}).then((data: any) => {
+        const paramsForPage = (page: number) => ({baz: 'qux', page, per_page: 100});
+
+        expect(apiGetSpy).toHaveBeenCalledTimes(3);
+        expect(apiGetSpy.calls.argsFor(0)).toEqual(['/foo/bar', paramsForPage(0)]);
+        expect(apiGetSpy.calls.argsFor(1)).toEqual(['/foo/bar', paramsForPage(1)]);
+        expect(apiGetSpy.calls.argsFor(2)).toEqual(['/foo/bar', paramsForPage(2)]);
+
+        expect(data).toEqual(allItems);
+
+        done();
+      });
+
+      deferreds[0].resolve(allItems.slice(0, 100));
+      setTimeout(() => {
+        deferreds[1].resolve(allItems.slice(100, 200));
+        setTimeout(() => {
+          deferreds[2].resolve(allItems.slice(200));
+        }, 0);
+      }, 0);
+    });
+
+  });
+
+
+  describe('request()', () => {
+    let httpsRequestSpy: jasmine.Spy;
+    let latestRequest: ClientRequest;
+
+    beforeEach(() => {
+      const originalRequest = https.request;
+
+      httpsRequestSpy = spyOn(https, 'request').and.callFake((...args: any[]) => {
+        latestRequest = originalRequest.apply(https, args);
+
+        spyOn(latestRequest, 'on').and.callThrough();
+        spyOn(latestRequest, 'end');
+
+        return latestRequest;
+      });
+    });
+
+
+    it('should return a promise', () => {
+      expect((api as any).request()).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should call \'https.request()\' with the correct options', () => {
+      (api as any).request('method', 'path');
+
+      expect(httpsRequestSpy).toHaveBeenCalled();
+      expect(httpsRequestSpy.calls.argsFor(0)[0]).toEqual(jasmine.objectContaining({
+        headers: jasmine.objectContaining({
+          'User-Agent': `Node/${process.versions.node}`,
+        }),
+        host: 'api.github.com',
+        method: 'method',
+        path: 'path',
+      }));
+    });
+
+
+    it('should call specify an \'Authorization\' header if \'githubToken\' is present', () => {
+      (api as any).request('method', 'path');
+
+      expect(httpsRequestSpy).toHaveBeenCalled();
+      expect(httpsRequestSpy.calls.argsFor(0)[0].headers).toEqual(jasmine.objectContaining({
+        Authorization: 'token 12345',
+      }));
+    });
+
+
+    it('should reject on request error', done => {
+      (api as any).request('method', 'path').catch((err: any) => {
+        expect(err).toBe('Test');
+        done();
+      });
+
+      latestRequest.emit('error', 'Test');
+    });
+
+
+    it('should send the request (i.e. call \'end()\')', () => {
+      (api as any).request('method', 'path');
+      expect(latestRequest.end).toHaveBeenCalled();
+    });
+
+
+    it('should \'JSON.stringify\' and send the data along with the request', () => {
+      (api as any).request('method', 'path');
+      expect(latestRequest.end).toHaveBeenCalledWith(null);
+
+      (api as any).request('method', 'path', {key: 'value'});
+      expect(latestRequest.end).toHaveBeenCalledWith('{"key":"value"}');
+    });
+
+
+    describe('onResponse', () => {
+      let promise: Promise<object>;
+      let respond: (statusCode: number) => IncomingMessage;
+
+      beforeEach(() => {
+        promise = (api as any).request('method', 'path');
+
+        respond = (statusCode: number) => {
+          const mockResponse = new EventEmitter() as IncomingMessage;
+          mockResponse.statusCode = statusCode;
+
+          const onResponse = httpsRequestSpy.calls.argsFor(0)[1];
+          onResponse(mockResponse);
+
+          return mockResponse;
+        };
+      });
+
+
+      it('should reject on response error', done => {
+        promise.catch(err => {
+          expect(err).toBe('Test');
+          done();
+        });
+
+        const res = respond(200);
+        res.emit('error', 'Test');
+      });
+
+
+      it('should reject if returned statusCode is <200', done => {
+        promise.catch(err => {
+          expect(err).toContain('failed');
+          expect(err).toContain('status: 199');
+          done();
+        });
+
+        const res = respond(199);
+        res.emit('end');
+      });
+
+
+      it('should reject if returned statusCode is >=400', done => {
+        promise.catch(err => {
+          expect(err).toContain('failed');
+          expect(err).toContain('status: 400');
+          done();
+        });
+
+        const res = respond(400);
+        res.emit('end');
+      });
+
+
+      it('should include the response text in the rejection message', done => {
+        promise.catch(err => {
+          expect(err).toContain('Test');
+          done();
+        });
+
+        const res = respond(500);
+        res.emit('data', 'Test');
+        res.emit('end');
+      });
+
+
+      it('should resolve if returned statusCode is <=200 <400', done => {
+        promise.then(done);
+
+        const res = respond(200);
+        res.emit('data', '{}');
+        res.emit('end');
+      });
+
+
+      it('should resolve with the response text \'JSON.parsed\'', done => {
+        promise.then(data => {
+          expect(data).toEqual({foo: 'bar'});
+          done();
+        });
+
+        const res = respond(300);
+        res.emit('data', '{"foo":"bar"}');
+        res.emit('end');
+      });
+
+
+      it('should collect and concatenate the whole response text', done => {
+        promise.then(data => {
+          expect(data).toEqual({foo: 'bar', baz: 'qux'});
+          done();
+        });
+
+        const res = respond(300);
+        res.emit('data', '{"foo":');
+        res.emit('data', '"bar","baz"');
+        res.emit('data', ':"qux"}');
+        res.emit('end');
+      });
+
+
+      it('should reject if the response text is malformed JSON', done => {
+        promise.catch(err => {
+          expect(err).toEqual(jasmine.any(SyntaxError));
+          done();
+        });
+
+        const res = respond(300);
+        res.emit('data', '}');
+        res.emit('end');
+      });
+
+    });
+
+  });
+
+});
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
new file mode 100644
index 000000000000..db0f70dd03e3
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-pull-requests.spec.ts
@@ -0,0 +1,141 @@
+// Imports
+import {GithubPullRequests} from '../../lib/common/github-pull-requests';
+
+// Tests
+describe('GithubPullRequests', () => {
+
+  describe('constructor()', () => {
+
+    it('should throw if \'githubToken\' is missing or empty', () => {
+      expect(() => new GithubPullRequests('', 'foo/bar')).
+        toThrowError('Missing or empty required parameter \'githubToken\'!');
+    });
+
+
+    it('should throw if \'repoSlug\' is missing or empty', () => {
+      expect(() => new GithubPullRequests('12345', '')).
+        toThrowError('Missing or empty required parameter \'repoSlug\'!');
+    });
+
+  });
+
+
+  describe('addComment()', () => {
+    let prs: GithubPullRequests;
+    let deferred: {resolve: (v: any) => void, reject: (v: any) => void};
+
+    beforeEach(() => {
+      prs = new GithubPullRequests('12345', 'foo/bar');
+
+      spyOn(prs, 'post').and.callFake(() => new Promise((resolve, reject) => deferred = {resolve, reject}));
+    });
+
+
+    it('should return a promise', () => {
+      expect(prs.addComment(42, 'body')).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should throw if the PR number is invalid', () => {
+      expect(() => prs.addComment(-1337, 'body')).toThrowError(`Invalid PR number: -1337`);
+      expect(() => prs.addComment(NaN, 'body')).toThrowError(`Invalid PR number: NaN`);
+    });
+
+
+    it('should throw if the comment body is invalid or empty', () => {
+      expect(() => prs.addComment(42, '')).toThrowError(`Invalid or empty comment body: `);
+    });
+
+
+    it('should call \'post()\' with the correct pathname, params and data', () => {
+      prs.addComment(42, 'body');
+
+      expect(prs.post).toHaveBeenCalledWith('/repos/foo/bar/issues/42/comments', null, {body: 'body'});
+    });
+
+
+    it('should reject if the request fails', done => {
+      prs.addComment(42, 'body').catch(err => {
+        expect(err).toBe('Test');
+        done();
+      });
+
+      deferred.reject('Test');
+    });
+
+
+    it('should resolve with the returned response', done => {
+      prs.addComment(42, 'body').then(data => {
+        expect(data as any).toBe('Test');
+        done();
+      });
+
+      deferred.resolve('Test');
+    });
+
+  });
+
+
+  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;
+
+    beforeEach(() => {
+      prs = new GithubPullRequests('12345', 'foo/bar');
+      prsGetPaginatedSpy = spyOn(prs as any, 'getPaginated');
+      spyOn(console, 'log');
+    });
+
+
+    it('should call \'getPaginated()\' with the correct pathname and params', () => {
+      const expectedPathname = '/repos/foo/bar/pulls';
+
+      prs.fetchAll('all');
+      prs.fetchAll('closed');
+      prs.fetchAll('open');
+
+      expect(prsGetPaginatedSpy).toHaveBeenCalledTimes(3);
+      expect(prsGetPaginatedSpy.calls.argsFor(0)).toEqual([expectedPathname, {state: 'all'}]);
+      expect(prsGetPaginatedSpy.calls.argsFor(1)).toEqual([expectedPathname, {state: 'closed'}]);
+      expect(prsGetPaginatedSpy.calls.argsFor(2)).toEqual([expectedPathname, {state: 'open'}]);
+    });
+
+
+    it('should default to \'all\' if no state is specified', () => {
+      prs.fetchAll();
+      expect(prsGetPaginatedSpy).toHaveBeenCalledWith('/repos/foo/bar/pulls', {state: 'all'});
+    });
+
+
+    it('should forward the value returned by \'getPaginated()\'', () => {
+      prsGetPaginatedSpy.and.returnValue('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
new file mode 100644
index 000000000000..a9b03517c00e
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-teams.spec.ts
@@ -0,0 +1,235 @@
+// Imports
+import {GithubTeams} from '../../lib/common/github-teams';
+
+// Tests
+describe('GithubTeams', () => {
+
+  describe('constructor()', () => {
+
+    it('should throw if \'githubToken\' is missing or empty', () => {
+      expect(() => new GithubTeams('', 'org')).
+        toThrowError('Missing or empty required parameter \'githubToken\'!');
+    });
+
+
+    it('should throw if \'organization\' is missing or empty', () => {
+      expect(() => new GithubTeams('12345', '')).
+        toThrowError('Missing or empty required parameter \'organization\'!');
+    });
+
+  });
+
+
+  describe('fetchAll()', () => {
+    let teams: GithubTeams;
+    let teamsGetPaginatedSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      teams = new GithubTeams('12345', 'foo');
+      teamsGetPaginatedSpy = spyOn(teams as any, 'getPaginated');
+    });
+
+
+    it('should call \'getPaginated()\' with the correct pathname and params', () => {
+      teams.fetchAll();
+      expect(teamsGetPaginatedSpy).toHaveBeenCalledWith('/orgs/foo/teams');
+    });
+
+
+    it('should forward the value returned by \'getPaginated()\'', () => {
+      teamsGetPaginatedSpy.and.returnValue('Test');
+      expect(teams.fetchAll() as any).toBe('Test');
+    });
+
+  });
+
+
+  describe('isMemberById()', () => {
+    let teams: GithubTeams;
+    let teamsGetSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      teams = new GithubTeams('12345', 'foo');
+      teamsGetSpy = spyOn(teams, 'get').and.returnValue(Promise.resolve(null));
+    });
+
+
+    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));
+    });
+
+
+    it('should resolve with false if called with an empty array', done => {
+      teams.isMemberById('user', []).then(isMember => {
+        expect(isMember).toBe(false);
+        expect(teamsGetSpy).not.toHaveBeenCalled();
+        done();
+      });
+    });
+
+
+    it('should call \'get()\' with the correct pathname', done => {
+      teams.isMemberById('user', [1]).then(() => {
+        expect(teamsGetSpy).toHaveBeenCalledWith('/teams/1/memberships/user');
+        done();
+      });
+    });
+
+
+    it('should resolve with false if \'get()\' rejects', done => {
+      teamsGetSpy.and.returnValue(Promise.reject(null));
+      teams.isMemberById('user', [1]).then(isMember => {
+        expect(isMember).toBe(false);
+        expect(teamsGetSpy).toHaveBeenCalled();
+        done();
+      });
+    });
+
+
+    it('should resolve with false if the membership is not active', done => {
+      teamsGetSpy.and.returnValue(Promise.resolve({state: 'pending'}));
+      teams.isMemberById('user', [1]).then(isMember => {
+        expect(isMember).toBe(false);
+        expect(teamsGetSpy).toHaveBeenCalled();
+        done();
+      });
+    });
+
+
+    it('should resolve with true if the membership is active', done => {
+      teamsGetSpy.and.returnValue(Promise.resolve({state: 'active'}));
+      teams.isMemberById('user', [1]).then(isMember => {
+        expect(isMember).toBe(true);
+        done();
+      });
+    });
+
+
+    it('should sequentially call \'get()\' until an active membership is found', done => {
+      const trainedResponses: {[pathname: string]: Promise<{state: string}>} = {
+        '/teams/1/memberships/user': Promise.resolve({state: 'pending'}),
+        '/teams/2/memberships/user': Promise.reject(null),
+        '/teams/3/memberships/user': Promise.resolve({state: 'active'}),
+      };
+      teamsGetSpy.and.callFake((pathname: string) => trainedResponses[pathname]);
+
+      teams.isMemberById('user', [1, 2, 3, 4]).then(isMember => {
+        expect(isMember).toBe(true);
+
+        expect(teamsGetSpy).toHaveBeenCalledTimes(3);
+        expect(teamsGetSpy.calls.argsFor(0)[0]).toBe('/teams/1/memberships/user');
+        expect(teamsGetSpy.calls.argsFor(1)[0]).toBe('/teams/2/memberships/user');
+        expect(teamsGetSpy.calls.argsFor(2)[0]).toBe('/teams/3/memberships/user');
+
+        done();
+      });
+    });
+
+
+    it('should resolve with false if no active membership is found', done => {
+      const trainedResponses: {[pathname: string]: Promise<{state: string}>} = {
+        '/teams/1/memberships/user': Promise.resolve({state: 'pending'}),
+        '/teams/2/memberships/user':  Promise.reject(null),
+        '/teams/3/memberships/user': Promise.resolve({state: 'not active'}),
+        '/teams/4/memberships/user':  Promise.reject(null),
+      };
+      teamsGetSpy.and.callFake((pathname: string) => trainedResponses[pathname]);
+
+      teams.isMemberById('user', [1, 2, 3, 4]).then(isMember => {
+        expect(isMember).toBe(false);
+
+        expect(teamsGetSpy).toHaveBeenCalledTimes(4);
+        expect(teamsGetSpy.calls.argsFor(0)[0]).toBe('/teams/1/memberships/user');
+        expect(teamsGetSpy.calls.argsFor(1)[0]).toBe('/teams/2/memberships/user');
+        expect(teamsGetSpy.calls.argsFor(2)[0]).toBe('/teams/3/memberships/user');
+        expect(teamsGetSpy.calls.argsFor(3)[0]).toBe('/teams/4/memberships/user');
+
+        done();
+      });
+    });
+
+  });
+
+
+  describe('isMemberBySlug()', () => {
+    let teams: GithubTeams;
+    let teamsFetchAllSpy: jasmine.Spy;
+    let teamsIsMemberByIdSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      teams = new GithubTeams('12345', 'foo');
+
+      const mockResponse = Promise.resolve([{id: 1, slug: 'team1'}, {id: 2, slug: 'team2'}]);
+      teamsFetchAllSpy = spyOn(teams, 'fetchAll').and.returnValue(mockResponse);
+      teamsIsMemberByIdSpy = spyOn(teams, 'isMemberById');
+    });
+
+
+    it('should return a promise', () => {
+      expect(teams.isMemberBySlug('user', ['team-slug'])).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should call \'fetchAll()\'', () => {
+      teams.isMemberBySlug('user', ['team-slug']);
+      expect(teamsFetchAllSpy).toHaveBeenCalled();
+    });
+
+
+    it('should resolve with false if \'fetchAll()\' rejects', done => {
+      teamsFetchAllSpy.and.returnValue(Promise.reject(null));
+      teams.isMemberBySlug('user', ['team-slug']).then(isMember => {
+        expect(isMember).toBe(false);
+        done();
+      });
+    });
+
+
+    it('should call \'isMemberById()\' with the correct params if no team is found', done => {
+      teams.isMemberBySlug('user', ['no-match']).then(() => {
+        expect(teamsIsMemberByIdSpy).toHaveBeenCalledWith('user', []);
+        done();
+      });
+    });
+
+
+    it('should call \'isMemberById()\' with the correct params if teams are found', done => {
+      const spy = teamsIsMemberByIdSpy;
+
+      Promise.all([
+        teams.isMemberBySlug('user', ['team1']).then(() => expect(spy).toHaveBeenCalledWith('user', [1])),
+        teams.isMemberBySlug('user', ['team2']).then(() => expect(spy).toHaveBeenCalledWith('user', [2])),
+        teams.isMemberBySlug('user', ['team1', 'team2']).then(() => expect(spy).toHaveBeenCalledWith('user', [1, 2])),
+      ]).then(done);
+    });
+
+
+    it('should resolve with false if \'isMemberById()\' rejects', done => {
+      teamsIsMemberByIdSpy.and.returnValue(Promise.reject(null));
+      teams.isMemberBySlug('user', ['team1']).then(isMember => {
+        expect(isMember).toBe(false);
+        expect(teamsIsMemberByIdSpy).toHaveBeenCalled();
+        done();
+      });
+    });
+
+
+    it('should resolve with the value \'isMemberById()\' resolves with', done => {
+      teamsIsMemberByIdSpy.and.returnValues(Promise.resolve(false), Promise.resolve(true));
+
+      Promise.all([
+        teams.isMemberBySlug('user', ['team1']).then(isMember => expect(isMember).toBe(false)),
+        teams.isMemberBySlug('user', ['team1']).then(isMember => expect(isMember).toBe(true)),
+      ]).then(() => {
+        expect(teamsIsMemberByIdSpy).toHaveBeenCalledTimes(2);
+        done();
+      });
+    });
+
+  });
+
+});
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/utils.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/utils.spec.ts
new file mode 100644
index 000000000000..872fa2fdd8ce
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/utils.spec.ts
@@ -0,0 +1,81 @@
+// Imports
+import {assertNotMissingOrEmpty, getEnvVar} from '../../lib/common/utils';
+
+// Tests
+describe('utils', () => {
+
+  describe('assertNotMissingOrEmpty()', () => {
+
+    it('should throw if passed an empty value', () => {
+      expect(() => assertNotMissingOrEmpty('foo', undefined)).
+        toThrowError('Missing or empty required parameter \'foo\'!');
+      expect(() => assertNotMissingOrEmpty('bar', null)).toThrowError('Missing or empty required parameter \'bar\'!');
+      expect(() => assertNotMissingOrEmpty('baz', '')).toThrowError('Missing or empty required parameter \'baz\'!');
+    });
+
+
+    it('should not throw if passed a non-empty value', () => {
+      expect(() => assertNotMissingOrEmpty('foo', ' ')).not.toThrow();
+      expect(() => assertNotMissingOrEmpty('bar', 'bar')).not.toThrow();
+      expect(() => assertNotMissingOrEmpty('baz', 'b a z')).not.toThrow();
+    });
+
+  });
+
+
+  describe('getEnvVar()', () => {
+    const emptyVar = '$$test_utils_getEnvVar_empty$$';
+    const nonEmptyVar = '$$test_utils_getEnvVar_nonEmpty$$';
+    const undefinedVar = '$$test_utils_getEnvVar_undefined$$';
+
+    beforeEach(() => {
+      process.env[emptyVar] = '';
+      process.env[nonEmptyVar] = 'foo';
+    });
+    afterEach(() => {
+      delete process.env[emptyVar];
+      delete process.env[nonEmptyVar];
+    });
+
+
+    it('should return an environment variable', () => {
+      expect(getEnvVar(nonEmptyVar)).toBe('foo');
+    });
+
+
+    it('should exit with an error if the environment variable is not defined', () => {
+      const consoleErrorSpy = spyOn(console, 'error');
+      const processExitSpy = spyOn(process, 'exit');
+
+      getEnvVar(undefinedVar);
+
+      expect(consoleErrorSpy).toHaveBeenCalled();
+      expect(consoleErrorSpy.calls.argsFor(0)[0]).toContain(undefinedVar);
+      expect(processExitSpy).toHaveBeenCalledWith(1);
+    });
+
+
+    it('should exit with an error if the environment variable is empty', () => {
+      const consoleErrorSpy = spyOn(console, 'error');
+      const processExitSpy = spyOn(process, 'exit');
+
+      getEnvVar(emptyVar);
+
+      expect(consoleErrorSpy).toHaveBeenCalled();
+      expect(consoleErrorSpy.calls.argsFor(0)[0]).toContain(emptyVar);
+      expect(processExitSpy).toHaveBeenCalledWith(1);
+    });
+
+
+    it('should return an empty string if an undefined variable is optional', () => {
+      expect(getEnvVar(undefinedVar, true)).toBe('');
+    });
+
+
+    it('should return an empty string if an empty variable is optional', () => {
+      expect(getEnvVar(emptyVar, true)).toBe('');
+    });
+
+  });
+
+});
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/helpers.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/helpers.ts
new file mode 100644
index 000000000000..044af2b2074d
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/helpers.ts
@@ -0,0 +1,6 @@
+declare namespace jasmine {
+  export interface DoneFn extends Function {
+    (): void;
+    fail: (message: Error | string) => void;
+  }
+}
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/index.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/index.ts
new file mode 100644
index 000000000000..487536920c3a
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/index.ts
@@ -0,0 +1,7 @@
+// Imports
+import {runTests} from '../lib/common/run-tests';
+
+// Run
+const specFiles = [`${__dirname}/**/*.spec.js`];
+const helpers = [`${__dirname}/helpers.js`];
+runTests(specFiles, helpers);
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
new file mode 100644
index 000000000000..469beb73a052
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts
@@ -0,0 +1,687 @@
+// Imports
+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 {ChangedPrVisibilityEvent, CreatedBuildEvent} from '../../lib/upload-server/build-events';
+import {UploadError} from '../../lib/upload-server/upload-error';
+import {expectToBeUploadError} from './helpers';
+
+// Tests
+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 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));
+
+
+  describe('constructor()', () => {
+
+    it('should throw if \'buildsDir\' is missing or empty', () => {
+      expect(() => new BuildCreator('')).toThrowError('Missing or empty required parameter \'buildsDir\'!');
+    });
+
+
+    it('should extend EventEmitter', () => {
+      expect(bc).toEqual(jasmine.any(BuildCreator));
+      expect(bc).toEqual(jasmine.any(EventEmitter));
+
+      expect(Object.getPrototypeOf(bc)).toBe(BuildCreator.prototype);
+    });
+
+  });
+
+
+  describe('create()', () => {
+    let bcEmitSpy: jasmine.Spy;
+    let bcExistsSpy: jasmine.Spy;
+    let bcExtractArchiveSpy: jasmine.Spy;
+    let bcUpdatePrVisibilitySpy: jasmine.Spy;
+    let shellMkdirSpy: jasmine.Spy;
+    let shellRmSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      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 => {
+            const publicOrNot = isPublic ? 'public' : 'non-public';
+            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} 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 => {
+            const publicOrNot = isPublic ? 'public' : 'non-public';
+            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} 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 => {
+          // tslint:disable-next-line: no-string-throw
+          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.updatePrVisibility(pr, true);
+      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));
+    });
+
+
+    [true, false].forEach(makePublic => {
+      const oldPrDir = makePublic ? hiddenPrDir : publicPrDir;
+      const newPrDir = makePublic ? publicPrDir : hiddenPrDir;
+
+
+      it('should rename the directory', done => {
+        bc.updatePrVisibility(pr, makePublic).
+          then(() => expect(shellMvSpy).toHaveBeenCalledWith(oldPrDir, newPrDir)).
+          then(done);
+      });
+
+
+      describe('when the visibility is updated', () => {
+
+        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 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 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);
+      });
+
+
+      describe('on error', () => {
+
+        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 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 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 => {
+          // tslint:disable-next-line: no-string-throw
+          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();
+          });
+        });
+
+      });
+
+    });
+
+  });
+
+
+  // Protected methods
+
+  describe('exists()', () => {
+    let fsAccessSpy: jasmine.Spy;
+    let fsAccessCbs: ((v?: any) => void)[];
+
+    beforeEach(() => {
+      fsAccessCbs = [];
+      fsAccessSpy = spyOn(fs, 'access').and.callFake((_: string, cb: (v?: any) => void) => fsAccessCbs.push(cb));
+    });
+
+
+    it('should return a promise', () => {
+      expect((bc as any).exists('foo')).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should call \'fs.access()\' with the specified argument', () => {
+      (bc as any).exists('foo');
+      expect(fs.access).toHaveBeenCalledWith('foo', jasmine.any(Function));
+    });
+
+
+    it('should resolve with \'true\' if \'fs.access()\' succeeds', done => {
+      Promise.
+        all([(bc as any).exists('foo'), (bc as any).exists('bar')]).
+        then(results => expect(results).toEqual([true, true])).
+        then(done);
+
+      fsAccessCbs[0]();
+      fsAccessCbs[1](null);
+    });
+
+
+    it('should resolve with \'false\' if \'fs.access()\' errors', done => {
+      Promise.
+        all([(bc as any).exists('foo'), (bc as any).exists('bar')]).
+        then(results => expect(results).toEqual([false, false])).
+        then(done);
+
+      fsAccessCbs[0]('Error');
+      fsAccessCbs[1](new Error());
+    });
+
+  });
+
+
+  describe('extractArchive()', () => {
+    let consoleWarnSpy: jasmine.Spy;
+    let shellChmodSpy: jasmine.Spy;
+    let shellRmSpy: jasmine.Spy;
+    let cpExecSpy: jasmine.Spy;
+    let cpExecCbs: ((...args: any[]) => void)[];
+
+    beforeEach(() => {
+      cpExecCbs = [];
+
+      consoleWarnSpy = spyOn(console, 'warn');
+      shellChmodSpy = spyOn(shell, 'chmod');
+      shellRmSpy = spyOn(shell, 'rm');
+      cpExecSpy = spyOn(cp, 'exec').and.callFake((_: string, cb: (...args: any[]) => void) => cpExecCbs.push(cb));
+    });
+
+
+    it('should return a promise', () => {
+      expect((bc as any).extractArchive('foo', 'bar')).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should "gunzip" and "untar" the input file into the output directory', () => {
+      const cmd = 'tar --extract --gzip --directory "output/dir" --file "input/file"';
+
+      (bc as any).extractArchive('input/file', 'output/dir');
+      expect(cpExecSpy).toHaveBeenCalledWith(cmd, jasmine.any(Function));
+    });
+
+
+    it('should log (as a warning) any stderr output if extracting succeeded', done => {
+      (bc as any).extractArchive('foo', 'bar').
+        then(() => expect(consoleWarnSpy).toHaveBeenCalledWith('This is stderr')).
+        then(done);
+
+      cpExecCbs[0](null, 'This is stdout', 'This is stderr');
+    });
+
+
+    it('should make the build directory non-writable', done => {
+      (bc as any).extractArchive('foo', 'bar').
+        then(() => expect(shellChmodSpy).toHaveBeenCalledWith('-R', 'a-w', 'bar')).
+        then(done);
+
+      cpExecCbs[0]();
+    });
+
+
+    it('should delete the uploaded file on success', done => {
+      (bc as any).extractArchive('input/file', 'output/dir').
+        then(() => expect(shellRmSpy).toHaveBeenCalledWith('-f', 'input/file')).
+        then(done);
+
+      cpExecCbs[0]();
+    });
+
+
+    describe('on error', () => {
+
+      it('should abort and skip further operations if it fails to extract the archive', done => {
+        (bc as any).extractArchive('foo', 'bar').catch((err: any) => {
+          expect(shellChmodSpy).not.toHaveBeenCalled();
+          expect(shellRmSpy).not.toHaveBeenCalled();
+          expect(err).toBe('Test');
+          done();
+        });
+
+        cpExecCbs[0]('Test');
+      });
+
+
+      it('should abort and skip further operations if it fails to make non-writable', done => {
+        (bc as any).extractArchive('foo', 'bar').catch((err: any) => {
+          expect(shellChmodSpy).toHaveBeenCalled();
+          expect(shellRmSpy).not.toHaveBeenCalled();
+          expect(err).toBe('Test');
+          done();
+        });
+
+        shellChmodSpy.and.callFake(() => {
+          // tslint:disable-next-line: no-string-throw
+          throw 'Test';
+        });
+
+        cpExecCbs[0]();
+      });
+
+
+      it('should abort and reject if it fails to remove the uploaded file', done => {
+        (bc as any).extractArchive('foo', 'bar').catch((err: any) => {
+          expect(shellChmodSpy).toHaveBeenCalled();
+          expect(shellRmSpy).toHaveBeenCalled();
+          expect(err).toBe('Test');
+          done();
+        });
+
+        shellRmSpy.and.callFake(() => {
+          // tslint:disable-next-line: no-string-throw
+          throw 'Test';
+        });
+
+        cpExecCbs[0]();
+      });
+
+    });
+
+  });
+
+
+  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
new file mode 100644
index 000000000000..73214f3d9ecd
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-events.spec.ts
@@ -0,0 +1,58 @@
+// Imports
+import {ChangedPrVisibilityEvent, CreatedBuildEvent} from '../../lib/upload-server/build-events';
+
+// Tests
+describe('ChangedPrVisibilityEvent', () => {
+  let evt: ChangedPrVisibilityEvent;
+
+  beforeEach(() => evt = new ChangedPrVisibilityEvent(42, ['foo', 'bar'], true));
+
+
+  it('should have a static \'type\' property', () => {
+    expect(ChangedPrVisibilityEvent.type).toBe('pr.changedVisibility');
+  });
+
+
+  it('should have a \'pr\' property', () => {
+    expect(evt.pr).toBe(42);
+  });
+
+
+  it('should have a \'shas\' property', () => {
+    expect(evt.shas).toEqual(['foo', 'bar']);
+  });
+
+
+  it('should have an \'isPublic\' property', () => {
+    expect(evt.isPublic).toBe(true);
+  });
+
+});
+
+
+describe('CreatedBuildEvent', () => {
+  let evt: CreatedBuildEvent;
+
+  beforeEach(() => evt = new CreatedBuildEvent(42, 'bar', true));
+
+
+  it('should have a static \'type\' property', () => {
+    expect(CreatedBuildEvent.type).toBe('build.created');
+  });
+
+
+  it('should have a \'pr\' property', () => {
+    expect(evt.pr).toBe(42);
+  });
+
+
+  it('should have a \'sha\' property', () => {
+    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
new file mode 100644
index 000000000000..aa8f501aa3a3
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-verifier.spec.ts
@@ -0,0 +1,303 @@
+// Imports
+import * as jwt from 'jsonwebtoken';
+import {GithubPullRequests, PullRequest} from '../../lib/common/github-pull-requests';
+import {GithubTeams} from '../../lib/common/github-teams';
+import {BUILD_VERIFICATION_STATUS, BuildVerifier} from '../../lib/upload-server/build-verifier';
+import {expectToBeUploadError} from './helpers';
+
+// Tests
+describe('BuildVerifier', () => {
+  const defaultConfig = {
+    allowedTeamSlugs: ['team1', 'team2'],
+    githubToken: 'githubToken',
+    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} as typeof defaultConfig;
+    return new BuildVerifier(cfg.secret, cfg.githubToken, cfg.repoSlug, cfg.organization,
+                             cfg.allowedTeamSlugs, cfg.trustedPrLabel);
+  };
+
+  beforeEach(() => bv = createBuildVerifier());
+
+
+  describe('constructor()', () => {
+
+    ['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', () => {
+      expect(() => createBuildVerifier({allowedTeamSlugs: []})).
+        toThrowError('Missing or empty required parameter \'allowedTeamSlugs\'!');
+    });
+
+  });
+
+
+  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 = {
+      'exp': Math.floor(Date.now() / 1000) + 30,
+      'iat': Math.floor(Date.now() / 1000) - 30,
+      'iss': 'Travis CI, GmbH',
+      'pull-request': pr,
+      'slug': defaultConfig.repoSlug,
+    };
+    let bvGetPrIsTrusted: jasmine.Spy;
+
+    // Heleprs
+    const createAuthHeader = (partialJwt: Partial<typeof defaultJwt> = {}, secret: string = defaultConfig.secret) =>
+      `Token ${jwt.sign({...defaultJwt, ...partialJwt}, secret)}`;
+
+    beforeEach(() => {
+      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 `bvGetPrIsTrusted()`.
+
+      expect(promise).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should fail if the authorization header is invalid', done => {
+      bv.verify(pr, 'foo').catch(err => {
+        const errorMessage = 'Error while verifying upload for PR 9: jwt malformed';
+
+        expectToBeUploadError(err, 403, errorMessage);
+        done();
+      });
+    });
+
+
+    it('should fail if the secret is invalid', done => {
+      bv.verify(pr, createAuthHeader({}, 'foo')).catch(err => {
+        const errorMessage = 'Error while verifying upload for PR 9: invalid signature';
+
+        expectToBeUploadError(err, 403, errorMessage);
+        done();
+      });
+    });
+
+
+    it('should fail if the issuer is invalid', done => {
+      bv.verify(pr, createAuthHeader({iss: 'not valid'})).catch(err => {
+        const errorMessage = 'Error while verifying upload for PR 9: ' +
+                             `jwt issuer invalid. expected: ${defaultJwt.iss}`;
+
+        expectToBeUploadError(err, 403, errorMessage);
+        done();
+      });
+    });
+
+
+    it('should fail if the token has expired', done => {
+      bv.verify(pr, createAuthHeader({exp: 0})).catch(err => {
+        const errorMessage = 'Error while verifying upload for PR 9: jwt expired';
+
+        expectToBeUploadError(err, 403, errorMessage);
+        done();
+      });
+    });
+
+
+    it('should fail if the repo slug does not match', done => {
+      bv.verify(pr, createAuthHeader({slug: 'foo/bar'})).catch(err => {
+        const errorMessage = 'Error while verifying upload for PR 9: ' +
+                             `jwt slug invalid. expected: ${defaultConfig.repoSlug}`;
+
+        expectToBeUploadError(err, 403, errorMessage);
+        done();
+      });
+    });
+
+
+    it('should fail if the PR does not match', done => {
+      bv.verify(pr, createAuthHeader({'pull-request': 1337})).catch(err => {
+        const errorMessage = 'Error while verifying upload for PR 9: ' +
+                             `jwt pull-request invalid. expected: ${pr}`;
+
+        expectToBeUploadError(err, 403, errorMessage);
+        done();
+      });
+    });
+
+
+    it('should not fail if the token is valid', done => {
+      bv.verify(pr, createAuthHeader()).then(done);
+    });
+
+
+    it('should not fail even if the token has been issued in the future', done => {
+      const in30s = Math.floor(Date.now() / 1000) + 30;
+      bv.verify(pr, createAuthHeader({iat: in30s})).then(done);
+    });
+
+
+    it('should call \'getPrIsTrusted()\' if the token is valid', done => {
+      bv.verify(pr, createAuthHeader()).then(() => {
+        expect(bvGetPrIsTrusted).toHaveBeenCalledWith(pr);
+        done();
+      });
+    });
+
+
+    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();
+      });
+    });
+
+
+    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 resolve to `verifiedAndTrusted` if \'getPrIsTrusted()\' returns true', done => {
+      bv.verify(pr, createAuthHeader()).then(value => {
+        expect(value).toBe(BUILD_VERIFICATION_STATUS.verifiedAndTrusted);
+        done();
+      });
+    });
+
+  });
+
+});
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/helpers.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/helpers.ts
new file mode 100644
index 000000000000..9213d7c1a634
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/helpers.ts
@@ -0,0 +1,11 @@
+import {UploadError} from '../../lib/upload-server/upload-error';
+
+export const expectToBeUploadError = (actual: UploadError, status?: number, message?: string) => {
+  expect(actual).toEqual(jasmine.any(UploadError));
+  if (status != null) {
+    expect(actual.status).toBe(status);
+  }
+  if (message != null) {
+    expect(actual.message).toBe(message);
+  }
+};
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/upload-error.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/upload-error.spec.ts
new file mode 100644
index 000000000000..9a209259320c
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/upload-error.spec.ts
@@ -0,0 +1,39 @@
+// Imports
+import {UploadError} from '../../lib/upload-server/upload-error';
+
+// Tests
+describe('UploadError', () => {
+  let err: UploadError;
+
+  beforeEach(() => err = new UploadError(999, 'message'));
+
+
+  it('should extend Error', () => {
+    expect(err).toEqual(jasmine.any(UploadError));
+    expect(err).toEqual(jasmine.any(Error));
+
+    expect(Object.getPrototypeOf(err)).toBe(UploadError.prototype);
+  });
+
+
+  it('should have a \'status\' property', () => {
+    expect(err.status).toBe(999);
+  });
+
+
+  it('should have a \'message\' property', () => {
+    expect(err.message).toBe('message');
+  });
+
+
+  it('should have a 500 \'status\' by default', () => {
+    expect(new UploadError().status).toBe(500);
+  });
+
+
+  it('should have an empty \'message\' by default', () => {
+    expect(new UploadError().message).toBe('');
+    expect(new UploadError(999).message).toBe('');
+  });
+
+});
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
new file mode 100644
index 000000000000..d0db5552e48d
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/upload-server-factory.spec.ts
@@ -0,0 +1,603 @@
+// Imports
+import * as express from 'express';
+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 {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
+describe('uploadServerFactory', () => {
+  const defaultConfig = {
+    buildsDir: 'builds/dir',
+    domainName: 'domain.name',
+    githubOrganization: 'organization',
+    githubTeamSlugs: ['team1', 'team2'],
+    githubToken: '12345',
+    repoSlug: 'repo/slug',
+    secret: 'secret',
+    trustedPrLabel: 'trusted: pr-label',
+  };
+
+  // Helpers
+  const createUploadServer = (partialConfig: Partial<typeof defaultConfig> = {}) =>
+    usf.create({...defaultConfig, ...partialConfig} as typeof defaultConfig);
+
+
+  describe('create()', () => {
+    let usfCreateMiddlewareSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      usfCreateMiddlewareSpy = spyOn(usf as any, 'createMiddleware').and.callThrough();
+    });
+
+
+    it('should throw if \'buildsDir\' is missing or empty', () => {
+      expect(() => createUploadServer({buildsDir: ''})).
+        toThrowError('Missing or empty required parameter \'buildsDir\'!');
+    });
+
+
+    it('should throw if \'domainName\' is missing or empty', () => {
+      expect(() => createUploadServer({domainName: ''})).
+        toThrowError('Missing or empty required parameter \'domainName\'!');
+    });
+
+
+    it('should throw if \'githubToken\' is missing or empty', () => {
+      expect(() => createUploadServer({githubToken: ''})).
+        toThrowError('Missing or empty required parameter \'githubToken\'!');
+    });
+
+
+    it('should throw if \'githubOrganization\' is missing or empty', () => {
+      expect(() => createUploadServer({githubOrganization: ''})).
+        toThrowError('Missing or empty required parameter \'organization\'!');
+    });
+
+
+    it('should throw if \'githubTeamSlugs\' is missing or empty', () => {
+      expect(() => createUploadServer({githubTeamSlugs: []})).
+        toThrowError('Missing or empty required parameter \'allowedTeamSlugs\'!');
+    });
+
+
+    it('should throw if \'repoSlug\' is missing or empty', () => {
+      expect(() => createUploadServer({repoSlug: ''})).
+        toThrowError('Missing or empty required parameter \'repoSlug\'!');
+    });
+
+
+    it('should throw if \'secret\' is missing or empty', () => {
+      expect(() => createUploadServer({secret: ''})).
+        toThrowError('Missing or empty required parameter \'secret\'!');
+    });
+
+
+    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();
+
+      expect(server).toBe(httpCreateServerSpy.calls.mostRecent().returnValue);
+    });
+
+
+    it('should create and use an appropriate BuildCreator', () => {
+      const usfCreateBuildCreatorSpy = spyOn(usf as any, 'createBuildCreator').and.callThrough();
+
+      createUploadServer();
+      const buildCreator: BuildCreator = usfCreateBuildCreatorSpy.calls.mostRecent().returnValue;
+
+      expect(usfCreateMiddlewareSpy).toHaveBeenCalledWith(jasmine.any(BuildVerifier), buildCreator);
+      expect(usfCreateBuildCreatorSpy).toHaveBeenCalledWith('builds/dir', '12345', 'repo/slug', 'domain.name');
+    });
+
+
+    it('should create and use an appropriate middleware', () => {
+      const httpCreateServerSpy = spyOn(http, 'createServer').and.callThrough();
+
+      createUploadServer();
+      const middleware: express.Express = usfCreateMiddlewareSpy.calls.mostRecent().returnValue;
+      const buildVerifier = jasmine.any(BuildVerifier);
+      const buildCreator = jasmine.any(BuildCreator);
+
+      expect(httpCreateServerSpy).toHaveBeenCalledWith(middleware);
+      expect(usfCreateMiddlewareSpy).toHaveBeenCalledWith(buildVerifier, buildCreator);
+    });
+
+
+    it('should log the server address info on \'listening\'', () => {
+      const consoleInfoSpy = spyOn(console, 'info');
+      const server = createUploadServer();
+      server.address = () => ({address: 'foo', family: '', port: 1337});
+
+      expect(consoleInfoSpy).not.toHaveBeenCalled();
+
+      server.emit('listening');
+      expect(consoleInfoSpy).toHaveBeenCalledWith('Up and running (and listening on foo:1337)...');
+    });
+
+  });
+
+
+  // Protected methods
+
+  describe('createBuildCreator()', () => {
+    let buildCreator: BuildCreator;
+
+    beforeEach(() => {
+      buildCreator = (usf as any).createBuildCreator(
+        defaultConfig.buildsDir,
+        defaultConfig.githubToken,
+        defaultConfig.repoSlug,
+        defaultConfig.domainName,
+      );
+    });
+
+
+    it('should pass the \'buildsDir\' to the BuildCreator', () => {
+      expect((buildCreator as any).buildsDir).toBe('builds/dir');
+    });
+
+
+    describe('on \'build.created\'', () => {
+      let prsAddCommentSpy: jasmine.Spy;
+
+      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();
+      });
+
+    });
+
+
+    it('should pass the correct \'githubToken\' and \'repoSlug\' to GithubPullRequests', () => {
+      const prsAddCommentSpy = spyOn(GithubPullRequests.prototype, 'addComment');
+
+      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.repoSlug).toBe('repo/slug');
+      expect(prs.requestHeaders.Authorization).toContain('12345');
+    });
+
+  });
+
+
+  describe('createMiddleware()', () => {
+    let buildVerifier: BuildVerifier;
+    let buildCreator: BuildCreator;
+    let agent: supertest.SuperTest<supertest.Test>;
+
+    // Helpers
+    const promisifyRequest = (req: supertest.Request) =>
+      new Promise((resolve, reject) => req.end(err => err ? reject(err) : resolve()));
+    const verifyRequests = (reqs: supertest.Request[], done: jasmine.DoneFn) =>
+      Promise.all(reqs.map(promisifyRequest)).then(done, done.fail);
+
+    beforeEach(() => {
+      buildVerifier = new BuildVerifier(
+        defaultConfig.secret,
+        defaultConfig.githubToken,
+        defaultConfig.repoSlug,
+        defaultConfig.githubOrganization,
+        defaultConfig.githubTeamSlugs,
+        defaultConfig.trustedPrLabel,
+      );
+      buildCreator = new BuildCreator(defaultConfig.buildsDir);
+      agent = supertest.agent((usf as any).createMiddleware(buildVerifier, buildCreator));
+
+      spyOn(console, 'error');
+    });
+
+
+    describe('GET /create-build/<pr>/<sha>', () => {
+      const pr = '9';
+      const sha = '9'.repeat(40);
+      let buildVerifierVerifySpy: jasmine.Spy;
+      let buildCreatorCreateSpy: jasmine.Spy;
+
+      beforeEach(() => {
+        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 404 for non-GET requests', done => {
+        verifyRequests([
+          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);
+      });
+
+
+      it('should respond with 401 for requests without an \'AUTHORIZATION\' header', done => {
+        const url = `/create-build/${pr}/${sha}`;
+        const responseBody = `Missing or empty 'AUTHORIZATION' header in request: GET ${url}`;
+
+        verifyRequests([
+          agent.get(url).expect(401, responseBody),
+          agent.get(url).set('AUTHORIZATION', '').expect(401, responseBody),
+        ], done);
+      });
+
+
+      it('should respond with 400 for requests without an \'X-FILE\' header', done => {
+        const url = `/create-build/${pr}/${sha}`;
+        const responseBody = `Missing or empty 'X-FILE' header in request: GET ${url}`;
+
+        const request1 = agent.get(url).set('AUTHORIZATION', 'foo');
+        const request2 = agent.get(url).set('AUTHORIZATION', 'foo').set('X-FILE', '');
+
+        verifyRequests([
+          request1.expect(400, responseBody),
+          request2.expect(400, responseBody),
+        ], done);
+      });
+
+
+      it('should respond with 404 for unknown paths', done => {
+        verifyRequests([
+          agent.get(`/foo/create-build/${pr}/${sha}`).expect(404),
+          agent.get(`/foo-create-build/${pr}/${sha}`).expect(404),
+          agent.get(`/fooncreate-build/${pr}/${sha}`).expect(404),
+          agent.get(`/create-build/foo/${pr}/${sha}`).expect(404),
+          agent.get(`/create-build-foo/${pr}/${sha}`).expect(404),
+          agent.get(`/create-buildnfoo/${pr}/${sha}`).expect(404),
+          agent.get(`/create-build/pr${pr}/${sha}`).expect(404),
+          agent.get(`/create-build/${pr}/${sha}42`).expect(404),
+        ], done);
+      });
+
+
+      it('should call \'BuildVerifier#verify()\' with the correct arguments', done => {
+        const req = agent.
+          get(`/create-build/${pr}/${sha}`).
+          set('AUTHORIZATION', 'foo').
+          set('X-FILE', 'bar');
+
+        promisifyRequest(req).
+          then(() => expect(buildVerifierVerifySpy).toHaveBeenCalledWith(9, 'foo')).
+          then(done, done.fail);
+      });
+
+
+      it('should propagate errors from BuildVerifier', done => {
+        buildVerifierVerifySpy.and.callFake(() => Promise.reject('Test'));
+
+        const req = agent.
+          get(`/create-build/${pr}/${sha}`).
+          set('AUTHORIZATION', 'foo').
+          set('X-FILE', 'bar').
+          expect(500, 'Test');
+
+        promisifyRequest(req).
+          then(() => {
+            expect(buildVerifierVerifySpy).toHaveBeenCalledWith(9, 'foo');
+            expect(buildCreatorCreateSpy).not.toHaveBeenCalled();
+          }).
+          then(done, done.fail);
+      });
+
+
+      it('should call \'BuildCreator#create()\' with the correct arguments', done => {
+        buildVerifierVerifySpy.and.returnValues(
+            Promise.resolve(BUILD_VERIFICATION_STATUS.verifiedAndTrusted),
+            Promise.resolve(BUILD_VERIFICATION_STATUS.verifiedNotTrusted));
+
+        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);
+      });
+
+
+      it('should propagate errors from BuildCreator', done => {
+        buildCreatorCreateSpy.and.callFake(() => Promise.reject('Test'));
+        const req = agent.
+          get(`/create-build/${pr}/${sha}`).
+          set('AUTHORIZATION', 'foo').
+          set('X-FILE', 'bar').
+          expect(500, 'Test');
+
+        verifyRequests([req], done);
+      });
+
+
+      it('should respond with 201 on successful upload (for public builds)', done => {
+        const req = agent.
+          get(`/create-build/${pr}/${sha}`).
+          set('AUTHORIZATION', 'foo').
+          set('X-FILE', 'bar').
+          expect(201, http.STATUS_CODES[201]);
+
+        verifyRequests([req], done);
+      });
+
+
+      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);
+      });
+
+
+      it('should accept SHAs with leading zeros (but not trim the zeros)', done => {
+        const sha40 = '0'.repeat(40);
+        const sha41 = `0${sha40}`;
+
+        const request40 = agent.get(`/create-build/${pr}/${sha40}`).set('AUTHORIZATION', 'foo').set('X-FILE', 'bar');
+        const request41 = agent.get(`/create-build/${pr}/${sha41}`).set('AUTHORIZATION', 'baz').set('X-FILE', 'qux');
+
+        Promise.all([
+          promisifyRequest(request40.expect(201)),
+          promisifyRequest(request41.expect(404)),
+        ]).then(done, done.fail);
+      });
+
+    });
+
+
+    describe('GET /health-check', () => {
+
+      it('should respond with 200', done => {
+        verifyRequests([
+          agent.get('/health-check').expect(200),
+          agent.get('/health-check/').expect(200),
+         ], done);
+      });
+
+
+      it('should respond with 404 for non-GET requests', done => {
+        verifyRequests([
+          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);
+      });
+
+
+      it('should respond with 404 if the path does not match exactly', done => {
+        verifyRequests([
+          agent.get('/health-check/foo').expect(404),
+          agent.get('/health-check-foo').expect(404),
+          agent.get('/health-checknfoo').expect(404),
+          agent.get('/foo/health-check').expect(404),
+          agent.get('/foo-health-check').expect(404),
+          agent.get('/foonhealth-check').expect(404),
+        ], done);
+      });
+
+    });
+
+
+    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);
+        });
+
+      });
+
+    });
+
+
+    describe('ALL *', () => {
+
+      it('should respond with 404', done => {
+        const responseFor = (method: string) => `Unknown resource in request: ${method.toUpperCase()} /some/url`;
+
+        verifyRequests([
+          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/tsconfig.json b/aio/aio-builds-setup/dockerbuild/scripts-js/tsconfig.json
new file mode 100644
index 000000000000..881e631539ff
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/tsconfig.json
@@ -0,0 +1,69 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "es5",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
+    "module": "commonjs",                        /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "lib": [
+      "es2015",
+      "es2016.array.include"
+    ],                                        /* Specify library files to be included in the compilation:  */
+    // "allowJs": true,                          /* Allow javascript files to be compiled. */
+    // "checkJs": true,                          /* Report errors in .js files. */
+    // "jsx": "preserve",                        /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                      /* Generates corresponding '.d.ts' file. */
+    // "sourceMap": true,                        /* Generates corresponding '.map' file. */
+    // "outFile": "./",                          /* Concatenate and emit output to single file. */
+    "outDir": "dist",                         /* Redirect output structure to the directory. */
+    // "rootDir": "./",                          /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "removeComments": true,                   /* Do not emit comments to output. */
+    // "noEmit": true,                           /* Do not emit outputs. */
+    "importHelpers": true,                    /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,               /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                              /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                    /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                 /* Enable strict null checks. */
+    // "noImplicitThis": true,                   /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                     /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    "noUnusedLocals": true,                   /* Report errors on unused locals. */
+    "noUnusedParameters": true,               /* Report errors on unused parameters. */
+    "noImplicitReturns": true,                /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,       /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    // "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                              /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                           /* List of root folders whose combined content represents the structure of the project at runtime. */
+    "typeRoots": [
+      "node_modules/@types"
+    ],                                        /* List of folders to include type definitions from. */
+    // "types": [],                              /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    // "preserveSymlinks": true,                 /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "./",                       /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                          /* Specify the location where debugger should locate map files instead of generated locations. */
+    "inlineSourceMap": true,                  /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                    /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,           /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,            /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Other */
+    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
+    "newLine": "LF",                          /* Use the specified end of line sequence to be used when emitting files: "crlf" (windows) or "lf" (unix). */
+    "pretty": true,                           /* Stylize errors and messages using color and context. */
+    "skipLibCheck": true                      /* Skip type checking of all declaration files (*.d.ts). */
+  },
+  "include": [
+    "lib/**/*",
+    "test/**/*"
+  ]
+}
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json b/aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json
new file mode 100644
index 000000000000..76c3758506ef
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json
@@ -0,0 +1,24 @@
+{
+  "defaultSeverity": "error",
+  "extends": [
+    "tslint:recommended"
+  ],
+  "jsRules": {},
+  "rules": {
+    "array-type": [true, "array"],
+    "arrow-parens": [true, "ban-single-arg-parens"],
+    "interface-name": [true, "never-prefix"],
+    "max-classes-per-file": [true, 4],
+    "no-consecutive-blank-lines": [true, 2],
+    "no-console": [false],
+    "no-focused-test": true,
+    "no-namespace": [true, "allow-declarations"],
+    "no-skipped-test": true,
+    "no-string-literal": false,
+    "quotemark": [true, "single"],
+    "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore"]
+  },
+  "rulesDirectory": [
+    "node_modules/tslint-jasmine-noSkipOrFocus"
+  ]
+}
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock b/aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock
new file mode 100644
index 000000000000..73ef31075110
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock
@@ -0,0 +1,2056 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/body-parser@^1.16.5":
+  version "1.16.5"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.16.5.tgz#d2b7daefab84e0afa9d3fae0935bc7355b6320af"
+  dependencies:
+    "@types/express" "*"
+    "@types/node" "*"
+
+"@types/express-serve-static-core@*":
+  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@*":
+  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/express@^4.0.37":
+  version "4.0.37"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.0.37.tgz#625ac3765169676e01897ca47011c26375784971"
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/serve-static" "*"
+
+"@types/glob@*":
+  version "5.0.32"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-5.0.32.tgz#aec5cfe987c72f099fdb1184452986aa506d5e8f"
+  dependencies:
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
+"@types/jasmine@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.6.0.tgz#997b41a27752b4850af2683bc4a8d8222c25bd02"
+
+"@types/jsonwebtoken@^7.2.3":
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/@types/jsonwebtoken/-/jsonwebtoken-7.2.3.tgz#483c8f39945e1e6d308dcc51fd4aeca5208d4dca"
+  dependencies:
+    "@types/node" "*"
+
+"@types/mime@*":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.0.tgz#d24ffac7d1006fe68517202fb2aeba3dbe48284b"
+
+"@types/minimatch@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.1.tgz#b683eb60be358304ef146f5775db4c0e3696a550"
+
+"@types/node@*":
+  version "7.0.31"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.31.tgz#80ea4d175599b2a00149c29a10a4eb2dff592e86"
+
+"@types/node@^8.0.30":
+  version "8.0.30"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.30.tgz#aa3c42946fc6357737eb215349fe728b38679d05"
+
+"@types/serve-static@*":
+  version "1.7.31"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.7.31.tgz#15456de8d98d6b4cff31be6c6af7492ae63f521a"
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/mime" "*"
+
+"@types/shelljs@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.8.0.tgz#0caa56b68baae4f68f44e0dd666ab30b098e3632"
+  dependencies:
+    "@types/glob" "*"
+    "@types/node" "*"
+
+"@types/superagent@*":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@types/superagent/-/superagent-3.5.0.tgz#53935c564616998b24846c0e60c792c0fd827334"
+  dependencies:
+    "@types/node" "*"
+
+"@types/supertest@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/supertest/-/supertest-2.0.3.tgz#edcae925c427dec6a7abe2697ee4b06fb29664c1"
+  dependencies:
+    "@types/superagent" "*"
+
+abbrev@1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
+
+accepts@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+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@^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-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"
+
+anymatch@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
+  dependencies:
+    arrify "^1.0.0"
+    micromatch "^2.1.5"
+
+aproba@^1.0.3:
+  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.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.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  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"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+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"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+babel-code-frame@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+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"
+  resolved "https://registry.yarnpkg.com/base64url/-/base64url-2.0.0.tgz#eac16e03ea1438eff9423d69baa36262ed1f70bb"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+binary-extensions@^1.0.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.8.0.tgz#48ec8d16df4377eae5fa5884682480af4d95c774"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+body-parser@^1.18.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.2.tgz#87678a19d84b47d859b83199bd59bce222b10454"
+  dependencies:
+    bytes "3.0.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.1"
+    http-errors "~1.6.2"
+    iconv-lite "0.4.19"
+    on-finished "~2.3.0"
+    qs "6.5.1"
+    raw-body "2.3.2"
+    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@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.1.0.tgz#b1b69dd522305e807a99deee777dbd6e5167b102"
+  dependencies:
+    ansi-align "^2.0.0"
+    camelcase "^4.0.0"
+    chalk "^1.1.1"
+    cli-boxes "^1.0.0"
+    string-width "^2.0.0"
+    term-size "^0.1.0"
+    widest-line "^1.0.0"
+
+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 "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+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"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+
+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.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"
+  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.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chokidar@^1.7.0:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+cli-boxes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+colors@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+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.11.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
+
+component-emitter@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+concurrently@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.5.0.tgz#8cf1b7707a6916a78a4ff5b77bb04dec54b379b2"
+  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@^3.0.0:
+  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"
+    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"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+content-disposition@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+
+content-type@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+cookiejar@^2.0.6:
+  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.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"
+
+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"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-fns@^1.23.0:
+  version "1.28.5"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.28.5.tgz#257cfc45d322df45ef5658665967ee841cd73faf"
+
+debug@2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  dependencies:
+    ms "2.0.0"
+
+debug@2.6.9, debug@^2.6.8:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@^2.2.0:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
+  dependencies:
+    ms "2.0.0"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@1.1.1, depd@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+diff@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.1.tgz#aa8567a6eed03c531fc89d3f711cd0e5259dec75"
+
+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"
+
+duplexer3@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
+
+duplexer@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ecdsa-sig-formatter@1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.9.tgz#4bc926274ec3b5abb5016e7e1d60921ac262b2a1"
+  dependencies:
+    base64url "^2.0.0"
+    safe-buffer "^5.0.1"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+es6-promise@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
+
+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.0, escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+etag@~1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
+
+event-stream@~3.3.0:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
+  dependencies:
+    duplexer "~0.1.1"
+    from "~0"
+    map-stream "~0.1.0"
+    pause-stream "0.0.11"
+    split "0.3"
+    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@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+express@^4.15.4:
+  version "4.15.4"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.15.4.tgz#032e2253489cf8fce02666beca3d11ed7a2daed1"
+  dependencies:
+    accepts "~1.3.3"
+    array-flatten "1.1.1"
+    content-disposition "0.5.2"
+    content-type "~1.0.2"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "2.6.8"
+    depd "~1.1.1"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.0"
+    finalhandler "~1.0.4"
+    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.5"
+    qs "6.5.0"
+    range-parser "~1.2.0"
+    send "0.15.4"
+    serve-static "1.12.4"
+    setprototypeof "1.0.3"
+    statuses "~1.3.1"
+    type-is "~1.6.15"
+    utils-merge "1.0.0"
+    vary "~1.1.1"
+
+extend@^3.0.0, extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@~1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.6.tgz#007aea33d1a4d3e42017f624848ad58d212f814f"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
+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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    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.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"
+    mime-types "^2.1.12"
+
+formidable@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/formidable/-/formidable-1.1.1.tgz#96b8886f7c3c3508b932d6bd70c4d3a88f35f1a9"
+
+forwarded@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
+
+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.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.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.36"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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.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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.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.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.0, glob@^7.0.5, glob@^7.0.6, 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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+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.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"
+    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"
+
+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@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    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"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+http-errors@1.6.2, http-errors@~1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+iconv-lite@0.4.19:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
+ignore-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+
+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"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+interpret@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
+
+ipaddr.js@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.4.0.tgz#296aca878a821816e5b85d0a285a99bcff4582f0"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+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.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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+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.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"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-redirect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+
+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.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+isarray@1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+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"
+  dependencies:
+    isarray "1.0.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jasmine-core@~2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
+
+jasmine@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.8.0.tgz#6b089c0a11576b1f16df11b80146d91d4e8b8a3e"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.8.0"
+
+js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+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"
+
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+
+jsonwebtoken@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.0.1.tgz#50daef8d0a8c7de2cd06bc1013b75b04ccf3f0cf"
+  dependencies:
+    jws "^3.1.4"
+    lodash.includes "^4.3.0"
+    lodash.isboolean "^3.0.3"
+    lodash.isinteger "^4.0.4"
+    lodash.isnumber "^3.0.3"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.once "^4.0.0"
+    ms "^2.0.0"
+    xtend "^4.0.1"
+
+jsprim@^1.2.2:
+  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"
+
+jwa@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.1.5.tgz#a0552ce0220742cd52e153774a32905c30e756e5"
+  dependencies:
+    base64url "2.0.0"
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.9"
+    safe-buffer "^5.0.1"
+
+jws@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.1.4.tgz#f9e8b9338e8a847277d6444b1464f61880e050a2"
+  dependencies:
+    base64url "^2.0.0"
+    jwa "^1.1.4"
+    safe-buffer "^5.0.1"
+
+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"
+
+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@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
+  dependencies:
+    package-json "^4.0.0"
+
+lodash._baseassign@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
+  dependencies:
+    lodash._basecopy "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash._basecopy@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+
+lodash._bindcallback@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
+
+lodash._createassigner@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
+  dependencies:
+    lodash._bindcallback "^3.0.0"
+    lodash._isiterateecall "^3.0.0"
+    lodash.restparam "^3.0.0"
+
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+
+lodash._isiterateecall@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
+
+lodash.assign@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-3.2.0.tgz#3ce9f0234b4b2223e296b8fa0ac1fee8ebca64fa"
+  dependencies:
+    lodash._baseassign "^3.0.0"
+    lodash._createassigner "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash.defaults@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-3.1.2.tgz#c7308b18dbf8bc9372d701a73493c61192bd2e2c"
+  dependencies:
+    lodash.assign "^3.0.0"
+    lodash.restparam "^3.0.0"
+
+lodash.includes@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
+
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+
+lodash.isboolean@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
+
+lodash.isinteger@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
+
+lodash.isnumber@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc"
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
+
+lodash.keys@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+
+lodash.restparam@^3.0.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
+
+lodash@^4.5.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+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"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+methods@^1.1.1, methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.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.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.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@^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.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+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.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0, ms@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nan@^2.3.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+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 "^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.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.12.1.tgz#996a56dc49d9f16bbf1b78a4de08f13634b3878d"
+  dependencies:
+    chokidar "^1.7.0"
+    debug "^2.6.8"
+    es6-promise "^3.3.1"
+    ignore-by-default "^1.0.1"
+    lodash.defaults "^3.1.2"
+    minimatch "^3.0.4"
+    ps-tree "^1.1.0"
+    touch "^3.1.0"
+    undefsafe "0.0.3"
+    update-notifier "^2.2.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"
+
+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"
+
+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.3"
+    set-blocking "~2.0.0"
+
+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"
+
+oauth-sign@~0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+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"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+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.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+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 "^6.7.1"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parseurl@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
+
+parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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"
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
+pause-stream@0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
+  dependencies:
+    through "~2.3"
+
+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.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+prepend-http@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+proxy-addr@~1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918"
+  dependencies:
+    forwarded "~0.1.0"
+    ipaddr.js "1.4.0"
+
+ps-tree@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.1.0.tgz#b421b24140d6203f1ed3c76996b4427b08e8c014"
+  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.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49"
+
+qs@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+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.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    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"
+
+raw-body@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89"
+  dependencies:
+    bytes "3.0.0"
+    http-errors "1.6.2"
+    iconv-lite "0.4.19"
+    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"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4:
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.11.tgz#0796b31f8d7688007ff0b93a8088d34aa17c0f72"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.0.1"
+    string_decoder "~1.0.0"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  dependencies:
+    resolve "^1.1.6"
+
+regex-cache@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+    is-primitive "^2.0.0"
+
+registry-auth-token@^3.0.1:
+  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.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
+  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"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+resolve@^1.1.6:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
+  dependencies:
+    path-parse "^1.0.5"
+
+resolve@^1.3.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
+  dependencies:
+    path-parse "^1.0.5"
+
+rimraf@2, 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"
+
+rx@2.3.24:
+  version "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"
+
+semver-diff@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
+  dependencies:
+    semver "^5.0.3"
+
+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.15.4:
+  version "0.15.4"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.4.tgz#985faa3e284b0273c793364a35c6737bd93905b9"
+  dependencies:
+    debug "2.6.8"
+    depd "~1.1.1"
+    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.2"
+    mime "1.3.4"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.1"
+
+serve-static@1.12.4:
+  version "1.12.4"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.4.tgz#9b6aa98eeb7253c4eedc4c1f6fdbca609901a961"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.15.4"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
+
+shelljs@^0.7.8:
+  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"
+    rechoir "^0.6.2"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+slide@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+spawn-command@^0.0.2-1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
+
+split@0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
+  dependencies:
+    through "2"
+
+sshpk@^1.7.0:
+  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"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+"statuses@>= 1.3.1 < 2", statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+stream-combiner@~0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.0.4.tgz#4d5e433c185261dde623ca3f44c586bcf5c4ad14"
+  dependencies:
+    duplexer "~0.1.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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string-width@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.0.0.tgz#635c5436cc72a6e0c387ceca278d4e2eec52687e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^3.0.0"
+
+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"
+
+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-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.2"
+  resolved "https://registry.yarnpkg.com/superagent/-/superagent-3.5.2.tgz#3361a3971567504c351063abeaae0faa23dbf3f8"
+  dependencies:
+    component-emitter "^1.2.0"
+    cookiejar "^2.0.6"
+    debug "^2.2.0"
+    extend "^3.0.0"
+    form-data "^2.1.1"
+    formidable "^1.1.1"
+    methods "^1.1.1"
+    mime "^1.3.4"
+    qs "^6.1.0"
+    readable-stream "^2.0.5"
+
+supertest@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/supertest/-/supertest-3.0.0.tgz#8d4bb68fd1830ee07033b1c5a5a9a4021c965296"
+  dependencies:
+    methods "~1.1.2"
+    superagent "^3.0.0"
+
+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"
+
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+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"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    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"
+
+through@2, through@~2.3, through@~2.3.1:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+timed-out@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
+
+touch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
+  dependencies:
+    nopt "~1.0.10"
+
+tough-cookie@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  dependencies:
+    punycode "^1.4.1"
+
+tree-kill@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.1.0.tgz#c963dcf03722892ec59cba569e940b71954d1729"
+
+tslib@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
+
+tslint-jasmine-noSkipOrFocus@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/tslint-jasmine-noSkipOrFocus/-/tslint-jasmine-noSkipOrFocus-1.0.8.tgz#91ebe63d71625c5f00a13f060a2b1945c407923b"
+  dependencies:
+    rimraf "^2.6.1"
+
+tslint@^5.7.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.7.0.tgz#c25e0d0c92fa1201c2bc30e844e08e682b4f3552"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    colors "^1.1.2"
+    commander "^2.9.0"
+    diff "^3.2.0"
+    glob "^7.1.1"
+    minimatch "^3.0.4"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.7.1"
+    tsutils "^2.8.1"
+
+tsutils@^2.8.1:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.8.2.tgz#2c1486ba431260845b0ac6f902afd9d708a8ea6a"
+  dependencies:
+    tslib "^1.7.1"
+
+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"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+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.15"
+
+typescript@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.2.tgz#038a95f7d9bbb420b1bf35ba31d4c5c1dd3ffe34"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+undefsafe@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-0.0.3.tgz#ecca3a03e56b9af17385baac812ac83b994a962f"
+
+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@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
+
+update-notifier@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.2.0.tgz#1b5837cf90c0736d88627732b661c138f86de72f"
+  dependencies:
+    boxen "^1.0.0"
+    chalk "^1.0.0"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
+    is-npm "^1.0.0"
+    latest-version "^3.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+url-parse-lax@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
+  dependencies:
+    prepend-http "^1.0.1"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+uuid@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+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"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"
+  dependencies:
+    extsprintf "1.0.2"
+
+which@^1.2.8:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
+  dependencies:
+    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"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
+  dependencies:
+    string-width "^1.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+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"
+    slide "^1.1.5"
+
+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.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
new file mode 100755
index 000000000000..951f88f1c175
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/clean-up.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+set -eu -o pipefail
+
+# Set up env variables
+export AIO_GITHUB_TOKEN=$(head -c -1 /aio-secrets/GITHUB_TOKEN 2>/dev/null)
+
+# Run the clean-up
+node $AIO_SCRIPTS_JS_DIR/dist/lib/clean-up >> /var/log/aio/clean-up.log 2>&1
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-sh/health-check.sh b/aio/aio-builds-setup/dockerbuild/scripts-sh/health-check.sh
new file mode 100644
index 000000000000..d61ddada65d3
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/health-check.sh
@@ -0,0 +1,54 @@
+#!/bin/bash
+# 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
+exitCode=0
+
+
+# Helpers
+function reportStatus {
+  local lastExitCode=$?
+  echo "$1: $([[ $lastExitCode -eq 0 ]] && echo OK || echo NOT OK)"
+  [[ $lastExitCode -eq 0 ]] || exitCode=1
+}
+
+
+# Check services
+services=(
+  rsyslog
+  cron
+  nginx
+  pm2-root
+)
+for s in ${services[@]}; do
+  service $s status > /dev/null
+  reportStatus "Service '$s'"
+done
+
+
+# Check servers
+origins=(
+  http://$AIO_UPLOAD_HOSTNAME:$AIO_UPLOAD_PORT
+  http://$AIO_NGINX_HOSTNAME:$AIO_NGINX_PORT_HTTP
+  https://$AIO_NGINX_HOSTNAME:$AIO_NGINX_PORT_HTTPS
+)
+for o in ${origins[@]}; do
+  curl --fail --silent $o/health-check > /dev/null
+  reportStatus "Server '$o'"
+done
+
+
+# Check resolution of external URLs
+origins=(
+  https://google.com
+)
+for o in ${origins[@]}; do
+  curl --fail --silent $o > /dev/null
+  reportStatus "External URL '$o'"
+done
+
+
+# Exit
+exit $exitCode
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-sh/init.sh b/aio/aio-builds-setup/dockerbuild/scripts-sh/init.sh
new file mode 100755
index 000000000000..9e888e0c3d66
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/init.sh
@@ -0,0 +1,18 @@
+#!/bin/bash
+set -eu -o pipefail
+
+exec >> /var/log/aio/init.log
+exec 2>&1
+
+# Start the services
+echo [`date`] - Starting services...
+mkdir -p $AIO_NGINX_LOGS_DIR
+mkdir -p $TEST_AIO_NGINX_LOGS_DIR
+
+service rsyslog start
+service cron start
+service dnsmasq start
+service nginx start
+service pm2-root start
+aio-upload-server-prod start
+echo [`date`] - Services started successfully.
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
new file mode 100755
index 000000000000..3e31be22c601
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-prod.sh
@@ -0,0 +1,14 @@
+#!/bin/bash
+set -eu -o pipefail
+
+# Set up env variables for production
+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
+action=$([ "$1" == "stop" ] && echo "stop" || echo "start")
+pm2 $action $AIO_SCRIPTS_JS_DIR/dist/lib/upload-server \
+  --uid $AIO_WWW_USER \
+  --log /var/log/aio/upload-server-prod.log \
+  --name aio-upload-server-prod \
+  ${@:2}
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
new file mode 100644
index 000000000000..1aeb4e2fa0d4
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-test.sh
@@ -0,0 +1,28 @@
+#!/bin/bash
+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_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
+
+export AIO_GITHUB_TOKEN=$(head -c -1 /aio-secrets/TEST_GITHUB_TOKEN 2>/dev/null || echo "TEST_GITHUB_TOKEN")
+export AIO_PREVIEW_DEPLOYMENT_TOKEN=$(head -c -1 /aio-secrets/TEST_PREVIEW_DEPLOYMENT_TOKEN 2>/dev/null || echo "TEST_PREVIEW_DEPLOYMENT_TOKEN")
+
+# Start the upload-server instance
+appName=aio-upload-server-test
+if [[ "$1" == "stop" ]]; then
+  pm2 delete $appName
+else
+  pm2 start $AIO_SCRIPTS_JS_DIR/dist/lib/verify-setup/start-test-upload-server.js \
+    --uid $AIO_WWW_USER \
+    --log /var/log/aio/upload-server-test.log \
+    --name $appName \
+    --no-autorestart \
+    ${@:2}
+fi
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-sh/verify-setup.sh b/aio/aio-builds-setup/dockerbuild/scripts-sh/verify-setup.sh
new file mode 100644
index 000000000000..0011d7fcd904
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/verify-setup.sh
@@ -0,0 +1,40 @@
+#!/bin/bash
+set -eu -o pipefail
+
+logFile=/var/log/aio/verify-setup.log
+uploadServerLogFile=/var/log/aio/upload-server-verify-setup.log
+
+exec 3>&1
+exec >> $logFile
+exec 2>&1
+
+echo "[`date`] - Starting verification..."
+
+# Helpers
+function countdown {
+  message=$1
+  secs=$2
+  while [ $secs -gt 0 ]; do
+    echo -ne "$message in $secs...\033[0K\r"
+    sleep 1
+    : $((secs--))
+  done
+  echo -ne "\033[0K\r"
+}
+
+function onExit {
+  aio-upload-server-test stop
+  echo -e "Full logs in '$logFile'.\n" > /dev/fd/3
+}
+
+# Setup EXIT trap
+trap 'onExit' EXIT
+
+# Start an upload-server instance for testing
+aio-upload-server-test start --log $uploadServerLogFile
+
+# Give the upload-server some time to start :(
+countdown "Starting" 5 > /dev/fd/3
+
+# Run the tests
+node $AIO_SCRIPTS_JS_DIR/dist/lib/verify-setup | tee /dev/fd/3
diff --git a/aio/aio-builds-setup/docs/_TOC.md b/aio/aio-builds-setup/docs/_TOC.md
new file mode 100644
index 000000000000..ebf1a4e84c4e
--- /dev/null
+++ b/aio/aio-builds-setup/docs/_TOC.md
@@ -0,0 +1,33 @@
+# VM Setup Instructions
+
+
+## Overview
+- [General overview](overview--general.md)
+- [Security model](overview--security-model.md)
+- [Available scripts and commands](overview--scripts-and-commands.md)
+- [HTTP status codes](overview--http-status-codes.md)
+
+
+## Setting up the VM
+- [Set up secrets](vm-setup--set-up-secrets.md)
+- [Set up docker](vm-setup--set-up-docker.md)
+- [Attach persistent disk](vm-setup--attach-persistent-disk.md)
+- [Create host directories and files](vm-setup--create-host-dirs-and-files.md)
+- [Create docker image](vm-setup--create-docker-image.md)
+
+
+## Configuring the docker image
+- [Available environment variables](image-config--environment-variables.md)
+
+
+## Starting the docker container
+- [Start docker container](vm-setup--start-docker-container.md)
+
+
+## Updating the docker container
+- [Update docker container](vm-setup--update-docker-container.md)
+
+
+## Miscellaneous
+- [Debug docker container](misc--debug-docker-container.md)
+- [Integrate with CI](misc--integrate-with-ci.md)
diff --git a/aio/aio-builds-setup/docs/image-config--environment-variables.md b/aio/aio-builds-setup/docs/image-config--environment-variables.md
new file mode 100644
index 000000000000..4584b1559609
--- /dev/null
+++ b/aio/aio-builds-setup/docs/image-config--environment-variables.md
@@ -0,0 +1,57 @@
+# Image config - Environment variables
+
+
+Below is a list of environment variables that can be configured when creating the docker image (as
+described [here](vm-setup--create-docker-image.md)). An up-to-date list of the configurable
+environment variables and their default values can be found in the
+[Dockerfile](../dockerbuild/Dockerfile).
+
+**Note:**
+Each variable has a `TEST_` prefixed counterpart, which is used for testing purposes. In most cases
+you don't need to specify values for those.
+
+- `AIO_BUILDS_DIR`:
+  The directory (inside the container) where the uploaded build artifacts are kept.
+
+- `AIO_DOMAIN_NAME`:
+  The domain name of the server.
+
+- `AIO_GITHUB_ORGANIZATION`:
+  The GitHub organization whose teams are whitelisted for accepting uploads.
+  See also `AIO_GITHUB_TEAM_SLUGS`.
+
+- `AIO_GITHUB_TEAM_SLUGS`:
+  A comma-separated list of teams, whose authors are allowed to upload PRs.
+  See also `AIO_GITHUB_ORGANIZATION`.
+
+- `AIO_NGINX_HOSTNAME`:
+  The internal hostname for accessing the nginx server. This is mostly used for performing a
+  periodic health-check.
+
+- `AIO_NGINX_PORT_HTTP`:
+  The port number on which nginx listens for HTTP connections. This should be mapped to the
+  corresponding port on the host VM (as described [here](vm-setup--start-docker-container.md)).
+
+- `AIO_NGINX_PORT_HTTPS`:
+  The port number on which nginx listens for HTTPS connections. This should be mapped to the
+  corresponding port on the host VM (as described [here](vm-setup--start-docker-container.md)).
+
+- `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.
+
+- `AIO_UPLOAD_MAX_SIZE`:
+  The maximum allowed size for the uploaded gzip archive containing the build artifacts. Files
+  larger than this will be rejected.
+
+- `AIO_UPLOAD_PORT`:
+  The port number on which the Node.js upload-server listens for HTTP connections. 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--debug-docker-container.md b/aio/aio-builds-setup/docs/misc--debug-docker-container.md
new file mode 100644
index 000000000000..4b6aa265c5ca
--- /dev/null
+++ b/aio/aio-builds-setup/docs/misc--debug-docker-container.md
@@ -0,0 +1,12 @@
+# Miscellaneous - Debug docker container
+
+
+TODO (gkalpak): Add docs. Mention:
+- `aio-health-check`
+- `aio-verify-setup`
+- Test nginx accessible at:
+  - `http://$TEST_AIO_NGINX_HOTNAME:$TEST_AIO_NGINX_PORT_HTTP`
+  - `https://$TEST_AIO_NGINX_HOTNAME:$TEST_AIO_NGINX_PORT_HTTPS`
+- Test upload-server accessible at:
+  - `http://$TEST_AIO_UPLOAD_HOTNAME:$TEST_AIO_UPLOAD_PORT`
+- Local DNS (via dnsmasq) maps the above hostnames to 127.0.0.1
diff --git a/aio/aio-builds-setup/docs/misc--integrate-with-ci.md b/aio/aio-builds-setup/docs/misc--integrate-with-ci.md
new file mode 100644
index 000000000000..352c977876c7
--- /dev/null
+++ b/aio/aio-builds-setup/docs/misc--integrate-with-ci.md
@@ -0,0 +1,11 @@
+# Miscellaneous - Integrate with CI
+
+
+TODO (gkalpak): Add docs. Mention:
+- Travis' JWT addon (+ limitations).
+  Relevant files: `.travis.yml`, `scripts/ci/env.sh`
+- Testing on CI.
+  Relevant files: `scripts/ci/test-aio.sh`, `aio/aio-builds-setup/scripts/test.sh`
+- Deploying from CI.
+  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
new file mode 100644
index 000000000000..0637e5235cea
--- /dev/null
+++ b/aio/aio-builds-setup/docs/overview--general.md
@@ -0,0 +1,120 @@
+# Overview - General
+
+
+## Objective
+Whenever a PR job is run on Travis, we want to build `angular.io` and upload the build artifacts to
+a publicly accessible server so that collaborators (developers, designers, authors, etc) can preview
+the changes without having to checkout and build the app locally.
+
+
+## Source code
+In order to make it easier to administer the server and version-control the setup, we are using
+[docker](https://www.docker.com) to run a container on a VM. The Dockerfile and all other files
+necessary for creating the docker container are stored (and versioned) along with the angular.io
+project's source code (currently part of the angular/angular repo) in the `aio-builds-setup/`
+directory.
+
+
+## Setup
+The VM is hosted on [Google Compute Engine](https://cloud.google.com/compute/). The host OS is
+debian:jessie. For more info how to set up the host VM take a look at the "Setting up the VM"
+section in [TOC](_TOC.md).
+
+
+## Security model
+Since we are managing a public server, it is important to take appropriate measures in order to
+prevent abuse. For more details on the challenges and the chosen approach take a look at the
+[security model](overview--security-model.md).
+
+
+## The 10000 feet view
+This section gives a brief summary of the several operations performed on CI and by the docker
+container:
+
+
+### On CI (Travis)
+- 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 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 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 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 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 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
+- nginx receives a request for an uploaded resource on a subdomain corresponding to the PR and SHA.
+  E.g.: `pr<PR>-<SHA>.ngbuilds.io/path/to/resource`
+- 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
+clean-up tasks once a day. The task retrieves all open PRs from GitHub and removes all directories
+that do not correspond with an open PR.
+
+
+### Health-check
+The docker service runs a periodic health-check that verifies the running conditions of the
+container. This includes verifying the status of specific system services, the responsiveness of
+nginx and the upload-server and internet connectivity.
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 000000000000..1a041ffbcfac
--- /dev/null
+++ b/aio/aio-builds-setup/docs/overview--http-status-codes.md
@@ -0,0 +1,85 @@
+# 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 (public or non-public) 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 (public or non-public) 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
new file mode 100644
index 000000000000..4260fe3b96ae
--- /dev/null
+++ b/aio/aio-builds-setup/docs/overview--scripts-and-commands.md
@@ -0,0 +1,53 @@
+# Overview - Scripts and Commands
+
+
+This is an overview of the available scripts and commands.
+
+
+## Scripts
+The scripts are located inside `<aio-builds-setup-dir>/scripts/`. The following scripts are
+available:
+
+- `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`:
+  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.
+
+- `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
+The following commands are available globally from inside the docker container. They are either used
+by the container to perform its various operations or can be used ad-hoc, mainly for testing
+purposes. Each command is backed by a corresponding script inside
+`<aio-builds-setup-dir>/dockerbuild/scripts-sh/`.
+
+- `aio-clean-up`:
+  Cleans up the builds directory by removing the artifacts that do not correspond to an open PR.
+  _It is run as a daily cronjob._
+
+- `aio-health-check`:
+  Runs a basic health-check, verifying that the necessary services are running, the servers are
+  responding and there is a working internet connection.
+  _It is used periodically by docker for determining the container's health status._
+
+- `aio-init`:
+  Initializes the container (mainly by starting the necessary services).
+  _It is run (by default) when starting the container._
+
+- `aio-upload-server-prod`:
+  Spins up a Node.js upload-server instance.
+  _It is used in `aio-init` (see above) during initialization._
+
+- `aio-upload-server-test`:
+  Spins up a Node.js upload-server instance for tests.
+  _It is used in `aio-verify-setup` (see below) for running tests._
+
+- `aio-verify-setup`:
+  Runs a suite of e2e-like tests, mainly verifying the correct (inter)operation of nginx and the
+  Node.js upload-server.
diff --git a/aio/aio-builds-setup/docs/overview--security-model.md b/aio/aio-builds-setup/docs/overview--security-model.md
new file mode 100644
index 000000000000..c616958f4a56
--- /dev/null
+++ b/aio/aio-builds-setup/docs/overview--security-model.md
@@ -0,0 +1,138 @@
+# Overview - Security model
+
+
+Whenever a PR job is run on Travis, we want to build `angular.io` and upload the build artifacts to
+a publicly accessible server so that collaborators (developers, designers, authors, etc) can preview
+the changes without having to checkout and build the app locally.
+
+This document discusses the security considerations associated with uploading build artifacts as
+part of the CI setup and serving them publicly.
+
+
+## Security objectives
+
+- **Prevent uploading arbitrary content to our servers.**
+  Since there is no restriction on who can submit a PR, we cannot allow any PR's build artifacts to
+  be uploaded.
+
+- **Prevent overwriting other peoples uploaded content.**
+  There needs to be a mechanism in place to ensure that the uploaded content does indeed correspond
+  to the PR indicated by its URL.
+
+- **Prevent arbitrary access on the server.**
+  Since the PR author has full access over the build artifacts that would be uploaded, we must
+  ensure that the uploaded files will not enable arbitrary access to the server or expose sensitive
+  info.
+
+
+## Issues / Caveats
+
+- Because the PR author can change the scripts run on CI, any security mechanisms must be immune to
+  such changes.
+
+- For security reasons, encrypted Travis variables are not available to PRs, so we can't rely on
+  them to implement security.
+
+
+## Implemented approach
+
+
+### In a nutshell
+The implemented approach can be broken up to the following sub-tasks:
+
+1. Verify which PR the uploaded artifacts correspond to.
+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).
+7. Prevent uploaded files from accessing anything outside their directory.
+
+
+### Implementation details
+This section describes how each of the aforementioned sub-tasks is accomplished:
+
+1. **Verify which PR the uploaded artifacts correspond to.**
+
+   We are taking advantage of Travis' [JWT addon](https://docs.travis-ci.com/user/jwt). By sharing
+   a secret between Travis (which keeps it private but uses it to sign a JWT) and the server (which
+   uses it to verify the authenticity of the JWT), we can accomplish the following:
+   a. Verify that the upload request comes from Travis.
+   b. Determine the PR that these artifacts correspond to (since Travis puts that information into
+      the JWT, without the PR author being able to modify it).
+
+   _Note:_
+   _There are currently certain limitation in the implementation of the JWT addon._
+   _See the next section for more details._
+
+2. **Fetch the PR's metadata, including author and labels**.
+
+   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 can be automatically verified as "trusted"**.
+
+   "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. **If necessary update the corresponding PR's verification status**.
+
+   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. **Deploy the artifacts to the corresponding PR's directory.**
+
+   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._
+
+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.
+
+
+## Assumptions / Things to keep in mind
+
+- 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
+  mins). Because of this, the value of the `PREVIEW_DEPLOYMENT_TOKEN` should not be made publicly
+  accessible (e.g. by printing it on the Travis job log).
+
+- Travis does only allow specific whitelisted property names to be used with the JWT addon. The only
+  known such property at the time is `SAUCE_ACCESS_KEY` (used for integration with SauceLabs). In
+  order to be able to actually use the JWT addon we had to name the encrypted variable
+  `SAUCE_ACCESS_KEY` (which we later re-assign to `NGBUILDS_IO_KEY`).
diff --git a/aio/aio-builds-setup/docs/vm-setup--attach-persistent-disk.md b/aio/aio-builds-setup/docs/vm-setup--attach-persistent-disk.md
new file mode 100644
index 000000000000..21c24bdb75b2
--- /dev/null
+++ b/aio/aio-builds-setup/docs/vm-setup--attach-persistent-disk.md
@@ -0,0 +1,20 @@
+# VM setup - Attach persistent disk
+
+
+## Create `aio-builds` persistent disk (if not already exists)
+- Follow instructions [here](https://cloud.google.com/compute/docs/disks/add-persistent-disk#create_disk).
+- `sudo mkfs.ext4 -F -E lazy_itable_init=0,lazy_journal_init=0,discard /dev/disk/by-id/google-aio-builds`
+
+
+## Mount disk
+- `sudo mkdir -p /mnt/disks/aio-builds`
+- `sudo mount -o discard,defaults /dev/disk/by-id/google-aio-builds /mnt/disks/aio-builds`
+- `sudo chmod a+w /mnt/disks/aio-builds`
+
+
+## Mount disk on boot
+- Run:
+  ```
+  echo UUID=`sudo blkid -s UUID -o value /dev/disk/by-id/google-aio-builds` \
+    /mnt/disks/aio-builds ext4 discard,defaults,nofail 0 2 | sudo tee -a /etc/fstab
+  ```
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
new file mode 100644
index 000000000000..273cb7ba1c89
--- /dev/null
+++ b/aio/aio-builds-setup/docs/vm-setup--create-docker-image.md
@@ -0,0 +1,32 @@
+# VM setup - Create docker image
+
+
+## Checkout repository
+- `git clone <repo-url>`
+
+
+## Build docker image
+- `<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 script has to execute docker commands with `sudo`.
+
+
+## Example
+The following commands would create a docker image from GitHub repo `foo/bar` to be deployed on the
+`foobar-builds.io` domain and accepting PR deployments from authors that are members of the
+`bar-core` and `bar-docs-authors` teams of organization `foo`:
+
+- `git clone https://github.com/foo/bar.git foobar`
+- Run:
+  ```
+  ./foobar/aio-builds-setup/scripts/build.sh foobar-builds \
+    --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_TEAM_SLUGS=bar-core,bar-docs-authors
+  ```
+
+A full list of the available environment variables can be found
+[here](image-config--environment-variables.md).
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
new file mode 100644
index 000000000000..423904954bf5
--- /dev/null
+++ b/aio/aio-builds-setup/docs/vm-setup--create-host-dirs-and-files.md
@@ -0,0 +1,75 @@
+# VM setup - Create host directories and files
+
+
+## Create directory with secrets
+For security reasons, sensitive info (such as tokens and passwords) are not hardcoded into the
+docker image, nor passed as environment variables at runtime. They are passed to the docker
+container from the host VM as files inside a directory. Each file's name is the name of the variable
+and the file content is the value. These are read from inside the running container when necessary.
+
+More info on how to create `secrets` directory and files can be found
+[here](vm-setup--set-up-secrets.md).
+
+
+## Create directory for build artifacts
+The uploaded build artifacts should be kept on a directory outside the docker container, so it is
+easier to replace the container without losing the uploaded builds. For portability across VMs a
+persistent disk can be used (as described [here](vm-setup--attach-persistent-disk.md)).
+
+**Note:** The directories created inside that directory will be owned by user `www-data`.
+
+
+## Create SSL certificates (Optional for dev)
+The host VM can attach a directory containing the SSL certificate and key to be used by the nginx
+server for serving the uploaded build artifacts. More info on how to attach the directory when
+starting the container can be found [here](vm-setup--start-docker-container.md).
+
+In order for the container to be able to find the certificate and key, they should be named
+`<DOMAIN_NAME>.crt` and `<DOMAIN_NAME>.key` respectively. For example, for a domain name
+`ngbuild.io`, nginx will look for files `ngbuilds.io.crt` and `ngbuilds.io.key`. More info on how to
+specify the domain name see [here](vm-setup--create-docker-image.md).
+
+If no directory is attached, nginx will use an internal self-signed certificate. This is convenient
+during development, but is not suitable for production.
+
+**Note:**
+Since nginx needs to be able to serve requests for both the main domain as well as any subdomain
+(e.g. `ngbuilds.io/` and `foo-bar.ngbuilds.io/`), the provided certificate needs to be a wildcard
+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). Log files are
+rotated and retained for 6 months.
+
+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
+  closed PRs.
+
+- `init.log`:
+  Output of the `aio-init` command, run (by default) when starting the container.
+
+- `nginx/{access,error}.log`:
+  The access and error logs produced by the nginx server while serving "production" files.
+
+- `nginx-test/{access,error}.log`:
+  The access and error logs produced by the nginx server while serving "test" files. This is only
+  used when running tests locally from inside the container, e.g. with the `aio-verify-setup`
+  command. (See [here](overview--scripts-and-commands.md) for more info.)
+
+- `upload-server-{prod,test,verify-setup}-*.log`:
+  The logs produced by the Node.js upload-server while serving either:
+  - `-prod`: "Production" files (g.g during normal operation).
+  - `-test`: "Test" files (e.g. when a test instance is started with the `aio-upload-server-test`
+             command).
+  - `-verify-setup`: "Test" files, but while running `aio-verify-setup`.
+
+  (See [here](overview--scripts-and-commands.md) for more info the commands mentioned above.)
+
+- `verify-setup.log`:
+  The output of the `aio-verify-setup` command (e.g. Jasmine output), except for upload-server
+  output which is logged to `upload-server-verify-setup-*.log` (see above).
diff --git a/aio/aio-builds-setup/docs/vm-setup--set-up-docker.md b/aio/aio-builds-setup/docs/vm-setup--set-up-docker.md
new file mode 100644
index 000000000000..9789380243c1
--- /dev/null
+++ b/aio/aio-builds-setup/docs/vm-setup--set-up-docker.md
@@ -0,0 +1,35 @@
+# VM Setup - Set up docker
+
+
+## Install docker
+
+_Debian (jessie):_
+- `sudo apt-get update`
+- `sudo apt-get install -y apt-transport-https ca-certificates curl git software-properties-common`
+- `curl -fsSL https://apt.dockerproject.org/gpg | sudo apt-key add -`
+- `apt-key fingerprint 58118E89F3A912897C070ADBF76221572C52609D`
+- `sudo add-apt-repository "deb https://apt.dockerproject.org/repo/ debian-$(lsb_release -cs) main"`
+- `sudo apt-get update`
+- `sudo apt-get -y install docker-engine`
+
+_Ubuntu (16.04):_
+- `sudo apt-get update`
+- `sudo apt-get install -y curl git linux-image-extra-$(uname -r) linux-image-extra-virtual`
+- `sudo apt-get install -y apt-transport-https ca-certificates`
+- `curl -fsSL https://yum.dockerproject.org/gpg | sudo apt-key add -`
+- `apt-key fingerprint 58118E89F3A912897C070ADBF76221572C52609D`
+- `sudo add-apt-repository "deb https://apt.dockerproject.org/repo/ ubuntu-$(lsb_release -cs) main"`
+- `sudo apt-get update`
+- `sudo apt-get -y install docker-engine`
+
+
+## Start the docker
+- `sudo service docker start`
+
+
+## Test docker
+- `sudo docker run hello-world`
+
+
+## Start docker on boot
+- `sudo systemctl enable docker`
diff --git a/aio/aio-builds-setup/docs/vm-setup--set-up-secrets.md b/aio/aio-builds-setup/docs/vm-setup--set-up-secrets.md
new file mode 100644
index 000000000000..8b9ab9a7c774
--- /dev/null
+++ b/aio/aio-builds-setup/docs/vm-setup--set-up-secrets.md
@@ -0,0 +1,52 @@
+# VM Setup - Set up secrets
+
+
+## Overview
+
+Necessary secrets:
+
+1. `GITHUB_TOKEN`
+   - Used for:
+     - Retrieving open PRs without rate-limiting.
+     - Retrieving PR author.
+     - Retrieving members of the trusted GitHub teams.
+     - Posting comments with preview links on PRs.
+
+2. `PREVIEW_DEPLOYMENT_TOKEN`
+   - Used for:
+     - Decoding the JWT tokens received with `/create-build` requests.
+
+**Note:**
+`TEST_GITHUB_TOKEN` and `TEST_PREVIEW_DEPLOYMENT_TOKEN` can also be created similar to their
+non-TEST counterparts and they will be loaded when running `aio-verify-setup`, but it is currently
+not clear if/how they can be used in tests.
+
+
+## Create secrets
+
+1. `GITHUB_TOKEN`
+   - Visit https://github.com/settings/tokens.
+   - Generate new token with the `public_repo` scope.
+
+2. `PREVIEW_DEPLOYMENT_TOKEN`
+   - Just generate a hard-to-guess character sequence.
+   - Add it to `.travis.yml` under `addons -> jwt -> secure`.
+     Can be added automatically with: `travis encrypt --add addons.jwt PREVIEW_DEPLOYMENT_TOKEN=<access-key>`
+
+**Note:**
+Due to [travis-ci/travis-ci#7223](https://github.com/travis-ci/travis-ci/issues/7223) it is not
+currently possible to use the JWT addon (as described above) for anything other than the
+`SAUCE_ACCESS_KEY` variable. You can get creative, though...
+
+**WARNING**
+TO avoid arbitrary uploads, make sure the `PREVIEW_DEPLOYMENT_TOKEN` is NOT printed in the Travis log.
+
+
+## Save secrets on the VM
+
+- `sudo mkdir /aio-secrets`
+- `sudo touch /aio-secrets/GITHUB_TOKEN`
+- Insert `<github-token>` into `/aio-secrets/GITHUB_TOKEN`.
+- `sudo touch /aio-secrets/PREVIEW_DEPLOYMENT_TOKEN`
+- Insert `<access-token>` into `/aio-secrets/PREVIEW_DEPLOYMENT_TOKEN`.
+- `sudo chmod 400 /aio-secrets/*`
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
new file mode 100644
index 000000000000..d223e9762194
--- /dev/null
+++ b/aio/aio-builds-setup/docs/vm-setup--start-docker-container.md
@@ -0,0 +1,92 @@
+# VM setup - Start docker container
+
+
+## The `docker run` command
+Once everything has been setup and configured, a docker container can be started with the following
+command:
+
+```
+sudo docker run \
+  --detach \
+  --dns 127.0.0.1 \
+  --name <instance-name> \
+  --publish 80:80 \
+  --publish 443:443 \
+  --restart unless-stopped \
+ [--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>]
+```
+
+Below is the same command with inline comments explaining each option. The aPI docs for `docker run`
+can be found [here](https://docs.docker.com/engine/reference/run/).
+
+```
+sudo docker run \
+
+  # Start as a daemon.
+  --detach \
+
+  # Use the local DNS server.
+  # (This is necessary for mapping internal URLs, e.g. for the Node.js upload-server.)
+  --dns 127.0.0.1 \
+
+  # USe `<instance-name>` as an alias for the container.
+  # Useful for running `docker` commands, e.g.: `docker stop <instance-name>`
+  --name <instance-name> \
+
+  # 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.)
+  --restart unless-stopped \
+
+  # 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.
+ [--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.)
+  --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.)
+  --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.
+ [--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.)
+  <name>[:<tag>]
+```
+
+
+## Example
+The following command would start a docker container based on the previously created `foobar-builds`
+docker image, alias it as 'foobar-builds-1' and map predefined directories on the host VM to be used
+by the container for accessing secrets and SSL certificates and keeping the build artifacts and logs.
+
+```
+sudo docker run \
+  --detach \
+  --dns 127.0.0.1 \
+  --name foobar-builds-1 \
+  --publish 80:80 \
+  --publish 443:443 \
+  --restart unless-stopped \
+  --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 000000000000..719ff0903f20
--- /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 a 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
new file mode 100755
index 000000000000..e0d5ef4c37d8
--- /dev/null
+++ b/aio/aio-builds-setup/scripts/_env.sh
@@ -0,0 +1,5 @@
+#!/bin/bash
+
+readonly THIS_DIR=$(cd $(dirname $0); pwd)
+readonly DOCKERBUILD_DIR="$THIS_DIR/../dockerbuild"
+readonly SCRIPTS_JS_DIR="$DOCKERBUILD_DIR/scripts-js"
diff --git a/aio/aio-builds-setup/scripts/create-image.sh b/aio/aio-builds-setup/scripts/create-image.sh
new file mode 100755
index 000000000000..553b426210f0
--- /dev/null
+++ b/aio/aio-builds-setup/scripts/create-image.sh
@@ -0,0 +1,18 @@
+#!/bin/bash
+set -eux -o pipefail
+
+# Set up env
+source "`dirname $0`/_env.sh"
+readonly defaultImageNameAndTag="aio-builds:latest"
+
+# Build `scripts-js/`
+# (Necessary, because only `scripts-js/dist/` is copied to the docker image.)
+(
+  cd "$SCRIPTS_JS_DIR"
+  yarn install --frozen-lockfile --non-interactive
+  yarn build
+)
+
+# Create docker image
+readonly nameAndOptionalTag=${1:-$defaultImageNameAndTag}
+sudo docker build --tag $nameAndOptionalTag ${@:2} $DOCKERBUILD_DIR
diff --git a/aio/aio-builds-setup/scripts/test.sh b/aio/aio-builds-setup/scripts/test.sh
new file mode 100755
index 000000000000..7bc25f94790a
--- /dev/null
+++ b/aio/aio-builds-setup/scripts/test.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+set -eux -o pipefail
+
+# Set up env
+source "`dirname $0`/_env.sh"
+
+# Test `scripts-js/`
+(
+  cd "$SCRIPTS_JS_DIR"
+  yarn install --frozen-lockfile --non-interactive
+  yarn test
+)
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 000000000000..aa341c4282fc
--- /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 -e "\n\n[`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" --no-cache
+  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/angular.json b/aio/angular.json
new file mode 100644
index 000000000000..4e118bb59f59
--- /dev/null
+++ b/aio/angular.json
@@ -0,0 +1,189 @@
+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "yarn"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "site": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "aot": true,
+            "optimization": true,
+            "buildOptimizer": true,
+            "outputHashing": "all",
+            "sourceMap": true,
+            "statsJson": true,
+            "extractCss": true,
+            "extractLicenses": true,
+            "namedChunks": true,
+            "vendorChunk": false,
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/generated",
+              "src/app/search/search-worker.js",
+              "src/favicon.ico",
+              "src/pwa-manifest.json",
+              "src/google385281288605d160.html",
+              {
+                "glob": "custom-elements.min.js",
+                "input": "node_modules/@webcomponents/custom-elements",
+                "output": "/assets/js"
+              },
+              {
+                "glob": "native-shim.js",
+                "input": "node_modules/@webcomponents/custom-elements/src",
+                "output": "/assets/js"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "fast": {
+              "optimization": false
+            },
+            "next": {
+              "fileReplacements": [
+                {
+                  "src": "src/environments/environment.ts",
+                  "replaceWith": "src/environments/environment.next.ts"
+                }
+              ]
+            },
+            "stable": {
+              "fileReplacements": [
+                {
+                  "src": "src/environments/environment.ts",
+                  "replaceWith": "src/environments/environment.stable.ts"
+                }
+              ]
+            },
+            "archive": {
+              "fileReplacements": [
+                {
+                  "src": "src/environments/environment.ts",
+                  "replaceWith": "src/environments/environment.archive.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "site:build"
+          },
+          "configurations": {
+            "fast": {
+              "browserTarget": "site:build:fast"
+            },
+            "next": {
+              "browserTarget": "site:build:next"
+            },
+            "stable": {
+              "browserTarget": "site:build:stable"
+            },
+            "archive": {
+              "browserTarget": "site:build:archive"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "site:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "src/karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/generated",
+              "src/app/search/search-worker.js",
+              "src/favicon.ico",
+              "src/pwa-manifest.json",
+              "src/google385281288605d160.html",
+              {
+                "glob": "custom-elements.min.js",
+                "input": "node_modules/@webcomponents/custom-elements",
+                "output": "/assets/js"
+              },
+              {
+                "glob": "native-shim.js",
+                "input": "node_modules/@webcomponents/custom-elements/src",
+                "output": "/assets/js"
+              }
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "site-e2e": {
+      "root": "",
+      "projectType": "application",
+      "cli": {},
+      "schematics": {},
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "tests/e2e/protractor.conf.js",
+            "devServerTarget": "site:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tests/e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "inlineStyle": true,
+      "prefix": "aio",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "aio"
+    }
+  }
+}
diff --git a/aio/content/examples/.gitignore b/aio/content/examples/.gitignore
new file mode 100644
index 000000000000..d40a958d049d
--- /dev/null
+++ b/aio/content/examples/.gitignore
@@ -0,0 +1,88 @@
+# boilerplate files
+**/src/environments/environment.prod.ts
+**/src/environments/environment.ts
+**/src/assets/.gitkeep
+**/src/favicon.ico
+**/src/styles.css
+**/src/systemjs-angular-loader.js
+**/src/systemjs.config.js
+**/src/tsconfig.json
+**/src/favicon.ico
+**/src/polyfills.ts
+**/src/test.ts
+**/src/tsconfig.app.json
+**/src/tsconfig.spec.json
+**/src/typings.d.ts
+**/e2e/src/app.po.ts
+**/e2e/tsconfig.e2e.json
+**/src/karma.conf.js
+**/.angular-cli.json
+**/.editorconfig
+**/angular.json
+**/tsconfig.json
+**/bs-config.e2e.json
+**/bs-config.json
+**/package.json
+**/tslint.json
+**/karma-test-shim.js
+**/browser-test-shim.js
+**/browserslist
+**/node_modules
+
+# built files
+*.map
+_test-output
+**/*.js
+dist/
+
+
+# special
+!/*
+!*.1.*
+!*.2.*
+!*.3.*
+*.1.js
+*.2.js
+*.3.js
+*.1.js.map
+*.2.js.map
+*.3.js.map
+!systemjs.config.*.js
+!karma-test-shim.*.js
+!copy-dist-files.js
+
+# AngularJS files
+!**/*.ajs.js
+**/app/**/*.ajs.js
+
+# aot
+**/*.ngsummary.json
+!rollup-config.js
+aot-compiler/**/*.d.ts
+aot-compiler/**/*.factory.d.ts
+upgrade-phonecat-2-hybrid/aot/**/*
+!upgrade-phonecat-2-hybrid/aot/index.html
+
+# i18n
+!i18n/src/systemjs-text-plugin.js
+
+# testing
+!testing/src/browser-test-shim.js
+
+# webpack
+!webpack/**/config/*.js
+!webpack/**/*webpack*.js
+!webpack/src/polyfills.ts
+
+# styleguide
+!styleguide/src/systemjs.custom.js
+
+# universal
+!universal/webpack.server.config.js
+
+# stackblitz
+*stackblitz.no-link.html
+
+# ngUpgrade testing
+!upgrade-phonecat-*/**/karma.conf.js
+!upgrade-phonecat-*/**/karma-test-shim.js
diff --git a/aio/content/examples/ajs-quick-reference/.angular-cli.1.json b/aio/content/examples/ajs-quick-reference/.angular-cli.1.json
new file mode 100644
index 000000000000..d4a67ca369bc
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/.angular-cli.1.json
@@ -0,0 +1,62 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "angular.io-example"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      // #docregion styles
+      "styles": [
+        "styles.css"
+      ],
+      // #enddocregion styles
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}
diff --git a/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts b/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..e27f56e68b87
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,115 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('AngularJS to Angular Quick Reference Tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should display no poster images after bootstrap', function () {
+    testImagesAreDisplayed(false);
+  });
+
+  it('should display proper movie data', function () {
+    // We check only a few samples
+    let expectedSamples: any[] = [
+      {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
+      {row: 0, column: 2, value: 'Celeritas'},
+      {row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format
+      {row: 1, column: 5, value: '$14.95'},
+      {row: 2, column: 4, value: 'PG-13'},
+      {row: 2, column: 7, value: '100%'},
+      {row: 2, column: 0, element: 'img', attr: 'src', value: 'images/ng-logo.png', contains: true},
+    ];
+
+    // Go through the samples
+    let movieRows = getMovieRows();
+    for (let i = 0; i < expectedSamples.length; i++) {
+      let sample = expectedSamples[i];
+      let tableCell = movieRows.get(sample.row)
+        .all(by.tagName('td')).get(sample.column);
+      // Check the cell or its nested element
+      let elementToCheck = sample.element
+        ? tableCell.element(by.tagName(sample.element))
+        : tableCell;
+
+      // Check element attribute or text
+      let valueToCheck = sample.attr
+        ? elementToCheck.getAttribute(sample.attr)
+        : elementToCheck.getText();
+
+      // Test for equals/contains/match
+      if (sample.contains) {
+        expect(valueToCheck).toContain(sample.value);
+      } else if (sample.matches) {
+        expect(valueToCheck).toMatch(sample.matches);
+      } else {
+        expect(valueToCheck).toEqual(sample.value);
+      }
+    }
+  });
+
+  it('should display images after Show Poster', function () {
+    testPosterButtonClick('Show Poster', true);
+  });
+
+  it('should hide images after Hide Poster', function () {
+    testPosterButtonClick('Hide Poster', false);
+  });
+
+  it('should display no movie when no favorite hero is specified', function () {
+    testFavoriteHero(null, 'Please enter your favorite hero.');
+  });
+
+  it('should display no movie for Magneta', function () {
+    testFavoriteHero('Magneta', 'No movie, sorry!');
+  });
+
+  it('should display a movie for Mr. Nice', function () {
+    testFavoriteHero('Mr. Nice', 'Excellent choice!');
+  });
+
+  function testImagesAreDisplayed(isDisplayed: boolean) {
+    let expectedMovieCount = 3;
+
+    let movieRows = getMovieRows();
+    expect(movieRows.count()).toBe(expectedMovieCount);
+    for (let i = 0; i < expectedMovieCount; i++) {
+      let movieImage = movieRows.get(i).element(by.css('td > img'));
+      expect(movieImage.isDisplayed()).toBe(isDisplayed);
+    }
+  }
+
+  function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
+    let posterButton = element(by.css('app-movie-list tr > th > button'));
+    expect(posterButton.getText()).toBe(expectedButtonText);
+
+    posterButton.click().then(function () {
+      testImagesAreDisplayed(isDisplayed);
+    });
+  }
+
+  function getMovieRows() {
+    return element.all(by.css('app-movie-list tbody > tr'));
+  }
+
+  function testFavoriteHero(heroName: string, expectedLabel: string) {
+    let movieListComp = element(by.tagName('app-movie-list'));
+    let heroInput = movieListComp.element(by.tagName('input'));
+    let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
+    let resultLabel = movieListComp.element(by.css('span > p'));
+
+    heroInput.clear().then(function () {
+      heroInput.sendKeys(heroName || '');
+      expect(resultLabel.getText()).toBe(expectedLabel);
+      if (heroName) {
+        expect(favoriteHeroLabel.isDisplayed()).toBe(true);
+        expect(favoriteHeroLabel.getText()).toContain(heroName);
+      } else {
+        expect(favoriteHeroLabel.isDisplayed()).toBe(false);
+      }
+    });
+  }
+});
diff --git a/modules/angular2/docs/core/04_decorator_directive.md b/aio/content/examples/ajs-quick-reference/example-config.json
similarity index 100%
rename from modules/angular2/docs/core/04_decorator_directive.md
rename to aio/content/examples/ajs-quick-reference/example-config.json
diff --git a/aio/content/examples/ajs-quick-reference/src/app/app-routing.module.ts b/aio/content/examples/ajs-quick-reference/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..a7cbe8a74d0f
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/app-routing.module.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule }  from '@angular/router';
+
+import { MovieListComponent } from './movie-list.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/movies', pathMatch: 'full' },
+  { path: 'movies', component: MovieListComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
diff --git a/aio/content/examples/ajs-quick-reference/src/app/app.component.css b/aio/content/examples/ajs-quick-reference/src/app/app.component.css
new file mode 100644
index 000000000000..e454e9ea87fa
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.component.css
@@ -0,0 +1,9 @@
+.active {font-style: italic;}
+.shazam {font-weight: bold;}
+
+img {height: 100px;}
+
+table td {
+  padding: 4px;
+  border: 1px solid #e0e0e0;
+}
diff --git a/aio/content/examples/ajs-quick-reference/src/app/app.component.html b/aio/content/examples/ajs-quick-reference/src/app/app.component.html
new file mode 100644
index 000000000000..82eaf9339b2b
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.component.html
@@ -0,0 +1,112 @@
+<!-- #docplaster -->
+<h1>{{title}}</h1>
+
+<h3>Routed Movies</h3>
+<nav>
+  <!-- #docregion router-link -->
+  <a [routerLink]="['/movies']">Movies</a>
+  <!-- #enddocregion router-link -->
+</nav>
+<router-outlet></router-outlet>
+
+<hr>
+
+<h1>Example Snippets</h1>
+
+<!-- #docregion ngClass -->
+<div [ngClass]="{'active': isActive}">
+<!-- #enddocregion ngClass -->
+  [ngClass] active
+</div>
+<!-- #docregion ngClass -->
+<div [ngClass]="{'active': isActive,
+                 'shazam': isImportant}">
+<!-- #enddocregion ngClass -->
+  [ngClass] active and boldly important
+</div>
+<!-- #docregion ngClass -->
+<div [class.active]="isActive">
+<!-- #enddocregion ngClass -->
+  [class.active]
+</div>
+
+<p></p>
+<!-- #docregion href -->
+<a [href]="angularDocsUrl">Angular Docs</a>
+<!-- #enddocregion href -->
+
+<p></p>
+<div>
+  <!-- #docregion event-binding -->
+  <button (click)="toggleImage()">
+  <!-- #enddocregion event-binding -->
+  Image Toggle #1</button>
+  <!-- #docregion event-binding -->
+  <button (click)="toggleImage($event)">
+  <!-- #enddocregion event-binding -->
+  Image Toggle #2</button>
+  <p>Image toggle event type was {{eventType}}</p>
+</div>
+
+<p></p>
+<div *ngIf="showImage">
+  <!-- #docregion src -->
+  <img [src]="movie.imageurl">
+  <!-- #enddocregion src -->
+</div>
+
+<p></p>
+<!-- #docregion ngStyle -->
+<div [ngStyle]="{'color': colorPreference}">
+<!-- #enddocregion ngStyle -->
+  color preference #1
+</div>
+<!-- #docregion ngStyle -->
+<div [style.color]="colorPreference">
+<!-- #enddocregion ngStyle -->
+  color preference #2
+</div>
+
+<h3>Movie as JSON</h3>
+<!-- #docregion json -->
+<pre>{{movie | json}}</pre>
+<!-- #enddocregion json -->
+
+<h3>Movie Titles via local variable</h3>
+<table>
+<!-- #docregion local -->
+<tr *ngFor="let movie of movies">
+  <td>{{movie.title}}</td>
+</tr>
+<!-- #enddocregion local -->
+</table>
+
+<h3>Sliced Movies with pipes</h3>
+<table>
+<!-- #docregion slice -->
+<tr *ngFor="let movie of movies | slice:0:2">
+<!-- #enddocregion slice -->
+
+  <!-- #docregion uppercase -->
+  <td>{{movie.title | uppercase}}</td>
+  <!-- #enddocregion uppercase -->
+
+  <!-- #docregion lowercase -->
+  <td>{{movie.title | lowercase}}</td>
+  <!-- #enddocregion lowercase -->
+
+  <!-- #docregion date -->
+  <td>{{movie.releaseDate | date}}</td>
+  <!-- #enddocregion date -->
+
+  <!-- #docregion currency -->
+  <td>{{movie.price | currency:'USD':true}}</td>
+  <!-- #enddocregion currency -->
+
+  <!-- #docregion number -->
+  <td>{{movie.starRating | number}}</td>
+  <td>{{movie.starRating | number:'1.1-2'}}</td>
+  <td>{{movie.approvalRating | percent: '1.0-2'}}</td>
+  <!-- #enddocregion number -->
+
+</tr></table>
diff --git a/aio/content/examples/ajs-quick-reference/src/app/app.component.ts b/aio/content/examples/ajs-quick-reference/src/app/app.component.ts
new file mode 100644
index 000000000000..6c5de8624e44
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+import { MovieService } from './movie.service';
+import { IMovie } from './movie';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.css' ],
+  providers: [ MovieService ]
+})
+export class AppComponent {
+
+  angularDocsUrl = 'https://angular.io/';
+  colorPreference = 'red';
+  eventType = '<not clicked yet>';
+  isActive = true;
+  isImportant = true;
+  movie: IMovie = null;
+  movies: IMovie[] = [];
+  showImage = true;
+  title = 'AngularJS to Angular Quick Ref Cookbook';
+  toggleImage(event: UIEvent) {
+    this.showImage = !this.showImage;
+    this.eventType = (event && event.type) || 'not provided';
+  }
+
+  constructor(movieService: MovieService) {
+    this.movies = movieService.getMovies();
+    this.movie = this.movies[0];
+  }
+}
diff --git a/aio/content/examples/ajs-quick-reference/src/app/app.module.1.ts b/aio/content/examples/ajs-quick-reference/src/app/app.module.1.ts
new file mode 100644
index 000000000000..5b240201861c
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.module.1.ts
@@ -0,0 +1,12 @@
+// #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/ajs-quick-reference/src/app/app.module.ts b/aio/content/examples/ajs-quick-reference/src/app/app.module.ts
new file mode 100644
index 000000000000..1dc46ad17c7d
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.module.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+
+import { AppComponent }  from './app.component';
+import { MovieListComponent } from './movie-list.component';
+import { AppRoutingModule } from './app-routing.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    AppRoutingModule
+  ],
+  declarations: [
+    AppComponent,
+    MovieListComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/ajs-quick-reference/src/app/date.pipe.ts b/aio/content/examples/ajs-quick-reference/src/app/date.pipe.ts
new file mode 100644
index 000000000000..e1421fa5300e
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/date.pipe.ts
@@ -0,0 +1,14 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Injectable()
+// #docregion date-pipe
+@Pipe({name: 'date', pure: true})
+export class StringSafeDatePipe extends DatePipe implements PipeTransform {
+ transform(value: any, format: string): string {
+   value = typeof value === 'string' ?
+           Date.parse(value) : value;
+   return super.transform(value, format);
+ }
+}
+// #enddocregion date-pipe
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.css b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.css
new file mode 100644
index 000000000000..a3d5bf81614a
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.css
@@ -0,0 +1,57 @@
+div {
+  font-family:Arial, Helvetica, sans-serif;
+  margin:20px;
+}
+
+table {
+  font-family:Arial, Helvetica, sans-serif;
+  color:#666;
+  font-size:14px;
+  text-shadow: 1px 1px 0 #fff;
+  margin:20px;
+  border:#ccc 1px solid;
+
+  -moz-border-radius:3px;
+  -webkit-border-radius:3px;
+  border-radius:3px;
+}
+table th {
+  padding:21px 25px 22px 25px;
+  border-top:1px solid #fafafa;
+  border-bottom:1px solid #e0e0e0;
+  border-left: 1px solid #e0e0e0;
+  font-weight: bold;
+}
+table th:first-child {
+  text-align: left;
+  padding-left:20px;
+  border-left: 0;
+}
+table tr {
+  text-align: center;
+  padding-left:20px;
+}
+table td:first-child {
+  text-align: left;
+  padding-left:20px;
+  border-left: 0;
+}
+table td {
+  padding:18px;
+  border-top: 1px solid #ffffff;
+  border-bottom:1px solid #e0e0e0;
+  border-left: 1px solid #e0e0e0;
+}
+table tr:last-child td {
+  border-bottom:0;
+}
+table tr:last-child td:first-child {
+  -moz-border-radius-bottomleft:3px;
+  -webkit-border-bottom-left-radius:3px;
+  border-bottom-left-radius:3px;
+}
+table tr:last-child td:last-child {
+  -moz-border-radius-bottomright:3px;
+  -webkit-border-bottom-right-radius:3px;
+  border-bottom-right-radius:3px;
+}
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
new file mode 100644
index 000000000000..9de98806d757
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
@@ -0,0 +1,78 @@
+<!-- Filter the Movie Title   -->
+<div>
+  <h2>Movie List</h2>
+  <div>Who is your favorite hero?</div>
+  <div>
+    <!-- #docregion ngModel -->
+    <input [(ngModel)]="favoriteHero" />
+    <!-- #enddocregion ngModel -->
+
+    <!-- #docregion ngSwitch-->
+    <span [ngSwitch]="favoriteHero &&
+                   checkMovieHero(favoriteHero)">
+      <p *ngSwitchCase="true">
+        Excellent choice!
+      </p>
+      <p *ngSwitchCase="false">
+        No movie, sorry!
+      </p>
+      <p *ngSwitchDefault>
+        Please enter your favorite hero.
+      </p>
+    </span>
+    <!-- #enddocregion ngSwitch-->
+  </div>
+</div>
+
+<!-- #docregion hidden -->
+<h3 [hidden]="!favoriteHero">
+  <!-- #docregion interpolation -->
+  Your favorite hero is: {{favoriteHero}}
+  <!-- #enddocregion interpolation -->
+</h3>
+<!-- #enddocregion hidden -->
+
+<div>
+<!-- #docregion ngIf -->
+  <table *ngIf="movies.length">
+<!-- #enddocregion ngIf -->
+    <thead>
+      <tr>
+        <th>
+          <button (click)="toggleImage()">
+            {{showImage ? "Hide" : "Show"}} Poster
+          </button>
+        </th>
+        <th>Title</th>
+        <th>Hero</th>
+        <th>Release Date</th>
+        <th>Rating</th>
+        <th>Price</th>
+        <th>Star rating</th>
+        <th>Approval rating</th>
+      </tr>
+    </thead>
+    <tbody>
+  <!-- #docregion ngFor -->
+      <tr *ngFor="let movie of movies">
+  <!-- #enddocregion ngFor -->
+        <td>
+          <img [hidden]="!showImage || !movie.imageurl"
+                [style.height.px]="50"
+                [style.margin.px]="2"
+                [src]="movie.imageurl"
+                [title]="movie.title">
+        </td>
+        <td>{{movie.title}}</td>
+        <td>{{movie.hero}}</td>
+        <td>{{movie.releaseDate | date}}</td>
+        <td>{{movie.mpaa | uppercase}}</td>
+  <!-- #docregion currency -->
+        <td>{{movie.price | currency:'USD':true}}</td>
+  <!-- #enddocregion currency -->
+        <td>{{movie.starRating | number:'1.1-2'}}</td>
+        <td>{{movie.approvalRating | percent: '1.0-0'}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
new file mode 100644
index 000000000000..9955550c8d12
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
@@ -0,0 +1,42 @@
+/* tslint:disable:no-unused-variable */
+// #docplaster
+// #docregion import
+import { Component } from '@angular/core';
+// #enddocregion import
+import { IMovie } from './movie';
+import { MovieService } from './movie.service';
+
+// #docregion component
+@Component({
+  selector: 'app-movie-list',
+  templateUrl: './movie-list.component.html',
+// #docregion style-url
+  styleUrls: [ './movie-list.component.css' ],
+// #enddocregion style-url
+})
+// #enddocregion component
+// #docregion class
+export class MovieListComponent {
+// #enddocregion class
+  favoriteHero: string;
+  showImage = false;
+  movies: IMovie[];
+
+// #docregion di
+  constructor(movieService: MovieService) {
+// #enddocregion di
+    this.movies = movieService.getMovies();
+// #docregion di
+  }
+// #enddocregion di
+
+  toggleImage(): void {
+    this.showImage = !this.showImage;
+  }
+
+  checkMovieHero(value: string): boolean {
+    return this.movies.filter(movie => movie.hero === value).length > 0 ;
+  }
+// #docregion class
+}
+// #enddocregion class
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts b/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts
new file mode 100644
index 000000000000..887774d5706d
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+
+import { IMovie } from './movie';
+
+@Injectable()
+export class MovieService {
+  getMovies(): IMovie[] {
+    return [
+      {
+        hero: 'Celeritas',
+        imageurl: 'assets/images/hero.png',
+        movieId: 1,
+        mpaa: 'pg-13',
+        releaseDate: '2015-12-19T00:00:00',
+        title: 'Celeritas Reigns',
+        price: 12.95,
+        starRating: 4.925,
+        approvalRating: .97
+      },
+      {
+        hero: 'Mr. Nice',
+        imageurl: 'assets/images/villain.png',
+        movieId: 2,
+        mpaa: 'pg-13',
+        releaseDate: '2015-12-18T00:00:00',
+        title: 'No More Mr. Nice Guy',
+        price: 14.95,
+        starRating: 4.6,
+        approvalRating: .94
+      },
+      {
+        hero: 'Angular',
+        imageurl: 'assets/images/ng-logo.png',
+        movieId: 3,
+        mpaa: 'pg-13',
+        releaseDate: '2015-12-17T00:00:00',
+        title: 'Angular to the Rescue',
+        price: 15.95,
+        starRating: 4.98,
+        approvalRating: .9995
+      }
+    ];
+  }
+}
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie.ts b/aio/content/examples/ajs-quick-reference/src/app/movie.ts
new file mode 100644
index 000000000000..0e6f3215200b
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie.ts
@@ -0,0 +1,12 @@
+/* Defines the movie entity */
+export interface IMovie {
+  approvalRating: number;
+  hero: string;
+  imageurl: string;
+  movieId: number;
+  mpaa: string;
+  price: number;
+  releaseDate: string;
+  starRating: number;
+  title: string;
+}
diff --git a/aio/content/examples/ajs-quick-reference/src/assets/images/hero.png b/aio/content/examples/ajs-quick-reference/src/assets/images/hero.png
new file mode 100644
index 000000000000..2a128ac3679a
Binary files /dev/null and b/aio/content/examples/ajs-quick-reference/src/assets/images/hero.png differ
diff --git a/aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png b/aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png
new file mode 100644
index 000000000000..1e488b1a4946
Binary files /dev/null and b/aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png differ
diff --git a/aio/content/examples/ajs-quick-reference/src/assets/images/villain.png b/aio/content/examples/ajs-quick-reference/src/assets/images/villain.png
new file mode 100644
index 000000000000..26697d1a42ff
Binary files /dev/null and b/aio/content/examples/ajs-quick-reference/src/assets/images/villain.png differ
diff --git a/aio/content/examples/ajs-quick-reference/src/index.html b/aio/content/examples/ajs-quick-reference/src/index.html
new file mode 100644
index 000000000000..5aafc885c9eb
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/">
+    <meta charset="UTF-8">
+    <title>AngularJS to Angular Quick Reference</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/ajs-quick-reference/src/main.ts b/aio/content/examples/ajs-quick-reference/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ajs-quick-reference/stackblitz.json b/aio/content/examples/ajs-quick-reference/stackblitz.json
new file mode 100644
index 000000000000..6b91b367d27f
--- /dev/null
+++ b/aio/content/examples/ajs-quick-reference/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "AngularJS to Angular Quick Reference",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags":["cookbook", "angularjs"]
+}
diff --git a/aio/content/examples/animations/e2e/src/app.e2e-spec.ts b/aio/content/examples/animations/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..524335223d1e
--- /dev/null
+++ b/aio/content/examples/animations/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,351 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { logging, promise } from 'selenium-webdriver';
+
+/**
+ * The tests here basically just checking that the end styles
+ * of each animation are in effect.
+ *
+ * Relies on the Angular testability only becoming stable once
+ * animation(s) have finished.
+ *
+ * Ideally we'd use https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations
+ * but they're not supported in Chrome at the moment. The upcoming nganimate polyfill
+ * may also add some introspection support.
+ */
+describe('Animation Tests', () => {
+
+  const INACTIVE_COLOR = 'rgba(238, 238, 238, 1)';
+  const ACTIVE_COLOR = 'rgba(207, 216, 220, 1)';
+  const NO_TRANSFORM_MATRIX_REGEX = /matrix\(1,\s*0,\s*0,\s*1,\s*0,\s*0\)/;
+
+  beforeEach(() => {
+    browser.get('');
+  });
+
+  describe('basic states', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('app-hero-list-basic'));
+    });
+
+    it('animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('styles inline in transitions', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(function() {
+      host = element(by.css('app-hero-list-inline-styles'));
+    });
+
+    it('are not kept after animation', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('combined transition syntax', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('app-hero-list-combined-transitions'));
+    });
+
+    it('animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('two-way transition syntax', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('app-hero-list-twoway'));
+    });
+
+    it('animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('enter & leave', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('app-hero-list-enter-leave'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('enter & leave & states', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(function() {
+      host = element(by.css('app-hero-list-enter-leave-states'));
+    });
+
+    it('adds and removes and animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('auto style calc', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(function() {
+      host = element(by.css('app-hero-list-auto'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('height')).toBe('50px');
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('different timings', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('app-hero-list-timings'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+      expect(li.getCssValue('opacity')).toMatch('1');
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('multiple keyframes', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('app-hero-list-multistep'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+      expect(li.getCssValue('opacity')).toMatch('1');
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('parallel groups', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('app-hero-list-groups'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+      expect(li.getCssValue('opacity')).toMatch('1');
+
+      removeHero(700);
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('adding active heroes', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('app-hero-list-basic'));
+    });
+
+    it('animates between active and inactive', () => {
+      addActiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+    });
+  });
+
+  describe('callbacks', () => {
+    it('fires a callback on start and done', () => {
+      addActiveHero();
+      browser.manage().logs().get(logging.Type.BROWSER)
+        .then((logs: logging.Entry[]) => {
+          const animationMessages = logs.filter((log) => {
+            return log.message.indexOf('Animation') !== -1 ? true : false;
+          });
+
+          expect(animationMessages.length).toBeGreaterThan(0);
+        });
+    });
+  });
+
+  function addActiveHero(sleep?: number) {
+    sleep = sleep || 500;
+    element(by.buttonText('Add active hero')).click();
+    browser.driver.sleep(sleep);
+  }
+
+  function addInactiveHero(sleep?: number) {
+    sleep = sleep || 500;
+    element(by.buttonText('Add inactive hero')).click();
+    browser.driver.sleep(sleep);
+  }
+
+  function removeHero(sleep?: number) {
+    sleep = sleep || 500;
+    element(by.buttonText('Remove hero')).click();
+    browser.driver.sleep(sleep);
+  }
+
+  function getScaleX(el: ElementFinder) {
+    return Promise.all([
+      getBoundingClientWidth(el),
+      getOffsetWidth(el)
+    ]).then(function(promiseResolutions) {
+      let clientWidth = promiseResolutions[0];
+      let offsetWidth = promiseResolutions[1];
+      return clientWidth / offsetWidth;
+    });
+  }
+
+  function getBoundingClientWidth(el: ElementFinder) {
+    return browser.executeScript(
+      'return arguments[0].getBoundingClientRect().width',
+      el.getWebElement()
+    ) as PromiseLike<number>;
+  }
+
+  function getOffsetWidth(el: ElementFinder) {
+    return browser.executeScript(
+      'return arguments[0].offsetWidth',
+      el.getWebElement()
+    ) as PromiseLike<number>;
+  }
+});
diff --git a/modules/angular2/docs/core/06_viewport_directive.md b/aio/content/examples/animations/example-config.json
similarity index 100%
rename from modules/angular2/docs/core/06_viewport_directive.md
rename to aio/content/examples/animations/example-config.json
diff --git a/aio/content/examples/animations/src/app/app.module.ts b/aio/content/examples/animations/src/app/app.module.ts
new file mode 100644
index 000000000000..b1ac87cca20a
--- /dev/null
+++ b/aio/content/examples/animations/src/app/app.module.ts
@@ -0,0 +1,43 @@
+// #docplaster
+import { NgModule } from '@angular/core';
+// #docregion animations-module
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+// #enddocregion animations-module
+
+import { HeroTeamBuilderComponent } from './hero-team-builder.component';
+import { HeroListBasicComponent } from './hero-list-basic.component';
+import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
+import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
+import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component';
+import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component';
+import { HeroListTwowayComponent } from './hero-list-twoway.component';
+import { HeroListAutoComponent } from './hero-list-auto.component';
+import { HeroListGroupsComponent } from './hero-list-groups.component';
+import { HeroListMultistepComponent } from './hero-list-multistep.component';
+import { HeroListTimingsComponent } from './hero-list-timings.component';
+// #docregion animations-module
+
+@NgModule({
+  imports: [ BrowserModule, BrowserAnimationsModule ],
+  // ... more stuff ...
+// #enddocregion animations-module
+  declarations: [
+    HeroTeamBuilderComponent,
+    HeroListBasicComponent,
+    HeroListInlineStylesComponent,
+    HeroListCombinedTransitionsComponent,
+    HeroListTwowayComponent,
+    HeroListEnterLeaveComponent,
+    HeroListEnterLeaveStatesComponent,
+    HeroListAutoComponent,
+    HeroListTimingsComponent,
+    HeroListMultistepComponent,
+    HeroListGroupsComponent
+  ],
+  bootstrap: [ HeroTeamBuilderComponent ]
+// #docregion animations-module
+})
+export class AppModule { }
+// #enddocregion animations-module
+
diff --git a/aio/content/examples/animations/src/app/hero-list-auto.component.ts b/aio/content/examples/animations/src/app/hero-list-auto.component.ts
new file mode 100644
index 000000000000..97a5ff99dece
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list-auto.component.ts
@@ -0,0 +1,47 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+
+import { Hero } from './hero.service';
+
+@Component({
+  selector: 'app-hero-list-auto',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@shrinkOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+
+  /* When the element leaves (transition "in => void" occurs),
+   * get the element's current computed height and animate
+   * it down to 0.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('shrinkOut', [
+      state('in', style({height: '*'})),
+      transition('* => void', [
+        style({height: '*'}),
+        animate(250, style({height: 0}))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListAutoComponent {
+   @Input() heroes: Hero[];
+}
diff --git a/aio/content/examples/animations/src/app/hero-list-basic.component.ts b/aio/content/examples/animations/src/app/hero-list-basic.component.ts
new file mode 100644
index 000000000000..ce23628d6f01
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list-basic.component.ts
@@ -0,0 +1,70 @@
+// #docplaster
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+// #enddocregion imports
+
+import { Hero } from './hero.service';
+
+@Component({
+  selector: 'app-hero-list-basic',
+  // #enddocregion
+  /* The click event calls hero.toggleState(), which
+   * causes the state of that hero to switch from
+   * active to inactive or vice versa.
+   */
+  // #docregion
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@heroState]="hero.state"
+          (click)="hero.toggleState()">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  // #enddocregion
+  /**
+   * Define two states, "inactive" and "active", and the end
+   * styles that apply whenever the element is in those states.
+   * Then define animations for transitioning between the states,
+   * one in each direction
+   */
+  // #docregion
+  // #docregion animationdef
+  animations: [
+    trigger('heroState', [
+      // #docregion states
+      state('inactive', style({
+        backgroundColor: '#eee',
+        transform: 'scale(1)'
+      })),
+      state('active',   style({
+        backgroundColor: '#cfd8dc',
+        transform: 'scale(1.1)'
+      })),
+      // #enddocregion states
+      // #docregion transitions
+      transition('inactive => active', animate('100ms ease-in')),
+      transition('active => inactive', animate('100ms ease-out'))
+      // #enddocregion transitions
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListBasicComponent {
+   @Input() heroes: Hero[];
+}
diff --git a/aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts b/aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts
new file mode 100644
index 000000000000..2811254c8154
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts
@@ -0,0 +1,59 @@
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+// #enddocregion imports
+
+import { Hero } from './hero.service';
+
+@Component({
+ selector: 'app-hero-list-combined-transitions',
+ // #docregion template
+ template: `
+   <ul>
+     <li *ngFor="let hero of heroes"
+         [@heroState]="hero.state"
+         (click)="hero.toggleState()">
+       {{hero.name}}
+     </li>
+   </ul>
+ `,
+ // #enddocregion template
+ styleUrls: ['./hero-list.component.css'],
+ /*
+  * Define two states, "inactive" and "active", and the end
+  * styles that apply whenever the element is in those states.
+  * Then define an animated transition between these two
+  * states, in *both* directions.
+  */
+ // #docregion animationdef
+ animations: [
+   trigger('heroState', [
+     state('inactive', style({
+       backgroundColor: '#eee',
+       transform: 'scale(1)'
+     })),
+     state('active',   style({
+       backgroundColor: '#cfd8dc',
+       transform: 'scale(1.1)'
+     })),
+     // #docregion transitions
+     transition('inactive => active, active => inactive',
+      animate('100ms ease-out'))
+     // #enddocregion transitions
+   ])
+ ]
+ // #enddocregion animationdef
+})
+export class HeroListCombinedTransitionsComponent {
+  @Input() heroes: Hero[];
+}
diff --git a/aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts b/aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts
new file mode 100644
index 000000000000..291234dab9a1
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts
@@ -0,0 +1,63 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+
+import { Hero } from './hero.service';
+
+@Component({
+  selector: 'app-hero-list-enter-leave-states',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          (click)="hero.toggleState()"
+          [@heroState]="hero.state">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  /* The elements here have two possible states based
+   * on the hero state, "active", or "inactive". We animate
+   * six transitions: Between the two states in both directions,
+   * and between each state and void. With this we can animate
+   * the enter and leave of elements differently based on which
+   * state they are in when they are added and removed.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('heroState', [
+      state('inactive', style({transform: 'translateX(0) scale(1)'})),
+      state('active',   style({transform: 'translateX(0) scale(1.1)'})),
+      transition('inactive => active', animate('100ms ease-in')),
+      transition('active => inactive', animate('100ms ease-out')),
+      transition('void => inactive', [
+        style({transform: 'translateX(-100%) scale(1)'}),
+        animate(100)
+      ]),
+      transition('inactive => void', [
+        animate(100, style({transform: 'translateX(100%) scale(1)'}))
+      ]),
+      transition('void => active', [
+        style({transform: 'translateX(0) scale(0)'}),
+        animate(200)
+      ]),
+      transition('active => void', [
+        animate(200, style({transform: 'translateX(0) scale(0)'}))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListEnterLeaveStatesComponent {
+   @Input() heroes: Hero[];
+}
diff --git a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
new file mode 100644
index 000000000000..0a888698c315
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
@@ -0,0 +1,51 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+
+import { Hero } from './hero.service';
+
+@Component({
+  selector: 'app-hero-list-enter-leave',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@flyInOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition. The element enters from
+   * the left and leaves to the right using translateX.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({transform: 'translateX(0)'})),
+      transition('void => *', [
+        style({transform: 'translateX(-100%)'}),
+        animate(100)
+      ]),
+      transition('* => void', [
+        animate(100, style({transform: 'translateX(100%)'}))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListEnterLeaveComponent {
+   @Input() heroes: Hero[];
+}
diff --git a/aio/content/examples/animations/src/app/hero-list-groups.component.ts b/aio/content/examples/animations/src/app/hero-list-groups.component.ts
new file mode 100644
index 000000000000..d17b47d213d8
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list-groups.component.ts
@@ -0,0 +1,80 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+  group
+} from '@angular/animations';
+
+import { Hero } from './hero.service';
+
+@Component({
+  selector: 'app-hero-list-groups',
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@flyInOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  styleUrls: ['./hero-list.component.css'],
+  styles: [`
+    li {
+      padding: 0 !important;
+      text-align: center;
+    }
+  `],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition.
+   *
+   * The transitions have  *parallel group* that allow
+   * animating several properties at the same time but
+   * with different timing configurations. On enter
+   * (void => *) we start the opacity animation 0.1s
+   * earlier than the translation/width animation.
+   * On leave (* => void) we do the opposite -
+   * the translation/width animation begins immediately
+   * and the opacity animation 0.1s later.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({width: 120, transform: 'translateX(0)', opacity: 1})),
+      transition('void => *', [
+        style({width: 10, transform: 'translateX(50px)', opacity: 0}),
+        group([
+          animate('0.3s 0.1s ease', style({
+            transform: 'translateX(0)',
+            width: 120
+          })),
+          animate('0.3s ease', style({
+            opacity: 1
+          }))
+        ])
+      ]),
+      transition('* => void', [
+        group([
+          animate('0.3s ease', style({
+            transform: 'translateX(50px)',
+            width: 10
+          })),
+          animate('0.3s 0.2s ease', style({
+            opacity: 0
+          }))
+        ])
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListGroupsComponent {
+   @Input() heroes: Hero[];
+}
diff --git a/aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts b/aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts
new file mode 100644
index 000000000000..43fe2b7ce308
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts
@@ -0,0 +1,60 @@
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input,
+} from '@angular/core';
+import {
+  trigger,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+// #enddocregion imports
+
+import { Hero } from './hero.service';
+
+@Component({
+ selector: 'app-hero-list-inline-styles',
+ // #docregion template
+ template: `
+   <ul>
+     <li *ngFor="let hero of heroes"
+         [@heroState]="hero.state"
+         (click)="hero.toggleState()">
+       {{hero.name}}
+     </li>
+   </ul>
+ `,
+ // #enddocregion template
+ styleUrls: ['./hero-list.component.css'],
+ /**
+  * Define two states, "inactive" and "active", and the end
+  * styles that apply whenever the element is in those states.
+  * Then define an animation for the inactive => active transition.
+  * This animation has no end styles, but only styles that are
+  * defined inline inside the transition and thus are only kept
+  * as long as the animation is running.
+  */
+ // #docregion animationdef
+ animations: [
+   trigger('heroState', [
+     // #docregion transitions
+     transition('inactive => active', [
+       style({
+         backgroundColor: '#cfd8dc',
+         transform: 'scale(1.3)'
+       }),
+       animate('80ms ease-in', style({
+         backgroundColor: '#eee',
+         transform: 'scale(1)'
+       }))
+     ]),
+     // #enddocregion transitions
+   ])
+ ]
+ // #enddocregion animationdef
+})
+export class HeroListInlineStylesComponent {
+  @Input() heroes: Hero[];
+}
diff --git a/aio/content/examples/animations/src/app/hero-list-multistep.component.ts b/aio/content/examples/animations/src/app/hero-list-multistep.component.ts
new file mode 100644
index 000000000000..7e77bff1a466
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list-multistep.component.ts
@@ -0,0 +1,71 @@
+import {
+  Component,
+  Input,
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+  keyframes,
+  AnimationEvent
+} from '@angular/animations';
+
+import { Hero } from './hero.service';
+
+@Component({
+  selector: 'app-hero-list-multistep',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          (@flyInOut.start)="animationStarted($event)"
+          (@flyInOut.done)="animationDone($event)"
+          [@flyInOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition. Each transition is
+   * defined in terms of multiple keyframes, to give it
+   * a bounce effect.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({transform: 'translateX(0)'})),
+      transition('void => *', [
+        animate(300, keyframes([
+          style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
+          style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
+          style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
+        ]))
+      ]),
+      transition('* => void', [
+        animate(300, keyframes([
+          style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
+          style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
+          style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
+        ]))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListMultistepComponent {
+   @Input() heroes: Hero[];
+
+  animationStarted(event: AnimationEvent) {
+    console.warn('Animation started: ', event);
+  }
+
+  animationDone(event: AnimationEvent) {
+    console.warn('Animation done: ', event);
+  }
+}
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
new file mode 100644
index 000000000000..b410c22cb93d
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list-timings.component.ts
@@ -0,0 +1,58 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+
+import { Hero } from './hero.service';
+
+@Component({
+  selector: 'app-hero-list-timings',
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@flyInOut]="'in'"
+          (click)="hero.toggleState()">
+         {{hero.name}}
+      </li>
+    </ul>
+  `,
+  styleUrls: ['./hero-list.component.css'],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition. The element enters from
+   * the left and leaves to the right using translateX,
+   * and fades in/out using opacity. We use different easings
+   * for enter and leave.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({opacity: 1, transform: 'translateX(0)'})),
+      transition('void => *', [
+        style({
+          opacity: 0,
+          transform: 'translateX(-100%)'
+        }),
+        animate('0.2s ease-in')
+      ]),
+      transition('* => void', [
+        animate('0.2s 0.1s ease-out', style({
+          opacity: 0,
+          transform: 'translateX(100%)'
+        }))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListTimingsComponent {
+   @Input() heroes: Hero[];
+}
diff --git a/aio/content/examples/animations/src/app/hero-list-twoway.component.ts b/aio/content/examples/animations/src/app/hero-list-twoway.component.ts
new file mode 100644
index 000000000000..ef0be5fce7e9
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list-twoway.component.ts
@@ -0,0 +1,58 @@
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+// #enddocregion imports
+
+import { Hero } from './hero.service';
+
+@Component({
+ selector: 'app-hero-list-twoway',
+ // #docregion template
+ template: `
+   <ul>
+     <li *ngFor="let hero of heroes"
+         [@heroState]="hero.state"
+         (click)="hero.toggleState()">
+       {{hero.name}}
+     </li>
+   </ul>
+ `,
+ // #enddocregion template
+ styleUrls: ['./hero-list.component.css'],
+ /*
+  * Define two states, "inactive" and "active", and the end
+  * styles that apply whenever the element is in those states.
+  * Then define an animated transition between these two
+  * states, in *both* directions.
+  */
+ // #docregion animationdef
+ animations: [
+   trigger('heroState', [
+     state('inactive', style({
+       backgroundColor: '#eee',
+       transform: 'scale(1)'
+     })),
+     state('active',   style({
+       backgroundColor: '#cfd8dc',
+       transform: 'scale(1.1)'
+     })),
+     // #docregion transitions
+     transition('inactive <=> active', animate('100ms ease-out'))
+     // #enddocregion transitions
+   ])
+ ]
+ // #enddocregion animationdef
+})
+export class HeroListTwowayComponent {
+  @Input() heroes: Hero[];
+}
diff --git a/aio/content/examples/animations/src/app/hero-list.component.css b/aio/content/examples/animations/src/app/hero-list.component.css
new file mode 100644
index 000000000000..b256521e49ce
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-list.component.css
@@ -0,0 +1,27 @@
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: block;
+  width: 120px;
+  line-height: 50px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  background-color: #eee;
+  border-radius: 4px;
+  margin: 10px;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.active {
+  background-color: #cfd8dc;
+  transform: scale(1.1);
+}
+.inactive {
+  background-color: #eee;
+  transform: scale(1);
+}
diff --git a/aio/content/examples/animations/src/app/hero-team-builder.component.ts b/aio/content/examples/animations/src/app/hero-team-builder.component.ts
new file mode 100644
index 000000000000..8a1904ea4f6f
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero-team-builder.component.ts
@@ -0,0 +1,99 @@
+import { Component } from '@angular/core';
+
+import { Hero, HeroService } from './hero.service';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div class="buttons">
+      <button [disabled]="!heroService.canAdd()" (click)="heroService.addInactive()">Add inactive hero</button>
+      <button [disabled]="!heroService.canAdd()" (click)="heroService.addActive()">Add active hero</button>
+      <button [disabled]="!heroService.canRemove()" (click)="heroService.remove()">Remove hero</button>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <h4>Basic State</h4>
+        <p>Switch between active/inactive on click.</p>
+        <app-hero-list-basic [heroes]="heroes"></app-hero-list-basic>
+      </div>
+      <div class="column">
+        <h4>Styles inline in transitions</h4>
+        <p>Animated effect on click, no persistend end styles.</p>
+        <app-hero-list-inline-styles [heroes]="heroes"></app-hero-list-inline-styles>
+      </div>
+      <div class="column">
+        <h4>Combined transition syntax</h4>
+        <p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
+        <app-hero-list-combined-transitions [heroes]="heroes"></app-hero-list-combined-transitions>
+      </div>
+      <div class="column">
+        <h4>Two-way transition syntax</h4>
+        <p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
+        <app-hero-list-twoway [heroes]="heroes"></app-hero-list-twoway>
+      </div>
+      <div class="column">
+        <h4>Enter & Leave</h4>
+        <p>Enter and leave animations using the void state.</p>
+        <app-hero-list-enter-leave [heroes]="heroes"></app-hero-list-enter-leave>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <h4>Enter & Leave & States</h4>
+        <p>
+          Enter and leave animations combined with active/inactive state animations.
+          Different enter and leave transitions depending on state.
+        </p>
+        <app-hero-list-enter-leave-states [heroes]="heroes"></app-hero-list-enter-leave-states>
+      </div>
+      <div class="column">
+        <h4>Auto Style Calc</h4>
+        <p>Leave animation from the current computed height using the auto-style value *.</p>
+        <app-hero-list-auto [heroes]="heroes"></app-hero-list-auto>
+      </div>
+      <div class="column">
+        <h4>Different Timings</h4>
+        <p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
+        <app-hero-list-timings [heroes]="heroes"></app-hero-list-timings>
+      </div>
+      <div class="column">
+        <h4>Multiple Keyframes</h4>
+        <p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
+        <app-hero-list-multistep [heroes]="heroes"></app-hero-list-multistep>
+      </div>
+      <div class="column">
+        <h4>Parallel Groups</h4>
+        <p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
+        <app-hero-list-groups [heroes]="heroes"></app-hero-list-groups>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .buttons {
+      text-align: center;
+    }
+    button {
+      padding: 1.5em 3em;
+    }
+    .columns {
+      display: flex;
+      flex-direction: row;
+    }
+    .column {
+      flex: 1;
+      padding: 10px;
+    }
+    .column p {
+      min-height: 6em;
+    }
+  `],
+  providers: [HeroService]
+})
+export class HeroTeamBuilderComponent {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) {
+    this.heroes = heroService.heroes;
+  }
+}
diff --git a/aio/content/examples/animations/src/app/hero.service.ts b/aio/content/examples/animations/src/app/hero.service.ts
new file mode 100644
index 000000000000..c0053d018579
--- /dev/null
+++ b/aio/content/examples/animations/src/app/hero.service.ts
@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+
+// #docregion hero
+export class Hero {
+  constructor(public name: string, public state = 'inactive') { }
+
+  toggleState() {
+    this.state = this.state === 'active' ? 'inactive' : 'active';
+  }
+}
+// #enddocregion hero
+
+const ALL_HEROES = [
+  'Windstorm',
+  'RubberMan',
+  'Bombasto',
+  'Magneta',
+  'Dynama',
+  'Narco',
+  'Celeritas',
+  'Dr IQ',
+  'Magma',
+  'Tornado',
+  'Mr. Nice'
+].map(name => new Hero(name));
+
+@Injectable()
+export class HeroService {
+
+  heroes: Hero[] = [];
+
+  canAdd() {
+    return this.heroes.length < ALL_HEROES.length;
+  }
+
+  canRemove() {
+    return this.heroes.length > 0;
+  }
+
+  addActive(active = true) {
+    let hero = ALL_HEROES[this.heroes.length];
+    hero.state = active ? 'active' : 'inactive';
+    this.heroes.push(hero);
+  }
+
+  addInactive() {
+    this.addActive(false);
+  }
+
+  remove() {
+    this.heroes.length -= 1;
+  }
+
+}
diff --git a/aio/content/examples/animations/src/index.html b/aio/content/examples/animations/src/index.html
new file mode 100644
index 000000000000..fcd0ca2a3ca3
--- /dev/null
+++ b/aio/content/examples/animations/src/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+    <meta charset="UTF-8">
+    <title>Animations</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
+    <app-root></app-root>
+    <button style="visibility: hidden;">External button for E2E test</button>
+    <ul style="visibility: hidden;">
+      <li>External list for E2E test</li>
+    </ul>
+  </body>
+
+</html>
diff --git a/aio/content/examples/animations/src/main.ts b/aio/content/examples/animations/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/animations/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/animations/stackblitz.json b/aio/content/examples/animations/stackblitz.json
new file mode 100644
index 000000000000..4fface319e52
--- /dev/null
+++ b/aio/content/examples/animations/stackblitz.json
@@ -0,0 +1,7 @@
+{
+  "description": "Angular Animations",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ]
+}
diff --git a/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts b/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..8ad5c9ab741f
--- /dev/null
+++ b/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,100 @@
+'use strict'; // necessary for es6 output in node
+
+import { protractor, browser, element, by, ElementFinder } from 'protractor';
+
+const nameSuffix = 'X';
+
+class Hero {
+  id: number;
+  name: string;
+}
+
+describe('Architecture', () => {
+
+  const expectedTitle = 'Architecture of Angular';
+  const expectedH2 = ['Hero List', 'Sales Tax Calculator'];
+
+  beforeAll(() => browser.get(''));
+
+  it(`has title '${expectedTitle}'`, () => {
+    expect(browser.getTitle()).toEqual(expectedTitle);
+  });
+
+  it(`has h2 '${expectedH2}'`, () => {
+    let h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
+    expect(h2).toEqual(expectedH2);
+  });
+
+  describe('Hero', heroTests);
+  describe('Salex tax', salesTaxTests);
+});
+
+function heroTests() {
+
+  const targetHero: Hero = { id: 2, name: 'Mr. Nice' };
+
+  it('has the right number of heroes', () => {
+    let page = getPageElts();
+    expect(page.heroes.count()).toEqual(3);
+  });
+
+  it('has no hero details initially', function () {
+    let page = getPageElts();
+    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+  });
+
+  it('shows selected hero details', async () => {
+    await element(by.cssContainingText('li', targetHero.name)).click();
+    let page = getPageElts();
+    let hero = await heroFromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name);
+  });
+
+  it(`shows updated hero name in details`, async () => {
+    let input = element.all(by.css('input')).first();
+    input.sendKeys(nameSuffix);
+    let page = getPageElts();
+    let hero = await heroFromDetail(page.heroDetail);
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName);
+  });
+}
+
+function salesTaxTests() {
+  it('has no sales tax initially', function () {
+    let page = getPageElts();
+    expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
+  });
+
+  it('shows sales tax', async function () {
+    let page = getPageElts();
+    page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
+    expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
+  });
+}
+
+// Helper functions
+
+function getPageElts() {
+  return {
+    heroes: element.all(by.css('app-root li')),
+    heroDetail: element(by.css('app-root app-hero-detail')),
+    salesTaxAmountInput: element(by.css('app-root app-sales-tax input')),
+    salesTaxDetail: element(by.css('app-root app-sales-tax div'))
+  };
+}
+
+async function heroFromDetail(detail: ElementFinder): Promise<Hero> {
+  // Get hero id from the first <div>
+  // let _id = await detail.all(by.css('div')).first().getText();
+  let _id = await detail.all(by.css('div')).first().getText();
+  // Get name from the h2
+  // let _name = await detail.element(by.css('h4')).getText();
+  let _name = await detail.element(by.css('h4')).getText();
+  return {
+    id: +_id.substr(_id.indexOf(' ') + 1),
+    name: _name.substr(0, _name.lastIndexOf(' '))
+  };
+}
diff --git a/modules/angular2/docs/core/07_services.md b/aio/content/examples/architecture/example-config.json
similarity index 100%
rename from modules/angular2/docs/core/07_services.md
rename to aio/content/examples/architecture/example-config.json
diff --git a/aio/content/examples/architecture/src/app/app.component.ts b/aio/content/examples/architecture/src/app/app.component.ts
new file mode 100644
index 000000000000..b250b678a207
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/app.component.ts
@@ -0,0 +1,14 @@
+// #docregion import
+import { Component } from '@angular/core';
+// #enddocregion import
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <app-hero-list></app-hero-list>
+    <app-sales-tax></app-sales-tax>
+  `
+})
+// #docregion export
+export class AppComponent { }
+// #enddocregion export
diff --git a/aio/content/examples/architecture/src/app/app.module.ts b/aio/content/examples/architecture/src/app/app.module.ts
new file mode 100644
index 000000000000..f6e64beecdab
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/app.module.ts
@@ -0,0 +1,36 @@
+import { BrowserModule }       from '@angular/platform-browser';
+import { FormsModule }         from '@angular/forms';
+// #docregion imports
+import { NgModule }     from '@angular/core';
+import { AppComponent } from './app.component';
+// #enddocregion imports
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroListComponent }   from './hero-list.component';
+import { SalesTaxComponent }   from './sales-tax.component';
+import { HeroService }         from './hero.service';
+import { BackendService }      from './backend.service';
+import { Logger }              from './logger.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent,
+    HeroListComponent,
+    SalesTaxComponent
+  ],
+// #docregion providers
+  providers: [
+    BackendService,
+    HeroService,
+    Logger
+  ],
+// #enddocregion providers
+  bootstrap: [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export
diff --git a/aio/content/examples/architecture/src/app/backend.service.ts b/aio/content/examples/architecture/src/app/backend.service.ts
new file mode 100644
index 000000000000..c05a8fcb8af2
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/backend.service.ts
@@ -0,0 +1,25 @@
+import { Injectable, Type } from '@angular/core';
+
+import { Logger } from './logger.service';
+import { Hero } from './hero';
+
+const HEROES = [
+        new Hero('Windstorm', 'Weather mastery'),
+        new Hero('Mr. Nice', 'Killing them with kindness'),
+        new Hero('Magneta', 'Manipulates metallic objects')
+      ];
+
+@Injectable()
+export class BackendService {
+  constructor(private logger: Logger) {}
+
+  getAll(type: Type<any>): PromiseLike<any[]> {
+    if (type === Hero) {
+      // TODO: get from the database
+      return Promise.resolve<Hero[]>(HEROES);
+    }
+    let err = new Error('Cannot get object of this type');
+    this.logger.error(err);
+    throw err;
+  }
+}
diff --git a/aio/content/examples/architecture/src/app/hero-detail.component.html b/aio/content/examples/architecture/src/app/hero-detail.component.html
new file mode 100644
index 000000000000..8216ffb4f048
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/hero-detail.component.html
@@ -0,0 +1,10 @@
+<hr>
+<h4>{{hero.name}} Detail</h4>
+<div>Id: {{hero.id}}</div>
+<label>Name:
+  <!-- #docregion ngModel -->
+  <input [(ngModel)]="hero.name">
+  <!-- #enddocregion ngModel -->
+</label>
+<br />
+<label>Power: <input [(ngModel)]="hero.power"></label>
diff --git a/aio/content/examples/architecture/src/app/hero-detail.component.ts b/aio/content/examples/architecture/src/app/hero-detail.component.ts
new file mode 100644
index 000000000000..349c118bf1d5
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/hero-detail.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html'
+})
+export class HeroDetailComponent {
+  @Input() hero: Hero;
+}
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.1.html b/aio/content/examples/architecture/src/app/hero-list.component.1.html
new file mode 100644
index 000000000000..9533a287bc78
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/hero-list.component.1.html
@@ -0,0 +1,9 @@
+<!--#docregion binding  -->
+<li>{{hero.name}}</li>
+<app-hero-detail [hero]="selectedHero"></app-hero-detail>
+<li (click)="selectHero(hero)"></li>
+<!--#enddocregion binding -->
+
+<!--#docregion structural  -->
+<li *ngFor="let hero of heroes"></li>
+<app-hero-detail *ngIf="selectedHero"></app-hero-detail>
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.html b/aio/content/examples/architecture/src/app/hero-list.component.html
new file mode 100644
index 000000000000..8f0433fe54b8
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/hero-list.component.html
@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h2>Hero List</h2>
+
+<p><i>Pick a hero from the list</i></p>
+<ul>
+  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
+    {{hero.name}}
+  </li>
+</ul>
+
+<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.ts b/aio/content/examples/architecture/src/app/hero-list.component.ts
new file mode 100644
index 000000000000..4dc0b8e2f34a
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/hero-list.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit }   from '@angular/core';
+
+import { Hero }                from './hero';
+import { HeroService }         from './hero.service';
+
+// #docregion metadata, providers
+@Component({
+  selector:    'app-hero-list',
+  templateUrl: './hero-list.component.html',
+  providers:  [ HeroService ]
+})
+// #enddocregion providers
+// #docregion class
+export class HeroListComponent implements OnInit {
+  // #enddocregion metadata
+  heroes: Hero[];
+  selectedHero: Hero;
+
+  // #docregion ctor
+  constructor(private service: HeroService) { }
+  // #enddocregion ctor
+
+  ngOnInit() {
+    this.heroes = this.service.getHeroes();
+  }
+
+  selectHero(hero: Hero) { this.selectedHero = hero; }
+  // #docregion metadata
+}
diff --git a/aio/content/examples/architecture/src/app/hero.service.ts b/aio/content/examples/architecture/src/app/hero.service.ts
new file mode 100644
index 000000000000..493f064e408c
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/hero.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+import { Hero } from './hero';
+import { BackendService } from './backend.service';
+import { Logger } from './logger.service';
+
+@Injectable()
+// #docregion class
+export class HeroService {
+  private heroes: Hero[] = [];
+
+  constructor(
+    private backend: BackendService,
+    private logger: Logger) { }
+
+  getHeroes() {
+    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
+      this.logger.log(`Fetched ${heroes.length} heroes.`);
+      this.heroes.push(...heroes); // fill cache
+    });
+    return this.heroes;
+  }
+}
diff --git a/aio/content/examples/architecture/src/app/hero.ts b/aio/content/examples/architecture/src/app/hero.ts
new file mode 100644
index 000000000000..b89557aa71db
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/hero.ts
@@ -0,0 +1,10 @@
+let nextId = 1;
+
+export class Hero {
+  id: number;
+  constructor(
+    public name: string,
+    public power?: string) {
+      this.id = nextId++;
+    }
+}
diff --git a/aio/content/examples/architecture/src/app/logger.service.ts b/aio/content/examples/architecture/src/app/logger.service.ts
new file mode 100644
index 000000000000..9277ee8bc0ab
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/logger.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+// #docregion class
+export class Logger {
+  log(msg: any)   { console.log(msg); }
+  error(msg: any) { console.error(msg); }
+  warn(msg: any)  { console.warn(msg); }
+}
diff --git a/aio/content/examples/architecture/src/app/mini-app.ts b/aio/content/examples/architecture/src/app/mini-app.ts
new file mode 100644
index 000000000000..b064428be375
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/mini-app.ts
@@ -0,0 +1,45 @@
+// #docplaster
+// A mini-application
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  log(message: string) { console.log(message); }
+}
+
+// #docregion import-core-component
+import { Component } from '@angular/core';
+// #enddocregion import-core-component
+
+@Component({
+ selector: 'my-app',
+ template: 'Welcome to Angular'
+})
+export class AppComponent {
+  constructor(logger: Logger) {
+    logger.log('Let the fun begin!');
+  }
+}
+
+// #docregion module
+import { NgModule }      from '@angular/core';
+// #docregion import-browser-module
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion import-browser-module
+@NgModule({
+// #docregion ngmodule-imports
+  imports:      [ BrowserModule ],
+// #enddocregion ngmodule-imports
+  providers:    [ Logger ],
+  declarations: [ AppComponent ],
+  exports:      [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export
+// #enddocregion module
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/architecture/src/app/sales-tax.component.ts b/aio/content/examples/architecture/src/app/sales-tax.component.ts
new file mode 100644
index 000000000000..2d33398f4c1b
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/sales-tax.component.ts
@@ -0,0 +1,25 @@
+import { Component }       from '@angular/core';
+
+import { SalesTaxService } from './sales-tax.service';
+import { TaxRateService }  from './tax-rate.service';
+
+@Component({
+  selector:    'app-sales-tax',
+  template: `
+    <h2>Sales Tax Calculator</h2>
+    <label>Amount: <input #amountBox (change)="0"></label>
+
+    <div *ngIf="amountBox.value">
+    The sales tax is
+     {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
+    </div>
+  `,
+  providers: [SalesTaxService, TaxRateService]
+})
+export class SalesTaxComponent {
+  constructor(private salesTaxService: SalesTaxService) { }
+
+  getTax(value: string | number) {
+    return this.salesTaxService.getVAT(value);
+  }
+}
diff --git a/aio/content/examples/architecture/src/app/sales-tax.service.ts b/aio/content/examples/architecture/src/app/sales-tax.service.ts
new file mode 100644
index 000000000000..d859dc1595f0
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/sales-tax.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+import { TaxRateService } from './tax-rate.service';
+
+@Injectable()
+export class SalesTaxService {
+  constructor(private rateService: TaxRateService) { }
+
+  getVAT(value: string | number) {
+    let amount = (typeof value === 'string') ?
+      parseFloat(value) : value;
+    return (amount || 0) * this.rateService.getRate('VAT');
+  }
+}
diff --git a/aio/content/examples/architecture/src/app/tax-rate.service.ts b/aio/content/examples/architecture/src/app/tax-rate.service.ts
new file mode 100644
index 000000000000..fff2f4df8f31
--- /dev/null
+++ b/aio/content/examples/architecture/src/app/tax-rate.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TaxRateService {
+  getRate(rateName: string) { return 0.10; } // 10% everywhere
+}
diff --git a/aio/content/examples/architecture/src/index.html b/aio/content/examples/architecture/src/index.html
new file mode 100644
index 000000000000..93ea2e27dccd
--- /dev/null
+++ b/aio/content/examples/architecture/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Architecture of Angular</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base href="/">
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/architecture/src/main.ts b/aio/content/examples/architecture/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/architecture/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/architecture/stackblitz.json b/aio/content/examples/architecture/stackblitz.json
new file mode 100644
index 000000000000..c2d31783ea34
--- /dev/null
+++ b/aio/content/examples/architecture/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Intro to Angular",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "file": "src/app/app.module.ts"
+}
diff --git a/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts b/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..fd033ce32f89
--- /dev/null
+++ b/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,31 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Attribute directives', function () {
+
+  let _title = 'My First Attribute Directive';
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it(`should display correct title: ${_title}`, function () {
+    expect(element(by.css('h1')).getText()).toEqual(_title);
+  });
+
+  it('should be able to select green highlight', function () {
+    let highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
+    let lightGreen = 'rgba(144, 238, 144, 1)';
+
+    expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
+    // let greenRb = element(by.cssContainingText('input', 'Green'));
+    let greenRb = element.all(by.css('input')).get(0);
+    greenRb.click().then(function() {
+      // TypeScript Todo: find the right type for highlightedEle
+      browser.actions().mouseMove(highlightedEle as any).perform();
+      expect(highlightedEle.getCssValue('background-color')).toEqual(lightGreen);
+    });
+
+  });
+});
diff --git a/modules/angular2/docs/core/08_lifecycle.md b/aio/content/examples/attribute-directives/example-config.json
similarity index 100%
rename from modules/angular2/docs/core/08_lifecycle.md
rename to aio/content/examples/attribute-directives/example-config.json
diff --git a/aio/content/examples/attribute-directives/src/app/app.component.1.html b/aio/content/examples/attribute-directives/src/app/app.component.1.html
new file mode 100644
index 000000000000..4422c83eadde
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/app.component.1.html
@@ -0,0 +1,14 @@
+<!-- #docregion -->
+<h1>My First Attribute Directive</h1>
+<!-- #docregion applied -->
+<p appHighlight>Highlight me!</p>
+<!-- #enddocregion applied,  -->
+
+<!-- #docregion color-1 -->
+<p appHighlight highlightColor="yellow">Highlighted in yellow</p>
+<p appHighlight [highlightColor]="'orange'">Highlighted in orange</p>
+<!-- #enddocregion color-1 -->
+
+<!-- #docregion color-2 -->
+<p appHighlight [highlightColor]="color">Highlighted with parent component's color</p>
+<!-- #enddocregion color-2 -->
diff --git a/aio/content/examples/attribute-directives/src/app/app.component.1.ts b/aio/content/examples/attribute-directives/src/app/app.component.1.ts
new file mode 100644
index 000000000000..7924a2366abd
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/app.component.1.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.1.html'
+})
+// #docregion class
+export class AppComponent {
+  color = 'yellow';
+}
diff --git a/aio/content/examples/attribute-directives/src/app/app.component.html b/aio/content/examples/attribute-directives/src/app/app.component.html
new file mode 100644
index 000000000000..c361f1128714
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/app.component.html
@@ -0,0 +1,24 @@
+<!-- #docregion v2, -->
+<h1>My First Attribute Directive</h1>
+
+<h4>Pick a highlight color</h4>
+<div>
+  <input type="radio" name="colors" (click)="color='lightgreen'">Green
+  <input type="radio" name="colors" (click)="color='yellow'">Yellow
+  <input type="radio" name="colors" (click)="color='cyan'">Cyan
+</div>
+<!-- #docregion color -->
+<p [appHighlight]="color">Highlight me!</p>
+<!-- #enddocregion color, v2 -->
+
+<!-- #docregion defaultColor -->
+<p [appHighlight]="color" defaultColor="violet">
+  Highlight me too!
+</p>
+<!-- #enddocregion defaultColor, -->
+
+<hr>
+<p><i>Mouse over the following lines to see fixed highlights</i></p>
+
+<p [appHighlight]="'yellow'">Highlighted in yellow</p>
+<p appHighlight="orange">Highlighted in orange</p>
diff --git a/aio/content/examples/attribute-directives/src/app/app.component.ts b/aio/content/examples/attribute-directives/src/app/app.component.ts
new file mode 100644
index 000000000000..01d0dd5b5f1c
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/app.component.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+// #docregion class
+export class AppComponent {
+  color: string;
+}
diff --git a/aio/content/examples/attribute-directives/src/app/app.module.ts b/aio/content/examples/attribute-directives/src/app/app.module.ts
new file mode 100644
index 000000000000..ca35d560fb5e
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/app.module.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { HighlightDirective } from './highlight.directive';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    HighlightDirective
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/attribute-directives/src/app/dummy.module.1.ts b/aio/content/examples/attribute-directives/src/app/dummy.module.1.ts
new file mode 100644
index 000000000000..14f0216f058a
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/dummy.module.1.ts
@@ -0,0 +1,17 @@
+// Not used. Keep away from stackblitz
+// Keeps ATLS from complaining about undeclared directives.
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }               from './app.component.1';
+import { HighlightDirective as HLD1 } from './highlight.directive.1';
+import { HighlightDirective as HLD2 } from './highlight.directive.2';
+import { HighlightDirective as HLD3 } from './highlight.directive.3';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent, HLD1, HLD2, HLD3
+  ]
+})
+export class DummyModule { }
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.0.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.0.ts
new file mode 100644
index 000000000000..a15f757cf5a6
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.0.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[appHighlight]'
+})
+export class HighlightDirective {
+  constructor() { }
+}
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts
new file mode 100644
index 000000000000..1ce9949ec0d6
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts
@@ -0,0 +1,12 @@
+/* tslint:disable:no-unused-variable */
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[appHighlight]'
+})
+export class HighlightDirective {
+    constructor(el: ElementRef) {
+       el.nativeElement.style.backgroundColor = 'yellow';
+    }
+}
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
new file mode 100644
index 000000000000..d039083beb7f
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
@@ -0,0 +1,46 @@
+/* tslint:disable:no-unused-variable member-ordering */
+// #docplaster
+// #docregion imports,
+import { Directive, ElementRef, HostListener } from '@angular/core';
+// #enddocregion imports,
+import { Input } from '@angular/core';
+// #docregion
+
+@Directive({
+  selector: '[appHighlight]'
+})
+export class HighlightDirective {
+  // #docregion ctor
+  constructor(private el: ElementRef) { }
+  // #enddocregion ctor
+
+  // #docregion mouse-methods, host
+  @HostListener('mouseenter') onMouseEnter() {
+    // #enddocregion host
+    this.highlight('yellow');
+    // #docregion host
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    // #enddocregion host
+    this.highlight(null);
+    // #docregion host
+  }
+  // #enddocregion host
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+  // #enddocregion mouse-methods,
+
+  // #docregion color
+  @Input() highlightColor: string;
+  // #enddocregion color
+
+  // #docregion color-2
+  @Input() appHighlight: string;
+  // #enddocregion color-2
+
+// #docregion
+}
+// #enddocregion
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
new file mode 100644
index 000000000000..01c7cb679c2e
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:member-ordering */
+// #docregion, imports
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+// #enddocregion imports
+
+@Directive({
+  selector: '[appHighlight]'
+})
+export class HighlightDirective {
+
+  constructor(private el: ElementRef) { }
+
+  @Input('appHighlight') highlightColor: string;
+
+  // #docregion mouse-enter
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || 'red');
+  }
+  // #enddocregion mouse-enter
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
new file mode 100644
index 000000000000..dd138ae09dee
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
@@ -0,0 +1,32 @@
+/* tslint:disable:member-ordering */
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appHighlight]'
+})
+export class HighlightDirective {
+
+  constructor(private el: ElementRef) { }
+
+  // #docregion defaultColor
+  @Input() defaultColor: string;
+  // #enddocregion defaultColor
+
+  // #docregion color
+  @Input('appHighlight') highlightColor: string;
+  // #enddocregion color
+
+  // #docregion mouse-enter
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || this.defaultColor || 'red');
+  }
+  // #enddocregion mouse-enter
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}
diff --git a/aio/content/examples/attribute-directives/src/index.html b/aio/content/examples/attribute-directives/src/index.html
new file mode 100644
index 000000000000..12cabb636261
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/index.html
@@ -0,0 +1,13 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Attribute Directives</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/aio/content/examples/attribute-directives/src/main.ts b/aio/content/examples/attribute-directives/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/attribute-directives/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/attribute-directives/stackblitz.json b/aio/content/examples/attribute-directives/stackblitz.json
new file mode 100644
index 000000000000..32e9661d60d4
--- /dev/null
+++ b/aio/content/examples/attribute-directives/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Attribute Directive",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2,3].*"
+  ],
+  "tags": ["attribute", "directive"]
+}
diff --git a/aio/content/examples/bootstrapping/bs-config.1.json b/aio/content/examples/bootstrapping/bs-config.1.json
new file mode 100644
index 000000000000..4e585952675d
--- /dev/null
+++ b/aio/content/examples/bootstrapping/bs-config.1.json
@@ -0,0 +1,8 @@
+{
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    }
+  }
+}
diff --git a/aio/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts b/aio/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..cd4922ccd307
--- /dev/null
+++ b/aio/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('feature-modules App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});
diff --git a/modules/angular2/docs/core/11_shadow_dom.md b/aio/content/examples/bootstrapping/example-config.json
similarity index 100%
rename from modules/angular2/docs/core/11_shadow_dom.md
rename to aio/content/examples/bootstrapping/example-config.json
diff --git a/modules/angular2/src/di/type_info.ts b/aio/content/examples/bootstrapping/src/app/app.component.css
similarity index 100%
rename from modules/angular2/src/di/type_info.ts
rename to aio/content/examples/bootstrapping/src/app/app.component.css
diff --git a/aio/content/examples/bootstrapping/src/app/app.component.html b/aio/content/examples/bootstrapping/src/app/app.component.html
new file mode 100644
index 000000000000..b6931b538a2c
--- /dev/null
+++ b/aio/content/examples/bootstrapping/src/app/app.component.html
@@ -0,0 +1,3 @@
+<h1>
+  {{title}}
+</h1>
diff --git a/aio/content/examples/bootstrapping/src/app/app.component.spec.ts b/aio/content/examples/bootstrapping/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..13c632d6763e
--- /dev/null
+++ b/aio/content/examples/bootstrapping/src/app/app.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  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!');
+  }));
+});
diff --git a/aio/content/examples/bootstrapping/src/app/app.component.ts b/aio/content/examples/bootstrapping/src/app/app.component.ts
new file mode 100644
index 000000000000..ff63e0504887
--- /dev/null
+++ b/aio/content/examples/bootstrapping/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app works!';
+}
diff --git a/aio/content/examples/bootstrapping/src/app/app.module.ts b/aio/content/examples/bootstrapping/src/app/app.module.ts
new file mode 100644
index 000000000000..9b8a4fcaef0b
--- /dev/null
+++ b/aio/content/examples/bootstrapping/src/app/app.module.ts
@@ -0,0 +1,34 @@
+// #docplaster
+// #docregion whole-ngmodule
+
+// imports
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent } from './app.component';
+// #docregion directive-import
+import { ItemDirective } from './item.directive';
+// #enddocregion directive-import
+
+
+// @NgModule decorator with its metadata
+@NgModule({
+// #docregion declarations
+  declarations: [
+    AppComponent,
+    ItemDirective
+  ],
+  // #enddocregion declarations
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+
+// #enddocregion whole-ngmodule
diff --git a/aio/content/examples/bootstrapping/src/app/item.directive.spec.ts b/aio/content/examples/bootstrapping/src/app/item.directive.spec.ts
new file mode 100644
index 000000000000..0c184d30da55
--- /dev/null
+++ b/aio/content/examples/bootstrapping/src/app/item.directive.spec.ts
@@ -0,0 +1,8 @@
+import { ItemDirective } from './item.directive';
+
+describe('ItemDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ItemDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/bootstrapping/src/app/item.directive.ts b/aio/content/examples/bootstrapping/src/app/item.directive.ts
new file mode 100644
index 000000000000..e8083bb05e7d
--- /dev/null
+++ b/aio/content/examples/bootstrapping/src/app/item.directive.ts
@@ -0,0 +1,15 @@
+// #docplaster
+// #docregion directive
+
+
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[appItem]'
+})
+export class ItemDirective {
+// code goes here
+  constructor() { }
+
+}
+// #enddocregion directive
diff --git a/aio/content/examples/bootstrapping/src/index.html b/aio/content/examples/bootstrapping/src/index.html
new file mode 100644
index 000000000000..a0df7beafedd
--- /dev/null
+++ b/aio/content/examples/bootstrapping/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>NgmoduleDemo</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>
diff --git a/aio/content/examples/bootstrapping/src/main.ts b/aio/content/examples/bootstrapping/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/bootstrapping/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/bootstrapping/stackblitz.json b/aio/content/examples/bootstrapping/stackblitz.json
new file mode 100644
index 000000000000..3167ca83876b
--- /dev/null
+++ b/aio/content/examples/bootstrapping/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "Bootstrapping",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["ngmodules"]
+}
diff --git a/aio/content/examples/cli-quickstart/bs-config.cli.json b/aio/content/examples/cli-quickstart/bs-config.cli.json
new file mode 100644
index 000000000000..ac61d35f8324
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/bs-config.cli.json
@@ -0,0 +1,11 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "dist",
+    "middleware": {
+      "0": null
+    }
+  }
+}
diff --git a/aio/content/examples/cli-quickstart/e2e/src/app.e2e-spec.ts b/aio/content/examples/cli-quickstart/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..3f0760b56e57
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('cli-quickstart App', () => {
+  beforeEach(() => {
+    return browser.get('/');
+  });
+
+  it('should display message saying app works', () => {
+    let pageTitle = element(by.css('app-root h1')).getText();
+    expect(pageTitle).toEqual('Welcome to My First Angular App!!');
+  });
+});
diff --git a/aio/content/examples/cli-quickstart/example-config.json b/aio/content/examples/cli-quickstart/example-config.json
new file mode 100644
index 000000000000..313764c3c606
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:cli",
+  "run": "serve:cli"
+}
diff --git a/aio/content/examples/cli-quickstart/src/app/app.component.css b/aio/content/examples/cli-quickstart/src/app/app.component.css
new file mode 100644
index 000000000000..a2b21fae82de
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/src/app/app.component.css
@@ -0,0 +1,6 @@
+/* #docregion */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
diff --git a/aio/content/examples/cli-quickstart/src/app/app.component.html b/aio/content/examples/cli-quickstart/src/app/app.component.html
new file mode 100644
index 000000000000..24c56edee4d5
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/src/app/app.component.html
@@ -0,0 +1,19 @@
+<!--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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+</div>
+<h2>Here are some links to help you start: </h2>
+<ul>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">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
new file mode 100644
index 000000000000..1f5da50d19fe
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts
@@ -0,0 +1,30 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toMatch(/app/i);
+  }));
+
+  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).toMatch(/app/i);
+  }));
+});
diff --git a/aio/content/examples/cli-quickstart/src/app/app.component.ts b/aio/content/examples/cli-quickstart/src/app/app.component.ts
new file mode 100644
index 000000000000..d977bbe40a3c
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/src/app/app.component.ts
@@ -0,0 +1,16 @@
+// #docregion import
+import { Component } from '@angular/core';
+// #enddocregion import
+
+// #docregion metadata
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+// #enddocregion metadata
+// #docregion title, class
+export class AppComponent {
+  title = 'My First Angular App!';
+}
+// #enddocregion title, class
diff --git a/aio/content/examples/cli-quickstart/src/app/app.module.ts b/aio/content/examples/cli-quickstart/src/app/app.module.ts
new file mode 100644
index 000000000000..f65716351aa5
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/src/app/app.module.ts
@@ -0,0 +1,16 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/aio/content/examples/cli-quickstart/src/index.html b/aio/content/examples/cli-quickstart/src/index.html
new file mode 100644
index 000000000000..0450fa57c399
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>MyApp</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/cli-quickstart/src/main.ts b/aio/content/examples/cli-quickstart/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/cli-quickstart/zipper.json b/aio/content/examples/cli-quickstart/zipper.json
new file mode 100644
index 000000000000..1deb27d7fb9d
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/zipper.json
@@ -0,0 +1,9 @@
+{
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[0-9].*",
+    "angular.json",
+    "protractor.conf.js"
+  ]
+}
diff --git a/aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts b/aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..7637a6affc3e
--- /dev/null
+++ b/aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,232 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Component Communication Cookbook Tests', function () {
+
+  // Note: '?e2e' which app can read to know it is running in protractor
+  // e.g. `if (!/e2e/.test(location.search)) { ...`
+  beforeAll(function () {
+    browser.get('?e2e');
+  });
+
+  describe('Parent-to-child communication', function() {
+    // #docregion parent-to-child
+    // ...
+    let _heroNames = ['Mr. IQ', 'Magneta', 'Bombasto'];
+    let _masterName = 'Master';
+
+    it('should pass properties to children properly', function () {
+      let parent = element.all(by.tagName('app-hero-parent')).get(0);
+      let heroes = parent.all(by.tagName('app-hero-child'));
+
+      for (let i = 0; i < _heroNames.length; i++) {
+        let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
+        let childDetail = heroes.get(i).element(by.tagName('p')).getText();
+        expect(childTitle).toEqual(_heroNames[i] + ' says:');
+        expect(childDetail).toContain(_masterName);
+      }
+    });
+    // ...
+    // #enddocregion parent-to-child
+  });
+
+  describe('Parent-to-child communication with setter', function() {
+    // #docregion parent-to-child-setter
+    // ...
+    it('should display trimmed, non-empty names', function () {
+      let _nonEmptyNameIndex = 0;
+      let _nonEmptyName = '"Mr. IQ"';
+      let parent = element.all(by.tagName('app-name-parent')).get(0);
+      let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex);
+
+      let displayName = hero.element(by.tagName('h3')).getText();
+      expect(displayName).toEqual(_nonEmptyName);
+    });
+
+    it('should replace empty name with default name', function () {
+      let _emptyNameIndex = 1;
+      let _defaultName = '"<no name set>"';
+      let parent = element.all(by.tagName('app-name-parent')).get(0);
+      let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex);
+
+      let displayName = hero.element(by.tagName('h3')).getText();
+      expect(displayName).toEqual(_defaultName);
+    });
+    // ...
+    // #enddocregion parent-to-child-setter
+  });
+
+  describe('Parent-to-child communication with ngOnChanges', function() {
+    // #docregion parent-to-child-onchanges
+    // ...
+    // Test must all execute in this exact order
+    it('should set expected initial values', function () {
+      let actual = getActual();
+
+      let initialLabel = 'Version 1.23';
+      let initialLog = 'Initial value of major set to 1, Initial value of minor set to 23';
+
+      expect(actual.label).toBe(initialLabel);
+      expect(actual.count).toBe(1);
+      expect(actual.logs.get(0).getText()).toBe(initialLog);
+    });
+
+    it('should set expected values after clicking \'Minor\' twice', function () {
+      let repoTag = element(by.tagName('app-version-parent'));
+      let newMinorButton = repoTag.all(by.tagName('button')).get(0);
+
+      newMinorButton.click().then(function() {
+        newMinorButton.click().then(function() {
+          let actual = getActual();
+
+          let labelAfter2Minor = 'Version 1.25';
+          let logAfter2Minor = 'minor changed from 24 to 25';
+
+          expect(actual.label).toBe(labelAfter2Minor);
+          expect(actual.count).toBe(3);
+          expect(actual.logs.get(2).getText()).toBe(logAfter2Minor);
+        });
+      });
+    });
+
+    it('should set expected values after clicking \'Major\' once', function () {
+      let repoTag = element(by.tagName('app-version-parent'));
+      let newMajorButton = repoTag.all(by.tagName('button')).get(1);
+
+      newMajorButton.click().then(function() {
+        let actual = getActual();
+
+        let labelAfterMajor = 'Version 2.0';
+        let logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0';
+
+        expect(actual.label).toBe(labelAfterMajor);
+        expect(actual.count).toBe(4);
+        expect(actual.logs.get(3).getText()).toBe(logAfterMajor);
+      });
+    });
+
+    function getActual() {
+      let versionTag = element(by.tagName('app-version-child'));
+      let label = versionTag.element(by.tagName('h3')).getText();
+      let ul = versionTag.element((by.tagName('ul')));
+      let logs = ul.all(by.tagName('li'));
+
+      return {
+        label: label,
+        logs: logs,
+        count: logs.count()
+      };
+    }
+    // ...
+    // #enddocregion parent-to-child-onchanges
+
+  });
+
+  describe('Child-to-parent communication', function() {
+    // #docregion child-to-parent
+    // ...
+    it('should not emit the event initially', function () {
+      let voteLabel = element(by.tagName('app-vote-taker'))
+        .element(by.tagName('h3')).getText();
+      expect(voteLabel).toBe('Agree: 0, Disagree: 0');
+    });
+
+    it('should process Agree vote', function () {
+      let agreeButton1 = element.all(by.tagName('app-voter')).get(0)
+        .all(by.tagName('button')).get(0);
+      agreeButton1.click().then(function() {
+        let voteLabel = element(by.tagName('app-vote-taker'))
+          .element(by.tagName('h3')).getText();
+        expect(voteLabel).toBe('Agree: 1, Disagree: 0');
+      });
+    });
+
+    it('should process Disagree vote', function () {
+      let agreeButton1 = element.all(by.tagName('app-voter')).get(1)
+        .all(by.tagName('button')).get(1);
+      agreeButton1.click().then(function() {
+        let voteLabel = element(by.tagName('app-vote-taker'))
+          .element(by.tagName('h3')).getText();
+        expect(voteLabel).toBe('Agree: 1, Disagree: 1');
+      });
+    });
+    // ...
+    // #enddocregion child-to-parent
+  });
+
+  // Can't run timer tests in protractor because
+  // interaction w/ zones causes all tests to freeze & timeout.
+  xdescribe('Parent calls child via local var', function() {
+    countDownTimerTests('countdown-parent-lv');
+  });
+
+  xdescribe('Parent calls ViewChild', function() {
+    countDownTimerTests('countdown-parent-vc');
+  });
+
+  function countDownTimerTests(parentTag: string) {
+    // #docregion countdown-timer-tests
+    // ...
+    it('timer and parent seconds should match', function () {
+      let parent = element(by.tagName(parentTag));
+      let message = parent.element(by.tagName('app-countdown-timer')).getText();
+      browser.sleep(10); // give `seconds` a chance to catchup with `message`
+      let seconds = parent.element(by.className('seconds')).getText();
+      expect(message).toContain(seconds);
+    });
+
+    it('should stop the countdown', function () {
+      let parent = element(by.tagName(parentTag));
+      let stopButton = parent.all(by.tagName('button')).get(1);
+
+      stopButton.click().then(function() {
+        let message = parent.element(by.tagName('app-countdown-timer')).getText();
+        expect(message).toContain('Holding');
+      });
+    });
+    // ...
+    // #enddocregion countdown-timer-tests
+  }
+
+
+  describe('Parent and children communicate via a service', function() {
+    // #docregion bidirectional-service
+    // ...
+    it('should announce a mission', function () {
+      let missionControl = element(by.tagName('app-mission-control'));
+      let announceButton = missionControl.all(by.tagName('button')).get(0);
+      announceButton.click().then(function () {
+        let history = missionControl.all(by.tagName('li'));
+        expect(history.count()).toBe(1);
+        expect(history.get(0).getText()).toMatch(/Mission.* announced/);
+      });
+    });
+
+    it('should confirm the mission by Lovell', function () {
+      testConfirmMission(1, 2, 'Lovell');
+    });
+
+    it('should confirm the mission by Haise', function () {
+      testConfirmMission(3, 3, 'Haise');
+    });
+
+    it('should confirm the mission by Swigert', function () {
+      testConfirmMission(2, 4, 'Swigert');
+    });
+
+    function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
+      let _confirmedLog = ' confirmed the mission';
+      let missionControl = element(by.tagName('app-mission-control'));
+      let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
+      confirmButton.click().then(function () {
+        let history = missionControl.all(by.tagName('li'));
+        expect(history.count()).toBe(expectedLogCount);
+        expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog);
+      });
+    }
+    // ...
+    // #enddocregion bidirectional-service
+  });
+
+});
diff --git a/modules/angular2_material/src/components/progress-circular/progress-circular.scss b/aio/content/examples/component-interaction/example-config.json
similarity index 100%
rename from modules/angular2_material/src/components/progress-circular/progress-circular.scss
rename to aio/content/examples/component-interaction/example-config.json
diff --git a/aio/content/examples/component-interaction/src/app/app.component.html b/aio/content/examples/component-interaction/src/app/app.component.html
new file mode 100644
index 000000000000..907e0181fa61
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/app.component.html
@@ -0,0 +1,51 @@
+<h1 id="top">Component Communication Cookbook</h1>
+
+<a href="#parent-to-child">Pass data from parent to child with input binding ("Heroes")</a><br/>
+<a href="#parent-to-child-setter">Intercept input property changes with a setter ("Master")</a><br/>
+<a href="#parent-to-child-on-changes">Intercept input property changes with <i>ngOnChanges</i> ("Source code version")</a><br/>
+<a href="#child-to-parent">Parent listens for child event ("Colonize Universe")</a><br/>
+<a href="#parent-to-child-local-var">Parent to child via <i>local variable</i>("Countdown to Liftoff")</a><br/>
+<a href="#parent-to-view-child">Parent calls <i>ViewChild</i>("Countdown  to Liftoff")</a><br/>
+<a href="#bidirectional-service">Parent and children communicate via a service ("Mission Control")</a><br/>
+
+<div id="parent-to-child">
+  <app-hero-parent></app-hero-parent>
+</div>
+<a href="#top" class="to-top">Back to Top</a>
+
+<hr>
+<div id="parent-to-child-setter">
+  <app-name-parent></app-name-parent>
+</div>
+<a href="#top" class="to-top">Back to Top</a>
+
+<hr>
+<div id="parent-to-child-on-changes">
+  <app-version-parent></app-version-parent>
+</div>
+<a href="#top" class="to-top">Back to Top</a>
+
+<hr>
+<div id="child-to-parent">
+  <app-vote-taker></app-vote-taker>
+</div>
+<a href="#top" class="to-top">Back to Top</a>
+<hr>
+
+<div id="parent-to-child-local-var">
+  <app-countdown-parent-lv></app-countdown-parent-lv>
+</div>
+<a href="#top" class="to-top">Back to Top</a>
+<hr>
+
+<div id="parent-to-view-child">
+  <app-countdown-parent-vc></app-countdown-parent-vc>
+</div>
+<a href="#top" class="to-top">Back to Top</a>
+<hr>
+
+<div id="bidirectional-service">
+  <app-mission-control></app-mission-control>
+</div>
+<a href="#top" class="to-top">Back to Top</a>
+<hr>
diff --git a/aio/content/examples/component-interaction/src/app/app.component.ts b/aio/content/examples/component-interaction/src/app/app.component.ts
new file mode 100644
index 000000000000..968036cb8c2e
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/component-interaction/src/app/app.module.ts b/aio/content/examples/component-interaction/src/app/app.module.ts
new file mode 100644
index 000000000000..7a27465ff824
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/app.module.ts
@@ -0,0 +1,54 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { AstronautComponent } from './astronaut.component';
+import { CountdownLocalVarParentComponent, CountdownViewChildParentComponent } from './countdown-parent.component';
+import { CountdownTimerComponent } from './countdown-timer.component';
+import { HeroChildComponent } from './hero-child.component';
+import { HeroParentComponent } from './hero-parent.component';
+import { MissionControlComponent } from './missioncontrol.component';
+import { NameChildComponent } from './name-child.component';
+import { NameParentComponent } from './name-parent.component';
+import { VersionChildComponent } from './version-child.component';
+import { VersionParentComponent } from './version-parent.component';
+import { VoterComponent } from './voter.component';
+import { VoteTakerComponent } from './votetaker.component';
+
+let directives: any[] = [
+    AppComponent,
+    AstronautComponent,
+    CountdownTimerComponent,
+    HeroChildComponent,
+    HeroParentComponent,
+    MissionControlComponent,
+    NameChildComponent,
+    NameParentComponent,
+    VersionChildComponent,
+    VersionParentComponent,
+    VoterComponent,
+    VoteTakerComponent
+  ];
+
+let schemas: any[] = [];
+
+// Include Countdown examples
+// unless in e2e tests which they break.
+if (!/e2e/.test(location.search)) {
+  console.log('adding countdown timer examples');
+  directives.push(CountdownLocalVarParentComponent);
+  directives.push(CountdownViewChildParentComponent);
+} else {
+  // In e2e test use CUSTOM_ELEMENTS_SCHEMA to suppress unknown element errors
+  schemas.push(CUSTOM_ELEMENTS_SCHEMA);
+}
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: directives,
+  bootstrap: [ AppComponent ],
+  schemas: schemas
+})
+export class AppModule { }
diff --git a/aio/content/examples/component-interaction/src/app/astronaut.component.ts b/aio/content/examples/component-interaction/src/app/astronaut.component.ts
new file mode 100644
index 000000000000..9bd4c9d78ce4
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/astronaut.component.ts
@@ -0,0 +1,46 @@
+// #docregion
+import { Component, Input, OnDestroy } from '@angular/core';
+
+import { MissionService } from './mission.service';
+import { Subscription }   from 'rxjs';
+
+@Component({
+  selector: 'app-astronaut',
+  template: `
+    <p>
+      {{astronaut}}: <strong>{{mission}}</strong>
+      <button
+        (click)="confirm()"
+        [disabled]="!announced || confirmed">
+        Confirm
+      </button>
+    </p>
+  `
+})
+export class AstronautComponent implements OnDestroy {
+  @Input() astronaut: string;
+  mission = '<no mission announced>';
+  confirmed = false;
+  announced = false;
+  subscription: Subscription;
+
+  constructor(private missionService: MissionService) {
+    this.subscription = missionService.missionAnnounced$.subscribe(
+      mission => {
+        this.mission = mission;
+        this.announced = true;
+        this.confirmed = false;
+    });
+  }
+
+  confirm() {
+    this.confirmed = true;
+    this.missionService.confirmMission(this.astronaut);
+  }
+
+  ngOnDestroy() {
+    // prevent memory leak when component destroyed
+    this.subscription.unsubscribe();
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts b/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
new file mode 100644
index 000000000000..9f4e5bd4dfd8
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
@@ -0,0 +1,57 @@
+// #docplaster
+// #docregion vc
+import { AfterViewInit, ViewChild } from '@angular/core';
+// #docregion lv
+import { Component }                from '@angular/core';
+import { CountdownTimerComponent }  from './countdown-timer.component';
+
+// #enddocregion lv
+// #enddocregion vc
+
+//// Local variable, #timer, version
+// #docregion lv
+@Component({
+  selector: 'app-countdown-parent-lv',
+  template: `
+  <h3>Countdown to Liftoff (via local variable)</h3>
+  <button (click)="timer.start()">Start</button>
+  <button (click)="timer.stop()">Stop</button>
+  <div class="seconds">{{timer.seconds}}</div>
+  <app-countdown-timer #timer></app-countdown-timer>
+  `,
+  styleUrls: ['../assets/demo.css']
+})
+export class CountdownLocalVarParentComponent { }
+// #enddocregion lv
+
+//// View Child version
+// #docregion vc
+@Component({
+  selector: 'app-countdown-parent-vc',
+  template: `
+  <h3>Countdown to Liftoff (via ViewChild)</h3>
+  <button (click)="start()">Start</button>
+  <button (click)="stop()">Stop</button>
+  <div class="seconds">{{ seconds() }}</div>
+  <app-countdown-timer></app-countdown-timer>
+  `,
+  styleUrls: ['../assets/demo.css']
+})
+export class CountdownViewChildParentComponent implements AfterViewInit {
+
+  @ViewChild(CountdownTimerComponent)
+  private timerComponent: CountdownTimerComponent;
+
+  seconds() { return 0; }
+
+  ngAfterViewInit() {
+    // Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ...
+    // but wait a tick first to avoid one-time devMode
+    // unidirectional-data-flow-violation error
+    setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0);
+  }
+
+  start() { this.timerComponent.start(); }
+  stop() { this.timerComponent.stop(); }
+}
+// #enddocregion vc
diff --git a/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts b/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts
new file mode 100644
index 000000000000..dcc88334d020
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts
@@ -0,0 +1,37 @@
+// #docregion
+import { Component, OnDestroy, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-countdown-timer',
+  template: '<p>{{message}}</p>'
+})
+export class CountdownTimerComponent implements OnInit, OnDestroy {
+
+  intervalId = 0;
+  message = '';
+  seconds = 11;
+
+  clearTimer() { clearInterval(this.intervalId); }
+
+  ngOnInit()    { this.start(); }
+  ngOnDestroy() { this.clearTimer(); }
+
+  start() { this.countDown(); }
+  stop()  {
+    this.clearTimer();
+    this.message = `Holding at T-${this.seconds} seconds`;
+  }
+
+  private countDown() {
+    this.clearTimer();
+    this.intervalId = window.setInterval(() => {
+      this.seconds -= 1;
+      if (this.seconds === 0) {
+        this.message = 'Blast off!';
+      } else {
+        if (this.seconds < 0) { this.seconds = 10; } // reset
+        this.message = `T-${this.seconds} seconds and counting`;
+      }
+    }, 1000);
+  }
+}
diff --git a/aio/content/examples/component-interaction/src/app/hero-child.component.ts b/aio/content/examples/component-interaction/src/app/hero-child.component.ts
new file mode 100644
index 000000000000..4a0b8d4229f0
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/hero-child.component.ts
@@ -0,0 +1,17 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  selector: 'app-hero-child',
+  template: `
+    <h3>{{hero.name}} says:</h3>
+    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
+  `
+})
+export class HeroChildComponent {
+  @Input() hero: Hero;
+  @Input('master') masterName: string;
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/hero-parent.component.ts b/aio/content/examples/component-interaction/src/app/hero-parent.component.ts
new file mode 100644
index 000000000000..949c649c82fc
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/hero-parent.component.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { HEROES } from './hero';
+
+@Component({
+  selector: 'app-hero-parent',
+  template: `
+    <h2>{{master}} controls {{heroes.length}} heroes</h2>
+    <app-hero-child *ngFor="let hero of heroes"
+      [hero]="hero"
+      [master]="master">
+    </app-hero-child>
+  `
+})
+export class HeroParentComponent {
+  heroes = HEROES;
+  master = 'Master';
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/hero.ts b/aio/content/examples/component-interaction/src/app/hero.ts
new file mode 100644
index 000000000000..a7b70f48e806
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/hero.ts
@@ -0,0 +1,9 @@
+export class Hero {
+  name: string;
+}
+
+export const HEROES = [
+  {name: 'Mr. IQ'},
+  {name: 'Magneta'},
+  {name: 'Bombasto'}
+];
diff --git a/aio/content/examples/component-interaction/src/app/mission.service.ts b/aio/content/examples/component-interaction/src/app/mission.service.ts
new file mode 100644
index 000000000000..e8f4a4266793
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/mission.service.ts
@@ -0,0 +1,25 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Subject }    from 'rxjs';
+
+@Injectable()
+export class MissionService {
+
+  // Observable string sources
+  private missionAnnouncedSource = new Subject<string>();
+  private missionConfirmedSource = new Subject<string>();
+
+  // Observable string streams
+  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
+  missionConfirmed$ = this.missionConfirmedSource.asObservable();
+
+  // Service message commands
+  announceMission(mission: string) {
+    this.missionAnnouncedSource.next(mission);
+  }
+
+  confirmMission(astronaut: string) {
+    this.missionConfirmedSource.next(astronaut);
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/missioncontrol.component.ts b/aio/content/examples/component-interaction/src/app/missioncontrol.component.ts
new file mode 100644
index 000000000000..4c1f539b5948
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/missioncontrol.component.ts
@@ -0,0 +1,43 @@
+// #docregion
+import { Component }          from '@angular/core';
+
+import { MissionService }     from './mission.service';
+
+@Component({
+  selector: 'app-mission-control',
+  template: `
+    <h2>Mission Control</h2>
+    <button (click)="announce()">Announce mission</button>
+    <app-astronaut *ngFor="let astronaut of astronauts"
+      [astronaut]="astronaut">
+    </app-astronaut>
+    <h3>History</h3>
+    <ul>
+      <li *ngFor="let event of history">{{event}}</li>
+    </ul>
+  `,
+  providers: [MissionService]
+})
+export class MissionControlComponent {
+  astronauts = ['Lovell', 'Swigert', 'Haise'];
+  history: string[] = [];
+  missions = ['Fly to the moon!',
+              'Fly to mars!',
+              'Fly to Vegas!'];
+  nextMission = 0;
+
+  constructor(private missionService: MissionService) {
+    missionService.missionConfirmed$.subscribe(
+      astronaut => {
+        this.history.push(`${astronaut} confirmed the mission`);
+      });
+  }
+
+  announce() {
+    let mission = this.missions[this.nextMission++];
+    this.missionService.announceMission(mission);
+    this.history.push(`Mission "${mission}" announced`);
+    if (this.nextMission >= this.missions.length) { this.nextMission = 0; }
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/name-child.component.ts b/aio/content/examples/component-interaction/src/app/name-child.component.ts
new file mode 100644
index 000000000000..8393e21ebdf0
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/name-child.component.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-name-child',
+  template: '<h3>"{{name}}"</h3>'
+})
+export class NameChildComponent {
+  private _name = '';
+
+  @Input()
+  set name(name: string) {
+    this._name = (name && name.trim()) || '<no name set>';
+  }
+
+  get name(): string { return this._name; }
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/name-parent.component.ts b/aio/content/examples/component-interaction/src/app/name-parent.component.ts
new file mode 100644
index 000000000000..2c8c23b78121
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/name-parent.component.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-name-parent',
+  template: `
+  <h2>Master controls {{names.length}} names</h2>
+  <app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
+  `
+})
+export class NameParentComponent {
+  // Displays 'Mr. IQ', '<no name set>', 'Bombasto'
+  names = ['Mr. IQ', '   ', '  Bombasto  '];
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/version-child.component.ts b/aio/content/examples/component-interaction/src/app/version-child.component.ts
new file mode 100644
index 000000000000..1f3da880f4d8
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/version-child.component.ts
@@ -0,0 +1,35 @@
+/* tslint:disable:forin */
+// #docregion
+import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
+
+@Component({
+  selector: 'app-version-child',
+  template: `
+    <h3>Version {{major}}.{{minor}}</h3>
+    <h4>Change log:</h4>
+    <ul>
+      <li *ngFor="let change of changeLog">{{change}}</li>
+    </ul>
+  `
+})
+export class VersionChildComponent implements OnChanges {
+  @Input() major: number;
+  @Input() minor: number;
+  changeLog: string[] = [];
+
+  ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
+    let log: string[] = [];
+    for (let propName in changes) {
+      let changedProp = changes[propName];
+      let to = JSON.stringify(changedProp.currentValue);
+      if (changedProp.isFirstChange()) {
+        log.push(`Initial value of ${propName} set to ${to}`);
+      } else {
+        let from = JSON.stringify(changedProp.previousValue);
+        log.push(`${propName} changed from ${from} to ${to}`);
+      }
+    }
+    this.changeLog.push(log.join(', '));
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/version-parent.component.ts b/aio/content/examples/component-interaction/src/app/version-parent.component.ts
new file mode 100644
index 000000000000..0e9476b3c6dc
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/version-parent.component.ts
@@ -0,0 +1,26 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-version-parent',
+  template: `
+    <h2>Source code version</h2>
+    <button (click)="newMinor()">New minor version</button>
+    <button (click)="newMajor()">New major version</button>
+    <app-version-child [major]="major" [minor]="minor"></app-version-child>
+  `
+})
+export class VersionParentComponent {
+  major = 1;
+  minor = 23;
+
+  newMinor() {
+    this.minor++;
+  }
+
+  newMajor() {
+    this.major++;
+    this.minor = 0;
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/voter.component.ts b/aio/content/examples/component-interaction/src/app/voter.component.ts
new file mode 100644
index 000000000000..845e6fba0e44
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/voter.component.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-voter',
+  template: `
+    <h4>{{name}}</h4>
+    <button (click)="vote(true)"  [disabled]="didVote">Agree</button>
+    <button (click)="vote(false)" [disabled]="didVote">Disagree</button>
+  `
+})
+export class VoterComponent {
+  @Input()  name: string;
+  @Output() voted = new EventEmitter<boolean>();
+  didVote = false;
+
+  vote(agreed: boolean) {
+    this.voted.emit(agreed);
+    this.didVote = true;
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/votetaker.component.ts b/aio/content/examples/component-interaction/src/app/votetaker.component.ts
new file mode 100644
index 000000000000..d553af0d7bb2
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/app/votetaker.component.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Component }      from '@angular/core';
+
+@Component({
+  selector: 'app-vote-taker',
+  template: `
+    <h2>Should mankind colonize the Universe?</h2>
+    <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
+    <app-voter *ngFor="let voter of voters"
+      [name]="voter"
+      (voted)="onVoted($event)">
+    </app-voter>
+  `
+})
+export class VoteTakerComponent {
+  agreed = 0;
+  disagreed = 0;
+  voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
+
+  onVoted(agreed: boolean) {
+    agreed ? this.agreed++ : this.disagreed++;
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/component-interaction/src/assets/demo.css b/aio/content/examples/component-interaction/src/assets/demo.css
new file mode 100644
index 000000000000..b63a8b38dd4e
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/assets/demo.css
@@ -0,0 +1,9 @@
+/* Component Communication cookbook specific styles */
+.seconds {
+  background-color: black;
+  color: red;
+  font-size: 3em;
+  margin: 0.3em 0;
+  text-align: center;
+  width: 1.5em;
+}
diff --git a/aio/content/examples/component-interaction/src/index.html b/aio/content/examples/component-interaction/src/index.html
new file mode 100644
index 000000000000..cb5f519b8c63
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Passing information from parent to child</title>
+    <base href="/">
+    <style>
+      .to-top {margin-top: 8px; display: block;}
+    </style>
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/component-interaction/src/main.ts b/aio/content/examples/component-interaction/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/component-interaction/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/component-interaction/stackblitz.json b/aio/content/examples/component-interaction/stackblitz.json
new file mode 100644
index 000000000000..421ac6f97305
--- /dev/null
+++ b/aio/content/examples/component-interaction/stackblitz.json
@@ -0,0 +1,8 @@
+{
+  "description": "Component Communication Cookbook samples",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook", "component"]
+}
diff --git a/aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts b/aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..910f9351d40b
--- /dev/null
+++ b/aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,70 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Component Style Tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('scopes component styles to component view', function() {
+    let componentH1 = element(by.css('app-root > h1'));
+    let externalH1 = element(by.css('body > h1'));
+
+    // Note: sometimes webdriver returns the fontWeight as "normal",
+    // other times as "400", both of which are equal in CSS terms.
+    expect(componentH1.getCssValue('fontWeight')).toMatch(/normal|400/);
+    expect(externalH1.getCssValue('fontWeight')).not.toMatch(/normal|400/);
+  });
+
+
+  it('allows styling :host element', function() {
+    let host = element(by.css('app-hero-details'));
+
+    expect(host.getCssValue('borderWidth')).toEqual('1px');
+  });
+
+  it('supports :host() in function form', function() {
+    let host = element(by.css('app-hero-details'));
+
+    host.element(by.buttonText('Activate')).click();
+    expect(host.getCssValue('borderWidth')).toEqual('3px');
+  });
+
+  it('allows conditional :host-context() styling', function() {
+    let h2 = element(by.css('app-hero-details h2'));
+
+    expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
+  });
+
+  it('styles both view and content children with /deep/', function() {
+    let viewH3 = element(by.css('app-hero-team h3'));
+    let contentH3 = element(by.css('app-hero-controls h3'));
+
+    expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
+    expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
+  });
+
+  it('includes styles loaded with CSS @import', function() {
+    let host = element(by.css('app-hero-details'));
+
+    expect(host.getCssValue('padding')).toEqual('10px');
+  });
+
+  it('processes template inline styles', function() {
+    let button = element(by.css('app-hero-controls button'));
+    let externalButton = element(by.css('body > button'));
+    expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
+    expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
+  });
+
+  it('processes template <link>s', function() {
+    let li = element(by.css('app-hero-team li:first-child'));
+    let externalLi = element(by.css('body > ul li'));
+
+    expect(li.getCssValue('listStyleType')).toEqual('square');
+    expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
+  });
+
+});
diff --git a/typing_spec/basic_spec.dart b/aio/content/examples/component-styles/example-config.json
similarity index 100%
rename from typing_spec/basic_spec.dart
rename to aio/content/examples/component-styles/example-config.json
diff --git a/aio/content/examples/component-styles/src/app/app.module.ts b/aio/content/examples/component-styles/src/app/app.module.ts
new file mode 100644
index 000000000000..31c72cbbf2bc
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/app.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { HeroAppComponent } from './hero-app.component';
+import { HeroAppMainComponent } from './hero-app-main.component';
+import { HeroDetailsComponent } from './hero-details.component';
+import { HeroControlsComponent } from './hero-controls.component';
+import { QuestSummaryComponent } from './quest-summary.component';
+import { HeroTeamComponent } from './hero-team.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    HeroAppComponent,
+    HeroAppMainComponent,
+    HeroDetailsComponent,
+    HeroControlsComponent,
+    QuestSummaryComponent,
+    HeroTeamComponent
+  ],
+  bootstrap: [ HeroAppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/component-styles/src/app/hero-app-main.component.ts b/aio/content/examples/component-styles/src/app/hero-app-main.component.ts
new file mode 100644
index 000000000000..efecea0b42c2
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/hero-app-main.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  selector: 'app-hero-main',
+  template: `
+    <app-quest-summary></app-quest-summary>
+    <app-hero-details [hero]="hero" [class.active]="hero.active">
+      <app-hero-controls [hero]="hero"></app-hero-controls>
+    </app-hero-details>
+  `
+})
+export class HeroAppMainComponent {
+  @Input() hero: Hero;
+}
diff --git a/aio/content/examples/component-styles/src/app/hero-app.component.1.ts b/aio/content/examples/component-styles/src/app/hero-app.component.1.ts
new file mode 100644
index 000000000000..a89786c5d396
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/hero-app.component.1.ts
@@ -0,0 +1,25 @@
+import { Component, HostBinding } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <app-hero-main [hero]="hero"></app-hero-main>
+  `,
+  styleUrls: ['./hero-app.component.css']
+})
+export class HeroAppComponent {
+// #enddocregion
+  hero = new Hero(
+    'Human Torch',
+    ['Mister Fantastic', 'Invisible Woman', 'Thing']
+  );
+
+  @HostBinding('class') get themeClass() {
+    return 'theme-light';
+  }
+// #docregion
+}
+// #enddocregion
diff --git a/aio/content/examples/component-styles/src/app/hero-app.component.css b/aio/content/examples/component-styles/src/app/hero-app.component.css
new file mode 100644
index 000000000000..39671e32a934
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/hero-app.component.css
@@ -0,0 +1,3 @@
+h1 {
+  font-weight: normal;
+}
diff --git a/aio/content/examples/component-styles/src/app/hero-app.component.ts b/aio/content/examples/component-styles/src/app/hero-app.component.ts
new file mode 100644
index 000000000000..dd72cc5dfc80
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/hero-app.component.ts
@@ -0,0 +1,25 @@
+import { Component, HostBinding } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <app-hero-main [hero]="hero"></app-hero-main>
+  `,
+  styles: ['h1 { font-weight: normal; }']
+})
+export class HeroAppComponent {
+// #enddocregion
+  hero = new Hero(
+    'Human Torch',
+    ['Mister Fantastic', 'Invisible Woman', 'Thing']
+  );
+
+  @HostBinding('class') get themeClass() {
+    return 'theme-light';
+  }
+// #docregion
+}
+// #enddocregion
diff --git a/aio/content/examples/component-styles/src/app/hero-controls.component.ts b/aio/content/examples/component-styles/src/app/hero-controls.component.ts
new file mode 100644
index 000000000000..2b6ad84aa0e6
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/hero-controls.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion inlinestyles
+@Component({
+  selector: 'app-hero-controls',
+  template: `
+    <style>
+      button {
+        background-color: white;
+        border: 1px solid #777;
+      }
+    </style>
+    <h3>Controls</h3>
+    <button (click)="activate()">Activate</button>
+  `
+})
+// #enddocregion inlinestyles
+export class HeroControlsComponent {
+  @Input() hero: Hero;
+
+  activate() {
+    this.hero.active = true;
+  }
+}
diff --git a/aio/content/examples/component-styles/src/app/hero-details-box.css b/aio/content/examples/component-styles/src/app/hero-details-box.css
new file mode 100644
index 000000000000..f240073005da
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/hero-details-box.css
@@ -0,0 +1,3 @@
+:host {
+  padding: 10px;
+}
diff --git a/aio/content/examples/component-styles/src/app/hero-details.component.css b/aio/content/examples/component-styles/src/app/hero-details.component.css
new file mode 100644
index 000000000000..7c381aa8d2c8
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/hero-details.component.css
@@ -0,0 +1,29 @@
+/* #docregion import */
+/* The AOT compiler needs the `./` to show that this is local */
+@import './hero-details-box.css';
+/* #enddocregion import */
+
+/* #docregion host */
+:host {
+  display: block;
+  border: 1px solid black;
+}
+/* #enddocregion host */
+
+/* #docregion hostfunction */
+:host(.active) {
+  border-width: 3px;
+}
+/* #enddocregion hostfunction */
+
+/* #docregion hostcontext */
+:host-context(.theme-light) h2 {
+  background-color: #eef;
+}
+/* #enddocregion hostcontext */
+
+/* #docregion deep */
+:host /deep/ h3 {
+  font-style: italic;
+}
+/* #enddocregion deep */
diff --git a/aio/content/examples/component-styles/src/app/hero-details.component.ts b/aio/content/examples/component-styles/src/app/hero-details.component.ts
new file mode 100644
index 000000000000..3a249b753abb
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/hero-details.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion styleurls
+@Component({
+  selector: 'app-hero-details',
+  template: `
+    <h2>{{hero.name}}</h2>
+    <app-hero-team [hero]=hero></app-hero-team>
+    <ng-content></ng-content>
+  `,
+  styleUrls: ['./hero-details.component.css']
+})
+export class HeroDetailsComponent {
+  // #enddocregion styleurls
+  @Input() hero: Hero;
+  // #docregion styleurls
+}
diff --git a/aio/content/examples/component-styles/src/app/hero-team.component.ts b/aio/content/examples/component-styles/src/app/hero-team.component.ts
new file mode 100644
index 000000000000..62b4ff5abced
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/hero-team.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion stylelink
+@Component({
+  selector: 'app-hero-team',
+  template: `
+    <!-- We must use a relative URL so that the AOT compiler can find the stylesheet -->
+    <link rel="stylesheet" href="../assets/hero-team.component.css">
+    <h3>Team</h3>
+    <ul>
+      <li *ngFor="let member of hero.team">
+        {{member}}
+      </li>
+    </ul>`
+})
+// #enddocregion stylelink
+export class HeroTeamComponent {
+  @Input() hero: Hero;
+}
diff --git a/aio/content/examples/component-styles/src/app/hero.ts b/aio/content/examples/component-styles/src/app/hero.ts
new file mode 100644
index 000000000000..7f8969e68237
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/hero.ts
@@ -0,0 +1,7 @@
+export class Hero {
+  active: boolean;
+
+  constructor(public name: string,
+              public team: string[]) {
+  }
+}
diff --git a/aio/content/examples/component-styles/src/app/quest-summary.component.css b/aio/content/examples/component-styles/src/app/quest-summary.component.css
new file mode 100644
index 000000000000..207fa981dd41
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/quest-summary.component.css
@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  background-color: green;
+  color: white;
+}
diff --git a/aio/content/examples/component-styles/src/app/quest-summary.component.html b/aio/content/examples/component-styles/src/app/quest-summary.component.html
new file mode 100644
index 000000000000..ace27d2a1cb5
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/quest-summary.component.html
@@ -0,0 +1 @@
+<p>No quests in progress</p>
diff --git a/aio/content/examples/component-styles/src/app/quest-summary.component.ts b/aio/content/examples/component-styles/src/app/quest-summary.component.ts
new file mode 100644
index 000000000000..25765ed16ddd
--- /dev/null
+++ b/aio/content/examples/component-styles/src/app/quest-summary.component.ts
@@ -0,0 +1,20 @@
+/* tslint:disable:no-unused-variable */
+// #docplaster
+import { Component, ViewEncapsulation } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'app-quest-summary',
+  // #docregion urls
+  templateUrl: './quest-summary.component.html',
+  styleUrls:  ['./quest-summary.component.css']
+  // #enddocregion urls
+})
+export class QuestSummaryComponent { }
+// #enddocregion
+/*
+  // #docregion encapsulation.native
+  // warning: few browsers support shadow DOM encapsulation at this time
+  encapsulation: ViewEncapsulation.Native
+  // #enddocregion encapsulation.native
+*/
diff --git a/aio/content/examples/component-styles/src/assets/hero-team.component.css b/aio/content/examples/component-styles/src/assets/hero-team.component.css
new file mode 100644
index 000000000000..b87679886bfc
--- /dev/null
+++ b/aio/content/examples/component-styles/src/assets/hero-team.component.css
@@ -0,0 +1,3 @@
+li {
+  list-style-type: square;
+}
diff --git a/aio/content/examples/component-styles/src/index.html b/aio/content/examples/component-styles/src/index.html
new file mode 100644
index 000000000000..ec478bd8ef1a
--- /dev/null
+++ b/aio/content/examples/component-styles/src/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+    <meta charset="UTF-8">
+    <title>Component Styles</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
+    <app-root></app-root>
+    <button style="visibility: hidden;">External button for E2E test</button>
+    <ul style="visibility: hidden;">
+      <li>External list for E2E test</li>
+    </ul>
+  </body>
+
+</html>
diff --git a/aio/content/examples/component-styles/src/main.ts b/aio/content/examples/component-styles/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/component-styles/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/component-styles/stackblitz.json b/aio/content/examples/component-styles/stackblitz.json
new file mode 100644
index 000000000000..53c936083968
--- /dev/null
+++ b/aio/content/examples/component-styles/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "Component Styles",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.native.*",
+    "!**/*.[1].*"
+  ],
+  "tags": ["CSS"]
+}
diff --git a/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts b/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..07ab501be78a
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,102 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Dependency Injection Cookbook', function () {
+
+    beforeAll(function () {
+        browser.get('');
+    });
+
+    it('should render Logged in User example', function () {
+      let loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0);
+      expect(loggedInUser).toBeDefined();
+    });
+
+    it('"Bombasto" should be the logged in user', function () {
+      let loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
+      expect(loggedInUser).toBeDefined();
+    });
+
+    it('should render sorted heroes', function () {
+      let sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0);
+      expect(sortedHeroes).toBeDefined();
+    });
+
+    it('Mr. Nice should be in sorted heroes', function () {
+      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Mr. Nice" and position()=2]')).get(0);
+      expect(sortedHero).toBeDefined();
+    });
+
+    it('RubberMan should be in sorted heroes', function () {
+      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0);
+      expect(sortedHero).toBeDefined();
+    });
+
+    it('Magma should be in sorted heroes', function () {
+      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
+      expect(sortedHero).toBeDefined();
+    });
+
+    it('should render Hero of the Month', function () {
+      let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
+      expect(heroOfTheMonth).toBeDefined();
+    });
+
+    it('should render Hero Bios', function () {
+      let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
+      expect(heroBios).toBeDefined();
+    });
+
+    it('should render Magma\'s description in Hero Bios', function () {
+      let magmaText =  element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0);
+      expect(magmaText).toBeDefined();
+    });
+
+    it('should render Magma\'s phone in Hero Bios and Contacts', function () {
+      let magmaPhone =  element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0);
+      expect(magmaPhone).toBeDefined();
+    });
+
+    it('should render Hero-of-the-Month runner-ups', function () {
+      let runnersUp =  element(by.id('rups1')).getText();
+      expect(runnersUp).toContain('RubberMan, Mr. Nice');
+    });
+
+    it('should render DateLogger log entry in Hero-of-the-Month', function () {
+      let logs =  element.all(by.id('logs')).get(0).getText();
+      expect(logs).toContain('INFO: starting up at');
+    });
+
+    it('should highlight Hero Bios and Contacts container when mouseover', function () {
+      let target = element(by.css('div[appHighlight="yellow"]'));
+      let yellow = 'rgba(255, 255, 0, 1)';
+
+      expect(target.getCssValue('background-color')).not.toEqual(yellow);
+      browser.actions().mouseMove(target.getWebElement()).perform();
+      expect(target.getCssValue('background-color')).toEqual(yellow);
+    });
+
+    describe('in Parent Finder', function () {
+      let cathy1 = element(by.css('alex cathy'));
+      let craig1 = element(by.css('alex craig'));
+      let carol1 = element(by.css('alex carol p'));
+      let carol2 = element(by.css('barry carol p'));
+
+      it('"Cathy" should find "Alex" via the component class', function () {
+        expect(cathy1.getText()).toContain('Found Alex via the component');
+      });
+
+      it('"Craig" should not find "Alex" via the base class', function () {
+        expect(craig1.getText()).toContain('Did not find Alex via the base');
+      });
+
+      it('"Carol" within "Alex" should have "Alex" parent', function () {
+        expect(carol1.getText()).toContain('Alex');
+      });
+
+      it('"Carol" within "Barry" should have "Barry" parent', function () {
+        expect(carol2.getText()).toContain('Barry');
+      });
+    });
+});
diff --git a/aio/content/examples/dependency-injection-in-action/example-config.json b/aio/content/examples/dependency-injection-in-action/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts b/aio/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..09a0592d008c
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule }  from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  providers: [],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/app.component.html b/aio/content/examples/dependency-injection-in-action/src/app/app.component.html
new file mode 100644
index 000000000000..45cc12bc2df8
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/app.component.html
@@ -0,0 +1,38 @@
+<h1>DI Cookbook</h1>
+<div class="di-component">
+  <h3>Logged in user</h3>
+  <div>Name: {{userContext.name}}</div>
+  <div>Role: {{userContext.role}}</div>
+</div>
+
+<div class="di-component">
+  <h3>Hero Bios</h3>
+  <app-hero-bios></app-hero-bios>
+</div>
+
+<!-- #docregion highlight -->
+<div id="highlight"  class="di-component"  appHighlight>
+  <h3>Hero Bios and Contacts</h3>
+  <div appHighlight="yellow">
+    <app-hero-bios-and-contacts></app-hero-bios-and-contacts>
+  </div>
+</div>
+<!-- #enddocregion highlight -->
+
+<div class="di-component">
+  <app-hero-of-the-month></app-hero-of-the-month>
+</div>
+
+<div class="di-component">
+  <h3>Unsorted Heroes</h3>
+  <app-unsorted-heroes></app-unsorted-heroes>
+</div>
+
+<div class="di-component">
+  <h3>Sorted Heroes</h3>
+  <app-sorted-heroes></app-sorted-heroes>
+</div>
+
+<div class="di-component">
+  <app-parent-finder></app-parent-finder>
+</div>
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
new file mode 100644
index 000000000000..b29f3b412699
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
@@ -0,0 +1,29 @@
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion import-services
+import { LoggerService }      from './logger.service';
+import { UserContextService } from './user-context.service';
+import { UserService }        from './user.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+// #docregion providers
+  providers: [ LoggerService, UserContextService, UserService ]
+// #enddocregion providers
+})
+export class AppComponent {
+// #enddocregion import-services
+
+  private userId = 1;
+
+  // #docregion ctor
+  constructor(logger: LoggerService, public userContext: UserContextService) {
+    userContext.loadUser(this.userId);
+    logger.logInfo('AppComponent initialized');
+  }
+  // #enddocregion ctor
+// #docregion import-services
+}
+// #enddocregion import-services
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/app.module.ts b/aio/content/examples/dependency-injection-in-action/src/app/app.module.ts
new file mode 100644
index 000000000000..490670a71c24
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/app.module.ts
@@ -0,0 +1,74 @@
+// #docregion
+import { BrowserModule }                from '@angular/platform-browser';
+import { FormsModule }                  from '@angular/forms';
+import { HttpClientModule }             from '@angular/common/http';
+
+// import { AppRoutingModule }             from './app-routing.module';
+import { LocationStrategy,
+         HashLocationStrategy }         from '@angular/common';
+import { NgModule }                     from '@angular/core';
+
+import { HeroData }                     from './hero-data';
+import { InMemoryWebApiModule }         from 'angular-in-memory-web-api';
+
+
+import { AppComponent }                 from './app.component';
+import { HeroBioComponent }             from './hero-bio.component';
+import { HeroBiosComponent,
+         HeroBiosAndContactsComponent } from './hero-bios.component';
+import { HeroOfTheMonthComponent }      from './hero-of-the-month.component';
+import { HeroContactComponent }         from './hero-contact.component';
+import { HeroesBaseComponent,
+         SortedHeroesComponent }        from './sorted-heroes.component';
+import { HighlightDirective }           from './highlight.directive';
+import { ParentFinderComponent,
+         AlexComponent,
+         AliceComponent,
+         CarolComponent,
+         ChrisComponent,
+         CraigComponent,
+         CathyComponent,
+         BarryComponent,
+         BethComponent,
+         BobComponent }                 from './parent-finder.component';
+
+const declarations = [
+    AppComponent,
+    HeroBiosComponent, HeroBiosAndContactsComponent, HeroBioComponent,
+    HeroesBaseComponent, SortedHeroesComponent,
+    HeroOfTheMonthComponent, HeroContactComponent,
+    HighlightDirective,
+    ParentFinderComponent,
+];
+
+const a_components = [AliceComponent, AlexComponent ];
+
+const b_components = [ BarryComponent, BethComponent, BobComponent ];
+
+const c_components = [
+  CarolComponent, ChrisComponent, CraigComponent,
+  CathyComponent
+];
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    InMemoryWebApiModule.forRoot(HeroData)
+    // AppRoutingModule TODO: add routes
+  ],
+  declarations: [
+    declarations,
+    a_components,
+    b_components,
+    c_components,
+  ],
+  bootstrap: [ AppComponent ],
+  // #docregion providers
+  providers: [
+    { provide: LocationStrategy, useClass: HashLocationStrategy }
+  ]
+  // #enddocregion providers
+})
+export class AppModule { }
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts
new file mode 100644
index 000000000000..465e16cf9b3f
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts
@@ -0,0 +1,19 @@
+/* tslint:disable:one-line*/
+// #docregion
+import { Injectable }    from '@angular/core';
+
+import { LoggerService } from './logger.service';
+
+// #docregion date-logger-service
+@Injectable()
+// #docregion date-logger-service-signature
+export class DateLoggerService extends LoggerService
+// #enddocregion date-logger-service-signature
+{
+  logInfo(msg: any)  { super.logInfo(stamp(msg)); }
+  logDebug(msg: any) { super.logInfo(stamp(msg)); }
+  logError(msg: any) { super.logError(stamp(msg)); }
+}
+
+function stamp(msg: any) { return msg + ' at ' + new Date(); }
+// #enddocregion date-logger-service
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
new file mode 100644
index 000000000000..1e573e6acd5e
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
@@ -0,0 +1,27 @@
+// #docregion
+import { Component, Input, OnInit } from '@angular/core';
+
+import { HeroCacheService }         from './hero-cache.service';
+
+// #docregion component
+@Component({
+  selector: 'app-hero-bio',
+  // #docregion template
+  template: `
+    <h4>{{hero.name}}</h4>
+    <ng-content></ng-content>
+    <textarea cols="25" [(ngModel)]="hero.description"></textarea>`,
+  // #enddocregion template
+  providers: [HeroCacheService]
+})
+
+export class HeroBioComponent implements OnInit  {
+  @Input() heroId: number;
+
+  constructor(private heroCache: HeroCacheService) { }
+
+  ngOnInit() { this.heroCache.fetchCachedHero(this.heroId); }
+
+  get hero() { return this.heroCache.hero; }
+}
+// #enddocregion component
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
new file mode 100644
index 000000000000..07f9a85d6b62
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
@@ -0,0 +1,48 @@
+// #docplaster
+// #docregion
+import { Component }             from '@angular/core';
+
+import { HeroService }          from './hero.service';
+import { LoggerService }        from './logger.service';
+
+//////// HeroBiosComponent ////
+// #docregion simple
+@Component({
+  selector: 'app-hero-bios',
+  template: `
+    <app-hero-bio [heroId]="1"></app-hero-bio>
+    <app-hero-bio [heroId]="2"></app-hero-bio>
+    <app-hero-bio [heroId]="3"></app-hero-bio>`,
+  providers: [HeroService]
+})
+export class HeroBiosComponent {
+// #enddocregion simple
+// #docregion ctor
+  constructor(logger: LoggerService) {
+    logger.logInfo('Creating HeroBiosComponent');
+  }
+// #enddocregion ctor
+// #docregion simple
+}
+// #enddocregion simple
+
+//////// HeroBiosAndContactsComponent ////
+// #docregion hero-bios-and-contacts
+@Component({
+  selector: 'app-hero-bios-and-contacts',
+  // #docregion template
+  template: `
+    <app-hero-bio [heroId]="1"> <app-hero-contact></app-hero-contact> </app-hero-bio>
+    <app-hero-bio [heroId]="2"> <app-hero-contact></app-hero-contact> </app-hero-bio>
+    <app-hero-bio [heroId]="3"> <app-hero-contact></app-hero-contact> </app-hero-bio>`,
+  // #enddocregion template
+  // #docregion class-provider
+  providers: [HeroService]
+  // #enddocregion class-provider
+})
+export class HeroBiosAndContactsComponent {
+  constructor(logger: LoggerService) {
+    logger.logInfo('Creating HeroBiosAndContactsComponent');
+  }
+}
+// #enddocregion hero-bios-and-contacts
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts
new file mode 100644
index 000000000000..6dbc7a0c4f8f
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Injectable }  from '@angular/core';
+
+import { Hero }        from './hero';
+import { HeroService } from './hero.service';
+
+// #docregion service
+@Injectable()
+export class HeroCacheService {
+  hero: Hero;
+  constructor(private heroService: HeroService) {}
+
+  fetchCachedHero(id: number) {
+    if (!this.hero) {
+      this.hero = this.heroService.getHeroById(id);
+    }
+    return this.hero;
+  }
+}
+// #enddocregion service
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
new file mode 100644
index 000000000000..205e1f933545
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
@@ -0,0 +1,40 @@
+// #docplaster
+// #docregion
+import { Component, Host, Optional } from '@angular/core';
+
+import { HeroCacheService } from './hero-cache.service';
+import { LoggerService }    from './logger.service';
+
+// #docregion component
+@Component({
+  selector: 'app-hero-contact',
+  template: `
+  <div>Phone #: {{phoneNumber}}
+  <span *ngIf="hasLogger">!!!</span></div>`
+})
+export class HeroContactComponent {
+
+  hasLogger = false;
+
+  constructor(
+  // #docregion ctor-params
+      @Host() // limit to the host component's instance of the HeroCacheService
+      private heroCache: HeroCacheService,
+
+      @Host()     // limit search for logger; hides the application-wide logger
+      @Optional() // ok if the logger doesn't exist
+      private loggerService: LoggerService
+  // #enddocregion ctor-params
+  ) {
+    if (loggerService) {
+      this.hasLogger = true;
+      loggerService.logInfo('HeroContactComponent can log!');
+    }
+  // #docregion ctor
+  }
+  // #enddocregion ctor
+
+  get phoneNumber() { return this.heroCache.hero.phone; }
+
+}
+// #enddocregion component
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-data.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-data.ts
new file mode 100644
index 000000000000..10cdbcaab1b8
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-data.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Hero } from './hero';
+
+export class HeroData {
+  createDb() {
+    let heroes = [
+      new Hero(1, 'Windstorm'),
+      new Hero(2, 'Bombasto'),
+      new Hero(3, 'Magneta'),
+      new Hero(4, 'Tornado')
+    ];
+    return {heroes};
+  }
+}
diff --git a/aio/content/examples/dependency-injection-in-action/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
new file mode 100644
index 000000000000..4eb3a1406083
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts
@@ -0,0 +1,26 @@
+// Illustrative (not used), mini-version of the actual HeroOfTheMonthComponent
+// Injecting with the MinimalLogger "interface-class"
+import { Component, NgModule } from '@angular/core';
+import { LoggerService }       from './logger.service';
+import { MinimalLogger }       from './minimal-logger.service';
+
+// #docregion
+@Component({
+  selector: 'app-hero-of-the-month',
+  templateUrl: './hero-of-the-month.component.html',
+  // TODO: move this aliasing, `useExisting` provider to the AppModule
+  providers: [{ provide: MinimalLogger, useExisting: LoggerService }]
+})
+export class HeroOfTheMonthComponent {
+  logs: string[] = [];
+  constructor(logger: MinimalLogger) {
+    logger.logInfo('starting up');
+  }
+}
+// #enddocregion
+
+// This NgModule exists only to avoid the Angular language service's "undeclared component" error
+@NgModule({
+  declarations: [ HeroOfTheMonthComponent ]
+})
+class NoopModule {}
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.html b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.html
new file mode 100644
index 000000000000..f0ae619d6ad1
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.html
@@ -0,0 +1,9 @@
+<h3>{{title}}</h3>
+<div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
+<div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
+<div>Runners-up: <strong id="rups1">{{runnersUp}}</strong></div>
+
+<p>Logs:</p>
+<div id="logs">
+  <div *ngFor="let log of logs">{{log}}</div>
+</div>
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
new file mode 100644
index 000000000000..2b44cdfe709e
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
@@ -0,0 +1,63 @@
+/* tslint:disable:one-line*/
+// #docplaster
+// #docregion injection-token
+import { InjectionToken } from '@angular/core';
+
+export const TITLE = new InjectionToken<string>('title');
+// #enddocregion injection-token
+
+// #docregion hero-of-the-month
+import { Component, Inject } from '@angular/core';
+
+import { DateLoggerService } from './date-logger.service';
+import { Hero }              from './hero';
+import { HeroService }       from './hero.service';
+import { LoggerService }     from './logger.service';
+import { MinimalLogger }     from './minimal-logger.service';
+import { RUNNERS_UP,
+         runnersUpFactory }  from './runners-up';
+
+// #enddocregion hero-of-the-month
+// #docregion some-hero
+const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
+// #enddocregion some-hero
+
+// #docregion hero-of-the-month
+@Component({
+  selector: 'app-hero-of-the-month',
+  templateUrl: './hero-of-the-month.component.html',
+  providers: [
+    // #docregion use-value
+    { provide: Hero,          useValue:    someHero },
+    // #docregion provide-injection-token
+    { provide: TITLE,         useValue:   'Hero of the Month' },
+    // #enddocregion provide-injection-token
+    // #enddocregion use-value
+    // #docregion use-class
+    { provide: HeroService,   useClass:    HeroService },
+    { provide: LoggerService, useClass:    DateLoggerService },
+    // #enddocregion use-class
+    // #docregion use-existing
+    { provide: MinimalLogger, useExisting: LoggerService },
+    // #enddocregion use-existing
+    // #docregion provide-injection-token, use-factory
+    { provide: RUNNERS_UP,    useFactory:  runnersUpFactory(2), deps: [Hero, HeroService] }
+    // #enddocregion provide-injection-token, use-factory
+  ]
+})
+export class HeroOfTheMonthComponent {
+  logs: string[] = [];
+
+// #docregion ctor-signature
+  constructor(
+      logger: MinimalLogger,
+      public heroOfTheMonth: Hero,
+      @Inject(RUNNERS_UP) public runnersUp: string,
+      @Inject(TITLE) public title: string)
+// #enddocregion ctor-signature
+  {
+    this.logs = logger.logs;
+    logger.logInfo('starting up');
+  }
+}
+// #enddocregion hero-of-the-month
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts
new file mode 100644
index 000000000000..6eb5ffa14b0e
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Hero }       from './hero';
+
+@Injectable()
+export class HeroService {
+
+  // TODO: move to database
+  private heroes: Array<Hero> = [
+    new Hero(1, 'RubberMan', 'Hero of many talents', '123-456-7899'),
+    new Hero(2, 'Magma', 'Hero of all trades', '555-555-5555'),
+    new Hero(3, 'Mr. Nice', 'The name says it all', '111-222-3333')
+ ];
+
+  getHeroById(id: number): Hero {
+    return this.heroes.find(hero => hero.id === id);
+  }
+
+  getAllHeroes(): Array<Hero> {
+    return this.heroes;
+  }
+}
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero.ts
new file mode 100644
index 000000000000..c17069e72705
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero.ts
@@ -0,0 +1,9 @@
+// #docregion
+export class Hero {
+  constructor(
+    public id: number,
+    public name: string,
+    public description?: string,
+    public phone?: string) {
+  }
+}
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts b/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
new file mode 100644
index 000000000000..94b4e0b7fe0b
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
@@ -0,0 +1,29 @@
+// #docplaster
+// #docregion
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appHighlight]'
+})
+export class HighlightDirective {
+
+  @Input('appHighlight') highlightColor: string;
+
+  private el: HTMLElement;
+
+  constructor(el: ElementRef) {
+    this.el = el.nativeElement;
+  }
+
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || 'cyan');
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.el.style.backgroundColor = color;
+  }
+}
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/logger.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/logger.service.ts
new file mode 100644
index 000000000000..df8ee6b9c70a
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/logger.service.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class LoggerService {
+  logs: string[] = [];
+
+  logInfo(msg: any)  { this.log(`INFO: ${msg}`); }
+  logDebug(msg: any) { this.log(`DEBUG: ${msg}`); }
+  logError(msg: any) { this.log(`ERROR: ${msg}`, true); }
+
+  private log(msg: any, isErr = false) {
+    this.logs.push(msg);
+    isErr ? console.error(msg) : console.log(msg);
+  }
+}
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts
new file mode 100644
index 000000000000..d87fa594d165
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts
@@ -0,0 +1,22 @@
+// #docregion
+// Class used as a "narrowing" interface that exposes a minimal logger
+// Other members of the actual implementation are invisible
+export abstract class MinimalLogger {
+  logs: string[];
+  logInfo: (msg: string) => void;
+}
+// #enddocregion
+
+/*
+// Transpiles to:
+// #docregion minimal-logger-transpiled
+  var MinimalLogger = (function () {
+    function MinimalLogger() {}
+    return MinimalLogger;
+  }());
+  exports("MinimalLogger", MinimalLogger);
+// #enddocregion minimal-logger-transpiled
+*/
+
+// See http://stackoverflow.com/questions/43154832/unexpected-token-export-in-angular-app-with-systemjs-and-typescript/
+export const _ = 0;
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
new file mode 100644
index 000000000000..4cf6ea7acc29
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
@@ -0,0 +1,215 @@
+/* tslint:disable:no-unused-variable component-selector-name one-line check-open-brace */
+/* tslint:disable:*/
+// #docplaster
+// #docregion
+import { Component, forwardRef, Optional, SkipSelf } from '@angular/core';
+
+// A component base class (see AlexComponent)
+export abstract class Base { name = 'Count Basie'; }
+
+// Marker class, used as an interface
+// #docregion parent
+export abstract class Parent { name: string; }
+// #enddocregion parent
+
+const DifferentParent = Parent;
+
+// #docregion provide-parent, provide-the-parent
+// Helper method to provide the current component instance in the name of a `parentType`.
+// #enddocregion provide-the-parent
+// The `parentType` defaults to `Parent` when omitting the second parameter.
+// #docregion provide-the-parent
+const provideParent =
+// #enddocregion provide-parent, provide-the-parent
+// #docregion provide-parent
+  (component: any, parentType?: any) => {
+    return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
+  };
+// #enddocregion provide-parent
+
+// Simpler syntax version that always provides the component in the name of `Parent`.
+const provideTheParent =
+// #docregion provide-the-parent
+  (component: any) => {
+    return { provide: Parent, useExisting: forwardRef(() => component) };
+  };
+// #enddocregion provide-the-parent
+
+
+///////// C - Child //////////
+// #docregion carol
+const templateC = `
+  <div class="c">
+    <h3>{{name}}</h3>
+    <p>My parent is {{parent?.name}}</p>
+  </div>`;
+
+@Component({
+  selector: 'carol',
+  template: templateC
+})
+// #docregion carol-class
+export class CarolComponent {
+  name = 'Carol';
+  // #docregion carol-ctor
+  constructor( @Optional() public parent: Parent ) { }
+  // #enddocregion carol-ctor
+}
+// #enddocregion carol-class
+// #enddocregion carol
+
+@Component({
+  selector: 'chris',
+  template: templateC
+})
+export class ChrisComponent {
+  name = 'Chris';
+  constructor( @Optional() public parent: Parent ) { }
+}
+
+//////  Craig ///////////
+/**
+ * Show we cannot inject a parent by its base class.
+ */
+// #docregion craig
+@Component({
+  selector: 'craig',
+  template: `
+  <div class="c">
+    <h3>Craig</h3>
+    {{alex ? 'Found' : 'Did not find'}} Alex via the base class.
+  </div>`
+})
+export class CraigComponent {
+  constructor( @Optional() public alex: Base ) { }
+}
+// #enddocregion craig
+
+//////// B - Parent /////////
+// #docregion barry
+const templateB = `
+  <div class="b">
+    <div>
+      <h3>{{name}}</h3>
+      <p>My parent is {{parent?.name}}</p>
+    </div>
+    <carol></carol>
+    <chris></chris>
+  </div>`;
+
+@Component({
+  selector:   'barry',
+  template:   templateB,
+  providers:  [{ provide: Parent, useExisting: forwardRef(() => BarryComponent) }]
+})
+export class BarryComponent implements Parent {
+  name = 'Barry';
+// #docregion barry-ctor
+  constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+// #enddocregion barry-ctor
+}
+// #enddocregion barry
+
+@Component({
+  selector:   'bob',
+  template:   templateB,
+  providers:  [ provideParent(BobComponent) ]
+})
+export class BobComponent implements Parent {
+  name = 'Bob';
+  constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+}
+
+@Component({
+  selector:   'beth',
+  template:   templateB,
+// #docregion beth-providers
+  providers:  [ provideParent(BethComponent, DifferentParent) ]
+// #enddocregion beth-providers
+})
+export class BethComponent implements Parent {
+  name = 'Beth';
+  constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+}
+
+///////// A - Grandparent //////
+
+// #docregion alex, alex-1
+@Component({
+  selector: 'alex',
+  template: `
+    <div class="a">
+      <h3>{{name}}</h3>
+      <cathy></cathy>
+      <craig></craig>
+      <carol></carol>
+    </div>`,
+// #enddocregion alex-1
+// #docregion alex-providers
+  providers: [{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }],
+// #enddocregion alex-providers
+// #docregion alex-1
+})
+// #enddocregion alex-1
+// TODO: Add `... implements Parent` to class signature
+// #docregion alex-1
+// #docregion alex-class-signature
+export class AlexComponent extends Base
+// #enddocregion alex-class-signature
+{
+  name = 'Alex';
+}
+// #enddocregion alex, alex-1
+
+/////
+
+// #docregion alice
+@Component({
+  selector: 'alice',
+  template: `
+    <div class="a">
+      <h3>{{name}}</h3>
+      <barry></barry>
+      <beth></beth>
+      <bob></bob>
+      <carol></carol>
+    </div> `,
+// #docregion alice-providers
+  providers:  [ provideParent(AliceComponent) ]
+// #enddocregion alice-providers
+})
+// #docregion alice-class-signature
+export class AliceComponent implements Parent
+// #enddocregion alice-class-signature
+{
+  name = 'Alice';
+}
+// #enddocregion alice
+
+//////  Cathy ///////////
+/**
+ * Show we can inject a parent by component type
+ */
+// #docregion cathy
+@Component({
+  selector: 'cathy',
+  template: `
+  <div class="c">
+    <h3>Cathy</h3>
+    {{alex ? 'Found' : 'Did not find'}} Alex via the component class.<br>
+  </div>`
+})
+export class CathyComponent {
+  constructor( @Optional() public alex: AlexComponent ) { }
+}
+// #enddocregion cathy
+
+///////// ParentFinder //////
+@Component({
+  selector: 'app-parent-finder',
+  template: `
+    <h2>Parent Finder</h2>
+    <alex></alex>
+    <alice></alice>`
+})
+export class ParentFinderComponent { }
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts b/aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts
new file mode 100644
index 000000000000..0ce81ca55cb6
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts
@@ -0,0 +1,26 @@
+// #docplaster
+// #docregion
+import { InjectionToken } from '@angular/core';
+
+import { Hero }        from './hero';
+import { HeroService } from './hero.service';
+
+// #docregion runners-up
+export const RUNNERS_UP = new InjectionToken<string>('RunnersUp');
+// #enddocregion runners-up
+
+// #docregion factory-synopsis
+export function runnersUpFactory(take: number) {
+  return (winner: Hero, heroService: HeroService): string => {
+    /* ... */
+// #enddocregion factory-synopsis
+    return heroService
+          .getAllHeroes()
+          .filter((hero) => hero.name !== winner.name)
+          .map(hero => hero.name)
+          .slice(0, Math.max(0, take))
+          .join(', ');
+// #docregion factory-synopsis
+  };
+};
+// #enddocregion factory-synopsis
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
new file mode 100644
index 000000000000..f5100dddef61
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Hero }              from './hero';
+import { HeroService }       from './hero.service';
+
+/////// HeroesBaseComponent /////
+// #docregion heroes-base, injection
+@Component({
+  selector: 'app-unsorted-heroes',
+  template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
+  providers: [HeroService]
+})
+export class HeroesBaseComponent implements OnInit {
+  constructor(private heroService: HeroService) { }
+// #enddocregion injection
+
+  heroes: Array<Hero>;
+
+  ngOnInit() {
+    this.heroes = this.heroService.getAllHeroes();
+    this.afterGetHeroes();
+  }
+
+  // Post-process heroes in derived class override.
+  protected afterGetHeroes() {}
+
+// #docregion injection
+}
+// #enddocregion heroes-base,injection
+
+/////// SortedHeroesComponent /////
+// #docregion sorted-heroes
+@Component({
+  selector: 'app-sorted-heroes',
+  template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
+  providers: [HeroService]
+})
+export class SortedHeroesComponent extends HeroesBaseComponent {
+  constructor(heroService: HeroService) {
+    super(heroService);
+  }
+
+  protected afterGetHeroes() {
+    this.heroes = this.heroes.sort((h1, h2) => {
+      return h1.name < h2.name ? -1 :
+            (h1.name > h2.name ? 1 : 0);
+    });
+  }
+}
+// #enddocregion sorted-heroes
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
new file mode 100644
index 000000000000..ed394fc73413
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion
+import { Injectable }    from '@angular/core';
+
+import { LoggerService } from './logger.service';
+import { UserService }   from './user.service';
+
+// #docregion injectables, injectable
+@Injectable()
+export class UserContextService {
+// #enddocregion injectables, injectable
+  name: string;
+  role: string;
+  loggedInSince: Date;
+
+  // #docregion ctor, injectables
+  constructor(private userService: UserService, private loggerService: LoggerService) {
+   // #enddocregion ctor, injectables
+    this.loggedInSince = new Date();
+   // #docregion ctor, injectables
+  }
+  // #enddocregion ctor, injectables
+
+  loadUser(userId: number) {
+    let user = this.userService.getUserById(userId);
+    this.name = user.name;
+    this.role = user.role;
+
+    this.loggerService.logDebug('loaded User');
+  }
+// #docregion injectables, injectable
+}
+// #enddocregion injectables, injectable
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/user.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/user.service.ts
new file mode 100644
index 000000000000..c48b025a0864
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/app/user.service.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class UserService {
+
+  getUserById(userId: number): any {
+    return {name: 'Bombasto', role: 'Admin'};
+  }
+}
diff --git a/aio/content/examples/dependency-injection-in-action/src/assets/sample.css b/aio/content/examples/dependency-injection-in-action/src/assets/sample.css
new file mode 100644
index 000000000000..a8b59efd05d7
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/assets/sample.css
@@ -0,0 +1,26 @@
+.di-component{
+  padding: 10px;
+  width:300px;
+  margin-bottom: 10px;
+}
+div[myHighlight] {
+  padding: 2px 8px;
+}
+
+/* Parent Finder */
+.a, .b, .c {
+  margin: 6px 2px 6px;
+  padding: 4px 6px;
+}
+.a {
+  border: solid 2px black;
+}
+.b {
+  background: lightblue;
+  border: solid 1px darkblue;
+  display: flex;
+}
+.c {
+  background: pink;
+  border: solid 1px red;
+}
\ No newline at end of file
diff --git a/aio/content/examples/dependency-injection-in-action/src/index.html b/aio/content/examples/dependency-injection-in-action/src/index.html
new file mode 100644
index 000000000000..8b36042f0cb7
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/">
+    <meta charset="UTF-8">
+    <title>Dependency Injection</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="assets/sample.css">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/dependency-injection-in-action/src/main.ts b/aio/content/examples/dependency-injection-in-action/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/dependency-injection-in-action/stackblitz.json b/aio/content/examples/dependency-injection-in-action/stackblitz.json
new file mode 100644
index 000000000000..20569051c1ce
--- /dev/null
+++ b/aio/content/examples/dependency-injection-in-action/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Dependency Injection",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/aio/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts b/aio/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..12fe6ae474ec
--- /dev/null
+++ b/aio/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,204 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
+describe('Dependency Injection Tests', function () {
+
+  let expectedMsg: string;
+  let expectedMsgRx: RegExp;
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  describe('Cars:', function() {
+
+    it('DI car displays as expected', function () {
+      expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
+      expect(element(by.css('#di')).getText()).toEqual(expectedMsg);
+    });
+
+    it('No DI car displays as expected', function () {
+      expectedMsg = 'No DI car with 4 cylinders and Flintstone tires.';
+      expect(element(by.css('#nodi')).getText()).toEqual(expectedMsg);
+    });
+
+    it('Injector car displays as expected', function () {
+      expectedMsg = 'Injector car with 4 cylinders and Flintstone tires.';
+      expect(element(by.css('#injector')).getText()).toEqual(expectedMsg);
+    });
+
+    it('Factory car displays as expected', function () {
+      expectedMsg = 'Factory car with 4 cylinders and Flintstone tires.';
+      expect(element(by.css('#factory')).getText()).toEqual(expectedMsg);
+    });
+
+    it('Simple car displays as expected', function () {
+      expectedMsg = 'Simple car with 4 cylinders and Flintstone tires.';
+      expect(element(by.css('#simple')).getText()).toEqual(expectedMsg);
+    });
+
+    it('Super car displays as expected', function () {
+      expectedMsg = 'Super car with 12 cylinders and Flintstone tires.';
+      expect(element(by.css('#super')).getText()).toEqual(expectedMsg);
+    });
+
+    it('Test car displays as expected', function () {
+      expectedMsg = 'Test car with 8 cylinders and YokoGoodStone tires.';
+      expect(element(by.css('#test')).getText()).toEqual(expectedMsg);
+    });
+  });
+
+  describe('Other Injections:', function() {
+    it('DI car displays as expected', function () {
+      expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
+      expect(element(by.css('#car')).getText()).toEqual(expectedMsg);
+    });
+
+    it('Hero displays as expected', function () {
+      expectedMsg = 'Mr. Nice';
+      expect(element(by.css('#hero')).getText()).toEqual(expectedMsg);
+    });
+
+    it('Optional injection displays as expected', function () {
+      expectedMsg = 'R.O.U.S.\'s? I don\'t think they exist!';
+      expect(element(by.css('#rodent')).getText()).toEqual(expectedMsg);
+    });
+  });
+
+  describe('Tests:', function() {
+
+    it('Tests display as expected', function () {
+      expectedMsgRx = /Tests passed/;
+      expect(element(by.css('#tests')).getText()).toMatch(expectedMsgRx);
+    });
+
+  });
+
+  describe('Provider variations:', function() {
+
+    it('P1 (class) displays as expected', function () {
+      expectedMsg = 'Hello from logger provided with Logger class';
+      expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
+    });
+
+    it('P3 (provide) displays as expected', function () {
+      expectedMsg = 'Hello from logger provided with useClass:Logger';
+      expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
+    });
+
+    it('P4 (useClass:BetterLogger) displays as expected', function () {
+      expectedMsg = 'Hello from logger provided with useClass:BetterLogger';
+      expect(element(by.css('#p4')).getText()).toEqual(expectedMsg);
+    });
+
+    it('P5 (useClass:EvenBetterLogger - dependency)  displays as expected', function () {
+      expectedMsg = 'Message to Bob: Hello from EvenBetterlogger';
+      expect(element(by.css('#p5')).getText()).toEqual(expectedMsg);
+    });
+
+    it('P6a (no alias) displays as expected', function () {
+      expectedMsg = 'Hello OldLogger (but we want NewLogger)';
+      expect(element(by.css('#p6a')).getText()).toEqual(expectedMsg);
+    });
+
+    it('P6b (alias) displays as expected', function () {
+      expectedMsg = 'Hello from NewLogger (via aliased OldLogger)';
+      expect(element(by.css('#p6b')).getText()).toEqual(expectedMsg);
+    });
+
+    it('P7 (useValue) displays as expected', function () {
+      expectedMsg = 'Silent logger says "Shhhhh!". Provided via "useValue"';
+      expect(element(by.css('#p7')).getText()).toEqual(expectedMsg);
+    });
+
+    it('P8 (useFactory) displays as expected', function () {
+      expectedMsg = 'Hero service injected successfully via heroServiceProvider';
+      expect(element(by.css('#p8')).getText()).toEqual(expectedMsg);
+    });
+
+    it('P9 (InjectionToken) displays as expected', function () {
+      expectedMsg = 'APP_CONFIG Application title is Dependency Injection';
+      expect(element(by.css('#p9')).getText()).toEqual(expectedMsg);
+    });
+
+    it('P10 (optional dependency) displays as expected', function () {
+      expectedMsg = 'Optional logger was not available';
+      expect(element(by.css('#p10')).getText()).toEqual(expectedMsg);
+    });
+  });
+
+  describe('User/Heroes:', function() {
+    it('User is Bob - unauthorized', function () {
+      expectedMsgRx = /Bob, is not authorized/;
+      expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
+    });
+
+    it('should have button', function () {
+      expect(element.all(by.cssContainingText('button', 'Next User'))
+        .get(0).isDisplayed()).toBe(true, '\'Next User\' button should be displayed');
+    });
+
+    it('unauthorized user should have multiple unauthorized heroes', function () {
+      let heroes = element.all(by.css('#unauthorized app-hero-list div'));
+      expect(heroes.count()).toBeGreaterThan(0);
+    });
+
+    it('unauthorized user should have no secret heroes', function () {
+      let heroes = element.all(by.css('#unauthorized app-hero-list div'));
+      expect(heroes.count()).toBeGreaterThan(0);
+
+      let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
+        return elem.getText().then((text: string) => {
+          return /secret/.test(text);
+        });
+      });
+
+      expect(filteredHeroes.count()).toEqual(0);
+    });
+
+    it('unauthorized user should have no authorized heroes listed', function () {
+      expect(element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0);
+    });
+
+    describe('after button click', function() {
+
+      beforeAll(function (done: any) {
+        let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
+        buttonEle.click().then(done, done);
+      });
+
+      it('User is Alice  - authorized', function () {
+        expectedMsgRx = /Alice, is authorized/;
+        expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
+      });
+
+      it('authorized user should have multiple authorized heroes ', function () {
+        let heroes = element.all(by.css('#authorized app-hero-list div'));
+        expect(heroes.count()).toBeGreaterThan(0);
+      });
+
+      it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', function () {
+        let heroes = element.all(by.css('#tspAuthorized app-hero-list div'));
+        expect(heroes.count()).toBeGreaterThan(0);
+      });
+
+      it('authorized user should have secret heroes', function () {
+        let heroes = element.all(by.css('#authorized app-hero-list div'));
+        expect(heroes.count()).toBeGreaterThan(0);
+
+        let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number) {
+         return elem.getText().then(function(text: string) {
+            return /secret/.test(text);
+          });
+        });
+
+        expect(filteredHeroes.count()).toBeGreaterThan(0);
+      });
+
+      it('authorized user should have no unauthorized heroes listed', function () {
+        expect(element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0);
+      });
+    });
+  });
+});
diff --git a/aio/content/examples/dependency-injection/example-config.json b/aio/content/examples/dependency-injection/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/dependency-injection/src/app/app-config.ts b/aio/content/examples/dependency-injection/src/app/app-config.ts
new file mode 100644
index 000000000000..81c0479ffdf4
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/app-config.ts
@@ -0,0 +1,10 @@
+/*
+  Must put this interface in its own file instead of app.config.ts
+  or else TypeScript gives a (bogus) warning:
+  WARNING in ./src/app/... .ts
+  "export 'AppConfig' was not found in './app.config'
+*/
+export interface AppConfig {
+  apiEndpoint: string;
+  title: string;
+}
diff --git a/aio/content/examples/dependency-injection/src/app/app.component.1.ts b/aio/content/examples/dependency-injection/src/app/app.component.1.ts
new file mode 100644
index 000000000000..a33782dc90d1
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/app.component.1.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>{{title}}</h1>
+    <app-car></app-car>
+    <app-heroes></app-heroes>
+  `
+})
+
+export class AppComponent {
+  title = 'Dependency Injection';
+}
diff --git a/aio/content/examples/dependency-injection/src/app/app.component.2.ts b/aio/content/examples/dependency-injection/src/app/app.component.2.ts
new file mode 100644
index 000000000000..c8a2c996b2ff
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/app.component.2.ts
@@ -0,0 +1,26 @@
+// #docregion
+// #docregion imports
+import { Component, Inject } from '@angular/core';
+
+import { APP_CONFIG, AppConfig }    from './app.config';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>{{title}}</h1>
+    <app-car></app-car>
+    <app-heroes></app-heroes>
+  `
+})
+export class AppComponent {
+  title: string;
+
+  // #docregion ctor
+  constructor(@Inject(APP_CONFIG) config: AppConfig) {
+    this.title = config.title;
+  }
+  // #enddocregion ctor
+}
+// #enddocregion
+
diff --git a/aio/content/examples/dependency-injection/src/app/app.component.ts b/aio/content/examples/dependency-injection/src/app/app.component.ts
new file mode 100644
index 000000000000..b69856fa0aff
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/app.component.ts
@@ -0,0 +1,47 @@
+// #docplaster
+// #docregion
+// #docregion imports
+import { Component, Inject } from '@angular/core';
+
+import { APP_CONFIG, AppConfig } from './app.config';
+import { UserService } from './user.service';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-root',
+  template:  `
+    <h1>{{title}}</h1>
+    <app-car></app-car>
+    <app-injectors></app-injectors>
+    <app-tests></app-tests>
+    <h2>User</h2>
+    <p id="user">
+      {{userInfo}}
+      <button (click)="nextUser()">Next User</button>
+    <p>
+    <app-heroes id="authorized" *ngIf="isAuthorized"></app-heroes>
+    <app-heroes id="unauthorized" *ngIf="!isAuthorized"></app-heroes>
+    <app-heroes-tsp id="tspAuthorized" *ngIf="isAuthorized"></app-heroes-tsp>
+    <app-providers></app-providers>
+  `
+})
+export class AppComponent {
+  title: string;
+
+  // #docregion ctor
+  constructor(
+    @Inject(APP_CONFIG) config: AppConfig,
+    private userService: UserService) {
+    this.title = config.title;
+  }
+  // #enddocregion ctor
+
+  get isAuthorized() { return this.user.isAuthorized; }
+  nextUser()         { this.userService.getNewUser(); }
+  get user()         { return this.userService.user; }
+
+  get userInfo()     {
+    return `Current user, ${this.user.name}, is ` +
+           `${this.isAuthorized ? '' : 'not'} authorized. `;
+  }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/app.config.ts b/aio/content/examples/dependency-injection/src/app/app.config.ts
new file mode 100644
index 000000000000..74af1cb194ab
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/app.config.ts
@@ -0,0 +1,14 @@
+import { AppConfig } from './app-config';
+export { AppConfig } from './app-config';
+
+// #docregion token
+import { InjectionToken } from '@angular/core';
+
+export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');
+// #enddocregion token
+
+// #docregion config
+export const HERO_DI_CONFIG: AppConfig = {
+  apiEndpoint: 'api.heroes.com',
+  title: 'Dependency Injection'
+};
diff --git a/aio/content/examples/dependency-injection/src/app/app.module.ts b/aio/content/examples/dependency-injection/src/app/app.module.ts
new file mode 100644
index 000000000000..85becdb3b98b
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/app.module.ts
@@ -0,0 +1,47 @@
+// #docplaster
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { APP_CONFIG, HERO_DI_CONFIG }    from './app.config';
+import { AppComponent } from './app.component';
+import { CarComponent } from './car/car.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroesTspComponent } from './heroes/heroes-tsp.component';
+import { HeroListComponent } from './heroes/hero-list.component';
+import { InjectorComponent } from './injector.component';
+import { Logger } from './logger.service';
+import { TestComponent } from './test.component';
+import { UserService } from './user.service';
+
+import { ProvidersModule } from './providers.module';
+
+// #docregion ngmodule
+@NgModule({
+  imports: [
+    BrowserModule,
+    ProvidersModule
+  ],
+  declarations: [
+    AppComponent,
+    CarComponent,
+    HeroesComponent,
+    // #enddocregion ngmodule
+    HeroesTspComponent,
+    HeroListComponent,
+    InjectorComponent,
+    TestComponent
+    // #docregion ngmodule
+  ],
+  // #docregion providers, providers-2
+  providers: [
+    // #enddocregion providers
+    Logger,
+    // #docregion providers
+    UserService,
+    { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
+  ],
+  // #enddocregion providers, providers-2
+  exports: [ CarComponent, HeroesComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/dependency-injection/src/app/car/car-creations.ts b/aio/content/examples/dependency-injection/src/app/car/car-creations.ts
new file mode 100644
index 000000000000..c758c72951e2
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/car/car-creations.ts
@@ -0,0 +1,46 @@
+// Examples with car and engine variations
+
+// #docplaster
+import { Car, Engine, Tires } from './car';
+
+///////// example 1 ////////////
+export function simpleCar() {
+  // #docregion car-ctor-instantiation
+  // Simple car with 4 cylinders and Flintstone tires.
+  let car = new Car(new Engine(), new Tires());
+  // #enddocregion car-ctor-instantiation
+  car.description = 'Simple';
+  return car;
+}
+
+
+///////// example 2 ////////////
+// #docregion car-ctor-instantiation-with-param
+  class Engine2 {
+    constructor(public cylinders: number) { }
+  }
+// #enddocregion car-ctor-instantiation-with-param
+export function superCar() {
+// #docregion car-ctor-instantiation-with-param
+  // Super car with 12 cylinders and Flintstone tires.
+  let bigCylinders = 12;
+  let car = new Car(new Engine2(bigCylinders), new Tires());
+// #enddocregion car-ctor-instantiation-with-param
+  car.description = 'Super';
+  return car;
+}
+
+/////////// example 3 //////////
+  // #docregion car-ctor-instantiation-with-mocks
+  class MockEngine extends Engine { cylinders = 8; }
+  class MockTires  extends Tires  { make = 'YokoGoodStone'; }
+
+  // #enddocregion car-ctor-instantiation-with-mocks
+export function testCar() {
+  // #docregion car-ctor-instantiation-with-mocks
+  // Test car with 8 cylinders and YokoGoodStone tires.
+  let car = new Car(new MockEngine(), new MockTires());
+  // #enddocregion car-ctor-instantiation-with-mocks
+  car.description = 'Test';
+  return car;
+}
diff --git a/aio/content/examples/dependency-injection/src/app/car/car-factory.ts b/aio/content/examples/dependency-injection/src/app/car/car-factory.ts
new file mode 100644
index 000000000000..06daafe63baa
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/car/car-factory.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Engine, Tires, Car } from './car';
+
+// BAD pattern!
+export class CarFactory {
+  createCar() {
+    let car = new Car(this.createEngine(), this.createTires());
+    car.description = 'Factory';
+    return car;
+  }
+
+  createEngine() {
+    return new Engine();
+  }
+
+  createTires() {
+    return new Tires();
+  }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/car/car-injector.ts b/aio/content/examples/dependency-injection/src/app/car/car-injector.ts
new file mode 100644
index 000000000000..931efefc0ab7
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/car/car-injector.ts
@@ -0,0 +1,39 @@
+import { Injector } from '@angular/core';
+
+import { Car, Engine, Tires } from './car';
+import { Logger }             from '../logger.service';
+
+// #docregion injector
+export function useInjector() {
+  let injector: Injector;
+  // #enddocregion injector
+  /*
+  // #docregion injector-no-new
+  // Cannot instantiate an Injector like this!
+  let injector = new Injector([
+    { provide: Car, deps: [Engine, Tires] },
+    { provide: Engine, deps: [] },
+    { provide: Tires, deps: [] }
+  ]);
+  // #enddocregion injector-no-new
+  */
+  // #docregion injector, injector-create-and-call
+  injector = Injector.create({
+    providers: [
+      { provide: Car, deps: [Engine, Tires] },
+      { provide: Engine, deps: [] },
+      { provide: Tires, deps: [] }
+    ]
+  });
+  // #docregion injector-call
+  let car = injector.get(Car);
+  // #enddocregion injector-call, injector-create-and-call
+  car.description = 'Injector';
+
+  injector = Injector.create({
+    providers: [{ provide: Logger, deps: [] }]
+  });
+  let logger = injector.get(Logger);
+  logger.log('Injector car.drive() said: ' + car.drive());
+  return car;
+}
diff --git a/aio/content/examples/dependency-injection/src/app/car/car-no-di.ts b/aio/content/examples/dependency-injection/src/app/car/car-no-di.ts
new file mode 100644
index 000000000000..9026edebc2b5
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/car/car-no-di.ts
@@ -0,0 +1,24 @@
+// Car without DI
+import { Engine, Tires } from './car';
+
+// #docregion car
+export class Car {
+
+  // #docregion car-ctor
+  public engine: Engine;
+  public tires: Tires;
+  public description = 'No DI';
+
+  constructor() {
+    this.engine = new Engine();
+    this.tires = new Tires();
+  }
+  // #enddocregion car-ctor
+
+  // Method using the engine and tires
+  drive() {
+    return `${this.description} car with ` +
+      `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
+  }
+}
+// #enddocregion car
diff --git a/aio/content/examples/dependency-injection/src/app/car/car.component.ts b/aio/content/examples/dependency-injection/src/app/car/car.component.ts
new file mode 100644
index 000000000000..481ccd6ceeaa
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/car/car.component.ts
@@ -0,0 +1,38 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { Car, Engine, Tires }  from './car';
+import { Car as CarNoDi }      from './car-no-di';
+import { CarFactory }          from './car-factory';
+
+import { testCar,
+         simpleCar,
+         superCar }           from './car-creations';
+
+import { useInjector }        from './car-injector';
+
+
+@Component({
+  selector: 'app-car',
+  template: `
+  <h2>Cars</h2>
+  <div id="di">{{car.drive()}}</div>
+  <div id="nodi">{{noDiCar.drive()}}</div>
+  <div id="injector">{{injectorCar.drive()}}</div>
+  <div id="factory">{{factoryCar.drive()}}</div>
+  <div id="simple">{{simpleCar.drive()}}</div>
+  <div id="super">{{superCar.drive()}}</div>
+  <div id="test">{{testCar.drive()}}</div>
+  `,
+  providers: [Car, Engine, Tires]
+})
+export class CarComponent {
+  factoryCar  = (new CarFactory).createCar();
+  injectorCar = useInjector();
+  noDiCar     = new CarNoDi;
+  simpleCar   = simpleCar();
+  superCar    = superCar();
+  testCar     = testCar();
+
+  constructor(public car: Car) {}
+}
diff --git a/aio/content/examples/dependency-injection/src/app/car/car.ts b/aio/content/examples/dependency-injection/src/app/car/car.ts
new file mode 100644
index 000000000000..37162c570b2e
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/car/car.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+
+export class Engine {
+  public cylinders = 4;
+}
+
+export class Tires {
+  public make  = 'Flintstone';
+  public model = 'Square';
+}
+
+@Injectable()
+export class Car {
+  // #docregion car-ctor
+  public description = 'DI';
+
+  constructor(public engine: Engine, public tires: Tires) { }
+  // #enddocregion car-ctor
+
+  // Method using the engine and tires
+  drive() {
+    return `${this.description} car with ` +
+      `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
+  }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/dummy.module.ts b/aio/content/examples/dependency-injection/src/app/dummy.module.ts
new file mode 100644
index 000000000000..e65fdf3c46fd
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/dummy.module.ts
@@ -0,0 +1,25 @@
+
+/// Dummy modules to satisfy Angular Language Service
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppModule } from './app.module';
+
+////////
+
+import { AppComponent as AppComponent1 } from './app.component.1';
+
+@NgModule({
+  imports: [ CommonModule, AppModule ],
+  declarations: [ AppComponent1 ]
+})
+export class DummyModule1 {}
+
+/////////
+
+import { AppComponent as AppComponent2 } from './app.component.2';
+
+@NgModule({
+  imports: [ CommonModule, AppModule ],
+  declarations: [ AppComponent2 ]
+})
+export class DummyModule2 {}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/dummy.module.ts b/aio/content/examples/dependency-injection/src/app/heroes/dummy.module.ts
new file mode 100644
index 000000000000..2e1f0017712c
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/dummy.module.ts
@@ -0,0 +1,35 @@
+
+/// Dummy modules to satisfy Angular Language Service
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+////////
+
+import { HeroListComponent as HeroListComponent1 } from './hero-list.component.1';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ HeroListComponent1 ],
+  exports: [ HeroListComponent1 ]
+})
+export class DummyModule1 {}
+
+/////////
+
+import { HeroListComponent as HeroListComponent2 } from './hero-list.component.2';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ HeroListComponent2 ]
+})
+export class DummyModule2 {}
+
+/////////
+
+import { HeroesComponent as HeroesComponent1 } from './heroes.component.1';
+
+@NgModule({
+  imports: [ CommonModule, DummyModule1 ],
+  declarations: [ HeroesComponent1 ]
+})
+export class DummyModule3 {}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
new file mode 100644
index 000000000000..5c216f4d03d0
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
@@ -0,0 +1,17 @@
+// #docregion
+import { Component }   from '@angular/core';
+import { HEROES }      from './mock-heroes';
+
+@Component({
+  selector: 'app-hero-list',
+  template: `
+    <div *ngFor="let hero of heroes">
+      {{hero.id}} - {{hero.name}}
+    </div>
+  `
+})
+// #docregion class
+export class HeroListComponent {
+  heroes = HEROES;
+}
+// #enddocregion class
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
new file mode 100644
index 000000000000..11f27ed4b1a8
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion
+import { Component }   from '@angular/core';
+import { Hero }        from './hero';
+// #enddocregion
+import { HeroService } from './hero.service.1';
+/*
+// #docregion
+import { HeroService } from './hero.service';
+// #enddocregion
+*/
+// #docregion
+
+@Component({
+  selector: 'app-hero-list',
+  template: `
+    <div *ngFor="let hero of heroes">
+      {{hero.id}} - {{hero.name}}
+    </div>
+  `
+})
+export class HeroListComponent {
+  heroes: Hero[];
+
+  // #docregion ctor
+  constructor(heroService: HeroService) {
+    this.heroes = heroService.getHeroes();
+  }
+  // #enddocregion ctor
+}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts
new file mode 100644
index 000000000000..4536a04489de
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts
@@ -0,0 +1,25 @@
+/* tslint:disable:one-line */
+// #docregion
+import { Component }   from '@angular/core';
+import { Hero }        from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'app-hero-list',
+  template: `
+    <div *ngFor="let hero of heroes">
+      {{hero.id}} - {{hero.name}}
+      ({{hero.isSecret ? 'secret' : 'public'}})
+    </div>
+  `,
+})
+export class HeroListComponent {
+  heroes: Hero[];
+
+  // #docregion ctor-signature
+  constructor(heroService: HeroService)
+  // #enddocregion ctor-signature
+  {
+    this.heroes = heroService.getHeroes();
+  }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.module.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.module.ts
new file mode 100644
index 000000000000..7f422d5d79dd
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.module.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { NgModule } from '@angular/core';
+
+@NgModule({})
+export class HeroModule {
+}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts
new file mode 100644
index 000000000000..c8136b7db5d7
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HeroService {
+  constructor() { }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts
new file mode 100644
index 000000000000..908d75ee655f
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { HEROES }     from './mock-heroes';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HeroService {
+  getHeroes() { return HEROES; }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts
new file mode 100644
index 000000000000..a4c1adcd1b29
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { HEROES }     from './mock-heroes';
+import { Logger }     from '../logger.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HeroService {
+
+  // #docregion ctor
+  constructor(private logger: Logger) {  }
+  // #enddocregion ctor
+
+  getHeroes() {
+    this.logger.log('Getting heroes ...');
+    return HEROES;
+  }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts
new file mode 100644
index 000000000000..2d43704de055
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { HEROES }     from './mock-heroes';
+
+@Injectable({
+  // we declare that this service should be created
+  // by the root application injector.
+
+  providedIn: 'root',
+})
+export class HeroService {
+  getHeroes() { return HEROES; }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts
new file mode 100644
index 000000000000..0b77c78545c7
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { HeroModule } from './hero.module';
+import { HEROES }     from './mock-heroes';
+
+@Injectable({
+  // we declare that this service should be created
+  // by any injector that includes HeroModule.
+
+  providedIn: HeroModule,
+})
+export class HeroService {
+  getHeroes() { return HEROES; }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts
new file mode 100644
index 000000000000..6de4ebee90d7
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts
@@ -0,0 +1,19 @@
+/* tslint:disable:one-line */
+// #docregion
+import { HeroService } from './hero.service';
+import { Logger }      from '../logger.service';
+import { UserService } from '../user.service';
+
+// #docregion factory
+let heroServiceFactory = (logger: Logger, userService: UserService) => {
+  return new HeroService(logger, userService.user.isAuthorized);
+};
+// #enddocregion factory
+
+// #docregion provider
+export let heroServiceProvider =
+  { provide: HeroService,
+    useFactory: heroServiceFactory,
+    deps: [Logger, UserService]
+  };
+// #enddocregion provider
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.ts
new file mode 100644
index 000000000000..6c6fc27037c4
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.ts
@@ -0,0 +1,25 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { HEROES }     from './mock-heroes';
+import { Logger }     from '../logger.service';
+import { UserService } from '../user.service';
+
+@Injectable({
+  providedIn: 'root',
+  useFactory: (logger: Logger, userService: UserService) =>
+      new HeroService(logger, userService.user.isAuthorized),
+  deps: [Logger, UserService],
+})
+export class HeroService {
+  // #docregion internals
+  constructor(
+    private logger: Logger,
+    private isAuthorized: boolean) { }
+
+  getHeroes() {
+    let auth = this.isAuthorized ? 'authorized ' : 'unauthorized';
+    this.logger.log(`Getting heroes for ${auth} user.`);
+    return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
+  }
+  // #enddocregion internals
+}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.ts
new file mode 100644
index 000000000000..5c49328241f2
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.ts
@@ -0,0 +1,6 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+  isSecret = false;
+}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts b/aio/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts
new file mode 100644
index 000000000000..4d6c01b231df
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+/**
+ * A version of `HeroesComponent` that does not provide the `HeroService` (and thus relies on its
+ * `Injectable`-declared provider) in order to function.
+ *
+ * TSP stands for Tree-Shakeable Provider.
+ */
+@Component({
+  selector: 'app-heroes-tsp',
+  template: `
+    <h2>Heroes</h2>
+    <app-hero-list></app-hero-list>
+  `
+})
+export class HeroesTspComponent { }
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts
new file mode 100644
index 000000000000..962f95fcb324
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts
@@ -0,0 +1,18 @@
+// #docplaster
+// #docregion, v1
+import { Component } from '@angular/core';
+// #enddocregion v1
+import { HeroService } from './hero.service';
+
+// #docregion v1
+@Component({
+  selector: 'app-heroes',
+    // #enddocregion v1
+  providers: [ HeroService ],
+  // #docregion v1
+  template: `
+    <h2>Heroes</h2>
+    <app-hero-list></app-hero-list>
+  `
+})
+export class HeroesComponent { }
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..97040c09f0f2
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Component }          from '@angular/core';
+import { heroServiceProvider } from './hero.service.provider';
+
+@Component({
+  selector: 'app-heroes',
+  providers: [ heroServiceProvider ],
+  template: `
+    <h2>Heroes</h2>
+    <app-hero-list></app-hero-list>
+  `
+})
+export class HeroesComponent { }
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
new file mode 100644
index 000000000000..a836faa1bdbb
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Hero } from './hero';
+
+export const HEROES: Hero[] = [
+  { id: 11, isSecret: false, name: 'Mr. Nice' },
+  { id: 12, isSecret: false, name: 'Narco' },
+  { id: 13, isSecret: false, name: 'Bombasto' },
+  { id: 14, isSecret: false, name: 'Celeritas' },
+  { id: 15, isSecret: false, name: 'Magneta' },
+  { id: 16, isSecret: false, name: 'RubberMan' },
+  { id: 17, isSecret: false, name: 'Dynama' },
+  { id: 18, isSecret: true,  name: 'Dr IQ' },
+  { id: 19, isSecret: true,  name: 'Magma' },
+  { id: 20, isSecret: true,  name: 'Tornado' }
+];
diff --git a/aio/content/examples/dependency-injection/src/app/injector.component.ts b/aio/content/examples/dependency-injection/src/app/injector.component.ts
new file mode 100644
index 000000000000..403a6c427b18
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/injector.component.ts
@@ -0,0 +1,49 @@
+// #docplaster
+// #docregion
+import { Component, Injector, OnInit } from '@angular/core';
+
+import { Car, Engine, Tires }   from './car/car';
+import { Hero }                 from './heroes/hero';
+import { HeroService }          from './heroes/hero.service';
+import { heroServiceProvider }  from './heroes/hero.service.provider';
+import { Logger }               from './logger.service';
+
+// #docregion injector
+@Component({
+  selector: 'app-injectors',
+  template: `
+  <h2>Other Injections</h2>
+  <div id="car">{{car.drive()}}</div>
+  <div id="hero">{{hero.name}}</div>
+  <div id="rodent">{{rodent}}</div>
+  `,
+  providers: [Car, Engine, Tires, heroServiceProvider, Logger]
+})
+export class InjectorComponent implements OnInit {
+  car: Car;
+
+  // #docregion get-hero-service
+  heroService: HeroService;
+  // #enddocregion get-hero-service
+  hero: Hero;
+
+  constructor(private injector: Injector) { }
+
+  ngOnInit() {
+    this.car = this.injector.get(Car);
+    this.heroService = this.injector.get(HeroService);
+    this.hero = this.heroService.getHeroes()[0];
+  }
+
+  get rodent() {
+    let rousDontExist = `R.O.U.S.'s? I don't think they exist!`;
+    return this.injector.get(ROUS, rousDontExist);
+  }
+}
+// #enddocregion injector
+
+/**
+ * R.O.U.S. - Rodents Of Unusual Size
+ * // https://www.youtube.com/watch?v=BOv5ZjAOpC8
+ */
+class ROUS { }
diff --git a/aio/content/examples/dependency-injection/src/app/logger.service.ts b/aio/content/examples/dependency-injection/src/app/logger.service.ts
new file mode 100644
index 000000000000..e943523ad2f4
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/logger.service.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  logs: string[] = []; // capture logs for testing
+
+  log(message: string) {
+    this.logs.push(message);
+    console.log(message);
+  }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/providers.component.ts b/aio/content/examples/dependency-injection/src/app/providers.component.ts
new file mode 100644
index 000000000000..6b40f0478791
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/providers.component.ts
@@ -0,0 +1,280 @@
+/*
+ * A collection of demo components showing different ways to provide services
+ * in @Component metadata
+ */
+import { Component, Inject, Injectable, OnInit } from '@angular/core';
+
+import {
+  APP_CONFIG,
+  AppConfig,
+  HERO_DI_CONFIG } from './app.config';
+
+import { HeroService } from './heroes/hero.service';
+import { heroServiceProvider } from './heroes/hero.service.provider';
+import { Logger } from './logger.service';
+import { UserService } from './user.service';
+
+const template = '{{log}}';
+
+@Component({
+  selector: 'provider-1',
+  template: template,
+  // #docregion providers-1, providers-logger
+  providers: [Logger]
+  // #enddocregion providers-1, providers-logger
+})
+export class Provider1Component {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with Logger class');
+    this.log = logger.logs[0];
+  }
+}
+
+//////////////////////////////////////////
+
+@Component({
+  selector: 'provider-3',
+  template: template,
+  providers:
+    // #docregion providers-3
+    [{ provide: Logger, useClass: Logger }]
+    // #enddocregion providers-3
+})
+export class Provider3Component {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with useClass:Logger');
+    this.log = logger.logs[0];
+  }
+}
+
+//////////////////////////////////////////
+export class BetterLogger extends Logger {}
+
+@Component({
+  selector: 'provider-4',
+  template: template,
+  providers:
+    // #docregion providers-4
+    [{ provide: Logger, useClass: BetterLogger }]
+    // #enddocregion providers-4
+})
+export class Provider4Component {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with useClass:BetterLogger');
+    this.log = logger.logs[0];
+  }
+}
+
+//////////////////////////////////////////
+
+// #docregion EvenBetterLogger
+@Injectable()
+export class EvenBetterLogger extends Logger {
+  constructor(private userService: UserService) { super(); }
+
+  log(message: string) {
+    let name = this.userService.user.name;
+    super.log(`Message to ${name}: ${message}`);
+  }
+}
+// #enddocregion EvenBetterLogger
+
+@Component({
+  selector: 'provider-5',
+  template: template,
+  providers:
+    // #docregion providers-5
+    [ UserService,
+      { provide: Logger, useClass: EvenBetterLogger }]
+    // #enddocregion providers-5
+})
+export class Provider5Component {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from EvenBetterlogger');
+    this.log = logger.logs[0];
+  }
+}
+
+//////////////////////////////////////////
+
+export class NewLogger extends Logger {}
+
+export class OldLogger {
+  logs: string[] = [];
+  log(message: string) {
+    throw new Error('Should not call the old logger!');
+  };
+}
+
+@Component({
+  selector: 'provider-6a',
+  template: template,
+  providers:
+    // #docregion providers-6a
+    [ NewLogger,
+      // Not aliased! Creates two instances of `NewLogger`
+      { provide: OldLogger, useClass: NewLogger}]
+    // #enddocregion providers-6a
+})
+export class Provider6aComponent {
+  log: string;
+  constructor(newLogger: NewLogger, oldLogger: OldLogger) {
+    if (newLogger === oldLogger) {
+      throw new Error('expected the two loggers to be different instances');
+    }
+    oldLogger.log('Hello OldLogger (but we want NewLogger)');
+    // The newLogger wasn't called so no logs[]
+    // display the logs of the oldLogger.
+    this.log = newLogger.logs[0] || oldLogger.logs[0];
+  }
+}
+
+@Component({
+  selector: 'provider-6b',
+  template: template,
+  providers:
+    // #docregion providers-6b
+    [ NewLogger,
+      // Alias OldLogger w/ reference to NewLogger
+      { provide: OldLogger, useExisting: NewLogger}]
+    // #enddocregion providers-6b
+})
+export class Provider6bComponent {
+  log: string;
+  constructor(newLogger: NewLogger, oldLogger: OldLogger) {
+    if (newLogger !== oldLogger) {
+      throw new Error('expected the two loggers to be the same instance');
+    }
+    oldLogger.log('Hello from NewLogger (via aliased OldLogger)');
+    this.log = newLogger.logs[0];
+  }
+}
+
+//////////////////////////////////////////
+
+// #docregion silent-logger
+// An object in the shape of the logger service
+export function SilentLoggerFn() {}
+
+const silentLogger = {
+  logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
+  log: SilentLoggerFn
+};
+// #enddocregion silent-logger
+
+@Component({
+  selector: 'provider-7',
+  template: template,
+  providers:
+    // #docregion providers-7
+    [{ provide: Logger, useValue: silentLogger }]
+    // #enddocregion providers-7
+})
+export class Provider7Component {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with useValue');
+    this.log = logger.logs[0];
+  }
+}
+
+/////////////////
+
+@Component({
+  selector: 'provider-8',
+  template: template,
+  providers: [heroServiceProvider, Logger, UserService]
+})
+export class Provider8Component {
+  // must be true else this component would have blown up at runtime
+  log = 'Hero service injected successfully via heroServiceProvider';
+
+  // #docregion provider-8-ctor
+  constructor(heroService: HeroService) { }
+  // #enddocregion provider-8-ctor
+}
+
+/////////////////
+
+@Component({
+  selector: 'provider-9',
+  template: template,
+  /*
+   // #docregion providers-9-interface
+   // FAIL! Can't use interface as provider token
+   [{ provide: AppConfig, useValue: HERO_DI_CONFIG })]
+   // #enddocregion providers-9-interface
+   */
+  // #docregion providers-9
+  providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }]
+  // #enddocregion providers-9
+})
+export class Provider9Component implements OnInit {
+  log: string;
+  /*
+   // #docregion provider-9-ctor-interface
+   // FAIL! Can't inject using the interface as the parameter type
+   constructor(private config: AppConfig){ }
+   // #enddocregion provider-9-ctor-interface
+   */
+  // #docregion provider-9-ctor
+  constructor(@Inject(APP_CONFIG) private config: AppConfig) { }
+  // #enddocregion provider-9-ctor
+
+  ngOnInit() {
+     this.log = 'APP_CONFIG Application title is ' + this.config.title;
+  }
+}
+
+//////////////////////////////////////////
+// Sample providers 1 to 7 illustrate a required logger dependency.
+// Optional logger, can be null
+// #docregion import-optional
+import { Optional } from '@angular/core';
+// #enddocregion import-optional
+
+let some_message = 'Hello from the injected logger';
+
+@Component({
+  selector: 'provider-10',
+  template: template,
+  providers: [{ provide: Logger, useValue: null }]
+})
+export class Provider10Component implements OnInit {
+  log: string;
+  // #docregion provider-10-ctor
+  constructor(@Optional() private logger: Logger) {
+    if (this.logger) {
+      this.logger.log(some_message);
+    }
+  }
+  // #enddocregion provider-10-ctor
+
+  ngOnInit() {
+    this.log = this.logger ? this.logger.logs[0] : 'Optional logger was not available';
+  }
+}
+
+/////////////////
+
+@Component({
+  selector: 'app-providers',
+  template: `
+  <h2>Provider variations</h2>
+  <div id="p1"><provider-1></provider-1></div>
+  <div id="p3"><provider-3></provider-3></div>
+  <div id="p4"><provider-4></provider-4></div>
+  <div id="p5"><provider-5></provider-5></div>
+  <div id="p6a"><provider-6a></provider-6a></div>
+  <div id="p6b"><provider-6b></provider-6b></div>
+  <div id="p7"><provider-7></provider-7></div>
+  <div id="p8"><provider-8></provider-8></div>
+  <div id="p9"><provider-9></provider-9></div>
+  <div id="p10"><provider-10></provider-10></div>
+  `
+})
+export class ProvidersComponent { }
diff --git a/aio/content/examples/dependency-injection/src/app/providers.module.ts b/aio/content/examples/dependency-injection/src/app/providers.module.ts
new file mode 100644
index 000000000000..5dc27192a8b6
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/providers.module.ts
@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+
+import {
+  Provider1Component,
+  Provider3Component,
+  Provider4Component,
+  Provider5Component,
+  Provider6aComponent,
+  Provider6bComponent,
+  Provider7Component,
+  Provider8Component,
+  Provider9Component,
+  Provider10Component,
+  ProvidersComponent,
+} from './providers.component';
+
+@NgModule({
+  declarations: [
+    Provider1Component,
+    Provider3Component,
+    Provider4Component,
+    Provider5Component,
+    Provider6aComponent,
+    Provider6bComponent,
+    Provider7Component,
+    Provider8Component,
+    Provider9Component,
+    Provider10Component,
+    ProvidersComponent,
+  ],
+  exports: [ ProvidersComponent ]
+ })
+ export class ProvidersModule {}
diff --git a/aio/content/examples/dependency-injection/src/app/test.component.ts b/aio/content/examples/dependency-injection/src/app/test.component.ts
new file mode 100644
index 000000000000..fcc7b5cc1dfe
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/test.component.ts
@@ -0,0 +1,57 @@
+/* tslint:disable */
+// Simulate a simple test
+// Reader should look to the testing chapter for the real thing
+
+import { Component } from '@angular/core';
+
+import { Hero  } from './heroes/hero';
+import { HeroService } from './heroes/hero.service';
+import { HeroListComponent } from './heroes/hero-list.component';
+
+@Component({
+  selector: 'app-tests',
+  template: `
+    <h2>Tests</h2>
+    <p id="tests">Tests {{results.pass}}: {{results.message}}</p>
+  `
+})
+export class TestComponent {
+  results = runTests();
+}
+
+/////////////////////////////////////
+function runTests() {
+
+  // #docregion spec
+  const expectedHeroes = [{name: 'A'}, {name: 'B'}]
+  const mockService = <HeroService> {getHeroes: () => expectedHeroes }
+
+  it('should have heroes when HeroListComponent created', () => {
+    // Pass the mock to the constructor as the Angular injector would
+    const component = new HeroListComponent(mockService);
+    expect(component.heroes.length).toEqual(expectedHeroes.length);
+  });
+  // #enddocregion spec
+
+  return testResults;
+}
+
+//////////////////////////////////
+// Fake Jasmine infrastructure
+var testName: string;
+var testResults: {pass: string; message: string};
+
+function expect(actual: any) {
+  return {
+    toEqual: function(expected: any){
+      testResults = actual === expected ?
+        {pass: 'passed', message: testName} :
+        {pass: 'failed', message: `${testName}; expected ${actual} to equal ${expected}.`};
+    }
+  };
+}
+
+function it(label: string, test: () => void) {
+  testName = label;
+  test();
+}
diff --git a/aio/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts b/aio/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts
new file mode 100644
index 000000000000..31d79ffc23a3
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts
@@ -0,0 +1,15 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule }  from '@angular/router';
+import { ServiceModule } from './service-and-module';
+
+// #docregion
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot([]),
+    ServiceModule,
+  ],
+})
+export class AppModule {
+}
diff --git a/aio/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts b/aio/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts
new file mode 100644
index 000000000000..11100e3ffe96
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Injectable, NgModule } from '@angular/core';
+
+@Injectable()
+export class Service {
+  doSomething(): void {
+  }
+}
+
+@NgModule({
+  providers: [Service],
+})
+export class ServiceModule {
+}
diff --git a/aio/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts b/aio/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts
new file mode 100644
index 000000000000..50607d7375a5
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+// #docregion
+@Injectable({
+  providedIn: 'root',
+  useFactory: () => new Service('dependency'),
+})
+export class Service {
+  constructor(private dep: string) {
+  }
+}
diff --git a/aio/content/examples/dependency-injection/src/app/tree-shaking/service.ts b/aio/content/examples/dependency-injection/src/app/tree-shaking/service.ts
new file mode 100644
index 000000000000..2013120432e9
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/tree-shaking/service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+// #docregion
+@Injectable({
+  providedIn: 'root',
+})
+export class Service {
+}
diff --git a/aio/content/examples/dependency-injection/src/app/user.service.ts b/aio/content/examples/dependency-injection/src/app/user.service.ts
new file mode 100644
index 000000000000..03e23b7687b4
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/app/user.service.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+export class User {
+  constructor(
+    public name: string,
+    public isAuthorized = false) { }
+}
+
+// TODO: get the user; don't 'new' it.
+let alice = new User('Alice', true);
+let bob = new User('Bob', false);
+
+@Injectable()
+export class UserService {
+  user = bob;  // initial user is Bob
+
+  // swap users
+  getNewUser() {
+    return this.user = this.user === bob ? alice : bob;
+  }
+}
diff --git a/aio/content/examples/dependency-injection/src/index.html b/aio/content/examples/dependency-injection/src/index.html
new file mode 100644
index 000000000000..4736378237da
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/index.html
@@ -0,0 +1,15 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Dependency Injection</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/dependency-injection/src/main.ts b/aio/content/examples/dependency-injection/src/main.ts
new file mode 100644
index 000000000000..bf6732fff767
--- /dev/null
+++ b/aio/content/examples/dependency-injection/src/main.ts
@@ -0,0 +1,13 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+// #docregion bootstrap
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion bootstrap
diff --git a/aio/content/examples/dependency-injection/stackblitz.json b/aio/content/examples/dependency-injection/stackblitz.json
new file mode 100644
index 000000000000..131d2a671c2c
--- /dev/null
+++ b/aio/content/examples/dependency-injection/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "Dependency Injection",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[0,1,2,3,4].*",
+    "!**/dummy.module.ts"
+  ],
+  "tags": ["dependency", "di"]
+}
diff --git a/aio/content/examples/displaying-data/e2e/src/app.e2e-spec.ts b/aio/content/examples/displaying-data/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..96c52c5d00d1
--- /dev/null
+++ b/aio/content/examples/displaying-data/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,29 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Displaying Data Tests', function () {
+  let _title = 'Tour of Heroes';
+  let _defaultHero = 'Windstorm';
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should display correct title: ' + _title, function () {
+    expect(element(by.css('h1')).getText()).toEqual(_title);
+  });
+
+  it('should have correct default hero:  ' + _defaultHero, function () {
+    expect(element(by.css('h2')).getText()).toContain(_defaultHero);
+  });
+
+ it('should have heroes', function () {
+    let heroEls = element.all(by.css('li'));
+    expect(heroEls.count()).not.toBe(0, 'should have heroes');
+  });
+
+  it('should display "there are many heroes!"', function () {
+    expect(element(by.css('ul ~ p')).getText()).toContain('There are many heroes!');
+  });
+});
diff --git a/aio/content/examples/displaying-data/example-config.json b/aio/content/examples/displaying-data/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/displaying-data/src/app/app-ctor.component.ts b/aio/content/examples/displaying-data/src/app/app-ctor.component.ts
new file mode 100644
index 000000000000..5fd9d450730a
--- /dev/null
+++ b/aio/content/examples/displaying-data/src/app/app-ctor.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-ctor',
+  template: `
+    <h1>{{title}} [Ctor version]</h1>
+    <h2>My favorite hero is: {{myHero}}</h2>
+    `
+})
+// #docregion class
+export class AppCtorComponent {
+  title: string;
+  myHero: string;
+
+  constructor() {
+    this.title = 'Tour of Heroes';
+    this.myHero = 'Windstorm';
+  }
+}
diff --git a/aio/content/examples/displaying-data/src/app/app.component.1.ts b/aio/content/examples/displaying-data/src/app/app.component.1.ts
new file mode 100644
index 000000000000..674ac5622bf1
--- /dev/null
+++ b/aio/content/examples/displaying-data/src/app/app.component.1.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  // #docregion template
+  template: `
+    <h1>{{title}}</h1>
+    <h2>My favorite hero is: {{myHero}}</h2>
+    `
+  // #enddocregion template
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+  myHero = 'Windstorm';
+}
diff --git a/aio/content/examples/displaying-data/src/app/app.component.2.ts b/aio/content/examples/displaying-data/src/app/app.component.2.ts
new file mode 100644
index 000000000000..4d4e2d50e547
--- /dev/null
+++ b/aio/content/examples/displaying-data/src/app/app.component.2.ts
@@ -0,0 +1,26 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  // #docregion template
+  template: `
+    <h1>{{title}}</h1>
+    <h2>My favorite hero is: {{myHero}}</h2>
+    <p>Heroes:</p>
+    <ul>
+  // #docregion li
+      <li *ngFor="let hero of heroes">
+        {{ hero }}
+      </li>
+  // #enddocregion li
+    </ul>
+  `
+  // #enddocregion template
+})
+// #docregion class
+export class AppComponent {
+  title = 'Tour of Heroes';
+  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
+  myHero = this.heroes[0];
+}
diff --git a/aio/content/examples/displaying-data/src/app/app.component.3.ts b/aio/content/examples/displaying-data/src/app/app.component.3.ts
new file mode 100644
index 000000000000..435a9be767bd
--- /dev/null
+++ b/aio/content/examples/displaying-data/src/app/app.component.3.ts
@@ -0,0 +1,35 @@
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion import
+import { Hero } from './hero';
+// #enddocregion import
+
+@Component({
+  selector: 'app-root',
+  // #docregion template
+  template: `
+    <h1>{{title}}</h1>
+    <h2>My favorite hero is: {{myHero.name}}</h2>
+    <p>Heroes:</p>
+    <ul>
+      <li *ngFor="let hero of heroes">
+        {{ hero.name }}
+      </li>
+    </ul>
+  `
+  // #enddocregion template
+})
+// #docregion class
+export class AppComponent {
+  title = 'Tour of Heroes';
+  // #docregion heroes
+  heroes = [
+    new Hero(1, 'Windstorm'),
+    new Hero(13, 'Bombasto'),
+    new Hero(15, 'Magneta'),
+    new Hero(20, 'Tornado')
+  ];
+  myHero = this.heroes[0];
+  // #enddocregion heroes
+}
diff --git a/aio/content/examples/displaying-data/src/app/app.component.ts b/aio/content/examples/displaying-data/src/app/app.component.ts
new file mode 100644
index 000000000000..a03f3de1dd39
--- /dev/null
+++ b/aio/content/examples/displaying-data/src/app/app.component.ts
@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion final
+import { Component } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  selector: 'app-root',
+  template: `
+  <h1>{{title}}</h1>
+  <h2>My favorite hero is: {{myHero.name}}</h2>
+  <p>Heroes:</p>
+  <ul>
+    <li *ngFor="let hero of heroes">
+      {{ hero.name }}
+      </li>
+  </ul>
+  // #docregion message
+  <p *ngIf="heroes.length > 3">There are many heroes!</p>
+  // #enddocregion message
+`
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+  heroes = [
+    new Hero(1, 'Windstorm'),
+    new Hero(13, 'Bombasto'),
+    new Hero(15, 'Magneta'),
+    new Hero(20, 'Tornado')
+  ];
+  myHero = this.heroes[0];
+}
diff --git a/aio/content/examples/displaying-data/src/app/app.module.ts b/aio/content/examples/displaying-data/src/app/app.module.ts
new file mode 100644
index 000000000000..362f3401fa0c
--- /dev/null
+++ b/aio/content/examples/displaying-data/src/app/app.module.ts
@@ -0,0 +1,16 @@
+// #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/displaying-data/src/app/hero.ts b/aio/content/examples/displaying-data/src/app/hero.ts
new file mode 100644
index 000000000000..f89d26ad63d5
--- /dev/null
+++ b/aio/content/examples/displaying-data/src/app/hero.ts
@@ -0,0 +1,9 @@
+// #docregion
+export class Hero {
+  constructor(
+    // #docregion id
+    public id: number,
+    // #enddocregion id
+    public name: string) { }
+}
+// #enddocregion
diff --git a/aio/content/examples/displaying-data/src/index.html b/aio/content/examples/displaying-data/src/index.html
new file mode 100644
index 000000000000..3e5cbf7bea3e
--- /dev/null
+++ b/aio/content/examples/displaying-data/src/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Displaying Data</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <!-- #docregion body -->
+  <body>
+    <app-root></app-root>
+  </body>
+  <!-- #enddocregion body -->
+
+</html>
diff --git a/aio/content/examples/displaying-data/src/main.ts b/aio/content/examples/displaying-data/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/displaying-data/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/displaying-data/stackblitz.json b/aio/content/examples/displaying-data/stackblitz.json
new file mode 100644
index 000000000000..9f2f816f142a
--- /dev/null
+++ b/aio/content/examples/displaying-data/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "Displaying Data",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/app-ctor.component.ts",
+    "!**/*.[1,2,3].*"
+  ],
+  "tags": ["Template"]
+}
diff --git a/aio/content/examples/docs-style-guide/e2e/src/app.e2e-spec.ts b/aio/content/examples/docs-style-guide/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..68cf02313b6c
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/e2e/src/app.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/docs-style-guide/example-config.json b/aio/content/examples/docs-style-guide/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
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 000000000000..8e5d6c6ec313
--- /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/second.stackblitz.json b/aio/content/examples/docs-style-guide/second.stackblitz.json
new file mode 100644
index 000000000000..ca2bfdaf3bcd
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/second.stackblitz.json
@@ -0,0 +1,8 @@
+{
+  "description": "Second authors style guide stackblitz (non-executing)",
+  "files": [
+    "src/index.2.html"
+  ],
+  "main": "src/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 000000000000..cc999f8458aa
--- /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 000000000000..924599f6e938
--- /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 000000000000..bc2667c8043d
--- /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: 'app-root',
+  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 000000000000..cbcb090547c1
--- /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 000000000000..fadbdbf9edc4
--- /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 000000000000..a85f58e57e52
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/src/index.2.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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/docs-style-guide/src/index.html b/aio/content/examples/docs-style-guide/src/index.html
new file mode 100644
index 000000000000..2705e7ee968f
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html lang="en">
+  <head>
+    <title>Docs Style Guide</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
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 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/docs-style-guide/stackblitz.json b/aio/content/examples/docs-style-guide/stackblitz.json
new file mode 100644
index 000000000000..f19943ee1ee3
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Authors style guide",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2,3].*"
+  ],
+  "tags": ["author", "style guide"]
+}
diff --git a/aio/content/examples/dynamic-component-loader/e2e/src/app.e2e-spec.ts b/aio/content/examples/dynamic-component-loader/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..b04412c28b6c
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,21 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+/* tslint:disable:quotemark */
+describe('Dynamic Component Loader', function () {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it('should load ad banner', function () {
+    let headline = element(by.xpath("//h4[text()='Featured Hero Profile']"));
+    let name = element(by.xpath("//h3[text()='Bombasto']"));
+    let bio = element(by.xpath("//p[text()='Brave as they come']"));
+
+    expect(name).toBeDefined();
+    expect(headline).toBeDefined();
+    expect(bio).toBeDefined();
+  });
+});
diff --git a/aio/content/examples/dynamic-component-loader/example-config.json b/aio/content/examples/dynamic-component-loader/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
new file mode 100644
index 000000000000..ec86f69349dc
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
@@ -0,0 +1,56 @@
+// #docregion
+import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
+
+import { AdDirective } from './ad.directive';
+import { AdItem }      from './ad-item';
+import { AdComponent } from './ad.component';
+
+@Component({
+  selector: 'app-ad-banner',
+  // #docregion ad-host
+  template: `
+              <div class="ad-banner">
+                <h3>Advertisements</h3>
+                <ng-template ad-host></ng-template>
+              </div>
+            `
+  // #enddocregion ad-host
+})
+// #docregion class
+export class AdBannerComponent implements OnInit, OnDestroy {
+  @Input() ads: AdItem[];
+  currentAdIndex = -1;
+  @ViewChild(AdDirective) adHost: AdDirective;
+  interval: any;
+
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
+
+  ngOnInit() {
+    this.loadComponent();
+    this.getAds();
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.interval);
+  }
+
+  loadComponent() {
+    this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
+    let adItem = this.ads[this.currentAdIndex];
+
+    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
+
+    let viewContainerRef = this.adHost.viewContainerRef;
+    viewContainerRef.clear();
+
+    let componentRef = viewContainerRef.createComponent(componentFactory);
+    (<AdComponent>componentRef.instance).data = adItem.data;
+  }
+
+  getAds() {
+    this.interval = setInterval(() => {
+      this.loadComponent();
+    }, 3000);
+  }
+}
+// #enddocregion class
diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad-item.ts b/aio/content/examples/dynamic-component-loader/src/app/ad-item.ts
new file mode 100644
index 000000000000..ef8ca7057719
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/app/ad-item.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { Type } from '@angular/core';
+
+export class AdItem {
+  constructor(public component: Type<any>, public data: any) {}
+}
diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad.component.ts b/aio/content/examples/dynamic-component-loader/src/app/ad.component.ts
new file mode 100644
index 000000000000..dee3b47953f9
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/app/ad.component.ts
@@ -0,0 +1,4 @@
+// #docregion
+export interface AdComponent {
+  data: any;
+}
diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts b/aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts
new file mode 100644
index 000000000000..312e605228f3
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[ad-host]',
+})
+export class AdDirective {
+  constructor(public viewContainerRef: ViewContainerRef) { }
+}
+
diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad.service.ts b/aio/content/examples/dynamic-component-loader/src/app/ad.service.ts
new file mode 100644
index 000000000000..91b075877117
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/app/ad.service.ts
@@ -0,0 +1,23 @@
+// #docregion
+import { Injectable }           from '@angular/core';
+
+import { HeroJobAdComponent }   from './hero-job-ad.component';
+import { HeroProfileComponent } from './hero-profile.component';
+import { AdItem }               from './ad-item';
+
+@Injectable()
+export class AdService {
+  getAds() {
+    return [
+      new AdItem(HeroProfileComponent, {name: 'Bombasto', bio: 'Brave as they come'}),
+
+      new AdItem(HeroProfileComponent, {name: 'Dr IQ', bio: 'Smart as they come'}),
+
+      new AdItem(HeroJobAdComponent,   {headline: 'Hiring for several positions',
+                                        body: 'Submit your resume today!'}),
+
+      new AdItem(HeroJobAdComponent,   {headline: 'Openings in all departments',
+                                        body: 'Apply today'}),
+    ];
+  }
+}
diff --git a/aio/content/examples/dynamic-component-loader/src/app/app.component.ts b/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
new file mode 100644
index 000000000000..1a5fa94dbc4a
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { AdService }         from './ad.service';
+import { AdItem }            from './ad-item';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div>
+      <app-ad-banner [ads]="ads"></app-ad-banner>
+    </div>
+  `
+})
+export class AppComponent implements OnInit {
+  ads: AdItem[];
+
+  constructor(private adService: AdService) {}
+
+  ngOnInit() {
+    this.ads = this.adService.getAds();
+  }
+}
+
diff --git a/aio/content/examples/dynamic-component-loader/src/app/app.module.ts b/aio/content/examples/dynamic-component-loader/src/app/app.module.ts
new file mode 100644
index 000000000000..a65d3947090d
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/app/app.module.ts
@@ -0,0 +1,27 @@
+// #docregion
+import { BrowserModule }        from '@angular/platform-browser';
+import { NgModule }             from '@angular/core';
+import { AppComponent }         from './app.component';
+import { HeroJobAdComponent }   from './hero-job-ad.component';
+import { AdBannerComponent }    from './ad-banner.component';
+import { HeroProfileComponent } from './hero-profile.component';
+import { AdDirective }          from './ad.directive';
+import { AdService }            from './ad.service';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  providers: [AdService],
+  declarations: [ AppComponent,
+                  AdBannerComponent,
+                  HeroJobAdComponent,
+                  HeroProfileComponent,
+                  AdDirective ],
+  // #docregion entry-components
+  entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],
+  // #enddocregion entry-components
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+  constructor() {}
+}
+
diff --git a/aio/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts b/aio/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts
new file mode 100644
index 000000000000..762b81587282
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+
+import { AdComponent }      from './ad.component';
+
+@Component({
+  template: `
+    <div class="job-ad">
+      <h4>{{data.headline}}</h4>
+
+      {{data.body}}
+    </div>
+  `
+})
+export class HeroJobAdComponent implements AdComponent {
+  @Input() data: any;
+
+}
+
diff --git a/aio/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts b/aio/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts
new file mode 100644
index 000000000000..d543683d8cc2
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { Component, Input }  from '@angular/core';
+
+import { AdComponent }       from './ad.component';
+
+@Component({
+  template: `
+    <div class="hero-profile">
+      <h3>Featured Hero Profile</h3>
+      <h4>{{data.name}}</h4>
+
+      <p>{{data.bio}}</p>
+
+      <strong>Hire this hero today!</strong>
+    </div>
+  `
+})
+export class HeroProfileComponent implements AdComponent {
+  @Input() data: any;
+}
+
+
diff --git a/aio/content/examples/dynamic-component-loader/src/assets/sample.css b/aio/content/examples/dynamic-component-loader/src/assets/sample.css
new file mode 100644
index 000000000000..7a2ca1f2dc91
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/assets/sample.css
@@ -0,0 +1,23 @@
+.hero-profile {
+  border: 1px solid gray;
+  padding: 5px;
+  padding-bottom: 20px;
+  padding-left: 20px;
+  border-radius: 10px;
+  background-color: lightgreen;
+  color: black;
+}
+
+.job-ad {
+  border: 1px solid gray;
+  padding: 5px;
+  padding-bottom: 20px;
+  padding-left: 20px;
+  border-radius: 10px;
+  background-color: lightblue;
+  color: black;
+}
+
+.ad-banner {
+  width: 400px;
+}
\ No newline at end of file
diff --git a/aio/content/examples/dynamic-component-loader/src/index.html b/aio/content/examples/dynamic-component-loader/src/index.html
new file mode 100644
index 000000000000..67c9b6c2213b
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <base href="/">
+    <title>Dynamic Component Loader</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="assets/sample.css">
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/dynamic-component-loader/src/main.ts b/aio/content/examples/dynamic-component-loader/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/dynamic-component-loader/stackblitz.json b/aio/content/examples/dynamic-component-loader/stackblitz.json
new file mode 100644
index 000000000000..2b6c1531297b
--- /dev/null
+++ b/aio/content/examples/dynamic-component-loader/stackblitz.json
@@ -0,0 +1,8 @@
+{
+  "description": "Dynamic Component Loader",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook component"]
+}
diff --git a/aio/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts b/aio/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..49eaba3f9cc2
--- /dev/null
+++ b/aio/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,29 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+/* tslint:disable:quotemark */
+describe('Dynamic Form', function () {
+
+    beforeAll(function () {
+        browser.get('');
+    });
+
+    it('should submit form', function () {
+      let firstNameElement = element.all(by.css('input[id=firstName]')).get(0);
+      expect(firstNameElement.getAttribute('value')).toEqual('Bombasto');
+
+      let emailElement = element.all(by.css('input[id=emailAddress]')).get(0);
+      let email = 'test@test.com';
+      emailElement.sendKeys(email);
+      expect(emailElement.getAttribute('value')).toEqual(email);
+
+      element(by.css('select option[value="solid"]')).click();
+
+      let saveButton = element.all(by.css('button')).get(0);
+      saveButton.click().then(function() {
+        expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true);
+      });
+  });
+
+});
diff --git a/aio/content/examples/dynamic-form/example-config.json b/aio/content/examples/dynamic-form/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/dynamic-form/src/app/app.component.ts b/aio/content/examples/dynamic-form/src/app/app.component.ts
new file mode 100644
index 000000000000..51d154cc78ad
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/app.component.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { Component }       from '@angular/core';
+
+import { QuestionService } from './question.service';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div>
+      <h2>Job Application for Heroes</h2>
+      <app-dynamic-form [questions]="questions"></app-dynamic-form>
+    </div>
+  `,
+  providers:  [QuestionService]
+})
+export class AppComponent {
+  questions: any[];
+
+  constructor(service: QuestionService) {
+    this.questions = service.getQuestions();
+  }
+}
diff --git a/aio/content/examples/dynamic-form/src/app/app.module.ts b/aio/content/examples/dynamic-form/src/app/app.module.ts
new file mode 100644
index 000000000000..7a68e45a92de
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/app.module.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { BrowserModule }                from '@angular/platform-browser';
+import { ReactiveFormsModule }          from '@angular/forms';
+import { NgModule }                     from '@angular/core';
+
+import { AppComponent }                 from './app.component';
+import { DynamicFormComponent }         from './dynamic-form.component';
+import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
+
+@NgModule({
+  imports: [ BrowserModule, ReactiveFormsModule ],
+  declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+  constructor() {
+  }
+}
diff --git a/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.html b/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.html
new file mode 100644
index 000000000000..9f1b8cd4a628
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.html
@@ -0,0 +1,17 @@
+<!-- #docregion -->
+<div [formGroup]="form">
+  <label [attr.for]="question.key">{{question.label}}</label>
+
+  <div [ngSwitch]="question.controlType">
+
+    <input *ngSwitchCase="'textbox'" [formControlName]="question.key"
+            [id]="question.key" [type]="question.type">
+
+    <select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key">
+      <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
+    </select>
+
+  </div> 
+
+  <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
+</div>
diff --git a/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts b/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
new file mode 100644
index 000000000000..9a4c25829fe7
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+import { FormGroup }        from '@angular/forms';
+
+import { QuestionBase }     from './question-base';
+
+@Component({
+  selector: 'app-question',
+  templateUrl: './dynamic-form-question.component.html'
+})
+export class DynamicFormQuestionComponent {
+  @Input() question: QuestionBase<any>;
+  @Input() form: FormGroup;
+  get isValid() { return this.form.controls[this.question.key].valid; }
+}
diff --git a/aio/content/examples/dynamic-form/src/app/dynamic-form.component.html b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.html
new file mode 100644
index 000000000000..33c8f0bb5124
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.html
@@ -0,0 +1,17 @@
+<!-- #docregion -->
+<div>
+  <form (ngSubmit)="onSubmit()" [formGroup]="form">
+
+    <div *ngFor="let question of questions" class="form-row">
+      <app-question [question]="question" [form]="form"></app-question>
+    </div>
+
+    <div class="form-row">
+      <button type="submit" [disabled]="!form.valid">Save</button>
+    </div>
+  </form>
+
+  <div *ngIf="payLoad" class="form-row">
+    <strong>Saved the following values</strong><br>{{payLoad}}
+  </div>
+</div>
diff --git a/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts
new file mode 100644
index 000000000000..4167b4617faf
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts
@@ -0,0 +1,28 @@
+// #docregion
+import { Component, Input, OnInit }  from '@angular/core';
+import { FormGroup }                 from '@angular/forms';
+
+import { QuestionBase }              from './question-base';
+import { QuestionControlService }    from './question-control.service';
+
+@Component({
+  selector: 'app-dynamic-form',
+  templateUrl: './dynamic-form.component.html',
+  providers: [ QuestionControlService ]
+})
+export class DynamicFormComponent implements OnInit {
+
+  @Input() questions: QuestionBase<any>[] = [];
+  form: FormGroup;
+  payLoad = '';
+
+  constructor(private qcs: QuestionControlService) {  }
+
+  ngOnInit() {
+    this.form = this.qcs.toFormGroup(this.questions);
+  }
+
+  onSubmit() {
+    this.payLoad = JSON.stringify(this.form.value);
+  }
+}
diff --git a/aio/content/examples/dynamic-form/src/app/question-base.ts b/aio/content/examples/dynamic-form/src/app/question-base.ts
new file mode 100644
index 000000000000..8249a38bee59
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/question-base.ts
@@ -0,0 +1,25 @@
+// #docregion
+export class QuestionBase<T> {
+  value: T;
+  key: string;
+  label: string;
+  required: boolean;
+  order: number;
+  controlType: string;
+
+  constructor(options: {
+      value?: T,
+      key?: string,
+      label?: string,
+      required?: boolean,
+      order?: number,
+      controlType?: string
+    } = {}) {
+    this.value = options.value;
+    this.key = options.key || '';
+    this.label = options.label || '';
+    this.required = !!options.required;
+    this.order = options.order === undefined ? 1 : options.order;
+    this.controlType = options.controlType || '';
+  }
+}
diff --git a/aio/content/examples/dynamic-form/src/app/question-control.service.ts b/aio/content/examples/dynamic-form/src/app/question-control.service.ts
new file mode 100644
index 000000000000..1378ba849019
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/question-control.service.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Injectable }   from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+import { QuestionBase } from './question-base';
+
+@Injectable()
+export class QuestionControlService {
+  constructor() { }
+
+  toFormGroup(questions: QuestionBase<any>[] ) {
+    let group: any = {};
+
+    questions.forEach(question => {
+      group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
+                                              : new FormControl(question.value || '');
+    });
+    return new FormGroup(group);
+  }
+}
diff --git a/aio/content/examples/dynamic-form/src/app/question-dropdown.ts b/aio/content/examples/dynamic-form/src/app/question-dropdown.ts
new file mode 100644
index 000000000000..35a9074c74cf
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/question-dropdown.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { QuestionBase } from './question-base';
+
+export class DropdownQuestion extends QuestionBase<string> {
+  controlType = 'dropdown';
+  options: {key: string, value: string}[] = [];
+
+  constructor(options: {} = {}) {
+    super(options);
+    this.options = options['options'] || [];
+  }
+}
diff --git a/aio/content/examples/dynamic-form/src/app/question-textbox.ts b/aio/content/examples/dynamic-form/src/app/question-textbox.ts
new file mode 100644
index 000000000000..aaa7edf26732
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/question-textbox.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { QuestionBase } from './question-base';
+
+export class TextboxQuestion extends QuestionBase<string> {
+  controlType = 'textbox';
+  type: string;
+
+  constructor(options: {} = {}) {
+    super(options);
+    this.type = options['type'] || '';
+  }
+}
diff --git a/aio/content/examples/dynamic-form/src/app/question.service.ts b/aio/content/examples/dynamic-form/src/app/question.service.ts
new file mode 100644
index 000000000000..a1d9499c6806
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/app/question.service.ts
@@ -0,0 +1,47 @@
+// #docregion
+import { Injectable }       from '@angular/core';
+
+import { DropdownQuestion } from './question-dropdown';
+import { QuestionBase }     from './question-base';
+import { TextboxQuestion }  from './question-textbox';
+
+@Injectable()
+export class QuestionService {
+
+  // TODO: get from a remote source of question metadata
+  // TODO: make asynchronous
+  getQuestions() {
+
+    let questions: QuestionBase<any>[] = [
+
+      new DropdownQuestion({
+        key: 'brave',
+        label: 'Bravery Rating',
+        options: [
+          {key: 'solid',  value: 'Solid'},
+          {key: 'great',  value: 'Great'},
+          {key: 'good',   value: 'Good'},
+          {key: 'unproven', value: 'Unproven'}
+        ],
+        order: 3
+      }),
+
+      new TextboxQuestion({
+        key: 'firstName',
+        label: 'First name',
+        value: 'Bombasto',
+        required: true,
+        order: 1
+      }),
+
+      new TextboxQuestion({
+        key: 'emailAddress',
+        label: 'Email',
+        type: 'email',
+        order: 2
+      })
+    ];
+
+    return questions.sort((a, b) => a.order - b.order);
+  }
+}
diff --git a/aio/content/examples/dynamic-form/src/assets/sample.css b/aio/content/examples/dynamic-form/src/assets/sample.css
new file mode 100644
index 000000000000..fe2cc284813c
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/assets/sample.css
@@ -0,0 +1,7 @@
+.errorMessage{
+  color:red;
+}
+
+.form-row{
+  margin-top: 10px;
+}
\ No newline at end of file
diff --git a/aio/content/examples/dynamic-form/src/index.html b/aio/content/examples/dynamic-form/src/index.html
new file mode 100644
index 000000000000..20688f24057e
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <base href="/">
+    <title>Dynamic Form</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="assets/sample.css">
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/dynamic-form/src/main.ts b/aio/content/examples/dynamic-form/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/dynamic-form/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/dynamic-form/stackblitz.json b/aio/content/examples/dynamic-form/stackblitz.json
new file mode 100644
index 000000000000..9dd6ff0236c9
--- /dev/null
+++ b/aio/content/examples/dynamic-form/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Dynamic Form",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/aio/content/examples/elements/e2e/src/app.e2e-spec.ts b/aio/content/examples/elements/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..e3385efc8f97
--- /dev/null
+++ b/aio/content/examples/elements/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,69 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, by, element } from 'protractor';
+
+/* tslint:disable:quotemark */
+describe('Elements', () => {
+  const messageInput = element(by.css('input'));
+  const popupButtons = element.all(by.css('button'));
+
+  beforeEach(() => browser.get(''));
+
+  describe('popup component', () => {
+    const popupComponentButton = popupButtons.get(0);
+    const popupComponent = element(by.css('popup-component'));
+    const closeButton = popupComponent.element(by.css('button'));
+
+    it('should be displayed on button click', () => {
+      expect(popupComponent.isPresent()).toBe(false);
+
+      popupComponentButton.click();
+      expect(popupComponent.isPresent()).toBe(true);
+    });
+
+    it('should display the specified message', () => {
+      messageInput.clear();
+      messageInput.sendKeys('Angular rocks!');
+
+      popupComponentButton.click();
+      expect(popupComponent.getText()).toContain('Popup: Angular rocks!');
+    });
+
+    it('should be closed on "close" button click', () => {
+      popupComponentButton.click();
+      expect(popupComponent.isPresent()).toBe(true);
+
+      closeButton.click();
+      expect(popupComponent.isPresent()).toBe(false);
+    });
+  });
+
+  describe('popup element', () => {
+    const popupElementButton = popupButtons.get(1);
+    const popupElement = element(by.css('popup-element'));
+    const closeButton = popupElement.element(by.css('button'));
+
+    it('should be displayed on button click', () => {
+      expect(popupElement.isPresent()).toBe(false);
+
+      popupElementButton.click();
+      expect(popupElement.isPresent()).toBe(true);
+    });
+
+    it('should display the specified message', () => {
+      messageInput.clear();
+      messageInput.sendKeys('Angular rocks!');
+
+      popupElementButton.click();
+      expect(popupElement.getText()).toContain('Popup: Angular rocks!');
+    });
+
+    it('should be closed on "close" button click', () => {
+      popupElementButton.click();
+      expect(popupElement.isPresent()).toBe(true);
+
+      closeButton.click();
+      expect(popupElement.isPresent()).toBe(false);
+    });
+  });
+});
diff --git a/aio/content/examples/elements/example-config.json b/aio/content/examples/elements/example-config.json
new file mode 100644
index 000000000000..cc429211738d
--- /dev/null
+++ b/aio/content/examples/elements/example-config.json
@@ -0,0 +1,3 @@
+{
+  "projectType": "elements"
+}
diff --git a/aio/content/examples/elements/src/app/app.component.ts b/aio/content/examples/elements/src/app/app.component.ts
new file mode 100644
index 000000000000..2e7fb600f841
--- /dev/null
+++ b/aio/content/examples/elements/src/app/app.component.ts
@@ -0,0 +1,21 @@
+import { Component, Injector } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
+import { PopupService } from './popup.service';
+import { PopupComponent } from './popup.component';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <input #input value="Message">
+    <button (click)="popup.showAsComponent(input.value)">Show as component</button>
+    <button (click)="popup.showAsElement(input.value)">Show as element</button>
+  `,
+})
+export class AppComponent {
+  constructor(injector: Injector, public popup: PopupService) {
+    // Convert `PopupComponent` to a custom element.
+    const PopupElement = createCustomElement(PopupComponent, {injector});
+    // Register the custom element with the browser.
+    customElements.define('popup-element', PopupElement);
+  }
+}
diff --git a/aio/content/examples/elements/src/app/app.module.ts b/aio/content/examples/elements/src/app/app.module.ts
new file mode 100644
index 000000000000..f273e77b14fb
--- /dev/null
+++ b/aio/content/examples/elements/src/app/app.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { AppComponent } from './app.component';
+import { PopupComponent } from './popup.component';
+import { PopupService } from './popup.service';
+
+// Include the `PopupService` provider,
+// but exclude `PopupComponent` from compilation,
+// because it will be added dynamically.
+
+@NgModule({
+  imports: [BrowserModule, BrowserAnimationsModule],
+  providers: [PopupService],
+  declarations: [AppComponent, PopupComponent],
+  bootstrap: [AppComponent],
+  entryComponents: [PopupComponent],
+})
+export class AppModule {
+}
diff --git a/aio/content/examples/elements/src/app/popup.component.ts b/aio/content/examples/elements/src/app/popup.component.ts
new file mode 100644
index 000000000000..6fee4ef8c1b7
--- /dev/null
+++ b/aio/content/examples/elements/src/app/popup.component.ts
@@ -0,0 +1,54 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+@Component({
+  selector: 'my-popup',
+  template: `
+    <span>Popup: {{message}}</span>
+    <button (click)="closed.next()">&#x2716;</button>
+  `,
+  host: {
+    '[@state]': 'state',
+  },
+  animations: [
+    trigger('state', [
+      state('opened', style({transform: 'translateY(0%)'})),
+      state('void, closed', style({transform: 'translateY(100%)', opacity: 0})),
+      transition('* => *', animate('100ms ease-in')),
+    ])
+  ],
+  styles: [`
+    :host {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: #009cff;
+      height: 48px;
+      padding: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-top: 1px solid black;
+      font-size: 24px;
+    }
+
+    button {
+      border-radius: 50%;
+    }
+  `]
+})
+export class PopupComponent {
+  private state: 'opened' | 'closed' = 'closed';
+
+  @Input()
+  set message(message: string) {
+    this._message = message;
+    this.state = 'opened';
+  }
+  get message(): string { return this._message; }
+  _message: string;
+
+  @Output()
+  closed = new EventEmitter();
+}
diff --git a/aio/content/examples/elements/src/app/popup.service.ts b/aio/content/examples/elements/src/app/popup.service.ts
new file mode 100644
index 000000000000..11cd98ec1f16
--- /dev/null
+++ b/aio/content/examples/elements/src/app/popup.service.ts
@@ -0,0 +1,53 @@
+
+import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
+import { NgElement, WithProperties } from '@angular/elements';
+import { PopupComponent } from './popup.component';
+
+
+@Injectable()
+export class PopupService {
+  constructor(private injector: Injector,
+              private applicationRef: ApplicationRef,
+              private componentFactoryResolver: ComponentFactoryResolver) {}
+
+  // Previous dynamic-loading method required you to set up infrastructure
+  // before adding the popup to the DOM.
+  showAsComponent(message: string) {
+    // Create element
+    const popup = document.createElement('popup-component');
+
+    // Create the component and wire it up with the element
+    const factory = this.componentFactoryResolver.resolveComponentFactory(PopupComponent);
+    const popupComponentRef = factory.create(this.injector, [], popup);
+
+    // Attach to the view so that the change detector knows to run
+    this.applicationRef.attachView(popupComponentRef.hostView);
+
+    // Listen to the close event
+    popupComponentRef.instance.closed.subscribe(() => {
+      document.body.removeChild(popup);
+      this.applicationRef.detachView(popupComponentRef.hostView);
+    });
+
+    // Set the message
+    popupComponentRef.instance.message = message;
+
+    // Add to the DOM
+    document.body.appendChild(popup);
+  }
+
+  // This uses the new custom-element method to add the popup to the DOM.
+  showAsElement(message: string) {
+    // Create element
+    const popupEl: NgElement & WithProperties<PopupComponent> = document.createElement('popup-element') as any;
+
+    // Listen to the close event
+    popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));
+
+    // Set the message
+    popupEl.message = message;
+
+    // Add to the DOM
+    document.body.appendChild(popupEl);
+  }
+}
diff --git a/aio/content/examples/elements/src/index.html b/aio/content/examples/elements/src/index.html
new file mode 100644
index 000000000000..e8a1b6e353d1
--- /dev/null
+++ b/aio/content/examples/elements/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <base href="/">
+    <title>Elements</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/aio/content/examples/elements/src/main.ts b/aio/content/examples/elements/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/elements/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/elements/stackblitz.json b/aio/content/examples/elements/stackblitz.json
new file mode 100644
index 000000000000..512e5aca34b9
--- /dev/null
+++ b/aio/content/examples/elements/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Angular Elements",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/aio/content/examples/feature-modules/e2e/src/app.e2e-spec.ts b/aio/content/examples/feature-modules/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..899a1ad03752
--- /dev/null
+++ b/aio/content/examples/feature-modules/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,17 @@
+import { AppPage } from './app.po';
+
+describe('feature-modules App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});
+
+
+
diff --git a/aio/content/examples/feature-modules/example-config.json b/aio/content/examples/feature-modules/example-config.json
new file mode 100644
index 000000000000..313764c3c606
--- /dev/null
+++ b/aio/content/examples/feature-modules/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:cli",
+  "run": "serve:cli"
+}
diff --git a/aio/content/examples/feature-modules/src/app/app.component.css b/aio/content/examples/feature-modules/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/feature-modules/src/app/app.component.html b/aio/content/examples/feature-modules/src/app/app.component.html
new file mode 100644
index 000000000000..ecfd45507b15
--- /dev/null
+++ b/aio/content/examples/feature-modules/src/app/app.component.html
@@ -0,0 +1,9 @@
+<!-- #docplaster -->
+<!-- #docregion app-component-template -->
+<h1>
+  {{title}}
+</h1>
+
+<!-- add the selector from the CustomerDashboardComponent -->
+<app-customer-dashboard></app-customer-dashboard>
+<!-- #enddocregion app-component-template -->
diff --git a/aio/content/examples/feature-modules/src/app/app.component.spec.ts b/aio/content/examples/feature-modules/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..13c632d6763e
--- /dev/null
+++ b/aio/content/examples/feature-modules/src/app/app.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  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!');
+  }));
+});
diff --git a/aio/content/examples/feature-modules/src/app/app.component.ts b/aio/content/examples/feature-modules/src/app/app.component.ts
new file mode 100644
index 000000000000..ff63e0504887
--- /dev/null
+++ b/aio/content/examples/feature-modules/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app works!';
+}
diff --git a/aio/content/examples/feature-modules/src/app/app.module.ts b/aio/content/examples/feature-modules/src/app/app.module.ts
new file mode 100644
index 000000000000..dd55e2ea0440
--- /dev/null
+++ b/aio/content/examples/feature-modules/src/app/app.module.ts
@@ -0,0 +1,26 @@
+// #docplaster
+// #docregion app-module
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+// import the feature module here so you can add it to the imports array below
+import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    CustomerDashboardModule // add the feature module here
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+// #enddocregion app-module
diff --git a/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts
new file mode 100644
index 000000000000..4df17d96c407
--- /dev/null
+++ b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts
@@ -0,0 +1,34 @@
+// #docplaster
+// #docregion customer-dashboard
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// #enddocregion customer-dashboard
+// #docregion customer-dashboard-component
+// import the new component
+import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
+// #enddocregion customer-dashboard-component
+
+
+// #docregion customer-dashboard-component
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    CustomerDashboardComponent
+  ],
+  // #enddocregion customer-dashboard-component
+  // #docregion component-exports
+  exports: [
+    CustomerDashboardComponent
+  ]
+  // #enddocregion component-exports
+  // #docregion customer-dashboard-component
+})
+
+// #enddocregion customer-dashboard-component
+
+// #docregion customer-dashboard
+export class CustomerDashboardModule { }
+
+// #enddocregion customer-dashboard
diff --git a/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.css b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html
new file mode 100644
index 000000000000..e3e295f5c71e
--- /dev/null
+++ b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html
@@ -0,0 +1,7 @@
+
+<!-- #docplaster -->
+<!-- #docregion feature-template -->
+<p>
+  customer-dashboard works!
+</p>
+<!-- #enddocregion feature-template -->
diff --git a/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts
new file mode 100644
index 000000000000..2420d0552131
--- /dev/null
+++ b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomerDashboardComponent } from './customer-dashboard.component';
+
+describe('CustomerDashboardComponent', () => {
+  let component: CustomerDashboardComponent;
+  let fixture: ComponentFixture<CustomerDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomerDashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomerDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts
new file mode 100644
index 000000000000..b4dcf2e8fe52
--- /dev/null
+++ b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-customer-dashboard',
+  templateUrl: './customer-dashboard.component.html',
+  styleUrls: ['./customer-dashboard.component.css']
+})
+export class CustomerDashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/feature-modules/src/index.html b/aio/content/examples/feature-modules/src/index.html
new file mode 100644
index 000000000000..6e42a2c5d531
--- /dev/null
+++ b/aio/content/examples/feature-modules/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Feature Modules</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>
diff --git a/aio/content/examples/feature-modules/src/main.ts b/aio/content/examples/feature-modules/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/feature-modules/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/feature-modules/stackblitz.json b/aio/content/examples/feature-modules/stackblitz.json
new file mode 100644
index 000000000000..e0cbd2e29d49
--- /dev/null
+++ b/aio/content/examples/feature-modules/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "Feature Modules",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["feature modules"]
+}
diff --git a/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts b/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..e6f5e52951e9
--- /dev/null
+++ b/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,250 @@
+'use strict'; // necessary for node!
+
+import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } from 'protractor';
+
+// THESE TESTS ARE INCOMPLETE
+describe('Form Validation Tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  describe('Template-driven form', () => {
+    beforeAll(() => {
+      getPage('app-hero-form-template');
+    });
+
+    tests('Template-Driven Form');
+    bobTests();
+    asyncValidationTests();
+    crossValidationTests();
+  });
+
+  describe('Reactive form', () => {
+    beforeAll(() => {
+      getPage('app-hero-form-reactive');
+    });
+
+    tests('Reactive Form');
+    bobTests();
+    asyncValidationTests();
+    crossValidationTests();
+  });
+});
+
+//////////
+
+const testName = 'Test Name';
+
+let page: {
+  section: ElementFinder,
+  form: ElementFinder,
+  title: ElementFinder,
+  nameInput: ElementFinder,
+  alterEgoInput: ElementFinder,
+  powerSelect: ElementFinder,
+  powerOption: ElementFinder,
+  errorMessages: ElementArrayFinder,
+  heroFormButtons: ElementArrayFinder,
+  heroSubmitted: ElementFinder,
+  alterEgoErrors: ElementFinder,
+  crossValidationErrorMessage: ElementFinder,
+};
+
+function getPage(sectionTag: string) {
+  let section = element(by.css(sectionTag));
+  let buttons = section.all(by.css('button'));
+
+  page = {
+    section: section,
+    form: section.element(by.css('form')),
+    title: section.element(by.css('h1')),
+    nameInput: section.element(by.css('#name')),
+    alterEgoInput: section.element(by.css('#alterEgo')),
+    powerSelect: section.element(by.css('#power')),
+    powerOption: section.element(by.css('#power option')),
+    errorMessages: section.all(by.css('div.alert')),
+    heroFormButtons: buttons,
+    heroSubmitted: section.element(by.css('.submitted-message')),
+    alterEgoErrors: section.element(by.css('.alter-ego-errors')),
+    crossValidationErrorMessage: section.element(by.css('.cross-validation-error-message')),
+  };
+}
+
+function tests(title: string) {
+
+  it('should display correct title', function () {
+    expect(page.title.getText()).toContain(title);
+  });
+
+  it('should not display submitted message before submit', function () {
+    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false);
+  });
+
+  it('should have form buttons', function () {
+    expect(page.heroFormButtons.count()).toEqual(2);
+  });
+
+  it('should have error at start', function () {
+    expectFormIsInvalid();
+  });
+
+  // it('showForm', function () {
+  //   page.form.getInnerHtml().then(html => console.log(html));
+  // });
+
+  it('should have disabled submit button', function () {
+    expect(page.heroFormButtons.get(0).isEnabled()).toBe(false);
+  });
+
+  it('resetting name to valid name should clear errors', function () {
+    const ele = page.nameInput;
+    expect(ele.isPresent()).toBe(true, 'nameInput should exist');
+    ele.clear();
+    ele.sendKeys(testName);
+    expectFormIsValid();
+  });
+
+  it('should produce "required" error after clearing name', function () {
+    page.nameInput.clear();
+    // page.alterEgoInput.click(); // to blur ... didn't work
+    page.nameInput.sendKeys('x', protractor.Key.BACK_SPACE); // ugh!
+    expect(page.form.getAttribute('class')).toMatch('ng-invalid');
+    expect(page.errorMessages.get(0).getText()).toContain('required');
+  });
+
+  it('should produce "at least 4 characters" error when name="x"', function () {
+    page.nameInput.clear();
+    page.nameInput.sendKeys('x'); // too short
+    expectFormIsInvalid();
+    expect(page.errorMessages.get(0).getText()).toContain('at least 4 characters');
+  });
+
+  it('resetting name to valid name again should clear errors', function () {
+    page.nameInput.sendKeys(testName);
+    expectFormIsValid();
+  });
+
+  it('should have enabled submit button', function () {
+    const submitBtn = page.heroFormButtons.get(0);
+    expect(submitBtn.isEnabled()).toBe(true);
+  });
+
+  it('should hide form after submit', function () {
+    page.heroFormButtons.get(0).click();
+    expect(page.heroFormButtons.get(0).isDisplayed()).toBe(false);
+  });
+
+  it('submitted form should be displayed', function () {
+    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true);
+  });
+
+  it('submitted form should have new hero name', function () {
+    expect(page.heroSubmitted.getText()).toContain(testName);
+  });
+
+  it('clicking edit button should reveal form again', function () {
+    const newFormBtn = page.heroSubmitted.element(by.css('button'));
+    newFormBtn.click();
+    expect(page.heroSubmitted.isElementPresent(by.css('p')))
+      .toBe(false, 'submitted hidden again');
+    expect(page.title.isDisplayed()).toBe(true, 'can see form title');
+  });
+}
+
+function expectFormIsValid() {
+    expect(page.form.getAttribute('class')).toMatch('ng-valid');
+}
+
+function expectFormIsInvalid() {
+    expect(page.form.getAttribute('class')).toMatch('ng-invalid');
+}
+
+function triggerAlterEgoValidation() {
+  // alterEgo has updateOn set to 'blur', click outside of the input to trigger the blur event
+  element(by.css('app-root')).click()
+}
+
+function waitForAlterEgoValidation() {
+  // alterEgo async validation will be performed in 400ms
+  browser.sleep(400);
+}
+
+function bobTests() {
+  const emsg = 'Name cannot be Bob.';
+
+  it('should produce "no bob" error after setting name to "Bobby"', function () {
+    // Re-populate select element
+    page.powerSelect.click();
+    page.powerOption.click();
+
+    page.nameInput.clear();
+    page.nameInput.sendKeys('Bobby');
+    expectFormIsInvalid();
+    expect(page.errorMessages.get(0).getText()).toBe(emsg);
+  });
+
+  it('should be ok again with valid name', function () {
+    page.nameInput.clear();
+    page.nameInput.sendKeys(testName);
+    expectFormIsValid();
+  });
+}
+
+function asyncValidationTests() {
+  const emsg = 'Alter ego is already taken.';
+
+  it(`should produce "${emsg}" error after setting alterEgo to Eric`, function () {
+    page.alterEgoInput.clear();
+    page.alterEgoInput.sendKeys('Eric');
+
+    triggerAlterEgoValidation();
+    waitForAlterEgoValidation();
+
+    expectFormIsInvalid();
+    expect(page.alterEgoErrors.getText()).toBe(emsg);
+  });
+
+  it('should be ok again with different values', function () {
+    page.alterEgoInput.clear();
+    page.alterEgoInput.sendKeys('John');
+
+    triggerAlterEgoValidation();
+    waitForAlterEgoValidation();
+
+    expectFormIsValid();
+    expect(page.alterEgoErrors.isPresent()).toBe(false);
+  });
+}
+
+function crossValidationTests() {
+  const emsg = 'Name cannot match alter ego.';
+
+  it(`should produce "${emsg}" error after setting name and alter ego to the same value`, function () {
+    page.nameInput.clear();
+    page.nameInput.sendKeys('Batman');
+
+    page.alterEgoInput.clear();
+    page.alterEgoInput.sendKeys('Batman');
+
+    triggerAlterEgoValidation();
+    waitForAlterEgoValidation();
+
+    expectFormIsInvalid();
+    expect(page.crossValidationErrorMessage.getText()).toBe(emsg);
+  });
+
+  it('should be ok again with different values', function () {
+    page.nameInput.clear();
+    page.nameInput.sendKeys('Batman');
+
+    page.alterEgoInput.clear();
+    page.alterEgoInput.sendKeys('Superman');
+
+    triggerAlterEgoValidation();
+    waitForAlterEgoValidation();
+
+    expectFormIsValid();
+    expect(page.crossValidationErrorMessage.isPresent()).toBe(false);
+  });
+}
diff --git a/aio/content/examples/form-validation/example-config.json b/aio/content/examples/form-validation/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/form-validation/src/app/app.component.ts b/aio/content/examples/form-validation/src/app/app.component.ts
new file mode 100644
index 000000000000..dd7141f45e90
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/app.component.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `<app-hero-form-template></app-hero-form-template>
+             <hr>
+             <app-hero-form-reactive></app-hero-form-reactive>`
+})
+export class AppComponent { }
diff --git a/aio/content/examples/form-validation/src/app/app.module.ts b/aio/content/examples/form-validation/src/app/app.module.ts
new file mode 100644
index 000000000000..bf088541591e
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/app.module.ts
@@ -0,0 +1,29 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }           from './app.component';
+import { HeroFormTemplateComponent } from './template/hero-form-template.component';
+import { HeroFormReactiveComponent } from './reactive/hero-form-reactive.component';
+import { ForbiddenValidatorDirective } from './shared/forbidden-name.directive';
+import { IdentityRevealedValidatorDirective } from './shared/identity-revealed.directive';
+import { UniqueAlterEgoValidatorDirective } from './shared/alter-ego.directive';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroFormTemplateComponent,
+    HeroFormReactiveComponent,
+    ForbiddenValidatorDirective,
+    IdentityRevealedValidatorDirective,
+    UniqueAlterEgoValidatorDirective
+  ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.1.ts b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.1.ts
new file mode 100644
index 000000000000..72b5dbeaecca
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.1.ts
@@ -0,0 +1,42 @@
+/* tslint:disable: member-ordering forin */
+// #docplaster
+// #docregion
+import { Component, OnInit }                  from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
+
+@Component({
+  selector: 'app-hero-form-reactive',
+  templateUrl: './hero-form-reactive.component.html',
+  styleUrls: ['./hero-form-reactive.component.css'],
+})
+export class HeroFormReactiveComponent implements OnInit {
+
+  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
+
+  hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
+
+  heroForm: FormGroup;
+
+  // #docregion form-group
+  ngOnInit(): void {
+    // #docregion custom-validator
+    this.heroForm = new FormGroup({
+      'name': new FormControl(this.hero.name, [
+        Validators.required,
+        Validators.minLength(4),
+        forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
+      ]),
+      'alterEgo': new FormControl(this.hero.alterEgo),
+      'power': new FormControl(this.hero.power, Validators.required)
+    });
+    // #enddocregion custom-validator
+
+  }
+
+  get name() { return this.heroForm.get('name'); }
+
+  get power() { return this.heroForm.get('power'); }
+  // #enddocregion form-group
+}
+// #enddocregion
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts
new file mode 100644
index 000000000000..1bd4ca8ab57e
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts
@@ -0,0 +1,48 @@
+/* tslint:disable: member-ordering forin */
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
+import { UniqueAlterEgoValidator } from '../shared/alter-ego.directive';
+
+@Component({
+  selector: 'app-hero-form-reactive',
+  templateUrl: './hero-form-reactive.component.html',
+  styleUrls: ['./hero-form-reactive.component.css'],
+})
+export class HeroFormReactiveComponent implements OnInit {
+
+  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
+
+  hero = { name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0] };
+
+  heroForm: FormGroup;
+
+  ngOnInit(): void {
+    // #docregion async-validation
+    this.heroForm = new FormGroup({
+      'name': new FormControl(this.hero.name, [
+        Validators.required,
+        Validators.minLength(4),
+        forbiddenNameValidator(/bob/i)
+      ]),
+      'alterEgo': new FormControl(this.hero.alterEgo, {
+        asyncValidators: [this.alterEgoValidator.validate.bind(this.alterEgoValidator)],
+        updateOn: 'blur'
+      }),
+      'power': new FormControl(this.hero.power, Validators.required)
+    });
+    // #enddocregion async-validation
+  }
+
+  get name() { return this.heroForm.get('name'); }
+
+  get power() { return this.heroForm.get('power'); }
+
+  get alterEgo() { return this.heroForm.get('alterEgo'); }
+
+  // #docregion async-validation
+  constructor(private alterEgoValidator: UniqueAlterEgoValidator) {}
+  // #enddocregion async-validation
+}
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.css b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.css
new file mode 100644
index 000000000000..8e1db2c51177
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.css
@@ -0,0 +1,5 @@
+/* #docregion cross-validation-error-css */
+.cross-validation-error input {
+  border-left: 5px solid red;
+}
+/* #enddocregion cross-validation-error-css */
\ No newline at end of file
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
new file mode 100644
index 000000000000..0878c76073ec
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
@@ -0,0 +1,77 @@
+ <!-- #docregion -->
+<div class="container">
+
+  <h1>Reactive Form</h1>
+
+  <form [formGroup]="heroForm" #formDir="ngForm">
+
+    <div [hidden]="formDir.submitted">
+
+      <div class="cross-validation" [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
+        <div class="form-group">
+
+          <label for="name">Name</label>
+          <!-- #docregion name-with-error-msg -->
+          <input id="name" class="form-control"
+                formControlName="name" required >
+
+          <div *ngIf="name.invalid && (name.dirty || name.touched)"
+              class="alert alert-danger">
+
+            <div *ngIf="name.errors.required">
+              Name is required.
+            </div>
+            <div *ngIf="name.errors.minlength">
+              Name must be at least 4 characters long.
+            </div>
+            <div *ngIf="name.errors.forbiddenName">
+              Name cannot be Bob.
+            </div>
+          </div>
+          <!-- #enddocregion name-with-error-msg -->
+        </div>
+
+        <div class="form-group">
+          <label for="alterEgo">Alter Ego</label>
+          <input id="alterEgo" class="form-control"
+              formControlName="alterEgo"  >
+
+          <div *ngIf="alterEgo.pending">Validating...</div>
+          <div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">
+            <div *ngIf="alterEgo.errors?.uniqueAlterEgo">
+              Alter ego is already taken.
+            </div>
+          </div>
+        </div>
+
+        <!-- #docregion cross-validation-error-message -->
+        <div *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
+            Name cannot match alter ego.
+        </div>
+        <!-- #enddocregion cross-validation-error-message -->
+      </div>
+
+      <div class="form-group">
+        <label for="power">Hero Power</label>
+        <select id="power" class="form-control"
+            formControlName="power" required >
+          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
+        </select>
+
+        <div *ngIf="power.invalid && power.touched" class="alert alert-danger">
+          <div *ngIf="power.errors.required">Power is required.</div>
+        </div>
+      </div>
+
+      <button type="submit" class="btn btn-default"
+             [disabled]="heroForm.invalid">Submit</button>
+      <button type="button" class="btn btn-default"
+             (click)="formDir.resetForm({})">Reset</button>
+    </div>
+  </form>
+
+  <div class="submitted-message" *ngIf="formDir.submitted">
+    <p>You've submitted your hero, {{ heroForm.value.name }}!</p>
+    <button (click)="formDir.resetForm({})">Add new hero</button>
+  </div>
+</div>
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
new file mode 100644
index 000000000000..41541e7460bd
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
@@ -0,0 +1,44 @@
+/* tslint:disable: member-ordering forin */
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
+import { identityRevealedValidator } from '../shared/identity-revealed.directive';
+import { UniqueAlterEgoValidator } from '../shared/alter-ego.directive';
+
+@Component({
+  selector: 'app-hero-form-reactive',
+  templateUrl: './hero-form-reactive.component.html',
+  styleUrls: ['./hero-form-reactive.component.css'],
+})
+export class HeroFormReactiveComponent implements OnInit {
+
+  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
+
+  hero = { name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0] };
+
+  heroForm: FormGroup;
+
+  ngOnInit(): void {
+    this.heroForm = new FormGroup({
+      'name': new FormControl(this.hero.name, [
+        Validators.required,
+        Validators.minLength(4),
+        forbiddenNameValidator(/bob/i)
+      ]),
+      'alterEgo': new FormControl(this.hero.alterEgo, {
+        asyncValidators: [this.alterEgoValidator.validate.bind(this.alterEgoValidator)],
+        updateOn: 'blur'
+      }),
+      'power': new FormControl(this.hero.power, Validators.required)
+    },  { validators: identityRevealedValidator }); // <-- add custom validator at the FormGroup level
+  }
+
+  get name() { return this.heroForm.get('name'); }
+
+  get power() { return this.heroForm.get('power'); }
+
+  get alterEgo() { return this.heroForm.get('alterEgo'); }
+
+  constructor(private alterEgoValidator: UniqueAlterEgoValidator) { }
+}
diff --git a/aio/content/examples/form-validation/src/app/shared/alter-ego.directive.ts b/aio/content/examples/form-validation/src/app/shared/alter-ego.directive.ts
new file mode 100644
index 000000000000..f8230e31959d
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/shared/alter-ego.directive.ts
@@ -0,0 +1,46 @@
+import { Directive, forwardRef, Injectable } from '@angular/core';
+import {
+  AsyncValidator,
+  AbstractControl,
+  NG_ASYNC_VALIDATORS,
+  ValidationErrors
+} from '@angular/forms';
+import { catchError, map } from 'rxjs/operators';
+import { HeroesService } from './heroes.service';
+import { Observable } from 'rxjs';
+
+// #docregion async-validator
+@Injectable({ providedIn: 'root' })
+export class UniqueAlterEgoValidator implements AsyncValidator {
+  constructor(private heroesService: HeroesService) {}
+
+  validate(
+    ctrl: AbstractControl
+  ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
+    return this.heroesService.isAlterEgoTaken(ctrl.value).pipe(
+      map(isTaken => (isTaken ? { uniqueAlterEgo: true } : null)),
+      catchError(() => null)
+    );
+  }
+}
+// #enddocregion async-validator
+
+// #docregion async-validator-directive
+@Directive({
+  selector: '[appUniqueAlterEgo]',
+  providers: [
+    {
+      provide: NG_ASYNC_VALIDATORS,
+      useExisting: forwardRef(() => UniqueAlterEgoValidator),
+      multi: true
+    }
+  ]
+})
+export class UniqueAlterEgoValidatorDirective {
+  constructor(private validator: UniqueAlterEgoValidator) {}
+
+  validate(control: AbstractControl) {
+    this.validator.validate(control);
+  }
+}
+// #enddocregion async-validator-directive
diff --git a/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
new file mode 100644
index 000000000000..9da3abef3705
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
@@ -0,0 +1,31 @@
+// #docregion
+import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from '@angular/forms';
+
+// #docregion custom-validator
+/** A hero's name can't match the given regular expression */
+export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
+  return (control: AbstractControl): {[key: string]: any} | null => {
+    const forbidden = nameRe.test(control.value);
+    return forbidden ? {'forbiddenName': {value: control.value}} : null;
+  };
+}
+// #enddocregion custom-validator
+
+// #docregion directive
+@Directive({
+  selector: '[appForbiddenName]',
+  // #docregion directive-providers
+  providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
+  // #enddocregion directive-providers
+})
+export class ForbiddenValidatorDirective implements Validator {
+  @Input('appForbiddenName') forbiddenName: string;
+
+  validate(control: AbstractControl): {[key: string]: any} | null {
+    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
+                              : null;
+  }
+}
+// #enddocregion directive
+
diff --git a/aio/content/examples/form-validation/src/app/shared/heroes.service.ts b/aio/content/examples/form-validation/src/app/shared/heroes.service.ts
new file mode 100644
index 000000000000..1bacdec57f35
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/shared/heroes.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+const ALTER_EGOS = ['Eric'];
+
+@Injectable({ providedIn: 'root' })
+export class HeroesService {
+  isAlterEgoTaken(alterEgo: string): Observable<boolean> {
+    const isTaken = ALTER_EGOS.includes(alterEgo);
+
+    return of(isTaken).pipe(delay(400));
+  }
+}
diff --git a/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts b/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts
new file mode 100644
index 000000000000..b5dbd05c1513
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts
@@ -0,0 +1,25 @@
+// #docregion
+import { Directive } from '@angular/core';
+import { AbstractControl, FormGroup, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn } from '@angular/forms';
+
+// #docregion cross-validation-validator
+/** A hero's name can't match the hero's alter ego */
+export const identityRevealedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
+  const name = control.get('name');
+  const alterEgo = control.get('alterEgo');
+
+  return name && alterEgo && name.value === alterEgo.value ? { 'identityRevealed': true } : null;
+};
+// #enddocregion cross-validation-validator
+
+// #docregion cross-validation-directive
+@Directive({
+  selector: '[appIdentityRevealed]',
+  providers: [{ provide: NG_VALIDATORS, useExisting: IdentityRevealedValidatorDirective, multi: true }]
+})
+export class IdentityRevealedValidatorDirective implements Validator {
+  validate(control: AbstractControl): ValidationErrors {
+    return identityRevealedValidator(control)
+  }
+}
+// #enddocregion cross-validation-directive
diff --git a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.css b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.css
new file mode 100644
index 000000000000..9699072894de
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.css
@@ -0,0 +1,4 @@
+/* #docregion */
+.cross-validation-error input {
+  border-left: 5px solid red;
+}
\ No newline at end of file
diff --git a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
new file mode 100644
index 000000000000..14668dcbcdab
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
@@ -0,0 +1,84 @@
+ <!-- #docregion -->
+<div class="container">
+
+  <h1>Template-Driven Form</h1>
+  <!-- #docregion cross-validation-register-validator -->
+  <form #heroForm="ngForm" appIdentityRevealed>
+  <!-- #enddocregion cross-validation-register-validator -->
+    <div [hidden]="heroForm.submitted">
+      <div class="cross-validation" [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
+        <div class="form-group">
+          <label for="name">Name</label>
+          <!-- #docregion name-with-error-msg -->
+          <!-- #docregion name-input -->
+          <input id="name" name="name" class="form-control"
+                required minlength="4" appForbiddenName="bob"
+                [(ngModel)]="hero.name" #name="ngModel" >
+          <!-- #enddocregion name-input -->
+
+          <div *ngIf="name.invalid && (name.dirty || name.touched)"
+              class="alert alert-danger">
+
+            <div *ngIf="name.errors.required">
+              Name is required.
+            </div>
+            <div *ngIf="name.errors.minlength">
+              Name must be at least 4 characters long.
+            </div>
+            <div *ngIf="name.errors.forbiddenName">
+              Name cannot be Bob.
+            </div>
+
+          </div>
+          <!-- #enddocregion name-with-error-msg -->
+        </div>
+
+        <div class="form-group">
+          <label for="alterEgo">Alter Ego</label>
+        <!-- #docregion async-validation -->
+          <input id="alterEgo" class="form-control" name="alterEgo"
+                #alterEgo="ngModel"
+                [(ngModel)]="hero.alterEgo"
+                [ngModelOptions]="{ updateOn: 'blur' }"
+                appUniqueAlterEgo>
+        <!-- #enddocregion async-validation -->
+
+          <div *ngIf="alterEgo.pending">Validating...</div>
+          <div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">
+            <div *ngIf="alterEgo.errors?.uniqueAlterEgo">
+              Alter ego is already taken.
+            </div>
+          </div>
+        </div>
+
+        <!-- #docregion cross-validation-error-message -->
+        <div *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
+            Name cannot match alter ego.
+        </div>
+        <!-- #enddocregion cross-validation-error-message -->
+      </div>
+
+      <div class="form-group">
+        <label for="power">Hero Power</label>
+        <select id="power" name="power" class="form-control"
+                required [(ngModel)]="hero.power" #power="ngModel" >
+          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
+        </select>
+
+        <div *ngIf="power.errors && power.touched" class="alert alert-danger">
+          <div *ngIf="power.errors.required">Power is required.</div>
+        </div>
+      </div>
+
+      <button type="submit" class="btn btn-default"
+              [disabled]="heroForm.invalid">Submit</button>
+      <button type="button" class="btn btn-default"
+              (click)="heroForm.resetForm({})">Reset</button>
+    </div>
+
+    <div class="submitted-message" *ngIf="heroForm.submitted">
+      <p>You've submitted your hero, {{ heroForm.value.name }}!</p>
+      <button (click)="heroForm.resetForm({})">Add new hero</button>
+    </div>
+  </form>
+</div>
diff --git a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts
new file mode 100644
index 000000000000..f1e88e92f63e
--- /dev/null
+++ b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts
@@ -0,0 +1,19 @@
+/* tslint:disable: member-ordering */
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion component
+@Component({
+  selector: 'app-hero-form-template',
+  templateUrl: './hero-form-template.component.html',
+  styleUrls: ['./hero-form-template.component.css'],
+})
+export class HeroFormTemplateComponent {
+
+  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
+
+  hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
+
+}
+// #enddocregion
diff --git a/aio/content/examples/form-validation/src/assets/forms.css b/aio/content/examples/form-validation/src/assets/forms.css
new file mode 100644
index 000000000000..1d388f656dd6
--- /dev/null
+++ b/aio/content/examples/form-validation/src/assets/forms.css
@@ -0,0 +1,8 @@
+
+.ng-valid[required], .ng-valid.required  {
+  border-left: 5px solid #42A948; /* green */
+}
+
+.ng-invalid:not(form)  {
+  border-left: 5px solid #a94442; /* red */
+}
diff --git a/aio/content/examples/form-validation/src/index.html b/aio/content/examples/form-validation/src/index.html
new file mode 100644
index 000000000000..859ac1229985
--- /dev/null
+++ b/aio/content/examples/form-validation/src/index.html
@@ -0,0 +1,15 @@
+<html lang="en">
+  <head>
+    <title>Hero Form with Validation</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/forms.css">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
+
diff --git a/aio/content/examples/form-validation/src/main.ts b/aio/content/examples/form-validation/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/form-validation/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/form-validation/stackblitz.json b/aio/content/examples/form-validation/stackblitz.json
new file mode 100644
index 000000000000..80f399a6dd4d
--- /dev/null
+++ b/aio/content/examples/form-validation/stackblitz.json
@@ -0,0 +1,8 @@
+{
+  "description": "Validation",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ]
+}
diff --git a/aio/content/examples/forms/e2e/src/app.e2e-spec.ts b/aio/content/examples/forms/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..d3d3cff970da
--- /dev/null
+++ b/aio/content/examples/forms/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,62 @@
+import { browser, element, by } from 'protractor';
+
+describe('Forms Tests', function () {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it('should display correct title', function () {
+    expect(element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form');
+  });
+
+
+  it('should not display message before submit', function () {
+    let ele = element(by.css('h2'));
+    expect(ele.isDisplayed()).toBe(false);
+  });
+
+  it('should hide form after submit', function () {
+    let ele = element.all(by.css('h1')).get(0);
+    expect(ele.isDisplayed()).toBe(true);
+    let b = element.all(by.css('button[type=submit]')).get(0);
+    b.click().then(function() {
+      expect(ele.isDisplayed()).toBe(false);
+    });
+  });
+
+  it('should display message after submit', function () {
+    let b = element.all(by.css('button[type=submit]')).get(0);
+    b.click().then(function() {
+      expect(element(by.css('h2')).getText()).toContain('You submitted the following');
+    });
+  });
+
+  it('should hide form after submit', function () {
+    let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
+    expect(alterEgoEle.isDisplayed()).toBe(true);
+    let submitButtonEle = element.all(by.css('button[type=submit]')).get(0);
+    submitButtonEle.click().then(function() {
+      expect(alterEgoEle.isDisplayed()).toBe(false);
+    });
+  });
+
+  it('should reflect submitted data after submit', function () {
+    let test = 'testing 1 2 3';
+    let newValue: string;
+    let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
+    alterEgoEle.getAttribute('value').then(function(value: string) {
+      alterEgoEle.sendKeys(test);
+      newValue = value + test;
+      expect(alterEgoEle.getAttribute('value')).toEqual(newValue);
+      let b = element.all(by.css('button[type=submit]')).get(0);
+      return b.click();
+    }).then(function() {
+      let alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
+      expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label');
+      let divEle = element(by.cssContainingText('div', newValue));
+      expect(divEle.isPresent()).toBe(true, 'cannot locate div with this text: ' + newValue);
+    });
+  });
+});
+
diff --git a/aio/content/examples/forms/example-config.json b/aio/content/examples/forms/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/forms/src/app/app.component.css b/aio/content/examples/forms/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/forms/src/app/app.component.html b/aio/content/examples/forms/src/app/app.component.html
new file mode 100644
index 000000000000..84d14ff8f6d7
--- /dev/null
+++ b/aio/content/examples/forms/src/app/app.component.html
@@ -0,0 +1 @@
+<app-hero-form></app-hero-form>
diff --git a/aio/content/examples/forms/src/app/app.component.ts b/aio/content/examples/forms/src/app/app.component.ts
new file mode 100644
index 000000000000..f7baece9b5f4
--- /dev/null
+++ b/aio/content/examples/forms/src/app/app.component.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent { }
diff --git a/aio/content/examples/forms/src/app/app.module.ts b/aio/content/examples/forms/src/app/app.module.ts
new file mode 100644
index 000000000000..51b9b9afe242
--- /dev/null
+++ b/aio/content/examples/forms/src/app/app.module.ts
@@ -0,0 +1,21 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+
+import { AppComponent }  from './app.component';
+import { HeroFormComponent } from './hero-form/hero-form.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroFormComponent
+  ],
+  providers: [],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/forms/src/app/hero-form/hero-form.component.css b/aio/content/examples/forms/src/app/hero-form/hero-form.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/forms/src/app/hero-form/hero-form.component.html b/aio/content/examples/forms/src/app/hero-form/hero-form.component.html
new file mode 100644
index 000000000000..73b703f78973
--- /dev/null
+++ b/aio/content/examples/forms/src/app/hero-form/hero-form.component.html
@@ -0,0 +1,212 @@
+<!-- #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, edit-div -->
+      <div class="form-group">
+        <!-- #docregion name-with-error-msg -->
+        <label for="name">Name</label>
+        <input type="text" class="form-control" id="name"
+               required
+               [(ngModel)]="model.name" name="name"
+               #name="ngModel">
+        <!-- #docregion hidden-error-msg -->
+        <div [hidden]="name.valid || name.pristine"
+             class="alert alert-danger">
+        <!-- #enddocregion hidden-error-msg -->
+          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" id="alterEgo"
+               [(ngModel)]="model.alterEgo" name="alterEgo">
+      </div>
+
+      <div class="form-group">
+        <label for="power">Hero Power</label>
+        <select class="form-control" id="power"
+                required
+                [(ngModel)]="model.power" name="power"
+                #power="ngModel">
+          <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
+        </select>
+        <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
+          Power is required
+        </div>
+      </div>
+
+      <!-- #docregion submit-button -->
+      <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
+      <!-- #enddocregion submit-button -->
+      <!-- #docregion new-hero-button-form-reset -->
+      <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
+      <!-- #enddocregion new-hero-button-form-reset -->
+ <!-- #enddocregion final -->
+      <i>with</i> reset
+
+      &nbsp;&nbsp;
+      <!-- #docregion new-hero-button-no-reset -->
+      <button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
+      <!-- #enddocregion new-hero-button-no-reset -->
+      <i>without</i> reset
+
+     <!-- NOT SHOWN IN DOCS -->
+      <div>
+        <hr>
+        Name via form.controls = {{showFormControls(heroForm)}}
+      </div>
+     <!-- - -->
+<!-- #docregion final -->
+    </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-primary" (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" id="name" required>
+        </div>
+
+        <div class="form-group">
+          <label for="alterEgo">Alter Ego</label>
+          <input type="text" class="form-control" id="alterEgo">
+        </div>
+
+    <!-- #enddocregion start -->
+        <!-- #docregion powers -->
+        <div class="form-group">
+          <label for="power">Hero Power</label>
+          <select class="form-control" id="power" required>
+            <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
+          </select>
+        </div>
+
+        <!-- #enddocregion powers -->
+    <!-- #docregion start -->
+        <button type="submit" class="btn btn-success">Submit</button>
+
+      </form>
+  </div>
+    <!-- #enddocregion start -->
+  <!-- #enddocregion  phase1-->
+
+  <!-- ====================================================  -->
+  <hr>
+  <!-- #docregion phase2-->
+  <div class="container">
+      <h1>Hero Form</h1>
+      <!-- #docregion template-variable-->
+      <form #heroForm="ngForm">
+      <!-- #enddocregion template-variable-->
+    <!-- #docregion ngModel-2-->
+        {{diagnostic}}
+        <div class="form-group">
+          <label for="name">Name</label>
+          <input type="text" class="form-control" id="name"
+                 required
+                 [(ngModel)]="model.name" name="name">
+        </div>
+
+        <div class="form-group">
+          <label for="alterEgo">Alter Ego</label>
+          <input type="text"  class="form-control" id="alterEgo"
+                 [(ngModel)]="model.alterEgo" name="alterEgo">
+        </div>
+
+        <div class="form-group">
+          <label for="power">Hero Power</label>
+          <select class="form-control"  id="power"
+                  required
+                  [(ngModel)]="model.power" name="power">
+            <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
+          </select>
+        </div>
+
+    <!-- #enddocregion ngModel-2-->
+        <button type="submit" class="btn btn-success">Submit</button>
+
+      </form>
+  </div>
+  <!-- #enddocregion  phase2-->
+
+  <!-- EXTRA MATERIAL FOR DOCUMENTATION -->
+  <hr>
+  <!-- #docregion ngModelName-1 -->
+    <input type="text" class="form-control" id="name"
+           required
+           [(ngModel)]="model.name" name="name">
+    TODO: remove this: {{model.name}}
+  <!-- #enddocregion ngModelName-1 -->
+  <hr>
+  <!-- #docregion ngModel-3-->
+    <input type="text" class="form-control" id="name"
+           required
+           [ngModel]="model.name" name="name"
+           (ngModelChange)="model.name = $event">
+    TODO: remove this: {{model.name}}
+  <!-- #enddocregion ngModel-3-->
+  <hr>
+  <!-- #docregion ngModelName-2 -->
+       <input type="text" class="form-control" id="name"
+         required
+         [(ngModel)]="model.name" name="name"
+         #spy>
+       <br>TODO: remove this: {{spy.className}}
+  <!-- #enddocregion ngModelName-2 -->
+
+</div>
diff --git a/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts b/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts
new file mode 100644
index 000000000000..bc5fe12ef81b
--- /dev/null
+++ b/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts
@@ -0,0 +1,60 @@
+// #docplaster
+// #docregion , v1, final
+import { Component } from '@angular/core';
+
+import { Hero }    from '../hero';
+
+@Component({
+  selector: 'app-hero-form',
+  templateUrl: './hero-form.component.html',
+  styleUrls: ['./hero-form.component.css']
+})
+export class HeroFormComponent {
+
+  powers = ['Really Smart', 'Super Flexible',
+            'Super Hot', 'Weather Changer'];
+
+  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
+
+  // #docregion submitted
+  submitted = false;
+
+  onSubmit() { this.submitted = true; }
+  // #enddocregion submitted
+
+  // #enddocregion final
+  // TODO: Remove this when we're done
+  get diagnostic() { return JSON.stringify(this.model); }
+  // #enddocregion v1
+
+  // #docregion final, new-hero
+  newHero() {
+    this.model = new Hero(42, '', '');
+  }
+  // #enddocregion final, new-hero
+
+  skyDog(): Hero {
+    // #docregion SkyDog
+    let myHero =  new Hero(42, 'SkyDog',
+                           'Fetch any object at any distance',
+                           'Leslie Rollover');
+    console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"
+    // #enddocregion SkyDog
+    return myHero;
+  }
+
+  //////// NOT SHOWN IN DOCS ////////
+
+  // Reveal in html:
+  //   Name via form.controls = {{showFormControls(heroForm)}}
+  showFormControls(form: any) {
+    return form && form.controls['name'] &&
+    // #docregion form-controls
+    form.controls['name'].value; // Dr. IQ
+    // #enddocregion form-controls
+  }
+
+  /////////////////////////////
+
+  // #docregion v1, final
+}
diff --git a/aio/content/examples/forms/src/app/hero.ts b/aio/content/examples/forms/src/app/hero.ts
new file mode 100644
index 000000000000..c12862645232
--- /dev/null
+++ b/aio/content/examples/forms/src/app/hero.ts
@@ -0,0 +1,11 @@
+// #docregion
+export class Hero {
+
+  constructor(
+    public id: number,
+    public name: string,
+    public power: string,
+    public alterEgo?: string
+  ) {  }
+
+}
diff --git a/aio/content/examples/forms/src/assets/forms.css b/aio/content/examples/forms/src/assets/forms.css
new file mode 100644
index 000000000000..13ffbe1203d7
--- /dev/null
+++ b/aio/content/examples/forms/src/assets/forms.css
@@ -0,0 +1,9 @@
+/* #docregion */
+.ng-valid[required], .ng-valid.required  {
+  border-left: 5px solid #42A948; /* green */
+}
+
+.ng-invalid:not(form)  {
+  border-left: 5px solid #a94442; /* red */
+}
+/* #enddocregion */
diff --git a/aio/content/examples/forms/src/index.html b/aio/content/examples/forms/src/index.html
new file mode 100644
index 000000000000..44a5c33b0597
--- /dev/null
+++ b/aio/content/examples/forms/src/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html lang="en">
+  <head>
+    <title>Hero Form</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <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="assets/forms.css">
+    <!-- #enddocregion styles -->
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/forms/src/main.ts b/aio/content/examples/forms/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/forms/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/forms/src/styles.1.css b/aio/content/examples/forms/src/styles.1.css
new file mode 100644
index 000000000000..167a66be4f89
--- /dev/null
+++ b/aio/content/examples/forms/src/styles.1.css
@@ -0,0 +1 @@
+@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');
diff --git a/aio/content/examples/forms/stackblitz.json b/aio/content/examples/forms/stackblitz.json
new file mode 100644
index 000000000000..9e0797f0e950
--- /dev/null
+++ b/aio/content/examples/forms/stackblitz.json
@@ -0,0 +1,7 @@
+{
+  "description": "Forms",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ]
+}
diff --git a/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts b/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..09a4f3d27b88
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,103 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, by, element } from 'protractor';
+
+describe('Hierarchical dependency injection', () => {
+
+  beforeAll(() => {
+    browser.get('');
+  });
+
+  describe('Heroes Scenario', () => {
+    let page = {
+      heroName: '',
+      income: '',
+
+      // queries
+      heroEl: element.all(by.css('app-heroes-list li')).get(0), // first hero
+      heroCardEl: element(by.css('app-heroes-list app-hero-tax-return')), // first hero tax-return
+      taxReturnNameEl: element.all(by.css('app-heroes-list app-hero-tax-return #name')).get(0),
+      incomeInputEl: element.all(by.css('app-heroes-list app-hero-tax-return input')).get(0),
+      cancelButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Cancel')),
+      closeButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Close')),
+      saveButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Save'))
+    };
+
+    it('should list multiple heroes', () => {
+      expect(element.all(by.css('app-heroes-list li')).count()).toBeGreaterThan(1);
+    });
+
+    it('should show no hero tax-returns at the start', () => {
+      expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0);
+    });
+
+    it('should open first hero in app-hero-tax-return view after click', () => {
+      page.heroEl.getText()
+        .then(val => {
+          page.heroName = val;
+        })
+        .then(() => page.heroEl.click())
+        .then(() => {
+          expect(page.heroCardEl.isDisplayed()).toBe(true);
+        });
+    });
+
+    it('hero tax-return should have first hero\'s name', () => {
+      // Not `page.tax-returnNameInputEl.getAttribute('value')` although later that is essential
+      expect(page.taxReturnNameEl.getText()).toEqual(page.heroName);
+    });
+
+    it('should be able to cancel change', () => {
+      page.incomeInputEl.clear()
+        .then(() => page.incomeInputEl.sendKeys('777'))
+        .then(() => {
+          expect(page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777');
+          return page.cancelButtonEl.click();
+        })
+        .then(() => {
+          expect(page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777');
+        });
+    });
+
+    it('should be able to save change', () => {
+      page.incomeInputEl.clear()
+        .then(() => page.incomeInputEl.sendKeys('999'))
+        .then(() => {
+          expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999');
+          return page.saveButtonEl.click();
+        })
+        .then(() => {
+          expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999');
+        });
+    });
+
+    it('should be able to close tax-return', () => {
+      page.saveButtonEl.click()
+        .then(() => {
+          expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0);
+        });
+    });
+
+  });
+
+  describe('Villains Scenario', () => {
+    it('should list multiple villains', () => {
+      expect(element.all(by.css('app-villains-list li')).count()).toBeGreaterThan(1);
+    });
+  });
+
+  describe('Cars Scenario', () => {
+
+    it('A-component should use expected services', () => {
+      expect(element(by.css('a-car')).getText()).toContain('C1-E1-T1');
+    });
+
+    it('B-component should use expected services', () => {
+      expect(element(by.css('b-car')).getText()).toContain('C2-E2-T1');
+    });
+
+    it('C-component should use expected services', () => {
+      expect(element(by.css('c-car')).getText()).toContain('C3-E2-T1');
+    });
+  });
+});
diff --git a/aio/content/examples/hierarchical-dependency-injection/example-config.json b/aio/content/examples/hierarchical-dependency-injection/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/app.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/app.component.ts
new file mode 100644
index 000000000000..ad9d08fa64d0
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/app.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <label><input type="checkbox" [checked]="showHeroes"   (change)="showHeroes=!showHeroes">Heroes</label>
+    <label><input type="checkbox" [checked]="showVillains" (change)="showVillains=!showVillains">Villains</label>
+    <label><input type="checkbox" [checked]="showCars"     (change)="showCars=!showCars">Cars</label>
+
+    <h1>Hierarchical Dependency Injection</h1>
+
+    <app-heroes-list   *ngIf="showHeroes"></app-heroes-list>
+    <app-villains-list *ngIf="showVillains"></app-villains-list>
+    <app-cars       *ngIf="showCars"></app-cars>
+  `
+})
+export class AppComponent {
+  showCars = true;
+  showHeroes = true;
+  showVillains = true;
+}
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/app.module.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/app.module.ts
new file mode 100644
index 000000000000..6ea18655affa
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/app.module.ts
@@ -0,0 +1,33 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+
+import { AppComponent }          from './app.component';
+import { HeroTaxReturnComponent }     from './hero-tax-return.component';
+import { HeroesListComponent }   from './heroes-list.component';
+import { HeroesService }         from './heroes.service';
+import { VillainsListComponent } from './villains-list.component';
+
+import { carComponents, carServices } from './car.components';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [
+    carServices,
+    HeroesService
+ ],
+  declarations: [
+    AppComponent,
+    carComponents,
+    HeroesListComponent,
+    HeroTaxReturnComponent,
+    VillainsListComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/car.components.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/car.components.ts
new file mode 100644
index 000000000000..259f54b9a4a6
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/car.components.ts
@@ -0,0 +1,74 @@
+import { Component } from '@angular/core';
+
+import {
+  CarService, CarService2, CarService3,
+  EngineService, EngineService2, TiresService
+} from './car.services';
+
+////////// CCarComponent ////////////
+@Component({
+  selector: 'c-car',
+  template: `<div>C: {{description}}</div>`,
+  providers: [
+    { provide: CarService, useClass: CarService3 }
+  ]
+})
+export class CCarComponent {
+  description: string;
+  constructor(carService: CarService) {
+    this.description = `${carService.getCar().description} (${carService.name})`;
+  }
+}
+
+////////// BCarComponent ////////////
+@Component({
+  selector: 'b-car',
+  template: `
+    <div>B: {{description}}</div>
+    <c-car></c-car>
+  `,
+  providers: [
+    { provide: CarService,    useClass: CarService2 },
+    { provide: EngineService, useClass: EngineService2 }
+  ]
+})
+export class BCarComponent {
+  description: string;
+  constructor(carService: CarService) {
+    this.description = `${carService.getCar().description} (${carService.name})`;
+  }
+}
+
+////////// ACarComponent ////////////
+@Component({
+  selector: 'a-car',
+  template: `
+  <div>A: {{description}}</div>
+  <b-car></b-car>`
+})
+export class ACarComponent {
+  description: string;
+  constructor(carService: CarService) {
+    this.description = `${carService.getCar().description} (${carService.name})`;
+  }
+}
+////////// CarsComponent ////////////
+@Component({
+  selector: 'app-cars',
+  template: `
+  <h3>Cars</h3>
+  <a-car></a-car>`
+})
+export class CarsComponent { }
+
+////////////////
+
+export const carComponents = [
+  CarsComponent,
+  ACarComponent, BCarComponent, CCarComponent
+];
+
+// generic car-related services
+export const carServices = [
+ CarService, EngineService, TiresService
+];
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/car.services.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/car.services.ts
new file mode 100644
index 000000000000..03c79270b0ae
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/car.services.ts
@@ -0,0 +1,95 @@
+import { Injectable } from '@angular/core';
+
+/// Model ///
+export class Car {
+  name = 'Avocado Motors';
+  constructor(public engine: Engine, public tires: Tires) { }
+
+  get description() {
+    return `${this.name} car with ` +
+      `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
+  }
+}
+
+export class Engine {
+  cylinders = 4;
+}
+
+export class Tires {
+  make  = 'Flintstone';
+  model = 'Square';
+}
+
+//// Engine services ///
+@Injectable()
+export class EngineService {
+  id = 'E1';
+  getEngine() { return new Engine(); }
+}
+
+@Injectable()
+export class EngineService2 {
+  id = 'E2';
+  getEngine() {
+    const eng = new Engine();
+    eng.cylinders = 8;
+    return eng;
+  }
+}
+
+//// Tire services ///
+@Injectable()
+export class TiresService {
+  id = 'T1';
+  getTires() { return new Tires(); }
+}
+
+/// Car Services ///
+@Injectable()
+export class CarService {
+  id = 'C1';
+  constructor(
+    protected engineService: EngineService,
+    protected tiresService: TiresService) { }
+
+  getCar() {
+    return new Car(
+      this.engineService.getEngine(),
+      this.tiresService.getTires());
+  }
+
+  get name() {
+    return `${this.id}-${this.engineService.id}-${this.tiresService.id}`;
+  }
+}
+
+@Injectable()
+export class CarService2 extends CarService {
+  id = 'C2';
+  constructor(
+    protected engineService: EngineService,
+    protected tiresService: TiresService) {
+    super(engineService, tiresService);
+  }
+  getCar() {
+    const car = super.getCar();
+    car.name = 'BamBam Motors, BroVan 2000';
+    return car;
+  }
+}
+
+@Injectable()
+export class CarService3 extends CarService2 {
+  id = 'C3';
+  constructor(
+    protected engineService: EngineService,
+    protected tiresService: TiresService) {
+    super(engineService, tiresService);
+  }
+  getCar() {
+    const car = super.getCar();
+    car.name = 'Chizzamm Motors, Calico UltraMax Supreme';
+    return car;
+  }
+}
+
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css
new file mode 100644
index 000000000000..1d29a1d1680e
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css
@@ -0,0 +1,22 @@
+.tax-return { border: thin dashed green; margin: 1em; padding: 1em; width: 18em; position: relative }
+#name { font-weight: bold;}
+#tid { float: right; }
+input { font-size: 100%; padding-left: 2px; width: 6em; }
+input.num { text-align: right; padding-left: 0; padding-right: 4px; width: 4em;}
+fieldset { border: 0 none;}
+
+.msg {
+  color: white;
+  font-size: 150%;
+  position: absolute;
+  /*opacity: 0.3;*/
+  left: 2px;
+  top: 3em;
+  width: 98%;
+  background-color: green;
+  text-align: center;
+}
+.msg.canceled {
+  color: white;
+  background-color: red;
+}
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html
new file mode 100644
index 000000000000..ebf2dcbaaa7d
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html
@@ -0,0 +1,20 @@
+<div class="tax-return">
+  <div class="msg" [class.canceled]="message==='Canceled'">{{message}}</div>
+  <fieldset>
+    <span  id=name>{{taxReturn.name}}</span>
+    <label id=tid>TID: {{taxReturn.tid}}</label>
+  </fieldset>
+  <fieldset>
+    <label>
+      Income: <input [(ngModel)]="taxReturn.income" class="num">
+    </label>
+  </fieldset>
+  <fieldset>
+    <label>Tax: {{taxReturn.tax}}</label>
+  </fieldset>
+  <fieldset>
+    <button (click)="onSaved()">Save</button>
+    <button (click)="onCanceled()">Cancel</button>
+    <button (click)="onClose()">Close</button>
+  </fieldset>
+</div>
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts
new file mode 100644
index 000000000000..0696e5f96b4b
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts
@@ -0,0 +1,44 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { HeroTaxReturn }        from './hero';
+import { HeroTaxReturnService } from './hero-tax-return.service';
+
+@Component({
+  selector: 'app-hero-tax-return',
+  templateUrl: './hero-tax-return.component.html',
+  styleUrls: [ './hero-tax-return.component.css' ],
+  // #docregion providers
+  providers: [ HeroTaxReturnService ]
+  // #enddocregion providers
+})
+export class HeroTaxReturnComponent {
+  message = '';
+  @Output() close = new EventEmitter<void>();
+
+  get taxReturn(): HeroTaxReturn {
+    return this.heroTaxReturnService.taxReturn;
+  }
+  @Input()
+  set taxReturn (htr: HeroTaxReturn) {
+    this.heroTaxReturnService.taxReturn = htr;
+  }
+
+  constructor(private heroTaxReturnService: HeroTaxReturnService ) { }
+
+  onCanceled()  {
+    this.flashMessage('Canceled');
+    this.heroTaxReturnService.restoreTaxReturn();
+  };
+
+  onClose()  { this.close.emit(); };
+
+  onSaved() {
+    this.flashMessage('Saved');
+    this.heroTaxReturnService.saveTaxReturn();
+  }
+
+  flashMessage(msg: string) {
+    this.message = msg;
+    setTimeout(() => this.message = '', 500);
+  }
+}
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts
new file mode 100644
index 000000000000..d6ff0f7fff5d
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts
@@ -0,0 +1,30 @@
+// #docregion
+import { Injectable }    from '@angular/core';
+import { HeroTaxReturn } from './hero';
+import { HeroesService } from './heroes.service';
+
+@Injectable()
+export class HeroTaxReturnService {
+  private currentTaxReturn: HeroTaxReturn;
+  private originalTaxReturn: HeroTaxReturn;
+
+  constructor(private heroService: HeroesService) { }
+
+  set taxReturn (htr: HeroTaxReturn) {
+    this.originalTaxReturn = htr;
+    this.currentTaxReturn  = htr.clone();
+  }
+
+  get taxReturn (): HeroTaxReturn {
+    return this.currentTaxReturn;
+  }
+
+  restoreTaxReturn() {
+    this.taxReturn = this.originalTaxReturn;
+  }
+
+  saveTaxReturn() {
+    this.taxReturn = this.currentTaxReturn;
+    this.heroService.saveTaxReturn(this.currentTaxReturn).subscribe();
+  }
+}
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/hero.ts
new file mode 100644
index 000000000000..4ad6ccd8eb89
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero.ts
@@ -0,0 +1,31 @@
+// #docregion
+
+export class Hero {
+  id:   number;
+  name: string;
+  tid:  string; // tax id
+}
+
+//// HeroTaxReturn ////
+let nextId = 100;
+
+export class HeroTaxReturn {
+  constructor(
+    public id = nextId++,
+    public hero: Hero,
+    public income = 0 ) {
+      if (id === 0) { id = nextId++; }
+    }
+
+  get name() { return this.hero.name; }
+  get tax()  { return this.income ? .10 * this.income : 0; }
+  get tid()  { return this.hero.tid; }
+
+  toString() {
+    return `${this.hero.name}`;
+  }
+
+  clone() {
+    return new HeroTaxReturn(this.id, this.hero, this.income);
+  }
+}
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
new file mode 100644
index 000000000000..7e598a803872
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
@@ -0,0 +1,48 @@
+// #docregion
+import { Component }  from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { Hero, HeroTaxReturn } from './hero';
+import { HeroesService }       from './heroes.service';
+
+@Component({
+  selector: 'app-heroes-list',
+  template: `
+    <div>
+      <h3>Hero Tax Returns</h3>
+      <ul>
+        <li *ngFor="let hero of heroes | async"
+            (click)="showTaxReturn(hero)">{{hero.name}}
+        </li>
+      </ul>
+      <app-hero-tax-return
+        *ngFor="let selected of selectedTaxReturns; let i = index"
+        [taxReturn]="selected"
+        (close)="closeTaxReturn(i)">
+      </app-hero-tax-return>
+    </div>
+    `,
+  styles: [ 'li {cursor: pointer;}' ]
+})
+export class HeroesListComponent {
+  heroes: Observable<Hero[]>;
+  selectedTaxReturns: HeroTaxReturn[] = [];
+
+  constructor(private heroesService: HeroesService) {
+    this.heroes = heroesService.getHeroes();
+  }
+
+  showTaxReturn(hero: Hero) {
+    this.heroesService.getTaxReturn(hero)
+    .subscribe(htr => {
+      // show if not currently shown
+      if (!this.selectedTaxReturns.find(tr => tr.id === htr.id)) {
+        this.selectedTaxReturns.push(htr);
+      }
+    });
+  }
+
+  closeTaxReturn(ix: number) {
+    this.selectedTaxReturns.splice(ix, 1);
+  }
+}
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts
new file mode 100644
index 000000000000..c4d08c7b8f0e
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts
@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+
+import { Observable, Observer } from 'rxjs';
+
+import { Hero, HeroTaxReturn } from './hero';
+
+@Injectable()
+export class HeroesService {
+  heroes: Hero[] = [
+    { id: 1, name: 'RubberMan', tid: '082-27-5678'},
+    { id: 2, name: 'Tornado',   tid: '099-42-4321'}
+  ];
+
+  heroTaxReturns: HeroTaxReturn[] = [
+    new HeroTaxReturn(10, this.heroes[0], 35000),
+    new HeroTaxReturn(20, this.heroes[1], 1250000)
+  ];
+
+  getHeroes(): Observable<Hero[]> {
+    return new Observable<Hero[]>((observer: Observer<Hero[]>) => {
+      observer.next(this.heroes);
+      observer.complete();
+    });
+  }
+
+  getTaxReturn(hero: Hero): Observable<HeroTaxReturn> {
+    return new Observable<HeroTaxReturn>((observer: Observer<HeroTaxReturn>) => {
+      const htr = this.heroTaxReturns.find(t => t.hero.id === hero.id);
+      observer.next(htr || new HeroTaxReturn(0, hero));
+      observer.complete();
+    });
+  }
+
+  saveTaxReturn(heroTaxReturn: HeroTaxReturn): Observable<HeroTaxReturn> {
+    return new Observable<HeroTaxReturn>((observer: Observer<HeroTaxReturn>) => {
+      const htr = this.heroTaxReturns.find(t => t.id === heroTaxReturn.id);
+      if (htr) {
+        heroTaxReturn = Object.assign(htr, heroTaxReturn); // demo: mutate
+      } else {
+        this.heroTaxReturns.push(heroTaxReturn);
+      }
+      observer.next(heroTaxReturn);
+      observer.complete();
+    });
+  }
+}
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html b/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html
new file mode 100644
index 000000000000..75e5ba3237aa
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html
@@ -0,0 +1,6 @@
+<div>
+  <h3>Villains</h3>
+  <ul>
+    <li *ngFor="let villain of villains | async">{{villain.name}}</li>
+  </ul>
+</div>
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts
new file mode 100644
index 000000000000..aa70bdf3cba4
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Component }  from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { Villain, VillainsService } from './villains.service';
+
+// #docregion metadata
+@Component({
+  selector: 'app-villains-list',
+  templateUrl: './villains-list.component.html',
+  providers: [ VillainsService ]
+})
+// #enddocregion metadata
+export class VillainsListComponent {
+  villains: Observable<Villain[]>;
+
+  constructor(private villainsService: VillainsService) {
+    this.villains = villainsService.getVillains();
+  }
+}
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts
new file mode 100644
index 000000000000..a8605bd11d6c
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+
+import { of }         from 'rxjs';
+
+export interface Villain { id: number; name: string; }
+
+@Injectable()
+export class VillainsService {
+ villains: Villain[] = [
+    { id: 1, name: 'Dr. Evil'},
+    { id: 2, name: 'Moriarty'}
+  ];
+
+  getVillains() {
+    return of(this.villains);
+  }
+}
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/index.html b/aio/content/examples/hierarchical-dependency-injection/src/index.html
new file mode 100644
index 000000000000..dd35fec6aed7
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Hierarchical Injectors</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/main.ts b/aio/content/examples/hierarchical-dependency-injection/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/hierarchical-dependency-injection/stackblitz.json b/aio/content/examples/hierarchical-dependency-injection/stackblitz.json
new file mode 100644
index 000000000000..7bb2331163b5
--- /dev/null
+++ b/aio/content/examples/hierarchical-dependency-injection/stackblitz.json
@@ -0,0 +1,8 @@
+{
+  "description": "Hierarchical Dependency Injection",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags": ["dependency", "injection"]
+}
diff --git a/aio/content/examples/http/e2e/src/app.e2e-spec.ts b/aio/content/examples/http/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..d0a77b52398b
--- /dev/null
+++ b/aio/content/examples/http/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,142 @@
+import { browser, element, by, ElementFinder } from 'protractor';
+import { resolve } from 'path';
+
+const page = {
+  configClearButton: element.all(by.css('app-config > div button')).get(2),
+  configErrorButton: element.all(by.css('app-config > div button')).get(3),
+  configErrorMessage: element(by.css('app-config p')),
+  configGetButton: element.all(by.css('app-config > div button')).get(0),
+  configGetResponseButton: element.all(by.css('app-config > div button')).get(1),
+  configSpan: element(by.css('app-config span')),
+  downloadButton: element.all(by.css('app-downloader button')).get(0),
+  downloadClearButton: element.all(by.css('app-downloader button')).get(1),
+  downloadMessage: element(by.css('app-downloader p')),
+  heroesListAddButton: element.all(by.css('app-heroes > div button')).get(0),
+  heroesListInput: element(by.css('app-heroes > div input')),
+  heroesListSearchButton: element.all(by.css('app-heroes > div button')).get(1),
+  heroesListItems: element.all(by.css('app-heroes ul li')),
+  logClearButton: element(by.css('app-messages button')),
+  logList: element(by.css('app-messages ol')),
+  logListItems: element.all(by.css('app-messages ol li')),
+  searchInput: element(by.css('app-package-search input#name')),
+  searchListItems: element.all(by.css('app-package-search li')),
+  uploadInput: element(by.css('app-uploader input')),
+  uploadMessage: element(by.css('app-uploader p'))
+};
+
+let checkLogForMessage = (message: string) => {
+  expect(page.logList.getText()).toContain(message);
+};
+
+// TODO(i): temorarily disable these tests because angular-in-memory-web-api is not compatible with rxjs v6 yet
+//          and we don't have the backwards compatibility package yet.
+//          Reenable after rxjs v6 compatibility package is out or angular-in-memory-web-api is compatible with rxjs v6
+xdescribe('Http Tests', function() {
+  beforeEach(() => {
+    browser.get('');
+  });
+
+  describe('Heroes', () => {
+    it('retrieves the list of heroes at startup', () => {
+      expect(page.heroesListItems.count()).toBe(4);
+      expect(page.heroesListItems.get(0).getText()).toContain('Mr. Nice');
+      checkLogForMessage('GET "api/heroes"');
+    });
+
+    it('makes a POST to add a new hero', () => {
+      page.heroesListInput.sendKeys('Magneta');
+      page.heroesListAddButton.click();
+      expect(page.heroesListItems.count()).toBe(5);
+      checkLogForMessage('POST "api/heroes"');
+    });
+
+    it('makes a GET to search for a hero', () => {
+      page.heroesListInput.sendKeys('Celeritas');
+      page.heroesListSearchButton.click();
+      checkLogForMessage('GET "api/heroes?name=Celeritas"');
+    });
+  });
+
+  describe('Messages', () => {
+    it('can clear the logs', () => {
+      expect(page.logListItems.count()).toBe(1);
+      page.logClearButton.click();
+      expect(page.logListItems.count()).toBe(0);
+    });
+  });
+
+  describe('Configuration', () => {
+    it('can fetch the configuration JSON file', () => {
+      page.configGetButton.click();
+      checkLogForMessage('GET "assets/config.json"');
+      expect(page.configSpan.getText()).toContain('Heroes API URL is "api/heroes"');
+      expect(page.configSpan.getText()).toContain('Textfile URL is "assets/textfile.txt"');
+    });
+
+    it('can fetch the configuration JSON file with headers', () => {
+      page.configGetResponseButton.click();
+      checkLogForMessage('GET "assets/config.json"');
+      expect(page.configSpan.getText()).toContain('Response headers:');
+      expect(page.configSpan.getText()).toContain('content-type: application/json; charset=UTF-8');
+    });
+
+    it('can clear the configuration log', () => {
+      page.configGetResponseButton.click();
+      expect(page.configSpan.getText()).toContain('Response headers:');
+      page.configClearButton.click();
+      expect(page.configSpan.isPresent()).toBeFalsy();
+    });
+
+    it('throws an error for a non valid url', () => {
+      page.configErrorButton.click();
+      checkLogForMessage('GET "not/a/real/url"');
+      expect(page.configErrorMessage.getText()).toContain('"Something bad happened; please try again later."');
+    });
+  });
+
+  describe('Download', () => {
+    it('can download a txt file and show it', () => {
+      page.downloadButton.click();
+      checkLogForMessage('DownloaderService downloaded "assets/textfile.txt"');
+      checkLogForMessage('GET "assets/textfile.txt"');
+      expect(page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "');
+    });
+
+    it('can clear the log of the download', () => {
+      page.downloadButton.click();
+      expect(page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "');
+      page.downloadClearButton.click();
+      expect(page.downloadMessage.isPresent()).toBeFalsy();
+    });
+  });
+
+  describe('Upload', () => {
+    it('can upload a file', () => {
+      const filename = 'app.po.ts';
+      const url = resolve(__dirname, filename);
+      page.uploadInput.sendKeys(url);
+      checkLogForMessage('POST "/upload/file" succeeded in');
+      expect(page.uploadMessage.getText()).toContain(
+        `File "${filename}" was completely uploaded!`);
+    });
+  });
+
+  describe('PackageSearch', () => {
+    it('can search for npm package and find in cache', () => {
+      const packageName = 'angular';
+      page.searchInput.sendKeys(packageName);
+      checkLogForMessage(
+        'Caching response from "https://npmsearch.com/query?q=angular"');
+      expect(page.searchListItems.count()).toBeGreaterThan(1, 'angular items');
+
+      page.searchInput.clear();
+      page.searchInput.sendKeys(' ');
+      expect(page.searchListItems.count()).toBe(0, 'search empty');
+
+      page.searchInput.clear();
+      page.searchInput.sendKeys(packageName);
+      checkLogForMessage(
+        'Found cached response for "https://npmsearch.com/query?q=angular"');
+    });
+  });
+});
diff --git a/aio/content/examples/http/example-config.json b/aio/content/examples/http/example-config.json
new file mode 100644
index 000000000000..317e9458f3db
--- /dev/null
+++ b/aio/content/examples/http/example-config.json
@@ -0,0 +1,3 @@
+{
+  "projectType": "testing"
+}
diff --git a/aio/content/examples/http/specs.stackblitz.json b/aio/content/examples/http/specs.stackblitz.json
new file mode 100644
index 000000000000..1442c98f3a3f
--- /dev/null
+++ b/aio/content/examples/http/specs.stackblitz.json
@@ -0,0 +1,18 @@
+{
+  "description": "Http Guide Testing",
+  "files":[
+    "src/app/heroes/heroes.service.ts",
+    "src/app/heroes/heroes.service.spec.ts",
+
+    "src/app/http-error-handler.service.ts",
+    "src/app/message.service.ts",
+    "src/testing/*.ts",
+
+    "src/styles.css",
+    "src/test.css",
+    "src/main-specs.ts",
+    "src/index-specs.html"
+  ],
+  "main": "src/index-specs.html",
+  "tags": ["http", "testing"]
+}
diff --git a/aio/content/examples/http/src/app/app.component.html b/aio/content/examples/http/src/app/app.component.html
new file mode 100644
index 000000000000..e5d5dec9098f
--- /dev/null
+++ b/aio/content/examples/http/src/app/app.component.html
@@ -0,0 +1,24 @@
+<h1>HTTP Sample</h1>
+<div>
+  <input type="checkbox" id="heroes" [checked]="toggleHeroes" (click)="toggleHeroes()">
+  <label for="heroes">Heroes</label>
+
+  <input type="checkbox" id="config" [checked]="showConfig" (click)="toggleConfig()">
+  <label for="config">Config</label>
+
+  <input type="checkbox" id="downloader" [checked]="showDownloader" (click)="toggleDownloader()">
+  <label for="downloader">Downloader</label>
+
+  <input type="checkbox" id="uploader" [checked]="showUploader" (click)="toggleUploader()">
+  <label for="uploader">Uploader</label>
+
+  <input type="checkbox" id="search" [checked]="showSearch" (click)="toggleSearch()">
+  <label for="search">Search</label>
+</div>
+
+<app-heroes *ngIf="showHeroes"></app-heroes>
+<app-messages></app-messages>
+<app-config *ngIf="showConfig"></app-config>
+<app-downloader *ngIf="showDownloader"></app-downloader>
+<app-uploader *ngIf="showUploader"></app-uploader>
+<app-package-search *ngIf="showSearch"></app-package-search>
diff --git a/aio/content/examples/http/src/app/app.component.ts b/aio/content/examples/http/src/app/app.component.ts
new file mode 100644
index 000000000000..655b55027610
--- /dev/null
+++ b/aio/content/examples/http/src/app/app.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  showHeroes = true;
+  showConfig = true;
+  showDownloader = true;
+  showUploader = true;
+  showSearch = true;
+
+  toggleHeroes() { this.showHeroes = !this.showHeroes; }
+  toggleConfig() { this.showConfig = !this.showConfig; }
+  toggleDownloader() { this.showDownloader = !this.showDownloader; }
+  toggleUploader() { this.showUploader = !this.showUploader; }
+  toggleSearch() { this.showSearch = !this.showSearch; }
+ }
diff --git a/aio/content/examples/http/src/app/app.module.ts b/aio/content/examples/http/src/app/app.module.ts
new file mode 100644
index 000000000000..0929ec3a9bc5
--- /dev/null
+++ b/aio/content/examples/http/src/app/app.module.ts
@@ -0,0 +1,89 @@
+// #docplaster
+// #docregion sketch
+import { NgModule }         from '@angular/core';
+import { BrowserModule }    from '@angular/platform-browser';
+// #enddocregion sketch
+import { FormsModule }      from '@angular/forms';
+// #docregion sketch
+import { HttpClientModule } from '@angular/common/http';
+// #enddocregion sketch
+import { HttpClientXsrfModule } from '@angular/common/http';
+
+import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService }  from './in-memory-data.service';
+
+import { RequestCache, RequestCacheWithMap } from './request-cache.service';
+
+import { AppComponent }         from './app.component';
+import { AuthService }          from './auth.service';
+import { ConfigComponent }      from './config/config.component';
+import { DownloaderComponent }  from './downloader/downloader.component';
+import { HeroesComponent }      from './heroes/heroes.component';
+import { HttpErrorHandler }     from './http-error-handler.service';
+import { MessageService }       from './message.service';
+import { MessagesComponent }    from './messages/messages.component';
+import { PackageSearchComponent } from './package-search/package-search.component';
+import { UploaderComponent }    from './uploader/uploader.component';
+
+import { httpInterceptorProviders } from './http-interceptors/index';
+// #docregion sketch
+
+@NgModule({
+// #docregion xsrf
+  imports: [
+// #enddocregion xsrf
+    BrowserModule,
+// #enddocregion sketch
+    FormsModule,
+// #docregion sketch
+    // import HttpClientModule after BrowserModule.
+// #docregion xsrf
+    HttpClientModule,
+// #enddocregion sketch
+    HttpClientXsrfModule.withOptions({
+      cookieName: 'My-Xsrf-Cookie',
+      headerName: 'My-Xsrf-Header',
+    }),
+// #enddocregion xsrf
+
+    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
+    // and returns simulated server responses.
+    // Remove it when a real server is ready to receive requests.
+    HttpClientInMemoryWebApiModule.forRoot(
+      InMemoryDataService, {
+        dataEncapsulation: false,
+        passThruUnknownUrl: true,
+        put204: false // return entity after PUT/update
+      }
+    )
+// #docregion sketch, xsrf
+  ],
+// #enddocregion xsrf
+  declarations: [
+    AppComponent,
+// #enddocregion sketch
+    ConfigComponent,
+    DownloaderComponent,
+    HeroesComponent,
+    MessagesComponent,
+    UploaderComponent,
+    PackageSearchComponent,
+// #docregion sketch
+  ],
+// #enddocregion sketch
+// #docregion interceptor-providers
+  providers: [
+    // #enddocregion interceptor-providers
+    AuthService,
+    HttpErrorHandler,
+    MessageService,
+    { provide: RequestCache, useClass: RequestCacheWithMap },
+    // #docregion interceptor-providers
+    httpInterceptorProviders
+  ],
+// #enddocregion interceptor-providers
+// #docregion sketch
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+// #enddocregion sketch
diff --git a/aio/content/examples/http/src/app/auth.service.ts b/aio/content/examples/http/src/app/auth.service.ts
new file mode 100644
index 000000000000..67a4eb4dc56a
--- /dev/null
+++ b/aio/content/examples/http/src/app/auth.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+/** Mock client-side authentication/authorization service */
+@Injectable()
+export class AuthService {
+  getAuthorizationToken() {
+    return 'some-auth-token';
+  }
+}
diff --git a/aio/content/examples/http/src/app/config/config.component.html b/aio/content/examples/http/src/app/config/config.component.html
new file mode 100644
index 000000000000..e17e9bc1094f
--- /dev/null
+++ b/aio/content/examples/http/src/app/config/config.component.html
@@ -0,0 +1,18 @@
+<h3>Get configuration from JSON file</h3>
+<div>
+  <button (click)="clear(); showConfig()">get</button>
+  <button (click)="clear(); showConfigResponse()">getResponse</button>
+  <button (click)="clear()">clear</button>
+  <button (click)="clear(); makeError()">error</button>
+  <span *ngIf="config">
+    <p>Heroes API URL is "{{config.heroesUrl}}"</p>
+    <p>Textfile URL is "{{config.textfile}}"</p>
+    <div *ngIf="headers">
+      Response headers:
+      <ul>
+        <li *ngFor="let header of headers">{{header}}</li>
+      </ul>
+    </div>
+  </span>
+</div>
+<p *ngIf="error" class="error">{{error | json}}</p>
diff --git a/aio/content/examples/http/src/app/config/config.component.ts b/aio/content/examples/http/src/app/config/config.component.ts
new file mode 100644
index 000000000000..c082e810302c
--- /dev/null
+++ b/aio/content/examples/http/src/app/config/config.component.ts
@@ -0,0 +1,78 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+import { Config, ConfigService } from './config.service';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-config',
+  templateUrl: './config.component.html',
+  providers: [ ConfigService ],
+  styles: ['.error {color: red;}']
+})
+export class ConfigComponent {
+  error: any;
+  headers: string[];
+  // #docregion v2
+  config: Config;
+
+  // #enddocregion v2
+  constructor(private configService: ConfigService) {}
+
+  clear() {
+    this.config = undefined;
+    this.error = undefined;
+    this.headers = undefined;
+  }
+
+  // #docregion v1, v2, v3
+  showConfig() {
+    this.configService.getConfig()
+  // #enddocregion v1, v2
+      .subscribe(
+        (data: Config) => this.config = { ...data }, // success path
+        error => this.error = error // error path
+      );
+  }
+  // #enddocregion v3
+
+  showConfig_v1() {
+    this.configService.getConfig_1()
+  // #docregion v1, v1_callback
+      .subscribe((data: Config) => this.config = {
+          heroesUrl: data['heroesUrl'],
+          textfile:  data['textfile']
+      });
+  // #enddocregion v1_callback
+  }
+  // #enddocregion v1
+
+  showConfig_v2() {
+    this.configService.getConfig()
+  // #docregion v2, v2_callback
+      // clone the data object, using its known Config shape
+      .subscribe((data: Config) => this.config = { ...data });
+  // #enddocregion v2_callback
+  }
+  // #enddocregion v2
+
+// #docregion showConfigResponse
+  showConfigResponse() {
+    this.configService.getConfigResponse()
+      // resp is of type `HttpResponse<Config>`
+      .subscribe(resp => {
+        // display its headers
+        const keys = resp.headers.keys();
+        this.headers = keys.map(key =>
+          `${key}: ${resp.headers.get(key)}`);
+
+        // access the body directly, which is typed as `Config`.
+        this.config = { ... resp.body };
+      });
+  }
+// #enddocregion showConfigResponse
+  makeError() {
+    this.configService.makeIntentionalError().subscribe(null, error => this.error = error );
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/http/src/app/config/config.service.ts b/aio/content/examples/http/src/app/config/config.service.ts
new file mode 100644
index 000000000000..4dd71c69ab51
--- /dev/null
+++ b/aio/content/examples/http/src/app/config/config.service.ts
@@ -0,0 +1,99 @@
+// #docplaster
+// #docregion , proto
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+// #enddocregion proto
+import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
+
+// #docregion rxjs-imports
+import { Observable, throwError } from 'rxjs';
+import { catchError, retry } from 'rxjs/operators';
+// #enddocregion rxjs-imports
+
+// #docregion config-interface
+export interface Config {
+  heroesUrl: string;
+  textfile: string;
+}
+// #enddocregion config-interface
+// #docregion proto
+
+@Injectable()
+export class ConfigService {
+  // #enddocregion proto
+  // #docregion getConfig_1
+  configUrl = 'assets/config.json';
+
+  // #enddocregion getConfig_1
+  // #docregion proto
+  constructor(private http: HttpClient) { }
+  // #enddocregion proto
+
+  // #docregion getConfig, getConfig_1, getConfig_2, getConfig_3
+  getConfig() {
+  // #enddocregion getConfig_1, getConfig_2, getConfig_3
+    return this.http.get<Config>(this.configUrl)
+      .pipe(
+        retry(3), // retry a failed request up to 3 times
+        catchError(this.handleError) // then handle the error
+      );
+  }
+  // #enddocregion getConfig
+
+  getConfig_1() {
+  // #docregion getConfig_1
+    return this.http.get(this.configUrl);
+  }
+  // #enddocregion getConfig_1
+
+  getConfig_2() {
+    // #docregion getConfig_2
+    // now returns an Observable of Config
+    return this.http.get<Config>(this.configUrl);
+  }
+  // #enddocregion getConfig_2
+
+  getConfig_3() {
+    // #docregion getConfig_3
+    return this.http.get<Config>(this.configUrl)
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+  // #enddocregion getConfig_3
+
+  // #docregion getConfigResponse
+  getConfigResponse(): Observable<HttpResponse<Config>> {
+    return this.http.get<Config>(
+      this.configUrl, { observe: 'response' });
+  }
+  // #enddocregion getConfigResponse
+
+  // #docregion handleError
+  private handleError(error: HttpErrorResponse) {
+    if (error.error instanceof ErrorEvent) {
+      // A client-side or network error occurred. Handle it accordingly.
+      console.error('An error occurred:', error.error.message);
+    } else {
+      // The backend returned an unsuccessful response code.
+      // The response body may contain clues as to what went wrong,
+      console.error(
+        `Backend returned code ${error.status}, ` +
+        `body was: ${error.error}`);
+    }
+    // return an observable with a user-facing error message
+    return throwError(
+      'Something bad happened; please try again later.');
+  };
+  // #enddocregion handleError
+
+  makeIntentionalError() {
+    return this.http.get('not/a/real/url')
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+// #docregion proto
+}
+// #enddocregion proto
diff --git a/aio/content/examples/http/src/app/downloader/downloader.component.html b/aio/content/examples/http/src/app/downloader/downloader.component.html
new file mode 100644
index 000000000000..3eb951647242
--- /dev/null
+++ b/aio/content/examples/http/src/app/downloader/downloader.component.html
@@ -0,0 +1,4 @@
+<h3>Download the textfile</h3>
+<button (click)="download()">Download</button>
+<button (click)="clear()">clear</button>
+<p *ngIf="contents">Contents: "{{contents}}"</p>
diff --git a/aio/content/examples/http/src/app/downloader/downloader.component.ts b/aio/content/examples/http/src/app/downloader/downloader.component.ts
new file mode 100644
index 000000000000..21216d1c6305
--- /dev/null
+++ b/aio/content/examples/http/src/app/downloader/downloader.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { DownloaderService } from './downloader.service';
+
+@Component({
+  selector: 'app-downloader',
+  templateUrl: './downloader.component.html',
+  providers: [ DownloaderService ]
+})
+export class DownloaderComponent {
+  contents: string;
+  constructor(private downloaderService: DownloaderService) {}
+
+  clear() {
+    this.contents = undefined;
+  }
+
+  // #docregion download
+  download() {
+    this.downloaderService.getTextFile('assets/textfile.txt')
+      .subscribe(results => this.contents = results);
+  }
+  // #enddocregion download
+}
diff --git a/aio/content/examples/http/src/app/downloader/downloader.service.ts b/aio/content/examples/http/src/app/downloader/downloader.service.ts
new file mode 100644
index 000000000000..e10a4f2b3541
--- /dev/null
+++ b/aio/content/examples/http/src/app/downloader/downloader.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { tap } from 'rxjs/operators';
+
+import { MessageService } from '../message.service';
+
+@Injectable()
+export class DownloaderService {
+  constructor(
+    private http: HttpClient,
+    private messageService: MessageService) { }
+
+  // #docregion getTextFile
+  getTextFile(filename: string) {
+    // 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().
+    return this.http.get(filename, {responseType: 'text'})
+      .pipe(
+        tap( // Log the result or error
+          data => this.log(filename, data),
+          error => this.logError(filename, error)
+        )
+      );
+  }
+  // #enddocregion getTextFile
+
+  private log(filename: string, data: string) {
+    const message = `DownloaderService downloaded "${filename}" and got "${data}".`;
+    this.messageService.add(message);
+  }
+
+  private logError(filename: string, error: any) {
+    const message = `DownloaderService failed to download "${filename}"; got error "${error.message}".`;
+    console.error(message);
+    this.messageService.add(message);
+  }
+}
diff --git a/aio/content/examples/http/src/app/heroes/hero.ts b/aio/content/examples/http/src/app/heroes/hero.ts
new file mode 100644
index 000000000000..a61b497759b7
--- /dev/null
+++ b/aio/content/examples/http/src/app/heroes/hero.ts
@@ -0,0 +1,4 @@
+export interface Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.css b/aio/content/examples/http/src/app/heroes/heroes.component.css
new file mode 100644
index 000000000000..89a07c17bf59
--- /dev/null
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.css
@@ -0,0 +1,89 @@
+/* HeroesComponent's private CSS styles */
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  position: relative;
+  cursor: pointer;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+  width: 19em;
+}
+
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+
+.heroes a {
+  color: #888;
+  text-decoration: none;
+  position: relative;
+  display: block;
+  width: 250px;
+}
+
+.heroes a:hover {
+  color:#607D8B;
+}
+
+.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;
+  min-width: 16px;
+  text-align: right;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
+.button {
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+  font-family: Arial;
+}
+
+button:hover {
+  background-color: #cfd8dc;
+}
+
+button.delete {
+  position: relative;
+  left: 24em;
+  top: -32px;
+  background-color: gray !important;
+  color: white;
+  display: inherit;
+  padding: 5px 8px;
+  width: 2em;
+}
+
+input {
+  font-size: 100%;
+  margin-bottom: 2px;
+  width: 11em;
+}
+
+.heroes input {
+  position: relative;
+  top: -3px;
+  width: 12em;
+}
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.html b/aio/content/examples/http/src/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..4bb3597a717f
--- /dev/null
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.html
@@ -0,0 +1,32 @@
+<h3>Heroes</h3>
+<!-- #docregion add -->
+<div>
+  <label>Hero name:
+    <input #heroName />
+  </label>
+  <!-- (click) passes input value to add() and then clears the input -->
+  <button (click)="add(heroName.value); heroName.value=''">
+    add
+  </button>
+  <button (click)="search(heroName.value)">
+    search
+  </button>
+</div>
+<!-- #enddocregion add -->
+
+<!-- #docregion list -->
+<ul class="heroes">
+  <li *ngFor="let hero of heroes">
+    <a (click)="edit(hero)">
+      <span class="badge">{{ hero.id || -1 }}</span>
+      <span *ngIf="hero!==editHero">{{hero.name}}</span>
+      <input *ngIf="hero===editHero" [(ngModel)]="hero.name"
+        (blur)="update()" (keyup.enter)="update()">
+    </a>
+    <!-- #docregion delete -->
+    <button class="delete" title="delete hero"
+    (click)="delete(hero)">x</button>
+    <!-- #enddocregion delete -->
+  </li>
+</ul>
+<!-- #enddocregion list -->
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.ts b/aio/content/examples/http/src/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..d44f80e9ff71
--- /dev/null
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.ts
@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from './hero';
+import { HeroesService } from './heroes.service';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  providers: [ HeroesService ],
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+  editHero: Hero; // the hero currently being edited
+
+  constructor(private heroesService: HeroesService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
+    this.heroesService.getHeroes()
+      .subscribe(heroes => this.heroes = heroes);
+  }
+
+  add(name: string): void {
+    this.editHero = undefined;
+    name = name.trim();
+    if (!name) { return; }
+
+    // The server will generate the id for this new hero
+    const newHero: Hero = { name } as Hero;
+    // #docregion add-hero-subscribe
+    this.heroesService.addHero(newHero)
+      .subscribe(hero => this.heroes.push(hero));
+    // #enddocregion add-hero-subscribe
+  }
+
+  delete(hero: Hero): void {
+    this.heroes = this.heroes.filter(h => h !== hero);
+    // #docregion delete-hero-subscribe
+    this.heroesService.deleteHero(hero.id).subscribe();
+    // #enddocregion delete-hero-subscribe
+    /*
+    // #docregion delete-hero-no-subscribe
+    // oops ... subscribe() is missing so nothing happens
+    this.heroesService.deleteHero(hero.id);
+    // #enddocregion delete-hero-no-subscribe
+    */
+  }
+
+  edit(hero) {
+    this.editHero = hero;
+  }
+
+  search(searchTerm: string) {
+    this.editHero = undefined;
+    if (searchTerm) {
+      this.heroesService.searchHeroes(searchTerm)
+        .subscribe(heroes => this.heroes = heroes);
+    }
+  }
+
+  update() {
+    if (this.editHero) {
+      this.heroesService.updateHero(this.editHero)
+        .subscribe(hero => {
+          // replace the hero in the heroes list with update from server
+          const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1;
+          if (ix > -1) { this.heroes[ix] = hero; }
+        });
+      this.editHero = undefined;
+    }
+  }
+}
diff --git a/aio/content/examples/http/src/app/heroes/heroes.service.spec.ts b/aio/content/examples/http/src/app/heroes/heroes.service.spec.ts
new file mode 100644
index 000000000000..bfc204b4adc3
--- /dev/null
+++ b/aio/content/examples/http/src/app/heroes/heroes.service.spec.ts
@@ -0,0 +1,156 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+// Other imports
+import { TestBed } from '@angular/core/testing';
+import { HttpClient, HttpResponse } from '@angular/common/http';
+
+import { Hero } from './hero';
+import { HeroesService } from './heroes.service';
+import { HttpErrorHandler } from '../http-error-handler.service';
+import { MessageService } from '../message.service';
+
+describe('HeroesService', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let heroService: HeroesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      // Import the HttpClient mocking services
+      imports: [ HttpClientTestingModule ],
+      // Provide the service-under-test and its dependencies
+      providers: [
+        HeroesService,
+        HttpErrorHandler,
+        MessageService
+      ]
+    });
+
+    // Inject the http, test controller, and service-under-test
+    // as they will be referenced by each test.
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    heroService = TestBed.get(HeroesService);
+  });
+
+  afterEach(() => {
+    // After every test, assert that there are no more pending requests.
+    httpTestingController.verify();
+  });
+
+  /// HeroService method tests begin ///
+
+  describe('#getHeroes', () => {
+    let expectedHeroes: Hero[];
+
+    beforeEach(() => {
+      heroService = TestBed.get(HeroesService);
+      expectedHeroes = [
+        { id: 1, name: 'A' },
+        { id: 2, name: 'B' },
+       ] as Hero[];
+    });
+
+    it('should return expected heroes (called once)', () => {
+
+      heroService.getHeroes().subscribe(
+        heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
+        fail
+      );
+
+      // HeroService should have made one request to GET heroes from expected URL
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+      expect(req.request.method).toEqual('GET');
+
+      // Respond with the mock heroes
+      req.flush(expectedHeroes);
+    });
+
+    it('should be OK returning no heroes', () => {
+
+      heroService.getHeroes().subscribe(
+        heroes => expect(heroes.length).toEqual(0, 'should have empty heroes array'),
+        fail
+      );
+
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+      req.flush([]); // Respond with no heroes
+    });
+
+    // This service reports the error but finds a way to let the app keep going.
+    it('should turn 404 into an empty heroes result', () => {
+
+      heroService.getHeroes().subscribe(
+        heroes => expect(heroes.length).toEqual(0, 'should return empty heroes array'),
+        fail
+      );
+
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+      // respond with a 404 and the error message in the body
+      const msg = 'deliberate 404 error';
+      req.flush(msg, {status: 404, statusText: 'Not Found'});
+    });
+
+    it('should return expected heroes (called multiple times)', () => {
+
+      heroService.getHeroes().subscribe();
+      heroService.getHeroes().subscribe();
+      heroService.getHeroes().subscribe(
+        heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
+        fail
+      );
+
+      const requests = httpTestingController.match(heroService.heroesUrl);
+      expect(requests.length).toEqual(3, 'calls to getHeroes()');
+
+      // Respond to each request with different mock hero results
+      requests[0].flush([]);
+      requests[1].flush([{id: 1, name: 'bob'}]);
+      requests[2].flush(expectedHeroes);
+    });
+  });
+
+  describe('#updateHero', () => {
+    // Expecting the query form of URL so should not 404 when id not found
+    const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`;
+
+    it('should update a hero and return it', () => {
+
+      const updateHero: Hero = { id: 1, name: 'A' };
+
+      heroService.updateHero(updateHero).subscribe(
+        data => expect(data).toEqual(updateHero, 'should return the hero'),
+        fail
+      );
+
+      // HeroService should have made one request to PUT hero
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+      expect(req.request.method).toEqual('PUT');
+      expect(req.request.body).toEqual(updateHero);
+
+      // Expect server to return the hero after PUT
+      const expectedResponse = new HttpResponse(
+        { status: 200, statusText: 'OK', body: updateHero });
+      req.event(expectedResponse);
+    });
+
+    // This service reports the error but finds a way to let the app keep going.
+    it('should turn 404 error into return of the update hero', () => {
+      const updateHero: Hero = { id: 1, name: 'A' };
+
+      heroService.updateHero(updateHero).subscribe(
+        data => expect(data).toEqual(updateHero, 'should return the update hero'),
+        fail
+      );
+
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+      // respond with a 404 and the error message in the body
+      const msg = 'deliberate 404 error';
+      req.flush(msg, {status: 404, statusText: 'Not Found'});
+    });
+  });
+
+  // TODO: test other HeroService methods
+});
diff --git a/aio/content/examples/http/src/app/heroes/heroes.service.ts b/aio/content/examples/http/src/app/heroes/heroes.service.ts
new file mode 100644
index 000000000000..a0c079027fa9
--- /dev/null
+++ b/aio/content/examples/http/src/app/heroes/heroes.service.ts
@@ -0,0 +1,98 @@
+// #docplaster
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+// #docregion http-options
+import { HttpHeaders } from '@angular/common/http';
+
+// #enddocregion http-options
+
+import { Observable } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+import { Hero } from './hero';
+import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
+
+// #docregion http-options
+const httpOptions = {
+  headers: new HttpHeaders({
+    'Content-Type':  'application/json',
+    'Authorization': 'my-auth-token'
+  })
+};
+// #enddocregion http-options
+
+@Injectable()
+export class HeroesService {
+  heroesUrl = 'api/heroes';  // URL to web api
+  private handleError: HandleError;
+
+  constructor(
+    private http: HttpClient,
+    httpErrorHandler: HttpErrorHandler) {
+    this.handleError = httpErrorHandler.createHandleError('HeroesService');
+  }
+
+  /** GET heroes from the server */
+  getHeroes (): Observable<Hero[]> {
+    return this.http.get<Hero[]>(this.heroesUrl)
+      .pipe(
+        catchError(this.handleError('getHeroes', []))
+      );
+  }
+
+    // #docregion searchHeroes
+  /* GET heroes whose name contains search term */
+  searchHeroes(term: string): Observable<Hero[]> {
+    term = term.trim();
+
+    // Add safe, URL encoded search parameter if there is a search term
+    const options = term ?
+     { params: new HttpParams().set('name', term) } : {};
+
+    return this.http.get<Hero[]>(this.heroesUrl, options)
+      .pipe(
+        catchError(this.handleError<Hero[]>('searchHeroes', []))
+      );
+  }
+  // #enddocregion searchHeroes
+
+  //////// Save methods //////////
+
+  // #docregion addHero
+  /** POST: add a new hero to the database */
+  addHero (hero: Hero): Observable<Hero> {
+    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
+      .pipe(
+        catchError(this.handleError('addHero', hero))
+      );
+  }
+  // #enddocregion addHero
+
+  // #docregion deleteHero
+  /** DELETE: delete the hero from the server */
+  deleteHero (id: number): Observable<{}> {
+    const url = `${this.heroesUrl}/${id}`; // DELETE api/heroes/42
+    return this.http.delete(url, httpOptions)
+      .pipe(
+        catchError(this.handleError('deleteHero'))
+      );
+  }
+  // #enddocregion deleteHero
+
+  // #docregion updateHero
+  /** PUT: update the hero on the server. Returns the updated hero upon success. */
+  updateHero (hero: Hero): Observable<Hero> {
+    // #enddocregion updateHero
+    // #docregion update-headers
+    httpOptions.headers =
+      httpOptions.headers.set('Authorization', 'my-new-auth-token');
+    // #enddocregion update-headers
+
+    // #docregion updateHero
+    return this.http.put<Hero>(this.heroesUrl, hero, httpOptions)
+      .pipe(
+        catchError(this.handleError('updateHero', hero))
+      );
+  }
+  // #enddocregion updateHero
+}
diff --git a/aio/content/examples/http/src/app/http-error-handler.service.ts b/aio/content/examples/http/src/app/http-error-handler.service.ts
new file mode 100644
index 000000000000..c7d0926fbd3e
--- /dev/null
+++ b/aio/content/examples/http/src/app/http-error-handler.service.ts
@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+
+import { Observable, of } from 'rxjs';
+
+import { MessageService } from './message.service';
+
+/** Type of the handleError function returned by HttpErrorHandler.createHandleError */
+export type HandleError =
+  <T> (operation?: string, result?: T) => (error: HttpErrorResponse) => Observable<T>;
+
+/** Handles HttpClient errors */
+@Injectable()
+export class HttpErrorHandler {
+  constructor(private messageService: MessageService) { }
+
+  /** Create curried handleError function that already knows the service name */
+  createHandleError = (serviceName = '') => <T>
+    (operation = 'operation', result = {} as T) => this.handleError(serviceName, operation, result);
+
+  /**
+   * Returns a function that handles Http operation failures.
+   * This error handler lets the app continue to run as if no error occurred.
+   * @param serviceName = name of the data service that attempted the operation
+   * @param operation - name of the operation that failed
+   * @param result - optional value to return as the observable result
+   */
+  handleError<T> (serviceName = '', operation = 'operation', result = {} as T) {
+
+    return (error: HttpErrorResponse): Observable<T> => {
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      const message = (error.error instanceof ErrorEvent) ?
+        error.error.message :
+       `server returned code ${error.status} with body "${error.error}"`;
+
+      // TODO: better job of transforming error for user consumption
+      this.messageService.add(`${serviceName}: ${operation} failed: ${message}`);
+
+      // Let the app keep running by returning a safe result.
+      return of( result );
+    };
+
+  }
+}
diff --git a/aio/content/examples/http/src/app/http-interceptors/auth-interceptor.ts b/aio/content/examples/http/src/app/http-interceptors/auth-interceptor.ts
new file mode 100644
index 000000000000..85fb760450c2
--- /dev/null
+++ b/aio/content/examples/http/src/app/http-interceptors/auth-interceptor.ts
@@ -0,0 +1,40 @@
+// #docplaster
+import { Injectable } from '@angular/core';
+import {
+  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
+} from '@angular/common/http';
+
+// #docregion
+import { AuthService } from '../auth.service';
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+
+  constructor(private auth: AuthService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    // Get the auth token from the service.
+    const authToken = this.auth.getAuthorizationToken();
+
+    // #enddocregion
+    /*
+    * The verbose way:
+    // #docregion
+    // Clone the request and replace the original headers with
+    // cloned headers, updated with the authorization.
+    const authReq = req.clone({
+      headers: req.headers.set('Authorization', authToken)
+    });
+    // #enddocregion
+    */
+    // #docregion set-header-shortcut
+    // Clone the request and set the new header in one step.
+    const authReq = req.clone({ setHeaders: { Authorization: authToken } });
+    // #enddocregion set-header-shortcut
+    // #docregion
+
+    // send cloned request with header to the next handler.
+    return next.handle(authReq);
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/http/src/app/http-interceptors/caching-interceptor.ts b/aio/content/examples/http/src/app/http-interceptors/caching-interceptor.ts
new file mode 100644
index 000000000000..5ebb631ac2a7
--- /dev/null
+++ b/aio/content/examples/http/src/app/http-interceptors/caching-interceptor.ts
@@ -0,0 +1,85 @@
+// #docplaster
+import { Injectable } from '@angular/core';
+import {
+  HttpEvent, HttpHeaders, HttpRequest, HttpResponse,
+  HttpInterceptor, HttpHandler
+} from '@angular/common/http';
+
+import { Observable, of } from 'rxjs';
+import { startWith, tap } from 'rxjs/operators';
+
+import { RequestCache } from '../request-cache.service';
+import { searchUrl } from '../package-search/package-search.service';
+
+
+/**
+ * If request is cachable (e.g., package search) and
+ * response is in cache return the cached response as observable.
+ * If has 'x-refresh' header that is true,
+ * then also re-run the package search, using response from next(),
+ * returning an observable that emits the cached response first.
+ *
+ * If not in cache or not cachable,
+ * pass request through to next()
+ */
+// #docregion v1
+@Injectable()
+export class CachingInterceptor implements HttpInterceptor {
+  constructor(private cache: RequestCache) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    // continue if not cachable.
+    if (!isCachable(req)) { return next.handle(req); }
+
+    const cachedResponse = this.cache.get(req);
+    // #enddocregion v1
+    // #docregion intercept-refresh
+    // cache-then-refresh
+    if (req.headers.get('x-refresh')) {
+      const results$ = sendRequest(req, next, this.cache);
+      return cachedResponse ?
+        results$.pipe( startWith(cachedResponse) ) :
+        results$;
+    }
+    // cache-or-fetch
+    // #docregion v1
+    return cachedResponse ?
+      of(cachedResponse) : sendRequest(req, next, this.cache);
+    // #enddocregion intercept-refresh
+  }
+}
+// #enddocregion v1
+
+
+/** Is this request cachable? */
+function isCachable(req: HttpRequest<any>) {
+  // Only GET requests are cachable
+  return req.method === 'GET' &&
+    // Only npm package search is cachable in this app
+    -1 < req.url.indexOf(searchUrl);
+}
+
+// #docregion send-request
+/**
+ * Get server response observable by sending request to `next()`.
+ * Will add the response to the cache on the way out.
+ */
+function sendRequest(
+  req: HttpRequest<any>,
+  next: HttpHandler,
+  cache: RequestCache): Observable<HttpEvent<any>> {
+
+  // No headers allowed in npm search request
+  const noHeaderReq = req.clone({ headers: new HttpHeaders() });
+
+  return next.handle(noHeaderReq).pipe(
+    tap(event => {
+      // There may be other events besides the response.
+      if (event instanceof HttpResponse) {
+        cache.put(req, event); // Update the cache.
+      }
+    })
+  );
+}
+// #enddocregion send-request
+
diff --git a/aio/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts b/aio/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts
new file mode 100644
index 000000000000..ad6c9f62812a
--- /dev/null
+++ b/aio/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
+} from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class EnsureHttpsInterceptor implements HttpInterceptor {
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    // #docregion excerpt
+    // clone request and replace 'http://' with 'https://' at the same time
+    const secureReq = req.clone({
+      url: req.url.replace('http://', 'https://')
+    });
+    // send the cloned, "secure" request to the next handler.
+    return next.handle(secureReq);
+    // #enddocregion excerpt
+  }
+}
diff --git a/aio/content/examples/http/src/app/http-interceptors/index.ts b/aio/content/examples/http/src/app/http-interceptors/index.ts
new file mode 100644
index 000000000000..a44f18f5f91c
--- /dev/null
+++ b/aio/content/examples/http/src/app/http-interceptors/index.ts
@@ -0,0 +1,34 @@
+// #docplaster
+// #docregion interceptor-providers
+/* "Barrel" of Http Interceptors */
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+
+// #enddocregion interceptor-providers
+import { AuthInterceptor } from './auth-interceptor';
+import { CachingInterceptor } from './caching-interceptor';
+import { EnsureHttpsInterceptor } from './ensure-https-interceptor';
+import { LoggingInterceptor } from './logging-interceptor';
+// #docregion interceptor-providers
+import { NoopInterceptor } from './noop-interceptor';
+// #enddocregion interceptor-providers
+import { TrimNameInterceptor } from './trim-name-interceptor';
+import { UploadInterceptor } from './upload-interceptor';
+
+// #docregion interceptor-providers
+
+/** Http interceptor providers in outside-in order */
+export const httpInterceptorProviders = [
+  // #docregion noop-provider
+  { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true },
+  // #enddocregion noop-provider, interceptor-providers
+
+  { provide: HTTP_INTERCEPTORS, useClass: EnsureHttpsInterceptor, multi: true },
+  { provide: HTTP_INTERCEPTORS, useClass: TrimNameInterceptor, multi: true },
+  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
+  { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
+  { provide: HTTP_INTERCEPTORS, useClass: UploadInterceptor, multi: true },
+  { provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true },
+
+  // #docregion interceptor-providers
+];
+// #enddocregion interceptor-providers
diff --git a/aio/content/examples/http/src/app/http-interceptors/logging-interceptor.ts b/aio/content/examples/http/src/app/http-interceptors/logging-interceptor.ts
new file mode 100644
index 000000000000..d5fc1bb65c38
--- /dev/null
+++ b/aio/content/examples/http/src/app/http-interceptors/logging-interceptor.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpEvent, HttpInterceptor, HttpHandler,
+  HttpRequest, HttpResponse
+} from '@angular/common/http';
+
+// #docregion excerpt
+import { finalize, tap } from 'rxjs/operators';
+import { MessageService } from '../message.service';
+
+@Injectable()
+export class LoggingInterceptor implements HttpInterceptor {
+  constructor(private messenger: MessageService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    const started = Date.now();
+    let ok: string;
+
+    // extend server response observable with logging
+    return next.handle(req)
+      .pipe(
+        tap(
+          // Succeeds when there is a response; ignore other events
+          event => ok = event instanceof HttpResponse ? 'succeeded' : '',
+          // Operation failed; error is an HttpErrorResponse
+          error => ok = 'failed'
+        ),
+        // Log when response observable either completes or errors
+        finalize(() => {
+          const elapsed = Date.now() - started;
+          const msg = `${req.method} "${req.urlWithParams}"
+             ${ok} in ${elapsed} ms.`;
+          this.messenger.add(msg);
+        })
+      );
+  }
+}
+// #enddocregion excerpt
diff --git a/aio/content/examples/http/src/app/http-interceptors/noop-interceptor.ts b/aio/content/examples/http/src/app/http-interceptors/noop-interceptor.ts
new file mode 100644
index 000000000000..51d40208040e
--- /dev/null
+++ b/aio/content/examples/http/src/app/http-interceptors/noop-interceptor.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
+} from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+
+/** Pass untouched request through to the next request handler. */
+@Injectable()
+export class NoopInterceptor implements HttpInterceptor {
+
+  intercept(req: HttpRequest<any>, next: HttpHandler):
+    Observable<HttpEvent<any>> {
+    return next.handle(req);
+  }
+}
diff --git a/aio/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts b/aio/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts
new file mode 100644
index 000000000000..23858ebdd297
--- /dev/null
+++ b/aio/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
+} from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class TrimNameInterceptor implements HttpInterceptor {
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const body = req.body;
+    if (!body || !body.name ) {
+      return next.handle(req);
+    }
+    // #docregion excerpt
+    // copy the body and trim whitespace from the name property
+    const newBody = { ...body, name: body.name.trim() };
+    // clone request and set its body
+    const newReq = req.clone({ body: newBody });
+    // send the cloned request to the next handler.
+    return next.handle(newReq);
+    // #enddocregion excerpt
+  }
+}
diff --git a/aio/content/examples/http/src/app/http-interceptors/upload-interceptor.ts b/aio/content/examples/http/src/app/http-interceptors/upload-interceptor.ts
new file mode 100644
index 000000000000..849e8f1f27f0
--- /dev/null
+++ b/aio/content/examples/http/src/app/http-interceptors/upload-interceptor.ts
@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpEvent, HttpInterceptor, HttpHandler,
+  HttpRequest, HttpResponse,
+  HttpEventType, HttpProgressEvent
+} from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+
+/** Simulate server replying to file upload request */
+@Injectable()
+export class UploadInterceptor implements HttpInterceptor {
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (req.url.indexOf('/upload/file') === -1) {
+      return next.handle(req);
+    }
+    const delay = 300; // TODO: inject delay?
+    return createUploadEvents(delay);
+  }
+}
+
+/** Create simulation of upload event stream */
+function createUploadEvents(delay: number) {
+  // Simulate XHR behavior which would provide this information in a ProgressEvent
+  const chunks = 5;
+  const total = 12345678;
+  const chunkSize = Math.ceil(total / chunks);
+
+  return new Observable<HttpEvent<any>>(observer => {
+    // notify the event stream that the request was sent.
+    observer.next({type: HttpEventType.Sent});
+
+    uploadLoop(0);
+
+    function uploadLoop(loaded: number) {
+      // N.B.: Cannot use setInterval or rxjs delay (which uses setInterval)
+      // because e2e test won't complete. A zone thing?
+      // Use setTimeout and tail recursion instead.
+        setTimeout(() => {
+          loaded += chunkSize;
+
+          if (loaded >= total) {
+            const doneResponse = new HttpResponse({
+              status: 201, // OK but no body;
+            });
+            observer.next(doneResponse);
+            observer.complete();
+            return;
+          }
+
+          const progressEvent: HttpProgressEvent = {
+            type: HttpEventType.UploadProgress,
+            loaded,
+            total
+          };
+          observer.next(progressEvent);
+          uploadLoop(loaded);
+        }, delay);
+    }
+  });
+}
diff --git a/aio/content/examples/http/src/app/in-memory-data.service.ts b/aio/content/examples/http/src/app/in-memory-data.service.ts
new file mode 100644
index 000000000000..606e77f8f561
--- /dev/null
+++ b/aio/content/examples/http/src/app/in-memory-data.service.ts
@@ -0,0 +1,13 @@
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+
+export class InMemoryDataService implements InMemoryDbService {
+  createDb() {
+    const heroes = [
+      { id: 11, name: 'Mr. Nice' },
+      { id: 12, name: 'Narco' },
+      { id: 13, name: 'Bombasto' },
+      { id: 14, name: 'Celeritas' },
+    ];
+    return {heroes};
+  }
+}
diff --git a/aio/content/examples/http/src/app/message.service.ts b/aio/content/examples/http/src/app/message.service.ts
new file mode 100644
index 000000000000..1c56a49e70aa
--- /dev/null
+++ b/aio/content/examples/http/src/app/message.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages = [];
+  }
+}
diff --git a/aio/content/examples/http/src/app/messages/messages.component.html b/aio/content/examples/http/src/app/messages/messages.component.html
new file mode 100644
index 000000000000..d17b89569242
--- /dev/null
+++ b/aio/content/examples/http/src/app/messages/messages.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="messageService.messages.length">
+  <h3>Messages</h3>
+  <button class="clear" (click)="messageService.clear()">clear</button>
+  <br>
+  <ol>
+    <li *ngFor='let message of messageService.messages'> {{message}} </li>
+  </ol>
+</div>
diff --git a/aio/content/examples/http/src/app/messages/messages.component.ts b/aio/content/examples/http/src/app/messages/messages.component.ts
new file mode 100644
index 000000000000..d54a1216651c
--- /dev/null
+++ b/aio/content/examples/http/src/app/messages/messages.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html'
+})
+export class MessagesComponent {
+  constructor(public messageService: MessageService) {}
+}
diff --git a/aio/content/examples/http/src/app/package-search/package-search.component.html b/aio/content/examples/http/src/app/package-search/package-search.component.html
new file mode 100644
index 000000000000..b1bd56d56143
--- /dev/null
+++ b/aio/content/examples/http/src/app/package-search/package-search.component.html
@@ -0,0 +1,17 @@
+<!-- #docplaster -->
+<h3>Search Npm Packages</h3>
+<p><i>Searches when typing stops. Caches for 30 seconds.</i></p>
+<!-- #docregion search -->
+<input (keyup)="search($event.target.value)" id="name" placeholder="Search"/>
+<!-- #enddocregion search -->
+<input type="checkbox" id="refresh" [checked]="withRefresh" (click)="toggleRefresh()">
+<label for="refresh">with refresh</label>
+<!-- #docregion search -->
+
+<ul>
+  <li *ngFor="let package of packages$ | async">
+    <b>{{package.name}} v.{{package.version}}</b> -
+    <i>{{package.description}}</i>
+  </li>
+</ul>
+<!-- #enddocregion search -->
diff --git a/aio/content/examples/http/src/app/package-search/package-search.component.ts b/aio/content/examples/http/src/app/package-search/package-search.component.ts
new file mode 100644
index 000000000000..f020da50c220
--- /dev/null
+++ b/aio/content/examples/http/src/app/package-search/package-search.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Observable, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+
+import { NpmPackageInfo, PackageSearchService } from './package-search.service';
+
+@Component({
+  selector: 'app-package-search',
+  templateUrl: './package-search.component.html',
+  providers: [ PackageSearchService ]
+})
+export class PackageSearchComponent implements OnInit {
+  // #docregion debounce
+  withRefresh = false;
+  packages$: Observable<NpmPackageInfo[]>;
+  private searchText$ = new Subject<string>();
+
+  search(packageName: string) {
+    this.searchText$.next(packageName);
+  }
+
+  ngOnInit() {
+    this.packages$ = this.searchText$.pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+      switchMap(packageName =>
+        this.searchService.search(packageName, this.withRefresh))
+    );
+  }
+
+  constructor(private searchService: PackageSearchService) { }
+
+  // #enddocregion debounce
+
+  toggleRefresh() { this.withRefresh = ! this.withRefresh; }
+
+}
diff --git a/aio/content/examples/http/src/app/package-search/package-search.service.ts b/aio/content/examples/http/src/app/package-search/package-search.service.ts
new file mode 100644
index 000000000000..b026e03e0682
--- /dev/null
+++ b/aio/content/examples/http/src/app/package-search/package-search.service.ts
@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+
+import { Observable, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+
+import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
+
+export interface NpmPackageInfo {
+  name: string;
+  version: string;
+  description: string;
+}
+
+export const searchUrl = 'https://npmsearch.com/query';
+
+const httpOptions = {
+  headers: new HttpHeaders({
+    'x-refresh':  'true'
+  })
+};
+
+function createHttpOptions(packageName: string, refresh = false) {
+    // npm package name search api
+    // e.g., http://npmsearch.com/query?q=dom'
+    const params = new HttpParams({ fromObject: { q: packageName } });
+    const headerMap = refresh ? {'x-refresh': 'true'} : {};
+    const headers = new HttpHeaders(headerMap) ;
+    return { headers, params };
+}
+
+@Injectable()
+export class PackageSearchService {
+  private handleError: HandleError;
+
+  constructor(
+    private http: HttpClient,
+    httpErrorHandler: HttpErrorHandler) {
+    this.handleError = httpErrorHandler.createHandleError('HeroesService');
+  }
+
+  search (packageName: string, refresh = false): Observable<NpmPackageInfo[]> {
+    // clear if no pkg name
+    if (!packageName.trim()) { return of([]); }
+
+    const options = createHttpOptions(packageName, refresh);
+
+    // TODO: Add error handling
+    return this.http.get(searchUrl, options).pipe(
+      map((data: any) => {
+        return data.results.map(entry => ({
+            name: entry.name[0],
+            version: entry.version[0],
+            description: entry.description[0]
+          } as NpmPackageInfo )
+        );
+      }),
+      catchError(this.handleError('search', []))
+    );
+  }
+}
diff --git a/aio/content/examples/http/src/app/request-cache.service.ts b/aio/content/examples/http/src/app/request-cache.service.ts
new file mode 100644
index 000000000000..a055a74d751f
--- /dev/null
+++ b/aio/content/examples/http/src/app/request-cache.service.ts
@@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpResponse } from '@angular/common/http';
+
+import { MessageService } from './message.service';
+
+export interface RequestCacheEntry {
+  url: string;
+  response: HttpResponse<any>;
+  lastRead: number;
+}
+
+// #docregion request-cache
+export abstract class RequestCache {
+  abstract get(req: HttpRequest<any>): HttpResponse<any> | undefined;
+  abstract put(req: HttpRequest<any>, response: HttpResponse<any>): void
+}
+// #enddocregion request-cache
+
+const maxAge = 30000; // maximum cache age (ms)
+
+@Injectable()
+export class RequestCacheWithMap implements RequestCache {
+
+  cache = new Map<string, RequestCacheEntry>();
+
+  constructor(private messenger: MessageService) { }
+
+  get(req: HttpRequest<any>): HttpResponse<any> | undefined {
+    const url = req.urlWithParams;
+    const cached = this.cache.get(url);
+
+    if (!cached) {
+      return undefined;
+    }
+
+    const isExpired = cached.lastRead < (Date.now() - maxAge);
+    const expired = isExpired ? 'expired ' : '';
+    this.messenger.add(
+      `Found ${expired}cached response for "${url}".`);
+    return isExpired ? undefined : cached.response;
+  }
+
+  put(req: HttpRequest<any>, response: HttpResponse<any>): void {
+    const url = req.urlWithParams;
+    this.messenger.add(`Caching response from "${url}".`);
+
+    const entry = { url, response, lastRead: Date.now() };
+    this.cache.set(url, entry);
+
+    // remove expired cache entries
+    const expired = Date.now() - maxAge;
+    this.cache.forEach(entry => {
+      if (entry.lastRead < expired) {
+        this.cache.delete(entry.url);
+      }
+    });
+
+    this.messenger.add(`Request cache size: ${this.cache.size}.`);
+  }
+}
diff --git a/aio/content/examples/http/src/app/uploader/uploader.component.html b/aio/content/examples/http/src/app/uploader/uploader.component.html
new file mode 100644
index 000000000000..2f477ef110d4
--- /dev/null
+++ b/aio/content/examples/http/src/app/uploader/uploader.component.html
@@ -0,0 +1,12 @@
+<h3>Upload file</h3>
+<form enctype="multipart/form-data" method="post">
+  <div>
+    <label for="picked">Choose file to upload</label>
+    <div>
+      <input type="file" id="picked" #picked
+        (click)="message=''"
+        (change)="onPicked(picked)">
+    </div>
+  </div>
+  <p *ngIf="message">{{message}}</p>
+</form>
diff --git a/aio/content/examples/http/src/app/uploader/uploader.component.ts b/aio/content/examples/http/src/app/uploader/uploader.component.ts
new file mode 100644
index 000000000000..f4d24278136d
--- /dev/null
+++ b/aio/content/examples/http/src/app/uploader/uploader.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { UploaderService } from './uploader.service';
+
+@Component({
+  selector: 'app-uploader',
+  templateUrl: './uploader.component.html',
+  providers: [ UploaderService ]
+})
+export class UploaderComponent {
+  message: string;
+
+  constructor(private uploaderService: UploaderService) {}
+
+  onPicked(input: HTMLInputElement) {
+    const file = input.files[0];
+    if (file) {
+      this.uploaderService.upload(file).subscribe(
+        msg => {
+          input.value = null;
+          this.message = msg;
+        }
+      );
+    }
+  }
+}
diff --git a/aio/content/examples/http/src/app/uploader/uploader.service.ts b/aio/content/examples/http/src/app/uploader/uploader.service.ts
new file mode 100644
index 000000000000..8bc659f26f66
--- /dev/null
+++ b/aio/content/examples/http/src/app/uploader/uploader.service.ts
@@ -0,0 +1,105 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpClient, HttpEvent, HttpEventType, HttpProgressEvent,
+  HttpRequest, HttpResponse, HttpErrorResponse
+} from '@angular/common/http';
+
+import { of } from 'rxjs';
+import { catchError, last, map, tap } from 'rxjs/operators';
+
+import { MessageService } from '../message.service';
+
+@Injectable()
+export class UploaderService {
+  constructor(
+    private http: HttpClient,
+    private messenger: MessageService) {}
+
+  // If uploading multiple files, change to:
+  // upload(files: FileList) {
+  //   const formData = new FormData();
+  //   files.forEach(f => formData.append(f.name, f));
+  //   new HttpRequest('POST', '/upload/file', formData, {reportProgress: true});
+  //   ...
+  // }
+
+  upload(file: File) {
+    if (!file) { return; }
+
+    // COULD HAVE WRITTEN:
+    // return this.http.post('/upload/file', file, {
+    //   reportProgress: true,
+    //   observe: 'events'
+    // }).pipe(
+
+    // Create the request object that POSTs the file to an upload endpoint.
+    // The `reportProgress` option tells HttpClient to listen and return
+    // XHR progress events.
+    // #docregion upload-request
+    const req = new HttpRequest('POST', '/upload/file', file, {
+      reportProgress: true
+    });
+    // #enddocregion upload-request
+
+    // #docregion upload-body
+    // The `HttpClient.request` API produces a raw event stream
+    // which includes start (sent), progress, and response events.
+    return this.http.request(req).pipe(
+      map(event => this.getEventMessage(event, file)),
+      tap(message => this.showProgress(message)),
+      last(), // return last (completed) message to caller
+      catchError(this.handleError(file))
+    );
+    // #enddocregion upload-body
+  }
+
+  // #docregion getEventMessage
+  /** Return distinct message for sent, upload progress, & response events */
+  private getEventMessage(event: HttpEvent<any>, file: File) {
+    switch (event.type) {
+      case HttpEventType.Sent:
+        return `Uploading file "${file.name}" of size ${file.size}.`;
+
+      case HttpEventType.UploadProgress:
+        // Compute and show the % done:
+        const percentDone = Math.round(100 * event.loaded / event.total);
+        return `File "${file.name}" is ${percentDone}% uploaded.`;
+
+      case HttpEventType.Response:
+        return `File "${file.name}" was completely uploaded!`;
+
+      default:
+        return `File "${file.name}" surprising upload event: ${event.type}.`;
+    }
+  }
+  // #enddocregion getEventMessage
+
+  /**
+   * Returns a function that handles Http upload failures.
+   * @param file - File object for file being uploaded
+   *
+   * When no `UploadInterceptor` and no server,
+   * you'll end up here in the error handler.
+   */
+  private handleError(file: File) {
+    const userMessage = `${file.name} upload failed.`;
+
+    return (error: HttpErrorResponse) => {
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      const message = (error.error instanceof Error) ?
+        error.error.message :
+       `server returned code ${error.status} with body "${error.error}"`;
+
+      this.messenger.add(`${userMessage} ${message}`);
+
+      // Let app keep running but indicate failure.
+      return of(userMessage);
+    };
+  }
+
+  private showProgress(message: string) {
+    this.messenger.add(message);
+  }
+}
diff --git a/aio/content/examples/http/src/assets/config.json b/aio/content/examples/http/src/assets/config.json
new file mode 100644
index 000000000000..a6f250514087
--- /dev/null
+++ b/aio/content/examples/http/src/assets/config.json
@@ -0,0 +1,4 @@
+{
+  "heroesUrl": "api/heroes",
+  "textfile": "assets/textfile.txt"
+}
diff --git a/aio/content/examples/http/src/assets/textfile.txt b/aio/content/examples/http/src/assets/textfile.txt
new file mode 100644
index 000000000000..282575a15a7d
--- /dev/null
+++ b/aio/content/examples/http/src/assets/textfile.txt
@@ -0,0 +1 @@
+This is the downloaded text file
diff --git a/aio/content/examples/http/src/browser-test-shim.js b/aio/content/examples/http/src/browser-test-shim.js
new file mode 100644
index 000000000000..6a7ce2698bc7
--- /dev/null
+++ b/aio/content/examples/http/src/browser-test-shim.js
@@ -0,0 +1,88 @@
+// BROWSER TESTING SHIM
+// Keep it in-sync with what karma-test-shim does
+// #docregion
+/*global jasmine, __karma__, window*/
+(function () {
+
+  Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
+
+  // Uncomment to get full stacktrace output. Sometimes helpful, usually not.
+  // Error.stackTraceLimit = Infinity; //
+
+  jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
+
+  var baseURL = document.baseURI;
+  baseURL = baseURL + baseURL[baseURL.length-1] ? '' : '/';
+
+  System.config({
+    baseURL: baseURL,
+    // Extend usual application package list with test folder
+    packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
+
+    // Assume npm: is set in `paths` in systemjs.config
+    // Map the angular testing umd bundles
+    map: {
+      '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
+      '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+      '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
+      '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
+      '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+      '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
+      '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
+      '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
+    },
+  });
+
+  System.import('systemjs.config.js')
+    // .then(importSystemJsExtras) // not in this project
+    .then(initTestBed)
+    .then(initTesting);
+
+  /** Optional SystemJS configuration extras. Keep going w/o it */
+  function importSystemJsExtras(){
+    return System.import('systemjs.config.extras.js')
+    .catch(function(reason) {
+      console.log(
+        'Note: System.import could not load "systemjs.config.extras.js" where you might have added more configuration. It is an optional file so we will continue without it.'
+      );
+      console.log(reason);
+    });
+  }
+
+  function initTestBed(){
+    return Promise.all([
+      System.import('@angular/core/testing'),
+      System.import('@angular/platform-browser-dynamic/testing')
+    ])
+
+    .then(function (providers) {
+      var coreTesting    = providers[0];
+      var browserTesting = providers[1];
+
+      coreTesting.TestBed.initTestEnvironment(
+        browserTesting.BrowserDynamicTestingModule,
+        browserTesting.platformBrowserDynamicTesting());
+    })
+  }
+
+  // Import all spec files defined in the html (__spec_files__)
+  // and start Jasmine testrunner
+  function initTesting () {
+    console.log('loading spec files: '+__spec_files__.join(', '));
+    return Promise.all(
+      __spec_files__.map(function(spec) {
+        return System.import(spec);
+      })
+    )
+    //  After all imports load,  re-execute `window.onload` which
+    //  triggers the Jasmine test-runner start or explain what went wrong
+    .then(success, console.error.bind(console));
+
+    function success () {
+      console.log('Spec files loaded; starting Jasmine testrunner');
+      window.onload();
+    }
+  }
+
+  })();
diff --git a/aio/content/examples/http/src/index-specs.html b/aio/content/examples/http/src/index-specs.html
new file mode 100644
index 000000000000..26286a508321
--- /dev/null
+++ b/aio/content/examples/http/src/index-specs.html
@@ -0,0 +1,4 @@
+<!--
+  Intentionally empty placeholder for Stackblitz.
+  Do not need index.html in zip-download either as you should run tests with `npm test`
+ -->
diff --git a/aio/content/examples/http/src/index.html b/aio/content/examples/http/src/index.html
new file mode 100644
index 000000000000..5e5606036614
--- /dev/null
+++ b/aio/content/examples/http/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>HttpClient Demo</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/http/src/main-specs.ts b/aio/content/examples/http/src/main-specs.ts
new file mode 100644
index 000000000000..53af1b08a8ef
--- /dev/null
+++ b/aio/content/examples/http/src/main-specs.ts
@@ -0,0 +1,39 @@
+import './testing/global-jasmine';
+import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
+import 'jasmine-core/lib/jasmine-core/boot.js';
+
+declare var jasmine;
+
+import './polyfills';
+
+import 'zone.js/dist/zone-testing';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Import spec files individually for Stackblitz
+import './app/heroes/heroes.service.spec.ts';
+import './testing/http-client.spec.ts';
+
+//
+bootstrap();
+
+//
+function bootstrap () {
+  if (window['jasmineRef']) {
+    location.reload();
+    return;
+  } else {
+    window.onload(undefined);
+    window['jasmineRef'] = jasmine.getEnv();
+  }
+
+  // First, initialize the Angular testing environment.
+  getTestBed().initTestEnvironment(
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
+  );
+}
diff --git a/aio/content/examples/http/src/main.ts b/aio/content/examples/http/src/main.ts
new file mode 100644
index 000000000000..6b6532d428ad
--- /dev/null
+++ b/aio/content/examples/http/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/http/src/test.css b/aio/content/examples/http/src/test.css
new file mode 100644
index 000000000000..6010a5d9ba7a
--- /dev/null
+++ b/aio/content/examples/http/src/test.css
@@ -0,0 +1 @@
+@import "~jasmine-core/lib/jasmine-core/jasmine.css"
diff --git a/aio/content/examples/http/src/testing/global-jasmine.ts b/aio/content/examples/http/src/testing/global-jasmine.ts
new file mode 100644
index 000000000000..560ff97d66d1
--- /dev/null
+++ b/aio/content/examples/http/src/testing/global-jasmine.ts
@@ -0,0 +1,3 @@
+import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
+
+window['jasmineRequire'] = jasmineRequire;
diff --git a/aio/content/examples/http/src/testing/http-client.spec.ts b/aio/content/examples/http/src/testing/http-client.spec.ts
new file mode 100644
index 000000000000..e98bc7562e2e
--- /dev/null
+++ b/aio/content/examples/http/src/testing/http-client.spec.ts
@@ -0,0 +1,192 @@
+// #docplaster
+// #docregion imports
+// Http testing module and mocking controller
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+// Other imports
+import { TestBed } from '@angular/core/testing';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+// #enddocregion imports
+import { HttpHeaders } from '@angular/common/http';
+
+interface Data {
+  name: string;
+}
+
+const testUrl = '/data';
+
+// #docregion setup
+describe('HttpClient testing', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ]
+    });
+
+    // Inject the http service and test controller for each test
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+  });
+  // #enddocregion setup
+  // #docregion afterEach
+  afterEach(() => {
+    // After every test, assert that there are no more pending requests.
+    httpTestingController.verify();
+  });
+  // #enddocregion afterEach
+  // #docregion setup
+  /// Tests begin ///
+  // #enddocregion setup
+  // #docregion get-test
+  it('can test HttpClient.get', () => {
+    const testData: Data = {name: 'Test Data'};
+
+    // Make an HTTP GET request
+    httpClient.get<Data>(testUrl)
+      .subscribe(data =>
+        // When observable resolves, result should match test data
+        expect(data).toEqual(testData)
+      );
+
+    // The following `expectOne()` will match the request's URL.
+    // If no requests or multiple requests matched that URL
+    // `expectOne()` would throw.
+    const req = httpTestingController.expectOne('/data');
+
+    // Assert that the request is a GET.
+    expect(req.request.method).toEqual('GET');
+
+    // Respond with mock data, causing Observable to resolve.
+    // Subscribe callback asserts that correct data was returned.
+    req.flush(testData);
+
+    // Finally, assert that there are no outstanding requests.
+    httpTestingController.verify();
+  });
+  // #enddocregion get-test
+  it('can test HttpClient.get with matching header', () => {
+    const testData: Data = {name: 'Test Data'};
+
+    // Make an HTTP GET request with specific header
+    httpClient.get<Data>(testUrl, {
+        headers: new HttpHeaders({'Authorization': 'my-auth-token'})
+      })
+      .subscribe(data =>
+        expect(data).toEqual(testData)
+      );
+
+      // Find request with a predicate function.
+    // #docregion predicate
+    // Expect one request with an authorization header
+    const req = httpTestingController.expectOne(
+      req => req.headers.has('Authorization')
+    );
+    // #enddocregion predicate
+    req.flush(testData);
+  });
+
+  it('can test multiple requests', () => {
+    let testData: Data[] = [
+      { name: 'bob' }, { name: 'carol' },
+      { name: 'ted' }, { name: 'alice' }
+    ];
+
+    // Make three requests in a row
+    httpClient.get<Data[]>(testUrl)
+      .subscribe(d => expect(d.length).toEqual(0, 'should have no data'));
+
+    httpClient.get<Data[]>(testUrl)
+      .subscribe(d => expect(d).toEqual([testData[0]], 'should be one element array'));
+
+    httpClient.get<Data[]>(testUrl)
+      .subscribe(d => expect(d).toEqual(testData, 'should be expected data'));
+
+    // #docregion multi-request
+    // get all pending requests that match the given URL
+    const requests = httpTestingController.match(testUrl);
+    expect(requests.length).toEqual(3);
+
+    // Respond to each request with different results
+    requests[0].flush([]);
+    requests[1].flush([testData[0]]);
+    requests[2].flush(testData);
+    // #enddocregion multi-request
+  });
+
+  // #docregion 404
+  it('can test for 404 error', () => {
+    const emsg = 'deliberate 404 error';
+
+    httpClient.get<Data[]>(testUrl).subscribe(
+      data => fail('should have failed with the 404 error'),
+      (error: HttpErrorResponse) => {
+        expect(error.status).toEqual(404, 'status');
+        expect(error.error).toEqual(emsg, 'message');
+      }
+    );
+
+    const req = httpTestingController.expectOne(testUrl);
+
+    // Respond with mock error
+    req.flush(emsg, { status: 404, statusText: 'Not Found' });
+  });
+  // #enddocregion 404
+
+  // #docregion network-error
+  it('can test for network error', () => {
+    const emsg = 'simulated network error';
+
+    httpClient.get<Data[]>(testUrl).subscribe(
+      data => fail('should have failed with the network error'),
+      (error: HttpErrorResponse) => {
+        expect(error.error.message).toEqual(emsg, 'message');
+      }
+    );
+
+    const req = httpTestingController.expectOne(testUrl);
+
+    // Create mock ErrorEvent, raised when something goes wrong at the network level.
+    // Connection timeout, DNS error, offline, etc
+    const mockError = new ErrorEvent('Network error', {
+      message: emsg,
+      // #enddocregion network-error
+      // The rest of this is optional and not used.
+      // Just showing that you could provide this too.
+      filename: 'HeroService.ts',
+      lineno: 42,
+      colno: 21
+    // #docregion network-error
+    });
+
+    // Respond with mock error
+    req.error(mockError);
+  });
+  // #enddocregion network-error
+
+  it('httpTestingController.verify should fail if HTTP response not simulated', () => {
+    // Sends request
+    httpClient.get('some/api').subscribe();
+
+    // verify() should fail because haven't handled the pending request.
+    expect(() => httpTestingController.verify()).toThrow();
+
+    // Now get and flush the request so that afterEach() doesn't fail
+    const req = httpTestingController.expectOne('some/api');
+    req.flush(null);
+  });
+
+  // Proves that verify in afterEach() really would catch error
+  // if test doesn't simulate the HTTP response.
+  //
+  // Must disable this test because can't catch an error in an afterEach().
+  // Uncomment if you want to confirm that afterEach() does the job.
+  // it('afterEach() should fail when HTTP response not simulated',() => {
+  //   // Sends request which is never handled by this test
+  //   httpClient.get('some/api').subscribe();
+  // });
+// #docregion setup
+});
+// #enddocregion setup
diff --git a/aio/content/examples/http/stackblitz.json b/aio/content/examples/http/stackblitz.json
new file mode 100644
index 000000000000..6ef625c1a04a
--- /dev/null
+++ b/aio/content/examples/http/stackblitz.json
@@ -0,0 +1,11 @@
+{
+  "description": "Http",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+
+    "!src/testing/*.*",
+    "!src/index-specs.html"
+  ],
+  "tags": ["http"]
+}
diff --git a/aio/content/examples/i18n/doc-files/app.component.html b/aio/content/examples/i18n/doc-files/app.component.html
new file mode 100644
index 000000000000..98daded79e30
--- /dev/null
+++ b/aio/content/examples/i18n/doc-files/app.component.html
@@ -0,0 +1,31 @@
+<!--#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-->
diff --git a/aio/content/examples/i18n/doc-files/app.locale_data.ts b/aio/content/examples/i18n/doc-files/app.locale_data.ts
new file mode 100644
index 000000000000..05c83be03478
--- /dev/null
+++ b/aio/content/examples/i18n/doc-files/app.locale_data.ts
@@ -0,0 +1,7 @@
+// #docregion import-locale
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+
+// the second parameter 'fr' is optional
+registerLocaleData(localeFr, 'fr');
+// #enddocregion import-locale
diff --git a/aio/content/examples/i18n/doc-files/app.locale_data_extra.ts b/aio/content/examples/i18n/doc-files/app.locale_data_extra.ts
new file mode 100644
index 000000000000..05b7b80d53ad
--- /dev/null
+++ b/aio/content/examples/i18n/doc-files/app.locale_data_extra.ts
@@ -0,0 +1,7 @@
+// #docregion import-locale-extra
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+import localeFrExtra from '@angular/common/locales/extra/fr';
+
+registerLocaleData(localeFr, 'fr-FR', localeFrExtra);
+// #enddocregion import-locale-extra
diff --git a/aio/content/examples/i18n/doc-files/app.module.ts b/aio/content/examples/i18n/doc-files/app.module.ts
new file mode 100644
index 000000000000..0f5d2d7e9fca
--- /dev/null
+++ b/aio/content/examples/i18n/doc-files/app.module.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { LOCALE_ID, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from '../src/app/app.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ AppComponent ],
+  providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/i18n/doc-files/main.1.ts b/aio/content/examples/i18n/doc-files/main.1.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/i18n/doc-files/main.1.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/i18n/doc-files/main.2.ts b/aio/content/examples/i18n/doc-files/main.2.ts
new file mode 100644
index 000000000000..0b68bc10fe5c
--- /dev/null
+++ b/aio/content/examples/i18n/doc-files/main.2.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { enableProdMode, TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+// use the require method provided by webpack
+declare const require;
+// we use the webpack raw-loader to return the content as a string
+const translations = require(`raw-loader!./locale/messages.fr.xlf`);
+
+platformBrowserDynamic().bootstrapModule(AppModule, {
+  providers: [
+    {provide: TRANSLATIONS, useValue: translations},
+    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'}
+  ]
+});
diff --git a/aio/content/examples/i18n/doc-files/main.3.ts b/aio/content/examples/i18n/doc-files/main.3.ts
new file mode 100644
index 000000000000..dc5f919e1fd8
--- /dev/null
+++ b/aio/content/examples/i18n/doc-files/main.3.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { MissingTranslationStrategy } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+// ...
+
+platformBrowserDynamic().bootstrapModule(AppModule, {
+  missingTranslation: MissingTranslationStrategy.Error,
+  providers: [
+    // ...
+  ]
+});
diff --git a/aio/content/examples/i18n/doc-files/messages.fr.xlf.html b/aio/content/examples/i18n/doc-files/messages.fr.xlf.html
new file mode 100644
index 000000000000..03635103b746
--- /dev/null
+++ b/aio/content/examples/i18n/doc-files/messages.fr.xlf.html
@@ -0,0 +1,74 @@
+<!-- The `messages.fr.xlf` after translation for documentation purposes -->
+<!-- #docregion -->
+<?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>
+      <!-- #docregion translated-hello-before -->
+      <trans-unit id="introductionHeader" datatype="html">
+        <source>Hello i18n!</source>
+        <note priority="1" from="description">An introduction header for this sample</note>
+        <note priority="1" from="meaning">User welcome</note>
+      </trans-unit>
+      <!-- #enddocregion translated-hello-before -->
+      <!-- #docregion translated-hello -->
+      <!-- #docregion custom-id -->
+      <trans-unit id="introductionHeader" datatype="html">
+      <!-- #enddocregion custom-id -->
+        <source>Hello i18n!</source>
+        <target>Bonjour i18n !</target>
+        <note priority="1" from="description">An introduction header for this sample</note>
+        <note priority="1" from="meaning">User welcome</note>
+      </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>Je n'affiche aucun élément</target>
+      </trans-unit>
+      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
+        <source>Angular logo</source>
+        <target>Logo d'Angular</target>
+      </trans-unit>
+      <!-- #enddocregion translated-other-nodes -->
+      <!-- #docregion translated-plural -->
+      <trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
+        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
+      </trans-unit>
+      <!-- #enddocregion translated-plural -->
+      <!-- #docregion translated-select -->
+      <!-- #docregion translate-select-1 -->
+      </trans-unit>
+      <trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">
+        <source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>
+        <target>L'auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>
+      </trans-unit>
+      <!-- #enddocregion translate-select-1 -->
+      <!-- #docregion translate-select-2 -->
+      <trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">
+        <source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>
+        <target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>
+      </trans-unit>
+      <!-- #enddocregion translate-select-2 -->
+      <!-- #enddocregion translated-select -->
+      <!-- #docregion translate-nested -->
+      <!-- #docregion translate-nested-1 -->
+      <trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">
+        <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
+        <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
+      </trans-unit>
+      <!-- #enddocregion translate-nested-1 -->
+      <!-- #docregion translate-nested-2 -->
+      <trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
+        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>
+      </trans-unit>
+      <!-- #enddocregion translate-nested-2 -->
+      <!-- #enddocregion translate-nested -->
+    </body>
+  </file>
+</xliff>
+
diff --git a/aio/content/examples/i18n/e2e/src/app.e2e-spec.ts b/aio/content/examples/i18n/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..ebafb55f9604
--- /dev/null
+++ b/aio/content/examples/i18n/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,45 @@
+import { browser, element, by } from 'protractor';
+
+describe('i18n E2E Tests', () => {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it('should display i18n translated welcome: Bonjour !', function () {
+    expect(element(by.css('h1')).getText()).toEqual('Bonjour i18n !');
+  });
+
+  it('should display the node texts without elements', function () {
+    expect(element(by.css('app-root')).getText()).toContain(`Je n'affiche aucun élément`);
+  });
+
+  it('should display the translated title attribute', function () {
+    const title = element(by.css('img')).getAttribute('title');
+    expect(title).toBe(`Logo d'Angular`);
+  });
+
+  it('should display the ICU plural expression', function () {
+    expect(element.all(by.css('span')).get(0).getText()).toBe(`Mis à jour à l'instant`);
+  });
+
+  it('should display the ICU select expression', function () {
+    const selectIcuExp = element.all(by.css('span')).get(1);
+    expect(selectIcuExp.getText()).toBe(`L'auteur est une femme`);
+    element.all(by.css('button')).get(2).click();
+    expect(selectIcuExp.getText()).toBe(`L'auteur est un homme`);
+  });
+
+  it('should display the nested expression', function() {
+    const nestedExp = element.all(by.css('span')).get(2);
+    const incBtn = element.all(by.css('button')).get(0);
+    expect(nestedExp.getText()).toBe(`Mis à jour: à l'instant`);
+    incBtn.click();
+    expect(nestedExp.getText()).toBe(`Mis à jour: il y a une minute`);
+    incBtn.click();
+    incBtn.click();
+    element.all(by.css('button')).get(4).click();
+    expect(nestedExp.getText()).toBe(`Mis à jour: il y a 3 minutes par autre`);
+  });
+
+});
diff --git a/aio/content/examples/i18n/example-config.json b/aio/content/examples/i18n/example-config.json
new file mode 100644
index 000000000000..1188a704a3c5
--- /dev/null
+++ b/aio/content/examples/i18n/example-config.json
@@ -0,0 +1,3 @@
+{
+  "projectType": "i18n"
+}
diff --git a/aio/content/examples/i18n/src/app/app.component.html b/aio/content/examples/i18n/src/app/app.component.html
new file mode 100644
index 000000000000..b9512dfc00b9
--- /dev/null
+++ b/aio/content/examples/i18n/src/app/app.component.html
@@ -0,0 +1,35 @@
+<!--#docregion-->
+<!--#docregion i18n-attribute-meaning-->
+<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">
+  Hello i18n!
+</h1>
+<!--#enddocregion i18n-attribute-meaning-->
+
+<!--#docregion i18n-ng-container-->
+<ng-container i18n>I don't output any element</ng-container>
+<!--#enddocregion i18n-ng-container-->
+
+<br />
+
+<!--#docregion i18n-title-translate-->
+<img [src]="logo" i18n-title title="Angular logo" />
+<!--#enddocregion i18n-title-translate-->
+<br>
+<button (click)="inc(1)">+</button> <button (click)="inc(-1)">-</button>
+<!--#docregion i18n-plural-->
+<span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span>
+<!--#enddocregion i18n-plural-->
+({{minutes}})
+<br><br>
+<button (click)="male()">&#9794;</button> <button (click)="female()">&#9792;</button> <button (click)="other()">&#9895;</button>
+<!--#docregion i18n-select-->
+<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
+<!--#enddocregion i18n-select-->
+<br><br>
+<!--#docregion i18n-nested-->
+<span i18n>Updated: {minutes, plural,
+  =0 {just now}
+  =1 {one minute ago}
+  other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}}
+</span>
+<!--#enddocregion i18n-nested-->
diff --git a/aio/content/examples/i18n/src/app/app.component.ts b/aio/content/examples/i18n/src/app/app.component.ts
new file mode 100644
index 000000000000..d8e79acf508b
--- /dev/null
+++ b/aio/content/examples/i18n/src/app/app.component.ts
@@ -0,0 +1,21 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  minutes = 0;
+  gender = 'female';
+  fly = true;
+  logo = 'https://angular.io/assets/images/logos/angular/angular.png';
+  heroes: string[] = ['Magneta', 'Celeritas', 'Dynama'];
+  inc(i: number) {
+    this.minutes = Math.min(5, Math.max(0, this.minutes + i));
+  }
+  male() { this.gender = 'male'; }
+  female() { this.gender = 'female'; }
+  other() { this.gender = 'other'; }
+}
+
diff --git a/aio/content/examples/i18n/src/app/app.module.ts b/aio/content/examples/i18n/src/app/app.module.ts
new file mode 100644
index 000000000000..530cd295e79b
--- /dev/null
+++ b/aio/content/examples/i18n/src/app/app.module.ts
@@ -0,0 +1,12 @@
+// #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/i18n/src/index.html b/aio/content/examples/i18n/src/index.html
new file mode 100644
index 000000000000..6b26810c501f
--- /dev/null
+++ b/aio/content/examples/i18n/src/index.html
@@ -0,0 +1,14 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular i18n example</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <app-root>Loading...</app-root>
+  </body>
+</html>
+<!-- #enddocregion -->
diff --git a/aio/content/examples/i18n/src/locale/messages.fr.xlf b/aio/content/examples/i18n/src/locale/messages.fr.xlf
new file mode 100644
index 000000000000..464488a8c129
--- /dev/null
+++ b/aio/content/examples/i18n/src/locale/messages.fr.xlf
@@ -0,0 +1,87 @@
+<?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="introductionHeader" datatype="html">
+        <source>
+    Hello i18n!
+</source>
+        <target>
+    Bonjour i18n !
+</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">4</context>
+        </context-group>
+        <note priority="1" from="description">An introduction header for this sample</note>
+        <note priority="1" from="meaning">User welcome</note>
+      </trans-unit>
+      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
+        <source>I don&apos;t output any element</source>
+        <target>Je n'affiche aucun élément</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">10</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
+        <source>Angular logo</source>
+        <target>Logo d'Angular</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">16</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="d69f6b42305f49332026fef24b40227f02e34594" datatype="html">
+        <source>Updated <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
+        <target>Mis à jour <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">21</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
+        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">21</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">
+        <source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>
+        <target>L'auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">27</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">
+        <source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>
+        <target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">27</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">
+        <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/>
+</source>
+        <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/>
+</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">31</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
+        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">31</context>
+        </context-group>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>
diff --git a/aio/content/examples/i18n/src/locale/messages.xlf b/aio/content/examples/i18n/src/locale/messages.xlf
new file mode 100644
index 000000000000..c4e45e5b8740
--- /dev/null
+++ b/aio/content/examples/i18n/src/locale/messages.xlf
@@ -0,0 +1,75 @@
+<?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="introductionHeader" datatype="html">
+        <source>
+  Hello i18n!
+</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
+        <note priority="1" from="description">An introduction header for this sample</note>
+        <note priority="1" from="meaning">User welcome</note>
+      </trans-unit>
+      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
+        <source>I don&apos;t output any element</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">9</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
+        <source>Angular logo</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">15</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="d69f6b42305f49332026fef24b40227f02e34594" datatype="html">
+        <source>Updated <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">20</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">20</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">
+        <source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">
+        <source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">
+        <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/>
+</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>
diff --git a/aio/content/examples/i18n/src/main.ts b/aio/content/examples/i18n/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/i18n/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/i18n/zipper.json b/aio/content/examples/i18n/zipper.json
new file mode 100644
index 000000000000..7f9c0a43ccfb
--- /dev/null
+++ b/aio/content/examples/i18n/zipper.json
@@ -0,0 +1,11 @@
+{
+  "files":[
+    "!dist/",
+    "!**/*.d.ts",
+    "!src/**/*.js",
+    "!doc-files/**/*",
+    "**/*.xlf"
+  ],
+  "removeSystemJsConfig": true,
+  "type": "i18n"
+}
diff --git a/aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts b/aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..121d100ccb2b
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,47 @@
+import { AppPage } from './app.po';
+import { browser, element, by } from 'protractor';
+
+
+describe('providers App', () => {
+  let page: AppPage;
+  const buttons = element.all(by.css('button'));
+  const customersButton = buttons.get(0);
+  const ordersButton = buttons.get(1);
+  const homeButton = buttons.get(2);
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Lazy loading feature modules');
+  });
+
+  describe('Customers list', function() {
+    beforeEach(function() {
+      customersButton.click();
+    });
+
+    it('should show customers list when the button is clicked', function() {
+        let customersMessage = element(by.css('app-customer-list > p'));
+        expect(customersMessage.getText()).toBe('customer-list works!');
+    });
+
+  });
+
+  describe('Orders list', function() {
+    beforeEach(function() {
+      ordersButton.click();
+    });
+
+    it('should show orders list when the button is clicked', function() {
+        let ordersMessage = element(by.css('app-order-list > p'));
+        expect(ordersMessage.getText()).toBe('order-list works!');
+    });
+
+  });
+
+});
+
+
diff --git a/aio/content/examples/lazy-loading-ngmodules/example-config.json b/aio/content/examples/lazy-loading-ngmodules/example-config.json
new file mode 100644
index 000000000000..313764c3c606
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:cli",
+  "run": "serve:cli"
+}
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..dc2f71be29d3
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts
@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion app-routing-module
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+
+// #docregion const-routes
+const routes: Routes = [
+  {
+    path: 'customers',
+    loadChildren: 'app/customers/customers.module#CustomersModule'
+  },
+  {
+    path: 'orders',
+    loadChildren: 'app/orders/orders.module#OrdersModule'
+  },
+  {
+    path: '',
+    redirectTo: '',
+    pathMatch: 'full'
+  }
+];
+// #enddocregion const-routes
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes)
+  ],
+  exports: [RouterModule],
+  providers: []
+})
+export class AppRoutingModule { }
+// #enddocregion app-routing-module
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.css b/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.html b/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.html
new file mode 100644
index 000000000000..329739edf688
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.html
@@ -0,0 +1,13 @@
+<!-- #docplaster -->
+<!-- #docregion app-component-template -->
+<h1>
+  {{title}}
+</h1>
+
+<button routerLink="/customers">Customers</button>
+<button routerLink="/orders">Orders</button>
+<button routerLink="">Home</button>
+
+<router-outlet></router-outlet>
+
+<!-- #enddocregion app-component-template -->
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..41967875b679
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts
@@ -0,0 +1,36 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  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!');
+  }));
+});
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.ts
new file mode 100644
index 000000000000..665b2ef09597
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Lazy loading feature modules';
+}
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/app.module.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/app.module.ts
new file mode 100644
index 000000000000..7848845cef4b
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/app.module.ts
@@ -0,0 +1,22 @@
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    AppRoutingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.css b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html
new file mode 100644
index 000000000000..125b26392544
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html
@@ -0,0 +1,3 @@
+<p>
+  customer-list works!
+</p>
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts
new file mode 100644
index 000000000000..c34e342ba0a2
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomerListComponent } from './customer-list.component';
+
+describe('CustomerListComponent', () => {
+  let component: CustomerListComponent;
+  let fixture: ComponentFixture<CustomerListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomerListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomerListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts
new file mode 100644
index 000000000000..e3b118ff80a6
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-customer-list',
+  templateUrl: './customer-list.component.html',
+  styleUrls: ['./customer-list.component.css']
+})
+export class CustomerListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts
new file mode 100644
index 000000000000..2c7e16b4f45e
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts
@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion customers-routing-module
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CustomerListComponent } from './customer-list/customer-list.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CustomerListComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CustomersRoutingModule { }
+// #enddocregion customers-routing-module
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts
new file mode 100644
index 000000000000..db6909da9b90
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts
@@ -0,0 +1,16 @@
+// #docplaster
+// #docregion customers-module
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CustomersRoutingModule } from './customers-routing.module';
+import { CustomerListComponent } from './customer-list/customer-list.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CustomersRoutingModule
+  ],
+  declarations: [CustomerListComponent]
+})
+export class CustomersModule { }
+// #enddocregion customers-module
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.css b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html
new file mode 100644
index 000000000000..ec99b36fea03
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html
@@ -0,0 +1,3 @@
+<p>
+  order-list works!
+</p>
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts
new file mode 100644
index 000000000000..2688bcf42055
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderListComponent } from './order-list.component';
+
+describe('OrderListComponent', () => {
+  let component: OrderListComponent;
+  let fixture: ComponentFixture<OrderListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts
new file mode 100644
index 000000000000..33b31ce8cc5f
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-order-list',
+  templateUrl: './order-list.component.html',
+  styleUrls: ['./order-list.component.css']
+})
+export class OrderListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts
new file mode 100644
index 000000000000..4ebb23615f08
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts
@@ -0,0 +1,22 @@
+// #docplaster
+// #docregion orders-routing-module
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+// #docregion orders-routing-module-detail
+import { OrderListComponent } from './order-list/order-list.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: OrderListComponent
+  }
+];
+// #enddocregion orders-routing-module-detail
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class OrdersRoutingModule { }
+// #enddocregion orders-routing-module
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts
new file mode 100644
index 000000000000..a349d46898f8
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { OrdersRoutingModule } from './orders-routing.module';
+import { OrderListComponent } from './order-list/order-list.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    OrdersRoutingModule
+  ],
+  declarations: [OrderListComponent]
+})
+export class OrdersModule { }
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/index.html b/aio/content/examples/lazy-loading-ngmodules/src/index.html
new file mode 100644
index 000000000000..a0b9bc029ae5
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Lazy loading feature modules</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/main.ts b/aio/content/examples/lazy-loading-ngmodules/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/lazy-loading-ngmodules/stackblitz.json b/aio/content/examples/lazy-loading-ngmodules/stackblitz.json
new file mode 100644
index 000000000000..e6ee97e1cf8e
--- /dev/null
+++ b/aio/content/examples/lazy-loading-ngmodules/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "Lazy Loading Feature Modules",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["lazy loading"]
+}
diff --git a/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts b/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..80649e801f10
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,181 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Lifecycle hooks', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should open correctly', function () {
+    expect(element.all(by.css('h2')).get(0).getText()).toEqual('Peek-A-Boo');
+  });
+
+  it('should support peek-a-boo', function () {
+    let pabComp = element(by.css('peek-a-boo-parent peek-a-boo'));
+    expect(pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component');
+    let pabButton = element.all(by.css('peek-a-boo-parent button')).get(0);
+    let updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1);
+    expect(pabButton.getText()).toContain('Create Peek');
+    pabButton.click().then(function () {
+      expect(pabButton.getText()).toContain('Destroy Peek');
+      expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component');
+      expect(pabComp.getText()).toContain('Windstorm');
+      expect(pabComp.getText()).not.toContain('Windstorm!');
+      expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button');
+      return updateHeroButton.click();
+    }).then(function () {
+      expect(pabComp.getText()).toContain('Windstorm!');
+      return pabButton.click();
+    }).then(function () {
+      expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component');
+    });
+  });
+
+  it('should support OnChanges hook', function () {
+    let onChangesViewEle = element.all(by.css('on-changes div')).get(0);
+    let inputEles = element.all(by.css('on-changes-parent input'));
+    let heroNameInputEle = inputEles.get(1);
+    let powerInputEle = inputEles.get(0);
+    let titleEle = onChangesViewEle.element(by.css('p'));
+    let changeLogEles = onChangesViewEle.all(by.css('div'));
+
+    expect(titleEle.getText()).toContain('Windstorm can sing');
+    expect(changeLogEles.count()).toEqual(2, 'should start with 2 messages');
+    heroNameInputEle.sendKeys('-foo-');
+    expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
+    expect(changeLogEles.count()).toEqual(2, 'should still have 2 messages');
+    powerInputEle.sendKeys('-bar-');
+    expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
+    // 7 == 2 previously + length of '-bar-'
+    expect(changeLogEles.count()).toEqual(7, 'should have 7 messages now');
+  });
+
+  it('should support DoCheck hook', function () {
+    let doCheckViewEle = element.all(by.css('do-check div')).get(0);
+    let inputEles = element.all(by.css('do-check-parent input'));
+    let heroNameInputEle = inputEles.get(1);
+    let powerInputEle = inputEles.get(0);
+    let titleEle = doCheckViewEle.element(by.css('p'));
+    let changeLogEles = doCheckViewEle.all(by.css('div'));
+    let logCount: number;
+
+    expect(titleEle.getText()).toContain('Windstorm can sing');
+    changeLogEles.count().then(function(count: number) {
+      // 3 messages to start
+      expect(count).toEqual(3, 'should start with 3 messages');
+      logCount = count;
+      return heroNameInputEle.sendKeys('-foo-');
+    }).then(function () {
+      expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
+      return changeLogEles.count();
+    }).then(function(count: number) {
+      // one more for each keystroke
+      expect(count).toEqual(logCount + 5, 'should add 5 more messages');
+      logCount = count;
+      return powerInputEle.sendKeys('-bar-');
+    }).then(function () {
+      expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
+      expect(changeLogEles.count()).toEqual(logCount + 6, 'should add 6 more messages');
+    });
+  });
+
+  it('should support AfterView hooks', function () {
+    let parentEle = element(by.tagName('after-view-parent'));
+    let buttonEle = parentEle.element(by.tagName('button')); // Reset
+    let commentEle = parentEle.element(by.className('comment'));
+    let logEles = parentEle.all(by.css('h4 ~ div'));
+    let childViewInputEle = parentEle.element(by.css('app-child-view input'));
+    let logCount: number;
+
+    expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
+    expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
+
+    logEles.count().then(function(count: number) {
+      logCount = count;
+      return childViewInputEle.sendKeys('-test-');
+    }).then(function() {
+      expect(childViewInputEle.getAttribute('value')).toContain('-test-');
+      expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
+      expect(commentEle.getText()).toContain('long name');
+      return logEles.count();
+    }).then(function(count: number) {
+      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() {
+      expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
+    });
+  });
+
+
+  it('should support AfterContent hooks', function () {
+    let parentEle = element(by.tagName('after-content-parent'));
+    let buttonEle = parentEle.element(by.tagName('button')); // Reset
+    let commentEle = parentEle.element(by.className('comment'));
+    let logEles = parentEle.all(by.css('h4 ~ div'));
+    let childViewInputEle = parentEle.element(by.css('app-child input'));
+    let logCount: number;
+
+    expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
+    expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
+
+    logEles.count().then(function(count: number) {
+      logCount = count;
+      return childViewInputEle.sendKeys('-test-');
+    }).then(function() {
+      expect(childViewInputEle.getAttribute('value')).toContain('-test-');
+      expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
+      expect(commentEle.getText()).toContain('long name');
+      return logEles.count();
+    }).then(function(count: number) {
+      expect(logCount + 5).toEqual(count, '5 additional log messages should have been added');
+      logCount = count;
+      return buttonEle.click();
+    }).then(function() {
+      expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
+    });
+  });
+
+  it('should support spy\'s OnInit & OnDestroy hooks', function () {
+    let inputEle = element(by.css('spy-parent input'));
+    let addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
+    let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
+    let heroEles = element.all(by.css('spy-parent div[mySpy'));
+    let logEles = element.all(by.css('spy-parent h4 ~ div'));
+    expect(heroEles.count()).toBe(2, 'should have two heroes displayed');
+    expect(logEles.count()).toBe(2, 'should have two log entries');
+    inputEle.sendKeys('-test-').then(function() {
+      return addHeroButtonEle.click();
+    }).then(function() {
+      expect(heroEles.count()).toBe(3, 'should have added one hero');
+      expect(heroEles.get(2).getText()).toContain('-test-');
+      expect(logEles.count()).toBe(3, 'should now have 3 log entries');
+      return resetHeroesButtonEle.click();
+    }).then(function() {
+      expect(heroEles.count()).toBe(0, 'should no longer have any heroes');
+      expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall');
+    });
+  });
+
+  it('should support "spy counter"', function () {
+    let updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
+    let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
+    let textEle = element(by.css('counter-parent app-counter > div'));
+    let logEles = element.all(by.css('counter-parent h4 ~ div'));
+    expect(textEle.getText()).toContain('Counter = 0');
+    expect(logEles.count()).toBe(2, 'should start with two log entries');
+    updateCounterButtonEle.click().then(function() {
+      expect(textEle.getText()).toContain('Counter = 1');
+      expect(logEles.count()).toBe(3, 'should now have 3 log entries');
+      return resetCounterButtonEle.click();
+    }).then(function() {
+      expect(textEle.getText()).toContain('Counter = 0');
+      expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init');
+    });
+  });
+});
diff --git a/aio/content/examples/lifecycle-hooks/example-config.json b/aio/content/examples/lifecycle-hooks/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts b/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
new file mode 100644
index 000000000000..36d2cff20fb8
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
@@ -0,0 +1,114 @@
+// #docplaster
+// #docregion
+import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core';
+
+import { LoggerService }  from './logger.service';
+
+//////////////////
+@Component({
+  selector: 'app-child',
+  template: '<input [(ngModel)]="hero">'
+})
+export class ChildComponent {
+  hero = 'Magneta';
+}
+
+//////////////////////
+@Component({
+  selector: 'after-content',
+// #docregion template
+  template: `
+    <div>-- projected content begins --</div>
+      <ng-content></ng-content>
+    <div>-- projected content ends --</div>`
+// #enddocregion template
+   + `
+    <p *ngIf="comment" class="comment">
+      {{comment}}
+    </p>
+  `
+})
+// #docregion hooks
+export class AfterContentComponent implements AfterContentChecked, AfterContentInit {
+  private prevHero = '';
+  comment = '';
+
+  // Query for a CONTENT child of type `ChildComponent`
+  @ContentChild(ChildComponent) contentChild: ChildComponent;
+
+// #enddocregion hooks
+  constructor(private logger: LoggerService) {
+    this.logIt('AfterContent constructor');
+  }
+
+// #docregion hooks
+  ngAfterContentInit() {
+    // contentChild is set after the content has been initialized
+    this.logIt('AfterContentInit');
+    this.doSomething();
+  }
+
+  ngAfterContentChecked() {
+    // contentChild is updated after the content has been checked
+    if (this.prevHero === this.contentChild.hero) {
+      this.logIt('AfterContentChecked (no change)');
+    } else {
+      this.prevHero = this.contentChild.hero;
+      this.logIt('AfterContentChecked');
+      this.doSomething();
+    }
+  }
+// #enddocregion hooks
+// #docregion do-something
+
+  // This surrogate for real business logic sets the `comment`
+  private doSomething() {
+    this.comment = this.contentChild.hero.length > 10 ? `That's a long name` : '';
+  }
+
+  private logIt(method: string) {
+    let child = this.contentChild;
+    let message = `${method}: ${child ? child.hero : 'no'} child content`;
+    this.logger.log(message);
+  }
+// #docregion hooks
+  // ...
+}
+// #enddocregion hooks
+
+//////////////
+@Component({
+  selector: 'after-content-parent',
+  template: `
+  <div class="parent">
+    <h2>AfterContent</h2>
+
+    <div *ngIf="show">` +
+// #docregion parent-template
+     `<after-content>
+        <app-child></app-child>
+      </after-content>`
+// #enddocregion parent-template
++ `</div>
+
+    <h4>-- AfterContent Logs --</h4>
+    <p><button (click)="reset()">Reset</button></p>
+    <div *ngFor="let msg of logger.logs">{{msg}}</div>
+  </div>
+  `,
+  styles: ['.parent {background: burlywood}'],
+  providers: [LoggerService]
+})
+export class AfterContentParentComponent {
+  show = true;
+
+  constructor(public logger: LoggerService) {
+  }
+
+  reset() {
+    this.logger.clear();
+    // quickly remove and reload AfterContentComponent which recreates it
+    this.show = false;
+    this.logger.tick_then(() => this.show = true);
+  }
+}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts b/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
new file mode 100644
index 000000000000..fd09962406af
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
@@ -0,0 +1,116 @@
+// #docplaster
+// #docregion
+import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core';
+
+import { LoggerService }  from './logger.service';
+
+//////////////////
+// #docregion child-view
+@Component({
+  selector: 'app-child-view',
+  template: '<input [(ngModel)]="hero">'
+})
+export class ChildViewComponent {
+  hero = 'Magneta';
+}
+// #enddocregion child-view
+
+//////////////////////
+@Component({
+  selector: 'after-view',
+// #docregion template
+  template: `
+    <div>-- child view begins --</div>
+      <app-child-view></app-child-view>
+    <div>-- child view ends --</div>`
+// #enddocregion template
+   + `
+    <p *ngIf="comment" class="comment">
+      {{comment}}
+    </p>
+  `
+})
+// #docregion hooks
+export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
+  private prevHero = '';
+
+  // Query for a VIEW child of type `ChildViewComponent`
+  @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
+
+// #enddocregion hooks
+  constructor(private logger: LoggerService) {
+    this.logIt('AfterView constructor');
+  }
+
+// #docregion hooks
+  ngAfterViewInit() {
+    // viewChild is set after the view has been initialized
+    this.logIt('AfterViewInit');
+    this.doSomething();
+  }
+
+  ngAfterViewChecked() {
+    // viewChild is updated after the view has been checked
+    if (this.prevHero === this.viewChild.hero) {
+      this.logIt('AfterViewChecked (no change)');
+    } else {
+      this.prevHero = this.viewChild.hero;
+      this.logIt('AfterViewChecked');
+      this.doSomething();
+    }
+  }
+// #enddocregion hooks
+
+  comment = '';
+
+// #docregion do-something
+  // This surrogate for real business logic sets the `comment`
+  private doSomething() {
+    let c = this.viewChild.hero.length > 10 ? `That's a long name` : '';
+    if (c !== this.comment) {
+      // Wait a tick because the component's view has already been checked
+      this.logger.tick_then(() => this.comment = c);
+    }
+  }
+// #enddocregion do-something
+
+  private logIt(method: string) {
+    let child = this.viewChild;
+    let message = `${method}: ${child ? child.hero : 'no'} child view`;
+    this.logger.log(message);
+  }
+// #docregion hooks
+  // ...
+}
+// #enddocregion hooks
+
+//////////////
+@Component({
+  selector: 'after-view-parent',
+  template: `
+  <div class="parent">
+    <h2>AfterView</h2>
+
+    <after-view  *ngIf="show"></after-view>
+
+    <h4>-- AfterView Logs --</h4>
+    <p><button (click)="reset()">Reset</button></p>
+    <div *ngFor="let msg of logger.logs">{{msg}}</div>
+  </div>
+  `,
+  styles: ['.parent {background: burlywood}'],
+  providers: [LoggerService]
+})
+export class AfterViewParentComponent {
+  show = true;
+
+  constructor(public logger: LoggerService) {
+  }
+
+  reset() {
+    this.logger.clear();
+    // quickly remove and reload AfterViewComponent which recreates it
+    this.show = false;
+    this.logger.tick_then(() => this.show = true);
+  }
+}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/app.component.html b/aio/content/examples/lifecycle-hooks/src/app/app.component.html
new file mode 100644
index 000000000000..d0692e28aced
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/app.component.html
@@ -0,0 +1,37 @@
+<a id="top"></a>
+<h1>Component Lifecycle Hooks</h1>
+<a href="#hooks">Peek-a-boo: (most) lifecycle hooks</a><br>
+<a href="#onchanges">OnChanges</a><br>
+<a href="#docheck">DoCheck</a><br>
+<a href="#after-view">AfterViewInit & AfterViewChecked</a><br>
+<a href="#after-content">AfterContentInit & AfterContentChecked</a><br>
+<a href="#spy">Spy: directive with OnInit & OnDestroy</a><br>
+<a href="#counter">Counter: OnChanges + Spy directive</a><br>
+
+<a id="hooks"></a>
+<peek-a-boo-parent></peek-a-boo-parent>
+<a href="#top">back to top</a>
+
+<a id="spy"></a>
+<spy-parent></spy-parent>
+<a href="#top">back to top</a>
+
+<a id="onchanges"></a>
+<on-changes-parent></on-changes-parent>
+<a href="#top">back to top</a>
+
+<a id="docheck"></a>
+<do-check-parent></do-check-parent>
+<a href="#top">back to top</a>
+
+<a id="after-view"></a>
+<after-view-parent></after-view-parent>
+<a href="#top">back to top</a>
+
+<a id="after-content"></a>
+<after-content-parent></after-content-parent>
+<a href="#top">back to top</a>
+
+<a id="counter"></a>
+<counter-parent></counter-parent>
+<a href="#top">back to top</a>
diff --git a/aio/content/examples/lifecycle-hooks/src/app/app.component.ts b/aio/content/examples/lifecycle-hooks/src/app/app.component.ts
new file mode 100644
index 000000000000..7b3cf496f146
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/app.component.ts
@@ -0,0 +1,7 @@
+// #docregion
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/lifecycle-hooks/src/app/app.module.ts b/aio/content/examples/lifecycle-hooks/src/app/app.module.ts
new file mode 100644
index 000000000000..4d9cabf218c5
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/app.module.ts
@@ -0,0 +1,67 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+
+import {
+  AfterContentParentComponent,
+  AfterContentComponent,
+  ChildComponent
+} from './after-content.component';
+
+import {
+  AfterViewParentComponent,
+  AfterViewComponent,
+  ChildViewComponent
+} from './after-view.component';
+
+import {
+  CounterParentComponent,
+  MyCounterComponent
+} from './counter.component';
+
+import {
+  DoCheckParentComponent,
+  DoCheckComponent
+} from './do-check.component';
+
+import {
+  OnChangesParentComponent,
+  OnChangesComponent
+} from './on-changes.component';
+
+import { PeekABooParentComponent } from './peek-a-boo-parent.component';
+import { PeekABooComponent } from './peek-a-boo.component';
+
+import { SpyParentComponent } from './spy.component';
+import { SpyDirective } from './spy.directive';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    AfterContentParentComponent,
+    AfterContentComponent,
+    ChildComponent,
+    AfterViewParentComponent,
+    AfterViewComponent,
+    ChildViewComponent,
+    CounterParentComponent,
+    MyCounterComponent,
+    DoCheckParentComponent,
+    DoCheckComponent,
+    OnChangesParentComponent,
+    OnChangesComponent,
+    PeekABooParentComponent,
+    PeekABooComponent,
+    SpyParentComponent,
+    SpyDirective
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
new file mode 100644
index 000000000000..4d5198b69617
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
@@ -0,0 +1,82 @@
+// #docregion
+import {
+  Component, Input,
+  OnChanges, SimpleChanges,
+} from '@angular/core';
+
+import { LoggerService }  from './logger.service';
+
+@Component({
+  selector: 'app-counter',
+  template: `
+  <div class="counter">
+    Counter = {{counter}}
+
+    <h5>-- Counter Change Log --</h5>
+    <div *ngFor="let chg of changeLog" mySpy>{{chg}}</div>
+  </div>
+  `,
+  styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}']
+})
+export class MyCounterComponent implements OnChanges {
+  @Input() counter: number;
+  changeLog: string[] = [];
+
+  ngOnChanges(changes: SimpleChanges) {
+
+    // Empty the changeLog whenever counter goes to zero
+    // hint: this is a way to respond programmatically to external value changes.
+    if (this.counter === 0) {
+      this.changeLog = [];
+    }
+
+    // A change to `counter` is the only change we care about
+    let chng = changes['counter'];
+    let cur = chng.currentValue;
+    let prev = JSON.stringify(chng.previousValue); // first time is {}; after is integer
+    this.changeLog.push(`counter: currentValue = ${cur}, previousValue = ${prev}`);
+  }
+}
+
+@Component({
+  selector: 'counter-parent',
+  template: `
+   <div class="parent">
+    <h2>Counter Spy</h2>
+
+    <button (click)="updateCounter()">Update counter</button>
+    <button (click)="reset()">Reset Counter</button>
+
+    <app-counter [counter]="value"></app-counter>
+
+    <h4>-- Spy Lifecycle Hook Log --</h4>
+    <div *ngFor="let msg of spyLog">{{msg}}</div>
+   </div>
+  `,
+  styles: ['.parent {background: gold;}'],
+  providers: [LoggerService]
+})
+export class CounterParentComponent {
+  value: number;
+  spyLog: string[] = [];
+
+  private logger: LoggerService;
+
+  constructor(logger: LoggerService) {
+    this.logger = logger;
+    this.spyLog = logger.logs;
+    this.reset();
+  }
+
+  updateCounter() {
+    this.value += 1;
+    this.logger.tick();
+  }
+
+  reset() {
+    this.logger.log('-- reset --');
+    this.value = 0;
+    this.logger.tick();
+  }
+}
+
diff --git a/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
new file mode 100644
index 000000000000..cf7c2b91cee6
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
@@ -0,0 +1,13 @@
+<div class="parent">
+  <h2>{{title}}</h2>
+
+  <table>
+    <tr><td>Power: </td><td><input [(ngModel)]="power"></td></tr>
+    <tr><td>Hero.name: </td><td><input [(ngModel)]="hero.name"></td></tr>
+  </table>
+  <p><button (click)="reset()">Reset Log</button></p>
+
+<!-- #docregion do-check -->
+   <do-check [hero]="hero" [power]="power"></do-check>
+<!-- #enddocregion do-check -->
+</div>
diff --git a/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts b/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts
new file mode 100644
index 000000000000..4b8a088b9ada
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts
@@ -0,0 +1,93 @@
+/* tslint:disable:forin */
+// #docregion
+import { Component, DoCheck, Input, ViewChild } from '@angular/core';
+
+class Hero {
+  constructor(public name: string) {}
+}
+
+@Component({
+  selector: 'do-check',
+  template: `
+  <div class="hero">
+    <p>{{hero.name}} can {{power}}</p>
+
+    <h4>-- Change Log --</h4>
+    <div *ngFor="let chg of changeLog">{{chg}}</div>
+  </div>
+  `,
+  styles: [
+    '.hero {background: LightYellow; padding: 8px; margin-top: 8px}',
+    'p {background: Yellow; padding: 8px; margin-top: 8px}'
+  ]
+})
+export class DoCheckComponent implements DoCheck {
+  @Input() hero: Hero;
+  @Input() power: string;
+
+  changeDetected = false;
+  changeLog: string[] = [];
+  oldHeroName = '';
+  oldPower = '';
+  oldLogLength = 0;
+  noChangeCount = 0;
+
+  // #docregion ng-do-check
+  ngDoCheck() {
+
+    if (this.hero.name !== this.oldHeroName) {
+      this.changeDetected = true;
+      this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`);
+      this.oldHeroName = this.hero.name;
+    }
+
+    if (this.power !== this.oldPower) {
+      this.changeDetected = true;
+      this.changeLog.push(`DoCheck: Power changed to "${this.power}" from "${this.oldPower}"`);
+      this.oldPower = this.power;
+    }
+
+    if (this.changeDetected) {
+        this.noChangeCount = 0;
+    } else {
+        // log that hook was called when there was no relevant change.
+        let count = this.noChangeCount += 1;
+        let noChangeMsg = `DoCheck called ${count}x when no change to hero or power`;
+        if (count === 1) {
+          // add new "no change" message
+          this.changeLog.push(noChangeMsg);
+        } else {
+          // update last "no change" message
+          this.changeLog[this.changeLog.length - 1] = noChangeMsg;
+        }
+    }
+
+    this.changeDetected = false;
+  }
+  // #enddocregion ng-do-check
+
+  reset() {
+    this.changeDetected = true;
+    this.changeLog = [];
+  }
+}
+
+@Component({
+  selector: 'do-check-parent',
+  templateUrl: './do-check-parent.component.html',
+  styles: ['.parent {background: Lavender}']
+})
+export class DoCheckParentComponent {
+  hero: Hero;
+  power: string;
+  title = 'DoCheck';
+  @ViewChild(DoCheckComponent) childView: DoCheckComponent;
+
+  constructor() { this.reset(); }
+
+  reset() {
+    this.hero = new Hero('Windstorm');
+    this.power = 'sing';
+    if (this.childView) { this.childView.reset(); }
+  }
+}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/logger.service.ts b/aio/content/examples/lifecycle-hooks/src/app/logger.service.ts
new file mode 100644
index 000000000000..312b78570790
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/logger.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class LoggerService {
+  logs: string[] = [];
+  prevMsg = '';
+  prevMsgCount = 1;
+
+  log(msg: string)  {
+    if (msg === this.prevMsg) {
+      // Repeat message; update last log entry with count.
+      this.logs[this.logs.length - 1] = msg + ` (${this.prevMsgCount += 1}x)`;
+    } else {
+      // New message; log it.
+      this.prevMsg = msg;
+      this.prevMsgCount = 1;
+      this.logs.push(msg);
+    }
+  }
+
+  clear() { this.logs = []; }
+
+  // schedules a view refresh to ensure display catches up
+  tick() {  this.tick_then(() => { }); }
+  tick_then(fn: () => any) { setTimeout(fn, 0); }
+}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html b/aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html
new file mode 100644
index 000000000000..a0fd404931b0
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html
@@ -0,0 +1,13 @@
+<div class="parent">
+  <h2>{{title}}</h2>
+
+  <table>
+    <tr><td>Power: </td><td><input [(ngModel)]="power"></td></tr>
+    <tr><td>Hero.name: </td><td><input [(ngModel)]="hero.name"></td></tr>
+  </table>
+  <p><button (click)="reset()">Reset Log</button></p>
+
+  <!-- #docregion on-changes -->
+  <on-changes [hero]="hero" [power]="power"></on-changes>
+  <!-- #enddocregion on-changes -->
+</div>
diff --git a/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts b/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts
new file mode 100644
index 000000000000..7b9cda05efed
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts
@@ -0,0 +1,71 @@
+/* tslint:disable:forin */
+// #docregion
+import {
+  Component, Input, OnChanges,
+  SimpleChanges, ViewChild
+} from '@angular/core';
+
+class Hero {
+  constructor(public name: string) {}
+}
+
+@Component({
+  selector: 'on-changes',
+  template: `
+  <div class="hero">
+    <p>{{hero.name}} can {{power}}</p>
+
+    <h4>-- Change Log --</h4>
+    <div *ngFor="let chg of changeLog">{{chg}}</div>
+  </div>
+  `,
+  styles: [
+    '.hero {background: LightYellow; padding: 8px; margin-top: 8px}',
+    'p {background: Yellow; padding: 8px; margin-top: 8px}'
+  ]
+})
+export class OnChangesComponent implements OnChanges {
+// #docregion inputs
+  @Input() hero: Hero;
+  @Input() power: string;
+// #enddocregion inputs
+
+  changeLog: string[] = [];
+
+  // #docregion ng-on-changes
+  ngOnChanges(changes: SimpleChanges) {
+    for (let propName in changes) {
+      let chng = changes[propName];
+      let cur  = JSON.stringify(chng.currentValue);
+      let prev = JSON.stringify(chng.previousValue);
+      this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
+    }
+  }
+  // #enddocregion ng-on-changes
+
+  reset() { this.changeLog = []; }
+}
+
+@Component({
+  selector: 'on-changes-parent',
+  templateUrl: './on-changes-parent.component.html',
+  styles: ['.parent {background: Lavender;}']
+})
+export class OnChangesParentComponent {
+  hero: Hero;
+  power: string;
+  title = 'OnChanges';
+  @ViewChild(OnChangesComponent) childView: OnChangesComponent;
+
+  constructor() {
+    this.reset();
+  }
+
+  reset() {
+    // new Hero object every time; triggers onChanges
+    this.hero = new Hero('Windstorm');
+    // setting power only triggers onChanges if this value is different
+    this.power = 'sing';
+    if (this.childView) { this.childView.reset(); }
+  }
+}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts
new file mode 100644
index 000000000000..7edb57bfc308
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts
@@ -0,0 +1,54 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { LoggerService } from './logger.service';
+
+@Component({
+  selector: 'peek-a-boo-parent',
+  template: `
+  <div class="parent">
+    <h2>Peek-A-Boo</h2>
+
+    <button (click)="toggleChild()">
+      {{hasChild ? 'Destroy' : 'Create'}} PeekABooComponent
+    </button>
+    <button (click)="updateHero()" [hidden]="!hasChild">Update Hero</button>
+
+    <peek-a-boo *ngIf="hasChild" [name]="heroName">
+    </peek-a-boo>
+
+    <h4>-- Lifecycle Hook Log --</h4>
+    <div *ngFor="let msg of hookLog">{{msg}}</div>
+  </div>
+  `,
+  styles: ['.parent {background: moccasin}'],
+  providers:  [ LoggerService ]
+})
+export class PeekABooParentComponent {
+
+  hasChild = false;
+  hookLog: string[];
+
+  heroName = 'Windstorm';
+  private logger: LoggerService;
+
+  constructor(logger: LoggerService) {
+    this.logger = logger;
+    this.hookLog = logger.logs;
+  }
+
+  toggleChild() {
+    this.hasChild = !this.hasChild;
+    if (this.hasChild) {
+      this.heroName = 'Windstorm';
+      this.logger.clear(); // clear log on create
+    }
+    this.hookLog = this.logger.logs;
+    this.logger.tick();
+  }
+
+  updateHero() {
+    this.heroName += '!';
+    this.logger.tick();
+  }
+}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
new file mode 100644
index 000000000000..dcee4287535a
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
@@ -0,0 +1,85 @@
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  AfterViewChecked,
+  AfterViewInit,
+  DoCheck,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges
+} from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { LoggerService }    from './logger.service';
+
+let nextId = 1;
+
+// #docregion ngOnInit
+export class PeekABoo implements OnInit {
+  constructor(private logger: LoggerService) { }
+
+  // implement OnInit's `ngOnInit` method
+  ngOnInit() { this.logIt(`OnInit`); }
+
+  logIt(msg: string) {
+    this.logger.log(`#${nextId++} ${msg}`);
+  }
+}
+// #enddocregion ngOnInit
+
+@Component({
+  selector: 'peek-a-boo',
+  template: '<p>Now you see my hero, {{name}}</p>',
+  styles: ['p {background: LightYellow; padding: 8px}']
+})
+// Don't HAVE to mention the Lifecycle Hook interfaces
+// unless we want typing and tool support.
+export class PeekABooComponent extends PeekABoo implements
+             OnChanges, OnInit, DoCheck,
+             AfterContentInit, AfterContentChecked,
+             AfterViewInit, AfterViewChecked,
+             OnDestroy {
+  @Input()  name: string;
+
+  private verb = 'initialized';
+
+  constructor(logger: LoggerService) {
+    super(logger);
+
+    let is = this.name ? 'is' : 'is not';
+    this.logIt(`name ${is} known at construction`);
+  }
+
+  // only called for/if there is an @input variable set by parent.
+  ngOnChanges(changes: SimpleChanges) {
+    let changesMsgs: string[] = [];
+    for (let propName in changes) {
+      if (propName === 'name') {
+        let name = changes['name'].currentValue;
+        changesMsgs.push(`name ${this.verb} to "${name}"`);
+      } else {
+        changesMsgs.push(propName + ' ' + this.verb);
+      }
+    }
+    this.logIt(`OnChanges: ${changesMsgs.join('; ')}`);
+    this.verb = 'changed'; // next time it will be a change
+  }
+
+  // Beware! Called frequently!
+  // Called in every change detection cycle anywhere on the page
+  ngDoCheck() { this.logIt(`DoCheck`); }
+
+  ngAfterContentInit() { this.logIt(`AfterContentInit`);  }
+
+  // Beware! Called frequently!
+  // Called in every change detection cycle anywhere on the page
+  ngAfterContentChecked() { this.logIt(`AfterContentChecked`); }
+
+  ngAfterViewInit() { this.logIt(`AfterViewInit`); }
+
+  // Beware! Called frequently!
+  // Called in every change detection cycle anywhere on the page
+  ngAfterViewChecked() { this.logIt(`AfterViewChecked`); }
+
+  ngOnDestroy() { this.logIt(`OnDestroy`); }
+}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/spy.component.html b/aio/content/examples/lifecycle-hooks/src/app/spy.component.html
new file mode 100644
index 000000000000..f7deae9448e8
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/spy.component.html
@@ -0,0 +1,16 @@
+<div class="parent">
+  <h2>Spy Directive</h2>
+
+  <input [(ngModel)]="newName" (keyup.enter)="addHero()">
+  <button (click)="addHero()">Add Hero</button>
+  <button (click)="reset()">Reset Heroes</button>
+
+  <p></p>
+  <!-- #docregion template -->
+  <div *ngFor="let hero of heroes" mySpy class="heroes">
+    {{hero}}
+  </div>
+  <!-- #enddocregion template -->
+  <h4>-- Spy Lifecycle Hook Log --</h4>
+  <div *ngFor="let msg of logger.logs">{{msg}}</div>
+</div>
diff --git a/aio/content/examples/lifecycle-hooks/src/app/spy.component.ts b/aio/content/examples/lifecycle-hooks/src/app/spy.component.ts
new file mode 100644
index 000000000000..08fc0ee8a059
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/spy.component.ts
@@ -0,0 +1,38 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { LoggerService }  from './logger.service';
+
+@Component({
+  selector: 'spy-parent',
+  templateUrl: './spy.component.html',
+  styles: [
+     '.parent {background: khaki;}',
+     '.heroes {background: LightYellow; padding: 0 8px}'
+  ],
+  providers:  [LoggerService]
+})
+export class SpyParentComponent {
+  newName = 'Herbie';
+  heroes: string[] = ['Windstorm', 'Magneta'];
+
+  constructor(public logger: LoggerService) {
+  }
+
+  addHero() {
+    if (this.newName.trim()) {
+      this.heroes.push(this.newName.trim());
+      this.newName = '';
+      this.logger.tick();
+    }
+  }
+  removeHero(hero: string) {
+    this.heroes.splice(this.heroes.indexOf(hero), 1);
+    this.logger.tick();
+  }
+  reset() {
+    this.logger.log('-- reset --');
+    this.heroes = [];
+    this.logger.tick();
+  }
+}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts b/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts
new file mode 100644
index 000000000000..01f3f9588061
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Directive, OnInit, OnDestroy } from '@angular/core';
+
+import { LoggerService } from './logger.service';
+
+let nextId = 1;
+
+// #docregion spy-directive
+// Spy on any element to which it is applied.
+// Usage: <div mySpy>...</div>
+@Directive({selector: '[mySpy]'})
+export class SpyDirective implements OnInit, OnDestroy {
+
+  constructor(private logger: LoggerService) { }
+
+  ngOnInit()    { this.logIt(`onInit`); }
+
+  ngOnDestroy() { this.logIt(`onDestroy`); }
+
+  private logIt(msg: string) {
+    this.logger.log(`Spy #${nextId++} ${msg}`);
+  }
+}
+// #enddocregion spy-directive
diff --git a/aio/content/examples/lifecycle-hooks/src/assets/sample.css b/aio/content/examples/lifecycle-hooks/src/assets/sample.css
new file mode 100644
index 000000000000..df17c897c680
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/assets/sample.css
@@ -0,0 +1,13 @@
+.parent {
+  color: #666;
+  margin: 14px 0;
+  padding: 8px;
+}
+input {
+  margin: 4px;
+  padding: 4px;
+}
+.comment {
+  color: red;
+  font-style: italic;
+}
diff --git a/aio/content/examples/lifecycle-hooks/src/index.html b/aio/content/examples/lifecycle-hooks/src/index.html
new file mode 100644
index 000000000000..7446c1feb57f
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html lang="en">
+  <head>
+    <title>Angular Lifecycle Hooks</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="assets/sample.css">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/lifecycle-hooks/src/main.ts b/aio/content/examples/lifecycle-hooks/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/lifecycle-hooks/stackblitz.json b/aio/content/examples/lifecycle-hooks/stackblitz.json
new file mode 100644
index 000000000000..be2e1f757b55
--- /dev/null
+++ b/aio/content/examples/lifecycle-hooks/stackblitz.json
@@ -0,0 +1,8 @@
+{
+  "description": "Lifecycle Hooks",
+  "files":["!**/*.d.ts",  "!**/*.js"],
+  "tags": ["lifecycle", "hooks",
+           "OnInit", "OnDestroy", "OnChange", "DoCheck",
+           "AfterContentInit", "AfterContentChecked",
+           "AfterViewInit", "AfterViewChecked"]
+}
diff --git a/aio/content/examples/ngcontainer/example-config.json b/aio/content/examples/ngcontainer/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/ngcontainer/src/app/app.component.css b/aio/content/examples/ngcontainer/src/app/app.component.css
new file mode 100644
index 000000000000..a5c959f6f7a5
--- /dev/null
+++ b/aio/content/examples/ngcontainer/src/app/app.component.css
@@ -0,0 +1,39 @@
+/* #docregion */
+button {
+  min-width: 100px;
+  font-size: 100%;
+}
+
+code,
+.code {
+  background-color: #eee;
+  color: black;
+  font-family: Courier, sans-serif;
+  font-size: 85%;
+}
+
+div.code {
+  width: 400px;
+}
+
+.heroic {
+  font-size: 150%;
+  font-weight: bold;
+}
+
+hr {
+  margin: 40px 0;
+}
+
+td,
+th {
+  text-align: left;
+  vertical-align: top;
+}
+
+/* #docregion p-span */
+p span {
+  color: red;
+  font-size: 70%;
+}
+/* #enddocregion p-span */
diff --git a/aio/content/examples/ngcontainer/src/app/app.component.html b/aio/content/examples/ngcontainer/src/app/app.component.html
new file mode 100644
index 000000000000..0f1c2d3e89b0
--- /dev/null
+++ b/aio/content/examples/ngcontainer/src/app/app.component.html
@@ -0,0 +1,279 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<h1>&lt;ng-container&gt;</h1>
+
+<!-- #docregion ngif -->
+<div *ngIf="hero">{{hero.name}}</div>
+<!-- #enddocregion ngif -->
+
+<hr>
+
+<h3>&lt;ng-container&gt; and CSS</h3>
+<p>Examples demonstrating issues with rigid CSS styles.</p>
+
+<button (click)="hero = hero ? null : heroes[0]">Toggle hero</button>
+
+<h4>#1 &lt;ng-container&gt; and &lt;p&gt;</h4>
+<!-- #docregion ngif-ngcontainer -->
+<p>
+  I turned the corner
+  <ng-container *ngIf="hero">
+    and saw {{hero.name}}. I waved
+  </ng-container>
+  and continued on my way.
+</p>
+<!-- #enddocregion ngif-ngcontainer -->
+<!-- #docregion ngif-span -->
+<p>
+  I turned the corner
+  <span *ngIf="hero">
+    and saw {{hero.name}}. I waved
+  </span>
+  and continued on my way.
+</p>
+<!-- #enddocregion ngif-span -->
+
+<h4>#2 &lt;ng-container&gt; and &lt;p&gt;</h4>
+
+<div *ngIf="hero">
+  <!-- #docregion ngif-ngcontainer-2 -->
+  <p>
+    {{hero.name}} is
+    <ng-container *ngFor="let trait of heroTraits; let first=first; let last=last">
+      <ng-container *ngIf="!first">,</ng-container>
+      <ng-container *ngIf="last">and</ng-container>
+      {{trait}}
+    </ng-container>.
+  </p>
+  <!-- #enddocregion ngif-ngcontainer-2 -->
+
+  <!-- #docregion ngif-span-2 -->
+  <p>
+    {{hero.name}} is
+    <span *ngFor="let trait of heroTraits; let first=first; let last=last">
+      <span *ngIf="!first">,</span>
+      <span *ngIf="last">and</span>
+      {{trait}}
+    </span>.
+  </p>
+  <!-- #enddocregion ngif-span-2 -->
+
+<br>
+
+<h4>#3 &lt;ng-container&gt; and &lt;p&gt;</h4>
+    <!-- #docregion ngif-span-3 -->
+    <p>
+      <label><input type="checkbox" [checked]="showId" (change)="showId=!showId">Show ID</label>
+    </p>
+    <!-- #enddocregion ngif-span-3 -->
+
+  <div>
+    The <code>hero.id</code> in the &lt;span&gt;
+    is caught by the <span>p-span</span> CSS:
+    <!-- #docregion ngif-span-3 -->
+    <p>
+      <span *ngIf="showId">
+        Id: ({{hero.id}})
+      </span>
+      Name: {{hero.name}}
+    </p>
+    <!-- #enddocregion ngif-span-3 -->
+  </div>
+
+  <div>
+    The <code>hero.id</code> in the &lt;ng-container&gt;
+    is unaffected by the <span>p-span</span> CSS:
+    <p>
+      <ng-container *ngIf="showId">
+        Id: ({{hero.id}})
+      </ng-container>
+      Name: {{hero.name}}
+    </p>
+  </div>
+
+  <div>
+    The <code>hero.id</code> in the &lt;ng-template *ngIf&gt; disappears:
+    <p>
+      <ng-template *ngIf="showId">
+        Id: ({{hero.id}})
+      </ng-template>
+      Name: {{hero.name}}
+    </p>
+  </div>
+
+  <div>
+    The <code>hero.id</code> in the &lt;ng-template [ngIf]&gt;
+    is unaffected by the <span>p-span</span> CSS:
+    <p>
+      <ng-template [ngIf]="showId">
+        Id: ({{hero.id}})
+      </ng-template>
+      Name: {{hero.name}}
+    </p>
+  </div>
+
+</div>
+
+<hr>
+
+<h3>&lt;ng-container&gt; and layout-sensitive elements</h3>
+<p>
+  Examples demonstrating issues with layout-sensitive elements
+  such as &lt;select&gt; and &lt;table&gt;.
+</p>
+
+<h4>#1 &lt;ng-container&gt; and &lt;options&gt;</h4>
+
+<p><i>&lt;select&gt; with &lt;span&gt;</i></p>
+<div>
+  Pick your favorite hero
+  (<label><input type="checkbox" checked (change)="showSad=!showSad">show sad</label>)
+</div>
+<!-- #docregion select-span -->
+<select [(ngModel)]="hero">
+  <span *ngFor="let h of heroes">
+    <span *ngIf="showSad || h?.emotion !== 'sad'">
+      <option [ngValue]="h">{{h.name}} ({{h?.emotion}})</option>
+    </span>
+  </span>
+</select>
+<!-- #enddocregion select-span -->
+
+<p><i>&lt;select&gt; with &lt;ng-container&gt;</i></p>
+<div>
+  Pick your favorite hero
+  (<label><input type="checkbox" checked (change)="showSad=!showSad">show sad</label>)
+</div>
+<!-- #docregion select-ngcontainer -->
+<select [(ngModel)]="hero">
+  <ng-container *ngFor="let h of heroes">
+    <ng-container *ngIf="showSad || h?.emotion !== 'sad'">
+      <option [ngValue]="h">{{h.name}} ({{h?.emotion}})</option>
+    </ng-container>
+  </ng-container>
+</select>
+<!-- #enddocregion select-ngcontainer -->
+
+<br><br><br><br>
+
+<h4>#2 &lt;ng-container&gt; and &lt;options&gt;</h4>
+<p>
+  <label (change)="traitPicker.value=showDefaultTraits ? 'loyal' : heroTraits[0]">
+    <input type="checkbox"
+          [checked]="showDefaultTraits"
+          (change)="showDefaultTraits=!showDefaultTraits">Show default traits
+  </label>
+</p>
+
+<p>Options with &lt;ng-container&gt;</p>
+
+<select #traitPicker>
+  <!-- #docregion select-ngcontainer-2 -->
+  <ng-container *ngIf="showDefaultTraits">
+    <!-- Default traits -->
+    <option value="loyal">LOYAL</option>
+    <option value="clean">CLEAN</option>
+    <option value="reverent">REVERENT</option>
+  </ng-container>
+  <option *ngFor="let trait of heroTraits" [value]="trait">
+    {{ trait | uppercase }}
+  </option>
+  <!-- #enddocregion select-ngcontainer-2 -->
+</select>
+
+
+<p>Options with &lt;span&gt;</p>
+<!-- #docregion select-span-2 -->
+<select>
+  <!-- Default traits are always excluded because intermediate <span> is illegal -->
+  <span *ngIf="showDefaultTraits">
+    <option value="loyal">LOYAL</option>
+    <option value="clean">CLEAN</option>
+    <option value="reverent">REVERENT</option>
+  </span>
+  <option *ngFor="let trait of heroTraits" [value]="trait">
+    {{ trait | uppercase }}
+  </option>
+</select>
+<!-- #enddocregion select-span-2 -->
+
+<br>
+
+<h4>&lt;ng-container&gt; and &lt;table&gt;</h4>
+<p>
+  <label><input type="checkbox" checked (change)="attrDirs=!attrDirs">Attribute directives</label>
+  <label><input type="checkbox" checked (change)="strucDirs=!strucDirs">Structural directives</label>
+  <label><input type="checkbox" (change)="divNgIf=!divNgIf">div with *ngIf</label>
+</p>
+
+<table>
+  <tr>
+    <th width="20%">Directive</th>
+    <th width="10%">Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr *ngIf="attrDirs">
+    <td>NgClass</td><td>A</td><td>Add or remove multiple CSS classes.</td>
+  </tr>
+
+<ng-container *ngIf="divNgIf">
+  <!-- #docregion ngif-div -->
+  <div *ngIf="strucDirs">
+    <tr>
+      <td>xxx</td><td>S</td><td>div with *ngIf formats crazy.</td>
+    </tr>
+    <tr>
+      <td>yyy</td><td>S</td><td>div with *ngIf formats crazy.</td>
+    </tr>
+  </div>
+  <!-- #enddocregion ngif-div -->
+</ng-container>
+
+  <!-- #docregion ngif-ngcontainer-4 -->
+  <ng-container *ngIf="strucDirs">
+    <tr>
+      <td>NgFor</td><td>S</td><td>Repeat the template for each item in a list.</td>
+    </tr>
+    <tr>
+      <td>NgIf</td><td>S</td><td>Add or remove DOM elements.</td>
+    </tr>
+  </ng-container>
+  <!-- #enddocregion ngif-ngcontainer-4 -->
+
+  <ng-container *ngIf="attrDirs">
+    <tr>
+      <td>NgStyle</td><td>A</td><td>Add or remove multiple style attributes.</td>
+    </tr>
+  </ng-container>
+
+  <!-- #docregion ngif-tr -->
+  <tr *ngIf="strucDirs">
+    <td>NgSwitch</td><td>S</td><td>Include in DOM if case matches the switch value.</td>
+  </tr>
+  <!-- #enddocregion ngif-tr -->
+
+</table>
+
+<hr>
+
+<h3>Do not confuse &lt;ng-container&gt; with &lt;ng-content&gt;</h3>
+
+<p>&lt;ng-container&gt;Inside ng-container&lt;/ng-container&gt;</p>
+<!-- #docregion ngcontainer-bare -->
+<ng-container>Inside ng-container</ng-container>
+<!-- #enddocregion ngcontainer-bare -->
+
+<p>&lt;ng-content&gt;this is an Angular parse error&lt;/ng-content&gt;</p>
+<!-- #docregion ngcontent-bad -->
+<!--  <ng-content>this is an Angular parse error</ng-content>  -->
+<!-- #enddocregion ngcontent-bad -->
+<div class="code">Template parse errors:<br>
+&lt;ng-content&gt; element cannot have content.</div>
+
+<p>Demo of &lt;/ng-content&gt;</p>
+<!-- #docregion content-comp -->
+<content-comp>
+  Projected content
+</content-comp>
+<!-- #enddocregion content-comp -->
diff --git a/aio/content/examples/ngcontainer/src/app/app.component.ts b/aio/content/examples/ngcontainer/src/app/app.component.ts
new file mode 100644
index 000000000000..068d1896d8aa
--- /dev/null
+++ b/aio/content/examples/ngcontainer/src/app/app.component.ts
@@ -0,0 +1,25 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { heroes } from './hero';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  heroes = heroes;
+  hero = this.heroes[0];
+  heroTraits = ['honest', 'brave', 'considerate'];
+
+  // flags for the table
+
+  attrDirs = true;
+  strucDirs = true;
+  divNgIf = false;
+
+  showId = true;
+  showDefaultTraits = true;
+  showSad = true;
+}
diff --git a/aio/content/examples/ngcontainer/src/app/app.module.ts b/aio/content/examples/ngcontainer/src/app/app.module.ts
new file mode 100644
index 000000000000..f18ebb526ed4
--- /dev/null
+++ b/aio/content/examples/ngcontainer/src/app/app.module.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ContentComponent } from './content.component';
+import { heroComponents } from './hero.components';
+
+@NgModule({
+  imports: [ BrowserModule, FormsModule ],
+  declarations: [
+    AppComponent,
+    ContentComponent,
+    heroComponents
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/ngcontainer/src/app/content.component.ts b/aio/content/examples/ngcontainer/src/app/content.component.ts
new file mode 100644
index 000000000000..a2580b0deebd
--- /dev/null
+++ b/aio/content/examples/ngcontainer/src/app/content.component.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'content-comp',
+  // #docregion template
+  template:
+    `<div>
+      <ng-content></ng-content>
+    </div>`,
+  // #enddocregion template
+  styles: [ `
+    div { border: medium dashed green; padding: 1em; width: 150px; text-align: center}
+  `]
+})
+export class ContentComponent { }
diff --git a/aio/content/examples/ngcontainer/src/app/hero.components.ts b/aio/content/examples/ngcontainer/src/app/hero.components.ts
new file mode 100644
index 000000000000..12706deda980
--- /dev/null
+++ b/aio/content/examples/ngcontainer/src/app/hero.components.ts
@@ -0,0 +1,48 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  selector: 'happy-hero',
+  template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
+})
+export class HappyHeroComponent {
+  @Input() hero: Hero;
+}
+
+@Component({
+  selector: 'sad-hero',
+  template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
+})
+export class SadHeroComponent {
+  @Input() hero: Hero;
+}
+
+@Component({
+  selector: 'confused-hero',
+  template: `Are you as confused as {{hero.name}}?`
+})
+export class ConfusedHeroComponent {
+  @Input() hero: Hero;
+}
+
+@Component({
+  selector: 'unknown-hero',
+  template: `{{message}}`
+})
+export class UnknownHeroComponent {
+  @Input() hero: Hero;
+  get message() {
+    return this.hero && this.hero.name
+      ? `${this.hero.name} is strange and mysterious.`
+      : 'Are you feeling indecisive?';
+  }
+}
+
+export const heroComponents = [
+  HappyHeroComponent,
+  SadHeroComponent,
+  ConfusedHeroComponent,
+  UnknownHeroComponent
+];
diff --git a/aio/content/examples/ngcontainer/src/app/hero.ts b/aio/content/examples/ngcontainer/src/app/hero.ts
new file mode 100644
index 000000000000..28b435252d9a
--- /dev/null
+++ b/aio/content/examples/ngcontainer/src/app/hero.ts
@@ -0,0 +1,13 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+  emotion?: string;
+}
+
+export const heroes: Hero[] = [
+  { id: 1, name: 'Mr. Nice', emotion: 'happy' },
+  { id: 2, name: 'Narco', emotion: 'sad' },
+  { id: 3, name: 'Windstorm', emotion: 'confused' },
+  { id: 4, name: 'Magneta' }
+];
diff --git a/aio/content/examples/ngcontainer/src/index.html b/aio/content/examples/ngcontainer/src/index.html
new file mode 100644
index 000000000000..38a7c1dff1cc
--- /dev/null
+++ b/aio/content/examples/ngcontainer/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html lang="en">
+  <head>
+    <title>Angular &lt;ng-container&gt;</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <body>
+    <my-app>Loading...</my-apps>
+  </body>
+
+</html>
diff --git a/aio/content/examples/ngcontainer/src/main.ts b/aio/content/examples/ngcontainer/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/ngcontainer/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngcontainer/stackblitz.json b/aio/content/examples/ngcontainer/stackblitz.json
new file mode 100644
index 000000000000..c4cae8f6637c
--- /dev/null
+++ b/aio/content/examples/ngcontainer/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "<ng-container>",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags": [
+    "ngcontainer", "structural", "directives"
+  ]
+}
diff --git a/aio/content/examples/ngmodule-faq/contact.1b.stackblitz.json b/aio/content/examples/ngmodule-faq/contact.1b.stackblitz.json
new file mode 100644
index 000000000000..2946183c0d55
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/contact.1b.stackblitz.json
@@ -0,0 +1,24 @@
+{
+  "description": "Contact NgModule v.1",
+  "files": [
+    "src/app/app.component.1b.ts",
+    "src/app/app.module.1b.ts",
+    "src/app/highlight.directive.ts",
+    "src/app/title.component.html",
+    "src/app/title.component.ts",
+    "src/app/user.service.ts",
+
+    "src/app/contact/awesome.pipe.ts",
+    "src/app/contact/contact.component.css",
+    "src/app/contact/contact.component.html",
+    "src/app/contact/contact.component.3.ts",
+    "src/app/contact/contact.service.ts",
+    "src/app/contact/contact-highlight.directive.ts",
+
+    "src/main.1b.ts",
+    "src/styles.css",
+    "src/index.1b.html"
+  ],
+  "main": "src/index.1b.html",
+  "tags": ["NgModule"]
+}
diff --git a/aio/content/examples/ngmodule-faq/contact.2.stackblitz.json b/aio/content/examples/ngmodule-faq/contact.2.stackblitz.json
new file mode 100644
index 000000000000..3aaf1474a61c
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/contact.2.stackblitz.json
@@ -0,0 +1,26 @@
+{
+  "description": "Contact NgModule v.2",
+  "files": [
+    "src/app/app.component.2.ts",
+    "src/app/app.module.2.ts",
+    "src/app/highlight.directive.ts",
+    "src/app/title.component.html",
+    "src/app/title.component.ts",
+    "src/app/user.service.ts",
+
+    "src/app/contact/contact.component.css",
+    "src/app/contact/contact.component.html",
+    "src/app/contact/contact.service.ts",
+
+    "src/app/contact/awesome.pipe.ts",
+    "src/app/contact/contact.component.3.ts",
+    "src/app/contact/contact.module.2.ts",
+    "src/app/contact/contact-highlight.directive.ts",
+
+    "src/main.2.ts",
+    "src/styles.css",
+    "src/index.2.html"
+  ],
+  "main": "src/index.2.html",
+  "tags": ["NgModule"]
+}
diff --git a/aio/content/examples/ngmodule-faq/e2e/src/app.e2e-spec.ts b/aio/content/examples/ngmodule-faq/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..72d1ca9214d2
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,223 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('NgModule', function () {
+
+  // helpers
+  const gold = 'rgba(255, 215, 0, 1)';
+  const powderblue = 'rgba(176, 224, 230, 1)';
+  const lightgray = 'rgba(211, 211, 211, 1)';
+  const white = 'rgba(0, 0, 0, 0)';
+
+  function getCommonsSectionStruct() {
+    const buttons = element.all(by.css('nav a'));
+
+    return {
+      title: element.all(by.tagName('h1')).get(0),
+      welcome: element.all(by.css('app-title p i')).get(0),
+      contactButton: buttons.get(0),
+      crisisButton: buttons.get(1),
+      heroesButton: buttons.get(2)
+    };
+  }
+
+  function getContactSectionStruct() {
+    const buttons = element.all(by.css('app-contact form button'));
+
+    return {
+      header: element.all(by.css('app-contact h2')).get(0),
+      popupMessage: element.all(by.css('app-contact div')).get(0),
+      contactNameHeader: element.all(by.css('app-contact form h3')).get(0),
+      input: element.all(by.css('app-contact form input')).get(0),
+      validationError: element.all(by.css('app-contact form .alert')).get(0),
+      saveButton: buttons.get(0), // can't be tested
+      nextContactButton: buttons.get(1),
+      newContactButton: buttons.get(2)
+    };
+  }
+
+  function getCrisisSectionStruct() {
+    return {
+      title: element.all(by.css('ng-component h3')).get(0),
+      items: element.all(by.css('ng-component a')),
+      itemId: element.all(by.css('ng-component div')).get(0),
+      listLink: element.all(by.css('ng-component a')).get(0),
+    };
+  }
+
+  function getHeroesSectionStruct() {
+    return {
+      header: element.all(by.css('ng-component h2')).get(0),
+      title: element.all(by.css('ng-component h3')).get(0),
+      items: element.all(by.css('ng-component a')),
+      itemId: element.all(by.css('ng-component ng-component div div')).get(0),
+      itemInput: element.all(by.css('ng-component ng-component input')).get(0),
+      listLink: element.all(by.css('ng-component ng-component a')).get(0),
+    };
+  }
+
+  // tests
+  function appTitleTests(color: string, name?: string) {
+    return function() {
+      it('should have a gray header', function() {
+        const commons = getCommonsSectionStruct();
+        expect(commons.title.getCssValue('backgroundColor')).toBe(color);
+      });
+
+      it('should welcome us', function () {
+        const commons = getCommonsSectionStruct();
+        expect(commons.welcome.getText()).toBe('Welcome, ' + (name ||  'Sherlock Holmes'));
+      });
+    };
+  }
+
+  function contactTests(color: string, name?: string) {
+    return function() {
+      it('shows the contact\'s owner', function() {
+        const contacts = getContactSectionStruct();
+        expect(contacts.header.getText()).toBe('Contact of ' + (name ||  'Sherlock Holmes'));
+      });
+
+      it('can cycle between contacts', function () {
+        const contacts = getContactSectionStruct();
+        const nextButton = contacts.nextContactButton;
+        expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spade');
+        expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color);
+        nextButton.click().then(function () {
+          expect(contacts.contactNameHeader.getText()).toBe('Awesome Nick Danger');
+          return nextButton.click();
+        }).then(function () {
+          expect(contacts.contactNameHeader.getText()).toBe('Awesome Nancy Drew');
+        });
+      });
+
+      it('can change an existing contact', function () {
+        const contacts = getContactSectionStruct();
+        contacts.input.sendKeys('a');
+        expect(contacts.input.getCssValue('backgroundColor')).toBe(color);
+        expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spadea');
+      });
+
+      it('can create a new contact', function () {
+        const contacts = getContactSectionStruct();
+        const newContactButton = contacts.newContactButton;
+        newContactButton.click().then(function () {
+          expect(contacts.validationError.getText()).toBe('Name is required');
+          contacts.input.sendKeys('John Doe');
+          expect(contacts.contactNameHeader.getText()).toBe('Awesome John Doe');
+          expect(contacts.validationError.getText()).toBe('');
+        });
+      });
+    };
+  }
+
+  describe('index.html', function () {
+    beforeEach(function () {
+      browser.get('');
+    });
+
+    describe('app-title', appTitleTests(white, 'Miss Marple'));
+
+    describe('contact', contactTests(lightgray, 'Miss Marple'));
+
+    describe('crisis center', function () {
+      beforeEach(function () {
+        getCommonsSectionStruct().crisisButton.click();
+      });
+
+      it('shows a list of crisis', function () {
+        const crisis = getCrisisSectionStruct();
+        expect(crisis.title.getText()).toBe('Crisis List');
+        expect(crisis.items.count()).toBe(4);
+        expect(crisis.items.get(0).getText()).toBe('1 - Dragon Burning Cities');
+      });
+
+      it('can navigate to one crisis details', function () {
+        const crisis = getCrisisSectionStruct();
+        crisis.items.get(0).click().then(function() {
+          expect(crisis.itemId.getText()).toBe('Crisis id: 1');
+          return crisis.listLink.click();
+        }).then(function () {
+          // We are back to the list
+          expect(crisis.items.count()).toBe(4);
+        });
+      });
+    });
+
+    describe('heroes', function () {
+      beforeEach(function () {
+        getCommonsSectionStruct().heroesButton.click();
+      });
+
+      it('shows a list of heroes', function() {
+        const heroes = getHeroesSectionStruct();
+        expect(heroes.header.getText()).toBe('Heroes of Miss Marple');
+        expect(heroes.title.getText()).toBe('Hero List');
+        expect(heroes.items.count()).toBe(6);
+        expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice');
+      });
+
+      it('can navigate and edit one hero details', function () {
+        const heroes = getHeroesSectionStruct();
+        heroes.items.get(0).click().then(function () {
+          expect(heroes.itemId.getText()).toBe('Id: 11');
+          heroes.itemInput.sendKeys(' try');
+          return heroes.listLink.click();
+        }).then(function () {
+          // We are back to the list
+          expect(heroes.items.count()).toBe(6);
+          expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice try');
+        });
+      });
+    });
+  });
+
+  // describe('index.0.html', function() {
+  //   beforeEach(function () {
+  //     browser.get('index.0.html');
+  //   });
+
+  //   it('has a title', function () {
+  //     const title = element.all(by.tagName('h1')).get(0);
+  //     expect(title.getText()).toBe('Minimal NgModule');
+  //   });
+  // });
+
+  // describe('index.1.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.1.html');
+  //   });
+
+  //   describe('app-title', appTitleTests(powderblue));
+  // });
+
+  // describe('index.1b.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.1b.html');
+  //   });
+
+  //   describe('app-title', appTitleTests(powderblue));
+
+  //   describe('contact', contactTests(powderblue));
+  // });
+
+  // describe('index.2.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.2.html');
+  //   });
+
+  //   describe('app-title', appTitleTests(gold));
+
+  //   describe('contact', contactTests(powderblue));
+  // });
+
+  // describe('index.3.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.3.html');
+  //   });
+
+  //   describe('app-title', appTitleTests(gold));
+  // });
+
+});
diff --git a/aio/content/examples/ngmodule-faq/example-config.json b/aio/content/examples/ngmodule-faq/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/ngmodule-faq/minimal.0.stackblitz.json b/aio/content/examples/ngmodule-faq/minimal.0.stackblitz.json
new file mode 100644
index 000000000000..c1835325d852
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/minimal.0.stackblitz.json
@@ -0,0 +1,12 @@
+{
+  "description": "Minimal NgModule",
+  "files": [
+    "src/app/app.component.0.ts",
+    "src/app/app.module.0.ts",
+    "src/main.0.ts",
+    "src/styles.css",
+    "src/index.0.html"
+  ],
+  "main": "src/index.0.html",
+  "tags": ["NgModule"]
+}
diff --git a/aio/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json b/aio/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json
new file mode 100644
index 000000000000..39faaf229ef2
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json
@@ -0,0 +1,40 @@
+{
+  "description": "NgModule v.3",
+  "files": [
+    "src/app/app.component.3.ts",
+    "src/app/app.module.3.ts",
+    "src/app/app-routing.module.3.ts",
+
+    "src/app/highlight.directive.ts",
+    "src/app/title.component.html",
+    "src/app/title.component.ts",
+    "src/app/user.service.ts",
+
+    "src/app/contact/contact.component.css",
+    "src/app/contact/contact.component.html",
+    "src/app/contact/contact.service.ts",
+
+    "src/app/contact/awesome.pipe.ts",
+    "src/app/contact/contact.component.3.ts",
+    "src/app/contact/contact.module.3.ts",
+    "src/app/contact/contact-routing.module.3.ts",
+    "src/app/contact/contact-highlight.directive.ts",
+
+    "src/app/crisis/*.ts",
+
+    "src/app/hero/hero-detail.component.ts",
+    "src/app/hero/hero-list.component.ts",
+    "src/app/hero/hero.service.ts",
+
+    "src/app/hero/hero.component.3.ts",
+    "src/app/hero/hero.module.3.ts",
+    "src/app/hero/hero-routing.module.3.ts",
+    "src/app/hero/highlight.directive.ts",
+
+    "src/main.3.ts",
+    "src/styles.css",
+    "src/index.3.html"
+  ],
+  "main": "src/index.3.html",
+  "tags": ["NgModule"]
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts b/aio/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts
new file mode 100644
index 000000000000..f3c68f505014
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ContactModule } from './contact/contact.module.3';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'contact', pathMatch: 'full'},
+  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
+  { path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' }
+];
+
+@NgModule({
+  imports: [
+    ContactModule,
+    RouterModule.forRoot(routes)
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/app-routing.module.ts b/aio/content/examples/ngmodule-faq/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..4ce7438bc49d
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app-routing.module.ts
@@ -0,0 +1,30 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ContactModule }    from './contact/contact.module';
+
+// #docregion routes
+const routes: Routes = [
+  { path: '', redirectTo: 'contact', pathMatch: 'full'},
+  // #docregion lazy-routes
+  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
+  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
+  // #enddocregion lazy-routes
+];
+// #enddocregion routes
+
+@NgModule({
+  // #docregion imports
+  imports: [
+    ContactModule,
+    // #docregion forRoot
+    RouterModule.forRoot(routes),
+    // #enddocregion forRoot
+  ],
+  // #enddocregion imports
+  // #docregion exports
+  exports: [RouterModule]
+  // #enddocregion exports
+})
+export class AppRoutingModule {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.component.0.ts b/aio/content/examples/ngmodule-faq/src/app/app.component.0.ts
new file mode 100644
index 000000000000..9aac86876409
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.component.0.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: '<h1>{{title}}</h1>',
+})
+export class AppComponent {
+  title = 'Angular Modules';
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.component.1.ts b/aio/content/examples/ngmodule-faq/src/app/app.component.1.ts
new file mode 100644
index 000000000000..6cdf540f0ead
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.component.1.ts
@@ -0,0 +1,17 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+// #enddocregion
+  /*
+  // #docregion template
+  template: '<h1 highlight>{{title}}</h1>'
+  // #enddocregion template
+  */
+// #docregion
+  template: '<app-title></app-title>'
+})
+export class AppComponent {}
+// #enddocregion
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.component.1b.ts b/aio/content/examples/ngmodule-faq/src/app/app.component.1b.ts
new file mode 100644
index 000000000000..36e3005e0a55
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.component.1b.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  // #docregion template
+  template: `
+    <app-title></app-title>
+    <app-contact></app-contact>
+  `
+  // #enddocregion template
+})
+export class AppComponent {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.component.2.ts b/aio/content/examples/ngmodule-faq/src/app/app.component.2.ts
new file mode 100644
index 000000000000..f28e4526e9b3
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.component.2.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <app-title></app-title>
+    <app-contact></app-contact>
+  `
+})
+export class AppComponent {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.component.3.ts b/aio/content/examples/ngmodule-faq/src/app/app.component.3.ts
new file mode 100644
index 000000000000..cab904e65616
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.component.3.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  // #docregion template
+  template: `
+    <app-title></app-title>
+    <nav>
+      <a routerLink="contact" routerLinkActive="active">Contact</a>
+      <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
+      <a routerLink="heroes"  routerLinkActive="active">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+  // #enddocregion template
+})
+export class AppComponent {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.component.ts b/aio/content/examples/ngmodule-faq/src/app/app.component.ts
new file mode 100644
index 000000000000..4011f82b0ca4
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.component.ts
@@ -0,0 +1,17 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <app-title></app-title>
+    <nav>
+      <a routerLink="contact" routerLinkActive="active">Contact</a>
+      <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
+      <a routerLink="heroes"  routerLinkActive="active">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+})
+export class AppComponent {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.module.0.ts b/aio/content/examples/ngmodule-faq/src/app/app.module.0.ts
new file mode 100644
index 000000000000..4cce82ffcfd7
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.module.0.ts
@@ -0,0 +1,13 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }  from './app.component.0';
+
+@NgModule({
+// #docregion imports
+  imports: [ BrowserModule ],
+// #enddocregion imports
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.module.1.ts b/aio/content/examples/ngmodule-faq/src/app/app.module.1.ts
new file mode 100644
index 000000000000..bb0f7ec6f98f
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.module.1.ts
@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+/* Angular Imports */
+import { NgModule }           from '@angular/core';
+import { BrowserModule }      from '@angular/platform-browser';
+
+/* App Imports */
+// #enddocregion
+import { AppComponent }       from './app.component.1';
+/*
+// #docregion
+import { AppComponent }       from './app.component';
+// #enddocregion
+*/
+// #docregion
+import { HighlightDirective } from './highlight.directive';
+import { TitleComponent }     from './title.component';
+import { UserService }        from './user.service';
+
+/* Contact Related Imports */
+import { FormsModule }        from '@angular/forms';
+
+import { AwesomePipe }        from './contact/awesome.pipe';
+import { ContactComponent }   from './contact/contact.component.3';
+import {
+  ContactHighlightDirective as ContactHighlightDirective
+} from './contact/contact-highlight.directive';
+
+@NgModule({
+// #docregion imports
+  imports: [ BrowserModule, FormsModule ],
+// #enddocregion imports
+// #docregion declarations, directive, component
+  declarations: [
+    AppComponent,
+    HighlightDirective,
+// #enddocregion directive
+    TitleComponent,
+// #enddocregion component
+
+    AwesomePipe,
+    ContactComponent,
+    ContactHighlightDirective
+// #docregion directive, component
+  ],
+// #enddocregion declarations, directive, component
+// #docregion providers
+  providers: [ UserService ],
+// #enddocregion providers
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.module.1b.ts b/aio/content/examples/ngmodule-faq/src/app/app.module.1b.ts
new file mode 100644
index 000000000000..9c848aec306b
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.module.1b.ts
@@ -0,0 +1,46 @@
+// #docplaster
+// #docregion
+/* Angular Imports */
+import { NgModule }           from '@angular/core';
+import { BrowserModule }      from '@angular/platform-browser';
+import { FormsModule }        from '@angular/forms';
+
+/* App Imports */
+// #enddocregion
+import { AppComponent }       from './app.component.1b';
+/*
+// #docregion
+import { AppComponent }       from './app.component';
+// #enddocregion
+*/
+// #docregion
+import { HighlightDirective } from './highlight.directive';
+import { TitleComponent }     from './title.component';
+import { UserService }        from './user.service';
+
+/* Contact Imports */
+// #enddocregion
+import { ContactComponent } from './contact/contact.component.3';
+/*
+// #docregion
+import { ContactComponent } from './contact/contact.component';
+// #enddocregion
+*/
+// #docregion
+import { AwesomePipe } from './contact/awesome.pipe';
+import { ContactService } from './contact/contact.service';
+import { ContactHighlightDirective } from './contact/contact-highlight.directive';
+
+@NgModule({
+  imports: [ BrowserModule,  FormsModule ],
+// #docregion declarations
+  declarations: [
+    AppComponent, HighlightDirective, TitleComponent,
+    AwesomePipe, ContactComponent, ContactHighlightDirective
+  ],
+// #docregion providers
+  providers: [ ContactService, UserService ],
+// #enddocregion providers
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.module.2.ts b/aio/content/examples/ngmodule-faq/src/app/app.module.2.ts
new file mode 100644
index 000000000000..0da0fe334f54
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.module.2.ts
@@ -0,0 +1,36 @@
+// #docplaster
+// #docregion
+/* Angular Imports */
+import { NgModule }           from '@angular/core';
+import { BrowserModule }      from '@angular/platform-browser';
+
+/* App Imports */
+// #enddocregion
+import { AppComponent }       from './app.component.2';
+/*
+// #docregion
+import { AppComponent }       from './app.component';
+// #enddocregion
+*/
+// #docregion
+import { HighlightDirective } from './highlight.directive';
+import { TitleComponent }     from './title.component';
+import { UserService }        from './user.service';
+
+/* Contact Imports */
+// #enddocregion
+import { ContactModule }      from './contact/contact.module.2';
+/*
+// #docregion
+import { ContactModule }      from './contact/contact.module';
+// #enddocregion
+*/
+// #docregion
+
+@NgModule({
+  imports:      [ BrowserModule, ContactModule ],
+  declarations: [ AppComponent, HighlightDirective, TitleComponent ],
+  providers:    [ UserService ],
+  bootstrap:    [ AppComponent ],
+})
+export class AppModule { }
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.module.3.ts b/aio/content/examples/ngmodule-faq/src/app/app.module.3.ts
new file mode 100644
index 000000000000..6fef183d9c46
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.module.3.ts
@@ -0,0 +1,41 @@
+// #docplaster
+// #docregion
+/* Angular Imports */
+import { NgModule }           from '@angular/core';
+import { BrowserModule }      from '@angular/platform-browser';
+
+/* App Imports */
+// #enddocregion
+import { AppComponent }       from './app.component.3';
+/*
+// #docregion
+import { AppComponent }       from './app.component';
+// #enddocregion
+*/
+// #docregion
+import { HighlightDirective } from './highlight.directive';
+import { TitleComponent }     from './title.component';
+import { UserService }        from './user.service';
+
+/* Routing Module */
+// #enddocregion
+import { AppRoutingModule }   from './app-routing.module.3';
+/*
+// #docregion
+import { AppRoutingModule }   from './app-routing.module';
+// #enddocregion
+*/
+// #docregion
+
+@NgModule({
+// #docregion imports
+  imports:      [
+    BrowserModule,
+    AppRoutingModule
+  ],
+// #enddocregion imports
+  providers:    [ UserService ],
+  declarations: [ AppComponent, HighlightDirective, TitleComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/ngmodule-faq/src/app/app.module.ts b/aio/content/examples/ngmodule-faq/src/app/app.module.ts
new file mode 100644
index 000000000000..c75c445a5868
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/app.module.ts
@@ -0,0 +1,39 @@
+// #docplaster
+// #docregion
+// #docregion v4
+/* Angular Imports */
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+/* App Imports */
+import { AppComponent }   from './app.component';
+
+/* Core Modules */
+import { CoreModule }       from './core/core.module';
+
+/* Routing Module */
+import { AppRoutingModule } from './app-routing.module';
+
+@NgModule({
+  // #docregion import-for-root
+  imports: [
+    BrowserModule,
+// #enddocregion v4
+// #enddocregion import-for-root
+/*
+// #docregion v4
+    CoreModule,
+// #enddocregion v4
+*/
+// #docregion import-for-root
+    CoreModule.forRoot({userName: 'Miss Marple'}),
+// #docregion v4
+    AppRoutingModule
+  ],
+  // #enddocregion import-for-root
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion v4
+// #enddocregion
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts b/aio/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts
new file mode 100644
index 000000000000..d6dce999013e
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'awesome' })
+/** Precede the input string with the word "Awesome " */
+export class AwesomePipe implements PipeTransform {
+  transform(phrase: string) {
+    return phrase ? 'Awesome ' + phrase : '';
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts b/aio/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts
new file mode 100644
index 000000000000..a71dac6742f8
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts
@@ -0,0 +1,20 @@
+// #docplaster
+// Same directive name and selector as
+// HighlightDirective in parent AppModule
+// It selects for both input boxes and  'highlight' attr
+// and it highlights in blue instead of gold
+
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+// Highlight the host element or any InputElement in blue
+@Directive({ selector: '[highlight], input' })
+export class ContactHighlightDirective {
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = 'powderblue';
+    // #enddocregion
+    console.log(`* Contact highlight called for ${el.nativeElement.tagName}`);
+    // #docregion
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts b/aio/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts
new file mode 100644
index 000000000000..d89119a15637
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts
@@ -0,0 +1,14 @@
+import { NgModule }            from '@angular/core';
+import { RouterModule }        from '@angular/router';
+
+import { ContactComponent }    from './contact.component.3';
+
+const routes = [
+  { path: 'contact', component: ContactComponent}
+];
+
+@NgModule({
+  imports: [ RouterModule.forChild(routes) ],
+  exports: [ RouterModule ]
+})
+export class ContactRoutingModule {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts b/aio/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts
new file mode 100644
index 000000000000..46dd15867ecb
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule }            from '@angular/core';
+import { RouterModule }        from '@angular/router';
+
+import { ContactComponent }    from './contact.component';
+
+// #docregion routing
+const routes = [
+  { path: 'contact', component: ContactComponent}
+];
+
+@NgModule({
+  imports: [ RouterModule.forChild(routes) ],
+  exports: [ RouterModule ]
+})
+export class ContactRoutingModule {}
+// #enddocregion
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts b/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts
new file mode 100644
index 000000000000..e674ec132376
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts
@@ -0,0 +1,53 @@
+// #docregion
+import { Component, OnInit }      from '@angular/core';
+
+import { Contact, ContactService } from './contact.service';
+import { UserService }    from '../user.service';
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.component.html',
+  styleUrls: [ './contact.component.css' ]
+})
+export class ContactComponent implements OnInit {
+  contact:  Contact;
+  contacts: Contact[];
+
+  msg = 'Loading contacts ...';
+  userName = '';
+
+  constructor(private contactService: ContactService, userService: UserService) {
+    this.userName = userService.userName;
+  }
+
+  ngOnInit() {
+    this.contactService.getContacts().subscribe(contacts => {
+      this.msg = '';
+      this.contacts = contacts;
+      this.contact = contacts[0];
+    });
+  }
+
+  next() {
+    let ix = 1 + this.contacts.indexOf(this.contact);
+    if (ix >= this.contacts.length) { ix = 0; }
+    this.contact = this.contacts[ix];
+  }
+
+  onSubmit() {
+    // POST-DEMO TODO: do something like save it
+    this.displayMessage('Saved ' + this.contact.name);
+  }
+
+  newContact() {
+    this.displayMessage('New contact');
+    this.contact = {id: 42, name: ''};
+    this.contacts.push(this.contact);
+  }
+
+  /** Display a message briefly, then remove it. */
+  displayMessage(msg: string) {
+    this.msg = msg;
+    setTimeout(() => this.msg = '', 1500);
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.css b/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.css
new file mode 100644
index 000000000000..d5bd954dde2c
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.css
@@ -0,0 +1,32 @@
+/* #docregion */
+.ng-valid[required] {
+  border-left: 5px solid #42A948; /* green */
+}
+
+.ng-invalid {
+  border-left: 5px solid #a94442; /* red */
+}
+
+.alert {
+  padding: 15px;
+  margin: 8px 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+
+.msg {
+  color: blue;
+  background-color: whitesmoke;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.button-group {
+  padding-top: 12px;
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.html b/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.html
new file mode 100644
index 000000000000..ecd5e6216956
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.html
@@ -0,0 +1,37 @@
+<!-- #docregion -->
+<h2>Contact of {{userName}}</h2>
+<div *ngIf="msg" class="msg">{{msg}}</div>
+
+<form *ngIf="contacts" (ngSubmit)="onSubmit()" #contactForm="ngForm">
+  <!-- #docregion awesome -->
+  <h3 highlight>{{ contact.name | awesome }}</h3>
+  <!-- #enddocregion awesome -->
+
+  <div class="form-group">
+    <label for="name">Name</label>
+
+    <!-- #docregion ngModel -->
+    <input type="text" class="form-control" required
+      [(ngModel)]="contact.name"
+      name="name"  #name="ngModel" >
+    <!-- #enddocregion ngModel -->
+
+    <div [hidden]="name.valid" class="alert alert-danger">
+      Name is required
+    </div>
+  </div>
+
+  <div class="button-group">
+    <button type="submit" class="btn btn-default"
+    [disabled]="!contactForm.form.valid">
+    Save</button>
+
+    <button type="button" class="btn" (click)="next()"
+    [disabled]="!contactForm.form.valid">
+    Next Contact</button>
+
+    <button type="button" class="btn" (click)="newContact()">
+    New Contact</button>
+  </div>
+</form>
+<!-- #enddocregion -->
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.ts b/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.ts
new file mode 100644
index 000000000000..7fa44eebe555
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact.component.ts
@@ -0,0 +1,54 @@
+// Exact copy except import UserService from core
+// #docregion
+import { Component, OnInit }      from '@angular/core';
+
+import { Contact, ContactService } from './contact.service';
+import { UserService }             from '../core/user.service';
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.component.html',
+  styleUrls: [ './contact.component.css' ]
+})
+export class ContactComponent implements OnInit {
+  contact:  Contact;
+  contacts: Contact[];
+
+  msg = 'Loading contacts ...';
+  userName = '';
+
+  constructor(private contactService: ContactService, userService: UserService) {
+    this.userName = userService.userName;
+  }
+
+  ngOnInit() {
+    this.contactService.getContacts().subscribe(contacts => {
+      this.msg = '';
+      this.contacts = contacts;
+      this.contact = contacts[0];
+    });
+  }
+
+  next() {
+    let ix = 1 + this.contacts.indexOf(this.contact);
+    if (ix >= this.contacts.length) { ix = 0; }
+    this.contact = this.contacts[ix];
+  }
+
+  onSubmit() {
+    // POST-DEMO TODO: do something like save it
+    this.displayMessage('Saved ' + this.contact.name);
+  }
+
+  newContact() {
+    this.displayMessage('New contact');
+    this.contact = {id: 42, name: ''};
+    this.contacts.push(this.contact);
+  }
+
+  /** Display a message briefly, then remove it. */
+  displayMessage(msg: string) {
+    this.msg = msg;
+    setTimeout(() => this.msg = '', 1500);
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts b/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts
new file mode 100644
index 000000000000..fe2a756bd4a0
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: []
+})
+export class ContactModule { }
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts b/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts
new file mode 100644
index 000000000000..d83a26cd781b
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts
@@ -0,0 +1,37 @@
+// #docplaster
+// #docregion
+import { NgModule }           from '@angular/core';
+import { CommonModule }       from '@angular/common';
+import { FormsModule }        from '@angular/forms';
+
+import { AwesomePipe }        from './awesome.pipe';
+// #enddocregion
+import { ContactComponent }   from './contact.component.3';
+/*
+// #docregion
+import { ContactComponent }   from './contact.component';
+// #enddocregion
+*/
+// #docregion
+import { ContactHighlightDirective } from './contact-highlight.directive';
+import { ContactService }     from './contact.service';
+
+// #docregion class
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  declarations: [
+    AwesomePipe,
+    ContactComponent,
+    ContactHighlightDirective
+  ],
+  // #docregion exports
+  exports:   [ ContactComponent ],
+  // #enddocregion exports
+  providers: [ ContactService ]
+})
+export class ContactModule { }
+// #enddocregion class
+// #enddocregion
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts b/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts
new file mode 100644
index 000000000000..3af9732e7665
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts
@@ -0,0 +1,44 @@
+// #docplaster
+// #docregion
+import { NgModule }           from '@angular/core';
+import { CommonModule }       from '@angular/common';
+import { FormsModule }        from '@angular/forms';
+
+import { AwesomePipe }        from './awesome.pipe';
+// #enddocregion
+import { ContactComponent }   from './contact.component.3';
+/*
+// #docregion
+import { ContactComponent }   from './contact.component';
+// #enddocregion
+*/
+// #docregion
+import { ContactHighlightDirective } from './contact-highlight.directive';
+import { ContactService }     from './contact.service';
+
+// #enddocregion
+import { ContactRoutingModule }   from './contact-routing.module.3';
+/*
+// #docregion
+import { ContactRoutingModule }   from './contact-routing.module';
+// #enddocregion
+*/
+// #docregion
+
+// #docregion class
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ContactRoutingModule
+  ],
+  declarations: [
+    AwesomePipe,
+    ContactComponent,
+    ContactHighlightDirective
+  ],
+  providers: [ ContactService ]
+})
+export class ContactModule { }
+// #enddocregion class
+// #enddocregion
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.ts b/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.ts
new file mode 100644
index 000000000000..883331dfba1a
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact.module.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { NgModule }           from '@angular/core';
+import { SharedModule }       from '../shared/shared.module';
+
+import { ContactComponent }     from './contact.component';
+import { ContactService }       from './contact.service';
+import { ContactRoutingModule } from './contact-routing.module';
+
+// #docregion class
+@NgModule({
+  imports: [
+    SharedModule,
+    ContactRoutingModule
+  ],
+  declarations: [ ContactComponent ],
+  providers:    [ ContactService ]
+})
+export class ContactModule { }
+// #enddocregion class
diff --git a/aio/content/examples/ngmodule-faq/src/app/contact/contact.service.ts b/aio/content/examples/ngmodule-faq/src/app/contact/contact.service.ts
new file mode 100644
index 000000000000..ff21a65bce62
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/contact/contact.service.ts
@@ -0,0 +1,37 @@
+// #docplaster
+// #docregion
+import { Injectable, OnDestroy } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+import { delay }      from 'rxjs/operators';
+
+export class Contact {
+  constructor(public id: number, public name: string) { }
+}
+
+const CONTACTS: Contact[] = [
+  new Contact(21, 'Sam Spade'),
+  new Contact(22, 'Nick Danger'),
+  new Contact(23, 'Nancy Drew')
+];
+
+const FETCH_LATENCY = 500;
+
+/** Simulate a data service that retrieves contacts from a server */
+@Injectable()
+export class ContactService implements OnDestroy {
+// #enddocregion
+  constructor() { console.log('ContactService instance created.'); }
+  ngOnDestroy() { console.log('ContactService instance destroyed.'); }
+
+// #docregion
+  getContacts(): Observable<Contact[]> {
+    return of(CONTACTS).pipe(delay(FETCH_LATENCY));
+  }
+
+  getContact(id: number | string): Observable<Contact> {
+    return of(CONTACTS.find(contact => contact.id === +id))
+      .pipe(delay(FETCH_LATENCY));
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/ngmodule-faq/src/app/core/core.module.ts b/aio/content/examples/ngmodule-faq/src/app/core/core.module.ts
new file mode 100644
index 000000000000..27cb9a2193c6
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/core/core.module.ts
@@ -0,0 +1,48 @@
+/* tslint:disable:member-ordering no-unused-variable */
+// #docplaster
+// #docregion
+// #docregion v4
+import {
+  ModuleWithProviders, NgModule,
+  Optional, SkipSelf }       from '@angular/core';
+
+import { CommonModule }      from '@angular/common';
+
+import { TitleComponent }    from './title.component';
+import { UserService }       from './user.service';
+// #enddocregion
+import { UserServiceConfig } from './user.service';
+
+// #docregion v4
+@NgModule({
+  imports:      [ CommonModule ],
+  declarations: [ TitleComponent ],
+  exports:      [ TitleComponent ],
+  providers:    [ UserService ]
+})
+export class CoreModule {
+// #enddocregion v4
+
+  // #docregion ctor
+  constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
+    if (parentModule) {
+      throw new Error(
+        'CoreModule is already loaded. Import it in the AppModule only');
+    }
+  }
+  // #enddocregion ctor
+
+  // #docregion for-root
+  static forRoot(config: UserServiceConfig): ModuleWithProviders {
+    return {
+      ngModule: CoreModule,
+      providers: [
+        {provide: UserServiceConfig, useValue: config }
+      ]
+    };
+  }
+  // #enddocregion for-root
+// #docregion v4
+}
+// #enddocregion v4
+// #enddocregion
diff --git a/aio/content/examples/ngmodule-faq/src/app/core/title.component.html b/aio/content/examples/ngmodule-faq/src/app/core/title.component.html
new file mode 100644
index 000000000000..be114caa7321
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/core/title.component.html
@@ -0,0 +1,6 @@
+<!-- Exact copy from earlier app.component.html -->
+<h1 highlight>{{title}}</h1>
+<p *ngIf="user">
+  <i>Welcome, {{user}}</i>
+<p>
+
diff --git a/aio/content/examples/ngmodule-faq/src/app/core/title.component.ts b/aio/content/examples/ngmodule-faq/src/app/core/title.component.ts
new file mode 100644
index 000000000000..51d9c242dbd4
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/core/title.component.ts
@@ -0,0 +1,16 @@
+// Exact copy of app/title.component.ts except import UserService from shared
+import { Component, Input } from '@angular/core';
+import { UserService }      from '../core/user.service';
+
+@Component({
+  selector: 'app-title',
+  templateUrl: './title.component.html',
+})
+export class TitleComponent {
+  title = 'Angular Modules';
+  user = '';
+
+  constructor(userService: UserService) {
+    this.user = userService.userName;
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/core/user.service.ts b/aio/content/examples/ngmodule-faq/src/app/core/user.service.ts
new file mode 100644
index 000000000000..8fe839075e22
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/core/user.service.ts
@@ -0,0 +1,32 @@
+// Crazy copy of the app/user.service
+// Proves that UserService is an app-wide singleton and only instantiated once
+// IFF shared.module follows the `forRoot` pattern
+//
+// If it didn't, a new instance of UserService would be created
+// after each lazy load and the userName would double up.
+
+import { Injectable, Optional } from '@angular/core';
+
+let nextId = 1;
+
+export class UserServiceConfig {
+  userName = 'Philip Marlowe';
+}
+
+@Injectable()
+export class UserService {
+  id = nextId++;
+  private _userName = 'Sherlock Holmes';
+
+  // #docregion ctor
+  constructor(@Optional() config: UserServiceConfig) {
+    if (config) { this._userName = config.userName; }
+  }
+  // #enddocregion ctor
+
+  get userName() {
+    // Demo: add a suffix if this service has been created more than once
+    const suffix = this.id > 1 ? ` times ${this.id}` : '';
+    return this._userName + suffix;
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts b/aio/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts
new file mode 100644
index 000000000000..30a1d0e7bf5b
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute }    from '@angular/router';
+
+@Component({
+  template: `
+    <h3 highlight>Crisis Detail</h3>
+    <div>Crisis id: {{id}}</div>
+    <br>
+    <a routerLink="../list">Crisis List</a>
+  `
+})
+export class CrisisDetailComponent implements OnInit {
+  id: number;
+  constructor(private route: ActivatedRoute) {  }
+
+  ngOnInit() {
+    this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts b/aio/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts
new file mode 100644
index 000000000000..858f7494163b
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { Crisis,
+         CrisisService } from './crisis.service';
+
+@Component({
+  template: `
+    <h3 highlight>Crisis List</h3>
+    <div *ngFor='let crisis of crises | async'>
+      <a routerLink="{{'../' + crisis.id}}">{{crisis.id}} - {{crisis.name}}</a>
+    </div>
+  `
+})
+export class CrisisListComponent {
+  crises: Observable<Crisis[]>;
+
+  constructor(private crisisService: CrisisService) {
+    this.crises = this.crisisService.getCrises();
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts b/aio/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts
new file mode 100644
index 000000000000..c60efa8cb44b
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule }            from '@angular/core';
+import { Routes,
+         RouterModule }        from '@angular/router';
+
+import { CrisisListComponent }    from './crisis-list.component';
+import { CrisisDetailComponent }  from './crisis-detail.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'list', pathMatch: 'full'},
+  { path: 'list',    component: CrisisListComponent },
+  { path: ':id', component: CrisisDetailComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CrisisRoutingModule {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts b/aio/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts
new file mode 100644
index 000000000000..f557bd6423f4
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts
@@ -0,0 +1,14 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+
+import { CrisisListComponent }    from './crisis-list.component';
+import { CrisisDetailComponent }  from './crisis-detail.component';
+import { CrisisService }          from './crisis.service';
+import { CrisisRoutingModule }    from './crisis-routing.module';
+
+@NgModule({
+  imports:      [ CommonModule, CrisisRoutingModule ],
+  declarations: [ CrisisDetailComponent, CrisisListComponent ],
+  providers:    [ CrisisService ]
+})
+export class CrisisModule {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts b/aio/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts
new file mode 100644
index 000000000000..f91eb995ea6f
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts
@@ -0,0 +1,33 @@
+import { Injectable, OnDestroy } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+import { delay }      from 'rxjs/operators';
+
+export class Crisis {
+  constructor(public id: number, public name: string) { }
+}
+
+const CRISES: Crisis[] = [
+  new Crisis(1, 'Dragon Burning Cities'),
+  new Crisis(2, 'Sky Rains Great White Sharks'),
+  new Crisis(3, 'Giant Asteroid Heading For Earth'),
+  new Crisis(4, 'Procrastinators Meeting Delayed Again'),
+];
+
+const FETCH_LATENCY = 500;
+
+/** Simulate a data service that retrieves crises from a server */
+@Injectable()
+export class CrisisService implements OnDestroy {
+  constructor() { console.log('CrisisService instance created.'); }
+  ngOnDestroy() { console.log('CrisisService instance destroyed.'); }
+
+  getCrises(): Observable<Crisis[]> {
+    return of(CRISES).pipe(delay(FETCH_LATENCY));
+  }
+
+  getCrisis(id: number | string): Observable<Crisis> {
+    return of(CRISES.find(crisis => crisis.id === +id))
+      .pipe(delay(FETCH_LATENCY));
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts b/aio/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts
new file mode 100644
index 000000000000..2c46622bc4d1
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute }    from '@angular/router';
+
+import { Hero,
+         HeroService }    from './hero.service';
+
+@Component({
+  template: `
+    <h3 highlight>Hero Detail</h3>
+    <div *ngIf="hero">
+      <div>Id: {{hero.id}}</div><br>
+      <label>Name:
+        <input [(ngModel)]="hero.name">
+      </label>
+    </div>
+    <br>
+    <a routerLink="../">Hero List</a>
+  `
+})
+export class HeroDetailComponent implements OnInit {
+  hero: Hero;
+
+  constructor(
+    private route: ActivatedRoute,
+    private heroService: HeroService) { }
+
+  ngOnInit() {
+    let id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
+    this.heroService.getHero(id).subscribe(hero => this.hero = hero);
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts b/aio/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts
new file mode 100644
index 000000000000..8ac492403e64
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts
@@ -0,0 +1,20 @@
+import { Component }  from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { Hero,
+         HeroService } from './hero.service';
+
+@Component({
+  template: `
+    <h3 highlight>Hero List</h3>
+    <div *ngFor='let hero of heroes | async'>
+      <a routerLink="{{hero.id}}">{{hero.id}} - {{hero.name}}</a>
+    </div>
+  `
+})
+export class HeroListComponent {
+  heroes: Observable<Hero[]>;
+  constructor(private heroService: HeroService) {
+    this.heroes = this.heroService.getHeroes();
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts b/aio/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts
new file mode 100644
index 000000000000..588ffd94be64
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts
@@ -0,0 +1,23 @@
+import { NgModule }     from '@angular/core';
+import { Routes,
+         RouterModule } from '@angular/router';
+
+import { HeroComponent }       from './hero.component.3';
+import { HeroListComponent }   from './hero-list.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+const routes: Routes = [
+  { path: '',
+    component: HeroComponent,
+    children: [
+      { path: '',    component: HeroListComponent },
+      { path: ':id', component: HeroDetailComponent }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HeroRoutingModule {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts b/aio/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts
new file mode 100644
index 000000000000..d97aab3bebe6
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts
@@ -0,0 +1,23 @@
+import { NgModule }     from '@angular/core';
+import { Routes,
+         RouterModule } from '@angular/router';
+
+import { HeroComponent }       from './hero.component';
+import { HeroListComponent }   from './hero-list.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+const routes: Routes = [
+  { path: '',
+    component: HeroComponent,
+    children: [
+      { path: '',    component: HeroListComponent },
+      { path: ':id', component: HeroDetailComponent }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HeroRoutingModule {}
diff --git a/aio/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts b/aio/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts
new file mode 100644
index 000000000000..d52bc253df54
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts
@@ -0,0 +1,18 @@
+import { Component }   from '@angular/core';
+
+import { HeroService } from './hero.service';
+import { UserService } from '../user.service';
+
+@Component({
+  template: `
+    <h2>Heroes of {{userName}}</h2>
+    <router-outlet></router-outlet>
+  `,
+  providers: [ HeroService ]
+})
+export class HeroComponent {
+  userName = '';
+  constructor(userService: UserService) {
+    this.userName = userService.userName;
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/hero/hero.component.ts b/aio/content/examples/ngmodule-faq/src/app/hero/hero.component.ts
new file mode 100644
index 000000000000..86338fb0ae9e
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/hero/hero.component.ts
@@ -0,0 +1,19 @@
+// Exact copy except import UserService from core
+import { Component }   from '@angular/core';
+
+import { HeroService } from './hero.service';
+import { UserService } from '../core/user.service';
+
+@Component({
+  template: `
+    <h2>Heroes of {{userName}}</h2>
+    <router-outlet></router-outlet>
+  `,
+  providers: [ HeroService ]
+})
+export class HeroComponent {
+  userName = '';
+  constructor(userService: UserService) {
+    this.userName = userService.userName;
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts b/aio/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts
new file mode 100644
index 000000000000..acd5e28b1585
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts
@@ -0,0 +1,21 @@
+import { NgModule }            from '@angular/core';
+import { CommonModule }        from '@angular/common';
+import { FormsModule }         from '@angular/forms';
+
+import { HeroComponent }       from './hero.component.3';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroListComponent }   from './hero-list.component';
+import { HeroRoutingModule }   from './hero-routing.module.3';
+
+import { HighlightDirective }  from './highlight.directive';
+
+// #docregion class
+@NgModule({
+  imports: [ CommonModule, FormsModule, HeroRoutingModule ],
+  declarations: [
+    HeroComponent, HeroDetailComponent, HeroListComponent,
+    HighlightDirective
+  ]
+})
+export class HeroModule { }
+// #enddocregion class
diff --git a/aio/content/examples/ngmodule-faq/src/app/hero/hero.module.ts b/aio/content/examples/ngmodule-faq/src/app/hero/hero.module.ts
new file mode 100644
index 000000000000..98d7b76b0068
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/hero/hero.module.ts
@@ -0,0 +1,16 @@
+import { NgModule }            from '@angular/core';
+
+import { SharedModule }        from '../shared/shared.module';
+
+import { HeroComponent }       from './hero.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroListComponent }   from './hero-list.component';
+import { HeroRoutingModule }   from './hero-routing.module';
+
+@NgModule({
+  imports: [ SharedModule, HeroRoutingModule ],
+  declarations: [
+    HeroComponent, HeroDetailComponent, HeroListComponent,
+  ]
+})
+export class HeroModule { }
diff --git a/aio/content/examples/ngmodule-faq/src/app/hero/hero.service.ts b/aio/content/examples/ngmodule-faq/src/app/hero/hero.service.ts
new file mode 100644
index 000000000000..da3677845f0c
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/hero/hero.service.ts
@@ -0,0 +1,36 @@
+import { Injectable, OnDestroy } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+import { delay }      from 'rxjs/operators';
+
+export class Hero {
+  constructor(public id: number, public name: string) { }
+}
+
+const HEROES: Hero[] = [
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan')
+];
+
+const FETCH_LATENCY = 500;
+
+/** Simulate a data service that retrieves heroes from a server */
+@Injectable()
+export class HeroService implements OnDestroy {
+
+  constructor() { console.log('HeroService instance created.'); }
+  ngOnDestroy() { console.log('HeroService instance destroyed.'); }
+
+  getHeroes(): Observable<Hero[]> {
+    return of(HEROES).pipe(delay(FETCH_LATENCY));
+  }
+
+  getHero(id: number | string): Observable<Hero> {
+    return of(HEROES.find(hero => hero.id === +id))
+      .pipe(delay(FETCH_LATENCY));
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts b/aio/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts
new file mode 100644
index 000000000000..d7e39afd059f
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+// Same directive name and selector as
+// HighlightDirective in parent AppRootModule
+// It selects for both input boxes and  'highlight' attr
+// and it highlights in beige instead of yellow
+@Directive({ selector: '[highlight]' })
+export class HighlightDirective {
+    constructor(el: ElementRef) {
+       el.nativeElement.style.backgroundColor = 'beige';
+       console.log(`* Hero highlight called for ${el.nativeElement.tagName}`);
+    }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/highlight.directive.ts b/aio/content/examples/ngmodule-faq/src/app/highlight.directive.ts
new file mode 100644
index 000000000000..cf6b75ebfa89
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/highlight.directive.ts
@@ -0,0 +1,15 @@
+// #docplaster
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+// Highlight the host element in gold
+@Directive({ selector: '[highlight]' })
+export class HighlightDirective {
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = 'gold';
+    // #enddocregion
+    console.log(`* AppRoot highlight called for ${el.nativeElement.tagName}`);
+    // #docregion
+  }
+}
+// #enddocregion
diff --git a/aio/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts b/aio/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts
new file mode 100644
index 000000000000..a1a0001d246e
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts
@@ -0,0 +1,10 @@
+// Exact copy of contact.awesome.pipe
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'awesome' })
+/** Precede the input string with the word "Awesome " */
+export class AwesomePipe implements PipeTransform {
+  transform(phrase: string) {
+    return phrase ? 'Awesome ' + phrase : '';
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts b/aio/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts
new file mode 100644
index 000000000000..ee874fa5368f
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts
@@ -0,0 +1,12 @@
+// Exact copy of contact/highlight.directive except for color and message
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({ selector: '[highlight], input' })
+// Highlight the host element or any InputElement in gray
+export class HighlightDirective {
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = 'lightgray';
+    console.log(
+      `* Shared highlight called for ${el.nativeElement.tagName}`);
+  }
+}
diff --git a/aio/content/examples/ngmodule-faq/src/app/shared/shared.module.ts b/aio/content/examples/ngmodule-faq/src/app/shared/shared.module.ts
new file mode 100644
index 000000000000..2da7d7b2a5ce
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/shared/shared.module.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { NgModule }            from '@angular/core';
+import { CommonModule }        from '@angular/common';
+import { FormsModule }         from '@angular/forms';
+
+import { AwesomePipe }         from './awesome.pipe';
+import { HighlightDirective }  from './highlight.directive';
+
+// #docregion module
+@NgModule({
+  imports:      [ CommonModule ],
+  declarations: [ AwesomePipe, HighlightDirective ],
+  exports:      [ AwesomePipe, HighlightDirective,
+                  CommonModule, FormsModule ]
+})
+export class SharedModule { }
+// #enddocregion module
+// #enddocregion
diff --git a/aio/content/examples/ngmodule-faq/src/app/title.component.html b/aio/content/examples/ngmodule-faq/src/app/title.component.html
new file mode 100644
index 000000000000..fa8989ac6ca7
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/title.component.html
@@ -0,0 +1,10 @@
+<!-- #docregion -->
+<!-- #docregion v1 -->
+<h1 highlight>{{title}}</h1>
+<!-- #enddocregion v1 -->
+<!-- #docregion ngIf -->
+<p *ngIf="user">
+  <i>Welcome, {{user}}</i>
+<p>
+<!-- #enddocregion ngIf -->
+
diff --git a/aio/content/examples/ngmodule-faq/src/app/title.component.ts b/aio/content/examples/ngmodule-faq/src/app/title.component.ts
new file mode 100644
index 000000000000..b0761208a066
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/title.component.ts
@@ -0,0 +1,23 @@
+// #docplaster
+// #docregion
+// #docregion v1
+import { Component } from '@angular/core';
+// #enddocregion v1
+import { UserService } from './user.service';
+// #docregion v1
+
+@Component({
+  selector: 'app-title',
+  templateUrl: './title.component.html'
+})
+export class TitleComponent {
+  title = 'Angular Modules';
+// #enddocregion v1
+  user = '';
+
+  constructor(userService: UserService) {
+    this.user = userService.userName;
+  }
+// #docregion v1
+}
+// #enddocregion v1
diff --git a/aio/content/examples/ngmodule-faq/src/app/user.service.ts b/aio/content/examples/ngmodule-faq/src/app/user.service.ts
new file mode 100644
index 000000000000..7d996b26fa32
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/app/user.service.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+/** Dummy version of an authenticated user service */
+export class UserService {
+  userName = 'Sherlock Holmes';
+}
diff --git a/aio/content/examples/ngmodule-faq/src/index.0.html b/aio/content/examples/ngmodule-faq/src/index.0.html
new file mode 100644
index 000000000000..480267031074
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/index.0.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <base href="/">
+  <title>NgModule Minimal</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  <app-root></app-root>
+</body>
+
+</html>
diff --git a/aio/content/examples/ngmodule-faq/src/index.1.html b/aio/content/examples/ngmodule-faq/src/index.1.html
new file mode 100644
index 000000000000..2da2e67b4b54
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/index.1.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/">
+    <title>NgModule Minimal</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/aio/content/examples/ngmodule-faq/src/index.1b.html b/aio/content/examples/ngmodule-faq/src/index.1b.html
new file mode 100644
index 000000000000..2da2e67b4b54
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/index.1b.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/">
+    <title>NgModule Minimal</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/aio/content/examples/ngmodule-faq/src/index.2.html b/aio/content/examples/ngmodule-faq/src/index.2.html
new file mode 100644
index 000000000000..2da2e67b4b54
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/index.2.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/">
+    <title>NgModule Minimal</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/aio/content/examples/ngmodule-faq/src/index.3.html b/aio/content/examples/ngmodule-faq/src/index.3.html
new file mode 100644
index 000000000000..2da2e67b4b54
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/index.3.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/">
+    <title>NgModule Minimal</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/aio/content/examples/ngmodule-faq/src/index.html b/aio/content/examples/ngmodule-faq/src/index.html
new file mode 100644
index 000000000000..cb62943973d5
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/">
+    <title>NgModule Deluxe</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/aio/content/examples/ngmodule-faq/src/main-static.ts b/aio/content/examples/ngmodule-faq/src/main-static.ts
new file mode 100644
index 000000000000..a1bcf466d2f2
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/main-static.ts
@@ -0,0 +1,13 @@
+// #docplaster
+/*
+// #docregion
+// The browser platform without a compiler
+import { platformBrowser } from '@angular/platform-browser';
+
+// The app module factory produced by the static offline compiler
+import { AppModuleNgFactory } from './app/app.module.ngfactory';
+
+// Launch with the app module factory.
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
+// #enddocregion
+*/
diff --git a/aio/content/examples/ngmodule-faq/src/main.0.ts b/aio/content/examples/ngmodule-faq/src/main.0.ts
new file mode 100644
index 000000000000..ed431adb1a2a
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/main.0.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module.0';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule-faq/src/main.1.ts b/aio/content/examples/ngmodule-faq/src/main.1.ts
new file mode 100644
index 000000000000..1b8a77052601
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/main.1.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module.1';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule-faq/src/main.1b.ts b/aio/content/examples/ngmodule-faq/src/main.1b.ts
new file mode 100644
index 000000000000..a0095ac64ddf
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/main.1b.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module.1b';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule-faq/src/main.2.ts b/aio/content/examples/ngmodule-faq/src/main.2.ts
new file mode 100644
index 000000000000..4349ed7403c6
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/main.2.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module.2';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule-faq/src/main.3.ts b/aio/content/examples/ngmodule-faq/src/main.3.ts
new file mode 100644
index 000000000000..633b21147f74
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/main.3.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module.3';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule-faq/src/main.ts b/aio/content/examples/ngmodule-faq/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule-faq/stackblitz.json b/aio/content/examples/ngmodule-faq/stackblitz.json
new file mode 100644
index 000000000000..b56eaeebf815
--- /dev/null
+++ b/aio/content/examples/ngmodule-faq/stackblitz.json
@@ -0,0 +1,40 @@
+{
+  "description": "NgModule Final",
+  "files": [
+    "src/app/app.component.ts",
+    "src/app/app.module.ts",
+    "src/app/app-routing.module.ts",
+
+    "src/app/contact/contact.component.css",
+    "src/app/contact/contact.component.html",
+    "src/app/contact/contact.service.ts",
+
+    "src/app/contact/contact.component.ts",
+    "src/app/contact/contact.module.ts",
+    "src/app/contact/contact-routing.module.ts",
+
+    "src/app/crisis/*.ts",
+
+    "src/app/hero/hero-detail.component.ts",
+    "src/app/hero/hero-list.component.ts",
+    "src/app/hero/hero.service.ts",
+
+    "src/app/hero/hero.component.ts",
+    "src/app/hero/hero.module.ts",
+    "src/app/hero/hero-routing.module.ts",
+
+    "src/app/core/*.css",
+    "src/app/core/*.html",
+    "src/app/core/*.ts",
+
+    "src/app/shared/*.css",
+    "src/app/shared/*.html",
+    "src/app/shared/*.ts",
+
+    "src/main.ts",
+    "src/styles.css",
+    "src/index.html"
+  ],
+  "main": "src/index.html",
+  "tags": ["NgModule"]
+}
diff --git a/aio/content/examples/ngmodules/e2e/src/app.e2e-spec.ts b/aio/content/examples/ngmodules/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..e0f080e70f1a
--- /dev/null
+++ b/aio/content/examples/ngmodules/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,223 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('NgModule-example', function () {
+
+  // helpers
+  const gold = 'rgba(255, 215, 0, 1)';
+  const powderblue = 'rgba(176, 224, 230, 1)';
+  const lightgray = 'rgba(239, 238, 237, 1)';
+  const white = 'rgba(0, 0, 0, 0)';
+
+  function getCommonsSectionStruct() {
+    const buttons = element.all(by.css('nav a'));
+
+    return {
+      title: element.all(by.tagName('h1')).get(0),
+      subtitle: element.all(by.css('app-title p i')).get(0),
+      contactButton: buttons.get(0),
+      itemButton: buttons.get(1),
+      customersButton: buttons.get(2)
+    };
+  }
+
+  function getContactSectionStruct() {
+    const buttons = element.all(by.css('app-contact form button'));
+
+    return {
+      header: element.all(by.css('app-contact h2')).get(0),
+      popupMessage: element.all(by.css('app-contact div')).get(0),
+      contactNameHeader: element.all(by.css('app-contact form h3')).get(0),
+      input: element.all(by.css('app-contact form input')).get(0),
+      validationError: element.all(by.css('app-contact form .alert')).get(0),
+      saveButton: buttons.get(0), // can't be tested
+      nextContactButton: buttons.get(1),
+      newContactButton: buttons.get(2)
+    };
+  }
+
+  function getItemSectionStruct() {
+    return {
+      title: element.all(by.css('ng-component h3')).get(0),
+      items: element.all(by.css('ng-component a')),
+      itemId: element.all(by.css('ng-component div')).get(0),
+      listLink: element.all(by.css('ng-component a')).get(0),
+    };
+  }
+
+  function getCustomersSectionStruct() {
+    return {
+      header: element.all(by.css('ng-component h2')).get(0),
+      title: element.all(by.css('ng-component h3')).get(0),
+      items: element.all(by.css('ng-component a')),
+      itemId: element.all(by.css('ng-component ng-component div div')).get(0),
+      itemInput: element.all(by.css('ng-component ng-component input')).get(0),
+      listLink: element.all(by.css('ng-component ng-component a')).get(0),
+    };
+  }
+
+  // tests
+  function appTitleTests(color: string, name?: string) {
+    return function() {
+      it('should have a gray header', function() {
+        const commons = getCommonsSectionStruct();
+        expect(commons.title.getCssValue('backgroundColor')).toBe(color);
+      });
+
+      it('should welcome us', function () {
+        const commons = getCommonsSectionStruct();
+        expect(commons.subtitle.getText()).toBe('Welcome, ' + (name ||  'Sherlock Holmes'));
+      });
+    };
+  }
+
+  function contactTests(color: string, name?: string) {
+    return function() {
+      it('shows the contact\'s owner', function() {
+        const contacts = getContactSectionStruct();
+        expect(contacts.header.getText()).toBe('Contact of ' + (name ||  'Sherlock Holmes'));
+      });
+
+      it('can cycle between contacts', function () {
+        const contacts = getContactSectionStruct();
+        const nextButton = contacts.nextContactButton;
+        expect(contacts.contactNameHeader.getText()).toBe('Awesome Yasha');
+        expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color);
+        nextButton.click().then(function () {
+          expect(contacts.contactNameHeader.getText()).toBe('Awesome Iulia');
+          return nextButton.click();
+        }).then(function () {
+          expect(contacts.contactNameHeader.getText()).toBe('Awesome Karina');
+        });
+      });
+
+      it('can change an existing contact', function () {
+        const contacts = getContactSectionStruct();
+        contacts.input.sendKeys('a');
+        expect(contacts.input.getCssValue('backgroundColor')).toBe(color);
+        expect(contacts.contactNameHeader.getText()).toBe('Awesome Yashaa');
+      });
+
+      it('can create a new contact', function () {
+        const contacts = getContactSectionStruct();
+        const newContactButton = contacts.newContactButton;
+        newContactButton.click().then(function () {
+          expect(contacts.validationError.getText()).toBe('Name is required');
+          contacts.input.sendKeys('John Doe');
+          expect(contacts.contactNameHeader.getText()).toBe('Awesome John Doe');
+          expect(contacts.validationError.getText()).toBe('');
+        });
+      });
+    };
+  }
+
+  describe('index.html', function () {
+    beforeEach(function () {
+      browser.get('');
+    });
+
+    describe('app-title', appTitleTests(white, 'Miss Marple'));
+
+    describe('contact', contactTests(lightgray, 'Miss Marple'));
+
+    describe('item center', function () {
+      beforeEach(function () {
+        getCommonsSectionStruct().itemButton.click();
+      });
+
+      it('shows a list of items', function () {
+        const item = getItemSectionStruct();
+        expect(item.title.getText()).toBe('Items List');
+        expect(item.items.count()).toBe(4);
+        expect(item.items.get(0).getText()).toBe('1 - Sticky notes');
+      });
+
+      it('can navigate to one item details', function () {
+        const item = getItemSectionStruct();
+        item.items.get(0).click().then(function() {
+          expect(item.itemId.getText()).toBe('Item id: 1');
+          return item.listLink.click();
+        }).then(function () {
+          // We are back to the list
+          expect(item.items.count()).toBe(4);
+        });
+      });
+    });
+
+    describe('customers', function () {
+      beforeEach(function () {
+        getCommonsSectionStruct().customersButton.click();
+      });
+
+      it('shows a list of customers', function() {
+        const customers = getCustomersSectionStruct();
+        expect(customers.header.getText()).toBe('Customers of Miss Marple times 2');
+        expect(customers.title.getText()).toBe('Customer List');
+        expect(customers.items.count()).toBe(6);
+        expect(customers.items.get(0).getText()).toBe('11 - Julian');
+      });
+
+      it('can navigate and edit one customer details', function () {
+        const customers = getCustomersSectionStruct();
+        customers.items.get(0).click().then(function () {
+          expect(customers.itemId.getText()).toBe('Id: 11');
+          customers.itemInput.sendKeys(' try');
+          return customers.listLink.click();
+        }).then(function () {
+          // We are back to the list
+          expect(customers.items.count()).toBe(6);
+          expect(customers.items.get(0).getText()).toBe('11 - Julian try');
+        });
+      });
+    });
+  });
+
+  // describe('index.0.html', function() {
+  //   beforeEach(function () {
+  //     browser.get('index.0.html');
+  //   });
+
+  //   it('has a title', function () {
+  //     const title = element.all(by.tagName('h1')).get(0);
+  //     expect(title.getText()).toBe('Minimal NgModule');
+  //   });
+  // });
+
+  // describe('index.1.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.1.html');
+  //   });
+
+  //   describe('app-title', appTitleTests(powderblue));
+  // });
+
+  // describe('index.1b.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.1b.html');
+  //   });
+
+  //   describe('app-title', appTitleTests(powderblue));
+
+  //   describe('contact', contactTests(powderblue));
+  // });
+
+  // describe('index.2.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.2.html');
+  //   });
+
+  //   describe('app-title', appTitleTests(gold));
+
+  //   describe('contact', contactTests(powderblue));
+  // });
+
+  // describe('index.3.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.3.html');
+  //   });
+
+  //   describe('app-title', appTitleTests(gold));
+  // });
+
+});
diff --git a/aio/content/examples/ngmodules/example-config.json b/aio/content/examples/ngmodules/example-config.json
new file mode 100644
index 000000000000..313764c3c606
--- /dev/null
+++ b/aio/content/examples/ngmodules/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:cli",
+  "run": "serve:cli"
+}
diff --git a/aio/content/examples/ngmodules/src/app/app-routing.module.ts b/aio/content/examples/ngmodules/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..f4cd4ba03aa9
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/app-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule }             from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+export const routes: Routes = [
+  { path: '', redirectTo: 'contact', pathMatch: 'full'},
+  { path: 'items', loadChildren: 'app/items/items.module#ItemsModule' },
+  { path: 'customers', loadChildren: 'app/customers/customers.module#CustomersModule' }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
diff --git a/aio/content/examples/ngmodules/src/app/app.component.css b/aio/content/examples/ngmodules/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/ngmodules/src/app/app.component.html b/aio/content/examples/ngmodules/src/app/app.component.html
new file mode 100644
index 000000000000..b6931b538a2c
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/app.component.html
@@ -0,0 +1,3 @@
+<h1>
+  {{title}}
+</h1>
diff --git a/aio/content/examples/ngmodules/src/app/app.component.spec.ts b/aio/content/examples/ngmodules/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..13c632d6763e
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/app.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  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!');
+  }));
+});
diff --git a/aio/content/examples/ngmodules/src/app/app.component.ts b/aio/content/examples/ngmodules/src/app/app.component.ts
new file mode 100644
index 000000000000..41c28b9ed60f
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/app.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <app-title></app-title>
+    <nav>
+      <a routerLink="contact" routerLinkActive="active">Contact</a>
+      <a routerLink="items" routerLinkActive="active">Items</a>
+      <a routerLink="customers" routerLinkActive="active">Customers</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+})
+export class AppComponent {
+}
diff --git a/aio/content/examples/ngmodules/src/app/app.module.ts b/aio/content/examples/ngmodules/src/app/app.module.ts
new file mode 100644
index 000000000000..cad301d980cc
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/app.module.ts
@@ -0,0 +1,34 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+/* App Root */
+import { AppComponent } from './app.component';
+
+/* Feature Modules */
+import { ContactModule } from './contact/contact.module';
+// #docregion import-for-root
+import { CoreModule } from './core/core.module';
+// #enddocregion import-for-root
+
+/* Routing Module */
+import { AppRoutingModule } from './app-routing.module';
+
+
+// #docregion import-for-root
+@NgModule({
+  imports: [
+    BrowserModule,
+    ContactModule,
+    CoreModule.forRoot({userName: 'Miss Marple'}),
+    AppRoutingModule
+  ],
+  // #enddocregion import-for-root
+  providers: [],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [AppComponent]
+  // #docregion import-for-root
+})
+export class AppModule { }
+// #enddocregion import-for-root
diff --git a/aio/content/examples/ngmodules/src/app/contact/contact-routing.module.ts b/aio/content/examples/ngmodules/src/app/contact/contact-routing.module.ts
new file mode 100644
index 000000000000..1bd2521873b3
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/contact/contact-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule }            from '@angular/core';
+import { RouterModule }        from '@angular/router';
+
+import { ContactComponent }    from './contact.component';
+
+const routes = [
+  { path: 'contact', component: ContactComponent}
+];
+
+@NgModule({
+  imports: [ RouterModule.forChild(routes) ],
+  exports: [ RouterModule ]
+})
+export class ContactRoutingModule {}
+
diff --git a/aio/content/examples/ngmodules/src/app/contact/contact.component.css b/aio/content/examples/ngmodules/src/app/contact/contact.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/ngmodules/src/app/contact/contact.component.html b/aio/content/examples/ngmodules/src/app/contact/contact.component.html
new file mode 100644
index 000000000000..bd5edd904c44
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/contact/contact.component.html
@@ -0,0 +1,32 @@
+
+<h2>Contact of {{userName}}</h2>
+<div *ngIf="msg" class="msg">{{msg}}</div>
+
+<form *ngIf="contacts" (ngSubmit)="onSubmit()" #contactForm="ngForm">
+  <h3 highlight>{{ contact.name | awesome }}</h3>
+
+  <div class="form-group">
+    <label for="name">Name</label>
+
+    <input type="text" class="form-control" required
+    [(ngModel)]="contact.name"
+    name="name"  #name="ngModel" >
+
+    <div [hidden]="name.valid" class="alert alert-danger">
+      Name is required
+    </div>
+  </div>
+
+  <div class="button-group">
+    <button type="submit" class="btn btn-default"
+    [disabled]="!contactForm.form.valid">
+    Save</button>
+
+    <button type="button" class="btn" (click)="next()"
+    [disabled]="!contactForm.form.valid">
+    Next Contact</button>
+
+    <button type="button" class="btn" (click)="newContact()">
+    New Contact</button>
+  </div>
+</form>
diff --git a/aio/content/examples/ngmodules/src/app/contact/contact.component.spec.ts b/aio/content/examples/ngmodules/src/app/contact/contact.component.spec.ts
new file mode 100644
index 000000000000..427633e0a0b8
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/contact/contact.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/ngmodules/src/app/contact/contact.component.ts b/aio/content/examples/ngmodules/src/app/contact/contact.component.ts
new file mode 100644
index 000000000000..2c4c083ba2f6
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/contact/contact.component.ts
@@ -0,0 +1,54 @@
+// Exact copy except import UserService from core
+import { Component, OnInit }      from '@angular/core';
+
+import { Contact, ContactService } from './contact.service';
+import { UserService }             from '../core/user.service';
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.component.html',
+  styleUrls: [ './contact.component.css' ]
+})
+export class ContactComponent implements OnInit {
+  contact:  Contact;
+  contacts: Contact[];
+
+  msg = 'Loading contacts ...';
+  userName = '';
+
+  constructor(private contactService: ContactService, userService: UserService) {
+    this.userName = userService.userName;
+  }
+
+  ngOnInit() {
+    this.contactService.getContacts().subscribe(contacts => {
+      this.msg = '';
+      this.contacts = contacts;
+      this.contact = contacts[0];
+    });
+  }
+
+  next() {
+    let ix = 1 + this.contacts.indexOf(this.contact);
+    if (ix >= this.contacts.length) { ix = 0; }
+    this.contact = this.contacts[ix];
+  }
+
+  onSubmit() {
+    // POST-DEMO TODO: do something like save it
+    this.displayMessage('Saved ' + this.contact.name);
+  }
+
+  newContact() {
+    this.displayMessage('New contact');
+    this.contact = {id: 42, name: ''};
+    this.contacts.push(this.contact);
+  }
+
+  /** Display a message briefly, then remove it. */
+  displayMessage(msg: string) {
+    this.msg = msg;
+    setTimeout(() => this.msg = '', 1500);
+  }
+}
+
diff --git a/aio/content/examples/ngmodules/src/app/contact/contact.module.ts b/aio/content/examples/ngmodules/src/app/contact/contact.module.ts
new file mode 100644
index 000000000000..008f82433a18
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/contact/contact.module.ts
@@ -0,0 +1,16 @@
+import { NgModule }           from '@angular/core';
+import { SharedModule }       from '../shared/shared.module';
+
+import { ContactComponent }     from './contact.component';
+import { ContactService }       from './contact.service';
+import { ContactRoutingModule } from './contact-routing.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    ContactRoutingModule
+  ],
+  declarations: [ ContactComponent ],
+  providers:    [ ContactService ]
+})
+export class ContactModule { }
diff --git a/aio/content/examples/ngmodules/src/app/contact/contact.service.ts b/aio/content/examples/ngmodules/src/app/contact/contact.service.ts
new file mode 100644
index 000000000000..a140538ad97f
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/contact/contact.service.ts
@@ -0,0 +1,35 @@
+import { Injectable, OnDestroy } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+import { delay }      from 'rxjs/operators';
+
+export class Contact {
+  constructor(public id: number, public name: string) { }
+}
+
+const CONTACTS: Contact[] = [
+  new Contact(21, 'Yasha'),
+  new Contact(22, 'Iulia'),
+  new Contact(23, 'Karina')
+];
+
+const FETCH_LATENCY = 500;
+
+/** Simulate a data service that retrieves contacts from a server */
+@Injectable()
+export class ContactService implements OnDestroy {
+
+  constructor() { console.log('ContactService instance created.'); }
+  ngOnDestroy() { console.log('ContactService instance destroyed.'); }
+
+  getContacts(): Observable<Contact[]>  {
+    return of(CONTACTS).pipe(delay(FETCH_LATENCY));
+  }
+
+  getContact(id: number | string): Observable<Contact> {
+    const contact$ = of(CONTACTS.find(contact => contact.id === +id));
+    return contact$.pipe(delay(FETCH_LATENCY));
+  }
+}
+
+
diff --git a/aio/content/examples/ngmodules/src/app/core/core.module.ts b/aio/content/examples/ngmodules/src/app/core/core.module.ts
new file mode 100644
index 000000000000..0d4c80fe7405
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/core/core.module.ts
@@ -0,0 +1,46 @@
+// #docregion whole-core-module
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+
+import { TitleComponent } from './title.component';
+// #docregion user-service
+import { UserService } from './user.service';
+// #enddocregion user-service
+import { UserServiceConfig } from './user.service';
+
+
+// #docregion user-service
+@NgModule({
+  // #enddocregion user-service
+  imports:      [ CommonModule ],
+  declarations: [ TitleComponent ],
+  exports:      [ TitleComponent ],
+  // #docregion user-service
+  providers:    [ UserService ]
+})
+export class CoreModule {
+  // #enddocregion user-service
+  // #docregion ctor
+  constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
+    if (parentModule) {
+      throw new Error(
+        'CoreModule is already loaded. Import it in the AppModule only');
+    }
+  }
+  // #enddocregion ctor
+
+  // #docregion for-root
+  static forRoot(config: UserServiceConfig): ModuleWithProviders {
+    return {
+      ngModule: CoreModule,
+      providers: [
+        {provide: UserServiceConfig, useValue: config }
+      ]
+    };
+  }
+  // #enddocregion for-root
+  // #docregion user-service
+}
+// #enddocregion user-service
+// #enddocregion whole-core-module
diff --git a/aio/content/examples/ngmodules/src/app/core/title.component.html b/aio/content/examples/ngmodules/src/app/core/title.component.html
new file mode 100644
index 000000000000..ff1975fd6876
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/core/title.component.html
@@ -0,0 +1,4 @@
+<h1>{{title}}</h1>
+<p *ngIf="user">
+  <i>Welcome, {{user}}</i>
+<p>
diff --git a/aio/content/examples/ngmodules/src/app/core/title.component.ts b/aio/content/examples/ngmodules/src/app/core/title.component.ts
new file mode 100644
index 000000000000..979a5803abf3
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/core/title.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { UserService }      from '../core/user.service';
+
+@Component({
+  selector: 'app-title',
+  templateUrl: './title.component.html',
+})
+export class TitleComponent {
+  title = 'NgModules';
+  user = '';
+
+  constructor(userService: UserService) {
+    this.user = userService.userName;
+  }
+}
diff --git a/aio/content/examples/ngmodules/src/app/core/user.service.ts b/aio/content/examples/ngmodules/src/app/core/user.service.ts
new file mode 100644
index 000000000000..d1ab1cd6b33f
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/core/user.service.ts
@@ -0,0 +1,31 @@
+// Proves that UserService is an app-wide singleton and only instantiated once
+// IFF shared.module follows the `forRoot` pattern.
+//
+// If it didn't, a new instance of UserService would be created
+// after each lazy load and the userName would double up.
+
+import { Injectable, Optional } from '@angular/core';
+
+let nextId = 1;
+
+export class UserServiceConfig {
+  userName = 'Philip Marlowe';
+}
+
+@Injectable()
+export class UserService {
+  id = nextId++;
+  private _userName = 'Sherlock Holmes';
+
+  // #docregion ctor
+  constructor(@Optional() config: UserServiceConfig) {
+    if (config) { this._userName = config.userName; }
+  }
+  // #enddocregion ctor
+
+  get userName() {
+    // Demo: add a suffix if this service has been created more than once
+    const suffix = this.id > 1 ? ` times ${this.id}` : '';
+    return this._userName + suffix;
+  }
+}
diff --git a/aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts b/aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts
new file mode 100644
index 000000000000..11683c9d685d
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute }    from '@angular/router';
+
+import { Customer,
+         CustomersService }    from './customers.service';
+
+@Component({
+  template: `
+    <h3 highlight>Customer Detail</h3>
+    <div *ngIf="customer">
+      <div>Id: {{customer.id}}</div><br>
+      <label>Name:
+        <input [(ngModel)]="customer.name">
+      </label>
+    </div>
+    <br>
+    <a routerLink="../">Customer List</a>
+  `
+})
+export class CustomersDetailComponent implements OnInit {
+  customer: Customer;
+
+  constructor(
+    private route: ActivatedRoute,
+    private customersService: CustomersService) { }
+
+  ngOnInit() {
+    let id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
+    this.customersService.getCustomer(id).subscribe(customer => this.customer = customer);
+  }
+}
diff --git a/aio/content/examples/ngmodules/src/app/customers/customers-list.component.ts b/aio/content/examples/ngmodules/src/app/customers/customers-list.component.ts
new file mode 100644
index 000000000000..d29ef6dcfd99
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/customers/customers-list.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { Customer,
+         CustomersService } from './customers.service';
+
+@Component({
+  template: `
+    <h3 highlight>Customer List</h3>
+    <div *ngFor='let customer of customers | async'>
+      <a routerLink="{{customer.id}}">{{customer.id}} - {{customer.name}}</a>
+    </div>
+  `
+})
+
+export class CustomersListComponent {
+  customers: Observable<Customer[]>;
+  constructor(private customersService: CustomersService) {
+    this.customers = this.customersService.getCustomers();
+  }
+}
+
diff --git a/aio/content/examples/ngmodules/src/app/customers/customers-routing.module.ts b/aio/content/examples/ngmodules/src/app/customers/customers-routing.module.ts
new file mode 100644
index 000000000000..3d268d46b6a2
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/customers/customers-routing.module.ts
@@ -0,0 +1,23 @@
+import { NgModule }     from '@angular/core';
+import { Routes,
+         RouterModule } from '@angular/router';
+
+import { CustomersComponent }       from './customers.component';
+import { CustomersListComponent }   from './customers-list.component';
+import { CustomersDetailComponent } from './customers-detail.component';
+
+const routes: Routes = [
+  { path: '',
+    component: CustomersComponent,
+    children: [
+      { path: '',    component: CustomersListComponent },
+      { path: ':id', component: CustomersDetailComponent }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CustomersRoutingModule {}
diff --git a/aio/content/examples/ngmodules/src/app/customers/customers.component.ts b/aio/content/examples/ngmodules/src/app/customers/customers.component.ts
new file mode 100644
index 000000000000..a32ea8871228
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/customers/customers.component.ts
@@ -0,0 +1,19 @@
+import { Component }   from '@angular/core';
+
+import { CustomersService } from './customers.service';
+import { UserService } from '../core/user.service';
+
+@Component({
+  template: `
+    <h2>Customers of {{userName}}</h2>
+    <router-outlet></router-outlet>
+  `,
+  providers: [ UserService ]
+})
+export class CustomersComponent {
+  userName = '';
+  constructor(userService: UserService) {
+    this.userName = userService.userName;
+  }
+}
+
diff --git a/aio/content/examples/ngmodules/src/app/customers/customers.module.ts b/aio/content/examples/ngmodules/src/app/customers/customers.module.ts
new file mode 100644
index 000000000000..3249b16ac7c2
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/customers/customers.module.ts
@@ -0,0 +1,19 @@
+import { NgModule }            from '@angular/core';
+
+import { SharedModule }        from '../shared/shared.module';
+
+import { CustomersComponent }       from './customers.component';
+import { CustomersDetailComponent } from './customers-detail.component';
+import { CustomersListComponent }   from './customers-list.component';
+import { CustomersRoutingModule }   from './customers-routing.module';
+import { CustomersService }   from './customers.service';
+
+
+@NgModule({
+  imports: [ SharedModule, CustomersRoutingModule ],
+  declarations: [
+    CustomersComponent, CustomersDetailComponent, CustomersListComponent,
+  ],
+  providers: [CustomersService]
+})
+export class CustomersModule { }
diff --git a/aio/content/examples/ngmodules/src/app/customers/customers.service.ts b/aio/content/examples/ngmodules/src/app/customers/customers.service.ts
new file mode 100644
index 000000000000..0e4d50960b60
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/customers/customers.service.ts
@@ -0,0 +1,36 @@
+import { Injectable, OnDestroy } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+import { delay }      from 'rxjs/operators';
+
+export class Customer {
+  constructor(public id: number, public name: string) { }
+}
+
+const CUSTOMERS: Customer[] = [
+  new Customer(11, 'Julian'),
+  new Customer(12, 'Eric'),
+  new Customer(13, 'Momi'),
+  new Customer(14, 'Madeleine'),
+  new Customer(15, 'Seth'),
+  new Customer(16, 'Teresa')
+];
+
+const FETCH_LATENCY = 500;
+
+/** Simulate a data service that retrieves heroes from a server */
+@Injectable()
+export class CustomersService implements OnDestroy {
+
+  constructor() { console.log('CustomersService instance created.'); }
+  ngOnDestroy() { console.log('CustomersService instance destroyed.'); }
+
+  getCustomers(): Observable<Customer[]>  {
+    return of(CUSTOMERS).pipe(delay(FETCH_LATENCY));
+  }
+
+  getCustomer(id: number | string): Observable<Customer> {
+    const customer$ = of(CUSTOMERS.find(customer => customer.id === +id));
+    return customer$.pipe(delay(FETCH_LATENCY));
+  }
+}
diff --git a/aio/content/examples/ngmodules/src/app/items/items-detail.component.ts b/aio/content/examples/ngmodules/src/app/items/items-detail.component.ts
new file mode 100644
index 000000000000..a4580ad23451
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/items/items-detail.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute }    from '@angular/router';
+
+import { Item,
+  ItemService }     from './items.service';
+
+@Component({
+  template: `
+    <h3 highlight>Item Detail</h3>
+    <div>Item id: {{id}}</div>
+    <br>
+    <a routerLink="../list">Items List</a>
+  `
+})
+export class ItemsDetailComponent implements OnInit {
+  id: number;
+  constructor(private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
+  }
+}
+
diff --git a/aio/content/examples/ngmodules/src/app/items/items-list.component.ts b/aio/content/examples/ngmodules/src/app/items/items-list.component.ts
new file mode 100644
index 000000000000..c4859c93cb1a
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/items/items-list.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable }from 'rxjs';
+
+import { Item,
+         ItemService }     from './items.service';
+
+@Component({
+  template: `
+    <h3 highlight>Items List</h3>
+    <div *ngFor='let item of items | async'>
+      <a routerLink="{{'../' + item.id}}">{{item.id}} - {{item.name}}</a>
+    </div>
+  `
+})
+export class ItemsListComponent {
+  items: Observable<Item[]>;
+
+  constructor(private itemService: ItemService) {
+    this.items = this.itemService.getItems();
+  }
+
+}
+
diff --git a/aio/content/examples/ngmodules/src/app/items/items-routing.module.ts b/aio/content/examples/ngmodules/src/app/items/items-routing.module.ts
new file mode 100644
index 000000000000..55f0947a2350
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/items/items-routing.module.ts
@@ -0,0 +1,19 @@
+import { NgModule }            from '@angular/core';
+import { Routes,
+         RouterModule }        from '@angular/router';
+
+import { ItemsListComponent }    from './items-list.component';
+import { ItemsDetailComponent }  from './items-detail.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'list', pathMatch: 'full'},
+  { path: 'list',    component: ItemsListComponent },
+  { path: ':id', component: ItemsDetailComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ItemsRoutingModule {}
+
diff --git a/aio/content/examples/ngmodules/src/app/items/items.component.css b/aio/content/examples/ngmodules/src/app/items/items.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/ngmodules/src/app/items/items.component.html b/aio/content/examples/ngmodules/src/app/items/items.component.html
new file mode 100644
index 000000000000..c919a92a2a59
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/items/items.component.html
@@ -0,0 +1,3 @@
+<p>
+  items works!
+</p>
diff --git a/aio/content/examples/ngmodules/src/app/items/items.component.spec.ts b/aio/content/examples/ngmodules/src/app/items/items.component.spec.ts
new file mode 100644
index 000000000000..b77cce74ec47
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/items/items.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemsComponent } from './items.component';
+
+describe('ItemsComponent', () => {
+  let component: ItemsComponent;
+  let fixture: ComponentFixture<ItemsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/ngmodules/src/app/items/items.component.ts b/aio/content/examples/ngmodules/src/app/items/items.component.ts
new file mode 100644
index 000000000000..26696de194b5
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/items/items.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-items',
+  templateUrl: './items.component.html',
+  styleUrls: ['./items.component.css']
+})
+export class ItemsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/ngmodules/src/app/items/items.module.ts b/aio/content/examples/ngmodules/src/app/items/items.module.ts
new file mode 100644
index 000000000000..bc749b582a72
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/items/items.module.ts
@@ -0,0 +1,15 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+
+import { ItemsComponent } from './items.component';
+import { ItemsListComponent }    from './items-list.component';
+import { ItemsDetailComponent }  from './items-detail.component';
+import { ItemService }          from './items.service';
+import { ItemsRoutingModule }    from './items-routing.module';
+
+@NgModule({
+  imports:      [ CommonModule, ItemsRoutingModule ],
+  declarations: [ ItemsComponent, ItemsDetailComponent, ItemsListComponent ],
+  providers:    [ ItemService ]
+})
+export class ItemsModule {}
diff --git a/aio/content/examples/ngmodules/src/app/items/items.service.ts b/aio/content/examples/ngmodules/src/app/items/items.service.ts
new file mode 100644
index 000000000000..39968b452f0c
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/items/items.service.ts
@@ -0,0 +1,36 @@
+import { Injectable, OnDestroy } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+import { delay }      from 'rxjs/operators';
+
+export class Item {
+  constructor(public id: number, public name: string) { }
+}
+
+const ITEMS: Item[] = [
+  new Item(1, 'Sticky notes'),
+  new Item(2, 'Dry erase markers'),
+  new Item(3, 'Erasers'),
+  new Item(4, 'Whiteboard cleaner'),
+];
+
+const FETCH_LATENCY = 500;
+
+/** Simulate a data service that retrieves crises from a server */
+@Injectable()
+export class ItemService implements OnDestroy {
+
+  constructor() { console.log('ItemService instance created.'); }
+  ngOnDestroy() { console.log('ItemService instance destroyed.'); }
+
+  getItems(): Observable<Item[]>  {
+    return of(ITEMS).pipe(delay(FETCH_LATENCY));
+  }
+
+  getItem(id: number | string): Observable<Item> {
+    const item$ = of(ITEMS.find(item => item.id === +id));
+    return item$.pipe(delay(FETCH_LATENCY));
+  }
+}
+
+
diff --git a/aio/content/examples/ngmodules/src/app/shared/awesome.pipe.ts b/aio/content/examples/ngmodules/src/app/shared/awesome.pipe.ts
new file mode 100644
index 000000000000..ffe4949f214c
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/shared/awesome.pipe.ts
@@ -0,0 +1,9 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'awesome' })
+/** Precede the input string with the word "Awesome " */
+export class AwesomePipe implements PipeTransform {
+  transform(phrase: string) {
+    return phrase ? 'Awesome ' + phrase : '';
+  }
+}
diff --git a/aio/content/examples/ngmodules/src/app/shared/highlight.directive.ts b/aio/content/examples/ngmodules/src/app/shared/highlight.directive.ts
new file mode 100644
index 000000000000..7210ddbf1630
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/shared/highlight.directive.ts
@@ -0,0 +1,13 @@
+/* tslint:disable */
+// Exact copy of contact/highlight.directive except for color and message
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({ selector: '[highlight], input' })
+/** Highlight the attached element or an InputElement in gray */
+export class HighlightDirective {
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = '#efeeed';
+    console.log(
+      `* Shared highlight called for ${el.nativeElement.tagName}`);
+  }
+}
diff --git a/aio/content/examples/ngmodules/src/app/shared/shared.module.ts b/aio/content/examples/ngmodules/src/app/shared/shared.module.ts
new file mode 100644
index 000000000000..477f170c1254
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/shared/shared.module.ts
@@ -0,0 +1,14 @@
+import { NgModule }            from '@angular/core';
+import { CommonModule }        from '@angular/common';
+import { FormsModule }         from '@angular/forms';
+
+import { AwesomePipe }         from './awesome.pipe';
+import { HighlightDirective }  from './highlight.directive';
+
+@NgModule({
+  imports:      [ CommonModule ],
+  declarations: [ AwesomePipe, HighlightDirective ],
+  exports:      [ AwesomePipe, HighlightDirective,
+                  CommonModule, FormsModule ]
+})
+export class SharedModule { }
diff --git a/aio/content/examples/ngmodules/src/index.html b/aio/content/examples/ngmodules/src/index.html
new file mode 100644
index 000000000000..5e908028fe26
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>NgmodulesExample</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>
diff --git a/aio/content/examples/ngmodules/src/main.ts b/aio/content/examples/ngmodules/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodules/stackblitz.json b/aio/content/examples/ngmodules/stackblitz.json
new file mode 100644
index 000000000000..6bc4252b821f
--- /dev/null
+++ b/aio/content/examples/ngmodules/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "NgModules",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["NgModules"]
+}
diff --git a/aio/content/examples/observables-in-angular/example-config.json b/aio/content/examples/observables-in-angular/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/observables-in-angular/src/main.ts b/aio/content/examples/observables-in-angular/src/main.ts
new file mode 100644
index 000000000000..c5e95560f50d
--- /dev/null
+++ b/aio/content/examples/observables-in-angular/src/main.ts
@@ -0,0 +1,131 @@
+
+import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core';
+import { Observable } from 'rxjs';
+
+// #docregion eventemitter
+
+@Component({
+  selector: 'zippy',
+  template: `
+  <div class="zippy">
+    <div (click)="toggle()">Toggle</div>
+    <div [hidden]="!visible">
+      <ng-content></ng-content>
+    </div>
+  </div>`})
+
+export class ZippyComponent {
+  visible = true;
+  @Output() open = new EventEmitter<any>();
+  @Output() close = new EventEmitter<any>();
+
+  toggle() {
+    this.visible = !this.visible;
+    if (this.visible) {
+      this.open.emit(null);
+    } else {
+      this.close.emit(null);
+    }
+  }
+}
+
+// #enddocregion eventemitter
+
+// #docregion pipe
+
+@Component({
+  selector: 'async-observable-pipe',
+  template: `<div><code>observable|async</code>:
+       Time: {{ time | async }}</div>`
+})
+export class AsyncObservablePipeComponent {
+  time = new Observable(observer =>
+    setInterval(() => observer.next(new Date().toString()), 1000)
+  );
+}
+
+// #enddocregion pipe
+
+// #docregion router
+
+import { Router, NavigationStart } from '@angular/router';
+import { filter } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-routable',
+  templateUrl: './routable.component.html',
+  styleUrls: ['./routable.component.css']
+})
+export class Routable1Component implements OnInit {
+
+  navStart: Observable<NavigationStart>;
+
+  constructor(private router: Router) {
+    // Create a new Observable the publishes only the NavigationStart event
+    this.navStart = router.events.pipe(
+      filter(evt => evt instanceof NavigationStart)
+    ) as Observable<NavigationStart>;
+  }
+
+  ngOnInit() {
+    this.navStart.subscribe(evt => console.log('Navigation Started!'));
+  }
+}
+
+// #enddocregion router
+
+
+// #docregion activated_route
+
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-routable',
+  templateUrl: './routable.component.html',
+  styleUrls: ['./routable.component.css']
+})
+export class Routable2Component implements OnInit {
+  constructor(private activatedRoute: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.activatedRoute.url
+      .subscribe(url => console.log('The URL changed to: ' + url));
+  }
+}
+
+// #enddocregion activated_route
+
+
+// #docregion forms
+
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'my-component',
+  template: 'MyComponent Template'
+})
+export class MyComponent implements OnInit {
+  nameChangeLog: string[] = [];
+  heroForm: FormGroup;
+
+  ngOnInit() {
+    this.logNameChange();
+  }
+  logNameChange() {
+    const nameControl = this.heroForm.get('name');
+    nameControl.valueChanges.forEach(
+      (value: string) => this.nameChangeLog.push(value)
+    );
+  }
+}
+
+// #enddocregion forms
+
+
+
+@NgModule({
+  declarations:
+      [ZippyComponent, AsyncObservablePipeComponent, Routable1Component, Routable2Component, MyComponent]
+})
+export class AppModule {
+}
diff --git a/aio/content/examples/observables/example-config.json b/aio/content/examples/observables/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/observables/src/creating.ts b/aio/content/examples/observables/src/creating.ts
new file mode 100644
index 000000000000..83003b99bfec
--- /dev/null
+++ b/aio/content/examples/observables/src/creating.ts
@@ -0,0 +1,66 @@
+
+import { Observable } from 'rxjs';
+
+// #docregion subscriber
+
+// This function runs when subscribe() is called
+function sequenceSubscriber(observer) {
+  // synchronously deliver 1, 2, and 3, then complete
+  observer.next(1);
+  observer.next(2);
+  observer.next(3);
+  observer.complete();
+
+  // unsubscribe function doesn't need to do anything in this
+  // because values are delivered synchronously
+  return {unsubscribe() {}};
+}
+
+// Create a new Observable that will deliver the above sequence
+const sequence = new Observable(sequenceSubscriber);
+
+// execute the Observable and print the result of each notification
+sequence.subscribe({
+  next(num) { console.log(num); },
+  complete() { console.log('Finished sequence'); }
+});
+
+// Logs:
+// 1
+// 2
+// 3
+// Finished sequence
+
+// #enddocregion subscriber
+
+// #docregion fromevent
+
+function fromEvent(target, eventName) {
+  return new Observable((observer) => {
+    const handler = (e) => observer.next(e);
+
+    // Add the event handler to the target
+    target.addEventListener(eventName, handler);
+
+    return () => {
+      // Detach the event handler from the target
+      target.removeEventListener(eventName, handler);
+    };
+  });
+}
+
+// #enddocregion fromevent
+
+// #docregion fromevent_use
+
+const ESC_KEY = 27;
+const nameInput = document.getElementById('name') as HTMLInputElement;
+
+const subscription = fromEvent(nameInput, 'keydown')
+  .subscribe((e: KeyboardEvent) => {
+    if (e.keyCode === ESC_KEY) {
+      nameInput.value = '';
+    }
+  });
+
+// #enddocregion fromevent_use
diff --git a/aio/content/examples/observables/src/geolocation.ts b/aio/content/examples/observables/src/geolocation.ts
new file mode 100644
index 000000000000..7210a51e1d3d
--- /dev/null
+++ b/aio/content/examples/observables/src/geolocation.ts
@@ -0,0 +1,32 @@
+import { Observable } from 'rxjs';
+
+// #docregion
+
+// Create an Observable that will start listening to geolocation updates
+// when a consumer subscribes.
+const locations = new Observable((observer) => {
+  // Get the next and error callbacks. These will be passed in when
+  // the consumer subscribes.
+  const {next, error} = observer;
+  let watchId;
+
+  // Simple geolocation API check provides values to publish
+  if ('geolocation' in navigator) {
+    watchId = navigator.geolocation.watchPosition(next, error);
+  } else {
+    error('Geolocation not available');
+  }
+
+  // When the consumer unsubscribes, clean up data ready for next subscription.
+  return {unsubscribe() { navigator.geolocation.clearWatch(watchId); }};
+});
+
+// Call subscribe() to start listening for updates.
+const locationsSubscription = locations.subscribe({
+  next(position) { console.log('Current Position: ', position); },
+  error(msg) { console.log('Error Getting Location: ', msg); }
+});
+
+// Stop listening for location after 10 seconds
+setTimeout(() => { locationsSubscription.unsubscribe(); }, 10000);
+// #enddocregion
diff --git a/aio/content/examples/observables/src/main.ts b/aio/content/examples/observables/src/main.ts
new file mode 100644
index 000000000000..31bacebf1120
--- /dev/null
+++ b/aio/content/examples/observables/src/main.ts
@@ -0,0 +1,5 @@
+
+import './geolocation';
+import './subscribing';
+import './creating';
+import './multicasting';
diff --git a/aio/content/examples/observables/src/multicasting.ts b/aio/content/examples/observables/src/multicasting.ts
new file mode 100644
index 000000000000..e8275842f05d
--- /dev/null
+++ b/aio/content/examples/observables/src/multicasting.ts
@@ -0,0 +1,155 @@
+
+import { Observable } from 'rxjs';
+
+// #docregion delay_sequence
+
+function sequenceSubscriber(observer) {
+  const seq = [1, 2, 3];
+  let timeoutId;
+
+  // Will run through an array of numbers, emitting one value
+  // per second until it gets to the end of the array.
+  function doSequence(arr, idx) {
+    timeoutId = setTimeout(() => {
+      observer.next(arr[idx]);
+      if (idx === arr.length - 1) {
+        observer.complete();
+      } else {
+        doSequence(arr, ++idx);
+      }
+    }, 1000);
+  }
+
+  doSequence(seq, 0);
+
+  // Unsubscribe should clear the timeout to stop execution
+  return {unsubscribe() {
+    clearTimeout(timeoutId);
+  }};
+}
+
+// Create a new Observable that will deliver the above sequence
+const sequence = new Observable(sequenceSubscriber);
+
+sequence.subscribe({
+  next(num) { console.log(num); },
+  complete() { console.log('Finished sequence'); }
+});
+
+// Logs:
+// (at 1 second): 1
+// (at 2 seconds): 2
+// (at 3 seconds): 3
+// (at 3 seconds): Finished sequence
+
+// #enddocregion delay_sequence
+
+// #docregion subscribe_twice
+
+// Subscribe starts the clock, and will emit after 1 second
+sequence.subscribe({
+  next(num) { console.log('1st subscribe: ' + num); },
+  complete() { console.log('1st sequence finished.'); }
+});
+
+// After 1/2 second, subscribe again.
+setTimeout(() => {
+  sequence.subscribe({
+    next(num) { console.log('2nd subscribe: ' + num); },
+    complete() { console.log('2nd sequence finished.'); }
+  });
+}, 500);
+
+// Logs:
+// (at 1 second): 1st subscribe: 1
+// (at 1.5 seconds): 2nd subscribe: 1
+// (at 2 seconds): 1st subscribe: 2
+// (at 2.5 seconds): 2nd subscribe: 2
+// (at 3 seconds): 1st subscribe: 3
+// (at 3 seconds): 1st sequence finished
+// (at 3.5 seconds): 2nd subscribe: 3
+// (at 3.5 seconds): 2nd sequence finished
+
+// #enddocregion subscribe_twice
+
+// #docregion multicast_sequence
+
+function multicastSequenceSubscriber() {
+  const seq = [1, 2, 3];
+  // Keep track of each observer (one for every active subscription)
+  const observers = [];
+  // Still a single timeoutId because there will only ever be one
+  // set of values being generated, multicasted to each subscriber
+  let timeoutId;
+
+  // Return the subscriber function (runs when subscribe()
+  // function is invoked)
+  return (observer) => {
+    observers.push(observer);
+    // When this is the first subscription, start the sequence
+    if (observers.length === 1) {
+      timeoutId = doSequence({
+        next(val) {
+          // Iterate through observers and notify all subscriptions
+          observers.forEach(obs => obs.next(val));
+        },
+        complete() {
+          // Notify all complete callbacks
+          observers.slice(0).forEach(obs => obs.complete());
+        }
+      }, seq, 0);
+    }
+
+    return {
+      unsubscribe() {
+        // Remove from the observers array so it's no longer notified
+        observers.splice(observers.indexOf(observer), 1);
+        // If there's no more listeners, do cleanup
+        if (observers.length === 0) {
+          clearTimeout(timeoutId);
+        }
+      }
+    };
+  };
+}
+
+// Run through an array of numbers, emitting one value
+// per second until it gets to the end of the array.
+function doSequence(observer, arr, idx) {
+  return setTimeout(() => {
+    observer.next(arr[idx]);
+    if (idx === arr.length - 1) {
+      observer.complete();
+    } else {
+      doSequence(observer, arr, ++idx);
+    }
+  }, 1000);
+}
+
+// Create a new Observable that will deliver the above sequence
+const multicastSequence = new Observable(multicastSequenceSubscriber());
+
+// Subscribe starts the clock, and begins to emit after 1 second
+multicastSequence.subscribe({
+  next(num) { console.log('1st subscribe: ' + num); },
+  complete() { console.log('1st sequence finished.'); }
+});
+
+// After 1 1/2 seconds, subscribe again (should "miss" the first value).
+setTimeout(() => {
+  multicastSequence.subscribe({
+    next(num) { console.log('2nd subscribe: ' + num); },
+    complete() { console.log('2nd sequence finished.'); }
+  });
+}, 1500);
+
+// Logs:
+// (at 1 second): 1st subscribe: 1
+// (at 2 seconds): 1st subscribe: 2
+// (at 2 seconds): 2nd subscribe: 2
+// (at 3 seconds): 1st subscribe: 3
+// (at 3 seconds): 1st sequence finished
+// (at 3 seconds): 2nd subscribe: 3
+// (at 3 seconds): 2nd sequence finished
+
+// #enddocregion multicast_sequence
diff --git a/aio/content/examples/observables/src/subscribing.ts b/aio/content/examples/observables/src/subscribing.ts
new file mode 100644
index 000000000000..4712580b33fb
--- /dev/null
+++ b/aio/content/examples/observables/src/subscribing.ts
@@ -0,0 +1,32 @@
+
+import { Observable, of } from 'rxjs';
+
+// #docregion observer
+
+// Create simple observable that emits three values
+const myObservable = Observable.of(1, 2, 3);
+
+// Create observer object
+const myObserver = {
+  next: x => console.log('Observer got a next value: ' + x),
+  error: err => console.error('Observer got an error: ' + err),
+  complete: () => console.log('Observer got a complete notification'),
+};
+
+// Execute with the observer object
+myObservable.subscribe(myObserver);
+// Logs:
+// Observer got a next value: 1
+// Observer got a next value: 2
+// Observer got a next value: 3
+// Observer got a complete notification
+
+// #enddocregion observer
+
+// #docregion sub_fn
+myObservable.subscribe(
+  x => console.log('Observer got a next value: ' + x),
+  err => console.error('Observer got an error: ' + err),
+  () => console.log('Observer got a complete notification')
+);
+// #enddocregion sub_fn
diff --git a/aio/content/examples/pipes/e2e/src/app.e2e-spec.ts b/aio/content/examples/pipes/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..ec9d15cbdf74
--- /dev/null
+++ b/aio/content/examples/pipes/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,116 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+const { version: angularVersion } = require('@angular/core/package.json');
+
+describe('Pipes', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should open correctly', function () {
+    expect(element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes');
+    expect(element(by.css('app-hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`);
+  });
+
+  it('should show 4 heroes', function () {
+    expect(element.all(by.css('app-hero-list div')).count()).toEqual(4);
+  });
+
+  it('should show a familiar hero in json', function () {
+    expect(element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto');
+  });
+
+  it('should show alternate birthday formats', function () {
+    expect(element(by.cssContainingText('app-root > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()).toBe(true);
+    expect(element(by.cssContainingText('app-root > p', `The hero's birthday is 04/15/88`)).isDisplayed()).toBe(true);
+  });
+
+  it('should be able to toggle birthday formats', function () {
+    let birthDayEle = element(by.css('app-hero-birthday2 > p'));
+    if (angularVersion.indexOf('4.') === 0) { // Breaking change between v4 and v5 (https://github.com/angular/angular/commit/079d884)
+      expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/1988`);
+    } else {
+      expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/88`);
+    }
+    let buttonEle = element(by.cssContainingText('app-hero-birthday2 > button', 'Toggle Format'));
+    expect(buttonEle.isDisplayed()).toBe(true);
+    buttonEle.click().then(function() {
+      expect(birthDayEle.getText()).toEqual(`The hero's birthday is Friday, April 15, 1988`);
+    });
+  });
+
+  it('should be able to chain and compose pipes', function () {
+    let chainedPipeEles = element.all(by.cssContainingText('app-root p', `The chained hero's`));
+    expect(chainedPipeEles.count()).toBe(3, 'should have 3 chained pipe examples');
+    expect(chainedPipeEles.get(0).getText()).toContain('APR 15, 1988');
+    expect(chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988');
+    expect(chainedPipeEles.get(2).getText()).toContain('FRIDAY, APRIL 15, 1988');
+  });
+
+  it('should be able to use ExponentialStrengthPipe pipe', function () {
+    let ele = element(by.css('app-power-booster p'));
+    expect(ele.getText()).toContain('Super power boost: 1024');
+  });
+
+  it('should be able to use the exponential calculator', function () {
+    let eles = element.all(by.css('app-power-boost-calculator input'));
+    let baseInputEle = eles.get(0);
+    let factorInputEle = eles.get(1);
+    let outputEle = element(by.css('app-power-boost-calculator p'));
+    baseInputEle.clear().then(function() {
+      baseInputEle.sendKeys('7');
+      return factorInputEle.clear();
+    }).then(function() {
+      factorInputEle.sendKeys('3');
+      expect(outputEle.getText()).toContain('343');
+    });
+  });
+
+
+  it('should support flying heroes (pure) ', function () {
+    let nameEle = element(by.css('app-flying-heroes input[type="text"]'));
+    let canFlyCheckEle = element(by.css('app-flying-heroes #can-fly'));
+    let mutateCheckEle = element(by.css('app-flying-heroes #mutate'));
+    let resetEle = element(by.css('app-flying-heroes button'));
+    let flyingHeroesEle = element.all(by.css('app-flying-heroes #flyers div'));
+
+    expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
+    expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
+    expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
+
+    nameEle.sendKeys('test1\n');
+    expect(flyingHeroesEle.count()).toEqual(2, 'no change while mutating array');
+    mutateCheckEle.click().then(function() {
+      nameEle.sendKeys('test2\n');
+      expect(flyingHeroesEle.count()).toEqual(4, 'not mutating; should see both adds');
+      expect(flyingHeroesEle.get(2).getText()).toContain('test1');
+      expect(flyingHeroesEle.get(3).getText()).toContain('test2');
+      return resetEle.click();
+    })
+    .then(function() {
+       expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes');
+    });
+  });
+
+
+  it('should support flying heroes (impure) ', function () {
+    let nameEle = element(by.css('app-flying-heroes-impure input[type="text"]'));
+    let canFlyCheckEle = element(by.css('app-flying-heroes-impure #can-fly'));
+    let mutateCheckEle = element(by.css('app-flying-heroes-impure #mutate'));
+    let flyingHeroesEle = element.all(by.css('app-flying-heroes-impure #flyers div'));
+
+    expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
+    expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
+    expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
+
+    nameEle.sendKeys('test1\n');
+    expect(flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array');
+  });
+
+  it('should show an async hero message', function () {
+    expect(element.all(by.tagName('app-hero-message')).get(0).getText()).toContain('hero');
+  });
+
+});
diff --git a/aio/content/examples/pipes/example-config.json b/aio/content/examples/pipes/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/pipes/src/app/app.component.html b/aio/content/examples/pipes/src/app/app.component.html
new file mode 100644
index 000000000000..b03b8251bc51
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/app.component.html
@@ -0,0 +1,83 @@
+<a id="toc"></a>
+<h1>Pipes</h1>
+<a href="#happy-birthday1">Happy Birthday v1</a><br>
+<a href="#birthday-date-pipe">Birthday DatePipe</a><br>
+<a href="#happy-birthday2">Happy Birthday v2</a><br>
+<a href="#birthday-pipe-chaining">Birthday Pipe Chaining</a><br>
+<a href="#power-booster">Power Booster custom pipe</a><br>
+<a href="#power-boost-calc">Power Boost Calculator custom pipe with params</a><br>
+<a href="#flying-heroes">Flying Heroes filter pipe (pure)</a><br>
+<a href="#flying-heroes-impure">Flying Heroes filter pipe (impure)</a><br>
+<a href="#hero-message">Async Hero Message and AsyncPipe</a><br>
+<a href="#hero-list">Hero List with caching FetchJsonPipe</a><br>
+
+
+<hr>
+<a id="happy-birthday1"></a>
+<h2>Hero Birthday v1</h2>
+<app-hero-birthday></app-hero-birthday>
+
+<hr>
+<a id="birthday-date-pipe"></a>
+<h2>Birthday DatePipe</h2>
+<!-- #docregion hero-birthday-template -->
+<p>The hero's birthday is {{ birthday | date }}</p>
+<!-- #enddocregion hero-birthday-template-->
+
+<!-- #docregion format-birthday -->
+<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
+<!-- #enddocregion format-birthday-->
+
+<hr>
+<a id="happy-birthday2"></a>
+<h2>Hero Birthday v2</h2>
+<app-hero-birthday2></app-hero-birthday2>
+
+<hr>
+<a id="birthday-pipe-chaining"></a>
+<h2>Birthday Pipe Chaining</h2>
+<p>
+<!-- #docregion chained-birthday -->
+  The chained hero's birthday is
+  {{ birthday | date | uppercase}}
+<!-- #enddocregion chained-birthday -->
+</p>
+
+<p>
+<!-- #docregion chained-parameter-birthday -->
+  The chained hero's birthday is
+  {{  birthday | date:'fullDate' | uppercase}}
+<!-- #enddocregion chained-parameter-birthday -->
+</p>
+<p>
+<!-- #docregion chained-parameter-birthday-parens -->
+  The chained hero's birthday is
+  {{ ( birthday | date:'fullDate' ) | uppercase}}
+<!-- #enddocregion chained-parameter-birthday-parens -->
+</p>
+<hr>
+<a id="power-booster"></a>
+<app-power-booster></app-power-booster>
+
+<hr>
+<a id="power-boost-calc"></a>
+<app-power-boost-calculator>loading</app-power-boost-calculator>
+
+<hr>
+<a id="flying-heroes"></a>
+<app-flying-heroes></app-flying-heroes>
+
+<hr>
+<a id="flying-heroes-impure"></a>
+<app-flying-heroes-impure></app-flying-heroes-impure>
+
+<hr>
+<a id="hero-message"></a>
+<!-- async examples at the top so can see them in action -->
+<app-hero-message></app-hero-message>
+
+<hr>
+<a id="hero-list"></a>
+<app-hero-list></app-hero-list>
+
+<div style="margin-top:12em;"></div>
diff --git a/aio/content/examples/pipes/src/app/app.component.ts b/aio/content/examples/pipes/src/app/app.component.ts
new file mode 100644
index 000000000000..2b739ed2a0c6
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/app.component.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  birthday = new Date(1988, 3, 15); // April 15, 1988
+}
diff --git a/aio/content/examples/pipes/src/app/app.module.ts b/aio/content/examples/pipes/src/app/app.module.ts
new file mode 100644
index 000000000000..8dd502c70212
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/app.module.ts
@@ -0,0 +1,43 @@
+// #docregion
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ExponentialStrengthPipe } from './exponential-strength.pipe';
+import { FetchJsonPipe } from './fetch-json.pipe';
+import { FlyingHeroesComponent, FlyingHeroesImpureComponent } from './flying-heroes.component';
+import { FlyingHeroesImpurePipe, FlyingHeroesPipe } from './flying-heroes.pipe';
+import { HeroAsyncMessageComponent } from './hero-async-message.component';
+import { HeroBirthdayComponent } from './hero-birthday1.component';
+import { HeroBirthday2Component } from './hero-birthday2.component';
+import { HeroListComponent } from './hero-list.component';
+import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
+import { PowerBoosterComponent } from './power-booster.component';
+
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule
+  ],
+  declarations: [
+    AppComponent,
+    FlyingHeroesComponent,
+    FlyingHeroesImpureComponent,
+    HeroAsyncMessageComponent,
+    HeroBirthdayComponent,
+    HeroBirthday2Component,
+    HeroListComponent,
+    PowerBoosterComponent,
+    PowerBoostCalculatorComponent,
+    FlyingHeroesPipe,
+    FlyingHeroesImpurePipe,
+    FetchJsonPipe,
+    ExponentialStrengthPipe
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts b/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts
new file mode 100644
index 000000000000..d277483853c9
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { Pipe, PipeTransform } from '@angular/core';
+/*
+ * Raise the value exponentially
+ * Takes an exponent argument that defaults to 1.
+ * Usage:
+ *   value | exponentialStrength:exponent
+ * Example:
+ *   {{ 2 | exponentialStrength:10 }}
+ *   formats to: 1024
+*/
+@Pipe({name: 'exponentialStrength'})
+export class ExponentialStrengthPipe implements PipeTransform {
+  transform(value: number, exponent: string): number {
+    let exp = parseFloat(exponent);
+    return Math.pow(value, isNaN(exp) ? 1 : exp);
+  }
+}
diff --git a/aio/content/examples/pipes/src/app/fetch-json.pipe.ts b/aio/content/examples/pipes/src/app/fetch-json.pipe.ts
new file mode 100644
index 000000000000..a6696d3b1d04
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/fetch-json.pipe.ts
@@ -0,0 +1,26 @@
+// #docregion
+import { HttpClient }          from '@angular/common/http';
+import { Pipe, PipeTransform } from '@angular/core';
+
+// #docregion pipe-metadata
+@Pipe({
+  name: 'fetch',
+  pure: false
+})
+// #enddocregion pipe-metadata
+export class FetchJsonPipe implements PipeTransform {
+  private cachedData: any = null;
+  private cachedUrl = '';
+
+  constructor(private http: HttpClient) { }
+
+  transform(url: string): any {
+    if (url !== this.cachedUrl) {
+      this.cachedData = null;
+      this.cachedUrl = url;
+      this.http.get(url).subscribe(result => this.cachedData = result);
+    }
+
+    return this.cachedData;
+  }
+}
diff --git a/aio/content/examples/pipes/src/app/flying-heroes-impure.component.html b/aio/content/examples/pipes/src/app/flying-heroes-impure.component.html
new file mode 100644
index 000000000000..66bd86f81cd1
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/flying-heroes-impure.component.html
@@ -0,0 +1,38 @@
+<!-- #docplaster-->
+<!-- #docregion -->
+<h2>{{title}}</h2>
+<p>
+<!-- #docregion template-1 -->
+New hero:
+  <input type="text" #box
+          (keyup.enter)="addHero(box.value); box.value=''"
+          placeholder="hero name">
+<!-- #enddocregion template-1 -->
+  <input id="can-fly" type="checkbox" [(ngModel)]="canFly"> can fly
+</p>
+<p>
+  <input id="mutate" type="checkbox" [(ngModel)]="mutate">Mutate array
+<!-- #docregion template-1 -->
+  <button (click)="reset()">Reset</button>
+<!-- #enddocregion template-1 -->
+</p>
+
+<h4>Heroes who fly (piped)</h4>
+<div id="flyers">
+<!-- #docregion template-flying-heroes -->
+  <div *ngFor="let hero of (heroes | flyingHeroesImpure)">
+    {{hero.name}}
+  </div>
+<!-- #enddocregion template-flying-heroes -->
+</div>
+
+<h4>All Heroes (no pipe)</h4>
+<div id="all">
+<!-- #docregion template-1 -->
+<!-- #docregion template-all-heroes -->
+  <div *ngFor="let hero of heroes">
+    {{hero.name}}
+  </div>
+<!-- #enddocregion template-all-heroes -->
+<!-- #enddocregion template-1 -->
+</div>
diff --git a/aio/content/examples/pipes/src/app/flying-heroes.component.html b/aio/content/examples/pipes/src/app/flying-heroes.component.html
new file mode 100644
index 000000000000..93e635b662ce
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/flying-heroes.component.html
@@ -0,0 +1,38 @@
+<!-- #docplaster-->
+<!-- #docregion -->
+<h2>{{title}}</h2>
+<p>
+<!-- #docregion template-1 -->
+New hero:
+  <input type="text" #box
+          (keyup.enter)="addHero(box.value); box.value=''"
+          placeholder="hero name">
+<!-- #enddocregion template-1 -->
+  <input id="can-fly" type="checkbox" [(ngModel)]="canFly"> can fly
+</p>
+<p>
+  <input id="mutate" type="checkbox" [(ngModel)]="mutate">Mutate array
+<!-- #docregion template-1 -->
+  <button (click)="reset()">Reset</button>
+<!-- #enddocregion template-1 -->
+</p>
+
+<h4>Heroes who fly (piped)</h4>
+<div id="flyers">
+<!-- #docregion template-flying-heroes -->
+  <div *ngFor="let hero of (heroes | flyingHeroes)">
+    {{hero.name}}
+  </div>
+<!-- #enddocregion template-flying-heroes -->
+</div>
+
+<h4>All Heroes (no pipe)</h4>
+<div id="all">
+<!-- #docregion template-1 -->
+<!-- #docregion template-all-heroes -->
+  <div *ngFor="let hero of heroes">
+    {{hero.name}}
+  </div>
+<!-- #enddocregion template-all-heroes -->
+<!-- #enddocregion template-1 -->
+</div>
diff --git a/aio/content/examples/pipes/src/app/flying-heroes.component.ts b/aio/content/examples/pipes/src/app/flying-heroes.component.ts
new file mode 100644
index 000000000000..43474c5ba88b
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/flying-heroes.component.ts
@@ -0,0 +1,61 @@
+// #docplaster
+// #docregion
+import { Component }              from '@angular/core';
+
+import { HEROES }                 from './heroes';
+
+@Component({
+  selector: 'app-flying-heroes',
+  templateUrl: './flying-heroes.component.html',
+  styles: ['#flyers, #all {font-style: italic}']
+})
+// #docregion v1
+export class FlyingHeroesComponent {
+  heroes: any[] = [];
+  canFly = true;
+// #enddocregion v1
+  mutate = true;
+  title = 'Flying Heroes (pure pipe)';
+
+// #docregion v1
+  constructor() { this.reset(); }
+
+  addHero(name: string) {
+    name = name.trim();
+    if (!name) { return; }
+    let hero = {name, canFly: this.canFly};
+// #enddocregion v1
+    if (this.mutate) {
+    // Pure pipe won't update display because heroes array reference is unchanged
+    // Impure pipe will display
+// #docregion v1
+// #docregion push
+    this.heroes.push(hero);
+// #enddocregion push
+// #enddocregion v1
+    } else {
+      // Pipe updates display because heroes array is a new object
+// #docregion concat
+      this.heroes = this.heroes.concat(hero);
+// #enddocregion concat
+    }
+// #docregion v1
+  }
+
+  reset() { this.heroes = HEROES.slice(); }
+}
+// #enddocregion v1
+
+////// Identical except for impure pipe //////
+// #docregion impure-component
+@Component({
+  selector: 'app-flying-heroes-impure',
+  templateUrl: './flying-heroes-impure.component.html',
+// #enddocregion impure-component
+  styles: ['.flyers, .all {font-style: italic}'],
+// #docregion impure-component
+})
+export class FlyingHeroesImpureComponent extends FlyingHeroesComponent {
+  title = 'Flying Heroes (impure pipe)';
+}
+// #enddocregion impure-component
diff --git a/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts b/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts
new file mode 100644
index 000000000000..87db9c277e6c
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts
@@ -0,0 +1,27 @@
+/* tslint:disable use-pipe-transform-interface */
+// #docregion
+// #docregion pure
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { Flyer } from './heroes';
+
+@Pipe({ name: 'flyingHeroes' })
+export class FlyingHeroesPipe implements PipeTransform {
+  transform(allHeroes: Flyer[]) {
+    // #docregion filter
+    return allHeroes.filter(hero => hero.canFly);
+    // #enddocregion filter
+  }
+}
+// #enddocregion pure
+
+/////// Identical except for the pure flag
+// #docregion impure
+// #docregion pipe-decorator
+@Pipe({
+  name: 'flyingHeroesImpure',
+  pure: false
+})
+// #enddocregion pipe-decorator
+export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {}
+// #enddocregion impure
diff --git a/aio/content/examples/pipes/src/app/hero-async-message.component.ts b/aio/content/examples/pipes/src/app/hero-async-message.component.ts
new file mode 100644
index 000000000000..558e916f5383
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/hero-async-message.component.ts
@@ -0,0 +1,39 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { Observable, interval } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-hero-message',
+  template: `
+    <h2>Async Hero Message and AsyncPipe</h2>
+    <p>Message: {{ message$ | async }}</p>
+    <button (click)="resend()">Resend</button>`,
+})
+export class HeroAsyncMessageComponent {
+  message$: Observable<string>;
+
+  private messages = [
+    'You are my hero!',
+    'You are the best hero!',
+    'Will you be my hero?'
+  ];
+
+  constructor() { this.resend(); }
+
+  resend() {
+    this.message$ = interval(500).pipe(
+      map(i => this.messages[i]),
+      take(this.messages.length)
+    );
+  }
+}
+// #enddocregion
+
+// Alternative message$ formula:
+// this.message$ = fromArray(this.messages).pipe(
+//   map(message => timer(500),
+//   map(() => message)),
+//   concatAll()
+// );
diff --git a/aio/content/examples/pipes/src/app/hero-birthday1.component.ts b/aio/content/examples/pipes/src/app/hero-birthday1.component.ts
new file mode 100644
index 000000000000..d51914550f69
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/hero-birthday1.component.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hero-birthday',
+  // #docregion hero-birthday-template
+  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
+  // #enddocregion hero-birthday-template
+})
+export class HeroBirthdayComponent {
+  birthday = new Date(1988, 3, 15); // April 15, 1988
+}
diff --git a/aio/content/examples/pipes/src/app/hero-birthday2.component.ts b/aio/content/examples/pipes/src/app/hero-birthday2.component.ts
new file mode 100644
index 000000000000..ce71c2ab1ee2
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/hero-birthday2.component.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hero-birthday2',
+  // #docregion template
+  template: `
+    <p>The hero's birthday is {{ birthday | date:format }}</p>
+    <button (click)="toggleFormat()">Toggle Format</button>
+  `
+  // #enddocregion template
+})
+// #docregion class
+export class HeroBirthday2Component {
+  birthday = new Date(1988, 3, 15); // April 15, 1988
+  toggle = true; // start with true == shortDate
+
+  get format()   { return this.toggle ? 'shortDate' : 'fullDate'; }
+  toggleFormat() { this.toggle = !this.toggle; }
+}
diff --git a/aio/content/examples/pipes/src/app/hero-list.component.ts b/aio/content/examples/pipes/src/app/hero-list.component.ts
new file mode 100644
index 000000000000..ead6e74d57d8
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/hero-list.component.ts
@@ -0,0 +1,17 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hero-list',
+  template: `
+    <h2>Heroes from JSON File</h2>
+
+    <div *ngFor="let hero of ('assets/heroes.json' | fetch) ">
+      {{hero.name}}
+    </div>
+
+    <p>Heroes as JSON:
+      {{'assets/heroes.json' | fetch | json}}
+    </p>`
+})
+export class HeroListComponent { }
diff --git a/aio/content/examples/pipes/src/app/heroes.ts b/aio/content/examples/pipes/src/app/heroes.ts
new file mode 100644
index 000000000000..b2edabe0daa8
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/heroes.ts
@@ -0,0 +1,7 @@
+export interface Flyer { canFly: boolean; }
+export const HEROES =  [
+  {name: 'Windstorm', canFly: true},
+  {name: 'Bombasto',  canFly: false},
+  {name: 'Magneto',   canFly: false},
+  {name: 'Tornado',   canFly: true}
+];
diff --git a/aio/content/examples/pipes/src/app/power-boost-calculator.component.ts b/aio/content/examples/pipes/src/app/power-boost-calculator.component.ts
new file mode 100644
index 000000000000..5092e1889319
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/power-boost-calculator.component.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-power-boost-calculator',
+  template: `
+    <h2>Power Boost Calculator</h2>
+    <div>Normal power: <input [(ngModel)]="power"></div>
+    <div>Boost factor: <input [(ngModel)]="factor"></div>
+    <p>
+      Super Hero Power: {{power | exponentialStrength: factor}}
+    </p>
+  `
+})
+export class PowerBoostCalculatorComponent {
+  power = 5;
+  factor = 1;
+}
diff --git a/aio/content/examples/pipes/src/app/power-booster.component.ts b/aio/content/examples/pipes/src/app/power-booster.component.ts
new file mode 100644
index 000000000000..b8d395db0f1c
--- /dev/null
+++ b/aio/content/examples/pipes/src/app/power-booster.component.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-power-booster',
+  template: `
+    <h2>Power Booster</h2>
+    <p>Super power boost: {{2 | exponentialStrength: 10}}</p>
+  `
+})
+export class PowerBoosterComponent { }
diff --git a/aio/content/examples/pipes/src/assets/heroes.json b/aio/content/examples/pipes/src/assets/heroes.json
new file mode 100644
index 000000000000..e5f0b77262fb
--- /dev/null
+++ b/aio/content/examples/pipes/src/assets/heroes.json
@@ -0,0 +1,6 @@
+[
+  {"name": "Windstorm", "canFly": true},
+  {"name": "Bombasto",  "canFly": false},
+  {"name": "Magneto",   "canFly": false},
+  {"name": "Tornado",   "canFly": true}
+]
diff --git a/aio/content/examples/pipes/src/index.html b/aio/content/examples/pipes/src/index.html
new file mode 100644
index 000000000000..350026389594
--- /dev/null
+++ b/aio/content/examples/pipes/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Pipes</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/pipes/src/main.ts b/aio/content/examples/pipes/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/pipes/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/pipes/stackblitz.json b/aio/content/examples/pipes/stackblitz.json
new file mode 100644
index 000000000000..a27408cfec17
--- /dev/null
+++ b/aio/content/examples/pipes/stackblitz.json
@@ -0,0 +1,7 @@
+{
+  "description": "Pipes",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"],
+  "tags": ["pipe"]
+}
diff --git a/aio/content/examples/practical-observable-usage/example-config.json b/aio/content/examples/practical-observable-usage/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/practical-observable-usage/src/backoff.ts b/aio/content/examples/practical-observable-usage/src/backoff.ts
new file mode 100644
index 000000000000..97b53845f1cb
--- /dev/null
+++ b/aio/content/examples/practical-observable-usage/src/backoff.ts
@@ -0,0 +1,24 @@
+
+import { pipe, range, timer, zip } from 'rxjs';
+import { ajax } from 'rxjs/ajax';
+import { retryWhen, map, mergeMap } from 'rxjs/operators';
+
+function backoff(maxTries, ms) {
+ return pipe(
+   retryWhen(attempts => range(1, maxTries)
+     .pipe(
+       zip(attempts, (i) => i),
+       map(i => i * i),
+       mergeMap(i =>  timer(i * ms))
+     )
+   )
+ );
+}
+
+ajax('/api/endpoint')
+  .pipe(backoff(3, 250))
+  .subscribe(data => handleData(data));
+
+function handleData(data) {
+  // ...
+}
diff --git a/aio/content/examples/practical-observable-usage/src/main.ts b/aio/content/examples/practical-observable-usage/src/main.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/practical-observable-usage/src/typeahead.ts b/aio/content/examples/practical-observable-usage/src/typeahead.ts
new file mode 100644
index 000000000000..4bde2c66d098
--- /dev/null
+++ b/aio/content/examples/practical-observable-usage/src/typeahead.ts
@@ -0,0 +1,18 @@
+
+import { fromEvent } from 'rxjs';
+import { ajax } from 'rxjs/ajax';
+import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+
+const searchBox = document.getElementById('search-box');
+
+const typeahead = fromEvent(searchBox, 'input').pipe(
+  map((e: KeyboardEvent) => e.target.value),
+  filter(text => text.length > 2),
+  debounceTime(10),
+  distinctUntilChanged(),
+  switchMap(() => ajax('/api/endpoint'))
+);
+
+typeahead.subscribe(data => {
+ // Handle the data from the API
+});
diff --git a/aio/content/examples/providers/e2e/src/app.e2e-spec.ts b/aio/content/examples/providers/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..46108fd9dc04
--- /dev/null
+++ b/aio/content/examples/providers/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,37 @@
+import { AppPage } from './app.po';
+import { browser, element, by } from 'protractor';
+
+describe('providers App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  function getUsersStruct() {
+    return {
+      user: element.all(by.css('ng-component li')).get(0),
+      userId: element.all(by.css('ng-component span')).get(0)
+    };
+  }
+
+  function getListSectionStruct() {
+    return {
+      items: element.all(by.css('app-root li'))
+    };
+  }
+
+  it('should display header that says Users list', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Users list');
+  });
+
+
+  it('shows a list of customers', function() {
+    const list = getListSectionStruct();
+    expect(list.items.count()).toBe(10);
+    expect(list.items.get(0).getText()).toBe('1 Maria');
+    expect(list.items.get(9).getText()).toBe('10 Seth');
+  });
+
+});
diff --git a/aio/content/examples/providers/example-config.json b/aio/content/examples/providers/example-config.json
new file mode 100644
index 000000000000..313764c3c606
--- /dev/null
+++ b/aio/content/examples/providers/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:cli",
+  "run": "serve:cli"
+}
diff --git a/aio/content/examples/providers/src/app/app.component.css b/aio/content/examples/providers/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/providers/src/app/app.component.html b/aio/content/examples/providers/src/app/app.component.html
new file mode 100644
index 000000000000..7763b93ba8fe
--- /dev/null
+++ b/aio/content/examples/providers/src/app/app.component.html
@@ -0,0 +1,7 @@
+<h1>
+  {{title}}
+</h1>
+
+<li *ngFor="let user of users">
+<span >{{user.id}}</span> {{user.name}}
+</li>
diff --git a/aio/content/examples/providers/src/app/app.component.spec.ts b/aio/content/examples/providers/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..13c632d6763e
--- /dev/null
+++ b/aio/content/examples/providers/src/app/app.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  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!');
+  }));
+});
diff --git a/aio/content/examples/providers/src/app/app.component.ts b/aio/content/examples/providers/src/app/app.component.ts
new file mode 100644
index 000000000000..37c8e5358657
--- /dev/null
+++ b/aio/content/examples/providers/src/app/app.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+import { User, UserService } from './user.service';
+
+// #docregion component-providers
+@Component({
+  // #enddocregion component-providers
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  // #docregion component-providers
+  providers: [UserService]
+})
+// #enddocregion component-providers
+export class AppComponent implements OnInit {
+  title = 'Users list';
+  users: User[];
+
+  constructor(private userService: UserService) { }
+
+  ngOnInit(): void {
+    this.userService.getUsers().then(users => this.users = users);
+  }
+
+}
diff --git a/aio/content/examples/providers/src/app/app.module.ts b/aio/content/examples/providers/src/app/app.module.ts
new file mode 100644
index 000000000000..7152c203c8b3
--- /dev/null
+++ b/aio/content/examples/providers/src/app/app.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { UserService } from './user.service';
+
+@NgModule({
+  imports:      [ BrowserModule ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/providers/src/app/user.module.ts b/aio/content/examples/providers/src/app/user.module.ts
new file mode 100644
index 000000000000..0b3b67514b6e
--- /dev/null
+++ b/aio/content/examples/providers/src/app/user.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { UserService } from './user.service';
+
+@NgModule({
+  providers: [UserService],
+})
+export class UserModule {
+}
diff --git a/aio/content/examples/providers/src/app/user.service.0.ts b/aio/content/examples/providers/src/app/user.service.0.ts
new file mode 100644
index 000000000000..8988a99309c4
--- /dev/null
+++ b/aio/content/examples/providers/src/app/user.service.0.ts
@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+}
diff --git a/aio/content/examples/providers/src/app/user.service.1.ts b/aio/content/examples/providers/src/app/user.service.1.ts
new file mode 100644
index 000000000000..64ee94b72d84
--- /dev/null
+++ b/aio/content/examples/providers/src/app/user.service.1.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+import { UserModule } from './user.module';
+
+@Injectable({
+  providedIn: UserModule,
+})
+export class UserService {
+}
diff --git a/aio/content/examples/providers/src/app/user.service.spec.ts b/aio/content/examples/providers/src/app/user.service.spec.ts
new file mode 100644
index 000000000000..dcf556571711
--- /dev/null
+++ b/aio/content/examples/providers/src/app/user.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should ...', inject([UserService], (service: UserService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/aio/content/examples/providers/src/app/user.service.ts b/aio/content/examples/providers/src/app/user.service.ts
new file mode 100644
index 000000000000..096d1c8fb1b8
--- /dev/null
+++ b/aio/content/examples/providers/src/app/user.service.ts
@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+
+export class User {
+  id: number;
+  name: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+
+  constructor() { }
+
+  getUsers(): Promise<User[]> {
+    return Promise.resolve([
+      { id: 1, name: 'Maria' },
+      { id: 2, name: 'Alex' },
+      { id: 3, name: 'Chuntao' },
+      { id: 4, name: 'Béatrice' },
+      { id: 5, name: 'Sarah' },
+      { id: 6, name: 'Andrés' },
+      { id: 7, name: 'Abdul' },
+      { id: 8, name: 'Pierre' },
+      { id: 9, name: 'Jiao' },
+      { id: 10, name: 'Seth' }
+    ]);
+  }
+
+}
diff --git a/aio/content/examples/providers/src/index.html b/aio/content/examples/providers/src/index.html
new file mode 100644
index 000000000000..15d46bb0a78c
--- /dev/null
+++ b/aio/content/examples/providers/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Providers</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>
diff --git a/aio/content/examples/providers/src/main.ts b/aio/content/examples/providers/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/providers/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/providers/stackblitz.json b/aio/content/examples/providers/stackblitz.json
new file mode 100644
index 000000000000..9f21337a0565
--- /dev/null
+++ b/aio/content/examples/providers/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "Providers",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[0,1,2].*"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["providers"]
+}
diff --git a/aio/content/examples/quickstart/bs-config.1.json b/aio/content/examples/quickstart/bs-config.1.json
new file mode 100644
index 000000000000..4e585952675d
--- /dev/null
+++ b/aio/content/examples/quickstart/bs-config.1.json
@@ -0,0 +1,8 @@
+{
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    }
+  }
+}
diff --git a/aio/content/examples/quickstart/e2e-spec.ts b/aio/content/examples/quickstart/e2e-spec.ts
new file mode 100644
index 000000000000..73921707ee09
--- /dev/null
+++ b/aio/content/examples/quickstart/e2e-spec.ts
@@ -0,0 +1,17 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('QuickStart E2E Tests', function () {
+
+  let expectedMsg = 'Hello Angular';
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it(`should display: ${expectedMsg}`, function () {
+    expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
+  });
+
+});
diff --git a/aio/content/examples/quickstart/example-config.json b/aio/content/examples/quickstart/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/quickstart/src/app/app.component.ts b/aio/content/examples/quickstart/src/app/app.component.ts
new file mode 100644
index 000000000000..1ef28fc5c4b2
--- /dev/null
+++ b/aio/content/examples/quickstart/src/app/app.component.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `<h1>Hello {{name}}</h1>`
+})
+export class AppComponent { name = 'Angular'; }
diff --git a/aio/content/examples/quickstart/src/app/app.module.ts b/aio/content/examples/quickstart/src/app/app.module.ts
new file mode 100644
index 000000000000..50a0e6eb47ba
--- /dev/null
+++ b/aio/content/examples/quickstart/src/app/app.module.ts
@@ -0,0 +1,11 @@
+// #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/quickstart/src/index.html b/aio/content/examples/quickstart/src/index.html
new file mode 100644
index 000000000000..21fb56edb951
--- /dev/null
+++ b/aio/content/examples/quickstart/src/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Angular Quickstart</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
+    </style>
+
+    <!-- Polyfills -->
+    <!-- #docregion polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <!-- #enddocregion polyfills -->
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <!-- #docregion my-app-->
+    <my-app>Loading AppComponent content here ...</my-app>
+    <!-- #enddocregion my-app-->
+  </body>
+
+</html>
diff --git a/aio/content/examples/quickstart/src/main.ts b/aio/content/examples/quickstart/src/main.ts
new file mode 100644
index 000000000000..311c44b76de0
--- /dev/null
+++ b/aio/content/examples/quickstart/src/main.ts
@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/quickstart/src/tsconfig.1.json b/aio/content/examples/quickstart/src/tsconfig.1.json
new file mode 100644
index 000000000000..2c7260d1bcdb
--- /dev/null
+++ b/aio/content/examples/quickstart/src/tsconfig.1.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}
diff --git a/aio/content/examples/quickstart/stackblitz.json b/aio/content/examples/quickstart/stackblitz.json
new file mode 100644
index 000000000000..fd606e2ab936
--- /dev/null
+++ b/aio/content/examples/quickstart/stackblitz.json
@@ -0,0 +1,11 @@
+{
+  "description": "QuickStart",
+  "files": [
+    "src/app/app.component.ts",
+    "src/app/app.module.ts",
+    "src/main.ts",
+    "src/index.html"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["quickstart"]
+}
diff --git a/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts b/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..25022d22906d
--- /dev/null
+++ b/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,145 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Reactive forms', function () {
+  const nameEditor = element(by.css('app-name-editor'));
+  const profileEditor = element(by.css('app-profile-editor'));
+  const nameEditorLink = element(by.cssContainingText('app-root > nav > a', 'Name Editor'));
+  const profileEditorLink = element(by.cssContainingText('app-root > nav > a', 'Profile Editor'));
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  describe('Name Editor', function () {
+    const nameInput = nameEditor.element(by.css('input'));
+    const updateButton = nameEditor.element(by.buttonText('Update Name'));
+    const nameText = 'John Smith';
+
+    beforeAll(async () => {
+      await nameEditorLink.click();
+    });
+
+    beforeEach(async () => {
+      await nameInput.clear();
+    });
+
+    it('should update the name value when the name control is updated', async () => {
+      await nameInput.sendKeys(nameText);
+
+      const value = await nameInput.getAttribute('value');
+
+      expect(value).toBe(nameText);
+    });
+
+    it('should update the name control when the Update Name button is clicked', async () => {
+      await nameInput.sendKeys(nameText);
+      const value = await nameInput.getAttribute('value');
+
+      expect(value).toBe(nameText);
+      await updateButton.click();
+
+      const value = await nameInput.getAttribute('value');
+
+      expect(value).toBe('Nancy');
+    });
+
+    it('should update the displayed control value when the name control updated', async () => {
+      await nameInput.sendKeys(nameText);
+      const valueElement = nameEditor.element(by.cssContainingText('p', 'Value:'));
+      const nameValueElement = await valueElement.getText();
+      const nameValue = nameValueElement.toString().replace('Value: ',  '');
+
+      expect(nameValue).toBe(nameText);
+    });
+  });
+
+  describe('Profile Editor', function () {
+    const firstNameInput = getInput('firstName');
+    const lastNameInput = getInput('lastName');
+    const streetInput = getInput('street');
+    const addAliasButton = element(by.buttonText('Add Alias'));
+    const updateButton = profileEditor.element(by.buttonText('Update Profile'));
+    const profile = {
+      firstName: 'John',
+      lastName: 'Smith',
+      street: '345 South Lane',
+      city: 'Northtown',
+      state: 'XX',
+      zip: 12345
+    };
+
+    beforeAll(async () => {
+      await profileEditorLink.click();
+    });
+
+    beforeEach(async () => {
+      await browser.get('');
+      await profileEditorLink.click();
+    });
+
+    it('should be invalid by default', async () => {
+      expect(await profileEditor.getText()).toContain('Form Status: INVALID');
+    });
+
+    it('should be valid if the First Name is filled in', async () => {
+      await firstNameInput.clear();
+      await firstNameInput.sendKeys('John Smith');
+
+      expect(await profileEditor.getText()).toContain('Form Status: VALID');
+    });
+
+    it('should update the name when the button is clicked', async () => {
+      await firstNameInput.clear();
+      await streetInput.clear();
+      await firstNameInput.sendKeys('John');
+      await streetInput.sendKeys('345 Smith Lane');
+      const firstNameInitial = await firstNameInput.getAttribute('value');
+      const streetNameInitial = await streetInput.getAttribute('value');
+
+      expect(firstNameInitial).toBe('John');
+      expect(streetNameInitial).toBe('345 Smith Lane');
+      await updateButton.click();
+
+      const nameValue = await firstNameInput.getAttribute('value');
+      const streetValue = await streetInput.getAttribute('value');
+
+      expect(nameValue).toBe('Nancy');
+      expect(streetValue).toBe('123 Drew Street');
+    });
+
+    it('should add an alias field when the Add Alias button is clicked', async () => {
+      await addAliasButton.click();
+
+      const aliasInputs = profileEditor.all(by.cssContainingText('label', 'Alias'));
+
+      expect(await aliasInputs.count()).toBe(2);
+    });
+
+    it('should update the displayed form value when form inputs are updated', async () => {
+      const aliasText = 'Johnny';
+      const inputs = await Promise.all(
+        Object.keys(profile)
+          .map(key =>
+            getInput(key).sendKeys(`${profile[key]}`)
+          )
+      );
+
+      const aliasInputs = profileEditor.all(by.cssContainingText('label', 'Alias'));
+      const aliasInput = aliasInputs.get(0).element(by.css('input'));
+      await aliasInput.sendKeys(aliasText);
+      const formValueElement = profileEditor.all(by.cssContainingText('p', 'Form Value:'));
+      const formValue = await formValueElement.getText();
+      const formJson = JSON.parse(formValue.toString().replace('Form Value:', ''));
+
+      expect(profile.firstName).toBe(formJson.firstName);
+      expect(profile.lastName).toBe(formJson.lastName);
+      expect(formJson.aliases[0]).toBe(aliasText);
+    });
+  });
+
+  function getInput(key: string) {
+    return element(by.css(`input[formcontrolname=${key}`));
+  }
+});
diff --git a/aio/content/examples/reactive-forms/example-config.json b/aio/content/examples/reactive-forms/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.1.html b/aio/content/examples/reactive-forms/src/app/app.component.1.html
new file mode 100644
index 000000000000..57ca7e22fbe7
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/app.component.1.html
@@ -0,0 +1,10 @@
+<!-- #docplaster -->
+<h1>Reactive Forms</h1>
+
+<!-- #docregion app-name-editor-->
+<app-name-editor></app-name-editor>
+<!-- #enddocregion app-name-editor-->
+
+<!-- #docregion app-profile-editor -->
+<app-profile-editor></app-profile-editor>
+<!-- #enddocregion app-profile-editor -->
\ No newline at end of file
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.css b/aio/content/examples/reactive-forms/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.html b/aio/content/examples/reactive-forms/src/app/app.component.html
new file mode 100644
index 000000000000..a953480634d9
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/app.component.html
@@ -0,0 +1,17 @@
+<!-- #docplaster -->
+<!-- #docregion app-name-editor -->
+<h1>Reactive Forms</h1>
+
+<!-- #enddocregion app-name-editor -->
+<nav>
+  <a (click)="toggleEditor('name')">Name Editor</a>
+  <a (click)="toggleEditor('profile')">Profile Editor</a>
+</nav>
+
+<!-- #docregion app-name-editor -->
+<app-name-editor *ngIf="showNameEditor"></app-name-editor>
+<!-- #enddocregion app-name-editor -->
+
+<!-- #docregion app-profile-editor -->
+<app-profile-editor *ngIf="showProfileEditor"></app-profile-editor>
+<!-- #enddocregion app-profile-editor -->
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.spec.ts b/aio/content/examples/reactive-forms/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..fff9fa666d59
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    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('Welcome to reactive-forms!');
+  }));
+});
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.ts b/aio/content/examples/reactive-forms/src/app/app.component.ts
new file mode 100644
index 000000000000..5c9993b6b646
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/app.component.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+export type EditorType = 'name' | 'profile';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  editor: EditorType = 'name';
+
+  get showNameEditor() {
+    return this.editor === 'name';
+  }
+
+  get showProfileEditor() {
+    return this.editor === 'profile';
+  }
+
+  toggleEditor(type: EditorType) {
+    this.editor = type;
+  }
+}
diff --git a/aio/content/examples/reactive-forms/src/app/app.module.ts b/aio/content/examples/reactive-forms/src/app/app.module.ts
new file mode 100644
index 000000000000..9ccc26e4af4e
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/app.module.ts
@@ -0,0 +1,34 @@
+// #docplaster
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+// #docregion imports
+import { ReactiveFormsModule } from '@angular/forms';
+
+// #enddocregion imports
+import { AppComponent } from './app.component';
+import { NameEditorComponent } from './name-editor/name-editor.component';
+import { ProfileEditorComponent } from './profile-editor/profile-editor.component';
+
+// #docregion imports
+@NgModule({
+// #enddocregion imports
+  declarations: [
+    AppComponent,
+    NameEditorComponent,
+    ProfileEditorComponent
+  ],
+// #docregion imports
+  imports: [
+// #enddocregion imports
+    BrowserModule,
+// #docregion imports
+    // other imports ...
+    ReactiveFormsModule
+  ],
+// #enddocregion imports
+  providers: [],
+  bootstrap: [AppComponent]
+// #docregion imports
+})
+export class AppModule { }
+// #enddocregion imports
diff --git a/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.css b/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.css
new file mode 100644
index 000000000000..c89ab4cc0bf4
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.css
@@ -0,0 +1,19 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  padding-top: 24px;
+}
+
+label {
+  display: block;
+  width: 6em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
\ No newline at end of file
diff --git a/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html b/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html
new file mode 100644
index 000000000000..95f1948ffa2c
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html
@@ -0,0 +1,21 @@
+<!-- #docregion control-binding -->
+<label>
+  Name:
+  <input type="text" [formControl]="name">
+</label>
+
+<!-- #enddocregion control-binding -->
+
+<!-- #docregion display-value -->
+
+<p>
+  Value: {{ name.value }}
+</p>
+<!-- #enddocregion display-value -->
+
+<!-- #docregion update-value -->
+
+<p>
+  <button (click)="updateName()">Update Name</button>
+</p>
+<!-- #enddocregion update-value -->
diff --git a/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts b/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts
new file mode 100644
index 000000000000..b549b560ea10
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts
@@ -0,0 +1,22 @@
+// #docplaster
+// #docregion create-control
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-name-editor',
+  templateUrl: './name-editor.component.html',
+  styleUrls: ['./name-editor.component.css']
+})
+export class NameEditorComponent {
+  name = new FormControl('');
+// #enddocregion create-control
+
+// #docregion update-value
+  updateName() {
+    this.name.setValue('Nancy');
+  }
+// #enddocregion update-value
+// #docregion create-control
+}
+// #enddocregion create-control
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
new file mode 100644
index 000000000000..c1fd2a10d26f
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
@@ -0,0 +1,67 @@
+<!-- #docplaster -->
+<!-- #docregion formgroup -->
+<form [formGroup]="profileForm">
+  
+  <label>
+    First Name:
+    <input type="text" formControlName="firstName">
+  </label>
+
+  <label>
+    Last Name:
+    <input type="text" formControlName="lastName">
+  </label>
+
+<!-- #enddocregion formgroup -->
+  <!-- #docregion formgroupname -->
+  <div formGroupName="address">
+    <h3>Address</h3>
+
+    <label>
+      Street:
+      <input type="text" formControlName="street">
+    </label>
+
+    <label>
+      City:
+      <input type="text" formControlName="city">
+    </label>
+    
+    <label>
+      State:
+      <input type="text" formControlName="state">
+    </label>
+
+    <label>
+      Zip Code:
+      <input type="text" formControlName="zip">
+    </label>
+  </div>
+  <!-- #enddocregion formgroupname -->
+
+  <!-- #docregion formarrayname -->
+  <div formArrayName="aliases">
+    <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>
+
+    <div *ngFor="let address of aliases.controls; let i=index">
+      <!-- The repeated alias template -->
+      <label>
+        Alias:
+        <input type="text" [formControlName]="i">
+      </label>
+    </div>
+  </div>
+  <!-- #enddocregion formarrayname -->
+<!-- #docregion formgroup -->  
+</form>
+<!-- #enddocregion formgroup -->
+
+<p>
+  Form Value: {{ profileForm.value | json }}
+</p>
+
+<!-- #docregion patch-value -->
+<p>
+  <button (click)="updateProfile()">Update Profile</button>
+</p>
+<!-- #enddocregion patch-value -->
\ No newline at end of file
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts
new file mode 100644
index 000000000000..94d388847e7a
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts
@@ -0,0 +1,40 @@
+// #docplaster
+// #docregion formgroup, nested-formgroup
+import { Component } from '@angular/core';
+// #docregion imports
+import { FormGroup, FormControl } from '@angular/forms';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-profile-editor',
+  templateUrl: './profile-editor.component.html',
+  styleUrls: ['./profile-editor.component.css']
+})
+export class ProfileEditorComponent {
+// #docregion formgroup-compare
+  profileForm = new FormGroup({
+    firstName: new FormControl(''),
+    lastName: new FormControl(''),
+// #enddocregion formgroup
+    address: new FormGroup({
+      street: new FormControl(''),
+      city: new FormControl(''),
+      state: new FormControl(''),
+      zip: new FormControl('')
+    })
+// #docregion formgroup
+  });
+// #enddocregion formgroup, nested-formgroup, formgroup-compare
+// #docregion patch-value
+  updateProfile() {
+    this.profileForm.patchValue({
+      firstName: 'Nancy',
+      address: {
+        street: '123 Drew Street'
+      }
+    });
+  }
+// #enddocregion patch-value
+// #docregion formgroup, nested-formgroup
+}
+// #enddocregion formgroup
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts
new file mode 100644
index 000000000000..d482d70b01d2
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts
@@ -0,0 +1,58 @@
+// #docplaster
+// #docregion form-builder
+import { Component } from '@angular/core';
+// #docregion form-builder-imports
+import { FormBuilder } from '@angular/forms';
+// #enddocregion form-builder-imports, form-builder
+// #docregion form-array-imports
+import { FormArray } from '@angular/forms';
+// #docregion form-builder-imports, form-builder
+// #enddocregion form-builder-imports, form-array-imports
+
+@Component({
+  selector: 'app-profile-editor',
+  templateUrl: './profile-editor.component.html',
+  styleUrls: ['./profile-editor.component.css']
+})
+export class ProfileEditorComponent {
+// #docregion formgroup-compare
+  profileForm = this.fb.group({
+    firstName: [''],
+    lastName: [''],
+    address: this.fb.group({
+      street: [''],
+      city: [''],
+      state: [''],
+      zip: ['']
+    }),
+// #enddocregion form-builder, formgroup-compare
+    aliases: this.fb.array([
+      this.fb.control('')
+    ])
+// #docregion form-builder, formgroup-compare
+  });
+// #enddocregion form-builder, formgroup-compare
+  get aliases() {
+    return this.profileForm.get('aliases') as FormArray;
+  }
+
+// #docregion inject-form-builder, form-builder
+
+  constructor(private fb: FormBuilder) { }
+// #enddocregion inject-form-builder, form-builder
+
+  updateProfile() {
+    this.profileForm.patchValue({
+      firstName: 'Nancy',
+      address: {
+        street: '123 Drew Street'
+      }
+    });
+  }
+
+  addAlias() {
+    this.aliases.push(this.fb.control(''));
+  }
+// #docregion form-builder
+}
+// #enddocregion form-builder
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
new file mode 100644
index 000000000000..6d29164b1afc
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
@@ -0,0 +1,39 @@
+/* ProfileEditorComponent's private CSS styles */
+:host {
+  display: flex;
+  flex-direction: column;
+  padding-top: 24px;
+}
+
+label {
+  display: block;
+  width: 6em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #cfd8dc;
+}
+
+button:disabled {
+  background-color: #eee;
+  color: #ccc;
+  cursor: auto;
+}
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
new file mode 100644
index 000000000000..86178e1c3cb9
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
@@ -0,0 +1,80 @@
+<!-- #docplaster -->
+<!-- #docregion ng-submit -->
+<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
+<!-- #enddocregion ng-submit -->
+  <label>
+    First Name:
+    <!-- #docregion required-attribute -->
+    <input type="text" formControlName="firstName" required>
+    <!-- #enddocregion required-attribute -->
+  </label>
+
+  <label>
+    Last Name:
+    <input type="text" formControlName="lastName">
+  </label>
+
+  <div formGroupName="address">
+    <h3>Address</h3>
+
+    <label>
+      Street:
+      <input type="text" formControlName="street">
+    </label>
+
+    <label>
+      City:
+      <input type="text" formControlName="city">
+    </label>
+    
+    <label>
+      State:
+      <input type="text" formControlName="state">
+    </label>
+
+    <label>
+      Zip Code:
+      <input type="text" formControlName="zip">
+    </label>
+  </div>
+
+  <!-- #docregion formarrayname -->
+  <div formArrayName="aliases">
+    <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>
+
+    <div *ngFor="let address of aliases.controls; let i=index">
+      <!-- The repeated alias template -->
+      <label>
+        Alias:
+        <input type="text" [formControlName]="i">
+      </label>
+    </div>
+  </div>
+  <!-- #enddocregion formarrayname -->
+
+  <!-- #docregion submit-button -->
+  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
+  <!-- #enddocregion submit-button -->
+</form>
+
+<hr>
+
+<!-- #docregion display-value -->
+
+<p>
+  Form Value: {{ profileForm.value | json }}
+</p>
+<!-- #enddocregion display-value -->
+
+<!-- #docregion display-status -->
+
+<p>
+  Form Status: {{ profileForm.status }}
+</p>
+<!-- #enddocregion display-status -->
+
+<!-- #docregion patch-value -->
+<p>
+  <button (click)="updateProfile()">Update Profile</button>
+</p>
+<!-- #enddocregion patch-value -->
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts
new file mode 100644
index 000000000000..813c97d5c011
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts
@@ -0,0 +1,73 @@
+// #docplaster
+// #docregion form-builder
+import { Component } from '@angular/core';
+// #docregion form-builder-imports
+import { FormBuilder } from '@angular/forms';
+// #enddocregion form-builder-imports
+// #docregion validator-imports
+import { Validators } from '@angular/forms';
+// #enddocregion validator-imports
+// #docregion form-array-imports
+import { FormArray } from '@angular/forms';
+// #enddocregion form-array-imports
+
+@Component({
+  selector: 'app-profile-editor',
+  templateUrl: './profile-editor.component.html',
+  styleUrls: ['./profile-editor.component.css']
+})
+export class ProfileEditorComponent {
+// #docregion required-validator, aliases
+  profileForm = this.fb.group({
+    firstName: ['', Validators.required],
+    lastName: [''],
+    address: this.fb.group({
+      street: [''],
+      city: [''],
+      state: [''],
+      zip: ['']
+    }),
+// #enddocregion form-builder, required-validator
+    aliases: this.fb.array([
+      this.fb.control('')
+    ])
+// #docregion form-builder, required-validator
+  });
+// #enddocregion form-builder, required-validator, aliases
+// #docregion aliases-getter
+
+  get aliases() {
+    return this.profileForm.get('aliases') as FormArray;
+  }
+
+// #enddocregion aliases-getter
+// #docregion inject-form-builder, form-builder
+  constructor(private fb: FormBuilder) { }
+
+// #enddocregion inject-form-builder
+
+  updateProfile() {
+    this.profileForm.patchValue({
+      firstName: 'Nancy',
+      address: {
+        street: '123 Drew Street'
+      }
+    });
+  }
+// #enddocregion form-builder
+// #docregion add-alias
+
+  addAlias() {
+    this.aliases.push(this.fb.control(''));
+  }
+// #enddocregion add-alias
+// #docregion on-submit
+
+  onSubmit() {
+    // TODO: Use EventEmitter with form value
+    console.warn(this.profileForm.value);
+  }
+// #enddocregion on-submit
+// #docregion form-builder
+}
+// #enddocregion form-builder
diff --git a/aio/content/examples/reactive-forms/src/index.html b/aio/content/examples/reactive-forms/src/index.html
new file mode 100644
index 000000000000..4a6b8fdac082
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html lang="en">
+  <head>
+    <title>Angular Reactive Forms</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/reactive-forms/src/main.ts b/aio/content/examples/reactive-forms/src/main.ts
new file mode 100644
index 000000000000..6c835d911646
--- /dev/null
+++ b/aio/content/examples/reactive-forms/src/main.ts
@@ -0,0 +1,12 @@
+// tslint:disable:no-unused-variable
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/reactive-forms/stackblitz.json b/aio/content/examples/reactive-forms/stackblitz.json
new file mode 100644
index 000000000000..5696d23db730
--- /dev/null
+++ b/aio/content/examples/reactive-forms/stackblitz.json
@@ -0,0 +1,15 @@
+{
+  "description": "Angular Reactive Forms (Demo runner)",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[0-9].*",
+
+    "!src/app/app.component.1.ts",
+    "!src/app/hero-list.component.1.html",
+
+    "!src/app/main-final.ts",
+    "!src/index-final.html"
+  ],
+  "tags": ["reactive", "forms"]
+}
diff --git a/aio/content/examples/router/e2e/src/app.e2e-spec.ts b/aio/content/examples/router/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..43438068592a
--- /dev/null
+++ b/aio/content/examples/router/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,163 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ExpectedConditions } from 'protractor';
+
+const numDashboardTabs = 5;
+const numCrises = 4;
+const numHeroes = 6;
+const EC = ExpectedConditions;
+
+describe('Router', () => {
+
+  beforeAll(() => browser.get(''));
+
+  function getPageStruct() {
+    const hrefEles = element.all(by.css('app-root > nav a'));
+    const crisisDetail = element.all(by.css('app-root > ng-component > ng-component > ng-component > div')).first();
+    const heroDetail = element(by.css('app-root > ng-component > div'));
+
+    return {
+      hrefs: hrefEles,
+      activeHref: element(by.css('app-root > nav a.active')),
+
+      crisisHref: hrefEles.get(0),
+      crisisList: element.all(by.css('app-root > ng-component > ng-component li')),
+      crisisDetail: crisisDetail,
+      crisisDetailTitle: crisisDetail.element(by.xpath('*[1]')),
+
+      heroesHref: hrefEles.get(1),
+      heroesList: element.all(by.css('app-root > ng-component li')),
+      heroDetail: heroDetail,
+      heroDetailTitle: heroDetail.element(by.xpath('*[1]')),
+
+      adminHref: hrefEles.get(2),
+      adminPreloadList: element.all(by.css('app-root > ng-component > ng-component > ul > li')),
+
+      loginHref: hrefEles.get(3),
+      loginButton: element.all(by.css('app-root > ng-component > p > button')),
+
+      contactHref: hrefEles.get(4),
+      contactCancelButton: element.all(by.buttonText('Cancel')),
+
+      outletComponents: element.all(by.css('app-root > ng-component'))
+    };
+  }
+
+  it('has expected dashboard tabs', () => {
+    const page = getPageStruct();
+    expect(page.hrefs.count()).toEqual(numDashboardTabs, 'dashboard tab count');
+    expect(page.crisisHref.getText()).toEqual('Crisis Center');
+    expect(page.heroesHref.getText()).toEqual('Heroes');
+    expect(page.adminHref.getText()).toEqual('Admin');
+    expect(page.loginHref.getText()).toEqual('Login');
+    expect(page.contactHref.getText()).toEqual('Contact');
+  });
+
+  it('has heroes selected as opening tab', () => {
+    const page = getPageStruct();
+    expect(page.activeHref.getText()).toEqual('Heroes');
+  });
+
+  it('has crises center items', async () => {
+    const page = getPageStruct();
+    await page.crisisHref.click();
+    expect(page.activeHref.getText()).toEqual('Crisis Center');
+    expect(page.crisisList.count()).toBe(numCrises, 'crisis list count');
+  });
+
+  it('has hero items', async () => {
+    const page = getPageStruct();
+    await page.heroesHref.click();
+    expect(page.activeHref.getText()).toEqual('Heroes');
+    expect(page.heroesList.count()).toBe(numHeroes, 'hero list count');
+  });
+
+  it('toggles views', async () => {
+    const page = getPageStruct();
+    await page.crisisHref.click();
+    expect(page.activeHref.getText()).toEqual('Crisis Center');
+    expect(page.crisisList.count()).toBe(numCrises, 'crisis list count');
+    await page.heroesHref.click();
+    expect(page.activeHref.getText()).toEqual('Heroes');
+    expect(page.heroesList.count()).toBe(numHeroes, 'hero list count');
+  });
+
+  it('saves changed crisis details', async () => {
+    const page = getPageStruct();
+    await page.crisisHref.click();
+    await crisisCenterEdit(2, true);
+  });
+
+  // TODO: Figure out why this test is failing now
+  xit('can cancel changed crisis details', async () => {
+    const page = getPageStruct();
+    await page.crisisHref.click();
+    await crisisCenterEdit(3, false);
+  });
+
+  it('saves changed hero details', async () => {
+    const page = getPageStruct();
+    await page.heroesHref.click();
+    const heroEle = page.heroesList.get(4);
+    let text = await heroEle.getText();
+    expect(text.length).toBeGreaterThan(0, 'hero item text length');
+    // remove leading id from text
+    const heroText = text.substr(text.indexOf(' ')).trim();
+
+    await heroEle.click();
+    expect(page.heroesList.count()).toBe(0, 'hero list count');
+    expect(page.heroDetail.isPresent()).toBe(true, 'hero detail');
+    expect(page.heroDetailTitle.getText()).toContain(heroText);
+    let inputEle = page.heroDetail.element(by.css('input'));
+    await inputEle.sendKeys('-foo');
+    expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo');
+
+    let buttonEle = page.heroDetail.element(by.css('button'));
+    await buttonEle.click();
+    expect(heroEle.getText()).toContain(heroText + '-foo');
+  });
+
+  it('sees preloaded modules', async () => {
+    const page = getPageStruct();
+    await page.loginHref.click();
+    await page.loginButton.click();
+    const list = page.adminPreloadList;
+    expect(list.count()).toBe(1, 'preloaded module');
+    expect(await list.first().getText()).toBe('crisis-center', 'first preloaded module');
+  });
+
+  it('sees the secondary route', async () => {
+    const page = getPageStruct();
+    await page.heroesHref.click();
+    await page.contactHref.click();
+    expect(page.outletComponents.count()).toBe(2, 'route count');
+  });
+
+  async function crisisCenterEdit(index: number, save: boolean) {
+    const page = getPageStruct();
+    await page.crisisHref.click();
+    let crisisEle = page.crisisList.get(index);
+    let text = await crisisEle.getText();
+    expect(text.length).toBeGreaterThan(0, 'crisis item text length');
+    // remove leading id from text
+    const crisisText = text.substr(text.indexOf(' ')).trim();
+
+    await crisisEle.click();
+    expect(page.crisisDetail.isPresent()).toBe(true, 'crisis detail present');
+    expect(page.crisisDetailTitle.getText()).toContain(crisisText);
+    let inputEle = page.crisisDetail.element(by.css('input'));
+    await inputEle.sendKeys('-foo');
+
+    let buttonEle = page.crisisDetail.element(by.buttonText(save ? 'Save' : 'Cancel'));
+    await buttonEle.click();
+    crisisEle = page.crisisList.get(index);
+    if (save) {
+      expect(crisisEle.getText()).toContain(crisisText + '-foo');
+    } else {
+      await browser.wait(EC.alertIsPresent(), 4000);
+      await browser.switchTo().alert().accept();
+      expect(crisisEle.getText()).toContain(crisisText);
+    }
+  }
+
+});
diff --git a/aio/content/examples/router/example-config.json b/aio/content/examples/router/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard.component.1.ts b/aio/content/examples/router/src/app/admin/admin-dashboard.component.1.ts
new file mode 100644
index 000000000000..ffa3e3cb8ff3
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/admin-dashboard.component.1.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template:  `
+    <p>Dashboard</p>
+  `
+})
+export class AdminDashboardComponent { }
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
new file mode 100644
index 000000000000..19406bea9b6e
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/admin-dashboard.component.2.ts
@@ -0,0 +1,33 @@
+// #docregion
+import { Component, OnInit }  from '@angular/core';
+import { ActivatedRoute }     from '@angular/router';
+import { Observable }         from 'rxjs';
+import { map }                from 'rxjs/operators';
+
+@Component({
+  template:  `
+    <p>Dashboard</p>
+
+    <p>Session ID: {{ sessionId | async }}</p>
+    <a id="anchor"></a>
+    <p>Token: {{ token | async }}</p>
+  `
+})
+export class AdminDashboardComponent implements OnInit {
+  sessionId: Observable<string>;
+  token: Observable<string>;
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    // Capture the session ID if available
+    this.sessionId = this.route
+      .queryParamMap
+      .pipe(map(params => params.get('session_id') || 'None'));
+
+    // Capture the fragment if available
+    this.token = this.route
+      .fragment
+      .pipe(map(fragment => fragment || 'None'));
+  }
+}
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
new file mode 100644
index 000000000000..11be8fd02926
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/admin-dashboard.component.ts
@@ -0,0 +1,47 @@
+// #docregion
+import { Component, OnInit }    from '@angular/core';
+import { ActivatedRoute }       from '@angular/router';
+import { Observable }           from 'rxjs';
+import { map }                  from 'rxjs/operators';
+
+import { SelectivePreloadingStrategy } from '../selective-preloading-strategy';
+
+
+@Component({
+  template:  `
+    <p>Dashboard</p>
+
+    <p>Session ID: {{ sessionId | async }}</p>
+    <a id="anchor"></a>
+    <p>Token: {{ token | async }}</p>
+
+    Preloaded Modules
+    <ul>
+      <li *ngFor="let module of modules">{{ module }}</li>
+    </ul>
+  `
+})
+export class AdminDashboardComponent implements OnInit {
+  sessionId: Observable<string>;
+  token: Observable<string>;
+  modules: string[];
+
+  constructor(
+    private route: ActivatedRoute,
+    private preloadStrategy: SelectivePreloadingStrategy
+  ) {
+    this.modules = preloadStrategy.preloadedModules;
+  }
+
+  ngOnInit() {
+    // Capture the session ID if available
+    this.sessionId = this.route
+      .queryParamMap
+      .pipe(map(params => params.get('session_id') || 'None'));
+
+    // Capture the fragment if available
+    this.token = this.route
+      .fragment
+      .pipe(map(fragment => fragment || 'None'));
+  }
+}
diff --git a/aio/content/examples/router/src/app/admin/admin-routing.module.1.ts b/aio/content/examples/router/src/app/admin/admin-routing.module.1.ts
new file mode 100644
index 000000000000..e7d83f113f62
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/admin-routing.module.1.ts
@@ -0,0 +1,39 @@
+// #docplaster
+// #docregion
+import { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
+
+import { AdminComponent }           from './admin.component';
+import { AdminDashboardComponent }  from './admin-dashboard.component';
+import { ManageCrisesComponent }    from './manage-crises.component';
+import { ManageHeroesComponent }    from './manage-heroes.component';
+
+// #docregion admin-routes
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    children: [
+      {
+        path: '',
+        children: [
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
+        ]
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AdminRoutingModule {}
+// #enddocregion admin-routes
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/admin/admin-routing.module.2.ts b/aio/content/examples/router/src/app/admin/admin-routing.module.2.ts
new file mode 100644
index 000000000000..d945201afed1
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/admin-routing.module.2.ts
@@ -0,0 +1,44 @@
+// #docplaster
+// #docregion
+import { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
+
+import { AdminComponent }           from './admin.component';
+import { AdminDashboardComponent }  from './admin-dashboard.component';
+import { ManageCrisesComponent }    from './manage-crises.component';
+import { ManageHeroesComponent }    from './manage-heroes.component';
+
+// #docregion admin-route
+import { AuthGuard }                from '../auth-guard.service';
+
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        children: [
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
+        ],
+        // #enddocregion admin-route
+        canActivateChild: [AuthGuard]
+        // #docregion admin-route
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AdminRoutingModule {}
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/admin/admin-routing.module.3.ts b/aio/content/examples/router/src/app/admin/admin-routing.module.3.ts
new file mode 100644
index 000000000000..63f1c9aaf4d9
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/admin-routing.module.3.ts
@@ -0,0 +1,43 @@
+// #docplaster
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AdminComponent }           from './admin.component';
+import { AdminDashboardComponent }  from './admin-dashboard.component';
+import { ManageCrisesComponent }    from './manage-crises.component';
+import { ManageHeroesComponent }    from './manage-heroes.component';
+
+// #docregion admin-route
+import { AuthGuard }                from '../auth-guard.service';
+
+// #docregion can-activate-child
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        canActivateChild: [AuthGuard],
+        children: [
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
+        ]
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AdminRoutingModule {}
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/admin/admin-routing.module.ts b/aio/content/examples/router/src/app/admin/admin-routing.module.ts
new file mode 100644
index 000000000000..2b1048d110f7
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/admin-routing.module.ts
@@ -0,0 +1,41 @@
+// #docplaster
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AdminComponent }           from './admin.component';
+import { AdminDashboardComponent }  from './admin-dashboard.component';
+import { ManageCrisesComponent }    from './manage-crises.component';
+import { ManageHeroesComponent }    from './manage-heroes.component';
+
+import { AuthGuard }                from '../auth-guard.service';
+
+const adminRoutes: Routes = [
+  {
+    path: '',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        canActivateChild: [AuthGuard],
+        children: [
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
+        ]
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AdminRoutingModule {}
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/admin/admin.component.ts b/aio/content/examples/router/src/app/admin/admin.component.ts
new file mode 100644
index 000000000000..30abfa452480
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/admin.component.ts
@@ -0,0 +1,17 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template:  `
+    <h3>ADMIN</h3>
+    <nav>
+      <a routerLink="./" routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }">Dashboard</a>
+      <a routerLink="./crises" routerLinkActive="active">Manage Crises</a>
+      <a routerLink="./heroes" routerLinkActive="active">Manage Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+})
+export class AdminComponent {
+}
diff --git a/aio/content/examples/router/src/app/admin/admin.module.ts b/aio/content/examples/router/src/app/admin/admin.module.ts
new file mode 100644
index 000000000000..2736f00e1d7a
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/admin.module.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { NgModule }       from '@angular/core';
+import { CommonModule }   from '@angular/common';
+
+import { AdminComponent }           from './admin.component';
+import { AdminDashboardComponent }  from './admin-dashboard.component';
+import { ManageCrisesComponent }    from './manage-crises.component';
+import { ManageHeroesComponent }    from './manage-heroes.component';
+
+import { AdminRoutingModule }       from './admin-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AdminRoutingModule
+  ],
+  declarations: [
+    AdminComponent,
+    AdminDashboardComponent,
+    ManageCrisesComponent,
+    ManageHeroesComponent
+  ]
+})
+export class AdminModule {}
diff --git a/aio/content/examples/router/src/app/admin/manage-crises.component.ts b/aio/content/examples/router/src/app/admin/manage-crises.component.ts
new file mode 100644
index 000000000000..d3176563ebce
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/manage-crises.component.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template:  `
+    <p>Manage your crises here</p>
+  `
+})
+export class ManageCrisesComponent { }
diff --git a/aio/content/examples/router/src/app/admin/manage-heroes.component.ts b/aio/content/examples/router/src/app/admin/manage-heroes.component.ts
new file mode 100644
index 000000000000..7f3a39893dae
--- /dev/null
+++ b/aio/content/examples/router/src/app/admin/manage-heroes.component.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template:  `
+    <p>Manage your heroes here</p>
+  `
+})
+export class ManageHeroesComponent { }
diff --git a/aio/content/examples/router/src/app/animations.ts b/aio/content/examples/router/src/app/animations.ts
new file mode 100644
index 000000000000..39a0b1840a1b
--- /dev/null
+++ b/aio/content/examples/router/src/app/animations.ts
@@ -0,0 +1,26 @@
+// #docregion
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+// Component transition animations
+export const slideInDownAnimation =
+  trigger('routeAnimation', [
+    state('*',
+      style({
+        opacity: 1,
+        transform: 'translateX(0)'
+      })
+    ),
+    transition(':enter', [
+      style({
+        opacity: 0,
+        transform: 'translateX(-100%)'
+      }),
+      animate('0.2s ease-in')
+    ]),
+    transition(':leave', [
+      animate('0.5s ease-out', style({
+        opacity: 0,
+        transform: 'translateY(100%)'
+      }))
+    ])
+  ]);
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
new file mode 100644
index 000000000000..436291f49917
--- /dev/null
+++ b/aio/content/examples/router/src/app/app-routing.module.1.ts
@@ -0,0 +1,29 @@
+// #docregion
+import { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
+
+import { CrisisListComponent }   from './crisis-list.component';
+import { HeroListComponent }     from './hero-list.component';
+import { PageNotFoundComponent } from './not-found.component';
+
+// #docregion appRoutes
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'heroes',        component: HeroListComponent },
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
+];
+// #enddocregion appRoutes
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}
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
new file mode 100644
index 000000000000..c4df89d7f892
--- /dev/null
+++ b/aio/content/examples/router/src/app/app-routing.module.2.ts
@@ -0,0 +1,27 @@
+// #docregion
+import { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
+
+import { CrisisListComponent }   from './crisis-list.component';
+// import { HeroListComponent }  from './hero-list.component';  // <-- delete this line
+import { PageNotFoundComponent } from './not-found.component';
+
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  // { path: 'heroes',     component: HeroListComponent }, // <-- delete this line
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}
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
new file mode 100644
index 000000000000..354ca6e7409f
--- /dev/null
+++ b/aio/content/examples/router/src/app/app-routing.module.3.ts
@@ -0,0 +1,34 @@
+// #docplaster
+// #docregion , v3
+import { NgModule }                from '@angular/core';
+import { RouterModule, Routes }    from '@angular/router';
+
+import { ComposeMessageComponent } from './compose-message.component';
+import { PageNotFoundComponent }   from './not-found.component';
+
+const appRoutes: Routes = [
+// #enddocregion v3
+// #docregion compose
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'popup'
+  },
+// #enddocregion compose
+// #docregion v3
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}
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
new file mode 100644
index 000000000000..9c0d7bb9289d
--- /dev/null
+++ b/aio/content/examples/router/src/app/app-routing.module.4.ts
@@ -0,0 +1,33 @@
+// #docregion
+import { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
+
+import { ComposeMessageComponent } from './compose-message.component';
+import { CanDeactivateGuard }      from './can-deactivate-guard.service';
+import { PageNotFoundComponent }   from './not-found.component';
+
+const appRoutes: Routes = [
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'popup'
+  },
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CanDeactivateGuard
+  ]
+})
+export class AppRoutingModule {}
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
new file mode 100644
index 000000000000..a12bd2cc7ee9
--- /dev/null
+++ b/aio/content/examples/router/src/app/app-routing.module.5.ts
@@ -0,0 +1,48 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+// #docregion import-router
+import { RouterModule, Routes } from '@angular/router';
+// #enddocregion import-router
+
+import { ComposeMessageComponent } from './compose-message.component';
+import { PageNotFoundComponent }   from './not-found.component';
+
+import { CanDeactivateGuard }      from './can-deactivate-guard.service';
+import { AuthGuard }               from './auth-guard.service';
+
+
+const appRoutes: Routes = [
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'popup'
+  },
+// #docregion admin, admin-1
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+// #enddocregion admin-1
+    canLoad: [AuthGuard]
+// #docregion admin-1
+  },
+// #enddocregion admin, admin-1
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CanDeactivateGuard
+  ]
+})
+export class AppRoutingModule {}
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
new file mode 100644
index 000000000000..83a6ab3521bb
--- /dev/null
+++ b/aio/content/examples/router/src/app/app-routing.module.6.ts
@@ -0,0 +1,57 @@
+// #docplaster
+// #docregion, preload-v1
+import { NgModule }     from '@angular/core';
+import {
+  RouterModule, Routes,
+// #enddocregion preload-v1
+  PreloadAllModules
+// #docregion preload-v1
+} from '@angular/router';
+
+import { ComposeMessageComponent } from './compose-message.component';
+import { PageNotFoundComponent }   from './not-found.component';
+
+import { CanDeactivateGuard }      from './can-deactivate-guard.service';
+import { AuthGuard }               from './auth-guard.service';
+
+const appRoutes: Routes = [
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'popup'
+  },
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+    canLoad: [AuthGuard]
+  },
+  {
+    path: 'crisis-center',
+    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
+  },
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
+];
+
+@NgModule({
+  imports: [
+    // #docregion forRoot
+    RouterModule.forRoot(
+      appRoutes,
+      // #enddocregion preload-v1
+      {
+        enableTracing: true, // <-- debugging purposes only
+        preloadingStrategy: PreloadAllModules
+      }
+      // #docregion preload-v1
+    )
+    // #enddocregion forRoot
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CanDeactivateGuard
+  ]
+})
+export class AppRoutingModule {}
diff --git a/aio/content/examples/router/src/app/app-routing.module.ts b/aio/content/examples/router/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..be5dd1d5c97b
--- /dev/null
+++ b/aio/content/examples/router/src/app/app-routing.module.ts
@@ -0,0 +1,54 @@
+// #docplaster
+// #docregion, preload-v1
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ComposeMessageComponent }  from './compose-message.component';
+import { PageNotFoundComponent }    from './not-found.component';
+
+import { CanDeactivateGuard }       from './can-deactivate-guard.service';
+import { AuthGuard }                from './auth-guard.service';
+import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
+
+const appRoutes: Routes = [
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'popup'
+  },
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+    canLoad: [AuthGuard]
+  },
+  // #docregion preload-v2
+  {
+    path: 'crisis-center',
+    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
+    data: { preload: true }
+  },
+  // #enddocregion preload-v2
+  { path: '',   redirectTo: '/superheroes', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+      {
+        enableTracing: true, // <-- debugging purposes only
+        preloadingStrategy: SelectivePreloadingStrategy,
+
+      }
+    )
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CanDeactivateGuard,
+    SelectivePreloadingStrategy
+  ]
+})
+export class AppRoutingModule { }
diff --git a/aio/content/examples/router/src/app/app.component.1.ts b/aio/content/examples/router/src/app/app.component.1.ts
new file mode 100644
index 000000000000..c6fe6d2a77d2
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.component.1.ts
@@ -0,0 +1,18 @@
+/* First version */
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  // #docregion template
+  template: `
+    <h1>Angular Router</h1>
+    <nav>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+  // #enddocregion template
+})
+export class AppComponent { }
diff --git a/aio/content/examples/router/src/app/app.component.2.ts b/aio/content/examples/router/src/app/app.component.2.ts
new file mode 100644
index 000000000000..e7051839113f
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.component.2.ts
@@ -0,0 +1,16 @@
+/* Second Heroes version */
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>Angular Router</h1>
+    <nav>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+})
+export class AppComponent { }
diff --git a/aio/content/examples/router/src/app/app.component.3.ts b/aio/content/examples/router/src/app/app.component.3.ts
new file mode 100644
index 000000000000..a8d8e0de0cf5
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.component.3.ts
@@ -0,0 +1,48 @@
+/* tslint:disable:no-unused-variable */
+// #docplaster
+import { Component } from '@angular/core';
+import { Router }    from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  /* Typical link
+  // #docregion h-anchor
+  <a [routerLink]="['/heroes']">Heroes</a>
+  // #enddocregion h-anchor
+  */
+  /* Incomplete Crisis Center link when CC lacks a default
+  // #docregion cc-anchor-fail
+  // The link now fails with a "non-terminal link" error
+  // #docregion cc-anchor-w-default
+  <a [routerLink]="['/crisis-center']">Crisis Center</a>
+  // #enddocregion cc-anchor-w-default
+  // #enddocregion cc-anchor-fail
+  */
+  /* Crisis Center link when CC lacks a default
+  // #docregion cc-anchor-no-default
+  <a [routerLink]="['/crisis-center/']">Crisis Center</a>
+  // #enddocregion cc-anchor-no-default
+  */
+  /* Crisis Center Detail link
+  // #docregion Dragon-anchor
+  <a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>
+  // #enddocregion Dragon-anchor
+  */
+  /* Crisis Center link with optional query params
+  // #docregion cc-query-params
+  <a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>
+  // #enddocregion cc-query-params
+  */
+// #docregion template
+  template: `
+    <h1 class="title">Angular Router</h1>
+    <nav>
+      <a [routerLink]="['/crisis-center']">Crisis Center</a>
+      <a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">Dragon Crisis</a>
+      <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+// #enddocregion template
+})
+export class AppComponent { }
diff --git a/aio/content/examples/router/src/app/app.component.4.ts b/aio/content/examples/router/src/app/app.component.4.ts
new file mode 100644
index 000000000000..a51b792a780d
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.component.4.ts
@@ -0,0 +1,23 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  // #docregion template
+  template: `
+    <h1 class="title">Angular Router</h1>
+    <nav>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+      // #docregion contact-link
+      <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
+      // #enddocregion contact-link
+    </nav>
+    // #docregion outlets
+    <router-outlet></router-outlet>
+    <router-outlet name="popup"></router-outlet>
+    // #enddocregion outlets
+    `
+  // #enddocregion template
+})
+export class AppComponent { }
diff --git a/aio/content/examples/router/src/app/app.component.5.ts b/aio/content/examples/router/src/app/app.component.5.ts
new file mode 100644
index 000000000000..dc7ebcf58b44
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.component.5.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  // #docregion template
+  template: `
+    <h1 class="title">Angular Router</h1>
+    <nav>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+      <a routerLink="/admin" routerLinkActive="active">Admin</a>
+      <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
+    </nav>
+    <router-outlet></router-outlet>
+    <router-outlet name="popup"></router-outlet>
+    `
+  // #enddocregion template
+})
+export class AppComponent { }
diff --git a/aio/content/examples/router/src/app/app.component.6.ts b/aio/content/examples/router/src/app/app.component.6.ts
new file mode 100644
index 000000000000..d67ddfb728b2
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.component.6.ts
@@ -0,0 +1,23 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  // #docregion template
+  template: `
+    <h1 class="title">Angular Router</h1>
+    <nav>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+      <a routerLink="/admin" routerLinkActive="active">Admin</a>
+      <a routerLink="/login" routerLinkActive="active">Login</a>
+      <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
+    </nav>
+    <router-outlet></router-outlet>
+    <router-outlet name="popup"></router-outlet>
+  `
+  // #enddocregion template
+})
+export class AppComponent {
+}
diff --git a/aio/content/examples/router/src/app/app.component.ts b/aio/content/examples/router/src/app/app.component.ts
new file mode 100644
index 000000000000..70cdf8cba044
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.component.ts
@@ -0,0 +1,23 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  // #docregion template
+  template: `
+    <h1 class="title">Angular Router</h1>
+    <nav>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
+      <a routerLink="/admin" routerLinkActive="active">Admin</a>
+      <a routerLink="/login" routerLinkActive="active">Login</a>
+      <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
+    </nav>
+    <router-outlet></router-outlet>
+    <router-outlet name="popup"></router-outlet>
+  `
+  // #enddocregion template
+})
+export class AppComponent {
+}
diff --git a/aio/content/examples/router/src/app/app.module.0.ts b/aio/content/examples/router/src/app/app.module.0.ts
new file mode 100644
index 000000000000..5d14073b1b30
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.module.0.ts
@@ -0,0 +1,44 @@
+// NEVER USED. For docs only. Should compile though
+// #docplaster
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { HeroListComponent }      from './hero-list.component';
+import { CrisisListComponent }    from './crisis-list.component';
+import { PageNotFoundComponent }  from './not-found.component';
+import { PageNotFoundComponent as HeroDetailComponent } from './not-found.component';
+
+// #docregion
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'hero/:id',      component: HeroDetailComponent },
+  {
+    path: 'heroes',
+    component: HeroListComponent,
+    data: { title: 'Heroes List' }
+  },
+  { path: '',
+    redirectTo: '/heroes',
+    pathMatch: 'full'
+  },
+  { path: '**', component: PageNotFoundComponent }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
+    // other imports here
+  ],
+// #enddocregion
+/*
+// #docregion
+  ...
+})
+export class AppModule { }
+// #enddocregion
+*/
+})
+export class AppModule0 { }
diff --git a/aio/content/examples/router/src/app/app.module.1.ts b/aio/content/examples/router/src/app/app.module.1.ts
new file mode 100644
index 000000000000..e83e299a16ca
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.module.1.ts
@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+// #docregion first-config
+import { NgModule }             from '@angular/core';
+import { BrowserModule }        from '@angular/platform-browser';
+import { FormsModule }          from '@angular/forms';
+// #docregion import-router
+import { RouterModule, Routes } from '@angular/router';
+// #enddocregion import-router
+
+import { AppComponent }          from './app.component';
+import { CrisisListComponent }   from './crisis-list.component';
+import { HeroListComponent }     from './hero-list.component';
+// #enddocregion first-config
+import { PageNotFoundComponent } from './not-found.component';
+// #docregion first-config
+
+// #docregion appRoutes
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'heroes', component: HeroListComponent },
+// #enddocregion first-config
+
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+// #docregion wildcard
+  { path: '**', component: PageNotFoundComponent }
+// #enddocregion wildcard
+// #docregion first-config
+];
+// #enddocregion appRoutes
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
+  ],
+  declarations: [
+    AppComponent,
+    HeroListComponent,
+    CrisisListComponent,
+// #enddocregion first-config
+    PageNotFoundComponent
+// #docregion first-config
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/app.module.2.ts b/aio/content/examples/router/src/app/app.module.2.ts
new file mode 100644
index 000000000000..2ba739168c67
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.module.2.ts
@@ -0,0 +1,31 @@
+// #docplaster
+// #docregion
+// #docregion hero-import
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+
+import { AppComponent }     from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+
+import { CrisisListComponent }   from './crisis-list.component';
+import { HeroListComponent }     from './hero-list.component';
+import { PageNotFoundComponent } from './not-found.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    AppRoutingModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroListComponent,
+    CrisisListComponent,
+    PageNotFoundComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+// #enddocregion hero-import
+export class AppModule { }
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/app.module.3.ts b/aio/content/examples/router/src/app/app.module.3.ts
new file mode 100644
index 000000000000..862faf1c513c
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.module.3.ts
@@ -0,0 +1,29 @@
+// #docregion
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+
+import { AppComponent }     from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { HeroesModule }     from './heroes/heroes.module';
+
+import { CrisisListComponent }   from './crisis-list.component';
+import { PageNotFoundComponent } from './not-found.component';
+
+@NgModule({
+// #docregion module-imports
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HeroesModule,
+    AppRoutingModule
+  ],
+// #enddocregion module-imports
+  declarations: [
+    AppComponent,
+    CrisisListComponent,
+    PageNotFoundComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/router/src/app/app.module.4.ts b/aio/content/examples/router/src/app/app.module.4.ts
new file mode 100644
index 000000000000..482557236167
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.module.4.ts
@@ -0,0 +1,46 @@
+// #docplaster
+// #docregion
+// #docregion crisis-center-module, admin-module
+import { NgModule }       from '@angular/core';
+import { CommonModule }   from '@angular/common';
+import { FormsModule }    from '@angular/forms';
+
+import { AppComponent }            from './app.component';
+import { PageNotFoundComponent }   from './not-found.component';
+
+import { AppRoutingModule }        from './app-routing.module';
+import { HeroesModule }            from './heroes/heroes.module';
+import { CrisisCenterModule }      from './crisis-center/crisis-center.module';
+// #enddocregion crisis-center-module, admin-module
+import { ComposeMessageComponent } from './compose-message.component';
+// #docregion admin-module
+import { AdminModule }             from './admin/admin.module';
+// #docregion crisis-center-module
+
+import { DialogService }           from './dialog.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    HeroesModule,
+    CrisisCenterModule,
+// #enddocregion crisis-center-module
+    AdminModule,
+// #docregion crisis-center-module
+    AppRoutingModule
+  ],
+  declarations: [
+    AppComponent,
+// #enddocregion admin-module, crisis-center-module
+    ComposeMessageComponent,
+// #docregion admin-module, crisis-center-module
+    PageNotFoundComponent
+  ],
+  providers: [
+    DialogService
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/app.module.5.ts b/aio/content/examples/router/src/app/app.module.5.ts
new file mode 100644
index 000000000000..ad34668ceaeb
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.module.5.ts
@@ -0,0 +1,38 @@
+// #docplaster
+// #docregion
+import { NgModule }       from '@angular/core';
+import { CommonModule }   from '@angular/common';
+import { FormsModule }    from '@angular/forms';
+
+import { AppComponent }            from './app.component';
+import { AppRoutingModule }        from './app-routing.module';
+
+import { HeroesModule }            from './heroes/heroes.module';
+import { CrisisCenterModule }      from './crisis-center/crisis-center.module';
+
+import { ComposeMessageComponent } from './compose-message.component';
+import { PageNotFoundComponent } from './not-found.component';
+
+import { AdminModule }             from './admin/admin.module';
+import { DialogService }           from './dialog.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    HeroesModule,
+    CrisisCenterModule,
+    AdminModule,
+    AppRoutingModule
+  ],
+  declarations: [
+    AppComponent,
+    ComposeMessageComponent,
+    PageNotFoundComponent
+  ],
+  providers: [
+    DialogService
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/router/src/app/app.module.6.ts b/aio/content/examples/router/src/app/app.module.6.ts
new file mode 100644
index 000000000000..4cb0b1fdd5c1
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.module.6.ts
@@ -0,0 +1,29 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { BrowserModule }        from '@angular/platform-browser';
+import { FormsModule }          from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AppComponent }          from './app.component';
+import { PageNotFoundComponent } from './not-found.component';
+
+const routes: Routes = [
+
+];
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
+  ],
+  declarations: [
+    AppComponent,
+    PageNotFoundComponent
+  ],
+  providers: [
+
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/router/src/app/app.module.7.ts b/aio/content/examples/router/src/app/app.module.7.ts
new file mode 100644
index 000000000000..b6ca81ddeac5
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.module.7.ts
@@ -0,0 +1,38 @@
+// #docregion
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+
+import { AppComponent }         from './app.component';
+import { AppRoutingModule }     from './app-routing.module';
+
+import { HeroesModule }            from './heroes/heroes.module';
+import { CrisisCenterModule }      from './crisis-center/crisis-center.module';
+import { ComposeMessageComponent } from './compose-message.component';
+import { LoginRoutingModule }      from './login-routing.module';
+import { LoginComponent }          from './login.component';
+import { PageNotFoundComponent }   from './not-found.component';
+
+import { DialogService }       from './dialog.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HeroesModule,
+    CrisisCenterModule,
+    LoginRoutingModule,
+    AppRoutingModule
+  ],
+  declarations: [
+    AppComponent,
+    ComposeMessageComponent,
+    LoginComponent,
+    PageNotFoundComponent
+  ],
+  providers: [
+    DialogService
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/router/src/app/app.module.ts b/aio/content/examples/router/src/app/app.module.ts
new file mode 100644
index 000000000000..dcf3401ded73
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.module.ts
@@ -0,0 +1,56 @@
+// #docplaster
+// #docregion
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+// #docregion animations-module
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+// #enddocregion animations-module
+// #docregion inspect-config
+import { Router } from '@angular/router';
+
+// #enddocregion inspect-config
+import { AppComponent }            from './app.component';
+import { AppRoutingModule }        from './app-routing.module';
+
+import { HeroesModule }            from './heroes/heroes.module';
+import { ComposeMessageComponent } from './compose-message.component';
+import { LoginRoutingModule }      from './login-routing.module';
+import { LoginComponent }          from './login.component';
+import { PageNotFoundComponent }   from './not-found.component';
+
+import { DialogService }           from './dialog.service';
+
+// #docregion animations-module
+@NgModule({
+  imports: [
+    // #enddocregion animations-module
+    BrowserModule,
+    FormsModule,
+    HeroesModule,
+    LoginRoutingModule,
+    AppRoutingModule,
+    // #docregion animations-module
+    BrowserAnimationsModule
+    // #enddocregion animations-module
+  ],
+  declarations: [
+    AppComponent,
+    ComposeMessageComponent,
+    LoginComponent,
+    PageNotFoundComponent
+  ],
+  providers: [
+    DialogService
+  ],
+  bootstrap: [ AppComponent ]
+})
+// #docregion inspect-config
+export class AppModule {
+  // Diagnostic only: inspect router configuration
+  constructor(router: Router) {
+    console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
+  }
+}
+// #enddocregion inspect-config
diff --git a/aio/content/examples/router/src/app/auth-guard.service.1.ts b/aio/content/examples/router/src/app/auth-guard.service.1.ts
new file mode 100644
index 000000000000..c824bcb208f6
--- /dev/null
+++ b/aio/content/examples/router/src/app/auth-guard.service.1.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Injectable }     from '@angular/core';
+import { CanActivate }    from '@angular/router';
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+  canActivate() {
+    console.log('AuthGuard#canActivate called');
+    return true;
+  }
+}
diff --git a/aio/content/examples/router/src/app/auth-guard.service.2.ts b/aio/content/examples/router/src/app/auth-guard.service.2.ts
new file mode 100644
index 000000000000..8fd00e151ac1
--- /dev/null
+++ b/aio/content/examples/router/src/app/auth-guard.service.2.ts
@@ -0,0 +1,37 @@
+// #docregion
+import { Injectable }       from '@angular/core';
+import {
+  CanActivate, Router,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot
+}                           from '@angular/router';
+import { AuthService }      from './auth.service';
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService, private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    let url: string = state.url;
+
+    return this.checkLogin(url);
+  }
+
+  checkLogin(url: string): boolean {
+    if (this.authService.isLoggedIn) { return true; }
+
+    // Store the attempted URL for redirecting
+    this.authService.redirectUrl = url;
+
+    // Navigate to the login page with extras
+    this.router.navigate(['/login']);
+    return false;
+  }
+}
+// #enddocregion
+
+/*
+// #docregion can-load-interface
+export class AuthGuard implements CanActivate, CanLoad {
+// #enddocregion can-load-interface
+*/
diff --git a/aio/content/examples/router/src/app/auth-guard.service.3.ts b/aio/content/examples/router/src/app/auth-guard.service.3.ts
new file mode 100644
index 000000000000..dd890064117f
--- /dev/null
+++ b/aio/content/examples/router/src/app/auth-guard.service.3.ts
@@ -0,0 +1,39 @@
+// #docregion
+// #docregion can-activate-child
+import { Injectable }       from '@angular/core';
+import {
+  CanActivate, Router,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  CanActivateChild
+}                           from '@angular/router';
+import { AuthService }      from './auth.service';
+
+@Injectable()
+export class AuthGuard implements CanActivate, CanActivateChild {
+  constructor(private authService: AuthService, private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    let url: string = state.url;
+
+    return this.checkLogin(url);
+  }
+
+  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    return this.canActivate(route, state);
+  }
+
+// #enddocregion can-activate-child
+  checkLogin(url: string): boolean {
+    if (this.authService.isLoggedIn) { return true; }
+
+    // Store the attempted URL for redirecting
+    this.authService.redirectUrl = url;
+
+    // Navigate to the login page
+    this.router.navigate(['/login']);
+    return false;
+  }
+// #docregion can-activate-child
+}
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/auth-guard.service.4.ts b/aio/content/examples/router/src/app/auth-guard.service.4.ts
new file mode 100644
index 000000000000..5d239a8432a4
--- /dev/null
+++ b/aio/content/examples/router/src/app/auth-guard.service.4.ts
@@ -0,0 +1,47 @@
+// #docplaster
+// #docregion
+import { Injectable }       from '@angular/core';
+import {
+  CanActivate, Router,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  CanActivateChild,
+  NavigationExtras
+}                           from '@angular/router';
+import { AuthService }      from './auth.service';
+
+@Injectable()
+export class AuthGuard implements CanActivate, CanActivateChild {
+  constructor(private authService: AuthService, private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    let url: string = state.url;
+
+    return this.checkLogin(url);
+  }
+
+  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    return this.canActivate(route, state);
+  }
+
+  checkLogin(url: string): boolean {
+    if (this.authService.isLoggedIn) { return true; }
+
+    // Store the attempted URL for redirecting
+    this.authService.redirectUrl = url;
+
+    // Create a dummy session id
+    let sessionId = 123456789;
+
+    // Set our navigation extras object
+    // that contains our global query params and fragment
+    let navigationExtras: NavigationExtras = {
+      queryParams: { 'session_id': sessionId },
+      fragment: 'anchor'
+    };
+
+    // Navigate to the login page with extras
+    this.router.navigate(['/login'], navigationExtras);
+    return false;
+  }
+}
diff --git a/aio/content/examples/router/src/app/auth-guard.service.ts b/aio/content/examples/router/src/app/auth-guard.service.ts
new file mode 100644
index 000000000000..a32b5cc2b867
--- /dev/null
+++ b/aio/content/examples/router/src/app/auth-guard.service.ts
@@ -0,0 +1,56 @@
+// #docplaster
+import { Injectable }       from '@angular/core';
+import {
+  CanActivate, Router,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  CanActivateChild,
+  NavigationExtras,
+  CanLoad, Route
+}                           from '@angular/router';
+import { AuthService }      from './auth.service';
+
+@Injectable()
+export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
+  constructor(private authService: AuthService, private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    let url: string = state.url;
+
+    return this.checkLogin(url);
+  }
+
+  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    return this.canActivate(route, state);
+  }
+
+// #docregion, canLoad
+  canLoad(route: Route): boolean {
+    let url = `/${route.path}`;
+
+    return this.checkLogin(url);
+  }
+// #enddocregion canLoad
+
+  checkLogin(url: string): boolean {
+    if (this.authService.isLoggedIn) { return true; }
+
+    // Store the attempted URL for redirecting
+    this.authService.redirectUrl = url;
+
+    // Create a dummy session id
+    let sessionId = 123456789;
+
+    // Set our navigation extras object
+    // that contains our global query params and fragment
+    let navigationExtras: NavigationExtras = {
+      queryParams: { 'session_id': sessionId },
+      fragment: 'anchor'
+    };
+
+    // Navigate to the login page with extras
+    this.router.navigate(['/login'], navigationExtras);
+    return false;
+  }
+// #docregion admin-can-load
+}
diff --git a/aio/content/examples/router/src/app/auth.service.ts b/aio/content/examples/router/src/app/auth.service.ts
new file mode 100644
index 000000000000..9978541065e2
--- /dev/null
+++ b/aio/content/examples/router/src/app/auth.service.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+import { tap, delay } from 'rxjs/operators';
+
+@Injectable()
+export class AuthService {
+  isLoggedIn = false;
+
+  // store the URL so we can redirect after logging in
+  redirectUrl: string;
+
+  login(): Observable<boolean> {
+    return of(true).pipe(
+      delay(1000),
+      tap(val => this.isLoggedIn = true)
+    );
+  }
+
+  logout(): void {
+    this.isLoggedIn = false;
+  }
+}
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
new file mode 100644
index 000000000000..35af6226fba5
--- /dev/null
+++ b/aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts
@@ -0,0 +1,32 @@
+// #docregion
+import { Injectable }           from '@angular/core';
+import { Observable }           from 'rxjs';
+import { CanDeactivate,
+         ActivatedRouteSnapshot,
+         RouterStateSnapshot }  from '@angular/router';
+
+import { CrisisDetailComponent } from './crisis-center/crisis-detail.component';
+
+@Injectable()
+export class CanDeactivateGuard implements CanDeactivate<CrisisDetailComponent> {
+
+  canDeactivate(
+    component: CrisisDetailComponent,
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean> | boolean {
+    // Get the Crisis Center ID
+    console.log(route.paramMap.get('id'));
+
+    // Get the current URL
+    console.log(state.url);
+
+    // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
+    if (!component.crisis || component.crisis.name === component.editName) {
+      return true;
+    }
+    // Otherwise ask the user with the dialog service and return its
+    // observable which resolves to true or false when the user decides
+    return component.dialogService.confirm('Discard changes?');
+  }
+}
diff --git a/aio/content/examples/router/src/app/can-deactivate-guard.service.ts b/aio/content/examples/router/src/app/can-deactivate-guard.service.ts
new file mode 100644
index 000000000000..e001d95ed92d
--- /dev/null
+++ b/aio/content/examples/router/src/app/can-deactivate-guard.service.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Injectable }    from '@angular/core';
+import { CanDeactivate } from '@angular/router';
+import { Observable }    from 'rxjs';
+
+export interface CanComponentDeactivate {
+ canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
+}
+
+@Injectable()
+export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
+  canDeactivate(component: CanComponentDeactivate) {
+    return component.canDeactivate ? component.canDeactivate() : true;
+  }
+}
diff --git a/aio/content/examples/router/src/app/compose-message.component.html b/aio/content/examples/router/src/app/compose-message.component.html
new file mode 100644
index 000000000000..f0b964e6ace7
--- /dev/null
+++ b/aio/content/examples/router/src/app/compose-message.component.html
@@ -0,0 +1,17 @@
+<!-- #docregion -->
+<h3>Contact Crisis Center</h3>
+<div *ngIf="details">
+  {{ details }}
+</div>
+<div>
+  <div>
+    <label>Message: </label>
+  </div>
+  <div>
+    <textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
+  </div>
+</div>
+<p *ngIf="!sending">
+  <button (click)="send()">Send</button>
+  <button (click)="cancel()">Cancel</button>
+</p>
diff --git a/aio/content/examples/router/src/app/compose-message.component.ts b/aio/content/examples/router/src/app/compose-message.component.ts
new file mode 100644
index 000000000000..f2d95de74534
--- /dev/null
+++ b/aio/content/examples/router/src/app/compose-message.component.ts
@@ -0,0 +1,44 @@
+// #docregion
+import { Component, HostBinding } from '@angular/core';
+import { Router }                 from '@angular/router';
+
+import { slideInDownAnimation }   from './animations';
+
+@Component({
+  templateUrl: './compose-message.component.html',
+  styles: [ ':host { position: relative; bottom: 10%; }' ],
+  animations: [ slideInDownAnimation ]
+})
+export class ComposeMessageComponent {
+  @HostBinding('@routeAnimation') routeAnimation = true;
+  @HostBinding('style.display')   display = 'block';
+  @HostBinding('style.position')  position = 'absolute';
+
+  details: string;
+  message: string;
+  sending = false;
+
+  constructor(private router: Router) {}
+
+  send() {
+    this.sending = true;
+    this.details = 'Sending Message...';
+
+    setTimeout(() => {
+      this.sending = false;
+      this.closePopup();
+    }, 1000);
+  }
+
+  cancel() {
+    this.closePopup();
+  }
+
+  // #docregion closePopup
+  closePopup() {
+    // Providing a `null` value to the named outlet
+    // clears the contents of the named outlet
+    this.router.navigate([{ outlets: { popup: null }}]);
+  }
+  // #enddocregion closePopup
+}
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
new file mode 100644
index 000000000000..0edc35bc6ef7
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+    <p>Welcome to the Crisis Center</p>
+  `
+})
+export class CrisisCenterHomeComponent { }
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
new file mode 100644
index 000000000000..8ef60e68a1b6
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts
@@ -0,0 +1,45 @@
+// #docplaster
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+
+// #docregion routes
+const crisisCenterRoutes: Routes = [
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
+      {
+        path: '',
+        component: CrisisListComponent,
+        children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent
+          },
+          {
+            path: '',
+            component: CrisisCenterHomeComponent
+          }
+        ]
+      }
+    ]
+  }
+];
+// #enddocregion routes
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class CrisisCenterRoutingModule { }
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts
new file mode 100644
index 000000000000..9e9b51496808
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts
@@ -0,0 +1,72 @@
+// #docplaster
+// #docregion routes
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+// #enddocregion routes
+
+// #docregion can-deactivate-guard
+import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
+// #enddocregion can-deactivate-guard
+// #docregion crisis-detail-resolver
+import { CrisisDetailResolver }  from './crisis-detail-resolver.service';
+
+// #enddocregion crisis-detail-resolver
+// #docregion routes
+
+const crisisCenterRoutes: Routes = [
+// #enddocregion routes
+  // #docregion redirect, routes
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  // #enddocregion redirect, routes
+  // #docregion routes
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
+      {
+        path: '',
+        component: CrisisListComponent,
+        children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+  // #enddocregion routes
+            // #docregion can-deactivate-guard
+            canDeactivate: [CanDeactivateGuard],
+            // #enddocregion can-deactivate-guard
+            // #docregion crisis-detail-resolver
+            resolve: {
+              crisis: CrisisDetailResolver
+            }
+            // #enddocregion crisis-detail-resolver
+  // #docregion routes
+          },
+          {
+            path: '',
+            component: CrisisCenterHomeComponent
+          }
+        ]
+      }
+    ]
+  }
+  // #enddocregion routes
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class CrisisCenterRoutingModule { }
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts
new file mode 100644
index 000000000000..6d605dbe84c0
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts
@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+
+// #docregion can-deactivate-guard
+import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
+
+const crisisCenterRoutes: Routes = [
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
+      {
+        path: '',
+        component: CrisisListComponent,
+        children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard]
+          },
+          {
+            path: '',
+            component: CrisisCenterHomeComponent
+          }
+        ]
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class CrisisCenterRoutingModule { }
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts
new file mode 100644
index 000000000000..b7ac88e852e8
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts
@@ -0,0 +1,65 @@
+// #docplaster
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+
+import { CanDeactivateGuard }     from '../can-deactivate-guard.service';
+
+// #docregion crisis-detail-resolver
+import { CrisisDetailResolver }   from './crisis-detail-resolver.service';
+
+// #enddocregion crisis-detail-resolver
+const crisisCenterRoutes: Routes = [
+  // #docregion redirect
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  // #enddocregion redirect
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
+      {
+        path: '',
+        component: CrisisListComponent,
+        children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard],
+            resolve: {
+              crisis: CrisisDetailResolver
+            }
+          },
+          {
+            path: '',
+            component: CrisisCenterHomeComponent
+          }
+        ]
+      }
+    ]
+  }
+];
+
+// #docregion crisis-detail-resolver
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CrisisDetailResolver
+  ]
+})
+export class CrisisCenterRoutingModule { }
+// #enddocregion crisis-detail-resolver
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts
new file mode 100644
index 000000000000..c01d59245595
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts
@@ -0,0 +1,53 @@
+// #docplaster
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+
+import { CanDeactivateGuard }     from '../can-deactivate-guard.service';
+import { CrisisDetailResolver }   from './crisis-detail-resolver.service';
+
+const crisisCenterRoutes: Routes = [
+  {
+    path: '',
+    component: CrisisCenterComponent,
+    children: [
+      {
+        path: '',
+        component: CrisisListComponent,
+        children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard],
+            resolve: {
+              crisis: CrisisDetailResolver
+            }
+          },
+          {
+            path: '',
+            component: CrisisCenterHomeComponent
+          }
+        ]
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CrisisDetailResolver
+  ]
+})
+export class CrisisCenterRoutingModule { }
+// #enddocregion
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
new file mode 100644
index 000000000000..c7d7fe412d5c
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template:  `
+    <h2>CRISIS CENTER</h2>
+    <router-outlet></router-outlet>
+  `
+})
+export class CrisisCenterComponent { }
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts
new file mode 100644
index 000000000000..5a3e45f58f1f
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts
@@ -0,0 +1,36 @@
+// #docplaster
+// #docregion
+import { NgModule }       from '@angular/core';
+import { FormsModule }    from '@angular/forms';
+import { CommonModule }   from '@angular/common';
+
+import { CrisisService }        from './crisis.service';
+
+import { CrisisCenterComponent }      from './crisis-center.component';
+import { CrisisListComponent }        from './crisis-list.component';
+import { CrisisCenterHomeComponent }  from './crisis-center-home.component';
+import { CrisisDetailComponent }      from './crisis-detail.component';
+
+import { CrisisCenterRoutingModule }  from './crisis-center-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    CrisisCenterRoutingModule
+  ],
+  declarations: [
+    CrisisCenterComponent,
+    CrisisListComponent,
+    CrisisCenterHomeComponent,
+    CrisisDetailComponent
+  ],
+
+  // #docregion providers
+  providers: [
+    CrisisService
+  ]
+  // #enddocregion providers
+})
+export class CrisisCenterModule {}
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center.module.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center.module.ts
new file mode 100644
index 000000000000..4061ceac608d
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center.module.ts
@@ -0,0 +1,35 @@
+// #docplaster
+// #docregion
+import { NgModule }       from '@angular/core';
+import { FormsModule }    from '@angular/forms';
+import { CommonModule }   from '@angular/common';
+
+import { CrisisService }        from './crisis.service';
+
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+
+import { CrisisCenterRoutingModule } from './crisis-center-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    CrisisCenterRoutingModule
+  ],
+  declarations: [
+    CrisisCenterComponent,
+    CrisisListComponent,
+    CrisisCenterHomeComponent,
+    CrisisDetailComponent
+  ],
+  providers: [
+    CrisisService
+  ]
+})
+// #docregion crisis-center-module-export
+export class CrisisCenterModule {}
+// #enddocregion crisis-center-module-export
+// #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
new file mode 100644
index 000000000000..a861c3bb97f4
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts
@@ -0,0 +1,29 @@
+// #docregion
+import { Injectable }             from '@angular/core';
+import { Router, Resolve, RouterStateSnapshot,
+         ActivatedRouteSnapshot } from '@angular/router';
+import { Observable }             from 'rxjs';
+import { map, take }              from 'rxjs/operators';
+
+import { Crisis, CrisisService }  from './crisis.service';
+
+@Injectable()
+export class CrisisDetailResolver implements Resolve<Crisis> {
+  constructor(private cs: CrisisService, private router: Router) {}
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
+    let id = route.paramMap.get('id');
+
+    return this.cs.getCrisis(id).pipe(
+      take(1),
+      map(crisis => {
+        if (crisis) {
+          return crisis;
+        } else { // id not found
+          this.router.navigate(['/crisis-center']);
+          return null;
+        }
+      })
+    );
+  }
+}
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
new file mode 100644
index 000000000000..45e8d9c95b2e
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts
@@ -0,0 +1,90 @@
+// #docplaster
+// #docregion
+import { Component, OnInit, HostBinding }   from '@angular/core';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
+import { Observable }                       from 'rxjs';
+import { switchMap }                        from 'rxjs/operators';
+
+import { slideInDownAnimation }   from '../animations';
+import { Crisis, CrisisService }  from './crisis.service';
+import { DialogService }          from '../dialog.service';
+
+@Component({
+  template: `
+  <div *ngIf="crisis">
+    <h3>"{{ editName }}"</h3>
+    <div>
+      <label>Id: </label>{{ crisis.id }}</div>
+    <div>
+      <label>Name: </label>
+      <input [(ngModel)]="editName" placeholder="name"/>
+    </div>
+    <p>
+      <button (click)="save()">Save</button>
+      <button (click)="cancel()">Cancel</button>
+    </p>
+  </div>
+  `,
+  styles: ['input {width: 20em}'],
+  animations: [ slideInDownAnimation ]
+})
+export class CrisisDetailComponent implements OnInit {
+  @HostBinding('@routeAnimation') routeAnimation = true;
+  @HostBinding('style.display')   display = 'block';
+  @HostBinding('style.position')  position = 'absolute';
+
+  crisis: Crisis;
+  editName: string;
+
+  constructor(
+    private service: CrisisService,
+    private router: Router,
+    private route: ActivatedRoute,
+    public dialogService: DialogService
+  ) {}
+
+  // #docregion ngOnInit
+  ngOnInit() {
+    this.route.paramMap
+      .pipe(
+        switchMap((params: ParamMap) =>
+          this.service.getCrisis(params.get('id'))))
+      .subscribe((crisis: Crisis) => {
+        if (crisis) {
+          this.editName = crisis.name;
+          this.crisis = crisis;
+        } else { // id not found
+          this.gotoCrises();
+        }
+      });
+  }
+  // #enddocregion ngOnInit
+
+  cancel() {
+    this.gotoCrises();
+  }
+
+  save() {
+    this.crisis.name = this.editName;
+    this.gotoCrises();
+  }
+
+  canDeactivate(): Observable<boolean> | boolean {
+    // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
+    if (!this.crisis || this.crisis.name === this.editName) {
+      return true;
+    }
+    // Otherwise ask the user with the dialog service and return its
+    // observable which resolves to true or false when the user decides
+    return this.dialogService.confirm('Discard changes?');
+  }
+
+  gotoCrises() {
+    let crisisId = this.crisis ? this.crisis.id : null;
+    // Pass along the crisis id if available
+    // so that the CrisisListComponent can select that crisis.
+    // Add a totally useless `foo` parameter for kicks.
+    // Relative navigation back to the crises
+    this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
+  }
+}
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts
new file mode 100644
index 000000000000..2b5150686c83
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts
@@ -0,0 +1,87 @@
+// #docplaster
+// #docregion
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+
+import { slideInDownAnimation }   from '../animations';
+import { Crisis }         from './crisis.service';
+import { DialogService }  from '../dialog.service';
+
+@Component({
+  template: `
+  <div *ngIf="crisis">
+    <h3>"{{ editName }}"</h3>
+    <div>
+      <label>Id: </label>{{ crisis.id }}</div>
+    <div>
+      <label>Name: </label>
+      <input [(ngModel)]="editName" placeholder="name"/>
+    </div>
+    <p>
+      <button (click)="save()">Save</button>
+      <button (click)="cancel()">Cancel</button>
+    </p>
+  </div>
+  `,
+  styles: ['input {width: 20em}'],
+  animations: [ slideInDownAnimation ]
+})
+export class CrisisDetailComponent implements OnInit {
+  @HostBinding('@routeAnimation') routeAnimation = true;
+  @HostBinding('style.display')   display = 'block';
+  @HostBinding('style.position')  position = 'absolute';
+
+  crisis: Crisis;
+  editName: string;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    public dialogService: DialogService
+  ) {}
+
+// #docregion ngOnInit
+  ngOnInit() {
+    this.route.data
+      .subscribe((data: { crisis: Crisis }) => {
+        this.editName = data.crisis.name;
+        this.crisis = data.crisis;
+      });
+  }
+// #enddocregion ngOnInit
+
+  // #docregion cancel-save
+  cancel() {
+    this.gotoCrises();
+  }
+
+  save() {
+    this.crisis.name = this.editName;
+    this.gotoCrises();
+  }
+  // #enddocregion cancel-save
+
+  // #docregion canDeactivate
+  canDeactivate(): Observable<boolean> | boolean {
+    // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
+    if (!this.crisis || this.crisis.name === this.editName) {
+      return true;
+    }
+    // Otherwise ask the user with the dialog service and return its
+    // observable which resolves to true or false when the user decides
+    return this.dialogService.confirm('Discard changes?');
+  }
+  // #enddocregion canDeactivate
+
+  gotoCrises() {
+    let crisisId = this.crisis ? this.crisis.id : null;
+    // Pass along the crisis id if available
+    // so that the CrisisListComponent can select that crisis.
+    // Add a totally useless `foo` parameter for kicks.
+  // #docregion gotoCrises-navigate
+    // Relative navigation back to the crises
+    this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
+  // #enddocregion gotoCrises-navigate
+  }
+}
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
new file mode 100644
index 000000000000..5bd95158bb4d
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts
@@ -0,0 +1,44 @@
+
+import { Component, OnInit }        from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+
+import { Crisis, CrisisService } from './crisis.service';
+import { Observable }            from 'rxjs';
+import { switchMap }             from 'rxjs/operators';
+
+@Component({
+  // #docregion relative-navigation-router-link
+  template: `
+    <ul class="items">
+      <li *ngFor="let crisis of crises$ | async"
+        [class.selected]="crisis.id === selectedId">
+        <a [routerLink]="[crisis.id]">
+          <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
+        </a>
+      </li>
+    </ul>
+
+    <router-outlet></router-outlet>
+    `
+  // #enddocregion relative-navigation-router-link
+})
+export class CrisisListComponent implements OnInit {
+  crises$: Observable<Crisis[]>;
+  selectedId: number;
+
+
+  constructor(
+    private service: CrisisService,
+    private route: ActivatedRoute
+  ) {}
+
+
+  ngOnInit() {
+    this.crises$ = this.route.paramMap.pipe(
+      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
new file mode 100644
index 000000000000..3219f10212e3
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts
@@ -0,0 +1,42 @@
+// #docregion
+import { Component, OnInit }        from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+
+import { Crisis, CrisisService } from './crisis.service';
+import { Observable }            from 'rxjs';
+import { switchMap }             from 'rxjs/operators';
+
+@Component({
+  template: `
+    <ul class="items">
+      <li *ngFor="let crisis of crises$ | async"
+        [class.selected]="crisis.id === selectedId">
+        <a [routerLink]="[crisis.id]">
+          <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
+        </a>
+      </li>
+    </ul>
+
+    <router-outlet></router-outlet>
+  `
+})
+export class CrisisListComponent implements OnInit {
+  crises$: Observable<Crisis[]>;
+  selectedId: number;
+
+  // #docregion ctor
+  constructor(
+    private service: CrisisService,
+    private route: ActivatedRoute
+  ) {}
+  // #enddocregion ctor
+
+  ngOnInit() {
+    this.crises$ = this.route.paramMap.pipe(
+      switchMap((params: ParamMap) => {
+        this.selectedId = +params.get('id');
+        return this.service.getCrises();
+      })
+    );
+  }
+}
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis.service.ts b/aio/content/examples/router/src/app/crisis-center/crisis.service.ts
new file mode 100644
index 000000000000..72b51316c7c4
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis.service.ts
@@ -0,0 +1,43 @@
+// #docplaster
+// #docregion , mock-crises
+import { BehaviorSubject } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export class Crisis {
+  constructor(public id: number, public name: string) { }
+}
+
+const CRISES = [
+  new Crisis(1, 'Dragon Burning Cities'),
+  new Crisis(2, 'Sky Rains Great White Sharks'),
+  new Crisis(3, 'Giant Asteroid Heading For Earth'),
+  new Crisis(4, 'Procrastinators Meeting Delayed Again'),
+];
+// #enddocregion mock-crises
+
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CrisisService {
+  static nextCrisisId = 100;
+  private crises$: BehaviorSubject<Crisis[]> = new BehaviorSubject<Crisis[]>(CRISES);
+
+  getCrises() { return this.crises$; }
+
+  getCrisis(id: number | string) {
+    return this.getCrises().pipe(
+      map(crises => crises.find(crisis => crisis.id === +id))
+    );
+  }
+
+  // #enddocregion
+  addCrisis(name: string) {
+    name = name.trim();
+    if (name) {
+      let crisis = new Crisis(CrisisService.nextCrisisId++, name);
+      CRISES.push(crisis);
+      this.crises$.next(CRISES);
+    }
+  }
+  // #docregion
+}
diff --git a/aio/content/examples/router/src/app/crisis-list.component.ts b/aio/content/examples/router/src/app/crisis-list.component.ts
new file mode 100644
index 000000000000..6caa3653b542
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-list.component.ts
@@ -0,0 +1,10 @@
+// Initial empty version
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+    <h2>CRISIS CENTER</h2>
+    <p>Get your crisis here</p>`
+})
+export class CrisisListComponent { }
diff --git a/aio/content/examples/router/src/app/dialog.service.ts b/aio/content/examples/router/src/app/dialog.service.ts
new file mode 100644
index 000000000000..d9f7f1e1633d
--- /dev/null
+++ b/aio/content/examples/router/src/app/dialog.service.ts
@@ -0,0 +1,21 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+/**
+ * Async modal dialog service
+ * DialogService makes this app easier to test by faking this service.
+ * TODO: better modal implementation that doesn't use window.confirm
+ */
+@Injectable()
+export class DialogService {
+  /**
+   * Ask user to confirm an action. `message` explains the action and choices.
+   * Returns observable resolving to `true`=confirm or `false`=cancel
+   */
+  confirm(message?: string): Observable<boolean> {
+    const confirmation = window.confirm(message || 'Is it OK?');
+
+    return of(confirmation);
+  };
+}
diff --git a/aio/content/examples/router/src/app/hero-list.component.ts b/aio/content/examples/router/src/app/hero-list.component.ts
new file mode 100644
index 000000000000..7a8f97ca1e30
--- /dev/null
+++ b/aio/content/examples/router/src/app/hero-list.component.ts
@@ -0,0 +1,13 @@
+/// Initial empty version
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+    <h2>HEROES</h2>
+    <p>Get your heroes here</p>
+
+    <button routerLink="/sidekicks">Go to sidekicks</button>
+  `
+})
+export class HeroListComponent { }
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
new file mode 100644
index 000000000000..511b12d8a7aa
--- /dev/null
+++ b/aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts
@@ -0,0 +1,56 @@
+// #docplaster
+// #docregion
+// #docregion rxjs-operator-import
+import { switchMap } from 'rxjs/operators';
+// #enddocregion rxjs-operator-import
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+// #docregion imports
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+// #enddocregion imports
+
+import { Hero, HeroService } from './hero.service';
+
+@Component({
+  template: `
+  <h2>HEROES</h2>
+  <div *ngIf="hero$ | async as hero">
+    <h3>"{{ hero.name }}"</h3>
+    <div>
+      <label>Id: </label>{{ hero.id }}</div>
+    <div>
+      <label>Name: </label>
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </div>
+    <p>
+      <button (click)="gotoHeroes()">Back</button>
+    </p>
+  </div>
+  `
+})
+export class HeroDetailComponent implements OnInit  {
+  hero$: Observable<Hero>;
+
+  // #docregion ctor
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private service: HeroService
+  ) {}
+  // #enddocregion ctor
+
+  // #docregion ngOnInit
+  ngOnInit() {
+    this.hero$ = this.route.paramMap.pipe(
+      switchMap((params: ParamMap) =>
+        this.service.getHero(params.get('id')))
+    );
+  }
+  // #enddocregion ngOnInit
+
+  // #docregion gotoHeroes
+  gotoHeroes() {
+    this.router.navigate(['/heroes']);
+  }
+  // #enddocregion gotoHeroes
+}
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
new file mode 100644
index 000000000000..0affccda9a51
--- /dev/null
+++ b/aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts
@@ -0,0 +1,46 @@
+// Snapshot version
+// #docregion
+import { Component, OnInit }      from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable }             from 'rxjs';
+
+import { Hero, HeroService } from './hero.service';
+
+@Component({
+  template: `
+  <h2>HEROES</h2>
+  <div *ngIf="hero$ | async as hero">
+    <h3>"{{ hero.name }}"</h3>
+    <div>
+      <label>Id: </label>{{ hero.id }}</div>
+    <div>
+      <label>Name: </label>
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </div>
+    <p>
+      <button (click)="gotoHeroes()">Back</button>
+    </p>
+  </div>
+  `
+})
+export class HeroDetailComponent implements OnInit  {
+  hero$: Observable<Hero>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private service: HeroService
+  ) {}
+
+  // #docregion snapshot
+  ngOnInit() {
+    let id = this.route.snapshot.paramMap.get('id');
+
+    this.hero$ = this.service.getHero(id);
+  }
+  // #enddocregion snapshot
+
+  gotoHeroes() {
+    this.router.navigate(['/heroes']);
+  }
+}
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
new file mode 100644
index 000000000000..21706868644f
--- /dev/null
+++ b/aio/content/examples/router/src/app/heroes/hero-detail.component.ts
@@ -0,0 +1,67 @@
+// #docplaster
+// #docregion
+// #docregion rxjs-operator-import
+import { switchMap } from 'rxjs/operators';
+// #enddocregion rxjs-operator-import
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Observable } from 'rxjs';
+
+import { slideInDownAnimation } from '../animations';
+
+import { Hero, HeroService }  from './hero.service';
+
+@Component({
+  template: `
+  <h2>HEROES</h2>
+  <div *ngIf="hero$ | async as hero">
+    <h3>"{{ hero.name }}"</h3>
+    <div>
+      <label>Id: </label>{{ hero.id }}</div>
+    <div>
+      <label>Name: </label>
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </div>
+    <p>
+      <button (click)="gotoHeroes(hero)">Back</button>
+    </p>
+  </div>
+  `,
+  animations: [ slideInDownAnimation ]
+})
+export class HeroDetailComponent implements OnInit {
+// #docregion host-bindings
+  @HostBinding('@routeAnimation') routeAnimation = true;
+  @HostBinding('style.display')   display = 'block';
+  @HostBinding('style.position')  position = 'absolute';
+// #enddocregion host-bindings
+
+  hero$: Observable<Hero>;
+
+  // #docregion ctor
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private service: HeroService
+  ) {}
+  // #enddocregion ctor
+
+  // #docregion ngOnInit
+  ngOnInit() {
+    this.hero$ = this.route.paramMap.pipe(
+      switchMap((params: ParamMap) =>
+        this.service.getHero(params.get('id')))
+    );
+  }
+  // #enddocregion ngOnInit
+
+  // #docregion gotoHeroes
+  gotoHeroes(hero: Hero) {
+    let heroId = hero ? hero.id : null;
+    // Pass along the hero id if available
+    // so that the HeroList component can select that hero.
+    // Include a junk 'foo' property for fun.
+    this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
+  }
+  // #enddocregion gotoHeroes
+}
diff --git a/aio/content/examples/router/src/app/heroes/hero-list.component.1.ts b/aio/content/examples/router/src/app/heroes/hero-list.component.1.ts
new file mode 100644
index 000000000000..50ad9b74e129
--- /dev/null
+++ b/aio/content/examples/router/src/app/heroes/hero-list.component.1.ts
@@ -0,0 +1,48 @@
+// #docplaster
+// #docregion
+// TODO: Feature Componetized like HeroCenter
+import { Component, OnInit }   from '@angular/core';
+import { Router }              from '@angular/router';
+import { Observable }          from 'rxjs';
+
+import { Hero, HeroService }   from './hero.service';
+
+@Component({
+  // #docregion template
+  template: `
+    <h2>HEROES</h2>
+    <ul class="items">
+      <li *ngFor="let hero of heroes$ | async">
+        // #docregion nav-to-detail
+        <a [routerLink]="['/hero', hero.id]">
+          <span class="badge">{{ hero.id }}</span>{{ hero.name }}
+        </a>
+        // #enddocregion nav-to-detail
+      </li>
+    </ul>
+
+    <button routerLink="/sidekicks">Go to sidekicks</button>
+  `
+  // #enddocregion template
+})
+export class HeroListComponent implements OnInit {
+  heroes$: Observable<Hero[]>;
+
+  // #docregion ctor
+  constructor(
+    private router: Router,
+    private service: HeroService
+  ) {}
+  // #enddocregion ctor
+
+  ngOnInit() {
+    this.heroes$ = this.service.getHeroes();
+  }
+}
+// #enddocregion
+
+/* A link parameters array
+// #docregion link-parameters-array
+['/hero', hero.id] // { 15 }
+// #enddocregion link-parameters-array
+*/
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
new file mode 100644
index 000000000000..cbb97c4cf063
--- /dev/null
+++ b/aio/content/examples/router/src/app/heroes/hero-list.component.ts
@@ -0,0 +1,55 @@
+// #docplaster
+// #docregion
+// TODO: Feature Componetized like CrisisCenter
+// #docregion rxjs-imports
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+// #enddocregion rxjs-imports
+import { Component, OnInit } from '@angular/core';
+// #docregion import-router
+import { ActivatedRoute, ParamMap } from '@angular/router';
+// #enddocregion import-router
+
+import { Hero, HeroService }  from './hero.service';
+
+@Component({
+  // #docregion template
+  template: `
+    <h2>HEROES</h2>
+    <ul class="items">
+      <li *ngFor="let hero of heroes$ | async"
+        [class.selected]="hero.id === selectedId">
+        <a [routerLink]="['/hero', hero.id]">
+          <span class="badge">{{ hero.id }}</span>{{ hero.name }}
+        </a>
+      </li>
+    </ul>
+
+    <button routerLink="/sidekicks">Go to sidekicks</button>
+  `
+  // #enddocregion template
+})
+// #docregion ctor
+export class HeroListComponent implements OnInit {
+  heroes$: Observable<Hero[]>;
+
+  private selectedId: number;
+
+  constructor(
+    private service: HeroService,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this.heroes$ = this.route.paramMap.pipe(
+      switchMap((params: ParamMap) => {
+        // (+) before `params.get()` turns the string into a number
+        this.selectedId = +params.get('id');
+        return this.service.getHeroes();
+      })
+    );
+  }
+  // #enddocregion ctor
+// #docregion ctor
+}
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/heroes/hero.service.ts b/aio/content/examples/router/src/app/heroes/hero.service.ts
new file mode 100644
index 000000000000..51518a4ae079
--- /dev/null
+++ b/aio/content/examples/router/src/app/heroes/hero.service.ts
@@ -0,0 +1,29 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export class Hero {
+  constructor(public id: number, public name: string) { }
+}
+
+const HEROES = [
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan')
+];
+
+@Injectable()
+export class HeroService {
+  getHeroes() { return of(HEROES); }
+
+  getHero(id: number | string) {
+    return this.getHeroes().pipe(
+      // (+) before `id` turns the string into a number
+      map(heroes => heroes.find(hero => hero.id === +id))
+    );
+  }
+}
diff --git a/aio/content/examples/router/src/app/heroes/heroes-routing.module.1.ts b/aio/content/examples/router/src/app/heroes/heroes-routing.module.1.ts
new file mode 100644
index 000000000000..dbee52179345
--- /dev/null
+++ b/aio/content/examples/router/src/app/heroes/heroes-routing.module.1.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { HeroListComponent }    from './hero-list.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+
+const heroesRoutes: Routes = [
+  { path: 'heroes',  component: HeroListComponent },
+// #docregion hero-detail-route
+  { path: 'hero/:id', component: HeroDetailComponent }
+// #enddocregion hero-detail-route
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(heroesRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class HeroRoutingModule { }
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/heroes/heroes-routing.module.ts b/aio/content/examples/router/src/app/heroes/heroes-routing.module.ts
new file mode 100644
index 000000000000..43558907b08d
--- /dev/null
+++ b/aio/content/examples/router/src/app/heroes/heroes-routing.module.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { HeroListComponent }    from './hero-list.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+
+const heroesRoutes: Routes = [
+  { path: 'heroes', redirectTo: '/superheroes' },
+  { path: 'hero/:id', redirectTo: '/superhero/:id' },
+  { path: 'superheroes',  component: HeroListComponent },
+  { path: 'superhero/:id', component: HeroDetailComponent }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(heroesRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class HeroRoutingModule { }
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/heroes/heroes.module.ts b/aio/content/examples/router/src/app/heroes/heroes.module.ts
new file mode 100644
index 000000000000..95ee64a1829f
--- /dev/null
+++ b/aio/content/examples/router/src/app/heroes/heroes.module.ts
@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion
+// #docregion v1
+import { NgModule }       from '@angular/core';
+import { CommonModule }   from '@angular/common';
+import { FormsModule }    from '@angular/forms';
+
+import { HeroListComponent }    from './hero-list.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+
+import { HeroService } from './hero.service';
+
+// #enddocregion v1
+import { HeroRoutingModule } from './heroes-routing.module';
+
+// #docregion v1
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+// #enddocregion v1
+    HeroRoutingModule
+// #docregion v1
+  ],
+  declarations: [
+    HeroListComponent,
+    HeroDetailComponent
+  ],
+  providers: [ HeroService ]
+})
+export class HeroesModule {}
+// #enddocregion v1
+// #enddocregion
diff --git a/aio/content/examples/router/src/app/login-routing.module.ts b/aio/content/examples/router/src/app/login-routing.module.ts
new file mode 100644
index 000000000000..96d05e79727b
--- /dev/null
+++ b/aio/content/examples/router/src/app/login-routing.module.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard }            from './auth-guard.service';
+import { AuthService }          from './auth.service';
+import { LoginComponent }       from './login.component';
+
+const loginRoutes: Routes = [
+  { path: 'login', component: LoginComponent }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(loginRoutes)
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    AuthGuard,
+    AuthService
+  ]
+})
+export class LoginRoutingModule {}
diff --git a/aio/content/examples/router/src/app/login.component.1.ts b/aio/content/examples/router/src/app/login.component.1.ts
new file mode 100644
index 000000000000..ddee33901108
--- /dev/null
+++ b/aio/content/examples/router/src/app/login.component.1.ts
@@ -0,0 +1,46 @@
+// #docregion
+import { Component }   from '@angular/core';
+import { Router }      from '@angular/router';
+import { AuthService } from './auth.service';
+
+@Component({
+  template: `
+    <h2>LOGIN</h2>
+    <p>{{message}}</p>
+    <p>
+      <button (click)="login()"  *ngIf="!authService.isLoggedIn">Login</button>
+      <button (click)="logout()" *ngIf="authService.isLoggedIn">Logout</button>
+    </p>`
+})
+export class LoginComponent {
+  message: string;
+
+  constructor(public authService: AuthService, public router: Router) {
+    this.setMessage();
+  }
+
+  setMessage() {
+    this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
+  }
+
+  login() {
+    this.message = 'Trying to log in ...';
+
+    this.authService.login().subscribe(() => {
+      this.setMessage();
+      if (this.authService.isLoggedIn) {
+        // Get the redirect URL from our auth service
+        // If no redirect has been set, use the default
+        let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/crisis-center/admin';
+
+        // Redirect the user
+        this.router.navigate([redirect]);
+      }
+    });
+  }
+
+  logout() {
+    this.authService.logout();
+    this.setMessage();
+  }
+}
diff --git a/aio/content/examples/router/src/app/login.component.ts b/aio/content/examples/router/src/app/login.component.ts
new file mode 100644
index 000000000000..1a6fae162fbb
--- /dev/null
+++ b/aio/content/examples/router/src/app/login.component.ts
@@ -0,0 +1,56 @@
+// #docregion
+import { Component }        from '@angular/core';
+import { Router,
+         NavigationExtras } from '@angular/router';
+import { AuthService }      from './auth.service';
+
+@Component({
+  template: `
+    <h2>LOGIN</h2>
+    <p>{{message}}</p>
+    <p>
+      <button (click)="login()"  *ngIf="!authService.isLoggedIn">Login</button>
+      <button (click)="logout()" *ngIf="authService.isLoggedIn">Logout</button>
+    </p>`
+})
+export class LoginComponent {
+  message: string;
+
+  constructor(public authService: AuthService, public router: Router) {
+    this.setMessage();
+  }
+
+  setMessage() {
+    this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
+  }
+
+  login() {
+    this.message = 'Trying to log in ...';
+
+    this.authService.login().subscribe(() => {
+      this.setMessage();
+      if (this.authService.isLoggedIn) {
+        // Get the redirect URL from our auth service
+        // If no redirect has been set, use the default
+        let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/admin';
+
+        // #docregion preserve
+        // Set our navigation extras object
+        // that passes on our global query params and fragment
+        let navigationExtras: NavigationExtras = {
+          queryParamsHandling: 'preserve',
+          preserveFragment: true
+        };
+
+        // Redirect the user
+        this.router.navigate([redirect], navigationExtras);
+        // #enddocregion preserve
+      }
+    });
+  }
+
+  logout() {
+    this.authService.logout();
+    this.setMessage();
+  }
+}
diff --git a/aio/content/examples/router/src/app/not-found.component.ts b/aio/content/examples/router/src/app/not-found.component.ts
new file mode 100644
index 000000000000..2e74544e173a
--- /dev/null
+++ b/aio/content/examples/router/src/app/not-found.component.ts
@@ -0,0 +1,7 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template: '<h2>Page not found</h2>'
+})
+export class PageNotFoundComponent {}
diff --git a/aio/content/examples/router/src/app/selective-preloading-strategy.ts b/aio/content/examples/router/src/app/selective-preloading-strategy.ts
new file mode 100644
index 000000000000..c2192ec12b2d
--- /dev/null
+++ b/aio/content/examples/router/src/app/selective-preloading-strategy.ts
@@ -0,0 +1,23 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { PreloadingStrategy, Route } from '@angular/router';
+import { Observable, of } from 'rxjs';
+
+@Injectable()
+export class SelectivePreloadingStrategy implements PreloadingStrategy {
+  preloadedModules: string[] = [];
+
+  preload(route: Route, load: () => Observable<any>): Observable<any> {
+    if (route.data && route.data['preload']) {
+      // add the route path to the preloaded module array
+      this.preloadedModules.push(route.path);
+
+      // log the route path to the console
+      console.log('Preloaded: ' + route.path);
+
+      return load();
+    } else {
+      return of(null);
+    }
+  }
+}
diff --git a/aio/content/examples/router/src/assets/app.css b/aio/content/examples/router/src/assets/app.css
new file mode 100644
index 000000000000..8da7fa656739
--- /dev/null
+++ b/aio/content/examples/router/src/assets/app.css
@@ -0,0 +1,51 @@
+/* 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 a {
+  display: block;
+  text-decoration: none;
+}
+.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/index.html b/aio/content/examples/router/src/index.html
new file mode 100644
index 000000000000..0e5ca721fa9a
--- /dev/null
+++ b/aio/content/examples/router/src/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html lang="en">
+  <head>
+    <!-- Set the base href -->
+    <!-- #docregion base-href -->
+    <base href="/">
+    <!-- #enddocregion base-href -->
+    <title>Angular Router</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="assets/app.css">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
+<!-- #enddocregion -->
diff --git a/aio/content/examples/router/src/main.ts b/aio/content/examples/router/src/main.ts
new file mode 100644
index 000000000000..f332d1d2451e
--- /dev/null
+++ b/aio/content/examples/router/src/main.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/router/stackblitz.json b/aio/content/examples/router/stackblitz.json
new file mode 100644
index 000000000000..c1f330ae39b9
--- /dev/null
+++ b/aio/content/examples/router/stackblitz.json
@@ -0,0 +1,11 @@
+{
+  "description": "Router",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[0-9].*",
+    "!src/app/crisis-list.component.ts",
+    "!src/app/hero-list.component.ts"
+  ],
+  "tags": ["router"]
+}
diff --git a/aio/content/examples/rx-library/example-config.json b/aio/content/examples/rx-library/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/rx-library/src/error-handling.ts b/aio/content/examples/rx-library/src/error-handling.ts
new file mode 100644
index 000000000000..c7b6c2dc9ff3
--- /dev/null
+++ b/aio/content/examples/rx-library/src/error-handling.ts
@@ -0,0 +1,25 @@
+
+import { of } from 'rxjs';
+
+// #docregion
+
+import { ajax } from 'rxjs/ajax';
+import { map, catchError } from 'rxjs/operators';
+// Return "response" from the API. If an error happens,
+// return an empty array.
+const apiData = ajax('/api/data').pipe(
+  map(res => {
+    if (!res.response) {
+      throw new Error('Value expected!');
+    }
+    return res.response;
+  }),
+  catchError(err => of([]))
+);
+
+apiData.subscribe({
+  next(x) { console.log('data: ', x); },
+  error(err) { console.log('errors already caught... will not run'); }
+});
+
+// #enddocregion
diff --git a/aio/content/examples/rx-library/src/main.ts b/aio/content/examples/rx-library/src/main.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/rx-library/src/naming-convention.ts b/aio/content/examples/rx-library/src/naming-convention.ts
new file mode 100644
index 000000000000..1e337b293afe
--- /dev/null
+++ b/aio/content/examples/rx-library/src/naming-convention.ts
@@ -0,0 +1,20 @@
+
+
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-stopwatch',
+  templateUrl: './stopwatch.component.html'
+})
+export class StopwatchComponent {
+
+  stopwatchValue: number;
+  stopwatchValue$: Observable<number>;
+
+  start() {
+    this.stopwatchValue$.subscribe(num =>
+      this.stopwatchValue = num
+    );
+  }
+}
diff --git a/aio/content/examples/rx-library/src/operators.1.ts b/aio/content/examples/rx-library/src/operators.1.ts
new file mode 100644
index 000000000000..1949dfe47d6a
--- /dev/null
+++ b/aio/content/examples/rx-library/src/operators.1.ts
@@ -0,0 +1,23 @@
+import { of, pipe } from 'rxjs';
+
+// #docregion
+
+import { filter, map } from 'rxjs/operators';
+
+const nums = of(1, 2, 3, 4, 5);
+
+// Create a function that accepts an Observable.
+const squareOddVals = pipe(
+  filter((n: number) => n % 2 !== 0),
+  map(n => n * n)
+);
+
+// Create an Observable that will run the filter and map functions
+const squareOdd = squareOddVals(nums);
+
+// Suscribe to run the combined functions
+squareOdd.subscribe(x => console.log(x));
+
+// #enddocregion
+
+
diff --git a/aio/content/examples/rx-library/src/operators.2.ts b/aio/content/examples/rx-library/src/operators.2.ts
new file mode 100644
index 000000000000..9559ea8525bb
--- /dev/null
+++ b/aio/content/examples/rx-library/src/operators.2.ts
@@ -0,0 +1,16 @@
+import { Observable, of } from 'rxjs';
+
+// #docregion
+
+import { filter, map } from 'rxjs/operators';
+
+const squareOdd = of(1, 2, 3, 4, 5)
+  .pipe(
+    filter(n => n % 2 !== 0),
+    map(n => n * n)
+  );
+
+// Subscribe to get values
+squareOdd.subscribe(x => console.log(x));
+
+// #enddocregion
diff --git a/aio/content/examples/rx-library/src/operators.ts b/aio/content/examples/rx-library/src/operators.ts
new file mode 100644
index 000000000000..461482a4bc62
--- /dev/null
+++ b/aio/content/examples/rx-library/src/operators.ts
@@ -0,0 +1,20 @@
+
+import { Observable, of } from 'rxjs';
+
+// #docregion
+
+import { map } from 'rxjs/operators';
+
+const nums = of(1, 2, 3);
+
+const squareValues = map((val: number) => val * val);
+const squaredNums = squareValues(nums);
+
+squaredNums.subscribe(x => console.log(x));
+
+// Logs
+// 1
+// 4
+// 9
+
+// #enddocregion
diff --git a/aio/content/examples/rx-library/src/retry-on-error.ts b/aio/content/examples/rx-library/src/retry-on-error.ts
new file mode 100644
index 000000000000..b1a5389c1b14
--- /dev/null
+++ b/aio/content/examples/rx-library/src/retry-on-error.ts
@@ -0,0 +1,26 @@
+
+import { Observable, of } from 'rxjs';
+
+
+// #docregion
+
+import { ajax } from 'rxjs/ajax';
+import { map, retry, catchError } from 'rxjs/operators';
+
+const apiData = ajax('/api/data').pipe(
+  retry(3), // Retry up to 3 times before failing
+  map(res => {
+    if (!res.response) {
+      throw new Error('Value expected!');
+    }
+    return res.response;
+  }),
+  catchError(err => of([]))
+);
+
+apiData.subscribe({
+  next(x) { console.log('data: ', x); },
+  error(err) { console.log('errors already caught... will not run'); }
+});
+
+// #enddocregion
diff --git a/aio/content/examples/rx-library/src/simple-creation.ts b/aio/content/examples/rx-library/src/simple-creation.ts
new file mode 100644
index 000000000000..810e398e85a8
--- /dev/null
+++ b/aio/content/examples/rx-library/src/simple-creation.ts
@@ -0,0 +1,65 @@
+
+// #docregion promise
+
+import { fromPromise } from 'rxjs';
+
+// Create an Observable out of a promise
+const data = fromPromise(fetch('/api/endpoint'));
+// Subscribe to begin listening for async result
+data.subscribe({
+ next(response) { console.log(response); },
+ error(err) { console.error('Error: ' + err); },
+ complete() { console.log('Completed'); }
+});
+
+// #enddocregion promise
+
+// #docregion interval
+
+import { interval } from 'rxjs';
+
+// Create an Observable that will publish a value on an interval
+const secondsCounter = interval(1000);
+// Subscribe to begin publishing values
+secondsCounter.subscribe(n =>
+  console.log(`It's been ${n} seconds since subscribing!`));
+
+// #enddocregion interval
+
+
+// #docregion event
+
+import { fromEvent } from 'rxjs';
+
+const el = document.getElementById('my-element');
+
+// Create an Observable that will publish mouse movements
+const mouseMoves = fromEvent(el, 'mousemove');
+
+// Subscribe to start listening for mouse-move events
+const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
+  // Log coords of mouse movements
+  console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);
+
+  // When the mouse is over the upper-left of the screen,
+  // unsubscribe to stop listening for mouse movements
+  if (evt.clientX < 40 && evt.clientY < 40) {
+    subscription.unsubscribe();
+  }
+});
+
+// #enddocregion event
+
+
+// #docregion ajax
+
+import { ajax } from 'rxjs/ajax';
+
+// Create an Observable that will create an AJAX request
+const apiData = ajax('/api/data');
+// Subscribe to create the request
+apiData.subscribe(res => console.log(res.status, res.response));
+
+// #enddocregion ajax
+
+
diff --git a/aio/content/examples/security/e2e/src/app.e2e-spec.ts b/aio/content/examples/security/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..8ebad58f213f
--- /dev/null
+++ b/aio/content/examples/security/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,37 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, By } from 'protractor';
+
+describe('Security E2E Tests', () => {
+  beforeAll(() => browser.get(''));
+
+  it('sanitizes innerHTML', () => {
+    let interpolated = element(By.className('e2e-inner-html-interpolated'));
+    expect(interpolated.getText())
+        .toContain('Template <script>alert("0wned")</script> <b>Syntax</b>');
+    let bound = element(By.className('e2e-inner-html-bound'));
+    expect(bound.getText()).toContain('Template alert("0wned") Syntax');
+    let bold = element(By.css('.e2e-inner-html-bound b'));
+    expect(bold.getText()).toContain('Syntax');
+  });
+
+  it('escapes untrusted URLs', () => {
+    let untrustedUrl = element(By.className('e2e-dangerous-url'));
+    expect(untrustedUrl.getAttribute('href')).toMatch(/^unsafe:javascript/);
+  });
+
+  it('binds trusted URLs', () => {
+    let trustedUrl = element(By.className('e2e-trusted-url'));
+    expect(trustedUrl.getAttribute('href')).toMatch(/^javascript:alert/);
+  });
+
+  it('escapes untrusted resource URLs', () => {
+    let iframe = element(By.className('e2e-iframe-untrusted-src'));
+    expect(iframe.getAttribute('src')).toBe('');
+  });
+
+  it('binds trusted resource URLs', () => {
+    let iframe = element(By.className('e2e-iframe-trusted-src'));
+    expect(iframe.getAttribute('src')).toMatch(/^https:\/\/www.youtube.com\//);
+  });
+});
diff --git a/aio/content/examples/security/example-config.json b/aio/content/examples/security/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/security/src/app/app.component.ts b/aio/content/examples/security/src/app/app.component.ts
new file mode 100644
index 000000000000..5e6abfba9c2f
--- /dev/null
+++ b/aio/content/examples/security/src/app/app.component.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+  <h1>Security</h1>
+  <app-inner-html-binding></app-inner-html-binding>
+  <app-bypass-security></app-bypass-security>
+  `
+})
+export class AppComponent {
+}
diff --git a/aio/content/examples/security/src/app/app.module.ts b/aio/content/examples/security/src/app/app.module.ts
new file mode 100644
index 000000000000..21d880be3baa
--- /dev/null
+++ b/aio/content/examples/security/src/app/app.module.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { BypassSecurityComponent } from './bypass-security.component';
+import { InnerHtmlBindingComponent } from './inner-html-binding.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    BypassSecurityComponent,
+    InnerHtmlBindingComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/security/src/app/bypass-security.component.html b/aio/content/examples/security/src/app/bypass-security.component.html
new file mode 100644
index 000000000000..96adf058e267
--- /dev/null
+++ b/aio/content/examples/security/src/app/bypass-security.component.html
@@ -0,0 +1,17 @@
+<!--#docregion -->
+<h3>Bypass Security Component</h3>
+
+<!--#docregion URL -->
+<h4>An untrusted URL:</h4>
+<p><a class="e2e-dangerous-url" [href]="dangerousUrl">Click me</a></p>
+<h4>A trusted URL:</h4>
+<p><a class="e2e-trusted-url" [href]="trustedUrl">Click me</a></p>
+<!--#enddocregion URL -->
+
+<!--#docregion iframe -->
+<h4>Resource URL:</h4>
+<p>Showing: {{dangerousVideoUrl}}</p>
+<p>Trusted:</p>
+<iframe class="e2e-iframe-trusted-src" width="640" height="390" [src]="videoUrl"></iframe>
+<p>Untrusted:</p>
+<iframe class="e2e-iframe-untrusted-src" width="640" height="390" [src]="dangerousVideoUrl"></iframe>
diff --git a/aio/content/examples/security/src/app/bypass-security.component.ts b/aio/content/examples/security/src/app/bypass-security.component.ts
new file mode 100644
index 000000000000..7858db96c171
--- /dev/null
+++ b/aio/content/examples/security/src/app/bypass-security.component.ts
@@ -0,0 +1,38 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-bypass-security',
+  templateUrl: './bypass-security.component.html',
+})
+export class BypassSecurityComponent {
+  dangerousUrl: string;
+  trustedUrl: SafeUrl;
+  dangerousVideoUrl: string;
+  videoUrl: SafeResourceUrl;
+
+  // #docregion trust-url
+  constructor(private sanitizer: DomSanitizer) {
+    // javascript: URLs are dangerous if attacker controlled.
+    // Angular sanitizes them in data binding, but you can
+    // explicitly tell Angular to trust this value:
+    this.dangerousUrl = 'javascript:alert("Hi there")';
+    this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);
+    // #enddocregion trust-url
+    this.updateVideoUrl('PUBnlbjZFAI');
+  }
+
+  // #docregion trust-video-url
+  updateVideoUrl(id: string) {
+    // Appending an ID to a YouTube URL is safe.
+    // Always make sure to construct SafeValue objects as
+    // close as possible to the input data so
+    // that it's easier to check if the value is safe.
+    this.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id;
+    this.videoUrl =
+        this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl);
+  }
+  // #enddocregion trust-video-url
+}
diff --git a/aio/content/examples/security/src/app/inner-html-binding.component.html b/aio/content/examples/security/src/app/inner-html-binding.component.html
new file mode 100644
index 000000000000..fe540d25fe5e
--- /dev/null
+++ b/aio/content/examples/security/src/app/inner-html-binding.component.html
@@ -0,0 +1,6 @@
+<!-- #docregion -->
+<h3>Binding innerHTML</h3>
+<p>Bound value:</p>
+<p class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
+<p>Result of binding to innerHTML:</p>
+<p class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>
diff --git a/aio/content/examples/security/src/app/inner-html-binding.component.ts b/aio/content/examples/security/src/app/inner-html-binding.component.ts
new file mode 100644
index 000000000000..a4cfaeb04c6a
--- /dev/null
+++ b/aio/content/examples/security/src/app/inner-html-binding.component.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-inner-html-binding',
+  templateUrl: './inner-html-binding.component.html',
+})
+// #docregion class
+export class InnerHtmlBindingComponent {
+  // For example, a user/attacker-controlled value from a URL.
+  htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
+}
diff --git a/aio/content/examples/security/src/index.html b/aio/content/examples/security/src/index.html
new file mode 100644
index 000000000000..4cf1cd642855
--- /dev/null
+++ b/aio/content/examples/security/src/index.html
@@ -0,0 +1,14 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Angular Content Security</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/aio/content/examples/security/src/main.ts b/aio/content/examples/security/src/main.ts
new file mode 100644
index 000000000000..0d277197ca94
--- /dev/null
+++ b/aio/content/examples/security/src/main.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
diff --git a/aio/content/examples/security/stackblitz.json b/aio/content/examples/security/stackblitz.json
new file mode 100644
index 000000000000..e66527cb6bc5
--- /dev/null
+++ b/aio/content/examples/security/stackblitz.json
@@ -0,0 +1,8 @@
+{
+  "description": "Content Security",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags": ["security"]
+}
diff --git a/aio/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts b/aio/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts
new file mode 100755
index 000000000000..6d77937689bf
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,44 @@
+import { AppPage } from './app.po';
+import { browser, element, by } from 'protractor';
+
+
+describe('sw-example App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to Service Workers!');
+  });
+
+  it('should display the Angular logo', () => {
+    let logo = element(by.css('img'));
+    page.navigateTo();
+    expect(logo.isPresent()).toBe(true);
+  });
+
+  it('should show a header for the list of links', () => {
+    const listHeader = element(by.css('app-root > h2'));
+    expect(listHeader.getText()).toEqual('Here are some links to help you start:');
+  });
+
+  it('should show a list of links', function () {
+      element.all(by.css('ul > li > h2 > a')).then((items) => {
+        expect(items.length).toBe(4);
+        expect(items[0].getText()).toBe('Angular Service Worker Intro');
+        expect(items[1].getText()).toBe('Tour of Heroes');
+        expect(items[2].getText()).toBe('CLI Documentation');
+        expect(items[3].getText()).toBe('Angular blog');
+      });
+  });
+   // Check for a rejected promise as the service worker is not enabled
+   it('SwUpdate.checkForUpdate() should return a rejected promise', () => {
+    const button = element(by.css('button'));
+    const rejectMessage = element(by.css('p'));
+    button.click();
+    expect(rejectMessage.getText()).toContain('rejected: ');
+  });
+});
diff --git a/aio/content/examples/service-worker-getting-started/example-config.json b/aio/content/examples/service-worker-getting-started/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/service-worker-getting-started/src/app/app.component.html b/aio/content/examples/service-worker-getting-started/src/app/app.component.html
new file mode 100755
index 000000000000..59cd86bcb5b8
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/src/app/app.component.html
@@ -0,0 +1,27 @@
+<!--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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+</div>
+
+<button id="check" (click)="updateCheck()">Check for Update</button>
+<p id="checkResult">{{updateCheckText}}</p>
+
+<h2>Here are some links to help you start: </h2>
+<ul>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://angular.io/service-worker-intro">Angular Service Worker Intro</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
+  </li>
+</ul>
+
diff --git a/aio/content/examples/service-worker-getting-started/src/app/app.component.spec.ts b/aio/content/examples/service-worker-getting-started/src/app/app.component.spec.ts
new file mode 100755
index 000000000000..a136c59bfb80
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('Service Workers');
+  }));
+  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('Welcome to Service Workers!');
+  }));
+});
diff --git a/aio/content/examples/service-worker-getting-started/src/app/app.component.ts b/aio/content/examples/service-worker-getting-started/src/app/app.component.ts
new file mode 100755
index 000000000000..67cc89439680
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/src/app/app.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { SwUpdate } from '@angular/service-worker';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  title = 'Service Workers';
+  updateCheckText = '';
+
+  constructor(private update: SwUpdate) {}
+
+  updateCheck(): void {
+      this.update
+        .checkForUpdate()
+        .then(() => this.updateCheckText = 'resolved')
+        .catch(err => this.updateCheckText = `rejected: ${err.message}`);
+    }
+}
diff --git a/aio/content/examples/service-worker-getting-started/src/app/app.module.ts b/aio/content/examples/service-worker-getting-started/src/app/app.module.ts
new file mode 100755
index 000000000000..daaf81e652ad
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/src/app/app.module.ts
@@ -0,0 +1,31 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+
+// #docregion sw-import
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
+// #enddocregion sw-import
+
+import { CheckForUpdateService } from './check-for-update.service';
+import { LogUpdateService } from './log-update.service';
+import { PromptUpdateService } from './prompt-update.service';
+
+// #docregion sw-module
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
+  ],
+  providers: [
+    CheckForUpdateService,
+    LogUpdateService,
+    PromptUpdateService,
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+// #enddocregion sw-module
diff --git a/aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts b/aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts
new file mode 100755
index 000000000000..194b555ace08
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { SwUpdate } from '@angular/service-worker';
+
+
+// #docregion sw-check-update
+import { interval } from 'rxjs';
+
+@Injectable()
+export class CheckForUpdateService {
+
+  constructor(updates: SwUpdate) {
+    interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate());
+  }
+}
+// #enddocregion sw-check-update
diff --git a/aio/content/examples/service-worker-getting-started/src/app/log-update.service.ts b/aio/content/examples/service-worker-getting-started/src/app/log-update.service.ts
new file mode 100755
index 000000000000..e38961d4f5b2
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/src/app/log-update.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { SwUpdate } from '@angular/service-worker';
+
+// #docregion sw-update
+@Injectable()
+export class LogUpdateService {
+
+  constructor(updates: SwUpdate) {
+    updates.available.subscribe(event => {
+      console.log('current version is', event.current);
+      console.log('available version is', event.available);
+    });
+    updates.activated.subscribe(event => {
+      console.log('old version was', event.previous);
+      console.log('new version is', event.current);
+    });
+  }
+}
+// #enddocregion sw-update
diff --git a/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts b/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts
new file mode 100755
index 000000000000..9e3e56012e78
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { SwUpdate } from '@angular/service-worker';
+
+function promptUser(event): boolean {
+  return true;
+}
+
+// #docregion sw-activate
+@Injectable()
+export class PromptUpdateService {
+
+  constructor(updates: SwUpdate) {
+    updates.available.subscribe(event => {
+      if (promptUser(event)) {
+        updates.activateUpdate().then(() => document.location.reload());
+      }
+    });
+  }
+}
+// #enddocregion sw-activate
diff --git a/aio/content/examples/service-worker-getting-started/src/index.html b/aio/content/examples/service-worker-getting-started/src/index.html
new file mode 100755
index 000000000000..c3066538b755
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/src/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>SwExample</title>
+  <base href="/">
+
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/service-worker-getting-started/src/main.ts b/aio/content/examples/service-worker-getting-started/src/main.ts
new file mode 100755
index 000000000000..91ec6da5f078
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));
diff --git a/aio/content/examples/service-worker-getting-started/src/ngsw-config.json b/aio/content/examples/service-worker-getting-started/src/ngsw-config.json
new file mode 100755
index 000000000000..19133dc879f3
--- /dev/null
+++ b/aio/content/examples/service-worker-getting-started/src/ngsw-config.json
@@ -0,0 +1,25 @@
+
+{
+  "index": "/index.html",
+  "assetGroups": [{
+    "name": "app",
+    "installMode": "prefetch",
+    "resources": {
+      "files": [
+        "/favicon.ico",
+        "/index.html",
+        "/*.css",
+        "/*.js"
+      ]
+    }
+  }, {
+    "name": "assets",
+    "installMode": "lazy",
+    "updateMode": "prefetch",
+    "resources": {
+      "files": [
+        "/assets/**"
+      ]
+    }
+  }]
+}
diff --git a/aio/content/examples/set-document-title/e2e/src/app.e2e-spec.ts b/aio/content/examples/set-document-title/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..b86deb9aa6e2
--- /dev/null
+++ b/aio/content/examples/set-document-title/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,30 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
+describe('Set Document Title', function () {
+
+    beforeAll(function () {
+        browser.get('');
+    });
+
+    it('should set the document title', function () {
+
+      let titles = [
+        'Good morning!',
+        'Good afternoon!',
+        'Good evening!'
+      ];
+
+      element.all( by.css( 'ul li a' ) ).each(
+        function iterator( element: ElementFinder, i: number ) {
+
+          element.click();
+          expect( browser.getTitle() ).toEqual( titles[ i ] );
+
+        }
+      );
+
+  });
+
+});
diff --git a/aio/content/examples/set-document-title/example-config.json b/aio/content/examples/set-document-title/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/set-document-title/src/app/app.component.ts b/aio/content/examples/set-document-title/src/app/app.component.ts
new file mode 100644
index 000000000000..14a5c86887d6
--- /dev/null
+++ b/aio/content/examples/set-document-title/src/app/app.component.ts
@@ -0,0 +1,29 @@
+// #docplaster
+// #docregion
+// Import the native Angular services.
+import { Component } from '@angular/core';
+import { Title }     from '@angular/platform-browser';
+
+@Component({
+selector: 'app-root',
+template:
+  `<p>
+    Select a title to set on the current HTML document:
+  </p>
+
+  <ul>
+    <li><a (click)="setTitle( 'Good morning!' )">Good morning</a>.</li>
+    <li><a (click)="setTitle( 'Good afternoon!' )">Good afternoon</a>.</li>
+    <li><a (click)="setTitle( 'Good evening!' )">Good evening</a>.</li>
+  </ul>
+  `
+})
+// #docregion class
+export class AppComponent {
+  public constructor(private titleService: Title ) { }
+
+  public setTitle( newTitle: string) {
+    this.titleService.setTitle( newTitle );
+  }
+}
+// #enddocregion class
diff --git a/aio/content/examples/set-document-title/src/app/app.module.ts b/aio/content/examples/set-document-title/src/app/app.module.ts
new file mode 100644
index 000000000000..81f13c244c0f
--- /dev/null
+++ b/aio/content/examples/set-document-title/src/app/app.module.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule, Title }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  providers: [
+    Title
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/set-document-title/src/index.html b/aio/content/examples/set-document-title/src/index.html
new file mode 100644
index 000000000000..8862e207c308
--- /dev/null
+++ b/aio/content/examples/set-document-title/src/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <base href="/">
+
+  <title>
+    Setting The Document Title Using The Title Service
+  </title>
+  </head>
+<body>
+
+  <h1>
+    Setting The Document Title Using The Title Service
+  </h1>
+
+  <app-root></app-root>
+
+</body>
+</html>
diff --git a/aio/content/examples/set-document-title/src/main.ts b/aio/content/examples/set-document-title/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/set-document-title/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/set-document-title/stackblitz.json b/aio/content/examples/set-document-title/stackblitz.json
new file mode 100644
index 000000000000..fb6cf810f92f
--- /dev/null
+++ b/aio/content/examples/set-document-title/stackblitz.json
@@ -0,0 +1,9 @@
+{
+	"description": "Set The Document Title In Angular",
+	"files": [
+		"!**/*.d.ts",
+		"!**/*.js",
+		"!**/*.[1].*"
+	],
+	"tags": [ "cookbook" ]
+}
diff --git a/aio/content/examples/setup/e2e-spec.ts b/aio/content/examples/setup/e2e-spec.ts
new file mode 100644
index 000000000000..73921707ee09
--- /dev/null
+++ b/aio/content/examples/setup/e2e-spec.ts
@@ -0,0 +1,17 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('QuickStart E2E Tests', function () {
+
+  let expectedMsg = 'Hello Angular';
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it(`should display: ${expectedMsg}`, function () {
+    expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
+  });
+
+});
diff --git a/aio/content/examples/setup/example-config.json b/aio/content/examples/setup/example-config.json
new file mode 100644
index 000000000000..6af3884d8dd6
--- /dev/null
+++ b/aio/content/examples/setup/example-config.json
@@ -0,0 +1,3 @@
+{
+  "unittesting": true
+}
diff --git a/aio/content/examples/setup/non-essential-files.txt b/aio/content/examples/setup/non-essential-files.txt
new file mode 100644
index 000000000000..6389af193ce6
--- /dev/null
+++ b/aio/content/examples/setup/non-essential-files.txt
@@ -0,0 +1,13 @@
+.git
+.gitignore
+.travis.yml
+*.spec*.ts
+CHANGELOG.md
+e2e
+favicon.ico
+karma.conf.js
+karma-test-shim.js
+LICENSE
+non-essential-files.txt
+protractor.config.js
+README.md
diff --git a/aio/content/examples/setup/quickstart-specs.stackblitz.json b/aio/content/examples/setup/quickstart-specs.stackblitz.json
new file mode 100644
index 000000000000..44d7ab73f748
--- /dev/null
+++ b/aio/content/examples/setup/quickstart-specs.stackblitz.json
@@ -0,0 +1,12 @@
+{
+  "description": "Quickstart AppComponent Testing",
+  "files":[
+    "src/browser-test-shim.js",
+    "src/app/app.component.ts",
+    "src/app/app.component.spec.ts",
+    "src/quickstart-specs.html"
+  ],
+  "main": "src/quickstart-specs.html",
+  "file": "src/app/app.component.spec.ts",
+  "tags": ["quickstart", "setup", "testing"]
+}
diff --git a/aio/content/examples/setup/src/app/app.component.spec.ts b/aio/content/examples/setup/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..4998dec90489
--- /dev/null
+++ b/aio/content/examples/setup/src/app/app.component.spec.ts
@@ -0,0 +1,33 @@
+import { AppComponent } from './app.component';
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By }           from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+describe('AppComponent', function () {
+  let de: DebugElement;
+  let comp: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AppComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    comp = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('h1'));
+  });
+
+  it('should create component', () => expect(comp).toBeDefined() );
+
+  it('should have expected <h1> text', () => {
+    fixture.detectChanges();
+    const h1 = de.nativeElement;
+    expect(h1.textContent).toMatch(/angular/i,
+      '<h1> should say something about "Angular"');
+  });
+});
diff --git a/aio/content/examples/setup/src/app/app.component.ts b/aio/content/examples/setup/src/app/app.component.ts
new file mode 100644
index 000000000000..1ef28fc5c4b2
--- /dev/null
+++ b/aio/content/examples/setup/src/app/app.component.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `<h1>Hello {{name}}</h1>`
+})
+export class AppComponent { name = 'Angular'; }
diff --git a/aio/content/examples/setup/src/app/app.module.ts b/aio/content/examples/setup/src/app/app.module.ts
new file mode 100644
index 000000000000..50a0e6eb47ba
--- /dev/null
+++ b/aio/content/examples/setup/src/app/app.module.ts
@@ -0,0 +1,11 @@
+// #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/setup/src/index.html b/aio/content/examples/setup/src/index.html
new file mode 100644
index 000000000000..58e511230842
--- /dev/null
+++ b/aio/content/examples/setup/src/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html>
+  <head>
+    <title>Angular Quickstart Seed</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfills -->
+    <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/systemjs/dist/system.src.js"></script>
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <!-- #docregion my-app-->
+    <my-app><!-- content managed by Angular --></my-app>
+    <!-- #enddocregion my-app-->
+  </body>
+
+</html>
diff --git a/aio/content/examples/setup/src/main.ts b/aio/content/examples/setup/src/main.ts
new file mode 100644
index 000000000000..02d58dceac30
--- /dev/null
+++ b/aio/content/examples/setup/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule }              from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/setup/src/quickstart-specs.html b/aio/content/examples/setup/src/quickstart-specs.html
new file mode 100644
index 000000000000..b569d6a0ecbd
--- /dev/null
+++ b/aio/content/examples/setup/src/quickstart-specs.html
@@ -0,0 +1,36 @@
+<!-- Run application specs in a browser -->
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+<head>
+  <base href="/">
+  <title>1st Specs</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+</head>
+<body>
+  <!-- Polyfills -->
+  <script src="node_modules/core-js/client/shim.min.js"></script>
+
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+
+  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="node_modules/zone.js/dist/zone-testing.js"></script>
+
+  <!-- #docregion files -->
+  <script>
+    var __spec_files__ = [
+      'app/app.component.spec'
+    ];
+  </script>
+  <!-- #enddocregion files-->
+  <script src="browser-test-shim.js"></script>
+</body>
+
+</html>
diff --git a/aio/content/examples/setup/src/systemjs.config.extras.js b/aio/content/examples/setup/src/systemjs.config.extras.js
new file mode 100644
index 000000000000..027dfe58cf28
--- /dev/null
+++ b/aio/content/examples/setup/src/systemjs.config.extras.js
@@ -0,0 +1,11 @@
+/**
+ * Add barrels and stuff
+ * Adjust as necessary for your application needs.
+ */
+// (function (global) {
+//   System.config({
+//     packages: {
+//       // add packages here
+//     }
+//   });
+// })(this);
diff --git a/aio/content/examples/setup/stackblitz.json b/aio/content/examples/setup/stackblitz.json
new file mode 100644
index 000000000000..2fd0130fd8cd
--- /dev/null
+++ b/aio/content/examples/setup/stackblitz.json
@@ -0,0 +1,12 @@
+{
+  "description": "QuickStart Setup",
+  "files": [
+    "src/app/app.component.ts",
+    "src/app/app.module.ts",
+    "src/index.html",
+    "src/main.ts",
+    "src/styles.css"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["quickstart", "setup", "seed"]
+}
diff --git a/aio/content/examples/structural-directives/e2e/src/app.e2e-spec.ts b/aio/content/examples/structural-directives/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..a877fb32237b
--- /dev/null
+++ b/aio/content/examples/structural-directives/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,58 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Structural Directives', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('first div should show hero name with *ngIf', function () {
+    const allDivs = element.all(by.tagName('div'));
+    expect(allDivs.get(0).getText()).toEqual('Mr. Nice');
+  });
+
+  it('first li should show hero name with *ngFor', function () {
+    const allLis = element.all(by.tagName('li'));
+    expect(allLis.get(0).getText()).toEqual('Mr. Nice');
+  });
+
+  it('ngSwitch have two <happy-hero> instances', function () {
+    const happyHeroEls = element.all(by.tagName('app-happy-hero'));
+    expect(happyHeroEls.count()).toEqual(2);
+  });
+
+  it('should toggle *ngIf="hero" with a button', function () {
+    const toggleHeroButton = element.all(by.cssContainingText('button', 'Toggle hero')).get(0);
+    const paragraph = element.all(by.cssContainingText('p', 'I turned the corner'));
+    expect(paragraph.get(0).getText()).toContain('I waved');
+    toggleHeroButton.click().then(() => {
+      expect(paragraph.get(0).getText()).not.toContain('I waved');
+    });
+  });
+
+  it('should have only one "Hip!" (the other is erased)', function () {
+    const paragraph = element.all(by.cssContainingText('p', 'Hip!'));
+    expect(paragraph.count()).toEqual(1);
+  });
+
+  it('appUnless should show 3 paragraph (A)s and (B)s at the start', function () {
+    const paragraph = element.all(by.css('p.unless'));
+    expect(paragraph.count()).toEqual(3);
+    for (let i = 0; i < 3; i++) {
+      expect(paragraph.get(i).getText()).toContain('(A)');
+    }
+  });
+
+  it('appUnless should show 1 paragraph (B) after toggling condition', function () {
+    const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0);
+    const paragraph = element.all(by.css('p.unless'));
+
+    toggleConditionButton.click().then(() => {
+      expect(paragraph.count()).toEqual(1);
+      expect(paragraph.get(0).getText()).toContain('(B)');
+    });
+  });
+});
+
diff --git a/aio/content/examples/structural-directives/example-config.json b/aio/content/examples/structural-directives/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/structural-directives/src/app/app.component.css b/aio/content/examples/structural-directives/src/app/app.component.css
new file mode 100644
index 000000000000..a3ed3059076f
--- /dev/null
+++ b/aio/content/examples/structural-directives/src/app/app.component.css
@@ -0,0 +1,70 @@
+/* #docregion */
+button {
+  min-width: 100px;
+  font-size: 100%;
+}
+
+.box {
+  border: 1px solid gray;
+  max-width: 600px;
+  padding: 4px;
+}
+.choices {
+  font-style: italic;
+}
+
+code, .code {
+  background-color: #eee;
+  color: black;
+  font-family: Courier, sans-serif;
+  font-size: 85%;
+}
+
+div.code {
+  width: 400px;
+}
+
+.heroic {
+  font-size: 150%;
+  font-weight: bold;
+}
+
+hr {
+  margin: 40px 0
+}
+
+.odd {
+  background-color:  palegoldenrod;
+}
+
+td, th {
+  text-align: left;
+  vertical-align: top;
+}
+
+/* #docregion p-span */
+p span { color: red; font-size: 70%; }
+/* #enddocregion p-span */
+
+.unless {
+  border: 2px solid;
+  padding: 6px;
+}
+
+p.unless {
+  width: 500px;
+}
+
+button.a, span.a, .unless.a {
+  color: red;
+  border-color: gold;
+  background-color: yellow;
+  font-size: 100%;
+}
+
+button.b, span.b, .unless.b {
+  color: black;
+  border-color: green;
+  background-color: lightgreen;
+  font-size: 100%;
+}
diff --git a/aio/content/examples/structural-directives/src/app/app.component.html b/aio/content/examples/structural-directives/src/app/app.component.html
new file mode 100644
index 000000000000..e6205d30d978
--- /dev/null
+++ b/aio/content/examples/structural-directives/src/app/app.component.html
@@ -0,0 +1,228 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<h1>Structural Directives</h1>
+
+<p>Conditional display of hero</p>
+
+<blockquote>
+<!-- #docregion built-in, asterisk, ngif -->
+<div *ngIf="hero" class="name">{{hero.name}}</div>
+<!-- #enddocregion built-in, asterisk, ngif -->
+</blockquote>
+
+<p>List of heroes</p>
+<!-- #docregion built-in -->
+
+<ul>
+  <!-- #docregion ngfor-li -->
+  <li *ngFor="let hero of heroes">{{hero.name}}</li>
+  <!-- #enddocregion ngfor-li -->
+</ul>
+
+<!-- #enddocregion built-in -->
+
+<hr>
+
+<h2 id="ngIf">NgIf</h2>
+
+<!-- #docregion ngif-true -->
+<p *ngIf="true">
+  Expression is true and ngIf is true.
+  This paragraph is in the DOM.
+</p>
+<p *ngIf="false">
+  Expression is false and ngIf is false.
+  This paragraph is not in the DOM.
+</p>
+<!-- #enddocregion ngif-true -->
+
+<!-- #docregion display-none -->
+<p [style.display]="'block'">
+  Expression sets display to "block".
+  This paragraph is visible.
+</p>
+<p [style.display]="'none'">
+  Expression sets display to "none".
+  This paragraph is hidden but still in the DOM.
+</p>
+<!-- #enddocregion display-none -->
+
+<h4>NgIf with template</h4>
+<p>&lt;ng-template&gt; element</p>
+<!-- #docregion ngif-template -->
+<ng-template [ngIf]="hero">
+  <div class="name">{{hero.name}}</div>
+</ng-template>
+<!-- #enddocregion ngif-template -->
+
+<hr>
+
+<h2 id="ng-container">&lt;ng-container&gt;</h2>
+
+<h4>*ngIf with a &lt;ng-container&gt;</h4>
+
+<button (click)="hero = hero ? null : heroes[0]">Toggle hero</button>
+
+<!-- #docregion ngif-ngcontainer -->
+<p>
+  I turned the corner
+  <ng-container *ngIf="hero">
+    and saw {{hero.name}}. I waved
+  </ng-container>
+  and continued on my way.
+</p>
+<!-- #enddocregion ngif-ngcontainer -->
+<!-- #docregion ngif-span -->
+<p>
+  I turned the corner
+  <span *ngIf="hero">
+    and saw {{hero.name}}. I waved
+  </span>
+  and continued on my way.
+</p>
+<!-- #enddocregion ngif-span -->
+
+<p><i>&lt;select&gt; with &lt;span&gt;</i></p>
+<!-- #docregion select-span -->
+<div>
+  Pick your favorite hero
+  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
+</div>
+<select [(ngModel)]="hero">
+  <span *ngFor="let h of heroes">
+    <span *ngIf="showSad || h.emotion !== 'sad'">
+      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
+    </span>
+  </span>
+</select>
+<!-- #enddocregion select-span -->
+
+<p><i>&lt;select&gt; with &lt;ng-container&gt;</i></p>
+<!-- #docregion select-ngcontainer -->
+<div>
+  Pick your favorite hero
+  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
+</div>
+<select [(ngModel)]="hero">
+  <ng-container *ngFor="let h of heroes">
+    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
+      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
+    </ng-container>
+  </ng-container>
+</select>
+<!-- #enddocregion select-ngcontainer -->
+<br><br>
+
+<hr>
+
+<h2 id="ngFor">NgFor</h2>
+
+<div class="box">
+
+<p class="code">&lt;div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd"&gt;</p>
+<!--#docregion inside-ngfor -->
+<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
+  ({{i}}) {{hero.name}}
+</div>
+
+<!--#enddocregion inside-ngfor -->
+<p class="code">&lt;ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"/&gt;</p>
+<!--#docregion inside-ngfor -->
+<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
+  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
+</ng-template>
+<!--#enddocregion inside-ngfor -->
+
+</div>
+<hr>
+
+<h2 id="ngSwitch">NgSwitch</h2>
+
+<div>Pick your favorite hero</div>
+<p>
+  <label *ngFor="let h of heroes">
+    <input type="radio" name="heroes" [(ngModel)]="hero" [value]="h">{{h.name}}
+  </label>
+  <label><input type="radio" name="heroes" (click)="hero = null">None of the above</label>
+</p>
+
+<h4>NgSwitch</h4>
+
+<!-- #docregion built-in , ngswitch -->
+<div [ngSwitch]="hero?.emotion">
+  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
+  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
+  <app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero>
+  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
+</div>
+<!-- #enddocregion built-in, ngswitch -->
+
+<h4>NgSwitch with &lt;ng-template&gt;</h4>
+<!-- #docregion ngswitch-template -->
+<div [ngSwitch]="hero?.emotion">
+  <ng-template [ngSwitchCase]="'happy'">
+    <app-happy-hero [hero]="hero"></app-happy-hero>
+  </ng-template>
+  <ng-template [ngSwitchCase]="'sad'">
+    <app-sad-hero [hero]="hero"></app-sad-hero>
+  </ng-template>
+  <ng-template [ngSwitchCase]="'confused'">
+    <app-confused-hero [hero]="hero"></app-confused-hero>
+  </ng-template >
+  <ng-template ngSwitchDefault>
+    <app-unknown-hero [hero]="hero"></app-unknown-hero>
+  </ng-template>
+</div>
+<!-- #enddocregion ngswitch-template -->
+
+<hr>
+
+<h2>&lt;ng-template&gt;</h2>
+<!-- #docregion template-tag -->
+<p>Hip!</p>
+<ng-template>
+  <p>Hip!</p>
+</ng-template>
+<p>Hooray!</p>
+<!-- #enddocregion template-tag -->
+
+<hr>
+
+<h2 id="appUnless">UnlessDirective</h2>
+<p>
+  The condition is currently
+  <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
+  <button
+    (click)="condition = !condition"
+    [ngClass] = "{ 'a': condition, 'b': !condition }" >
+    Toggle condition to {{condition ? 'false' : 'true'}}
+  </button>
+</p>
+<!-- #docregion appUnless-->
+<p *appUnless="condition" class="unless a">
+  (A) This paragraph is displayed because the condition is false.
+</p>
+
+<p *appUnless="!condition" class="unless b">
+  (B) Although the condition is true,
+  this paragraph is displayed because appUnless is set to false.
+</p>
+<!-- #enddocregion appUnless-->
+
+
+<h4>UnlessDirective with template</h4>
+
+<!-- #docregion appUnless-1 -->
+<p *appUnless="condition">Show this sentence unless the condition is true.</p>
+<!-- #enddocregion appUnless-1 -->
+
+<p *appUnless="condition" class="code unless">
+  (A) &lt;p *appUnless="condition" class="code unless"&gt;
+</p>
+
+<ng-template [appUnless]="condition">
+  <p class="code unless">
+    (A) &lt;ng-template [appUnless]="condition"&gt;
+  </p>
+</ng-template>
+
diff --git a/aio/content/examples/structural-directives/src/app/app.component.ts b/aio/content/examples/structural-directives/src/app/app.component.ts
new file mode 100644
index 000000000000..aed11fc77ae8
--- /dev/null
+++ b/aio/content/examples/structural-directives/src/app/app.component.ts
@@ -0,0 +1,23 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { Hero, heroes } from './hero';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.css' ]
+})
+export class AppComponent {
+  heroes = heroes;
+  hero = this.heroes[0];
+
+  condition = false;
+  logs: string[] = [];
+  showSad = true;
+  status = 'ready';
+
+  // #docregion trackByHero
+  trackById(index: number, hero: Hero): number { return hero.id; }
+  // #enddocregion trackByHero
+}
diff --git a/aio/content/examples/structural-directives/src/app/app.module.ts b/aio/content/examples/structural-directives/src/app/app.module.ts
new file mode 100644
index 000000000000..b6ffb456c92a
--- /dev/null
+++ b/aio/content/examples/structural-directives/src/app/app.module.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { FormsModule }   from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }         from './app.component';
+import { heroSwitchComponents } from './hero-switch.components';
+import { UnlessDirective }    from './unless.directive';
+
+@NgModule({
+  imports: [ BrowserModule, FormsModule ],
+  declarations: [
+    AppComponent,
+    heroSwitchComponents,
+    UnlessDirective
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/structural-directives/src/app/hero-switch.components.ts b/aio/content/examples/structural-directives/src/app/hero-switch.components.ts
new file mode 100644
index 000000000000..27bf8de8d541
--- /dev/null
+++ b/aio/content/examples/structural-directives/src/app/hero-switch.components.ts
@@ -0,0 +1,43 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+@Component({
+  selector: 'app-happy-hero',
+  template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
+})
+export class HappyHeroComponent {
+  @Input() hero: Hero;
+}
+
+@Component({
+  selector: 'app-sad-hero',
+  template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
+})
+export class SadHeroComponent {
+  @Input() hero: Hero;
+}
+
+@Component({
+  selector: 'app-confused-hero',
+  template: `Are you as confused as {{hero.name}}?`
+})
+export class ConfusedHeroComponent {
+  @Input() hero: Hero;
+}
+
+@Component({
+  selector: 'app-unknown-hero',
+  template: `{{message}}`
+})
+export class UnknownHeroComponent {
+  @Input() hero: Hero;
+  get message() {
+    return this.hero && this.hero.name ?
+      `${this.hero.name} is strange and mysterious.` :
+      'Are you feeling indecisive?';
+  }
+}
+
+export const heroSwitchComponents =
+  [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];
diff --git a/aio/content/examples/structural-directives/src/app/hero.ts b/aio/content/examples/structural-directives/src/app/hero.ts
new file mode 100644
index 000000000000..89f0cbfdf8ac
--- /dev/null
+++ b/aio/content/examples/structural-directives/src/app/hero.ts
@@ -0,0 +1,13 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+  emotion?: string;
+}
+
+export const heroes: Hero[] = [
+  { id: 1, name: 'Mr. Nice',  emotion: 'happy'},
+  { id: 2, name: 'Narco',     emotion: 'sad' },
+  { id: 3, name: 'Windstorm', emotion: 'confused' },
+  { id: 4, name: 'Magneta'}
+];
diff --git a/aio/content/examples/structural-directives/src/app/scrap.txt b/aio/content/examples/structural-directives/src/app/scrap.txt
new file mode 100644
index 000000000000..f2e4766bdb78
--- /dev/null
+++ b/aio/content/examples/structural-directives/src/app/scrap.txt
@@ -0,0 +1,21 @@
+// interesting but unused code
+  heroChooser(picker: HTMLFieldSetElement) {
+    let choices = picker.children;
+    this.favoriteHero = undefined;
+    for (let i = 0; i < choices.length; i++) {
+      let choice = choices[i].children[0] as HTMLInputElement;
+      if (choice.checked) { this.favoriteHero = this.heroes[i]; }
+    }
+  }
+
+
+<h4>Switch with *ngFor repeated switchCases using &lt;ng-container&gt;</h4>
+<!-- #docregion NgSwitch-ngFor -->
+<div [ngSwitch]="hero.id">
+  Your favorite hero is ...
+  <ng-container *ngFor="let hero of heroes">
+    <ng-container *ngSwitchCase="hero.id">{{hero.name}}</ng-container>
+  </ng-container>
+  <ng-container *ngSwitchDefault>None of the above</ng-container>
+</div>
+<!-- #enddocregion NgSwitch-ngFor -->
diff --git a/aio/content/examples/structural-directives/src/app/unless.directive.ts b/aio/content/examples/structural-directives/src/app/unless.directive.ts
new file mode 100644
index 000000000000..5f91ddbc2845
--- /dev/null
+++ b/aio/content/examples/structural-directives/src/app/unless.directive.ts
@@ -0,0 +1,50 @@
+// #docplaster
+// #docregion
+// #docregion no-docs, skeleton
+import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+
+// #enddocregion skeleton
+/**
+ * Add the template content to the DOM unless the condition is true.
+// #enddocregion no-docs
+ *
+ * If the expression assigned to `appUnless` evaluates to a truthy value
+ * then the templated elements are removed removed from the DOM,
+ * the templated elements are (re)inserted into the DOM.
+ *
+ * <div *ngUnless="errorCount" class="success">
+ *   Congrats! Everything is great!
+ * </div>
+ *
+ * ### Syntax
+ *
+ * - `<div *appUnless="condition">...</div>`
+ * - `<ng-template [appUnless]="condition"><div>...</div></ng-template>`
+ *
+// #docregion no-docs
+ */
+// #docregion skeleton
+@Directive({ selector: '[appUnless]'})
+export class UnlessDirective {
+  // #enddocregion skeleton
+  private hasView = false;
+
+  // #docregion ctor
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef) { }
+  // #enddocregion ctor
+
+  // #docregion set
+  @Input() set appUnless(condition: boolean) {
+    if (!condition && !this.hasView) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+      this.hasView = true;
+    } else if (condition && this.hasView) {
+      this.viewContainer.clear();
+      this.hasView = false;
+    }
+  }
+  // #enddocregion set
+  // #docregion skeleton
+}
diff --git a/aio/content/examples/structural-directives/src/index.html b/aio/content/examples/structural-directives/src/index.html
new file mode 100644
index 000000000000..451b66ce357d
--- /dev/null
+++ b/aio/content/examples/structural-directives/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html lang="en">
+  <head>
+    <title>Angular Structural Directives</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/structural-directives/src/main.ts b/aio/content/examples/structural-directives/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/structural-directives/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/structural-directives/stackblitz.json b/aio/content/examples/structural-directives/stackblitz.json
new file mode 100644
index 000000000000..ca1340558341
--- /dev/null
+++ b/aio/content/examples/structural-directives/stackblitz.json
@@ -0,0 +1,12 @@
+{
+  "description": "Structural directives",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!src/app/scrap.txt"
+  ],
+  "tags": [
+    "structural", "directives", "template", "ngIf",
+    "ngSwitch", "ngFor"
+  ]
+}
diff --git a/aio/content/examples/styleguide/e2e/src/app.e2e-spec.ts b/aio/content/examples/styleguide/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..c1018c7dd3e6
--- /dev/null
+++ b/aio/content/examples/styleguide/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,193 @@
+'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');
+  });
+
+  // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat
+  xit('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);
+  });
+
+  // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat
+  xit('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/example-config.json b/aio/content/examples/styleguide/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/styleguide/src/01-01/app/app.component.css b/aio/content/examples/styleguide/src/01-01/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/styleguide/src/01-01/app/app.component.ts b/aio/content/examples/styleguide/src/01-01/app/app.component.ts
new file mode 100644
index 000000000000..7e7444d3aed2
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/app/app.component.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { HeroService } from './heroes';
+
+@Component({
+  selector: 'toh-app',
+  template: `
+      <toh-heroes></toh-heroes>
+    `,
+  styleUrls: ['./app.component.css'],
+  providers: [HeroService]
+})
+export class AppComponent {}
diff --git a/aio/content/examples/styleguide/src/01-01/app/app.module.ts b/aio/content/examples/styleguide/src/01-01/app/app.module.ts
new file mode 100644
index 000000000000..53f29ea8cba6
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/app/app.module.ts
@@ -0,0 +1,27 @@
+// #docplaster
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    // #enddocregion
+    RouterModule.forChild([{ path: '01-01', component: AppComponent }])
+    // #docregion
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion
+
+
diff --git a/aio/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts
new file mode 100644
index 000000000000..2ec03ca8b339
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts
@@ -0,0 +1,48 @@
+// #docregion
+/* avoid */
+import { Component, NgModule, OnInit } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+class Hero {
+  id: number;
+  name: string;
+}
+
+@Component({
+  selector: 'my-app',
+  template: `
+      <h1>{{title}}</h1>
+      <pre>{{heroes | json}}</pre>
+    `,
+  styleUrls: ['app/app.component.css']
+})
+class AppComponent implements OnInit {
+  title = 'Tour of Heroes';
+
+  heroes: Hero[] = [];
+
+  ngOnInit() {
+    getHeroes().then(heroes => (this.heroes = heroes));
+  }
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [AppComponent],
+  exports: [AppComponent],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+const HEROES: Hero[] = [
+  { id: 1, name: 'Bombasto' },
+  { id: 2, name: 'Tornado' },
+  { id: 3, name: 'Magneta' }
+];
+
+function getHeroes(): Promise<Hero[]> {
+  return Promise.resolve(HEROES); // TODO: get hero data from the server;
+}
diff --git a/aio/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..9e3546db9009
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts
@@ -0,0 +1,21 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroService } from './shared';
+
+@Component({
+  selector: 'toh-heroes',
+  template: `
+      <pre>{{heroes | json}}</pre>
+    `
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) {}
+
+  ngOnInit() {
+    this.heroService.getHeroes()
+      .then(heroes => this.heroes = heroes);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/01-01/app/heroes/index.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/index.ts
new file mode 100644
index 000000000000..a8d7f1d42200
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/app/heroes/index.ts
@@ -0,0 +1,2 @@
+export * from './shared';
+export * from './heroes.component';
diff --git a/aio/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts
new file mode 100644
index 000000000000..8f7cc205c88f
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts
new file mode 100644
index 000000000000..d94e5bacac52
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES } from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+  getHeroes() {
+    return Promise.resolve(HEROES);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..c0c1a87eb25d
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts
@@ -0,0 +1,3 @@
+export * from './hero.model';
+export * from './hero.service';
+export * from './mock-heroes';
diff --git a/aio/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts
new file mode 100644
index 000000000000..f3a0ef7ce4ef
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Hero } from './hero.model';
+
+export const HEROES: Hero[] = [
+  { id: 1, name: 'Bombasto' },
+  { id: 2, name: 'Tornado' },
+  { id: 3, name: 'Magneta' }
+];
diff --git a/aio/content/examples/styleguide/src/01-01/app/index.ts b/aio/content/examples/styleguide/src/01-01/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/01-01/main.ts b/aio/content/examples/styleguide/src/01-01/main.ts
new file mode 100644
index 000000000000..f332d1d2451e
--- /dev/null
+++ b/aio/content/examples/styleguide/src/01-01/main.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/styleguide/src/02-05/app/app.component.ts b/aio/content/examples/styleguide/src/02-05/app/app.component.ts
new file mode 100644
index 000000000000..66ebfa954e55
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-05/app/app.component.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'toh-app',
+  template: `
+      Tour of Heroes
+    `
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/02-05/app/app.module.ts b/aio/content/examples/styleguide/src/02-05/app/app.module.ts
new file mode 100644
index 000000000000..306ec125e031
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-05/app/app.module.ts
@@ -0,0 +1,23 @@
+// #docplaster
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    // #enddocregion
+    RouterModule.forChild([{ path: '02-05', component: AppComponent }])
+    // #docregion
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion
diff --git a/aio/content/examples/styleguide/src/02-05/main.ts b/aio/content/examples/styleguide/src/02-05/main.ts
new file mode 100644
index 000000000000..6c32161f84e0
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-05/main.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule }              from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .then(success => console.log(`Bootstrap success`))
+  .catch(err => console.error(err));
diff --git a/aio/content/examples/styleguide/src/02-07/app/app.component.ts b/aio/content/examples/styleguide/src/02-07/app/app.component.ts
new file mode 100644
index 000000000000..c82e12624d8d
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-07/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <toh-hero></toh-hero>
+    <admin-users></admin-users>
+  `
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/02-07/app/app.module.ts b/aio/content/examples/styleguide/src/02-07/app/app.module.ts
new file mode 100644
index 000000000000..4320fe67d5d7
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-07/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroComponent } from './heroes';
+import { UsersComponent } from './users';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '02-07', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroComponent,
+    UsersComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts b/aio/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts
new file mode 100644
index 000000000000..976fcb6cdfc6
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+// #docregion example
+/* avoid */
+
+// HeroComponent is in the Tour of Heroes feature
+@Component({
+  selector: 'hero'
+})
+export class HeroComponent {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts b/aio/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts
new file mode 100644
index 000000000000..44c04dd8558c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts
@@ -0,0 +1,13 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion example
+@Component({
+  // #enddocregion example
+  template: '<div>hero component</div>',
+  // #docregion example
+  selector: 'toh-hero'
+})
+export class HeroComponent {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/02-07/app/heroes/index.ts b/aio/content/examples/styleguide/src/02-07/app/heroes/index.ts
new file mode 100644
index 000000000000..084f36d7034b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-07/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './hero.component';
diff --git a/aio/content/examples/styleguide/src/02-07/app/index.ts b/aio/content/examples/styleguide/src/02-07/app/index.ts
new file mode 100644
index 000000000000..fc87f976b3fa
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-07/app/index.ts
@@ -0,0 +1,3 @@
+export * from './heroes';
+export * from './users';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/02-07/app/users/index.ts b/aio/content/examples/styleguide/src/02-07/app/users/index.ts
new file mode 100644
index 000000000000..475ba6d2a737
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-07/app/users/index.ts
@@ -0,0 +1 @@
+export * from './users.component';
diff --git a/aio/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts b/aio/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts
new file mode 100644
index 000000000000..9a5bd936e967
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+// #docregion example
+/* avoid */
+
+// UsersComponent is in an Admin feature
+@Component({
+  selector: 'users'
+})
+export class UsersComponent {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/02-07/app/users/users.component.ts b/aio/content/examples/styleguide/src/02-07/app/users/users.component.ts
new file mode 100644
index 000000000000..2fb6d54ebe09
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-07/app/users/users.component.ts
@@ -0,0 +1,13 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion example
+@Component({
+  // #enddocregion example
+  template: '<div>users component</div>',
+  // #docregion example
+  selector: 'admin-users'
+})
+export class UsersComponent {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/02-08/app/app.component.ts b/aio/content/examples/styleguide/src/02-08/app/app.component.ts
new file mode 100644
index 000000000000..bf27aeaf8a0e
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-08/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<input type="text" tohValidate>'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/02-08/app/app.module.ts b/aio/content/examples/styleguide/src/02-08/app/app.module.ts
new file mode 100644
index 000000000000..e840cc50a53f
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-08/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { InputHighlightDirective,
+         ValidateDirective } from './shared';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '02-08', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    InputHighlightDirective,
+    ValidateDirective
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/02-08/app/index.ts b/aio/content/examples/styleguide/src/02-08/app/index.ts
new file mode 100644
index 000000000000..ebe5c92f0391
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-08/app/index.ts
@@ -0,0 +1,2 @@
+export * from './shared';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/02-08/app/shared/index.ts b/aio/content/examples/styleguide/src/02-08/app/shared/index.ts
new file mode 100644
index 000000000000..b844b7549256
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-08/app/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './input-highlight.directive';
+export * from './validate.directive';
diff --git a/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts b/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts
new file mode 100644
index 000000000000..fd747719812b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({ selector: 'input'})
+/** Highlight the attached input text element in blue */
+export class InputHighlightDirective {
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = 'powderblue';
+  }
+}
diff --git a/aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts b/aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts
new file mode 100644
index 000000000000..b038f3707539
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Directive } from '@angular/core';
+// #docregion example
+/* avoid */
+
+@Directive({
+  selector: '[validate]'
+})
+export class ValidateDirective {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts b/aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts
new file mode 100644
index 000000000000..039afb846f7c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Directive } from '@angular/core';
+
+// #docregion example
+@Directive({
+  selector: '[tohValidate]'
+})
+export class ValidateDirective {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/03-01/app/app.component.ts b/aio/content/examples/styleguide/src/03-01/app/app.component.ts
new file mode 100644
index 000000000000..cb9479d2d904
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-01/app/app.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ExceptionService } from './core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>The expected error is {{errorCode}}</div>',
+  providers: [ExceptionService]
+})
+export class AppComponent implements OnInit {
+  errorCode: number;
+
+  constructor(private exceptionService: ExceptionService) { }
+
+  ngOnInit() {
+    this.errorCode = this.exceptionService.getException();
+  }
+}
diff --git a/aio/content/examples/styleguide/src/03-01/app/app.module.ts b/aio/content/examples/styleguide/src/03-01/app/app.module.ts
new file mode 100644
index 000000000000..48079f21c729
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-01/app/app.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '03-01', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts b/aio/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts
new file mode 100644
index 000000000000..0a22811fe324
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+// #docregion example
+/* avoid */
+
+export class exceptionService {
+  constructor() { }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/03-01/app/core/exception.service.ts b/aio/content/examples/styleguide/src/03-01/app/core/exception.service.ts
new file mode 100644
index 000000000000..dd77b4f7dc9c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-01/app/core/exception.service.ts
@@ -0,0 +1,14 @@
+// #docplaster
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+// #docregion example
+export class ExceptionService {
+  constructor() { }
+  // #enddocregion example
+  // testing harness
+  getException() { return 42; }
+  // #docregion example
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/03-01/app/core/index.ts b/aio/content/examples/styleguide/src/03-01/app/core/index.ts
new file mode 100644
index 000000000000..8acaa4bcf97d
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-01/app/core/index.ts
@@ -0,0 +1 @@
+export * from './exception.service';
diff --git a/aio/content/examples/styleguide/src/03-01/app/index.ts b/aio/content/examples/styleguide/src/03-01/app/index.ts
new file mode 100644
index 000000000000..e120e2dbfdc7
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-01/app/index.ts
@@ -0,0 +1,2 @@
+export * from './core';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/03-02/app/app.component.ts b/aio/content/examples/styleguide/src/03-02/app/app.component.ts
new file mode 100644
index 000000000000..132ea54c8560
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-02/app/app.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+import { heroesUrl, mockHeroes, VILLAINS_URL } from './core';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <div>Heroes url: {{heroesUrl}}</div>
+    <div>Villains url: {{villainsUrl}}</div>
+
+    <h4>Mock Heroes</h4>
+    <div *ngFor="let hero of heroes">{{hero}}</div>
+  `
+})
+export class AppComponent {
+  heroes      = mockHeroes;   // prefer
+  heroesUrl   = heroesUrl;    // prefer
+  villainsUrl = VILLAINS_URL; // tolerate
+}
diff --git a/aio/content/examples/styleguide/src/03-02/app/app.module.ts b/aio/content/examples/styleguide/src/03-02/app/app.module.ts
new file mode 100644
index 000000000000..2db4012ebf81
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-02/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '03-02', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/03-02/app/core/data.service.ts b/aio/content/examples/styleguide/src/03-02/app/core/data.service.ts
new file mode 100644
index 000000000000..5c26478c7b51
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-02/app/core/data.service.ts
@@ -0,0 +1,4 @@
+// #docregion
+export const mockHeroes   = ['Sam', 'Jill']; // prefer
+export const heroesUrl    = 'api/heroes';    // prefer
+export const VILLAINS_URL = 'api/villains';  // tolerate
diff --git a/aio/content/examples/styleguide/src/03-02/app/core/index.ts b/aio/content/examples/styleguide/src/03-02/app/core/index.ts
new file mode 100644
index 000000000000..2ba773ede8ed
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-02/app/core/index.ts
@@ -0,0 +1 @@
+export * from './data.service';
diff --git a/aio/content/examples/styleguide/src/03-02/app/index.ts b/aio/content/examples/styleguide/src/03-02/app/index.ts
new file mode 100644
index 000000000000..e120e2dbfdc7
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-02/app/index.ts
@@ -0,0 +1,2 @@
+export * from './core';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/03-03/app/app.component.ts b/aio/content/examples/styleguide/src/03-03/app/app.component.ts
new file mode 100644
index 000000000000..3ca522bc4577
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-03/app/app.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroCollectorService } from './core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>Our hero is {{hero.name}} and {{hero.power}}</div>',
+  providers: [HeroCollectorService]
+})
+export class AppComponent implements OnInit {
+  hero: Hero;
+
+  constructor(private heroCollectorService: HeroCollectorService) { }
+
+  ngOnInit() {
+    this.hero = this.heroCollectorService.getHero();
+  }
+}
diff --git a/aio/content/examples/styleguide/src/03-03/app/app.module.ts b/aio/content/examples/styleguide/src/03-03/app/app.module.ts
new file mode 100644
index 000000000000..29b3d2e76585
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-03/app/app.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '03-03', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..f481af18b6e8
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-03/app/core/hero-collector.service.avoid.ts
@@ -0,0 +1,15 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { Injectable } from '@angular/core';
+
+import { IHero } from './hero.model.avoid';
+
+@Injectable()
+export class HeroCollectorService {
+  hero: IHero;
+
+  constructor() { }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts b/aio/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts
new file mode 100644
index 000000000000..1df5c0deb009
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts
@@ -0,0 +1,25 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { Injectable } from '@angular/core';
+
+import { Hero } from './hero.model';
+
+@Injectable()
+export class HeroCollectorService {
+  hero: Hero;
+
+  constructor() { }
+  // #enddocregion example
+  // testing harness
+  getHero() {
+    this.hero = {
+      name: 'RubberMan',
+      power: 'He is so elastic'
+    };
+
+    return this.hero;
+  }
+  // #docregion example
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts b/aio/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts
new file mode 100644
index 000000000000..ce93b2c59a86
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts
@@ -0,0 +1,14 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+export interface IHero {
+  name: string;
+  power: string;
+}
+
+export class Hero implements IHero {
+  name: string;
+  power: string;
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/03-03/app/core/hero.model.ts b/aio/content/examples/styleguide/src/03-03/app/core/hero.model.ts
new file mode 100644
index 000000000000..c3277621cb0c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-03/app/core/hero.model.ts
@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+export class Hero {
+  name: string;
+  power: string;
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/03-03/app/core/index.ts b/aio/content/examples/styleguide/src/03-03/app/core/index.ts
new file mode 100644
index 000000000000..17ad67b0b1db
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-03/app/core/index.ts
@@ -0,0 +1,2 @@
+export * from './hero-collector.service';
+export * from './hero.model';
diff --git a/aio/content/examples/styleguide/src/03-03/app/index.ts b/aio/content/examples/styleguide/src/03-03/app/index.ts
new file mode 100644
index 000000000000..e120e2dbfdc7
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-03/app/index.ts
@@ -0,0 +1,2 @@
+export * from './core';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/03-04/app/app.component.ts b/aio/content/examples/styleguide/src/03-04/app/app.component.ts
new file mode 100644
index 000000000000..5aaf3402e159
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-04/app/app.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from './core';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <button (click)="show()">Show toast</button>
+    <button (click)="hide()">Hide toast</button>
+  `,
+  providers: [ToastService]
+})
+export class AppComponent implements OnInit {
+  constructor(private toastService: ToastService) { }
+
+  hide() {
+    this.toastService.hide();
+  }
+
+  show() {
+    this.toastService.show();
+  }
+
+  ngOnInit() {
+    this.toastService.activate('Hello Style Guide!');
+  }
+}
diff --git a/aio/content/examples/styleguide/src/03-04/app/app.module.ts b/aio/content/examples/styleguide/src/03-04/app/app.module.ts
new file mode 100644
index 000000000000..a5a8d5bb4ea3
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-04/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '03-04', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/03-04/app/core/index.ts b/aio/content/examples/styleguide/src/03-04/app/core/index.ts
new file mode 100644
index 000000000000..e78b628f9cb9
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-04/app/core/index.ts
@@ -0,0 +1 @@
+export * from './toast.service';
diff --git a/aio/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts b/aio/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts
new file mode 100644
index 000000000000..0f3a7c25eac1
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts
@@ -0,0 +1,27 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ToastService {
+  message: string;
+
+  private _toastCount: number;
+
+  hide() {
+    this._toastCount--;
+    this._log();
+  }
+
+  show() {
+    this._toastCount++;
+    this._log();
+  }
+
+  private _log() {
+    console.log(this.message);
+  }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/03-04/app/core/toast.service.ts b/aio/content/examples/styleguide/src/03-04/app/core/toast.service.ts
new file mode 100644
index 000000000000..ab148a1732d4
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-04/app/core/toast.service.ts
@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ToastService {
+  message: string;
+
+  private toastCount: number;
+
+  hide() {
+    this.toastCount--;
+    this.log();
+  }
+
+  show() {
+    this.toastCount++;
+    this.log();
+  }
+
+  private log() {
+    console.log(this.message);
+  }
+  // #enddocregion example
+  // testing harness
+  activate(message: string) {
+    this.message = message;
+  }
+  // #docregion example
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/03-04/app/index.ts b/aio/content/examples/styleguide/src/03-04/app/index.ts
new file mode 100644
index 000000000000..e120e2dbfdc7
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-04/app/index.ts
@@ -0,0 +1,2 @@
+export * from './core';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/03-06/app/app.component.html b/aio/content/examples/styleguide/src/03-06/app/app.component.html
new file mode 100644
index 000000000000..67fb0d5964c8
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/app.component.html
@@ -0,0 +1,6 @@
+<div>Actual favorite: {{favorite?.name}}</div>
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>
diff --git a/aio/content/examples/styleguide/src/03-06/app/app.component.ts b/aio/content/examples/styleguide/src/03-06/app/app.component.ts
new file mode 100644
index 000000000000..8ec308bc6a8a
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/app.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroService } from './heroes';
+import { ExceptionService, SpinnerService, ToastService } from './core';
+
+@Component({
+  selector: 'sg-app',
+  templateUrl: './app.component.html',
+  providers: [HeroService, ExceptionService, SpinnerService, ToastService]
+})
+export class AppComponent implements OnInit {
+  favorite: Hero;
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHero(1).subscribe(hero => this.favorite = hero);
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/03-06/app/app.module.ts b/aio/content/examples/styleguide/src/03-06/app/app.module.ts
new file mode 100644
index 000000000000..f259ce23a269
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '03-06', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/03-06/app/core/exception.service.ts b/aio/content/examples/styleguide/src/03-06/app/core/exception.service.ts
new file mode 100644
index 000000000000..7180c88e6b28
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/core/exception.service.ts
@@ -0,0 +1,4 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ExceptionService { }
diff --git a/aio/content/examples/styleguide/src/03-06/app/core/index.ts b/aio/content/examples/styleguide/src/03-06/app/core/index.ts
new file mode 100644
index 000000000000..e4e6723f915e
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/core/index.ts
@@ -0,0 +1,6 @@
+// #docregion
+// #docregion example
+export * from './exception.service';
+export * from './spinner';
+export * from './toast';
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/03-06/app/core/spinner/index.ts b/aio/content/examples/styleguide/src/03-06/app/core/spinner/index.ts
new file mode 100644
index 000000000000..1d619300c0e3
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/core/spinner/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './spinner.component';
+export * from './spinner.service';
diff --git a/aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts b/aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts
new file mode 100644
index 000000000000..1fd2a0150065
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+
+import { SpinnerService } from './spinner.service';
+
+@Component({
+  selector: 'toh-spinner',
+  template: '<div>spinner</div>'
+})
+
+export class SpinnerComponent implements OnDestroy, OnInit {
+  constructor(private spinnerService: SpinnerService) { }
+
+  ngOnInit() { }
+
+  ngOnDestroy() { }
+}
diff --git a/aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts b/aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts
new file mode 100644
index 000000000000..ad5d2ed6e05c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+export interface ISpinnerState { }
+
+@Injectable()
+export class SpinnerService {
+  spinnerState: any;
+
+  show() { }
+
+  hide() { }
+}
diff --git a/aio/content/examples/styleguide/src/03-06/app/core/toast/index.ts b/aio/content/examples/styleguide/src/03-06/app/core/toast/index.ts
new file mode 100644
index 000000000000..01b41aff985b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/core/toast/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './toast.component';
+export * from './toast.service';
diff --git a/aio/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts b/aio/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts
new file mode 100644
index 000000000000..dd0bba5eba83
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from './toast.service';
+
+@Component({
+  selector: 'toh-toast',
+  template: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}
diff --git a/aio/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts b/aio/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts
new file mode 100644
index 000000000000..e92e75ee455a
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ToastService {
+  activate: (message?: string, title?: string) => void;
+}
diff --git a/aio/content/examples/styleguide/src/03-06/app/heroes/index.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/index.ts
new file mode 100644
index 000000000000..c3da79f741bc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts
new file mode 100644
index 000000000000..c3277621cb0c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts
@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+export class Hero {
+  name: string;
+  power: string;
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..fea2e49d9941
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts
@@ -0,0 +1,29 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { ExceptionService, SpinnerService, ToastService } from '../../core';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Hero } from './hero.model';
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: HttpClient
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get<Hero>(`api/heroes/${id}`);
+  }
+
+  getHeroes() {
+    return this.http.get<Hero[]>(`api/heroes`);
+  }
+
+}
diff --git a/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
new file mode 100644
index 000000000000..0dd5931a7af2
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
@@ -0,0 +1,30 @@
+// #docregion
+// #docregion example
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { ExceptionService, SpinnerService, ToastService } from '../../core';
+import { Hero } from './hero.model';
+
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+  cachedHeroes: Hero[];
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: HttpClient
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get<Hero>(`api/heroes/${id}`);
+  }
+
+  getHeroes() {
+    return this.http.get<Hero[]>(`api/heroes`);
+  }
+
+}
diff --git a/aio/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..dbb150d3f80c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './hero.model';
+export * from './hero.service';
diff --git a/aio/content/examples/styleguide/src/03-06/app/index.ts b/aio/content/examples/styleguide/src/03-06/app/index.ts
new file mode 100644
index 000000000000..cf861e261a84
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/index.ts
@@ -0,0 +1,3 @@
+export * from './heroes';
+export * from './core';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts b/aio/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts
new file mode 100644
index 000000000000..e1c1ae6665ed
--- /dev/null
+++ b/aio/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from '../../core';
+
+@Component({
+  selector: 'toh-toast',
+  template: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}
diff --git a/aio/content/examples/styleguide/src/04-08/app/app.component.ts b/aio/content/examples/styleguide/src/04-08/app/app.component.ts
new file mode 100644
index 000000000000..fdd8e6ef561f
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-08/app/app.component.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/04-08/app/app.module.ts b/aio/content/examples/styleguide/src/04-08/app/app.module.ts
new file mode 100644
index 000000000000..25568b7fb47c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-08/app/app.module.ts
@@ -0,0 +1,28 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion example
+import { RouterModule }  from '@angular/router';
+// #docregion example
+
+import { AppComponent }    from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+// #enddocregion example
+    RouterModule.forChild([{ path: '04-08', component: AppComponent }])
+// #docregion example
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  entryComponents: [ AppComponent ]
+})
+export class AppModule {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..1244e68a4ada
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html
@@ -0,0 +1 @@
+<div>This is heroes component</div>
diff --git a/aio/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..e2df4c91fda9
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts
@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: './heroes.component.html'
+})
+export class HeroesComponent implements OnInit {
+  constructor() { /* ... */ }
+
+  ngOnInit() { /* ... */ }
+}
diff --git a/aio/content/examples/styleguide/src/04-10/app/app.component.ts b/aio/content/examples/styleguide/src/04-10/app/app.component.ts
new file mode 100644
index 000000000000..fdd8e6ef561f
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-10/app/app.component.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/04-10/app/app.module.ts b/aio/content/examples/styleguide/src/04-10/app/app.module.ts
new file mode 100644
index 000000000000..78106657ad48
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-10/app/app.module.ts
@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion example
+import { RouterModule }  from '@angular/router';
+// #docregion example
+
+import { AppComponent }    from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { SharedModule }    from './shared/shared.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    SharedModule,
+// #enddocregion example
+    RouterModule.forChild([{ path: '04-10', component: AppComponent }])
+// #docregion example
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  entryComponents: [ AppComponent ]
+})
+export class AppModule {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..170f76aee12d
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html
@@ -0,0 +1,8 @@
+<!--#docregion-->
+<div>This is heroes component</div>
+<ul>
+  <li *ngFor="let hero of filteredHeroes">
+    {{hero.name}}
+  </li>
+</ul>
+<toh-filter-text (changed)="filterChanged($event)"></toh-filter-text>
diff --git a/aio/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..376567650e3b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts
@@ -0,0 +1,27 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { FilterTextService } from '../shared/filter-text/filter-text.service';
+
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: './heroes.component.html'
+})
+export class HeroesComponent {
+
+  heroes = [
+    { id: 1, name: 'Windstorm' },
+    { id: 2, name: 'Bombasto' },
+    { id: 3, name: 'Magneta' },
+    { id: 4, name: 'Tornado' }
+  ];
+
+  filteredHeroes = this.heroes;
+
+  constructor(private filterService: FilterTextService) { }
+
+  filterChanged(searchText: string) {
+    this.filteredHeroes = this.filterService.filter(searchText, ['id', 'name'], this.heroes);
+  }
+}
+
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..fffe4bf0b704
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts
@@ -0,0 +1,26 @@
+// #docregion
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'toh-filter-text',
+  template: '<input type="text" id="filterText" [(ngModel)]="filter" (keyup)="filterChanged($event)" />'
+})
+export class FilterTextComponent {
+  @Output() changed: EventEmitter<string>;
+
+  filter: string;
+
+  constructor() {
+    this.changed = new EventEmitter<string>();
+  }
+
+  clear() {
+    this.filter = '';
+  }
+
+  filterChanged(event: any) {
+    event.preventDefault();
+    console.log(`Filter Changed: ${this.filter}`);
+    this.changed.emit(this.filter);
+  }
+}
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..87978e10e594
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts
@@ -0,0 +1,30 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class FilterTextService {
+  constructor() {
+    console.log('Created an instance of FilterTextService');
+  }
+
+  filter(data: string, props: Array<string>, originalList: Array<any>) {
+    let filteredList: any[];
+    if (data && props && originalList) {
+      data = data.toLowerCase();
+      let filtered = originalList.filter(item => {
+        let match = false;
+        for (let prop of props) {
+          if (item[prop].toString().toLowerCase().indexOf(data) > -1) {
+            match = true;
+            break;
+          }
+        };
+        return match;
+      });
+      filteredList = filtered;
+    } else {
+      filteredList = originalList;
+    }
+    return filteredList;
+  }
+}
diff --git a/aio/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts b/aio/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts
new file mode 100644
index 000000000000..5019bcb234fc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts
@@ -0,0 +1,7 @@
+// #docregion
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'initCaps' })
+export class InitCapsPipe implements PipeTransform {
+  transform = (value: string) => value;
+}
diff --git a/aio/content/examples/styleguide/src/04-10/app/shared/shared.module.ts b/aio/content/examples/styleguide/src/04-10/app/shared/shared.module.ts
new file mode 100644
index 000000000000..6160abcc841a
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-10/app/shared/shared.module.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule }   from '@angular/forms';
+
+import { FilterTextComponent } from './filter-text/filter-text.component';
+import { FilterTextService }   from './filter-text/filter-text.service';
+import { InitCapsPipe }        from './init-caps.pipe';
+
+@NgModule({
+  imports: [CommonModule, FormsModule],
+  declarations: [
+    FilterTextComponent,
+    InitCapsPipe
+  ],
+  providers: [FilterTextService],
+  exports: [
+    CommonModule,
+    FormsModule,
+    FilterTextComponent,
+    InitCapsPipe
+  ]
+})
+export class SharedModule { }
diff --git a/aio/content/examples/styleguide/src/04-11/app/app.component.ts b/aio/content/examples/styleguide/src/04-11/app/app.component.ts
new file mode 100644
index 000000000000..693619a98236
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/app.component.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'toh-app',
+  template: `
+    <toh-nav></toh-nav>
+    <toh-heroes></toh-heroes>
+    <toh-spinner></toh-spinner>
+  `
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/04-11/app/app.module.ts b/aio/content/examples/styleguide/src/04-11/app/app.module.ts
new file mode 100644
index 000000000000..ef3c156bcf48
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/app.module.ts
@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion example
+import { RouterModule } from '@angular/router';
+// #docregion example
+
+import { AppComponent }   from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { CoreModule }    from './core/core.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    CoreModule,
+// #enddocregion example
+    RouterModule.forChild([{ path: '04-11', component: AppComponent }])
+// #docregion example
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  entryComponents: [ AppComponent ]
+})
+export class AppModule {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/core.module.ts b/aio/content/examples/styleguide/src/04-11/app/core/core.module.ts
new file mode 100644
index 000000000000..4ba5c79a14b5
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/core/core.module.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoggerService } from './logger.service';
+import { NavComponent } from './nav/nav.component';
+import { SpinnerComponent } from './spinner/spinner.component';
+import { SpinnerService } from './spinner/spinner.service';
+
+@NgModule({
+  imports: [
+    CommonModule // we use ngFor
+  ],
+  exports: [NavComponent, SpinnerComponent],
+  declarations: [NavComponent, SpinnerComponent],
+  providers: [LoggerService, SpinnerService]
+})
+export class CoreModule { }
+
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/index.ts b/aio/content/examples/styleguide/src/04-11/app/core/index.ts
new file mode 100644
index 000000000000..098f40c7d592
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/core/index.ts
@@ -0,0 +1,4 @@
+// #docregion
+export * from './logger.service';
+export * from './spinner/spinner.service';
+export * from './nav/nav.component';
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/logger.service.ts b/aio/content/examples/styleguide/src/04-11/app/core/logger.service.ts
new file mode 100644
index 000000000000..9c7080f07a8c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/core/logger.service.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class LoggerService {
+  log(msg: string) {
+    console.log(msg);
+  }
+
+  error(msg: string) {
+    console.error(msg);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css
new file mode 100644
index 000000000000..45979c75ade6
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css
@@ -0,0 +1,56 @@
+/*#docregion*/
+.mdl-layout__header {
+  display: flex;
+  position: fixed;
+  background-color: #222;
+}
+
+.nav-link {
+  padding: 0 1em;
+  width: 100px;
+  color: rgba(255,255,255,.6);
+  text-align: center;
+  text-decoration: none;
+}
+
+.nav-link.router-link-active {
+  color: rgba(255,255,255, 1);
+}
+
+.nav-link.router-link-active::after {
+    height: 3px;
+    width: 100%;
+    display: block;
+    content: " ";
+    bottom: 0;
+    left: 0;
+    position: inherit;
+    background: rgb(83,109,254);
+}
+
+.mdl-layout__header-row {
+  height: 56px;
+  padding: 0 16px 0 72px;
+  padding-left: 8px;
+  background-color: #673AB7;
+  background: #0033FF;
+  background-color: #222;
+}
+
+#reset-button {
+  position: fixed;
+  right: 2em;
+  top: 1em;
+}
+
+@media (max-width: 480px) {
+  #reset-button {
+    display: none
+  }
+}
+
+@media (max-width: 320px) {
+  a.nav-link {
+    font-size: 12px;
+  }
+}
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html
new file mode 100644
index 000000000000..b3c7e441e0a4
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html
@@ -0,0 +1,14 @@
+<!--#docregion-->
+<header>
+  <div>
+    <h4>Tour of Heroes</h4>
+  </div>
+  <nav>
+    <ul>
+      <li *ngFor="let item of menuItems">
+        {{item}}
+      </li>
+    </ul>
+  </nav>
+  <br/>
+</header>
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts
new file mode 100644
index 000000000000..7e21016e2be2
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'toh-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.css'],
+})
+export class NavComponent implements OnInit {
+  menuItems = [
+    'Heroes',
+    'Villains',
+    'Other'
+  ];
+
+  ngOnInit() {  }
+
+  constructor() { }
+}
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css
new file mode 100644
index 000000000000..afad0fe8e3f9
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css
@@ -0,0 +1,21 @@
+/*#docregion*/
+.spinner {
+  position: absolute;
+  left: 7em;
+  top: 20em;
+  position: absolute;
+  background-color: blue;
+  height: .3em;
+  width: 6em;
+  margin:-60px 0 0 -60px;
+  -webkit-animation:spin 4s linear infinite;
+  -moz-animation:spin 4s linear infinite;
+  animation:spin 4s linear infinite;
+}
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
+.spinner-hidden {
+  display:none;
+}
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html
new file mode 100644
index 000000000000..a07e3378c0b5
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html
@@ -0,0 +1,2 @@
+<!--#docregion-->
+<div class="spinner" [class.spinner-hidden]="!visible"> </div>
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts
new file mode 100644
index 000000000000..cb8a4161026c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts
@@ -0,0 +1,35 @@
+// #docregion
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { LoggerService } from '../logger.service';
+import { SpinnerState, SpinnerService } from './spinner.service';
+
+@Component({
+  selector: 'toh-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.css']
+})
+export class SpinnerComponent implements OnDestroy, OnInit {
+  visible = false;
+
+  private spinnerStateChanged: Subscription;
+
+  constructor(
+    private loggerService: LoggerService,
+    private spinnerService: SpinnerService
+  ) { }
+
+  ngOnInit() {
+    console.log(this.visible);
+    this.spinnerStateChanged = this.spinnerService.spinnerState
+      .subscribe((state: SpinnerState) => {
+        this.visible = state.show;
+        this.loggerService.log(`visible=${this.visible}`);
+      });
+  }
+
+  ngOnDestroy() {
+    this.spinnerStateChanged.unsubscribe();
+  }
+}
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts
new file mode 100644
index 000000000000..e092d4bfda06
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+export interface SpinnerState {
+  show: boolean;
+}
+
+@Injectable()
+export class SpinnerService {
+  private spinnerSubject = new Subject<SpinnerState>();
+
+  spinnerState = this.spinnerSubject.asObservable();
+
+  constructor() { }
+
+  show() {
+    this.spinnerSubject.next(<SpinnerState>{ show: true });
+  }
+
+  hide() {
+    this.spinnerSubject.next(<SpinnerState>{ show: false });
+  }
+}
diff --git a/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..9035a4b8ffe3
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html
@@ -0,0 +1,12 @@
+<!--#docregion-->
+<div>
+
+	<button (click)="getHeroes()">Get Heroes</button>
+
+	<ul>
+		<li *ngFor="let hero of heroes">
+			{{hero.name}}
+		</li>
+	</ul>
+
+</div>
diff --git a/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..856baadd74b1
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+import { LoggerService }  from '../core/logger.service';
+import { SpinnerService } from '../core/spinner/spinner.service';
+
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: './heroes.component.html'
+})
+export class HeroesComponent {
+  heroes: any[];
+
+  constructor(
+    private loggerService: LoggerService,
+    private spinnerService: SpinnerService
+  ) { }
+
+  getHeroes() {
+    this.loggerService.log(`Getting heroes`);
+    this.spinnerService.show();
+    setTimeout(() => {
+      this.heroes = [
+        { id: 1, name: 'Windstorm' },
+        { id: 2, name: 'Bombasto' },
+        { id: 3, name: 'Magneta' },
+        { id: 4, name: 'Tornado' }
+      ];
+      this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
+      this.spinnerService.hide();
+    }, 2000);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/04-12/app/app.component.ts b/aio/content/examples/styleguide/src/04-12/app/app.component.ts
new file mode 100644
index 000000000000..dc85b06e9fbe
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/app.component.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'toh-app',
+  template: `
+    <toh-nav></toh-nav>
+    <toh-heroes></toh-heroes>
+  `
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/04-12/app/app.module.ts b/aio/content/examples/styleguide/src/04-12/app/app.module.ts
new file mode 100644
index 000000000000..7c9fb44182cc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/app.module.ts
@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion example
+import { RouterModule } from '@angular/router';
+// #docregion example
+
+import { AppComponent }   from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { CoreModule }    from './core/core.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    CoreModule,
+// #enddocregion example
+    RouterModule.forChild([{ path: '04-12', component: AppComponent }])
+// #docregion example
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  entryComponents: [ AppComponent ]
+})
+export class AppModule {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/04-12/app/core/core.module.ts b/aio/content/examples/styleguide/src/04-12/app/core/core.module.ts
new file mode 100644
index 000000000000..069141bf2a61
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/core/core.module.ts
@@ -0,0 +1,21 @@
+// #docregion
+import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoggerService } from './logger.service';
+import { NavComponent } from './nav/nav.component';
+import { throwIfAlreadyLoaded } from './module-import-guard';
+
+@NgModule({
+  imports: [
+    CommonModule // we use ngFor
+  ],
+  exports: [NavComponent],
+  declarations: [NavComponent],
+  providers: [LoggerService]
+})
+export class CoreModule {
+  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
+    throwIfAlreadyLoaded(parentModule, 'CoreModule');
+  }
+}
diff --git a/aio/content/examples/styleguide/src/04-12/app/core/index.ts b/aio/content/examples/styleguide/src/04-12/app/core/index.ts
new file mode 100644
index 000000000000..8768b77f4152
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/core/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './logger.service';
+export * from './nav/nav.component';
diff --git a/aio/content/examples/styleguide/src/04-12/app/core/logger.service.ts b/aio/content/examples/styleguide/src/04-12/app/core/logger.service.ts
new file mode 100644
index 000000000000..9c7080f07a8c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/core/logger.service.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class LoggerService {
+  log(msg: string) {
+    console.log(msg);
+  }
+
+  error(msg: string) {
+    console.error(msg);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts b/aio/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts
new file mode 100644
index 000000000000..5248b15b2e27
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts
@@ -0,0 +1,6 @@
+// #docregion
+export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
+  if (parentModule) {
+    throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css
new file mode 100644
index 000000000000..45979c75ade6
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css
@@ -0,0 +1,56 @@
+/*#docregion*/
+.mdl-layout__header {
+  display: flex;
+  position: fixed;
+  background-color: #222;
+}
+
+.nav-link {
+  padding: 0 1em;
+  width: 100px;
+  color: rgba(255,255,255,.6);
+  text-align: center;
+  text-decoration: none;
+}
+
+.nav-link.router-link-active {
+  color: rgba(255,255,255, 1);
+}
+
+.nav-link.router-link-active::after {
+    height: 3px;
+    width: 100%;
+    display: block;
+    content: " ";
+    bottom: 0;
+    left: 0;
+    position: inherit;
+    background: rgb(83,109,254);
+}
+
+.mdl-layout__header-row {
+  height: 56px;
+  padding: 0 16px 0 72px;
+  padding-left: 8px;
+  background-color: #673AB7;
+  background: #0033FF;
+  background-color: #222;
+}
+
+#reset-button {
+  position: fixed;
+  right: 2em;
+  top: 1em;
+}
+
+@media (max-width: 480px) {
+  #reset-button {
+    display: none
+  }
+}
+
+@media (max-width: 320px) {
+  a.nav-link {
+    font-size: 12px;
+  }
+}
diff --git a/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html
new file mode 100644
index 000000000000..b3c7e441e0a4
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html
@@ -0,0 +1,14 @@
+<!--#docregion-->
+<header>
+  <div>
+    <h4>Tour of Heroes</h4>
+  </div>
+  <nav>
+    <ul>
+      <li *ngFor="let item of menuItems">
+        {{item}}
+      </li>
+    </ul>
+  </nav>
+  <br/>
+</header>
diff --git a/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts
new file mode 100644
index 000000000000..7e21016e2be2
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'toh-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.css'],
+})
+export class NavComponent implements OnInit {
+  menuItems = [
+    'Heroes',
+    'Villains',
+    'Other'
+  ];
+
+  ngOnInit() {  }
+
+  constructor() { }
+}
diff --git a/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..9035a4b8ffe3
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html
@@ -0,0 +1,12 @@
+<!--#docregion-->
+<div>
+
+	<button (click)="getHeroes()">Get Heroes</button>
+
+	<ul>
+		<li *ngFor="let hero of heroes">
+			{{hero.name}}
+		</li>
+	</ul>
+
+</div>
diff --git a/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..f84b16c1406e
--- /dev/null
+++ b/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+import { LoggerService } from '../core/logger.service';
+
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: './heroes.component.html'
+})
+export class HeroesComponent {
+  heroes: any[];
+
+  constructor(private loggerService: LoggerService) { }
+
+  getHeroes() {
+    this.loggerService.log(`Getting heroes`);
+    this.heroes = [
+      { id: 1, name: 'Windstorm' },
+      { id: 2, name: 'Bombasto' },
+      { id: 3, name: 'Magneta' },
+      { id: 4, name: 'Tornado' }
+    ];
+    this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/05-02/app/app.component.html b/aio/content/examples/styleguide/src/05-02/app/app.component.html
new file mode 100644
index 000000000000..607d068557b0
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-02/app/app.component.html
@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero-button></toh-hero-button>
diff --git a/aio/content/examples/styleguide/src/05-02/app/app.component.ts b/aio/content/examples/styleguide/src/05-02/app/app.component.ts
new file mode 100644
index 000000000000..7c9f37919f41
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-02/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/05-02/app/app.module.ts b/aio/content/examples/styleguide/src/05-02/app/app.module.ts
new file mode 100644
index 000000000000..1c458e2ca175
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-02/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent } from './heroes';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '05-02', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroButtonComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/05-02/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-02/app/heroes/index.ts
new file mode 100644
index 000000000000..c3da79f741bc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-02/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..e48d41f72180
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -0,0 +1,11 @@
+// #docplaster
+import { Component } from '@angular/core';
+// #docregion example
+/* avoid */
+
+@Component({
+  selector: 'tohHeroButton',
+  templateUrl: './hero-button.component.html'
+})
+export class HeroButtonComponent {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..9ad67e50ac03
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html
@@ -0,0 +1 @@
+<button class="hero-button">Hero button</button>
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..c90c966f1af4
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-button',
+  templateUrl: './hero-button.component.html'
+})
+export class HeroButtonComponent {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..6bb67c56704c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/index.ts
@@ -0,0 +1 @@
+export * from './hero-button.component';
diff --git a/aio/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..2334d49c9add
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts
@@ -0,0 +1 @@
+export * from './hero-button';
diff --git a/aio/content/examples/styleguide/src/05-02/app/index.ts b/aio/content/examples/styleguide/src/05-02/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-02/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/05-03/app/app.component.avoid.html b/aio/content/examples/styleguide/src/05-03/app/app.component.avoid.html
new file mode 100644
index 000000000000..91bdbe403c8d
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/app.component.avoid.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<!-- avoid -->
+
+<div tohHeroButton></div>
diff --git a/aio/content/examples/styleguide/src/05-03/app/app.component.html b/aio/content/examples/styleguide/src/05-03/app/app.component.html
new file mode 100644
index 000000000000..607d068557b0
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/app.component.html
@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero-button></toh-hero-button>
diff --git a/aio/content/examples/styleguide/src/05-03/app/app.component.ts b/aio/content/examples/styleguide/src/05-03/app/app.component.ts
new file mode 100644
index 000000000000..7c9f37919f41
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/05-03/app/app.module.ts b/aio/content/examples/styleguide/src/05-03/app/app.module.ts
new file mode 100644
index 000000000000..1b754e3ee508
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent } from './heroes';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '05-03', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroButtonComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/05-03/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-03/app/heroes/index.ts
new file mode 100644
index 000000000000..c3da79f741bc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..74f5c36339dc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+// #docregion example
+/* avoid */
+
+@Component({
+  selector: '[tohHeroButton]',
+  templateUrl: './hero-button.component.html'
+})
+export class HeroButtonComponent {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..9ad67e50ac03
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html
@@ -0,0 +1 @@
+<button class="hero-button">Hero button</button>
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..c90c966f1af4
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-button',
+  templateUrl: './hero-button.component.html'
+})
+export class HeroButtonComponent {}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..6bb67c56704c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/index.ts
@@ -0,0 +1 @@
+export * from './hero-button.component';
diff --git a/aio/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..2334d49c9add
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts
@@ -0,0 +1 @@
+export * from './hero-button';
diff --git a/aio/content/examples/styleguide/src/05-03/app/index.ts b/aio/content/examples/styleguide/src/05-03/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-03/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/05-04/app/app.component.ts b/aio/content/examples/styleguide/src/05-04/app/app.component.ts
new file mode 100644
index 000000000000..0e43893f7feb
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/05-04/app/app.module.ts b/aio/content/examples/styleguide/src/05-04/app/app.module.ts
new file mode 100644
index 000000000000..07f97cc6e4e1
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/app.module.ts
@@ -0,0 +1,21 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule }  from '@angular/router';
+
+import { AppComponent }    from './app.component';
+import { HeroesComponent } from './heroes';
+import { HeroService }     from './heroes/shared';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '05-04', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  providers: [ HeroService ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts
new file mode 100644
index 000000000000..89e5d1b0103b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts
@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable }        from 'rxjs';
+
+import { Hero, HeroService } from './shared';
+
+// #docregion example
+/* avoid */
+
+@Component({
+  selector: 'toh-heroes',
+  template: `
+    <div>
+      <h2>My Heroes</h2>
+      <ul class="heroes">
+        <li *ngFor="let hero of heroes | async" (click)="selectedHero=hero">
+          <span class="badge">{{hero.id}}</span> {{hero.name}}
+        </li>
+      </ul>
+      <div *ngIf="selectedHero">
+        <h2>{{selectedHero.name | uppercase}} is my hero</h2>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .heroes {
+      margin: 0 0 2em 0;
+      list-style-type: none;
+      padding: 0;
+      width: 15em;
+    }
+    .heroes li {
+      cursor: pointer;
+      position: relative;
+      left: 0;
+      background-color: #EEE;
+      margin: .5em;
+      padding: .3em 0;
+      height: 1.6em;
+      border-radius: 4px;
+    }
+    .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;
+    }
+  `]
+})
+export class HeroesComponent implements OnInit {
+  heroes: Observable<Hero[]>;
+  selectedHero: Hero;
+
+ constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroes = this.heroService.getHeroes();
+  }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
new file mode 100644
index 000000000000..f042cd85f73a
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
@@ -0,0 +1,31 @@
+/* #docregion */
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.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;
+}
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..bab05ceb2b27
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
@@ -0,0 +1,12 @@
+<!-- #docregion -->
+<div>
+  <h2>My Heroes</h2>
+  <ul class="heroes">
+    <li *ngFor="let hero of heroes | async" (click)="selectedHero=hero">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </li>
+  </ul>
+  <div *ngIf="selectedHero">
+    <h2>{{selectedHero.name | uppercase}} is my hero</h2>
+  </div>
+</div>
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..b85c5b70ab19
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable }        from 'rxjs';
+
+import { Hero, HeroService } from './shared';
+
+// #docregion example
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls:  ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  heroes: Observable<Hero[]>;
+  selectedHero: Hero;
+
+ constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroes = this.heroService.getHeroes();
+  }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/index.ts
new file mode 100644
index 000000000000..a8d7f1d42200
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/index.ts
@@ -0,0 +1,2 @@
+export * from './shared';
+export * from './heroes.component';
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts
new file mode 100644
index 000000000000..8f7cc205c88f
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts
new file mode 100644
index 000000000000..a12fdf487e06
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Http }       from '@angular/http';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { Hero }       from './hero.model';
+
+@Injectable()
+export class HeroService {
+
+  constructor(private http: Http) {}
+
+  getHeroes(): Observable<Hero[]> {
+    return this.http.get('api/heroes').pipe(
+      map(resp => resp.json().data as Hero[])
+    );
+  }
+}
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..dbb150d3f80c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './hero.model';
+export * from './hero.service';
diff --git a/aio/content/examples/styleguide/src/05-04/app/index.ts b/aio/content/examples/styleguide/src/05-04/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-04/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/05-12/app/app.component.ts b/aio/content/examples/styleguide/src/05-12/app/app.component.ts
new file mode 100644
index 000000000000..dac40205c970
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-12/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-button label="OK"></toh-hero-button>'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/05-12/app/app.module.ts b/aio/content/examples/styleguide/src/05-12/app/app.module.ts
new file mode 100644
index 000000000000..5177b2cc64ef
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-12/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent } from './heroes';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '05-12', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroButtonComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/05-12/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-12/app/heroes/index.ts
new file mode 100644
index 000000000000..c3da79f741bc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-12/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..8f393ddd32fe
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Component, EventEmitter } from '@angular/core';
+// #docregion example
+/* avoid */
+
+@Component({
+  selector: 'toh-hero-button',
+  template: `<button></button>`,
+  inputs: [
+    'label'
+  ],
+  outputs: [
+    'change'
+  ]
+})
+export class HeroButtonComponent {
+  change = new EventEmitter<any>();
+  label: string;
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..b29974076579
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-button',
+  template: `<button>{{label}}</button>`
+})
+export class HeroButtonComponent {
+  @Output() change = new EventEmitter<any>();
+  @Input() label: string;
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..6bb67c56704c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/index.ts
@@ -0,0 +1 @@
+export * from './hero-button.component';
diff --git a/aio/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..2334d49c9add
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts
@@ -0,0 +1 @@
+export * from './hero-button';
diff --git a/aio/content/examples/styleguide/src/05-12/app/index.ts b/aio/content/examples/styleguide/src/05-12/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-12/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/05-13/app/app.component.avoid.html b/aio/content/examples/styleguide/src/05-13/app/app.component.avoid.html
new file mode 100644
index 000000000000..0a263a6a95da
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/app.component.avoid.html
@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<!-- avoid -->
+
+<toh-hero-button labelAttribute="OK" (changeEvent)="doSomething()">
+</toh-hero-button>
diff --git a/aio/content/examples/styleguide/src/05-13/app/app.component.html b/aio/content/examples/styleguide/src/05-13/app/app.component.html
new file mode 100644
index 000000000000..3cd94ca77242
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/app.component.html
@@ -0,0 +1,6 @@
+<!-- #docregion -->
+<toh-hero-button label="OK" (change)="doSomething()">
+</toh-hero-button>
+
+<!-- `heroHighlight` is both the directive name and the data-bound aliased property name -->
+<h3 heroHighlight="skyblue">The Great Bombasto</h3>
diff --git a/aio/content/examples/styleguide/src/05-13/app/app.component.ts b/aio/content/examples/styleguide/src/05-13/app/app.component.ts
new file mode 100644
index 000000000000..7c9f37919f41
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/05-13/app/app.module.ts b/aio/content/examples/styleguide/src/05-13/app/app.module.ts
new file mode 100644
index 000000000000..7ebe91dbbcfe
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent, HeroHighlightDirective } from './heroes';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '05-13', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroButtonComponent, HeroHighlightDirective
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/05-13/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/index.ts
new file mode 100644
index 000000000000..c3da79f741bc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..4e67a1411381
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -0,0 +1,14 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+// #docregion example
+/* avoid pointless aliasing */
+
+@Component({
+  selector: 'toh-hero-button',
+  template: `<button>{{label}}</button>`
+})
+export class HeroButtonComponent {
+  // Pointless aliases
+  @Output('changeEvent') change = new EventEmitter<any>();
+  @Input('labelAttribute') label: string;
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..af6e7d46b732
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-button',
+  template: `<button>{{label}}</button>`
+})
+export class HeroButtonComponent {
+  // No aliases
+  @Output() change = new EventEmitter<any>();
+  @Input() label: string;
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..6bb67c56704c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts
@@ -0,0 +1 @@
+export * from './hero-button.component';
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..737af31f4fe5
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
+
+@Directive({ selector: '[heroHighlight]' })
+export class HeroHighlightDirective implements OnChanges {
+
+  // Aliased because `color` is a better property name than `heroHighlight`
+  @Input('heroHighlight') color: string;
+
+  constructor(private el: ElementRef) {}
+
+  ngOnChanges() {
+    this.el.nativeElement.style.backgroundColor = this.color || 'yellow';
+  }
+}
diff --git a/aio/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..565f46cf4fa5
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './hero-button';
+export * from './hero-highlight.directive';
diff --git a/aio/content/examples/styleguide/src/05-13/app/index.ts b/aio/content/examples/styleguide/src/05-13/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-13/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/05-14/app/app.component.ts b/aio/content/examples/styleguide/src/05-14/app/app.component.ts
new file mode 100644
index 000000000000..8ed6da4c8222
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-14/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: `<toh-toast></toh-toast>`
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/05-14/app/app.module.ts b/aio/content/examples/styleguide/src/05-14/app/app.module.ts
new file mode 100644
index 000000000000..0b294573d271
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-14/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { ToastComponent } from './shared';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '05-14', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    ToastComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/05-14/app/index.ts b/aio/content/examples/styleguide/src/05-14/app/index.ts
new file mode 100644
index 000000000000..ebe5c92f0391
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-14/app/index.ts
@@ -0,0 +1,2 @@
+export * from './shared';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/05-14/app/shared/index.ts b/aio/content/examples/styleguide/src/05-14/app/shared/index.ts
new file mode 100644
index 000000000000..7ff6d415e707
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-14/app/shared/index.ts
@@ -0,0 +1 @@
+export * from './toast';
diff --git a/aio/content/examples/styleguide/src/05-14/app/shared/toast/index.ts b/aio/content/examples/styleguide/src/05-14/app/shared/toast/index.ts
new file mode 100644
index 000000000000..6502de796e08
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-14/app/shared/toast/index.ts
@@ -0,0 +1 @@
+export * from './toast.component';
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..037ff2c8b593
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts
@@ -0,0 +1,40 @@
+// #docregion
+import { OnInit } from '@angular/core';
+// #docregion example
+/* avoid */
+
+export class ToastComponent implements OnInit {
+
+  private defaults = {
+    title: '',
+    message: 'May the Force be with you'
+  };
+  message: string;
+  title: string;
+  private toastElement: any;
+
+  ngOnInit() {
+    this.toastElement = document.getElementById('toh-toast');
+  }
+
+  // private methods
+  private hide() {
+    this.toastElement.style.opacity = 0;
+    window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
+  }
+
+  activate(message = this.defaults.message, title = this.defaults.title) {
+    this.title = title;
+    this.message = message;
+    this.show();
+  }
+
+  private show() {
+    console.log(this.message);
+    this.toastElement.style.opacity = 1;
+    this.toastElement.style.zIndex = 9999;
+
+    window.setTimeout(() => this.hide(), 2500);
+  }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts b/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts
new file mode 100644
index 000000000000..d7b8ea4af09e
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts
@@ -0,0 +1,45 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'toh-toast',
+  template: `...`
+})
+// #docregion example
+export class ToastComponent implements OnInit {
+  // public properties
+  message: string;
+  title: string;
+
+  // private fields
+  private defaults = {
+    title: '',
+    message: 'May the Force be with you'
+  };
+  private toastElement: any;
+
+  // public methods
+  activate(message = this.defaults.message, title = this.defaults.title) {
+    this.title = title;
+    this.message = message;
+    this.show();
+  }
+
+  ngOnInit() {
+    this.toastElement = document.getElementById('toh-toast');
+  }
+
+  // private methods
+  private hide() {
+    this.toastElement.style.opacity = 0;
+    window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
+  }
+
+  private show() {
+    console.log(this.message);
+    this.toastElement.style.opacity = 1;
+    this.toastElement.style.zIndex = 9999;
+    window.setTimeout(() => this.hide(), 2500);
+  }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/05-15/app/app.component.ts b/aio/content/examples/styleguide/src/05-15/app/app.component.ts
new file mode 100644
index 000000000000..91b569b1e7e6
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-15/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroService } from './heroes';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-list></toh-hero-list>',
+  providers: [HeroService]
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/05-15/app/app.module.ts b/aio/content/examples/styleguide/src/05-15/app/app.module.ts
new file mode 100644
index 000000000000..9bd4b8c9a2af
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-15/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroListComponent } from './heroes';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '05-15', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroListComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..8f9334b468d1
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts
@@ -0,0 +1,37 @@
+// #docregion
+/* avoid */
+
+import { OnInit } from '@angular/core';
+import { Http, Response } from '@angular/http';
+
+import { Observable } from 'rxjs';
+import { catchError, finalize, map } from 'rxjs/operators';
+
+import { Hero } from '../shared/hero.model';
+
+const heroesUrl = 'http://angular.io';
+
+export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+  constructor(private http: Http) {}
+  getHeroes() {
+    this.heroes = [];
+    this.http.get(heroesUrl).pipe(
+      map((response: Response) => <Hero[]>response.json().data),
+      catchError(this.catchBadResponse),
+      finalize(() => this.hideSpinner())
+    ).subscribe((heroes: Hero[]) => this.heroes = heroes);
+  }
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  private catchBadResponse(err: any, source: Observable<any>) {
+    // log and handle the exception
+    return new Observable();
+  }
+
+  private hideSpinner() {
+    // hide the spinner
+  }
+}
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..1fdb893c13e6
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts
@@ -0,0 +1,23 @@
+// #docregion example
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroService } from '../shared';
+
+@Component({
+  selector: 'toh-hero-list',
+  template: `...`
+})
+export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+  constructor(private heroService: HeroService) {}
+  getHeroes() {
+    this.heroes = [];
+    this.heroService.getHeroes()
+      .subscribe(heroes => this.heroes = heroes);
+  }
+  ngOnInit() {
+    this.getHeroes();
+  }
+}
+// #enddocregion example
+
diff --git a/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts
new file mode 100644
index 000000000000..c4bcb3278ed6
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts
@@ -0,0 +1 @@
+export * from './hero-list.component';
diff --git a/aio/content/examples/styleguide/src/05-15/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/index.ts
new file mode 100644
index 000000000000..f1112f1c7cc5
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-15/app/heroes/index.ts
@@ -0,0 +1,2 @@
+export * from './hero-list';
+export * from './shared';
diff --git a/aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts
new file mode 100644
index 000000000000..8f7cc205c88f
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts
new file mode 100644
index 000000000000..3f8e476766e0
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { of } from 'rxjs';
+
+import { Hero } from './hero.model';
+
+@Injectable()
+export class HeroService {
+  getHeroes() {
+    let heroes: Hero[] = [];
+    return of(heroes);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..27516fdedd0c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './hero.model';
+export * from './hero.service';
diff --git a/aio/content/examples/styleguide/src/05-15/app/index.ts b/aio/content/examples/styleguide/src/05-15/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-15/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/05-16/app/app.component.avoid.html b/aio/content/examples/styleguide/src/05-16/app/app.component.avoid.html
new file mode 100644
index 000000000000..2c0cea58e241
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-16/app/app.component.avoid.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<!-- avoid -->
+
+<toh-hero (onSavedTheDay)="onSavedTheDay($event)"></toh-hero>
diff --git a/aio/content/examples/styleguide/src/05-16/app/app.component.html b/aio/content/examples/styleguide/src/05-16/app/app.component.html
new file mode 100644
index 000000000000..4883a6940a30
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-16/app/app.component.html
@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero (savedTheDay)="onSavedTheDay($event)"></toh-hero>
diff --git a/aio/content/examples/styleguide/src/05-16/app/app.component.ts b/aio/content/examples/styleguide/src/05-16/app/app.component.ts
new file mode 100644
index 000000000000..7c9f37919f41
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-16/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/05-16/app/app.module.ts b/aio/content/examples/styleguide/src/05-16/app/app.module.ts
new file mode 100644
index 000000000000..c3fb36f8accb
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-16/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroComponent } from './heroes';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '05-16', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts b/aio/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts
new file mode 100644
index 000000000000..823aa2e1c7ce
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Component, EventEmitter, Output } from '@angular/core';
+// #docregion example
+/* avoid */
+
+@Component({
+  selector: 'toh-hero',
+  template: `...`
+})
+export class HeroComponent {
+  @Output() onSavedTheDay = new EventEmitter<boolean>();
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts b/aio/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts
new file mode 100644
index 000000000000..bbd4a4b5f39d
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'toh-hero',
+  template: `...`
+})
+// #docregion example
+export class HeroComponent {
+  @Output() savedTheDay = new EventEmitter<boolean>();
+}
+// #enddocregion example
+
+
diff --git a/aio/content/examples/styleguide/src/05-16/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-16/app/heroes/index.ts
new file mode 100644
index 000000000000..084f36d7034b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-16/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './hero.component';
diff --git a/aio/content/examples/styleguide/src/05-16/app/index.ts b/aio/content/examples/styleguide/src/05-16/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-16/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/05-17/app/app.component.ts b/aio/content/examples/styleguide/src/05-17/app/app.component.ts
new file mode 100644
index 000000000000..86728b8b801b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-list></toh-hero-list>'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/05-17/app/app.module.ts b/aio/content/examples/styleguide/src/05-17/app/app.module.ts
new file mode 100644
index 000000000000..e850d80ae39b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/app.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroComponent, HeroListComponent } from './heroes';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '05-17', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroComponent,
+    HeroListComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..f0075129494d
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { Hero } from '../shared/hero.model';
+// #docregion example
+/* avoid */
+
+@Component({
+  selector: 'toh-hero-list',
+  template: `
+    <section>
+      Our list of heroes:
+      <hero-profile *ngFor="let hero of heroes" [hero]="hero">
+      </hero-profile>
+      Total powers: {{totalPowers}}<br>
+      Average power: {{totalPowers / heroes.length}}
+    </section>
+  `
+})
+export class HeroListComponent {
+  heroes: Hero[];
+  totalPowers: number;
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..5f18cc5b0c5b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts
@@ -0,0 +1,35 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+import { Hero } from '../shared/hero.model';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-list',
+  template: `
+    <section>
+      Our list of heroes:
+      <toh-hero *ngFor="let hero of heroes" [hero]="hero">
+      </toh-hero>
+      Total powers: {{totalPowers}}<br>
+      Average power: {{avgPower}}
+    </section>
+  `
+})
+export class HeroListComponent {
+  heroes: Hero[];
+  totalPowers: number;
+
+  // #enddocregion example
+  // testing harness
+  constructor() {
+    this.heroes = [];
+  }
+
+  // #docregion example
+  get avgPower() {
+    return this.totalPowers / this.heroes.length;
+  }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts
new file mode 100644
index 000000000000..c4bcb3278ed6
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts
@@ -0,0 +1 @@
+export * from './hero-list.component';
diff --git a/aio/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts
new file mode 100644
index 000000000000..334f836a7da0
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from '../shared/hero.model';
+
+@Component({
+  selector: 'toh-hero',
+  template: `...`
+})
+export class HeroComponent {
+  @Input() hero: Hero;
+}
+
+
diff --git a/aio/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts
new file mode 100644
index 000000000000..084f36d7034b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts
@@ -0,0 +1 @@
+export * from './hero.component';
diff --git a/aio/content/examples/styleguide/src/05-17/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/index.ts
new file mode 100644
index 000000000000..dcf3e79bd34d
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/heroes/index.ts
@@ -0,0 +1,3 @@
+export * from './hero';
+export * from './hero-list';
+export * from './shared';
diff --git a/aio/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts
new file mode 100644
index 000000000000..8f7cc205c88f
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..0dceb684c407
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts
@@ -0,0 +1 @@
+export * from './hero.model';
diff --git a/aio/content/examples/styleguide/src/05-17/app/index.ts b/aio/content/examples/styleguide/src/05-17/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/05-17/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/06-01/app/app.component.html b/aio/content/examples/styleguide/src/06-01/app/app.component.html
new file mode 100644
index 000000000000..2ccf87d0f513
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-01/app/app.component.html
@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<div tohHighlight>Bombasta</div>
diff --git a/aio/content/examples/styleguide/src/06-01/app/app.component.ts b/aio/content/examples/styleguide/src/06-01/app/app.component.ts
new file mode 100644
index 000000000000..7c9f37919f41
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-01/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/06-01/app/app.module.ts b/aio/content/examples/styleguide/src/06-01/app/app.module.ts
new file mode 100644
index 000000000000..318cd306d75a
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-01/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HighlightDirective } from './shared';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '06-01', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HighlightDirective
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/06-01/app/index.ts b/aio/content/examples/styleguide/src/06-01/app/index.ts
new file mode 100644
index 000000000000..ebe5c92f0391
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-01/app/index.ts
@@ -0,0 +1,2 @@
+export * from './shared';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts b/aio/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts
new file mode 100644
index 000000000000..991a6c5d25ff
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Directive, HostListener } from '@angular/core';
+
+// #docregion example
+@Directive({
+  selector: '[tohHighlight]'
+})
+export class HighlightDirective {
+  @HostListener('mouseover') onMouseEnter() {
+    // do highlight work
+  }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/06-01/app/shared/index.ts b/aio/content/examples/styleguide/src/06-01/app/shared/index.ts
new file mode 100644
index 000000000000..105a03568084
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-01/app/shared/index.ts
@@ -0,0 +1 @@
+export * from './highlight.directive';
diff --git a/aio/content/examples/styleguide/src/06-03/app/app.component.ts b/aio/content/examples/styleguide/src/06-03/app/app.component.ts
new file mode 100644
index 000000000000..0d0a7d107b25
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-03/app/app.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+  <input type="text" tohValidator>
+  <textarea tohValidator2></textarea>`
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/06-03/app/app.module.ts b/aio/content/examples/styleguide/src/06-03/app/app.module.ts
new file mode 100644
index 000000000000..b19f3fdc00b0
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-03/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { ValidatorDirective, Validator2Directive } from './shared';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '06-03', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    ValidatorDirective, Validator2Directive
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/06-03/app/index.ts b/aio/content/examples/styleguide/src/06-03/app/index.ts
new file mode 100644
index 000000000000..ebe5c92f0391
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-03/app/index.ts
@@ -0,0 +1,2 @@
+export * from './shared';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/06-03/app/shared/index.ts b/aio/content/examples/styleguide/src/06-03/app/shared/index.ts
new file mode 100644
index 000000000000..ba25e4c45854
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-03/app/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './validator.directive';
+export * from './validator2.directive';
diff --git a/aio/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts b/aio/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts
new file mode 100644
index 000000000000..d9e32c017fe8
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Directive, HostBinding, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[tohValidator]'
+})
+export class ValidatorDirective {
+  @HostBinding('attr.role') role = 'button';
+  @HostListener('mouseenter') onMouseEnter() {
+    // do work
+  }
+}
diff --git a/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts b/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts
new file mode 100644
index 000000000000..05a0f9f07ffd
--- /dev/null
+++ b/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[tohValidator2]',
+  host: {
+    '[attr.role]': 'role',
+    '(mouseenter)': 'onMouseEnter()'
+  }
+})
+export class Validator2Directive {
+  role = 'button';
+  onMouseEnter() {
+    // do work
+  }
+}
diff --git a/aio/content/examples/styleguide/src/07-01/app/app.component.html b/aio/content/examples/styleguide/src/07-01/app/app.component.html
new file mode 100644
index 000000000000..3c05329f3f43
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-01/app/app.component.html
@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>
diff --git a/aio/content/examples/styleguide/src/07-01/app/app.component.ts b/aio/content/examples/styleguide/src/07-01/app/app.component.ts
new file mode 100644
index 000000000000..354b0ec303f4
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-01/app/app.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroService } from './heroes';
+
+@Component({
+  selector: 'sg-app',
+  templateUrl: './app.component.html',
+  providers: [HeroService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/07-01/app/app.module.ts b/aio/content/examples/styleguide/src/07-01/app/app.module.ts
new file mode 100644
index 000000000000..0077500deaf5
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-01/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '07-01', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/07-01/app/heroes/index.ts b/aio/content/examples/styleguide/src/07-01/app/heroes/index.ts
new file mode 100644
index 000000000000..c3da79f741bc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-01/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts
new file mode 100644
index 000000000000..8f7cc205c88f
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts
new file mode 100644
index 000000000000..b44a72967e5e
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { map } from 'rxjs/operators';
+
+import { Hero } from './hero.model';
+
+@Injectable()
+// #docregion example
+export class HeroService {
+  constructor(private http: Http) { }
+
+  getHeroes() {
+    return this.http.get('api/heroes').pipe(
+      map((response: Response) => <Hero[]>response.json()));
+  }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..dbb150d3f80c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './hero.model';
+export * from './hero.service';
diff --git a/aio/content/examples/styleguide/src/07-01/app/index.ts b/aio/content/examples/styleguide/src/07-01/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-01/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/07-03/app/app.component.ts b/aio/content/examples/styleguide/src/07-03/app/app.component.ts
new file mode 100644
index 000000000000..224ab346190a
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-03/app/app.component.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { HeroService } from './heroes';
+
+@Component({
+  selector: 'toh-app',
+  template: `
+      <toh-heroes></toh-heroes>
+    `,
+})
+export class AppComponent {}
diff --git a/aio/content/examples/styleguide/src/07-03/app/app.module.ts b/aio/content/examples/styleguide/src/07-03/app/app.module.ts
new file mode 100644
index 000000000000..8ba06d22be6b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-03/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroListComponent } from './heroes';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '07-03', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroListComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..cf9bb19243ca
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroService } from '../shared';
+
+@Component({
+  selector: 'toh-heroes',
+  template: `
+      <pre>{{heroes | json}}</pre>
+    `
+})
+export class HeroListComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts
new file mode 100644
index 000000000000..c4bcb3278ed6
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts
@@ -0,0 +1 @@
+export * from './hero-list.component';
diff --git a/aio/content/examples/styleguide/src/07-03/app/heroes/index.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/index.ts
new file mode 100644
index 000000000000..f1112f1c7cc5
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-03/app/heroes/index.ts
@@ -0,0 +1,2 @@
+export * from './hero-list';
+export * from './shared';
diff --git a/aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts
new file mode 100644
index 000000000000..8f7cc205c88f
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts
new file mode 100644
index 000000000000..d3d8857caab9
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+
+import { Hero } from './hero.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HeroService {
+  getHeroes() {
+    let heroes: Hero[] = [];
+    return of(heroes);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..27516fdedd0c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './hero.model';
+export * from './hero.service';
diff --git a/aio/content/examples/styleguide/src/07-03/app/index.ts b/aio/content/examples/styleguide/src/07-03/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-03/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/07-04/app/app.component.ts b/aio/content/examples/styleguide/src/07-04/app/app.component.ts
new file mode 100644
index 000000000000..b0bc9677fea6
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-04/app/app.component.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { HeroArena, HeroService, Hero } from './heroes';
+
+@Component({
+  selector: 'toh-app',
+  template: '<pre>{{heroes | json}}</pre>',
+  providers: [HeroArena, HeroService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroArena: HeroArena) { }
+
+  ngOnInit() {
+    this.heroArena.getParticipants().subscribe(heroes => this.heroes = heroes);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/07-04/app/app.module.ts b/aio/content/examples/styleguide/src/07-04/app/app.module.ts
new file mode 100644
index 000000000000..71c515c9c923
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-04/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '07-04', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/07-04/app/heroes/index.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/index.ts
new file mode 100644
index 000000000000..c3da79f741bc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-04/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..698fa652392c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Inject } from '@angular/core';
+import { Http } from '@angular/http';
+
+import { HeroService } from './hero.service';
+// #docregion example
+/* avoid */
+
+export class HeroArena {
+  constructor(
+      @Inject(HeroService) private heroService: HeroService,
+      @Inject(Http) private http: Http) {}
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..22392ab4fdce
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts
@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+
+import { HeroService } from './hero.service';
+
+// #docregion example
+@Injectable()
+export class HeroArena {
+  constructor(
+    private heroService: HeroService,
+    private http: Http) {}
+    // #enddocregion example
+    // test harness
+    getParticipants() {
+      return this.heroService.getHeroes();
+    }
+    // #docregion example
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts
new file mode 100644
index 000000000000..8f7cc205c88f
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts
new file mode 100644
index 000000000000..3f8e476766e0
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { of } from 'rxjs';
+
+import { Hero } from './hero.model';
+
+@Injectable()
+export class HeroService {
+  getHeroes() {
+    let heroes: Hero[] = [];
+    return of(heroes);
+  }
+}
diff --git a/aio/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..e8ba54b54036
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts
@@ -0,0 +1,4 @@
+// #docregion
+export * from './hero.model';
+export * from './hero.service';
+export * from './hero-arena.service';
diff --git a/aio/content/examples/styleguide/src/07-04/app/index.ts b/aio/content/examples/styleguide/src/07-04/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/07-04/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/09-01/app/app.component.ts b/aio/content/examples/styleguide/src/09-01/app/app.component.ts
new file mode 100644
index 000000000000..ebc904f72268
--- /dev/null
+++ b/aio/content/examples/styleguide/src/09-01/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-button></toh-hero-button>'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/09-01/app/app.module.ts b/aio/content/examples/styleguide/src/09-01/app/app.module.ts
new file mode 100644
index 000000000000..5872e801d66a
--- /dev/null
+++ b/aio/content/examples/styleguide/src/09-01/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent } from './heroes';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '09-01', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroButtonComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/aio/content/examples/styleguide/src/09-01/app/heroes/index.ts b/aio/content/examples/styleguide/src/09-01/app/heroes/index.ts
new file mode 100644
index 000000000000..c3da79f741bc
--- /dev/null
+++ b/aio/content/examples/styleguide/src/09-01/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..7dc42c2f4090
--- /dev/null
+++ b/aio/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+// #docregion example
+/* avoid */
+
+@Component({
+  selector: 'toh-hero-button',
+  template: `<button>OK<button>`
+})
+export class HeroButtonComponent {
+  onInit() { // misspelled
+    console.log('The component is initialized');
+  }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..cc69810dee6c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-button',
+  template: `<button>OK</button>`
+})
+export class HeroButtonComponent implements OnInit {
+  ngOnInit() {
+    console.log('The component is initialized');
+  }
+}
+// #enddocregion example
diff --git a/aio/content/examples/styleguide/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
new file mode 100644
index 000000000000..6bb67c56704c
--- /dev/null
+++ b/aio/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/index.ts
@@ -0,0 +1 @@
+export * from './hero-button.component';
diff --git a/aio/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts
new file mode 100644
index 000000000000..2334d49c9add
--- /dev/null
+++ b/aio/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts
@@ -0,0 +1 @@
+export * from './hero-button';
diff --git a/aio/content/examples/styleguide/src/09-01/app/index.ts b/aio/content/examples/styleguide/src/09-01/app/index.ts
new file mode 100644
index 000000000000..fe8300f1dd47
--- /dev/null
+++ b/aio/content/examples/styleguide/src/09-01/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/aio/content/examples/styleguide/src/app/app.component.html b/aio/content/examples/styleguide/src/app/app.component.html
new file mode 100644
index 000000000000..0680b43f9c6a
--- /dev/null
+++ b/aio/content/examples/styleguide/src/app/app.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/aio/content/examples/styleguide/src/app/app.component.ts b/aio/content/examples/styleguide/src/app/app.component.ts
new file mode 100644
index 000000000000..968036cb8c2e
--- /dev/null
+++ b/aio/content/examples/styleguide/src/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  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
new file mode 100644
index 000000000000..1e974baf5f52
--- /dev/null
+++ b/aio/content/examples/styleguide/src/app/app.module.ts
@@ -0,0 +1,89 @@
+import { NgModule } from '@angular/core';
+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 { 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';
+
+@NgModule({
+  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 ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/styleguide/src/app/app.routes.ts b/aio/content/examples/styleguide/src/app/app.routes.ts
new file mode 100644
index 000000000000..bce6b4df06f4
--- /dev/null
+++ b/aio/content/examples/styleguide/src/app/app.routes.ts
@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+import { AppComponent as S0101 } from '../01-01/app';
+
+export const routes: Routes = [
+  { path: '', redirectTo: '/01-01', pathMatch: 'full' },
+  { path: '01-01', component: S0101 },
+];
diff --git a/aio/content/examples/styleguide/src/app/hero-data.ts b/aio/content/examples/styleguide/src/app/hero-data.ts
new file mode 100644
index 000000000000..f3e6feb91c13
--- /dev/null
+++ b/aio/content/examples/styleguide/src/app/hero-data.ts
@@ -0,0 +1,11 @@
+export class HeroData {
+  createDb() {
+    let heroes = [
+      { id: 1, name: 'Windstorm' },
+      { id: 2, name: 'Bombasto' },
+      { id: 3, name: 'Magneta' },
+      { id: 4, name: 'Tornado' }
+    ];
+    return {heroes};
+  }
+}
diff --git a/aio/content/examples/styleguide/src/index.html b/aio/content/examples/styleguide/src/index.html
new file mode 100644
index 000000000000..ba0335c7e7ac
--- /dev/null
+++ b/aio/content/examples/styleguide/src/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html lang="en">
+  <head>
+    <base href="/">
+
+    <title>Style Guide Sample</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
+<!-- #enddocregion -->
diff --git a/aio/content/examples/styleguide/src/main.ts b/aio/content/examples/styleguide/src/main.ts
new file mode 100644
index 000000000000..049f9792a40b
--- /dev/null
+++ b/aio/content/examples/styleguide/src/main.ts
@@ -0,0 +1,5 @@
+import { platformBrowserDynamic }   from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/template-syntax/e2e/src/app.e2e-spec.ts b/aio/content/examples/template-syntax/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..71f1c581650a
--- /dev/null
+++ b/aio/content/examples/template-syntax/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,43 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+// Not yet complete
+describe('Template Syntax', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should be able to use interpolation with a hero', function () {
+    let heroInterEle = element.all(by.css('h2+p')).get(0);
+    expect(heroInterEle.getText()).toEqual('My current hero is Hercules');
+  });
+
+  it('should be able to use interpolation with a calculation', function () {
+    let theSumEles = element.all(by.cssContainingText('h3~p', 'The sum of'));
+    expect(theSumEles.count()).toBe(2);
+    expect(theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2');
+    expect(theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4');
+  });
+
+  it('should be able to use class binding syntax', function () {
+    let specialEle = element(by.cssContainingText('div', 'Special'));
+    expect(specialEle.getAttribute('class')).toMatch('special');
+  });
+
+  it('should be able to use style binding syntax', function () {
+    let specialButtonEle = element(by.cssContainingText('div.special~button', 'button'));
+    expect(specialButtonEle.getAttribute('style')).toMatch('color: red');
+  });
+
+  it('should two-way bind to sizer', async () => {
+    let div = element(by.css('div#two-way-1'));
+    let incButton = div.element(by.buttonText('+'));
+    let input = div.element(by.css('input'));
+    let initSize = await input.getAttribute('value');
+    incButton.click();
+    expect(input.getAttribute('value')).toEqual((+initSize + 1).toString());
+  });
+});
+
diff --git a/aio/content/examples/template-syntax/example-config.json b/aio/content/examples/template-syntax/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/template-syntax/src/app/app.component.css b/aio/content/examples/template-syntax/src/app/app.component.css
new file mode 100644
index 000000000000..23f9667623bb
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/app.component.css
@@ -0,0 +1,17 @@
+a.to-toc { margin: 30px 0; }
+button { font-size: 100%; margin: 0 2px; }
+div[clickable] {cursor: pointer; max-width: 200px; margin: 16px 0}
+#noTrackByCnt, #withTrackByCnt {color: darkred; max-width: 450px; margin: 4px;}
+img {height: 100px;}
+.box {border: 1px solid black; padding: 6px; max-width: 450px;}
+.child-div {margin-left: 1em; font-weight: normal}
+.context {margin-left: 1em;}
+.hidden {display: none}
+.parent-div {margin-top: 1em; font-weight: bold}
+.special {font-weight:bold; font-size: x-large}
+.bad {color: red;}
+.saveable {color: limegreen;}
+.curly, .modified {font-family: "Brush Script MT"}
+.toe {margin-left: 1em; font-style: italic;}
+little-hero {color:blue; font-size: smaller; background-color: Turquoise }
+.to-toc {margin-top: 10px; display: block}
diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html
new file mode 100644
index 000000000000..fc5b36d35a34
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/app.component.html
@@ -0,0 +1,859 @@
+<!-- #docplaster -->
+<a id="toc"></a>
+<h1>Template Syntax</h1>
+<a href="#interpolation">Interpolation</a><br>
+<a href="#expression-context">Expression context</a><br>
+<a href="#statement-context">Statement context</a><br>
+<a href="#mental-model">Mental Model</a><br>
+<a href="#buttons">Buttons</a><br>
+<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
+<br>
+<a href="#property-binding">Property Binding</a><br>
+<div style="margin-left:8px">
+  <a href="#attribute-binding">Attribute Binding</a><br>
+  <a href="#class-binding">Class Binding</a><br>
+  <a href="#style-binding">Style Binding</a><br>
+</div>
+<br>
+<a href="#event-binding">Event Binding</a><br>
+<a href="#two-way">Two-way Binding</a><br>
+<br>
+<div>Directives</div>
+<div style="margin-left:8px">
+  <a href="#ngModel">NgModel (two-way) Binding</a><br>
+  <a href="#ngClass">NgClass Binding</a><br>
+  <a href="#ngStyle">NgStyle Binding</a><br>
+  <a href="#ngIf">NgIf</a><br>
+  <a href="#ngFor">NgFor</a><br>
+  <div style="margin-left:8px">
+    <a href="#ngFor-index">NgFor with index</a><br>
+    <a href="#ngFor-trackBy">NgFor with trackBy</a><br>
+  </div>
+  <a href="#ngSwitch">NgSwitch</a><br>
+</div>
+<br>
+<a href="#ref-vars">Template reference variables</a><br>
+<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 -->
+<hr><h2 id="interpolation">Interpolation</h2>
+
+<!-- #docregion first-interpolation -->
+<p>My current hero is {{currentHero.name}}</p>
+<!-- #enddocregion first-interpolation -->
+
+<!-- #docregion title+image -->
+<h3>
+  {{title}}
+  <img src="{{heroImageUrl}}" style="height:30px">
+</h3>
+<!-- #enddocregion title+image -->
+
+<!-- #docregion sum-1 -->
+<!-- "The sum of 1 + 1 is 2" -->
+<p>The sum of 1 + 1 is {{1 + 1}}</p>
+<!-- #enddocregion sum-1 -->
+
+<!-- #docregion sum-2 -->
+<!-- "The sum of 1 + 1 is not 4" -->
+<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
+<!-- #enddocregion sum-2 -->
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="expression-context">Expression context</h2>
+
+<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
+<div class="context">
+  <!-- #docregion context-component-expression -->
+  {{title}}
+  <span [hidden]="isUnchanged">changed</span>
+  <!-- #enddocregion context-component-expression -->
+</div>
+
+
+<p>Template input variable expression context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<ng-template>
+  <!-- #docregion context-var -->
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+  <!-- #enddocregion context-var -->
+</ng-template>
+
+<p>Template reference variable expression context (#heroInput)</p>
+<div (keyup)="0" class="context">
+  Type something:
+  <!-- #docregion context-var -->
+  <input #heroInput> {{heroInput.value}}
+  <!-- #enddocregion context-var -->
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="statement-context">Statement context</h2>
+
+<p>Component statement context ( (click)="onSave() )
+<div class="context">
+  <!-- #docregion context-component-statement -->
+  <button (click)="deleteHero()">Delete hero</button>
+  <!-- #enddocregion context-component-statement -->
+</div>
+
+<p>Template $event statement context</p>
+<div class="context">
+  <!-- #docregion context-var-statement -->
+  <button (click)="onSave($event)">Save</button>
+  <!-- #enddocregion context-var-statement -->
+</div>
+
+<p>Template input variable statement context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<div class="context">
+  <!-- #docregion context-var-statement -->
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
+  <!-- #enddocregion context-var-statement -->
+</div>
+
+<p>Template reference variable statement context (#heroForm)</p>
+<div class="context">
+  <!-- #docregion context-var-statement -->
+  <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
+  <!-- #enddocregion context-var-statement -->
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- New Mental Model -->
+<hr><h2 id="mental-model">New Mental Model</h2>
+
+<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
+<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
+<!-- #docregion img+button -->
+<div class="special">Mental Model</div>
+<img src="assets/images/hero.png">
+<button disabled>Save</button>
+<!-- #enddocregion img+button -->
+<br><br>
+
+<div>
+  <!-- #docregion hero-detail-1 -->
+  <!-- Normal HTML -->
+  <div class="special">Mental Model</div>
+  <!-- Wow! A new element! -->
+  <app-hero-detail></app-hero-detail>
+  <!-- #enddocregion hero-detail-1 -->
+</div>
+<br><br>
+
+<div>
+  <!-- #docregion disabled-button-1 -->
+  <!-- Bind button disabled state to `isUnchanged` property -->
+  <button [disabled]="isUnchanged">Save</button>
+  <!-- #enddocregion disabled-button-1 -->
+</div>
+<br><br>
+
+<div>
+  <!-- #docregion property-binding-syntax-1 -->
+  <img [src]="heroImageUrl">
+  <app-hero-detail [hero]="currentHero"></app-hero-detail>
+  <div [ngClass]="{'special': isSpecial}"></div>
+  <!-- #enddocregion property-binding-syntax-1 -->
+</div>
+<br><br>
+
+<!-- #docregion event-binding-syntax-1 -->
+<button (click)="onSave()">Save</button>
+<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
+<div (myClick)="clicked=$event" clickable>click me</div>
+<!-- #enddocregion event-binding-syntax-1 -->
+{{clicked}}
+<br><br>
+
+<div>
+  Hero Name:
+  <!-- #docregion 2-way-binding-syntax-1 -->
+  <input [(ngModel)]="name">
+  <!-- #enddocregion 2-way-binding-syntax-1 -->
+  {{name}}
+</div>
+<br><br>
+
+<!-- #docregion attribute-binding-syntax-1 -->
+<button [attr.aria-label]="help">help</button>
+<!-- #enddocregion attribute-binding-syntax-1 -->
+<br><br>
+
+<!-- #docregion class-binding-syntax-1 -->
+<div [class.special]="isSpecial">Special</div>
+<!-- #enddocregion class-binding-syntax-1 -->
+<br><br>
+
+<!-- #docregion style-binding-syntax-1 -->
+<button [style.color]="isSpecial ? 'red' : 'green'">
+<!-- #enddocregion style-binding-syntax-1 -->
+button</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property vs. attribute -->
+<hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
+<!-- examine the following <img> tag in the browser tools -->
+<img src="images/ng-logo.png"
+    [src]="heroImageUrl">
+
+<br><br>
+
+<img [src]="iconUrl"/>
+<img bind-src="heroImageUrl"/>
+<img [attr.src]="villainImageUrl"/>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- buttons -->
+<hr><h2 id="buttons">Buttons</h2>
+
+<button>Enabled (but does nothing)</button>
+<button disabled>Disabled</button>
+<button disabled=false>Still disabled</button>
+<br><br>
+<button disabled>disabled by attribute</button>
+<button [disabled]="isUnchanged">disabled by property binding</button>
+<br><br>
+<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
+<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property binding -->
+<hr><h2 id="property-binding">Property Binding</h2>
+
+<!-- #docregion property-binding-1 -->
+<img [src]="heroImageUrl">
+<!-- #enddocregion property-binding-1 -->
+<!-- #docregion property-binding-2 -->
+<button [disabled]="isUnchanged">Cancel is disabled</button>
+<!-- #enddocregion property-binding-2 -->
+<!-- #docregion property-binding-3 -->
+<div [ngClass]="classes">[ngClass] binding to the classes property</div>
+<!-- #enddocregion property-binding-3 -->
+<!-- #docregion property-binding-4 -->
+<app-hero-detail [hero]="currentHero"></app-hero-detail>
+<!-- #enddocregion property-binding-4 -->
+<!-- #docregion property-binding-5 -->
+<img bind-src="heroImageUrl">
+<!-- #enddocregion property-binding-5 -->
+
+<!-- #docregion property-binding-6 -->
+<!-- ERROR: HeroDetailComponent.hero expects a
+     Hero object, not the string "currentHero" -->
+<!-- #enddocregion property-binding-6 -->
+<div *ngIf="false">
+<!-- #docregion property-binding-6 -->
+  <app-hero-detail hero="currentHero"></app-hero-detail>
+<!-- #enddocregion property-binding-6 -->
+</div>
+<!-- #docregion property-binding-7 -->
+<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
+<!-- #enddocregion property-binding-7 -->
+
+<!-- #docregion property-binding-vs-interpolation -->
+<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
+<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
+
+<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<!-- #enddocregion property-binding-vs-interpolation -->
+
+<!-- #docregion property-binding-vs-interpolation-sanitization -->
+<!--
+  Angular generates warnings for these two lines as it sanitizes them
+  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
+ -->
+<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
+<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
+<!-- #enddocregion property-binding-vs-interpolation-sanitization -->
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- attribute binding -->
+<hr><h2 id="attribute-binding">Attribute Binding</h2>
+
+<!--  create and set a colspan attribute -->
+<!-- #docregion attrib-binding-colspan -->
+<table border=1>
+  <!--  expression calculates colspan=2 -->
+  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
+
+  <!-- ERROR: There is no `colspan` property to set!
+    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
+  -->
+
+  <tr><td>Five</td><td>Six</td></tr>
+</table>
+<!-- #enddocregion attrib-binding-colspan -->
+
+<br>
+<!-- #docregion attrib-binding-aria -->
+<!-- create and set an aria attribute for assistive technology -->
+<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
+<!-- #enddocregion attrib-binding-aria -->
+<br><br>
+
+<!-- The following effects are not discussed in the chapter -->
+<div>
+  <!-- any use of [attr.disabled] creates the disabled attribute -->
+  <button [attr.disabled]="isUnchanged">Disabled</button>
+
+  <button [attr.disabled]="!isUnchanged">Disabled as well</button>
+
+  <!-- we'd have to remove it with property binding -->
+  <button disabled [disabled]="false">Enabled (but inert)</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- class binding -->
+<hr><h2 id="class-binding">Class Binding</h2>
+
+<!-- #docregion class-binding-1 -->
+<!-- standard class attribute setting  -->
+<div class="bad curly special">Bad curly special</div>
+<!-- #enddocregion class-binding-1 -->
+
+<!-- #docregion class-binding-2 -->
+<!-- reset/override all class names with a binding  -->
+<div class="bad curly special"
+     [class]="badCurly">Bad curly</div>
+<!-- #enddocregion class-binding-2 -->
+
+<!-- #docregion class-binding-3 -->
+<!-- #docregion class-binding-3a -->
+<!-- toggle the "special" class on/off with a property -->
+<div [class.special]="isSpecial">The class binding is special</div>
+<!-- #enddocregion class-binding-3a -->
+
+<!-- binding to `class.special` trumps the class attribute -->
+<div class="special"
+     [class.special]="!isSpecial">This one is not so special</div>
+<!-- #enddocregion class-binding-3 -->
+
+<div bind-class.special="isSpecial">This class binding is special too</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!--style binding -->
+<hr><h2 id="style-binding">Style Binding</h2>
+
+<!-- #docregion style-binding-1 -->
+<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
+<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
+<!-- #enddocregion style-binding-1 -->
+
+<!-- #docregion style-binding-2 -->
+<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
+<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
+<!-- #enddocregion style-binding-2 -->
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- event binding -->
+<hr><h2 id="event-binding">Event Binding</h2>
+
+<!-- #docregion event-binding-1 -->
+<button (click)="onSave()">Save</button>
+<!-- #enddocregion event-binding-1 -->
+
+<!-- #docregion event-binding-2 -->
+<button on-click="onSave()">On Save</button>
+<!-- #enddocregion event-binding-2 -->
+
+<div>
+<!-- #docregion event-binding-3 -->
+<!-- `myClick` is an event on the custom `ClickDirective` -->
+<!-- #docregion myClick -->
+<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
+<!-- #enddocregion myClick -->
+<!-- #enddocregion event-binding-3 -->
+{{clickMessage}}
+</div>
+
+
+<!-- binding to a nested component -->
+<!-- #docregion event-binding-to-component -->
+<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
+<!-- #enddocregion event-binding-to-component -->
+<br>
+
+<app-big-hero-detail
+    (deleteRequest)="deleteHero($event)"
+    [hero]="currentHero">
+</app-big-hero-detail>
+
+<!-- #docregion event-binding-bubbling -->
+<div class="parent-div" (click)="onClickMe($event)" clickable>Click me
+  <div class="child-div">Click me too!</div>
+</div>
+<!-- #enddocregion event-binding-bubbling -->
+
+<!-- #docregion event-binding-no-propagation -->
+<!-- Will save only once -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave($event)">Save, no propagation</button>
+</div>
+<!-- #enddocregion event-binding-no-propagation -->
+
+<!-- #docregion event-binding-propagation -->
+<!-- Will save twice -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave()">Save w/ propagation</button>
+</div>
+<!-- #enddocregion event-binding-propagation -->
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <!-- #docregion two-way-1 -->
+  <app-sizer [(size)]="fontSizePx"></app-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <!-- #enddocregion two-way-1 -->
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
+</div>
+<br>
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <!-- #docregion two-way-2 -->
+  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
+  <!-- #enddocregion two-way-2 -->
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Two way data binding unwound;
+    passing the changed display value to the event handler via `$event` -->
+<hr><h2 id="ngModel">NgModel (two-way) Binding</h2>
+
+<h3>Result: {{currentHero.name}}</h3>
+
+<!-- #docregion without-NgModel -->
+<input [value]="currentHero.name"
+       (input)="currentHero.name=$event.target.value" >
+<!-- #enddocregion without-NgModel -->
+without NgModel
+<br>
+<!-- #docregion NgModel-1 -->
+<input [(ngModel)]="currentHero.name">
+<!-- #enddocregion NgModel-1 -->
+[(ngModel)]
+<br>
+<!-- #docregion NgModel-2 -->
+<input bindon-ngModel="currentHero.name">
+<!-- #enddocregion NgModel-2 -->
+bindon-ngModel
+<br>
+<!-- #docregion NgModel-3 -->
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="currentHero.name=$event">
+<!-- #enddocregion NgModel-3 -->
+(ngModelChange)="...name=$event"
+<br>
+<!-- #docregion NgModel-4 -->
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="setUppercaseName($event)">
+<!-- #enddocregion NgModel-4 -->
+(ngModelChange)="setUppercaseName($event)"
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgClass binding -->
+<hr><h2 id="ngClass">NgClass Binding</h2>
+
+<p>currentClasses is {{currentClasses | json}}</p>
+<!-- #docregion NgClass-1 -->
+<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
+<!-- #enddocregion NgClass-1 -->
+
+<!-- not used in chapter -->
+<br>
+<label>saveable   <input type="checkbox" [(ngModel)]="canSave"></label> |
+<label>modified:  <input type="checkbox" [value]="!isUnchanged" (change)="isUnchanged=!isUnchanged"></label> |
+<label>special:   <input type="checkbox" [(ngModel)]="isSpecial"></label>
+<button (click)="setCurrentClasses()">Refresh currentClasses</button>
+<br><br>
+<div [ngClass]="currentClasses">
+  This div should be {{ canSave ? "": "not"}} saveable,
+                  {{ isUnchanged ? "unchanged" : "modified" }} and,
+                  {{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
+<br><br>
+
+<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>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgStyle binding -->
+<hr><h2 id="ngStyle">NgStyle Binding</h2>
+
+<!-- #docregion NgStyle-1 -->
+<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
+  This div is x-large or smaller.
+</div>
+<!-- #enddocregion NgStyle-1 -->
+
+<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
+<p>currentStyles is {{currentStyles | json}}</p>
+<!-- #docregion NgStyle-2 -->
+<div [ngStyle]="currentStyles">
+  This div is initially italic, normal weight, and extra large (24px).
+</div>
+<!-- #enddocregion NgStyle-2 -->
+
+<!-- not used in chapter -->
+<br>
+<label>italic: <input type="checkbox" [(ngModel)]="canSave"></label> |
+<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"></label> |
+<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"></label>
+<button (click)="setCurrentStyles()">Refresh currentStyles</button>
+<br><br>
+<div [ngStyle]="currentStyles">
+  This div should be {{ canSave ? "italic": "plain"}},
+                  {{ isUnchanged ? "normal weight" : "bold" }} and,
+                  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgIf binding -->
+<hr><h2 id="ngIf">NgIf Binding</h2>
+
+<!-- #docregion NgIf-1 -->
+<app-hero-detail *ngIf="isActive"></app-hero-detail>
+<!-- #enddocregion NgIf-1 -->
+
+<!-- #docregion NgIf-2 -->
+<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
+<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
+<!-- #enddocregion NgIf-2 -->
+
+<!-- NgIf binding with template (no *) -->
+
+<ng-template [ngIf]="currentHero">Add {{currentHero.name}} with template</ng-template>
+
+<!-- Does not show because isActive is false! -->
+<div>Hero Detail removed from DOM (via template) because isActive is false</div>
+<ng-template [ngIf]="isActive">
+  <app-hero-detail></app-hero-detail>
+</ng-template>
+
+<!-- #docregion NgIf-3 -->
+<!-- isSpecial is true -->
+<div [class.hidden]="!isSpecial">Show with class</div>
+<div [class.hidden]="isSpecial">Hide with class</div>
+
+<!-- HeroDetail is in the DOM but hidden -->
+<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>
+
+<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
+<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>
+<!-- #enddocregion NgIf-3 -->
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgFor binding -->
+<hr><h2 id="ngFor">NgFor Binding</h2>
+
+<div class="box">
+  <!-- #docregion NgFor-1, NgFor-1-2 -->
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+  <!-- #enddocregion NgFor-1, NgFor-1-2 -->
+</div>
+<br>
+
+<div class="box">
+  <!-- *ngFor w/ hero-detail Component -->
+  <!-- #docregion NgFor-2, NgFor-1-2 -->
+  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
+  <!-- #enddocregion NgFor-2, NgFor-1-2 -->
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-index">*ngFor with index</h4>
+<p>with <i>semi-colon</i> separator</p>
+<div class="box">
+  <!-- #docregion NgFor-3 -->
+  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
+  <!-- #enddocregion NgFor-3 -->
+</div>
+
+<p>with <i>comma</i> separator</p>
+<div class="box">
+  <!-- Ex: "1 - Hercules" -->
+  <div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
+<button (click)="resetHeroes()">Reset heroes</button>
+<button (click)="changeIds()">Change ids</button>
+<button (click)="clearTrackByCounts()">Clear counts</button>
+
+<p><i>without</i> trackBy</p>
+<div class="box">
+  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount" >
+    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
+  </div>
+</div>
+
+<p>with trackBy</p>
+<div class="box">
+  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
+    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
+  </div>
+</div>
+
+<br><br><br>
+
+<p>with trackBy and <i>semi-colon</i> separator</p>
+<div class="box">
+  <!-- #docregion trackBy -->
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+  <!-- #enddocregion trackBy -->
+</div>
+
+<p>with trackBy and <i>comma</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes, trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<p>with trackBy and <i>space</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<p>with <i>generic</i> trackById function</p>
+<div class="box">
+  <div *ngFor="let hero of heroes, trackBy: trackById">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgSwitch binding -->
+<hr><h2 id="ngSwitch">NgSwitch Binding</h2>
+
+<p>Pick your favorite hero</p>
+<div>
+  <label *ngFor="let h of heroes">
+    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
+  </label>
+</div>
+
+<!-- #docregion NgSwitch -->
+<div [ngSwitch]="currentHero.emotion">
+  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
+  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
+  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
+<!-- #enddocregion NgSwitch -->
+  <!-- #docregion NgSwitch-div -->
+  <div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
+  <!-- #enddocregion NgSwitch-div -->
+<!-- #docregion NgSwitch -->
+  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
+</div>
+<!-- #enddocregion NgSwitch -->
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- template reference variable -->
+<hr><h2 id="ref-vars">Template reference variables</h2>
+
+<!-- #docregion ref-phone -->
+<!-- #docregion ref-var -->
+<input #phone placeholder="phone number">
+<!-- #enddocregion ref-var -->
+
+<!-- lots of other elements -->
+
+<!-- phone refers to the input element; pass its `value` to an event handler -->
+<button (click)="callPhone(phone.value)">Call</button>
+<!-- #enddocregion ref-phone -->
+
+<!-- #docregion ref-fax -->
+<input ref-fax placeholder="fax number">
+<button (click)="callFax(fax.value)">Fax</button>
+<!-- #enddocregion ref-fax -->
+
+<!-- btn refers to the button element; show its disabled state -->
+<button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>
+
+<h4>Example Form</h4>
+<app-hero-form [hero]="currentHero"></app-hero-form>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- inputs and output -->
+<hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>
+
+<!-- #docregion io-1 -->
+<img [src]="iconUrl"/>
+<button (click)="onSave()">Save</button>
+<!-- #enddocregion io-1 -->
+
+<!-- #docregion io-2 -->
+<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
+</app-hero-detail>
+<!-- #enddocregion io-2 -->
+
+<div (myClick)="clickMessage2=$event" clickable>myClick2</div>
+{{clickMessage2}}
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Pipes -->
+<hr><h2 id="pipes">Pipes</h2>
+
+<!-- #docregion pipes-1 -->
+<div>Title through uppercase pipe: {{title | uppercase}}</div>
+<!-- #enddocregion pipes-1 -->
+
+<!-- #docregion pipes-2 -->
+<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
+<div>
+  Title through a pipe chain:
+  {{title | uppercase | lowercase}}
+</div>
+<!-- #enddocregion pipes-2 -->
+
+<!-- #docregion pipes-3 -->
+<!-- pipe with configuration argument => "February 25, 1970" -->
+<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>
+<!-- #enddocregion pipes-3 -->
+
+<!-- #docregion pipes-json -->
+<div>{{currentHero | json}}</div>
+<!-- #enddocregion pipes-json -->
+
+<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>
+
+<div>
+  <!-- pipe price to USD and display the $ symbol -->
+  <label>Price: </label>{{product.price | currency:'USD':true}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Null values and the safe navigation operator -->
+<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
+
+<div>
+  <!-- #docregion safe-1 -->
+  The title is {{title}}
+  <!-- #enddocregion safe-1 -->
+</div>
+
+<div>
+  <!-- #docregion safe-2 -->
+  The current hero's name is {{currentHero?.name}}
+  <!-- #enddocregion safe-2 -->
+</div>
+
+<div>
+  <!-- #docregion safe-3 -->
+  The current hero's name is {{currentHero.name}}
+  <!-- #enddocregion safe-3 -->
+</div>
+
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!-- #docregion safe-4 -->
+<!--No hero, div not displayed, no error -->
+<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
+<!-- #enddocregion safe-4 -->
+
+<div>
+<!-- #docregion safe-5 -->
+The null hero's name is {{nullHero && nullHero.name}}
+<!-- #enddocregion safe-5 -->
+</div>
+
+<div>
+  <!-- #docregion safe-6 -->
+  <!-- No hero, no problem! -->
+  The null hero's name is {{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>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
+
+<div>
+  <!-- #docregion any-type-cast-function-1 -->
+  <!-- Accessing an undeclared member -->
+  <div>
+    The hero's marker is {{$any(hero).marker}}
+  </div>
+  <!-- #enddocregion any-type-cast-function-1 -->
+</div>
+
+<div>
+  <!-- #docregion any-type-cast-function-2 -->
+  <!-- Accessing an undeclared member -->
+  <div>
+    Undeclared members is {{$any(this).member}}
+  </div>
+  <!-- #enddocregion any-type-cast-function-2 -->
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- TODO: discuss this in the Style binding section -->
+<!-- enums in bindings -->
+<hr><h2 id="enums">Enums in binding</h2>
+
+<p>
+  <!-- #docregion enums -->
+  The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
+  The current color is {{Color[color]}} and its number is {{color}}.<br>
+  <button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>
+  <!-- #enddocregion enums -->
+</p>
+
+<a class="to-toc" href="#toc">top</a>
diff --git a/aio/content/examples/template-syntax/src/app/app.component.ts b/aio/content/examples/template-syntax/src/app/app.component.ts
new file mode 100644
index 000000000000..b1d4e484df35
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/app.component.ts
@@ -0,0 +1,184 @@
+/* tslint:disable:forin member-ordering */
+// #docplaster
+
+import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';
+
+import { Hero } from './hero';
+
+export enum Color {Red, Green, Blue};
+
+/**
+ * Giant grab bag of stuff to drive the chapter
+ */
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.css' ]
+})
+export class AppComponent implements AfterViewInit, OnInit {
+
+  ngOnInit() {
+    this.resetHeroes();
+    this.setCurrentClasses();
+    this.setCurrentStyles();
+  }
+
+  ngAfterViewInit() {
+    // Detect effects of NgForTrackBy
+    trackChanges(this.heroesNoTrackBy,   () => this.heroesNoTrackByCount++);
+    trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++);
+  }
+
+  @ViewChildren('noTrackBy')   heroesNoTrackBy:   QueryList<ElementRef>;
+  @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList<ElementRef>;
+
+  actionName = 'Go for it';
+  badCurly = 'bad curly';
+  classes = 'special';
+  help = '';
+
+  alert(msg?: string)      { window.alert(msg); }
+  callFax(value: string)   { this.alert(`Faxing ${value} ...`); }
+  callPhone(value: string) { this.alert(`Calling ${value} ...`); }
+  canSave =  true;
+
+  changeIds() {
+    this.resetHeroes();
+    this.heroes.forEach(h => h.id += 10 * this.heroIdIncrement++);
+    this.heroesWithTrackByCountReset = -1;
+  }
+
+  clearTrackByCounts() {
+    const trackByCountReset = this.heroesWithTrackByCountReset;
+    this.resetHeroes();
+    this.heroesNoTrackByCount = -1;
+    this.heroesWithTrackByCount = trackByCountReset;
+    this.heroIdIncrement = 1;
+  }
+
+  clicked = '';
+  clickMessage = '';
+  clickMessage2 = '';
+
+  Color = Color;
+  color = Color.Red;
+  colorToggle() {this.color = (this.color === Color.Red) ? Color.Blue : Color.Red; }
+
+  currentHero: Hero;
+
+  deleteHero(hero: Hero) {
+    this.alert(`Delete ${hero ? hero.name : 'the hero'}.`);
+  }
+
+  // #docregion evil-title
+  evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
+  // #enddocregion evil-title
+
+  fontSizePx = 16;
+
+  title = 'Template Syntax';
+
+  getVal(): number { return 2; }
+
+  name: string = Hero.heroes[0].name;
+  hero: Hero; // defined to demonstrate template context precedence
+  heroes: Hero[];
+
+  // trackBy change counting
+  heroesNoTrackByCount   = 0;
+  heroesWithTrackByCount = 0;
+  heroesWithTrackByCountReset = 0;
+
+  heroIdIncrement = 1;
+
+  // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
+  // Public Domain terms of use: http://www.wpclipart.com/terms.html
+  heroImageUrl = 'assets/images/hero.png';
+  // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
+  // Public Domain terms of use http://www.clker.com/disclaimer.html
+  villainImageUrl = 'assets/images/villain.png';
+
+  iconUrl = 'assets/images/ng-logo.png';
+  isActive = false;
+  isSpecial = true;
+  isUnchanged = true;
+
+  get nullHero(): Hero { return null; }
+
+  onClickMe(event: KeyboardEvent) {
+    let evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className  : '';
+    this.alert('Click me.' + evtMsg);
+  }
+
+  onSave(event: KeyboardEvent) {
+    let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).textContent : '';
+    this.alert('Saved.' + evtMsg);
+    if (event) { event.stopPropagation(); }
+  }
+
+  onSubmit() {/* referenced but not used */}
+
+  product = {
+    name: 'frimfram',
+    price: 42
+  };
+
+  // updates with fresh set of cloned heroes
+  resetHeroes() {
+    this.heroes = Hero.heroes.map(hero => hero.clone());
+    this.currentHero = this.heroes[0];
+    this.hero = this.currentHero;
+    this.heroesWithTrackByCountReset = 0;
+  }
+
+  setUppercaseName(name: string) {
+    this.currentHero.name = name.toUpperCase();
+  }
+
+  // #docregion setClasses
+  currentClasses: {};
+  setCurrentClasses() {
+    // CSS classes: added/removed per current state of component properties
+    this.currentClasses =  {
+      'saveable': this.canSave,
+      'modified': !this.isUnchanged,
+      'special':  this.isSpecial
+    };
+  }
+  // #enddocregion setClasses
+
+  // #docregion setStyles
+  currentStyles: {};
+  setCurrentStyles() {
+    // CSS styles: set per current state of component properties
+    this.currentStyles = {
+      'font-style':  this.canSave      ? 'italic' : 'normal',
+      'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
+      'font-size':   this.isSpecial    ? '24px'   : '12px'
+    };
+  }
+  // #enddocregion setStyles
+
+  // #docregion trackByHeroes
+  trackByHeroes(index: number, hero: Hero): number { return hero.id; }
+  // #enddocregion trackByHeroes
+
+  // #docregion trackById
+  trackById(index: number, item: any): number { return item['id']; }
+  // #enddocregion trackById
+}
+
+// helper to track changes to viewChildren
+function trackChanges(views: QueryList<ElementRef>, changed: () => void) {
+  let oldRefs = views.toArray();
+  views.changes.subscribe((changes: QueryList<ElementRef>) => {
+      const changedRefs = changes.toArray();
+      // 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
+        setTimeout(changed, 0);
+      }
+  });
+}
diff --git a/aio/content/examples/template-syntax/src/app/app.module.1.ts b/aio/content/examples/template-syntax/src/app/app.module.1.ts
new file mode 100644
index 000000000000..8ea0d3d207a0
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/app.module.1.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular
+
+/* Other imports */
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule  // <--- import into the NgModule
+  ],
+  /* Other module metadata */
+})
+export class AppModule { }
diff --git a/aio/content/examples/template-syntax/src/app/app.module.ts b/aio/content/examples/template-syntax/src/app/app.module.ts
new file mode 100644
index 000000000000..5c2fbed6f13f
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/app.module.ts
@@ -0,0 +1,29 @@
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component';
+import { ClickDirective, ClickDirective2 } from './click.directive';
+import { HeroFormComponent }      from './hero-form.component';
+import { heroSwitchComponents }   from './hero-switch.components';
+import { SizerComponent }         from './sizer.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    BigHeroDetailComponent,
+    HeroDetailComponent,
+    HeroFormComponent,
+    heroSwitchComponents,
+    ClickDirective,
+    ClickDirective2,
+    SizerComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/template-syntax/src/app/click.directive.ts b/aio/content/examples/template-syntax/src/app/click.directive.ts
new file mode 100644
index 000000000000..22b63955eab3
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/click.directive.ts
@@ -0,0 +1,41 @@
+/* tslint:disable use-output-property-decorator directive-class-suffix */
+// #docplaster
+import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
+
+@Directive({selector: '[myClick]'})
+export class ClickDirective {
+  // #docregion output-myClick
+  @Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
+ // #enddocregion output-myClick
+
+  toggle = false;
+
+  constructor(el: ElementRef) {
+    el.nativeElement
+      .addEventListener('click', (event: Event) => {
+        this.toggle = !this.toggle;
+        this.clicks.emit(this.toggle ? 'Click!' : '');
+      });
+  }
+}
+
+// #docregion output-myClick2
+@Directive({
+  // #enddocregion output-myClick2
+  selector: '[myClick2]',
+  // #docregion output-myClick2
+  outputs: ['clicks:myClick']  // propertyName:alias
+})
+// #enddocregion output-myClick2
+export class ClickDirective2 {
+  clicks = new EventEmitter<string>();
+  toggle = false;
+
+  constructor(el: ElementRef) {
+    el.nativeElement
+      .addEventListener('click', (event: Event) => {
+        this.toggle = !this.toggle;
+        this.clicks.emit(this.toggle ? 'Click2!' : '');
+      });
+  }
+}
diff --git a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
new file mode 100644
index 000000000000..14cdeed0afc3
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
@@ -0,0 +1,80 @@
+/* tslint:disable use-input-property-decorator use-output-property-decorator */
+// #docplaster
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { Hero } from './hero';
+
+// #docregion input-output-2
+@Component({
+// #enddocregion input-output-2
+  selector: 'app-hero-detail',
+  // #docregion input-output-2
+  inputs: ['hero'],
+  outputs: ['deleteRequest'],
+  // #enddocregion input-output-2
+  styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
+  // #docregion template-1
+  template: `
+  <div>
+    <img src="{{heroImageUrl}}">
+    <span [style.text-decoration]="lineThrough">
+      {{prefix}} {{hero?.name}}
+    </span>
+    <button (click)="delete()">Delete</button>
+  </div>`
+  // #enddocregion template-1
+// #docregion input-output-2
+})
+// #enddocregion input-output-2
+export class HeroDetailComponent {
+  hero: Hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero
+  // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
+  // Public Domain terms of use: http://www.wpclipart.com/terms.html
+  heroImageUrl = 'assets/images/hero.png';
+  lineThrough = '';
+  @Input() prefix = '';
+
+  // #docregion deleteRequest
+  // This component makes a request but it can't actually delete a hero.
+  deleteRequest = new EventEmitter<Hero>();
+
+  delete() {
+    this.deleteRequest.emit(this.hero);
+    // #enddocregion deleteRequest
+    this.lineThrough = this.lineThrough ? '' : 'line-through';
+    // #docregion deleteRequest
+  }
+  // #enddocregion deleteRequest
+}
+
+@Component({
+  selector: 'app-big-hero-detail',
+  template: `
+  <div class="detail">
+    <img src="{{heroImageUrl}}">
+    <div><b>{{hero?.name}}</b></div>
+    <div>Name: {{hero?.name}}</div>
+    <div>Emotion: {{hero?.emotion}}</div>
+    <div>Birthdate: {{hero?.birthdate | date:'longDate'}}</div>
+    <div>Web: <a href="{{hero?.url}}" target="_blank">{{hero?.url}}</a></div>
+    <div>Rate/hr: {{hero?.rate | currency:'EUR'}}</div>
+    <br clear="all">
+    <button (click)="delete()">Delete</button>
+  </div>
+  `,
+  styles: [`
+    .detail { border: 1px solid black; padding: 4px; max-width: 450px; }
+    img     { float: left; margin-right: 8px; height: 100px; }
+  `]
+})
+export class BigHeroDetailComponent extends HeroDetailComponent {
+
+  // #docregion input-output-1
+  @Input()  hero: Hero;
+  @Output() deleteRequest = new EventEmitter<Hero>();
+  // #enddocregion input-output-1
+
+  delete() {
+    this.deleteRequest.emit(this.hero);
+  }
+}
diff --git a/aio/content/examples/template-syntax/src/app/hero-form.component.html b/aio/content/examples/template-syntax/src/app/hero-form.component.html
new file mode 100644
index 000000000000..071aab429eb1
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/hero-form.component.html
@@ -0,0 +1,15 @@
+<div id="heroForm">
+  <!-- #docregion -->
+  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
+    <div class="form-group">
+      <label for="name">Name
+        <input class="form-control" name="name" required [(ngModel)]="hero.name">
+      </label>
+    </div>
+    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
+  </form>
+  <div [hidden]="!heroForm.form.valid">
+    {{submitMessage}}
+  </div>
+  <!-- #enddocregion -->
+</div>
diff --git a/aio/content/examples/template-syntax/src/app/hero-form.component.ts b/aio/content/examples/template-syntax/src/app/hero-form.component.ts
new file mode 100644
index 000000000000..63040131ff25
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/hero-form.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { NgForm }                      from '@angular/forms';
+
+import { Hero } from './hero';
+
+@Component({
+  selector: 'app-hero-form',
+  templateUrl: './hero-form.component.html',
+  styles: [`
+    button { margin: 6px 0; }
+    #heroForm { border: 1px solid black; margin: 20px 0; padding: 8px; max-width: 350px; }
+  `]
+})
+export class HeroFormComponent {
+  @Input() hero: Hero;
+  @ViewChild('heroForm') form: NgForm;
+
+  private _submitMessage = '';
+
+  get submitMessage() {
+    if (!this.form.valid) {
+      this._submitMessage = '';
+    }
+    return this._submitMessage;
+  }
+
+  onSubmit(form: NgForm) {
+    this._submitMessage =  'Submitted. form value is ' + JSON.stringify(form.value);
+  }
+}
diff --git a/aio/content/examples/template-syntax/src/app/hero-switch.components.ts b/aio/content/examples/template-syntax/src/app/hero-switch.components.ts
new file mode 100644
index 000000000000..d2a2dcc7cc44
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/hero-switch.components.ts
@@ -0,0 +1,42 @@
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+@Component({
+  selector: 'app-happy-hero',
+  template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
+})
+export class HappyHeroComponent {
+  @Input() hero: Hero;
+}
+
+@Component({
+  selector: 'app-sad-hero',
+  template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
+})
+export class SadHeroComponent {
+  @Input() hero: Hero;
+}
+
+@Component({
+  selector: 'app-confused-hero',
+  template: `Are you as confused as {{hero.name}}?`
+})
+export class ConfusedHeroComponent {
+  @Input() hero: Hero;
+}
+
+@Component({
+  selector: 'app-unknown-hero',
+  template: `{{message}}`
+})
+export class UnknownHeroComponent {
+  @Input() hero: Hero;
+  get message() {
+    return this.hero && this.hero.name ?
+      `${this.hero.name} is strange and mysterious.` :
+      'Are you feeling indecisive?';
+  }
+}
+
+export const heroSwitchComponents =
+  [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];
diff --git a/aio/content/examples/template-syntax/src/app/hero.ts b/aio/content/examples/template-syntax/src/app/hero.ts
new file mode 100644
index 000000000000..f8cc3b16a6c9
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/hero.ts
@@ -0,0 +1,34 @@
+export class Hero {
+  static nextId = 0;
+
+  static heroes: Hero[] = [
+    new Hero(
+      null,
+      'Hercules',
+      'happy',
+      new Date(1970, 1, 25),
+      'http://www.imdb.com/title/tt0065832/',
+      325
+    ),
+    new Hero(1, 'Mr. Nice',  'happy'),
+    new Hero(2, 'Narco',     'sad' ),
+    new Hero(3, 'Windstorm', 'confused' ),
+    new Hero(4, 'Magneta')
+  ];
+
+
+  constructor(
+    public id?: number,
+    public name?: string,
+    public emotion?: string,
+    public birthdate?: Date,
+    public url?: string,
+    public rate = 100,
+    ) {
+    this.id = id ? id : Hero.nextId++;
+  }
+
+  clone(): Hero {
+    return Object.assign(new Hero(), this);
+  }
+}
diff --git a/aio/content/examples/template-syntax/src/app/sizer.component.ts b/aio/content/examples/template-syntax/src/app/sizer.component.ts
new file mode 100644
index 000000000000..3cb45a77da37
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/sizer.component.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-sizer',
+  template: `
+  <div>
+    <button (click)="dec()" title="smaller">-</button>
+    <button (click)="inc()" title="bigger">+</button>
+    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
+  </div>`
+})
+export class SizerComponent {
+  @Input()  size: number | string;
+  @Output() sizeChange = new EventEmitter<number>();
+
+  dec() { this.resize(-1); }
+  inc() { this.resize(+1); }
+
+  resize(delta: number) {
+    this.size = Math.min(40, Math.max(8, +this.size + delta));
+    this.sizeChange.emit(this.size);
+  }
+}
diff --git a/aio/content/examples/template-syntax/src/assets/images/hero.png b/aio/content/examples/template-syntax/src/assets/images/hero.png
new file mode 100644
index 000000000000..2a128ac3679a
Binary files /dev/null and b/aio/content/examples/template-syntax/src/assets/images/hero.png differ
diff --git a/aio/content/examples/template-syntax/src/assets/images/ng-logo.png b/aio/content/examples/template-syntax/src/assets/images/ng-logo.png
new file mode 100644
index 000000000000..1e488b1a4946
Binary files /dev/null and b/aio/content/examples/template-syntax/src/assets/images/ng-logo.png differ
diff --git a/aio/content/examples/template-syntax/src/assets/images/villain.png b/aio/content/examples/template-syntax/src/assets/images/villain.png
new file mode 100644
index 000000000000..26697d1a42ff
Binary files /dev/null and b/aio/content/examples/template-syntax/src/assets/images/villain.png differ
diff --git a/aio/content/examples/template-syntax/src/index.html b/aio/content/examples/template-syntax/src/index.html
new file mode 100644
index 000000000000..866fc067cb48
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Template Syntax</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/template-syntax/src/main.ts b/aio/content/examples/template-syntax/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/template-syntax/stackblitz.json b/aio/content/examples/template-syntax/stackblitz.json
new file mode 100644
index 000000000000..5ba51f973b33
--- /dev/null
+++ b/aio/content/examples/template-syntax/stackblitz.json
@@ -0,0 +1,5 @@
+{
+  "description": "Template Syntax Collection",
+  "files":["!**/*.d.ts",  "!**/*.js"],
+  "tags": ["template"]
+}
diff --git a/aio/content/examples/testing/example-config.json b/aio/content/examples/testing/example-config.json
new file mode 100644
index 000000000000..317e9458f3db
--- /dev/null
+++ b/aio/content/examples/testing/example-config.json
@@ -0,0 +1,3 @@
+{
+  "projectType": "testing"
+}
diff --git a/aio/content/examples/testing/specs.stackblitz.json b/aio/content/examples/testing/specs.stackblitz.json
new file mode 100644
index 000000000000..627630f6edbe
--- /dev/null
+++ b/aio/content/examples/testing/specs.stackblitz.json
@@ -0,0 +1,25 @@
+{
+  "description": "Testing - specs",
+  "files":[
+    "src/styles.css",
+
+    "src/app/**/*.css",
+    "src/app/**/*.html",
+    "src/app/**/*.ts",
+    "src/app/**/*.spec.ts",
+
+    "src/testing/*.ts",
+
+    "!src/main.ts",
+    "!src/app/bag/*.*",
+    "!src/app/1st.spec.ts",
+
+    "src/expected.ts",
+    "src/test.css",
+    "src/tests.sb.ts",
+    "src/main-specs.ts",
+    "src/index-specs.html"
+  ],
+  "main": "src/index-specs.html",
+  "tags": ["testing"]
+}
diff --git a/aio/content/examples/testing/src/app/about/about.component.spec.ts b/aio/content/examples/testing/src/app/about/about.component.spec.ts
new file mode 100644
index 000000000000..80bebd99a7e7
--- /dev/null
+++ b/aio/content/examples/testing/src/app/about/about.component.spec.ts
@@ -0,0 +1,26 @@
+import { NO_ERRORS_SCHEMA }          from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent }     from './about.component';
+import { HighlightDirective } from '../shared/highlight.directive';
+
+let fixture: ComponentFixture<AboutComponent>;
+
+describe('AboutComponent (highlightDirective)', () => {
+  // #docregion tests
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [ AboutComponent, HighlightDirective],
+      schemas:      [ NO_ERRORS_SCHEMA ]
+    })
+    .createComponent(AboutComponent);
+    fixture.detectChanges(); // initial binding
+  });
+
+  it('should have skyblue <h2>', () => {
+    const h2: HTMLElement = fixture.nativeElement.querySelector('h2');
+    const bgColor = h2.style.backgroundColor;
+    expect(bgColor).toBe('skyblue');
+  });
+  // #enddocregion tests
+});
diff --git a/aio/content/examples/testing/src/app/about/about.component.ts b/aio/content/examples/testing/src/app/about/about.component.ts
new file mode 100644
index 000000000000..465d081d2520
--- /dev/null
+++ b/aio/content/examples/testing/src/app/about/about.component.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+@Component({
+  template: `
+  <h2 highlight="skyblue">About</h2>
+  <h3>Quote of the day:</h3>
+  <twain-quote></twain-quote>
+  `
+})
+export class AboutComponent { }
diff --git a/aio/content/examples/testing/src/app/app-initial.component.spec.ts b/aio/content/examples/testing/src/app/app-initial.component.spec.ts
new file mode 100644
index 000000000000..3e3e6a847ca0
--- /dev/null
+++ b/aio/content/examples/testing/src/app/app-initial.component.spec.ts
@@ -0,0 +1,76 @@
+// #docplaster
+// #docregion
+import { TestBed, async } from '@angular/core/testing';
+// #enddocregion
+import { AppComponent } from './app-initial.component';
+/*
+// #docregion
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+// #enddocregion
+*/
+describe('AppComponent (initial CLI version)', () => {
+  // #docregion
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});
+// #enddocregion
+
+/// As it should be
+import { DebugElement } from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
+
+describe('AppComponent (initial CLI version - as it should be)', () => {
+
+  let app: AppComponent;
+  let de: DebugElement;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+
+    fixture = TestBed.createComponent(AppComponent);
+    app = fixture.componentInstance;
+    de = fixture.debugElement;
+  });
+
+  it('should create the app', () => {
+    expect(app).toBeDefined();
+  });
+
+  it(`should have as title 'app'`, () => {
+    expect(app.title).toEqual('app');
+  });
+
+  it('should render title in an h1 tag', () => {
+    fixture.detectChanges();
+    expect(de.nativeElement.querySelector('h1').textContent)
+      .toContain('Welcome to app!');
+  });
+});
diff --git a/aio/content/examples/testing/src/app/app-initial.component.ts b/aio/content/examples/testing/src/app/app-initial.component.ts
new file mode 100644
index 000000000000..0f06d4dd0752
--- /dev/null
+++ b/aio/content/examples/testing/src/app/app-initial.component.ts
@@ -0,0 +1,11 @@
+// #docregion
+// Reduced version of the initial AppComponent generated by CLI
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: '<h1>Welcome to {{title}}!</h1>'
+})
+export class AppComponent {
+  title = 'app';
+}
diff --git a/aio/content/examples/testing/src/app/app-routing.module.ts b/aio/content/examples/testing/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..f9fd0bdc83b8
--- /dev/null
+++ b/aio/content/examples/testing/src/app/app-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule }       from '@angular/core';
+import { RouterModule }   from '@angular/router';
+
+import { AboutComponent } from './about/about.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
+      { path: 'about', component: AboutComponent },
+      { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule'}
+    ])
+  ],
+  exports: [ RouterModule ] // re-export the module declarations
+})
+export class AppRoutingModule { };
diff --git a/aio/content/examples/testing/src/app/app.component.html b/aio/content/examples/testing/src/app/app.component.html
new file mode 100644
index 000000000000..d73c1162c034
--- /dev/null
+++ b/aio/content/examples/testing/src/app/app.component.html
@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<app-banner></app-banner>
+<app-welcome></app-welcome>
+<!-- #docregion links -->
+<nav>
+  <a routerLink="/dashboard">Dashboard</a>
+  <a routerLink="/heroes">Heroes</a>
+  <a routerLink="/about">About</a>
+</nav>
+<!-- #enddocregion links -->
+<router-outlet></router-outlet>
diff --git a/aio/content/examples/testing/src/app/app.component.router.spec.ts b/aio/content/examples/testing/src/app/app.component.router.spec.ts
new file mode 100644
index 000000000000..4c4ba01579d6
--- /dev/null
+++ b/aio/content/examples/testing/src/app/app.component.router.spec.ts
@@ -0,0 +1,186 @@
+// For more examples:
+//   https://github.com/angular/angular/blob/master/modules/@angular/router/test/integration.spec.ts
+
+import { async, ComponentFixture, fakeAsync, TestBed, tick,
+} from '@angular/core/testing';
+
+import { asyncData } from '../testing';
+
+import { RouterTestingModule } from '@angular/router/testing';
+import { SpyLocation }         from '@angular/common/testing';
+
+// r - for relatively obscure router symbols
+import * as r                         from  '@angular/router';
+import { Router, RouterLinkWithHref } from '@angular/router';
+
+import { By }                 from '@angular/platform-browser';
+import { DebugElement, Type } from '@angular/core';
+import { Location }           from '@angular/common';
+
+import { click }              from '../testing';
+
+import { AppModule }          from './app.module';
+import { AppComponent }       from './app.component';
+import { AboutComponent }     from './about/about.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { TwainService }       from './twain/twain.service';
+
+import { HeroService, TestHeroService } from './model/testing/test-hero.service';
+
+let comp:     AppComponent;
+let fixture:  ComponentFixture<AppComponent>;
+let page:     Page;
+let router:   Router;
+let location: SpyLocation;
+
+describe('AppComponent & RouterTestingModule', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ AppModule, RouterTestingModule ],
+      providers: [
+        { provide: HeroService, useClass: TestHeroService }
+      ]
+    })
+    .compileComponents();
+  }));
+
+  it('should navigate to "Dashboard" immediately', fakeAsync(() => {
+    createComponent();
+    tick(); // wait for async data to arrive
+    expect(location.path()).toEqual('/dashboard', 'after initialNavigation()');
+    expectElementOf(DashboardComponent);
+  }));
+
+  it('should navigate to "About" on click', fakeAsync(() => {
+    createComponent();
+    click(page.aboutLinkDe);
+    // page.aboutLinkDe.nativeElement.click(); // ok but fails in phantom
+
+    advance();
+    expectPathToBe('/about');
+    expectElementOf(AboutComponent);
+  }));
+
+  it('should navigate to "About" w/ browser location URL change', fakeAsync(() => {
+    createComponent();
+    location.simulateHashChange('/about');
+    // location.go('/about'); // also works ... except, perhaps, in Stackblitz
+    advance();
+    expectPathToBe('/about');
+    expectElementOf(AboutComponent);
+  }));
+
+  // Can't navigate to lazy loaded modules with this technique
+  xit('should navigate to "Heroes" on click (not working yet)', fakeAsync(() => {
+    createComponent();
+    page.heroesLinkDe.nativeElement.click();
+    advance();
+    expectPathToBe('/heroes');
+  }));
+
+});
+
+
+///////////////
+import { NgModuleFactoryLoader }    from '@angular/core';
+import { SpyNgModuleFactoryLoader } from '@angular/router/testing';
+
+import { HeroModule }             from './hero/hero.module';  // should be lazy loaded
+import { HeroListComponent }      from './hero/hero-list.component';
+
+let loader: SpyNgModuleFactoryLoader;
+
+///////// Can't get lazy loaded Heroes to work yet
+xdescribe('AppComponent & Lazy Loading (not working yet)', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ AppModule, RouterTestingModule ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(fakeAsync(() => {
+    createComponent();
+    loader = TestBed.get(NgModuleFactoryLoader);
+    loader.stubbedModules = { expected: HeroModule };
+    router.resetConfig([{path: 'heroes', loadChildren: 'expected'}]);
+  }));
+
+  it('should navigate to "Heroes" on click', async(() => {
+    page.heroesLinkDe.nativeElement.click();
+    advance();
+    expectPathToBe('/heroes');
+    expectElementOf(HeroListComponent);
+  }));
+
+  it('can navigate to "Heroes" w/ browser location URL change', fakeAsync(() => {
+    location.go('/heroes');
+    advance();
+    expectPathToBe('/heroes');
+    expectElementOf(HeroListComponent);
+  }));
+});
+
+////// Helpers /////////
+
+/**
+ * Advance to the routed page
+ * Wait a tick, then detect changes, and tick again
+ */
+function advance(): void {
+  tick(); // wait while navigating
+  fixture.detectChanges(); // update view
+  tick(); // wait for async data to arrive
+}
+
+function createComponent() {
+  fixture = TestBed.createComponent(AppComponent);
+  comp = fixture.componentInstance;
+
+  const injector = fixture.debugElement.injector;
+  location = injector.get(Location) as SpyLocation;
+  router = injector.get(Router);
+  router.initialNavigation();
+  spyOn(injector.get(TwainService), 'getQuote')
+    // fake fast async observable
+    .and.returnValue(asyncData('Test Quote'));
+  advance();
+
+  page = new Page();
+}
+
+class Page {
+  aboutLinkDe:     DebugElement;
+  dashboardLinkDe: DebugElement;
+  heroesLinkDe:    DebugElement;
+
+  // for debugging
+  comp: AppComponent;
+  location: SpyLocation;
+  router: Router;
+  fixture: ComponentFixture<AppComponent>;
+
+  constructor() {
+    const links = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));
+    this.aboutLinkDe     = links[2];
+    this.dashboardLinkDe = links[0];
+    this.heroesLinkDe    = links[1];
+
+    // for debugging
+    this.comp    = comp;
+    this.fixture = fixture;
+    this.router  = router;
+  }
+}
+
+function expectPathToBe(path: string, expectationFailOutput?: any) {
+  expect(location.path()).toEqual(path, expectationFailOutput || 'location.path()');
+}
+
+function expectElementOf(type: Type<any>): any {
+  const el = fixture.debugElement.query(By.directive(type));
+  expect(el).toBeTruthy('expected an element for ' + type.name);
+  return el;
+}
diff --git a/aio/content/examples/testing/src/app/app.component.spec.ts b/aio/content/examples/testing/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..e759aa51a26f
--- /dev/null
+++ b/aio/content/examples/testing/src/app/app.component.spec.ts
@@ -0,0 +1,146 @@
+// #docplaster
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { RouterLinkDirectiveStub } from '../testing';
+
+// #docregion component-stubs
+@Component({selector: 'app-banner', template: ''})
+class BannerStubComponent {}
+
+@Component({selector: 'router-outlet', template: ''})
+class RouterOutletStubComponent { }
+
+@Component({selector: 'app-welcome', template: ''})
+class WelcomeStubComponent {}
+// #enddocregion component-stubs
+
+let comp:    AppComponent;
+let fixture: ComponentFixture<AppComponent>;
+
+describe('AppComponent & TestModule', () => {
+  beforeEach(async(() => {
+    // #docregion testbed-stubs
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent,
+        RouterLinkDirectiveStub,
+        BannerStubComponent,
+        RouterOutletStubComponent,
+        WelcomeStubComponent
+      ]
+    })
+    // #enddocregion testbed-stubs
+    .compileComponents().then(() => {
+      fixture = TestBed.createComponent(AppComponent);
+      comp    = fixture.componentInstance;
+    });
+  }));
+  tests();
+});
+
+//////// Testing w/ NO_ERRORS_SCHEMA //////
+describe('AppComponent & NO_ERRORS_SCHEMA', () => {
+  beforeEach(async(() => {
+    // #docregion no-errors-schema, mixed-setup
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent,
+        // #enddocregion no-errors-schema
+        BannerStubComponent,
+        // #docregion no-errors-schema
+        RouterLinkDirectiveStub
+      ],
+      schemas: [ NO_ERRORS_SCHEMA ]
+    })
+    // #enddocregion no-errors-schema, mixed-setup
+    .compileComponents().then(() => {
+      fixture = TestBed.createComponent(AppComponent);
+      comp    = fixture.componentInstance;
+    });
+  }));
+  tests();
+});
+
+//////// Testing w/ real root module //////
+// Tricky because we are disabling the router and its configuration
+// Better to use RouterTestingModule
+import { AppModule }    from './app.module';
+import { AppRoutingModule } from './app-routing.module';
+
+describe('AppComponent & AppModule', () => {
+
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+      imports: [ AppModule ]
+    })
+
+    // Get rid of app's Router configuration otherwise many failures.
+    // Doing so removes Router declarations; add the Router stubs
+    .overrideModule(AppModule, {
+      remove: {
+        imports: [ AppRoutingModule ]
+      },
+      add: {
+        declarations: [ RouterLinkDirectiveStub, RouterOutletStubComponent ]
+      }
+    })
+
+    .compileComponents()
+
+    .then(() => {
+      fixture = TestBed.createComponent(AppComponent);
+      comp    = fixture.componentInstance;
+    });
+  }));
+
+  tests();
+});
+
+function tests() {
+  let routerLinks: RouterLinkDirectiveStub[];
+  let linkDes: DebugElement[];
+
+  // #docregion test-setup
+  beforeEach(() => {
+    fixture.detectChanges(); // trigger initial data binding
+
+    // find DebugElements with an attached RouterLinkStubDirective
+    linkDes = fixture.debugElement
+      .queryAll(By.directive(RouterLinkDirectiveStub));
+
+    // get attached link directive instances
+    // using each DebugElement's injector
+    routerLinks = linkDes.map(de => de.injector.get(RouterLinkDirectiveStub));
+  });
+  // #enddocregion test-setup
+
+  it('can instantiate the component', () => {
+    expect(comp).not.toBeNull();
+  });
+
+  // #docregion tests
+  it('can get RouterLinks from template', () => {
+    expect(routerLinks.length).toBe(3, 'should have 3 routerLinks');
+    expect(routerLinks[0].linkParams).toBe('/dashboard');
+    expect(routerLinks[1].linkParams).toBe('/heroes');
+    expect(routerLinks[2].linkParams).toBe('/about');
+  });
+
+  it('can click Heroes link in template', () => {
+    const heroesLinkDe = linkDes[1];   // heroes link DebugElement
+    const heroesLink = routerLinks[1]; // heroes link directive
+
+    expect(heroesLink.navigatedTo).toBeNull('should not have navigated yet');
+
+    heroesLinkDe.triggerEventHandler('click', null);
+    fixture.detectChanges();
+
+    expect(heroesLink.navigatedTo).toBe('/heroes');
+  });
+  // #enddocregion tests
+}
diff --git a/aio/content/examples/testing/src/app/app.component.ts b/aio/content/examples/testing/src/app/app.component.ts
new file mode 100644
index 000000000000..7b3cf496f146
--- /dev/null
+++ b/aio/content/examples/testing/src/app/app.component.ts
@@ -0,0 +1,7 @@
+// #docregion
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/testing/src/app/app.module.ts b/aio/content/examples/testing/src/app/app.module.ts
new file mode 100644
index 000000000000..aecf6ea5e279
--- /dev/null
+++ b/aio/content/examples/testing/src/app/app.module.ts
@@ -0,0 +1,50 @@
+import { NgModule }         from '@angular/core';
+import { BrowserModule }    from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent }     from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+
+import { AboutComponent }   from './about/about.component';
+import { BannerComponent }  from './banner/banner.component';
+import { HeroService }      from './model/hero.service';
+import { UserService }      from './model/user.service';
+import { TwainComponent }   from './twain/twain.component';
+import { TwainService }     from './twain/twain.service';
+import { WelcomeComponent } from './welcome/welcome.component';
+
+import { DashboardModule }  from './dashboard/dashboard.module';
+import { SharedModule }     from './shared/shared.module';
+
+import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService } from './in-memory-data.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    DashboardModule,
+    AppRoutingModule,
+    SharedModule,
+    HttpClientModule,
+
+    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
+    // and returns simulated server responses.
+    // Remove it when a real server is ready to receive requests.
+    HttpClientInMemoryWebApiModule.forRoot(
+      InMemoryDataService, { dataEncapsulation: false }
+    )
+  ],
+  providers: [
+    HeroService,
+    TwainService,
+    UserService
+  ],
+  declarations: [
+    AppComponent,
+    AboutComponent,
+    BannerComponent,
+    TwainComponent,
+    WelcomeComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/testing/src/app/banner/banner-external.component.css b/aio/content/examples/testing/src/app/banner/banner-external.component.css
new file mode 100644
index 000000000000..cd09a55b3c87
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-external.component.css
@@ -0,0 +1 @@
+h1 { color: green; font-size: 350%}
diff --git a/aio/content/examples/testing/src/app/banner/banner-external.component.html b/aio/content/examples/testing/src/app/banner/banner-external.component.html
new file mode 100644
index 000000000000..6213adcb47fc
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-external.component.html
@@ -0,0 +1 @@
+<h1>{{title}}</h1>
diff --git a/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts
new file mode 100644
index 000000000000..d5fc9c8cbe09
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts
@@ -0,0 +1,72 @@
+// #docplaster
+// #docregion import-async
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+// #enddocregion import-async
+import { By }              from '@angular/platform-browser';
+import { DebugElement }    from '@angular/core';
+
+import { BannerComponent } from './banner-external.component';
+
+describe('BannerComponent (external files)', () => {
+  let component: BannerComponent;
+  let fixture:   ComponentFixture<BannerComponent>;
+  let h1:        HTMLElement;
+
+  describe('Two beforeEach', () => {
+    // #docregion async-before-each
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [ BannerComponent ],
+      })
+      .compileComponents();  // compile template and css
+    }));
+    // #enddocregion async-before-each
+
+    // synchronous beforeEach
+    // #docregion sync-before-each
+    beforeEach(() => {
+      fixture = TestBed.createComponent(BannerComponent);
+      component = fixture.componentInstance; // BannerComponent test instance
+      h1 = fixture.nativeElement.querySelector('h1');
+    });
+    // #enddocregion sync-before-each
+
+    tests();
+  });
+
+  describe('One beforeEach', () => {
+    // #docregion one-before-each
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [ BannerComponent ],
+      })
+      .compileComponents()
+      .then(() => {
+        fixture = TestBed.createComponent(BannerComponent);
+        component = fixture.componentInstance;
+        h1 = fixture.nativeElement.querySelector('h1');
+      });
+    }));
+    // #enddocregion one-before-each
+
+    tests();
+  });
+
+  function tests() {
+    it('no title in the DOM until manually call `detectChanges`', () => {
+      expect(h1.textContent).toEqual('');
+    });
+
+    it('should display original title', () => {
+      fixture.detectChanges();
+      expect(h1.textContent).toContain(component.title);
+    });
+
+    it('should display a different test title', () => {
+      component.title = 'Test Title';
+      fixture.detectChanges();
+      expect(h1.textContent).toContain('Test Title');
+    });
+  }
+});
+
diff --git a/aio/content/examples/testing/src/app/banner/banner-external.component.ts b/aio/content/examples/testing/src/app/banner/banner-external.component.ts
new file mode 100644
index 000000000000..dfec36074db4
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-external.component.ts
@@ -0,0 +1,14 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion metadata
+@Component({
+  selector: 'app-banner',
+  templateUrl: './banner-external.component.html',
+  styleUrls:  ['./banner-external.component.css']
+})
+// #enddocregion metadata
+export class BannerComponent {
+  title = 'Test Tour of Heroes';
+}
diff --git a/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
new file mode 100644
index 000000000000..8a45df5023e9
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
@@ -0,0 +1,119 @@
+// #docplaster
+// #docregion import-by
+import { By } from '@angular/platform-browser';
+// #enddocregion import-by
+// #docregion import-debug-element
+import { DebugElement } from '@angular/core';
+// #enddocregion import-debug-element
+// #docregion v1
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+// #enddocregion v1
+import { BannerComponent } from './banner-initial.component';
+/*
+// #docregion v1
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent', () => {
+// #enddocregion v1
+*/
+describe('BannerComponent (initial CLI generated)', () => {
+// #docregion v1
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeDefined();
+  });
+});
+// #enddocregion v1
+
+// #docregion v2
+describe('BannerComponent (minimal)', () => {
+  it('should create', () => {
+    // #docregion configureTestingModule
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ]
+    });
+    // #enddocregion configureTestingModule
+    // #docregion createComponent
+    const fixture = TestBed.createComponent(BannerComponent);
+    // #enddocregion createComponent
+    // #docregion componentInstance
+    const component = fixture.componentInstance;
+    expect(component).toBeDefined();
+    // #enddocregion componentInstance
+  });
+});
+// #enddocregion v2
+
+// #docregion v3, v4
+describe('BannerComponent (with beforeEach)', () => {
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ]
+    });
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeDefined();
+  });
+// #enddocregion v3
+
+// #docregion v4-test-2
+  it('should contain "banner works!"', () => {
+    const bannerElement: HTMLElement = fixture.nativeElement;
+    expect(bannerElement.textContent).toContain('banner works!');
+  });
+// #enddocregion v4-test-2
+
+// #docregion v4-test-3
+  it('should have <p> with "banner works!"', () => {
+    // #docregion nativeElement
+    const bannerElement: HTMLElement = fixture.nativeElement;
+    // #enddocregion nativeElement
+    const p = bannerElement.querySelector('p');
+    expect(p.textContent).toEqual('banner works!');
+  });
+// #enddocregion v4-test-3
+
+
+// #docregion v4-test-4
+it('should find the <p> with fixture.debugElement.nativeElement)', () => {
+  // #docregion debugElement-nativeElement
+  const bannerDe: DebugElement = fixture.debugElement;
+  const bannerEl: HTMLElement = bannerDe.nativeElement;
+  // #enddocregion debugElement-nativeElement
+  const p = bannerEl.querySelector('p');
+  expect(p.textContent).toEqual('banner works!');
+});
+// #enddocregion v4-test-4
+
+// #docregion v4-test-5
+it('should find the <p> with fixture.debugElement.query(By.css)', () => {
+  const bannerDe: DebugElement = fixture.debugElement;
+  const paragraphDe = bannerDe.query(By.css('p'));
+  const p: HTMLElement = paragraphDe.nativeElement;
+  expect(p.textContent).toEqual('banner works!');
+});
+// #enddocregion v4-test-5
+// #docregion v3
+});
+// #enddocregion v3, v4
diff --git a/aio/content/examples/testing/src/app/banner/banner-initial.component.ts b/aio/content/examples/testing/src/app/banner/banner-initial.component.ts
new file mode 100644
index 000000000000..a7959e55731a
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-initial.component.ts
@@ -0,0 +1,10 @@
+// BannerComponent as initially generated by the CLI
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-banner',
+  template: `<p>banner works!</p>`,
+  styles: []
+})
+export class BannerComponent { }
diff --git a/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts b/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
new file mode 100644
index 000000000000..3310fbdad0da
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
@@ -0,0 +1,51 @@
+// #docplaster
+// #docregion
+// #docregion import-async
+import { async } from '@angular/core/testing';
+// #enddocregion import-async
+// #docregion import-ComponentFixtureAutoDetect
+import { ComponentFixtureAutoDetect } from '@angular/core/testing';
+// #enddocregion import-ComponentFixtureAutoDetect
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent (AutoChangeDetect)', () => {
+  let comp:    BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+  let h1:      HTMLElement;
+
+  beforeEach(() => {
+    // #docregion auto-detect
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ],
+      providers: [
+        { provide: ComponentFixtureAutoDetect, useValue: true }
+      ]
+    });
+    // #enddocregion auto-detect
+    fixture = TestBed.createComponent(BannerComponent);
+    comp = fixture.componentInstance;
+    h1 = fixture.nativeElement.querySelector('h1');
+  });
+
+  // #docregion auto-detect-tests
+  it('should display original title', () => {
+    // Hooray! No `fixture.detectChanges()` needed
+    expect(h1.textContent).toContain(comp.title);
+  });
+
+  it('should still see original title after comp.title change', () => {
+    const oldTitle = comp.title;
+    comp.title = 'Test Title';
+    // Displayed title is old because Angular didn't hear the change :(
+    expect(h1.textContent).toContain(oldTitle);
+  });
+
+  it('should display updated title after detectChanges', () => {
+    comp.title = 'Test Title';
+    fixture.detectChanges(); // detect changes explicitly
+    expect(h1.textContent).toContain(comp.title);
+  });
+  // #enddocregion auto-detect-tests
+});
diff --git a/aio/content/examples/testing/src/app/banner/banner.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner.component.spec.ts
new file mode 100644
index 000000000000..a731debbd17b
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner.component.spec.ts
@@ -0,0 +1,56 @@
+// #docplaster
+// #docregion
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent (inline template)', () => {
+// #docregion setup
+  let component: BannerComponent;
+  let fixture:   ComponentFixture<BannerComponent>;
+  let h1:        HTMLElement;
+
+  // #docregion configure-and-create
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ],
+    });
+    fixture = TestBed.createComponent(BannerComponent);
+    // #enddocregion configure-and-create
+    component = fixture.componentInstance; // BannerComponent test instance
+    h1 = fixture.nativeElement.querySelector('h1');
+    // #docregion configure-and-create
+  });
+// #enddocregion setup, configure-and-create
+
+// #docregion test-w-o-detect-changes
+  it('no title in the DOM after createComponent()', () => {
+    expect(h1.textContent).toEqual('');
+  });
+// #enddocregion test-w-o-detect-changes
+
+// #docregion expect-h1-default-v1
+  it('should display original title', () => {
+    // #enddocregion expect-h1-default-v1
+    fixture.detectChanges();
+    // #docregion expect-h1-default-v1
+    expect(h1.textContent).toContain(component.title);
+  });
+  // #enddocregion expect-h1-default-v1
+
+// #docregion expect-h1-default
+it('should display original title after detectChanges()', () => {
+  fixture.detectChanges();
+  expect(h1.textContent).toContain(component.title);
+});
+// #enddocregion expect-h1-default
+
+// #docregion after-change
+it('should display a different test title', () => {
+  component.title = 'Test Title';
+  fixture.detectChanges();
+  expect(h1.textContent).toContain('Test Title');
+});
+// #enddocregion after-change
+});
diff --git a/aio/content/examples/testing/src/app/banner/banner.component.ts b/aio/content/examples/testing/src/app/banner/banner.component.ts
new file mode 100644
index 000000000000..3354801d0acd
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+// #docregion component
+@Component({
+  selector: 'app-banner',
+  template: '<h1>{{title}}</h1>',
+  styles: ['h1 { color: green; font-size: 350%}']
+})
+export class BannerComponent {
+  title = 'Test Tour of Heroes';
+}
+// #enddocregion component
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css
new file mode 100644
index 000000000000..eb54d181d82d
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css
@@ -0,0 +1,28 @@
+.hero {
+	padding: 20px;
+  position: relative;
+	text-align: center;
+	color: #eee;
+	max-height: 120px;
+	min-width: 120px;
+	background-color: #607D8B;
+	border-radius: 2px;
+}
+
+.hero:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+
+@media (max-width: 600px) {
+	.hero {
+	  font-size: 10px;
+	  max-height: 75px; }
+}
+
+@media (max-width: 1024px) {
+	.hero {
+	  min-width: 60px;
+	}
+}
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
new file mode 100644
index 000000000000..84d73e45f41b
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
@@ -0,0 +1,163 @@
+
+// #docplaster
+import { async, ComponentFixture, TestBed
+} from '@angular/core/testing';
+
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { addMatchers, click } from '../../testing';
+
+import { Hero } from '../model/hero';
+import { DashboardHeroComponent } from './dashboard-hero.component';
+
+beforeEach( addMatchers );
+
+describe('DashboardHeroComponent class only', () => {
+  // #docregion class-only
+  it('raises the selected event when clicked', () => {
+    const comp = new DashboardHeroComponent();
+    const hero: Hero = { id: 42, name: 'Test' };
+    comp.hero = hero;
+
+    comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
+    comp.click();
+  });
+  // #enddocregion class-only
+});
+
+describe('DashboardHeroComponent when tested directly', () => {
+
+  let comp: DashboardHeroComponent;
+  let expectedHero: Hero;
+  let fixture: ComponentFixture<DashboardHeroComponent>;
+  let heroDe: DebugElement;
+  let heroEl: HTMLElement;
+
+  beforeEach(async(() => {
+    // #docregion setup, config-testbed
+    TestBed.configureTestingModule({
+      declarations: [ DashboardHeroComponent ]
+    })
+    // #enddocregion setup, config-testbed
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    // #docregion setup
+    fixture = TestBed.createComponent(DashboardHeroComponent);
+    comp    = fixture.componentInstance;
+
+    // find the hero's DebugElement and element
+    heroDe  = fixture.debugElement.query(By.css('.hero'));
+    heroEl = heroDe.nativeElement;
+
+    // mock the hero supplied by the parent component
+    expectedHero = { id: 42, name: 'Test Name' };
+
+    // simulate the parent setting the input property with that hero
+    comp.hero = expectedHero;
+
+    // trigger initial data binding
+    fixture.detectChanges();
+    // #enddocregion setup
+  });
+
+  // #docregion name-test
+  it('should display hero name in uppercase', () => {
+    const expectedPipedName = expectedHero.name.toUpperCase();
+    expect(heroEl.textContent).toContain(expectedPipedName);
+  });
+  // #enddocregion name-test
+
+  // #docregion click-test
+  it('should raise selected event when clicked (triggerEventHandler)', () => {
+    let selectedHero: Hero;
+    comp.selected.subscribe((hero: Hero) => selectedHero = hero);
+
+  // #docregion trigger-event-handler
+    heroDe.triggerEventHandler('click', null);
+  // #enddocregion trigger-event-handler
+    expect(selectedHero).toBe(expectedHero);
+  });
+  // #enddocregion click-test
+
+    // #docregion click-test-2
+    it('should raise selected event when clicked (element.click)', () => {
+      let selectedHero: Hero;
+      comp.selected.subscribe((hero: Hero) => selectedHero = hero);
+
+      heroEl.click();
+      expect(selectedHero).toBe(expectedHero);
+    });
+    // #enddocregion click-test-2
+
+  // #docregion click-test-3
+  it('should raise selected event when clicked (click helper)', () => {
+    let selectedHero: Hero;
+    comp.selected.subscribe(hero => selectedHero = hero);
+
+    click(heroDe); // click helper with DebugElement
+    click(heroEl); // click helper with native element
+
+    expect(selectedHero).toBe(expectedHero);
+  });
+  // #enddocregion click-test-3
+});
+
+//////////////////
+
+describe('DashboardHeroComponent when inside a test host', () => {
+  let testHost: TestHostComponent;
+  let fixture: ComponentFixture<TestHostComponent>;
+  let heroEl: HTMLElement;
+
+  beforeEach(async(() => {
+    // #docregion test-host-setup
+    TestBed.configureTestingModule({
+      declarations: [ DashboardHeroComponent, TestHostComponent ]
+    })
+    // #enddocregion test-host-setup
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    // #docregion test-host-setup
+    // create TestHostComponent instead of DashboardHeroComponent
+    fixture  = TestBed.createComponent(TestHostComponent);
+    testHost = fixture.componentInstance;
+    heroEl   = fixture.nativeElement.querySelector('.hero');
+    fixture.detectChanges(); // trigger initial data binding
+    // #enddocregion test-host-setup
+  });
+
+  // #docregion test-host-tests
+  it('should display hero name', () => {
+    const expectedPipedName = testHost.hero.name.toUpperCase();
+    expect(heroEl.textContent).toContain(expectedPipedName);
+  });
+
+  it('should raise selected event when clicked', () => {
+    click(heroEl);
+    // selected hero should be the same data bound hero
+    expect(testHost.selectedHero).toBe(testHost.hero);
+  });
+  // #enddocregion test-host-tests
+});
+
+////// Test Host Component //////
+import { Component } from '@angular/core';
+
+// #docregion test-host
+@Component({
+  template: `
+    <dashboard-hero
+      [hero]="hero" (selected)="onSelected($event)">
+    </dashboard-hero>`
+})
+class TestHostComponent {
+  hero: Hero = {id: 42, name: 'Test Name' };
+  selectedHero: Hero;
+  onSelected(hero: Hero) { this.selectedHero = hero; }
+}
+// #enddocregion test-host
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
new file mode 100644
index 000000000000..ca1ff573bff2
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
@@ -0,0 +1,21 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { Hero } from '../model/hero';
+
+// #docregion component
+@Component({
+  selector: 'dashboard-hero',
+  template: `
+    <div (click)="click()" class="hero">
+      {{hero.name | uppercase}}
+    </div>`,
+  styleUrls: [ './dashboard-hero.component.css' ]
+})
+// #docregion class
+export class DashboardHeroComponent {
+  @Input() hero: Hero;
+  @Output() selected = new EventEmitter<Hero>();
+  click() { this.selected.emit(this.hero); }
+}
+// #enddocregion component, class
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.css b/aio/content/examples/testing/src/app/dashboard/dashboard.component.css
new file mode 100644
index 000000000000..98130b61c6d1
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.css
@@ -0,0 +1,35 @@
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 1024px) {
+	.grid {
+	  margin: 0;
+	}
+}
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.html b/aio/content/examples/testing/src/app/dashboard/dashboard.component.html
new file mode 100644
index 000000000000..b26e16b828da
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.html
@@ -0,0 +1,9 @@
+<h2 highlight>{{title}}</h2>
+
+<div class="grid grid-pad">
+<!-- #docregion dashboard-hero -->
+  <dashboard-hero *ngFor="let hero of heroes"  class="col-1-4"
+    [hero]=hero  (selected)="gotoDetail($event)" >
+  </dashboard-hero>
+<!-- #enddocregion dashboard-hero -->
+</div>
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts
new file mode 100644
index 000000000000..1d372bfe0e48
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts
@@ -0,0 +1,59 @@
+import { Router } from '@angular/router';
+
+import { DashboardComponent } from './dashboard.component';
+import { Hero }               from '../model/hero';
+
+import { addMatchers }     from '../../testing';
+import { TestHeroService, HeroService } from '../model/testing/test-hero.service';
+
+class FakeRouter {
+  navigateByUrl(url: string) { return url;  }
+}
+
+describe('DashboardComponent class only', () => {
+  let comp: DashboardComponent;
+  let heroService: TestHeroService;
+  let router: Router;
+
+  beforeEach(() => {
+    addMatchers();
+    router = new FakeRouter() as any as Router;
+    heroService = new TestHeroService();
+    comp = new DashboardComponent(router, heroService);
+  });
+
+  it('should NOT have heroes before calling OnInit', () => {
+    expect(comp.heroes.length).toBe(0,
+      'should not have heroes before OnInit');
+  });
+
+  it('should NOT have heroes immediately after OnInit', () => {
+    comp.ngOnInit(); // ngOnInit -> getHeroes
+    expect(comp.heroes.length).toBe(0,
+      'should not have heroes until service promise resolves');
+  });
+
+  it('should HAVE heroes after HeroService gets them', (done: DoneFn) => {
+    comp.ngOnInit(); // ngOnInit -> getHeroes
+    heroService.lastResult // the one from getHeroes
+      .subscribe(
+        () => {
+        // throw new Error('deliberate error'); // see it fail gracefully
+        expect(comp.heroes.length).toBeGreaterThan(0,
+          'should have heroes after service promise resolves');
+        done();
+      },
+      done.fail);
+  });
+
+  it('should tell ROUTER to navigate by hero id', () => {
+    const hero: Hero = {id: 42, name: 'Abbracadabra' };
+    const spy = spyOn(router, 'navigateByUrl');
+
+    comp.gotoDetail(hero);
+
+    const navArgs = spy.calls.mostRecent().args[0];
+    expect(navArgs).toBe('/heroes/42', 'should nav to HeroDetail for Hero 42');
+  });
+
+});
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 000000000000..9beef762a077
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,148 @@
+// #docplaster
+import { async, inject, ComponentFixture, TestBed
+} from '@angular/core/testing';
+
+import { addMatchers, asyncData, click } from '../../testing';
+import { HeroService }   from '../model/hero.service';
+import { getTestHeroes } from '../model/testing/test-heroes';
+
+import { By }     from '@angular/platform-browser';
+import { Router } from '@angular/router';
+
+import { DashboardComponent } from './dashboard.component';
+import { DashboardModule }    from './dashboard.module';
+
+beforeEach ( addMatchers );
+
+let comp: DashboardComponent;
+let fixture: ComponentFixture<DashboardComponent>;
+
+////////  Deep  ////////////////
+
+describe('DashboardComponent (deep)', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ DashboardModule ]
+    });
+  });
+
+  compileAndCreate();
+
+  tests(clickForDeep);
+
+  function clickForDeep() {
+    // get first <div class="hero">
+    const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero');
+    click(heroEl);
+  }
+});
+
+////////  Shallow ////////////////
+
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+describe('DashboardComponent (shallow)', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ],
+      schemas:      [NO_ERRORS_SCHEMA]
+    });
+  });
+
+  compileAndCreate();
+
+  tests(clickForShallow);
+
+  function clickForShallow() {
+    // get first <dashboard-hero> DebugElement
+    const heroDe = fixture.debugElement.query(By.css('dashboard-hero'));
+    heroDe.triggerEventHandler('selected', comp.heroes[0]);
+  }
+});
+
+/** Add TestBed providers, compile, and create DashboardComponent */
+function compileAndCreate() {
+  // #docregion compile-and-create-body
+  beforeEach(async(() => {
+    // #docregion router-spy
+    const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
+    const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: HeroService, useValue: heroServiceSpy },
+        { provide: Router,      useValue: routerSpy }
+      ]
+    })
+    // #enddocregion router-spy
+    .compileComponents().then(() => {
+      fixture = TestBed.createComponent(DashboardComponent);
+      comp = fixture.componentInstance;
+
+      // getHeroes spy returns observable of test heroes
+      heroServiceSpy.getHeroes.and.returnValue(asyncData(getTestHeroes()));
+    });
+    // #enddocregion compile-and-create-body
+  }));
+}
+
+/**
+ * The (almost) same tests for both.
+ * Only change: the way that the first hero is clicked
+ */
+function tests(heroClick: Function) {
+
+  it('should NOT have heroes before ngOnInit', () => {
+    expect(comp.heroes.length).toBe(0,
+      'should not have heroes before ngOnInit');
+  });
+
+  it('should NOT have heroes immediately after ngOnInit', () => {
+    fixture.detectChanges(); // runs initial lifecycle hooks
+
+    expect(comp.heroes.length).toBe(0,
+      'should not have heroes until service promise resolves');
+  });
+
+  describe('after get dashboard heroes', () => {
+
+    let router: Router;
+
+     // Trigger component so it gets heroes and binds to them
+     beforeEach(async(() => {
+        router = fixture.debugElement.injector.get(Router);
+        fixture.detectChanges(); // runs ngOnInit -> getHeroes
+        fixture.whenStable() // No need for the `lastPromise` hack!
+          .then(() => fixture.detectChanges()); // bind to heroes
+     }));
+
+    it('should HAVE heroes', () => {
+      expect(comp.heroes.length).toBeGreaterThan(0,
+        'should have heroes after service promise resolves');
+    });
+
+    it('should DISPLAY heroes', () => {
+      // Find and examine the displayed heroes
+      // Look for them in the DOM by css class
+      const heroes = fixture.nativeElement.querySelectorAll('dashboard-hero');
+      expect(heroes.length).toBe(4, 'should display 4 heroes');
+    });
+
+    // #docregion navigate-test
+    it('should tell ROUTER to navigate when hero clicked', () => {
+
+      heroClick(); // trigger click on first inner <div class="hero">
+
+      // args passed to router.navigateByUrl() spy
+      const spy = router.navigateByUrl as jasmine.Spy;
+      const navArgs = spy.calls.first().args[0];
+
+      // expecting to navigate to id of the component's first hero
+      const id = comp.heroes[0].id;
+      expect(navArgs).toBe('/heroes/' + id,
+        'should nav to HeroDetail for first hero');
+    });
+    // #enddocregion navigate-test
+  });
+}
+
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 000000000000..6ab4e6f324a8
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,41 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { Router }            from '@angular/router';
+
+import { Hero }        from '../model/hero';
+import { HeroService } from '../model/hero.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: [ './dashboard.component.css' ]
+})
+export class DashboardComponent implements OnInit {
+
+  heroes: Hero[] = [];
+
+  // #docregion ctor
+  constructor(
+    private router: Router,
+    private heroService: HeroService) {
+  }
+  // #enddocregion ctor
+
+  ngOnInit() {
+    this.heroService.getHeroes()
+      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
+  }
+
+  // #docregion goto-detail
+  gotoDetail(hero: Hero) {
+    let url = `/heroes/${hero.id}`;
+    this.router.navigateByUrl(url);
+  }
+  // #enddocregion goto-detail
+
+  get title() {
+    let cnt = this.heroes.length;
+    return cnt === 0 ? 'No Heroes' :
+      cnt === 1 ? 'Top Hero' :  `Top ${cnt} Heroes`;
+  }
+}
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.module.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.module.ts
new file mode 100644
index 000000000000..8a70c851a063
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.module.ts
@@ -0,0 +1,20 @@
+import { NgModule }               from '@angular/core';
+import { RouterModule, Routes }   from '@angular/router';
+
+import { SharedModule }           from '../shared/shared.module';
+
+import { DashboardComponent }     from './dashboard.component';
+import { DashboardHeroComponent } from './dashboard-hero.component';
+
+const routes: Routes =  [
+  { path: 'dashboard',  component: DashboardComponent },
+];
+
+@NgModule({
+  imports:      [
+    SharedModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ DashboardComponent, DashboardHeroComponent ]
+})
+export class DashboardModule { }
diff --git a/aio/content/examples/testing/src/app/demo/async-helper.spec.ts b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
new file mode 100644
index 000000000000..9bf42ed33fec
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
@@ -0,0 +1,69 @@
+// tslint:disable-next-line:no-unused-variable
+import { async, fakeAsync, tick } from '@angular/core/testing';
+
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+describe('Angular async helper', () => {
+  let actuallyDone = false;
+
+  beforeEach(() => { actuallyDone = false; });
+
+  afterEach(() => { expect(actuallyDone).toBe(true, 'actuallyDone should be true'); });
+
+  it('should run normal test', () => { actuallyDone = true; });
+
+  it('should run normal async test', (done: DoneFn) => {
+    setTimeout(() => {
+      actuallyDone = true;
+      done();
+    }, 0);
+  });
+
+  it('should run async test with task',
+      async(() => { setTimeout(() => { actuallyDone = true; }, 0); }));
+
+  it('should run async test with successful promise', async(() => {
+    const p = new Promise(resolve => { setTimeout(resolve, 10); });
+    p.then(() => { actuallyDone = true; });
+  }));
+
+  it('should run async test with failed promise', async(() => {
+    const p = new Promise((resolve, reject) => { setTimeout(reject, 10); });
+    p.catch(() => { actuallyDone = true; });
+  }));
+
+  // Use done. Cannot use setInterval with async or fakeAsync
+  // See https://github.com/angular/angular/issues/10127
+  it('should run async test with successful delayed Observable', (done: DoneFn) => {
+    const source = of(true).pipe(delay(10));
+    source.subscribe(
+      val => actuallyDone = true,
+      err => fail(err),
+      done
+    );
+  });
+
+  // Cannot use setInterval from within an async zone test
+  // See https://github.com/angular/angular/issues/10127
+  // xit('should run async test with successful delayed Observable', async(() => {
+  // const source = of(true).pipe(delay(10));
+  //   source.subscribe(
+  //     val => actuallyDone = true,
+  //     err => fail(err)
+  //   );
+  // }));
+
+  // // Fail message: Error: 1 periodic timer(s) still in the queue
+  // // See https://github.com/angular/angular/issues/10127
+  // xit('should run async test with successful delayed Observable', fakeAsync(() => {
+  // const source = of(true).pipe(delay(10));
+  //   source.subscribe(
+  //     val => actuallyDone = true,
+  //     err => fail(err)
+  //   );
+
+  //   tick();
+  // }));
+
+});
diff --git a/aio/content/examples/testing/src/app/demo/demo-external-template.html b/aio/content/examples/testing/src/app/demo/demo-external-template.html
new file mode 100644
index 000000000000..4c2b23755fe7
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo-external-template.html
@@ -0,0 +1 @@
+<span>from external template</span>
diff --git a/aio/content/examples/testing/src/app/demo/demo-main.ts b/aio/content/examples/testing/src/app/demo/demo-main.ts
new file mode 100644
index 000000000000..9243428b7ab8
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo-main.ts
@@ -0,0 +1,5 @@
+// main app entry point
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DemoModule } from './demo';
+
+platformBrowserDynamic().bootstrapModule(DemoModule);
diff --git a/aio/content/examples/testing/src/app/demo/demo.spec.ts b/aio/content/examples/testing/src/app/demo/demo.spec.ts
new file mode 100644
index 000000000000..d65b9acfb823
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo.spec.ts
@@ -0,0 +1,153 @@
+// #docplaster
+import {
+  LightswitchComponent,
+  MasterService,
+  ValueService,
+  ReversePipe
+} from './demo';
+
+///////// Fakes /////////
+export class FakeValueService extends ValueService {
+  value = 'faked service value';
+}
+////////////////////////
+describe('demo (no TestBed):', () => {
+
+  // #docregion ValueService
+  // Straight Jasmine testing without Angular's testing support
+  describe('ValueService', () => {
+    let service: ValueService;
+    beforeEach(() => { service = new ValueService(); });
+
+    it('#getValue should return real value', () => {
+      expect(service.getValue()).toBe('real value');
+    });
+
+    it('#getObservableValue should return value from observable',
+      (done: DoneFn) => {
+      service.getObservableValue().subscribe(value => {
+        expect(value).toBe('observable value');
+        done();
+      });
+    });
+
+    it('#getPromiseValue should return value from a promise',
+      (done: DoneFn) => {
+      service.getPromiseValue().then(value => {
+        expect(value).toBe('promise value');
+        done();
+      });
+    });
+  });
+  // #enddocregion ValueService
+
+  // MasterService requires injection of a ValueService
+  // #docregion MasterService
+  describe('MasterService without Angular testing support', () => {
+    let masterService: MasterService;
+
+    it('#getValue should return real value from the real service', () => {
+      masterService = new MasterService(new ValueService());
+      expect(masterService.getValue()).toBe('real value');
+    });
+
+    it('#getValue should return faked value from a fakeService', () => {
+      masterService = new MasterService(new FakeValueService());
+      expect(masterService.getValue()).toBe('faked service value');
+    });
+
+    it('#getValue should return faked value from a fake object', () => {
+      const fake =  { getValue: () => 'fake value' };
+      masterService = new MasterService(fake as ValueService);
+      expect(masterService.getValue()).toBe('fake value');
+    });
+
+    it('#getValue should return stubbed value from a spy', () => {
+      // create `getValue` spy on an object representing the ValueService
+      const valueServiceSpy =
+        jasmine.createSpyObj('ValueService', ['getValue']);
+
+      // set the value to return when the `getValue` spy is called.
+      const stubValue = 'stub value';
+      valueServiceSpy.getValue.and.returnValue(stubValue);
+
+      masterService = new MasterService(valueServiceSpy);
+
+      expect(masterService.getValue())
+        .toBe(stubValue, 'service returned stub value');
+      expect(valueServiceSpy.getValue.calls.count())
+        .toBe(1, 'spy method was called once');
+      expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+        .toBe(stubValue);
+    });
+  });
+  // #enddocregion MasterService
+
+  describe('MasterService (no beforeEach)', () => {
+    // #docregion no-before-each-test
+    it('#getValue should return stubbed value from a spy', () => {
+      // #docregion no-before-each-setup-call
+      const { masterService, stubValue, valueServiceSpy } = setup();
+      // #enddocregion no-before-each-setup-call
+      expect(masterService.getValue())
+        .toBe(stubValue, 'service returned stub value');
+      expect(valueServiceSpy.getValue.calls.count())
+        .toBe(1, 'spy method was called once');
+      expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+        .toBe(stubValue);
+    });
+    // #enddocregion no-before-each-test
+
+    // #docregion no-before-each-setup
+    function setup() {
+      const valueServiceSpy =
+        jasmine.createSpyObj('ValueService', ['getValue']);
+      const stubValue = 'stub value';
+      const masterService = new MasterService(valueServiceSpy);
+
+      valueServiceSpy.getValue.and.returnValue(stubValue);
+      return { masterService, stubValue, valueServiceSpy };
+    }
+    // #enddocregion no-before-each-setup
+  });
+
+  // #docregion ReversePipe
+
+  describe('ReversePipe', () => {
+    let pipe: ReversePipe;
+
+    beforeEach(() => { pipe = new ReversePipe(); });
+
+    it('transforms "abc" to "cba"', () => {
+      expect(pipe.transform('abc')).toBe('cba');
+    });
+
+    it('no change to palindrome: "able was I ere I saw elba"', () => {
+      const palindrome = 'able was I ere I saw elba';
+      expect(pipe.transform(palindrome)).toBe(palindrome);
+    });
+
+  });
+  // #enddocregion ReversePipe
+
+  // #docregion Lightswitch
+  describe('LightswitchComp', () => {
+    it('#clicked() should toggle #isOn', () => {
+      const comp = new LightswitchComponent();
+      expect(comp.isOn).toBe(false, 'off at first');
+      comp.clicked();
+      expect(comp.isOn).toBe(true, 'on after click');
+      comp.clicked();
+      expect(comp.isOn).toBe(false, 'off after second click');
+    });
+
+    it('#clicked() should set #message to "is on"', () => {
+      const comp = new LightswitchComponent();
+      expect(comp.message).toMatch(/is off/i, 'off at first');
+      comp.clicked();
+      expect(comp.message).toMatch(/is on/i, 'on after clicked');
+    });
+  });
+  // #enddocregion Lightswitch
+
+});
diff --git a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
new file mode 100644
index 000000000000..2c0ba58e999d
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
@@ -0,0 +1,706 @@
+// #docplaster
+import {
+  DemoModule,
+  BankAccountComponent, BankAccountParentComponent,
+  LightswitchComponent,
+  Child1Component, Child2Component, Child3Component,
+  MasterService,
+  ValueService,
+  ExternalTemplateComponent,
+  InputComponent,
+  IoComponent, IoParentComponent,
+  MyIfComponent, MyIfChildComponent, MyIfParentComponent,
+  NeedsContentComponent, ParentComponent,
+  TestProvidersComponent, TestViewProvidersComponent,
+  ReversePipeComponent, ShellComponent
+} from './demo';
+
+import { By }          from '@angular/platform-browser';
+import { Component,
+         DebugElement,
+         Injectable }  from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+// Forms symbols imported only for a specific test below
+import { NgModel, NgControl } from '@angular/forms';
+
+import { async, ComponentFixture, fakeAsync, inject, TestBed, tick
+} from '@angular/core/testing';
+
+import { addMatchers, newEvent, click } from '../../testing';
+
+export class NotProvided extends ValueService { /* example below */}
+beforeEach( addMatchers );
+
+describe('demo (with TestBed):', () => {
+
+////////  Service Tests  /////////////
+
+  // #docregion ValueService
+  describe('ValueService', () => {
+
+    // #docregion value-service-before-each
+    let service: ValueService;
+
+    // #docregion value-service-inject-before-each
+    beforeEach(() => {
+      TestBed.configureTestingModule({ providers: [ValueService] });
+      // #enddocregion value-service-before-each
+      service = TestBed.get(ValueService);
+      // #docregion value-service-before-each
+    });
+    // #enddocregion value-service-before-each, value-service-inject-before-each
+
+    // #docregion value-service-inject-it
+    it('should use ValueService', () => {
+      service = TestBed.get(ValueService);
+      expect(service.getValue()).toBe('real value');
+    });
+    // #enddocregion value-service-inject-it
+
+    it('can inject a default value when service is not provided', () => {
+      // #docregion testbed-get-w-null
+      service = TestBed.get(NotProvided, null); // service is null
+      // #enddocregion testbed-get-w-null
+    });
+
+    it('test should wait for ValueService.getPromiseValue', async(() => {
+      service.getPromiseValue().then(
+        value => expect(value).toBe('promise value')
+      );
+    }));
+
+    it('test should wait for ValueService.getObservableValue', async(() => {
+      service.getObservableValue().subscribe(
+        value => expect(value).toBe('observable value')
+      );
+    }));
+
+    // Must use done. See https://github.com/angular/angular/issues/10127
+    it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => {
+      service.getObservableDelayValue().subscribe(value => {
+        expect(value).toBe('observable delay value');
+        done();
+      });
+    });
+
+    it('should allow the use of fakeAsync', fakeAsync(() => {
+      let value: any;
+      service.getPromiseValue().then((val: any) => value = val);
+      tick(); // Trigger JS engine cycle until all promises resolve.
+      expect(value).toBe('promise value');
+    }));
+  });
+  // #enddocregion ValueService
+
+  describe('MasterService', () => {
+    // #docregion master-service-before-each
+    let masterService: MasterService;
+    let valueServiceSpy: jasmine.SpyObj<ValueService>;
+
+    beforeEach(() => {
+      const spy = jasmine.createSpyObj('ValueService', ['getValue']);
+
+      TestBed.configureTestingModule({
+        // Provide both the service-to-test and its (spy) dependency
+        providers: [
+          MasterService,
+          { provide: ValueService, useValue: spy }
+        ]
+      });
+      // Inject both the service-to-test and its (spy) dependency
+      masterService = TestBed.get(MasterService);
+      valueServiceSpy = TestBed.get(ValueService);
+    });
+    // #enddocregion master-service-before-each
+
+    // #docregion master-service-it
+    it('#getValue should return stubbed value from a spy', () => {
+      const stubValue = 'stub value';
+      valueServiceSpy.getValue.and.returnValue(stubValue);
+
+      expect(masterService.getValue())
+        .toBe(stubValue, 'service returned stub value');
+      expect(valueServiceSpy.getValue.calls.count())
+        .toBe(1, 'spy method was called once');
+      expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+        .toBe(stubValue);
+    });
+    // #enddocregion master-service-it
+  });
+
+  describe('use inject within `it`', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({ providers: [ValueService] });
+    });
+
+    it('should use modified providers',
+      inject([ValueService], (service: ValueService) => {
+        service.setValue('value modified in beforeEach');
+        expect(service.getValue())
+          .toBe('value modified in beforeEach');
+      })
+    );
+  });
+
+  describe('using async(inject) within beforeEach', () => {
+    let serviceValue: string;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({ providers: [ValueService] });
+    });
+
+    beforeEach(async(inject([ValueService], (service: ValueService) => {
+      service.getPromiseValue().then(value => serviceValue = value);
+    })));
+
+    it('should use asynchronously modified value ... in synchronous test', () => {
+      expect(serviceValue).toBe('promise value');
+    });
+  });
+
+/////////// Component Tests //////////////////
+
+  describe('TestBed component tests', () => {
+
+    beforeEach(async(() => {
+      TestBed
+        .configureTestingModule({
+          imports: [DemoModule],
+        })
+        // Compile everything in DemoModule
+        .compileComponents();
+    }));
+
+    it('should create a component with inline template', () => {
+      const fixture = TestBed.createComponent(Child1Component);
+      fixture.detectChanges();
+
+      expect(fixture).toHaveText('Child');
+    });
+
+    it('should create a component with external template', () => {
+      const fixture = TestBed.createComponent(ExternalTemplateComponent);
+      fixture.detectChanges();
+
+      expect(fixture).toHaveText('from external template');
+    });
+
+    it('should allow changing members of the component', () => {
+      const fixture = TestBed.createComponent(MyIfComponent);
+
+      fixture.detectChanges();
+      expect(fixture).toHaveText('MyIf()');
+
+      fixture.componentInstance.showMore = true;
+      fixture.detectChanges();
+      expect(fixture).toHaveText('MyIf(More)');
+    });
+
+    it('should create a nested component bound to inputs/outputs', () => {
+      const fixture = TestBed.createComponent(IoParentComponent);
+
+      fixture.detectChanges();
+      const heroes = fixture.debugElement.queryAll(By.css('.hero'));
+      expect(heroes.length).toBeGreaterThan(0, 'has heroes');
+
+      const comp = fixture.componentInstance;
+      const hero = comp.heroes[0];
+
+      click(heroes[0]);
+      fixture.detectChanges();
+
+      const selected = fixture.debugElement.query(By.css('p'));
+      expect(selected).toHaveText(hero.name);
+    });
+
+    it('can access the instance variable of an `*ngFor` row component', () => {
+      const fixture = TestBed.createComponent(IoParentComponent);
+      const comp = fixture.componentInstance;
+      const heroName = comp.heroes[0].name; // first hero's name
+
+      fixture.detectChanges();
+      const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow
+
+      const hero = ngForRow.context['hero']; // the hero object passed into the row
+      expect(hero.name).toBe(heroName, 'ngRow.context.hero');
+
+      const rowComp = ngForRow.componentInstance;
+      // jasmine.any is an "instance-of-type" test.
+      expect(rowComp).toEqual(jasmine.any(IoComponent), 'component is IoComp');
+      expect(rowComp.hero.name).toBe(heroName, 'component.hero');
+    });
+
+
+    // #docregion ButtonComp
+    it('should support clicking a button', () => {
+      const fixture = TestBed.createComponent(LightswitchComponent);
+      const btn  = fixture.debugElement.query(By.css('button'));
+      const span = fixture.debugElement.query(By.css('span')).nativeElement;
+
+      fixture.detectChanges();
+      expect(span.textContent).toMatch(/is off/i, 'before click');
+
+      click(btn);
+      fixture.detectChanges();
+      expect(span.textContent).toMatch(/is on/i, 'after click');
+    });
+    // #enddocregion ButtonComp
+
+    // ngModel is async so we must wait for it with promise-based `whenStable`
+    it('should support entering text in input box (ngModel)', async(() => {
+      const expectedOrigName = 'John';
+      const expectedNewName = 'Sally';
+
+      const fixture = TestBed.createComponent(InputComponent);
+      fixture.detectChanges();
+
+      const comp = fixture.componentInstance;
+      const input = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
+
+      expect(comp.name).toBe(expectedOrigName,
+        `At start name should be ${expectedOrigName} `);
+
+      // wait until ngModel binds comp.name to input box
+      fixture.whenStable().then(() => {
+        expect(input.value).toBe(expectedOrigName,
+          `After ngModel updates input box, input.value should be ${expectedOrigName} `);
+
+        // simulate user entering new name in input
+        input.value = expectedNewName;
+
+        // that change doesn't flow to the component immediately
+        expect(comp.name).toBe(expectedOrigName,
+          `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
+
+        // dispatch a DOM event so that Angular learns of input value change.
+        // then wait while ngModel pushes input.box value to comp.name
+        input.dispatchEvent(newEvent('input'));
+        return fixture.whenStable();
+      })
+      .then(() => {
+        expect(comp.name).toBe(expectedNewName,
+          `After ngModel updates the model, comp.name should be ${expectedNewName} `);
+      });
+    }));
+
+    // fakeAsync version of ngModel input test enables sync test style
+    // synchronous `tick` replaces asynchronous promise-base `whenStable`
+    it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => {
+      const expectedOrigName = 'John';
+      const expectedNewName = 'Sally';
+
+      const fixture = TestBed.createComponent(InputComponent);
+      fixture.detectChanges();
+
+      const comp =  fixture.componentInstance;
+      const input = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
+
+      expect(comp.name).toBe(expectedOrigName,
+        `At start name should be ${expectedOrigName} `);
+
+      // wait until ngModel binds comp.name to input box
+      tick();
+      expect(input.value).toBe(expectedOrigName,
+        `After ngModel updates input box, input.value should be ${expectedOrigName} `);
+
+      // simulate user entering new name in input
+      input.value = expectedNewName;
+
+      // that change doesn't flow to the component immediately
+      expect(comp.name).toBe(expectedOrigName,
+        `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
+
+      // dispatch a DOM event so that Angular learns of input value change.
+      // then wait a tick while ngModel pushes input.box value to comp.name
+      input.dispatchEvent(newEvent('input'));
+      tick();
+      expect(comp.name).toBe(expectedNewName,
+        `After ngModel updates the model, comp.name should be ${expectedNewName} `);
+    }));
+
+    // #docregion ReversePipeComp
+    it('ReversePipeComp should reverse the input text', fakeAsync(() => {
+      const inputText = 'the quick brown fox.';
+      const expectedText = '.xof nworb kciuq eht';
+
+      const fixture = TestBed.createComponent(ReversePipeComponent);
+      fixture.detectChanges();
+
+      const comp =  fixture.componentInstance;
+      const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
+      const span =  fixture.debugElement.query(By.css('span')).nativeElement  as HTMLElement;
+
+      // simulate user entering new name in input
+      input.value = inputText;
+
+      // dispatch a DOM event so that Angular learns of input value change.
+      // then wait a tick while ngModel pushes input.box value to comp.text
+      // and Angular updates the output span
+      input.dispatchEvent(newEvent('input'));
+      tick();
+      fixture.detectChanges();
+      expect(span.textContent).toBe(expectedText, 'output span');
+      expect(comp.text).toBe(inputText, 'component.text');
+    }));
+    // #enddocregion ReversePipeComp
+
+    // Use this technique to find attached directives of any kind
+    it('can examine attached directives and listeners', () => {
+      const fixture = TestBed.createComponent(InputComponent);
+      fixture.detectChanges();
+
+      const inputEl = fixture.debugElement.query(By.css('input'));
+
+      expect(inputEl.providerTokens).toContain(NgModel, 'NgModel directive');
+
+      const ngControl = inputEl.injector.get(NgControl);
+      expect(ngControl).toEqual(jasmine.any(NgControl), 'NgControl directive');
+
+      expect(inputEl.listeners.length).toBeGreaterThan(2, 'several listeners attached');
+    });
+
+    // #docregion dom-attributes
+    it('BankAccountComponent should set attributes, styles, classes, and properties', () => {
+      const fixture = TestBed.createComponent(BankAccountParentComponent);
+      fixture.detectChanges();
+      const comp = fixture.componentInstance;
+
+      // the only child is debugElement of the BankAccount component
+      const el = fixture.debugElement.children[0];
+      const childComp = el.componentInstance as BankAccountComponent;
+      expect(childComp).toEqual(jasmine.any(BankAccountComponent));
+
+      expect(el.context).toBe(childComp, 'context is the child component');
+
+      expect(el.attributes['account']).toBe(childComp.id, 'account attribute');
+      expect(el.attributes['bank']).toBe(childComp.bank, 'bank attribute');
+
+      expect(el.classes['closed']).toBe(true, 'closed class');
+      expect(el.classes['open']).toBe(false, 'open class');
+
+      expect(el.styles['color']).toBe(comp.color, 'color style');
+      expect(el.styles['width']).toBe(comp.width + 'px', 'width style');
+    // #enddocregion dom-attributes
+
+      // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
+      // expect(el.properties['customProperty']).toBe(true, 'customProperty');
+
+    // #docregion dom-attributes
+    });
+    // #enddocregion dom-attributes
+
+
+  });
+
+  describe('TestBed component overrides:', () => {
+
+    it('should override ChildComp\'s template', () => {
+
+      const fixture = TestBed.configureTestingModule({
+        declarations: [Child1Component],
+      })
+      .overrideComponent(Child1Component, {
+        set: { template: '<span>Fake</span>' }
+      })
+      .createComponent(Child1Component);
+
+      fixture.detectChanges();
+      expect(fixture).toHaveText('Fake');
+    });
+
+    it('should override TestProvidersComp\'s ValueService provider', () => {
+      const fixture = TestBed.configureTestingModule({
+        declarations: [TestProvidersComponent],
+      })
+      .overrideComponent(TestProvidersComponent, {
+        remove: { providers: [ValueService]},
+        add:    { providers: [{ provide: ValueService, useClass: FakeValueService }] },
+
+        // Or replace them all (this component has only one provider)
+        // set:    { providers: [{ provide: ValueService, useClass: FakeValueService }] },
+      })
+      .createComponent(TestProvidersComponent);
+
+      fixture.detectChanges();
+      expect(fixture).toHaveText('injected value: faked value', 'text');
+
+      // Explore the providerTokens
+      const tokens = fixture.debugElement.providerTokens;
+      expect(tokens).toContain(fixture.componentInstance.constructor, 'component ctor');
+      expect(tokens).toContain(TestProvidersComponent, 'TestProvidersComp');
+      expect(tokens).toContain(ValueService, 'ValueService');
+    });
+
+    it('should override TestViewProvidersComp\'s ValueService viewProvider', () => {
+      const fixture = TestBed.configureTestingModule({
+        declarations: [TestViewProvidersComponent],
+      })
+      .overrideComponent(TestViewProvidersComponent, {
+        // remove: { viewProviders: [ValueService]},
+        // add:    { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
+
+        // Or replace them all (this component has only one viewProvider)
+        set:    { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
+      })
+      .createComponent(TestViewProvidersComponent);
+
+      fixture.detectChanges();
+      expect(fixture).toHaveText('injected value: faked value');
+    });
+
+    it('injected provider should not be same as component\'s provider', () => {
+
+      // TestComponent is parent of TestProvidersComponent
+      @Component({ template: '<my-service-comp></my-service-comp>' })
+      class TestComponent {}
+
+      // 3 levels of ValueService provider: module, TestCompomponent, TestProvidersComponent
+      const fixture = TestBed.configureTestingModule({
+        declarations: [TestComponent, TestProvidersComponent],
+        providers:    [ValueService]
+      })
+      .overrideComponent(TestComponent, {
+        set: { providers: [{ provide: ValueService, useValue: {} }] }
+      })
+      .overrideComponent(TestProvidersComponent, {
+        set: { providers: [{ provide: ValueService, useClass: FakeValueService }] }
+      })
+      .createComponent(TestComponent);
+
+      let testBedProvider: ValueService;
+      let tcProvider: ValueService;
+      let tpcProvider: FakeValueService;
+
+      // `inject` uses TestBed's injector
+      inject([ValueService], (s: ValueService) => testBedProvider = s)();
+      tcProvider = fixture.debugElement.injector.get(ValueService) as ValueService;
+      tpcProvider = fixture.debugElement.children[0].injector.get(ValueService) as FakeValueService;
+
+      expect(testBedProvider).not.toBe(tcProvider, 'testBed/tc not same providers');
+      expect(testBedProvider).not.toBe(tpcProvider, 'testBed/tpc not same providers');
+
+      expect(testBedProvider instanceof ValueService).toBe(true, 'testBedProvider is ValueService');
+      expect(tcProvider).toEqual({} as ValueService, 'tcProvider is {}');
+      expect(tpcProvider instanceof FakeValueService).toBe(true, 'tpcProvider is FakeValueService');
+    });
+
+    it('can access template local variables as references', () => {
+      const fixture = TestBed.configureTestingModule({
+        declarations: [ShellComponent, NeedsContentComponent, Child1Component, Child2Component, Child3Component],
+      })
+      .overrideComponent(ShellComponent, {
+        set: {
+          selector: 'test-shell',
+          template: `
+          <needs-content #nc>
+            <child-1 #content text="My"></child-1>
+            <child-2 #content text="dog"></child-2>
+            <child-2 text="has"></child-2>
+            <child-3 #content text="fleas"></child-3>
+            <div #content>!</div>
+          </needs-content>
+          `
+        }
+      })
+      .createComponent(ShellComponent);
+
+      fixture.detectChanges();
+
+      // NeedsContentComp is the child of ShellComp
+      const el = fixture.debugElement.children[0];
+      const comp = el.componentInstance;
+
+      expect(comp.children.toArray().length).toBe(4,
+        'three different child components and an ElementRef with #content');
+
+      expect(el.references['nc']).toBe(comp, '#nc reference to component');
+
+      // #docregion custom-predicate
+      // Filter for DebugElements with a #content reference
+      const contentRefs = el.queryAll( de => de.references['content']);
+      // #enddocregion custom-predicate
+      expect(contentRefs.length).toBe(4, 'elements w/ a #content reference');
+    });
+
+  });
+
+  describe('nested (one-deep) component override', () => {
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [ParentComponent, FakeChildComponent]
+      });
+    });
+
+    it('ParentComp should use Fake Child component', () => {
+      const fixture = TestBed.createComponent(ParentComponent);
+      fixture.detectChanges();
+      expect(fixture).toHaveText('Parent(Fake Child)');
+    });
+  });
+
+  describe('nested (two-deep) component override', () => {
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [ParentComponent, FakeChildWithGrandchildComponent, FakeGrandchildComponent]
+      });
+    });
+
+    it('should use Fake Grandchild component', () => {
+      const fixture = TestBed.createComponent(ParentComponent);
+      fixture.detectChanges();
+      expect(fixture).toHaveText('Parent(Fake Child(Fake Grandchild))');
+    });
+  });
+
+  describe('lifecycle hooks w/ MyIfParentComp', () => {
+    let fixture: ComponentFixture<MyIfParentComponent>;
+    let parent:  MyIfParentComponent;
+    let child:   MyIfChildComponent;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [FormsModule],
+        declarations: [MyIfChildComponent, MyIfParentComponent]
+      });
+
+      fixture = TestBed.createComponent(MyIfParentComponent);
+      parent = fixture.componentInstance;
+    });
+
+    it('should instantiate parent component', () => {
+      expect(parent).not.toBeNull('parent component should exist');
+    });
+
+    it('parent component OnInit should NOT be called before first detectChanges()', () => {
+      expect(parent.ngOnInitCalled).toBe(false);
+    });
+
+    it('parent component OnInit should be called after first detectChanges()', () => {
+      fixture.detectChanges();
+      expect(parent.ngOnInitCalled).toBe(true);
+    });
+
+    it('child component should exist after OnInit', () => {
+      fixture.detectChanges();
+      getChild();
+      expect(child instanceof MyIfChildComponent).toBe(true, 'should create child');
+    });
+
+    it('should have called child component\'s OnInit ', () => {
+      fixture.detectChanges();
+      getChild();
+      expect(child.ngOnInitCalled).toBe(true);
+    });
+
+    it('child component called OnChanges once', () => {
+      fixture.detectChanges();
+      getChild();
+      expect(child.ngOnChangesCounter).toBe(1);
+    });
+
+    it('changed parent value flows to child', () => {
+      fixture.detectChanges();
+      getChild();
+
+      parent.parentValue = 'foo';
+      fixture.detectChanges();
+
+      expect(child.ngOnChangesCounter).toBe(2,
+        'expected 2 changes: initial value and changed value');
+      expect(child.childValue).toBe('foo',
+        'childValue should eq changed parent value');
+    });
+
+    // must be async test to see child flow to parent
+    it('changed child value flows to parent', async(() => {
+      fixture.detectChanges();
+      getChild();
+
+      child.childValue = 'bar';
+
+      return new Promise(resolve => {
+        // Wait one JS engine turn!
+        setTimeout(() => resolve(), 0);
+      })
+      .then(() => {
+        fixture.detectChanges();
+
+        expect(child.ngOnChangesCounter).toBe(2,
+          'expected 2 changes: initial value and changed value');
+        expect(parent.parentValue).toBe('bar',
+          'parentValue should eq changed parent value');
+      });
+
+    }));
+
+    it('clicking "Close Child" triggers child OnDestroy', () => {
+      fixture.detectChanges();
+      getChild();
+
+      const btn = fixture.debugElement.query(By.css('button'));
+      click(btn);
+
+      fixture.detectChanges();
+      expect(child.ngOnDestroyCalled).toBe(true);
+    });
+
+    ////// helpers ///
+    /**
+     * Get the MyIfChildComp from parent; fail w/ good message if cannot.
+     */
+    function getChild() {
+
+      let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp
+
+      // The Hard Way: requires detailed knowledge of the parent template
+      try {
+        childDe = fixture.debugElement.children[4].children[0];
+      } catch (err) { /* we'll report the error */ }
+
+      // DebugElement.queryAll: if we wanted all of many instances:
+      childDe = fixture.debugElement
+        .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComponent; })[0];
+
+      // WE'LL USE THIS APPROACH !
+      // DebugElement.query: find first instance (if any)
+      childDe = fixture.debugElement
+        .query(function (de) { return de.componentInstance instanceof MyIfChildComponent; });
+
+      if (childDe && childDe.componentInstance) {
+        child = childDe.componentInstance;
+      } else {
+        fail('Unable to find MyIfChildComp within MyIfParentComp');
+      }
+
+      return child;
+    }
+  });
+
+});
+////////// Fakes ///////////
+
+@Component({
+  selector: 'child-1',
+  template: `Fake Child`
+})
+class FakeChildComponent { }
+
+@Component({
+  selector: 'child-1',
+  template: `Fake Child(<grandchild-1></grandchild-1>)`
+})
+class FakeChildWithGrandchildComponent { }
+
+@Component({
+  selector: 'grandchild-1',
+  template: `Fake Grandchild`
+})
+class FakeGrandchildComponent { }
+
+@Injectable()
+class FakeValueService extends ValueService {
+  value = 'faked value';
+}
diff --git a/aio/content/examples/testing/src/app/demo/demo.ts b/aio/content/examples/testing/src/app/demo/demo.ts
new file mode 100644
index 000000000000..5312032c8b13
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo.ts
@@ -0,0 +1,439 @@
+/* tslint:disable:forin */
+import { Component, ContentChildren, Directive, EventEmitter,
+         Injectable, Input, Output, Optional,
+         HostBinding, HostListener,
+         OnInit, OnChanges, OnDestroy,
+         Pipe, PipeTransform,
+         SimpleChange } from '@angular/core';
+
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+////////// The App: Services and Components for the tests. //////////////
+
+export class Hero {
+  name: string;
+}
+
+////////// Services ///////////////
+// #docregion ValueService
+@Injectable()
+export class ValueService {
+  protected value = 'real value';
+
+  getValue() { return this.value; }
+  setValue(value: string) { this.value = value; }
+
+  getObservableValue() { return of('observable value'); }
+
+  getPromiseValue() { return Promise.resolve('promise value'); }
+
+  getObservableDelayValue() {
+    return of('observable delay value').pipe(delay(10));
+  }
+}
+// #enddocregion ValueService
+
+// #docregion MasterService
+@Injectable()
+export class MasterService {
+  constructor(private valueService: ValueService) { }
+  getValue() { return this.valueService.getValue(); }
+}
+// #enddocregion MasterService
+
+/////////// Pipe ////////////////
+/*
+ * Reverse the input string.
+*/
+// #docregion ReversePipe
+@Pipe({ name: 'reverse' })
+export class ReversePipe implements PipeTransform {
+  transform(s: string) {
+    let r = '';
+    for (let i = s.length; i; )  { r += s[--i]; };
+    return r;
+  }
+}
+// #enddocregion ReversePipe
+
+//////////// Components /////////////
+@Component({
+  selector: 'bank-account',
+  template: `
+   Bank Name: {{bank}}
+   Account Id: {{id}}
+ `
+})
+export class BankAccountComponent {
+  @Input() bank: string;
+  @Input('account') id: string;
+
+  // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
+  // constructor(private renderer: Renderer, private el: ElementRef ) {
+  //   renderer.setElementProperty(el.nativeElement, 'customProperty', true);
+  // }
+}
+
+/** A component with attributes, styles, classes, and property setting */
+@Component({
+  selector: 'bank-account-parent',
+  template: `
+   <bank-account
+      bank="RBC"
+      account="4747"
+      [style.width.px]="width"
+      [style.color]="color"
+      [class.closed]="isClosed"
+      [class.open]="!isClosed">
+   </bank-account>
+ `
+})
+export class BankAccountParentComponent {
+  width = 200;
+  color = 'red';
+  isClosed = true;
+}
+
+// #docregion LightswitchComp
+@Component({
+  selector: 'lightswitch-comp',
+  template: `
+    <button (click)="clicked()">Click me!</button>
+    <span>{{message}}</span>`
+})
+export class LightswitchComponent {
+  isOn = false;
+  clicked() { this.isOn = !this.isOn; }
+  get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }
+}
+// #enddocregion LightswitchComp
+
+@Component({
+  selector: 'child-1',
+  template: `<span>Child-1({{text}})</span>`
+})
+export class Child1Component {
+  @Input() text = 'Original';
+}
+
+@Component({
+  selector: 'child-2',
+  template: '<div>Child-2({{text}})</div>'
+})
+export class Child2Component {
+  @Input() text: string;
+}
+
+@Component({
+  selector: 'child-3',
+  template: '<div>Child-3({{text}})</div>'
+})
+export class Child3Component {
+  @Input() text: string;
+}
+
+@Component({
+  selector: 'input-comp',
+  template: `<input [(ngModel)]="name">`
+})
+export class InputComponent {
+  name = 'John';
+}
+
+/* Prefer this metadata syntax */
+// @Directive({
+//   selector: 'input[value]',
+//   host: {
+//     '[value]': 'value',
+//     '(input)': 'valueChange.emit($event.target.value)'
+//   },
+//   inputs:  ['value'],
+//   outputs: ['valueChange']
+// })
+// export class InputValueBinderDirective {
+//   value: any;
+//   valueChange: EventEmitter<any> = new EventEmitter();
+// }
+
+// As the styleguide recommends
+@Directive({ selector: 'input[value]' })
+export class InputValueBinderDirective {
+  @HostBinding()
+  @Input()
+  value: any;
+
+  @Output()
+  valueChange: EventEmitter<any> = new EventEmitter();
+
+  @HostListener('input', ['$event.target.value'])
+  onInput(value: any) { this.valueChange.emit(value); }
+}
+
+@Component({
+  selector: 'input-value-comp',
+  template: `
+    Name: <input [(value)]="name"> {{name}}
+  `
+})
+export class InputValueBinderComponent {
+  name = 'Sally'; // initial value
+}
+
+@Component({
+  selector: 'parent-comp',
+  template: `Parent(<child-1></child-1>)`
+})
+export class ParentComponent { }
+
+@Component({
+  selector: 'io-comp',
+  template: `<div class="hero" (click)="click()">Original {{hero.name}}</div>`
+})
+export class IoComponent {
+  @Input() hero: Hero;
+  @Output() selected = new EventEmitter<Hero>();
+  click() { this.selected.emit(this.hero); }
+}
+
+@Component({
+  selector: 'io-parent-comp',
+  template: `
+  <p *ngIf="!selectedHero"><i>Click to select a hero</i></p>
+  <p *ngIf="selectedHero">The selected hero is {{selectedHero.name}}</p>
+  <io-comp
+    *ngFor="let hero of heroes"
+    [hero]=hero
+    (selected)="onSelect($event)">
+  </io-comp>
+  `
+})
+export class IoParentComponent {
+  heroes: Hero[] = [ {name: 'Bob'}, {name: 'Carol'}, {name: 'Ted'}, {name: 'Alice'} ];
+  selectedHero: Hero;
+  onSelect(hero: Hero) { this.selectedHero = hero; }
+}
+
+@Component({
+  selector: 'my-if-comp',
+  template: `MyIf(<span *ngIf="showMore">More</span>)`
+})
+export class MyIfComponent {
+  showMore = false;
+}
+
+@Component({
+  selector: 'my-service-comp',
+  template: `injected value: {{valueService.value}}`,
+  providers: [ValueService]
+})
+export class TestProvidersComponent {
+  constructor(public valueService: ValueService) {}
+}
+
+
+@Component({
+  selector: 'my-service-comp',
+  template: `injected value: {{valueService.value}}`,
+  viewProviders: [ValueService]
+})
+export class TestViewProvidersComponent {
+  constructor(public valueService: ValueService) {}
+}
+
+@Component({
+  selector: 'external-template-comp',
+  templateUrl: './demo-external-template.html'
+})
+export class ExternalTemplateComponent implements OnInit {
+  serviceValue: string;
+
+  constructor(@Optional() private service: ValueService) {  }
+
+  ngOnInit() {
+    if (this.service) { this.serviceValue = this.service.getValue(); }
+  }
+}
+
+@Component({
+  selector: 'comp-w-ext-comp',
+  template: `
+  <h3>comp-w-ext-comp</h3>
+  <external-template-comp></external-template-comp>
+  `
+})
+export class InnerCompWithExternalTemplateComponent { }
+
+@Component({selector: 'needs-content', template: '<ng-content></ng-content>'})
+export class NeedsContentComponent {
+  // children with #content local variable
+  @ContentChildren('content') children: any;
+}
+
+///////// MyIfChildComp ////////
+@Component({
+  selector: 'my-if-child-1',
+
+  template: `
+    <h4>MyIfChildComp</h4>
+    <div>
+      <label>Child value: <input [(ngModel)]="childValue"> </label>
+    </div>
+    <p><i>Change log:</i></p>
+    <div *ngFor="let log of changeLog; let i=index">{{i + 1}} - {{log}}</div>`
+})
+export class MyIfChildComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() value = '';
+  @Output() valueChange = new EventEmitter<string>();
+
+  get childValue() { return this.value; }
+  set childValue(v: string) {
+    if (this.value === v) { return; }
+    this.value = v;
+    this.valueChange.emit(v);
+  }
+
+  changeLog: string[] = [];
+
+  ngOnInitCalled = false;
+  ngOnChangesCounter = 0;
+  ngOnDestroyCalled = false;
+
+  ngOnInit()    {
+    this.ngOnInitCalled = true;
+    this.changeLog.push('ngOnInit called');
+  }
+
+  ngOnDestroy() {
+    this.ngOnDestroyCalled = true;
+    this.changeLog.push('ngOnDestroy called');
+  }
+
+  ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
+    for (let propName in changes) {
+      this.ngOnChangesCounter += 1;
+      let prop = changes[propName];
+      let cur  = JSON.stringify(prop.currentValue);
+      let prev = JSON.stringify(prop.previousValue);
+      this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
+    }
+  }
+}
+
+///////// MyIfParentComp ////////
+
+@Component({
+  selector: 'my-if-parent-comp',
+  template: `
+    <h3>MyIfParentComp</h3>
+    <label>Parent value:
+      <input [(ngModel)]="parentValue">
+    </label>
+    <button (click)="clicked()">{{toggleLabel}} Child</button><br>
+    <div *ngIf="showChild"
+         style="margin: 4px; padding: 4px; background-color: aliceblue;">
+      <my-if-child-1  [(value)]="parentValue"></my-if-child-1>
+    </div>
+  `
+})
+export class MyIfParentComponent implements OnInit {
+  ngOnInitCalled = false;
+  parentValue = 'Hello, World';
+  showChild = false;
+  toggleLabel = 'Unknown';
+
+  ngOnInit() {
+    this.ngOnInitCalled = true;
+    this.clicked();
+  }
+
+  clicked() {
+    this.showChild = !this.showChild;
+    this.toggleLabel = this.showChild ? 'Close' : 'Show';
+  }
+}
+
+
+@Component({
+  selector: 'reverse-pipe-comp',
+  template: `
+    <input [(ngModel)]="text">
+    <span>{{text | reverse}}</span>
+  `
+})
+export class ReversePipeComponent {
+  text = 'my dog has fleas.';
+}
+
+@Component({template: '<div>Replace Me</div>'})
+export class ShellComponent { }
+
+@Component({
+  selector: 'demo-comp',
+  template: `
+    <h1>Specs Demo</h1>
+    <my-if-parent-comp></my-if-parent-comp>
+    <hr>
+    <h3>Input/Output Component</h3>
+    <io-parent-comp></io-parent-comp>
+    <hr>
+    <h3>External Template Component</h3>
+    <external-template-comp></external-template-comp>
+    <hr>
+    <h3>Component With External Template Component</h3>
+    <comp-w-ext-comp></comp-w-ext-comp>
+    <hr>
+    <h3>Reverse Pipe</h3>
+    <reverse-pipe-comp></reverse-pipe-comp>
+    <hr>
+    <h3>InputValueBinder Directive</h3>
+    <input-value-comp></input-value-comp>
+    <hr>
+    <h3>Button Component</h3>
+    <lightswitch-comp></lightswitch-comp>
+    <hr>
+    <h3>Needs Content</h3>
+    <needs-content #nc>
+      <child-1 #content text="My"></child-1>
+      <child-2 #content text="dog"></child-2>
+      <child-2 text="has"></child-2>
+      <child-3 #content text="fleas"></child-3>
+      <div #content>!</div>
+    </needs-content>
+  `
+})
+export class DemoComponent { }
+//////// Aggregations ////////////
+
+export const demoDeclarations = [
+  DemoComponent,
+  BankAccountComponent, BankAccountParentComponent,
+  LightswitchComponent,
+  Child1Component, Child2Component, Child3Component,
+  ExternalTemplateComponent, InnerCompWithExternalTemplateComponent,
+  InputComponent,
+  InputValueBinderDirective, InputValueBinderComponent,
+  IoComponent, IoParentComponent,
+  MyIfComponent, MyIfChildComponent, MyIfParentComponent,
+  NeedsContentComponent, ParentComponent,
+  TestProvidersComponent, TestViewProvidersComponent,
+  ReversePipe, ReversePipeComponent, ShellComponent
+];
+
+export const demoProviders = [MasterService, ValueService];
+
+////////////////////
+////////////
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: demoDeclarations,
+  providers:    demoProviders,
+  entryComponents: [DemoComponent],
+  bootstrap:       [DemoComponent]
+})
+export class DemoModule { }
+
diff --git a/aio/content/examples/testing/src/app/dummy.module.ts b/aio/content/examples/testing/src/app/dummy.module.ts
new file mode 100644
index 000000000000..7ca52420d2fd
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dummy.module.ts
@@ -0,0 +1,15 @@
+// These unused NgModules keep the Angular Language Service happy.
+// The AppModule registers the final versions of these components
+import { NgModule } from '@angular/core';
+
+import { AppComponent as app_initial } from './app-initial.component';
+@NgModule({ declarations: [ app_initial ] })
+export class AppModuleInitial {}
+
+import { BannerComponent as bc_initial } from './banner/banner-initial.component';
+@NgModule({ declarations: [ bc_initial ] })
+export class BannerModuleInitial {}
+
+import { BannerComponent as bc_external } from './banner/banner-external.component';
+@NgModule({ declarations: [ bc_external ] })
+export class BannerModuleExternal {}
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.css b/aio/content/examples/testing/src/app/hero/hero-detail.component.css
new file mode 100644
index 000000000000..f6139ba274d2
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.css
@@ -0,0 +1,29 @@
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  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: #ccc;
+  cursor: auto;
+}
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.html b/aio/content/examples/testing/src/app/hero/hero-detail.component.html
new file mode 100644
index 000000000000..7e86a668f6a5
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.html
@@ -0,0 +1,12 @@
+<!-- #docregion -->
+<div *ngIf="hero">
+  <h2><span>{{hero.name | titlecase}}</span> Details</h2>
+  <div>
+    <label>id: </label>{{hero.id}}</div>
+  <div>
+    <label for="name">name: </label>
+    <input id="name" [(ngModel)]="hero.name" placeholder="name" />
+  </div>
+  <button (click)="save()">Save</button>
+  <button (click)="cancel()">Cancel</button>
+</div>
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
new file mode 100644
index 000000000000..4e806da3f99e
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
@@ -0,0 +1,57 @@
+import { asyncData, ActivatedRouteStub } from '../../testing';
+
+import { HeroDetailComponent } from './hero-detail.component';
+import { Hero }                from '../model/hero';
+
+//////////  Tests  ////////////////////
+
+describe('HeroDetailComponent - no TestBed', () => {
+  let activatedRoute: ActivatedRouteStub;
+  let comp: HeroDetailComponent;
+  let expectedHero: Hero;
+  let hds: any;
+  let router: any;
+
+  beforeEach((done: DoneFn) => {
+    expectedHero = {id: 42, name: 'Bubba' };
+    const activatedRoute = new ActivatedRouteStub({ id: expectedHero.id });
+    router = jasmine.createSpyObj('router', ['navigate']);
+
+    hds = jasmine.createSpyObj('HeroDetailService', ['getHero', 'saveHero']);
+    hds.getHero.and.returnValue(asyncData(expectedHero));
+    hds.saveHero.and.returnValue(asyncData(expectedHero));
+
+    comp = new HeroDetailComponent(hds, <any> activatedRoute, router);
+    comp.ngOnInit();
+
+    // OnInit calls HDS.getHero; wait for it to get the fake hero
+    hds.getHero.calls.first().returnValue.subscribe(done);
+
+  });
+
+  it('should expose the hero retrieved from the service', () => {
+    expect(comp.hero).toBe(expectedHero);
+  });
+
+  it('should navigate when click cancel', () => {
+    comp.cancel();
+    expect(router.navigate.calls.any()).toBe(true, 'router.navigate called');
+  });
+
+  it('should save when click save', () => {
+    comp.save();
+    expect(hds.saveHero.calls.any()).toBe(true, 'HeroDetailService.save called');
+    expect(router.navigate.calls.any()).toBe(false, 'router.navigate not called yet');
+  });
+
+  it('should navigate when click save resolves', (done: DoneFn) => {
+    comp.save();
+    // waits for async save to complete before navigating
+    hds.saveHero.calls.first().returnValue
+    .subscribe(() => {
+      expect(router.navigate.calls.any()).toBe(true, 'router.navigate called');
+      done();
+    });
+  });
+
+});
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
new file mode 100644
index 000000000000..2989c6e05a8b
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
@@ -0,0 +1,381 @@
+// #docplaster
+import {
+  async, ComponentFixture, fakeAsync, inject, TestBed, tick
+} from '@angular/core/testing';
+
+import { Router }       from '@angular/router';
+
+import {
+  ActivatedRoute, ActivatedRouteStub, asyncData, click, newEvent
+} from '../../testing';
+
+import { Hero }                from '../model/hero';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroDetailService }   from './hero-detail.service';
+import { HeroModule }          from './hero.module';
+
+////// Testing Vars //////
+let activatedRoute: ActivatedRouteStub;
+let component: HeroDetailComponent;
+let fixture: ComponentFixture<HeroDetailComponent>;
+let page: Page;
+
+////// Tests //////
+describe('HeroDetailComponent', () => {
+  beforeEach(() => {
+    activatedRoute = new ActivatedRouteStub();
+  });
+  describe('with HeroModule setup', heroModuleSetup);
+  describe('when override its provided HeroDetailService', overrideSetup);
+  describe('with FormsModule setup', formsModuleSetup);
+  describe('with SharedModule setup', sharedModuleSetup);
+});
+
+///////////////////
+
+function overrideSetup() {
+  // #docregion hds-spy
+  class HeroDetailServiceSpy {
+    testHero: Hero = {id: 42, name: 'Test Hero' };
+
+    /* emit cloned test hero */
+    getHero = jasmine.createSpy('getHero').and.callFake(
+      () => asyncData(Object.assign({}, this.testHero))
+    );
+
+    /* emit clone of test hero, with changes merged in */
+    saveHero = jasmine.createSpy('saveHero').and.callFake(
+      (hero: Hero) => asyncData(Object.assign(this.testHero, hero))
+    );
+  }
+
+  // #enddocregion hds-spy
+
+  // the `id` value is irrelevant because ignored by service stub
+  beforeEach(() => activatedRoute.setParamMap({ id: 99999 }));
+
+  // #docregion setup-override
+  beforeEach(async(() => {
+    const routerSpy = createRouterSpy();
+
+    TestBed.configureTestingModule({
+      imports:   [ HeroModule ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: Router,         useValue: routerSpy},
+  // #enddocregion setup-override
+        // HeroDetailService at this level is IRRELEVANT!
+        { provide: HeroDetailService, useValue: {} }
+  // #docregion setup-override
+      ]
+    })
+
+    // Override component's own provider
+    // #docregion override-component-method
+    .overrideComponent(HeroDetailComponent, {
+      set: {
+        providers: [
+          { provide: HeroDetailService, useClass: HeroDetailServiceSpy }
+        ]
+      }
+    })
+    // #enddocregion override-component-method
+
+    .compileComponents();
+  }));
+  // #enddocregion setup-override
+
+  // #docregion override-tests
+  let hdsSpy: HeroDetailServiceSpy;
+
+  beforeEach(async(() => {
+    createComponent();
+    // get the component's injected HeroDetailServiceSpy
+    hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
+  }));
+
+  it('should have called `getHero`', () => {
+    expect(hdsSpy.getHero.calls.count()).toBe(1, 'getHero called once');
+  });
+
+  it('should display stub hero\'s name', () => {
+    expect(page.nameDisplay.textContent).toBe(hdsSpy.testHero.name);
+  });
+
+  it('should save stub hero change', fakeAsync(() => {
+    const origName = hdsSpy.testHero.name;
+    const newName = 'New Name';
+
+    page.nameInput.value = newName;
+    page.nameInput.dispatchEvent(newEvent('input')); // tell Angular
+
+    expect(component.hero.name).toBe(newName, 'component hero has new name');
+    expect(hdsSpy.testHero.name).toBe(origName, 'service hero unchanged before save');
+
+    click(page.saveBtn);
+    expect(hdsSpy.saveHero.calls.count()).toBe(1, 'saveHero called once');
+
+    tick(); // wait for async save to complete
+    expect(hdsSpy.testHero.name).toBe(newName, 'service hero has new name after save');
+    expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
+  }));
+  // #enddocregion override-tests
+
+  it('fixture injected service is not the component injected service',
+    // inject gets the service from the fixture
+    inject([HeroDetailService], (fixtureService: HeroDetailService) => {
+
+    // use `fixture.debugElement.injector` to get service from component
+    const componentService = fixture.debugElement.injector.get(HeroDetailService);
+
+    expect(fixtureService).not.toBe(componentService, 'service injected from fixture');
+  }));
+}
+
+////////////////////
+import { getTestHeroes, TestHeroService, HeroService } from '../model/testing/test-hero.service';
+
+const firstHero = getTestHeroes()[0];
+
+function heroModuleSetup() {
+  // #docregion setup-hero-module
+  beforeEach(async(() => {
+    const routerSpy = createRouterSpy();
+
+    TestBed.configureTestingModule({
+      imports:   [ HeroModule ],
+  // #enddocregion setup-hero-module
+  //  declarations: [ HeroDetailComponent ], // NO!  DOUBLE DECLARATION
+  // #docregion setup-hero-module
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: HeroService,    useClass: TestHeroService },
+        { provide: Router,         useValue: routerSpy},
+      ]
+    })
+    .compileComponents();
+  }));
+  // #enddocregion setup-hero-module
+
+  // #docregion route-good-id
+  describe('when navigate to existing hero', () => {
+    let expectedHero: Hero;
+
+    beforeEach(async(() => {
+      expectedHero = firstHero;
+      activatedRoute.setParamMap({ id: expectedHero.id });
+      createComponent();
+    }));
+
+  // #docregion selected-tests
+    it('should display that hero\'s name', () => {
+      expect(page.nameDisplay.textContent).toBe(expectedHero.name);
+    });
+  // #enddocregion route-good-id
+
+    it('should navigate when click cancel', () => {
+      click(page.cancelBtn);
+      expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
+    });
+
+    it('should save when click save but not navigate immediately', () => {
+      // Get service injected into component and spy on its`saveHero` method.
+      // It delegates to fake `HeroService.updateHero` which delivers a safe test result.
+      const hds = fixture.debugElement.injector.get(HeroDetailService);
+      const saveSpy = spyOn(hds, 'saveHero').and.callThrough();
+
+      click(page.saveBtn);
+      expect(saveSpy.calls.any()).toBe(true, 'HeroDetailService.save called');
+      expect(page.navigateSpy.calls.any()).toBe(false, 'router.navigate not called');
+    });
+
+    it('should navigate when click save and save resolves', fakeAsync(() => {
+      click(page.saveBtn);
+      tick(); // wait for async save to complete
+      expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
+    }));
+
+    // #docregion title-case-pipe
+    it('should convert hero name to Title Case', () => {
+      // get the name's input and display elements from the DOM
+      const hostElement = fixture.nativeElement;
+      const nameInput: HTMLInputElement = hostElement.querySelector('input');
+      const nameDisplay: HTMLElement = hostElement.querySelector('span');
+
+      // simulate user entering a new name into the input box
+      nameInput.value = 'quick BROWN  fOx';
+
+      // dispatch a DOM event so that Angular learns of input value change.
+      nameInput.dispatchEvent(newEvent('input'));
+
+      // Tell Angular to update the display binding through the title pipe
+      fixture.detectChanges();
+
+      expect(nameDisplay.textContent).toBe('Quick Brown  Fox');
+    });
+    // #enddocregion title-case-pipe
+  // #enddocregion selected-tests
+  // #docregion route-good-id
+  });
+  // #enddocregion route-good-id
+
+  // #docregion route-no-id
+  describe('when navigate with no hero id', () => {
+    beforeEach(async( createComponent ));
+
+    it('should have hero.id === 0', () => {
+      expect(component.hero.id).toBe(0);
+    });
+
+    it('should display empty hero name', () => {
+      expect(page.nameDisplay.textContent).toBe('');
+    });
+  });
+  // #enddocregion route-no-id
+
+  // #docregion route-bad-id
+  describe('when navigate to non-existent hero id', () => {
+    beforeEach(async(() => {
+      activatedRoute.setParamMap({ id: 99999 });
+      createComponent();
+    }));
+
+    it('should try to navigate back to hero list', () => {
+      expect(page.gotoListSpy.calls.any()).toBe(true, 'comp.gotoList called');
+      expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
+    });
+  });
+  // #enddocregion route-bad-id
+
+  // Why we must use `fixture.debugElement.injector` in `Page()`
+  it('cannot use `inject` to get component\'s provided HeroDetailService', () => {
+    let service: HeroDetailService;
+    fixture = TestBed.createComponent(HeroDetailComponent);
+    expect(
+      // Throws because `inject` only has access to TestBed's injector
+      // which is an ancestor of the component's injector
+      inject([HeroDetailService], (hds: HeroDetailService) =>  service = hds )
+    )
+    .toThrowError(/No provider for HeroDetailService/);
+
+    // get `HeroDetailService` with component's own injector
+    service = fixture.debugElement.injector.get(HeroDetailService);
+    expect(service).toBeDefined('debugElement.injector');
+  });
+}
+
+/////////////////////
+import { FormsModule }         from '@angular/forms';
+import { TitleCasePipe }       from '../shared/title-case.pipe';
+
+function formsModuleSetup() {
+ // #docregion setup-forms-module
+  beforeEach(async(() => {
+    const routerSpy = createRouterSpy();
+
+    TestBed.configureTestingModule({
+      imports:      [ FormsModule ],
+      declarations: [ HeroDetailComponent, TitleCasePipe ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: HeroService,    useClass: TestHeroService },
+        { provide: Router,         useValue: routerSpy},
+      ]
+    })
+    .compileComponents();
+  }));
+  // #enddocregion setup-forms-module
+
+  it('should display 1st hero\'s name', async(() => {
+    const expectedHero = firstHero;
+    activatedRoute.setParamMap({ id: expectedHero.id });
+    createComponent().then(() => {
+      expect(page.nameDisplay.textContent).toBe(expectedHero.name);
+    });
+  }));
+}
+
+///////////////////////
+import { SharedModule }        from '../shared/shared.module';
+
+function sharedModuleSetup() {
+  // #docregion setup-shared-module
+  beforeEach(async(() => {
+    const routerSpy = createRouterSpy();
+
+    TestBed.configureTestingModule({
+      imports:      [ SharedModule ],
+      declarations: [ HeroDetailComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: HeroService,    useClass: TestHeroService },
+        { provide: Router,         useValue: routerSpy},
+      ]
+    })
+    .compileComponents();
+  }));
+  // #enddocregion setup-shared-module
+
+  it('should display 1st hero\'s name', async(() => {
+    const expectedHero = firstHero;
+    activatedRoute.setParamMap({ id: expectedHero.id });
+    createComponent().then(() => {
+      expect(page.nameDisplay.textContent).toBe(expectedHero.name);
+    });
+  }));
+}
+
+/////////// Helpers /////
+
+// #docregion create-component
+/** Create the HeroDetailComponent, initialize it, set test variables  */
+function createComponent() {
+  fixture = TestBed.createComponent(HeroDetailComponent);
+  component = fixture.componentInstance;
+  page = new Page(fixture);
+
+  // 1st change detection triggers ngOnInit which gets a hero
+  fixture.detectChanges();
+  return fixture.whenStable().then(() => {
+    // 2nd change detection displays the async-fetched hero
+    fixture.detectChanges();
+  });
+}
+// #enddocregion create-component
+
+// #docregion page
+class Page {
+  // getter properties wait to query the DOM until called.
+  get buttons()     { return this.queryAll<HTMLButtonElement>('button'); }
+  get saveBtn()     { return this.buttons[0]; }
+  get cancelBtn()   { return this.buttons[1]; }
+  get nameDisplay() { return this.query<HTMLElement>('span'); }
+  get nameInput()   { return this.query<HTMLInputElement>('input'); }
+
+  gotoListSpy: jasmine.Spy;
+  navigateSpy:  jasmine.Spy;
+
+  constructor(fixture: ComponentFixture<HeroDetailComponent>) {
+    // get the navigate spy from the injected router spy object
+    const routerSpy = <any> fixture.debugElement.injector.get(Router);
+    this.navigateSpy = routerSpy.navigate;
+
+    // spy on component's `gotoList()` method
+    const component = fixture.componentInstance;
+    this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough();
+  }
+
+  //// query helpers ////
+  private query<T>(selector: string): T {
+    return fixture.nativeElement.querySelector(selector);
+  }
+
+  private queryAll<T>(selector: string): T[] {
+    return fixture.nativeElement.querySelectorAll(selector);
+  }
+}
+// #enddocregion page
+
+function createRouterSpy() {
+  return jasmine.createSpyObj('Router', ['navigate']);
+}
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
new file mode 100644
index 000000000000..fdfea6c4fa3c
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
@@ -0,0 +1,62 @@
+/* tslint:disable:member-ordering */
+// #docplaster
+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute, Router }   from '@angular/router';
+
+import { Hero }              from '../model/hero';
+import { HeroDetailService } from './hero-detail.service';
+
+// #docregion prototype
+@Component({
+  selector:    'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls:  ['./hero-detail.component.css' ],
+  providers:  [ HeroDetailService ]
+})
+export class HeroDetailComponent implements OnInit {
+  // #docregion ctor
+  constructor(
+    private heroDetailService: HeroDetailService,
+    private route:  ActivatedRoute,
+    private router: Router) {
+  }
+  // #enddocregion ctor
+// #enddocregion prototype
+
+  @Input() hero: Hero;
+
+  // #docregion ng-on-init
+  ngOnInit(): void {
+    // get hero when `id` param changes
+    this.route.paramMap.subscribe(pmap => this.getHero(pmap.get('id')));
+  }
+  // #enddocregion ng-on-init
+
+  private getHero(id: string): void {
+    // when no id or id===0, create new blank hero
+    if (!id) {
+      this.hero = { id: 0, name: '' } as Hero;
+      return;
+    }
+
+    this.heroDetailService.getHero(id).subscribe(hero => {
+      if (hero) {
+        this.hero = hero;
+      } else {
+        this.gotoList(); // id not found; navigate to list
+      }
+    });
+  }
+
+  save(): void {
+    this.heroDetailService.saveHero(this.hero).subscribe(() => this.gotoList());
+  }
+
+  cancel() { this.gotoList(); }
+
+  gotoList() {
+    this.router.navigate(['../'], {relativeTo: this.route});
+  }
+// #docregion prototype
+}
+// #enddocregion prototype
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
new file mode 100644
index 000000000000..022dba86aef2
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { Hero } from '../model/hero';
+import { HeroService } from '../model/hero.service';
+
+// #docregion prototype
+@Injectable()
+export class HeroDetailService {
+  constructor(private heroService: HeroService) {  }
+// #enddocregion prototype
+
+  // Returns a clone which caller may modify safely
+  getHero(id: number | string): Observable<Hero> {
+    if (typeof id === 'string') {
+      id = parseInt(id as string, 10);
+    }
+    return this.heroService.getHero(id).pipe(
+      map(hero => {
+        return hero ? Object.assign({}, hero) : null; // clone or null
+      })
+    );
+  }
+
+  saveHero(hero: Hero) {
+    return this.heroService.updateHero(hero);
+  }
+// #docregion prototype
+}
+// #enddocregion prototype
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.css b/aio/content/examples/testing/src/app/hero/hero-list.component.css
new file mode 100644
index 000000000000..35e45af98d1a
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.css
@@ -0,0 +1,59 @@
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.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;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.html b/aio/content/examples/testing/src/app/hero/hero-list.component.html
new file mode 100644
index 000000000000..cd37301fd6bf
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.html
@@ -0,0 +1,8 @@
+<h2 highlight="gold">My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="let hero of heroes | async "
+    [class.selected]="hero === selectedHero"
+    (click)="onSelect(hero)">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
new file mode 100644
index 000000000000..d178fa609841
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
@@ -0,0 +1,143 @@
+import { async, ComponentFixture, fakeAsync, TestBed, tick
+} from '@angular/core/testing';
+
+import { By }           from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { Router }       from '@angular/router';
+
+import { addMatchers, newEvent } from '../../testing';
+
+import { getTestHeroes, TestHeroService } from '../model/testing/test-hero.service';
+
+import { HeroModule }         from './hero.module';
+import { HeroListComponent }  from './hero-list.component';
+import { HighlightDirective } from '../shared/highlight.directive';
+import { HeroService }        from '../model/hero.service';
+
+const HEROES = getTestHeroes();
+
+let comp: HeroListComponent;
+let fixture: ComponentFixture<HeroListComponent>;
+let page: Page;
+
+/////// Tests //////
+
+describe('HeroListComponent', () => {
+
+  beforeEach(async(() => {
+    addMatchers();
+    const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
+
+    TestBed.configureTestingModule({
+      imports: [HeroModule],
+      providers: [
+        { provide: HeroService, useClass: TestHeroService },
+        { provide: Router,      useValue: routerSpy}
+      ]
+    })
+    .compileComponents()
+    .then(createComponent);
+  }));
+
+  it('should display heroes', () => {
+    expect(page.heroRows.length).toBeGreaterThan(0);
+  });
+
+  it('1st hero should match 1st test hero', () => {
+    const expectedHero = HEROES[0];
+    const actualHero = page.heroRows[0].textContent;
+    expect(actualHero).toContain(expectedHero.id.toString(), 'hero.id');
+    expect(actualHero).toContain(expectedHero.name, 'hero.name');
+  });
+
+  it('should select hero on click', fakeAsync(() => {
+    const expectedHero = HEROES[1];
+    const li = page.heroRows[1];
+    li.dispatchEvent(newEvent('click'));
+    tick();
+    // `.toEqual` because selectedHero is clone of expectedHero; see FakeHeroService
+    expect(comp.selectedHero).toEqual(expectedHero);
+  }));
+
+  it('should navigate to selected hero detail on click', fakeAsync(() => {
+    const expectedHero = HEROES[1];
+    const li = page.heroRows[1];
+    li.dispatchEvent(newEvent('click'));
+    tick();
+
+    // should have navigated
+    expect(page.navSpy.calls.any()).toBe(true, 'navigate called');
+
+    // composed hero detail will be URL like 'heroes/42'
+    // expect link array with the route path and hero id
+    // first argument to router.navigate is link array
+    const navArgs = page.navSpy.calls.first().args[0];
+    expect(navArgs[0]).toContain('heroes', 'nav to heroes detail URL');
+    expect(navArgs[1]).toBe(expectedHero.id, 'expected hero.id');
+
+  }));
+
+  it('should find `HighlightDirective` with `By.directive', () => {
+    // #docregion by
+    // Can find DebugElement either by css selector or by directive
+    const h2        = fixture.debugElement.query(By.css('h2'));
+    const directive = fixture.debugElement.query(By.directive(HighlightDirective));
+    // #enddocregion by
+    expect(h2).toBe(directive);
+  });
+
+  it('should color header with `HighlightDirective`', () => {
+    const h2 = page.highlightDe.nativeElement as HTMLElement;
+    const bgColor = h2.style.backgroundColor;
+
+    // different browsers report color values differently
+    const isExpectedColor = bgColor === 'gold' || bgColor === 'rgb(255, 215, 0)';
+    expect(isExpectedColor).toBe(true, 'backgroundColor');
+  });
+
+  it('the `HighlightDirective` is among the element\'s providers', () => {
+    expect(page.highlightDe.providerTokens).toContain(HighlightDirective, 'HighlightDirective');
+  });
+});
+
+/////////// Helpers /////
+
+/** Create the component and set the `page` test variables */
+function createComponent() {
+  fixture = TestBed.createComponent(HeroListComponent);
+  comp = fixture.componentInstance;
+
+  // change detection triggers ngOnInit which gets a hero
+  fixture.detectChanges();
+
+  return fixture.whenStable().then(() => {
+    // got the heroes and updated component
+    // change detection updates the view
+    fixture.detectChanges();
+    page = new Page();
+  });
+}
+
+class Page {
+  /** Hero line elements */
+  heroRows: HTMLLIElement[];
+
+  /** Highlighted DebugElement */
+  highlightDe: DebugElement;
+
+  /** Spy on router navigate method */
+  navSpy: jasmine.Spy;
+
+  constructor() {
+    const heroRowNodes = fixture.nativeElement.querySelectorAll('li');
+    this.heroRows = Array.from(heroRowNodes);
+
+    // Find the first element with an attached HighlightDirective
+    this.highlightDe = fixture.debugElement.query(By.directive(HighlightDirective));
+
+    // Get the component's injected router navigation spy
+    const routerSpy = fixture.debugElement.injector.get(Router);
+    this.navSpy = routerSpy.navigate as jasmine.Spy;
+  };
+}
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
new file mode 100644
index 000000000000..04403380f26d
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { Router }            from '@angular/router';
+
+import { Observable } from 'rxjs';
+
+import { Hero } from '../model/hero';
+import { HeroService } from '../model/hero.service';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './hero-list.component.html',
+  styleUrls: [ './hero-list.component.css' ]
+})
+export class HeroListComponent implements OnInit {
+  heroes: Observable<Hero[]>;
+  selectedHero: Hero;
+
+  constructor(
+    private router: Router,
+    private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroes = this.heroService.getHeroes();
+  }
+
+  onSelect(hero: Hero) {
+    this.selectedHero = hero;
+    this.router.navigate(['../heroes', this.selectedHero.id ]);
+  }
+}
diff --git a/aio/content/examples/testing/src/app/hero/hero-routing.module.ts b/aio/content/examples/testing/src/app/hero/hero-routing.module.ts
new file mode 100644
index 000000000000..59ec14474c20
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { HeroListComponent }    from './hero-list.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+
+const routes: Routes =  [
+  { path: '',    component: HeroListComponent },
+  { path: ':id', component: HeroDetailComponent }
+];
+
+export const routedComponents = [HeroDetailComponent, HeroListComponent];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HeroRoutingModule {}
diff --git a/aio/content/examples/testing/src/app/hero/hero.module.ts b/aio/content/examples/testing/src/app/hero/hero.module.ts
new file mode 100644
index 000000000000..dfe33cc19974
--- /dev/null
+++ b/aio/content/examples/testing/src/app/hero/hero.module.ts
@@ -0,0 +1,9 @@
+import { NgModule }     from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+import { routedComponents, HeroRoutingModule } from './hero-routing.module';
+
+@NgModule({
+  imports:      [ SharedModule, HeroRoutingModule ],
+  declarations: [ routedComponents ]
+})
+export class HeroModule { }
diff --git a/aio/content/examples/testing/src/app/in-memory-data.service.ts b/aio/content/examples/testing/src/app/in-memory-data.service.ts
new file mode 100644
index 000000000000..81f26b674a56
--- /dev/null
+++ b/aio/content/examples/testing/src/app/in-memory-data.service.ts
@@ -0,0 +1,26 @@
+// #docregion , init
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+import { QUOTES } from './twain/twain.data';
+
+// Adjust to reduce number of quotes
+const maxQuotes = Infinity; // 0;
+
+/** Create in-memory database of heroes and quotes */
+export class InMemoryDataService implements InMemoryDbService {
+  createDb() {
+    const 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, quotes: QUOTES.slice(0, maxQuotes) };
+  }
+}
diff --git a/aio/content/examples/testing/src/app/model/hero.service.spec.ts b/aio/content/examples/testing/src/app/model/hero.service.spec.ts
new file mode 100644
index 000000000000..22bd98246d1c
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/hero.service.spec.ts
@@ -0,0 +1,215 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+// Other imports
+import { TestBed } from '@angular/core/testing';
+import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
+
+import { asyncData, asyncError } from '../../testing/async-observable-helpers';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+describe ('HeroesService (with spies)', () => {
+  // #docregion test-with-spies
+  let httpClientSpy: { get: jasmine.Spy };
+  let heroService: HeroService;
+
+  beforeEach(() => {
+    // TODO: spy on other methods too
+    httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
+    heroService = new HeroService(<any> httpClientSpy);
+  });
+
+  it('should return expected heroes (HttpClient called once)', () => {
+    const expectedHeroes: Hero[] =
+      [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
+
+    httpClientSpy.get.and.returnValue(asyncData(expectedHeroes));
+
+    heroService.getHeroes().subscribe(
+      heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),
+      fail
+    );
+    expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
+  });
+
+  it('should return an error when the server returns a 404', () => {
+    const errorResponse = new HttpErrorResponse({
+      error: 'test 404 error',
+      status: 404, statusText: 'Not Found'
+    });
+
+    httpClientSpy.get.and.returnValue(asyncError(errorResponse));
+
+    heroService.getHeroes().subscribe(
+      heroes => fail('expected an error, not heroes'),
+      error  => expect(error.message).toContain('test 404 error')
+    );
+  });
+  // #enddocregion test-with-spies
+
+});
+
+describe('HeroesService (with mocks)', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let heroService: HeroService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      // Import the HttpClient mocking services
+      imports: [ HttpClientTestingModule ],
+      // Provide the service-under-test
+      providers: [ HeroService ]
+    });
+
+    // Inject the http, test controller, and service-under-test
+    // as they will be referenced by each test.
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    heroService = TestBed.get(HeroService);
+  });
+
+  afterEach(() => {
+    // After every test, assert that there are no more pending requests.
+    httpTestingController.verify();
+  });
+
+  /// HeroService method tests begin ///
+  describe('#getHeroes', () => {
+    let expectedHeroes: Hero[];
+
+    beforeEach(() => {
+      heroService = TestBed.get(HeroService);
+      expectedHeroes = [
+        { id: 1, name: 'A' },
+        { id: 2, name: 'B' },
+       ] as Hero[];
+    });
+
+    it('should return expected heroes (called once)', () => {
+      heroService.getHeroes().subscribe(
+        heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
+        fail
+      );
+
+      // HeroService should have made one request to GET heroes from expected URL
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+      expect(req.request.method).toEqual('GET');
+
+      // Respond with the mock heroes
+      req.flush(expectedHeroes);
+    });
+
+    it('should be OK returning no heroes', () => {
+      heroService.getHeroes().subscribe(
+        heroes => expect(heroes.length).toEqual(0, 'should have empty heroes array'),
+        fail
+      );
+
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+      req.flush([]); // Respond with no heroes
+    });
+
+    it('should turn 404 into a user-friendly error', () => {
+      const msg = 'Deliberate 404';
+      heroService.getHeroes().subscribe(
+        heroes => fail('expected to fail'),
+        error => expect(error.message).toContain(msg)
+      );
+
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+      // respond with a 404 and the error message in the body
+      req.flush(msg, {status: 404, statusText: 'Not Found'});
+    });
+
+    it('should return expected heroes (called multiple times)', () => {
+      heroService.getHeroes().subscribe();
+      heroService.getHeroes().subscribe();
+      heroService.getHeroes().subscribe(
+        heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
+        fail
+      );
+
+      const requests = httpTestingController.match(heroService.heroesUrl);
+      expect(requests.length).toEqual(3, 'calls to getHeroes()');
+
+      // Respond to each request with different mock hero results
+      requests[0].flush([]);
+      requests[1].flush([{id: 1, name: 'bob'}]);
+      requests[2].flush(expectedHeroes);
+    });
+  });
+
+  describe('#updateHero', () => {
+    // Expecting the query form of URL so should not 404 when id not found
+    const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`;
+
+    it('should update a hero and return it', () => {
+
+      const updateHero: Hero = { id: 1, name: 'A' };
+
+      heroService.updateHero(updateHero).subscribe(
+        data => expect(data).toEqual(updateHero, 'should return the hero'),
+        fail
+      );
+
+      // HeroService should have made one request to PUT hero
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+      expect(req.request.method).toEqual('PUT');
+      expect(req.request.body).toEqual(updateHero);
+
+      // Expect server to return the hero after PUT
+      const expectedResponse = new HttpResponse(
+        { status: 200, statusText: 'OK', body: updateHero });
+      req.event(expectedResponse);
+    });
+
+    it('should turn 404 error into user-facing error', () => {
+      const msg = 'Deliberate 404';
+      const updateHero: Hero = { id: 1, name: 'A' };
+      heroService.updateHero(updateHero).subscribe(
+        heroes => fail('expected to fail'),
+        error => expect(error.message).toContain(msg)
+      );
+
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+      // respond with a 404 and the error message in the body
+      req.flush(msg, {status: 404, statusText: 'Not Found'});
+    });
+
+    // #docregion network-error
+    it('should turn network error into user-facing error', () => {
+      const emsg = 'simulated network error';
+
+      const updateHero: Hero = { id: 1, name: 'A' };
+      heroService.updateHero(updateHero).subscribe(
+        heroes => fail('expected to fail'),
+        error => expect(error.message).toContain(emsg)
+      );
+
+      const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+      // Create mock ErrorEvent, raised when something goes wrong at the network level.
+      // Connection timeout, DNS error, offline, etc
+      const errorEvent = new ErrorEvent('so sad', {
+        message: emsg,
+        // #enddocregion network-error
+        // The rest of this is optional and not used.
+        // Just showing that you could provide this too.
+        filename: 'HeroService.ts',
+        lineno: 42,
+        colno: 21
+      // #docregion network-error
+      });
+
+      // Respond with mock error
+      req.error(errorEvent);
+    });
+    // #enddocregion network-error
+  });
+
+  // TODO: test other HeroService methods
+});
diff --git a/aio/content/examples/testing/src/app/model/hero.service.ts b/aio/content/examples/testing/src/app/model/hero.service.ts
new file mode 100644
index 000000000000..e5b5d04ee540
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/hero.service.ts
@@ -0,0 +1,97 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
+
+import { Hero } from './hero';
+
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+
+@Injectable()
+export class HeroService {
+
+  readonly heroesUrl = 'api/heroes';  // URL to web api
+
+  constructor(private http: HttpClient) { }
+
+  /** GET heroes from the server */
+  getHeroes (): Observable<Hero[]> {
+    return this.http.get<Hero[]>(this.heroesUrl)
+      .pipe(
+        tap(heroes => this.log(`fetched heroes`)),
+        catchError(this.handleError('getHeroes'))
+      ) as Observable<Hero[]>;
+  }
+
+  /** GET hero by id. Return `undefined` when id not found */
+  getHero<Data>(id: number | string): Observable<Hero> {
+    if (typeof id === 'string') {
+      id = parseInt(id as string, 10);
+    }
+    const url = `${this.heroesUrl}/?id=${id}`;
+    return this.http.get<Hero[]>(url)
+      .pipe(
+        map(heroes => heroes[0]), // returns a {0|1} element array
+        tap(h => {
+          const outcome = h ? `fetched` : `did not find`;
+          this.log(`${outcome} hero id=${id}`);
+        }),
+        catchError(this.handleError<Hero>(`getHero id=${id}`))
+      );
+  }
+
+  //////// Save methods //////////
+
+  /** POST: add a new hero to the server */
+  addHero (hero: Hero): Observable<Hero> {
+    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
+      tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
+      catchError(this.handleError<Hero>('addHero'))
+    );
+  }
+  /** DELETE: delete the hero from the server */
+  deleteHero (hero: Hero | number): Observable<Hero> {
+    const id = typeof hero === 'number' ? hero : hero.id;
+    const url = `${this.heroesUrl}/${id}`;
+
+    return this.http.delete<Hero>(url, httpOptions).pipe(
+      tap(_ => this.log(`deleted hero id=${id}`)),
+      catchError(this.handleError<Hero>('deleteHero'))
+    );
+  }
+
+  /** PUT: update the hero on the server */
+  updateHero (hero: Hero): Observable<any> {
+    return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
+      tap(_ => this.log(`updated hero id=${hero.id}`)),
+      catchError(this.handleError<any>('updateHero'))
+    );
+  }
+  /**
+   * Returns a function that handles Http operation failures.
+   * This error handler lets the app continue to run as if no error occurred.
+   * @param operation - name of the operation that failed
+   */
+  private handleError<T> (operation = 'operation') {
+    return (error: HttpErrorResponse): Observable<T> => {
+
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      const message = (error.error instanceof ErrorEvent) ?
+        error.error.message :
+       `server returned code ${error.status} with body "${error.error}"`;
+
+      // TODO: better job of transforming error for user consumption
+      throw new Error(`${operation} failed: ${message}`);
+    };
+
+  }
+
+  private log(message: string) {
+    console.log('HeroService: ' + message);
+  }
+}
diff --git a/aio/content/examples/testing/src/app/model/hero.ts b/aio/content/examples/testing/src/app/model/hero.ts
new file mode 100644
index 000000000000..93e87f4770bf
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/hero.ts
@@ -0,0 +1,8 @@
+export interface Hero {
+  id: number;
+  name: string;
+}
+
+// SystemJS bug:
+// TS file must export something real in JS, not just interfaces
+export const _dummy = undefined;
diff --git a/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts b/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
new file mode 100644
index 000000000000..54b23e185192
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
@@ -0,0 +1,126 @@
+/**
+ * Test the HeroService when implemented with the OLD HttpModule
+ */
+import {
+   async, inject, TestBed
+} from '@angular/core/testing';
+
+import {
+  MockBackend,
+  MockConnection
+} from '@angular/http/testing';
+
+import {
+  HttpModule, Http, XHRBackend, Response, ResponseOptions
+} from '@angular/http';
+
+import { of } from 'rxjs';
+
+import { Hero } from './hero';
+import { HttpHeroService } from './http-hero.service';
+
+const makeHeroData = () => [
+  { id: 1, name: 'Windstorm' },
+  { id: 2, name: 'Bombasto' },
+  { id: 3, name: 'Magneta' },
+  { id: 4, name: 'Tornado' }
+] as Hero[];
+
+////////  Tests  /////////////
+describe('HttpHeroService (using old HttpModule)', () => {
+  let backend: MockBackend;
+  let service: HttpHeroService;
+
+  beforeEach( () => {
+    TestBed.configureTestingModule({
+      imports: [ HttpModule ],
+      providers: [
+        HttpHeroService,
+        { provide: XHRBackend, useClass: MockBackend }
+      ]
+    });
+  });
+
+  it('can instantiate service via DI', () => {
+      service = TestBed.get(HttpHeroService);
+      expect(service instanceof HttpHeroService).toBe(true);
+  });
+
+  it('can instantiate service with "new"', () => {
+    const http = TestBed.get(Http);
+    expect(http).not.toBeNull('http should be provided');
+    let service = new HttpHeroService(http);
+    expect(service instanceof HttpHeroService).toBe(true, 'new service should be ok');
+  });
+
+  it('can provide the mockBackend as XHRBackend', () => {
+    const backend = TestBed.get(XHRBackend);
+    expect(backend).not.toBeNull('backend should be provided');
+  });
+
+  describe('when getHeroes', () => {
+    let fakeHeroes: Hero[];
+    let http: Http;
+    let response: Response;
+
+    beforeEach(() => {
+
+      backend = TestBed.get(XHRBackend);
+      http = TestBed.get(Http);
+
+      service = new HttpHeroService(http);
+      fakeHeroes = makeHeroData();
+      let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
+      response = new Response(options);
+    });
+
+    it('should have expected fake heroes (then)', () => {
+      backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+
+      service.getHeroes().toPromise()
+      // .then(() => Promise.reject('deliberate'))
+        .then(heroes => {
+          expect(heroes.length).toBe(fakeHeroes.length,
+            'should have expected no. of heroes');
+        })
+        .catch(fail);
+    });
+
+    it('should have expected fake heroes (Observable tap)', () => {
+      backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+
+      service.getHeroes().subscribe(
+        heroes => {
+          expect(heroes.length).toBe(fakeHeroes.length,
+            'should have expected no. of heroes');
+        },
+        fail
+      );
+    });
+
+
+    it('should be OK returning no heroes', () => {
+      let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
+      backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
+
+      service.getHeroes().subscribe(
+        heroes => {
+          expect(heroes.length).toBe(0, 'should have no heroes');
+        },
+        fail
+      );
+    });
+
+    it('should treat 404 as an Observable error', () => {
+      let resp = new Response(new ResponseOptions({status: 404}));
+      backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
+
+      service.getHeroes().subscribe(
+        heroes => fail('should not respond with heroes'),
+        err => {
+          expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
+          return of(null); // failure is the expected test result
+        });
+    });
+  });
+});
diff --git a/aio/content/examples/testing/src/app/model/http-hero.service.ts b/aio/content/examples/testing/src/app/model/http-hero.service.ts
new file mode 100644
index 000000000000..4c6b79be797b
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/http-hero.service.ts
@@ -0,0 +1,69 @@
+// The OLD Http module. See HeroService for use of the current HttpClient
+// #docplaster
+// #docregion
+import { Injectable }     from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Headers, RequestOptions } from '@angular/http';
+import { Hero }           from './hero';
+
+import { Observable } from 'rxjs';
+import { throwError } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+
+@Injectable()
+export class HttpHeroService {
+  private _heroesUrl = 'app/heroes';  // URL to web api
+
+  constructor (private http: Http) {}
+
+  getHeroes (): Observable<Hero[]> {
+    return this.http.get(this._heroesUrl).pipe(
+      map(this.extractData),
+      // tap(data => console.log(data)), // eyeball results in the console
+      catchError(this.handleError)
+    );
+  }
+
+  getHero(id: number | string) {
+    return this.http.get('app/heroes/?id=${id}').pipe(
+      map((r: Response) => r.json().data as Hero[])
+    );
+  }
+
+  addHero (name: string): Observable<Hero>  {
+    let body = JSON.stringify({ name });
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    return this.http.post(this._heroesUrl, body, options).pipe(
+      map(this.extractData),
+      catchError(this.handleError)
+    );
+  }
+
+  updateHero (hero: Hero): Observable<Hero>  {
+    let body = JSON.stringify(hero);
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    return this.http.put(this._heroesUrl, body, options).pipe(
+      map(this.extractData),
+      catchError(this.handleError)
+    );
+  }
+
+  private extractData(res: Response) {
+    if (res.status < 200 || res.status >= 300) {
+      throw new Error('Bad response status: ' + res.status);
+    }
+    let body = res.json();
+    return body.data || { };
+  }
+
+  private handleError (error: any) {
+    // In a real world app, we might send the error to remote logging infrastructure
+    let errMsg = error.message || 'Server error';
+    console.error(errMsg); // log to console instead
+    return throwError(errMsg);
+  }
+}
diff --git a/aio/content/examples/testing/src/app/model/index.ts b/aio/content/examples/testing/src/app/model/index.ts
new file mode 100644
index 000000000000..694c333a879b
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/index.ts
@@ -0,0 +1,3 @@
+export * from './hero';
+export * from './hero.service';
+export * from './user.service';
diff --git a/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
new file mode 100644
index 000000000000..2c5b5ffd460b
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
@@ -0,0 +1,192 @@
+// #docplaster
+// #docregion imports
+// Http testing module and mocking controller
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+// Other imports
+import { TestBed } from '@angular/core/testing';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+// #enddocregion imports
+import { HttpHeaders } from '@angular/common/http';
+
+interface Data {
+  name: string;
+}
+
+const testUrl = '/data';
+
+// #docregion setup
+describe('HttpClient testing', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ]
+    });
+
+    // Inject the http service and test controller for each test
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+  });
+  // #enddocregion setup
+  // #docregion afterEach
+  afterEach(() => {
+    // After every test, assert that there are no more pending requests.
+    httpTestingController.verify();
+  });
+  // #enddocregion afterEach
+  // #docregion setup
+  /// Tests begin ///
+  // #enddocregion setup
+  // #docregion get-test
+  it('can test HttpClient.get', () => {
+    const testData: Data = {name: 'Test Data'};
+
+    // Make an HTTP GET request
+    httpClient.get<Data>(testUrl)
+      .subscribe(data =>
+        // When observable resolves, result should match test data
+        expect(data).toEqual(testData)
+      );
+
+    // The following `expectOne()` will match the request's URL.
+    // If no requests or multiple requests matched that URL
+    // `expectOne()` would throw.
+    const req = httpTestingController.expectOne('/data');
+
+    // Assert that the request is a GET.
+    expect(req.request.method).toEqual('GET');
+
+    // Respond with mock data, causing Observable to resolve.
+    // Subscribe callback asserts that correct data was returned.
+    req.flush(testData);
+
+    // Finally, assert that there are no outstanding requests.
+    httpTestingController.verify();
+  });
+  // #enddocregion get-test
+  it('can test HttpClient.get with matching header', () => {
+    const testData: Data = {name: 'Test Data'};
+
+    // Make an HTTP GET request with specific header
+    httpClient.get<Data>(testUrl, {
+        headers: new HttpHeaders({'Authorization': 'my-auth-token'})
+      })
+      .subscribe(data =>
+        expect(data).toEqual(testData)
+      );
+
+      // Find request with a predicate function.
+    // #docregion predicate
+    // Expect one request with an authorization header
+    const req = httpTestingController.expectOne(
+      req => req.headers.has('Authorization')
+    );
+    // #enddocregion predicate
+    req.flush(testData);
+  });
+
+  it('can test multiple requests', () => {
+    let testData: Data[] = [
+      { name: 'bob' }, { name: 'carol' },
+      { name: 'ted' }, { name: 'alice' }
+    ];
+
+    // Make three requests in a row
+    httpClient.get<Data[]>(testUrl)
+      .subscribe(d => expect(d.length).toEqual(0, 'should have no data'));
+
+    httpClient.get<Data[]>(testUrl)
+      .subscribe(d => expect(d).toEqual([testData[0]], 'should be one element array'));
+
+    httpClient.get<Data[]>(testUrl)
+      .subscribe(d => expect(d).toEqual(testData, 'should be expected data'));
+
+    // #docregion multi-request
+    // get all pending requests that match the given URL
+    const requests = httpTestingController.match(testUrl);
+    expect(requests.length).toEqual(3);
+
+    // Respond to each request with different results
+    requests[0].flush([]);
+    requests[1].flush([testData[0]]);
+    requests[2].flush(testData);
+    // #enddocregion multi-request
+  });
+
+  // #docregion 404
+  it('can test for 404 error', () => {
+    const emsg = 'deliberate 404 error';
+
+    httpClient.get<Data[]>(testUrl).subscribe(
+      data => fail('should have failed with the 404 error'),
+      (error: HttpErrorResponse) => {
+        expect(error.status).toEqual(404, 'status');
+        expect(error.error).toEqual(emsg, 'message');
+      }
+    );
+
+    const req = httpTestingController.expectOne(testUrl);
+
+    // Respond with mock error
+    req.flush(emsg, { status: 404, statusText: 'Not Found' });
+  });
+  // #enddocregion 404
+
+  // #docregion network-error
+  it('can test for network error', () => {
+    const emsg = 'simulated network error';
+
+    httpClient.get<Data[]>(testUrl).subscribe(
+      data => fail('should have failed with the network error'),
+      (error: HttpErrorResponse) => {
+        expect(error.error.message).toEqual(emsg, 'message');
+      }
+    );
+
+    const req = httpTestingController.expectOne(testUrl);
+
+    // Create mock ErrorEvent, raised when something goes wrong at the network level.
+    // Connection timeout, DNS error, offline, etc
+    const errorEvent = new ErrorEvent('so sad', {
+      message: emsg,
+      // #enddocregion network-error
+      // The rest of this is optional and not used.
+      // Just showing that you could provide this too.
+      filename: 'HeroService.ts',
+      lineno: 42,
+      colno: 21
+    // #docregion network-error
+    });
+
+    // Respond with mock error
+    req.error(errorEvent);
+  });
+  // #enddocregion network-error
+
+  it('httpTestingController.verify should fail if HTTP response not simulated', () => {
+    // Sends request
+    httpClient.get('some/api').subscribe();
+
+    // verify() should fail because haven't handled the pending request.
+    expect(() => httpTestingController.verify()).toThrow();
+
+    // Now get and flush the request so that afterEach() doesn't fail
+    const req = httpTestingController.expectOne('some/api');
+    req.flush(null);
+  });
+
+  // Proves that verify in afterEach() really would catch error
+  // if test doesn't simulate the HTTP response.
+  //
+  // Must disable this test because can't catch an error in an afterEach().
+  // Uncomment if you want to confirm that afterEach() does the job.
+  // it('afterEach() should fail when HTTP response not simulated',() => {
+  //   // Sends request which is never handled by this test
+  //   httpClient.get('some/api').subscribe();
+  // });
+// #docregion setup
+});
+// #enddocregion setup
diff --git a/aio/content/examples/testing/src/app/model/testing/index.ts b/aio/content/examples/testing/src/app/model/testing/index.ts
new file mode 100644
index 000000000000..6da76e67db94
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/index.ts
@@ -0,0 +1 @@
+export * from './fake-hero.service';
diff --git a/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts b/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
new file mode 100644
index 000000000000..ecdea31d2308
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs';
+import { asyncData } from '../../../testing';
+
+import { map } from 'rxjs/operators';
+
+// re-export for tester convenience
+export { Hero }          from '../hero';
+export { HeroService }   from '../hero.service';
+export { getTestHeroes } from './test-heroes';
+
+import { Hero }          from '../hero';
+import { HeroService }   from '../hero.service';
+import { getTestHeroes } from './test-heroes';
+
+@Injectable()
+/**
+ * FakeHeroService pretends to make real http requests.
+ * implements only as much of HeroService as is actually consumed by the app
+*/
+export class TestHeroService extends HeroService {
+
+  constructor() {
+    super(null);
+  }
+
+  heroes = getTestHeroes();
+  lastResult: Observable<any>; // result from last method call
+
+  addHero(hero: Hero): Observable<Hero> {
+    throw new Error('Method not implemented.');
+  }
+
+  deleteHero(hero: number | Hero): Observable<Hero> {
+    throw new Error('Method not implemented.');
+  }
+
+  getHeroes(): Observable<Hero[]> {
+    return this.lastResult = asyncData(this.heroes);
+  }
+
+  getHero(id: number | string): Observable<Hero> {
+    if (typeof id === 'string') {
+      id = parseInt(id as string, 10);
+    }
+    let hero = this.heroes.find(h => h.id === id);
+    return this.lastResult = asyncData(hero);
+  }
+
+  updateHero(hero: Hero): Observable<Hero> {
+    return this.lastResult = this.getHero(hero.id).pipe(
+      map(h => {
+        if (h) {
+          return Object.assign(h, hero);
+        }
+        throw new Error(`Hero ${hero.id} not found`);
+      })
+    );
+  }
+}
diff --git a/aio/content/examples/testing/src/app/model/testing/test-heroes.ts b/aio/content/examples/testing/src/app/model/testing/test-heroes.ts
new file mode 100644
index 000000000000..2af87f0e0d40
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/test-heroes.ts
@@ -0,0 +1,13 @@
+import { Hero } from '../hero';
+
+/** return fresh array of test heroes */
+export function getTestHeroes(): Hero[] {
+  return [
+    {id: 41, name: 'Bob' },
+    {id: 42, name: 'Carol' },
+    {id: 43, name: 'Ted' },
+    {id: 44, name: 'Alice' },
+    {id: 45, name: 'Speedy' },
+    {id: 46, name: 'Stealthy' }
+  ];
+}
diff --git a/aio/content/examples/testing/src/app/model/user.service.ts b/aio/content/examples/testing/src/app/model/user.service.ts
new file mode 100644
index 000000000000..280efefeec20
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/user.service.ts
@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class UserService {
+  isLoggedIn = true;
+  user = {name: 'Sam Spade'};
+}
diff --git a/aio/content/examples/testing/src/app/shared/canvas.component.spec.ts b/aio/content/examples/testing/src/app/shared/canvas.component.spec.ts
new file mode 100644
index 000000000000..eacb67eb82bf
--- /dev/null
+++ b/aio/content/examples/testing/src/app/shared/canvas.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed, async, tick, fakeAsync } from '@angular/core/testing';
+import { CanvasComponent } from './canvas.component';
+describe('CanvasComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        CanvasComponent
+      ],
+    }).compileComponents();
+  }));
+  beforeEach(() => {
+    window['__zone_symbol__FakeAsyncTestMacroTask'] = [
+      {
+        source: 'HTMLCanvasElement.toBlob',
+        callbackArgs: [{ size: 200 }]
+      }
+    ];
+  });
+  it('should be able to generate blob data from canvas', fakeAsync(() => {
+    const fixture = TestBed.createComponent(CanvasComponent);
+    fixture.detectChanges();
+    tick();
+    const app = fixture.debugElement.componentInstance;
+    expect(app.blobSize).toBeGreaterThan(0);
+  }));
+});
+
diff --git a/aio/content/examples/testing/src/app/shared/canvas.component.ts b/aio/content/examples/testing/src/app/shared/canvas.component.ts
new file mode 100644
index 000000000000..0f32dbeeb66b
--- /dev/null
+++ b/aio/content/examples/testing/src/app/shared/canvas.component.ts
@@ -0,0 +1,25 @@
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'sample-canvas',
+  template: '<canvas #sampleCanvas width="200" height="200"></canvas>'
+})
+export class CanvasComponent implements AfterViewInit {
+  blobSize: number;
+  @ViewChild('sampleCanvas') sampleCanvas;
+
+  constructor() { }
+
+  ngAfterViewInit() {
+    const canvas = this.sampleCanvas.nativeElement;
+    const context = canvas.getContext('2d');
+    if (context) {
+      context.clearRect(0, 0, 200, 200);
+      context.fillStyle = '#FF1122';
+      context.fillRect(0, 0, 200, 200);
+      canvas.toBlob((blob: any) => {
+        this.blobSize = blob.size;
+      });
+    }
+  }
+}
diff --git a/aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts b/aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts
new file mode 100644
index 000000000000..b990f20b691c
--- /dev/null
+++ b/aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts
@@ -0,0 +1,104 @@
+import { Component, DebugElement }   from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { HighlightDirective } from './highlight.directive';
+import { newEvent }           from '../../testing';
+
+// #docregion test-component
+@Component({
+  template: `
+  <h2 highlight="yellow">Something Yellow</h2>
+  <h2 highlight>The Default (Gray)</h2>
+  <h2>No Highlight</h2>
+  <input #box [highlight]="box.value" value="cyan"/>`
+})
+class TestComponent { }
+// #enddocregion test-component
+
+describe('HighlightDirective', () => {
+
+  let fixture: ComponentFixture<TestComponent>;
+  let des: DebugElement[];  // the three elements w/ the directive
+  let bareH2: DebugElement; // the <h2> w/o the directive
+
+  // #docregion selected-tests
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [ HighlightDirective, TestComponent ]
+    })
+    .createComponent(TestComponent);
+
+    fixture.detectChanges(); // initial binding
+
+    // all elements with an attached HighlightDirective
+    des = fixture.debugElement.queryAll(By.directive(HighlightDirective));
+
+    // the h2 without the HighlightDirective
+    bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])'));
+  });
+
+  // color tests
+  it('should have three highlighted elements', () => {
+    expect(des.length).toBe(3);
+  });
+
+  it('should color 1st <h2> background "yellow"', () => {
+    const bgColor = des[0].nativeElement.style.backgroundColor;
+    expect(bgColor).toBe('yellow');
+  });
+
+  it('should color 2nd <h2> background w/ default color', () => {
+    const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
+    const bgColor = des[1].nativeElement.style.backgroundColor;
+    expect(bgColor).toBe(dir.defaultColor);
+  });
+
+  it('should bind <input> background to value color', () => {
+    // easier to work with nativeElement
+    const input = des[2].nativeElement as HTMLInputElement;
+    expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor');
+
+    // dispatch a DOM event so that Angular responds to the input value change.
+    input.value = 'green';
+    input.dispatchEvent(newEvent('input'));
+    fixture.detectChanges();
+
+    expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor');
+  });
+
+
+  it('bare <h2> should not have a customProperty', () => {
+    expect(bareH2.properties['customProperty']).toBeUndefined();
+  });
+  // #enddocregion selected-tests
+
+  // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
+  // // customProperty tests
+  // it('all highlighted elements should have a true customProperty', () => {
+  //   const allTrue = des.map(de => !!de.properties['customProperty']).every(v => v === true);
+  //   expect(allTrue).toBe(true);
+  // });
+
+  // injected directive
+  // attached HighlightDirective can be injected
+  it('can inject `HighlightDirective` in 1st <h2>', () => {
+    const dir = des[0].injector.get(HighlightDirective);
+    expect(dir).toBeTruthy();
+  });
+
+  it('cannot inject `HighlightDirective` in 3rd <h2>', () => {
+    const dir = bareH2.injector.get(HighlightDirective, null);
+    expect(dir).toBe(null);
+  });
+
+  // DebugElement.providerTokens
+  // attached HighlightDirective should be listed in the providerTokens
+  it('should have `HighlightDirective` in 1st <h2> providerTokens', () => {
+    expect(des[0].providerTokens).toContain(HighlightDirective);
+  });
+
+  it('should not have `HighlightDirective` in 3rd <h2> providerTokens', () => {
+    expect(bareH2.providerTokens).not.toContain(HighlightDirective);
+  });
+});
diff --git a/aio/content/examples/testing/src/app/shared/highlight.directive.ts b/aio/content/examples/testing/src/app/shared/highlight.directive.ts
new file mode 100644
index 000000000000..20901878c476
--- /dev/null
+++ b/aio/content/examples/testing/src/app/shared/highlight.directive.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
+
+@Directive({ selector: '[highlight]' })
+/** Set backgroundColor for the attached element to highlight color
+ *  and set the element's customProperty to true */
+export class HighlightDirective implements OnChanges {
+
+  defaultColor =  'rgb(211, 211, 211)'; // lightgray
+
+  @Input('highlight') bgColor: string;
+
+  constructor(private el: ElementRef) {
+    el.nativeElement.style.customProperty = true;
+  }
+
+  ngOnChanges() {
+    this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;
+  }
+}
diff --git a/aio/content/examples/testing/src/app/shared/shared.module.ts b/aio/content/examples/testing/src/app/shared/shared.module.ts
new file mode 100644
index 000000000000..cb2e6e7f90db
--- /dev/null
+++ b/aio/content/examples/testing/src/app/shared/shared.module.ts
@@ -0,0 +1,19 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule }   from '@angular/forms';
+
+import { HighlightDirective } from './highlight.directive';
+import { TitleCasePipe }      from './title-case.pipe';
+
+@NgModule({
+  imports: [ CommonModule ],
+  exports: [
+    CommonModule,
+    // SharedModule importers won't have to import FormsModule too
+    FormsModule,
+    HighlightDirective,
+    TitleCasePipe
+  ],
+  declarations: [ HighlightDirective, TitleCasePipe ]
+})
+export class SharedModule { }
diff --git a/aio/content/examples/testing/src/app/shared/title-case.pipe.spec.ts b/aio/content/examples/testing/src/app/shared/title-case.pipe.spec.ts
new file mode 100644
index 000000000000..5dfc5d91b093
--- /dev/null
+++ b/aio/content/examples/testing/src/app/shared/title-case.pipe.spec.ts
@@ -0,0 +1,34 @@
+// #docplaster
+// #docregion
+import { TitleCasePipe } from './title-case.pipe';
+
+// #docregion excerpt, mini-excerpt
+describe('TitleCasePipe', () => {
+  // This pipe is a pure, stateless function so no need for BeforeEach
+  let pipe = new TitleCasePipe();
+
+  it('transforms "abc" to "Abc"', () => {
+    expect(pipe.transform('abc')).toBe('Abc');
+  });
+// #enddocregion mini-excerpt
+
+  it('transforms "abc def" to "Abc Def"', () => {
+    expect(pipe.transform('abc def')).toBe('Abc Def');
+  });
+
+  // ... more tests ...
+// #enddocregion excerpt
+  it('leaves "Abc Def" unchanged', () => {
+    expect(pipe.transform('Abc Def')).toBe('Abc Def');
+  });
+
+  it('transforms "abc-def" to "Abc-def"', () => {
+    expect(pipe.transform('abc-def')).toBe('Abc-def');
+  });
+
+  it('transforms "   abc   def" to "   Abc   Def" (preserves spaces) ', () => {
+    expect(pipe.transform('   abc   def')).toBe('   Abc   Def');
+  });
+// #docregion excerpt, mini-excerpt
+});
+// #enddocregion excerpt, mini-excerpt
diff --git a/aio/content/examples/testing/src/app/shared/title-case.pipe.ts b/aio/content/examples/testing/src/app/shared/title-case.pipe.ts
new file mode 100644
index 000000000000..8797f499326f
--- /dev/null
+++ b/aio/content/examples/testing/src/app/shared/title-case.pipe.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({name: 'titlecase', pure: true})
+/** Transform to Title Case: uppercase the first letter of the words in a string.*/
+export class TitleCasePipe implements PipeTransform {
+  transform(input: string): string {
+    return input.length === 0 ? '' :
+      input.replace(/\w\S*/g, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase() ));
+  }
+}
diff --git a/aio/content/examples/testing/src/app/twain/quote.ts b/aio/content/examples/testing/src/app/twain/quote.ts
new file mode 100644
index 000000000000..803cae0f600a
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/quote.ts
@@ -0,0 +1,4 @@
+export class Quote {
+  id: number;
+  quote: string;
+}
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts b/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts
new file mode 100644
index 000000000000..f508fd2e8212
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts
@@ -0,0 +1,87 @@
+// #docplaster
+import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+
+// #docregion import-marbles
+import { cold, getTestScheduler } from 'jasmine-marbles';
+// #enddocregion import-marbles
+
+import { TwainService }   from './twain.service';
+import { TwainComponent } from './twain.component';
+
+
+describe('TwainComponent (marbles)', () => {
+  let component: TwainComponent;
+  let fixture: ComponentFixture<TwainComponent>;
+  let getQuoteSpy: jasmine.Spy;
+  let quoteEl: HTMLElement;
+  let testQuote: string;
+
+  // Helper function to get the error message element value
+  // An *ngIf keeps it out of the DOM until there is an error
+  const errorMessage = () => {
+    const el = fixture.nativeElement.querySelector('.error');
+    return el ? el.textContent : null;
+  };
+
+  beforeEach(() => {
+    // Create a fake TwainService object with a `getQuote()` spy
+    const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
+    getQuoteSpy = twainService.getQuote;
+
+    TestBed.configureTestingModule({
+      declarations: [ TwainComponent ],
+      providers:    [
+        { provide: TwainService, useValue: twainService }
+      ]
+    });
+
+    fixture = TestBed.createComponent(TwainComponent);
+    component = fixture.componentInstance;
+    quoteEl = fixture.nativeElement.querySelector('.twain');
+    testQuote = 'Test Quote';
+  });
+
+  // A synchronous test that simulates async behavior
+  // #docregion get-quote-test
+  it('should show quote after getQuote (marbles)', () => {
+    // observable test quote value and complete(), after delay
+    // #docregion test-quote-marbles
+    const q$ = cold('---x|', { x: testQuote });
+    // #enddocregion test-quote-marbles
+    getQuoteSpy.and.returnValue( q$ );
+
+    fixture.detectChanges(); // ngOnInit()
+    expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+    // #docregion test-scheduler-flush
+    getTestScheduler().flush(); // flush the observables
+    // #enddocregion test-scheduler-flush
+
+    fixture.detectChanges(); // update view
+
+    expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
+    expect(errorMessage()).toBeNull('should not show error');
+  });
+  // #enddocregion get-quote-test
+
+  // Still need fakeAsync() because of component's setTimeout()
+  // #docregion error-test
+  it('should display error when TwainService fails', fakeAsync(() => {
+    // observable error after delay
+    // #docregion error-marbles
+    const q$ = cold('---#|', null, new Error('TwainService test failure'));
+    // #enddocregion error-marbles
+    getQuoteSpy.and.returnValue( q$ );
+
+    fixture.detectChanges(); // ngOnInit()
+    expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+    getTestScheduler().flush(); // flush the observables
+    tick();                     // component shows error after a setTimeout()
+    fixture.detectChanges();    // update error message
+
+    expect(errorMessage()).toMatch(/test failure/, 'should display error');
+    expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+  }));
+  // #enddocregion error-test
+});
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.spec.ts b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
new file mode 100644
index 000000000000..60159d9ad6a2
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
@@ -0,0 +1,182 @@
+// #docplaster
+import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+
+import { asyncData, asyncError }  from '../../testing';
+
+import { of, throwError } from 'rxjs';
+
+import { last } from 'rxjs/operators';
+
+import { TwainService }   from './twain.service';
+import { TwainComponent } from './twain.component';
+
+describe('TwainComponent', () => {
+  let component: TwainComponent;
+  let fixture: ComponentFixture<TwainComponent>;
+  let getQuoteSpy: jasmine.Spy;
+  let quoteEl: HTMLElement;
+  let testQuote: string;
+
+  // Helper function to get the error message element value
+  // An *ngIf keeps it out of the DOM until there is an error
+  const errorMessage = () => {
+    const el = fixture.nativeElement.querySelector('.error');
+    return el ? el.textContent : null;
+  };
+
+  // #docregion setup
+  beforeEach(() => {
+    testQuote = 'Test Quote';
+
+    // #docregion spy
+    // Create a fake TwainService object with a `getQuote()` spy
+    const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
+    // Make the spy return a synchronous Observable with the test data
+    getQuoteSpy = twainService.getQuote.and.returnValue( of(testQuote) );
+    // #enddocregion spy
+
+    TestBed.configureTestingModule({
+      declarations: [ TwainComponent ],
+      providers:    [
+        { provide: TwainService, useValue: twainService }
+      ]
+    });
+
+    fixture = TestBed.createComponent(TwainComponent);
+    component = fixture.componentInstance;
+    quoteEl = fixture.nativeElement.querySelector('.twain');
+  });
+  // #enddocregion setup
+
+  describe('when test with synchronous observable', () => {
+    it('should not show quote before OnInit', () => {
+      expect(quoteEl.textContent).toBe('', 'nothing displayed');
+      expect(errorMessage()).toBeNull('should not show error element');
+      expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
+    });
+
+    // The quote would not be immediately available if the service were truly async.
+    // #docregion sync-test
+    it('should show quote after component initialized', () => {
+      fixture.detectChanges(); // onInit()
+
+      // sync spy result shows testQuote immediately after init
+      expect(quoteEl.textContent).toBe(testQuote);
+      expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
+    });
+    // #enddocregion sync-test
+
+
+    // The error would not be immediately available if the service were truly async.
+    // Use `fakeAsync` because the component error calls `setTimeout`
+    // #docregion error-test
+    it('should display error when TwainService fails', fakeAsync(() => {
+      // tell spy to return an error observable
+      getQuoteSpy.and.returnValue(
+        throwError('TwainService test failure'));
+
+      fixture.detectChanges(); // onInit()
+      // sync spy errors immediately after init
+
+      tick(); // flush the component's setTimeout()
+
+      fixture.detectChanges(); // update errorMessage within setTimeout()
+
+      expect(errorMessage()).toMatch(/test failure/, 'should display error');
+      expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+    }));
+    // #enddocregion error-test
+  });
+
+  describe('when test with asynchronous observable', () => {
+    beforeEach(() => {
+      // #docregion async-setup
+      // Simulate delayed observable values with the `asyncData()` helper
+      getQuoteSpy.and.returnValue(asyncData(testQuote));
+      // #enddocregion async-setup
+    });
+
+    it('should not show quote before OnInit', () => {
+      expect(quoteEl.textContent).toBe('', 'nothing displayed');
+      expect(errorMessage()).toBeNull('should not show error element');
+      expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
+    });
+
+    it('should still not show quote after component initialized', () => {
+      fixture.detectChanges();
+      // getQuote service is async => still has not returned with quote
+      // so should show the start value, '...'
+      expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+      expect(errorMessage()).toBeNull('should not show error');
+      expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
+    });
+
+    // #docregion fake-async-test
+    it('should show quote after getQuote (fakeAsync)', fakeAsync(() => {
+      fixture.detectChanges(); // ngOnInit()
+      expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+      tick(); // flush the observable to get the quote
+      fixture.detectChanges(); // update view
+
+      expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
+      expect(errorMessage()).toBeNull('should not show error');
+    }));
+    // #enddocregion fake-async-test
+
+    // #docregion async-test
+    it('should show quote after getQuote (async)', async(() => {
+      fixture.detectChanges(); // ngOnInit()
+      expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+      fixture.whenStable().then(() => { // wait for async getQuote
+        fixture.detectChanges();        // update view with quote
+        expect(quoteEl.textContent).toBe(testQuote);
+        expect(errorMessage()).toBeNull('should not show error');
+      });
+    }));
+    // #enddocregion async-test
+
+
+    // #docregion quote-done-test
+    it('should show last quote (quote done)', (done: DoneFn) => {
+      fixture.detectChanges();
+
+      component.quote.pipe( last() ).subscribe(() => {
+        fixture.detectChanges(); // update view with quote
+        expect(quoteEl.textContent).toBe(testQuote);
+        expect(errorMessage()).toBeNull('should not show error');
+        done();
+      });
+    });
+    // #enddocregion quote-done-test
+
+    // #docregion spy-done-test
+    it('should show quote after getQuote (spy done)', (done: DoneFn) => {
+      fixture.detectChanges();
+
+      // the spy's most recent call returns the observable with the test quote
+      getQuoteSpy.calls.mostRecent().returnValue.subscribe(() => {
+        fixture.detectChanges(); // update view with quote
+        expect(quoteEl.textContent).toBe(testQuote);
+        expect(errorMessage()).toBeNull('should not show error');
+        done();
+      });
+    });
+    // #enddocregion spy-done-test
+
+    // #docregion async-error-test
+    it('should display error when TwainService fails', fakeAsync(() => {
+      // tell spy to return an async error observable
+      getQuoteSpy.and.returnValue(asyncError<string>('TwainService test failure'));
+
+      fixture.detectChanges();
+      tick();                  // component shows error after a setTimeout()
+      fixture.detectChanges(); // update error message
+
+      expect(errorMessage()).toMatch(/test failure/, 'should display error');
+      expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+    }));
+    // #enddocregion async-error-test
+  });
+});
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.ts b/aio/content/examples/testing/src/app/twain/twain.component.ts
new file mode 100644
index 000000000000..152e17291173
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.ts
@@ -0,0 +1,48 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+import { catchError, startWith } from 'rxjs/operators';
+
+import { TwainService } from './twain.service';
+
+// #docregion component
+@Component({
+  selector: 'twain-quote',
+  // #docregion template
+  template: `
+    <p class="twain"><i>{{quote | async}}</i></p>
+    <button (click)="getQuote()">Next quote</button>
+    <p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>`,
+  // #enddocregion template
+  styles: [
+    `.twain { font-style: italic; } .error { color: red; }`
+  ]
+
+})
+export class TwainComponent implements OnInit {
+  errorMessage: string;
+  quote: Observable<string>;
+
+  constructor(private twainService: TwainService) {}
+
+  ngOnInit(): void {
+    this.getQuote();
+  }
+
+  // #docregion get-quote
+  getQuote() {
+    this.errorMessage = '';
+    this.quote = this.twainService.getQuote().pipe(
+      startWith('...'),
+      catchError( (err: any) => {
+        // Wait a turn because errorMessage already set once this turn
+        setTimeout(() => this.errorMessage = err.message || err.toString());
+        return of('...'); // reset message to placeholder
+      })
+    );
+    // #enddocregion get-quote
+  }
+
+}
+// #enddocregion component
diff --git a/aio/content/examples/testing/src/app/twain/twain.data.ts b/aio/content/examples/testing/src/app/twain/twain.data.ts
new file mode 100644
index 000000000000..a228ef5bbca2
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.data.ts
@@ -0,0 +1,15 @@
+import { Quote } from './quote';
+
+export const QUOTES: Quote[] = [
+  'Always do right. This will gratify some people and astonish the rest.',
+  'I have never let my schooling interfere with my education.',
+  'Don\'t go around saying the world owes you a living. The world owes you nothing. It was here first.',
+  'Whenever you find yourself on the side of the majority, it is time to pause and reflect.',
+  'If you tell the truth, you don\'t have to remember anything.',
+  'Clothes make the man. Naked people have little or no influence on society.',
+  'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.',
+  'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.',
+  'The man who does not read good books has no advantage over the man who cannot read them.',
+  'Get your facts first, and then you can distort them as much as you please.',
+]
+.map((q, i) => ({ id: i + 1, quote: q }));
diff --git a/aio/content/examples/testing/src/app/twain/twain.service.ts b/aio/content/examples/testing/src/app/twain/twain.service.ts
new file mode 100644
index 000000000000..f211a65a7da3
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.service.ts
@@ -0,0 +1,45 @@
+// Mark Twain Quote service gets quotes from server
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+import { Observable, of, throwError } from 'rxjs';
+import { concat, map, retryWhen, switchMap, take, tap } from 'rxjs/operators';
+
+import { Quote } from './quote';
+
+@Injectable()
+export class TwainService {
+  constructor(private http: HttpClient) { }
+
+  private nextId = 1;
+
+  getQuote(): Observable<string> {
+    return Observable.create(observer => observer.next(this.nextId++)).pipe(
+
+      // tap((id: number) => console.log(id)),
+      // tap((id: number) => { throw new Error('Simulated server error'); }),
+
+      switchMap((id: number) => this.http.get<Quote>(`api/quotes/${id}`)),
+      // tap((q : Quote) => console.log(q)),
+      map((q: Quote) => q.quote),
+
+      // `errors` is observable of http.get errors
+      retryWhen(errors => errors.pipe(
+        switchMap((error: HttpErrorResponse)  => {
+          if (error.status === 404) {
+            // Queried for quote that doesn't exist.
+            this.nextId = 1; // retry with quote id:1
+            return of(null); // signal OK to retry
+          }
+          // Some other HTTP error.
+          console.error(error);
+          return throwError('Cannot get Twain quotes from the server');
+        }),
+        take(2),
+        // If a second retry value, then didn't find id:1 and triggers the following error
+        concat(throwError('There are no Twain quotes')) // didn't find id:1
+      ))
+    );
+  }
+}
+
diff --git a/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
new file mode 100644
index 000000000000..25f3b28c7751
--- /dev/null
+++ b/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
@@ -0,0 +1,145 @@
+// #docplaster
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+
+import { UserService }      from '../model/user.service';
+import { WelcomeComponent } from './welcome.component';
+
+// #docregion mock-user-service
+class MockUserService {
+  isLoggedIn = true;
+  user = { name: 'Test User'};
+};
+// #enddocregion mock-user-service
+
+describe('WelcomeComponent (class only)', () => {
+  let comp: WelcomeComponent;
+  let userService: UserService;
+
+  // #docregion class-only-before-each
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      // provide the component-under-test and dependent service
+      providers: [
+        WelcomeComponent,
+        { provide: UserService, useClass: MockUserService }
+      ]
+    });
+    // inject both the component and the dependent service.
+    comp = TestBed.get(WelcomeComponent);
+    userService = TestBed.get(UserService);
+  });
+  // #enddocregion class-only-before-each
+
+  // #docregion class-only-tests
+  it('should not have welcome message after construction', () => {
+    expect(comp.welcome).toBeUndefined();
+  });
+
+  it('should welcome logged in user after Angular calls ngOnInit', () => {
+    comp.ngOnInit();
+    expect(comp.welcome).toContain(userService.user.name);
+  });
+
+  it('should ask user to log in if not logged in after ngOnInit', () => {
+    userService.isLoggedIn = false;
+    comp.ngOnInit();
+    expect(comp.welcome).not.toContain(userService.user.name);
+    expect(comp.welcome).toContain('log in');
+  });
+  // #enddocregion class-only-tests
+});
+
+describe('WelcomeComponent', () => {
+
+  let comp: WelcomeComponent;
+  let fixture: ComponentFixture<WelcomeComponent>;
+  let componentUserService: UserService; // the actually injected service
+  let userService: UserService; // the TestBed injected service
+  let el: HTMLElement; // the DOM element with the welcome message
+
+  // #docregion setup, user-service-stub
+    let userServiceStub: Partial<UserService>;
+
+  // #enddocregion user-service-stub
+  beforeEach(() => {
+    // stub UserService for test purposes
+    // #docregion user-service-stub
+    userServiceStub = {
+      isLoggedIn: true,
+      user: { name: 'Test User'}
+    };
+    // #enddocregion user-service-stub
+
+    // #docregion config-test-module
+    TestBed.configureTestingModule({
+       declarations: [ WelcomeComponent ],
+    // #enddocregion setup
+    // providers:    [ UserService ]  // NO! Don't provide the real service!
+                                      // Provide a test-double instead
+    // #docregion setup
+       providers:    [ {provide: UserService, useValue: userServiceStub } ]
+    });
+    // #enddocregion config-test-module
+
+    fixture = TestBed.createComponent(WelcomeComponent);
+    comp    = fixture.componentInstance;
+
+    // #enddocregion setup
+   // #docregion injected-service
+    // UserService actually injected into the component
+    userService = fixture.debugElement.injector.get(UserService);
+    // #enddocregion injected-service
+    componentUserService = userService;
+    // #docregion setup
+    // #docregion inject-from-testbed
+    // UserService from the root injector
+    userService = TestBed.get(UserService);
+    // #enddocregion inject-from-testbed
+
+    //  get the "welcome" element by CSS selector (e.g., by class name)
+    el = fixture.nativeElement.querySelector('.welcome');
+  });
+  // #enddocregion setup
+
+  // #docregion tests
+  it('should welcome the user', () => {
+    fixture.detectChanges();
+    const content = el.textContent;
+    expect(content).toContain('Welcome', '"Welcome ..."');
+    expect(content).toContain('Test User', 'expected name');
+  });
+
+  it('should welcome "Bubba"', () => {
+    userService.user.name = 'Bubba'; // welcome message hasn't been shown yet
+    fixture.detectChanges();
+    expect(el.textContent).toContain('Bubba');
+  });
+
+  it('should request login if not logged in', () => {
+    userService.isLoggedIn = false; // welcome message hasn't been shown yet
+    fixture.detectChanges();
+    const content = el.textContent;
+    expect(content).not.toContain('Welcome', 'not welcomed');
+    expect(content).toMatch(/log in/i, '"log in"');
+  });
+  // #enddocregion tests
+
+  it('should inject the component\'s UserService instance',
+    inject([UserService], (service: UserService) => {
+    expect(service).toBe(componentUserService);
+  }));
+
+  it('TestBed and Component UserService should be the same', () => {
+    expect(userService === componentUserService).toBe(true);
+  });
+
+  // #docregion stub-not-injected
+  it('stub object and injected UserService should not be the same', () => {
+    expect(userServiceStub === userService).toBe(false);
+
+    // Changing the stub object has no effect on the injected service
+    userServiceStub.isLoggedIn = false;
+    expect(userService.isLoggedIn).toBe(true);
+  });
+  // #enddocregion stub-not-injected
+});
diff --git a/aio/content/examples/testing/src/app/welcome/welcome.component.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.ts
new file mode 100644
index 000000000000..802f30cc4a12
--- /dev/null
+++ b/aio/content/examples/testing/src/app/welcome/welcome.component.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { UserService }       from '../model/user.service';
+
+// #docregion component
+@Component({
+  selector: 'app-welcome',
+  template: '<h3 class="welcome"><i>{{welcome}}</i></h3>'
+})
+// #docregion class
+export class WelcomeComponent  implements OnInit {
+  welcome: string;
+  constructor(private userService: UserService) { }
+
+  ngOnInit(): void {
+    this.welcome = this.userService.isLoggedIn ?
+      'Welcome, ' + this.userService.user.name : 'Please log in.';
+  }
+}
+// #enddocregion component, class
diff --git a/aio/content/examples/testing/src/expected.ts b/aio/content/examples/testing/src/expected.ts
new file mode 100644
index 000000000000..5339fa972595
--- /dev/null
+++ b/aio/content/examples/testing/src/expected.ts
@@ -0,0 +1 @@
+/* Ignore. Satisfies static analysis of router config in app.component.router.spec.ts */
diff --git a/aio/content/examples/testing/src/index-specs.html b/aio/content/examples/testing/src/index-specs.html
new file mode 100644
index 000000000000..ca132f6cd055
--- /dev/null
+++ b/aio/content/examples/testing/src/index-specs.html
@@ -0,0 +1,4 @@
+<!--
+  Intentionally empty placeholder for Stackblitz.
+  Do not need index.html in zip-download either as you should run tests with `npm test`
+-->
diff --git a/aio/content/examples/testing/src/index.html b/aio/content/examples/testing/src/index.html
new file mode 100644
index 000000000000..adc021fd82d2
--- /dev/null
+++ b/aio/content/examples/testing/src/index.html
@@ -0,0 +1,14 @@
+<!-- Run the test app-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/">
+    <title>App Under Test</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/aio/content/examples/testing/src/main-specs.ts b/aio/content/examples/testing/src/main-specs.ts
new file mode 100644
index 000000000000..5f2e9cac424c
--- /dev/null
+++ b/aio/content/examples/testing/src/main-specs.ts
@@ -0,0 +1,40 @@
+import './testing/global-jasmine';
+import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
+import 'jasmine-core/lib/jasmine-core/boot.js';
+
+declare var jasmine;
+
+import './polyfills';
+
+import 'zone.js/dist/zone-testing';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Spec files to include in the Stackblitz tests
+import './tests.sb.ts';
+
+//
+
+bootstrap();
+
+//
+
+function bootstrap () {
+  if (window['jasmineRef']) {
+    location.reload();
+    return;
+  } else {
+    window.onload(undefined);
+    window['jasmineRef'] = jasmine.getEnv();
+  }
+
+  // First, initialize the Angular testing environment.
+  getTestBed().initTestEnvironment(
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
+  );
+}
diff --git a/aio/content/examples/testing/src/main.ts b/aio/content/examples/testing/src/main.ts
new file mode 100644
index 000000000000..27d21e9dac66
--- /dev/null
+++ b/aio/content/examples/testing/src/main.ts
@@ -0,0 +1,12 @@
+// main app entry point
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/testing/src/test.css b/aio/content/examples/testing/src/test.css
new file mode 100644
index 000000000000..6010a5d9ba7a
--- /dev/null
+++ b/aio/content/examples/testing/src/test.css
@@ -0,0 +1 @@
+@import "~jasmine-core/lib/jasmine-core/jasmine.css"
diff --git a/aio/content/examples/testing/src/testing/activated-route-stub.ts b/aio/content/examples/testing/src/testing/activated-route-stub.ts
new file mode 100644
index 000000000000..7c646f3d19b6
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/activated-route-stub.ts
@@ -0,0 +1,29 @@
+// export for convenience.
+export { ActivatedRoute } from '@angular/router';
+
+// #docregion activated-route-stub
+import { convertToParamMap, ParamMap, Params } from '@angular/router';
+import { ReplaySubject } from 'rxjs';
+
+/**
+ * An ActivateRoute test double with a `paramMap` observable.
+ * Use the `setParamMap()` method to add the next `paramMap` value.
+ */
+export class ActivatedRouteStub {
+  // Use a ReplaySubject to share previous values with subscribers
+  // and pump new values into the `paramMap` observable
+  private subject = new ReplaySubject<ParamMap>();
+
+  constructor(initialParams?: Params) {
+    this.setParamMap(initialParams);
+  }
+
+  /** The mock paramMap observable */
+  readonly paramMap = this.subject.asObservable();
+
+  /** Set the paramMap observables's next value */
+  setParamMap(params?: Params) {
+    this.subject.next(convertToParamMap(params));
+  };
+}
+// #enddocregion activated-route-stub
diff --git a/aio/content/examples/testing/src/testing/async-observable-helpers.ts b/aio/content/examples/testing/src/testing/async-observable-helpers.ts
new file mode 100644
index 000000000000..efcbdb19d681
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/async-observable-helpers.ts
@@ -0,0 +1,29 @@
+/*
+* Mock async observables that return asynchronously.
+* The observable either emits once and completes or errors.
+*
+* Must call `tick()` when test with `fakeAsync()`.
+*
+* THE FOLLOWING DON'T WORK
+* Using `of().delay()` triggers TestBed errors;
+* see https://github.com/angular/angular/issues/10127 .
+*
+* Using `asap` scheduler - as in `of(value, asap)` - doesn't work either.
+*/
+import { defer } from 'rxjs';
+
+// #docregion async-data
+/** Create async observable that emits-once and completes
+ *  after a JS engine turn */
+export function asyncData<T>(data: T) {
+  return defer(() => Promise.resolve(data));
+}
+// #enddocregion async-data
+
+// #docregion async-error
+/** Create async observable error that errors
+ *  after a JS engine turn */
+export function asyncError<T>(errorObject: any) {
+  return defer(() => Promise.reject(errorObject));
+}
+// #enddocregion async-error
diff --git a/aio/content/examples/testing/src/testing/global-jasmine.ts b/aio/content/examples/testing/src/testing/global-jasmine.ts
new file mode 100644
index 000000000000..560ff97d66d1
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/global-jasmine.ts
@@ -0,0 +1,3 @@
+import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
+
+window['jasmineRequire'] = jasmineRequire;
diff --git a/aio/content/examples/testing/src/testing/index.ts b/aio/content/examples/testing/src/testing/index.ts
new file mode 100644
index 000000000000..1fddaf8c4db9
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/index.ts
@@ -0,0 +1,45 @@
+import { DebugElement }           from '@angular/core';
+import { tick, ComponentFixture } from '@angular/core/testing';
+
+export * from './async-observable-helpers';
+export * from './activated-route-stub';
+export * from './jasmine-matchers';
+export * from './router-link-directive-stub';
+
+///// Short utilities /////
+
+/** Wait a tick, then detect changes */
+export function advance(f: ComponentFixture<any>): void {
+  tick();
+  f.detectChanges();
+}
+
+/**
+ * Create custom DOM event the old fashioned way
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent
+ * Although officially deprecated, some browsers (phantom) don't accept the preferred "new Event(eventName)"
+ */
+export function newEvent(eventName: string, bubbles = false, cancelable = false) {
+  let evt = document.createEvent('CustomEvent');  // MUST be 'CustomEvent'
+  evt.initCustomEvent(eventName, bubbles, cancelable, null);
+  return evt;
+}
+
+// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+// #docregion click-event
+/** Button events to pass to `DebugElement.triggerEventHandler` for RouterLink event handler */
+export const ButtonClickEvents = {
+   left:  { button: 0 },
+   right: { button: 2 }
+};
+
+/** Simulate element click. Defaults to mouse left-button click event. */
+export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void {
+  if (el instanceof HTMLElement) {
+    el.click();
+  } else {
+    el.triggerEventHandler('click', eventObj);
+  }
+}
+// #enddocregion click-event
diff --git a/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts b/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts
new file mode 100644
index 000000000000..cafce642f9ae
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts
@@ -0,0 +1,5 @@
+declare namespace jasmine {
+  interface Matchers<T> {
+    toHaveText(actual: any, expectationFailOutput?: any): jasmine.CustomMatcher;
+  }
+}
diff --git a/aio/content/examples/testing/src/testing/jasmine-matchers.ts b/aio/content/examples/testing/src/testing/jasmine-matchers.ts
new file mode 100644
index 000000000000..4cab02e148b5
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/jasmine-matchers.ts
@@ -0,0 +1,45 @@
+/// <reference path="./jasmine-matchers.d.ts" />
+
+////  Jasmine Custom Matchers ////
+// Be sure to extend jasmine-matchers.d.ts when adding matchers
+
+export function addMatchers(): void {
+  jasmine.addMatchers({
+    toHaveText: toHaveText
+  });
+}
+
+function toHaveText(): jasmine.CustomMatcher {
+  return {
+    compare: function (actual: any, expectedText: string, expectationFailOutput?: any): jasmine.CustomMatcherResult {
+      const actualText = elementText(actual);
+      const pass = actualText.indexOf(expectedText) > -1;
+      const message = pass ? '' : composeMessage();
+      return { pass, message };
+
+      function composeMessage () {
+        const a = (actualText.length < 100 ? actualText : actualText.substr(0, 100) + '...');
+        const efo = expectationFailOutput ? ` '${expectationFailOutput}'` : '';
+        return `Expected element to have text content '${expectedText}' instead of '${a}'${efo}`;
+      }
+    }
+  };
+}
+
+function elementText(n: any): string {
+  if (n instanceof Array) {
+    return n.map(elementText).join('');
+  }
+
+  if (n.nodeType === Node.COMMENT_NODE) {
+    return '';
+  }
+
+  if (n.nodeType === Node.ELEMENT_NODE && n.hasChildNodes()) {
+    return elementText(Array.prototype.slice.call(n.childNodes));
+  }
+
+  if (n.nativeElement) { n = n.nativeElement; }
+
+  return n.textContent;
+}
diff --git a/aio/content/examples/testing/src/testing/router-link-directive-stub.ts b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts
new file mode 100644
index 000000000000..761529d72634
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts
@@ -0,0 +1,30 @@
+import { Directive, Input } from '@angular/core';
+
+// export for convenience.
+export { RouterLink} from '@angular/router';
+
+/* tslint:disable:directive-class-suffix */
+// #docregion router-link
+@Directive({
+  selector: '[routerLink]',
+  host: { '(click)': 'onClick()' }
+})
+export class RouterLinkDirectiveStub {
+  @Input('routerLink') linkParams: any;
+  navigatedTo: any = null;
+
+  onClick() {
+    this.navigatedTo = this.linkParams;
+  }
+}
+// #enddocregion router-link
+
+/// Dummy module to satisfy Angular Language service. Never used.
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  declarations: [
+    RouterLinkDirectiveStub
+  ]
+})
+export class RouterStubsModule {}
diff --git a/aio/content/examples/testing/src/tests.html b/aio/content/examples/testing/src/tests.html
new file mode 100644
index 000000000000..0125f8850045
--- /dev/null
+++ b/aio/content/examples/testing/src/tests.html
@@ -0,0 +1,59 @@
+<!-- Run application specs in a browser -->
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+<head>
+  <base href="/">
+  <title>Sample App Specs</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+
+</head>
+<body>
+  <!-- Polyfills -->
+  <script src="node_modules/core-js/client/shim.min.js"></script>
+
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+
+  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="node_modules/zone.js/dist/zone-testing.js"></script>
+
+  <script>
+    var __spec_files__ = [
+      'app/about/about.component.spec',
+      'app/app-initial.component.spec',
+      'app/app.component.router.spec',
+      'app/app.component.spec',
+      'app/banner/banner-initial.component.spec',
+      'app/banner/banner.component.spec',
+      'app/banner/banner.component.detect-changes.spec',
+      'app/banner/banner-external.component.spec',
+      'app/dashboard/dashboard-hero.component.spec',
+      'app/dashboard/dashboard.component.no-testbed.spec',
+      'app/dashboard/dashboard.component.spec',
+      'app/hero/hero-detail.component.no-testbed.spec',
+      'app/hero/hero-detail.component.spec',
+      'app/hero/hero-list.component.spec',
+      'app/model/hero.service.spec',
+      'app/model/http-hero.service.spec',
+      'app/shared/highlight.directive.spec',
+      'app/shared/title-case.pipe.spec',
+      'app/twain/twain.component.spec',
+      // 'app/twain/twain.component.marbles.spec',
+      'app/welcome/welcome.component.spec',
+
+      'app/demo/async-helper.spec',
+      'app/demo/demo.spec',
+      'app/demo/demo.testbed.spec',
+    ];
+  </script>
+  <script src="browser-test-shim.js"></script>
+</body>
+
+</html>
diff --git a/aio/content/examples/testing/src/tests.sb.ts b/aio/content/examples/testing/src/tests.sb.ts
new file mode 100644
index 000000000000..c255cca180e9
--- /dev/null
+++ b/aio/content/examples/testing/src/tests.sb.ts
@@ -0,0 +1,26 @@
+// Import spec files individually for Stackblitz
+import './app/about/about.component.spec.ts';
+import './app/app-initial.component.spec.ts';
+import './app/app.component.router.spec.ts';
+import './app/app.component.spec.ts';
+import './app/banner/banner-initial.component.spec.ts';
+import './app/banner/banner.component.spec.ts';
+import './app/banner/banner.component.detect-changes.spec.ts';
+import './app/banner/banner-external.component.spec.ts';
+import './app/dashboard/dashboard-hero.component.spec.ts';
+import './app/dashboard/dashboard.component.no-testbed.spec.ts';
+import './app/dashboard/dashboard.component.spec.ts';
+import './app/demo/async-helper.spec.ts';
+import './app/demo/demo.spec.ts';
+import './app/demo/demo.testbed.spec.ts';
+import './app/hero/hero-detail.component.no-testbed.spec.ts';
+import './app/hero/hero-detail.component.spec.ts';
+import './app/hero/hero-list.component.spec.ts';
+import './app/model/hero.service.spec.ts';
+import './app/model/http-hero.service.spec.ts';
+import './app/model/testing/http-client.spec.ts';
+import './app/shared/highlight.directive.spec.ts';
+import './app/shared/title-case.pipe.spec.ts';
+import './app/twain/twain.component.spec.ts';
+import './app/twain/twain.component.marbles.spec.ts';
+import './app/welcome/welcome.component.spec.ts';
diff --git a/aio/content/examples/testing/stackblitz.json b/aio/content/examples/testing/stackblitz.json
new file mode 100644
index 000000000000..d05e3dbb1ae8
--- /dev/null
+++ b/aio/content/examples/testing/stackblitz.json
@@ -0,0 +1,19 @@
+{
+  "description": "Heroes Test App",
+  "files":[
+    "src/styles.css",
+
+    "src/app/**/*.css",
+    "src/app/**/*.html",
+    "src/app/**/*.ts",
+
+    "!src/app/bag/*.*",
+
+    "!src/test.ts",
+
+    "src/test.css",
+    "src/main.ts",
+    "src/index.html"
+  ],
+  "tags": ["testing"]
+}
diff --git a/aio/content/examples/toh-pt0/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt0/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..fa35fd0f059c
--- /dev/null
+++ b/aio/content/examples/toh-pt0/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Tour of Heroes', () => {
+  beforeEach(() => {
+    return browser.get('/');
+  });
+
+  it('should display "Tour of Heroes"', () => {
+    let title = element(by.css('app-root h1')).getText();
+    expect(title).toEqual('Tour of Heroes');
+  });
+});
diff --git a/aio/content/examples/toh-pt0/example-config.json b/aio/content/examples/toh-pt0/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt0/src/app/app.component.css b/aio/content/examples/toh-pt0/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt0/src/app/app.component.html b/aio/content/examples/toh-pt0/src/app/app.component.html
new file mode 100644
index 000000000000..6213adcb47fc
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/app/app.component.html
@@ -0,0 +1 @@
+<h1>{{title}}</h1>
diff --git a/aio/content/examples/toh-pt0/src/app/app.component.spec.ts b/aio/content/examples/toh-pt0/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..9510495a2d54
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/app/app.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    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('Welcome to app!');
+  }));
+});
diff --git a/aio/content/examples/toh-pt0/src/app/app.component.ts b/aio/content/examples/toh-pt0/src/app/app.component.ts
new file mode 100644
index 000000000000..8391a7e6451d
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/app/app.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+// #docregion set-title
+  title = 'Tour of Heroes';
+// #enddocregion set-title
+}
diff --git a/aio/content/examples/toh-pt0/src/app/app.module.ts b/aio/content/examples/toh-pt0/src/app/app.module.ts
new file mode 100644
index 000000000000..f65716351aa5
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/app/app.module.ts
@@ -0,0 +1,16 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/aio/content/examples/toh-pt0/src/index.html b/aio/content/examples/toh-pt0/src/index.html
new file mode 100644
index 000000000000..1c4106381f31
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/toh-pt0/src/main.ts b/aio/content/examples/toh-pt0/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/toh-pt0/src/styles.1.css b/aio/content/examples/toh-pt0/src/styles.1.css
new file mode 100644
index 000000000000..7c4c2fe4c6dc
--- /dev/null
+++ b/aio/content/examples/toh-pt0/src/styles.1.css
@@ -0,0 +1,22 @@
+/* Application-wide 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-pt0/stackblitz.json b/aio/content/examples/toh-pt0/stackblitz.json
new file mode 100644
index 000000000000..c2cf48171f45
--- /dev/null
+++ b/aio/content/examples/toh-pt0/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Tour of Heroes: Part 0",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes"]
+}
diff --git a/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..c8d2214f2bd0
--- /dev/null
+++ b/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,70 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
+
+const expectedH1 = 'Tour of Heroes';
+const expectedTitle = `${expectedH1}`;
+
+class Hero {
+  id: number;
+  name: string;
+
+  // Factory method
+  // Get hero id and name from the given detail element.
+  static async fromDetail(detail: ElementFinder): Promise<Hero> {
+    // Get hero id from the first <div>
+    let _id = await detail.all(by.css('div')).first().getText();
+    // Get name from the h2
+    let _name = await detail.element(by.css('h2')).getText();
+    return {
+      id: +_id.substr(_id.indexOf(' ') + 1),
+      name: _name.substr(0, _name.lastIndexOf(' '))
+    };
+  }
+}
+
+const nameSuffix = 'X';
+function addToHeroName(text: string): promise.Promise<void> {
+  let input = element(by.css('input'));
+  return input.sendKeys(text);
+}
+
+describe('Tutorial part 1', () => {
+
+  const expectedHero = { id: 1, name: 'Windstorm' };
+
+  beforeAll(() => browser.get(''));
+
+  it(`has title '${expectedTitle}'`, () => {
+    expect(browser.getTitle()).toEqual(expectedTitle);
+  });
+
+  it(`has h1 '${expectedH1}'`, () => {
+    let hText = element(by.css('h1')).getText();
+    expect(hText).toEqual(expectedH1, 'h1');
+  });
+
+  it(`shows initial hero details`, async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(expectedHero.id);
+    expect(hero.name).toEqual(expectedHero.name.toUpperCase());
+  });
+
+  it(`shows updated hero name`, async () => {
+    addToHeroName(nameSuffix);
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    let newName = expectedHero.name + nameSuffix;
+    expect(hero.id).toEqual(expectedHero.id);
+    expect(hero.name).toEqual(newName.toUpperCase());
+  });
+
+});
+
+function getPageElts() {
+  return {
+    heroDetail: element(by.css('app-root'))
+  };
+}
diff --git a/aio/content/examples/toh-pt1/example-config.json b/aio/content/examples/toh-pt1/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt1/src/app/app.component.css b/aio/content/examples/toh-pt1/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt1/src/app/app.component.html b/aio/content/examples/toh-pt1/src/app/app.component.html
new file mode 100644
index 000000000000..ee3d478e16e6
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/app.component.html
@@ -0,0 +1,2 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
diff --git a/aio/content/examples/toh-pt1/src/app/app.component.ts b/aio/content/examples/toh-pt1/src/app/app.component.ts
new file mode 100644
index 000000000000..c41599e92ae6
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
diff --git a/aio/content/examples/toh-pt1/src/app/app.module.ts b/aio/content/examples/toh-pt1/src/app/app.module.ts
new file mode 100644
index 000000000000..1c9d0ac4d368
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/app.module.ts
@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+// #docregion formsmodule-js-import
+import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
+// #enddocregion formsmodule-js-import
+
+import { AppComponent } from './app.component';
+// #docregion heroes-import
+import { HeroesComponent } from './heroes/heroes.component';
+// #enddocregion heroes-import
+
+@NgModule({
+  // #docregion declarations
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  // #enddocregion declarations
+  // #docregion ng-imports
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  // #enddocregion ng-imports
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/aio/content/examples/toh-pt1/src/app/hero.ts b/aio/content/examples/toh-pt1/src/app/hero.ts
new file mode 100644
index 000000000000..e3eac516daa5
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
new file mode 100644
index 000000000000..611f67251ca2
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
@@ -0,0 +1,17 @@
+<!-- #docregion show-hero-1 -->
+{{hero}}
+<!-- #enddocregion show-hero-1 -->
+
+<!-- #docregion show-hero-2 -->
+<h2>{{hero.name}} Details</h2>
+<div><span>id: </span>{{hero.id}}</div>
+<div><span>name: </span>{{hero.name}}</div>
+<!-- #enddocregion show-hero-2 -->
+
+<!-- #docregion name-input -->
+<div>
+  <label>name:
+    <input [(ngModel)]="hero.name" placeholder="name">
+  </label>
+</div>
+<!-- #enddocregion name-input -->
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..fb2b96b5c6d8
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
@@ -0,0 +1,10 @@
+<!-- #docregion -->
+<!-- #docregion pipe -->
+<h2>{{hero.name | uppercase}} Details</h2>
+<!-- #enddocregion pipe -->
+<div><span>id: </span>{{hero.id}}</div>
+<div>
+  <label>name:
+    <input [(ngModel)]="hero.name" placeholder="name">
+  </label>
+</div>
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 000000000000..9c3b1c4d9f77
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..06e5c69f51fb
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts
@@ -0,0 +1,35 @@
+// #docplaster
+// #docregion, v1
+import { Component, OnInit } from '@angular/core';
+// #enddocregion v1
+import { Hero } from '../hero';
+// #docregion v1
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  // #enddocregion, v1
+  /*
+  // #docregion add-hero
+  hero = 'Windstorm';
+  // #enddocregion add-hero
+  */
+  // #docregion
+  // #docregion hero-property-1
+  hero: Hero = {
+    id: 1,
+    name: 'Windstorm'
+  };
+  // #enddocregion hero-property-1
+  // #docregion v1
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
+// #enddocregion, v1
diff --git a/aio/content/examples/toh-pt1/src/index.html b/aio/content/examples/toh-pt1/src/index.html
new file mode 100644
index 000000000000..1c4106381f31
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/toh-pt1/src/main.ts b/aio/content/examples/toh-pt1/src/main.ts
new file mode 100644
index 000000000000..6fd45e7d1e7d
--- /dev/null
+++ b/aio/content/examples/toh-pt1/src/main.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion
diff --git a/aio/content/examples/toh-pt1/stackblitz.json b/aio/content/examples/toh-pt1/stackblitz.json
new file mode 100644
index 000000000000..880b28fae60c
--- /dev/null
+++ b/aio/content/examples/toh-pt1/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "Tour of Heroes: Part 1",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*",
+    "!**/dummy.module.ts"
+  ],
+  "tags": ["tutorial", "tour", "heroes"]
+}
diff --git a/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..ea2c445804bc
--- /dev/null
+++ b/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,133 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
+
+const expectedH1 = 'Tour of Heroes';
+const expectedTitle = `${expectedH1}`;
+const expectedH2 = 'My Heroes';
+const targetHero = { id: 16, name: 'RubberMan' };
+const nameSuffix = 'X';
+
+class Hero {
+    id: number;
+    name: string;
+
+    // Factory methods
+
+    // Get hero from s formatted as '<id> <name>'.
+    static fromString(s: string): Hero {
+        return {
+            id: +s.substr(0, s.indexOf(' ')),
+            name: s.substr(s.indexOf(' ') + 1),
+        };
+    }
+
+    // Get hero id and name from the given detail element.
+    static async fromDetail(detail: ElementFinder): Promise<Hero> {
+        // Get hero id from the first <div>
+        let _id = await detail.all(by.css('div')).first().getText();
+        // Get name from the h2
+        let _name = await detail.element(by.css('h2')).getText();
+        return {
+            id: +_id.substr(_id.indexOf(' ') + 1),
+            name: _name.substr(0, _name.lastIndexOf(' '))
+        };
+    }
+}
+
+describe('Tutorial part 2', () => {
+  beforeAll(() => browser.get(''));
+  describe('Initial page', initialPageTests);
+  describe('Select hero', selectHeroTests);
+  describe('Update hero', updateHeroTests);
+});
+
+function initialPageTests() {
+  it(`has title '${expectedTitle}'`, () => {
+      expect(browser.getTitle()).toEqual(expectedTitle);
+  });
+
+  it(`has h1 '${expectedH1}'`, () => {
+      expectHeading(1, expectedH1);
+  });
+
+  it(`has h2 '${expectedH2}'`, () => {
+    expectHeading(2, expectedH2);
+  });
+
+  it('has the right number of heroes', () => {
+    let page = getPageElts();
+    expect(page.heroes.count()).toEqual(10);
+  });
+
+  it('has no selected hero and no hero details', function () {
+    let page = getPageElts();
+    expect(page.selected.isPresent()).toBeFalsy('selected hero');
+    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+  });
+}
+
+function selectHeroTests() {
+  it(`selects ${targetHero.name} from hero list`, function () {
+    let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
+    hero.click();
+    // Nothing specific to expect other than lack of exceptions.
+  });
+
+  it(`has selected ${targetHero.name}`, function () {
+    let page = getPageElts();
+    let expectedText = `${targetHero.id} ${targetHero.name}`;
+    expect(page.selected.getText()).toBe(expectedText);
+  });
+
+  it('shows selected hero details', async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
+  });
+}
+
+function updateHeroTests() {
+  it(`can update hero name`, () => {
+    addToHeroName(nameSuffix);
+    // Nothing specific to expect other than lack of exceptions.
+  });
+
+  it(`shows updated hero name in details`, async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName.toUpperCase());
+  });
+
+  it(`shows updated hero name in list`, async () => {
+    let page = getPageElts();
+    let hero = Hero.fromString(await page.selected.getText());
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName);
+  });
+
+}
+
+function addToHeroName(text: string): promise.Promise<void> {
+  let input = element(by.css('input'));
+  return input.sendKeys(text);
+}
+
+function expectHeading(hLevel: number, expectedText: string): void {
+    let hTag = `h${hLevel}`;
+    let hText = element(by.css(hTag)).getText();
+    expect(hText).toEqual(expectedText, hTag);
+};
+
+function getPageElts() {
+  return {
+    heroes: element.all(by.css('app-root li')),
+    selected: element(by.css('app-root li.selected')),
+    heroDetail: element(by.css('app-root > div, app-root > app-heroes > div'))
+  };
+}
diff --git a/aio/content/examples/toh-pt2/example-config.json b/aio/content/examples/toh-pt2/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt2/src/app/app.component.css b/aio/content/examples/toh-pt2/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt2/src/app/app.component.html b/aio/content/examples/toh-pt2/src/app/app.component.html
new file mode 100644
index 000000000000..ee3d478e16e6
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/app.component.html
@@ -0,0 +1,2 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
diff --git a/aio/content/examples/toh-pt2/src/app/app.component.ts b/aio/content/examples/toh-pt2/src/app/app.component.ts
new file mode 100644
index 000000000000..c41599e92ae6
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
diff --git a/aio/content/examples/toh-pt2/src/app/app.module.ts b/aio/content/examples/toh-pt2/src/app/app.module.ts
new file mode 100644
index 000000000000..bc5d60226cf2
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/app.module.ts
@@ -0,0 +1,20 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/aio/content/examples/toh-pt2/src/app/hero.ts b/aio/content/examples/toh-pt2/src/app/hero.ts
new file mode 100644
index 000000000000..e3eac516daa5
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
new file mode 100644
index 000000000000..fe140484f543
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
@@ -0,0 +1,20 @@
+<!-- #docregion list -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li>
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+<!-- #enddocregion list -->
+
+<!-- #docregion li -->
+  <li *ngFor="let hero of heroes">
+<!-- #enddocregion li -->
+
+<!-- #docregion selectedHero-click -->
+<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
+<!-- #enddocregion selectedHero-click -->
+
+<!-- #docregion class-selected -->
+[class.selected]="hero === selectedHero"
+<!-- #enddocregion class-selected -->
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
new file mode 100644
index 000000000000..e956eab987c2
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
@@ -0,0 +1,48 @@
+/* HeroesComponent's private CSS styles */
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.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;
+}
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..ff9ba0206d44
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
@@ -0,0 +1,27 @@
+<!-- #docregion -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <!-- #docregion li -->
+  <li *ngFor="let hero of heroes"
+    [class.selected]="hero === selectedHero"
+    (click)="onSelect(hero)">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+  <!-- #enddocregion li -->
+</ul>
+
+<!-- #docregion ng-if -->
+<div *ngIf="selectedHero">
+
+  <!-- #docregion selectedHero-details -->
+  <h2>{{selectedHero.name | uppercase}} Details</h2>
+  <div><span>id: </span>{{selectedHero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="selectedHero.name" placeholder="name">
+    </label>
+  </div>
+  <!-- #enddocregion selectedHero-details -->
+
+</div>
+<!-- #enddocregion ng-if -->
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 000000000000..9c3b1c4d9f77
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..bee585658616
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+// #docregion import-heroes
+import { HEROES } from '../mock-heroes';
+// #enddocregion import-heroes
+
+// #docplaster
+// #docregion metadata
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+// #enddocregion metadata
+export class HeroesComponent implements OnInit {
+
+  // #docregion heroes
+  heroes = HEROES;
+  // #enddocregion heroes
+
+  // #docregion on-select
+  selectedHero: Hero;
+
+  // #enddocregion on-select
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  // #docregion on-select
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+  // #enddocregion on-select
+}
diff --git a/aio/content/examples/toh-pt2/src/app/mock-heroes.ts b/aio/content/examples/toh-pt2/src/app/mock-heroes.ts
new file mode 100644
index 000000000000..e84c2fd2b095
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/app/mock-heroes.ts
@@ -0,0 +1,14 @@
+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-pt2/src/index.html b/aio/content/examples/toh-pt2/src/index.html
new file mode 100644
index 000000000000..1c4106381f31
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/toh-pt2/src/main.ts b/aio/content/examples/toh-pt2/src/main.ts
new file mode 100644
index 000000000000..6fd45e7d1e7d
--- /dev/null
+++ b/aio/content/examples/toh-pt2/src/main.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion
diff --git a/aio/content/examples/toh-pt2/stackblitz.json b/aio/content/examples/toh-pt2/stackblitz.json
new file mode 100644
index 000000000000..8f3cefdaeb65
--- /dev/null
+++ b/aio/content/examples/toh-pt2/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Tour of Heroes: Part 2",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes"]
+}
diff --git a/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..5c1f4028db3d
--- /dev/null
+++ b/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,133 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
+
+const expectedH1 = 'Tour of Heroes';
+const expectedTitle = `${expectedH1}`;
+const expectedH2 = 'My Heroes';
+const targetHero = { id: 16, name: 'RubberMan' };
+const nameSuffix = 'X';
+
+class Hero {
+    id: number;
+    name: string;
+
+    // Factory methods
+
+    // Get hero from s formatted as '<id> <name>'.
+    static fromString(s: string): Hero {
+        return {
+            id: +s.substr(0, s.indexOf(' ')),
+            name: s.substr(s.indexOf(' ') + 1),
+        };
+    }
+
+    // Get hero id and name from the given detail element.
+    static async fromDetail(detail: ElementFinder): Promise<Hero> {
+        // Get hero id from the first <div>
+        let _id = await detail.all(by.css('div')).first().getText();
+        // Get name from the h2
+        let _name = await detail.element(by.css('h2')).getText();
+        return {
+            id: +_id.substr(_id.indexOf(' ') + 1),
+            name: _name.substr(0, _name.lastIndexOf(' '))
+        };
+    }
+}
+
+describe('Tutorial part 3', () => {
+  beforeAll(() => browser.get(''));
+  describe('Initial page', initialPageTests);
+  describe('Select hero', selectHeroTests);
+  describe('Update hero', updateHeroTests);
+});
+
+function initialPageTests() {
+  it(`has title '${expectedTitle}'`, () => {
+      expect(browser.getTitle()).toEqual(expectedTitle);
+  });
+
+  it(`has h1 '${expectedH1}'`, () => {
+      expectHeading(1, expectedH1);
+  });
+
+  it(`has h2 '${expectedH2}'`, () => {
+    expectHeading(2, expectedH2);
+  });
+
+  it('has the right number of heroes', () => {
+    let page = getPageElts();
+    expect(page.heroes.count()).toEqual(10);
+  });
+
+  it('has no selected hero and no hero details', function () {
+    let page = getPageElts();
+    expect(page.selected.isPresent()).toBeFalsy('selected hero');
+    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+  });
+}
+
+function selectHeroTests() {
+  it(`selects ${targetHero.name} from hero list`, function () {
+    let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
+    hero.click();
+    // Nothing specific to expect other than lack of exceptions.
+  });
+
+  it(`has selected ${targetHero.name}`, function () {
+    let page = getPageElts();
+    let expectedText = `${targetHero.id} ${targetHero.name}`;
+    expect(page.selected.getText()).toBe(expectedText);
+  });
+
+  it('shows selected hero details', async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
+  });
+}
+
+function updateHeroTests() {
+  it(`can update hero name`, () => {
+    addToHeroName(nameSuffix);
+    // Nothing specific to expect other than lack of exceptions.
+  });
+
+  it(`shows updated hero name in details`, async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName.toUpperCase());
+  });
+
+  it(`shows updated hero name in list`, async () => {
+    let page = getPageElts();
+    let hero = Hero.fromString(await page.selected.getText());
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName);
+  });
+
+}
+
+function addToHeroName(text: string): promise.Promise<void> {
+  let input = element(by.css('input'));
+  return input.sendKeys(text);
+}
+
+function expectHeading(hLevel: number, expectedText: string): void {
+    let hTag = `h${hLevel}`;
+    let hText = element(by.css(hTag)).getText();
+    expect(hText).toEqual(expectedText, hTag);
+};
+
+function getPageElts() {
+  return {
+    heroes: element.all(by.css('app-root li')),
+    selected: element(by.css('app-root li.selected')),
+    heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
+  };
+}
diff --git a/aio/content/examples/toh-pt3/example-config.json b/aio/content/examples/toh-pt3/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt3/src/app/app.component.css b/aio/content/examples/toh-pt3/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt3/src/app/app.component.html b/aio/content/examples/toh-pt3/src/app/app.component.html
new file mode 100644
index 000000000000..ee3d478e16e6
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/app.component.html
@@ -0,0 +1,2 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
diff --git a/aio/content/examples/toh-pt3/src/app/app.component.ts b/aio/content/examples/toh-pt3/src/app/app.component.ts
new file mode 100644
index 000000000000..c41599e92ae6
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
diff --git a/aio/content/examples/toh-pt3/src/app/app.module.ts b/aio/content/examples/toh-pt3/src/app/app.module.ts
new file mode 100644
index 000000000000..39fe27d3cf14
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/app.module.ts
@@ -0,0 +1,22 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HeroesComponent,
+    HeroDetailComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 000000000000..a495e1a84b77
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,11 @@
+<div *ngIf="hero">
+
+  <h2>{{hero.name | uppercase}} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </label>
+  </div>
+
+</div>
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 000000000000..973c5b2b5a72
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,24 @@
+// #docregion
+// #docregion import-input
+import { Component, OnInit, Input } from '@angular/core';
+// #enddocregion import-input
+// #docregion import-hero
+import { Hero } from '../hero';
+// #enddocregion import-hero
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: ['./hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+  // #docregion input-hero
+  @Input() hero: Hero;
+  // #enddocregion input-hero
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/toh-pt3/src/app/hero.ts b/aio/content/examples/toh-pt3/src/app/hero.ts
new file mode 100644
index 000000000000..8f7cc205c88f
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/hero.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
new file mode 100644
index 000000000000..e956eab987c2
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
@@ -0,0 +1,48 @@
+/* HeroesComponent's private CSS styles */
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.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;
+}
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..2a78dbaa3368
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
@@ -0,0 +1,13 @@
+<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>
+
+<!-- #docregion hero-detail-binding -->
+<app-hero-detail [hero]="selectedHero"></app-hero-detail>
+<!-- #enddocregion hero-detail-binding -->
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 000000000000..9c3b1c4d9f77
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..35462026c7ce
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+import { HEROES } from '../mock-heroes';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+
+  heroes = HEROES;
+
+  selectedHero: Hero;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+}
+
diff --git a/aio/content/examples/toh-pt3/src/app/mock-heroes.ts b/aio/content/examples/toh-pt3/src/app/mock-heroes.ts
new file mode 100644
index 000000000000..e84c2fd2b095
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/app/mock-heroes.ts
@@ -0,0 +1,14 @@
+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-pt3/src/index.html b/aio/content/examples/toh-pt3/src/index.html
new file mode 100644
index 000000000000..1c4106381f31
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/toh-pt3/src/main.ts b/aio/content/examples/toh-pt3/src/main.ts
new file mode 100644
index 000000000000..6fd45e7d1e7d
--- /dev/null
+++ b/aio/content/examples/toh-pt3/src/main.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion
diff --git a/aio/content/examples/toh-pt3/stackblitz.json b/aio/content/examples/toh-pt3/stackblitz.json
new file mode 100644
index 000000000000..c4ef78dc9f12
--- /dev/null
+++ b/aio/content/examples/toh-pt3/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Tour of Heroes: Part 3",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes"]
+}
diff --git a/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..bd71754bbb15
--- /dev/null
+++ b/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,133 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
+
+const expectedH1 = 'Tour of Heroes';
+const expectedTitle = `${expectedH1}`;
+const expectedH2 = 'My Heroes';
+const targetHero = { id: 16, name: 'RubberMan' };
+const nameSuffix = 'X';
+
+class Hero {
+    id: number;
+    name: string;
+
+    // Factory methods
+
+    // Get hero from s formatted as '<id> <name>'.
+    static fromString(s: string): Hero {
+        return {
+            id: +s.substr(0, s.indexOf(' ')),
+            name: s.substr(s.indexOf(' ') + 1),
+        };
+    }
+
+    // Get hero id and name from the given detail element.
+    static async fromDetail(detail: ElementFinder): Promise<Hero> {
+        // Get hero id from the first <div>
+        let _id = await detail.all(by.css('div')).first().getText();
+        // Get name from the h2
+        let _name = await detail.element(by.css('h2')).getText();
+        return {
+            id: +_id.substr(_id.indexOf(' ') + 1),
+            name: _name.substr(0, _name.lastIndexOf(' '))
+        };
+    }
+}
+
+describe('Tutorial part 4', () => {
+  beforeAll(() => browser.get(''));
+  describe('Initial page', initialPageTests);
+  describe('Select hero', selectHeroTests);
+  describe('Update hero', updateHeroTests);
+});
+
+function initialPageTests() {
+  it(`has title '${expectedTitle}'`, () => {
+      expect(browser.getTitle()).toEqual(expectedTitle);
+  });
+
+  it(`has h1 '${expectedH1}'`, () => {
+      expectHeading(1, expectedH1);
+  });
+
+  it(`has h2 '${expectedH2}'`, () => {
+    expectHeading(2, expectedH2);
+  });
+
+  it('has the right number of heroes', () => {
+    let page = getPageElts();
+    expect(page.heroes.count()).toEqual(10);
+  });
+
+  it('has no selected hero and no hero details', function () {
+    let page = getPageElts();
+    expect(page.selected.isPresent()).toBeFalsy('selected hero');
+    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+  });
+}
+
+function selectHeroTests() {
+  it(`selects ${targetHero.name} from hero list`, function () {
+    let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
+    hero.click();
+    // Nothing specific to expect other than lack of exceptions.
+  });
+
+  it(`has selected ${targetHero.name}`, function () {
+    let page = getPageElts();
+    let expectedText = `${targetHero.id} ${targetHero.name}`;
+    expect(page.selected.getText()).toBe(expectedText);
+  });
+
+  it('shows selected hero details', async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
+  });
+}
+
+function updateHeroTests() {
+  it(`can update hero name`, () => {
+    addToHeroName(nameSuffix);
+    // Nothing specific to expect other than lack of exceptions.
+  });
+
+  it(`shows updated hero name in details`, async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName.toUpperCase());
+  });
+
+  it(`shows updated hero name in list`, async () => {
+    let page = getPageElts();
+    let hero = Hero.fromString(await page.selected.getText());
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName);
+  });
+
+}
+
+function addToHeroName(text: string): promise.Promise<void> {
+  let input = element(by.css('input'));
+  return input.sendKeys(text);
+}
+
+function expectHeading(hLevel: number, expectedText: string): void {
+    let hTag = `h${hLevel}`;
+    let hText = element(by.css(hTag)).getText();
+    expect(hText).toEqual(expectedText, hTag);
+};
+
+function getPageElts() {
+  return {
+    heroes: element.all(by.css('app-root li')),
+    selected: element(by.css('app-root li.selected')),
+    heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
+  };
+}
diff --git a/aio/content/examples/toh-pt4/example-config.json b/aio/content/examples/toh-pt4/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt4/src/app/app.component.css b/aio/content/examples/toh-pt4/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt4/src/app/app.component.html b/aio/content/examples/toh-pt4/src/app/app.component.html
new file mode 100644
index 000000000000..cb45ac499a40
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/app.component.html
@@ -0,0 +1,3 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
+<app-messages></app-messages>
diff --git a/aio/content/examples/toh-pt4/src/app/app.component.ts b/aio/content/examples/toh-pt4/src/app/app.component.ts
new file mode 100644
index 000000000000..c41599e92ae6
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
diff --git a/aio/content/examples/toh-pt4/src/app/app.module.ts b/aio/content/examples/toh-pt4/src/app/app.module.ts
new file mode 100644
index 000000000000..f0265dacbacc
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/app.module.ts
@@ -0,0 +1,27 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
+import { MessagesComponent } from './messages/messages.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HeroesComponent,
+    HeroDetailComponent,
+    MessagesComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  // #docregion providers
+  providers: [
+    // no need to place any providers due to the `providedIn` flag...
+  ],
+  // #enddocregion providers
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 000000000000..c6c039a91c5e
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,9 @@
+<div *ngIf="hero">
+  <h2>{{hero.name | uppercase}} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </label>
+  </div>
+</div>
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 000000000000..2edf9bba3897
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: ['./hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+
+  // #docregion hero
+  @Input() hero: Hero;
+  // #enddocregion hero
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/toh-pt4/src/app/hero.service.1.ts b/aio/content/examples/toh-pt4/src/app/hero.service.1.ts
new file mode 100644
index 000000000000..1e017b379fb9
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/hero.service.1.ts
@@ -0,0 +1,26 @@
+/* Newly generated and synchronous versions */
+// #docplaster
+// #docregion, new
+import { Injectable } from '@angular/core';
+
+// #enddocregion new
+import { Hero } from './hero';
+import { HEROES } from './mock-heroes';
+
+// #docregion new
+@Injectable({
+  providedIn: 'root',
+})
+export class HeroService {
+
+  constructor() { }
+
+  // #enddocregion new
+  // #docregion getHeroes
+  getHeroes(): Hero[] {
+    return HEROES;
+  }
+  // #enddocregion getHeroes
+  // #docregion new
+}
+// #enddocregion, new
diff --git a/aio/content/examples/toh-pt4/src/app/hero.service.ts b/aio/content/examples/toh-pt4/src/app/hero.service.ts
new file mode 100644
index 000000000000..89a7b5d09cd5
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/hero.service.ts
@@ -0,0 +1,36 @@
+// #docplaster
+// #docregion
+import { Injectable } from '@angular/core';
+
+// #docregion import-observable
+import { Observable, of } from 'rxjs';
+// #enddocregion import-observable
+
+// #docregion import-heroes
+import { Hero } from './hero';
+import { HEROES } from './mock-heroes';
+// #enddocregion import-heroes
+// #docregion import-message-service
+import { MessageService } from './message.service';
+// #enddocregion import-message-service
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HeroService {
+
+  // #docregion ctor
+  constructor(private messageService: MessageService) { }
+  // #enddocregion ctor
+
+  // #docregion getHeroes, getHeroes-1
+  getHeroes(): Observable<Hero[]> {
+    // #enddocregion getHeroes-1
+    // TODO: send the message _after_ fetching the heroes
+    this.messageService.add('HeroService: fetched heroes');
+    // #docregion getHeroes-1
+    return of(HEROES);
+  }
+  // #enddocregion getHeroes, getHeroes-1
+}
+// #enddocregion
diff --git a/aio/content/examples/toh-pt4/src/app/hero.ts b/aio/content/examples/toh-pt4/src/app/hero.ts
new file mode 100644
index 000000000000..e3eac516daa5
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts
new file mode 100644
index 000000000000..909955f0976e
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts
@@ -0,0 +1,19 @@
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+import { Observable } from 'rxjs';
+
+class DummyHeroesComponent {
+
+  heroes: Observable<Hero[]>;
+
+  constructor(private heroService: HeroService) {}
+
+  // #docregion getHeroes
+  getHeroes(): void {
+    // #docregion get-heroes
+    this.heroes = this.heroService.getHeroes();
+    // #enddocregion get-heroes
+  }
+  // #enddocregion getHeroes
+}
+
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
new file mode 100644
index 000000000000..4bef1bb3c407
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
@@ -0,0 +1,50 @@
+/* HeroesComponent's private CSS styles */
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.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;
+  min-width: 16px;
+  text-align: right;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..fdddd6823b81
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
@@ -0,0 +1,14 @@
+<h2>My Heroes</h2>
+<!-- #docregion list -->
+<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>
+<!-- #enddocregion list -->
+
+<!-- #docregion hero-detail-binding -->
+ <app-hero-detail [hero]="selectedHero"></app-hero-detail>
+<!-- #enddocregion hero-detail-binding -->
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 000000000000..9c3b1c4d9f77
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..7fdc68a057ba
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts
@@ -0,0 +1,43 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from '../hero';
+// #docregion hero-service-import
+import { HeroService } from '../hero.service';
+// #enddocregion hero-service-import
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+
+  selectedHero: Hero;
+
+  // #docregion heroes
+  heroes: Hero[];
+  // #enddocregion heroes
+
+  // #docregion ctor
+  constructor(private heroService: HeroService) { }
+  // #enddocregion ctor
+
+  // #docregion ng-on-init
+  ngOnInit() {
+    this.getHeroes();
+  }
+  // #enddocregion ng-on-init
+
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+
+  // #docregion getHeroes
+  getHeroes(): void {
+    this.heroService.getHeroes()
+        .subscribe(heroes => this.heroes = heroes);
+  }
+  // #enddocregion getHeroes
+}
diff --git a/aio/content/examples/toh-pt4/src/app/message.service.spec.ts b/aio/content/examples/toh-pt4/src/app/message.service.spec.ts
new file mode 100644
index 000000000000..63ecfd8ff629
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/message.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MessageService]
+    });
+  });
+
+  it('should be created', inject([MessageService], (service: MessageService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/aio/content/examples/toh-pt4/src/app/message.service.ts b/aio/content/examples/toh-pt4/src/app/message.service.ts
new file mode 100644
index 000000000000..d72412e115eb
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/message.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages = [];
+  }
+}
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.css b/aio/content/examples/toh-pt4/src/app/messages/messages.component.css
new file mode 100644
index 000000000000..d08d9be58170
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.css
@@ -0,0 +1,35 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+  color: red;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: crimson;
+  font-family: Cambria, Georgia;
+}
+
+button.clear {
+  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;
+}
+button.clear {
+  color: #888;
+  margin-bottom: 12px;
+}
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.html b/aio/content/examples/toh-pt4/src/app/messages/messages.component.html
new file mode 100644
index 000000000000..1df7dfd98967
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="messageService.messages.length">
+
+  <h2>Messages</h2>
+  <button class="clear"
+          (click)="messageService.clear()">clear</button>
+  <div *ngFor='let message of messageService.messages'> {{message}} </div>
+
+</div>
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts b/aio/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts
new file mode 100644
index 000000000000..3c2b2b15372c
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.ts b/aio/content/examples/toh-pt4/src/app/messages/messages.component.ts
new file mode 100644
index 000000000000..8a819207fb5d
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.ts
@@ -0,0 +1,21 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+// #docregion import-message-service
+import { MessageService } from '../message.service';
+// #enddocregion import-message-service
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+  // #docregion ctor
+  constructor(public messageService: MessageService) {}
+  // #enddocregion ctor
+
+  ngOnInit() {
+  }
+
+}
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 000000000000..1771a7103bfd
--- /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-pt4/src/index.html b/aio/content/examples/toh-pt4/src/index.html
new file mode 100644
index 000000000000..1c4106381f31
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/toh-pt4/src/main.ts b/aio/content/examples/toh-pt4/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/toh-pt4/stackblitz.json b/aio/content/examples/toh-pt4/stackblitz.json
new file mode 100644
index 000000000000..1b3e442ac0cb
--- /dev/null
+++ b/aio/content/examples/toh-pt4/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Tour of Heroes: Part 4",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes"]
+}
diff --git a/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..e94b7e6ca65a
--- /dev/null
+++ b/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,174 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
+
+const expectedH1 = 'Tour of Heroes';
+const expectedTitle = `${expectedH1}`;
+const targetHero = { id: 15, name: 'Magneta' };
+const targetHeroDashboardIndex = 3;
+const nameSuffix = 'X';
+const newHeroName = targetHero.name + nameSuffix;
+
+class Hero {
+    id: number;
+    name: string;
+
+    // Factory methods
+
+    // Get hero from s formatted as '<id> <name>'.
+    static fromString(s: string): Hero {
+        return {
+            id: +s.substr(0, s.indexOf(' ')),
+            name: s.substr(s.indexOf(' ') + 1),
+        };
+    }
+
+    // Get hero id and name from the given detail element.
+    static async fromDetail(detail: ElementFinder): Promise<Hero> {
+        // Get hero id from the first <div>
+        let _id = await detail.all(by.css('div')).first().getText();
+        // Get name from the h2
+        let _name = await detail.element(by.css('h2')).getText();
+        return {
+            id: +_id.substr(_id.indexOf(' ') + 1),
+            name: _name.substr(0, _name.lastIndexOf(' '))
+        };
+    }
+}
+
+describe('Tutorial part 5', () => {
+
+  beforeAll(() => browser.get(''));
+
+  function getPageElts() {
+    let navElts = element.all(by.css('app-root nav a'));
+
+    return {
+      navElts: navElts,
+
+      appDashboardHref: navElts.get(0),
+      appDashboard: element(by.css('app-root app-dashboard')),
+      topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
+
+      appHeroesHref: navElts.get(1),
+      appHeroes: element(by.css('app-root app-heroes')),
+      allHeroes: element.all(by.css('app-root app-heroes li')),
+      heroDetail: element(by.css('app-root app-hero-detail > div'))
+    };
+  }
+
+  describe('Initial page', () => {
+
+    it(`has title '${expectedTitle}'`, () => {
+        expect(browser.getTitle()).toEqual(expectedTitle);
+    });
+
+    it(`has h1 '${expectedH1}'`, () => {
+        expectHeading(1, expectedH1);
+    });
+
+    const expectedViewNames = ['Dashboard', 'Heroes'];
+    it(`has views ${expectedViewNames}`, () => {
+      let viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText());
+      expect(viewNames).toEqual(expectedViewNames);
+    });
+
+    it('has dashboard as the active view', () => {
+      let page = getPageElts();
+      expect(page.appDashboard.isPresent()).toBeTruthy();
+    });
+
+  });
+
+  describe('Dashboard tests', () => {
+
+    beforeAll(() => browser.get(''));
+
+    it('has top heroes', () => {
+      let page = getPageElts();
+      expect(page.topHeroes.count()).toEqual(4);
+    });
+
+    it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
+
+    it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
+
+    it(`saves and shows ${newHeroName} in Dashboard`, () => {
+      element(by.buttonText('go back')).click();
+      let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
+      expect(targetHeroElt.getText()).toEqual(newHeroName);
+    });
+
+  });
+
+  describe('Heroes tests', () => {
+
+    beforeAll(() => browser.get(''));
+
+    it('can switch to Heroes view', () => {
+      getPageElts().appHeroesHref.click();
+      let page = getPageElts();
+      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
+    });
+
+    it('can route to hero details', async () => {
+      getHeroLiEltById(targetHero.id).click();
+
+      let page = getPageElts();
+      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      let hero = await Hero.fromDetail(page.heroDetail);
+      expect(hero.id).toEqual(targetHero.id);
+      expect(hero.name).toEqual(targetHero.name.toUpperCase());
+    });
+
+    it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
+
+    it(`shows ${newHeroName} in Heroes list`, () => {
+      element(by.buttonText('go back')).click();
+      let expectedText = `${targetHero.id} ${newHeroName}`;
+      expect(getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText);
+    });
+
+  });
+
+  async function dashboardSelectTargetHero() {
+    let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
+    expect(targetHeroElt.getText()).toEqual(targetHero.name);
+    targetHeroElt.click();
+
+    let page = getPageElts();
+    expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
+  }
+
+  async function updateHeroNameInDetailView() {
+    // Assumes that the current view is the hero details view.
+    addToHeroName(nameSuffix);
+
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newHeroName.toUpperCase());
+  }
+
+});
+
+function addToHeroName(text: string): promise.Promise<void> {
+  let input = element(by.css('input'));
+  return input.sendKeys(text);
+}
+
+function expectHeading(hLevel: number, expectedText: string): void {
+    let hTag = `h${hLevel}`;
+    let hText = element(by.css(hTag)).getText();
+    expect(hText).toEqual(expectedText, hTag);
+};
+
+function getHeroLiEltById(id: number) {
+  let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
+  return spanForId.element(by.xpath('..'));
+}
diff --git a/aio/content/examples/toh-pt5/example-config.json b/aio/content/examples/toh-pt5/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt5/src/app/app-routing.module.0.ts b/aio/content/examples/toh-pt5/src/app/app-routing.module.0.ts
new file mode 100644
index 000000000000..c855135b75e3
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/app-routing.module.0.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: []
+})
+export class AppRoutingModule { }
diff --git a/aio/content/examples/toh-pt5/src/app/app-routing.module.ts b/aio/content/examples/toh-pt5/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..bfdcb7d5ec33
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/app-routing.module.ts
@@ -0,0 +1,45 @@
+// #docplaster
+// #docregion , v1
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+// #enddocregion v1
+// #docregion import-dashboard
+import { DashboardComponent }   from './dashboard/dashboard.component';
+// #enddocregion import-dashboard
+// #docregion heroes-route
+import { HeroesComponent }      from './heroes/heroes.component';
+// #enddocregion heroes-route
+// #docregion import-herodetail
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
+// #enddocregion import-herodetail
+// #docregion heroes-route
+
+// #docregion routes
+const routes: Routes = [
+  // #enddocregion heroes-route
+  // #docregion redirect-route
+  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  // #enddocregion redirect-route
+  // #docregion dashboard-route
+  { path: 'dashboard', component: DashboardComponent },
+  // #enddocregion dashboard-route
+  // #docregion detail-route
+  { path: 'detail/:id', component: HeroDetailComponent },
+  // #enddocregion detail-route
+  // #docregion heroes-route
+  { path: 'heroes', component: HeroesComponent }
+];
+// #enddocregion routes, heroes-route
+
+// #docregion v1
+@NgModule({
+// #enddocregion v1
+// #docregion ngmodule-imports
+  imports: [ RouterModule.forRoot(routes) ],
+// #enddocregion ngmodule-imports
+// #docregion v1
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule {}
+// #enddocregion , v1
diff --git a/aio/content/examples/toh-pt5/src/app/app.component.css b/aio/content/examples/toh-pt5/src/app/app.component.css
new file mode 100644
index 000000000000..7cf19e6edeac
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/app.component.css
@@ -0,0 +1,29 @@
+/* AppComponent's private CSS styles */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  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;
+}
diff --git a/aio/content/examples/toh-pt5/src/app/app.component.html b/aio/content/examples/toh-pt5/src/app/app.component.html
new file mode 100644
index 000000000000..12e347256e39
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/app.component.html
@@ -0,0 +1,14 @@
+<!-- #docplaster -->
+<!-- #docregion, heroes, outlet -->
+<h1>{{title}}</h1>
+<!-- #enddocregion outlet -->
+<nav>
+  <!-- #enddocregion heroes -->
+  <a routerLink="/dashboard">Dashboard</a>
+  <!-- #docregion heroes -->
+  <a routerLink="/heroes">Heroes</a>
+</nav>
+<!-- #docregion outlet -->
+<router-outlet></router-outlet>
+<app-messages></app-messages>
+<!-- #enddocregion, heroes, outlet -->
diff --git a/aio/content/examples/toh-pt5/src/app/app.component.ts b/aio/content/examples/toh-pt5/src/app/app.component.ts
new file mode 100644
index 000000000000..c41599e92ae6
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
diff --git a/aio/content/examples/toh-pt5/src/app/app.module.ts b/aio/content/examples/toh-pt5/src/app/app.module.ts
new file mode 100644
index 000000000000..ba832f848f90
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/app.module.ts
@@ -0,0 +1,35 @@
+// #docregion
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+
+import { AppComponent }         from './app.component';
+import { DashboardComponent }   from './dashboard/dashboard.component';
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
+import { HeroesComponent }      from './heroes/heroes.component';
+import { MessagesComponent }    from './messages/messages.component';
+
+// #docregion routing-module
+import { AppRoutingModule }     from './app-routing.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    AppRoutingModule
+  ],
+// #enddocregion routing-module
+  // #docregion dashboard
+  declarations: [
+    AppComponent,
+    DashboardComponent,
+    HeroesComponent,
+    HeroDetailComponent,
+    MessagesComponent
+  ],
+  // #enddocregion dashboard
+  bootstrap: [ AppComponent ]
+// #docregion routing-module
+})
+export class AppModule { }
+// #enddocregion routing-module
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html
new file mode 100644
index 000000000000..ddb4fd29f8e1
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html
@@ -0,0 +1,8 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <a *ngFor="let hero of heroes" class="col-1-4">
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </a>
+</div>
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
new file mode 100644
index 000000000000..8dc6701a78f2
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
@@ -0,0 +1,62 @@
+/* DashboardComponent's private CSS styles */
+[class*='col-'] {
+  float: left;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+a {
+  text-decoration: none;
+}
+*, *:after, *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+h4 {
+  position: relative;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+  padding: 20px;
+  text-align: center;
+  color: #eee;
+  max-height: 120px;
+  min-width: 120px;
+  background-color: #607d8b;
+  border-radius: 2px;
+}
+.module:hover {
+  background-color: #eee;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+  .module {
+    font-size: 10px;
+    max-height: 75px; }
+}
+@media (max-width: 1024px) {
+  .grid {
+    margin: 0;
+  }
+  .module {
+    min-width: 60px;
+  }
+}
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html
new file mode 100644
index 000000000000..946a4d5fdb00
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html
@@ -0,0 +1,11 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <!-- #docregion click -->
+  <a *ngFor="let hero of heroes" class="col-1-4"
+      routerLink="/detail/{{hero.id}}">
+  <!-- #enddocregion click -->
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </a>
+</div>
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 000000000000..fea6bfb4dbe7
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.ts b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 000000000000..d4db0c406d82
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,26 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: [ './dashboard.component.css' ]
+})
+export class DashboardComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  // #docregion getHeroes
+  getHeroes(): void {
+    this.heroService.getHeroes()
+      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
+  }
+  // #enddocregion getHeroes
+}
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
new file mode 100644
index 000000000000..062544af4885
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
@@ -0,0 +1,30 @@
+/* HeroDetailComponent's private CSS styles */
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  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: #ccc;
+  cursor: auto;
+}
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 000000000000..5f7b1d46a36b
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,12 @@
+<div *ngIf="hero">
+  <h2>{{hero.name | uppercase}} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </label>
+  </div>
+  <!-- #docregion back-button -->
+  <button (click)="goBack()">go back</button>
+  <!-- #enddocregion back-button -->
+</div>
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 000000000000..43d108247068
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,49 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+// #docregion added-imports
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+// #enddocregion added-imports
+import { Hero }         from '../hero';
+// #docregion added-imports
+import { HeroService }  from '../hero.service';
+// #enddocregion added-imports
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: [ './hero-detail.component.css' ]
+})
+export class HeroDetailComponent implements OnInit {
+  hero: Hero;
+
+  // #docregion ctor
+  constructor(
+    private route: ActivatedRoute,
+    private heroService: HeroService,
+    private location: Location
+  ) {}
+  // #enddocregion ctor
+
+  // #docregion ngOnInit
+  ngOnInit(): void {
+    this.getHero();
+  }
+
+  // #docregion getHero
+  getHero(): void {
+    const id = +this.route.snapshot.paramMap.get('id');
+    this.heroService.getHero(id)
+      .subscribe(hero => this.hero = hero);
+  }
+  // #enddocregion getHero
+  // #enddocregion ngOnInit
+
+  // #docregion goBack
+  goBack(): void {
+    this.location.back();
+  }
+// #enddocregion goBack
+}
diff --git a/aio/content/examples/toh-pt5/src/app/hero.service.ts b/aio/content/examples/toh-pt5/src/app/hero.service.ts
new file mode 100644
index 000000000000..c0dc5e85f70d
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/hero.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+
+import { Hero } from './hero';
+import { HEROES } from './mock-heroes';
+import { MessageService } from './message.service';
+
+@Injectable({ providedIn: 'root' })
+export class HeroService {
+
+  constructor(private messageService: MessageService) { }
+
+  getHeroes(): Observable<Hero[]> {
+    // TODO: send the message _after_ fetching the heroes
+    this.messageService.add('HeroService: fetched heroes');
+    return of(HEROES);
+  }
+
+  // #docregion getHero
+  getHero(id: number): Observable<Hero> {
+    // TODO: send the message _after_ fetching the hero
+    this.messageService.add(`HeroService: fetched hero id=${id}`);
+    return of(HEROES.find(hero => hero.id === id));
+  }
+  // #enddocregion getHero
+}
diff --git a/aio/content/examples/toh-pt5/src/app/hero.ts b/aio/content/examples/toh-pt5/src/app/hero.ts
new file mode 100644
index 000000000000..e3eac516daa5
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
new file mode 100644
index 000000000000..91e0badceb33
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
@@ -0,0 +1,51 @@
+/* HeroesComponent's private CSS styles */
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  position: relative;
+  cursor: pointer;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+
+.heroes a {
+  color: #888;
+  text-decoration: none;
+  position: relative;
+  display: block;
+  width: 250px;
+}
+
+.heroes a:hover {
+  color:#607D8B;
+}
+
+.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;
+  min-width: 16px;
+  text-align: right;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..bd7e454e45e3
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.html
@@ -0,0 +1,10 @@
+<h2>My Heroes</h2>
+<!-- #docregion list -->
+<ul class="heroes">
+  <li *ngFor="let hero of heroes">
+    <a routerLink="/detail/{{hero.id}}">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </a>
+  </li>
+</ul>
+<!-- #enddocregion list -->
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 000000000000..9c3b1c4d9f77
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..3a893ba554ab
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+// #docregion class
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
+    this.heroService.getHeroes()
+    .subscribe(heroes => this.heroes = heroes);
+  }
+}
+// #enddocregion class
diff --git a/aio/content/examples/toh-pt5/src/app/message.service.spec.ts b/aio/content/examples/toh-pt5/src/app/message.service.spec.ts
new file mode 100644
index 000000000000..63ecfd8ff629
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/message.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MessageService]
+    });
+  });
+
+  it('should be created', inject([MessageService], (service: MessageService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/aio/content/examples/toh-pt5/src/app/message.service.ts b/aio/content/examples/toh-pt5/src/app/message.service.ts
new file mode 100644
index 000000000000..30614a8af4f4
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/message.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages = [];
+  }
+}
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.css b/aio/content/examples/toh-pt5/src/app/messages/messages.component.css
new file mode 100644
index 000000000000..d08d9be58170
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.css
@@ -0,0 +1,35 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+  color: red;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: crimson;
+  font-family: Cambria, Georgia;
+}
+
+button.clear {
+  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;
+}
+button.clear {
+  color: #888;
+  margin-bottom: 12px;
+}
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.html b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
new file mode 100644
index 000000000000..8e86f5247da4
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="messageService.messages.length">
+
+  <h2>Messages</h2>
+  <button class="clear"
+          (click)="messageService.clear()">clear</button>
+  <div *ngFor="let message of messageService.messages"> {{message}} </div>
+
+</div>
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.spec.ts b/aio/content/examples/toh-pt5/src/app/messages/messages.component.spec.ts
new file mode 100644
index 000000000000..3c2b2b15372c
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.ts b/aio/content/examples/toh-pt5/src/app/messages/messages.component.ts
new file mode 100644
index 000000000000..17c8b2701f34
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+  constructor(public messageService: MessageService) {}
+
+  ngOnInit() {
+  }
+
+}
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 000000000000..1771a7103bfd
--- /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-pt5/src/index.html b/aio/content/examples/toh-pt5/src/index.html
new file mode 100644
index 000000000000..f5fed0967e39
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <!-- #docregion base-href -->
+  <base href="/">
+  <!-- #enddocregion base-href -->
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/toh-pt5/src/main.ts b/aio/content/examples/toh-pt5/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/toh-pt5/stackblitz.json b/aio/content/examples/toh-pt5/stackblitz.json
new file mode 100644
index 000000000000..17390ecfc625
--- /dev/null
+++ b/aio/content/examples/toh-pt5/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Tour of Heroes: Part 5",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[0,1,2,3].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes", "router"]
+}
diff --git a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..cbd0df76d462
--- /dev/null
+++ b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,307 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder, ElementArrayFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
+
+const expectedH1 = 'Tour of Heroes';
+const expectedTitle = `${expectedH1}`;
+const targetHero = { id: 15, name: 'Magneta' };
+const targetHeroDashboardIndex = 3;
+const nameSuffix = 'X';
+const newHeroName = targetHero.name + nameSuffix;
+
+class Hero {
+  id: number;
+  name: string;
+
+  // Factory methods
+
+  // Hero from string formatted as '<id> <name>'.
+  static fromString(s: string): Hero {
+    return {
+      id: +s.substr(0, s.indexOf(' ')),
+      name: s.substr(s.indexOf(' ') + 1),
+    };
+  }
+
+  // Hero from hero list <li> element.
+  static async fromLi(li: ElementFinder): Promise<Hero> {
+      let stringsFromA = await li.all(by.css('a')).getText();
+      let strings = stringsFromA[0].split(' ');
+      return { id: +strings[0], name: strings[1] };
+  }
+
+  // Hero id and name from the given detail element.
+  static async fromDetail(detail: ElementFinder): Promise<Hero> {
+    // Get hero id from the first <div>
+    let _id = await detail.all(by.css('div')).first().getText();
+    // Get name from the h2
+    let _name = await detail.element(by.css('h2')).getText();
+    return {
+        id: +_id.substr(_id.indexOf(' ') + 1),
+        name: _name.substr(0, _name.lastIndexOf(' '))
+    };
+  }
+}
+
+describe('Tutorial part 6', () => {
+
+  beforeAll(() => browser.get(''));
+
+  function getPageElts() {
+    let navElts = element.all(by.css('app-root nav a'));
+
+    return {
+      navElts: navElts,
+
+      appDashboardHref: navElts.get(0),
+      appDashboard: element(by.css('app-root app-dashboard')),
+      topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
+
+      appHeroesHref: navElts.get(1),
+      appHeroes: element(by.css('app-root app-heroes')),
+      allHeroes: element.all(by.css('app-root app-heroes li')),
+      selectedHeroSubview: element(by.css('app-root app-heroes > div:last-child')),
+
+      heroDetail: element(by.css('app-root app-hero-detail > div')),
+
+      searchBox: element(by.css('#search-box')),
+      searchResults: element.all(by.css('.search-result li'))
+    };
+  }
+
+  describe('Initial page', () => {
+
+    it(`has title '${expectedTitle}'`, () => {
+      expect(browser.getTitle()).toEqual(expectedTitle);
+    });
+
+    it(`has h1 '${expectedH1}'`, () => {
+        expectHeading(1, expectedH1);
+    });
+
+    const expectedViewNames = ['Dashboard', 'Heroes'];
+    it(`has views ${expectedViewNames}`, () => {
+      let viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText());
+      expect(viewNames).toEqual(expectedViewNames);
+    });
+
+    it('has dashboard as the active view', () => {
+      let page = getPageElts();
+      expect(page.appDashboard.isPresent()).toBeTruthy();
+    });
+
+  });
+
+  describe('Dashboard tests', () => {
+
+    beforeAll(() => browser.get(''));
+
+    it('has top heroes', () => {
+      let page = getPageElts();
+      expect(page.topHeroes.count()).toEqual(4);
+    });
+
+    it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
+
+    it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
+
+    it(`cancels and shows ${targetHero.name} in Dashboard`, () => {
+      element(by.buttonText('go back')).click();
+      browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+
+      let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
+      expect(targetHeroElt.getText()).toEqual(targetHero.name);
+    });
+
+    it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
+
+    it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
+
+    it(`saves and shows ${newHeroName} in Dashboard`, () => {
+      element(by.buttonText('save')).click();
+      browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+
+      let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
+      expect(targetHeroElt.getText()).toEqual(newHeroName);
+    });
+
+  });
+
+  describe('Heroes tests', () => {
+
+    beforeAll(() => browser.get(''));
+
+    it('can switch to Heroes view', () => {
+      getPageElts().appHeroesHref.click();
+      let page = getPageElts();
+      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
+    });
+
+    it('can route to hero details', async () => {
+      getHeroLiEltById(targetHero.id).click();
+
+      let page = getPageElts();
+      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      let hero = await Hero.fromDetail(page.heroDetail);
+      expect(hero.id).toEqual(targetHero.id);
+      expect(hero.name).toEqual(targetHero.name.toUpperCase());
+    });
+
+    it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
+
+    it(`shows ${newHeroName} in Heroes list`, () => {
+      element(by.buttonText('save')).click();
+      browser.waitForAngular();
+      let expectedText = `${targetHero.id} ${newHeroName}`;
+      expect(getHeroAEltById(targetHero.id).getText()).toEqual(expectedText);
+    });
+
+    it(`deletes ${newHeroName} from Heroes list`, async () => {
+      const heroesBefore = await toHeroArray(getPageElts().allHeroes);
+      const li = getHeroLiEltById(targetHero.id);
+      li.element(by.buttonText('x')).click();
+
+      const page = getPageElts();
+      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(page.allHeroes.count()).toEqual(9, 'number of heroes');
+      const heroesAfter = await toHeroArray(page.allHeroes);
+      // console.log(await Hero.fromLi(page.allHeroes[0]));
+      const expectedHeroes =  heroesBefore.filter(h => h.name !== newHeroName);
+      expect(heroesAfter).toEqual(expectedHeroes);
+      // expect(page.selectedHeroSubview.isPresent()).toBeFalsy();
+    });
+
+    it(`adds back ${targetHero.name}`, async () => {
+      const newHeroName = 'Alice';
+      const heroesBefore = await toHeroArray(getPageElts().allHeroes);
+      const numHeroes = heroesBefore.length;
+
+      element(by.css('input')).sendKeys(newHeroName);
+      element(by.buttonText('add')).click();
+
+      let page = getPageElts();
+      let heroesAfter = await toHeroArray(page.allHeroes);
+      expect(heroesAfter.length).toEqual(numHeroes + 1, 'number of heroes');
+
+      expect(heroesAfter.slice(0, numHeroes)).toEqual(heroesBefore, 'Old heroes are still there');
+
+      const maxId = heroesBefore[heroesBefore.length - 1].id;
+      expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName});
+    });
+
+    it('displays correctly styled buttons', async () => {
+      element.all(by.buttonText('x')).then(buttons => {
+        for (const button of buttons) {
+          // Inherited styles from styles.css
+          expect(button.getCssValue('font-family')).toBe('Arial');
+          expect(button.getCssValue('border')).toContain('none');
+          expect(button.getCssValue('padding')).toBe('5px 10px');
+          expect(button.getCssValue('border-radius')).toBe('4px');
+          // Styles defined in heroes.component.css
+          expect(button.getCssValue('left')).toBe('194px');
+          expect(button.getCssValue('top')).toBe('-32px');
+        }
+      });
+
+      const addButton = element(by.buttonText('add'));
+      // Inherited styles from styles.css
+      expect(addButton.getCssValue('font-family')).toBe('Arial');
+      expect(addButton.getCssValue('border')).toContain('none');
+      expect(addButton.getCssValue('padding')).toBe('5px 10px');
+      expect(addButton.getCssValue('border-radius')).toBe('4px');
+    });
+
+  });
+
+  describe('Progressive hero search', () => {
+
+    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');
+      browser.sleep(1000);
+      expect(getPageElts().searchResults.count()).toBe(2);
+    });
+
+    it(`continues search with 'e' and gets ${targetHero.name}`, async () => {
+      getPageElts().searchBox.sendKeys('n');
+      browser.sleep(1000);
+      let page = getPageElts();
+      expect(page.searchResults.count()).toBe(1);
+      let hero = page.searchResults.get(0);
+      expect(hero.getText()).toEqual(targetHero.name);
+    });
+
+    it(`navigates to ${targetHero.name} details view`, async () => {
+      let hero = getPageElts().searchResults.get(0);
+      expect(hero.getText()).toEqual(targetHero.name);
+      hero.click();
+
+      let page = getPageElts();
+      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      let hero2 = await Hero.fromDetail(page.heroDetail);
+      expect(hero2.id).toEqual(targetHero.id);
+      expect(hero2.name).toEqual(targetHero.name.toUpperCase());
+    });
+  });
+
+  async function dashboardSelectTargetHero() {
+    let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
+    expect(targetHeroElt.getText()).toEqual(targetHero.name);
+    targetHeroElt.click();
+    browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+
+    let page = getPageElts();
+    expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
+  }
+
+  async function updateHeroNameInDetailView() {
+    // Assumes that the current view is the hero details view.
+    addToHeroName(nameSuffix);
+
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newHeroName.toUpperCase());
+  }
+
+});
+
+function addToHeroName(text: string): promise.Promise<void> {
+  let input = element(by.css('input'));
+  return input.sendKeys(text);
+}
+
+function expectHeading(hLevel: number, expectedText: string): void {
+    let hTag = `h${hLevel}`;
+    let hText = element(by.css(hTag)).getText();
+    expect(hText).toEqual(expectedText, hTag);
+};
+
+function getHeroAEltById(id: number): ElementFinder {
+  let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
+  return spanForId.element(by.xpath('..'));
+}
+
+function getHeroLiEltById(id: number): ElementFinder {
+  let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
+  return spanForId.element(by.xpath('../..'));
+}
+
+async function toHeroArray(allHeroes: ElementArrayFinder): Promise<Hero[]> {
+  let promisedHeroes = await allHeroes.map(Hero.fromLi);
+  // The cast is necessary to get around issuing with the signature of Promise.all()
+  return <Promise<any>> Promise.all(promisedHeroes);
+}
diff --git a/aio/content/examples/toh-pt6/example-config.json b/aio/content/examples/toh-pt6/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/toh-pt6/src/app/app-routing.module.ts b/aio/content/examples/toh-pt6/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..969e78b276f3
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/app-routing.module.ts
@@ -0,0 +1,19 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DashboardComponent }   from './dashboard/dashboard.component';
+import { HeroesComponent }      from './heroes/heroes.component';
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  { path: 'dashboard', component: DashboardComponent },
+  { path: 'detail/:id', component: HeroDetailComponent },
+  { path: 'heroes', component: HeroesComponent }
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule {}
diff --git a/aio/content/examples/toh-pt6/src/app/app.component.css b/aio/content/examples/toh-pt6/src/app/app.component.css
new file mode 100644
index 000000000000..bf741e45759f
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/app.component.css
@@ -0,0 +1,29 @@
+/* AppComponent's private CSS styles */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  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;
+}
diff --git a/aio/content/examples/toh-pt6/src/app/app.component.html b/aio/content/examples/toh-pt6/src/app/app.component.html
new file mode 100644
index 000000000000..49c7d171b698
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/app.component.html
@@ -0,0 +1,7 @@
+<h1>{{title}}</h1>
+<nav>
+  <a routerLink="/dashboard">Dashboard</a>
+  <a routerLink="/heroes">Heroes</a>
+</nav>
+<router-outlet></router-outlet>
+<app-messages></app-messages>
diff --git a/aio/content/examples/toh-pt6/src/app/app.component.ts b/aio/content/examples/toh-pt6/src/app/app.component.ts
new file mode 100644
index 000000000000..c41599e92ae6
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
diff --git a/aio/content/examples/toh-pt6/src/app/app.module.ts b/aio/content/examples/toh-pt6/src/app/app.module.ts
new file mode 100644
index 000000000000..9770300706b5
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/app.module.ts
@@ -0,0 +1,53 @@
+// #docplaster
+// #docregion, v1
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+import { HttpClientModule }    from '@angular/common/http';
+
+// #docregion import-in-mem-stuff
+import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService }  from './in-memory-data.service';
+// #enddocregion import-in-mem-stuff
+
+import { AppRoutingModule }     from './app-routing.module';
+
+import { AppComponent }         from './app.component';
+import { DashboardComponent }   from './dashboard/dashboard.component';
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
+import { HeroesComponent }      from './heroes/heroes.component';
+// #enddocregion v1
+import { HeroSearchComponent }  from './hero-search/hero-search.component';
+// #docregion v1
+import { MessagesComponent }    from './messages/messages.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    AppRoutingModule,
+    // #docregion in-mem-web-api-imports
+    HttpClientModule,
+
+    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
+    // and returns simulated server responses.
+    // Remove it when a real server is ready to receive requests.
+    HttpClientInMemoryWebApiModule.forRoot(
+      InMemoryDataService, { dataEncapsulation: false }
+    )
+    // #enddocregion in-mem-web-api-imports
+  ],
+  declarations: [
+    AppComponent,
+    DashboardComponent,
+    HeroesComponent,
+    HeroDetailComponent,
+    MessagesComponent,
+    // #enddocregion v1
+    HeroSearchComponent
+    // #docregion v1
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion , v1
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
new file mode 100644
index 000000000000..3822cc56bb5c
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
@@ -0,0 +1,62 @@
+/* DashboardComponent's private CSS styles */
+[class*='col-'] {
+  float: left;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+a {
+  text-decoration: none;
+}
+*, *:after, *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+h4 {
+  position: relative;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+  padding: 20px;
+  text-align: center;
+  color: #eee;
+  max-height: 120px;
+  min-width: 120px;
+  background-color: #607D8B;
+  border-radius: 2px;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+  .module {
+    font-size: 10px;
+    max-height: 75px; }
+}
+@media (max-width: 1024px) {
+  .grid {
+    margin: 0;
+  }
+  .module {
+    min-width: 60px;
+  }
+}
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html
new file mode 100644
index 000000000000..b70c0c7d6e4f
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html
@@ -0,0 +1,11 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <a *ngFor="let hero of heroes" class="col-1-4"
+      routerLink="/detail/{{hero.id}}">
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </a>
+</div>
+
+<app-hero-search></app-hero-search>
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 000000000000..3926c21e9f31
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,58 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+import { HeroSearchComponent } from '../hero-search/hero-search.component';
+
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HEROES } from '../mock-heroes';
+import { HeroService } from '../hero.service';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+  let heroService;
+  let getHeroesSpy;
+
+  beforeEach(async(() => {
+    heroService = jasmine.createSpyObj('HeroService', ['getHeroes']);
+    getHeroesSpy = heroService.getHeroes.and.returnValue( of(HEROES) );
+    TestBed.configureTestingModule({
+      declarations: [
+        DashboardComponent,
+        HeroSearchComponent
+      ],
+      imports: [
+        RouterTestingModule.withRoutes([])
+      ],
+      providers: [
+        { provide: HeroService, useValue: heroService }
+      ]
+    })
+    .compileComponents();
+
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display "Top Heroes" as headline', () => {
+    expect(fixture.nativeElement.querySelector('h3').textContent).toEqual('Top Heroes');
+  });
+
+  it('should call heroService', async(() => {
+    expect(getHeroesSpy.calls.any()).toBe(true);
+    }));
+
+  it('should display 4 links', async(() => {
+    expect(fixture.nativeElement.querySelectorAll('a').length).toEqual(4);
+  }));
+
+});
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.ts b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 000000000000..b2904a2c0852
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: [ './dashboard.component.css' ]
+})
+export class DashboardComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
+    this.heroService.getHeroes()
+      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
+  }
+}
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
new file mode 100644
index 000000000000..062544af4885
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
@@ -0,0 +1,30 @@
+/* HeroDetailComponent's private CSS styles */
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  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: #ccc;
+  cursor: auto;
+}
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 000000000000..860378b3b4e4
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,13 @@
+<div *ngIf="hero">
+  <h2>{{hero.name | uppercase}} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </label>
+  </div>
+  <button (click)="goBack()">go back</button>
+  <!-- #docregion save -->
+  <button (click)="save()">save</button>
+  <!-- #enddocregion save -->
+</div>
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 000000000000..d1259eebf0b7
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,42 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+import { Hero }         from '../hero';
+import { HeroService }  from '../hero.service';
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: [ './hero-detail.component.css' ]
+})
+export class HeroDetailComponent implements OnInit {
+  @Input() hero: Hero;
+
+  constructor(
+    private route: ActivatedRoute,
+    private heroService: HeroService,
+    private location: Location
+  ) {}
+
+  ngOnInit(): void {
+    this.getHero();
+  }
+
+  getHero(): void {
+    const id = +this.route.snapshot.paramMap.get('id');
+    this.heroService.getHero(id)
+      .subscribe(hero => this.hero = hero);
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+ // #docregion save
+ save(): void {
+    this.heroService.updateHero(this.hero)
+      .subscribe(() => this.goBack());
+  }
+// #enddocregion save
+}
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css
new file mode 100644
index 000000000000..0f2c8cdd10f2
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css
@@ -0,0 +1,39 @@
+/* HeroSearch private styles */
+.search-result li {
+  border-bottom: 1px solid gray;
+  border-left: 1px solid gray;
+  border-right: 1px solid gray;
+  width:195px;
+  height: 16px;
+  padding: 5px;
+  background-color: white;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.search-result li:hover {
+  background-color: #607D8B;
+}
+
+.search-result li a {
+  color: #888;
+  display: block;
+  text-decoration: none;
+}
+
+.search-result li a:hover {
+  color: white;
+}
+.search-result li a:active {
+  color: white;
+}
+#search-box {
+  width: 200px;
+  height: 20px;
+}
+
+
+ul.search-result {
+  margin-top: 0;
+  padding-left: 0;
+}
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
new file mode 100644
index 000000000000..102851a3bc2e
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
@@ -0,0 +1,17 @@
+<div id="search-component">
+  <h4>Hero Search</h4>
+
+  <!-- #docregion input -->
+  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
+  <!-- #enddocregion input -->
+
+  <ul class="search-result">
+    <!-- #docregion async -->
+    <li *ngFor="let hero of heroes$ | async" >
+    <!-- #enddocregion async -->
+      <a routerLink="/detail/{{hero.id}}">
+        {{hero.name}}
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts
new file mode 100644
index 000000000000..8414f1c223a3
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts
@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+import { HeroSearchComponent } from './hero-search.component';
+
+
+describe('HeroSearchComponent', () => {
+  let component: HeroSearchComponent;
+  let fixture: ComponentFixture<HeroSearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroSearchComponent ],
+      imports: [RouterTestingModule.withRoutes([]), HttpClientTestingModule]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts
new file mode 100644
index 000000000000..5819e824ece5
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts
@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+// #docregion rxjs-imports
+import { Observable, Subject } from 'rxjs';
+
+import {
+   debounceTime, distinctUntilChanged, switchMap
+ } from 'rxjs/operators';
+// #enddocregion rxjs-imports
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-hero-search',
+  templateUrl: './hero-search.component.html',
+  styleUrls: [ './hero-search.component.css' ]
+})
+export class HeroSearchComponent implements OnInit {
+  // #docregion heroes-stream
+  heroes$: Observable<Hero[]>;
+  // #enddocregion heroes-stream
+  // #docregion searchTerms
+  private searchTerms = new Subject<string>();
+  // #enddocregion searchTerms
+
+  constructor(private heroService: HeroService) {}
+  // #docregion searchTerms
+
+  // Push a search term into the observable stream.
+  search(term: string): void {
+    this.searchTerms.next(term);
+  }
+  // #enddocregion searchTerms
+
+  ngOnInit(): void {
+    // #docregion search
+    this.heroes$ = this.searchTerms.pipe(
+      // wait 300ms after each keystroke before considering the term
+      debounceTime(300),
+
+      // ignore new term if same as previous term
+      distinctUntilChanged(),
+
+      // switch to new search observable each time the term changes
+      switchMap((term: string) => this.heroService.searchHeroes(term)),
+    );
+    // #enddocregion search
+  }
+}
diff --git a/aio/content/examples/toh-pt6/src/app/hero.service.ts b/aio/content/examples/toh-pt6/src/app/hero.service.ts
new file mode 100644
index 000000000000..80d511c7768f
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero.service.ts
@@ -0,0 +1,157 @@
+// #docplaster
+// #docregion
+import { Injectable } from '@angular/core';
+// #docregion import-httpclient
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+// #enddocregion import-httpclient
+
+import { Observable, of } from 'rxjs';
+// #docregion import-rxjs-operators
+import { catchError, map, tap } from 'rxjs/operators';
+// #enddocregion import-rxjs-operators
+
+import { Hero } from './hero';
+import { MessageService } from './message.service';
+
+// #docregion http-options
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+// #enddocregion http-options
+
+@Injectable({ providedIn: 'root' })
+export class HeroService {
+
+  // #docregion heroesUrl
+  private heroesUrl = 'api/heroes';  // URL to web api
+  // #enddocregion heroesUrl
+
+  // #docregion ctor
+  constructor(
+    private http: HttpClient,
+    private messageService: MessageService) { }
+  // #enddocregion ctor
+
+  // #docregion getHeroes, getHeroes-1
+  /** GET heroes from the server */
+  // #docregion getHeroes-2
+  getHeroes (): Observable<Hero[]> {
+    return this.http.get<Hero[]>(this.heroesUrl)
+  // #enddocregion getHeroes-1
+      .pipe(
+        // #enddocregion getHeroes-2
+        tap(heroes => this.log('fetched heroes')),
+        // #docregion getHeroes-2
+        catchError(this.handleError('getHeroes', []))
+      );
+  // #docregion getHeroes-1
+  }
+  // #enddocregion getHeroes, getHeroes-1, getHeroes-2
+
+  // #docregion getHeroNo404
+  /** GET hero by id. Return `undefined` when id not found */
+  getHeroNo404<Data>(id: number): Observable<Hero> {
+    const url = `${this.heroesUrl}/?id=${id}`;
+    return this.http.get<Hero[]>(url)
+      .pipe(
+        map(heroes => heroes[0]), // returns a {0|1} element array
+        // #enddocregion getHeroNo404
+        tap(h => {
+          const outcome = h ? `fetched` : `did not find`;
+          this.log(`${outcome} hero id=${id}`);
+        }),
+        catchError(this.handleError<Hero>(`getHero id=${id}`))
+        // #docregion getHeroNo404
+      );
+  }
+  // #enddocregion getHeroNo404
+
+  // #docregion getHero
+  /** GET hero by id. Will 404 if id not found */
+  getHero(id: number): Observable<Hero> {
+    const url = `${this.heroesUrl}/${id}`;
+    return this.http.get<Hero>(url).pipe(
+      tap(_ => this.log(`fetched hero id=${id}`)),
+      catchError(this.handleError<Hero>(`getHero id=${id}`))
+    );
+  }
+  // #enddocregion getHero
+
+  // #docregion searchHeroes
+  /* GET heroes whose name contains search term */
+  searchHeroes(term: string): Observable<Hero[]> {
+    if (!term.trim()) {
+      // if not search term, return empty hero array.
+      return of([]);
+    }
+    return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
+      tap(_ => this.log(`found heroes matching "${term}"`)),
+      catchError(this.handleError<Hero[]>('searchHeroes', []))
+    );
+  }
+  // #enddocregion searchHeroes
+
+  //////// Save methods //////////
+
+  // #docregion addHero
+  /** POST: add a new hero to the server */
+  addHero (hero: Hero): Observable<Hero> {
+    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
+      tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
+      catchError(this.handleError<Hero>('addHero'))
+    );
+  }
+  // #enddocregion addHero
+
+  // #docregion deleteHero
+  /** DELETE: delete the hero from the server */
+  deleteHero (hero: Hero | number): Observable<Hero> {
+    const id = typeof hero === 'number' ? hero : hero.id;
+    const url = `${this.heroesUrl}/${id}`;
+
+    return this.http.delete<Hero>(url, httpOptions).pipe(
+      tap(_ => this.log(`deleted hero id=${id}`)),
+      catchError(this.handleError<Hero>('deleteHero'))
+    );
+  }
+  // #enddocregion deleteHero
+
+  // #docregion updateHero
+  /** PUT: update the hero on the server */
+  updateHero (hero: Hero): Observable<any> {
+    return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
+      tap(_ => this.log(`updated hero id=${hero.id}`)),
+      catchError(this.handleError<any>('updateHero'))
+    );
+  }
+  // #enddocregion updateHero
+
+  // #docregion handleError
+  /**
+   * Handle Http operation that failed.
+   * Let the app continue.
+   * @param operation - name of the operation that failed
+   * @param result - optional value to return as the observable result
+   */
+  private handleError<T> (operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
+
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      // TODO: better job of transforming error for user consumption
+      this.log(`${operation} failed: ${error.message}`);
+
+      // Let the app keep running by returning an empty result.
+      return of(result as T);
+    };
+  }
+  // #enddocregion handleError
+
+  // #docregion log
+  /** Log a HeroService message with the MessageService */
+  private log(message: string) {
+    this.messageService.add(`HeroService: ${message}`);
+  }
+  // #enddocregion log
+}
diff --git a/aio/content/examples/toh-pt6/src/app/hero.ts b/aio/content/examples/toh-pt6/src/app/hero.ts
new file mode 100644
index 000000000000..e3eac516daa5
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
new file mode 100644
index 000000000000..c345d1d970fd
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -0,0 +1,76 @@
+/* HeroesComponent's private CSS styles */
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  position: relative;
+  cursor: pointer;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+
+.heroes a {
+  color: #888;
+  text-decoration: none;
+  position: relative;
+  display: block;
+  width: 250px;
+}
+
+.heroes a:hover {
+  color:#607D8B;
+}
+
+.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;
+  min-width: 16px;
+  text-align: right;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
+/* #docregion additions */
+button {
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+  font-family: Arial;
+}
+
+button:hover {
+  background-color: #cfd8dc;
+}
+
+button.delete {
+  position: relative;
+  left: 194px;
+  top: -32px;
+  background-color: gray !important;
+  color: white;
+}
+/* #enddocregion additions */
+
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..5daa83bd6463
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html
@@ -0,0 +1,27 @@
+<h2>My Heroes</h2>
+
+<!-- #docregion add -->
+<div>
+  <label>Hero name:
+    <input #heroName />
+  </label>
+  <!-- (click) passes input value to add() and then clears the input -->
+  <button (click)="add(heroName.value); heroName.value=''">
+    add
+  </button>
+</div>
+<!-- #enddocregion add -->
+
+<!-- #docregion list -->
+<ul class="heroes">
+  <li *ngFor="let hero of heroes">
+    <a routerLink="/detail/{{hero.id}}">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </a>
+    <!-- #docregion delete -->
+    <button class="delete" title="delete hero"
+      (click)="delete(hero)">x</button>
+    <!-- #enddocregion delete -->
+  </li>
+</ul>
+<!-- #enddocregion list -->
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 000000000000..6991d6901058
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HeroesComponent } from './heroes.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ],
+      imports: [RouterTestingModule.withRoutes([]), HttpClientTestingModule],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..7cdeca088a26
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
+    this.heroService.getHeroes()
+    .subscribe(heroes => this.heroes = heroes);
+  }
+
+  // #docregion add
+  add(name: string): void {
+    name = name.trim();
+    if (!name) { return; }
+    this.heroService.addHero({ name } as Hero)
+      .subscribe(hero => {
+        this.heroes.push(hero);
+      });
+  }
+  // #enddocregion add
+
+  // #docregion delete
+  delete(hero: Hero): void {
+    this.heroes = this.heroes.filter(h => h !== hero);
+    this.heroService.deleteHero(hero).subscribe();
+  }
+  // #enddocregion delete
+
+}
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 000000000000..005545c19afe
--- /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: 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-pt6/src/app/message.service.spec.ts b/aio/content/examples/toh-pt6/src/app/message.service.spec.ts
new file mode 100644
index 000000000000..63ecfd8ff629
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/message.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MessageService]
+    });
+  });
+
+  it('should be created', inject([MessageService], (service: MessageService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/aio/content/examples/toh-pt6/src/app/message.service.ts b/aio/content/examples/toh-pt6/src/app/message.service.ts
new file mode 100644
index 000000000000..30614a8af4f4
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/message.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages = [];
+  }
+}
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.css b/aio/content/examples/toh-pt6/src/app/messages/messages.component.css
new file mode 100644
index 000000000000..d08d9be58170
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.css
@@ -0,0 +1,35 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+  color: red;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: crimson;
+  font-family: Cambria, Georgia;
+}
+
+button.clear {
+  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;
+}
+button.clear {
+  color: #888;
+  margin-bottom: 12px;
+}
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.html b/aio/content/examples/toh-pt6/src/app/messages/messages.component.html
new file mode 100644
index 000000000000..1df7dfd98967
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="messageService.messages.length">
+
+  <h2>Messages</h2>
+  <button class="clear"
+          (click)="messageService.clear()">clear</button>
+  <div *ngFor='let message of messageService.messages'> {{message}} </div>
+
+</div>
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.spec.ts b/aio/content/examples/toh-pt6/src/app/messages/messages.component.spec.ts
new file mode 100644
index 000000000000..3c2b2b15372c
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.ts b/aio/content/examples/toh-pt6/src/app/messages/messages.component.ts
new file mode 100644
index 000000000000..17c8b2701f34
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+  constructor(public messageService: MessageService) {}
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/toh-pt6/src/app/mock-heroes.ts b/aio/content/examples/toh-pt6/src/app/mock-heroes.ts
new file mode 100644
index 000000000000..1771a7103bfd
--- /dev/null
+++ b/aio/content/examples/toh-pt6/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-pt6/src/index.html b/aio/content/examples/toh-pt6/src/index.html
new file mode 100644
index 000000000000..1c4106381f31
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/toh-pt6/src/main.ts b/aio/content/examples/toh-pt6/src/main.ts
new file mode 100644
index 000000000000..0740658908da
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/main.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/toh-pt6/stackblitz.json b/aio/content/examples/toh-pt6/stackblitz.json
new file mode 100644
index 000000000000..777d9ad1f1a1
--- /dev/null
+++ b/aio/content/examples/toh-pt6/stackblitz.json
@@ -0,0 +1,9 @@
+{
+  "description": "Tour of Heroes: Part 6",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes", "http"]
+}
diff --git a/aio/content/examples/tsconfig.json b/aio/content/examples/tsconfig.json
new file mode 100644
index 000000000000..5ad933f26ecc
--- /dev/null
+++ b/aio/content/examples/tsconfig.json
@@ -0,0 +1,21 @@
+// this tsconfig is used to give intellisense to
+// all the examples in this folder
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es2015", "dom"],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "../../tools/examples/shared/node_modules/@types"
+    ]
+  },
+  "include": [
+    "*/e2e-spec.ts"
+  ]
+}
diff --git a/aio/content/examples/tslint.json b/aio/content/examples/tslint.json
new file mode 100644
index 000000000000..2e81c990353d
--- /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/example-config.json b/aio/content/examples/universal/example-config.json
new file mode 100644
index 000000000000..2c13a4178b2b
--- /dev/null
+++ b/aio/content/examples/universal/example-config.json
@@ -0,0 +1,3 @@
+{
+  "projectType": "universal"
+}
diff --git a/aio/content/examples/universal/server.ts b/aio/content/examples/universal/server.ts
new file mode 100644
index 000000000000..32e2a08ec1e4
--- /dev/null
+++ b/aio/content/examples/universal/server.ts
@@ -0,0 +1,61 @@
+// These are important and needed before anything else
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+
+import { enableProdMode } from '@angular/core';
+
+import * as express from 'express';
+import { join } from 'path';
+
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
+
+// Express server
+const app = express();
+
+const PORT = process.env.PORT || 4000;
+const DIST_FOLDER = join(process.cwd(), 'dist');
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
+
+// Express Engine
+import { ngExpressEngine } from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
+
+// #docregion ngExpressEngine
+app.engine('html', ngExpressEngine({
+  bootstrap: AppServerModuleNgFactory,
+  providers: [
+    provideModuleMap(LAZY_MODULE_MAP)
+  ]
+}));
+// #enddocregion ngExpressEngine
+
+app.set('view engine', 'html');
+app.set('views', join(DIST_FOLDER, 'browser'));
+
+// #docregion data-request
+// TODO: implement data requests securely
+app.get('/api/*', (req, res) => {
+  res.status(404).send('data requests are not supported');
+});
+// #enddocregion data-request
+
+// #docregion static
+// Server static files from /browser
+app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
+// #enddocregion static
+
+// #docregion navigation-request
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render('index', { req });
+});
+// #enddocregion navigation-request
+
+// Start up the Node server
+app.listen(PORT, () => {
+  console.log(`Node server listening on http://localhost:${PORT}`);
+});
diff --git a/aio/content/examples/universal/src/app/app-routing.module.ts b/aio/content/examples/universal/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..969e78b276f3
--- /dev/null
+++ b/aio/content/examples/universal/src/app/app-routing.module.ts
@@ -0,0 +1,19 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DashboardComponent }   from './dashboard/dashboard.component';
+import { HeroesComponent }      from './heroes/heroes.component';
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  { path: 'dashboard', component: DashboardComponent },
+  { path: 'detail/:id', component: HeroDetailComponent },
+  { path: 'heroes', component: HeroesComponent }
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule {}
diff --git a/aio/content/examples/universal/src/app/app.component.css b/aio/content/examples/universal/src/app/app.component.css
new file mode 100644
index 000000000000..bf741e45759f
--- /dev/null
+++ b/aio/content/examples/universal/src/app/app.component.css
@@ -0,0 +1,29 @@
+/* AppComponent's private CSS styles */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  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;
+}
diff --git a/aio/content/examples/universal/src/app/app.component.html b/aio/content/examples/universal/src/app/app.component.html
new file mode 100644
index 000000000000..49c7d171b698
--- /dev/null
+++ b/aio/content/examples/universal/src/app/app.component.html
@@ -0,0 +1,7 @@
+<h1>{{title}}</h1>
+<nav>
+  <a routerLink="/dashboard">Dashboard</a>
+  <a routerLink="/heroes">Heroes</a>
+</nav>
+<router-outlet></router-outlet>
+<app-messages></app-messages>
diff --git a/aio/content/examples/universal/src/app/app.component.ts b/aio/content/examples/universal/src/app/app.component.ts
new file mode 100644
index 000000000000..c41599e92ae6
--- /dev/null
+++ b/aio/content/examples/universal/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
diff --git a/aio/content/examples/universal/src/app/app.module.ts b/aio/content/examples/universal/src/app/app.module.ts
new file mode 100644
index 000000000000..1dab81e17bb3
--- /dev/null
+++ b/aio/content/examples/universal/src/app/app.module.ts
@@ -0,0 +1,60 @@
+// #docplaster
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+import { HttpClientModule }    from '@angular/common/http';
+
+import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService }  from './in-memory-data.service';
+
+import { AppRoutingModule }     from './app-routing.module';
+
+import { AppComponent }         from './app.component';
+import { DashboardComponent }   from './dashboard/dashboard.component';
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
+import { HeroesComponent }      from './heroes/heroes.component';
+import { HeroSearchComponent }  from './hero-search/hero-search.component';
+import { HeroService }          from './hero.service';
+import { MessageService }       from './message.service';
+import { MessagesComponent }    from './messages/messages.component';
+
+// #docregion platform-detection
+import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+// #enddocregion platform-detection
+
+@NgModule({
+  imports: [
+    // #docregion browsermodule
+    BrowserModule.withServerTransition({ appId: 'tour-of-heroes' }),
+    // #enddocregion browsermodule
+    FormsModule,
+    AppRoutingModule,
+    HttpClientModule,
+    HttpClientInMemoryWebApiModule.forRoot(
+      InMemoryDataService, { dataEncapsulation: false }
+    )
+  ],
+  declarations: [
+    AppComponent,
+    DashboardComponent,
+    HeroesComponent,
+    HeroDetailComponent,
+    MessagesComponent,
+    HeroSearchComponent
+  ],
+  providers: [ HeroService, MessageService ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+  // #docregion platform-detection
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: Object,
+    @Inject(APP_ID) private appId: string) {
+    const platform = isPlatformBrowser(platformId) ?
+      'in the browser' : 'on the server';
+    console.log(`Running ${platform} with appId=${appId}`);
+  }
+  // #enddocregion platform-detection
+}
diff --git a/aio/content/examples/universal/src/app/app.server.module.ts b/aio/content/examples/universal/src/app/app.server.module.ts
new file mode 100644
index 000000000000..b32046a59239
--- /dev/null
+++ b/aio/content/examples/universal/src/app/app.server.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+    ModuleMapLoaderModule
+  ],
+  providers: [
+    // Add universal-only providers here
+  ],
+  bootstrap: [ AppComponent ],
+})
+export class AppServerModule {}
diff --git a/aio/content/examples/universal/src/app/dashboard/dashboard.component.css b/aio/content/examples/universal/src/app/dashboard/dashboard.component.css
new file mode 100644
index 000000000000..3822cc56bb5c
--- /dev/null
+++ b/aio/content/examples/universal/src/app/dashboard/dashboard.component.css
@@ -0,0 +1,62 @@
+/* DashboardComponent's private CSS styles */
+[class*='col-'] {
+  float: left;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+a {
+  text-decoration: none;
+}
+*, *:after, *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+h4 {
+  position: relative;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+  padding: 20px;
+  text-align: center;
+  color: #eee;
+  max-height: 120px;
+  min-width: 120px;
+  background-color: #607D8B;
+  border-radius: 2px;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+  .module {
+    font-size: 10px;
+    max-height: 75px; }
+}
+@media (max-width: 1024px) {
+  .grid {
+    margin: 0;
+  }
+  .module {
+    min-width: 60px;
+  }
+}
diff --git a/aio/content/examples/universal/src/app/dashboard/dashboard.component.html b/aio/content/examples/universal/src/app/dashboard/dashboard.component.html
new file mode 100644
index 000000000000..36e86053a614
--- /dev/null
+++ b/aio/content/examples/universal/src/app/dashboard/dashboard.component.html
@@ -0,0 +1,11 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <a *ngFor="let hero of heroes" class="col-1-4"
+      routerLink="/detail/{{hero.id}}">
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </a>
+</div>
+
+<hero-search></hero-search>
diff --git a/aio/content/examples/universal/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/universal/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 000000000000..fea6bfb4dbe7
--- /dev/null
+++ b/aio/content/examples/universal/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/universal/src/app/dashboard/dashboard.component.ts b/aio/content/examples/universal/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 000000000000..f152c10c7eac
--- /dev/null
+++ b/aio/content/examples/universal/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: [ './dashboard.component.css' ]
+})
+export class DashboardComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
+    this.heroService.getHeroes()
+    .subscribe(heroes => this.heroes = heroes.slice(1, 5));
+  }
+}
diff --git a/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css
new file mode 100644
index 000000000000..062544af4885
--- /dev/null
+++ b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css
@@ -0,0 +1,30 @@
+/* HeroDetailComponent's private CSS styles */
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  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: #ccc;
+  cursor: auto;
+}
diff --git a/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 000000000000..6fa498ee4fb6
--- /dev/null
+++ b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,11 @@
+<div *ngIf="hero">
+  <h2>{{ hero.name | uppercase }} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </label>
+  </div>
+  <button (click)="goBack()">go back</button>
+  <button (click)="save()">save</button>
+</div>
diff --git a/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 000000000000..25f8d6d9e5b4
--- /dev/null
+++ b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+import { Hero }         from '../hero';
+import { HeroService }  from '../hero.service';
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: [ './hero-detail.component.css' ]
+})
+export class HeroDetailComponent implements OnInit {
+  hero: Hero;
+
+  constructor(
+    private route: ActivatedRoute,
+    private heroService: HeroService,
+    private location: Location
+  ) {}
+
+  ngOnInit(): void {
+    this.getHero();
+  }
+
+  getHero(): void {
+    const id = +this.route.snapshot.paramMap.get('id');
+    this.heroService.getHero(id)
+      .subscribe(hero => this.hero = hero);
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+ save(): void {
+    this.heroService.updateHero(this.hero)
+      .subscribe(() => this.goBack());
+  }
+}
diff --git a/aio/content/examples/universal/src/app/hero-search/hero-search.component.css b/aio/content/examples/universal/src/app/hero-search/hero-search.component.css
new file mode 100644
index 000000000000..0f2c8cdd10f2
--- /dev/null
+++ b/aio/content/examples/universal/src/app/hero-search/hero-search.component.css
@@ -0,0 +1,39 @@
+/* HeroSearch private styles */
+.search-result li {
+  border-bottom: 1px solid gray;
+  border-left: 1px solid gray;
+  border-right: 1px solid gray;
+  width:195px;
+  height: 16px;
+  padding: 5px;
+  background-color: white;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.search-result li:hover {
+  background-color: #607D8B;
+}
+
+.search-result li a {
+  color: #888;
+  display: block;
+  text-decoration: none;
+}
+
+.search-result li a:hover {
+  color: white;
+}
+.search-result li a:active {
+  color: white;
+}
+#search-box {
+  width: 200px;
+  height: 20px;
+}
+
+
+ul.search-result {
+  margin-top: 0;
+  padding-left: 0;
+}
diff --git a/aio/content/examples/universal/src/app/hero-search/hero-search.component.html b/aio/content/examples/universal/src/app/hero-search/hero-search.component.html
new file mode 100644
index 000000000000..cd0c3ffb9b4d
--- /dev/null
+++ b/aio/content/examples/universal/src/app/hero-search/hero-search.component.html
@@ -0,0 +1,13 @@
+<div id="search-component">
+  <h4>Hero Search</h4>
+
+  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
+
+  <ul class="search-result">
+    <li *ngFor="let hero of heroes | async" >
+      <a routerLink="/detail/{{hero.id}}">
+        {{hero.name}}
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/aio/content/examples/universal/src/app/hero-search/hero-search.component.spec.ts b/aio/content/examples/universal/src/app/hero-search/hero-search.component.spec.ts
new file mode 100644
index 000000000000..901bb7f2ab65
--- /dev/null
+++ b/aio/content/examples/universal/src/app/hero-search/hero-search.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroSearchComponent } from './hero-search.component';
+
+describe('HeroSearchComponent', () => {
+  let component: HeroSearchComponent;
+  let fixture: ComponentFixture<HeroSearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroSearchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/universal/src/app/hero-search/hero-search.component.ts b/aio/content/examples/universal/src/app/hero-search/hero-search.component.ts
new file mode 100644
index 000000000000..75d0907cf5d0
--- /dev/null
+++ b/aio/content/examples/universal/src/app/hero-search/hero-search.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Observable, Subject } from 'rxjs';
+
+import {
+   debounceTime, distinctUntilChanged, switchMap
+ } from 'rxjs/operators';
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'hero-search',
+  templateUrl: './hero-search.component.html',
+  styleUrls: [ './hero-search.component.css' ]
+})
+export class HeroSearchComponent implements OnInit {
+  heroes: Observable<Hero[]>;
+  private searchTerms = new Subject<string>();
+
+  constructor(private heroService: HeroService) {}
+
+  // Push a search term into the observable stream.
+  search(term: string): void {
+    this.searchTerms.next(term);
+  }
+
+  ngOnInit(): void {
+    this.heroes = this.searchTerms.pipe(
+      // wait 300ms after each keystroke before considering the term
+      debounceTime(300),
+
+      // ignore new term if same as previous term
+      distinctUntilChanged(),
+
+      // switch to new search observable each time the term changes
+      switchMap((term: string) => this.heroService.searchHeroes(term)),
+    );
+  }
+}
diff --git a/aio/content/examples/universal/src/app/hero.service.ts b/aio/content/examples/universal/src/app/hero.service.ts
new file mode 100644
index 000000000000..5762d04f09dc
--- /dev/null
+++ b/aio/content/examples/universal/src/app/hero.service.ts
@@ -0,0 +1,128 @@
+import { Injectable, Inject, Optional } from '@angular/core';
+import { APP_BASE_HREF } from '@angular/common';
+import { HttpClient, HttpHeaders }from '@angular/common/http';
+
+import { Observable, of } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
+
+import { Hero } from './hero';
+import { MessageService } from './message.service';
+
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+
+@Injectable()
+export class HeroService {
+
+  private heroesUrl = 'api/heroes';  // URL to web api
+
+  // #docregion ctor
+  constructor(
+    private http: HttpClient,
+    private messageService: MessageService,
+    @Optional() @Inject(APP_BASE_HREF) origin: string) {
+      this.heroesUrl = `${origin}${this.heroesUrl}`;
+    }
+  // #enddocregion ctor
+
+  /** GET heroes from the server */
+  getHeroes (): Observable<Hero[]> {
+    return this.http.get<Hero[]>(this.heroesUrl)
+      .pipe(
+        tap(heroes => this.log('fetched heroes')),
+        catchError(this.handleError('getHeroes', []))
+      );
+  }
+
+  /** GET hero by id. Return `undefined` when id not found */
+  getHeroNo404<Data>(id: number): Observable<Hero> {
+    const url = `${this.heroesUrl}/?id=${id}`;
+    return this.http.get<Hero[]>(url)
+      .pipe(
+        map(heroes => heroes[0]), // returns a {0|1} element array
+        tap(h => {
+          const outcome = h ? `fetched` : `did not find`;
+          this.log(`${outcome} hero id=${id}`);
+        }),
+        catchError(this.handleError<Hero>(`getHero id=${id}`))
+      );
+  }
+
+  /** GET hero by id. Will 404 if id not found */
+  getHero(id: number): Observable<Hero> {
+    const url = `${this.heroesUrl}/${id}`;
+    return this.http.get<Hero>(url).pipe(
+      tap(_ => this.log(`fetched hero id=${id}`)),
+      catchError(this.handleError<Hero>(`getHero id=${id}`))
+    );
+  }
+
+  /* GET heroes whose name contains search term */
+  searchHeroes(term: string): Observable<Hero[]> {
+    if (!term.trim()) {
+      // if not search term, return empty hero array.
+      return of([]);
+    }
+    return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
+      tap(_ => this.log(`found heroes matching "${term}"`)),
+      catchError(this.handleError<Hero[]>('searchHeroes', []))
+    );
+  }
+
+  //////// Save methods //////////
+
+  /** POST: add a new hero to the server */
+  addHero (name: string): Observable<Hero> {
+    const hero = { name };
+
+    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
+      tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
+      catchError(this.handleError<Hero>('addHero'))
+    );
+  }
+
+  /** DELETE: delete the hero from the server */
+  deleteHero (hero: Hero | number): Observable<Hero> {
+    const id = typeof hero === 'number' ? hero : hero.id;
+    const url = `${this.heroesUrl}/${id}`;
+
+    return this.http.delete<Hero>(url, httpOptions).pipe(
+      tap(_ => this.log(`deleted hero id=${id}`)),
+      catchError(this.handleError<Hero>('deleteHero'))
+    );
+  }
+
+  /** PUT: update the hero on the server */
+  updateHero (hero: Hero): Observable<any> {
+    return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
+      tap(_ => this.log(`updated hero id=${hero.id}`)),
+      catchError(this.handleError<any>('updateHero'))
+    );
+  }
+
+  /**
+   * Handle Http operation that failed.
+   * Let the app continue.
+   * @param operation - name of the operation that failed
+   * @param result - optional value to return as the observable result
+   */
+  private handleError<T> (operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
+
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      // TODO: better job of transforming error for user consumption
+      this.log(`${operation} failed: ${error.message}`);
+
+      // Let the app keep running by returning an empty result.
+      return of(result as T);
+    };
+  }
+
+  /** Log a HeroService message with the MessageService */
+  private log(message: string) {
+    this.messageService.add(`HeroService: ${message}`);
+  }
+}
diff --git a/aio/content/examples/universal/src/app/hero.ts b/aio/content/examples/universal/src/app/hero.ts
new file mode 100644
index 000000000000..e3eac516daa5
--- /dev/null
+++ b/aio/content/examples/universal/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/aio/content/examples/universal/src/app/heroes/heroes.component.css b/aio/content/examples/universal/src/app/heroes/heroes.component.css
new file mode 100644
index 000000000000..b51469d1b679
--- /dev/null
+++ b/aio/content/examples/universal/src/app/heroes/heroes.component.css
@@ -0,0 +1,74 @@
+/* HeroesComponent's private CSS styles */
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  position: relative;
+  cursor: pointer;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+
+.heroes a {
+  color: #888;
+  text-decoration: none;
+  position: relative;
+  display: block;
+  width: 250px;
+}
+
+.heroes a:hover {
+  color:#607D8B;
+}
+
+.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;
+  min-width: 16px;
+  text-align: right;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
+.button {
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+  font-family: Arial;
+}
+
+button:hover {
+  background-color: #cfd8dc;
+}
+
+button.delete {
+  position: relative;
+  left: 194px;
+  top: -32px;
+  background-color: gray !important;
+  color: white;
+}
+
diff --git a/aio/content/examples/universal/src/app/heroes/heroes.component.html b/aio/content/examples/universal/src/app/heroes/heroes.component.html
new file mode 100644
index 000000000000..8ab944cba0b4
--- /dev/null
+++ b/aio/content/examples/universal/src/app/heroes/heroes.component.html
@@ -0,0 +1,21 @@
+<h2>My Heroes</h2>
+
+<div>
+  <label>Hero name:
+    <input #heroName />
+  </label>
+  <!-- (click) passes input value to add() and then clears the input -->
+  <button (click)="add(heroName.value); heroName.value=''">
+    add
+  </button>
+</div>
+
+<ul class="heroes">
+  <li *ngFor="let hero of heroes">
+    <a routerLink="/detail/{{hero.id}}">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </a>
+    <button class="delete" title="delete hero"
+    (click)="delete(hero);$event.stopPropagation()">x</button>
+  </li>
+</ul>
diff --git a/aio/content/examples/universal/src/app/heroes/heroes.component.spec.ts b/aio/content/examples/universal/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 000000000000..9c3b1c4d9f77
--- /dev/null
+++ b/aio/content/examples/universal/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/universal/src/app/heroes/heroes.component.ts b/aio/content/examples/universal/src/app/heroes/heroes.component.ts
new file mode 100644
index 000000000000..0c99c98e4e46
--- /dev/null
+++ b/aio/content/examples/universal/src/app/heroes/heroes.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
+    this.heroService.getHeroes()
+    .subscribe(heroes => this.heroes = heroes);
+  }
+
+  add(name: string): void {
+    name = name.trim();
+    if (!name) { return; }
+    this.heroService.addHero(name)
+      .subscribe(hero => {
+        this.heroes.push(hero);
+      });
+  }
+
+  delete(hero: Hero): void {
+    this.heroService.deleteHero(hero)
+        .subscribe(() => {
+          this.heroes = this.heroes.filter(h => h !== hero);
+        });
+  }
+
+}
diff --git a/aio/content/examples/universal/src/app/in-memory-data.service.ts b/aio/content/examples/universal/src/app/in-memory-data.service.ts
new file mode 100644
index 000000000000..ff1f190f8344
--- /dev/null
+++ b/aio/content/examples/universal/src/app/in-memory-data.service.ts
@@ -0,0 +1,19 @@
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+
+export class InMemoryDataService implements InMemoryDbService {
+  createDb() {
+    const 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/universal/src/app/message.service.spec.ts b/aio/content/examples/universal/src/app/message.service.spec.ts
new file mode 100644
index 000000000000..63ecfd8ff629
--- /dev/null
+++ b/aio/content/examples/universal/src/app/message.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MessageService]
+    });
+  });
+
+  it('should be created', inject([MessageService], (service: MessageService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/aio/content/examples/universal/src/app/message.service.ts b/aio/content/examples/universal/src/app/message.service.ts
new file mode 100644
index 000000000000..1c56a49e70aa
--- /dev/null
+++ b/aio/content/examples/universal/src/app/message.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages = [];
+  }
+}
diff --git a/aio/content/examples/universal/src/app/messages/messages.component.css b/aio/content/examples/universal/src/app/messages/messages.component.css
new file mode 100644
index 000000000000..d08d9be58170
--- /dev/null
+++ b/aio/content/examples/universal/src/app/messages/messages.component.css
@@ -0,0 +1,35 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+  color: red;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: crimson;
+  font-family: Cambria, Georgia;
+}
+
+button.clear {
+  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;
+}
+button.clear {
+  color: #888;
+  margin-bottom: 12px;
+}
diff --git a/aio/content/examples/universal/src/app/messages/messages.component.html b/aio/content/examples/universal/src/app/messages/messages.component.html
new file mode 100644
index 000000000000..1df7dfd98967
--- /dev/null
+++ b/aio/content/examples/universal/src/app/messages/messages.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="messageService.messages.length">
+
+  <h2>Messages</h2>
+  <button class="clear"
+          (click)="messageService.clear()">clear</button>
+  <div *ngFor='let message of messageService.messages'> {{message}} </div>
+
+</div>
diff --git a/aio/content/examples/universal/src/app/messages/messages.component.spec.ts b/aio/content/examples/universal/src/app/messages/messages.component.spec.ts
new file mode 100644
index 000000000000..3c2b2b15372c
--- /dev/null
+++ b/aio/content/examples/universal/src/app/messages/messages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/aio/content/examples/universal/src/app/messages/messages.component.ts b/aio/content/examples/universal/src/app/messages/messages.component.ts
new file mode 100644
index 000000000000..17c8b2701f34
--- /dev/null
+++ b/aio/content/examples/universal/src/app/messages/messages.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+  constructor(public messageService: MessageService) {}
+
+  ngOnInit() {
+  }
+
+}
diff --git a/aio/content/examples/universal/src/app/mock-heroes.ts b/aio/content/examples/universal/src/app/mock-heroes.ts
new file mode 100644
index 000000000000..e84c2fd2b095
--- /dev/null
+++ b/aio/content/examples/universal/src/app/mock-heroes.ts
@@ -0,0 +1,14 @@
+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/universal/src/index.html b/aio/content/examples/universal/src/index.html
new file mode 100644
index 000000000000..1c4106381f31
--- /dev/null
+++ b/aio/content/examples/universal/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/universal/src/main.server.ts b/aio/content/examples/universal/src/main.server.ts
new file mode 100644
index 000000000000..d7c01cde7b54
--- /dev/null
+++ b/aio/content/examples/universal/src/main.server.ts
@@ -0,0 +1 @@
+export { AppServerModule } from './app/app.server.module';
diff --git a/aio/content/examples/universal/src/main.ts b/aio/content/examples/universal/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/universal/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/universal/src/tsconfig.server.json b/aio/content/examples/universal/src/tsconfig.server.json
new file mode 100644
index 000000000000..4401f4ca6569
--- /dev/null
+++ b/aio/content/examples/universal/src/tsconfig.server.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ],
+  "angularCompilerOptions": {
+    "entryModule": "app/app.server.module#AppServerModule"
+  }
+}
diff --git a/aio/content/examples/universal/webpack.server.config.js b/aio/content/examples/universal/webpack.server.config.js
new file mode 100644
index 000000000000..0cb1717aecec
--- /dev/null
+++ b/aio/content/examples/universal/webpack.server.config.js
@@ -0,0 +1,32 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  entry: { server: './server.ts' },
+  resolve: { extensions: ['.js', '.ts'] },
+  target: 'node',
+  mode: 'none',
+  // this makes sure we include node_modules and other 3rd party libraries
+  externals: [/node_modules/],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [{ test: /\.ts$/, loader: 'ts-loader' }]
+  },
+  plugins: [
+    // Temporary Fix for issue: https://github.com/angular/angular/issues/11580
+    // for 'WARNING Critical dependency: the request of a dependency is an expression'
+    new webpack.ContextReplacementPlugin(
+      /(.+)?angular(\\|\/)core(.+)?/,
+      path.join(__dirname, 'src'), // location of your src
+      {} // a map of your routes
+    ),
+    new webpack.ContextReplacementPlugin(
+      /(.+)?express(\\|\/)(.+)?/,
+      path.join(__dirname, 'src'),
+      {}
+    )
+  ]
+};
diff --git a/aio/content/examples/universal/zipper.json b/aio/content/examples/universal/zipper.json
new file mode 100644
index 000000000000..37b42ad64318
--- /dev/null
+++ b/aio/content/examples/universal/zipper.json
@@ -0,0 +1,9 @@
+{
+  "files":[
+    "!dist/",
+    "!**/*.d.ts",
+    "!**/src/**/*.js"
+  ],
+  "removeSystemJsConfig": false,
+  "type": "universal"
+}
diff --git a/aio/content/examples/upgrade-module/.gitignore b/aio/content/examples/upgrade-module/.gitignore
new file mode 100644
index 000000000000..7f5c313a3e54
--- /dev/null
+++ b/aio/content/examples/upgrade-module/.gitignore
@@ -0,0 +1,7 @@
+**/*.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-module/e2e-spec.ts b/aio/content/examples/upgrade-module/e2e-spec.ts
new file mode 100644
index 000000000000..5c32ccd34738
--- /dev/null
+++ b/aio/content/examples/upgrade-module/e2e-spec.ts
@@ -0,0 +1,165 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Upgrade Tests', function () {
+
+  beforeAll(function () {
+    // Set protractor to hybrid mode.
+    browser.rootEl = 'body';
+    browser.ng12Hybrid = true;
+  });
+
+  describe('AngularJS Auto-bootstrap', function() {
+
+    beforeAll(function () {
+      browser.get('/index-ng-app.html');
+    });
+
+    it('bootstraps as expected', function () {
+      expect(element(by.css('#message')).getText()).toEqual('Hello world');
+    });
+
+  });
+
+  describe('AngularJS JavaScript Bootstrap', function() {
+
+    beforeAll(function () {
+      browser.get('/index-bootstrap.html');
+    });
+
+    it('bootstraps as expected', function () {
+      expect(element(by.css('#message')).getText()).toEqual('Hello world');
+    });
+
+  });
+
+  describe('AngularJS-Angular Hybrid Bootstrap', function() {
+
+    beforeAll(function () {
+      browser.get('/index-ajs-a-hybrid-bootstrap.html');
+    });
+
+    it('bootstraps as expected', function () {
+      expect(element(by.css('#message')).getText()).toEqual('Hello world');
+    });
+
+  });
+
+  describe('Upgraded static component', function() {
+
+    beforeAll(function () {
+      browser.get('/index-upgrade-static.html');
+    });
+
+    it('renders', function () {
+      expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
+    });
+
+  });
+
+
+  describe('Upgraded component with IO', function() {
+
+    beforeAll(function () {
+      browser.get('/index-upgrade-io.html');
+    });
+
+    it('has inputs', function () {
+      expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
+    });
+
+    it('has outputs', function () {
+      element(by.buttonText('Delete')).click();
+      expect(element(by.css('h2')).getText()).toEqual('Ex-Windstorm details!');
+    });
+
+  });
+
+
+  describe('Downgraded static component', function() {
+
+    beforeAll(function () {
+      browser.get('/index-downgrade-static.html');
+    });
+
+    it('renders', function () {
+      expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
+    });
+
+  });
+
+  describe('Downgraded component with IO', function() {
+
+    beforeAll(function () {
+      browser.get('/index-downgrade-io.html');
+    });
+
+    it('has inputs', function () {
+      expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!');
+    });
+
+    it('has outputs', function () {
+      element.all(by.buttonText('Delete')).first().click();
+      expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!');
+    });
+
+    it('supports ng-repeat', function () {
+      expect(element.all(by.css('hero-detail')).count()).toBe(3);
+    });
+
+  });
+
+
+  describe('Downgraded component with content projection', function() {
+
+    beforeAll(function () {
+      browser.get('/index-ajs-to-a-projection.html');
+    });
+
+    it('can be transcluded into', function () {
+      expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds');
+    });
+
+  });
+
+
+  describe('Upgraded component with transclusion', function() {
+
+    beforeAll(function () {
+      browser.get('/index-a-to-ajs-transclusion.html');
+    });
+
+    it('can be projected into', function () {
+      expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds');
+    });
+
+  });
+
+
+  describe('Upgrading AngularJS Providers', function() {
+
+    beforeAll(function () {
+      browser.get('/index-ajs-to-a-providers.html');
+    });
+
+    it('works', function () {
+      expect(element(by.css('h2')).getText()).toBe('1: Windstorm');
+    });
+
+  });
+
+
+  describe('Downgrading Angular Providers', function() {
+
+    beforeAll(function () {
+      browser.get('/index-a-to-ajs-providers.html');
+    });
+
+    it('works', function () {
+      expect(element(by.css('h2')).getText()).toBe('1: Windstorm');
+    });
+
+  });
+
+});
diff --git a/aio/content/examples/upgrade-module/example-config.json b/aio/content/examples/upgrade-module/example-config.json
new file mode 100644
index 000000000000..61227cc07aa7
--- /dev/null
+++ b/aio/content/examples/upgrade-module/example-config.json
@@ -0,0 +1,3 @@
+{
+  "projectType": "systemjs"
+}
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
new file mode 100644
index 000000000000..2ac7ee76bf27
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts
@@ -0,0 +1,35 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+import { heroDetailComponent } from './hero-detail.component';
+
+// #docregion ngmodule, register
+import { Heroes } from './heroes';
+// #enddocregion register
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  providers: [ Heroes ]
+})
+export class AppModule {
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
+}
+// #enddocregion ngmodule
+// #docregion register
+import { downgradeInjectable } from '@angular/upgrade/static';
+
+angular.module('heroApp', [])
+  .factory('heroes', downgradeInjectable(Heroes))
+  .component('heroDetail', heroDetailComponent);
+// #enddocregion register
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts
new file mode 100644
index 000000000000..dd7aa10d7976
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts
@@ -0,0 +1,11 @@
+import { Heroes } from './heroes';
+
+// #docregion
+export const heroDetailComponent = {
+  template: `
+    <h2>{{$ctrl.hero.id}}: {{$ctrl.hero.name}}</h2>
+  `,
+  controller: ['heroes', function(heroes: Heroes) {
+    this.hero = heroes.get()[0];
+  }]
+};
diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts
new file mode 100644
index 000000000000..f5f6d87ed865
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Hero } from '../hero';
+
+@Injectable()
+export class Heroes {
+  get() {
+    return [
+      new Hero(1, 'Windstorm'),
+      new Hero(2, 'Spiderman')
+    ];
+  }
+}
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
new file mode 100644
index 000000000000..e95104cbccc7
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts
@@ -0,0 +1,39 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { heroDetail, HeroDetailDirective } from './hero-detail.component';
+import { ContainerComponent } from './container.component';
+
+// #docregion heroupgrade
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    ContainerComponent,
+    HeroDetailDirective
+  ],
+  entryComponents: [
+    ContainerComponent
+  ]
+})
+export class AppModule {
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
+}
+// #enddocregion heroupgrade
+
+angular.module('heroApp', [])
+  .component('heroDetail', heroDetail)
+  .directive(
+    'myContainer',
+    downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts
new file mode 100644
index 000000000000..1b740d6554c7
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'my-container',
+  template: `
+    <hero-detail [hero]="hero">
+      <!-- Everything here will get transcluded -->
+      <p>{{hero.description}}</p>
+    </hero-detail>
+  `
+})
+export class ContainerComponent {
+  hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
+}
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
new file mode 100644
index 000000000000..9d467a5411fd
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts
@@ -0,0 +1,29 @@
+// #docregion
+export const heroDetail = {
+  bindings: {
+    hero: '='
+  },
+  template: `
+    <h2>{{$ctrl.hero.name}}</h2>
+    <div>
+      <ng-transclude></ng-transclude>
+    </div>
+  `,
+  transclude: true
+};
+// #enddocregion
+
+import { Directive, ElementRef, Injector, Input } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+import { Hero } from '../hero';
+
+@Directive({
+  selector: 'hero-detail'
+})
+export class HeroDetailDirective extends UpgradeComponent {
+  @Input() hero: Hero;
+
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('heroDetail', elementRef, injector);
+  }
+}
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
new file mode 100644
index 000000000000..3b8794d4de77
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts
@@ -0,0 +1,29 @@
+declare var angular: angular.IAngularStatic;
+// #docregion ngmodule
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ]
+})
+export class AppModule {
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
+}
+// #enddocregion ngmodule
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
+
+// #docregion bootstrap
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+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
new file mode 100644
index 000000000000..15dc5743c277
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts
@@ -0,0 +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 });
+  // #enddocregion bootstrap
+});
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts
new file mode 100644
index 000000000000..904f7578b858
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts
@@ -0,0 +1,4 @@
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
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
new file mode 100644
index 000000000000..ab48681354ed
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts
@@ -0,0 +1,36 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { MainController } from './main.controller';
+import { HeroDetailComponent } from './hero-detail.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+})
+export class AppModule {
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
+}
+
+angular.module('heroApp', [])
+  .controller('MainController', MainController)
+  .directive('heroDetail', downgradeComponent({
+    component: HeroDetailComponent,
+    inputs: ['hero']
+  }) as angular.IDirectiveFactory);
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts
new file mode 100644
index 000000000000..7a2956eb2614
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'hero-detail',
+  template: `
+    <h2>{{hero.name}}</h2>
+    <div>
+      <ng-content></ng-content>
+    </div>
+  `
+})
+export class HeroDetailComponent {
+  @Input() hero: Hero;
+}
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts
new file mode 100644
index 000000000000..c6041ac7888e
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts
@@ -0,0 +1,5 @@
+import { Hero } from '../hero';
+
+export class MainController {
+  hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
+}
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts
new file mode 100644
index 000000000000..52d4e74a1fc6
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { HeroesService } from './heroes.service';
+
+export function heroesServiceFactory(i: any) {
+  return i.get('heroes');
+}
+
+export const heroesServiceProvider = {
+  provide: HeroesService,
+  useFactory: heroesServiceFactory,
+  deps: ['$injector']
+};
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
new file mode 100644
index 000000000000..8386a995f4f8
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts
@@ -0,0 +1,44 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroesService } from './heroes.service';
+// #docregion register
+import { heroesServiceProvider } from './ajs-upgraded-providers';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  providers: [
+    heroesServiceProvider
+  ],
+  // #enddocregion register
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+// #docregion register
+})
+export class AppModule {
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
+}
+// #enddocregion register
+
+angular.module('heroApp', [])
+  .service('heroes', HeroesService)
+  .directive(
+    'heroDetail',
+    downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts
new file mode 100644
index 000000000000..b02f85b99a5c
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts
@@ -0,0 +1,17 @@
+// #docregion
+import { Component } from '@angular/core';
+import { HeroesService } from './heroes.service';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'hero-detail',
+  template: `
+    <h2>{{hero.id}}: {{hero.name}}</h2>
+  `
+})
+export class HeroDetailComponent {
+  hero: Hero;
+  constructor(heroes: HeroesService) {
+    this.hero = heroes.get()[0];
+  }
+}
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts
new file mode 100644
index 000000000000..4a258e205a61
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Hero } from '../hero';
+
+export class HeroesService {
+  get() {
+    return [
+      new Hero(1, 'Windstorm'),
+      new Hero(2, 'Spiderman')
+    ];
+  }
+}
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
new file mode 100644
index 000000000000..22dd29ae6d33
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts
@@ -0,0 +1,39 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { MainController } from './main.controller';
+
+// #docregion downgradecomponent
+import { HeroDetailComponent } from './hero-detail.component';
+
+// #enddocregion downgradecomponent
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+})
+export class AppModule {
+  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}) as angular.IDirectiveFactory);
+
+// #enddocregion downgradecomponent
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
new file mode 100644
index 000000000000..94082813fdf4
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'hero-detail',
+  template: `
+    <h2>{{hero.name}} details!</h2>
+    <div><label>id: </label>{{hero.id}}</div>
+    <button (click)="onDelete()">Delete</button>
+  `
+})
+export class HeroDetailComponent {
+  @Input() hero: Hero;
+  @Output() deleted = new EventEmitter<Hero>();
+  onDelete() {
+    this.deleted.emit(this.hero);
+  }
+}
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts
new file mode 100644
index 000000000000..d50272073f23
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts
@@ -0,0 +1,12 @@
+import { Hero } from '../hero';
+
+export class MainController {
+  hero = new Hero(1, 'Windstorm');
+  heroes = [
+    new Hero(2, 'Superman'),
+    new Hero(3, 'Spiderman')
+  ];
+  onDelete(hero: Hero) {
+    hero.name = 'Ex-' + hero.name;
+  }
+}
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
new file mode 100644
index 000000000000..5925082197e5
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts
@@ -0,0 +1,42 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+// #docregion downgradecomponent, ngmodule
+import { HeroDetailComponent } from './hero-detail.component';
+
+// #enddocregion downgradecomponent
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+})
+export class AppModule {
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
+}
+// #enddocregion ngmodule
+// #docregion downgradecomponent
+
+import { downgradeComponent } from '@angular/upgrade/static';
+
+angular.module('heroApp', [])
+  .directive(
+    'heroDetail',
+    downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory
+  );
+
+// #enddocregion downgradecomponent
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts
new file mode 100644
index 000000000000..df4a705f37c9
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-detail',
+  template: `
+    <h2>Windstorm details!</h2>
+    <div><label>id: </label>1</div>
+  `
+})
+export class HeroDetailComponent { }
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
new file mode 100644
index 000000000000..23fc7853d7cf
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts
@@ -0,0 +1,22 @@
+// #docregion
+export function heroDetailDirective() {
+  return {
+    restrict: 'E',
+    scope: {},
+    bindToController: {
+      hero: '=',
+      deleted: '&'
+    },
+    template: `
+      <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'
+  };
+}
diff --git a/aio/content/examples/upgrade-module/src/app/hero.ts b/aio/content/examples/upgrade-module/src/app/hero.ts
new file mode 100644
index 000000000000..5dcb5664eb35
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/hero.ts
@@ -0,0 +1,5 @@
+export class Hero {
+  constructor(public id: number,
+              public name: string,
+              public description?: string) { }
+}
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
new file mode 100644
index 000000000000..e95104cbccc7
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts
@@ -0,0 +1,39 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { heroDetail, HeroDetailDirective } from './hero-detail.component';
+import { ContainerComponent } from './container.component';
+
+// #docregion heroupgrade
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    ContainerComponent,
+    HeroDetailDirective
+  ],
+  entryComponents: [
+    ContainerComponent
+  ]
+})
+export class AppModule {
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
+}
+// #enddocregion heroupgrade
+
+angular.module('heroApp', [])
+  .component('heroDetail', heroDetail)
+  .directive(
+    'myContainer',
+    downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts
new file mode 100644
index 000000000000..8d76085174d9
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Component } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'my-container',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <hero-detail [hero]="hero"
+                 (deleted)="heroDeleted($event)">
+    </hero-detail>
+  `
+})
+export class ContainerComponent {
+  hero = new Hero(1, 'Windstorm');
+  heroDeleted(hero: Hero) {
+    hero.name = 'Ex-' + hero.name;
+  }
+}
diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts
new file mode 100644
index 000000000000..90c32730108b
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts
@@ -0,0 +1,37 @@
+// #docregion
+// #docregion hero-detail-io
+export const heroDetail = {
+  bindings: {
+    hero: '<',
+    deleted: '&'
+  },
+  template: `
+    <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(this.hero);
+    };
+  }
+};
+// #enddocregion hero-detail-io
+
+// #docregion hero-detail-io-upgrade
+import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+import { Hero } from '../hero';
+
+@Directive({
+  selector: 'hero-detail'
+})
+export class HeroDetailDirective extends UpgradeComponent {
+  @Input() hero: Hero;
+  @Output() deleted: EventEmitter<Hero>;
+
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('heroDetail', elementRef, injector);
+  }
+}
+// #enddocregion hero-detail-io-upgrade
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
new file mode 100644
index 000000000000..d6377ecda8a8
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts
@@ -0,0 +1,41 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { heroDetail, HeroDetailDirective } from './hero-detail.component';
+import { ContainerComponent } from './container.component';
+
+// #docregion hero-detail-upgrade
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailDirective,
+    // #enddocregion hero-detail-upgrade
+    ContainerComponent
+  ],
+  entryComponents: [
+    ContainerComponent
+  // #docregion hero-detail-upgrade
+  ]
+})
+export class AppModule {
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
+}
+// #enddocregion hero-detail-upgrade
+
+angular.module('heroApp', [])
+  .component('heroDetail', heroDetail)
+  .directive(
+    'myContainer',
+    downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts
new file mode 100644
index 000000000000..c28e5ea42df9
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-container',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <hero-detail></hero-detail>
+  `
+})
+export class ContainerComponent { }
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
new file mode 100644
index 000000000000..7e649022f20b
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts
@@ -0,0 +1,25 @@
+// #docregion
+// #docregion hero-detail
+export const heroDetail = {
+  template: `
+    <h2>Windstorm details!</h2>
+    <div><label>id: </label>1</div>
+  `,
+  controller: function() {
+  }
+};
+// #enddocregion hero-detail
+
+// #docregion hero-detail-upgrade
+import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+
+@Directive({
+  selector: 'hero-detail'
+})
+export class HeroDetailDirective extends UpgradeComponent {
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('heroDetail', elementRef, injector);
+  }
+}
+// #enddocregion hero-detail-upgrade
diff --git a/aio/content/examples/upgrade-module/src/app/villain.ts b/aio/content/examples/upgrade-module/src/app/villain.ts
new file mode 100644
index 000000000000..ef3d014f1184
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/app/villain.ts
@@ -0,0 +1,5 @@
+export class Villain {
+  constructor(public id: number,
+              public name: string,
+              public description?: string) { }
+}
diff --git a/aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html b/aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html
new file mode 100644
index 000000000000..33a897868be9
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <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/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/a-to-ajs-providers/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <hero-detail>
+      </hero-detail>
+    </hero-app>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html b/aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html
new file mode 100644
index 000000000000..767ce3312bf7
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <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/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/a-to-ajs-transclusion/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <my-container></my-container>
+    </hero-app>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html b/aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html
new file mode 100644
index 000000000000..7bcc58d0ee3e
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <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/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+    System.import('app/ajs-a-hybrid-bootstrap/app.module')
+          .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html b/aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html
new file mode 100644
index 000000000000..a49e5070df1e
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <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/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/ajs-to-a-projection/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <!-- #docregion usecomponent -->
+      <div ng-controller="MainController as mainCtrl">
+        <hero-detail [hero]="mainCtrl.hero">
+          <!-- Everything here will get projected -->
+          <p>{{mainCtrl.hero.description}}</p>
+        </hero-detail>
+      </div>
+      <!-- #enddocregion usecomponent -->
+    </hero-app>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html b/aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html
new file mode 100644
index 000000000000..a0cc20d068c1
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <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/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/ajs-to-a-providers/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <hero-detail>
+      </hero-detail>
+    </hero-app>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/index-bootstrap.html b/aio/content/examples/upgrade-module/src/index-bootstrap.html
new file mode 100644
index 000000000000..8d9534f95cdf
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-bootstrap.html
@@ -0,0 +1,13 @@
+<!-- #docregion -->
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <base href="/">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="app/ajs-bootstrap/app.module.js"></script>
+  </head>
+
+  <body>
+    <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/index-downgrade-io.html b/aio/content/examples/upgrade-module/src/index-downgrade-io.html
new file mode 100644
index 000000000000..0d71f04404b6
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-downgrade-io.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <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/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/downgrade-io/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <!-- #docregion usecomponent -->
+      <div ng-controller="MainController as mainCtrl">
+        <hero-detail [hero]="mainCtrl.hero"
+                     (deleted)="mainCtrl.onDelete($event)">
+        </hero-detail>
+      </div>
+      <!-- #enddocregion usecomponent -->
+      <!-- #docregion userepeatedcomponent -->
+      <div ng-controller="MainController as mainCtrl">
+        <hero-detail [hero]="hero"
+                     (deleted)="mainCtrl.onDelete($event)"
+                     ng-repeat="hero in mainCtrl.heroes">
+        </hero-detail>
+      </div>
+      <!-- #enddocregion userepeatedcomponent-->
+    </hero-app>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/index-downgrade-static.html b/aio/content/examples/upgrade-module/src/index-downgrade-static.html
new file mode 100644
index 000000000000..fe4e327292ef
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-downgrade-static.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <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/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/downgrade-static/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <!-- #docregion usecomponent -->
+      <hero-detail></hero-detail>
+      <!-- #enddocregion usecomponent -->
+    </hero-app>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/index-ng-app.html b/aio/content/examples/upgrade-module/src/index-ng-app.html
new file mode 100644
index 000000000000..3bf6233bebcf
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-ng-app.html
@@ -0,0 +1,15 @@
+<!-- #docregion -->
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <base href="/">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="app/ajs-ng-app/app.module.js"></script>
+  </head>
+
+  <body ng-app="heroApp" ng-strict-di>
+    <div id="message" ng-controller="MainCtrl as mainCtrl">
+      {{ mainCtrl.message }}
+    </div>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/index-upgrade-io.html b/aio/content/examples/upgrade-module/src/index-upgrade-io.html
new file mode 100644
index 000000000000..7d87a2fa274b
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-upgrade-io.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <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/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/upgrade-io/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <my-container></my-container>
+    </hero-app>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/index-upgrade-static.html b/aio/content/examples/upgrade-module/src/index-upgrade-static.html
new file mode 100644
index 000000000000..bd36796c5518
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/index-upgrade-static.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <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/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/upgrade-static/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <my-container></my-container>
+    </hero-app>
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-module/src/systemjs.config.1.js b/aio/content/examples/upgrade-module/src/systemjs.config.1.js
new file mode 100644
index 000000000000..67e5fa54649e
--- /dev/null
+++ b/aio/content/examples/upgrade-module/src/systemjs.config.1.js
@@ -0,0 +1,42 @@
+/**
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    paths: {
+      // paths serve as alias
+      'npm:': 'node_modules/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      app: 'app',
+      // 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',
+      // #docregion upgrade-static-umd
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
+      // #enddocregion upgrade-static-umd
+
+      // other libraries
+      'rxjs': 'npm:rxjs',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      'app': { main: './main.js', defaultExtension: 'js' },
+      'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs': { main: 'index.js', defaultExtension: 'js' },
+    }
+  });
+})(this);
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/README.md b/aio/content/examples/upgrade-phonecat-1-typescript/README.md
new file mode 100644
index 000000000000..f3433b901ae9
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/README.md
@@ -0,0 +1,34 @@
+This is the Angular Phonecat application adjusted to fit our boilerplate project
+structure.
+
+The following changes from vanilla Phonecat are applied:
+
+* The TypeScript config file shown in the guide is `tsconfig.ajs.json` instead
+  of the default, because we don't want to enable `noImplicitAny` for migration.
+* 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.
+* Instead of using Bower, AngularJS and its dependencies are fetched from a CDN
+  in index.html and karma.conf.ajs.js.
+* E2E tests have been moved to the parent directory, where `gulp 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
+
+You'll find the app under the /app path: http://localhost:3002/app/index.html
+
+## Running unit tests
+
+    ./run-unit-tests.sh
+
+## Running E2E tests
+
+Like for any example (at the project root):
+
+    gulp run-e2e-tests --filter=phonecat-1
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/app.animations.css b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.animations.css
new file mode 100644
index 000000000000..175320b509e3
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.animations.css
@@ -0,0 +1,67 @@
+/* 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-1-typescript/app/app.animations.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts
new file mode 100644
index 000000000000..f0739b640503
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts
@@ -0,0 +1,43 @@
+'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-1-typescript/app/app.config.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts
new file mode 100644
index 000000000000..1d16f67fbe04
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts
@@ -0,0 +1,18 @@
+// #docregion
+angular.
+  module('phonecatApp').
+  config(['$locationProvider', '$routeProvider',
+    function config($locationProvider: angular.ILocationProvider,
+                    $routeProvider: angular.route.IRouteProvider) {
+      $locationProvider.hashPrefix('!');
+
+      $routeProvider.
+        when('/phones', {
+          template: '<phone-list></phone-list>'
+        }).
+        when('/phones/:phoneId', {
+          template: '<phone-detail></phone-detail>'
+        }).
+        otherwise('/phones');
+    }
+  ]);
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/app.css b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.css
new file mode 100644
index 000000000000..f4b45b02a5b1
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.css
@@ -0,0 +1,93 @@
+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-1-typescript/app/app.module.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts
new file mode 100644
index 000000000000..ab6d353eeb85
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts
@@ -0,0 +1,10 @@
+'use strict';
+
+// Define the `phonecatApp` module
+angular.module('phonecatApp', [
+  'ngAnimate',
+  'ngRoute',
+  'core',
+  'phoneDetail',
+  'phoneList',
+]);
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts
new file mode 100644
index 000000000000..1b2d77c30cd9
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts
@@ -0,0 +1,14 @@
+'use strict';
+
+describe('checkmark', () => {
+
+  beforeEach(angular.mock.module('core'));
+
+  it('should convert boolean values to unicode checkmark or cross',
+    inject(function(checkmarkFilter: (v: boolean) => string) {
+      expect(checkmarkFilter(true)).toBe('\u2713');
+      expect(checkmarkFilter(false)).toBe('\u2718');
+    })
+  );
+
+});
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts
new file mode 100644
index 000000000000..3114dc968186
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts
@@ -0,0 +1,8 @@
+// #docregion
+angular.
+  module('core').
+  filter('checkmark', function() {
+    return function(input: boolean) {
+      return input ? '\u2713' : '\u2718';
+    };
+  });
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/core/core.module.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/core.module.ts
new file mode 100644
index 000000000000..84a91dc7a685
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/core.module.ts
@@ -0,0 +1,4 @@
+'use strict';
+
+// Define the `core` module
+angular.module('core', ['core.phone']);
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.module.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.module.ts
new file mode 100644
index 000000000000..0b6b34889977
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.module.ts
@@ -0,0 +1,4 @@
+'use strict';
+
+// Define the `core.phone` module
+angular.module('core.phone', ['ngResource']);
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts
new file mode 100644
index 000000000000..312036d71d44
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts
@@ -0,0 +1,43 @@
+'use strict';
+
+describe('Phone', () => {
+  let $httpBackend: angular.IHttpBackendService;
+  let Phone: any;
+  let phonesData = [
+    {name: 'Phone X'},
+    {name: 'Phone Y'},
+    {name: 'Phone Z'}
+  ];
+
+  // Add a custom equality tester before each test
+  beforeEach(function() {
+    jasmine.addCustomEqualityTester(angular.equals);
+  });
+
+  // Load the module that contains the `Phone` service before each test
+  beforeEach(angular.mock.module('core.phone'));
+
+  // Instantiate the service and "train" `$httpBackend` before each test
+  beforeEach(inject(function(_$httpBackend_: angular.IHttpBackendService, _Phone_: any) {
+    $httpBackend = _$httpBackend_;
+    $httpBackend.expectGET('phones/phones.json').respond(phonesData);
+
+    Phone = _Phone_;
+  }));
+
+  // Verify that there are no outstanding expectations or requests after each test
+  afterEach(() => {
+    $httpBackend.verifyNoOutstandingExpectation();
+    $httpBackend.verifyNoOutstandingRequest();
+  });
+
+  it('should fetch the phones data from `/phones/phones.json`', () => {
+    let phones = Phone.query();
+
+    expect(phones).toEqual([]);
+
+    $httpBackend.flush();
+    expect(phones).toEqual(phonesData);
+  });
+
+});
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts
new file mode 100644
index 000000000000..c6204bc8960b
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts
@@ -0,0 +1,14 @@
+// #docregion
+angular.
+  module('core.phone').
+  factory('Phone', ['$resource',
+    function($resource: angular.resource.IResourceService) {
+      return $resource('phones/:phoneId.json', {}, {
+        query: {
+          method: 'GET',
+          params: {phoneId: 'phones'},
+          isArray: true
+        }
+      });
+    }
+  ]);
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.0.jpg
new file mode 100644
index 000000000000..7ce0dce4ee9e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.1.jpg
new file mode 100644
index 000000000000..ed8cad89fba4
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.2.jpg
new file mode 100644
index 000000000000..c83529e0f9c8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.3.jpg
new file mode 100644
index 000000000000..cd2c30280da8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.4.jpg
new file mode 100644
index 000000000000..b4d8472da88c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.4.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.0.jpg
new file mode 100644
index 000000000000..2446159e937d
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.1.jpg
new file mode 100644
index 000000000000..867f207459f3
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.2.jpg
new file mode 100644
index 000000000000..27d78338c4df
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.3.jpg
new file mode 100644
index 000000000000..29459a68a4dd
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.0.jpg
new file mode 100644
index 000000000000..a6c993291eef
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.1.jpg
new file mode 100644
index 000000000000..400b89e2df44
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.2.jpg
new file mode 100644
index 000000000000..86b55d28dd4c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.3.jpg
new file mode 100644
index 000000000000..85ec293ae54c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.4.jpg
new file mode 100644
index 000000000000..75ef1464cb8d
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.4.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.5.jpg
new file mode 100644
index 000000000000..4d42db43305b
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.5.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.0.jpg
new file mode 100644
index 000000000000..bf6954bbd5a8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.1.jpg
new file mode 100644
index 000000000000..659688a47d72
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.2.jpg
new file mode 100644
index 000000000000..ce0ff1002e40
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.0.jpg
new file mode 100644
index 000000000000..0952bc79c2c8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.1.jpg
new file mode 100644
index 000000000000..f33004dd7f53
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.2.jpg
new file mode 100644
index 000000000000..c5c63621f126
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.3.jpg
new file mode 100644
index 000000000000..e51f75b0edcf
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/index.html b/aio/content/examples/upgrade-phonecat-1-typescript/app/index.html
new file mode 100644
index 000000000000..82717fb7ee93
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en" ng-app="phonecatApp">
+  <head>
+    <meta charset="utf-8">
+    <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.js"></script>
+    <script src="app.config.js"></script>
+    <script src="app.animations.js"></script>
+    <script src="core/core.module.js"></script>
+    <script src="core/checkmark/checkmark.filter.js"></script>
+    <script src="core/phone/phone.module.js"></script>
+    <script src="core/phone/phone.service.js"></script>
+    <script src="phone-list/phone-list.module.js"></script>
+    <script src="phone-list/phone-list.component.js"></script>
+    <script src="phone-detail/phone-detail.module.js"></script>
+    <script src="phone-detail/phone-detail.component.js"></script>
+  </head>
+  <body>
+
+    <div class="view-container">
+      <div ng-view class="view-frame"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts
new file mode 100644
index 000000000000..0998b638f0a5
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts
@@ -0,0 +1,38 @@
+// #docregion
+describe('phoneDetail', () => {
+
+  // Load the module that contains the `phoneDetail` component before each test
+  beforeEach(angular.mock.module('phoneDetail'));
+
+  // Test the controller
+  describe('PhoneDetailController', () => {
+    let $httpBackend: angular.IHttpBackendService;
+    let ctrl: any;
+    let xyzPhoneData = {
+      name: 'phone xyz',
+      images: ['image/url1.png', 'image/url2.png']
+    };
+
+    beforeEach(inject(($componentController: any,
+                       _$httpBackend_: angular.IHttpBackendService,
+                       $routeParams: angular.route.IRouteParamsService) => {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData);
+
+      $routeParams['phoneId'] = 'xyz';
+
+      ctrl = $componentController('phoneDetail');
+    }));
+
+    it('should fetch the phone details', () => {
+      jasmine.addCustomEqualityTester(angular.equals);
+
+      expect(ctrl.phone).toEqual({});
+
+      $httpBackend.flush();
+      expect(ctrl.phone).toEqual(xyzPhoneData);
+    });
+
+  });
+
+});
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts
new file mode 100644
index 000000000000..079b31e2c20c
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts
@@ -0,0 +1,24 @@
+// #docregion
+class PhoneDetailController {
+  phone: any;
+  mainImageUrl: string;
+
+  static $inject = ['$routeParams', 'Phone'];
+  constructor($routeParams: angular.route.IRouteParamsService, Phone: any) {
+    let phoneId = $routeParams['phoneId'];
+    this.phone = Phone.get({phoneId}, (phone: any) => {
+      this.setImage(phone.images[0]);
+    });
+  }
+
+  setImage(imageUrl: string) {
+    this.mainImageUrl = imageUrl;
+  }
+}
+
+angular.
+  module('phoneDetail').
+  component('phoneDetail', {
+    templateUrl: 'phone-detail/phone-detail.template.html',
+    controller: PhoneDetailController
+  });
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts
new file mode 100644
index 000000000000..fd7cb3b92084
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts
@@ -0,0 +1,7 @@
+'use strict';
+
+// Define the `phoneDetail` module
+angular.module('phoneDetail', [
+  'ngRoute',
+  'core.phone'
+]);
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html
new file mode 100644
index 000000000000..f48657803cfb
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html
@@ -0,0 +1,117 @@
+<div class="phone-images">
+  <img ng-src="{{img}}" class="phone"
+      ng-class="{selected: img === $ctrl.mainImageUrl}"
+      ng-repeat="img in $ctrl.phone.images" />
+</div>
+
+<h1>{{$ctrl.phone.name}}</h1>
+
+<p>{{$ctrl.phone.description}}</p>
+
+<ul class="phone-thumbs">
+  <li ng-repeat="img in $ctrl.phone.images">
+    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
+  </li>
+</ul>
+
+<ul class="specs">
+  <li>
+    <span>Availability and Networks</span>
+    <dl>
+      <dt>Availability</dt>
+      <dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Battery</span>
+    <dl>
+      <dt>Type</dt>
+      <dd>{{$ctrl.phone.battery.type}}</dd>
+      <dt>Talk Time</dt>
+      <dd>{{$ctrl.phone.battery.talkTime}}</dd>
+      <dt>Standby time (max)</dt>
+      <dd>{{$ctrl.phone.battery.standbyTime}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Storage and Memory</span>
+    <dl>
+      <dt>RAM</dt>
+      <dd>{{$ctrl.phone.storage.ram}}</dd>
+      <dt>Internal Storage</dt>
+      <dd>{{$ctrl.phone.storage.flash}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Connectivity</span>
+    <dl>
+      <dt>Network Support</dt>
+      <dd>{{$ctrl.phone.connectivity.cell}}</dd>
+      <dt>WiFi</dt>
+      <dd>{{$ctrl.phone.connectivity.wifi}}</dd>
+      <dt>Bluetooth</dt>
+      <dd>{{$ctrl.phone.connectivity.bluetooth}}</dd>
+      <dt>Infrared</dt>
+      <dd>{{$ctrl.phone.connectivity.infrared | checkmark}}</dd>
+      <dt>GPS</dt>
+      <dd>{{$ctrl.phone.connectivity.gps | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Android</span>
+    <dl>
+      <dt>OS Version</dt>
+      <dd>{{$ctrl.phone.android.os}}</dd>
+      <dt>UI</dt>
+      <dd>{{$ctrl.phone.android.ui}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Size and Weight</span>
+    <dl>
+      <dt>Dimensions</dt>
+      <dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd>
+      <dt>Weight</dt>
+      <dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Display</span>
+    <dl>
+      <dt>Screen size</dt>
+      <dd>{{$ctrl.phone.display.screenSize}}</dd>
+      <dt>Screen resolution</dt>
+      <dd>{{$ctrl.phone.display.screenResolution}}</dd>
+      <dt>Touch screen</dt>
+      <dd>{{$ctrl.phone.display.touchScreen | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Hardware</span>
+    <dl>
+      <dt>CPU</dt>
+      <dd>{{$ctrl.phone.hardware.cpu}}</dd>
+      <dt>USB</dt>
+      <dd>{{$ctrl.phone.hardware.usb}}</dd>
+      <dt>Audio / headphone jack</dt>
+      <dd>{{$ctrl.phone.hardware.audioJack}}</dd>
+      <dt>FM Radio</dt>
+      <dd>{{$ctrl.phone.hardware.fmRadio | checkmark}}</dd>
+      <dt>Accelerometer</dt>
+      <dd>{{$ctrl.phone.hardware.accelerometer | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Camera</span>
+    <dl>
+      <dt>Primary</dt>
+      <dd>{{$ctrl.phone.camera.primary}}</dd>
+      <dt>Features</dt>
+      <dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Additional Features</span>
+    <dd>{{$ctrl.phone.additionalFeatures}}</dd>
+  </li>
+</ul>
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts
new file mode 100644
index 000000000000..19e189081716
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts
@@ -0,0 +1,36 @@
+'use strict';
+
+describe('phoneList', () => {
+
+  // Load the module that contains the `phoneList` component before each test
+  beforeEach(angular.mock.module('phoneList'));
+
+  // Test the controller
+  describe('PhoneListController', () => {
+    let $httpBackend: angular.IHttpBackendService;
+    let ctrl: any;
+
+    beforeEach(inject(($componentController: any, _$httpBackend_: angular.IHttpBackendService) => {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json')
+                  .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+
+      ctrl = $componentController('phoneList');
+    }));
+
+    it('should create a `phones` property with 2 phones fetched with `$http`', () => {
+      jasmine.addCustomEqualityTester(angular.equals);
+
+      expect(ctrl.phones).toEqual([]);
+
+      $httpBackend.flush();
+      expect(ctrl.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+    });
+
+    it('should set a default value for the `orderProp` property', () => {
+      expect(ctrl.orderProp).toBe('age');
+    });
+
+  });
+
+});
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts
new file mode 100644
index 000000000000..e2f2855ae68f
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts
@@ -0,0 +1,20 @@
+// #docregion
+class PhoneListController {
+  phones: any[];
+  orderProp: string;
+  query: string;
+
+  static $inject = ['Phone'];
+  constructor(Phone: any) {
+    this.phones = Phone.query();
+    this.orderProp = 'age';
+  }
+
+}
+
+angular.
+  module('phoneList').
+  component('phoneList', {
+    templateUrl: 'phone-list/phone-list.template.html',
+    controller: PhoneListController
+  });
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.module.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.module.ts
new file mode 100644
index 000000000000..8ade7c5b8807
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.module.ts
@@ -0,0 +1,4 @@
+'use strict';
+
+// Define the `phoneList` module
+angular.module('phoneList', ['core.phone']);
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.template.html
new file mode 100644
index 000000000000..90548f9f91b1
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.template.html
@@ -0,0 +1,36 @@
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-md-2">
+      <!--Sidebar content-->
+
+      <p>
+        Search:
+        <input ng-model="$ctrl.query" />
+      </p>
+
+      <p>
+        Sort by:
+        <select ng-model="$ctrl.orderProp">
+          <option value="name">Alphabetical</option>
+          <option value="age">Newest</option>
+        </select>
+      </p>
+
+    </div>
+    <div class="col-md-10">
+      <!--Body content-->
+
+      <ul class="phones">
+        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
+            class="thumbnail phone-list-item">
+          <a href="#!/phones/{{phone.id}}" class="thumb">
+            <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
+          </a>
+          <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
+          <p>{{phone.snippet}}</p>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+</div>
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/dell-streak-7.json
new file mode 100644
index 000000000000..a32eb6ff98c1
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/dell-streak-7.json
@@ -0,0 +1,64 @@
+{
+    "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-1-typescript/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-atrix-4g.json
new file mode 100644
index 000000000000..ccca00e3b2dd
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-atrix-4g.json
@@ -0,0 +1,62 @@
+{
+    "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-1-typescript/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom-with-wi-fi.json
new file mode 100644
index 000000000000..4ba9c8d5b535
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom-with-wi-fi.json
@@ -0,0 +1,65 @@
+{
+    "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-1-typescript/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom.json
new file mode 100644
index 000000000000..f0f0c8711d9d
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom.json
@@ -0,0 +1,62 @@
+{
+    "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-1-typescript/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/nexus-s.json
new file mode 100644
index 000000000000..5e712e2ff8ca
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/nexus-s.json
@@ -0,0 +1,69 @@
+{
+    "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-1-typescript/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/phones.json
new file mode 100644
index 000000000000..339b94fbb516
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/phones.json
@@ -0,0 +1,155 @@
+[
+    {
+        "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-1-typescript/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts
new file mode 100644
index 000000000000..ec98b44eb5d9
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts
@@ -0,0 +1,107 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
+// Angular E2E Testing Guide:
+// https://docs.angularjs.org/guide/e2e-testing
+
+describe('PhoneCat Application', function() {
+
+  beforeAll(function() {
+    browser.baseUrl = 'http://localhost:8080/app/';
+    // 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() {
+    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.repeater('phone in $ctrl.phones'));
+      let query = element(by.model('$ctrl.query'));
+
+      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.model('$ctrl.query'));
+      let orderSelect = element(by.model('$ctrl.orderProp'));
+      let nameOption = orderSelect.element(by.css('option[value="name"]'));
+      let phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name'));
+
+      function getNames() {
+        return phoneNameColumn.map(function(elem: ElementFinder) {
+          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.model('$ctrl.query'));
+      query.sendKeys('nexus');
+
+      element.all(by.css('.phones li a')).first().click();
+      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.binding('$ctrl.phone.name')).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-1-typescript/example-config.json b/aio/content/examples/upgrade-phonecat-1-typescript/example-config.json
new file mode 100644
index 000000000000..a76722119ff1
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/example-config.json
@@ -0,0 +1,5 @@
+{
+  "build": "build:upgrade",
+  "run": "serve:upgrade",
+  "projectType": "systemjs"
+}
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js b/aio/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js
new file mode 100644
index 000000000000..dc829d198361
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js
@@ -0,0 +1,32 @@
+//jshint strict: false
+module.exports = function(config) {
+  config.set({
+
+    basePath: './app',
+
+    files: [
+      'https://code.angularjs.org/1.5.5/angular.js',
+      'https://code.angularjs.org/1.5.5/angular-animate.js',
+      'https://code.angularjs.org/1.5.5/angular-resource.js',
+      'https://code.angularjs.org/1.5.5/angular-route.js',
+      'https://code.angularjs.org/1.5.5/angular-mocks.js',
+      '**/*.module.js',
+      '*!(.module|.spec).js',
+      '!(bower_components)/**/*!(.module|.spec).js',
+      '**/*.spec.js'
+    ],
+
+    autoWatch: true,
+
+    frameworks: ['jasmine'],
+
+    browsers: ['Chrome', 'Firefox'],
+
+    plugins: [
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-jasmine'
+    ]
+
+  });
+};
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/run-unit-tests.sh b/aio/content/examples/upgrade-phonecat-1-typescript/run-unit-tests.sh
new file mode 100755
index 000000000000..239e5ff7d795
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/run-unit-tests.sh
@@ -0,0 +1,7 @@
+## The boilerplate Karma configuration won't work with AngularJS tests since
+## a specific loading configuration is needed for them.
+## We keep one in karma.conf.ajs.js. This scripts runs the AngularJS tests with
+## that config.
+
+PATH=$(npm bin):$PATH
+tsc && karma start karma.conf.ajs.js
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.ajs.json b/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.ajs.json
new file mode 100644
index 000000000000..8a60b91b0229
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.ajs.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json b/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json
new file mode 100644
index 000000000000..1d3d14ae785a
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "compileOnSave": true,
+  "exclude": [
+    "node_modules/*",
+    "**/*-aot.ts",
+    "aot/**/*"
+  ]
+}
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/README.md b/aio/content/examples/upgrade-phonecat-2-hybrid/README.md
new file mode 100644
index 000000000000..76eb21fc6cd0
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/README.md
@@ -0,0 +1,32 @@
+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.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.
+* 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
+  in index.html and karma.conf.ajs.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-2-hybrid/aot/index.html b/aio/content/examples/upgrade-phonecat-2-hybrid/aot/index.html
new file mode 100644
index 000000000000..fdc9584928d3
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/aot/index.html
@@ -0,0 +1,40 @@
+<!-- #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>
+    <div class="view-container">
+      <div ng-view class="view-frame"></div>
+    </div>
+  </body>
+  <script src="/dist/build.js"></script>
+</html>
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts
new file mode 100644
index 000000000000..f6e1654d74a7
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts
@@ -0,0 +1,14 @@
+// #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-2-hybrid/app/app.animations.css b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.css
new file mode 100644
index 000000000000..175320b509e3
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.css
@@ -0,0 +1,67 @@
+/* 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-2-hybrid/app/app.animations.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts
new file mode 100644
index 000000000000..f0739b640503
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts
@@ -0,0 +1,43 @@
+'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-2-hybrid/app/app.config.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts
new file mode 100644
index 000000000000..458ed942509a
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts
@@ -0,0 +1,19 @@
+'use strict';
+
+angular.
+  module('phonecatApp').
+  config(['$locationProvider', '$routeProvider',
+    function config($locationProvider: angular.ILocationProvider,
+                    $routeProvider: angular.route.IRouteProvider) {
+      $locationProvider.hashPrefix('!');
+
+      $routeProvider.
+        when('/phones', {
+          template: '<phone-list></phone-list>'
+        }).
+        when('/phones/:phoneId', {
+          template: '<phone-detail></phone-detail>'
+        }).
+        otherwise('/phones');
+    }
+  ]);
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.css b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.css
new file mode 100644
index 000000000000..f4b45b02a5b1
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.css
@@ -0,0 +1,93 @@
+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-2-hybrid/app/app.module.ajs.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts
new file mode 100644
index 000000000000..089c3c7d85d6
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts
@@ -0,0 +1,11 @@
+// #docregion
+'use strict';
+
+// Define the `phonecatApp` AngularJS module
+angular.module('phonecatApp', [
+  'ngAnimate',
+  'ngRoute',
+  'core',
+  'phoneDetail',
+  'phoneList',
+]);
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
new file mode 100644
index 000000000000..ba8b01c24637
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts
@@ -0,0 +1,76 @@
+// #docplaster
+// #docregion bare
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion bare
+// #docregion upgrademodule
+import { UpgradeModule } from '@angular/upgrade/static';
+// #enddocregion upgrademodule
+// #docregion httpmodule
+import { HttpModule } from '@angular/http';
+// #enddocregion httpmodule
+// #docregion phonelist
+import { FormsModule } from '@angular/forms';
+// #enddocregion phonelist
+// #docregion phone
+import { Phone } from './core/phone/phone.service';
+// #enddocregion phone
+// #docregion checkmarkpipe
+import { CheckmarkPipe } from './core/checkmark/checkmark.pipe';
+// #enddocregion checkmarkpipe
+// #docregion phonelist
+import { PhoneListComponent } from './phone-list/phone-list.component';
+// #enddocregion phonelist
+// #docregion routeparams
+import { routeParamsProvider } from './ajs-upgraded-providers';
+// #enddocregion routeparams
+// #docregion phonedetail
+import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
+// #enddocregion phonedetail
+
+// #docregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    // #enddocregion bare
+    UpgradeModule,
+    // #enddocregion upgrademodule
+    HttpModule,
+    // #enddocregion httpmodule, phone
+    FormsModule,
+  // #docregion bare, upgrademodule, httpmodule, phone
+  ],
+  // #enddocregion bare, upgrademodule, httpmodule, phone
+  declarations: [
+    PhoneListComponent,
+    // #enddocregion phonelist
+    PhoneDetailComponent,
+    // #enddocregion phonedetail
+    CheckmarkPipe
+    // #docregion phonelist, phonedetail
+  ],
+  entryComponents: [
+    PhoneListComponent,
+    // #enddocregion phonelist
+    PhoneDetailComponent
+  ],
+  // #docregion phone, routeparams
+  providers: [
+    Phone,
+    // #enddocregion phone
+    routeParamsProvider
+    // #docregion phone
+  ]
+  // #enddocregion routeparams
+// #docregion bare, upgrademodule, httpmodule, phonelist
+})
+export class AppModule {
+  // #enddocregion bare
+  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/core/checkmark/checkmark.pipe.spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts
new file mode 100644
index 000000000000..f7485ec2ba88
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts
@@ -0,0 +1,11 @@
+// #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-2-hybrid/app/core/checkmark/checkmark.pipe.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts
new file mode 100644
index 000000000000..888017e15cf7
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts
@@ -0,0 +1,9 @@
+// #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-2-hybrid/app/core/core.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/core.module.ts
new file mode 100644
index 000000000000..84a91dc7a685
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/core.module.ts
@@ -0,0 +1,4 @@
+'use strict';
+
+// Define the `core` module
+angular.module('core', ['core.phone']);
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.module.ts
new file mode 100644
index 000000000000..0b6b34889977
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.module.ts
@@ -0,0 +1,4 @@
+'use strict';
+
+// Define the `core.phone` module
+angular.module('core.phone', ['ngResource']);
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts
new file mode 100644
index 000000000000..a0c1655c203a
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts
@@ -0,0 +1,51 @@
+// #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-2-hybrid/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts
new file mode 100644
index 000000000000..22ff7d7ce53d
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts
@@ -0,0 +1,43 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+// #docregion downgrade-injectable
+declare var angular: angular.IAngularStatic;
+import { downgradeInjectable } from '@angular/upgrade/static';
+// #enddocregion downgrade-injectable
+
+// #docregion phonedata-interface
+export interface PhoneData {
+  name: string;
+  snippet: string;
+  images: string[];
+}
+// #enddocregion phonedata-interface
+
+// #docregion fullclass
+// #docregion classdef, downgrade-injectable
+@Injectable()
+export class Phone {
+// #enddocregion classdef, downgrade-injectable
+  constructor(private http: Http) { }
+  query(): Observable<PhoneData[]> {
+    return this.http.get(`phones/phones.json`).pipe(
+      map((res: Response) => res.json())
+    );
+  }
+  get(id: string): Observable<PhoneData> {
+    return this.http.get(`phones/${id}.json`).pipe(
+      map((res: Response) => res.json())
+    );
+  }
+// #docregion classdef, downgrade-injectable
+}
+// #enddocregion classdef
+// #enddocregion fullclass
+
+angular.module('core.phone')
+  .factory('phone', downgradeInjectable(Phone));
+// #enddocregion downgrade-injectable
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.0.jpg
new file mode 100644
index 000000000000..7ce0dce4ee9e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.1.jpg
new file mode 100644
index 000000000000..ed8cad89fba4
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.2.jpg
new file mode 100644
index 000000000000..c83529e0f9c8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.3.jpg
new file mode 100644
index 000000000000..cd2c30280da8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.4.jpg
new file mode 100644
index 000000000000..b4d8472da88c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.4.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-venue.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-venue.0.jpg
new file mode 100644
index 000000000000..b4cb4eb25fee
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-venue.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/droid-2-global-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/droid-2-global-by-motorola.0.jpg
new file mode 100644
index 000000000000..60700a2ab38b
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/droid-2-global-by-motorola.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/droid-pro-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/droid-pro-by-motorola.0.jpg
new file mode 100644
index 000000000000..c7710de986f5
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/droid-pro-by-motorola.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/lg-axis.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/lg-axis.0.jpg
new file mode 100644
index 000000000000..55e5a23bb20e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/lg-axis.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.0.jpg
new file mode 100644
index 000000000000..2446159e937d
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.1.jpg
new file mode 100644
index 000000000000..867f207459f3
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.2.jpg
new file mode 100644
index 000000000000..27d78338c4df
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.3.jpg
new file mode 100644
index 000000000000..29459a68a4dd
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-bravo-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-bravo-with-motoblur.0.jpg
new file mode 100644
index 000000000000..e452ae7e7cef
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-bravo-with-motoblur.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-charm-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-charm-with-motoblur.0.jpg
new file mode 100644
index 000000000000..21e4b8d741d2
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-charm-with-motoblur.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-defy-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-defy-with-motoblur.0.jpg
new file mode 100644
index 000000000000..c7c5e3ba0c59
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-defy-with-motoblur.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.0.jpg
new file mode 100644
index 000000000000..a6c993291eef
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.1.jpg
new file mode 100644
index 000000000000..400b89e2df44
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.2.jpg
new file mode 100644
index 000000000000..86b55d28dd4c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.3.jpg
new file mode 100644
index 000000000000..85ec293ae54c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.4.jpg
new file mode 100644
index 000000000000..75ef1464cb8d
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.4.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.5.jpg
new file mode 100644
index 000000000000..4d42db43305b
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.5.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.0.jpg
new file mode 100644
index 000000000000..bf6954bbd5a8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.1.jpg
new file mode 100644
index 000000000000..659688a47d72
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.2.jpg
new file mode 100644
index 000000000000..ce0ff1002e40
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.0.jpg
new file mode 100644
index 000000000000..0952bc79c2c8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.1.jpg
new file mode 100644
index 000000000000..f33004dd7f53
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.2.jpg
new file mode 100644
index 000000000000..c5c63621f126
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.3.jpg
new file mode 100644
index 000000000000..e51f75b0edcf
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-galaxy-tab.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-galaxy-tab.0.jpg
new file mode 100644
index 000000000000..3750377ad976
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-galaxy-tab.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-gem.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-gem.0.jpg
new file mode 100644
index 000000000000..0d5024a02689
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-gem.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg
new file mode 100644
index 000000000000..11b8f860cb7e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg
new file mode 100644
index 000000000000..11b8f860cb7e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-transform.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-transform.0.jpg
new file mode 100644
index 000000000000..0e3107caf57c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-transform.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/sanyo-zio.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/sanyo-zio.0.jpg
new file mode 100644
index 000000000000..9eeb9b96ed3e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/sanyo-zio.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/t-mobile-g2.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/t-mobile-g2.0.jpg
new file mode 100644
index 000000000000..6b6c09e05887
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/t-mobile-g2.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/t-mobile-mytouch-4g.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/t-mobile-mytouch-4g.0.jpg
new file mode 100644
index 000000000000..beba1f68271a
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/t-mobile-mytouch-4g.0.jpg differ
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
new file mode 100644
index 000000000000..d81fae073b12
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowser } from '@angular/platform-browser';
+
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+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
new file mode 100644
index 000000000000..2b978d046cc8
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main.ts
@@ -0,0 +1,6 @@
+// #docregion bootstrap
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion bootstrap
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts
new file mode 100644
index 000000000000..80282858c492
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts
@@ -0,0 +1,28 @@
+// #docregion
+declare var angular: angular.IAngularStatic;
+import { Phone, PhoneData } from '../core/phone/phone.service';
+
+class PhoneDetailController {
+  phone: PhoneData;
+  mainImageUrl: string;
+
+  static $inject = ['$routeParams', 'phone'];
+  constructor($routeParams: angular.route.IRouteParamsService, phone: Phone) {
+    let phoneId = $routeParams['phoneId'];
+    phone.get(phoneId).subscribe(data => {
+      this.phone = data;
+      this.setImage(data.images[0]);
+    });
+  }
+
+  setImage(imageUrl: string) {
+    this.mainImageUrl = imageUrl;
+  }
+}
+
+angular.
+  module('phoneDetail').
+  component('phoneDetail', {
+    templateUrl: 'phone-detail/phone-detail.template.html',
+    controller: PhoneDetailController
+  });
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts
new file mode 100644
index 000000000000..49a3bbf1cd10
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts
@@ -0,0 +1,59 @@
+// #docregion
+// #docregion activatedroute
+import { ActivatedRoute } from '@angular/router';
+
+// #enddocregion activatedroute
+import { Observable, of } from 'rxjs';
+
+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 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-2-hybrid/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts
new file mode 100644
index 000000000000..aa20ebb80138
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts
@@ -0,0 +1,41 @@
+// #docplaster
+// #docregion
+declare var angular: angular.IAngularStatic;
+import { downgradeComponent } from '@angular/upgrade/static';
+
+// #docregion initialclass
+import { Component } from '@angular/core';
+
+import { Phone, PhoneData } from '../core/phone/phone.service';
+// #enddocregion initialclass
+import { RouteParams } from '../ajs-upgraded-providers';
+
+// #docregion initialclass
+@Component({
+  selector: 'phone-detail',
+  templateUrl: './phone-detail.template.html',
+  // #enddocregion initialclass
+  // #docregion initialclass
+})
+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;
+  }
+}
+// #enddocregion initialclass
+
+angular.module('phoneDetail')
+  .directive(
+    'phoneDetail',
+    downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory
+  );
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts
new file mode 100644
index 000000000000..fd7cb3b92084
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts
@@ -0,0 +1,7 @@
+'use strict';
+
+// Define the `phoneDetail` module
+angular.module('phoneDetail', [
+  'ngRoute',
+  'core.phone'
+]);
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
new file mode 100644
index 000000000000..4068532de99d
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
@@ -0,0 +1,120 @@
+<!-- #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-2-hybrid/app/phone-list/phone-list.component.ajs.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts
new file mode 100644
index 000000000000..81eac1cd81ec
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts
@@ -0,0 +1,24 @@
+// #docregion
+declare var angular: angular.IAngularStatic;
+import { Phone, PhoneData } from '../core/phone/phone.service';
+
+class PhoneListController {
+  phones: PhoneData[];
+  orderProp: string;
+
+  static $inject = ['phone'];
+  constructor(phone: Phone) {
+    phone.query().subscribe(phones => {
+      this.phones = phones;
+    });
+    this.orderProp = 'age';
+  }
+
+}
+
+angular.
+  module('phoneList').
+  component('phoneList', {
+    templateUrl: 'app/phone-list/phone-list.template.html',
+    controller: PhoneListController
+  });
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts
new file mode 100644
index 000000000000..21bd8182b738
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts
@@ -0,0 +1,66 @@
+/* tslint:disable */
+// #docregion
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, of } from 'rxjs';
+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 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-2-hybrid/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts
new file mode 100644
index 000000000000..453df46d25f9
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts
@@ -0,0 +1,72 @@
+// #docregion downgrade-component
+declare var angular: angular.IAngularStatic;
+import { downgradeComponent } from '@angular/upgrade/static';
+
+// #enddocregion downgrade-component
+
+// #docregion initialclass
+import { Component } from '@angular/core';
+import { Phone, PhoneData } from '../core/phone/phone.service';
+
+// #docregion downgrade-component
+@Component({
+  selector: 'phone-list',
+  templateUrl: './phone-list.template.html'
+})
+export class PhoneListComponent {
+  // #enddocregion downgrade-component
+  phones: PhoneData[];
+  query: string;
+  orderProp: string;
+
+  constructor(phone: Phone) {
+    phone.query().subscribe(phones => {
+      this.phones = phones;
+    });
+    this.orderProp = 'age';
+  }
+  // #enddocregion initialclass
+
+  // #docregion getphones
+  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;
+  }
+  // #enddocregion getphones
+  // #docregion initialclass, downgrade-component
+}
+// #enddocregion initialclass
+
+angular.module('phoneList')
+  .directive(
+    'phoneList',
+    downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory
+  );
+// #enddocregion downgrade-component
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.module.ts
new file mode 100644
index 000000000000..8ade7c5b8807
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.module.ts
@@ -0,0 +1,4 @@
+'use strict';
+
+// Define the `phoneList` module
+angular.module('phoneList', ['core.phone']);
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html
new file mode 100644
index 000000000000..8f02113985d9
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html
@@ -0,0 +1,40 @@
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-md-2">
+      <!--Sidebar content-->
+
+      <!-- #docregion controls -->
+      <p>
+        Search:
+        <input [(ngModel)]="query" />
+      </p>
+
+      <p>
+        Sort by:
+        <select [(ngModel)]="orderProp">
+          <option value="name">Alphabetical</option>
+          <option value="age">Newest</option>
+        </select>
+      </p>
+      <!-- #enddocregion controls -->
+
+    </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 href="/#!/phones/{{phone.id}}" class="thumb">
+            <img [src]="phone.imageUrl" [alt]="phone.name" />
+          </a>
+          <a href="/#!/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-2-hybrid/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/dell-streak-7.json
new file mode 100644
index 000000000000..a32eb6ff98c1
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/dell-streak-7.json
@@ -0,0 +1,64 @@
+{
+    "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-2-hybrid/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-atrix-4g.json
new file mode 100644
index 000000000000..ccca00e3b2dd
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-atrix-4g.json
@@ -0,0 +1,62 @@
+{
+    "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-2-hybrid/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom-with-wi-fi.json
new file mode 100644
index 000000000000..4ba9c8d5b535
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom-with-wi-fi.json
@@ -0,0 +1,65 @@
+{
+    "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-2-hybrid/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom.json
new file mode 100644
index 000000000000..f0f0c8711d9d
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom.json
@@ -0,0 +1,62 @@
+{
+    "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-2-hybrid/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/nexus-s.json
new file mode 100644
index 000000000000..5e712e2ff8ca
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/nexus-s.json
@@ -0,0 +1,69 @@
+{
+    "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-2-hybrid/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/phones.json
new file mode 100644
index 000000000000..339b94fbb516
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/phones.json
@@ -0,0 +1,155 @@
+[
+    {
+        "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-2-hybrid/bs-config.aot.json b/aio/content/examples/upgrade-phonecat-2-hybrid/bs-config.aot.json
new file mode 100644
index 000000000000..e59a7403a00f
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/bs-config.aot.json
@@ -0,0 +1,14 @@
+{
+  "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-2-hybrid/copy-dist-files.js b/aio/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js
new file mode 100644
index 000000000000..a857af085cba
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js
@@ -0,0 +1,25 @@
+// #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-2-hybrid/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
new file mode 100644
index 000000000000..69e57d7151a3
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
@@ -0,0 +1,103 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+// Angular E2E Testing Guide:
+// https://docs.angularjs.org/guide/e2e-testing
+
+describe('PhoneCat Application', function() {
+
+  it('should redirect `index.html` to `index.html#!/phones', function() {
+    browser.get('index.html');
+    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() {
+
+    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(1000); // Not sure why this is needed but it is. The route change works fine.
+      expect(browser.getCurrentUrl()).toMatch(/\/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-2-hybrid/example-config.json b/aio/content/examples/upgrade-phonecat-2-hybrid/example-config.json
new file mode 100644
index 000000000000..a76722119ff1
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/example-config.json
@@ -0,0 +1,5 @@
+{
+  "build": "build:upgrade",
+  "run": "serve:upgrade",
+  "projectType": "systemjs"
+}
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/index.html b/aio/content/examples/upgrade-phonecat-2-hybrid/index.html
new file mode 100644
index 000000000000..f747e641e09b
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/index.html
@@ -0,0 +1,51 @@
+<!-- #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>
+
+    <!-- #docregion angular -->
+    <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/systemjs/dist/system.src.js"></script>
+    <!-- #enddocregion angular -->
+    <script src="/systemjs.config.1.js"></script>
+    <!-- #docregion angular
+    <script src="/systemjs.config.js"></script>
+    <script>
+      System.import('/app');
+    </script>
+    <!-- #enddocregion angular -->
+    <script>
+      System.import('/app');
+    </script>
+  </head>
+  <body>
+
+    <div class="view-container">
+      <div ng-view class="view-frame"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
new file mode 100644
index 000000000000..b92085c01408
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
@@ -0,0 +1,90 @@
+// #docregion
+// /*global jasmine, __karma__, window*/
+Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
+
+// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
+// Error.stackTraceLimit = Infinity; //
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
+
+var builtPath = '/base/app/';
+
+__karma__.loaded = function () { };
+
+function isJsFile(path) {
+  return path.slice(-3) == '.js';
+}
+
+function isSpecFile(path) {
+  return /\.spec\.(.*\.)?js$/.test(path);
+}
+
+function isBuiltFile(path) {
+  return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
+}
+
+var allSpecFiles = Object.keys(window.__karma__.files)
+  .filter(isSpecFile)
+  .filter(isBuiltFile);
+
+System.config({
+  baseURL: '/base',
+  // Extend usual application package list with test folder
+  packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
+
+  // Assume npm: is set in `paths` in systemjs.config
+  // Map the angular testing umd bundles
+  map: {
+    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
+    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+    '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
+    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
+    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
+    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
+    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
+  },
+});
+
+System.import('systemjs.config.js')
+  .then(importSystemJsExtras)
+  .then(initTestBed)
+  .then(initTesting);
+
+/** Optional SystemJS configuration extras. Keep going w/o it */
+function importSystemJsExtras(){
+  return System.import('systemjs.config.extras.js')
+  .catch(function(reason) {
+    console.log(
+      'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
+    );
+    console.log(reason);
+  });
+}
+
+function initTestBed(){
+  return Promise.all([
+    System.import('@angular/core/testing'),
+    System.import('@angular/platform-browser-dynamic/testing')
+  ])
+
+  .then(function (providers) {
+    var coreTesting    = providers[0];
+    var browserTesting = providers[1];
+
+    coreTesting.TestBed.initTestEnvironment(
+      browserTesting.BrowserDynamicTestingModule,
+      browserTesting.platformBrowserDynamicTesting());
+  })
+}
+
+// Import all spec files and start karma
+function initTesting () {
+  return Promise.all(
+    allSpecFiles.map(function (moduleName) {
+      return System.import(moduleName);
+    })
+  )
+  .then(__karma__.start, __karma__.error);
+}
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js
new file mode 100644
index 000000000000..6030abfd3d2f
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js
@@ -0,0 +1,97 @@
+// #docregion
+// /*global jasmine, __karma__, window*/
+Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
+
+// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
+// Error.stackTraceLimit = Infinity; //
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
+
+// builtPaths: root paths for output ("built") files
+// get from karma.config.js, then prefix with '/src/' (default is 'app/')
+var builtPaths = (__karma__.config.builtPaths || ['src/'])
+                 .map(function(p) { return '/base/'+p;});
+
+__karma__.loaded = function () { };
+
+function isJsFile(path) {
+  return path.slice(-3) == '.js';
+}
+
+function isSpecFile(path) {
+  return /\.spec\.(.*\.)?js$/.test(path);
+}
+
+// Is a "built" file if is JavaScript file in one of the "built" folders
+function isBuiltFile(path) {
+  return isJsFile(path) &&
+         builtPaths.reduce(function(keep, bp) {
+           return keep || (path.substr(0, bp.length) === bp);
+         }, false);
+}
+
+var allSpecFiles = Object.keys(window.__karma__.files)
+  .filter(isSpecFile)
+  .filter(isBuiltFile);
+
+System.config({
+  baseURL: 'base/src',
+  // Extend usual application package list with testing folder
+  packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
+
+  // Assume npm: is set in `paths` in systemjs.config
+  // Map the angular testing umd bundles
+  map: {
+    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
+    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+    '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
+    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
+    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
+    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
+    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
+  },
+});
+
+System.import('systemjs.config.js')
+  .then(importSystemJsExtras)
+  .then(initTestBed)
+  .then(initTesting);
+
+/** Optional SystemJS configuration extras. Keep going w/o it */
+function importSystemJsExtras(){
+  return System.import('systemjs.config.extras.js')
+  .catch(function(reason) {
+    console.log(
+      'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
+    );
+    console.log(reason);
+  });
+}
+
+function initTestBed(){
+  return Promise.all([
+    System.import('@angular/core/testing'),
+    System.import('@angular/platform-browser-dynamic/testing')
+  ])
+
+  .then(function (providers) {
+    var coreTesting    = providers[0];
+    var browserTesting = providers[1];
+
+    coreTesting.TestBed.initTestEnvironment(
+      browserTesting.BrowserDynamicTestingModule,
+      browserTesting.platformBrowserDynamicTesting());
+  })
+}
+
+// Import all spec files and start karma
+function initTesting () {
+  return Promise.all(
+    allSpecFiles.map(function (moduleName) {
+      return System.import(moduleName);
+    })
+  )
+  .then(__karma__.start, __karma__.error);
+}
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js
new file mode 100644
index 000000000000..213834b1aa4b
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js
@@ -0,0 +1,68 @@
+//jshint strict: false
+module.exports = function(config) {
+  config.set({
+
+    // #docregion basepath
+    basePath: './',
+    // #enddocregion basepath
+
+    files: [
+      'https://code.angularjs.org/1.5.5/angular.js',
+      'https://code.angularjs.org/1.5.5/angular-animate.js',
+      'https://code.angularjs.org/1.5.5/angular-resource.js',
+      'https://code.angularjs.org/1.5.5/angular-route.js',
+      'https://code.angularjs.org/1.5.5/angular-mocks.js',
+
+      // #docregion files
+      // System.js for module loading
+      'node_modules/systemjs/dist/system.src.js',
+
+      // Polyfills
+      'node_modules/core-js/client/shim.js',
+
+      // zone.js
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/zone.js/dist/zone-testing.js',
+
+      // RxJs.
+      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
+
+      // Angular itself and the testing library
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
+
+      {pattern: 'systemjs.config.js', included: false, watched: false},
+      'karma-test-shim.js',
+
+      {pattern: 'app/**/*.module.js', included: false, watched: true},
+      {pattern: 'app/*!(.module|.spec).js', included: false, watched: true},
+      {pattern: 'app/!(bower_components)/**/*!(.module|.spec).js', included: false, watched: true},
+      {pattern: 'app/**/*.spec.js', included: false, watched: true},
+
+      {pattern: '**/*.html', included: false, watched: true},
+      // #enddocregion files
+    ],
+
+    // #docregion html
+    // proxied base paths for loading assets
+    proxies: {
+      // required for component assets fetched by Angular's compiler
+      "/phone-detail": '/base/app/phone-detail',
+      "/phone-list": '/base/app/phone-list'
+    },
+    // #enddocregion html
+
+    autoWatch: true,
+
+    frameworks: ['jasmine'],
+
+    browsers: ['Chrome'],
+
+    plugins: [
+      'karma-chrome-launcher',
+      'karma-jasmine'
+    ]
+
+  });
+};
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js
new file mode 100644
index 000000000000..88ec4a1c1a42
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js
@@ -0,0 +1,97 @@
+// #docregion
+module.exports = function(config) {
+
+  var appBase    = 'src/';       // transpiled app JS and map files
+  var appAssets  = '/base/app/'; // component assets fetched by Angular's compiler
+
+  // Testing helpers (optional) are conventionally in a folder called `testing`
+  var testingBase    = 'src/testing/'; // transpiled test JS and map files
+  var testingSrcBase = 'src/testing/'; // test source TS files
+
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine'],
+
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter')
+    ],
+
+    client: {
+      builtPaths: [appBase, testingBase], // add more spec base paths as needed
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+
+    customLaunchers: {
+      // From the CLI. Not used here but interesting
+      // chrome setup for travis CI using chromium
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+
+    files: [
+      // System.js for module loading
+      'node_modules/systemjs/dist/system.src.js',
+
+      // Polyfills
+      'node_modules/core-js/client/shim.js',
+
+      // zone.js
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/zone.js/dist/zone-testing.js',
+
+      // RxJs
+      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
+
+      // tslib (TS helper fns such as `__extends`)
+      { pattern: 'node_modules/tslib/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/tslib/**/*.js.map', included: false, watched: false },
+
+      // Paths loaded via module imports:
+      // Angular itself
+      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
+
+      { pattern: appBase + '/systemjs.config.js', included: false, watched: false },
+      { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false },
+      'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
+
+      // transpiled application & spec code paths loaded via module imports
+      { pattern: appBase + '**/*.js', included: false, watched: true },
+      { pattern: testingBase + '**/*.js', included: false, watched: true },
+
+
+      // Asset (HTML & CSS) paths loaded via Angular's component compiler
+      // (these paths need to be rewritten, see proxies section)
+      { pattern: appBase + '**/*.html', included: false, watched: true },
+      { pattern: appBase + '**/*.css', included: false, watched: true },
+
+      // Paths for debugging with source maps in dev tools
+      { pattern: appBase + '**/*.ts', included: false, watched: false },
+      { pattern: appBase + '**/*.js.map', included: false, watched: false },
+      { pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
+      { pattern: testingBase + '**/*.js.map', included: false, watched: false}
+    ],
+
+    // Proxied base paths for loading assets
+    proxies: {
+      // required for modules fetched by SystemJS
+      '/base/src/node_modules/': '/base/node_modules/'
+    },
+
+    exclude: [],
+    preprocessors: {},
+    reporters: ['progress', 'kjhtml'],
+
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  })
+}
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js b/aio/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js
new file mode 100644
index 000000000000..aeb227689c7f
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js
@@ -0,0 +1,21 @@
+// #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-2-hybrid/run-unit-tests.sh b/aio/content/examples/upgrade-phonecat-2-hybrid/run-unit-tests.sh
new file mode 100755
index 000000000000..239e5ff7d795
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/run-unit-tests.sh
@@ -0,0 +1,7 @@
+## The boilerplate Karma configuration won't work with AngularJS tests since
+## a specific loading configuration is needed for them.
+## We keep one in karma.conf.ajs.js. This scripts runs the AngularJS tests with
+## that config.
+
+PATH=$(npm bin):$PATH
+tsc && karma start karma.conf.ajs.js
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
new file mode 100644
index 000000000000..8cde9dab12aa
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js
@@ -0,0 +1,59 @@
+/**
+ * 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: {
+      'ng-loader': '../src/systemjs-angular-loader.js',
+      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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
+      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      // #docregion paths
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
+      // #enddocregion paths
+
+      // 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',
+        meta: {
+          './*.js': {
+            loader: 'ng-loader'
+          }
+        }
+      },
+      'angular-in-memory-web-api': {
+        main: './index.js',
+        defaultExtension: 'js'
+      },
+      'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs': { main: 'index.js', defaultExtension: 'js' },
+    }
+  });
+})(this);
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json b/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json
new file mode 100644
index 000000000000..c7f1231897b3
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es2015", "dom"],
+    "removeComments": false,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+
+  "files": [
+    "app/app.module.ts",
+    "app/main-aot.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "skipMetadataEmit" : true
+ }
+}
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json b/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json
new file mode 100644
index 000000000000..5ee3c82f1e0b
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "compileOnSave": true,
+  "exclude": [
+    "node_modules/*",
+    "**/*-aot.ts"
+  ]
+}
diff --git a/aio/content/examples/upgrade-phonecat-3-final/README.md b/aio/content/examples/upgrade-phonecat-3-final/README.md
new file mode 100644
index 000000000000..7448da44e62d
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/README.md
@@ -0,0 +1,24 @@
+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 tests in this project need to be run.
+  The shell script run-unit-tests.sh can be used to run the unit tests.
+* 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 E2E tests
+
+Like for any example (at the project root):
+
+    gulp run-e2e-tests --filter=phonecat-3
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts b/aio/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts
new file mode 100644
index 000000000000..f64d82e25378
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts
@@ -0,0 +1,23 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { APP_BASE_HREF, HashLocationStrategy, LocationStrategy } from '@angular/common';
+
+import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
+import { PhoneListComponent }   from './phone-list/phone-list.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'phones', pathMatch: 'full' },
+  { path: 'phones',          component: PhoneListComponent },
+  { path: 'phones/:phoneId', component: PhoneDetailComponent }
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ],
+  providers: [
+    { provide: APP_BASE_HREF, useValue: '!' },
+    { provide: LocationStrategy, useClass: HashLocationStrategy },
+  ]
+})
+export class AppRoutingModule { }
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/app.component.ts b/aio/content/examples/upgrade-phonecat-3-final/app/app.component.ts
new file mode 100644
index 000000000000..c476614121c2
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/app.component.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'phonecat-app',
+  template: '<router-outlet></router-outlet>'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/app.css b/aio/content/examples/upgrade-phonecat-3-final/app/app.css
new file mode 100644
index 000000000000..f4b45b02a5b1
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/app.css
@@ -0,0 +1,93 @@
+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-3-final/app/app.module.ts b/aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts
new file mode 100644
index 000000000000..607ecab8c938
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts
@@ -0,0 +1,34 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent }     from './app.component';
+import { CheckmarkPipe }    from './core/checkmark/checkmark.pipe';
+import { Phone }            from './core/phone/phone.service';
+import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
+import { PhoneListComponent }   from './phone-list/phone-list.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    AppRoutingModule
+  ],
+  declarations: [
+    AppComponent,
+    PhoneListComponent,
+    CheckmarkPipe,
+    PhoneDetailComponent
+  ],
+  providers: [
+    Phone
+  ],
+  // #docregion bootstrap
+  bootstrap: [ AppComponent ]
+  // #enddocregion bootstrap
+})
+export class AppModule {}
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts
new file mode 100644
index 000000000000..75150500a6b9
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts
@@ -0,0 +1,10 @@
+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-final/app/core/checkmark/checkmark.pipe.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts
new file mode 100644
index 000000000000..888017e15cf7
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts
@@ -0,0 +1,9 @@
+// #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-3-final/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts
new file mode 100644
index 000000000000..e3a422965b12
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts
@@ -0,0 +1,49 @@
+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-final/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts
new file mode 100644
index 000000000000..df2cac0d9dfe
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts
@@ -0,0 +1,26 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+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`).pipe(
+      map((res: Response) => res.json())
+    );
+  }
+  get(id: string): Observable<PhoneData> {
+    return this.http.get(`phones/${id}.json`).pipe(
+      map((res: Response) => res.json())
+    );
+  }
+}
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-3-final/app/img/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.0.jpg
new file mode 100644
index 000000000000..7ce0dce4ee9e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.1.jpg
new file mode 100644
index 000000000000..ed8cad89fba4
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.2.jpg
new file mode 100644
index 000000000000..c83529e0f9c8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.3.jpg
new file mode 100644
index 000000000000..cd2c30280da8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.4.jpg
new file mode 100644
index 000000000000..b4d8472da88c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.4.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-venue.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-venue.0.jpg
new file mode 100644
index 000000000000..b4cb4eb25fee
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-venue.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..60700a2ab38b
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/droid-2-global-by-motorola.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..c7710de986f5
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/droid-pro-by-motorola.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/lg-axis.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/lg-axis.0.jpg
new file mode 100644
index 000000000000..55e5a23bb20e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/lg-axis.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.0.jpg
new file mode 100644
index 000000000000..2446159e937d
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.1.jpg
new file mode 100644
index 000000000000..867f207459f3
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.2.jpg
new file mode 100644
index 000000000000..27d78338c4df
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.3.jpg
new file mode 100644
index 000000000000..29459a68a4dd
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..e452ae7e7cef
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..21e4b8d741d2
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-charm-with-motoblur.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..c7c5e3ba0c59
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-defy-with-motoblur.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..a6c993291eef
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..400b89e2df44
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..86b55d28dd4c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..85ec293ae54c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..75ef1464cb8d
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..4d42db43305b
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.0.jpg
new file mode 100644
index 000000000000..bf6954bbd5a8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.1.jpg
new file mode 100644
index 000000000000..659688a47d72
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.2.jpg
new file mode 100644
index 000000000000..ce0ff1002e40
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.0.jpg
new file mode 100644
index 000000000000..0952bc79c2c8
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.1.jpg
new file mode 100644
index 000000000000..f33004dd7f53
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.1.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.2.jpg
new file mode 100644
index 000000000000..c5c63621f126
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.2.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.3.jpg
new file mode 100644
index 000000000000..e51f75b0edcf
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.3.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-galaxy-tab.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-galaxy-tab.0.jpg
new file mode 100644
index 000000000000..3750377ad976
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-galaxy-tab.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-gem.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-gem.0.jpg
new file mode 100644
index 000000000000..0d5024a02689
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-gem.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..11b8f860cb7e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..11b8f860cb7e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-transform.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-transform.0.jpg
new file mode 100644
index 000000000000..0e3107caf57c
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-transform.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/sanyo-zio.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/sanyo-zio.0.jpg
new file mode 100644
index 000000000000..9eeb9b96ed3e
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/sanyo-zio.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-g2.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-g2.0.jpg
new file mode 100644
index 000000000000..6b6c09e05887
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-g2.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/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
new file mode 100644
index 000000000000..beba1f68271a
Binary files /dev/null and b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-mytouch-4g.0.jpg differ
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/main.ts b/aio/content/examples/upgrade-phonecat-3-final/app/main.ts
new file mode 100644
index 000000000000..08be7a99baee
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/main.ts
@@ -0,0 +1,10 @@
+// #docregion
+// #docregion imports
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+// #enddocregion imports
+
+// #docregion bootstrap
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion bootstrap
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts
new file mode 100644
index 000000000000..49a3bbf1cd10
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts
@@ -0,0 +1,59 @@
+// #docregion
+// #docregion activatedroute
+import { ActivatedRoute } from '@angular/router';
+
+// #enddocregion activatedroute
+import { Observable, of } from 'rxjs';
+
+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 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-3-final/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts
new file mode 100644
index 000000000000..95aeca20e07b
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts
@@ -0,0 +1,27 @@
+// #docplaster
+// #docregion
+import { Component }      from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { Phone, PhoneData } from '../core/phone/phone.service';
+
+@Component({
+  selector: 'phone-detail',
+  templateUrl: './phone-detail.template.html'
+})
+export class PhoneDetailComponent {
+  phone: PhoneData;
+  mainImageUrl: string;
+
+  constructor(activatedRoute: ActivatedRoute, phone: Phone) {
+    phone.get(activatedRoute.snapshot.paramMap.get('phoneId'))
+      .subscribe((p: PhoneData) => {
+        this.phone = p;
+        this.setImage(p.images[0]);
+      });
+  }
+
+  setImage(imageUrl: string) {
+    this.mainImageUrl = imageUrl;
+  }
+}
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
new file mode 100644
index 000000000000..4068532de99d
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
@@ -0,0 +1,120 @@
+<!-- #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-3-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
new file mode 100644
index 000000000000..588eabe76e52
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts
@@ -0,0 +1,71 @@
+/* tslint:disable */
+// #docregion routestuff
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, of } from 'rxjs';
+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';
+
+// #enddocregion routestuff
+
+class ActivatedRouteMock {
+  constructor(public snapshot: any) {}
+}
+
+class MockPhone {
+  query(): Observable<PhoneData[]> {
+    return of([
+      {name: 'Nexus S', snippet: '', images: []},
+      {name: 'Motorola DROID', snippet: '', images: []}
+    ]);
+  }
+}
+
+let fixture: ComponentFixture<PhoneListComponent>;
+
+describe('PhoneList', () => {
+
+  // #docregion routestuff
+
+  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);
+  });
+  // #enddocregion routestuff
+
+  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-final/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts
new file mode 100644
index 000000000000..6cfd172027ce
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts
@@ -0,0 +1,53 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { Phone, PhoneData } from '../core/phone/phone.service';
+
+@Component({
+  selector: 'phone-list',
+  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;
+  }
+}
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html
new file mode 100644
index 000000000000..b4a994b2971c
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html
@@ -0,0 +1,40 @@
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-md-2">
+      <!--Sidebar content-->
+
+      <!-- #docregion controls -->
+      <p>
+        Search:
+        <input [(ngModel)]="query" />
+      </p>
+
+      <p>
+        Sort by:
+        <select [(ngModel)]="orderProp">
+          <option value="name">Alphabetical</option>
+          <option value="age">Newest</option>
+        </select>
+      </p>
+      <!-- #enddocregion controls -->
+
+    </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-final/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/dell-streak-7.json
new file mode 100644
index 000000000000..a32eb6ff98c1
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phones/dell-streak-7.json
@@ -0,0 +1,64 @@
+{
+    "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-3-final/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-atrix-4g.json
new file mode 100644
index 000000000000..ccca00e3b2dd
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-atrix-4g.json
@@ -0,0 +1,62 @@
+{
+    "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-3-final/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom-with-wi-fi.json
new file mode 100644
index 000000000000..4ba9c8d5b535
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom-with-wi-fi.json
@@ -0,0 +1,65 @@
+{
+    "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-3-final/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom.json
new file mode 100644
index 000000000000..f0f0c8711d9d
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom.json
@@ -0,0 +1,62 @@
+{
+    "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-3-final/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/nexus-s.json
new file mode 100644
index 000000000000..5e712e2ff8ca
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phones/nexus-s.json
@@ -0,0 +1,69 @@
+{
+    "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-3-final/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/phones.json
new file mode 100644
index 000000000000..339b94fbb516
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phones/phones.json
@@ -0,0 +1,155 @@
+[
+    {
+        "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-3-final/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts
new file mode 100644
index 000000000000..6f47c54d020d
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts
@@ -0,0 +1,109 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+// Angular E2E Testing Guide:
+// https://docs.angularjs.org/guide/e2e-testing
+
+describe('PhoneCat Application', function() {
+
+  // #docregion redirect
+  it('should redirect `index.html` to `index.html#!/phones', function() {
+    browser.get('index.html');
+    browser.waitForAngular();
+    browser.getCurrentUrl().then(function(url: string) {
+      expect(url.endsWith('/phones')).toBe(true);
+    });
+  });
+  // #enddocregion redirect
+
+  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'
+      ]);
+    });
+
+    // #docregion links
+    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.getCurrentUrl().then(function(url: string) {
+        expect(url.endsWith('/phones/nexus-s')).toBe(true);
+      });
+    });
+    // #enddocregion links
+
+  });
+
+  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-final/example-config.json b/aio/content/examples/upgrade-phonecat-3-final/example-config.json
new file mode 100644
index 000000000000..a76722119ff1
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/example-config.json
@@ -0,0 +1,5 @@
+{
+  "build": "build:upgrade",
+  "run": "serve:upgrade",
+  "projectType": "systemjs"
+}
diff --git a/aio/content/examples/upgrade-phonecat-3-final/index.html b/aio/content/examples/upgrade-phonecat-3-final/index.html
new file mode 100644
index 000000000000..fee59370e642
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/index.html
@@ -0,0 +1,36 @@
+<!-- #docplaster -->
+<!-- #docregion full -->
+<!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" />
+
+    <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/systemjs/dist/system.src.js"></script>
+    <!-- #enddocregion full -->
+    <script src="/systemjs.config.1.js"></script>
+    <!-- #docregion full
+    <script src="/systemjs.config.js"></script>
+    <script>
+      System.import('/app');
+    </script>
+    <!-- #enddocregion full -->
+    <script>
+      System.import('/app');
+    </script>
+    <!-- #docregion full -->
+  </head>
+  <!-- #docregion appcomponent -->
+  <body>
+    <phonecat-app></phonecat-app>
+  </body>
+  <!-- #enddocregion appcomponent -->
+</html>
+<!-- #enddocregion full -->
diff --git a/aio/content/examples/upgrade-phonecat-3-final/karma-test-shim.js b/aio/content/examples/upgrade-phonecat-3-final/karma-test-shim.js
new file mode 100644
index 000000000000..1b8d6acdd4d2
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/karma-test-shim.js
@@ -0,0 +1,96 @@
+// #docregion
+// /*global jasmine, __karma__, window*/
+Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
+
+// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
+// Error.stackTraceLimit = Infinity; //
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
+
+// builtPaths: root paths for output ("built") files
+// get from karma.config.js, then prefix with '/src/' (default is 'app/')
+var builtPaths = (__karma__.config.builtPaths || ['src/'])
+                 .map(function(p) { return '/base/'+p;});
+
+__karma__.loaded = function () { };
+
+function isJsFile(path) {
+  return path.slice(-3) == '.js';
+}
+
+function isSpecFile(path) {
+  return /\.spec\.(.*\.)?js$/.test(path);
+}
+
+// Is a "built" file if is JavaScript file in one of the "built" folders
+function isBuiltFile(path) {
+  return isJsFile(path) &&
+         builtPaths.reduce(function(keep, bp) {
+           return keep || (path.substr(0, bp.length) === bp);
+         }, false);
+}
+
+var allSpecFiles = Object.keys(window.__karma__.files)
+  .filter(isSpecFile)
+  .filter(isBuiltFile);
+
+System.config({
+  baseURL: 'base/src',
+  // Extend usual application package list with testing folder
+  packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
+
+  // Assume npm: is set in `paths` in systemjs.config
+  // Map the angular testing umd bundles
+  map: {
+    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
+    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
+    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
+    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
+    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
+  },
+});
+
+System.import('systemjs.config.js')
+  .then(importSystemJsExtras)
+  .then(initTestBed)
+  .then(initTesting);
+
+/** Optional SystemJS configuration extras. Keep going w/o it */
+function importSystemJsExtras(){
+  return System.import('systemjs.config.extras.js')
+  .catch(function(reason) {
+    console.log(
+      'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
+    );
+    console.log(reason);
+  });
+}
+
+function initTestBed(){
+  return Promise.all([
+    System.import('@angular/core/testing'),
+    System.import('@angular/platform-browser-dynamic/testing')
+  ])
+
+  .then(function (providers) {
+    var coreTesting    = providers[0];
+    var browserTesting = providers[1];
+
+    coreTesting.TestBed.initTestEnvironment(
+      browserTesting.BrowserDynamicTestingModule,
+      browserTesting.platformBrowserDynamicTesting());
+  })
+}
+
+// Import all spec files and start karma
+function initTesting () {
+  return Promise.all(
+    allSpecFiles.map(function (moduleName) {
+      return System.import(moduleName);
+    })
+  )
+  .then(__karma__.start, __karma__.error);
+}
diff --git a/aio/content/examples/upgrade-phonecat-3-final/karma.conf.js b/aio/content/examples/upgrade-phonecat-3-final/karma.conf.js
new file mode 100644
index 000000000000..a4b4d9dda117
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/karma.conf.js
@@ -0,0 +1,93 @@
+// #docregion
+module.exports = function(config) {
+
+  var appBase    = 'src/';       // transpiled app JS and map files
+  var appAssets  = '/base/app/'; // component assets fetched by Angular's compiler
+
+  // Testing helpers (optional) are conventionally in a folder called `testing`
+  var testingBase    = 'src/testing/'; // transpiled test JS and map files
+  var testingSrcBase = 'src/testing/'; // test source TS files
+
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine'],
+
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter')
+    ],
+
+    client: {
+      builtPaths: [appBase, testingBase], // add more spec base paths as needed
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+
+    customLaunchers: {
+      // From the CLI. Not used here but interesting
+      // chrome setup for travis CI using chromium
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+
+    files: [
+      // System.js for module loading
+      'node_modules/systemjs/dist/system.src.js',
+
+      // Polyfills
+      'node_modules/core-js/client/shim.js',
+
+      // zone.js
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/zone.js/dist/zone-testing.js',
+
+      // RxJs
+      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
+
+      // Paths loaded via module imports:
+      // Angular itself
+      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
+
+      { pattern: appBase + '/systemjs.config.js', included: false, watched: false },
+      { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false },
+      'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
+
+      // transpiled application & spec code paths loaded via module imports
+      { pattern: appBase + '**/*.js', included: false, watched: true },
+      { pattern: testingBase + '**/*.js', included: false, watched: true },
+
+
+      // Asset (HTML & CSS) paths loaded via Angular's component compiler
+      // (these paths need to be rewritten, see proxies section)
+      { pattern: appBase + '**/*.html', included: false, watched: true },
+      { pattern: appBase + '**/*.css', included: false, watched: true },
+
+      // Paths for debugging with source maps in dev tools
+      { pattern: appBase + '**/*.ts', included: false, watched: false },
+      { pattern: appBase + '**/*.js.map', included: false, watched: false },
+      { pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
+      { pattern: testingBase + '**/*.js.map', included: false, watched: false}
+    ],
+
+    // Proxied base paths for loading assets
+    proxies: {
+      // required for modules fetched by SystemJS
+      '/base/src/node_modules/': '/base/node_modules/'
+    },
+
+    exclude: [],
+    preprocessors: {},
+    reporters: ['progress', 'kjhtml'],
+
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  })
+}
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 000000000000..d90e45c2e944
--- /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-3-final/systemjs.config.1.js b/aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js
new file mode 100644
index 000000000000..a6e82c873783
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js
@@ -0,0 +1,57 @@
+/**
+ * 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: {
+      'ng-loader': '../src/systemjs-angular-loader.js',
+      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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.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',
+        meta: {
+          './*.js': {
+            loader: 'ng-loader'
+          }
+        }
+      },
+      'angular-in-memory-web-api': {
+        main: './index.js',
+        defaultExtension: 'js'
+      },
+      'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs': { main: 'index.js', defaultExtension: 'js' },
+    }
+  });
+})(this);
diff --git a/aio/content/examples/upgrade-phonecat-3-final/tsconfig.json b/aio/content/examples/upgrade-phonecat-3-final/tsconfig.json
new file mode 100644
index 000000000000..5ee3c82f1e0b
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "compileOnSave": true,
+  "exclude": [
+    "node_modules/*",
+    "**/*-aot.ts"
+  ]
+}
diff --git a/aio/content/examples/user-input/e2e/src/app.e2e-spec.ts b/aio/content/examples/user-input/e2e/src/app.e2e-spec.ts
new file mode 100644
index 000000000000..b70bd2f11314
--- /dev/null
+++ b/aio/content/examples/user-input/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,99 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, protractor } from 'protractor';
+
+describe('User Input Tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should support the click event', function () {
+    let mainEle = element(by.css('app-click-me'));
+    let buttonEle = element(by.css('app-click-me button'));
+    expect(mainEle.getText()).not.toContain('You are my hero!');
+    buttonEle.click().then(function() {
+      expect(mainEle.getText()).toContain('You are my hero!');
+    });
+  });
+
+  it('should support the click event with an event payload', function () {
+    let mainEle = element(by.css('app-click-me2'));
+    let buttonEle = element(by.css('app-click-me2 button'));
+    expect(mainEle.getText()).not.toContain('Event target is ');
+    buttonEle.click().then(function() {
+      expect(mainEle.getText()).toContain('Event target is BUTTON');
+    });
+  });
+
+  it('should support the keyup event ', function () {
+    let mainEle = element(by.css('app-key-up1'));
+    let inputEle = mainEle.element(by.css('input'));
+    let outputTextEle = mainEle.element(by.css('p'));
+    expect(outputTextEle.getText()).toEqual('');
+    inputEle.sendKeys('abc');
+    expect(outputTextEle.getText()).toEqual('a | ab | abc |');
+  });
+
+  it('should support user input from a local template let (loopback)', function () {
+    let mainEle = element(by.css('app-loop-back'));
+    let inputEle = mainEle.element(by.css('input'));
+    let outputTextEle = mainEle.element(by.css('p'));
+    expect(outputTextEle.getText()).toEqual('');
+    inputEle.sendKeys('abc');
+    expect(outputTextEle.getText()).toEqual('abc');
+  });
+
+  it('should be able to combine click event with a local template var', function () {
+    let mainEle = element(by.css('app-key-up2'));
+    let inputEle = mainEle.element(by.css('input'));
+    let outputTextEle = mainEle.element(by.css('p'));
+    expect(outputTextEle.getText()).toEqual('');
+    inputEle.sendKeys('abc');
+    expect(outputTextEle.getText()).toEqual('a | ab | abc |');
+  });
+
+  it('should be able to filter key events', () => {
+    let mainEle = element(by.css('app-key-up3'));
+    let inputEle = mainEle.element(by.css('input'));
+    let outputTextEle = mainEle.element(by.css('p'));
+    expect(outputTextEle.getText()).toEqual('');
+    inputEle.sendKeys('abc');
+    expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
+    // broken atm, see https://github.com/angular/angular/issues/9419
+    inputEle.sendKeys(protractor.Key.ENTER);
+    expect(outputTextEle.getText()).toEqual('abc');
+  });
+
+  it('should be able to filter blur events', function () {
+    let prevInputEle = element(by.css('app-key-up3 input'));
+    let mainEle = element(by.css('app-key-up4'));
+    let inputEle = mainEle.element(by.css('input'));
+    let outputTextEle = mainEle.element(by.css('p'));
+    expect(outputTextEle.getText()).toEqual('');
+    inputEle.sendKeys('abc');
+    expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
+    // change the focus
+    prevInputEle.click().then(function() {
+      expect(outputTextEle.getText()).toEqual('abc');
+    });
+  });
+
+  it('should be able to compose little tour of heroes', function () {
+    let mainEle = element(by.css('app-little-tour'));
+    let inputEle = mainEle.element(by.css('input'));
+    let addButtonEle = mainEle.element(by.css('button'));
+    let heroEles = mainEle.all(by.css('li'));
+    let numHeroes: number;
+    expect(heroEles.count()).toBeGreaterThan(0);
+    heroEles.count().then(function(count: number) {
+      numHeroes = count;
+      inputEle.sendKeys('abc');
+      return addButtonEle.click();
+    }).then(function() {
+      expect(heroEles.count()).toEqual(numHeroes + 1, 'should be one more hero added');
+      expect(heroEles.get(numHeroes).getText()).toContain('abc');
+    });
+  });
+});
+
diff --git a/aio/content/examples/user-input/example-config.json b/aio/content/examples/user-input/example-config.json
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/content/examples/user-input/src/app/app.component.html b/aio/content/examples/user-input/src/app/app.component.html
new file mode 100644
index 000000000000..303d7c0a0bf7
--- /dev/null
+++ b/aio/content/examples/user-input/src/app/app.component.html
@@ -0,0 +1,27 @@
+<p>
+  <app-click-me></app-click-me>
+</p>
+
+<p>
+  <app-click-me2></app-click-me2>
+</p>
+
+<h4>Give me some keys!</h4>
+<div><app-key-up1></app-key-up1></div>
+
+<h4>keyup loop-back component</h4>
+<div><app-loop-back></app-loop-back></div>
+<br><br>
+
+<h4>Give me some more keys!</h4>
+<div><app-key-up2></app-key-up2></div>
+
+<h4>Type away! Press [enter] when done.</h4>
+<div><app-key-up3></app-key-up3></div>
+
+<h4>Type away! Press [enter] or click elsewhere when done.</h4>
+<div><app-key-up4></app-key-up4></div>
+
+<h4>Little Tour of Heroes</h4>
+<p><i>Add a new hero</i></p>
+<div><app-little-tour></app-little-tour></div>
diff --git a/aio/content/examples/user-input/src/app/app.component.ts b/aio/content/examples/user-input/src/app/app.component.ts
new file mode 100644
index 000000000000..625590930600
--- /dev/null
+++ b/aio/content/examples/user-input/src/app/app.component.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Component }           from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }
diff --git a/aio/content/examples/user-input/src/app/app.module.ts b/aio/content/examples/user-input/src/app/app.module.ts
new file mode 100644
index 000000000000..41f13f9f116f
--- /dev/null
+++ b/aio/content/examples/user-input/src/app/app.module.ts
@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ClickMeComponent } from './click-me.component';
+import { ClickMe2Component } from './click-me2.component';
+import {
+  KeyUpComponent_v1,
+  KeyUpComponent_v2,
+  KeyUpComponent_v3,
+  KeyUpComponent_v4
+} from './keyup.components';
+import { LittleTourComponent } from './little-tour.component';
+import { LoopbackComponent } from './loop-back.component';
+
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    ClickMeComponent,
+    ClickMe2Component,
+    KeyUpComponent_v1,
+    KeyUpComponent_v2,
+    KeyUpComponent_v3,
+    KeyUpComponent_v4,
+    LittleTourComponent,
+    LoopbackComponent
+  ],
+  providers: [
+
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/user-input/src/app/click-me.component.ts b/aio/content/examples/user-input/src/app/click-me.component.ts
new file mode 100644
index 000000000000..0f70e2eadd11
--- /dev/null
+++ b/aio/content/examples/user-input/src/app/click-me.component.ts
@@ -0,0 +1,24 @@
+/* FOR DOCS ... MUST MATCH ClickMeComponent template
+// #docregion click-me-button
+  <button (click)="onClickMe()">Click me!</button>
+// #enddocregion click-me-button
+*/
+
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion click-me-component
+@Component({
+  selector: 'app-click-me',
+  template: `
+    <button (click)="onClickMe()">Click me!</button>
+    {{clickMessage}}`
+})
+export class ClickMeComponent {
+  clickMessage = '';
+
+  onClickMe() {
+    this.clickMessage = 'You are my hero!';
+  }
+}
+// #enddocregion click-me-component
diff --git a/aio/content/examples/user-input/src/app/click-me2.component.ts b/aio/content/examples/user-input/src/app/click-me2.component.ts
new file mode 100644
index 000000000000..476d5db9694a
--- /dev/null
+++ b/aio/content/examples/user-input/src/app/click-me2.component.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-click-me2',
+  template: `
+    <button (click)="onClickMe2($event)">No! .. Click me!</button>
+    {{clickMessage}}`
+})
+export class ClickMe2Component {
+  clickMessage = '';
+  clicks = 1;
+
+  onClickMe2(event: any) {
+    let evtMsg = event ? ' Event target is ' + event.target.tagName  : '';
+    this.clickMessage = (`Click #${this.clicks++}. ${evtMsg}`);
+  }
+}
diff --git a/aio/content/examples/user-input/src/app/keyup.components.ts b/aio/content/examples/user-input/src/app/keyup.components.ts
new file mode 100644
index 000000000000..e561a3ce7ade
--- /dev/null
+++ b/aio/content/examples/user-input/src/app/keyup.components.ts
@@ -0,0 +1,88 @@
+/* tslint:disable:class-name component-class-suffix */
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion key-up-component-1
+@Component({
+  selector: 'app-key-up1',
+// #docregion key-up-component-1-template
+  template: `
+    <input (keyup)="onKey($event)">
+    <p>{{values}}</p>
+  `
+// #enddocregion key-up-component-1-template
+})
+// #docregion key-up-component-1-class, key-up-component-1-class-no-type
+export class KeyUpComponent_v1 {
+  values = '';
+
+// #enddocregion key-up-component-1-class, key-up-component-1-class-no-type
+  /*
+  // #docregion key-up-component-1-class-no-type
+  onKey(event: any) { // without type info
+    this.values += event.target.value + ' | ';
+  }
+  // #enddocregion key-up-component-1-class-no-type
+  */
+  // #docregion key-up-component-1-class
+
+  onKey(event: KeyboardEvent) { // with type info
+    this.values += (<HTMLInputElement>event.target).value + ' | ';
+  }
+// #docregion key-up-component-1-class-no-type
+}
+// #enddocregion key-up-component-1,key-up-component-1-class, key-up-component-1-class-no-type
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-2
+@Component({
+  selector: 'app-key-up2',
+  template: `
+    <input #box (keyup)="onKey(box.value)">
+    <p>{{values}}</p>
+  `
+})
+export class KeyUpComponent_v2 {
+  values = '';
+  onKey(value: string) {
+    this.values += value + ' | ';
+  }
+}
+// #enddocregion key-up-component-2
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-3
+@Component({
+  selector: 'app-key-up3',
+  template: `
+    <input #box (keyup.enter)="onEnter(box.value)">
+    <p>{{value}}</p>
+  `
+})
+export class KeyUpComponent_v3 {
+  value = '';
+  onEnter(value: string) { this.value = value; }
+}
+// #enddocregion key-up-component-3
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-4
+@Component({
+  selector: 'app-key-up4',
+  template: `
+    <input #box
+      (keyup.enter)="update(box.value)"
+      (blur)="update(box.value)">
+
+    <p>{{value}}</p>
+  `
+})
+export class KeyUpComponent_v4 {
+  value = '';
+  update(value: string) { this.value = value; }
+}
+// #enddocregion key-up-component-4
diff --git a/aio/content/examples/user-input/src/app/little-tour.component.ts b/aio/content/examples/user-input/src/app/little-tour.component.ts
new file mode 100644
index 000000000000..2b8936e906ee
--- /dev/null
+++ b/aio/content/examples/user-input/src/app/little-tour.component.ts
@@ -0,0 +1,25 @@
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion little-tour
+@Component({
+  selector: 'app-little-tour',
+  template: `
+    <input #newHero
+      (keyup.enter)="addHero(newHero.value)"
+      (blur)="addHero(newHero.value); newHero.value='' ">
+
+    <button (click)="addHero(newHero.value)">Add</button>
+
+    <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
+  `
+})
+export class LittleTourComponent {
+  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
+  addHero(newHero: string) {
+    if (newHero) {
+      this.heroes.push(newHero);
+    }
+  }
+}
+// #enddocregion little-tour
diff --git a/aio/content/examples/user-input/src/app/loop-back.component.ts b/aio/content/examples/user-input/src/app/loop-back.component.ts
new file mode 100644
index 000000000000..229123f3de5e
--- /dev/null
+++ b/aio/content/examples/user-input/src/app/loop-back.component.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+// #docregion loop-back-component
+@Component({
+  selector: 'app-loop-back',
+  template: `
+    <input #box (keyup)="0">
+    <p>{{box.value}}</p>
+  `
+})
+export class LoopbackComponent { }
+// #enddocregion loop-back-component
diff --git a/aio/content/examples/user-input/src/assets/user-input-styles.css b/aio/content/examples/user-input/src/assets/user-input-styles.css
new file mode 100644
index 000000000000..b2133e5103ec
--- /dev/null
+++ b/aio/content/examples/user-input/src/assets/user-input-styles.css
@@ -0,0 +1,9 @@
+fieldset {border-style:none}
+img {height: 100px;}
+.box {border: 1px solid black; padding:3px}
+.child-div {margin-left: 1em; font-weight: normal}
+.hidden {display: none}
+.parent-div {margin-top: 1em; font-weight: bold}
+.special {font-weight:bold;}
+.toe {margin-left: 1em; font-style: italic;}
+little-hero {color:blue; font-size: smaller; background-color: Turquoise }
\ No newline at end of file
diff --git a/aio/content/examples/user-input/src/index.html b/aio/content/examples/user-input/src/index.html
new file mode 100644
index 000000000000..04e2ed51d777
--- /dev/null
+++ b/aio/content/examples/user-input/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>User Input</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="assets/user-input-styles.css">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+
+</html>
diff --git a/aio/content/examples/user-input/src/main.ts b/aio/content/examples/user-input/src/main.ts
new file mode 100644
index 000000000000..a9ca1caf8cee
--- /dev/null
+++ b/aio/content/examples/user-input/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/user-input/stackblitz.json b/aio/content/examples/user-input/stackblitz.json
new file mode 100644
index 000000000000..d60beb9e7e14
--- /dev/null
+++ b/aio/content/examples/user-input/stackblitz.json
@@ -0,0 +1,8 @@
+{
+  "description": "User Input",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags": ["input"]
+}
diff --git a/aio/content/examples/visual-studio-2015/tsconfig.json b/aio/content/examples/visual-studio-2015/tsconfig.json
new file mode 100644
index 000000000000..2624488890fc
--- /dev/null
+++ b/aio/content/examples/visual-studio-2015/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "compileOnSave": true
+}
diff --git a/aio/content/file-not-found.md b/aio/content/file-not-found.md
new file mode 100644
index 000000000000..9371fe03bf03
--- /dev/null
+++ b/aio/content/file-not-found.md
@@ -0,0 +1,10 @@
+@description
+
+<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>
+<aio-file-not-found-search></aio-file-not-found-search>
diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md
new file mode 100644
index 000000000000..b900fd0a78be
--- /dev/null
+++ b/aio/content/guide/ajs-quick-reference.md
@@ -0,0 +1,1276 @@
+# AngularJS to Angular Concepts: Quick Reference
+
+
+{@a top}
+
+
+_Angular_ is the name for the Angular of today and tomorrow.
+_AngularJS_ is the name for all v1.x versions of Angular.
+
+This guide helps you transition from AngularJS to Angular
+by mapping AngularJS syntax to the equivalent Angular syntax.
+
+
+**See the Angular syntax in this <live-example name="ajs-quick-reference"></live-example>**.
+
+## Template basics
+Templates are the user-facing part of an Angular application and are written in HTML.
+The following table lists some of the key AngularJS template features with their equivalent Angular template syntax.
+
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      AngularJS
+    </th>
+
+    <th>
+      Angular
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### Bindings/interpolation
+
+      <code-example hideCopy>
+        Your favorite hero is: {{vm.favoriteHero}}
+      </code-example>
+
+
+      In AngularJS, an expression in curly braces denotes one-way binding.
+      This binds the value of the element to a property in the controller
+      associated with this template.
+
+      When using the `controller as` syntax,
+      the binding is prefixed with the controller alias (`vm` or `$ctrl`) because you
+      have to be specific about the source of the binding.
+    </td>
+
+    <td>
+
+
+      ### Bindings/interpolation
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="interpolation" linenums="false"></code-example>
+
+
+      In Angular, a template expression in curly braces still denotes one-way binding.
+      This binds the value of the element to a property of the component.
+      The context of the binding is implied and is always the
+      associated component, so it needs no reference variable.
+
+      For more information, see the [Interpolation](guide/template-syntax#interpolation)
+      section of the [Template Syntax](guide/template-syntax) page.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### Filters
+
+      <code-example hideCopy>
+        &lt;td>{{movie.title | uppercase}}&lt;/td>
+      </code-example>
+
+
+      To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
+
+      This example filters the `title` property to uppercase.
+    </td>
+
+    <td>
+
+
+      ### Pipes
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="uppercase" linenums="false"></code-example>
+
+
+      In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them **pipes**.
+      Many (but not all) of the built-in filters from AngularJS are
+      built-in pipes in Angular.
+
+      For more information, see [Filters/pipes](guide/ajs-quick-reference#filters-pipes) below.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### Local variables
+
+      <code-example hideCopy format="">
+        &lt;tr ng-repeat="movie in vm.movies">
+          &lt;td>{{movie.title}}&lt;/td>
+        &lt;/tr>
+      </code-example>
+
+
+      Here, `movie` is a user-defined local variable.
+    </td>
+
+    <td>
+
+
+      ### Input variables
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="local" linenums="false"></code-example>
+
+
+      Angular has true template input variables that are explicitly defined using the `let` keyword.
+
+      For more information, see the [ngFor micro-syntax](guide/template-syntax#microsyntax)
+      section of the [Template Syntax](guide/template-syntax) page.
+    </td>
+
+  </tr>
+
+</table>
+
+
+## Template directives
+AngularJS provides more than seventy built-in directives for templates.
+Many of them aren't needed in Angular because of its more capable and expressive binding system.
+The following are some of the key AngularJS built-in directives and their equivalents in Angular.
+
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      AngularJS
+    </th>
+
+    <th>
+      Angular
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-app
+
+      <code-example hideCopy>
+        &lt;body ng-app="movieHunter">
+      </code-example>
+
+
+      The application startup process is called **bootstrapping**.
+
+      Although you can bootstrap an AngularJS app in code,
+      many applications bootstrap declaratively with the `ng-app` directive,
+      giving it the name of the application's module (`movieHunter`).
+    </td>
+
+    <td>
+
+
+      ### Bootstrapping
+
+      <code-example hideCopy path="ajs-quick-reference/src/main.ts" title="main.ts" linenums="false"></code-example>
+      <br>
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" title="app.module.ts" linenums="false"></code-example>
+
+
+      Angular doesn't have a bootstrap directive.
+      To launch the app in code, explicitly bootstrap the application's root module (`AppModule`)
+      in `main.ts`
+      and the application's root component (`AppComponent`) in `app.module.ts`.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-class
+
+      <code-example hideCopy format="">
+        &lt;div ng-class="{active: isActive}">
+        &lt;div ng-class="{active: isActive,
+                           shazam: isImportant}">
+      </code-example>
+
+
+      In AngularJS, the `ng-class` directive includes/excludes CSS classes
+      based on an expression. That expression is often a key-value control object with each
+      key of the object defined as a CSS class name, and each value defined as a template expression
+      that evaluates to a Boolean value.
+
+      In the first example, the `active` class is applied to the element if `isActive` is true.
+
+      You can specify multiple classes, as shown in the second example.
+    </td>
+
+    <td>
+
+
+      ### ngClass
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="ngClass" linenums="false"></code-example>
+
+
+      In Angular, the `ngClass` directive works similarly.
+      It includes/excludes CSS classes based on an expression.
+
+      In the first example, the `active` class is applied to the element if `isActive` is true.
+
+      You can specify multiple classes, as shown in the second example.
+
+      Angular also has **class binding**, which is a good way to add or remove a single class,
+      as shown in the third example.
+
+      For more information see the [Attribute, class, and style bindings](guide/template-syntax#other-bindings)
+      section of the [Template Syntax](guide/template-syntax) page.
+
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-click
+
+      <code-example hideCopy format="">
+        &lt;button ng-click="vm.toggleImage()">
+        &lt;button ng-click="vm.toggleImage($event)">
+      </code-example>
+
+
+      In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
+
+      In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.
+
+      The second example demonstrates passing in the `$event` object, which provides details about the event
+      to the controller.
+    </td>
+
+    <td>
+
+
+      ### Bind to the `click` event
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="event-binding" linenums="false"></code-example>
+
+
+      AngularJS event-based directives do not exist in Angular.
+      Rather, define one-way binding from the template view to the component using **event binding**.
+
+      For event binding, define the name of the target event within parenthesis and
+      specify a template statement, in quotes, to the right of the equals. Angular then
+      sets up an event handler for the target event. When the event is raised, the handler
+      executes the template statement.
+
+      In the first example, when a user clicks the button, the `toggleImage()` method in the associated component is executed.
+
+      The second example demonstrates passing in the `$event` object, which provides details about the event
+      to the component.
+
+      For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events.
+
+      For more information, see the [Event binding](guide/template-syntax#event-binding)
+      section of the [Template Syntax](guide/template-syntax) page.
+
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-controller
+
+      <code-example hideCopy format="">
+        &lt;div ng-controller="MovieListCtrl as vm">
+      </code-example>
+
+
+      In AngularJS, the `ng-controller` directive attaches a controller to the view.
+      Using the `ng-controller` (or defining the controller as part of the routing) ties the
+      view to the controller code associated with that view.
+    </td>
+
+    <td>
+
+
+      ### Component decorator
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="component" linenums="false"></code-example>
+
+
+      In Angular, the template no longer specifies its associated controller.
+      Rather, the component specifies its associated template as part of the component class decorator.
+
+      For more information, see [Architecture Overview](guide/architecture#components).
+
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-hide
+      In AngularJS, the `ng-hide` directive shows or hides the associated HTML element based on
+      an expression. For more information, see [ng-show](guide/ajs-quick-reference#ng-show).
+    </td>
+
+    <td>
+
+
+      ### Bind to the `hidden` property
+      In Angular, you use property binding; there is no built-in *hide* directive.
+      For more information, see [ng-show](guide/ajs-quick-reference#ng-show).
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-href
+
+      <code-example hideCopy format="">
+        &lt;a ng-href="{{ angularDocsUrl }}">Angular Docs&lt;/a>
+      </code-example>
+
+
+      The `ng-href` directive allows AngularJS to preprocess the `href` property so that it
+      can replace the binding expression with the appropriate URL before the browser
+      fetches from that URL.
+
+      In AngularJS, the `ng-href` is often used to activate a route as part of navigation.
+
+      <code-example hideCopy format="">
+        &lt;a ng-href="#{{ moviesHash }}">Movies&lt;/a>
+      </code-example>
+
+
+      Routing is handled differently in Angular.
+    </td>
+
+    <td>
+
+
+      ### Bind to the `href` property
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="href" linenums="false"></code-example>
+
+
+      Angular uses property binding; there is no built-in *href* directive.
+      Place the element's `href` property in square brackets and set it to a quoted template expression.
+
+      For more information see the [Property binding](guide/template-syntax#property-binding)
+      section of the [Template Syntax](guide/template-syntax) page.
+
+      In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example.
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="router-link" linenums="false"></code-example>
+
+
+      For more information on routing, see the [RouterLink binding](guide/router#router-link)
+      section of the [Routing & Navigation](guide/router) page.
+
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-if
+
+      <code-example hideCopy format="">
+        &lt;table ng-if="movies.length">
+      </code-example>
+
+
+      In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM,
+      based on an expression. If the expression is false, the element is removed from the DOM.
+
+      In this example, the `<table>` element is removed from the DOM unless the `movies` array has a length greater than zero.
+    </td>
+
+    <td>
+
+
+      ### *ngIf
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngIf" linenums="false"></code-example>
+
+
+      The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes
+      or recreates a portion of the DOM based on an expression.
+
+      In this example, the `<table>` element is removed from the DOM unless the `movies` array has a length.
+
+      The (*) before `ngIf` is required in this example.
+      For more information, see [Structural Directives](guide/structural-directives).
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-model
+
+      <code-example hideCopy format="">
+        &lt;input ng-model="vm.favoriteHero"/>
+      </code-example>
+
+
+      In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template.
+      This provides **two-way binding**, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view.
+    </td>
+
+    <td>
+
+
+      ### ngModel
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngModel" linenums="false"></code-example>
+
+
+      In Angular, **two-way binding** is denoted by `[()]`, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view)
+      and event binding (from the view to the component), thereby providing two-way binding.
+
+      For more information on two-way binding with `ngModel`, see the [NgModel&mdash;Two-way binding to
+      form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel)
+      section of the [Template Syntax](guide/template-syntax) page.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-repeat
+
+      <code-example hideCopy format="">
+        &lt;tr ng-repeat="movie in vm.movies">
+      </code-example>
+
+
+      In AngularJS, the `ng-repeat` directive repeats the associated DOM element
+      for each item in the specified collection.
+
+      In this example, the table row (`<tr>`) element repeats for each movie object in the collection of movies.
+    </td>
+
+    <td>
+
+
+      ### *ngFor
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngFor" linenums="false"></code-example>
+
+
+      The `*ngFor` directive in Angular is similar to the `ng-repeat` directive in AngularJS. It repeats
+      the associated DOM element for each item in the specified collection.
+      More accurately, it turns the defined element (`<tr>` in this example) and its contents into a template and
+      uses that template to instantiate a view for each item in the list.
+
+      Notice the other syntax differences:
+      The (*) before `ngFor` is required;
+      the `let` keyword identifies `movie` as an input variable;
+      the list preposition is `of`, not `in`.
+
+      For more information, see [Structural Directives](guide/structural-directives).
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-show
+
+      <code-example hideCopy format="">
+        &lt;h3 ng-show="vm.favoriteHero">
+          Your favorite hero is: {{vm.favoriteHero}}
+        &lt;/h3>
+      </code-example>
+
+
+      In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on
+      an expression.
+
+      In this example, the `<div>` element is shown if the `favoriteHero` variable is truthy.
+    </td>
+
+    <td>
+
+
+      ### Bind to the `hidden` property
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="hidden" linenums="false"></code-example>
+
+
+      Angular uses property binding; there is no built-in *show* directive.
+      For hiding and showing elements, bind to the HTML `hidden` property.
+
+      To conditionally display an element, place the element's `hidden` property in square brackets and
+      set it to a quoted template expression that evaluates to the *opposite* of *show*.
+
+      In this example, the `<div>` element is hidden if the `favoriteHero` variable is not truthy.
+
+      For more information on property binding, see the [Property binding](guide/template-syntax#property-binding)
+      section of the [Template Syntax](guide/template-syntax) page.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-src
+
+      <code-example hideCopy format="">
+        &lt;img ng-src="{{movie.imageurl}}">
+      </code-example>
+
+
+      The `ng-src` directive allows AngularJS to preprocess the `src` property so that it
+      can replace the binding expression with the appropriate URL before the browser
+      fetches from that URL.
+    </td>
+
+    <td>
+
+
+      ### Bind to the `src` property
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="src" linenums="false"></code-example>
+
+
+      Angular uses property binding; there is no built-in *src* directive.
+      Place the `src` property in square brackets and set it to a quoted template expression.
+
+      For more information on property binding, see the [Property binding](guide/template-syntax#property-binding)
+      section of the [Template Syntax](guide/template-syntax) page.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-style
+
+      <code-example hideCopy format="">
+        &lt;div ng-style="{color: colorPreference}">
+      </code-example>
+
+
+      In AngularJS, the `ng-style` directive sets a CSS style on an HTML element
+      based on an expression. That expression is often a key-value control object with each
+      key of the object defined as a CSS property, and each value defined as an expression
+      that evaluates to a value appropriate for the style.
+
+      In the example, the `color` style is set to the current value of the `colorPreference` variable.
+    </td>
+
+    <td>
+
+
+      ### ngStyle
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="ngStyle" linenums="false"></code-example>
+
+
+      In Angular, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression.
+
+      In the first example, the `color` style is set to the current value of the `colorPreference` variable.
+
+      Angular also has **style binding**, which is good way to set a single style. This is shown in the second example.
+
+      For more information on style binding, see the [Style binding](guide/template-syntax#style-binding) section of the
+      [Template Syntax](guide/template-syntax) page.
+
+      For more information on the `ngStyle` directive, see [NgStyle](guide/template-syntax#ngStyle)
+      section of the [Template Syntax](guide/template-syntax) page.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### ng-switch
+
+      <code-example hideCopy format="">
+        &lt;div ng-switch="vm.favoriteHero &&
+                        vm.checkMovieHero(vm.favoriteHero)">
+            &lt;div ng-switch-when="true">
+              Excellent choice!
+            &lt;/div>
+            &lt;div ng-switch-when="false">
+              No movie, sorry!
+            &lt;/div>
+            &lt;div ng-switch-default>
+              Please enter your favorite hero.
+            &lt;/div>
+        &lt;/div>
+      </code-example>
+
+
+      In AngularJS, the `ng-switch` directive swaps the contents of
+      an element by selecting one of the templates based on the current value of an expression.
+
+      In this example, if `favoriteHero` is not set, the template displays "Please enter ...".
+      If `favoriteHero` is set, it checks the movie hero by calling a controller method.
+      If that method returns `true`, the template displays "Excellent choice!".
+      If that methods returns `false`, the template displays "No movie, sorry!".
+    </td>
+
+    <td>
+
+
+      ### ngSwitch
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngSwitch" linenums="false"></code-example>
+
+
+      In Angular, the `ngSwitch` directive works similarly.
+      It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value.
+
+      In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
+      and `*ngSwitchDefault` displays, "Please enter ...".
+      If `favoriteHero` is set, the app checks the movie hero by calling a component method.
+      If that method returns `true`, the app selects `*ngSwitchCase="true"` and displays: "Excellent choice!"
+      If that methods returns `false`, the app selects `*ngSwitchCase="false"` and displays: "No movie, sorry!"
+
+      The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example.
+
+      For more information, see [The NgSwitch directives](guide/template-syntax#ngSwitch)
+      section of the [Template Syntax](guide/template-syntax) page.
+    </td>
+
+  </tr>
+
+</table>
+
+
+{@a filters-pipes}
+
+
+
+## Filters/pipes
+Angular **pipes** provide formatting and transformation for data in the template, similar to AngularJS **filters**.
+Many of the built-in filters in AngularJS have corresponding pipes in Angular.
+For more information on pipes, see [Pipes](guide/pipes).
+
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      AngularJS
+    </th>
+
+    <th>
+      Angular
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### currency
+
+      <code-example hideCopy>
+        &lt;td>{{movie.price | currency}}&lt;/td>
+      </code-example>
+
+
+      Formats a number as currency.
+    </td>
+
+    <td>
+
+
+      ### currency
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="currency" linenums="false"></code-example>
+
+
+      The Angular `currency` pipe is similar although some of the parameters have changed.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### date
+
+      <code-example hideCopy>
+        &lt;td>{{movie.releaseDate | date}}&lt;/td>
+      </code-example>
+
+
+      Formats a date to a string based on the requested format.
+    </td>
+
+    <td>
+
+
+      ### date
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="date" linenums="false"></code-example>
+
+
+      The Angular `date` pipe is similar.
+
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### filter
+
+      <code-example hideCopy>
+        &lt;tr ng-repeat="movie in movieList | filter: {title:listFilter}">
+      </code-example>
+
+
+      Selects a subset of items from the defined collection, based on the filter criteria.
+    </td>
+
+    <td>
+
+
+      ### none
+      For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.
+
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### json
+
+      <code-example hideCopy>
+        &lt;pre>{{movie | json}}&lt;/pre>
+      </code-example>
+
+
+      Converts a JavaScript object into a JSON string. This is useful for debugging.
+    </td>
+
+    <td>
+
+
+      ### json
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="json" linenums="false"></code-example>
+
+
+      The Angular `json` pipe does the same thing.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### limitTo
+
+      <code-example hideCopy>
+        &lt;tr ng-repeat="movie in movieList | limitTo:2:0">
+      </code-example>
+
+
+      Selects up to the first parameter (2) number of items from the collection
+      starting (optionally) at the beginning index (0).
+    </td>
+
+    <td>
+
+
+      ### slice
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="slice" linenums="false"></code-example>
+
+
+      The `SlicePipe` does the same thing but the *order of the parameters is reversed*, in keeping
+      with the JavaScript `Slice` method.
+      The first parameter is the starting index; the second is the limit.
+      As in AngularJS, coding this operation within the component instead could improve performance.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### lowercase
+
+      <code-example hideCopy>
+        &lt;td>{{movie.title | lowercase}}&lt;/td>
+      </code-example>
+
+
+      Converts the string to lowercase.
+    </td>
+
+    <td>
+
+
+      ### lowercase
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="lowercase" linenums="false"></code-example>
+
+
+      The Angular `lowercase` pipe does the same thing.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### number
+
+      <code-example hideCopy>
+        &lt;td>{{movie.starRating | number}}&lt;/td>
+      </code-example>
+
+
+      Formats a number as text.
+    </td>
+
+    <td>
+
+
+      ### number
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="number" linenums="false"></code-example>
+
+
+      The Angular `number` pipe is similar.
+      It provides more functionality when defining
+      the decimal places, as shown in the second example above.
+
+      Angular also has a `percent` pipe, which formats a number as a local percentage
+      as shown in the third example.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### orderBy
+
+      <code-example hideCopy>
+        &lt;tr ng-repeat="movie in movieList | orderBy : 'title'">
+      </code-example>
+
+
+      Displays the collection in the order specified by the expression.
+      In this example, the movie title orders the `movieList`.
+    </td>
+
+    <td>
+
+
+      ### none
+      For performance reasons, no comparable pipe exists in Angular.
+      Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.
+
+    </td>
+
+  </tr>
+
+</table>
+
+
+
+{@a controllers-components}
+
+
+
+## Modules/controllers/components
+In both AngularJS and Angular, modules help you organize your application into cohesive blocks of functionality.
+
+In AngularJS, you write the code that provides the model and the methods for the view in a **controller**.
+In Angular, you build a **component**.
+
+Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column.
+The Angular code is shown using TypeScript.
+
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      AngularJS
+    </th>
+
+    <th>
+      Angular
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### IIFE
+
+      <code-example hideCopy>
+        (function () {
+          ...
+        }());
+      </code-example>
+
+
+      In AngularJS, an immediately invoked function expression (or IIFE) around controller code
+      keeps it out of the global namespace.
+
+    </td>
+
+    <td>
+
+
+      ### none
+      This is a nonissue in Angular because ES 2015 modules
+      handle the namespacing for you.
+
+      For more information on modules, see the [Modules](guide/architecture#modules) section of the
+      [Architecture Overview](guide/architecture).
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### Angular modules
+
+      <code-example hideCopy>
+        angular.module("movieHunter", ["ngRoute"]);
+      </code-example>
+
+
+      In AngularJS, an Angular module keeps track of controllers, services, and other code.
+      The second argument defines the list of other modules that this module depends upon.
+    </td>
+
+    <td>
+
+
+      ### NgModules
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" linenums="false"></code-example>
+
+
+      NgModules, defined with the `NgModule` decorator, serve the same purpose:
+
+      * `imports`: specifies the list of other modules that this module depends upon
+      * `declaration`: keeps track of your components, pipes, and directives.
+
+      For more information on modules, see [NgModules](guide/ngmodules).
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### Controller registration
+
+      <code-example hideCopy>
+        angular
+          .module("movieHunter")
+          .controller("MovieListCtrl",
+                      ["movieService",
+                       MovieListCtrl]);
+      </code-example>
+
+
+      AngularJS has code in each controller that looks up an appropriate Angular module
+      and registers the controller with that module.
+
+      The first argument is the controller name. The second argument defines the string names of
+      all dependencies injected into this controller, and a reference to the controller function.
+    </td>
+
+    <td>
+
+
+      ### Component decorator
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="component" linenums="false"></code-example>
+
+
+      Angular adds a decorator to the component class to provide any required metadata.
+      The `@Component` decorator declares that the class is a component and provides metadata about
+      that component such as its selector (or tag) and its template.
+
+      This is how you associate a template with logic, which is defined in the component class.
+
+      For more information, see the [Components](guide/architecture#components)
+      section of the [Architecture Overview](guide/architecture) page.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### Controller function
+
+      <code-example hideCopy>
+        function MovieListCtrl(movieService) {
+        }
+      </code-example>
+
+
+      In AngularJS, you write the code for the model and methods in a controller function.
+    </td>
+
+    <td>
+
+
+      ### Component class
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="class" linenums="false"></code-example>
+
+
+      In Angular, you create a component class.
+
+      NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class.
+
+      For more information, see the [Components](guide/architecture#components)
+      section of the [Architecture Overview](guide/architecture) page.
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### Dependency injection
+
+      <code-example hideCopy>
+        MovieListCtrl.$inject = ['MovieService'];
+        function MovieListCtrl(movieService) {
+        }
+      </code-example>
+
+
+      In AngularJS, you pass in any dependencies as controller function arguments.
+      This example injects a `MovieService`.
+
+      To guard against minification problems, tell Angular explicitly
+      that it should inject an instance of the `MovieService` in the first parameter.
+    </td>
+
+    <td>
+
+
+      ### Dependency injection
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="di" linenums="false"></code-example>
+
+
+      In Angular, you pass in dependencies as arguments to the component class constructor.
+      This example injects a `MovieService`.
+      The first parameter's TypeScript type tells Angular what to inject, even after minification.
+
+      For more information, see the [Dependency injection](guide/architecture#dependency-injection)
+      section of the [Architecture Overview](guide/architecture).
+    </td>
+
+  </tr>
+
+</table>
+
+{@a style-sheets}
+
+
+
+## Style sheets
+Style sheets give your application a nice look.
+In AngularJS, you specify the style sheets for your entire application.
+As the application grows over time, the styles for the many parts of the application
+merge, which can cause unexpected results.
+In Angular, you can still define style sheets for your entire application. But now you can
+also encapsulate a style sheet within a specific component.
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      AngularJS
+    </th>
+
+    <th>
+      Angular
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      ### Link tag
+
+      <code-example hideCopy>
+        &lt;link href="styles.css" rel="stylesheet" />
+      </code-example>
+
+
+      AngularJS, uses a `link` tag in the head section of the `index.html` file
+      to define the styles for the application.
+    </td>
+
+    <td>
+
+
+
+      ### Styles configuration
+      <code-example hideCopy path="ajs-quick-reference/.angular-cli.1.json" region="styles" linenums="false"></code-example>
+
+      With the Angular CLI, you can configure your global styles in the `angular.json` file.
+      You can rename the extension to `.scss` to use sass.
+
+      ### StyleUrls
+      In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define
+      a style sheet for a particular component.
+
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="style-url" linenums="false"></code-example>
+
+
+      This allows you to set appropriate styles for individual components that won’t leak into
+      other parts of the application.
+    </td>
+
+  </tr>
+
+</table>
+
diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md
new file mode 100644
index 000000000000..b214696d0afb
--- /dev/null
+++ b/aio/content/guide/animations.md
@@ -0,0 +1,354 @@
+# Animations
+
+Motion is an important aspect in the design of modern web applications. Good
+user interfaces transition smoothly between states with engaging animations
+that call attention where it's needed. Well-designed animations can make a UI not only
+more fun but also easier to use.
+
+## 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.
+
+<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).
+
+As of Angular 6, If the Web Animations API is not supported natively by the browser, then Angular will use CSS
+keyframes as a fallback instead (automatically). This means that the polyfill is no longer required unless any
+code uses [AnimationBuilder](/api/animations/AnimationBuilder). If your code does use AnimationBuilder, then
+uncomment the `web-animations-js` polyfill from the `polyfills.ts` file generated by Angular CLI.
+</div>
+
+<div class="alert is-helpful">
+
+The examples in this page are available as a <live-example></live-example>.
+
+</div>
+
+## Setup
+
+Before you can add animations to your application, you need
+to import a few animation-specific modules and functions to the root application module.
+
+<code-example path="animations/src/app/app.module.ts" region="animations-module" title="app.module.ts (animation module import excerpt)" linenums="false"></code-example>
+
+#### Example basics
+
+The animations examples in this guide animate a list of heroes.
+
+A `Hero` class has a `name` property, a `state` property that indicates if the hero is active or not,
+and a `toggleState()` method to switch between the states.
+
+<code-example path="animations/src/app/hero.service.ts" region="hero" title="hero.service.ts (Hero class)" linenums="false"></code-example>
+
+Across the top of the screen (`app.hero-team-builder.component.ts`)
+are a series of buttons that add and remove heroes from the list (via the `HeroService`). 
+The buttons trigger changes to the list that all of the example components see at the same time.
+
+{@a example-transitioning-between-states}
+
+## Transitioning between two states
+
+<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.
+
+
+Animations can be defined inside `@Component` metadata. 
+
+<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.
+
+<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.
+
+</div>
+
+Now, using the `[@triggerName]` syntax, attach the animation that you just defined to
+one or more elements in the component's template.
+
+<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`.
+
+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>
+
+## States and transitions
+
+Angular animations are defined as logical **states** and **transitions**
+between states.
+
+An animation state is a string value that you define in your application code. In the example
+above, the states `'active'` and `'inactive'` are based on the logical state of
+hero objects. The source of the state can be a simple object attribute, as it was in this case,
+or it can be a value computed in a method. The important thing is that you can read it into the
+component's template.
+
+You 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>
+
+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
+*as long as it remains in that state*. In effect, you're defining what styles the element has in different states.
+
+After you define states, you can define *transitions* between the states. Each transition
+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>
+
+<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:
+
+<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>
+
+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`.
+
+<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 `*`
+
+The `*` ("wildcard") state matches *any* animation state. This is useful for defining styles and
+transitions that apply regardless of which state the animation is in. For example:
+
+* The `active => *` transition applies when the element's state changes from `active` to anything else.
+* The `* => *` transition applies when *any* change between two states takes place.
+
+<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
+
+The special state called `void` can apply to any animation. It applies
+when the element is *not* attached to a view, perhaps because it has not yet been
+added or because it has been removed. The `void` state is useful for defining enter and
+leave animations.
+
+For example the `* => void` transition applies when the element leaves the view,
+regardless of what state it was in before it left.
+
+<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`.
+
+## Example: Entering and leaving
+
+<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:
+
+* Enter: `void => *`
+* Leave: `* => void`
+
+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.
+
+<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
+are different on enter and leave: the element enters from the left
+and leaves to the right.
+
+<div class="alert is-helpful">
+
+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
+
+<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
+different transitions for entering and leaving based on what the state of the hero
+is:
+
+* Inactive hero enter: `void => inactive`
+* Active hero enter: `void => active`
+* Inactive hero leave: `inactive => void`
+* Active hero leave: `active => void`
+
+This gives you fine-grained control over each transition:
+
+<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>
+
+## Animatable properties and units
+
+Since Angular's animation support builds on top of Web Animations, you can animate any property
+that the browser considers *animatable*. This includes positions, sizes, transforms, colors,
+borders, and many others. The W3C maintains
+[a list of animatable properties](https://www.w3.org/TR/css3-transitions/#animatable-properties)
+on its [CSS Transitions page](https://www.w3.org/TR/css3-transitions).
+
+For positional properties that have a numeric value, you can define a unit by providing
+the value as a string with the appropriate suffix:
+
+* `'50px'`
+* `'3em'`
+* `'100%'`
+
+If you don't provide a unit when specifying dimension, Angular assumes the default of `px`:
+
+* `50` is the same as saying `'50px'`
+
+## Automatic property calculation
+
+<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
+depend on their content and the screen size. These properties are often tricky
+to animate with CSS.
+
+In these cases, you can use a special `*` property value so that the value of the
+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:
+
+<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
+
+There are three timing properties you can tune for every animated transition:
+the duration, the delay, and the easing function. They are all combined into
+a single transition *timing string*.
+
+### Duration
+
+The duration controls how long the animation takes to run from start to finish.
+You can define a duration in three ways:
+
+* As a plain number, in milliseconds: `100`
+* In a string, as milliseconds: `'100ms'`
+* In a string, as seconds: `'0.1s'`
+
+### Delay
+
+The delay controls the length of time between the animation trigger and the beginning
+of the transition. You can define one by adding it to the same string
+following the duration. It also has the same format options as the duration:
+
+* Wait for 100ms and then run for 200ms: `'0.2s 100ms'`
+
+### Easing
+
+The [easing function](http://easings.net/) controls how the animation accelerates
+and decelerates during its runtime. For example, an `ease-in` function causes
+the animation to begin relatively slowly but pick up speed as it progresses. You
+can control the easing by adding it as a *third* value in the string after the duration
+and the delay (or as the *second* value when there is no delay):
+
+* Wait for 100ms and then run for 200ms, with easing: `'0.2s 100ms ease-out'`
+* Run for 200ms, with easing: `'0.2s ease-in-out'`
+
+<img src="generated/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" class="right" width="220">
+
+### Example
+
+Here are a couple of custom timings in action. Both enter and leave last for
+200 milliseconds, that is `0.2s`, but they have different easings. The leave begins after a
+slight delay of 10 milliseconds as specified in `'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
+
+<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.
+
+For each keyframe, you specify an *offset* that defines at which point
+in the animation that keyframe applies. The offset is a number between zero,
+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>
+
+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.
+
+Defining offsets for keyframes is optional. If you omit them, offsets with even
+spacing are automatically assigned. For example, three keyframes without predefined
+offsets receive offsets `0`, `0.5`, and `1`.
+
+## Parallel animation groups
+
+<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.
+
+But you may also want to configure different *timings* for animations that happen
+in parallel. For example, you may want to animate two CSS properties but use a
+different easing function for each one.
+
+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>
+
+One group animates the element transform and width; the other group animates the opacity.
+
+## Animation callbacks
+
+A callback is fired when an animation is started and also when it is done.
+
+In the keyframes example, you have a `trigger` called `@flyInOut`. You can hook
+those callbacks like this:
+
+<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 useful properties such as
+`fromState`, `toState` and `totalTime`.
+
+Those callbacks will fire whether or not an animation is picked up.
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
new file mode 100644
index 000000000000..8516201de75c
--- /dev/null
+++ b/aio/content/guide/aot-compiler.md
@@ -0,0 +1,1296 @@
+# The Ahead-of-Time (AOT) Compiler
+
+The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase _before_ the browser downloads and runs that code.
+
+This guide explains how to build with the AOT compiler using different compiler options and how to write Angular metadata that AOT can compile.
+
+<div class="alert is-helpful>
+
+  <a href="https://www.youtube.com/watch?v=kW9cJsvcsGo">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016.
+
+</div>
+
+{@a overview}
+
+## Angular compilation
+
+An Angular application consists largely of components and their HTML templates.
+Before the browser can render the application,
+the components and templates must be converted to executable JavaScript by an _Angular compiler_.
+
+Angular offers two ways to compile your application:
+
+1. **_Just-in-Time_ (JIT)**, which compiles your app in the browser at runtime
+1. **_Ahead-of-Time_ (AOT)**, which compiles your app at build time.
+
+JIT compilation is the default when you run the _build-only_ or the _build-and-serve-locally_ CLI commands:
+
+<code-example language="sh" class="code-shell">
+  ng build
+  ng serve
+</code-example>
+
+{@a compile}
+
+For AOT compilation, append the `--aot` flags to the _build-only_ or the _build-and-serve-locally_ CLI commands:
+
+<code-example language="sh" class="code-shell">
+  ng build --aot
+  ng serve --aot
+</code-example>
+
+<div class="alert is-helpful">
+
+The `--prod` meta-flag compiles with AOT by default.
+
+See the [CLI documentation](https://github.com/angular/angular-cli/wiki) for details, especially the [`build` topic](https://github.com/angular/angular-cli/wiki/build).
+
+</div>
+
+{@a why-aot}
+
+## Why compile with AOT?
+
+*Faster rendering*
+
+With AOT, the browser downloads a pre-compiled version of the application.
+The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
+
+*Fewer asynchronous requests*
+
+The compiler _inlines_ external HTML templates and CSS style sheets within the application JavaScript,
+eliminating separate ajax requests for those source files.
+
+*Smaller Angular framework download size*
+
+There's no need to download the Angular compiler if the app is already compiled.
+The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.
+
+*Detect template errors earlier*
+
+The AOT compiler detects and reports template binding errors during the build step
+before users can see them.
+
+*Better security*
+
+AOT compiles HTML templates and components into JavaScript files long before they are served to the client.
+With no templates to read and no risky client-side HTML or JavaScript evaluation,
+there are fewer opportunities for injection attacks.
+
+{@a compiler-options}
+
+## Angular Compiler Options
+
+You can control your app compilation by providing template compiler options in the `tsconfig.json` file along with the options supplied to the TypeScript compiler. The template compiler options are specified as members of
+`"angularCompilerOptions"` object as shown below:
+
+```json
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    ...
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "preserveWhitespaces": true,
+    ...
+  }
+}
+```
+### *enableResourceInlining*
+This options tell the compiler to replace the `templateUrl` and `styleUrls` property in all `@Component` decorators with inlined contents in `template` and `styles` properties.
+When enabled, the `.js` output of ngc will have no lazy-loaded `templateUrl` or `styleUrls`.
+
+### *skipMetadataEmit*
+
+This option tells the compiler not to produce `.metadata.json` files.
+The option is `false` by default.
+
+`.metadata.json` files contain information needed by the template compiler from a `.ts`
+file that is not included in the `.d.ts` file produced by the TypeScript compiler. This information contains,
+for example, the content of annotations (such as a component's template) which TypeScript
+emits to the `.js` file but not to the `.d.ts` file.
+
+This option should be set to `true` if using TypeScript's `--outFile` option, as the metadata files
+are not valid for this style of TypeScript output. It is not recommeded to use `--outFile` with
+Angular. Use a bundler, such as [webpack](https://webpack.js.org/), instead.
+
+This option can also be set to `true` when using factory summaries as the factory summaries
+include a copy of the information that is in the `.metadata.json` file.
+
+### *strictMetadataEmit*
+
+This option tells the template compiler to report an error to the `.metadata.json`
+file if `"skipMetadataEmit"` is `false` . This option is `false` by default. This should only be used when `"skipMetadataEmit"` is `false` and `"skipTemplateCodegen"` is `true`.
+
+It is intended to validate the `.metadata.json` files emitted for bundling with an `npm` package. The validation is overly strict and can emit errors for metadata that would never produce an error when used by the template compiler. You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol.
+
+It is valid for `.metadata.json` files to contain errors. The template compiler reports these errors
+if the metadata is used to determine the contents of an annotation. The metadata
+collector cannot predict the symbols that are designed to use in an annotation, so it will preemptively
+include error nodes in the metadata for the exported symbols. The template compiler can then use the error
+nodes to report an error if these symbols are used. If the client of a library intends to use a symbol in an annotation, the template compiler will not normally report
+this until the client uses the symbol. This option allows detecting these errors during the build phase of
+the library and is used, for example, in producing Angular libraries themselves.
+
+### *skipTemplateCodegen*
+
+This option tells the compiler to suppress emitting `.ngfactory.js` and `.ngstyle.js` files. When set,
+this turns off most of the template compiler and disables reporting template diagnostics.
+This option can be used to instruct the
+template compiler to produce `.metadata.json` files for distribution with an `npm` package while
+avoiding the production of `.ngfactory.js` and `.ngstyle.js` files that cannot be distributed to
+`npm`.
+
+### *strictInjectionParameters*
+
+When set to `true`, this options tells the compiler to report an error for a parameter supplied
+whose injection type cannot be determined. When this value option is not provided or is `false`, constructor parameters of classes marked with `@Injectable` whose type cannot be resolved will
+produce a warning.
+
+*Note*: It is recommended to change this option explicitly to `true` as this option will default to `true` in the future.
+
+### *flatModuleOutFile*
+
+When set to `true`, this option tells the template compiler to generate a flat module
+index of the given file name and the corresponding flat module metadata. Use this option when creating
+flat modules that are packaged similarly to `@angular/core` and `@angular/common`. When this option
+is used, the `package.json` for the library should refer
+to the generated flat module index instead of the library index file. With 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.js` files, the flat
+module index is used to import symbols that includes both the public API from the library index
+as well as shrowded internal symbols.
+
+By default the `.ts` file supplied in the `files` field is assumed to be library index.
+If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use.
+If more than one `.ts` file is supplied without a `libraryIndex`, 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. 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"`.
+
+### *flatModuleId*
+
+This option specifies the preferred module id to use for importing a flat module.
+References generated by the template compiler will use this module name when importing symbols
+from the flat module.
+This is only meaningful when `flatModuleOutFile` is also supplied. Otherwise the compiler ignores
+this option.
+
+### *generateCodeForLibraries*
+
+This option tells the template compiler to generate factory files (`.ngfactory.js` and `.ngstyle.js`)
+for `.d.ts` files with a corresponding `.metadata.json` file. This option defaults to
+`true`. When this option is `false`, factory files are generated only for `.ts` files.
+
+This option should be set to `false` when using factory summaries.
+
+### *fullTemplateTypeCheck*
+
+This option tells the compiler to enable the [binding expression validation](#binding-expression-validation)
+phase of the template compiler which uses TypeScript to validate binding expressions.
+
+This option is `false` by default.
+
+*Note*: It is recommended to set this to `true` as this option will default to `true` in the future.
+
+### *annotateForClosureCompiler*
+
+This option tells the compiler to use [Tsickle](https://github.com/angular/tsickle) to annotate the emitted
+JavaScript with [JsDoc](http://usejsdoc.org/) comments needed by the
+[Closure Compiler](https://github.com/google/closure-compiler). This option defaults to `false`.
+
+### *annotationsAs*
+
+Use this option to modify how the Angular specific annotations are emitted to improve tree-shaking. Non-Angular
+annotations and decorators are unaffected. Default is `static fields`.
+
+value           | description
+----------------|-------------------------------------------------------------
+`decorators`    | Leave the Decorators in-place. This makes compilation faster. TypeScript will emit calls to the __decorate helper.  Use `--emitDecoratorMetadata` 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](https://github.com/google/closure-compiler) to remove unused classes.
+
+### *trace*
+
+This tells the compiler to print extra information while compiling templates.
+
+### *disableExpressionLowering*
+
+The Angular template compiler transforms code that is used, or could be used, in an annotation
+to allow it to be imported from template factory modules. See
+[metadata rewriting](#metadata-rewriting) for more information.
+
+Setting this option to `false` disables this rewriting, requiring the rewriting to be
+done manually.
+
+### *preserveWhitespaces*
+
+This option tells the compiler whether to remove blank text nodes from compiled templates.
+As of v6, this option is `false` by default, which results in smaller emitted template factory modules.
+
+### *allowEmptyCodegenFiles*
+
+Tells the compiler to generate all the possible generated files even if they are empty. This option is
+`false` by default. This is an option used by `bazel` build rules and is needed to simplify
+how `bazel` rules track file dependencies. It is not recommended to use this option outside of the `bazel`
+rules.
+
+### *enableIvy*
+
+Tells the compiler to generate definitions using the Render3 style code generation. This option defaults to `false`.
+
+Not all features are supported with this option enabled. It is only supported
+for experimentation and testing of Render3 style code generation.
+
+*Note*: Is it not recommended to use this option as it is not yet feature complete with the Render2 code generation.
+
+
+## Angular Metadata and AOT
+
+The Angular **AOT compiler** extracts and interprets **metadata** about the parts of the application that Angular is supposed to manage.
+
+Angular metadata tells Angular how to construct instances of your application classes and interact with them at runtime.
+
+You specify the metadata with **decorators** such as `@Component()` and `@Input()`.
+You also specify metadata implicitly in the constructor declarations of these decorated classes.
+
+In the following example, the `@Component()` metadata object and the class constructor tell Angular how to create and display an instance of `TypicalComponent`.
+
+```typescript
+@Component({
+  selector: 'app-typical',
+  template: '<div>A typical component for {{data.name}}</div>'
+)}
+export class TypicalComponent {
+  @Input() data: TypicalData;
+  constructor(private someService: SomeService) { ... }
+}
+```
+
+The Angular compiler extracts the metadata _once_ and generates a _factory_ for `TypicalComponent`.
+When it needs to create a `TypicalComponent` instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.
+
+## Metadata restrictions
+
+You write metadata in a _subset_ of TypeScript that must conform to the following general constraints:
+
+1. Limit [expression syntax](#expression-syntax) to the supported subset of JavaScript.
+2. Only reference exported symbols after [code folding](#folding).
+3. Only call [functions supported](#supported-functions) by the compiler.
+4. Decorated and data-bound class members must be public.
+
+The next sections elaborate on these points.
+
+## How AOT works
+
+It helps to think of the AOT compiler as having two phases: a code analysis phase in which it simply records a representation of the source; and a code generation phase in which the compiler's `StaticReflector` handles the interpretation as well as places restrictions on what it interprets.
+
+## Phase 1: analysis
+
+The TypeScript compiler does some of the analytic work of the first phase. It emits the `.d.ts` _type definition files_ with type information that the AOT compiler needs to generate application code.
+
+At the same time, the AOT **_collector_** analyzes the metadata recorded in the Angular decorators and outputs metadata information in **`.metadata.json`** files, one per `.d.ts` file.
+
+You can think of `.metadata.json` as a diagram of the overall structure of a decorator's metadata, represented as an [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree).
+
+<div class="alert is-helpful">
+
+Angular's [schema.ts](https://github.com/angular/angular/blob/master/packages/compiler-cli/src/metadata/schema.ts)
+describes the JSON format as a collection of TypeScript interfaces.
+
+</div>
+
+{@a expression-syntax}
+### Expression syntax
+
+The _collector_ only understands a subset of JavaScript.
+Define metadata objects with the following limited syntax:
+
+Syntax                             | Example
+-----------------------------------|-----------------------------------
+Literal object                     | `{cherry: true, apple: true, mincemeat: false}`
+Literal array                      | `['cherries', 'flour', 'sugar']`
+Spread in literal array            | `['apples', 'flour', ...the_rest]`
+Calls                              | `bake(ingredients)`
+New                                | `new Oven()`
+Property access                    | `pie.slice`
+Array index                        | `ingredients[0]`
+Identifier reference               | `Component`
+A template string                  | <code>&#96;pie is ${multiplier} times better than cake&#96;</code>
+Literal string                     | `'pi'`
+Literal number                     | `3.14153265`
+Literal boolean                    | `true`
+Literal null                       | `null`
+Supported prefix operator          | `!cake`
+Supported Binary operator          | `a + b`
+Conditional operator               | `a ? b : c`
+Parentheses                        | `(a + b)`
+
+If an expression uses unsupported syntax, the _collector_ writes an error node to the `.metadata.json` file. The compiler later reports the error if it needs that
+piece of metadata to generate the application code.
+
+<div class="alert is-helpful">
+
+ If you want `ngc` to report syntax errors immediately rather than produce a `.metadata.json` file with errors, set the `strictMetadataEmit` option in `tsconfig`.
+
+```
+  "angularCompilerOptions": {
+   ...
+   "strictMetadataEmit" : true
+ }
+ ```
+
+Angular libraries have this option to ensure that all Angular `.metadata.json` files are clean and it is a best practice to do the same when building your own libraries.
+
+</div>
+
+{@a function-expression}
+{@a arrow-functions}
+### No arrow functions
+
+The AOT compiler does not support [function expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function)
+and [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), also called _lambda_ functions.
+
+Consider the following component decorator:
+
+```typescript
+@Component({
+  ...
+  providers: [{provide: server, useFactory: () => new Server()}]
+})
+```
+
+The AOT _collector_ does not support the arrow function, `() => new Server()`, in a metadata expression.
+It generates an error node in place of the function.
+
+When the compiler later interprets this node, it reports an error that invites you to turn the arrow function into an _exported function_.
+
+You can fix the error by converting to this:
+
+```typescript
+export function serverFactory() {
+  return new Server();
+}
+
+@Component({
+  ...
+  providers: [{provide: server, useFactory: serverFactory}]
+})
+```
+
+Beginning in version 5, the compiler automatically performs this rewriting while emitting the `.js` file.
+
+{@a function-calls}
+### Limited function calls
+
+The _collector_ can represent a function call or object creation with `new` as long as the syntax is valid. The _collector_ only cares about proper syntax.
+
+But beware. The compiler may later refuse to generate a call to a _particular_ function or creation of a _particular_ object.
+The compiler only supports calls to a small set of functions and will use `new` for only a few designated classes. These functions and classes are in a table of [below](#supported-functions).
+
+
+### Folding
+{@a exported-symbols}
+The compiler can only resolve references to **_exported_** symbols.
+Fortunately, the _collector_ enables limited use of non-exported symbols through _folding_.
+
+The _collector_ may be able to evaluate an expression during collection and record the result in the `.metadata.json` instead of the original expression.
+
+For example, the _collector_ can evaluate the expression `1 + 2 + 3 + 4` and replace it with the result, `10`.
+
+This process is called _folding_. An expression that can be reduced in this manner is _foldable_.
+
+{@a var-declaration}
+The collector can evaluate references to
+module-local `const` declarations and initialized `var` and `let` declarations, effectively removing them from the `.metadata.json` file.
+
+Consider the following component definition:
+
+```typescript
+const template = '<div>{{hero.name}}</div>';
+
+@Component({
+  selector: 'app-hero',
+  template: template
+})
+export class HeroComponent {
+  @Input() hero: Hero;
+}
+```
+
+The compiler could not refer to the `template` constant because it isn't exported.
+
+But the _collector_ can _fold_ the `template` constant into the metadata definition by inlining its contents.
+The effect is the same as if you had written:
+
+```typescript
+@Component({
+  selector: 'app-hero',
+  template: '<div>{{hero.name}}</div>'
+})
+export class HeroComponent {
+  @Input() hero: Hero;
+}
+```
+
+There is no longer a reference to `template` and, therefore, nothing to trouble the compiler when it later interprets the _collector's_ output in `.metadata.json`.
+
+You can take this example a step further by including the `template` constant in another expression:
+
+```typescript
+const template = '<div>{{hero.name}}</div>';
+
+@Component({
+  selector: 'app-hero',
+  template: template + '<div>{{hero.title}}</div>'
+})
+export class HeroComponent {
+  @Input() hero: Hero;
+}
+```
+
+The _collector_ reduces this expression to its equivalent _folded_ string:
+
+`'<div>{{hero.name}}</div><div>{{hero.title}}</div>'`.
+
+#### Foldable syntax
+
+The following table describes which expressions the _collector_ can and cannot fold:
+
+Syntax                             | Foldable
+-----------------------------------|-----------------------------------
+Literal object                     | yes
+Literal array                      | yes
+Spread in literal array            | no
+Calls                              | no
+New                                | no
+Property access                    | yes, if target is foldable
+Array index                        | yes, if target and index are foldable
+Identifier reference               | yes, if it is a reference to a local
+A template with no substitutions   | yes
+A template with substitutions      | yes, if the substitutions are foldable
+Literal string                     | yes
+Literal number                     | yes
+Literal boolean                    | yes
+Literal null                       | yes
+Supported prefix operator          | yes, if operand is foldable
+Supported binary operator          | yes, if both left and right are foldable
+Conditional operator               | yes, if condition is foldable
+Parentheses                        | yes, if the expression is foldable
+
+If an expression is not foldable, the collector writes it to `.metadata.json` as an [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree) for the compiler to resolve.
+
+
+## Phase 2: code generation
+
+The _collector_ makes no attempt to understand the metadata that it collects and outputs to `.metadata.json`. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.
+
+It's the compiler's job to interpret the `.metadata.json` in the code generation phase.
+
+The compiler understands all syntax forms that the _collector_ supports, but it may reject _syntactically_ correct metadata if the _semantics_ violate compiler rules.
+
+The compiler can only reference _exported symbols_.
+
+Decorated component class members must be public. You cannot make an `@Input()` property private or internal.
+
+Data bound properties must also be public.
+
+```typescript
+// BAD CODE - title is private
+@Component({
+  selector: 'app-root',
+  template: '<h1>{{title}}</h1>'
+})
+export class AppComponent {
+  private title = 'My App'; // Bad
+}
+```
+
+{@a supported-functions}
+Most importantly, the compiler only generates code to create instances of certain classes, support certain decorators, and call certain functions from the following lists.
+
+
+### New instances
+
+The compiler only allows metadata that create instances of the class `InjectionToken` from `@angular/core`.
+
+### Annotations/Decorators
+
+The compiler only supports metadata for these Angular decorators.
+
+Decorator         | Module
+------------------|--------------
+`Attribute`       | `@angular/core`
+`Component`       | `@angular/core`
+`ContentChild`    | `@angular/core`
+`ContentChildren` | `@angular/core`
+`Directive`       | `@angular/core`
+`Host`            | `@angular/core`
+`HostBinding`     | `@angular/core`
+`HostListener`    | `@angular/core`
+`Inject`          | `@angular/core`
+`Injectable`      | `@angular/core`
+`Input`           | `@angular/core`
+`NgModule`        | `@angular/core`
+`Optional`        | `@angular/core`
+`Output`          | `@angular/core`
+`Pipe`            | `@angular/core`
+`Self`            | `@angular/core`
+`SkipSelf`        | `@angular/core`
+`ViewChild`       | `@angular/core`
+
+
+### Macro-functions and macro-static methods
+
+The compiler also supports _macros_ in the form of functions or static
+methods that return an expression.
+
+For example, consider the following function:
+
+```typescript
+export function wrapInArray<T>(value: T): T[] {
+  return [value];
+}
+```
+
+You can call the `wrapInArray` in a metadata definition because it returns the value of an expression that conforms to the compiler's restrictive JavaScript subset.
+
+You might use  `wrapInArray()` like this:
+
+```typescript
+@NgModule({
+  declarations: wrapInArray(TypicalComponent)
+})
+export class TypicalModule {}
+```
+
+The compiler treats this usage as if you had written:
+
+```typescript
+@NgModule({
+  declarations: [TypicalComponent]
+})
+export class TypicalModule {}
+```
+
+The collector is simplistic in its determination of what qualifies as a macro
+function; it can only contain a single `return` statement.
+
+The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
+Review the [source code](https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")
+for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodules).
+
+{@a metadata-rewriting}
+
+### Metadata rewriting
+
+The compiler treats object literals containing the fields `useClass`, `useValue`, `useFactory`, and `data` specially. The compiler converts the expression initializing one of these fields into an exported variable, which replaces the expression. This process of rewriting these expressions removes all the restrictions on what can be in them because
+the compiler doesn't need to know the expression's value&mdash;it just needs to be able to generate a reference to the value.
+
+
+
+You might write something like:
+
+```typescript
+class TypicalServer {
+
+}
+
+@NgModule({
+  providers: [{provide: SERVER, useFactory: () => TypicalServer}]
+})
+export class TypicalModule {}
+```
+
+Without rewriting, this would be invalid because lambdas are not supported and `TypicalServer` is not exported.
+
+To allow this, the compiler automatically rewrites this to something like:
+
+```typescript
+class TypicalServer {
+
+}
+
+export const ɵ0 = () => new TypicalServer();
+
+@NgModule({
+  providers: [{provide: SERVER, useFactory: ɵ0}]
+})
+export class TypicalModule {}
+```
+
+This allows the compiler to generate a reference to `ɵ0` in the
+factory without having to know what the value of `ɵ0` contains.
+
+The compiler does the rewriting during the emit of the `.js` file. This doesn't rewrite the `.d.ts` file, however, so TypeScript doesn't recognize it as being an export. Thus, it does not pollute the ES module's exported API.
+
+
+## Metadata Errors
+
+The following are metadata errors you may encounter, with explanations and suggested corrections.
+
+[Expression form not supported](#expression-form-not-supported)<br>
+[Reference to a local (non-exported) symbol](#reference-to-a-local-symbol)<br>
+[Only initialized variables and constants](#only-initialized-variables)<br>
+[Reference to a non-exported class](#reference-to-a-non-exported-class)<br>
+[Reference to a non-exported function](#reference-to-a-non-exported-function)<br>
+[Function calls are not supported](#function-calls-not-supported)<br>
+[Destructured variable or constant not supported](#destructured-variable-not-supported)<br>
+[Could not resolve type](#could-not-resolve-type)<br>
+[Name expected](#name-expected)<br>
+[Unsupported enum member name](#unsupported-enum-member-name)<br>
+[Tagged template expressions are not supported](#tagged-template-expressions-not-supported)<br>
+[Symbol reference expected](#symbol-reference-expected)<br>
+
+<hr>
+
+<h3 class="no-toc">Expression form not supported</h3>
+
+The compiler encountered an expression it didn't understand while evaluating Angular metadata.
+
+Language features outside of the compiler's [restricted expression syntax](#expression-syntax)
+can produce this error, as seen in the following example:
+
+```
+// ERROR
+export class Fooish { ... }
+...
+const prop = typeof Fooish; // typeof is not valid in metadata
+  ...
+  // bracket notation is not valid in metadata
+  { provide: 'token', useValue: { [prop]: 'value' } };
+  ...
+```
+
+You can use `typeof` and bracket notation in normal application code.
+You just can't use those features within expressions that define Angular metadata.
+
+Avoid this error by sticking to the compiler's [restricted expression syntax](#expression-syntax)
+when writing Angular metadata
+and be wary of new or unusual TypeScript features.
+
+<hr>
+
+{@a reference-to-a-local-symbol}
+<h3 class="no-toc">Reference to a local (non-exported) symbol</h3>
+
+<div class="alert is-helpful">
+
+_Reference to a local (non-exported) symbol 'symbol name'. Consider exporting the symbol._
+
+</div>
+
+The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized.
+
+Here's a `provider` example of the problem.
+
+```
+// ERROR
+let foo: number; // neither exported nor initialized
+
+@Component({
+  selector: 'my-component',
+  template: ... ,
+  providers: [
+    { provide: Foo, useValue: foo }
+  ]
+})
+export class MyComponent {}
+```
+The compiler generates the component factory, which includes the `useValue` provider code, in a separate module. _That_ factory module can't reach back to _this_ source module to access the local (non-exported) `foo` variable.
+
+You could fix the problem by initializing `foo`.
+
+```
+let foo = 42; // initialized
+```
+
+The compiler will [fold](#folding) the expression into the provider as if you had written this.
+
+```
+  providers: [
+    { provide: Foo, useValue: 42 }
+  ]
+```
+
+Alternatively, you can fix it by exporting `foo` with the expectation that `foo` will be assigned at runtime when you actually know its value.
+
+```
+// CORRECTED
+export let foo: number; // exported
+
+@Component({
+  selector: 'my-component',
+  template: ... ,
+  providers: [
+    { provide: Foo, useValue: foo }
+  ]
+})
+export class MyComponent {}
+```
+
+Adding `export` often works for variables referenced in metadata such as `providers` and `animations` because the compiler can generate _references_ to the exported variables in these expressions. It doesn't need the _values_ of those variables.
+
+Adding `export` doesn't work when the compiler needs the _actual value_
+in order to generate code.
+For example, it doesn't work for the `template` property.
+
+```
+// ERROR
+export let someTemplate: string; // exported but not initialized
+
+@Component({
+  selector: 'my-component',
+  template: someTemplate
+})
+export class MyComponent {}
+```
+
+The compiler needs the value of the `template` property _right now_ to generate the component factory.
+The variable reference alone is insufficient.
+Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)".
+
+<hr>
+
+{@a only-initialized-variables}
+<h3 class="no-toc">Only initialized variables and constants</h3>
+
+<div class="alert is-helpful">
+
+_Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler._
+
+</div>
+
+The compiler found a reference to an exported variable or static field that wasn't initialized.
+It needs the value of that variable to generate code.
+
+The following example tries to set the component's `template` property to the value of
+the exported `someTemplate` variable which is declared but _unassigned_.
+
+```
+// ERROR
+export let someTemplate: string;
+
+@Component({
+  selector: 'my-component',
+  template: someTemplate
+})
+export class MyComponent {}
+```
+
+You'd also get this error if you imported `someTemplate` from some other module and neglected to initialize it there.
+
+```
+// ERROR - not initialized there either
+import { someTemplate } from './config';
+
+@Component({
+  selector: 'my-component',
+  template: someTemplate
+})
+export class MyComponent {}
+```
+
+The compiler cannot wait until runtime to get the template information.
+It must statically derive the value of the `someTemplate` variable from the source code
+so that it can generate the component factory, which includes
+instructions for building the element based on the template.
+
+To correct this error, provide the initial value of the variable in an initializer clause _on the same line_.
+
+```
+// CORRECTED
+export let someTemplate = '<h1>Greetings from Angular</h1>';
+
+@Component({
+  selector: 'my-component',
+  template: someTemplate
+})
+export class MyComponent {}
+```
+
+<hr>
+
+<h3 class="no-toc">Reference to a non-exported class</h3>
+
+<div class="alert is-helpful">
+
+_Reference to a non-exported class <class name>. Consider exporting the class._
+
+</div>
+
+Metadata referenced a class that wasn't exported.
+
+For example, you may have defined a class and used it as an injection token in a providers array
+but neglected to export that class.
+
+```
+// ERROR
+abstract class MyStrategy { }
+
+  ...
+  providers: [
+    { provide: MyStrategy, useValue: ... }
+  ]
+  ...
+```
+
+Angular generates a class factory in a separate module and that
+factory [can only access exported classes](#exported-symbols).
+To correct this error, export the referenced class.
+
+```
+// CORRECTED
+export abstract class MyStrategy { }
+
+  ...
+  providers: [
+    { provide: MyStrategy, useValue: ... }
+  ]
+  ...
+```
+<hr>
+
+<h3 class="no-toc">Reference to a non-exported function</h3>
+
+Metadata referenced a function that wasn't exported.
+
+For example, you may have set a providers `useFactory` property to a locally defined function that you neglected to export.
+
+```
+// ERROR
+function myStrategy() { ... }
+
+  ...
+  providers: [
+    { provide: MyStrategy, useFactory: myStrategy }
+  ]
+  ...
+```
+
+Angular generates a class factory in a separate module and that
+factory [can only access exported functions](#exported-symbols).
+To correct this error, export the function.
+
+```
+// CORRECTED
+export function myStrategy() { ... }
+
+  ...
+  providers: [
+    { provide: MyStrategy, useFactory: myStrategy }
+  ]
+  ...
+```
+<hr>
+
+{@a function-calls-not-supported}
+<h3 class="no-toc">Function calls are not supported</h3>
+
+<div class="alert is-helpful">
+
+_Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function._
+
+</div>
+
+The compiler does not currently support [function expressions or lambda functions](#function-expression).
+For example, you cannot set a provider's `useFactory` to an anonymous function or arrow function like this.
+
+```
+// ERROR
+  ...
+  providers: [
+    { provide: MyStrategy, useFactory: function() { ... } },
+    { provide: OtherStrategy, useFactory: () => { ... } }
+  ]
+  ...
+```
+You also get this error if you call a function or method in a provider's `useValue`.
+```
+// ERROR
+import { calculateValue } from './utilities';
+
+  ...
+  providers: [
+    { provide: SomeValue, useValue: calculateValue() }
+  ]
+  ...
+```
+
+To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
+
+<code-example linenums="false">
+// CORRECTED
+import { calculateValue } from './utilities';
+
+export function myStrategy() { ... }
+export function otherStrategy() { ... }
+export function someValueFactory() {
+  return calculateValue();
+}
+  ...
+  providers: [
+    { provide: MyStrategy, useFactory: myStrategy },
+    { provide: OtherStrategy, useFactory: otherStrategy },
+    { provide: SomeValue, useFactory: someValueFactory }
+  ]
+  ...
+</code-example>
+
+<hr>
+
+{@a destructured-variable-not-supported}
+<h3 class="no-toc">Destructured variable or constant not supported</h3>
+
+<div class="alert is-helpful">
+
+_Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring._
+
+</div>
+
+The compiler does not support references to variables assigned by [destructuring](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring).
+
+For example, you cannot write something like this:
+
+<code-example linenums="false">
+// ERROR
+import { configuration } from './configuration';
+
+// destructured assignment to foo and bar
+const {foo, bar} = configuration;
+  ...
+  providers: [
+    {provide: Foo, useValue: foo},
+    {provide: Bar, useValue: bar},
+  ]
+  ...
+</code-example>
+
+To correct this error, refer to non-destructured values.
+
+<code-example linenums="false">
+// CORRECTED
+import { configuration } from './configuration';
+  ...
+  providers: [
+    {provide: Foo, useValue: configuration.foo},
+    {provide: Bar, useValue: configuration.bar},
+  ]
+  ...
+</code-example>
+
+<hr>
+
+<h3 class="no-toc">Could not resolve type</h3>
+
+The compiler encountered a type and can't determine which module exports that type.
+
+This can happen if you refer to an ambient type.
+For example, the `Window` type is an ambient type declared in the global `.d.ts` file.
+
+You'll get an error if you reference it in the component constructor,
+which the compiler must statically analyze.
+
+```
+// ERROR
+@Component({ })
+export class MyComponent {
+  constructor (private win: Window) { ... }
+}
+```
+TypeScript understands ambient types so you don't import them.
+The Angular compiler does not understand a type that you neglect to export or import.
+
+In this case, the compiler doesn't understand how to inject something with the `Window` token.
+
+Do not refer to ambient types in metadata expressions.
+
+If you must inject an instance of an ambient type,
+you can finesse the problem in four steps:
+
+1. Create an injection token for an instance of the ambient type.
+1. Create a factory function that returns that instance.
+1. Add a `useFactory` provider with that factory function.
+1. Use `@Inject` to inject the instance.
+
+Here's an illustrative example.
+
+<code-example linenums="false">
+// CORRECTED
+import { Inject } from '@angular/core';
+
+export const WINDOW = new InjectionToken('Window');
+export function _window() { return window; }
+
+@Component({
+  ...
+  providers: [
+    { provide: WINDOW, useFactory: _window }
+  ]
+})
+export class MyComponent {
+  constructor (@Inject(WINDOW) private win: Window) { ... }
+}
+</code-example>
+
+The `Window` type in the constructor is no longer a problem for the compiler because it
+uses the `@Inject(WINDOW)` to generate the injection code.
+
+Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object (or an abstraction of it, depending upon the platform in which the application runs).
+
+<code-example linenums="false">
+import { Inject }   from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+
+@Component({ ... })
+export class MyComponent {
+  constructor (@Inject(DOCUMENT) private doc: Document) { ... }
+}
+</code-example>
+<hr>
+
+<h3 class="no-toc">Name expected</h3>
+
+The compiler expected a name in an expression it was evaluating.
+This can happen if you use a number as a property name as in the following example.
+
+```
+// ERROR
+provider: [{ provide: Foo, useValue: { 0: 'test' } }]
+```
+
+Change the name of the property to something non-numeric.
+
+```
+// CORRECTED
+provider: [{ provide: Foo, useValue: { '0': 'test' } }]
+```
+
+<hr>
+
+<h3 class="no-toc">Unsupported enum member name</h3>
+
+Angular couldn't determine the value of the [enum member](https://www.typescriptlang.org/docs/handbook/enums.html)
+that you referenced in metadata.
+
+The compiler can understand simple enum values but not complex values such as those derived from computed properties.
+
+<code-example linenums="false">
+// ERROR
+enum Colors {
+  Red = 1,
+  White,
+  Blue = "Blue".length // computed
+}
+
+  ...
+  providers: [
+    { provide: BaseColor,   useValue: Colors.White } // ok
+    { provide: DangerColor, useValue: Colors.Red }   // ok
+    { provide: StrongColor, useValue: Colors.Blue }  // bad
+  ]
+  ...
+</code-example>
+
+Avoid referring to enums with complicated initializers or computed properties.
+
+<hr>
+
+{@a tagged-template-expressions-not-supported}
+<h3 class="no-toc">Tagged template expressions are not supported</h3>
+
+<div class="alert is-helpful">
+
+_Tagged template expressions are not supported in metadata._
+
+</div>
+
+The compiler encountered a JavaScript ES2015 [tagged template expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) such as,
+```
+// ERROR
+const expression = 'funky';
+const raw = String.raw`A tagged template ${expression} string`;
+ ...
+ template: '<div>' + raw + '</div>'
+ ...
+```
+[`String.raw()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw)
+is a _tag function_ native to JavaScript ES2015.
+
+The AOT compiler does not support tagged template expressions; avoid them in metadata expressions.
+
+<hr>
+
+<h3 class="no-toc">Symbol reference expected</h3>
+
+The compiler expected a reference to a symbol at the location specified in the error message.
+
+This error can occur if you use an expression in the `extends` clause of a class.
+
+<!--
+
+Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495).
+
+-->
+{@a binding-expression-validation}
+
+  ## Phase 3: binding expression validation
+
+  In the validation phase, the Angular template compiler uses the TypeScript compiler to validate the
+  binding expressions in templates. Enable this phase explicitly by adding the compiler
+  option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json` (see
+  [Angular Compiler Options](#compiler-options)).
+
+  Template validation produces error messages when a type error is detected in a template binding
+  expression, similar to how type errors are reported by the TypeScript compiler against code in a `.ts`
+  file.
+
+  For example, consider the following component:
+
+  ```typescript
+  @Component({
+    selector: 'my-component',
+    template: '{{person.addresss.street}}'
+  })
+  class MyComponent {
+    person?: Person;
+  }
+  ```
+
+  This will produce the following error:
+
+  ```
+  my.component.ts.MyComponent.html(1,1): : Property 'addresss' does not exist on type 'Person'. Did you mean 'address'?
+  ```
+
+  The file name reported in the error message, `my.component.ts.MyComponent.html`, is a synthetic file
+  generated by the template compiler that holds contents of the `MyComponent` class template.
+  Compiler never writes this file to disk. The line and column numbers are relative to the template string
+  in the `@Component` annotation of the class, `MyComponent` in this case. If a component uses
+  `templateUrl` instead of `template`, the errors are reported in the HTML file referenced by the
+  `templateUrl` instead of a synthetic file.
+
+  The error location is the beginning of the text node that contains the interpolation expression with
+  the error. If the error is in an attribute binding such as `[value]="person.address.street"`, the error
+  location is the location of the attribute that contains the error.
+
+  The validation uses the TypeScript type checker and the options supplied to the TypeScript compiler to control
+  how detailed the type validation is. For example, if the `strictTypeChecks` is specified, the error  ```my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'``` is reported as well as the above error message.
+
+  ### Type narrowing
+
+  The expression used in an `ngIf` directive is used to narrow type unions in the Angular
+  template compiler, the same way the `if` expression does in TypeScript. For example, to avoid
+  `Object is possibly 'undefined'` error in the template above, modify it to only emit the
+  interpolation if the value of `person` is initialized as shown below:
+
+  ```typescript
+  @Component({
+    selector: 'my-component',
+    template: '<span *ngIf="person"> {{person.addresss.street}} </span>'
+  })
+  class MyComponent {
+    person?: Person;
+  }
+  ```
+
+  Using `*ngIf` allows the TypeScript compiler to infer that the `person` used in the
+  binding expression will never be `undefined`.
+
+  #### Custom `ngIf` like directives
+
+  Directives that behave like `*ngIf` can declare that they want the same treatment by including
+  a static member marker that is a signal to the template compiler to treat them
+  like `*ngIf`. This static member for `*ngIf` is:
+
+  ```typescript
+    public static ngIfUseIfTypeGuard: void;
+  ```
+
+  This declares that the input property `ngIf` of the `NgIf` directive should be treated as a
+  guard to the use of its template, implying that the template will only be instantiated if
+  the `ngIf` input property is true.
+
+
+  ### Non-null type assertion operator
+
+  Use the [non-null type assertion operator](guide/template-syntax#non-null-assertion-operator)
+  to suppress the `Object is possibly 'undefined'` error when it is incovienent to use
+  `*ngIf` or when some constraint in the component ensures that the expression is always
+  non-null when the binding expression is interpolated.
+
+  In the following example, the `person` and `address` properties are always set together,
+  implying that `address` is always non-null if `person` is non-null. There is no convenient
+  way to describe this constraint to TypeScript and the template compiler, but the error
+  is suppressed in the example by using `address!.street`.
+
+  ```typescript
+  @Component({
+    selector: 'my-component',
+    template: '<span *ngIf="person"> {{person.name}} lives on {{address!.street}} </span>'
+  })
+  class MyComponent {
+    person?: Person;
+    address?: Address;
+
+    setData(person: Person, address: Address) {
+      this.person = person;
+      this.address = address;
+    }
+  }
+  ```
+
+  The non-null assertion operator should be used sparingly as refactoring of the component
+  might break this constraint.
+
+  In this example it is recommended to include the checking of `address`
+  in the `*ngIf`as shown below:
+
+  ```typescript
+  @Component({
+    selector: 'my-component',
+    template: '<span *ngIf="person && address"> {{person.name}} lives on {{address.street}} </span>'
+  })
+  class MyComponent {
+    person?: Person;
+    address?: Address;
+
+    setData(person: Person, address: Address) {
+      this.person = person;
+      this.address = address;
+    }
+  }
+  ```
+
+  ### Disabling type checking using `$any()`
+
+  Disable checking of a binding expression by surrounding the expression
+  in a call to the [`$any()` cast pseudo-function](guide/template-syntax).
+  The compiler treats it as a cast to the `any` type just like in TypeScript when a `<any>`
+  or `as any` cast is used.
+
+  In the following example, the error `Property addresss does not exist` is suppressed
+  by casting `person` to the `any` type.
+
+  ```typescript
+  @Component({
+    selector: 'my-component',
+    template: '{{$any(person).addresss.street}}'
+  })
+  class MyComponent {
+    person?: Person;
+  }
+  ```
+## Summary
+
+* What the AOT compiler does and why it is important.
+* Why metadata must be written in a subset of JavaScript.
+* What that subset is.
+* Other restrictions on metadata definition.
+* Macro-functions and macro-static methods.
+* Compiler errors related to metadata.
+* Validation of binding expressions
diff --git a/aio/content/guide/architecture-components.md b/aio/content/guide/architecture-components.md
new file mode 100644
index 000000000000..e361c62cd636
--- /dev/null
+++ b/aio/content/guide/architecture-components.md
@@ -0,0 +1,190 @@
+# Introduction to components
+
+A *component* controls a patch of screen called a *view*.
+For example, individual components define and control each of the following views from the [Tutorial](tutorial):
+
+* The app root with the navigation links.
+* The list of heroes.
+* The hero editor.
+
+You define a component's application logic&mdash;what it does to support the view&mdash;inside a class.
+The class interacts with the view through an API of properties and methods.
+
+For example, `HeroListComponent` has a `heroes` property that holds an array of heroes. 
+Its `selectHero()` method sets a `selectedHero` property when the user clicks to choose a hero from that list. 
+The component acquires the heroes from a service, which is a TypeScript [parameter property](http://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties) on the constructor. 
+The service is provided to the component through the dependency injection system.
+
+<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()`.
+
+## Component metadata
+
+<img src="generated/images/guide/architecture/metadata.png" alt="Metadata" class="left">
+
+The `@Component` decorator identifies the class immediately below it as a component class, and specifies its metadata. In the example code below, you can see that `HeroListComponent` is just a class, with no special Angular notation or syntax at all. It's not a component until you mark it as one with the `@Component` decorator.
+
+The metadata for a component tells Angular where to get the major building blocks that it needs to create and present the component and its view. In particular, it associates a *template* with the component, either directly with inline code, or by reference. Together, the component and its template describe a *view*.
+
+In addition to containing or pointing to the template, the `@Component` metadata configures, for example, how the component can be referenced in HTML and what services it requires.
+
+Here's an example of basic metadata for `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>
+
+This example shows some of the most useful `@Component` configuration options:
+
+* `selector`: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's  HTML contains `<app-hero-list></app-hero-list>`, then
+Angular inserts an instance of the `HeroListComponent` view between those tags.
+
+* `templateUrl`: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's *host view*.
+
+* `providers`: An array of [providers](guide/glossary#provider) for services that the component requires. In the example, this tells Angular how to provide the `HeroService` instance that the component's constructor uses to get the list of heroes to display.  
+
+
+## Templates and views
+
+<img src="generated/images/guide/architecture/template.png" alt="Template" 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.
+
+Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's *host view*. The component can also define a *view hierarchy*, which contains *embedded views*, hosted by other components.
+
+<figure>
+<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
+</figure>
+
+A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules.
+
+## Template syntax
+
+A template looks like regular HTML, except that it also contains Angular [template syntax](guide/template-syntax), which alters the HTML based on your app's logic and the state of app and DOM data. Your template can use *data binding* to coordinate the app and DOM data, *pipes* to transform data before it is displayed, and *directives* to apply app logic to what gets displayed.
+
+For example, here is a template for the Tutorial's `HeroListComponent`.
+
+<code-example path="architecture/src/app/hero-list.component.html" title="src/app/hero-list.component.html"></code-example>
+
+This template uses typical HTML elements like `<h2>` and  `<p>`, and also includes Angular template-syntax elements,  `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<app-hero-detail>`. The template-syntax elements tell Angular how to render the HTML to the screen, using program logic and data.
+
+* The `*ngFor` directive tells Angular to iterate over a list.
+* `{{hero.name}}`, `(click)`, and `[hero]` bind program data to and from the DOM, responding to user input. See more about [data binding](#data-binding) below.
+* The `<app-hero-detail>` tag in the example is an element that represents a new component, `HeroDetailComponent`.  
+`HeroDetailComponent` (code not shown) defines the hero-detail child view of `HeroListComponent`.
+Notice how custom components like this mix seamlessly with native HTML in the same layouts.
+
+### Data binding
+
+Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push and pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced jQuery programmer can attest.
+
+Angular supports *two-way data binding*, a mechanism for coordinating the parts of a template with the parts of a component. Add binding markup to the template HTML to tell Angular how to connect both sides.
+
+The following diagram shows the four forms of data binding markup. Each form has a direction: to the DOM, from the DOM, or both.
+
+<figure>
+<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
+</figure>
+
+This example from the `HeroListComponent` template uses three of these forms.
+
+<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.
+
+* The `[hero]` [*property binding*](guide/template-syntax#property-binding) passes the value of
+`selectedHero` from the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`.
+
+* The `(click)` [*event binding*](guide/user-input#binding-to-user-input-events) calls the component's `selectHero` method when the user clicks a hero's name.
+
+Two-way data binding (used mainly in [template-driven forms](guide/forms)) 
+combines property and event binding in a single notation. 
+Here's an example from the `HeroDetailComponent` template that uses two-way data binding with the `ngModel` directive.
+
+<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.
+
+Angular processes *all* data bindings once for each JavaScript event cycle,
+from the root of the application component tree through all child components.
+
+<figure>
+  <img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
+</figure>
+
+Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
+
+<figure>
+  <img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
+</figure>
+
+### Pipes
+
+Angular pipes let you declare display-value transformations in your template HTML. A class with the `@Pipe` decorator defines a function that transforms input values to output values for display in a view.
+
+Angular defines various pipes, such as the [date](https://angular.io/api/common/DatePipe) pipe and [currency](https://angular.io/api/common/CurrencyPipe) pipe; for a complete list, see the [Pipes API list](https://angular.io/api?type=pipe). You can also define new pipes.
+
+To specify a value transformation in an HTML template, use the [pipe operator (|)](https://angular.io/guide/template-syntax#pipe).
+
+`{{interpolated_value | pipe_name}}`
+
+You can chain pipes, sending the output of one pipe function to be transformed by another pipe function. A pipe can also take arguments that control how it performs its transformation. For example, you can pass the desired format to the `date` pipe.
+
+```
+  <!-- Default format: output 'Jun 15, 2015'-->
+  <p>Today is {{today | date}}</p>
+
+ <!-- fullDate format: output 'Monday, June 15, 2015'-->
+ <p>The date is {{today | date:'fullDate'}}</p>
+
+  <!-- shortTime format: output '9:43 AM'-->
+  <p>The time is {{today | date:'shortTime'}}</p>
+```
+
+### Directives
+
+<img src="generated/images/guide/architecture/directive.png" alt="Directives" class="left">
+
+Angular templates are *dynamic*. When Angular renders them, it transforms the DOM according to the instructions given by *directives*. A directive is a class with a `@Directive()` decorator.
+
+A component is technically a directive.
+However, components are so distinctive and central to Angular applications that Angular
+defines the `@Component()` decorator, which extends the `@Directive()` decorator with 
+template-oriented features.
+
+In addition to components, there are two other kinds of directives:  *structural* and *attribute*. 
+Angular defines a number of directives of both kinds, and you can define your own using the  `@Directive()` decorator.
+
+Just as for components, the metadata for a directive associates the decorated class with a `selector` element that you use to insert it into HTML. In templates, directives typically appear within an element tag as attributes, either by name or as the target of an assignment or a binding.
+
+#### Structural directives
+
+*Structural directives* alter layout by adding, removing, and replacing elements in the DOM. 
+The example template uses two built-in structural directives to add application logic to how the view is rendered.
+
+<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) is an iterative; it tells Angular to stamp out one `<li>` per hero in the `heroes` list.
+* [`*ngIf`](guide/displaying-data#ngIf) is a conditional; it includes the `HeroDetail` component only if a selected hero exists.
+
+#### Attribute directives
+
+*Attribute directives* alter the appearance or behavior of an existing element.
+In templates they look like regular HTML attributes, hence the name.
+
+The `ngModel` directive, which implements two-way data binding, is an example of an attribute directive. `ngModel` modifies the behavior of an existing element (typically `<input>`) by setting its display value property and responding to change events.
+
+<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 more pre-defined directives that either alter the layout structure
+(for example, [ngSwitch](guide/template-syntax#ngSwitch))
+or modify aspects of DOM elements and components
+(for example, [ngStyle](guide/template-syntax#ngStyle) and [ngClass](guide/template-syntax#ngClass)).
+
+<div class="alert is-helpful">
+
+Learn more in the [Attribute Directives](guide/attribute-directives) and [Structural Directives](guide/structural-directives) guides.
+
+</div>
diff --git a/aio/content/guide/architecture-modules.md b/aio/content/guide/architecture-modules.md
new file mode 100644
index 000000000000..2566b687e450
--- /dev/null
+++ b/aio/content/guide/architecture-modules.md
@@ -0,0 +1,106 @@
+# Introduction to modules
+
+Angular apps are modular and Angular has its own modularity system called *NgModules*. 
+NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.
+
+Every Angular app has at least one NgModule class, [the *root module*](guide/bootstrapping), which is conventionally named `AppModule` and resides in a file named `app.module.ts`. You launch your app by *bootstrapping* the root NgModule.
+
+While a small application might have only one NgModule, most apps have many more *feature modules*. The *root* NgModule for an app is so named because it can include child NgModules in a hierarchy of any depth.
+
+## NgModule metadata
+
+An NgModule is defined by a class decorated with `@NgModule()`. The `@NgModule()` decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are as follows.
+
+* `declarations`: The [components](guide/architecture-components), *directives*, and *pipes* that belong to this NgModule.
+
+* `exports`: The subset of declarations that should be visible and usable in the *component templates* of other NgModules.
+
+* `imports`: Other modules whose exported classes are needed by component templates declared in *this* NgModule.
+
+* `providers`: Creators of [services](guide/architecture-services) that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.)
+
+* `bootstrap`: The main application view, called the *root component*, which hosts all other app views. Only the *root NgModule* should set the `bootstrap` property.
+
+Here's a simple root NgModule definition.
+
+<code-example path="architecture/src/app/mini-app.ts" region="module" title="src/app/app.module.ts" linenums="false"></code-example>
+
+<div class="alert is-helpful">
+
+   The `export` property of `AppComponent` is included here for illustration; it isn't actually necessary in this example. A root NgModule has no reason to *export* anything because other modules don't need to *import* the root NgModule.
+
+</div>
+
+## NgModules and components
+
+NgModules provide a *compilation context* for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context.
+
+<figure>
+
+<img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">
+
+</figure>
+
+<br class="clear">
+
+A component and its template together define a *view*. A component can contain a *view hierarchy*, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries.
+
+<figure>
+
+<img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">
+
+</figure>
+
+<br class="clear">
+
+When you create a component, it's associated directly with a single view, called the *host view*. The host view can be the root of a view hierarchy, which can contain *embedded views*, which are in turn the host views of other components. Those components can be in the same NgModule, or can be imported from other NgModules. Views in the tree can be nested to any depth.
+
+<div class="alert is-helpful">
+    **Note:** The hierarchical structure of views is a key factor in the way Angular detects and responds to changes in the DOM and app data. 
+</div>
+
+## NgModules and JavaScript modules
+
+The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects. These are *complementary* module systems that you can use together to write your apps.
+
+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.
+Other JavaScript modules use *import statements* to access public objects from other modules.
+
+<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>
+
+<div class="alert is-helpful">
+  <a href="http://exploringjs.com/es6/ch_modules.html">Learn more about the JavaScript module system on the web.</a>
+</div>
+
+## Angular libraries
+
+<img src="generated/images/guide/architecture/library-module.png" alt="Component" class="left">
+
+Angular loads as a collection of JavaScript modules. You can think of them as library modules. Each Angular library name begins with the `@angular` prefix. Install them with the `npm` package manager and import parts of them with JavaScript `import` statements.
+
+<br class="clear">
+
+For example, import Angular's `Component` decorator from the `@angular/core` library like this.
+
+<code-example path="architecture/src/app/app.component.ts" region="import" linenums="false"></code-example>
+
+You also import NgModules from Angular *libraries* using JavaScript import statements. 
+For example, the following code imports the `BrowserModule` NgModule from the `platform-browser` library.
+
+<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
+`BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this.
+
+<code-example path="architecture/src/app/mini-app.ts" region="ngmodule-imports" linenums="false"></code-example>
+
+In this way you're using the Angular and JavaScript module systems *together*. Although it's easy to confuse the two systems, which share the common vocabulary of "imports" and "exports", you will become familiar with the different contexts in which they are used.
+
+<div class="alert is-helpful">
+
+  Learn more from the [NgModules](guide/ngmodules) guide.
+
+</div>
diff --git a/aio/content/guide/architecture-next-steps.md b/aio/content/guide/architecture-next-steps.md
new file mode 100644
index 000000000000..5ee726ae37e1
--- /dev/null
+++ b/aio/content/guide/architecture-next-steps.md
@@ -0,0 +1,50 @@
+# Next steps: tools and techniques
+
+After you understand the basic Angular building blocks, you can begin to learn more
+about the features and tools that are available to help you develop and deliver Angular applications.
+Here are some key features.
+
+## Responsive programming tools
+
+* [Lifecycle hooks](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces.
+
+* [Observables and event processing](guide/observables): How to use observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results.
+
+## Client-server interaction tools
+
+* [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
+
+* [Server-side Rendering](guide/universal): Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows you to run your Angular app on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers.
+
+* [Service Workers](guide/service-worker-intro): Use a service worker to reduce dependency on the network
+significantly improving the use experience.
+
+## Domain-specific libraries
+
+* [Animations](guide/animations): Use Angular's animation library to animate component behavior
+without deep knowledge of animation techniques or CSS.
+
+* [Forms](guide/forms): Support complex data entry scenarios with HTML-based validation and dirty checking.
+
+## Support for the development cycle
+
+* [Testing platform](guide/testing): Run unit tests on your application parts as they interact with the Angular framework.
+
+* [Internationalization](guide/i18n):  Make your app available in multiple languages with Angular's internationalization (i18n) tools.
+
+* [Compilation](guide/aot-compiler): Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment.
+
+* [Security guidelines](guide/security): Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks.
+
+## Setup and deployment tools
+
+* [Setup for local development](guide/setup): Set up a new project for development with QuickStart.
+
+* [Installation](guide/npm-packages): The [Angular CLI](https://cli.angular.io/), Angular applications, and Angular itself depend on features and functionality provided by libraries that are available as [npm](https://docs.npmjs.com/) packages.
+
+* [TypeScript configuration](guide/typescript-configuration): TypeScript is the primary language for Angular application development.
+
+* [Browser support](guide/browser-support): Make your apps compatible across a wide range of browsers.
+
+* [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server.
+
diff --git a/aio/content/guide/architecture-services.md b/aio/content/guide/architecture-services.md
new file mode 100644
index 000000000000..d555f3577cd3
--- /dev/null
+++ b/aio/content/guide/architecture-services.md
@@ -0,0 +1,116 @@
+# Introduction to services and dependency injection
+
+*Service* is a broad category encompassing any value, function, or feature that an app needs.
+A service is typically a class with a narrow, well-defined purpose. 
+It should do something specific and do it well.
+
+Angular distinguishes components from services to increase modularity and reusability.
+By separating a component's view-related functionality from other kinds of processing,
+you can make your component classes lean and efficient.
+
+Ideally, a component's job is to enable the user experience and nothing more.
+A component should present properties and methods for data binding,
+in order to mediate between the view (rendered by the template)
+and the application logic (which often includes some notion of a *model*).
+
+A component can delegate certain tasks to services, such as fetching data from the server,
+validating user input, or logging directly to the console. 
+By defining such processing tasks in an *injectable service class*, you make those tasks
+available to any component. 
+You can also make your app more adaptable by injecting different providers of the same kind of service,
+as appropriate in different circumstances.
+
+Angular doesn't *enforce* these principles. Angular does help you *follow* these principles
+by making it easy to factor your application logic into services and make those services
+available to components through *dependency injection*.
+
+## Service examples
+
+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>
+
+Services can depend on other services. For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes. That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server.
+
+<code-example path="architecture/src/app/hero.service.ts" linenums="false" title="src/app/hero.service.ts (class)" region="class"></code-example>
+
+## Dependency injection (DI)
+
+<img src="generated/images/guide/architecture/dependency-injection.png" alt="Service" class="left">
+
+DI is wired into the Angular framework and used everywhere to provide new components with the services or other things they need.
+Components consume services; that is, you can *inject* a service into a component, giving the component access to that service class. 
+
+To define a class as a service in Angular, use the `@Injectable()` decorator to provide the metadata that allows Angular to inject it into a component as a *dependency*.  
+Similarly, use the `@Injectable()` decorator to indicate that a component or other class (such as another service, a pipe, or an NgModule) *has* a dependency. 
+
+* The *injector* is the main mechanism. Angular creates an application-wide injector for you during the bootstrap process, and additional injectors as needed. You don't have to create injectors.
+
+* An injector creates dependencies, and maintains a *container* of dependency instances that it reuses if possible.
+
+* A *provider* is an object that tell an injector how to obtain or create a dependency.
+
+For any dependency that you need in your app, you must register a provider with the app's injector, 
+so that the injector can use the provider to create new instances. 
+For a service, the provider is typically the service class itself.
+
+<div class="alert is-helpful">
+
+A dependency doesn't have to be a service&mdash;it could be a function, for example, or a value. 
+
+</div>
+
+When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the constructor parameter types. For example, the constructor of `HeroListComponent` needs `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>
+
+When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested service instance doesn't yet exist, the injector makes one using the registered provider, and adds it to the injector before returning the service to Angular.
+
+When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments.
+
+The process of `HeroService` injection looks something like this.
+
+<figure>
+  <img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
+</figure>
+
+### Providing services
+
+You must register at least one *provider* of any service you are going to use.
+The provider can be part of the service's own metadata, making that service available everywhere,
+or you can register providers with specific modules or components. 
+You register providers in the metadata of the service (in the `@Injectable()` decorator),
+or in the `@NgModule()` or `@Component()` metadata 
+
+* By default, the Angular CLI command `ng generate service` registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. The tutorial uses this method to register the provider of  HeroService class definition.
+
+   ``` 
+   @Injectable({
+    providedIn: 'root',
+   })
+   ``` 
+
+   When you provide the service at the root level, Angular creates a single, shared instance of `HeroService`
+   and injects it into any class that asks for it. 
+   Registering the provider in the `@Injectable()` metadata also allows Angular to optimize an app
+   by removing the service from the compiled app if it isn't used. 
+
+* When you register a provider with a [specific NgModule](guide/architecture-modules), the same instance of a service is available to all components in that NgModule. To register at this level, use the `providers` property of the `@NgModule()` decorator,
+
+   ``` 
+   @NgModule({
+     providers: [
+     BackendService,
+     Logger
+    ],
+    ...
+   })
+   ``` 
+
+* When you register a provider at the component level, you get a new instance of the
+service with each new instance of that component. 
+At the component level, register a service provider in the `providers` property of the `@Component()` metadata.
+
+   <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>
+
+For more detailed information, see the [Dependency Injection](guide/dependency-injection) section.
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
new file mode 100644
index 000000000000..2728f3c09d79
--- /dev/null
+++ b/aio/content/guide/architecture.md
@@ -0,0 +1,149 @@
+# Architecture overview
+
+Angular is a platform and framework for building client applications in HTML and TypeScript.
+Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
+
+The basic building blocks of an Angular application are *NgModules*, which provide a compilation context for *components*. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a *root module* that enables bootstrapping, and typically has many more *feature modules*.
+
+* Components define *views*, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. 
+
+* Components use *services*, which provide specific functionality not directly related to views. Service providers can be *injected* into components as *dependencies*, making your code modular, reusable, and efficient.
+
+Both components and services are simply classes, with *decorators* that mark their type and provide metadata that tells Angular how to use them.
+
+* The metadata for a component class associates it with a *template* that defines a view. A template combines ordinary HTML with Angular *directives* and *binding markup* that allow Angular to modify the HTML before rendering it for display.
+
+* The metadata for a service class provides the information Angular needs to make it available to components through *dependency injection (DI)*.
+
+An app's components typically define many views, arranged hierarchically. Angular provides the `Router` service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities.
+
+## Modules
+
+Angular *NgModules* differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.
+
+Every Angular app has a *root module*, conventionally named `AppModule`, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.
+
+Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. For example, to use the router service in your app, you import the `Router` NgModule.
+
+Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability. In addition, this technique lets you take advantage of *lazy-loading*&mdash;that is, loading modules on demand&mdash;to minimize the amount of code that needs to be loaded at startup.
+
+<div class="alert is-helpful">
+
+  For a more detailed discussion, see [Introduction to modules](guide/architecture-modules).
+
+</div>
+
+## Components
+
+Every Angular application has at least one component, the *root component* that connects a component hierarchy with the page document object model (DOM). Each component defines a class that contains application data and logic, and is associated with an HTML *template* that defines a view to be displayed in a target environment.
+
+The `@Component()` decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.
+
+<div class="alert is-helpful">
+
+   Decorators are functions that modify JavaScript classes. Angular defines a number of decorators that attach specific kinds of metadata to classes, so that the system knows what those classes mean and how they should work.
+
+   <a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0">Learn more about decorators on the web.</a>
+
+</div>
+
+### Templates, directives, and data binding
+
+A template combines HTML with Angular markup that can modify HTML elements before they are displayed.
+Template *directives* provide program logic, and *binding markup* connects your application data and the DOM.
+There are two types of data binding:
+
+* *Event binding* lets your app respond to user input in the target environment by updating your application data.
+* *Property binding* lets you interpolate values that are computed from your application data into the HTML.
+
+Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports *two-way data binding*, meaning that changes in the DOM, such as user choices, are also reflected in your program data.
+
+Your templates can use *pipes* to improve the user experience by transforming values for display. 
+For example, use pipes to display dates and currency values that are appropriate for a user's locale.
+Angular provides predefined pipes for common transformations, and you can also define your own pipes.
+
+<div class="alert is-helpful">
+
+  For a more detailed discussion of these concepts, see [Introduction to components](guide/architecture-components).
+
+</div>
+
+{@a dependency-injection}
+
+
+## Services and dependency injection
+
+For data or logic that isn't associated with a specific view, and that you want to share across components, you create a *service* class. A service class definition is immediately preceded by the `@Injectable()` decorator. The decorator provides the metadata that allows your service to be *injected* into client components as a dependency.
+
+ *Dependency injection* (DI) lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.
+
+<div class="alert is-helpful">
+
+  For a more detailed discussion, see [Introduction to services and DI](guide/architecture-services).
+
+</div>
+
+### Routing
+
+The Angular `Router` NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your app. It is modeled on the familiar browser navigation conventions:
+
+* Enter a URL in the address bar and the browser navigates to a corresponding page.
+
+* Click links on the page and the browser navigates to a new page.
+
+* Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.
+
+The router maps URL-like paths to views instead of pages. When a user performs an action, such as clicking a link, that would load a new page in the browser, the router intercepts the browser's behavior, and shows or hides view hierarchies.
+
+If the router determines that the current application state requires particular functionality, and the module that defines it hasn't been loaded, the router can *lazy-load* the module on demand.
+
+The router interprets a link URL according to your app's view navigation rules and data state. You can navigate to new views when the user clicks a button or selects from a drop box, or in response to some other stimulus from any source. The router logs activity in the browser's history, so the back and forward buttons work as well.
+
+To define navigation rules, you associate *navigation paths* with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules.
+
+ <div class="alert is-helpful">
+
+   For a more detailed discussion, see [Routing and navigation](guide/router).
+
+ </div>
+
+<hr/>
+
+## What's next
+
+You've learned the basics about the main building blocks of an Angular application. The following diagram shows how these basic pieces are related.
+
+<figure>
+  <img src="generated/images/guide/architecture/overview2.png" alt="overview">
+</figure>
+
+* Together, a component and template define an Angular view.
+  * A decorator on a component class adds the metadata, including a pointer to the associated template.
+  * Directives and binding markup in a component's template modify views based on program data and logic.
+* The dependency injector provides services to a component, such as the router service that lets you define navigation among views.
+
+Each of these subjects is introduced in more detail in the following pages.
+
+* [Introduction to Modules](guide/architecture-modules)
+
+* [Introduction to Components](guide/architecture-components)
+
+  * [Templates and views](guide/architecture-components#templates-and-views)
+
+  * [Component metadata](guide/architecture-components#component-metadata)
+
+  * [Data binding](guide/architecture-components#data-binding)
+
+  * [Directives](guide/architecture-components#directives)
+
+  * [Pipes](guide/architecture-components#pipes)
+
+* [Introduction to services and dependency injection](guide/architecture-services)
+
+<div class="alert is-helpful">
+
+   Note that the code referenced on these pages is available as a <live-example></live-example>.
+</div>
+
+When you're familiar with these fundamental building blocks, you can explore them in more detail in the documentation. To learn about more tools and techniques that are available to help you build and deploy Angular applications, see [Next steps: tools and techniques](guide/architecture-next-steps).
+</div>
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
new file mode 100644
index 000000000000..03c600ab97ae
--- /dev/null
+++ b/aio/content/guide/attribute-directives.md
@@ -0,0 +1,385 @@
+# Attribute Directives
+
+An **Attribute** directive changes the appearance or behavior of a DOM element.
+
+Try the <live-example title="Attribute Directive example"></live-example>.
+
+{@a directive-overview}
+
+## Directives overview
+
+There are three kinds of directives in Angular:
+
+1. Components&mdash;directives with a template.
+1. Structural directives&mdash;change the DOM layout by adding and removing DOM elements.
+1. Attribute directives&mdash;change the appearance or behavior of an element, component, or another directive.
+
+*Components* are the most common of the three directives.
+You saw a component for the first time in the [QuickStart](guide/quickstart) guide.
+
+*Structural Directives* change the structure of the view.
+Two examples are [NgFor](guide/template-syntax#ngFor) and [NgIf](guide/template-syntax#ngIf).
+Learn about them in the [Structural Directives](guide/structural-directives) guide.
+
+*Attribute directives* are used as attributes of elements.
+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.
+
+## Build a simple attribute directive
+
+An attribute directive minimally requires building a controller class annotated with
+`@Directive`, which specifies the selector that identifies
+the attribute.
+The controller class implements the desired directive behavior.
+
+This page demonstrates building a simple _appHighlight_ attribute
+directive to set an element's background color
+when the user hovers over that element. You can apply it like this:
+
+<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
+
+Create the directive class file in a terminal window with this CLI command.
+
+<code-example language="sh" class="code-shell">
+ng generate directive highlight
+</code-example>
+
+The CLI creates `src/app/highlight.directive.ts`, a corresponding test file (`.../spec.ts`, and _declares_ the directive class in the root `AppModule`.
+
+<div class="alert is-helpful">
+
+_Directives_ must be declared in [Angular Modules](guide/ngmodules) in the same manner as _components_.
+
+</div >
+
+The generated `src/app/highlight.directive.ts` is as follows:
+
+<code-example path="attribute-directives/src/app/highlight.directive.0.ts" title="src/app/highlight.directive.ts"></code-example>
+
+The imported `Directive` symbol provides the Angular the `@Directive` decorator.
+
+The `@Directive` decorator's lone configuration property specifies the directive's
+[CSS attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors), `[appHighlight]`.
+
+It's the brackets (`[]`) that make it an attribute selector.
+Angular locates each element in the template that has an attribute named `appHighlight` and applies the logic of this directive to that element.
+
+The _attribute selector_ pattern explains the name of this kind of directive.
+
+<div class="alert is-helpful">
+
+#### Why not "highlight"?
+
+Though *highlight* would be a more concise selector than *appHighlight* and it would work,
+the best practice is to prefix selector names to ensure
+they don't conflict with standard HTML attributes.
+This also reduces the risk of colliding with third-party directive names.
+The CLI added the `app` prefix for you.
+
+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.
+
+</div>
+
+After the `@Directive` metadata comes the directive's controller class,
+called `HighlightDirective`, which contains the (currently empty) logic for the directive.
+Exporting `HighlightDirective` makes the directive accessible.
+
+Now edit the generated `src/app/highlight.directive.ts` to look as follows:
+
+<code-example path="attribute-directives/src/app/highlight.directive.1.ts" title="src/app/highlight.directive.ts"></code-example>
+
+The `import` statement specifies an additional `ElementRef` symbol from the Angular `core` library:
+
+You use the `ElementRef` in the directive's constructor
+to [inject](guide/dependency-injection) a reference to the host DOM element, 
+the element to which you applied `appHighlight`.
+
+`ElementRef` grants direct access to the host DOM element
+through its `nativeElement` property.
+
+This first implementation sets the background color of the host element to yellow.
+
+{@a apply-directive}
+
+## Apply the attribute directive
+
+To use the new `HighlightDirective`, add a paragraph (`<p>`) element to the template of the root `AppComponent` and apply the directive as an attribute.
+
+<code-example path="attribute-directives/src/app/app.component.1.html" title="src/app/app.component.html" region="applied"></code-example>
+
+Now run the application to see the `HighlightDirective` in action.
+
+
+<code-example language="sh" class="code-shell">
+ng serve
+</code-example>
+
+To summarize, Angular found the `appHighlight` attribute on the **host** `<p>` element.
+It created an instance of the `HighlightDirective` class and
+injected a reference to the `<p>` element into the directive's constructor
+which sets the `<p>` element's background style to yellow.
+
+{@a respond-to-user}
+
+## Respond to user-initiated events
+
+Currently, `appHighlight` simply sets an element color.
+The directive could be more dynamic.
+It could detect when the user mouses into or out of the element
+and respond by setting or clearing the highlight color.
+
+Begin by adding `HostListener` to the list of imported symbols.
+
+<code-example path="attribute-directives/src/app/highlight.directive.2.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.
+
+<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
+element that hosts an attribute directive, the `<p>` in this case.
+
+<div class="alert is-helpful">
+
+Of course you could reach into the DOM with standard JavaScript and attach event listeners manually.
+There are at least three problems with _that_ approach:
+
+1. You have to write the listeners correctly.
+1. The code must *detach* the listener when the directive is destroyed to avoid memory leaks.
+1. Talking to DOM API directly isn't a best practice.
+
+</div>
+
+The handlers delegate to a helper method that sets the color on the host DOM element, `el`.
+
+The helper method, `highlight`, was extracted from the constructor.
+The revised constructor simply declares the injected `el: ElementRef`.
+
+<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>
+
+Run the app and confirm that the background color appears when
+the mouse hovers over the `p` and disappears as it moves out.
+
+<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
+
+Currently the highlight color is hard-coded _within_ the directive. That's inflexible.
+In this section, you give the developer the power to set the highlight color while applying the directive.
+
+Begin by adding `Input` to the list of symbols imported from `@angular/core`.
+<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (imports)" region="imports"></code-example>
+
+Add a `highlightColor` property to the directive class like this:
+
+<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
+
+Notice the `@Input` decorator. It adds metadata to the class that makes the directive's `highlightColor` property available for binding.
+
+It's called an *input* property because data flows from the binding expression _into_ the directive.
+Without that input metadata, Angular rejects the binding; see [below](guide/attribute-directives#why-input "Why add @Input?") for more about that.
+
+Try it by adding the following directive binding variations to the `AppComponent` template:
+
+<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`.
+
+<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>
+
+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>
+
+The `[appHighlight]` 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 (`[appHighlight]`) to do both jobs.
+That's a crisp, compact syntax.
+
+You'll have to rename the directive's `highlightColor` property to `appHighlight` because that's now the color property binding name.
+
+<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, `appHighlight`, is a terrible property name and it doesn't convey the property's intent.
+
+{@a input-alias}
+
+### Bind to an _@Input_ alias
+
+Fortunately you can name the directive property whatever you want _and_ **_alias it_** for binding purposes.
+
+Restore the original property name and specify the selector as the alias in the argument to `@Input`.
+
+<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 `appHighlight`.
+
+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>
+
+Now that you're binding via the alias to the `highlightColor`, modify the `onMouseEnter()` method to use that property.
+If someone neglects to bind to `appHighlightColor`, highlight the host element in red:
+
+<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>
+
+## Write a harness to try it
+
+It may be difficult to imagine how this directive actually works.
+In this section, you'll turn `AppComponent` into a harness that
+lets you pick the highlight color with a radio button and bind your color choice to the directive.
+
+Update <code>app.component.html</code> as follows:
+
+<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.
+
+<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>
+  <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
+
+This highlight directive has a single customizable property. In a real app, it may need more.
+
+At the moment, the default color&mdash;the color that prevails until
+the user picks a highlight color&mdash;is hard-coded as "red".
+Let the template developer set the default color.
+
+Add a second **input** property to `HighlightDirective` called `defaultColor`:
+
+<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (defaultColor)" region="defaultColor"></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.
+
+<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 `appHighlight` attribute name?
+
+As with components, you can add as many directive property bindings as you need by stringing them along in the template.
+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.
+
+<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.
+
+Here's how the harness should work when you're done coding.
+
+<figure>
+  <img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
+</figure>
+
+## Summary
+
+This page covered how to:
+
+* [Build an **attribute directive**](guide/attribute-directives#write-directive) that modifies the behavior of an element.
+* [Apply the directive](guide/attribute-directives#apply-directive) to an element in a template.
+* [Respond to **events**](guide/attribute-directives#respond-to-user) that change the directive's behavior.
+* [**Bind** values to the directive](guide/attribute-directives#bindings).
+
+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-tabs>
+
+
+
+You can also experience and download the <live-example title="Attribute Directive example"></live-example>.
+
+{@a why-input}
+
+### Appendix: Why add _@Input_?
+
+In this demo, the `highlightColor` property is an ***input*** property of
+the `HighlightDirective`. You've seen it applied without an alias:
+
+<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>
+
+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.
+
+You've bound template HTML to component properties before and never used `@Input`.
+What's different?
+
+The difference is a matter of trust.
+Angular treats a component's template as _belonging_ to the component.
+The component and its template trust each other implicitly.
+Therefore, the component's own template may bind to _any_ property of that component,
+with or without the `@Input` decorator.
+
+But a component or directive shouldn't blindly trust _other_ components and directives.
+The properties of a component or directive are hidden from binding by default.
+They are _private_ from an Angular binding perspective.
+When adorned with the `@Input` decorator, the property becomes _public_ from an Angular binding perspective.
+Only then can it be bound by some other component or directive.
+
+You can tell if `@Input` is needed by the position of the property name in a binding.
+
+* When it appears in the template expression to the ***right*** of the equals (=),
+  it belongs to the template's component and does not require the `@Input` decorator.
+
+* When it appears in **square brackets** ([ ]) to the **left** of the equals (=),
+  the property belongs to some _other_ component or directive;
+  that property must be adorned with the `@Input` decorator.
+
+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>
+
+* 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.
+
+* The `appHighlight` property on the left refers to an _aliased_ property of the `HighlightDirective`,
+  not a property of the template's component. There are trust issues.
+  Therefore, the directive property must carry the `@Input` decorator.
diff --git a/aio/content/guide/bootstrapping.md b/aio/content/guide/bootstrapping.md
new file mode 100644
index 000000000000..b65fd1e31ea1
--- /dev/null
+++ b/aio/content/guide/bootstrapping.md
@@ -0,0 +1,180 @@
+# Bootstrapping
+
+#### Prerequisites
+
+A basic understanding of the following:
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
+
+<hr />
+
+An NgModule describes how the application parts fit together.
+Every application has at least one Angular module, the _root_ module
+that you bootstrap to launch the application.
+By convention, it is usually called `AppModule`.
+
+If you use the CLI to generate an app, the default `AppModule` is as follows:
+
+```typescript
+/* JavaScript imports */
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent } from './app.component';
+
+/* the AppModule class with the @NgModule decorator */
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+
+```
+
+After the import statements is a class with the
+**`@NgModule`** [decorator](guide/glossary#decorator '"Decorator" explained').
+
+The `@NgModule` decorator identifies `AppModule` as an `NgModule` class.
+`@NgModule` takes a metadata object that tells Angular how to compile and launch the application.
+
+* **_declarations_**&mdash;this application's lone component.
+* **_imports_**&mdash;import `BrowserModule` to have browser specific services such as DOM rendering, sanitization, and location.
+* **_providers_**&mdash;the service providers.
+* **_bootstrap_**&mdash;the _root_ component that Angular creates and inserts
+into the `index.html` host web page.
+
+The default CLI application only has one component, `AppComponent`, so it
+is in both the `declarations` and the `bootstrap` arrays.
+
+{@a declarations}
+
+## The `declarations` array
+
+The module's `declarations` array tells Angular which components belong to that module.
+As you create more components, add them to `declarations`.
+
+You must declare every component in exactly one `NgModule` class.
+If you use a component without declaring it, Angular returns an
+error message.
+
+The `declarations` array only takes declarables. Declarables
+are components, [directives](guide/attribute-directives) and [pipes](guide/pipes).
+All of a module's declarables must be in the `declarations` array.
+Declarables must belong to exactly one module. The compiler emits
+an error if you try to declare the same class in more than one module.
+
+These declared classes are visible within the module but invisible
+to components in a different module unless they are exported from
+this module and the other module imports this one.
+
+An example of what goes into a declarations array follows:
+
+```typescript
+  declarations: [
+    YourComponent,
+    YourPipe,
+    YourDirective
+  ],
+```
+
+A declarable can only belong to one module, so only declare it in
+one `@NgModule`. When you need it elsewhere,
+import the module that has the declarable you need in it.
+
+**Only `@NgModule` references** go in the `imports` array.
+
+
+### Using directives with `@NgModule`
+
+Use the `declarations` array for directives.
+To use a directive, component, or pipe in a module, you must do a few things:
+
+1. Export it from the file where you wrote it.
+2. Import it into the appropriate module.
+3. Declare it in the `@NgModule` `declarations` array.
+
+
+Those three steps look like the following. In the file where you create your directive, export it.
+The following example, named `ItemDirective` is the default directive structure that the CLI generates in its own file, `item.directive.ts`:
+
+<code-example path="bootstrapping/src/app/item.directive.ts" region="directive" title="src/app/item.directive.ts" linenums="false">
+</code-example>
+
+The key point here is that you have to export it so you can import it elsewhere. Next, import it
+into the NgModule, in this example `app.module.ts`, with a JavaScript import statement:
+
+<code-example path="bootstrapping/src/app/app.module.ts" region="directive-import" title="src/app/app.module.ts" linenums="false">
+</code-example>
+
+And in the same file, add it to the `@NgModule` `declarations` array:
+
+<code-example path="bootstrapping/src/app/app.module.ts" region="declarations" title="src/app/app.module.ts" linenums="false">
+</code-example>
+
+
+Now you could use your `ItemDirective` in a component. This example uses `AppModule`, but you'd do it the same way for a feature module. For more about directives, see [Attribute Directives](guide/attribute-directives) and [Structural Directives](guide/structural-directives). You'd also use the same technique for [pipes](guide/pipes) and components.
+
+Remember, components, directives, and pipes belong to one module only. You only need to declare them once in your app because you share them by importing the necessary modules. This saves you time and helps keep your app lean.
+
+
+
+
+{@a imports}
+
+## The `imports` array
+
+The module's `imports` array appears exclusively in the `@NgModule` metadata object.
+It tells Angular about other NgModules that this particular module needs to function properly.
+
+This list of modules are those that export components, directives, or pipes
+that the component templates in this module reference. In this case, the component is
+`AppComponent`, which references components, directives, or pipes in `BrowserModule`,
+`FormsModule`, or  `HttpClientModule`.
+A component template can reference another component, directive,
+or pipe when the referenced class is declared in this module or
+the class was imported from another module.
+
+You don't have any services to provide yet.
+But you will create some before long and you may chose to provide many of them here.
+
+{@a bootstrap-array}
+
+## The `providers` array
+
+The providers array is where you list the services the app needs. When
+you list services here, they are available app-wide. You can scope
+them when using feature modules and lazy loading. For more information, see
+[Providers](guide/providers).
+
+## The `bootstrap` array
+
+The application launches by bootstrapping the root `AppModule`, which is
+also referred to as an `entryComponent`.
+Among other things, the bootstrapping process creates the component(s) listed in the `bootstrap` array
+and inserts each one into the browser DOM.
+
+Each bootstrapped component is the base of its own tree of components.
+Inserting a bootstrapped component usually triggers a cascade of
+component creations that fill out that tree.
+
+While you can put more than one component tree on a host web page,
+most applications have only one component tree and bootstrap a single root component.
+
+This one root component is usually called `AppComponent` and is in the
+root module's `bootstrap` array.
+
+
+
+## More about Angular Modules
+
+For more on NgModules you're likely to see frequently in apps,
+see [Frequently Used Modules](guide/frequent-ngmodules).
diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md
new file mode 100644
index 000000000000..fea8cd245a75
--- /dev/null
+++ b/aio/content/guide/browser-support.md
@@ -0,0 +1,580 @@
+# Browser support
+
+Angular supports most recent browsers. This includes the following specific versions:
+
+<table>
+
+  <tr>
+
+<th>
+      Browser
+</th>
+
+<th>
+      Supported versions
+</th>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      Chrome
+    </td>
+
+    <td>
+      latest
+    </td>
+  </tr>
+
+  <tr>
+
+    <td>
+      Firefox
+    </td>
+
+    <td>
+      latest
+    </td>
+  </tr>
+
+  <tr>
+
+    <td>
+      Edge
+    </td>
+
+    <td>
+      2 most recent major versions
+    </td>
+  </tr>
+  <tr> 
+    <td>
+      IE
+    </td>
+    <td>
+      11<br>10<br>9
+    </td>
+  </tr>
+ <tr>
+   <tr> 
+    <td>
+      IE Mobile
+    </td>
+    <td>
+      11
+    </td>
+  </tr>
+ <tr>
+    <td>
+      Safari
+    </td>
+
+    <td>
+      2 most recent major versions
+    </td>
+  </tr>
+  <tr>
+    <td>
+      iOS
+    </td>
+
+    <td>
+      2 most recent major versions
+    </td>
+  </tr> 
+  <tr>
+    <td>
+      Android
+    </td>
+
+    <td>
+      Nougat (7.0)<br>Marshmallow (6.0)<br>Lollipop (5.0, 5.1)<br>KitKat (4.4)
+    </td>
+  </tr> 
+
+</table>
+
+<div class="alert is-helpful">
+
+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>.
+
+</div>
+
+
+## Polyfills
+
+Angular is built on the latest standards of the web platform.
+Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers.
+
+You compensate by loading polyfill scripts ("polyfills") for the browsers that you must support.
+The [table below](#polyfill-libs) identifies most of the polyfills you might need.
+
+<div class="alert is-important">
+
+The suggested polyfills are the ones that run full Angular applications.
+You may need additional polyfills to support features not covered by this list.
+Note that polyfills cannot magically transform an old, slow browser into a modern, fast one.
+
+</div>
+
+## Enabling polyfills
+
+[Angular CLI](https://github.com/angular/angular-cli/wiki) users enable polyfills through the `src/polyfills.ts` file that
+the CLI created with your project.
+
+This file incorporates the mandatory and many of the optional polyfills as JavaScript `import` statements.
+
+The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and their corresponding `import` statements are ready to go. You probably won't touch these.
+
+But if you need an optional polyfill, you'll have to install its npm package.
+For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
+
+<code-example language="sh" class="code-shell">
+  # note that the web-animations-js polyfill is only here as an example
+  # it isn't a strict requirement of Angular anymore (more below)
+  npm install --save web-animations-js
+</code-example>
+
+Then open the `polyfills.ts` file and un-comment the corresponding `import` statement as in the following example:
+
+<code-example title="src/polyfills.ts">
+  /**
+  * Required to support Web Animations `@angular/platform-browser/animations`.
+  * 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`.
+</code-example>
+
+If you can't find the polyfill you want in `polyfills.ts`,
+add it yourself, following the same pattern:
+
+1. install the npm package
+1. `import` the file in `polyfills.ts`
+
+<div class="alert is-helpful">
+
+Non-CLI users should follow the instructions [below](#non-cli).
+</div>
+
+{@a polyfill-libs}
+
+### Mandatory polyfills
+These are the polyfills required to run an Angular application on each supported browser:
+
+
+<table>
+
+  <tr style="vertical-align: top">
+
+    <th>
+      Browsers (Desktop & Mobile)
+    </th>
+
+    <th>
+      Polyfills Required
+    </th>
+
+  </tr>
+
+  <tr style="vertical-align: top">
+
+    <td>
+      Chrome, Firefox, Edge, Safari 9+
+    </td>
+
+    <td>
+
+      [ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only)
+
+    </td>
+
+  </tr>
+
+  <tr style="vertical-align: top">
+
+    <td>
+      Safari 7 & 8, IE10 & 11, Android 4.1+
+    </td>
+
+    <td>
+
+      [ES6](guide/browser-support#core-es6)
+
+    </td>
+
+  </tr>
+
+  <tr style="vertical-align: top">
+
+    <td>
+      IE9
+    </td>
+
+    <td>
+
+      [ES6<br>classList](guide/browser-support#classlist)
+
+    </td>
+
+  </tr>
+
+</table>
+
+
+### Optional browser features to polyfill
+
+Some features of Angular may require additional polyfills.
+
+For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today.
+(note that the dependency of web-animations-js in Angular is only necessary if `AnimationBuilder` is used.)
+
+Here are the features which may require additional polyfills:
+
+
+<table>
+
+  <tr style="vertical-align: top">
+
+    <th>
+      Feature
+    </th>
+
+    <th>
+      Polyfill
+    </th>
+
+    <th style="width: 50%">
+       Browsers (Desktop & Mobile)
+    </th>
+
+  </tr>
+
+  <tr style="vertical-align: top">
+
+    <td>
+
+      [JIT compilation](guide/aot-compiler).
+
+      Required to reflect for metadata.
+    </td>
+
+    <td>
+
+      [ES7/reflect](guide/browser-support#core-es7-reflect)
+
+    </td>
+
+    <td>
+      All current browsers. Enabled by default.
+      Can remove if you always use AOT and only use Angular decorators.
+    </td>
+
+  </tr>
+
+  <tr style="vertical-align: top">
+
+    <td>
+
+      [Animations](guide/animations)
+      <br>Only if `Animation Builder` is used within the application--standard
+      animation support in Angular doesn't require any polyfills (as of NG6).
+
+    </td>
+
+    <td>
+
+      [Web Animations](guide/browser-support#web-animations)
+
+    </td>
+
+    <td>
+      <p>If AnimationBuilder is used then the polyfill will enable scrubbing
+      support for IE/Edge and Safari (Chrome and Firefox support this natively).</p>
+    </td>
+
+  </tr>
+
+  <tr style="vertical-align: top">
+
+    <td>
+
+    If you use the following deprecated i18n pipes:
+    
+
+     [date](api/common/DeprecatedDatePipe), 
+     
+     [currency](api/common/DeprecatedCurrencyPipe),
+     
+     [decimal](api/common/DeprecatedDecimalPipe), 
+     
+     [percent](api/common/DeprecatedPercentPipe)
+
+    </td>
+
+    <td>
+
+      [Intl API](guide/browser-support#intl)
+
+    </td>
+
+    <td>
+      All but Chrome, Firefox, Edge, IE11 and Safari 10
+    </td>
+
+  </tr>
+
+  <tr style="vertical-align: top">
+
+    <td>
+
+       [NgClass](api/common/NgClass) 
+       
+       on SVG elements
+    </td>
+
+    <td>
+
+      [classList](guide/browser-support#classlist)
+
+    </td>
+
+    <td>
+      IE10, IE11
+    </td>
+
+  </tr>
+
+  <tr style="vertical-align: top">
+
+    <td>
+
+      [Http](guide/http) 
+      
+      when sending and receiving binary data
+    </td>
+
+    <td>
+
+      [Typed&nbsp;Array](guide/browser-support#typedarray)<br>
+
+      [Blob](guide/browser-support#blob)<br>
+
+      [FormData](guide/browser-support#formdata)
+
+    </td>
+
+    <td>
+      IE 9
+    </td>
+
+  </tr>
+
+</table>
+
+
+
+### Suggested polyfills ##
+Below are the polyfills which are used to test the framework itself. They are a good starting point for an application.
+
+
+<table>
+
+  <tr>
+
+    <th>
+      Polyfill
+    </th>
+
+    <th>
+      License
+    </th>
+
+    <th>
+      Size*
+    </th>
+
+  </tr>
+
+  <tr>
+
+    <td>
+
+      <a id='core-es7-reflect' href="https://github.com/zloirock/core-js/blob/master/es7/reflect.js">ES7/reflect</a>
+
+    </td>
+
+    <td>
+      MIT
+    </td>
+
+    <td>
+      0.5KB
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+
+      <a id='core-es6' href="https://github.com/zloirock/core-js">ES6</a>
+
+    </td>
+
+    <td>
+      MIT
+    </td>
+
+    <td>
+      27.4KB
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+
+      <a id='classlist' href="https://github.com/eligrey/classList.js">classList</a>
+
+    </td>
+
+    <td>
+      Public domain
+    </td>
+
+    <td>
+      1KB
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+
+      <a id='intl' href="https://github.com/andyearnshaw/Intl.js">Intl</a>
+
+    </td>
+
+    <td>
+      MIT / Unicode license
+    </td>
+
+    <td>
+      13.5KB
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+
+       <a id='web-animations' href="https://github.com/web-animations/web-animations-js">Web Animations</a>
+
+    </td>
+
+    <td>
+      Apache
+    </td>
+
+    <td>
+      14.8KB
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+
+      <a id='typedarray' href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js">Typed Array</a>
+
+    </td>
+
+    <td>
+      MIT
+    </td>
+
+    <td>
+      4KB
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+
+       <a id='blob' href="https://github.com/eligrey/Blob.js">Blob</a>
+
+    </td>
+
+    <td>
+      MIT
+    </td>
+
+    <td>
+      1.3KB
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+
+       <a id='formdata' href="https://github.com/francois2metz/html5-formdata">FormData</a>
+
+    </td>
+
+    <td>
+      MIT
+    </td>
+
+    <td>
+      0.4KB
+    </td>
+
+  </tr>
+
+</table>
+
+
+\* Figures are for minified and gzipped code,
+computed with the <a href="http://closure-compiler.appspot.com/home">closure compiler</a>.
+
+{@a non-cli}
+## Polyfills for non-CLI users
+
+If you are not using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this.
+
+<code-example title="src/index.html">
+  &lt;!-- pre-zone polyfills -->
+  &lt;script src="node_modules/core-js/client/shim.min.js">&lt;/script>
+  &lt;script src="node_modules/web-animations-js/web-animations.min.js">&lt;/script>
+  &lt;script>
+    /**
+     * you can configure some zone flags which can disable zone interception for some
+     * asynchronous activities to improve startup performance - use these options only
+     * if you know what you are doing as it could result in hard to trace down bugs..
+     */
+    // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+    // __Zone_disable_on_property = true; // disable patch onProperty such as onclick
+    // __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+    /*
+     * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+     * with the following flag, it will bypass `zone.js` patch for IE/Edge
+     */
+    // __Zone_enable_cross_context_check = true;
+  &lt;/script>
+  &lt;!-- zone.js required by Angular -->
+  &lt;script src="node_modules/zone.js/dist/zone.js">&lt;/script>
+
+  &lt;!-- application polyfills -->
+</code-example>
diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md
new file mode 100644
index 000000000000..28181617372c
--- /dev/null
+++ b/aio/content/guide/change-log.md
@@ -0,0 +1,221 @@
+# Change Log
+
+
+
+The Angular documentation is a living document with continuous improvements.
+This log calls attention to recent significant changes.
+
+## Updated to Angular 4.0. Documentation for Angular 2.x can be found at [v2.angular.io](https://v2.angular.io).
+
+## All mention of moduleId removed. "Component relative paths" guide deleted (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.
+
+We strongly encourage you to only write component-relative paths.
+That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you.
+
+## NEW: Downloadable examples for each guide (2017-02-28)
+Now you can download the sample code for any guide and run it locally.
+Look for the new download links next to the "live example" links.
+
+## Template Syntax/Structural Directives: refreshed (2017-02-06)
+The [_Template-Syntax_](guide/template-syntax) and [_Structural Directives_](guide/structural-directives)
+guides were significantly revised for clarity, accuracy, and current recommended practices.
+Discusses `<ng-container>`.
+Revised samples are more clear and cover all topics discussed.
+
+## NEW: Samples re-structured with `src/` folder (2017-02-02)
+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.
+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="Migrating samples/quickstart app to the src folder">
+the QuickStart repo update instructions</a>.
+
+Notably:
+
+* `app/main.ts` moved to `src/main.ts`.
+* `app/` moved to `src/app/`.
+* `index.html`, `styles.css` and `tsconfig.json` moved inside `src/`.
+* `systemjs.config.js` now imports `main.js` instead of `app`.
+* Added `lite-server` configuration (`bs-config.json`) to serve `src/`.
+
+## NEW: Reactive Forms guide (2017-01-31)
+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,
+choosing the approach that best fits each scenario.
+
+## NEW: Deployment guide (2017-01-30)
+
+The new [Deployment](guide/deployment) guide describes techniques for putting your application on a server.
+It includes important advice on optimizing for production.
+
+## Hierarchical Dependency Injection: refreshed (2017-01-13)
+
+[Hierarchical Dependency Injection](guide/hierarchical-dependency-injection) guide is significantly revised.
+Closes issue #3086.
+Revised samples are clearer and cover all topics discussed.
+
+## Miscellaneous (2017-01-05)
+
+* [Setup](guide/setup) guide:
+added (optional) instructions on how to remove _non-essential_ files.
+* No longer consolidate RxJS operator imports in `rxjs-extensions` file; each file should import what it needs.
+* All samples prepend template/style URLs with `./` as a best practice.
+* [Style Guide](guide/styleguide): copy edits and revised rules.
+
+## Router: more detail (2016-12-21)
+
+Added more information to the [Router](guide/router) guide
+including sections named outlets, wildcard routes, and preload strategies.
+
+## HTTP: how to set default request headers (and other request options) (2016-12-14)
+
+Added section on how to set default request headers (and other request options) to
+HTTP guide.
+
+## Testing: added component test plunkers (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`.
+Linked to these plunkers in "Testing" and "Setup anatomy" guides.
+
+## Internationalization: pluralization and _select_ (2016-11-30)
+
+The [Internationalization (i18n)](guide/i18n) guide explains how to handle pluralization and
+translation of alternative texts with `select`.
+The sample demonstrates these features too.
+
+## Testing: karma file updates (2016-11-30)
+
+* `karma.config` + `karma-test-shim` can handle multiple spec source paths;
+see quickstart issue: [angular/quickstart#294](https://github.com/angular/quickstart/issues/294).
+* Displays Jasmine Runner output in the karma-launched browser.
+
+## QuickStart Rewrite (2016-11-18)
+
+The QuickStart is completely rewritten so that it actually is quick.
+It references a minimal "Hello Angular" app running in Plunker.
+The new [Setup](guide/setup) page tells you how to install a local development environment
+by downloading (or cloning) the QuickStart github repository.
+You are no longer asked to copy-and-paste code into setup files that were not explained anyway.
+
+## Sync with Angular v.2.2.0 (2016-11-14)
+
+Docs and code samples updated and tested with Angular v.2.2.0.
+
+## UPDATE: NgUpgrade Guide for the AOT friendly _upgrade/static_ module (2016-11-14)
+
+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.
+
+## ES6  described in "TypeScript to JavaScript" (2016-11-14)
+
+The updated TypeScript to JavaScript guide explains how to write apps in ES6/7
+by translating the common idioms in the TypeScript documentation examples
+(and elsewhere on the web) to ES6/7 and ES5.
+
+This was [removed in August 2017](https://github.com/angular/angular/pull/18694) but can still be
+viewed in the [v2 documentation](https://v2.angular.io/docs/ts/latest/cookbook/ts-to-js.html).
+
+## Sync with Angular v.2.1.1 (2016-10-21)
+
+Docs and code samples updated and tested with Angular v.2.1.1.
+
+## npm _@types_ packages replace _typings_ (2016-10-20)
+
+Documentation samples now get TypeScript type information for 3rd party libraries
+from npm `@types` packages rather than with the _typings_ tooling.
+The `typings.json` file is gone.
+
+The [AngularJS Upgrade](guide/upgrade) guide reflects this change.
+The `package.json` installs `@types/angular` and several `@types/angular-...`
+packages in support of upgrade; these are not needed for pure Angular development.
+
+## "Template Syntax" explains two-way data binding syntax (2016-10-20)
+
+Demonstrates how to two-way data bind to a custom Angular component and
+re-explains `[(ngModel)]` in terms of the basic `[()]` syntax.
+
+## BREAKING CHANGE: `in-memory-web-api` (v.0.1.11) delivered as esm umd (2016-10-19)
+
+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">change note</a>
+in the `in-memory-web-api` repo.
+
+## "Router" _preload_ syntax and _:enter_/_:leave_ animations (2016-10-19)
+
+The router can lazily _preload_ modules _after_ the app starts and
+_before_ the user navigates to them for improved perceived performance.
+
+New `:enter` and `:leave` aliases make animation more natural.
+
+## Sync with Angular v.2.1.0 (2016-10-12)
+
+Docs and code samples updated and tested with Angular v.2.1.0.
+
+## NEW "Ahead of time (AOT) Compilation" guide (2016-10-11)
+
+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.
+
+## Sync with Angular v.2.0.2 (2016-10-6)
+
+Docs and code samples updated and tested with Angular v.2.0.2.
+
+## "Routing and Navigation" guide with the _Router Module_ (2016-10-5)
+
+The [Routing and Navigation](guide/router) guide now locates route configuration
+in a _Routing Module_.
+The _Routing Module_ replaces the previous _routing object_ involving the `ModuleWithProviders`.
+
+All guided samples with routing use the _Routing Module_ and prose content has been updated,
+most conspicuously in the
+[NgModule](guide/ngmodules) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
+
+## New "Internationalization" guide (2016-09-30)
+
+Added a new [Internationalization (i18n)](guide/i18n) guide that shows how
+to use Angular "i18n" facilities to translate template text into multiple languages.
+
+## "angular-in-memory-web-api" package rename (2016-09-27)
+
+Many samples use the `angular-in-memory-web-api` to simulate a remote server.
+This library is also useful to you during early development before you have a server to talk to.
+
+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">Read about them on github</a>.
+
+## "Style Guide" with _NgModules_ (2016-09-27)
+
+[StyleGuide](guide/styleguide) explains recommended conventions for NgModules.
+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.
+
+## _moduleId: module.id_ everywhere (2016-09-25)
+
+Sample components that get their templates or styles with `templateUrl` or `styleUrls`
+have been converted to _module-relative_ URLs.
+Added the `moduleId: module.id` property-and-value to their `@Component` metadata.
+
+This change is a requirement for compilation with AOT compiler when the app loads
+modules with SystemJS as the samples currently do.
+
+## "Lifecycle Hooks" guide simplified (2016-09-24)
+
+The [Lifecycle Hooks](guide/lifecycle-hooks) guide is shorter, simpler, and
+draws more attention to the order in which Angular calls the hooks.
diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md
new file mode 100644
index 000000000000..cc38613cc6b5
--- /dev/null
+++ b/aio/content/guide/cheatsheet.md
@@ -0,0 +1,395 @@
+<h1 class="no-toc">Cheat Sheet</h1>
+
+<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>
+</p>
+</th>
+</tr>
+<tr>
+<td><code><b>platformBrowserDynamic().bootstrapModule</b>(AppModule);</code></td>
+<td><p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p>
+</td>
+</tr>
+</tbody></table>
+
+<table class="is-full-width is-fixed-layout">
+<tbody><tr>
+<th>NgModules</th>
+<th><p><code>import { NgModule } from '@angular/core';</code>
+</p>
+</th>
+</tr>
+<tr>
+<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> [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> [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> [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> [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>entryComponents:</b> [SomeComponent, OtherComponent]</code></td>
+<td><p>List of components not referenced in any reachable template, for example dynamically created from code.</p></td>
+</tr><tr>
+<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 class="is-full-width is-fixed-layout">
+<tbody><tr>
+<th>Template syntax</th>
+<th></th>
+</tr>
+<tr>
+<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 <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 <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 <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 <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 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 <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 <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 <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 <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;ng-template [myUnless]="myExpression"&gt;&lt;p&gt;...&lt;/p&gt;&lt;/ng-template&gt;</code></p>
+</td>
+</tr><tr>
+<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: <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 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>  &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 class="is-full-width is-fixed-layout">
+<tbody><tr>
+<th>Built-in directives</th>
+<th><p><code>import { CommonModule } from '@angular/common';</code>
+</p>
+</th>
+</tr>
+<tr>
+<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 <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 <b>[ngSwitch]</b>="conditionExpression"&gt;<br>  &lt;ng-template <b>[<b>ngSwitchCase</b>]</b>="case1Exp"&gt;...&lt;/ng-template&gt;<br>  &lt;ng-template <b>ngSwitchCase</b>="case2LiteralString"&gt;...&lt;/ng-template&gt;<br>  &lt;ng-template <b>ngSwitchDefault</b>&gt;...&lt;/ng-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 <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>
+<tr>
+<td><code>&lt;div <b>[ngStyle]</b>="{'property': 'value'}"&gt;</code><br><code>&lt;div <b>[ngStyle]</b>="dynamicStyles()"&gt;</code></td>
+<td><p>Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.</p>
+</td>
+</tr>
+</tbody></table>
+
+<table class="is-full-width is-fixed-layout">
+<tbody><tr>
+<th>Forms</th>
+<th><p><code>import { FormsModule } from '@angular/forms';</code>
+</p>
+</th>
+</tr>
+<tr>
+<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 class="is-full-width is-fixed-layout">
+<tbody><tr>
+<th>Class decorators</th>
+<th><p><code>import { Directive, ... } from '@angular/core';</code>
+</p>
+</th>
+</tr>
+<tr>
+<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 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 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 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 class="is-full-width is-fixed-layout">
+<tbody><tr>
+<th>Directive configuration</th>
+<th><p><code>@Directive({ property1: value1, ... })</code>
+</p>
+</th>
+</tr>
+<tr>
+<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> [MyService, { provide: ... }]</code></td>
+<td><p>List of dependency injection providers for this directive and its children.</p>
+</td>
+</tr>
+</tbody></table>
+
+<table class="is-full-width is-fixed-layout">
+<tbody><tr>
+<th>Component configuration</th>
+<th><p>
+<code>@Component</code> extends <code>@Directive</code>,
+so the <code>@Directive</code> configuration applies to components as well</p>
+</th>
+</tr>
+<tr>
+<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> [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> '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> ['.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 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>
+</p>
+</th>
+</tr>
+<tr>
+<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> 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> 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', ['$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> 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> 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> 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> 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 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)
+</p>
+</th>
+</tr>
+<tr>
+<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> { ... }</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> { ... }</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> { ... }</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> { ... }</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> { ... }</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> { ... }</code></td>
+<td><p>Called after <code>ngAfterContentInit</code> when the component's views and child views / the view that a directive is in has been initialized.</p>
+</td>
+</tr><tr>
+<td><code><b>ngAfterViewChecked()</b> { ... }</code></td>
+<td><p>Called after every check of the component's views and child views / the view that a directive is in.</p>
+</td>
+</tr><tr>
+<td><code><b>ngOnDestroy()</b> { ... }</code></td>
+<td><p>Called once, before the instance is destroyed.</p>
+</td>
+</tr>
+</tbody></table>
+
+<table class="is-full-width is-fixed-layout">
+<tbody><tr>
+<th>Dependency injection configuration</th>
+<th></th>
+</tr>
+<tr>
+<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>{ <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>{ <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 class="is-full-width is-fixed-layout">
+<tbody><tr>
+<th>Routing and navigation</th>
+<th><p><code>import { Routes, RouterModule, ... } from '@angular/router';</code>
+</p>
+</th>
+</tr>
+<tr>
+<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> 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 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 [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 <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 <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 <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 <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 <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>
diff --git a/aio/content/guide/comparing-observables.md b/aio/content/guide/comparing-observables.md
new file mode 100644
index 000000000000..ba6ab8171f4f
--- /dev/null
+++ b/aio/content/guide/comparing-observables.md
@@ -0,0 +1,319 @@
+# Observables compared to other techniques
+
+You can often use observables instead of promises to deliver values asynchronously. Similarly, observables can take the place of event handlers. Finally, because observables deliver multiple values, you can use them where you might otherwise build and operate on arrays.
+
+Observables behave somewhat differently from the alternative techniques in each of these situations, but offer some significant advantages. Here are detailed comparisons of the differences.
+
+## Observables compared to promises
+
+Observables are often compared to promises. Here are some key differences:
+
+* Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result.
+
+* Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time.
+
+* Observables differentiate between chaining and subscription. Promises only have `.then()` clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed.
+
+* Observables `subscribe()` is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling.
+
+
+### Creation and subscription
+
+* Observables are not executed until a consumer subcribes. The `subscribe()` executes the defined behavior once, and it can be called again. Each subscription has its own computation. Resubscription causes recomputation of values.
+
+<code-example hideCopy>
+// declare a publishing operation
+new Observable((observer) => { subscriber_fn });
+// initiate execution
+observable.subscribe(() => {
+      // observer handles notifications
+    });
+</code-example>
+
+* Promises execute immediately, and just once. The computation of the result is initiated when the promise is created. There is no way to restart work. All `then` clauses (subscriptions) share the same computation.
+
+<code-example hideCopy>
+// initiate execution
+new Promise((resolve, reject) => { executer_fn });
+// handle return value
+promise.then((value) => {
+      // handle result here
+    });
+</code-example>
+
+### Chaining
+
+* Observables differentiate between transformation function such as a map and subscription. Only subscription activates the subscriber function to start computing the values.
+
+
+<code-example hideCopy>observable.map((v) => 2*v);</code-example>
+
+
+* Promises do not differentiate between the last `.then` clauses (equivalent to subscription) and intermediate `.then` clauses (equivalent to map).
+
+
+<code-example hideCopy>promise.then((v) => 2*v);</code-example>
+
+
+### Cancellation
+
+* Observable subscriptions are cancellable. Unsubscribing removes the listener from receiving further values, and notifies the subscriber function to cancel work.
+
+<code-example hideCopy>
+const sub = obs.subscribe(...);
+sub.unsubscribe();
+</code-example>
+
+* Promises are not cancellable.
+
+### Error handling
+
+* Observable execution errors are delivered to the subscriber's error handler, and the subscriber automatically unsubscribes from the observable.
+
+<code-example hideCopy>
+obs.subscribe(() => {
+  throw Error('my error');
+});
+</code-example>
+
+* Promises push errors to the child promises.
+
+<code-example hideCopy>
+promise.then(() => {
+      throw Error('my error');
+});
+</code-example>
+
+### Cheat sheet
+
+The following code snippets illustrate how the same kind of operation is defined using observables and promises.
+
+<table>
+  <thead>
+    <tr>
+      <th>Operation</th>
+      <th>Observable</th>
+      <th>Promise</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Creation</td>
+      <td>
+        <pre>new Observable((observer) => {
+    observer.next(123);
+  });</pre>
+      </td>
+      <td>
+        <pre>new Promise((resolve, reject) => {
+    resolve(123);
+  });</pre>
+      </td>
+    </tr>
+    <tr>
+      <td>Transform</td>
+      <td><pre>obs.map((value) => value * 2 );</pre></td>
+      <td><pre>promise.then((value) => value * 2);</pre></td>
+    </tr>
+    <tr>
+      <td>Subscribe</td>
+      <td>
+        <pre>sub = obs.subscribe((value) => {
+    console.log(value)
+  });</pre>
+      </td>
+      <td>
+        <pre>promise.then((value) => {
+    console.log(value);
+  });</pre>
+      </td>
+    </tr>
+    <tr>
+      <td>Unsubscribe</td>
+      <td><pre>sub.unsubscribe();</pre></td>
+      <td>Implied by promise resolution.</td>
+    </tr>
+  </tbody>
+</table>
+
+## Observables compared to events API
+
+Observables are very similar to event handlers that use the events API. Both techniques define notification handlers, and use them to process multiple values delivered over time. Subscribing to an observable is equivalent to adding an event listener. One significant difference is that you can configure an observable to transform an event before passing the event to the handler.
+
+Using observables to handle events and asynchronous operations can have the advantage of greater consistency in contexts such as HTTP requests.
+
+Here are some code samples that illustrate how the same kind of operation is defined using observables and the events API.
+
+<table>
+  <tr>
+    <th></th>
+    <th>Observable</th>
+    <th>Events API</th>
+  </tr>
+  <tr>
+    <td>Creation & cancellation</td>
+    <td>
+<pre>// Setup
+let clicks$ = fromEvent(buttonEl, ‘click’);
+// Begin listening
+let subscription = clicks$
+  .subscribe(e => console.log(‘Clicked’, e))
+// Stop listening
+subscription.unsubscribe();</pre>
+   </td>
+   <td>
+<pre>function handler(e) {
+  console.log(‘Clicked’, e);
+}
+
+// Setup & begin listening
+button.addEventListener(‘click’, handler);
+// Stop listening
+button.removeEventListener(‘click’, handler);
+</pre>
+    </td>
+  </tr>
+  <tr>
+    <td>Subscription</td>
+    <td>
+<pre>observable.subscribe(() => {
+  // notification handlers here
+});</pre>
+    </td>
+    <td>
+<pre>element.addEventListener(eventName, (event) => {
+  // notification handler here
+});</pre>
+    </td>
+  </tr>
+  <tr>
+    <td>Configuration</td>
+    <td>Listen for keystrokes, but provide a stream representing the value in the input.
+<pre>fromEvent(inputEl, 'keydown').pipe(
+  map(e => e.target.value)
+);</pre>
+    </td>
+    <td>Does not support configuration.
+<pre>element.addEventListener(eventName, (event) => {
+  // Cannot change the passed Event into another
+  // value before it gets to the handler
+});</pre>
+    </td>
+  </tr>
+</table>
+
+
+## Observables compared to arrays
+
+An observable produces values over time. An array is created as a static set of values. In a sense, observables are asynchronous where arrays are synchronous. In the following examples, ➞ implies asynchronous value delivery.
+
+<table>
+  <tr>
+    <th></th>
+    <th>Observable</th>
+    <th>Array</th>
+  </tr>
+  <tr>
+    <td>Given</td>
+    <td>
+      <pre>obs: ➞1➞2➞3➞5➞7</pre>
+      <pre>obsB: ➞'a'➞'b'➞'c'</pre>
+    </td>
+    <td>
+      <pre>arr: [1, 2, 3, 5, 7]</pre>
+      <pre>arrB: ['a', 'b', 'c']</pre>
+    </td>
+  </tr>
+  <tr>
+    <td><pre>concat()</pre></td>
+    <td>
+      <pre>obs.concat(obsB)</pre>
+      <pre>➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'</pre>
+    </td>
+    <td>
+      <pre>arr.concat(arrB)</pre>
+      <pre>[1,2,3,5,7,'a','b','c']</pre>
+    </td>
+  </tr>
+  <tr>
+    <td><pre>filter()</pre></td>
+    <td>
+      <pre>obs.filter((v) => v>3)</pre>
+      <pre>➞5➞7</pre>
+    </td>
+    <td>
+      <pre>arr.filter((v) => v>3)</pre>
+      <pre>[5, 7]</pre>
+    </td>
+  </tr>
+  <tr>
+    <td><pre>find()</pre></td>
+    <td>
+      <pre>obs.find((v) => v>3)</pre>
+      <pre>➞5</pre>
+    </td>
+    <td>
+      <pre>arr.find((v) => v>3)</pre>
+      <pre>5</pre>
+    </td>
+  </tr>
+  <tr>
+    <td><pre>findIndex()</pre></td>
+    <td>
+      <pre>obs.findIndex((v) => v>3)</pre>
+      <pre>➞3</pre>
+    </td>
+    <td>
+      <pre>arr.findIndex((v) => v>3)</pre>
+      <pre>3</pre>
+    </td>
+  </tr>
+  <tr>
+    <td><pre>forEach()</pre></td>
+    <td>
+      <pre>obs.forEach((v) => {
+  console.log(v);
+})
+1
+2
+3
+5
+7</pre>
+    </td>
+    <td>
+      <pre>arr.forEach((v) => {
+  console.log(v);
+})
+1
+2
+3
+5
+7</pre>
+    </td>
+  </tr>
+  <tr>
+    <td><pre>map()</pre></td>
+    <td>
+      <pre>obs.map((v) => -v)</pre>
+      <pre>➞-1➞-2➞-3➞-5➞-7</pre>
+    </td>
+    <td>
+      <pre>arr.map((v) => -v)</pre>
+      <pre>[-1, -2, -3, -5, -7]</pre>
+    </td>
+  </tr>
+  <tr>
+    <td><pre>reduce()</pre></td>
+    <td>
+      <pre>obs.scan((s,v)=> s+v, 0)</pre>
+      <pre>➞1➞3➞6➞11➞18</pre>
+    </td>
+    <td>
+      <pre>arr.reduce((s,v) => s+v, 0)</pre>
+      <pre>18</pre>
+    </td>
+  </tr>
+</table>
+
+
+
diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md
new file mode 100644
index 000000000000..fd0ef1c53e0f
--- /dev/null
+++ b/aio/content/guide/component-interaction.md
@@ -0,0 +1,442 @@
+# Component Interaction
+
+{@a top}
+
+This cookbook contains recipes for common component communication scenarios
+in which two or more components share information.
+{@a toc}
+
+<!--
+
+# Contents
+
+* [Pass data from parent to child with input binding](guide/component-interaction#parent-to-child)
+* [Intercept input property changes with a setter](guide/component-interaction#parent-to-child-setter)
+* [Intercept input property changes with `ngOnChanges()`](guide/component-interaction#parent-to-child-on-changes)
+* [Parent calls an `@ViewChild()`](guide/component-interaction#parent-to-view-child)
+* [Parent and children communicate via a service](guide/component-interaction#bidirectional-service)
+
+-->
+
+**See the <live-example name="component-interaction"></live-example>**.
+
+{@a parent-to-child}
+
+## Pass data from parent to child with input binding
+
+`HeroChildComponent` has two ***input properties***,
+typically adorned with [@Input decorations](guide/template-syntax#inputs-outputs).
+
+
+<code-example path="component-interaction/src/app/hero-child.component.ts" title="component-interaction/src/app/hero-child.component.ts">
+
+</code-example>
+
+
+
+The second `@Input` aliases the child component property name `masterName` as `'master'`.
+
+The `HeroParentComponent` nests the child `HeroChildComponent` inside an `*ngFor` repeater,
+binding its `master` string property to the child's `master` alias,
+and each iteration's `hero` instance to the child's `hero` property.
+
+
+<code-example path="component-interaction/src/app/hero-parent.component.ts" title="component-interaction/src/app/hero-parent.component.ts">
+
+</code-example>
+
+
+
+The running application displays three heroes:
+
+
+<figure>
+  <img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
+</figure>
+
+
+
+<h3 class="no-toc">Test it</h3>
+
+E2E test that all children were instantiated and displayed as expected:
+
+
+<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="parent-to-child" title="component-interaction/e2e/src/app.e2e-spec.ts">
+
+</code-example>
+
+
+
+[Back to top](guide/component-interaction#top)
+
+{@a parent-to-child-setter}
+
+## Intercept input property changes with a setter
+
+Use an input property setter to intercept and act upon a value from the parent.
+
+The setter of the `name` input property in the child `NameChildComponent`
+trims the whitespace from a name and replaces an empty value with default text.
+
+
+<code-example path="component-interaction/src/app/name-child.component.ts" title="component-interaction/src/app/name-child.component.ts">
+
+</code-example>
+
+
+
+Here's the `NameParentComponent` demonstrating name variations including a name with all spaces:
+
+
+<code-example path="component-interaction/src/app/name-parent.component.ts" title="component-interaction/src/app/name-parent.component.ts">
+
+</code-example>
+
+
+
+<figure>
+  <img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
+</figure>
+
+
+
+<h3 class="no-toc">Test it</h3>
+
+E2E tests of input property setter with empty and non-empty names:
+
+
+<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="parent-to-child-setter" title="component-interaction/e2e/src/app.e2e-spec.ts">
+
+</code-example>
+
+
+
+[Back to top](guide/component-interaction#top)
+
+{@a parent-to-child-on-changes}
+
+## Intercept input property changes with *ngOnChanges()*
+
+Detect and act upon changes to input property values with the `ngOnChanges()` method of the `OnChanges` lifecycle hook interface.
+
+<div class="alert is-helpful">
+
+
+
+You may prefer this approach to the property setter when watching multiple, interacting input properties.
+
+Learn about `ngOnChanges()` in the [LifeCycle Hooks](guide/lifecycle-hooks) chapter.
+
+</div>
+
+
+
+This `VersionChildComponent` detects changes to the `major` and `minor` input properties and composes a log message reporting these changes:
+
+
+<code-example path="component-interaction/src/app/version-child.component.ts" title="component-interaction/src/app/version-child.component.ts">
+
+</code-example>
+
+
+
+The `VersionParentComponent` supplies the `minor` and `major` values and binds buttons to methods that change them.
+
+
+<code-example path="component-interaction/src/app/version-parent.component.ts" title="component-interaction/src/app/version-parent.component.ts">
+
+</code-example>
+
+
+
+Here's the output of a button-pushing sequence:
+
+
+<figure>
+  <img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
+</figure>
+
+
+
+<h3 class="no-toc">Test it</h3>
+
+Test that ***both*** input properties are set initially and that button clicks trigger
+the expected `ngOnChanges` calls and values:
+
+
+<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="parent-to-child-onchanges" title="component-interaction/e2e/src/app.e2e-spec.ts">
+
+</code-example>
+
+
+
+[Back to top](guide/component-interaction#top)
+
+{@a child-to-parent}
+
+## Parent listens for child event
+
+The child component exposes an `EventEmitter` property with which it `emits` events when something happens.
+The parent binds to that event property and reacts to those events.
+
+The child's `EventEmitter` property is an ***output property***,
+  typically adorned with an [@Output decoration](guide/template-syntax#inputs-outputs)
+  as seen in this `VoterComponent`:
+
+
+<code-example path="component-interaction/src/app/voter.component.ts" title="component-interaction/src/app/voter.component.ts">
+
+</code-example>
+
+
+
+Clicking a button triggers emission of a `true` or `false`, the boolean *payload*.
+
+The parent `VoteTakerComponent` binds an event handler called `onVoted()` that responds to the child event
+payload `$event` and updates a counter.
+
+
+<code-example path="component-interaction/src/app/votetaker.component.ts" title="component-interaction/src/app/votetaker.component.ts">
+
+</code-example>
+
+
+
+The framework passes the event argument&mdash;represented by `$event`&mdash;to the handler method,
+and the method processes it:
+
+
+<figure>
+  <img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
+</figure>
+
+
+
+<h3 class="no-toc">Test it</h3>
+
+Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters:
+
+
+<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="child-to-parent" title="component-interaction/e2e/src/app.e2e-spec.ts">
+
+</code-example>
+
+
+
+[Back to top](guide/component-interaction#top)
+
+
+
+## Parent interacts with child via *local variable*
+
+A parent component cannot use data binding to read child properties
+or invoke child methods. You can do both
+by creating a template reference variable for the child element
+and then reference that variable *within the parent template*
+as seen in the following example.
+
+{@a countdown-timer-example}
+The following is a child `CountdownTimerComponent` that repeatedly counts down to zero and launches a rocket.
+It has `start` and `stop` methods that control the clock and it displays a
+countdown status message in its own template.
+
+<code-example path="component-interaction/src/app/countdown-timer.component.ts" title="component-interaction/src/app/countdown-timer.component.ts">
+
+</code-example>
+
+
+
+The `CountdownLocalVarParentComponent` that hosts the timer component is as follows:
+
+
+<code-example path="component-interaction/src/app/countdown-parent.component.ts" region="lv" title="component-interaction/src/app/countdown-parent.component.ts">
+
+</code-example>
+
+
+
+The parent component cannot data bind to the child's
+`start` and `stop` methods nor to its `seconds` property.
+
+You can place a local variable, `#timer`, on the tag `<countdown-timer>` representing the child component.
+That gives you a reference to the child component and the ability to access
+*any of its properties or methods* from within the parent template.
+
+This example wires parent buttons to the child's `start` and `stop` and
+uses interpolation to display the child's `seconds` property.
+
+Here we see the parent and child working together.
+
+
+<figure>
+  <img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
+</figure>
+
+
+
+{@a countdown-tests}
+
+
+<h3 class="no-toc">Test it</h3>
+
+Test that the seconds displayed in the parent template
+match the seconds displayed in the child's status message.
+Test also that clicking the *Stop* button pauses the countdown timer:
+
+
+<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="countdown-timer-tests" title="component-interaction/e2e/src/app.e2e-spec.ts">
+
+</code-example>
+
+
+
+[Back to top](guide/component-interaction#top)
+
+{@a parent-to-view-child}
+
+## Parent calls an _@ViewChild()_
+
+The *local variable* approach is simple and easy. But it is limited because
+the parent-child wiring must be done entirely within the parent template.
+The parent component *itself* has no access to the child.
+
+You can't use the *local variable* technique if an instance of the parent component *class*
+must read or write child component values or must call child component methods.
+
+When the parent component *class* requires that kind of access,
+***inject*** the child component into the parent as a *ViewChild*.
+
+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-interaction#countdown-timer-example) is the same as well.
+
+<div class="alert is-helpful">
+
+
+
+The switch from the *local variable* to the *ViewChild* technique
+is solely for the purpose of demonstration.
+
+</div>
+
+
+
+Here is the parent, `CountdownViewChildParentComponent`:
+
+<code-example path="component-interaction/src/app/countdown-parent.component.ts" region="vc" title="component-interaction/src/app/countdown-parent.component.ts">
+
+</code-example>
+
+
+
+It takes a bit more work to get the child view into the parent component *class*.
+
+First, you have to import references to the `ViewChild` decorator and the `AfterViewInit` lifecycle hook.
+
+Next, inject the child `CountdownTimerComponent` into the private `timerComponent` property
+via the `@ViewChild` property decoration.
+
+The `#timer` local variable is gone from the component metadata.
+Instead, bind the buttons to the parent component's own `start` and `stop` methods and
+present the ticking seconds in an interpolation around the parent component's `seconds` method.
+
+These methods access the injected timer component directly.
+
+The `ngAfterViewInit()` lifecycle hook is an important wrinkle.
+The timer component isn't available until *after* Angular displays the parent view.
+So it displays `0` seconds initially.
+
+Then Angular calls the `ngAfterViewInit` lifecycle hook at which time it is *too late*
+to update the parent view's display of the countdown seconds.
+Angular's unidirectional data flow rule prevents updating the parent view's
+in the same cycle. The app has to *wait one turn* before it can display the seconds.
+
+Use `setTimeout()` to wait one tick and then revise the `seconds()` method so
+that it takes future values from the timer component.
+
+<h3 class="no-toc">Test it</h3>
+
+Use [the same countdown timer tests](guide/component-interaction#countdown-tests) as before.
+
+[Back to top](guide/component-interaction#top)
+
+{@a bidirectional-service}
+
+## Parent and children communicate via a service
+
+A parent component and its children share a service whose interface enables bi-directional communication
+*within the family*.
+
+The scope of the service instance is the parent component and its children.
+Components outside this component subtree have no access to the service or their communications.
+
+This `MissionService` connects the `MissionControlComponent` to multiple `AstronautComponent` children.
+
+
+<code-example path="component-interaction/src/app/mission.service.ts" title="component-interaction/src/app/mission.service.ts">
+
+</code-example>
+
+
+
+The `MissionControlComponent` both provides the instance of the service that it shares with its children
+(through the `providers` metadata array) and injects that instance into itself through its constructor:
+
+
+<code-example path="component-interaction/src/app/missioncontrol.component.ts" title="component-interaction/src/app/missioncontrol.component.ts">
+
+</code-example>
+
+
+
+The `AstronautComponent` also injects the service in its constructor.
+Each `AstronautComponent` is a child of the `MissionControlComponent` and therefore receives its parent's service instance:
+
+
+<code-example path="component-interaction/src/app/astronaut.component.ts" title="component-interaction/src/app/astronaut.component.ts">
+
+</code-example>
+
+
+
+<div class="alert is-helpful">
+
+
+
+Notice that this example captures the `subscription` and `unsubscribe()` when the `AstronautComponent` is destroyed.
+This is a memory-leak guard step. There is no actual risk in this app because the
+lifetime of a `AstronautComponent` is the same as the lifetime of the app itself.
+That *would not* always be true in a more complex application.
+
+You don't add this guard to the `MissionControlComponent` because, as the parent,
+it controls the lifetime of the `MissionService`.
+
+</div>
+
+
+
+The *History* log demonstrates that messages travel in both directions between
+the parent `MissionControlComponent` and the `AstronautComponent` children,
+facilitated by the service:
+
+
+<figure>
+  <img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
+</figure>
+
+
+
+<h3 class="no-toc">Test it</h3>
+
+Tests click buttons of both the parent `MissionControlComponent` and the `AstronautComponent` children
+and verify that the history meets expectations:
+
+
+<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="bidirectional-service" title="component-interaction/e2e/src/app.e2e-spec.ts">
+
+</code-example>
+
+
+
+[Back to top](guide/component-interaction#top)
diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
new file mode 100644
index 000000000000..a5ae119cbae8
--- /dev/null
+++ b/aio/content/guide/component-styles.md
@@ -0,0 +1,356 @@
+# 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
+directly to Angular applications.
+
+Additionally, Angular can bundle *component styles*
+with components, enabling a more modular design than regular stylesheets.
+
+This page describes how to load and apply these component styles.
+
+You can run the <live-example></live-example> in Stackblitz and download the code from there.
+
+## Using component styles
+
+For every Angular component you write, you may define not only an HTML template,
+but also the CSS styles that go with that template,
+specifying any selectors, rules, and media queries that you need.
+
+One way to do this is to set the `styles` property in the component metadata.
+The `styles` property takes an array of strings that contain CSS code.
+Usually you give it one string, as in the following example:
+
+<code-example path="component-styles/src/app/hero-app.component.ts" title="src/app/hero-app.component.ts" linenums="false">
+</code-example>
+
+## Style scope
+
+<div class="alert is-critical">
+
+The styles specified in `@Component` metadata _apply only within the template of that component_.
+
+</div>
+
+They are _not inherited_ by any components nested within the template nor by any content projected into the component.
+
+In this example, the `h1` style applies only to the `HeroAppComponent`,
+not to the nested `HeroMainComponent` nor to `<h1>` tags anywhere else in the application.
+
+This scoping restriction is a ***styling modularity feature***.
+
+* You can use the CSS class names and selectors that make the most sense in the context of each component.
+
+
+* Class names and selectors are local to the component and don't collide with
+  classes and selectors used elsewhere in the application.
+
+
+* Changes to styles elsewhere in the application don't affect the component's styles.
+
+
+* You can co-locate the CSS code of each component with the TypeScript and HTML code of the component,
+  which leads to a neat and tidy project structure.
+
+
+* You can change or remove component CSS code without searching through the
+  whole application to find where else the code is used.
+
+{@a special-selectors}
+
+## Special selectors
+
+Component styles have a few special *selectors* from the world of shadow DOM style scoping
+(described in the [CSS Scoping Module Level 1](https://www.w3.org/TR/css-scoping-1) page on the
+[W3C](https://www.w3.org) site).
+The following sections describe these selectors.
+
+### :host
+
+Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to
+targeting elements *inside* the component's template).
+
+
+<code-example path="component-styles/src/app/hero-details.component.css" region="host" title="src/app/hero-details.component.css" linenums="false">
+</code-example>
+
+The `:host` selector is the only way to target the host element. You can't reach
+the host element from inside the component with other selectors because it's not part of the
+component's own template. The host element is in a parent component's template.
+
+Use the *function form* to apply host styles conditionally by
+including another selector inside parentheses after `:host`.
+
+The next example targets the host element again, but only when it also has the `active` CSS class.
+
+<code-example path="component-styles/src/app/hero-details.component.css" region="hostfunction" title="src/app/hero-details.component.css" linenums="false">
+</code-example>
+
+### :host-context
+
+Sometimes it's useful to apply styles based on some condition *outside* of a component's view.
+For example, a CSS theme class could be applied to the document `<body>` element, and
+you want to change how your component looks based on that.
+
+Use the `:host-context()` pseudo-class selector, which works just like the function
+form of `:host()`. The `:host-context()` selector looks for a CSS class in any ancestor of the component host element,
+up to the document root. The `:host-context()` selector is useful when combined with another selector.
+
+The following example applies a `background-color` style to all `<h2>` elements *inside* the component, only
+if some ancestor element has the CSS class `theme-light`.
+
+<code-example path="component-styles/src/app/hero-details.component.css" region="hostcontext" title="src/app/hero-details.component.css" linenums="false">
+</code-example>
+
+### (deprecated) `/deep/`, `>>>`, and `::ng-deep`
+
+Component styles normally apply only to the HTML in the component's own template.
+
+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.
+
+The following example targets all `<h3>` elements, from the host element down
+through this component to all of its child elements in the DOM.
+
+<code-example path="component-styles/src/app/hero-details.component.css" region="deep" title="src/app/hero-details.component.css" linenums="false">
+
+</code-example>
+
+The `/deep/` combinator also has the aliases `>>>`, and `::ng-deep`.
+
+<div class="alert is-important">
+
+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.
+
+</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 component styles
+
+There are several ways to add styles to a component:
+
+* By setting `styles` or `styleUrls` metadata.
+* Inline in the template HTML.
+* With CSS imports.
+
+The scoping rules outlined earlier apply to each of these loading patterns.
+
+### Styles in component metadata
+
+You can add a `styles` array property to the `@Component` decorator.
+
+Each string in the array defines some CSS for this component.
+
+<code-example path="component-styles/src/app/hero-app.component.ts" title="src/app/hero-app.component.ts (CSS inline)">
+</code-example>
+
+<div class="alert is-critical">
+
+Reminder: these styles apply _only to this component_.
+They are _not inherited_ by any components nested within the template nor by any content projected into the component.
+
+</div>
+
+The CLI defines an empty `styles` array when you create the component with the `--inline-style` flag.
+
+<code-example language="sh" class="code-shell">
+ng generate component hero-app --inline-style
+</code-example>
+
+### Style files in component metadata
+
+You can load styles from external CSS files by adding a `styleUrls` property
+to a component's `@Component` decorator:
+
+<code-tabs>
+  <code-pane title="src/app/hero-app.component.ts (CSS in file)" path="component-styles/src/app/hero-app.component.1.ts"></code-pane>
+  <code-pane title="src/app/hero-app.component.css" path="component-styles/src/app/hero-app.component.css"></code-pane>
+</code-tabs>
+
+<div class="alert is-critical">
+
+Reminder: the styles in the style file apply _only to this component_.
+They are _not inherited_ by any components nested within the template nor by any content projected into the component.
+
+</div>
+
+<div class="alert is-helpful">
+
+  You can specify more than one styles file or even a combination of `styles` and `styleUrls`.
+
+</div>
+
+The CLI creates an empty styles file for you by default and references that file in the component's generated `styleUrls`.
+
+<code-example language="sh" class="code-shell">
+ng generate component hero-app
+</code-example>
+
+### Template inline styles
+
+You can embed CSS styles directly into the HTML template by putting them
+inside `<style>` tags.
+
+<code-example path="component-styles/src/app/hero-controls.component.ts" region="inlinestyles" title="src/app/hero-controls.component.ts">
+</code-example>
+
+### Template link tags
+
+You can also write `<link>` tags into the component's HTML template.
+
+<code-example path="component-styles/src/app/hero-team.component.ts" region="stylelink" title="src/app/hero-team.component.ts">
+</code-example>
+
+<div class="alert is-critical">
+
+When building with the CLI, be sure to include the linked style file among the assets to be copied to the server as described in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-asset-configuration).
+
+Once included, the CLI will include the stylesheet, whether the link tag's href URL is relative to the application root or the component file.
+
+</div>
+
+### CSS @imports
+
+You can also import CSS files into the CSS files using the standard CSS `@import` rule.
+For details, see [`@import`](https://developer.mozilla.org/en/docs/Web/CSS/@import)
+on the [MDN](https://developer.mozilla.org) site.
+
+In this case, the URL is relative to the CSS file into which you're importing.
+
+<code-example path="component-styles/src/app/hero-details.component.css" region="import" title="src/app/hero-details.component.css (excerpt)">
+</code-example>
+
+### External and global style files
+
+When building with the CLI, you must configure the `angular.json` to include _all external assets_, including external style files.
+
+Register **global** style files in the `styles` section which, by default, is pre-configured with the global `styles.css` file.
+
+See the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-global-styles) to learn more.
+
+### Non-CSS style files
+
+If you're building with the CLI,
+you can write style files in [sass](http://sass-lang.com/), [less](http://lesscss.org/), or [stylus](http://stylus-lang.com/) and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`, `.styl`) as in the following example:
+
+<code-example>
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+...
+</code-example>
+
+The CLI build process runs the pertinent CSS preprocessor.
+
+When generating a component file with `ng generate component`, the CLI emits an empty CSS styles file (`.css`) by default.
+You can configure the CLI to default to your preferred CSS preprocessor
+as explained in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
+"CSS Preprocessor integration").
+
+<div class="alert is-important">
+
+Style strings added to the `@Component.styles` array _must be written in CSS_ because the CLI cannot apply a preprocessor to inline styles.
+
+</div>
+
+{@a view-encapsulation}
+
+## View encapsulation
+
+As discussed earlier, component CSS styles are encapsulated into the component's view and don't
+affect the rest of the application.
+
+To control how this encapsulation happens on a *per
+component* basis, you can set the *view encapsulation mode* in the component metadata.
+Choose from the following modes:
+
+* `ShadowDom` view encapsulation uses the browser's native shadow DOM implementation (see
+  [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
+  on the [MDN](https://developer.mozilla.org) site)
+  to attach a shadow DOM to the component's host element, and then puts the component
+  view inside that shadow DOM. The component's styles are included within the shadow DOM.
+
+* `Native` view encapsulation uses a now deprecated version of the browser's native shadow DOM implementation - [learn about the changes](https://hayato.io/2016/shadowdomv1/).
+
+* `Emulated` view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing
+  (and renaming) the CSS code to effectively scope the CSS to the component's view.
+  For details, see [Appendix 1](guide/component-styles#inspect-generated-css).
+
+* `None` means that Angular does no view encapsulation.
+  Angular adds the CSS to the global styles.
+  The scoping rules, isolations, and protections discussed earlier don't apply.
+  This is essentially the same as pasting the component's styles into the HTML.
+
+To set the components encapsulation mode, use the `encapsulation` property in the component metadata:
+
+<code-example path="component-styles/src/app/quest-summary.component.ts" region="encapsulation.native" title="src/app/quest-summary.component.ts" linenums="false">
+</code-example>
+
+`ShadowDom` view encapsulation only works on browsers that have native support
+for shadow DOM (see [Shadow DOM v1](https://caniuse.com/#feat=shadowdomv1) on the
+[Can I use](http://caniuse.com) site). The support is still limited,
+which is why `Emulated` view encapsulation is the default mode and recommended
+in most cases.
+
+{@a inspect-generated-css}
+
+## Inspecting generated CSS
+
+When using emulated view encapsulation, Angular preprocesses
+all component styles so that they approximate the standard shadow CSS scoping rules.
+
+In the DOM of a running Angular application with emulated view
+encapsulation enabled, each DOM element has some extra attributes
+attached to it:
+
+<code-example format="">
+  &lt;hero-details _nghost-pmm-5>
+    &lt;h2 _ngcontent-pmm-5>Mister Fantastic&lt;/h2>
+    &lt;hero-team _ngcontent-pmm-5 _nghost-pmm-6>
+      &lt;h3 _ngcontent-pmm-6>Team&lt;/h3>
+    &lt;/hero-team>
+  &lt;/hero-detail>
+
+</code-example>
+
+There are two kinds of generated attributes:
+
+* An element that would be a shadow DOM host in native encapsulation has a
+  generated `_nghost` attribute. This is typically the case for component host elements.
+* An element within a component's view has a `_ngcontent` attribute
+that identifies to which host's emulated shadow DOM this element belongs.
+
+The exact values of these attributes aren't important. They are automatically
+generated and you never refer to them in application code. But they are targeted
+by the generated component styles, which are in the `<head>` section of the DOM:
+
+<code-example format="">
+  [_nghost-pmm-5] {
+    display: block;
+    border: 1px solid black;
+  }
+
+  h3[_ngcontent-pmm-6] {
+    background-color: white;
+    border: 1px solid #777;
+  }
+</code-example>
+
+These styles are post-processed so that each selector is augmented
+with `_nghost` or `_ngcontent` attribute selectors.
+These extra selectors enable the scoping rules described in this page.
diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md
new file mode 100644
index 000000000000..8d1c222a05bf
--- /dev/null
+++ b/aio/content/guide/dependency-injection-in-action.md
@@ -0,0 +1,1260 @@
+# Dependency Injection
+
+
+Dependency Injection is a powerful pattern for managing code dependencies.
+This cookbook explores many of the features of Dependency Injection (DI) in Angular.
+{@a toc}
+
+See the <live-example name="dependency-injection-in-action"></live-example>
+of the code in this cookbook.
+
+{@a app-wide-dependencies}
+
+## Application-wide dependencies
+Register providers for dependencies used throughout the application 
+in the `@Injectable()` decorator of the service itself. 
+
+<code-example path="dependency-injection/src/app/heroes/hero.service.3.ts" title="src/app/heroes/hero.service.3.ts" linenums="false">
+</code-example>
+
+`providedIn` here tells Angular that the root injector is responsible for creating an instance of the `HeroService`.
+Services that are provided this way are automatically made available to the entire 
+application and don't need to be listed in any module.
+
+
+Service classes can act as their own providers which is why defining them in the `@Injectable` decorator
+is all the registration you need.
+
+<div class="alert is-helpful">
+
+
+
+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#register-providers-ngmodule)
+guide.
+
+</div>
+
+
+Now that you've registered these services,
+Angular can inject them into the constructor of *any* component or service, *anywhere* in the application.
+
+
+{@a external-module-configuration}
+
+
+## External module configuration
+If a provider cannot be configured in the `@Injectable` decorator of the service, then register application-wide providers in the root `AppModule`, not in the `AppComponent`. Generally, register providers in the `NgModule` rather than in the root application component.
+
+Do this when users should explicitly opt-in to use a service, or the service should be 
+provided in a lazily-loaded context, 
+or when you are configuring another application global service _before the application starts_.
+
+Here is an example of the case where the component router configuration includes a non-default
+[location strategy](guide/router#location-strategy) by listing its provider
+in the `providers` list of the `AppModule`.
+
+
+<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>
+
+
+
+{@a injectable}
+
+
+{@a nested-dependencies}
+
+
+
+## _@Injectable()_ and nested service dependencies
+The consumer of an injected service does not know how to create that service.
+It shouldn't care.
+It's the dependency injection's job to create and cache that service.
+
+Sometimes a service depends on other services, which may depend on yet other services.
+Resolving these nested dependencies in the correct order is also the framework's job.
+At each step, the consumer of dependencies simply declares what it requires in its
+constructor and the framework takes over.
+
+The following example shows injecting both the `LoggerService` and the `UserContext` in the `AppComponent`.
+
+<code-example path="dependency-injection-in-action/src/app/app.component.ts" region="ctor" title="src/app/app.component.ts" linenums="false">
+
+</code-example>
+
+
+
+The `UserContext` in turn has its own dependencies on both the `LoggerService` and
+a `UserService` that gathers information about a particular user.
+
+
+<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>
+
+
+
+When Angular creates the `AppComponent`, the dependency injection framework creates an instance of the `LoggerService` and
+starts to create the `UserContextService`.
+The `UserContextService` needs the `LoggerService`, which the framework already has, and the `UserService`, which it has yet to create.
+The `UserService` has no dependencies so the dependency injection framework can just
+use `new` to instantiate one.
+
+The beauty of dependency injection is that `AppComponent` doesn't care about any of this.
+You simply declare what is needed in the constructor (`LoggerService` and `UserContextService`)
+and the framework does the rest.
+
+Once all the dependencies are in place, the `AppComponent` displays the user information:
+
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
+</figure>
+
+
+
+{@a injectable-1}
+
+
+### *@Injectable()*
+Notice the `@Injectable()`decorator on the `UserContextService` class.
+
+<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>
+
+
+The `@Injectable` decorator indicates that the Angular DI system is used to create one or more instances of `UserContextService`.
+
+{@a service-scope}
+
+
+## Limit service scope to a component subtree
+
+All injected service dependencies are singletons meaning that,
+for a given dependency injector, there is only one instance of service.
+
+But an Angular application has multiple dependency injectors, arranged in a tree hierarchy that parallels the component tree.
+So a particular service can be *provided* and created at any component level and multiple times
+if provided in multiple components.
+
+By default, a service dependency provided in one component is visible to all of its child components and
+Angular injects the same service instance into all child components that ask for that service.
+
+Accordingly, dependencies provided in the root `AppComponent` can be injected into *any* component *anywhere* in the application.
+
+That isn't always desirable.
+Sometimes you want to restrict service availability to a particular region of the application.
+
+You can limit the scope of an injected service to a *branch* of the application hierarchy
+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 available to the `HeroesBaseComponent` because it is in the `providers` array:
+
+<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>
+
+
+
+When Angular creates the `HeroesBaseComponent`, it also creates a new instance of `HeroService`
+that is visible only to the component and its children, if any.
+
+You could also provide the `HeroService` to a *different* component elsewhere in the application.
+That would result in a *different* instance of the service, living in a *different* injector.
+
+<div class="alert is-helpful">
+
+
+
+Examples of such scoped `HeroService` singletons appear throughout the accompanying sample code,
+including the `HeroBiosComponent`, `HeroOfTheMonthComponent`, and `HeroesBaseComponent`.
+Each of these components has its own `HeroService` instance managing its own independent collection of heroes.
+
+
+</div>
+
+
+
+
+<div class="alert is-helpful">
+
+
+
+### Take a break!
+This much Dependency Injection knowledge may be all that many Angular developers
+ever need to build their applications. It doesn't always have to be more complicated.
+
+
+</div>
+
+{@a multiple-service-instances}
+
+
+## Multiple service instances (sandboxing)
+
+Sometimes you want multiple instances of a service at *the same level of the component hierarchy*.
+
+A good example is a service that holds state for its companion component instance.
+You need a separate instance of the service for each component.
+Each service has its own work-state, isolated from the service-and-state of a different component.
+This is called *sandboxing* because each service and component instance has its own sandbox to play in.
+
+{@a hero-bios-component}
+Imagine a `HeroBiosComponent` that presents three instances of the `HeroBioComponent`.
+
+<code-example path="dependency-injection-in-action/src/app/hero-bios.component.ts" region="simple" title="ap/hero-bios.component.ts">
+
+</code-example>
+
+
+
+Each `HeroBioComponent` can edit a single hero's biography.
+A `HeroBioComponent` relies on a `HeroCacheService` to fetch, cache, and perform other persistence operations on that hero.
+
+<code-example path="dependency-injection-in-action/src/app/hero-cache.service.ts" region="service" title="src/app/hero-cache.service.ts">
+
+</code-example>
+
+
+
+Clearly the three instances of the `HeroBioComponent` can't share the same `HeroCacheService`.
+They'd be competing with each other to determine which hero to cache.
+
+Each `HeroBioComponent` gets its *own* `HeroCacheService` instance
+by listing the `HeroCacheService` in its metadata `providers` array.
+
+<code-example path="dependency-injection-in-action/src/app/hero-bio.component.ts" region="component" title="src/app/hero-bio.component.ts">
+
+</code-example>
+
+
+
+The parent `HeroBiosComponent` binds a value to the `heroId`.
+The `ngOnInit` passes that `id` to the service, which fetches and caches the hero.
+The getter for the `hero` property pulls the cached hero from the service.
+And the template displays this data-bound property.
+
+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.
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
+</figure>
+
+
+
+{@a optional}
+
+
+{@a qualify-dependency-lookup}
+
+
+
+## Qualify dependency lookup with _@Optional()_ and `@Host()`
+As you now know, dependencies can be registered at any level in the component hierarchy.
+
+When a component requests a dependency, Angular starts with that component's injector and walks up the injector tree
+until it finds the first suitable provider.  Angular throws an error if it can't find the dependency during that walk.
+
+You *want* this behavior most of the time.
+But sometimes you need to limit the search and/or accommodate a missing dependency.
+You can modify Angular's search behavior with the `@Host` and `@Optional` qualifying decorators,
+used individually or together.
+
+The `@Optional` decorator tells Angular to continue when it can't find the dependency.
+Angular sets the injection parameter to `null` instead.
+
+The `@Host` decorator stops the upward search at the *host component*.
+
+The host component is typically the component requesting the dependency.
+But when this component is projected into a *parent* component, that parent component becomes the host.
+The next example covers this second case.
+
+
+{@a demonstration}
+
+
+### Demonstration
+The `HeroBiosAndContactsComponent` is a revision of the `HeroBiosComponent` that you looked at [above](guide/dependency-injection-in-action#hero-bios-component).
+
+<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>
+
+
+
+Focus on the template:
+
+<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>
+
+
+
+Now there is a new `<hero-contact>` element between the `<hero-bio>` tags.
+Angular *projects*, or *transcludes*, the corresponding `HeroContactComponent` into the `HeroBioComponent` view,
+placing it in the `<ng-content>` slot of the `HeroBioComponent` template:
+
+<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>
+
+
+
+It looks like this, with the hero's telephone number from `HeroContactComponent` projected above the hero description:
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
+</figure>
+
+
+
+Here's the `HeroContactComponent` which demonstrates the qualifying decorators:
+
+<code-example path="dependency-injection-in-action/src/app/hero-contact.component.ts" region="component" title="src/app/hero-contact.component.ts">
+
+</code-example>
+
+
+
+Focus on the constructor parameters:
+
+<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>
+
+
+
+The `@Host()` function decorating the  `heroCache` property ensures that
+you get a reference to the cache service from the parent `HeroBioComponent`.
+Angular throws an error if the parent lacks that service, even if a component higher
+in the component tree happens to have it.
+
+A second `@Host()` function decorates the `loggerService` property.
+The only `LoggerService` instance in the app is provided at the `AppComponent` level.
+The host `HeroBioComponent` doesn't have its own `LoggerService` provider.
+
+Angular would throw an error if you hadn't also decorated the property with the `@Optional()` function.
+Thanks to `@Optional()`, Angular sets the `loggerService` to null and the rest of the component adapts.
+
+
+Here's the `HeroBiosAndContactsComponent` in action.
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
+</figure>
+
+
+
+If you comment out the `@Host()` decorator, Angular now walks up the injector ancestor tree
+until it finds the logger at the `AppComponent` level. The logger logic kicks in and the hero display updates
+with the gratuitous "!!!", indicating that the logger was found.
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
+</figure>
+
+
+
+On the other hand, if you restore the `@Host()` decorator and comment out `@Optional`,
+the application fails for lack of the required logger at the host component level.
+<br>
+`EXCEPTION: No provider for LoggerService! (HeroContactComponent -> LoggerService)`
+{@a component-element}
+
+## Inject the component's DOM element
+
+On occasion you might need to access a component's corresponding DOM element.
+Although developers strive to avoid it, many visual effects and 3rd party tools, such as jQuery,
+require DOM access.
+
+To illustrate, here's a simplified version of the `HighlightDirective` from
+the [Attribute Directives](guide/attribute-directives) page.
+
+<code-example path="dependency-injection-in-action/src/app/highlight.directive.ts" title="src/app/highlight.directive.ts">
+
+</code-example>
+
+
+
+The directive sets the background to a highlight color when the user mouses over the
+DOM element to which it is applied.
+
+Angular sets the constructor's `el` parameter to the injected `ElementRef`, which is
+a wrapper around that DOM element.
+Its `nativeElement` property exposes the DOM element for the directive to manipulate.
+
+The sample code applies the directive's `myHighlight` attribute to two `<div>` tags,
+first without a value (yielding the default color) and then with an assigned color value.
+
+<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>
+
+
+
+The following image shows the effect of mousing over the `<hero-bios-and-contacts>` tag.
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
+</figure>
+
+{@a providers}
+
+
+## Define dependencies with providers
+
+This section demonstrates how to write providers that deliver dependent services.
+
+Get a service from a dependency injector by giving it a ***token***.
+
+You usually let Angular handle this transaction by specifying a constructor parameter and its type.
+The parameter type serves as the injector lookup *token*.
+Angular passes this token to the injector and assigns the result to the parameter.
+Here's a typical example:
+
+
+<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>
+
+
+
+Angular asks the injector for the service associated with the `LoggerService`
+and assigns the returned value to the `logger` parameter.
+
+Where did the injector get that value?
+It may already have that value in its internal container.
+If it doesn't, it may be able to make one with the help of a ***provider***.
+A *provider* is a recipe for delivering a service associated with a *token*.
+
+<div class="alert is-helpful">
+
+
+
+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/dependency-injection-in-action#optional).
+
+
+</div>
+
+
+
+A new injector has no providers.
+Angular initializes the injectors it creates with some providers it cares about.
+You have to register your _own_ application providers manually,
+usually in the `@Injectable` decorator of the service, `providers` array of the `NgModule` or `Directive` metadata:
+
+<code-example path="dependency-injection-in-action/src/app/app.component.ts" region="providers" title="src/app/app.component.ts (providers)">
+
+</code-example>
+
+
+
+{@a defining-providers}
+
+
+### Defining providers
+
+The simple way of defining providers in the `@Injectable` decorator of the class is recommended.
+
+<code-example path="dependency-injection/src/app/heroes/hero.service.0.ts" title="src/app/heroes/hero.service.0.ts" linenums="false">
+</code-example>
+
+Another alternative is to mention the class in the providers array of the `@NgModule` and you're done.
+
+<code-example path="dependency-injection-in-action/src/app/hero-bios.component.ts" region="class-provider" title="src/app/hero-bios.component.ts (class provider)" linenums="false">
+
+</code-example>
+
+
+It's that simple because the most common injected service is an instance of a class.
+But not every dependency can be satisfied by creating a new instance of a class.
+You need other ways to deliver dependency values and that means you need other ways to specify a provider.
+
+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.
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
+</figure>
+
+
+
+The code behind it gives you plenty to think about.
+
+<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>
+
+
+
+
+{@a provide}
+
+
+#### The *provide* object literal
+
+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/dependency-injection-in-action#tokens).
+
+The *definition* object has a required property that specifies how to create the singleton instance of the service. In this case, the property.
+
+
+
+{@a usevalue}
+
+
+#### useValue&mdash;the *value provider*
+
+Set the `useValue` property to a ***fixed value*** that the provider can return as the service instance (AKA, the "dependency object").
+
+Use this technique to provide *runtime configuration constants* such as website base addresses and feature flags.
+You can use a *value provider* in a unit test to replace a production service with a fake or mock.
+
+The `HeroOfTheMonthComponent` example has two *value providers*.
+The first provides an instance of the `Hero` class;
+the second specifies a literal string resource:
+
+<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>
+
+
+
+The `Hero` provider token is a class which makes sense because the value is a `Hero`
+and the consumer of the injected hero would want the type information.
+
+The `TITLE` provider token is *not a class*.
+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.
+
+The value of a *value provider* must be defined *now*. You can't create the value later.
+Obviously the title string literal is immediately available.
+The `someHero` variable in this example was set earlier in the file:
+
+<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>
+
+
+
+The other providers create their values *lazily* when they're needed for injection.
+
+
+
+{@a useclass}
+
+
+#### useClass&mdash;the *class provider*
+
+The `useClass` provider creates and returns new instance of the specified class.
+
+Use this technique to ***substitute an alternative implementation*** for a common or default class.
+The alternative could implement a different strategy, extend the default class,
+or fake the behavior of the real class in a test case.
+
+Here are two examples in the `HeroOfTheMonthComponent`:
+
+<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>
+
+
+
+The first provider is the *de-sugared*, expanded form of the most typical case in which the
+class to be created (`HeroService`) is also the provider's dependency injection token.
+It's in this long form to de-mystify the preferred short form.
+
+The second provider substitutes the `DateLoggerService` for the `LoggerService`.
+The `LoggerService` is already registered at the `AppComponent` level.
+When _this component_ requests the `LoggerService`, it receives the `DateLoggerService` instead.
+
+<div class="alert is-helpful">
+
+
+
+This component and its tree of child components receive the `DateLoggerService` instance.
+Components outside the tree continue to receive the original `LoggerService` instance.
+
+</div>
+
+
+
+The `DateLoggerService` inherits from `LoggerService`; it appends the current date/time to each message:
+
+<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>
+
+
+
+
+{@a useexisting}
+
+
+#### _useExisting_&mdash;the *alias provider*
+
+The `useExisting` provider maps one token to another.
+In effect, the first token is an ***alias*** for the service associated with the second token,
+creating ***two ways to access the same service object***.
+
+<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>
+
+
+
+Narrowing an API through an aliasing interface is _one_ important use case for this technique.
+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/dependency-injection-in-action#class-interface) reduces the API to two members:
+
+
+<code-example path="dependency-injection-in-action/src/app/minimal-logger.service.ts" title="src/app/minimal-logger.service.ts" linenums="false">
+
+</code-example>
+
+
+
+Now put it to use in a simplified version of the `HeroOfTheMonthComponent`.
+
+<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>
+
+
+
+The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `MinimalLogger` so only the `logs` and `logInfo` members are visible in a TypeScript-aware editor:
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted 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/dependency-injection-in-action#useclass).
+
+
+<div class="alert is-helpful">
+
+
+
+The following image, which displays the logging date, confirms the point:
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
+</figure>
+
+
+
+</div>
+
+
+
+
+{@a usefactory}
+
+
+#### _useFactory_&mdash;the *factory provider*
+
+The `useFactory` provider creates a dependency object by calling a factory function
+as in this example.
+
+<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>
+
+
+
+Use this technique to ***create a dependency object***
+with a factory function whose inputs are some ***combination of injected services and local state***.
+
+The *dependency object* doesn't have to be a class instance. It could be anything.
+In this example, the *dependency object* is a string of the names of the runners-up
+to the "Hero of the Month" contest.
+
+The local state is the number `2`, the number of runners-up this component should show.
+It executes `runnersUpFactory` immediately with `2`.
+
+The `runnersUpFactory` itself isn't the provider factory function.
+The true provider factory function is the function that `runnersUpFactory` returns.
+
+
+<code-example path="dependency-injection-in-action/src/app/runners-up.ts" region="factory-synopsis" title="runners-up.ts (excerpt)" linenums="false">
+
+</code-example>
+
+
+
+That returned function takes a winning `Hero` and a `HeroService` as arguments.
+
+Angular supplies these arguments from injected values identified by
+the two *tokens* in the `deps` array.
+The two `deps` values are *tokens* that the injector uses
+to provide these factory function dependencies.
+
+After some undisclosed work, the function returns the string of names
+and Angular injects it into the `runnersUp` parameter of the `HeroOfTheMonthComponent`.
+
+
+<div class="alert is-helpful">
+
+
+
+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="dependency-injection-in-action"></live-example>
+for the full source code.
+
+
+</div>
+
+
+
+{@a tokens}
+
+
+
+## Provider token alternatives: the *class-interface* and *InjectionToken*
+
+Angular dependency injection is easiest when the provider *token* is a class
+that is also the type of the returned dependency object, or what you usually call the *service*.
+
+But the token doesn't have to be a class and even when it is a class,
+it doesn't have to be the same type as the returned object.
+That's the subject of the next section.
+{@a class-interface}
+
+### class-interface
+The previous *Hero of the Month* example used the `MinimalLogger` class
+as the token for a provider of a `LoggerService`.
+
+<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>
+
+
+
+The `MinimalLogger` is an abstract class.
+
+<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>
+
+
+
+You usually inherit from an abstract class.
+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.
+The `MinimalLogger` is used exclusively as a dependency injection token.
+
+When you use a class this way, it's called a ***class-interface***.
+The key benefit of a *class-interface* is that you can get the strong-typing of an interface
+and you can ***use it as a provider token*** in the way you would a normal class.
+
+A ***class-interface*** should define *only* the members that its consumers are allowed to call.
+Such a narrowing interface helps decouple the concrete class from its consumers.
+
+
+<div class="alert is-helpful">
+
+
+
+#### Why *MinimalLogger* is a class and not a TypeScript interface
+You can't use an interface as a provider token because
+interfaces are not JavaScript objects.
+They exist only in the TypeScript design space.
+They disappear after the code is transpiled to JavaScript.
+
+A provider token must be a real JavaScript object of some kind:
+such as a function, an object, a string, or a class.
+
+Using a class as an interface gives you the characteristics of an interface in a real JavaScript object.
+
+Of course a real object occupies memory. To minimize memory cost, the class should have *no implementation*.
+The `MinimalLogger` transpiles to this unoptimized, pre-minified JavaScript for a constructor function:
+
+<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>
+
+
+
+Notice that it doesn't have a single member. It never grows no matter how many members you add to the class *as long as those members are typed but not implemented*. Look again at the TypeScript `MinimalLogger` class to confirm that it has no implementation.
+
+
+</div>
+
+
+
+{@a injection-token}
+
+
+### _InjectionToken_
+
+Dependency objects can be simple values like dates, numbers and strings, or
+shapeless objects like arrays and functions.
+
+Such objects don't have application interfaces and therefore aren't well represented by a class.
+They're better represented by a token that is both unique and symbolic,
+a JavaScript object that has a friendly name but won't conflict with
+another token that happens to have the same name.
+
+The `InjectionToken` has these characteristics.
+You encountered them twice in the *Hero of the Month* example,
+in the *title* value provider and in the *runnersUp* factory provider.
+
+<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>
+
+
+
+You created the `TITLE` token like this:
+
+<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>
+
+
+
+The type parameter, while optional, conveys the dependency's type to developers and tooling.
+The token description is another developer aid.
+
+
+{@a di-inheritance}
+
+
+
+## Inject into a derived class
+Take care when writing a component that inherits from another component.
+If the base component has injected dependencies,
+you must re-provide and re-inject them in the derived class
+and then pass them down to the base class through the constructor.
+
+In this contrived example, `SortedHeroesComponent` inherits from `HeroesBaseComponent`
+to display a *sorted* list of heroes.
+
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
+</figure>
+
+
+
+The `HeroesBaseComponent` could stand on its own.
+It demands its own instance of the `HeroService` to get heroes
+and displays them in the order they arrive from the database.
+
+
+<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>
+
+
+
+<div class="alert is-helpful">
+
+
+
+***Keep constructors simple.*** They should do little more than initialize variables.
+This rule makes the component safe to construct under test without fear that it will do something dramatic like talk to the server.
+That's why you call the `HeroService` from within the `ngOnInit` rather than the constructor.
+
+
+</div>
+
+
+
+Users want to see the heroes in alphabetical order.
+Rather than modify the original component, sub-class it and create a
+`SortedHeroesComponent` that sorts the heroes before presenting them.
+The `SortedHeroesComponent` lets the base class fetch the heroes.
+
+Unfortunately, Angular cannot inject the `HeroService` directly into the base class.
+You must provide the `HeroService` again for *this* component,
+then pass it down to the base class inside the constructor.
+
+
+<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>
+
+
+
+Now take note of the `afterGetHeroes()` method.
+Your first instinct might have been to create an `ngOnInit` method in `SortedHeroesComponent` and do the sorting there.
+But Angular calls the *derived* class's `ngOnInit` *before* calling the base class's `ngOnInit`
+so you'd be sorting the heroes array *before they arrived*. That produces a nasty error.
+
+Overriding the base class's `afterGetHeroes()` method solves the problem.
+
+These complications argue for *avoiding component inheritance*.
+
+
+{@a find-parent}
+
+
+
+## Find a parent component by injection
+
+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
+to have a direct reference to another component
+perhaps to access values or call methods on that component.
+
+Obtaining a component reference is a bit tricky in Angular.
+Although an Angular application is a tree of components,
+there is no public API for inspecting and traversing that tree.
+
+There is an API for acquiring a child reference.
+Check out `Query`, `QueryList`, `ViewChildren`, and `ContentChildren`
+in the [API Reference](api/).
+
+There is no public API for acquiring a parent reference.
+But because every component instance is added to an injector's container,
+you can use Angular dependency injection to reach a parent component.
+
+This section describes some techniques for doing that.
+
+
+{@a known-parent}
+
+
+### Find a parent component of known type
+
+You use standard class injection to acquire a parent component whose type you know.
+
+In the following example, the parent `AlexComponent` has several children including a `CathyComponent`:
+
+{@a alex}
+
+
+<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>
+
+
+
+*Cathy* reports whether or not she has access to *Alex*
+after injecting an `AlexComponent` into her constructor:
+
+<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/dependency-injection-in-action#optional) qualifier
+is there for safety,
+the <live-example name="dependency-injection-in-action"></live-example>
+confirms that the `alex` parameter is set.
+
+
+{@a base-parent}
+
+
+### Cannot find a parent by its base class
+
+What if you *don't* know the concrete parent component class?
+
+A re-usable component might be a child of multiple components.
+Imagine a component for rendering breaking news about a financial instrument.
+For business reasons, this news component makes frequent calls
+directly into its parent instrument as changing market data streams by.
+
+The app probably defines more than a dozen financial instrument components.
+If you're lucky, they all implement the same base class
+whose API your `NewsComponent` understands.
+
+
+<div class="alert is-helpful">
+
+
+
+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.
+There's no artifact to look for.
+
+</div>
+
+
+
+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/dependency-injection-in-action#alex),
+you see that the `Alex` component *extends* (*inherits*) from a class named `Base`.
+
+<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>
+
+
+
+The `CraigComponent` tries to inject `Base` into its `alex` constructor parameter and reports if it succeeded.
+
+<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="dependency-injection-in-action"></live-example>
+confirms that the `alex` parameter is null.
+*You cannot inject a parent by its base class.*
+
+
+
+{@a class-interface-parent}
+
+
+### Find a parent by its class-interface
+
+You can find a parent component with a [class-interface](guide/dependency-injection-in-action#class-interface).
+
+The parent must cooperate by providing an *alias* to itself in the name of a *class-interface* token.
+
+Recall that Angular always adds a component instance to its own injector;
+that's why you could inject *Alex* into *Cathy* [earlier](guide/dependency-injection-in-action#known-parent).
+
+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`:
+
+{@a alex-providers}
+
+
+<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/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.
+
+*Carol*, the third of *Alex*'s child components, injects the parent into its `parent` parameter,
+the same way you've done it before:
+
+<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>
+
+
+
+Here's *Alex* and family in action:
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action">
+</figure>
+
+
+
+{@a parent-tree}
+
+
+### Find the parent in a tree of parents with _@SkipSelf()_
+
+Imagine one branch of a component hierarchy: *Alice* -> *Barry* -> *Carol*.
+Both *Alice* and *Barry* implement the `Parent` *class-interface*.
+
+*Barry* is the problem. He needs to reach his parent, *Alice*, and also be a parent to *Carol*.
+That means he must both *inject* the `Parent` *class-interface* to get *Alice* and
+*provide* a `Parent` to satisfy *Carol*.
+
+Here's *Barry*:
+
+<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/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).
+
+For now, focus on *Barry*'s constructor:
+
+<code-tabs>
+
+  <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="dependency-injection-in-action/src/app/parent-finder.component.ts" region="carol-ctor">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+
+
+It's identical to *Carol*'s constructor except for the additional `@SkipSelf` decorator.
+
+`@SkipSelf` is essential for two reasons:
+
+1. It tells the injector to start its search for a `Parent` dependency in a component *above* itself,
+which *is* what parent means.
+
+2. Angular throws a cyclic dependency error if you omit the `@SkipSelf` decorator.
+
+  `Cannot instantiate cyclic dependency! (BethComponent -> Parent -> BethComponent)`
+
+Here's *Alice*, *Barry* and family in action:
+
+
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action">
+</figure>
+
+
+
+{@a parent-token}
+
+
+### The *Parent* class-interface
+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.
+
+The example defines a `Parent` *class-interface*.
+
+<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>
+
+
+
+The `Parent` *class-interface* defines a `name` property with a type declaration but *no implementation*.
+The `name` property is the only member of a parent component that a child component can call.
+Such a narrow interface helps decouple the child component class from its parent components.
+
+A component that could serve as a parent *should* implement the *class-interface* as the `AliceComponent` does:
+
+<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>
+
+
+
+Doing so adds clarity to the code.  But it's not technically necessary.
+Although the `AlexComponent` has a `name` property, as required by its `Base` class,
+its class signature doesn't mention `Parent`:
+
+<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>
+
+
+
+<div class="alert is-helpful">
+
+
+
+The `AlexComponent` *should* implement `Parent` as a matter of proper style.
+It doesn't in this example *only* to demonstrate that the code will compile and run without the interface
+
+
+</div>
+
+
+
+{@a provideparent}
+
+
+### A _provideParent()_ helper function
+
+Writing variations of the same parent *alias provider* gets old quickly,
+especially this awful mouthful with a [*forwardRef*](guide/dependency-injection-in-action#forwardref):
+
+<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>
+
+
+
+You can extract that logic into a helper function like this:
+
+<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>
+
+
+
+Now you can add a simpler, more meaningful parent provider to your components:
+
+<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>
+
+
+
+You can do better. The current version of the helper function can only alias the `Parent` *class-interface*.
+The application might have a variety of parent types, each with its own *class-interface* token.
+
+Here's a revised version that defaults to `parent` but also accepts an optional second parameter for a different parent *class-interface*.
+
+<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>
+
+
+
+And here's how you could use it with a different parent type:
+
+<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>
+
+
+
+{@a forwardref}
+
+
+
+## Break circularities with a forward class reference (*forwardRef*)
+
+The order of class declaration matters in TypeScript.
+You can't refer directly to a class until it's been defined.
+
+This isn't usually a problem, especially if you adhere to the recommended *one class per file* rule.
+But sometimes circular references are unavoidable.
+You're in a bind when class 'A' refers to class 'B' and 'B' refers to 'A'.
+One of them has to be defined first.
+
+The Angular `forwardRef()` function creates an *indirect* reference that Angular can resolve later.
+
+The *Parent Finder* sample is full of circular class references that are impossible to break.
+
+
+You face this dilemma when a class makes *a reference to itself*
+as does the `AlexComponent` in its `providers` array.
+The `providers` array is a property of the `@Component` decorator function which must
+appear *above* the class definition.
+
+Break the circularity with `forwardRef`:
+
+<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-pattern.md b/aio/content/guide/dependency-injection-pattern.md
new file mode 100644
index 000000000000..93fd0eb113ec
--- /dev/null
+++ b/aio/content/guide/dependency-injection-pattern.md
@@ -0,0 +1,167 @@
+# The Dependency Injection pattern
+
+**Dependency injection** is an important application design pattern.
+It's used so widely that almost everyone just calls it _DI_.
+
+Angular has its own dependency injection framework, and
+you really can't build an Angular application without it.
+
+This page covers what DI is and why it's useful.
+
+When you've learned the general pattern, you're ready to turn to
+the [Angular Dependency Injection](guide/dependency-injection) guide to see how it works in an Angular app.
+
+{@a why-di }
+
+## Why dependency injection?
+
+To understand why dependency injection is so important, consider an example without it.
+Imagine writing the following code:
+
+<code-example path="dependency-injection/src/app/car/car-no-di.ts" region="car" title="src/app/car/car.ts (without DI)">
+</code-example>
+
+The `Car` class creates everything it needs inside its constructor.
+What's the problem?
+The problem is that the `Car` class is brittle, inflexible, and hard to test.
+
+This `Car` needs an engine and tires. Instead of asking for them,
+the `Car` constructor instantiates its own copies from
+the very specific classes `Engine` and `Tires`.
+
+What if the `Engine` class evolves and its constructor requires a parameter?
+That would break the `Car` class and it would stay broken until you rewrote it along the lines of
+`this.engine = new Engine(theNewParameter)`.
+The `Engine` constructor parameters weren't even a consideration when you first wrote `Car`.
+You may not anticipate them even now.
+But you'll *have* to start caring because
+when the definition of `Engine` changes, the `Car` class must change.
+That makes `Car` brittle.
+
+What if you want to put a different brand of tires on your `Car`? Too bad.
+You're locked into whatever brand the `Tires` class creates. That makes the
+`Car` class inflexible.
+
+Right now each new car gets its own `engine`. It can't share an `engine` with other cars.
+While that makes sense for an automobile engine,
+surely you can think of other dependencies that should be shared, such as the onboard
+wireless connection to the manufacturer's service center. This `Car` lacks the flexibility
+to share services that have been created previously for other consumers.
+
+When you write tests for `Car` you're at the mercy of its hidden dependencies.
+Is it even possible to create a new `Engine` in a test environment?
+What does `Engine` depend upon? What does that dependency depend on?
+Will a new instance of `Engine` make an asynchronous call to the server?
+You certainly don't want that going on during tests.
+
+What if the `Car` should flash a warning signal when tire pressure is low?
+How do you confirm that it actually does flash a warning
+if you can't swap in low-pressure tires during the test?
+
+You have no control over the car's hidden dependencies.
+When you can't control the dependencies, a class becomes difficult to test.
+
+How can you make `Car` more robust, flexible, and testable?
+
+{@a ctor-injection}
+That's super easy. Change the `Car` constructor to a version with DI:
+
+<code-tabs>
+
+  <code-pane title="src/app/car/car.ts (excerpt with DI)" path="dependency-injection/src/app/car/car.ts" region="car-ctor">
+  </code-pane>
+
+  <code-pane title="src/app/car/car.ts (excerpt without DI)" path="dependency-injection/src/app/car/car-no-di.ts" region="car-ctor">
+  </code-pane>
+
+</code-tabs>
+
+See what happened? The definition of the dependencies are
+now in the constructor.
+The `Car` class no longer creates an `engine` or `tires`.
+It just consumes them.
+
+<div class="alert is-helpful">
+
+This example leverages TypeScript's constructor syntax for declaring
+parameters and properties simultaneously.
+
+</div>
+
+Now you can create a car by passing the engine and tires to the constructor.
+
+<code-example path="dependency-injection/src/app/car/car-creations.ts" region="car-ctor-instantiation" linenums="false">
+</code-example>
+
+How cool is that?
+The definition of the `engine` and `tire` dependencies are
+decoupled from the `Car` class.
+You can pass in any kind of `engine` or `tires` you like, as long as they
+conform to the general API requirements of an `engine` or `tires`.
+
+Now, if someone extends the `Engine` class, that is not `Car`'s problem.
+
+<div class="alert is-helpful">
+
+The _consumer_ of `Car` has the problem. The consumer must update the car creation code to
+something like this:
+
+<code-example path="dependency-injection/src/app/car/car-creations.ts" region="car-ctor-instantiation-with-param" linenums="false">
+
+</code-example>
+
+The critical point is this: the `Car` class did not have to change.
+You'll take care of the consumer's problem shortly.
+
+</div>
+
+The `Car` class is much easier to test now because you are in complete control
+of its dependencies.
+You can pass mocks to the constructor that do exactly what you want them to do
+during each test:
+
+<code-example path="dependency-injection/src/app/car/car-creations.ts" region="car-ctor-instantiation-with-mocks" linenums="false">
+</code-example>
+
+**You just learned what dependency injection is**.
+
+It's a coding pattern in which a class receives its dependencies from external
+sources rather than creating them itself.
+
+Cool! But what about that poor consumer?
+Anyone who wants a `Car` must now
+create all three parts: the `Car`, `Engine`, and `Tires`.
+The `Car` class shed its problems at the consumer's expense.
+You need something that takes care of assembling these parts.
+
+You _could_ write a giant class to do that:
+
+<code-example path="dependency-injection/src/app/car/car-factory.ts" title="src/app/car/car-factory.ts">
+</code-example>
+
+It's not so bad now with only three creation methods.
+But maintaining it will be hairy as the application grows.
+This factory is going to become a huge spiderweb of
+interdependent factory methods!
+
+Wouldn't it be nice if you could simply list the things you want to build without
+having to define which dependency gets injected into what?
+
+This is where the dependency injection framework comes into play.
+Imagine the framework had something called an _injector_.
+You register some classes with this injector, and it figures out how to create them.
+
+When you need a `Car`, you simply ask the injector to get it for you and you're good to go.
+
+<code-example path="dependency-injection/src/app/car/car-injector.ts" region="injector-call" title="src/app/car/car-injector.ts" linenums="false">
+</code-example>
+
+Everyone wins. The `Car` knows nothing about creating an `Engine` or `Tires`.
+The consumer knows nothing about creating a `Car`.
+You don't have a gigantic factory class to maintain.
+Both `Car` and consumer simply ask for what they need and the injector delivers.
+
+This is what a **dependency injection framework** is all about.
+
+Now that you know what dependency injection is and appreciate its benefits,
+turn to the [Angular Dependency Injection](guide/dependency-injection) guide to see how it is implemented in Angular.
diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md
new file mode 100644
index 000000000000..673e4da75699
--- /dev/null
+++ b/aio/content/guide/dependency-injection.md
@@ -0,0 +1,787 @@
+# Angular Dependency Injection
+
+**Dependency Injection (DI)** is a way to create objects that depend upon other objects.
+A Dependency Injection system supplies the dependent objects (called the _dependencies_)
+when it creates an instance of an object.
+
+The [Dependency Injection pattern](guide/dependency-injection-pattern) page describes this general approach.
+_The guide you're reading now_ explains how Angular's own Dependency Injection system works.
+
+## DI by example
+
+You'll learn Angular Dependency Injection through a discussion of the sample app that accompanies this guide.
+Run the <live-example></live-example> anytime.
+
+Start by reviewing this simplified version of the _heroes_ feature
+from the [The Tour of Heroes](tutorial/).
+
+<code-tabs>
+  <code-pane title="src/app/heroes/heroes.component.ts" path="dependency-injection/src/app/heroes/heroes.component.1.ts"
+  region="v1">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/hero-list.component.ts" path="dependency-injection/src/app/heroes/hero-list.component.1.ts">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/hero.ts" path="dependency-injection/src/app/heroes/hero.ts">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/mock-heroes.ts" path="dependency-injection/src/app/heroes/mock-heroes.ts">
+  </code-pane>
+
+</code-tabs>
+
+The `HeroesComponent` is the top-level heroes component.
+Its only purpose is to display the `HeroListComponent`
+which displays a list of hero names.
+
+This version of the `HeroListComponent` gets its `heroes` from the `HEROES` array, an in-memory collection
+defined in a separate `mock-heroes` file.
+
+<code-example title="src/app/heroes/hero-list.component.ts (class)" path="dependency-injection/src/app/heroes/hero-list.component.1.ts"
+region="class">
+</code-example>
+
+That may suffice in the early stages of development, but it's far from ideal.
+As soon as you try to test this component or get heroes from a remote server,
+you'll have to change the implementation of `HerosListComponent` and
+replace every other use of the `HEROES` mock data.
+
+It's better to hide these details inside a _service_ class, 
+[defined in its own file](#one-class-per-file).
+
+## Create an injectable _HeroService_
+
+The [**Angular CLI**](https://cli.angular.io/) can generate a new `HeroService` class in the `src/app/heroes` folder with this command.
+
+<code-example language="sh" class="code-shell">
+ng generate service heroes/hero
+</code-example>
+
+The command above creates the following `HeroService` skeleton.
+
+<code-example path="dependency-injection/src/app/heroes/hero.service.0.ts" title="src/app/heroes/hero.service.ts (CLI-generated)">
+</code-example>
+
+The `@Injectable` decorator is an essential ingredient in every Angular service definition.
+The rest of the class has been rewritten to expose a `getHeroes` method 
+that returns the same mock data as before.
+
+<code-example path="dependency-injection/src/app/heroes/hero.service.3.ts" title="src/app/heroes/hero.service.3.ts">
+</code-example>
+
+Of course, this isn't a real data service.
+If the app were actually getting data from a remote server, 
+the `getHeroes` method signature would have to be asynchronous.
+
+That's a defect we can safely ignore in this guide where our focus is on
+_injecting the service_ into the `HeroList` component.
+
+
+{@a injector-config}
+{@a bootstrap}
+
+## Injectors
+
+A _service_ like `HeroService` is just a class in Angular until you register it with an Angular dependency injector.
+
+An Angular injector is responsible for creating service instances and injecting them into classes like the `HeroListComponent`.
+
+You rarely create an Angular injector yourself.
+Angular creates injectors for you as it executes the app,
+starting with the _root injector_ that it creates during the [bootstrap process](guide/bootstrapping).
+
+Angular doesn't automatically know how you want to create instances of your services or the injector to create your service. You must configure it by specifying providers for every service.
+
+**Providers** tell the injector _how to create the service_.
+Without a provider, the injector would not know
+that it is responsible for injecting the service
+nor be able to create the service.
+
+<div class="alert is-helpful">
+
+You'll learn much more about _providers_ [below](#providers).
+For now, it is sufficient to know that they configure where and how services are created.
+
+</div>
+
+There are many ways to register a service provider with an injector. This section shows the most common ways 
+of configuring a provider for your services.
+
+{@a register-providers-injectable}
+
+## @Injectable providers
+
+The `@Injectable` decorator identifies services and other classes that are intended to be injected. It can also be used to configure a provider for those services.
+
+Here we configure a provider for `HeroService` using the `@Injectable` decorator on the class.
+
+<code-example path="dependency-injection/src/app/heroes/hero.service.0.ts"  title="src/app/heroes/heroes.service.ts" linenums="false"> </code-example> 
+
+`providedIn` tells Angular that the root injector is responsible for creating an instance of the `HeroService` (by invoking its constructor) and making it available across the application. The CLI sets up this kind of a provider automatically for you when generating a new service.
+
+Sometimes it's not desirable to have a service always be provided in the application root injector. Perhaps users should explicitly opt-in to using the service, or the service should be provided in a lazily-loaded context. In this case, the provider should be associated with a specific `@NgModule` class, and will be used by whichever injector includes that module.
+
+In the following excerpt, the `@Injectable` decorator is used to configure a provider that will be available in any injector that includes the HeroModule.
+
+<code-example path="dependency-injection/src/app/heroes/hero.service.4.ts"  title="src/app/heroes/hero.service.ts" linenums="false"> </code-example>
+
+{@a register-providers-ngmodule}
+
+### _@NgModule_ providers
+
+In the following excerpt, the root `AppModule` registers two providers in its `providers` array.
+
+<code-example path="dependency-injection/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (providers)" region="providers">
+</code-example>
+
+The first entry registers the `UserService` class (_not shown_) under the `UserService` _injection token_.
+The second registers a value (`HERO_DI_CONFIG`) under the `APP_CONFIG` _injection token_.
+
+With the above registrations, Angular can inject the `UserService` or the `HERO_DI_CONFIG` value
+into any class that it creates.
+
+<div class="alert is-helpful">
+
+You'll learn about _injection tokens_ and _provider_ syntax [below](#providers).
+</div>
+
+{@a register-providers-component}
+
+### _@Component_ providers
+
+In addition to providing the service application-wide or within a particular `@NgModule`, services can also be provided in specific components. Services provided in component-level is only available within that component injector or in any of its child components.
+
+The example below shows a revised `HeroesComponent` that registers the `HeroService` in its `providers` array.
+
+<code-example path="dependency-injection/src/app/heroes/heroes.component.1.ts" title="src/app/heroes/heroes.component.ts" linenums="false">
+</code-example>
+
+{@a ngmodule-vs-comp}
+
+### @Injectable, _@NgModule_ or _@Component_?
+
+Should you provide a service with an `@Injectable` decorator, in an `@NgModule`, or within an `@Component`?
+The choices lead to differences in the final bundle size, service _scope_, and service _lifetime_.
+
+When you register providers in the **@Injectable** decorator of the service itself, optimization tools such as those used by the CLI's production builds can perform tree shaking, which removes services that aren't used by your app. Tree shaking results in smaller bundle sizes.
+
+**Angular module providers** (`@NgModule.providers`) are registered with the application's root injector.
+Angular can inject the corresponding services in any class it creates.
+Once created, a service instance lives for the life of the app and Angular injects this one service instance in every class that needs it.
+
+You're likely to inject the `UserService` in many places throughout the app
+and will want to inject the same service instance every time.
+Providing the `UserService` with an Angular module is a good choice if an `@Injectable` provider is not an option..
+
+<div class="alert is-helpful">
+
+To be precise, Angular module providers are registered with the root injector
+_unless the module is_ [lazy loaded](guide/lazy-loading-ngmodules).
+In this sample, all modules are _eagerly loaded_ when the application starts,
+so all module providers are registered with the app's root injector.
+
+</div><br>
+
+<hr>
+
+**A component's providers** (`@Component.providers`) are registered with each component instance's own injector.
+
+Angular can only inject the corresponding services in that component instance or one of its descendant component instances.
+Angular cannot inject the same service instance anywhere else.
+
+Note that a component-provided service may have a limited lifetime. Each new instance of the component gets its own instance of the service
+and, when the component instance is destroyed, so is that service instance.
+
+In this sample app, the `HeroComponent` is created when the application starts
+and is never destroyed so the `HeroService` created for the `HeroComponent` also live for the life of the app.
+
+If you want to restrict `HeroService` access to the `HeroComponent` and its nested `HeroListComponent`,
+providing the `HeroService` in the `HeroComponent` may be a good choice.
+
+<div class="alert is-helpful">
+
+The scope and lifetime of component-provided services is a consequence of [the way Angular creates component instances](#component-child-injectors). 
+
+</div>
+
+
+{@a providers}
+
+## Providers
+
+A service provider *provides* the concrete, runtime version of a dependency value.
+The injector relies on **providers** to create instances of the services
+that the injector injects into components, directives, pipes, and other services.
+
+You must register a service *provider* with an injector, or it won't know how to create the service.
+
+The next few sections explain the many ways you can specify a provider.
+
+### The class as its own provider
+
+There are many ways to *provide* something that looks and behaves like a `Logger`.
+The `Logger` class itself is an obvious and natural provider.
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-logger">
+</code-example>
+
+But it's not the only way.
+
+You can configure the injector with alternative providers that can deliver an object that behaves like a `Logger`.
+You could provide a substitute class. You could provide a logger-like object.
+You could give it a provider that calls a logger factory function.
+Any of these approaches might be a good choice under the right circumstances.
+
+What matters is that the injector has a provider to go to when it needs a `Logger`.
+
+{@a provide}
+
+### The _provide_ object literal
+
+Here's the class-provider syntax again.
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-logger">
+</code-example>
+
+This is actually a shorthand expression for a provider registration
+using a _provider_ object literal with two properties:
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-3" >
+</code-example>
+
+The `provide` property holds the [token](guide/dependency-injection#token) that serves as the key for both locating a dependency value
+and registering the provider.
+
+The second property is always a provider definition object,
+which you can think of as a *recipe* for creating the dependency value.
+There are many ways to create dependency values just as there are many ways to write a recipe.
+
+{@a class-provider}
+
+### Alternative class providers
+
+Occasionally you'll ask a different class to provide the service.
+The following code tells the injector
+to return a `BetterLogger` when something asks for the `Logger`.
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-4" >
+</code-example>
+
+{@a class-provider-dependencies}
+
+### Class provider with dependencies
+
+Maybe an `EvenBetterLogger` could display the user name in the log message.
+This logger gets the user from the injected `UserService`,
+which is also injected at the application level.
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="EvenBetterLogger"  linenums="false">
+</code-example>
+
+Configure it like `BetterLogger`.
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-5"  linenums="false">
+</code-example>
+
+{@a aliased-class-providers}
+
+### Aliased class providers
+
+Suppose an old component depends upon an `OldLogger` class.
+`OldLogger` has the same interface as the `NewLogger`, but for some reason
+you can't update the old component to use it.
+
+When the *old* component logs a message with `OldLogger`,
+you'd like the singleton instance of `NewLogger` to handle it instead.
+
+The dependency injector should inject that singleton instance
+when a component asks for either the new or the old logger.
+The `OldLogger` should be an alias for `NewLogger`.
+
+You certainly do not want two different `NewLogger` instances in your app.
+Unfortunately, that's what you get if you try to alias `OldLogger` to `NewLogger` with `useClass`.
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-6a"  linenums="false">
+</code-example>
+
+The solution: alias with the `useExisting` option.
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-6b" linenums="false">
+</code-example>
+
+{@a value-provider}
+
+### Value providers
+
+Sometimes it's easier to provide a ready-made object rather than ask the injector to create it from a class.
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="silent-logger"  linenums="false">
+</code-example>
+
+Then you register a provider with the `useValue` option,
+which makes this object play the logger role.
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-7" linenums="false">
+</code-example>
+
+See more `useValue` examples in the
+[Non-class dependencies](guide/dependency-injection#non-class-dependencies) and
+[InjectionToken](guide/dependency-injection#injection-token) sections.
+
+{@a factory-provider}
+
+### Factory providers
+
+Sometimes you need to create the dependent value dynamically,
+based on information you won't have until the last possible moment.
+Maybe the information changes repeatedly in the course of the browser session.
+
+Suppose also that the injectable service has no independent access to the source of this information.
+
+This situation calls for a **factory provider**.
+
+To illustrate the point, add a new business requirement:
+the `HeroService` must hide *secret* heroes from normal users.
+Only authorized users should see secret heroes.
+
+Like the `EvenBetterLogger`, the `HeroService` needs a fact about the user.
+It needs to know if the user is authorized to see secret heroes.
+That authorization can change during the course of a single application session,
+as when you log in a different user.
+
+Unlike `EvenBetterLogger`, you can't inject the `UserService` into the `HeroService`.
+The `HeroService` won't have direct access to the user information to decide
+who is authorized and who is not.
+
+Instead, the `HeroService` constructor takes a boolean flag to control display of secret heroes.
+
+<code-example path="dependency-injection/src/app/heroes/hero.service.ts" region="internals" title="src/app/heroes/hero.service.ts (excerpt)" linenums="false">
+</code-example>
+
+You can inject the `Logger`, but you can't inject the  boolean `isAuthorized`.
+You'll have to take over the creation of new instances of this `HeroService` with a factory provider.
+
+A factory provider needs a factory function:
+
+<code-example path="dependency-injection/src/app/heroes/hero.service.provider.ts" region="factory" title="src/app/heroes/hero.service.provider.ts (excerpt)" linenums="false">
+</code-example>
+
+Although the `HeroService` has no access to the `UserService`, the factory function does.
+
+You inject both the `Logger` and the `UserService` into the factory provider
+and let the injector pass them along to the factory function:
+
+<code-example path="dependency-injection/src/app/heroes/hero.service.provider.ts" region="provider" title="src/app/heroes/hero.service.provider.ts (excerpt)" linenums="false">
+</code-example>
+
+<div class="alert is-helpful">
+
+The `useFactory` field tells Angular that the provider is a factory function
+whose implementation is the `heroServiceFactory`.
+
+The `deps` property is an array of [provider tokens](guide/dependency-injection#token).
+The `Logger` and `UserService` classes serve as tokens for their own class providers.
+The injector resolves these tokens and injects the corresponding services into the matching factory function parameters.
+
+</div>
+
+Notice that you captured the factory provider in an exported variable, `heroServiceProvider`.
+This extra step makes the factory provider reusable.
+You can register the `HeroService` with this variable wherever you need it.
+
+In this sample, you need it only in the `HeroesComponent`,
+where it replaces the previous `HeroService` registration in the metadata `providers` array.
+Here you see the new and the old implementation side-by-side:
+
+<code-tabs>
+
+  <code-pane title="src/app/heroes/heroes.component (v3)" path="dependency-injection/src/app/heroes/heroes.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/heroes.component (v2)" path="dependency-injection/src/app/heroes/heroes.component.1.ts">
+  </code-pane>
+
+</code-tabs>
+
+{@a tree-shakable-provider}
+
+### Tree-shakable providers
+
+Tree shaking is the ability to remove code that is not referenced in an application from the final bundle. Tree-shakable providers give Angular the ability to remove services that are not used in your application from the final output. This significantly reduces the size of your bundles.
+
+Ideally, if an application is not injecting a service, it should not be included in the final output. However, it turns out that the Angular compiler cannot identify at build time if the service will be required or not. Because it's always possible to inject a service directly using `injector.get(Service)`, Angular cannot identify all of the places in your code where this injection could happen, so it has no choice but to include the service in the injector regardless. Thus, services provided in modules are not tree-shakable.
+
+Let us consider an example of non-tree-shakable providers in Angular.
+
+In this example, to provide services in Angular, you include them in an `@NgModule`:
+
+<code-example path="dependency-injection/src/app/tree-shaking/service-and-module.ts"  title="src/app/tree-shaking/service-and-modules.ts" linenums="false"> </code-example>
+
+This module can then be imported into your application module, to make the service available for injection in your app:
+
+<code-example path="dependency-injection/src/app/tree-shaking/app.module.ts"  title="src/app/tree-shaking/app.modules.ts" linenums="false"> </code-example>
+
+When `ngc` runs, it compiles AppModule into a module factory, which contains definitions for all the providers declared in all the modules it includes. At runtime, this factory becomes an injector that instantiates these services.
+
+Tree-shaking doesn't work in the method above because Angular cannot decide to exclude one chunk of code (the provider definition for the service within the module factory) based on whether another chunk of code (the service class) is used. To make services tree-shakable, the information about how to construct an instance of the service (the provider definition) needs to be a part of the service class itself.
+
+#### Creating tree-shakable providers
+
+To create providers that are tree-shakable, the information that used to be specified in the module should be specified in the `@Injectable` decorator on the service itself.
+
+The following example shows the tree-shakable equivalent to the `ServiceModule` example above:
+
+<code-example path="dependency-injection/src/app/tree-shaking/service.ts"  title="src/app/tree-shaking/service.ts" linenums="false"> </code-example>
+
+In the example above, `providedIn` allows you to declare the injector which injects this service. Unless there is a special case, the value should always be root. Setting the value to root ensures that the service is scoped to the root injector, without naming a particular module that is present in that injector.
+
+The service can be instantiated by configuring a factory function as shown below:
+
+<code-example path="dependency-injection/src/app/tree-shaking/service.0.ts"  title="src/app/tree-shaking/service.0.ts" linenums="false"> </code-example>
+
+<div class="alert is-helpful">
+
+To override tree-shakable providers, register the provider using the `providers: []` array syntax of any Angular decorator that supports it.
+
+</div>
+
+{@a injector-config} 
+{@a bootstrap}
+
+## Inject a service
+
+The `HeroListComponent` should get heroes from the `HeroService`.
+
+The component shouldn't create the `HeroService` with `new`.
+It should ask for the `HeroService` to be injected.
+
+You can tell Angular to inject a dependency in the component's constructor by specifying a **constructor parameter with the dependency type**.
+Here's the `HeroListComponent` constructor, asking for the `HeroService` to be injected.
+
+<code-example title="src/app/heroes/hero-list.component (constructor signature)" path="dependency-injection/src/app/heroes/hero-list.component.ts"
+region="ctor-signature">
+</code-example>
+
+Of course, the `HeroListComponent` should do something with the injected `HeroService`.
+Here's the revised component, making use of the injected service, side-by-side with the previous version for comparison.
+
+<code-tabs>
+  <code-pane title="hero-list.component (with DI)" path="dependency-injection/src/app/heroes/hero-list.component.2.ts">
+  </code-pane>
+
+  <code-pane title="hero-list.component (without DI)" path="dependency-injection/src/app/heroes/hero-list.component.1.ts">
+  </code-pane>
+</code-tabs>
+
+Notice that the `HeroListComponent` doesn't know where the `HeroService` comes from.
+_You_ know that it comes from the parent `HeroesComponent`.
+If you decided instead to provide the `HeroService` in the `AppModule`,
+the `HeroListComponent` wouldn't change at all.
+The _only thing that matters_ is that the `HeroService` is provided in some parent injector.
+
+{@a singleton-services}
+
+## Singleton services
+
+Services are singletons _within the scope of an injector_.
+There is at most one instance of a service in a given injector.
+
+There is only one root injector, and the `UserService` is registered with that injector.
+Therefore, there can be just one `UserService` instance in the entire app,
+and every class that injects `UserService` get this service instance.
+
+However, Angular DI is a 
+[hierarchical injection system](guide/hierarchical-dependency-injection), 
+which means that nested injectors can create their own service instances.
+Angular creates nested injectors all the time.
+
+{@a component-child-injectors}
+
+## Component child injectors
+
+Component injectors are independent of each other and
+each of them creates its own instances of the component-provided services.
+
+For example, when Angular creates a new instance of a component that has `@Component.providers`,
+it also creates a new _child injector_ for that instance.
+
+When Angular destroys one of these component instances, it also destroys the
+component's injector and that injector's service instances. 
+
+Because of [injector inheritance](guide/hierarchical-dependency-injection),
+you can still inject application-wide services into these components.
+A component's injector is a child of its parent component's injector,
+and a descendent of its parent's parent's injector, and so on all the way back to the application's _root_ injector.
+Angular can inject a service provided by any injector in that lineage.
+
+For example, Angular could inject a `HeroListComponent`
+with both the `HeroService` provided in `HeroComponent`
+and the `UserService` provided in `AppModule`.
+
+{@a testing-the-component}
+
+## Testing the component
+
+Earlier you saw that designing a class for dependency injection makes the class easier to test.
+Listing dependencies as constructor parameters may be all you need to test application parts effectively.
+
+For example, you can create a new `HeroListComponent` with a mock service that you can manipulate
+under test:
+
+<code-example path="dependency-injection/src/app/test.component.ts" region="spec" title="src/app/test.component.ts" linenums="false">
+</code-example>
+
+<div class="alert is-helpful">
+
+Learn more in the [Testing](guide/testing) guide.
+
+</div>
+
+{@a service-needs-service}
+
+## When the service needs a service
+
+The `HeroService` is very simple. It doesn't have any dependencies of its own.
+
+What if it had a dependency? What if it reported its activities through a logging service?
+You'd apply the same *constructor injection* pattern,
+adding a constructor that takes a `Logger` parameter.
+
+Here is the revised `HeroService` that injects the `Logger`, side-by-side with the previous service for comparison.
+
+<code-tabs>
+
+  <code-pane title="src/app/heroes/hero.service (v2)" path="dependency-injection/src/app/heroes/hero.service.2.ts">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/hero.service (v1)" path="dependency-injection/src/app/heroes/hero.service.1.ts">
+  </code-pane>
+
+</code-tabs>
+
+The constructor asks for an injected instance of a `Logger` and stores it in a private field called `logger`.
+The `getHeroes()` method logs a message when asked to fetch heroes.
+
+
+{@a logger-service}
+
+#### The dependent _Logger_ service
+
+The sample app's `Logger` service is quite simple:
+
+<code-example path="dependency-injection/src/app/logger.service.ts" title="src/app/logger.service.ts">
+</code-example>
+
+If the app didn't provide this `Logger`,
+Angular would throw an exception when it looked for a `Logger` to inject
+into the `HeroService`.
+
+<code-example language="sh" class="code-shell">
+  ERROR Error: No provider for Logger!
+</code-example>
+
+Because a singleton logger service is useful everywhere,
+it's provided in the root `AppModule`.
+
+<code-example path="dependency-injection/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (providers)" region="providers-2">
+</code-example>
+
+
+
+{@a token}
+
+## Dependency injection tokens
+
+When you register a provider with an injector, you associate that provider with a dependency injection token.
+The injector maintains an internal *token-provider* map that it references when
+asked for a dependency. The token is the key to the map.
+
+In all previous examples, the dependency value has been a class *instance*, and
+the class *type* served as its own lookup key.
+Here you get a `HeroService` directly from the injector by supplying the `HeroService` type as the token:
+
+<code-example path="dependency-injection/src/app/injector.component.ts" region="get-hero-service" title="src/app/injector.component.ts" linenums="false">
+</code-example>
+
+You have similar good fortune when you write a constructor that requires an injected class-based dependency.
+When you define a constructor parameter with the `HeroService` class type,
+Angular knows to inject the
+service associated with that `HeroService` class token:
+
+<code-example path="dependency-injection/src/app/heroes/hero-list.component.ts" region="ctor-signature" title="src/app/heroes/hero-list.component.ts">
+</code-example>
+
+This is especially convenient when you consider that most dependency values are provided by classes.
+
+{@a non-class-dependencies}
+
+### Non-class dependencies
+
+What if the dependency value isn't a class? Sometimes the thing you want to inject is a
+string, function, or object.
+
+Applications often define configuration objects with lots of small facts
+(like the title of the application or the address of a web API endpoint)
+but these configuration objects aren't always instances of a class.
+They can be object literals such as this one:
+
+<code-example path="dependency-injection/src/app/app.config.ts" region="config" title="src/app/app.config.ts (excerpt)" linenums="false">
+</code-example>
+
+What if you'd like to make this configuration object available for injection?
+You know you can register an object with a [value provider](guide/dependency-injection#value-provider).
+
+But what should you use as the token?
+You don't have a class to serve as a token.
+There is no `AppConfig` class.
+
+<div class="alert is-helpful">
+
+### TypeScript interfaces aren't valid tokens
+
+The `HERO_DI_CONFIG` constant conforms to the `AppConfig` interface. 
+Unfortunately, you cannot use a TypeScript interface as a token:
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-9-interface"  linenums="false">
+</code-example>
+
+<code-example path="dependency-injection/src/app/providers.component.ts" region="provider-9-ctor-interface"  linenums="false">
+</code-example>
+
+That seems strange if you're used to dependency injection in strongly typed languages, where
+an interface is the preferred dependency lookup key.
+
+It's not Angular's doing. An interface is a TypeScript design-time artifact. JavaScript doesn't have interfaces.
+The TypeScript interface disappears from the generated JavaScript.
+There is no interface type information left for Angular to find at runtime.
+
+</div>
+
+
+{@a injection-token}
+
+### _InjectionToken_
+
+One solution to choosing a provider token for non-class dependencies is
+to define and use an [*InjectionToken*](api/core/InjectionToken).
+The definition of such a token looks like this:
+
+<code-example>
+import { InjectionToken } from '@angular/core';
+export const TOKEN = new InjectionToken('desc');
+</code-example>
+
+You can directly configure a provider when creating an `InjectionToken`. The provider configuration determines which injector provides the token and how the value will be created.  This is similar to using `@Injectable`, except that you cannot define standard providers (such as `useClass` or `useFactory`) with `InjectionToken`. Instead, you specify a factory function which returns the value to be provided directly.
+
+<code-example>
+export const TOKEN = 
+  new InjectionToken('desc', { providedIn: 'root', factory: () => new AppConfig(), })
+</code-example>
+
+Now you can inject the configuration object into any constructor that needs it, with
+the help of an `@Inject` decorator:
+
+<code-example>
+constructor(@Inject(TOKEN));
+</code-example>
+
+If the factory function needs access to other DI tokens, it can use the inject function from `@angular/core` to request dependencies.
+
+<code-example>
+const TOKEN = 
+  new InjectionToken('tree-shakable token', 
+    { providedIn: 'root', factory: () => 
+        new AppConfig(inject(Parameter1), inject(Parameter2)), });
+</code-example>
+
+{@a optional}
+
+## Optional dependencies
+
+You can tell Angular that the dependency is optional by annotating the constructor argument with null:
+
+<code-example>
+constructor(@Inject(Token, null));
+</code-example>
+
+When using optional dependencies, your code must be prepared for a null value.
+
+## Summary
+
+You learned the basics of Angular dependency injection in this page.
+You can register various kinds of providers,
+and you know how to ask for an injected object (such as a service) by
+adding a parameter to a constructor.
+
+Angular dependency injection is more capable than this guide has described.
+You can learn more about its advanced features, beginning with its support for
+nested injectors, in
+[Hierarchical Dependency Injection](guide/hierarchical-dependency-injection).
+
+{@a explicit-injector}
+
+## Appendix: Working with injectors directly
+
+Developers rarely work directly with an injector, but
+here's an `InjectorComponent` that does.
+
+<code-example path="dependency-injection/src/app/injector.component.ts" region="injector" title="src/app/injector.component.ts">
+</code-example>
+
+An `Injector` is itself an injectable service.
+
+In this example, Angular injects the component's own `Injector` into the component's constructor.
+The component then asks the injected injector for the services it wants in `ngOnInit()`.
+
+Note that the services themselves are not injected into the component.
+They are retrieved by calling `injector.get()`.
+
+The `get()` method throws an error if it can't resolve the requested service.
+You can call `get()` with a second parameter, which is the value to return if the service
+is not found. Angular can't find the service if it's not registered with this or any ancestor injector.
+
+
+<div class="alert is-helpful">
+
+
+
+The technique is an example of the
+[service locator pattern](https://en.wikipedia.org/wiki/Service_locator_pattern).
+
+**Avoid** this technique unless you genuinely need it.
+It encourages a careless grab-bag approach such as you see here.
+It's difficult to explain, understand, and test.
+You can't know by inspecting the constructor what this class requires or what it will do.
+It could acquire services from any ancestor component, not just its own.
+You're forced to spelunk the implementation to discover what it does.
+
+Framework developers may take this approach when they
+must acquire services generically and dynamically.
+
+
+</div>
+
+{@a one-class-per-file}
+
+## Appendix: one class per file
+
+Having multiple classes in the same file is confusing and best avoided.
+Developers expect one class per file. Keep them happy.
+
+If you combine the `HeroService` class with
+the `HeroesComponent` in the same file,
+**define the component last**.
+If you define the component before the service,
+you'll get a runtime null reference error.
+
+
+<div class="alert is-helpful">
+
+You actually can define the component first with the help of the `forwardRef()` method as explained
+in this [blog post](http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html).
+
+But it's best to avoid the problem altogether by defining components and services in separate files.
+
+</div>
+
diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md
new file mode 100644
index 000000000000..95e3799a2f74
--- /dev/null
+++ b/aio/content/guide/deployment.md
@@ -0,0 +1,381 @@
+# Deployment
+
+This page describes techniques for deploying your Angular application to a remote server.
+
+{@a dev-deploy}
+{@a copy-files}
+
+## Simplest deployment possible
+
+For the simplest deployment, build for development and copy the output directory to a web server.
+
+1. Start with the development build
+
+  <code-example language="none" class="code-shell">
+    ng build
+  </code-example>
+
+
+2. Copy _everything_ within the output folder (`dist/` by default) to a folder on the server.
+
+
+3. If you copy the files into a server _sub-folder_, append the build flag, `--base-href` and set the `<base href>` appropriately.<br><br>
+
+  For example, if the `index.html` is on the server at `/my/app/index.html`, set the _base href_  to
+  `<base href="/my/app/">` like this.
+
+  <code-example language="none" class="code-shell">
+    ng build --base-href=/my/app/
+  </code-example>
+
+  You'll see that the `<base href>` is set properly in the generated `dist/index.html`.<br><br>
+  If you copy to the server's root directory, omit this step and leave the `<base href>` alone.<br><br>
+  Learn more about the role of `<base href>` [below](guide/deployment#base-tag).
+
+
+4. Configure the server to redirect requests for missing files to `index.html`.
+Learn more about server-side redirects [below](guide/deployment#fallback).
+
+
+This is _not_ a production deployment. It's not optimized and it won't be fast for users.
+It might be good enough for sharing your progress and ideas internally with managers, teammates, and other stakeholders.
+
+{@a optimize}
+
+## Optimize for production
+
+Although deploying directly from the development environment works, 
+you can generate an optimized build with additional CLI command line flags,
+starting with `--prod`.
+
+### Build with _--prod_
+
+<code-example language="none" class="code-shell">
+  ng build --prod
+</code-example>
+
+The `--prod` _meta-flag_ engages the following optimization features.
+
+* [Ahead-of-Time (AOT) Compilation](guide/aot-compiler): pre-compiles Angular component templates.
+* [Production mode](#enable-prod-mode): deploys the production environment which enables _production mode_.
+* Bundling: concatenates your many application and library files into a few bundles.
+* Minification: removes excess whitespace, comments, and optional tokens.
+* Uglification: rewrites code to use short, cryptic variable and function names.
+* Dead code elimination: removes unreferenced modules and much unused code.
+
+The remaining [copy deployment steps](#copy-files) are the same as before.
+
+You may further reduce bundle sizes by adding the `build-optimizer` flag.
+
+<code-example language="none" class="code-shell">
+  ng build --prod --build-optimizer
+</code-example>
+
+See the [CLI Documentation](https://github.com/angular/angular-cli/wiki/build) 
+for details about available build options and what they do.
+
+{@a enable-prod-mode}
+
+### Enable production mode
+
+Angular apps run in development mode by default, as you can see by the following message on the browser
+console:
+
+<code-example format="nocode">
+  Angular is running in the development mode. Call enableProdMode() to enable the production mode.
+</code-example>
+
+Switching to _production mode_ can make it run faster by disabling development specific checks such as the dual change detection cycles.
+
+Building for production (or appending the `--environment=prod` flag) enables _production mode_
+Look at the CLI-generated `main.ts` to see how this works.
+
+{@a lazy-loading}
+
+### Lazy loading
+
+You can dramatically reduce launch time by only loading the application modules that
+absolutely must be present when the app starts.
+
+Configure the Angular Router to defer loading of all other modules (and their associated code), either by
+[waiting until the app has launched](guide/router#preloading  "Preloading")
+or by [_lazy loading_](guide/router#asynchronous-routing "Lazy loading")
+them on demand.
+
+#### Don't eagerly import something from a lazy loaded module
+
+It's a common mistake.
+You've arranged to lazy load a module.
+But you unintentionally import it, with a JavaScript `import` statement,
+in a file that's eagerly loaded when the app starts, a file such as the root `AppModule`.
+If you do that, the module will be loaded immediately.
+
+The bundling configuration must take lazy loading into consideration.
+Because lazy loaded modules aren't imported in JavaScript (as just noted), bundlers exclude them by default.
+Bundlers don't know about the router configuration and won't create separate bundles for lazy loaded modules.
+You have to create these bundles manually.
+
+The CLI runs the
+[Angular Ahead-of-Time Webpack Plugin](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack)
+which automatically recognizes lazy loaded `NgModules` and creates separate bundles for them.
+
+{@a measure}
+
+### Measure performance
+
+You can make better decisions about what to optimize and how when you have a clear and accurate understanding of
+what's making the application slow.
+The cause may not be what you think it is.
+You can waste a lot of time and money optimizing something that has no tangible benefit or even makes the app slower.
+You should measure the app's actual behavior when running in the environments that are important to you.
+
+The
+<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.
+
+The [WebPageTest](https://www.webpagetest.org/) tool is another good choice
+that can also help verify that your deployment was successful.
+
+{@a inspect-bundle}
+
+### Inspect the bundles
+
+The <a href="https://github.com/danvk/source-map-explorer/blob/master/README.md">source-map-explorer</a>
+tool is a great way to inspect the generated JavaScript bundles after a production build.
+
+Install `source-map-explorer`:
+
+<code-example language="none" class="code-shell">
+  npm install source-map-explorer --save-dev
+</code-example>
+
+Build your app for production _including the source maps_
+
+<code-example language="none" class="code-shell">
+  ng build --prod --source-map
+</code-example>
+
+List the generated bundles in the `dist/` folder.
+
+<code-example language="none" class="code-shell">
+  ls dist/*.bundle.js
+</code-example>
+
+Run the explorer to generate a graphical representation of one of the bundles.
+The following example displays the graph for the _main_ bundle.
+
+<code-example language="none" class="code-shell">
+  node_modules/.bin/source-map-explorer dist/main.*.bundle.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 classes are included in the bundle.
+
+Here's the output for the _main_ bundle of the QuickStart.
+
+<figure>
+  <img src="generated/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
+</figure>
+
+{@a base-tag}
+
+## The `base` tag
+
+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`.
+During navigation, the Angular router uses the _base href_ as the base path to component, template, and module files.
+
+<div class="alert is-helpful">
+
+See also the [*APP_BASE_HREF*](api/common/APP_BASE_HREF "API: APP_BASE_HREF") alternative.
+
+</div>
+
+In development, you typically start the server in the folder that holds `index.html`.
+That's the root folder and you'd add `<base href="/">` near the top of `index.html` because `/` is the root of the app.
+
+But on the shared or production server, you might serve the app from a subfolder.
+For example, when the URL to load the app is something like `http://www.mysite.com/my/app/`,
+the subfolder is `my/app/` and you should add `<base href="/my/app/">` to the server version of the `index.html`.
+
+When the `base` tag is mis-configured, the app fails to load and the browser console displays `404 - Not Found` errors
+for the missing files. Look at where it _tried_ to find those files and adjust the base tag appropriately.
+
+## _build_ vs. _serve_
+
+You'll probably prefer `ng build` for deployments.
+
+The **ng build** command is intended for building the app and deploying the build artifacts elsewhere.
+The **ng serve** command is intended for fast, local, iterative development.
+
+Both `ng build` and `ng serve` **clear the output folder** before they build the project.
+The `ng build` command writes generated build artifacts to the output folder.
+The `ng serve` command does not.
+It serves build artifacts from memory instead for a faster development experience.
+
+<div class="alert is-helpful">
+
+The output folder is  `dist/` by default.
+To output to a different folder, change the `outputPath` in `angular.json`.
+
+</div>
+
+The `ng serve` command builds, watches, and serves the application from a local CLI development server.
+
+The `ng build` command generates output files just once and does not serve them.
+The `ng build --watch` command will regenerate output files when source files change.
+This `--watch` flag is useful if you're building during development and 
+are automatically re-deploying changes to another server.
+
+
+See the [CLI `build` topic](https://github.com/angular/angular-cli/wiki/build) for more details and options.
+
+<hr>
+
+{@a server-configuration}
+
+## Server configuration
+
+This section covers changes you may have make to the server or to files deployed to the server.
+
+{@a fallback}
+
+### Routed apps must fallback to `index.html`
+
+Angular apps are perfect candidates for serving with a simple static HTML server.
+You don't need a server-side engine to dynamically compose application pages because
+Angular does that on the client-side.
+
+If the app uses the Angular router, you must configure the server
+to return the application's host page (`index.html`) when asked for a file that it does not have.
+
+{@a deep-link}
+
+
+A routed application should support "deep links".
+A _deep link_ is a URL that specifies a path to a component inside the app.
+For example, `http://www.mysite.com/heroes/42` is a _deep link_ to the hero detail page
+that displays the hero with `id: 42`.
+
+There is no issue when the user navigates to that URL from within a running client.
+The Angular router interprets the URL and routes to that page and hero.
+
+But clicking a link in an email, entering it in the browser address bar,
+or merely refreshing the browser while on the hero detail page &mdash;
+all of these actions are handled by the browser itself, _outside_ the running application.
+The browser makes a direct request to the server for that URL, bypassing the router.
+
+A static server routinely returns `index.html` when it receives a request for `http://www.mysite.com/`.
+But it rejects `http://www.mysite.com/heroes/42` and returns a `404 - Not Found` error *unless* it is
+configured to return `index.html` instead.
+
+#### Fallback configuration examples
+
+There is no single configuration that works for every server.
+The following sections describe configurations for some of the most popular servers.
+The list is by no means exhaustive, but should provide you with a good starting point.
+
+#### Development servers
+
+* [Lite-Server](https://github.com/johnpapa/lite-server): the default dev server installed with the
+[Quickstart repo](https://github.com/angular/quickstart) is pre-configured to fallback to `index.html`.
+
+
+* [Webpack-Dev-Server](https://github.com/webpack/webpack-dev-server):  setup the
+`historyApiFallback` entry in the dev server options as follows:
+
+  <code-example>
+    historyApiFallback: {
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
+    }
+  </code-example>
+
+
+#### Production servers
+
+* [Apache](https://httpd.apache.org/): add a
+[rewrite rule](http://httpd.apache.org/docs/current/mod/mod_rewrite.html) to the `.htaccess` file as shown
+  (https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/):
+
+  <code-example format=".">
+    RewriteEngine On
+    &#35 If an existing asset or directory is requested go to it as it is
+    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
+    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
+    RewriteRule ^ - [L]
+
+    &#35 If the requested resource doesn't exist, use index.html
+    RewriteRule ^ /index.html
+  </code-example>
+
+
+* [NGinx](http://nginx.org/): use `try_files`, as described in
+[Front Controller Pattern Web Apps](https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/#front-controller-pattern-web-apps),
+modified to serve `index.html`:
+
+  <code-example format=".">
+    try_files $uri $uri/ /index.html;
+  </code-example>
+
+
+* [IIS](https://www.iis.net/): add a rewrite rule to `web.config`, similar to the one shown
+[here](http://stackoverflow.com/a/26152011/2116927):
+
+  <code-example format='.'>
+    &lt;system.webServer&gt;
+      &lt;rewrite&gt;
+        &lt;rules&gt;
+          &lt;rule name="Angular Routes" stopProcessing="true"&gt;
+            &lt;match url=".*" /&gt;
+            &lt;conditions logicalGrouping="MatchAll"&gt;
+              &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt;
+              &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt;
+            &lt;/conditions&gt;
+            &lt;action type="Rewrite" url="/index.html" /&gt;
+          &lt;/rule&gt;
+        &lt;/rules&gt;
+      &lt;/rewrite&gt;
+    &lt;/system.webServer&gt;
+
+  </code-example>
+
+
+* [GitHub Pages](https://pages.github.com/): you can't
+[directly configure](https://github.com/isaacs/github/issues/408)
+the GitHub Pages server, but you can add a 404 page.
+Copy `index.html` into `404.html`.
+It will still be served as the 404 response, but the browser will process that page and load the app properly.
+It's also a good idea to
+[serve from `docs/` on master](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch)
+and to
+[create a `.nojekyll` file](https://www.bennadel.com/blog/3181-including-node-modules-and-vendors-folders-in-your-github-pages-site.htm)
+
+
+* [Firebase hosting](https://firebase.google.com/docs/hosting/): add a
+[rewrite rule](https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites).
+
+  <code-example format=".">
+    "rewrites": [ {
+      "source": "**",
+      "destination": "/index.html"
+    } ]
+
+  </code-example>
+
+{@a cors}
+
+### Requesting services from a different server (CORS)
+
+Angular developers may encounter a
+<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.
+
+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" title="Enabling CORS server">enable-cors.org</a>.
diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md
new file mode 100644
index 000000000000..6f3ba5ea453d
--- /dev/null
+++ b/aio/content/guide/displaying-data.md
@@ -0,0 +1,395 @@
+# Displaying Data
+
+You can display data by binding controls in an HTML template to properties of an Angular component.
+
+In this page, you'll create a component with a list of heroes.
+You'll display the list of hero names and
+conditionally show a message below the list.
+
+The final UI looks like this:
+
+
+<figure>
+  <img src="generated/images/guide/displaying-data/final.png" alt="Final UI">
+</figure>
+
+<div class="alert is-helpful">
+
+
+
+The <live-example></live-example> demonstrates all of the syntax and code
+snippets described in this page.
+
+
+</div>
+
+
+{@a interpolation}
+
+## Showing component properties with interpolation
+The easiest way to display a component property
+is to bind the property name through interpolation.
+With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
+
+Follow the [quickstart](guide/quickstart) instructions for creating a new project
+named <code>displaying-data</code>.
+
+Delete the <code>app.component.html</code> file. It is not needed for this example.
+
+Then modify the <code>app.component.ts</code> file by
+changing the template and the body of the component.
+
+When you're done, it should look like this:
+
+
+<code-example path="displaying-data/src/app/app.component.1.ts" title="src/app/app.component.ts">
+
+</code-example>
+
+
+
+You added two properties to the formerly empty component: `title` and `myHero`.
+
+The template displays the two component properties using double curly brace
+interpolation:
+
+
+<code-example path="displaying-data/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (template)" region="template">
+
+</code-example>
+
+
+
+<div class="alert is-helpful">
+
+
+
+The template is a multi-line string within ECMAScript 2015 backticks (<code>\`</code>).
+The backtick (<code>\`</code>)&mdash;which is *not* the same character as a single
+quote (`'`)&mdash;allows you to compose a string over several lines, which makes the
+HTML more readable.
+
+
+</div>
+
+
+
+Angular automatically pulls the value of the `title` and `myHero` properties from the component and
+inserts those values into the browser. Angular updates the display
+when these properties change.
+
+
+<div class="alert is-helpful">
+
+
+
+More precisely, the redisplay occurs after some kind of asynchronous event related to
+the view, such as a keystroke, a timer completion, or a response to an HTTP request.
+
+
+</div>
+
+
+
+Notice that you don't call **new** to create an instance of the `AppComponent` class.
+Angular is creating an instance for you. How?
+
+The CSS `selector` in the `@Component` decorator specifies an element named `<app-root>`.
+That element is a placeholder in the body of your `index.html` file:
+
+
+<code-example path="displaying-data/src/index.html" linenums="false" title="src/index.html (body)" region="body">
+
+</code-example>
+
+
+
+When you bootstrap with the `AppComponent` class (in <code>main.ts</code>), Angular looks for a `<app-root>`
+in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it
+inside the `<app-root>` tag.
+
+Now run the app. It should display the title and hero name:
+
+<figure>
+  <img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero">
+</figure>
+
+
+
+The next few sections review some of the coding choices in the app.
+
+
+## Template inline or template file?
+
+You can store your component's template in one of two places.
+You can define it *inline* using the `template` property, or you can define
+the template in a separate HTML file and link to it in
+the component metadata using the `@Component` decorator's `templateUrl` property.
+
+The choice between inline and separate HTML is a matter of taste,
+circumstances, and organization policy.
+Here the app uses inline HTML because the template is small and the demo
+is simpler without the additional HTML file.
+
+In either style, the template data bindings have the same access to the component's properties.
+
+<div class="alert is-helpful">
+  
+  By default, the Angular CLI generates components with a template file. You can override that with:
+
+  <code-example hideCopy language="sh" class="code-shell">
+    ng generate component hero -it
+  </code-example>
+
+</div>
+
+
+## Constructor or variable initialization?
+
+Although this example uses variable assignment to initialize the components, you could instead declare and initialize the properties using a constructor:
+
+
+<code-example path="displaying-data/src/app/app-ctor.component.ts" linenums="false" region="class">
+
+</code-example>
+
+
+
+This app uses more terse "variable assignment" style simply for brevity.
+
+{@a ngFor}
+
+## Showing an array property with ***ngFor**
+
+To display a list of heroes, begin by adding an array of hero names to the component and redefine `myHero` to be the first name in the array.
+
+
+<code-example path="displaying-data/src/app/app.component.2.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
+
+</code-example>
+
+
+
+Now use the Angular `ngFor` directive in the template to display
+each item in the `heroes` list.
+
+
+<code-example path="displaying-data/src/app/app.component.2.ts" linenums="false" title="src/app/app.component.ts (template)" region="template">
+
+</code-example>
+
+
+
+This UI uses the HTML unordered list with `<ul>` and `<li>` tags. The `*ngFor`
+in the `<li>` element is the Angular "repeater" directive.
+It marks that `<li>` element (and its children) as the "repeater template":
+
+
+<code-example path="displaying-data/src/app/app.component.2.ts" linenums="false" title="src/app/app.component.ts (li)" region="li">
+
+</code-example>
+
+
+
+<div class="alert is-important">
+
+
+
+Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax.
+For more information, see the [Template Syntax](guide/template-syntax#ngFor) page.
+
+
+</div>
+
+
+
+Notice the `hero` in the `ngFor` double-quoted instruction;
+it is an example of a template input variable. Read
+more about template input variables in the [microsyntax](guide/template-syntax#microsyntax) section of
+the [Template Syntax](guide/template-syntax) page.
+
+Angular duplicates the `<li>` for each item in the list, setting the `hero` variable
+to the item (the hero) in the current iteration. Angular uses that variable as the
+context for the interpolation in the double curly braces.
+
+
+<div class="alert is-helpful">
+
+
+
+In this case, `ngFor` is displaying an array, but `ngFor` can
+repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) object.
+
+</div>
+
+
+
+Now the heroes appear in an unordered list.
+
+
+<figure>
+  <img src="generated/images/guide/displaying-data/hero-names-list.png" alt="After ngfor">
+</figure>
+
+
+
+
+## Creating a class for the data
+
+The app's code defines the data directly inside the component, which isn't best practice.
+In a simple demo, however, it's fine.
+
+At the moment, the binding is to an array of strings.
+In real applications, most bindings are to more specialized objects.
+
+To convert this binding to use specialized objects, turn the array
+of hero names into an array of `Hero` objects. For that you'll need a `Hero` class:
+
+<code-example language="sh" class="code-shell">
+  ng generate class hero
+</code-example>
+
+With the following code:
+
+
+<code-example path="displaying-data/src/app/hero.ts" linenums="false" title="src/app/hero.ts">
+
+</code-example>
+
+
+
+You've defined a class with a constructor and two properties: `id` and `name`.
+
+It might not look like the class has properties, but it does.
+The declaration of the constructor parameters takes advantage of a TypeScript shortcut.
+
+Consider the first parameter:
+
+
+<code-example path="displaying-data/src/app/hero.ts" linenums="false" title="src/app/hero.ts (id)" region="id">
+
+</code-example>
+
+
+
+That brief syntax does a lot:
+
+* Declares a constructor parameter and its type.
+* Declares a public property of the same name.
+* Initializes that property with the corresponding argument when creating an instance of the class.
+
+
+
+### Using the Hero class
+
+After importing the `Hero` class, the `AppComponent.heroes` property can return a _typed_ array
+of `Hero` objects:
+
+
+<code-example path="displaying-data/src/app/app.component.3.ts" linenums="false" title="src/app/app.component.ts (heroes)" region="heroes">
+
+</code-example>
+
+
+
+Next, update the template.
+At the moment it displays the hero's `id` and `name`.
+Fix that to display only the hero's `name` property.
+
+
+<code-example path="displaying-data/src/app/app.component.3.ts" linenums="false" title="src/app/app.component.ts (template)" region="template">
+
+</code-example>
+
+
+
+The display looks the same, but the code is clearer.
+
+{@a ngIf}
+
+## Conditional display with NgIf
+
+Sometimes an app needs to display a view or a portion of a view only under specific circumstances.
+
+Let's change the example to display a message if there are more than three heroes.
+
+The Angular `ngIf` directive inserts or removes an element based on a _truthy/falsy_ condition.
+To see it in action, add the following paragraph at the bottom of the template:
+
+
+<code-example path="displaying-data/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (message)" region="message">
+
+</code-example>
+
+
+
+<div class="alert is-important">
+
+
+
+Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
+Read more about `ngIf` and `*` in the [ngIf section](guide/template-syntax#ngIf) of the [Template Syntax](guide/template-syntax) page.
+
+
+</div>
+
+
+
+The template expression inside the double quotes,
+`*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,
+see the [template expressions](guide/template-syntax#template-expressions) section of the
+[Template Syntax](guide/template-syntax) page.
+
+
+<div class="alert is-helpful">
+
+
+
+Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in larger projects when conditionally including or excluding
+big chunks of HTML with many data bindings.
+
+
+</div>
+
+
+
+Try it out. Because the array has four items, the message should appear.
+Go back into <code>app.component.ts"</code> and delete or comment out one of the elements from the hero array.
+The browser should refresh automatically and the message should disappear.
+
+
+
+## Summary
+Now you know how to use:
+
+* **Interpolation** with double curly braces to display a component property.
+* **ngFor** to display an array of items.
+* A TypeScript class to shape the **model data** for your component and display properties of that model.
+* **ngIf** to conditionally display a chunk of HTML based on a boolean expression.
+
+Here's the final code:
+
+
+<code-tabs>
+
+  <code-pane title="src/app/app.component.ts" path="displaying-data/src/app/app.component.ts" region="final">
+
+  </code-pane>
+
+  <code-pane title="src/app/hero.ts" path="displaying-data/src/app/hero.ts">
+
+  </code-pane>
+
+  <code-pane title="src/app/app.module.ts" path="displaying-data/src/app/app.module.ts">
+
+  </code-pane>
+
+  <code-pane title="main.ts" path="displaying-data/src/main.ts">
+
+  </code-pane>
+
+</code-tabs>
+
diff --git a/aio/content/guide/docs-style-guide.md b/aio/content/guide/docs-style-guide.md
new file mode 100644
index 000000000000..48d875d8f0ab
--- /dev/null
+++ b/aio/content/guide/docs-style-guide.md
@@ -0,0 +1,1288 @@
+# 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, stackblitz, 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.
+
+You can combine `yarn docs-watch` and `yarn start` into one command with `yarn serve-and-sync`.
+
+## 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="alert is-helpful">
+
+_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="alert is-helpful">
+
+  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 ...
+```
+
+## 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="alert is-helpful">
+
+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="alert is-helpful">
+
+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>
+
+<div class="alert is-important">
+
+The doc tooling reports an error if the file identified in the path does not exist **or is _git_-ignored**.
+
+Most `.js` files are _git_-ignored.
+If you want to include an ignored code file in your project and display it in a guide you must _un-ignore_ it.
+
+The preferred way to un-ignore a file is to update the `content/examples/.gitignore` like this:
+
+<code-example title="content/examples/.gitignore">
+  # my-guide
+  !my-guide/src/something.js
+  !my-guide/more-javascript*.js
+</code-example>
+
+</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 multiple 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="alert is-helpful">
+
+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 stackblitz 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="alert is-helpful">
+
+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="alert is-helpful">
+
+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 stackblitz by listing them in the `stackblitz.json` as illustrated here.
+
+<code-example
+  path="docs-style-guide/stackblitz.json"
+  title="stackblitz.json"></code-example>
+
+{@a live-examples}
+## Live examples
+
+By adding `<live-example>` to the page you generate links that run sample code in the Stackblitz live coding environment and download that code to the reader's file system.
+
+Live examples (AKA "stackblitz") are defined by one or more `stackblitz.json` files in the root of a code sample folder. Each sample folder usually has a single unnamed definition file, the default `stackblitz.json`.
+
+<div class="alert is-helpful">
+
+You can create additional, named definition files in the form `name.stackblitz.json`. See `content/examples/testing` for examples.
+
+The schema for a `stackblitz.json` hasn't been documented yet but looking at the `stackblitz.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 Stackblitz defined by the default `stackblitz.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 on StackBlitz in a new browser tab.
+
+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 Stackblitz 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 Stackblitz</h3>
+
+To link to a Stackblitz defined by a named `stackblitz.json` file, set the `stackblitz` attribute. The following example links to the Stackblitz defined by `second.stackblitz.json` in the current guide's directory.
+
+<live-example stackblitz="second"></live-example>
+
+```html
+<live-example stackblitz="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 Stackblitz</live-example>
+
+```html
+<live-example noDownload>Just the Stackblitz</live-example>
+```
+
+<h3 class="no-toc">Live Example with download-only</h3>
+
+To skip the live Stackblitz 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 Stackblitz in a separate browser tab.
+You can embed the Stackblitz within the guide page itself by adding the `embedded` attribute.
+
+For performance reasons, the Stackblitz does not start right away. The reader sees an image instead. Clicking the image starts the sometimes-slow process of launching the embedded Stackblitz within an iframe on the page.
+
+Here's an embedded live example for this guide.
+
+```html
+<live-example embedded></live-example>
+```
+
+<live-example embedded></live-example>
+
+{@a anchors}
+
+## Anchors
+
+Every section header tag is also an anchor point. Another guide page could add a link to this section by writing:
+
+<div class="alert is-helpful">
+
+See the ["Anchors"](guide/docs-style-guide#anchors "Style Guide - Anchors") section for details.
+
+</div>
+
+```html
+<div class="alert is-helpful">
+
+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 `{@a 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="alert is-helpful">
+
+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 and Calllouts
+
+Alerts and callouts present warnings, extra detail or references to other pages. They can also be used to provide commentary that _enriches_ the reader's understanding of the content being presented.
+
+An alert or callout _must not_ contain anything _essential_ to that understanding. Don't put a critical instruction or a tutorial step in a subsection.
+
+### Alerts
+
+Alerts draw attention to short important points. Alerts should not be used for multi-line content (use [callouts](#callouts "callouts") instead).
+
+<div class="alert is-helpful">
+
+  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 both the opening and closing `<div>` tags. A blank line before the closing `</div>` is customary but not required.
+
+```html
+<div class="alert is-helpful">
+
+You'll learn about styles for live examples in the [section below](guide/docs-style-guide#live-examples "Live examples").
+
+</div>
+```
+
+There are three different _urgency levels_ used to style the alerts based on the severity or importance of the content.
+
+<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>
+```
+
+### 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.
+
+If you have more than two paragraphs, consider creating a new page or making it part of the main content.
+
+Callouts use the same _urgency levels_ that alerts do.
+
+<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 or informational 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/docs-style-guide/toh-pt6-bundle.png" title="Click to view larger image">
+  <figure>
+    <img src="generated/images/guide/docs-style-guide/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="alert is-helpful 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="alert is-helpful 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>
+```
diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md
new file mode 100644
index 000000000000..84c1e4c45d1a
--- /dev/null
+++ b/aio/content/guide/dynamic-component-loader.md
@@ -0,0 +1,200 @@
+# Dynamic Component Loader
+
+Component templates are not always fixed. An application may need to load new components at runtime.
+
+This cookbook shows you how to use `ComponentFactoryResolver` to add components dynamically.
+
+See the <live-example name="dynamic-component-loader"></live-example>
+of the code in this cookbook.
+
+{@a dynamic-loading}
+
+## Dynamic component loading
+
+The following example shows how to build a dynamic ad banner.
+
+The hero agency is planning an ad campaign with several different
+ads cycling through the banner. New ad components are added
+frequently by several different teams. This makes it impractical
+to use a template with a static component structure.
+
+Instead, you need a way to load a new component without a fixed
+reference to the component in the ad banner's template.
+
+Angular comes with its own API for loading components dynamically.
+
+
+{@a directive}
+
+## The anchor directive
+
+Before you can add components you have to define an anchor point
+to tell Angular where to insert components.
+
+The ad banner uses a helper directive called `AdDirective` to
+mark valid insertion points in the template.
+
+
+<code-example path="dynamic-component-loader/src/app/ad.directive.ts" title="src/app/ad.directive.ts" linenums="false">
+
+</code-example>
+
+
+
+`AdDirective` injects `ViewContainerRef` to gain access to the view
+container of the element that will host the dynamically added component.
+
+In the `@Directive` decorator, notice the selector name, `ad-host`;
+that's what you use to apply the directive to the element.
+The next section shows you how.
+
+{@a loading-components}
+
+## Loading components
+
+Most of the ad banner implementation is in `ad-banner.component.ts`.
+To keep things simple in this example, the HTML is in the `@Component`
+decorator's `template` property as a template string.
+
+The `<ng-template>` element is where you apply the directive you just made.
+To apply the `AdDirective`, recall the selector from `ad.directive.ts`,
+`ad-host`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
+where to dynamically load components.
+
+
+<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>
+
+
+
+The `<ng-template>` element is a good choice for dynamic components
+because it doesn't render any additional output.
+
+
+{@a resolving-components}
+
+
+## Resolving components
+
+Take a closer look at the methods in `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
+component.`AdService` returns the actual ads making up the ad campaign.
+
+Passing an array of components to `AdBannerComponent` allows for a
+dynamic list of ads without static elements in the template.
+
+With its `getAds()` method, `AdBannerComponent` cycles through the array of `AdItems`
+and loads a new component every 3 seconds by calling `loadComponent()`.
+
+
+<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>
+
+
+
+The `loadComponent()` method is doing a lot of the heavy lifting here.
+Take it step by step. First, it picks an ad.
+
+
+<div class="alert is-helpful">
+
+
+
+**How _loadComponent()_ chooses an ad**
+
+The `loadComponent()` method chooses an ad using some math.
+
+First, it sets the `currentAdIndex` by taking whatever it
+currently is plus one, dividing that by the length of the `AdItem` array, and
+using the _remainder_ as the new `currentAdIndex` value. Then, it uses that
+value to select an `adItem` from the array.
+
+
+</div>
+
+
+
+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.
+
+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.
+
+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.
+
+To add the component to the template, you call `createComponent()` on `ViewContainerRef`.
+
+The `createComponent()` method returns a reference to the loaded component.
+Use that reference to interact with the component by assigning to its properties or calling its methods.
+
+
+{@a selector-references}
+
+
+#### Selector references
+
+Generally, the Angular compiler generates a `ComponentFactory`
+for any component referenced in a template. However, there are
+no selector references in the templates for
+dynamically loaded components since they load at runtime.
+
+To ensure that the compiler still generates a factory,
+add dynamically loaded components to the `NgModule`'s `entryComponents` array:
+
+<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>
+
+
+
+{@a common-interface}
+
+
+## The _AdComponent_ interface
+
+In the ad banner, all components implement a common `AdComponent` interface to
+standardize the API for passing data to the components.
+
+Here are two sample components and the `AdComponent` interface for reference:
+
+
+<code-tabs>
+
+  <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="dynamic-component-loader/src/app/hero-profile.component.ts">
+
+  </code-pane>
+
+  <code-pane title="ad.component.ts" path="dynamic-component-loader/src/app/ad.component.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+{@a final-ad-baner}
+
+
+## Final ad banner
+ The final ad banner looks like this:
+
+<figure>
+  <img src="generated/images/guide/dynamic-component-loader/ads.gif" alt="Ads">
+</figure>
+
+
+
+See the <live-example name="dynamic-component-loader"></live-example>.
diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md
new file mode 100644
index 000000000000..c3add23dcb62
--- /dev/null
+++ b/aio/content/guide/dynamic-form.md
@@ -0,0 +1,212 @@
+# Dynamic Forms
+
+{@a top}
+
+Building handcrafted forms can be 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.
+
+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.
+It might evolve to support a much richer variety of questions, more graceful rendering, and superior user experience.
+All such greatness has humble beginnings.
+
+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}
+
+See the <live-example name="dynamic-form"></live-example>.
+
+{@a bootstrap}
+
+## Bootstrap
+
+Start by creating an `NgModule` called `AppModule`.
+
+This cookbook uses [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
+`ReactiveFormsModule` from the `@angular/forms` library.
+
+Bootstrap the `AppModule` in `main.ts`.
+
+
+<code-tabs>
+
+  <code-pane title="app.module.ts" path="dynamic-form/src/app/app.module.ts">
+
+  </code-pane>
+
+  <code-pane title="main.ts" path="dynamic-form/src/main.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+{@a object-model}
+
+## Question model
+
+The next step is to define an object model that can describe all scenarios needed by the form functionality.
+The hero application process involves a form with a lot of questions.
+The _question_ is the most fundamental object in the model.
+
+The following `QuestionBase` is a fundamental question class.
+
+
+<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`
+that represent textbox and dropdown questions.
+The idea is that the form will be bound to specific question types and render the
+appropriate controls dynamically.
+
+`TextboxQuestion` supports multiple HTML5 types such as text, email, and url
+via the `type` property.
+
+
+<code-example path="dynamic-form/src/app/question-textbox.ts" title="src/app/question-textbox.ts" linenums="false">
+
+</code-example>
+
+
+
+`DropdownQuestion` presents a list of choices in a select box.
+
+
+<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
+allows you to specify default values and validation rules.
+
+
+<code-example path="dynamic-form/src/app/question-control.service.ts" title="src/app/question-control.service.ts" linenums="false">
+
+</code-example>
+
+{@a form-component}
+
+## Question form components
+Now that you have defined the complete model you are ready
+to create components to represent the dynamic form.
+
+
+`DynamicFormComponent` is the entry point and the main container for the form.
+
+<code-tabs>
+
+  <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="dynamic-form/src/app/dynamic-form.component.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+It presents a list of questions, each bound to a `<app-question>` component element.
+The `<app-question>` tag matches the `DynamicFormQuestionComponent`,
+the component responsible for rendering the details of each _individual_
+question based on values in the data-bound question object.
+
+
+<code-tabs>
+
+  <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="dynamic-form/src/app/dynamic-form-question.component.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+Notice this component can present any type of question in your model.
+You only have two types of questions at this point but you can imagine many more.
+The `ngSwitch` determines which type of question to display.
+
+In both components  you're relying on Angular's **formGroup** to connect the template HTML to the
+underlying control objects, populated from the question model with display and validation rules.
+
+`formControlName` and `formGroup` are directives defined in
+`ReactiveFormsModule`. The templates can access these directives
+directly since you imported `ReactiveFormsModule` from `AppModule`.
+{@a questionnaire-data}
+
+## Questionnaire data
+
+`DynamicFormComponent` expects the list of questions in the form of an array bound to `@Input() questions`.
+
+ The set of questions you've defined for the job application is returned from the `QuestionService`.
+ In a real app you'd retrieve these questions from storage.
+
+ 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,
+ and removing objects from the `questions` array.
+
+
+<code-example path="dynamic-form/src/app/question.service.ts" title="src/app/question.service.ts">
+
+</code-example>
+
+
+
+Finally, display an instance of the form in the `AppComponent` shell.
+
+
+<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`.
+
+This is very important since it allows you to repurpose the components for any type of survey
+as long as it's compatible with the *question* object model.
+The key is the dynamic data binding of metadata used to render the form
+without making any hardcoded assumptions about specific questions.
+In addition to control metadata, you are also adding validation dynamically.
+
+The *Save* button is disabled until the form is in a valid state.
+When the form is valid, you can click *Save* and the app renders the current form values as JSON.
+This proves that any user input is bound back to the data model.
+Saving and retrieving the data is an exercise for another time.
+
+
+The final form looks like this:
+
+<figure>
+  <img src="generated/images/guide/dynamic-form/dynamic-form.png" alt="Dynamic-Form">
+</figure>
+
+
+
+[Back to top](guide/dynamic-form#top)
diff --git a/aio/content/guide/elements.md b/aio/content/guide/elements.md
new file mode 100644
index 000000000000..b7b076d60a59
--- /dev/null
+++ b/aio/content/guide/elements.md
@@ -0,0 +1,216 @@
+# Angular Elements Overview
+
+_Angular elements_ are Angular components packaged as _custom elements_, a web standard for defining new HTML elements in a framework-agnostic way.
+
+[Custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) are a Web Platform feature currently supported by Chrome, Opera, and Safari, and available in other browsers through polyfills (see [Browser Support](#browser-support)).
+A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code.
+The browser maintains a `CustomElementRegistry` of defined custom elements (also called Web Components), which maps an instantiable JavaScript class to an HTML tag.
+
+The `@angular/elements` package exports a `createCustomElement()` API that provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API.
+
+Transforming a component to a custom element makes all of the required Angular infrastructure available to the browser.
+Creating a custom element is simple and straightforward, and automatically connects your component-defined view with change detection and data binding, mapping Angular functionality to the corresponding native HTML equivalents.
+
+<div class="alert is-helpful">
+
+    We are working on custom elements that can be used by web apps built on other frameworks.
+    A minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality.
+    For more about the direction of development, check out this [video presentation](https://www.youtube.com/watch?v=Z1gLFPLVJjY&t=4s).
+
+</div>
+
+## Using custom elements
+
+Custom elements bootstrap themselves - they start automatically when they are added to the DOM, and are automatically destroyed when removed from the DOM. Once a custom element is added to the DOM for any page, it looks and behaves like any other HTML element, and does not require any special knowledge of Angular terms or usage conventions.
+
+- <b>Easy dynamic content in an Angular app</b>
+
+  Transforming a component to a custom element provides an easy path to creating dynamic HTML content in your Angular app. HTML content that you add directly to the DOM in an Angular app is normally displayed without Angular processing, unless you define a _dynamic component_, adding your own code to connect the HTML tag to your app data, and participate in change detection. With a custom element, all of that wiring is taken care of automatically.
+
+- <b>Content-rich applications</b>
+
+  If you have a content-rich app, such as the Angular app that presents this documentation, custom elements let you give your content providers sophisticated Angular functionality without requiring knowledge of Angular. For example, an Angular guide like this one is added directly to the DOM by the Angular navigation tools, but can include special elements like `<code-snippet>` that perform complex operations. All you need to tell your content provider is the syntax of your custom element. They don't need to know anything about Angular, or anything about your component's data structures or implementation.
+
+### How it works
+
+Use the `createCustomElement()` function to convert a component into a class that can be registered with the browser as a custom element.
+After you register your configured class with the browser's custom-element registry, you can use the new element just like a built-in HTML element in content that you add directly into the DOM:
+
+```
+<my-popup message="Use Angular!"></my-popup>
+```
+
+When your custom element is placed on a page, the browser creates an instance of the registered class and adds it to the DOM. The content is provided by the component's template, which  uses Angular template syntax, and is rendered using the component and DOM data. Input properties in the component correspond to input attributes for the element.
+
+<figure>
+
+<img src="generated/images/guide/elements/customElement1.png" alt="Custom element in browser" class="left">
+
+</figure>
+
+<hr class="clear">
+
+## Transforming components to custom elements
+
+Angular provides the `createCustomElement()` function for converting an Angular component,
+together with its dependencies, to a custom element. The function collects the component's
+observable properties, along with the Angular functionality the browser needs to
+create and destroy instances, and to detect and respond to changes.
+
+The conversion process implements the `NgElementConstructor` interface, and creates a
+constructor class that is configured to produce a self-bootstrapping instance of your component.
+
+Use a JavaScript function, `customElements.define()`,  to register the configured constructor
+and its associated custom-element tag with the browser's `CustomElementRegistry`.
+When the browser encounters the tag for the registered element, it uses the constructor to create a custom-element instance.
+
+<figure>
+
+<img src="generated/images/guide/elements/createElement.png" alt="Transform a component to a custom element" class="left">
+
+</figure>
+
+### Mapping
+
+A custom element _hosts_ an Angular component, providing a bridge between the data and logic defined in the component and standard DOM APIs. Component properties and logic maps directly into HTML attributes and the browser's event system.
+
+- The creation API parses the component looking for input properties, and defines corresponding attributes for the custom element. It transforms the property names to make them compatible with custom elements, which do not recognize case distinctions. The resulting attribute names use dash-separated lowercase. For example, for a component with `@Input('myInputProp') inputProp`, the corresponding custom element defines an attribute `my-input-prop`.
+
+- Component outputs are dispatched as HTML [Custom Events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent), with the name of the custom event matching the output name. For example, for a component with `@Output() valueChanged = new EventEmitter()`, the corresponding custom element will dispatch events with the name "valueChanged", and the emitted data will be stored on the event’s `detail` property. If you provide an alias, that value is used; for example, `@Output('myClick') clicks = new EventEmitter<string>();` results in dispatch events with the name "myClick".
+
+
+For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events).
+
+
+{@a browser-support}
+
+## Browser support for custom elements
+
+The recently-developed [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) Web Platform feature is currently supported natively in a number of browsers. Support is pending or planned in other browsers.
+
+<table>
+<tr>
+  <th>Browser</th>
+  <th>Custom Element Support</th>
+</tr>
+<tr>
+  <td>Chrome</td>
+  <td>Supported natively.</td>
+</tr>
+<tr>
+  <td>Opera</td>
+  <td>Supported natively.</td>
+</tr>
+<tr>
+  <td>Safari</td>
+  <td>Supported natively.</td>
+</tr>
+<tr>
+  <td>Firefox</td>
+  <td> Set the <code>dom.webcomponents.enabled</code> and <code>dom.webcomponents.customelements.enabled</code> preferences to true. Planned to be enabled by default in version 60/61.</td>
+</tr>
+<tr>
+  <td>Edge</td>
+  <td>Working on an implementation. <br>
+
+  </td>
+</tr>
+</table>
+
+In browsers that support Custom Elements natively, the specification requires developers use ES2015 classes to define Custom Elements - developers can opt-in to this by setting the `target: "es2015"` property in their project's `tsconfig.json`. As Custom Element and ES2015 support may not be available in all browsers, developers can instead choose to use a polyfill to support older browsers and ES5 code.
+
+Use the [Angular CLI](https://cli.angular.io/) to automatically set up your project with the correct polyfill: `ng add @angular/elements --name=*your_project_name*`.
+- For more information about polyfills, see [polyfill documentation](https://www.webcomponents.org/polyfills).
+
+- For more information about Angular browser support, see [Browser Support](guide/browser-support).
+
+
+## Example: A Popup Service
+
+Previously, when you wanted to add a component to an app at runtime, you had to define a _dynamic component_. The app module would have to list your dynamic component under `entryComponents`, so that the app wouldn't expect it to be present at startup, and then you would have to load it, attach it to an element in the DOM, and wire up all of the dependencies, change detection, and event handling, as described in [Dynamic Component Loader](guide/dynamic-component-loader).
+
+Using an Angular custom element makes the process much simpler and more transparent, by providing all of the infrastructure and framework automatically&mdash;all you have to do is define the kind of event handling you want. (You do still have to exclude the component from compilation, if you are not going to use it in your app.)
+
+The Popup Service example app (shown below) defines a component that you can either load dynamically or convert to a custom element.
+
+- `popup.component.ts` defines a simple pop-up element that displays an input message, with some animation and styling.
+- `popup.service.ts` creates an injectable service that provides two different ways to invoke the PopupComponent; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method.
+- `app.module.ts` adds the PopupComponent in the module's `entryComponents` list, to exclude it from compilation and avoid startup warnings or errors.
+- `app.component.ts` defines the app's root component, which uses the PopupService to add the pop-up to the DOM at run time. When the app runs, the root component's constructor converts PopupComponent to a custom element.
+
+For comparison, the demo shows both methods. One button adds the popup using the dynamic-loading method, and the other uses the custom element. You can see that the result is the same; only the preparation is different.
+
+<code-tabs>
+
+  <code-pane title="popup.component.ts" path="elements/src/app/popup.component.ts">
+
+  </code-pane>
+
+  <code-pane title="popup.service.ts" path="elements/src/app/popup.service.ts">
+
+  </code-pane>
+
+  <code-pane title="app.module.ts" path="elements/src/app/app.module.ts">
+
+  </code-pane>
+
+  <code-pane title="app.component.ts" path="elements/src/app/app.component.ts">
+
+  </code-pane>
+</code-tabs>
+
+<!--
+  StackBlitz transpiles code to ES5. The live example will not work without a polyfill.
+  Only offer a `.zip` to download for now.
+-->
+You can download the full code for the example <live-example downloadOnly>here</live-example>.
+
+
+## Typings for custom elements
+
+Generic DOM APIs, such as `document.createElement()` or `document.querySelector()`, return an element type that is appropriate for the specified arguments. For example, calling `document.createElement('a')` will return an `HTMLAnchorElement`, which TypeScript knows has an `href` property. Similarly, `document.createElement('div')` will return an `HTMLDivElement`, which TypeScript knows has no `href` property.
+
+When called with unknown elements, such as a custom element name (`popup-element` in our example), the methods will return a generic type, such as `HTMLELement`, since TypeScript can't infer the correct type of the returned element.
+
+Custom elements created with Angular extend `NgElement` (which in turn extends `HTMLElement`). Additionally, these custom elements will have a property for each input of the corresponding component. For example, our `popup-element` will have a `message` property of type `string`.
+
+There are a few options if you want to get correct types for your custom elements. Let's assume you create a `my-dialog` custom element based on the following component:
+
+```ts
+@Component(...)
+class MyDialog {
+  @Input() content: string;
+}
+```
+
+The most straight forward way to get accurate typings is to cast the return value of the relevant DOM methods to the correct type. For that, you can use the `NgElement` and `WithProperties` types (both exported from `@angular/elements`):
+
+```ts
+const aDialog = document.createElement('my-dialog') as NgElement & WithProperties<{content: string}>;
+aDialog.content = 'Hello, world!';
+aDialog.content = 123;  // <-- ERROR: TypeScript knows this should be a string.
+aDialog.body = 'News';  // <-- ERROR: TypeScript knows there is no `body` property on `aDialog`.
+```
+
+This is a good way to quickly get TypeScript features, such as type checking and autocomplete support, for you custom element. But it can get cumbersome if you need it in several places, because you have to cast the return type on every occurrence.
+
+An alternative way, that only requires defining each custom element's type once, is augmenting the `HTMLELementTagNameMap`, which TypeScript uses to infer the type of a returned element based on its tag name (for DOM methods such as `document.createElement()`, `document.querySelector()`, etc.):
+
+```ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'my-dialog': NgElement & WithProperties<{content: string}>;
+    'my-other-element': NgElement & WithProperties<{foo: 'bar'}>;
+    ...
+  }
+}
+```
+
+Now, TypeScript can infer the correct type the same way it does for built-in elements:
+
+```ts
+document.createElement('div')               //--> HTMLDivElement (built-in element)
+document.querySelector('foo')               //--> Element        (unknown element)
+document.createElement('my-dialog')         //--> NgElement & WithProperties<{content: string}> (custom element)
+document.querySelector('my-other-element')  //--> NgElement & WithProperties<{foo: 'bar'}>      (custom element)
+```
diff --git a/aio/content/guide/entry-components.md b/aio/content/guide/entry-components.md
new file mode 100644
index 000000000000..990c8ae84a84
--- /dev/null
+++ b/aio/content/guide/entry-components.md
@@ -0,0 +1,113 @@
+# Entry Components
+
+#### Prerequisites:
+
+A basic understanding of the following concepts:
+* [Bootstrapping](guide/bootstrapping).
+
+<hr />
+
+An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition.
+
+<div class="alert is-helpful">
+
+To contrast the two types of components, there are components which are included in the template, which are declarative.  Additionally, there are  components which you load imperatively; that is, entry components.
+
+</div>
+
+
+There are two main kinds of entry components:
+
+* The bootstrapped root component.
+* A component you specify in a route definition.
+
+
+## A bootstrapped entry component
+
+
+The following is an example of specifying a bootstrapped component,
+`AppComponent`, in a basic `app.module.ts`:
+
+```typescript
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    AppRoutingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent] // bootstrapped entry component
+})
+```
+
+A bootstrapped component is an entry component
+that Angular loads into the DOM during the bootstrap process (application launch).
+Other entry components are loaded dynamically by other means, such as with the router.
+
+Angular loads a root `AppComponent` dynamically because it's listed by type in `@NgModule.bootstrap`.
+
+<div class="alert is-helpful">
+
+A component can also be bootstrapped imperatively in the module's `ngDoBootstrap()` method.
+The `@NgModule.bootstrap` property tells the compiler that this is an entry component and
+it should generate code to bootstrap the application with this component.
+
+</div>
+
+
+A bootstrapped component is necessarily an entry component because bootstrapping is an imperative process, thus it needs to have an entry component.
+
+## A routed entry component
+
+
+The second kind of entry component occurs in a route definition like
+this:
+
+```typescript
+const routes: Routes = [
+  {
+    path: '',
+    component: CustomerListComponent
+  }
+];
+```
+
+A route definition refers to a component by its type with `component: CustomerListComponent`.
+
+All router components must be entry components. Because this would require you to add the component in two places (router and `entryComponents`) the Compiler is smart enough to recognize that this is a router definition and automatically add the router component into `entryComponents`.
+
+
+## The `entryComponents` array
+
+Though the `@NgModule` decorator has an `entryComponents` array, most of the time
+you won't have to explicitly set any entry components because Angular adds components listed in `@NgModule.bootstrap` and those in route definitions to entry components automatically. Though these two mechanisms account for most entry components, if your app happens to bootstrap or dynamically load a component by type imperatively,
+you must add it to `entryComponents` explicitly.
+
+### `entryComponents` and the compiler
+
+For production apps you want to load the smallest code possible.
+The code should contain only the classes that you actually need and
+exclude components that are never used. For this reason, the Angular compiler only generates code for components which are reachable from the `entryComponents`; This means that adding more references to `@NgModule.declarations` does not imply that they will necessarily be included in the final bundle.
+
+In fact, many libraries declare and export components you'll never use.
+For example, a material design library will export all components because it doesn’t know which ones you will use. However, it is unlikely that you will use them all.
+For the ones you don't reference, the tree shaker drops these components from the final code package.
+
+If a component isn't an _entry component_ and isn't found in a template,
+the tree shaker will throw it away. So, it's best to add only the components that are truly entry components to help keep your app
+as trim as possible.
+
+
+<hr />
+
+## More on Angular modules
+
+You may also be interested in the following:
+* [Types of NgModules](guide/module-types)
+* [Lazy Loading Modules with the Angular Router](guide/lazy-loading-ngmodules).
+* [Providers](guide/providers).
+* [NgModules FAQ](guide/ngmodule-faq).
diff --git a/aio/content/guide/feature-modules.md b/aio/content/guide/feature-modules.md
new file mode 100644
index 000000000000..047a453de5bb
--- /dev/null
+++ b/aio/content/guide/feature-modules.md
@@ -0,0 +1,128 @@
+# Feature Modules
+
+Feature modules are NgModules for the purpose of  organizing code.
+
+#### Prerequisites
+A basic understanding of the following:
+* [Bootstrapping](guide/bootstrapping).
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
+* [Frequently Used Modules](guide/frequent-ngmodules).
+
+For the final sample app with a feature module that this page describes,
+see the <live-example></live-example>.
+
+<hr>
+
+As your app grows, you can organize code relevant for a specific feature.
+This helps apply clear boundaries for features. With feature modules,
+you can keep code related to a specific functionality or feature
+separate from other code. Delineating areas of your
+app helps with collaboration between developers and teams, separating
+directives, and managing the size of the root module.
+
+
+## Feature modules vs. root modules
+
+A feature module is an organizational best practice, as opposed to a concept of the core Angular API. A feature module delivers a cohesive set of functionality focused on a
+specific application need such as a user workflow, routing, or forms.
+While you can do everything within the root module, feature modules
+help you partition the app into focused areas. A feature module
+collaborates with the root module and with other modules through
+the services it provides and the components, directives, and
+pipes that it shares.
+
+## How to make a feature module
+
+Assuming you already have a CLI generated app, create a feature
+module using the CLI by entering the following command in the
+root project directory. Replace `CustomerDashboard` with the
+name of your module. You can omit the "Module" suffix from the name because the CLI appends it:
+
+```sh
+ng generate module CustomerDashboard
+
+```
+
+
+This causes the CLI to create a folder called `customer-dashboard` with a file inside called `customer-dashboard.module.ts` with the following contents:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: []
+})
+export class CustomerDashboardModule { }
+```
+
+The structure of an NgModule is the same whether it is a root module or a feature module. In the CLI generated feature module, there are two JavaScript import statements at the top of the file: the first imports `NgModule`, which, like the root module, lets you use the `@NgModule` decorator; the second imports `CommonModule`, which contributes many common directives such as `ngIf` and `ngFor`. Feature modules import `CommonModule` instead of `BrowserModule`, which is only imported once in the root module. `CommonModule` only contains information for common directives such as `ngIf` and `ngFor` which are needed in most templates, whereas `BrowserModule` configures the Angular app for the browser which needs to be done only once.
+
+The `declarations` array is available for you to add declarables, which
+are components, directives, and pipes that belong exclusively to this particular module. To add a component, enter the following command at the command line where `customer-dashboard` is the directory where the CLI generated the feature module and `CustomerDashboard` is the name of the component:
+
+```sh
+ng generate component customer-dashboard/CustomerDashboard
+
+```
+
+This generates a folder for the new component within the customer-dashboard folder and updates the feature module with the `CustomerDashboardComponent` info:
+
+
+<code-example path="feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts" region="customer-dashboard-component" title="src/app/customer-dashboard/customer-dashboard.module.ts" linenums="false">
+</code-example>
+
+
+
+The `CustomerDashboardComponent` is now in the JavaScript import list at the top and added to the `declarations` array, which lets Angular know to associate this new component with this feature module.
+
+## Importing a feature module
+
+To incorporate the feature module into your app, you have to let the root module, `app.module.ts`, know about it. Notice the `CustomerDashboardModule` export at the bottom of `customer-dashboard.module.ts`. This exposes it so that other modules can get to it. To import it into the `AppModule`, add it to the imports in `app.module.ts` and to the `imports` array:
+
+<code-example path="feature-modules/src/app/app.module.ts" region="app-module" title="src/app/app.module.ts" linenums="false">
+</code-example>
+
+
+Now the `AppModule` knows about the feature module. If you were to add any service providers to the feature module, `AppModule` would know about those too, as would any other feature modules. However, NgModules don’t expose their components.
+
+
+## Rendering a feature module’s component template
+
+When the CLI generated the `CustomerDashboardComponent` for the feature module, it included a template, `customer-dashboard.component.html`, with the following markup:
+
+<code-example path="feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html" region="feature-template" title="src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html" linenums="false">
+</code-example>
+
+
+To see this HTML in the `AppComponent`, you first have to export the `CustomerDashboardComponent` in the `CustomerDashboardModule`. In `customer-dashboard.module.ts`, just beneath the `declarations` array, add an `exports` array containing `CustomerDashboardModule`:
+
+<code-example path="feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts" region="component-exports" title="src/app/customer-dashboard/customer-dashboard.module.ts" linenums="false">
+</code-example>
+
+
+
+Next, in the `AppComponent`, `app.component.html`, add the tag `<app-customer-dashboard>`:
+
+<code-example path="feature-modules/src/app/app.component.html" region="app-component-template" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+
+Now, in addition to the title that renders by default, the `CustomerDashboardComponent` template renders too:
+
+
+<figure>
+ <img src="generated/images/guide/feature-modules/feature-module.png" alt="feature module component">
+</figure>
+
+<hr />
+
+## More on NgModules
+
+You may also be interested in the following:
+* [Lazy Loading Modules with the Angular Router](guide/lazy-loading-ngmodules).
+* [Providers](guide/providers).
+* [Types of Feature Modules](guide/module-types).
diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md
new file mode 100644
index 000000000000..b1a52802ec94
--- /dev/null
+++ b/aio/content/guide/form-validation.md
@@ -0,0 +1,354 @@
+# Form Validation
+
+
+
+
+Improve overall data quality by validating user input for accuracy and completeness.
+
+This page shows how to validate user input in the UI and display useful validation messages
+using both reactive and template-driven forms. It assumes some basic knowledge of the two
+forms modules.
+
+<div class="alert is-helpful">
+
+If you're new to forms, start by reviewing the [Forms](guide/forms) and
+[Reactive Forms](guide/reactive-forms) guides.
+
+</div>
+
+
+## Template-driven validation
+
+To add validation to a template-driven form, you add the same validation attributes as you
+would with [native HTML form validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).
+Angular uses directives to match these attributes with validator functions in the framework.
+
+Every time the value of a form control changes, Angular runs validation and generates
+either a list of validation errors, which results in an INVALID status, or null, which results in a VALID status.
+
+You can then inspect the control's state by exporting `ngModel` to a local template variable.
+The following example exports `NgModel` into a variable called `name`:
+
+<code-example path="form-validation/src/app/template/hero-form-template.component.html" region="name-with-error-msg" title="template/hero-form-template.component.html (name)" linenums="false">
+
+</code-example>
+
+
+Note the following:
+
+* The `<input>` element carries the HTML validation attributes: `required` and `minlength`. It
+also carries a custom validator directive, `forbiddenName`. For more
+information, see [Custom validators](guide/form-validation#custom-validators) section.
+
+* `#name="ngModel"` exports `NgModel` into a local variable called `name`. `NgModel` mirrors many of the properties of its underlying
+`FormControl` instance, so you can use this in the template to check for control states such as `valid` and `dirty`. For a full list of control properties, see the [AbstractControl](api/forms/AbstractControl)
+API reference.
+
+* The `*ngIf` on the `<div>` element reveals a set of nested message `divs`
+but only if the `name` is invalid and the control is either `dirty` or `touched`.
+
+* Each nested `<div>` can present a custom message for one of the possible validation errors.
+There are messages for `required`, `minlength`, and `forbiddenName`.
+
+
+<div class="alert is-helpful">
+
+
+
+#### Why check _dirty_ and _touched_?
+
+You may not want your application to display errors before the user has a chance to edit the form.
+The checks for `dirty` and `touched` prevent errors from showing until the user
+does one of two things: changes the value,
+turning the control dirty; or blurs the form control element, setting the control to touched.
+
+</div>
+
+## Reactive form validation
+
+In a reactive form, the source of truth is the component class. Instead of adding validators through attributes in the template, you add validator functions directly to the form control model in the component class. Angular then calls these functions whenever the value of the control changes.
+
+### Validator functions
+
+There are two types of validator functions: sync validators and async validators.
+
+* **Sync validators**: functions that take a control instance and immediately return either a set of validation errors or `null`. You can pass these in as the second argument when you instantiate a `FormControl`.
+
+* **Async validators**: functions that take a control instance and return a Promise
+or Observable that later emits a set of validation errors or `null`. You can
+pass these in as the third argument when you instantiate a `FormControl`.
+
+Note: for performance reasons, Angular only runs async validators if all sync validators pass. Each must complete before errors are set.
+
+### Built-in validators
+
+You can choose to [write your own validator functions](guide/form-validation#custom-validators), or you can use some of
+Angular's built-in validators.
+
+The same built-in validators that are available as attributes in template-driven forms, such as `required` and `minlength`, are all available to use as functions from the `Validators` class. For a full list of built-in validators, see the [Validators](api/forms/Validators) API reference.
+
+To update the hero form to be a reactive form, you can use some of the same
+built-in validators&mdash;this time, in function form. See below:
+
+{@a reactive-component-class}
+
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.1.ts" region="form-group" title="reactive/hero-form-reactive.component.ts (validator functions)" linenums="false">
+</code-example>
+
+Note that:
+
+* The name control sets up two built-in validators&mdash;`Validators.required` and `Validators.minLength(4)`&mdash;and one custom validator, `forbiddenNameValidator`. For more details see the [Custom validators](guide/form-validation#custom-validators) section in this guide.
+* As these validators are all sync validators, you pass them in as the second argument.
+* Support multiple validators by passing the functions in as an array.
+* This example adds a few getter methods. In a reactive form, you can always access any form control through the `get` method on its parent group, but sometimes it's useful to define getters as shorthands
+for the template.
+
+
+If you look at the template for the name input again, it is fairly similar to the template-driven example.
+
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.html" region="name-with-error-msg" title="reactive/hero-form-reactive.component.html (name with error msg)" linenums="false">
+</code-example>
+
+Key takeaways:
+
+ * The form no longer exports any directives, and instead uses the `name` getter defined in
+ the component class.
+ * The `required` attribute is still present. While it's not necessary for validation purposes,
+ you may want to keep it in your template for CSS styling or accessibility reasons.
+
+
+## Custom validators
+
+Since the built-in validators won't always match the exact use case of your application, sometimes you'll want to create a custom validator.
+
+Consider the `forbiddenNameValidator` function from previous
+[examples](guide/form-validation#reactive-component-class) in
+this guide. Here's what the definition of that function looks like:
+
+<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>
+
+The function is actually a factory that takes a regular expression to detect a _specific_ forbidden name and returns a validator function.
+
+In this sample, the forbidden name is "bob", so the validator will reject any hero name containing "bob".
+Elsewhere it could reject "alice" or any name that the configuring regular expression matches.
+
+The `forbiddenNameValidator` factory returns the configured validator function.
+That function takes an Angular control object and returns _either_
+null if the control value is valid _or_ a validation error object.
+The validation error object typically has a property whose name is the validation key, `'forbiddenName'`,
+and whose value is an arbitrary dictionary of values that you could insert into an error message, `{name}`.
+
+Custom async validators are similar to sync validators, but they must instead return a Promise or Observable
+that later emits null or a validation error object. In the case of an Observable, the Observable must complete,
+at which point the form uses the last value emitted for validation.
+
+### Adding to reactive forms
+
+In reactive forms, custom validators are fairly simple to add. All you have to do is pass the function directly
+to the `FormControl`.
+
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.1.ts" region="custom-validator" title="reactive/hero-form-reactive.component.ts (validator functions)" linenums="false">
+</code-example>
+
+### Adding to template-driven forms
+
+In template-driven forms, you don't have direct access to the `FormControl` instance, so you can't pass the
+validator in like you can for reactive forms. Instead, you need to add a directive to the template.
+
+The corresponding `ForbiddenValidatorDirective` serves as a wrapper around the `forbiddenNameValidator`.
+
+Angular recognizes the directive's role in the validation process because the directive registers itself
+with the `NG_VALIDATORS` provider, a provider with an extensible collection of validators.
+
+<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>
+
+The directive class then implements the `Validator` interface, so that it can easily integrate
+with Angular forms. Here is the rest of the directive to help you get an idea of how it all
+comes together:
+
+<code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="directive" title="shared/forbidden-name.directive.ts (directive)">
+</code-example>
+
+Once the `ForbiddenValidatorDirective` is ready, you can simply add its selector, `appForbiddenName`, to any input element to activate it. For example:
+
+<code-example path="form-validation/src/app/template/hero-form-template.component.html" region="name-input" title="template/hero-form-template.component.html (forbidden-name-input)" linenums="false">
+
+</code-example>
+
+
+<div class="alert is-helpful">
+
+You may have noticed that the custom validation directive is instantiated with `useExisting`
+rather than `useClass`. The registered validator must be _this instance_ of
+the `ForbiddenValidatorDirective`&mdash;the instance in the form with
+its `forbiddenName` property bound to “bob". If you were to replace
+`useExisting` with `useClass`, then you’d be registering a new class instance, one that
+doesn’t have a `forbiddenName`.
+
+</div>
+
+## Control status CSS classes
+
+Like in AngularJS, Angular automatically mirrors many control properties onto the form control element as CSS classes. You can use these classes to style form control elements according to the state of the form. The following classes are currently supported:
+
+* `.ng-valid`
+* `.ng-invalid`
+* `.ng-pending`
+* `.ng-pristine`
+* `.ng-dirty`
+* `.ng-untouched`
+* `.ng-touched`
+
+The hero form uses the `.ng-valid` and `.ng-invalid` classes to
+set the color of each form control's border.
+
+<code-example path="form-validation/src/assets/forms.css" title="forms.css (status classes)">
+
+</code-example>
+
+## Cross field validation
+This section shows how to perform cross field validation. It assumes some basic knowledge of creating custom validators.
+
+<div class="alert is-helpful">
+
+If you haven't created custom validators before, start by reviewing the [custom validators section](guide/form-validation#custom-validators).
+
+</div>
+
+In the following section, we will make sure that our heroes do not reveal their true identities by filling out the Hero Form. We will do that by validating that the hero names and alter egos do not match.
+
+### Adding to reactive forms
+
+The form has the following structure:
+
+```javascript
+const heroForm = new FormGroup({
+  'name': new FormControl(),
+  'alterEgo': new FormControl(),
+  'power': new FormControl()
+});
+```
+
+Notice that the name and alterEgo are sibling controls. To evaluate both controls in a single custom validator, we should perform the validation in a common ancestor control: the `FormGroup`. That way, we can query the `FormGroup` for the child controls which will allow us to compare their values.
+
+To add a validator to the `FormGroup`, pass the new validator in as the second argument on creation.
+
+```javascript
+const heroForm = new FormGroup({
+  'name': new FormControl(),
+  'alterEgo': new FormControl(),
+  'power': new FormControl()
+}, { validators: identityRevealedValidator });
+```
+
+The validator code is as follows:
+
+<code-example path="form-validation/src/app/shared/identity-revealed.directive.ts" region="cross-validation-validator" title="shared/identity-revealed.directive.ts" linenums="false">
+</code-example>
+
+The identity validator implements the `ValidatorFn` interface. It takes an Angular control object as an argument and returns either null if the form is valid, or `ValidationErrors` otherwise.
+
+First we retrieve the child controls by calling the `FormGroup`'s [get](api/forms/AbstractControl#get) method. Then we simply compare the values of the `name` and `alterEgo` controls.
+
+If the values do not match, the hero's identity remains secret, and we can safely return null. Otherwise, the hero's identity is revealed and we must mark the form as invalid by returning an error object.
+
+Next, to provide better user experience, we show an appropriate error message when the form is invalid.
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.html" region="cross-validation-error-message" title="reactive/hero-form-template.component.html" linenums="false">
+</code-example>
+
+Note that we check if:
+- the `FormGroup` has the cross validation error returned by the `identityRevealed` validator,
+- the user is yet to [interact](guide/form-validation#why-check-dirty-and-touched) with the form.
+
+### Adding to template driven forms
+First we must create a directive that will wrap the validator function. We provide it as the validator using the `NG_VALIDATORS` token. If you are not sure why, or you do not fully understand the syntax, revisit the previous [section](guide/form-validation#adding-to-template-driven-forms).
+
+<code-example path="form-validation/src/app/shared/identity-revealed.directive.ts" region="cross-validation-directive" title="shared/identity-revealed.directive.ts" linenums="false">
+</code-example>
+
+Next, we have to add the directive to the html template. Since the validator must be registered at the highest level in the form, we put the directive on the `form` tag.
+<code-example path="form-validation/src/app/template/hero-form-template.component.html" region="cross-validation-register-validator" title="template/hero-form-template.component.html" linenums="false">
+</code-example>
+
+To provide better user experience, we show an appropriate error message when the form is invalid.
+<code-example path="form-validation/src/app/template/hero-form-template.component.html" region="cross-validation-error-message" title="template/hero-form-template.component.html" linenums="false">
+</code-example>
+
+Note that we check if:
+- the form has the cross validation error returned by the `identityRevealed` validator,
+- the user is yet to [interact](guide/form-validation#why-check-dirty-and-touched) with the form.
+
+This completes the cross validation example. We managed to:
+- validate the form based on the values of two sibling controls,
+- show a descriptive error message after the user interacted with the form and the validation failed.
+
+## Async Validation
+This section shows how to create asynchronous validators. It assumes some basic knowledge of creating [custom validators](guide/form-validation#custom-validators).
+
+### The Basics
+Just like synchronous validators have the `ValidatorFn` and `Validator` interfaces, asynchronous validators have their own counterparts: `AsyncValidatorFn` and `AsyncValidator`.
+
+They are very similar with the only difference being:
+
+* They must return a Promise or an Observable,
+* The observable returned must be finite, meaning it must complete at some point. To convert an infinite observable into a finite one, pipe the observable through a filtering operator such as `first`, `last`, `take`, or `takeUntil`.
+
+It is important to note that the asynchronous validation happens after the synchronous validation, and is performed only if the synchronous validation is successful. This check allows forms to avoid potentially expensive async validation processes such as an HTTP request if more basic validation methods fail.
+
+After asynchronous validation begins, the form control enters a `pending` state. You can inspect the control's `pending` property and use it to give visual feedback about the ongoing validation.
+
+A common UI pattern is to show a spinner while the async validation is being performed. The following example presents how to achieve this with template-driven forms:
+
+```html
+<input [(ngModel)}="name" #model="ngModel" appSomeAsyncValidator>
+<app-spinner *ngIf="model.pending"></app-spinner>
+```
+
+### Implementing Custom Async Validator
+In the following section, validation is performed asynchronously to ensure that our heroes pick an alter ego that is not already taken. New heroes are constantly enlisting and old heroes are leaving the service. That means that we do not have the list of available alter egos ahead of time.
+
+To validate the potential alter ego, we need to consult a central database of all currently enlisted heroes. The process is asynchronous, so we need a special validator for that.
+
+Let's start by creating the validator class.
+
+<code-example path="form-validation/src/app/shared/alter-ego.directive.ts" region="async-validator" linenums="false"></code-example>
+
+As you can see, the `UniqueAlterEgoValidator` class implements the `AsyncValidator` interface. In the constructor, we inject the `HeroesService` that has the following interface:
+
+```typescript
+interface HeroesService {
+  isAlterEgoTaken: (alterEgo: string) => Observable<boolean>;
+}
+```
+
+In a real world application, the `HeroesService` is responsible for making an HTTP request to the hero database to check if the alter ego is available. From the validator's point of view, the actual implementation of the service is not important, so we can just code against the `HeroesService` interface.
+
+As the validation begins, the `UniqueAlterEgoValidator` delegates to the `HeroesService` `isAlterEgoTaken()` method with the current control value. At this point the control is marked as `pending` and remains in this state until the observable chain returned from the `validate()` method completes.
+
+The `isAlterEgoTaken()` method dispatches an HTTP request that checks if the alter ego is available, and returns `Observable<boolean>` as the result. We pipe the response through the `map` operator and transform it into a validation result. As always, we return `null` if the form is valid, and `ValidationErrors` if it is not. We make sure to handle any potential errors with the `catchError` operator.
+
+Here we decided that `isAlterEgoTaken()` error is treated as a successful validation, because failure to make a validation request does not necessarily mean that the alter ego is invalid. You could handle the error differently and return the `ValidationError` object instead.
+
+After some time passes, the observable chain completes and the async validation is done. The `pending` flag is set to `false`, and the form validity is updated.
+
+### Note on performance
+
+By default, all validators are run after every form value change. With synchronous validators, this will not likely have a noticeable impact on application performance. However, it's common for async validators to perform some kind of HTTP request to validate the control. Dispatching an HTTP request after every keystroke could put a strain on the backend API, and should be avoided if possible.
+
+We can delay updating the form validity by changing the `updateOn` property from `change` (default) to `submit` or `blur`.
+
+With template-driven forms:
+
+```html
+<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">
+```
+
+With reactive forms:
+
+```typescript
+new FormControl('', {updateOn: 'blur'});
+```
+
+**You can run the <live-example></live-example> to see the complete reactive and template-driven example code.**
diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md
new file mode 100644
index 000000000000..7d1129344532
--- /dev/null
+++ b/aio/content/guide/forms.md
@@ -0,0 +1,788 @@
+# Forms
+
+Forms are the mainstay of business applications.
+You use forms to log in, submit a help request, place an order, book a flight,
+schedule a meeting, and perform countless other data-entry tasks.
+
+In developing a form, it's important to create a data-entry experience that guides the
+user efficiently and effectively through the workflow.
+
+Developing forms requires design skills (which are out of scope for this page), as well as framework support for
+*two-way data binding, change tracking, validation, and error handling*,
+which you'll learn about on this page.
+
+This page shows you how to build a simple form from scratch. Along the way you'll learn how to:
+
+* Build an Angular form with a component and template.
+* Use `ngModel` to create two-way data bindings for reading and writing input-control values.
+* Track state changes and the validity of form controls.
+* Provide visual feedback using special CSS classes that track the state of the controls.
+* Display validation errors to users and enable/disable form controls.
+* Share information across HTML elements using template reference variables.
+
+You can run the <live-example></live-example> in Stackblitz and download the code from there.
+
+{@a template-driven}
+
+## Template-driven forms
+
+You can build forms by writing templates in the Angular [template syntax](guide/template-syntax) with
+the form-specific directives and techniques described in this page.
+
+<div class="alert is-helpful">
+
+  You can also use a reactive (or model-driven) approach to build forms.
+  However, this page focuses on template-driven forms.
+
+</div>
+
+You can build almost any form with an Angular template&mdash;login forms, contact forms, and pretty much any business form.
+You can lay out the controls creatively, bind them to data, specify validation rules and display validation errors,
+conditionally enable or disable specific controls, trigger built-in visual feedback, and much more.
+
+Angular makes the process easy by handling many of the repetitive, boilerplate tasks you'd
+otherwise wrestle with yourself.
+
+You'll learn to build a template-driven form that looks like this:
+
+<figure>
+  <img src="generated/images/guide/forms/hero-form-1.png" alt="Clean Form">
+</figure>
+
+The *Hero Employment Agency* uses this form to maintain personal information about heroes.
+Every hero needs a job. It's the company mission to match the right hero with the right crisis.
+
+Two of the three fields on this form are required. Required fields have a green bar on the left to make them easy to spot.
+
+If you delete the hero name, the form displays a validation error in an attention-grabbing style:
+
+<figure>
+  <img src="generated/images/guide/forms/hero-form-2.png" alt="Invalid, Name Required">
+</figure>
+
+Note that the *Submit* button is disabled, and the "required" bar to the left of the input control changes from green to red.
+
+<div class="alert is-helpful">
+
+  You can customize the colors and location of the "required" bar with standard CSS.
+
+</div>
+
+You'll build this form in small steps:
+
+1. Create the `Hero` model class.
+1. Create the component that controls the form.
+1. Create a template with the initial form layout.
+1. Bind data properties to each form control using the `ngModel` two-way data-binding syntax.
+1. Add a `name` attribute to each form-input control.
+1. Add custom CSS to provide visual feedback.
+1. Show and hide validation-error messages.
+1. Handle form submission with *ngSubmit*.
+1. Disable the form’s *Submit* button until the form is valid.
+
+## Setup
+
+Create a new project named <code>angular-forms</code>:
+
+<code-example language="sh" class="code-shell">
+
+  ng new angular-forms
+
+</code-example>
+
+## Create the Hero model class
+
+As users enter form data, you'll capture their changes and update an instance of a model.
+You can't lay out the form until you know what the model looks like.
+
+A model can be as simple as a "property bag" that holds facts about a thing of application importance.
+That describes well the `Hero` class with its three required fields (`id`, `name`, `power`)
+and one optional field (`alterEgo`).
+
+Using the Angular CLI, generate a new class named `Hero`:
+
+<code-example language="sh" class="code-shell">
+
+  ng generate class Hero
+
+</code-example>
+
+With this content:
+
+<code-example path="forms/src/app/hero.ts" title="src/app/hero.ts">
+
+</code-example>
+
+It's an anemic model with few requirements and no behavior. Perfect for the demo.
+
+The TypeScript compiler generates a public field for each `public` constructor parameter and
+automatically assigns the parameter’s value to that field when you create heroes.
+
+The `alterEgo` is optional, so the constructor lets you omit it; note the question mark (?) in `alterEgo?`.
+
+You can create a new hero like this:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.ts" linenums="false" region="SkyDog">
+
+</code-example>
+
+## Create a form component
+
+An Angular form has two parts: an HTML-based _template_ and a component _class_
+to handle data and user interactions programmatically.
+Begin with the class because it states, in brief, what the hero editor can do.
+
+Using the Angular CLI, generate a new component named `HeroForm`:
+
+<code-example language="sh" class="code-shell">
+
+  ng generate component HeroForm
+
+</code-example>
+
+With this content:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.ts" linenums="false" title="src/app/hero-form/hero-form.component.ts (v1)" region="v1">
+
+</code-example>
+
+There’s nothing special about this component, nothing form-specific,
+nothing to distinguish it from any component you've written before.
+
+Understanding this component requires only the Angular concepts covered in previous pages.
+
+* The code imports the Angular core library and the `Hero` model you just created.
+* The `@Component` selector value of "app-hero-form" means you can drop this form in a parent
+template with a `<app-hero-form>` tag.
+* The `templateUrl` property points to a separate file for the template HTML.
+* You defined dummy data for `model` and `powers`, as befits a demo.
+
+Down the road, you can inject a data service to get and save real data
+or perhaps expose these properties as inputs and outputs
+(see [Input and output properties](guide/template-syntax#inputs-outputs) on the
+[Template Syntax](guide/template-syntax) page) for binding to a
+parent component. This is not a concern now and these future changes won't affect the form.
+
+* You added a `diagnostic` property to return a JSON representation of the model.
+It'll help you see what you're doing during development; you've left yourself a cleanup note to discard it later.
+
+## Revise *app.module.ts*
+
+`app.module.ts` defines the application's root module. In it you identify the external modules you'll use in the application
+and declare the components that belong to this module, such as the `HeroFormComponent`.
+
+Because template-driven forms are in their own module, you need to add the `FormsModule` to the array of
+`imports` for the application module before you can use forms.
+
+Update it with the following:
+
+<code-example path="forms/src/app/app.module.ts" title="src/app/app.module.ts">
+
+</code-example>
+
+<div class="alert is-helpful">
+
+  There are two changes:
+
+  1. You import `FormsModule`.
+
+  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`.
+
+</div>
+
+<div class="alert is-important">
+
+  If a component, directive, or pipe belongs to a module in the `imports` array, ​_don't_​ re-declare it in the `declarations` array.
+  If you wrote it and it should belong to this module, ​_do_​ declare it in the `declarations` array.
+
+</div>
+
+## Revise *app.component.html*
+
+`AppComponent` is the application's root component. It will host the new `HeroFormComponent`.
+
+Replace the contents of its template with the following:
+
+<code-example path="forms/src/app/app.component.html" title="src/app/app.component.html">
+
+</code-example>
+
+<div class="alert is-helpful">
+
+  There are only two changes.
+  The `template` is simply the new element tag identified by the component's `selector` property.
+  This displays the hero form when the application component is loaded.
+  Don't forget to remove the `name` field from the class body as well.
+
+</div>
+
+## Create an initial HTML form template
+
+Update the template file with the following contents:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" region="start" title="src/app/hero-form/hero-form.component.html">
+
+</code-example>
+
+The language is simply HTML5. You're presenting two of the `Hero` fields, `name` and `alterEgo`, and
+opening them up for user input in input boxes.
+
+The *Name* `<input>` control has the HTML5 `required` attribute;
+the *Alter Ego* `<input>` control does not because `alterEgo` is optional.
+
+You added a *Submit* button at the bottom with some classes on it for styling.
+
+*You're not using Angular yet*. There are no bindings or extra directives, just layout.
+
+<div class="alert is-helpful">
+
+  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.
+
+</div>
+
+The `container`, `form-group`, `form-control`, and `btn` classes
+come from [Twitter Bootstrap](http://getbootstrap.com/css/). These classes are purely cosmetic.
+Bootstrap gives the form a little style.
+
+<div class="callout is-important">
+
+  <header>
+    Angular forms don't require a style library
+  </header>
+
+  Angular makes no use of the `container`, `form-group`, `form-control`, and `btn` classes or
+  the styles of any external library. Angular apps can use any CSS library or none at all.
+
+</div>
+
+To add the stylesheet, open `styles.css` and add the following import line at the top:
+
+<code-example path="forms/src/styles.1.css" linenums="false" title="src/styles.css">
+
+</code-example>
+
+## Add powers with _*ngFor_
+
+The hero must choose one superpower from a fixed list of agency-approved powers.
+You maintain that list internally (in `HeroFormComponent`).
+
+You'll add a `select` to the
+form and bind the options to the `powers` list using `ngFor`,
+a technique seen previously in the [Displaying Data](guide/displaying-data) page.
+
+Add the following HTML *immediately below* the *Alter Ego* group:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (powers)" region="powers">
+
+</code-example>
+
+This code repeats the `<option>` tag for each power in the list of powers.
+The `pow` template input variable is a different power in each iteration;
+you display its name using the interpolation syntax.
+
+{@a ngModel}
+
+## Two-way data binding with _ngModel_
+
+Running the app right now would be disappointing.
+
+<figure>
+  <img src="generated/images/guide/forms/hero-form-3.png" alt="Early form with no binding">
+</figure>
+
+
+You don't see hero data because you're not binding to the `Hero` yet.
+You know how to do that from earlier pages.
+[Displaying Data](guide/displaying-data) teaches property binding.
+[User Input](guide/user-input) shows how to listen for DOM events with an
+event binding and how to update a component property with the displayed value.
+
+Now you need to display, listen, and extract at the same time.
+
+You could use the techniques you already know, but
+instead you'll use the new `[(ngModel)]` syntax, which
+makes binding the form to the model easy.
+
+Find the `<input>` tag for *Name* and update it like this:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="ngModelName-1">
+
+</code-example>
+
+<div class="alert is-helpful">
+
+  You added a diagnostic interpolation after the input tag
+  so you can see what you're doing.
+  You left yourself a note to throw it away when you're done.
+
+</div>
+
+Focus on the binding syntax: `[(ngModel)]="..."`.
+
+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:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="template-variable">
+
+</code-example>
+
+The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
+
+<div class="alert is-helpful">
+
+  {@a ngForm}
+
+  ### The _NgForm_ directive
+
+  What `NgForm` directive?
+  You didn't add an [NgForm](api/forms/NgForm) directive.
+
+  Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.
+
+  The `NgForm` directive supplements the `form` element with additional features.
+  It holds the controls you created for the elements with an `ngModel` directive
+  and `name` attribute, and monitors their properties, including their validity.
+  It also has its own `valid` property which is true only *if every contained
+  control* is valid.
+
+</div>
+
+If you ran the app now and started typing in the *Name* input box,
+adding and deleting characters, you'd see them appear and disappear
+from the interpolated text.
+At some point it might look like this:
+
+<figure>
+  <img src="generated/images/guide/forms/ng-model-in-action.png" alt="ngModel in action">
+</figure>
+
+The diagnostic is evidence that values really are flowing from the input box to the model and
+back again.
+
+<div class="alert is-helpful">
+
+  That's *two-way data binding*.
+  For more information, see
+  [Two-way binding with NgModel](guide/template-syntax#ngModel) on the
+  the [Template Syntax](guide/template-syntax) page.
+
+</div>
+
+Notice that you also added a `name` attribute to the `<input>` tag and set it to "name",
+which makes sense for the hero's name. Any unique value will do, but using a descriptive name is helpful.
+Defining a `name` attribute is a requirement when using `[(ngModel)]` in combination with a form.
+
+<div class="alert is-helpful">
+
+  Internally, Angular creates `FormControl` instances and
+  registers them with an `NgForm` directive that Angular attached to the `<form>` tag.
+  Each `FormControl` is registered under the name you assigned to the `name` attribute.
+  Read more in the previous section, [The NgForm directive](guide/forms#ngForm).
+
+</div>
+
+Add similar `[(ngModel)]` bindings and `name` attributes to *Alter Ego* and *Hero Power*.
+You'll ditch the input box binding message
+and add a new binding (at the top) to the component's `diagnostic` property.
+Then you can confirm that two-way data binding works *for the entire hero model*.
+
+After revision, the core of the form should look like this:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="ngModel-2">
+
+</code-example>
+
+<div class="alert is-helpful">
+
+  * Each input element has an `id` property that is used by the `label` element's `for` attribute
+  to match the label to its input control.
+  * Each input element has a `name` property that is required by Angular forms to register the control with the form.
+
+</div>
+
+If you run the app now and change every hero model property, the form might display like this:
+
+<figure>
+  <img src="generated/images/guide/forms/ng-model-in-action-2.png" alt="ngModel in action">
+</figure>
+
+The diagnostic near the top of the form
+confirms that all of your changes are reflected in the model.
+
+*Delete* the `{{diagnostic}}` binding at the top as it has served its purpose.
+
+## Track control state and validity with _ngModel_
+
+Using `ngModel` in a form gives you more than just two-way data binding. It also tells
+you if the user touched the control, if the value changed, or if the value became invalid.
+
+The *NgModel* directive doesn't just track state; it updates the control with special Angular CSS classes that reflect the state.
+You can leverage those class names to change the appearance of the control.
+
+<table>
+
+  <tr>
+
+    <th>
+      State
+    </th>
+
+    <th>
+      Class if true
+    </th>
+
+    <th>
+      Class if false
+    </th>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      The control has been visited.
+    </td>
+
+    <td>
+      <code>ng-touched</code>
+    </td>
+
+    <td>
+      <code>ng-untouched</code>
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      The control's value has changed.
+    </td>
+
+    <td>
+      <code>ng-dirty</code>
+    </td>
+
+    <td>
+      <code>ng-pristine</code>
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      The control's value is valid.
+    </td>
+
+    <td>
+      <code>ng-valid</code>
+    </td>
+
+    <td>
+      <code>ng-invalid</code>
+    </td>
+
+  </tr>
+
+</table>
+
+Temporarily add a [template reference variable](guide/template-syntax#ref-vars) named `spy`
+to the _Name_ `<input>` tag and use it to display the input's CSS classes.
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="ngModelName-2">
+
+</code-example>
+
+Now run the app and look at the _Name_ input box.
+Follow these steps *precisely*:
+
+1. Look but don't touch.
+1. Click inside the name box, then click outside it.
+1. Add slashes to the end of the name.
+1. Erase the name.
+
+The actions and effects are as follows:
+
+<figure>
+  <img src="generated/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition">
+</figure>
+
+You should see the following transitions and class names:
+
+<figure>
+  <img src="generated/images/guide/forms/ng-control-class-changes.png" alt="Control state transitions">
+</figure>
+
+The `ng-valid`/`ng-invalid` pair is the most interesting, because you want to send a
+strong visual signal when the values are invalid. You also want to mark required fields.
+To create such visual feedback, add definitions for the `ng-*` CSS classes.
+
+*Delete* the `#spy` template reference variable and the `TODO` as they have served their purpose.
+
+## Add custom CSS for visual feedback
+
+You can mark required fields and invalid data at the same time with a colored bar
+on the left of the input box:
+
+<figure>
+  <img src="generated/images/guide/forms/validity-required-indicator.png" alt="Invalid Form">
+</figure>
+
+You achieve this effect by adding these class definitions to a new `forms.css` file
+that you add to the project as a sibling to `index.html`:
+
+<code-example path="forms/src/assets/forms.css" title="src/assets/forms.css">
+
+</code-example>
+
+Update the `<head>` of `index.html` to include this style sheet:
+
+<code-example path="forms/src/index.html" linenums="false" title="src/index.html (styles)" region="styles">
+
+</code-example>
+
+## Show and hide validation error messages
+
+You can improve the form. The _Name_ input box is required and clearing it turns the bar red.
+That says something is wrong but the user doesn't know *what* is wrong or what to do about it.
+Leverage the control's state to reveal a helpful message.
+
+When the user deletes the name, the form should look like this:
+
+<figure>
+  <img src="generated/images/guide/forms/name-required-error.png" alt="Name required">
+</figure>
+
+To achieve this effect, extend the `<input>` tag with the following:
+
+* A [template reference variable](guide/template-syntax#ref-vars).
+* The "*is required*" message in a nearby `<div>`, which you'll display only if the control is invalid.
+
+Here's an example of an error message added to the _name_ input box:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="name-with-error-msg">
+
+</code-example>
+
+You need a template reference variable to access the input box's Angular control from within the template.
+Here you created a variable called `name` and gave it the value "ngModel".
+
+<div class="alert is-helpful">
+
+  Why "ngModel"?
+  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".
+
+</div>
+
+You control visibility of the name error message by binding properties of the `name`
+control to the message `<div>` element's `hidden` property.
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (hidden-error-msg)" region="hidden-error-msg">
+
+</code-example>
+
+In this example, you hide the message when the control is valid or pristine;
+"pristine" means the user hasn't changed the value since it was displayed in this form.
+
+This user experience is the developer's choice. Some developers want the message to display at all times.
+If you ignore the `pristine` state, you would hide the message only when the value is valid.
+If you arrive in this component with a new (blank) hero or an invalid hero,
+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 to the form.
+
+The hero *Alter Ego* is optional so you can leave that be.
+
+Hero *Power* selection is required.
+You can add the same kind of error handling to the `<select>` if you want,
+but it's not imperative because the selection box already constrains the
+power to valid values.
+
+Now you'll add a new hero in this form.
+Place a *New Hero* button at the bottom of the form and bind its click event to a `newHero` component method.
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" region="new-hero-button-no-reset" title="src/app/hero-form/hero-form.component.html (New Hero button)">
+
+</code-example>
+
+<code-example path="forms/src/app/hero-form/hero-form.component.ts" region="new-hero" title="src/app/hero-form/hero-form.component.ts (New Hero method)" linenums="false">
+
+</code-example>
+
+Run the application again, click the *New Hero* button, and the form clears.
+The *required* bars to the left of the input box are red, indicating invalid `name` and `power` properties.
+That's understandable as these are required fields.
+The error messages are hidden because the form is pristine; you haven't changed anything yet.
+
+Enter a name and click *New Hero* again.
+The app displays a _Name is required_ error message.
+You don't want error messages when you create a new (empty) hero.
+Why are you getting one now?
+
+Inspecting the element in the browser tools reveals that the *name* input box is _no longer pristine_.
+The form remembers that you entered a name before clicking *New Hero*.
+Replacing the hero object *did not restore the pristine state* of the form controls.
+
+You have to clear all of the flags imperatively, which you can do
+by calling the form's `reset()` method after calling the `newHero()` method.
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" region="new-hero-button-form-reset" title="src/app/hero-form/hero-form.component.html (Reset the form)">
+
+</code-example>
+
+Now clicking "New Hero" resets both the form and its control flags.
+
+## Submit the form with _ngSubmit_
+
+The user should be able to submit this form after filling it in.
+The *Submit* button at the bottom of the form
+does nothing on its own, but it will
+trigger a form submit because of its type (`type="submit"`).
+
+A "form submit" is useless at the moment.
+To make it useful, bind the form's `ngSubmit` event property
+to the hero form component's `onSubmit()` method:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (ngSubmit)" region="ngSubmit">
+
+</code-example>
+
+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.
+
+
+You'll bind the form's overall validity via
+the `heroForm` variable to the button's `disabled` property
+using an event binding. Here's the code:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (submit-button)" region="submit-button">
+
+</code-example>
+
+If you run the application now, you find that the button is enabled&mdash;although
+it doesn't do anything useful yet.
+
+Now if you delete the Name, you violate the "required" rule, which
+is duly noted in the error message.
+The *Submit* button is also disabled.
+
+Not impressed?  Think about it for a moment. What would you have to do to
+wire the button's enable/disabled state to the form's validity without Angular's help?
+
+For you, it was as simple as this:
+
+1. Define a template reference variable on the (enhanced) form element.
+2. Refer to that variable in a button many lines away.
+
+## Toggle two form regions (extra credit)
+
+Submitting the form isn't terribly dramatic at the moment.
+
+<div class="alert is-helpful">
+
+  An unsurprising observation for a demo. To be honest,
+  jazzing it up won't teach you anything new about forms.
+  But this is an opportunity to exercise some of your newly won
+  binding skills.
+  If you aren't interested, skip to this page's conclusion.
+
+</div>
+
+For a more strikingly visual effect,
+hide the data entry area and display something else.
+
+Wrap the form in a `<div>` and bind
+its `hidden` property to the `HeroFormComponent.submitted` property.
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="edit-div">
+
+</code-example>
+
+The main form is visible from the start because the
+`submitted` property is false until you submit the form,
+as this fragment from the `HeroFormComponent` shows:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.ts" linenums="false" title="src/app/hero-form/hero-form.component.ts (submitted)" region="submitted">
+
+</code-example>
+
+When you click the *Submit* button, the `submitted` flag becomes true and the form disappears
+as planned.
+
+Now the app needs to show something else while the form is in the submitted state.
+Add the following HTML below the `<div>` wrapper you just wrote:
+
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="submitted">
+
+</code-example>
+
+There's the hero again, displayed read-only with interpolation bindings.
+This `<div>` appears only while the component is in the submitted state.
+
+The HTML includes an *Edit* button whose click event is bound to an expression
+that clears the `submitted` flag.
+
+When you click the *Edit* button, this block disappears and the editable form reappears.
+
+## Summary
+
+The Angular form discussed in this page takes advantage of the following
+framework features to provide support for data modification, validation, and more:
+
+* An Angular HTML form template.
+* A form component class with a `@Component` decorator.
+* Handling form submission by binding to the `NgForm.ngSubmit` event property.
+* Template-reference variables such as `#heroForm` and `#name`.
+* `[(ngModel)]` syntax for two-way data binding.
+* The use of `name` attributes for validation and form-element change tracking.
+* The reference variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
+* Controlling the *Submit* button's enabled state by binding to `NgForm` validity.
+* Custom CSS classes that provide visual feedback to users about invalid controls.
+
+Here’s the code for the final version of the application:
+
+<code-tabs>
+
+  <code-pane title="hero-form/hero-form.component.ts" path="forms/src/app/hero-form/hero-form.component.ts" region="final">
+
+  </code-pane>
+
+  <code-pane title="hero-form/hero-form.component.html" path="forms/src/app/hero-form/hero-form.component.html" region="final">
+
+  </code-pane>
+
+  <code-pane title="hero.ts" path="forms/src/app/hero.ts">
+
+  </code-pane>
+
+  <code-pane title="app.module.ts" path="forms/src/app/app.module.ts">
+
+  </code-pane>
+
+  <code-pane title="app.component.html" path="forms/src/app/app.component.html">
+
+  </code-pane>
+
+  <code-pane title="app.component.ts" path="forms/src/app/app.component.ts">
+
+  </code-pane>
+
+  <code-pane title="main.ts" path="forms/src/main.ts">
+
+  </code-pane>
+
+  <code-pane title="forms.css" path="forms/src/assets/forms.css">
+
+  </code-pane>
+
+</code-tabs>
+
diff --git a/aio/content/guide/frequent-ngmodules.md b/aio/content/guide/frequent-ngmodules.md
new file mode 100644
index 000000000000..22b9ce9817f8
--- /dev/null
+++ b/aio/content/guide/frequent-ngmodules.md
@@ -0,0 +1,133 @@
+# Frequently Used Modules
+
+#### Prerequisites
+
+A basic understanding of [Bootstrapping](guide/bootstrapping).
+
+
+<hr>
+
+An Angular app needs at least one module that serves as the root module.
+As you add features to your app, you can add them in modules.
+The following are frequently used Angular modules with examples
+of some of the things they contain:
+
+
+<table>
+
+ <tr>
+   <th style="vertical-align: top">
+     NgModule
+   </th>
+
+   <th style="vertical-align: top">
+     Import it from
+   </th>
+
+   <th style="vertical-align: top">
+     Why you use it
+   </th>
+ </tr>
+
+ <tr>
+   <td><code>BrowserModule</code></td>
+   <td><code>@angular/platform-browser</code></td>
+   <td>When you want to run your app in a browser</td>
+ </tr>
+
+ <tr>
+   <td><code>CommonModule</code></td>
+   <td><code>@angular/common</code></td>
+   <td>When you want to use <code>NgIf</code>, <code>NgFor</code></td>
+ </tr>
+
+ <tr>
+   <td><code>FormsModule</code></td>
+   <td><code>@angular/forms</code></td>
+   <td>When you want to build template driven forms (includes <code>NgModel</code>)</td>
+ </tr>
+
+ <tr>
+   <td><code>ReactiveFormsModule</code></td>
+   <td><code>@angular/forms</code></td>
+   <td>When you want to build reactive forms</td>
+ </tr>
+
+ <tr>
+   <td><code>RouterModule</code></td>
+   <td><code>@angular/router</code></td>
+   <td>When you want to use <code>RouterLink</code>, <code>.forRoot()</code>, and <code>.forChild()</code></td>
+ </tr>
+
+ <tr>
+   <td><code>HttpClientModule</code></td>
+   <td><code>@angular/common/http</code></td>
+   <td>When you want to talk to a server</td>
+ </tr>
+
+</table>
+
+## Importing modules
+
+When you use these Angular modules, import them in `AppModule`,
+or your feature module as appropriate, and list them in the `@NgModule`
+`imports` array. For example, in the basic app generated by the CLI,
+`BrowserModule` is the first import at the top of the `AppModule`,
+`app.module.ts`.
+
+
+```typescript
+/* import modules so that AppModule can access them */
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [ /* add modules here so Angular knows to use them */
+    BrowserModule,
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+The imports at the top of the array are JavaScript import statements
+while the `imports` array within `@NgModule` is Angular specific.
+For more information on the difference, see [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
+
+
+## `BrowserModule` and `CommonModule`
+
+`BrowserModule` imports `CommonModule`, which contributes many common
+directives such as `ngIf` and `ngFor`. Additionally, `BrowserModule`
+re-exports `CommonModule` making all of its directives available
+to any module that imports `BrowserModule`.
+
+For apps that run in the browser, import `BrowserModule` in the
+root `AppModule` because it provides services that are essential
+to launch and run a browser app. `BrowserModule`’s providers
+are for the whole app so it should only be in the root module,
+not in feature modules. Feature modules only need the common
+directives in `CommonModule`; they don’t need to re-install app-wide providers.
+
+If you do import `BrowserModule` into a lazy loaded feature module,
+Angular returns an error telling you to use `CommonModule` instead.
+
+<figure>
+ <img src="generated/images/guide/frequent-ngmodules/browser-module-error.gif" width=750 alt="BrowserModule error">
+</figure>
+
+<hr />
+
+
+## More on NgModules
+
+You may also be interested in the following:
+* [Bootstrapping](guide/bootstrapping).
+* [NgModules](guide/ngmodules).
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md
new file mode 100644
index 000000000000..3c615c6c7fb2
--- /dev/null
+++ b/aio/content/guide/glossary.md
@@ -0,0 +1,750 @@
+# Angular Glossary
+
+Angular has its own vocabulary.
+Most Angular terms are common English words or computing terms
+that have a specific meaning within the Angular system.
+
+This glossary lists the most prominent terms
+and a few less familiar ones that have unusual or
+unexpected definitions.
+
+[A](guide/glossary#A) [B](guide/glossary#B) [C](guide/glossary#C) [D](guide/glossary#D) [E](guide/glossary#E) [F](guide/glossary#F) [G](guide/glossary#G) [H](guide/glossary#H) [I](guide/glossary#I)
+[J](guide/glossary#J) [K](guide/glossary#K) [L](guide/glossary#L) [M](guide/glossary#M) [N](guide/glossary#N) [O](guide/glossary#O) [P](guide/glossary#P) [Q](guide/glossary#Q) [R](guide/glossary#R)
+[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}
+
+
+## Ahead-of-time (AOT) compilation
+
+The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code 
+into efficient JavaScript code during the build phase before the browser downloads 
+and runs that code. 
+This is the best compilation mode for production environments, with decreased load time and increased performance.
+
+By compiling your application using the `ngc` command-line tool, you can bootstrap directly to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
+
+Compare [just-in-time (JIT) compilation](guide/glossary#jit).
+
+## Angular element
+
+An Angular [component](guide/glossary#component) that has been packaged as a [custom element](guide/glossary#custom-element). 
+
+Learn more in the [_Angular Elements_](guide/elements) guide.
+
+## Annotation
+
+A structure that provides metadata for a class. See [Decorator](guide/glossary#decorator).
+
+
+{@a attribute-directive}
+
+
+{@a attribute-directives}
+
+
+## Attribute directives
+
+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
+as HTML attributes, hence the name.
+
+Learn more in the [_Attribute Directives_](guide/attribute-directives) guide.
+
+
+{@a B}
+
+
+## Binding
+
+Generally, the practice of setting a variable or property to a data value. 
+Within Angular, typically refers to [data binding](guide/glossary#data-binding), 
+which coordinates DOM object properties with data object properties.
+
+Sometimes refers to a [dependency-injection](guide/glossary#dependency-injection) binding
+between a [token](guide/glossary#token) and a dependency [provider](guide/glossary#provider).
+
+
+## Bootstrap
+
+A way to initialize and launch an app or system.
+
+In Angular, an app's root NgModule (`AppModule`) has a `bootstrap` property that identifies the app's top-level [components](guide/glossary#component). 
+During the bootstrap process, Angular creates and inserts these components into the `index.html` host web page. 
+You can bootstrap multiple apps in the same `index.html`, each app with its own components.
+
+Learn more in the [_Bootstrapping_](guide/bootstrapping) guide.
+
+{@a C}
+
+{@a case-conventions}
+{@a dash-case}
+{@a camelcase}
+{@a kebab-case}
+
+## Case conventions
+
+Angular uses capitalization conventions to distinguish the names of various types, as described in the [Style Guide "Naming" section](guide/styleguide#02-01). 
+
+- camelCase : symbols, properties, methods, pipe names, non-component directive selectors, constants 
+- UpperCamelCase (or PascalCase): Class names, including classes that define components, interfaces, NgModules, directives, pipes, and so on. 
+- dash-case (or "kebab-case"): descriptive part of file names, component selectors
+- underscore_case (or "snake_case"): not typically used in Angular 
+- UPPER_UNDERSCORE_CASE (or UPPER_SNAKE_CASE): traditional for constants (acceptable, but prefer camelCase)
+
+{@a class-decorator}
+
+## Class decorator
+
+A [decorator](guide/glossary#decorator) statement immediately before a class definition that declares the class to be of the given type, and provides metadata suitable to the type.
+
+The following class types can be declared:
+- `@Component`
+- `@Directive`
+- `@Pipe`
+- `@Injectable`
+- `@NgModule`
+
+
+{@a class-field-decorator}
+
+## Class field decorator
+
+A [decorator](guide/glossary#decorator) statement immediately before a field in a class definition that declares the type of that field. Some examples are `@Input` and `@Output`. 
+
+{@a cli}
+
+## CLI
+
+The [Angular CLI](https://cli.angular.io/) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](guide/glossary#workspace) or [project](guide/glossary#project), and to run [schematics](guide/glossary#schematic) that add and modify code for initial generic versions of various elements. The tool supports all stages of the development cycle, including building, testing, bundling, and deployment.
+
+* To begin using the CLI for a new project, see [Getting Started](guide/quickstart) guide.
+* To learn more about the full capabilities of the CLI, see the [Angular CLI documentation].(https://github.com/angular/angular-cli/wiki).
+
+{@a component}
+
+## Component
+
+A class with the `@Component` [decorator](guide/glossary#decorator) that associates it with a companion [template](guide/glossary#template). Together, the component and template define a [view](guide/glossary#view).
+
+A component is a special type of [directive](guide/glossary#directive).
+The `@Component` decorator extends the `@Directive` decorator with template-oriented features. 
+
+An Angular component class is responsible for exposing data and handling most of the view's display and user-interaction logic through [data binding](guide/glossary#data-binding).
+
+Read more about components, templates, and views in the [Architecture](guide/architecture) guide.
+
+{@a custom-element}
+
+## Custom element
+
+A Web Platform feature, currently supported by most browsers, and available in other browsers through polyfills (see [Browser Support](guide/browser-support)). 
+
+The custom element feature extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. A custom element (also called a *web component*) is recognized by a browser when it is added to the [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry).
+
+You can use the API to transform an Angular component so that it can be registered with the browser and used in any HTML that you add directly to the DOM within an Angular app. The custom element tag inserts the component's view, with change-detection and data-binding functionality, into content that would otherwise be displayed without Angular processing.
+
+See also [Dynamic components](guide/glossary#dynamic-components).
+
+
+{@a D}
+
+
+## Data binding
+
+Data binding allow apps to display data values to a user and respond to user
+actions (such as clicks, touches, and keystrokes).
+
+In data binding, you declare the relationship between an HTML widget and data source
+and let the framework handle the details.
+Data binding is an alternative to manually pushing application data values into HTML, attaching
+event listeners, pulling changed values from the screen, and
+updating application data values.
+
+Read about the following forms of binding in the [Template Syntax](guide/template-syntax) page:
+
+ * [Interpolation](guide/template-syntax#interpolation).
+ * [Property binding](guide/template-syntax#property-binding).
+ * [Event binding](guide/template-syntax#event-binding).
+ * [Attribute binding](guide/template-syntax#attribute-binding).
+ * [Class binding](guide/template-syntax#class-binding).
+ * [Style binding](guide/template-syntax#style-binding).
+ * [Two-way data binding with ngModel](guide/template-syntax#ngModel).
+
+{@a declarable}
+
+## Declarable
+
+A class type that you can add to the `declarations` list of an [NgModule](guide/glossary#ngmodule). 
+
+You can declare [components](guide/glossary#component), [directives](guide/glossary#directive), and [pipes](guide/glossary#pipe).
+
+Do not declare the following:
+- A class that's already declared in another NgModule.
+- An array of directives imported from another package. For example, don't declare `FORMS_DIRECTIVES` from `@angular/forms`.
+- NgModule classes.
+- Service classes.
+- Non-Angular classes and objects, such as strings, numbers, functions, entity models, configurations, business logic, and helper classes
+
+
+{@a decorator}
+
+{@a decoration}
+
+
+## Decorator | decoration
+
+
+A function that modifies the immediately following class or property definition.  
+Decorators (also called annotations) are an experimental (stage 2), JavaScript language [feature](https://github.com/wycats/javascript-decorators). 
+TypeScript adds support for decorators.
+
+Angular defines decorators that attach metadata to classes or properties so that it knows what those classes or properties mean and how they should work. 
+
+See [Class decorator](guide/glossary#class-decorator), [Class field decorator](guide/glossary#class-field-decorator). 
+
+{@a di}
+
+
+## Dependency injection
+
+A design pattern and mechanism for creating and delivering parts of an application (dependencies) to other parts of an application that require them.
+
+In Angular, dependencies are typically services, but can also be values, such as strings or functions.
+An [injector](guide/glossary#injector) for an app (created automatically during bootstrap) instantiates dependencies when needed, using a configured [provider](guide/glossary#provider) of the service or value.
+
+Learn more in the [Dependency Injection](guide/dependency-injection) guide.
+
+{@a di-token}
+
+## DI token
+
+A lookup token associated with a dependency [provider](guide/glossary#provider), for use with the [dependency injection](guide/glossary#di) system.
+
+
+{@a directive}
+
+
+{@a directives}
+
+
+## Directive
+
+A class with the `@Directive` [decorator](guide/glossary#decorator) that can modify the structure of the DOM, or modify attributes in the DOM and component data model.
+
+A directive class is usually associated with an HTML element or attribute, and that element or attribute is often referred to as the directive itself.  
+When Angular finds a directive in an HTML [template](guide/glossary#template), it creates the matching directive class instance and gives the instance control over that portion of the browser DOM.
+
+There are three categories of directive:
+- [Components](guide/glossary#component) use `@Component` (an extension of `@Directive`) to associate a template with a class.
+- [Attribute directives](guide/glossary#attribute-directive) modify behavior and appearance of page elements.
+- [Structural directives](guide/glossary#structural-directive) modify the structure of the DOM.
+
+Angular supplies a number of built-in directives that begin with the `ng` prefix. You can also create new directives to implement your own functionality. 
+You associate a _selector_ (an HTML tag such as `<my-directive>`) with a custom directive, thereby extending the [template syntax](guide/template-syntax) that you can use in your apps.
+
+
+## Domain-specific language (DSL)
+
+A special-purpose library or API; see [Domain-specific language](https://en.wikipedia.org/wiki/Domain-specific_language).
+
+Angular extends TypeScript with domain-specific languages for a number of domains relevant to Angular apps, defined in ngModules such as [animations](guide/animations), [forms](guide/forms), and [routing and navigation](guide/router).
+
+{@a dynamic-components}
+
+## Dynamic component loading
+
+A technique for adding a component to the DOM at run time, which requires that you exclude the component from compilation, then connect it to Angular's change-detection and event handling framework when you add it to the DOM.
+
+See also [Custom element](guide/glossary#custom-element), which provides an easier path with the same result.
+
+{@a E}
+
+{@a ecma}
+
+## ECMAScript
+
+The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
+
+Not all browsers support the latest ECMAScript standard, but you can use a [transpiler](guide/glossary#transpile) (like [TypeScript](guide/glossary#typescript)) to write code using the latest features, which will then be transpiled to code that runs on versions that are supported by browsers. 
+
+To learn more, see the [Browser Support](guide/browser-support) page.
+
+
+{@a element}
+
+## Element
+
+Angular defines an `ElementRef` class to wrap render-specific native UI elements. This allows you use Angular templates and  data-binding to access DOM elements without reference to the native element in most cases.
+
+The documentation generally refers to either elements (`ElementRef` instances) or  DOM elements (which could be accessed directly if necessary).
+
+Compare [Custom element](guide/glossary#custom-element).
+
+## Entry point
+
+A JavaScript symbol that makes parts of an npm package available for import by other code. 
+The Angular [scoped packages](guide/glossary#scoped-package) each have an entry point named `index`.
+
+Within Angular, use [NgModules](guide/glossary#ngmodule) to achieve the same result.
+
+
+{@a F}
+
+
+{@a G}
+
+
+{@a H}
+
+{@a I}
+
+{@a injectable}
+
+## Injectable
+
+An Angular class or other definition that provides a dependency using the [dependency injection](guide/glossary#di) mechanism. An injectable class is marked by the `@Injectable` [decorator](guide/glossary#decorator).
+
+Both a [service](guide/glossary#service) and a [component](guide/glossary#component) that depends on that service must be marked as injectable. Other items, such as constant values, can be injectable.
+
+{@a injector}
+
+## Injector
+
+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
+using a configured [provider](guide/glossary#provider). 
+Injectors are created for NgModules automatically as part of the bootstrap process
+and are inherited through the component hierarchy.
+
+* An injector provides a singleton instance of a dependency, and can inject this same instance in multiple components.
+
+* A hierarchy of injectors at the NgModule and component level can provide different instances of a dependency to their own components and child components.
+
+* You can configure injectors with different providers that can provide different implementations of the same dependency.
+
+Learn more about the injector hierarchy in the [Dependency Injection guide](guide/hierarchical-dependency-injection).
+
+
+## Input
+
+When defining a [directive](guide/glossary#directive), the `@Input` decorator on a directive property makes that property available as a *target* of a
+[property binding](guide/template-syntax#property-binding).
+Data values flow into an input property from the data source identified
+in the [template expression](guide/glossary#template-expression) to the right of the equal sign.
+
+To learn more, see [input and output properties](guide/template-syntax#inputs-outputs).
+
+
+## Interpolation
+
+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 can be concatenated with neighboring text
+before it is assigned to an element property
+or displayed between element tags, as in this example.
+
+
+<code-example language="html" escape="html">
+  <label>My current hero is {{hero.name}}</label>
+
+</code-example>
+
+
+Read more about [interpolation](guide/template-syntax#interpolation) in the
+[Template Syntax](guide/template-syntax) page.
+
+
+{@a J}
+
+## JavaScript
+
+See [ECMAScript](guide/glossary#ecma), [TypeScript](guide/glossary#typescript).
+
+
+{@a jit}
+
+
+## Just-in-time (JIT) compilation
+
+The Angular Just-in-Time (JIT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code at run time, as part of bootstrapping. 
+JIT compilation is the default when you run Angular's `ng build` and `ng serve` CLI commands, and is a good choice during development. JIT mode is strongly discouraged for production use because it results in large application payloads that hinder the bootstrap performance.
+
+Compare [ahead-of-time (AOT) compilation](guide/glossary#aot).
+
+
+{@a K}
+
+
+{@a L}
+
+{@a lazy-load}
+
+## Lazy loading
+
+Lazy loading speeds up application load time by splitting the application into multiple bundles and loading them on demand. 
+For example, dependencies can be lazy-loaded as needed&emdash;as opposed to "eager-loaded" modules that are required by the root module, and are thus loaded on launch. 
+Similarly, the [router](guide/glossary#router) can load child views only when the parent view is activated, and you can build custom elements that can be loaded into an Angular app when needed.
+
+{@a library}
+
+## Library
+
+In Angular, a [project](guide/glossary#project) that provides functionality that can be included in other Angular apps. A library is not a complete Angular app, and it cannot run independently. 
+
+* Library developers can use the [CLI](guide/glossary#cli) to `generate` scaffolding for a new library in an existing [workspace](guide/glossary#workspace), and can publish a library as an `npm` package. 
+
+* App developers can use the [CLI](guide/glossary#cli) to `add` a published library for use with an app in the same [workspace](guide/glossary#workspace). 
+
+
+## Lifecycle hook
+
+An interface that allows you to tap into the lifecycle of [directives](guide/glossary#directive) and [components](guide/glossary#component) as they are created, updated, and destroyed.
+
+Each interface has a single hook method whose name is the interface name prefixed with `ng`.
+For example, the `OnInit` interface has a hook method named `ngOnInit`.
+
+Angular calls these hook methods in the following order:
+
+* `ngOnChanges`: when an [input](guide/glossary#input)/[output](guide/glossary#output) binding value changes.
+* `ngOnInit`: after the first `ngOnChanges`.
+* `ngDoCheck`: developer's custom change detection.
+* `ngAfterContentInit`: after component content initialized.
+* `ngAfterContentChecked`: after every check of component content.
+* `ngAfterViewInit`: after a component's views are initialized.
+* `ngAfterViewChecked`: after every check of a component's views.
+* `ngOnDestroy`: just before the directive is destroyed.
+
+To learn more, see the [Lifecycle Hooks](guide/lifecycle-hooks) page.
+
+
+{@a M}
+
+## Module
+
+In general, a module collects a block of code dedicated to a single purpose. Angular uses standard JavaScript modules, and also defines an Angular module, `NgModule`. 
+
+In JavaScript (ECMAScript), each file is a module and all objects defined in the file belong to that module. Objects can exported, making them public, and public objects can be imported for use by other modules.
+
+Angular ships as a collection of JavaScript modules, or libraries. Each Angular library name begins with the `@angular` prefix. Install them with the npm package manager and import parts of them with JavaScript `import` declarations.
+
+Compare the Angular [NgModule](guide/glossary#ngmodule).
+
+
+{@a N}
+
+{@a ngmodule}
+
+## NgModule
+
+A class definition with an `@NgModule` [decorator](guide/glossary#decorator), that declares and serves as a manifest for a block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.
+
+Like a [JavaScript module](guide/glossary#module), an NgModule can export functionality for use by other NgModules, and import public functionality from other NgModules.
+
+The metadata for an NgModule class collects components, directives, and pipes that the application uses along with the list of imports and exports. See also [Declarable](guide/glossary#declarable).
+
+NgModules are typically named after the file in which the exported thing is defined; for example, the Angular [DatePipe](api/common/DatePipe) class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`. You import them from an Angular [scoped package](guide/glossary#scoped-package) such as `@angular/core`.
+
+Every Angular application has a root module. By convention, the class is called `AppModule` and resides in a file named `app.module.ts`.
+
+To learn more, see the [NgModules](guide/ngmodules) guide.
+
+
+{@a O}
+
+{@a observable}
+
+
+## Observable
+
+A producer of multiple values, which it pushes to [subscribers](guide/glossary#subscriber). Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its `subscribe()` method, passing callbacks for notifications of new values, errors, or completion. 
+
+Observables can deliver single or multiple values of any type to subscribers, either synchronously (as a function delivers a value to its caller), or on a schedule. A subscriber receives notification of new values as they are produced, and of either error or normal completion. 
+
+Angular uses a third-party library called [Reactive Extensions (RxJS)](http://reactivex.io/rxjs/). 
+
+To learn more, see the [Observables](guide/observables) guide.
+
+
+{@a observer}
+
+## Observer
+
+An object passed to the `subscribe()` method for an [observable](guide/glossary#observable) that defines the callbacks for the [subscriber](guide/glossary#subscriber).
+
+## Output
+
+When defining a [directive](guide/glossary#directive), the `@Output` decorator on a directive property makes that property available as a *target* of [event binding](guide/template-syntax#event-binding).
+
+Events stream *out* of this property to the receiver identified
+in the [template expression](guide/glossary#template-expression) to the right of the equal sign.
+
+To learn more, see [input and output properties](guide/template-syntax#inputs-outputs).
+
+
+{@a P}
+
+## Pipe
+
+A class with the `@Pipe` decorator which defines a function that transforms input values to output values for display in a [view](guide/glossary#view).
+
+Angular defines various pipes, and you can define new pipes.
+ 
+To learn more, see the [pipes](guide/pipes) page.
+
+## Polyfill
+
+An [npm package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation. See the [Browser Support](guide/browser-support) guide for polyfills that support particular functionality for particular platforms. 
+
+{@a project}
+
+## Project
+
+In Angular, a folder within a [workspace](guide/glossary#workspace) that contains an Angular app or [library](guide/glossary#library). A workspace can contain multiple projects. All apps in a workspace can use libraries in the same workspace.
+
+## Provider
+
+A provider of an injectable service&mdash;specifically, a code recipe associated with a [DI token](guide/glossary#token), which an [injector](guide/glossary#injector) uses to create a new instance of a dependency for a class that requires it.
+
+Angular registers its own providers with every injector, for services that Angular defines. You can register your own providers for services that your app needs.
+
+See also [Service](guide/glossary#service), [Dependency Injection](guide/glossary#di).
+
+
+{@a Q}
+
+{@a R}
+
+## Reactive forms
+
+A technique for building Angular forms through code in a component.
+The alternative technique is [template-driven forms](guide/glossary#template-driven-forms).
+
+When building reactive forms:
+
+* The "source of truth" is the component. The validation is defined using code in the component.
+* Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`.
+* The template input elements do *not* use `ngModel`.
+* The associated Angular directives are all prefixed with `Form`, such as `FormGroup`, `FormControl`, and `FormControlName`.
+
+Reactive forms are powerful, flexible, and a good choice for more complex data-entry form scenarios, such as dynamic generation of form controls.
+
+
+## Router
+
+A tool that configures and implements navigation among states and [views](guide/glossary#view) within an Angular app.
+
+The Router module is an [NgModule](guide/glossary#ngmodule) that provides the necessary service providers and directives for navigating through application views. A [routing component](guide/glossary#routing-component) is one that imports the Router module and whose template contains a `RouterOutlet` element where it can display views produced by the router.
+ 
+The Router defines navigation among views on a single page, as opposed to navigation among pages. It interprets URL-like links to determine which views to create or destroy, and which components to load or unload. It allows you to take advantage of [lazy-loading](guide/glossary#lazy-load) in your Angular apps.
+
+To learn more, see the [Routing & Navigation](guide/router) guide.
+
+
+## Router module
+
+A separate [NgModule](guide/glossary#ngmodule) that provides the necessary service providers and directives for navigating through application views.
+
+For more information, see the [Routing & Navigation](guide/router) page.
+
+## Router outlet
+
+A directive that acts as a placeholder in a routing component's template, which Angular dynamically fills based on the current router state.
+
+## Routing component
+
+An Angular [component](guide/glossary#component) with a `RouterOutlet` that displays views based on router navigations.
+
+For more information, see the [Routing & Navigation](guide/router) page.
+
+
+{@a S}
+
+{@a schematic}
+
+## Schematic
+
+A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. 
+
+The Angular [CLI](guide/glossary#cli) uses schematics to generate and modify [Angular projects](guide/glossary#project) and parts of projects.
+
+* Angular provides a set of schematics for use with the CLI. 
+For details, see [Angular CLI documentation].(https://github.com/angular/angular-cli/wiki).
+
+* Library developers can create schematics that enable the CLI to generate their published libraries.
+For more information, see https://www.npmjs.com/package/@angular-devkit/schematics. 
+
+
+## Scoped package
+
+A way to group related npm packages. 
+NgModules are delivered within *scoped packages* whose names begin with the Angular *scope name* `@angular`. For example, `@angular/core`, `@angular/common`, `@angular/forms`, and `@angular/router`.
+
+Import a scoped package in the same way that you import a normal package. 
+
+<code-example path="architecture/src/app/app.component.ts" linenums="false" title="architecture/src/app/app.component.ts (import)" region="import">
+
+</code-example>
+
+
+## Service
+
+In Angular, a service is a class with the [@Injectable](guide/glossary#injectable) decorator that encapsulates non-UI logic and code that can be re-used across an application. 
+Angular distinguishes components from services in order to increase modularity and reusability.
+
+The `@Injectable` metadata allows the service class to be used with the [dependency injection](guide/glossary#di) mechanism. The injectable class is instantiated by a [provider](guide/glossary#provider), and a module maintains a list of providers that can provide a particular type of service as needed by components or other services that require it.
+
+To learn more, see [Introduction to Services](guide/architecture-services).
+
+{@a structural-directive}
+
+
+{@a structural-directives}
+
+
+## Structural directives
+
+A category of [directive](guide/glossary#directive) that is responsible for shaping or reshaping HTML layout by modifying the DOM (adding, removing, or manipulating elements and their children).
+
+To learn more, see the [Structural Directives](guide/structural-directives) page.
+
+{@a subscriber}
+
+## Subscriber
+
+A function that defines how to obtain or generate values or messages to be published. This function is executed when a consumer calls the `subscribe()` method of an [observable](guide/glossary#observable).
+
+The act of subscribing to an observable triggers its execution, associates callbacks with it, and creates a `Subscription` object that lets you unsubscribe.
+
+The `subscribe()` method takes a JavaScript object (called an "observer") with up to three callbacks, one for each type of notification that an observable can deliver:
+
+- The `next` notification: sends a value such as a Number, a String, an Object, etc.
+- The `error` notification sends a JavaScript Error or exception.
+- The `complete` notification does not send a value, but the handler is called when the call completes. Scheduled values can continue to be returned after the call completes.
+
+{@a T}
+
+## Template
+
+A template defines how to render a component's [view](guide/glossary#view) in HTML  
+
+A template combines straight HTML with Angular [data-binding](guide/glossary#data-binding) syntax, [directives](guide/glossary#directive),  and [template expressions](guide/glossary#template-expression) (logical constructs). The Angular elements insert or calculate values that modify the HTML elements before the page is displayed.
+ 
+A template is associated with a [component](guide/glossary#component) class through `@Component` [decorator](guide/glossary#decorator). The HTML can be provided inline, as the value of the `template` property, or in a separate HTML file linked through the `templateUrl` property. 
+
+Additional templates, represented by a `TemplateRef` object, can define alternative or _embedded_ views, which can be referenced from multiple components.
+
+## Template-driven forms
+
+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).
+
+When building template-driven forms:
+
+* The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
+* [Two-way binding](guide/glossary#data-binding) with `ngModel` keeps the component model synchronized with the user's entry into the input elements.
+* Behind the scenes, Angular creates a new control for each input element, provided you have set up a `name` attribute and two-way binding for each input.
+* The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
+
+Template-driven forms are convenient, quick, and simple. They are a good choice for many basic data-entry form scenarios.
+
+Read about how to build template-driven forms
+in the [Forms](guide/forms) page.
+
+{@a template-expression}
+
+
+## Template expression
+
+A TypeScript-like syntax that Angular evaluates within
+a [data binding](guide/glossary#data-binding).
+
+Read about how to write template expressions
+in the [Template expressions](guide/template-syntax#template-expressions) section
+of the [Template Syntax](guide/template-syntax) page.
+
+{@a token}
+
+## Token
+
+An opaque identifier used for efficient table lookup. In Angular, a [DI token](guide/glossary#di-token) is used to find [providers](guide/glossary#provider) of dependencies in the [dependency injection](guide/glossary#di) system.
+
+{@a transpile}
+
+## Transpile
+
+The translation process that tranforms one version of JavaScript to another version; for example, down-leveling ES2015 to the older ES5 version.
+
+
+{@a typescript}
+
+## TypeScript
+
+TypeScript is a programming language notable for its optional typing system, which provides
+compile-time type checking and strong tooling support (such as
+code completion, refactoring, inline documentation, and intelligent search). Many code editors
+and IDEs support TypeScript either natively or with plug-ins.
+
+TypeScript is the preferred language for Angular development. Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org/).
+
+
+{@a U}
+
+{@a V}
+
+## View
+
+A view is the smallest grouping of display elements that can be created and destroyed together. 
+
+Angular renders a view under the control of one or more [directives](guide/glossary#directive),
+especially  [component](guide/glossary#component) directives and their companion [templates](guide/glossary#template). 
+
+A view is specifically represented by a `ViewRef` instance associated with the component. 
+A view that belongs to a component is called a  _host view_. 
+Views are typically collected into [view hierarchies](guide/glossary#view-tree). 
+
+Properties of elements in a view can change dynamically, in response to user actions; the structure (number and order) of elements in a view cannot. You can change the structure of elements by inserting, moving, or removing nested views within their view containers.
+
+View hierarchies can be loaded and unloaded dynamically as the user navigates through the application, typically under the control of a [router](guide/glossary#router).
+
+{@a view-tree}
+
+## View hierarchy
+
+A tree of related views that can be acted on as a unit. The root view is a component's _host view_.  A host view can be the root of a tree of _embedded views_, collected in a _view container_ (`ViewContainerRef`) attached to an anchor element in the hosting component. The view hierarchy is a key part of Angular change detection. 
+
+The view hierarchy does not imply a component hierarchy. Views that are embedded in the context of a particular hierarchy can be host views of other components. Those components can be in the same NgModule as the hosting component, or belong to other NgModules.
+
+{@a W}
+
+## Web component
+
+See [Custom element](guide/glossary#custom-element)
+
+{@a workspace}
+
+## Workspace
+
+In Angular, a folder that contains [projects](guide/glossary#project) (that is, apps and libraries).
+The [CLI](guide/glossary#cli) `new` command creates a workspace to contain projects. Commands such as `add` and `generate`, that create or operate on apps and libraries, must be executed from within a workspace folder. 
+
+{@a X}
+
+
+{@a Y}
+
+
+{@a Z}
+
+## Zone
+
+An execution context for a set of asynchronous tasks. Useful for debugging, profiling, and testing apps that include asynchronous operations such as event processing, promises, and calls to remote servers.
+
+An Angular app runs in a zone where it can respond to asynchronous events by checking for data changes and updating the information it displays by resolving [data bindings](guide/glossary#data-binding).
+
+A zone client can take action before and after an async operation completes. 
+
+Learn more about zones in this
+[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md
new file mode 100644
index 000000000000..48b671b8bd05
--- /dev/null
+++ b/aio/content/guide/hierarchical-dependency-injection.md
@@ -0,0 +1,255 @@
+# Hierarchical Dependency Injectors
+
+You learned the basics of Angular Dependency injection in the
+[Dependency Injection](guide/dependency-injection) guide.
+
+Angular has a _Hierarchical Dependency Injection_ system.
+There is actually a tree of injectors that parallel an application's component tree.
+You can reconfigure the injectors at any level of that component tree.
+
+This guide explores this system and how to use it to your advantage.
+
+Try the <live-example></live-example>.
+
+
+
+## The injector tree
+
+In the [Dependency Injection](guide/dependency-injection) guide,
+you learned how to configure a dependency injector and how to retrieve dependencies where you need them.
+
+In fact, there is no such thing as ***the*** injector.
+An application may have multiple injectors.
+An Angular application is a tree of components. Each component instance has its own injector.
+The tree of components parallels the tree of injectors.
+
+
+<div class="alert is-helpful">
+
+
+
+The component's injector may be a _proxy_ for an ancestor injector higher in the component tree.
+That's an implementation detail that improves efficiency.
+You won't notice the difference and
+your mental model should be that every component has its own injector.
+
+
+</div>
+
+
+
+Consider this guide's variation on the Tour of Heroes application.
+At the top is the `AppComponent` which has some sub-components.
+One of them is the `HeroesListComponent`.
+The `HeroesListComponent` holds and manages multiple instances of the `HeroTaxReturnComponent`.
+The following diagram represents the state of the this guide's three-level component tree when there are three instances of `HeroTaxReturnComponent`
+open simultaneously.
+
+
+<figure>
+  <img src="generated/images/guide/dependency-injection/component-hierarchy.png" alt="injector tree">
+</figure>
+
+
+
+### Injector bubbling
+
+When a component requests a dependency, Angular tries to satisfy that dependency with a provider registered in that component's own injector.
+If the component's injector lacks the provider, it passes the request up to its parent component's injector.
+If that injector can't satisfy the request, it passes it along to *its* parent injector.
+The requests keep bubbling up until Angular finds an injector that can handle the request or runs out of ancestor injectors.
+If it runs out of ancestors, Angular throws an error.
+
+
+<div class="alert is-helpful">
+
+
+
+You can cap the bubbling. An intermediate component can declare that it is the "host" component.
+The hunt for providers will climb no higher than the injector for that host component.
+This is a topic for another day.
+
+
+</div>
+
+
+
+### Re-providing a service at different levels
+
+You can re-register a provider for a particular dependency token at multiple levels of the injector tree.
+You don't *have* to re-register providers. You shouldn't do so unless you have a good reason.
+But you *can*.
+
+As the resolution logic works upwards, the first provider encountered wins.
+Thus, a provider in an intermediate injector intercepts a request for a service from something lower in the tree.
+It effectively "reconfigures" and "shadows" a provider at a higher level in the tree.
+
+If you only specify providers at the top level (typically the root `AppModule`), the tree of injectors appears to be flat.
+All requests bubble up to the root <code>NgModule</code> injector that you configured with the `bootstrapModule` method.
+
+
+
+## Component injectors
+
+The ability to configure one or more providers at different levels opens up interesting and useful possibilities.
+
+### Scenario: service isolation
+
+Architectural reasons may lead you to restrict access to a service to the application domain where it belongs.
+
+The guide sample includes a `VillainsListComponent` that displays a list of villains.
+It gets those villains from a `VillainsService`.
+
+While you _could_ provide `VillainsService` in the root `AppModule` (that's where you'll find the `HeroesService`),
+that would make the `VillainsService` available everywhere in the application, including the _Hero_ workflows.
+
+If you later modified the `VillainsService`, you could break something in a hero component somewhere.
+That's not supposed to happen but providing the service in the root `AppModule` creates that risk.
+
+Instead, provide the `VillainsService` in the `providers` metadata of the `VillainsListComponent` like this:
+
+
+<code-example path="hierarchical-dependency-injection/src/app/villains-list.component.ts" linenums="false" title="src/app/villains-list.component.ts (metadata)" region="metadata">
+
+</code-example>
+
+
+
+By providing `VillainsService` in the `VillainsListComponent` metadata and nowhere else,
+the service becomes available only in the `VillainsListComponent` and its sub-component tree.
+It's still a singleton, but it's a singleton that exist solely in the _villain_ domain.
+
+Now you know that a hero component can't access it. You've reduced your exposure to error.
+
+### Scenario: multiple edit sessions
+
+Many applications allow users to work on several open tasks at the same time.
+For example, in a tax preparation application, the preparer could be working on several tax returns,
+switching from one to the other throughout the day.
+
+This guide demonstrates that scenario with an example in the Tour of Heroes theme.
+Imagine an outer `HeroListComponent` that displays a list of super heroes.
+
+To open a hero's tax return, the preparer clicks on a hero name, which opens a component for editing that return.
+Each selected hero tax return opens in its own component and multiple returns can be open at the same time.
+
+Each tax return component has the following characteristics:
+
+* Is its own tax return editing session.
+* Can change a tax return without affecting a return in another component.
+* Has the ability to save the changes to its tax return or cancel them.
+
+
+<figure>
+  <img src="generated/images/guide/dependency-injection/hid-heroes-anim.gif" alt="Heroes in action">
+</figure>
+
+
+
+One might suppose that the `HeroTaxReturnComponent` has logic to manage and restore changes.
+That would be a pretty easy task for a simple hero tax return.
+In the real world, with a rich tax return data model, the change management would be tricky.
+You might delegate that management to a helper service, as this example does.
+
+Here is the `HeroTaxReturnService`.
+It caches a single `HeroTaxReturn`, tracks changes to that return, and can save or restore it.
+It also delegates to the application-wide singleton `HeroService`, which it gets by injection.
+
+
+<code-example path="hierarchical-dependency-injection/src/app/hero-tax-return.service.ts" title="src/app/hero-tax-return.service.ts">
+
+</code-example>
+
+
+
+Here is the `HeroTaxReturnComponent` that makes use of it.
+
+
+<code-example path="hierarchical-dependency-injection/src/app/hero-tax-return.component.ts" title="src/app/hero-tax-return.component.ts">
+
+</code-example>
+
+
+
+The _tax-return-to-edit_ arrives via the input property which is implemented with getters and setters.
+The setter initializes the component's own instance of the `HeroTaxReturnService` with the incoming return.
+The getter always returns what that service says is the current state of the hero.
+The component also asks the service to save and restore this tax return.
+
+There'd be big trouble if _this_ service were an application-wide singleton.
+Every component would share the same service instance.
+Each component would overwrite the tax return that belonged to another hero.
+What a mess!
+
+Look closely at the metadata for the `HeroTaxReturnComponent`. Notice the `providers` property.
+
+
+<code-example path="hierarchical-dependency-injection/src/app/hero-tax-return.component.ts" linenums="false" title="src/app/hero-tax-return.component.ts (providers)" region="providers">
+
+</code-example>
+
+
+
+The `HeroTaxReturnComponent` has its own provider of the `HeroTaxReturnService`.
+Recall that every component _instance_ has its own injector.
+Providing the service at the component level ensures that _every_ instance of the component gets its own, private instance of the service.
+No tax return overwriting. No mess.
+
+
+<div class="alert is-helpful">
+
+
+
+The rest of the scenario code relies on other Angular features and techniques that you can learn about elsewhere in the documentation.
+You can review it and download it from the <live-example></live-example>.
+
+
+</div>
+
+
+
+### Scenario: specialized providers
+
+Another reason to re-provide a service is to substitute a _more specialized_ implementation of that service,
+deeper in the component tree.
+
+Consider again the Car example from the [Dependency Injection](guide/dependency-injection) guide.
+Suppose you configured the root injector (marked as A) with _generic_ providers for
+`CarService`, `EngineService` and `TiresService`.
+
+You create a car component (A) that displays a car constructed from these three generic services.
+
+Then you create a child component (B) that defines its own, _specialized_ providers for `CarService` and `EngineService`
+that have special capabilities suitable for whatever is going on in component (B).
+
+Component (B) is the parent of another component (C) that defines its own, even _more specialized_ provider for `CarService`.
+
+
+<figure>
+  <img src="generated/images/guide/dependency-injection/car-components.png" alt="car components">
+</figure>
+
+
+
+Behind the scenes, each component sets up its own injector with zero, one, or more providers defined for that component itself.
+
+When you resolve an instance of `Car` at the deepest component (C),
+its injector produces an instance of `Car` resolved by injector (C) with an `Engine` resolved by injector (B) and
+`Tires` resolved by the root injector (A).
+
+
+<figure>
+  <img src="generated/images/guide/dependency-injection/injector-tree.png" alt="car injector tree">
+</figure>
+
+
+
+<div class="alert is-helpful">
+
+
+
+The code for this _cars_ scenario is in the `car.components.ts` and `car.services.ts` files of the sample
+which you can review and download from the <live-example></live-example>.
+
+</div>
+
diff --git a/aio/content/guide/http.md b/aio/content/guide/http.md
new file mode 100644
index 000000000000..e2f2df084244
--- /dev/null
+++ b/aio/content/guide/http.md
@@ -0,0 +1,1047 @@
+# 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.
+
+The `HttpClient` in `@angular/common/http` offers a simplified client HTTP API for Angular applications
+that rests on the `XMLHttpRequest` interface exposed by browsers.
+Additional benefits of `HttpClient` include testability features, typed request and response objects, request and response interception, `Observable` apis, and streamlined error handling.
+
+You can run the <live-example></live-example> that accompanies this guide.
+
+<div class="alert is-helpful">
+
+The sample app does not require a data server.
+It relies on the 
+[Angular _in-memory-web-api_](https://github.com/angular/in-memory-web-api/blob/master/README.md),
+which replaces the _HttpClient_ module's `HttpBackend`.
+The replacement service simulates the behavior of a REST-like backend.
+
+Look at the `AppModule` _imports_ to see how it is configured.
+
+</div>
+
+## Setup
+
+Before you can use the `HttpClient`, you need to import the Angular `HttpClientModule`. 
+Most apps do so in the root `AppModule`.
+
+<code-example 
+  path="http/src/app/app.module.ts"
+  region="sketch"
+  title="app/app.module.ts (excerpt)" linenums="false">
+</code-example>
+
+Having imported `HttpClientModule` into the `AppModule`, you can inject the `HttpClient`
+into an application class as shown in the following `ConfigService` example.
+
+<code-example 
+  path="http/src/app/config/config.service.ts"
+  region="proto"
+  title="app/config/config.service.ts (excerpt)" linenums="false">
+</code-example>
+
+## Getting JSON data
+
+Applications often request JSON data from the server. 
+For example, the app might need a configuration file on the server, `config.json`, 
+that specifies resource URLs.
+
+<code-example 
+  path="http/src/assets/config.json"
+  title="assets/config.json" linenums="false">
+</code-example>
+
+The `ConfigService` fetches this file with a `get()` method on `HttpClient`.
+
+<code-example 
+  path="http/src/app/config/config.service.ts"
+  region="getConfig_1"
+  title="app/config/config.service.ts (getConfig v.1)" linenums="false">
+</code-example>
+
+A component, such as `ConfigComponent`, injects the `ConfigService` and calls
+the `getConfig` service method.
+
+<code-example 
+  path="http/src/app/config/config.component.ts"
+  region="v1"
+  title="app/config/config.component.ts (showConfig v.1)" linenums="false">
+</code-example>
+
+Because the service method returns an `Observable` of configuration data,
+the component **subscribes** to the method's return value.
+The subscription callback copies the data fields into the component's `config` object,
+which is data-bound in the component template for display.
+
+### Why write a service
+
+This example is so simple that it is tempting to write the `Http.get()` inside the
+component itself and skip the service.
+
+However, data access rarely stays this simple.
+You typically post-process the data, add error handling, and maybe some retry logic to
+cope with intermittent connectivity.
+
+The component quickly becomes cluttered with data access minutia.
+The component becomes harder to understand, harder to test, and the data access logic can't be re-used or standardized.
+
+That's why it is a best practice to separate presentation of data from data access by
+encapsulating data access in a separate service and delegating to that service in
+the component, even in simple cases like this one.
+
+### Type-checking the response
+
+The subscribe callback above requires bracket notation to extract the data values.
+
+<code-example 
+  path="http/src/app/config/config.component.ts"
+  region="v1_callback" linenums="false">
+</code-example>
+
+You can't write `data.heroesUrl` because TypeScript correctly complains that the `data` object from the service does not have a `heroesUrl` property. 
+
+The `HttpClient.get()` method parsed the JSON server response into the anonymous `Object` type. It doesn't know what the shape of that object is.
+
+You can tell `HttpClient` the type of the response to make consuming the output easier and more obvious.
+
+First, define an interface with the correct shape:
+
+<code-example 
+  path="http/src/app/config/config.service.ts"
+  region="config-interface" linenums="false">
+</code-example>
+
+Then, specify that interface as the `HttpClient.get()` call's type parameter in the service:
+
+<code-example 
+  path="http/src/app/config/config.service.ts"
+  region="getConfig_2" 
+  title="app/config/config.service.ts (getConfig v.2)" linenums="false">
+</code-example>
+
+The callback in the updated component method receives a typed data object, which is
+easier and safer to consume:
+
+<code-example 
+  path="http/src/app/config/config.component.ts"
+  region="v2"
+  title="app/config/config.component.ts (showConfig v.2)" linenums="false">
+</code-example>
+
+### 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 that are important to the application workflow. 
+
+Tell `HttpClient` that you want the full response with the `observe` option:
+
+<code-example 
+  path="http/src/app/config/config.service.ts"
+  region="getConfigResponse" linenums="false">
+</code-example>
+
+Now `HttpClient.get()` returns an `Observable` of typed `HttpResponse` rather than just the JSON data.
+
+The component's `showConfigResponse()` method displays the response headers as well as the configuration:
+
+<code-example 
+  path="http/src/app/config/config.component.ts"
+  region="showConfigResponse" 
+  title="app/config/config.component.ts (showConfigResponse)"
+  linenums="false">
+</code-example>
+
+As you can see, the response 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_ object instead of a successful response.
+
+You _could_ handle in the component by adding a second callback to the `.subscribe()`:
+
+<code-example 
+  path="http/src/app/config/config.component.ts"
+  region="v3" 
+  title="app/config/config.component.ts (showConfig v.3 with error handling)"
+  linenums="false">
+</code-example>
+
+It's certainly a good idea to give the user some kind of feedback when data access fails.
+But displaying the raw error object returned by `HttpClient` is far from the best way to do it.
+
+{@a error-details}
+### Getting error details
+
+Detecting that an error occurred is one thing.
+Interpreting that error and composing a user-friendly response is a bit more involved.
+
+Two types of errors can occur. The server backend might reject the request, returning an HTTP response with a status code such as 404 or 500. These are error _responses_.
+
+Or something could go wrong on the client-side such as a network error that prevents the request from completing successfully or an exception thrown in an RxJS operator. These errors produce JavaScript `ErrorEvent` objects.
+
+The `HttpClient` captures both kinds of errors in its `HttpErrorResponse` and you can inspect that response to figure out what really happened.
+
+Error inspection, interpretation, and resolution is something you want to do in the _service_, 
+not in the _component_.  
+
+You might first devise an error handler like this one:
+
+<code-example 
+  path="http/src/app/config/config.service.ts"
+  region="handleError" 
+  title="app/config/config.service.ts (handleError)" linenums="false">
+</code-example>
+
+Notice that this handler returns an RxJS [`ErrorObservable`](#rxjs) with a user-friendly error message.
+Consumers of the service expect service methods to return an `Observable` of some kind,
+even a "bad" one.
+
+Now you take the `Observables` returned by the `HttpClient` methods
+and _pipe them through_ to the error handler.
+
+<code-example 
+  path="http/src/app/config/config.service.ts"
+  region="getConfig_3" 
+  title="app/config/config.service.ts (getConfig v.3 with error handler)" linenums="false">
+</code-example>
+
+### `retry()`
+
+Sometimes the error is transient and will go away automatically if you try again.
+For example, network interruptions are common in mobile scenarios, and trying again
+may produce a successful result.
+
+The [RxJS library](#rxjs) offers several _retry_ operators that are worth exploring.
+The simplest is called `retry()` and it automatically re-subscribes to a failed `Observable` a specified number of times. _Re-subscribing_ to the result of an `HttpClient` method call has the effect of reissuing the HTTP request.
+
+_Pipe_ it onto the `HttpClient` method result just before the error handler.
+
+<code-example 
+  path="http/src/app/config/config.service.ts"
+  region="getConfig" 
+  title="app/config/config.service.ts (getConfig with retry)" linenums="false">
+</code-example>
+
+{@a rxjs}
+## Observables and operators
+
+The previous sections of this guide referred to RxJS `Observables` and operators such as `catchError` and `retry`.
+You will encounter more RxJS artifacts as you continue below.
+
+[RxJS](http://reactivex.io/rxjs/) is a library for composing asynchronous and callback-based code
+in a _functional, reactive style_.
+Many Angular APIs, including `HttpClient`, produce and consume RxJS `Observables`. 
+
+RxJS itself is out-of-scope for this guide. You will find many learning resources on the web.
+While you can get by with a minimum of RxJS knowledge, you'll want to grow your RxJS skills over time in order to use `HttpClient` effectively.
+
+If you're following along with these code snippets, note that you must import the RxJS observable and operator symbols that appear in those snippets. These `ConfigService` imports are typical.
+
+<code-example 
+  path="http/src/app/config/config.service.ts"
+  region="rxjs-imports" 
+  title="app/config/config.service.ts (RxJS imports)" linenums="false">
+</code-example>
+
+## Requesting non-JSON data
+
+Not all APIs return JSON data. In this next example,
+a `DownloaderService` method reads a text file from the server
+and logs the file contents, before returning those contents to the caller
+as an `Observable<string>`. 
+
+<code-example 
+  path="http/src/app/downloader/downloader.service.ts"
+  region="getTextFile" 
+  title="app/downloader/downloader.service.ts (getTextFile)" linenums="false">
+</code-example>
+
+`HttpClient.get()` returns a string rather than the default JSON because of the `responseType` option.
+
+The RxJS `tap` operator (as in "wiretap") lets the code inspect good and error values passing through the observable without disturbing them. 
+
+A `download()` method in the `DownloaderComponent` initiates the request by subscribing to the service method.
+
+<code-example 
+  path="http/src/app/downloader/downloader.component.ts"
+  region="download" 
+  title="app/downloader/downloader.component.ts (download)" linenums="false">
+</code-example>
+
+## Sending data to the server
+
+In addition to fetching data from the server, `HttpClient` supports mutating requests, that is, sending data to the server with other HTTP methods such as PUT, POST, and DELETE.
+
+The sample app for this guide includes a simplified version of the "Tour of Heroes" example
+that fetches heroes and enables users to add, delete, and update them.
+
+The following sections excerpt methods of the sample's `HeroesService`.
+
+### Adding headers
+
+Many servers require extra headers for save operations.
+For example, they may require a "Content-Type" header to explicitly declare 
+the MIME type of the request body.
+Or perhaps the server requires an authorization token.
+
+The `HeroesService` defines such headers in an `httpOptions` object that will be passed
+to every `HttpClient` save method.
+
+<code-example 
+  path="http/src/app/heroes/heroes.service.ts"
+  region="http-options" 
+  title="app/heroes/heroes.service.ts (httpOptions)" linenums="false">
+</code-example>
+
+### Making a POST request
+
+Apps often POST data to a server. They POST when submitting a form. 
+In the following example, the `HeroesService` posts when adding a hero to the database.
+
+<code-example 
+  path="http/src/app/heroes/heroes.service.ts"
+  region="addHero" 
+  title="app/heroes/heroes.service.ts (addHero)" linenums="false">
+</code-example>
+
+The `HttpClient.post()` method is similar to `get()` in that it has a type parameter
+(you're expecting the server to return the new hero)
+and it takes a resource URL.
+
+It takes two more parameters:
+
+1. `hero` - the data to POST in the body of the request.
+1. `httpOptions` - the method options which, in this case, [specify required headers](#adding-headers).
+
+Of course it catches errors in much the same manner [described above](#error-details).
+
+The `HeroesComponent` initiates the actual POST operation by subscribing to 
+the `Observable` returned by this service method.
+
+<code-example 
+  path="http/src/app/heroes/heroes.component.ts"
+  region="add-hero-subscribe" 
+  title="app/heroes/heroes.component.ts (addHero)" linenums="false">
+</code-example>
+
+When the server responds successfully with the newly added hero, the component adds
+that hero to the displayed `heroes` list.
+
+### Making a DELETE request
+
+This application deletes a hero with the `HttpClient.delete` method by passing the hero's id
+in the request URL.
+
+<code-example 
+  path="http/src/app/heroes/heroes.service.ts"
+  region="deleteHero" 
+  title="app/heroes/heroes.service.ts (deleteHero)" linenums="false">
+</code-example>
+
+The `HeroesComponent` initiates the actual DELETE operation by subscribing to 
+the `Observable` returned by this service method.
+
+<code-example 
+  path="http/src/app/heroes/heroes.component.ts"
+  region="delete-hero-subscribe" 
+  title="app/heroes/heroes.component.ts (deleteHero)" linenums="false">
+</code-example>
+
+The component isn't expecting a result from the delete operation, so it subscribes without a callback. Even though you are not using the result, you still have to subscribe. Calling the `subscribe()` method _executes_ the observable, which is what initiates the DELETE request. 
+
+<div class="alert is-important">
+
+You must call _subscribe()_ or nothing happens. Just calling `HeroesService.deleteHero()` **does not initiate the DELETE request.**
+
+</div>
+
+
+<code-example 
+  path="http/src/app/heroes/heroes.component.ts"
+  region="delete-hero-no-subscribe" linenums="false">
+</code-example>
+
+{@a always-subscribe}
+**Always _subscribe_!**
+
+An `HttpClient` method does not begin its HTTP request until you call `subscribe()` on the observable returned by that method. This is true for _all_ `HttpClient` _methods_.
+
+<div class="alert is-helpful">
+
+The [`AsyncPipe`](api/common/AsyncPipe) subscribes (and unsubscribes) for you automatically.
+
+</div>
+
+All observables returned from `HttpClient` methods are _cold_ by design.
+Execution of the HTTP request is _deferred_, allowing you to extend the
+observable with additional operations such as  `tap` and `catchError` before anything actually happens.
+
+Calling `subscribe(...)` triggers execution of the observable and causes
+`HttpClient` to compose and send the HTTP request to the server.
+
+You can think of these observables as _blueprints_ for actual HTTP requests.
+
+<div class="alert is-helpful">
+
+In fact, each `subscribe()` initiates a separate, independent execution of the observable.
+Subscribing twice results in two HTTP requests.
+
+```javascript
+const req = http.get<Heroes>('/api/heroes');
+// 0 requests made - .subscribe() not called.
+req.subscribe();
+// 1 request made.
+req.subscribe();
+// 2 requests made.
+```
+</div>
+
+### Making a PUT request
+
+An app will send a PUT request to completely replace a resource with updated data.
+The following `HeroesService` example is just like the POST example.
+
+<code-example 
+  path="http/src/app/heroes/heroes.service.ts"
+  region="updateHero" 
+  title="app/heroes/heroes.service.ts (updateHero)" linenums="false">
+</code-example>
+
+For the reasons [explained above](#always-subscribe), the caller (`HeroesComponent.update()` in this case) must `subscribe()` to the observable returned from the `HttpClient.put()`
+in order to initiate the request.
+
+## Advanced usage
+
+We have discussed the basic HTTP functionality in `@angular/common/http`, but sometimes you need to do more than make simple requests and get data back.
+
+### Configuring the request
+
+Other aspects of an outgoing request can be configured via the options object
+passed as the last argument to the `HttpClient` method.
+
+You [saw earlier](#adding-headers) that the `HeroesService` sets the default headers by
+passing an options object (`httpOptions`) to its save methods.
+You can do more.
+
+#### Update headers
+
+You can't directly modify the existing headers within the previous options
+object because instances of the `HttpHeaders` class are immutable.
+
+Use the `set()` method instead. 
+It returns a clone of the current instance with the new changes applied.
+
+Here's how you might update the authorization header (after the old token expired) 
+before making the next request.
+
+<code-example 
+  path="http/src/app/heroes/heroes.service.ts"
+  region="update-headers" linenums="false">
+</code-example>
+
+#### URL Parameters
+
+Adding URL search parameters works a similar way.
+Here is a `searchHeroes` method that queries for heroes whose names contain the search term.
+
+<code-example 
+  path="http/src/app/heroes/heroes.service.ts"
+  region="searchHeroes" linenums="false">
+</code-example>
+
+If there is a search term, the code constructs an options object with an HTML URL-encoded search parameter. If the term were "foo", the GET request URL would be `api/heroes/?name=foo`.
+
+The `HttpParams` are immutable so you'll have to use the `set()` method to update the options.
+
+### Debouncing requests
+
+The sample includes an _npm package search_ feature.
+
+When the user enters a name in a search-box, the `PackageSearchComponent` sends
+a search request for a package with that name to the NPM web API.
+
+Here's a pertinent excerpt from the template:
+
+<code-example 
+  path="http/src/app/package-search/package-search.component.html"
+  region="search" 
+  title="app/package-search/package-search.component.html (search)">
+</code-example>
+
+The `(keyup)` event binding sends every keystroke to the component's `search()` method.
+
+Sending a request for every keystroke could be expensive.
+It's better to wait until the user stops typing and then send a request.
+That's easy to implement with RxJS operators, as shown in this excerpt.
+
+<code-example 
+  path="http/src/app/package-search/package-search.component.ts"
+  region="debounce" 
+  title="app/package-search/package-search.component.ts (excerpt))">
+</code-example>
+
+The `searchText$` is the sequence of search-box values coming from the user.
+It's defined as an RxJS `Subject`, which means it is a multicasting `Observable`
+that can also produce values for itself by calling `next(value)`,
+as happens in the `search()` method.
+
+Rather than forward every `searchText` value directly to the injected `PackageSearchService`,
+the code in `ngOnInit()` _pipes_ search values through three operators:
+
+1. `debounceTime(500)` - wait for the user to stop typing (1/2 second in this case).
+1. `distinctUntilChanged()` - wait until the search text changes.
+1. `switchMap()` - send the search request to the service.
+
+The code sets `packages$` to this re-composed `Observable` of search results.
+The template subscribes to `packages$` with the [AsyncPipe](api/common/AsyncPipe)
+and displays search results as they arrive.
+
+A search value reaches the service only if it's a new value and the user has stopped typing.
+
+<div class="alert is-helpful">
+
+The `withRefresh` option is explained [below](#cache-refresh).
+
+</div>
+
+#### _switchMap()_
+
+The `switchMap()` operator has three important characteristics.
+
+1. It takes a function argument that returns an `Observable`.
+`PackageSearchService.search` returns an `Observable`, as other data service methods do.
+
+2. If a previous search request is still _in-flight_ (as when the connection is poor),
+it cancels that request and sends a new one.
+
+3. It returns service responses in their original request order, even if the
+server returns them out of order. 
+
+
+<div class="alert is-helpful">
+
+If you think you'll reuse this debouncing logic,
+consider moving it to a utility function or into the `PackageSearchService` itself.
+
+</div>
+
+### Intercepting requests and responses
+
+_HTTP Interception_ is a major feature of `@angular/common/http`. 
+With interception, you declare _interceptors_ that inspect and transform HTTP requests from your application to the server.
+The same interceptors may also inspect and transform the server's responses on their way back to the application.
+Multiple interceptors form a _forward-and-backward_ chain of request/response handlers.
+
+Interceptors can perform a variety of  _implicit_ tasks, from authentication to logging, in a routine, standard way, for every HTTP request/response. 
+
+Without interception, developers would have to implement these tasks _explicitly_ 
+for each `HttpClient` method call.
+
+#### Write an interceptor
+
+To implement an interceptor, declare a class that implements the `intercept()` method of the `HttpInterceptor` interface.
+
+ Here is a do-nothing _noop_ interceptor that simply passes the request through without touching it:
+<code-example 
+  path="http/src/app/http-interceptors/noop-interceptor.ts"
+  title="app/http-interceptors/noop-interceptor.ts"
+  linenums="false">
+</code-example>
+
+The `intercept` method transforms a request into an `Observable` that eventually returns the HTTP response. 
+In this sense, each interceptor is fully capable of handling the request entirely by itself.
+
+Most interceptors inspect the request on the way in and forward the (perhaps altered) request to the `handle()` method of the `next` object which implements the [`HttpHandler`](api/common/http/HttpHandler) interface.
+
+```javascript
+export abstract class HttpHandler {
+  abstract handle(req: HttpRequest<any>): Observable<HttpEvent<any>>;
+}
+```
+
+Like `intercept()`, the `handle()` method transforms an HTTP request into an `Observable` of [`HttpEvents`](#httpevents) which ultimately include the server's response. The `intercept()` method could inspect that observable and alter it before returning it to the caller.
+
+This _no-op_ interceptor simply calls `next.handle()` with the original request and returns the observable without doing a thing.
+
+#### The _next_ object
+
+The `next` object represents the next interceptor in the chain of interceptors. 
+The final `next` in the chain is the `HttpClient` backend handler that sends the request to the server and receives the server's response.
+
+
+Most interceptors call `next.handle()` so that the request flows through to the next interceptor and, eventually, the backend handler.
+An interceptor _could_ skip calling `next.handle()`, short-circuit the chain, and [return its own `Observable`](#caching) with an artificial server response. 
+
+This is a common middleware pattern found in frameworks such as Express.js.
+
+#### Provide the interceptor
+
+The `NoopInterceptor` is a service managed by Angular's [dependency injection (DI)](guide/dependency-injection) system. 
+Like other services, you must provide the interceptor class before the app can use it.
+
+Because interceptors are (optional) dependencies of the `HttpClient` service, 
+you must provide them in the same injector (or a parent of the injector) that provides `HttpClient`. 
+Interceptors provided _after_ DI creates the `HttpClient` are ignored.
+
+This app provides `HttpClient` in the app's root injector, as a side-effect of importing the `HttpClientModule` in `AppModule`.
+You should provide interceptors in `AppModule` as well.
+
+After importing the `HTTP_INTERCEPTORS` injection token from `@angular/common/http`,
+write the `NoopInterceptor` provider like this:
+
+<code-example 
+  path="http/src/app/http-interceptors/index.ts"
+  region="noop-provider" linenums="false">
+</code-example>
+
+Note the `multi: true` option. 
+This required setting tells Angular that `HTTP_INTERCEPTORS` is a token for a _multiprovider_ 
+that injects an array of values, rather than a single value.
+
+You _could_ add this provider directly to the providers array of the `AppModule`.
+However, it's rather verbose and there's a good chance that 
+you'll create more interceptors and provide them in the same way.
+You must also pay [close attention to the order](#interceptor-order) 
+in which you provide these interceptors.
+
+Consider creating a "barrel" file that gathers all the interceptor providers into an `httpInterceptorProviders` array, starting with this first one, the `NoopInterceptor`.
+
+<code-example 
+  path="http/src/app/http-interceptors/index.ts"
+  region="interceptor-providers"
+  title="app/http-interceptors/index.ts" linenums="false">
+</code-example>
+
+Then import and add it to the `AppModule` _providers array_ like this:
+
+<code-example 
+  path="http/src/app/app.module.ts"
+  region="interceptor-providers"
+  title="app/app.module.ts (interceptor providers)" linenums="false">
+</code-example>
+
+As you create new interceptors, add them to the `httpInterceptorProviders` array and
+you won't have to revisit the `AppModule`.
+
+<div class="alert is-helpful">
+
+There are many more interceptors in the complete sample code.
+
+</div>
+
+#### Interceptor order
+
+Angular applies interceptors in the order that you provide them.
+If you provide interceptors _A_, then _B_, then _C_,  requests will flow in _A->B->C_ and
+responses will flow out _C->B->A_.
+
+You cannot change the order or remove interceptors later.
+If you need to enable and disable an interceptor dynamically, you'll have to build that capability into the interceptor itself.
+
+#### _HttpEvents_
+
+You may have expected the `intercept()` and `handle()` methods to return observables of `HttpResponse<any>` as most `HttpClient` methods do.
+
+Instead they return observables of `HttpEvent<any>`.
+
+That's because interceptors work at a lower level than those `HttpClient` methods. A single HTTP request can generate multiple _events_, including upload and download progress events. The `HttpResponse` class itself is actually an event, whose type is `HttpEventType.HttpResponseEvent`.
+
+Many interceptors are only concerned with the outgoing request and simply return the event stream from `next.handle()` without modifying it.
+
+But interceptors that examine and modify the response from `next.handle()` 
+will see all of these events. 
+Your interceptor should return _every event untouched_ unless it has a _compelling reason to do otherwise_.
+
+#### Immutability
+
+Although interceptors are capable of mutating requests and responses,
+the `HttpRequest` and `HttpResponse` instance properties are `readonly`,
+rendering them largely immutable.
+
+They are immutable for a good reason: the app may retry a request several times before it succeeds, which means that the interceptor chain may re-process the same request multiple times.
+If an interceptor could modify the original request object, the re-tried operation would start from the modified request rather than the original. Immutability ensures that interceptors see the same request for each try.
+
+TypeScript will prevent you from setting `HttpRequest` readonly properties. 
+
+```javascript
+  // Typescript disallows the following assignment because req.url is readonly
+  req.url = req.url.replace('http://', 'https://');
+```
+To alter the request, clone it first and modify the clone before passing it to `next.handle()`. 
+You can clone and modify the request in a single step as in this example.
+
+<code-example 
+  path="http/src/app/http-interceptors/ensure-https-interceptor.ts"
+  region="excerpt" 
+  title="app/http-interceptors/ensure-https-interceptor.ts (excerpt)" linenums="false">
+</code-example>
+
+The `clone()` method's hash argument allows you to mutate specific properties of the request while copying the others.
+
+##### The request body
+
+The `readonly` assignment guard can't prevent deep updates and, in particular, 
+it can't prevent you from modifying a property of a request body object.
+
+```javascript
+  req.body.name = req.body.name.trim(); // bad idea!
+```
+
+If you must mutate the request body, copy it first, change the copy, 
+`clone()` the request, and set the clone's body with the new body, as in the following example.
+
+<code-example 
+  path="http/src/app/http-interceptors/trim-name-interceptor.ts"
+  region="excerpt" 
+  title="app/http-interceptors/trim-name-interceptor.ts (excerpt)" linenums="false">
+</code-example>
+
+##### Clearing the request body
+
+Sometimes you need to clear the request body rather than replace it.
+If you set the cloned request body to `undefined`, Angular assumes you intend to leave the body as is.
+That is not what you want.
+If you set the cloned request body to `null`, Angular knows you intend to clear the request body.
+
+```javascript
+  newReq = req.clone({ ... }); // body not mentioned => preserve original body
+  newReq = req.clone({ body: undefined }); // preserve original body
+  newReq = req.clone({ body: null }); // clear the body
+```
+
+#### Set default headers
+
+Apps often use an interceptor to set default headers on outgoing requests. 
+
+The sample app has an `AuthService` that produces an authorization token.
+Here is its `AuthInterceptor` that injects that service to get the token and
+adds an authorization header with that token to every outgoing request:
+
+<code-example 
+  path="http/src/app/http-interceptors/auth-interceptor.ts"
+  title="app/http-interceptors/auth-interceptor.ts">
+</code-example>
+
+The practice of cloning a request to set new headers is so common that 
+there's a `setHeaders` shortcut for it:
+
+<code-example 
+  path="http/src/app/http-interceptors/auth-interceptor.ts"
+  region="set-header-shortcut">
+</code-example>
+
+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 time and log 
+an entire HTTP operation. 
+
+Consider the following `LoggingInterceptor`, which captures the time of the request,
+the time of the response, and logs the outcome with the elapsed time
+with the injected `MessageService`.
+
+<code-example 
+  path="http/src/app/http-interceptors/logging-interceptor.ts"
+  region="excerpt" 
+  title="app/http-interceptors/logging-interceptor.ts)">
+</code-example>
+
+The RxJS `tap` operator captures whether the request succeed or failed.
+The RxJS `finalize` operator is called when the response observable either errors or completes (which it must),
+and reports the outcome to the `MessageService`.
+
+Neither `tap` nor `finalize` touch the values of the observable stream returned to the caller.
+
+#### Caching
+
+Interceptors can handle requests by themselves, without forwarding to `next.handle()`.
+
+For example, you might decide to cache certain requests and responses to improve performance.
+You can delegate caching to an interceptor without disturbing your existing data services. 
+
+The `CachingInterceptor` demonstrates this approach.
+
+<code-example 
+  path="http/src/app/http-interceptors/caching-interceptor.ts"
+  region="v1" 
+  title="app/http-interceptors/caching-interceptor.ts)" linenums="false">
+</code-example>
+
+The `isCachable()` function determines if the request is cachable.
+In this sample, only GET requests to the npm package search api are cachable.
+
+If the request is not cachable, the interceptor simply forwards the request 
+to the next handler in the chain.
+
+If a cachable request is found in the cache, the interceptor returns an `of()` _observable_ with
+the cached response, by-passing the `next` handler (and all other interceptors downstream).
+
+If a cachable request is not in cache, the code calls `sendRequest`.
+
+{@a send-request}
+<code-example 
+  path="http/src/app/http-interceptors/caching-interceptor.ts"
+  region="send-request">
+</code-example>
+
+The `sendRequest` function creates a [request clone](#immutability) without headers
+because the npm api forbids them.
+
+It forwards that request to `next.handle()` which ultimately calls the server and
+returns the server's response.
+
+Note how `sendRequest` _intercepts the response_ on its way back to the application.
+It _pipes_ the response through the `tap()` operator,
+whose callback adds the response to the cache.
+
+The original response continues untouched back up through the chain of interceptors
+to the application caller. 
+
+Data services, such as `PackageSearchService`, are unaware that 
+some of their `HttpClient` requests actually return cached responses.
+
+{@a cache-refresh}
+#### Return a multi-valued _Observable_
+
+The `HttpClient.get()` method normally returns an _observable_ 
+that either emits the data or an error. 
+Some folks describe it as a "_one and done_" observable.
+
+But an interceptor can change this to an _observable_ that emits more than once.
+
+A revised version of the `CachingInterceptor` optionally returns an _observable_ that
+immediately emits the cached response, sends the request to the NPM web API anyway,
+and emits again later with the updated search results.
+
+<code-example 
+  path="http/src/app/http-interceptors/caching-interceptor.ts"
+  region="intercept-refresh">
+</code-example>
+
+The _cache-then-refresh_ option is triggered by the presence of a **custom `x-refresh` header**.
+
+<div class="alert is-helpful">
+
+A checkbox on the `PackageSearchComponent` toggles a `withRefresh` flag,
+which is one of the arguments to `PackageSearchService.search()`.
+That `search()` method creates the custom `x-refresh` header
+and adds it to the request before calling `HttpClient.get()`.
+
+</div>
+
+The revised `CachingInterceptor` sets up a server request 
+whether there's a cached value or not, 
+using the same `sendRequest()` method described [above](#send-request).
+The `results$` observable will make the request when subscribed.
+
+If there's no cached value, the interceptor returns `results$`.
+
+If there is a cached value, the code _pipes_ the cached response onto
+`results$`, producing a recomposed observable that emits twice,
+the cached response first (and immediately), followed later
+by the response from the server.
+Subscribers see a sequence of _two_ responses.
+
+### Listening to progress events
+
+Sometimes applications transfer large amounts of data and those transfers can take a long time.
+File uploads are a typical example. 
+Give the users a better experience by providing feedback on the progress of such transfers.
+
+To make a request with progress events enabled, you can create an instance of `HttpRequest` 
+with the `reportProgress` option set true to enable tracking of progress events.
+
+<code-example 
+  path="http/src/app/uploader/uploader.service.ts"
+  region="upload-request" 
+  title="app/uploader/uploader.service.ts (upload request)">
+</code-example>
+
+<div class="alert is-important">
+
+Every progress event triggers change detection, so only turn them on if you truly intend to report progress in the UI.
+
+</div>
+
+Next, pass this request object to the `HttpClient.request()` method, which
+returns an `Observable` of `HttpEvents`, the same events processed by interceptors:
+
+<code-example 
+  path="http/src/app/uploader/uploader.service.ts"
+  region="upload-body" 
+  title="app/uploader/uploader.service.ts (upload body)" linenums="false">
+</code-example>
+
+The `getEventMessage` method interprets each type of `HttpEvent` in the event stream.
+
+<code-example 
+  path="http/src/app/uploader/uploader.service.ts"
+  region="getEventMessage" 
+  title="app/uploader/uploader.service.ts (getEventMessage)" linenums="false">
+</code-example>
+
+<div class="alert is-helpful">
+
+The sample app for this guide doesn't have a server that accepts uploaded files.
+The `UploadInterceptor` in `app/http-interceptors/upload-interceptor.ts` 
+intercepts and short-circuits upload requests
+by returning an observable of simulated events.
+
+</div>
+
+## 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` supports 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.withOptions()` to override the defaults.
+
+<code-example 
+  path="http/src/app/app.module.ts"
+  region="xsrf" 
+  linenums="false">
+</code-example>
+
+## Testing HTTP requests
+
+Like any external dependency, the HTTP backend needs to be mocked
+so your tests can simulate interaction with a remote server. 
+The `@angular/common/http/testing` library makes 
+setting up such mocking straightforward.
+
+### Mocking philosophy
+
+Angular's HTTP testing library is designed for a pattern of testing wherein 
+the the app executes code and makes requests first.
+
+Then a test expects that certain requests have or have not been made, 
+performs assertions against those requests, 
+and finally provide responses by "flushing" each expected request.
+ 
+At the end, tests may verify that the app has made no unexpected requests.
+
+<div class="alert is-helpful">
+
+You can run <live-example stackblitz="specs">these sample tests</live-example> 
+in a live coding environment.
+
+The tests described in this guide are in `src/testing/http-client.spec.ts`.
+There are also tests of an application data service that call `HttpClient` in
+`src/app/heroes/heroes.service.spec.ts`.
+
+</div>
+
+### Setup
+
+To begin testing calls to `HttpClient`, 
+import the `HttpClientTestingModule` and the mocking controller, `HttpTestingController`,
+along with the other symbols your tests require.
+
+<code-example 
+  path="http/src/testing/http-client.spec.ts"
+  region="imports" 
+  title="app/testing/http-client.spec.ts (imports)" linenums="false">
+</code-example>
+
+Then add the `HttpClientTestingModule` to the `TestBed` and continue with
+the setup of the _service-under-test_.
+
+<code-example 
+  path="http/src/testing/http-client.spec.ts"
+  region="setup" 
+  title="app/testing/http-client.spec.ts(setup)" linenums="false">
+</code-example>
+
+Now requests made in the course of your tests will hit the testing backend instead of the normal backend.
+
+This setup also calls `TestBed.get()` to inject the `HttpClient` service and the mocking controller
+so they can be referenced during the tests.
+
+### Expecting and answering requests
+
+Now you can write a test that expects a GET Request to occur and provides a mock response. 
+
+<code-example 
+  path="http/src/testing/http-client.spec.ts"
+  region="get-test" 
+  title="app/testing/http-client.spec.ts(httpClient.get)" linenums="false">
+</code-example>
+
+The last step, verifying that no requests remain outstanding, is common enough for you to move it into an `afterEach()` step:
+
+<code-example 
+  path="http/src/testing/http-client.spec.ts"
+  region="afterEach" 
+  linenums="false">
+</code-example>
+
+#### 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:
+
+<code-example 
+  path="http/src/testing/http-client.spec.ts"
+  region="predicate" 
+  linenums="false">
+</code-example>
+
+As with the previous `expectOne()`, 
+the test will fail if 0 or 2+ requests satisfy this predicate.
+
+#### Handling more than one request
+
+If you need to respond to duplicate requests in your test, use the `match()` API instead of `expectOne()`.
+It takes the same arguments but returns an array of matching requests. 
+Once returned, these requests are removed from future matching and 
+you are responsible for flushing and verifying them.
+
+<code-example 
+  path="http/src/testing/http-client.spec.ts"
+  region="multi-request" 
+  linenums="false">
+</code-example>
+
+### Testing for errors
+
+You should test the app's defenses against HTTP requests that fail.
+
+Call `request.flush()` with an error message, as seen in the following example.
+
+<code-example 
+  path="http/src/testing/http-client.spec.ts"
+  region="404"
+  linenums="false">
+</code-example>
+
+Alternatively, you can call `request.error()` with an `ErrorEvent`.
+
+<code-example
+  path="http/src/testing/http-client.spec.ts"
+  region="network-error"
+  linenums="false">
+</code-example>
diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md
new file mode 100644
index 000000000000..2009e09cb2c4
--- /dev/null
+++ b/aio/content/guide/i18n.md
@@ -0,0 +1,814 @@
+# Internationalization (i18n)
+
+Application internationalization is a many-faceted area of development, focused on making
+applications available and user-friendly to a worldwide audience. This page describes Angular's
+internationalization (i18n) tools, which can help you make your app available in multiple languages.
+
+See the <live-example downloadOnly name="i18n">i18n Example</live-example> for a simple example of
+an AOT-compiled app, translated into French.
+
+{@a angular-i18n}
+## Angular and i18n
+
+Angular simplifies the following aspects of internationalization:
+* Displaying dates, number, percentages, and currencies in a local format.
+* Translating text in component templates.
+* Handling plural forms of words.
+* Handling alternative text.
+
+This document focuses on [**Angular CLI**](https://cli.angular.io/) projects, in which the Angular
+CLI generates most of the boilerplate necessary to write your app in multiple languages.
+
+{@a setting-up-locale}
+## Setting up the locale of your app
+
+A locale is an identifier (id) that refers to a set of user preferences that tend to be shared
+within a region of the world, such as country. This document refers to a locale identifier as a
+"locale" or "locale id".
+
+A Unicode locale identifier is composed of a Unicode language identifier and (optionally) the
+character `-` followed by a locale extension. (For historical reasons the character `_` is supported
+as an alternative to `-`.)  For example, in the locale id `fr-CA` the `fr` refers to the French
+language identifier, and the `CA` refers to the locale extension Canada.
+
+<div class="alert is-critical">
+
+Angular follows the Unicode LDML convention that uses stable identifiers (Unicode locale identifiers)
+based on the norm [BCP47](http://www.rfc-editor.org/rfc/bcp/bcp47.txt). It is very important that
+you follow this convention when you define your locale, because the Angular i18n tools use this
+locale id to find the correct corresponding locale data.
+
+</div>
+
+By default, Angular uses the locale `en-US`, which is English as spoken in the United States of America.
+
+To set your app's locale to another value, use the CLI parameter `--configuration` with the value of the locale id that you want to use:
+
+<code-example language="sh" class="code-shell">
+  ng serve --configuration=fr
+</code-example>
+
+If you use JIT, you also need to define the `LOCALE_ID` provider in your main module:
+
+<code-example path="i18n/doc-files/app.module.ts" title="src/app/app.module.ts" linenums="false">
+</code-example>
+
+
+For more information about Unicode locale identifiers, see the
+[CLDR core spec](http://cldr.unicode.org/core-spec#Unicode_Language_and_Locale_Identifiers).
+
+For a complete list of locales supported by Angular, see
+[the Angular repository](https://github.com/angular/angular/tree/master/packages/common/locales).
+
+The locale identifiers used by CLDR and Angular are based on [BCP47](http://www.rfc-editor.org/rfc/bcp/bcp47.txt).
+These specifications change over time; the following table maps previous identifiers to current ones at
+time of writing:
+
+| Locale name                   | Old locale id     | New locale id |
+|-------------------------------|-------------------|---------------|
+| Indonesian                    | in                | id            |
+| Hebrew                        | iw                | he            |
+| Romanian Moldova              | mo                | ro-MD         |
+| Norwegian Bokmål              | no, no-NO         | nb            |
+| Serbian Latin                 | sh                | sr-Latn       |
+| Filipino                      | tl                | fil           |
+| Portuguese Brazil             | pt-BR             | pt            |
+| Chinese Simplified            | zh-cn, zh-Hans-CN | zh-Hans       |
+| Chinese Traditional           | zh-tw, zh-Hant-TW | zh-Hant       |
+| Chinese Traditional Hong Kong | zh-hk             | zh-Hant-HK    |
+
+
+## i18n pipes
+
+Angular pipes can help you with internationalization: the `DatePipe`, `CurrencyPipe`, `DecimalPipe`
+and `PercentPipe` use locale data to format data based on the `LOCALE_ID`.
+
+By default, Angular only contains locale data for `en-US`. If you set the value of
+`LOCALE_ID` to another locale, you must import locale data for that new locale.
+The CLI imports the locale data for you when you use the parameter `--configuration` with `ng serve` and
+`ng build`.
+
+If you want to import locale data for other languages, you can do it manually:
+
+<code-example path="i18n/doc-files/app.locale_data.ts" region="import-locale" title="src/app/app.module.ts" linenums="false">
+</code-example>
+
+The first parameter is an object containing the locale data imported from `@angular/common/locales`.
+By default, the imported locale data is registered with the locale id that is defined in the Angular
+locale data itself.
+If you want to register the imported locale data with another locale id, use the second parameter to
+specify a custom locale id. For example, Angular's locale data defines the locale id for French as
+"fr". You can use the second parameter to associate the imported French locale data with the custom
+locale id "fr-FR" instead of "fr".
+
+The files in `@angular/common/locales` contain most of the locale data that you
+need, but some advanced formatting options might only be available in the extra dataset that you can
+import from `@angular/common/locales/extra`. An error message informs you when this is the case.
+
+  <code-example path="i18n/doc-files/app.locale_data_extra.ts" region="import-locale-extra" title="src/app/app.module.ts" linenums="false">
+  </code-example>
+
+<div class="alert is-helpful">
+
+  All locale data used by Angular are extracted from the Unicode Consortium's
+  <a href="http://cldr.unicode.org/" title="CLDR">Common Locale Data Repository (CLDR)</a>.
+
+</div>
+
+
+## Template translations
+
+<div class="alert is-helpful">
+
+  This document refers to a unit of translatable text as "text," a "message", or a
+  "text message."
+
+</div>
+
+The i18n template translation process has four phases:
+
+1. Mark static text messages in your component templates for translation.
+
+2. An Angular i18n tool extracts the marked text into an industry standard translation source file.
+
+3. A translator edits that file, translating the extracted text into the target language,
+and returns the file to you.
+
+4. The Angular compiler imports the completed translation files,
+replaces the original messages with translated text, and generates a new version of the app
+in the target language.
+
+You need to build and deploy a separate version of the app for each supported language.
+
+{@a i18n-attribute}
+### Mark text with the i18n attribute
+
+The Angular `i18n` attribute marks translatable content. Place it on every element tag whose fixed
+text is to be translated.
+
+In the example below, an `<h1>` tag displays a simple English language greeting, "Hello i18n!"
+
+<code-example path="i18n/doc-files/app.component.html" region="greeting" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+To mark the greeting for translation, add the `i18n` attribute to the `<h1>` tag.
+
+<code-example path="i18n/doc-files/app.component.html" region="i18n-attribute" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+
+<div class="alert is-helpful">
+
+  `i18n` is a custom attribute, recognized by Angular tools and compilers.
+  After translation, the compiler removes it. It is not an Angular directive.
+
+</div>
+
+
+{@a help-translator}
+### Help the translator with a description and meaning
+
+To translate a text message accurately, the translator may need additional information or context.
+
+You can add a description of the text message as the value of the `i18n` attribute, as shown in the
+example below:
+
+<code-example path="i18n/doc-files/app.component.html" region="i18n-attribute-desc" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+The translator may also need to know the meaning or intent of the text message within this particular
+app context.
+
+You add context by beginning the `i18n` attribute value with the _meaning_ and
+separating it from the _description_ with the `|` character: `<meaning>|<description>`
+
+<code-example path="i18n/doc-files/app.component.html" region="i18n-attribute-meaning" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+All occurrences of a text message that have the same meaning will have the same translation.
+A text message that is associated with different meanings can have different translations.
+
+The Angular extraction tool preserves both the meaning and the description in the translation
+source file to facilitate contextually-specific translations, but only the combination of meaning
+and text message are used to generate the specific id of a translation. If you have two
+similar text messages with different meanings, they are extracted separately. If you have two similar
+text messages with different descriptions (not different meanings), then they are extracted only once.
+
+
+{@a custom-id}
+### Set a custom id for persistence and maintenance
+
+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/doc-files/messages.fr.xlf.html" region="generated-id" linenums="false">
+</code-example>
+
+When you change the translatable text, the extractor tool generates a new id for that translation unit.
+You must then update the translation file with the new id.
+
+Alternatively, you can specify a custom id in the `i18n` attribute by using the prefix `@@`.
+The example below defines the custom id `introductionHeader`:
+
+<code-example path='i18n/doc-files/app.component.html' region='i18n-attribute-solo-id' title='app/app.component.html' linenums="false">
+</code-example>
+
+When you specify a custom id, the extractor tool and compiler generate a translation unit with that
+custom id.
+
+<code-example path="i18n/doc-files/messages.fr.xlf.html" region="custom-id" linenums="false">
+</code-example>
+
+The custom id is persistent. The extractor tool does not change it when the translatable text changes.
+Therefore, you do not need to update the translation. This approach makes maintenance easier.
+
+#### Use a custom id with a description
+
+You can use a custom id in combination with a description by including both in the value of the
+`i18n` attribute. In the example below, the `i18n` attribute value includes a description, followed
+by the custom `id`:
+
+<code-example path='i18n/doc-files/app.component.html' region='i18n-attribute-id' title='app/app.component.html' linenums="false">
+</code-example>
+
+You also can add a meaning, as shown in this example:
+
+<code-example path='i18n/doc-files/app.component.html' region='i18n-attribute-meaning-and-id' title='app/app.component.html' linenums="false">
+</code-example>
+
+#### Define unique custom ids
+
+Be sure to define custom ids that are unique. If you use the same id for two different text messages,
+only the first one is extracted, and its translation is used in place of both original text messages.
+
+In the example below the custom id `myId` is used for two different messages:
+
+  ```html
+    <h3 i18n="@@myId">Hello</h3>
+    <!-- ... -->
+    <p i18n="@@myId">Good bye</p>
+  ```
+
+Consider this translation to French:
+
+  ```xml
+    <trans-unit id="myId" datatype="html">
+      <source>Hello</source>
+      <target state="new">Bonjour</target>
+    </trans-unit>
+  ```
+
+Because the custom id is the same, both of the elements in the resulting translation contain
+the same text, `Bonjour`:
+
+  ```html
+    <h3>Bonjour</h3>
+    <!-- ... -->
+    <p>Bonjour</p>
+  ```
+
+
+
+{@a no-element}
+### Translate text without creating an element
+
+If there is a section of text that you would like to translate, you can wrap it in a `<span>` tag.
+However, if you don't want to create a new DOM element merely to facilitate translation,
+you can wrap the text in an `<ng-container>` element.
+The `<ng-container>` is transformed into an html comment:
+
+<code-example path="i18n/src/app/app.component.html" region="i18n-ng-container" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+{@a translate-attributes}
+## Add i18n translation attributes
+
+You also can translate attributes.
+For example, assume that your template has an image with a `title` attribute:
+
+<code-example path="i18n/doc-files/app.component.html" region="i18n-title" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+This `title` attribute needs to be translated.
+
+To mark an attribute for translation, add an attribute in the form of `i18n-x`,
+where `x` is the name of the attribute to translate. The following example shows how to mark the
+`title` attribute for translation by adding the `i18n-title` attribute on the `img` tag:
+
+<code-example path="i18n/src/app/app.component.html" region="i18n-title-translate" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+This technique works for any attribute of any element.
+
+You also can assign a meaning, description, and id with the `i18n-x="<meaning>|<description>@@<id>"`
+syntax.
+
+{@a plural-ICU}
+## Translate singular and plural
+
+Different languages have different pluralization rules.
+
+Suppose that you want to say that something was "updated x minutes ago".
+In English, depending upon the number of minutes, you could display "just now", "one minute ago",
+or "x minutes ago" (with x being the actual number).
+Other languages might express the cardinality differently.
+
+The example below shows how to use a `plural` ICU expression to display one of those three options
+based on when the update occurred:
+
+<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 (`minutes`), which determines
+the number of minutes.
+* The second parameter identifies this as a `plural` translation type.
+* The third parameter defines a pluralization pattern consisting of pluralization categories and their matching values.
+
+
+<div class="alert is-helpful">
+
+  This syntax conforms to the
+  <a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format">ICU Message Format</a>
+  as specified in the
+  <a href="http://cldr.unicode.org/index/cldr-spec/plural-rules" title="Pluralization Rules">CLDR pluralization rules</a>.
+
+</div>
+
+Pluralization categories include (depending on the language):
+
+* =0 (or any other number)
+* zero
+* one
+* two
+* few
+* many
+* other
+
+After the pluralization category, put the default English text in braces (`{}`).
+
+In the example above, the three options are specified according to that pluralization pattern. For
+talking about about zero minutes, you use `=0 {just now}`. For one minute, you use `=1 {one minute}`.
+Any unmatched cardinality uses `other {{{minutes}} minutes ago}`. You could choose to add patterns
+for two, three, or any other number if the pluralization rules were different. For the example of
+"minute", only these three patterns are necessary in English.
+
+<div class="alert is-helpful">
+
+  You can use interpolations and html markup inside of your translations.
+
+</div>
+
+{@a select-ICU}
+## Select among alternative text messages
+
+If your template needs to display different text messages depending on the value of a variable, you
+need to translate all of those alternative text messages.
+
+You can handle this with a `select` ICU expression. It is similar to the `plural` ICU expressions
+except that you choose among alternative translations based on a string value instead of a number,
+and you define those string values.
+
+The following format message in the component template binds to the component's `gender` property,
+which outputs one of the following string values: "m", "f" or "o".
+The message maps those values to the appropriate translations:
+
+<code-example path="i18n/src/app/app.component.html" region="i18n-select" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+{@a nesting-ICUS}
+## Nesting plural and select ICU expressions
+
+You can also nest different ICU expressions together, as shown in this 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 _ng xi18n_
+
+Use the `ng xi18n` command provided by the CLI to extract the text messages marked with `i18n` into
+a translation source file.
+
+Open a terminal window at the root of the app project and enter the `ng xi18n` command:
+
+<code-example language="sh" class="code-shell">
+  ng xi18n
+</code-example>
+
+By default, the tool generates a translation file named `messages.xlf` in the
+<a href="https://en.wikipedia.org/wiki/XLIFF">XML Localization Interchange File Format
+(XLIFF, version 1.2)</a>.
+
+<div class="alert is-helpful">
+
+If you don't use the CLI, you have two options:
+* You can use the `ng-xi18n` tool directly from the `@angular/compiler-cli` package.
+For more information, see [i18n in the CLI documentation](https://github.com/angular/angular-cli/wiki/xi18n).
+* You can use the CLI Webpack plugin `AngularCompilerPlugin` from the `@ngtools/webpack` package.
+Set the parameters `i18nOutFile` and `i18nOutFormat` to trigger the extraction.
+For more information, see the [Angular Ahead-of-Time Webpack Plugin documentation](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack).
+
+</div>
+
+{@a other-formats}
+### Other translation formats
+
+Angular i18n tooling supports three translation formats:
+* XLIFF 1.2 (default)
+* XLIFF 2
+* <a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb" >XML Message
+Bundle (XMB)</a>
+
+You can specify the translation format explicitly with the `--i18nFormat` flag as illustrated in
+these example commands:
+
+<code-example language="sh" class="code-shell">
+ng xi18n  --i18n-format=xlf
+ng xi18n  --i18n-format=xlf2
+ng xi18n  --i18n-format=xmb
+</code-example>
+
+The sample in this guide uses the default XLIFF 1.2 format.
+
+<div class="alert is-helpful">
+
+  XLIFF files have the extension .xlf. The XMB format generates .xmb source files but uses
+  .xtb (XML Translation Bundle: XTB) translation files.
+
+</div>
+
+{@a ng-xi18n-options}
+### Other options
+
+You can specify the output path used by the CLI to extract your translation source file with
+the parameter `--output-path`:
+
+<code-example language="sh" class="code-shell">
+
+  ng xi18n --output-path locale
+
+</code-example>
+
+You can change the name of the translation source file that is generated by the extraction tool with
+the parameter `--outFile`:
+
+<code-example language="sh" class="code-shell">
+
+  ng xi18n --out-file source.xlf
+
+</code-example>
+
+You can specify the base locale of your app with the parameter `--i18n-locale`:
+
+<code-example language="sh" class="code-shell">
+
+  ng xi18n --i18n-locale fr
+
+</code-example>
+
+The extraction tool uses the locale to add the app locale information into your translation source
+file. This information is not used by Angular, but external translation tools may need it.
+
+
+{@a translate}
+## Translate text messages
+
+The `ng xi18n` command generates a translation source file named `messages.xlf` in the project `src`
+folder.
+
+The next step is to translate this source file into the specific language
+translation files. The example in this guide creates a French translation file.
+
+{@a localization-folder}
+### Create a localization folder
+
+Most apps are translated into more than one other language. For this reason, it is standard practice
+for the project structure to reflect the entire internationalization effort.
+
+One approach is to dedicate a folder to localization and store related assets, such as
+internationalization files, there.
+
+<div class="alert is-helpful">
+
+  Localization and internationalization are
+  <a href="https://en.wikipedia.org/wiki/Internationalization_and_localization">different but
+  closely related terms</a>.
+
+</div>
+
+This guide follows that approach. It has a `locale` folder under `src/`.
+Assets within that folder have a filename extension that matches their associated locale.
+
+### Create the translation files
+
+For each translation source file, there must be at least one language translation file for the
+resulting translation.
+
+For this example:
+
+1. Make a copy of the `messages.xlf` file.
+2. Put the copy in the `locale` folder.
+3. Rename the copy to `messages.fr.xlf` for the French language translation.
+
+If you were translating to other languages, you would repeat these steps for each target language.
+
+{@a translate-text-nodes}
+### Translate text nodes
+
+In a large translation project, you would send the `messages.fr.xlf` file to a French translator who
+would enter the translations using an XLIFF file editor.
+
+This sample file is easy to translate without a special editor or knowledge of French.
+
+1. Open `messages.fr.xlf` and find the first `<trans-unit>` section:
+
+> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-hello-before" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+> This XML element represents the translation of the `<h1>` greeting tag that you marked with the
+  `i18n` attribute earlier in this guide.
+
+> 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.
+
+
+2. Duplicate the `<source/>` tag, rename it `target`, and then replace its content with the French
+  greeting. If you were working with a more complex translation, you could use the the information
+  and context provided by the source, description, and meaning elements to guide your selection of
+  the appropriate French translation.
+
+> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-hello" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;, after translation)" linenums="false">
+</code-example>
+
+3. Translate the other text nodes the same way:
+
+> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-other-nodes" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+<div class="alert is-important">
+
+  **The Angular i18n tools generated the ids for these translation units. Don't change them.**
+  Each `id` depends upon the content of the template text and its assigned meaning.
+  If you change either the text or the meaning, then the `id` changes.
+  For more information, see the **[translation file maintenance discussion](#custom-id)**.
+
+</div>
+
+{@a translate-plural-select}
+## Translate plural and select expressions
+
+_Plural_ and _select_ ICU expressions are extracted separately, so they require special attention
+when preparing for translation.
+
+Look for these expressions 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="i18n/doc-files/messages.fr.xlf.html" region="translated-plural" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+You can add or remove plural cases, with each language having its own cardinality.  (See
+[CLDR plural rules](http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html).)
+
+{@a translate-select}
+### Translate _select_
+
+Below is the content of our example `select` ICU expression in the component template:
+
+<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 because ICU expressions are extracted
+separately.
+
+The first unit contains the text that was outside of the `select`.
+In place of the `select` is a placeholder, `<x id="ICU">`, that represents the `select` message.
+Translate the text and move around the placeholder if necessary, but don't remove it. If you remove
+the placeholder, the ICU expression will not be present in your translated app.
+
+<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-select-1" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+The second translation unit, immediately below the first one, contains the `select` message.
+Translate that as well.
+
+<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-select-2" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+Here they are together, after translation:
+
+<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-select" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+{@a translate-nested}
+### Translate a nested expression
+
+A nested expression is similar to the previous examples. As in the previous example, there are
+two translation units. The first one contains the text outside of the nested expression:
+
+<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested-1" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+The second unit contains the complete nested expression:
+
+<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested-2" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+And both together:
+
+<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+The entire template translation is complete. The next section describes how to load that translation
+into the app.
+
+{@a app-pre-translation}
+### The app and its translation file
+
+The sample app and its translation file are now as follows:
+
+<code-tabs>
+  <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="i18n/src/app/app.component.ts">
+  </code-pane>
+  <code-pane title="src/app/app.module.ts" path="i18n/src/app/app.module.ts">
+  </code-pane>
+  <code-pane title="src/main.ts" path="i18n/doc-files/main.1.ts">
+  </code-pane>
+  <code-pane title="src/locale/messages.fr.xlf" path="i18n/doc-files/messages.fr.xlf.html">
+  </code-pane>
+</code-tabs>
+
+{@a merge}
+## Merge the completed translation file into the app
+
+To merge the translated text into component templates, compile the app with the completed
+translation file. Provide the Angular compiler with three translation-specific pieces of information:
+
+  * The translation file.
+  * The translation file format.
+  * The locale (`fr` or `en-US` for instance).
+
+The compilation process is the same whether the translation file is in `.xlf` format or in another
+format that Angular understands, such as `.xtb`.
+
+How you provide this information depends upon whether you compile with
+the JIT compiler or the AOT compiler.
+
+  * With [AOT](guide/i18n#merge-aot), you pass the information as a configuration
+  * With [JIT](guide/i18n#merge-jit), you provide the information at bootstrap time.
+
+
+{@a merge-aot}
+### Merge with the AOT compiler
+
+The AOT (_Ahead-of-Time_) compiler is part of a build process that produces a small, fast,
+ready-to-run application package.
+
+When you internationalize with the AOT compiler, you must pre-build a separate application
+package for each language and serve the appropriate package based on either server-side language
+detection or url parameters.
+
+You also need to instruct the AOT compiler to use your translation configuration. To do so, you configure the translation with three options in your `angular.json` file.
+
+* `i18nFile`: the path to the translation file.
+* `i18nFormat`: the format of the translation file.
+* `i18nLocale`: the locale id.
+
+```
+"build": {
+  ...
+  "configurations": {
+    ...
+    "fr": {
+      "aot": true,
+      "outputPath": "dist/my-project-fr/",
+      "i18nFile": "src/locale/messages.fr.xlf",
+      "i18nFormat": "xlf",
+      "i18nLocale": "fr",
+      ...
+    }
+  }
+},
+"serve": {
+  ...
+  "configurations": {
+    ...
+    "fr": {
+      "browserTarget": "*project-name*:build:fr"
+    }
+  }
+}
+```
+
+You then pass the configuration with the `ng serve` or `ng build` commands.
+The example below shows how to serve the French language file created in previous
+sections of this guide:
+
+<code-example language="sh" class="code-shell">
+  ng serve --configuration=fr
+</code-example>
+
+For production builds, you define a separate `production-fr` build configuration in
+your `angular.json`.
+
+```
+"configurations": {
+  ...
+  "production-fr": {
+    "fileReplacements": [
+      {
+        "replace": "src/environments/environment.ts",
+        "with": "src/environments/environment.prod.ts"
+      }
+    ],
+    "optimization": true,
+    "outputHashing": "all",
+    "sourceMap": false,
+    "extractCss": true,
+    "namedChunks": false,
+    "aot": true,
+    "extractLicenses": true,
+    "vendorChunk": false,
+    "buildOptimizer": true,
+    "outputPath": "dist/my-project-fr/",
+    "i18nFile": "src/locale/messages.fr.xlf",
+    "i18nFormat": "xlf",
+    "i18nLocale": "fr",
+    "i18nMissingTranslation": "error"
+  },
+  ...
+}
+```
+
+The same configuration options can also be provided through the CLI with your existing `production` configuration.
+
+<code-example language="sh" class="code-shell">
+  ng build --prod --i18n-file src/locale/messages.fr.xlf --i18n-format xlf --i18n-locale fr
+</code-example>
+
+{@a merge-jit}
+### Merge with the JIT compiler
+
+The JIT compiler compiles the app in the browser as the app loads.
+Translation with the JIT compiler is a dynamic process of:
+
+1. Importing the appropriate language translation file as a string constant.
+2. Creating corresponding translation providers for the JIT compiler.
+3. Bootstrapping the app with those providers.
+
+Three providers tell the JIT compiler how to translate the template texts for a particular language
+while compiling the app:
+
+* `TRANSLATIONS` is a string containing the content of the translation file.
+* `TRANSLATIONS_FORMAT` is the format of the file: `xlf`, `xlf2`, or `xtb`.
+* `LOCALE_ID` is the locale of the target language.
+
+The Angular `bootstrapModule` method has a second `compilerOptions` parameter that can influence the
+behavior of the compiler. You can use it to provide the translation providers:
+
+<code-example path="i18n/doc-files/main.2.ts" title="src/main.ts">
+</code-example>
+
+Then provide the `LOCALE_ID` in the main module:
+
+<code-example path="i18n/doc-files/app.module.ts" title="src/app/app.module.ts" linenums="false">
+</code-example>
+
+
+{@a missing-translation}
+### Report missing translations
+By default, when a translation is missing, the build succeeds but generates a warning such as
+`Missing translation for message "foo"`. You can configure the level of warning that is generated by
+the Angular compiler:
+
+* Error: throw an error. If you are using AOT compilation, the build will fail. If you are using JIT
+compilation, the app will fail to load.
+* Warning (default): show a 'Missing translation' warning in the console or shell.
+* Ignore: do nothing.
+
+You specify the warning level in the `configurations` section your Angular CLI build configuration. The example below shows how to set the warning level to error:
+
+```
+"configurations": {
+  ...
+  "fr": {
+    ...
+    "i18nMissingTranslation": "error"
+  }
+}
+```
+
+If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding
+the 'MissingTranslationStrategy' property. The example below shows how to set the warning level to
+error:
+
+<code-example path="i18n/doc-files/main.3.ts" title="src/main.ts">
+</code-example>
diff --git a/aio/content/guide/language-service.md b/aio/content/guide/language-service.md
new file mode 100644
index 000000000000..3f805dc1d834
--- /dev/null
+++ b/aio/content/guide/language-service.md
@@ -0,0 +1,175 @@
+# 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 Angular.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": "^6.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/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md
new file mode 100644
index 000000000000..48265a9a2c5a
--- /dev/null
+++ b/aio/content/guide/lazy-loading-ngmodules.md
@@ -0,0 +1,228 @@
+# Lazy Loading Feature Modules
+
+#### Prerequisites
+A basic understanding of the following:
+* [Feature Modules](guide/feature-modules).
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
+* [Frequently Used Modules](guide/frequent-ngmodules).
+* [Types of Feature Modules](guide/module-types).
+* [Routing and Navigation](guide/router).
+
+For the final sample app with two lazy loaded modules that this page describes, see the
+<live-example></live-example>.
+
+<hr>
+
+## High level view
+
+There are three main steps to setting up a lazy loaded feature module:
+
+1. Create the feature module.
+1. Create the feature module’s routing module.
+1. Configure the routes.
+
+## Set up an app
+
+If you don’t already have an app, you can follow the steps below to
+create one with the CLI. If you do already have an app, skip to
+[Configure the routes](#config-routes). Enter the following command
+where `customer-app` is the name of your app:
+
+```sh
+ng new customer-app --routing
+```
+
+This creates an app called `customer-app` and the `--routing` flag
+generates a file called `app-routing.module.ts`, which is one of
+the files you need for setting up lazy loading for your feature module.
+Navigate into the project by issuing the command `cd customer-app`.
+
+## Create a feature module with routing
+
+Next, you’ll need a feature module to route to. To make one, enter
+the following command at the terminal window prompt where `customers` is the name of the module:
+
+```sh
+ng generate module customers --routing
+```
+
+This creates a customers folder with two files inside; `CustomersModule`
+and `CustomersRoutingModule`. `CustomersModule` will act as the gatekeeper
+for anything that concerns customers. `CustomersRoutingModule` will handle
+any customer-related routing. This keeps the app’s structure organized as
+the app grows and allows you to reuse this module while easily keeping its routing intact.
+
+The CLI imports the `CustomersRoutingModule` into the `CustomersModule` by
+adding a JavaScript import statement at the top of the file and adding
+`CustomersRoutingModule` to the `@NgModule` `imports` array.
+
+## Add a component to the feature module
+
+In order to see the module being lazy loaded in the browser, create a component to render some HTML when the app loads `CustomersModule`. At the command line, enter the following:
+
+```sh
+ng generate component customers/customer-list
+```
+
+This creates a folder inside of `customers` called `customer-list`
+with the four files that make up the component.
+
+<!-- For more information
+about components, see [Components](). -->
+
+Just like with the routing module, the CLI imports the
+`CustomerListComponent` into the `CustomersModule`.
+
+
+## Add another feature module
+
+For another place to route to, create a second feature module with routing:
+
+```sh
+ng generate module orders --routing
+```
+
+This makes a new folder called `orders` containing an `OrdersModule` and an `OrdersRoutingModule`.
+
+Now, just like with the `CustomersModule`, give it some content:
+
+```sh
+ng generate component orders/order-list
+```
+
+## Set up the UI
+
+Though you can type the URL into the address bar, a nav
+is easier for the user and more common. Replace the default
+placeholder markup in `app.component.html` with a custom nav
+so you can easily navigate to your modules in the browser:
+
+
+<code-example path="lazy-loading-ngmodules/src/app/app.component.html" region="app-component-template" title="src/app/app.component.html" linenums="false">
+
+</code-example>
+
+
+
+To see your app in the browser so far, enter the following command in the terminal window:
+
+```sh
+ng serve
+```
+
+Then go to `localhost:4200` where you should see “app works!” and three buttons.
+
+<figure>
+ <img src="generated/images/guide/lazy-loading-ngmodules/three-buttons.png" width="300" alt="three buttons in the browser">
+</figure>
+
+
+To make the buttons work, you need to configure the routing modules.
+
+{@a config-routes}
+
+## Configure the routes
+
+The two feature modules, `OrdersModule` and `CustomersModule`, have to be
+wired up to the `AppRoutingModule` so the router knows about them. The structure is as follows:
+
+<figure>
+ <img src="generated/images/guide/lazy-loading-ngmodules/lazy-load-relationship.jpg" width="400" alt="lazy loaded modules diagram">
+</figure>
+
+
+Each feature module acts as a doorway via the router. In the `AppRoutingModule`, you configure the routes to the feature modules, in this case `OrdersModule` and `CustomersModule`. This way, the router knows to go to the feature module. The feature module then connects the `AppRoutingModule` to the `CustomersRoutingModule` or the `OrdersRoutingModule`. Those routing modules tell the router where to go to load relevant components.
+
+### Routes at the app level
+
+In `AppRoutingModule`, update the `routes` array with the following:
+
+
+<code-example path="lazy-loading-ngmodules/src/app/app-routing.module.ts" region="const-routes" title="src/app/app-routing.module.ts" linenums="false">
+
+</code-example>
+
+
+The import statements stay the same. The first two paths are the routes to the `CustomersModule` and the `OrdersModule` respectively. Notice that the lazy loading syntax uses `loadChildren` followed by a string that is the path to the module, a hash mark or `#`, and the module’s class name.
+
+### Inside the feature module
+
+Next, take a look at `customers.module.ts`. If you’re using the CLI and following the steps outlined in this page, you don’t have to do anything here. The feature module is like a connector between the `AppRoutingModule` and the feature routing module. The `AppRoutingModule` imports the feature module, `CustomersModule`, and `CustomersModule` in turn imports the `CustomersRoutingModule`.
+
+
+<code-example path="lazy-loading-ngmodules/src/app/customers/customers.module.ts" region="customers-module" title="src/app/customers/customers.module.ts" linenums="false">
+
+</code-example>
+
+
+
+The `customers.module.ts` file imports the `CustomersRoutingModule` and `CustomerListComponent` so the `CustomersModule` class can have access to them. `CustomersRoutingModule` is then listed in the `@NgModule` `imports` array giving `CustomersModule` access to its own routing module, and `CustomerListComponent` is in the `declarations` array, which means `CustomerListComponent` belongs to the `CustomersModule`.
+
+
+### Configure the feature module’s routes
+
+The next step is in `customers-routing.module.ts`. First, import the component at the top of the file with the other JavaScript import statements. Then, add the route to `CustomerListComponent`.
+
+<code-example path="lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts" region="customers-routing-module" title="src/app/customers/customers-routing.module.ts" linenums="false">
+
+</code-example>
+
+
+Notice that the `path` is set to an empty string. This is because the path in `AppRoutingModule` is already set to `customers`, so this route in the `CustomersRoutingModule`, is already within the `customers` context. Every route in this routing module is a child route.
+
+Repeat this last step of importing the `OrdersListComponent` and configuring the Routes array for the `orders-routing.module.ts`:
+
+<code-example path="lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts" region="orders-routing-module-detail" title="src/app/orders/orders-routing.module.ts (excerpt)" linenums="false">
+
+</code-example>
+
+Now, if you view the app in the browser, the three buttons take you to each module.
+
+## Confirm it’s working
+
+You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing `Cmd+Option+i` on a Mac or `Ctrl+Alt+i` on a PC and go to the Network Tab.
+
+<figure>
+ <img src="generated/images/guide/lazy-loading-ngmodules/network-tab.png" width="600" alt="lazy loaded modules diagram">
+</figure>
+
+
+Click on the Orders or Customers button. If you see a chunk appear, you’ve wired everything up properly and the feature module is being lazy loaded. A chunk should appear for Orders and for Customers but will only appear once for each.
+
+
+<figure>
+ <img src="generated/images/guide/lazy-loading-ngmodules/chunk-arrow.png" width="600" alt="lazy loaded modules diagram">
+</figure>
+
+
+To see it again, or to test after working in the project, clear everything out by clicking the circle with a line through it in the upper left of the Network Tab:
+
+<figure>
+ <img src="generated/images/guide/lazy-loading-ngmodules/clear.gif" width="200" alt="lazy loaded modules diagram">
+</figure>
+
+
+Then reload with `Cmd+r` or `Ctrl+r`, depending on your platform.
+
+## `forRoot()` and `forChild()`
+
+You might have noticed that the CLI adds `RouterModule.forRoot(routes)` to the `app-routing.module.ts` `imports` array. This lets Angular know that this module,
+`AppRoutingModule`, is a routing module and `forRoot()` specifies that this is the root
+routing module. It configures all the
+routes you pass to it, gives you access to the router directives, and registers the `RouterService`.
+Use `forRoot()` in the `AppRoutingModule`&mdash;that is, one time in the app at the root level.
+
+The CLI also adds `RouterModule.forChild(routes)` to feature routing modules. This way, Angular
+knows that the route list is only responsible for providing additional routes and is intended for feature modules. You can use `forChild()` in multiple modules.
+
+`forRoot()` contains injector configuration which is global; such as configuring the Router. `forChild()` has no injector configuration, only directives such as `RouterOutlet` and `RouterLink`.
+
+
+<hr>
+
+## More on NgModules and routing
+
+You may also be interested in the following:
+* [Routing and Navigation](guide/router).
+* [Providers](guide/providers).
+* [Types of Feature Modules](guide/module-types).
diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md
new file mode 100644
index 000000000000..3556d1674ac9
--- /dev/null
+++ b/aio/content/guide/lifecycle-hooks.md
@@ -0,0 +1,617 @@
+# Lifecycle Hooks
+
+A component has a lifecycle managed by Angular.
+
+Angular creates it, renders it, creates and renders its children,
+checks it when its data-bound properties change, and destroys it before removing it from the DOM.
+
+Angular offers **lifecycle hooks**
+that provide visibility into these key life moments and the ability to act when they occur.
+
+A directive has the same set of lifecycle hooks.
+
+{@a hooks-overview}
+
+## Component lifecycle hooks overview
+
+Directive and component instances have a lifecycle
+as Angular creates, updates, and destroys them.
+Developers can tap into key moments in that lifecycle by implementing
+one or more of the *lifecycle hook* interfaces in the Angular `core` library.
+
+Each interface has a single hook method whose name is the interface name prefixed with `ng`.
+For example, the `OnInit` interface has a hook method named `ngOnInit()`
+that Angular calls shortly after creating the component:
+
+<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.
+Angular only calls a directive/component hook method *if it is defined*.
+
+{@a hooks-purpose-timing}
+
+## Lifecycle sequence
+
+*After* creating a component/directive by calling its constructor, Angular
+calls the lifecycle hook methods in the following sequence at specific moments:
+
+<table width="100%">
+  <col width="20%"></col>
+  <col width="80%"></col>
+  <tr>
+    <th>Hook</th>
+    <th>Purpose and Timing</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.
+
+      Called before `ngOnInit()` and whenever one or more data-bound input properties change.
+
+    </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.
+
+      Called _once_, after the _first_ `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.
+
+      Called during every change detection run, immediately after `ngOnChanges()` and `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 / the view that a directive is in.
+
+      Called _once_ after the first `ngDoCheck()`.
+
+    </td>
+  </tr>
+  <tr style='vertical-align:top'>
+    <td>
+      <code>ngAfterContentChecked()</code>
+    </td>
+    <td>
+
+      Respond after Angular checks the content projected into the directive/component.
+
+      Called after the `ngAfterContentInit()` and every subsequent `ngDoCheck()`.
+
+    </td>
+  </tr>
+  <tr style='vertical-align:top'>
+    <td>
+      <code>ngAfterViewInit()</code>
+    </td>
+    <td>
+
+      Respond after Angular initializes the component's views and child views / the view that a directive is in.
+
+      Called _once_ after the first `ngAfterContentChecked()`.
+
+    </td>
+  </tr>
+  <tr style='vertical-align:top'>
+    <td>
+      <code>ngAfterViewChecked()</code>
+    </td>
+    <td>
+
+      Respond after Angular checks the component's views and child views / the view that a directive is in.
+
+      Called after the `ngAfterViewInit` and every subsequent `ngAfterContentChecked()`.
+
+    </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.
+
+      Called _just before_ Angular destroys the directive/component.
+
+    </td>
+  </tr>
+</table>
+
+{@a interface-optional}
+
+## Interfaces are optional (technically)
+
+The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
+The JavaScript language doesn't have interfaces.
+Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
+
+Fortunately, they aren't necessary.
+You don't have to add the lifecycle hook interfaces to directives and components to benefit from the hooks themselves.
+
+Angular instead inspects directive and component classes and calls the hook methods *if they are defined*.
+Angular finds and calls methods like `ngOnInit()`, with or without the interfaces.
+
+Nonetheless, it's good practice to add interfaces to TypeScript directive classes
+in order to benefit from strong typing and editor tooling.
+
+{@a other-lifecycle-hooks}
+
+## Other Angular lifecycle hooks
+
+Other Angular sub-systems may have their own lifecycle hooks apart from these component hooks.
+
+3rd party libraries might implement their hooks as well in order to give developers more
+control over how these libraries are used.
+
+{@a the-sample}
+
+## Lifecycle examples
+
+The <live-example></live-example>
+demonstrates the lifecycle hooks in action through a series of exercises
+presented as components under the control of the root `AppComponent`.
+
+They follow a common pattern: a *parent* component serves as a test rig for
+a *child* component that illustrates one or more of the lifecycle hook methods.
+
+Here's a brief description of each exercise:
+
+<table width="100%">
+  <col width="20%"></col>
+  <col width="80%"></col>
+  <tr>
+    <th>Component</th>
+    <th>Description</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.
+
+      This example applies the `SpyDirective` to a `<div>` in an `ngFor` *hero* repeater
+      managed by the parent `SpyComponent`.
+
+    </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.
+
+    </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.
+
+    </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.
+
+    </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.
+
+    </td>
+  </tr>
+  <tr style='vertical-align:top'>
+    <td>
+      Counter
+    </td>
+    <td>
+
+      Demonstrates a combination of a component and a directive
+      each with its own hooks.
+
+      In this example, a `CounterComponent` logs a change (via `ngOnChanges`)
+      every time the parent component increments its input counter property.
+      Meanwhile, the `SpyDirective` from the previous example is applied
+      to the `CounterComponent` log where it watches log entries being created and destroyed.
+
+    </td>
+  </tr>
+</table>
+
+The remainder of this page discusses selected exercises in further detail.
+
+{@a peek-a-boo}
+
+## Peek-a-boo: all hooks
+
+The `PeekABooComponent` demonstrates all of the hooks in one component.
+
+You would rarely, if ever, implement all of the interfaces like this.
+The peek-a-boo exists to show how Angular calls the hooks in the expected order.
+
+This snapshot reflects the state of the log after the user clicked the *Create...* button and then the *Destroy...* button.
+
+<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`.
+
+<div class="alert is-helpful">
+
+  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.
+
+</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!
+
+The next examples focus on hook details.
+
+
+{@a spy}
+
+## Spying *OnInit* and *OnDestroy*
+
+Go undercover with these two spy hooks to discover when an element is initialized or destroyed.
+
+This is the perfect infiltration job for a directive.
+The heroes will never know they're being watched.
+
+<div class="alert is-helpful">
+
+  Kidding aside, pay attention to two key points:
+
+  1. Angular calls hook methods for *directives* as well as components.<br><br>
+
+  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.
+
+</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`.
+
+<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>`:
+
+<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:
+
+<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.
+
+The *Reset* button clears the `heroes` list.
+Angular removes all hero `<div>` elements from the DOM and destroys their spy directives at the same time.
+The spy's `ngOnDestroy()` method reports its last moments.
+
+The `ngOnInit()` and `ngOnDestroy()` methods have more vital roles to play in real applications.
+
+{@a oninit}
+
+### _OnInit()_
+
+Use `ngOnInit()` for two main reasons:
+
+1. To perform complex initializations shortly after construction.
+1. To set up the component after Angular sets the input properties.
+
+Experienced developers agree that components should be cheap and safe to construct.
+
+<div class="alert is-helpful">
+
+  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.
+
+</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.
+Constructors should do no more than set the initial local variables to simple values.
+
+An `ngOnInit()` is a good place for a component to fetch its initial data. The
+[Tour of Heroes Tutorial](tutorial/toh-pt4#oninit) guide shows how.
+
+
+Remember also that a directive's data-bound input properties are not set until _after construction_.
+That's a problem if you need to initialize the directive based on those properties.
+They'll have been set when `ngOnInit()` runs.
+
+<div class="alert is-helpful">
+
+  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.
+
+</div>
+
+You can count on Angular to call the `ngOnInit()` method _soon_ after creating the component.
+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.
+
+This is the time to notify another part of the application that the component is going away.
+
+This is the place to free resources that won't be garbage collected automatically.
+Unsubscribe from Observables and DOM events. Stop interval timers.
+Unregister all callbacks that this directive registered with global or application services.
+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).
+This example monitors the `OnChanges` hook.
+
+<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/SimpleChange) object holding the current and previous property values.
+This hook iterates over the changed properties and logs them.
+
+The example component, `OnChangesComponent`, has two input properties: `hero` and `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>
+
+The host `OnChangesParentComponent` binds to them like this:
+
+<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>
+  <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.
+
+Angular only calls the hook when the value of the input property changes.
+The value of the `hero` property is the *reference to the hero object*.
+Angular doesn't care that the hero's own `name` property changed.
+The hero object *reference* didn't change so, from Angular's perspective, there is no change to report!
+
+{@a docheck}
+
+## _DoCheck()_
+
+Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
+
+<div class="alert is-helpful">
+
+  Use this method to detect a change that Angular overlooked.
+
+</div>
+
+The *DoCheck* sample extends the *OnChanges* sample with the following `ngDoCheck()` hook:
+
+<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:
+
+<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.
+It's called over twenty times in this example before the user can do anything.
+
+Most of these initial checks are triggered by Angular's first rendering of *unrelated data elsewhere on the page*.
+Mere mousing into another `<input>` triggers a call.
+Relatively few calls reveal actual changes to pertinent data.
+Clearly our implementation must be very lightweight or the user experience suffers.
+
+{@a afterview}
+
+## AfterView
+
+The *AfterView* sample explores the `AfterViewInit()` and `AfterViewChecked()` hooks that Angular calls
+*after* it creates a component's child views.
+
+Here's a child view that displays a hero's name in an `<input>`:
+
+<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*:
+
+<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/ViewChild).
+
+
+<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.
+
+<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`?
+
+Angular's unidirectional data flow rule forbids updates to the view *after* it has been composed.
+Both of these hooks fire _after_ the component's view has been composed.
+
+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
+for one turn of the browser's JavaScript cycle and that's just long enough.
+
+Here's *AfterView* in action:
+
+<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.
+
+{@a aftercontent}
+
+## AfterContent
+
+The *AfterContent* sample explores the `AfterContentInit()` and `AfterContentChecked()` hooks that Angular calls
+*after* Angular projects external content into the component.
+
+{@a content-projection}
+
+### Content projection
+
+*Content projection* is a way to import HTML content from outside the component and insert that content
+into the component's template in a designated spot.
+
+<div class="alert is-helpful">
+
+  AngularJS developers know this technique as *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:
+
+<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 `<app-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
+into the component*.
+
+Now look at the component's template:
+
+<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.
+In this case, the projected content is the `<app-child>` from the parent.
+
+<figure>
+  <img src='generated/images/guide/lifecycle-hooks/projected-child-view.png' alt="Projected Content">
+</figure>
+
+<div class="alert is-helpful">
+
+  The telltale signs of *content projection* are twofold:
+
+  * HTML between component element tags.
+  * The presence of `<ng-content>` tags in the component's template.
+
+</div>
+
+{@a aftercontent-hooks}
+
+### AfterContent hooks
+
+*AfterContent* hooks are similar to the *AfterView* hooks.
+The key difference is in the child component.
+
+* The *AfterView* hooks concern `ViewChildren`, the child components whose element tags
+appear *within* the component's template.
+
+* The *AfterContent* hooks concern `ContentChildren`, the child components that Angular
+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/ContentChild).
+
+<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_
+
+This component's `doSomething()` method update's the component's data-bound `comment` property immediately.
+There's no [need to wait](guide/lifecycle-hooks#wait-a-tick).
+
+Recall that Angular calls both *AfterContent* hooks before calling either of the *AfterView* hooks.
+Angular completes composition of the projected content *before* finishing the composition of this component's view.
+There is a small window between the `AfterContent...` and `AfterView...` hooks to modify the host view.
diff --git a/aio/content/guide/module-types.md b/aio/content/guide/module-types.md
new file mode 100644
index 000000000000..1e768858a7d8
--- /dev/null
+++ b/aio/content/guide/module-types.md
@@ -0,0 +1,191 @@
+
+
+# Types of Feature Modules
+
+#### Prerequisites
+
+A basic understanding of the following concepts:
+* [Feature Modules](guide/feature-modules).
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
+* [Frequently Used Modules](guide/frequent-ngmodules).
+
+<hr>
+
+There are five general categories of feature modules which
+tend to fall into the following groups:
+
+* Domain feature modules.
+* Routed feature modules.
+* Routing modules.
+* Service feature modules.
+* Widget feature modules.
+
+While the following guidelines describe the use of each type and their
+typical characteristics, in real world apps, you may see hybrids.
+
+<table>
+
+ <tr>
+   <th style="vertical-align: top">
+     Feature Module
+   </th>
+
+   <th style="vertical-align: top">
+     Guidelines
+   </th>
+ </tr>
+
+ <tr>
+   <td>Domain</td>
+   <td>
+     Domain feature modules deliver a user experience dedicated to a particular application domain like editing a customer or placing an order.
+
+     They typically have a top component that acts as the feature root and private, supporting sub-components descend from it.
+
+     Domain feature modules consist mostly of declarations. Only the top component is exported.
+
+     Domain feature modules rarely have providers. When they do, the lifetime of the provided services should be the same as the lifetime of the module.
+
+     Domain feature modules are typically imported exactly once by a larger feature module.
+
+     They might be imported by the root `AppModule` of a small application that lacks routing.
+   </td>
+ </tr>
+ <tr>
+   <td>Routed</td>
+   <td>
+     Routed feature modules are domain feature modules whose top components are the targets of router navigation routes.
+
+     All lazy-loaded modules are routed feature modules by definition.
+
+     Routed feature modules don’t export anything because their components never appear in the template of an external component.
+
+     A lazy-loaded routed feature module should not be imported by any module. Doing so would trigger an eager load, defeating the purpose of lazy loading.That means you won’t see them mentioned among the `AppModule` imports. An eager loaded routed feature module must be imported by another module so that the compiler learns about its components.
+
+     Routed feature modules rarely have providers for reasons explained in [Lazy Loading Feature Modules](/guide/lazy-loading-ngmodules). When they do, the lifetime of the provided services should be the same as the lifetime of the module. Don't provide application-wide singleton services in a routed feature module or in a module that the routed module imports.
+   </td>
+ </tr>
+
+ <tr>
+   <td>Routing</td>
+   <td>
+
+     A routing module provides routing configuration for another module and separates routing concerns from its companion module.
+
+     A routing module typically does the following:
+
+     <ul>
+     <li>Defines routes.</li>
+     <li>Adds router configuration to the module's imports.</li>
+     <li>Adds guard and resolver service providers to the module's providers.</li>
+     <li>The name of the routing module should parallel the name of its companion module, using the suffix "Routing". For example, <code>FooModule</code> in <code>foo.module.ts</code> has a routing module named <code>FooRoutingModule</code> in <code>foo-routing.module.ts</code>. If the companion module is the root <code>AppModule</code>, the <code>AppRoutingModule</code> adds router configuration to its imports with <code>RouterModule.forRoot(routes)</code>. All other routing modules are children that import <code>RouterModule.forChild(routes)</code>.</li>
+     <li>A routing module re-exports the <code>RouterModule</code> as a convenience so that components of the companion module have access to router directives such as <code>RouterLink</code> and <code>RouterOutlet</code>.</li>
+     <li>A routing module does not have its own declarations. Components, directives, and pipes are the responsibility of the feature module, not the routing module.</li>
+     </ul>
+
+     A routing module should only be imported by its companion module.
+
+   </td>
+ </tr>
+
+ <tr>
+   <td>Service</td>
+   <td>
+
+     Service modules provide utility services such as data access and messaging. Ideally, they consist entirely of providers and have no declarations. Angular's `HttpClientModule` is a good example of a service module.
+
+     The root `AppModule` is the only module that should import service modules.
+
+   </td>
+ </tr>
+
+ <tr>
+   <td>Widget</td>
+   <td>
+
+     A widget module makes components, directives, and pipes available to external modules. Many third-party UI component libraries are widget modules.
+
+     A widget module should consist entirely of declarations, most of them exported.
+
+     A widget module should rarely have providers.
+
+     Import widget modules in any module whose component templates need the widgets.
+
+   </td>
+ </tr>
+
+</table>
+
+The following table summarizes the key characteristics of each feature module group.
+
+<table>
+ <tr>
+   <th style="vertical-align: top">
+     Feature Module
+   </th>
+
+   <th style="vertical-align: top">
+     Declarations
+   </th>
+
+   <th style="vertical-align: top">
+     Providers
+   </th>
+
+   <th style="vertical-align: top">
+     Exports
+   </th>
+
+   <th style="vertical-align: top">
+     Imported by
+   </th>
+ </tr>
+
+ <tr>
+   <td>Domain</td>
+   <td>Yes</td>
+   <td>Rare</td>
+   <td>Top component</td>
+   <td>Feature, AppModule</td>
+ </tr>
+
+ <tr>
+   <td>Routed</td>
+   <td>Yes</td>
+   <td>Rare</td>
+   <td>No</td>
+   <td>None</td>
+ </tr>
+
+ <tr>
+   <td>Routing</td>
+   <td>No</td>
+   <td>Yes (Guards)</td>
+   <td>RouterModule</td>
+   <td>Feature (for routing)</td>
+ </tr>
+
+ <tr>
+   <td>Service</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No</td>
+   <td>AppModule</td>
+ </tr>
+
+ <tr>
+   <td>Widget</td>
+   <td>Yes</td>
+   <td>Rare</td>
+   <td>Yes</td>
+   <td>Feature</td>
+ </tr>
+</table>
+
+<hr />
+
+## More on NgModules
+
+You may also be interested in the following:
+* [Lazy Loading Modules with the Angular Router](guide/lazy-loading-ngmodules).
+* [Providers](guide/providers).
diff --git a/aio/content/guide/ngmodule-api.md b/aio/content/guide/ngmodule-api.md
new file mode 100644
index 000000000000..5e113054453d
--- /dev/null
+++ b/aio/content/guide/ngmodule-api.md
@@ -0,0 +1,241 @@
+# NgModule API
+
+#### Prerequisites
+
+A basic understanding of the following concepts:
+* [Bootstrapping](guide/bootstrapping).
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
+
+<hr />
+
+## Purpose of `@NgModule`
+
+At a high level, NgModules are a way to organize Angular apps
+and they accomplish this through the metadata in the `@NgModule`
+decorator.
+The metadata falls into three categories:
+
+* **Static:** Compiler configuration which tells the compiler about directive selectors and where in templates the directives should be applied through selector matching. This is configured via the `declarations` array.
+* **Runtime:** Injector configuration via the `providers` array.
+* **Composability/Grouping:** Bringing NgModules together and making them available via the `imports` and `exports` arrays.
+
+```typescript
+@NgModule({
+  // Static, that is compiler configuration
+  declarations: [], // Configure the selectors
+  entryComponents: [], // Generate the host factory
+
+  // Runtime, or injector configuration
+  providers: [], // Runtime injector configuration
+
+  // Composability / Grouping
+  imports: [], // composing NgModules together
+  exports: [] // making NgModules available to other parts of the app
+})
+```
+
+## `@NgModule` metadata
+
+The following table summarizes the `@NgModule` metadata properties.
+
+<table>
+
+  <tr>
+
+    <th>
+      Property
+    </th>
+
+    <th>
+      Description
+    </th>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>declarations</code>
+    </td>
+
+    <td>
+
+      A list of [declarable](guide/ngmodule-faq#q-declarable) classes,
+      (*components*, *directives*, and *pipes*) that _belong to this module_.
+
+      <ol>
+        <li>When compiling a template, you need to determine a set of selectors which should be used for triggering their corresponding directives.</li>
+        <li>
+          The template is compiled within the context of an NgModule&mdash;the NgModule within which the template's component is declared&mdash;which determines the set of selectors using the following rules:
+          <ul>
+            <li>All selectors of directives listed in `declarations`.</li>
+            <li>All selectors of directives exported from imported NgModules.</li>
+          </ul>
+        </li>
+      </ol>
+
+      Components, directives, and pipes must belong to _exactly_ one module.
+      The compiler emits an error if you try to declare the same class in more than one module. Be careful not to re-declare a class that is imported
+      directly or indirectly from another module.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>providers</code>
+    </td>
+
+    <td>
+
+      A list of dependency-injection providers.
+
+      Angular registers these providers with the NgModule's injector.
+      If it is the NgModule used for bootstrapping then it is the root injector.
+
+      These services become available for injection into any component, directive, pipe or service which is a child of this injector.
+
+      A lazy-loaded module has its own injector which
+      is typically a child of the application root injector.
+
+      Lazy-loaded services are scoped to the lazy module's injector.
+      If a lazy-loaded module also provides the `UserService`,
+      any component created within that module's context (such as by router navigation)
+      gets the local instance of the service, not the instance in the root application injector.
+
+      Components in external modules continue to receive the instance provided by their injectors.
+
+      For more information on injector hierarchy and scoping, see [Providers](guide/providers) and the [DI Guide](guide/dependency-injection).
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>imports</code>
+    </td>
+
+    <td>
+
+      A list of modules which should be folded into this module. Folded means it is
+      as if all the imported NgModule's exported properties were declared here.
+
+      Specifically, it is as if the list of modules whose exported components, directives, or pipes
+      are referenced by the component templates were declared in this module.
+
+      A component template can [reference](guide/ngmodule-faq#q-template-reference) another component, directive, or pipe
+      when the reference is declared in this module or if the imported module has exported it.
+      For example, a component can use the `NgIf` and `NgFor` directives only if the
+      module has imported the Angular `CommonModule` (perhaps indirectly by importing `BrowserModule`).
+
+      You can import many standard directives from the `CommonModule`
+      but some familiar directives belong to other modules.
+      For example, you can use `[(ngModel)]` only
+      after importing the Angular `FormsModule`.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>exports</code>
+    </td>
+
+    <td>
+
+      A list of declarations&mdash;*component*, *directive*, and *pipe* classes&mdash;that
+      an importing module can use.
+
+      Exported declarations are the module's _public API_.
+      A component in another module can [use](guide/ngmodule-faq#q-template-reference) _this_
+      module's `UserComponent` if it imports this module and this module exports `UserComponent`.
+
+      Declarations are private by default.
+      If this module does _not_ export `UserComponent`, then only the components within _this_
+      module can use `UserComponent`.
+
+      Importing a module does _not_ automatically re-export the imported module's imports.
+      Module 'B' can't use `ngIf` just because it imported module 'A' which imported `CommonModule`.
+      Module 'B' must import `CommonModule` itself.
+
+      A module can list another module among its `exports`, in which case
+      all of that module's public components, directives, and pipes are exported.
+
+      [Re-export](guide/ngmodule-faq#q-reexport) makes module transitivity explicit.
+      If Module 'A' re-exports `CommonModule` and Module 'B' imports Module 'A',
+      Module 'B' components can use `ngIf` even though 'B' itself didn't import `CommonModule`.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>bootstrap</code>
+    </td>
+
+    <td>
+
+      A list of components that are automatically bootstrapped.
+
+      Usually there's only one component in this list, the _root component_ of the application.
+
+      Angular can launch with multiple bootstrap components,
+      each with its own location in the host web page.
+
+      A bootstrap component is automatically added to `entryComponents`.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>entryComponents</code>
+    </td>
+
+    <td>
+
+      A list of components that can be dynamically loaded into the view.
+
+      By default, an Angular app always has at least one entry component, the root component, `AppComponent`. Its purpose is to serve as a point of entry into the app, that is, you bootstrap it to launch the app.
+
+      Routed components are also _entry components_ because they need to be loaded dynamically.
+      The router creates them and drops them into the DOM near a `<router-outlet>`.
+
+      While the bootstrapped and routed components are _entry components_,
+      you don't have to add them to a module's `entryComponents` list,
+      as they are added implicitly.
+
+      Angular automatically adds components in the module's `bootstrap` and route definitions into the `entryComponents` list.
+
+      That leaves only components bootstrapped using one of the imperative techniques, such as [`ViewComponentRef.createComponent()`](https://angular.io/api/core/ViewContainerRef#createComponent) as undiscoverable.
+
+      Dynamic component loading is not common in most apps beyond the router. If you need to dynamically load components, you must add these components to the `entryComponents` list yourself.
+
+      For more information, see [Entry Components](guide/entry-components).
+
+    </td>
+
+  </tr>
+
+</table>
+
+
+<hr />
+
+## More on NgModules
+
+You may also be interested in the following:
+* [Feature Modules](guide/feature-modules).
+* [Entry Components](guide/entry-components).
+* [Providers](guide/providers).
+* [Types of Feature Modules](guide/module-types).
diff --git a/aio/content/guide/ngmodule-faq.md b/aio/content/guide/ngmodule-faq.md
new file mode 100644
index 000000000000..d3fdd2e6164c
--- /dev/null
+++ b/aio/content/guide/ngmodule-faq.md
@@ -0,0 +1,676 @@
+# NgModule FAQs
+
+
+#### Prerequisites:
+
+A basic understanding of the following concepts:
+* [NgModules](guide/ngmodules).
+
+<hr />
+
+NgModules help organize an application into cohesive blocks of functionality.
+
+This page answers the questions many developers ask about NgModule design and implementation.
+
+
+## What classes should I add to the `declarations` array?
+
+Add [declarable](guide/bootstrapping#the-declarations-array) classes&mdash;components, directives, and pipes&mdash;to a `declarations` list.
+
+Declare these classes in _exactly one_ module of the application.
+Declare them in a module if they belong to that particular module.
+
+<hr/>
+
+{@a q-declarable}
+
+## What is a _declarable_?
+
+Declarables are the class types&mdash;components, directives, and pipes&mdash;that
+you can add to a module's `declarations` list.
+They're the only classes that you can add to `declarations`.
+
+<hr/>
+
+## What classes should I _not_ add to `declarations`?
+
+Add only [declarable](guide/bootstrapping#the-declarations-array) classes to an NgModule's `declarations` list.
+
+Do *not* declare the following:
+
+* A class that's already declared in another module, whether an app module, @NgModule, or third-party module.
+* An array of directives imported from another module.
+For example, don't declare `FORMS_DIRECTIVES` from `@angular/forms` because the `FormsModule` already declares it.
+
+* Module classes.
+* Service classes.
+* Non-Angular classes and objects, such as
+strings, numbers, functions, entity models, configurations, business logic, and helper classes.
+
+<hr/>
+
+
+## Why list the same component in multiple `NgModule` properties?
+
+`AppComponent` is often listed in both `declarations` and `bootstrap`.
+You might see the same component listed in `declarations`, `exports`, and `entryComponents`.
+
+While that seems redundant, these properties have different functions.
+Membership in one list doesn't imply membership in another list.
+
+* `AppComponent` could be declared in this module but not bootstrapped.
+* `AppComponent` could be bootstrapped in this module but declared in a different feature module.
+* A component could be imported from another app module (so you can't declare it) and re-exported by this module.
+* A component could be exported for inclusion in an external component's template
+as well as dynamically loaded in a pop-up dialog.
+
+<hr/>
+
+## What does "Can't bind to 'x' since it isn't a known property of 'y'" mean?
+
+This error often means that you haven't declared the directive "x"
+or haven't imported the NgModule to which "x" belongs.
+
+<div class="alert is-helpful">
+
+Perhaps you declared "x" in an application sub-module but forgot to export it.
+The "x" class isn't visible to other modules until you add it to the `exports` list.
+
+</div>
+
+<hr/>
+
+## What should I import?
+
+Import NgModules whose public (exported) [declarable classes](guide/bootstrapping#the-declarations-array)
+you need to reference in this module's component templates.
+
+This always means importing `CommonModule` from `@angular/common` for access to
+the Angular directives such as `NgIf` and `NgFor`.
+You can import it directly or from another NgModule that [re-exports](guide/ngmodule-faq#q-reexport) it.
+
+Import `FormsModule` from `@angular/forms`
+if your components have `[(ngModel)]` two-way binding expressions.
+
+Import _shared_ and _feature_ modules when this module's components incorporate their
+components, directives, and pipes.
+
+Import only [BrowserModule](guide/ngmodule-faq#q-browser-vs-common-module) in the root `AppModule`.
+
+<hr/>
+
+{@a q-browser-vs-common-module}
+
+## Should I import `BrowserModule` or `CommonModule`?
+
+The root application module, `AppModule`, of almost every browser application
+should import `BrowserModule` from `@angular/platform-browser`.
+
+`BrowserModule` provides services that are essential to launch and run a browser app.
+
+`BrowserModule` also re-exports `CommonModule` from `@angular/common`,
+which means that components in the `AppModule` module also have access to
+the Angular directives every app needs, such as `NgIf` and `NgFor`.
+
+Do not import `BrowserModule` in any other module.
+*Feature modules* and *lazy-loaded modules* should import `CommonModule` instead.
+They need the common directives. They don't need to re-install the app-wide providers.
+
+Importing `CommonModule` also frees feature modules for use on _any_ target platform, not just browsers.
+
+<hr/>
+
+{@a q-reimport}
+
+## What if I import the same module twice?
+
+That's not a problem. When three modules all import Module 'A',
+Angular evaluates Module 'A' once, the first time it encounters it, and doesn't do so again.
+
+That's true at whatever level `A` appears in a hierarchy of imported NgModules.
+When Module 'B' imports Module 'A', Module 'C' imports 'B', and Module 'D' imports `[C, B, A]`,
+then 'D' triggers the evaluation of 'C', which triggers the evaluation of 'B', which evaluates 'A'.
+When Angular gets to the 'B' and 'A' in 'D', they're already cached and ready to go.
+
+Angular doesn't like NgModules with circular references, so don't let Module 'A' import Module 'B', which imports Module 'A'.
+
+<hr/>
+
+{@a q-reexport}
+
+## What should I export?
+
+Export [declarable](guide/bootstrapping#the-declarations-array) classes that components in _other_ NgModules
+are able to reference in their templates. These are your _public_ classes.
+If you don't export a declarable class, it stays _private_, visible only to other components
+declared in this NgModule.
+
+You _can_ export any declarable class&mdash;components, directives, and pipes&mdash;whether
+it's declared in this NgModule or in an imported NgModule.
+
+You _can_ re-export entire imported NgModules, which effectively re-exports all of their exported classes.
+An NgModule can even export a module that it doesn't import.
+
+<hr/>
+
+## What should I *not* export?
+
+Don't export the following:
+
+* Private components, directives, and pipes that you need only within components declared in this NgModule.
+If you don't want another NgModule to see it, don't export it.
+* Non-declarable objects such as services, functions, configurations, and entity models.
+* Components that are only loaded dynamically by the router or by bootstrapping.
+Such [entry components](guide/ngmodule-faq#q-entry-component-defined) can never be selected in another component's template.
+While there's no harm in exporting them, there's also no benefit.
+* Pure service modules that don't have public (exported) declarations.
+For example, there's no point in re-exporting `HttpClientModule` because it doesn't export anything.
+Its only purpose is to add http service providers to the application as a whole.
+
+<hr/>
+
+
+
+## Can I re-export classes and modules?
+
+Absolutely.
+
+NgModules are a great way to selectively aggregate classes from other NgModules and
+re-export them in a consolidated, convenience module.
+
+An NgModule can re-export entire NgModules, which effectively re-exports all of their exported classes.
+Angular's own `BrowserModule` exports a couple of NgModules like this:
+
+```typescript
+  exports: [CommonModule, ApplicationModule]
+```
+
+An NgModule can export a combination of its own declarations, selected imported classes, and imported NgModules.
+
+Don't bother re-exporting pure service modules.
+Pure service modules don't export [declarable](guide/bootstrapping#the-declarations-array) classes that another NgModule could use.
+For example, there's no point in re-exporting `HttpClientModule` because it doesn't export anything.
+Its only purpose is to add http service providers to the application as a whole.
+
+
+<hr/>
+
+
+## What is the `forRoot()` method?
+
+The `forRoot()` static method is a convention that makes it easy for developers to configure services and providers that are intended to be singletons. A good example of `forRoot()` is the `RouterModule.forRoot()` method.
+
+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/ModuleWithProviders).
+You add that result to the `imports` list of the root `AppModule`.
+
+Only call and import a `.forRoot()` result in the root application module, `AppModule`.
+Importing it in any other module, particularly in a lazy-loaded module,
+is contrary to the intent and will likely produce a runtime error.
+For more information, see [Singleton Services](guide/singleton-services).
+
+For a service, instead of using `forRoot()`,  specify `providedIn: 'root'` on the service's `@Injectable()` decorator, which 
+makes the service automatically available to the whole application and thus singleton by default.
+
+`RouterModule` also offers a `forChild` static method for configuring the routes of lazy-loaded modules.
+
+`forRoot()` and `forChild()` are conventional names for methods that
+configure services in root and feature modules respectively.
+
+Angular doesn't recognize these names but Angular developers do.
+Follow this convention when you write similar modules with configurable service providers.
+
+
+<hr/>
+
+
+## Why is a service provided in a feature module visible everywhere?
+
+Providers listed in the `@NgModule.providers` of a bootstrapped module have application scope.
+Adding a service provider to `@NgModule.providers` effectively publishes the service to the entire application.
+
+When you import an NgModule,
+Angular adds the module's service providers (the contents of its `providers` list)
+to the application root injector.
+
+This makes the provider visible to every class in the application that knows the provider's lookup token, or name.
+
+Extensibility through NgModule imports is a primary goal of the NgModule system.
+Merging NgModule providers into the application injector
+makes it easy for a module library to enrich the entire application with new services.
+By adding the `HttpClientModule` once, every application component can make HTTP requests.
+
+However, this might feel like an unwelcome surprise if you expect the module's services
+to be visible only to the components declared by that feature module.
+If the `HeroModule` provides the `HeroService` and the root `AppModule` imports `HeroModule`,
+any class that knows the `HeroService` _type_ can inject that service,
+not just the classes declared in the `HeroModule`.
+
+To limit access to a service, consider lazy loading the NgModule that provides that service. See [How do I restrict service scope to a module?](guide/ngmodule-faq#service-scope) for more information.
+
+<hr/>
+
+{@a q-lazy-loaded-module-provider-visibility}
+
+## Why is a service provided in a lazy-loaded module visible only to that module?
+
+Unlike providers of the modules loaded at launch,
+providers of lazy-loaded modules are *module-scoped*.
+
+When the Angular router lazy-loads a module, it creates a new execution context.
+That [context has its own injector](guide/ngmodule-faq#q-why-child-injector "Why Angular creates a child injector"),
+which is a direct child of the application injector.
+
+The router adds the lazy module's providers and the providers of its imported NgModules to this child injector.
+
+These providers are insulated from changes to application providers with the same lookup token.
+When the router creates a component within the lazy-loaded context,
+Angular prefers service instances created from these providers to the service instances of the application root injector.
+
+<hr/>
+
+
+## What if two modules provide the same service?
+
+When two imported modules, loaded at the same time, list a provider with the same token,
+the second module's provider "wins". That's because both providers are added to the same injector.
+
+When Angular looks to inject a service for that token,
+it creates and delivers the instance created by the second provider.
+
+_Every_ class that injects this service gets the instance created by the second provider.
+Even classes declared within the first module get the instance created by the second provider.
+
+If NgModule A provides a service for token 'X' and imports an NgModule B
+that also provides a service for token 'X', then NgModule A's service definition "wins".
+
+The service provided by the root `AppModule` takes precedence over services provided by imported NgModules.
+The `AppModule` always wins.
+
+<hr/>
+
+{@a service-scope}
+
+## How do I restrict service scope to a module?
+
+When a module is loaded at application launch,
+its `@NgModule.providers` have *application-wide scope*;
+that is, they are available for injection throughout the application.
+
+Imported providers are easily replaced by providers from another imported NgModule.
+Such replacement might be by design. It could be unintentional and have adverse consequences.
+
+As a general rule, import modules with providers _exactly once_, preferably in the application's _root module_.
+That's also usually the best place to configure, wrap, and override them.
+
+Suppose a module requires a customized `HttpBackend` that adds a special header for all Http requests.
+If another module elsewhere in the application also customizes `HttpBackend`
+or merely imports the `HttpClientModule`, it could override this module's `HttpBackend` provider,
+losing the special header. The server will reject http requests from this module.
+
+To avoid this problem, import the `HttpClientModule` only in the `AppModule`, the application _root module_.
+
+If you must guard against this kind of "provider corruption", *don't rely on a launch-time module's `providers`.*
+
+Load the module lazily if you can.
+Angular gives a [lazy-loaded module](guide/ngmodule-faq#q-lazy-loaded-module-provider-visibility) its own child injector.
+The module's providers are visible only within the component tree created with this injector.
+
+If you must load the module eagerly, when the application starts,
+*provide the service in a component instead.*
+
+Continuing with the same example, suppose the components of a module truly require a private, custom `HttpBackend`.
+
+Create a "top component" that acts as the root for all of the module's components.
+Add the custom `HttpBackend` provider to the top component's `providers` list rather than the module's `providers`.
+Recall that Angular creates a child injector for each component instance and populates the injector
+with the component's own providers.
+
+When a child of this component asks for the `HttpBackend` service,
+Angular provides the local `HttpBackend` service,
+not the version provided in the application root injector.
+Child components make proper HTTP requests no matter what other modules do to `HttpBackend`.
+
+Be sure to create module components as children of this module's top component.
+
+You can embed the child components in the top component's template.
+Alternatively, make the top component a routing host by giving it a `<router-outlet>`.
+Define child routes and let the router load module components into that outlet.
+
+Though you can limit access to a service by providing it in a lazy loaded module or providing it in a component, providing services in a component can lead to multiple instances of those services. Thus, the lazy loading is preferable.
+
+<hr/>
+
+{@a q-root-component-or-module}
+
+
+## Should I add application-wide providers to the root `AppModule` or the root `AppComponent`?
+
+ Define application-wide providers by specifying `providedIn: 'root'` on its `@Injectable()` decorator (in the case of services) or at `InjectionToken` construction (in the case where tokens are provided). Providers that are created this way automatically are made available to the entire application and don't need to be listed in any module.
+
+If a provider cannot be configured in this way (perhaps because it has no sensible default value), then register application-wide providers in the root `AppModule`, not in the `AppComponent`.
+
+Lazy-loaded modules and their components can inject `AppModule` services;
+they can't inject `AppComponent` services.
+
+Register a service in `AppComponent` providers _only_ if the service must be hidden
+from components outside the `AppComponent` tree. This is a rare use case.
+
+More generally, [prefer registering providers in NgModules](guide/ngmodule-faq#q-component-or-module) to registering in components.
+
+<h3 class="no-toc">Discussion</h3>
+
+Angular registers all startup module providers with the application root injector.
+The services that root injector providers create have application scope, which
+means they are available to the entire application.
+
+Certain services, such as the `Router`, only work when you register them in the application root injector.
+
+By contrast, Angular registers `AppComponent` providers with the `AppComponent`'s own injector.
+`AppComponent` services are available only to that component and its component tree.
+They have component scope.
+
+The `AppComponent`'s injector is a child of the root injector, one down in the injector hierarchy.
+For applications that don't use the router, that's almost the entire application.
+But in routed applications, routing operates at the root level
+where `AppComponent` services don't exist.
+This means that lazy-loaded modules can't reach them.
+
+<hr/>
+
+{@a q-component-or-module}
+
+## Should I add other providers to a module or a component?
+
+Providers should be configured using `@Injectable` syntax. If possible, they should be provided in the application root (`providedIn: 'root'`). Services that are configured this way are lazily loaded if they are only used from a lazily loaded context.
+
+If it's the consumer's decision whether a provider is available application-wide or not, 
+then register providers in modules (`@NgModule.providers`) instead of registering in components (`@Component.providers`).
+
+Register a provider with a component when you _must_ limit the scope of a service instance
+to that component and its component tree.
+Apply the same reasoning to registering a provider with a directive.
+
+For example, an editing component that needs a private copy of a caching service should register
+the service with the component.
+Then each new instance of the component gets its own cached service instance.
+The changes that editor makes in its service don't touch the instances elsewhere in the application.
+
+[Always register _application-wide_ services with the root `AppModule`](guide/ngmodule-faq#q-root-component-or-module),
+not the root `AppComponent`.
+
+<hr/>
+
+{@a q-why-bad}
+
+
+## Why is it bad if a shared module provides a service to a lazy-loaded module?
+
+### The eagerly loaded scenario
+When an eagerly loaded module provides a service, for example a `UserService`, that service is available application-wide. If the root module provides `UserService` and
+imports another module that provides the same `UserService`, Angular registers one of
+them in the root app injector (see [What if I import the same module twice?](guide/ngmodule-faq#q-reimport)).
+
+Then, when some component injects `UserService`, Angular finds it in the app root injector,
+and delivers the app-wide singleton service. No problem.
+
+### The lazy loaded scenario
+
+Now consider a lazy loaded module that also provides a service called `UserService`.
+
+When the router lazy loads a module, it creates a child injector and registers the `UserService`
+provider with that child injector. The child injector is _not_ the root injector.
+
+When Angular creates a lazy component for that module and injects `UserService`,
+it finds a `UserService` provider in the lazy module's _child injector_
+and creates a _new_ instance of the `UserService`.
+This is an entirely different `UserService` instance
+than the app-wide singleton version that Angular injected in one of the eagerly loaded components.
+
+This scenario causes your app to create a new instance every time, instead of using the singleton.
+<!--KW--What does this cause? I wasn't able to get the suggestion of this to work from
+the current FAQ:
+To demonstrate, run the <live-example name="ngmodule">live example</live-example>.
+Modify the `SharedModule` so that it provides the `UserService` rather than the `CoreModule`.
+Then toggle between the "Contact" and "Heroes" links a few times.
+The username goes bonkers as the Angular creates a new `UserService` instance each time.
+I'd like to see the error so I can include it.-->
+
+<hr/>
+
+{@a q-why-child-injector}
+
+## Why does lazy loading create a child injector?
+
+Angular adds `@NgModule.providers` to the application root injector, unless the NgModule is lazy-loaded.
+For a lazy-loaded NgModule, Angular creates a _child injector_ and adds the module's providers to the child injector.
+
+This means that an NgModule behaves differently depending on whether it's loaded during application start
+or lazy-loaded later. Neglecting that difference can lead to [adverse consequences](guide/ngmodule-faq#q-why-bad).
+
+Why doesn't Angular add lazy-loaded providers to the app root injector as it does for eagerly loaded NgModules?
+
+The answer is grounded in a fundamental characteristic of the Angular dependency-injection system.
+An injector can add providers _until it's first used_.
+Once an injector starts creating and delivering services, its provider list is frozen; no new providers are allowed.
+
+When an applications starts, Angular first configures the root injector with the providers of all eagerly loaded NgModules
+_before_ creating its first component and injecting any of the provided services.
+Once the application begins, the app root injector is closed to new providers.
+
+Time passes and application logic triggers lazy loading of an NgModule.
+Angular must add the lazy-loaded module's providers to an injector somewhere.
+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.
+
+<hr/>
+
+{@a q-is-it-loaded}
+
+## How can I tell if an NgModule or service was previously loaded?
+
+Some NgModules and their services should be loaded only once by the root `AppModule`.
+Importing the module a second time by lazy loading a module could [produce errant behavior](guide/ngmodule-faq#q-why-bad)
+that may be difficult to detect and diagnose.
+
+To prevent this issue, write a constructor that attempts to inject the module or service
+from the root app injector. If the injection succeeds, the class has been loaded a second time.
+You can throw an error or take other remedial action.
+
+Certain NgModules, such as `BrowserModule`, implement such a guard.
+Here is a custom constructor for an NgModule called `CoreModule`.
+
+<code-example path="ngmodule-faq/src/app/core/core.module.ts" region="ctor" title="src/app/core/core.module.ts (Constructor)" linenums="false">
+</code-example>
+
+<hr/>
+
+{@a q-entry-component-defined}
+
+## What is an `entry component`?
+
+An entry component is any component that Angular loads _imperatively_ by type.
+
+A component loaded _declaratively_ via its selector is _not_ an entry component.
+
+Angular loads a component declaratively when
+using the component's selector to locate the element in the template.
+Angular then creates the HTML representation of the component and inserts it into the DOM at the selected element. These aren't entry components.
+
+The bootstrapped root `AppComponent` is an _entry component_.
+True, its selector matches an element tag in `index.html`.
+But `index.html` isn't a component template and the `AppComponent`
+selector doesn't match an element in any component template.
+
+Components in route definitions are also _entry components_.
+A route definition refers to a component by its _type_.
+The router ignores a routed component's selector, if it even has one, and
+loads the component dynamically into a `RouterOutlet`.
+
+For more information, see [Entry Components](guide/entry-components).
+
+<hr/>
+
+## What's the difference between a _bootstrap_ component and an _entry component_?
+
+A bootstrapped component _is_ an [entry component](guide/ngmodule-faq#q-entry-component-defined)
+that Angular loads into the DOM during the bootstrap process (application launch).
+Other entry components are loaded dynamically by other means, such as with the router.
+
+The `@NgModule.bootstrap` property tells the compiler that this is an entry component _and_
+it should generate code to bootstrap the application with this component.
+
+There's no need to list a component in both the `bootstrap` and `entryComponents` lists,
+although doing so is harmless.
+
+For more information, see [Entry Components](guide/entry-components).
+
+<hr/>
+
+## When do I add components to _entryComponents_?
+
+Most application developers won't need to add components to the `entryComponents`.
+
+Angular adds certain components to _entry components_ automatically.
+Components listed in `@NgModule.bootstrap` are added automatically.
+Components referenced in router configuration are added automatically.
+These two mechanisms account for almost all entry components.
+
+If your app happens to bootstrap or dynamically load a component _by type_ in some other manner,
+you must add it to `entryComponents` explicitly.
+
+Although it's harmless to add components to this list,
+it's best to add only the components that are truly _entry components_.
+Don't include components that [are referenced](guide/ngmodule-faq#q-template-reference)
+in the templates of other components.
+
+For more information, see [Entry Components](guide/entry-components).
+
+<hr/>
+
+
+## Why does Angular need _entryComponents_?
+
+The reason is _tree shaking_. For production apps you want to load the smallest, fastest code possible. The code should contain only the classes that you actually need.
+It should exclude a component that's never used, whether or not that component is declared.
+
+In fact, many libraries declare and export components you'll never use.
+If you don't reference them, the tree shaker drops these components from the final code package.
+
+If the [Angular compiler](guide/ngmodule-faq#q-angular-compiler) generated code for every declared component, it would defeat the purpose of the tree shaker.
+
+Instead, the compiler adopts a recursive strategy that generates code only for the components you use.
+
+The compiler starts with the entry components,
+then it generates code for the declared components it [finds](guide/ngmodule-faq#q-template-reference) in an entry component's template,
+then for the declared components it discovers in the templates of previously compiled components,
+and so on. At the end of the process, the compiler has generated code for every entry component
+and every component reachable from an entry component.
+
+If a component isn't an _entry component_ or wasn't found in a template,
+the compiler omits it.
+
+<hr/>
+
+## What kinds of modules should I have and how should I use them?
+
+Every app is different. Developers have various levels of experience and comfort with the available choices.
+Some suggestions and guidelines appear to have wide appeal.
+
+### `SharedModule`
+`SharedModule` is a conventional name for an `NgModule` with the components, directives, and pipes that you use
+everywhere in your app. This module should consist entirely of `declarations`,
+most of them exported.
+
+The `SharedModule` may re-export other widget modules, such as `CommonModule`,
+`FormsModule`, and NgModules with the UI controls that you use most widely.
+
+The `SharedModule` should not have `providers` for reasons [explained previously](guide/ngmodule-faq#q-why-bad).
+Nor should any of its imported or re-exported modules have `providers`.
+
+Import the `SharedModule` in your _feature_ modules,
+both those loaded when the app starts and those you lazy load later.
+
+### `CoreModule`
+`CoreModule` is a conventional name for an `NgModule` with `providers` for
+the singleton services you load when the application starts.
+
+Import `CoreModule` in the root `AppModule` only.
+Never import `CoreModule` in any other module.
+
+Consider making `CoreModule` a pure services module
+with no `declarations`.
+
+For more information, see [Sharing NgModules](guide/sharing-ngmodules)
+and [Singleton Services](guide/singleton-services).
+
+### Feature Modules
+
+Feature modules are modules you create around specific application business domains, user workflows, and utility collections. They support your app by containing a particular feature,
+such as routes, services, widgets, etc. To conceptualize what a feature module might be in your
+app, consider that if you would put the files related to a certain functionality, like a search,
+in one folder, that the contents of that folder would be a feature module that you might call
+your `SearchModule`. It would contain all of the components, routing, and templates that
+would make up the search functionality.
+
+For more information, see [Feature Modules](guide/feature-modules) and
+[Module Types](guide/module-types)
+
+
+
+## What's the difference between NgModules and JavaScript Modules?
+
+In an Angular app, NgModules and JavaScript modules work together.
+
+In modern JavaScript, every file is a module
+(see the [Modules](http://exploringjs.com/es6/ch_modules.html) page of the Exploring ES6 website).
+Within each file you write an `export` statement to make parts of the module public.
+
+An Angular NgModule is a class with the `@NgModule` decorator&mdash;JavaScript modules
+don't have to have the `@NgModule` decorator. Angular's `NgModule` has `imports` and `exports` and they serve a similar purpose.
+
+You _import_ other NgModules so you can use their exported classes in component templates.
+You _export_ this NgModule's classes so they can be imported and used by components of _other_ NgModules.
+
+For more information, see [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
+
+<hr/>
+
+{@a q-template-reference}
+
+## How does Angular find components, directives, and pipes in a template?<br>What is a <i><b>template reference</b></i>?
+
+The [Angular compiler](guide/ngmodule-faq#q-angular-compiler) looks inside component templates
+for other components, directives, and pipes. When it finds one, that's a template reference.
+
+The Angular compiler finds a component or directive in a template when it can match the *selector* of that component or directive to some HTML in that template.
+
+The compiler finds a pipe if the pipe's *name* appears within the pipe syntax of the template HTML.
+
+Angular only matches selectors and pipe names for classes that are declared by this module
+or exported by a module that this module imports.
+
+<hr/>
+
+{@a q-angular-compiler}
+
+## What is the Angular compiler?
+
+The Angular compiler converts the application code you write into highly performant JavaScript code.
+The `@NgModule` metadata plays an important role in guiding the compilation process.
+
+The code you write isn't immediately executable. For example, components have templates that contain custom elements, attribute directives, Angular binding declarations,
+and some peculiar syntax that clearly isn't native HTML.
+
+The Angular compiler reads the template markup,
+combines it with the corresponding component class code, and emits _component factories_.
+
+A component factory creates a pure, 100% JavaScript representation
+of the component that incorporates everything described in its `@Component` metadata:
+the HTML, the binding instructions, the attached styles.
+
+Because directives and pipes appear in component templates,
+the Angular compiler incorporates them into compiled component code too.
+
+`@NgModule` metadata tells the Angular compiler what components to compile for this module and
+how to link this module with other modules.
diff --git a/aio/content/guide/ngmodule-vs-jsmodule.md b/aio/content/guide/ngmodule-vs-jsmodule.md
new file mode 100644
index 000000000000..36866b2cfc79
--- /dev/null
+++ b/aio/content/guide/ngmodule-vs-jsmodule.md
@@ -0,0 +1,74 @@
+# JavaScript Modules vs. NgModules
+
+#### Prerequisites
+A basic understanding of [JavaScript/ECMAScript modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/).
+
+<hr>
+
+JavaScript and Angular use modules to organize code, and
+though they organize it differently, Angular apps rely on both.
+
+## JavaScript modules
+
+In JavaScript, modules are individual files with JavaScript code in them. To make what’s in them available, you write an export statement, usually after the relevant code, like this:
+
+```typescript
+export class AppComponent { ... }
+```
+
+Then, when you need that file’s code in another file, you import it like this:
+
+```typescript
+import { AppComponent } from './app.component';
+```
+
+JavaScript modules help you namespace, preventing accidental global variables.
+
+## NgModules
+
+<!-- KW-- perMisko: let's discuss. This does not answer the question why it is different. Also, last sentence is confusing.-->
+NgModules are classes decorated with `@NgModule`. The `@NgModule` decorator’s `imports` array tells Angular what other NgModules the current module needs. The modules in the `imports` array are different than JavaScript modules because they are NgModules rather than regular JavaScript modules. Classes with an `@NgModule` decorator are by convention kept in their own files, but what makes them an `NgModule` isn’t being in their own file, like JavaScript modules; it’s the presence of `@NgModule` and its metadata.
+
+The `AppModule` generated from the Angular CLI demonstrates both kinds of modules in action:
+
+```typescript
+/* These are JavaScript import statements. Angular doesn’t know anything about these. */
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+/* The @NgModule decorator lets Angular know that this is an NgModule. */
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [     /* These are NgModule imports. */
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+
+The NgModule classes differ from JavaScript module in the following key ways:
+
+* An NgModule bounds [declarable classes](guide/ngmodule-faq#q-declarable) only.
+Declarables are the only classes that matter to the [Angular compiler](guide/ngmodule-faq#q-angular-compiler).
+* Instead of defining all member classes in one giant file as in a JavaScript module,
+you list the module's classes in the `@NgModule.declarations` list.
+* An NgModule can only export the [declarable classes](guide/ngmodule-faq#q-declarable)
+it owns or imports from other modules. It doesn't declare or export any other kind of class.
+* Unlike JavaScript modules, an NgModule can extend the _entire_ application with services
+by adding providers to the `@NgModule.providers` list.
+
+<hr />
+
+## More on NgModules
+
+For more information on NgModules, see:
+* [Bootstrapping](guide/bootstrapping).
+* [Frequently used modules](guide/frequent-ngmodules).
+* [Providers](guide/providers).
diff --git a/aio/content/guide/ngmodules.md b/aio/content/guide/ngmodules.md
new file mode 100644
index 000000000000..b3f136a3403e
--- /dev/null
+++ b/aio/content/guide/ngmodules.md
@@ -0,0 +1,75 @@
+# NgModules
+
+#### Prerequisites
+
+A basic understanding of the following concepts:
+* [Bootstrapping](guide/bootstrapping).
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
+
+<hr>
+
+**NgModules** configure the injector and the compiler and help organize related things together.
+
+An NgModule is a class marked by the `@NgModule` decorator.
+`@NgModule` takes a metadata object that describes how to compile a component's template and how to create an injector at runtime.
+It identifies the module's own components, directives, and pipes,
+making some of them public, through the `exports` property, so that external components can use them.
+`@NgModule` can also add service providers to the application dependency injectors.
+
+For an example app showcasing all the techniques that NgModules related pages
+cover, see the <live-example></live-example>. For explanations on the individual techniques, visit the relevant NgModule pages under the NgModules
+section.
+
+
+## Angular modularity
+
+Modules are a great way to organize an application and extend it with capabilities from external libraries.
+
+Angular libraries are NgModules, such as `FormsModule`, `HttpClientModule`, and `RouterModule`.
+Many third-party libraries are available as NgModules such as
+<a href="https://material.angular.io/">Material Design</a>,
+<a href="http://ionicframework.com/">Ionic</a>, and
+<a href="https://github.com/angular/angularfire2">AngularFire2</a>.
+
+NgModules consolidate components, directives, and pipes into
+cohesive blocks of functionality, each focused on a
+feature area, application business domain, workflow, or common collection of utilities.
+
+Modules can also add services to the application.
+Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client.
+
+Modules can be loaded eagerly when the application starts or lazy loaded asynchronously by the router.
+
+NgModule metadata does the following:
+
+* Declares which components, directives, and pipes belong to the module.
+* Makes some of those components, directives, and pipes public so that other module's component templates can use them.
+* Imports other modules with the components, directives, and pipes that components in the current module need.
+* Provides services that the other application components can use.
+
+Every Angular app has at least one module, the root module.
+You [bootstrap](guide/bootstrapping) that module to launch the application.
+
+The root module is all you need in a simple application with a few components.
+As the app grows, you refactor the root module into [feature modules](guide/feature-modules)
+that represent collections of related functionality.
+You then import these modules into the root module.
+
+## The basic NgModule
+
+The CLI generates the following basic app module when creating a new app.
+
+<code-example path="bootstrapping/src/app/app.module.ts" region="whole-ngmodule" title="src/app/app.module.ts" linenums="false">
+</code-example>
+
+At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). This page builds on [Bootstrapping](guide/bootstrapping), which covers the structure of an NgModule in detail. If you need more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping).
+
+<hr />
+
+## More on NgModules
+
+You may also be interested in the following:
+* [Feature Modules](guide/feature-modules).
+* [Entry Components](guide/entry-components).
+* [Providers](guide/providers).
+* [Types of NgModules](guide/module-types).
diff --git a/aio/content/guide/npm-packages.md b/aio/content/guide/npm-packages.md
new file mode 100644
index 000000000000..9af55d93bb72
--- /dev/null
+++ b/aio/content/guide/npm-packages.md
@@ -0,0 +1,173 @@
+# Npm Packages
+
+ The [**Angular CLI**](https://cli.angular.io/), Angular applications, and Angular itself depend upon features and functionality provided by libraries that are available as [**npm**](https://docs.npmjs.com/) packages.
+
+You can download and install these npm packages with the [**npm client**](https://docs.npmjs.com/cli/install), which runs as a Node.js® application.
+
+The [**yarn client**](https://yarnpkg.com/en/) is a popular alternative for downloading and installing npm packages.
+The Angular CLI uses `yarn` by default to install npm packages when you create a new project.
+
+<div class="alert is-helpful">
+
+Node.js and npm are essential to Angular development.
+
+[Get them now](https://docs.npmjs.com/getting-started/installing-node "Installing Node.js and updating npm")
+if they're not already installed on your machine.
+
+**Verify that you are running Node.js `v8.x` or higher and npm `5.x` or higher**
+by running the commands `node -v` and `npm -v` in a terminal/console window.
+Older versions produce errors.
+
+Consider using [nvm](https://github.com/creationix/nvm) for managing multiple
+versions of Node.js 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.js and npm.
+
+</div>
+
+## _package.json_
+
+Both `npm` and `yarn` install packages that are identified in a [**package.json**](https://docs.npmjs.com/files/package.json) file.
+
+The CLI `ng new` command creates a default `package.json` file for your project.
+This `package.json` specifies _a starter set of packages_ that work well together and 
+jointly support many common application scenarios.
+
+You will add packages to `package.json` as your application evolves.
+You may even remove some.
+
+This guide focuses on the most important packages in the starter set.
+
+#### *dependencies* and *devDependencies*
+
+The `package.json` includes two sets of packages,
+[dependencies](guide/npm-packages#dependencies) and [devDependencies](guide/npm-packages#dev-dependencies).
+
+The *dependencies* are essential to *running* the application.
+The *devDependencies* are only necessary to *develop* the application.
+
+{@a dependencies}
+
+## *Dependencies*
+The `dependencies` section of `package.json` contains:
+
+* **Angular packages**: Angular core and optional modules; their package names begin `@angular/`.
+
+* **Support packages**: 3rd party libraries that must be present for Angular apps to run.
+
+* **Polyfill packages**: Polyfills plug gaps in a browser's JavaScript implementation.
+
+### Angular Packages
+
+**@angular/animations**: Angular's animations library makes it easy to define and apply animation effects such as page and list transitions.
+Read about it in the [Animations guide](guide/animations).
+
+**@angular/common**: The commonly needed services, pipes, and directives provided by the Angular team.
+The [`HttpClientModule`](guide/http) is also here, in the '@angular/common/http' subfolder.
+
+**@angular/core**: Critical runtime parts of the framework needed by every application.
+Includes all metadata decorators, `Component`, `Directive`,  dependency injection, and the component lifecycle hooks.
+
+**@angular/compiler**: Angular's *Template Compiler*.
+It understands templates and can convert them to code that makes the application run and render.
+Typically you don’t interact with the compiler directly; rather, you use it indirectly via `platform-browser-dynamic` when [JIT compiling](guide/aot-compiler) in the browser.
+
+**@angular/forms**: support for both [template-driven](guide/forms) and [reactive forms](guide/reactive-forms).
+
+**@angular/http**: Angular's old, deprecated, HTTP client.
+
+**@angular/platform-browser**: Everything DOM and browser related, especially
+the pieces that help render into the DOM.
+This package also includes the `bootstrapModuleFactory()` method
+for bootstrapping applications for production builds that pre-compile with [AOT](guide/aot-compiler).
+
+**@angular/platform-browser-dynamic**: Includes [Providers](api/core/Provider)
+and methods to compile and run the app on the client 
+using the [JIT compiler](guide/aot-compiler).
+
+**@angular/router**: The [router module](/guide/router) navigates among your app pages when the browser URL changes.
+
+**@angular/upgrade**: Set of utilities for upgrading AngularJS applications to Angular.
+
+{@a polyfills}
+
+### Polyfill packages
+
+Many browsers lack native support for some features in the latest HTML standards,
+features that Angular requires.
+"[Polyfills](https://en.wikipedia.org/wiki/Polyfill)" can emulate the missing features.
+The [Browser Support](guide/browser-support) guide explains which browsers need polyfills and 
+how you can add them.
+
+The default `package.json` installs the **[core-js](https://github.com/zloirock/core-js)** package
+which polyfills missing features for several popular browser.
+
+### Support packages
+
+**[rxjs](https://github.com/benlesh/RxJS)**: Many Angular APIs return _observables_. RxJS is an implementation of the proposed [Observables specification](https://github.com/zenparsing/es-observable) currently before the
+[TC39](http://www.ecma-international.org/memento/TC39.htm) committee that determines standards for the JavaScript language.
+
+
+**[zone.js](https://github.com/angular/zone.js)**: Angular relies on zone.js to run Angular's change detection processes when native JavaScript operations raise events.  Zone.js is an implementation of a [specification](https://gist.github.com/mhevery/63fdcdf7c65886051d55) currently before the
+[TC39](http://www.ecma-international.org/memento/TC39.htm) committee that determines standards for the JavaScript language.
+
+
+{@a dev-dependencies}
+
+## *DevDependencies*
+
+The packages listed in the *devDependencies* section of the `package.json` help you develop the application on your local machine.
+
+You don't deploy them with the production application although there is no harm in doing so.
+
+**[@angular/cli](https://github.com/angular/angular-cli/)**: The Angular CLI tools.
+
+
+**[@angular/compiler-cli](https://github.com/angular/angular/blob/master/packages/compiler-cli/README.md)**: The Angular compiler, which is invoked by the Angular CLI's `build` and `serve` commands.
+
+
+**[@angular/language-service](https://github.com/angular/angular-cli/)**: The Angular language service analyzes component templates and provides type and error information that TypeScript-aware editors can use to improve the developer's experience.
+For example, see the [Angular language service extension for VS Code](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
+
+
+**@types/... **: TypeScript definition files for 3rd party libraries such as Jasmine and Node.js.
+
+
+**[codelyzer](https://www.npmjs.com/package/codelyzer)**: A linter for Angular apps whose rules conform to the Angular [style guide](guide/styleguide).
+
+
+**jasmine/... **: packages to support the [Jasmine](https://jasmine.github.io/) test library.
+
+
+**karma/... **: packages to support the [karma](https://www.npmjs.com/package/karma) test runner.
+
+
+**[protractor](https://www.npmjs.com/package/protractor)**: an end-to-end (e2e) framework for Angular apps. 
+Built on top of [WebDriverJS](https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs).
+
+
+**[ts-node](https://www.npmjs.com/package/ts-node)**: TypeScript execution environment and REPL for Node.js.
+
+
+**[tslint](https://www.npmjs.com/package/tslint)**: a static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.
+
+
+**[typescript](https://www.npmjs.com/package/typescript)**:
+the TypeScript language server, including the *tsc* TypeScript compiler.
+
+
+## So many packages! So many files!
+
+The default `package.json` installs more packages than you'll need for your project.
+
+A given package may contain tens, hundreds, even thousands of files,
+all of them in your local machine's `node_modules` directory.
+The sheer volume of files is intimidating, 
+
+You can remove packages that you don't need but how can you be sure that you won't need it?
+As a practical matter, it's better to install a package you don't need than worry about it.
+Extra packages and package files on your local development machine are harmless.
+
+By default the Angular CLI build process bundles into a single file just the few "vendor" library files that your application actually needs.
+The browser downloads this bundle, not the original package files.
+
+See the [Deployment](guide/deployment) to learn more.
diff --git a/aio/content/guide/observables-in-angular.md b/aio/content/guide/observables-in-angular.md
new file mode 100644
index 000000000000..858e9c8dc55c
--- /dev/null
+++ b/aio/content/guide/observables-in-angular.md
@@ -0,0 +1,51 @@
+# Observables in Angular
+
+Angular makes use of observables as an interface to handle a variety of common asynchronous operations. For example:
+
+* The `EventEmitter` class extends `Observable`.
+* The HTTP module uses observables to handle AJAX requests and responses.
+* The Router and Forms modules use observables to listen for and respond to user-input events.
+
+## Event emitter
+
+Angular provides an `EventEmitter` class that is used when publishing values from a component through the `@Output()` decorator. `EventEmitter` extends `Observable`, adding an `emit()` method so it can send arbitrary values. When you call `emit()`, it passes the emitted value to the `next()` method of any subscribed observer.
+
+A good example of usage can be found on the [EventEmitter](https://angular.io/api/core/EventEmitter) documentation. Here is the example component that listens for open and close events:
+
+`<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>`
+
+Here is the component definition:
+
+<code-example path="observables-in-angular/src/main.ts" title="EventEmitter" region="eventemitter"></code-example>
+
+## HTTP
+Angular’s `HttpClient` returns observables from HTTP method calls. For instance, `http.get(‘/api’)` returns an observable. This provides several advantages over promise-based HTTP APIs:
+
+* Observables do not mutate the server response (as can occur through chained `.then()` calls on promises). Instead, you can use a series of operators to transform values as needed.
+* HTTP requests are cancellable through the `unsubscribe()` method.
+* Requests can be configured to get progress event updates.
+* Failed requests can be retried easily.
+
+## Async pipe
+
+The [AsyncPipe](https://angular.io/api/common/AsyncPipe) subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes.
+
+The following example binds the `time` observable to the component's view. The observable continuously updates the view with the current time.
+
+<code-example path="observables-in-angular/src/main.ts" title="Using async pipe" region="pipe"></code-example>
+
+## Router
+
+[`Router.events`](https://angular.io/api/router/Router#events) provides events as observables. You can use the `filter()` operator from RxJS to look for events of interest, and subscribe to them in order to make decisions based on the sequence of events in the navigation process. Here's an example:
+
+<code-example path="observables-in-angular/src/main.ts" title="Router events" region="router"></code-example>
+
+The [ActivatedRoute](https://angular.io/api/router/ActivatedRoute) is an injected router service that makes use of observables to get information about a route path and parameters. For example, `ActivateRoute.url` contains an observable that reports the route path or paths. Here's an example:
+
+<code-example path="observables-in-angular/src/main.ts" title="ActivatedRoute" region="activated_route"></code-example>
+
+## Reactive forms
+
+Reactive forms have properties that use observables to monitor form control values. The [`FormControl`](https://angular.io/api/forms/FormControl) properties `valueChanges` and `statusChanges` contain observables that raise change events. Subscribing to an observable form-control property is a way of triggering application logic within the component class. For example:
+
+<code-example path="observables-in-angular/src/main.ts" title="Reactive forms" region="forms"></code-example>
diff --git a/aio/content/guide/observables.md b/aio/content/guide/observables.md
new file mode 100644
index 000000000000..fd3f7392f513
--- /dev/null
+++ b/aio/content/guide/observables.md
@@ -0,0 +1,114 @@
+# Observables
+
+Observables provide support for passing messages between publishers and subscribers in your application. Observables offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values.
+
+Observables are declarative&mdash;that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.
+
+An observable can deliver multiple values of any type&mdash;literals, messages, or events, depending on the context. The API for receiving values is the same whether the values are delivered synchronously or asynchronously. Because setup and teardown logic are both handled by the observable, your application code only needs to worry about subscribing to consume values, and when done, unsubscribing. Whether the stream was keystrokes, an HTTP response, or an interval timer, the interface for listening to values and stopping listening is the same.
+
+Because of these advantages, observables are used extensively within Angular, and are recommended for app development as well.
+
+## Basic usage and terms
+
+As a publisher, you create an `Observable` instance that defines a *subscriber* function. This is the function that is executed when a consumer calls the `subscribe()` method. The subscriber function defines how to obtain or generate values or messages to be published.
+
+To execute the observable you have created and begin receiving notifications, you call its `subscribe()` method, passing an *observer*.  This is a JavaScript object that defines the handlers for the notifications you receive. The `subscribe()` call returns a `Subscription` object that has an `unsubscribe()` method, which you call to stop receiving notifications.
+
+Here's an example that demonstrates the basic usage model by showing how an observable could be used to provide geolocation updates.
+
+<code-example path="observables/src/geolocation.ts" title="Observe geolocation updates"></code-example>
+
+## Defining observers
+
+A handler for receiving observable notifications implements the `Observer` interface. It is an object that defines callback methods to handle the three types of notifications that an observable can send:
+
+| Notification type | Description |
+|:---------|:-------------------------------------------|
+| `next`  | Required. A handler for each delivered value. Called zero or more times after execution starts.|
+| `error` | Optional. A handler for an error notification. An error halts execution of the observable instance.|
+| `complete` | Optional. A handler for the execution-complete notification. Delayed values can continue to be delivered to the next handler after execution is complete.|
+
+An observer object can define any combination of these handlers. If you don't supply a handler for a notification type, the observer ignores notifications of that type.
+
+## Subscribing
+
+An `Observable` instance begins publishing values only when someone subscribes to it. You subscribe by calling the `subscribe()` method of the instance, passing an observer object to receive the notifications.
+
+<div class="alert is-helpful">
+
+   In order to show how subscribing works, we need to create a new observable. There is a  constructor that you use to create new instances, but for illustration, we can use some static methods on the `Observable` class that create simple observables of frequently used types:
+
+  * `Observable.of(...items)`&mdash;Returns an `Observable` instance that synchronously delivers the values provided as arguments.
+  * `Observable.from(iterable)`&mdash;Converts its argument to an `Observable` instance. This method is commonly used to convert an array to an observable.
+
+</div>
+
+Here's an example of creating and subscribing to a simple observable, with an observer that logs the received message to the console:
+
+<code-example
+  path="observables/src/subscribing.ts"
+  region="observer"
+  title="Subscribe using observer"></code-example>
+
+Alternatively, the `subscribe()` method can accept callback function definitions in line, for `next`, `error`, and `complete` handlers. For example, the following `subscribe()` call is the same as the one that specifies the predefined observer:
+
+<code-example path="observables/src/subscribing.ts" region="sub_fn" title="Subscribe with positional arguments"></code-example>
+
+In either case, a `next` handler is required. The `error` and `complete` handlers are optional.
+
+Note that a `next()` function could receive, for instance, message strings, or event objects, numeric values, or structures, depending on context. As a general term, we refer to data published by an observable as a *stream*. Any type of value can be represented with an observable, and the values are published as a stream.
+
+## Creating observables
+
+Use the `Observable` constructor to create an observable stream of any type. The constructor takes as its argument the subscriber function to run when the observable’s `subscribe()` method executes. A subscriber function receives an `Observer` object, and can publish values to the observer's `next()` method.
+
+For example, to create an observable equivalent to the `Observable.of(1, 2, 3)` above, you could do something like this:
+
+<code-example path="observables/src/creating.ts" region="subscriber" title="Create observable with constructor"></code-example>
+
+To take this example a little further, we can create an observable that publishes events. In this example, the subscriber function is defined inline.
+
+<code-example path="observables/src/creating.ts" region="fromevent" title="Create with custom fromEvent function"></code-example>
+
+Now you can use this function to create an observable that publishes keydown events:
+
+<code-example path="observables/src/creating.ts" region="fromevent_use" title="Use custom fromEvent function"></code-example>
+
+## Multicasting
+
+A typical observable creates a new, independent execution for each subscribed observer. When an observer subscribes, the observable wires up an event handler and delivers values to that observer. When a second observer subscribes, the observable then wires up a new event handler and delivers values to that second observer in a separate execution. 
+
+Sometimes, instead of starting an independent execution for each subscriber, you want each subscription to get the same values&mdash;even if values have already started emitting. This might be the case with something like an observable of clicks on the document object.
+
+*Multicasting* is the practice of broadcasting to a list of multiple subscribers in a single execution. With a multicasting observable, you don't register multiple listeners on the document, but instead re-use the first listener and send values out to each subscriber.
+
+When creating an observable you should determine how you want that observable to be used and whether or not you want to multicast its values. 
+
+Let’s look at an example that counts from 1 to 3, with a one-second delay after each number emitted.
+
+<code-example path="observables/src/multicasting.ts" region="delay_sequence" title="Create a delayed sequence"></code-example>
+
+Notice that if you subscribe twice, there will be two separate streams, each emitting values every second. It looks something like this:
+
+<code-example path="observables/src/multicasting.ts" region="subscribe_twice" title="Two subscriptions"></code-example>
+
+ Changing the observable to be multicasting could look something like this:
+
+<code-example path="observables/src/multicasting.ts" region="multicast_sequence" title="Create a multicast subscriber"></code-example>
+
+<div class="alert is-helpful">
+   Multicasting observables take a bit more setup, but they can be useful for certain applications. Later we will look at tools that simplify the process of multicasting, allowing you to take any observable and make it multicasting.
+</div>
+
+## Error handling
+
+Because observables produce values asynchronously, try/catch will not effectively catch errors. Instead, you handle errors by specifying an `error` callback on the observer. Producing an error also causes the observable to clean up subscriptions and stop producing values. An observable can  either produce values (calling the `next` callback), or it can complete, calling either the `complete` or `error` callback.
+
+<code-example>
+myObservable.subscribe({
+  next(num) { console.log('Next num: ' + num)},
+  error(err) { console.log('Received an errror: ' + err)}
+});
+</code-example>
+
+Error handling (and specifically recovering from an error) is covered in more detail in a later section.
diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md
new file mode 100644
index 000000000000..2893ab1ac21c
--- /dev/null
+++ b/aio/content/guide/pipes.md
@@ -0,0 +1,637 @@
+# 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.
+
+Once data arrives, you could push their raw `toString` values directly to the view,
+but that rarely makes for a good user experience.
+For example, in most use cases, users prefer to see a date in a simple format like
+<samp>April 15, 1988</samp> rather than the raw string format
+<samp>Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)</samp>.
+
+Clearly, some values benefit from a bit of editing. You may notice that you
+desire many of the same transformations repeatedly, both within and across many applications.
+You can almost think of them as styles.
+In fact, you might like to apply them in your HTML templates as you do styles.
+
+Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML.
+
+You can run the <live-example></live-example> in Stackblitz and download the code from there.
+
+
+## Using pipes
+
+A pipe takes in data as input and transforms it to a desired output.
+In this page, you'll use pipes to transform a component's birthday property into
+a human-friendly date.
+
+
+<code-example path="pipes/src/app/hero-birthday1.component.ts" title="src/app/hero-birthday1.component.ts" linenums="false">
+
+</code-example>
+
+
+
+Focus on the component's template.
+
+
+<code-example path="pipes/src/app/app.component.html" region="hero-birthday-template" title="src/app/app.component.html" linenums="false">
+
+</code-example>
+
+
+
+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/DatePipe)
+function on the right. All pipes work this way.
+
+
+
+
+## Built-in pipes
+Angular comes with a stock of pipes such as
+`DatePipe`, `UpperCasePipe`, `LowerCasePipe`, `CurrencyPipe`, and `PercentPipe`.
+They are all available for use in any template.
+
+
+<div class="alert is-helpful">
+
+
+
+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".
+
+Angular doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in the [Appendix](guide/pipes#no-filter-pipe) of this page.
+
+
+</div>
+
+
+
+
+## Parameterizing a pipe
+
+A pipe can accept any number of optional parameters to fine-tune its output.
+To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value
+(such as `currency:'EUR'`). If the pipe accepts multiple parameters, separate the values with colons (such as `slice:1:5`)
+
+Modify the birthday template to give the date pipe a format parameter.
+After formatting the hero's April 15th birthday, it renders as **<samp>04/15/88</samp>**:
+
+
+<code-example path="pipes/src/app/app.component.html" region="format-birthday" title="src/app/app.component.html" linenums="false">
+
+</code-example>
+
+
+
+The parameter value can be any valid template expression,
+(see the [Template expressions](guide/template-syntax#template-expressions) section of the
+[Template Syntax](guide/template-syntax) page)
+such as a string literal or a component property.
+In other words, you can control the format through a binding the same way you control the birthday value through a binding.
+
+Write a second component that *binds* the pipe's format parameter
+to the component's `format` property. Here's the template for that component:
+
+
+<code-example path="pipes/src/app/hero-birthday2.component.ts" region="template" title="src/app/hero-birthday2.component.ts (template)" linenums="false">
+
+</code-example>
+
+
+
+You also added a button to the template and bound its click event to the component's `toggleFormat()` method.
+That method toggles the component's `format` property between a short form
+(`'shortDate'`) and a longer form (`'fullDate'`).
+
+
+<code-example path="pipes/src/app/hero-birthday2.component.ts" region="class" title="src/app/hero-birthday2.component.ts (class)" linenums="false">
+
+</code-example>
+
+
+
+As you click the button, the displayed date alternates between
+"**<samp>04/15/1988</samp>**" and
+"**<samp>Friday, April 15, 1988</samp>**".
+
+
+<figure>
+  <img src='generated/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle">
+</figure>
+
+
+
+<div class="alert is-helpful">
+
+
+
+Read more about the `DatePipe` format options in the [Date Pipe](api/common/DatePipe)
+API Reference page.
+
+
+</div>
+
+
+
+## Chaining pipes
+
+You can chain pipes together in potentially useful combinations.
+In the following example, to display the birthday in uppercase,
+the birthday is chained to the `DatePipe` and on to the `UpperCasePipe`.
+The birthday displays as **<samp>APR 15, 1988</samp>**.
+
+
+<code-example path="pipes/src/app/app.component.html" region="chained-birthday" title="src/app/app.component.html" linenums="false">
+
+</code-example>
+
+
+
+This example&mdash;which displays **<samp>FRIDAY, APRIL 15, 1988</samp>**&mdash;chains
+the same pipes as above, but passes in a parameter to `date` as well.
+
+
+<code-example path="pipes/src/app/app.component.html" region="chained-parameter-birthday" title="src/app/app.component.html" linenums="false">
+
+</code-example>
+
+
+
+
+## Custom pipes
+
+You can write your own custom pipes.
+Here's a custom pipe named `ExponentialStrengthPipe` that can boost a hero's powers:
+
+
+<code-example path="pipes/src/app/exponential-strength.pipe.ts" title="src/app/exponential-strength.pipe.ts" linenums="false">
+
+</code-example>
+
+
+
+This pipe definition reveals the following key points:
+
+* A pipe is a class decorated with pipe metadata.
+* The pipe class implements the `PipeTransform` interface's `transform` method that
+accepts an input value followed by optional parameters and returns the transformed value.
+* There will be one additional argument to the `transform` method for each parameter passed to the pipe.
+Your pipe has one such parameter: the `exponent`.
+* To tell Angular that this is a pipe, you apply the
+`@Pipe` decorator, which you import from the core Angular library.
+* The `@Pipe` decorator allows you to define the
+   pipe name that you'll use within template expressions. It must be a valid JavaScript identifier.
+   Your pipe's name is `exponentialStrength`.
+
+
+<div class="alert is-helpful">
+
+
+
+## The *PipeTransform* interface
+
+The `transform` method is essential to a pipe.
+The `PipeTransform` *interface* defines that method and guides both tooling and the compiler.
+Technically, it's optional; Angular looks for and executes the `transform` method regardless.
+
+</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>
+  <img src='generated/images/guide/pipes/power-booster.png' alt="Power Booster">
+</figure>
+
+
+
+Note the following:
+
+* You use your custom pipe the same way you use built-in pipes.
+* You must include your pipe in the `declarations` array of the `AppModule`.
+
+<div class="callout is-helpful">
+
+<header>
+  Remember the declarations array
+</header>
+
+
+You must register custom pipes.
+If you don't, Angular reports an error.
+Angular CLI's generator registers the pipe automatically.
+
+
+</div>
+
+
+
+To probe the behavior in the <live-example></live-example>,
+change the value and optional exponent in the template.
+
+## Power Boost Calculator
+
+It's not much fun updating the template to test the custom pipe.
+Upgrade the example to a "Power Boost Calculator" that combines
+your pipe and two-way data binding with `ngModel`.
+
+
+<code-example path="pipes/src/app/power-boost-calculator.component.ts" title="src/app/power-boost-calculator.component.ts">
+
+</code-example>
+
+
+
+<figure>
+  <img src='generated/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator">
+</figure>
+
+
+
+
+{@a change-detection}
+
+
+## Pipes and change detection
+
+Angular looks for changes to data-bound values through a *change detection* process that runs after every DOM event:
+every keystroke, mouse move, timer tick, and server response. This could be expensive.
+Angular strives to lower the cost whenever possible and appropriate.
+
+Angular picks a simpler, faster change detection algorithm when you use a pipe.
+
+<h3 class="no-toc">No pipe</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:
+
+
+<code-example path="pipes/src/app/flying-heroes.component.html" region="template-1" title="src/app/flying-heroes.component.html (v1)" linenums="false">
+
+</code-example>
+
+
+
+The companion component class provides heroes, adds heroes into the array, and can reset the array.
+
+<code-example path="pipes/src/app/flying-heroes.component.ts" region="v1" title="src/app/flying-heroes.component.ts (v1)" linenums="false">
+
+</code-example>
+
+
+
+You can add heroes and Angular updates the display when you do.
+If you click the `reset` button, Angular replaces `heroes` with a new array of the original heroes and updates the display.
+If you added the ability to remove or change a hero, Angular would detect those changes and update the display as well.
+
+<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.
+
+<code-example path="pipes/src/app/flying-heroes.component.html" region="template-flying-heroes" title="src/app/flying-heroes.component.html (flyers)" linenums="false">
+
+</code-example>
+
+
+
+Here's the `FlyingHeroesPipe` implementation, which follows the pattern for custom pipes described earlier.
+
+<code-example path="pipes/src/app/flying-heroes.pipe.ts" region="pure" title="src/app/flying-heroes.pipe.ts" linenums="false">
+
+</code-example>
+
+
+
+Notice the odd behavior in the <live-example></live-example>:
+when you add flying heroes, none of them are displayed under "Heroes who fly."
+
+Although you're not getting the behavior you want, Angular isn't broken.
+It's just using a different change-detection algorithm that ignores changes to the list or any of its items.
+
+Notice how a hero is added:
+
+<code-example path="pipes/src/app/flying-heroes.component.ts" region="push" title="src/app/flying-heroes.component.ts" linenums="false">
+
+</code-example>
+
+
+
+You add the hero into the `heroes` array.  The reference to the array hasn't changed.
+It's the same array. That's all Angular cares about. From its perspective, *same array, no change, no display update*.
+
+To fix that, create an array with the new hero appended and assign that to `heroes`.
+This time Angular detects that the array reference has changed.
+It executes the pipe and updates the display with the new array, which includes the new flying hero.
+
+If you *mutate* the array, no pipe is invoked and the display isn't updated;
+if you *replace* the array, the pipe executes and the display is updated.
+The Flying Heroes application extends the
+code with checkbox switches and additional displays to help you experience these effects.
+
+
+<figure>
+  <img src='generated/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes">
+</figure>
+
+
+
+Replacing the array is an efficient way to signal Angular to update the display.
+When do you replace the array? When the data change.
+That's an easy rule to follow in *this* example
+where the only way to change the data is by adding a hero.
+
+More often, you don't know when the data have changed,
+especially in applications that mutate data in many ways,
+perhaps in application locations far away.
+A component in such an application usually can't know about those changes.
+Moreover, it's unwise to distort the component design to accommodate a pipe.
+Strive to keep the component class independent of the HTML.
+The component should be unaware of pipes.
+
+For filtering flying heroes, consider an *impure pipe*.
+
+
+
+## Pure and impure pipes
+
+There are two categories of pipes: *pure* and *impure*.
+Pipes are pure by default. Every pipe you've seen so far has been pure.
+You make a pipe impure by setting its pure flag to false. You could make the `FlyingHeroesPipe`
+impure like this:
+
+
+<code-example path="pipes/src/app/flying-heroes.pipe.ts" region="pipe-decorator" title="src/app/flying-heroes.pipe.ts" linenums="false">
+
+</code-example>
+
+
+
+Before doing that, understand the difference between pure and impure, starting with a pure pipe.
+
+<h3 class="no-toc">Pure pipes</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`)
+or a changed object reference (`Date`, `Array`, `Function`, `Object`).
+
+Angular ignores changes within (composite) objects.
+It won't call a pure pipe if you change an input month, add to an input array, or update an input object property.
+
+This may seem restrictive but it's also fast.
+An object reference check is fast&mdash;much faster than a deep check for
+differences&mdash;so Angular can quickly determine if it can skip both the
+pipe execution and a view update.
+
+For this reason, a pure pipe is preferable when you can live with the change detection strategy.
+When you can't, you *can* use the impure pipe.
+
+
+<div class="alert is-helpful">
+
+
+
+Or you might not use a pipe at all.
+It may be better to pursue the pipe's purpose with a property of the component,
+a point that's discussed later in this page.
+
+
+</div>
+
+
+
+<h3 class="no-toc">Impure pipes</h3>
+
+Angular executes an *impure pipe*  during every component change detection cycle.
+An impure pipe is called often, as often as every keystroke or mouse-move.
+
+With that concern in mind, implement an impure pipe with great care.
+An expensive, long-running pipe could destroy the user experience.
+
+
+{@a impure-flying-heroes}
+
+
+<h3 class="no-toc">An impure <i>FlyingHeroesPipe</i></h3>
+
+A flip of the switch turns the `FlyingHeroesPipe` into a `FlyingHeroesImpurePipe`.
+The complete implementation is as follows:
+
+<code-tabs>
+
+  <code-pane title="FlyingHeroesImpurePipe" path="pipes/src/app/flying-heroes.pipe.ts" region="impure">
+
+  </code-pane>
+
+  <code-pane title="FlyingHeroesPipe" path="pipes/src/app/flying-heroes.pipe.ts" region="pure">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+You inherit from `FlyingHeroesPipe` to prove the point that nothing changed internally.
+The only difference is the `pure` flag in the pipe metadata.
+
+This is a good candidate for an impure pipe because the `transform` function is trivial and fast.
+
+
+<code-example path="pipes/src/app/flying-heroes.pipe.ts" linenums="false" title="src/app/flying-heroes.pipe.ts (filter)" region="filter">
+
+</code-example>
+
+
+
+You can derive a `FlyingHeroesImpureComponent` from `FlyingHeroesComponent`.
+
+
+<code-example path="pipes/src/app/flying-heroes-impure.component.html" linenums="false" title="src/app/flying-heroes-impure.component.html (excerpt)" region="template-flying-heroes">
+
+</code-example>
+
+
+
+The only substantive change is the pipe in the template.
+You can confirm in the <live-example></live-example> that the _flying heroes_
+display updates as you add heroes, even when you mutate the `heroes` array.
+
+
+{@a async-pipe}
+<h3 class="no-toc">The impure <i>AsyncPipe</i></h3>
+
+
+The Angular `AsyncPipe` is an interesting example of an impure pipe.
+The `AsyncPipe` accepts a `Promise` or `Observable` as input
+and subscribes to the input automatically, eventually returning the emitted values.
+
+The `AsyncPipe` is also stateful.
+The pipe maintains a subscription to the input `Observable` and
+keeps delivering values from that `Observable` as they arrive.
+
+This next example binds an `Observable` of message strings
+(`message$`) to a view with the `async` pipe.
+
+
+<code-example path="pipes/src/app/hero-async-message.component.ts" title="src/app/hero-async-message.component.ts">
+
+</code-example>
+
+
+
+The Async pipe saves boilerplate in the component code.
+The component doesn't have to subscribe to the async data source,
+extract the resolved values and expose them for binding,
+and have to unsubscribe when it's destroyed
+(a potent source of memory leaks).
+
+<h3 class="no-toc">An impure caching pipe</h3>
+
+Write one more impure pipe, a pipe that makes an HTTP request.
+
+Remember that impure pipes are called every few milliseconds.
+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/http) client to retrieve data:
+
+
+<code-example path="pipes/src/app/fetch-json.pipe.ts" title="src/app/fetch-json.pipe.ts">
+
+</code-example>
+
+
+
+Now demonstrate it in a harness component whose template defines two bindings to this pipe,
+both requesting the heroes from the `heroes.json` file.
+
+
+<code-example path="pipes/src/app/hero-list.component.ts" title="src/app/hero-list.component.ts">
+
+</code-example>
+
+
+
+The component renders as the following:
+
+
+<figure>
+  <img src='generated/images/guide/pipes/hero-list.png' alt="Hero List">
+</figure>
+
+
+
+A breakpoint on the pipe's request for data shows the following:
+
+* Each binding gets its own pipe instance.
+* Each pipe instance caches its own URL and data.
+* Each pipe instance only calls the server once.
+
+<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`.
+
+
+<div class="callout is-helpful">
+
+
+
+<header>
+  Debugging with the json pipe
+</header>
+
+
+
+The [JsonPipe](api/common/JsonPipe)
+provides an easy way to diagnosis a mysteriously failing data binding or
+inspect an object for future binding.
+
+
+</div>
+
+
+
+{@a pure-pipe-pure-fn}
+
+
+<h3 class="no-toc">Pure pipes and pure functions</h3>
+
+A pure pipe uses pure functions.
+Pure functions process inputs and return values without detectable side effects.
+Given the same input, they should always return the same output.
+
+The pipes discussed earlier in this page are implemented with pure functions.
+The built-in `DatePipe` is a pure pipe with a pure function implementation.
+So are the `ExponentialStrengthPipe` and `FlyingHeroesPipe`.
+A few steps back, you reviewed the `FlyingHeroesImpurePipe`&mdash;an impure pipe with a pure function.
+
+But always implement a *pure pipe* with a *pure function*.
+Otherwise, you'll see many console errors regarding expressions that changed after they were checked.
+
+
+
+## Next steps
+
+Pipes are a great way to encapsulate and share common display-value
+transformations. Use them like styles, dropping them
+into your template's expressions to enrich the appeal and usability
+of your views.
+
+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.
+
+
+{@a no-filter-pipe}
+
+
+
+## Appendix: No *FilterPipe* or *OrderByPipe*
+
+Angular doesn't provide pipes for filtering or sorting lists.
+Developers familiar with AngularJS know these as `filter` and `orderBy`.
+There are no equivalents in Angular.
+
+This isn't an oversight. Angular doesn't offer such pipes because
+they perform poorly and prevent aggressive minification.
+Both `filter` and `orderBy` require parameters that reference object properties.
+Earlier in this page, you learned that such pipes must be [impure](guide/pipes#pure-and-impure-pipes) and that
+Angular calls impure pipes in almost every change-detection cycle.
+
+Filtering and especially sorting are expensive operations.
+The user experience can degrade severely for even moderate-sized lists when Angular calls these pipe methods many times per second.
+`filter` and `orderBy` have often been abused in AngularJS apps, leading to complaints that Angular itself is slow.
+That charge is fair in the indirect sense that AngularJS prepared this performance trap
+by offering `filter` and `orderBy` in the first place.
+
+The minification hazard is also compelling, if less obvious. Imagine a sorting pipe applied to a list of heroes.
+The list might be sorted by hero `name` and `planet` of origin properties in the following way:
+
+<code-example language="html">
+  &lt;!-- NOT REAL CODE! -->
+  &lt;div *ngFor="let hero of heroes | orderBy:'name,planet'">&lt;/div>
+</code-example>
+
+
+
+You identify the sort fields by text strings, expecting the pipe to reference a property value by indexing
+(such as `hero['name']`).
+Unfortunately, aggressive minification manipulates the `Hero` property names so that `Hero.name` and `Hero.planet`
+become something like `Hero.a` and `Hero.b`. Clearly `hero['name']` doesn't work.
+
+While some may not care to minify this aggressively,
+the Angular product shouldn't prevent anyone from minifying aggressively.
+Therefore, the Angular team decided that everything Angular provides will minify safely.
+
+The Angular team and many experienced Angular developers strongly recommend moving
+filtering and sorting logic into the component itself.
+The component can expose a `filteredHeroes` or `sortedHeroes` property and take control
+over when and how often to execute the supporting logic.
+Any capabilities that you would have put in a pipe and shared across the app can be
+written in a filtering/sorting service and injected into the component.
+
+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.
diff --git a/aio/content/guide/practical-observable-usage.md b/aio/content/guide/practical-observable-usage.md
new file mode 100644
index 000000000000..9c0f4ba4ee3d
--- /dev/null
+++ b/aio/content/guide/practical-observable-usage.md
@@ -0,0 +1,23 @@
+# Practical observable usage
+
+Here are some examples of domains in which observables are particularly useful.
+
+## Type-ahead suggestions
+
+Observables can simplify the implementation of type-ahead suggestions. Typically, a type-ahead has to do a series of separate tasks:
+
+* Listen for data from an input.
+* Trim the value (remove whitespace) and make sure it’s a minimum length.
+* Debounce (so as not to send off API requests for every keystroke, but instead wait for a break in keystrokes).
+* Don’t send a request if the value stays the same (rapidly hit a character, then backspace, for instance).
+* Cancel ongoing AJAX requests if their results will be invalidated by the updated results.
+
+Writing this in full JavaScript can be quite involved. With observables, you can use a simple series of RxJS operators:
+
+<code-example path="practical-observable-usage/src/typeahead.ts" title="Typeahead"></code-example>
+
+## Exponential backoff
+
+Exponential backoff is a technique in which you retry an API after failure, making the time in between retries longer after each consecutive failure, with a maximum number of retries after which the request is considered to have failed. This can be quite complex to implement with promises and other methods of tracking AJAX calls. With observables, it is very easy:
+
+<code-example path="practical-observable-usage/src/backoff.ts" title="Exponential backoff"></code-example>
diff --git a/aio/content/guide/providers.md b/aio/content/guide/providers.md
new file mode 100644
index 000000000000..893fca593189
--- /dev/null
+++ b/aio/content/guide/providers.md
@@ -0,0 +1,92 @@
+# Providers
+
+#### Prerequisites:
+* A basic understanding of [Bootstrapping](guide/bootstrapping).
+* Familiarity with [Frequently Used Modules](guide/frequent-ngmodules).
+
+For the final sample app using the provider that this page describes,
+see the <live-example></live-example>.
+
+<hr>
+
+A provider is an instruction to the DI system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.
+
+## Providing a service
+
+If you already have a CLI generated app, create a service using the following CLI command in the root project directory. Replace _User_ with the name of your service.
+
+```sh
+ng generate service User
+```
+
+This command creates the following `UserService` skeleton:
+
+<code-example path="providers/src/app/user.service.0.ts"  title="src/app/user.service.0.ts" linenums="false"> </code-example>
+
+You can now inject `UserService` anywhere in your application. 
+
+The service itself is a class that the CLI generated and that's decorated with `@Injectable`. By default, this decorator is configured with a `providedIn` property, which creates a provider for the service. In this case, `providedIn: 'root'` specifies that the service should be provided in the root injector.
+
+
+## Provider scope
+
+When you add a service provider to the root application injector, it’s available throughout the app. Additionally, these providers are also available to all the classes in the app as long they have the lookup token. 
+
+You should always provide your service in the root injector unless there is a case where you want the service to be available only if the consumer imports a particular `@NgModule`.
+
+## providedIn and NgModules
+
+It's also possible to specify that a service should be provided in a particular `@NgModule`. For example, if you don't want `UserService` to be available to applications unless they import a `UserModule` you've created, you can specify that the service should be provided in the module:
+
+<code-example path="providers/src/app/user.service.1.ts"  title="src/app/user.service.1.ts" linenums="false">  </code-example>
+
+The example above shows the preferred way to provide a service in a module. This method is preferred because it enables tree-shaking of the service if nothing injects it. If it's not possible to specify in the service which module should provide it, you can also declare a provider for the service within the module:
+
+<code-example path="providers/src/app/user.module.ts"  title="src/app/user.module.ts" linenums="false">  </code-example>
+
+## Limiting provider scope by lazy loading modules
+
+In the basic CLI generated app, modules are eagerly loaded which means that they are all loaded when the app launches. Angular uses an injector system to make things available between modules. In an eagerly loaded app, the root application injector makes all of the providers in all of the modules available throughout the app.
+
+This behavior necessarily changes when you use lazy loading. Lazy loading is when you load modules only when you need them; for example, when routing. They aren’t loaded right away like with eagerly loaded modules. This means that any services listed in their provider arrays aren’t available because the root injector doesn’t know about these modules.
+
+<!-- KW--Make diagram here -->
+<!-- KW--per Misko: not clear if the lazy modules are siblings or grand-children. They are both depending on router structure. -->
+When the Angular router lazy-loads a module, it creates a new injector. This injector is a child of the root application injector. Imagine a tree of injectors; there is a single root injector and then a child injector for each lazy loaded module. The router adds all of the providers from the root injector to the child injector. When the router creates a component within the lazy-loaded context, Angular prefers service instances created from these providers to the service instances of the application root injector.
+
+Any component created within a lazy loaded module’s context, such as by router navigation, gets the local instance of the service, not the instance in the root application injector. Components in external modules continue to receive the instance created for the application root.
+
+Though you can provide services by lazy loading modules, not all services can be lazy loaded. For instance, some modules only work in the root module, such as the Router. The Router works with the global location object in the browser.
+
+
+## Limiting provider scope with components
+
+Another way to limit provider scope is by adding the service you want to limit to the component’s
+`providers` array. Component providers and NgModule providers are independent of each other. This
+method is helpful for when you want to eagerly load a module that needs a service all to itself.
+Providing a service in the component limits the service only to that component (other components in
+the same module can’t access it.)
+
+<code-example path="providers/src/app/app.component.ts" region="component-providers" title="src/app/app.component.ts" linenums="false">
+</code-example>
+
+
+## Providing services in modules vs. components
+
+Generally, provide services the whole app needs in the root module and scope services by providing them in lazy loaded modules.
+
+The router works at the root level so if you put providers in a component, even `AppComponent`, lazy loaded modules, which rely on the router, can’t see them.
+
+<!-- KW--Make a diagram here -->
+Register a provider with a component when you must limit a service instance to a component and its component tree, that is, its child components. For example, a user editing component, `UserEditorComponent`, that needs a private copy of a caching `UserService` should register the `UserService` with the `UserEditorComponent`. Then each new instance of the `UserEditorComponent` gets its own cached service instance.
+
+
+<hr>
+
+## More on NgModules
+
+You may also be interested in:
+* [Singleton Services](guide/singleton-services), which elaborates on the concepts covered on this page.
+* [Lazy Loading Modules](guide/lazy-loading-ngmodules).
+* [Tree-shakable Providers](guide/dependency-injection#tree-shakable-providers).
+* [NgModule FAQ](guide/ngmodule-faq).
diff --git a/aio/content/guide/quickstart.md b/aio/content/guide/quickstart.md
new file mode 100644
index 000000000000..36ef5e056dda
--- /dev/null
+++ b/aio/content/guide/quickstart.md
@@ -0,0 +1,641 @@
+# 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.
+
+And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>
+
+<h2 id='devenv'>
+  Step 1. Set up the Development Environment
+</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.
+
+<div class="alert is-helpful">
+
+
+
+**Verify that you are running at least Node.js version `8.x` or greater and npm version `5.x` or greater**
+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 default app by running the following command:
+
+
+<code-example language="sh" class="code-shell">
+  ng new my-app
+
+</code-example>
+
+
+The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app. This can take some time.
+
+
+
+<div class="alert is-helpful">
+
+
+
+You can add pre-packaged functionality to a new project by using the `ng add` command. The `ng add` command transforms a project by applying the schematics in the specified package. 
+For more information, see the [Angular CLI documentation.](https://github.com/angular/angular-cli/wiki/add "Angular CLI documentation") 
+
+Angular Material provides schematics for typical app layouts. 
+See the [Angular Material documentation](https://material.angular.io/guides "Angular Material documentation") for details.
+
+
+</div>
+
+
+<h2 id='serve'>
+  Step 3: Serve the application
+</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.
+
+Using the `--open` (or just `-o`) option will automatically open your browser
+on `http://localhost:4200/`.
+
+Your app greets you with a message:
+
+
+<figure>
+  <img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!">
+</figure>
+
+
+
+
+<h2 id='first-component'>
+  Step 4: Edit your first Angular component
+</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`.
+
+
+Open the component file and change the `title` property from `'app'` 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>
+
+
+
+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.
+
+
+<code-example path="cli-quickstart/src/app/app.component.css" title="src/app/app.component.css" linenums="false"></code-example>
+
+
+
+<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">browserslist</div>
+    <div class="file">favicon.ico</div>
+    <div class="file">index.html</div>
+    <div class="file">karma.conf.js</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 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>
+
+      `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>
+
+      `browserslist`
+
+    </td>
+    <td>
+
+      A configuration file to share [target browsers](https://github.com/browserslist/browserslist) between different front-end tools.
+
+    </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>
+
+      `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>
+
+      `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/aot-compiler)
+      without changing any code by appending the`--aot` flag to the `ng build` and `ng serve` commands.
+
+    </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>
+  <tr>
+    <td>
+
+      `tslint.json`
+
+    </td>
+    <td>
+
+      Additional 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>
+
+### 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">src</div>
+      <div class='children'>
+        <div class="file">app.e2e-spec.ts</div>
+        <div class="file">app.po.ts</div>
+      </div>      
+      <div class="file">tsconfig.e2e.json</div>
+      <div class="file">protractor.conf.js</div>
+    </div>
+    <div class="file">node_modules/...</div>
+    <div class="file">src/...</div>
+    <div class='children'>
+      <div class="file">karma.conf.js</div>
+    </div>    
+    <div class="file">.editorconfig</div>
+    <div class="file">.gitignore</div>
+    <div class="file">angular.json</div>
+    <div class="file">package.json</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>
+
+      `.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 committed to source control.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `angular.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>
+
+      `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="alert is-helpful">
+
+### Next Step
+
+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
new file mode 100644
index 000000000000..8e7467fe0727
--- /dev/null
+++ b/aio/content/guide/reactive-forms.md
@@ -0,0 +1,682 @@
+# Reactive forms
+
+_Reactive forms_ provide a model-driven approach to handling form inputs whose values change over time. This guide shows you how to create and update a simple form control, progress to using multiple controls in a group, validate form values, and implement more advanced forms.
+
+
+
+{@a toc}
+
+Try the <live-example title="Reactive Forms in Stackblitz">Reactive Forms live-example</live-example>.
+
+{@a intro}
+
+## Introduction to reactive forms
+
+Reactive forms use an explicit and immutable approach to managing the state of a form at a given point in time. Each change to the form state returns a new state, which maintains the integrity of the model between changes. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, also while giving you synchronous access to the data. This approach allows your templates to take advantage of these streams of form state changes, rather than to be dependent to them.
+
+Reactive forms also allow for easier testing because you have an assurance that your data is consistent and predictable when requested. Consumers outside your templates have access to the same streams, where they can manipulate that data safely.
+
+Reactive forms differ from template-driven forms in distinct ways. Reactive forms provide more predictability with synchronous access to the data model, immutability with observable operators, and change tracking through observable streams. If you prefer direct access to modify data in your template, template-driven forms are less explicit because they rely on directives embedded in the template, along with mutable data to track changes asynchronously. See the [Appendix](#appendix) for detailed comparisons between the two paradigms.
+
+## Getting started
+
+This section describes the key steps to add a single form control. The example allows a user to enter their name into an input field, captures that input value, and displays the current value of the form control element.
+
+### Step 1 - Register the `ReactiveFormsModule`
+
+To use reactive forms, import `ReactiveFormsModule` from the `@angular/forms` package and add it to your NgModule's `imports` array.
+
+<code-example path="reactive-forms/src/app/app.module.ts" region="imports" title="src/app/app.module.ts (excerpt)">
+
+</code-example>
+
+### Step 2 - Import and create a new form control 
+
+Generate a component for the control.
+
+<code-example language="sh" class="code-shell">
+
+  ng generate component NameEditor
+
+</code-example>
+
+The `FormControl` is the most basic building block when using reactive forms. To register a single form control, import the `FormControl` class into your component and create a new instance of `FormControl` to save as a class property.
+
+<code-example path="reactive-forms/src/app/name-editor/name-editor.component.ts" region="create-control" title="src/app/name-editor/name-editor.component.ts">
+
+</code-example>
+
+The constructor of the `FormControl` can be used to set its initial value, which in this case is set to an empty string. By creating these controls in your component class, you get immediate access to listen, update, and validate the state of the form input. 
+
+### Step 3 - Register the control in the template
+
+After you create the control in the component class, you must associate it with a form control element in the template. Update the template with the form control using the `formControl` binding provided by the `FormControlDirective` included in the `ReactiveFormsModule`.
+
+<code-example path="reactive-forms/src/app/name-editor/name-editor.component.html" region="control-binding" linenums="false" title="src/app/name-editor/name-editor.component.html">
+
+</code-example>
+
+<div class="alert is-helpful">
+
+*Note*: For a more detailed list of classes and directives provided by the `ReactiveFormsModule`, see the [Reactive Forms API](#reactive-forms-api) section.
+
+</div>
+
+Using the template binding syntax, the form control is now registered to the `name` input element in the template. The form control and DOM element communicate with each other: the view reflects changes in the model, and the model reflects changes in the view.
+
+#### Display the component
+
+The `FormControl` assigned to `name` is displayed once the component is added to a template. 
+
+<code-example path="reactive-forms/src/app/app.component.1.html" region="app-name-editor" linenums="false" title="src/app/app.component.html (name editor)">
+
+</code-example>
+
+<figure>
+  <img src="generated/images/guide/reactive-forms/name-editor-1.png" alt="Name Editor">
+</figure>
+
+## Managing control values
+
+Reactive forms give you access to the form control state and value at a point in time. You can manipulate 
+the current state and value through the component class or the component template. The following examples display the value of a `FormControl` and change it.
+
+{@a display-value}
+
+### Display the control’s value
+
+Every `FormControl` provides its current value as an observable through the `valueChanges` property. You can listen to changes in the form’s value in the template using the `AsyncPipe` or in the component class using the `subscribe()` method. The `value` property also gives you a snapshot of the current value. 
+
+Display the current value using interpolation in the template as shown in the following example.
+
+<code-example path="reactive-forms/src/app/name-editor/name-editor.component.html" region="display-value" linenums="false" title="src/app/name-editor/name-editor.component.html (control value)">
+
+</code-example>
+
+The displayed value changes as you update the form control element.
+
+Reactive forms also provide access to more information about a given control through properties and methods provided with each instance. These properties and methods of the underlying [AbstractControl](api/forms/AbstractControl) are used to control form state and determine when to display messages when handling validation. For more information, see [Simple Form Validation](#simple-form-validation) later in this guide.
+
+Read about other `FormControl` properties and methods in the [Reactive Forms API](#reactive-forms-api) section.
+
+### Replace the form control value
+
+Reactive forms have methods to change a control's value programmatically, which gives you the flexibility to update the control’s value without user interaction. The `FormControl` provides a `setValue()` method which updates the value of the form control and validates the structure of the value provided against the control’s structure. For example, when retrieving form data from a backend API or service, use the `setValue()` method to update the control to its new value, replacing the old value entirely. 
+
+The following example adds a method to the component class to update the value of the control to _Nancy_ using the `setValue()` method.
+
+<code-example path="reactive-forms/src/app/name-editor/name-editor.component.ts" region="update-value" title="src/app/name-editor/name-editor.component.ts (update value)">
+
+</code-example>
+
+Update the template with a button to simulate a name update. Any value entered in the form control element before clicking the `Update Name` button will be reflected as its current value. 
+
+<code-example path="reactive-forms/src/app/name-editor/name-editor.component.html" region="update-value" linenums="false" title="src/app/name-editor/name-editor.component.html (update value)">
+
+</code-example>
+
+Because the form model is the source of truth for the control, when you click the button the value of the input is also changed within the component class, overriding its current value.
+
+<figure>
+  <img src="generated/images/guide/reactive-forms/name-editor-2.png" alt="Name Editor Update">
+</figure>
+
+<div class="alert is-helpful">
+
+*Note*: In this example, you are only using a single control, but when using the `setValue()` method with a `FormGroup` or `FormArray` the value needs to match the structure of the group or array.
+
+</div>
+
+## Grouping form controls
+
+Just as a `FormControl` instance gives you control over a single input field, a `FormGroup` tracks the form state of a group of `FormControl` instances (for example, a form). Each control in `FormGroup` is tracked by name when creating the `FormGroup`. The following example shows how to manage multiple `FormControl` instances in a single group.
+
+Generate a `ProfileEditor` component and import the `FormGroup` and `FormControl` classes from the `@angular/forms` package.
+
+<code-example language="sh" class="code-shell">
+
+  ng generate component ProfileEditor
+
+</code-example>
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" region="imports" title="src/app/profile-editor/profile-editor.component.ts (imports)">
+
+</code-example>
+
+### Step 1 - Create a `FormGroup`
+
+Create a property in the component class named `profileForm` and set the property to a new instance of a `FormGroup`. To initialize the `FormGroup`, provide the constructor with an object of controls with their respective names. 
+
+For the profile form, add two `FormControl` instances with the names `firstName` and `lastName`.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" region="formgroup" title="src/app/profile-editor/profile-editor.component.ts (form group)">
+
+</code-example>
+
+The individual form controls are now collected within a group. The `FormGroup` provides its model value as an object reduced from the values of each control in the group. A `FormGroup` instance has the same properties (such as `value`, `untouched`) and methods (such as `setValue()`) as a `FormControl` instance.
+
+### Step 2 - Associate the `FormGroup` model and view
+
+The `FormGroup` also tracks the status and changes of each of its controls, so if one of the control’s status or value changes, the parent control also emits a new status or value change. The model for the group is maintained from its members. After you define the model, you must  update the template to reflect the model in the view.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.1.html" region="formgroup" linenums="false" title="src/app/profile-editor/profile-editor.component.html (template form group)">
+
+</code-example>
+
+Note that just as the `FormGroup` contains a group of controls, the _profileForm_ `FormGroup` is bound to the `form` element with the `FormGroup` directive, creating a communication layer between the model and the form containing the inputs. The `formControlName` input provided by the `FormControlName` directive binds each individual input to the form control defined in the `FormGroup`. The form controls communicate with their respective elements. The also communicate changes to the `FormGroup`, which provides the source of truth for the model value.
+
+### Save form data
+
+The `ProfileEditor` component takes input from the user, but in a real scenario you want to capture the form value for further processing outside the component. The `FormGroup` directive listens for the `submit` event emitted by the `form` element and emits an `ngSubmit` event that you can bind to a callback function. 
+
+Add an `ngSubmit` event listener to the `form` tag with the `onSubmit()` callback method.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.html" region="ng-submit" linenums="false" title="src/app/profile-editor/profile-editor.component.html (submit event)">
+
+</code-example>
+
+The `onSubmit()` method in the `ProfileEditor` component captures the current value of the `profileForm`. To keep the form encapsulated, to provide the form value outside the component, use an `EventEmitter`. The following example uses `console.warn` to log to the browser console.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="on-submit" title="src/app/profile-editor/profile-editor.component.ts (submit method)">
+
+</code-example>
+
+The `submit` event is emitted by the `form` tag using the native DOM event. You trigger the event by clicking a button with `submit` type. This allows the user to use the enter key to trigger submission after filling out the form. 
+
+Add a `button` to the bottom of the form to trigger the form submission.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.html" region="submit-button" linenums="false" title="src/app/profile-editor/profile-editor.component.html (submit button)">
+
+</code-example>
+
+<div class="alert is-helpful">
+
+*Note:* The button in the snippet above also has a `disabled` binding attached to it to disable the button when the `profileForm` is invalid. You aren't performing any validation yet, so the button is always enabled. Simple form validation is covered later in the [Form Validation](#simple-form-validation) section.
+
+</div>
+
+#### Display the component
+
+The `ProileEditor` component that contains the form is displayed when added to a component template.
+
+<code-example path="reactive-forms/src/app/app.component.1.html" region="app-profile-editor" linenums="false" title="src/app/app.component.html (profile editor)">
+
+</code-example>
+
+The `ProfileEditor` allows you to manage the `FormControl` instances for the `firstName` and `lastName` controls within the `FormGroup`.
+
+<figure>
+  <img src="generated/images/guide/reactive-forms/profile-editor-1.png" alt="Profile Editor">
+</figure>
+
+## Nesting form groups
+
+When building complex forms, managing the different areas of information is easier in smaller sections, and some groups of information naturally fall into the same group. Using a nested `FormGroup` allows you to break large forms groups into smaller, more manageable ones.
+
+### Step 1 - Create a nested group
+
+An address is a good example of information that can be grouped together. A `FormGroup` can accept both `FormControl` and `FormGroup` instances as children. This makes composing complex form models easier to maintain and logically group together. To create a nested group in the `profileForm`, add a nested `address` `FormGroup`.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" region="nested-formgroup" linenums="false" title="src/app/profile-editor/profile-editor.component.ts (nested form group)">
+
+</code-example>
+
+In this example, the `address group` combines the current `firstName` and `lastName` controls with the new `street`, `city`, `state` and `zip` controls. Even though the `address` `FormGroup` is a child of the overall `profileForm` `FormGroup`, the same rules still apply with value and status changes. Changes in status and value from the nested form group will propagate up to the parent form group, maintaining consistency with the overall model.
+
+### Step 2 - Group the nested form in the template
+
+After you update the model in the component class, update the template to connect the `FormGroup` instance and its input elements.
+
+Add the `address` form group containing the `firstName` and `lastName` fields to the `ProfileEditor` template.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.1.html" region="formgroupname" linenums="false" title="src/app/profile-editor/profile-editor.component.html (template nested form group)">
+
+</code-example>
+
+The `ProfileEditor` form is displayed as one group, but the model is broken down further to represent the logical grouping areas.
+
+<figure>
+  <img src="generated/images/guide/reactive-forms/profile-editor-2.png" alt="Profile Editor Update">
+</figure>
+
+<div class="alert is-helpful">
+
+*Note*: Display the value for the `FormGroup` in the component template using the `value` property and the `JsonPipe`.
+
+</div>
+
+## Partial model updates
+
+When updating the value for a `FormGroup` that contains multiple controls, you may only want to update parts of the model instead of replacing its entire value. This section covers how to update specific parts of an `AbstractControl` model.
+
+### Patch the model value
+
+With a single control, you used the `setValue()` method to set the new value for an individual control. The `setValue()` method is more strict about adhering to the structure of the `FormGroup` and replaces the entire value for the control. The `patchValue()` method is more forgiving; it only replaces properties defined in the object that have changed in the form model, because you’re only providing partial updates. The strict checks in `setValue()` help catch errors in the nesting of complex forms, while `patchValue()` will fail silently in those cases.
+
+In the `ProfileEditorComponent`, the `updateProfile` method with the following example below to update the first name and street address for the user.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" region="patch-value" title="src/app/profile-editor/profile-editor.component.ts (patch value)">
+
+</code-example>
+
+Simulate an update by adding a button to the template to update the user profile on demand.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.1.html" region="patch-value" linenums="false" title="src/app/profile-editor/profile-editor.component.html (update value)">
+
+</code-example>
+
+When the button is clicked, the `profileForm` model is updated with just the `firstName` and `street` being modified. Notice that the `street` is provided in an object inside the `address` property. This is necessary because the `patchValue()` method applies the update against the model structure. `PatchValue()` only updates properties that the form model defines.
+
+## Generating form controls with `FormBuilder`
+
+Creating multiple form control instances manually can become very repetitive when dealing with multiple forms. The `FormBuilder` service provides convenience methods to handle generating controls. Underneath, the `FormBuilder` is creating and returning the instances in the same manner, but with much less work. The following section refactors the `ProfileEditor` component to use the `FormBuilder` instead of creating each `FormControl` and `FormGroup` by hand.
+
+### Step 1 - Import the `FormBuilder` class
+
+To use the `FormBuilder` service, import its class from the `@angular/forms` package.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" region="form-builder-imports" title="src/app/profile-editor/profile-editor.component.ts (import)">
+
+</code-example>
+
+### Step 2 - Inject the `FormBuilder` service
+
+The FormBuilder is an injectable service that is provided with the `ReactiveFormsModule`. Inject this dependency by adding it to the component constructor.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" region="inject-form-builder" title="src/app/profile-editor/profile-editor.component.ts (constructor)">
+
+</code-example>
+
+### Step 3 - Generate form controls
+
+The `FormBuilder` service has three methods: `control()`, `group()`, and `array()`. These methods are factory methods for generating form controls in your component class including a `FormControl`, `FormGroup`, and `FormArray` respectively. 
+
+Replace the creation of the `profileForm` by using the `group` method to create the controls.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" region="form-builder" title="src/app/profile-editor/profile-editor.component.ts (form builder)">
+
+</code-example>
+
+In the example above, you use the `group()` method with the same names to define the properties in the model. Here, the value for each control name is an array containing the initial value as the first item.
+
+<div class="alert is-helpful">
+
+*Note*: You can define the control with just the initial value, but if your controls need sync or async validation, add sync and async validators as the second and third items in the array.
+
+</div>
+
+Compare the two paths to achieve the same result.
+
+<code-tabs>
+
+  <code-pane path="reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" region="formgroup-compare" title="src/app/profile-editor/profile-editor.component.ts (instances)">
+  
+  </code-pane>
+
+  <code-pane path="reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" region="formgroup-compare" title="src/app/profile-editor/profile-editor.component.ts (form builder)">
+
+  </code-pane>
+
+</code-tabs>
+
+## Simple form validation
+
+Form validation is necessary when receiving user input through forms. This section covers adding a single validator to a form control and displaying the overall form status. Form validation is covered more extensively in the [Form Validation](guide/form-validation) guide.
+
+### Step 1 - Import a validator function
+
+Reactive forms include a set of validator functions out of the box for common use cases. These functions receive a control to validate against and return an error object or null based on the validation check.
+
+Import the `Validators` class from the `@angular/forms` package.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="validator-imports" title="src/app/profile-editor/profile-editor.component.ts (import)">
+
+</code-example>
+
+### Step 2 - Make a field required
+
+The most common validation is making a field required. This section describes how to add a required validation to the `firstName` control.
+
+In the `ProfileEditor` component, add the `Validators.required` static method as the second item in the array for the `firstName` control.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="required-validator" title="src/app/profile-editor/profile-editor.component.ts (required validator)">
+
+</code-example>
+
+HTML5 has a set of built-in attributes that can be used for native validation, including `required`, `minlength`, `maxlength`, and more. Although _optional_, you can take advantage of these as additional attributes on your form input elements. Add the `required` attribute to the `firstName` input element.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.html" region="required-attribute" linenums="false" title="src/app/profile-editor/profile-editor.component.html (required attribute)">
+
+</code-example>
+
+<div class="alert is-important">
+
+*Note:* These HTML5 validation attributes should be used _in combination with_ the built-in validators provided by Angular's reactive forms. Using these two validation practices in combination prevents errors about the expression being changed after the template has been checked.
+
+</div>
+
+### Display form status
+
+Now that you’ve added a required field to the form control, its initial status is invalid. This invalid status propagates to the parent `FormGroup`, making its status invalid. You have access to the current status of the `FormGroup` through the `status` property on the instance.
+
+Display the current status of the `profileForm` using interpolation.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.html" region="display-status" linenums="false" title="src/app/profile-editor/profile-editor.component.html (display status)">
+
+</code-example>
+
+<figure>
+  <img src="generated/images/guide/reactive-forms/profile-editor-3.png" alt="Profile Editor Validation">
+</figure>
+
+The submit button is disabled because the `profileForm` is invalid due to the required `firstName` form control. After you fill out the `firstName` input, the form becomes valid and the submit button is enabled.
+
+For more on form validation, visit the [Form Validation](guide/form-validation) guide.
+
+## Dynamic controls using form arrays
+
+A `FormArray` is an alternative to a `FormGroup` for managing  any number of unnamed controls. As with `FormGroup` instances, you can dynamically insert and remove controls from a `FormArray`, and the `FormArray` instance's value and validation status is calculated from its child controls. However, you don't need to define a key for each control by name, so this is a great option if you don't know the number of child values in advance. The following example shows you how to manage an array of _aliases_ in the `ProfileEditor`.
+
+### Step 1 - Import the `FormArray`
+
+Import the `FormArray` class from `@angular/forms` to use for type information. The `FormBuilder` service is ready to create a `FormArray` instance.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" region="form-array-imports" title="src/app/profile-editor/profile-editor.component.ts (import)">
+
+</code-example>
+
+### Step 2 - Define a `FormArray`
+
+You can initialize a `FormArray` with any number of controls, from zero to many, by defining them in an array. Add an `aliases` property to the `FormGroup` for the `profileForm` to define the `FormArray`.
+
+Use the `FormBuilder.array()` method to define the array, and the `FormBuilder.control()` method to populate the array with an initial control.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="aliases" title="src/app/profile-editor/profile-editor.component.ts (aliases form array)">
+
+</code-example>
+
+The _aliases_ control in the `FormGroup` is now populated with a single control until more are added dynamically.
+
+### Step 3 - Access the `FormArray` control
+
+Because a `FormArray` represents an undefined number of controls in array, accessing the control through a getter provides convenience and reusability. Use the _getter_ syntax to create an _aliases_ class property to retrieve the alias's `FormArray` control from the parent `FormGroup`.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="aliases-getter" title="src/app/profile-editor/profile-editor.component.ts (aliases getter)">
+
+</code-example>
+
+The getter provides easy access to the aliases `FormArray` instead of repeating the `profileForm.get()` method to get the instance.
+
+<div class="alert is-helpful">
+
+*Note*: Because the returned control is of type `AbstractControl`, you provide an explicit type to access the `FormArray` specific syntax for the methods.
+
+</div>
+
+Define a method to dynamically insert an alias control into the alias's `FormArray`. The `FormArray.push()` method inserts the control as a new item in the array.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="add-alias" title="src/app/profile-editor/profile-editor.component.ts (add alias)">
+
+</code-example>
+
+In the template, the controls are iterated over to display each control as a separate input field.
+
+### Step 4 - Display the form array in the template
+
+After you define the aliases `FormArray` in your model, you must add it to the template for user input. Similar to the `formGroupName` input provided by the `FormGroupNameDirective`, a `formArrayName` binds communication from the `FormArray` to the template with the `FormArrayNameDirective`. 
+
+Add the template HTML below after the closing `formGroupName` `<div>` element.
+
+<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.html" region="formarrayname" linenums="false" title="src/app/profile-editor/profile-editor.component.html (aliases form array template)">
+
+</code-example>
+
+The `*ngFor` directive iterates over each `FormControl` provided by the aliases `FormArray`. Because `FormArray` elements are unnamed, you assign the _index_ to the `i` variable and pass it to each control to bind it to the `formControlName` input. 
+
+<figure>
+  <img src="generated/images/guide/reactive-forms/profile-editor-4.png" alt="Profile Editor Aliases">
+</figure>
+
+Each time a new `alias` is added, the `FormArray` is provided its control based on the index. This allows you to track each individual control when calculating the status and value of the root control.
+
+#### Add an Alias
+
+Initially, the form only contains one `Alias` field. Click the `Add Alias` button, and another field appears. You can also validate the array of aliases reported by the form model displayed by the `Form Value` at the bottom of the template.
+
+<div class="alert is-helpful">
+
+*Note*: Instead of a `FormControl` for each alias, you could compose another `FormGroup` with additional fields. The process of defining a control for each item is the same.
+
+</div>
+
+{@a appendix}
+
+## Appendix
+
+{@a reactive-forms-api}
+
+### Reactive forms API
+
+Listed below are the base classes and services used to create and manage form controls.
+
+#### Classes
+
+<table>
+
+  <tr>
+
+    <th>
+      Class
+    </th>
+
+    <th>
+      Description
+    </th>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>AbstractControl</code>
+    </td>
+
+    <td>
+
+      The abstract base class for the three concrete form control classes; `FormControl`, `FormGroup`, and `FormArray`. It provides their common behaviors and properties.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormControl</code>
+    </td>
+
+    <td>
+
+      Manages the value and validity status of an individual form control. It corresponds to an HTML form control such as an `<input>` or `<select>`.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormGroup</code>
+    </td>
+
+    <td>
+
+      Manages 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`.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormArray</code>
+    </td>
+
+    <td>
+
+    Manages the value and validity state of a numerically indexed array of `AbstractControl` instances.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormBuilder</code>
+    </td>
+
+    <td>
+
+      An injectable service that provides factory methods for creating control instances.
+
+    </td>
+
+  </tr>  
+
+</table>
+
+When importing the `ReactiveFormsModule`, you also gain access to directives to use in your templates for binding the data model to the forms declaratively.
+
+#### Directives
+
+<table>
+
+  <tr>
+
+    <th>
+      Directive
+    </th>
+
+    <th>
+      Description
+    </th>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormControlDirective</code>
+    </td>
+
+    <td>
+
+      Syncs a standalone `FormControl` instance to a form control element.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormControlName</code>
+    </td>
+
+    <td>
+
+      Syncs a `FormControl` in an existing `FormGroup` to a form control element by name.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormGroupDirective</code>
+    </td>
+
+    <td>
+
+      Syncs an existing `FormGroup` to a DOM element.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormGroupName</code>
+    </td>
+
+    <td>
+
+      Syncs a nested `FormGroup` to a DOM element.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormArrayName</code>
+    </td>
+
+    <td>
+
+      Syncs a nested `FormArray` to a DOM element.
+
+    </td>
+
+  </tr>
+
+</table>
+
+### Comparison to template-driven forms
+
+_Template-driven_ forms, introduced in the [Template-driven forms guide](guide/forms), take a completely different approach.
+
+* 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 such as `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 push and pull data values. Angular handles that for you with `ngModel`. Angular updates the mutable _data model_ with user changes as they happen.
+
+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.
+
+
+{@a async-vs-sync}
+
+
+### Async vs. sync
+
+Reactive forms are synchronous, and template-driven forms are asynchronous.
+
+In reactive forms, you create the entire form control tree in code.
+You can immediately update a value or drill down through the descendants 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,
+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.
+
+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
+extract a value from a control, test its validity, or set it to a new value.
+
+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.
+
diff --git a/aio/content/guide/releases.md b/aio/content/guide/releases.md
new file mode 100644
index 000000000000..9e09cd8d9efd
--- /dev/null
+++ b/aio/content/guide/releases.md
@@ -0,0 +1,168 @@
+# Angular versioning and releases
+
+We recognize that you need stability from the Angular framework. Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Angular to thrive.
+
+We also share with you the desire for Angular to keep evolving. We strive to ensure that the foundation on top of which you are building is continuously improving and enabling you to stay up-to-date with the rest of the web ecosystem and your user needs.
+
+This document contains the practices that we follow to provide you with a leading-edge app development platform, balanced with stability. We strive to ensure that future changes are always introduced in a predictable way. We want everyone who depends on Angular to know when and how new features are added, and to be well-prepared when obsolete ones are removed.
+
+See [Updating your projects](guide/updating "Updating your projects") for information about how to update your apps and libraries to the latest version of Angular.
+
+<div class="alert is-helpful">
+
+The practices described in this document apply to Angular 2.0 and later. If you are currently using AngularJS, see [Upgrading from AngularJS](guide/upgrade "Upgrading from Angular JS"). _AngularJS_ is the name for all v1.x versions of Angular.
+
+</div>
+
+
+{@a angular-versioning}
+## Angular versioning
+
+Angular version numbers indicate the level of changes that are introduced by the release. This use of [semantic versioning](https://semver.org/ "Semantic Versioning Specification") helps you understand the potential impact of updating to a new version. 
+
+Angular version numbers have three parts: `major.minor.patch`. For example, version 5.2.9 indicates major version 5, minor version 2, and patch version 9. 
+
+The version number is incremented based on the level of change included in the release. 
+
+* Major releases contain significant new features, some but minimal developer assistance is expected during the update. When updating to a new major release, you may need to run update scripts, refactor code, run additional tests, and learn new APIs. 
+
+* Minor releases contain new smaller features. Minor releases are fully backward-compatible; no developer assistance is expected during update, but you can optionally modify your apps and libraries to begin using new APIs, features, and capabilities that were added in the release. We update peer dependencies in minor versions by expanding the supported versions, but we do not require projects to update these dependencies. 
+
+* Patch releases are low risk, bug fix releases. No developer assistance is expected during update.
+
+If you are updating within the same major version, then you can skip any intermediate versions and update directly to the targeted version. For example, if you want to update from 5.0.0 to 5.2.9, then you can update directly; you do not need to update from 5.0.0 to 5.1.0 before updating to 5.2.9. 
+
+If you are updating from one major version to another, then we recommend that you don't skip major versions. Follow the instructions to incrementally update to the next major version, testing and validating at each step. For example, if you want to update from version 4.x.x to version 6.x.x, we recommend that you update to the latest 5.x.x release first. After successfully updating to 5.x.x, you can then update to 6.x.x. 
+
+Pre-release previews&mdash;such as Beta and Release Candidate versions&mdash;are indicated by appending a dash and a beta or rc identifier, such as version 5.2.9-rc.3.
+
+{@a frequency}
+## Release frequency
+
+We work toward a regular schedule of releases, so that you can plan and coordinate your updates with the continuing evolution of Angular.
+
+In general, you can expect the following release cycle:
+
+* A major release every 6 months
+
+* 1-3 minor releases for each major release
+
+* A patch release almost every week
+
+We bake quality into our releases&mdash;and let you preview what's coming next&mdash;by providing Beta releases and release candidates (RCs) for each major and minor release.
+
+This cadence of releases gives you access to new beta features as soon as they are ready, while maintaining the stability and reliability of the platform for production users.
+
+
+{@a schedule}
+## Release schedule
+
+<div class="alert is-helpful">
+
+Disclaimer: The dates are offered as general guidance and may be adjusted by us when necessary to ensure delivery of a high-quality platform. 
+
+</div>
+
+The following table contains our current target release dates for the next two major versions of Angular: 
+
+ Date                   | Stable Release | Compatibility
+ ---------------------- | -------------- | ----------------
+ September/October 2018 | 7.0.0          | ^6.0.0
+ March/April 2019       | 8.0.0          | ^7.0.0
+
+ Compatiblity note: 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.
+
+
+{@a lts}
+{@a support}
+## Support policy
+
+All of our major releases are supported for 18 months. 
+
+* 6 months of active support, during which regularly-scheduled updates and patches are released, as described above in [Release frequency](#frequency "Release frequency").
+
+* 12 months of long-term support (LTS). During the LTS period, only critical fixes and security patches will be released.
+
+The following table provides the support status and key dates for Angular version 4.0.0 and higher. 
+
+<style>
+
+    td, th {vertical-align: top}
+
+</style>
+
+<table>
+
+    <tr>
+        <th>Version</th>
+        <th>Status</th>
+        <th>Release Date</th>
+        <th>LTS Start Date</th>
+        <th>LTS End Date</th>
+    </tr>
+
+    <tr>
+        <td>^4.0.0</td>
+        <td>LTS</td>
+        <td>March 23, 2017</td>
+        <td>September 23, 2017</td>
+        <td>September 23, 2018</td>
+    </tr>
+
+    <tr>
+        <td>^5.0.0</td>
+        <td>LTS</td>
+        <td>November 1, 2017</td>
+        <td>May 1, 2018</td>
+        <td>May 1, 2019</td>
+    </tr>
+
+    <tr>
+        <td>^6.0.0</td>
+        <td>Active</td>
+        <td>May 3, 2018</td>
+        <td>November 3, 2018</td>
+        <td>November 3, 2019</td>
+    </tr>
+
+</table>
+
+
+
+{@a deprecation}
+## Deprecation practices
+
+Sometimes &quot;breaking changes&quot;, such as the removal of support for select APIs and features, are necessary to innovate and stay current with new best practices, changing dependencies, or changes in the (web) platform itself. 
+
+To make these transitions as easy as possible, we make two commitments to you:
+
+* We work hard to minimize the number of breaking changes and to provide migration tools when possible. 
+
+* We follow the deprecation policy described here, so you have time to update your apps to the latest APIs and best practices.
+
+To help ensure that you have sufficient time and a clear path to update, this is our deprecation policy:
+
+* We announce deprecated features in the [change log](https://github.com/angular/angular/blob/master/CHANGELOG.md "Angular change log").
+
+* When we announce a deprecation, we also announce a recommended update path.
+
+* We support existing use of a stable API during the deprecation period, so  your code will keep working during that period. 
+
+* We support each deprecated API for at least two subsequent major releases, which means at least 12 months after deprecation.
+
+* We only make peer dependency updates that require changes to your apps in a major release. In minor releases, we update peer dependencies by expanding the supported versions, but we do not require projects to update these dependencies until a future major version. 
+
+
+{@a public-api}
+## Public API surface
+
+Angular is a collection of many packages, sub-projects, and tools. To prevent accidental use of private APIs&mdash;and so that you can clearly understand what is covered by the practices described here&mdash;we document what is and is not considered our public API surface. For details, see [Supported Public API Surface of Angular](https://github.com/angular/angular/blob/master/docs/PUBLIC_API.md "Supported Public API Surface of Angular").
+
+Any changes to the public API surface will be done using the versioning, support, and depreciation policies describe above.
+
+{@a labs}
+## Angular Labs
+
+Angular Labs is an initiative to cultivate new features and iterate on them quickly. Angular Labs provides a safe place for exploration and experimentation by the Angular team.
+
+Angular Labs projects are not ready for production use, and no commitment is made to bring them to production. The policies and practices that are described in this document do not apply to Angular Labs projects.
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md
new file mode 100644
index 000000000000..0ecd1c81515f
--- /dev/null
+++ b/aio/content/guide/router.md
@@ -0,0 +1,4273 @@
+# Routing & Navigation
+
+The Angular **`Router`** enables navigation from one [view](guide/glossary#view) to the next
+as users perform application tasks.
+
+This guide covers the router's primary features, illustrating them through the evolution
+of a small application that you can <live-example>run live in the browser</live-example>.
+
+<!-- style for all tables on this page -->
+<style>
+  td, th {vertical-align: top}
+</style>
+
+
+## Overview
+
+The browser is a familiar model of application navigation:
+
+* Enter a URL in the address bar and the browser navigates to a corresponding page.
+* Click links on the page and the browser navigates to a new page.
+* Click the browser's back and forward buttons and the browser navigates
+  backward and forward through the history of pages you've seen.
+
+The Angular `Router` ("the router") borrows from this model.
+It can interpret a browser URL as an instruction to navigate to a client-generated view.
+It can pass optional parameters along to the supporting view component that help it decide what specific content to present.
+You can bind the router to links on a page and it will navigate to
+the appropriate application view when the user clicks a link.
+You can navigate imperatively when the user clicks a button, selects from a drop box,
+or in response to some other stimulus from any source. And the router logs activity
+in the browser's history journal so the back and forward buttons work as well.
+
+{@a basics}
+
+
+## The Basics
+
+This guide proceeds in phases, marked by milestones, starting from a simple two-pager
+and building toward a modular, multi-view design with child routes.
+
+An introduction to a few core router concepts will help orient you to the details that follow.
+
+
+{@a basics-base-href}
+
+
+### *&lt;base href>*
+
+Most routing applications should add a `<base>` element to the `index.html` as the first child in the  `<head>` tag
+to tell the router how to compose navigation URLs.
+
+If the `app` folder is the application root, as it is for the sample application,
+set the `href` value *exactly* as shown here.
+
+
+<code-example path="router/src/index.html" linenums="false" title="src/index.html (base-href)" region="base-href">
+
+</code-example>
+
+
+
+{@a basics-router-imports}
+
+
+### Router imports
+
+The Angular Router is an optional service that presents a particular component view for a given URL.
+It is not part of the Angular core. It is in its own library package, `@angular/router`.
+Import what you need from it as you would from any other Angular package.
+
+
+<code-example path="router/src/app/app.module.1.ts" linenums="false" title="src/app/app.module.ts (import)" region="import-router">
+
+</code-example>
+
+
+
+<div class="alert is-helpful">
+
+
+
+You'll learn about more options in the [details below](#browser-url-styles).
+
+
+</div>
+
+
+
+{@a basics-config}
+
+
+### Configuration
+
+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.
+
+A router has no routes until you configure it.
+The following example creates four route definitions, configures the router via the `RouterModule.forRoot` method,
+and adds the result to the `AppModule`'s `imports` array.
+
+
+<code-example path="router/src/app/app.module.0.ts" linenums="false" title="src/app/app.module.ts (excerpt)">
+
+</code-example>
+
+
+
+{@a example-config}
+
+
+The `appRoutes` array of *routes* describes how to navigate.
+Pass it to the `RouterModule.forRoot` method in the module `imports` to configure the router.
+
+Each `Route` maps a URL `path` to a component.
+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.
+
+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.
+
+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](#resolve-guard) to retrieve _dynamic_ data later in the guide.
+
+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`.
+
+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.
+This is useful for displaying a "404 - Not Found" page or redirecting to another route.
+
+**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.
+In the configuration above, routes with a static path are listed first, followed by an empty path 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.
+
+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}
+
+
+### Router outlet
+
+Given this configuration, when the browser URL for this application becomes `/heroes`,
+the router matches that URL to the route path `/heroes` and displays the `HeroListComponent`
+_after_ a `RouterOutlet` that you've placed in the host view's HTML.
+
+
+<code-example language="html">
+  &lt;router-outlet>&lt;/router-outlet>
+  &lt;!-- Routed views go here -->
+
+</code-example>
+
+
+
+{@a basics-router-links}
+
+
+### Router links
+
+Now you have routes configured and a place to render them, but
+how do you navigate? The URL could arrive directly from the browser address bar.
+But most of the time you navigate as a result of some user action such as the click of
+an anchor tag.
+
+Consider the following template:
+
+
+<code-example path="router/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (template)" region="template">
+
+</code-example>
+
+
+
+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).
+
+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_).
+The router resolves that array into a complete 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.
+You can add this directive to the anchor or to its parent element.
+
+
+{@a basics-router-state}
+
+
+### Router state
+
+After the end of each successful navigation lifecycle, the router builds a tree of `ActivatedRoute` objects
+that make up the current state of the router. You can access the current `RouterState` from anywhere in the
+application using the `Router` service and the `routerState` property.
+
+Each `ActivatedRoute` in the `RouterState` provides methods to traverse up and down the route tree
+to get information from parent, child and sibling routes.
+
+{@a activated-route}
+
+
+### Activated route
+
+The route path and parameters are available through an injected router service called the
+[ActivatedRoute](api/router/ActivatedRoute).
+It has a great deal of useful information including:
+
+<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="alert is-helpful">
+
+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.
+
+**`queryParams`**&mdash;An `Observable` that contains the [query parameters](#query-parameters) available to all routes.
+Use `queryParamMap` instead.
+
+</div>
+
+### 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}
+
+
+### Summary
+
+The application has a configured router.
+The shell component has a `RouterOutlet` where it can display views produced by the router.
+It has `RouterLink`s that users can click to navigate via the router.
+
+Here are the key `Router` terms and their meanings:
+
+<table>
+
+  <tr>
+
+    <th>
+      Router Part
+    </th>
+
+    <th>
+      Meaning
+    </th>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>Router</code>
+    </td>
+
+    <td>
+      Displays the application component for the active URL.
+      Manages navigation from one component to the next.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>RouterModule</code>
+    </td>
+
+    <td>
+      A separate NgModule that provides the necessary service providers
+      and directives for navigating through application views.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>Routes</code>
+    </td>
+
+    <td>
+      Defines an array of Routes, each mapping a URL path to a component.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>Route</code>
+    </td>
+
+    <td>
+      Defines how the router should navigate to a component based on a URL pattern.
+      Most routes consist of a path and a component type.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>RouterOutlet</code>
+    </td>
+
+    <td>
+      The directive (<code>&lt;router-outlet></code>) that marks where the router displays a view.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>RouterLink</code>
+    </td>
+
+    <td>
+      The directive for binding a clickable HTML element to
+      a route. Clicking an element with a <code>routerLink</code> directive
+      that is bound to a <i>string</i> or a <i>link parameters array</i> triggers a navigation.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>RouterLinkActive</code>
+    </td>
+
+    <td>
+      The directive for adding/removing classes from an HTML element when an associated
+      <code>routerLink</code> contained on or inside the element becomes active/inactive.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>ActivatedRoute</code>
+    </td>
+
+    <td>
+      A service that is provided to each route component that contains route specific
+      information such as route parameters, static data, resolve data, global query params, and the global fragment.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>RouterState</code>
+    </td>
+
+    <td>
+      The current state of the router including a tree of the currently activated
+      routes together with convenience methods for traversing the route tree.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <b><i>Link parameters array</i></b>
+    </td>
+
+    <td>
+      An array that the router interprets as a routing instruction.
+      You can bind that array to a <code>RouterLink</code> or pass the array as an argument to
+      the <code>Router.navigate</code> method.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <b><i>Routing component</i></b>
+    </td>
+
+    <td>
+      An Angular component with a <code>RouterOutlet</code> that displays views based on router navigations.
+    </td>
+
+  </tr>
+
+</table>
+
+
+
+
+{@a sample-app-intro}
+
+
+## The sample application
+
+This guide describes development of a multi-page routed sample application.
+Along the way, it highlights design decisions and describes key features of the router such as:
+
+* Organizing the application features into modules.
+* Navigating to a component (*Heroes* link to "Heroes List").
+* Including a route parameter (passing the Hero `id` while routing to the "Hero Detail").
+* Child routes (the *Crisis Center* has its own routes).
+* The `CanActivate` guard (checking route access).
+* The `CanActivateChild` guard (checking child route access).
+* The `CanDeactivate` guard (ask permission to discard unsaved changes).
+* The `Resolve` guard (pre-fetching route data).
+* Lazy loading feature modules.
+* The `CanLoad` guard (check before loading feature module assets).
+
+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.
+
+The full source for the final version of the app can be seen and downloaded from the <live-example></live-example>.
+
+
+### The sample application in action
+
+Imagine an application that helps the _Hero Employment Agency_ run its business.
+Heroes need work and the agency finds crises for them to solve.
+
+The application has three main feature areas:
+
+1. A *Crisis Center* for maintaining the list of crises for assignment to heroes.
+1. A *Heroes* area for maintaining the list of heroes employed by the agency.
+1. An *Admin* area to manage the list of crises and heroes.
+
+Try it by clicking on this <live-example title="Hero Employment Agency Live Example">live example link</live-example>.
+
+Once the app warms up, you'll see a row of navigation buttons
+and the *Heroes* view with its list of heroes.
+
+
+<figure>
+  <img src='generated/images/guide/router/hero-list.png' alt="Hero List">
+</figure>
+
+
+
+Select one hero and the app takes you to a hero editing screen.
+
+<figure>
+  <img src='generated/images/guide/router/hero-detail.png' alt="Crisis Center Detail">
+</figure>
+
+
+
+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.
+
+Had you clicked the browser's back button instead of the "Back" button,
+the app would have returned you to the heroes list as well.
+Angular app navigation updates the browser history as normal web navigation does.
+
+Now click the *Crisis Center* link for a list of ongoing crises.
+
+
+<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.
+
+Alter the name of a crisis.
+Notice that the corresponding name in the crisis list does _not_ change.
+
+
+<figure>
+  <img src='generated/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail">
+</figure>
+
+
+
+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.
+
+***Do not click either button yet***.
+Click the browser back button or the "Heroes" link instead.
+
+Up pops a dialog box.
+
+
+<figure>
+  <img src='generated/images/guide/router/confirm-dialog.png' alt="Confirm Dialog">
+</figure>
+
+
+
+You can say "OK" and lose your changes or click "Cancel" and continue editing.
+
+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.
+
+The `Admin` and `Login` buttons illustrate other router capabilities to be covered later in the guide.
+This short introduction will do for now.
+
+Proceed to the first application milestone.
+
+{@a getting-started}
+
+## Milestone 1: Getting started with the router
+
+Begin with a simple version of the app that navigates between two empty views.
+
+<figure>
+  <img src='generated/images/guide/router/router-1-anim.gif' alt="App in action">
+</figure>
+
+
+
+{@a base-href}
+
+
+### Set the *&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" 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.
+
+Modern HTML5 browsers were the first to support `pushState` which is why many people refer to these URLs as
+"HTML5 style" URLs.
+
+
+<div class="alert is-helpful">
+
+
+
+HTML5 style navigation is the router default.
+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.
+
+
+</div>
+
+
+
+You must **add 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.
+
+Add the `<base>` element just after the  `<head>` tag.
+If the `app` folder is the application root, as it is for this application,
+set the `href` value in **`index.html`** *exactly* as shown here.
+
+
+<code-example path="router/src/index.html" linenums="false" title="src/index.html (base-href)" region="base-href">
+
+</code-example>
+
+
+
+<div class="callout is-important">
+
+
+
+<header>
+  Live example note
+</header>
+
+
+
+A live coding environment like Stackblitz sets the application base address dynamically so you can't specify a fixed address.
+That's why the example code replaces the `<base href...>` with a script that writes the `<base>` tag on the fly.
+
+
+<code-example language="html">
+  &lt;script>document.write('&lt;base href="' + document.location + '" />');&lt;/script>
+
+</code-example>
+
+
+
+You only need this trick for the live example, not production code.
+
+
+</div>
+
+
+
+{@a import}
+
+
+### Importing from the router library
+
+Begin by importing some symbols from the router library.
+The Router is in its own `@angular/router` package.
+It's not part of the Angular core. The router is an optional service because not all applications
+need routing and, depending on your requirements, you may need a different routing library.
+
+You teach the router how to navigate by configuring it with routes.
+
+
+{@a route-config}
+
+
+#### Define routes
+
+A router must be configured with a list of route definitions.
+
+The first configuration defines an array of two routes with simple paths leading to the
+`CrisisListComponent` and `HeroListComponent`.
+
+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.
+
+The router draws upon its registry of definitions when the browser URL changes
+or when application code tells the router to navigate along a route path.
+
+In simpler terms, you might say this of the first route:
+
+* When the browser's location URL changes to match the path segment `/crisis-center`, then
+the router activates an instance of the `CrisisListComponent` and displays its view.
+
+* When the application requests navigation to the path `/crisis-center`, the router
+activates an instance of `CrisisListComponent`, displays its view, and updates the
+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.
+Once the application is bootstrapped, the `Router` performs the initial navigation based on the current browser URL.
+
+
+<code-example path="router/src/app/app.module.1.ts" linenums="false" title="src/app/app.module.ts (first-config)" region="first-config">
+
+</code-example>
+
+
+
+<div class="alert is-helpful">
+
+
+
+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](#routing-module)**, a special type of `Service Module` dedicated to the purpose
+of routing in feature modules.
+
+
+</div>
+
+
+
+Providing the `RouterModule` in the `AppModule` makes the Router available everywhere in the application.
+
+
+{@a shell}
+
+
+### The *AppComponent* shell
+
+The root `AppComponent` is the application shell. It has a title, a navigation bar with two links,
+and a *router outlet* where the router swaps views on and off the page. Here's what you get:
+
+
+<figure>
+  <img src='generated/images/guide/router/shell-and-outlet.png' alt="Shell">
+</figure>
+
+
+
+{@a shell-template}
+
+
+The corresponding component template looks like this:
+
+
+<code-example path="router/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (template)" region="template">
+
+</code-example>
+
+
+
+{@a router-outlet}
+
+
+### *RouterOutlet*
+
+The `RouterOutlet` is a directive from the router library that marks
+the spot in the template where the router should display the views for that outlet.
+
+
+<div class="alert is-helpful">
+
+
+
+The router adds the `<router-outlet>` element to the DOM
+and subsequently inserts the navigated view element
+immediately _after_ the `<router-outlet>`.
+
+
+</div>
+
+
+
+{@a router-link}
+
+
+### *RouterLink* binding
+
+Above the outlet, within the anchor tags, you see
+[attribute bindings](guide/template-syntax#attribute-binding) to
+the `RouterLink` directive that look like `routerLink="..."`.
+
+The links in this example each have a string path, the path of a route that
+you configured earlier. There are no route parameters yet.
+
+You can also add more contextual information to the `RouterLink` by providing query string parameters
+or a URL fragment for jumping to different areas on the page. Query string parameters
+are provided through the `[queryParams]` binding which takes an object (e.g. `{ name: 'value' }`), while the URL fragment
+takes a single value bound to the `[fragment]` input binding.
+
+<div class="alert is-helpful">
+
+
+
+Learn about the how you can also use the _link parameters array_ in the [appendix below](#link-parameters-array).
+
+
+</div>
+
+
+
+{@a router-link-active}
+
+
+### *RouterLinkActive* binding
+
+On each anchor tag, you also see [property bindings](guide/template-syntax#property-binding) to
+the `RouterLinkActive` directive that look like `routerLinkActive="..."`.
+
+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'"`
+or bind it to a component property that returns such a string.
+
+The `RouterLinkActive` directive toggles css classes for active `RouterLink`s based on the current `RouterState`.
+This cascades down through each level of the route tree, so parent and child router links can be active at the same time.
+To override this behavior, you can bind to the `[routerLinkActiveOptions]` input binding with the `{ exact: true }` expression.
+By using `{ exact: true }`, a given `RouterLink` will only be active if its URL is an exact match to the current URL.
+
+
+{@a router-directives}
+
+
+### *Router directives*
+
+`RouterLink`, `RouterLinkActive` and `RouterOutlet` are directives provided by the Angular `RouterModule` package.
+They are readily available for you to use in the template.
+
+The current state of `app.component.ts` looks like this:
+
+
+<code-example path="router/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (excerpt)">
+
+</code-example>
+
+
+
+{@a wildcard}
+
+
+### Wildcard route
+
+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.
+
+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](#redirect) to an existing route.
+
+
+<div class="alert is-helpful">
+
+
+
+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.
+
+
+</div>
+
+
+
+To test this feature, add a button with a `RouterLink` to the `HeroListComponent` template and set the link to `"/sidekicks"`.
+
+<code-example path="router/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (excerpt)">
+
+</code-example>
+
+
+
+The application will fail if the user clicks that button because you haven't defined a `"/sidekicks"` route yet.
+
+Instead of adding the `"/sidekicks"` route, define a `wildcard` route instead and have it navigate to a simple `PageNotFoundComponent`.
+
+<code-example path="router/src/app/app.module.1.ts" linenums="false" title="src/app/app.module.ts (wildcard)" region="wildcard">
+
+</code-example>
+
+
+
+Create the `PageNotFoundComponent` to display when users visit invalid URLs.
+
+<code-example path="router/src/app/not-found.component.ts" linenums="false" title="src/app/not-found.component.ts (404 component)">
+
+</code-example>
+
+
+
+As with the other components, add the `PageNotFoundComponent` to the `AppModule` declarations.
+
+Now when the user visits `/sidekicks`, or any other invalid URL, the browser displays "Page not found".
+The browser address bar continues to point to the invalid URL.
+
+
+
+{@a default-route}
+
+
+### The _default_ route to heroes
+
+When the application launches, the initial URL in the browser bar is something like:
+
+<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`.
+
+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
+
+The preferred solution is to add a `redirect` route that translates the initial relative URL (`''`)
+to the desired default path (`/heroes`). The browser address bar shows `.../heroes` as if you'd navigated there directly.
+
+Add the default route somewhere _above_ the wildcard route.
+It's just above the wildcard route in the following excerpt showing the complete `appRoutes` for this milestone.
+
+
+<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>
+
+
+
+A redirect route requires a `pathMatch` property to tell the router how to match a URL to the path of a route.
+The router throws an error if you don't.
+In this app, the router should select the route to the `HeroListComponent` only when the *entire URL* matches `''`,
+so set the `pathMatch` value to `'full'`.
+
+
+<div class="alert is-helpful">
+
+
+
+Technically, `pathMatch = 'full'` results in a route hit when the *remaining*, unmatched segments of the URL match `''`.
+In this example, the redirect is in a top level route so the *remaining* URL and the *entire* URL are the same thing.
+
+The other possible `pathMatch` value is `'prefix'` which tells the router
+to match the redirect route when the *remaining* URL ***begins*** with the redirect route's _prefix_ path.
+
+Don't do that here.
+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.
+You're instantly re-routed to `/heroes`.
+_Every_ URL, good or bad, that falls through to _this_ route definition
+will be a match.
+
+The default route should redirect to the `HeroListComponent` _only_ when the _entire_ url is  `''`.
+Remember to restore the redirect to `pathMatch = 'full'`.
+
+Learn more in Victor Savkin's
+[post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
+
+
+</div>
+
+
+
+### Basics wrap up
+
+You've got a very basic navigating app, one that can switch between two views
+when the user clicks a link.
+
+You've learned how to do the following:
+
+* Load the router library.
+* Add a nav bar to the shell template with anchor tags, `routerLink`  and `routerLinkActive` directives.
+* Add a `router-outlet` to the shell template where views will be displayed.
+* Configure the router module with `RouterModule.forRoot`.
+* Set the router to compose HTML5 browser URLs.
+* handle invalid routes with a `wildcard` route.
+* navigate to the default route when the app launches with an empty path.
+
+The rest of the starter app is mundane, with little interest from a router perspective.
+Here are the details for readers inclined to build the sample through to this milestone.
+
+The starter app's structure looks like this:
+
+
+<div class='filetree'>
+
+  <div class='file'>
+    router-sample
+  </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 class='file'>
+          crisis-list.component.ts
+        </div>
+
+        <div class='file'>
+          hero-list.component.ts
+        </div>
+
+        <div class='file'>
+          not-found.component.ts
+        </div>
+
+      </div>
+
+      <div class='file'>
+        main.ts
+      </div>
+
+      <div class='file'>
+        index.html
+      </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 are the files discussed in this milestone.
+
+
+<code-tabs>
+
+  <code-pane title="app.component.ts" path="router/src/app/app.component.1.ts">
+
+  </code-pane>
+
+  <code-pane title="app.module.ts" path="router/src/app/app.module.1.ts">
+
+  </code-pane>
+
+  <code-pane title="main.ts" path="router/src/main.ts">
+
+  </code-pane>
+
+  <code-pane title="hero-list.component.ts" path="router/src/app/hero-list.component.ts">
+
+  </code-pane>
+
+  <code-pane title="crisis-list.component.ts" path="router/src/app/crisis-list.component.ts">
+
+  </code-pane>
+
+  <code-pane title="not-found.component.ts" path="router/src/app/not-found.component.ts">
+
+  </code-pane>
+
+  <code-pane title="index.html" path="router/src/index.html">
+
+  </code-pane>
+
+</code-tabs>
+
+
+{@a routing-module}
+
+## Milestone 2: *Routing module*
+
+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.
+We recommend moving the routing information into a special-purpose module called a *Routing Module*.
+
+The **Routing Module** has several characteristics:
+
+* Separates routing concerns from other application concerns.
+* Provides a module to replace or remove when testing the application.
+* Provides a well-known location for routing service providers including guards and resolvers.
+* Does **not** declare components.
+
+
+{@a routing-refactor}
+
+
+### Refactor the routing configuration into a _routing module_
+
+Create a file named `app-routing.module.ts` in the `/app` folder to contain the routing module.
+
+Import the `CrisisListComponent` and the `HeroListComponent` components
+just like you did in the `app.module.ts`. Then move the `Router` imports
+and routing configuration, including `RouterModule.forRoot`, into this routing module.
+
+Following convention, add a class name `AppRoutingModule` and export it
+so you can import it later in `AppModule`.
+
+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`.
+
+After these steps, the file should look like this.
+
+<code-example path="router/src/app/app-routing.module.1.ts" title="src/app/app-routing.module.ts">
+
+</code-example>
+
+
+
+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`.
+
+<code-example path="router/src/app/app.module.2.ts" title="src/app/app.module.ts">
+
+</code-example>
+
+
+
+<div class="alert is-helpful">
+
+
+
+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).
+
+
+</div>
+
+
+
+The application continues to work just the same, and you can use `AppRoutingModule` as
+the central place to maintain future routing configuration.
+
+
+{@a why-routing-module}
+
+
+### Do you need a _Routing Module_?
+
+The _Routing Module_ *replaces* the routing configuration in the root or feature module.
+_Either_ configure routes in the Routing Module _or_ within the module itself but not in both.
+
+The Routing Module is a design choice whose value is most obvious when the configuration is complex
+and includes specialized guard and resolver services.
+It can seem like overkill when the actual configuration is dead simple.
+
+Some developers skip the Routing Module (for example, `AppRoutingModule`) when the configuration is simple and
+merge the routing configuration directly into the companion module (for example, `AppModule`).
+
+Choose one pattern or the other and follow that pattern consistently.
+
+Most developers should always implement a Routing Module for the sake of consistency.
+It keeps the code clean when configuration becomes complex.
+It makes testing the feature module easier.
+Its existence calls attention to the fact that a module is routed.
+It is where developers expect to find and expand routing configuration.
+
+{@a heroes-feature}
+
+## Milestone 3: Heroes feature
+
+You've seen how to navigate using the `RouterLink` directive.
+Now you'll learn the following:
+
+* Organize the app and routes into *feature areas* using modules.
+* Navigate imperatively from one component to another.
+* Pass required and optional information in route parameters.
+
+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-pt4" title="Tour of Heroes: Services example code"></live-example>.
+
+Here's how the user will experience this version of the app:
+
+
+<figure>
+  <img src='generated/images/guide/router/router-2-anim.gif' alt="App in action">
+</figure>
+
+
+
+A typical application has multiple *feature areas*,
+each dedicated to a particular business purpose.
+
+While you could continue to add files to the `src/app/` folder,
+that is unrealistic and ultimately not maintainable.
+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.
+
+
+{@a heroes-functionality}
+
+
+### Add heroes functionality
+
+Follow these steps:
+
+* Create the `src/app/heroes` folder; you'll be adding files implementing *hero management* there.
+* Delete the placeholder `hero-list.component.ts` that's in the `app` folder.
+* Create a new `hero-list.component.ts` under `src/app/heroes`.
+* Copy into it the contents of the `app.component.ts` from
+  the <live-example name="toh-pt4" title="Tour of Heroes: Services example code">"Services" tutorial</live-example>.
+* Make a few minor but necessary changes:
+
+  * Delete the `selector` (routed components don't need them).
+  * Delete the `<h1>`.
+  * Relabel the `<h2>` to `<h2>HEROES</h2>`.
+  * Delete the `<hero-detail>` at the bottom of the template.
+  * Rename the `AppComponent` class to `HeroListComponent`.
+
+* Copy the `hero-detail.component.ts` and the `hero.service.ts` files into the `heroes` subfolder.
+* Create a (pre-routing) `heroes.module.ts` in the heroes folder that looks like this:
+
+
+<code-example path="router/src/app/heroes/heroes.module.ts" region="v1" title="src/app/heroes/heroes.module.ts (pre-routing)">
+
+</code-example>
+
+
+
+When you're done, you'll have these *hero management* files:
+
+
+<div class='filetree'>
+
+  <div class='file'>
+    src/app/heroes
+  </div>
+
+  <div class='children'>
+
+    <div class='file'>
+      hero-detail.component.ts
+    </div>
+
+    <div class='file'>
+      hero-list.component.ts
+    </div>
+
+    <div class='file'>
+      hero.service.ts
+    </div>
+
+    <div class='file'>
+      heroes.module.ts
+    </div>
+
+  </div>
+
+</div>
+
+
+
+{@a hero-routing-requirements}
+
+
+### *Hero* feature routing requirements
+
+The heroes feature has two interacting components, the hero list and the hero detail.
+The list view is self-sufficient; you navigate to it, it gets a list of heroes and displays them.
+
+The detail view is different. It displays a particular hero. It can't know which hero to show on its own.
+That information must come from outside.
+
+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.
+
+
+{@a hero-routing-module}
+
+
+### *Hero* feature route configuration
+
+Create a new `heroes-routing.module.ts` in the `heroes` folder
+using the same techniques you learned while creating the `AppRoutingModule`.
+
+
+<code-example path="router/src/app/heroes/heroes-routing.module.1.ts" title="src/app/heroes/heroes-routing.module.ts">
+
+</code-example>
+
+
+
+<div class="alert is-helpful">
+
+
+
+Put the routing module file in the same folder as its companion module file.
+Here both `heroes-routing.module.ts` and `heroes.module.ts` are in the same `src/app/heroes` folder.
+
+Consider giving each feature module its own route configuration file.
+It may seem like overkill early when the feature routes are simple.
+But routes have a tendency to grow more complex and consistency in patterns pays off over time.
+
+
+</div>
+
+
+
+Import the hero components from their new locations in the `src/app/heroes/` folder, define the two hero routes,
+and export the `HeroRoutingModule` class.
+
+Now that you have routes for the `Heroes` module, register them with the `Router` via the
+`RouterModule` _almost_ as you did in the `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 a feature module you use the static **`forChild`** method.
+
+
+<div class="alert is-helpful">
+
+
+
+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.
+
+</div>
+
+
+
+{@a adding-routing-module}
+
+
+### Add the routing module to the _HeroesModule_
+Add the `HeroRoutingModule` to the `HeroModule`
+just as you added `AppRoutingModule` to the `AppModule`.
+
+Open `heroes.module.ts`.
+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:
+
+
+<code-example path="router/src/app/heroes/heroes.module.ts" title="src/app/heroes/heroes.module.ts">
+
+</code-example>
+
+
+
+{@a remove-duplicate-hero-routes}
+
+
+### Remove duplicate hero routes
+
+The hero routes are currently defined in _two_ places: in the `HeroesRoutingModule`,
+by way of the `HeroesModule`, and in the `AppRoutingModule`.
+
+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.
+
+But you don't want to define the same routes twice.
+Remove the `HeroListComponent` import and the `/heroes` route from the `app-routing.module.ts`.
+
+**Leave the default and the wildcard routes!**
+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)">
+
+</code-example>
+
+
+
+{@a merge-hero-routes}
+
+
+### Import hero module into AppModule
+The heroes feature module is ready, but the application doesn't know about the `HeroesModule` yet.
+Open `app.module.ts` and revise it as follows.
+
+Import the `HeroesModule` and add it to the `imports` array in the `@NgModule` metadata of the `AppModule`.
+
+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
+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.
+
+After these steps, the `AppModule` should look like this:
+
+
+<code-example path="router/src/app/app.module.3.ts" title="src/app/app.module.ts">
+
+</code-example>
+
+
+
+{@a routing-module-order}
+
+
+### Module import order matters
+
+Look at the module `imports` array. Notice that the `AppRoutingModule` is _last_.
+Most importantly, it comes _after_ the `HeroesModule`.
+
+<code-example path="router/src/app/app.module.3.ts" region="module-imports" title="src/app/app.module.ts (module-imports)" linenums="false">
+
+</code-example>
+
+
+
+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](#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".
+
+The routes are no longer in one file.
+They are distributed across two modules, `AppRoutingModule` and `HeroesRoutingModule`.
+
+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;will intercept the attempt to navigate to a hero route.
+
+
+<div class="alert is-helpful">
+
+
+
+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](#inspect-config "Inspect the router config").
+
+
+</div>
+
+
+
+{@a route-def-with-parameter}
+
+
+### Route definition with a parameter
+
+Return to the `HeroesRoutingModule` and look at the route definitions again.
+The route to `HeroDetailComponent` has a twist.
+
+
+<code-example path="router/src/app/heroes/heroes-routing.module.1.ts" linenums="false" title="src/app/heroes/heroes-routing.module.ts (excerpt)" region="hero-detail-route">
+
+</code-example>
+
+
+
+Notice the `:id` token in the path. That creates a slot in the path for a **Route Parameter**.
+In this case, the router will insert the `id` of a hero into that slot.
+
+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:
+
+
+<code-example format="nocode">
+  localhost:3000/hero/15
+
+</code-example>
+
+
+
+If a user enters that URL into the browser address bar, the router should recognize the
+pattern and go to the same "Magneta" detail view.
+
+
+<div class="callout is-helpful">
+
+
+
+<header>
+  Route parameter: Required or optional?
+</header>
+
+
+
+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
+a route for some other hero.
+
+
+</div>
+
+
+{@a route-parameters}
+
+
+### Setting the route parameters in the list view
+
+After navigating to the `HeroDetailComponent`, you expect to see the details of the selected hero.
+You need *two* pieces of information: the routing path to the component and the hero's `id`.
+
+Accordingly, the _link parameters array_ has *two* items:  the routing _path_ and a _route parameter_ that specifies the
+`id` of the selected hero.
+
+
+<code-example path="router/src/app/heroes/hero-list.component.1.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (link-parameters-array)" region="link-parameters-array">
+
+</code-example>
+
+
+
+The router composes the destination URL from the array like this:
+`localhost:3000/hero/15`.
+
+
+
+<div class="alert is-helpful">
+
+
+
+How does the target `HeroDetailComponent` learn about that `id`?
+Don't analyze the URL. Let the router do it.
+
+The router extracts the route parameter (`id:15`) from the URL and supplies it to
+the `HeroDetailComponent` via the `ActivatedRoute` service.
+
+
+</div>
+
+{@a activated-route}
+
+### _Activated Route_ in action
+
+Import the `Router`, `ActivatedRoute`, and `ParamMap` tokens from the router package.
+
+
+<code-example path="router/src/app/heroes/hero-detail.component.1.ts" linenums="false" title="src/app/heroes/hero-detail.component.ts (activated route)" region="imports">
+
+</code-example>
+
+
+
+Import the `switchMap` operator because you need it later to process the `Observable` route parameters.
+
+
+<code-example path="router/src/app/heroes/hero-detail.component.ts" linenums="false" title="src/app/heroes/hero-detail.component.ts (switchMap operator import)" region="rxjs-operator-import">
+
+</code-example>
+
+
+
+{@a hero-detail-ctor}
+
+
+As usual, you write a constructor that asks Angular to inject services
+that the component requires and reference them as private variables.
+
+
+<code-example path="router/src/app/heroes/hero-detail.component.ts" linenums="false" title="src/app/heroes/hero-detail.component.ts (constructor)" region="ctor">
+
+</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.
+
+
+<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.
+
+You might think to use the RxJS `map` operator.
+But the `HeroService` returns an `Observable<Hero>`.
+So you flatten the `Observable` with the `switchMap` operator instead.
+
+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`.
+
+The observable `Subscription` will be handled by the `AsyncPipe` and the component's `hero` property will be (re)set with the retrieved hero.
+
+#### _ParamMap_ API
+
+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`).
+
+<table>
+  <tr>
+    <th>
+      Member
+    </th>
+
+    <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>paramMap</i> and component reuse
+
+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.
+
+They might. By default, the router re-uses a component instance when it re-navigates to the same component type
+without visiting a different component first. The route parameters could change each time.
+
+Suppose a parent component navigation bar had "forward" and "back" buttons
+that scrolled through the list of heroes.
+Each click navigated imperatively to the `HeroDetailComponent` with the next or previous `id`.
+
+You don't want the router to remove the current `HeroDetailComponent` instance from the DOM only to re-create it for the next `id`.
+That could be visibly jarring.
+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 `paramMap` property handles that beautifully.
+
+
+<div class="alert is-helpful">
+
+
+
+When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed.
+
+There are a few exceptional observables where this is not necessary.
+The `ActivatedRoute` observables are among the exceptions.
+
+The `ActivatedRoute` and its observables are insulated from the `Router` itself.
+The `Router` destroys a routed component when it is no longer needed and the injected `ActivatedRoute` dies with it.
+
+Feel free to unsubscribe anyway. It is harmless and never a bad practice.
+
+
+</div>
+
+
+
+{@a snapshot}
+
+
+#### _Snapshot_: the _no-observable_ alternative
+_This_ application won't re-use the `HeroDetailComponent`.
+The user always returns to the hero list to select another hero to view.
+There's no way to navigate from one hero detail to another hero detail
+without visiting the list component in between.
+Therefore, the router creates a new `HeroDetailComponent` instance every time.
+
+When you know for certain that a `HeroDetailComponent` instance will *never, never, ever*
+be re-used, you can simplify the code with the *snapshot*.
+
+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:
+
+
+<code-example path="router/src/app/heroes/hero-detail.component.2.ts" linenums="false" title="src/app/heroes/hero-detail.component.ts (ngOnInit snapshot)" region="snapshot">
+
+</code-example>
+
+
+
+<div class="alert is-helpful">
+
+
+
+**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 `paramMap` strategy just in case.
+
+
+</div>
+
+
+
+{@a nav-to-list}
+
+
+### Navigating back to the list component
+
+The `HeroDetailComponent` has a "Back" button wired to its `gotoHeroes` method that navigates imperatively
+back to the `HeroListComponent`.
+
+The router `navigate` method takes the same one-item _link parameters array_
+that you can bind to a `[routerLink]` directive.
+It holds the _path to the `HeroListComponent`_:
+
+
+<code-example path="router/src/app/heroes/hero-detail.component.1.ts" linenums="false" title="src/app/heroes/hero-detail.component.ts (excerpt)" region="gotoHeroes">
+
+</code-example>
+
+
+{@a optional-route-parameters}
+
+### Route Parameters: Required or optional?
+
+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:
+
+
+<code-example format="nocode">
+  localhost:3000/hero/15
+
+</code-example>
+
+
+
+You can also add *optional* information to a route request.
+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.
+
+
+<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`
+in the URL as an optional parameter when returning from the `HeroDetailComponent`.
+
+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
+variety of formats&mdash;`during='currentYear'`.
+
+These kinds of parameters don't fit easily in a URL *path*. Even if you could define a suitable URL token scheme,
+doing so greatly complicates the pattern matching required to translate an incoming URL to a named route.
+
+Optional parameters are the ideal vehicle for conveying arbitrarily complex information during navigation.
+Optional parameters aren't involved in pattern matching and afford flexibility of expression.
+
+The router supports navigation with optional parameters as well as required route parameters.
+Define _optional_ parameters in a separate object _after_ you define the required route parameters.
+
+In general, prefer a *required route parameter* when
+the value is mandatory (for example, if necessary to distinguish one route path from another);
+prefer an *optional parameter* when the value is optional, complex, and/or multivariate.
+
+
+{@a optionally-selecting}
+
+
+### Heroes list: optionally selecting a hero
+
+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_](#link-parameters-array).
+
+
+<code-example path="router/src/app/heroes/hero-list.component.1.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (link-parameters-array)" region="link-parameters-array">
+
+</code-example>
+
+
+
+The router embedded the `id` value in the navigation URL because you had defined it
+as a route parameter with an `:id` placeholder token in the route `path`:
+
+
+<code-example path="router/src/app/heroes/heroes-routing.module.1.ts" linenums="false" title="src/app/heroes/heroes-routing.module.ts (hero-detail-route)" region="hero-detail-route">
+
+</code-example>
+
+
+
+When the user clicks the back button, the `HeroDetailComponent` constructs another _link parameters array_
+which it uses to navigate back to the `HeroListComponent`.
+
+
+<code-example path="router/src/app/heroes/hero-detail.component.1.ts" linenums="false" title="src/app/heroes/hero-detail.component.ts (gotoHeroes)" region="gotoHeroes">
+
+</code-example>
+
+
+
+This array lacks a route parameter because you had no reason to send information to the `HeroListComponent`.
+
+Now you have a reason. You'd like to send the id of the current hero with the navigation request so that the
+`HeroListComponent` can highlight that hero in its list.
+This is a _nice-to-have_ feature; the list will display perfectly well without it.
+
+Send the `id` with an object that contains an _optional_ `id` parameter.
+For demonstration purposes, there's an extra junk parameter (`foo`) in the object that the `HeroListComponent` should ignore.
+Here's the revised navigation statement:
+
+
+<code-example path="router/src/app/heroes/hero-detail.component.ts" linenums="false" title="src/app/heroes/hero-detail.component.ts (go to heroes)" region="gotoHeroes">
+
+</code-example>
+
+
+
+The application still works. Clicking "back" returns to the hero list view.
+
+Look at the browser address bar.
+
+
+It should look something like this, depending on where you run it:
+
+
+<code-example language="bash">
+  localhost:3000/heroes;id=15;foo=foo
+
+</code-example>
+
+
+
+The `id` value appears in the URL as (`;id=15;foo=foo`), not in the URL path.
+The path for the "Heroes" route doesn't have an `:id` token.
+
+The optional route parameters are not separated by "?" and "&" as they would be in the URL query string.
+They are **separated by semicolons ";"**
+This is *matrix URL* notation&mdash;something you may not have seen before.
+
+
+<div class="alert is-helpful">
+
+
+
+*Matrix URL* notation is an idea first introduced
+in a [1996 proposal](http://www.w3.org/DesignIssues/MatrixURIs.html) by the founder of the web, Tim Berners-Lee.
+
+Although matrix notation never made it into the HTML standard, it is legal and
+it became popular among browser routing systems as a way to isolate parameters
+belonging to parent and child routes. The Router is such a system and provides
+support for the matrix notation across browsers.
+
+The syntax may seem strange to you but users are unlikely to notice or care
+as long as the URL can be emailed and pasted into a browser address bar
+as this one can.
+
+</div>
+
+
+
+{@a route-parameters-activated-route}
+
+
+### Route parameters in the *ActivatedRoute* service
+
+The list of heroes is unchanged. No hero row is highlighted.
+
+
+<div class="alert is-helpful">
+
+
+
+The <live-example></live-example> *does* highlight the selected
+row because it demonstrates the final state of the application which includes the steps you're *about* to cover.
+At the moment this guide is describing the state of affairs *prior* to those steps.
+
+</div>
+
+
+
+The `HeroListComponent` isn't expecting any parameters at all and wouldn't know what to do with them.
+You can change that.
+
+Previously, when navigating from the `HeroListComponent` to the `HeroDetailComponent`,
+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`.
+
+This time you'll be navigating in the opposite direction, from the `HeroDetailComponent` to the `HeroListComponent`.
+
+First you extend the router import statement to include the `ActivatedRoute` service symbol:
+
+
+<code-example path="router/src/app/heroes/hero-list.component.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (import)" region="import-router">
+
+</code-example>
+
+
+
+Import the `switchMap` operator to perform an operation on the `Observable` of route parameter map.
+
+
+<code-example path="router/src/app/heroes/hero-list.component.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (rxjs imports)" region="rxjs-imports">
+
+</code-example>
+
+
+
+Then you inject the `ActivatedRoute` in the `HeroListComponent` constructor.
+
+
+<code-example path="router/src/app/heroes/hero-list.component.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (constructor and ngOnInit)" region="ctor">
+
+</code-example>
+
+
+
+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.
+
+
+Update the template with a [class binding](guide/template-syntax#class-binding).
+The binding adds the `selected` CSS class when the comparison returns `true` and removes it when `false`.
+Look for it within the repeated `<li>` tag as shown here:
+
+
+<code-example path="router/src/app/heroes/hero-list.component.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (template)" region="template">
+
+</code-example>
+
+
+
+When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
+
+<figure>
+  <img src='generated/images/guide/router/selected-hero.png' alt="Selected List">
+</figure>
+
+
+
+The optional `foo` route parameter is harmless and continues to be ignored.
+
+
+{@a route-animation}
+
+
+### Adding animations to the routed component
+The heroes feature module is almost complete, but what is a feature without some smooth transitions?
+
+This section shows you how to add some [animations](guide/animations)
+to the `HeroDetailComponent`.
+
+First import `BrowserAnimationsModule`:
+
+<code-example path="router/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (animations-module)" region="animations-module">
+
+</code-example>
+
+
+
+Create an `animations.ts` file in the root `src/app/` folder. The contents look like this:
+
+<code-example path="router/src/app/animations.ts" linenums="false" title="src/app/animations.ts (excerpt)">
+
+</code-example>
+
+
+
+This file does the following:
+
+* 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`*;
+animated components will refer to this name.
+
+* Specifies the _wildcard state_ , `*`, that matches any animation state that the route component is in.
+
+* 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`).
+
+You could create more triggers with different transitions for other route components. This trigger is sufficient for the current milestone.
+
+
+Back in the `HeroDetailComponent`, import the `slideInDownAnimation` from `'./animations.ts`.
+Add the `HostBinding` decorator  to the imports from `@angular/core`; you'll need it in a moment.
+
+Add an `animations` array to the `@Component` metadata's that contains the `slideInDownAnimation`.
+
+Then add three `@HostBinding` properties to the class to set the animation and styles for the route component's element.
+
+<code-example path="router/src/app/heroes/hero-detail.component.ts" linenums="false" title="src/app/heroes/hero-detail.component.ts (host bindings)" region="host-bindings">
+
+</code-example>
+
+
+
+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.
+
+The other two `@HostBinding` properties style the display and position of the component.
+
+The `HeroDetailComponent` will ease in from the left when routed to and will slide down when navigating away.
+
+
+<div class="alert is-helpful">
+
+
+
+Applying route animations to individual components works for a simple demo, but in a real life app,
+it is better to animate routes based on _route paths_.
+
+
+</div>
+
+
+
+{@a milestone-3-wrap-up}
+
+
+### Milestone 3 wrap up
+
+You've learned how to do the following:
+
+* Organize the app into *feature areas*.
+* Navigate imperatively from one component to another.
+* Pass information along in route parameters and subscribe to them in the component.
+* Import the feature area NgModule into the `AppModule`.
+* Apply animations to the route component.
+
+After these changes, the folder structure looks like this:
+
+
+<div class='filetree'>
+
+  <div class='file'>
+    router-sample
+  </div>
+
+  <div class='children'>
+
+    <div class='file'>
+      src
+    </div>
+
+    <div class='children'>
+
+      <div class='file'>
+        app
+      </div>
+
+      <div class='children'>
+
+        <div class='file'>
+          heroes
+        </div>
+
+        <div class='children'>
+
+          <div class='file'>
+            hero-detail.component.ts
+          </div>
+
+          <div class='file'>
+            hero-list.component.ts
+          </div>
+
+          <div class='file'>
+            hero.service.ts
+          </div>
+
+          <div class='file'>
+            heroes.module.ts
+          </div>
+
+          <div class='file'>
+            heroes-routing.module.ts
+          </div>
+
+        </div>
+
+        <div class='file'>
+          app.component.ts
+        </div>
+
+        <div class='file'>
+          app.module.ts
+        </div>
+
+        <div class='file'>
+          app-routing.module.ts
+        </div>
+
+        <div class='file'>
+          crisis-list.component.ts
+        </div>
+
+      </div>
+
+      <div class='file'>
+        main.ts
+      </div>
+
+      <div class='file'>
+        index.html
+      </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 are the relevant files for this version of the sample application.
+
+<code-tabs>
+
+  <code-pane title="app.component.ts" path="router/src/app/app.component.1.ts">
+
+  </code-pane>
+
+  <code-pane title="app.module.ts" path="router/src/app/app.module.3.ts">
+
+  </code-pane>
+
+  <code-pane title="app-routing.module.ts" path="router/src/app/app-routing.module.2.ts">
+
+  </code-pane>
+
+  <code-pane title="hero-list.component.ts" path="router/src/app/heroes/hero-list.component.ts">
+
+  </code-pane>
+
+  <code-pane title="hero-detail.component.ts" path="router/src/app/heroes/hero-detail.component.ts">
+
+  </code-pane>
+
+  <code-pane title="hero.service.ts" path="router/src/app/heroes/hero.service.ts">
+
+  </code-pane>
+
+  <code-pane title="heroes.module.ts" path="router/src/app/heroes/heroes.module.ts">
+
+  </code-pane>
+
+  <code-pane title="heroes-routing.module.ts" path="router/src/app/heroes/heroes-routing.module.1.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+{@a milestone-4}
+
+
+
+## Milestone 4: Crisis center feature
+
+It's time to add real features to the app's current placeholder crisis center.
+
+Begin by imitating the heroes feature:
+
+* Delete the placeholder crisis center file.
+* Create an `app/crisis-center` folder.
+* Copy the files from `app/heroes` into the new crisis center folder.
+* In the new files, change every mention of "hero" to "crisis", and "heroes" to "crises".
+
+You'll turn the `CrisisService` into a purveyor of mock crises instead of mock heroes:
+
+
+<code-example path="router/src/app/crisis-center/crisis.service.ts" linenums="false" title="src/app/crisis-center/crisis.service.ts (mock-crises)" region="mock-crises">
+
+</code-example>
+
+
+
+The resulting crisis center is a foundation for introducing a new concept&mdash;**child routing**.
+You can leave *Heroes* in its current state as a contrast with the *Crisis Center*
+and decide later if the differences are worthwhile.
+
+
+<div class="alert is-helpful">
+
+
+
+In keeping with the
+<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.
+
+</div>
+
+
+
+{@a crisis-child-routes}
+
+
+### A crisis center with child routes
+
+This section shows you how to organize the crisis center
+to conform to the following recommended pattern for Angular applications:
+
+* Each feature area resides in its own folder.
+* Each feature has its own Angular feature module.
+* Each area has its own area root component.
+* Each area root component has its own router outlet and child routes.
+* Feature area routes rarely (if ever) cross with routes of other features.
+
+If your app had many feature areas, the app component trees might look like this:
+
+
+<figure>
+  <img src='generated/images/guide/router/component-tree.png' alt="Component Tree">
+</figure>
+
+
+
+{@a child-routing-component}
+
+
+### Child routing component
+
+Add the following `crisis-center.component.ts` to the `crisis-center` folder:
+
+<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`:
+
+* It is the *root* of the crisis center area,
+just as `AppComponent` is the root of the entire application.
+* It is a *shell* for the crisis management feature area,
+just as the `AppComponent` is a shell to manage the high-level workflow.
+
+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
+`<router-outlet>` for the crisis center child views.
+
+Unlike `AppComponent`, and most other components, it _lacks a selector_.
+It doesn't _need_ one since you don't *embed* this component in a parent template,
+instead you use the router to *navigate* to it.
+
+
+{@a child-route-config}
+
+
+### Child route configuration
+
+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.
+
+
+<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.
+
+These two routes navigate to the crisis center child components,
+`CrisisCenterHomeComponent` and `CrisisDetailComponent`, respectively.
+
+There are *important differences* in the way the router treats these _child routes_.
+
+The router displays the components of these routes in the `RouterOutlet`
+of the `CrisisCenterComponent`, not in the `RouterOutlet` of the `AppComponent` shell.
+
+The `CrisisListComponent` contains the crisis list and a `RouterOutlet` to
+display the `Crisis Center Home` and `Crisis Detail` route components.
+
+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.
+In contrast, back in the `Hero Detail` route, the component was recreated each time you selected a different hero.
+
+At the top level, paths that begin with `/` refer to the root of the application.
+But child routes *extend* the path of the parent route.
+With each step down the route tree,
+you add a slash followed by the route path, unless the path is _empty_.
+
+Apply that logic to navigation within the crisis center for which the parent path is `/crisis-center`.
+
+* To navigate to the `CrisisCenterHomeComponent`, the full URL is `/crisis-center` (`/crisis-center` + `''` + `''`).
+
+* To navigate to the `CrisisDetailComponent` for a crisis with `id=2`, the full URL is
+`/crisis-center/2` (`/crisis-center` + `''` +  `'/2'`).
+
+The absolute URL for the latter example, including the `localhost` origin, is
+
+<code-example>
+  localhost:3000/crisis-center/2
+
+</code-example>
+
+
+
+Here's the complete `crisis-center-routing.module.ts` file with its imports.
+
+
+<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 (excerpt)">
+
+</code-example>
+
+
+
+{@a import-crisis-module}
+
+
+### Import crisis center module into the *AppModule* routes
+
+As with the `HeroesModule`, you must add the `CrisisCenterModule` to the `imports` array of the `AppModule`
+_before_ the `AppRoutingModule`:
+
+
+<code-example path="router/src/app/app.module.4.ts" linenums="false" title="src/app/app.module.ts (import CrisisCenterModule)" region="crisis-center-module">
+
+</code-example>
+
+
+
+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.
+
+The `app-routing.module.ts` file retains the top-level application routes such as the default and wildcard routes.
+
+
+<code-example path="router/src/app/app-routing.module.3.ts" linenums="false" title="src/app/app-routing.module.ts (v3)" region="v3">
+
+</code-example>
+
+
+
+
+{@a relative-navigation}
+
+
+### Relative navigation
+
+While building out the crisis center feature, you navigated to the
+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.
+
+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.
+If you changed the parent `/crisis-center` path, you would have to change the link parameters array.
+
+You can free the links from this dependency by defining paths that are **relative** to the current URL segment.
+Navigation _within_ the feature area remains intact even if you change the parent route path to the feature.
+
+Here's an example:
+
+
+<div class="alert is-helpful">
+
+
+
+The router supports directory-like syntax in a _link parameters list_ to help guide route name lookup:
+
+`./` or `no leading slash` is relative to the current level.
+
+`../` to go up one level in the route 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.
+
+
+</div>
+
+
+
+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.
+
+After the _link parameters array_, add an object with a `relativeTo` property set to the `ActivatedRoute`.
+The router then calculates the target URL based on the active route's location.
+
+
+<div class="alert is-helpful">
+
+
+
+**Always** specify the complete _absolute_ path when calling router's `navigateByUrl` method.
+
+
+</div>
+
+
+
+{@a nav-to-crisis}
+
+
+### Navigate to crisis list with a relative URL
+
+You've already injected the `ActivatedRoute` that you need to compose the relative navigation path.
+
+When 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.
+The `ActivatedRoute` is implicit in a `RouterLink` directive.
+
+
+Update the `gotoCrises` method of the `CrisisDetailComponent` to navigate back to the *Crisis Center* list using relative path navigation.
+
+
+<code-example path="router/src/app/crisis-center/crisis-detail.component.ts" linenums="false" title="src/app/crisis-center/crisis-detail.component.ts (relative navigation)" region="gotoCrises-navigate">
+
+</code-example>
+
+
+Notice that the path goes up a level using the `../` syntax.
+If the current crisis `id` is `3`, the resulting path back to the crisis list is  `/crisis-center/;id=3;foo=foo`.
+
+
+{@a named-outlets}
+
+
+
+### Displaying multiple routes in named outlets
+
+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.
+
+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
+under that outlet to group routes together.
+The router only supports one primary _unnamed_ outlet per template.
+
+A template can also have any number of _named_ outlets.
+Each named outlet has its own set of routes with their own components.
+Multiple outlets can be displaying different content, determined by different routes, all at the same time.
+
+Add an outlet named "popup" in the `AppComponent`, directly below the unnamed outlet.
+
+
+<code-example path="router/src/app/app.component.4.ts" linenums="false" title="src/app/app.component.ts (outlets)" region="outlets">
+
+</code-example>
+
+
+
+That's where a popup will go, once you learn how to route a popup component to it.
+
+
+{@a secondary-routes}
+
+
+#### Secondary routes
+
+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 are independent of each other.
+* They work in combination with other routes.
+* They are displayed in named outlets.
+
+Create a new component named `ComposeMessageComponent` in `src/app/compose-message.component.ts`.
+It displays a simple form with a header, an input box for the message,
+and two buttons, "Send" and "Cancel".
+
+
+<figure>
+  <img src='generated/images/guide/router/contact-popup.png' alt="Contact popup">
+</figure>
+
+
+
+Here's the component and its template:
+
+
+<code-tabs>
+
+  <code-pane title="src/app/compose-message.component.ts" path="router/src/app/compose-message.component.ts">
+
+  </code-pane>
+
+  <code-pane title="src/app/compose-message.component.html" path="router/src/app/compose-message.component.html">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+It looks about the same as any other component you've seen in this guide.
+There are two noteworthy differences.
+
+Note that the `send()` method simulates latency by waiting a second before "sending" the message and closing the popup.
+
+The `closePopup()` method closes the popup view by navigating to the popup outlet with a `null`.
+That's a peculiarity covered [below](#clear-secondary-routes).
+
+As with other application components, you add the `ComposeMessageComponent` to the `declarations` of an `NgModule`.
+Do so in the `AppModule`.
+
+
+{@a add-secondary-route}
+
+
+#### Add a secondary route
+
+Open the `AppRoutingModule` and add a new `compose` route to the `appRoutes`.
+
+<code-example path="router/src/app/app-routing.module.3.ts" linenums="false" title="src/app/app-routing.module.ts (compose route)" region="compose">
+
+</code-example>
+
+
+
+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.
+
+The user needs a way to open the popup.
+Open the `AppComponent` and add a "Contact" link.
+
+<code-example path="router/src/app/app.component.4.ts" linenums="false" title="src/app/app.component.ts (contact-link)" region="contact-link">
+
+</code-example>
+
+
+
+Although the `compose` route is pinned to the "popup" outlet, that's not sufficient for wiring the route to a `RouterLink` directive.
+You have to specify the named outlet in a _link parameters array_ and bind it to the `RouterLink` with a property binding.
+
+The _link parameters array_ contains an object with a single `outlets` property whose value
+is another object keyed by one (or more) outlet names.
+In this case there is only the "popup" outlet property and its value is another _link parameters array_ that specifies the `compose` route.
+
+You are in effect saying, _when the user clicks this link, display the component associated with the `compose` route in the `popup` outlet_.
+
+
+<div class="alert is-helpful">
+
+
+
+This `outlets` object within an outer object was completely unnecessary
+when there was only one route and one _unnamed_ outlet to think about.
+
+The router assumed that your route specification targeted the _unnamed_ primary outlet
+and created these objects for you.
+
+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.
+
+You're not actually doing that here.
+But to target a named outlet, you must use the richer, more verbose syntax.
+
+
+</div>
+
+
+
+{@a secondary-route-navigation}
+
+
+#### Secondary route navigation: merging routes during navigation
+Navigate to the _Crisis Center_ and click "Contact".
+you should see something like the following URL in the browser address bar.
+
+
+<code-example>
+  http://.../crisis-center(popup:compose)
+
+</code-example>
+
+
+
+The interesting part of the URL follows the `...`:
+
+* The `crisis-center` is the primary navigation.
+* Parentheses surround the secondary route.
+* The secondary route consists of an outlet name (`popup`), a `colon` separator, and the secondary route path (`compose`).
+
+Click the _Heroes_ link and look at the URL again.
+
+
+<code-example>
+  http://.../heroes(popup:compose)
+</code-example>
+
+
+
+The primary navigation part has changed; the secondary route is the same.
+
+The router is keeping track of two separate branches in a navigation tree and generating a representation of that tree in the 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.
+
+You can tell the router to navigate an entire tree at once by filling out the `outlets` object mentioned above.
+Then pass that object inside a _link parameters array_  to the `router.navigate` method.
+
+Experiment with these possibilities at your leisure.
+
+
+
+{@a clear-secondary-routes}
+
+
+#### Clearing secondary routes
+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.
+
+Each secondary outlet has its own navigation, independent of the navigation driving the primary outlet.
+Changing a current route that displays in the primary outlet has no effect on the popup outlet.
+That's why the popup stays visible as you navigate among the crises and heroes.
+
+Clicking the "send" or "cancel" buttons _does_ clear the popup view.
+To see how, look at the `closePopup()` method again:
+
+<code-example path="router/src/app/compose-message.component.ts" linenums="false" title="src/app/compose-message.component.ts (closePopup)" region="closePopup">
+
+</code-example>
+
+
+
+It navigates imperatively with the `Router.navigate()` method, passing in a [link parameters array](#link-parameters-array).
+
+Like the array bound to the _Contact_ `RouterLink` in the `AppComponent`,
+this one includes an object with an `outlets` property.
+The `outlets` property value is another object with outlet names for keys.
+The only named outlet is `'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
+the secondary popup route from the current URL.
+
+{@a guards}
+
+## Milestone 5: Route guards
+
+At the moment, *any* user can navigate *anywhere* in the application *anytime*.
+That's not always the right thing to do.
+
+* Perhaps the user is not authorized to navigate to the target component.
+* Maybe the user must login (*authenticate*) first.
+* Maybe you should fetch some data before you display the target component.
+* You might want to save pending changes before leaving a component.
+* You might ask the user if it's OK to discard pending changes rather than save them.
+
+You can add _guards_ to the route configuration to handle these scenarios.
+
+A guard's return value controls the router's behavior:
+
+* If it returns `true`, the navigation process continues.
+* If it returns `false`, the navigation process stops and the user stays put.
+
+
+<div class="alert is-helpful">
+
+
+
+The guard can also tell the router to navigate elsewhere, effectively canceling the current navigation.
+
+
+</div>
+
+
+
+The guard *might* return its boolean answer synchronously.
+But in many cases, the guard can't produce an answer synchronously.
+The guard could ask the user a question, save changes to the server, or fetch fresh data.
+These are all asynchronous operations.
+
+Accordingly, a routing guard can return an `Observable<boolean>` or a `Promise<boolean>` and the
+router will wait for the observable to resolve to `true` or `false`.
+
+The router supports multiple guard interfaces:
+
+* [`CanActivate`](api/router/CanActivate) to mediate navigation *to* a route.
+
+* [`CanActivateChild`](api/router/CanActivateChild) to mediate navigation *to* a child route.
+
+* [`CanDeactivate`](api/router/CanDeactivate) to mediate navigation *away* from the current route.
+
+* [`Resolve`](api/router/Resolve) to perform route data retrieval *before* route activation.
+
+* [`CanLoad`](api/router/CanLoad) to mediate navigation *to* a feature module loaded _asynchronously_.
+
+
+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.
+If _any_ guard returns false, pending guards that have not completed will be canceled,
+and the entire navigation is canceled.
+
+There are several examples over the next few sections.
+
+
+{@a can-activate-guard}
+
+
+### _CanActivate_: requiring authentication
+
+Applications often restrict access to a feature area based on who the user is.
+You could permit access only to authenticated users or to users with a specific role.
+You might block or limit access until the user's account is activated.
+
+The `CanActivate` guard is the tool to manage these navigation business rules.
+
+#### Add an admin feature module
+
+In this next section, you'll extend the crisis center with some new *administrative* features.
+Those features aren't defined yet.
+But you can start by adding a new feature module named `AdminModule`.
+
+Create an `admin` folder with a feature module file, a routing configuration file, and supporting components.
+
+The admin feature file structure looks like this:
+
+
+<div class='filetree'>
+
+  <div class='file'>
+    src/app/admin
+  </div>
+
+  <div class='children'>
+
+    <div class='file'>
+      admin-dashboard.component.ts
+    </div>
+
+    <div class='file'>
+      admin.component.ts
+    </div>
+
+    <div class='file'>
+      admin.module.ts
+    </div>
+
+    <div class='file'>
+      admin-routing.module.ts
+    </div>
+
+    <div class='file'>
+      manage-crises.component.ts
+    </div>
+
+    <div class='file'>
+      manage-heroes.component.ts
+    </div>
+
+  </div>
+
+</div>
+
+
+
+The admin feature module contains the `AdminComponent` used for routing within the
+feature module, a dashboard route and two unfinished components to manage crises and heroes.
+
+
+<code-tabs>
+
+  <code-pane title="src/app/admin/admin-dashboard.component.ts" path="router/src/app/admin/admin-dashboard.component.1.ts">
+
+  </code-pane>
+
+  <code-pane title="src/app/admin/admin.component.ts" path="router/src/app/admin/admin.component.ts">
+
+  </code-pane>
+
+  <code-pane title="src/app/admin/admin.module.ts" path="router/src/app/admin/admin.module.ts">
+
+  </code-pane>
+
+  <code-pane title="src/app/admin/manage-crises.component.ts" path="router/src/app/admin/manage-crises.component.ts">
+
+  </code-pane>
+
+  <code-pane title="src/app/admin/manage-heroes.component.ts" path="router/src/app/admin/manage-heroes.component.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+<div class="alert is-helpful">
+
+
+
+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.
+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.
+
+
+</div>
+
+
+
+The initial admin routing configuration:
+
+
+<code-example path="router/src/app/admin/admin-routing.module.1.ts" linenums="false" title="src/app/admin/admin-routing.module.ts (admin routing)" region="admin-routes">
+
+</code-example>
+
+
+
+{@a component-less-route}
+
+
+### Component-less route: grouping routes without a component
+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.
+You've defined a _component-less_ route.
+
+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](#can-activate-child-guard).
+
+
+Next, import the `AdminModule` into `app.module.ts` and add it to the `imports` array
+to register the admin routes.
+
+
+<code-example path="router/src/app/app.module.4.ts" linenums="false" title="src/app/app.module.ts (admin module)" region="admin-module">
+
+</code-example>
+
+
+
+Add an "Admin" link to the `AppComponent` shell so that users can get to this feature.
+
+
+<code-example path="router/src/app/app.component.5.ts" linenums="false" title="src/app/app.component.ts (template)" region="template">
+
+</code-example>
+
+
+
+{@a guard-admin-feature}
+
+
+#### Guard the admin feature
+
+Currently every route within the *Crisis Center* is open to everyone.
+The new *admin* feature should be accessible only to authenticated users.
+
+You could hide the link until the user logs in. But that's tricky and difficult to maintain.
+
+Instead you'll write a `canActivate()` guard method to redirect anonymous users to the
+login page when they try to enter the admin area.
+
+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.
+
+At the moment you're interested in seeing how guards work so the first version does nothing useful.
+It simply logs to console and `returns` true immediately, allowing navigation to proceed:
+
+
+<code-example path="router/src/app/auth-guard.service.1.ts" linenums="false" title="src/app/auth-guard.service.ts (excerpt)">
+
+</code-example>
+
+
+
+Next, open `admin-routing.module.ts `, import the `AuthGuard` class, and
+update the admin route with a `canActivate` guard property that references it:
+
+
+<code-example path="router/src/app/admin/admin-routing.module.2.ts" linenums="false" title="src/app/admin/admin-routing.module.ts (guarded admin route)" region="admin-route">
+
+</code-example>
+
+
+
+The admin feature is now protected by the guard, albeit protected poorly.
+
+
+{@a teach-auth}
+
+
+#### Teach *AuthGuard* to authenticate
+
+Make the `AuthGuard` at least pretend to authenticate.
+
+The `AuthGuard` should call an application service that can login a user and retain information about the current user.
+Here's a demo `AuthService`:
+
+
+<code-example path="router/src/app/auth.service.ts" linenums="false" title="src/app/auth.service.ts (excerpt)">
+
+</code-example>
+
+
+
+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
+observable that resolves successfully after a short pause.
+The `redirectUrl` property will store the attempted URL so you can navigate to it after authenticating.
+
+Revise the `AuthGuard` to call it.
+
+
+<code-example path="router/src/app/auth-guard.service.2.ts" linenums="false" title="src/app/auth-guard.service.ts (v2)">
+
+</code-example>
+
+
+
+Notice that you *inject* the `AuthService` and the `Router` in the constructor.
+You haven't provided the `AuthService` yet but it's good to know that you can inject helpful services into routing guards.
+
+This guard returns a synchronous boolean result.
+If the user is logged in, it returns true and the navigation continues.
+
+The `ActivatedRouteSnapshot` contains the _future_ route that will be activated and the `RouterStateSnapshot`
+contains the _future_ `RouterState` of the application, should you pass through the guard check.
+
+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
+`false` just to be clear about that.
+
+
+{@a add-login-component}
+
+
+#### Add the *LoginComponent*
+
+You need a `LoginComponent` for the user to log in to the app. After logging in, you'll redirect
+to the stored URL if available, or use the default URL.
+There is nothing new about this component or the way you wire it into the router configuration.
+
+Register a `/login` route in the `login-routing.module.ts` and add the necessary providers to the `providers`
+array. In `app.module.ts`, import the `LoginComponent` and add it to the `AppModule` `declarations`.
+Import and add the `LoginRoutingModule` to the `AppModule` imports as well.
+
+
+<code-tabs>
+
+  <code-pane title="src/app/app.module.ts" path="router/src/app/app.module.ts">
+
+  </code-pane>
+
+  <code-pane title="src/app/login.component.ts" path="router/src/app/login.component.1.ts">
+
+  </code-pane>
+
+  <code-pane title="src/app/login-routing.module.ts" path="router/src/app/login-routing.module.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+<div class="alert is-helpful">
+
+
+
+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](#asynchronous-routing).
+
+
+</div>
+
+
+
+{@a can-activate-child-guard}
+
+
+### _CanActivateChild_: guarding child routes
+
+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.
+
+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.
+Open `auth-guard.service.ts` and add the `CanActivateChild` interface to the imported tokens from the router package.
+
+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`:
+
+
+<code-example path="router/src/app/auth-guard.service.3.ts" linenums="false" title="src/app/auth-guard.service.ts (excerpt)" region="can-activate-child">
+
+</code-example>
+
+
+
+Add the same `AuthGuard` to the `component-less` admin route to protect all other child routes at one time
+instead of adding the `AuthGuard` to each route individually.
+
+
+<code-example path="router/src/app/admin/admin-routing.module.3.ts" linenums="false" title="src/app/admin/admin-routing.module.ts (excerpt)" region="can-activate-child">
+
+</code-example>
+
+
+
+{@a can-deactivate-guard}
+
+
+### _CanDeactivate_: handling unsaved changes
+Back in the "Heroes" workflow, the app accepts every change to a hero immediately without hesitation or validation.
+
+In the real world, you might have to accumulate the users changes.
+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.
+
+What do you do about unapproved, unsaved changes when the user navigates away?
+You can't just leave and risk losing the user's changes; that would be a terrible experience.
+
+It's better to pause and let the user decide what to do.
+If the user cancels, you'll stay put and allow more changes.
+If the user approves, the app can save.
+
+You still might delay navigation until the save succeeds.
+If you let the user move to the next screen immediately and
+the save were to fail (perhaps the data are ruled invalid), you would lose the context of the error.
+
+You can't block while waiting for the server&mdash;that's not possible in a browser.
+You need to stop the navigation while you wait, asynchronously, for the server
+to return with its answer.
+
+You need the `CanDeactivate` guard.
+
+{@a cancel-save}
+
+
+### Cancel and save
+
+The sample application doesn't talk to a server.
+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
+discards the changes when the user presses the *Cancel* button.
+
+Both buttons navigate back to the crisis list after save or cancel.
+
+
+<code-example path="router/src/app/crisis-center/crisis-detail.component.ts" linenums="false" title="src/app/crisis-center/crisis-detail.component.ts (cancel and save methods)" region="cancel-save">
+
+</code-example>
+
+
+
+What if the user tries to navigate away without saving or canceling?
+The user could push the browser back button or click the heroes link.
+Both actions trigger a navigation.
+Should the app save or cancel automatically?
+
+This demo does neither. Instead, it asks the user to make that choice explicitly
+in a confirmation dialog box that *waits asynchronously for the user's
+answer*.
+
+<div class="alert is-helpful">
+
+
+
+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
+waiting for the user's answer asynchronously. Waiting for the user asynchronously
+is like waiting for the server asynchronously.
+
+</div>
+
+
+
+The `DialogService`, provided in the `AppModule` for app-wide use, does the asking.
+
+It returns an `Observable` that *resolves* when the user eventually decides what to do: either
+to discard changes and navigate away (`true`) or to preserve the pending changes and stay in the crisis editor (`false`).
+
+
+{@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.
+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.
+
+
+<code-example path="router/src/app/can-deactivate-guard.service.ts" title="src/app/can-deactivate-guard.service.ts">
+
+</code-example>
+
+
+
+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
+the component's properties or confirm whether the router should allow navigation away from it.
+
+
+<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>
+
+
+
+Looking back at the `CrisisDetailComponent`, it implements the confirmation workflow for unsaved changes.
+
+
+<code-example path="router/src/app/crisis-center/crisis-detail.component.ts" linenums="false" title="src/app/crisis-center/crisis-detail.component.ts (excerpt)" region="canDeactivate">
+
+</code-example>
+
+
+
+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).
+
+
+Add the `Guard` to the crisis detail route in `crisis-center-routing.module.ts` using the `canDeactivate` array property.
+
+
+<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
+`Router` can inject it during the navigation process.
+
+
+<code-example path="router/src/app/app-routing.module.4.ts">
+
+</code-example>
+
+
+
+Now you have given the user a safeguard against unsaved changes.
+{@a Resolve}
+
+{@a resolve-guard}
+
+
+### _Resolve_: pre-fetching component data
+
+In the `Hero Detail` and `Crisis Detail`, the app waited until the route was activated to fetch the respective hero or crisis.
+
+This worked well, but there's a better way.
+If you were using a real world API, there might be some delay before the data to display is returned from the server.
+You don't want to display a blank component while waiting for the data.
+
+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.
+
+In summary, you want to delay rendering the routed component until all necessary data have been fetched.
+
+You need a *resolver*.
+
+
+{@a fetch-before-navigating}
+
+
+### Fetch data before navigating
+
+At the moment, the `CrisisDetailComponent` retrieves the selected crisis.
+If the crisis is not found, it navigates back to the crisis list view.
+
+The experience might be better if all of this were handled first, before the route is activated.
+A `CrisisDetailResolver` service could retrieve a `Crisis` or navigate away if the `Crisis` does not exist
+_before_ activating the route and creating the `CrisisDetailComponent`.
+
+Create the `crisis-detail-resolver.service.ts` file within the `Crisis Center` feature area.
+
+
+<code-example path="router/src/app/crisis-center/crisis-detail-resolver.service.ts" title="src/app/crisis-center/crisis-detail-resolver.service.ts">
+
+</code-example>
+
+
+
+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.
+
+Be explicit. Implement the `Resolve` interface with a type of `Crisis`.
+
+Inject the `CrisisService` and `Router` and implement the `resolve()` method.
+That method could return a `Promise`, an `Observable`, or a synchronous return value.
+
+The `CrisisService.getCrisis` method returns an observable, in order to prevent the route from loading until the data is fetched.
+The `Router` guards require an observable to `complete`, meaning it has emitted all
+of its values. You use the `take` operator with an argument of `1` to ensure that the
+observable completes after retrieving the first value from the observable returned by the
+`getCrisis` method. If it doesn't return a valid `Crisis`, navigate the user back to the `CrisisListComponent`,
+canceling the previous in-flight navigation to the `CrisisDetailComponent`.
+
+Import this resolver in the `crisis-center-routing.module.ts`
+and add a `resolve` object to the `CrisisDetailComponent` route configuration.
+
+Remember to add the `CrisisDetailResolver` service to the `CrisisCenterRoutingModule`'s `providers` array.
+
+
+<code-example path="router/src/app/crisis-center/crisis-center-routing.module.4.ts" linenums="false" title="src/app/crisis-center/crisis-center-routing.module.ts (resolver)" region="crisis-detail-resolver">
+
+</code-example>
+
+
+
+The `CrisisDetailComponent` should no longer fetch the crisis.
+Update the `CrisisDetailComponent` to get the crisis from the  `ActivatedRoute.data.crisis` property instead;
+that's where you said it should be when you re-configured the route.
+It will be there when the `CrisisDetailComponent` ask for it.
+
+
+<code-example path="router/src/app/crisis-center/crisis-detail.component.ts" linenums="false" title="src/app/crisis-center/crisis-detail.component.ts (ngOnInit v2)" region="ngOnInit">
+
+</code-example>
+
+
+
+**Three critical points**
+
+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.
+
+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.
+
+1. The observable provided to the Router _must_ complete.
+If the observable does not complete, the navigation will not continue.
+
+The relevant *Crisis Center* code for this milestone follows.
+
+
+<code-tabs>
+
+  <code-pane title="app.component.ts" path="router/src/app/app.component.6.ts">
+
+  </code-pane>
+
+  <code-pane title="crisis-center-home.component.ts" path="router/src/app/crisis-center/crisis-center-home.component.ts">
+
+  </code-pane>
+
+  <code-pane title="crisis-center.component.ts" path="router/src/app/crisis-center/crisis-center.component.ts">
+
+  </code-pane>
+
+  <code-pane title="crisis-center-routing.module.ts" path="router/src/app/crisis-center/crisis-center-routing.module.4.ts">
+
+  </code-pane>
+
+  <code-pane title="crisis-list.component.ts" path="router/src/app/crisis-center/crisis-list.component.ts">
+
+  </code-pane>
+
+  <code-pane title="crisis-detail.component.ts" path="router/src/app/crisis-center/crisis-detail.component.ts">
+
+  </code-pane>
+
+  <code-pane title="crisis-detail-resolver.service.ts" path="router/src/app/crisis-center/crisis-detail-resolver.service.ts">
+
+  </code-pane>
+
+  <code-pane title="crisis.service.ts" path="router/src/app/crisis-center/crisis.service.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+<code-tabs>
+
+  <code-pane title="auth-guard.service.ts" path="router/src/app/auth-guard.service.3.ts">
+
+  </code-pane>
+
+  <code-pane title="can-deactivate-guard.service.ts" path="router/src/app/can-deactivate-guard.service.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+{@a query-parameters}
+
+
+{@a fragment}
+
+
+### Query parameters and fragments
+
+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.
+
+[Fragments](https://en.wikipedia.org/wiki/Fragment_identifier) refer to certain elements on the page
+identified with an `id` attribute.
+
+Update the `AuthGuard` to provide a `session_id` query that will remain after navigating to another route.
+
+Add an `anchor` element so you can jump to a certain point on the page.
+
+Add the `NavigationExtras` object to the `router.navigate` method that navigates you to the `/login` route.
+
+
+<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
+second argument in the `router.navigate` function
+and provide the `queryParamsHandling` and `preserveFragment` to pass along the current query parameters
+and fragment to the next route.
+
+
+<code-example path="router/src/app/login.component.ts" linenums="false" title="src/app/login.component.ts (preserve)" region="preserve">
+
+</code-example>
+
+<div class="alert is-helpful">
+
+
+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
+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)">
+
+</code-example>
+
+
+
+*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`.
+
+
+Now, you can click on the *Admin* button, which takes you to the *Login*
+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.
+
+You can use these persistent bits of information for things that need to be provided across pages like
+authentication tokens or session ids.
+
+
+<div class="alert is-helpful">
+
+
+
+The `query params` and `fragment` can also be preserved using a `RouterLink` with
+the `queryParamsHandling` and `preserveFragment` bindings respectively.
+
+
+</div>
+
+
+{@a asynchronous-routing}
+
+## Milestone 6: Asynchronous routing
+
+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.
+
+How do you combat this problem?  With asynchronous routing, which loads feature modules _lazily_, on request.
+Lazy loading has multiple benefits.
+
+* You can load feature areas only when requested by the user.
+* You can speed up load time for users that only visit certain areas of the application.
+* You can continue expanding lazy loaded feature areas without increasing the size of the initial load bundle.
+
+You're already part of the way there.
+By organizing the application into modules&mdash;`AppModule`,
+`HeroesModule`, `AdminModule` and `CrisisCenterModule`&mdash;you
+have natural candidates for lazy loading.
+
+Some modules, like `AppModule`, must be loaded from the start.
+But others can and should be lazy loaded.
+The `AdminModule`, for example, is needed by a few authorized users, so
+you should only load it when requested by the right people.
+
+
+{@a lazy-loading-route-config}
+
+
+### Lazy Loading route configuration
+
+Change the `admin` **path** in the `admin-routing.module.ts` from `'admin'` to an empty string, `''`, the _empty path_.
+
+The `Router` supports  *empty path* routes;
+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.
+
+Open the `AppRoutingModule` and add a new `admin` route to its `appRoutes` array.
+
+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`.
+
+
+<code-example path="router/src/app/app-routing.module.5.ts" region="admin-1" title="app-routing.module.ts (load children)">
+
+</code-example>
+
+
+
+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.
+
+The lazy loading and re-configuration happen just once, when the route is _first_ requested;
+the module and routes are available immediately for subsequent requests.
+
+
+<div class="alert is-helpful">
+
+
+
+Angular provides a built-in module loader that supports SystemJS to load modules asynchronously. If you were
+using another bundling tool, such as Webpack, you would use the Webpack mechanism for asynchronously loading modules.
+
+
+</div>
+
+
+
+Take the final step and detach the admin feature set from the main application.
+The root `AppModule` must neither load nor reference the `AdminModule` or its files.
+
+In `app.module.ts`, remove the `AdminModule` import statement from the top of the file
+and remove the `AdminModule` from the NgModule's `imports` array.
+
+
+{@a can-load-guard}
+
+
+### _CanLoad_ Guard: guarding unauthorized loading of feature modules
+
+You're already protecting the `AdminModule` with a `CanActivate` guard that prevents unauthorized users from
+accessing the admin feature area.
+It redirects to the  login page if the user is not authorized.
+
+But the router is still loading the `AdminModule` even if the user can't visit any of its components.
+Ideally, you'd only load the `AdminModule` if the user is logged in.
+
+Add a **`CanLoad`** guard that only loads the `AdminModule` once the user is logged in _and_ attempts to access the admin feature area.
+
+The existing `AuthGuard` already has the essential logic in
+its `checkLogin()` method to support the `CanLoad` guard.
+
+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:
+
+
+<code-example path="router/src/app/auth-guard.service.ts" linenums="false" title="src/app/auth-guard.service.ts (CanLoad guard)" region="canLoad">
+
+</code-example>
+
+
+
+The router sets the `canLoad()` method's `route` parameter to the intended destination URL.
+The `checkLogin()` method redirects to that URL once the user has logged in.
+
+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:
+
+
+<code-example path="router/src/app/app-routing.module.5.ts" region="admin" title="app-routing.module.ts (lazy admin route)">
+
+</code-example>
+
+
+
+{@a preloading}
+
+
+### Preloading: background loading of feature areas
+You've learned how to load modules on-demand.
+You can also load modules asynchronously with _preloading_.
+
+This may seem like what the app has been doing all along. Not quite.
+The `AppModule` is loaded when the application starts; that's _eager_ loading.
+Now the `AdminModule` loads only when the user clicks on a link; that's _lazy_ loading.
+
+_Preloading_ is something in between.
+Consider the _Crisis Center_.
+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,
+you should eagerly load the `AppModule` and the `HeroesModule`.
+
+You could lazy load the _Crisis Center_.
+But you're almost certain that the user will visit the _Crisis Center_ within minutes of launching the app.
+Ideally, the app would launch with just the `AppModule` and the `HeroesModule` loaded
+and then, almost immediately, load the `CrisisCenterModule` in the background.
+By the time the user navigates to the _Crisis Center_, its module will have been loaded and ready to go.
+
+That's _preloading_.
+
+
+{@a how-preloading}
+
+
+#### How preloading works
+
+After each _successful_ navigation, the router looks in its configuration for an unloaded module that it can preload.
+Whether it preloads a module, and which modules it preloads, depends upon the *preload strategy*.
+
+The `Router` offers two preloading strategies out of the box:
+
+* No preloading at all which is the default. Lazy loaded feature areas are still loaded on demand.
+* Preloading of all lazy loaded feature areas.
+
+Out of the box, the router either never preloads, or preloads every lazy load module.
+The `Router` also supports [custom preloading strategies](#custom-preloading) for
+fine control over which modules to preload and when.
+
+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.
+
+
+{@a lazy-load-crisis-center}
+
+
+#### Lazy load the _crisis center_
+
+Update the route configuration to lazy load the `CrisisCenterModule`.
+Take the same steps you used to configure `AdminModule` for lazy load.
+
+1. Change the `crisis-center` path in the `CrisisCenterRoutingModule` to an empty string.
+
+1. Add a `crisis-center` route to the `AppRoutingModule`.
+
+1. Set the `loadChildren` string to load the `CrisisCenterModule`.
+
+1. Remove all mention of the `CrisisCenterModule` from `app.module.ts`.
+
+Here are the updated modules _before enabling preload_:
+
+
+<code-tabs>
+
+  <code-pane title="app.module.ts" path="router/src/app/app.module.ts">
+
+  </code-pane>
+
+  <code-pane title="app-routing.module.ts" path="router/src/app/app-routing.module.6.ts" region="preload-v1">
+
+  </code-pane>
+
+  <code-pane title="crisis-center-routing.module.ts" path="router/src/app/crisis-center/crisis-center-routing.module.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+You could try this now and confirm that the  `CrisisCenterModule` loads after you click the "Crisis Center" button.
+
+To enable preloading of all lazy loaded modules, import the `PreloadAllModules` token from the Angular router package.
+
+The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options.
+The `preloadingStrategy` is one of those options.
+Add the `PreloadAllModules` token to the `forRoot` call:
+
+<code-example path="router/src/app/app-routing.module.6.ts" linenums="false" title="src/app/app-routing.module.ts (preload all)" region="forRoot">
+
+</code-example>
+
+
+
+This tells the `Router` preloader to immediately load _all_ lazy loaded routes (routes with a `loadChildren` property).
+
+When you visit `http://localhost:3000`, the `/heroes` route loads immediately upon launch
+and the router starts loading the `CrisisCenterModule` right after the `HeroesModule` loads.
+
+Surprisingly, the `AdminModule` does _not_ preload. Something is blocking it.
+
+
+{@a preload-canload}
+
+
+#### CanLoad blocks preload
+
+The `PreloadAllModules` strategy does not load feature areas protected by a [CanLoad](#can-load-guard) guard.
+This is by design.
+
+You added a `CanLoad` guard to the route in the `AdminModule` a few steps back
+to block loading of that module until the user is authorized.
+That `CanLoad` guard takes precedence over the preload strategy.
+
+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.
+
+
+{@a custom-preloading}
+
+
+### Custom Preloading Strategy
+
+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.
+
+You can control what and how the router preloads with a custom preloading strategy.
+
+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.
+
+Set the `data.preload` flag in the `crisis-center` route in the `AppRoutingModule`.
+
+
+<code-example path="router/src/app/app-routing.module.ts" linenums="false" title="src/app/app-routing.module.ts (route data preload)" region="preload-v2">
+
+</code-example>
+
+
+
+Add a new file to the project called `selective-preloading-strategy.ts`
+and define a `SelectivePreloadingStrategy` service class as follows:
+
+<code-example path="router/src/app/selective-preloading-strategy.ts" linenums="false" title="src/app/selective-preloading-strategy.ts (excerpt)">
+
+</code-example>
+
+
+
+`SelectivePreloadingStrategy` implements the `PreloadingStrategy`, which has one method, `preload`.
+
+The router calls the `preload` method with two arguments:
+
+1. The route to consider.
+1. A loader function that can load the routed module asynchronously.
+
+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`.
+
+In this sample, the  `preload` method loads the route if the route's `data.preload` flag is truthy.
+
+It also has a side-effect.
+`SelectivePreloadingStrategy` logs the `path` of a selected route in its public `preloadedModules` array.
+
+Shortly, you'll extend the `AdminDashboardComponent` to inject this service and display its `preloadedModules` array.
+
+But first, make a few changes to the `AppRoutingModule`.
+
+1. Import `SelectivePreloadingStrategy` into `AppRoutingModule`.
+1. Replace the `PreloadAllModules` strategy in the call to `forRoot` with this `SelectivePreloadingStrategy`.
+1. Add the `SelectivePreloadingStrategy` strategy to the `AppRoutingModule` providers array so it can be injected
+elsewhere in the app.
+
+Now edit the `AdminDashboardComponent` to display the log of preloaded routes.
+
+1. Import the `SelectivePreloadingStrategy` (it's a service).
+1. Inject it into the dashboard's constructor.
+1. Update the template to display the strategy service's `preloadedModules` array.
+
+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)">
+
+</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.
+
+
+{@a redirect-advanced}
+
+## Migrating URLs with Redirects
+
+You've setup the routes for navigating around your application. You've used navigation imperatively and declaratively to many different routes. But like any application, requirements change over time. You've setup links and navigation to `/heroes` and `/hero/:id` from the `HeroListComponent` and `HeroDetailComponent` components. If there was a requirement that links to `heroes` become `superheroes`, you still want the previous URLs to navigate correctly. You also don't want to go and update every link in your application, so redirects makes refactoring routes trivial.
+
+
+{@a url-refactor}
+
+### Changing /heroes to /superheroes
+
+Let's take the `Hero` routes and migrate them to new URLs. The `Router` checks for redirects in your configuration before navigating, so each redirect is triggered when needed. To support this change, you'll add redirects from the old routes to the new routes in the `heroes-routing.module`.
+
+<code-example path="router/src/app/heroes/heroes-routing.module.ts" linenums="false" title="src/app/heroes/heroes-routing.module.ts (heroes redirects)">
+
+</code-example>
+
+
+You'll notice two different types of redirects. The first change is from  `/heroes` to `/superheroes` without any parameters. This is a straightforward redirect, unlike the change from `/hero/:id` to `/superhero/:id`, which includes the `:id` route parameter. Router redirects also use powerful pattern matching, so the `Router` inspects the URL and replaces route parameters in the `path` with their appropriate destination. Previously, you navigated to a URL such as `/hero/15` with a route parameter `id` of `15`.
+
+<div class="alert is-helpful">
+
+The `Router` also supports [query parameters](#query-parameters) and the [fragment](#fragment) when using redirects.
+
+* When using absolute redirects, the `Router` will use the query parameters and the fragment from the redirectTo in the route config.
+* When using relative redirects, the `Router` use the query params and the fragment from the source URL.
+
+</div>
+
+Before updating the `app-routing.module.ts`, you'll need to consider an important rule. Currently, our empty path route redirects to `/heroes`, which redirects to `/superheroes`. This _won't_ work and is by design as the `Router` handles redirects once at each level of routing configuration. This prevents chaining of redirects, which can lead to endless redirect loops.
+
+So instead, you'll update the empty path route in `app-routing.module.ts` to redirect to `/superheroes`.
+
+<code-example path="router/src/app/app-routing.module.ts" linenums="false" title="src/app/app-routing.module.ts (superheroes redirect)">
+
+</code-example>
+
+Since `RouterLink`s aren't tied to route configuration, you'll need to update the associated router links so they remain active when the new route is active. You'll update the `app.component.ts` template for the `/heroes` routerLink.
+
+<code-example path="router/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (superheroes active routerLink)">
+
+</code-example>
+
+With the redirects setup, all previous routes now point to their new destinations and both URLs still function as intended.
+
+
+{@a inspect-config}
+
+
+
+## Inspect the router's configuration
+
+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](#routing-module-order).
+Are routes actually evaluated as you planned?
+How is the router really configured?
+
+You can inspect the router's current configuration any time by injecting it and
+examining its `config` property.
+For example, update the `AppModule` as follows and look in the browser console window
+to see the finished route configuration.
+
+<code-example path="router/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (inspect the router config)" region="inspect-config">
+
+</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 Stackblitz"></live-example>
+where you can download the final source code.
+
+
+{@a appendices}
+
+
+
+## Appendices
+
+The balance of this guide is a set of appendices that
+elaborate some of the points you covered quickly above.
+
+The appendix material isn't essential. Continued reading is for the curious.
+
+
+{@a link-parameters-array}
+
+
+
+### Appendix: link parameters array
+
+A link parameters array holds the following ingredients for router navigation:
+
+* The *path* of the route to the destination component.
+* Required and optional route parameters that go into the route URL.
+
+You can bind the `RouterLink` directive to such an array like this:
+
+
+<code-example path="router/src/app/app.component.3.ts" linenums="false" title="src/app/app.component.ts (h-anchor)" region="h-anchor">
+
+</code-example>
+
+
+
+You've written a two element array when specifying a route parameter like this:
+
+
+<code-example path="router/src/app/heroes/hero-list.component.1.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (nav-to-detail)" region="nav-to-detail">
+
+</code-example>
+
+
+
+You can provide optional route parameters in an object like this:
+
+
+<code-example path="router/src/app/app.component.3.ts" linenums="false" title="src/app/app.component.ts (cc-query-params)" region="cc-query-params">
+
+</code-example>
+
+
+
+These three examples cover the need for an app with one level routing.
+The moment you add a child router, such as the crisis center, you create new link array possibilities.
+
+Recall that you specified a default child route for the crisis center so this simple `RouterLink` is fine.
+
+
+<code-example path="router/src/app/app.component.3.ts" linenums="false" title="src/app/app.component.ts (cc-anchor-w-default)" region="cc-anchor-w-default">
+
+</code-example>
+
+
+
+Parse it out.
+
+* The first item in the array identifies the parent route (`/crisis-center`).
+* There are no parameters for this parent route so you're done with it.
+* There is no default for the child route so you need to pick one.
+* You're navigating to the `CrisisListComponent`, whose route path is `/`, but you don't need to explicitly add the slash.
+* Voilà! `['/crisis-center']`.
+
+Take it a step further. Consider the following router link that
+navigates from the root of the application down to the *Dragon Crisis*:
+
+
+<code-example path="router/src/app/app.component.3.ts" linenums="false" title="src/app/app.component.ts (Dragon-anchor)" region="Dragon-anchor">
+
+</code-example>
+
+
+
+* The first item in the array identifies the parent route (`/crisis-center`).
+* There are no parameters for this parent route so you're done with it.
+* The second item identifies the child route details about a particular crisis (`/:id`).
+* The details child route requires an `id` route parameter.
+* You added the `id` of the *Dragon Crisis* as the second item in the array (`1`).
+* The resulting path is `/crisis-center/1`.
+
+
+If you wanted to, you could redefine the `AppComponent` template with *Crisis Center* routes exclusively:
+
+
+<code-example path="router/src/app/app.component.3.ts" linenums="false" title="src/app/app.component.ts (template)" region="template">
+
+</code-example>
+
+
+
+In sum, you can write applications with one, two or more levels of routing.
+The link parameters array affords the flexibility to represent any routing depth and
+any legal sequence of route paths, (required) router parameters, and (optional) route parameter objects.
+
+
+{@a browser-url-styles}
+
+
+{@a location-strategy}
+
+
+
+### Appendix: *LocationStrategy* and browser URL styles
+
+When the router navigates to a new component view, it updates the browser's location and history
+with a URL for that view.
+This is a strictly local URL. The browser shouldn't send this URL to the server
+and should not reload the page.
+
+Modern HTML5 browsers support
+<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.
+
+Here's the *Crisis Center* URL in this "HTML5 pushState" style:
+
+
+<code-example format="nocode">
+  localhost:3002/crisis-center/
+
+</code-example>
+
+
+
+Older browsers send page requests to the server when the location URL changes
+_unless_ the change occurs after a "#" (called the "hash").
+Routers can take advantage of this exception by composing in-application route
+URLs with hashes.  Here's a "hash URL" that routes to the *Crisis Center*.
+
+
+<code-example format="nocode">
+  localhost:3002/src/#/crisis-center/
+
+</code-example>
+
+
+
+The router supports both styles with two `LocationStrategy` providers:
+
+1. `PathLocationStrategy`&mdash;the default "HTML5 pushState" style.
+1. `HashLocationStrategy`&mdash;the "hash URL" style.
+
+The `RouterModule.forRoot` function sets the `LocationStrategy` to the `PathLocationStrategy`,
+making it the default strategy.
+You can switch to the `HashLocationStrategy` with an override during the bootstrapping process if you prefer it.
+
+
+<div class="alert is-helpful">
+
+
+
+Learn about providers and the bootstrap process in the
+[Dependency Injection guide](guide/dependency-injection#bootstrap).
+
+
+</div>
+
+
+
+#### Which strategy is best?
+
+You must choose a strategy and you need to make the right call early in the project.
+It won't be easy to change later once the application is in production
+and there are lots of application URL references in the wild.
+
+Almost all Angular projects should use the default HTML5 style.
+It produces URLs that are easier for users to understand.
+And it preserves the option to do _server-side rendering_ later.
+
+Rendering critical pages on the server is a technique that can greatly improve
+perceived responsiveness when the app first loads.
+An app that would otherwise take ten or more seconds to start
+could be rendered on the server and delivered to the user's device
+in less than a second.
+
+This option is only available if application URLs look like normal web URLs
+without hashes (#) in the middle.
+
+Stick with the default unless you have a compelling reason to
+resort to hash routes.
+
+#### HTML5 URLs and the  *&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**.
+
+The preferred way to configure the strategy is to add 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`.
+
+
+<code-example path="router/src/index.html" linenums="false" title="src/index.html (base-href)" region="base-href">
+
+</code-example>
+
+
+
+Without that tag, the browser may not be able to load resources
+(images, CSS, scripts) when "deep linking" into the app.
+Bad things could happen when someone pastes an application link into the
+browser's address bar or clicks such a link in an email.
+
+Some developers may not be able to add the `<base>` element, perhaps because they don't have
+access to `<head>` or the `index.html`.
+
+Those developers may still use HTML5 URLs by taking two remedial steps:
+
+1. Provide the router with an appropriate [APP_BASE_HREF][] value.
+1. Use _root URLs_ for all web resources: CSS, images, scripts, and template HTML files.
+
+{@a 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`
+in the `AppModule`.
+
+
+<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/rx-library.md b/aio/content/guide/rx-library.md
new file mode 100644
index 000000000000..0fa67384ce1f
--- /dev/null
+++ b/aio/content/guide/rx-library.md
@@ -0,0 +1,97 @@
+# The RxJS library
+
+Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change ([Wikipedia](https://en.wikipedia.org/wiki/Reactive_programming)). RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code ([RxJS Docs](http://reactivex.io/rxjs/)).
+
+RxJS provides an implementation of the `Observable` type, which is needed until the type becomes part of the language and until browsers support it. The library also provides utility functions for creating and working with observables. These utility functions can be used for:
+
+* Converting existing code for async operations into observables
+* Iterating through the values in a stream
+* Mapping values to different types
+* Filtering streams
+* Composing multiple streams
+
+## Observable creation functions
+
+RxJS offers a number of functions that can be used to create new observables. These functions can simplify the process of creating observables from things such as events, timers, promises, and so on. For example:
+
+
+<code-example path="rx-library/src/simple-creation.ts" region="promise" title="Create an observable from a promise"></code-example>
+
+<code-example path="rx-library/src/simple-creation.ts" region="interval" title="Create an observable from a counter"></code-example>
+
+<code-example path="rx-library/src/simple-creation.ts" region="event" title="Create an observable from an event"></code-example>
+
+<code-example path="rx-library/src/simple-creation.ts" region="ajax" title="Create an observable that creates an AJAX request"></code-example>
+
+## Operators
+
+Operators are functions that build on the observables foundation to enable sophisticated manipulation of collections. For example, RxJS defines operators such as `map()`, `filter()`, `concat()`, and `flatMap()`.
+
+Operators take configuration options, and they return a function that takes a source observable. When executing this returned function, the operator observes the source observable’s emitted values, transforms them, and returns a new observable of those transformed values. Here is a simple example:
+
+<code-example path="rx-library/src/operators.ts" title="Map operator"></code-example>
+
+You can use _pipes_ to link operators together. Pipes let you combine multiple functions into a single function. The `pipe()` function takes as its arguments the functions you want to combine, and returns a new function that, when executed, runs the composed functions in sequence.
+
+A set of operators applied to an observable is a recipe&mdash;that is, a set of instructions for producing the values you’re interested in. By itself, the recipe doesn’t do anything. You need to call `subscribe()` to produce a result through the recipe.
+
+Here’s an example:
+
+<code-example path="rx-library/src/operators.1.ts" title="Standalone pipe function"></code-example>
+
+The `pipe()` function is also a method on the RxJS `Observable`, so you use this shorter form to define the same operation:
+
+<code-example path="rx-library/src/operators.2.ts" title="Observable.pipe function"></code-example>
+
+### Common operators
+
+RxJS provides many operators, but only a handful are used frequently. For a list of operators and usage samples, visit the [RxJS API Documentation](https://rxjs-dev.firebaseapp.com/api).
+
+<div class="alert is-helpful">
+  Note that, for Angular apps, we prefer combining operators with pipes, rather than chaining. Chaining is used in many RxJS examples.
+</div>
+
+| Area | Operators |
+| :------------| :----------|
+| Creation |  `from`, `fromPromise`,`fromEvent`, `of` |
+| Combination | `combineLatest`, `concat`, `merge`, `startWith` , `withLatestFrom`, `zip` |
+| Filtering | `debounceTime`, `distinctUntilChanged`, `filter`, `take`, `takeUntil` |
+| Transformation | `bufferTime`, `concatMap`, `map`, `mergeMap`, `scan`, `switchMap` |
+| Utility | `tap` |
+| Multicasting | `share` |
+
+## Error handling
+
+In addition to the `error()` handler that you provide on subscription, RxJS provides the `catchError` operator that lets you handle known errors in the observable recipe.
+
+For instance, suppose you have an observable that makes an API request and maps to the response from the server. If the server returns an error or the value doesn’t exist, an error is produced. If you catch this error and supply a default value, your stream continues to process values rather than erroring out.
+
+Here's an example of using the `catchError` operator to do this:
+
+<code-example path="rx-library/src/error-handling.ts" title="catchError operator"></code-example>
+
+### Retry failed observable
+
+Where the `catchError` operator provides a simple path of recovery, the `retry` operator lets you retry a failed request.
+
+Use the `retry` operator before the `catchError` operator. It resubscribes to the original source observable, which can then re-run the full sequence of actions that resulted in the error. If this includes an HTTP request, it will retry that HTTP request.
+
+The following converts the previous example to retry the request before catching the error:
+
+<code-example path="rx-library/src/retry-on-error.ts" title="retry operator"></code-example>
+
+<div class="alert is-helpful">
+
+   Do not retry **authentication** requests, since these should only be initiated by user action. We don't want to lock out user accounts with repeated login requests that the user has not initiated.
+
+</div>
+
+## Naming conventions for observables
+
+Because Angular applications are mostly written in TypeScript, you will typically know when a variable is an observable. Although the Angular framework does not enforce a naming convention for observables, you will often see observables named with a trailing “$” sign.
+
+This can be useful when scanning through code and looking for observable values. Also, if you want a property to store the most recent value from an observable, it can be convenient to simply use the same name with or without the “$”.
+
+For example:
+
+<code-example path="rx-library/src/naming-convention.ts" title="Naming observables"></code-example>
\ No newline at end of file
diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md
new file mode 100644
index 000000000000..27bda4d5977e
--- /dev/null
+++ b/aio/content/guide/security.md
@@ -0,0 +1,334 @@
+# Security
+
+This page describes Angular's built-in
+protections against common web-application vulnerabilities and attacks such as cross-site
+scripting attacks. It doesn't cover application-level security, such as authentication (_Who is
+this user?_) and authorization (_What can this user do?_).
+
+For more information about the attacks and mitigations described below, see [OWASP Guide Project](https://www.owasp.org/index.php/Category:OWASP_Guide_Project).
+
+You can run the <live-example></live-example> in Stackblitz and download the code from there.
+
+
+
+<h2 id='report-issues'>
+  Reporting vulnerabilities
+</h2>
+
+
+
+To report vulnerabilities in Angular itself, email us at [security@angular.io](mailto:security@angular.io).
+
+For more information about how Google handles security issues, see [Google's security
+philosophy](https://www.google.com/about/appsecurity/).
+
+
+
+<h2 id='best-practices'>
+  Best practices
+</h2>
+
+
+
+* **Keep current with the latest Angular library releases.**
+We regularly update the Angular libraries, and these updates may fix security defects discovered in
+previous versions. Check the Angular [change
+log](https://github.com/angular/angular/blob/master/CHANGELOG.md) for security-related updates.
+
+* **Don't modify your copy of Angular.**
+Private, customized versions of Angular tend to fall behind the current version and may not include
+important security fixes and enhancements. Instead, share your Angular improvements with the
+community and make a pull request.
+
+* **Avoid Angular APIs marked in the documentation as “_Security Risk_.”**
+For more information, see the [Trusting safe values](guide/security#bypass-security-apis) section of this page.
+
+
+
+<h2 id='xss'>
+  Preventing cross-site scripting (XSS)
+</h2>
+
+
+
+[Cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) enables attackers
+to inject malicious code into web pages. Such code can then, for example, steal user data (in
+particular, login data) or perform actions to impersonate the user. This is one of the most
+common attacks on the web.
+
+To block XSS attacks, you must prevent malicious code from entering the DOM (Document Object Model). For example, if
+attackers can trick you into inserting a `<script>` tag in the DOM, they can run arbitrary code on
+your website. The attack isn't limited to `<script>` tags&mdash;many elements and properties in the
+DOM allow code execution, for example, `<img onerror="...">` and `<a href="javascript:...">`. If
+attacker-controlled data enters the DOM, expect security vulnerabilities.
+
+### Angular’s cross-site scripting security model
+
+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,
+Angular sanitizes and escapes untrusted values.
+
+_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.
+To prevent these vulnerabilities, use
+the [offline template compiler](guide/security#offline-template-compiler), also known as _template injection_.
+
+### Sanitization and security contexts
+
+_Sanitization_ is the inspection of an untrusted value, turning it into a value that's safe to insert into
+the DOM. In many cases, sanitization doesn't change a value at all. Sanitization depends on context:
+a value that's harmless in CSS is potentially dangerous in a URL.
+
+Angular defines the following security contexts:
+
+* **HTML** is used when interpreting a value as HTML, for example, when binding to `innerHtml`.
+* **Style** is used when binding CSS into the `style` property.
+* **URL** is used for URL properties, such as `<a href>`.
+* **Resource URL** is a URL that will be loaded and executed as code, for example, in `<script src>`.
+
+Angular sanitizes untrusted values for HTML, styles, and URLs; sanitizing resource URLs isn't
+possible because they contain arbitrary code. In development mode, Angular prints a console warning
+when it has to change a value during sanitization.
+
+### Sanitization example
+
+The following template binds the value of `htmlSnippet`, once by interpolating it into an element's
+content, and once by binding it to the `innerHTML` property of an element:
+
+
+<code-example path="security/src/app/inner-html-binding.component.html" title="src/app/inner-html-binding.component.html">
+
+</code-example>
+
+
+
+Interpolated content is always escaped&mdash;the HTML isn't interpreted and the browser displays
+angle brackets in the element's text content.
+
+For the HTML to be interpreted, bind it to an HTML property such as `innerHTML`. But binding
+a value that an attacker might control into `innerHTML` normally causes an XSS
+vulnerability. For example, code contained in a `<script>` tag is executed:
+
+
+<code-example path="security/src/app/inner-html-binding.component.ts" linenums="false" title="src/app/inner-html-binding.component.ts (class)" region="class">
+
+</code-example>
+
+
+
+Angular recognizes the value as unsafe and automatically sanitizes it, which removes the `<script>`
+tag but keeps safe content such as the text content of the `<script>` tag and the `<b>` element.
+
+
+<figure>
+  <img src='generated/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'>
+</figure>
+
+
+### Direct use of the DOM APIs and explicit sanitization calls
+
+The built-in browser DOM APIs don't automatically protect you from security vulnerabilities.
+For example, `document`, the node available through `ElementRef`, and many third-party APIs
+contain unsafe methods. In the same way, if you interact with other libraries that manipulate
+the DOM, you likely won't have the same automatic sanitization as with Angular interpolations.
+Avoid directly interacting with the DOM and instead use Angular templates where possible.
+
+For cases where this is unavoidable, use the built-in Angular sanitization functions.
+Sanitize untrusted values with the [DomSanitizer.sanitize](api/platform-browser/DomSanitizer#sanitize)
+method and the appropriate `SecurityContext`. That function also accepts values that were
+marked as trusted using the `bypassSecurityTrust`... functions, and will not sanitize them,
+as [described below](#bypass-security-apis).
+
+### Content security policy
+
+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
+[An Introduction to Content Security Policy](http://www.html5rocks.com/en/tutorials/security/content-security-policy/)
+on the HTML5Rocks website.
+
+
+{@a offline-template-compiler}
+
+
+### Use the offline template compiler
+
+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](guide/dynamic-form) guide page.
+
+### Server-side XSS protection
+
+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,
+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.
+
+
+
+<h2 id='bypass-security-apis'>
+  Trusting safe values
+</h2>
+
+
+
+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
+security reviewer.
+
+To mark a value as trusted, inject `DomSanitizer` and call one of the
+following methods:
+
+* `bypassSecurityTrustHtml`
+* `bypassSecurityTrustScript`
+* `bypassSecurityTrustStyle`
+* `bypassSecurityTrustUrl`
+* `bypassSecurityTrustResourceUrl`
+
+Remember, whether a value is safe depends on context, so choose the right context for
+your intended use of the value. Imagine that the following template needs to bind a URL to a
+`javascript:alert(...)` call:
+
+
+<code-example path="security/src/app/bypass-security.component.html" linenums="false" title="src/app/bypass-security.component.html (URL)" region="URL">
+
+</code-example>
+
+
+
+Normally, Angular automatically sanitizes the URL, disables the dangerous code, and
+in development mode, logs this action to the console. To prevent
+this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` call:
+
+
+<code-example path="security/src/app/bypass-security.component.ts" linenums="false" title="src/app/bypass-security.component.ts (trust-url)" region="trust-url">
+
+</code-example>
+
+
+
+<figure>
+  <img src='generated/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'>
+</figure>
+
+
+
+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
+could execute. So call a method on the controller to construct a trusted video URL, which causes
+Angular to allow binding into `<iframe src>`:
+
+
+<code-example path="security/src/app/bypass-security.component.html" linenums="false" title="src/app/bypass-security.component.html (iframe)" region="iframe">
+
+</code-example>
+
+
+
+<code-example path="security/src/app/bypass-security.component.ts" linenums="false" title="src/app/bypass-security.component.ts (trust-video-url)" region="trust-video-url">
+
+</code-example>
+
+
+
+
+<h2 id='http'>
+  HTTP-level vulnerabilities
+</h2>
+
+
+
+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
+on the server side, but Angular provides helpers to make integration on the client side easier.
+
+
+<h3 id='xsrf'>
+  Cross-site request forgery
+</h3>
+
+
+
+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`).
+
+Assume the user is logged into the application at `example-bank.com`.
+The user opens an email and clicks a link to `evil.com`, which opens in a new tab.
+
+The `evil.com` page immediately sends a malicious request to `example-bank.com`.
+Perhaps it's a request to transfer money from the user's account to the attacker's account.
+The browser automatically sends the `example-bank.com` cookies (including the authentication cookie) with this request.
+
+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`.
+
+To prevent this, the application must ensure that a user request originates from the real
+application, not from a different site.
+The server and client must cooperate to thwart this attack.
+
+In a common anti-XSRF technique, the application server sends a randomly
+generated authentication token in a cookie.
+The client code reads the cookie and adds a custom request header with the token in all subsequent requests.
+The server compares the received cookie value to the request header value and rejects the request if the values are missing or don't match.
+
+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.
+
+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).
+
+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">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.
+
+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>.
+
+
+<h3 id='xssi'>
+  Cross-site script inclusion (XSSI)
+</h3>
+
+
+
+Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker's website to
+read data from a JSON API. The attack works on older browsers by overriding native JavaScript
+object constructors, and then including an API URL using a `<script>` tag.
+
+This attack is only successful if the returned JSON is executable as JavaScript. Servers can
+prevent an attack by prefixing all JSON responses to make them non-executable, by convention, using the
+well-known string `")]}',\n"`.
+
+Angular's `HttpClient` library recognizes this convention and automatically strips the string
+`")]}',\n"` from all responses before further parsing.
+
+For more information, see the XSSI section of this [Google web security blog
+post](https://security.googleblog.com/2011/05/website-security-for-webmasters.html).
+
+
+
+<h2 id='code-review'>
+  Auditing Angular applications
+</h2>
+
+
+
+Angular applications must follow the same security principles as regular web applications, and
+must be audited as such. Angular-specific APIs that should be audited in a security review,
+such as the [_bypassSecurityTrust_](guide/security#bypass-security-apis) methods, are marked in the documentation
+as security sensitive.
diff --git a/aio/content/guide/service-worker-communications.md b/aio/content/guide/service-worker-communications.md
new file mode 100644
index 000000000000..3a45b697b247
--- /dev/null
+++ b/aio/content/guide/service-worker-communications.md
@@ -0,0 +1,54 @@
+# Service worker communication
+
+Importing `ServiceWorkerModule` into your `AppModule` doesn't just register the service worker, it also provides a few services you can use to interact with the service worker and control the caching of your app.
+
+#### Prerequisites
+
+A basic understanding of the following:
+* [Getting Started with Service Workers](guide/service-worker-getting-started).
+
+<hr />
+
+
+## `SwUpdate` service
+
+The `SwUpdate` service gives you access to events that indicate when the service worker has discovered an available update for your app or when it has activated such an update&mdash;meaning it is now serving content from that update to your app.
+
+The `SwUpdate` service supports four separate operations:
+* Getting notified of *available* updates. These are new versions of the app to be loaded if the page is refreshed.
+* Getting notified of update *activation*. This is when the service worker starts serving a new version of the app immediately.
+* Asking the service worker to check the server for new updates.
+* Asking the service worker to activate the latest version of the app for the current tab.
+
+### Available and activated updates
+
+The two update events, `available` and `activated`, are `Observable` properties of `SwUpdate`:
+
+<code-example path="service-worker-getting-started/src/app/log-update.service.ts" linenums="false" title="log-update.service.ts" region="sw-update"> </code-example>
+
+
+You can use these events to notify the user of a pending update or to refresh their pages when the code they are running is out of date.
+
+### Checking for updates
+
+It's possible to ask the service worker to check if any updates have been deployed to the server. You might choose to do this if you have a site that changes frequently or want updates to happen on a schedule.
+
+Do this with the `checkForUpdate()` method:
+
+<code-example path="service-worker-getting-started/src/app/check-for-update.service.ts" linenums="false" title="check-for-update.service.ts" region="sw-check-update"> </code-example>
+
+
+This method returns a `Promise` which indicates that the update check has completed successfully, though it does not indicate whether an update was discovered as a result of the check. Even if one is found, the service worker must still successfully download the changed files, which can fail. If successful, the `available` event will indicate availability of a new version of the app.
+
+### Forcing update activation
+
+If the current tab needs to be updated to the latest app version immediately, it can ask to do so with the `activateUpdate()` method:
+
+<code-example path="service-worker-getting-started/src/app/prompt-update.service.ts" linenums="false" title="prompt-update.service.ts" region="sw-activate"> </code-example>
+
+Doing this could break lazy-loading into currently running apps, especially if the lazy-loaded chunks use filenames with hashes, which change every version.
+
+## More on Angular service workers
+
+You may also be interested in the following:
+* [Service Worker in Production](guide/service-worker-devops).
diff --git a/aio/content/guide/service-worker-config.md b/aio/content/guide/service-worker-config.md
new file mode 100644
index 000000000000..e5ba6e3afe58
--- /dev/null
+++ b/aio/content/guide/service-worker-config.md
@@ -0,0 +1,208 @@
+# Service worker configuration
+
+#### Prerequisites
+
+A basic understanding of the following:
+* [Service Worker in Production](guide/service-worker-devops).
+
+<hr />
+
+The `src/ngsw-config.json` configuration file specifies which files and data URLs the Angular
+service worker should cache and how it should update the cached files and data. The
+CLI processes the configuration file during `ng build --prod`. Manually, you can process
+it with the `ngsw-config` tool:
+
+```sh
+ngsw-config dist src/ngsw-config.json /base/href
+```
+
+The configuration file uses the JSON format. All file paths must begin with `/`, which is the deployment directory&mdash;usually `dist` in CLI projects.
+
+{@a glob-patterns}
+Unless otherwise noted, patterns use a limited glob format:
+
+* `**` matches 0 or more path segments.
+* `*` matches 0 or more characters excluding `/`.
+* `?` matches exactly one character excluding `/`.
+* The `!` prefix marks the pattern as being negative, meaning that only files that don't match the pattern will be included.
+
+Example patterns:
+
+* `/**/*.html` specifies all HTML files.
+* `/*.html` specifies only HTML files in the root.
+* `!/**/*.map` exclude all sourcemaps.
+
+Each section of the configuration file is described below.
+
+## `appData`
+
+This section enables you to pass any data you want that describes this particular version of the app.
+The `SwUpdate` service includes that data in the update notifications. Many apps use this section to provide additional information for the display of UI popups, notifying users of the available update.
+
+{@a index-file}
+## `index`
+
+Specifies the file that serves as the index page to satisfy navigation requests. Usually this is `/index.html`.
+
+## `assetGroups`
+
+*Assets* are resources that are part of the app version that update along with the app. They can include resources loaded from the page's origin as well as third-party resources loaded from CDNs and other external URLs. As not all such external URLs may be known at build time, URL patterns can be matched.
+
+This field contains an array of asset groups, each of which defines a set of asset resources and the policy by which they are cached.
+
+```json
+{
+  "assetGroups": [{
+    ...
+  }, {
+    ...
+  }]
+}
+```
+
+Each asset group specifies both a group of resources and a policy that governs them. This policy determines when the resources are fetched and what happens when changes are detected.
+
+Asset groups follow the Typescript interface shown here:
+
+```typescript
+interface AssetGroup {
+  name: string;
+  installMode?: 'prefetch' | 'lazy';
+  updateMode?: 'prefetch' | 'lazy';
+  resources: {
+    files?: string[];
+    /** @deprecated As of v6 `versionedFiles` and `files` options have the same behavior. Use `files` instead. */
+    versionedFiles?: string[];
+    urls?: string[];
+  };
+}
+```
+
+### `name`
+
+A `name` is mandatory. It identifies this particular group of assets between versions of the configuration.
+
+### `installMode`
+
+The `installMode` determines how these resources are initially cached. The `installMode` can be either of two values:
+
+* `prefetch` tells the Angular service worker to fetch every single listed resource while it's caching the current version of the app. This is bandwidth-intensive but ensures resources are available whenever they're requested, even if the browser is currently offline.
+
+* `lazy` does not cache any of the resources up front. Instead, the Angular service worker only caches resources for which it receives requests. This is an on-demand caching mode. Resources that are never requested will not be cached. This is useful for things like images at different resolutions, so the service worker only caches the correct assets for the particular screen and orientation.
+
+### `updateMode`
+
+For resources already in the cache, the `updateMode` determines the caching behavior when a new version of the app is discovered. Any resources in the group that have changed since the previous version are updated in accordance with `updateMode`.
+
+* `prefetch` tells the service worker to download and cache the changed resources immediately.
+
+* `lazy` tells the service worker to not cache those resources. Instead, it treats them as unrequested and waits until they're requested again before updating them. An `updateMode` of `lazy` is only valid if the `installMode` is also `lazy`.
+
+### `resources`
+
+This section describes the resources to cache, broken up into three groups.
+
+* `files` lists patterns that match files in the distribution directory. These can be single files or glob-like patterns that match a number of files.
+
+* `versionedFiles` has been deprecated. As of v6 `versionedFiles` and `files` options have the same behavior. Use `files` instead.
+
+* `urls` includes both URLs and URL patterns that will be matched at runtime. These resources are not fetched directly and do not have content hashes, but they will be cached according to their HTTP headers. This is most useful for CDNs such as the Google Fonts service.<br>
+  _(Negative glob patterns are not supported and `?` will be matched literally; i.e. it will not match any character other than `?`.)_
+
+## `dataGroups`
+
+Unlike asset resources, data requests are not versioned along with the app. They're cached according to manually-configured policies that are more useful for situations such as API requests and other data dependencies.
+
+Data groups follow this Typescript interface:
+
+```typescript
+export interface DataGroup {
+  name: string;
+  urls: string[];
+  version?: number;
+  cacheConfig: {
+    maxSize: number;
+    maxAge: string;
+    timeout?: string;
+    strategy?: 'freshness' | 'performance';
+  };
+}
+```
+
+### `name`
+Similar to `assetGroups`, every data group has a `name` which uniquely identifies it.
+
+### `urls`
+A list of URL patterns. URLs that match these patterns will be cached according to this data group's policy.<br>
+  _(Negative glob patterns are not supported and `?` will be matched literally; i.e. it will not match any character other than `?`.)_
+
+### `version`
+Occasionally APIs change formats in a way that is not backward-compatible. A new version of the app may not be compatible with the old API format and thus may not be compatible with existing cached resources from that API.
+
+`version` provides a mechanism to indicate that the resources being cached have been updated in a backwards-incompatible way, and that the old cache entries&mdash;those from previous versions&mdash;should be discarded.
+
+`version` is an integer field and defaults to `0`.
+
+### `cacheConfig`
+This section defines the policy by which matching requests will be cached.
+
+#### `maxSize`
+(required) The maximum number of entries, or responses, in the cache. Open-ended caches can grow in unbounded ways and eventually exceed storage quotas, calling for eviction.
+
+#### `maxAge`
+(required) The `maxAge` parameter indicates how long responses are allowed to remain in the cache before being considered invalid and evicted. `maxAge` is a duration string, using the following unit suffixes:
+
+* `d`: days
+* `h`: hours
+* `m`: minutes
+* `s`: seconds
+* `u`: milliseconds
+
+For example, the string `3d12h` will cache content for up to three and a half days.
+
+#### `timeout`
+This duration string specifies the network timeout. The network timeout is how long the Angular service worker will wait for the network to respond before using a cached response, if configured to do so.
+
+#### `strategy`
+
+The Angular service worker can use either of two caching strategies for data resources.
+
+* `performance`, the default, optimizes for responses that are as fast as possible. If a resource exists in the cache, the cached version is used. This allows for some staleness, depending on the `maxAge`, in exchange for better performance. This is suitable for resources that don't change often; for example, user avatar images.
+
+* `freshness` optimizes for currency of data, preferentially fetching requested data from the network. Only if the network times out, according to `timeout`, does the request fall back to the cache. This is useful for resources that change frequently; for example, account balances.
+
+## `navigationUrls`
+
+This optional section enables you to specify a custom list of URLs that will be redirected to the index file.
+
+### Handling navigation requests
+
+The ServiceWorker will redirect navigation requests that don't match any `asset` or `data` group to the specified [index file](#index-file). A request is considered to be a navigation request if:
+
+1. Its [mode](https://developer.mozilla.org/en-US/docs/Web/API/Request/mode) is `navigation`.
+2. It accepts a `text/html` response (as determined by the value of the `Accept` header).
+3. Its URL matches certain criteria (see below).
+
+By default, these criteria are:
+
+1. The URL must not contain a file extension (i.e. a `.`) in the last path segment.
+2. The URL must not contain `__`.
+
+### Matching navigation request URLs
+
+While these default criteria are fine in most cases, it is sometimes desirable to configure different rules. For example, you may want to ignore specific routes (that are not part of the Angular app) and pass them through to the server.
+
+This field contains an array of URLs and [glob-like](#glob-patterns) URL patterns that will be matched at runtime. It can contain both negative patterns (i.e. patterns starting with `!`) and non-negative patterns and URLs.
+
+Only requests whose URLs match _any_ of the non-negative URLs/patterns and _none_ of the negative ones will be considered navigation requests. The URL query will be ignored when matching.
+
+If the field is omitted, it defaults to:
+
+```ts
+[
+  '/**',           // Include all URLs.
+  '!/**/*.*',      // Exclude URLs to files.
+  '!/**/*__*',     // Exclude URLs containing `__` in the last segment.
+  '!/**/*__*/**',  // Exclude URLs containing `__` in any other segment.
+]
+```
diff --git a/aio/content/guide/service-worker-devops.md b/aio/content/guide/service-worker-devops.md
new file mode 100644
index 000000000000..c7a588f897e3
--- /dev/null
+++ b/aio/content/guide/service-worker-devops.md
@@ -0,0 +1,333 @@
+# Service worker in production
+
+This page is a reference for deploying and supporting production apps that use the Angular service worker. It explains how the Angular service worker fits into the larger production environment, the service worker's behavior under various conditions, and available recourses and fail-safes.
+
+#### Prerequisites
+
+A basic understanding of the following:
+* [Service Worker Communication](guide/service-worker-communications).
+
+<hr />
+
+## Service worker and caching of app resources
+
+Conceptually, you can imagine the Angular service worker as a forward cache or a CDN edge that is installed in the end user's web browser. The service worker's job is to satisfy requests made by the Angular app for resources or data from a local cache, without needing to wait for the network. Like any cache, it has rules for how content is expired and updated.
+
+{@a versions}
+
+### App versions
+
+In the context of an Angular service worker, a "version" is a collection of resources that represent a specific build of the Angular app. Whenever a new build of the app is deployed, the service worker treats that build as a new version of the app. This is true even if only a single file is updated. At any given time, the service worker may have multiple versions of the app in its cache and it may be serving them simultaneously. For more information, see the [App tabs](guide/service-worker-devops#tabs) section below.
+
+To preserve app integrity, the Angular service worker groups all files into a version together. The files grouped into a version usually include HTML, JS, and CSS files. Grouping of these files is essential for integrity because HTML, JS, and CSS files frequently refer to each other and depend on specific content. For example, an `index.html` file might have a `<script>` tag that references `bundle.js` and it might attempt to call a function `startApp()` from within that script. Any time this version of `index.html` is served, the corresponding `bundle.js` must be served with it. For example, assume that the `startApp()` function is renamed to `runApp()` in both files. In this scenario, it is not valid to serve the old `index.html`, which calls `startApp()`, along with the new bundle, which defines `runApp()`.
+
+This file integrity is especially important when lazy loading modules.
+A JS bundle may reference many lazy chunks, and the filenames of the
+lazy chunks are unique to the particular build of the app. If a running
+app at version `X` attempts to load a lazy chunk, but the server has
+updated to version `X + 1` already, the lazy loading operation will fail.
+
+The version identifier of the app is determined by the contents of all
+resources, and it changes if any of them change. In practice, the version
+is determined by the contents of the `ngsw.json` file, which includes
+hashes for all known content. If any of the cached files change, the file's
+hash will change in `ngsw.json`, causing the Angular service worker to
+treat the active set of files as a new version.
+
+With the versioning behavior of the Angular service worker, an application
+server can ensure that the Angular app always has a consistent set of files.
+
+#### Update checks
+
+Every time the user opens or refreshes the application, the Angular service worker
+checks for updates to the app by looking for updates to the `ngsw.json` manifest. If
+an update is found, it is downloaded and cached automatically, and will be served
+the next time the application is loaded.
+
+### Resource integrity
+
+One of the potential side effects of long caching is inadvertently
+caching an invalid resource. In a normal HTTP cache, a hard refresh
+or cache expiration limits the negative effects of caching an invalid
+file. A service worker ignores such constraints and effectively long
+caches the entire app. Consequently, it is essential that the service worker
+gets the correct content.
+
+To ensure resource integrity, the Angular service worker validates
+the hashes of all resources for which it has a hash. Typically for
+a CLI app, this is everything in the `dist` directory covered by
+the user's `src/ngsw-config.json` configuration.
+
+If a particular file fails validation, the Angular service worker
+attempts to re-fetch the content using a "cache-busting" URL
+parameter to eliminate the effects of browser or intermediate
+caching. If that content also fails validation, the service worker
+considers the entire version of the app to be invalid and it stops
+serving the app. If necessary, the service worker enters a safe mode
+where requests fall back on the network, opting not to use its cache
+if the risk of serving invalid, broken, or outdated content is high.
+
+Hash mismatches can occur for a variety of reasons:
+
+* Caching layers in between the origin server and the end user could serve stale content.
+* A non-atomic deployment could result in the Angular service worker having visibility of partially updated content.
+* Errors during the build process could result in updated resources without `ngsw.json` being updated. The reverse could also happen resulting in an updated `ngsw.json` without updated resources.
+
+#### Unhashed content
+
+The only resources that have hashes in the `ngsw.json`
+manifest are resources that were present in the `dist`
+directory at the time the manifest was built. Other
+resources, especially those loaded from CDNs, have
+content that is unknown at build time or are updated
+more frequently than the app is deployed.
+
+If the Angular service worker does not have a hash to validate
+a given resource, it still caches its contents but it honors
+the HTTP caching headers by using a policy of "stale while
+revalidate." That is, when HTTP caching headers for a cached
+resource indicate that the resource has expired, the Angular
+service worker continues to serve the content and it attempts
+to refresh the resource in the background. This way, broken
+unhashed resources do not remain in the cache beyond their
+configured lifetimes.
+
+{@a tabs}
+
+### App tabs
+
+It can be problematic for an app if the version of resources
+it's receiving changes suddenly or without warning. See the
+[Versions](guide/service-worker-devops#versions) section above
+for a description of such issues.
+
+The Angular service worker provides a guarantee: a running app
+will continue to run the same version of the app. If another
+instance of the app is opened in a new web browser tab, then
+the most current version of the app is served. As a result,
+that new tab can be running a different version of the app
+than the original tab.
+
+It's important to note that this guarantee is **stronger**
+than that provided by the normal web deployment model. Without
+a service worker, there is no guarantee that code lazily loaded
+later in a running app is from the same version as the initial
+code for the app.
+
+There are a few limited reasons why the Angular service worker
+might change the version of a running app. Some of them are
+error conditions:
+
+* The current version becomes invalid due to a failed hash.
+* An unrelated error causes the service worker to enter safe mode; that is, temporary deactivation.
+
+The Angular service worker is aware of which versions are in
+use at any given moment and it cleans up versions when
+no tab is using them.
+
+Other reasons the Angular service worker might change the version
+of a running app are normal events:
+
+* The page is reloaded/refreshed.
+* The page requests an update be immediately activated via the `SwUpdate` service.
+
+### Service worker updates
+
+The Angular service worker is a small script that runs in web browsers.
+From time to time, the service worker will be updated with bug
+fixes and feature improvements.
+
+The Angular service worker is downloaded when the app is first opened
+and when the app is accessed after a period of inactivity. If the
+service worker has changed, the service worker will be updated in the background.
+
+Most updates to the Angular service worker are transparent to the
+app&mdash;the old caches are still valid and content is still served
+normally. However, occasionally a bugfix or feature in the Angular
+service worker requires the invalidation of old caches. In this case,
+the app will be refreshed transparently from the network.
+
+
+## Debugging the Angular service worker
+
+Occasionally, it may be necessary to examine the Angular service
+worker in a running state to investigate issues or to ensure that
+it is operating as designed. Browsers provide built-in tools for
+debugging service workers and the Angular service worker itself
+includes useful debugging features.
+
+### Locating and analyzing debugging information
+
+The Angular service worker exposes debugging information under
+the `ngsw/` virtual directory. Currently, the single exposed URL
+is `ngsw/state`. Here is an example of this debug page's contents:
+
+```
+NGSW Debug Info:
+
+Driver state: NORMAL ((nominal))
+Latest manifest hash: eea7f5f464f90789b621170af5a569d6be077e5c
+Last update check: never
+
+=== Version eea7f5f464f90789b621170af5a569d6be077e5c ===
+
+Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100f65
+
+=== Idle Task Queue ===
+Last update tick: 1s496u
+Last update run: never
+Task queue:
+ * init post-load (update, cleanup)
+
+Debug log:
+```
+
+#### Driver state
+
+The first line indicates the driver state:
+
+```
+Driver state: NORMAL ((nominal))
+```
+
+`NORMAL` indicates that the service worker is operating normally and is not in a degraded state.
+
+There are two possible degraded states:
+
+* `EXISTING_CLIENTS_ONLY`: the service worker does not have a
+clean copy of the latest known version of the app. Older cached
+versions are safe to use, so existing tabs continue to run from
+cache, but new loads of the app will be served from the network.
+
+* `SAFE_MODE`: the service worker cannot guarantee the safety of
+using cached data. Either an unexpected error occurred or all
+cached versions are invalid. All traffic will be served from the
+network, running as little service worker code as possible.
+
+In both cases, the parenthetical annotation provides the
+error that caused the service worker to enter the degraded state.
+
+
+#### Latest manifest hash
+
+```
+Latest manifest hash: eea7f5f464f90789b621170af5a569d6be077e5c
+```
+
+This is the SHA1 hash of the most up-to-date version of the app that the service worker knows about.
+
+
+#### Last update check
+
+```
+Last update check: never
+```
+
+This indicates the last time the service worker checked for a new version, or update, of the app. `never` indicates that the service worker has never checked for an update.
+
+In this example debug file, the update check is currently scheduled, as explained the next section.
+
+#### Version
+
+```
+=== Version eea7f5f464f90789b621170af5a569d6be077e5c ===
+
+Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100f65
+```
+
+In this example, the service worker has one version of the app cached and
+being used to serve two different tabs. Note that this version hash
+is the "latest manifest hash" listed above. Both clients are on the
+latest version. Each client is listed by its ID from the `Clients`
+API in the browser.
+
+
+#### Idle task queue
+
+```
+=== Idle Task Queue ===
+Last update tick: 1s496u
+Last update run: never
+Task queue:
+ * init post-load (update, cleanup)
+```
+
+The Idle Task Queue is the queue of all pending tasks that happen
+in the background in the service worker. If there are any tasks
+in the queue, they are listed with a description. In this example,
+the service worker has one such task scheduled, a post-initialization
+operation involving an update check and cleanup of stale caches.
+
+The last update tick/run counters give the time since specific
+events happened related to the idle queue. The "Last update run"
+counter shows the last time idle tasks were actually executed.
+"Last update tick" shows the time since the last event after
+which the queue might be processed.
+
+
+#### Debug log
+
+```
+Debug log:
+```
+
+Errors that occur within the service worker will be logged here.
+
+
+### Developer Tools
+
+Browsers such as Chrome provide developer tools for interacting
+with service workers. Such tools can be powerful when used properly,
+but there are a few things to keep in mind.
+
+* When using developer tools, the service worker is kept running
+in the background and never restarts. This can cause behavior with Dev
+Tools open to differ from behavior a user might experience.
+
+* If you look in the Cache Storage viewer, the cache is frequently
+out of date. Right click the Cache Storage title and refresh the caches.
+
+Stopping and starting the service worker in the Service Worker
+pane triggers a check for updates.
+
+## Service Worker Safety
+
+Like any complex system, bugs or broken configurations can cause
+the Angular service worker to act in unforeseen ways. While its
+design attempts to minimize the impact of such problems, the
+Angular service worker contains several failsafe mechanisms in case
+an administrator ever needs to deactivate the service worker quickly.
+
+### Fail-safe
+
+To deactivate the service worker, remove or rename the
+`ngsw-config.json` file. When the service worker's request
+for `ngsw.json` returns a `404`, then the service worker
+removes all of its caches and de-registers itself,
+essentially self-destructing.
+
+### Safety Worker
+
+Also included in the `@angular/service-worker` NPM package is a small
+script `safety-worker.js`, which when loaded will unregister itself
+from the browser. This script can be used as a last resort to get rid
+of unwanted service workers already installed on client pages.
+
+It's important to note that you cannot register this worker directly,
+as old clients with cached state may not see a new `index.html` which
+installs the different worker script. Instead, you must serve the
+contents of `safety-worker.js` at the URL of the Service Worker script
+you are trying to unregister, and must continue to do so until you are
+certain all users have successfully unregistered the old worker. For
+most sites, this means that you should serve the safety worker at the
+old Service Worker URL forever.
+
+This script can be used both to deactivate `@angular/service-worker`
+as well as any other Service Workers which might have been served in
+the past on your site.
+
+## More on Angular service workers
+
+You may also be interested in the following:
+* [Service Worker Configuration](guide/service-worker-config).
+
diff --git a/aio/content/guide/service-worker-getting-started.md b/aio/content/guide/service-worker-getting-started.md
new file mode 100644
index 000000000000..b30c5ee7a2c3
--- /dev/null
+++ b/aio/content/guide/service-worker-getting-started.md
@@ -0,0 +1,155 @@
+# Getting started with service workers
+
+
+This document explains how to enable Angular service worker support in your CLI projects. It then uses a simple example to show you a service worker in action, demonstrating loading and basic caching. 
+
+#### Prerequisites
+
+A basic understanding of the following:
+* [Introduction to Angular service workers](guide/service-worker-intro).
+* Angular v6, including Angular CLI v6.
+
+<hr />
+
+
+## Adding a service worker to your project
+
+To set up the Angular service worker in your project, use the CLI command `ng add @angular/pwa`. It takes care of configuring your app to use service workers by adding the `service-worker` package along 
+with setting up the necessary support files.
+
+```sh
+ng add  @angular/pwa --project *project-name* 
+```
+
+The above command completes the following actions:
+
+1. Adds the `@angular/service-worker` package to your project. 
+2. Enables service worker build support in the CLI.
+3. Imports and registers the service worker in the app module.
+4. Updates the `index.html` file:
+    * Includes a link to add the `manifest.json` file.
+    * Adds meta tags for `theme-color`.
+5. Installs icon files to support the installed Progressive Web App (PWA).
+6. Creates the service worker configuration file called [`ngsw-config.json`](/guide/service-worker-config), which specifies the caching behaviors and other settings. 
+
+
+ Now, build the project: 
+
+```sh
+ng build --prod
+```
+
+The CLI project is now set up to use the Angular service worker.
+
+
+## Service worker in action: a tour
+
+This section demonstrates a service worker in action, 
+using an example application. 
+
+### Serving with `http-server`
+
+Because `ng serve` does not work with service workers, you must use a separate HTTP server to test your project locally. You can use any HTTP server. The example below uses the [http-server](https://www.npmjs.com/package/http-server) package from npm. To reduce the possibility of conflicts, test on a dedicated port.
+
+To serve with `http-server`, change to the directory containing your web files and start the web server: 
+
+```sh
+cd dist/*project-name*
+http-server -p 8080
+```
+
+### Initial load
+
+With the server running, you can point your browser at http://localhost:8080/. Your application should load normally.
+
+**Tip:** When testing Angular service workers, it's a good idea to use an incognito or private window in your browser to ensure the service worker doesn't end up reading from a previous leftover state, which can cause unexpected behavior.
+
+### Simulating a network issue
+
+To simulate a network issue, disable network interaction for your application. In Chrome: 
+
+1. Select **Tools** > **Developer Tools** (from the Chrome menu located at the top right corner).
+2. Go to the **Network tab**.
+3. Check the **Offline box**.
+
+<figure>
+  <img src="generated/images/guide/service-worker/offline-checkbox.png" alt="The offline checkbox in the Network tab is checked">
+</figure>
+
+Now the app has no access to network interaction.
+
+For applications that do not use the Angular service worker, refreshing now would display Chrome's Internet disconnected page that says "There is no Internet connection". 
+
+With the addition of an Angular service worker, the application behavior changes. On a refresh, the page loads normally. 
+
+If you look at the Network tab, you can verify that the service worker is active.
+
+<figure>
+  <img src="generated/images/guide/service-worker/sw-active.png" alt="Requests are marked as from ServiceWorker">
+</figure>
+
+Notice that under the "Size" column, the requests state is `(from ServiceWorker)`. This means that the resources are not being loaded from the network. Instead, they are being loaded from the service worker's cache.
+
+
+### What's being cached?
+
+Notice that all of the files the browser needs to render this application are cached. The `ngsw-config.json` boilerplate configuration is set up to cache the specific resources used by the CLI:
+
+* `index.html`.
+* `favicon.ico`.
+* Build artifacts (JS and CSS bundles).
+* Anything under `assets`.
+
+### Making changes to your application
+
+Now that you've seen how service workers cache your application, the 
+next step is understanding how updates work. 
+
+1. If you're testing in an incognito window, open a second blank tab. This will keep the incognito and the cache state alive during your test.
+
+2. Close the application tab, but not the window. This should also close the Developer Tools. 
+
+3. Shut down `http-server`.
+
+4. Next, make a change to the application, and watch the service worker install the update.
+
+5. Open `src/app/app.component.html` for editing.
+
+6. Change the text `Welcome to {{title}}!` to `Bienvenue à {{title}}!`.
+
+7. Build and run the server again:
+
+```sh
+ng build --prod
+cd dist
+http-server -p 8080
+```
+
+### Updating your application in the browser
+
+Now look at how the browser and service worker handle the updated application.
+
+1. Open http://localhost:8080 again in the same window. What happens?
+
+<figure>
+  <img src="generated/images/guide/service-worker/welcome-msg-en.png" alt="It still says Welcome to Service Workers!">
+</figure>
+
+What went wrong? Nothing, actually. The Angular service worker is doing its job and serving the version of the application that it has **installed**, even though there is an update available. In the interest of speed, the service worker doesn't wait to check for updates before it serves the application that it has cached.
+
+If you look at the `http-server` logs, you can see the service worker requesting `/ngsw.json`. This is how the service worker checks for updates.
+
+2. Refresh the page.
+
+<figure>
+  <img src="generated/images/guide/service-worker/welcome-msg-fr.png" alt="The text has changed to say Bienvenue à app!">
+</figure>
+
+The service worker installed the updated version of your app *in the background*, and the next time the page is loaded or reloaded, the service worker switches to the latest version.
+
+<hr />
+
+## More on Angular service workers
+
+You may also be interested in the following:
+* [Communicating with service workers](guide/service-worker-communications).
diff --git a/aio/content/guide/service-worker-intro.md b/aio/content/guide/service-worker-intro.md
new file mode 100644
index 000000000000..7e1934a33d45
--- /dev/null
+++ b/aio/content/guide/service-worker-intro.md
@@ -0,0 +1,48 @@
+# Angular service worker introduction
+
+Service workers augment the traditional web deployment model and empower applications to deliver a user experience with the reliability and performance on par with natively-installed code.
+
+At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.
+
+Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them. For example, they can query a local cache and deliver a cached response if one is available. Proxying isn't limited to requests made through programmatic APIs, such as `fetch`; it also includes resources referenced in HTML and even the initial request to `index.html`. Service worker-based caching is thus completely programmable and doesn't rely on server-specified caching headers.
+
+Unlike the other scripts that make up an application, such as the Angular app bundle, the service worker is preserved after the user closes the tab. The next time that browser loads the application, the service worker loads first, and can intercept every request for resources to load the application. If the service worker is designed to do so, it can *completely satisfy the loading of the application, without the need for the network*. 
+
+Even across a fast reliable network, round-trip delays can introduce significant latency when loading the application. Using a service worker to reduce dependency on the network can significantly improve the user experience. 
+
+
+## Service workers in Angular
+
+Angular applications, as single-page applications, are in a prime position to benefit from the advantages of service workers. Starting with version 5.0.0, Angular ships with a service worker implementation. Angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs.
+
+Angular's service worker is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content. 
+
+The Angular service worker's behavior follows that design goal:
+
+* Caching an application is like installing a native application. The application is cached as one unit, and all files update together.
+* A running application continues to run with the same version of all files. It does not suddenly start receiving cached files from a newer version, which are likely incompatible.
+* When users refresh the application, they see the latest fully cached version. New tabs load the latest cached code.
+* Updates happen in the background, relatively quickly after changes are published. The previous version of the application is served until an update is installed and ready.
+* The service worker conserves bandwidth when possible. Resources are only downloaded if they've changed.
+
+To support these behaviors, the Angular service worker loads a *manifest* file from the server. The manifest describes the resources to cache and includes hashes of every file's contents. When an update to the application is deployed, the contents of the manifest change, informing the service worker that a new version of the application should be downloaded and cached. This manifest is generated from a CLI-generated configuration file called `ngsw-config.json`.
+
+Installing the Angular service worker is as simple as including an `NgModule`. In addition to registering the Angular service worker with the browser, this also makes a few services available for injection which interact with the service worker and can be used to control it. For example, an application can ask to be notified when a new update becomes available, or an application can ask the service worker to check the server for available updates.
+
+## Prerequisites
+
+Your application must run in a web browser that supports service workers. Currently, the latest versions of Chrome and Firefox are supported. To learn about other browsers that are service worker ready, see the [Can I Use](http://caniuse.com/#feat=serviceworkers) page.
+
+## Related resources
+
+For more information about service workers in general, see [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/). 
+
+For more information about browser support, see the [browser support](https://developers.google.com/web/fundamentals/primers/service-workers/#browser_support) section of [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/), Jake Archibald's [Is Serviceworker ready?](https://jakearchibald.github.io/isserviceworkerready/), and 
+[Can I Use](http://caniuse.com/#feat=serviceworkers). 
+
+The remainder of this Angular documentation specifically addresses the Angular implementation of service workers. 
+
+## More on Angular service workers
+
+You may also be interested in the following:
+* [Getting Started with service workers](guide/service-worker-getting-started).
diff --git a/aio/content/guide/set-document-title.md b/aio/content/guide/set-document-title.md
new file mode 100644
index 000000000000..c6152acc1d80
--- /dev/null
+++ b/aio/content/guide/set-document-title.md
@@ -0,0 +1,75 @@
+{@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="set-document-title"></live-example>.
+
+## The problem with *&lt;title&gt;*
+
+The obvious approach is to bind a property of the component to the HTML `<title>` like this:
+
+<code-example format=''>
+  &lt;title&gt;{{This_Does_Not_Work}}&lt;/title&gt;
+</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.
+
+You could grab the browser `document` object and set the title manually.
+That's dirty and undermines your chances of running the app outside of a browser someday.
+
+<div class="alert is-helpful">
+
+  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.
+
+</div>
+
+## Use the `Title` service
+
+Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
+The [Title](api/platform-browser/Title) service is a simple class that provides an API
+for getting and setting the current HTML document title:
+
+* `getTitle() : string`&mdash;Gets the title of the current HTML document.
+* `setTitle( newTitle : string )`&mdash;Sets the title of the current HTML document.
+
+You can inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
+
+
+<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à!
+
+<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="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`
+
+Generally you want to provide application-wide services in the root application component, `AppComponent`.
+
+This cookbook recommends registering the title service during bootstrapping,
+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
+the concept of a "document title" for that specific platform.
+Ideally, the application itself neither knows nor cares about the runtime environment.
+
diff --git a/aio/content/guide/setup-systemjs-anatomy.md b/aio/content/guide/setup-systemjs-anatomy.md
new file mode 100644
index 000000000000..0cf2aa63ddd5
--- /dev/null
+++ b/aio/content/guide/setup-systemjs-anatomy.md
@@ -0,0 +1,360 @@
+# Anatomy of the Setup Project
+
+The documentation [setup](guide/setup) procedures install a _lot_ of files.
+Most of them can be safely ignored.
+
+Application files _inside the_ **`src/`** and **`e2e/`** folders matter most to developers.
+
+Files _outside_ those folders condition the development environment.
+They rarely change and you may never view or modify them.
+If you do, this page can help you understand their purpose.
+
+
+<style>
+  td, th {vertical-align: top}
+</style>
+
+
+
+<table width="100%">
+
+  <col width="10%">
+
+  </col>
+
+  <col width="90%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      File
+    </th>
+
+    <th>
+      Purpose
+    </th>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>src/app/</code>
+    </td>
+
+    <td>
+
+
+      Angular application files go here.
+
+      Ships with the "Hello Angular" sample's
+      `AppComponent`, `AppModule`, a component unit test (`app.component.spec.ts`), and
+      the bootstrap file, `main.ts`.
+
+      Try the <live-example name="setup">sample application</live-example>
+      and the <live-example name="setup" stackblitz="quickstart-specs">unit test</live-example>
+      as _live examples_.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>e2e/</code>
+    </td>
+
+    <td>
+
+
+      _End-to-end_ (e2e) tests of the application,
+      written in Jasmine and run by the
+      <a href="http://www.protractortest.org/" title="Protractor: end-to-end testing for Angular">protractor</a>
+      e2e test runner.
+
+      Initialized with an e2e test for the "Hello Angular" sample.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>node_modules/</code>
+    </td>
+
+    <td>
+
+
+      The _npm_ packages installed with the `npm install` command.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>.editorconfig<br>
+.git/<br>
+.gitignore<br>
+.travis.yml</code>
+    </td>
+
+    <td>
+
+
+      Tooling configuration files and folders.
+      Ignore them until you have a compelling reason to do otherwise.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>CHANGELOG.md</code>
+    </td>
+
+    <td>
+
+
+      The history of changes to the _QuickStart_ repository.
+      Delete or ignore.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>favicon.ico</code>
+    </td>
+
+    <td>
+
+
+      The application icon that appears in the browser tab.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>index.html</code>
+    </td>
+
+    <td>
+
+
+      The application host page.
+      It loads a few essential scripts in a prescribed order.
+      Then it boots the application, placing the root `AppComponent`
+      in the custom `<my-app>` body tag.
+
+      The same `index.html` satisfies all documentation application samples.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>karma.conf.js</code>
+    </td>
+
+    <td>
+
+
+      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.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>karma-test-shim.js</code>
+    </td>
+
+    <td>
+
+
+      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.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>non-essential-files.txt</code>
+    </td>
+
+    <td>
+
+
+      A list of files that you can delete if you want to purge your setup of the
+      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!*
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>LICENSE</code>
+    </td>
+
+    <td>
+
+
+      The open source MIT license to use this setup code in your application.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>package.json</code>
+    </td>
+
+    <td>
+
+
+      Identifies `npm `package dependencies for the project.
+
+      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"
+         title="npm scripts for Angular documentation samples">Read more</a> about them.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>protractor.config.js</code>
+    </td>
+
+    <td>
+
+
+      Configuration for the
+      <a href="http://www.protractortest.org/" title="Protractor: end-to-end testing for Angular">protractor</a>
+      _end-to-end_ (e2e) test runner.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>README.md</code>
+    </td>
+
+    <td>
+
+
+      Instruction for using this git repository in your project.
+      Worth reading before deleting.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>styles.css</code>
+    </td>
+
+    <td>
+
+
+      Global styles for the application. Initialized with an `<h1>` style for the QuickStart demo.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>systemjs<br>.config.js</code>
+    </td>
+
+    <td>
+
+
+      Tells the **SystemJS** module loader where to find modules
+      referenced in JavaScript `import` statements. For example:
+      <code-example language="ts">
+        import { Component } from '@angular/core;
+      </code-example>
+
+
+      Don't touch this file unless you are fully versed in SystemJS configuration.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>systemjs<br>.config.extras.js</code>
+    </td>
+
+    <td>
+
+
+      Optional extra SystemJS configuration.
+      A way to add SystemJS mappings, such as for application _barrels_,
+      without changing the original `system.config.js`.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>tsconfig.json</code>
+    </td>
+
+    <td>
+
+
+      Tells the TypeScript compiler how to transpile TypeScript source files
+      into JavaScript files that run in all modern browsers.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>tslint.json</code>
+    </td>
+
+    <td>
+
+
+      The `npm` installed TypeScript linter inspects your TypeScript code
+      and complains when you violate one of its rules.
+
+      This file defines linting rules favored by the
+      [Angular style guide](guide/styleguide) and by the authors of the documentation.
+    </td>
+
+  </tr>
+
+</table>
+
diff --git a/aio/content/guide/setup.md b/aio/content/guide/setup.md
new file mode 100644
index 000000000000..d4813d15716d
--- /dev/null
+++ b/aio/content/guide/setup.md
@@ -0,0 +1,358 @@
+# Setup for local development
+
+{@a develop-locally}
+
+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.
+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.
+
+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").
+
+
+Make sure you have [Node.js® and npm installed](guide/setup#install-prerequisites "What if you don't have Node.js and npm?").
+
+{@a clone}
+
+
+## Clone
+
+Perform the _clone-to-launch_ steps with these terminal commands.
+
+
+<code-example language="sh" class="code-shell">
+  git clone https://github.com/angular/quickstart.git quickstart
+  cd quickstart
+  npm install
+  npm start
+
+</code-example>
+
+
+
+<div class="alert is-important">
+
+
+
+`npm start` fails in _Bash for Windows_ in versions earlier than the Creator's Update (April 2017).
+
+
+</div>
+
+
+
+{@a 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.
+
+
+<code-example language="sh" class="code-shell">
+  cd quickstart
+  npm install
+  npm start
+
+</code-example>
+
+
+
+<div class="alert is-important">
+
+
+
+`npm start` fails in _Bash for Windows_ in versions earlier than the Creator's Update (April 2017).
+
+
+</div>
+
+
+
+{@a non-essential}
+
+
+
+## Delete _non-essential_ files (optional)
+
+You can quickly delete the _non-essential_ files that concern testing and QuickStart repository maintenance
+(***including all git-related artifacts*** such as the `.git` folder and `.gitignore`!).
+
+
+<div class="alert is-important">
+
+
+
+Do this only in the beginning to avoid accidentally deleting your own tests and git setup!
+
+
+</div>
+
+
+
+Open a terminal window in the project folder and enter the following commands for your environment:
+
+### OS/X (bash)
+
+<code-example language="sh" class="code-shell">
+  xargs rm -rf &lt; non-essential-files.osx.txt
+  rm src/app/*.spec*.ts
+  rm non-essential-files.osx.txt
+
+</code-example>
+
+
+
+### Windows
+
+<code-example language="sh" class="code-shell">
+  for /f %i in (non-essential-files.txt) do del %i /F /S /Q
+  rd .git /s /q
+  rd e2e /s /q
+
+</code-example>
+
+
+
+{@a seed}
+
+
+
+## What's in the QuickStart seed?
+
+
+
+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,
+most of which you can [learn about later](guide/setup-systemjs-anatomy "Setup Anatomy").
+
+
+
+{@a app-files}
+
+
+Focus on the following three TypeScript (`.ts`) files in the **`/src`** folder.
+
+
+<div class='filetree'>
+
+  <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'>
+      main.ts
+    </div>
+
+  </div>
+
+</div>
+
+
+
+<code-tabs>
+
+  <code-pane title="src/app/app.component.ts" path="setup/src/app/app.component.ts">
+
+  </code-pane>
+
+  <code-pane title="src/app/app.module.ts" path="setup/src/app/app.module.ts">
+
+  </code-pane>
+
+  <code-pane title="src/main.ts" path="setup/src/main.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+All guides and cookbooks have _at least these core files_.
+Each file has a distinct purpose and evolves independently as the application grows.
+
+Files outside `src/` concern building, deploying, and testing your app.
+They include configuration files and external dependencies.
+
+Files inside `src/` "belong" to your app.
+Add new Typescript, HTML and CSS files inside the `src/` directory, most of them inside `src/app`,
+unless told to do otherwise.
+
+The following are all in `src/`
+
+
+<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>
+      <code>app/app.component.ts</code>
+    </td>
+
+    <td>
+
+
+      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.
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+      <code>app/app.module.ts</code>
+    </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>
+      <code>main.ts</code>
+    </td>
+
+    <td>
+
+
+      Compiles the application with the [JIT compiler](guide/glossary#jit) and
+      [bootstraps](guide/bootstrapping)
+      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 Stackblitz.
+      You'll learn about alternative compiling and [deployment](guide/deployment) options later in the documentation.
+
+    </td>
+
+  </tr>
+
+</table>
+
+
+
+<div class="alert is-helpful">
+
+
+
+### Next Step
+
+If you're new to Angular, we recommend you follow the [tutorial](tutorial "Tour of Heroes tutorial").
+
+
+</div>
+
+<br></br><br></br>
+
+{@a install-prerequisites}
+
+
+
+## Appendix: Node.js and npm
+
+
+[Node.js](https://nodejs.org/en/) and the [npm](https://www.npmjs.com/) package manager are essential to modern web development with Angular and other platforms.
+Node.js powers client development and build tools.
+The _npm_ package manager, which is itself a _Node.js_ application, installs JavaScript libraries.
+
+<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
+Get them now</a> if they're not already installed on your machine.
+
+**Verify that you are running Node.js `v8.x` or higher and npm `5.x` or higher**
+by running the commands `node -v` and `npm -v` in a terminal/console window.
+Older versions produce errors.
+
+We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of Node.js 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.js and npm.
+
+
+{@a why-locally}
+
+
+
+## Appendix: Why develop locally
+
+<live-example title="QuickStart Seed in Stackblitz">Live coding</live-example> in the browser is a great way to explore Angular.
+
+Links on almost every documentation page open completed samples in the browser.
+You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
+
+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.
+
+As much fun as this is ...
+
+* you can't ship your app in Stackblitz
+* you aren't always online when writing code
+* transpiling TypeScript in the browser is slow
+* the type support, refactoring, and code completion only work in your local IDE
+
+Use the <live-example title="QuickStart Seed in Stackblitz">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/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>.
+
+For real development, we strongly recommend [developing locally](guide/setup#develop-locally).
+
+## Appendix: develop locally with IE
+
+If you develop angular locally with `ng serve`, there will be `websocket` connection being setup automatically between browser and local dev server, so when your code change, browser can automatically refresh.
+
+In windows, by default one application can only have 6 websocket connections, <a href="https://msdn.microsoft.com/library/ee330736%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396#websocket_maxconn" title="MSDN WebSocket settings">MSDN WebSocket Settings</a>.
+So if IE was refreshed manunally or automatically by `ng serve`, sometimes, the websocket will not close properly, when websocket connections exceed limitations, `SecurityError` will be thrown, this error will not affect the angular application, you can just restart IE to clear this error, or modify the windows registry to update the limitations.
diff --git a/aio/content/guide/sharing-ngmodules.md b/aio/content/guide/sharing-ngmodules.md
new file mode 100644
index 000000000000..939a8dfd4b36
--- /dev/null
+++ b/aio/content/guide/sharing-ngmodules.md
@@ -0,0 +1,75 @@
+# Sharing Modules
+
+#### Prerequisites
+A basic understanding of the following:
+* [Feature Modules](guide/feature-modules).
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
+* [Frequently Used Modules](guide/frequent-ngmodules).
+* [Routing and Navigation](guide/router).
+* [Lazy loading modules](guide/lazy-loading-ngmodules).
+
+
+<!--* Components (#TBD) We don’t have a page just on the concept of components, but I think one would be helpful for beginners.-->
+
+<hr>
+
+Creating shared modules allows you to organize and streamline your code. You can put commonly
+used directives, pipes, and components into one module and then import just that module wherever
+you need it in other parts of your app.
+
+Consider the following module from an imaginary app:
+
+
+```typescript
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CustomerComponent } from './customer.component';
+import { NewItemDirective } from './new-item.directive';
+import { OrdersPipe } from './orders.pipe';
+
+@NgModule({
+ imports:      [ CommonModule ],
+ declarations: [ CustomerComponent, NewItemDirective, OrdersPipe ],
+ exports:      [ CustomerComponent, NewItemDirective, OrdersPipe,
+                 CommonModule, FormsModule ]
+})
+export class SharedModule { }
+```
+
+Note the following:
+
+* It imports the `CommonModule` because the module's component needs common directives.
+* It declares and exports the utility pipe, directive, and component classes.
+* It re-exports the `CommonModule` and `FormsModule`.
+
+By re-exporting `CommonModule` and `FormsModule`, any other module that imports this
+`SharedModule`, gets access to directives like `NgIf` and `NgFor` from `CommonModule`
+and can bind to component properties with `[(ngModel)]`, a directive in the `FormsModule`.
+
+Even though the components declared by `SharedModule` might not bind
+with `[(ngModel)]` and there may be no need for `SharedModule`
+to import `FormsModule`, `SharedModule` can still export
+`FormsModule` without listing it among its `imports`. This
+way, you can give other modules access to `FormsModule` without
+having to import it directly into the `@NgModule` decorator.
+
+### Using components vs services from other modules.
+
+There is an important distinction between using another module's component and
+using a service from another module. Import modules when you want to use
+directives, pipes, and components. Importing a module with services means that you will have a new instance of that service, which typically is not what you need (typically one wants to reuse an existing service). Use module imports to control service instantiation.
+
+The most common way to get a hold of shared services is through Angular
+[dependency injection](guide/dependency-injection), rather than through the module system (importing a module will result in a new service instance, which is not a typical usage).
+
+To read about sharing services, see [Providers](guide/providers).
+
+
+<hr />
+
+## More on NgModules
+
+You may also be interested in the following:
+* [Providers](guide/providers).
+* [Types of Feature Modules](guide/module-types).
diff --git a/aio/content/guide/singleton-services.md b/aio/content/guide/singleton-services.md
new file mode 100644
index 000000000000..67cc1ab945fc
--- /dev/null
+++ b/aio/content/guide/singleton-services.md
@@ -0,0 +1,151 @@
+# Singleton services
+
+#### Prerequisites:
+
+* A basic understanding of [Bootstrapping](guide/bootstrapping).
+* Familiarity with [Providers](guide/providers).
+
+For a sample app using the app-wide singleton service that this page describes, see the
+<live-example name="ngmodules"></live-example> showcasing all the documented features of NgModules.
+
+<hr />
+
+## Providing a singleton service
+
+There are two ways to make a service a singleton in Angular:
+
+* Declare that the service should be provided in the application root.
+* Include the service in the `AppModule` or in a module that is only imported by the `AppModule`.
+
+Beginning with Angular 6.0, the preferred way to create a singleton services is to specify on the service that it should be provided in the application root. This is done by setting `providedIn` to `root` on the service's `@Injectable` decorator:
+
+<code-example path="providers/src/app/user.service.0.ts"  title="src/app/user.service.0.ts" linenums="false"> </code-example>
+
+
+For more detailed information on services, see the [Services](tutorial/toh-pt4) chapter of the
+[Tour of Heroes tutorial](tutorial).
+
+
+## `forRoot()`
+
+If a module provides both providers and declarations (components, directives, pipes) then loading it in a child injector such as a route, would duplicate the provider instances. The duplication of providers would cause issues as they would shadow the root instances, which are probably meant to be singletons. For this reason Angular provides a way to separate providers out of the module so that same module can be imported into the root module with `providers` and child modules without `providers`.
+
+1. Create a static method `forRoot()` (by convention) on the module.
+2. Place the providers into the `forRoot` method as follows.
+
+<!-- MH: show a simple example how to do that without going to deep into it. -->
+
+To make this more concrete, consider the `RouterModule` as an example. `RouterModule` needs to provide the `Router` service, as well as the `RouterOutlet` directive. `RouterModule` has to be imported by the root application module so that the application has a `Router` and the application has at least one `RouterOutlet`. It also must be imported by the individual route components so that they can place `RouterOutlet` directives into their template for sub-routes.
+
+If the `RouterModule` didn’t have `forRoot()` then each route component would instantiate a new `Router` instance, which would break the application as there can only be one `Router`. For this reason, the `RouterModule` has the `RouterOutlet` declaration so that it is available everywhere, but the `Router` provider is only in the `forRoot()`. The result is that the root application module imports `RouterModule.forRoot(...)` and gets a `Router`, whereas all route components import `RouterModule` which does not include the `Router`.
+
+If you have a module which provides both providers and declarations, use this pattern to separate them out.
+
+A module that adds providers to the application can offer a
+facility for configuring those providers as well through the
+`forRoot()` method.
+
+`forRoot()` takes a service configuration object and returns a
+[ModuleWithProviders](api/core/ModuleWithProviders), which is
+a simple object with the following properties:
+
+* `ngModule`: in this example, the `CoreModule` class.
+* `providers`: the configured providers.
+
+In the <live-example name="ngmodules">live example</live-example>
+the root `AppModule` imports the `CoreModule` and adds the
+`providers` to the `AppModule` providers. Specifically,
+Angular accumulates all imported providers
+before appending the items listed in `@NgModule.providers`.
+This sequence ensures that whatever you add explicitly to
+the `AppModule` providers takes precedence over the providers
+of imported modules.
+
+Import `CoreModule` and use its `forRoot()` method one time, in `AppModule`, because it registers services and you only want to register those services one time in your app. If you were to register them more than once, you could end up with multiple instances of the service and a runtime error.
+
+You can also add a `forRoot()` method in the `CoreModule` that configures
+the core `UserService`.
+
+In the following example, the optional, injected `UserServiceConfig`
+extends the core `UserService`. If a `UserServiceConfig` exists, the `UserService` sets the user name from that config.
+
+<code-example path="ngmodules/src/app/core/user.service.ts" region="ctor" title="src/app/core/user.service.ts (constructor)" linenums="false">
+
+</code-example>
+
+Here's `forRoot()` that takes a `UserServiceConfig` object:
+
+<code-example path="ngmodules/src/app/core/core.module.ts" region="for-root" title="src/app/core/core.module.ts (forRoot)" linenums="false">
+
+</code-example>
+
+Lastly, call it within the `imports` list of the `AppModule`.
+
+<code-example path="ngmodules/src/app/app.module.ts" region="import-for-root" title="src/app/app.module.ts (imports)" linenums="false">
+
+</code-example>
+
+The app displays "Miss Marple" as the user instead of the default "Sherlock Holmes".
+
+Remember to _import_ `CoreModule` as a Javascript import at the top of the file; don't add it to more than one `@NgModule` `imports` list.
+
+<!-- KW--Does this mean that if we need it elsewhere we only import it at the top? I thought the services would all be available since we were importing it into `AppModule` in `providers`. -->
+
+## Prevent reimport of the `CoreModule`
+
+Only the root `AppModule` should import the `CoreModule`. If a
+lazy-loaded module imports it too, the app can generate
+[multiple instances](guide/ngmodule-faq#q-why-bad) of a service.
+
+To guard against a lazy-loaded module re-importing `CoreModule`, add the following `CoreModule` constructor.
+
+<code-example path="ngmodules/src/app/core/core.module.ts" region="ctor" title="src/app/core/core.module.ts" linenums="false">
+
+</code-example>
+
+The constructor tells Angular to inject the `CoreModule` into itself.
+The injection would be circular if Angular looked for
+`CoreModule` in the _current_ injector. The `@SkipSelf`
+decorator means "look for `CoreModule` in an ancestor
+injector, above me in the injector hierarchy."
+
+If the constructor executes as intended in the `AppModule`,
+there would be no ancestor injector that could provide an instance of `CoreModule` and the injector should give up.
+
+By default, the injector throws an error when it can't
+find a requested provider.
+The `@Optional` decorator means not finding the service is OK.
+The injector returns `null`, the `parentModule` parameter is null,
+and the constructor concludes uneventfully.
+
+It's a different story if you improperly import `CoreModule` into a lazy-loaded module such as `CustomersModule`.
+
+Angular creates a lazy-loaded module with its own injector,
+a _child_ of the root injector.
+`@SkipSelf` causes Angular to look for a `CoreModule` in the parent injector, which this time is the root injector.
+Of course it finds the instance imported by the root `AppModule`.
+Now `parentModule` exists and the constructor throws the error.
+
+Here are the two files in their entirety for reference:
+
+<code-tabs linenums="false">
+ <code-pane
+   title="app.module.ts"
+   path="ngmodules/src/app/app.module.ts">
+ </code-pane>
+ <code-pane
+   title="core.module.ts"
+   region="whole-core-module"
+   path="ngmodules/src/app/core/core.module.ts">
+ </code-pane>
+</code-tabs>
+
+
+<hr>
+
+## More on NgModules
+
+You may also be interested in:
+* [Sharing Modules](guide/sharing-ngmodules), which elaborates on the concepts covered on this page.
+* [Lazy Loading Modules](guide/lazy-loading-ngmodules).
+* [NgModule FAQ](guide/ngmodule-faq).
diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md
new file mode 100644
index 000000000000..87be0a89d46b
--- /dev/null
+++ b/aio/content/guide/structural-directives.md
@@ -0,0 +1,804 @@
+# Structural Directives
+
+<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 looks at how Angular manipulates the DOM with **structural directives** and
+how you can write your own structural directives to do the same thing.
+
+Try the <live-example></live-example>.
+
+
+{@a definition}
+
+
+
+## What are structural directives?
+
+Structural directives are responsible for HTML layout.
+They shape or reshape the DOM's _structure_, typically by adding, removing, or manipulating
+elements.
+
+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 descendants.
+
+Structural directives are easy to recognize.
+An asterisk (*) precedes the directive attribute name as in this example.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngif)" region="ngif">
+
+</code-example>
+
+
+
+No brackets. No parentheses. Just `*ngIf` set to a string.
+
+You'll learn in this guide that the [asterisk (*) is a convenience notation](guide/structural-directives#asterisk)
+and the string is a [_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.
+Each structural directive does something different with that 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.
+Here's an example of them in a template:
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (built-in)" region="built-in">
+
+</code-example>
+
+
+
+This guide won't repeat how to _use_ them. But it does explain _how they work_
+and how to [write your own](guide/structural-directives#unless) structural directive.
+
+
+<div class="callout is-helpful">
+
+
+
+<header>
+  Directive spelling
+</header>
+
+
+
+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_.
+
+A directive _class_ is spelled in _UpperCamelCase_ (`NgIf`).
+A directive's _attribute name_ is spelled in _lowerCamelCase_ (`ngIf`).
+The guide refers to the directive _class_ when talking about its properties and what the directive does.
+The guide refers to the _attribute name_ when describing how
+you apply the directive to an element in the HTML template.
+
+
+</div>
+
+
+
+<div class="alert is-helpful">
+
+
+
+There are two other kinds of Angular directives, described extensively elsewhere:
+(1)&nbsp;components and (2)&nbsp;attribute directives.
+
+A *component* manages a region of HTML in the manner of a native HTML element.
+Technically it's a directive with a template.
+
+An [*attribute* directive](guide/attribute-directives) changes the appearance or behavior
+of an element, component, or another directive.
+For example, the built-in [`NgStyle`](guide/template-syntax#ngStyle) directive
+changes several element styles at the same time.
+
+You can apply many _attribute_ directives to one host element.
+You can [only apply one](guide/structural-directives#one-per-element) _structural_ directive to a host element.
+
+
+</div>
+
+
+
+{@a ngIf}
+
+
+
+## NgIf case study
+
+`NgIf` is the simplest structural directive and the easiest to understand.
+It takes a boolean expression and makes an entire chunk of the DOM appear or disappear.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngif-true)" region="ngif-true">
+
+</code-example>
+
+
+
+The `ngIf` directive doesn't hide elements with CSS. It adds and removes them physically from the DOM.
+Confirm that fact using browser developer tools to inspect the DOM.
+
+
+<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;
+in its place is a comment about "bindings" (more about that [later](guide/structural-directives#asterisk)).
+
+When the condition is false, `NgIf` removes its host element from the DOM,
+detaches it from DOM events (the attachments that it made),
+detaches the component from Angular change detection, and destroys it.
+The component and DOM nodes can be garbage-collected and free up memory.
+
+### Why *remove* rather than *hide*?
+
+A directive could hide the unwanted paragraph instead by setting its `display` style to `none`.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (display-none)" region="display-none">
+
+</code-example>
+
+
+
+While invisible, the element remains in the DOM.
+
+
+<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.
+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.
+Angular keeps checking for changes that could affect data bindings.
+Whatever the component was doing, it keeps doing.
+
+Although invisible, the component&mdash;and all of its descendant components&mdash;tie up resources.
+The performance and memory burden can be substantial, responsiveness can degrade, and the user sees nothing.
+
+On the positive side, showing the element again is quick.
+The component's previous state is preserved and ready to display.
+The component doesn't re-initialize&mdash;an operation that could be expensive.
+So hiding and showing is sometimes the right thing to do.
+
+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` .
+
+**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
+to consider the consequences of adding and removing elements and of creating and destroying components.
+
+
+{@a asterisk}
+
+
+
+## The asterisk (*) prefix
+
+Surely you noticed the asterisk (*) prefix to the directive name
+and wondered why it is necessary and what it does.
+
+Here is `*ngIf` displaying the hero's name if `hero` exists.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (asterisk)" region="asterisk">
+
+</code-example>
+
+
+
+The asterisk is "syntactic sugar" for something a bit more complicated.
+Internally, Angular translates the `*ngIf` _attribute_ into a `<ng-template>` _element_, wrapped around the host element, like this.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngif-template)" region="ngif-template">
+
+</code-example>
+
+
+
+* The `*ngIf` directive moved to the `<ng-template>` element where it became a property binding,`[ngIf]`.
+* The rest of the `<div>`, including its class attribute, moved inside the `<ng-template>` element.
+
+The first form is not actually rendered, only the finished product ends up in the DOM.
+
+
+<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
+replaced the `<ng-template>` with a diagnostic comment.
+
+The [`NgFor`](guide/structural-directives#ngFor) and [`NgSwitch...`](guide/structural-directives#ngSwitch) directives follow the same pattern.
+
+
+{@a ngFor}
+
+
+
+## Inside _*ngFor_
+
+Angular transforms the `*ngFor` in similar fashion from asterisk (*) syntax to `<ng-template>` _element_.
+
+Here's a full-featured application of `NgFor`, written both ways:
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (inside-ngfor)" region="inside-ngfor">
+
+</code-example>
+
+
+
+This is manifestly more complicated than `ngIf` and rightly so.
+The `NgFor` directive has more features, both required and optional, than the `NgIf` shown in this guide.
+At minimum `NgFor` needs a looping variable (`let hero`) and a list (`heroes`).
+
+You enable these features in the string assigned to `ngFor`, which you write in Angular's [microsyntax](guide/structural-directives#microsyntax).
+
+
+<div class="alert is-helpful">
+
+
+
+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>`.
+
+
+</div>
+
+
+
+{@a microsyntax}
+
+
+### Microsyntax
+
+The Angular microsyntax lets you configure a directive in a compact, friendly string.
+The microsyntax parser translates that string into attributes on the `<ng-template>`:
+
+* 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,
+`let-hero`, `let-i`, and `let-odd`.
+
+* 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`.
+
+* As the `NgFor` directive loops through the list, it sets and resets properties of its own _context_ object.
+These properties include `index` and `odd` and a special property named `$implicit`.
+
+* The `let-i` and `let-odd` variables were defined as `let i=index` and `let odd=odd`.
+Angular sets them to the current value of the context's `index` and `odd` properties.
+
+* The context property for `let-hero` wasn't specified.
+Its 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.
+
+* The [API guide](api/common/NgForOf "API: NgFor")
+describes additional `NgFor` directive properties and context properties.
+
+* `NgFor` is implemented by the `NgForOf` directive. Read more about additional `NgForOf` directive properties and context properties [NgForOf API reference](api/common/NgForOf).
+
+
+These microsyntax mechanisms are available to you when you write your own structural directives.
+Studying the
+[source code for `NgIf`](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts "Source: NgIf")
+and [`NgForOf`](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts "Source: NgForOf")
+is a great way to learn more.
+
+
+
+{@a template-input-variable}
+
+
+{@a template-input-variables}
+
+
+### Template input variable
+
+A _template input variable_ is a variable whose value you can reference _within_ a single instance of the template.
+There are several such variables in this example: `hero`, `i`, and `odd`.
+All are preceded by the keyword `let`.
+
+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`).
+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.
+
+You declare a template _reference_ variable by prefixing the variable name with `#` (`#var`).
+A _reference_ variable refers to its attached element, component or directive.
+It can be accessed _anywhere_ in the _entire template_.
+
+Template _input_ and _reference_ variable names have their own namespaces. The `hero` in `let hero` is never the same
+variable as the `hero` declared as `#hero`.
+
+
+{@a one-per-element}
+
+
+### One structural directive per host element
+
+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.
+
+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?
+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?
+
+There are no easy answers to these questions. Prohibiting multiple structural directives makes them moot.
+There's an easy solution for this use case: put the `*ngIf` on a container element that wraps the `*ngFor` element.
+One or both elements can be an [`ng-container`](guide/structural-directives#ngcontainer) so you don't have to introduce extra levels of HTML.
+
+
+{@a ngSwitch}
+
+
+
+## Inside _NgSwitch_ directives
+
+The Angular _NgSwitch_ is actually a set of cooperating directives: `NgSwitch`, `NgSwitchCase`, and `NgSwitchDefault`.
+
+Here's an example.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngswitch)" region="ngswitch">
+
+</code-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.
+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.
+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.
+
+
+<div class="alert is-helpful">
+
+
+
+The element to which you apply a directive is its _host_ element.
+The `<happy-hero>` is the host element for the happy `*ngSwitchCase`.
+The `<unknown-hero>` is the host element for the `*ngSwitchDefault`.
+
+
+</div>
+
+
+
+As with other structural directives, the `NgSwitchCase` and `NgSwitchDefault`
+can be desugared into the `<ng-template>` element form.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngswitch-template)" region="ngswitch-template">
+
+</code-example>
+
+
+
+{@a prefer-asterisk}
+
+
+## Prefer the asterisk (*) syntax.
+
+The asterisk (*) syntax is more clear than the desugared form.
+Use [&lt;ng-container&gt;](guide/structural-directives#ng-container) when there's no single element
+to host the directive.
+
+While there's rarely a good reason to apply a structural directive in template _attribute_ or _element_ form,
+it's still important to know that Angular creates a `<ng-template>` and to understand how it works.
+You'll refer to the `<ng-template>` when you [write your own structural directive](guide/structural-directives#unless).
+
+
+{@a template}
+
+
+
+## The *&lt;ng-template&gt;*
+
+The &lt;ng-template&gt; is an Angular element for rendering HTML.
+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>`,
+those elements disappear.
+That's the fate of the middle "Hip!" in the phrase "Hip! Hip! Hooray!".
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (template-tag)" region="template-tag">
+
+</code-example>
+
+
+
+Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic.
+
+
+<figure>
+  <img src='generated/images/guide/structural-directives/template-rendering.png' alt="template tag rendering">
+</figure>
+
+
+
+A structural directive puts a `<ng-template>` to work
+as you'll see when you [write your own structural directive](guide/structural-directives#unless).
+
+
+{@a ngcontainer}
+
+
+{@a ng-container}
+
+
+
+## Group sibling elements with &lt;ng-container&gt;
+
+There's often a _root_ element that can and should host the structural directive.
+The list element (`<li>`) is a typical host element of an `NgFor` repeater.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngfor-li)" region="ngfor-li">
+
+</code-example>
+
+
+
+When there isn't a host element, you can usually wrap the content in a native HTML container element,
+such as a `<div>`, and attach the directive to that wrapper.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngif)" region="ngif">
+
+</code-example>
+
+
+
+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
+neither expect nor accommodate the new layout.
+For example, suppose you have the following paragraph layout.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngif-span)" region="ngif-span">
+
+</code-example>
+
+
+
+You also have a CSS style rule that happens to apply to a `<span>` within a `<p>`aragraph.
+
+
+<code-example path="structural-directives/src/app/app.component.css" linenums="false" title="src/app/app.component.css (p-span)" region="p-span">
+
+</code-example>
+
+
+
+The constructed paragraph renders strangely.
+
+
+<figure>
+  <img src='generated/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style">
+</figure>
+
+
+
+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.
+You can't wrap the _options_ in a conditional `<div>` or a `<span>`.
+
+When you try this,
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (select-span)" region="select-span">
+
+</code-example>
+
+
+
+the drop down is empty.
+
+
+<figure>
+  <img src='generated/images/guide/structural-directives/bad-select.png' alt="spanned options don't work">
+</figure>
+
+
+
+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_.
+
+Here's the conditional paragraph again, this time using `<ng-container>`.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngif-ngcontainer)" region="ngif-ngcontainer">
+
+</code-example>
+
+
+
+It renders properly.
+
+
+<figure>
+  <img src='generated/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style">
+</figure>
+
+
+
+Now conditionally exclude a _select_ `<option>` with `<ng-container>`.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (select-ngcontainer)" region="select-ngcontainer">
+
+</code-example>
+
+
+
+The drop down works properly.
+
+
+<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 more like the curly braces in a JavaScript `if`-block:
+
+
+<code-example language="javascript">
+  if (someCondition) {
+    statement1;
+    statement2;
+    statement3;
+  }
+
+</code-example>
+
+
+
+Without those braces, JavaScript would only execute the first statement
+when you intend to conditionally execute all of them as a single block.
+The `<ng-container>` satisfies a similar need in Angular templates.
+
+
+{@a unless}
+
+
+
+## Write a structural directive
+
+In this section, you write an `UnlessDirective` structural directive
+that does the opposite of `NgIf`.
+`NgIf` displays the template content when the condition is `true`.
+`UnlessDirective` displays the content when the condition is ***false***.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (appUnless-1)" region="appUnless-1">
+
+</code-example>
+
+
+
+Creating a directive is similar to creating a component.
+
+* Import the `Directive` decorator (instead of the `Component` decorator).
+
+* Import the `Input`, `TemplateRef`, and `ViewContainerRef` symbols; you'll need them for _any_ structural directive.
+
+* Apply the decorator to the directive class.
+
+* Set the CSS *attribute selector* that identifies the directive when applied to an element in a template.
+
+Here's how you might begin:
+
+
+<code-example path="structural-directives/src/app/unless.directive.ts" linenums="false" title="src/app/unless.directive.ts (skeleton)" region="skeleton">
+
+</code-example>
+
+
+
+The directive's _selector_ is typically the directive's **attribute name** in square brackets, `[appUnless]`.
+The brackets define a CSS
+<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.
+Pick something short that fits you or your company.
+In this example, the prefix is `app`.
+
+
+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/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/TemplateRef "API: TemplateRef")
+and access the _view container_ through a
+[`ViewContainerRef`](api/core/ViewContainerRef "API: ViewContainerRef").
+
+You inject both in the directive constructor as private variables of the class.
+
+
+<code-example path="structural-directives/src/app/unless.directive.ts" linenums="false" title="src/app/unless.directive.ts (ctor)" region="ctor">
+
+</code-example>
+
+
+
+### The _appUnless_ property
+
+The directive consumer expects to bind a true/false condition to `[appUnless]`.
+That means the directive needs an `appUnless` property, decorated with `@Input`
+
+
+<div class="alert is-helpful">
+
+
+
+Read about `@Input` in the [_Template Syntax_](guide/template-syntax#inputs-outputs) guide.
+
+
+</div>
+
+
+
+<code-example path="structural-directives/src/app/unless.directive.ts" linenums="false" title="src/app/unless.directive.ts (set)" region="set">
+
+</code-example>
+
+
+
+Angular sets the `appUnless` property whenever the value of the condition changes.
+Because the `appUnless` 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,
+clear the container which also destroys the view.
+
+Nobody reads the `appUnless` property so it doesn't need a getter.
+
+The completed directive code looks like this:
+
+
+<code-example path="structural-directives/src/app/unless.directive.ts" linenums="false" title="src/app/unless.directive.ts (excerpt)" region="no-docs">
+
+</code-example>
+
+
+
+Add this directive to the `declarations` array of the AppModule.
+
+Then create some HTML to try it.
+
+
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (appUnless)" region="appUnless">
+
+</code-example>
+
+
+
+When the `condition` is falsy, the top (A) paragraph appears and the bottom (B) paragraph disappears.
+When the `condition` is truthy, the top (A) paragraph is removed and the bottom (B) paragraph appears.
+
+
+<figure>
+  <img src='generated/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action">
+</figure>
+
+
+
+{@a summary}
+
+
+
+## Summary
+
+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.
+
+
+<code-tabs>
+
+  <code-pane title="app.component.ts" path="structural-directives/src/app/app.component.ts">
+
+  </code-pane>
+
+  <code-pane title="app.component.html" path="structural-directives/src/app/app.component.html">
+
+  </code-pane>
+
+  <code-pane title="app.component.css" path="structural-directives/src/app/app.component.css">
+
+  </code-pane>
+
+  <code-pane title="app.module.ts" path="structural-directives/src/app/app.module.ts">
+
+  </code-pane>
+
+  <code-pane title="hero.ts" path="structural-directives/src/app/hero.ts">
+
+  </code-pane>
+
+  <code-pane title="hero-switch.components.ts" path="structural-directives/src/app/hero-switch.components.ts">
+
+  </code-pane>
+
+  <code-pane title="unless.directive.ts" path="structural-directives/src/app/unless.directive.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+You learned
+
+* that structural directives manipulate HTML layout.
+* to use [`<ng-container>`](guide/structural-directives#ngcontainer) as a grouping element when there is no suitable host element.
+* 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`.
diff --git a/aio/content/guide/styleguide.md b/aio/content/guide/styleguide.md
new file mode 100644
index 000000000000..f99656da6f66
--- /dev/null
+++ b/aio/content/guide/styleguide.md
@@ -0,0 +1,4976 @@
+# Style Guide
+
+Looking for an opinionated guide to Angular syntax, conventions, and application structure?
+Step right in!
+This style guide presents preferred conventions and, as importantly, explains why.
+
+
+
+{@a toc}
+
+## Style vocabulary
+
+Each guideline describes either a good or bad practice, and all have a consistent presentation.
+
+The wording of each guideline indicates how strong the recommendation is.
+
+
+<div class="s-rule do">
+
+
+
+**Do** is one that should always be followed.
+_Always_ might be a bit too strong of a word.
+Guidelines that literally should always be followed are extremely rare.
+On the other hand, you need a really unusual case for breaking a *Do* guideline.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** guidelines should generally be followed.
+If you fully understand the meaning behind the guideline and have a good reason to deviate, then do so. Please strive to be consistent.
+
+
+</div>
+
+
+
+<div class="s-rule avoid">
+
+
+
+**Avoid** indicates something you should almost never do. Code examples to *avoid* have an unmistakeable red header.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** gives reasons for following the previous recommendations.
+
+
+</div>
+
+
+
+
+## File structure conventions
+
+Some code examples display a file that has one or more similarly named companion files.
+For example, `hero.component.ts` and `hero.component.html`.
+
+The guideline uses the shortcut `hero.component.ts|html|css|spec` to represent those various files. Using this shortcut makes this guide's file structures easier to read and more terse.
+
+
+
+{@a single-responsibility}
+
+
+## Single responsibility
+
+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 01-01}
+
+### Rule of One
+
+#### Style 01-01
+
+
+<div class="s-rule do">
+
+
+
+**Do** define one thing, such as a service or component, per file.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** limiting files to 400 lines of code.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** One component per file makes it far easier to read, maintain, and avoid
+collisions with teams in source control.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** One component per file avoids hidden bugs that often arise when combining components in a file where they may share variables, create unwanted closures, or unwanted coupling with dependencies.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** A single component can be the default export for its file which facilitates lazy loading with the router.
+
+</div>
+
+
+
+The key is to make the code more reusable, easier to read, and less mistake prone.
+
+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*.
+
+
+<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
+supporting classes into their own, dedicated files.
+
+
+<code-tabs>
+
+  <code-pane title="main.ts" path="styleguide/src/01-01/main.ts">
+
+  </code-pane>
+
+  <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="styleguide/src/01-01/app/app.component.ts">
+
+  </code-pane>
+
+  <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="styleguide/src/01-01/app/heroes/shared/hero.service.ts">
+
+  </code-pane>
+
+  <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="styleguide/src/01-01/app/heroes/shared/mock-heroes.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+As the app grows, this rule becomes even more important.
+<a href="#toc">Back to top</a>
+
+
+{@a 01-02}
+
+### Small functions
+
+#### Style 01-02
+
+
+<div class="s-rule do">
+
+
+
+**Do** define small functions
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** limiting to no more than 75 lines.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Small functions are easier to test, especially when they do one thing and serve one purpose.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Small functions promote reuse.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Small functions are easier to read.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Small functions are easier to maintain.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Small functions help avoid hidden bugs that come with large functions that share variables with external scope, create unwanted closures, or unwanted coupling with dependencies.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+
+## Naming
+
+Naming conventions are hugely important to maintainability and readability. This guide recommends naming conventions for the file name and the symbol name.
+
+
+
+{@a 02-01}
+
+### General Naming Guidelines
+
+#### Style 02-01
+
+
+<div class="s-rule do">
+
+
+
+**Do** use consistent names for all symbols.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** follow a pattern that describes the symbol's feature then its type. The recommended pattern is `feature.type.ts`.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Naming conventions help provide a consistent way to find content at a glance. Consistency within the project is vital. Consistency with a team is important. Consistency across a company provides tremendous efficiency.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** The naming conventions should simply help find desired code faster and make it easier to understand.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Names of folders and files should clearly convey their intent. For example, `app/heroes/hero-list.component.ts` may contain a component that manages a list of heroes.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+
+{@a 02-02}
+
+### Separate file names with dots and dashes
+
+#### Style 02-02
+
+
+<div class="s-rule do">
+
+
+
+**Do** use dashes to separate words in the descriptive name.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** use dots to separate the descriptive name from the type.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** use consistent type names for all components following a pattern that describes the component's feature then its type. A recommended pattern is `feature.type.ts`.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Type names provide a consistent way to quickly identify what is in the file.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Type names make it easy to find a specific file type using an editor or IDE's fuzzy search techniques.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Unabbreviated type names such as `.service` are descriptive and unambiguous.
+Abbreviations such as `.srv`, `.svc`, and `.serv` can be confusing.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Type names provide pattern matching for any automated tasks.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+
+{@a 02-03}
+
+### Symbols and file names
+
+#### Style 02-03
+
+
+<div class="s-rule do">
+
+
+
+**Do** use consistent names for all assets named after what they represent.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** use upper camel case for class names.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** match the name of the symbol to the name of the file.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** append the symbol name with the conventional suffix (such as `Component`,
+`Directive`, `Module`, `Pipe`, or `Service`) for a thing of that type.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**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.
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Consistent conventions make it easy to quickly identify
+and reference assets of different types.
+
+
+</div>
+
+
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      Symbol Name
+    </th>
+
+    <th>
+      File Name
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Component({ ... })
+        export class AppComponent { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      app.component.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Component({ ... })
+        export class HeroesComponent { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      heroes.component.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Component({ ... })
+        export class HeroListComponent { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      hero-list.component.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Component({ ... })
+        export class HeroDetailComponent { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      hero-detail.component.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Directive({ ... })
+        export class ValidationDirective { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      validation.directive.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @NgModule({ ... })
+        export class AppModule
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      app.module.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Pipe({ name: 'initCaps' })
+        export class InitCapsPipe implements PipeTransform { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      init-caps.pipe.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Injectable()
+        export class UserProfileService { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      user-profile.service.ts
+    </td>
+
+  </tr>
+
+</table>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+{@a 02-04}
+
+### Service names
+
+#### Style 02-04
+
+<div class="s-rule do">
+
+
+
+**Do** use consistent names for all services named after their feature.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** suffix a service class name with `Service`.
+For example, something that gets data or heroes
+should be called a `DataService` or a `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.
+As always, strive for consistency.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Provides a consistent way to quickly identify and reference services.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Clear service names such as `Logger` do not require a suffix.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Service names such as `Credit` are nouns and require a suffix and should be named with a suffix when it is not obvious if it is a service or something else.
+
+
+</div>
+
+
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      Symbol Name
+    </th>
+
+    <th>
+      File Name
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Injectable()
+        export class HeroDataService { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      hero-data.service.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Injectable()
+        export class CreditService { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      credit.service.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Injectable()
+        export class Logger { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      logger.service.ts
+    </td>
+
+  </tr>
+
+</table>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+{@a 02-05}
+
+### Bootstrapping
+
+#### Style 02-05
+
+
+<div class="s-rule do">
+
+
+
+**Do** put bootstrapping and platform logic for the app in a file named `main.ts`.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** include error handling in the bootstrapping logic.
+
+
+</div>
+
+
+
+<div class="s-rule avoid">
+
+
+
+**Avoid** putting app logic in `main.ts`. Instead, consider placing it in a component or service.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Follows a consistent convention for the startup logic of an app.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Follows a familiar convention from other technology platforms.
+
+
+</div>
+
+
+
+<code-example path="styleguide/src/02-05/main.ts" title="main.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 05-02}
+
+### Component selectors
+
+#### Style 05-02
+
+
+<div class="s-rule do">
+
+
+
+**Do** use _dashed-case_ or _kebab-case_ for naming the element selectors of components.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
+
+
+</div>
+
+
+
+<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>
+
+
+
+
+
+<code-tabs>
+
+  <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="styleguide/src/05-02/app/app.component.html">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 02-07}
+
+### Component custom prefix
+
+#### Style 02-07
+
+
+<div class="s-rule do">
+
+
+
+**Do** use a hyphenated, lowercase element selector value (e.g. `admin-users`).
+
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** use a prefix that identifies the feature area or the app itself.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Prevents element name collisions with components in other apps and with native HTML elements.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Makes it easier to promote and share the component in other apps.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Components are easy to identify in the DOM.
+
+
+</div>
+
+
+
+<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="styleguide/src/02-07/app/users/users.component.avoid.ts" region="example" title="app/users/users.component.ts">
+
+</code-example>
+
+
+
+
+
+<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="styleguide/src/02-07/app/users/users.component.ts" region="example" title="app/users/users.component.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 02-06}
+
+### Directive selectors
+
+#### Style 02-06
+
+
+<div class="s-rule do">
+
+
+
+**Do** Use lower camel case for naming the selectors of directives.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** The Angular HTML parser is case sensitive and recognizes lower camel case.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+{@a 02-08}
+
+### Directive custom prefix
+
+#### Style 02-08
+
+<div class="s-rule do">
+
+
+
+**Do** use a custom prefix for the selector of directives (e.g, the prefix `toh` from **T**our **o**f **H**eroes).
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** spell non-element selectors in lower camel case unless the selector is meant to match a native HTML attribute.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Prevents name collisions.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Directives are easily identified.
+
+
+</div>
+
+
+
+<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="styleguide/src/02-08/app/shared/validate.directive.ts" region="example" title="app/shared/validate.directive.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+{@a 02-09}
+
+### Pipe names
+
+#### Style 02-09
+
+<div class="s-rule do">
+
+
+
+**Do** use consistent names for all pipes, named after their feature.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Provides a consistent way to quickly identify and reference pipes.
+
+
+</div>
+
+
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      Symbol Name
+    </th>
+
+    <th>
+      File Name
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Pipe({ name: 'ellipsis' })
+        export class EllipsisPipe implements PipeTransform { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      ellipsis.pipe.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @Pipe({ name: 'initCaps' })
+        export class InitCapsPipe implements PipeTransform { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      init-caps.pipe.ts
+    </td>
+
+  </tr>
+
+</table>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+{@a 02-10}
+
+### Unit test file names
+
+#### Style 02-10
+
+<div class="s-rule do">
+
+
+
+**Do** name test specification files the same as the component they test.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** name test specification files with a suffix of `.spec`.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Provides a consistent way to quickly identify tests.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Provides pattern matching for [karma](http://karma-runner.github.io/) or other test runners.
+
+
+</div>
+
+
+
+
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      Test Type
+    </th>
+
+    <th>
+      File Names
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      Components
+    </td>
+
+    <td>
+
+
+      heroes.component.spec.ts
+
+      hero-list.component.spec.ts
+
+      hero-detail.component.spec.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      Services
+    </td>
+
+    <td>
+
+
+      logger.service.spec.ts
+
+      hero.service.spec.ts
+
+      filter-text.service.spec.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      Pipes
+    </td>
+
+    <td>
+
+
+      ellipsis.pipe.spec.ts
+
+      init-caps.pipe.spec.ts
+    </td>
+
+  </tr>
+
+</table>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+{@a 02-11}
+
+### _End-to-End_ (E2E) test file names
+
+#### Style 02-11
+
+<div class="s-rule do">
+
+
+
+**Do** name end-to-end test specification files after the feature they test with a suffix of `.e2e-spec`.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Provides a consistent way to quickly identify end-to-end tests.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Provides pattern matching for test runners and build automation.
+
+
+</div>
+
+
+
+
+
+
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      Test Type
+    </th>
+
+    <th>
+      File Names
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+
+      End-to-End Tests
+    </td>
+
+    <td>
+
+
+      app.e2e-spec.ts
+
+      heroes.e2e-spec.ts
+    </td>
+
+  </tr>
+
+</table>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 02-12}
+
+### Angular _NgModule_ names
+
+#### Style 02-12
+
+
+<div class="s-rule do">
+
+
+
+**Do** append the symbol name with the suffix `Module`.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** give the file name the `.module.ts` extension.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** name the module after the feature and folder it resides in.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Provides a consistent way to quickly identify and reference modules.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Upper camel case is conventional for identifying objects that can be instantiated using a constructor.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Easily identifies the module as the root of the same named feature.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** suffix a _RoutingModule_ class name with `RoutingModule`.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** end the filename of a _RoutingModule_ with `-routing.module.ts`.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** A `RoutingModule` is a module dedicated exclusively to configuring the Angular router.
+A consistent class and file name convention make these modules easy to spot and verify.
+
+</div>
+
+
+
+<table width="100%">
+
+  <col width="50%">
+
+  </col>
+
+  <col width="50%">
+
+  </col>
+
+  <tr>
+
+    <th>
+      Symbol Name
+    </th>
+
+    <th>
+      File Name
+    </th>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @NgModule({ ... })
+        export class AppModule { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      app.module.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @NgModule({ ... })
+        export class HeroesModule { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      heroes.module.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @NgModule({ ... })
+        export class VillainsModule { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      villains.module.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @NgModule({ ... })
+        export class AppRoutingModule { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      app-routing.module.ts
+    </td>
+
+  </tr>
+
+  <tr style=top>
+
+    <td>
+
+      <code-example hideCopy class="no-box">
+        @NgModule({ ... })
+        export class HeroesRoutingModule { }
+      </code-example>
+
+    </td>
+
+    <td>
+
+
+      heroes-routing.module.ts
+    </td>
+
+  </tr>
+
+</table>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+## Coding conventions
+
+Have a consistent set of coding, naming, and whitespace conventions.
+
+
+
+{@a 03-01}
+
+### Classes
+
+#### Style 03-01
+
+<div class="s-rule do">
+
+
+
+**Do** use upper camel case when naming classes.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Follows conventional thinking for class names.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Classes can be instantiated and construct an instance.
+By convention, upper camel case indicates a constructable asset.
+
+
+</div>
+
+
+
+<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="styleguide/src/03-01/app/core/exception.service.ts" region="example" title="app/shared/exception.service.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+{@a 03-02}
+
+### Constants
+
+#### Style 03-02
+
+<div class="s-rule do">
+
+
+
+**Do** declare variables with `const` if their values should not change during the application lifetime.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Conveys to readers that the value is invariant.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** TypeScript helps enforce that intent by requiring immediate initialization and by
+preventing subsequent re-assignment.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** spelling `const` variables in lower camel case.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Lower camel case variable names (`heroRoutes`) are easier to read and understand
+than the traditional UPPER_SNAKE_CASE names (`HERO_ROUTES`).
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** tolerate _existing_ `const` variables that are spelled in UPPER_SNAKE_CASE.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** The tradition of UPPER_SNAKE_CASE remains popular and pervasive,
+especially in third party modules.
+It is rarely worth the effort to change them at the risk of breaking existing code and documentation.
+
+
+</div>
+
+
+
+<code-example path="styleguide/src/03-02/app/core/data.service.ts" title="app/shared/data.service.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+{@a 03-03}
+
+### Interfaces
+
+#### Style 03-03
+
+<div class="s-rule do">
+
+
+
+**Do** name an interface using upper camel case.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** naming an interface without an `I` prefix.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** using a class instead of an interface for services and declarables (components, directives, and pipes).
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** using an interface for data models.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** <a href="https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines">TypeScript guidelines</a>
+discourage the `I` prefix.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** A class alone is less code than a _class-plus-interface_.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** A class can act as an interface (use `implements` instead of `extends`).
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** An interface-class can be a provider lookup token in Angular dependency injection.
+
+
+</div>
+
+
+
+<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="styleguide/src/03-03/app/core/hero-collector.service.ts" region="example" title="app/shared/hero-collector.service.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 03-04}
+
+### Properties and methods
+
+#### Style 03-04
+
+
+<div class="s-rule do">
+
+
+
+**Do** use lower camel case to name properties and methods.
+
+
+</div>
+
+
+
+<div class="s-rule avoid">
+
+
+
+**Avoid** prefixing private properties and methods with an underscore.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Follows conventional thinking for properties and methods.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** JavaScript lacks a true private property or method.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** TypeScript tooling makes it easy to identify private vs. public properties and methods.
+
+
+</div>
+
+
+
+<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="styleguide/src/03-04/app/core/toast.service.ts" region="example" title="app/shared/toast.service.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 03-06}
+
+### Import line spacing
+
+#### Style 03-06
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** leaving one empty line between third party imports and application imports.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** listing import lines alphabetized by the module.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** listing destructured imported symbols alphabetically.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** The empty line separates _your_ stuff from _their_ stuff.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Alphabetizing makes it easier to read and locate symbols.
+
+
+</div>
+
+
+
+<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="styleguide/src/03-06/app/heroes/shared/hero.service.ts" region="example" title="app/heroes/shared/hero.service.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+## Application structure and NgModules
+
+Have a near-term view of implementation and a long-term vision. Start small but keep in mind where the app is heading down the road.
+
+All of the app's code goes in a folder named `src`.
+All feature areas are in their own folder, with their own NgModule.
+
+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`.
+Use the naming conventions for files in this guide.
+<a href="#toc">Back to top</a>
+
+{@a 04-01}
+
+### _LIFT_
+
+#### Style 04-01
+
+
+<div class="s-rule do">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** define the structure to follow these four basic guidelines, listed in order of importance.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**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_?
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+{@a 04-02}
+
+### Locate
+
+#### Style 04-02
+
+
+<div class="s-rule do">
+
+
+
+**Do** make locating code intuitive, simple and fast.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**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.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+{@a 04-03}
+
+### Identify
+
+#### Style 04-03
+
+
+<div class="s-rule do">
+
+
+
+**Do** name the file such that you instantly know what it contains and represents.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** be descriptive with file names and keep the contents of the file to exactly one component.
+
+
+</div>
+
+
+
+<div class="s-rule avoid">
+
+
+
+**Avoid** files with multiple components, multiple services, or a mixture.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class="alert is-helpful">
+
+
+
+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.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+
+{@a 04-04}
+
+### Flat
+
+#### Style 04-04
+
+<div class="s-rule do">
+
+
+
+**Do** keep a flat folder structure as long as possible.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** creating sub-folders when a folder reaches seven or more files.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** configuring the IDE to hide distracting, irrelevant files such as generated `.js` and `.js.map` files.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**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">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.
+
+Base your decision on your comfort level.
+Use a flatter structure until there is an obvious value to creating a new folder.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+
+{@a 04-05}
+
+### _T-DRY_ (Try to be _DRY_)
+
+#### Style 04-05
+
+<div class="s-rule do">
+
+
+
+**Do** be DRY (Don't Repeat Yourself).
+
+
+</div>
+
+
+
+<div class="s-rule avoid">
+
+
+
+**Avoid** being so DRY that you sacrifice readability.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**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.
+But if something is not obvious or departs from a convention, then spell it out.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+
+{@a 04-06}
+
+### Overall structural guidelines
+
+#### Style 04-06
+
+<div class="s-rule do">
+
+
+
+**Do** start small but keep in mind where the app is heading down the road.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** have a near term view of implementation and a long term vision.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** put all of the app's code in a folder named `src`.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** creating a folder for a component when it has multiple accompanying files (`.ts`, `.html`, `.css` and `.spec`).
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Helps keep the app structure small and easy to maintain in the early stages, while being easy to evolve as the app grows.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Components often have four files (e.g. `*.html`, `*.css`, `*.ts`, and `*.spec.ts`) and can clutter a folder quickly.
+
+
+</div>
+
+
+
+{@a file-tree}
+
+
+Here is a compliant folder and file structure:
+
+
+<div class='filetree'>
+
+  <div class='file'>
+    &lt;project root&gt;
+  </div>
+
+  <div class='children'>
+
+    <div class='file'>
+      src
+    </div>
+
+    <div class='children'>
+
+      <div class='file'>
+        app
+      </div>
+
+      <div class='children'>
+
+        <div class='file'>
+          core
+        </div>
+
+        <div class='children'>
+
+          <div class='file'>
+            core.module.ts
+          </div>
+
+          <div class='file'>
+            exception.service.ts|spec.ts
+          </div>
+
+          <div class='file'>
+            user-profile.service.ts|spec.ts
+          </div>
+
+        </div>
+
+        <div class='file'>
+          heroes
+        </div>
+
+        <div class='children'>
+
+          <div class='file'>
+            hero
+          </div>
+
+          <div class='children'>
+
+            <div class='file'>
+              hero.component.ts|html|css|spec.ts
+            </div>
+
+          </div>
+
+          <div class='file'>
+            hero-list
+          </div>
+
+          <div class='children'>
+
+            <div class='file'>
+              hero-list.component.ts|html|css|spec.ts
+            </div>
+
+          </div>
+
+          <div class='file'>
+            shared
+          </div>
+
+          <div class='children'>
+
+            <div class='file'>
+              hero-button.component.ts|html|css|spec.ts
+            </div>
+
+            <div class='file'>
+              hero.model.ts
+            </div>
+
+            <div class='file'>
+              hero.service.ts|spec.ts
+            </div>
+
+          </div>
+
+          <div class='file'>
+            heroes.component.ts|html|css|spec.ts
+          </div>
+
+          <div class='file'>
+            heroes.module.ts
+          </div>
+
+          <div class='file'>
+            heroes-routing.module.ts
+          </div>
+
+        </div>
+
+        <div class='file'>
+          shared
+        </div>
+
+        <div class='children'>
+
+          <div class='file'>
+            shared.module.ts
+          </div>
+
+          <div class='file'>
+            init-caps.pipe.ts|spec.ts
+          </div>
+
+          <div class='file'>
+            text-filter.component.ts|spec.ts
+          </div>
+
+          <div class='file'>
+            text-filter.service.ts|spec.ts
+          </div>
+
+        </div>
+
+        <div class='file'>
+          villains
+        </div>
+
+        <div class='children'>
+
+          <div class='file'>
+            villain
+          </div>
+
+          <div class='children'>
+
+            <div class='file'>
+              ...
+            </div>
+
+          </div>
+
+          <div class='file'>
+            villain-list
+          </div>
+
+          <div class='children'>
+
+            <div class='file'>
+              ...
+            </div>
+
+          </div>
+
+          <div class='file'>
+            shared
+          </div>
+
+          <div class='children'>
+
+            <div class='file'>
+              ...
+            </div>
+
+          </div>
+
+          <div class='file'>
+            villains.component.ts|html|css|spec.ts
+          </div>
+
+          <div class='file'>
+            villains.module.ts
+          </div>
+
+          <div class='file'>
+            villains-routing.module.ts
+          </div>
+
+        </div>
+
+        <div class='file'>
+          app.component.ts|html|css|spec.ts
+        </div>
+
+        <div class='file'>
+          app.module.ts
+        </div>
+
+        <div class='file'>
+          app-routing.module.ts
+        </div>
+
+      </div>
+
+      <div class='file'>
+        main.ts
+      </div>
+
+      <div class='file'>
+        index.html
+      </div>
+
+      <div class='file'>
+        ...
+      </div>
+
+    </div>
+
+    <div class='file'>
+      node_modules/...
+    </div>
+
+    <div class='file'>
+      ...
+    </div>
+
+  </div>
+
+</div>
+
+
+
+
+
+<div class="alert is-helpful">
+
+
+
+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.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+{@a 04-07}
+
+### _Folders-by-feature_ structure
+
+#### Style 04-07
+
+
+<div class="s-rule do">
+
+
+
+**Do** create folders named for the feature area they represent.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** The LIFT guidelines are all covered.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Helps reduce the app from becoming cluttered through organizing the
+content and keeping them aligned with the LIFT guidelines.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** create an NgModule for each feature area.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** NgModules make it easy to lazy load routable features.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** NgModules make it easier to isolate, test, and re-use features.
+
+
+</div>
+
+
+
+<div class='file-tree-reference'>
+  <a href="#file-tree">Refer to this _folder and file structure_ example.</a>
+</div>
+
+<a href="#toc">Back to top
+
+</a>
+
+
+{@a 04-08}
+
+### App _root module_
+
+#### Style 04-08
+
+<div class="s-rule do">
+
+
+
+**Do** create an NgModule in the app's root folder,
+for example, in `/src/app`.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Every app requires at least one root NgModule.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** naming the root module `app.module.ts`.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Makes it easier to locate and identify the root module.
+
+
+</div>
+
+
+
+<code-example path="styleguide/src/04-08/app/app.module.ts" region="example" title="app/app.module.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+{@a 04-09}
+
+### Feature modules
+
+#### Style 04-09
+
+
+<div class="s-rule do">
+
+
+
+**Do** create an NgModule for all distinct features in an application;
+for example, a `Heroes` feature.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** place the feature module in the same named folder as the feature area;
+for example, in `app/heroes`.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** name the feature module file reflecting the name of the feature area
+and folder; for example, `app/heroes/heroes.module.ts`.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**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`.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** A feature module can expose or hide its implementation from other modules.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** A feature module identifies distinct sets of related components that comprise the feature area.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** A feature module can easily be routed to both eagerly and lazily.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** A feature module defines clear boundaries between specific functionality and other application features.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** A feature module helps clarify and make it easier to assign development responsibilities to different teams.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** A feature module can easily be isolated for testing.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+{@a 04-10}
+
+### Shared feature module
+
+#### Style 04-10
+
+
+<div class="s-rule do">
+
+
+
+**Do** create a feature module named `SharedModule` in a `shared` folder;
+for example, `app/shared/shared.module.ts` defines `SharedModule`.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** using the name SharedModule when the contents of a shared
+module are referenced across the entire application.
+
+
+</div>
+
+
+
+<div class="s-rule avoid">
+
+
+
+**Consider** _not_ providing services in shared modules. Services are usually
+singletons that are provided once for the entire application or
+in a particular feature module. There are exceptions, however. For example, in the sample code that follows, notice that the `SharedModule` provides `FilterTextService`. This is acceptable here because the service is stateless;that is, the consumers of the service aren't impacted by new instances.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** import all modules required by the assets in the `SharedModule`;
+for example, `CommonModule` and `FormsModule`.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** `SharedModule` will contain components, directives and pipes
+that may need features from another common module; for example,
+`ngFor` in `CommonModule`.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** declare all components, directives, and pipes in the `SharedModule`.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** export all symbols from the `SharedModule` that other feature modules need to use.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** `SharedModule` exists to make commonly used components, directives and pipes available for use in the templates of components in many other modules.
+
+
+</div>
+
+
+
+<div class="s-rule avoid">
+
+
+
+**Avoid** specifying app-wide singleton providers in a `SharedModule`. Intentional singletons are OK. Take care.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** A lazy loaded feature module that imports that shared module will make its own copy of the service and likely have undesirable results.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class='filetree'>
+
+  <div class='file'>
+    src
+  </div>
+
+  <div class='children'>
+
+    <div class='file'>
+      app
+    </div>
+
+    <div class='children'>
+
+      <div class='file'>
+        shared
+      </div>
+
+      <div class='children'>
+
+        <div class='file'>
+          shared.module.ts
+        </div>
+
+        <div class='file'>
+          init-caps.pipe.ts|spec.ts
+        </div>
+
+        <div class='file'>
+          text-filter.component.ts|spec.ts
+        </div>
+
+        <div class='file'>
+          text-filter.service.ts|spec.ts
+        </div>
+
+      </div>
+
+      <div class='file'>
+        app.component.ts|html|css|spec.ts
+      </div>
+
+      <div class='file'>
+        app.module.ts
+      </div>
+
+      <div class='file'>
+        app-routing.module.ts
+      </div>
+
+    </div>
+
+    <div class='file'>
+      main.ts
+    </div>
+
+    <div class='file'>
+      index.html
+    </div>
+
+  </div>
+
+  <div class='file'>
+    ...
+  </div>
+
+</div>
+
+
+
+
+
+<code-tabs>
+
+  <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="styleguide/src/04-10/app/shared/init-caps.pipe.ts">
+
+  </code-pane>
+
+  <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="styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts">
+
+  </code-pane>
+
+  <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="styleguide/src/04-10/app/heroes/heroes.component.html">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 04-11}
+
+### Core feature module
+
+#### Style 04-11
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** collecting numerous, auxiliary, single-use classes inside a core module
+to simplify the apparent structure of a feature module.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** calling the application-wide core module, `CoreModule`.
+Importing `CoreModule` into the root `AppModule` reduces its complexity
+and emphasizes its role as orchestrator of the application as a whole.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** create a feature module named `CoreModule` in a `core` folder (e.g. `app/core/core.module.ts` defines `CoreModule`).
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** put a singleton service whose instance will be shared throughout the application in the `CoreModule` (e.g. `ExceptionService` and `LoggerService`).
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** import all modules required by the assets in the `CoreModule` (e.g. `CommonModule` and `FormsModule`).
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** `CoreModule` provides one or more singleton services. Angular registers the providers with the app root injector, making a singleton instance of each service available to any component that needs them, whether that component is eagerly or lazily loaded.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** `CoreModule` will contain singleton services. When a lazy loaded module imports these, it will get a new instance and not the intended app-wide singleton.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** gather application-wide, single use components in the `CoreModule`.
+Import it once (in the `AppModule`) when the app starts and never import it anywhere else. (e.g. `NavComponent` and `SpinnerComponent`).
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class="s-rule avoid">
+
+
+
+**Avoid** importing the `CoreModule` anywhere except in the `AppModule`.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** A lazily loaded feature module that directly imports the `CoreModule` will make its own copy of services and likely have undesirable results.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** An eagerly loaded feature module already has access to the `AppModule`'s injector, and thus the `CoreModule`'s services.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** export all symbols from the `CoreModule` that the `AppModule` will import and make available for other feature modules to use.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** `CoreModule` exists to make commonly used singleton services available for use in the many other modules.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**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.
+Yet there is a real danger of that happening accidentally if the `CoreModule` provides a service.
+
+
+
+</div>
+
+
+
+<div class='filetree'>
+
+  <div class='file'>
+    src
+  </div>
+
+  <div class='children'>
+
+    <div class='file'>
+      app
+    </div>
+
+    <div class='children'>
+
+      <div class='file'>
+        core
+      </div>
+
+      <div class='children'>
+
+        <div class='file'>
+          core.module.ts
+        </div>
+
+        <div class='file'>
+          logger.service.ts|spec.ts
+        </div>
+
+        <div class='file'>
+          nav
+        </div>
+
+        <div class='children'>
+
+          <div class='file'>
+            nav.component.ts|html|css|spec.ts
+          </div>
+
+        </div>
+
+        <div class='file'>
+          spinner
+        </div>
+
+        <div class='children'>
+
+          <div class='file'>
+            spinner.component.ts|html|css|spec.ts
+          </div>
+
+          <div class='file'>
+            spinner.service.ts|spec.ts
+          </div>
+
+        </div>
+
+      </div>
+
+      <div class='file'>
+        app.component.ts|html|css|spec.ts
+      </div>
+
+      <div class='file'>
+        app.module.ts
+      </div>
+
+      <div class='file'>
+        app-routing.module.ts
+      </div>
+
+    </div>
+
+    <div class='file'>
+      main.ts
+    </div>
+
+    <div class='file'>
+      index.html
+    </div>
+
+  </div>
+
+  <div class='file'>
+    ...
+  </div>
+
+</div>
+
+
+
+
+
+<code-tabs>
+
+  <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="styleguide/src/04-11/app/core/core.module.ts">
+
+  </code-pane>
+
+  <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="styleguide/src/04-11/app/core/nav/nav.component.ts">
+
+  </code-pane>
+
+  <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="styleguide/src/04-11/app/core/spinner/spinner.component.ts">
+
+  </code-pane>
+
+  <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="styleguide/src/04-11/app/core/spinner/spinner.service.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+
+
+<div class="alert is-helpful">
+
+
+
+`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.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+{@a 04-12}
+
+### Prevent re-import of the core module
+
+#### Style 04-12
+
+Only the root `AppModule` should import the `CoreModule`.
+
+
+<div class="s-rule do">
+
+
+
+**Do** guard against reimporting of `CoreModule` and fail fast by adding guard logic.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Guards against reimporting of the `CoreModule`.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Guards against creating multiple instances of assets intended to be singletons.
+
+
+</div>
+
+
+
+<code-tabs>
+
+  <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="styleguide/src/04-12/app/core/core.module.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 04-13}
+
+### Lazy Loaded folders
+
+#### Style 04-13
+
+A distinct application feature or workflow may be *lazy loaded* or *loaded on demand* rather than when the application starts.
+
+
+<div class="s-rule do">
+
+
+
+**Do** put the contents of lazy loaded features in a *lazy loaded folder*.
+A typical *lazy loaded folder* contains a *routing component*, its child components, and their related assets and modules.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** The folder makes it easy to identify and isolate the feature content.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+{@a 04-14}
+
+### Never directly import lazy loaded folders
+
+#### Style 04-14
+
+
+<div class="s-rule avoid">
+
+
+
+**Avoid** allowing modules in sibling and parent folders to directly import a module in a *lazy loaded feature*.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Directly importing and using a module will load it immediately when the intention is to load it on demand.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+
+## Components
+
+{@a 05-03}
+
+### Components as elements
+
+#### Style 05-03
+
+
+<div class="s-rule do">
+
+
+**Consider** giving components an _element_ selector, as opposed to _attribute_ or _class_ selectors.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** components have templates containing HTML and optional Angular template syntax.
+They display content.
+Developers place components on the page as they would native HTML elements and web components.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** It is easier to recognize that a symbol is a component by looking at the template's html.
+
+
+</div>
+
+<div class="alert is-helpful">
+
+There are a few cases where you give a component an attribute, such as when you want to augment a built-in element. For example, [Material Design](https://material.angular.io/components/button/overview) uses this technique with `<button mat-button>`. However, you wouldn't use this technique on a custom element.
+
+</div>
+
+<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/app.component.avoid.html" title="app/app.component.html">
+
+</code-example>
+
+
+
+<code-tabs>
+
+  <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="styleguide/src/05-03/app/app.component.html">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 05-04}
+
+### Extract templates and styles to their own files
+
+#### Style 05-04
+
+
+<div class="s-rule do">
+
+
+
+**Do** extract templates and styles into a separate file, when more than 3 lines.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** name the template file `[component-name].component.html`, where [component-name] is the component name.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** name the style file `[component-name].component.css`, where [component-name] is the component name.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** specify _component-relative_ URLs, prefixed with `./`.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Large, inline templates and styles obscure the component's purpose and implementation, reducing readability and maintainability.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** In most editors, syntax hints and code snippets aren't available when developing inline templates and styles.
+The Angular TypeScript Language Service (forthcoming) promises to overcome this deficiency for HTML templates
+in those editors that support it; it won't help with CSS styles.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** A _component relative_ URL requires no change when you move the component files, as long as the files stay together.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** The `./` prefix is standard syntax for relative URLs; don't depend on Angular's current ability to do without that prefix.
+
+
+
+</div>
+
+
+
+<code-example path="styleguide/src/05-04/app/heroes/heroes.component.avoid.ts" region="example" title="app/heroes/heroes.component.ts">
+
+</code-example>
+
+
+
+
+
+<code-tabs>
+
+  <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="styleguide/src/05-04/app/heroes/heroes.component.html">
+
+  </code-pane>
+
+  <code-pane title="app/heroes/heroes.component.css" path="styleguide/src/05-04/app/heroes/heroes.component.css">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 05-12}
+
+### Decorate _input_ and _output_ properties
+
+#### Style 05-12
+
+
+<div class="s-rule do">
+
+
+
+**Do** use the `@Input()` and `@Output()` class decorators instead of the `inputs` and `outputs` properties of the
+`@Directive` and `@Component` metadata:
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** placing `@Input()` or `@Output()` on the same line as the property it decorates.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** It is easier and more readable to identify which properties in a class are inputs or outputs.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**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.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** The metadata declaration attached to the directive is shorter and thus more readable.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Placing the decorator on the same line _usually_ makes for shorter code and still easily identifies the property as an input or output.
+Put it on the line above when doing so is clearly more readable.
+
+
+</div>
+
+
+
+<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="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">Back to top</a>
+
+
+{@a 05-13}
+
+### Avoid aliasing _inputs_ and _outputs_
+
+#### Style 05-13
+
+
+<div class="s-rule avoid">
+
+
+
+**Avoid** _input_ and _output_ aliases except when it serves an important purpose.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Two names for the same property (one private, one public) is inherently confusing.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** You should use an alias when the directive name is also an _input_ property,
+and the directive name doesn't describe the property.
+
+
+</div>
+
+
+
+<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="styleguide/src/05-13/app/app.component.avoid.html" title="app/app.component.html">
+
+</code-example>
+
+
+
+
+
+<code-tabs>
+
+  <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="styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts">
+
+  </code-pane>
+
+  <code-pane title="app/app.component.html" path="styleguide/src/05-13/app/app.component.html">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 05-14}
+
+### Member sequence
+
+#### Style 05-14
+
+
+<div class="s-rule do">
+
+
+
+**Do** place properties up top followed by methods.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** place private members after public members, alphabetized.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Placing members in a consistent sequence makes it easy to read and
+helps instantly identify which members of the component serve which purpose.
+
+
+</div>
+
+
+
+<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="styleguide/src/05-14/app/shared/toast/toast.component.ts" region="example" title="app/shared/toast/toast.component.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 05-15}
+
+### Delegate complex component logic to services
+
+#### Style 05-15
+
+
+<div class="s-rule do">
+
+
+
+**Do** limit logic in a component to only that required for the view. All other logic should be delegated to services.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** move reusable logic to services and keep components simple and focused on their intended purpose.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Logic may be reused by multiple components when placed within a service and exposed via a function.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Logic in a service can more easily be isolated in a unit test, while the calling logic in the component can be easily mocked.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Removes dependencies and hides implementation details from the component.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Keeps the component slim, trim, and focused.
+
+
+</div>
+
+
+
+<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="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">Back to top</a>
+
+{@a 05-16}
+
+### Don't prefix _output_ properties
+
+#### Style 05-16
+
+
+<div class="s-rule do">
+
+
+
+**Do** name events without the prefix `on`.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** name event handler methods with the prefix `on` followed by the event name.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** This is consistent with built-in events such as button clicks.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Angular allows for an [alternative syntax](guide/template-syntax#binding-syntax) `on-*`. If the event itself was prefixed with `on` this would result in an `on-onEvent` binding expression.
+
+
+</div>
+
+
+
+<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="styleguide/src/05-16/app/app.component.avoid.html" title="app/app.component.html">
+
+</code-example>
+
+
+
+
+
+<code-tabs>
+
+  <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="styleguide/src/05-16/app/app.component.html">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 05-17}
+
+### Put presentation logic in the component class
+
+#### Style 05-17
+
+
+<div class="s-rule do">
+
+
+
+**Do** put presentation logic in the component class, and not in the template.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Logic will be contained in one place (the component class) instead of being spread in two places.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Keeping the component's presentation logic in the class instead of the template improves testability, maintainability, and reusability.
+
+
+</div>
+
+
+
+<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="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>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+## Directives
+
+{@a 06-01}
+
+### Use directives to enhance an element
+
+#### Style 06-01
+
+
+<div class="s-rule do">
+
+
+
+**Do** use attribute directives when you have presentation logic without a template.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Attribute directives don't have an associated template.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** An element may have more than one attribute directive applied.
+
+
+</div>
+
+
+
+<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="styleguide/src/06-01/app/app.component.html" title="app/app.component.html">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 06-03}
+
+### _HostListener_/_HostBinding_ decorators versus _host_ metadata
+
+#### Style 06-03
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** preferring the `@HostListener` and `@HostBinding` to the
+`host` property of the `@Directive` and `@Component` decorators.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** be consistent in your choice.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**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/method declaration in the 
+directive's class and the metadata in the decorator associated with the directive.
+
+
+</div>
+
+
+
+<code-example path="styleguide/src/06-03/app/shared/validator.directive.ts" title="app/shared/validator.directive.ts">
+
+</code-example>
+
+
+
+Compare with the less preferred `host` metadata alternative.
+
+
+<div class="s-why-last">
+
+
+
+**Why?** The `host` metadata is only one term to remember and doesn't require extra ES imports.
+
+
+</div>
+
+
+
+<code-example path="styleguide/src/06-03/app/shared/validator2.directive.ts" title="app/shared/validator2.directive.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+## Services
+
+{@a 07-01}
+
+### Services are singletons
+
+#### Style 07-01
+
+
+<div class="s-rule do">
+
+
+
+**Do** use services as singletons within the same injector. Use them for sharing data and functionality.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Services are ideal for sharing methods across a feature area or an app.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Services are ideal for sharing stateful in-memory data.
+
+
+</div>
+
+
+
+<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">Back to top</a>
+
+{@a 07-02}
+
+### Single responsibility
+
+#### Style 07-02
+
+
+<div class="s-rule do">
+
+
+
+**Do** create services with a single responsibility that is encapsulated by its context.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** create a new service once the service begins to exceed that singular purpose.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** When a service has multiple responsibilities, it becomes difficult to test.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** When a service has multiple responsibilities, every component or service that injects it now carries the weight of them all.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+{@a 07-03}
+
+### Providing a service
+
+#### Style 07-03
+
+
+<div class="s-rule do">
+
+
+
+**Do** provide a service with the app root injector in the `@Injectable` decorator of the service.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** The Angular injector is hierarchical.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** When you provide the service to a root injector, that instance of the service is shared and available in every class that needs the service. This is ideal when a service is sharing methods or state.
+
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** When you register a service in the `@Injectable` decorator of the service, optimization tools such as those used by the CLI's production builds can perform tree shaking and remove services that aren't used by your app.
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** This is not ideal when two different components need different instances of a service. In this scenario it would be better to provide the service at the component level that needs the new and separate instance.
+
+
+</div>
+
+<code-example path="dependency-injection/src/app/tree-shaking/service.ts" title="src/app/treeshaking/service.ts" linenums="false"> </code-example> 
+
+
+
+
+<a href="#toc">Back to top</a>
+
+{@a 07-04}
+
+### Use the @Injectable() class decorator
+
+#### Style 07-04
+
+
+<div class="s-rule do">
+
+
+
+**Do** use the `@Injectable()` class decorator instead of the `@Inject` parameter decorator when using types as tokens for the dependencies of a service.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** The Angular Dependency Injection (DI) mechanism resolves a service's own
+dependencies based on the declared types of that service's constructor parameters.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** When a service accepts only dependencies associated with type tokens, the `@Injectable()` syntax is much less verbose compared to using `@Inject()` on each individual constructor parameter.
+
+
+</div>
+
+
+
+<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="styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts" region="example" title="app/heroes/shared/hero-arena.service.ts">
+
+</code-example>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+## Data Services
+
+{@a 08-01}
+
+### Talk to the server through a service
+
+#### Style 08-01
+
+
+<div class="s-rule do">
+
+
+
+**Do** refactor logic for making data operations and interacting with data to a service.
+
+
+</div>
+
+
+
+<div class="s-rule do">
+
+
+
+**Do** make data services responsible for XHR calls, local storage, stashing in memory, or any other data operations.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** The component's responsibility is for the presentation and gathering of information for the view. It should not care how it gets the data, just that it knows who to ask for it. Separating the data services moves the logic on how to get it to the data service, and lets the component be simpler and more focused on the view.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** This makes it easier to test (mock or real) the data calls when testing a component that uses a data service.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**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
+easier to test the consumers with mock service implementations.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+
+## Lifecycle hooks
+
+Use Lifecycle hooks to tap into important events exposed by Angular.
+
+<a href="#toc">Back to top</a>
+
+{@a 09-01}
+
+### Implement lifecycle hook interfaces
+
+#### Style 09-01
+
+
+<div class="s-rule do">
+
+
+
+**Do** implement the lifecycle hook interfaces.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** Lifecycle interfaces prescribe typed method
+signatures. use those signatures to flag spelling and syntax mistakes.
+
+
+</div>
+
+
+
+<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="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>
+
+
+
+<a href="#toc">Back to top</a>
+
+
+## Appendix
+
+Useful tools and tips for Angular.
+
+<a href="#toc">Back to top</a>
+
+{@a A-01}
+
+### Codelyzer
+
+#### Style A-01
+
+
+<div class="s-rule do">
+
+
+
+**Do** use [codelyzer](https://www.npmjs.com/package/codelyzer) to follow this guide.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** adjusting the rules in codelyzer to suit your needs.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
+
+{@a A-02}
+
+### File templates and snippets
+
+#### Style A-02
+
+
+<div class="s-rule do">
+
+
+
+**Do** use file templates or snippets to help follow consistent styles and patterns. Here are templates and/or snippets for some of the web development editors and IDEs.
+
+
+</div>
+
+
+
+<div class="s-rule consider">
+
+
+
+**Consider** using [snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) for [Visual Studio Code](https://code.visualstudio.com/) that follow these styles and guidelines.
+
+<a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2">
+  <img src="generated/images/guide/styleguide/use-extension.gif" alt="Use Extension">
+</a>
+
+**Consider** using [snippets](https://atom.io/packages/angular-2-typescript-snippets) for [Atom](https://atom.io/) that follow these styles and guidelines.
+
+**Consider** using [snippets](https://github.com/orizens/sublime-angular2-snippets) for [Sublime Text](http://www.sublimetext.com/) that follow these styles and guidelines.
+
+**Consider** using [snippets](https://github.com/mhartington/vim-angular2-snippets) for [Vim](http://www.vim.org/) that follow these styles and guidelines.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
new file mode 100644
index 000000000000..32e312201893
--- /dev/null
+++ b/aio/content/guide/template-syntax.md
@@ -0,0 +1,2011 @@
+# 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
+component class instance (the *component*) and its user-facing template.
+
+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.
+
+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 is the language of the Angular template.
+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.
+
+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.
+
+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.
+
+Begin with the first form of data binding&mdash;interpolation&mdash;to see how much richer template HTML can be.
+
+<hr/>
+
+{@a interpolation}
+
+## Interpolation ( <span class="syntax">{&#xfeff;{...}}</span> )
+
+You met the double-curly braces of interpolation, `{{` and `}}`, early in your Angular education.
+
+<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.
+
+<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.
+
+More generally, the text between the braces is a **template expression** that Angular first **evaluates**
+and then **converts to a string**. The following interpolation illustrates the point by adding the two numbers:
+
+<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:
+
+<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**.
+
+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).
+
+But first, let's take a closer look at template expressions and statements.
+
+
+
+<hr/>
+
+{@a template-expressions}
+
+## Template expressions
+
+A template **expression** produces a value.
+Angular executes the expression and assigns it to a property of a binding target;
+the target might be an HTML element, a component, or a directive.
+
+The interpolation braces in `{{1 + 1}}` surround the template expression `1 + 1`.
+In the [property binding](guide/template-syntax#property-binding) section below,
+a template expression appears in quotes to the right of the&nbsp;`=` symbol as in `[property]="expression"`.
+
+You write these template expressions in a language that looks like JavaScript.
+Many JavaScript expressions are legal template expressions, but not all.
+
+JavaScript expressions that have or promote side effects are prohibited,
+including:
+
+* assignments (`=`, `+=`, `-=`, ...)
+* <code>new</code>
+* chaining expressions with <code>;</code> or <code>,</code>
+* increment and decrement operators (`++` and `--`)
+
+Other notable differences from JavaScript syntax include:
+
+* no support for the bitwise operators `|` and `&`
+* new [template expression operators](guide/template-syntax#expression-operators), such as `|`, `?.` and `!`.
+
+{@a expression-context}
+
+### Expression context
+
+The *expression context* is typically the _component_ instance.
+In the following snippets, the `title`  within double-curly braces and the
+`isUnchanged` in quotes refer to properties of the `AppComponent`.
+
+<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`).
+
+<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,
+the template variable name takes precedence, followed by a name in the directive's _context_,
+and, lastly, the component's member names.
+
+The previous example presents such a name collision. The component has a `hero`
+property and the `*ngFor` defines a `hero` template variable.
+The `hero` in `{{hero.name}}`
+refers to the template input variable, not the component's property.
+
+Template expressions cannot refer to anything in
+the global namespace (except `undefined`). 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.
+
+
+{@a no-side-effects}
+
+{@a expression-guidelines}
+
+### Expression guidelines
+
+Template expressions can make or break an application.
+Please follow these guidelines:
+
+* [No visible side effects](guide/template-syntax#no-visible-side-effects)
+* [Quick execution](guide/template-syntax#quick-execution)
+* [Simplicity](guide/template-syntax#simplicity)
+* [Idempotence](guide/template-syntax#idempotence)
+
+The only exceptions to these guidelines should be in specific circumstances that you thoroughly understand.
+
+#### No visible side effects
+
+A template expression should not change any application state other than the value of the
+target property.
+
+This rule is essential to Angular's "unidirectional data flow" policy.
+You should never worry that reading a component value might change some other displayed value.
+The view should be stable throughout a single rendering pass.
+
+#### Quick execution
+
+Angular executes template expressions after every change detection cycle.
+Change detection cycles are triggered by many asynchronous activities such as
+promise resolutions, http results, timer events, keypresses and mouse moves.
+
+Expressions should finish quickly or the user experience may drag, especially on slower devices.
+Consider caching values when their computation is expensive.
+
+#### Simplicity
+
+Although it's possible to write quite complex template expressions, you should avoid them.
+
+A property name or method call should be the norm.
+An occasional Boolean negation (`!`) is OK.
+Otherwise, confine application and business logic to the component itself,
+where it will be easier to develop and test.
+
+#### Idempotence
+
+An [idempotent](https://en.wikipedia.org/wiki/Idempotence) expression is ideal because
+it is free of side effects and improves Angular's change detection performance.
+
+In Angular terms, an idempotent expression always returns *exactly the same thing* until
+one of its dependent values changes.
+
+Dependent values should not change during a single turn of the event loop.
+If an idempotent expression returns a string or a number, it returns the same string or number
+when called twice in a row. If the expression returns an object (including an `array`),
+it returns the same object *reference* when called twice in a row.
+
+
+<hr/>
+
+{@a template-statements}
+
+## Template statements
+
+A template **statement** responds to an **event** raised by a binding target
+such as an element, component, or directive.
+You'll see template statements in the [event binding](guide/template-syntax#event-binding) section,
+appearing in quotes to the right of the `=`&nbsp;symbol as in `(event)="statement"`.
+
+<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.
+
+Responding to events is the other side of Angular's "unidirectional data flow".
+You're free to change anything, anywhere, during this turn of the event loop.
+
+Like template expressions, template *statements* use a language that looks like JavaScript.
+The template statement parser differs from the template expression parser and
+specifically supports both basic assignment (`=`) and chaining expressions
+(with <code>;</code> or <code>,</code>).
+
+However, certain JavaScript syntax is not allowed:
+
+* <code>new</code>
+* increment and decrement operators, `++` and `--`
+* operator assignment, such as `+=` and `-=`
+* the bitwise operators `|` and `&`
+* the [template expression operators](guide/template-syntax#expression-operators)
+
+### Statement context
+
+As with expressions, statements can refer only to what's in the statement context
+such as an event handling method of the component instance.
+
+The *statement context* is typically the component instance.
+The *deleteHero* in `(click)="deleteHero()"` is a method of the data-bound component.
+
+<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`),
+and a [template reference variable](guide/template-syntax#ref-vars) (`#heroForm`)
+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.
+
+Template statements 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`.
+
+### Statement guidelines
+
+As with expressions, avoid writing complex template statements.
+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.
+
+
+<hr/>
+
+{@a binding-syntax}
+
+## Binding syntax: An overview
+
+Data binding is a mechanism for coordinating what users see, with application data values.
+While you could push values to and pull values from HTML,
+the application is easier to write, read, and maintain if you turn these chores over to a binding framework.
+You simply declare bindings between binding sources and target HTML elements and let the framework do the work.
+
+Angular provides many kinds of data binding.
+This guide covers most of them, after a high-level view of Angular data binding and its syntax.
+
+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_:
+
+<style>
+  td, th {vertical-align: top}
+</style>
+
+<table width="100%">
+  <col width="30%">
+  </col>
+  <col width="50%">
+  </col>
+  <col width="20%">
+  </col>
+  <tr>
+    <th>
+      Data direction
+    </th>
+    <th>
+      Syntax
+    </th>
+    <th>
+      Type
+    </th>
+
+  </tr>
+  <tr>
+    <td>
+      One-way<br>from data source<br>to view target
+    </td>
+    <td>
+
+      <code-example>
+        {{expression}}
+        [target]="expression"
+        bind-target="expression"
+      </code-example>
+
+    </td>
+    <td>
+      Interpolation<br>
+      Property<br>
+      Attribute<br>
+      Class<br>
+      Style
+    </td>
+    <tr>
+      <td>
+        One-way<br>from view target<br>to data source
+      </td>
+      <td>
+        <code-example>
+          (target)="statement"
+          on-target="statement"
+        </code-example>
+      </td>
+      <td>
+        Event
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Two-way
+      </td>
+      <td>
+        <code-example>
+          [(target)]="expression"
+          bindon-target="expression"
+        </code-example>
+      </td>
+      <td>
+        Two-way
+      </td>
+    </tr>
+  </tr>
+</table>
+
+Binding types other than interpolation have a **target name** to the left of the equal sign,
+either surrounded by punctuation (`[]`, `()`) or preceded by a prefix (`bind-`, `on-`, `bindon-`).
+
+The target name is the name of a _property_. It may look like the name of an _attribute_ but it never is.
+To appreciate the difference, you must develop a new way to think about template HTML.
+
+### A new mental model
+
+With all the power of data binding and the ability to extend the HTML vocabulary
+with custom markup, it is tempting to think of template HTML as *HTML Plus*.
+
+It really *is* HTML Plus.
+But it's also significantly different than the HTML you're used to.
+It requires a new mental model.
+
+In the normal course of HTML development, you create a visual structure with HTML elements, and
+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.
+
+Then you learn to create new elements with components that encapsulate HTML
+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.
+
+Then you learn about data binding. The first binding you meet might look like this:
+
+<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.
+
+Your intuition is incorrect! Your everyday HTML mental model is misleading.
+In fact, once you start data binding, you are no longer working with HTML *attributes*. You aren't setting attributes.
+You are setting the *properties* of DOM elements, components, and directives.
+
+<div class="alert is-helpful">
+
+### HTML attribute vs. DOM property
+
+The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works.
+
+**Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).**
+
+* A few HTML attributes have 1:1 mapping to properties. `id` is one example.
+
+* Some HTML attributes don't have corresponding properties. `colspan` is one example.
+
+* Some DOM properties don't have corresponding attributes. `textContent` is one example.
+
+* Many HTML attributes appear to map to properties ... but not in the way you might think!
+
+That last category is confusing until you grasp this general rule:
+
+**Attributes *initialize* DOM properties and then they are done.
+Property values can change; attribute values can't.**
+
+For example, when the browser renders `<input type="text" value="Bob">`, it creates a
+corresponding DOM node with a `value` property *initialized* to "Bob".
+
+When the user enters "Sally" into the input box, the DOM element `value` *property* becomes "Sally".
+But the HTML `value` *attribute* remains unchanged as you discover if you ask the input element
+about that attribute: `input.getAttribute('value')` returns "Bob".
+
+The HTML attribute `value` specifies the *initial* value; the DOM `value` property is the *current* value.
+
+The `disabled` attribute is another peculiar example. A button's `disabled` *property* is
+`false` by default so the button is enabled.
+When you add the `disabled` *attribute*, its presence alone initializes the  button's `disabled` *property* to `true`
+so the button is disabled.
+
+Adding and removing the `disabled` *attribute* disables and enables the button. The value of the *attribute* is irrelevant,
+which is why you cannot enable a button by writing `<button disabled="false">Still Disabled</button>`.
+
+Setting the button's `disabled` *property*  (say, with an Angular binding) disables or enables the button.
+The value of the *property* matters.
+
+**The HTML attribute and the DOM property are not the same thing, even when they have the same name.**
+
+</div>
+
+This fact bears repeating:
+**Template binding works with *properties* and *events*, not *attributes*.**
+
+<div class="callout is-helpful">
+
+<header>
+  A world without attributes
+</header>
+
+In the world of Angular, the only role of attributes is to initialize element and directive state.
+When you write a data binding, you're dealing exclusively with properties and events of the target object.
+HTML attributes effectively disappear.
+
+</div>
+
+With this model firmly in mind, read on to learn about binding targets.
+
+### Binding targets
+
+The **target of a data binding** is something in the DOM.
+Depending on the binding type, the target can be an
+(element | component | directive) property, an
+(element | component | directive) event, or (rarely) an attribute name.
+The following table summarizes:
+
+<style>
+  td, th {vertical-align: top}
+</style>
+
+<table width="100%">
+  <col width="10%">
+  </col>
+  <col width="15%">
+  </col>
+  <col width="75%">
+  </col>
+  <tr>
+    <th>
+      Type
+    </th>
+    <th>
+      Target
+    </th>
+    <th>
+      Examples
+    </th>
+  </tr>
+  <tr>
+    <td>
+      Property
+    </td>
+    <td>
+      Element&nbsp;property<br>
+      Component&nbsp;property<br>
+      Directive&nbsp;property
+    </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>
+      Event
+    </td>
+    <td>
+      Element&nbsp;event<br>
+      Component&nbsp;event<br>
+      Directive&nbsp;event
+    </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>
+      Two-way
+    </td>
+    <td>
+      Event and property
+    </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>
+      Attribute
+      (the&nbsp;exception)
+    </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>
+      Class
+    </td>
+    <td>
+      <code>class</code> property
+    </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>
+      Style
+    </td>
+    <td>
+      <code>style</code> property
+    </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.
+
+<hr/>
+
+{@a property-binding}
+
+## Property binding ( <span class="syntax">[property]</span> )
+
+Write a template **property binding** to set a property of a view element.
+The binding sets the property to the value of a [template expression](guide/template-syntax#template-expressions).
+
+The most common property binding sets an element property to a component property value. An example is
+binding the `src` property of an image element to a component's `heroImageUrl` property:
+
+<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`:
+
+<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):
+
+<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*
+
+People often describe property binding as *one-way data binding* because it flows a value in one direction,
+from a component's data property into a target element property.
+
+You cannot use property binding to pull values *out* of the target element.
+You can't bind to a property of the target element to _read_ it. You can only _set_ it.
+
+<div class="alert is-helpful">
+
+Similarly, you cannot use property binding to *call* a method on the target element.
+
+If the element raises events, you can listen to them with an [event binding](guide/template-syntax#event-binding).
+
+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/ViewChild) and
+[ContentChild](api/core/ContentChild).
+
+</div>
+
+### Binding target
+
+An element property between enclosing square brackets identifies the target property.
+The target property in the following code is the image element's `src` property.
+
+<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*:
+
+<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.
+
+Element properties may be the more common targets,
+but Angular looks first to see if the name is a property of a known directive,
+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="alert is-helpful">
+
+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.
+
+</div>
+
+If the name fails to match a property of a known directive or element, Angular reports an “unknown directive” error.
+
+### Avoid side effects
+
+As mentioned previously, evaluation of a template expression should have no visible side effects.
+The expression language itself does its part to keep you safe.
+You can't assign a value to anything in a property binding expression nor use the increment and decrement operators.
+
+Of course, the expression might invoke a property or method that has side effects.
+Angular has no way of knowing that or stopping you.
+
+The expression could call something like `getFoo()`. Only you know what `getFoo()` does.
+If `getFoo()` changes something and you happen to be binding to that something, you risk an unpleasant experience.
+Angular may or may not display the changed value. Angular may detect the change and throw a warning error.
+In general, stick to data properties and to methods that return values and do no more.
+
+### Return the proper type
+
+The template expression should evaluate to the type of value expected by the target property.
+Return a string if the target property expects a string.
+Return a number if the target property expects a number.
+Return an object if the target property expects an object.
+
+The `hero` property of the `HeroDetail` component expects a `Hero` object, which is exactly what you're sending in the property binding:
+
+<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
+
+The brackets tell Angular to evaluate the template expression.
+If you omit the brackets, Angular treats the string as a constant
+and *initializes the target property* with that string.
+It does *not* evaluate the string!
+
+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
+
+You *should* omit the brackets when all of the following are true:
+
+* The target property accepts a string value.
+* The string is a fixed value that you can bake into the template.
+* This initial value never changes.
+
+You routinely initialize attributes this way in standard HTML, and it works
+just as well for directive and component property initialization.
+The following example initializes the `prefix` property of the `HeroDetailComponent` to a fixed string,
+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.
+
+{@a property-binding-or-interpolation}
+
+### Property binding or interpolation?
+
+You often have a choice between interpolation and property binding.
+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.
+
+When rendering data values as strings, there is no technical reason to prefer one form to the other.
+You lean toward readability, which tends to favor interpolation.
+You suggest establishing coding style rules and choosing the form that
+both conforms to the rules and feels most natural for the task at hand.
+
+When setting an element property to a non-string data value, you must use _property binding_.
+
+#### Content security
+
+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
+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.
+
+
+<figure>
+  <img src='generated/images/guide/template-syntax/evil-title.png' alt="evil title made safe">
+</figure>
+
+
+<hr/>
+
+{@a other-bindings}
+
+## Attribute, class, and style bindings
+
+The template syntax provides specialized one-way bindings for scenarios less well suited to property binding.
+
+### Attribute binding
+
+You can set the value of an attribute directly with an **attribute binding**.
+
+<div class="alert is-helpful">
+
+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.
+
+</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?
+
+**You must use attribute binding when there is no element property to bind.**
+
+Consider the [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA),
+[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG), and
+table span attributes. They are pure attributes.
+They do not correspond to element properties, and they do not set element properties.
+There are no property targets to bind to.
+
+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:
+
+<code-example format="nocode">
+  Template parse errors:
+  Can't bind to 'colspan' since it isn't a known native property
+</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.
+
+You need attribute bindings to create and bind to such attributes.
+
+Attribute binding syntax resembles property binding.
+Instead of an element property between brackets, start with the prefix **`attr`**,
+followed by a dot (`.`) and the name of the attribute.
+You then set the attribute value, using an expression that resolves to a string.
+
+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:
+
+<table border="1px">
+  <tr><td colspan="2">One-Two</td></tr>
+  <tr><td>Five</td><td>Six</td></tr>
+ </table>
+
+One of the primary use cases for attribute binding
+is to set ARIA attributes, as in this example:
+
+<code-example path="template-syntax/src/app/app.component.html" region="attrib-binding-aria" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+
+<hr/>
+
+### Class binding
+
+You can add and remove CSS class names from an element's `class` attribute with
+a **class binding**.
+
+Class binding syntax resembles property binding.
+Instead of an element property between brackets, start with the prefix `class`,
+optionally followed by a dot (`.`) and the name of a CSS class: `[class.class-name]`.
+
+The following examples show how to add and remove the application's "special" class
+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.
+
+<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.
+
+<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="alert is-helpful">
+
+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.
+
+</div>
+
+
+<hr/>
+
+### Style binding
+
+You can set inline styles with a **style binding**.
+
+Style binding syntax resembles property binding.
+Instead of an element property between brackets, start with the prefix `style`,
+followed by a dot (`.`) and the name of a CSS style property: `[style.style-property]`.
+
+<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 .
+
+<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="alert is-helpful">
+
+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.
+
+</div>
+
+<div class="alert is-helpful">
+
+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`.
+
+</div>
+
+<hr/>
+
+{@a event-binding}
+
+## Event binding  ( <span class="syntax">(event)</span> )
+
+The bindings directives you've met so far flow data in one direction: **from a component to an element**.
+
+Users don't just stare at the screen. They enter text into input boxes. They pick items from lists.
+They click buttons. Such user actions may result in a flow of data in the opposite direction:
+**from an element to a component**.
+
+The only way to know about a user action is to listen for certain events such as
+keystrokes, mouse movements, clicks, and touches.
+You declare your interest in user actions through Angular event binding.
+
+Event binding syntax consists of a **target event** name
+within parentheses on the left of an equal sign, and a quoted
+[template statement](guide/template-syntax#template-statements) on the right.
+The following event binding listens for the button's click events, calling
+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
+
+A **name between parentheses** &mdash; for example, `(click)` &mdash;
+identifies the target event. In the following example, the target is the button's click event.
+
+<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**:
+
+<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:
+
+<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="alert is-helpful">
+
+The `myClick` directive is further described in the section
+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.
+
+### *$event* and event handling statements
+
+In an event binding, Angular sets up an event handler for the target event.
+
+When the event is raised, the handler executes the template statement.
+The template statement typically involves a receiver, which performs an action
+in response to the event, such as storing a value from the HTML control
+into a model.
+
+The binding conveys information about the event, including data values, through
+an **event object named `$event`**.
+
+The shape of the event object is determined by the target event.
+If the target event is a native DOM element event, then `$event` is a
+[DOM event object](https://developer.mozilla.org/en-US/docs/Web/Events),
+with properties such as `target` and `target.value`.
+
+Consider this example:
+
+<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
+the statement within a context that includes the DOM event object, `$event`.
+
+To update the `name` property, the changed text is retrieved by following the path `$event.target.value`.
+
+If the event belongs to a directive (recall that components are directives),
+`$event` has whatever shape the directive decides to produce.
+
+{@a eventemitter}
+
+{@a custom-event}
+
+### Custom events with <span class="syntax">EventEmitter</span>
+
+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.
+
+Consider a `HeroDetailComponent` that presents hero information and responds to user actions.
+Although the `HeroDetailComponent` has a delete button it doesn't know how to delete the hero itself.
+The best it can do is raise an event reporting the user's delete request.
+
+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.
+
+Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s `deleteRequest` event.
+
+<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.
+
+### Template statements have side effects
+
+The `deleteHero` method has a side effect: it deletes a hero.
+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.
+
+
+<hr/>
+
+{@a two-way}
+
+## Two-way binding ( <span class="syntax">[(...)]</span> )
+
+You often want to both display a data property and update that property when the user makes changes.
+
+On the element side that takes a combination of setting a specific element property
+and listening for an element change event.
+
+Angular offers a special _two-way data binding_ syntax for this purpose, **`[(x)]`**.
+The `[(x)]` syntax combines the brackets
+of _property binding_, `[x]`, with the parentheses of _event binding_, `(x)`.
+
+<div class="callout is-important">
+
+<header>
+  [( )] = banana in a box
+</header>
+
+Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets.
+
+</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.
+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.
+
+Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`:
+
+<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,
+making the displayed text bigger or smaller.
+
+The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
+Angular _desugars_ the `SizerComponent` binding into this:
+
+<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.
+
+Clearly the two-way binding syntax is a great convenience compared to separate property and event bindings.
+
+It would be convenient to use two-way binding with HTML form elements like `<input>` and `<select>`.
+However, no native HTML element follows the `x` value and `xChange` event pattern.
+
+Fortunately, the Angular [_NgModel_](guide/template-syntax#ngModel) directive is a bridge that enables two-way binding to form elements.
+
+
+<hr/>
+
+{@a directives}
+
+## Built-in directives
+
+Earlier versions of Angular included over seventy built-in directives.
+The community contributed many more, and countless private directives
+have been created for internal applications.
+
+You don't need many of those directives in Angular.
+You can often achieve the same results with the more capable and expressive Angular binding system.
+Why create a directive to handle a click when you can write a simple binding such as this?
+
+<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.
+
+This segment reviews some of the most frequently used built-in directives,
+classified as either [_attribute_ directives](guide/template-syntax#attribute-directives) or [_structural_ directives](guide/template-syntax#structural-directives).
+
+<hr/>
+
+{@a attribute-directives}
+
+## Built-in _attribute_ directives
+
+Attribute directives listen to and modify the behavior of
+other HTML elements, attributes, properties, and components.
+They are usually applied to elements as if they were HTML attributes, hence the name.
+
+Many details are covered in the [_Attribute Directives_](guide/attribute-directives) guide.
+Many NgModules 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:
+
+* [`NgClass`](guide/template-syntax#ngClass) - add and remove a set of CSS classes
+* [`NgStyle`](guide/template-syntax#ngStyle) - add and remove a set of HTML styles
+* [`NgModel`](guide/template-syntax#ngModel) - two-way data binding to an HTML form element
+
+
+<hr/>
+
+{@a ngClass}
+
+### NgClass
+
+You typically control how elements appear
+by adding and removing CSS classes dynamically.
+You can bind to the `ngClass` to add or remove several classes simultaneously.
+
+A [class binding](guide/template-syntax#class-binding) is a good way to add or remove a *single* class.
+
+<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.
+
+Try binding `ngClass` to a key:value control object.
+Each key of the object is a CSS class name; its value is `true` if the class should be added,
+`false` if it should be removed.
+
+Consider a `setCurrentClasses` component method that sets a component property,
+`currentClasses` with an object that adds or removes three classes based on the
+`true`/`false` state of three other component properties:
+
+<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:
+
+<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="alert is-helpful">
+
+It's up to you to call `setCurrentClasses()`, both initially and when the dependent properties change.
+
+</div>
+
+<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.
+
+A [style binding](guide/template-syntax#style-binding) is an easy way to set a *single* style value.
+
+<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.
+
+Try binding `ngStyle` to a key:value control object.
+Each key of the object is a style name; its value is whatever is appropriate for that style.
+
+Consider a `setCurrentStyles` component method that sets a component property, `currentStyles`
+with an object that defines three styles, based on the state of three other component properties:
+
+<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:
+
+<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="alert is-helpful">
+
+It's up to you to call `setCurrentStyles()`, both initially and when the dependent properties change.
+
+</div>
+
+
+<hr/>
+
+{@a ngModel}
+
+### NgModel - Two-way binding to form elements with <span class="syntax">[(ngModel)]</span>
+
+When developing data entry forms, you often both display a data property and
+update that property when the user makes changes.
+
+Two-way data binding with the `NgModel` directive makes that easy. Here's an example:
+
+<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_
+
+Before using the `ngModel` directive in a two-way data binding,
+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.
+
+Here's how to import the `FormsModule` to make `[(ngModel)]` available.
+
+<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>
+
+Looking back at the `name` binding, note that
+you could have achieved the same result with separate bindings to
+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?
+
+That `ngModel` directive hides these onerous details behind its own  `ngModel` input and `ngModelChange` output properties.
+
+<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="alert is-helpful">
+
+The `ngModel` data property sets the element's value property and the `ngModelChange` event property
+listens for changes to the element's value.
+
+The details are specific to each kind of element and therefore the `NgModel` directive only works for an element
+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
+[_Forms_](guide/forms) guide shows how to bind to them.
+
+You can't apply `[(ngModel)]` to a non-form native element or a third-party custom component
+until you write a suitable *value accessor*,
+a technique that is beyond the scope of this guide.
+
+You don't need a _value accessor_ for an Angular component that you write because you
+can name the value and event properties
+to suit Angular's basic [two-way binding syntax](guide/template-syntax#two-way) and skip `NgModel` altogether.
+The [`sizer` shown above](guide/template-syntax#two-way) is an example of this technique.
+
+</div>
+
+Separate `ngModel` bindings is an improvement over binding to the element's native properties. You can do better.
+
+You shouldn't have to mention the data property twice. Angular should be able to capture
+the component's data property and set it
+with a single declaration, 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?
+
+The `[(ngModel)]` syntax can only _set_ a data-bound property.
+If you need to do something more or something different, you can write the expanded form.
+
+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>
+  <img src='generated/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations">
+</figure>
+
+<hr/>
+
+{@a structural-directives}
+
+## Built-in _structural_ directives
+
+Structural directives are responsible for HTML layout.
+They shape or reshape the DOM's _structure_, typically by adding, removing, and manipulating
+the host elements to which they are attached.
+
+The deep details of structural directives are covered in the
+[_Structural Directives_](guide/structural-directives) guide
+where you'll learn:
+
+* why you
+[_prefix the directive name with an asterisk_ (\*)](guide/structural-directives#asterisk "The * in *ngIf").
+* to use [`<ng-container>`](guide/structural-directives#ngcontainer "<ng-container>")
+to group elements when there is no suitable host element for the directive.
+* how to write your own structural directive.
+* that you can only apply [one structural directive](guide/structural-directives#one-per-element "one per host element") to an element.
+
+_This_ section is an introduction to the common structural directives:
+
+* [`NgIf`](guide/template-syntax#ngIf) - conditionally add or remove an element from the DOM
+* [`NgSwitch`](guide/template-syntax#ngSwitch) - a set of directives that switch among alternative views
+* [NgForOf](guide/template-syntax#ngFor) - repeat a template for each item in a list
+
+<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 element_).
+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`.
+
+</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.
+
+#### Show/hide is not the same thing
+
+You can control the visibility of an element with a
+[class](guide/template-syntax#class-binding) or [style](guide/template-syntax#style-binding) binding:
+
+<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`.
+
+When you hide an element, that element and all of its descendents remain in the DOM.
+All components for those elements stay in memory and
+Angular may continue to check for changes.
+You could be holding onto considerable computing resources and degrading performance,
+for something the user can't see.
+
+When `NgIf` is `false`, Angular removes the element and its descendents from the DOM.
+It destroys their components, potentially freeing up substantial resources,
+resulting in a more responsive user experience.
+
+The show/hide technique is fine for a few elements with few children.
+You should be wary when hiding large component trees; `NgIf` may be the safer choice.
+
+#### Guard against null
+
+The `ngIf` directive is often used to guard against null.
+Show/hide is useless as a guard.
+Angular will throw an error if a nested expression tries to access a property of `null`.
+
+Here we see `NgIf` guarding two `<div>`s.
+The `currentHero` name will appear only when there is a `currentHero`.
+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="alert is-helpful">
+
+See also the
+[_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe navigation operator (?.)")
+described below.
+
+</div>
+
+
+<hr/>
+
+{@a ngFor}
+
+### NgForOf
+
+`NgForOf` is a _repeater_ directive &mdash; a way to present a list of items.
+You define a block of HTML that defines how a single item should be displayed.
+You tell Angular to use that block as a template for rendering each item in the list.
+
+Here is an example of `NgForOf` 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 `NgForOf` to a component element, as in this example:
+
+<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`.
+
+</div>
+
+The text assigned to `*ngFor` is the instruction that guides the repeater process.
+
+{@a microsyntax}
+
+#### *ngFor microsyntax
+
+The string assigned to `*ngFor` is not a [template expression](guide/template-syntax#template-expressions).
+It's a *microsyntax* &mdash; a little language of its own that Angular interprets.
+The string `"let hero of heroes"` means:
+
+> *Take each hero in the `heroes` array, store it in the local `hero` looping variable, and
+make it available to the templated HTML for each iteration.*
+
+Angular translates this instruction into a `<ng-template>` around the host element,
+then uses this template repeatedly to create a new set of elements and bindings for each `hero`
+in the list.
+
+Learn about the _microsyntax_ in the [_Structural Directives_](guide/structural-directives#microsyntax) guide.
+
+{@a template-input-variable}
+
+{@a template-input-variables}
+
+### Template input variables
+
+The `let` keyword before `hero` creates a _template input variable_ called `hero`.
+The `NgForOf` directive iterates over the `heroes` array returned by the parent component's `heroes` property
+and sets `hero` to the current item from the array during each iteration.
+
+You reference the `hero` input variable within the `NgForOf` host element
+(and within its descendants) to access the hero's properties.
+Here it is referenced first in an interpolation
+and then passed in a binding to the `hero` property of the `<hero-detail>` component.
+
+<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.
+
+#### *ngFor with _index_
+
+The `index` property of the `NgForOf` directive context returns the zero-based index of the item in each iteration.
+You can capture the `index` in a template input variable and use it in the template.
+
+The next example captures the `index` in a variable named `i` and displays it with the hero name like this.
+
+<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="alert is-helpful">
+
+`NgFor` is implemented by the `NgForOf` directive. Read more about the other `NgForOf` context values such as `last`, `even`,
+and `odd` in the [NgForOf API reference](api/common/NgForOf).
+
+</div>
+
+{@a trackBy}
+
+#### *ngFor with _trackBy_
+
+The `NgForOf` directive may perform poorly, especially with large lists.
+A small change to one item, an item removed, or an item added can trigger a cascade of DOM manipulations.
+
+For example, re-querying the server could reset the list with all new hero objects.
+
+Most, if not all, are previously displayed heroes.
+*You* know this because the `id` of each hero hasn't changed.
+But Angular sees only a fresh list of new object references.
+It has no choice but to tear down the old DOM elements and insert all new DOM elements.
+
+Angular can avoid this churn with `trackBy`.
+Add a method to the component that returns the value `NgForOf` _should_ track.
+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.
+
+<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.
+
+* With no `trackBy`, both buttons trigger complete DOM element replacement.
+* With `trackBy`, only changing the `id` triggers element replacement.
+
+<figure>
+  <img src="generated/images/guide/template-syntax/ng-for-track-by-anim.gif" alt="trackBy">
+</figure>
+
+
+<hr/>
+
+{@a ngSwitch}
+
+### The _NgSwitch_ directives
+
+*NgSwitch* is like the JavaScript `switch` statement.
+It can display _one_ element from among several possible elements, based on a _switch condition_.
+Angular puts only the *selected* element into the DOM.
+
+*NgSwitch* is actually a set of three, cooperating directives:
+`NgSwitch`, `NgSwitchCase`, and `NgSwitchDefault` as seen in this example.
+
+<code-example path="template-syntax/src/app/app.component.html" region="NgSwitch" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+<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.
+
+**Bind to `[ngSwitch]`**. You'll get an error if you try to set `*ngSwitch` because
+`NgSwitch` is an *attribute* directive, not a *structural* directive.
+It changes the behavior of its companion directives.
+It doesn't touch the DOM directly.
+
+**Bind to `*ngSwitchCase` and `*ngSwitchDefault`**.
+The `NgSwitchCase` and `NgSwitchDefault` directives are _structural_ directives
+because they add or remove elements from the DOM.
+
+* `NgSwitchCase` adds its element to the DOM when its bound value equals the switch value.
+* `NgSwitchDefault` adds its element to the DOM when there is no selected `NgSwitchCase`.
+
+The switch directives are particularly useful for adding and removing *component elements*.
+This example switches among four "emotional hero" components defined in the `hero-switch.components.ts` file.
+Each component has a `hero` [input property](guide/template-syntax#inputs-outputs "Input property")
+which is bound to the `currentHero` of the parent component.
+
+Switch directives work as well with native elements and web components too.
+For example, you could replace the `<confused-hero>` switch case with the following.
+
+<code-example path="template-syntax/src/app/app.component.html" region="NgSwitch-div" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+<hr/>
+
+{@a template-reference-variable}
+
+{@a ref-vars}
+
+{@a ref-var}
+
+## Template reference variables ( <span class="syntax">#var</span> )
+
+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" title="MDN: Web Components">web component</a>.
+
+Use the hash symbol (#) to declare a reference variable.
+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
+
+<code-example path="template-syntax/src/app/app.component.html" region="ref-phone" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+<h3 class="no-toc">How a reference variable gets its value</h3>
+
+In most cases, Angular sets the reference variable's value to the element on which it was declared.
+In the previous example, `phone` refers to the _phone number_ `<input>` box.
+The phone button click handler passes the _input_ value to the component's `callPhone` method.
+But a directive can change that behavior and set the value to something else, such as itself.
+The `NgForm` directive does that.
+
+The following is a *simplified* version of the form example in the [Forms](guide/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`?
+
+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/NgForm "API: NgForm")
+directive with the ability to track the value and validity of every control in the form.
+
+The native `<form>` element doesn't have a `form` property.
+But the `NgForm` directive does, which explains how you can disable the submit button
+if the `heroForm.form.valid` is invalid and pass the entire form control tree
+to the parent component's `onSubmit` method.
+
+<h3 class="no-toc">Template reference variable warning notes</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).
+Learn the difference in the [_Structural Directives_](guide/structural-directives#template-input-variable) guide.
+
+The scope of a reference variable is the _entire template_.
+Do not define the same variable name more than once in the same template.
+The runtime value will be unpredictable.
+
+You can use the `ref-` prefix alternative to `#`.
+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>
+
+
+<hr/>
+
+{@a inputs-outputs}
+
+## Input and Output properties
+
+An _Input_ property is a _settable_ property annotated with an `@Input` decorator.
+Values flow _into_ the property when it is data bound with a [property binding](#property-binding)
+
+An _Output_ property is an _observable_ property annotated with an `@Output` decorator.
+The property almost always returns an Angular [`EventEmitter`](api/core/EventEmitter).
+Values flow _out_ of the component as events bound with an [event binding](#event-binding).
+
+You can only bind to _another_ component or directive through its _Input_ and _Output_ properties.
+
+<div class="alert is-important">
+
+Remember that all **components** are **directives**.
+
+The following discussion refers to _components_ for brevity and 
+because this topic is mostly a concern for component authors. 
+</div>
+
+<h3 class="no-toc">Discussion</h3>
+
+You are usually binding a template to its _own component class_.
+In such binding expressions, the component's property or method is to the _right_ of the (`=`).
+
+<code-example path="template-syntax/src/app/app.component.html" region="io-1" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+The `iconUrl` and `onSave` are members of the `AppComponent` class.
+They are _not_ decorated with `@Input()` or `@Output`.
+Angular does not object.
+
+**You can always bind to a public property of a component in its own template.**
+It doesn't have to be an _Input_ or _Output_ property
+
+A component's class and template are closely coupled.
+They are both parts of the same thing.
+Together they _are_ the component.
+Exchanges between a component class and its template are internal implementation details.
+
+### Binding to a different component
+
+You can also bind to a property of a _different_ component.
+In such bindings, the _other_ component's property is to the _left_ of the (`=`).
+
+In the following example, the `AppComponent` template binds `AppComponent` class members to properties of the `HeroDetailComponent` whose selector is `'app-hero-detail'`.
+
+<code-example path="template-syntax/src/app/app.component.html" region="io-2" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+The Angular compiler _may_ reject these bindings with errors like this one:
+
+<code-example language="sh" class="code-shell">
+Uncaught Error: Template parse errors:
+Can't bind to 'hero' since it isn't a known property of 'app-hero-detail'
+</code-example>
+
+You know that `HeroDetailComponent` has `hero` and `deleteRequest` properties.
+But the Angular compiler refuses to recognize them.
+
+**The Angular compiler won't bind to properties of a different component
+unless they are Input or Output properties**.
+
+There's a good reason for this rule.
+
+It's OK for a component to bind to its _own_ properties.
+The component author is in complete control of those bindings.
+
+But other components shouldn't have that kind of unrestricted access.
+You'd have a hard time supporting your component if anyone could bind to any of its properties.
+Outside components should only be able to bind to the component's public binding API.
+
+Angular asks you to be _explicit_ about that API.
+It's up to _you_ to decide which properties are available for binding by
+external components.
+
+#### TypeScript _public_ doesn't matter
+
+You can't use the TypeScript _public_ and _private_ access modifiers to
+shape the component's public binding API.
+
+<div class="alert is-important">
+
+All data bound properties must be TypeScript _public_ properties.
+Angular never binds to a TypeScript _private_ property.
+
+</div>
+
+Angular requires some other way to identify properties that _outside_ components are allowed to bind to.
+That _other way_ is the `@Input()` and `@Output()` decorators.
+
+### Declaring Input and Output properties
+
+In the sample for this guide, the bindings to `HeroDetailComponent` do not fail
+because the data bound properties are annotated with `@Input()` and `@Output()` decorators.
+
+<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="alert is-helpful">
+
+Alternatively, you can identify members in the `inputs` and `outputs` arrays
+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>
+
+</div>
+
+### Input or output?
+
+*Input* properties usually receive data values.
+*Output* properties expose event producers, such as `EventEmitter` objects.
+
+The terms _input_ and _output_ reflect the perspective of the target directive.
+
+<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.
+
+`HeroDetailComponent.deleteRequest` is an **output** property from the perspective of `HeroDetailComponent`
+because events stream *out* of that property and toward the handler in a template binding statement.
+
+<h3 id='aliasing-io'>
+  Aliasing input/output properties
+</h3>
+
+Sometimes the public name of an input/output property should be different from the internal name.
+
+This is frequently the case with [attribute directives](guide/attribute-directives).
+Directive consumers expect to bind to the name of the directive.
+For example, when you apply a directive with a `myClick` selector to a `<div>` tag,
+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.
+
+Fortunately, you can have a public name for the property that meets conventional expectations,
+while using a different name internally.
+In the example immediately above, you are actually binding *through the* `myClick` *alias* to
+the directive's own `clicks` property.
+
+You can specify the alias for the property name by passing it into the input/output decorator like this:
+
+<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="alert is-helpful">
+
+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*:
+
+<code-example path="template-syntax/src/app/click.directive.ts" region="output-myClick2" title="src/app/click.directive.ts" linenums="false">
+</code-example>
+
+</div>
+
+
+<hr/>
+
+{@a expression-operators}
+
+## Template expression operators
+
+The template expression language employs a subset of JavaScript syntax supplemented with a few special operators
+for specific scenarios. The next sections cover two of these operators: _pipe_ and _safe navigation operator_.
+
+{@a pipe}
+
+### The pipe operator ( <span class="syntax">|</span> )
+
+The result of an expression might require some transformation before you're ready to use it in a binding.
+For example, you might display a number as a currency, force text to uppercase, or filter a list and sort it.
+
+Angular [pipes](guide/pipes) are a good choice for small transformations such as these.
+Pipes are simple functions that accept an input value and return a transformed value.
+They're easy to apply within template expressions, using the **pipe operator (`|`)**:
+
+<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.
+
+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:
+
+<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
+
+<code-example language="json">
+  { "id": 0, "name": "Hercules", "emotion": "happy",
+    "birthdate": "1970-02-25T08:00:00.000Z",
+    "url": "http://www.imdb.com/title/tt0065832/",
+    "rate": 325 }
+</code-example>
+
+
+<hr/>
+
+{@a safe-navigation-operator}
+
+### The safe navigation operator ( <span class="syntax">?.</span> ) and null property paths
+
+The Angular **safe navigation operator (`?.`)** is a fluent and convenient way to
+guard against null and undefined values in property paths.
+Here it is, protecting against a view render failure if the `currentHero` is null.
+
+<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?
+
+<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.
+
+Suppose the template expression involves a property path, as in this next example
+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:
+
+<code-example format="nocode">
+  TypeError: Cannot read property 'name' of null in [null].
+</code-example>
+
+Worse, the *entire view disappears*.
+
+This would be reasonable behavior if the `hero` property could never be null.
+If it must never be null and yet it is null,
+that's a programming error that should be caught and fixed.
+Throwing an exception is the right thing to do.
+
+On the other hand, null values in the property path may be OK from time to time,
+especially when the data are null now and will arrive eventually.
+
+While waiting for data, the view should render without complaint, and
+the null property path should display as blank just as the `title` property does.
+
+Unfortunately, the app crashes when the `currentHero` is null.
+
+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.
+
+<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`.
+
+The Angular safe navigation operator (`?.`) is a more fluent and convenient way to guard against nulls in property paths.
+The expression bails out when it hits the first null value.
+The display is blank, but the app keeps rolling without errors.
+
+<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`.
+
+
+<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 navigation 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>
+
+<hr/>
+
+{@a any-type-cast-function}
+
+## The `$any` type cast function (`$any( <expression> )`) 
+
+Sometimes a binding expression will be reported as a type error and it is not possible or difficult
+to fully specify the type. To silence the error, you can use the `$any` cast function to cast
+the expression to [the `any` type](http://www.typescriptlang.org/docs/handbook/basic-types.html#any).
+
+<code-example path="template-syntax/src/app/app.component.html" region="any-type-cast-function-1" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+In this example, when the Angular compiler turns your template into TypeScript code, 
+it prevents TypeScript from reporting that `marker` is not a member of the `Hero`
+interface.
+
+The `$any` cast function can be used in conjunction with `this` to allow access to undeclared members of
+the component.
+
+<code-example path="template-syntax/src/app/app.component.html" region="any-type-cast-function-2" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+The `$any` cast function can be used anywhere in a binding expression where a method call is valid.
+
+## Summary
+You've completed this survey of template syntax.
+Now it's time to put that knowledge to work on your own components and directives.
diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md
new file mode 100644
index 000000000000..9116e24d4954
--- /dev/null
+++ b/aio/content/guide/testing.md
@@ -0,0 +1,3452 @@
+{@a top}
+# Testing
+
+This guide offers tips and techniques for unit and integration testing Angular applications.
+
+The guide presents tests of a sample CLI application that is much like the [_Tour of Heroes_ tutorial](tutorial).
+The sample application and all tests in this guide are available for inspection and experimentation:
+
+- <live-example embedded-style>Sample app</live-example>
+- <live-example stackblitz="specs">Tests</live-example>
+
+<hr>
+
+## Setup
+
+The Angular CLI downloads and install everything you need to test an Angular application with the [Jasmine test framework](https://jasmine.github.io/).
+
+The project you create with the CLI is immediately ready to test.
+Just run this one CLI command:
+
+<code-example language="sh" class="code-shell">
+  ng test
+</code-example>
+
+The `ng test` command builds the app in _watch mode_,
+and launches the [karma test runner](https://karma-runner.github.io/1.0/index.html).
+
+The console output looks a bit like this:
+
+<code-example language="sh" class="code-shell">
+10% building modules 1/1 modules 0 active
+...INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
+...INFO [launcher]: Launching browser Chrome ...
+...INFO [launcher]: Starting browser Chrome
+...INFO [Chrome ...]: Connected on socket ...
+Chrome ...: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs)
+</code-example>
+
+The last line of the log is the most important.
+It shows that Karma ran three tests that all passed.
+
+A chrome browser also opens and displays the test output in the "Jasmine HTML Reporter" like this.
+
+<figure>
+  <img src='generated/images/guide/testing/initial-jasmine-html-reporter.png' alt="Jasmine HTML Reporter in the browser">
+</figure>
+
+Most people find this browser output easier to read than the console log.
+You can click on a test row to re-run just that test or click on a description to re-run the tests in the selected test group ("test suite").
+
+Meanwhile, the `ng test` command is watching for changes.
+
+To see this in action, make a small change to `app.component.ts` and save.
+The tests run again, the browser refreshes, and the new test results appear.
+
+#### Configuration
+
+The CLI takes care of Jasmine and karma configuration for you.
+
+You can fine-tune many options by editing the `karma.conf.js` and
+the `test.ts` files in the `src/` folder.
+
+The `karma.conf.js` file is a partial karma configuration file.
+The CLI constructs the full runtime configuration in memory,based on application structure specified in the `angular.json` file, supplemented by `karma.conf.js`.
+
+Search the web for more details about Jasmine and karma configuration.
+
+#### Other test frameworks
+
+You can also unit test an Angular app with other testing libraries and test runners.
+Each library and runner has its own distinctive installation procedures, configuration, and syntax.
+
+Search the web to learn more.
+
+#### Test file name and location
+
+Look inside the `src/app` folder.
+
+The CLI generated a test file for the `AppComponent` named `app.component.spec.ts`.
+
+<div class="alert is-important">
+
+The test file extension **must be `.spec.ts`** so that tooling can identify it as a file with tests (AKA, a _spec_ file).
+
+</div>
+
+The `app.component.ts` and `app.component.spec.ts` files are siblings in the same folder.
+The root file names (`app.component`) are the same for both files.
+
+Adopt these two conventions in your own projects for _every kind_ of test file.
+
+## Service Tests
+
+Services are often the easiest files to unit test.
+Here are some synchronous and asynchronous unit tests of the `ValueService`
+written without assistance from Angular testing utilities.
+
+<code-example path="testing/src/app/demo/demo.spec.ts" region="ValueService" title="app/demo/demo.spec.ts"></code-example>
+
+{@a services-with-dependencies}
+
+#### Services with dependencies
+
+Services often depend on other services that Angular injects into the constructor.
+In many cases, it easy to create and _inject_ these dependencies by hand while
+calling the service's constructor.
+
+The `MasterService` is a simple example:
+
+<code-example path="testing/src/app/demo/demo.ts" region="MasterService" title="app/demo/demo.ts" linenums="false"></code-example>
+
+`MasterService` delegates its only method, `getValue`, to the injected `ValueService`.
+
+Here are several ways to test it.
+
+<code-example path="testing/src/app/demo/demo.spec.ts" region="MasterService" title="app/demo/demo.spec.ts"></code-example>
+
+The first test creates a `ValueService` with `new` and passes it to the `MasterService` constructor.
+
+However, injecting the real service rarely works well as most dependent services are difficult to create and control.
+
+Instead you can mock the dependency, use a dummy value, or create a
+[spy](https://jasmine.github.io/2.0/introduction.html#section-Spies)
+on the pertinent service method.
+
+<div class="alert is-helpful">
+
+Prefer spies as they are usually the easiest way to mock services.
+
+</div>
+
+These standard testing techniques are great for unit testing services in isolation.
+
+However, you almost always inject service into application classes using Angular
+dependency injection and you should have tests that reflect that usage pattern.
+Angular testing utilities make it easy to investigate how injected services behave.
+
+#### Testing services with the _TestBed_
+
+Your app relies on Angular [dependency injection (DI)](guide/dependency-injection)
+to create services.
+When a service has a dependent service, DI finds or creates that dependent service.
+And if that dependent service has its own dependencies, DI finds-or-creates them as well.
+
+As service _consumer_, you don't worry about any of this.
+You don't worry about the order of constructor arguments or how they're created.
+
+As a service _tester_, you must at least think about the first level of service dependencies
+but you _can_ let Angular DI do the service creation and deal with constructor argument order
+when you use the `TestBed` testing utility to provide and create services.
+
+{@a testbed}
+
+#### Angular _TestBed_
+
+The `TestBed` is the most important of the Angular testing utilities.
+The `TestBed` creates a dynamically-constructed Angular _test_ module that emulates
+an Angular [@NgModule](guide/ngmodules).
+
+The `TestBed.configureTestingModule()` method takes a metadata object that can have most of the properties of an [@NgModule](guide/ngmodules).
+
+To test a service, you set the `providers` metadata property with an
+array of the services that you'll test or mock.
+
+<code-example
+  path="testing/src/app/demo/demo.testbed.spec.ts"
+  region="value-service-before-each"
+  title="app/demo/demo.testbed.spec.ts (provide ValueService in beforeEach">
+</code-example>
+
+Then inject it inside a test by calling `TestBed.get()` with the service class as the argument.
+
+<code-example
+  path="testing/src/app/demo/demo.testbed.spec.ts"
+  region="value-service-inject-it">
+</code-example>
+
+Or inside the `beforeEach()` if you prefer to inject the service as part of your setup.
+
+<code-example
+  path="testing/src/app/demo/demo.testbed.spec.ts"
+  region="value-service-inject-before-each">
+</code-example>
+
+When testing a service with a dependency, provide the mock in the `providers` array.
+
+In the following example, the mock is a spy object.
+
+<code-example
+  path="testing/src/app/demo/demo.testbed.spec.ts"
+  region="master-service-before-each" linenums="false">
+</code-example>
+
+The test consumes that spy in the same way it did earlier.
+
+<code-example
+  path="testing/src/app/demo/demo.testbed.spec.ts"
+  region="master-service-it">
+</code-example>
+
+{@a no-before-each}
+#### Testing without _beforeEach()_
+
+Most test suites in this guide call `beforeEach()` to set the preconditions for each `it()` test
+and rely on the `TestBed` to create classes and inject services.
+
+There's another school of testing that never calls `beforeEach()` and prefers to create classes explicitly rather than use the `TestBed`.
+
+Here's how you might rewrite one of the `MasterService` tests in that style.
+
+Begin by putting re-usable, preparatory code in a _setup_ function instead of `beforeEach()`.
+
+<code-example
+  path="testing/src/app/demo/demo.spec.ts"
+  region="no-before-each-setup"
+  title="app/demo/demo.spec.ts (setup)" linenums="false">
+</code-example>
+
+The `setup()` function returns an object literal
+with the variables, such as `masterService`, that a test might reference.
+You don't define _semi-global_ variables (e.g., `let masterService: MasterService`)
+in the body of the `describe()`.
+
+Then each test invokes `setup()` in its first line, before continuing
+with steps that manipulate the test subject and assert expectations.
+
+<code-example
+  path="testing/src/app/demo/demo.spec.ts"
+  region="no-before-each-test" linenums="false">
+</code-example>
+
+Notice how the test uses
+[_destructuring assignment_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
+to extract the setup variables that it needs.
+
+<code-example
+  path="testing/src/app/demo/demo.spec.ts"
+  region="no-before-each-setup-call">
+</code-example>
+
+Many developers feel this approach is cleaner and more explicit than the
+traditional `beforeEach()` style.
+
+Although this testing guide follows the tradition style and
+the default [CLI schematics](https://github.com/angular/devkit)
+generate test files with `beforeEach()` and `TestBed`,
+feel free to adopt _this alternative approach_ in your own projects.
+
+#### Testing HTTP services
+
+Data services that make HTTP calls to remote servers typically inject and delegate
+to the Angular [`HttpClient`](guide/http) service for XHR calls.
+
+You can test a data service with an injected `HttpClient` spy as you would
+test any service with a dependency.
+<code-example
+  path="testing/src/app/model/hero.service.spec.ts"
+  region="test-with-spies"
+  title="app/model/hero.service.spec.ts (tests with spies)">
+</code-example>
+
+<div class="alert is-important">
+
+The `HeroService` methods return `Observables`. You must
+_subscribe_ to an observable to (a) cause it to execute and (b)
+assert that the method succeeds or fails.
+
+The `subscribe()` method takes a success (`next`) and fail (`error`) callback.
+Make sure you provide _both_ callbacks so that you capture errors.
+Neglecting to do so produces an asynchronous uncaught observable error that
+the test runner will likely attribute to a completely different test.
+
+</div>
+
+#### _HttpClientTestingModule_
+
+Extended interactions between a data service and the `HttpClient` can be complex
+and difficult to mock with spies.
+
+The `HttpClientTestingModule` can make these testing scenarios more manageable.
+
+While the _code sample_ accompanying this guide demonstrates `HttpClientTestingModule`,
+this page defers to the [Http guide](guide/http#testing-http-requests),
+which covers testing with the `HttpClientTestingModule` in detail.
+
+<div class="alert is-helpful">
+
+This guide's sample code also demonstrates testing of the _legacy_ `HttpModule`
+in `app/model/http-hero.service.spec.ts`.
+
+</div>
+
+
+## Component Test Basics
+
+A component, unlike all other parts of an Angular application,
+combines an HTML template and a TypeScript class.
+The component truly is the template and the class _working together_.
+and to adequately test a component, you should test that they work together
+as intended.
+
+Such tests require creating the component's host element in the browser DOM,
+as Angular does, and investigating the component class's interaction with
+the DOM as described by its template.
+
+The Angular `TestBed` facilitates this kind of testing as you'll see in the sections below.
+But in many cases, _testing the component class alone_, without DOM involvement,
+can validate much of the component's behavior in an easier, more obvious way.
+
+### Component class testing
+
+Test a component class on its own as you would test a service class.
+
+Consider this `LightswitchComponent` which toggles a light on and off
+(represented by an on-screen message) when the user clicks the button.
+
+<code-example
+  path="testing/src/app/demo/demo.ts"
+  region="LightswitchComp"
+  title="app/demo/demo.ts (LightswitchComp)" linenums="false">
+</code-example>
+
+You might decide only to test that the `clicked()` method
+toggles the light's _on/off_ state and sets the message appropriately.
+
+This component class has no dependencies.
+To test a service with no dependencies, you create it with `new`, poke at its API,
+and assert expectations on its public state.
+Do the same with the component class.
+
+<code-example
+  path="testing/src/app/demo/demo.spec.ts"
+  region="Lightswitch"
+  title="app/demo/demo.spec.ts (Lightswitch tests)" linenums="false">
+</code-example>
+
+Here is the `DashboardHeroComponent` from the _Tour of Heroes_ tutorial.
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.ts"
+  region="class"
+  title="app/dashboard/dashboard-hero.component.ts (component)" linenums="false">
+</code-example>
+
+It appears within the template of a parent component,
+which binds a _hero_ to the `@Input` property and
+listens for an event raised through the _selected_ `@Output` property.
+
+You can test that the class code works without creating the `DashboardHeroComponent`
+or its parent component.
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.spec.ts"
+  region="class-only"
+  title="app/dashboard/dashboard-hero.component.spec.ts (class tests)" linenums="false">
+</code-example>
+
+When a component has dependencies, you may wish to use the `TestBed` to both
+create the component and its dependencies.
+
+The following `WelcomeComponent` depends on the `UserService` to know the name of the user to greet.
+
+<code-example
+  path="testing/src/app/welcome/welcome.component.ts"
+  region="class"
+  title="app/welcome/welcome.component.ts" linenums="false">
+</code-example>
+
+You might start by creating a mock of the `UserService` that meets the minimum needs of this component.
+
+<code-example
+  path="testing/src/app/welcome/welcome.component.spec.ts"
+  region="mock-user-service"
+  title="app/welcome/welcome.component.spec.ts (MockUserService)" linenums="false">
+</code-example>
+
+Then provide and inject _both the_ **component** _and the service_ in the `TestBed` configuration.
+
+<code-example
+  path="testing/src/app/welcome/welcome.component.spec.ts"
+  region="class-only-before-each"
+  title="app/welcome/welcome.component.spec.ts (class-only setup)" linenums="false">
+</code-example>
+
+Then exercise the component class, remembering to call the [lifecycle hook methods](guide/lifecycle-hooks) as Angular does when running the app.
+
+<code-example
+  path="testing/src/app/welcome/welcome.component.spec.ts"
+  region="class-only-tests"
+  title="app/welcome/welcome.component.spec.ts (class-only tests)" linenums="false">
+</code-example>
+
+### Component DOM testing
+
+Testing the component _class_ is as easy as testing a service.
+
+But a component is more than just its class.
+A component interacts with the DOM and with other components.
+The _class-only_ tests can tell you about class behavior.
+They cannot tell you if the component is going to render properly,
+respond to user input and gestures, or integrate with its parent and child components.
+
+None of the _class-only_ tests above can answer key questions about how the
+components actually behave on screen.
+
+- Is `Lightswitch.clicked()` bound to anything such that the user can invoke it?
+- Is the `Lightswitch.message` displayed?
+- Can the user actually select the hero displayed by `DashboardHeroComponent`?
+- Is the hero name displayed as expected (i.e, in uppercase)?
+- Is the welcome message displayed by the template of `WelcomeComponent`?
+
+These may not be troubling questions for the simple components illustrated above.
+But many components have complex interactions with the DOM elements
+described in their templates, causing HTML to appear and disappear as
+the component state changes.
+
+To answer these kinds of questions, you have to create the DOM elements associated
+with the components, you must examine the DOM to confirm that component state
+displays properly at the appropriate times, and you must simulate user interaction
+with the screen to determine whether those interactions cause the component to
+behave as expected.
+
+To write these kinds of test, you'll use additional features of the `TestBed`
+as well as other testing helpers.
+
+#### CLI-generated tests
+
+The CLI creates an initial test file for you by default when you ask it to
+generate a new component.
+
+For example, the following CLI command generates a `BannerComponent` in the `app/banner` folder (with inline template and styles):
+
+<code-example language="sh" class="code-shell">
+ng generate component banner --inline-template --inline-style --module app
+</code-example>
+
+It also generates an initial test file for the component, `banner-external.component.spec.ts`, that looks like this:
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="v1"
+  title="app/banner/banner-external.component.spec.ts (initial)" linenums="false">
+</code-example>
+
+#### Reduce the setup
+
+Only the last three lines of this file actually test the component
+and all they do is assert that Angular can create the component.
+
+The rest of the file is boilerplate setup code anticipating more advanced tests that _might_ become necessary if the component evolves into something substantial.
+
+You'll learn about these advanced test features below.
+For now, you can radically reduce this test file to a more manageable size:
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="v2"
+  title="app/banner/banner-initial.component.spec.ts (minimal)" linenums="false">
+</code-example>
+
+In this example, the metadata object passed to `TestBed.configureTestingModule`
+simply declares `BannerComponent`, the component to test.
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="configureTestingModule">
+</code-example>
+
+<div class="alert is-helpful">
+
+There's no need to declare or import anything else.
+The default test module is pre-configured with
+something like the `BrowserModule` from `@angular/platform-browser`.
+
+Later you'll call `TestBed.configureTestingModule()` with
+imports, providers, and more declarations to suit your testing needs.
+Optional `override` methods can further fine-tune aspects of the configuration.
+
+</div>
+
+{@a create-component}
+
+#### _createComponent()_
+
+After configuring `TestBed`, you call its `createComponent()` method.
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="createComponent">
+</code-example>
+
+`TestBed.createComponent()` creates an instance of the `BannerComponent`,
+adds a corresponding element to the test-runner DOM,
+and returns a [`ComponentFixture`](#component-fixture).
+
+<div class="alert is-important">
+
+Do not re-configure `TestBed` after calling `createComponent`.
+
+The `createComponent` method freezes the current `TestBed`definition,
+closing it to further configuration.
+
+You cannot call any more `TestBed` configuration methods, not `configureTestingModule()`,
+nor `get()`, nor any of the `override...` methods.
+If you try, `TestBed` throws an error.
+
+</div>
+
+{@a component-fixture}
+
+#### _ComponentFixture_
+
+The [ComponentFixture](api/core/testing/ComponentFixture) is a test harness for interacting with the created component and its corresponding element.
+
+Access the component instance through the fixture and confirm it exists with a Jasmine expectation:
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="componentInstance">
+</code-example>
+
+#### _beforeEach()_
+
+You will add more tests as this component evolves.
+Rather than duplicate the `TestBed` configuration for each test,
+you refactor to pull the setup into a Jasmine `beforeEach()` and some supporting variables:
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="v3"
+  linenums="false">
+</code-example>
+
+Now add a test that gets the component's element from `fixture.nativeElement` and
+looks for the expected text.
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="v4-test-2">
+</code-example>
+
+{@a native-element}
+
+#### _nativeElement_
+
+The value of `ComponentFixture.nativeElement` has the `any` type.
+Later you'll encounter the `DebugElement.nativeElement` and it too has the `any` type.
+
+Angular can't know at compile time what kind of HTML element the `nativeElement` is or
+if it even is an HTML element.
+The app might be running on a _non-browser platform_, such as the server or a
+[Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API),
+where the element may have a diminished API or not exist at all.
+
+The tests in this guide are designed to run in a browser so a
+`nativeElement` value will always be an `HTMLElement` or
+one of its derived classes.
+
+Knowing that it is an `HTMLElement` of some sort, you can use
+the standard HTML `querySelector` to dive deeper into the element tree.
+
+Here's another test that calls `HTMLElement.querySelector` to get the paragraph element and look for the banner text:
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="v4-test-3">
+</code-example>
+
+{@a debug-element}
+
+#### _DebugElement_
+
+The Angular _fixture_ provides the component's element directly through the `fixture.nativeElement`.
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="nativeElement">
+</code-example>
+
+This is actually a convenience method, implemented as `fixture.debugElement.nativeElement`.
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="debugElement-nativeElement">
+</code-example>
+
+There's a good reason for this circuitous path to the element.
+
+The properties of the `nativeElement` depend upon the runtime environment.
+You could be running these tests on a _non-browser_ platform that doesn't have a DOM or
+whose DOM-emulation doesn't support the full `HTMLElement` API.
+
+Angular relies on the `DebugElement` abstraction to work safely across _all supported platforms_.
+Instead of creating an HTML element tree, Angular creates a `DebugElement` tree that wraps the _native elements_ for the runtime platform.
+The `nativeElement` property unwraps the `DebugElement` and returns the platform-specific element object.
+
+Because the sample tests for this guide are designed to run only in a browser,
+a `nativeElement` in these tests is always an `HTMLElement`
+whose familiar methods and properties you can explore within a test.
+
+Here's the previous test, re-implemented with `fixture.debugElement.nativeElement`:
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="v4-test-4">
+</code-example>
+
+The `DebugElement` has other methods and properties that
+are useful in tests, as you'll see elsewhere in this guide.
+
+You import the `DebugElement` symbol from the Angular core library.
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="import-debug-element">
+</code-example>
+
+{@a by-css}
+#### _By.css()_
+
+Although the tests in this guide all run in the browser,
+some apps might run on a different platform at least some of the time.
+
+For example, the component might render first on the server as part of a strategy to make the application launch faster on poorly connected devices. The server-side renderer might not support the full HTML element API.
+If it doesn't support `querySelector`, the previous test could fail.
+
+The `DebugElement` offers query methods that work for all supported platforms.
+These query methods take a _predicate_ function that returns `true` when a node in the `DebugElement` tree matches the selection criteria.
+
+You create a _predicate_ with the help of a `By` class imported from a
+library for the runtime platform. Here's the `By` import for the browser platform:
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="import-by">
+</code-example>
+
+The following example re-implements the previous test with
+`DebugElement.query()` and the browser's `By.css` method.
+
+<code-example
+  path="testing/src/app/banner/banner-initial.component.spec.ts"
+  region="v4-test-5">
+</code-example>
+
+Some noteworthy observations:
+
+- The `By.css()` static method selects `DebugElement` nodes
+  with a [standard CSS selector](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors 'CSS selectors').
+- The query returns a `DebugElement` for the paragraph.
+- You must unwrap that result to get the paragraph element.
+
+When you're filtering by CSS selector and only testing properties of a browser's _native element_, the `By.css` approach may be overkill.
+
+It's often easier and more clear to filter with a standard `HTMLElement` method
+such as `querySelector()` or `querySelectorAll()`,
+as you'll see in the next set of tests.
+
+<hr>
+
+## Component Test Scenarios
+
+The following sections, comprising most of this guide, explore common
+component testing scenarios
+
+### Component binding
+
+The current `BannerComponent` presents static title text in the HTML template.
+
+After a few changes, the `BannerComponent` presents a dynamic title by binding to
+the component's `title` property like this.
+
+<code-example
+  path="testing/src/app/banner/banner.component.ts"
+  region="component"
+  title="app/banner/banner.component.ts" linenums="false">
+</code-example>
+
+Simple as this is, you decide to add a test to confirm that component
+actually displays the right content where you think it should.
+
+#### Query for the _&lt;h1&gt;_
+
+You'll write a sequence of tests that inspect the value of the `<h1>` element
+that wraps the _title_ property interpolation binding.
+
+You update the `beforeEach` to find that element with a standard HTML `querySelector`
+and assign it to the `h1` variable.
+
+<code-example
+  path="testing/src/app/banner/banner.component.spec.ts"
+  region="setup"
+  title="app/banner/banner.component.spec.ts (setup)" linenums="false">
+</code-example>
+
+{@a detect-changes}
+
+#### _createComponent()_ does not bind data
+
+For your first test you'd like to see that the screen displays the default `title`.
+Your instinct is to write a test that immediately inspects the `<h1>` like this:
+
+<code-example
+  path="testing/src/app/banner/banner.component.spec.ts"
+  region="expect-h1-default-v1">
+</code-example>
+
+_That test fails_ with the message:
+
+```javascript
+expected '' to contain 'Test Tour of Heroes'.
+```
+
+Binding happens when Angular performs **change detection**.
+
+In production, change detection kicks in automatically
+when Angular creates a component or the user enters a keystroke or
+an asynchronous activity (e.g., AJAX) completes.
+
+The `TestBed.createComponent` does _not_ trigger change detection.
+a fact confirmed in the revised test:
+
+<code-example
+  path="testing/src/app/banner/banner.component.spec.ts" region="test-w-o-detect-changes" linenums="false">
+</code-example>
+
+#### _detectChanges()_
+
+You must tell the `TestBed` to perform data binding by calling `fixture.detectChanges()`.
+Only then does the `<h1>` have the expected title.
+
+<code-example
+  path="testing/src/app/banner/banner.component.spec.ts"
+  region="expect-h1-default">
+</code-example>
+
+Delayed change detection is intentional and useful.
+It gives the tester an opportunity to inspect and change the state of
+the component _before Angular initiates data binding and calls [lifecycle hooks](guide/lifecycle-hooks)_.
+
+Here's another test that changes the component's `title` property _before_ calling `fixture.detectChanges()`.
+
+<code-example
+  path="testing/src/app/banner/banner.component.spec.ts"
+  region="after-change">
+</code-example>
+
+{@a auto-detect-changes}
+
+#### Automatic change detection
+
+The `BannerComponent` tests frequently call `detectChanges`.
+Some testers prefer that the Angular test environment run change detection automatically.
+
+That's possible by configuring the `TestBed` with the `ComponentFixtureAutoDetect` provider.
+First import it from the testing utility library:
+
+<code-example path="testing/src/app/banner/banner.component.detect-changes.spec.ts" region="import-ComponentFixtureAutoDetect" title="app/banner/banner.component.detect-changes.spec.ts (import)" linenums="false"></code-example>
+
+Then add it to the `providers` array of the testing module configuration:
+
+<code-example path="testing/src/app/banner/banner.component.detect-changes.spec.ts" region="auto-detect" title="app/banner/banner.component.detect-changes.spec.ts (AutoDetect)" linenums="false"></code-example>
+
+Here are three tests that illustrate how automatic change detection works.
+
+<code-example path="testing/src/app/banner/banner.component.detect-changes.spec.ts" region="auto-detect-tests" title="app/banner/banner.component.detect-changes.spec.ts (AutoDetect Tests)" linenums="false"></code-example>
+
+The first test shows the benefit of automatic change detection.
+
+The second and third test reveal an important limitation.
+The Angular testing environment does _not_ know that the test changed the component's `title`.
+The `ComponentFixtureAutoDetect` service responds to _asynchronous activities_ such as promise resolution, timers, and DOM events.
+But a direct, synchronous update of the component property is invisible.
+The test must call `fixture.detectChanges()` manually to trigger another cycle of change detection.
+
+<div class="alert is-helpful">
+
+Rather than wonder when the test fixture will or won't perform change detection,
+the samples in this guide _always call_ `detectChanges()` _explicitly_.
+There is no harm in calling `detectChanges()` more often than is strictly necessary.
+
+</div>
+
+<hr>
+
+{@a dispatch-event}
+
+#### Change an input value with _dispatchEvent()_
+
+To simulate user input, you can find the input element and set its `value` property.
+
+You will call `fixture.detectChanges()` to trigger Angular's change detection.
+But there is an essential, intermediate step.
+
+Angular doesn't know that you set the input element's `value` property.
+It won't read that property until you raise the element's `input` event by calling `dispatchEvent()`.
+_Then_ you call `detectChanges()`.
+
+The following example demonstrates the proper sequence.
+
+<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="title-case-pipe" title="app/hero/hero-detail.component.spec.ts (pipe test)"></code-example>
+
+<hr>
+
+### Component with external files
+
+The `BannerComponent` above is defined with an _inline template_ and _inline css_, specified in the `@Component.template` and `@Component.styles` properties respectively.
+
+Many components specify _external templates_ and _external css_ with the
+`@Component.templateUrl` and `@Component.styleUrls` properties respectively,
+as the following variant of `BannerComponent` does.
+
+<code-example
+  path="testing/src/app/banner/banner-external.component.ts"
+  region="metadata"
+  title="app/banner/banner-external.component.ts (metadata)" linenums="false">
+</code-example>
+
+This syntax tells the Angular compiler to read the external files during component compilation.
+
+That's not a problem when you run the CLI `ng test` command because it
+_compiles the app before running the tests_.
+
+However, if you run the tests in a **non-CLI environment**,
+tests of this component may fail.
+For example, if you run the `BannerComponent` tests in a web coding environment such as [plunker](http://plnkr.co/), you'll see a message like this one:
+
+<code-example language="sh" class="code-shell" hideCopy>
+Error: This test module uses the component BannerComponent
+which is using a "templateUrl" or "styleUrls", but they were never compiled.
+Please call "TestBed.compileComponents" before your test.
+</code-example>
+
+You get this test failure message when the runtime environment
+compiles the source code _during the tests themselves_.
+
+To correct the problem, call `compileComponents()` as explained [below](#compile-components).
+
+{@a component-with-dependency}
+
+### Component with a dependency
+
+Components often have service dependencies.
+
+The `WelcomeComponent` displays a welcome message to the logged in user.
+It knows who the user is based on a property of the injected `UserService`:
+
+<code-example path="testing/src/app/welcome/welcome.component.ts" title="app/welcome/welcome.component.ts" linenums="false"></code-example>
+
+The `WelcomeComponent` has decision logic that interacts with the service, logic that makes this component worth testing.
+Here's the testing module configuration for the spec file, `app/welcome/welcome.component.spec.ts`:
+
+<code-example path="testing/src/app/welcome/welcome.component.spec.ts" region="config-test-module" title="app/welcome/welcome.component.spec.ts" linenums="false"></code-example>
+
+This time, in addition to declaring the _component-under-test_,
+the configuration adds a `UserService` provider to the `providers` list.
+But not the real `UserService`.
+
+{@a service-test-doubles}
+
+#### Provide service test doubles
+
+A _component-under-test_ doesn't have to be injected with real services.
+In fact, it is usually better if they are test doubles (stubs, fakes, spies, or mocks).
+The purpose of the spec is to test the component, not the service,
+and real services can be trouble.
+
+Injecting the real `UserService` could be a nightmare.
+The real service might ask the user for login credentials and
+attempt to reach an authentication server.
+These behaviors can be hard to intercept.
+It is far easier and safer to create and register a test double in place of the real `UserService`.
+
+This particular test suite supplies a minimal mock of the `UserService` that satisfies the needs of the `WelcomeComponent`
+and its tests:
+
+<code-example
+  path="testing/src/app/welcome/welcome.component.spec.ts"
+  region="user-service-stub"
+  title="app/welcome/welcome.component.spec.ts" linenums="false">
+</code-example>
+
+{@a get-injected-service}
+
+#### Get injected services
+
+The tests need access to the (stub) `UserService` injected into the `WelcomeComponent`.
+
+Angular has a hierarchical injection system.
+There can be injectors at multiple levels, from the root injector created by the `TestBed`
+down through the component tree.
+
+The safest way to get the injected service, the way that **_always works_**,
+is to **get it from the injector of the _component-under-test_**.
+The component injector is a property of the fixture's `DebugElement`.
+
+<code-example
+  path="testing/src/app/welcome/welcome.component.spec.ts"
+  region="injected-service"
+  title="WelcomeComponent's injector">
+</code-example>
+
+{@a testbed-get}
+
+#### _TestBed.get()_
+
+You _may_ also be able to get the service from the root injector via `TestBed.get()`.
+This is easier to remember and less verbose.
+But it only works when Angular injects the component with the service instance in the test's root injector.
+
+In this test suite, the _only_ provider of `UserService` is the root testing module,
+so it is safe to call `TestBed.get()` as follows:
+
+<code-example
+  path="testing/src/app/welcome/welcome.component.spec.ts"
+  region="inject-from-testbed"
+  title="TestBed injector">
+</code-example>
+
+<div class="alert is-helpful">
+
+For a use case in which `TestBed.get()` does not work,
+see the [_Override component providers_](#component-override) section that
+explains when and why you must get the service from the component's injector instead.
+
+</div>
+
+{@a service-from-injector}
+
+#### Always get the service from an injector
+
+Do _not_ reference the `userServiceStub` object
+that's provided to the testing module in the body of your test.
+**It does not work!**
+The `userService` instance injected into the component is a completely _different_ object,
+a clone of the provided `userServiceStub`.
+
+<code-example path="testing/src/app/welcome/welcome.component.spec.ts" region="stub-not-injected" title="app/welcome/welcome.component.spec.ts" linenums="false"></code-example>
+
+{@a welcome-spec-setup}
+
+#### Final setup and tests
+
+Here's the complete `beforeEach()`, using `TestBed.get()`:
+
+<code-example path="testing/src/app/welcome/welcome.component.spec.ts" region="setup" title="app/welcome/welcome.component.spec.ts" linenums="false"></code-example>
+
+And here are some tests:
+
+<code-example path="testing/src/app/welcome/welcome.component.spec.ts" region="tests" title="app/welcome/welcome.component.spec.ts" linenums="false"></code-example>
+
+The first is a sanity test; it confirms that the stubbed `UserService` is called and working.
+
+<div class="alert is-helpful">
+
+The second parameter to the Jasmine matcher (e.g., `'expected name'`) is an optional failure label.
+If the expectation fails, Jasmine displays appends this label to the expectation failure message.
+In a spec with multiple expectations, it can help clarify what went wrong and which expectation failed.
+
+</div>
+
+The remaining tests confirm the logic of the component when the service returns different values.
+The second test validates the effect of changing the user name.
+The third test checks that the component displays the proper message when there is no logged-in user.
+
+<hr>
+
+{@a component-with-async-service}
+
+### Component with async service
+
+In this sample, the `AboutComponent` template hosts a `TwainComponent`.
+The `TwainComponent` displays Mark Twain quotes.
+
+<code-example
+  path="testing/src/app/twain/twain.component.ts"
+  region="template"
+  title="app/twain/twain.component.ts (template)" linenums="false">
+</code-example>
+
+Note that value of the component's `quote` property passes through an `AsyncPipe`.
+That means the property returns either a `Promise` or an `Observable`.
+
+In this example, the `TwainComponent.getQuote()` method tells you that
+the `quote` property returns an `Observable`.
+
+<code-example
+  path="testing/src/app/twain/twain.component.ts"
+  region="get-quote"
+  title="app/twain/twain.component.ts (getQuote)" linenums="false">
+</code-example>
+
+The `TwainComponent` gets quotes from an injected `TwainService`.
+The component starts the returned `Observable` with a placeholder value (`'...'`),
+before the service can returns its first quote.
+
+The `catchError` intercepts service errors, prepares an error message,
+and returns the placeholder value on the success channel.
+It must wait a tick to set the `errorMessage`
+in order to avoid updating that message twice in the same change detection cycle.
+
+These are all features you'll want to test.
+
+#### Testing with a spy
+
+When testing a component, only the service's public API should matter.
+In general, tests themselves should not make calls to remote servers.
+They should emulate such calls. The setup in this `app/twain/twain.component.spec.ts` shows one way to do that:
+
+<code-example
+  path="testing/src/app/twain/twain.component.spec.ts"
+  region="setup"
+  title="app/twain/twain.component.spec.ts (setup)" linenums="false">
+</code-example>
+
+{@a service-spy}
+
+Focus on the spy.
+
+<code-example
+  path="testing/src/app/twain/twain.component.spec.ts"
+  region="spy">
+</code-example>
+
+The spy is designed such that any call to `getQuote` receives an observable with a test quote.
+Unlike the real `getQuote()` method, this spy bypasses the server
+and returns a synchronous observable whose value is available immediately.
+
+You can write many useful tests with this spy, even though its `Observable` is synchronous.
+
+{@a sync-tests}
+
+#### Synchronous tests
+
+A key advantage of a synchronous `Observable` is that
+you can often turn asynchronous processes into synchronous tests.
+
+<code-example
+  path="testing/src/app/twain/twain.component.spec.ts"
+  region="sync-test">
+</code-example>
+
+Because the spy result returns synchronously, the `getQuote()` method updates
+the message on screen immediately _after_
+the first change detection cycle during which Angular calls `ngOnInit`.
+
+You're not so lucky when testing the error path.
+Although the service spy will return an error synchronously,
+the component method calls `setTimeout()`.
+The test must wait at least one full turn of the JavaScript engine before the
+value becomes available. The test must become _asynchronous_.
+
+{@a fake-async}
+
+#### Async test with _fakeAsync()_
+
+The following test confirms the expected behavior when the service returns an `ErrorObservable`.
+
+<code-example
+  path="testing/src/app/twain/twain.component.spec.ts"
+  region="error-test">
+</code-example>
+
+Note that the `it()` function receives an argument of the following form.
+
+```javascript
+fakeAsync(() => { /* test body */ })`
+```
+
+The `fakeAsync` function enables a linear coding style by running the test body in a special _fakeAsync test zone_.
+The test body appears to be synchronous.
+There is no nested syntax (like a `Promise.then()`) to disrupt the flow of control.
+
+{@a tick}
+
+#### The _tick()_ function
+
+You do have to call `tick()` to advance the (virtual) clock.
+
+Calling `tick()` simulates the passage of time until all pending asynchronous activities finish.
+In this case, it waits for the error handler's `setTimeout()`;
+
+The `tick` function is one of the Angular testing utilities that you import with `TestBed`.
+It's a companion to `fakeAsync` and you can only call it within a `fakeAsync` body.
+
+#### Support more macroTasks
+
+By default `fakeAsync` supports the following `macroTasks`.
+
+- setTimeout
+- setInterval
+- requestAnimationFrame
+- webkitRequestAnimationFrame
+- mozRequestAnimationFrame
+
+If you run other `macroTask` such as `HTMLCanvasElement.toBlob()`, `Unknown macroTask scheduled in fake async test` error will be thrown.
+
+<code-tabs>
+  <code-pane
+    path="testing/src/app/shared/canvas.component.spec.ts"
+    title="src/app/shared/canvas.component.spec.ts" linenums="false">
+  </code-pane>
+  <code-pane
+    path="testing/src/app/shared/canvas.component.ts"
+    title="src/app/shared/canvas.component.ts" linenums="false">
+  </code-pane>
+</code-tabs>
+
+If you want to support such case, you need to define the `macroTask` you want to support in `beforeEach`.
+For example:
+
+```javascript
+beforeEach(() => {
+  window['__zone_symbol__FakeAsyncTestMacroTask'] = [
+    {
+      source: 'HTMLCanvasElement.toBlob',
+      callbackArgs: [{ size: 200 }]
+    }
+  ];
+});
+
+it('toBlob should be able to run in fakeAsync', fakeAsync(() => {
+    const canvas: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement;
+    let blob = null;
+    canvas.toBlob(function(b) {
+      blob = b;
+    });
+    tick();
+    expect(blob.size).toBe(200);
+  })
+);
+```
+
+#### Async observables
+
+You might be satisfied with the test coverage of these tests.
+
+But you might be troubled by the fact that the real service doesn't quite behave this way.
+The real service sends requests to a remote server.
+A server takes time to respond and the response certainly won't be available immediately
+as in the previous two tests.
+
+Your tests will reflect the real world more faithfully if you return an _asynchronous_ observable
+from the `getQuote()` spy like this.
+
+<code-example
+  path="testing/src/app/twain/twain.component.spec.ts"
+  region="async-setup">
+</code-example>
+
+#### Async observable helpers
+
+The async observable was produced by an `asyncData` helper
+The `asyncData` helper is a utility function that you'll have to write yourself.
+Or you can copy this one from the sample code.
+
+<code-example
+  path="testing/src/testing/async-observable-helpers.ts"
+  region="async-data"
+  title="testing/async-observable-helpers.ts">
+</code-example>
+
+This helper's observable emits the `data` value in the next turn of the JavaScript engine.
+
+The [RxJS `defer()` operator](http://reactivex.io/documentation/operators/defer.html) returns an observable.
+It takes a factory function that returns either a promise or an observable.
+When something subscribes to _defer_'s observable,
+it adds the subscriber to a new observable created with that factory.
+
+The `defer()` operator transforms the `Promise.resolve()` into a new observable that,
+like `HttpClient`, emits once and completes.
+Subscribers are unsubscribed after they receive the data value.
+
+There's a similar helper for producing an async error.
+
+<code-example
+  path="testing/src/testing/async-observable-helpers.ts"
+  region="async-error">
+</code-example>
+
+#### More async tests
+
+Now that the `getQuote()` spy is returning async observables,
+most of your tests will have to be async as well.
+
+Here's a `fakeAsync()` test that demonstrates the data flow you'd expect
+in the real world.
+
+<code-example
+  path="testing/src/app/twain/twain.component.spec.ts"
+  region="fake-async-test">
+</code-example>
+
+Notice that the quote element displays the placeholder value (`'...'`) after `ngOnInit()`.
+The first quote hasn't arrived yet.
+
+To flush the first quote from the observable, you call `tick()`.
+Then call `detectChanges()` to tell Angular to update the screen.
+
+Then you can assert that the quote element displays the expected text.
+
+{@a async}
+
+#### Async test with _async()_
+
+The `fakeAsync()` utility function has a few limitations.
+In particular, it won't work if the test body makes an `XHR` call.
+
+`XHR` calls within a test are rare so you can generally stick with `fakeAsync()`.
+But if you ever do need to call `XHR`, you'll want to know about `async()`.
+
+<div class="alert is-helpful">
+
+The `TestBed.compileComponents()` method (see [below](#compile-components)) calls `XHR`
+to read external template and css files during "just-in-time" compilation.
+Write tests that call `compileComponents()` with the `async()` utility.
+
+</div>
+
+Here's the previous `fakeAsync()` test, re-written with the `async()` utility.
+
+<code-example
+  path="testing/src/app/twain/twain.component.spec.ts"
+  region="async-test">
+</code-example>
+
+The `async()` utility hides some asynchronous boilerplate by arranging for the tester's code
+to run in a special _async test zone_.
+You don't have to pass Jasmine's `done()` into the test and call `done()`
+in promise or observable callbacks.
+
+But the test's asynchronous nature is revealed by the call to `fixture.whenStable()`,
+which breaks the linear flow of control.
+
+{@a when-stable}
+
+#### _whenStable_
+
+The test must wait for the `getQuote()` observable to emit the next quote.
+Instead of calling `tick()`, it calls `fixture.whenStable()`.
+
+The `fixture.whenStable()` returns a promise that resolves when the JavaScript engine's
+task queue becomes empty.
+In this example, the task queue becomes empty when the observable emits the first quote.
+
+The test resumes within the promise callback, which calls `detectChanges()` to
+update the quote element with the expected text.
+
+{@a jasmine-done}
+
+#### Jasmine _done()_
+
+While the `async` and `fakeAsync` functions greatly
+simplify Angular asynchronous testing,
+you can still fall back to the traditional technique
+and pass `it` a function that takes a
+[`done` callback](http://jasmine.github.io/2.0/introduction.html#section-Asynchronous_Support).
+
+Now you are responsible for chaining promises, handling errors, and calling `done()` at the appropriate moments.
+
+Writing test functions with `done()`, is more cumbersome than `async`and `fakeAsync`.
+But it is occasionally necessary.
+For example, you can't call `async` or `fakeAsync` when testing
+code that involves the `intervalTimer()` or the RxJS `delay()` operator.
+
+Here are two more versions of the previous test, written with `done()`.
+The first one subscribes to the `Observable` exposed to the template by the component's `quote` property.
+
+<code-example
+  path="testing/src/app/twain/twain.component.spec.ts"
+  region="quote-done-test" linenums="false">
+</code-example>
+
+The RxJS `last()` operator emits the observable's last value before completing, which will be the test quote.
+The `subscribe` callback calls `detectChanges()` to
+update the quote element with the test quote, in the same manner as the earlier tests.
+
+In some tests, you're more interested in how an injected service method was called and what values it returned,
+than what appears on screen.
+
+A service spy, such as the `qetQuote()` spy of the fake `TwainService`,
+can give you that information and make assertions about the state of the view.
+
+<code-example
+  path="testing/src/app/twain/twain.component.spec.ts"
+  region="spy-done-test" linenums="false">
+</code-example>
+
+<hr>
+
+{@a marble-testing}
+### Component marble tests
+
+The previous `TwainComponent` tests simulated an asynchronous observable response
+from the `TwainService` with the `asyncData` and `asyncError` utilities.
+
+These are short, simple functions that you can write yourself.
+Unfortunately, they're too simple for many common scenarios.
+An observable often emits multiple times, perhaps after a significant delay.
+A component may coordinate multiple observables
+with overlapping sequences of values and errors.
+
+**RxJS marble testing** is a great way to test observable scenarios,
+both simple and complex.
+You've likely seen the [marble diagrams](http://rxmarbles.com/)
+that illustrate how observables work.
+Marble testing uses a similar marble language to
+specify the observable streams and expectations in your tests.
+
+The following examples revisit two of the `TwainComponent` tests
+with marble testing.
+
+Start by installing the `jasmine-marbles` npm package.
+Then import the symbols you need.
+
+<code-example
+  path="testing/src/app/twain/twain.component.marbles.spec.ts"
+  region="import-marbles"
+  title="app/twain/twain.component.marbles.spec.ts (import marbles)" linenums="false">
+</code-example>
+
+Here's the complete test for getting a quote:
+
+<code-example
+  path="testing/src/app/twain/twain.component.marbles.spec.ts"
+  region="get-quote-test" linenums="false">
+</code-example>
+
+Notice that the Jasmine test is synchronous. There's no `fakeAsync()`.
+Marble testing uses a test scheduler to simulate the passage of time
+in a synchronous test.
+
+The beauty of marble testing is in the visual definition of the observable streams.
+This test defines a [_cold_ observable](#cold-observable) that waits
+three [frames](#marble-frame) (`---`),
+emits a value (`x`), and completes (`|`).
+In the second argument you map the value marker (`x`) to the emitted value (`testQuote`).
+
+<code-example
+  path="testing/src/app/twain/twain.component.marbles.spec.ts"
+  region="test-quote-marbles" linenums="false">
+</code-example>
+
+The marble library constructs the corresponding observable, which the
+test sets as the `getQuote` spy's return value.
+
+When you're ready to activate the marble observables,
+you tell the `TestScheduler` to _flush_ its queue of prepared tasks like this.
+
+<code-example
+  path="testing/src/app/twain/twain.component.marbles.spec.ts"
+  region="test-scheduler-flush" linenums="false">
+</code-example>
+
+This step serves a purpose analogous to `tick()` and `whenStable()` in the
+earlier `fakeAsync()` and `async()` examples.
+The balance of the test is the same as those examples.
+
+#### Marble error testing
+
+Here's the marble testing version of the `getQuote()` error test.
+
+<code-example
+  path="testing/src/app/twain/twain.component.marbles.spec.ts"
+  region="error-test" linenums="false">
+</code-example>
+
+It's still an async test, calling `fakeAsync()` and `tick()`, because the component itself
+calls `setTimeout()` when processing errors.
+
+Look at the marble observable definition.
+
+<code-example
+  path="testing/src/app/twain/twain.component.marbles.spec.ts"
+  region="error-marbles" linenums="false">
+</code-example>
+
+This is a _cold_ observable that waits three frames and then emits an error,
+The hash (`#`) indicates the timing of the error that is specified in the third argument.
+The second argument is null because the observable never emits a value.
+
+#### Learn about marble testing
+
+{@a marble-frame}
+A _marble frame_ is a virtual unit of testing time.
+Each symbol (`-`, `x`, `|`, `#`) marks the passing of one frame.
+
+{@a cold-observable}
+A _cold_ observable doesn't produce values until you subscribe to it.
+Most of your application observables are cold.
+All [_HttpClient_](guide/http) methods return cold observables.
+
+A _hot_ observable is already producing values _before_ you subscribe to it.
+The [_Router.events_](api/router/Router#events) observable,
+which reports router activity, is a _hot_ observable.
+
+RxJS marble testing is a rich subject, beyond the scope of this guide.
+Learn about it on the web, starting with the
+[official documentation](https://github.com/ReactiveX/rxjs/blob/master/doc/writing-marble-tests.md).
+
+<hr>
+
+{@a component-with-input-output}
+
+### Component with inputs and outputs
+
+A component with inputs and outputs typically appears inside the view template of a host component.
+The host uses a property binding to set the input property and an event binding to
+listen to events raised by the output property.
+
+The testing goal is to verify that such bindings work as expected.
+The tests should set input values and listen for output events.
+
+The `DashboardHeroComponent` is a tiny example of a component in this role.
+It displays an individual hero provided by the `DashboardComponent`.
+Clicking that hero tells the `DashboardComponent` that the user has selected the hero.
+
+The `DashboardHeroComponent` is embedded in the `DashboardComponent` template like this:
+
+<code-example
+  path="testing/src/app/dashboard/dashboard.component.html"
+  region="dashboard-hero"
+  title="app/dashboard/dashboard.component.html (excerpt)" linenums="false">
+</code-example>
+
+The `DashboardHeroComponent` appears in an `*ngFor` repeater, which sets each component's `hero` input property
+to the looping value and listens for the component's `selected` event.
+
+Here's the component's full definition:
+
+{@a dashboard-hero-component}
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.ts"
+  region="component"
+  title="app/dashboard/dashboard-hero.component.ts (component)" linenums="false">
+</code-example>
+
+While testing a component this simple has little intrinsic value, it's worth knowing how.
+You can use one of these approaches:
+
+- Test it as used by `DashboardComponent`.
+- Test it as a stand-alone component.
+- Test it as used by a substitute for `DashboardComponent`.
+
+A quick look at the `DashboardComponent` constructor discourages the first approach:
+
+<code-example
+  path="testing/src/app/dashboard/dashboard.component.ts"
+  region="ctor"
+  title="app/dashboard/dashboard.component.ts (constructor)" linenums="false">
+</code-example>
+
+The `DashboardComponent` depends on the Angular router and the `HeroService`.
+You'd probably have to replace them both with test doubles, which is a lot of work.
+The router seems particularly challenging.
+
+<div class="alert is-helpful">
+
+The [discussion below](#routing-component) covers testing components that require the router.
+
+</div>
+
+The immediate goal is to test the `DashboardHeroComponent`, not the `DashboardComponent`,
+so, try the second and third options.
+
+{@a dashboard-standalone}
+
+#### Test _DashboardHeroComponent_ stand-alone
+
+Here's the meat of the spec file setup.
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.spec.ts"
+  region="setup"
+  title="app/dashboard/dashboard-hero.component.spec.ts (setup)" linenums="false">
+</code-example>
+
+Note how the setup code assigns a test hero (`expectedHero`) to the component's `hero` property,
+emulating the way the `DashboardComponent` would set it
+via the property binding in its repeater.
+
+The following test verifies that the hero name is propagated to the template via a binding.
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.spec.ts"
+  region="name-test">
+</code-example>
+
+Because the [template](#dashboard-hero-component) passes the hero name through the Angular `UpperCasePipe`,
+the test must match the element value with the upper-cased name.
+
+<div class="alert is-helpful">
+
+This small test demonstrates how Angular tests can verify a component's visual
+representation&mdash;something not possible with
+[component class tests](#component-class-testing)&mdash;at
+low cost and without resorting to much slower and more complicated end-to-end tests.
+
+</div>
+
+#### Clicking
+
+Clicking the hero should raise a `selected` event that
+the host component (`DashboardComponent` presumably) can hear:
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.spec.ts"
+  region="click-test">
+</code-example>
+
+The component's `selected` property returns an `EventEmitter`,
+which looks like an RxJS synchronous `Observable` to consumers.
+The test subscribes to it _explicitly_ just as the host component does _implicitly_.
+
+If the component behaves as expected, clicking the hero's element
+should tell the component's `selected` property to emit the `hero` object.
+
+The test detects that event through its subscription to `selected`.
+
+{@a trigger-event-handler}
+
+#### _triggerEventHandler_
+
+The `heroDe` in the previous test is a `DebugElement` that represents the hero `<div>`.
+
+It has Angular properties and methods that abstract interaction with the native element.
+This test calls the `DebugElement.triggerEventHandler` with the "click" event name.
+The "click" event binding responds by calling `DashboardHeroComponent.click()`.
+
+The Angular `DebugElement.triggerEventHandler` can raise _any data-bound event_ by its _event name_.
+The second parameter is the event object passed to the handler.
+
+The test triggered a "click" event with a `null` event object.
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.spec.ts" region="trigger-event-handler">
+</code-example>
+
+The test assumes (correctly in this case) that the runtime
+event handler&mdash;the component's `click()` method&mdash;doesn't
+care about the event object.
+
+<div class="alert is-helpful">
+
+Other handlers are less forgiving. For example, the `RouterLink`
+directive expects an object with a `button` property
+that identifies which mouse button (if any) was pressed during the click.
+The `RouterLink` directive throws an error if the event object is missing.
+
+</div>
+
+#### Click the element
+
+The following test alternative calls the native element's own `click()` method,
+which is perfectly fine for _this component_.
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.spec.ts"
+  region="click-test-2">
+</code-example>
+
+{@a click-helper}
+
+#### _click()_ helper
+
+Clicking a button, an anchor, or an arbitrary HTML element is a common test task.
+
+Make that consistent and easy by encapsulating the _click-triggering_ process
+in a helper such as the `click()` function below:
+
+<code-example
+  path="testing/src/testing/index.ts"
+  region="click-event"
+  title="testing/index.ts (click helper)" linenums="false">
+</code-example>
+
+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">left-button mouse event object</a>
+accepted by many handlers including the `RouterLink` directive.
+
+<div class="alert is-important">
+
+The `click()` helper function is **not** one of the Angular testing utilities.
+It's a function defined in _this guide's sample code_.
+All of the sample tests use it.
+If you like it, add it to your own collection of helpers.
+
+</div>
+
+Here's the previous test, rewritten using the click helper.
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.spec.ts"
+  region="click-test-3"
+  title="app/dashboard/dashboard-hero.component.spec.ts (test with click helper)">
+</code-example>
+
+<hr>
+
+{@a component-inside-test-host}
+
+### Component inside a test host
+
+The previous tests played the role of the host `DashboardComponent` themselves.
+But does the `DashboardHeroComponent` work correctly when properly data-bound to a host component?
+
+You could test with the actual `DashboardComponent`.
+But doing so could require a lot of setup,
+especially when its template features an `*ngFor` repeater,
+other components, layout HTML, additional bindings,
+a constructor that injects multiple services,
+and it starts interacting with those services right away.
+
+Imagine the effort to disable these distractions, just to prove a point
+that can be made satisfactorily with a _test host_ like this one:
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.spec.ts"
+  region="test-host"
+  title="app/dashboard/dashboard-hero.component.spec.ts (test host)"
+  linenums="false">
+</code-example>
+
+This test host binds to `DashboardHeroComponent` as the `DashboardComponent` would
+but without the noise of the `Router`, the `HeroService`, or the `*ngFor` repeater.
+
+The test host sets the component's `hero` input property with its test hero.
+It binds the component's `selected` event with its `onSelected` handler,
+which records the emitted hero in its `selectedHero` property.
+
+Later, the tests will be able to easily check `selectedHero` to verify that the
+`DashboardHeroComponent.selected` event emitted the expected hero.
+
+The setup for the _test-host_ tests is similar to the setup for the stand-alone tests:
+
+<code-example path="testing/src/app/dashboard/dashboard-hero.component.spec.ts" region="test-host-setup" title="app/dashboard/dashboard-hero.component.spec.ts (test host setup)" linenums="false"></code-example>
+
+This testing module configuration shows three important differences:
+
+1. It _declares_ both the `DashboardHeroComponent` and the `TestHostComponent`.
+1. It _creates_ the `TestHostComponent` instead of the `DashboardHeroComponent`.
+1. The `TestHostComponent` sets the `DashboardHeroComponent.hero` with a binding.
+
+The `createComponent` returns a `fixture` that holds an instance of `TestHostComponent` instead of an instance of `DashboardHeroComponent`.
+
+Creating the `TestHostComponent` has the side-effect of creating a `DashboardHeroComponent`
+because the latter appears within the template of the former.
+The query for the hero element (`heroEl`) still finds it in the test DOM,
+albeit at greater depth in the element tree than before.
+
+The tests themselves are almost identical to the stand-alone version:
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.spec.ts"
+  region="test-host-tests"
+  title="app/dashboard/dashboard-hero.component.spec.ts (test-host)" linenums="false">
+</code-example>
+
+Only the selected event test differs. It confirms that the selected `DashboardHeroComponent` hero
+really does find its way up through the event binding to the host component.
+
+<hr>
+
+{@a routing-component}
+
+### Routing component
+
+A _routing component_ is a component that tells the `Router` to navigate to another component.
+The `DashboardComponent` is a _routing component_ because the user can
+navigate to the `HeroDetailComponent` by clicking on one of the _hero buttons_ on the dashboard.
+
+Routing is pretty complicated.
+Testing the `DashboardComponent` seemed daunting in part because it involves the `Router`,
+which it injects together with the `HeroService`.
+
+<code-example
+  path="testing/src/app/dashboard/dashboard.component.ts"
+  region="ctor"
+  title="app/dashboard/dashboard.component.ts (constructor)" linenums="false">
+</code-example>
+
+Mocking the `HeroService` with a spy is a [familiar story](#component-with-async-service).
+But the `Router` has a complicated API and is entwined with other services and application preconditions. Might it be difficult to mock?
+
+Fortunately, not in this case because the `DashboardComponent` isn't doing much with the `Router`
+
+<code-example
+  path="testing/src/app/dashboard/dashboard.component.ts"
+  region="goto-detail"
+  title="app/dashboard/dashboard.component.ts (goToDetail)">
+</code-example>
+
+This is often the case with _routing components_.
+As a rule you test the component, not the router,
+and care only if the component navigates with the right address under the given conditions.
+
+Providing a router spy for _this component_ test suite happens to be as easy
+as providing a `HeroService` spy.
+
+<code-example
+  path="testing/src/app/dashboard/dashboard.component.spec.ts"
+  region="router-spy"
+  title="app/dashboard/dashboard.component.spec.ts (spies)" linenums="false">
+</code-example>
+
+The following test clicks the displayed hero and confirms that
+`Router.navigateByUrl` is called with the expected url.
+
+<code-example
+  path="testing/src/app/dashboard/dashboard.component.spec.ts"
+  region="navigate-test"
+  title="app/dashboard/dashboard.component.spec.ts (navigate test)" linenums="false">
+</code-example>
+
+{@a routed-component-w-param}
+
+### Routed components
+
+A _routed component_ is the destination of a `Router` navigation.
+It can be trickier to test, especially when the route to the component _includes parameters_.
+The `HeroDetailComponent` is a _routed component_ that is the destination of such a route.
+
+When a user clicks a _Dashboard_ hero, the `DashboardComponent` tells the `Router`
+to navigate to `heroes/:id`.
+The `:id` is a route parameter whose value is the `id` of the hero to edit.
+
+The `Router` matches that URL to a route to the `HeroDetailComponent`.
+It creates an `ActivatedRoute` object with the routing information and
+injects it into a new instance of the `HeroDetailComponent`.
+
+Here's the `HeroDetailComponent` constructor:
+
+<code-example path="testing/src/app/hero/hero-detail.component.ts" region="ctor" title="app/hero/hero-detail.component.ts (constructor)" linenums="false"></code-example>
+
+The `HeroDetail` component needs the `id` parameter so it can fetch
+the corresponding hero via the `HeroDetailService`.
+The component has to get the `id` from the `ActivatedRoute.paramMap` property
+which is an `Observable`.
+
+It can't just reference the `id` property of the `ActivatedRoute.paramMap`.
+The component has to _subscribe_ to the `ActivatedRoute.paramMap` observable and be prepared
+for the `id` to change during its lifetime.
+
+<code-example path="testing/src/app/hero/hero-detail.component.ts" region="ng-on-init" title="app/hero/hero-detail.component.ts (ngOnInit)" linenums="false"></code-example>
+
+<div class="alert is-helpful">
+
+The [Router](guide/router#route-parameters) guide covers `ActivatedRoute.paramMap` in more detail.
+
+</div>
+
+Tests can explore how the `HeroDetailComponent` responds to different `id` parameter values
+by manipulating the `ActivatedRoute` injected into the component's constructor.
+
+You know how to spy on the `Router` and a data service.
+
+You'll take a different approach with `ActivatedRoute` because
+
+- `paramMap` returns an `Observable` that can emit more than one value
+  during a test.
+- You need the router helper function, `convertToParamMap()`, to create a `ParamMap`.
+- Other _routed components_ tests need a test double for `ActivatedRoute`.
+
+These differences argue for a re-usable stub class.
+
+#### _ActivatedRouteStub_
+
+The following `ActivatedRouteStub` class serves as a test double for `ActivatedRoute`.
+
+<code-example
+  path="testing/src/testing/activated-route-stub.ts"
+  region="activated-route-stub"
+  title="testing/activated-route-stub.ts (ActivatedRouteStub)" linenums="false">
+</code-example>
+
+Consider placing such helpers in a `testing` folder sibling to the `app` folder.
+This sample puts `ActivatedRouteStub` in `testing/activated-route-stub.ts`.
+
+<div class="alert is-helpful">
+
+Consider writing a more capable version of this stub class with
+the [_marble testing library_](#marble-testing).
+
+</div>
+
+{@a tests-w-test-double}
+
+#### Testing with _ActivatedRouteStub_
+
+Here's a test demonstrating the component's behavior when the observed `id` refers to an existing hero:
+
+<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="route-good-id" title="app/hero/hero-detail.component.spec.ts (existing id)" linenums="false"></code-example>
+
+<div class="alert is-helpful">
+
+The `createComponent()` method and `page` object are discussed [below](#page-object).
+Rely on your intuition for now.
+
+</div>
+
+When the `id` cannot be found, the component should re-route to the `HeroListComponent`.
+
+The test suite setup provided the same router spy [described above](#routing-component) which spies on the router without actually navigating.
+
+This test expects the component to try to navigate to the `HeroListComponent`.
+
+<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="route-bad-id" title="app/hero/hero-detail.component.spec.ts (bad id)" linenums="false"></code-example>
+
+While this app doesn't have a route to the `HeroDetailComponent` that omits the `id` parameter, it might add such a route someday.
+The component should do something reasonable when there is no `id`.
+
+In this implementation, the component should create and display a new hero.
+New heroes have `id=0` and a blank `name`. This test confirms that the component behaves as expected:
+
+<code-example
+  path="testing/src/app/hero/hero-detail.component.spec.ts"
+  region="route-no-id"
+  title="app/hero/hero-detail.component.spec.ts (no id)" linenums="false">
+</code-example>
+
+<hr>
+
+### Nested component tests
+
+Component templates often have nested components, whose templates
+may contain more components.
+
+The component tree can be very deep and, most of the time, the nested components
+play no role in testing the component at the top of the tree.
+
+The `AppComponent`, for example, displays a navigation bar with anchors and their `RouterLink` directives.
+
+<code-example
+  path="testing/src/app/app.component.html"
+  title="app/app.component.html" linenums="false">
+</code-example>
+
+While the `AppComponent` _class_ is empty,
+you may want to write unit tests to confirm that the links are wired properly
+to the `RouterLink` directives, perhaps for the reasons [explained below](#why-stubbed-routerlink-tests).
+
+To validate the links, you don't need the `Router` to navigate and you don't
+need the `<router-outlet>` to mark where the `Router` inserts _routed components_.
+
+The `BannerComponent` and `WelcomeComponent`
+(indicated by `<app-banner>` and `<app-welcome>`) are also irrelevant.
+
+Yet any test that creates the `AppComponent` in the DOM will also create instances of
+these three components and, if you let that happen,
+you'll have to configure the `TestBed` to create them.
+
+If you neglect to declare them, the Angular compiler won't recognize the
+`<app-banner>`, `<app-welcome>`, and `<router-outlet>` tags in the `AppComponent` template
+and will throw an error.
+
+If you declare the real components, you'll also have to declare _their_ nested components
+and provide for _all_ services injected in _any_ component in the tree.
+
+That's too much effort just to answer a few simple questions about links.
+
+This section describes two techniques for minimizing the setup.
+Use them, alone or in combination, to stay focused on the testing the primary component.
+
+{@a stub-component}
+
+##### Stubbing unneeded components
+
+In the first technique, you create and declare stub versions of the components
+and directive that play little or no role in the tests.
+
+<code-example
+  path="testing/src/app/app.component.spec.ts"
+  region="component-stubs"
+  title="app/app.component.spec.ts (stub declaration)" linenums="false">
+</code-example>
+
+The stub selectors match the selectors for the corresponding real components.
+But their templates and classes are empty.
+
+Then declare them in the `TestBed` configuration next to the
+components, directives, and pipes that need to be real.
+
+<code-example
+  path="testing/src/app/app.component.spec.ts"
+  region="testbed-stubs"
+  title="app/app.component.spec.ts (TestBed stubs)" linenums="false">
+</code-example>
+
+The `AppComponent` is the test subject, so of course you declare the real version.
+
+The `RouterLinkDirectiveStub`, [described later](#routerlink), is a test version
+of the real `RouterLink` that helps with the link tests.
+
+The rest are stubs.
+
+{@a no-errors-schema}
+
+#### _NO_ERRORS_SCHEMA_
+
+In the second approach, add `NO_ERRORS_SCHEMA` to the `TestBed.schemas` metadata.
+
+<code-example
+  path="testing/src/app/app.component.spec.ts"
+  region="no-errors-schema"
+  title="app/app.component.spec.ts (NO_ERRORS_SCHEMA)" linenums="false">
+</code-example>
+
+The `NO_ERRORS_SCHEMA` tells the Angular compiler to ignore unrecognized elements and attributes.
+
+The compiler will recognize the `<app-root>` element and the `routerLink` attribute
+because you declared a corresponding `AppComponent` and `RouterLinkDirectiveStub`
+in the `TestBed` configuration.
+
+But the compiler won't throw an error when it encounters `<app-banner>`, `<app-welcome>`, or `<router-outlet>`.
+It simply renders them as empty tags and the browser ignores them.
+
+You no longer need the stub components.
+
+#### Use both techniques together
+
+These are techniques for _Shallow Component Testing_ ,
+so-named because they reduce the visual surface of the component to just those elements
+in the component's template that matter for tests.
+
+The `NO_ERRORS_SCHEMA` approach is the easier of the two but don't overuse it.
+
+The `NO_ERRORS_SCHEMA` also prevents the compiler from telling you about the missing
+components and attributes that you omitted inadvertently or misspelled.
+You could waste hours chasing phantom bugs that the compiler would have caught in an instant.
+
+The _stub component_ approach has another advantage.
+While the stubs in _this_ example were empty,
+you could give them stripped-down templates and classes if your tests
+need to interact with them in some way.
+
+In practice you will combine the two techniques in the same setup,
+as seen in this example.
+
+<code-example
+  path="testing/src/app/app.component.spec.ts"
+  region="mixed-setup"
+  title="app/app.component.spec.ts (mixed setup)" linenums="false">
+</code-example>
+
+The Angular compiler creates the `BannerComponentStub` for the `<app-banner>` element
+and applies the `RouterLinkStubDirective` to the anchors with the `routerLink` attribute,
+but it ignores the `<app-welcome>` and `<router-outlet>` tags.
+
+<hr>
+
+{@a routerlink}
+### Components with _RouterLink_
+
+The real `RouterLinkDirective` is quite complicated and entangled with other components
+and directives of the `RouterModule`.
+It requires challenging setup to mock and use in tests.
+
+The `RouterLinkDirectiveStub` in this sample code replaces the real directive
+with an alternative version designed to validate the kind of anchor tag wiring
+seen in the `AppComponent` template.
+
+<code-example
+  path="testing/src/testing/router-link-directive-stub.ts"
+  region="router-link"
+  title="testing/router-link-directive-stub.ts (RouterLinkDirectiveStub)" linenums="false">
+</code-example>
+
+The URL bound to the `[routerLink]` attribute flows in to the directive's `linkParams` property.
+
+The `host` metadata property wires the click event of the host element
+(the `<a>` anchor elements in `AppComponent`) to the stub directive's `onClick` method.
+
+Clicking the anchor should trigger the `onClick()` method,
+which sets the stub's telltale `navigatedTo` property.
+Tests inspect `navigatedTo` to confirm that clicking the anchor
+set the expected route definition.
+
+<div class="alert is-helpful">
+
+Whether the router is configured properly to navigate with that route definition is a
+question for a separate set of tests.
+
+</div>
+
+{@a by-directive}
+{@a inject-directive}
+
+#### _By.directive_ and injected directives
+
+A little more setup triggers the initial data binding and gets references to the navigation links:
+
+<code-example
+  path="testing/src/app/app.component.spec.ts"
+  region="test-setup"
+  title="app/app.component.spec.ts (test setup)" linenums="false">
+</code-example>
+
+Three points of special interest:
+
+1.  You can locate the anchor elements with an attached directive using `By.directive`.
+
+1.  The query returns `DebugElement` wrappers around the matching elements.
+
+1.  Each `DebugElement` exposes a dependency injector with the
+    specific instance of the directive attached to that element.
+
+The `AppComponent` links to validate are as follows:
+
+<code-example
+  path="testing/src/app/app.component.html"
+  region="links"
+  title="app/app.component.html (navigation links)" linenums="false">
+</code-example>
+
+{@a app-component-tests}
+
+Here are some tests that confirm those links are wired to the `routerLink` directives
+as expected:
+
+<code-example path="testing/src/app/app.component.spec.ts" region="tests" title="app/app.component.spec.ts (selected tests)" linenums="false"></code-example>
+
+<div class="alert is-helpful">
+
+The "click" test _in this example_ is misleading.
+It tests the `RouterLinkDirectiveStub` rather than the _component_.
+This is a common failing of directive stubs.
+
+It has a legitimate purpose in this guide.
+It demonstrates how to find a `RouterLink` element, click it, and inspect a result,
+without engaging the full router machinery.
+This is a skill you may need to test a more sophisticated component, one that changes the display,
+re-calculates parameters, or re-arranges navigation options when the user clicks the link.
+
+</div>
+
+{@a why-stubbed-routerlink-tests}
+
+#### What good are these tests?
+
+Stubbed `RouterLink` tests can confirm that a component with links and an outlet is setup properly,
+that the component has the links it should have, and that they are all pointing in the expected direction.
+These tests do not concern whether the app will succeed in navigating to the target component when the user clicks a link.
+
+Stubbing the RouterLink and RouterOutlet is the best option for such limited testing goals.
+Relying on the real router would make them brittle.
+They could fail for reasons unrelated to the component.
+For example, a navigation guard could prevent an unauthorized user from visiting the `HeroListComponent`.
+That's not the fault of the `AppComponent` and no change to that component could cure the failed test.
+
+A _different_ battery of tests can explore whether the application navigates as expected
+in the presence of conditions that influence guards such as whether the user is authenticated and authorized.
+
+<div class="alert is-helpful">
+
+A future guide update will explain how to write such
+tests with the `RouterTestingModule`.
+
+</div>
+
+<hr>
+
+{@a page-object}
+
+### Use a _page_ object
+
+The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons.
+
+<figure>
+  <img src='generated/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action">
+</figure>
+
+But there's plenty of template complexity even in this simple form.
+
+<code-example
+  path="testing/src/app/hero/hero-detail.component.html" title="app/hero/hero-detail.component.html" linenums="false">
+</code-example>
+
+Tests that exercise the component need ...
+
+- to wait until a hero arrives before elements appear in the DOM.
+- a reference to the title text.
+- a reference to the name input box to inspect and set it.
+- references to the two buttons so they can click them.
+- spies for some of the component and router methods.
+
+Even a small form such as this one can produce a mess of tortured conditional setup and CSS element selection.
+
+Tame the complexity with a `Page` class that handles access to component properties
+and encapsulates the logic that sets them.
+
+Here is such a `Page` class for the `hero-detail.component.spec.ts`
+
+<code-example
+  path="testing/src/app/hero/hero-detail.component.spec.ts"
+  region="page"
+  title="app/hero/hero-detail.component.spec.ts (Page)" linenums="false">
+</code-example>
+
+Now the important hooks for component manipulation and inspection are neatly organized and accessible from an instance of `Page`.
+
+A `createComponent` method creates a `page` object and fills in the blanks once the `hero` arrives.
+
+<code-example
+  path="testing/src/app/hero/hero-detail.component.spec.ts"
+  region="create-component"
+  title="app/hero/hero-detail.component.spec.ts (createComponent)" linenums="false">
+</code-example>
+
+The [_HeroDetailComponent_ tests](#tests-w-test-double) in an earlier section demonstrate how `createComponent` and `page`
+keep the tests short and _on message_.
+There are no distractions: no waiting for promises to resolve and no searching the DOM for element values to compare.
+
+Here are a few more `HeroDetailComponent` tests to reinforce the point.
+
+<code-example
+  path="testing/src/app/hero/hero-detail.component.spec.ts"
+  region="selected-tests"
+  title="app/hero/hero-detail.component.spec.ts (selected tests)" linenums="false">
+</code-example>
+
+<hr>
+
+{@a compile-components}
+### Calling _compileComponents()_
+
+<div class="alert is-helpful">
+
+You can ignore this section if you _only_ run tests with the CLI `ng test` command
+because the CLI compiles the application before running the tests.
+
+</div>
+
+If you run tests in a **non-CLI environment**, the tests may fail with a message like this one:
+
+<code-example language="sh" class="code-shell" hideCopy>
+Error: This test module uses the component BannerComponent
+which is using a "templateUrl" or "styleUrls", but they were never compiled.
+Please call "TestBed.compileComponents" before your test.
+</code-example>
+
+The root of the problem is at least one of the components involved in the test
+specifies an external template or CSS file as
+the following version of the `BannerComponent` does.
+
+<code-example
+  path="testing/src/app/banner/banner-external.component.ts"
+  title="app/banner/banner-external.component.ts (external template & css)" linenums="false">
+</code-example>
+
+The test fails when the `TestBed` tries to create the component.
+
+<code-example
+  path="testing/src/app/banner/banner.component.spec.ts"
+  region="configure-and-create"
+  title="app/banner/banner.component.spec.ts (setup that fails)"
+  avoid linenums="false">
+</code-example>
+
+Recall that the app hasn't been compiled.
+So when you call `createComponent()`, the `TestBed` compiles implicitly.
+
+That's not a problem when the source code is in memory.
+But the `BannerComponent` requires external files
+that the compile must read from the file system,
+an inherently _asynchronous_ operation.
+
+If the `TestBed` were allowed to continue, the tests would run and fail mysteriously
+before the compiler could finished.
+
+The preemptive error message tells you to compile explicitly with `compileComponents()`.
+
+#### _compileComponents()_ is async
+
+You must call `compileComponents()` within an asynchronous test function.
+
+<div class="alert is-critical">
+
+If you neglect to make the test function async
+(e.g., forget to use `async()` as described below),
+you'll see this error message
+
+<code-example language="sh" class="code-shell" hideCopy>
+Error: ViewDestroyedError: Attempt to use a destroyed view
+</code-example>
+
+</div>
+
+A typical approach is to divide the setup logic into two separate `beforeEach()` functions:
+
+1.  An async `beforeEach()` that compiles the components
+1.  A synchronous `beforeEach()` that performs the remaining setup.
+
+To follow this pattern, import the `async()` helper with the other testing symbols.
+
+<code-example
+  path="testing/src/app/banner/banner-external.component.spec.ts"
+  region="import-async">
+</code-example>
+
+#### The async _beforeEach_
+
+Write the first async `beforeEach` like this.
+
+<code-example
+  path="testing/src/app/banner/banner-external.component.spec.ts"
+  region="async-before-each"
+  title="app/banner/banner-external.component.spec.ts (async beforeEach)" linenums="false">
+</code-example>
+
+The `async()` helper function takes a parameterless function with the body of the setup.
+
+The `TestBed.configureTestingModule()` method returns the `TestBed` class so you can chain
+calls to other `TestBed` static methods such as `compileComponents()`.
+
+In this example, the `BannerComponent` is the only component to compile.
+Other examples configure the testing module with multiple components
+and may import application modules that hold yet more components.
+Any of them could be require external files.
+
+The `TestBed.compileComponents` method asynchronously compiles all components configured in the testing module.
+
+<div class="alert is-important">
+
+Do not re-configure the `TestBed` after calling `compileComponents()`.
+
+</div>
+
+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.
+
+Make `compileComponents()` the last step
+before calling `TestBed.createComponent()`.
+
+#### The synchronous _beforeEach_
+
+The second, synchronous `beforeEach()` contains the remaining setup steps,
+which include creating the component and querying for elements to inspect.
+
+<code-example
+  path="testing/src/app/banner/banner-external.component.spec.ts"
+  region="sync-before-each"
+  title="app/banner/banner-external.component.spec.ts (synchronous beforeEach)" linenums="false">
+</code-example>
+
+You can count on the test runner to wait for the first asynchronous `beforeEach` to finish before calling the second.
+
+#### Consolidated setup
+
+You can consolidate the two `beforeEach()` functions into a single, async `beforeEach()`.
+
+The `compileComponents()` method returns a promise so you can perform the
+synchronous setup tasks _after_ compilation by moving the synchronous code
+into a `then(...)` callback.
+
+<code-example
+  path="testing/src/app/banner/banner-external.component.spec.ts"
+  region="one-before-each"
+  title="app/banner/banner-external.component.spec.ts (one beforeEach)" linenums="false">
+</code-example>
+
+#### _compileComponents()_ is harmless
+
+There's no harm in calling `compileComponents()` when it's not required.
+
+The component test file generated by the CLI calls `compileComponents()`
+even though it is never required when running `ng test`.
+
+The tests in this guide only call `compileComponents` when necessary.
+
+<hr>
+
+{@a import-module}
+
+### Setup with module imports
+
+Earlier component tests configured the testing module with a few `declarations` like this:
+
+<code-example
+  path="testing/src/app/dashboard/dashboard-hero.component.spec.ts"
+  region="config-testbed"
+  title="app/dashboard/dashboard-hero.component.spec.ts (configure TestBed)">
+</code-example>
+
+The `DashboardComponent` is simple. It needs no help.
+But more complex components often depend on other components, directives, pipes, and providers
+and these must be added to the testing module too.
+
+Fortunately, the `TestBed.configureTestingModule` parameter parallels
+the metadata passed to the `@NgModule` decorator
+which means you can also specify `providers` and `imports`.
+
+The `HeroDetailComponent` requires a lot of help despite its small size and simple construction.
+In addition to the support it receives from the default testing module `CommonModule`, it needs:
+
+- `NgModel` and friends in the `FormsModule` to enable two-way data binding.
+- The `TitleCasePipe` from the `shared` folder.
+- Router services (which these tests are stubbing).
+- Hero data access services (also stubbed).
+
+One approach is to configure the testing module from the individual pieces as in this example:
+
+<code-example
+  path="testing/src/app/hero/hero-detail.component.spec.ts"
+  region="setup-forms-module"
+  title="app/hero/hero-detail.component.spec.ts (FormsModule setup)" linenums="false">
+</code-example>
+
+<div class="alert is-helpful">
+
+Notice that the `beforeEach()` is asynchronous and calls `TestBed.compileComponents`
+because the `HeroDetailComponent` has an external template and css file.
+
+As explained in [_Calling compileComponents()_](#compile-components) above,
+these tests could be run in a non-CLI environment
+where Angular would have to compile them in the browser.
+
+</div>
+
+#### Import a shared module
+
+Because many app components need the `FormsModule` and the `TitleCasePipe`, the developer created
+a `SharedModule` to combine these and other frequently requested parts.
+
+The test configuration can use the `SharedModule` too as seen in this alternative setup:
+
+<code-example
+  path="testing/src/app/hero/hero-detail.component.spec.ts"
+  region="setup-shared-module"
+  title="app/hero/hero-detail.component.spec.ts (SharedModule setup)" linenums="false">
+</code-example>
+
+It's a bit tighter and smaller, with fewer import statements (not shown).
+
+{@a feature-module-import}
+
+#### Import a feature module
+
+The `HeroDetailComponent` is part of the `HeroModule` [Feature Module](guide/feature-modules) that aggregates more of the interdependent pieces
+including the `SharedModule`.
+Try a test configuration that imports the `HeroModule` like this one:
+
+<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="setup-hero-module" title="app/hero/hero-detail.component.spec.ts (HeroModule setup)" linenums="false"></code-example>
+
+That's _really_ crisp. Only the _test doubles_ in the `providers` remain. Even the `HeroDetailComponent` declaration is gone.
+
+In fact, if you try to declare it, Angular will throw an error because
+`HeroDetailComponent` is declared in both the `HeroModule` and the `DynamicTestModule`
+created by the `TestBed`.
+
+<div class="alert is-helpful">
+
+Importing the component's feature module can be the easiest way to configure tests
+when there are many mutual dependencies within the module and
+the module is small, as feature modules tend to be.
+
+</div>
+
+<hr>
+
+{@a component-override}
+
+### Override component providers
+
+The `HeroDetailComponent` provides its own `HeroDetailService`.
+
+<code-example path="testing/src/app/hero/hero-detail.component.ts" region="prototype" title="app/hero/hero-detail.component.ts (prototype)" linenums="false"></code-example>
+
+It's not possible to stub the component's `HeroDetailService` in the `providers` of the `TestBed.configureTestingModule`.
+Those are providers for the _testing module_, not the component. They prepare the dependency injector at the _fixture level_.
+
+Angular creates the component with its _own_ injector, which is a _child_ of the fixture injector.
+It registers the component's providers (the `HeroDetailService` in this case) with the child injector.
+
+A test cannot get to child injector services from the fixture injector.
+And `TestBed.configureTestingModule` can't configure them either.
+
+Angular has been creating new instances of the real `HeroDetailService` all along!
+
+<div class="alert is-helpful">
+
+These tests could fail or timeout if the `HeroDetailService` made its own XHR calls to a remote server.
+There might not be a remote server to call.
+
+Fortunately, the `HeroDetailService` delegates responsibility for remote data access to an injected `HeroService`.
+
+<code-example path="testing/src/app/hero/hero-detail.service.ts" region="prototype" title="app/hero/hero-detail.service.ts (prototype)" linenums="false"></code-example>
+
+The [previous test configuration](#feature-module-import) replaces the real `HeroService` with a `TestHeroService`
+that intercepts server requests and fakes their responses.
+
+</div>
+
+What if you aren't so lucky. What if faking the `HeroService` is hard?
+What if `HeroDetailService` makes its own server requests?
+
+The `TestBed.overrideComponent` method can replace the component's `providers` with easy-to-manage _test doubles_
+as seen in the following setup variation:
+
+<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="setup-override" title="app/hero/hero-detail.component.spec.ts (Override setup)" linenums="false"></code-example>
+
+Notice that `TestBed.configureTestingModule` no longer provides a (fake) `HeroService` because it's [not needed](#spy-stub).
+
+{@a override-component-method}
+
+#### The _overrideComponent_ method
+
+Focus on the `overrideComponent` method.
+
+<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="override-component-method" title="app/hero/hero-detail.component.spec.ts (overrideComponent)" linenums="false"></code-example>
+
+It takes two arguments: the component type to override (`HeroDetailComponent`) and an override metadata object.
+The [override metadata object](#metadata-override-object) is a generic defined as follows:
+
+<code-example format="." language="javascript">
+  type MetadataOverride<T> = {
+    add?: Partial<T>;
+    remove?: Partial<T>;
+    set?: Partial<T>;
+  };
+</code-example>
+
+A metadata override object can either add-and-remove elements in metadata properties or completely reset those properties.
+This example resets the component's `providers` metadata.
+
+The type parameter, `T`, is the kind of metadata you'd pass to the `@Component` decorator:
+
+<code-example format="." language="javascript">
+  selector?: string;
+  template?: string;
+  templateUrl?: string;
+  providers?: any[];
+  ...
+</code-example>
+
+{@a spy-stub}
+
+#### Provide a _spy stub_ (_HeroDetailServiceSpy_)
+
+This example completely replaces the component's `providers` array with a new array containing a `HeroDetailServiceSpy`.
+
+The `HeroDetailServiceSpy` is a stubbed version of the real `HeroDetailService`
+that fakes all necessary features of that service.
+It neither injects nor delegates to the lower level `HeroService`
+so there's no need to provide a test double for that.
+
+The related `HeroDetailComponent` tests will assert that methods of the `HeroDetailService`
+were called by spying on the service methods.
+Accordingly, the stub implements its methods as spies:
+
+<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="hds-spy" title="app/hero/hero-detail.component.spec.ts (HeroDetailServiceSpy)" linenums="false"></code-example>
+
+{@a override-tests}
+
+#### The override tests
+
+Now the tests can control the component's hero directly by manipulating the spy-stub's `testHero`
+and confirm that service methods were called.
+
+<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="override-tests" title="app/hero/hero-detail.component.spec.ts (override tests)" linenums="false"></code-example>
+
+{@a more-overrides}
+
+#### More overrides
+
+The `TestBed.overrideComponent` method can be called multiple times for the same or different components.
+The `TestBed` offers similar `overrideDirective`, `overrideModule`, and `overridePipe` methods
+for digging into and replacing parts of these other classes.
+
+Explore the options and combinations on your own.
+
+<hr>
+
+{@a attribute-directive}
+
+## Attribute Directive Testing
+
+An _attribute directive_ modifies the behavior of an element, component or another directive.
+Its name reflects the way the directive is applied: as an attribute on a host element.
+
+The sample application's `HighlightDirective` sets the background color of an element
+based on either a data bound color or a default color (lightgray).
+It also sets a custom property of the element (`customProperty`) to `true`
+for no reason other than to show that it can.
+
+<code-example path="testing/src/app/shared/highlight.directive.ts" title="app/shared/highlight.directive.ts" linenums="false"></code-example>
+
+It's used throughout the application, perhaps most simply in the `AboutComponent`:
+
+<code-example path="testing/src/app/about/about.component.ts" title="app/about/about.component.ts" linenums="false"></code-example>
+
+Testing the specific use of the `HighlightDirective` within the `AboutComponent` requires only the
+techniques explored above (in particular the ["Shallow test"](#nested-component-tests) approach).
+
+<code-example path="testing/src/app/about/about.component.spec.ts" region="tests" title="app/about/about.component.spec.ts" linenums="false"></code-example>
+
+However, testing a single use case is unlikely to explore the full range of a directive's capabilities.
+Finding and testing all components that use the directive is tedious, brittle, and almost as unlikely to afford full coverage.
+
+_Class-only tests_ might be helpful,
+but attribute directives like this one tend to manipulate the DOM.
+Isolated unit tests don't touch the DOM and, therefore,
+do not inspire confidence in the directive's efficacy.
+
+A better solution is to create an artificial test component that demonstrates all ways to apply the directive.
+
+<code-example path="testing/src/app/shared/highlight.directive.spec.ts" region="test-component" title="app/shared/highlight.directive.spec.ts (TestComponent)" linenums="false"></code-example>
+
+<figure>
+  <img src='generated/images/guide/testing/highlight-directive-spec.png' alt="HighlightDirective spec in action">
+</figure>
+
+<div class="alert is-helpful">
+
+The `<input>` case binds the `HighlightDirective` to the name of a color value in the input box.
+The initial value is the word "cyan" which should be the background color of the input box.
+
+</div>
+
+Here are some tests of this component:
+
+<code-example path="testing/src/app/shared/highlight.directive.spec.ts" region="selected-tests" title="app/shared/highlight.directive.spec.ts (selected tests)"></code-example>
+
+A few techniques are noteworthy:
+
+- The `By.directive` predicate is a great way to get the elements that have this directive _when their element types are unknown_.
+
+- 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.
+
+- `DebugElement.styles` affords access to element styles even in the absence of a real browser, thanks to the `DebugElement` abstraction.
+  But feel free to exploit the `nativeElement` when that seems easier or more clear than the abstraction.
+
+- Angular adds a directive to the injector of the element to which it is applied.
+  The test for the default color uses the injector of the second `<h2>` to get its `HighlightDirective` instance
+  and its `defaultColor`.
+
+- `DebugElement.properties` affords access to the artificial custom property that is set by the directive.
+
+<hr>
+
+## Pipe Testing
+
+Pipes are easy to test without the Angular testing utilities.
+
+A pipe class has one method, `transform`, that manipulates the input
+value into a transformed output value.
+The `transform` implementation rarely interacts with the DOM.
+Most pipes have no dependence on Angular other than the `@Pipe`
+metadata and an interface.
+
+Consider a `TitleCasePipe` that capitalizes the first letter of each word.
+Here's a naive implementation with a regular expression.
+
+<code-example path="testing/src/app/shared/title-case.pipe.ts" title="app/shared/title-case.pipe.ts" linenums="false"></code-example>
+
+Anything that uses a regular expression is worth testing thoroughly.
+Use simple Jasmine to explore the expected cases and the edge cases.
+
+<code-example path="testing/src/app/shared/title-case.pipe.spec.ts" region="excerpt" title="app/shared/title-case.pipe.spec.ts"></code-example>
+
+{@a write-tests}
+
+#### Write DOM tests too
+
+These are tests of the pipe _in isolation_.
+They can't tell if the `TitleCasePipe` is working properly as applied in the application components.
+
+Consider adding component tests such as this one:
+
+<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="title-case-pipe" title="app/hero/hero-detail.component.spec.ts (pipe test)"></code-example>
+
+<hr>
+
+{@a test-debugging}
+
+## Test debugging
+
+Debug specs in the browser in the same way that you debug an application.
+
+1. Reveal the karma browser window (hidden earlier).
+1. Click the **DEBUG** button; it opens a new browser tab and re-runs the tests.
+1. Open the browser's “Developer Tools” (`Ctrl-Shift-I` on windows; `Command-Option-I` in OSX).
+1. Pick the "sources" section.
+1. Open the `1st.spec.ts` test file (Control/Command-P, then start typing the name of the file).
+1. Set a breakpoint in the test.
+1. Refresh the browser, and it stops at the breakpoint.
+
+<figure>
+  <img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging">
+</figure>
+
+<hr>
+
+{@a atu-apis}
+
+## Testing Utility APIs
+
+This section takes inventory of the most useful Angular testing features and summarizes what they do.
+
+The Angular testing utilities include the `TestBed`, the `ComponentFixture`, and a handful of functions that control the test environment.
+The [_TestBed_](#testbed-api-summary) and [_ComponentFixture_](#component-fixture-api-summary) classes are covered separately.
+
+Here's a summary of the stand-alone functions, in order of likely utility:
+
+<table>
+  <tr>
+    <th>
+      Function
+    </th>
+    <th>
+      Description
+    </th>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>async</code>
+    </td>
+
+    <td>
+
+      Runs the body of a test (`it`) or setup (`beforeEach`) function within a special _async test zone_.
+      See [discussion above](#async).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>fakeAsync</code>
+    </td>
+
+    <td>
+
+      Runs the body of a test (`it`) within a special _fakeAsync test zone_, enabling
+      a linear control flow coding style. See [discussion above](#fake-async).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>tick</code>
+    </td>
+
+    <td>
+
+      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_.
+
+      <div class="alert is-helpful">
+
+      The curious, dedicated reader might enjoy this lengthy blog post,
+      ["_Tasks, microtasks, queues and schedules_"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/).
+
+      </div>
+
+      Accepts an optional argument that moves the virtual clock forward
+      by the specified number of milliseconds,
+      clearing asynchronous activities scheduled within that timeframe.
+      See [discussion above](#tick).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+       <code>inject</code>
+    </td>
+
+    <td>
+
+      Injects one or more services from the current `TestBed` injector into a test function.
+      It cannot inject a service provided by the component itself.
+      See discussion of the [debugElement.injector](#get-injected-services).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>discardPeriodicTasks</code>
+    </td>
+
+    <td>
+
+      When a `fakeAsync` test ends with pending timer event _tasks_ (queued `setTimeOut` and `setInterval` callbacks),
+      the test fails with a clear error message.
+
+      In general, a test should end with no queued tasks.
+      When pending timer tasks are expected, call `discardPeriodicTasks` to flush the _task_ queue
+      and avoid the error.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>flushMicrotasks</code>
+    </td>
+
+    <td>
+
+      When a `fakeAsync` test ends with pending _micro-tasks_ such as unresolved promises,
+      the test fails with a clear error message.
+
+      In general, a test should wait for micro-tasks to finish.
+      When pending microtasks are expected, call `flushMicrotasks` to flush the  _micro-task_ queue
+      and avoid the error.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>ComponentFixtureAutoDetect</code>
+    </td>
+
+    <td>
+
+      A provider token for a service that turns on [automatic change detection](#automatic-change-detection).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>getTestBed</code>
+    </td>
+
+    <td>
+
+      Gets the current instance of the `TestBed`.
+      Usually unnecessary because the static class methods of the `TestBed` class are typically sufficient.
+      The `TestBed` instance exposes a few rarely used members that are not available as
+      static methods.
+
+    </td>
+  </tr>
+</table>
+
+<hr>
+
+{@a testbed-class-summary}
+
+#### _TestBed_ class summary
+
+The `TestBed` class is one of the principal Angular testing utilities.
+Its API is quite large and can be overwhelming until you've explored it,
+a little at a time. Read the early part of this guide first
+to get the basics before trying to absorb the full API.
+
+The module definition passed to `configureTestingModule`
+is a subset of the `@NgModule` metadata properties.
+
+<code-example format="." language="javascript">
+  type TestModuleMetadata = {
+    providers?: any[];
+    declarations?: any[];
+    imports?: any[];
+    schemas?: Array&lt;SchemaMetadata | any[]&gt;;
+  };
+</code-example>
+
+{@a metadata-override-object}
+
+Each override method takes a `MetadataOverride<T>` where `T` is the kind of metadata
+appropriate to the method, that is, the parameter of an `@NgModule`,
+`@Component`, `@Directive`, or `@Pipe`.
+
+<code-example format="." language="javascript">
+  type MetadataOverride<T> = {
+    add?: Partial<T>;
+    remove?: Partial<T>;
+    set?: Partial<T>;
+  };
+</code-example>
+
+{@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`.
+
+Internally, all static methods cover methods of the current runtime `TestBed` instance,
+which is also returned by the `getTestBed()` function.
+
+Call `TestBed` methods _within_ a `beforeEach()` to ensure a fresh start before each individual test.
+
+Here are the most important static methods, in order of likely utility.
+
+<table>
+  <tr>
+    <th>
+      Methods
+    </th>
+    <th>
+      Description
+    </th>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>configureTestingModule</code>
+    </td>
+
+    <td>
+
+      The testing shims (`karma-test-shim`, `browser-test-shim`)
+      establish the [initial test environment](guide/testing) and a default testing module.
+      The default testing module is configured with basic declaratives and some Angular service substitutes that every tester needs.
+
+      Call `configureTestingModule` to refine the testing module configuration for a particular set of tests
+      by adding and removing imports, declarations (of components, directives, and pipes), and providers.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>compileComponents</code>
+    </td>
+
+    <td>
+
+      Compile the testing module asynchronously after you've finished configuring it.
+      You **must** call this method if _any_ of the testing module components have a `templateUrl`
+      or `styleUrls` because fetching component template and style files is necessarily asynchronous.
+      See [above](#compile-components).
+
+      After calling `compileComponents`, the `TestBed` configuration is frozen for the duration of the current spec.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>createComponent<T></code>
+    </td>
+
+    <td>
+
+      Create an instance of a component of type `T` based on the current `TestBed` configuration.
+      After calling `compileComponent`, the `TestBed` configuration is frozen for the duration of the current spec.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>overrideModule</code>
+    </td>
+    <td>
+
+      Replace metadata for the given `NgModule`. Recall that modules can import other modules.
+      The `overrideModule` method can reach deeply into the current testing module to
+      modify one of these inner modules.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>overrideComponent</code>
+    </td>
+
+    <td>
+
+      Replace metadata for the given component class, which could be nested deeply
+      within an inner module.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>overrideDirective</code>
+    </td>
+
+    <td>
+
+      Replace metadata for the given directive class, which could be nested deeply
+      within an inner module.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>overridePipe</code>
+    </td>
+    <td>
+
+      Replace metadata for the given pipe class, which could be nested deeply
+      within an inner module.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      {@a testbed-get}
+      <code>get</code>
+    </td>
+
+    <td>
+
+      Retrieve a service from the current `TestBed` injector.
+
+      The `inject` function is often adequate for this purpose.
+      But `inject` throws an error if it can't provide the service.
+
+      What if the service is optional?
+
+      The `TestBed.get()` method takes an optional second parameter,
+      the object to return if Angular can't find the provider
+      (`null` in this example):
+
+      <code-example path="testing/src/app/demo/demo.testbed.spec.ts" region="testbed-get-w-null" title="app/demo/demo.testbed.spec.ts" linenums="false"></code-example>
+
+      After calling `get`, the `TestBed` configuration is frozen for the duration of the current spec.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      {@a testbed-initTestEnvironment}
+      <code>initTestEnvironment</code>
+    </td>
+    <td>
+
+      Initialize the testing environment for the entire test run.
+
+      The testing shims (`karma-test-shim`, `browser-test-shim`) call it for you
+      so there is rarely a reason for you to call it yourself.
+
+      You may call this method _exactly once_. If you must change
+      this default in the middle of your test run, call `resetTestEnvironment` first.
+
+      Specify the Angular compiler factory, a `PlatformRef`, and a default Angular testing module.
+      Alternatives for non-browser platforms are available in the general form
+      `@angular/platform-<platform_name>/testing/<platform_name>`.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>resetTestEnvironment</code>
+    </td>
+    <td>
+
+      Reset the initial test environment, including the default testing module.
+
+    </td>
+  </tr>
+</table
+
+A few of the `TestBed` instance methods are not covered by static `TestBed` _class_ methods.
+These are rarely needed.
+
+{@a component-fixture-api-summary}
+
+#### The _ComponentFixture_
+
+The `TestBed.createComponent<T>`
+creates an instance of the component `T`
+and returns a strongly typed `ComponentFixture` for that component.
+
+The `ComponentFixture` properties and methods provide access to the component,
+its DOM representation, and aspects of its Angular environment.
+
+{@a component-fixture-properties}
+
+#### _ComponentFixture_ properties
+
+Here are the most important properties for testers, in order of likely utility.
+
+<table>
+  <tr>
+    <th>
+      Properties
+    </th>
+    <th>
+      Description
+    </th>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>componentInstance</code>
+    </td>
+
+    <td>
+
+      The instance of the component class created by `TestBed.createComponent`.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>debugElement</code>
+    </td>
+
+    <td>
+
+      The `DebugElement` associated with the root element of the component.
+
+      The `debugElement` provides insight into the component and its DOM element during test and debugging.
+      It's a critical property for testers. The most interesting members are covered [below](#debug-element-details).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>nativeElement</code>
+    </td>
+
+    <td>
+
+      The native DOM element at the root of the component.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>changeDetectorRef</code>
+    </td>
+
+    <td>
+
+      The `ChangeDetectorRef` for the component.
+
+      The `ChangeDetectorRef` is most valuable when testing a
+      component that has the `ChangeDetectionStrategy.OnPush` method
+      or the component's change detection is under your programmatic control.
+
+    </td>
+  </tr>
+</table>
+
+{@a component-fixture-methods}
+
+#### _ComponentFixture_ methods
+
+The _fixture_ methods cause Angular to perform certain tasks on the component tree.
+Call these method to trigger Angular behavior in response to simulated user action.
+
+Here are the most useful methods for testers.
+
+<table>
+  <tr>
+    <th>
+      Methods
+    </th>
+    <th>
+      Description
+    </th>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>detectChanges</code>
+    </td>
+
+    <td>
+
+      Trigger a change detection cycle for the component.
+
+      Call it to initialize the component (it calls `ngOnInit`) and after your
+      test code, change the component's data bound property values.
+      Angular can't see that you've changed `personComponent.name` and won't update the `name`
+      binding until you call `detectChanges`.
+
+      Runs `checkNoChanges`afterwards to confirm that there are no circular updates unless
+      called as `detectChanges(false)`;
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>autoDetectChanges</code>
+    </td>
+
+    <td>
+
+      Set this to `true` when you want the fixture to detect changes automatically.
+
+      When autodetect is `true`, the test fixture calls `detectChanges` immediately
+      after creating the component. Then it listens for pertinent zone events
+      and calls `detectChanges` accordingly.
+      When your test code modifies component property values directly,
+      you probably still have to call `fixture.detectChanges` to trigger data binding updates.
+
+      The default is `false`. Testers who prefer fine control over test behavior
+      tend to keep it `false`.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>checkNoChanges</code>
+    </td>
+
+    <td>
+
+      Do a change detection run to make sure there are no pending changes.
+      Throws an exceptions if there are.
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>isStable</code>
+    </td>
+
+    <td>
+
+      If the fixture is currently _stable_, returns `true`.
+      If there are async tasks that have not completed, returns `false`.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>whenStable</code>
+    </td>
+
+    <td>
+
+      Returns a promise that resolves when the fixture is stable.
+
+      To resume testing after completion of asynchronous activity or
+      asynchronous change detection, hook that promise.
+      See [above](#when-stable).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>destroy</code>
+    </td>
+
+    <td>
+
+      Trigger component destruction.
+
+    </td>
+  </tr>
+</table>
+
+{@a debug-element-details}
+
+#### _DebugElement_
+
+The `DebugElement` provides crucial insights into the component's DOM representation.
+
+From the test root component's `DebugElement` returned by `fixture.debugElement`,
+you can walk (and query) the fixture's entire element and component subtrees.
+
+Here are the most useful `DebugElement` members for testers, in approximate order of utility:
+
+<table>
+  <tr>
+    <th>
+      Member
+    </th>
+    <th>
+      Description
+    </th>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>nativeElement</code>
+    </td>
+
+    <td>
+
+      The corresponding DOM element in the browser (null for WebWorkers).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>query</code>
+    </td>
+
+    <td>
+
+      Calling `query(predicate: Predicate<DebugElement>)` returns the first `DebugElement`
+      that matches the [predicate](#query-predicate) at any depth in the subtree.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>queryAll</code>
+    </td>
+
+    <td>
+
+      Calling `queryAll(predicate: Predicate<DebugElement>)` returns all `DebugElements`
+      that matches the [predicate](#query-predicate) at any depth in subtree.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>injector</code>
+    </td>
+
+    <td>
+
+      The host dependency injector.
+      For example, the root element's component instance injector.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>componentInstance</code>
+    </td>
+
+    <td>
+
+      The element's own component instance, if it has one.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>context</code>
+    </td>
+
+    <td>
+
+      An object that provides parent context for this element.
+      Often an ancestor component instance that governs this element.
+
+      When an element is repeated within `*ngFor`, the context is an `NgForRow` whose `$implicit`
+      property is the value of the row instance value.
+      For example, the `hero` in `*ngFor="let hero of heroes"`.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>children</code>
+    </td>
+
+    <td>
+
+      The immediate `DebugElement` children. Walk the tree by descending through `children`.
+
+      <div class="alert is-helpful">
+
+      `DebugElement` also has `childNodes`, a list of `DebugNode` objects.
+      `DebugElement` derives from `DebugNode` objects and there are often
+      more nodes than elements. Testers can usually ignore plain nodes.
+
+      </div>
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>parent</code>
+    </td>
+    <td>
+
+      The `DebugElement` parent. Null if this is the root element.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>name</code>
+    </td>
+
+    <td>
+
+      The element tag name, if it is an element.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>triggerEventHandler</code>
+    </td>
+    <td>
+
+      Triggers the event by its name if there is a corresponding listener
+      in the element's `listeners` collection.
+      The second parameter is the _event object_ expected by the handler.
+      See [above](#trigger-event-handler).
+
+      If the event lacks a listener or there's some other problem,
+      consider calling `nativeElement.dispatchEvent(eventObject)`.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>listeners</code>
+    </td>
+
+    <td>
+
+      The callbacks attached to the component's `@Output` properties and/or the element's event properties.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>providerTokens</code>
+    </td>
+
+    <td>
+
+      This component's injector lookup tokens.
+      Includes the component itself plus the tokens that the component lists in its `providers` metadata.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>source</code>
+    </td>
+
+    <td>
+
+      Where to find this element in the source component template.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td style="vertical-align: top">
+      <code>references</code>
+    </td>
+
+    <td>
+
+      Dictionary of objects associated with template local variables (e.g. `#foo`),
+      keyed by the local variable name.
+
+    </td>
+  </tr>
+</table>
+
+{@a query-predicate}
+
+The `DebugElement.query(predicate)` and `DebugElement.queryAll(predicate)` methods take a
+predicate that filters the source element's subtree for matching `DebugElement`.
+
+The predicate is any method that takes a `DebugElement` and returns a _truthy_ value.
+The following example finds all `DebugElements` with a reference to a template local variable named "content":
+
+<code-example path="testing/src/app/demo/demo.testbed.spec.ts" region="custom-predicate" title="app/demo/demo.testbed.spec.ts" linenums="false"></code-example>
+
+The Angular `By` class has three static methods for common predicates:
+
+- `By.all` - return all elements.
+- `By.css(selector)` - return elements with matching CSS selectors.
+- `By.directive(directive)` - return elements that Angular matched to an instance of the directive class.
+
+<code-example path="testing/src/app/hero/hero-list.component.spec.ts" region="by" title="app/hero/hero-list.component.spec.ts" linenums="false"></code-example>
+
+<hr>
+
+{@a faq}
+
+## Frequently Asked Questions
+
+{@a q-spec-file-location}
+
+#### Why put spec file next to the file it tests?
+
+It's a good idea to put unit test spec files in the same folder
+as the application source code files that they test:
+
+- Such tests are easy to find.
+- You see at a glance if a part of your application lacks tests.
+- Nearby tests can reveal how a part works in context.
+- When you move the source (inevitable), you remember to move the test.
+- When you rename the source file (inevitable), you remember to rename the test file.
+
+<hr>
+
+{@a q-specs-in-test-folder}
+
+#### When would I put specs in a test folder?
+
+Application integration specs can test the interactions of multiple parts
+spread across folders and modules.
+They don't really belong to any part in particular, so they don't have a
+natural home next to any one file.
+
+It's often better to create an appropriate folder for them in the `tests` directory.
+
+Of course specs that test the test helpers belong in the `test` folder,
+next to their corresponding helper files.
+
+{@a q-e2e}
+
+#### Why not rely on E2E tests of DOM integration?
+
+The component DOM tests described in this guide often require extensive setup and
+advanced techniques whereas the [unit tests](#component-class-testing)
+are comparatively simple.
+
+#### Why not defer DOM integration tests to end-to-end (E2E) testing?
+
+E2E tests are great for high-level validation of the entire system.
+But they can't give you the comprehensive test coverage that you'd expect from unit tests.
+
+E2E tests are difficult to write and perform poorly compared to unit tests.
+They break easily, often due to changes or misbehavior far removed from the site of breakage.
+
+E2E tests can't easily reveal how your components behave when things go wrong,
+such as missing or bad data, lost connectivity, and remote service failures.
+
+E2E tests for apps that update a database,
+send an invoice, or charge a credit card require special tricks and back-doors to prevent
+accidental corruption of remote resources.
+It can even be hard to navigate to the component you want to test.
+
+Because of these many obstacles, you should test DOM interaction
+with unit testing techniques as much as possible.
diff --git a/aio/content/guide/typescript-configuration.md b/aio/content/guide/typescript-configuration.md
new file mode 100644
index 000000000000..78f1210e23ac
--- /dev/null
+++ b/aio/content/guide/typescript-configuration.md
@@ -0,0 +1,146 @@
+# TypeScript Configuration
+
+TypeScript is a primary language for Angular application development.
+It is a superset of JavaScript with design-time support for type safety and tooling.
+
+Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the *tsc* compiler,
+which requires some configuration.
+
+This page covers some aspects of TypeScript configuration and the TypeScript environment
+that are important to Angular developers, including details about the following files:
+
+* [tsconfig.json](guide/typescript-configuration#tsconfig)&mdash;TypeScript compiler configuration.
+* [typings](guide/typescript-configuration#typings)&mdash;TypesScript declaration files.
+
+
+{@a tsconfig}
+
+
+
+## *tsconfig.json*
+Typically, you add a TypeScript configuration file called `tsconfig.json` to your project to
+guide the compiler as it generates JavaScript files.
+
+<div class="alert is-helpful">
+
+
+
+For details about `tsconfig.json`, see the official
+[TypeScript wiki](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
+
+</div>
+
+
+
+The [Setup](guide/setup) guide uses the following `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.
+
+
+{@a noImplicitAny}
+
+
+### *noImplicitAny* and *suppressImplicitAnyIndexErrors*
+
+TypeScript developers disagree about whether the `noImplicitAny` flag should be `true` or `false`.
+There is no correct answer and you can change the flag later.
+But your choice now can make a difference in larger projects, so it merits discussion.
+
+When the `noImplicitAny` flag is `false` (the default), and if
+the compiler cannot infer the variable type based on how it's used,
+the compiler silently defaults the type to `any`. That's what is meant by *implicit `any`*.
+
+The documentation setup sets the `noImplicitAny` flag to `true`.
+When the `noImplicitAny` flag is `true` and the TypeScript compiler cannot infer
+the type, it still generates the JavaScript files, but it also **reports an error**.
+Many seasoned developers prefer this stricter setting because type checking catches more
+unintentional errors at compile time.
+
+You can set a variable's type to `any` even when the `noImplicitAny` flag is `true`.
+
+When the `noImplicitAny` flag is `true`, you may get *implicit index errors* as well.
+Most developers feel that *this particular error* is more annoying than helpful.
+You can suppress them with the following additional flag:
+
+<code-example format=".">
+  "suppressImplicitAnyIndexErrors":true
+
+</code-example>
+
+
+
+The documentation setup sets this flag to `true` as well.
+
+
+{@a typings}
+
+
+
+## TypeScript Typings
+Many JavaScript libraries, such as jQuery, the Jasmine testing library, and Angular,
+extend the JavaScript environment with features and syntax
+that the TypeScript compiler doesn't recognize natively.
+When the compiler doesn't recognize something, it throws an error.
+
+Use [TypeScript type definition files](https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html)&mdash;`d.ts files`&mdash;to tell the compiler about the libraries you load.
+
+TypeScript-aware editors leverage these same definition files to display type information about library features.
+
+Many libraries include definition files in their npm packages where both the TypeScript compiler and editors
+can find them. Angular is one such library.
+The `node_modules/@angular/core/` folder of any Angular application contains several `d.ts` files that describe parts of Angular.
+
+**You need do nothing to get *typings* files for library packages that include `d.ts` files.
+Angular packages include them already.**
+
+### lib.d.ts
+
+TypeScript includes a special declaration file called `lib.d.ts`. This file contains the ambient declarations for various common JavaScript constructs present in JavaScript runtimes and the DOM.
+
+Based on the `--target`, TypeScript adds _additional_ ambient declarations
+like `Promise` if the target is `es6`.
+
+Since the QuickStart is targeting `es5`, you can override the
+list of declaration files to be included:
+
+
+<code-example format=".">
+  "lib": ["es2015", "dom"]
+
+</code-example>
+
+
+
+Thanks to that, you have all the `es6` typings even when targeting `es5`.
+
+### Installable typings files
+Many libraries&mdash;jQuery, Jasmine, and Lodash among them&mdash;do *not* include `d.ts` files in their npm packages.
+Fortunately, either their authors or community contributors have created separate `d.ts` files for these libraries and
+published them in well-known locations.
+
+You can install these typings via `npm` using the
+[`@types/*` scoped package](http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html)
+and Typescript, starting at 2.0, automatically recognizes them.
+
+For instance, to install typings for `jasmine` you could do `npm install @types/jasmine --save-dev`.
+
+
+QuickStart identifies two *typings*, or `d.ts`, files:
+
+* [jasmine](http://jasmine.github.io/) typings for the Jasmine test framework.
+
+* [node](https://www.npmjs.com/package/@types/node) for code that references objects in the *Node.js®* environment;
+
+
+QuickStart doesn't require these typings but many of the samples do.
+
+
+{@a target}
+
+
+### *target*
+
+By default, the target is `es5`, you can configure the target to `es6` if you only want to deploy the application to
+es6 compatible browser. But if you configure the target to `es6` in some old browser such as `IE`, `Syntax Error` will be thrown.
diff --git a/aio/content/guide/universal.md b/aio/content/guide/universal.md
new file mode 100644
index 000000000000..5076ee7b743f
--- /dev/null
+++ b/aio/content/guide/universal.md
@@ -0,0 +1,589 @@
+# Angular Universal: server-side rendering
+
+This guide describes **Angular Universal**, a technology that runs your Angular application on the server.
+
+A normal Angular application executes in the _browser_, rendering pages in the DOM in response to user actions.
+
+**Angular Universal** generates _static_ application pages on the _server_
+through a process called **server-side rendering (SSR)**.
+
+It can generate and serve those pages in response to requests from browsers.
+It can also pre-generate pages as HTML files that you serve later.
+
+This guide describes a Universal sample application that launches quickly as a server-rendered page.
+Meanwhile, the browser downloads the full client version and switches to it automatically after the code loads.
+
+<div class="alert is-helpful">
+
+[Download the finished sample code](generated/zips/universal/universal.zip),
+which runs in a [Node.js® Express](https://expressjs.com/) server.
+
+</div>
+
+{@a why-do-it}
+
+### Why Universal
+
+There are three main reasons to create a Universal version of your app.
+
+1. Facilitate web crawlers (SEO)
+1. Improve performance on mobile and low-powered devices
+1. Show the first page quickly
+
+{@a seo}
+{@a web-crawlers}
+#### Facilitate web crawlers
+
+Google, Bing, Facebook, Twitter and other social media sites rely on web crawlers to index your application content and make that content searchable on the web.
+
+These web crawlers may be unable to navigate and index your highly-interactive, Angular application as a human user could do.
+
+Angular Universal can generate a static version of your app that is easily searchable, linkable, and navigable without JavaScript.
+It also makes a site preview available since each URL returns a fully-rendered page.
+
+Enabling web crawlers is often referred to as
+[Search Engine Optimization (SEO)](https://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf).
+
+{@a no-javascript}
+
+#### Performance on mobile and low performance devices
+
+Some devices don't support JavaScript or execute JavaScript so poorly that the user experience is unacceptable.
+For these cases, you may require a server-rendered, no-JavaScript version of the app.
+This version, however limited, may be the only practical alternative for
+people who otherwise would not be able to use the app at all.
+
+{@a startup-performance}
+
+#### Show the first page quickly
+
+Displaying the first page quickly can be critical for user engagement.
+
+[53% of mobile site visits are abandoned](https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/) if pages take longer than 3 seconds to load.
+Your app may have to launch faster to engage these users before they decide to do something else.
+
+With Angular Universal, you can generate landing pages for the app that look like the complete app.
+The pages are pure HTML, and can display even if JavaScript is disabled.
+The pages do not handle browser events, but they _do_ support navigation through the site using [routerLink](guide/router.html#router-link).
+
+In practice, you'll serve a static version of the landing page to hold the user's attention.
+At the same time, you'll load the full Angular app behind it in the manner [explained below](#transition).
+The user perceives near-instant performance from the landing page
+and gets the full interactive experience after the full app loads.
+
+{@a how-does-it-work}
+### How it works
+
+To make a Universal app, you install the `platform-server` package.
+The `platform-server` package has server implementations of the DOM, `XMLHttpRequest`, and other low-level features that do not rely on a browser.
+
+You compile the client application with the `platform-server` module instead of the `platform-browser` module.
+and run the resulting Universal app on a web server.
+
+The server (a [Node Express](https://expressjs.com/) server in _this_ guide's example)
+passes client requests for application pages to Universal's `renderModuleFactory` function.
+
+The `renderModuleFactory` function takes as inputs a *template* HTML page (usually `index.html`),
+an Angular *module* containing components,
+and a *route* that determines which components to display.
+
+The route comes from the client's request to the server.
+Each request results in the appropriate view for the requested route.
+
+The `renderModuleFactory` renders that view within the `<app>` tag of the template, creating a finished HTML page for the client.
+
+Finally, the server returns the rendered page to the client.
+
+### Working around the browser APIs
+
+Because a Universal `platform-server` app doesn't execute in the browser, you may have to work around some of the browser APIs and capabilities that are missing on the server.
+
+You won't be able reference browser-only native objects such as `window`, `document`, `navigator` or `location`.
+If you don't need them on the server-rendered page, side-step them with conditional logic.
+
+Alternatively, look for an injectable Angular abstraction over the object you need such as `Location` or `Document`;
+it may substitute adequately for the specific API that you're calling.
+If Angular doesn't provide it, you may be able to write your own abstraction that delegates to the browser API while in the browser and to a satisfactory alternative implementation while on the server.
+
+Without mouse or keyboard events, a universal app can't rely on a user clicking a button to show a component.
+A universal app should determine what to render based solely on the incoming client request.
+This is a good argument for making the app [routeable](guide/router).
+
+Because the user of a server-rendered page can't do much more than click links,
+you should [swap in the real client app](#transition) as quickly as possible for a proper interactive experience.
+
+{@a the-example}
+
+## The example
+
+The _Tour of Heroes_ tutorial is the foundation for the Universal sample described in this guide.
+
+The core application files are mostly untouched, with a few exceptions described below.
+You'll add more files to support building and serving with Universal.
+
+In this example, the Angular CLI compiles and bundles the Universal version of the app with the
+[AOT (Ahead-of-Time) compiler](guide/aot-compiler).
+A Node.js® Express web server turns client requests into the HTML pages rendered by Universal.
+
+You will create:
+
+ * a server-side app module, `app.server.module.ts`
+ * an entry point for the server-side, `main.server.ts`
+ * an express web server to handle requests, `server.ts`
+ * a TypeScript config file, `tsconfig.server.json`
+ * a Webpack config file for the server, `webpack.server.config.js`
+
+When you're done, the folder structure will look like this:
+
+<code-example format="." language="none" linenums="false">
+src/
+  index.html                 <i>app web page</i>
+  main.ts                    <i>bootstrapper for client app</i>
+  main.server.ts             <i>* bootstrapper for server app</i>
+  tsconfig.app.json          <i>TypeScript client configuration</i>
+  tsconfig.server.json       <i>* TypeScript server configuration</i>
+  tsconfig.spec.json         <i>TypeScript spec configuration</i>
+  style.css                  <i>styles for the app</i>
+  app/ ...                   <i>application code</i>
+    app.server.module.ts     <i>* server-side application module</i>
+server.ts                    <i>* express web server</i>
+tsconfig.json                <i>TypeScript client configuration</i>
+package.json                 <i>npm configuration</i>
+webpack.server.config.js     <i>* Webpack server configuration</i>
+</code-example>
+
+The files marked with `*` are new and not in the original tutorial sample.
+This guide covers them in the sections below.
+
+{@a preparation}
+
+## Preparation
+
+Download the [Tour of Heroes](generated/zips/toh-pt6/toh-pt6.zip) project and install the dependencies from it.
+
+{@a install-the-tools}
+
+### Install the tools
+
+To get started, install these packages.
+
+ * `@angular/platform-server` - Universal server-side components.
+ * `@nguniversal/module-map-ngfactory-loader` - For handling lazy-loading in the context of a server-render.
+ * `@nguniversal/express-engine` - An express engine for Universal applications.
+ * `ts-loader` - To transpile the server application
+
+Install them with the following commands:
+
+<code-example format="." language="bash">
+npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine
+</code-example>
+
+{@a transition}
+
+## Modify the client app
+
+A Universal app can act as a dynamic, content-rich "splash screen" that engages the user.
+It gives the appearance of a near-instant application.
+
+Meanwhile, the browser downloads the client app scripts in background.
+Once loaded, Angular transitions from the static server-rendered page to the dynamically rendered views of the interactive client app.
+
+You must make a few changes to your application code to support both server-side rendering and the transition to the client app.
+
+{@a root-app-module}
+
+### The root `AppModule`
+
+Open file `src/app/app.module.ts` and find the `BrowserModule` import in the `NgModule` metadata.
+Replace that import with this one:
+
+<code-example path="universal/src/app/app.module.ts" region="browsermodule" title="src/app/app.module.ts (withServerTransition)">
+</code-example>
+
+Angular adds the `appId` value (which can be _any_ string) to the style-names of the server-rendered pages,
+so that they can be identified and removed when the client app starts.
+
+You can get runtime information about the current platform and the `appId` by injection.
+
+<code-example path="universal/src/app/app.module.ts" region="platform-detection" title="src/app/app.module.ts (platform detection)">
+</code-example>
+
+{@a cli-output}
+
+### Build Destination
+
+A Universal app is distributed in two parts: the server-side code that serves up the initial application, and the client-side code that's loaded in dynamically.
+
+The Angular CLI outputs the client-side code in the `dist` directory by default, so you modify the `outputPath` for the __build__ target in the `angular.json` to keep the client-side build outputs separate from the server-side code. The client-side build output will be served by the Express server.
+
+```
+...
+"build": {
+  "builder": "@angular-devkit/build-angular:browser",
+  "options": {
+    "outputPath": "dist/browser",
+    ...
+  }
+}
+...
+```
+
+{@a http-urls}
+
+### Absolute HTTP URLs
+
+The tutorial's `HeroService` and `HeroSearchService` delegate to the Angular `HttpClient` module to fetch application data.
+These services send requests to _relative_ URLs such as `api/heroes`.
+
+In a Universal app, HTTP URLs must be _absolute_, for example, `https://my-server.com/api/heroes`
+even when the Universal web server is capable of handling those requests.
+
+You'll have to change the services to make requests with absolute URLs when running on the server
+and with relative URLs when running in the browser.
+
+One solution is to provide the server's runtime origin under the Angular [`APP_BASE_HREF` token](api/common/APP_BASE_HREF),
+inject it into the service, and prepend the origin to the request URL.
+
+Start by changing the `HeroService` constructor to take a second `origin` parameter that is optionally injected via the `APP_BASE_HREF` token.
+
+<code-example path="universal/src/app/hero.service.ts" region="ctor" title="src/app/hero.service.ts (constructor with optional origin)">
+</code-example>
+
+Note how the constructor prepends the origin (if it exists) to the `heroesUrl`.
+
+You don't provide `APP_BASE_HREF` in the browser version, so the `heroesUrl` remains relative.
+
+<div class="alert is-helpful">
+
+You can ignore `APP_BASE_HREF` in the browser if you've specified `<base href="/">` in the `index.html`
+to satisfy the router's need for a base address, as the tutorial sample does.
+
+</div>
+
+{@a server-code}
+
+## Server code
+
+To run an Angular Universal application, you'll need a server that accepts client requests and returns rendered pages.
+
+{@a app-server-module}
+
+### App server module
+
+The app server module class (conventionally named `AppServerModule`) is an Angular module that wraps the application's root module (`AppModule`) so that Universal can mediate between your application and the server.
+`AppServerModule` also tells Angular how to bootstrap your application when running as a Universal app.
+
+Create an `app.server.module.ts` file in the `src/app/` directory with the following `AppServerModule` code:
+
+<code-example path="universal/src/app/app.server.module.ts" title="src/app/app.server.module.ts">
+</code-example>
+
+Notice that it imports first the client app's `AppModule`, the Angular Universal's `ServerModule` and the `ModuleMapLoaderModule`.
+
+The `ModuleMapLoaderModule` is a server-side module that allows lazy-loading of routes.
+
+This is also the place to register providers that are specific to running your app under Universal.
+
+{@a app-server-entry-point}
+
+### App server entry point
+
+The `Angular CLI` uses the `AppServerModule` to build the server-side bundle.
+
+Create a `main.server.ts` file in the `src/` directory that exports the `AppServerModule`:
+
+<code-example path="universal/src/main.server.ts" title="src/main.server.ts">
+</code-example>
+
+The `main.server.ts` will be referenced later to add a `server` target to the `Angular CLI` configuration.
+
+{@a web-server}
+
+### Universal web server
+
+A _Universal_ web server responds to application _page_ requests with static HTML rendered by the [Universal template engine](#universal-engine).
+
+It receives and responds to HTTP requests from clients (usually browsers).
+It serves static assets such as scripts, css, and images.
+It may respond to data requests, perhaps directly or as a proxy to a separate data server.
+
+The sample web server for _this_ guide is based on the popular [Express](https://expressjs.com/) framework.
+
+<div class="alert is-helpful">
+
+  _Any_ web server technology can serve a Universal app as long as it can call Universal's `renderModuleFactory`.
+  The principles and decision points discussed below apply to any web server technology that you chose.
+
+</div>
+
+Create a `server.ts` file in the root directory and add the following code:
+
+<code-example path="universal/server.ts" title="server.ts">
+</code-example>
+
+<div class="alert is-critical">
+
+  **This sample server is not secure!**
+  Be sure to add middleware to authenticate and authorize users
+  just as you would for a normal Angular application server.
+
+</div>
+
+{@a universal-engine}
+#### Universal template engine
+
+The important bit in this file is the `ngExpressEngine` function:
+
+<code-example path="universal/server.ts" title="server.ts" region="ngExpressEngine">
+</code-example>
+
+The `ngExpressEngine` is a wrapper around the universal's `renderModuleFactory` function that turns a client's requests into server-rendered HTML pages.
+You'll call that function within a _template engine_ that's appropriate for your server stack.
+
+The first parameter is the `AppServerModule` that you wrote [earlier](#app-server-module).
+It's the bridge between the Universal server-side renderer and your application.
+
+The second parameter is the `extraProviders`. It is an optional Angular dependency injection providers, applicable when running on this server.
+
+{@a provide-origin}
+
+You supply `extraProviders` when your app needs information that can only be determined by the currently running server instance.
+
+The required information in this case is the running server's origin, provided under the `APP_BASE_HREF` token, so that the app can [calculate absolute HTTP URLs](#http-urls).
+
+The `ngExpressEngine` function returns a _promise_ that resolves to the rendered page.
+
+It's up to your engine to decide what to do with that page.
+_This engine's_ promise callback returns the rendered page to the [web server](#web-server),
+which then forwards it to the client in the HTTP response.
+
+<div class="alert is-helpful">
+
+  This wrappers are very useful to hide the complexity of the `renderModuleFactory`. There are more wrappers for different backend technologies
+  at the [Universal repository](https://github.com/angular/universal).
+
+</div>
+
+#### Filter request URLs
+
+The web server must distinguish _app page requests_ from other kinds of requests.
+
+It's not as simple as intercepting a request to the root address `/`.
+The browser could ask for one of the application routes such as `/dashboard`, `/heroes`, or `/detail:12`.
+In fact, if the app were _only_ rendered by the server, _every_ app link clicked would arrive at the server
+as a navigation URL intended for the router.
+
+Fortunately, application routes have something in common: their URLs lack file extensions.
+
+Data requests also lack extensions but they're easy to recognize because they always begin with `/api`.
+
+All static asset requests have a file extension (e.g., `main.js` or `/node_modules/zone.js/dist/zone.js`).
+
+So we can easily recognize the three types of requests and handle them differently.
+
+1. data request -  request URL that begins `/api`
+2. app navigation - request URL with no file extension
+3. static asset - all other requests.
+
+An Express server is a pipeline of middleware that filters and processes URL requests one after the other.
+
+You configure the Express server pipeline with calls to `app.get()` like this one for data requests.
+
+<code-example path="universal/server.ts" title="server.ts (data URL)" region="data-request" linenums="false">
+</code-example>
+
+<div class="alert is-helpful">
+
+This sample server doesn't handle data requests.
+
+The tutorial's "in-memory web api" module, a demo and development tool, intercepts all HTTP calls and
+simulates the behavior of a remote data server.
+In practice, you would remove that module and register your web api middleware on the server here.
+
+</div>
+
+<div class="alert is-critical">
+
+**Universal HTTP requests have different security requirements**
+
+HTTP requests issued from a browser app are not the same as when issued by the universal app on the server.
+
+When a browser makes an HTTP request, the server can make assumptions about cookies, XSRF headers, etc.
+
+For example, the browser automatically sends auth cookies for the current user.
+Angular Universal cannot forward these credentials to a separate data server.
+If your server handles HTTP requests, you'll have to add your own security plumbing.
+
+</div>
+
+The following code filters for request URLs with no extensions and treats them as navigation requests.
+
+<code-example path="universal/server.ts" title="server.ts (navigation)" region="navigation-request" linenums="false">
+</code-example>
+
+#### Serve static files safely
+
+A single `app.use()` treats all other URLs as requests for static assets
+such as JavaScript, image, and style files.
+
+To ensure that clients can only download the files that they are _permitted_ to see, you will [put all client-facing asset files in the `/dist` folder](#universal-webpack-configuration)
+and will only honor requests for files from the `/dist` folder.
+
+The following express code routes all remaining requests to `/dist`; it returns a `404 - NOT FOUND` if the file is not found.
+
+<code-example path="universal/server.ts" title="server.ts (static files)" region="static" linenums="false">
+</code-example>
+
+{@a universal-configuration}
+
+## Configure for Universal
+
+The server application requires its own build configuration.
+
+{@a universal-typescript-configuration}
+
+### Universal TypeScript configuration
+
+Create a `tsconfig.server.json` file in the project root directory to configure TypeScript and AOT compilation of the universal app.
+
+<code-example path="universal/src/tsconfig.server.json" title="src/tsconfig.server.json">
+</code-example>
+
+This config extends from the root's `tsconfig.json` file. Certain settings are noteworthy for their differences.
+
+* The `module` property must be **commonjs** which can be required into our server application.
+
+* The `angularCompilerOptions` section guides the AOT compiler:
+  * `entryModule` - the root module of the server application, expressed as `path/to/file#ClassName`.
+
+{@a universal-webpack-configuration}
+
+### Universal Webpack configuration
+
+Universal applications doesn't need any extra Webpack configuration, the CLI takes care of that for you,
+but since the server is a typescript application, you will use Webpack to transpile it.
+
+Create a `webpack.server.config.js` file in the project root directory with the following code.
+
+<code-example path="universal/webpack.server.config.js" title="webpack.server.config.js">
+</code-example>
+
+**Webpack configuration** is a rich topic beyond the scope of this guide.
+
+{@a universal-cli-configuration}
+
+### Angular CLI configuration
+
+The CLI provides builders for different types of __targets__. Commonly known targets such as `build` and `serve` already exist in the `angular.json` configuration. To target a server-side build, add a `server` target to the `architect` configuration object.
+
+* The `outputPath` tells where the resulting build will be created.
+* The `main` provides the main entry point to the previously created `main.server.ts`
+* The `tsConfig` uses the `tsconfig.server.json` as configuration for the TypeScript and AOT compilation.
+
+```
+"architect": {
+  ...
+  "server": {
+    "builder": "@angular-devkit/build-angular:server",
+    "options": {
+      "outputPath": "dist/server",
+      "main": "src/main.server.ts",
+      "tsConfig": "src/tsconfig.server.json"
+    }
+  }
+  ...
+}
+```
+
+## Build and run with universal
+
+Now that you've created the TypeScript and Webpack config files and configured the Angular CLI, you can build and run the Universal application.
+
+First add the _build_ and _serve_ commands to the `scripts` section of the `package.json`:
+
+```
+"scripts": {
+    ...
+    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
+    "serve:ssr": "node dist/server",
+    "build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
+    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
+    ...
+}
+```
+
+{@a build}
+
+#### Build
+
+From the command prompt, type
+
+<code-example format="." language="bash">
+npm run build:ssr
+</code-example>
+
+The Angular CLI compiles and bundles the universal app into two different folders, `browser` and `server`.
+Webpack transpiles the `server.ts` file into Javascript.
+
+{@a serve}
+
+#### Serve
+After building the application, start the server.
+
+<code-example format="." language="bash">
+npm run serve:ssr
+</code-example>
+
+The console window should say
+
+<code-example format="." language="bash">
+Node server listening on http://localhost:4000
+</code-example>
+
+## Universal in action
+
+Open a browser to http://localhost:4000/.
+You should see the familiar Tour of Heroes dashboard page.
+
+Navigation via `routerLinks` works correctly.
+You can go from the Dashboard to the Heroes page and back.
+You can click on a hero on the Dashboard page to display its Details page.
+
+But clicks, mouse-moves, and keyboard entries are inert.
+
+* Clicking a hero on the Heroes page does nothing.
+* You can't add or delete a hero.
+* The search box on the Dashboard page is ignored.
+* The _back_ and _save_ buttons on the Details page don't work.
+
+User events other than `routerLink` clicks aren't supported.
+The user must wait for the full client app to arrive.
+
+It will never arrive until you compile the client app
+and move the output into the `dist/` folder,
+a step you'll take in just a moment.
+
+## Throttling
+
+The transition from the server-rendered app to the client app happens quickly on a development machine.
+You can simulate a slower network to see the transition more clearly and
+better appreciate the launch-speed advantage of a universal app running on a low powered, poorly connected device.
+
+Open the Chrome Dev Tools and go to the Network tab.
+Find the [Network Throttling](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#throttling) dropdown on the far right of the menu bar.
+
+Try one of the "3G" speeds.
+The server-rendered app still launches quickly but the full client app may take seconds to load.
+
+{@a summary}
+## Summary
+
+This guide showed you how to take an existing Angular application and make it into a Universal app that does server-side rendering.
+It also explained some of the key reasons for doing so.
+
+ - Facilitate web crawlers (SEO)
+ - Support low-bandwidth or low-power devices
+ - Fast first page load
+
+Angular Universal can greatly improve the perceived startup performance of your app.
+The slower the network, the more advantageous it becomes to have Universal display the first page to the user.
diff --git a/aio/content/guide/updating.md b/aio/content/guide/updating.md
new file mode 100644
index 000000000000..4c59980dc4b3
--- /dev/null
+++ b/aio/content/guide/updating.md
@@ -0,0 +1,69 @@
+# Updating your Angular projects
+
+Just like Web and the entire web ecosystem, Angular is continuously improving. Angular balances continuous improvement with a strong focus on stability and making updates easy. Keeping your Angular app up-to-date enables you to take advantage of leading-edge new features, as well as optimizations and bug fixes. 
+
+This document contains information and resources to help you keep your Angular apps and libraries up-to-date. 
+
+For information about our versioning policy and practices&mdash;including 
+support and deprecation practices, as well as the release schedule&mdash;see [Angular versioning and releases](guide/releases "Angular versioning and releases"). 
+
+
+<div class="alert is-helpful">
+
+If you are currently using AngularJS, see [Upgrading from AngularJS](guide/upgrade "Upgrading from Angular JS"). _AngularJS_ is the name for all v1.x versions of Angular.
+
+</div>
+
+
+{@a announce}
+## Getting notified of new releases
+
+To be notified when new releases are available, follow [@angular](https://twitter.com/angular "@angular on Twitter") on Twitter or subscribe to the [Angular blog](https://blog.angular.io "Angular blog"). 
+
+{@a learn}
+## Learning about new features
+
+What's new? What's changed? We share the most important things you need to know on the Angular blog in [release announcements]( https://blog.angular.io/tagged/release%20notes "Angular blog - release announcements"). 
+
+To review a complete list of changes, organized by version, see the [Angular change log](https://github.com/angular/angular/blob/master/CHANGELOG.md "Angular change log").
+
+
+{@a checking-version-app}
+## Checking your version of Angular
+
+To check your app's version of Angular: From within your project directory, use the `ng version` command. 
+ 
+
+{@a checking-version-angular}
+## Finding the current version of Angular
+
+The most recent stable released version of Angular appears in the [Angular documentation](https://angular.io/docs "Angular documentation") at the bottom of the left side navigation. For example, `stable (v5.2.9)`.
+
+You can also find the most current version of Angular by using the [CLI command `ng update`](https://github.com/angular/angular-cli/wiki/update "Angular CLI update documentation"). By default, `ng update` (without additional arguments) lists the updates that are available to you.  
+
+
+{@a updating}
+## Updating your environment and apps
+
+To make updating easy, we provide complete instructions in the interactive [Angular Update Guide](https://update.angular.io/ "Angular Update Guide").
+
+The Angular Update Guide provides customized update instructions, based on the current and target versions that you specify. It includes basic and advanced update paths, to match the complexity of your applications. It also includes troubleshooting information and any recommended manual changes to help you get the most out of the new release. 
+
+For simple updates, the [CLI command `ng update`](https://github.com/angular/angular-cli/wiki/update "Angular CLI update documentation") is all you need. Without additional arguments, `ng update` lists the updates that are available to you and provides recommended steps to update your application to the most current version. 
+
+{@a resources}
+## Resource summary
+
+* Release announcements: [Angular blog - release announcements](https://blog.angular.io/tagged/release%20notes "Angular blog announcements about recent releases")
+
+* Release announcements (older): [Angular blog - announcements about releases prior to August 2017](https://blog.angularjs.org/search?q=available&by-date=true "Angular blog announcements about releases prior to August 2017")
+
+* Release details: [Angular change log](https://github.com/angular/angular/blob/master/CHANGELOG.md "Angular change log")
+
+* Update instructions: [Angular Update Guide](https://update.angular.io/ "Angular Update Guide")
+
+* Update command reference: [Angular CLI update documentation](https://github.com/angular/angular-cli/wiki/update "Angular CLI update documentation")
+
+* Versioning, release, support, and deprecation practices: [Angular versioning and releases](guide/releases "Angular versioning and releases")
+
+* Release schedule: [Angular versioning and releases](guide/releases#schedule "Angular versioning and releases")
\ No newline at end of file
diff --git a/aio/content/guide/upgrade-performance.md b/aio/content/guide/upgrade-performance.md
new file mode 100644
index 000000000000..ddb11e9d20e6
--- /dev/null
+++ b/aio/content/guide/upgrade-performance.md
@@ -0,0 +1,352 @@
+# Upgrading for Performance
+
+<div class="alert is-helpful">
+
+  _Angular_ is the name for the Angular of today and tomorrow.<br />
+  _AngularJS_ is the name for all 1.x versions of Angular.
+
+</div>
+
+This guide describes some of the built-in tools for efficiently migrating AngularJS projects over to
+the Angular platform, one piece at a time. It is very similar to
+[Upgrading from AngularJS](guide/upgrade) with the exception that this one uses the {@link
+downgradeModule downgradeModule()} helper function instead of the {@link UpgradeModule
+UpgradeModule} class. This affects how the app is bootstrapped and how change detection is
+propagated between the two frameworks. It allows you to upgrade incrementally while improving the
+speed of your hybrid apps and leveraging the latest of Angular in AngularJS apps early in the
+process of upgrading.
+
+
+
+## Preparation
+
+Before discussing how you can use `downgradeModule()` to create hybrid apps, there are things that
+you can do to ease the upgrade process even before you begin upgrading. Because the steps are the
+same regardless of how you upgrade, refer to the [Preparation](guide/upgrade#preparation) section of
+[Upgrading from AngularJS](guide/upgrade).
+
+
+## Upgrading with `ngUpgrade`
+
+With the `ngUpgrade` library in Angular you can upgrade an existing AngularJS app incrementally by
+building a hybrid app where you can run both frameworks side-by-side. In these hybrid apps you can
+mix and match AngularJS and Angular components and services and have them interoperate seamlessly.
+That means you don't have to do the upgrade work all at once as there is a natural coexistence
+between the two frameworks during the transition period.
+
+
+### How `ngUpgrade` Works
+
+Regardless of whether you choose `downgradeModule()` or `UpgradeModule`, the basic principles of
+upgrading, the mental model behind hybrid apps, and how you use the {@link upgrade/static
+upgrade/static} utilities remain the same. For more information, see the
+[How `ngUpgrade` Works](guide/upgrade#how-ngupgrade-works) section of
+[Upgrading from AngularJS](guide/upgrade).
+
+<div class="alert is-helpful">
+
+  The [Change Detection](guide/upgrade#change-detection) section of
+  [Upgrading from AngularJS](guide/upgrade) only applies to apps that use `UpgradeModule`. Though
+  you handle change detection differently with `downgradeModule()`, which is the focus of this
+  guide, reading the [Change Detection](guide/upgrade#change-detection) section provides helpful
+  context for what follows.
+
+</div>
+
+
+#### Change Detection with `downgradeModule()`
+
+As mentioned before, one of the key differences between `downgradeModule()` and `UpgradeModule` has
+to do with change detection and how it is propagated between the two frameworks.
+
+With `UpgradeModule`, the two change detection systems are tied together more tightly. Whenever
+something happens in the AngularJS part of the app, change detection is automatically triggered on
+the Angular part and vice versa. This is convenient as it ensures that neither framework misses an
+important change. Most of the time, though, these extra change detection runs are unnecessary.
+
+`downgradeModule()`, on the other side, avoids explicitly triggering change detection unless it
+knows the other part of the app is interested in the changes. For example, if a downgraded component
+defines an `@Input()`, chances are that the app needs to be aware when that value changes. Thus,
+`downgradeComponent()` automatically triggers change detection on that component.
+
+In most cases, though, the changes made locally in a particular component are of no interest to the
+rest of the app. For example, if the user clicks a button that submits a form, the component usually
+handles the result of this action. That being said, there _are_ cases where you want to propagate
+changes to some other part of the app that may be controlled by the other framework. In such cases,
+you are responsible for notifying the interested parties by manually triggering change detection.
+
+If you want a particular piece of code to trigger change detection in the AngularJS part of the app,
+you need to wrap it in
+[scope.$apply()](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply). Similarly, for
+triggering change detection in Angular you would use {@link NgZone#run ngZone.run()}.
+
+In many cases, a few extra change detection runs may not matter much. However, on larger or
+change-detection-heavy apps they can have a noticeable impact. By giving you more fine-grained
+control over the change detection propagation, `downgradeModule()` allows you to achieve better
+performance for your hybrid apps.
+
+
+## Using `downgradeModule()`
+
+Both AngularJS and Angular have their own concept of modules to help organize an app into cohesive
+blocks of functionality.
+
+Their details are quite different in architecture and implementation. In AngularJS, you create a
+module by specifying its name and dependencies with
+[angular.module()](https://docs.angularjs.org/api/ng/function/angular.module). Then you can add
+assets using its various methods. In Angular, you create a class adorned with an {@link NgModule
+NgModule} decorator that describes assets in metadata.
+
+In a hybrid app you run both frameworks at the same time. This means that you need at least one
+module each from both AngularJS and Angular.
+
+For the most part, you specify the modules in the same way you would for a regular app. Then, you
+use the `upgrade/static` helpers to let the two frameworks know about assets they can use from each
+other. This is known as "upgrading" and "downgrading".
+
+<div class="alert is-helpful">
+
+  <b>Definitions:</b>
+
+  - _Upgrading_: The act of making an AngularJS asset, such as a component or service, available to
+    the Angular part of the app.
+  - _Downgrading_: The act of making an Angular asset, such as a component or service, available to
+    the AngularJS part of the app.
+
+</div>
+
+An important part of inter-linking dependencies is linking the two main modules together. This is
+where `downgradeModule()` comes in. Use it to create an AngularJS module&mdash;one that you can use
+as a dependency in your main AngularJS module&mdash;that will bootstrap your main Angular module and
+kick off the Angular part of the hybrid app. In a sense, it "downgrades" an Angular module to an
+AngularJS module.
+
+There are a few things to note, though:
+
+1. You don't pass the Angular module directly to `downgradeModule()`. All `downgradeModule()` needs
+   is a "recipe", for example, a factory function, to create an instance for your module.
+
+2. The Angular module is not instantiated until the app actually needs it.
+
+The following is an example of how you can use `downgradeModule()` to link the two modules.
+
+```ts
+// Import `downgradeModule()`.
+import { downgradeModule } from '@angular/upgrade/static';
+
+// Use it to downgrade the Angular module to an AngularJS module.
+const downgradedModule = downgradeModule(MainAngularModuleFactory);
+
+// Use the downgraded module as a dependency to the main AngularJS module.
+angular.module('mainAngularJsModule', [
+  downgradedModule
+]);
+```
+
+
+#### Specifying a factory for the Angular module
+
+As mentioned earlier, `downgradeModule()` needs to know how to instantiate the Angular module. It
+needs a recipe. You define that recipe by providing a factory function that can create an instance
+of the Angular module. `downgradeModule()` accepts two types of factory functions:
+
+1. `NgModuleFactory`
+2. `(extraProviders: StaticProvider[]) => Promise<NgModuleRef>`
+
+When you pass an `NgModuleFactory`, `downgradeModule()` uses it to instantiate the module using
+{@link platformBrowser platformBrowser}'s {@link PlatformRef#bootstrapModuleFactory
+bootstrapModuleFactory()}, which is compatible with ahead-of-time (AOT) compilation. AOT compilation
+helps make your apps load faster. For more about AOT and how to create an `NgModuleFactory`, see the
+[Ahead-of-Time Compilation](guide/aot-compiler) guide.
+
+Alternatively, you can pass a plain function, which is expected to return a promise resolving to an
+{@link NgModuleRef NgModuleRef} (i.e. an instance of your Angular module). The function is called
+with an array of extra {@link StaticProvider Providers} that are expected to be available on the
+returned `NgModuleRef`'s {@link Injector Injector}. For example, if you are using {@link
+platformBrowser platformBrowser} or {@link platformBrowserDynamic platformBrowserDynamic}, you can
+pass the `extraProviders` array to them:
+
+```ts
+const bootstrapFn = (extraProviders: StaticProvider[]) => {
+  const platformRef = platformBrowserDynamic(extraProviders);
+  return platformRef.bootstrapModule(MainAngularModule);
+};
+// or
+const bootstrapFn = (extraProviders: StaticProvider[]) => {
+  const platformRef = platformBrowser(extraProviders);
+  return platformRef.bootstrapModuleFactory(MainAngularModuleFactory);
+};
+```
+
+Using an `NgModuleFactory` requires less boilerplate and is a good default option as it supports AOT
+out-of-the-box. Using a custom function requires slightly more code, but gives you greater
+flexibility.
+
+
+#### Instantiating the Angular module on-demand
+
+Another key difference between `downgradeModule()` and `UpgradeModule` is that the latter requires
+you to instantiate both the AngularJS and Angular modules up-front. This means that you have to pay
+the cost of instantiating the Angular part of the app, even if you don't use any Angular assets
+until later. `downgradeModule()` is again less aggressive. It will only instantiate the Angular part
+when it is required for the first time; that is, as soon as it needs to create a downgraded
+component.
+
+You could go a step further and not even download the code for the Angular part of the app to the
+user's browser until it is needed. This is especially useful when you use Angular on parts of the
+hybrid app that are not necessary for the initial rendering or that the user doesn't reach.
+
+
+A few examples are:
+
+- You use Angular on specific routes only and you don't need it until/if a user visits such a route.
+- You use Angular for features that are only visible to specific types of users; for example,
+  logged-in users, administrators, or VIP members. You don't need to load Angular until a user is
+  authenticated.
+- You use Angular for a feature that is not critical for the initial rendering of the app and you
+  can afford a small delay in favor of better initial load performance.
+
+
+### Bootstrapping with `downgradeModule()`
+
+As you might have guessed, you don't need to change anything in the way you bootstrap your existing
+AngularJS app. Unlike `UpgradeModule`&mdash;which requires some extra steps&mdash;
+`downgradeModule()` is able to take care of bootstrapping the Angular module, as long as you provide
+the recipe.
+
+In order to start using any `upgrade/static` APIs, you still need to load the Angular framework as
+you would in a normal Angular app. You can see how this can be done with SystemJS by following the
+instructions in the [Setup](guide/setup) guide, 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:
+
+<code-example title="system.config.js">
+'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
+</code-example>
+
+Next, create an `app.module.ts` file and add the following `NgModule` class:
+
+<code-example title="app.module.ts">
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ]
+})
+export class MainAngularModule {
+  // Empty placeholder method to satisfy the `Compiler`.
+  ngDoBootstrap() {}
+}
+</code-example>
+
+This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app
+must have. It also defines an empty `ngDoBootstrap()` method, to prevent the {@link Compiler
+Compiler} from returning errors. This is necessary because the module will not have a `bootstrap`
+declaration on its `NgModule` decorator.
+
+<div class="alert is-important">
+
+  You do not add a `bootstrap` declaration to the `NgModule` decorator since AngularJS owns the root
+  template of the app and `ngUpgrade` bootstraps the necessary components.
+
+</div>
+
+You can now link the AngularJS and Angular modules together using `downgradeModule()`.
+
+<code-example title="app.module.ts">
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { downgradeModule } from '@angular/upgrade/static';
+
+const bootstrapFn = (extraProviders: StaticProvider[]) => {
+  const platformRef = platformBrowserDynamic(extraProviders);
+  return platformRef.bootstrapModule(MainAngularModule);
+};
+const downgradedModule = downgradeModule(bootstrapFn);
+
+angular.module('mainAngularJsModule', [
+  downgradedModule
+]);
+</code-example>
+
+The existing AngularJS code works as before _and_ you are ready to start adding Angular code.
+
+
+### Using Components and Injectables
+
+The differences between `downgradeModule()` and `UpgradeModule` end here. The rest of the
+`upgrade/static` APIs and concepts work in the exact same way for both types of hybrid apps.
+See [Upgrading from AngularJS](guide/upgrade) to learn about:
+
+- [Using Angular Components from AngularJS Code](guide/upgrade#using-angular-components-from-angularjs-code).
+- [Using AngularJS Component Directives from Angular Code](guide/upgrade#using-angularjs-component-directives-from-angular-code).
+- [Projecting AngularJS Content into Angular Components](guide/upgrade#projecting-angularjs-content-into-angular-components).
+- [Transcluding Angular Content into AngularJS Component Directives](guide/upgrade#transcluding-angular-content-into-angularjs-component-directives).
+- [Making AngularJS Dependencies Injectable to Angular](guide/upgrade#making-angularjs-dependencies-injectable-to-angular).
+- [Making Angular Dependencies Injectable to AngularJS](guide/upgrade#making-angular-dependencies-injectable-to-angularjs).
+
+<div class="alert is-important">
+
+  While it is possible to downgrade injectables, downgraded injectables will not be available until
+  the Angular module is instantiated. In order to be safe, you need to ensure that the downgraded
+  injectables are not used anywhere _outside_ the part of the app that is controlled by Angular.
+
+  For example, it is _OK_ to use a downgraded service in an upgraded component that is only used
+  from Angular components, but it is _not OK_ to use it in an AngularJS component that may be used
+  independently of Angular.
+
+</div>
+
+
+## Using ahead-of-time compilation with hybrid apps
+
+You can take advantage of ahead-of-time (AOT) compilation in hybrid apps just like in any other
+Angular app. The setup for a hybrid app is mostly the same as described in the
+[Ahead-of-Time Compilation](guide/aot-compiler) guide save for differences in `index.html` and
+`main-aot.ts`.
+
+AOT needs to load any AngularJS files that are in the `<script>` tags in the AngularJS `index.html`.
+An easy way to copy them is to add each to the `copy-dist-files.js`file.
+
+You also need to pass the generated `MainAngularModuleFactory` to `downgradeModule()` instead of the
+custom bootstrap function:
+
+<code-example title="app/main-aot.ts">
+import { downgradeModule } from '@angular/upgrade/static';
+import { MainAngularModuleNgFactory } from '../aot/app/app.module.ngfactory';
+
+const downgradedModule = downgradeModule(MainAngularModuleNgFactory);
+
+angular.module('mainAngularJsModule', [
+  downgradedModule
+]);
+</code-example>
+
+And that is all you need to do to get the full benefit of AOT for hybrid Angular apps.
+
+
+## Conclusion
+
+This page covered how to use the {@link upgrade/static upgrade/static} package to incrementally
+upgrade existing AngularJS apps at your own pace and without impeding further development of the app
+for the duration of the upgrade process.
+
+Specifically, this guide showed how you can achieve better performance and greater flexibility in
+your hybrid apps by using {@link downgradeModule downgradeModule()} instead of {@link UpgradeModule
+UpgradeModule}.
+
+To summarize, the key differentiating factors of `downgradeModule()` are:
+
+1. It allows instantiating or even loading the Angular part lazily, which improves the initial
+   loading time. In some cases this may waive the cost of running a second framework altogether.
+2. It improves performance by avoiding unnecessary change detection runs while giving the developer
+   greater ability to customize.
+3. It does not require you to change how you bootstrap your AngularJS app.
+
+Using `downgradeModule()` is a good option for hybrid apps when you want to keep the AngularJS and
+Angular parts less coupled. You can still mix and match components and services from both
+frameworks, but you might need to manually propagate change detection. In return,
+`downgradeModule()` offers more control and better performance.
diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md
new file mode 100644
index 000000000000..025300cae4b6
--- /dev/null
+++ b/aio/content/guide/upgrade.md
@@ -0,0 +1,1948 @@
+# Upgrading from AngularJS to Angular
+
+_Angular_ is the name for the Angular of today and tomorrow.<br />
+_AngularJS_ is the name for all 1.x versions of Angular.
+
+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
+Angular platform, a piece at a time.
+
+Some applications will be easier to upgrade than others, and there are
+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 better aligned with modern development
+tools. That means in addition to making the upgrade easier,
+you will also improve the existing AngularJS applications.
+
+One of the keys to a successful upgrade is to do it incrementally,
+by running the two frameworks side by side in the same application, and
+porting AngularJS components to Angular one by one. This makes it possible
+to upgrade even large and complex applications without disrupting other
+business, because the work can be done collaboratively and spread over
+a period of time. The `upgrade` module in Angular has been designed to
+make incremental upgrading seamless.
+
+## Preparation
+
+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 you can apply to future proof apps even before you
+begin the migration.
+
+{@a follow-the-angular-styleguide}
+
+### Follow the AngularJS Style Guide
+
+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 AngularJS code - and equally
+importantly - how **not** to write and organize AngularJS code.
+
+Angular is a reimagined version of the best parts of AngularJS. In that
+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
+aligned with Angular*.
+
+There are a few rules in particular that will make it much easier to do
+*an incremental upgrade* using the Angular `upgrade/static` module:
+
+* The [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility)
+  states that there should be one component per file. This not only makes
+  components easy to navigate and find, but will also allow us to migrate
+  them between languages and frameworks one at a time. In this example application,
+  each controller, component, service, and filter is in its own source file.
+
+* 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 NgModules.
+
+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 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!
+
+### Using a Module Loader
+
+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
+&lt;script&gt; tags. Especially when you also have to maintain those tags in the correct
+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 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
+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.
+
+When moving applications into production, module loaders also make it easier
+to package them all up into production bundles with batteries included.
+
+### Migrating to TypeScript
+
+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 you can start using TypeScript features in your AngularJS code.
+
+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 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:
+
+* For applications that use a module loader, TypeScript imports and exports
+  (which are really ECMAScript 2015 imports and exports) can be used to organize
+  code into modules.
+
+* Type annotations can be gradually added to existing functions and variables
+  to pin down their types and get benefits like build-time error checking,
+  great autocompletion support and inline documentation.
+
+* JavaScript features new to ES2015, like arrow functions, `let`s and `const`s,
+  default function parameters, and destructuring assignments can also be gradually
+  added to make the code more expressive.
+
+* 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
+  life easier after the upgrade.
+
+### Using Component Directives
+
+In Angular, components are the main primitive from which user interfaces
+are built. You define the different portions of the UI as components and
+compose them into a full user experience.
+
+You can also do this in AngularJS, using *component directives*. These are
+directives that define their own templates, controllers, and input/output bindings -
+the same things that Angular components define. Applications built with
+component directives are much easier to migrate to Angular than applications
+built with lower-level features like `ng-controller`,  `ng-include`, and scope
+inheritance.
+
+To be Angular compatible, an AngularJS component directive should configure
+these attributes:
+
+* `restrict: 'E'`. Components are usually used as elements.
+* `scope: {}` - an isolate scope. In Angular, components are always isolated
+  from their surroundings, and you should do this in AngularJS too.
+* `bindToController: {}`. Component inputs and outputs should be bound
+  to the controller instead of using the `$scope`.
+* `controller` and `controllerAs`. Components have their own controllers.
+* `template` or `templateUrl`. Components have their own templates.
+
+Component directives may also use the following attributes:
+
+* `transclude: true/{}`, if the component needs to transclude content from elsewhere.
+* `require`, if the component needs to communicate with some parent component's
+  controller.
+
+Component directives **should not** use the following attributes:
+
+* `compile`. This will not be supported in Angular.
+* `replace: true`. Angular never replaces a component element with the
+  component template. This attribute is also deprecated in AngularJS.
+* `priority` and `terminal`. While AngularJS components may use these,
+  they are not used in Angular and it is better not to write code
+  that relies on them.
+
+An AngularJS component directive that is fully aligned with the Angular
+architecture may look something like this:
+
+<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#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:
+
+* It requires less boilerplate code.
+* It enforces the use of component best practices like `controllerAs`.
+* It has good default values for directive attributes like `scope` and `restrict`.
+
+The component directive example from above looks like this when expressed
+using the component API:
+
+<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
+logic around them will ease the eventual Angular upgrade process.
+
+## Upgrading with ngUpgrade
+
+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 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.
+
+### How ngUpgrade Works
+
+One of the primary tools 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.
+
+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 you can expect to have all the features and natural behavior of both frameworks.
+
+What happens on top of this is that components and services managed by one
+framework can interoperate with those from the other framework. This happens
+in three main areas: Dependency injection, the DOM, and change detection.
+
+#### Dependency Injection
+
+Dependency injection is front and center in both AngularJS and
+Angular, but there are some key differences between the two
+frameworks in how it actually works.
+
+<table>
+  <tr>
+    <th>
+      AngularJS
+    </th>
+    <th>
+      Angular
+    </th>
+  </tr>
+  <tr>
+    <td>
+      Dependency injection tokens are always strings
+    </td>
+    <td>
+
+      Tokens [can have different types](guide/dependency-injection).
+      They are often classes. They may also be strings.
+
+    </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.
+
+    </td>
+  </tr>
+</table>
+
+Even accounting for these differences you can still have dependency injection
+interoperability. `upgrade/static` resolves the differences and makes
+everything work seamlessly:
+
+* You can make AngularJS services available for injection to Angular code
+  by *upgrading* them. The same singleton instance of each service is shared
+  between the frameworks. In Angular these services will always be in the
+  *root injector* and available to all components.
+
+* 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 you register a downgraded service, you must explicitly specify a *string token* that you want to
+  use in AngularJS.
+
+<figure>
+  <img src="generated/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application">
+</figure>
+
+#### Components and the DOM
+
+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 ngUpgrade bridges together. They may also
+communicate through shared injected dependencies, as described above.
+
+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.
+
+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.
+
+Beyond that, you may interleave the two frameworks.
+You always cross the boundary between the two frameworks by one of two
+ways:
+
+1. By using a component from the other framework: An AngularJS template
+   using an Angular component, or an Angular template using an
+   AngularJS component.
+
+2. By transcluding or projecting content from the other framework. ngUpgrade
+    bridges the related concepts of AngularJS transclusion and Angular content
+    projection together.
+
+<figure>
+  <img src="generated/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application">
+</figure>
+
+Whenever you use a component that belongs to the other framework, a
+switch between framework boundaries occurs. However, that switch only
+happens to the elements in the template of that component. Consider a situation
+where you use an Angular component from AngularJS like this:
+
+<code-example language="html" escape="html">
+  &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*
+Angular directives. It is only in the template of the `<a-component>`
+where Angular steps in. This same rule also applies when you
+use AngularJS component directives from Angular.
+
+#### Change Detection
+
+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.
+
+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/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.
+
+In the case of hybrid applications, the `UpgradeModule` bridges the
+AngularJS and Angular approaches. Here's what happens:
+
+* Everything that happens in the application runs inside the Angular zone.
+  This is true whether the event originated in AngularJS or Angular code.
+  The zone triggers Angular change detection after every event.
+
+* The `UpgradeModule` will invoke the AngularJS `$rootScope.$apply()` after
+  every turn of the Angular zone. This also triggers AngularJS change
+  detection after every event.
+
+<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.
+
+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. 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.
+
+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. Their values will be written to the upgraded component's
+scope (or controller) when they change.
+
+### Using UpgradeModule with Angular _NgModules_
+
+Both AngularJS and Angular have their own concept of modules
+to help organize an application into cohesive blocks of functionality.
+
+Their details are quite different in architecture and implementation.
+In AngularJS, you add Angular assets to the `angular.module` property.
+In Angular, you create one or more classes adorned with an `NgModule` decorator
+that describes Angular assets in metadata. The differences blossom from there.
+
+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.
+
+<div class="alert is-helpful">
+
+For more information, see [NgModules](guide/ngmodules).
+
+</div>
+
+### Bootstrapping hybrid applications
+
+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.
+
+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:
+
+<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:
+
+<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:
+
+<code-example path="upgrade-module/src/systemjs.config.1.js" region="upgrade-static-umd" title="systemjs.config.js (map)">
+</code-example>
+
+Next, create an `app.module.ts` file and add the following `NgModule` class:
+
+<code-example path="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts" region="ngmodule" title="app.module.ts">
+</code-example>
+
+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.
+
+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):
+
+<div class="alert is-helpful">
+
+Note that you do not add a `bootstrap` declaration to the `@NgModule` decorator, since
+AngularJS will own the root template of the application.
+
+</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>
+
+Congratulations! You're running a hybrid application! The
+existing AngularJS code works as before _and_ you're ready to start adding Angular code.
+
+### Using Angular Components from AngularJS Code
+
+<img src="generated/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" class="left">
+
+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.
+
+Say you have a simple Angular component that shows information about a hero:
+
+<code-example path="upgrade-module/src/app/downgrade-static/hero-detail.component.ts" title="hero-detail.component.ts">
+</code-example>
+
+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:
+
+<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, you must also add it to the
+`declarations` in the `AppModule`.
+
+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.
+
+<code-example path="upgrade-module/src/app/downgrade-static/app.module.ts" region="ngmodule" title="app.module.ts">
+</code-example>
+
+<div class="alert is-helpful">
+
+All Angular components, directives and pipes must be declared in an NgModule.
+
+</div>
+
+The net result is an AngularJS directive called `heroDetail`, that you can
+use like any other directive in AngularJS templates.
+
+<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.*
+
+</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
+like this:
+
+<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 wiring them up:
+
+<code-example path="upgrade-module/src/index-downgrade-io.html" region="usecomponent">
+</code-example>
+
+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.
+
+<div class="callout is-important">
+
+<header>
+  Use kebab-case for downgraded component attributes
+</header>
+
+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, you would bind these attributes using camelCase:
+
+<code-example format="">
+  [myHero]="hero"
+</code-example>
+
+But when using them from AngularJS templates, you must use kebab-case:
+
+<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()`.
+
+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, you can easily make multiple copies of the component using `ng-repeat`:
+
+<code-example path="upgrade-module/src/index-downgrade-io.html" region="userepeatedcomponent">
+</code-example>
+
+### Using AngularJS Component Directives from Angular Code
+
+<img src="generated/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" class="left">
+
+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 your way down. This too can be done using the `upgrade/static`.
+You can *upgrade* AngularJS component directives and then use them from
+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).
+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.
+
+A simple example of an upgradable component is one that just has a template
+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>
+
+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 its 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.
+
+<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="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
+its children.
+
+</div>
+
+An upgraded component may also have inputs and outputs, as defined by
+the scope/controller bindings of the original AngularJS component
+directive. When you use the component from an Angular template,
+provide the inputs and outputs using **Angular template syntax**,
+observing the following rules:
+
+<table>
+  <tr>
+    <th>
+    </th>
+    <th>
+      Binding definition
+    </th>
+    <th>
+      Template syntax
+    </th>
+  </tr>
+  <tr>
+    <th>
+      Attribute binding
+    </th>
+    <td>
+
+      `myAttribute: '@myAttribute'`
+
+    </td>
+
+    <td>
+
+      `<my-component myAttribute="value">`
+
+    </td>
+  </tr>
+  <tr>
+    <th>
+      Expression binding
+    </th>
+    <td>
+
+      `myOutput: '&myOutput'`
+
+    </td>
+    <td>
+
+      `<my-component (myOutput)="action()">`
+
+    </td>
+  </tr>
+  <tr>
+    <th>
+      One-way binding
+    </th>
+    <td>
+
+      `myValue: '<myValue'`
+
+    </td>
+    <td>
+
+      `<my-component [myValue]="anExpression">`
+
+    </td>
+  </tr>
+  <tr>
+    <th>
+      Two-way binding
+    </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.
+
+    </td>
+  </tr>
+</table>
+
+For example, imagine a hero detail AngularJS component directive
+with one input and one output:
+
+<code-example path="upgrade-module/src/app/upgrade-io/hero-detail.component.ts" region="hero-detail-io" title="hero-detail.component.ts">
+</code-example>
+
+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:
+
+<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
+
+<img src="generated/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" class="left">
+
+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*. `upgrade/static`
+is able to make these two features interoperate.
+
+Angular components that support content projection make use of an `<ng-content>`
+tag within them. Here's an example of such a component:
+
+<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, 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:
+
+<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.
+
+</div>
+
+### Transcluding Angular Content into AngularJS Component Directives
+
+<img src="generated/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" class="left">
+
+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.
+
+When an AngularJS component directive supports transclusion, it may use
+the `ng-transclude` directive in its template to mark the transclusion
+point:
+
+<code-example path="upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts" title="hero-detail.component.ts">
+</code-example>
+
+If you upgrade this component and use it from Angular, you can populate
+the component tag with contents that will then get transcluded:
+
+<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
+
+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`.
+
+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, you might have a service called `HeroesService` in AngularJS:
+
+<code-example path="upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts" title="heroes.service.ts">
+</code-example>
+
+You can upgrade the service using a Angular [factory provider](guide/dependency-injection#factory-providers)
+that requests the service from the AngularJS `$injector`.
+
+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.
+
+It's also recommended to export the `heroesServiceFactory` function so that Ahead-of-Time
+compilation can pick it up.
+
+<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>
+
+You can then inject it in Angular using its class as a type annotation:
+
+<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 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.
+
+</div>
+
+### Making Angular Dependencies Injectable to 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.
+
+For example, you might have an Angular service called `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.
+
+<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()`
+and plug the factory into an AngularJS module.
+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 AngularJS code:
+
+<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
+
+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](guide/aot-compiler)
+save for differences in `index.html` and `main-aot.ts`
+
+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.
+
+You'll need to use the generated `AppModuleFactory`, instead of the original `AppModule` to
+bootstrap the hybrid app:
+
+<code-example path="upgrade-phonecat-2-hybrid/app/main-aot.ts" title="app/main-aot.ts">
+</code-example>
+
+And that's all you need do to get the full benefit of AOT for Angular apps!
+
+## PhoneCat Upgrade Tutorial
+
+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 you'll see how to
+bring that application to the brave new world of Angular.
+
+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.
+
+To follow along with the tutorial, clone the
+[angular-phonecat](https://github.com/angular/angular-phonecat) repository
+and apply the steps as you go.
+
+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#follow-the-angular-styleguide) before
+a successful upgrade.
+
+* Each component, service, and filter is in its own source file, as per the
+  [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility).
+
+* 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#folders-by-feature-structure)
+  and [Modularity](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity)
+  rules.
+
+* 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#organizing-tests).
+
+### Switching to TypeScript
+
+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.
+
+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.
+
+Begin by installing TypeScript to the project.
+
+<code-example format="">
+  npm i typescript --save-dev
+</code-example>
+
+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.
+
+<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
+</code-example>
+
+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.
+
+Finally, you should add some npm scripts in `package.json` to compile the TypeScript files to
+JavaScript (based on the `tsconfig.json` configuration file):
+
+<code-example format="">
+  "script": {
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    ...
+</code-example>
+
+Now launch the TypeScript compiler from the command line in watch mode:
+
+<code-example format="">
+  npm run tsc:w
+</code-example>
+
+Keep this process running in the background, watching and recompiling as you make changes.
+
+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
+the project HTTP server with `npm start`, you should see the fully functional
+application in your browser.
+
+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.
+
+For one thing, TypeScript is a superset of ES2015. Any app that has previously
+been written in ES5 - like the PhoneCat example has - can with TypeScript
+start incorporating all of the JavaScript features that are new to ES2015.
+These include things like `let`s and `const`s, arrow functions, default function
+parameters, and destructuring assignments.
+
+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.
+
+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.
+
+<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, you can explicitly annotate the `$resource` service dependency
+as an `angular.resource.IResourceService` - a type defined by the AngularJS typings.
+
+<code-example path="upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts" title="app/core/phone/phone.service.ts">
+</code-example>
+
+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.
+
+<code-example path="upgrade-phonecat-1-typescript/app/app.config.ts" title="app/app.config.ts">
+</code-example>
+
+<div class="alert is-helpful">
+
+The [AngularJS 1.x type definitions](https://www.npmjs.com/package/@types/angular)
+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.
+
+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. You could use it as a guide to inform
+us about how close you are to having a fully annotated project.
+
+</div>
+
+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.
+
+AngularJS expects controllers to be constructor functions. That's exactly what
+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.
+
+Here's what the new class for the phone list component controller looks like:
+
+<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
+`PhoneListController.$inject` property.
+
+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 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 you should define all of the
+controller members.
+
+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 the controller code look a lot more like Angular already. You're
+all set to actually introduce Angular into the project.
+
+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 you only have the `Phone` factory
+in this project, and that's a bit special since it's an `ngResource`
+factory. So you won't be doing anything to it in the preparation stage.
+You'll instead turn it directly into an Angular service.
+
+### Installing Angular
+
+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.
+
+<div class="alert is-important">
+
+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>
+
+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:
+
+* Add Angular and the other new dependencies to `package.json`
+* The SystemJS configuration file `systemjs.config.js` to the project root directory.
+
+Once these are done, run:
+
+<code-example format="">
+  npm install
+</code-example>
+
+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.
+
+Move the `app/index.html` file to the project root directory. Then change the
+development server root path in `package.json` to also point to the project root
+instead of `app`:
+
+<code-example format="">
+  "start": "http-server ./ -a localhost -p 8000 -c-1",
+</code-example>
+
+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
+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:
+
+<code-example path="upgrade-phonecat-2-hybrid/index.html" region="base" title="index.html">
+</code-example>
+
+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:
+
+<code-example path="upgrade-phonecat-2-hybrid/index.html" region="angular" title="index.html">
+</code-example>
+
+You also need to make a couple of adjustments
+to the `systemjs.config.js` file installed during [setup](guide/setup).
+
+Point the browser to the project root when loading things through SystemJS,
+instead of using the  `<base>` URL.
+
+Install the `upgrade` package via `npm install @angular/upgrade --save`
+and add a mapping for the `@angular/upgrade/static` package.
+
+<code-example path="upgrade-phonecat-2-hybrid/systemjs.config.1.js" region="paths" title="systemjs.config.js">
+</code-example>
+
+### Creating the _AppModule_
+
+Now create the root `NgModule` class called `AppModule`.
+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:
+
+<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:
+
+<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="bare" title="app.module.ts">
+</code-example>
+
+### Bootstrapping a hybrid PhoneCat
+
+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.
+
+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.
+
+First, remove the `ng-app` attribute from `index.html`.
+Then import `UpgradeModule` in the `AppModule`, and override its `ngDoBootstrap` method:
+
+<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.
+
+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.
+
+<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.
+
+<div class="alert is-helpful">
+
+#### Why declare _angular_ as _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">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.
+
+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 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.
+
+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.
+
+</div>
+
+### Upgrading the Phone service
+
+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 you're using it for two things:
+
+* For loading the list of all phones into the phone list component.
+* For loading the details of a single phone into the phone detail component.
+
+You can replace this implementation with an Angular service class, while
+keeping the controllers in AngularJS land.
+
+In the new version, you import the Angular HTTP module and call its `Http` service instead of `ngResource`.
+
+Re-open the `app.module.ts` file, import and add `HttpModule` to the `imports` array of the `AppModule`:
+
+<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="httpmodule" title="app.module.ts">
+</code-example>
+
+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`:
+
+<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 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.
+
+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 loads the details of a specified phone:
+
+<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 you don't have yet. Add a simple interface for it:
+
+<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:
+
+<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 you're importing the `map` operator of the RxJS `Observable` separately.
+Do this for every RxJS operator.
+
+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:
+
+<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="phone" title="app.module.ts">
+</code-example>
+
+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.
+
+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:
+
+<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>
+
+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 you've achieved is a migration of a service to Angular
+without having to yet migrate the components that use it.
+
+<div class="alert is-helpful">
+
+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.
+
+</div>
+
+### Upgrading Components
+
+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*.
+
+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.
+You can then also remove the static `$inject` property from the class:
+
+<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 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.
+
+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:
+
+<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
+[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.
+
+<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
+
+The built-in AngularJS `filter` and `orderBy` filters do not exist in Angular,
+so you need to do the filtering and sorting yourself.
+
+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.
+
+<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 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.
+
+The `as angular.IDirectiveFactory` cast tells the TypeScript compiler
+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`.
+Add the `FormsModule` to `NgModule` imports, declare the new `PhoneListComponent` and
+finally add it to `entryComponents` since you downgraded it:
+
+<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`.
+
+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.
+
+The AngularJS injector has an AngularJS router dependency called `$routeParams`,
+which was injected into `PhoneDetails` when it was still an AngularJS controller.
+You intend to inject it into the new `PhoneDetailsComponent`.
+
+Unfortunately, AngularJS dependencies are not automatically available to Angular components.
+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`:
+
+<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:
+
+<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:
+
+* You've removed the `$ctrl.` prefix from all expressions.
+
+* You've replaced `ng-src` with property
+  bindings for the standard `src` property.
+
+* 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, you always specify  in the template when an attribute's value is
+  a property expression, as opposed to a literal string.
+
+* You've replaced `ng-repeat`s with `*ngFor`s.
+
+* You've replaced `ng-click` with an event binding for the standard `click`.
+
+* 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 you try to refer to properties on undefined objects. You need to be explicit
+  about cases where this is expected.
+
+Add `PhoneDetailComponent` component to the `NgModule` _declarations_ and _entryComponents_:
+
+<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="phonedetail" title="app.module.ts">
+</code-example>
+
+You should now also remove the phone detail component &lt;script&gt; tag from `index.html`.
+
+#### Add the _CheckmarkPipe_
+
+The AngularJS directive had a `checkmark` _filter_.
+Turn that into an Angular **pipe**.
+
+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.
+The implementation is the same as before, repackaged in the `transform` method.
+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`:
+
+<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="checkmarkpipe" title="app.module.ts">
+</code-example>
+
+### 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).
+
+Then change `main-aot.ts` to bootstrap the `AppComponentFactory` that was generated
+by the AOT compiler:
+
+<code-example path="upgrade-phonecat-2-hybrid/app/main-aot.ts" title="app/main-aot.ts">
+</code-example>
+
+You need to load all the AngularJS files you already use in `index.html` in `aot/index.html`
+as well:
+
+<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. The files the application
+needs at runtime, like the `.json` phone lists and images, also need to be copied.
+
+Install `fs-extra` via `npm install fs-extra --save-dev` for better file copying, and change
+`copy-dist-files.js` to the following:
+
+<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!
+
+### Adding The Angular Router And Bootstrap
+
+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.
+
+#### Add the Angular router
+
+Angular has an [all-new router](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.
+
+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:
+
+<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>.
+This component just renders the contents of the active route and nothing else.
+
+The selector tells Angular to plug this root component into the `<phonecat-app>`
+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:
+
+<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.
+
+The details of Angular router configuration are best left to the [Routing documentation](guide/router)
+which recommends that you create a `NgModule` dedicated to router configuration
+(called a _Routing Module_).
+
+<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 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.
+
+A couple of extra providers enable routing with "hash" URLs such as `#!/phones`
+instead of the default "push state" strategy.
+
+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
+insert its view into the host web page.
+
+You must also remove the bootstrap of the AngularJS module from `ngDoBootstrap()` in `app.module.ts`
+and the `UpgradeModule` import.
+
+<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.
+
+#### Generate links for each phone
+
+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`:
+
+<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="alert is-helpful">
+
+See the [Routing](guide/router) page for details.
+
+</div><br>
+
+#### 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:
+
+<code-example path="upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts" title="app/phone-detail/phone-detail.component.ts">
+</code-example>
+
+You are now running a pure Angular application!
+
+### Say Goodbye to AngularJS
+
+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!
+
+The application is still bootstrapped as a hybrid app.
+There's no need for that anymore.
+
+Switch the bootstrap method of the application from the `UpgradeModule` to the Angular way.
+
+<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)
+for AngularJS services, and the `app/ajs-upgraded-providers.ts` file.
+
+Also remove any `downgradeInjectable()` or `downgradeComponent()` you find,
+together with the associated AngularJS factory or directive declarations.
+Since you no longer have downgraded components, you no longer list them
+in `entryComponents`.
+
+<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:
+
+* `app/app.module.ajs.ts`
+* `app/app.config.ts`
+* `app/core/core.module.ts`
+* `app/core/phone/phone.module.ts`
+* `app/phone-detail/phone-detail.module.ts`
+* `app/phone-list/phone-list.module.ts`
+
+The external typings for AngularJS may be uninstalled as well. The only ones
+you still need are for Jasmine and Angular polyfills.
+The `@angular/upgrade` package and its mapping in `systemjs.config.js` can also go.
+
+<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:
+
+<code-example path="upgrade-phonecat-3-final/index.html" region="full" title="index.html">
+</code-example>
+
+That is the last you'll see of AngularJS! It has served us well but now
+it's time to say goodbye.
+
+## Appendix: Upgrading PhoneCat Tests
+
+Tests can not only be retained through an upgrade process, but they can also be
+used as a valuable safety measure when ensuring that the application does not
+break during the upgrade. E2E tests are especially useful for this purpose.
+
+### E2E Tests
+
+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 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 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.
+
+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.
+
+Update the `protractor-conf.js` to sync with hybrid apps:
+
+<code-example format="">
+  ng12Hybrid: true
+</code-example>
+
+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:
+
+<table>
+  <tr>
+    <th>
+      Previous code
+    </th>
+    <th>
+      New code
+    </th>
+    <th>
+      Notes
+    </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`
+
+    </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`
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `by.model('$ctrl.query')`
+
+    </td>
+    <td>
+
+      `by.css('input')`
+
+    </td>
+    <td>
+
+      The model matcher relies on 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`
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `by.binding('$ctrl.phone.name')`
+
+    </td>
+    <td>
+
+      `by.css('h1')`
+
+    </td>
+    <td>
+
+      The binding matcher relies on AngularJS data binding
+
+    </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, 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.
+
+Replace the `ng12Hybrid` previously added with the following in `protractor-conf.js`:
+
+<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 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:
+
+<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:
+
+<code-example path="upgrade-phonecat-3-final/e2e-spec.ts" region="links" title="e2e-tests/scenarios.ts">
+</code-example>
+
+### Unit Tests
+
+For unit tests, on the other hand, more conversion work is needed. Effectively
+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.
+
+For instance, in the phone detail component spec, you can use ES2015
+features like arrow functions and block-scoped variables and benefit from the type
+definitions of the AngularJS services you're consuming:
+
+<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 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:
+
+<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.
+
+Karma configuration should then be changed so that it uses the application root dir
+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 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.
+
+<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, you must help
+Karma out a bit so that it can route them to the right paths:
+
+<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:
+
+<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. You need to switch from the mocked-out
+AngularJS `$httpBackend` to a mocked-out Angular Http backend.
+
+<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, 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.
+
+<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, 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`.
+
+<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.
+
+<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
new file mode 100644
index 000000000000..177ec4c8fcde
--- /dev/null
+++ b/aio/content/guide/user-input.md
@@ -0,0 +1,332 @@
+# User Input
+
+User actions such as clicking a link, pushing a button, and entering
+text raise DOM events.
+This page explains how to bind those events to component event handlers using the Angular
+event binding syntax.
+
+Run the <live-example></live-example>.
+
+
+## Binding to user input events
+
+You can use [Angular event bindings](guide/template-syntax#event-binding)
+to respond to any [DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
+Many DOM events are triggered by user input. Binding to these events provides a way to
+get input from the user.
+
+To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted
+[template statement](guide/template-syntax#template-statements) to it.
+
+The following example shows an event binding that implements a click handler:
+
+<code-example path="user-input/src/app/click-me.component.ts" region="click-me-button" title="src/app/click-me.component.ts" linenums="false">
+
+</code-example>
+
+{@a click}
+
+The `(click)` to the left of the equals sign identifies the button's click event as the **target of the binding**.
+The text in quotes to the right of the equals sign
+is the **template statement**, which responds
+to the click event by calling the component's `onClickMe` method.
+
+When writing a binding, be aware of a template statement's **execution context**.
+The identifiers in a template statement belong to a specific context object,
+usually the Angular component controlling the template.
+The example above shows a single line of HTML, but that HTML belongs to a larger component:
+
+
+<code-example path="user-input/src/app/click-me.component.ts" region="click-me-component" title="src/app/click-me.component.ts" linenums="false">
+
+</code-example>
+
+
+
+When the user clicks the button, Angular calls the `onClickMe` method from `ClickMeComponent`.
+
+
+
+## Get user input from the $event object
+DOM events carry a payload of information that may be useful to the component.
+This section shows how to bind to the `keyup` event of an input box to get the user's input after each keystroke.
+
+The following code listens to the `keyup` event and passes the entire event payload (`$event`) to the component event handler.
+
+<code-example path="user-input/src/app/keyup.components.ts" region="key-up-component-1-template" title="src/app/keyup.components.ts (template v.1)" linenums="false">
+
+</code-example>
+
+
+
+When a user presses and releases a key, the `keyup` event occurs, and Angular provides a corresponding
+DOM event object in the `$event` variable which this code passes as a parameter to the component's `onKey()` method.
+
+<code-example path="user-input/src/app/keyup.components.ts" region="key-up-component-1-class-no-type" title="src/app/keyup.components.ts (class v.1)" linenums="false">
+
+</code-example>
+
+
+
+The properties of an `$event` object vary depending on the type of DOM event. For example,
+a mouse event includes different information than an input box editing event.
+
+All [standard DOM event objects](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+have a `target` property, a reference to the element that raised the event.
+In this case, `target` refers to the [`<input>` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) and
+`event.target.value` returns the current contents of that element.
+
+After each call, the `onKey()` method appends the contents of the input box value to the list
+in the component's `values` property, followed by a  separator character (|).
+The [interpolation](guide/template-syntax#interpolation)
+displays the accumulating input box changes from the `values` property.
+
+Suppose the user enters the letters "abc", and then backspaces to remove them one by one.
+Here's what the UI displays:
+
+<code-example>
+  a | ab | abc | ab | a | |
+</code-example>
+
+
+
+<figure>
+  <img src='generated/images/guide/user-input/keyup1-anim.gif' alt="key up 1">
+</figure>
+
+
+
+<div class="alert is-helpful">
+
+
+
+Alternatively, you could accumulate the individual keys themselves by substituting `event.key`
+for `event.target.value` in which case the same user input would produce:
+
+<code-example>
+  a | b | c | backspace | backspace | backspace |
+
+</code-example>
+
+
+
+</div>
+
+
+
+{@a keyup1}
+
+
+### Type the _$event_
+
+The example above casts the `$event` as an `any` type.
+That simplifies the code at a cost.
+There is no type information
+that could reveal properties of the event object and prevent silly mistakes.
+
+The following example rewrites the method with types:
+
+<code-example path="user-input/src/app/keyup.components.ts" region="key-up-component-1-class" title="src/app/keyup.components.ts (class v.1 - typed )" linenums="false">
+
+</code-example>
+
+
+
+The `$event` is now a specific `KeyboardEvent`.
+Not all elements have a `value` property so it casts `target` to an input element.
+The `OnKey` method more clearly expresses what it expects from the template and how it interprets the event.
+
+### Passing _$event_ is a dubious practice
+Typing the event object reveals a significant objection to passing the entire DOM event into the method:
+the component has too much awareness of the template details.
+It can't extract information without knowing more than it should about the HTML implementation.
+That breaks the separation of concerns between the template (_what the user sees_)
+and the component (_how the application processes user data_).
+
+The next section shows how to use template reference variables to address this problem.
+
+
+
+## Get user input from a template reference variable
+There's another way to get the user data: use Angular
+[**template reference variables**](guide/template-syntax#ref-vars).
+These variables provide direct access to an element from within the template.
+To declare a template reference variable, precede an identifier with a hash (or pound) character (#).
+
+The following example uses a template reference variable
+to implement a keystroke loopback in a simple template.
+
+<code-example path="user-input/src/app/loop-back.component.ts" region="loop-back-component" title="src/app/loop-back.component.ts" linenums="false">
+
+</code-example>
+
+
+
+The template reference variable named `box`, declared on the `<input>` element,
+refers to the `<input>` element itself.
+The code uses the `box` variable to get the input element's `value` and display it
+with interpolation between `<p>` tags.
+
+The template is completely self contained. It doesn't bind to the component,
+and the component does nothing.
+
+Type something in the input box, and watch the display update with each keystroke.
+
+
+<figure>
+  <img src='generated/images/guide/user-input/keyup-loop-back-anim.gif' alt="loop back">
+</figure>
+
+
+
+<div class="alert is-helpful">
+
+
+
+**This won't work at all unless you bind to an event**.
+
+Angular updates the bindings (and therefore the screen)
+only if the app does something in response to asynchronous events, such as keystrokes.
+This example code binds the `keyup` event
+to the number 0, the shortest template statement possible.
+While the statement does nothing useful,
+it satisfies Angular's requirement so that Angular will update the screen.
+
+</div>
+
+
+
+It's easier to get to the input box with the template reference
+variable than to go through the `$event` object. Here's a rewrite of the previous
+`keyup` example that uses a template reference variable to get the user's input.
+
+<code-example path="user-input/src/app/keyup.components.ts" region="key-up-component-2" title="src/app/keyup.components.ts (v2)" linenums="false">
+
+</code-example>
+
+
+
+A nice aspect of this approach is that the component gets clean data values from the view.
+It no longer requires knowledge of the `$event` and its structure.
+{@a key-event}
+
+
+## Key event filtering (with `key.enter`)
+The `(keyup)` event handler hears *every keystroke*.
+Sometimes only the _Enter_ key matters, because it signals that the user has finished typing.
+One way to reduce the noise would be to examine every `$event.keyCode` and take action only when the key is _Enter_.
+
+There's an easier way: bind to Angular's `keyup.enter` pseudo-event.
+Then Angular calls the event handler only when the user presses _Enter_.
+
+<code-example path="user-input/src/app/keyup.components.ts" region="key-up-component-3" title="src/app/keyup.components.ts (v3)" linenums="false">
+
+</code-example>
+
+
+
+Here's how it works.
+
+<figure>
+  <img src='generated/images/guide/user-input/keyup3-anim.gif' alt="key up 3">
+</figure>
+
+
+
+
+## On blur
+
+In the previous example, the current state of the input box
+is lost if the user mouses away and clicks elsewhere on the page
+without first pressing _Enter_.
+The component's `value` property is updated only when the user presses _Enter_.
+
+To fix this issue, listen to both the _Enter_ key and the _blur_ event.
+
+
+<code-example path="user-input/src/app/keyup.components.ts" region="key-up-component-4" title="src/app/keyup.components.ts (v4)" linenums="false">
+
+</code-example>
+
+
+
+
+## Put it all together
+The previous page showed how to [display data](guide/displaying-data).
+This page demonstrated event binding techniques.
+
+Now, put it all together in a micro-app
+that can display a list of heroes and add new heroes to the list.
+The user can add a hero by typing the hero's name in the input box and
+clicking **Add**.
+
+
+<figure>
+  <img src='generated/images/guide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes">
+</figure>
+
+
+
+Below is the "Little Tour of Heroes"  component.
+
+
+<code-example path="user-input/src/app/little-tour.component.ts" region="little-tour" title="src/app/little-tour.component.ts" linenums="false">
+
+</code-example>
+
+
+
+### Observations
+
+* **Use template variables to refer to elements** &mdash;
+The `newHero` template variable refers to the `<input>` element.
+You can reference `newHero` from any sibling or child of the `<input>` element.
+
+* **Pass values, not elements** &mdash;
+Instead of passing the `newHero` into the component's `addHero` method,
+get the input box value and pass *that* to `addHero`.
+
+* **Keep template statements simple** &mdash;
+The `(blur)` event is bound to two JavaScript statements.
+The first statement calls `addHero`.  The second statement, `newHero.value=''`,
+clears the input box after a new hero is added to the list.
+
+
+
+## Source code
+
+Following is all the code discussed in this page.
+
+<code-tabs>
+
+  <code-pane title="click-me.component.ts" path="user-input/src/app/click-me.component.ts">
+
+  </code-pane>
+
+  <code-pane title="keyup.components.ts" path="user-input/src/app/keyup.components.ts">
+
+  </code-pane>
+
+  <code-pane title="loop-back.component.ts" path="user-input/src/app/loop-back.component.ts">
+
+  </code-pane>
+
+  <code-pane title="little-tour.component.ts" path="user-input/src/app/little-tour.component.ts">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
+
+## Summary
+
+You have mastered the basic primitives for responding to user input and gestures.
+
+These techniques are useful for small-scale demonstrations, but they
+quickly become verbose and clumsy when handling large amounts of user input.
+Two-way data binding is a more elegant and compact way to move
+values between data entry fields and model properties.
+The next page, `Forms`, explains how to write
+two-way bindings with `NgModel`.
diff --git a/aio/content/guide/visual-studio-2015.md b/aio/content/guide/visual-studio-2015.md
new file mode 100644
index 000000000000..87ac3ad1ca29
--- /dev/null
+++ b/aio/content/guide/visual-studio-2015.md
@@ -0,0 +1,315 @@
+# Visual Studio 2015 QuickStart
+
+{@a top}
+
+Some developers prefer Visual Studio as their Integrated Development Environment (IDE).
+
+This cookbook describes the steps required to set up and use the
+Angular QuickStart files in **Visual Studio 2015 within an ASP.NET 4.x project**.
+
+<div class="alert is-helpful">
+
+
+
+There is no *live example* for this cookbook because it describes Visual Studio, not 
+the QuickStart application itself.
+
+
+</div>
+
+
+{@a asp-net-4}
+
+## ASP.NET 4.x Project
+
+To set up the QuickStart files with an **ASP.NET 4.x project** in
+Visual Studio 2015, follow these steps:
+
+<div class="alert is-helpful">
+
+
+
+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/">ASP.NET Core + Angular template for Visual Studio 2015</a>. 
+Note that the resulting code does not map to the docs. Adjust accordingly.   
+
+
+</div>
+
+
+
+
+<h2 id='prereq1'>
+  Prerequisite: Node.js
+</h2>
+
+
+
+Install **[Node.js® and npm](https://nodejs.org/en/download/)**
+if they are not already on your machine.
+
+<div class="alert is-helpful">
+
+
+
+**Verify that you are running Node.js version `8.x` or greater, and npm `5.x` or greater**
+by running `node -v` and `npm -v` in a terminal window.
+Older versions produce errors.
+
+
+</div>
+
+
+
+
+<h2 id='prereq2'>
+  Prerequisite: Visual Studio 2015 Update 3
+</h2>
+
+
+
+The minimum requirement for developing Angular applications with Visual Studio is Update 3.
+Earlier versions do not follow the best practices for developing applications with TypeScript.
+To view your version of Visual Studio 2015, go to `Help | About Visual Studio`.
+
+If you don't have it, install **[Visual Studio 2015 Update 3](https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs)**.
+Or use `Tools | Extensions and Updates` to update to Update 3 directly from Visual Studio 2015.
+
+
+
+<h2 id='prereq3'>
+  Prerequisite: Configure External Web tools
+</h2>
+
+
+
+Configure Visual Studio to use the global external web tools instead of the tools that ship with Visual Studio:
+
+  * Open the **Options** dialog with `Tools` | `Options`.
+  * In the tree on the left, select `Projects and Solutions` | `External Web Tools`.
+  * On the right, move the `$(PATH)` entry above the `$(DevEnvDir`) entries. This tells Visual Studio to
+    use the external tools (such as npm) found in the global path before using its own version of the external tools.
+  * Click OK to close the dialog.
+  * Restart Visual Studio for this change to take effect.
+
+Visual Studio now looks first for external tools in the current workspace and 
+if it doesn't find them, it looks in the global path. If Visual Studio doesn't 
+find them in either location, it will use its own versions of the tools.
+
+
+
+<h2 id='prereq4'>
+  Prerequisite: Install TypeScript 2.2 for Visual Studio 2015
+</h2>
+
+
+
+While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with TypeScript 2.2, 
+which you need to develop Angular applications.
+
+To install TypeScript 2.2:
+
+ * Download and install **[TypeScript 2.2 for Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593)**
+
+ * OR install it with npm: `npm install -g typescript@2.2`.
+
+You can find out more about TypeScript 2.2 support in Visual studio **[here](https://blogs.msdn.microsoft.com/typescript/2017/02/22/announcing-typescript-2-2/)**.
+
+At this point, Visual Studio is ready. It’s a good idea to close Visual Studio and 
+restart it to make sure everything is clean.
+
+
+
+<h2 id='download'>
+  Step 1: Download the QuickStart files
+</h2>
+
+
+
+[Download the QuickStart source](https://github.com/angular/quickstart)
+from GitHub. If you downloaded as a zip file, extract the files.
+
+
+
+<h2 id='create-project'>
+  Step 2: Create the Visual Studio ASP.NET project
+</h2>
+
+
+
+Create the ASP.NET 4.x project in the usual way as follows:
+
+* In Visual Studio, select `File` | `New` | `Project` from the menu.
+* In the template tree, select `Templates` | `Visual C#` (or `Visual Basic`) | `Web`.
+* Select the `ASP.NET Web Application` template, give the project a name, and click OK.
+* Select the desired ASP.NET 4.5.2 template and click OK.
+
+
+<div class="alert is-helpful">
+
+
+
+This cookbook uses the `Empty` template with no added folders, 
+no authentication, and no hosting. Pick the template and options appropriate for your project.
+
+
+</div>
+
+
+
+
+<h2 id='copy'>
+  Step 3: Copy the QuickStart files into the ASP.NET project folder
+</h2>
+
+
+
+Copy the QuickStart files you downloaded from GitHub into the folder containing the `.csproj` file.
+Include the files in the Visual Studio project as follows:
+
+* Click the `Show All Files` button in Solution Explorer to reveal all of the hidden files in the project.
+* Right-click on each folder/file to be included in the project and select `Include in Project`.
+  Minimally, include the following folder/files:
+
+  * src/app folder (answer *No*  if asked to search for TypeScript Typings)
+  * src/styles.css
+  * src/index.html
+  * package.json
+  * src/tsconfig.json
+  
+
+
+<h2 id='restore'>
+  Step 4: Restore the required packages
+</h2>
+
+
+
+Restore the packages required for an Angular application as follows:
+
+* Right-click on the `package.json` file in Solution Explorer and select `Restore Packages`.
+  <br>This uses `npm` to install all of the packages defined in the `package.json` file. 
+  It may take some time.
+* If desired, open the Output window (`View` | `Output`) to watch the npm commands execute.
+* Ignore the warnings.
+* When the restore is finished, a message in the bottom message bar of Visual Studio 
+  should say: `Installing packages complete`. Be patient. This could take a while.
+* Click the `Refresh` icon in Solution Explorer.
+* **Do not** include the `node_modules` folder in the project. Let it be a hidden project folder.
+
+
+
+<h2 id='build-and-run'>
+  Step 5: Build and run the app
+</h2>
+
+
+
+First, ensure that `src/index.html` is set as the start page.
+Right-click `index.html` in Solution Explorer and select option `Set As Start Page`.
+
+### To run in VS with F5
+
+Most Visual Studio developers like to press the F5 key and see the IIS server come up. 
+To use the IIS server with the QuickStart app, you must make the following three changes. 
+
+1. In `index.html`, change base href from `<base href="/">` to `<base href="/src/">`.
+2. Also in `index.html`, change  the scripts to use `/node_modules` with a slash 
+instead of `node_modules` without the slash. 
+3. In `src/systemjs.config.js`, near the top of the file, 
+change the npm `path` to `/node_modules/` with a slash.
+
+
+<div class="alert is-important">
+
+
+
+After these changes, `npm start` no longer works.
+You must choose to configure _either_ for F5 with IIS _or_ for  `npm start` with the lite-server.
+
+
+</div>
+
+
+
+### For apps that use routing
+
+If your app uses routing, you need to teach the server to always return 
+`index.html` when the user asks for an HTML page
+for reasons explained in the [Deployment](guide/deployment#fallback) guide.
+
+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 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.
+The `lite-server` development server does out-of-the-box.
+If you've switched over to F5 and IIS, you have to configure IIS to do it.
+This section walks through the steps to adapt the QuickStart application.
+
+#### Configure IIS rewrite rules
+
+Visual Studio ships with IIS Express, which has the rewrite module baked in. 
+However, if you're using regular IIS you'll have to install the rewrite 
+module.  
+
+Tell Visual Studio how to handle requests for route app pages by adding these 
+rewrite rules near the bottom of the `web.config`:
+
+
+<code-example format='.'>
+  &lt;system.webServer&gt;
+    &lt;rewrite&gt;
+      &lt;rules&gt;
+        &lt;rule name="Angular Routes" stopProcessing="true"&gt;
+          &lt;match url=".*" /&gt;
+          &lt;conditions logicalGrouping="MatchAll"&gt;
+            &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt;
+            &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt;
+          &lt;/conditions&gt;
+          &lt;action type="Rewrite" url="/src/" /&gt;
+        &lt;/rule&gt;
+      &lt;/rules&gt;
+    &lt;/rewrite&gt;
+  &lt;/system.webServer&gt;
+
+</code-example>
+
+
+
+<div class="alert is-helpful">
+
+
+
+The match url, `<match url=".*" />`, will rewrite every request. You'll have to adjust this if 
+you want some requests to get through, such as web API requests. 
+
+The URL in `<action type="Rewrite" url="/src/"/>` should 
+match the base href in `index.html`.
+
+
+</div>
+
+
+
+Build and launch the app with debugger by clicking the **Run** button or by pressing `F5`.
+
+
+<div class="alert is-helpful">
+
+
+
+It's faster to run without the debugger by pressing `Ctrl-F5`.
+
+</div>
+
+
+
+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. 
diff --git a/aio/content/images/bios/_no-one.jpg b/aio/content/images/bios/_no-one.jpg
new file mode 100644
index 000000000000..74c5dfe5d83f
Binary files /dev/null and b/aio/content/images/bios/_no-one.jpg differ
diff --git a/aio/content/images/bios/alainchautard.png b/aio/content/images/bios/alainchautard.png
new file mode 100644
index 000000000000..214cd836dc67
Binary files /dev/null and b/aio/content/images/bios/alainchautard.png differ
diff --git a/aio/content/images/bios/alex-eagle.jpg b/aio/content/images/bios/alex-eagle.jpg
new file mode 100644
index 000000000000..773167246623
Binary files /dev/null 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
new file mode 100644
index 000000000000..ec22c6aa227d
Binary files /dev/null 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
new file mode 100644
index 000000000000..7746786b0f8c
Binary files /dev/null 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
new file mode 100644
index 000000000000..e69d674eb157
Binary files /dev/null and b/aio/content/images/bios/ali.jpg differ
diff --git a/aio/content/images/bios/amcdnl.jpeg b/aio/content/images/bios/amcdnl.jpeg
new file mode 100644
index 000000000000..38c100df949e
Binary files /dev/null and b/aio/content/images/bios/amcdnl.jpeg differ
diff --git a/aio/content/images/bios/andrewseguin.jpg b/aio/content/images/bios/andrewseguin.jpg
new file mode 100755
index 000000000000..642a8437ef95
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 000000000000..6d25b2acaa0e
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
new file mode 100644
index 000000000000..19b7949a1bc1
Binary files /dev/null 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
new file mode 100644
index 000000000000..23e228d68cd4
Binary files /dev/null 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 000000000000..2aa6d12bc148
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 000000000000..6800b072731a
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
new file mode 100644
index 000000000000..fbb51a579aeb
Binary files /dev/null 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 000000000000..90d322800415
Binary files /dev/null and b/aio/content/images/bios/cironunes.jpg differ
diff --git a/aio/content/images/bios/cory-rylan.jpg b/aio/content/images/bios/cory-rylan.jpg
new file mode 100644
index 000000000000..c9410f3241b9
Binary files /dev/null and b/aio/content/images/bios/cory-rylan.jpg differ
diff --git a/aio/content/images/bios/crisbeto.jpg b/aio/content/images/bios/crisbeto.jpg
new file mode 100644
index 000000000000..02ea5630927e
Binary files /dev/null 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 000000000000..ae3d7c23fa49
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
new file mode 100644
index 000000000000..bcbd59fe61cd
Binary files /dev/null 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
new file mode 100755
index 000000000000..f09fa3f8609c
Binary files /dev/null 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
new file mode 100644
index 000000000000..0f19a8708543
Binary files /dev/null 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
new file mode 100644
index 000000000000..87eb09fda9b5
Binary files /dev/null and b/aio/content/images/bios/eladbezalel.jpg differ
diff --git a/aio/content/images/bios/elanaolson.jpg b/aio/content/images/bios/elanaolson.jpg
new file mode 100644
index 000000000000..3c8d4ec6298b
Binary files /dev/null and b/aio/content/images/bios/elanaolson.jpg differ
diff --git a/aio/content/images/bios/eric.jpg b/aio/content/images/bios/eric.jpg
new file mode 100644
index 000000000000..d9d81b92edfe
Binary files /dev/null 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
new file mode 100644
index 000000000000..222164324a1f
Binary files /dev/null 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 000000000000..ef48442c55c3
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
new file mode 100644
index 000000000000..9908293f781f
Binary files /dev/null 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 000000000000..79a3109ab598
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
new file mode 100644
index 000000000000..5c6465f681da
Binary files /dev/null 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
new file mode 100644
index 000000000000..726fc4d95cde
Binary files /dev/null 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
new file mode 100644
index 000000000000..2fc7883c0a9a
Binary files /dev/null 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
new file mode 100644
index 000000000000..2c6f39e9f489
Binary files /dev/null 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
new file mode 100644
index 000000000000..d6b83f8aa5e1
Binary files /dev/null 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 000000000000..95f8d4158e4f
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
new file mode 100644
index 000000000000..fec99139f355
Binary files /dev/null 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
new file mode 100755
index 000000000000..44f6f4072e01
Binary files /dev/null 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
new file mode 100644
index 000000000000..0ffdbfe7a2f6
Binary files /dev/null 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 000000000000..a47082fd1a4b
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
new file mode 100644
index 000000000000..2fd79480afaa
Binary files /dev/null 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 000000000000..f4758861f31a
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
new file mode 100644
index 000000000000..c03d5665e693
Binary files /dev/null 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 000000000000..b9a760b2129d
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 000000000000..99a2f87f389b
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
new file mode 100644
index 000000000000..8fe284cc5555
Binary files /dev/null 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
new file mode 100644
index 000000000000..4585dadcb3fb
Binary files /dev/null and b/aio/content/images/bios/julie-ralph.jpg differ
diff --git a/aio/content/images/bios/juristr.jpg b/aio/content/images/bios/juristr.jpg
new file mode 100644
index 000000000000..be3df97e0174
Binary files /dev/null and b/aio/content/images/bios/juristr.jpg differ
diff --git a/aio/content/images/bios/kapunahelewong.jpg b/aio/content/images/bios/kapunahelewong.jpg
new file mode 100644
index 000000000000..ce57726435dc
Binary files /dev/null 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
new file mode 100644
index 000000000000..ba2ebba28a1a
Binary files /dev/null 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
new file mode 100644
index 000000000000..18c40777c010
Binary files /dev/null and b/aio/content/images/bios/kathy.jpg differ
diff --git a/aio/content/images/bios/kevinyang.jpg b/aio/content/images/bios/kevinyang.jpg
new file mode 100644
index 000000000000..905e9b8962fc
Binary files /dev/null and b/aio/content/images/bios/kevinyang.jpg differ
diff --git a/aio/content/images/bios/kimmaida.jpg b/aio/content/images/bios/kimmaida.jpg
new file mode 100644
index 000000000000..735240bc9a88
Binary files /dev/null and b/aio/content/images/bios/kimmaida.jpg differ
diff --git a/aio/content/images/bios/lucas.jpg b/aio/content/images/bios/lucas.jpg
new file mode 100644
index 000000000000..f891ac13fe6e
Binary files /dev/null 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 000000000000..4d0ff1abd1cc
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
new file mode 100644
index 000000000000..e52456ec28e2
Binary files /dev/null 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
new file mode 100644
index 000000000000..ae69f2111ede
Binary files /dev/null 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
new file mode 100644
index 000000000000..4648b341f7e6
Binary files /dev/null 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
new file mode 100644
index 000000000000..e80ba5b76f39
Binary files /dev/null and b/aio/content/images/bios/martinstaffa.jpg differ
diff --git a/aio/content/images/bios/mashhood.jpg b/aio/content/images/bios/mashhood.jpg
new file mode 100644
index 000000000000..0ce1a828b4ff
Binary files /dev/null and b/aio/content/images/bios/mashhood.jpg differ
diff --git a/aio/content/images/bios/matias.jpg b/aio/content/images/bios/matias.jpg
new file mode 100644
index 000000000000..0342dd22d162
Binary files /dev/null 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
new file mode 100644
index 000000000000..c1a2fdfe4b84
Binary files /dev/null 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 000000000000..8ed64f9cc7db
Binary files /dev/null and b/aio/content/images/bios/maximsalnikov.jpg differ
diff --git a/aio/content/images/bios/mhartington.png b/aio/content/images/bios/mhartington.png
new file mode 100644
index 000000000000..4127ca3534ae
Binary files /dev/null and b/aio/content/images/bios/mhartington.png differ
diff --git a/aio/content/images/bios/michaelprentice.jpg b/aio/content/images/bios/michaelprentice.jpg
new file mode 100755
index 000000000000..337b33a06c9e
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
new file mode 100644
index 000000000000..0d0c75ec2a54
Binary files /dev/null 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 000000000000..f16bc41ff937
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 000000000000..773fe3ee5aac
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
new file mode 100755
index 000000000000..fd63309e6b35
Binary files /dev/null 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 000000000000..5997c18af13b
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
new file mode 100644
index 000000000000..c168ef7162db
Binary files /dev/null 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
new file mode 100644
index 000000000000..efd1d185ef19
Binary files /dev/null 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
new file mode 100644
index 000000000000..d611951e8bed
Binary files /dev/null and b/aio/content/images/bios/naomi.jpg differ
diff --git a/aio/content/images/bios/nirkaufman.jpg b/aio/content/images/bios/nirkaufman.jpg
new file mode 100644
index 000000000000..59e2444a4ccd
Binary files /dev/null and b/aio/content/images/bios/nirkaufman.jpg differ
diff --git a/aio/content/images/bios/ocombe.jpg b/aio/content/images/bios/ocombe.jpg
new file mode 100755
index 000000000000..a2bc4fc9a0c6
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
new file mode 100755
index 000000000000..0db15223aedd
Binary files /dev/null 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
new file mode 100644
index 000000000000..c856cb5b8fd5
Binary files /dev/null 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
new file mode 100644
index 000000000000..70322553c841
Binary files /dev/null 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
new file mode 100644
index 000000000000..fc1321f9b787
Binary files /dev/null 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
new file mode 100644
index 000000000000..ac39fc18b01b
Binary files /dev/null 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
new file mode 100644
index 000000000000..911ea5505b02
Binary files /dev/null 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 000000000000..b1133dfee9c4
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
new file mode 100644
index 000000000000..2e5529d67151
Binary files /dev/null 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
new file mode 100644
index 000000000000..7b3f1bf6b19b
Binary files /dev/null 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
new file mode 100644
index 000000000000..4d275bf2c724
Binary files /dev/null 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
new file mode 100644
index 000000000000..45113ea634d1
Binary files /dev/null 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 000000000000..a5be9b02a6da
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
new file mode 100644
index 000000000000..f80680564d02
Binary files /dev/null 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
new file mode 100644
index 000000000000..0fabe66e4227
Binary files /dev/null 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 000000000000..442a53d09666
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
new file mode 100644
index 000000000000..3f590d68720a
Binary files /dev/null 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 000000000000..e0f8892330c6
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
new file mode 100644
index 000000000000..b0d95942bf32
Binary files /dev/null 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 000000000000..56ede168c2a0
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
new file mode 100644
index 000000000000..175be9e860cd
Binary files /dev/null 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 000000000000..1a57f41fe8af
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
new file mode 100644
index 000000000000..1fdbda575b93
Binary files /dev/null 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
new file mode 100644
index 000000000000..5fa0e3c61809
Binary files /dev/null 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 000000000000..522e24dbbf27
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
new file mode 100644
index 000000000000..4a22c874fffc
Binary files /dev/null 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
new file mode 100644
index 000000000000..a3a365313713
Binary files /dev/null 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
new file mode 100644
index 000000000000..fc4b2e089b64
Binary files /dev/null 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 000000000000..c838e0cecf85
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
new file mode 100644
index 000000000000..54d6a7c44efd
Binary files /dev/null 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
new file mode 100644
index 000000000000..654c9cf72836
Binary files /dev/null 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 000000000000..54224ffa8545
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
new file mode 100644
index 000000000000..e2494eaf41d3
Binary files /dev/null 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 000000000000..f32143f4b892
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 000000000000..108bb2c29520
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
new file mode 100644
index 000000000000..770ccd8bc923
Binary files /dev/null and b/aio/content/images/bios/xiaofei.jpg differ
diff --git a/aio/content/images/guide/animations/animation_auto.gif b/aio/content/images/guide/animations/animation_auto.gif
new file mode 100644
index 000000000000..6cda09ad6988
Binary files /dev/null and b/aio/content/images/guide/animations/animation_auto.gif differ
diff --git a/aio/content/images/guide/animations/animation_basic_click.gif b/aio/content/images/guide/animations/animation_basic_click.gif
new file mode 100644
index 000000000000..2cfc19ab9ef1
Binary files /dev/null and b/aio/content/images/guide/animations/animation_basic_click.gif differ
diff --git a/aio/content/images/guide/animations/animation_enter_leave.gif b/aio/content/images/guide/animations/animation_enter_leave.gif
new file mode 100644
index 000000000000..0a72694888c4
Binary files /dev/null and b/aio/content/images/guide/animations/animation_enter_leave.gif differ
diff --git a/aio/content/images/guide/animations/animation_enter_leave_states.gif b/aio/content/images/guide/animations/animation_enter_leave_states.gif
new file mode 100644
index 000000000000..5f4ec9c5847a
Binary files /dev/null and b/aio/content/images/guide/animations/animation_enter_leave_states.gif differ
diff --git a/aio/content/images/guide/animations/animation_groups.gif b/aio/content/images/guide/animations/animation_groups.gif
new file mode 100644
index 000000000000..85ce40f6f6cb
Binary files /dev/null and b/aio/content/images/guide/animations/animation_groups.gif differ
diff --git a/aio/content/images/guide/animations/animation_multistep.gif b/aio/content/images/guide/animations/animation_multistep.gif
new file mode 100644
index 000000000000..df569ec358dd
Binary files /dev/null and b/aio/content/images/guide/animations/animation_multistep.gif differ
diff --git a/aio/content/images/guide/animations/animation_timings.gif b/aio/content/images/guide/animations/animation_timings.gif
new file mode 100644
index 000000000000..8173b25f6daf
Binary files /dev/null and b/aio/content/images/guide/animations/animation_timings.gif differ
diff --git a/aio/content/images/guide/animations/ng_animate_transitions_inactive_active.png b/aio/content/images/guide/animations/ng_animate_transitions_inactive_active.png
new file mode 100644
index 000000000000..a2479e37d895
Binary files /dev/null and b/aio/content/images/guide/animations/ng_animate_transitions_inactive_active.png differ
diff --git a/aio/content/images/guide/animations/ng_animate_transitions_inactive_active_void.png b/aio/content/images/guide/animations/ng_animate_transitions_inactive_active_void.png
new file mode 100644
index 000000000000..abeecc827ef5
Binary files /dev/null and b/aio/content/images/guide/animations/ng_animate_transitions_inactive_active_void.png differ
diff --git a/aio/content/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png b/aio/content/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png
new file mode 100644
index 000000000000..14e9848e75fd
Binary files /dev/null and b/aio/content/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png differ
diff --git a/aio/content/images/guide/animations/ng_animate_transitions_void_in.png b/aio/content/images/guide/animations/ng_animate_transitions_void_in.png
new file mode 100644
index 000000000000..b591845e0b90
Binary files /dev/null and b/aio/content/images/guide/animations/ng_animate_transitions_void_in.png differ
diff --git a/aio/content/images/guide/application-under-test/bongos-heroes.png b/aio/content/images/guide/application-under-test/bongos-heroes.png
new file mode 100644
index 000000000000..17e4861d8e7b
Binary files /dev/null and b/aio/content/images/guide/application-under-test/bongos-heroes.png differ
diff --git a/aio/content/images/guide/architecture/airplane.png b/aio/content/images/guide/architecture/airplane.png
new file mode 100644
index 000000000000..d8e43ea29aec
Binary files /dev/null and b/aio/content/images/guide/architecture/airplane.png differ
diff --git a/aio/content/images/guide/architecture/compilation-context.png b/aio/content/images/guide/architecture/compilation-context.png
new file mode 100644
index 000000000000..1fdff5028541
Binary files /dev/null and b/aio/content/images/guide/architecture/compilation-context.png differ
diff --git a/aio/content/images/guide/architecture/component-databinding.png b/aio/content/images/guide/architecture/component-databinding.png
new file mode 100644
index 000000000000..e93a94ae9b49
Binary files /dev/null and b/aio/content/images/guide/architecture/component-databinding.png differ
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 000000000000..6e9de391d860
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 000000000000..85f068adbe1d
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 000000000000..385d1f976d72
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 000000000000..576c159868c0
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 000000000000..26323f4269a3
Binary files /dev/null and b/aio/content/images/guide/architecture/hero-component.png differ
diff --git a/aio/content/images/guide/architecture/injector-injects.png b/aio/content/images/guide/architecture/injector-injects.png
new file mode 100644
index 000000000000..e3ebfa0f4758
Binary files /dev/null and b/aio/content/images/guide/architecture/injector-injects.png differ
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 000000000000..770771a99295
Binary files /dev/null and b/aio/content/images/guide/architecture/library-module.png differ
diff --git a/aio/content/images/guide/architecture/metadata.png b/aio/content/images/guide/architecture/metadata.png
new file mode 100644
index 000000000000..ccace68957c1
Binary files /dev/null and b/aio/content/images/guide/architecture/metadata.png differ
diff --git a/aio/content/images/guide/architecture/module.png b/aio/content/images/guide/architecture/module.png
new file mode 100644
index 000000000000..6a0b6bc18775
Binary files /dev/null and b/aio/content/images/guide/architecture/module.png differ
diff --git a/aio/content/images/guide/architecture/modules.png b/aio/content/images/guide/architecture/modules.png
new file mode 100644
index 000000000000..1f0b6fa2a127
Binary files /dev/null and b/aio/content/images/guide/architecture/modules.png differ
diff --git a/aio/content/images/guide/architecture/overview.png b/aio/content/images/guide/architecture/overview.png
new file mode 100644
index 000000000000..700bb128fefc
Binary files /dev/null and b/aio/content/images/guide/architecture/overview.png differ
diff --git a/aio/content/images/guide/architecture/overview2.png b/aio/content/images/guide/architecture/overview2.png
new file mode 100644
index 000000000000..44c87d354936
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 000000000000..d55d0a45dd6f
Binary files /dev/null and b/aio/content/images/guide/architecture/parent-child-binding.png differ
diff --git a/aio/content/images/guide/architecture/service.png b/aio/content/images/guide/architecture/service.png
new file mode 100644
index 000000000000..7f62f44c36f1
Binary files /dev/null and b/aio/content/images/guide/architecture/service.png differ
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 000000000000..585c0c316088
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 000000000000..5aa872ec3141
Binary files /dev/null and b/aio/content/images/guide/architecture/template.png differ
diff --git a/aio/content/images/guide/architecture/view-hierarchy.png b/aio/content/images/guide/architecture/view-hierarchy.png
new file mode 100644
index 000000000000..1127e48f2e05
Binary files /dev/null and b/aio/content/images/guide/architecture/view-hierarchy.png differ
diff --git a/aio/content/images/guide/attribute-directives/first-highlight.png b/aio/content/images/guide/attribute-directives/first-highlight.png
new file mode 100644
index 000000000000..1117ef04330a
Binary files /dev/null and b/aio/content/images/guide/attribute-directives/first-highlight.png differ
diff --git a/aio/content/images/guide/attribute-directives/highlight-directive-anim.gif b/aio/content/images/guide/attribute-directives/highlight-directive-anim.gif
new file mode 100644
index 000000000000..16e2a3befd10
Binary files /dev/null and b/aio/content/images/guide/attribute-directives/highlight-directive-anim.gif differ
diff --git a/aio/content/images/guide/attribute-directives/highlight-directive-final-anim.gif b/aio/content/images/guide/attribute-directives/highlight-directive-final-anim.gif
new file mode 100644
index 000000000000..6c514a447bb3
Binary files /dev/null and b/aio/content/images/guide/attribute-directives/highlight-directive-final-anim.gif differ
diff --git a/aio/content/images/guide/attribute-directives/highlight-directive-v2-anim.gif b/aio/content/images/guide/attribute-directives/highlight-directive-v2-anim.gif
new file mode 100644
index 000000000000..cd3204587f45
Binary files /dev/null and b/aio/content/images/guide/attribute-directives/highlight-directive-v2-anim.gif differ
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 000000000000..e243c4a0afbc
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 000000000000..54152d12872b
Binary files /dev/null and b/aio/content/images/guide/cli-quickstart/my-first-app.png differ
diff --git a/aio/content/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png b/aio/content/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png
new file mode 100644
index 000000000000..73716bc6a0ae
Binary files /dev/null and b/aio/content/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png differ
diff --git a/aio/content/images/guide/component-interaction/bidirectional-service.gif b/aio/content/images/guide/component-interaction/bidirectional-service.gif
new file mode 100644
index 000000000000..a0d8c07dd122
Binary files /dev/null and b/aio/content/images/guide/component-interaction/bidirectional-service.gif differ
diff --git a/aio/content/images/guide/component-interaction/child-to-parent.gif b/aio/content/images/guide/component-interaction/child-to-parent.gif
new file mode 100644
index 000000000000..05225d09a5cc
Binary files /dev/null and b/aio/content/images/guide/component-interaction/child-to-parent.gif differ
diff --git a/aio/content/images/guide/component-interaction/contentchildren.png b/aio/content/images/guide/component-interaction/contentchildren.png
new file mode 100644
index 000000000000..5128f2a601ff
Binary files /dev/null and b/aio/content/images/guide/component-interaction/contentchildren.png differ
diff --git a/aio/content/images/guide/component-interaction/countdown-timer-anim.gif b/aio/content/images/guide/component-interaction/countdown-timer-anim.gif
new file mode 100644
index 000000000000..d225b9df16e8
Binary files /dev/null and b/aio/content/images/guide/component-interaction/countdown-timer-anim.gif differ
diff --git a/aio/content/images/guide/component-interaction/parent-to-child-on-changes.gif b/aio/content/images/guide/component-interaction/parent-to-child-on-changes.gif
new file mode 100644
index 000000000000..debccd944882
Binary files /dev/null and b/aio/content/images/guide/component-interaction/parent-to-child-on-changes.gif differ
diff --git a/aio/content/images/guide/component-interaction/parent-to-child.png b/aio/content/images/guide/component-interaction/parent-to-child.png
new file mode 100644
index 000000000000..417219b0fac9
Binary files /dev/null and b/aio/content/images/guide/component-interaction/parent-to-child.png differ
diff --git a/aio/content/images/guide/component-interaction/setter.png b/aio/content/images/guide/component-interaction/setter.png
new file mode 100644
index 000000000000..5215504f5d54
Binary files /dev/null and b/aio/content/images/guide/component-interaction/setter.png differ
diff --git a/aio/content/images/guide/component-interaction/unrelated-service.gif b/aio/content/images/guide/component-interaction/unrelated-service.gif
new file mode 100644
index 000000000000..cfa92270e2eb
Binary files /dev/null and b/aio/content/images/guide/component-interaction/unrelated-service.gif differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/alex.png b/aio/content/images/guide/dependency-injection-in-action/alex.png
new file mode 100644
index 000000000000..2ea0a2d82897
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/alex.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/alice.png b/aio/content/images/guide/dependency-injection-in-action/alice.png
new file mode 100644
index 000000000000..219df8d90183
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/alice.png differ
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 000000000000..204b7260ce4e
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/date-logger-entry.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/hero-bio-and-content.png b/aio/content/images/guide/dependency-injection-in-action/hero-bio-and-content.png
new file mode 100644
index 000000000000..f06a0f0aecbc
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/hero-bio-and-content.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png b/aio/content/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png
new file mode 100644
index 000000000000..f526892e144f
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png b/aio/content/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png
new file mode 100644
index 000000000000..ff199d229e36
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/hero-bios.png b/aio/content/images/guide/dependency-injection-in-action/hero-bios.png
new file mode 100644
index 000000000000..814a500b1f33
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/hero-bios.png differ
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 000000000000..532f5c3ab2e9
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/hero-of-month.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/highlight.png b/aio/content/images/guide/dependency-injection-in-action/highlight.png
new file mode 100644
index 000000000000..ecccb129fe12
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/highlight.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/logged-in-user.png b/aio/content/images/guide/dependency-injection-in-action/logged-in-user.png
new file mode 100644
index 000000000000..712fec8436b8
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/logged-in-user.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png b/aio/content/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png
new file mode 100644
index 000000000000..95be33dd6434
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/sorted-heroes.png b/aio/content/images/guide/dependency-injection-in-action/sorted-heroes.png
new file mode 100644
index 000000000000..8b658d41a4a0
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/sorted-heroes.png differ
diff --git a/aio/content/images/guide/dependency-injection/car-components.png b/aio/content/images/guide/dependency-injection/car-components.png
new file mode 100644
index 000000000000..9d480c3c7ff8
Binary files /dev/null and b/aio/content/images/guide/dependency-injection/car-components.png differ
diff --git a/aio/content/images/guide/dependency-injection/component-hierarchy.png b/aio/content/images/guide/dependency-injection/component-hierarchy.png
new file mode 100644
index 000000000000..22bf0ee9f27f
Binary files /dev/null and b/aio/content/images/guide/dependency-injection/component-hierarchy.png differ
diff --git a/aio/content/images/guide/dependency-injection/hid-heroes-anim.gif b/aio/content/images/guide/dependency-injection/hid-heroes-anim.gif
new file mode 100644
index 000000000000..7d41a6e088d4
Binary files /dev/null and b/aio/content/images/guide/dependency-injection/hid-heroes-anim.gif differ
diff --git a/aio/content/images/guide/dependency-injection/injector-tree.png b/aio/content/images/guide/dependency-injection/injector-tree.png
new file mode 100644
index 000000000000..379b1b4ca4e3
Binary files /dev/null and b/aio/content/images/guide/dependency-injection/injector-tree.png differ
diff --git a/aio/content/images/guide/displaying-data/final.png b/aio/content/images/guide/displaying-data/final.png
new file mode 100644
index 000000000000..25146f2988f0
Binary files /dev/null and b/aio/content/images/guide/displaying-data/final.png differ
diff --git a/aio/content/images/guide/displaying-data/hero-names-list.png b/aio/content/images/guide/displaying-data/hero-names-list.png
new file mode 100644
index 000000000000..84f4c74b3550
Binary files /dev/null and b/aio/content/images/guide/displaying-data/hero-names-list.png differ
diff --git a/aio/content/images/guide/displaying-data/title-and-hero.png b/aio/content/images/guide/displaying-data/title-and-hero.png
new file mode 100644
index 000000000000..0762ff2b0ad6
Binary files /dev/null and b/aio/content/images/guide/displaying-data/title-and-hero.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 000000000000..d8e43ea29aec
Binary files /dev/null and b/aio/content/images/guide/docs-style-guide/flying-hero.png differ
diff --git a/aio/content/images/guide/docs-style-guide/toh-pt6-bundle-700w.png b/aio/content/images/guide/docs-style-guide/toh-pt6-bundle-700w.png
new file mode 100644
index 000000000000..d94cd854c0c8
Binary files /dev/null and b/aio/content/images/guide/docs-style-guide/toh-pt6-bundle-700w.png differ
diff --git a/aio/content/images/guide/docs-style-guide/toh-pt6-bundle.png b/aio/content/images/guide/docs-style-guide/toh-pt6-bundle.png
new file mode 100644
index 000000000000..fa5f4a3e9032
Binary files /dev/null and b/aio/content/images/guide/docs-style-guide/toh-pt6-bundle.png differ
diff --git a/aio/content/images/guide/dynamic-component-loader/ads.gif b/aio/content/images/guide/dynamic-component-loader/ads.gif
new file mode 100644
index 000000000000..f7a990fb1130
Binary files /dev/null and b/aio/content/images/guide/dynamic-component-loader/ads.gif differ
diff --git a/aio/content/images/guide/dynamic-form/dynamic-form.png b/aio/content/images/guide/dynamic-form/dynamic-form.png
new file mode 100644
index 000000000000..bd33f9d34e04
Binary files /dev/null and b/aio/content/images/guide/dynamic-form/dynamic-form.png differ
diff --git a/aio/content/images/guide/elements/createElement.png b/aio/content/images/guide/elements/createElement.png
new file mode 100644
index 000000000000..1c1ea8d1ea60
Binary files /dev/null and b/aio/content/images/guide/elements/createElement.png differ
diff --git a/aio/content/images/guide/elements/customElement1.png b/aio/content/images/guide/elements/customElement1.png
new file mode 100644
index 000000000000..6be2f262a4a6
Binary files /dev/null and b/aio/content/images/guide/elements/customElement1.png differ
diff --git a/aio/content/images/guide/feature-modules/feature-module.png b/aio/content/images/guide/feature-modules/feature-module.png
new file mode 100644
index 000000000000..9faec0e71dc2
Binary files /dev/null and b/aio/content/images/guide/feature-modules/feature-module.png differ
diff --git a/aio/content/images/guide/first-app-tests/Jasmine-not-running-tests.png b/aio/content/images/guide/first-app-tests/Jasmine-not-running-tests.png
new file mode 100644
index 000000000000..777dc7632c51
Binary files /dev/null and b/aio/content/images/guide/first-app-tests/Jasmine-not-running-tests.png differ
diff --git a/aio/content/images/guide/first-app-tests/passed-2-specs-0-failures.png b/aio/content/images/guide/first-app-tests/passed-2-specs-0-failures.png
new file mode 100644
index 000000000000..1c0dbb680d2a
Binary files /dev/null and b/aio/content/images/guide/first-app-tests/passed-2-specs-0-failures.png differ
diff --git a/aio/content/images/guide/first-app-tests/test-passed-once-again.png b/aio/content/images/guide/first-app-tests/test-passed-once-again.png
new file mode 100644
index 000000000000..258c0dd390cb
Binary files /dev/null and b/aio/content/images/guide/first-app-tests/test-passed-once-again.png differ
diff --git a/aio/content/images/guide/form-validation/plunker.png b/aio/content/images/guide/form-validation/plunker.png
new file mode 100644
index 000000000000..c1fd3eed096b
Binary files /dev/null and b/aio/content/images/guide/form-validation/plunker.png differ
diff --git a/aio/content/images/guide/forms/control-state-transitions-anim.gif b/aio/content/images/guide/forms/control-state-transitions-anim.gif
new file mode 100644
index 000000000000..48ce7805af98
Binary files /dev/null and b/aio/content/images/guide/forms/control-state-transitions-anim.gif differ
diff --git a/aio/content/images/guide/forms/hero-form-1.png b/aio/content/images/guide/forms/hero-form-1.png
new file mode 100644
index 000000000000..bcb59e20577d
Binary files /dev/null and b/aio/content/images/guide/forms/hero-form-1.png differ
diff --git a/aio/content/images/guide/forms/hero-form-2.png b/aio/content/images/guide/forms/hero-form-2.png
new file mode 100644
index 000000000000..f0ebeef4fefe
Binary files /dev/null and b/aio/content/images/guide/forms/hero-form-2.png differ
diff --git a/aio/content/images/guide/forms/hero-form-3.png b/aio/content/images/guide/forms/hero-form-3.png
new file mode 100644
index 000000000000..449b5899e66d
Binary files /dev/null and b/aio/content/images/guide/forms/hero-form-3.png differ
diff --git a/aio/content/images/guide/forms/hf-4.png b/aio/content/images/guide/forms/hf-4.png
new file mode 100644
index 000000000000..bcb768fa1b75
Binary files /dev/null and b/aio/content/images/guide/forms/hf-4.png differ
diff --git a/aio/content/images/guide/forms/hf-5.png b/aio/content/images/guide/forms/hf-5.png
new file mode 100644
index 000000000000..b52102cbd9c2
Binary files /dev/null and b/aio/content/images/guide/forms/hf-5.png differ
diff --git a/aio/content/images/guide/forms/name-required-error.png b/aio/content/images/guide/forms/name-required-error.png
new file mode 100644
index 000000000000..115cbd62ced3
Binary files /dev/null and b/aio/content/images/guide/forms/name-required-error.png differ
diff --git a/aio/content/images/guide/forms/ng-control-class-changes.png b/aio/content/images/guide/forms/ng-control-class-changes.png
new file mode 100644
index 000000000000..0cb4911389c2
Binary files /dev/null and b/aio/content/images/guide/forms/ng-control-class-changes.png differ
diff --git a/aio/content/images/guide/forms/ng-model-in-action-2.png b/aio/content/images/guide/forms/ng-model-in-action-2.png
new file mode 100644
index 000000000000..62b21297d65c
Binary files /dev/null and b/aio/content/images/guide/forms/ng-model-in-action-2.png differ
diff --git a/aio/content/images/guide/forms/ng-model-in-action.png b/aio/content/images/guide/forms/ng-model-in-action.png
new file mode 100644
index 000000000000..46a19bd24cab
Binary files /dev/null and b/aio/content/images/guide/forms/ng-model-in-action.png differ
diff --git a/aio/content/images/guide/forms/tdf-1.png b/aio/content/images/guide/forms/tdf-1.png
new file mode 100644
index 000000000000..7ea98616aeb8
Binary files /dev/null and b/aio/content/images/guide/forms/tdf-1.png differ
diff --git a/aio/content/images/guide/forms/tdf-2.png b/aio/content/images/guide/forms/tdf-2.png
new file mode 100644
index 000000000000..8322d2a49040
Binary files /dev/null and b/aio/content/images/guide/forms/tdf-2.png differ
diff --git a/aio/content/images/guide/forms/tdf-3.png b/aio/content/images/guide/forms/tdf-3.png
new file mode 100644
index 000000000000..b4242ef5838e
Binary files /dev/null and b/aio/content/images/guide/forms/tdf-3.png differ
diff --git a/aio/content/images/guide/forms/tdf-4.png b/aio/content/images/guide/forms/tdf-4.png
new file mode 100644
index 000000000000..d5c1b1920c33
Binary files /dev/null and b/aio/content/images/guide/forms/tdf-4.png differ
diff --git a/aio/content/images/guide/forms/tdf-5.png b/aio/content/images/guide/forms/tdf-5.png
new file mode 100644
index 000000000000..029a82468f47
Binary files /dev/null and b/aio/content/images/guide/forms/tdf-5.png differ
diff --git a/aio/content/images/guide/forms/validity-required-indicator.png b/aio/content/images/guide/forms/validity-required-indicator.png
new file mode 100644
index 000000000000..25f7571e436c
Binary files /dev/null and b/aio/content/images/guide/forms/validity-required-indicator.png differ
diff --git a/aio/content/images/guide/frequent-ngmodules/browser-module-error.gif b/aio/content/images/guide/frequent-ngmodules/browser-module-error.gif
new file mode 100644
index 000000000000..f84dc081642b
Binary files /dev/null and b/aio/content/images/guide/frequent-ngmodules/browser-module-error.gif differ
diff --git a/aio/content/images/guide/http/hero-list.png b/aio/content/images/guide/http/hero-list.png
new file mode 100644
index 000000000000..e5aee3cdb330
Binary files /dev/null and b/aio/content/images/guide/http/hero-list.png differ
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 000000000000..f07c364aaf22
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 000000000000..4c32ad1d647e
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 000000000000..72b32d5aa251
Binary files /dev/null and b/aio/content/images/guide/http/wiki-2.gif differ
diff --git a/aio/content/images/guide/intro/people.png b/aio/content/images/guide/intro/people.png
new file mode 100644
index 000000000000..64efccfe079d
Binary files /dev/null and b/aio/content/images/guide/intro/people.png differ
diff --git a/aio/content/images/guide/jasmine-testing-101/jasmine-1-spec-0-failures.png b/aio/content/images/guide/jasmine-testing-101/jasmine-1-spec-0-failures.png
new file mode 100644
index 000000000000..6115a865a3bb
Binary files /dev/null and b/aio/content/images/guide/jasmine-testing-101/jasmine-1-spec-0-failures.png differ
diff --git a/aio/content/images/guide/jasmine-testing-101/null-to-equal-undefined.png b/aio/content/images/guide/jasmine-testing-101/null-to-equal-undefined.png
new file mode 100644
index 000000000000..5f7a7bd847e3
Binary files /dev/null and b/aio/content/images/guide/jasmine-testing-101/null-to-equal-undefined.png differ
diff --git a/aio/content/images/guide/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
new file mode 100644
index 000000000000..8e641055745f
Binary files /dev/null and b/aio/content/images/guide/jasmine-testing-101/spec-list-2-specs-1-failure.png differ
diff --git a/aio/content/images/guide/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
new file mode 100644
index 000000000000..dd85b01a0915
Binary files /dev/null and b/aio/content/images/guide/jasmine-testing-101/test-report-1-spec-0-failures.png differ
diff --git a/aio/content/images/guide/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
new file mode 100644
index 000000000000..c6e1ba022a82
Binary files /dev/null and b/aio/content/images/guide/jasmine-testing-101/test-report-2-specs-0-failures.png differ
diff --git a/aio/content/images/guide/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
new file mode 100644
index 000000000000..f896018689d1
Binary files /dev/null and b/aio/content/images/guide/jasmine-testing-101/test-report-2-specs-1-failure.png differ
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 000000000000..4c6de8a48d61
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 000000000000..e26b25b8de94
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 000000000000..973db203b851
Binary files /dev/null and b/aio/content/images/guide/language-service/language-navigation.gif differ
diff --git a/aio/content/images/guide/lazy-loading-ngmodules/chunk-arrow.png b/aio/content/images/guide/lazy-loading-ngmodules/chunk-arrow.png
new file mode 100644
index 000000000000..d42dd1f6f40d
Binary files /dev/null and b/aio/content/images/guide/lazy-loading-ngmodules/chunk-arrow.png differ
diff --git a/aio/content/images/guide/lazy-loading-ngmodules/chunk.png b/aio/content/images/guide/lazy-loading-ngmodules/chunk.png
new file mode 100644
index 000000000000..f35bca8e0f7d
Binary files /dev/null and b/aio/content/images/guide/lazy-loading-ngmodules/chunk.png differ
diff --git a/aio/content/images/guide/lazy-loading-ngmodules/clear.gif b/aio/content/images/guide/lazy-loading-ngmodules/clear.gif
new file mode 100644
index 000000000000..6aacf02f8cca
Binary files /dev/null and b/aio/content/images/guide/lazy-loading-ngmodules/clear.gif differ
diff --git a/aio/content/images/guide/lazy-loading-ngmodules/clear.png b/aio/content/images/guide/lazy-loading-ngmodules/clear.png
new file mode 100644
index 000000000000..70379ce1f8c0
Binary files /dev/null and b/aio/content/images/guide/lazy-loading-ngmodules/clear.png differ
diff --git a/aio/content/images/guide/lazy-loading-ngmodules/lazy-load-relationship.jpg b/aio/content/images/guide/lazy-loading-ngmodules/lazy-load-relationship.jpg
new file mode 100644
index 000000000000..3aa0004925c2
Binary files /dev/null and b/aio/content/images/guide/lazy-loading-ngmodules/lazy-load-relationship.jpg differ
diff --git a/aio/content/images/guide/lazy-loading-ngmodules/network-tab.png b/aio/content/images/guide/lazy-loading-ngmodules/network-tab.png
new file mode 100644
index 000000000000..29b13a9d87de
Binary files /dev/null and b/aio/content/images/guide/lazy-loading-ngmodules/network-tab.png differ
diff --git a/aio/content/images/guide/lazy-loading-ngmodules/three-buttons.png b/aio/content/images/guide/lazy-loading-ngmodules/three-buttons.png
new file mode 100644
index 000000000000..b44b0a826551
Binary files /dev/null and b/aio/content/images/guide/lazy-loading-ngmodules/three-buttons.png differ
diff --git a/aio/content/images/guide/lifecycle-hooks/after-view-anim.gif b/aio/content/images/guide/lifecycle-hooks/after-view-anim.gif
new file mode 100644
index 000000000000..0c1b095f90d1
Binary files /dev/null and b/aio/content/images/guide/lifecycle-hooks/after-view-anim.gif differ
diff --git a/aio/content/images/guide/lifecycle-hooks/do-check-anim.gif b/aio/content/images/guide/lifecycle-hooks/do-check-anim.gif
new file mode 100644
index 000000000000..8b3bc392b85e
Binary files /dev/null and b/aio/content/images/guide/lifecycle-hooks/do-check-anim.gif differ
diff --git a/aio/content/images/guide/lifecycle-hooks/on-changes-anim.gif b/aio/content/images/guide/lifecycle-hooks/on-changes-anim.gif
new file mode 100644
index 000000000000..e13284ab8de4
Binary files /dev/null and b/aio/content/images/guide/lifecycle-hooks/on-changes-anim.gif differ
diff --git a/aio/content/images/guide/lifecycle-hooks/peek-a-boo.gif b/aio/content/images/guide/lifecycle-hooks/peek-a-boo.gif
new file mode 100644
index 000000000000..6e21ed74a170
Binary files /dev/null and b/aio/content/images/guide/lifecycle-hooks/peek-a-boo.gif differ
diff --git a/aio/content/images/guide/lifecycle-hooks/peek-a-boo.png b/aio/content/images/guide/lifecycle-hooks/peek-a-boo.png
new file mode 100644
index 000000000000..f799e89ff529
Binary files /dev/null and b/aio/content/images/guide/lifecycle-hooks/peek-a-boo.png differ
diff --git a/aio/content/images/guide/lifecycle-hooks/projected-child-view.png b/aio/content/images/guide/lifecycle-hooks/projected-child-view.png
new file mode 100644
index 000000000000..bd8068d61bac
Binary files /dev/null and b/aio/content/images/guide/lifecycle-hooks/projected-child-view.png differ
diff --git a/aio/content/images/guide/lifecycle-hooks/spy-directive.gif b/aio/content/images/guide/lifecycle-hooks/spy-directive.gif
new file mode 100644
index 000000000000..60056082ba32
Binary files /dev/null and b/aio/content/images/guide/lifecycle-hooks/spy-directive.gif differ
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 000000000000..37e23a5ec65b
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 000000000000..0ce389b2a3b6
Binary files /dev/null and b/aio/content/images/guide/ngcontainer/hero-traits-good.png differ
diff --git a/aio/content/images/guide/ngmodule/contact-1b-plunker.png b/aio/content/images/guide/ngmodule/contact-1b-plunker.png
new file mode 100644
index 000000000000..4063efc23dbc
Binary files /dev/null and b/aio/content/images/guide/ngmodule/contact-1b-plunker.png differ
diff --git a/aio/content/images/guide/ngmodule/contact-2-plunker.png b/aio/content/images/guide/ngmodule/contact-2-plunker.png
new file mode 100644
index 000000000000..909f928e3d13
Binary files /dev/null and b/aio/content/images/guide/ngmodule/contact-2-plunker.png differ
diff --git a/aio/content/images/guide/ngmodule/final-plunker.png b/aio/content/images/guide/ngmodule/final-plunker.png
new file mode 100644
index 000000000000..4669a6601b0f
Binary files /dev/null and b/aio/content/images/guide/ngmodule/final-plunker.png differ
diff --git a/aio/content/images/guide/ngmodule/minimal-plunker.png b/aio/content/images/guide/ngmodule/minimal-plunker.png
new file mode 100644
index 000000000000..0c7bb90e989a
Binary files /dev/null and b/aio/content/images/guide/ngmodule/minimal-plunker.png differ
diff --git a/aio/content/images/guide/ngmodule/v3-plunker.png b/aio/content/images/guide/ngmodule/v3-plunker.png
new file mode 100644
index 000000000000..5888ebfe5aeb
Binary files /dev/null and b/aio/content/images/guide/ngmodule/v3-plunker.png differ
diff --git a/aio/content/images/guide/pipes/date-format-toggle-anim.gif b/aio/content/images/guide/pipes/date-format-toggle-anim.gif
new file mode 100644
index 000000000000..379c48df95f1
Binary files /dev/null and b/aio/content/images/guide/pipes/date-format-toggle-anim.gif differ
diff --git a/aio/content/images/guide/pipes/flying-heroes-anim.gif b/aio/content/images/guide/pipes/flying-heroes-anim.gif
new file mode 100644
index 000000000000..2c11805cd446
Binary files /dev/null and b/aio/content/images/guide/pipes/flying-heroes-anim.gif differ
diff --git a/aio/content/images/guide/pipes/hero-list.png b/aio/content/images/guide/pipes/hero-list.png
new file mode 100644
index 000000000000..59f0d33fe6c2
Binary files /dev/null and b/aio/content/images/guide/pipes/hero-list.png differ
diff --git a/aio/content/images/guide/pipes/power-boost-calculator-anim.gif b/aio/content/images/guide/pipes/power-boost-calculator-anim.gif
new file mode 100644
index 000000000000..27ff25d1154d
Binary files /dev/null and b/aio/content/images/guide/pipes/power-boost-calculator-anim.gif differ
diff --git a/aio/content/images/guide/pipes/power-boost-calculator.png b/aio/content/images/guide/pipes/power-boost-calculator.png
new file mode 100644
index 000000000000..35e1e7c7977d
Binary files /dev/null and b/aio/content/images/guide/pipes/power-boost-calculator.png differ
diff --git a/aio/content/images/guide/pipes/power-booster.png b/aio/content/images/guide/pipes/power-booster.png
new file mode 100644
index 000000000000..434e3db1b181
Binary files /dev/null and b/aio/content/images/guide/pipes/power-booster.png differ
diff --git a/aio/content/images/guide/quickstart/hello-angular.png b/aio/content/images/guide/quickstart/hello-angular.png
new file mode 100644
index 000000000000..751728014ab0
Binary files /dev/null and b/aio/content/images/guide/quickstart/hello-angular.png differ
diff --git a/aio/content/images/guide/quickstart/my-first-app.png b/aio/content/images/guide/quickstart/my-first-app.png
new file mode 100644
index 000000000000..836dc673effa
Binary files /dev/null and b/aio/content/images/guide/quickstart/my-first-app.png differ
diff --git a/aio/content/images/guide/quickstart/quickstart-plnkr-big.png b/aio/content/images/guide/quickstart/quickstart-plnkr-big.png
new file mode 100644
index 000000000000..0738a4a4eb8f
Binary files /dev/null and b/aio/content/images/guide/quickstart/quickstart-plnkr-big.png differ
diff --git a/aio/content/images/guide/quickstart/quickstart-plnkr.png b/aio/content/images/guide/quickstart/quickstart-plnkr.png
new file mode 100644
index 000000000000..757c70dac318
Binary files /dev/null and b/aio/content/images/guide/quickstart/quickstart-plnkr.png differ
diff --git a/aio/content/images/guide/reactive-forms/name-editor-1.png b/aio/content/images/guide/reactive-forms/name-editor-1.png
new file mode 100644
index 000000000000..06ef679f5d56
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/name-editor-1.png differ
diff --git a/aio/content/images/guide/reactive-forms/name-editor-2.png b/aio/content/images/guide/reactive-forms/name-editor-2.png
new file mode 100644
index 000000000000..e94e4a1961e0
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/name-editor-2.png differ
diff --git a/aio/content/images/guide/reactive-forms/profile-editor-1.png b/aio/content/images/guide/reactive-forms/profile-editor-1.png
new file mode 100644
index 000000000000..e9cf0de51188
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/profile-editor-1.png differ
diff --git a/aio/content/images/guide/reactive-forms/profile-editor-2.png b/aio/content/images/guide/reactive-forms/profile-editor-2.png
new file mode 100644
index 000000000000..06396d10decf
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/profile-editor-2.png differ
diff --git a/aio/content/images/guide/reactive-forms/profile-editor-3.png b/aio/content/images/guide/reactive-forms/profile-editor-3.png
new file mode 100644
index 000000000000..55f995737ea2
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/profile-editor-3.png differ
diff --git a/aio/content/images/guide/reactive-forms/profile-editor-4.png b/aio/content/images/guide/reactive-forms/profile-editor-4.png
new file mode 100644
index 000000000000..9de552114695
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/profile-editor-4.png differ
diff --git a/aio/content/images/guide/router/component-tree.png b/aio/content/images/guide/router/component-tree.png
new file mode 100644
index 000000000000..1a7cb936a314
Binary files /dev/null and b/aio/content/images/guide/router/component-tree.png differ
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 000000000000..f0baed379894
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 000000000000..b92580aec80b
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 000000000000..b1b910ff7da3
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 000000000000..8b913b259afd
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 000000000000..ed4571f48182
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 000000000000..fa6c64675aa8
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 000000000000..07a012d25b2b
Binary files /dev/null and b/aio/content/images/guide/router/router-1-anim.gif differ
diff --git a/aio/content/images/guide/router/router-2-anim.gif b/aio/content/images/guide/router/router-2-anim.gif
new file mode 100644
index 000000000000..1a0fef8af6bc
Binary files /dev/null and b/aio/content/images/guide/router/router-2-anim.gif differ
diff --git a/aio/content/images/guide/router/selected-crisis.png b/aio/content/images/guide/router/selected-crisis.png
new file mode 100644
index 000000000000..6fee911886f0
Binary files /dev/null and b/aio/content/images/guide/router/selected-crisis.png differ
diff --git a/aio/content/images/guide/router/selected-hero.png b/aio/content/images/guide/router/selected-hero.png
new file mode 100644
index 000000000000..c93f8f5b77a4
Binary files /dev/null and b/aio/content/images/guide/router/selected-hero.png differ
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 000000000000..9545f3e03248
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 000000000000..5c5b11eba891
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 000000000000..34d076cdfcaf
Binary files /dev/null and b/aio/content/images/guide/security/bypass-security-component.png differ
diff --git a/aio/content/images/guide/service-worker/offline-checkbox.png b/aio/content/images/guide/service-worker/offline-checkbox.png
new file mode 100644
index 000000000000..8d960264e506
Binary files /dev/null and b/aio/content/images/guide/service-worker/offline-checkbox.png differ
diff --git a/aio/content/images/guide/service-worker/sw-active.png b/aio/content/images/guide/service-worker/sw-active.png
new file mode 100644
index 000000000000..4228bb810f40
Binary files /dev/null and b/aio/content/images/guide/service-worker/sw-active.png differ
diff --git a/aio/content/images/guide/service-worker/welcome-msg-en.png b/aio/content/images/guide/service-worker/welcome-msg-en.png
new file mode 100644
index 000000000000..c3bff7106010
Binary files /dev/null and b/aio/content/images/guide/service-worker/welcome-msg-en.png differ
diff --git a/aio/content/images/guide/service-worker/welcome-msg-fr.png b/aio/content/images/guide/service-worker/welcome-msg-fr.png
new file mode 100644
index 000000000000..eb2b7e1581f5
Binary files /dev/null and b/aio/content/images/guide/service-worker/welcome-msg-fr.png differ
diff --git a/aio/content/images/guide/set-document-title/set-title-anim.gif b/aio/content/images/guide/set-document-title/set-title-anim.gif
new file mode 100644
index 000000000000..41e8a0e2dac3
Binary files /dev/null and b/aio/content/images/guide/set-document-title/set-title-anim.gif differ
diff --git a/aio/content/images/guide/structural-directives/bad-paragraph.png b/aio/content/images/guide/structural-directives/bad-paragraph.png
new file mode 100644
index 000000000000..be291c639f5a
Binary files /dev/null and b/aio/content/images/guide/structural-directives/bad-paragraph.png differ
diff --git a/aio/content/images/guide/structural-directives/bad-select.png b/aio/content/images/guide/structural-directives/bad-select.png
new file mode 100644
index 000000000000..12a645143695
Binary files /dev/null and b/aio/content/images/guide/structural-directives/bad-select.png differ
diff --git a/aio/content/images/guide/structural-directives/element-display-in-dom.png b/aio/content/images/guide/structural-directives/element-display-in-dom.png
new file mode 100644
index 000000000000..3d692e18c600
Binary files /dev/null and b/aio/content/images/guide/structural-directives/element-display-in-dom.png differ
diff --git a/aio/content/images/guide/structural-directives/element-not-in-dom.png b/aio/content/images/guide/structural-directives/element-not-in-dom.png
new file mode 100644
index 000000000000..5061954ecb49
Binary files /dev/null and b/aio/content/images/guide/structural-directives/element-not-in-dom.png differ
diff --git a/aio/content/images/guide/structural-directives/good-paragraph.png b/aio/content/images/guide/structural-directives/good-paragraph.png
new file mode 100644
index 000000000000..42286cbf5ffa
Binary files /dev/null and b/aio/content/images/guide/structural-directives/good-paragraph.png differ
diff --git a/aio/content/images/guide/structural-directives/hero-div-in-dom.png b/aio/content/images/guide/structural-directives/hero-div-in-dom.png
new file mode 100644
index 000000000000..174655f221c3
Binary files /dev/null and b/aio/content/images/guide/structural-directives/hero-div-in-dom.png differ
diff --git a/aio/content/images/guide/structural-directives/select-ngcontainer-anim.gif b/aio/content/images/guide/structural-directives/select-ngcontainer-anim.gif
new file mode 100644
index 000000000000..c75db4761829
Binary files /dev/null and b/aio/content/images/guide/structural-directives/select-ngcontainer-anim.gif differ
diff --git a/aio/content/images/guide/structural-directives/template-rendering.png b/aio/content/images/guide/structural-directives/template-rendering.png
new file mode 100755
index 000000000000..200174bcb001
Binary files /dev/null and b/aio/content/images/guide/structural-directives/template-rendering.png differ
diff --git a/aio/content/images/guide/structural-directives/unless-anim.gif b/aio/content/images/guide/structural-directives/unless-anim.gif
new file mode 100644
index 000000000000..702590d22f99
Binary files /dev/null and b/aio/content/images/guide/structural-directives/unless-anim.gif differ
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 000000000000..0d9de0e01fe2
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 000000000000..010d634b6ce6
Binary files /dev/null and b/aio/content/images/guide/template-syntax/evil-title.png differ
diff --git a/aio/content/images/guide/template-syntax/input-output.png b/aio/content/images/guide/template-syntax/input-output.png
new file mode 100644
index 000000000000..227fe402fc6d
Binary files /dev/null and b/aio/content/images/guide/template-syntax/input-output.png differ
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 000000000000..716e6a44bae7
Binary files /dev/null and b/aio/content/images/guide/template-syntax/ng-for-track-by-anim.gif differ
diff --git a/aio/content/images/guide/template-syntax/ng-model-anim.gif b/aio/content/images/guide/template-syntax/ng-model-anim.gif
new file mode 100644
index 000000000000..ed5da31712e2
Binary files /dev/null and b/aio/content/images/guide/template-syntax/ng-model-anim.gif differ
diff --git a/aio/content/images/guide/template-syntax/switch-anim.gif b/aio/content/images/guide/template-syntax/switch-anim.gif
new file mode 100644
index 000000000000..9892df24597e
Binary files /dev/null and b/aio/content/images/guide/template-syntax/switch-anim.gif differ
diff --git a/aio/content/images/guide/testing-an-angular-pipe/5-specs-0-failures.png b/aio/content/images/guide/testing-an-angular-pipe/5-specs-0-failures.png
new file mode 100644
index 000000000000..8d88069e37dd
Binary files /dev/null and b/aio/content/images/guide/testing-an-angular-pipe/5-specs-0-failures.png differ
diff --git a/aio/content/images/guide/testing-an-angular-pipe/big-time-fail-screen.png b/aio/content/images/guide/testing-an-angular-pipe/big-time-fail-screen.png
new file mode 100644
index 000000000000..a1525c39962f
Binary files /dev/null and b/aio/content/images/guide/testing-an-angular-pipe/big-time-fail-screen.png differ
diff --git a/aio/content/images/guide/testing-an-angular-pipe/two-failures.png b/aio/content/images/guide/testing-an-angular-pipe/two-failures.png
new file mode 100644
index 000000000000..49d496c77842
Binary files /dev/null and b/aio/content/images/guide/testing-an-angular-pipe/two-failures.png differ
diff --git a/aio/content/images/guide/testing-an-angular-pipe/zero-failures.png b/aio/content/images/guide/testing-an-angular-pipe/zero-failures.png
new file mode 100644
index 000000000000..f461fee8898c
Binary files /dev/null and b/aio/content/images/guide/testing-an-angular-pipe/zero-failures.png differ
diff --git a/aio/content/images/guide/testing/app-plunker.png b/aio/content/images/guide/testing/app-plunker.png
new file mode 100644
index 000000000000..b423b88f7e58
Binary files /dev/null and b/aio/content/images/guide/testing/app-plunker.png differ
diff --git a/aio/content/images/guide/testing/app-specs-plunker.png b/aio/content/images/guide/testing/app-specs-plunker.png
new file mode 100644
index 000000000000..151557eedcc6
Binary files /dev/null and b/aio/content/images/guide/testing/app-specs-plunker.png differ
diff --git a/aio/content/images/guide/testing/hero-detail.component.png b/aio/content/images/guide/testing/hero-detail.component.png
new file mode 100644
index 000000000000..3510be66dba0
Binary files /dev/null and b/aio/content/images/guide/testing/hero-detail.component.png differ
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 000000000000..ca12d5139d4c
Binary files /dev/null and b/aio/content/images/guide/testing/highlight-directive-spec.png differ
diff --git a/aio/content/images/guide/testing/initial-jasmine-html-reporter.png b/aio/content/images/guide/testing/initial-jasmine-html-reporter.png
new file mode 100644
index 000000000000..196a0ac2885a
Binary files /dev/null and b/aio/content/images/guide/testing/initial-jasmine-html-reporter.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 000000000000..d37803ba15b7
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 000000000000..04d6c818d4b1
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 000000000000..99d1af8e468d
Binary files /dev/null and b/aio/content/images/guide/testing/karma-browser.png differ
diff --git a/aio/content/images/guide/toh/dashboard-top-heroes.png b/aio/content/images/guide/toh/dashboard-top-heroes.png
new file mode 100644
index 000000000000..f3299a33dce0
Binary files /dev/null and b/aio/content/images/guide/toh/dashboard-top-heroes.png differ
diff --git a/aio/content/images/guide/toh/hero-details-1.png b/aio/content/images/guide/toh/hero-details-1.png
new file mode 100644
index 000000000000..0a839f6639df
Binary files /dev/null and b/aio/content/images/guide/toh/hero-details-1.png differ
diff --git a/aio/content/images/guide/toh/hero-details-save-button.png b/aio/content/images/guide/toh/hero-details-save-button.png
new file mode 100644
index 000000000000..8f048153b78d
Binary files /dev/null and b/aio/content/images/guide/toh/hero-details-save-button.png differ
diff --git a/aio/content/images/guide/toh/heroes-dashboard-1.png b/aio/content/images/guide/toh/heroes-dashboard-1.png
new file mode 100644
index 000000000000..efbbbb23a014
Binary files /dev/null and b/aio/content/images/guide/toh/heroes-dashboard-1.png differ
diff --git a/aio/content/images/guide/toh/heroes-list-1.png b/aio/content/images/guide/toh/heroes-list-1.png
new file mode 100644
index 000000000000..b8088da199b1
Binary files /dev/null and b/aio/content/images/guide/toh/heroes-list-1.png differ
diff --git a/aio/content/images/guide/toh/heroes-list-2.png b/aio/content/images/guide/toh/heroes-list-2.png
new file mode 100644
index 000000000000..1751a923a172
Binary files /dev/null and b/aio/content/images/guide/toh/heroes-list-2.png differ
diff --git a/aio/content/images/guide/toh/heroes-list-delete-button.png b/aio/content/images/guide/toh/heroes-list-delete-button.png
new file mode 100644
index 000000000000..ea487ee3615c
Binary files /dev/null and b/aio/content/images/guide/toh/heroes-list-delete-button.png differ
diff --git a/aio/content/images/guide/toh/heroes-list-selected.png b/aio/content/images/guide/toh/heroes-list-selected.png
new file mode 100644
index 000000000000..16ebad420235
Binary files /dev/null and b/aio/content/images/guide/toh/heroes-list-selected.png differ
diff --git a/aio/content/images/guide/toh/nav-diagram.png b/aio/content/images/guide/toh/nav-diagram.png
new file mode 100644
index 000000000000..e82efc3c96a7
Binary files /dev/null and b/aio/content/images/guide/toh/nav-diagram.png differ
diff --git a/aio/content/images/guide/toh/toh-anim.gif b/aio/content/images/guide/toh/toh-anim.gif
new file mode 100644
index 000000000000..8fc15c18ccd8
Binary files /dev/null and b/aio/content/images/guide/toh/toh-anim.gif differ
diff --git a/aio/content/images/guide/toh/toh-hero-search.png b/aio/content/images/guide/toh/toh-hero-search.png
new file mode 100644
index 000000000000..a86d9a570297
Binary files /dev/null and b/aio/content/images/guide/toh/toh-hero-search.png differ
diff --git a/aio/content/images/guide/toh/toh-http.anim.gif b/aio/content/images/guide/toh/toh-http.anim.gif
new file mode 100644
index 000000000000..a11eb3e5a5ac
Binary files /dev/null and b/aio/content/images/guide/toh/toh-http.anim.gif differ
diff --git a/aio/content/images/guide/unit-testing/spectrum.png b/aio/content/images/guide/unit-testing/spectrum.png
new file mode 100644
index 000000000000..2a5f123afc84
Binary files /dev/null and b/aio/content/images/guide/unit-testing/spectrum.png differ
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 000000000000..f6bc2991b74e
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 000000000000..c2b9966287f8
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 000000000000..8e8f3f1a113d
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 000000000000..469ea5d48e52
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 000000000000..e432e92ff08f
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 000000000000..bc4496d3293f
Binary files /dev/null and b/aio/content/images/guide/upgrade/dom.png differ
diff --git a/aio/content/images/guide/upgrade/injectors-2.png b/aio/content/images/guide/upgrade/injectors-2.png
new file mode 100644
index 000000000000..f46d54f9c392
Binary files /dev/null and b/aio/content/images/guide/upgrade/injectors-2.png differ
diff --git a/aio/content/images/guide/upgrade/injectors.png b/aio/content/images/guide/upgrade/injectors.png
new file mode 100644
index 000000000000..8acba21f104b
Binary files /dev/null and b/aio/content/images/guide/upgrade/injectors.png differ
diff --git a/aio/content/images/guide/user-input/keyup-loop-back-anim.gif b/aio/content/images/guide/user-input/keyup-loop-back-anim.gif
new file mode 100644
index 000000000000..4291af636480
Binary files /dev/null and b/aio/content/images/guide/user-input/keyup-loop-back-anim.gif differ
diff --git a/aio/content/images/guide/user-input/keyup1-anim.gif b/aio/content/images/guide/user-input/keyup1-anim.gif
new file mode 100644
index 000000000000..a7095f1174b9
Binary files /dev/null and b/aio/content/images/guide/user-input/keyup1-anim.gif differ
diff --git a/aio/content/images/guide/user-input/keyup3-anim.gif b/aio/content/images/guide/user-input/keyup3-anim.gif
new file mode 100644
index 000000000000..054ef171579b
Binary files /dev/null and b/aio/content/images/guide/user-input/keyup3-anim.gif differ
diff --git a/aio/content/images/guide/user-input/little-tour-anim.gif b/aio/content/images/guide/user-input/little-tour-anim.gif
new file mode 100644
index 000000000000..76d320264a4a
Binary files /dev/null and b/aio/content/images/guide/user-input/little-tour-anim.gif differ
diff --git a/aio/content/images/guide/user-input/little-tour.png b/aio/content/images/guide/user-input/little-tour.png
new file mode 100644
index 000000000000..9893e21ce696
Binary files /dev/null and b/aio/content/images/guide/user-input/little-tour.png differ
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 000000000000..ae6cf46eb074
--- /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-connect.png b/aio/content/images/marketing/home/angular-connect.png
new file mode 100644
index 000000000000..43c21d9c2c51
Binary files /dev/null and b/aio/content/images/marketing/home/angular-connect.png differ
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 000000000000..951ca03c9efd
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 000000000000..1ee77261eff7
--- /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/content/images/marketing/home/joyful-development.svg b/aio/content/images/marketing/home/joyful-development.svg
new file mode 100644
index 000000000000..0b8506ff27a3
--- /dev/null
+++ b/aio/content/images/marketing/home/joyful-development.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="400"
+   height="251"
+   viewBox="0 0 400 251"
+   version="1.1"
+   id="svg443"
+   sodipodi:docname="joyful-development.svg"
+   inkscape:version="0.92.2pre0 (973e216, 2017-07-25)"
+   style="shape-rendering:crispEdges">
+  <defs
+     id="defs437" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.3058645"
+     inkscape:cx="404.04445"
+     inkscape:cy="257.68921"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1139"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     units="px"
+     showborder="false" />
+  <metadata
+     id="metadata440">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-33.814457,-212.44696)">
+    <image
+       y="212.44696"
+       x="33.814457"
+       id="image504"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAH2CAYAAACIiOhzAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz AAAiUQAAIlEB7fwb2AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAQdEVY dFRpdGxlAENMSSBDb3B5IDLdQgHvAAAgAElEQVR4nOzde3hU5b33/3cypyQTciIHEnIAEk0Ih3BQ QEEpSIGqkSpulVqlntilVCvVX6N7F/v8pH2UfWm1aqstVYuWihZ0K0qJVShC5HwIkEBqIiEEAknI eRIyM8k8f4RAjiTAZBLg87qu/JHJzFrftTKz5v6se9338srKynIhIiIiIiLiAd69XYCIiIiIiFw5 FEBERERERMRjFEBERERERMRjFEBERERERMRjFEBERERERMRjFEBERERERMRjFEBERERERMRjFEBE RERERMRjFEBERERERMRjFEBERERERMRjFEBERERERMRjFEBERERERMRjFEBERERERMRjFEBERERE RMRjFEBERERERMRjFEBERERERMRjFEBERERERMRjjL1dwPnwrqvDXH4So82Gsa4Wp68fTqsVe3AI jb5+vV1eO96uekwNRRgbyjC6Kmn08sPpHYTdO4wGQ0hvl3dOxY0nKXWVU9ZYiQMHgV796O8dRJR3 BKZL620jIiIiIn1In29JetfVErQ/k365OfgdPYKXy9XuOS4vL2qjoqlOSKRieAqNftZeqPS0RjtB jq/pV78Nq2M/3jg6fNopQyzV5rFUWCbjMER4uMiOHW44ygbnNrY1ZFLkKunwOb5ePozyHsp1xtFM MIzG4KVONBERERHpPq+srKz2Lfq+wOkkeM8Owjd/heHUqW6/rNFkpvSaCZwcPxGXydSDBbbmcjUS YN9KRO0KzI3F3X8dBsrNkynxu5MGQ3APVti50sZy/m5fw7qGzTTS/bfDQK8I7jbdwnXG0XgriIiI iIhIN/TJAGKsriLmo/fxPVF0wcs4FRrOkdvvxhHU8416r8Y6Btb8gQDHjgtehtPLnyP+j1NrSsbL y8uN1XXO5XKxy5nFy/a3qaX7Ia+tid5jWeDzQyxeZjdWJyIiIiKXoz4VQFwuFz7HCon73/cx1tZe 9PKcPr4U3H43dQNjeqxRb2w4SWz18/g0FF70slxeJo76PUKlZVKPhxCXy8WnjnW84/jovHo9OpPo PZinLfPp592Ll7+JiIiISJ/XZ66bcblcGCsr3BY+AIyn6oj76H1M5SdxdTB25KI11hNT/Vu3hA8A L5eDgbY38LPv65l6T3O5XHzt3MUyN4UPgJzGQyyp/yMOl9MtyxMRERGRy1OfCSBeDrtbw0czw6k6 Yv/373jZ7W5drsvlYmDNH/Bt+Naty/WikRjbqxidJ3okhLhcLvIaCnjN/i4uN4WPZgca83jH/mGP hicRERERubT1iQDicrkI2b4Fn5LuD94+Hz4nS+i/Y4vbGsYulwtr/S4CHdvcsry2jK4aBtQt77EA 8qb9A+ydzM51sf7h/Ipc52GFEBERERHpUK8HEJfLhXetjbAdW3p0PWHbN+NdXXXRDWOXy0Vjo5OI ug/cVFnHAh078HXkuLUh73K52Ozczb9d+W5bZrt14GoaV9LY2GPrEBEREZFLV58IIEGZuzDY63t0 Pd4OO0F7d7mlQW+178W3scANVZ1b/1NraGxsdEvNTcGpkU+d69xQ2bllu3LJbyxUL4iIiIiItNOr AcTlcuFyuQjIzfHI+gLzvjmzzgvR3IgPsF/4dLvnI6BhHzS6L5iVN1SS6zrstuWdy1ZnpnpBRERE RKSdXg8gXtVVWIuPe2R9fiUn8K6suKgz8y6XiwDnbjdW1TlvVz1+9v1u6UlobGxkh3Of22a96srO xv0XFfZERERE5PLU6wHEfLIUPNVIdbkwl134lLwulwsabJipdHNhnbM0Fl10Q775tUddJ9xVVpeO Uey2y8dERERE5PLRawGkuWFqtNV4dL3GmqpW6z8fLpcLY2O5u0s6J0NDmdt6QMo9GJzsOKhpdO+U yiIiIiJy6ev1HhDvWptH1+lts11w+ADwbqhyd0nnZHRVX/RYiuYelGqXZ/d1latGPSAiIiIi0kqv BxCnxcej63T6+F5Uo9je6OvGarrmwOqWsRSNjY34ebh2a2PT/1YhRERERESa9fo0vHY/Pw+v78Ib 9C6XC4dXUA9U1Tm7K9Btywqin9uW1RUzJvzwbOARERERkb6v1wPIqYAg8PLy3PoCmwKE1wWus8HL Fwf+7izpnE55hbttWeGu/m5bVlfCGoM9ti4RERERuXT0egBx+PejJsQzDeOa4BDs/QIuOHx4eXnh 5eXFSdcwN1fWsUZMVHolXXC9LXl5eZHSmIQXngl7KY3uqVtERERELi+9GkCaG/SlMYM8sr6TsYPP rPN8Nb/Gy8uLk4x0d2kdKmu8Ggy+F1xzS15eXvT3DiKmcYCbqju3UY1DW+0zERERERHoAwHEYDBw Imk4DUZjj66r0WDg+NXJeHt7X1SD2NvbmwrvEdS6Qt1YXceOeX3HbeHD29sbb29vpjrGu6m6zsU5 oxhMtFtqFxEREZHLS68FkObGqZeXF07/fhxJGt6j6ytIGoEzMOhMALnQXhBvb28MRguHXLf2QJVn lTYkUeWdjMFgcNslWEajkQmuUUQ7I9xQYedmO6ZjMprcVruIiIiIXD76RA+I0WikcORYav0DemQ9 tf79KEwZg9FovKhG8ZkAYjBw0msMJxuvdnOlTZwuC3mu77eq92Ia8s2v9/b2xmw0c5fjexgwuLHi s8bbR5LkNQSDwYC3d68PMRIRERGRPqbXW4je3t6YTCbw9WXv1Jk4zRa3Lt9pNLHvO9PB1w+TyXRR jeLmhrzRaMRoNJHV+CA1je6bper0Wsh23oXdGH3RganVUluEvUQGc3fd99xQa2sxDQP4geNWtwUn EREREbn89HoPSHPD2Gw2Y+8fSuakqThNJrcs32k0sfeGmzgVGo7ZbHZLo7i5B8RkMuFl9Gev80Hq XO6ZctaFFwcdsyjzvgaz2YzRaHRbI75leDKbzUxqGMOMUxPdUHWTSGcY8+vuwc/oi8lkOlO7iIiI iEhLhgULFvyf3i4Czs6UVGv151hkDP2PH8Nsr7/g5dVa/dl50/ewRQ7Ex8fnTAC52EHobWd2sjf6 UmgfRYD3EXy9yi94uU6Xhb32H1LqPQGLxYLFYsFoNF50vW1rb16Wy+UiwR5LmDOYbFMejV6NF7zc ofYhzK+bQ7AxELPZ3Gpfi4iIiIi05JWVlXX+twR3M5fLRWNjIw6Hg/r6ek6dOgV1tcTt203cNwcw NDR0e1mNBgOHrxpK/vBR4GfFYrHg4+Nz5vIrdzTmW9Zrt9upr6/H6TjFQO8Mhhj/idmr9jyW5UVR wyjyGm7GaQjDbDZjsVha9di4U2NjI42Njdjtdk6dOoXdbueo6wQf+6wjy5x7XssKagzg5robmNCQ gtloPhP03B2cREREROTy0ScCCDQ16hsaGnA6ndTX12O323E4HJhrqon+5gDhRwvwr6zo9PU1AUEU D4yl8Kok7P0CMJlMZxrz7hxL0bLe5hDSHJwcDgdejbUM9N5MhHE/gV4FeHl1vHtPuQIpdiZT2DAe G9FnLo2yWCyYTKYe60FwuVxn9rXdbj/z43Q6yTUUsNWUSZY5jxrvjkOUN97EO6IZaU9kgj0FX4PP mV4Pk8nk1qAnIiIiIpefPhNAoH2jvvmnoaGBxsZGfKqrsFZVYD5Vh6W+HrvFQr2PL7aAIE71C2g1 PqPlT/MMUD1Vr9PpPNMb0rJek6sKf+8ifLyrMVOD02WmnkBOuUKocQ3Ay8v79IB2Y6t6L2aq4O7W 3TLwNdftdDppaGigwdXIUcMJyrwqqfSuxoGTfi4rQY39GNgQgRVfDAZDu32tng8RERER6UqfCiBw tlHf3Dhu+dP8N5frbMnN4eLs7FRnf9wx5qO79TYHkeYw0hxCOqq35XS+bWvuqbDUUd3NP801NweQ 5n3d/NOy9uYbGjaHj+a6mx9X+BARERGRc+nZ249fgJaBomVD1+l0dtqgb278NjeEWwaPnm4Qd1Sv 0WhsFUAaGxvbPb/5uc0/LZfjCc37xuVyndlvRqPxTPjraF831912X7e8qaSIiIiIyLn0uQACre+S 7u3tfaaR3Nzb0FbLANAbjeGWjfnmaYVb9ox09Pzmhnxz/c2Pe1rLWprr6Ch8NGvZ06HgISIiIiLn q08GkGYtG/bNQaSjRnHLRnBvNoZb1gucqbmz57X8vTc1r79lEGoOUR09ty/saxERERG5NPXpANKs bYO37SVYfc256m35eF9zqdYtIiIiIpeOSyKAtHWpNYQvtXqbXap1i4iIiEjfpVtVi4iIiIiIxyiA iIiIiIiIxyiAiIiIiIiIxyiAiIiIiIiIxyiAiIiIiIiIxyiAiIiIiIiIxyiAiIiIiIiIxyiAiIiI iIiIxyiAiIiIiIiIxyiAiIiIiIiIxyiAiIiIiIiIxyiAiIiIiIiIx3iNGjWqtLeLEBERERGRK0KZ saysrH9vVyEiIiIiIlcGXYIlIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIi IiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIe owAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAi IiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIi IiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIe owAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAi IiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIi IiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIe owAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAiIiIiIiIeowAi IiIiIiIeowAiIiIiIh4TPmgw4wN6uwrpTQogIiIiIuIZllh+fMtYpoapCXolM/Z2Ab0nkJtue5WH ow7w57ee40t7b9cjIiLS9w0fM4F7UqK5OsQMp2o4WniYVev3samqsbdLk0vAwJHDGF7/Lb/M0/vl SnYFBxC5YljrSXu6jHtTGtj9ShRz/6mzLiLtNXLvr4/xzFADuz8L4dG3LJT0dkkAviO4bcKt3BgT S5ifFbPTjr2hlsrqUkqq8/jHV8vZUdfbRV5KvBl/yx08nWRu+tV5jFde+xfrGrr7eivPXBfM1m07 ebGoCpslgPHDk3nsvlDC/7aeD8vVqDwvllieeXgSY3xaPtjA1v/9O89djg10QzizxwZw6Ov1/Lu3 a7lk9efHD89gZuDpX4/tZN57ORT3ak3nr0cDiNlsxmq1Ul5e3pOrkb6g3y08e1scK1f8gb3d/iLz hAbu/VUJD4b48vL/7cfqHZ4MH2FETHmQ8anTGRQbhn+IBWdZCRW5W8ha/RZbMrIJmrOGuyOe5Q8v b/FgXdKnxMznwSXJbJj7KHmO3izEm5UvhlM1uYbHHyrh1SOR3PNPQ28WBP2m8NTt95JQu4svtv6F 7OpKMPhhNvsR6BdFVD8b6rw+X40UV9UBpwOIzUZxt4/Z3gz/znd4493PWFfV/NhJ9ucVsnXadJ65 NYnd72ZzyO01X8bqC3njg3TCLc0PBJN669jerKhHBSUlM55CXsk61dulXMJsHLUBpwOIvdbGpdjK dnsAsVgs9O/fn9DQUPr164fNZuujAaSSzf9M44DFQYW+wS6eOYggXz+CeruOtoLruHOogZX/X39e P+jB9UakcvPi33DNgCpyN61mw+psKsrqMYZEM+Da6aSkfcT43JXsqQnDnzAMQJ/KbeI5/tH4h4Th 0/Uze1x9uZnV/xtC4YB6Vny3juh/+lPYa9WYuGb8XQyt+ICnP/mcY71Wx+WnuMyGncCmCGKr6v6Z 04Ah3JdiJu1fbf/gYP/Gfez/8QimhmXzZp/oOrtUNFJccrLV/2CSE4J7rZ6eFETquAjKs9LZqi+8 i3CK4io7RDWdRCguq6FXz11dILcFELPZTFJSEgEBAdTW1lJWVkZ1dTWBgYFdv7iX1NYVUauu+8ub tZEADOSd8OA6g1O57aUXSDj+Fm/OWdJ0pqKFvPVvkbF0AuPTXmXGpDBObfJgbSLdUHjECNc00ruT 1AQS1c/EsdxdCh9uZqu0YaOpD8RWVdXts6eDE69icNW3Hf+xvoqjVf4MDPGGksvw0iG5aNZBw5jq d4IVOyt6u5RLXnFV8ycYKsps535yH+W261GcTiclJSXs3LmTXbt2kZ+fT21trbsWL3KJCCNxwTMM t6/k/UXtw8cZ5VvYumgemwo8WpzIeXD18vpNYOCSPLPX51Wd7fUor6rr5j72YfjgAIpzz32BlVkj S6VDVqaOi4bcbNapaXjRiovrTl9+Wkdx5aV5lHTboaKxsZGioiJ3La5HmGJ+wiu3TGhzmVAu7yx/ ln9Ud/46v/gneeW7I7ECJVkv8/rJsdw5YgwJwSYc1QXs2LKUN/NKCRt0O/dcM4mUUD8c1XlszljK m/mlZ5aTMP55Fo2Oasqszp28+Pbv2GGI5cbRtzNtUDxx/YIwY6Oiuohv8tfxj71bOVDX9RvLr/8k Zo++gZSopkGa1FdQUpHHgZx0VmYfpLKLffLOLROafil9nydWftZ0ttHcVNf3EpKI8oXaioNs2Lqc FUfObg/9prPo7h+S3OJdNP+Rd5jf0Yqcx/j4o6dYcbLLzbm0xTzI5Emw/1zho5kjm6xNeST5V53z 8ivL0HuZOPtOkkbFExQSADUlVBRkk5v+FhmrN9B2NZYZy/hZ2mR8gIpPHuXjI5OZnDqd6FgLzuPZ 7F/236Sn5+E/MY0Zc1NJSAjAeTybPb9/ks8z8pqXQsRP1vDQnfFNBwn757yfOo8c82iGzZ3P+HGj GTAgDCNVVBzPo3DbSra+t5Kj5fVd76PgyYyd+yApo5KJHmCh5nge+dtWkrFsOSc63GcWBv7kSx66 MxqA3CUj+dumeIbNfZzxk0YzICQA7E1jazJXvUzGmW04lzAiZsxn4ozJRCdEE+RvwVlTQkXBbnLT l5OxdgO2Dj96bqol4kHuX/YMg8xnH5qdns/sjp5rz2PTgptZl9eNfXup853ConsfaHVMIfS3vDex /VNth/7EY+mbaNeWabeMA7z+1nN8ZQcIZGjy7cxKHkOCpZTM3R/wzrmOkb5J3DR6BpNj4onqF4QV GxXVBWTnb+ST3Zs43O7y3Xjuu/tpbg42Awd458N1BI6+lclRkQQZask/ks476z/jAEl8b+LtfG9Q PGGGWvLzP+XN9Z+T66nLUmw2KpyA8XzOnloZGNDA0Z01LR7zYfSYEcweFsngEH+sRtjfxVJMAf0Z PyiaMYNDuTosmPBAM2anneKyUnZl7uPdvSfbHdPOvHbQBP40ewjBgO3gen70WTmJI0dwR0okiSH+ WLFTXlbK7sx9vLP3JF2eZzcEMOn6EaQmhDM4wBecdVSUlbIrK5sVe09ii5/I8u/HnT7PXMnqv33G m0VAQCJLHhhL4un32P61f+eXWS0PGN6MnjGLXw33PfPIoa8+ZeH2KnrKxexXAPwG8+tHrmP4mc/N 6ckJ6gF8GD4ymTtS4kgMMYOtnF3bdvJmd/Zxc32RiaRGVrH6n8XncVLBm4HxScxOiWN4pJUgHzPF x46wPyuHD7OqGD1rOsN3fcqL+Z33uFnDYrln3FWMjgkm3GqGU3UUl5Wy//T/+Fz1mwZN5C+z47A2 P1C8kwXv5nAUwBLE1HHDSE2MZKAVbGVFrNu4k3fzOxnbYghg/JhkZiSFkxjii9UINlsNhUXFbM3M ZnW+7bxOttiqmnsxT1F4AW8rU/Q0fr5oHpNjzJTlfcFrz7zGFg+PlvCKjY3tsdNcERERREZGsmfP np5axXkKJC48Er/mD5jvDTw0JZIv3z93AMEQSlz/SK6b+DNm9QeMtXyT9Sn/yK8kKOF27kn043BB JVGxoZTkfMonuUX4DbqdOYnwxcpFrGh+h5sjSQgKxC/0VuZf72DlmiImT7uVqwzH2J6zjh3Hiqho MBEUNJLrk8eT0q+SDV+8wBstQkzb7Rk5/mc8NjqW2oKtfJ23l9zaWjCEEhUzlhsTRhJWvZFX05ey o7PtMwQyNCKSoPgf8eOIjTy98jNsUXfx2LRbSSCXzXvXseOkg7CEW5kdb2LDR0/x7pkQ4Udo/1jC LGAKmsH86wP5Ov0DdnT0Jeqs5HBxUfvGQk+LruLL10+x/P5w3vLAhytwzhoWTNnAH+ct4eKzVjRx P3mVu+9M5tSe1excv4Xjx6vAP4zQlOmMnTqZoOMrWbXov8k50aJxaoomIjmZYY+8yqQEwFxP4Sev k7G9kKApj3PT1ACOb6sidFwYFWtfJyOjEJ+J87lpKmQsuJ2M5oauNZmBCWEYEx5k9iPw5aI8UtIe ZJA5j4NrV5KVmUeN3UJQwmSGzUglYUAhOxbPZU1GZ6MGLARO+Q13p91J0PEN7En/nLyCeoKGTmDY 1FQG+WezafE81m3v4AJyazIDE0YzPu0ZQrNXcmrUvUTbt7Bn9WryCkpwEsaAKfcycWo0hS/dzt9W nyOEBE9n6uIXmDCgkNxNG8jJ3E1FDRj9oxmQMplhUycTWraajxc9SdaRDhr9bqklgMChowkyA7H3 MntBNHsWLSGvg/FoTnsJpQey8WT8CLulhE23m7n94UCyPbheMBHaP54wC0Aok2/4EQnHlvJmXvuI UFuex+EOT9C0WEa/qcy/IZCV7zzHZst47p/xI6YF1ZKdk84X1QnMvmYMtVuf4pl9bY+xJkIH/Yin pt1AUPVeNmfvJLuiFBt+hPUfyfXDxpNsLmBN+u9491jr2vz6xRMXNYP5U8YQ6DRD9U7+sWcjuc6h fG/iDBJqD5DrN5SEhr18sWMdB5wJTJswnbgTf+CJL3Z56BgZxEMP3ExqSB3r3v+IV7o10CeSJxZM wPHx6ecbgrjvrmnMDrGxce83bD3SwPhp4wje/Hd+mdVJgzBsDH+6/yqsZaXsP1LK/qKTFFfasRt9 CI+JYeawaKxHNvPLzwo6Hpdi8GFweACjr7uR2cbDbLXEMTWgjl1ZuWw6UkV5g4HwmDhSR8Zhzv+K X3xW2GkD0xQcy5Ozr2M0pWzK/JZdJTYcBisDE4aQmhSBuewgr+zy5bHveLPi42wONZziUJHtdCPe m/CwYMItVmbMvI7gzR+2CSBg8gsgMcQEmJk05UYSD/6jmwGkPz9+eBrB689jFqyL3a+ttgkITOKx aSZWvPEvNlqieWjWBGaG2NmflcPa3CoIG8I910dj2/gpabu6E2BNTJo1i/lsY97HBecOQs0MQaTO upH7IhvYn3OIrUfKKbY1ED14COMT47i6oZyjlmBsG9vv+yY+jL7hRp4cF4zt0LdszCni3zY7GKwM HBzN1MQYwqu+4cWPt7O1s3+LwYfB4VasBgNBSWN5LPJbFr6bgy06hSdvHcbVnGDTzm/YWtJIeGIy 9ySZWPe3z9qNgbJGJvL0rFEMrj/B1v2H2VViw+Y0YA0MIHFQHJMSgnHk7+SFT3P5d3dPQvglsGT+ OBKdR3jhtY1sOq+TFyZuXLScp67zP/PIiTVpPPDavvNZyMU6eYV1llZyuLjFl0W/eBxEdv2yhlIO F1cSVQtEVPL12ud4tTkUHCnA1H8Jc2Ihc/2zvJhT1JRij+RB8IvcOSKJFRtPj362F5FbXARMAOMk 7r95LI6Tn/LsZx9woGXD48guvtr3Edfc8CSPTnsS2yeLeLe47QfMj6HXP80TiQ6++uwJ3jzS5gs6 fz2fbE3inpk/4dHbfsKrf/8DOzoabN9QyYFjlQQG1UJEEAkjnmbOxHhsOX/i6a82caz5TX1kK1/v CMXRKsjUUnryIKUA9WNxYOLwsYMcuGIHl1kYMDSemmx3hI8A4h5fxr1T69mx6CY+b9Ooz1u/nK3L JjNx0avMfsnC+wseJa85YDkKOZFZQmgNYC5h/+K5fLj+dCM4Ixtiv2TGODj40u180Nw4ztiNc8CX TE6dQMbLG5oes2VzNBMgFac5lVsWT8aZ+xbL0p7lcItvkMPbV5P53svEP76Muxct49TCm1l3oH1z 2TrxVeamjaZi5Vx+9+cNZxvUGSvZ+eeXiX/8T8xevAJj2u18ntnmG8GWzdFMCxV2C8On3kvNtmf5 46K3ONniY5GXsZL9mcv4z0d+Q8qme8jsKHBaJzP9pRdIyF3CHxcub/X6pv36FhlLR5OS9iqzXnoV 5yPzyGm7HLfUUkXlgQ1NZ97t03ESwIk9Gzh8afaku5Hj7DGFSK5qgKiKPA4c6+wkTBfL6D8SO4EE Rd3LoikziKpI58X3P2BHtQP4nB05kQTa2y87cNAjPDMtiZId/5dn9hxsHQqObOXLPR9xzfU/48c3 Pw2fPMu7xWefUVudx4HSUuyYcZz8lOc/+eB0z8YuMu2BvHLLBBJK03n+k+Wnj/u7yKz248XbZnCd 7y6+9Mi4RBuHKhsgxHZBZ0/Bm6tvmEiqtYgX3s5gUy1AEIkNXQyeLtnDwtf2YKvvoGGdX0B65mCe +cE4Hoov7Ljx3XCKQ0WnCLI1YB1+FZPKvuWFd7ewqeU25Bey7mA5//ODa3lo0LGOz45bInls9nVc XbaTtI9zOdTyOyvvEKu3JfD03eN4YloD5vpvKSw82aZnp3nguIPRnWyzo7aK/bUAJgbWQ+K59svF utj9CrQaDF9fg51QgqJT+PXMYUSXHeS5t3edbajnF7E1y0pwfTd7zwKGMHuQnY0fFHYvfGAldfY0 7rN8y3Nv72J3iw/g7puveCQAACAASURBVMJiVm/cx6QZ3+Gx4YZOpvL1Zvh3buLpYQ7WrfqYN9r2 SuQd4sON/blv1o08cZeBF9/dwtaOzvCcfr8BBIXYIdKHxDHf4b4podj2b2LhFwUcbX7v5BeycbMV R5vPkyksmWfuSMC2MZ15eytab39hEZuycngnIJr5sybwq9nwiw9ym3pYulJro/gUJNaezyx2Z7Vv Dnp+NibdEOE8VeT8pU2PRCn5JyuwF3zAK83hA4BKDpdW4tcvEFOHSzJjrtvIK23DR4vX79j4Am8c 8WPaxOlEtfmrKfwu5ieb2Jz+XPvw0cx+kBWf/Y5/1I/hoRvH4NfFtplDZzB/fCjfrH+Wp9e3CB/N FVWXer4H42KZXYCXhz5bFnz8wVlz8d3shpQ0Zs20sGfx3Hbh44zyDWSkzWNLzXRmLUjF0sFTatY+ y8frW56BL+R4bhXObS/zcasz8yWUFpTgP6BpRq72LBjLVvJ+m/DRcrl5L89l1bYAJix8nHZTT1hT mbFwMqdWPsryluGj7evXWbgmLY2BHX9omrZp23/z5lNvtQsPUE/l6pfZXzOaYZPCOtyGgY/8huHH l7D81+3Dxxm23WQ+M5f0ggnc8sj0TvbHxdbSt9Wf/rx09J665BiHMmfmFPzyf89THy0/HT6aOOqK KG375W0ew/03jsG273c83zZ8nFHKjq+f45U8E9Om3EVCR28SZy6r1n7Q6rIqR2kuJc5jfLF+eavj vqPiMCUEEtXVQdptHOzadZCNO7NbN967LZiZSb7s37ztdPjorsaOG8nNqg6zrggGD+56Dih75be8 +P6WDut3lBxkRa6BMcMiOvj+9Wb4DdcyvuEgz7UNH82vL8/luVVZFBt7eRrqbnPffj3DGMH930/C mvsVC9/b1a6XwNHthq83w8clMrA4mw+LutejEzTsWu4JK+WNVa3Dx1k2Nn2xnU22BjqaP9IUOYrH Ugxs+nh9+/DRrP4k765az+r6OH48LfLsZVbnYA4fxmM3BPDvtZ+zML1F+DitosrWJmAFkDotGbb9 i+faho8WHFWFvLJqC/tDRvFQ4jm+/Fo5Qfq2w6zblnsB91NxsOWPr/HPvDJq7DWc2Pu//HF5znkv 5WIpgJwnR31tm+v0mn5z2Ns+3qyzN5OdzB0fsPecDeNKNn+dzrH+N3BT/9bLvGbkePyOfMA7x7o4 +jfkserrrTBoBtf5nvup1B9mzZpn+W1OwWUz8HP0d04RXWMkzyOTRLiruRZAwuxUfLa9zJcdXY7U kmMLG5Z+DpPuJamD7xanvaPxJfU47VU4z6umenKXLekkfDQrJOf3b3E8NpWx8a33hXXqgySxmvRl W84x3qWEvN+/TK5/KuPHdTb/Uj3H168+x7imEk6WgY9/B683TWbsJNj/3koqscA5fwrZs+xznONS GdTp98FF1NLH1R8xURJRR+qQ3h6I7g42sjOe45n1W+lOP0pgwgyuYSvv7cjr4jhYy96MjzjgN57b Yjp6kziwdfhmd1DZ7rjv+SNuRX4mL/6r8MJuXmbwxWqxU1zm/rodTjAZum74O4oOs6vTr7+me52Y LB38XwwRzEg0s//r7HNe7uIoyWZF7uUzR3939+tZdexfn05a+gW+R5r5xXFHooGt277t5nKsTB0Z QfnePecerN5QzIpPM3gnt22o8Wb8mCFY8/fwZmEX78+GClasPwwJiUzqTvg/VcrqVf/guayq7n1i wxKYGljEh7u68fzaY6zYaWP4sO6FIWhk//YMXsm6wBOexV/x0qM/5K7v38UDT/3J4+M/QHdC7z3O AjILzjU8/LTqfWRW385VEYFwsvn5sSRHmMjdsa9bPRKOEzvJbniE5FATXx7p/GNgr97Cl8e6UdMl IGxkNb/5YQ2Th7r4/IUANnhkre66Sj+ZuAQLhcs+79YSG/Z8Tr79N8QnW8jM6KGRAvZscrZ1Y3L/ E1vIP/440clhkNfcc2NhQEo8zj2v09X3AbYN5ORamHxtMmRcyM0Zz7H9A0YzICSaAS/lMKHby8sm NIQLnMb50h00Xn+wH0u+ruWF3xUxeoc/L78QwIZLc6ZHcBawISevm723Jq6KisVxLL17l5Lad7H9 xI+YFRUL+d2Z/OAy0VBFYZUvY6IDoOj8GkDW4GhmjEvghphgBlp9T8+a1YDNVtN0f5IAAxzpkaqb hIQz2FjO6vyuDkYO9h8qx96Nq7T7ArfvV2c567I6P2vfXYPHJjG89lvSujuexRDM8PA69v+r6+Ht xYUdhaNghkcayNlc1K3aHUWH2e+cyPBwSM8/93PtVYdZ2+WX2FlBkcFEWyN4+vG4br+GylAGUnBF 3CVeAaTXVHbzBoiVlNRBitkPzpxrDcTP7MBW280PQkMlFXYTA81dP/WyYXadvvzKk5eR1HOqBnwG XOQlN6YA/P3rqSnrZgPWUUJNjYVQfws91+itoqam62dBCZVlkBDR8qy/Bf8QCzW5Jd242WIVNWX1 GHui18AcgNGex47F/01mWXdfVEVFt597ebksLr86byb8zCZqKyq72SfhoNLuwM/ih4kracrgKlZ/ fYyZM2/g6frtvJNTSjEGTOc8we7NwJET+fWUGMxlR9iYuYdVJTYq6hvAYMBqtRIeHsr4kB6+7Mli xoodWze6gG22S+Fu3X1kv3bEEMkdw6z8e2MO5568uQWLD1YcFF9w8jFjtdixdTyNYXsNdVTUGxho 8Qbce/8as9GAvfIwb3yW1f0bujpPdX9fXeIUQHpNYNMMOF0OOAwkzLfpEq+zKqm1mwgzd/MrzxBI kNmB7fLpTe5SyY4A5u3ox+gHT7DiwSombwj2QC9IPccP5OGTOpkIPueC733oqGoKFCHdDBSmMPz9 6zlV05Nn3APw94eu71gWRmAIOMtbnhVtClP+Id0JZgH4h1hwFvTAdJVledSQir85m6MHem46zMuB ZWQVj1/vzfKfRfDst169XY4HOag9r0DRHFg6uwT3ctKAo8GA9XRDrSIng//fch2P3TCN33/37LPs Y5IYnJXdrhFlihzFr6aEcmj9Gl7s7Hr4nMMUB8Tx457bCKi3YyMAq5GOhg+0YrX60BuDc89Hn9mv HQgflsx4Cnnu4HkEuXo7NkwEX/AZEDu2ejPh3Q0UBl+CLA3nHkNzgcor68Dqg6mygn9fcgNoe57G gPQWYywpsd24S3y/EST3q+SbEy0vjSog+4SDhIQRXQ4sBzBFjCXZUEB26eX/FdmaF7v/5UthiJPo 7l1UedEq1y4n3z+VyTOiu/0ag7Xt2f5sDufWEz1xerfOQhtGTWeQOZu87B4MIOZkEsd1I0BETGDQ gBIKs1terlXP8cxsjKOmE9fV+DrrZBIT6inc3gOTv5ZvIa8ggEEzUrt5je2VyxLhJOyEL6uvqPAB 4OCbYwWYoiZ0PLC8LfMIro9wkH/sSrijqI3CSgPhgc2DCRv5994Mfvr7vzPvrTUsfOtTFryzhrSP D3Z4BnfMyCFY87d33kj2lLJiDjmDGd/54K7TTAwfHExfv3Cgz+zXdoJIHRvK0Z3Z7D6fWZoaKjhU 5cvwQRd6lC5nf1EDiUlR3TrOmyLjGG4sZf9FDXTpmKOokH8TysykPvaNY72RtLf/yl//2vTz6rwR nY5W7kkKIL3FWUrgiOf58213MbTDI1wgI69fzJ/vnkB2q3tvADjY/MUTvFh9O68/8Az3RXUSZMxJ 3HbbK/x5iok333muZ6d3rMglvyGeyQmhnT7FFDSG28ZPIs6TPcF2L8CFxVPfIuXL+dttN7F16DL+ 65OPmHptZ0EkmriHP+Lna7czu90sSVXkPDOJ98vm88QnazpfhnUCE3+7nbSF8NmcTqaddRd7IT6z N/GL19IY2OGxNJr4x9fwi2Wp5C+8ic/bTMNrW30Pv3spgFmrt/ODORM6CFbRxP9kDb9YNZ+KRZP4 MKMneiiyyZg3iY9r5vPE2i+5bUpy5zNcmZJJ/MlH/HztR4yP6IFSWirYzXF7Mikz4zt9iiEmlfEP 30t/D31LNH9eLt1RLBeuMvs5HsswMf+BV1g0Ir6Tkzynj8/3387Rz57gt12OJ7gc2Phw7T5MN9zY 5nEHxeUVHCqv4mhJBYeqOj6TXFhmwxQSzuBOPnRBkYN54oH/4OmkHj5YNxTx4p8zsN1wB2/PGszA DuoxBQ/mmYdnMduvrov+jyp2H6nj6pFDGNjBX4OiE3nm4TuYH9NzX3p9Zr+2YuWOOTMYf+QLfnHe N1+s4t130tmVdCvL7xvD+A4/gN4MjB/DkgU/YPldCW32fSObPvuQ5ypTeHvBdB6K9ul4NZb+3HHX 7SyfCW+88S/Se6KHovYQv3ztC/an3MoHD9/AjLDOm9ymgHDumHUbHzyQwuAeKKXFmhj703lMjggh JMSf4r8/xaN/2tcrPbhXziVYhlDi+oe2/jLxi8KEH1H9kxjaaoaoWkpOFpydntEQSFz/SOIsYGqI ZWj/Wg6fbH1TPZNfJAnhkRw7WURly7RviSIhPJZjJwtaP95QxCfpy0mY9hOeuncEmdkb2Xz6RoRh /YdyffIkUvxKWbPmBVZ0OF9oLQe+fo4X+RmP3fYiKQWb+CpvL/nVTTciHBgzlpsSxxJWvZE3Plna 8T1AMBEYFEuU2YQ1yASGKOLCk9pMoeqgtrqgkxt+tdyerazaMYNFNzzDovB0NuTnUdJgwuobSlRo AskxIxga6kdlwQdknntJl4ESDr88l/ftf2L2ki8Znv05+9dv4HBBCU5zWIsb7+WxY/E9Le4+3lJV q2UkbVvNzvUbKD1ehdM/mgEp00mZOZnQspWsWvjfre9VYYqmf0I8Qf5gDEkmbmgVx9vcyM7on0z0 0DxKc7Nb3/HbP5nooaMpzd3d+nF7HhmLlhC3+AXmvjeZg2tXkpNZSI3dgn/sBIalppIUUsiWRfM6 vAcIgC3jUZYteYF701bwsykb2JO+mpyC+rM3MgzJZtOiuaxrew8QwBIzgdCQeILM4BM/gYFDS6ho W6M1noiEZPr7g0/MaAbGw/G8vDZXWRSS8+t7WP74n5i96CMSZn/Onub/DQH4D0gm7toJJIwaTZB9 N1uWPMnWEz1VS/OOWc2Xy+7loQUruD/+LXZuz6amxoIxJIzQoROIGzWBhIQAarYtIb/DPXsZOX2s bTpOBxJlAL+geIaGtz2xUdv+mHqayTeWuH5Nl1ARHIoZP+Iikhja5m2ZW3yw0y/dyvylPPvFj3hq 2q94JXEnG3J2cuBkKTaDH2FBI08fnwtYs+aFVvcAgdM3IgxtXm88caVtj59+RIUnkUABudWtvkUI Ck0iwd728T6k/BtW5CdytYEOZ5Cy+vlgrz3V4X49uncn64ZP4en7fVm77TD7K+vA6EtwSDijE6IZ H+OP7dg3bDw2hDHWAIZHNmC3VfHvqhZLswRwdYiJaKsBCCAxso7yyiqO1rYMPSYGhgUwOMAAlmCG R1ZwqLiKipb11hfxyqptPDl7HC89EMe6Xd+yu/gUdqMPgxOGMHNYKLasDJ47NISXWlxe1pH92/ax /75x/OoOH1bsKqIcM8Eh/RmdGMf4KF8qDn3D1vqrGBwSxPCwBvaXtOynaKo1uGVLzBBMsBGsIaEM r23VaMBWWcWh2tYBzy37FTD5BTE40NDU4xPiixkzgyP7M7zN58Z+ysah8o7/x2eWFZ3MzPBy1n52 8sIatg0VvLtqPeZZN/L0I9Hsz8pl46FyiuubbkQ4OiGaMQF29md+xS82FnZw34xG9v/rS57jRp68 +1ZGHzrMupwiDlXawehD9KA4ZgxruhHhKx9s7/geIHgTFBxAtE9TsrOGmMEYwODI/u3u+2KrLG/3 fzm7LSd5829fYJ91I/Pvn8XM3MOsO1hEoa0BjGbCQ8IZnhDJmJhAKP6WNz/d17NjQExJ3DgiBAB7 3v/y2sfdHp3idlfMndDjRi3m2Qlx3exOtZO/ZRFP7ykCwC/+SV757sgW3XkVbPjkMd441vTbyCmv 8HRiEGBj+9on+G1+05dHwvUvsnhkGGAnc/0TPJ9z+jKq8B/x+i2BvPnO79jREMjQ5NuZlTiCuKBA ggxgqysi99A6Pt69ngPd6LXw6z+J2aNvICUqljA/KzgrqDyZR2ZOOiuzD3Y+TahhPD+/fwHXdnGd j/3EX3nio8+7MYWliahBtzN79BiS+0cRZLRjr6+lpKKA3GM72ZGzlR0VHv5i9fCd0NuyxN/JNbNT SRw1mgEhAUAVNQXZ5G9bydb3VnKiG33mlqH3MnH2nSSNiicoJADsVVTk7iY3/S0yVm9o1+1umbGM n6VN5ux5nxJ2pE1izfZ6wELcLzYxd2YYUMXBxZP4YH0VYGHg41/y0G3RQD25S27ib+mnD0wpL/DY 4gDSZ88jxxFNXOp8xqdOJnpAGP5mOFWWR/62lWQsW87R8m6cMw+ezNi5D5IyLpnoEAs1x8++vuP9 MYHpf1vBhAEtH6sn/6WbeGf12YNn/zlr+M9Hks+eVbFn8+WCm+kw39H0v5k4504SkpMJDQnASBU1 ZSWU5u4mJ2Ml+9dtof04xp6pBSwETnycm+akMighGn9zPc6aKioKssnfs4Gc9NXkHenGLGRu0lt3 Qm9/rO2Mjcx/PsHzeW2PJ6HcdNvzPBzV9ZH+9bfu56suLu83+SZx4+gZTI6JJ65fEGZsVFQXkJ2/ kX/s3kT7WVrjue/uX3FzixaK/dhfeeKT08dP3+k8O/eHXAXYSz/lmZUfcBjAPIlFD84jGaA6nUXL l5Pb5Rb0Er9oPrg7jhXrs9hUVEW500BwSATjx4zgniQ77yz9svOzyZYgpl43gtSECAYGmjE77ZRX VXHo2Ak27c1hY5GdMbfccfZsfeVBfvnnXadvAujN+Ftm8XRS6/nkbQe/Yt5nLW5wFzmGP/0gifAz z2hg/9qP+WVWB+MQDAFMun4EqQnhDA7xhVN1FJcUsW7bPlbn2yB+In/5rp0X3tjO7nPsEmvYYB6a MoLxkf5NA9xtNg4VHWPdrhw2FjUw9a7/YH4M4Kzk+7/77OwLo6/l7buvOvfNG1tu66FNLPiwoP3d 3S9qvwL4MOOuWd3rqTl1hFf+vJF1nR7qfZh6x608VL+l9f/lgpi4OjGZ1JRohof5E+xjoLj4GDn5 h0nfeZj9nTX6W7CGxXLPuKsYHRNMuNUMzjoqikvZlZXNir0n2+/LZoZonv7xjYzvpAOlJfuxbfz0 vdwuphn2ZmD8VcxOiWN4eABBVjM47diqqjh0pJCtBw+zrtDW8z0RiT/l7ZduJoITrEmbx2v7eq33 9qTbAojL5cJqtWJoMc90SEgIISEh5ObmtnpeXV0dDQ1X7O2y2wSQ3i7mMtfLAeSy0CqA9HYx4glN AcTC7Q8HeDSAyKXhvlm3MDMhsEVQtFN8pJDVG3eyuujyOUiYuhlApIXgZF67fzC7//YZb3runIl0 05B5f+S178dQtuFZ/nPJlt4cN3TSbZdg+fn5kZKS0iqANEtJSWn1e0FBAQUFV8KgPel1Nm+qaCA+ gm7M4CQiAPExTijzRXOFSUfe/fgz3jX4MDDEB7PTQXmVrfUlTpcLowmTs+4KmOHMfYKiwjHn72OV wkcfFM7YpBio2cyf/tSr4QNw4xiQuro6Nm/e7K7FibhHuS8rMyt45smTFL4ZwOodpq5vhidyhQqI sDN5cjWP39LA7jd8uz93vVx5Gk5xtORSuE/GhTIxJiEYyr69Yu7L4A4VWf9iXlZvVyEdK2bD8t9y omYzX/WBE7KaBUsucwaWvxjK8uN25v/XCX7zHffP9S1yeWgk9dFiXrjdQd674Tz6WS/cuEykjwga NJaHEhrYtO1ixzGI9B3FO7/gq5y+8Y6+cmbB6gvMoSQEhWIKDQSDH1ERSQx1AjiorMjjWN++39Gl q9yHZ38ZybO9XcelxhpPRGwYPglhGM0BhCZPoPlm6DW5u6m0XYmTtF7OvFn+y2iW93YZIh7TeqYj ACxWBidcxR3DAji6cT2vF+qklUhP6NFZsKS1hPHPs3h0VId/K8n6vzy28aCHKxLpjIWIn6zhP+/s +N4UFZ/M5ZWXe/7e8iIiPcYSzdMPt53pqIHy4mOs27idd/Mv50vMRHqV+2bBEhERERER6cJJjQER ERERERGPUQARERERERGPUQARERERERGPUQARERERERGPUQARERERERGPUQARERERERGPUQARERER ERGPUQARERERERGPUQARERERERGPUQARERERERGPUQARERERERGPUQARERERERGPUQARERERERGP MfZ2Ab3Cmsj3HniA709IIibEjL3sCHu3/J2/vP0F39p6uzgRERERkcuXITAw8P/0dhEeFX4jaS89 w82hh8n4+wqWf7iazbkNRE25h4enBJP11U6KHb1dpEg3WOv5zesl3HysH58fO58XmoiJXsivr3ua R4cEsOvbnZT2VI0iIiIirdVdYT0g0fzHUz9n7Im3eWrRx3zbHDT27WPLhq/40W+f5+cPbGbea/vo MoNYw5g4cyqpM+JIGBBMiBlqyorJzc4h/b11pOeZSP3to6Ss+h9+neHs4e2Svih4xsMsnbKHuU/t wP0day4mPFjGD4PN/PTA+b3SFPxjnhs7lrJDr/JM7tec58tFRERELkqPBBA/Pz8iIyMJDg7GZDLh cDgoLy+nsLCQ+vr6nlhltwRPm8d/DDnI8nktwkczx7csX76TaT+/mbF/3MeWcySQ4GtvZvGiqSTU 5LFp3Vf8/kA5ZXYIGRBFysRrWfD765i9bh0FIf0ICTECCiBXInOIL/4hvviD+wNIhI206Q5yPwrl 8/NceHLcdYSUvM1/7v1nDwQjERERkXNzewCJiIhgyJAhVFVVUVBQgN1ux2w2ExYWxujRozlw4ACV lZXuXm03BDNh2kjsGxazprjjZzi+/ZZi83VEBAOdPMeachsvLb6Wmk+WMucPOZS3+msO61evZ2n8 NSxcPJupA0zsce9GiAAw+a4qxuDLf31k4vwivYlgkz81tScUPkRERKRXuDWABAQEMGTIEHJzcykp KWn1t+LiYgYOHMjQoUPZvXu353tCTCO4ZkgNO/++t/PLqxx2wIS502XE8kjadfhv+isL24WPs2x5 O/j1Ql8GLJt1sVWLtGet5cHvOKn8OpjVnb0JRURERPootwaQuLg4ioqK2oWPZkePHiUgIICYmBhy c3PduequRQwh3FzM3rbXXgWP4Hv3/gc3j00iJsIfM3ls7mQRwTOnM9M/hyW/z+o0fJxxYj/rs6cw tOxcl18ZiZlyA3NTR5GcEE6IP1BTTUF2Dumr1vHJ9vI2YcnItb/4L5bMDADqWLdkKduHTmfOpHgG +ENNwX7ee2kVqw6YuHbObcxNTSJhgJGa7D0sXbKK9CPNtQQz+7VfsCDZBMDsqU9SEzOMuXNvZNKo KAaE+EJNFWXHj7EtfSPvfZLDiS4HxZzvtjQLY85rP+eRZBNwlKVzXmKluWUtRqipJnfPHlYt/Zz1 R7pxOZs1jIm3TSV1SjzJsf3wN0NNWTkFuXlkrF7HyoxOagm+hueX3cM4f+D4Vyz4wRrKrr2OuXOu Ydzpbao5Xkz2to0sW7qDAx10IVin/Ij3Fg3H/8wjcby3rpMgWradtDvfZ3vXW9RK9HdrmOBv4PN/ +VB1nq8VERER6W1esbGxLnctbNiwYfz73//G4ei8tRoWFkZMTAy7du1y12q7J/GnvL0knLf/4xm+ Ol2eKfp7LHr+UZJsm/lizQb2lo/kgZ8n8sW8R/l7u0uwfEj97a+YU/A6c18u6HqQelesscxZ/CMe SYbsTTtYv/0wBWVOzCHhpEy8hpmTwqlZt4q0JTs40mJlpuAwkhOSmLNoFqPMYLYfZd1761lf4MO1 c27htthithWEMy6hmk0r15F+AFJm38xtA7JIm7uKzNPLskbEkjDAxIDUuyk7UEzaI0n4lx1k7eo9 ZBZUU4MvsSmjmDFzOLE1u3kp7f0WAcY923Lm5RGxJCRfy8K0eArWlpEwMx5z7h7Wpudw4HgdhIQz ccYUpiaUs2zh67yX13kIsQ6dwuLF05vG52zaz/YD5dTYwT8knKETRzF1XBT2PWtYvHhjBwHCSER8 FLFTZrF4Zh3r9oQwdWo/CjZtJn39YQpqnPjHJjJj9nWMsm8mbcEnZLZdhqkf8cnh+AMhM2aTlnyY JS/toKyjYsuKyTxS3em2dKyBB18+yq9irPz0nv6sPu83oonvXLuKnzh+yV179p7vi0VEREQu1km3 9oBkZWV1+Rxvb2+8vLzcudrz0LK1Fs330/6TId++ys8X/4NCBxAczF0kdvLagQyNdZK7+tjFhw9T FHOWPMJc//0sfmRVm7P6OWSkb2RZ/AQWLZnNS4thwVM7ONG8BeUlZG4PYIYdzPaDvLTwL6w+/fqM bCcD3ruHcbF5LF2w9ExDPWNPHQPeu4fZkz4mc33TY7YTBWSegLJr61i6IJ7ja99mwf9knVkPwPaM PaxaFsvDSx4hbclsah55n4x2De4L35ZmthMFZNrjqDFfx6Tb+rFn6esseq+gxRiFHDLS97D9lwtJ S7uBTfPWc6Sj3Ro/hSVLrqNm2evMWVXQZoxDDuvTN7I0ZhQLF89myWIHC36+pc1ynJzIK6Astg5C kpg56SifpP0PL29vERK257B+bRaP//5h0h7Z0z6MOqrJy2x6fkRyHSQcIzszr902XzBrPZPjgTwL uzVdtIiIiFyCPH4n9JCQECoqKjy92vaGTGNazBE+fu10+OiKyQez2UHNOS+p6p6YO+9m7oA8lix8 v9NLimx5W3hq4RoKkmexMLVfB8+oY9vSv54JHwCUH6PguIPs91a07iWwHePAcSMhIb4drqtm0/ss bBM+zr62gD+n/YW1jGLB3FhMPbItZ7cpe+nrpL3XNjwAVLN+2UYKYkcxKaaj14ZxZ9pUeG8pi9qF j7McR/bwPwtXtB+4kwAAIABJREFUsCf2FhZM8em8FPtRVqa93jp8nN0glq0qIGTcKBLOsTU9wRJj J94MxUdMdHyhYzcYwO7OokRERETOg0cDSEREBAEBARw50tH5aw+zBmO1F3PE44N445k9O5zc9z5m fVfrPrKR36+tZlTqNXTU5q6pOdXhy+w1dZ0ssOMOr1VL95x7TIstj6XL8vCfeh2jWiUQ921LU+Fl ZKw7Rw/T8XLK/h979x8XZZkv/v+lMAM0EzAoDhsDKsMuiIlyoEAxWdO0bE03tXI550PaqqcNz2bb JzynxXOObOfEebTaHvXrETeV/SzrltpqFCWhholiwqKgBBugwtBhQGfUZhIGtO8foIGCDDAMoO/n 49HjkcN9X/c19z1zzfW+fuKBRt3J38ZNZrZPGTs/aOi+h8pcTvonJibNfhBVV8eYKjl0qvP7C2Cp M2FR34/PrRFZP3PTtuALNNS49HD1qzaKKGJ9wHh5EHwHhRBCCHFPctpGhCNGjECv11NaWorNNgja Xw1V1CvnExWqIL+kB2NZulwiy04BgYSpv+bQEfsin8pDlZie0hOmOkRNP62b+oUddVHzF6epXjWN iYFworLtxUH0XjTB/gT66EnJjLD/pLoHCIQhtRGfp+Y67kCTtadtBzp+POkfee6BcPy+/SP/fF6W zxJCCCHEwHBKADJy5Eh+9KMfUV5ePsDDr9o1V5tzeO/YfFYnJWPZuIN9hTVYVJrbhhjd1NyIxebR uipTXzYWVN+PmquYOp2V3AlTPRYeaF1Vqp8CELuyYvkGE66o2/c+DKL3olS6YjMVsT7lc6rtjW9t 3+DktdgGlBIlyuFK6LrfRwghhBCi3/V7AKLVatHr9ZSXl3Px4sX+vlzXmi3Y0KFS0jYX3Ur+umQ2 JiaxfM1Gnml3qCY+kl3rC29JoJYvK2DqQ3oU+8t7PxHd8g0WRuPjA3bNTPbRtFbyLb29oB2XgO6X FVbfjw8tVLfPxyB6LybTN6D2RFldzZd3ceP+FetwGgE31XV6NoLSQPbJ18j+Mo5/n/Erfq7by6+q 7+IbJYQQQohBq1/ngOh0OvR6PWVlZQMbfAAYDRjRote1e63ZQM76lTwzL57liYkkLl9O4qpVrE67 NfgAaORI5mmYOounupzEcCtXVLc2NtdUU2p6gNipGrtS0E8Pxae6ktJ+3Lb6YTvej+bhBwm01fJl dbsXB9F7aT5ZRimBzH3c1/GJDyJNRlcaAN+Aa7j1KoGjHDKB1tvuD7EQQgghhEP1WwAyZswYAgIC OHPmDCa7x+j0I2sZJTUaQibrbv9bsxlDVRVVBgNV5eUYuqggW/M+YNMXGhKS5zCu21EsGqb/+jX2 pMbQsXpeyZ7MeoIXz2N6d/X2gBheevx+TmYWdLrsrKMsWDaJO2ZFpSchQY/l4Od80aHrZxC9F3MB Ow9+Q/DihSywq27tikrVvx2ArVOdXPs8bai9pkollTYYFdBMr0Ota6B0+vp3QgghhBCt+qUaEhwc jFar5fTp01y+fLk/LtELBnJzygiIW8SEXq9c9A2HUnbwgW0y6zc9y/SALiqwqkAWvPkiSQ+b2bq+ 4LbhTTW73yW9Tk/S+meZru08CYU+hrWp8wgs3cf6zJ5uVtczpkkLSH05pPMgpG2TwccpYP3W2zdg HDzvpYUTm95ltymQZanPM1ffdXCh0Iaw+M3X2LNpDvp+yg2ApaIeS+AkZneZF1e0D8Xw8wWB9s/K sLqRWwkENBHh5BW4hBBCCCEcwcXLy+vfHJXYsGHDCA0NxcvLi9OnT2O19uO4oV6wVhkZOXcJC0Z/ RU7+/3Yyj0OBRuNBY+MdZnhcv8xfcyu5Nnkmq154hNgfeaFUuqJWezI2TM/U+XN49f/OYrLLV/z3 q38g81wnE9avf8PpG2ksj2XiA64olW54eHkTHBbC3L//Kf/3xYfwKtnDq/9WwNfX252r8WVcyFgm P6ZHXVNN9eUWLl+x0XrI/Tw0P5pAyzkqTDYum2+87sGEubGE2c5ytqEFk7mRG0l6/d1kDv/xGJH/ sIAX5oxF6zIcF7UHfmNHM3nuDFatnk8cJ0l9dRd5nU0Z6Mt7AVp3H9cRPPZHxMWNxPa3Gkwew7l6 obHD81FofAkJDmXqYzpcKg3UXb3KhSu33NtmMyc+PYf7w4+wfPmjxOrvv/ls/INHEzn1YZ5ZOo9X Eqcx4epp/uc/PiDf3C5DivvRh/jhP/FBHgu5TmX5ZVyUTbddRxMQSHBYGI9NUlBz+gKnjZ0H2deN X3P5wUd44R8eZAzXuebhgY//KMImhDFzwaMsfemnvPjkWK6dPcmhv162c17RcBrcm4iPtcHf7udj Q0839XRhjP+zPHT9ILvqHLY9ohBCCCGEva4OCwwM/M4RKQ0fPpywsDCUSiVnzpyhqanzXQqGDx+O l5cXZvPATIBVRSayLnkmyuK9bM/IorDKjE2pISA0kjnx8cxU5JC4cgeGblNyJSB2MgtmT2JS2Cj8 fDzAcoW6ikqO7P+cPfuru5/YjTsB0yeTMHcSk4JH4aMGm+UbqksrObQnm90nzLdUSl156Nf/Quqj nt+/ZDlNyuIdHLICPMAvdrzCwkDAVsmmhM3sMQJoWJz2OsuCAdt5ti7bwM62cVABP1+F5ffrMasC mZ3wCHMf1hPo54maq9RVn+fkoc9J312OsdvacU/fS5uA6aRtfZLg9uOUbLX86aX1/P7Gcr/cz+w3 /4Wkh9s1+dcdY9XP9nCq07y4EhD7CIvnPtiaFx8PsF3FUldPRWkleYeO8Ukn+dHM/jk7k0I7Dpky HWPVwnbXUYTw6z3LeLTdamCzH331DsHD/Ty0eA6LZ4cQ7OeJWtmMxWSmuuI8pSdOs//gGSp7+lVQ fUv6Hy4QUeDL1P/04EqPTlbw44f28IvmX/PMyeIeXlgIIYQQos8uOiwAGTNmDFqtloqKCq5du9bl cSqVigceeIATJ0444rK9opmwiOXLFzFZr/6+smkzUVm4jx1bdlFYP2BZc7qbAchAZ0T0SMzKr3l3 loJ/+T++ZPTo4UkAIoQQQogBddFhs3CHDx+OQqFg3Lhx3R7b3NzrRWwdwlyyi9SVu1BodARolGAz YzSY+2ubDSEcLv89T47NMrH0p83s3qbowa7ozZibLajv06Ki37aWEUIIIYToksMCkKqqKqqqqhyV nFM0mw1USdO/GIqMat7+6BveffIKc98dwe4eRBKl549hmraEtePhD2ePcupbCUOEEEII4TyyGKcQ Q1T+//Phj0YbMd13OnbQbP4f/rmoGNXolfxn7N/Tw9OFEEIIIfrEYXNAxNCi0D5AsJ8HgbOfxbL/ j1gAbFeprmjAPLAj5IQQQgghxN3LcZPQxVCiYcHG13gp7NaNJK5yJPnfWZPXydLBQgghhBBC9J0E IEIIIYQQQginuShzQIQQQgghhBBOIwGIEEIIIYQQwmkkABFCCCGEEEI4jQQgQgghhBBCCKeRAEQI IYQQQgjhNHd9ABIUFERQUNBAZ0MIIYQQQgjBPRCACCGEEEIIIQYPCUCEEEIIIYQQTiMBiBBCCCGE EMJpJAARQgghhBBCOI0EIEIIIYQQQginkQBECCGEEEII4TQSgAghekDBg+MDedBtoPMhhBBCiKFK AhAhRA8oGRv+MGv+IZZHPQc6L0IIIYQYilwHOgNCtNKxaN1GloQqO7xq+jSJv19fMkB5Erezkvle DooF0/mnn83Ae98h3v/f6wOdKSGEEEIMIS5eXl7/NtCZ6E8ajQYAs9k8wDnphG4R6343lwtZeUgd 7grni4ooPHaInJwccnIOY9ZOJch6iPfz6wcgPyEs3/IfRH71IYUXB+Dyg9l3jXx5pgaDNpgXHtEz wmig4FLLQOdKCCGEEEPDVYf3gAwfPpwf/OAHjBgxgvvuu49hw4Zhs9kwmUwYDAaam5sdfcmhS6VB o1GhGeh8DBLW+nJKbsYaClRWGzMHKjMKTWvwqlYA8pm9nZUjH2VjfWQ6/zR5NJnnyqkd6CwJIYQQ YkhwaABy//33M27cOGw2Gw0NDVRXV/Pdd9/h4eGBVqslIiKC06dP8+233zryskKIAdFM0efZLBno bAghhBBiSHFoADJ69Gi+/vprDAZDh9cvX75MXV0do0ePJjQ0lL/+9a+OvKwQQgghhBBiiHBoAHL6 9Ok7/v38+fP4+fnh5eXF5cuXHXnpoWPUPN5MW0F4u7nWr+zL4pXOjrXV8N4rK9hRdacEVQTNXMSi mZOZEKTFR63EZjFhNJRT8ule3sspof7WEUS6eazbuIJQJVD5HrnNcUQGaVHaaijL2c66tHysQTNZ 8vwiYsIDUNtqKM7ayPodJdyYSROyfAup8wNQAtiOsXZRCvnKIGbGxzMnMoQgrQ9KLJiMBsoLs9i7 K5cSsxOGMik0BIXHEDk5nMiQUHRaDT5qsJiMGEqO8V5GBvmGrvIRxPNb1vFMQLuHk7KPuE6PtVG8 ZTmr93U9P0UxKpI5z8wjLjIIncYHNRZMZiNVxYXk7NvF4SprD95XCPOSVxMfpUVpKmZvago7Snpw vhBCCCHEIDEsMDDwO2deMDIykvPnz3PhwgWnXC8oKAiAqqo71uKdSMWokCC0SlDq5rNqhYbDKds5 ZuvkUJuZqnIDXVYzNZEsT05izigjhfmHKSiuod7ajEI1ioDwycycFoXWnMvGlHXkdKh0t+Yh9LFE Vs/RYizO4r29xVgDHmNJfCSUlUFoOIqyLHZlFWDWxhEfH4l5SyKrP26rcKt0hARpUActYtWSZjJS anhs1TOEKms4lpPFsWID5mYFmqAops2cRpTWzKdvJrPe7gnlCmKSM0i0pPRgFSwVM9dm8Eq4hcri EspLiimrqcfcDCpNEOHT5jAz1MLe5FfYUd55EKLShRCkUYIylPikRbArlYyyTh8OxrLy24O7trwH PbGa5BWRUJZL7rESygxmmlGg0YUTOXkyk8MVlL2XSmq7oO5ONE+8yfaV4dwMjWreY/mKHRjudJIQ QgghxOBz0anL8Hp7e+Ph4XGPzwGxUl9eQj2AbTLNKKgqLqGkp50DqgkkvpnEhKo0EpNyuLVRP//w x+zaHsQTryST+OZqbCtTOHyzptuah+bQ1tAmcXVaa5CTX4hRk8b6+eEYc9eyMjW/rXKcT5VqAxvn z0H3cVul12qgvMQAxIFyJiuSJ2Oreo+k5B10aJgvzCdnVwYxiWtZvToFa1IiaV1U/vvOSk5KPMea rZ0EbYUcztlL7vKNpCTGc3jlDjoLSa2GckoMgELV+t6riinp4cMZ9UQya+OV5CQvYUfJLeFFYT45 +9LQRC4nOSmFtSTxyo7ynk9z7ywmEkIIIYQYApyyEaG7uzuBgYGMGzeOixcv3uMBiCMoCFmSSIxx O8mptwcfN1mr+DgliS2GCSx/PhJFJ4fYarLaVdabqSqrwWbKZeO6/A4t88YyAzaVBm1niaBEaf6U 1FuDj5vM5G9cw7pCFXMS56Oz9232RqfBx80/UpJzDGNAKCGqfrq+5gkSl2jJT02+Pfhox1yYRnJK Dur5K5gzqvtkzTlpbDlWicliw1JTwHtpu6T3QwghhBBDUr/1gLi5ufF3f/d3uLi43HzNZDJRXl7e X5e8dyjCmR+jJD81h+4HNNWTk3GMZ5JmEqkoJP/WYMXWSSW52Yqt06BG2dmLgI2CjB0U3nFKgpnD W/axKG0mc4J2kTZQI+JsVmwoUSrhDpFKr42a+RihVXtZb0evibXkPfaWpTEzbhT7dnXzJJur+Dhl JR87KJ9CCCGEEAOl3wKQpqYmTp48ibu7O97e3mg0Gr7++muuX7/nd9zrO+0EdD5a9Kn7mGP3SZUE aKBf9vSzVVFYaMdMhvpCCo3xhIZooKq/NobUMOGJRcyPiySkbVI+gM1iwmyux2hWoe2PyAMABUGh QajDV5KRtdLusyzmIBTUy24jQgghhLgn9OsckKtXr3L16lXMZjM1NTX86Ec/4v7776empqY/L3v3 UypR2mrIenMdn9pdj2+mvt82gzdjtth3nNEMkVoV2DX1uoc0kSSuTWJOgJWyY8fYlVaMwWhtnS6h VKHVBRAaPpOgrjpyHECtAEvBFlIyyuyfpmE2SPAhhBBCiHuG0yaht7S0UFZWxsSJE7FarZhMJmdd +u5jrsHMTDTKKsr7bUJ3T2jQqLEjptCg1UCzuT96IEbxxKokZnKYtcs3dtrTU1KYT04hhERO7ofr AzRjNFtQB2kwl5fLHA0hhBBCiE44ZRL6DdevX+dvf/sbISEhzrzs4NUMNpQoetoib/6Y1HUlTFi9 neRpGrtOUahUnU5CdwhlKCvWrSLyjhO7NUxLXst8Wwbr9vVD70fIfOaHl7FxdefBx81c6IKw6441 N2OzgbKHN61k/RreU85n44bnCbHrXBUqe45TBPFE0gb++N57/HHLWhb12yx6IYQQQoj+5dQABMDD w0PmgdxgLMNgCyJuWtfLICl0MSx6fiZBt1RSzYc3si63mcmvvEnSNF3XwYVCx7Tlb7I9I8Wu1ZZ6 xVZDpWUySSnPM6HTerGGyMS1JEaa2btxb//0DBiKMdhCmdnVvVToiHn+TTasicPHroCviqp6JSFx kV0HLKogpi16/rbzMlIzqNI+Q3LKoi7uRyvNhHkkbclgS2LnK5R1OHbmclbE6fFRq/EJiGJJ4qL+ XU1MCCGEEKKfOGwI1rBhw/juu+73NPzBD36A2dxvkxGGFuthMjLm8+aKdbyp30dOQRlGqxKVZhQB oaFMmBBJuF6NuWA7hbedbCY/9RXWJq7lldUb2T7/GIdzj1FsMGNFhWZUKOFR4UROCEVrKyNr3Ztk 3ewZUDAqKJSgAAUodYxSQX37UVEKDboJIZiryjG0f12pQhcagtFQjqH9I7QZ2JWSRmhyEinbIynM ySG3bSNCrS6caXNmEqUxsjdlTRcbACrQBAWhU3WMDAJUSpSKICZM6Hi0zWyg3HDLZ8iaz/btZby5 Yh3rQveRdawKoxVUmlGERk4mcnIUemUNxz4tIChOS0DIBCaYrRiqquh8g3YzWduzmJmymnVrs9ib U0iV2YZSpWFUQCjhEyYwIVyP0pjL4V0dz2yu2kXyahuvJC8hdftMCg7ncKy4CoMZVBoN2tAJRLY9 W+OxDFLTCns+B0TZ9ZpkQgghhBCDmcN2Qv/hD3+Im5sbFRUVNDY23n6hYcMIDg7Gx8eHkydP0tTU 5IjLdmvw7YR+KwW6mHjin5nMhKAAfJQ2bBYLRkMVZcXHOJZzmHzDnedMqIKmsWjRHCJDgwjQqFFi wWQ2U19VwrFjueTklnSsZOsWsW7jEkLbarA17yWyYkfr/VFMW8uu1VEoAdOnSTd3IVfEJJGxJg41 YMldS3xqfmuleUIif0zWsDE+hfxmDROeiGfRnEiCtBp8lGAx11BWmMWujI/pclsM1TSSt69mstrO W2bJZW186u1LCqNgVOR8lsTP7Hgvq8opOfYpWTn5VGkWsSFtCXoAbBRsWMKaj7sOiFVBM4mPn8fk CQFo1cq21bQMVJWUcSw3i9ySO6xepRhF5JxnmBM3gRCdFh812CwWzMYqykqOkZvV/bP9Pq0Q5iWv ZkmUFkxlZK1PIc2elceEEEIIIQaXiw4LQJRKJcHBwXh7e2MymTCbzTcDEZVKhZ+fH66urnz55Zd8 8803jrikXQZ/ADLEdQhABjozQgghhBBikLvosCFYNpuN0tJSVCoVo0aN4oEHHsDd3R1oXY73woUL fP3117S0tDjqkkIIIYQQQoghxuHL8FqtVs6ePevoZIUQQgghhBB3AaevgiWEEEIIIYS4dzltI0Jx l1GNIkSnRRmkAaWKgNAJtE6ntt2+epYQQgghhBBtJAARvRISn8L6+QE3/70kNfzm/xuzkliysWQg siWEEEIIIQY5h62CNVjJKlhCCCGEEEIMGhdlDogQQgghhBDCaSQAEUIIIYQQQjiNBCBCCCGEEEII p5EARAghhBBCCOE0EoAIIYQQQgghnEYCECGEEEIIIYTTSAAihBBCCCGEcBoJQIQQQgghhBBOIwGI EEIIIYQQwmkkABFCCCGEEEI4jQQgQgghhBBCCKeRAEQIIYQQQgjhNBKACCGEEEII0Qtq/2D81QOd i6FHAhAhhBBCCCF6SjmW6B9H80Mfl4HOyZAjAYgYpBS4aCej8dcMdEaEEEKI7inm8swn51iTlsSI gc6LcAqvkHD8bRWcqb7m5CsP/TqS60BnQAxRLpPR//Jf8W3rdmzKf5mi7LI+JqpAoZ2CZmIcI0Oj 8PRW0lTwGuZac5+z2zcxzPnTn4nya/dS3W7e+dmr1A5YnpzLJXYDv0yZS8de5iI+WvBTCgf68fSZ JyNmJzFjQRxjAnW4K6HFdoVGUwMWk4G6Q5v5aE8+zv55cSrFLJ7amcYkn3av1WWw5WevY3RuRpi2 dhero5St/7QcY218CvnNCiJXbSflsRsZLGbDotV8bLU3WT36hCTiHo3Az88XV5q4VG3AYqqkPP11 8k419MebGUT66b46KG+6mYm88nwcQdYsklakUd6bZFQTeD4pkTnhGso2LmFNjlPfxAALI3rjX5gd 5tbhVcsnCaz7r9yByZIikqTtyUxuriJny5tszK/vRSIqZq7dTmKoleKsdazfUcKg+rlx8SN8vBcN RQe4rQS5p+pIvSMBiOidawVUp7+GUa3Ac8a/ou1jci76lYTOe4z71WCrK8Zc+D98o/9HRjoks47Q xLk/rST3RBMALaZSJwUfMcza8QakziH7yyanXLEz175IJX3V7u8DEL+FPLlKN2D5cRxPRv/iL8Q/ 5ca5TzL4KL0SiwVc1W64++hQa3WoLAN33+3jhv7XR4irfI5tOyt7l0RzLgeSnuOUurUC4xqbxLNT HZhF+zOC0WCGqLYSxVxDfXPr6zUGM9BWUTYZMdgdfEQQvT6dGX6VnNzzNnkVBhpxwztQj1qro9Hx b6If9LUc6If76iCKCStISYzEnLWRlKxjvQs+GMUTycnM15SQ8eY6cgrtfRODo3ztez5KKUhJwODn 1lapc0OXsIFox2ayZ5qLSVuTQvGc51myOhlj4kp2GXqaiJXc9clYps1nyZJkVhlWsCZn8FS2PcaG E0g1n1VYbv/jPVdH6rl+D0A8PDyIiIhg+PDhGI1Gvvrqq/6+pHAwF3UgEVOiCKaYfdkVXAWgmeaL xTRfVKDo5LvXU9cvFdOQW8DZsgK+tTYDCjT+g+vL1ViZy/lTTv6RUnii9vGlZaAnuDUbuHjKwMUb /zbF0MJdEIAEvMjsp9w4nfxTPjgxVFvB3VCrPXHX+AK9DEBowlqZz41qm4vfizAgAQgYaozQ9nNt Mxpu9sCYa+qxoG8Nguur7O6ZcXs8iRl+RexblsCZdnWX8yccl+d+54ByoG/31YuwnzxB6NUzHD9e Sq3Fcf2BoTNj0BTvIDEth17HPppI4kKtZCWlsKsnEYyjy9fmXD5aNocDtobvy0on5eOaMZ/amw/P DfcBbzhpxlxVyMcba1AGpTFnpo5dO3ocgdBsLid/Xyr12i2smxkDOR87MI9KfEOiiY7wpeHA+xzv 0U+AD+PD/bha8SG1nX4dBlcdycX/EaI9zlBQYcLW9+w4RL/PARk7diwmk4kLFy7096WEoyl9CJ7y BIue/jHBLrUcP362LfhwvO8u5lJfeKztiyWEkwTq8bYVcebkUA0+7j7WeiOmtv831xtvVkqb62tu Dr+wGI12DsVwwztABxXZlA2ehtMB0bf7epmKo0U0eIxn9tNP4+Ww+bYKNGo1FrOx98EHgEqLBiM1 vRnl41BXsNaUctEo5cn3zBjNNlSavs1VMNaYQdPXfoQbXFD7T2DG088xN8oXS/FRinv4yFz8wwn2 qKP4jKn7gx2gr3Wka3VF+E+Zz6J5jxDi6+Hg3PVOv/aAeHl54e3tTWFhIf7+/ri4yCoBQ4MHviFR TIn6IV42A6UH3qeo1nJ3j4EX9y4btAx0HsT3agzU0zooyFxj6PC60QYBSjAb67H3Z9hVCTDQrcGD QB/vq81UzucfVlA8Nop5i35CRcHRQdWaKoQ9XLwCiYiOJkzngumr42QeL6ehxx9iNcHhgVCdzdn+ apV1tGsWdu3KIiw6mqi5ixh/vsjhvZk91a8ByNixY6mtraWpSQr/ocEFtX8Y0dERjPa4TFVRFtml dT3o9VDgPn4puugpePppUbrasF0ow3x8G9WFZfdcAOOijWPS4qVMnBTGSD9f3JVNNJoM1J3MpXBP Ju7LNuC/cwYfnLj1+xHBozv+zNTAdhMKU8uZ1OlVmji3aQ5/2HPr0Bs3/F8+wAtPtRsmZSti/7Kf crzmztdqqdjMluWpPRtCYDc3VBPjiV0wl+AwPd5qsNSVYvgik7yduzGa+7us6OS+AAn7595+qK2S I6vmcPBOY7IVevRPvUj07Bj8An1RK6GxzoChNJvC9M2U11zp9LT2k/obDy7nt78pxW/uy8TNjUEX qMOdK1jqSinL3EzuntxOW4dHv3aChMd9v3/h4T+zZmHn2Ww88iq/W7N7aFTDzTUYLRCqtmA0tBu7 0FxDvRnQ2jAaaro8HcKITfsLM4LbT8h9i9cPvtXxMFMmGYtXUnmnSEYTR2RCu+8wV7DUVXLui93k pWdg7KLZ3hHP1zHlQDt9vq8A17h89jgH1DOInjKfReO/ouBoAeUNQ6UWBo69r274/+IALyy8ZTiq XQs4OPj5OooqjJCnXiRyegS6QF/cldBoauBCRT5nMjdTkFc5NH/LlT4ER00hKtiHaw3lfL6ngLOX e/lOfMcT7nuZM0frengvBriOdLWO0s/2UVEcTNSUKGY/HYqh9DjHi6rp7a3oi34LQEaNGoVSqcRg 6PmYP+F8HVoFyo6yt6ACU09aBVwDGPH0P6MPtmEqeJezBwxcc9XgNjqOB2b/Fw/6/zunPygcmgVX L7g99AYigkm/AAAgAElEQVQJKfF4V+dycv/b5FU30GgDdx89/g/NYsb6eNRKOLffjdtbZ4vIS06g 3McNV2UMscnxsPNV8ko7qz42cam0sx+lJmq3Lifd8gbxCyE/5W3KTQbqbqtf3LiWL+NfeotJprd5 d9Pu/gk+FHpCVqWx4FFP6o5kU7h1GxcsbniPiyFkahIrHo8nP3Ul2Xn9+SPbRG36ct455Nta+IW9 SPxiOJCymbpbPu8ttgYu3CH4cNHHMy9lDQ8qKzl9MIP96ZVYbG6oAyPQT1/IgvSFnNu6kj078297 wjcm9Qcv3kCczyxmp71FlF8DZQfbJsLbPPGeOIvYhHSCx63knd9k3lZJPb81gXf2++KKG/qXNjCp LpU9XVRQGqtvz8Og1VyP0QyojVQZ20cH9VQaAa2Z+po7RQ2tE3LP+bROyB254C1m+2SSsbXjakAt lkpqu0zGDa/pb/Bs0kK8677/Drfgife4GMY/uoYVjy/kSMpyDnYyd8gRz9cx5UA7fb6v36stOcD7 FX6DqjXVfo68r23lSZ7vzcqU/Qs4OPj5OoDbuCQWpCxFZ8nn9JFtnEo3YGn73RodO5fY5CyiT77N uymbuwy+B592IzqunqfowPuU9mlEh5Kx4cEoa49SfrkHpw2iOpLNVMHRD89yZmwUU6J+zIJgE2UD 0KPZLwHI8OHDGT16NOfPn+fataFQIN3bgqf8pLVVoK6Uz/YUUd2LUFgxaSV6SwFn3/lPGi62+xGr zOXCmSU8+MKvCDyVwNnz98IcjwhiX4rH/chKNnVSsSjfv5nccWt4YX18lyk01eRTWwMo3IgknpaK XkyAt5ZyPv1tTj6ahs7PwMEuKvZNNfnUksSTgQ0UrN/G+Zr+qKrqCElKZ15gLnsS1lJubHeNvN0U /t4X/8UbeDY5HdfkOWSd6LznwCHMpdxctVAdT4utibqTufToo6mN59n1axhZmsqW5G10qM+dyOTM nlRyZ79F/Ko04kkgfWdRxx+WZgMXTzWgnt2E++MLmVSdyZ5lr3Km3X05f2I3pw8lkbBpDbNjc3k/ 75Z7cvN9eOJtgsa6Us6fyu/JnXAI3aINbFyiR9nTE02fkvT36ym57Q81lJSZmK8sp6xDE7KZ8rIa bLoqCrpp17r5/cGNlulNoCzFcCrX7h93VewGEpIiuLQ7gd/9Prdj8Ja3m8Lfv43+5TQWpPwZ16Sf kn3qlmfjiOeLg8qBm/p+XzvorDW1vIDjBWcHpDW1Jxx6X62l1J76/p89WcDBsc+3b1z0ScSnLsSS nsDv9tzeYFG+fzMHAhYyO+UNElKa2PLKNnpS/3a+jiM6virIJLu8oe/zWNXBhPvbqPi4ukeV9cFX R2rtzfy4+gz+YdFtPZpVFB0/Tmmdc3o0+yUA0el0XLt2DaPRuSvIi57ywC8smmi/qxT3sVVgeGMx lRm3fLHafGd8D0PFk4ydGM7Z84V9y/JQoPBFrb6C4VB2lxMrr325jdxPfFFX9GNFG6A5l7zMSl5a sBT/D17vosXXjdGLFzKydDMZ/bQUpUtsEk+GlbJn2etUdnpTGqjdmUCG6i+88NLLFD6/1sn7T/SE jolJSegqUtmyuqsf4SYu719Jui2dFUlvEHNkDnldjG5pqcvk3VUrqexk9u+1ys3kfRHPvOlxkJfp wPfgOIa9KbxSrEHRw/OazQaqOv8Lhev/nvmd/KVqxwrm7+hpDntINZfZq+Jo3J1Axu+72v/FQOXb CexR/oVnk5I4k9DVd2swPd/+ua83W1MDI4iOfoQFY8f3rDVVAc19rXPdiH5lQkovhRGVFA87n+O9 PaVdHnWtZjdZq5pw3/oGs6dn8t4hO2du24CeN1F01Gx/Gi5eY4mKjiLEz4WGil6M6Og6ZfzCx+Nl OsOBhp7VlgZtHemapa1H05eQqClEzVlEqJN6NB2+CpZCocDf35+zZ886OmnhUGrGzpjHnJggPtx3 gJI+TjJvOv3HTr9Yraw0X7LiqlYzrA/XGDKa8zlzsonQZW8QEuDZxUEGyt9eSaEThvRe/mAbFeq5 xE717fwAzUJip8Lpnbv7thJNl3wJnRuHJfNtKq1uQFf/gXHnNip8ZjFxnFuXqQ24gHiiwxoo2JTR bQug9dBa8ir0RC6I6fKYltLMTiunrZq4VHcFV7Ung3YJj+Z6qsrLKe/hf1X1g3MMh+rRpYSSyf70 7jafbKBy09tUqOcS/XBX3/O74Pna5RqXqwvIfv9jzlz1IXTafOY94k+3a+1oIpkcBMbKvgzVVhA0 LRKtxeD0PUzuGuPiifTJJ++DSroun9v+M2eT+0kDwbNnYV8p3Yyhyog6fBoTVL3PorXGgFk7odvj XHyj+Mm86YzXwdkD7/PxUUcFH4DHWMLHulBdXE5PV9Yd9HWkqw2Uf76PfYdrUY5+iNnzZhHmuOXu OuXwHpAxY8Zw5coVzOZ7fM3DQc/C2QP7uBoWzU/mzaDo6FHK66722/jD60CfW0CGjCtUpi5nf9Jb zEs/AXWV1FUbuGRq4GJNKRdKSzlXWkSTs3parZnkfvIyLyxeyohDt08uH7FgKWNMmWzpt2FPYYwO 9sTv4SzWLLPn+CYqAt1gQDcG65rbpAhGmvLZV2lP/iopy6tkxvQ4vMjv5ZCFwXkf7k5u+E3U03Jy MwZ7vp/WXMor3Ih7KAzyejv87W54vi54BUYQHR2GzsVE2eHuekB0TEtczqKYcLT1GST3cnM51YRF JMbPITIUjq3L6GQ4n7CHW3AYI30ieDazB5uo1IXhDXb1VBuydpAzM5mULUEUH85gY1o+PV4xuTyD 7cfWsS55EdvX7aKki2DzWkMBH+672NoDMuNp1OXHOV501iFBiNf4cPyuVvBhteNrSgNeR/Jo6wH5 oRdXz5/gcyf0gDg0AFGpVPj6+nLy5ElHJiv6zVXqSj/juPdPiJq1iPF1pRw/3rs5IOIWzUUU/mYG hev1aMMi8AvUMyJAh3ZiPJGLw/CmktPpr/NRJ2NtHa8J485tGJ56kdiHNvNB+0BDMYvYx305t3Vb P616BSjccFU2YfjTcvbn2fduG6sHb6XMXe0JJoPdO2hbTFdA7Yk7DPIx070T9PwG1j3jyDkgA8kN tY8blooGOxtjrmAxNeGq7roH5G6n9GmdAxLsc4260s/YY+eKOkqFEqVSCfShWVypQqm8UW3r6SBA cYOrElpM2XyUso0LdlbUW2wN9HZ3t/5ue7t2+SzHs6s54x9GdPQjzA8O56uCoxT0ZQ6Iiz8RwWoa Cs7gnJ0/nMRF3ToHJGI0Hpe/oiAz22mr2jk0ABk7diz19fV8++23jkxW9LOKox9y9kzrKlg/nheM qaKAow4bM3mPs1ZiPFGJscOuy75oZycx76U04nmObXcYc+sw5t3kHnyRZxfP5cCJjJtDrVSPv8iD tmwyDvbjanXNBi6a3BijhtovnT9J2tEaLVfAR2d3QKH28QTLFbsDlqGmalcKrxxz5ByQgdSExdSE 2qeL4Yq38UTt40ZLdT/P5RqMPFpXwYoI8uLq+SIOvN+TFlMDOetXk7NjGskbXmHJzH2s/rjnvSDW wh2kFGYQ8vw6Upc8w4TDGwdZQDs0NJqugNoX1+r87xfocCDdoueZqcwlZcV6Cns7TG5CPEsmW1gy f5edJ1zDUlvCgfcr2lbBmsui8edbJ1n3Ysi5R3A4gZwle8hs/NEdF7zGRjElKgRfFxMVR/cO3VWw NBoN999/P3/7298claRwomuXqynIrqXMP4zo6CnMXzSeqoLjHC/vyT4gAgCFJy5c4VqXzTwNGPe/ Sjp/5pcJS/Hf8yq1/Z6pK5zfuZtLW5cSrd/NwcomIIbYBWFcyHy9ZytA9Vgl504amDE1Hv3W3C4m oQ8dTSeLuPDSLMbrwdjtHB49wbF6LKVr78reDwCs9VSVD/gW1A7SRN2pUlwTZjFakd3990IVR0hw EwZnNCIMIv4TZjimxdR8jNwqWKLXgZ1729+umfLDhRjnh6JT0eXQHNG1aydzMZBE5ONhFO509GdZ gU6rxVK8o/fBB6DS6tAYexNeXqWh/HP2nT3Tug/IjKcJrSun4HhP9gHxJXy8L5fPHKXuLhggcqPX MtTnGobSz9g3QPuAOGwS+n333YeLiwsPP/wwU6dOve2/Bx54AK1Wy9SpU9FoNI66rHCoGy0Gu8gs MOEVNYdFT89ggr96iE+QdCY3tMuy+FXy3G7vWYulbWjOnZqOm6HFdmM35z6q2UbeSV8mLZ6FC+AW u5QHffLJ+6C/K09N1O7M4Jx6FrNfsmPiosrXrs+b6qE1/OxPxbz2wRGWvrYQLwfk1C41GRwv9SXq paXdXlM1fQ1xwZUU7unPnp8mWnDQZ0RgPZhBGXOZnRDRzefQl9EvvUywJZPjX/T3anYOLAf6xAWv sdHMGK+k9vO97Nr3ed+HazSDoq+jp2402/b0/gyW+zrQ+TDvJvfgFfwWryEywJ6p5W64qXow7FAJ fV6iTNHHNGwmKo5+yK59n3GWQB5ZsIifTAnGx457rgwMJ9ijjuIebfwxCHn4EfbjeSyaH42fpZis XbvILhiY4AMcGIDU19dTVFTU5X8NDQ2YTCaKioq4dOmSoy4r+kVbi8GuvRytUzJ+xtM8/UQ0Y/t5 RYS7hbvaDfdJS4kZd4cCWjOL2cvi4GR2N5NdS6mtc2PM9DtU3FURjF+cRIi2u5w1cCY9k5apS4kK CGPS4jhaDm7mjDNaDI2b2bcpF/fH3yL+F7O6GPXti3b2WyzfeYRnZ3f34xZD7KqlBPt54q7WoXt8 DTNinbVyloFTqW9jCE4iYW08IzqtPLnhNb1tL4n018nvboPpPmmirsKA+uGF+HdZkdPhPzeJ6Id0 XR0gbrBmsn99Lu4L03h2cUwX3zsd+l+k8+yjTRSkpt5hQ0NHcWQ50DtK3xAemfccCx4J5P1dH3P8 rHOHa/SPgb+vgyMfVzi/6VXyTRHMTk0jUt91+euinUXsmwf41aaX6ddb0k9aR3u8z/tZZ7jqF838 RfP4cZjfHVZsUxMc7o/tbBHVQ/kD76Jm0aI5hKtNFGTu4v3PSnHSdh9dctgQrObmZprvsJh3c3Mz 169fx2qV/tEhw2ai4ujHnC0OJGJKFNFR9dQeOHvzR2eYKggPbzUe7jBMHYTaH5ovlNHUfv6wm477 RvqgUivAXcf9/qHYLlXSaL3ls+Kixd1P2+ED6eEOw9Ch9m9/oImrdQYG+/6WLTZfotcfYPwX2Zw6 kc+F6tY5AO4+OkZOnMXER+MYadrNu+t3dzMJ3cDJrRlEpr7FijdjyNufywVTE65qX7wDI/CfGEPw JD2uddl8dNCOjH25jbyKLGKT3oDgUvJS7GiZV+nRBvp2bJ3z0eGKJyPC4vC3tHsHtiYsFUVc7qQo uJy5nHdsrZvz/XJqPqcPZnPqhAF3Px3+E+MY83AMOnUDFbtXsm9/dy3Kbre0FrrhquxsV/lOztTG MNKv9f9dAz1xVYJfWAwttxzXUleK0dhFPozbeHcVLEhZw4qd8ZR9spvyL9t2DfaLIGT6Qh6cBOe2 LmfPrZsQAmjC0Ab64ufjBko9oyfGYKku4qK5ff598RoXhp+PJ6j16MZFcKGiiFu/OgAXd77N6Uff In6rJwV7MqmsvgJKT9SBYfiPiyH44QhGUkp+aka392fo88RLH4ZaDeDGSB83UIehm9jxGTdWFHHR 2vnnxZq3kvTUt4hP+jO/nJ7Lyf2ZVN7YCT04jvGz5xLsU8qR5AQO3roJITj8+Tq8HOgxL0KiI/C5 XERWdilDYsNzu/TtvrpoIvAL7BgyuOo9QemL38SYjhUs2xUufFnaRQnVl3y4odJH4K3u+NpI9Y3P XlOHz32LqRJjTSf7d1hzyX5pOdaUt3hy6xEij2RyKi+fC3VXaGnLh/6h1nxQkclHKW8P4r2aunMN S10JB94vxzckmuiIKYQ3vM/xTm6Li184431MnPnM3oUpvjeY6kgu/lFUf76HgrOXnbLbuj2GBQYG fueMCwUFBeHi4sJXX33ljMt1uC5AVdXgm+44tGkY8bN0fhjcsf+yqeB1irK+30jHc86fCIvy6XDM 9YrfUvinTzt8Cdwi1zPxyXF2dMlZuPBuAhXlzgxkY5jzp3TUW8N571D3FdwRP89igXIt6Zm+TFq8 kPFhYYz088VdCS2WBi7VlXLuUAZ5u7M7rah3xkW/kBkJSwmdpMdb7UaL5QoWUyWGk/lUHtrN6VOV dhcqLrEb+GXKXDi4kt/9JrOb89zQ/jyLF36mt7O1ognD1p+y7U7jiDUxTFy8lIkPRzAm0JNGUwOX qks5l5fJqYPZGM32rYClin2LZ1fNRefTxIUjqbybkkGXy6zfFMOsHX8mJtCOC1RvY0t3GyIq9OgX vkj09Bh0ga3PuNFkwHAym8L0zZTXdBbAuKH/9QniH+3Yyth45FV+u2b3989j3Bv8YlM8I28e0UTF +hn8KbOLBQNUMUQue5nIh8MY6eeJq+0KFpOButIiKvMyOX0kv4vK7e1cZv+ZpIRK3vnZ60OvkhHw Iku3JqHrZmiF5ZPlrPuv7DsfpIkjMmEpEx8Ow8/HF1euYKmr5NwXu8lLz8DYaTHUT88Xx5YDg4OC acm7WG5J5u/X92H6uO55tmwMZe+S1fRiLnsv76uOyHUHeHKSvT2vBvJXzSD7Djud9yofqoU8s/Mt QtWdpdgJSyYZC1ZS2WVZ4MmI2BeJnhtHcLCudREN2xUa6yoxlOZTfmg3p0/05HOmICY5g0RLSp+e seqJN8mYX8b8FTt6nUbPeRA862mibJ/z/mc92/n83qoj9crFfg1Ahg8fzn333cewYcN44IEHGD58 ONXV1Xz77bd8951T4h4JQIQD9CwAGfQCkli+dRYVL81pm4wuREdDOgARQ8jgCEBEfxrCAYjXBObN +yF1H77P8btq7d1B4aLDNyJs7wc/+AFjxoxh2LDv93b08fGhtLRUNioUYkC4MXrxQkaWbiZDgg8h xIBqxmyxoNZoUVFCr9tsrUbMxBEwit4vpiX6iYYAjRJrTd9a5HUBGnByvdHD9wcoa4soluCjX/Rr AFJbW0ttbf8vMCqEc9zoah/CFXfNQmKnwumU3b3/sRd3sdbP+ICvCiTuGWU5+ZhTnid5OWRkHaPE 0IuSyZxPTvESEl9Jwrh9F4cLqzD3+8IA4s4UaILCiZn3PIuCati1rnejUBSjQoiMm8+SORqKtxx2 cB7v7GpFNrsqnHrJe0q/BiBC3D3cCE0uZk1y2z/rdpP+s1c5P6B56rkRC5Yypm43W07cgxunia4p ZvHUzjQmtR+KXNftJidC9FlzyRaSN6pIej6RlMggklakUd7jVMzkrE9FtyqR+NVvErlxCWtypIll QCnCWb42mUhrMVkp69nVq71uVcQlppAYZKQwI5l1Mr7uruK0SegDReaAiL7zRKUPw7tdq3CLqRKj sZMlMwaT21avCiM2OQnvI6/y0aGGO6/yJO4xbrgFhOGtdrvZKtViM3Ch0jDEJjULIYQYAvp3Evpg IAGIuFeN+PkBVtxh9aqW0lQ2JW6+e3foFkIIIcRgJAGIEEIIIYQQwmkuOmwndCGEEEIIIYTojgQg QgghhBBCCKeRAEQIIYQQQgjhNBKACCGEEEIIIZxGAhAhhBBCCCGE09wzGxHed999A50FIbr1/PPP 9zmNHTt29DkNIcTQ5oiy5AYpU4QQ9vr222/tOk56QIQQQgghhBBOc8/0gAgxlPz+T7/v8Tk//9nP +yEnQoihrDdlyQ1Spggh+ov0gAghhBBCCCGc5p7rAbF3bJoQA+nq1au9Plc+40KIG/pSltwgZYoQ wtGkB0QIIYQQQgjhNBKACCGEEELcxgO/sYF4uQx0PoS4+0gAIoQQQghxCxe/KH78yHj8lAOdEyHu PhKAiMHJfyURaz4hYk74QOdECCHEPceDseGBUF1MRd+n0djNPXYTMWs+IDhE4byLCjEA7rlJ6MLJ /FcS8cKTuAFg4ULGYioqmwc4UwNDFTKPxMRFTA6oJyPxFXYZepOKlslLf8U/PjoO5V//nf+zroB7 824KZxmxOIsVy8Lafizy2Tf3OU5Ze5iIYi5P79nAg+rWf1764Dn+++18x2ZU2EHFY8l/4J9CLJz6 5Lf89o/FmHuRypa9e1HV5LIjdSM5hru0BPIZT7jfVSo+rOVaL5Nwj91E+Ax9W0tvMV+lvsbFJsdl UYihTHpARP+q3caX77zG6fRtXGoc6MwMIFUMiclLCDXnsC75Tfb2KvgA3dP/yr88qqb4//0Hr2+T 4EP0v4sfrOSdVQmkr8/mkq2XiTRns3/Vc6SvWs6RUqmBDRwrn214nf/4cxl+c/+VX03X9CqVlJSN HLZGkpi8hAl3ZUO9C/7hwXjUFXPG1PtUGgvWcvqd1yjd9xlNLY7LnRB3A4f2gHh7e/Pggw/e8ZiL Fy/y5ZdfOvKyop+5qAOJmBJFMMXsy66gZ73RVhpriwEFzS0wzN7T6v5I6aa/gMXY0+z2gRdhP3mC 0KtnOH68lFpLb9u9bqeIfIxIjrEuZQf5vY4agpg1PYCa93/Ob/c7876Ie5q1EuOpSrDMogXPXibS hLUyHytuqC1w518J0Z+aL5Vx7MP/xDjq9/zu0SloDn3U414QQ2EOaWU2dNuXMzM0jZKS7s8JWb6F 5AlV7EpLY19Jb/pdekjpQ3BUNBH+Fo6+/zm1PSnO1cFEBF7jbPbZHv7e3aLJyLe1RmiZzHV87Dql sWAtJ8sUXLvkxOYlj2BmzYuAiuMcL6rmsuN++oToksOHYDU3N1NaWtrl35uapPVryGgrwKOCfaGh nONH+1gY98Q1M00XnfAj1cFlKo4WMWJKBLOfDsVQ6rjCWK1SobTWUN+n3xQ1GhUY6/vQJCeEEICx 1gQRWjTQq2FYWM3UW9VoNAqwoy+2fNdG9mkTiU/dzpxjGaRt2Uth3wrELnjgGxLFlKgf4mUzUHq0 iLoeluG+48PxuVzG5z090RGajDQ6u5p09SzHj49gSvSPmRdsoqLgKAUVJnrb4SmEPfplDsg333zT H8kKp7mlAD/wPkW1ll6Pgx1KbKZyPv+wguKxUVIYCyGEo5hL2JWygqyQJ1i+Ip6UtDkUZ21n4/bD OGYaiQtq/zCioyMY7XGZqqIsskvret5ophxLeLCS2qPlXHZEtoaEa1w+e5yPq8/gHxZN9JT5LBr/ FQVHCyhvcOIMfHFPkUnoop0+FOBuQWiinuEHE8O5z1vN8BYLTReKaTj+HsYzVXYELzr8lv5/jNF1 XO/QdvJ1/vpB4R3PHBayhshnp9z2Yb6a/xqnsovb/qXA6+mdjLsxC/YmI/+bnsD58+1fG+KFsWoh z+x8i9C2t1r3pzmk/b4Sr4eWErd4IWOCdXirodHUwKXqfE7t2UZBXmn3z0gVRshTLxI5PQJdoC/u ytY0LlTkcyZzMwV5lXdIww3/lw/wwlO6m6/cmIjsEjCXmISlTHw4DG/lFS6czCR3UyrlNZ03A7po 45i0eCkTJ4Ux0s8Xd2UTjSYDdSdzKdyTifuyDfjvnMEHJ+7cjOg2Lp7YBQsJnaTH28cTLA1cqi6l Yv828jJz6XyedRjRG//C7DA3oJT9i+dQoGzL/6QwvH0ASwN1J7M5vvVtztRc6e6u9pmLNobgqbMI eSgCXaAebz9PXG1XuFRdREXmZg5k5mNPg6pLwFyiFse33lcfN1osDVwozaVwz2ZOnbJ30pIO/9lL iZ07q+0z0oSlrpRz+zPI253JxW4qmi6xafwqZRbuN16o2Mzvlqe2VgRVEYxPeJHoqTH4+bjRWJ3L 8a2p5J2o7Dyxbj6vx/O6OO8mN1TjFhK9eCGhYa2fEVdb6/sxnMwkb88VolPnUr4sgTN3mpSvCEO/ cCnR02PwC/RFrXSjxWLgQkURZ/Zs49y4N3iS10n7fVE3+bk7WMs/Zv0rh9k3LZ7ly18hbdp8snZs YXtOeRffue65eAUSER1NmM4FU9lR9hZUYOpli5FXSDj+tgo+Pmt/AsNGTEYb+1N8xwThoVZyvdHM VcNR6vPeo6G2m/4lt8f40S9/hY97x5dNe+bytzN3+sIE8cDytwm8dY3gxgK+2vRrLt64mSOeYfyK pdx/yw/k9XP/TdEfsjr2XV2zUFtygPcr/AiLjiZq7iLGny9y+JBkIUACENGmLwW4y+glhDz7LOrG YhoK/8j/1hm55uqD++jJaJ98G+3EbZTvqekmFQPGPa9h8b5RmCpQx/0zD9hx/e8qNnD6nb0odc/w oxkajHu2YG600VJX1u6oZq7sf43ThWqGqx9j7IJIrPt+S90FI1dru0h4qBbG1kw+WtXAcbUnIS+9 xRilnom/TuPJR32xnMymcOtm6uqugFrH6Ni5xCZnEXsylYyUzRi7qAG4jUtiQcpSdJZ8Th/Zxql0 AxYbuPvob6YRffJt3u0yjSZqty7nnUO+uOKGftkGHgT8F6SzYFkcrtXZnNz6KudNvugXvMiC9b5k LF7J+Vt+f90eeoOElHi8q3M5uf9t8qobaGzLh/9Ds5ixPh61Es7td4Muq906Rv9iA88uDKPxZCaF 6Rlt98OXkRNnEbksnai5u9mT/DrlxlvTKKUgJYG6sIXMToph9OJ0oh+PwbUim+M30vHREzJ7KfM2 ReC96jnyKvtxPMW4N1ixaSHq6lLOlRZReCiDC6YrtCg9GTluFpEJ6ax46HXeWbP7DpU7T7QL0ohf FgEV2RzfubbD52NGahaRu1fybl43edHOZU7KW0T5GSg7mMGBnZVcsrnhHRzD+NlvsGLuXD5Kep07 zcW99sVa3lmVgRpwn76GBWGtr6seWsOCpKXoKOL0nlRyq68wMvZF4lLScFs1h4NfdrzH9nxezy0I 6fLzDp5oF6eTsCwMyxeZnErPoK6ugRY8UfuFMXr6UuK3+uKqrKRWDV3eXO1Cnl7/BqHKSsoOZrA/ vbAZJQoAACAASURBVBKLDVzVvowcF8f4VX8mTu1GyxHfbm7u3cZK1eE0Vh/bS0z8CpYkrmf7vFwy ejo/ROlDcNQUokJ9uGYo5/M9BZzty5hZFz/Gh3phKj5Ag10nKLgv+l8JmREOhqMY8z7CeskC7lpU +scISNiKb/5/8tWZOyTR9Bln0418fTMA0eG34B/tWCGoCuO7r3HFW4vvk79Cc+F/qDhu4HqjEWv7 z+PFj6hIL0PhqkAd+88Eun9K+YFjNF/6suuBc1frKP1sHxXFwURNiXL4kGQhQAIQAQRP+QlRwT5c qyvlsz1FVPekhBnxDCHP/hSX0/9OUdaxDgXalfJPqc8Nx+/Z1YQ+W0ajK3ccxvTd5TIsN/u8FbhY 7MzDNTONtWYa66Ah+jfcrzZSU377JO3vrFVYrOAeuwK3uk8pP1WIXQtzdVYYlxdwvODsIC2Mm7BW 5mLFl5EWN6Keeot5NHA69afs29+xp6Py0DZy9Ut5NnUN8clX2LI647a6lIs+ifjUhVjSE/jdnttb 08v3b+ZAwEJmp7xBQkoTW17Z1vnQBWsptaeAGxORlXoSlump2Poc+9qlW5mXyfEANy7f9usYQexL 8bgfWcmm32Tels/y/ZvJHbeGF9bH3+HeeDL65XTiH22iIHkG2XkdW/YrD2VwPD2O2OQNLFjvxrsv raTylvrQNWM+520RtCgXEvqUJ+e2JvDuzo73pXJ/JpW//gsLkl6mbHkqF++Qoz75cu3/z96dx0VV 7g8c/8AAA87IjqAMuICKqCCJgbZQ7rlcKzUrKsuybpk3W+615da9V+uW/Sq9t2xPs/KWpZaRlpQa mQguIQQICi4wKMiOA8wwLL8/EBKZgQHZ1O/79eqVzHnOOc8MhzPn+yzfh49mLsNQ3jzIOblnIwej IrnzgxeYcmM0m3eZ7o1RTXmTyIUaTqw0f33MXv4mkb6p5r8wbMMZv+I1RujWs27+Mk6e95md3B9F 4ufv4LfkfWaveI0TOiDXzHGMWgoTtRQCKv8yCHREc8cXTFkYgu6Hp3hv5cbGXpTMPdEc+lwDF/SU WXq9Prl8gflr1WUOU+b7oV05jf9FXdhTEkVK1CriZ3/BQ4uU5j4RQEn/+UsJqNrIuoXPkXPBBVt/ rU3mTx+8T0ALR7msGc8Q9/Fy4raMZNaDD56bH/INa99bT1yL80POGyZceZKE7ZtJ7YBhwg4Dgxio yGJ3hmVfPrbD/0HABB/Ktj5CZqKWuvO2laZs43T8NAbPe4Yh7sdaCCiMGPOSzvvurMJYDS1dWQ1q StPQlaZh2DMdj4hh1Gq30bxtrBxDThIGRQReGija8hmlJy3ra6oqyiD2u+Ok+IYQFnYDs/2LSJMh yaKDdHgaXisrK1xdXRkyZAhXXXUVY8eOJTw8nMDAQBwd25tBRXQOB7wCbyDMq5KUHZvZHH2gbcEH nnhMvw37E6+TdkHw0ciQRO76V8hXj8PR3lSBDlSTRN7BbNSjp2H+VEF4jvZBd3CbZcHHeepvxl+x 6efj4Hsds+fOYJy/ZZlNsLODqpYDMAsOQnsOYmMHJz54kM3bTQ+zqslcw4ala9CNWsKUay78Gw0k dGkkfD6fL008zDUeI3sj2x5/igzfJUy50bLWXOepL7Hj8VtMHDef0mwTQ35sPVCry9Duijbb4Fxz eA0xP0STnmH6YVsRvJRZU5UcWj6/WfDRqDiGPUsfJE43mVmLZrbwIFDGiQ/ms/5zU5+LlvR1Gynw jSDAx+wBOoDBZPDRKG8jBw8p0QSHmN6umsmUhSEUtHJ9fLn0HaqvDsfZzIrQbvNfINwuig1LmwYf f9CSuWo+m1IDCfC35NGqno1/JLPna9CuvIWPXt14wRAuA4bszAs+e8uv1xavVVcNalJJ2WlumJaB wh/eIW5nDFqzOSGUqF0d0R2KbhZ8NCqPZs/nUSSbG0bWmaqg/p5yUQegQ7LwFv/OlhWLue/Rt/jd ZSJPv/8+rzx4PRrVhQUVqL1HMuHWucwMdaXoQBRfbd7B7x0yR9GV4UFeVGYkkWXJwZQR9J8SgH77 c2RcEHw0qMvbxpH1X4J/EMpObO41Jn9Nkf1YvPybfWCNbEdMx1m/l9yMtg50q6E06wDRmzezPaUS r3E3M3fWDQR6OVxcpcUVr0MDkLq6OmxsbBg8eDDV1dVkZ2eTnJxMeno6RqORESNG4OXl1ZGnFO2m ZuCEWUwLH8R3W9p5A3ebhpcmj1PbY1rOgVKTxKkdsS0Ovego+kNbKXO/gb79TX8tWvlNw83+AKeT 25vGtuFm/D0pla4EXH8zrd+G+xA+VkPVmWNcTPJc1fCxBKmKyc5p44zN3I3s2GQ+Mx1ATeYqdvwK /jMnN33gHhbJaNc49nybSX2bXAv/FUcT80M+/lMmW9R6V50VRfxhywY6AGCMI+WQgYCFLzHUx1xj hpb0VYs5aPJ5zhH/2TOx37eKHftbOa8xjpgPouHaSALMLZVQpSV9Z4L5v5vcTHQ4olJb/sDdOQzY 2Jmug2p8JAFVUWxv5fogew07fjD3mUUQNl7DiXUraLlhNZ/M1e9woi0BtC6VuKW38GWUBXOUoE3X a4vXalY0GbkhRCyNxNPcM115NDtfXIH5P8cyTuyKw378EsaP8UNhplRh1GK2be/6AKQ8J5uiPkHc MKC9IcQZMvNgUMRY2reaiIk6HfuJt55YzCt7Iejmp3nrlQcZ2fj5K3AKnMysKWPob5fDri1b2J2e 32GZGRXeQfirc0mycOEP24DpuOp/5MTBVuZHFX7NyUOdnDa95gC5yeW4hkWYCQg1uIUFYEj+2kQP iaXnqB+SvOW7OIrUgwifNosJ/hfOqRTCch0ak5eVlZGamkpxcTF1dU3bA4qLiykqKmLo0KHodDp0 OkvH14jOoeP4ji1UBoYxY9YEEmJjSc+tbFMQotAMw6HkACUWpAqpObEXXXVQu2trsfIY8tIWMHD0 OLJOxlzwflxwDQulLu1lSto9LF+Bk28IYWGBaBRFpP0S28IXoC2DbnqUB28eS4Aqjfee/qV9Cwc6 j+XPf55HRIgf5Tv/xQZzc1ZMMtS3wLZarowTe1JhUThebKRhTr7SPxB31xDmRaVbfsrcQJyh1WBL d2i95cc8V8fMFQ+yfelrzFq3H3Izyc3SUlKUT2F2KgWp9fMgDGY/5ED6+yvRrou2aFJ2zaFoTlS9 hF+gksQ9PTd9uMJnJuF3RDJ8lB/urh7Y2AEY6pMM5GqpdlXCIVN7KtGMCUR/6B0LAmMD2v1x6Kea 6DHwCUfjmsnBfRYEk8UxpGcZCGu9JADVuTHEJ1oepLb5ejV3rRrjiH7+OWyWLuX+qKXosjIpyMqn pEhLYWYqBalxnMjUtnq/LN/+FOtdX2PW8h2E67QUZGVSUJRPSW4mhYdTOXEojtKWerA605HPWBO/ iqdWfEhQwlbW/PdLkiracoBiflq7nknLn+C996ax96u3WPlTO1dYPUc1aCL3PXovEwcZSfrmlQsy ZNVQmhrNltL6RCk3zpqF5kAs8en5HTAcSI1/kC8cj+a4RRGNLb38BlF94jNa/8iM6NIPUz3Kwt7y djGii/+Zyoem4+G2jVMXjvn0nI6neyanNxxr/ykU6vqkLEH9cdAdI25HPKm5l0BSFtFjdWgAUldX R1GR+daDwsJCCgoK8Pb2Jj29DQ80opNUkpv6M/HOMwidPJfhuanEx1s+B8RGrQJdnmUP1Yaiti1E 2G7lFMfHMGD+dFxVMeSf3yLrFIHXgGIKPjposru8NXau9XNA/F1ryE39mU0WTMiztbMDO7C7mKEO toBt+/fXF1n2AFdTlE+1nSP256X1t7GD6qJoti5fQ4GF3/LVVfkUtK+qrTMmcPDFCRxc6YdnYAhe vn64+WjwDI5k9B2BOJNJ8rrn2Gpq+I2tI2q1AV2RhQ98xnx0OiXu6pYmtHcnJW4z3ydyUQT2uTEk R73DniwtOl0Z1Thi7+qBu18IQ6eGm9nfEXu1En2WpddHGTpMBCBqR+wpw7I2pXx0nbiMTVuv1xav 1eyNbHt0I9s9Q9AEBuLuVX+t+U2J4JpFr2GTG8Oe1c+xZ39LD9355Hw+n7c3euB27np19vHDzTcC //FLmOVahnbnKrasXN9qhrCeqaF7oqp9jSsNXM7NAYnwoXjvNyx/cL2ZNUJq0OX8zo7NGXgNDSMs dCZzh58kKT7+4uaAeAxnuEcpKbG5Fh7DDjt7O4wlFjak6ooxWrgQYbsVfkOu9hY0YUGc2pZ03gZb HMMisM1YS2G78gr/0ejmpSgiI/4bmQMiOkSXT0LPyclh1KhREoD0IBmx35ERCw1peCdMOJeG90A8 8enm0/Aa0g5QGTEJD6dt5LZyY7MaOh0Xeyjp4LqblPMmydtfJeT+xVT+9010AIogBs6/C+OWhWRb 2hve0OIT0h+H0vo0vLHfZRBrcUWMpG9ZwdNbwGXWG6xdei+/L/6YNrcR5u/l3eV7eZdQnlzzDE8l 3M6/9ln6da/EfXwknh8+10ortyN+MyOwT13FifMOXb4zCu3CpYQFruL9z1sZptPZbB1RUEaNkfrV ufdnkre/eTHllC947H9a1t/5VNOeH2McKYdg1syZbN+/sdWQQjEmkhGuCezY1/mpdNvD7+/7mW23 jP9MnW/2vWTu2kiJ72Smm9yaT8auBKbPtuT6UOI9JQJ3OxNX7+FoMoreZPR4D9K3txLMuMxh9Cgl /NBysfbqsOtV5YiivIwaoCYvgZN5CZxsVsgRv7/v4G8zl/H6C1EmHlyVKFRQU24AYz6FidEUJpo4 l+dSFkTtIH3hBPa0liywA6lufIanBu7lsXnv0r528aE89PTN6N6ay22/tDX8UDHo+kgefHAaARzj p4/fYu2KxWxZYen+leSm/8yW9J+Bc1kcJ99EoJeCoowDxLYlDa86kBk3+ZL7/WZ+t/gBvZyS9DQG hk2i1873WukFsUU9ehwONp08DIti8tf/nV6LXiQgeD5pifWTsWxHv0qAJobkt3+0PEBzqM/8GDJI TeXJJGLjE4j+6kCn1VxcmTp8EnprbGxsqKnpkamDRGPr0ldEHSjCKXQac2+dwEhvtenxy4XbyNX6 0G9ChNnxzQAoAtBMCO3SaNeYvJUi+wi8hta30Cn8b8bN5gB5aZakeFTgNDCMm+beyoThduTs/oav tuy+uDVAqqrO9YRcjCradRCvmUyZ7ddiEYXfw0y4FtKiopo+zBZvJGZnGV53vMBoH0vmMihRqjoj 2YQSz4XbePL5mS1fa0C1rqy+Vb7ZYOgyMjZFob96CRPGtFJH23AiFk6GX9dj0SXTEfpcz6NvrOXL L79k7SsPMrqVgfX2aiX6XG3LgZStH+6u5n9v5TvXk6aeyZSZLV8f+CxgylSNmY0xxO/UMmD+Uvqb nwMLeOC36GEGXNwfQcvadL2au1b9CFu5n8iZ5t5vAwN6nQEbtaPpe9s1r/HYBy/h3VqddVr0KC2b K2Q7iJuWvslnX37JZ+8tY+7QFj/wltnBxaXFqP9FtjX0cBl6E4+/uZa3nhhL1U+v8Oh9T/DWT8fa vQYIQE1pFgeiN7N5RwqVXmHcPHcWNwR6WTA/T4FX0HBci1JIym/bc0n9d8wkfEd7tlzQ7RZ8R7VS pqOcS8TiGDbpXCKWQXiM9qP84FYLhooBCjW+oZOZO3caIU5FHIj6is07fie3J6edF5esLg9Aevfu TUVFmwaaii5XSX76brZ89Q2xuXYMn3Art94UxkCnCx/98sjf+iV6/ycJnDbW9OQ3ZQBekS/g7VxF dVfMQm9giCU3uRzn0RHYnpv7YUz+ptUhU3YeQ7lu1u3Mvs6Xmoyf2fzV98Qfv5S7mw3oMrS4L1zH rVNMT4RV+C1g9ooFqPetYPueC1v7yzi5+iniikKYsuJ9RvuZf3BXeE7mmld28OTqJXTG1629Won9 qAWED2sheHCZzJSFEXAo2uTqyjWJK9jyg4FRz3/B+DFmHjBV4Vyz4k3C1dFsXR3VRYOvbAm/71Gm BXiiVqvxDLqZRyNHtrhHbkYm6qtn4m1mDrFy2AL+9MHXTAhs4cG2PIrtHyTgvmgdt04JNH19+ERy 24oleFWVUW3mD6Fw3TIOVM1k3ooX8Db5TKyh/yPrmD1eib5Tp/9Zfr2av1aVqOyUaGY/3GJApRi2 hCnjPdDuMZ1tS2HniL1XBBEzTX+u9fwY/vjDDCiKIz2j9SvNZeKDPBThh6tajatPKPc9OpfWwqQe w2Ukc59/j/dW3kfAma94/sEHeeHjuA5aBR3+aEDbXN+AFtJKAxqAw0CCBirISsqgzZelIYaTO9Lo NeVV/IZrTA4vtnKbhn/kXairddR20fef/tBWdO7T8fS2Be/peDonkZvcWr/7H41uN/gryGpsdLt0 v/lEz9dhjdK9e/emqqoKg8H8TdTKygovLy9OnTrVUacVnamqiIzY7zme5EvIuFDCQs+Qs+N404fx wi9J3+BCwLx/EDzgAPkHYyjJzaPOxgVl/7H0GXUDKpI4sW4rqnmLsXUfhlpfhbEgjT8uFVsUbn44 2DdtGnWwB2v8UHs3/Yaq1WdTUdhas3T9pDzDQ9PpN9oPR002eVvSWtnHiaFhIbiWJrAtOpXLZX6d bt9zbIlawrzHt7FoShQHt8ecWzBPg9eYOYSND6R63wrWLTezWF15DNGLHqR8+WtM/+BXRv8aReKe OApyy6hWe+DsG4LfmHD8R/lBRhRbl68yMZzHA6dhfqjtAJQ4q8HGNRDv4POKVBnQZSVQ2kJTaHWV B2ErdzB8XzSJ++MoyCpDD9i7anAPnkzw+AjcizayYaW5IVZlnFw1nw1V7zN7xQ4C9kVxcFfMufei wSt4MsFT64+x6fHnSG92mTni5BeI2kuDDUrcAiPwdtWSe7jpKvAKlxC8fAOxR4naPxxPXSp52S0P T7K7oGfAtpXkRIWfr+DAte8T+YEHBzZFkZlV3/Pj7BWO3zURBIzSoE/dSHLGTPxd/egfHI6+KLNZ Pcq3L2a96/tELv26/vrYFUNu1vnXRwg2GevZsBKmLA/BLTAcb10ZJRmplDf8aRrjiF76FDYrXuP+ zyNI+2EjKYmZ6KqUqH3DGT5zJgFeZaStfJD0a9YxwTWQ/sGgz00lL68h6FWi8gmpX00eJWofR7Dz QBMczoW5dqqb7HcBS69XdYKZa/XcOewmE/l5OCd2RpOSmEpJURnVKFF7+eE9ZiajrvWj+tfnWLep hQxWVeC+8GsemxLDoV0x5GRpGxcidPYNZ/iUmfi7prJj6bJmi25a5KJ7VbvOyMhHmeWSxtrH3+f7 9Ivp72jNuQa04ykMDAkjdFwIRZt3k2Oi8clp+HC8KjP4Lqt9D9rGxJdJs/8HAbPfZtToGE4nxlJR Ug72GtRDJ+E5YhiK3K9J3woD5gXRSxNE2YkkjI11UaH09MP2/CcxGw22NmDrGYS65PyLoorqkkz0 5a1cKOUxnM5YwMBrbsFgE4FVxusUtfZxOwwkLMybqpQdbE7NaX+mLCHawMrX17c983Gb8fX1pW/f vmRmZlJQ0Hxan7W1NUOHDsXBwYGEhIRmWbI6y6BBgwDIza1f+Up6XzqJMgC3a27GMyCIXs6uWKPD WHCMspSt5MTFoK8Zjd8TL+Fx7kmi6tBz/PbtwfofFBH4P/kM7pauE6L/mcOvv2LBIoAueNyzDr8B dtRm/JeE/227uImSF8HlpldYe3MaTzz0cYvjrR955BEA3vzoTRNbg3hyzUuo19zKv35t/k4W378Y gLfffvvcKx6MfuNXRqfewvsfpqLwm0P4HZEEj/LD2dURdPmUZMSRGPUOcbssSXPqiNs1DxM2MwJ/ fw1qV0eoKkOfm4k2NY70XRtJ3p9p+jjBr/GXlXNwbvH4Bgo2zuftt+NMbnV7YBuz7ZaxLsqDUXfM YXhgIO5eHtjbQbUun5LcVE7sWs+ejdEmFjFsTjkskmtmzyGg4fOoKqMkI4GM7WvYExVjOhjzWcqC Dx5Gc/5TX1UmOxZNYE/jc6gHwa/8yqyrz+t5yN3IRxfOSbmArWYiTzz/IBE+dugyY3hr+Up+OdPK m1CFELxwCWFXh+Du5YhNVRm6Ii25qXGkRK0nOVGL/7Ik5l17ri656/nozudM1kPpN5PQ2ZEMHxWI u1fD9ZFA2vY17Nkeh8HvJR75IBJ3AMpIWz6BL3ddEFTZavCe+jDXzIxA4+WB2g50RZnk7osi/vM1 ZObB8FfSmX11ffHqrDV8dO+y+iDAdia3bnqTERZk9qxOXcHqR98xvYhgo5av102vrjBzzWsY/cYX eH8+jRjmEDZzJv6B9deIDVCt01KQkUBKa383wa/xyPxM1i+PQzN7AcFXh+Dl64HaTglVZehyM9Ee iiJ+3XpOFlvYz2Y7lFnPP819oZ5QlMa2lct5/6DpxpiW7yWgmvIqX8xI47HFa8zek5rfU843kkfX Lsdl7VyWt3kOSA+g8Oa6uRNQJ3zF9+kX19qkcBuLxzW34DFgEA7OatAXYchNoujgN5xKSaPG8yGC H7oFB6Bo02yOpJy7u/RfTMj86RalLQcs/x7r/yQh8yehJI/THz3Aybambhei8xV2WAAC4OnpyYAB A6isrKSgoICKigrq6upQqVT07dsXgJSUFPT6ti4B134SgIieoCcEIEKIK4cEIC1zGHoTc0N07PjK dO+IEKJTFXbovOC8vDyKiorw8vKiT58+KJVKrK2t0ev1nDlzhpycHGprazvylEJcEnTl5VSpPOlj C8fa/V1dRHE5+PVxpfVVNoQQwjwfb1coKaLdORZUnvRR6SguvvSCD1Dg0VdNflKsBB9CdJMOT0xk NBrJzs4mO7sL8wkK0cMZD/7IQZ7moefvxW79Nvamn2nHcDAt0buyueXWf/Bk+Rq+jj/AsS7JayyE uFzYegQQet0t3D/FhcQ1Me0KQDSjJzJt7r0ElcfxfGtT63qkGrJ+/oqs7q6GEFewLs+CJcQVqTyO t5av5ZjnNJ5Y8TQ3tzN1jXbzv/j37iqCFvyDlxaEms48JoQQJqm44c8v8ewMH7I3PMfL29vX//H8 8w8yljjeWPoev1+KHSBCiG7X5QsRCnGlKk/fwvKHtlzkUfLY+94S9r7XUhklKr8QnNWOuKnB3jUQ 7+Bz6Uh1WnIzte1fMVgIcQkr58fls/nxIo/y0M23dUhthBBXLglAhLjcqGYyfeVrBDRkE/J/jfun nvt3VRxb7ridxK5aXE8IIYQQ4gISgAhxuSnfyJd/2tjdtRBCCCGEMEnmgAghhBBCCCG6jAQgQggh hBBCiC5zxQ3B6tWrV3dXQYhWOTg4tHtfucaFEA0u5l7SQO4pQghLWbrgt/SACCGEEEIIIbrMFdcD IsSl4IE7H+juKgghLgNyLxFC9ETSAyKEEEIIIYToMla+vr513V2JzjRo0CAAjh071s01EaJnGjp0 aHdXQQghhBCXgfT0dEuKFUoPiBBCCCGEEKLLyBwQIQQAv5Q6d3cVhBBCCHEJ87SwnPSACCGEEEII IbqMBCBCCCGEEEKILiMBiBBCCCGEEKLLyBwQIUSncKitxKm6DIfaSmzrjI2v662UVCocKFY4U21t 2401FEIIIUR3kABECNGhlLUGPKvysK8zmNxuX2fAvtqAS3UJGfZ+1FpJR6wQQghxJZEARAjRYZyr S+hjzAfAzc2N8PAwhgwZjEajQaXqBcChQ4kcOpRIXFw8/Q1ZnLLri8Fa2Z3VFkIIIUQXkgBEiEuV KoLJq1/CfvUEvt1vurehK3lV5eFYUwbA+PE3Mn36tMag43yjRgWTmJgEgG2dkf6GLLKVGiqtHbq0 vkIIIYToHjL2QYhLkhLvhS8R7ppKemr3Bx+ONWWNwccTTyzhttvmmAw+ANat+5S9e+OavNbPcAqb WqPJ8le6N5+I5OCaf+CgtOvuqgghhBAdotN7QBwcHPDy8sLFxQU7u/ov0LKyMo4ePYrRKA8clwKF 2peQcaH4k8SW6Awqu7tCAjwjmTBVQ+7GxaSXd29VbGqNeFTVD7uaMWM6Q4YMNlvWVPABoKAWL2Me WqWmzee/akh/3n7qbmxtFE1ev+HRFZyt0Lf5eKJrWFlZse21JfRxcQTg422/8ubGHd1cKyGEEF2h 0wIQKysrBg0ahKenJ8XFxeTk5KDX61EoFPTu3Rtra+l86fHsXPEPDSPU3wPy04mPPS7BR4+gxPuO BQwgji2bErq7MjjWlKGgFo1Gw4wZ08yWMxd8NOhVW4lNrbHNmbESM7NZ8O812NnW387cnNS8+sjc Nh2jI00cE8gNIQH8/f3N3VYHgL/eeROZOWfYHHOwW+thTl1dHQ+9+gmujioevuXG7q6OEEKILtQp AYiNjQ0jRozAysqKxMREysubNtEWFRV1xmlFh3HAY2go40IH41SlJXXHZhJydNR0d7VEPdVMrhmv Qf/rCpKLu7sy4FRzFoCZM6ebLdNS8DF2bDgAe/fG4VJdQr6dR5vOX1NTS+qJU40/93N3btP+Hc3D uTd93Zw67HgvfhyFvZ0tlYaqNu3n5epIub77h+e1JCuvkKy8Qkp1Fd1dFSGEEF2oUwKQwMBAqqur SU1Npba2tjNOITqFArV3IGFhIfR3KOVYwjaiU3Mt6/VQaHAKnUff4CB6ubtgZ2NHrT6PSu1hCg9+ SZn7Yvor3yRl57E/9lFOYshjT+JqX/9j+Y4H+H1PHrZ+t6AJi8BZ44PSHqp1xRhyk8iP30Beppa6 Fivigr3fWJz9gnAeMIxezi7Y2UO1Lo+KE7Hk7PiM0lIzQ//Or0/JVpL++y41frfQL2wSzhpPbO2h tiSbsrStaGO2UdFNz3aqqZH4q8tI3hVteVBo60f/Pz1M2I3haHw9UKuhuiifgow4YtZ+cFH1aVjj Izg4yOT2goLCxknnFxo7Npz58+8mMTGJvXvjUNb27Afm7pBXVNbdVRBCCCE6VIcHIH379sXO59Y8 TAAAIABJREFUzo6EhAQJPi4hCidfQsLCCNQoKEqL5ZsDGRRZ2uCqisDv/idxs8mk8NDXnIzJxqgH K3tXHPqPxW36KjT2dlQnuzTdz/Azx9flccpehduUZ3BU+uB26z/wG+GJ8UQMedu/pFynA3tPVH6T 6DfvQ/qdeJe0Dd9QYfLJW4XbnesYPEBH+YkkylI2kF+Qh1EPCmc/HIdPZ+hDoWjXL+FUjokg5Fx9 coffR8AoTzxvfRuPES5UJv9IztYk9DpQuAfhec2fGeHvR+p7b6Lr8m4hDQE3BmKjiyF9n2UP6wqf SGYtf4EAu1SSd65h++dadFVgo9bgNWbyRdXGobY+PNVozM/dcHd34/HHH2Plyv9QUdG0pXv+/LuB P4IXW6ovqj5CCCGE6Pk6NACpq6tDo9Fw7NgxampkwM6lwn/cDEL9XanJTeXnTQlklbbtd+cY8RBu 1T/WP5Bf8Excmv4juTGjGfjQS7g029OIMS8JIy446O3wDH+GwRRTsOURMhOb9nSUpmzjdPzNDI78 MwGzy/n9yx9pHkKUU7jhDopqypv3kpw8SHHi1xROfpvA6XdR9P5amk9PPlcf93JQh+IZkMnp9Qs5 mXneOKeTeylO3kv/+1/Eb8KPJEanWf5BdQRVOEP9lZARh9aSHA4uc5i18gU0h55j9YqNXNj5k7lr DUOHDr3oavXqZTrjVQMfH02zIKRh6NX5zl8xvasNG9CP8OGDCBnsyxBfL1x690JXaSA5U8snP8Ry MP2k2X2vCRrM64/ehq3NH7fUg2v+YbLsydwCbn12tdljmZtUP3nJ6xSW6Vp8D4tuHc+CGdc1/nzD VQHcf97P59v080H+/cl3zV7/9PmFBA7sB0DUnkP886MtTbbfcFUAKx6eg42ivn6xyRksfmO92Top FNZMuXoEs64Lwc/bAzsbG7LyCvkhPpmNuw6gr7Lsd+7l6sSdk8MYO8K/cYhbXlEZ+9NO8MVP8Zw4 XWDRcYQQQnS/Dg1AnJycsLa2prCwsCMPKzqNA16BYYR5VZK0YzOp7ZrnYYutsxrjiZhmwUcjw0FO x/wI1doWj2RtU0XZ1ufISDRdri7vG46ud2HE/ffh6xdLZqaJ9E+mgo9GRnQHY6kMHUZvJbQ4PL46 k5x1fyM7x8Q5DElo96ThGTGJXtFpdOnodd8Q3O1Al5VJ68mvHPFbtJSA3DW89+JGSrugei05PwgJ Dg5q7P0AqKjo3vQGt40fwxO3TyYxQ8tv6Sf5ZncCZyv0uDqqCA0YwJuPR/Lq+u/5ZrfpSf/xKcd4 4JWPsVEomBg6jNCAgbzy2TaTZQtLWw4iLpxU76zuxeuL51n0Pj75IZZfk45iZWXFotnjOVVQwtcx vzUrV1dXR1ae6bl4T7+7EQ/n3tw+8WqT2/ckHeWBVz5GYW3N1PAReHs0b1po4OqoYsUjc/Hz7sOm XQf49IdYjNU1DOznwaxrRzHruhCeePOLVt/XjHHBPHPPdPYfPs7nP8aTk1/fKKDp48INVwWwYdmf eXvzLtZ9v6fVYwkhhOh+HRqA9O7dm7Ky+vHK1tbWaDQaPDw8UCqVVFVVcebMGbRarQzN6hHUDJww gxv792LTujW0sdPjPEbKUpJQTLkPn/RX0GbmmQwA9Imvc7y1Q5X8yImDLQcpdXmfkZU8icFh41Bk /tj2gKm6HLDFygZoKQDRpVFoKvg4p6akiGp7FW3L13TxFF4a1EBBdsufEwCqmYRdC8nPr6KzmgSM 524hFw6tMsfHR8Ozzz6Nu7tbk9e12vr3U2HVPYsRbvr5IFF7Ek1O9N4en8wvh46w4uE5xBw6QvHZ 5tdFdU0NycdyABg2oC/D9AYOHc1qV10unFTv6epo8b5nK/QkZmQDUKarJK+orM31yMkvJie/mImh gah7NV+h3lhdw++Z9b+vUYN9zQYgCoU1ry+eh7G6hluefpPS8j+CzPjUY2zYsY9Ft45n9RN3cab4 LNlnTAdEU8NHsnjuRBa9/lmz9xKfWv+7GzNsIC//eTbGmhr+F20+05oQQoieoUMDEDs7O6qqqppk wcrOzkav1+Pg4ICPjw9OTk4kJydTV9fyVGLR2XQc37GFysAwZsyaQEJsLOm5le3KdGVMfJk0+2fw m7eOvvpsygvyMJTkYSjMpqLgGLoTSRhana5QRVXGXgt6E4yUpafB9CAc+JHmbckuqINvwys4lN5e nijt69eeqdUXYdTlUVmiRmlir7YzQpeHH2Dv6ogNoNdZMDE5MByvqgS2Huq8id3V1rbUYI1WqyU7 W4uPT+vreFwYfAAcOXIUAIN18wferlBTW9tilqndiUco11cxfGA/fk062oU1u3TNm3A1LmoVkcve p7yy+TVYV1fHW5t24OqoYtZ1ISRmNA+UnFQO/PXOqSx+Y32ToOxC+w8f54n/fsHqJ+8iOj6ZglZ6 mYQQQnSvDg1ArKyssLa2JiAgAIPBQFpaWmOgUVZWRmFhISNHjmTgwIEcO3aslaOJzldJburPxDvP IHTyXIbnphIf3/Y5IFCOLv7vJMarsPcOwsHdEwc3Hxy8x+E4+i56q6s4e2gtmdt/RN/CoY16yx4a 6vTl1NiosFVAk4hJOZr+85+hr3s5Zcmx5CQmoS8pp7YarO1V2Dr7oPabhLrTl9/sGRRqR+x1WnSd OK2iYQ0QqE+vbUkAcqGKisrGFL2Viu7pAbGEvsqI0q7rg85L1W03juH9b2NMBh/ne2vTDqaPM51B bUrYCJIysknPzkWhaHntqJQTp0jM0DJ+9DC+3Lm/3fUWQgjR+Tr0Uay6uhpPT08MBgMJCQnNejmq q6vJyMhg5MiRnDx5Uiaq9xAZsd9xPKU+C9YNs/wpyjhAbFuyYDUqR5+zF30O/DFt2xZb70n4zlpM 4GzMTB4/V9JebdFZrOxVKKrLaXr5eOIx+xk8ieHwf96k1OToqb0UZoCj/1gL30/Po9eVUQ3Yqx2B /BbL1ujK0KsdsbcFsx/6RXCsKcOrKg+Ae+6522wa3tZ8991WCgsLqbByQKew7BroDKEBA7j5+qsY 6aehj3NvbG0U6CoNnCku49ipfJxUPTc46mlcHVX4eLqyx4LeoqKyctJO5prcNmxAP64fNZR9Hzxv 8bnNDeUSQgjRc3RoAGIwGFAoFGRmZpodYnX27Fmqq6txdHSkuLgHrKImAKgpzeJAdA5p3oGEhY3j 5rnDOXYgnvj01tYBscVKYaTObCxpxJizjcz1aoYvuhkPtx85ZXJCgh12A8bSi6RWhmHZ4jg0AOvc tU0nYTtF0GdAMdr3zAUfl4ea3Hx0gNpHA2S2XDgjgQK7Bfj5K8k83LHDsC4MPsaNa57RyhJHjhxl 585dABTaNR+a1RWsrKxYetc0ZkdcxS+HjrBu2x6y8goxGKtR2dvh5qQmcEC/VlvgxR/cnXpTW1vb ZN5HS4rMZPdS2tqw8+Bh1mzdbfG5S3Xdm9BACCFE6zo0ADl79iy1tbWcPXu2xXLV1dUoFIoWy4ju UIMu53d2bM44txL6NOYOP0lCfLz5DFl+TxIyvZwj/32z5ZkVeh01qLG1b6GM+yQGjN5KaksT0T3v QjMCCjfENq2PvQs25GEoaakSoHAf1Dmrb3aVjDgKqubg7+uHipiWM2EVR5N4aAlTFkYS/8SaDsuC 1VHBB8Abb6wC4IyNB5XW3dPDMG/C1UwaE8iCl9c2Tq6+0NbYJK4fdfHpiq8UBaVnsba2xknlYFEQ 4tJbhakevTPFZYQGDODwidOdUEshhBDdpUOb9CoqKjAajbi4mE/LWFdXh52dHUZj9+X7F62pJD99 N1u++obYXDuGT7iVW28KY6CTiaDRxg4b57H0C9ZgZfZ4nrhMn4ejLolC0yMtgCqqcvOwn/ISfsNN zyOwcpvGkMhbUGa8R9aFKXgLkiivDsBjhKfpwys0OI1/leDIG1BeyhFIeRzpGQbwDUfT6nQELYmr 3yHXfymRf5+DUwdMX2hL8JGYmES2mWxdiYlJvPjiywAU2LhSYut88ZVrpzk3jObtzTvNBh+i7YrK ysnOK+KaoMGtlnV1VDFsQF+T2+JSMhk2oB8B/U1vF0IIcWnq8Eex/Px8+vXrZ3YtEGfn+geNhnS9 ogerKiIj9nuOJ/kSMi6UsNAz5Ow4TrOpIdWgmvI2o0bHUpBykLKCPGr0YG3vgtIrCLfgCJzV2WSt f7fFlcONKa9zVH8Xw2a9TcjoGE4nxlJRUg72GtRDJ+E5wg8y3iV1U0zzKQ01e8nensbw6SsJ9P6G vPRMDNWgUHui6j8Ot4BQVPbZFB04gGqUJw6aINQ6HYbcYxgb6qRwwd7LBztnFdi4oOofBCWZVFww pkvhFoCDlwvW2OHQP4DSk125GKGWtF2pTFkUztCrlaTvaWVoVfY7bFgKs5e/xqLPI0n+IYrMw1p0 OrD30uAeHEHBln9bdOa2BB+xsXF88smnQP0q6Q0LFVZUVDSm3AU4Zde3W+d9ALg4qsgtavl+5OHc G9W5jGqtqa6uoZeFZTuTsaaGXsr216PSUIW3h/nA0MrKisGaPma3f7lrPwv/dD0/J6RRoTc/oWzR reMbFzW8UFzKMVKO5/D0XdNYuOJjjNUtzxtUKKxR2tq0eD4hhBDdr8MDkOzsbEJDQ/H29iYnJ6fp yWxs8PPz49SpU5KG9xJSo8viQHQWB0xt1Bdj0H5J2oYkeoXegmfwXXi4u2BnYwfVOqpKsinLWEPy nm3oWp2bUYX+4DIOnYig7zXT8ZjwJA5qNeiLqMxNIm/T65xO15pdaNCQ+C9+192C7zWT6D9qAXY2 VdTqdVTmplG2518cPbQXvf1tjAxdQN95r9KXKkq2zCctsX4ukmLEk4yYFdr4R+E3fxyUbCX5/OFl irEMmP8PPM49Mw+Yv4q8ZVNbWPyw45X/sJ6M+a8RcONktu6JajV1suHwO/xvfgxD73iY0VcvYPoc D+ztoFqXT0FGKjEWnLO9wUdDit4L6a2UlCkcuz34AEg5lsP0sUFmJ0xPGjOcv0XehJO65dXeGxzJ zmNQPw/8NX3I0J4xWWbMsIF4uzubXdiwIxzJzuNP145i9eadJlMMK6ytuSl8JLlFpRxIO9Fse1Km lrnjx+DmqG62AntfNyeeuXs61wQNJjY5w+T5N+zYx+Qxw3lj8e38dfWXnK3QNyvz55tvYNZ1IRSV mb85PP/BN6x99j5eX3w7z723yeRxAIL9fXhu/gziU47x+hfbzR5PCCFE97Py9fXt8Gen3r17ExgY SFlZGWfOnMFoNKJSqfD29sZgMJCSktJlixEOGjQIQNL+9mgueNyzDq/MR/h9jwyDaZ0S7yU7uH+q li133E7iReZyGDq0fm7DL6WmW7vbG3zk2nlSpnDEptaILdWNZQxWSmqtOmb0p72dLX7efbC2/mMA oJujmtcXz+OR1z6l4rwH75qaWjJyzlBlrG5yDH+NJx89cy9JmVq+25NIfvFZVA5Khvp6MTE0ED9v DzbFHOTGqwL44qd97D98nJz8EpMLEjZY8fBcQocNYH10HGknTmMwGunj4kjggH5cGzwYL1cn3v56 F5/+ENvq+3FW92LVY3fwl1X/o+y8+RSZOWdabOnv3cueT59fiLGmhi9+iudkbiEKa2s0fVwYMUjD dcGDqa2t4/kPviY+tfn90crKig+fvhdndS8+jPqFM8VleLo6MW6kP+OvCiArr4hjp/Lp6+7Ea//b TmbOGfRVTfsm3RzVvLpoLr6ebmzcdYCkzGyqjNUM6ufBrOtCGNDXnVc+3cb1o4ZQaTCy8ecDnCku I++CHik/7z68/ug8HNUObPnlNxKOZnO2opLevRwI6O/FdUFDGDagLz/EJ/PKp9vQVZoOUoQQQnQu z9x4S4oVdkoAAqBUKtFoNLi4uGBra4vBYKCgoIDs7Owu7f2QAORSIAFIm3ku4J51L2C/8Rbe//Di WtFbCkAuNvjobHdNGcuS2yZhZWV+BlKD2tpa/v3JVr7+5bdm23w8XVk483rChvvhrHagQl/FydxC 9h0+zpZffiOnoISoVx+jn3v9Z7Rhxz5eXf+92XNZW1szLXwkt94wmv5ebjjY2VJYVs7hE6fYl3qc HQcPmwxgbp94NU/dMdWi9/N///ueL37a12IZlYOSyMnhjL9qGN4eLtTV1XGmuIzETC17kzP45dCR ZgHZhfsvnjORa4MG4+5U3xOSciyH7ftS2PVbGvdMHcfiOROoq6tj2dpv+fbXQ82OobC2Zvq4IGZc E4y/xhM7GwV5RWXs+f0on/8Yz+nCUl59ZC4TQgMBSMrM5r6X1jQ7jq2NglnXhjBxTCCDfTxR2dtR Wl6J9kwxcSnHiN6XwsncglY/NyGEEJ2n2wOQnkICkEuBBCBtp8T7kW3cPzWTDXc8SPpFpB42F4DY 1Brpb8hCQW2PDD6EEEII0bNYGoBIYnshLkkGctYtIy43EL9AZaecoU91PgpqmTFjugQfQgghhOgw l3JCUnHJs8XWzQ+lvQv29mDtNgy1tysAtdXZVOYVd+nk7ktOeQzRD17baYdX1lbRq1cvZsyYZraM BB9CCCGEaCsJQET3Ud7AwPufxLVhcUKvJxkx6ty/q5PI/M/fyL+MVzXv6azranB1NbOuChJ8CCGE EKJ9JAAR3cfwI0de/bG7ayHMMFgp0Wq1HDlylCFDmi4oJ8GHEEIIIdpL5oAIIUxqWJ383XffJzY2 DoCKikq++26bBB9CCCGEaDfpARFCmKRTqOuDi4oyPvnk08ago4EEH0IIIYRoDwlAhBBm5dp5UlHj gLOxBPs6AwA6hYpCGzcM1p2TfUsIIYQQlzcJQIQQLSpTOEpPhxBCCCE6jMwBEUIIIYQQQnSZy74H RFZAF0IIIYQQoueQHhAhhBBCCCFEl7nse0CEEJYZUnm0u6sghBBCiEtYqYXlpAdECCGEEEII0WUk ABFCCCGEEEJ0GQlAhBBCCCGEEF1GAhAhRJeqq2v6fyGEEEJcWSQAEUJ0uJaCCyurP/4vQYgQQghx 5ZEsWEKIDlNXVx9YWFmBm5sb4eFhDBkyGI1Gg0rVC4BDhxI5dCiRuLj4xmBECCGEEFeOKzIA8fFb yXsjfMg99Rn/d/AbDte2bX/N9Hy+iHDgwb+pSe2cKgpxSWoIKMaPv5Hp06c1Bh3nGzUqmMTEpC6u mRBCCCF6CoWTk9M/u7sSXa2s9BDJpTBwwJ3c6nSCbae1GNuyf2Utc+4tIbxMzcajMopNXNrc3d0B 0OkqOuR4TzyxhOuvvw47O1uT29et+5S9e+Oavd7QeyI61uDB/qxe/V/s7ZX8/ntyd1dHCCHEZcxg qLSkWGWH9YD4+vri6+trUdmjR4+Sl5fXUaduu9o8Ek+vJdXoyvrwSYyx3svPbekF0apZFVvGB3eV Mjnalei2RC9CXGbODxxmzJjOkCGDzZY1F3xcjGHDAnj22aexsWl6O3vggYcoLy/v0HOJnmfixAnc d998rK3rG4Puuec+jEa5KQshRE/WoUOwSkpKOHnyZItlBg82/3DS1YwV2RQpQlErgDYNw7IieoOa jBtKeXi6I9HfXJEj2YRoQqPRMGPGNLPbWws+Gialt7UX5MiRo/zjH8uwta3/O3R2dmbJkr+07SDC JDc3V55//jmWLHmyu6ti1u7duzl5MgtPzz4sWvRwd1dHCCGEBTrsydloNKLX6zl79qzZMtbW1iiV SiorLeqe6TrtGUV1TM3Gw6U8fYuO8K3OxEmDm7hCNQQMM2dON1umpeBj7NhwAPbujWvXEKyamhqO HTvW+LOHh0fbD3IZO3HiJE888dd29Qap1b3x9PREoVBQU1PTCbW7eAZDFUePHkWv72HfK0IIIczq sAkMp06dIiMjo8UyLi4u1NTUUFZW1lGn7UYKon62R+9VTmSo5BIVIjg4yOTrBQWFZiedjx0bzvz5 dzNqVDAgaXk7g9Fo5PTp05fJfVcIIcTloMMCECsLmi5dXV0pKirqqFN2O+1eBzKpIeIGPcrurowQ 3Uij0Zjd5u7uxuOPP0avXs0zYs2ffzfwR/Aik9CFEEKIy1+XTl5wc3MjPT29K0/ZufKUJOTC8CA9 4TgQ0931EaKbmAouzufjo+Hxxx9j5cr/UFFRn22rYehVT9K/f39uumkKgYGBODs7YTAYOHkyi19/ 3cPu3b+aHYY0a9afuP322wBYvfodEhIOMW3aTVx99Rj69PGgqqqKY8eO8913Wy3KROXu7s6sWTMZ NSoYZ2dnzp49y9GjGfz00w5+/z2ZyMg7mDFjOvn5BfzlL0ua7b906V8be5Ua/PTTDj76aG2r5+7d uzerVr3e5Hf62WfrTJbV6/U888zfyc3NbfJ6Q/0Ak3V0dnbmjTf+DwcHB6C+l+aee+5rsV5eXl5M nTqZoKAg3NxcOXv2LGlp6fzww3YyMjJbfV9Q31AWHh7G9ddfy4gRIygvryAr6yR798bzyy+7e+ww MyGEuNx0WQDi5OSElZUVJSUlXXVKC9lidxH7puYBwVUEekJMNyb2EqKnOz8ICQ4Oauz9AKio6P7x +3Pnzubmm2eRkHCITZs2U1hYiL29PUOGDCEy8g4mThzPG2+soqiouNm+0dE/cvjwYR555GGGDh3C nXfeTmVlJTt27CQrS4tarWLUqFE8/fTfeOed9/j11z1m6zFq1Cgee+xRjh8/waZNX5Ofn4+TkxNh YVfz7LNP89NPO6iqquKf/1xmdljVhx9+1JheGeBPf5pp8edw9uxZ/vnP5fTq5YCXlxd//vODLFv2 ErW1zR/ODQZDs+ADYMuWKPbvP8CwYcOYMGF8s+0lJSX8618vYm+vRKPxZv78e1qsU0TE9SxYcC9p aels2fItBQUFqFQqgoJG8ve/P8u3337H/v37WzyGk5Mjjz22GE9PL3bv3s23325FrVYxePBgbrtt DlOmTOKNN1Zx5kx+K5+QEEKIi9VlAYibmxvFxcXU9aRB3vpssmtu45p+nmw+3p7owQptngKowc8T kABEXGEaslY19Gq0xsdHw7PPPo27u1uT17VabZPjdbXbbpvLpEkTeeWVV5v1UBw4cJAtW77lL395 lOeee4YXXvgn5eVN329lZSVHjhylqqqKiRMnsHdvHO+8816TdLBxcfEcO5bJggX3kpBwyOSk8EGD BvL4439h06bNfPvtd022xcbuZcyYUP7yl0eprq7m00/Xm30/hYVFFBb+Mdy1tLS0TZ9HdnY2AHq9 AYAjR460qXdAp9Nx5MhRHB2dzJZpyJhYW9tyCsKrrgrhgQcW8O6777NnT2yTbfv27ef777fzt789 hadnH7PHUCqVLF36N44fP86KFa9hMBgat+3ff4BNmzazYMG9PPvsMzz33POSvlkIITpZl6yip1Kp 8PLyanWSeper3csnKcfwCVnNmuueZoaT6YXTWmIotwZqcVR1fPWE6OkaggWtVmvx6uYXBh8VFZWs W/dpk+N1pYceWki/fn1ZuPAhs8OjysvLefnlFXz88Se8885qlErzs75Wr36H//73LZNrUURH/8SJ Eye57rprm23z8fFh+fJ/sWTJk82Cjwb79x/g3nvv73mZBDvJtdeO4+67I7nnnvuaBR8NcnJyeOyx x80GwVZWVqxa9ToffPARa9Z8THV1NQqFosl/1dXVvP/+h7z99ju8/vqrnfmWhBBC0EU9IG5ubpw9 e5bq6uquOJ3lrMfywPBBZCcs4sl29YCAUlULWFMmDWbiCnbPPXebzYLVmu++20phYWG39X4EBAxl 06avLSqbkpJKTU0N/v5+pKSktut8dXV1JpN2DB7sj1arpbi4+RCv89XU1JCaerhd577UDBkyhMTE JIt6zhMTk5g6dUqz193c3HB2dubf/15u8XkdHR0la5gQQnSiLglAXFxcyM/vgeNq7X3wVGQTfaq9 Y6fq0HjWAPakZndkxYS4dNxzz92MG9e+CeVHjhxl585dQPdlwFKr1ZSUWDZEqba2ltLSMnr37t0J 9VBRVmZ+HaXzXSkPxy4uLhw/ftyisuaGmdna1vdsv/zyCs6e1Vl0LBmCJYQQnavTAxA7Ozt69+5N WlpaZ5+qnYxUXcS+gZ5Arh2pLTdaCnFZupjgA+CNN1YB3Tf3A+DsWR3OzubnKpzPysoKJ6fOaR3X 6crp3VttUVlHR8cOP39PVFxcbPF7NVeupKSEuro6bGxsLA5mhBBCdK5OnwPi5uZGeXl5k0l/lw1P AyFeUJpmT0J310WILtZa8JGYmER2ttbsthdffBno3uADIC0tjdGjr7Ko7PDhgSgUCjIzj7VeuI0y MjLw8fHB2dm5xXIKhYLAwGEdfv6e6MiRIwQFBVm0zpS5IYCVlZUcPXqU8eNv7OjqCSGEaKdO7wFx dXWlsLCws0/TLTRjK/FDQfTPSi7D8EoIs1oLPmJj4/jkk/qJ5RqNpnFNiYqKisaMVw26e/HB6Ogf efHFZQwbNozDh83PrbC1teXOO+/g559jOqVBJSsrm8zMY8yZcysffrjGbLmJEyfg4uLS4ec3pWHe nr29fbuGJRkMetTqljN09O/f3+y2+Pj93HVXJOPH38iOHTvNluvb16vFAGPLlij++tcnCQ0N5cCB Ay3WR6VSyRAsIYToZJ3aA6JQKHBycrpMA5AaZt6gxz5XxfoDsnyzuHK0JfiA+gxZR44c4ciRI03S 7faUjNwnTpxky5YonnjiMYYNM92z0KtXL554YglKpR0bNnzVaXVZu/ZjrrvuWqZNu8nk9tGjr2Le vLmkpx/ptDqc78yZM+j1+hYXjezXry+33nqzyV6K48dPYGtr22xRRKhPjXvnnXewYMG9Zo9tNBr5 4IOPmD//bsLDw8yef+nSv7aYGey33xL48cefWLToYa6+eozJMvb29sybN5d3312NSiVpDYUQojN1 ag+Ii4sLRqMRnU5nURd61zv3JdNyGnqTlIN0zBkGv72jJq55tk0hLkttDT6g+RCrjhwPhzWhAAAg AElEQVRypVTaodFosLb+oy3Fyal+PsegQQPR6/WNr9fU1JKdnW0yPe5XX23EysqK5557moMHf2P/ /v0UFhahVNozZMhgJky4kYKCAv7971dMto67ubnh6uqCnZ0tnp6eDBw4kOzs7CaZ/5TK+kX3HBwc cHd3x8dH02yI2vHjJ1i58r889tijXHVVCD//HENhYSGOjo6EhV1NSMgo3nvvA/z8Bpn9TDw9PXF0 bDpJvnfv3tTW1jJ4sH+T13W6ck6fPm32WEajkS++2MD8+Xfj4+PD778no9OdpXfv3vj6+hIUNAJ/ f3/27zfdq6DT6di6dRuPPrqIzZs3c/z4SXr3VhMQEMC4ceFYW1vz/ffbmTx5Iv7+fpw5k99sfs3B g7+xdu06Hnnkz1x//XXExu6lsLCQXr16MXLkSG68MYLMzGN89dVGXnjh7/j7+6HX68nKym6ydsna teuoqKhgyZK/kJKSytdff4O1tTVubm4EBg5jzJhQKioq+c9/3pQeECGE6GRWvr6+ndYO6e3tjY2N TeOCUz2NrefTrB9jx9vblvFzm4KQOmY+c4q3ghxY+IAr0fJdJS5hQ4cOBSA3t+VMde0JPjrb9OnT iIy8w6IGjtraWj76aG1j1i1TBgzoz9SpUxk+fBjOzs6ND7K//rqHX37ZbXYxvpdffokBA/4YSlRT U8M777zXZO2KyZMnct999zb+rNcbeOqpv5nsIfbw8GDWrJkEBwfh7OxMSUkJv/+eTFTUVk6fPk1k 5B2sX/95s/2sra1Zvfq/rc4jaVBaWsrDDz/aaprbYcMCmDlzBr6+Pjg5OXH27Fm02hxSU1PZt28/ p06ZD2KsrKyYOnUKEybcSJ8+faisrOTkySwOHvyNmJhf8PHRsGzZPwGIidnNu+++Z/I4ffv25aab phAUNBJXV1cqKio4ceIku3f/yp49sfj4aHj11VeA+qFjb7yxioSEQ82O4+vrw+TJk7j22muoq6uj pKSEI0eOkpBwiAMHDva8dPFCCHEJKS0tar0QFHZqANJjWXsS7DmN24Nuwa/oZe7bv5c2xRCas2x7 pwTDR/245RtFZ9VSiC5hLgA5v6eiJwYfVzJzAYgQQgjRnSwNQLpkHZCexmfg0/xrmCdZp9/lmYQ2 Bh+AJtiA42EXHpTgQ1zGGoKPGTOmS/DRwzg4OHR3FYQQQoh2uyIDkOzMx7k5s/37a7e6c+3WjquP ED1Vr169mDFjmtntEnx0PYVCwfDhgd1dDSGEEKLdOn0dECHEpcvV1dXsNgk+usecObdKD4gQQohL 2hXZAyKEaF1dXUMK3aMMGTK4yTYJPjqXtbU1Pj4+2NnZNr7m5OTEddddS2DgMFas+L9urJ0QQghx ca7MSehCiEatZcHq1asXc+bMZty4cCoqKtm5cxfffSdjEDvT4MH+PP/8c9ja/hGAVFRUkJycwvr1 /+PMmZYzlgkhhBDdQbJgCSEsYmkaXiGEEEKIllgagMgcECFEq3rKquVCCCGEuPRJACKEaFVHrVwu hBBCCCEBiBBCCCGEEKLLSAAihBBCCCGE6DISgAghhBBCCCG6jAQgQgghhBBCiC4jAYgQQgghxP+3 d+eBUZYHHse/OSbH5JhcEJhMAiRBkiCJmLRBUKkCRg2irLu4rWeltqitrGItWKWtdqVF0ipWRa09 tOxS1FKooJyKIiFLEBIwCSThSshBDjLknsmxfyAYyEwSIEwQf5+/YN5n3vd5h0l4fu9ziYjLKICI iIiIiIjLKICIiIiIiIjLKICIiIiIiIjLKICIiEud3FVdu6uLiIh8MymAiEi/6ylcnNxV3c1NIURE ROSbyHOgKyBy0fGewmWz5xDi0/VFG7V/v519e+0DVauvhc7OE8HCzQ1CQ0MZNy6Vyy4bicViwc/P CMCuXTns2pXDtm1Zp8KIiIiIfHMogEj/CEjnmWnDeHfZK+S2D3RlzlPrxxz4ayVlpwJINObb7x/I Gn1tnAwU119/HenpN58KHV1dcUUSOTm5Lq6ZiIiIXCwuSAAxmUxEREQQGBiIm5sbra2tHD16lCNH jtCpMReXJq8ggnyNBA10PfqFHXtlLl37OlrbwHvA6vP18thj/8Vll410evyvf32bzMxt3V4/2Xsi IiIil7Z+nwNisVgYPXo0NpuNffv2kZeXR0VFBeHh4SQlJeHpqU4XkUtJ12cKU6emn1P4uFg899yv iYy0DHQ1LhqhoSG88ELGQFdDREQuMf0aQIKDg4mMjCQvL4+ioiJqa2uxWq2UlZWxc+dO2tvbueyy y/rzkiJykbBYLEyderPT472Fj4thUvrgwYMJCro0+vH6g79/AOHh4Xh4eAx0VURE5BLSr90RERER VFRUUFdX1+1YR0cH+/btIyUlBV9fX5qbm/vz0n3nMZSUMVOZHBtHbJAJP09obLJSVllAdt77fFBS juNpxgYSr8lg3ugujZO2fP64dAEbT95KUDoL/v0Ohnf5VI/k/orHtxYDEJv6G54ea8YLoG0HGX9+ kWyPKK4dO53Jw2MYFhCEF43U1ZdTeHATH+Rmkd/c+6RnY+jV3D72GpLMUQwy+kFrHVV1xeTvXcu7 eQVYe3ivIfIh3kofd+Iv1X9nzrurKQPwOlGvm2LjMPtCU10Bm7OWsqyk+qs3B9zA03fcRUKX+33w gbd40NGF2spYuWIuy2p6vZ1+4RE+hfAJUwi1ROMb5A9tDdjr9lNfsJ6yrI/puGIhI/1eY/e6ggtT AW8LgbHjMcUkEmiJxjcoBE9PG7a6YhoK1nB443pa+jRXxg+f0TOISE4hcEgkBh8vaKultXo/x3NW UFYxnriJJRS89U9aeziLR8TNmFOnEDI8Em9/f9zbGrDVldBQtB4OFZ/XrZ4cNnXLLelOy/QUPq66 6sT3LzNzm4ZgiYiIfAP0awDx9fWlrKzM6fHW1lZsNhtGo3FAAohxcDpzbpzOsNYCsve+z5s11TS2 G/ALGEps5DhuSnuWySXLWbxhHUXdGod28rMXkWG7j1ljh1K28y/8b1ExRV1vo+4jMlYUM3LUncxM NFH02Ru8tferxl3Rzhd59oAJY9hUHhwPpvAZPDN5KiM9yti+9302lJVT124gKCiR8Ql3Mn/MVDZv WMSSg9VnVuZLJhJTZ/PI2CiaDmexNWsTRU1N4BGGOTKZa1OfZHHCp7y09g2y6x2fwV62lGdWbSIo 5j5mhX95VvMMHpk8lViKyMxdyns1dgbFTuX2tMcxrJjL2ydDRP0WXl1xmEHeYAhK48HxJrauXU62 o4Z1m5VDLgkfwfhfP5/LxkViL9pM1ebVNDc00Ik/hrA4gkd/n8tTbqOhIRLviuALUwWPq4iZ/QtC 20o4fjCXY1mbKaurpR0vDEGJhKb+iMTYOArefInjPaUGLAz63kJihts5vudjSnf8jdYGG3j64z0k keCkeSRN8sK9bjXOn08bME5YSMKkE59H5cZ/0lzXQKenFx5BcQSNugOvQ8/1y20nJSU6fL26usbp pPOrrhrHvffeTU5OLpmZ2zQPRERE5BvALSoqqt8GPSQlJVFZWUlFRYXD4+7u7qSmpvLFF19w/Pjx /rpsnxhC03l62vU0Zb3C4rximhyVCUhlZtp9pNiWM3/VRziOUgZir5jH3BQDm9cs4O2y089kinyA p9PGYN26iN/kHXbcmzL4Pl79t6sxtnlhr3mfjNXLybedWchEyjWP85NRBjasepq3j555JiPx4+cz d5SdTzYs4s0SB/0cXnH8540PcVNAAS+98wrZ3a7R5WoJ81mcUMybe6P47oQYGvf+hd99soWyLmHC FBCGvb7a4WdH6J0snj6Ud/+8iE8GbBUsA8YJL3D5BBulS5+i7EijwzI+SfOIv3U8Hnt+RfY/Mvtw 3kSGPfJrvNf2fRleN28/OlsdXR/wiGbIvQsZWvEMO9c4Xw3KbfR8km8NpvTNJ6iodHTdYEJnvMzI sM3kvvKa438Xv9tImH0XbasfZl9OpYMCBkaNigagoqKqt9tyymKx8NRT85weLykp5fe/f5GmptNr uWTJy6f+PGvWw+d8fS8vL66+egJXXz2e8PAhBAYG0NDQwP79B9i4cRMREWY6O+H991d3e++vfjW/ T0ND29vbWbLkdbZs+czh8TFjLmfu3Cdwdz8xsrWwsIj5838JgNFo5Oabb2T8+PEEBwdz6NAhli9/ h7y8fIfn8vb2ZsqUyXz72ykMHWrGx8cbq9VKYWERmzZ9xO7de3qt78iRsUyZMpn4+DhMJhM2m52K igp27tzFunXrqa93/FQiICCAF17IwGjsvoLZmVpaWpg37ymnv/NFROSbxWqt7Uuxmn7tAamqqsJi sVBVVUV7e/dWqMViwWazOf2P78IZyk3XToWdC8hwFgoAe30WS1bDY/9xH/fEZPGbYkdNOjtFuxaR 4T2POWnzsK9ewLKjJ8qZzPfxdNqVWLMWOA8fp3jh1fypk/ABYCX700UsMT7LrAk3sHHF6tMCkWHw DB5MMJC55hneLHPY9ARbActWvwjT5zHz2ivJ2/C540bqyRqFpfFgUBXbP3qGl/Z2r7+13llPzEUi dDojJgZT8/cHnIQPADstORkcHJVIzAWsitPwAdC+n6qc/UQlJ+NDLi1Oinn6B+NenUudw/ABcIya zf8kOKnE+fAr/3AM7KeqwFH4AHr5lvZVb43VyEgLjz46+7QQcnLo1fkKDAzkF794Cj8/PzZt+ph1 6zbQ0NCAv78/0dHRPPDATHx8fJwGh5deeoXQ0BAA5s59guXL32X//v3dynV0dHLo0CGn9cjLy2f+ /F/i6elJcvKVxMXFARAfH8/DDz9Ie3s7a9eu5fDhUpKTxzJv3s944om5lJef3ngfMWIEjz02m4aG Rj77bCulpaXYbDZCQkK4/PLRPP74Y+zY8TmLF//BYT08PDy4++47mThxIpmZmSxbtpxjx47h5eVN VFQkEyaMJy1tCn/4wyvk5u7u9v76+np++ctnMRp9GTJkCLNm/ZBnnvlvOjq6/05vbW1V+BARkbPW rwGkvLycwMBAxo4dy6FDh7BarbS1tWE0GomIiCAkJIQ9e/a4fine0Ou5NmA3y3b3FgqA5s95L3c6 z4y6EmPxFicN9ibysxaQwTzmpD8OqxexynM6c29OPRE++nIdbORkLye3h14JsJK5dS3T7riGSaGr vxr6hIGUxFSMJX/hLWfh46T2Yt7bmsXEm9O4yvfzr+arONJ6iDVrF/F2WU+zRi5exuR0/CqWs6+4 h8Y/AI3UbcygkAHci6IN8PTqsYi9KJPGSbcxPHUHhVm5OOxYqlxO0boeTlK9mdq6dCzpN1O/eg0t PQ75urC6hpCkpETuvffuU8eams59SOatt95CR0cnjz320249LNu2ZbFy5Sqee+7XTn/vVFdXU119 Ily3t3dQWlrK3r37zroe7e3tFBefCC4Wi4W4uDjS0m7grru+x6ZNH7N06f9gs534gd+zZw8ffPAh R4+e3utkNpuZO/envPPOe2zYsLHbNbZs+Yx//GMFs2f/xGk9vv/9e4mKiuLxx39KTc3pT6J27drF qlX/4sYb03j00dk899xvKSws7HaOkpISAFq+/MLs27fP4UMlERGRc9GvAaSzs5P8/HxiY2MZNWrU acfsdju7du0akLkfpvAoIozxzHngLJ641g/DzBaKnBY4EUIWe8xjTvpvmOhhoCp7UR/DB9B2mJzD fWjo1+8mp346I8NNUHOyfBQJ4QaKsnf32KNxkr1yB3ntD5AQZmBjifPa2eq3sfFrGj4gGH9LMM17 s/v0+XfWZPY4Of+8eccROuE2BsXGYwwLx8sTwEZHSwOtdaW0YsGdXiZ/1yxn39+DiUn/Nd+a1EBz RSnNdZW01pXQXFlCQ2kuTdZewlZ7ASVLM/C8/Uck/ux+7BUlX56jkuaa/TSVnl8IOzln48yGvzOR kRaefHIuYWGhp71eWlp62vnORlBQEHl5+U7r0NjYyDvvvEtLi7O+pgtjxIjhDB8+jNdf/yOffrql 2/EzwwfAD35wPytX/sth+Oj6vuee+y0pKclkZ+847djo0QkkJSUyd+7PaWx0/t348MO1eHl5cf/9 9zFv3s/7fE8iIiL9od835RgxYgRhYWEcPnwYq9VKe3s7vr6+DB06lJEjR5Kfn4/d3j/DPvrK4GHA Vr+NN9evdTKvw4F2K84HW5zURFFRAWUJaQxvL+KDg30MHwBYqeux9+OrclXNkORlhFNNZhNGLzuN TX28WruVOpuBiJ4fuH/NBePpA/aGYwNdEdwiZhB/x/34U0ztntWUbC6mtcFOB+DuH4x3UByBo6P7 9NNnL36NgsV/whAaj3GIBd+gSHzDEwmLvY3hQ/yxH1zN/pV/wmrt4btg3cyBP23moF80AZYYfIIs +IaGE5g0HnNaJI3vzT73e/0yLJSWllJSUtqnPTTODB8A+/YVnna+s7F9ezYzZ97Pjh07HA4pApwO v7qQbDYbCxcu6nNvisUSQWSkhQULftvrsrctLS1MmDC+WwCZPHkSH364jpaWll7PsXbtOm699RYs lghKS4/0qY4iIiL9oV8DiNlsZtCgQeTk5Jz2tLGhoYGqqipiYmJISEggJyenPy/bK2u9FXxNGOrP WLXqPBlC05mbfh3kvc6r3lOZOW02jateZGNdX4KBiSAvoNf6mBjkC3Zb16e7VppsBgZ5GejTGH4P E0Fedhr7FHi+rhrpaAEPH3+gtyFYF5D3VUTfcReGgxnkrFxPq8NRK5upbYkhdEJfT2rHXpOLtSb3 tF4bN1My4WmPMOpef/a+loG1l+FVnY37Ob53P6ct/+BhYVSsX18r0qPa2tpz2sSvqan5vDYn3LYt C5MpkJ/85Me0trZSUnKYqqpqqqqqKC09wr59hT32BlwoR46UndVQrujoaPz9/XnrrT/3qbyj0BAd Hc24cancddf3+nxdi8WiACIiIi7VbwHEzc2NyMhICgsLnQ512L9/P8nJyYSFhZ0ac+0K9spciriT ybFD2bi7vF/OaQhNZ+606RiLXuTZrbuxUoD9unnMmvYQ9hUv8klv8+w9o0iKMvHB3l4GAgWMISHA SmFl13KHyau0MzN2DMbirF6HYRnCk0nwOMy71a7teXKtShoqGrDEJOORtcbxfAkX8IhNJ5TNFDgN H33n5mGgs935v1mndQcVyxfg/dBChsb9CWuOg94fDz/c2htxOuuqvRQY5exon91zz91Ol+Htzfvv r6ampua8luBdu3Y9GzZsIjp6BGazmbCwMCIjI7nuuusICQlm/foNLFu2/KKex2AwGKiqqub3v3+x T+Xb29u6veblZWDZsuVOe4Icqao699XPREREzkW/BRAfHx88PT05dsz5EJjOzk5qa2sJDAx0aQCh eQsr905lXsp93HRwAR/0ugiXAaMXNNmcbEkYdANz06djOvgKz366+8un0tVkfrQAJs9j1rTZsKq3 EOJFUsoMEoveINdpm8jEValpDKtby5LT9tCwk52bxXenzeC75t3OV8EC8Ijh9vGpcPAVMi/w9Bsb BgweMFCt/4aczdjvvQPLsPUcOtRL2PKIJnTSdNx3ZFDVj/uTuPv7QV1uL+HDD9/wXvYg8Z7CqDm3 cfy1hynrsX4NtLaBv48fcObPXjhD7n2DkJx7ydtx4Yam3XPP3Ywff24rWu3bV8imTR8B57//R3t7 O4WFRRQWnj5zKyYmmgce+AFBQUG8/PKr53eRC6i2tpaQkGCOHq2ksbFvc2ocnSMgwJ8DBw70c+1E RET6j3t/ncjNzQ23PrQg3N3d+1Suf9nJ3foGa5pi+M9ps5kUanBa0hAwhmlpv+HV6TMY5uh40HXM mTaDQSVv8OxHn58xkbmazA0LeLM6hpnTHuKqgB6q1FbGwdYreSR9BvEO52aYSBz/ODOHW/ngo3Xd 5q7Yjy7n1Tw716Y9zt1mk+NreMUxLX02N3l/zpuf9LwE73mrK6KsPYrxI8KcFjEEXcm01KsZ1vPQ 9HN35G8c2AXht/835gjnw4o8wqcwYuZCRl7uR0c/z0u2l+7HPmQioc6+Y36JDJnxCgnjInv+4fM0 4O4ZQ/jEifTwbcUneRbmsEqOHSx1dDHcfbzwT76LQO+zuYu+O5/wAfC7370AnJh8fq68vXu+ueLi /Tz//CImTBh/arndi1F+fgEdHR1MnDjxnM+Rm7ubCRPG9/qZiIiIDKR+6wFpbm7GbrcTFhbmtEvf zc3t1CZcLtdewNsrFmG/8SF+8B+LmXxgC58U5XOkuQk8TAwKiiVhxBiSzGao3sZbG5afMQndiNl8 HfdMvoP4pk0s2WtlUJCJpjprl1kYBsJCTVTtXk7mNfcxa9pDGNevIPNoeffGf3s5q9YuJXbyQ8y9 cww5eZ+S+eVO6INC4xmfcDVJxmrWrFnEshpHT/ObyN+6gAxm88i0DJIOb+GT4lwO1p/YCT0iMplJ o5IZVP8pS1a94WQTQgOmoCjMXgb8ggzgYWbY4DhOjzN2muoPc6i5lx6F9izey07j6Wvm8/TgtWw+ WExVuwE/3zDMYbEkRI4hPsyI9fByLtwMoEaOr3mCQn7NyJl/JbRgM1V7s2mqawTPYLzD4ggcNZ7g 4cHYC1aQt/TPHO82NcAP7/AYDF1/MjwtGDzBMywe/4auZW201RXT0tjlsznyNw4WvMDImS/g+9k/ qS6tpB0/DEGRBI66ipDYeAwNuVTusRFuCcZvWCKeLZU0VlZ2HybV1gCWn5D0SDo1e7Zy/FAJrS12 8PQ7cS+jv8Og4QaOr36KcmfbfABtPilcNvsNju9Zz7FDJbQ2NNKBAQ//SAJHTYQvlpzDZ917+MjJ ySUkJMThvJCcnFz+9a8TmwKez9Cr+Ph4Zs36IbNnP9pjucbGJjo7O/Hz8++2NG1XbW1teHv7nFtl zlNLSwvr1q1n+vTbyM7OdrhKVld+fn7d5rasXbueG29M4447ZvDWW2/3ek1fX19aW1vp6OhweLyt 7cQwLx8fnwGZRyMiIpemft0J3Ww2Y7FY2L17d7fldt3c3Bg5ciT+/v7s3LnT9XuBnGLAPPwGpiWM IyEsDJPRD9oaaaov51BZAduLN/FJWXX3qd2D72Pxv13PoK6vteXyx6WLvtpbI+AGnrnjLkZ2bby2 lbFyxVyWdR1GM/g+Xk038eZbL5LdbiI+YTq3jhrDsCATQR7Q2FxO0YFNrNz5Efl9GDZlDL2a28de Q5I5ikFGP2irw1pTTM7etbybV+B8uVmPVB6752G+1cvDUlvl35izYh29D5ozYB4+ndvHXklCqJkg Txu21iaq6g5TVLaD7L1ZZNdd0H6YU/UwDJuCOXUKQZZIvP39cW9rwFZ3Yunaqqx/cqzSyZCkYXO4 8t4p9HXBsLaiDLL/Z/0Zrwbjn3w/luRk/MNC8PS00dZQSVNpAbVfrKbqiwJIWsi3bv1yzkRbMQdf e5iKrt8Rj4nEPjyRY2++RGvsDMKTEgkcEonBxwt3bLTVVdJUmk3lZ3+jptJZwzCcQd9biH/WQ5S2 TcGcOpFASyS+/v64Ax0NlTRX5GPbsQI4u53QewsfW7duO9UAtlgspzYqbGpqOrXkbn9ISUlhzpz/ 4vXX/8hHH33ssIy7uzs//OEPiIsbxWOP/dRpYxvgySd/RkNDo9NN/vz8/Lj++u/w2WeZ1NY6DzKT Jl3PxInXntoJva+8vb15+ukn8ff3JyPj95SUOP6swsLCmDPnUYdL6I4bl8ojj/yYlStX8c477zm8 X3d3d66+egJ3330nr732RrfVtE4yGAy8/vqrLF36v06XBjabhzJuXCorVqwcwN/rIiJyMejrTuj9 GkA6OzuJjY1l8ODBlJeXd1uG19PTkz179rh8Pf6LzmkBZKArI990J/fs6WsAOZvw4czJdur5jsZM SUnhoYd+RGtrK2Vl5Wzfnk1ZWRktLS34+PgQGRnJtddeg8lk4re/XciBAwd7PF9MTDRPPfVzCgry +eSTLdTV1eHt7UNEhJn4+DjGjLmc8vJynn8+o1tPypAhQwgI8D9Vr7Fjr+CNN/7Y7RqVlUc5fvx4 t9dP8vMz8uMfP8zll49m69ZMcnJyOXbsGN7e3gwdOpQxYy4nMXEMP/vZkxw54nj1qnHjUvnRjx6g traWzZs/4cCBg7S1tWMyBTJy5Ei+/e0U/P0DWLVqFStWrOzxM0lLm8Jdd93Jpk0fs3v3Hhoa6gkI CCAqKorExMuJjY1l+/ZsXnzxJQUQEZFvuAEJICcFBwcTERGBn58f7u7utLa2UlNTw5EjR0516X+j KYDIReRsAsi5hI8zh1idz5CrM0VHRzNjxr/z0ksvM2nSdVx55ZVERJjx9fXFZrNRXl5OTs5uPvxw bY+N/q4GDx7E9Om3ERc3itDQUFpbW6msPEp+fj6ff76L/Pz8bu9xd3fn5ZcXExQU1Ov5P/98J88/ n9FruSuuSOI735lIbGwsJlMgLS0t1NTUkJdXwPbt2Q7r0ZXJFMgNN0zhiiuuYMiQcAwGA1arlcOH S8jJyWHr1m00NDT0eI6T4uPjuOWWqURFRWIymaivr6e09Ah5eXn83/9tp6ysf1YXFBGRr7cBDSDS CwUQuYj0NYD0R8+HiIiIXLr6GkD6bRUsEbm0dB1No/AhIiIi/aVfd0KXXniFERsUhiHMBB5GzOFx xLcB2LHWFVN2Se9ULl83J4dJTZ2arvAhIiIi/UYBxIVixz7Os2PNp/7+3Wnxp/5c9cVzPPJpwUBU S8Qpo9HI1Kk3Oz2u8CEiIiJnSwHEhYqy5vLdrIGuhUjfhYQ437hP4UNERETOheaAiIhDnZ1QWlrK vn2F3Y4pfIiIiMi5UgAREYdOzgFZsuR1tm7dBkBTUzPvv79G4UNERETOmZbhFfmGO9uNCEVEREQc 0TK8ItJvtMG1iIiI9BdNQhcRAIYMGTTQVRAREZGvsT72gGgOiIiIiIiIuM4lP/g4Z58AAAK6SURB VAckOjoagP379w9wTUREREREvvE0B0RERERERFxHAURERERERFzmkp+E3tjYONBVEBERERGRL13y AaSysnKgqyAiIiIiIl/SECwREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRARERER EXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZ BRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAR EREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRARERER EXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZ BRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAR EREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRARERER EXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZ BRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAR EREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRARERER EXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZBRAREREREXEZ BRAREREREXGZ/wfuKWUYcf9EKQAAAABJRU5ErkJggg== "
+       preserveAspectRatio="none"
+       height="251"
+       width="400" />
+  </g>
+</svg>
diff --git a/aio/content/images/marketing/home/loved-by-millions.svg b/aio/content/images/marketing/home/loved-by-millions.svg
new file mode 100644
index 000000000000..e3d5c67832d4
--- /dev/null
+++ b/aio/content/images/marketing/home/loved-by-millions.svg
@@ -0,0 +1,571 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="1185px" height="594px" viewBox="0 0 1185 594" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>Loved by Millions Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect x="0" y="0" width="1163" height="565" id="rect-1"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.25 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-7">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-9">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-10">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-11">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-12">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-13">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-14">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-15">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-16">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-17">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-18">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-19">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-20">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-21">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-22">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-23">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-24">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-25">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-26">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-27">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-28">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-29">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-30">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-31">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-32">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-33">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-34">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-35">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-36">
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="Loved-by-Millions" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Loved-by-Millions-Copy">
+            <g id="map" transform="translate(13.000000, 13.000000)">
+                <g>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#rect-1"></use>
+                    <image x="0" y="0" width="1163" height="565" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB1EAAAOPCAYAAACaaDh3AAAABGdBTUEAA1teXP8meAAAQABJREFUeAHsveGu5SiWbpu3boe6jyqPlPkj3v/NzgvsH53S6VZ3qqp0b43t/iJmEIDBxja2P6S9vZaNYTLAMJkTvP6f//N//s//94uDCZiACZhAlcD//t//+5d/+7d/q8bRxf/+7//+5f/+3/+rr6vHI9Nezfx/Inz58uWXf/mXf/n8xvH//X+Xz3/88e8/JEG8v/3tb9/Opd+/XQgf/tf/+l+//Prrr9/OfHx8fPv822+///Lly5IXJ//jP/7jl//6r//6vJ5e+3bTzT7QHv7+979/K9dW8b9+/br1Vt9nAiZgAsMJxP66JXHGC0IcQ1rucxwTeCKBVDcaUca//e3vv6R6Wy1dnsm//vXXH/SwWnyuRR1uLa6vm4AJmIAJmMCMBNbm1Yynf/75399EZy4fw1G6bM3+0TvGR3n92QRMwARMYD+B75br/Wk5BRMwARP4RgDDjJxycop9u3jDDzhFUZ6jM7BUDJytPU5U4uK0jM7EWtpc60m/lFY8z0SgZTKQxkm/xzT1mfqnLaSTD67HMjMxiHHiNaV1x6Oc7zDYU284Y5XWHTlYZhMwgWcRiP11a8l+++23f441fY6e1rQdzwTuQgAduUWf7C1PNPiu3YsMPI+9gftadL/edB3fBEzABEzABM4gwCKmWrhST/3P//yPTWNzrTy+ZgImYAImMIaAnahjODoVE3gtAYwprGInsPo9t3ruCU5Uykc5MBq3GJ3WjExcxyGmHZ89DkPdg0x3CTnnIRMYJikY/dI2sja5KZWb9HpYltI54jxO0D1hi8NiT36+1wRMwARGEpDjBQORgwk8nQB6Xou+OJJDqkvV0uZ5nFlnqsnuayZgAiZgAiawlYAW+ufuv9KBijy1sXlWG0eOo8+ZgAmYwBMJ2In6xFp1mUzgYAIYhlA+//Vf/+0Hh1XptShrDsWDxR2avIzAexMlnd5XqCnPpxigMfblDH60ly07NP74449Px/SMEwxee7m37cAKLqS1hY/aj48mYAImcBWBEX3hVbI7XxNoJXCmA1WL0Vpli/FYxPbly/efW4jX/NkETMAETMAEnkaA8bn0Zqfen2Q6ik3Pa/mPksHpmoAJmIAJ/EzgLz+f8hkTMAETKBPg9ztZWY8TZ0ZnVVnycVcwWK2F2gpH3bvFGYpyv9cZp/xnPLIDdevODbiUJkVXlpX2knMWb5FJv0HI0cEETMAEriJAv7ZlLBrVF15VbudrAi0EWnTAlnRa4/BcbXm2uKdFp41ynF22mLc/m4AJmIAJmMAeAqUxbBYH6p6y+V4TMAETMIFjCXgn6rF8nboJTEmAV+7+4x/L70/yitAWQyjO060OKpTVljymhLVRqJKCHpODCcarVmc0cXOvxY1p3vkzDtQ9OyxZWcoEaGs7HcmOujpiFamMpBzTneAj5XdaJmACJlAjgA7hYAImcD2BVh2yJCm6yh4dv5Suz5uACZiACZjAbARyc2g7UGerJctjAiZgAnMSsBN1znqxVCZwGAEcTRhcotGlpDjuNaqQLk5aOX4OK9TJCWM8jvxy2bf+bim7UVt2XmoHYi6vJ5yjXe5xoJ7FAOeofsMVmUvO8jN+vzS2nR5n/FmsnI8JmMBzCTC+x6D+8GnjfSyjP5vAjAQY//cGFuiht67ptuQjXc3P+l7qvt8ETMAETOAKAkcsdL6iHM7TBEzABEzgXAJ2op7L27mZwOUEck4fdu5hEI27Rdmt2mJMSQskJ1PrDtf0/lm+1wzCsFrb7djKDuY4SGWUgh9OWhmzyCutm1kYtchR4xjvTznEay2fYUgaLQ7plvRKcXBc6jnhqM+l+EeeJ2/KLYft0WU/sixO2wRM4F4EYt9HPx/7HztX7lWXlnY8AY3L41P+MUX0w1FvKGlZIKjc0VnvruerLD6agAmYgAmYgAmYgAmYgAmYwBoBO1HXCPm6CbyEAE5BGUUxiLY6ASOekcacmO5Zn9l5K+dlzDM1CMPpjz/++HSk5pypcnzGNGqfSV+vZo1Outo9s1+jDcFGfOQkru2ojRx6y8e9vA746ICjgLrXs3J0fmvpp20zjY9Tnjb117++9zeMUyb+bgImsI8AY1wM9C8Kdq6IhI9vJoCOwPi7pkujE0n/g5cW0uGgjOdLLNGxRjlRpa+V8krP89x7N09Kxd9NwARMwARMwARMwARMwASeSMBO1CfWqstkAhUCOF3YjZoaS/iOYRTDT263aiXJx1zKOVDl/EudVYuB7G+fzDAk8YpXQhqvFQ6OLrjP4pxrlTsXr/Ya6BJPpQOHuKNJ52tHjI4EDI5nhFnrKTXYalHD1kURZ7B0HiZgAvcjEHfZsXgldRTNttjkfoQt8RMIrO3s1IIs9EbGaYJ0QPSo9LkqMeFe3VeKs3Z+yyI05Pv69eu3pFWebyf8wQRMwARMwARMwARMwARMwAQeQsBO1IdUpIthAj0Ecr99JAdqTzppXByxGFe3OhLT9M7+XjJ41Rx/GK5GrMQnnZIRDAMZjlrtUuU7jrwZX6WGIS510Kf1uMaTtriWRkwTBzZMWg2O8d4tn3HWztjGteOUdhyf5x6WW3j4HhMwgXcRUP9Hv6v+PCWAI7X25oE0vr+bwNMI5HQZFjvpd9VjeaP+V1uIFu8Z+XnvIjTKFcswUjanZQImYAImYAImYAImYAImYAJXE7AT9eoacP4mcBEBHH/63dPU0Bl3mfSKh0E1GlU/Pj56k2iOjwF3pNEmZ/CSMCqTjMc6f/QxGtNklJYsMW9kJ7CbljDCsfuZ0EH/VIa9PDHckQaczgo4a0e3vRGy8yyk9Y6cdqKOoOs0TMAEIECfq7D21gr6ef4Yn+68wErl9dEEeggwJqNfK9QWvkVdT/Fbj3vfjoGesHcRGou3HEzABEzABEzABEzABEzABEzgqQTsRH1qzbpcJtBAAIdLzhk00jHZIMbmKHIOjZJ3cUL98cPrZDEYYxzC+LXHubylkDmjmpyPaXpiofPcO+p3spTm6KPKEh2pvU4/vUZZzuPRMpbS22u0LKU7+nz8rcLRaTs9EzCB9xFQn9tTco1P9Juzj0s95XJcE1gjEPWbNC76DmP0XgfmXt10bTFEKnfuO884iyVG6eO5PHzOBEzABEzABEzABEzABEzABK4iYCfqVeSdrwlMQuDuBo/Rv70GD3YO1HYMnFV1exyDVxm0eo15OFKjkRH+tR3BKXvuHbGLIk137fusr/RN5dZCCRlJxTrnoE/vTb+zoCA6UEhTzpE0rr+bgAk8k0BrH5/rx68al55ZEy7V3Qkwhu51oMLg7nr83evR8puACZiACZhASkBvfIvn/dvhkYY/m4AJmMD9CNiJer86s8QmcAoBHCZ7jTvxtX9HCC1jrl5zKwfR3rxGpbNXjr382eGQvt51TSY517a+flFOaO0yXcuP6+lu6JzxvZbOFY486obff52lrdT4UCcysiJzrm5gzh/PUi7wLJfa0hX8czL6nAmYwPEE6CPoD3hDQ2mhj34iINen0F+oPzpeWudgAs8nMIMuwjPv5/r5bc0lNAETMAETKBNgPMY+ha6bs+Nssc2Uc/MVEzABEzCBswn85ewMnZ8JmMA9CMQdZ7NKLCcq8uEYQnF9SsCxuDf0/kYV/OQQ4whTVlH2BhyLPQ507ZJUPhjiML6vBVZzwkkyr8UffZ3dqHcKOMhzDlTKUGNYc6Dyas6eur4TL8tqAiaQJ4BhiD4jZyCiX9biEvpyvsdQcrzGOP5sAm8ggA47YvzU87aVWaqDpemsyahFE+l9/m4CJmACJmACbyGAzWSxnfxWnFejN4+w8byFqctpAiZgArMRsBN1thqxPCawg8BIpWyvUYZi9DrxeouernpHcR3JoFeekfHXjFotebU4ItfSQdnH+dYbepzwubKuyY7RjlDaOdkr75b4//mfiwxb7j37Hu0wruWLUyTlXnOgKq2eutY9PpqACTyTwOJc/b4ISI5U+hL6l9KO9mfScKlMYCHAGJzTT4/Wk2v8kefr169FYy/P68fHxy81XccO1BphXzMBEzABE3gDgdyre0vlxnZR0glK9/i8CZiACZjAHAT8Ot856sFSmMAuAhhC5EwaadDAgFLbobYmdOqQWYu/5TqG2bgb5imvScGJzU7HWLYePrBPncw998e4tAF2TIxwrMd09Tm3M4k85SiNO45VptjmlU7pSDqlHZile9bOk6ZkWYs7w3V2jOp5rj3TxKE+MOy21jntYjTfGZhZBhMwgX4C9C/0IdFZujhS/70/Md9hAg8goEVMei56jK2l4o/Qa3IL2MgPvRrHqXQcjtIfUnmifpZe83cTMAETMAETeDqBLWM6ujJ/jLcsRj7KxvJ09i6fCZiACZxNwE7Us4k7PxMYTABnUnSK4MzAqCHjx57sthpHUgPMHhnW7kXx/PLl12/RtjodvyUw0QeM0DK+9YqFwWtk6G1XPW2HOqMdq83ymftLE4oeByoMSGuEwVE8ad8l2RRnxiN8ozFU/QbliQ6P+Lm1HKTxpGevtdyOZwIm8DOB2s61n2P7jAk8l0D8mQTGyC3G1pSOdJCRegg6Y03vyul0vKpbelsqo7+bgAmYgAmYwNMJLDtKt5vUFxvIYscaOaY/nbvLZwImYAJXEdje418lsfM1ARP4RqDkTBq1G1PKXOsuMww7Z6+myxl2okPuG6ybfmAHIX+1QHnZUSAWW41apV0JypvrW9NWGqVjmrbaXi4+7bsnkDbp7dnZG/Ob3UGA0Zay8izSJtI64zt/tCvi1ljHcpc+751AltL1eRMwgfsRQA9I+5z7lcISm8AYAtLLlNqIxUajdBBka3WE5vRDP+eqVR9NwARMwATeRmDrQvccJ+bte+fjuXR9zgRMwARMYCwB/ybqWJ5OzQROJYABAwNIGrTaPT2/5TsKHbv41gKGUww7MyiA2mG3JvNTrtMO4M5xj1Er91rdsxjhqGcyQkjLgKNPf1zvNSDK+McOS9rpntBqcNyTx4h76QNgymu+2fkCv1zY+7yS7tuetxxHnzMBE1gIjHASmaUJPIVAqs/sLdfInxLo0RlT/TA399hbNt9vAiZgAiZgAncgMNKBSnnRnVkU72ACJmACJjA3Ae9Enbt+LN2LCcTdhXICpbvKtOPy4+Pjp1eEyZG65dWcKXYcLeSt313lul79lcqU3nv098UI9OOrRHHqIN9o49XRZbk6/fTVyKk81HVrEHuclvy+Jga4NeM69Ua8dDdz3EHKs0Dd8rfFecfzgOMvplkrE/IjD/Eph8pVu+fqa9QThta9z6b6IJir/mZ57q9m7PxNwATKBFi4UdoJX77LV0zgmQS26is5GpoP5K6dde4ui8nO4uF8TMAETMAE3kNgtAP1PeRcUhMwARO4PwE7Ue9fhy7BwwjguOB1pSWHk5w6OEgwphCXnXm5+CMdqTiPcNbOGCh/dPAiI99t6OmrLZzltKktzslcTrG94LiMv12bi8852izxcFpSr7Q7nJdq38jWKp+cranjk3LyV3Om5u7lnjsEypuWuUVueESHae6eyD7Wby6uz5mACbyTgPpxSo/OMmIx1ztJutRPINCzAG2tvCPTWssrXpcONnInbEzfn03ABEzABExgdgLY6eJceJS8tlmNIul0TMAETOBYAnaiHsvXqZtAFwGcGGu/PxqNk0o8dSDq/FuOOIxyK/3hYkdPXyvQ76/mJghbHHN9uX+PTTun/jDAbwncp7LE+3nGtENTzlStKNUChZyzNHcupnvnzyp/bxmYSDqYgAmYQI3A0pf//oMjlT6HfvjJ/WqNia+9iwDtfE23byVyhROVsT63sKxVZsczARMwARMwgScQYPPC6ODFSaOJOj0TMAETOI6AnajHsXXKJtBNYPRrujB65BxJ3YLd4IacE/UGYk8lIoYyHKVqM9GRutWZubeA2v3Qm86y2GApj+6NzkI5TDFIUl6VWXHfdOTZIcT6bin/2xdvtDByHBMwgeUNA/S/6mfV16Dz6Jw5mcCTCaBzbNVnIheemTMXtJE3+Z2dZyyzP5uACZiACRxPIC7mf5MNqZUseuyIcTzmB2cvKIxE/NkETMAE5iZgJ+rc9WPpXkZAhsURxWZV25uUMgw8lHnUav8RdXDHNPgtO16ji2Fbjml+D/OOr2Nktajkplxx4rM4WZfVpBg3KTMBA6UWM9zduI9TXGWptUUcyZosM4Fu/b3YWpq+ZgImYAKRgPQb+hoFzvHdDhoR8fGpBNZ+c7613G/S61uZOJ4JmIAJmMA+AswZow2Fub/DdwLwkR77/ey+T9gf7m5r2EfAd5uACZjA/Qh4dLxfnVnihxJgdduIgEImx9GI9O6UBsYlnEajldw7MdgjqwzZMOSz/vakqXuvqJvFUVr/jWHJR5tJ281dnccqU+23lRUnPdJ/EDhGp3Maz99NwARMoJdArp/tTcPxTeCOBNCB9CreLWPzHctsmU3ABEzABO5B4IjX1B5Rcr0164i0a2mO5MPiQfQBL4qqEfc1EzABE5iTgJ2oc9aLpXoZAXZ/pQ6crQhY7f7moBV9OMD+8Y9tv6f5Zn7syJQzdSsH2jOBHY0KVznkWl45uzhbfx4O5YTdy0MMzjxSB1uYb7nnzHI5LxMwgWcR0KKdZ5XKpTGBnwlIl2ChY/x5gZ9j+owJmIAJmIAJnEMgvqaWRbTYkmZ08DG3Zbfsx8fHOWD+Jxcct3vnx+KK81S6wKmFcGYmYAImYAJDCPxsNR6SrBMxARNoJZC+PqX1vlI8HFczKr4leY84L0fqEWk/Pc29iv2TDINMePbyuKq9RAf2VTI4XxMwARNYI2CdZY2Qrz+RgPTUngWU/GSFgwmYgAmYgAmMJLA49uZ1nlLWK+0LI3ahjlikPrLOnZYJmIAJmMA2AnaibuPmu0xgGIGWnXI9me1dKdeTl+MeTwAnOzt1ZneMI+fTXlF3113dI1bMHt+ynYMJmIAJmIAJvJdA6kjVK/7i79KJDg7U2fVAyeqjCZiACZjAfQgwtsw6vqT2BRY4nxlGzalr9j7GfukD7Lb1btUza9h5mYAJmEAfATtR+3g5tgkMJcCquiPCb7/9/trfRT2C5xVpokSzQ0dOcYxqUcm+QqZSnkwwapOD0n0zn2eSNuuEco1bz86WtbR83QRMwASOJKAx7sg8nLYJzEpAhlPk02cWzqXjuHdsz1qDlssETMAETOAIAtG+wLz8it2cI3ahrrHBvpPutKW8/CyVfzt1jZ6vm4AJmMC5BOxEPZe3czOBbwRQDFMjybeLOz9glEQZk0FmZ3K+/SQCahOldsF5/mZypur3SU5CdFo2a7tQqatZX/XL7wE7mIAJmMBdCMzcn96FoeW8L4Goq/Ms6NWKcYEBn/2c3LeOLbkJ3JFA6tihDH/88ce08587MrbMZQIsKLqyvTHmxnG4LOn2KzhLcwvRlzF/mc+ziIrfUncwARMwARO4noAtrdfXgSV4KYGjVrahbJJ2NMq8FPHtip1TonOFmMWZmptc5+S94zkmbjiICfG1Okyo9OzOOqFhpS4y5iZ+vBIw96rAO9aRZTYBE5iLwMfHx6ejh/6TPxZ05PqhVGrizrooJZXV303gKAJP1qmOYuZ0TcAEjiHAW61y4zdz1SsdW8eU1qnOSODqN0Jpvn8km9wzluZHHG+OSKn4uwmYgAlcQ8BO1Gu4O9eXE8A506I0bcGEMbLXuYM8VyuqW8r69nvkTNVvZeHgo/6j0+8oRqXJ9VH5nZ0ubBXY+YuBPzVwzvrcICt9QCov7cTBBEzABI4kQP8THaKMS2sLhBizHEzgrQRanhHpIW9l5HKbgAmcQ0CLRWt2CsZ0zT3Pkcq5mMC5BHgOas/AudL88rko8ew8nZ8JmIAJmMDPBOxE/ZmJz5jA4QR4LcdRgV1mPU40OcOQ6YrfmjiKw5vSpc7j7kJeDdPrSO/hhXNupolFj+xb4rKbKnVIks7sv1HGbnQ5g2Xs4Hl3MAETMIG9BNiJQmDhDn1haUxYFnX8UXWkRqfrXrl8vwncjUBL+/fbZe5Wq5bXBO5HgMWhcT5ZK0GvvaGWlq+ZgAmYgAmYgAmYwB0I/OUOQlpGEzCBhQDOsZawtuuDNJaV799f1YMBlPs4f3RgksYfjimH8QSoy1H1SDqqL0n6tt/chKeckWJwlyOODjlQkbnk6LhLeSynCZjANQToS+Q4RQL6RJw/vMWCRTu8yrcUiEc/tOym+/s/71v+iM85BxN4OwGej1oYpdPV8vA1EzCB9xJgTt7qQBWlM153qrx8NIEzCbQsbjpTnj//tK58Jm/nZQImYAIlAt6JWiLj8yZwAAGMIKXfKqxlh8HxH//4+7BXeeRWmmLIPGOlOwziJI1ds36VcK32t10b8RtzaTvRDmc74pY6ucOEhkmgJoLUp4MJmIAJ9BKIrxJFH9HCkh6dweN8L3XHfxMBng90rC1zhDdxcllNwATGE8i9baclF88HWyg5zl0JoPvOsIgaOaxD37UVWe43E8DuTR8S59Fv5vGUstuJ+pSadDmmJqAOdKsiplezMskZMWGRsQZHG+EsxQwO6S5ZHKpn5T+ikeh1qDi1ewzII/LuSWPEq2Yx6MWg9hLP8Vk7pEe0zTTtnu9ny3GndgtHPfc20va0Ksc1gXcToF+NYx2v/dc4zsKMu/WD765Nl35mAix4yv2eOTKPWBg3c9ktmwmYwDUE9LM+W3Nnbq/FmlvT8H0mMCOBGZyoqQ4eOa3p4Dybst1w5E1iOVtNfGNVTN+fTcAEthGItn+eYY+R2zjOepedqLPWjOV6DIGc47CncPH1ealTqyedNC6d+dkdesmJfJcJWHRiz74LESV5L9e0fUgRT9sSLLiWU8zTuEd+J38mPGfIQT53DNQpRtp0l3EsC8pedJTEa/5sAibwLgIsGIph0R2W3agjFuvEtP3ZBEzgl89FC6m+PFL/N2MTMAETgADzxL1zJvqqdL5ouibwBAIztGvm47nAs8tGBP6Yt8sWU3KU5tLQOdLAjhMXTOqajyZgAn0E0jc7lJ7hvlQdeyYCdqLOVBuW5ZEE9v5eSJyclJxYdwGX+y1NnMRHKqkMZOSLcrlnxwzKqoxaR63YI10U2VGB9lJiS3nUnjCEM4nOlQvFXBPsXP0hK+nMYuBbnpfvMo9imaZzVyeqysGzsPY8xLrXfT6agAm8iwB9ampY0SILxgbGktI48y5SLq0JjCOQ7oDxMzaOrVMyARNYCGheu4fH3edDe8rue59NAP326tAy9i+6+D77EX0Bdh70+5Y8r+bi/E1gVgLMmXmWeC6xpfl5mrWmtstlJ+p2dr7TBJoIyAHVFDkTKRowS06s9DacYbMFFNGUBXIeObDElUBfvvz66ejbmh/OcAbCVLmkXJqEpobm3jrAqYUzctTrVrVLCBlxdPKnQT0nGw5c8o+McD7DTiHXBjk30yQ6bWeSfeQxMhqZ7kxpncFxpvJaFhMwgTwBxpDY5/FZiywY/+K1fAo+awIm0ENA+iTP14w6fU9ZHNcETGBOArk5Xa+kHv97iTm+CbQRONu2wryfn+sgXy2OX1tw3VYSxzKBdxHQT3Oc/Qy/i/J1pbUT9Tr2zvkFBDA8jgw1p4YUntQJNjL/rWnBIbcjN+e025pHeh95yrmpayiGud2Wul468urT1HnKOe3g1H3UgSaTus6rEKmT1nrh/rXXrSq/tSPt5evXr2vRfrgOo7g7WEr0D5GSLzhaVe7k0tCv1F26UxfmaT2TqQz8IwRI0+L700L6jFKnDiZgAiYAATlKGddYjIODhzExN663ECMdgo0zLbQc560EeM6iXvlWDi63CZjAMQSYo9ZsC2u50j85mMBTCaDvXhlqz9eRskW7Sqv96kpOztsEZiSgxZAzymaZ9hH4y77bfbcJmMARBHDSyFETV6DrXMyT6x8fH59GTQySZzizYv4tn1H09kzSWvJI48Ahp3zi+OwNkSvOJhyTOPPSMkWDMvdwHUWUuDgnl99UbXOsc3/8PdxemffEj+WI6VAeHLyxTXIdWQm59vl5IfMvTSONkpadtMknrdP0e0xnLY8Yt/YZh2JMC+fBkwJtmvZJ/eovdVY/qbwuiwmYQB8BxrHffvv9cyyTcUULfnoniThQ3b/08Xfs9xKYUad/b2245CbwDAKMw/zV5lAtJd17f0sejmMCVxC4WlfF7lEa/5m3n6VHl2xCV9SJ8zQBEzCBGQhcu7xmBgKWwQQOIoCCI2NjbxY4bRYn3I+v0MPBkQY5sNLzpe/IhVOz975SemvnlV8pHrKUlMTSPa3nMe6mdQBDnJlM/HrzpSw4m0qBtFG6xRYFONYZsvAXd3qW0uJ8r3y1tNauIRN1wR8ywgh+yICTPtYj5eMvvi6Z9Gm38dW/nEsZcI5APrXAdWQSb+2MpN5inSJfek7pIqPKwzni1V5nrPvSo1ZhMmHBmXpmvaSyjP6+1qZH5+f0TMAE7kkgjmX0G1v7wZa3G9yTkKU2ARMwARMwgXkJpPO2vZJu1QP25uv7TeAoAui3OA7RebEbELbYDkbIJ11bzy02FXaPRzvIiHxqaUTdvxbP10zABEzgLQTqVuy3UHA5TWAgAZxo0XGzJWn9lmXL5EQKVi0fZEpfPcv39BW1tTS2XEM2OcG23D/inpyDDeWTv1ZnpuRoqQ8cbTjvYF56TRLKOTs6Zwq0WeQm4Dyl7mLbouxp+YmnCQb3pcZxrhFHyj9xWgMcqR+clmLKvcigc0wmCGm+nIM9gfy5rrJxrrddqty97YW8Zg60Udg6mIAJmEAPAcZP9Ys99xF36329+Ti+CZiACZiACZjAMu+RY2gUjzj/G5Wm0zGBowgw98fWUQs5+x3tHL2Vt7Gc6VAkL+0CVb4c9blWDl8zARMwARM4jkB9JDkuX6dsAo8iIMfpqJVqKEgoayMcbSUH1pLHtt8Ibam8VmVTDuOWNLfEyTnYlE7NEIyyTZDCLSecHHhKI3fMOa1jPNgTR2nGa+lnlPdR7SpNO37HmcYf+WnCEK+XPkeDOJ8jH9Ih4MgkwJuA87NWL5+R/vkPBzy7YNO4cFO9EFccaUsE+MZ7dP3z4j//IWdph6zi6Eh5FGJZde6uR9q3Hah3rT3LbQLXEqAvV7++RRItgNlyr+8xARMwARMwARNoI3DUgknN8dqkcCwTuJ5A77wXXZc/2jobD0YvRFgjgj3DwQRMwARMYC4C7pnnqg9Lc1MC6S7PEcXIKU45xw/OpJJzp8WRiUKZOplGyN+aBuXkN0bP3uUHy5IRODfhxCkHZ1itKeFr12HTylwy4vRCkT/aoaoJA3x4ha7K3VqflIt7SCe2S8rBedjoddWkSfutlam0mEBcJBf5tjLVPbUj5R+xiKGWx5XXqJvo8L5SFvLO9W1Xy+T8TcAE8gR4XvcEvZ59Txq+1wRMwARMwARMoEygxQ5Qvrt85ew5e1kSXzGBNgLMe7fONWUbwZl69ut020p3bCxsUNGmc2xuTt0ETMAE5iZgJ+rc9WPpbkAAxSLn8OwRHWcGziSUtBjS3YoYHv/xj+9OJ5RBHFOlUHqdbCn+yPO9edecwSPlIi241Rxk2tFYypfJ49mvKV6U/799ikSbq+VP+eBP2+Bvy8pJ2rR+35RJA+m0OimjrJGhHKxSxGN6Occ19yIHu6lTp2lMd8vn2jNLeUfnt0XGo++Bf67fOSpfnhvySxcZ0P8hS2nX/FHyOF0TMIFrCDCepPrONZI4VxMwARMwARN4FgHmiVvmfi0UmCNpHtcS33FM4AgCtHFCT1vEjibbxhaZ3qq3nmmj21IvvscETMAEziRgJ+qZtJ3XIwmMUKhQTpiUpGlFJxPw4vfUwZqDi6HyqkB5ajsMU7mOeq0vzCI38kXxhh98WpVv6kZxOV65iy9tJ5QJ3pQnV6ZehzbpxaD8cH6Rzx4HoxjG9PlMHSE7zwKBzwqle3S990jdl4IceqXrTztPXfY8p7ny5/quNB6OfeqRv9SJqucTWUirtkAgTdffTcAEzifAmBJD7FNzY1CMy2f6Af3WU3rN303ABEzABEzABNoJxDH4iLdjSRJ0+T1zQKXjowm0EpCzVPYBzRn5zl+PjYB7j3w+Wst0t3jRJnM32S2vCZiACYwmYCfqaKJO73UE5GDaU3CcGGnAmVALUiJb4qBk1uREQZUSykSM+JKptmOzljfpcS/ppU6T3H2pUTYXZ8Q5yhqdNEwI+Z0LlZ88crsU4UedKB7817jW5IVLSx2maWi3HrKg1LYYrIlbq/80j9p30jlqAg1b8a3JsPda2h5pA4S0HezN5y73U+74TPTILYMKbYJni2ci5Ut68fWd3KNnDKd1DNzPdeKrbR/1OrKYrz+bgAn0EeB5ZzwojS08x4zrR40XfdI6tgmYgAmYgAnMTUBzvFTK0utzGYeP2nGaysCYvtUmkKbl7ybQQiA3/8MJSjuUDaZFx9T8FLvLnjlvi8xPi8Nzf4Zt5mncXB4TMIHnEvjZc/PcsrpkJjCcQFz5uZb4miMLBSXG4fPWgLJIQMEk4IxgAoaxs7TrrDQR2/sqVRRW/nKK8Kdw//MPGY8OOYcuzhwcSPCWIi7HjhR0yUW8OJElfomn7ikdcTTJSVSKk56njqKc6fXS99HKL3KMTrMk+9Hnt/A8Wqaz06cuW3dWqx+R44TJqALpqM/RubVjupBA/UW8j8lyybAU4/mzCZjAOQRqzlNJwNjKn8ZVndfxrIVTys9HEzABEzABE5iZgBYwpzIy/9SbcpiDoWunc9T0npHfPVcaSdNptRCgnWvBbYy/2G1+/7yGg2/NJhFtP9heaMv8aR4b0/bnnwlYV/+Zic+YgAm8m4CdqO+uf5d+JwFWw7UElLWak1BKIsZGKXZbnFQokrUdZaS97Aj7tx8U09o9crzuXX3K/SVHqiaGLSy3xllzwsT6kWMHedPAit/Iolau9N70OxPgnnruiZvmpXaVnk+/Uxew0ARdE3raqNrxHjnS/K74jiOQ8vU6sa+Q9aw8afMtrzii7lX/tAd9lpwtfaL6oLg7VfeXjvSN/Ml41CJrKS2fNwETuJ4A/e+a8et6KS2BCZiACZiACZxDAIeFbAJpjjiArtB90fVLi6FSGf3dBEYRYH7JfD21UeE4bX1zVM7uhF0LW0erXWRUee6aDrzQ12Ub0zxc3+9aLst9HQHZV6M99TppnLMJ9BOwE7Wfme8wgW8EUOJwxqxNalDU1oKMidFJsXZPen3tN8a2rrpjQif50jx7vpcmhyhnR4acEp3ml1MGcxNZzsXduXzOxUvTz30/utwxz9a8mKQzacnxiOnd+fOeZ+zO5V6THWV2bbGBXkOdM6jQR+hZSI0uXFOgbW1tX6o77l+TVfn5aAImMB8BxqTehUTzlcISmYAJmIAJmMAYAujWtbm6dOwxua2ncsYi53UpHOOJBGpvc9OC3Njee9si6cf7I0PtSI3n/LlMAF6yI+HUbrFrllPzlTcTiHZTPufsSW/m47Lfg4CdqPeoJ0s5KQEZ9KXs5cSMvyWwvHZk32MnZwR5x1BTFmO8rZ9HGDtLq/7SsmyVMXdfTUlXfBTznJO4VF/pqjyl03s8stypLFJ+0/O57yjIvZOVXDp3P0fb2ersu2vZUWb5o+w886kxh4kUoZfLEW0dOelTzvo9qLvWqeU2gRkJ0CfQxziYgAmYgAmYgAn88jkXnYEDujV/R+juM5TPMlxLgDmm5pOtkhC/Z+5Zs82RZzq/bZXjrfHijmC9peytLFzubQR47uNzt9WeSjo837zRrKdP2Ca17zKBnwnYevEzE58xgW4CWummSUc06sffEijtxCTDFiellE52CqaBQaRXIU3TqH1X2nsGq5LB9OvXrz9kXXLgUX6CHIItkzvklczcjwz6HVPqi0DZcJj2vFaCe5CDNKJC8Jlgwz/yOzPAquQUzskxor5z6d7lHE51FDS1nbvIPUpOlVsOVdLVhFRtP33++E7fRP/HfWeEJc/1HbRnyOI8TMAEvhNoGVM1ln+/y59MwARMwARM4H0ENMe/quSM2dgp7Dy9qgaemy87ztD3+MMOIxtDT4l77CYtbyDrydtxTcAEthPAphZt4zGlkk0pxuEzaWBvjTbXL18WW2xqj0rv9XcTGE3ATtTRRJ3e6wgsOxh//H0GnHGaDMlRB5iawVBOixJApYcSWRostjr0Snmm5xnoUH63OkhKTtQ0n5zzCs6p0t1ipI1pi3FuII7Obt3DCqd//OO701XndWRV3sfHR5dzUvfm8tO1o46UB4WjFjSJ1mSnFvfJ11D2rqijGZnqudGxJqOcmrU4R1yjT6LNpn3EEXk5TRMwgToBdJGtekI9ZV81ARMwARMwgecQYH7PvFcLsq8oWWnx8hWyOM/nERgxP+MntAiL3e3729j4jn0p2thanyV01RGyPa/GXCITGEOg5aeXsKeyCL9k30aSuBM6Soa9rmcTTLzXn01gKwE7UbeS830mEAjkOm8cDihmcUCICl64/XPVZ/weP6McxoGj5NiRYzDee8RnVgCxkzNX5lJ+yFZagZS7R4pyvJZzwKIk975PX8o2ijN/tSCnkX4APReXya9+G7fHgVNqC7k8aufIX3LW4nGNeDUZe53Sa/nd9TpMaVs4nR3uQ4D2zZ9XIN+nzizpMwjExTet4xElj/rRM0i4FCZgAiZgAiZQJ8A8g3lt3FVTv+OYqywEdjCBowms2R/W8sfJj74oh4zaLc9Rza6xlu6aHWjt/rdeb3VSv5WPy/3Lt81ErSywdW+xQ26xBbfK5HgmUCJgJ2qJjM+bQCOBmhEwvcZ3BohU+SgpcTnlsBS3ZSJG3oQ0/8aifovG/Tgj0/J9ixA+9Do0kJF0KTshdUSHpD8/Um7itBpulzr4voJRCnlp4KacNV5S3sU2le/I78iOQ7u17MiCnKXy4KDXxF6/d0HcN61Qpr5Vp6Mc3Ue2Aaf9M4H4JoCfr/qMCZjAaAKLTrBMKeg/0VO8E3U0ZadnAiZgAiZwVwJxflWah51VNsbokj3hLBmcz7sIsNMsbgpoLb3aafrTT7LftKaTixftTbnrPlcmQH1Y1y/zefsV/QTUCA7Y5mpBNnDPO2uUfG0kATtRR9J0WibQQEA7STnipCk5CaMzR8nKwajv8cjAkQ4epJHu4BwxqGlFYMy/9Jldmq27UOXIjI5XnSulz3mMtiWOtfvgo4E3ndBqwE75ldJL7y/FG3U+yt6TZu2VvjhOxSOmGfmSb4vzPN5/t8+asD29nHerlx55WVhAn9Da9/Sk7bgmYAJ1Aowj/NnAUufkqyZgAiZgAs8nEOe1V5a2ZU59pXzO+7kEmFPjSCX0zM1ytokRz5Pm+iPsYs+ttXrJ0PNT22P9Dl99CwHs3L22UdnItzCS/TJtjyxe2mIj3iKD73kPATtR31PXLukkBNLOvSSWBoN4Pfea23hdn7WLUzvqdH7EUUonebTsgFyU5n//9gqWmgw4+Eg3N+gyAI4OcUUkE0sFZBC7xWHcrwgoraOOcEU25OxxbNY45rhLflhpFena7xboniOOtXYHByZmhLVFCiXZ4Mqfw/0J9PQ99y+tS2AC8xFAj+HvyjFjPiqWyARMwARM4A0E4nzyyvIyx2WO3TJvv1JO5/1MAjwHLErHIVqzNeRKn4ufO5e7t3YOexZ2gxFp1fK58zV095rDO9rO7lxOyz6eAM9XzpZdy0lzRu7lr9cex/30MfqZtfhb46TXaoOvyehrJgABO1HdDkxgQgIodbmBJzeYEDc6A48uTpQLB16rcZSBCweenJM5OeNgp+tSblt3hOq+tSOvgSGgADLYim36epiavGt5lK6T54iJrHbblfLJnaecWxQb0lI7Q6Hu+U3cnBxbzmnlKXUSXzEs56naCmnHz3yHOY7VLUoZ9zvcl0Bt4cB9S2XJTeA+BBi/NcbeR2pLagImYAImYALbCKTzyW2p7L8rzpf2p+YUTKCNgGxZ0W7Uduc5sZBrVtnOIbCeC/ae2hvl9uwcXM/dMe5MYI/dVs/mlrEL+5/slZEfaeJgvcJ+GeXw52cQsBP1GfXoUjyIQGnVKs6fXLhaAewxjspxmHOWUrbU8aXywmTtdSu9Blp4pg41OemU71HH1h3FLfn3lps09zqVSvXUIu/WOBgjYr44UtUm4vlS+sThr/Qcle7z+fsT0GID+ir+tqyEvj8Fl8AETMAETMAETMAETOBoAsxbr56f5+a5R5fb6b+TAA7T1GlyxCL0kXSvfj5HluWotLCbwAnHU25RyF570lFyO93jCPCs12yPuY0NW6WhD6GNpX1LLT02TZTsgpzH1mtHao2gr7UQsBO1hZLjmMCJBEpKZ8n506oE1gaVPcXrGdjIB4cGfzllrCZHaUDUPUxY5aTVudoxVQC4fy2PWno911ghRX1cNYjDqeTIbi3HmhLVmk5LvJIxore+YJ7We0v+jnN/AtR7rPuzFkzcn5xLYAImYAImYAImYAImsEaAuRHz8ta5+Vp6rdeZ3/C6XgJG56jvtqbheCawlQC2oJL9amuavm8OAvRl9Cl6FWrs2+xEnaOOzpKC8Q0b5sfHRzFL+oJe+1wxsX9eIL+SDVz3pTtWJaeuxyOyYQOKbyGM1/3ZBFoI2InaQslxTOAkAjiLcoHBIzchKsVXGtyHgoPTjAFjpoBsURGryaYdh7U4exW5ljyUP5PV9Dc3tziF77gaSmUXC45HlgNFaOTErPTM9DjgY9n9+Z4EeH5HKvn3pGCpTaCdAGO2xu3WsVupM766jxUNH03ABEzABJ5GgPlK7fcDjyov87KrFuUeVSanOy+B3Dy6x4Yyb8ksWYkAdhh0eByp/KmvK8X3+WcToP5zdumjSt0751yTbXGkLs5ZLQ44Snan+0wCdqI+s15dqpsSKO3qxHCZCyWllfhxUEDhPcphwKsxt4S1AS6muSY7E8ie9GLaa59Jm5A6TeN9KBO9Azz358olxTS3QoprtBHVO/enq6+iXLXPubxr8blWmqiTFm0MBRsZFdSee43nKif3b+Gq/NMjcn758mt6+rNcvTL+lIhP3IrA1n7rVoW0sCYwkID6YukW+t6SxZbxpiVdxzEBEzABEzCBGQgwD2U3aG6ecZR86Xz/qHycrgkwz8f+YH3ufW0B+w+bBZg7x5+kOsr29j7C9yix7HrM/2aq+60baSgHbZpx23bAe7TBWaTc5v2YRXrLYQIPI4BxkglRXMn6xx9/FAeqtZWnOKNyP649EltUpuX8In0NaKVBNjrb9sqjVxjtSSeWA2URpyl1UZI/5rWFMc5PMVJasb5IMzpImbzkdmRyjnRa5FQ+pLU1aMdtOnFHjpx85IPSJcN7KV/KLmUm1kUp/sjz5Ef+PQxH5u+0TMAETOAOBOQ4pf9n4nl2X30HRpbRBEzABEzgfQSYR2iR6xmlT+dhZ+TpPN5HgHYd7VLvI+ASL3aSxW1AW8BGtmaDNLXnEmAuuGbXu7L02Cpbw9K2+22prek73jMJ2In6zHp1qW5MAEcOiglKK86nrY4d7t/i3NuCTqvTagZV7egkfZSvkTvBRqweklNzC2/KVit7yrTkGNcKrzR+yYGqeNRzKU3FicdSPjFO7nNUonsUKDlHcwq3nLK5/M48x6QgJ9+ZMjiv8whQ11+/fj0vQ+dkAg8hoP6c1eg9OgY6yZbx9SHYXAwTMAETMIEHEjjbyYTzlD+Ppw9sTJMVaZY5+mRYXi2O7F3W6d/XDLbaD88kRbtkntoTsOPWxlPssCNszT0yOe7cBOxEnbt+LN2LCdCZ1zp00NCpM6DJISnF5mxsLYNVlC1+PlvWUn5bB0cG657y1AbquII5OkXj+ZL8PY7Ulvoq5RPP9/wWKozS+DNNzpAPedjVu7UtRDb+bAImYAJPJUB/uSw8+aPLkfpUHi6XCZiACZjAewn0zAO3UmL+mPupl63p+b5zCdxpjol9ya/uPbd93Cm3xabz2y8fHx93Etuy7iQgezM2yllDz+JelSG+olrndNRGFuztM+++lbw+nkPgL+dk41xMwARGE1CnjkMMZWbPBG7mwXAvNyYtOO+OCDhQtwzW3FcKTJJRSuVA73HSYtReC7W81+5Nr9Pm4NsaiE+7JSDHKGdua/5r8ZDnDqvs1srh6yZgAiZwNAH6c8Yc3uLgYAImYAImYAJvJKD52lFlZ17IPJ03qByd11FleHu6mvO2LIq+khVyYjPh53n22JWuLIPzPocA/ZLD+wjETR6zlF7jYo9NUrKvlUd2wcXe/qP9lv4SuyZHh3cR8E7Ud9W3S/sQAnTWpd+f3FJEBh8ZQkemu0WW3nt4pVEpwEmOOj5rkC3F7zkvJ3bPPcStTUp4zXG6yknyt+QjJ2VtJ6WUgZb0WuL0yEd6tC/ka3H4tuQ/Oo5W2Y1O1+nNRUDO/LmksjQmcC8CjDl//vnL56sFe8eCe5XU0pqACZiACZhAngAOhdr8Ln/X+lnm5rU53XoKjjEDAS24po2MtkeMKt9Wu8ao/J2OCZjA3AT+/HP9NfKj7Yw9RLbY8NZsw3Fuu7yBafnJPT6nYz56QM6W21MGx70HATtR71FPltIEfiAgZfyHkzu/MEl72m8ERkedBr6dmL7dvlVJYEJcGrBTByqZ9SoEOCl5JW0pjxlWwc7czlCImEjaaPGtqT/yw9bn95EwXCgT2EGAMYe3JzBWpRPKUrIYEXkG43jEvTYYl4j5vAmYgAmYwNUEGLs0B8dgilGZOReG09bxr6cMnov00Jozbro7Ct2nNEe/qgR2oF5F/r750uc5vIvA2njE+BidjmfTYTz+8mX9rXxRrp5FLYzx9Oel+S7X+cvZc2Oe/nx/Anai3r8OXQIT2ERAOzjlpGMQuWNQOVLZKU+c0PJ5pHOMAbI0iKaybP2elqE1HRSY0gQtMmlN723xMOyvKYpvY/K08l6p5D+NpctjAkwqedUgYyyBPjQda6LhkM+5t15gjHYwARMwARMwgdkIpI4mxrheg21LmXDOMp46PIOA7CyzlgZbQ04fm1VeyzUHAevrc9TDTFJcZVuRfXdLm4xz0xzL9C0TLWWkTy3ZYXN5+Nz9CPg3Ue9XZ5bYBP7ZMe83NKLU4whk1Q6hNCi05MUulJIz88jqQrbSIBV3oUqGuOtF5/Ycl9+n6asLJioMrmuBOLkyrN3H9VJdysDdkobjmMCTCVzRXz2Zp8v2bgKMOYxZLD7h7z//c9vvpJbG83fTdelNwARMwASuJKDxjd9POzpsHT+PlsvpbyMgO4vu3mLo172jj7Rr7awenbbTezaBmdrxs0nfp3RXLRjRIhDmkL32Hbfj+7SvmSS1E3Wm2rAsJtBIgAlWbpBYnIptTr1lBe1i9CTb2sBHXiVnqs7n5GkszuZotVeJpLtgyIRzoxyJ7Lz57bffP9PsLUCLc3QxSvtlAb1sR8S3AWMExbnTuKK/mpuIpTOBfQTiuJZOZNET1iaq0iX2SeG7TcAETMAETGAsAS3w0XFs6ktqGgOPzOMIuZ1mncCsbzayA7Veb75aJlD7aaryXb7ydALpgpEzyyv77tpcM8q02Lf/Fk/99Llma/4p8v+cYD6MPNiJ9cdPmfG32I7XN9OU0vb5OQjYiTpHPVgKE+giwASLXaSsiEWRUWBnJH+tDoJo9CwNfJyPO1aVF0fy0SuHSrsfY/zRn1vLGfMduRs156iNeeU+S+b0N1LSuDWndhq39XuPYtGa5tPiYcSwAeNptfpzeahjGax+vuozJmACvQTSRUroDegnvKlieWvD+Ilqr4yObwImYAImYAItBDB2yjCr+GtzN8XbcmS+zXjp8DwCmvvPUjI7UGepifvJQVuedWHA/Wg+S2LaxVW2Fe1G7ZGhpV9uiZPWIvPh5c2Dy2+kRnsxn9n9Tx/scF8C3uZ037qz5Cbw6ezBGYBzjHe6K2C8lFMTIybXcMrFTpy4ccedBh+lwZF7pSiRhxy2csaRN4MAztg07ZjOUZ9rzi4GPTFQ/gzscvrq3NajGPTeT92cEaiXlA/fYXBFXZ1R5hF5xGdiRHpOY14CrC70szBv/Viy+xDQuBL1EKSX/tBSEsbrOGbbmNxCzXFMwARMwASOIIB+yG+eMt/TfDeOUSPzZAztGS9H5u20jifA3J92xELudG5+dO4sBlBg3oMcOZuP4vg4lgD2KNX93eec9FNn2bHG1oJTO4sAdrSrXhHOoifGUWy9LHiqjdfYtFv6YuIwH112kH63te/lCSNkoG9ATo7WAfZSPe/+cS3hPJmdkwmYQEKADr42EEjh4TUCCihCuXuk7NGZx+u5PPauZMw5OiXf2pF7a4Ey88eAyqQFxXWkg4yBbm0SIsOy5JQTWt9rx6MUbTuOytRLz0T5Dl+5M4E9/c+dy23ZTWAkAZ4j6Rgj03VaJmACJmACJnA1ARk71+Z8W+Vkbmjj6VZ697mPOr6inpn3y5lwlG3hPrVwvqToyNjQsKtd5VwaVeqRdrRRMjmduQjQ1hnTjhova6VVnvSzzEt55nQu3scz2dsX45gd7UiNsp3xe+uRgT/vI2An6j5+vtsEpiUgBx4ORA0UOscx3ZG5ZdeHlPJeCDH/dIesZKyl2WO0pewqfy3NLdeQI8eAMkjRlMLcM2Af+YqHksxbyv+0e0qvtH5aOV2ehQCKPkrrVTvpXQ8mcEcCcQxhrPMK2jvWomU2ARMwAROoEYjz0WjsrN2z5RqGXgcTOIoAOhshZ684Kk+nuxCgD2GuSdBxuXK//8yX716G+1G/p8TYXXkz0RV9DmM1f/R7jK3Yt9lQo7cypvbvHsItO1x70lPc2E/onI9zE7ATde76sXQmsJkAHb1ea6BEcBL9+Wf7K/Zw5jHoaOAhHVYx0tnHlY1Kv+XIvXEAQyZel0SIq3HT1T7xWks+Z8RhlZMmJzAiMGBHJXOLc/pI2aNsR+Zzx7RRulh0ENvnHcthmdsJ8DyorzzSSNYukWOawNwEWPikVcba1aBnRwuW9AaIUl+qxU3pgiGNo3MTsHQmYAImYAJPJ8D89I8//mv1tYBbOTCOpnPGrWn5PhMoEfBC0RKZ48+ni7PjIsTjcx+XA32V7UfjeL4hJb2h6EhHKs8Tf9qwErmSLzZnzTfjtT2fjyiXNt7skcv3nkvATtRzeTs3EziVgAyayjT9rvO5Y+1VvRhOZTzN3Vs7lw4UyIThlIkkfwoYX3mfPQZblNAe2ZXGGUcplTqekefePFAqttbf3rxnvx8utDspSbPLa/nGEKB/of/JKeJjcnAqJvAMAsv4vyx8iiXCkcozxHgupyp6RG1sTK+l32P6/mwCJmACJmACZxHQvPMoIzBjpfI4q0zOxwRM4DoC2BbSN7BdJ01bznJEtcV2LBP4TkC2tJYxFEc9QfPH76n8+AmnKXNNjZ3xN59jTOIp/3h+xGfSJX0vUBlB855p2Il6z3qz1CZwOIHRzoR0B2osQGmQK52P9z7xM4ZkvX5Cv+c6spxP+F1UKVFrytYWbih7pG+D/hZ6972H+vbrfe9bf5b8egLpTlK+ux+9vl4sgQmYgAmYQD+B9G0J/SmU7/Bco8zGV7YR0FtAuJu5PnNZhzYC2KlYtD/S7oKNgvTYQCBdWJsEWhxLbZIfEwsetKG32uKOofq+VOmD1tp6dNQzb0zj69mU4zRS5NlKbdY4ZHNx4317Py82o+Wtj3tskd7lvbcmrrnfTtRruDtXE5iSAJNFBq/UELpFWA143MuKISmPW9J66z0oAPxRLygUqVJR41IzXrcoNLW0Z7gGCxzNo3cPwoY/t9cZavl8GaQUp68TP18S52gC9yOgnaiSfIQuobR8NAETMAETMIGzCDD3YqfJkYG5jOcbRxJ+V9rYDNJ5sd881dYGcBjm+LXdXY6V449jknqKYY8jJqYz4jM2vNLPcYxI32m8hwDjW7GTD7wAAEAASURBVI/dMT4XLTY50scRyfNDu40LFs6gvKfPoHzc73A/Anai3q/OLLEJDCfAysWRytsZK4CGQ5g4QRSEqIT0OFNzxVrS2/9K3x6lKCfHiHOjyuIJw4jacBomYAIm8J0Ary1zMAETMAETMIG7ETj6VX3MobzL626tYn55mRfzVh2O/DyNQxsB6atwGx1yaWrRIYsNlffofLeml/701tZ0fJ8JQGDNXsgCBgU5FXXU+dpRcXWsxT3iGs+3HLm19LE1Ulae/atkrcnna+0EbN1oZ+WYJvBIAijYe51yEYxX1UQaYz8zSPM34vc0RrxOJipFKAa51ZZjCfyYGqvE4TEi36jA/ZiLv72NAO1qRJt6GzeX1wREgLGBSWJcUaxrPpqACZiACZjA7AR4ted//ufyJiX0wvSVgVvk11yJox2oWwj6nhYCzI0JI+07LfneOU6c90X7xtYykQZ/BPoPnKVymMa8tqZ/1H30TWo/R+XhdN9FgPbEwg76o1yflM4VtzgYt9wzshbInz+9Ul3PeJwP+7kaSfzatOxEvZa/czeBSwmMdqB6UnhOdeIArb1ulHpIFZKcZEzgGdy3rrZGGSAvDA1MDKQw5PI64hx5jlJINNE5Qk6neT8CtIecon+/klhiEziPwDImjF/Ff14JnJMJmIAJmIAJ/PLDTpE9cw2Mx3LAMl/6888f0zZrE9hDQA5+zcflTMCY77CNwJ45IPUQXyn69evXbUL8z12kd6Z9xbtQd1WXby4Q0PwQ22O0P9O+1WcVbr3VaTlTbyW0he0mYCdqNzLfYALPITDSSYDC6VW157UN7SRlV6peDYHjtHeiT3zS2vpKZ00UcOreOfRyu3NZLXudgBR9nqd//dd/O3XyWpfMV01gbgIYi5gQxzEprr7XeDF3KSydCZiACZjAmwlsnROVmMmRumWeVkrT500AAvrdXhxtX778+jlvQddi/uLQRwCHtOaAemZ7Ujji56y08GLkz26lZaKstoOkVPz9KALRXhw/H5Wf0zWB0QTsRB1N1OmZwI0IbFEQc8WzAzVH5fhzIxWP0sqpuFosloiJAuFKpVu7bfesGKUM3O9gAikBnokrdlincvi7CdyJwGLIy08vWLh15ZhxJ46W1QRMwARM4P4E0CPRJ5k3efy7f33OVgItqtbCeHQw7XyeTdY7ycOz+vHx8U/H9JdPsXmOY5ANgnPxuZbdRAsK4z1bP9N/kN8R9YoNJMq/VUbfZwI9BEbaMHvydVwTGEHgx9FgRIpOwwRM4DYEUJpGOKA8EN6myrsFpW75i6+juXLFIpMSVmXG1dzIFyczpdWaR6wQ7QbqG25FQEaJWwltYU1gUgI8T9YXJq0ci2UCJmACJnAYARwhDiZwBAFsOcyD/facfXRxlKYORX3XsZSDnKe6XltQqDitRzly99rs0vywqVgnT6n4uwmYgAnUCdiJWufjqybQRQAlBwWMP71mdXblRA6okuOpBADFi9WPDu8gwGrMWmCyQJsg8FlBO1Z5JtYcUpoE6t70GB2n6bVonCAeeSk/5PJrJFNi/r5GwL8ntEbI102gn4Bel9Z/p+8wARMwARMwgeMJMI9g/tI7N04lY/4R5yfpdX83gREEcPDxR1tLnXkj0n9LGi3Pajo3bLFv7OG3tw8q5Y3NpWSjVBui/9LPc5BOzQ5TysfnTcAETOBpBL5bup9WMpfHBE4igEEQZw1O0+g8Inu+c352Bw5KI4pRy2tC5OhqUTRPqgJnMwGB6GTVYgLEiu0EZZ3JRzx3hOiaTNJWmdwcnd8RZXCa1xPw7wldXweWYG4CGFh4M4DC0cYk5eOjCZiACZiACRxFQPMI0t/ixOCNPZ5/HFU7TrdEQDap0nWfLxPAZhADLAnpc/yE3b4tDlTKjh0ztW3W7uUeBxMwARN4OgE7UZ9ewy7fEALRKSTlqXWFKsoHzsnZXyXKhBFHGE4ulTGuQPPqsyFN6RWJRONDWuAzHZo1OVK5/N0EUgLstFffrz4xjePvJvBWAjKk6BmBAwtlcgvKxAg9iH7ZwQRMwARMwARmJRDnwltlPHO+s1VG3/ccArTZLQ7/5xDYV5LoREWvjRsLog2MnZmpY3FfzufeXbNHUm69xaskFddLO1hL9/i8CZiACTyJgJ2oT6pNl2UogTVltFdRJT6r2WZXPJj0eeI3tCk5MRMwgZsSkCOevvvOk+ab4rfYkxJggRXO0vhb2RKVN29E45POc491C9Hw0QRMwARMYEYCepXlHtnQGb1gaA9B39tD4LfffvccpQdYEhf9ND6vfMapKociR13HoXrXwA55lSNXhr/+9dfc6Z/O4WytpfPTDT5hAiZgAg8i8JcHlcVFMYEhBJbVZ78fspoPJWxRdJdXhAwR2ImYgAmYgAkcRoAFNZpIH5aJEzaBmxDA2MSCgtyiAi0uiyv6VSycqw4mYAImYAImYAImYAJjCGC3yuljY1J/TyrM9WCpEDc9xDngHZ2o7D7lbXM1x6fbkWreRxMwAROoE7ATtc7HV19IAAXjSGWUtNmlwUrXqKy9ELWLbAImYAJTE1h7I8HUwls4ExhMQA7UWrIYmzA+RUcqn2vGm1p6vmYCJmACJmACZxBA5+MtC3sDPwHhYAJnEEC3YochjjKHbQSwzbEIEPscb1ihHyBEPZZNEAR4x/OfJ1/0L921+6Kiu6gmYAIm8Elgv5ZokCbwQAIootpRcVTxMDTyhzKiHRqpkREnq+JJDuL/+ed/+7V4AuKjCZiACRxAgP6XcUCTZfpiBxN4M4GW34LiOeGZwZHKH8Yov8b3za3GZTcBEzCBuQmg7/EqyyMXUc9NwNLdmQD2I/7YJZn7OYU7l+0o2WV/yz33zP1giS6ruR99Axsg0Gt17ijZYrrISTi6b6L94IzP8YjyyGYZz/nz8wnQ9llg9Mcf/35KYZk7ajESbX/tVdSnCOVMTOB/CHgnqpuCCWQInPmqDgYGlDGtftPuVFa8cS5V1Ii/rJZbVsRlxPcpEzABEzCBHQS0gAWlnQmzgwmYwLIqn2dCCwtKTOLvKtmBWqLk8yZgAiZgAjMQWBwI/746trXIKudMS1zHMYGRBOQIG5nmU9NiQwK8WByYC9jfuB7DYq87z/6Gvo3Tir+tO43R11v18LV+EBlSJpGPPz+XALZxbNA4U48OWsROfvwR+J1xBxOYhYCdqLPUhOV4NYHoKNUgoUGjBIbrerVIKY7Pz0lAr4kZKR1potjQJngVDUe+c16O+ZH5OS0TeCoBnhf6YZynmizGPvqp5Xa5TKBGAMMwzwN/PBs5ZyrGGowsXqleI+lrJmACJmACMxHQ/KlXJsbBNDD+SXdMr/m7CRxNgLa31eF2tGwzpc+GBOZ7pUWBeq13en3NPjeyjHsXJKK3b1kILB1fu2A50te1OmNHMnBacxCg7mkH2ENsV5yjTizFdQTs0r+OvXOemMBdJj8ockz8tihIE+N/pGgoHCgecsbsVUTl6OFVFzmFnnPpeRTgu7TtRzYCF+oWBHhG0ueEiUP6PN2iMBbSBAYRYNV+DHpO0D9YrMMq5fS5ifH92QRMwARMwARmI8A8WnOzXj2PMQ8ni+73PGu22n2nPLIx4Ch0qBMo6a3qC+LzXU9p/FVkkJ2vZ+MEc1Z22O6xD8KFHbDo92pP40voFO9EgAVCvCWRvyPHOm0oimzOfEtkzNefTSBHwE7UHBWfM4F/ErhKaWKQQGFpDZq47VGUWvNyvH4C1GXJ0dmf2nIHDlQUmN7AisazfsugVzbHN4GZCeBA+vLFxoiZ68iyHUtgeZXTskubnKJRJX4+VgqnbgImYAImYAJjCOCYkLNkS4rMx5h/s2uNdEoOmS1p+x4T2EMAvcxO1DpBOWtKNj+eb57pKxfSYudT/1IvzXKVsvTYBLUon7tziyGt37dQf0ccngU9K2faFHn+PLa+o43dpZR2ot6lpizn6QRQQOSgPDPzLc4xydmjNJ1ZpjfmhfO0NHlBGdgTtrQR8mOCn64olPLMREKvrsFhZKV5Tw353qcR4HkYvRjiaYxcnmcTSMcdxrdeY82zCbl0JmACJmACdyHA/GePA5VyypDMAlXSczABE7gPgZKdRiXANoLzhl2de/sKpbnl2JN3zhYYF/RHvZ0+C90eu5QW2XPODqsttfSOe2Qfz9kURxFIbS7pm5BG5eN0TGArATtRt5Lzfa8goNU2dygsjtSc4nQH2Z8mY3w1VFq2qKim11q/k0aPQh3TZcIgh2kpDXbcyUDOM2BlOhL057cS8G7Ut9a8y10igN7BH7+/5YU3JUo+bwImYAImMBsBLUDeIxfzKHaz4oDwXGkPSd97BIE99oIj5LlbmnqFqI6zy5/7LVycotFZLL0d+86y8/S7A5XylfoxO1dnr/3z5KOdxTZ1RM56dTB9mOeXRxB2mnsI/GXPzb7XBJ5OAKcknfddQs/vJdylTHeUU0ppKjsKq1Yro4xuDayI3BNQoEsO1Jgu8Vhl7WACbyTAM0qfygpegpX4N7YCl7mFAJNpFg/xrPC3Z3xryc9xTMAETMAETGArgdpi161p+j4TmI0AjgiFO9mzJPOVx7iI/A5O1JKzqbRYhPPo7tiDWnR27EGaD19ZL877egLYQ3g+jrSL4Mznd1e1Q/r6UlsCE/hOwDtRv7PwJxPIEqDz3vubKdmEDziJIoSCc+SgdoDYt08S5ovj9G+fZYE/fyil+r0NFTK2JRSQLbuHz1Tmj3iFRlTWI5/IULx8NIGrCNA2l8nl953ZTFJbFiBcJbPzNYGrCERDDauUS6vZr5LP+ZqACZiACZjAXgeqdntpJ451QrepGQgwt0YPS38/k3kLc3m11xlkvYMM0mmxTZxpd9nKJjrMlYbahL6XjrzSF4fVmt5OG7KtpkTxXee32C97CeXaIzZX2qEWhbCxRM9oLn5vno5vAi0E7ERtoeQ4rydwp9c4Skm2I3V8s5UyqgkKAzhOdn4r8ddfl+40OkYZzPljwM/9nqImOyi+PQP/mcr8qHYkpaelVmDIXw+TlnQdxwR6CND29azhUM09wz3pOa4JzESA8YvJpwxFI2XTczMyTadlAiZgAiZgAnsI7HWgkjfzbBypHx8fn/M7zbv3yOV7TWALAebWzE9KehztlLkM7d6hn0CJa39Kx95RWrjY8zYx/b5zSVL9LiztzfaZEiWfP4oANljaqBYtpUfyVX93lAxO1wREwE5UkfDRBB5EgAkdRswnKzkMpjGg1CmMcvwpvXiMCjUD+NevX+Plz4kMDkDJsza5Jo3WFYAq81n1ijKyN6RKT0t6MD6j/WpSecZqupZyO858BPSsccSJ6mACTyCgBUCUJY5pTyiby2ACJmACJmACkcCWuUi8P/2seXZcbJfG8XcTGEUAZykhzo3XFidHh4L1vFE1MV866PM9di/is3gfO1W0UWGPwi6yZhNhLtyT33zE2iRizJAtL70jPofpNX8fT4C6wFa6FjQuy3azFt/XTWArge9eh60p+D4TeAGB0iA6c9HXVpTNLHtJttZB9CjlrnVQjiulSmWJ51t2XcbJEgow9xw9KdrLccSK78hp7bMU3tyOwTiZVDrixxGeLfWge300ARMwgbsS2Pu72mvlbh0r19LxdRMwARMwARPYS4AxSTup9qaV3u/xLiXi7yMIMKdlfqq5akwTO0AtxDmvHLC1+L52XwK51/iqNFyLzifsHHKSYqtKg9pbbF+8jQ87qNqhdgCm9+a+yy5zR6dj6mROywcj/15nSuWY72p7Lak/0f7dUm7HOZeAnajn8nZuNyQgJfZuoi87HH//XG32lAleTuHL1UvLSrrcfS3nWpyXPQomSpgU2lL+tMF0tWBPHqV0a+f5bYytITp8t6aBwt0ayC/nOI33pysn00mlJg7RmQp3ghZRcNSrnFt+OyTm788mYAImMAsB+jkHEzABEzABE3gLAeZajH2aS2oxUY+BNs4BnzK3fkv936GcsjlprlmSuWYDiA5U7mf+6/AsAtiO6L/WnJP0Ubx2PA2//fb7t9eiptf4HtvXly8/O1uxoawttM/ZgqLca7Ln5JrpHIxaOMwk811l6RmjqRfatx3cd63te8htJ+o96slSXkhADpQLRdicNQPJU1bk4BiNSl0NCoMtE93RE1wmN0zCUfyiU7MmS+1a6yq2s9vgHnY5pbnGIHeNCeBa3ZEPXFoVq1TZLU0qSa8lTVZ2phPVXFl87jkEUMhHtO/nEHFJ7kog9q/RKDyiPIxrDiZgAiZgAiYwGwHGPhlX97wtx+PcbDU7pzzYDZirri30HSW95qXKl7xbbSejZHA64wnQ37AjdITjsceeVioJcsSg9qZzJfsMbTFtj5RNDmHuV9pxnqJ0zzxShrXg18euEdp/nbbVG2hj/NyaNzz0knP8VgLrvUNrSo5nAg8lwCCKUnqWAjwaY6qsjE7/jPQYQFscW1EW4o9SwOJEWxOUEU5UTeSj3LnPUihz1444t7YztpQn9bSXi/iW8uB8rI9avPQaz/Daysn0ntp3lXVkmrX8fO06AnGCyITvCf3qdTSd85UEUuOv+vveMfbKMjhvEzABEzABE9hKYOs8gnGSecrZ87Kt5fR95xLQXOEKmxHtEpsVzgOHZxHgtbwjbFpb+71IkzmEZKG9s1ljz5yYe2v3a86Co3XPIv9YhpbP7AZvCaXNKrARp5Z0HCdPQG+OyF+tny3VTf0uXzWBdQJtvcN6Oo5hAo8kwK4jGRYZxEfv2DgL2t0HcpQQ+NeUrJQl9TZC2YKd2gB54DhjcrQ3UB7a12wOOJhtCXCKv7uxJY0WByrptiq2qQyx/aCMx+9p3NbvtAeMKVaUW4ndMx6GCTnN71kCS/0kAr3jocpO/57r43Gkrr0+TmmsHelbHUzABEzABExgRgLpvK5XRnTBPT950puf49+DwJVvqkEn9BzlHu1ki5QjbAwjHKjIzo5Ywqj0PhOr/JOthmNu/lK5ddcl5buWCPFYuIBszKUYX+T4y22WoJ/ApsCcC5az2QHXynvmdVi11kNOrj335tLzORMQATtRRcJHE8gQiAopHbE74wykk06hiKz9hkMqCkrKXsUz58Ad0Q6W9vTr56Qn93sVaVnO+r5FQd1rkKBsaw5UFCkCdbqHP7JSp9Ex/pnwjn84j/3KkB0Ab3grz8nINnRDBBb5QgKsSie0LFzBuNYyUe8dY3kGcrtxcucuROWsTcAETMAETGAYAcbUvXPLYcLcICHNEbUANudYuEExVkW8UvfZMy9eLZgjXEpgi10GgXnusJnIYTeqjaidXzEPnrnfxSbAX1zkKpsTNqzc7nT93qwdqT8/YrCLdvifY7SdUR20xXYsE2gjYCdqGyfHeiEBOW3uXHQG8lGvAJmBAxOvs1a+xfLCsMVYHe+54+ethgFW3O1RzmsOVJSfO7D3K0Pu2OK3ySyHOStOr+iPtkntu55EgD4RA8aaEYM+XeMmi5AI9NWcz70aS3HXFgiQr14D/CSuLosJmIAJmMCzCayNb2ul106stXi+/svnG5dSQzi7tqSbPInRzA6eJ3F+W1nktGwtN/bL9Jlrvbcl3uIo5A1x/L70H6fZaJh33CFEe5g2c9TqQ9fsSP2xdtW+jlgI8GNO/mYC/QTsRO1n5jteQmDEK1uvRFUzcuKY0iTyboZQySv5z2DMQM6ETwHjM0otf3scfKTZMhk/a2LWIosY6EhbigqjzrceYZBTHLVq7y4rlmGAk+Iu8rbWj+N9J/BEo8/30vnT3QhoDKRdlvpg+nT6UsVVGYnPH+fTRSyMsfyxQCD3il/y0zis9Hw0ARMwARMwgdkJ5MbDHplLc5aeNN4Sl/mhHARpmRcd5Fm/GYjO5GACown0OFHPWNjLvAEb42Ib+9vqYs5RPHo4jMpzRDqMOWtB/WTOHrZ275Ovq42pjFvatxzZSsNHExhBwE7UERSdxuMIMOCVjJKzF5YJXm33aToAzWgMRUaUpZIygcypUThXLyMVrpJzrGbAzsmkc9rNpu8zHLfwaqmHWtlKjlu99gTH5FbGuXyPVKboM2i7Mz5TORY+105g6Y/+/acb9Hqyny74hAmcRIB+B4MGbVT9JlnL2KsdqBKH8ywEUt/N5J1+Me239B19SOlyb2ksVPo+moAJmIAJmMCMBJhXMt5p/OuRMV1w1HPvG+PCuRaog7MWCdfkGHEtLk4fkZ7TeDcBdHo5KltI0P72vhWsJR/F0du3zmz3JZugZBp9HGF70typRTY7UtcpMS/luWDs2DKGr+fgGCbQRqCu3bSl4Vgm8DgCDHp3DKUJXk254tosk5icnFKacE4RZNhde4UIys8Z5cIY3etwp556ZZPScFS73MJrhPKs+o3lIl0x1TFe3/NZk3p+h1byj1TElJba6R5Zfe88BHqf13kktyRPJ0Dfrf5G/Sl9G31d7EvFgT6VP+5j/CLQb7EgIOcgJU3+SMvPgSj6aAImYAImcAcCGg+3zu2ZsxE0vt6hzHeQEb1Dussd5LWMJnAGgZItL5c3fRvPkWwPuThHnGOzBkE2lSPyiGkyXzk7jPgpr14blh2p67XMPJQ/xg7t8tXY3st7PTfHMIE8ATtR81x89sUE7roLtaR0pTtP06pF8ZrBMAp3KQ+SUd/ZYSMFUSvzkLnmWJSCp7SOOK6xzeWJzFsm4ip/Ls0R50o7Qmtp75VJhok0j7W6TeP3fEdmnAXara289ryWOc2fPGwYSKk887sV9mfW611KxXiS62vo1/hLd6HGctF21X7lUK05SknPwQRMwARMwATuQoAxUOPcVpmZi7Jw12E8gZrOMT6341K0fnQc2zelXLLl5RhssUHl0tlyDucpbV7Oqy1p9NyjBZ899+yNS/mYG+0dP3rlkO1zi62wN6+7xxcjHVUexhUC7XTLW/aUjo8mUCJgJ2qJjM+/lsBZCsFIwDmlK76Cr5bXLA4fKQ2prOl5vUKEeCUnKuePntBsUV5RxnIGb8rCRF+OPb7HoJVW8dzoz6kCspa+Vj+uxatdryk2cOJvC+danlxDIcZpqlcq01Z4htK2tpZO7fpTDAO1Mr79Gm3TwQSuIlAbT+h/lp2obWo+fSJ/WhjDGHrGOHoVO+drAiZgAibwbAKMg2cbwJ9NdFzp0F9Kc95xuZybUskmca4Uzu2uBHgmZIvB7oONBPsE/ZiCdn5ylL6ua2cesZUi31n9K2XlLzc3YS6un9ZhQ4AYjuCx5W1zI/KVPWpkWUbIdZc0ZAPW8S5yW877EGizrtynPJbUBHYTYAD+8uXX3emckQAKV/r6PZSt3t9F4J6rBxrK0qKMEQflEsUCmXP3oWQdHeQM7VFiS7tjKQ/lwrGH7EpbZZAype+jj1t4SZHfKgt5ltoc7TGyOMqZGh3yoxkjf25xw1Zevm8uAkc49+cqoaWZncAyZvz+CzoL/TFGhNIYSn+LwWOtn2M8xWhQW+AyOxfLZwImYAImYAIjCZTmKyPzeENa6BijHB3MFTUXncHZgJ7VYxN4Q327jO0EtNuSdr2mq7enekxM2ayOSb2cas6ZGuc+2G/lfC6n8vOVGeygqVS0gS1lSdPxdxMwgfEE7EQdz9Qp3pwAivjsyguTkHQFJwqAlIveKmAScvUEscd5Tf2wCg4G6X0151wrFxwkqSMzd6/itEyacKiVGMtgTb0qzVx+R51T/j3p792xTT2VgibFas+adHMsOQlKaV15nnY6w8T+SgZPzJu+1saSJ9bs/cpEf9iy6AsjA2ML/RGLdui/uVd9q0ouZyx9r/ro0rile3w0ARMwARMwgdkItMzNWmTWWNgS13F+JICOoYVZo+dDccH46LR/LMXyjTdGpQvXYzx0pbvNU6P8/nwtAfUzsoFcK83cuUf70B67UJwPwT/a4GRXvZJEXOx/pRzO2wRM4EcCdqL+yMPfTOCTAAPpqMnXaKQo6FGJ1yA/Wl4UCznXthpRSaN1YqO8WnmhNKFcpLs7owLUmlaMpx1myFOTHe5waZWbtLiHHYoyXHOv2KbKW5Tp6M+1cpby3vOKE8qvcufSRx4mEWrTrY6CXFq1czjgjwyU0+F5BGi79BMEnlv+ojHneSV2ie5OgD5Ui4PoX/njO87V0qIxGSmuHJvuzt3ym4AJmIAJXEOA8W1vQI9nDHToJyBdo//Otjui80Rz8rY7+2OhL5Hfml1jz9y4Xyrf8SQCsovw3Gih45PKd0RZYh+g9GU7Ek+dj0fNf+L93Edfr/uUTrzv7M9H26nOLo/zM4GnENivXT6FhMthAoEAg+gMg2cQ6fNjasxECThCTiYJqWE1zTuVLX7nfimAHKPTN8bb+xnlJ5YfGfcE5FZ6yI0iWwpy8rU6UUkHByoBubV7SFyltH1GOPEfvwu6JewxTpSUQibBOKOYhKouVR9bZFy7J9YdHFQ/a/f5ugnQdj4+Pr6BSHfEf7vgDyYwAYGcIZgFRzIM1kSkD6a/T99+UbvH10zABEzABEzgKgLMJ6KBfKscpHHV/GyrzG+5j3mi5ojM35jHHVFXtCXls2YbiDK9pR5czv0EZPNQStjNjrLxKY+nHnlW+WPew9xcb9ihvGtjAv0Ic/v4zF/JKdqprpTDeZuACfxI4C8/fvU3E3g3AQZNlJYZnSlMDuIuS14rI6V+dK0xSUgDeX39+vVzFWZ6LX6HIQ5YKSockXUtbJ34RAapErqWZ7wuuXUOuXGq1gJ5p87mUnzaVS70OiNlDOe4N8BrK3fV7xYZSs5pnjvShSufUR55DfJRAYetAhxa2g/ckSn+leqi5CxWnj7el0Dahj3RuW9dPlly9VcYZOhX0zENnWIxPNbHk2Ucp3/+8mRcLpsJmIAJmMDNCTBOjZrHt8wLbo5rqPhn6gjoL7F+4pxuVKHStrQ29906px4lr9O5JwFsQbQ1dHTp6dLP71mi66XmWcVGx9yHz2vPriTGXndEX6L0e46zyNEjs+OawBsIeCfqG2rZZWwikCrKTTedEIkJQnSekiWytioDLSJGhwDKWy1tFBJWdaUyKR8mEOmuPtJb+y0R7sfgW8tbeYw+luqesuIcGTEpQonLBcpL/q15sEtT7PeuUlQ6Oblq55B3ayg5HHNptjqot8qStkt4lOoJuXGKxmdF+eocZeDZ0KpHnVc8H59FQBNdleqq/kv5+/geAiziUP9Cv8NEO46d6q8gwhjGAigCY7OCzum7jm7HIuGjCZiACZjAnQigl42cO3iBXHvt97JH1yAwt9o612betjigFicJMkg3ape8HDPnjEfnKs3Zc3PZcuq+YgILgcUesbytjDP0YdLj0fdH9mlmXidQsgPV7zrmKu1idJ92jKTHpUqfqn44ZxM/LmenbAJlAnailtn4iglMQSB1dMXBZISAKGcx5Hahxut8RsHgLxpyY5ytjtS9vyVSmtRE2Xo/U84j0o1yYACvvfIYpUFKXdy5GiePKNvwYyKqSX906EUDO3lHY3qUpeUz6T4lpApqugCAcpbaecqAdnJ0W0nz9PfzCTChoZ9Mn6nzJXGObyWAQYU/xgb6e8YPtUsttNEiG8YG+jDabEv/VGvXZ4yHb61Tl9sETMAETGA7AebHo50Nmk9tl+odd25hL10j/XmbXmLoPyzUJj3qnzpr0XVa8onzb8VnDlxK/0nzY5XXx2sI0J71bFwjgXO9mgDzt5GLQq4uz5b86WvhwPPAHJS/Vrvclvx8jwm0EHiOJbyltI5jAjciwACRTt6OcKCmgzO/e6YVP2u4mKwwYUgdvdzHoEcZ4oSWAbC2IzUt71r+8ToD7NaArLmJEukxWHONOPAnUOYWZ/Nn5AH/xBdZYBhXpam+ZDiP2SGzAvcgt5yw8ZritB73lH22V9ymCipc4m9drjGJXKkbK3ZrxO57nec/3fF339JY8icQYEwgMM4yTmkxjhyoXKNfwhDD9b1B48fedHy/CZiACZiACcxIgHmBxtIZ5ZtRphGvnUSfQcfY8vvr1JferkE6e+a4kS/zb3Qn5s+aQ9dsFcRxMIE1AtgKvBh3jZKvz2Yzu6pGZOtU/jX7s+L4aAJHEvBIfyRdp30rAjMpvuyGSycAox2oVE7qQOWcjLJ8bgnEZ0KRSys30ag5UnPxW2Qgzl5Fg0lSqeytTuVWWXPxtIo2V/fEj7tOUbzhTZug3TLhR3b+Svfn6icnx9o58qQOt4bSc1Y6vzWf1vtQzLaEkkNNiwZG8d4im+8ZTyDX/6aLRMbn6hRNoJ2AxmL1QemdXGecS3WLNF78ztiiPvKqPjrK488mYAImYAImkCPA2MaYtWeOQrrcz0IkLWDN5eVz3wmwmHQvc6VGOsy5S3NZxcsdVffoOiPrbmlX3xcl5/LWOS80EwkfcwSiTv3rr9ttKbm0fe5ZBGgrtiUtdZqbt9LP80eAlYLeyqfv0bacS0fxfDSBHgLuvXtoOe6jCcxiIMxNHHIG/L2VgQNAgfTjYKTzrcc4QMV7SoPVMkn6/aeVvqX4Mc3S5731R95XOUXi5JN6KHHQSlvia8VtymPt1cBp/N7vUlh671N87h85uVW6W469DgXlEXd56Vw84uTmmSjVY4zrz/cgQF1qoYUmwZzzSuJ71N9bpCw5UFX+OL7QjuPYozjxuIzVi0HTk/lIxp9NwARMwARmI8CC2r2vwGRsnGWeMhvfnDx759+lNHvnUBjPpdPENzbl0j/qnPI/Kn2ne18CzCHVr7Bw3uF9BGgDJdtTalvSAtb3Ueovcex34+dSSozxcrbaXlei5PM1Anai1uj42qsIzLJ6MJ00HOFAZfAg7HWeqoFEmUmToHMlQy2DXO7VvqX4yqt0HFF/GImvdopg5C4pWKWyx/NwpQ7EP17b+1ntZW86uXovOeL35lW7H869QTuGa/ctbfu3zyjkobJZUatRm/8ak1/q0M6k+evKEuYJxEUsPcZmdoawyMhtP8/VZ03ABEzABK4nwBi1tphoTcq9bzZaS/9p10fMv1MmWxyzzLfQcQh6Y1Oabum7nFrU/R49J8pQysvn30UAuxYOMdllcJa1OHreRem5paX+9ZNb2NGYT+kcNgXZho7oR59LdV/JFlvpdzeY6oP+W8/pvhx899MJfG89Ty+py2cCKwRmUGjoxNOgCUF6fs/3ZfD4dU8S3+5l56yClAO+UxYmI3FlqOLpmGNei6/7csdcWrl4a+dQdM94fW9NDuq8NIi3TNCO2o06qi1SV+mrsijvmTuByavEuFQ3W15ZlTKj/uyIKxGe/3w0rngiPH99WcKfCWiRDW0ZQ2XaR/18x3JGhun4DJTi+rwJmIAJmIAJXEGgZZ5Ukwsd3aGdwKj5d8xxr0OhR6aoy2sX81Y9Z2/biwz8+f4EaA/afUppaGutOvf9S//uEsgOqr4k2kjpn9b6qKNsee+ulXzpVR88m2m95e/w2bcTsBP17S3A5f8kgFIzQ8itfp1Z2YqvHo7KASyXAanfUXv15BXHGgPomnJzZHuhzqPSHfO6coI2si3mJsi9Rv3Ipecz9Uteva97YmXz3iCGWnm4Nz3ffw0B+jvV5TUSOFcT6CPA2JH2OxpnWtsyjlQZBPpyd2wTMAETMAETmJvAlgWWc5foWOnQhWcJvQtjkZt5YKr/oOekulJrGZHhynl6q5yOdywB2gB/apO0My1EPDZnpz4LAX6CK4a0n4nXcp8XO+oxb5bL5Xf1OWzx2Ab1ml3Jw2LfnM1Q10cfZb/G5rf3zQSjZXN68xCwE3WeurAkFxI4s3PuKSZK16whTjRTB+oemfc4UZFDCuseGWbYjbqnLDln/B4e3Dt6olxyUmPU53ksXd9bDu6HD69u6uW0dZd0TmaU6RFtNZe2zx1PIO5Wv3rRxfGldQ53JEC7pM9KDTlpWehzicOq5yP73TRffzcBEzABEzCB0QS2zukZB71IaHRtzJse89qcYwvdac/8jHbU6zCZl5Il6yWAfUz9CG3MunUvwfvHpw9JA3Mt/mgTOAZbfj7sLbtR4w7tK+ahqq+YN595MwFjRNw0lNarv7+TgJ2o76x3lzoQYDCLnWa4dPrH1IGIEtYyyJ4u6D8zjApidChcIYvyRCnZM/FROqRx5SQoOqglk46UcS2obtbi9VxvybcnPSksuXtYvRcVqlycPee0ozRyoh+gHVPvKLnp77ZynfM8o7lJd688W408vfk4/jEEYv+AM16vADsmN6dqAv0E0GtwohLov2TIof9SP6dUGfPod2M8XYsGIZ3z0QRMwARMwARmI8AYtnVOb728vzZHzw37Jdh2B+2kZLvQAlstZO/dlbroU398OlKPXhS8rfTvvgv7g/Rd2u+IOb2IoluTJjaErf2Q0vLxOQTSnci0E+1UrfVFtCHujfaq51BZSnKkva+FVZzj5ubALWk4zvsIrFvj38fEJX4ZAQyLVwcUuvij81Geox1KMa+ezwzqTCxKk5DWtBiwouMzfm5NQ/Fwjo1SNOQwk2N7tKItmdPj3tVOKGZ3CDLul2SF/1EreVFKUZoUonK7THgXIwyKHXIQaOc8p0yuuXfvpMuTK9G/51Ht4qg2ek8qlno2ArTPnBGP8/yVnKmxT6SvY2wt6SizldnymIAJmIAJmEAvAfTydE7am8bb4h/lRD16joStAf0np8Oj75TmeMwD0zd85Oqc9GXPiPpULq7PnUsAXZagOirV9Rapcu1pSzq+594EtBBDpZAtUd9pJ8zNsPHSDmt2paP6WMly5ZHx9qpnJp3/woG6kHM75YKsihOvcV511LvgJqbjz/ciYCfqverL0g4mQMd3tKK+JrJWxNXiYbDPGUJr9xx9baTSmcoKky31MnoCPMohm5av9p2BWBOvWrzStbs4UVOFMpaHCSfsa0pljL/ls+qWPiC2ZdqQFgag2EWeS/sas+iCNu5wbwL0y7QPKc/3Lo2lfyqB2lhKH8cffa36RDjwmT5au1fVL358fDwVk8tlAiZgAiZwcwJ7DbLcv2cOdnN83eJjm7hrQIfnT8Zx6UM1nWmZB/5LVm8qcUj1qVI8nzcBE3gGgdQukBtT6Eu0WJ8+gnty4xd91JvCVhtwD6N0w4rGAOqAPzm4sUfqO/XFfem5XL6UgcU2zKPj3DoX1+fuSeC+ms89eVvqyQhcuQs1NVqW0NCxy5BZinPn8wxOqXLBwFObxNTKm0uvFr/1GjIyeGqS1XpfbzwcelsH3FQp6M27Fr/m9KzdV7qWSy+2dTjwjBwVyIs6XesDcKjCdXRY24k7Oj+ndxyB6IQ/LhenbALHEaAN0yfHsXgZ8459tfpxJXLKJmACJmACbyKAcTNnhO5hwP1vM1r38Enjbp2rp+mk3/cuNO25X3rP2nwwlRG9CZtDS3uRPuXXvKYUz/9OPWu3GX2GgwmMJsA4wiJr9S2kn3MOaryiD+Fvtg0zo7mk6dF/KsALBtjntJlB10YeqQe412zr2B9LrxlusfkwLmpsJP6R9tmRbJxWO4G/tEd1TBN4HgF1cFeUrMVRhnLHQHKlnEez0e9TxnxyDrZ4vfY5l14tfs81lCEG+COcapKjZeIXd0fqPo5RWYvnR3wm7VK+W9KPipPu51xs6ygeLTx0f88xl3/ufvKn7CPkgJ8cw3vaeE5OnzufwNGK/vklco5vJrDoGsvriiIHjXkj+sCYrj+bgAmYgAmYwEwERs5zZirX3WRJX4fZIj9Gb4XeharYW+L8U+msHTHG4xhtDTjv3MZaaR0Tj3qmrXz9+vWHN1Edk5tTfSsBOUhV/lKfRjw58/Wqad3DEVvDUwO2cNnGmGsSUm6jy87zTx61/h4bHfLEeS/2u62ylebXo8vm9M4jYCfqeayd02QErhyUYqdcwoJ8LatdSvff5XxuENvjYMqlN5rFaIdilG9t4ofCkfKhPR3p2EU+2uNW5SGWr/Y559g8oj5RhOBImVrSb41XK5ucpzj59ZmJN4rzMnl/rpJc43LXa7SJ1pWSNpjctZbfJ3dpJwZjnlbuv4+KS2wCJmACJjAbATlCOKKT5eYQvTKn86ve+98UH+ZHhd56QJY4R+25n3uZmzGX1vysp1zMI3scqXIW9OThuGMJxLYyNmWnZgILAdpYXNhR65Ow99IPMdeiD4p/T+dJfxg3Fl39bDIOUA8EObU5R/3tkQ2bkZzlT6/TN5Tv+x7qN5TWZTSBSQiUViNF8UrGzBjnKZ+lOKg8Grz0fcYjjpE9g2muTAzSLZMr7bYlPgP8GbxGt8do7ECpoEwtDs0ct63nWsq05tRuyRtlmPKqvXz58v13VeNnv+6jheb1ceivWh2oSFubOF1fGkswIwE53tVnnCUjfTCT/pZx6CyZnI8JmIAJmIAJpAQ0PnLU5zRO73fra+3E4jyu/a71mNGIvR57WeSb6uQ99cgcOi4S2zIflSM1plOTnXnhGxbK1xj4mgk8nQDjkn5fc62s9GEfHx8/OBTX7nna9RmcjNHupzEOW2uLzXCtPtTnR6fx2j2+PicB70Sds14s1QkE6BhR1GWsPCHLb1msKffLqtr3rHHQIPUN0D8/7NlZecYgzKRrdNuJA3dkET/jwJGz8SwHasx/1GeUSgXqX2XSuSOPKDE9v0uzxzhDH0P5WtLIPQdHcnDa5xGgHTiYQCsB+gv0BCbUo8eZNRnIm9ecMdY4mIAJmIAJmMBsBM6Y581W5tnkOWrO0rLQXCxoB6kDlWu5xcXYVtBt+KvtHO3JX3Jw1CK0eK702Ub0EhmfN4FnEVC/cITd8FmkfvncUHF1mVJ7nTZCjLJTaiPM1eV0/vsI2Im6j5/vvjEBFFhWDLLjQg67swzdOeVeKDFcph24rj31mJuI7VE2cukdwY62M7LNRMdiSd6r2kaLg7ckc+58VEbgeLajIOafk0/n4L2HOfm03n9Wu1XZfNxGgL4J51br63ao161GmW0S+q4nEGCxBwZC+scrnKkYJuOrqJ7A1GUwARMwARO4P4GjDJHWw9vbRuvcpj3FJebaQnOlhyNUO3t0jqNsOvEcukyUl7lZyZHamn9MX5/Jo1VvYg7hYAIm8HwC9AvYd9fshm9fvNpqmzuixWDP5Q97pOoBXwF/uXFmqwy2B20lN9d9dqLOVR+W5iICGMVRuvXu84vE+Mz2jRO4kvNw60QmTpSOrksc8aMcgC3KQyxb/Hx0OUeVMcoZJ5primW876mfS8/BU8v7lHKtKdfU69a+7CmMXI5tBGhby6759cn3thzqdzHGlAyN9Tt91QRMwARMwATGE8DA2TJf2pLzG+fgWzjJyLzl3to9iyF7+T26UjwWly1vy/j+RqNSXM4TPzdfrjlSa+mtXSMv8lwLGOdxpB4xv17L29dNwATOJaAd89gNSxswjhx/sLm19EvnUpkjN3wA1Is2V8XNTtFWuUda+nn6e/p9h/sTsBP1/nXoEgwiQIfJ39HKbGngVDHeaGw/YjJ8pqLQ4gBsWXGaWz2rdsExLdOZTreoUESZ9nxOJ7UzLGLYU54999IvvLn8e9hddS87IdYcqMjGLm6eH57vo8eXq1g43+MILIa+ZVcoE7yzg1fNnk3c+ZmACZiACZQIHGloPnNeVSrfHc4fVQdr+gYG7Ra9OzKs2VXkSGV+zR+LxuTsiGn0fkbGFkczBvUWG0Jv/o5vAiYwHwH1CaW3u7X2G70lI19sbkel3ytPKf6ajbx0397zJRunuO1P/++f/bwdqHtJznO/najz1IUlmYQAyqwN3edXhhQL5cz33omS7uV41KueYh7xc23i19KecLCUBnHlk5YpOp9Tfrpn1PGo9I9Kd1S5j04HhVEr4FT/MGEy/3Y2R7M/I32efcYUAvVrY8kZ1J+ZBxNgDHwtC3JGEaB/8qRvFE2nYwImYAImsJdAzSm2N23mVda91ymm89H1O/bHQP9JF9/mUk0dvOjeNeM8dY69YXEwtO1uzeWbnsMZ29qWarvT0nT93QRM4N4Eav3YX//66/DCxfzi5+EZ7Uyw5FzemWz19pKNlgU7IxbUkPkVC6CrhfbF3QTsRN2N0Ak8kQCG7sWp9fcnFm/KMsVBfVkN+tsuOc+eCGNoLk3S9DrP0kDNfXKglQrNRCw6TRVveaXRl8+BvnWypntnOMZJJgze9tyx+1R1j8JGfcKEybzOz1BPluE7AdVT7nn8HuuXT2eXHKjxvHccRxr+3ENAxr6zHKlMaOmTln7p9+bf+uopk+OagAmYgAmYQCsBdOPSfKs1jVq81AlXi/vWa2v67xFcWg3sufprvXe03JrjLnP4ZYEsNo7FQP/7N92K654bjKbv9ExgLgL0TTz/tUDfSv8wKtC3RBsrn2e1Fx65QKrEM337hGw8kVnp3pbz2DUdnkfATtTn1alLNIjA4tAZ93uXEmtNkY+OE5xu/C1Otmc7dBmstPtuzw5UceaYm0jF66M/lyZAKESUT8756Ezl89oKJZSd2mooXTti9ZoYHckyyh2fO7V/yfDEo8pO248KW2wjTyz3XcuUTkZK5aj97gVt/OPj44cdhfTxrvMSTZ+PBNS2zmgvsU9iHLtighvL7s8mYAImYAImsDaX3kPoyPnOHrlmuffI30mv6RipsbvEIxfvDH2pJA9zdP1pxyu6lRzRshEwNzhrgVxJVp83ARM4jgA7+Ft28dM/rDlbW6WM8zjdI9uTvs9yrPX/R8lI/8uYNtp5irzYdmA9q9P6KKZvSHfcOyveQMtlfCUBHF8o5FJ290JoGSBkJE3zopMfJUea9gzfRzlPVRYUlTNfRagJUK4cKDHU/bJjdXmtp+RcO+YUoNw9tA2UgNzut1z8Wc7l5FYZRimRs5Q1lUOGoLTNXDnhT2X09+8EeMZbQosRjr6APoG4/OUMPy15Oc57CNAvSIcYrZvUKDIRXFvsU7vf10zABEzABExgFAHGwta5UW+e1sXKxJhjHmWHWN5ElNexMUK35puLh+6OHpO7Vi7teVc055V+d17OzskETOAsAj39D3Yh+oNWu0OpDLnxDDnoU3vSJj6LQehH+QmzmmxyGsoWEm2xXON87f5SWY46v/AY7xZTfVNeWGPHx+6H/tLD/qhyO93tBMa3lu2y+E4TmJYAg8WXL2PeUd+iIMfBRlCWXZp9jywDHUGduNJ6y3GLkrCXDXWXOsSU5laFKKcAKc30KKOCJmTp9Vm/31XuvTzpD1JHcapcSeFUXnK40b6Jm8ZXPB+PIQBvtddSDlxfqxeMUWvplNL3+XcSoL3wx9jOmw9wbNJ/qE+IVEaN++RlB2ok688mYAImYAJXEsAAydikcQ59i7mSvu+RjTTQu23k/JEiusZROiuLx2u8e3ZOyfbxo/S/fBr+R9ly0rT3fI+vezyK7x75fK8JmMA1BJb5Xn5hSatEpTGRPrV1bsd4qLfeLePjd5u45qPqv2NcyRjt2pRJ/RzjdrRXpuO67r/7kTm67PjwW+p1cUZHNncv55vk7/PIvImMy2oCgUDNMRairX5cM6qvJrASgYEsXR105KrRFXGmuKzVP2cKw2Qw50ilfqRk9MiDsVzKS8t9DM4YE1qVo5Y0W14/0pJOLc4Rctfym+EaTtS0buknYkivx2sw4y9VRGMcfx5LANYwr4W1Z90O1Bo9X1sjwCRM/QJtjcDYT4ire3OT2c9IHf+0W77jFkc1ARMwARMwgUMJLGPe8lpUGWJH6VY9BuZDCzlJ4ugSuXntCPHQqWuGZBmfW/Mq6SzK46hytMqXxot2gbW5RXqvv5uACTyXQM8mihwF+u1SYB5J36p+sRSPOLU+U/NR+nH+6M9SO2gpDZWP608OuX4dbizqwb6KnTeOA09m8ZSy2Yn6lJp0OQ4nkA4ItQxZVUiHqU4TI+coh5YGKQyopJs6TaNcoyaTMc27fW7Z+Tu6TCgkDIoMkAp72gADK/Wu9qQ0a0fy/vr16z/b3R9DBmba2RkreBdl7PdvDoEznLc1jkdfS+uUeubZpr9ZU2yjbKQz2nEe0/fn7wTiBIHnGoMN7OPzLofW97u+f3K//J2FP+0noHaX9s8ac3rHjlQi+hYZqPVbaKP0mTQvfzcBEzABEzCBFgLoyKmezFgVx7xUx25JlzgaV1vjPzneiMVYNT5Rx8jFqxnwc/Gp/1KgvWAXWH6n7vscvRT/zPNPdyScydJ5mcATCOwdh9hIUgvqW9NxVPeUnJ+6Ho/04/zR/zIOq5/FHlKy5VG+t9tEYAA3O1Fja5r/c/3Jml9+S2gCpxFggNFgU8uUwYOOkD8GEQag0uBUSye9xmAUHSsfHx9plB++ky+d8tvDVYNS3D0qY3ZvXfQoL6W0Rw3MtOHUMVzKc+95FIrUIbA3zVnvT59RfaevKSmdpbLAbVR/U8rD5xcCPA9pvw57JixyOOVYEUcTDF1/+wRCHHwcS2DpR7/8YFDemgPtFh2ENB1MwARMwARMYEYC0oE192Pcapm758qitHLX3nIOBlv59TAqsa7tpOpJP8albbAQjEVhV+s02AcUeud8us9HEzCB5xKgD9R41lvKNScq6dG/80dfFBeAc69sUj35co8W9WvBbW0M2ZJHjzx3iLssxJ/vt2LvwO4qGXdZQ6TYbH2wryq08zWBrQQwfq919sSJITW0x2s9n3nOas/aWROdHpmvjhsnJ2fLQl2xC3TrK6HoX2tKR2t5aK81p05rOsRDGbLDp4fYvrhbJve0mVF9zj7p33f3Gve0j5YzFeWZwCKZsxYqvK923llijT96k0aLDpMjRbv813/9fmXPpP57Kv5kAiZgAiZgAvsJoF9Jf+KIMRidDCfq1kA6a3rd1rTvcN+Z870Sa+bS0l9amclOU7OZkNaVc1o5LNS+0Km2zPlamTieCZjAPQngzFzry0olk32hdD2ep/8ZtYFhSeu785f+zv1bpP3jZ9joJ3q4EjdN/RjT32YhsMuJqldhyBA4S6EshwkcRWDNAEmnt3Wg2yozireexa1pPPW+0u+inFVe2oJWYfXkSZ3GwbTn3qPj4pDlDxlR7GS0IF85rXOvNz1aLqe/EFAdmMd8BFJjHuOJDCdSmHmmPNGYr+7uLhGGOhnraHe944vb5N1bgOU3ARMwgecSiLrTMl4tDtA9c3LSKe2QfC7JpWRn79KENfpwrr7QXdCfW/UWnKj8tdgnmc8Sj/bDnxywR9ZvTq4z8j2yTE7bBEzgGALaUKE5XGsusi+0xh8dT4t4WYzjOWQfXeqc8WjUJpi+3B27hcBmJ2p8IKSsyAjYkrHjmMAdCaDc51bTcO7sH4VmcNSzd0eWZ8icOi3OyHPGPEoT0z2yLs/C374Z5tO0MDyMWtGWpu3vZQJXLxwoS/bOK+hKUoJ5ZjCe0G9z5DvPZvzdYvdZ72wnR5UavSQNsR2m11q/M7kjHQcTMAETMAETuJoAehb6kxxh0SknvWuLjKUdklvSuss9VxnfZXTPcdqit6BrsxNrzT5D2tJnpK8fuQs3p+cjq4MJmIAJ5AjgVKPfUD+Vi5Oeu7pPYQz++vVrKpa/NxJQ/WlMarzN0U4isMmJinFcFRvl5AFH2VxTVuI9/mwCdyNA+46rIXMrCo8qkx2nfWRzE5W+FK6JjRHg7uGu7O/MncUcVrbmqUGt5JfDFMlk6NOK0nRC5Odmnvq7uyT0B2n7Uplohzk9Xtd9NAETMAETMIE7EZBetfy+2LKzkDFQepd29PSUKTpje+67c9yrdANYozeX7Ihb9OMlzd8+qwOdiMBiU6WlY6or9bwG8zPRjn/KM96yx9Ef0/FnEzCBZxKoLTLJlfiqfjwni89tI3DkOLRNIt8lAn/Rh9YjTpyaEhqVFdIkvoMJPIkAijY7h9h5zd9ZTgtWReK89aDY3prSSVH7ndfGZDHKyDDaKbvsMq337XpONGkdWR6nlSeA4UGBsZc+w+E6ArE+ohQy9MVz+sxzgzHFwQRSAh8fH/90iq7/vhvtBx1l7VXyxNmaWaUEAABAAElEQVQSkKHWhrek6XtMwATeQWBZXFTXHyFh+8E72sMRpZTuFZ1VjFnM2bcEjNdvClfaGWRHzD3/sT631Adp80f5sGXyh11l+fv9hySJd2bYW7YzZXVeJmAC5xOgT8L+1hJy/WfLfY4zF4GeOp9L8udL060htCiSUlJ50FFQ+G6Dy/Mb05tKiKH7TAddaff3m5hvKSvc7tj3nD1528I27sbGqM7K3nRBweJI/fdPZ96Vk/It5bvLPSX2qh8m5nd8Bu7CvyYn7V/6UC1ees0rD1Mi/g4BJsU4RnOvR6If+PPP//72rDP20QfgUE37ZdHcqsPIQK10fDQBEzCBFgIs7EK/XXsduOwHab/WkofjmIB0rzjGMX7WNgHUqNFmabulsbR27x2v8dxdPQ/N9RHU51GyUd5oM2CRmeZRZ9Qh87St7fMM+ZyHCZjA9QTe+Hr566lfKwHjwig7HnoQYyvtqGWMZ7zFvostIepT1xKZI/cuJ6omPzXRgayK1m4qKh9DruHXyPmaCZjAaALue0YTXdJLJ3sMxBqMUyMD44YdqMfUg4wJqVMD5gpe3SwS1xylD12Tu3O9OwGecZyjMUTjHjp3nNwwQWKxY6k/junwWX1Ier72PWfcrMX3NRMwAROgb0IXpM9pHRcX3fLXT6NPqluaqAnUCKRtbO88hPvfsigRo6l0iBrjI6+hZ+QC852jnJvYDMj36IWMJXvoFn0sx8jnTMAEnkmAfjku9iiVcu94V0rX588lwPwevQP9uTRu1CSS3s2YtmVMX3Tw5e0N5JPaHGp5P/1aXkNJSp0aZZLL374y+GuSwwMeK6vlPd4tncK3zPzBBEzABBoItPQ9DcmcGuUOEykG0lRJ43t67lRwL8os8seggGMFBUsKk1BsUbp0r48mYALXE0iNwTzTet6jdDz7qXGRc7U+YIuxtGTcjLL4swmYwHsJMJ+Pi6fVN6G3yE7QQwe9kntrfVlPeo77PgIjHGNvWJibziGuaiml+qIPOHKOfMYcNvaPfCbQX7Jg7suXd706+qr25XxN4K4EGIcI6dxQ5ZmlD5c8Pm4nIN23VNe5lBlTtBgo+uJycXvPIY9kertOvupEpSL0sK6BxhhD4OFN76ESSUuNgDhUcFrJ3Ld1krUmn6+bgAm8jwB9z91ewzR6InWE0bs0wX1fC7umxLmJfjpeY2hIA2OvDZEplbm+88pW6rL1dStzSW9pRhLI6c6po7SWH/1E7XnHcNcb3Pf3EnN8E3gfAfop/ZwPixnjQmtoyNC3xan6Ppou8V4Co4yJcdHiXplmvJ9ndYZQq68jd6OeUXYtMIn2Umyf/DmYgAmYwBoB/CX8oVfFn3Lhvln68LUy+HobAebxzLsZ93Lz+ehTy9kG23Lpi0U+/GncysnVl+L9Yv9LalDlO0EOzp7KENASBgyCLUZBpWNnaomkz7+NAIsPWp6dt3FpLa86+jd28jA6ovy1CW5rvTjeOAI5x4oWNikXFhN4ki4axx3hXFN4W3Kmz+ePtHh+Hd5LgImyjG69k2Pazmgnhfv+97ZFl9wEegjQd2nukv4+OH0Tf4yVLByKgXti4F7p79gpNCaO7ttinv78LALovrS1EePXkx2pWsTLM6dnd7aWQF9w5G7Uo8ur/ivO22ibdy/X0dycvgmYwI8EGM/Yva45IguwR4xxP+bib1cToE4ZL9Bj4uLnq8do6fFv9Nn9C4XHKHPGA9ebB7JRKZo4Xd2Anb8JXEkAI8Nvv/1+yrN6ZTmPyvtOk944QI7iQX86si+98wR2FNPZ02H8JMgRFw2Rs8t+V/liHy0DSW6laGv5ZCTm+XV4LwG9TaBXj4ZYulgyUtw61tTSjOn7swmYwLMIMMalTs9aCdVn6U1UiqsxLf1N9ziGEhc9RvfS72hc1bWReq1k8/F5BKRLyQmv9re1pLRDdGq1za3pzHYf5ZFBHtlmfb3snXej0vbS9qd+Uk7s2dqF5TEBE5iXgMYjFq45PJdAOm7MUlLkyi2InEW+I+T4C4XWwH1EBrU0mRihgH58fGR3x2B49OSoRtDX3kYAw4UcI6PKvjxnf/98FkenPUrGUemgZLBKa/ZwRL+39PXLmwZGlD81fI1I88w01O45aiw6M/+j8+I3EwkYJKl7yohxBAMSz0D6d7Q8b0i/tAIUHYuJzdevXz8d2tSBgwn0EMCoyXO8JdTu2zrW1NLcIqPvMQETmJ8AC7K2hHRuIT08neeTfmqTwDCjkO7Epx+Kuozi+WgCJQKMeThUsT1hg4qB9piei9fTz+h1T9TnpBfM7CBGRurrSeGJbelJ9eOymMDMBOxAnbl2ni8buvvWOcId6XyfmZwsPRMqrQokaz7zF1eg3t1IfzJSZ/cSAnpuckZMJhS8wjNe0ySD89p1EleZ5rDF+3PX73wOJWOt/DOUDydYXHE/QiatVBsxMWYCi7Hhzkqbngm1h6tfizGijklDRiC1H/oAyhjH1zQvys6YK+NJet3f1wnwXK09D/St/FEn6e+YpDlgUDnrTSFp3v4+DwE9z0eNy+jjvWlHx8Y8pCyJCZjAUQT0RgucT6WAjpH+jABx0T9i0DiJ0YVxTnpHrl+RYYa5T+pgjf0WY+oI3TbK6c/PJkC7jPMY6cCLvvzbt8JLX0vnCMzT1Ha/RfaH0wg8cddm2leeBtMZmYAJmIAJmMAOAujkjGFv0MUvc6LmJ0pffpog7ahH32oCjyXw/7N3LkuS41a2rVYrTW2mGlQN8v8/MAaVg5bplkllfWuFa2eeQAAkQIIkQG6YRdCdDzwWXucB0LXooFRAOVpL15fOK25Wd/MKQfpqarhYen6GaziX0oUco+UbxXyLcXutHD2dyEySqVFhLf1Rrr+Mdx+nQAwlo4Ro2KnJk9qzDJIYMxVeZV1+xQv3zNAvVKZRj7V9VnVCf8wZ4hh/ZWgetazO1/EE5BjYurqTcWRNmZG8EB0SayWj/TqYgAncnwBzkeS8JRmJ+17z2sexgTkxjkHcFwN6hhxRuXGFNDVGxefSz6+0fzhk0+v+bgIpAdodfxj9mP/UDjkil9E2Y9uNn9O47vjdOyPPrVXam52o5zJ3aiZgAiZgAv0I9LQz98tV/5g+ajr94y/GmFN20tf0aBcNkchAXIzQFx5NAAMjbUQK0KNhdCp8VBZRpFAw7+RQpTz80W5GXTWTW2zSo3qjsWBvfKzcjmP13viufD5nwKN9wOvMIKeaDJc1aZNHtWPGw1xZauPxWFpDKn8Pxt7WcVLOa3PPM33iWdpCbA9LYxD30ff54z7+OFfjeBBb3buUju7VUQs29N1HEzCBexFAlmBcYcfXP/7x+omd6ASVnsBYUFr0o7EFMrn7iL8UcKCSNmniYFgL2BHYCcscvPamh7W4fP05BLAdpPaD3LnnEHFJryDAGIrs5mACJmACJmACsxLAlpDKVLOWpZTvdY2k9GTleRSgkjE3Gg6BXbqPpLguI1GsFBQyQjyHshWVOQQS/uI97w/5320I0D74q9l1cZtCn1gQ+o76D0YVWN8lqCw4rPjN2VEC49jSmLgnnz2ds7QLnH53fO1odESonezhXvNsnKtaHdSa9/bklTFUfb0mv77nMwHGkaVXJ39+4iXjUG9qcxinkXnu2K9y5fe5FwHqnz8cBvzRF5FzOSfnvBwLtI+0r/Kde9PzNXzl7ND4QTpp0CvQ0/P+bgImcD8CGhNUstQJKgfo0kI6ZFk5W9PF0sTLs4w1udcAIwN/+bL8Fg3ljePr/pdp448/DjdxxKT92QRuR6Bm4cJRhUaOWQtX5m8tb1uvS/7a+ryfMwETMAETMIErCTCPpfrDlfk5Iu3/+rOA/3dExIoTIYi/noZAKVsyKJEWht81g6PyssW4pPL4OCaB6NizI/X4Ooq8j0/tvBQYW0ZwpGKoWjJK9SCy9LtWW+Mn36WxXgrxDAoi7UC/jSQWV7Z58sOuCgwGR/Ibpf2L+exH7Z7ZUmdxHruy7c1eBzPln/6nXVRaQKO+zyIfBV3T9zXZlnHZcq9o+WgCJrCVQOviINKRrJkucN6ah9rnLM/UkvJ9RxKgz8y6K/rsPhvrQW/kiefSz1+/fk1PTfmdsqInbNEVpiywM20CJmACJnBrAjVz+MwADl+miUCAgQfHRC9hJ640FXztwNH33DEKKDJMaXVs7n6fm4cAbUzCJ20ht0NjntKMn1OtLhHz8XNcl0PGFhwWKl/dU/3vOoPrEYZ1DPWM9cSNw09OPzmEOE9f5XzNmN2fbF2MtAPtjpAzlXwzrpyZb+YppQ+7o9L2fFjXLlrvknyhNt/yembqmvsxvvXcOd5aBt9/HoGcbPs6t7wTi/ahOSM6SxkztPNrhMVB55F0SiZgAlsJMG7EcUTx4FBhPCIgM7DgQ+OO7kmP3KcQF4LonI8mcGcC9KU4h0smnKXMV/VZZObcGBS5MR7dIaisKu/amHqHMrsMJmACJmAC9ybAXKZ57Y4lPdyJCjQM5kBEmZICdjVMCbV2tl1dE33ST9vX3TvuFmooc/RFghQj+oEcKJynPxC4r6TsSXHRve8P3OgfbQejtJxXVxRtdiXq1R//9Y4uOqRHnkxRZPmLO2npH3zHAXFF3pU+bfGoncmllWIjLCa4ou/tSZMxVs53nJ+SL9QfGFNbVvZLTtmTJz97XwJanJIrYa6dRRmgNL/n4vI5EzCBZxCQfI8MyvylcSK+DQGdAZlECzSWyDAPEuRMWrq39zXmTwcTuJJA7CNaBKk+dWW+Rk876o2lvIpn6fos59E74/g6S76dTxMwARMwARMoEbj7BoBTNAw5bkqQrzyPgKvfeLJge2VN7E9bO+AwYmMA0Oq+/THPFwOGEPodA9iaIaFkqEdB0Spy9RGcr2vxzUfrc44pY3SG3G1sKDnOPpM45gxOJfrnSM5i+gr5oq3HNv7qH6+dGS9n2I+dFRgIj1bk1RaPqAmcMJQpDYwf1A1MvIMtpZP/Ho0grzbz2j2oRSoaQ3Q8ut3kc+mzdyEgB6qcpXJs0J9jW1R50zfBMJczfqk96j4fTcAE7k9ACypi/8+9qlfzFOMNfwSeqXWKarHlFbKe8nv/2nQJRyTAPBx1CfJIf9LiuhHznOYpzX96/ajvjC853UTpabGHvs96ZIyinFeMj7Myc75NwARMwARM4GoCpzhR5YlOjdNXF570X8bOFwaEWwz7NSvgRsi78/CRAEJ3FET5vCSEf3x6/m9ynEYGe0slBUrHvfHN9vxrfPj5XfG9y9gwyuICxtmebXVv26Kuc0ZE4mVBgsaS1KkoI+Pe9M98Xg4X+GPoIcRdJ3GnOkzSMp+Z11nSkpyT5ldjCEzFESM0vI/aXZzmwd/vRQDDmxwZGn9e49cv1QWN7fLKty5UZ9g3moAJdCPAAmLGgOhEXdLRNc7IMVm7OFpyU2l+7FagEBHyjebacNofTeBUAqU2j9x39ULWWhD0JcaJs8Oa/Ubj0dn56p2exl8tNukdv+MzARMwARMwgSsI6E00V6R9RpqnSkYzCAkIbmuGfRmgpRyuVVS6Yg4Otc+uxX2n65GTBMva8uFATQ3S1OPdHeIwe8ru0Nq2cNR9Z7anIxVXFPu1Vb5HMCRNGd7UvzEkxH4rA53S79W2cRy/yr085ZWMBcq38jXzERbMQTKiqixiTz1FDny2I1WUysclAzRPpRyRAdL2X47dV0zgRSAaX+PYuZXPq13+8qdM+vqNQ8npllO3EvVzJjA+Ac3xURaUvrSmA1M6jRNLJUXWIOR25C09t3ZNYxXxSzaTrMg1O1DXCPr6GQQwIH75kv8981kcqUf+lMhSHSzp29FWtBTHDNekW6ETawybId/OowmYgAmYgAksEZCtd+mema8tW5Q7lUzKWqfoLo9GRiftBihlKPdKNd279qzue8oxZYVijJJeY8hDoC6tSuTaXTsxxo9SuZ/Sbs4uZzQ4HZn2kYqrxi8MUDKaHVkWxY3TKP4+EP0ydSTl+nvJCKF4a44o5DgfFFLDm86XjksKfemZUc/jTF4yksY6UhlebcY7UsUjd6wxKsORuU79Tu2f+liqk1x6Pvc8AsiNjF20ldIul61UaJv85UJ0WtBmHUzABMYlwBzD+KBV4Dm5SoumGE9in2ZuQjbssUCDPJTe7rGHXhyryCv5R568s763h5efvYYAbXJJR6ePvb29XZO5ylTpW8z/JdmgMpqut0l/6xrpRZHBlZ9aQD9l8UdqCzsiW4z9S+3yiDQdpwmYgAmYwHMIIJvfPeQtJgeVusbIeFDSh0SLEIIwR7lUNgTOGiFIz8qYekgGJ4kUx1RqQI7f1xzOS8IgK/vu6kS9kyIxSVM9LZuMI0xAsR/0TvyKCS63Q4CylgwJ9F31X8aJNMQ+UFrFq3LKKIiyqjh1JG7i4q/E/C4GupwxRGMsHHLX4c55rlNfDp8J0JZKbTDeTftCXlDbgyd/URZQW1f7XprjYtz+fG8CV7QDOVBps+77925fLt09CEiGiQvQkIPiHMP8wzzDoinNRSo9/RyZLLdAVbqr5Co9kzuWZIncvVvOUU7+yAt/aTm2xOlnTKAnAdql+mMu3rioLnf9qnOMDepbR/fj1jL2XkDWmv4R92tnssbopTazJ329yaRGV9mTjp81ARMwARN4LoEaHWFUOug+zJEEFqOWdIvTnKgyCo4KbGu+9gg6PIsw+OTfo6JdyLmR1gHGu6XGm96f+47w3+L8kFFhb7q5vPQ+J8d973gd3xgE1pTvPbmkb81mEM/lN55jksstYJFSCi/GXP7ic5znu87FMV1j0N0dCAgLNQ4anHriBDeHjwRqjU1iXRLMxFhH2l9pnvyYA38zgT4EGPueLJv2oehYTOBcAi26NvN5ac4iHs1TaQkkR6Xnr/qu/CAzR3mvJj+UU/Nszf2+xwRaCKg9Rr0iPs952u2IbVD9KuZ3hM+lMWuEvO3JAzI+C1qP0v1jO8PGFRfZ7Mm3nzWBpxOgb6Gne3HC01uCyw+BONfMRiTVfZgn0YUoU1qu05yoQBxRSLy6chEGJTiVDKpX5/GI9HPOjpgODVXKRzyffuZVUWuBSa2GLR1Hhmo6Tc0za2kfeZ3+hKHzrgrFkeyW4kaJiTsSezOm7RPW2jf1S16OEMowjs8SWARR68SEKfcS4IaiqCDeGAb0WdfiEea16cXnZv7sMWR/7TF/tAQZqJfmGeJkpxD9lRXkmp9a0vG9JrCVgGX2reT8nAlcQyB9HT+6FPKM5KK4qFRvOmCe4bPmJD3TW/Y9mogcVamhYyldePF75ksy4dLzvmYCawRoW2pf9D/1Mz1HG8y9pUfXrzhqbLgi7aU0W+XspbhGvEbbQAc9Yuy94w7es+qQOUXzy1lpOp05CNBf0eMZ221LmaPOnMtjCcw815TGec7zx9wsee1UJ+qxVTZ37AhOCK0StOcuTTn3MgovTTSakGIsOUcKzqilePQ895DumkEwdhw6yVogT0thyTi+9FzLNZT/GgYtcT75Xr3qBgZMArDFgSHnBX10rR2t8VM7I34NxKVnaEMSzlLFu/TM2vmXgjb2K1npr5qwVB76ZM3OKPU7HfU8R42v9N3cde4pnedaLvDaO/JL2+BP9Zu7d/ZztQtSZi/nlvxT961B837O6EubYtyh3WvMsSO1lbDv30qgVm7aGr+fMwET6EuAOSPqA8h6OE8lt3KdOYd5HNlTho5U1ppZhqFMlJe5k3k1N7eKunjBrEYe13M+msBWAugX9Ekcp+qrHKWT8PuYBOS+K9+IxRgxYtgiZ49YjqU8MUbX2KCW4shdi+0sd93nygTos9a/ynyefIW2IdnqyRxcdhMQAeYaNrmt2bh1/yhH+nGL/tNu9dtY0icIPhvRfH9Mimx05Hy/eIMPKAlrjqDUgZruWJVRQKxqsXC/DNG5Z9KOg3NyKdRMmNoJ1+qUWUo3vebVcSmR7d/TfsfgT5ul3RzBmUmG9i3H3lLOpXjLmbt079I1FLMj2+NS2rXXmHhhk4bXpPxyKtU4U9Pn9R3e1KsCn5mfZFDkPGmlY5Huf13/uCiDNqLxhXhy+Y/Pz/A5GiA1PkZGM5ThzDxulXE0l6Xjj3YUMQ7Bf2/fP5OF05qfQHTez18al8AE7k0AOSZ1fER9C7lPc4r0G8kpzEF3CZTp999fpdHcyrcoz6is4sF3nsOBdbXzSnnz8b4E0BWQ66TrSC9DzlOgPeo1clwn0G8x2BM4Sud4P9H5n8aGztE6ukoCJf6ygaFvxPG9Mtr3OYK5YKu+UpvOHe+jv8F/C/c78nCZXgRoF1r8YiYmYAIvAsxhRzlSJSv1loGiTlCqR+lPXP9sqS495fOnEahZQXtaZgoJ0YBrG68cFmuChxQJkkydp8rGWhy6Lz2iTC85q9KOI+WbPOVWUtQIoFKCMGzscfqkZYnfLdRFGvWfqdeopGBgybVnORy5jgNJCmx9Sh/v1MCvs2vtUvdxJH/pSsi0HPH+3OdXm6zvu7k4jj4X6yWXFtcZI6VM5uot91w8p3rlHP0zl2a8Jz6rsSl1eukexouZBeqcsRHGWziLyd2PzHH05T2BOSUyjm2yZr7Zk7afNYFIoCT3xHv82QRMYAwCzD9ruhFyi+YU7ZwYI/f9c5E6k0kh6nTs8GNOFY80ByXZL73P301gDwF0hbiQtiTnqZ3qGNNEXl+ybcR77/CZvrk21t2hnLkyUNcE7FW5tpB7Jj3Hc9gh9toy0nif8p32Rz/dq+89hdfdy4muJBv33cvq8plAKwHmm96OVOYvbSoo2WFb88n9UUdaej7Onac5UUvC4VJGn3xNCh8MGKRR+qi4aGS9ko8cvSXhPTbytXxSvuhklJNi7bnW6+Qpx4/zJYE0/qZia3q6/zWIvJw+RyjnxEnb0KCidH0sE6BOcMJJGJZyUnqCdpNzppfubzlPe6f+atrGKx/fvv9OIt+1mrk2TdpJbuKhHxByfaQ27r33KQ818UiR3js+0sdZ8U0biJNjLg+1Y1Pq7M7FNdq5pxljevI/QrGmXWteIn619575dlwmkBLwOJAS8XcTmJ9AavS9s06ueTNXa1xD3lNgnmVlOYskOZZ0Wt3vown0JIDOsWfRpWxFzNv89dLfovzZs7w94qKc6XjWI97R4+hVZuJZ03VHZ3FV/rBR9KqHq8rgdPsRQGawbt6Pp2O6HwFkbr3lhdJhc12yd9faWYkLeza2/KX4uG8tpGlqkw56En/xDYNx7jzNidrrNYAjC3ZrlbT1eqr0xXh6C84x7rXPEsRyjXdJQacO5Zxk8kmdU0cJKKzeS9OijOkuVJWbfObKxvXcSmc9Vzpqoi3FWXqu5jyKE51eadQ88/R7qEPaQ0/Fs8QUwZs6yvULtXcG5hoFmHtiO2YBQqsDnTZPH1SacQKBx0yGpDg+amxp6WPcKw6l+uO8dhvCZ+3+Vx19a66XpfSPvIbTl3aIoDNb/R/JpSVu+gx/tJPS7ual+GhTMaCc0bYVqBeNFTrnownsJUC7koLgvr+Xpp83gfMJpHPHWg6433PJD0rwmEnm/ZFzfzKBFwH6M39bdKAcQ/RK9FWNLeg0UU/MPXPWOeXprPTulg7tBFnPoZ1AyV7YHpOfuAMBy1F3qEWX4QwCsmexiLFko90iY+D3iLJKrizIDCX7ei7Nl2/q24d8YscnnRjPDwtdLtXO5/Y6UhEOtzgMOhdjqOh6C85rhaMRRYeNnHZphyg5GVMjHc/LwUTaNOajAh2YXXtx1ytpq2On6crRm57ne+mZ3L3xHOVd6szx3tbP1AEd3JN6HTnqEIdHbLsaJOO5utjW74orcXJ3l3aI5u6N5xjQ6Vex3hkrl9oo1+Jq/Bgf8TBWx34Srx/5mfa7J6hcrfUXJ8VS+q9+W29sI85ZFjbEMV31Hx31JSY+/5kAbY8/xhJYxn75+e7XGfpr2gbllOUO4lL7W+rXpfh93gRKBOQ8SOfC0v0+bwImcD0B5gQMupLT3t7eqne0MdfEOf/60lyXA8mM5KBVbrwu1/dK2XNPv/pUe8YGs2dnNWNETiZF10RPk+2nX87rY0IWdthHoEYv2ZfC/Z5mnLL+db96dYlMwASOI1CyR6PDRBmj9a2KMce18xl5QS5ChuBvyUaXOkxzMtE+i3UswcpnJh4yvzXI+QZ0h88EJDi/DK3/+nzDjjM4Nom3tLsGYZrGRh3RyLi/JGhwTxrUUKnb2o6QxlH7nXxhPKjZ/l1SqPc6erc6y2rKiEFUu0pq7p/tHtqPyqdX0qZjAu2Jv5q2FJ3a1Gt8plT/e5iV+oXipG1orNO5miP1Th+NoeQkjfeUPqufiHHpvt7n0zJsjf8Iowxj25pjkXTjGKw2dKXBYQtD6l9O/yhwRIFnS7xPeYYxiTGItsBcU5o74bHW32lTs7Wfp9Tz7OWkbSporNJ3H03ABMYjwNyC81SypGTGl9yxvHiO0tDnU5l5vFKenyPmWP6Yj2EZ5bjzc/OMFJFtJBtx1IKAZ5T+VUrm3SPkO8YH/tCX1/SWFt7oAMi2VwbyUDLMXpkvp31fArU2pfsScMlMwARMoJ0Ach16Shqwt3MeneQIGShNj++Si3LXtpw7VRKS0tea0WhkvFp4a8372ffTIFmR3CukjqVSvHQG/pYEWzpKzgivOs11slJ6e8/TYUkX51Mpzxga0vzW8ljLH2U9SllHYcIBcsdAfVEv8KO9qe3Eskopj+eWPhNXqQ0sPXfUNcq1RfFFGYcNTHpNSK8+3XdRxhK3Xsox5T/bCAZ7cWesk1OCY2ubXGJ05rWcwEFfeaKxq4U77XhpPoPh2u9CKL3cGKdrPprAVgK0QY1RW+PwcyZgAucRKC2oke6F7L+2mhtZ5G9/Oy/Ps6UESwXLOiLR/5i2U2RNZKYoO/dPdcwYjzQivrj+2tWROgJF5Oc9C4VHKIPzMA+BOC/Mk2vn1ARMwASuI4CfA3sYx3QMxc5NkN30ulxuT/lUJ+r2bPLjsb++P77VEVtKm51WS8bO0nMjn4fV3pWHOAQIaaNfK3epfpYUIzrS3t2da/nKXads6sS560e3i8i2xaiey2t6Tr9xSPlKdZI+M/p3ykRgQO6tdB7NqNU5SH5a+/ERjvOl/nFUe+mlHJ9tkIm/lYIDN4bSSqx4zyyfX23zlz/nmG+fFpnMUoYz8skYlTrPl+bBUp7UB2XQPXpeKuXD5+9FgDHJwQRMYDwC6F/IjGlgPikFyYyl6zp/tKyrdO5whBWLmHJ1cYfyXVUGFgOU2iEGNZizYPYp4eiFlhob9tqFRqoPLy4cqTacFxMwARMwARP4SED2q9SJuiQDfoxh7G9TOFGjs6k3ziMcMr3z2BofAjNOya1KCAp8T0NtNBzTcRB+o3OP/JYUqtayt95/VbppPl8MXq+TwljOKzS1giO9t+b7y2n3wwhDnUrpkIOHe3Q+rZOaNM68J2VxtNKJIt9zlw79sbWttd5Pu2l9plSH9FnCktGu9Oze82qfe+PheeqRMpyxc1KOUuohNbrxPRUiepTvyjiYl9NyXpmf0dJm/NAYwrynz1vySdvRfE7fnHnl3pby+5n9BGg3jK1a7OG+u5+pYzCB3gSYK7bKQL3kv95l6hEfcyBcrpj70l2TlMeLyLbX6lodaoHzGXL79lL0fVL6Q99Yf8TG2EA7vgtTGWd/lPDzJ8aMaGv6fIfPmIAJmIAJmIAJHEFAcke6gGtNBjwiL0fEOYUT9YiCK06cSDJu3qVSKRtKCH9bFD0528Roz1EO1N6O2T15Gv1ZBh3+qD/x25tnDKY5o2l6HgPOiP1ADoTI4XilM78bIOah5vOeV0DTb3L1lksXxzvtZm/ACagxUcc0TvJFqM1b+vzSd+Ls6XB8TeL7d05igFh6BSv5pr+Wxs+eZVri1+sa+VWeGYsIWuCBMbPUNnqlf6d49rCiX8fxj7j4G3WsvlO93aksLCb55z9/2/2WkjsxcVlMYCQCyFXI33rrSilvPRfMldIY6XzUgxjHesi5teVDnsulx0Jj5KOSw3vPnF+btzvfB/Mj9ItRmVHWo/u1dCHabZQpR2WyNV9wTJ3FyMv0ZekyW+P2cyZgAiZgAiZgAnUEXnLH622ydU+McVe6iSgn0++3uI9R1s25QKhCeAXOHQWss19pmVYECqaNvSmV+u8YVM7aSVefq3PvLBmU6Ldco9+ebViJBDB8kYc4wNLmNQDnDDDx+aXP9N/ahRByeC3FV3ON/JL/WJ74HOXVTnWU1SXHYnyu5bMU/J4KLzuw0tVQtXnSTuJ//OPja3rT50vMuI/2ijFwxEUKsRzRYKl8qz7iff58DoHInr5HO94zppyTa6cyGgG3mdFqxPkxgY8ElnaJM/bThzU/71mc9zHVsb+pvORSctiZOV6SQZeuoRPEufvMPI+cFu3YIU+g10+Z5GP/cZZ2y99WZyp6zpU6NyUpyTOlMkk3o0/SBsXgBxV/MgETMAETMAET6E2gNF/3TqdnfOQ5/u46Mk9q7368ExWDNsoOzj6Eqzu++kNlrFXoSitrWxsnwqwNvq3UPt9PR77aGf45V+ecoQ3hfCoFrvEnBannalPGhaW0MehovCCfCrlXf+naluNaPhQn9/UKjBmMA7nyy9BHWnGSUR30ygPj1ZKRqjWdV17rd/YqftqUDA45Hrpv6SjDUc86WkpvzzUEhd51uSc/T36WdhPbzOgO+CfX1ehlj3PU6Hl1/kzgaQSQM5BRSosGkUHigrqa11nOzDDdTTab05j6oo7SHXEz18mZeaf+nxaQu890Tu5po0e/CWqt7t/e3tZuKV5Hj+NP+nvxRl8wARMwARMwARN4PAHZu5HRtCHnr1FQ5bVxcqBxjMY70eNcTnkj8lkDgiQBAyWGppnLUqoDyshfXNVbuhfhEgEVpX6LQE8aPCeupXR8vo1AqzO8LfZx7taYlL7GsiaHKKG0272BPGgszMWllay6Fg3UvceP3DisdHU8wsBEujmnYa58cu70dr4xlihulXXrMRoga+Ognkmf9lC7CEVxq43MNg5SvywEkJCg8vh4PgH6YK/2f37uneLVBBi33I+vrgWnbwLrBF6K+beszMXTUf6Qw3U91jnvQJ5OyzubHAX5lyz1eu0vZcrJ03PW0PG5xkn3xHC2czK20djn1tjTlnvqZ2vpHXEd2aj3oucj8uk4TcAETMAETMAEricQbeB/jV/iZ7IpZwbbVwk4FfgrKQJbnW7vkQ/yb0ZFrQUdBlmU9XRLci4OHCJbDLi0EX576wjHTi6fTzpH++SPvkkdLvVHuNAn1+65mh/GBfLYkk/K1dthB4fUeFNiEx2b1EUcE4mDOuLIn159W4pr7Xxu0Ur6jMYt5R8+W/pujJfnU8Y4BktB6aXPlO6vOU+b6BHSOqqNk123PLvFEbFU77H/jugoQxagrmO7rmXm+/oRiONMv1gd01MISHZ/SnldThOYlQDOk5dsX37zisrWSy5SfKMdkWNjmL281Ct/WxbyRQ53+Fwj0+Cc6y17Is+SNn+0J/56p5HWj2xiNfYWPVvDR/f2PKqNwr5Wh+O+LQvte+Z7LS7VO/dpHIn1jm7XQ19ey4evm4AJmIAJmIAJ3IfA4vZROVXjO4FVdIzABAmHCCoyouseH8ck8DKQ/3CmprmMAjT1rHaQ3rf2nVWNPZxIa+k88brqUGWPThkpCKliQF3wp+t69soj+W5Z/co4o1dEo7xheErLQ/tFWZKyzPWoSPEcIW3XLcpjZMaO2RhgjOMzLdfWvkQ+qUuF2D85F69JSbxKEWcO6GWcoM6WHJHiUXOEYevuStLPta+a9LinVN9pO7uqrpRH2i8GFAXyzbm0X+m6j+cRiPVyXqpO6Q4E6MfpXHGHcrkMJnAXAl+/fn2XEzDkIwcw3kcZHdnuiX0YGT8uXLuLLPLUn2Vp6a9HzFta0E3ce2T62nKkuotsaDV9WfppbVq970OHK+nWubTkhOSZVKfO3d9ybs/4Rx3IVpBLM74OmHpBb5UjOXe/z5mACTybAPNH7zHu2URdehOYm8CiE3WpaBpIfv8dZ0Q/Y/dSmr7WlwB1KOE+xowwLOc4x9w98f70M8YAKb0ccRrYwZ5S6vs9rUsm+zRIQUidOOl9Z35Hoa0NUoR1P2XGKIHR6bPD8vWbJ7qXdqg2GRVZxi7aa87xxzU9o3h0lLOS76QfA89EA5DaP2UlrS19Qc8QVxqIk0CdK181u1fTeHp9p056rLjv5UBVuWgvtKG0reh6eizVfXpf7fdcO+XZK40mMKFdqg33LnMtG9/3mUBcHPH5qs+YQJkAc0Gcg8p3+ooJmMAVBDS+MwcTJLtJf0L+lNwXZVae0/kr8n1GmjCR/J3K/Wekf2QaqrtYp0emN1rcaue5fJVk5Ny9NefoK9G5R7tKHfQ18bTcQ7vN6S7UO2VfkrF5VuNBS5q97yUPlKHWViAnZK7ce/K2pa/AULaOlrSpF/541uEHATuOfrDwp2cTYHH5COPzs2vBpTeB6wkgWyL3bHaiUgQmVyJhh4/DfQgwSeA4ReCnfiXI1paQ+1ufqY3b99URWJroqRsUy5yRdUnBrUu5/i4UtCWFUjGhFC2tKEXpUVvVM7VHKU7p/YxpS7vxeA6FH2flWhmkYK7dl+YhfictypirH87FVbXxuT2fGd/TIIdtej79LkNger72O4azI8KZzmUJ3HBcWv3Otd7GhxZ2pN3beNWSvu/NE6APaQFG/g6fNYGPBBhrGHdqF4p8fNrfTMAEziIQZSlk3PidPCDzxrAmB8d77/BZ5V/SZWYtp/RjdIOnBfQgFlnK0SXdpjcL+os4R8YsDD8qkOaSLF/Si3hOPI7K25Z44Yd+WaO7puPXlvRyz7TkoWXBRWlBLTLUHcecHNvac/RX6jcuSKh91veZwF0InGk/ugszl8ME7kgAuYT5cJcT9WX8/dUCxx1byJ9lQhlAeELJ8eq8e1UySkJOiUBZOrK+UVC0y3mN6FWKJenWKFFwqg1SQmVAWFK0c3EuGcVzxoea/OfSWToHl5xRIvcM9+Xylbs3nmtRguNztZ+PNKCkecD4sLSSG560h61tIk1vz3fGdxSEJWfvnvj97EcC1D1GCf7gnhsT6fPc52ACawRa5tW1uHzdBEzgeALSqei7BMlW74r5n/OCZDjmiKPlouNL256Cyt/+5Ocn5LRjru0Z7+eU6s+ovrfIyfWpjHmn5N4lvWZPzkv9hb52BG/ktBqdjr4d0093yu4p81HP1u7cpWxHBdmiaDe5UMs/Psv4i44W6yNe9+cXAcZL2gC64T//+fr9WK5o/DInE3gCAclpTyiry2gCJrBOgLlxsxOVAQUhZBSFZL24vmMLART4rUGTjtvIMkEUfITUsznRf3EEpooJim0PY4Pqn50xKCtrK1rlWEAZO5tFrCE5tbQSPl6Ln1Nu8drSZ55j52hJ0U+fbXHW6tkjHOF7xgLla+mIQUGGxaX79lyjDZ4V1pRzKaa0B/6u3nVIn1szVpzF7gnp0J/U3vXK/LTN6PoTeLiM7QSYY3NvlGiPyU+YgAmcSQC5n5DKkczDUf71HNCnVuSw2+Jw6ZODz7HIEZHO+5/vPO4MPGhjOV3wuFSPi1nlyaWALtoSpJOmz6T1VeNAJY64iBN9R/Wfxj/Sd8YidFX1n1Le4phVumfP+SXdZOsYCf/ULqE3CO3J692epW5r2/jdyu7ymIAJmIAJmECOwGYPGcLgDAJgrtA+V08AAXOr80S7mmZRFuqp9L0TIwr9SYb0vrEvx4YjJ2eE5dzSKlmMt3KOpimkSkl6Pfe91qEYnyUPcKN9pit8431bPlMntN8jA0ophgvqgHKkzmPKpz7Umg+c4HtDanA42gG5dZypKeceljXxt96DcQbFlDLLiCrDzNXzKsoy7TIaTcgvQXltLa/v/0EAlvT51OhE/1cfU1/Yahz6kZo/nUHgjAUQcrrQNvhjjM/N3WeU12mYgAnsIxDnUuRfh+MIMI/CWzrNcSm1xyx5T/Jfewz7nlA7RO6TTkVeJPNJFtmi1+3L2banld/c07V6kcpechxRZ8jI/NXKaMzfYp3L28jnKCP1X2qj9KszgvpxmlZtvabP8T21gUgGz93rcyZgAs8lkOrszyXhkpuACUBgk6UdQVuCvzHelwD1jNBaqyTkSKCMuK3kyPw4B6OrBHeEAhSgnHLEOf6kICmPRyiCLW1MyqvyQf6iEgVPFCMCzslc2X7QL39S/OU7tl8hj5SZfMtRSj7j+a0Gcn7PtYewp/reXsq2J2Mdtj2Zv5t2Qpx72kA+5v1nZehJnf+0Aa619If9ufkcA+nzh3Mo5gem0bn6+UmfqSGQ65+cKxntauL0PdcQoE/Qb9NFMD1zQz/UfKRjz/gdlwmYwDUEJPPF1OXMYkwhMDdInsnNHfFZf/5MQLL2qOykI2/VVT6XuO0McwpOPuQPFvMqP2ksapdX5ZP8SB9V3jTv1simNfVP/KXyK02OkpHjuZbP6tstz1x5L0zQCXPyx1ll6a0jwpM2QZ2rTXOMOs+VzGdNm3Gipq/NWj7n+3kEvEP9eXXuEpvAGoFNTlRPjmtY73Gdet5b13Jm3YPIPUuxpBxRYikXR5U+VYqX0kE4j06cuIMVYxQKHn84Jml7R+d9Ka9L16KzhM9apaz8Lz27dA0ee/us4pejT98xGswSeF3yyEGKes4ooPY9Au/UmCRj5FYH/8h1clbeckaos9J2Ov0J0CfosyzW6P02CQzD/LnN9K83x2gCVxFAVkW+yhnrozMoJ7/WOnmuKtuo6faSi48qH7IW7UHy31HplOJljll7o8LLJvByssZ2Woqz9/mlti95eW3xp/TEXN64lsq8ufu2nCN/cR4fvT3myoiumtY7zGYsS658OkcZ1Z50zsc8AVgRoi57t/aQL7nPPolAbN9PKrfLagImUCawyYlajs5XTOAHgego+nHWn1ICKM5ril/6zJ2+165ijcpbTpmmvWEEwPCEsjqqoyf36jYcvtqRurVuo0N5axzxOZRIBEfyRbBSGens/4yxjF3DucA12I+ojKavec7l3+eWCdhIs8xntquMvfRZ7YqpzX+605vnOEfIOVDeL/ifCZjAlARyMpp291GguNML5wQyLdeZc5kzkBNHlAmmrIwBMy2Z+yrdRXNOjSORvNJe9czROHM6X5omeZJTJ7229l39be2+rdfFC2bo/LOGtI3y/awgXTRNr/eYGJ3daVpP/I5MKjsNrOOcBI9ow6oZO57I0GWem4B3os5df869CRxBYF5J7ggajtMELiCAcPrzz9d1RQTiq5SG3CpWlOCoCEtAVx6XlOmrV3MvNZ8lJR3FBGVUZVyKJ3eNuI9QZsmXDHm5dNNztCUU3S0LKHorwmnezv5OnWgnPrvUtFAi1vGSsYxrvV7NfHbZnd4yAbWF5bt8dRYCjL3MWfRZ5qdaZ6qM0Bq7ieMso/QsbJ1PE5iVAGOBgozLkpHWFs5JhkIuknyouHy8LwHq+uvXr9/fTnN2SZl/0Lk0Jy2lT5tmDosy7dL9W68hS6v/rMWxlG+cQTGv9E/Nt0vPraVZe722DLXxXXUfbRR21P0Z3CgnslGsu1h2ru3JR04e3xtnzN9on5mDpJPCVLoq9VoKUVdV3XOv5qnScz5vArMT4E1xe8aX2cvv/JuACeQJlGfM/P0+awIm0JnAkuDaOanv0SFEE1hdlVMgvt94wgdevYpQLgUTYSUqTFFx4j6tiCxljefZxReF/tK9Z51HSVlTNsg3fzKyxXKv5XMt7rXn167XtlHaE/lG6FwK8CC0lHEpvvQa8R8Vd5pW7nta3+lrPjHmyHiTe17naMPEhVGr1rClZ4860kYJV7127qhynRkvda/x7sx0ndZxBF5j97/e+zX1iyE8DVrRr/EURwp9nPNnGKPT/Pi7CZjAcQTiGK++L7lUx1zqubeV5O7zufsSQKavlRN7U2jRCTWH9c6D4ktlaZ1vPaJTqlzSI5mHkauRZSXXtsb75PvPZLakb/R2eObeGHCXeoZVyvKls5cX7TKP0XfoK7ULBO/Cy+V4NgHmYPqHFsQ/m4ZLbwImEAnYiRpp+LMJ3JjAFufc0Tjk6MLozB/KS+m3B1oUG5Tjqx1pkR3KR20g7xhQcspOLo6RDG4yUqheS/lF+ZZwmrtn7zk5NPbGs/X5Nae2jKu0+RhybRaW4nmm0SLmK/1MPkZbqJDmcfTvjMdypo2eV+dvnUCct+jHCozjXKOuMUBppz71/3pF1JeqBRWKz0cTMIHxCeCoUZAzLJ3vdT0eGTtGmedjvvz5fALIiXLynZl6q76Sk1t75Jd412Tp2nToU7l+lTtXG+eT7xvJmYZ+xBgrvaq1XqRf9WxvrXk4637au5yozFH0dcmnyKSl0KsfluL3eRMYjYDkNsYF6+qj1Y7zYwLXE6i37F+fV+fABExgBwFe3yJlYUc0hz4q4T4mggBTUoDjfelnOSIxYqflJs70XPp8z+8tRgmlS5lxSi4Z3sRGz1x9lBO1lA+UtjOMFkoj155Keet1vtaprdW9aoew4dyS85xrKluv/G6N5+Xs/3WoHd9by3Lmc/TZtVWtWvBCXY9S32cymjGtqGQz3tNX49wjgxX9nbcvOJiACdybQDoG1JTWxuoaSs+5h/n/7AVrcUFQDemjdqOuyUk1eau5xzJWDaWP90R55+OVY76t6ezoyXsdu09pB2KZOp3PrtNjWopjNYE+BLBnyS7TJ0bHYgImcCcCdqLeqTZdFhO4CQE5orRCcmuxUIr4kzGLeFDMURa0ymxr3C3P9VLOUH4wsmkXU694W8qydK8cgkv35K4hqPYOsLnCidpSJzhbxEwKLc/zl2ufa07q3gzX4qMf8butS68mXIvjadc1/iyVmwUvBNovfy278Jfi9bXjCMRV/LmFL7lzx+XGMZuACVxJYEt/l9x7Zb6d9ngEkLN4PTwyITKgZMZRckr+kOG3tPlcGbTQjHgdTKCWAHJz+tMpNc/Kqdi6eKAm7hHvQe/csrB7xLI4TyZwBAH0OfqI7DJHpOE4TcAE5iZgCXXu+nPuTaCKAALBFQ4YlBMEkVblusURVQNAjql4L8JRa77i87Wfcw5C6kOvdVyKJ60zrczGuDCigUHK6FKZ0mt3WumXq+u0vPG76jf3HO2TldXRQUl7HU2opx1i/L3CYR1ZzvCZeq7pt6pjxgkMQ7Clrej8DGV1Hk3ABEzABOoIIDv1lnvrUvZdsxDQ/M+i0NHkLfLWQ5/ygrFZWuO5+cSOsLZ4YK9jsEY2P7fU/VNj7KCfesFOf7aO8T4E+KkVzbf3KZVLYgIm0JOAnag9aTouExiUwJmv8sVRkL5Wp4dyfQTaM5w/lB3lTgayaADhtY7s5KtR3jCy1dx3BKfaOGsU3RgXZbqToLpViae/5EKuvmk/aku5Z644R37IVzRyULfiMWr/P5tVa1un/llZz3M4VB3GJaDdw+Pm0DkzARMYjYDmyda5YbRyOD/nEUDeOvsVv2ul2yuf0A/8Kus1yr6+RGDrTtJWvXUpDyNfo49q8cVWViOXz3kzgV4ERrOx9CqX4zEBE+hHwE7UfiwdkwkMSwADDYqCBOijMlpyiuFYrXWk5HblHZVfBCU5gFrYyPBFvrSbkM/RicR3BTm+ohKja+w0rFl9rV2oem7EI87A2nqmPR5tODz7VbOtgrfaS82uZNV3bG86N8JRv0GMcp46f2kXOJlq28YI5emdh9LKb8aGHLM0/ZRpet3fryHAmP70tn0NeadqAvMSqJH55i2dc340AeSBFr3qqPww/7FrZ49cSjmO1gWOKr/jnZ8AbRed/s6BfhrfamR94s617bKZgAmYgAkcTcBO1KMJO34TGIQADh6M9Rh8pfDKidOaRTk64w66JaEcBbnGgVJywrbmr/X+6EzN7agjPu2qo8xLZUVZwSlGEHPdzzFn+FB9vD+U+QcXxZG5PMyptTzSBigrDuFWh+OWQpKfM3Ybb8lbfIZ++O3bt+9tLF5LP8NwVINTqU6pB3ZU0neiIp+W7Y7f6bulHRaMFfQH/n7//XPpOX/GYoPPKftMDYHUMFXzjO8xARMwgdJcaTImUEsAeapGr6qNT/etyfHch56EfLI3/at0PpXVx/EJIGftbWelUhI3+hft8M7Bb0q5c+26bCZgAiZgAmcTsBP1bOJOzwQuJCBnRi4LKBMStDHc5173UqNc5+LmHM4s7bhCAW/Z+VmKs/d5DFt7jVswKjlNyC8OMIwPNQ7smnt6M9gbX85JHON8OQx/++nr16/x9GGfqc8exp7DMvifiOFSW9/0n73t9Ojy5OJ/jT9fqsuZi2O2c0v1pPGYsZeFF7H+Merw7NLzs7G4S36pL3bfjDiH3YWxy2ECTyAw61z+hLoZvYzID8jRZ85H//u//9vVoTXDG3ZGbwd3z58WJa+Vk/7QGnhGC235eZ27vyHAu75bW4jvNwETMAETMIHPBNoljs9x+IwJmMANCMigf1RRojOAzxiPotOAdPnOjrwlJ+RR+TszXr36VDvNIhvlA8OIwkxctEtybeUw5dui9IpJy7HFcd0S7557Y/22xkO7mTXQ1tN+P2tZavKdW4ySPkc/YEyQMZTruTEhfc7fryGQOryvyYVTNQETmJWAnFF6q8us5XC+ryfw0t36/FzL2o68Nbl+iQZx177RZykeX3sOAcbJGn1hrd0uEUPWRk7nLTksjOOPcTkuJj9LV13K555r7Fpfe4vWnvj9rAmYgAmYgAk8iYCdqE+qbZfVBAYigIKC8pLuEkRhesLq/CUnCc6U9LWnM3GpcVqyk+tMxRQnFQ76GoV8oG6SzQqGLDmrszcMfJJ27x18+QqSMTR/1WdHILBn8cMI+XceTMAErifAHH73XU/XU3YOWgnIyZl7DofWnnD3xbF72PjZzwSwA9Q47XGg7m1byN6//PLrd707TXf2sfpMXftzTfqMCcxDQIuZl2x085TGOTUBEziKwF+OitjxmoAJmMASAZxAJSFl5p12S2Xee20mLmuv6arZobeXV/r8koEovffo7ziR94SZnTlP2n1j48WeVj7es96FOl6dOEcmMBsBDPYl+Xe2sji/9yFQkpG1c3prSffsFNyapp+bm0DNYsseDlRRei1i/PK+C5XXZDNG84e+4rFalHw0gXsTYByoGXvuTcGlMwETWCNgJ+oaIV83ARM4lEBJaT800cEjR4hDeZs5UIaSswzFl+t3Cy2OTVZZ7wl7nbB70t777EyLAfaW1c/fi4Dnq3vVp0tjAmcTYFfTHeWfszk6vY8EejgqS86idGfex5TXv3neXGfkO34Q4K1Ba6GnA1Vp0f71lh/GaP70Xff4aAImcG8CPebSexNy6UzABOxEdRswARO4lABKS+owtJPlp3flLTohEepmU+b4DZY0UI61XarpM7N8//33Osdo7e/8LJXbfWSJzhjXrIiNUQ/OhQmYgAmMQIA5oeSoGiF/zsO8BPY6KpfklaVrNcT25q0mDd9zDwIsMK352ZUjxtEj4rxHrbgUJvAcAh4HnlPXLqkJbCVgJ+pWcn7OBEygGwFWe0ZHao0C1S3xgSOSowxn6t7ffLmimNSrHMEcX69I+uW2uzBYrb+0w5RrrLDeu6qfulTbuKJe96bp/r2XoJ+/isDM/e4qZk7XBEyAhXH7f7vPHE2gRCC3aLF0b+78kqNz6VourvTcFT/fkebB38cnwNt8al+laUfH+PXpHJrAjASYr/b+BviM5XaeTcAE6gnc732K9WX3nQ8mwOQ4266+u1cXDjdecyYFynX00/cdm7CZNdDPMO7MXIYW9mq/qbOlh+O0JR8j34szPQb6+h35YHjEcU5b4LONPrHW5/qMcY+d5l4AMFe9ObcmMAqBu76BYxS+T88HMjaO+q1z1JITlmt7UpLY5wAAQABJREFUZLSnyP9Pb4N7y1/7MyVanLs3PT9vAiZgAikB5qt//OPf745U24pTOv5uAiYAAe9EdTt4HIG7GuzvUJE4Gawc/ajJl1FkXgeqSjKKASV1bCp/vY84UjE4xb+eaXhHS0+ax8VF/dPmMEDagXoc5zNiZgyzMn0GaadhAvcj4N9BvV+djliiPTtGlxxYzH/xbUEtZd/7KuCWtHzv3AS8Y3nu+nPuTeAuBPbMpXdh4HKYgAmUCdiJWmbjKzcl8NoV9+WmpbtPsc5yeN2HmEuyRmDrCv21eM+8bgfqmbT3pYXhHMfbKIsI9pXGT7MAy8EETMAEWgl4EU0rMd+/hcDSbtK1+Fj8x89NlAJyDDJNa3DbbyX23Pv/8Q/LWM+tfZfcBMYiYDvkWPXh3JjASATsRB2pNpyXUwi8VtT+ckpaS4nwesCl309cevZu12CBgTr+XiQOL847mEAPAnfoa7UOVI8tPVrM/jju0Ob2U7hHDHFuukeJXAoTMIEzCGxxPJ2RL6fxkQA6yNMXyqB3LTlScYi2tmfvLvzYzvwtT4C+d4eFrvnS+awJmIAJmIAJmMBdCMz/nsi71ITLcTgBHAuscuR3ia7cGUQ++G01/b4Mq395he1rh+wzuyT1we8PRAXKr4A6vEs8IgEUc1YTxrY1a8FrXi/D+PLt22/vRZx5B4D6P2Wg/jRezlR3Mkj+8sv1i3Zm4jZSXmN/GilfzosJmMD4BJjHZp6HxyfcJ4cseJKMMfNr29Et94Y1uaVFJqP9X6lv72Xh548nkNpE1lKkTc3cR9fK5+smYAImYAImYAJjE3imx2bsOnHuDiKg33u5SqFbUhRQ3vlDOXiqwR3nNs4fGZ1seDqoIzwoWhyoMozdodg1r2rTOEd5Kf/oxgbySNBCEj7nxuhZHeFrBknK6zAugR5G6XFL55yZgAkcSQC51mF8AnG3JDsxZ9XDer1+cG3R4dqCPvQ47qmRWcdvHc7hGgHsG4Sc7L70bKuO9mQbyRJHXzMBE+hPYG0e7J+iYzQBE5iFgJ2os9SU87mbAEryFY65JedpWqgnG1xQvn755ddmJSxl6O8mIAJ3cqCqTGvHaESj/KPvcK918mLUxLg5o1JDnmdwaK+1rSdep/88cRx5Yl27zCbQkwALg1qdCj3Td1z1BKR/sJCT+RpZ4+q3FtXn/nUnuuZZ8hG6NDp1XGSE05RzbvOtNTf3/bQ7vf2GkqwtiIylXXPGx3uJt1ZfiM/5swmYgAm0EmgZm1rj9v0mYALzE7ATdf46dAkqCaDYnancoVjw+uBapZbfmTkzf5XYTr3t6eU/FfbNE9MOxzsVs6Z/RCcqZWcMmnVXRVp3lKN15Xoax1XfccRRN3epi6s4npkuc3jc2X1m2k7LBExgbgLehTdX/SFfsZDzhyN1rjfjRIfmGeTh9eWLd1qfwXrUNJCRaHc4OLXYTLIuTog//ng51pGjkH/TRZ0443mV9pqdxA7UUVuA82UC9yTA2MTPrTE+XbEB555UXSoTuA8BO1HvU5cuyUAEWg393oF5TeVRT3ZsXMP+yFTj71sdmc5Zcbe8wio1RvD97e3tT2PX67fZZlcGWIlOn03LeVZdOJ37E0h3Vty/xC6hCZhATwLMtzWLnnqm6bj2E4iOVGJDzuAPmRKnUOoE2p9inxiYs+TE6hEj7dfBBNYIREd6bH/qK9qhKv0jHRNpt2uyvB2oa7Xg6yZgAkcQYNzC3uBgAiZgAikBO1FTIv5uAjsIoGjzt6YUxCS8AzXSOPfz61WNvL7r3zZ4nYv+sNSoS1YP3iUgxLfsXuT+3PjDOf5gg1FiVGPgXerN5ZiXwNk7euYl5ZybgAnkCDz5pzlyPGY6h6Mn7qwj75KfcBQhY+Ek4m+URWm8ccTBBK4kEPsMfSP2o9yrsbGVLOlq1lOurE2nbQImwPzOOOVgAiZgAikBO1FTIv5uAg0EmFxZpbRnZxS/IVMTSIu/FodKTbxPvkdKHqtlcWaPYhB5Qp3QluGN05Og1z2t/eYNu4dzxiv1xbgaenaOrQ5UygubnBM1soARf7O2+bXyxbL6swmYgAmYgAmcRQDjf7rj6qy0nc7xBORQJSWcQFe/SQjZt7dMhBzpYAItBNDdov6Fbqd2hJMfR6r0vDWbyay6SQsv32sCJjA2AWxUzPHeaDF2PTl3JnAFAUvJV1B3mtMTQGldWkFZW0CcJDXGlm/fvn1Xkj2Z19Ktu0+vB1V9nulIpV4JT3OM63XXYh5rCuV6jQfPsfhAfUfxxXhm/7zFgUqZX7ur/1lV/JTj2kOMe4Qz+0iaJznd0/Mjf7dBaOTacd5mIvD169f37DIO6FWBM+Xfeb0/AeZgh7kJtMhRVy7CZBzMydGRPrIkDiwcWbXOVjm/Yjz+bAJrBFhQwJs80jZJu2uZr2sXl6/lx9dNwARMYA8B5k8Wf8jetCcuP2sCJnAfAn+5T1FcEhM4ngBOBH5fMFUQtqZco6iiJEfFl8ncoS8BnHYISnIS9Y29HJucUWenW87R8Vdoz3G1cpoibX2JB05v6kqv3MQRvRRfGv8M39nJsuZILpUDQR8+tUEcS/fDFyc1AQc3Y5++l57pcZ52QjvgGMOM45/6eSyHP49FgDb9mmuXx6excn1sbhiH4t+xqdXFrvGAcY68OZjASARokza2jVQj2/JCHeIQqg3IRVoUWfvM3vsYC2scUy/9hvL88l4mjeml9JEfLbOU6Pj8EgH6DToai51YPPgaD+v1EcXtMVQkfDQBE7iSAHbaJZvUlXlz2iZgAtcR8E7U69g75QkIoKTq9TNHOGpyceKoUIjOU52L13XOx/0Etjqt9qSMoYI/GYb3xDXLsyjHKNa5tq8yYJBaMuIg1PI8fSHXRxTPjEfYYITYE+BTwwVjWU1asI4LPlR3Nc/uKUdcrEJeyYPHvz1E7/ksxmvaBn9xh3pLaWnTatctz935XnjEV1XCN/bJq8vO+HPHOeBqrk5/OwH6iMM9CMiRWruDE5mLRbaSVfbMR2sEMerWjMU4smKgTF++vORLdtvmynaFLhTz6M/3IBB1OHRcLdiMMnxOT0nb7D1ouBQmYAKzEsiNU7OWxfk2ARPoQ8DaXh+OjuUGBCTkn22Us+H2Bo1nZxGetuoW43fJgCOUOEaiMQejkZRyGSrvJtj2cKDCLxopMOjlONW+YhbWPI/BjrgUGLdIJ9aRrh1xJA+5chyRluOci0DaNqLjr6YkT1rEUsND99Df49zE+Eufv1JmwRArJwD55DWVNbuxVCYfTeAIArXz6RFpO87jCLwcqb+8v32jdtxL5yNyFx2rkmO35rrWgUqaS2ltKdvWPPu5ZxOgrcV5O9JA/mIOp70yn0eZI97nz9sJyL519MLX7Tn0kyYwNoFogxo7p86dCZjAGQTsRD2DstOYggDGuVolWQXC6YEzKAr9R/8+oxxIyoOPJjAjARlwSgYhDFH0JfUvnHj80efu2AcwIPRScOVsJE6cnDDWbwyxs37JsJa2pbjbS/HqHr7j7F4zfKDAxzFSzz/l+PTyn1nPjA+1bY1+wV/ars/M72hpMWYQSkzieLAn76TDON6yaC3nqHrNI7/akbqnMvzsbgKaX3dH5AiGJMC4x3hVs/szVwDGU42pzDnIYC1yGDIEslvtfCXZL5eX9Bwydqvum8bh7yawlQBzuH7rfGscfm6ZgJzUy3f5qgmYQEpA9qa4OD29x99NwASeR+C//lQI/u95xXaJTeAzgSXnJwopCi+GEv0m35ICvBTX55Trz7QoxvWx+k4TuJYAjjgZmHI50eudthqwcnGOdq5X38bYJoW55y7RtTFtaRctz25xEKsso9VVa35yzp/WOHx/mQCvUCTU9iEM0XceS8qklq+IX+x3nEsXScTryzHmr2qsIB4Wr2mhDHfnxpna/kO91joZ8jnzWRPYRsBOgG3cZnuq59zB2Cq9srTwZ8uYpvG1lS3jMa/37Sk3tubB95uACfQnoHHEfbs/W8d4fwLSMS3n3b+uXUITqCXgnai1pHzfIwmgjEYDHxBKym4EdNTKXoyZDiZwJwIYzZccqJQVhwfCK4sY/OrG5dpnkYecIct3tl1d24HGToboKJVBjrqVE7wtxddYyxg8+y4J71Jqrflt9y8tbIoxYlByKBNAxqHPMu7Sfxlzo/EgXi/FoufT64xNGieI5/fff3qPX69gjuNMrfNUaVD//MlguDav6DkfTWAPAdq0wzMIyOnZQw5lfErHKNqSdr5skXu2OlCpPcZjO1me0Y5dymcRkGz0rFK7tCbQh4DsEOgW9CUHEzABE7AT1W3ABP5DAOMdzk/tNMXwjVK5FphUMTZK+Y1xrD3bev3lIFnPU2u8vt8EriBA36k1FGk3I8b2HgasK8q7lCbGtB4C+pHKcmrwS8uD45TAbgbuZUyUcyS9t+Y7PGRQrLl/1HvS33EcNZ+z5Sv93eQa5XZt1/tsDHrlNzW+w5LXV5Vet6txpsQT+Ym+r7FA+UwXgql/xz6CIX/PWKi8r41XypOPJrCHgNrwnjj87DwEXs7GY+RQxqwt4xYLTmp11nlIO6cmYAImYAImcC0B7MPYqvxK32vrwambwEgE7I0ZqTacl8sJoBzXOE7TjOIskPLLRMv3I0KNkfiIdJfi3GPsXIrX18YhgHMMBz4CJAbDHu2QOEuv1MSgT4gOVj4jyB5pwLqauHj04NurLLHu1+KMzu3UKbP2bHp9qX2k947+nbabvtFg9DzPkL/XnPty3K/NubQnHHVbDNQzsNibx5xxgPEWbksyEQ5Pveoq5oH5gnGM63pFL3WUxsU9yBAa3xXH3jEwVx7F7aMJ9CRgJ2pPmnPExTim3SlX57h1x/7V+XX6JmACJmACJjATAeZ76xUz1ZjzagLHEvjLsdE7dhO4PwEZClFkFY4w1MqxpDRGOWIAZTeKw30JsJsIBx+Gbo4YxfcGHBoxsGtJbRxBFQO+vus+pZs+q+t3OMKXPjVCoF/jGFXdt+QJp+GeQJu7U7hzm72qnphz1U5SRwbOP5x7jBmvOeq3D4syrsrzqOlGh3TMY+r0jNf4DOdciMYGxnJCugtVz+l8KS7d13I8QgZrSd/3PofA3V/XzhjKX+yfo8goe1qZ5oatcaRzztZ49jzHwpS9C072pO9nTcAETMAETODuBF6LSnlTRF7nuXv5XT4TMIGPBLwT9SMPfzOBzQT2GhVQhlHKMT7mDIDRKLk5kwc8iAEUBwEGa6+IPgDwAFHq9Yo40wg4Uwkyjr9/afwX2zPOUoz1X768jO0x/rQ/IMDqemOS09wuzjMbx3Bu0W62hJfB9l9bHh32mdjeh83kZBmjf2jejQZt2o/GCB0nK9ol2WUe1xhcmwE5sdfuRzYoOWQ5HxehrcW1dp02oZ3JOVlq7XlfN4EWAqV23RLHyPdqDOWIrCaZTHJKzPssOkCcI7bKWVc7zxnjtspYsc782QRMwARMwARMYJkA8s8WPWk5Vl81AROYkYCdqDPWmvM8HIG9Rn8m5tQhhbNIu5dGNsDL+cXOMwyq5DUty3AV5gw1E8DQhNFIr2yVYW1LXdO2o3E7xqHPGMJJkz/dS5pKt7kAkz2AgXKrca9XUXFMiX1rnDxHPbcamO/qJN/KsZX70+5nEQ9jEmMTbYc5yKzbWgHyByE6otdigLXmgrV7ub42lq1dr0lD9xCX4ovOEl330QR6EZCzvld8o8WjRSrK15r8hdwSZTc9N9IxlTEYIyR3jpTPpbzM4qxeKoOvmYAJmIAJmIAJmIAJmMBsBOxEna3GnN/hCGAwWDMsLGUaI0xOgZdzcunZka6RX/3+2YxGiZFYjpqXVx3/+t14TrvHad6yGp7+Encw5IyQ9AdeJYtjZOQFBEfXE8a+VidkzzzJqSKDHXXS4qDasmKzdmdbz3KeFZfHxTbSjBX0f/5od2qHiiWOJfwGZxxXdI+P6wRy8sfaU+lcEO/PLQqL18/8TNkYx9w2zqT+nLQ0R961xFvkL8Zq/hifWeRypQyTqxeNXVpwgxy75TfLryoXP31xVdo5nj5nAiZgAiZgAncnsEUeujsTl88EnkrATtSn1rzL3YUATo5a4xzOIr36NjpdOXenIAfYncrksvwggPEGI7naMMYynGs1jtTo9PgR4+dPOJte8f72+eKDzuAYutJYFnd0MdZRJy2hReGobRst6Y92L32Gv9QZOFo+R8gP7Y02Edscc60M8zKAK6+187Du9/EHAZhq5ybcWfxA38VBpCOfdY+eTOcC5oUtzgjFd9SRfLMgJ20zR6XneE3gLgRa5vC0zJLhRpzvGLuQWSV3MDbUyLCxjDx7dmCMvVImPLu8Ts8ETMAETMAETMAETMAERiJgJ+pIteG8TEcAxXstyHkqxZffHMMwIeMwr8Qb0ciwVq6l6ziGvetqidDc13CUxzb8MpYtO1JbFhzMTWd77jGQ4azA4H+HQLug3hn7dMyVi7FCTvnc9budw+FH/9myA/BuLErlwZGnOTLe8xprnr24IvLo8VmOEjkUFKf460i7TR2l2ok3ugwjp0nrbnqx8NEEnkZAi9n2ljsu0tgbV+/ntcDiNd/UL1q7Sp7VeNubg+MzARMwARMwARNYJiB9aPkuXzUBE7g7gXtYau9eSy7ftARKr11KJ+GRjQxb4GOw/OMPDy9b2M3yDI7y+Jt4tOm3t7fvCwIwMhHYTYmRvuQkyxmF5FziGRYhYOgafacZTgQ5P7WTK+3nubrFKaFyqty5+64+93JC/HiVc21+qH8Wm1DPLCBJw9McqCo/dc4f9T9yvSu/Zx9z48LZeXhKerTDuChmqdy6V7u2tDtVx6Vnr77GnFQzJl+dT6dvAlcSoJ/03LU9ep9DtsnJJkt1EGXfpft6X5thnO1dZsdnAiZgAiZgAlcTkCyDjITc4GACJvBcAh4Bnlv3LnkHAhh6Namm0eH8yU2y7ISIgftkkIznZ/+Msm9BY/ZaLOefto3jEOO7djJxN87OFodnyVkix1J8PWRLvOWcH3MFB6r6uwxyLI7gLzdGxJ1bsYxbc4czskc8S+lTPsarXHlKz41cZ6U8n3XeDtQyaeYPt50yn95Xavo0fZ/FMxrnlIdZDPs1bw5RmXw0gacS6O0gZNy4W2iVg3qV3zpVL5KOxwRMwARMwATaCbBQXnae9qf9hAmYwB0I2Il6h1p0GU4ngCLLJMqujFLIOYfSV8mhiC85UJUOcc1iqIw8UmNrvObP8xNYa5O0X8LSbtSlOORIJQ7uw1HZ28BH3D1Crq2TZ/5wpMrRnOvLuWdb80T8//zn8a8Gr3G2tOb9qffTFmp/T/ipjFzuMQjcweGPrJXKYGPQdS5MYAwCktl65gaZgXh7yDk987UnLubuK2QhFoIs6Yx7yuRnTcAETMAETMAE8gRY/M7iXmy/0T6Vv9tnTcAE7kzATtQ7167L1p0AhoDa11yxKyyG9PeF1hyo0diHAdPBBGYjIKMZR/rO0qKDmrIRD6/IHs2RimC9FJYcxUvPtVyTQU+7945K86odGC0sZrlXdTVLfs/MJwsPHMYhkMoz4+SsLSdXOT/acum7TeAaAiwOPSKwkE7y4BHxnx0n48gVATmPufEo+e6KMjlNEzABEzABExidgBbFMw9j07UjdfQac/5M4DgCfzkuasdsAvcjgBGA19ktOTVfztFfPxgMUHqjA4nn11YTRyU9fr4fVZfIBOoJ0Ae/fv262AfrY9t3p/r6CAatOCbhnDvKCcVYRLlbg5y8rc/5/vsTYIEF7ZUjgaMdzGPVO4vHjhpTzippj4U8Z+XV6YxL4CW///r+cwbj5nKsnM0+dqQ0t8h8khejrJbGW/OduVFzZc39vscETMAETMAETGA/AWzABGy6nof383QMJjArgWuWUs5Ky/k2gT8J4MThXfjszIiv9EVBzv1eWGoQRoGuWb1E/HK8blHYXVkmMBIBdiL0DPQh+kjtzvCeaRPXyyD2S+9oN8cXxwsiwdAWf6d1c8TJg3BnTNuyG/jt7e09NnYT32lXSoKo+Ss8n8qD1bya5wBHv7LDvbkJnfIAjhBeG85YM1t7Je92zJ/STG6fiOT32frA7Svm5AJumatoM+iPtKE9Y5Jf63tyZTs5EzABEzCBxxNgDseOi96KHYQ3kdlG+/hmYQAPJGAn6gMr3UXuQyAqw6UYU2dDy2T7it8G5RJbn5+LgH4TtGeu6SPs6N5jjNqSn9EcqJQhN14cZWiLaaFMULctji8UD57DGePwbALpWxZa2tGzyR1TesY21cmMztISFeYIBxNoITDiPN+S/9Z76SNxQUvr86X778qRcbJlvkoNrfq+ZXEH6VJfiqPE3udNwARMwARMwAT6EWARlGQlzd+ei/vxdUwmMAMBO1FnqCXncVoC2n3X4jyNhWVnKw6HJ+9Uijz8eV4CEjhjCTCu9QgIr+y6PGtXqpwMPfK+Nw7GBsqdM+hhaDtq7CA9uEtxIB3GOykUa+WiPfDXqw2spefrYxKg/WAMbjFGj1mSuXOlRQ0skLhjyI2Pdyyny9SPAGPSU373ivm7du5uIXxXByoMWuTA0ts3mP9YhJaTj9c4U1+Sv9bu9XUTMAETMAETMIE+BLDrSmbieMSbv/rk1LGYgAkcQcC/iXoEVcdpAv8hwKTK7zduVXQxaGLclDPWYE1gRgIYIo8O9BV2pSLYPi1g7C0Z4XCwHhFYiRnHNfjzvZW/nWdH1M5ccdJv7Uy/ts4YP/h5Asbql1Ob3eWvv2tz1if1I96E0CdnjmVkAvQL+sPdQ2854eU8/fVdJrsrO/S7mgCLpcUpyFKe/2pI+h4TMAETMAETuJ4A9o44b2vDy/U5cw5MwATOIFCnAZyRE6dhAjcksKQ41xYXBRtjpoMJzEiAtlty8LWs5K8tO4Itxq34e8W1z854H2NMXBFJGbSr7CXUn/vaN/h7Z2FbS2KRTI+5oi3Vse7GkZr+PupYObx/bkrjNCV/OUXG+Q3o1trwYo1WYr5fBJ6wy6DnTu3ZxwrV+9qxds6u2dHM/Cc9D3mARR9rP5PQumBtrTy+bgImYAImYAImUEdAbwvU3SxGYy53MAETuD8B70S9fx27hDcgUKus36CoLsLNCCztcDjqNzHpL09a3R9XRGJYe5Wdnbm/vrems3dhWYlo68Sl+sEZjWMR4yqfv3379tPb21tb5BPd/aQ+O1G1vGf1iAUvRzOgz9Bf7txnjmbo+F8LCO4ugzP29grIIw4fCbBARU7Sj1d+fKON8Qc/6gM5KucofTmpf/3wJpAfsfiTCZiACZiACZjA0QSYr+MczYIp9HQHEzCB+xOwE/X+dewSmsApBNLXAJ6S6ASJyPkBn6cFjEZLO4CONkyySvCIUHJ6raVFW+DviIDBDadpNGDCl3NXOECiYnFEee8eJ4oYO6AwvrIzJdbr3cvu8o1HYOuYd2VJZszzlbyc9mcCT9lVSckp695AHJ6r8hSXFhTmn/jpnSU/CcPbRQgckfWOlp1L+fF5EzABEzABEzCBFwHkHewsmqP15gnzMQETuDcBO1HvXb8unQmcRgBHzcth+NufK7F+e9/9sbby+rTMXZQQjlMcIUuOxIuydkqyS0ajHga7tUJgaJJgu3Zvy3Xqc4szlGdoD1uerclfzrDGuSuMmqR5Rh3XcJntHtqHxgwY6rfXXsbTL6s7WmYrr/K7tuhC9/l4PoEZDQN2op7fTu6UImMvY+5TQg85YeuCLea8o+SiI+uvRb7cKjeSf3am4kztuWP4SC6O2wRMwARMwASeQAA7y+vtEb++2z1Y/DyjPPOEunIZTaAXATtRe5F0PCbwcAKv1Viv109hfHr9PfdnlxGgeF0tK9SeaPyg/HIEXdk1jnplcKuAHBcU4EjlFZMxDq7zPZ67kluPtI/aCdwjbyPHEdsADKNz/M67UJYWXYxcX0/J22yGga0OnafUp8tZJvA0Byok9jpRcShudfKRNnIRb2CIslK5hsa4QnlpK7Uhzu21z/g+EzABEzABEzCBsQmgq6Oj+01cY9eTc2cCPQg818PRg57jMAET+EQAY0iLMQaDSXQSfIpw0hMtDCYt4mK214xFZxm4aVsYuXo7dLUzCyftWvuFBQbCNHAud/4ObYd+zY50hzYCtBW11acsRCn1jzZyvvsMAoxX7IxeG/POyEtMgzYUx02+4/R1MIEtBJ60A1V86DNbA3PVVgeq0pSchtyAQ5b+yyLE0cYa5VdH2srL+fuv91Mqh67Ho+TGeI7Pe9ml8fm7CZiACZiACZjA+QSiLnJ+6k7RBEzgDAJ2op5B2WmYgAkUCWAwwejwRKNVEUq4gDPq99//30+8mhADDMYlHJAjC2m8xliOoFCUyz7C6oj8YOTjj/ZLnfAnB4PqbYshH36zG9W8q7C+udNGVN9yqqtN1ccyz512ms5TV7mcMmfzdoVRAuMlfYh2xc5txp4jxvtRyut8HEvgibsIkFc097TS7SW/p3LaDA5UsUJ/Yfx5lWF5AVlOJtT8r/h8NAETMAETMAETMAETMAETGI+Anajj1YlzZAK3IcDqbIwK/OUCxk+CDZ6f6ZR28skAg8Frz+vTPqfY5wz5Vh6XYjzz9+r0m5JL+dlzjfbbsw3Db3ajGg7lnkz21M8Mz2osnMlwvJWr5gSMzvy5nWwl6efkQIUE7ci7390m9hDAIViSV/fEO/qze/pNrwWQ4q7j6MzS/Cnf7JzFEd/ilEZuHn3HbVpefzcBEzABEzABEzABEzCBpxHwb6I+rcZdXhM4iQDGTYyaS86y6GzDmE7AmKDPJ2V1yGRkiFnKHPxwVI8SSo7fq/M3465IOdWuZrc1/dmdwFvLvfU5+jJ/r110/94azVTPYXTGAI/BGeeFwxwERqkr5r4oQ8xBz7kcmUAvh+DIZUzztkfWYNFPzyBHZM84r4iLcrDI0cEETMAETMAETODZBLCP8edgAiZwDwLeiXqPenQpTOAyAggFuRXUGDcxtpacKTyHkUFOVhlPtCIeR+pdDVoYrfgtTUKOnSoTJuyi5HW+BLHic9y9BSvx49pRQc5tvbI2psO1lpX38dktn2k/f/zx73cmcGHnY66tkS9Y0Ra5h8BR57ekfcYzOedArnxn5GVrGjjHqBv+YnvdGt8TnoMTY+ATdqSqPhm7+Ht7e9MpHwclMMLbDxj7/creQRvIxNl64mt8qa6crFFTja/FLzYjlFghr1n2KdHxeRMwARMwARN4BgFsfeguLP68q23zGTXpUprAi8B//Wn0/j/DMAET6E8ARxnOmjOcW/1zXxfjSyD47f1mDCoqq3ZHbhEUSnHW5Wj8u1JnY+Q2cu5jvezJJ85MOU32xJNzuOQM/PDOOX17lWdPGVqfhd2WPtWazhH3Mx5uNdYekZ/R43ySE5W6mLE/jt6GeuZvhHmKNsKCIo8jPWvWcUFg5rl1Tw2m8mhtXDlZq/bZp90HY/6WFpKZ59NahctrAiZgAibwNALIAiyumm1R/NPqyeU1gTUCfp3vGiFfN4GNBDD0MVneOWjXKGVkFyLOU5wlGAv+/vefNxWd1VoYFAh35IcDUeUbwTBdW0k9XolLeXECytlem3buPoyeaaDPyYGva6SV2+3Lud6volOaRx1fuxTHeX1zbTlxftjxUUvrZdDPtdn6GOa782nlnamGrpynGDuQAxjXkTc8jszUcubJ61Z5dZ4S5nO6RcZG9rIBMM8zdxYZFLmXcTSVW1/O+1+/v5km97zPmYAJmIAJmIAJzE9A9q/UVjV/yVwCE3gWAb+H51n17dKeRADD35N2EmEIYNctr6jFGL7XwHL312BRPrE6qUnuSob2vLSKviZy2oiEx5r71+6hveXyxDnyW+OU4R4MW2e+hnitXGvX5UidaUcqDngZD6k3O0KWaxlGDiYwCgEcLXotN3nKjbssDOo9p3n3+igt4N75YG6qkRfuRAEZacsrsb1j8vXWBHbEt+o5yL/8iT2O+6e1uzv1IZfFBEzABEzABFoJIDug3+BItRzQSs/3m8AYBPw63zHqwbkwgSkJYFzt6RhLIRwdf5qev+cJIOjlDOf5u/NnlxYVYFQi1BiUZIAq5QeDaIuDcS2+fGmuOYvDl4BDg4AgTv75bdgj++F7Yp3+9WhLnbIybDRPNVS7bQzbJKsz1mPX6kxjcjUY3zgsgSXZZNhM78gYcvWWhWOtstWOLA79qBZ3mMfQ1eTMmYAJmIAJmMCwBCRL9NCbhi2kM2YCNyVgJ+pNK9bFMgETMIEeBHo5NnJCIsZy/cZdjUGqxfhXszNKAuxeTuRduweP3mUZOUYePRxvRztkY373Mr/z8z3qcjY+9EUWB5QWR8xWnifnl/Fw6+pqjxFPbjnHl522GccYvhO0S1A5oB3qvM7d4bhVnoNTy+K0O7AqlQE5ST9l8sS5usTF503ABEzABEzABOoJyA5lWaKeme80gREI+J1xI9SC82ACCwRQ2Ak1u/QWovGlDgSeVBfRUNQB3fedD//93399d5ymDpNo2Myl12pcx5nJH4Jp7jWTElxzabWeI+8ywpKWDGyt8dTczw4S2LELVWlSVzijOW4dJyIP0tDunF5tvrX+aljc9R7aLU75WXYX96iHoxcf9Mij46gjwHjIGNjqTI1jUF1KvssE6ghEJ2B0JOLs500O2pmJfKLX3PLMncZg+teanJWjGdnlrj/tHDIWTGCpt4I8jYHLOy+BXjL9vASccxMwARMYg4B+FkA6sL6PkTvnwgRMoETAO1FLZHzeBAYhIMNi3IE2SNYekw0cQBhLJOTIwXRHAHLIqaxnlvHr16/Z5MjTXsckRi/tjlKfyia246T66BkOwyNWLaZcKA+B8mzdhZLGuQPv4x59kvH67e3tcfX7lALHsTdXZsZ3Oa5y133OBPYSSOdL5jQcplp0lBt/7jL+ymmyVYYqyWV766TH85RNddgjvpY4SJvFa7lFei3x+F4TOJMAi0i2yvNn5tNpmYAJmMBTCMhWgtypN5tRdj5HWfUpPFxOExidgHeijl5Dzt+jCaCky5mllfJ3Whk/Q+VKsIl5xeB7ZyVUbS6W+crP8N4b4u6oLbsxlD4OdAK7V6JjnXPqowi8RwfqiPTlGO6RHisgiVN8KA8CPd/pB1tWSBKfwzYCUZHaFsMcT8nIP0dunctWAnHspU3zJznmjAUnrfn1/fcjwHzJnxbAqf2ppJzHIXa3gMOEoDl9S/mudFSu5RfHsOp07d7e1187Un/uHa3jM4HDCDAePEWuPAyiIzYBEzCBzgSwr+RsLMhf2JsIVy0Y61xUR2cCtyBwvKX3FphcCBO4hkDqPMKpgdGxp+PkmpKVU0VgwJiVEybKTx1zJedAJaXUAHdM6tfEipDGro0rHKk5Yx11sMcAmFLcG5faZhRmIys5UtN0j/gu50RPIyKLA+LrDsWLMkbnxxHlcZwfCbDD5QkhneeeUOYnlpGxROPJmePkE1m7zJ8JINfEeTvewfkvX+7lEENXUH+LZb3TZ+oUR6reAnKnsrksJtCTAPoV4wH2AwcTMAETMIHxCbxkU7trxq8p5/BpBP7ytAK7vCYwEwGUHYwD7AZTQAnCaIBCdMcwikEdR1J0jok1Rps7O1Ep5yjOG4yAuTpQXVxxHC0/MOg9HpTatxZxtHD3qvcWWh/v1erTj2fv9e0Jhv571ZhLYwLzEUCGHmFh3lnk0A+2LlRAxuWPxVm8yrfkeD6rLEvpUKfU7RbZZCleXzOBuxHQTvuR+/PdmLs8JmACJmACJmAC9yPgpQ33q1OX6EYEtAIJpwbG5mhwRiG628p5rZQtOXHOqtq4Ey+m+RRD3FVKNk4jpb3HCBjr7IjP9MOr22harp67MTTe5HaxyDBbW347UdOaqv8+Yjurz/36nSP38fXc+w4TMIFRCeAEZO7Rq/UlV4ya3175YkxFFtgaZpRxWWxKme8+X26tUz9nAhDgpzUYFx1MwARMwARMwARMwAS2E7ATdTs7P2kCpxLAaSHHBYaSO+5SejmGv3wv56mA/5MYbHPOI4xLNb+DakPO9lqDHYp+/F3O7bEd9ySOxBHz2ergXCJEWy8ZZElHjlaNSUtx+do2AoxDW3+LdluK5z1Valvn5cApmYAJ3JHAU1/tivwkGWBrvc646AkHOTtmmSstf2+teT/3BAIz9u8n1IvLaAImYAImYAImMA8Bv853nrpyTk3gOwGMBiXnBbsoZwwY1XFM1TgqjywfbHGYpgGHBgaapUAZMGLNWgcqG+W4IsCY1+XmnNhX5GcpzVHzSft7/Y7s/jqkL/BKv1ygjZMWfWKpvaz1mVzcPveDAO3stTN+f33+iPXaT7TPPbulrs29UzcBExiVAPNVSTYeNc898iXZc29co/yUw5ZyPOl1zVv4+JlnE2BcfOLY+Oxad+lNYJ2A9fR1Rr7DBEzABCKB//rTCPp/8YQ/m4AJzE0Agzuvt8IBckVAGMMZqqBXqq3lByPQ2j2K8+gjeSkZ+THSlfL5cnb86/2VSbMadJbKfjT3vfHj/MZIoFf48fu6Mzhk95a79HyvHTm1bSJND2fZiL8hW+I1+vmlsWf0vCt/bhMi4aMJmEAvArVvCumV3mjxSPbcky9e9Tmr3Lqn3H7WBEzABEzABJ5KAPnh6g0MT2XvcpuACcxJwE7UOevNuTaBIgGcmPydLRAp3SWnlZxcM6yGzTmO1oxMCKKEJfbEy2uLcS6PxoE6ZHfhLEFOJfJdYvn29jZLcbrlk36mftjLuNzSNkiT9m0HarcqfY9obfzpm1r/2HJjav9UHKMJmMCTCMw+Lu6tqx7jai85YW9Z/LwJmIAJmIAJmMB5BLCTpIugz0vdKZmACZjAfASu2ao2Hyfn2ASmIYAzCYcHO37OWlWe7i7CIEPQ76/oNy5x7Mi5U3J6jQKa3aY46eKO1DWeS85TyhV3C2D4uyJEp2JaTzM5vci7dgSX2hLGxScG+hhtl99NZizQKlN4cK7Ea4mVnqlxssd+vhSnr7URoH/yukW1+7anr7mbNqf8sjPcwQRMwAR6EbDh76efeoyra7Jrr/q6SzzMa+JudnepVZfDBEzABJ5FQHaSpcXozyLi0pqACZjAOgE7UdcZ+Q4TmI4ADg+cHWf8xqh2X2LM4jWqMpin0KKjdRZhjbLIGaVXxKblavkuB3LLM73vjY5h5UfH3mkdGZ8c9Etp4DB8asDAh3GPsYD+Fp3nfN9i+GtxpD6V+9Hlpk2Xxtij094av5T0GceZrWX2cyZgAscSsAP1p/e5vce4Ghe7HFtr94od9uhAV/6Eyr2IujQmYAImYAJnE2AuO3Pzxdnlc3omYAL3IiDb0lU2Mb/O917tyaUxge8EtOuRHXtHKfhxAONz3LWpjMRXrXHP1p1wim/mI84r7eSLXK4oU3RqX5H+3jS/fv26GEWpPS4+dLOLWtiw1i9biz1722kt70j3Xz1utLJwP2wl5vtNwATWCLAY7CrFeS1vZ16Pi6P2pDvbvLKnrD2flZ5FnOhaWxan9cyP4zIBEzABEzCBWgLRLrVmV6mN0/eZgAmYwFEEsCuxUUQLSK9aUPuXowroeE3ABK4lgDKPUv9aKf3b+4r1I3KEIQshLHXUvAwKv354pTD3ajfbEXkZPU7KjvHv6kB9sUt51sCEuRRw8qXtcen+u17DYV/iwKthaQdbAq+1xujqcD6Bmfvt+bScogmYwN0IMP/bgfr6eYhedet5ZRtJ6Vk8rV2p22LyUyZgAiZgAiZwDQHr9Ndwd6omYAJ1BHCeyr4rBypPYuvcas+sSzl/l1/nm+fisyZwCwIo+No1pkGm165U4uX3+RR/BHbVqpCYh1E/Y/wbwZEaJ6BRWeXyhaC/5Ihnkj3zt11ZLMCrhfnT66zJw++//7/N+SBOwtF1xJigPOdYL53DkYrh9eg8LuXhidfgTfuaxYmg3417Yl25zCZgAn0JMDcuzf99Uxs3NuaAnnNvz7jGpXZMzqKeBUd2p3LOwQRMwARMwARGJoA8hS6PPc/BBEzABEYkgJMUm2UpaHMQtsmzgp2oZ5F2OiZwEQENKDiWXgr+bz/Jycmgs8UghQEHoevf//6xnZ7i+ZVgdZV8hQMEZzdBzr66nM5119oku1aauBJzzRH72mmdN5RRv1++/PyulLQ6U2Mfyi1QWCtD63V2qmo8aH0WQ2Gv1wm2pv3k+2f5XdTehv4n17nLbgJPJsB8i/xq59SrFRyxOGWmxTkj9AXkM+lXOq7JjSPk23kwARMwARMwARHQ/KXvPpqACZjAKATWbKFX/byLnaijtBDnwwQOJICAFJV7VnPEFR2tjtT4LnKyjeOHVWxXOAcPxHarqO+ya5B2jCM4tlmMf2mb3FJ5qSIR+0waHzu610J0puL4wslL3kt1kTozyQ/3x766luaW68RPntLy18SF8FJ6ZXDN876nnYDqSwsiRh13yRdt+uj2207QT5jAOARwEGpeIFfeFfi5bphvPc+8uCBHHNFGWPDF4i+HOgLIh1HvQX5CjqIvO5iACZiACZiACZiACZiACWwngFxdCtiYrrKBWdIv1YrPm8BDCMjAHZ1SS0VnRYgMOKnTZ+k5X7uWgOrs2lz0SV0TKs7T1p2epRzQlmsDiwZaJm3u5S/2MeWdsnA+Xov50Hn103it52cMgvzJoF/roKNcdpT1rIm6uOTgf7XFcQ3ftF/auPJbVzrfZQLPIhAXsDA32GH4o/6Zk15z6Os19z+uPPMTY+oR8oCdf/XtiT5KYPGe5rj6p32nCZiACZiACZiACZiACZjAFgLYv2Qj3fL83mfsRN1L0M+bwCQElnaMySCzNBjFV6XaeTpJpf8nmzi+7xRwyvC7U70cw1dMxC+jcJ3zi37Jb5eeYViHacoVIzZ5KI0PnLej7PweRr1E58v5OahL0Q7UOk6+65kE4nhrB+rnNqB5p+btD5+fvt8ZZPEjAjKGwzoB+ijyG0F9V0fOuZ1CwcEETMAETMAETMAETMAEthOI8rViGcH+ZY1JteGjCdycAEr/FkdqfBd5dJ5qJbaMCTfHN23xqKe7OTFyE2rvChptV8Za/+1d/hgfvPljsQUO5/gKO92HE9XhXAKvevlh0D03dadmAibQiwDzNK9814K2XvHOHo8W8FAOy5qv2jzKiWq+db0l/T3aVB41xzqOvssETMAETMAETMAETMAEcgTka0ivjWCjtRM1rRV/N4EbE0C5X3r1JgY8OUM4yjiAIYsBi3PaAci5X3755ca05i4aE0+P3wmdm8L23B9lqNyeo5cRean/7om79lkc8vzR/9lxIYOhxoraeHxfHwLsTmZxjOqhT6x9Y6GtuH30ZerY7kXAc/Xn+mTc0C7Uz1d9pjcBZMaR55He5d0T39J8huzodruHrp81ARMwARMwARMwARN4MgF+sm3UYCfqqDXjfJnAAQQwkqztdMjtWsRgkBoNtr6yygaGAyo2iVKO7uS0vzYQSNt7w6OH3irj3Fo/PjQTf0YOHxx47EwdYUXY0eUdOf7RDd+0j1H708j16rw9h4D7x8e6jm89+XjF345qKzjyj1wYeRfZHxlsqQ6QzSSnubWagAmYgAmYgAmYgAmYwN0IINfzR0j1B3wO2Am/fv26udja2JVGMILd8S9ppvzdBEzgngQ0mPUoHQauFsM9aSsw2OLkcziOABMZdeSwjYAEgtLTpUm9dH/v8xjoEEpwYF4dWHRxtUP3agZXpx/H16vzkkv/6v6Sy5PPmYAJmMBsBI4c63EMHhU/8d5FTqj57dijOM7WXp1fEzABEzABEzABEzCBexDgZ/74w5aPXP/SHdhY8cO2jwyMA5WwVR7mudKCxRo5/Gja3ol6NGHHbwIXE2AQ6vmquNYdAnEgBQXPjzD4XVwthyYPczOuR4wjkFVN2j2wZuwrTer1Kfa58+eff35/xfYo+elTKsfSSoDXnXz58nPrY6fd7/Z5GmonZAK3IMBCJs3HtyhQp0Lwu7lHhqPmkqPzfSSTNO6aBaRHcUzz4u8mYAImYAImYAImYAIm0JNAq/8AWw/PIO9HOyrfa+TmNO/4LnKBn3rZEl8urj3nvBN1Dz0/awITELjSgQoeBjp+s48gB+wIg997hm76DwOOVgDdtIjdi/VaTcWqpzoj5dvb2/dXWHTPTEOE7DoeYUdqLsvkyzuic2T6nsu9gr1vCttjW9vVvT1mP2kCJnBXAijjHjs+1i6ySTRMfLw69rer6hJmrJhHXuPYK6zJNczJtbJkrzw5HhMwARMwARMwARMwARPYQ+C10/S34k7QUtz4HFI9pXVTD/rC0s/SjbLA1jtRS63A503gJgR67QKSA3QLFpyme96JviXNpz7D5DOyU2Xkeml1PEtQuHpCH3FHqsYLGxLPafH0+6vboUpKnbOQg9f49pp/FLePJmACzyAw0pg2AnHG1KPDUa9ev2IeYB6KMh1yMeVLf7dpC1PmWgxD1ElJ3saY1COtLfnzMyZgAiZgAiZgAiZgAibQQgAHakmuXYsnlfVbd40uOU+VdqtTVs/1Pnonam+ijs8EBiKAEWpLeA16X74/KofI9xP+MCQBjEZy7A2ZwRtmapTJPBVcrkZNO2T8YQEF44nDsQSOMn5vyTV1jmPfBuQt9PyMCZiACVxDgJ81OCKcLQMge0QHqsqEnLRVL1IcOv6Y515v2tF5HUkr/kaUzvtoAiZgAiZgAiZgAiZgAiMR2ONAzZXj73+v/6mpGgdqLo2rztmJehV5p2sCJxDYYizA2IHxmz+cp7yKd5QdTicgmzqJM3YqTA3ogMxjSHPIE8CR2vMVevlUfBYCW1cNmp4JmIAJjEZAcuho+boyP0c5OGOZ/va3/4lfu31uMaT0SHRJ9+m90BAZUD9Zkua9p9M2jdvfTcAETMAETMAETMAETKAHgZ62JHwItTZSbIW1m0FGsXXbidqjxTkOE7iYADsQ+UtD7YAUn4vGDpyntQNgjOPJn+00ek7tn727YkayCGRbxqEZy3p1njX2lOaDs/O3ZMg+Oy9OzwRMYB4CUQ6dJ9fH5vSMt14cJe8T71m/3c68syZz9N4hSvkwGOXCGfWWS9fnTMAETMAETMAETMAETGCNQM6PsPbM0vVa2RfbVYvztuXepfztvTb9FhoqPL6yB6M2q3V5lZyDCTyJAP1A7X/rinWeP8qI8pS6YHDv9btLrcxGeqVna959/z4C/OZwqyCyL0U/PRoBCZY6sjvG4/loteT8mIAJLBHA2eZxa4nQMdeOXhR2tF6OPYDfIV1zoEKPe97e3t4dn73etEM86S5X61THtFXHagImYAImYAImYAIm0IdA7x2exPfly7I/bovd8qwFmWtUp96JmjpQKSyKEQZE7chYA+DrJnAHAhicGFTU/lHkU2W+ppy9jAk1ad31Hjmye6/oqeFVYzyqicf31BEYrb+8focSx5l/g7SuBu93lxyolAyD8lWB3UBb5qCr8ut0TcAErifA3HW0s+36Um7LwR9/fH7bzLaY7vkUelDrAlLmKJypR701wTuq79nWXCoTMAETMAETMAETuAMBbNbRftSjTGvxbXGgjqQjTutEzTlQY4VTcWtODCpv7ZU+RylWMa/+bAI9COz9LSMGptGcQj24nB0HDDECnr2TYm0sO5vDE9KrfVXFmSxod6/fNP71fZdFzqHKuVFWcp3J5mlpsajiigVldqA+raW5vCbQhwBjFrIMf9a/PjI9+k0jd5D/kb23yDY4U3vOlchYLb8H9bGm/c0ETMAETMAETMAETMAEjiXw8of9dkgi6HE5fxxprjlZ0wwhV2PfHCVM9zpfKuNVIf/6xDBVnNhG/PvvPxVXNZcqj8rmWRTW1lWtnzLlEyZwEgGcJyjttbt/GIxi+46fT8ryVMkw7tQYmWruOaLg3oV6BNVynPSfsx3l5dx8vkLe+FN7pP0yNjBPYmjsaTD8nLrPjEIAOYcFNme21REXF4xSH86HCZjAMgFkGWRZzV3Ldz/nKuN4SW/tQeEuvJFv0N9bZWLY8uyegFwIx7uw3MPCz5qACZiACZiACZiACYxJYIszs6UksjvG1/oenWZL/vbcO5UTVUbgtMAYhfcYCXGaYmCU8/RIJTXNu7+bQE8CKO4YsOPvBMf46Ss4S7nnTKN6zMNsn+O4M6phhDw6nEtg1LZQoqCxwf2+ROi+55d+l0IrBN0u7lv/LpkJzETAv+Wcr62jx2jpwvnU5zrLa3RLetBSSZCl98h2I62SXyqnr5mACZiACZiACZiACTyTAPLuGT6vuDgRPWNrmiyMHElPmcaJCrTcDrstynZ0itBtULRwLuUqlQrbq1Q9s2u61FcRwNDy9evXq5K/VbpaLTP6rojc2HirinBhuhA42gjbJZOOpDsByTbanRPfQqBrW2SpUkav/C3WUp583gRMYA4C/Pan56rz62ppsc35udmXIu2n5c08Su3oVyYrHR9NwARMwARMwARMwARM4AoC+LfOCNHxudU+tHfD5BHlnMaJmoO+9XWKrDLlTw4SwMqQmIOMg8I793JkfM4E7kuAyQWDyugOacYxh/MJzL64xsbC89vMlSlGGee1mu/jTyKwmKyXIxX5qvVVileycdomYALjEJh9bh2HZFtO7iYTMA/RllrmIubJuGq+jaDvNgETMAETMAETMAETMIGxCbTIxntKgg9PPxnYmubIm5j+sgfKWc/iJMhBR0HaE1oUJQyM5OPbt297kvSzJmACgxNgxQyB8WWGV3NF58jgaG+VPeYktZXZCka+c3PqbOVwfvsSQM7B6Lwn0La8M34PQT9rAs8mMPPcenTNYVB4atgib8lw08Js7xzYkpbvNQETMAETMAETMAETMIGzCJy5AQedDlt1q72ahf17fX1H8hx+JypKUwn6XrCtClkpH0dWkOM2ARM4jwCLJDC6xB/Ark2d8eTsV9DZ2FNbO8fcN+trB3lt31LQyq+3t7el23zthgTkAN0iXzEG4oh1MAETMIE9BFi5PMMitj1l3PIs4zJvRoKPPvcac69cWMXcgTxF0JufOIeswg5Z5a31bQl/+9v/FG0IW/j7GRMwARMwARMwARMwAROYkQCy9ag+Ld4yi26zxQbVoy6wq6Nz6M080j14nTD+AeknpDW8E7Vk7KUwe4MUttZ4AHxV5bbm1febgAm0EdDA2fbUT+/Gnn/849+nGv7sRG2tpb73zzoXrLVxzW8IMxIg+pJzbCMTwJEqZ6oc6jX57WXMr0nL95iACdyXAPMOiv7ZC9NmIAqT6GBmjNZ4vTf/ZzInLfRw5JFag06rcx1WrXKM5J+9LP28CZiACZiACZiACZiACVxNAJl7ZDsNsnrUbc7khT2Xv5LNM+oososN/zrfmOkIs+VVvPG5+HnNkBzvjZ9RVtmhYwdGpOLPJjA/AVaZlAbQmtLx7JmvSNjyqrKacvieOgIy9NbdPc5dS+0GIcbBBLYQYJeQgwmYgAn0IFBaRNsj7jvFgdNvbWEx11H818LWxcVr8cbr6M7o0Bhz0KdLen58Rp+RuVp/VmdJ3lG8Oq5x1H0+moAJmIAJmIAJmIAJmMDoBEZ3oCJ7H+VAReco2eZfXL696yK19n/0Fp4b2olaclL2UnJKTlQMgTXKpp2pow8Zzp8JtBFoMeaUYiYOBtczQmkMOyNtp/EiMKOhl1fclYIMjr3aME5Z5tOaObWUJ5+/jkBJDsvliF0/ruccGZ8zARNoJXCmLNWat9HuZ2Hx2gIonK1fv35dvO8omRJ5AiMGDlB05z0BQ0fLvLQk76T56LFAO43T303ABEzABEzABEzABEzgbALI3yPvQIVHi5xey+9V7pfOkdNtXjrJb5s2T/FWnKFf51tStI4ArQrBQYshEDi1gXzyh/HQrwGqpeb7TGA8AvR/Ge4YB1oCxhccUBGXpeYAAEAASURBVIwFra8ca0kn3lu7aiY+4899CeQm5r4p9I9tabcJ7Z+/XoE5UfNiaU7vlZbj6U+AMQZBs9a47DruXweO0QSeSgDFH+fg3/+Ok7BNJnsaM+bZJZkQgwKy6dI9veUZnJ1HzAnEGX+baKmuc+1G+jpMtBBOC8iW4vI1EzABEzABEzABEzABExidwAwO1CMYruke2LX22DrRo4bVSEurTFGmcwrRUgXQgNJniD+nSOKgZaVs7tpSGlxDqeNPytna/UvXc3leut/XTMAE9hOQowAnUzpm1MQuhxH91+EZBLbMFVeTKc2vR+QLQ6fD3AQQNJGN1sZEj3tz17NzbwIjEmCO3SqTjVieo/KE/FnSbXGO/vOfv60mLXlGYzkOxpqxP42YfBzhPI3p5FbWl/RvbAcqG3FoYRdz2pcvP8do/dkETMAETMAETMAETMAEpibQsinwqoLyBtg1+1Jt3tBdcotF4yLJvQ5U5WVY62bJyCvFRwVYO+q3U9L3LOeUO5SvHPi1NNLrcqbG1w7nVvdGhS7eS3wYLVH60nynaamxrN2XPufvJmACeQI4UmVAyt9RPstzL6PM8UPr1jyWc+8rWwmo3rc+f/Zzce45Mu100VNqyDwybcfdlwAGa14F6WACJmACZxIoOcbOzMMsabFjN+dcbJnz+b3SGNBHl+oA+QdnK3ouhgqOLenFtPZ+xnawZidI9e29afp5EzABEzABEzABEzABExiFQGlR5Sj5Ix/oFlscqJQNXYM/ZH7J/egiOf2D+3CeEvbsQH2P4D//jrf0x9QqPy9VesuulhgPztTohU6zgnG3t+LXUkm5e2kEpdfoobTK4UveHUzABPoRaB3QGWtYPIFx5qxV7UuvZO1HwjHVEJhtl8xZzkwJNWKIgRcBJzff6R4fxyWAHBWFVXKKLEL7Rzajbh1MwARMoBeBJeddrzTuFA+yK3Jo7zkW+RYdWW9r0bgf9Ww45owXR/GlnOSHPJA3/koB2UM685E/CVRK3+dNwARMwARMwARMwARM4AwCyMYjh636XfrGWPQOypraHGPZuae3fjKsEzUWPH5ucW7E3aY18HornTHfWz+Tp/gqpeg83Rqnn5uDAHXd0t7nKNX9chlfC7BkxOld8pYFJb3Tdnw/COCQXJq4f9w5zify21uYSEuXE44Yz1hkMOJcm+bf3z8TkBylBSMsTIty1ucnfMYETMAEthHIzSHbYnrWU0fJoczbxM24f/UcHttGjfyF7OE3Nj2rH7i0JmACJmACJmACJvA0AukCx9HKH2X42rxRppLNSfap2rh63DecExXHUcm427LjknhaQinNljiOupdXM/G+aK2iTdNZ2mGb3uvvcxCQY27LIDNHCe+TSxY5YFgaeQy5D+3xSsIOh9nC0Q54doiUDJujr4ybrS6vyu/VRvSryu10TcAEziFw9Dx1TinOT+VIWZS4j4w/R0u6P+lq92nuPp8zARMwARMwARMwARMwgdEI4JvijV34bUo2stHyfER+tvg2YFdyoB6Rx5o4D3WiYizFuRCNbdq1kzae3L25Auh9xlzTa4XS++SASs/P/D33Gzczl8d5XyZA28Y559cjLnMa4apWuC+tkDkin36d7xFU2+LEoDfjbvEr84xhHG5RLmij7rtNwARMwATuTmC21+SPUB+tC4hHyPNaHjA4lfT9tWd93QRMwARMwARMwARMwASuICDnabR7YTPGF4ZN7Aib3KiLULc4UKmzEf0hhzhRl5yYudfppO82LjXwuAKWSsiFpbRz99/h3Ai/78IAccQgcIf62VoGeJ71+5pb89jyHG1Ev53Hc3drL5oMW5j4XhO4I4Gl1wlqXPPu7TvWvMtkAiZgAn0IyMjQJ7Y5Y2llwBuLHEzABEzABEzABEzABEzABK4jUPJLpT6tuLkQuf8o5+p1JH5630ARy9mSlyW7Yks8Pe/t7kSl4qOnfS2z3N/6aqCcF5t4tsS1lr8Zrl/tjMIJTsg5yGfg5zweT4C+mW7D1670O00UZ/bFUVcZHd+anMIdCCBItc79dyi3y2ACJmACJrBO4Kr5AXl1FLmUvOSMB5xLd2iyUPEqZmlt6hW8nI8/OcPnKLsiM2uBJWXib5QypGXydxMwARMwARMwARMwARNYI1C7SRD7OHIxG42iLyvn71pLU9eRrXnrG2EEuRqdYM8bZUbUCw5xoqoCOQINpSlVnFCaWl9RS1z8/lzqqMg5aGIe7v6ZTgrfPY1zKyMp7VFh3hqXn7snAdpI6kClpAyIcVBMx4q0n9+TzvZSmc92dk9/kj55dcCJGoXFq/Pj9E3ABEzABMYjwHylt5gcLfdEffKXX379pG+20CGuvc7YuDg15o18oPfFAKOrwxajD3Ua61X1TVn28ruah9M3ARMwARMwARMwARM4lwAyMw7ErUF+lSh7y98RfVvIr+w4VeA55Nho49a10jHnE8N2Tto531cpnnhe+de5t7c3fTz9SBnuFj5qYB1Kh2FUoKJSlEbdquzRaKMyqfhGMAYrL1cd5YxioMgxOiNfqTJ/RppOYw4Cta8XUztWqVhBo1dVM7kwBmydSBTnnY4e+66tTdpnKqBcm6P61Fvn3/qYX3fWzkP055zg2Jqe7zcBEzABE7gfgaj0M+ce/RMXGCwU+A2eLemlr+/qJSugX+NUJF+5Nz7FvKsMZx63OFBz+Uudqrl7fM4ETMAETMAETMAETMAEIoHo9IznWz/j20DujhuB5BjVMRcnz+1x3sY4SQc7WS89IsZ91md0gyWf4Fo+rtZtSvk7xIlaSiyebwVCI+IZFEicMmqgS404pveEz6+O9u1URxOdgs5BvTiYQEqg9lUGPKedqDhO08H269evadSP/z7ij2w/qVJmdaBSRzLGMpdeOYfSzxEMcwbhJ7Ull9UETMAETGCZQC+jRCmVdOU481LrPI+ems5nW+Ip5ZE5E8duLl9XzOXM3zmZvZR/nzcBEzABEzABEzABEzCBngSQv6PDc2/cxMdfa+CZ3vI4esQWWZu8XPlGF3QEbI57wpY62JNe7bOXeb7YqZKu1l3LdOwYvRvnWtqzXIdLz117arhLHWDp2izcnM/+BOjfS/1UTlOt9OmfA8doAscQYOHI7AFjLPNwy0KHmjK3skEoTI3ONen4HhMwARMwARPoRSC3MA05tsVwcbSjt1TWK95Mggyfc+aW8ujzJmACJmACJmACJmACJtCTQKtPqSbtJRv20vNbn0vjxAGpgK083WCka/hq0D2kf/CWN944x/leeVFaLce9OgJ6DXpZqQzEr00hV7zV7jInKpWA8kWjiM7RlsrxvWUCNLge279ZvUA8V65iKJfSV0YlkE5mcphijCKUJoJRyzNivux8uqZWNGlfk3rfVNOdNz1ib11U89pZ86UoJPXIk+MwARMwgacR0C7BK5TLI1iXFOkeaTEX5hbzcA7DRO0r6mXE6JGnpTjIr+RoDCVX6NH66Z6lfPraMgHqkaC6XL7bV03ABEzABEzABEzABEQAGTgnv+v6rMfcAk5kRhyL6BolnWgUnW+vjoBc/O3bP7PV98svv36XmyVHZ2888OQnJyoZwXvdagjdmkd5kK9+reDW/I/+nAaVrauFpdjRYbf8NtDofJy//gTSnW3sTDtrPOlfmnFjpG9iJFUfHzen98rZndpybufNntpq3YWqtI7YEau4fTQBEzCBpxJgjLecUK59dN5e+mfp7StxNXk5J21XyDOyyJUrzclDrXO5pnSxLrQAQDpozfMz3kP5aDd//PH67a0Zy+A8m4AJmIAJmIAJmMDZBJAbr1hEeHQ52bAh+Rc5/0pZf0tZsQcq/1ue5xnKnAvoBzFu/JZXhA9OVO0ew7ubC3Kw9t6VCAh2pJY86rm8+Fw9AZwsNU5U1W/qJKAjE0duRUR9LnznEwhEByrthlUocaB7AoMzy+jdqGfSfqWVjo/n52BfinGcp/1obtD8vzX2vTt07UjdSt7PmYAJmMBnAndbYFXSTT+XvO4Mc2HNiu0a3TTKvmnqzLM9g5y1NfnqmW4aF+lj5OglE2EIUZlou/x9/fo1TfZ235HB3t7e3ncWSB67XSFdIBMwARMwARMwARPoSIDFfHcNe+1yV3HZaw8k3+hnJed4qlOVnK1Hl/+DE1WJochExwcFYTWzFPLeSg3xK27lwce+BOiIS8pZ7Kipk1wObu9G7Vsnd4tNq2TsPD2vZhmn4Y3hiSOB/qrgcVUk+hyP2FHSJ2d1saRG42j8ZH5AMNmyK4e2F9tdXW58lwmYgAmYgAmsE0hXHq8/sX5Hi/GFuTPqxTH2JQcqc2PuuTWdLMYfP4+mL/d0oiKPpEaTJe6Ry+yfaSeS15d09dnL6fybgAmYgAmYgAmYwF4CyNFaeLc3rtGep1yzlm3vG2pSW2WsG+mC3BN9k/Gesz7/FeUvLayUGJxpaQZzRmQpkNGQyruaUYiikTZXqCVQuft9bhsBlDOM3KX6kNImJS6mYuN4pOHPSwTiO8qX7vO1fgTS8TuNOden03v8vY5Auvqp7qlx7sKYyys2ND+nOeM67YldEbWB+CQr1D5Tum9WgbFUHp83ARMwARPYRwDdUjrKvph+PN3L+IIOW5q3yHdOPtOiVeSJnIP1Ry4/fsJhKf3845XrvpV0yq05glmJ59Y4Z3gOPZtyI68jn+XazQzlcB5NwARMwARMwARM4EgCyN62bx5JeFvcPd4YtPSGIGRl+R235bDfU39FaM+tiC0pajkjMkpU6mjj3JpyZQdqv4qsiUl1WqoXjBTUY6rUc7+erUnH9zyTQKldPZPGGKVmvLaQ0a8u2Lky+yuqa/opjtGaMZ/7FF+P38xG+FoSnvrVpGMyARMwgXsR0EJW5HiNyy0LYu5Fo1yaLQp46U08pd/iiXNjzIkcqJxL3/oU70s/X+VApU3RlvhDZyfPNbJBmv/a7690/vX99hZG3x+a7ANcY8Auk1vgHu/xZxMwARMwARMwARN4GgH7j8asce0S3ZM7ZN9SQB85Uv8opVs6//7ex1ojO5lPHWxELGW9lEju/FUKYS4vTzpH44N9aZVrqS6pewcTuBsBBmvafKndz15exmv67hNX9h9Rd3DEkVoaP49I84o46Q/sLi292pc2dYQzmfaK8Zk5ym32ipp3miZgAqMT6P2TKqOXV06lHnPOFgdqCx+MCEs7TNll2BowGF1hOEjfLPOSJ//6YX4mXz3lZ+SOJ4XoVI/lVpu/u6wZy+zPJmACJmACJmACJlAiYP9Ricy157EL9nhj0JLtb+naFaX/ixLFkbrmTE13m+rZLUc6QSlQESiiuVcHl57x+XoCNEJWp6O8pStgS7H0rPtSGj5vAmcRoN2/2v+/3l+ddVa6V6TT08B1Rf5HS5Pxk7Zz94DBFAMeTk0F5mYMq5zn+hGB9uo2ewRZx2kCJjA7AcbgltB6f0vcZ97LvMtbCpZ0x7X87HGglpyfzFXSWZkbMSKU5kbkThkBuLd2nrvi7QyUqVSOlHNcOf5aANXuKFacpCndnzzUMtLza8danXctHl83ARMwARMwARMwARM4hwCy5hULCs8p3bypIKv3WPC3R7+7gl6TFbSnI02KZK7QpCNvNorr0r25532ujoAc5+lqYxox3FP2KLZc663U1uXWd5lAPwJXGKX65b4tJvrry7D14xVpbTH47pSAFhxpnkqv3+k77Ue7Q2qNqnvLbyF5L0E/bwImMCsBFNIees8ep+Go7JgbpIe06CJaNLe1XEv1UWs84JXABBYmtcylvdpDS9lz+j7cc3MzbLiGnMD11vKl+ZJcpWN6fet32gCyG/lraTtb06t5TmWUTBmfydVBvO7PJmACJmACJmACJnB3AnfUZ+5QZ70cqLDI6RcjM2pyosqQurdAa7t44u+uougsKa978+Lnf/oJxf7333/65DRN2cixylFBCqC++2gCoxN44kp0j6P9WyVGL8bCWgNq/xycF2OLwXdvrjDGOpiACZjAkwigiDJPv+bqfxd/G7rWsXJngwM6oRx3S6/4RdZj7pLzbG97kvN2azzIC6rnljio87P1YOQb0kXvr/kd1Gj86GEr6K1bUnfiL4fvmXLNUn2rrKkjtbavL8XtayZgAiZgAiZgAiYwK4G9iyBnLffo+WZzneTXvXmd0TZf7URF8euhcPx/9t5ux3LcSLjt6XHBBroHKF/U+7+ZXyAvXMC4ccbwNL4zK7eji8nUHyVKIqlFIHPvLVFkcJGighEkVTKYLYl7tPKefH0M3KhjZujGoJmBZj5wx2FAQ8fxGoNsjD4GCfRCAINQhJoPgEizxU/u0dTI1aKMPcpE/8jW6Plq/h7L0orMtNWpZ08r8imHBCQggTMIhC7Nu6jnwhbHylMMDjx/2VUk1+PSMQrjmnwcM8d27Tg6VNTRWtz8PDIhB2Os0rClzkvT3BJ/JJ2Rettbd1tYHY0ThqgYj5NeDWf0Ubm8XgISkIAEJCABCdxFINWL7pLBfD8SyMddH88+49dmJ+rcII7BOue2DE62OkVx1o48i7rFpoWhIV1RRR1QpxizYyAdhgjOffny63u9c35L3bdYZmV6JoFYSf20B0BNY+IzW858qTHktrRF3LykfZxhddGTttzuo1aUUgISOItA6NdrE0jWHCtPHDthYOEPHYfxaGpwCa616g2+6Vhpa7qxle+e8VLorFvzujtejQnXd5fhjvxxpIYz9Y78zVMCEpCABCQgAQm0QqDHFYqtsDtDDsZZjGP2jGWW5EkXOC3Fa+ncZidqusVuFICGHYNVBv5z2yoRj5nVWwazODbWjAiRv5/nE4gbJRzg1GUMkDmHg5VzDvzOrwtzqEOAvgyjlG22Dk9TeRGgL8TAHf2jXPYTgCFO6TAeh56xP0WvlIAEJNA2AcY+/O0NT3SgpqwYY24ZZ6bXlH7fmz7OXca3e0I8B/dc6zUSkIAEJCABCUhAAhLojUCPzrXeGG+RN19st+WaI3F6WPiz2Yk6ZxiOQjKwxFGaz9DFIBArGadgYigNp2ms5MFRx/aIBFejTFE75xj1MDezAIfTlCGb+ue4Dqlz6sRU6xOgL8v7qciFewCDVWq0mosb1/TyiRFvrwGwlzLeLefUM/BumXrNP30WTT17ei2XcktAAhKYIjA3Vkqdb3NjMdLz+T5Ftf6xdDLp1tSZYLW2inhrWkvxGDtveYfpUhqek4AEJCABCUhAAhKQwF0E0LXnxkV3yfTEfK/YuRGbH7Z37H2RH/Ufr49skftmJ+rUoDGcEVHIvIBrDlTiM6hkBSuDvjCahpGA6w3XEMD4wt/USqq0fqmnqB8ko864jvcChhP8GonNRQJ1CdDOpx7WU31f3ZyvSQ0nquFcAq9+9GMfeW6Oz0g9Jms9o7SWUgISeBKBtf7NSYpttYZ8HLRFunTctCV+Gge9YkuId7OT15QuuyWNo3FoywYJSEACEpCABCQgAQnsIYDt1YV0e8jVvSbGFXVTnU6NsW463mUsw+sj2UGyxbbw83Qxyo5SyLTgOD/ZVmpqEJcOsPj+AjT9TtUrZu2WlXT82DTS3HlNHYUDJj8Xjm/IUN/5+fGJWcIrCbweqt/f+5fa+bKKMA9MDKD9jxDSe3WE8rRahnj3Wavy9ShXPH96lF2ZJSABCUwRYAz07du3qVPVjr3GWV/eZ/Yyuzf+0rFYtcwGSWiNTbpTSStFTnVV9ORagfbyMqLoHK3F1HQkIAEJSEACEpCABD4T0IH6mckdR17jx/tt4FP2+Tt45HluJoNhGG/wUqDRU9C5WbNUBltjbr05cF4wMJxyxi7J4bljBKYMBOEcdaXVMbZevZ9AvJc3UmCiRs2tdvN+i/5qNMcjBjG3Ro0WdM4nfJk1NYrz/RxKZalOPZPKUjC2BCQggbYIxOSQXPfYK2Vs5RoTUNeeQU9/h2rOOcao6JpLddLa8yjfBejoRK7QfdOdidgxastM8GjTOVt/S0ACEpCABCQgAQlIYI7AVh/R3PUer0cAvf/ugP9paTx2p3ybVqIyQEuX104JTKNn4LZU0KgMBvbMvl5ygLxuounVrFP5e6weAZwA4TSNVNOBcTpAx9iQhjDepMf8LoGjBHIH6tH0tlxf04HK/YTB8u6w1o/fLd8o+ad95ChlurMc6fPnTjnMWwISkEAtAjjjGOuk4eXI++uuFaqMrdBb+FxzoJLn0ngtlekJ38OBSlmZBNVTyHXVo05exubRjoID7YlJeIZxCOR9zzglsyQSkIAEJCABCfRGoNVVh71xPCov+v6WceTRfNaub3kh5eJKVABuWVGDg6BmIWunt1ZBnv9MgPpMZyGH8yVfxZb/buGG+1waj/RMgP4gjEIYugg4Vc42dNWcEPAylv7rfXJCbvC6sm40mlxDm34x+sxrchw7F+71/FkzdoktnQQk8AQC+YQbdJtUjz7LcYVeZXgRSB2oW5hc6XzeU09H5GPS9FxApwlddi5O6Opz5z3eDgFWFuermNuRTkkkIAEJSEACEngCAX0/bdXy2Tb2LaVtYfHRkpyzTtStL5LFKL/Vgfr77//7wTgwJdgdK86m5PDYT+9bN6XtIDdk5407HFyyk0BNAjgdr3Y8YlhIDZlHyxOGpfg8mp7Xt0+AZ2PNNtR+ic+TUI7nsTVlCUjgHgJTzi4mi6Br0+ed+b7UPc65eyidm+uUA3XL84ax6hUTpbbUU6pr5OOyUnpruvbatr5TbbpUBuNLQAISkIAEJCABCYxNAP116VWQY5e+zdK1sgq19fHE5Ha+JQ6EkmXXOFsZeHLDTAUGf642mSJz37H0HTipYYGBfd643XLxvnoy53oEas3Mjn6Oz7hX7r5HmMgyFXhgUm4mTfB51uqXqbxHPZavMBq1nFeVyzZ5FWnzkYAEriIQukGaH3r30lgpjbvne6qT7Ll+hGtwnr50nq+firPFcXnFWHVqnPVJ2ORAafzk0s1fGQcuTZiFqaEfAmtO835KoqQSkIAEJCABCfRCAJ2V8c7UOKiXMowo5xUTREfg9mklKoOjrUr1ngEbA0/+YoUjg/nUUTcC1NHKQB2FA5X2wWq6KQMCx3ASbW0/o3GyPH0TiL6vRvuNfo2VJOG4xLhUI+0jlF9bdH95V1iivOm23aQd9zoPUfr4ufv9iBxeK4FSAqHUTT17StMyvgQkIIGWCdDP8cfkkej7asn71Ak+6DyMUWKl7xxP9J4t4ezVqCWvlEDn3Lor1JayLcXhnamUHd0wNX61oOMuye25jwScmPaRh78kIAEJSEACEjifwJU66/mlGScHJ0Jur8tPTlS26tkajgzYWMG6ti3QVjmMdy4BDC5fvvxoF+mgGaNEtBniMahmcL1mpDhXYlOXQDkBDEO1QkwMCUNTK8YlHKQl5QynL/czgXtcJ1atVmI6pQRwJtj+SqkZXwIS6JUA/V1tfRo9/Wlhqw5WMjmYuqnt4E7rJSa04ezKHZZpvBh7pcf2fC8xnqTlxhjGZMHQF/fk7TXXE3hiP3A9ZXOUgAQkIAEJSCAlULKTaXqd388jsHWcdJ4EH1PGx5T6nD6evf/X5Ha+W8Q6+t4VoISjYUt+xmmDQGxHSsNmYE89xrtuGVTHH4P6rbO52yiZUkigDoHoG2PVA4al3o1LGPP44/5mdS0PWspnkMDVBFw9cTVx85OABO4i8HrWfprvulucEifh7kwavHCrDlbqWAp974wi45xEz0odllP54Mw9amg4YjxBN9zKd0p+j91DgPG84/R72JurBCQgAQlI4IkEWGByVGd9Irczy3xkDHCmXC2n/cGJumScZDDHYJFPG3/LVXqubLEijcEXA3u2ZZ4ahHHuZax53oz3c2vA1FsmkBooWaE9ggN1ijflYkWrztQpOh47kwDPFh34ZxI2bQlIoAUC9HO1nVOlTsIWOFwpQ0wU3Zrna0Lw963Ri+OhZzHuPtvgVLudFRfUCy4nQFsv2TL6cgHNUAISkIAEJCCBYQjgQ3JHsbaqs1UHaul47Gqq79Obt8BjteFrsPj3q2U0v5sJpFtWxfZSYYjh99z2oByns/z9d2cp31yFZn8RgVGdpnP4orw4j49s7z6XvsclMEWAZ8trUte/pk57TAISkED3BM5wbGm8WG4WMC/VZRgbM9ZZWzG6nPPns1dtd+akpM/sn3AEB2qM6Z9QXssoAQlIQAISkMA9BJgQ6BjkHvZzubKA8oyx5lx+Jcdbd6L+zNaMS/AwVL69vRUPKksgGbd9AhgI0oDRgM6QwCdtZG5F6lL7StP0uwQk0CcB7nFWpWuM67P+epTa50qPtabMEpDAXQTO3Hr2rjKt5Rs6ydT4ZO7auGbu/NRxDEMxJpo6X3osdjV5jbWcLFTKz/jrBHSgrjMyhgQkIAEJSEACxwnwqj9DWwRih9G2pHpJg51vaZfcu2VefNFODOLuFtL87ycQK09TIwGd4Zcvv/4UnSKzt/mLBs81GAC2rHS+v4QfJaCcDjA/MvGXBJYIxKp0nhulKzmW0vWcBFICtC91k5SI3yUggREJ1Nxqk4mQ6ONPC7xWAd3k9czYptczcN/Dih2bao0bkNcgAQlIQAISkIAEJCABCUigJgEmjNYas9SUK00rdvhpcQXzpBMVB9L3727bm1bi079jUGBQH85UeMT3+AxGeUPHodLbqiE6FR2pUaN+SmA7Ae51jL8+Q376Y3V+b/3f9tq+LibPH53z1/E2JwlIYBwCuV4+TsmWSxIGgpJncE3n9bJ002dfDt/rHN6tb5k1TcmjrRFwzNxajSiPBCQgAQlIoA0Cub+gDameK0Wruj+6ZLzOhNd34UhtcQz781TT0fg9RcVjDOzTZd80bBr62oxttvk0SEACzyGA4XLPlnijEQrHH/2k4RgBle9j/LxaAhLoiwArG312XF9ne/WXWs5X9AaDBHojgNErf/VPb2VQXglIQAISkIAE6hJ46m44dSnWTa1FJyrtBD8kviV2EorQok35kxPVwVtUl585ARp06mDn/UoxUyCPG7/ZyjdmgsexXj6RmzJ6T/RSY8rZEoH04deSXFfJwoSTmGASW56v5a3BfI2Q5yUgAQk8gwAr79G5397edKburPLSZyrxSx1BDO5f74Sf3NypSHINTUW4jNwQASZWExwzN1QpiiIBCVQlEPoBukL8ccx+rypmExuIALb0FlcSDoR4V1FqTfzclfnERfSj0U54NWTr/qNPIz4fAhO16qFJAuEgyE/S8OMmyM/19ptZGq6A6q3WlLcFArGaY66faEHGs2SI9wzE+6HXZnvx3OUPVlwT7wA4S74e04UJf3ByW98ea1CZJSCBvQSYiPPly49ZuSXphNGv5JpR4pZyI/6e8UvJYB/DKxNQc90IvSE/dkU9OMa5gvIz8kBHo30bJCABCYxGgL4N/SB0BMbrTJhmjN+aQ2I09panPwKpbas/6ceXuGTccgWNdCxCHxv65NR46Qp51vL44EQNI+7aRZ6XwBIBGj1KBTPoMXbzh6LBzREzVZeub+lclAOZKJdBAhLYToD7PZ1ZtP3KvmPGKtytfQaDr3C0br2mb0JKLwEJSEACWwjgXNv7XAij35Z8RowTA/HaZWNME4ZTHK/oOVvqaEkfusOBWpuL6UmgNcOcNSIBCUigBoF0971UL7PPq0HXNEYiwNjDCe/t1ij9V0thygfJCuaWx0V/OFFd3dFSU+pfFhQKtreK7X8xZLR2w26hTDkwlpxliNkig3Ek0DMBDItMRti7wqO3stPPlQ6oiL93lVFvfI7K+5e//OV9xm88W46m5/USkIAERiXAs+Xbt29/FA/DxtP6Tsq89ZmczoT+A1r2JTWecuqf//xp0xhhyYGaZXHpz5aNFJeCMLMhCMTql94mbQ8B30JIYFACqZEfHcD+ZdCKtliHCbSq6x4umAmcRmBq7NX62ORn3rXDn7MFTmsXj0sYgwUBowWO1AgYv3sMOIAIUa4ey6DMEriTAH0BzlSMua/3JLc1A6omm1iFWjNN0/pIIJ4tTHAxSEACEhiZQAwkMUwc1UOj7xyZV1q2kklNL77/Si//9H3JeMr1S2HKSLAU/8pzR9vVlbKalwSWCMR9htPDIAEJSKAGgXS73t7G+azoMkjgCgI6UK+gfDyP2P3ueEp1Ugi9rU5q16Ty8zXZmMtTCWCwwWlCCCfqmqGhNVaUAecPnwYJSOAYAfoBZnAywWI0h+qrPPYTx1rItqvpj8Mxj2HbIAEJSGBEAtG/sSMKq0iPOrzoO9MJjiMyKy3TnOEH9jzX4fX6+/op6Rj8Uz9LIZzhS3HuOvf7777H8i725luXAHohY4ywOdRN3dQkIIEnEkj1pnRb39ZZpCtoW5dV+fomMKdH912qMaWPBWKtlK7l8dEcI52oc2Q8vptAPhiPgQyGH2ZDrRkadmfshRKQQDcEGJCEQzUmWnQj/ISgGFujr5s47aETCWAwG6ENnYjIpCUggU4J5DOGcaQeXWXF8/cJfSYD8y0TN5fGJTzX4cVfHlIDZTi78zj8PlpfU2nWPNa6fDXLaloSkIAEJCCBUgKhN23VK0rTrx0fu6s7TdamanpTBNjVdEmPnrrGY/cRmBrP3CXN0YnBd8n9eUR4lyTmOwyBmJWdFgjjQryHacnQkF7j93oEooPivZTM0jVIoCUC4XzsVdlnW1nvq3tbFG2I7ZbiOXOvNOYuAQlIoA4BnKi5k4tnJf3dkYHwU/pMDDvMup5jhX6MQzndri+eIxhLOT93bVovocfktc71res2Pc4Czzn7WwISkIAEJHAmAZ7zPPexdS7pBmfKsDXtnlbMbi2T8doj4HbR7dVJTxLhm+gx6ETtsdYalxmDBUaf1KDA7xik57PqGy9Ol+Kh2KE8BfO0ECh+rNwySKAlAr0adJkUogO1jZbUqyLWBj2lkIAEWiSAc2/KGDbn2CspQ400SvK7Ky7Phi9fpicQwiDnwNa94Uhld538fJQj1bFTJyzn0cO5tnUHapTFTwncQYD7hEAfF+MAfnPvMF51zAoNgwT6IdC6c3ELybCj8f7T/Pnfgw0NR2+qn2wps3EkUEqAnV5sZ6XUjJ8SQMfrMehE7bHWOpCZh3fqRGUWeCzzn3KydlCkrkRE4UPJQwkMx0J0UjzsRlBwu6oQhd1EgHbL+4d7ea8CDtQeBlOb4A8QKd7xEM+aAYpkESQggYcTQIfLjRTsflAr8BzL06+Vdivp8ExYmuyUj1nQRYJLfi7KhB6dBpxAMUnUZ1BKxu8SWCYQk36jH1K3XublWQm0TCAmfU05IFuWO5Ut9K6Y3JHaNNN4rX5Hb4lAf2qQQG0Cvdjqapd7hPT0AxyvRZ2oxxmawgQBBkKp4QGDBNtlxYxsPvnjwY5i0ptyMlHkJg+9DEHTs++bFLiCULS7aGc9DMR9kH2udIydYfDMDZXEjhnq6ZVMEggDTHr8rO9u4XsW2fJ04x6K/g5DdvQB5al5hQQkIIF7CKCz5I64KYdcPB/vkbLPXNMxSV6CeF5MjUXQK+IZk14XExTj2Cvev+KnnxKQwEYCqe6ubr0RmtEk0CABnrPoMEtb6Dco9ieRKAM7UjCu7C2gr6R9auiUvZVDedsloAO13bpRsmsI9PdkuIaLuVQggFECZSpWauVbXZFFPOSnDBcVRDCJBxKIdtb6QBwlN1YuzG0z98Dq+1TkqQHM1LG4EK5nb6HHhBD7rCB+/2feHqgb/lDyY/AYRvL7pVUCCUjgqQTi3Zt5nzXFY25iUM1VqORLHxm6+JQcoxwL3XCuPPGMmHq2s7Uv3FPDcOzuMpeexyUggXUCsWqNmOrW67yMIYGWCGDn41nIH7rEKBO8pvSAlrgvyYINJA0xDk6P+V0Cewhwv4euvOd6r5FATgA/0dvbW364+d86UZuvor4FxDDDC6e5QeaMRsSZmuXdd8mV/i4CtLPWB+Ixg4tVJ7EF6V28RsuX+ucPRa+mYdhV8/21lHQwjwE93nHXX0mUWAIS6J1A6aoGjHg1n2Fz/NBBpla7zsXv9fjcGITy8HyHNcYhjMFTPDjGX+iXV9RNr6yVWwJbCMSKqXyCwpZrjSMBCdxHgDF2jLO5f3veuvc+iufkTL2kYW0CWRrX7xKYIxC2y7nz+XH6BfRpdeWczP2/2UmnpQU8jKt6c87rRL2/HQ8vQXSeDJbmAjfz77//ydVdc4A8XkSg9RmEzArk3Z+G9gnoPG2/jpRQAhKQQMsEMCYsOfGmZEePCSNler72qoLXxKPx34uaMlz6PuVATeNjFCKE4zU918N35I42FJP4SttmD+VUxvYJsGKqdHJJ+6VSQgmMTyB0E3SbdMLq+CVvu4QxMSWk5Hnv8z1o+HklAXRlFlGVOl+vlNG82iDAeFcnaht1oRSNEeChnm8vkYqI0SKcFelxv0tgRAKtO3lHYI6RMCZw7CkP/dFoM2ujH2bwSxtkdupTBleUk8H+moF8T1vxGglIQAJLBMLxthRn6hzPoHwFPQNN+vB4PkW/Th6RD/17iZ4xlc+UPE88FitP07KHATk9dsf30mfaVFnukNs8JUC/RX9V0k9JTQISaIMA42vGyTpQ26iPkCJ/V3tMmIrzfkpAAhKIsWIrJNAHewuuRO2txjqVFyMQytZSQCGLrX+X4nlOAhL4QYAHD0pzPBBLjac/UhrrW/DYW6p4l/Pe61u8LjXG099igP3tt9dMwRblrS0Tg33+MICn7YPvRxzuteU0PQlIYCwC9C88q0snrczFf+nLf5+FhFO0JJAPOvrI/SCz4fcYfHFa85c6IHmG3BWop1TPw0ja2wzuu9iZbxsE6AvRR9FBDRJ4IgHuAd4HnPblPXHgOTTiOLmnOshlpU3lE4V1ouaU/H0Vgdc45fvQ44qrWI6ez9JCu1bLrhO11ZoZUK4txhni7DV0DIjMIklgEwGcQCjKbM02Z3TdlNAgkRhIbOlvBinupmLAhIDRinYSCgsDLs49qd1MrXxwu5lNzchIEpDATgL0uXv62VLnJvH35BP94qjPTp51c05U9Ke1cocztbQ+djaXD5eR55yOR71tXRkbztao6w+Z+EMCFxBA34wJfbGd9AXZmoUEmiEQ9wD9eq/vq9SB+rk5xTh7j/71ObXyI/kqVFLotX2Vl77PK3LbA31Cq/cW+jPP7Fi4gc6MvAT006kJ6Wt6dZ+11r/ULdUL/WaMTXoiqxO1p9pSVglIQAIZAZT1VhWuTNTLfk4NJC7LvNGMXu3kr+8zn3/99bWNb6ym2WvcLy0qgwXCnCG7NL2a8ZFpagBQMw/TkoAEnkkAQ8Nex9UWB19Klfh7AvKFQ67HAe2WMtfY7eZK40NMelozyqIDvr29rSLw/ZOriIxwMoFUP19r1yeLYvISuIUAK1Dti29Bf2qmMTn5jn4NR0S+ChW98w5ZToU8UOLoo6k+SZ/QeqA9ffkyvdMNNp60PK2XRfmuJZDvAhe55/1WHG/9c99Iu/VSKZ8EJCABCTyWAM4ww2cCGK9QcFFkwmB+5XtRw0nZohNV5f9ze/GIBCRwnMDRmeWlTtGjzz+eDTwXYrXYcQLtpDC3zXHMsMcICr94Vt0lOW0m3nm7VQa2G55zfqdbEW9Nz3gSOIMA/RmTA1rUA88or2lKICWAs8uJzymRcb7HxGR0qKtDOjkl8i7VHeM6P68hgI4XejY6Wu8O76Njj2uom0sQ4Fl0RZsjHyYOjeZg14kaLclPCUhAAhIYgkCNB/VVysVVwNMtY8KJSt5XKVAxUCDPGquBSOdoiFlxvc6CO1p+r5eABOoSwDkQhoR4Dh01ZJVux0a+9PdHnBQ8F5accnWpXZfa0q4LlDl/HuYrBXJJcwc5z5Q5R2Z+7dzvvQ6mmBgV6YbsOlCDiJ8tELjDwdBCuZVBAhDInzFSGYdA6Hx32A+mxrGhi45DeKyShJ5NqXwujlW3PZRmaTxUS/4aY6JastRORydqbaKmd5iAD/3DCE3gIgLhhDlirLxIVLMpJIDTb1TjYwz0CpEURWcQGTNj8/dekX8rjlSfN0XVamQJSGCGAA61M3SB6Ednsp08jEHtqCwYdY46BCeFu/FgaX+frhTIxZ5ydoYjM520lF839Zu2g7OdZ2UtIzurndBRNc5NEfeYBCQgAQlIoA4BxrwRrnBORF58om9MhaMT+KbS9FhdAiPpZyW2JexrMUE0doCB7NRkgLrETS0IlI6H4rqtn/SJo40h07LrRE1p+L0aAfZ1p1NkAF/SqSIA8e+YxVWt8Cb0GALRvmsavh4D78SCYpAs7XemxOHhf3S726Mrgqbk2nMMgzoKU3A5u4/F8B/KMPlicI7fyI8cV7GJAWbuVAiDN/dx3Mt72HqNBCQggTMIxGrCPWnHOzLz1ZIlaeX9dsm1LcYtMRrwjGQLqjTAA8Pkml7Aswa9cGkLqzMcp6msfB/JQJeXzd8SkIAEJCCBFghg84zAePKqZy96Sjq2Dhn4LNF30uv8LoFSArTDkpDq0OnEwTW9uSQP4y4TOLt/2DMBeFnits7qRG2rPoaSJgzUFKrUSM2NN/fi6qEgWZiuCWBMwxm0tb1eqVh3Dfag8PQ94Sw8mNT7ZJBUwduaXhhgW5oJysqUI0b5rWXP41EX1Em+PSQDv7MnIOBAjQEmCuPUu4jiWRV1Vqvt5Bz8LQEJjEugZl+f9ltHidG/7Q30z9F/7k2jpevm3ok6J2PUKZ/5JJy5a+I4ekOsBk1nY+OIPfu5FzL4KQEJSEACEpDAuQTQs2Iy7pVjyNEdFefWmqm3RiD05ppjoNbK+BR5znbS3s1RJ+rdNfCQ/MNIvbVTDMPFQ/BYzE4JhIERIyNtdspYiWMmnHAxmWDKkdMpgibFji1C7hIu7efm2gQDn7k2c6bctD3k2+r4ryELK26CA3UT70fFqRr3Ro188jTSeuBcyJDHi9/IsrR9Y8TzUwISkMCZBGoNPtO+d4+8Z/bPe+Q5ck3p84ay15jMyXOH5x4rVdaeQUfK57USkIAEJCABCdxDgOd7OFBT289Z0pDH0iS30kljZ8lpuuMTSFdixy4r2LhiYkFOYG1ske+ell+/9DufsL8U98nnoq86gwF905npnyFzaZo6UUuJGX8TATrTqQ6STnHpgU/izNLW0LAJs5FuJvAyss1vHRtOnFAoEHf0h8rNVfKe/Vq9lMi4xZiNskDAMUn8tI7zvgyFMl2Vkm5pUiLXkbilK2r25EUeKNB5+agbtnufej7syWfumnzFLUp1XhdT19ZsO1Ppe0wCEhiPAHprzX6VvjN9juwlRjpHwwgGibvHFa/nyvG6OFqXXi8BCUhAAhKQQH0CjHcjnD1RGbtDTEiOPNNPdJ6zx9lpfn5/NgHafm7bye0wpYT2TmrH1pPa2UrzNf5xAvR/o4cfvf3oJbV8lxKYczyEs2FJGFb3GSTQCwEe8nOKakwYwBiaGkS5D+au6aXcrctZywg915dF+XOnaBznE+d5GohLQNEkjN4G5pyWZ5c7Vdypg6V79L0isn/ITfvJHeJZNH9KQAISeN+mfK6vGwFPahhsuTwYDe2zW64hZZOABCQgAQmMSYCxbUw6W7MdHCGw5kAlbW2pRwh7bSmB3K7DIpLU7lmaHvFJE70+bKlb0iC+YTsB6qnmBODI+cz+L/K4+1Mn6t018LD8nzAz4WFV+tjiosQubc8WDrMpQGfPUJzK82nHaqzAgdmaEojxnLqeipdvpTOyob2V9pU6UFGm9yiHeT1xr3PPlijyrfBQDglI4DwC+czrWjnVen4dlWeLse5oHrWuT/v66LPDqdoKz1plNR0JSEACEpCABNoiEOPHM1fC/fbbP1YLnTu1Vi8wggQqEUD/JjCJHdsYthh0cCZkYksp0cdDr99if0ltPpF3pSKZjAQ+EdCJ+gmJB2oQoLPjb4+BCeVg7p2ROCswikSnWkNW05BACQGUA9po6jQLpTlNZ2kWDveGbTilVf87dXLmICaVON4zyrFQFB3ApISu+R4TF5gJjLJeqw5IJ96Nt0WRv6a05iIBCdxNYElfPSJbK6s/6ftiZcWR8px9bT77PO2zz87b9CUgAQlIQAISkAAEsD+gw2EvqjUODbLpROE4ln/m+lB+3t8SOJPAkv4dtpSS/MNeOmd/ob1jc12yu5bk96S4ZzHDFprayUdkqhN1xFptqEz5irstNys3HcZwFJBY6Zc6rvItMhsqrqI8gECuEOOom3LYrLV12viU8/UBCC8r4pUz0ULJu6xwZvSJAPfc3AScT5F3HCiZPbkjeS+RgAQ6I4C+ilHrzH7nbiToKfStcwaMq+TjeR59MFvVoYvFe+fduu6qWjAfCUhAAhKQgASWCOS2oqW4W89t3SJVfWgrUeP1QgAbG+OQ3DGXrj7tpSxPkJM+6O4x49mcdaKeTdj0/yCAIzTv/P44mX0JBxMOKr5vvS5Lxp8SOIUABtN0NuD3739/X3XNpAEe9FvaerTxUwQ00XcCGH/tO57TGM4eONKerlrd/Jxas6QS6JsAz5ja75UpMcDlzkVocj06Rq0wZ8Colf5aOnOGEuTizyABCUhAAhKQgARGJBATxtbKxs4hJfrjWnqel0DLBObsPk9YCVmjXs6ykT6hD9KJWqMFmsYmAqwq3boyjJs6buz4JBOuH3nG/yaQRrqVAA5S2nK87zK29sWRSuCBzvm18Grj9bd6Wcv3SedfK4Rfq1dQqPi9592W1PkTFILe24Z11HsNKr8E+iTAjNuYdYuein5wtD/aoi9jMJvb0WLu+F7C6N5vb297L999HRx0lO7G54USkIAEJCABCXRKoMSBWlvv6xSZYj+EwNw4K3ateQiGQ8WsYeNk0i4rhWO18Gsyx+uduIeEa/hinagNV84IomFUoiPjoR5/6Qq+EcpoGZ5DIG+7GPdo1xhMcc5F4NiWFdT5dtdxvZ/HCcQWi/mki3gfQxi8t+RkPW2hZBwJSEACzyaATpA/c84kMvc6gbPy3OLYrZ13TFirna7pSUACEpCABCQggVYJbHWgfv3618MT91ploFwSgEC6qIrfjEfmAnZYdw6bo1PneDhOp+ypT2D/cx2MpiKBeQLcSOm2YhpE5ll5pm0C+cwmHui0b1ahco7VEjErCkPqt2/f3v/mHvRTD562CfQjHXWDIzXte0L6Vz3NK18RLz6ZWWWQAATm7mXpSEACEsh1hCNEtqaF/sFM4isCMtEH8scWu/ydGV55Od/3TMamLQEJSEACEpBAWwTQ69bsROhIOlDbqjelOYcAbb0klMYvSXukuFt2T8zLi20V+/da/5RfN9Jvnagj1WbDZeFGCyPPnps1ipbPQonjfkrgCgJLRk3a+FSg3S+127gvpq712H4CDCrCyc0WhMzmTB2qzFLbGpbqb2saxuufwNq93H8JLYEEJHCEwJKOcCTdtWvTnTDW4h45zwQkJojxx/fX778eSfLDtWEQZCsoAs9eJkMZJCABCUhAAhKQwFMI8LqopfDSl77+MXl/Ka7nJNA7gdJFWCV2vt7ZHJF/z0IRXo/29KAT9ekt4MLyhzKw52ZNxdTplNLw+5UEeCDH6outKzCi3c/JeZXxcy7/UY+zIjitI2ZL4ejGkUofogIwas2fUy7aTbz3+JwcTFUCEuidQM1Be4muXBK3NmOetUxaqhHgR3rp87km0xoymoYEJCABCUhAAhI4i8DLVvGv2eSxb1z56ohZQTwhgYsIMDYoWV2ajiMuEvEx2VAXTw8SeHoLuLD8MaOcmSRHln/jlFJxuLDizOoDAVZepGGtLbMyZWklI9f/+c8vw2Gart+PE6CuMC6n/GPFcOpgPZ6TKYxOAEM+bWntfh+dg+WTgASmCcTqyemzZUfXDGh5aukzLj93xW8G1DxTj/aPYfSIAToGE52oV9SgeUhAAhKQgAQkcDcBJnqHrSKVBR0Lm5I6UUrF708lsLbzTzhd7x4ftV4/d07CbZ3Nknw6UZfoeK46AToytvM9YmwhDbbnjEBauWMrzvkpgTMJRLtbMhxOOfJymViN+uXLR+dsHsff+wgwaWNqBeFSne3LyatGJ7DlXh6dgeWTgAQ+E6jt7MOJ2luoMRAP52mUvXT7rrjOTwlIQAISkIAEJNATAV49lNsntHP2VIPKehYBX6l0DlmdzPu4up3vPm5edYAAs6tYeWeQwAgE0rY8t9U0K6eXtqBAYZ67dgRGd5YhZqIdlcH3sh0lOMb1azMfxyilpZCABEoI1HT27TEU1FwFW1LumnFzHQnDYe5UrZmfaUlAAhKQgAQkIIEWCGBnyB2o6HYxYb8FGZVBAncRYBFWGtbsMUxI0EGYEpv/XmqDLo0/n3O/Z3Si9lt3XUs+tTKs6wIp/GMJ5A/1ORBrW1D7btQ5csePr7HfkgOKGAqZ4dkEaqy2ejZBSy+BsQjg/Kvp7NuqUwRFjGwtbO921FiRloEBuobDqGE/JSABCUhAAhIYlUDu8EGv5F3zqV40atktlwS2EMjvhXj9x9y1+YSEuXge/+l9l9ASDqXj1JK0e4mrE7WXmlLOWQIatWfReOICAiXtL19pkYpXkk56nd+3ERhhpc62khrrTAI1V5ydKadpS0AC1xBYmw29RQqchhjRWIkw9S6suTRacaDOyVdyPDWQ1HRKl8hgXAlIQAISkIAEJHAVAfS/1OHDLhyvHcx8695VdWA+fRDg3jDUJ1D6CpnS+PUlvj9Fe+f760AJJCCBjgmkzk9m5iwZ/zASzq3WmDveMZqmRA8DbYmBOi0ADnBXxqREnvn9t99cjfzMmrfUEpgmkG7pPx3j81GMZuw+gf6w99nfkgP16C4NrLgwSEACEpCABCQggScRyMeV2hqeVPuWtYQA90Y64aDkWuPWI7B33FpPgvtT0ol6fx0ogQQk0DGB9EGSOlSnirS29QSG1SUn7FSaHttOYK8j9bWtztftGRlzSALcn+n9PmQhLZQEJFBEoPSZzQzevZN5EKwl5yny4EA9YtSgPKUMydcgAQlIQAISkIAEeiQQk+nScaUr7XqsSWW+ikC6AtJxQz3qaR+0lmpaB2txRz6vE3Xk2rVsEpDA6QRwsMXDB0Miq1LmHuwcZ8VFvP80X4WytpL19MI8IAMcqTizS97LXOOdqg9AO3QRGeyWtJmhYVg4CUjgncDSFv1TiI46HEkzJgNNpX/1MfrFow7UlspzNT/zk4AEJCABCUhgfALoS9h5sP3M6U2uQh2/HVjC/QTWFqukKaf22fS436cJ0D/N2a/jiqOTgCOdET51oo5Qi5ZBAhK4jQAGwHCiIgSOlqWVIjygvnz59Q95U+cMDycNin+gOe1LOLN1iv1AvEV5+hH7Wd/Se/RZJbe0EpBADQL0IWzZluoKNdK9O418G7oSeVhxob5TQsy4EpCABCQgAQn0QgDdb+urG1yF2kutKuddBFInKpNSlyYd5PbZu2TuJV/6qdQ+PSX3kV2UptLr+ZhO1J5rT9nfCYxmlLJa+yLAQ5qVjamBlIdMPGi+ffu2WKCXU/W1mpW2rDNrEVe1kyn3tURHr5NYHeW2xZ9bgrPuPjPxiAQk8CLAM/v79+8//fLLr7MzeGv3IaRHCB2Dfhs95GqHJM/Fvfo3Mi8ZP150/S8BCUhAAhKQgAT6I4BuuFVHwoGqTtRfHSvxdQSwVaX309ruf2uvULtO8jFyoj8z/CCgE/UHC791TABjDk6sJUNWx8VT9MYJvFY2ft39brB0ttSWmUCN4+hGvJR7N0JXFpS+E0WU1dMonKM7jEvw1XZ+lORtXAlIoA8CL0fq339KjWD0HcyY5i8d9NcoUThPIy3S5488c2cq/Tk6xZ/+9KfqTla2pdsTnKyzh5rXSEACEpCABCTQCwFeBRT2ySk98K4JcL3wU04JBIG5CQnY/udeuVWyWCLy8XOaQO7Ano71rKM6UZ9V38OWNrblXOpMhy28BWtohGm7AABAAElEQVSGALMIMVamRs4tTikMn3HN2syqZgo7gCBzs9RiS50wgI/s2KZsvKcXZTMCyuqcUhpxRvqMlV3RHmCROlDDwRyMuKfjmTMSB8siAQnsJ8Czm7+7QupMZUIhfXtMkEHHqB1SvaUkbeRkQL70/viS9IwrAQlIQAISkIAEWiPAuDHG04wdY/IZ480YU7Yms/JIoDUCU5MQkHHueMjPvff29hY//dxBgH7rzrHtDpEvueSH1fSS7MxEAucSWOtMz83d1CXw0/tqD5TjcLJsdcDhuIuHlJMBrmlJUwOYFrcZRIGhTeSrjGpQmjJkMxHgCQFHKX9Lz438/capc/UJjCyjBCTQFwH6s9A/8v6rdkl4Xi71n2l+xE2fLehGv/9ef4VsmqffJSABCUhAAhKQwN0EsDlM2R3ulsv8JdAyAewuSwEb2dJ9VTJOWcpn9HPp+2ajrNq8gsTnz2dYSj+X2yMDE+CGP2PW/cDILFplAjzMMV6yunTqoTSVXRpvq1FyKh2PlRFgFSYzQ+HPHyt4WgkohrGaCCUwVkrWlI+2mr7ngL5z9PeyhFN67T7LV+iqTNZseaYlAQnUIpDunkCa9G1nO1DJh+fFWj9KvHSrY34bJCABCUhAAhKQgAQkIAEJzBFYc6JuXawyl77HXwQYy6U+FHYMisU9MvpMQCfqZyYe6ZwAjiu3yei8EgcQH+NiuiJ1rUhbDJFraXi+nABOxKUZbOUp1rkiddidbYDGcRwrl2LboTqlaC+VrUohTuu8XZzhxG6PkBJJQAK9Ebhr4stan0g/ii7En0ECEpCABCQgAQlIQAISkMAWAkfto+yAczSNLXKOEAfbI+O6WMAxQpnOKoNO1LPImu6tBNwO9Vb8Zv5vAjhhvn37Jg8JFBFIHX0Yoc82kNNOWbW0NtuvqBCNRWb1aTiKt4g2ZfTPnapb0jGOBCQggTMJ0HffEeb6VJ5ZGC34m+pH75DVPCUgAQlIQAISkIAEJCCBcQikO/lNlSp9jcjUeY/9IICzucRW9uPK533Tifq8On9EiekEcERMve/vEQAsZBMEMDKyVayGxCaqoxshUoXwqu2FR2+jTKwpCVMrrLifDRKQgARaIZBvOX6VXOlOCWmeV2whnObndwlIQAISkIAEJCABCUjgeQTWVplO2XOeR8kS1yagE7U2UdO7nEDMeg+HaaziYh9v/u4yMl0OwgybI8DKNZw3GBxxhrmSrbkqalogtvG9ss2M6kjl/ltTstOGgCMg5z7nNEiv87sEJCCBqwjUfD7EhK90Ag/f6TdjS14MEUwK45UZU0EH6hQVj0lAAhKQgAQkIAEJSEACJQS2TF5njLIUcnvOUtynnYNdiX3saXyWyqsTdYmO57ogkDun2PqSpfth6HFr3y6qcVghaYs489keYcnImD7IMI4anksgDNdnb+P7BMIlzk/uwbl3wpKOQQISkEALBOirtjwfMECgA6OHpPHpz3CShqN0qUw8j7YMskedhLPExnMSkIAEJPDT/z0jXs+aOR1aRhKQgAQkIIHaBLZs15vaWGvn33N6PK+/f/++aYzXcznPkF0n6hlUTfNSAlPOKYw5/IWhCOXemSiXVouZ/ZtA+nDHsT9naCTeGc4zVmaTdp4v9wYrS7wv2mqqMevuqm182yp9XWlo4zGZZkvK6b2axqdOtjgR0mv8LgEJSOAMAkuTPSK/MGhHv8Unk7kMEpCABCQggZoEQtd2AnBNquOkFba4dCLXOKWzJBKQQOsEwsbaupxXyhfP6xgnXpn3CHnpRB2hFi3DH4by3FGU/xaVBK4mkO/Fj1NzaSBR23nGNtdMNGAQw4wjPvnjoTm1benVfMzvIwG2S3QL8o9MSn/hQPjnP/+nyGmwtLKr9H2qpfIaXwISkMBWAms6QrzSYmt6xpOABCQgAQnsIZCuYpmbiLgnXa/pnwC2hnQia7x2q/+SWQIJSKAnAj6bPtZW2Lzoow37COhE3cfNqxokQEeg07TBinm4SKz0TLeRSN85lqM5w6lJ/qTLQObt7e2PLJHJ++UPHM18sU6OVQUOVCYNlIY5BTsmHJSmZ3wJSEACtQmk70HFWRqB/otnR2rQjnNXfKJPGCQgAQlI4FkEePYwKdcx5bPqfa20U7oIk1t/+ukv7oC1Bs/zEpDAO4FXn3EcBuMj7TkvjowjYzGPTtT9bUsn6n52XikBCUhgE4F0Bejc+2LigbYpwcJIKA/8YXTFiRu/C5MxugQ+Edi76hPDC3+xpTSKXLyjj0w4t3XWMjIQSlefvl/073/kNxVUMKeoeEwCEriSAAZq+qjQE6ZWm6YrPq6UjbzWVsdeLY/5SUACEpDA+QTQ0wnxbDo/R3PogQD6ytQ2kb5CqIfaU0YJjEdgrk8ar6TrJZqa5LJ+lTFSAtNWwzSG3yXQEQEM3mGU3yN2GONV8vbQ85olAi04Ls8Y5MbKvzDybnV8LbHyXPsE6Gv5mxokr0nPNWvXcT7e4RdtK9KN1dxraUT8LZ/cn3nAUVEzjzx9f0tAAhLYQoDBP89WnrdsL95Sv3TGDhpbmBhHAhKQgATuJfDabenXe4Uw9+YIYG+IMRzCoSdMjbOaE1yBJCCBrgjQz2yxbzKOMvz0oV+Wx34Ctqb97LyyMQIYlVLD0rdv3zZLmBqmMNjPrRbcnKARJfAQAvG+yPT++/LFAfXI1X/1DLa0bZ3Bla1NpkJqACBO+nsqvsckIAEJnEGAvofJI6mOe0Y+pWmiL2sYLaVmfAlIQAISkMDYBHCcorc4uXrserZ0EuiBAGOVO3fs6YGRMm4noBN1OytjdkYAQ/9WZygzKcM4xScrkLbMaukMieJKoCoBJh/EfRMJxyrB+O3nWAT2rj4NCl+//vX9fTikQ1tpwTG51tfHDGriITe7Hex572ow8FMCEpBAKYH8WVt6fc34TCphVrcO1JpUTUsCEpCABCQwBgH1gzHq0VJI4C4CW2yKTObcGojb0lhqq9zGa4+ATtT26kSJKhGgkyxxpGIojxkqMesfI9Gagb2SuCYjgWICsYJ662SB4gxWLvj999e7KNNoKicpjfG+40Q8EnhvKSuVY3BN/0o75jjK8tXtZ24VapQxnL7xG7mZZGOQgAQk8CQCser0yCsznsTLskpAAhKQgAQkIAEJSEAC9xPArn+1nen+UivBGQR0op5B1TSbIUBH+fb29i5PrCaaEw7jeLrKimv5c7b9HDGP30kAx1OshuP7He/xxZiah5IZYfm1/m6fwFHlM1aeppNT0ncq0QfHZJa7aeQOVOThXosy3C2f+UtAAhLYS4BnNfotYcsElrsma+0tn9dJQAISkIAEJCABCUhAAucRiMnwqW3nvNw+phzjmI9Hp3+xtbg2nGk2Hi0j8HNZdGNLoF8CWwzzv/zy+V2OXHd09VW/1JS8VQLxLlLkm1oReoXcOL9wNKWr+WKF4RX5m8e1BGr1gyiw7BIwFWg/L+fl9u1ZptLZcgwnwpLCPzUxYelecwLBFurGkYAEWiFA/8cfDlL7r1ZqRTmuIMCOEvxh/DNIQAISkIAEJCABCZQTSG2S5VfPX3F04n6e8pRdJ4/jbwlsIaATdQsl4wxDYM5wHwUMp1BuTMKRyorWWk6EyM9PCewhgNEnVSzubJfcMxhhv3379tPaau89ZfWadgjUbGe037n++NUPf31vT3lfXJNGyezFyBcnL+2cvzTwG0cEn2fKnObpdwlIQAJ7CdAHpw4k+q90QtTedL1OAj0QQG9lBTY7uuBMranf9FB+ZZSABCQgAQlIQAJHCKA/YRtBp+ohOM7poZbal/E//va3v/2/9sVUQgnUI4CBe8u2ZAyo+UudVUgRna/b/NarE1MqI4DCkm9HMbX1aFmqxpbARwJhYGf1JcbGvM19jL3/F30qW6zMzRDE2Zr3w/tz+3Hl1mfBjys+fkMuBg5T7wiE3V3vef0opb8kIAEJTBNg0gd9WBrou6LPp98nsEvLXP+cXut3CfRGgHFe6DfoBNwP+T3RW5mUVwISkIAEJCABCZxJIOwgZ+lM8Uq+pTIs2T/DjoU9JuxMHIvXoS2l6zkJLBH4/EK7pdiek8AABGIF1JojNQbSDLDTrYDDkRDO1AGQWITOCEQbTMVmK421Np3G97sE5giUKpgYHplUkiqoKKyEqbaa50sc/uacqaR9hhP1aJpL9xsOhy9fXrMytwwCcib+loAEJHA2AfTb3Pjx6rscHp7N3vTbIBDtn1UU6D7oLnw6aaCN+lEKCUhAAhJ4DgH0Uv6WxtjPodFuSakj7Chn1RN62JYwpatN2bGwM2GvMkigBgFHyTUomkZ3BOj0Wc0XRv+lAjDAZqVRPmuFzriXrQuWyue5vgigtEwF2rSGnykyHishQPtKJ43MXbu0YiN1IIZhkpVNa+mGMzXyjIkqsRoqjtf6zLfkrZWu6UhAAhLogYB6Qw+1pIxXEUh1l6vyNB8JSEACEpCABH56d56u2Qrk1AYB6ulMpyR2o70hJvLn1zPmMUigBgGdqDUomkaXBFKDfRjr55yir4H1l/cZN2lhcTjELOb0uN8lcBaBKSdqOLSmZmOdJcdcut4Tc2TaPz61TXQu9dxq0Txe+vvVf77UjZLBEX30WWFqG8sz8oKpQQISkECrBDBUtKA7tMpHuSQgAQlIQAISkIAEziPAQoCwEYRd9rzcTPkIAWwbYQ86ks7StUcm0J9pP1qS2XPPIaAT9Tl1bUkXCNDZrj2wcZbmM1h0GC1A9dQpBNg2A0UzZmhNvY/xlIw3JooCHLPTYhW3BtqN8G6Mtvbe0RpOR9oDfWbej15d7KX3Z9SWRUW+NlHTk4AEahI4YqioKYdpSUACEpCABCQgAQk8i0C6/SoLA+YWtTyLSrulvaJ+toxNplbC0pYMEjibgE7UswmbflcE6HjnHD44AGKGVBTKrdCChJ9XEkhX9l2Z71pe6aq7170xvW0GExauUMDW5L37PA5FlETe+Un/cldYcqDWcJ6m5Trr/aZpHkvfaXtzffzSdXvOUb8GCUhAAlcSwKjwyy+/vk+04vmyNpFji6HiSvnNSwISkIAEJCABCUjgeQTQXw3PJoA9fu+E+1hk8myClv5sAjpRzyZs+t0QwNDE35LTgHO5I5V917988YHfTUUr6CkEUHjWjLWRMfHudhyGLHd9plvnxnbMd8gy50Bd6gfvkLNWnrS9qxz4OMZxUPDu7Qi//faP3QODSMNPCUhAAikB+mt2pSDEJJH4pP+h3+GZa5CABCQgAQlIoD0CSxP525NWiSRQjwD6KpOc0VNDd62Xuin1RmCrI3RqXOME9t5qu095HVH3WW9KfSIBnKR0wBjAt6wOu9Iof2KxTVoChwhgpC0JMRlhyz1Wkm4PcelfUofz3tl2R8uKIzfPG4cuW0afFVpY9RT9+1llTNNNHbZTvNO4fpeABCRQSmBtEg4GqTP79FJ5jS8BCUhAAhKQwEcCOA74e+K4+CMJfz2RQDpefmL5LfMPAlsdoVM2pdyu9SNVv0mgHgGdqPVYmtJABOiA+cPREwYqZvnPderOHhyo8i3KZgK0e1ZiE/YoLVc6szYX6oKIDJBR/MKRuvY+5jNEgn3kH+mfvfq0BSdi9OdR5qs+p3hflbf5SEAC4xKYmok9bmktmQQkIAEJSGA8AtiZvn//+/uuEq7GG69+LZEEJLBOYG6HtKkrsT2mtkS+GyRwBQGdqFdQNo/uCOBMIISjY81BxMxBFd7uqlmBdxJASeFv7b5YS57rnzoBIWZc0sfE9zVetc7DPFYCkyaORd5BclYfRltJ86tVjtJ07noXb867VG7jS0ACEpCABCQgAQlIQALjEYhxNeMxgwQkIIEnEtgz2T5djUo/apDAFQR0ol5B2Ty6I5BupYKDI1bcRUfNzH++hxMJB0F6TXcFVmAJFBCo4UCN7J78TuGrnafBnJnOaaix1SN95NQ2VCjE+YrXNO+rvt/lQKV8pVtdX8XEfCQggf4JuBK1/zq0BBKQgAQk8FwCqU2JMRpjFt5nftbk1ueStuQSkECLBLAtHrUXhV2+xfIp01gEdKKOVZ+WpgKBqa01UWK/fPn1U+p0+LHl76eTHpDAgARqOlDBg8LkQPG+hvL1618PZU57SNsE31nVikO1hdWnFI6Z3Xc5rNNZlcihgn+ouXmxBCSQEWALQIMEJCABCUhAAn0SYIzCWJhJl4wTGBvzx7ihxkTXPqkotQQk8AQC7tj1hFoeq4yOvMeqT0tTgUCsNt2SFKtPcRoYJDA6gViNfXSW2BSnmHWbntOxmtI45zvblh+d5Rzvdw3nIJ/5StdzpN+eKk7du0LcLxhCkKM1NndxMV8JSKAOAYyu9MPuhlKHp6lIQAISkIAEribAeAyHKXalmITKmIrx99Gx2tVlMT8JSEACWwloG9lKynitENCJ2kpNKEczBF5OgO+bZ/6FE6GZAiiIBCoSYDDHXzjJKib9IalwNqUHp1Z/p+f9Xk4gJn2w4r6W0Z0Z1GwpGYP+kKqVlZdXGx8weBBYjRvhTkduyOCnBCQwHoGXkfVf7/0v/Tp9ca2+fTxalkgCEpCABCTQLgGe3+wwEY6FJ7/2pt1aUjIJSKAGAXbsMkigNwI6UXurMeW9hABGKZwNWwxRxAmj+SXCmYkELiBwlfP0gqKYxb8J0E/F9uO1t7elH+QvlGFWEuNEPNv5vqdyw5GMkWKLgxVuU+97ncs7DB84NGIFKvlEvnPXeVwCEpDAEQIxGYl+nv7HHR2O0PRaCUhAAhKQwPUEGDN8+/bt3b6UTsi8XhJzlIAEJHAOAewrMW7ZmwMTRyMw7jmaXqTlpwSWCPxodUuxPCeBBxLY6kQFzRZD/AMRWuROCeAIUwnptPJmxEZRDefemasiaztnZ4pTdPjt7W01Ps5OQqqMs7V76gTGMcE7ZMMhyjOC+GmZw4kcGebvMoqVYlybph3x/ZSABCRQgwDPcP7o2+indKjWoGoaEpCABCQggWsIMN7QxnQNa3ORgASuJcAq+6OBCfERGOdovwwafp5J4EerOzMX05aABCQggS4ItOJARQnS6FunyaR1WuM9qHWkaiuVcGjG55x0vH8wjZM6XVPOU9enOxvkWx9PxfeYBCQggaME6K/445kak0COpun1EpCABCQgAQlIQAISkIAE9hBgsvrRkE4yeU06+fLBTnM0fa+XwBSBn6cOekwCEvjJDthG8DgCa06gJSCsdmHroZeR9rWqbyn+lnOsnGQFpWE/AVY8xmokHKipI29/qtuuTBXbbVe0Hyt1oLKqNFahfv/+ffPsR+rEIAEJSOBqAjVmfV8ts/lJQAISkIAEJCABCUhAAmMQwOaY2lRqlSqd3F4rTdORQE5AJ2pOxN8SSAjowElg+HVoAkccqDiTYtvSVt+DOXTlzRSO/osVjzhPqZ8rHagzIg1zmEkDqQN1aiDASuqpoBN1iorHJCCBswm4zdXZhE1fAscIoLehjzMxyyABCUhAAhKQgARGInDE5phyiFcxpcfmbC9pHL9L4CgBt/M9StDrhyaAQ2jE1VRDV5qFKyZwRJlJV+OF065YgJkLUI68/2bgbDjMqqO7t2+kDqccjBvEbzJKvNM0HNIYOqfKRzzaLvcWIRyufJ+Kz3GDBCQggbMJMIkj+q+z8zJ9CUhgmgD6cqwMjy3tct0A/SImKE6n4lEJSEACEpCABCTQBwF0nzMndGJ7Gc321EfNPktKnajPqm9LW0iAVVy8sFpHTiE4o3dBAEUmf8fjVsFRUH755dcP90YYhLamsSUeMnr/bSH1MQ7cUsfdx7Nj/WKl7RXvGKXNB1P40t5zoydkIx5xGCiwzXUEjhkkIAEJ3EVAJ+pd5M1XAi8CaxMX0SHYks5t6X60mNCdmNyM05nVJo4NfvDxmwQkIAEJSKB1AjVthXM6EhNFp+wzrbNRvn4I6ETtp66U9CYCrka9CbzZnkoAQ2rqeAqjzdrsMOLlztMQFAcThg3uGdI/qsBwPe9FJU9n4wflbZ+tGJdQcPN2wCpNjGD58W0l+xiLtGJVVdqeP8aq8+vVHl9b7C3Jzrm3t7fJTLk3DBKQgAQkIAEJPIsAevGSbrykXz+L1I/S4jxlHJAHxirofzGxLT/vbwlIQAISkIAE2iEQk8vPlgi70Nk2obPLYPptE9CJ2nb9KF0DBGKbpQZEUQQJVCOAcoHBBkUjXW2NE3TKYLHVuIPzjj/SzR21S8KTPiFmlaVOtnCSLV3vuTYJRH0iXd6G1lZjrJWI9MKARhu+Iiw5T+fyjy19Ob82SWEuDY9LQAISqEGAPow+KfrOGmmahgQk8JEAxsJYNZnqsx9jffy1R7/4mMJYv+YcqFFK9Cn+2I3EcUJQeebnlvEEY4Z8zLtEKyY9EKfkuqU0PScBCUjgqQTY/a5myN9/Sp8dusBVu5TVLI9p9UPgGqtjPzyUVAKfCOhE/YTEAwMQSLcYTYuDAxTFgxCOqb2rGlFkuH+mHEcxmA1lJ5UhvsegOOSI4372QyBtAxgI05X9GPFxsu6dLciK6Ag1t4eJNGt9TrX/WmmbjgQkIIFSAtEn6UgtJWf83gikzsxcdvSPJR00j7/ld8nkQdJDF0YO/tIJjVvyGjnOmgM1LTs6JNzndslJ47b0nXfeEnqTuyWGtJOtr6VhDBITFeK+mytLPCPjfFw3N3aOeH5KQAISkMA0gehHp88eO8rzlPTRB2Ji1ZwN8lhOXi2B/1v0IwQJSGCZwJkd/nLOnpXAPQRqGpXCSBsz8bc4T6PUXOt7j4JGv5/UY9R/OEyjjfGJ4XDOCZobMoIC7Sh17s/Fi/h+SkACEpDADwLRZ8Yz+scZv0lgDAJbHHGhixwtcanzNPIj/1oyRJq9f+5hyVidXXTY4reHcQNtM+wLPcndUtva0k7mnKVhXOd81MNa2b5+/etaFM9LQAISkMAEAfrr2iHsQKSd9uPYmvhDHyjp42vLZ3rjEtCJOm7dWrJKBOiADRKQwH4CR4y0oSDtz90rWyDATPvYJjp3pFLHX778WFUa8sYs/fidfqarUNPjfpeABCQggW0EcKRiTPad49t4GasvAmtbx2FcqxFiBcSetNCHnr4CFQNoOJK3OMaWONOn8RcrUZbi3n0O+0JMMOxJ7ru5kf/SPcd9TXvacl/hzGYMwieTOaM+yIN0WCFO4HPPeDR2VCItn7PvKP0nAQk8kEDYfmoWPfpv+u2pwHPVIIEzCOhEPYOqaQ5FYK5jHqqQFkYCHRB4e3t7lzIGtm5/1kGl/VtEjA/p+ylQpjGWzW1jhuEhnVWYlpR0cmNGTHZRYU5J+V0CEpDAMgH6WQzSGniXOXm2LwJLOkRakjDCpce2fA+nSw2dgwlmrHLL9ZotcvQeJ5xh6IPo9DV4wqT1sTt1nU8epE3xyou9bbL3trBFftoJYWl8EA75LenFPTdVH1uuX4sT7RB5rdc1Wp6XgARGJMBz/ozAxBeeo9HPnpGHaUpgioBO1CkqHpNAQmBOUU+i+FUCEriAAI4yDCyvwei/FnMk7pEVsIuJe3IXAQwbYdyI2dlT25hhJJkzpM29jyjqmm3ctr4faVchvEgCEpDAYAR4ptInRz86WPEszsMILOkQKQraPTpITMxLz+HQC30lPc730F/y40d+I0cPqyePlDG/lnqKMfYWvT6/frTfL0eeprmlel1azdT6RIQw+C+Vz3MSkIAERiKQPudrlwtbEXaf0CNqp296EpgjoKY2R8bjEpCABCRwKoGYdc0MMv5CCcKgFQFDFgElCQNvGi/iTH2GYsWsbrZ0IsSM46n4HruWQBjrqaf4w4BIXS0ZSbbM5I52dG2JzE0CEpBAvwScyd1v3Sn5DwIY7JZ0iB8xf3xbcuDljtRYUZFuxfojpX3fnrjVJ7pcaT3to3v/VZSV4BjkWF0ExzyVXu4fn7F5zflbAhIYmcAVz/m11zaMzNey3UdAJ+p97M1ZAhKQwGMJLBm6UidYfMfRtjWks/nzVYnhoMU5i2NWo8ZWqsfioUjnrHGkUg9hSIvPIzmxmsMgAQlIQAJlBOJZW3aVsSXQDoHaBjv01Py9ium21+RXQ+dI02yH5rmSnG34RL9vIcRYZ+o1FC3I15MMTIrNQ+u7DnFvRxvwGZvXnr8lIIGRCZz9nIed/erILajdsulEbbdulEwCEpDAUAQwOBHY0qjEKVoCId/OiVUEqYIV3/lkVvATjVclPGvEDQNC6tyOdKkfjJS0ialVxji9cbTGDG6MKLkzNtKKFSLx208JSEACEthGAGO0oQ4Bnnn5CsY6KZvKHIFaDk3SR++g/tbqcE4XmZNx6jh60dPC1vfV7uVCX1ajbvbmH9eFU39K9404fm4nEOOA/IrW+9t0nNO6rDlbf0tAAhLYQ+Ds5/wembxGArUI6EStRdJ0JCABCUhglgAOrnBgzkaaOYFBZKvTNVYFcA3Ot9jKdypp5MHI0YKxZUq+EY7Fu8PCKDlVJvh/+fLrh1PUCw7TNSNmxJtywH5I0B8SkIAEJDBLgGcsz8y1Pnc2gYefwDjOcyh0lXwF48PxnF780P2OZlTq8CrRT3PZSvPKr+/hN/dFjV1GSsrayipUVuHkEztLymHcjwSmnKjR33IuXhPy8ao2fk2Nc9qQTCkkIAEJ1CUQtp+6qZqaBNohoBO1nbpQEglIQAJDEsCIsseBinEqttzlM9+adwlWDKyX4nBuaWXj2rWeXyYQjnPqsdS48TI4TKsotKe9bWpZYs9KQAISeC4BnB06/7bXP8+h1HGaXqlukdLo4zu6SukkAnTTrfpmSmFPXun1PXyPlZhXygrXFiZGYkT+5ZdfP8jy9vb2jmKPTnwlwx7yil1q4t6bcrD2UA5llIAEJDASgSsdqDwH9tgXR+JtWe4hMG2hvEcWc5WABCQggQEJYGgsDfnsbYwibL1bWzlDtlKjWWlZnhYfpvnKA+ptKpSufLrDKDclt8ckIAEJjEYAg0QLDogeuK7pIhr1r6tF9IIaAYdMqU7C/YJTLJw5yBEOHtIi5PoQ50snlr0n1Nm/M9+HFo7IqHsmLbSyGhGZaA9pHYecnVVhU+LilE5XnMM3ZdyUsAojAQlIoBECPH+u0O3X9OKaOGInj5iwXzPt0rTQR9D3Yvc79JFc7ytN0/htE9CJ2nb9KJ0EJCCBrgmgUJXOEkMZmVP2GDBjKClNcw4i6aCA+W7UOULrx1HO595pytWpcTFNjXoOhTM9vvT9TKPcUr6ek4AEJDAyARw7Pgfr1bBO1Hosr0wpDF8lk+vQS8OAluuu6JdpCOdfemzE73t0/60cUid08I7PrWmcGS919J2Zz9PSpo4xnHOP1hoDPo2h5ZWABJ5FABsNz6SzdfwrHajUYOhojFtil4c7ajacuZH31RwiXz+vJaAT9Vre5tYhAR46BglIoJwAitucA20ptbWZxbUVJgbjKD1r+S7J/MRz1O+WLZbpQ1F2cZgSH2NjbNNcwq2F2YYl8hpXAhKQQC8EYtVcL/IqpwTOIrDHkRoGvVQmduVInT2p8y+NN9r3vbr/Vg49TvZgZUoEJ1gEifJP7rO4r9xJqJyfV0hAAs8hkO4Mdqati3z22Ptq1QS7190xeYlJcaH7bbWJ1Sqz6dxLQCfqvfzNXQISkMCwBPasGmRG15ZQW2HKt97aIsMVcVDKWOXZkoN3q6IYztNQMOG1x/iFcs5faoy8gr15SEACEpCABPYQCIPV1M4Z+esK9qTvNT8IpA6qH0ePfcORWvJ+4Fh9EBNvmZSQGxVpE0wGy9+VeUzS9q7eo/tvLQX3TssB/Xgq6DidorLvWGzrK9N9/LxKAhJ4BoGYEBalPavPzPOJ/K76ZJeC2nbBNdnTSXGps3rtOs+PQUAn6hj1aCkkIAEJNEWg1OmFMlJiWEq3dWqq4JWFOdMYtUdUDERbZvvl25uU5hXO49wIWZqO8SUgAQlIYJ3AWcaV9ZzHjTH3/GJi1Jcvv45b8ItLdlbbRdf59u3bYmly41lM9orP/OKXI/Xv79uSphPM8ni9/saZPFf2o2VCr2xp296j5fH6fQRi/Me9Z5CABCQggW0EsLPVDjzzWwjxXLjKoQvLrYsKWuCjDHUJ6ESty9PUJCABCUjg/wjE4Bbn6JpBZe87ojBAlShL5IOxbU2e1iqwlW0Wc2PhFKe9dRlp6TwNEn5KQAISuI5Ab8/F68jUzwnn6p4t7etL0n+K6CVzzuozS7dFH1rKH90VfbSlXUaW5N1yLlbjbom7J07PTuezHP17OI5wDW2BP8YMOtZHqFHLIAEJnEngjElI9L936F9znHgmoJudPZ7B1sUOKCU2yDmZPd4nAZ2ofdabUl9IoBUHxoVFNisJHCIQs9Ji262llYtHViyivJUEjJa//vp67PXirEMRbKEP2vI+0qN1yarbsxXfkvZiXAlIQAISkMAZBFyNeowqOtwdOsNR52laaoyPONf2vOYgTaeF73c5s1soeyrD675+7ayTHvf7OQR0oJ7D1VQlIIH+CcQWtyxoOGMSUmu7pVFjsd37WbUHS4IO1LMI95GuTtQ+6kkpJSABCXRDIHVWYliZC0ecbqRZoryh9KSDbb6znR6rAHD6tuConOKE3PC8OmCgZJbd1hl9WxR00sShHnF53xjhDkPo1TzNTwISkEDLBOiXDdsJ8Fw+MgOfa0dahbid3PGYZ694nJKwpvM0TZ+JY0xSG8GRmpar1ndWfHCvnfHe21oypumk45/0eDpBMP2exvG7BCQgAQlIoBYBbF3Y2sLeUitd0kEPa/FZFmU+y8lJmVssd826Na11AjpR1xkZQwISkIAECgikzsqlLayOKHU45EqUmKUZeC0bMkveE1tQRZ+iYsQjhDO51Di8xDcyY4Y+QQU0iPgpAQlIoA0C0fe3Ic05UsTkoC3PqzUJUj1nLe7ceeSpkc5c+iMev9qBumUXjqOc0Yne3t66fk8q9xT6fqnuuMSOiR2hn/dyn8zJyYogdOCafJbYeU4CEpCABCRQQ9/NKV6hF+V5lvymzNgYl3bC25IeDujaes2WfI3TPgGdqO3XkRLeTOCOVWA3F9nsJVCNwJITdc7YsCXzcMhtiUucM5TIrXkfiXeE0dZ809WmJY7pNP01hzjGYo1HKTG/S0ACEmiHwMi6Ls+49DnHd3SCo3oBTp69z0xqnl0YXIFYdg8s6ZRlKW2LfaR+t+XwIxYrJ/g7ukvLjxSv/YbDk/qpxYx04l69tiT1c0OXj91vKJNBAhKQgAQk0BuB1h2owZNn7pHJS7GC92qdM+T3s20CP7ctntJJ4H4CVzgx7i+lEkjgHAK1jCmpdKUOuSu3KcQ4wooCVkv0Eo5uecJ2a2v9ZKnTuxd2yikBCUigdwI8I9f68F7LiMGHZ1yqi/CdYy9jUNm71VMOR52wyIE+Y5BASiDaZnqsl+9MCqipc8OiJ316Sz0d7Te25GEcCUhAAhKQQE0C6KupLl0z7TPSYlzD5K5v3769T07bqpvgQCWwktUFAGfUTP9p6kTtvw4twYkEtna2J4pg0hLolsCScfDIvVXqkDvDYEHZcJimM8r5jsGHgNLVgzN1qY5qNTzyUAmtRdN0JCABCdQlwLbxIwaeyUsGH85hJNnrpEG3YBLRkVDybvcj+Yxy7VJ9jlJGyvFqm6/XLPRWrtqrq9EfmfBgkIAEJCABCUjgHgKl9rd7pJzOFX0d3YTVqa/J/18mI3IutedNRvLg4wm4ne/jm4AAlgg84R1RS+X3nASOEDhL2UodcihDBPKa20bsqBMVJ+Dvv//ve/pTeXAslSll1uI2IOE4pUypEziVu+T7WhmPvpOiRBbjSkACEpBAGYERV6GWGEF4fvO3ZxtVZrmzFTLO0D0OPq5B1qN6SlmNG7sHAuFIre2UvKLssRUeuvmcflwiByzQXUfsq0o4GFcCEpCABCRwB4Eaz/IacsdK0T1poUOwtT4B3Tu14bHAo5Uy7imb11xHQCfqdazNqUMCOlE7rDRFbobAmnNtj6Cp0w8HahhUQiFi9Wcajqx4ZXXKFmVqS5xUpru+n/UeizlDHwYvV9ncVdvmKwEJSGCdwNGVlOs5XBMjJjuhI/BM2hP26izoITi6yDt2oyjJn2t4r3joMyXXPiluTAB7VplZLf39vX31VO6YFPDbb/W2q/Ydwj21AGWVgAQkIIFRCLSyG0Rq+zvKNvQU7P3o4XvHDkfl8Pr+COhE7a/OlPhCAhg1DBKQwD4CZygj3JMYfVF4pgyOOE3TfENBKi3BVgfqWrp7819Lt/Q85Um5lF6/Fp+0U0PfXmPyWj6el4AEJNAjgXhu8UzAGVRrhdYRFsjESsreQ63n9VEO1C1/e+Rhx4Y9K2GPyuz17RPI9av2JX5JSD9XU+8kLXTLVvTqXupBOSUgAQlIQAJ7CRyZnLg3z6nrsPFN2f6m4pYc095fQsu4ENBDZDuQwAKBMzrqhew8JYFhCKytGNi7ypt7MladTsEi3dRos8fYUmvFZisGUZTfK1bLwh3jMeGK/Kbq32MSkIAEWiPAwD91VsZzLD22JjPP1NhWfqp/JY94rk6dz9PPZcrPn/07HMnkw3a4e/XtPQ7LubLtXYmap0e9klaqi+Rxpn4zE57nNfV4hMlU2iMcO+sVET2woS2lE9V6kJn+qnbgHtmj19eWw/QkIAEJSEACoxNAV+e5O3J4jck+LsIYubyW7TgBnajHGZqCBCQgAQlkBFowdmEkLg0YZOcMn5HeFkN1ze1GSsuQx79S+d1ivM/l87cEJCCB0QiEU5PnRY1Zzq9B/mvYhpMunJBTzrb0HZ3x3vBwwIaj8M73LOaOz3huxDOWZ/CWZ2ieztE2RL61Vrrh6JnTJZbk5Br+gkm6gnnpupHPUc97nNKjMaFd4Ej95Zdfd086uJJJ9DW186Tv2zvporYspicBCUhAAhIYkUBtHbtlRozV9ujsLZdJ2c4joBP1PLam3DmBMOZ0XgzFl8AtBNaMJxgIS1bhbC0ExuMwPpbOVscwQ4h7H2VqaTUpeeEsTo3krRl2UIANEpCABCRwHQGeIWc7KV9O1emteDmX59/Cs4lnLO81nDNUpMfZ3hYH4pSTmJo8y7hTa6Ub+keNLdD26jPXtfZzczqrns+V+rzUuUfi3jhDh64p+do4YG9eTAhpoT/bK7/XSUACEpCABM4iwGQrdNBSO1jIg+565QT8yDf9DP0/nQAaixjSeLW+M9Zwsl4tmuOnoxN1/Dq2hBKQgAQuJ5AaQ+cyP3s2eenqnyWj9FQZSuNPpXHmMfiGAfbMfExbAhKQgAR+EGClmOEjgT1GGZ5f8QzDoJKGOJ4eq/W91rapNWe2v729LU7qqlX21tI5yxHXWjlL5Yl7Y2miX2mateNvGQfsyRPjLn9bVqvvSd9rJCABCUhAAj0SYOIZz17+0J9KJ1uh/5717C7h+ZKdV3id765am+BZIrdxn0Hg/Fb5DI6WckACZ852GRCXRZJAMQFWcS6937Q4wf+7AGULoxIO1CsUrz0yXnUNK34MEpCABCQggbsJHHWGnek0zdm8DFDHV7ulO2Pkeez5HSsD9q4u2JPnndfUWMl7p/xX5E2bgFMvW/zWZIKOm6+4r5m+aUlAAhKQgAR6IZBPnkdvRvfeoh+gR7Skc53lyKWMscgi7GRn5dVLu1HOcgI6UcuZecVDCOhEfUhFW8xTCLCd4V1KyREDIwpohNhCpHQWX1x/9+dd/O8ut/lLQAISuJOA203eSb9O3jUcNK/dKurqQk9ypGLsMqwTQNdji9/WVqWyUhS5zgqUG5396RMmz+JruhKQgAQk0A+BcAqmEq/pB605T5H9rFei+HqItGX4/QgBnahH6Hnt0ARilsrQhbRwEpDA6rvV5t7JJjoJSEACEpBATuDoqss8vRF+116VeTYTDE8YXI5OomJSF2nVDE9wpOIcq82tZh20mFasSm1ldWbsDBPt9QxmOGkxuBJi8vPRe/YMOU2zbQL0NzFxFkltQ23Xl9JJQAIfCaytIuU5zF/s1kZ/t3bNxxyu+XWWA7WVbYqvoWguZxPQiXo2YdOXgAQkIIFJAhhVrwxTq0zJf2mbQJRNZ7lfWUvmJQEJSKBvAjpR26w/3quaToriPaNLAd0Ax8yR3S249gwnEmnSzkY09qOrnbmCcanOez+H4xl+reittP+zDbXhbOczHKq916Pyn0eA9kjfyV+0nTy3EfvVvIz+loAE+icQE0C26plb491Fhq2Hawb4sEJ3rq+vmZdpPYeATtTn1LUlLSTQygC0UGyjS0ACGYE923dgiNnyDoksK39KQAISkMDDCTBYb8mR8fDqeC8+DtTcMM5zfs2wEganI47Us7Y1jfddtbLysFY7Y4WEYT+B1rYT595Zu8/2l/bjlUfu048p+Ws0AluN6UyeNUhAAhJoncAe+1bLZUJPD/t7OIdjZ0iOx7F0EsyUbp+W0Ql5KQ2/1yKgE7UWSdMZjgAzFR2MDVetFugiAqzeWDOahKJ0pkilCqbO0zNrw7QlIAEJPINAjXdqPoPUfaXcoqcg3VFHKroOhp6lXS/2UkDPYkUtjtordKq9cpZcF2Ov4F5yrXF/el9h1xIH6vOqugyDa0vlV5b7CWx1oI7Uj95PXQkkIIEzCNCf/fOf/3OKTnmGvHvS3Or8XJpMCCeDBM4goBP1DKqmOQQBZrkYJCCBPglsHTBH6XSeBgk/JSABCUjgKIG1SURH0/f64wRK9PxwAoWDrzT3WAV7hiMVWTA4sYJqr3yl5Tk7vs6w/YRL2vX+XMquPGs1dioFevyVEwliW9i4t1NZ/N4WAdoFK/bnnA8j9Z1tkVcaCUigNoGtDsba+Z6dXqq7lEw8ZLzFO0/zHeRwNBskcAYBnahnUDXNIQhg6HBgNERVWogbCLDCYymcuV0Sho0weC7JwLmRnaffvn17Vyo15q+1As9LQAISqEsAA4DhB4ErnRs/cv3xLTXOcBRjeumzMfSKvY7KGFOc5UhFPsoZ+fwofX/faC/oZ6V1dHVJW5SxRWbUJ3p/3ENn1NPUuIP7/IwJBrHLDfVv6IfAq1/5dYg+sh/qSioBCdQigLNw1JDqLuixf/7zXza/z5Rredandr1c7x+Vm+W6nsCylft6ecxRAk0RcEvfpqpDYToigJGR+ydViEJ8FJy9RshIIz5LHKZxDZ+pkpUeH+07M69RuKfqYbSyWh4JSEACrRBw8N5KTUzLsfe9m+EE2qvDhGGI/Gkj/NV8Pi9tbTZNot2jMK7JZmtJ0Q+nHHLp9ZyPNtCijoXz8O6JCykvvsOL9n7WJIKpPpdt1Qnct6xursGEcUeU4Y72+V4g/0lAAhKQwKMIzNnVRoKQ6i48r0ufscQPZ2rptSNxtCznEtCJei5fU++cwNSArPMiKb4ELiOQG8DCMFVrlQSKVhg0txaK1UHMbKthSNma593xcKTGrPm7ZTF/CUhAAhJ4HgGeQS0FjFF7Q+gd4UQrTQf9Y04HiZVzpWmm8TEc8Z5U9J1a+laa/lXf4Rusr8hz7+S6XNe9Qta1PHDSz7WxtWvPPE97rD1xYE5e+pzUiIphtcY7L6lvHLI4aEk/NfrOyeJxCUhAAhKQwF4Ce2xee/O687pUdzmip6fP/jvLY95jEtCJOma9WqpKBJhp2rMBohIGk5HALgJhYKw1+zsXImaY58fz3xjGwujRolEpl/eM39GPxez5M/IwTQlIQAISeBFwAP/igBHkSkfYlvaXO1e2XJPHiTKFnpOf3/u75jucRhjDnL0FLPW013kadUwbSI19rFK9W9dq+Z2yZ+2Qkve5U3XAuIH8jwbGEqRDvadG36Pper0EJCABCUggJ1BTN8zTbul3uoAp1ataklFZJKAT1TYgAQlIQAKnEahtYEwFxYDBzDwUyyljyRNXnaZ8YHPWloFpPn6XgAQkIIHPBJ6+QqmlHRBwsCAPO1FM6Qufa2/9CI7UmpPEaC+1ZFuXvo8YMQEuVv3VlPqo8zSVJXfM4UgNR3sa74rv6L6tTxj85Zdf37fcq82De5xJg3xOhegHYmLhVJySY2eOcUrkMK4EJCABCYxLIHUujlvKHyVDH84nRv046zcJ3EtAJ+q9/M29cQIMsJ8eGIjy4Gag6GDx6a2hvfJjKPry5dd3owkz1vh7YlvVYdpe21QiCUhAAk8kwHP4LgfSEm8clLWdlPHuJZxCNRxXjDtqGY5GGcPEqj/GIzXqr6bzdK69oYdyH9Sqy7l88uOUrZaDME+75u+X7l6vrYdstI+1lcARxzFtUPNTAhKQgAQkcD8BbM61dL37S6MEoxLQiTpqzVouCVQiwMMMIwB/NWfcVxLPZCTwB4GRnafhJI17MH5zf8Y9+gcIv0hAAhKQwO0EnrbNY0xkutpxdHdFU95wpuLA4S+e1SWyhbPwqRzXWIVz8IjOg5MxXzW6lu/e82ettpySp8f3357FZ8sEjoijI3WqNXlMAhKQgARaIvAUvZpyPqWsLbUvZSkjoBO1jJexJfBoArXeJfNoiBZeAoUEnJFXCMzoEpCABBoggLNn9MCEHrbUP+LYupoRjrQzjDS58WevYysmhLW6ovfq+krzC0cqx0onk13pQEU+nOLfvn37ICfHo1+o0QYpU61V0Mh2ZThrNerWMuBI3TPZYWv6xpOABCQgAQlIQAISGIuATtSx6tPSSKA6AWbU1xjoVxfMBCUwOIE5AypGM4L35eANwOJJQAJdEwhnSdeFmBG+x9WSqcMJBxyrR88MsfVs6vgryS+cqU+dSEUdEeLd7oxH0pWDLydc+6aMJTmp26kJCKHnUea5kPOYi9fy8bNWo24pM4ypmycH+nHaXzyruL90LD+5RVh2CUhAAm0Q4BmtrauNulCKjwSerTl+ZOEvCXwisDR4/RR50AN//vNf/ngHUWq8GLS4FksCTRD4/v37H4ojSiR9EfcixkSMHiqVTVSTQkhAAhJ4HAGcW7EdZi+F/6//+q9PDjhWioaj86xykD4OiiNbyOKE5fnPbjAtP/vDIRMswzET+stWh9WSg5t2R72N4ECEUzjYKTP63dMcWLQJ7s2r+5O9q8SjbY/yybietvenP7369LR/YezR6yrnUerHckhAAscJ9P58Rf6nBZ4/6M1MNEP/JfS2683T6uxJ5f2Pv/3tb//vSQW2rBIoIeAg60UrVhwcMQKVcDeuBJ5OgHsuNabFPZgaOJ7OyPJLQAISaJ0A23mOFtJJPq2XLXeepvJimDp7NWrkFwah+L33s0QXuGIME8Y9HIBrjrAtDCjfWjopu3CopvpSet7vfRC4sk9Z6hP6oHWelOFsiAkQkVM4++O3nxKQgARaJzCl46Ez4JTbOqnr7jKW6kR3y1sj/yXddapOa+RpGhIoIeBK1BJaxn0cgZj58riCZwVmpqqrUDMo/pTASQTe3t7+T7l/rT795z9/On2lzEnFMFkJSEACjyZAPz5auNLZcZQd/Jd0V4xoxLlichJ5wO7oZMTQx1sxrLEyYOtqXhhgAJszXpa0rdCRaCM4UA19E+C+KKn/pdLSNvL7jHZHW+3JeL5UxrPOvfpE76ez+JquBCRwHYGpSXLoK/z1MJmm1jPxOuLHc/r69a+zOiKpX6m3Hy+NKYxK4OdRC2a5JFCDwNxAv0bapiEBCUggJ4Chh4CxMRT9PI6/JSABCUigfQKjvRICx90VDsdaNRtOu6X0rqwj5MEoVhrQC0I3iGtxpmJsujvkK9bW5GFL4qlQ0rZYpYCTjNVx/On4mSLa3zG2jq0Rpu5p2ki0lRp5mIYEJCABCbRLAJ1iKZTqLktpnXGObWx70rdrMdhie6+lK9SS2XSeR8CpZs+rc0u8kQAzWQ0SkIAEriTAlngGCUhAAhLon8Bou5mUbLPaSu2x+uzLl3nnzNZVlLXKE47UfKXcXPo4T2M1Ray+jPeBYmzCkRrn59I4ehxjHiHyPZJeOLZzQxlO4a1GzSkn2RGZvLYNArQJ2vhRw7Hto436VAoJSEACdxFYc6K2rJ+jc12tm95VT3m+6Ly5fpjHqaUr5On6WwJbCehE3UrKeI8j4CDscVVugSVwO4GtRsTbBVUACUhAAhJYJLBmCFi8uLGT4UhrTKxVcTBEzb3Pb83Itpr4zgg4ieA5J1eabOogfTkg//V+GtlxxNLG5hyptfQJxkPhQOcTRxdOT7bR3ePwYjXqlBN5C4+Ujd/HIsA9sac95RTc3jkn4m8JSEACzyGAfrT0LEGHaVU/f+IWvntaJnrpUh3vSdNrJLCVgE7UraSM9zgCGF7ooDEUGCQgAQlcQaCW0fMKWc1DAhKQgASmCWCkGSUwM7znWfEY1FrT5YPnkuNwycmL8SjKNbeDBXF4x/rRd3/BLpyotGnSPWK8el2/vtpglPvHcqwTqLnyplXj+DoFY0hAAhKQwF4C6Kpb3tPe2kIZ5GZy2RG9ai+zXq9Dd8ZmJrNea7BvuXWi9l1/Sn8yAYwGzGh1QHYyaJOXgATeCagM2hAkIAEJ9E+gNafdEaJz77E8kuaV186tTJs7fpVsOFIxAtFWpsYaa5OqcKJy3ZKzlbKEA/RIm+Q9pOH4rcFnbZvlGnmYRj8EarYtVvKEkTy2bHQc309bUFIJSEACWwnggGQiGXrQFhsKExyXJq/N5RuT1ubO7z1OuqGj7U1jpOuoy63Pa1ejjlTzfZVFJ2pf9aW0NxBgKy22ytraod8gollKQAIDEGAgYJCABCQggf4JHHFYtVT6GltsshKScJehqMQoczV7jH5h+MvHGmtOVK7bunoB9kfaJEbHmo6uqzmbX7sEauu+6T1Fm43+x3F8u21AySQgAQmUEuDZkb7yYO16HKhTrxKYuw4HJ3pY6D78Lrl+Ll2OkxZ/of8txX3SuTW990ksLGu7BH5uVzQlk0A7BEoe0O1IrSQSkEBPBOa25OupDMoqAQlI4OkERtnKFwNVGI/21mlsJYsDDyfhHWFuxWlrTpVcB9ji9CwxwLFC70hgNapBArUJsCr5rECb5T5q7V4/q7ymKwEJSOApBEp2SdnqQMWxyeRBXoXA5LNUB0bf4tzRgG5N2iX629E8e7k+5d2LzMr5PAKuRH1enVtiCUhAAhJojAAKNYq7QQISkIAE+iawxfnVQwlLDFRT5cFolbLInYRT15xxrBcHCjpAyovvOIBrTeTEYIeusZdH7dWoyEKbmNrK+Ix2YJrPIxDb+T6v5JZYAhKQwLgESlZxrjlQ0UW2vEsVmjj5WC3JVrL87dFfzpw41HuNl0zWq62T9s5O+a8j4ErU61ibkwQkIAEJSGCSwNYt+SYv9qAEJCABCTRBIFZeNiHMzULgtGP1IwYqZu/ftZ3vHIajKzPn0t17PJyc6fU4PGuu4D3qGC8xcKXlyL9jiMQ53FqbyOX09/kEztq+D8P53gkD55faHCQgAQlIYC+BWroDzlh0kZIVkOhqxEeGPZPcznrm7WXZ0nXxPvMtMrn4YAsl45xBQCfqGVRNUwISkIAEJDBBAGMyW8TwGaFkNmVc46cEJCABCbRHIF1J2J50ZRKVGDPmUn45UssMVHNp1Txe412vNeWJtKZWKOAIwiFUI1AfR7ajq9Em8nLo6MqJPOc3ujBt8ozw6nu+u8vLGXBNUwISkMBNBEp1GJ4FUw43JtIddcaW6mZnPvNuqo6q2c69fmMqk6N1N5WmxySwhYBO1C2UjCMBCUhAAhKoQCCMocxcDIU+PiskbxISkIAEJHATgVJjyk1ibs52lK0w00lLFB7DWcmqg83AKkS8YoXCaxVouXPprNXE6kAVGk6HSVDve1bxlBQV47mG1hJixpWABCRwPwH0tilnKcf26G+pnsH314T24xN4SieW3fVai/trdF2Ckt0jcr1+PXVjSKAeAZ2o9ViakgQkIAEJSGCVwC+//PoeOvS5ogAAQABJREFU57UNDFsdHlfiVzM1ggQkIAEJnEqg1JhyqjAVEh9lhWC6hS0GuJafuXMrJmq3rXAulWxpzPunam3nmzZPdKHWDGIYWVuTKWU2wvfUqH12eUra+dmymL4EJCABCSwTiHeU0nfHs3ivA5Wc0HlIC+dpzYk1pboZu9XwiobRJl0u1+a2syU7+aR6/bbUjSWBegR0otZjaUqDE7hysDc4SosngeEJoOinin9a4FiNyrGWjbmpzH6XgAQkIIHnETjDaXY1RZ6zGM54Ju9ZwXC1vCXbmR2VDTYl4xscqWcYAFsziMFk1BUj6KfcD3FPHG1De6+/Uv8tbed7y+R1EpCABCRwnEDsykHfzY4FNfS3M545e/Q17EBfv349ZVLacfL3pbCVJfrZGXV5X8nNuTcCOlF7qzHlvY0As5ZKDA23CWrGEpBAEwRQ8Kbeb4ZwsRq1CUEVQgISkIAEDhPowUFXWsjSWfal6V8ZvwejC07rfAUwY48z21YYK7fWxRkGwJZ0Ila9IE/Jqoit7O6KRxuKVTjRlv7rv/7r3ZB7l0xX5+sY/mri5icBCUignAB9da6v5b/LUz3nilxfK8klJqWVXDNy3K0sa64kHpmnZTuPgE7U89ia8oAEWtxyakDMFkkCwxPYqigOD8ICSkACEhiIgIb6gSrz4qKwvRtGtTTQns42GIVTLc13y3dk/fbt2/vfnq3puIZVrVOO4y35nxUH/Ww0He01fv3x6ggcqCM5ibe0hZEmhGwpr3EkIAEJ9EigdGLXXWXco/fksqJrjLDjS16u0t/oJFsCO2kYJHA3AZ2od9eA+XdHgC0lYm/+7oRXYAlI4BICawMA+5BLqsFMJCABCVxKYCQnKivXznbgXVo5jWeWO7WucKAGkqPtNpc90l365BoMiDhj1YmWSB07B9vc2Lt127xjOXu1BCQgAQlIoIzAmg2lLLXzYteamIMOlD+jz5O6vZQp+xYdEl1m76S/9kqtRD0T+FPPwiu7BO4igCP19U4gb6G76sB8JdAiAWbIbVHwRn3XVot1okwSkIAEriLAlmM4pLYYBK6SaU8+OFBb3T5tT3l6uCZ1bGEsutKBTV60W4yC4dSM1xFwbK49vxx0f/oplX0L69xoNtrKzy0MrooDW96/RqC+eP+svK+ibz4SkIAEJFBCgOcV+gh/LeuhtZyosEHHarmsJfVXGjf0k7Xr0F0MEmiBgCtRW6gFZeiSAI5UHu4GCUhAAkEgnz2JQ3Wqn5g6Fmn4KQEJSEAC/RLovX/H0fJUY86RVodjcOu2bMTjL7azTfOFP2OMqwN1HkZBnGx8R4fBwfr29japyyAj58LhWiIz5TRcSyB1qF6b8+fcnrzy5jMNj0hAAhKQQBDAqYhzbes2r3HdlZ+lk8eWZKO8T3wmbq1fxlWOS5ZakOeuJOAyuitpm9dwBDAs4DRh1rZBAhKQwC+//PrJ+BmrSV6zDF+rAFQEbSsSkIAExiRA/46DqNfVXu6UUNYucYamqzUZE2DwSZ3pnOcPo1veLr5////eM3w5Iv/ySYcok2Z/7HyHHXQW/igHegx/ufxRli07cKSScY+Eozj45Wmn8f1+L4Foz1tXjGyRlvtBXXgLKeNIQAISeCaBVA+Jieql+sZZ5EJXDj3oaD5TNqSjabZ8fb4jyZKsqT69FM9zEriCgE7UKyibx9AEeJDzUK85sBwamIWTwMAEUKSZVReO0ygqv+knWlH8Qy4/JSABCUigPgG2nepVL9RYsb098LzHyJeHMPzlx/PfKWv0g7t0hNyBmsoZZWFiAO06HF84P3EY83lE7vTab9++pVn7vQEC1HvotD1PDgkDfANIFUECEpCABAoIpHpWqjMUJFE9ajwXSRiHIBODCH/+8+t97+8/Cv7N2ZAKkugq6tYxEnpy6J1dFVBhhyXgdr7DVq0Fu5JAPDSvzNO8JCCBNgmg6GNUzEMrSn8ul78lIAEJSKAugZ4H/D3LXrcW11M7up1bK46dLSspiJOOd9BpeHduK2VYry1j7CFAvcc2g3u2bZ7LE0OzQQISkIAEJFBCYMrGMnV9PLemztU+ht6MTvTSi/7+/poDJh2VBmxIV8pdKl+t+Fu38SW/1IFeK3/TkcARAjpRj9DzWgn8m4ADQZuCBCSQEmB1xhOU4LTMfpeABCQggReBXvv/dGWkdblOgO3c9hjKIuVWJlf94x//CJEWP/PXl2A4rOl0P8JyUXBPHiLAihGMnjXbK87ZrcbwQ8L/++Ka7bSGPKYhAQlIQALlBNYmbqF/s7sGz60rnzF5Sdi5Y09gW9+RA/VT6hjtdUw1cj0+uWxu5/vk2rfs1QhsmcFdLTMTkoAEuiCA8v729taFrAopAQlIQALPI4DTFINUGKV0NJS1gdjODQMPqzRLtnFryWGIc4w2MLe9WrQTyodRsqYzrYy4se8igNGTlde021rjXpzytDv7nbtq1XwlIAEJ9EUAXWvumZG/YoFnDH+pvsXkN547Z+sxyIjuVO4wfO3+MFfGvmrro7QvB/fXjwf9JYHOCOhE7azCFLdNAjUHlG2WUKkkIIFSAqnCXnqt8SUgAQlIQAJnEsC4E07AM/NpNe2Y2V7DUEUa/GGUy414c+WvuTXqXB4lx5F/zuCH84y2QvmCW0naxh2DQC3naUoDx3046c92qDpeT8n7XQISkEB/BGJHjNQJuuacS59d8Z10ztaD53SqNeqsRv3+/e9r0bo6v1ZHS4VZcpwvXec5CZxBQCfqGVRN83EE2K5hbvb242BYYAlIQAISkIAEJPBgAum7I+cwYNDHkVayenEurdLj5P1UByqGHFYGxOoAtrJNjXGlLPP4cMUZFIa+/Hz8Jk5rYe4drxgd4RbO4rPkZoVIGDjPysN02yMQ9yKS0TfRDjA+094MEpCABM4k4OSKM+mek3boV+hu7I4Rv8/JbX+qL52pXK9BD+pt14/QEadobZ1cOHUtx2rq6HN5eFwCWwnoRN1KyngSWCDAA/L79+8fjDIL0T0lAQk8gABGIIMEJCABCTyPAAN+/jAqREgdq6lBIL7zDqerHEh739UUZbnzE6awDG4lskwZcjC+1V4Bh2z8YQRD1tRJhLwYbVt0EC05MSnH2TK36FguaV/GPU7g5bB/3TO1Vwktte/jkpuCBCTQGwHsdzzXpnSD3sryNHnR3ab0q60czp5MiK7KitK9ej0TLPfouVvLXzNe6OW5jsjxowuN0AMMEmiJgE7UlmpDWbomwEODPzr6ow+LrkEovAQk8E5AY6ANQQISkMCzCaQGhfT7FBW27rrCkNeqA2+KSX4s5YMBjbLgGMFJGd959sbzN5in1+Vp8hu9nRWpXBfXTMUrPRYGMFanpjK0tpVvlIsxDKtRg2kc5xPeUZ70eM3vpJ/n0fIqk5plN63PBLiv+au1Wjz6hc85eUQCEngaAfqVeN5v3UHiaYxaL28+QW2LvOiK6GC5rrHl2q1xUn1v6zV5vNeEotcOIPm51n7jLEZvjFBTb9OJGlT9bIWATtRWakI5hiEQytgwBbIgEpDALgIYHMPIO9p7LXYB8SIJSEACElgkgLFgr1EoTxiDRu40YNb+ndv4xmx15MBZFzP0MWoRQubUmYkxKo2bljNWrXEs/Z7G2fqd53UE5GG1bk2dHu7UL8amvF4i37s/KW8YF+eY3y1jSf7whjvtLhxyJddPxQ0DbLThiEP7I78RuEWZWvnk3mRVTuk9Sb0TqCv+9vStrTBQDglIoC4B+hRCONP45NnsYoi6nFtJjWf3FfaY0DdqlJvnVk09tIZMeRo4TEP/Dt021afz+CW/qbPWy19SHuOOQUAn6hj1aCkkIAEJSKBRAunMvEZFVCwJSEACEuiMwFUGoT1YwlnKtWGoxMgyF+JcfBKP8vH8vMPxgRxnGG5I8woj3hznLcfDoIzDCmMyjsFw/m65vnYcjHKsGErDFodYbNPIdXDnj3IccaZy/ZZJCLR/DfFpjR3/zj0Z7TGtg7SvoV3gxCakfcnx3E1BAhIYjQB9xJcvrwkaMXnojOf+aNx6LM/WZ3eNsr30vO9VdIBwStaQ64w0eP6mDtP0e438Wt21pUbZTKNfAvOj2X7LpOQSuJ0Ahh8Hb7dXgwJIoAkCrSvATUBSCAlIQAISeHf04PxZcsCgY5auyDoDLbPP0xAOjFr678vAec9QNXfapeV8yncMgXBAh3kZBf9+S9HJm788LDnXuUemrom0KFOpsY80U+ddLk/6m3vBcA6BI07wcyQyVQlIoGcC4UzlmYCzzTAWgSsdqEEOXQP9qVTPiOt7+VzSw2qUISb11UjLNCRQi4Aafi2SpiOBhAAz52sZkZJku/uKwYEgi+6qToErEtCJWhGmSUlAAhIYnADGlylHKjpVrJa4G8HXr38dVreDs4abVwtrmcOSgXJtB5Ao11YDJ22iZAVxrL6++z41fwlIQAIS2E7gbKfQdkmMWYMAekI872ukV5JGDfvP1GSwEhnOjMsq1LPvF/JomcGZfE27XQI6UdutGyXrmAAzns5+qHSMR9El8CgCKn+Pqm4LKwEJSOAwAZ4bqZPojpn0U4Xg/aSj67es8jW0TwDDaLr6OSZu4kDdspqI6zFyLq36hsKee8/Jo+23HyWUgAQkIIFxCaRb+t9RytHtP2u6Uw3m6Hijc6zByTSuJaAT9Vre5vYQAnb2r4rWiPCQBm8xZwlsMeTNXuwJCUhAAhJ4LIFw8rSgUz7BeUpDwxHXAu/HNvrCgm/dXncuWeoaQysTA/hDZ8OxGitI9rSFfJvrubw9LgEJSEACEpBAXQLocS288qJGqVpdicmY4IrgqxGuoGwepQR0opYSM74ENhKY2opt46VGk4AEBiGAUQ5j3F1byQyC0WJIQAISeCSBPU6c2qCe4kCtzc30+iDAPcbfUYdslFajX5DwUwISkIAEJHAdgT07R5wpHQ7d0RaVXLGNb9TJf/6n7qpg4Wc7BH5uRxQlkcBYBBiQ40g1SEACzybAO7dcmfDsNmDpJSABCewhgLHiqhnfuXyR9+jb96blxtjF+14NEthL4En3y15GXicBCUhAAhKoSaA1ByplW3s/e83yX5XWL7/8elVWwzmgLwNnRqcS0Il6Kl4TfzoBHalPbwGWXwIvAq5MsCVIQAISkEAJAZyYvHMIp8yVE3HIC0di5F0i8whxdaSOUIuWQQISkIAEJCCBJxD4xz/+UW03iZZ4tWY/Ynxw5cpaFyS11BqVJQi4PjpI+CmBkwiEI/WKl2+fVASTlYAEDhBocWbkgeJ4qQQkIAEJXEAg1RvZ0eDsbeExjvz5z3+51EByAcZdWYQj9fv3v++6/kkX4exnrDN64P44+x4cnaHlk4AEJCABCdQkgKOtRR0E3ailnSmQZ4tTNt4JH3UUbLmeschVAcd45H1VnuYjgS0EdKJuoWQcCRwkwAOAB8GVD56DInu5BCSwkwDvv/jnP//n/V2oKn87IXqZBCQggQcTmNrC99u3b++viaj9XPGdpw9uaBWKTnvEwZiHERyOlAujI4ZQdLsRypTXk78lIAEJSEACPRJo1YEKyy0OyyXmNXUOHKDpxMylfFs4xwIE9a0WakIZpgjoRJ2i4jEJSEACEpDATgI4UFX8dsLzMglIQAIS+Ok//3N6iIYRhEl5a8+YmHG+FI84vNvoyq25eqpanuWGbQRoZ7kzPp84ikGQwDvCMJDVngywTdLlWHHfTK3I/u23fyxf7FkJSEACEpCABC4h0PpKxaNO1Fo6aMsOVJzgU+OQfDXsJQ3KTCSwkcD0CH3jxUaTgAS2E8DAMDUo356CMSUgAQlIQAISkIAERiaAwWPJsYlzKndQzfEgXuq8wjARK+vmrvH4i4BGnLKW8N///d/vFzABYKr9xjE+YduKE3XJcRoEWnX6hnx+SkACEpCABJ5EYGmSYAsc5iZDTsmGns5ELfRz/ri2Rvlac6BSTpzDMTZBD+S1Gez6EeMaV6FOtRCPtURAJ2pLtaEswxPg4djTVgrDV4gFlMAJBJgs0ZKB8IQimqQEJCABCZxEoPY7lFLn1UkiD5lsK06+nuCGIzXd3jd3RrfGdWoVRMocg16UKz3udwlIQAISkIAErifAKtRRAo5FHImEmvpR6phsgVW6iw62snSlLQ7j0BVrMmih3MowHgGdqOPVqSVqmIAPhYYrR9EkUJGA93pFmCYlAQlI4EEEajtRH4SuWlFHMtBVg1KQUI0VFAXZHYqK8TLfihjHKQa9PeXAIBoTFw4J5sUSkIAEJCABCXwiEA63TycaOjClB6BbpDr+WZO0cp3maiy5HsTvVJ/itQ7pb+TTdnZ1LZnfXgI6UfeS8zoJSEACEpBAQuCI0S1Jxq8SkIAEJPBQAukKvociuL3YPMtz487tQinAqQRYaUq9s43e0bpndcWXL7+eKq+JS0ACEhiFAH1v9L+xpecoZbMc5xBgZz/aTMu7RPC+z3QHwliJidxnyr/HgRr3II7MLa84WKpVHKaxNXHEy/WqlustZPZTAnMEdKLOkfG4BE4iwAPUd6OeBNdkJXADAZTF2IblhuzNUgISkIAEBiGAfmi4jwDPc4079/G/M2eMhzVWQvSwQuZOzuYtAQlIICVAnxn9L9/XtlhPr/X7cwmwopO/cE62RuLVpl87U+BQDf2Cz/R3Tbm/fv3r5p0wcJxyv+UOzrgX4/iW96pSB3EfR3mivPHbTwmMQkAn6ig1aTm6IcADKX0oIXi8RDzd3qGbAimoBB5MQAfqgyvfoktAAhKoSABDxdT2XxWzMKkVAsyeN0hgL4Etxsa9aXudBCQggREJsPqUCWQ8f18Ops9brI9YbstUh0DefuqkWicVtq2Ndp2mWNPBGI5TbFJTYwgcnLHCmzjslpE6PNFbCHMyMalhKeCMDdv2UjzPSWAUAjpRR6lJy9ElgXhYxSeF0JHaZVUq9AMJ6EB9YKVbZAlIQAInEVgzVJyUrcn+m8BZKwME/BwC6dZ9LZc632awZVmVTQISGJ8Azp/Y4hSnDDtC4OgJ58/4BCzhEQLRflrT487e2SSdfDnlQE0dnKnjNGUdesuUg5V4U+lynPhTDmLOGSQwMoGfRy6cZZNAbwR40PLwN0hAAm0T0IHadv0onQQkIIGeCPAu1DlDRU/l6FVWZuqnExp7LYdyS2ArAcebW0kZTwISuIoAiwlw6vBeR1a32U9dRX6MfJ62GIXdDJdCOHG5l9BxX2ON18pTruM+i8AYhEkLWyd06kANcn4+jcDyXfc0GpZXAg0Q4AH39vb2f8a0L74TooH6UAQJBAEcp2zLwkw+ty0JKn5KQAISkMARAuh7rrY4QvD4tWuGqOM5mMLoBDBO9hQYb6bb/PUku7JKQAJjE8AZ9p//+af3rUexi8WWpWOX2tIdJUCbeVLAJhV245gIyJgiXhWXskBHScca2LXmJm+SRqTHatbcOc2xOJ/m4XcJPIHAs3qZJ9SoZRyGAA+m79///j5jiPdEzD3khimwBZFAowRQMnl/hI7TRitIsSQgAQl0SAAjBYaJ3DjRYVG6FznqIGbtd18gC3Apgd4mQmBg1QB6aRMxMwlIoJAAtq8vX368L1V9qRDgA6O/2swPB+CoCHCIhn0438KYZ3v+fJ/SUeZsyywYSK/HUZsHnKgGCTyVgE7Up9a85e6GAI4b/thuIYw83QivoBLonIDb9nZegYovAQlIoEEC6nTtVQo6NqsY3KKsvbppXaLexmesRsEAa5CABCTQOgGcPfG+VFfPt15bync2gXz8gP7BxCjsxekK0lSOeO9pemzuez6ZMHei+vqLOXIefwqB//jb3/72/55SWMspgd4J8GAseQj2Xl7ll8DdBFAUXYF6dy2YvwQkIIH+CaDDYezozeHSP/nyEuQz+8tT8IonEfj27duTimtZJSABCdxGgFVwTHiaW0l3m2Bm3ASBUSfAs/oUZ+nSGGLKbpU7XZcqaUn3ZQwTztqlNDwngdEJuBJ19Bq2fEMRYGsFHm46UoeqVgvTKAGUcB2ojVaOYklAAhLohIDO004qKhETPXvKGJVE8asE3gn09i5Uq00CEpBAzwTCicQ4XUdqzzV5juy0CZ7LI9lwKE/6PtMScnG/pNeEszQcs/H+4XQb3zQ+3zm3dD6P728JjEpAJ+qoNWu5hiWgI3XYqrVgjRHgPagGCUhAAhKQwF4CRwwfe/P0ujoEMFgx655VLxqO6jAdMRW3xR2xVi2TBCTQOgEdqK3X0H3y8VwexYnKRMytDtTYqv/797//AT+fbJDqtKMw+qOwfpHABQR+viAPs5CABCoTCEdq5WRNTgIS+DcBV6DYFCQgAQlI4AiBEsPHkXy89jwCzOBnVerXr399X9lAnRokEARoDxryg4afEpCABCQggfsJjPRcZjJfScjLni8KwIlqkIAE9hMouyP35+OVEpBAZQI4UvOZRZWzMDkJPI4A99Rvv/3DVSePq3kLLAEJSKAeAZwrvnqhHs+7U8Io9eXLr+9ioCdglPrf//3fD7oCq47zY3fLXZI/bTaMdT2Xo6TMR+MGr6PpeL0EJCABCUhAAvUIoNOMsIsIq0XRydA3+Pzll1+LJm9xPdcyKRD9dQQm9VqJKUmgnIBO1HJmXiEBCUhAAgMSYGbef//3fw9YMoskAQlIQAJXEdCBehXpe/LJHaq///6/78apVBr0CYxdrW+VRltdMsiFw7j1cqTsr/zuVr5X0jYvCUhAAhKQwDYCOA5HcRi+Fs/8673gTPYvnaSJfcsVqNvajbEksEZAJ+oaIc9LoGECGG7yLRsaFlfRJNAsAbfvbbZqFEwCEpBAVwRKjRtdFU5hPxB4OVQ/D6eZ8U/g/VThiGxpdeea8zQKmTqMdaQGldcnDB2DfWTiLwlIQAISkEALBOI9oiPqLuiVc/oHNq2pMIpDeapsHpPAlQQ+j/quzN28JCCBQwSYURSGmkMJebEEHkzg+/fvw8xUfHA1WnQJSEACtxPAsWKQQEogdURi+GIC5J2rVNl2OIyLqZxL3yP+iMbIpXIvnXMr3yU6npOABCQgAQncSwDdhWf1CDuNbZ38hn5pkIAEziOgE/U8tqYsgdMJMKNIR+rpmM1gUAIYM33/6aCVa7EkIAEJ3EDAiW03QO8oy5dD9TX8vsOwt8eBGnh1pAaJ16dO1I88/CUBCUhAAhJojQB6+f/P3tuEapacd55vVWbqZk5mtt9sc6EaamMogQa0UFHVYA+zsHY22FAFvTfeSUhCq4ZhPAO9aQzj3UjC3hntBVUgQS9tepppGEvICy1Eq0hvBKPmwuR1q7JVqcpUTf7foydv3HPPR8Q5EefExy/g3vfjnBPxPL+I95yI+MfHrVu3D5eXT3IzLdiesdmnFpH6tphxajR4hUAaAq+niZZYIQCBrQiwvv1WpEmnJgL63agyTUWzplzFFwhAAAL7ElBHDQECPgTUsbflzGWlZUKoj31D5+j6hw8fHiTGKr4t7R+yZ8/vGDCxJ33ShgAEIAABCPgR6Aawlb1SjE2emfL42bNPpg5zDAIQiECAln4EiEQBgT0J2AOVxvyeuUDaJRHQKL0alnUpiTm2QgACEKidQCcq0bSqPZ9j+qfZjFsM5lLZjLVX71h7Q3Urhb2XK46ZP2NxSUQmQAACEIAABCBQBoH79x8UPxt1bqneueNl5BRWQiBvAsxEzTt/sA4CXgQQhLwwcRIETgS0hC8BAhCAAAQgEJOAOmgIEAghcHZ2N+T0xedusfSsLVUskXUrvxYDWXlh7f6txMPlEIAABCAAgawIqI6ilTRKDoikJecettdCABG1lpzEj+YJfPxxmDBkI8abBweApgiwV0RT2Y2zEIAABDYhoI6Zub2KNjGERIoiUMMSc0PA5VetszW7pYyZcT6U73wHAQhAAAIQyJWABnmVXDeZW7lk7niu+YJdECiJAC2AknILWyEwQeBXv/rVaeS3Tyee9oPU7FUt76WZE1p6S2Fsia6JZDkEgaIIMAu1qOzCWAhAAALZE1BdivpT9tmUrYEqO6k7vvaYvaDZmmqb6PdhwZ0RK5tS+23pxnqVL2v3lY1lC/FAAAIQgAAEIBBGYI/6UJiF02e7E2Hcft/Ly8vpCzkKAQhEIYCIGgUjkUAgDwLaTPzOnfnl5CSiKqjz4vLyySvj9b1EVfeB/OogbyBQOAFmoRaegZgPAQhAIEMCCKgZZkpBJqn8qP5dmqA4h1htifPz88nTVC9T20Via6wgodMVa4fiXZoev/UhmnwHAQhAAAIQyJ9ADX1Btu+8aFu/rwTU2uqQ+ZcmLGyVACJqqzmP31US8JmNOtVRY6KqlrlgpHWVRaRpp5iF2nT24zwEIACBJAQQVpJgbSpSlSEJfzZDopXOMAmt6gRUm0PtE/m/VOCUeOo7EFSzZEPFWy3ZzW+9qZ8lzkIAAhCAQEUEbPW9kl1SXcmtL2pLt1bqjCXnG7bXQwARtZ68xBMInAj4zkadwmUdGAipU5Q4VhoBKpil5Rj2QgACEIAABOonMCbO2bJtNvPA6uc1EjEGEjjl79Sgz77/oQKnibdKSwPsVD+0ZYdtFqteb93qukpYoadPnM8QgAAEIACBsgionqEtzUoOqq9Yn5YE1JrrhSXnE7bXSwARtd68xbNGCehBOiV+WodAo3hwGwIQgAAEIAABCEAAAtkTMPHOXpfMoJST1uGWvcMvDewEztunWZ8SkU1AHtpDNWT26ZDvSut4PA4d4jsIQAACWRLQABMTgo7HR6d7ZpaGYhQEMiSgekNJdaIphAioU3Q4BoE0BBBR03AlVgjsSkCdDtbh0jdk7Pv+eXyGQG0Eaqo015Y3+AMBCECgVAJTda5SfcLuPAl0AuODgzuDMk9L41jV+Xu9u8KEVaVgs1fjpEYsEIAABPInoPueBsWzTU3+eYWF+RDQ4IOQFS7ysRxLIACBnAi8npMx2AIBCMQhoCV9p4ItWTV1ju3LNHUOxyAAAQhAAAIQgEDLBOjIbDn39/Fd4qJmUGoZW5/ge55PXHufI98lIiCg7p0TpA8BCOxFwJ4BeiVAAALjBDTw6vLy8jR7u5YZqOPecgQCEEhNgKduasLED4EdCMwJoNrnZ64SoeMarUUnxQ4ZWGiSqqRKwFf5UxkbWlbanUGgUbQ0/grNbMyGAAQgAIETAdWX9GzjeUaB2JqAOyNprF4ful/o1j6QHgQgAAEIQAACEIhNwF36OnbcxAcBCLRJABG1zXzH68oJzHXoSeDyCYioPpTaPMcqpZrVrPLU36tKZdDE1P4xl5iuZ0aBS4T3EIAABCBQGgHt24iIWlqu1WGvyp1mpVq9zPWK/fJcGryHAAQgAAEIQKAFAhrcqD6oe/fundxl/9AWch0fIZCegJ+Skt4OUoAABCIT0PJy6lQZCpoB6BPmxFifODinLgKqkF5ePnnlVFdGPn312X0zdczOs3PU+TdWXu3cta8+M7DXpsH1EIAABCDQHgFW7Wgvz3PzmAFpueUI9swR6M/g73+eu57jEIAABCAAgSECGmB2586DV4emBvW/Ook3EIAABGYIsCfqDCAOQ6BUAiaADtkfMltibn/Vofj5rl4CKjs2oi+mlyqv2q9iKKhT5eOPPz7Nshg6zncQgAAEIACBvQikeCbu5QvpQgACENiCgA3KVN1f7zWYUoM0x9oCW9hEGhCAAAQgUCcBDdbXCmgECEAAAmsIIKKuoce1EMicgGajjgUt8eUTNGqLAAGXgPY6TVEJHRJSrVNFS7D88pe/PHWuqLNlSfBdxnpJ3FwDAQhAAAJtEuDZ0ma+4zUEILCMgAmourqr+z851fHts+r+BAhAAAIQgEBMAhJStU88AQIQgMBSAoioS8lxHQQKIDA3G9VHSFUcNGbzy2wbtT1kmR1Tvg0JjmPfD8Xlfqe4NCP04uLi1OnhHov13i1vSkvCqRuss0XHQoPvMtah8XI+BCAAAQi0ScD29W7Te7yGAAQgEEZAbRB3W5Chq1X3H2q/DJ3LdxCAAAQgAAFfAvQH+ZLiPAhAYIiA38aIQ1fyHQQgUAQBNVQ14mpovy4tzSohda4xqwbv0PVFAKjQSOWHKy6qMqhll8f2elAnr2bKnJ3dPdGwa63z1yqTY8s8qyND8Ws26BZB9nVC7/Beq7JBtsinkHIp/+SzhFgCBCAAAQhAYC2B+/ev9ltaGxfXQwACEKiZgAZA+rYltJqSZg0RIAABCEAAArEIzPV7xkqHeCAAgToJIKLWma94BYFrBEyUUmdfXyjzEVIlOklI6197LRE+bEbARE8laILoVOJd/n16o+PCvte1EheHOiv6gu1UOjGP+Qid5nuIkCrh1SfumL4QFwQgAAEI1EdAz03qRfXlKx61RYCBotvkd7f3qf8gRtXVJbpqCxECBCAAAQhAYC0BPe8JEIAABNYQYDnfNfS4FgIFEVBjVCOvhioPJqROufPixbJ9KKfi5NgyAinyQuVDy/S65UPvTahcZmn6q2RfyJJfNhs3vWWkAAEIQAACtRIYG3hUq7/4BYGaCfTrv3O+htQ75+Jq4bjaE0sGMGrWKqxbKCH4CAEIQCA9AbefK31qpAABCNRIABG1xlzFJwhMEBgTxeaEVC0VS8VjAuxGh1ILmyofGi2uv7GyspGr3slocIBvJ4vK+b1797zj5kQIQAACEICAS0DPkKGVG9xzeA8BCJRBwFYzUZ1XMx99QorBjD7plnqOGGvgyZLA0otLqHENBCAAAQi4BJYO5nHj4D0EIAABRFTKAAQaJCCBbChIYNL+qUNBo4HVwYCQOkRnm+8kFG4hbGq0+JIR49tQGE4lREjV0mBLO3OGU+dbCEAAAhBogYDqSCwv2UJO42NLBKxOqLaOr5DaEp8Yvmo7jaWBPFlKjusgAAEIQEAE3O2wIAIBCEBgKQFE1KXkuA4CBROQQDYmhs6NFpaI5zvrr2BE2Zmu/GI09nS2PHvmv8+F9gcmQAACEIAABHwIdMv3PjrYrDWfazgHAhAog4BbJ9TKO3PB55y5OFo7vmY7DYnbBAhAAAIQgMBSAposQoAABCCwlgAi6lqCXA+BQglMzWh0OxOG3Hv61G+5q6Fr+c6PgIRqCacafa29mqbyyy/G+s8K6dRiWd/6ywMeQgACEIhBwJbvpQMmBk3igEB+BPTbPh4feRsWUt/0jrTyE8XYZvwucZXZqEuocQ0EIAABCEAAAhCAQCwCiKixSBIPBAokMLWs79S+kZrJOnZtgRiyMrmbcao9SZ+chFNGX/tnT+gSxGuWFvO3ijMhAAEIQKBUAizfW2rOYTcEwghI5NPvfa4uyWo8YVzds9fM5Kc95JLkPQQgAAEIQAACEIDA1gQQUbcmTnoQyIjA1LK+c/tG6lpGBcfNTNvzdK4DJ26qdcUW0rnF3hh15T3eQAACEIhFgOV7Y5EkHgiUQ0AinwaRTg0U1dYRDMJblqdrRFSlSLtzGXeuggAEINA6gZA+otZZ4T8EIDBOABF1nA1HINAEgallYucauxoVPLa3ahPwIjrJnqdxYIbsixonRWKBAAQgAIGaCHQC6vHl0pPsn1RTvuILBHwIaBCpwpiQylK+PhTHz5la6Wj8qu4Is1HnCHEcAhCAAAT6BOhn6xPhMwQgsJQAIupSclwHgQoI2EyLMVckos7tXyMRlpFdYwT9vldHzZSY7RcLZ4lASOcWHeSUGQhAAAIQMAKq72g5z+PxaF/xCgEINEjA7gEIqfEz/+zs7qpIGby7Ch8XQwACEGiGgPoo6WdrJrtxFAKbEGCI9SaYSQQCeRFQR6EE0rmZprJaS1bNLS+r/TvV8ajlURGmwvKapanCeMU+W7+FufIdO03igwAEIACBfAhoZpQ69qm/5JMnWAKBvQmojaQBjuqANVFVdXarM15cXJzaPj5tqb19ySl93WfX1L2VJxJS1T7lvp1TzmILBCAAgXwI6DnBJIV88gNLIFALAUTUWnISPyDgSUBiZ0iDXw1Un+WT3ErK+fm5pzVtn6bRcT5s26YU5r11bvle5TNIwDcuzoMABCAAgTIIhAwmK8MjrIQABGISMBFV9UqbkdqvY6rto7/QtlVMO0uMS2z7LEP80LX6UxuKe3kIOc6FAAQg0AYBVi1oI5/xEgJbE2A5362Jkx4Ediag2aIhQSOGj8dHIZdwLgSKISARlQABCEAAAu0QUKe7ZpaFDChrhw6eQgACRsD27zTRzr7vv0pIZWuTPpXxz7r3iq3uxWuD8kb8TeheGx/XQwACEIBA2QTcVSPK9gTrIQCB3AggouaWI9gDgcQEtPRuaENfQqpGWRPiEnjx4nncCIktmEDooILgBLgAAhCAAASyIoB4mlV2YAwEsiUQMtDu6dOPs/UjR8MePHhwGswSQ0iVfxJTEVJzzGlsggAEILAdAVZ62441KUGgRQKIqC3mOj43T0BCaugSFzZq2AeeGrGhQq1PvLWd8/w5IureeWp7M+1tB+lDAAIQgMA2BBg8sw1nUoFA6QTU9vEV+brZqtTrQ/P8/v0HoZeMnq880AwkAgQgAAEItEmAAU1t5jteQ2ArAoioW5EmHQhkRkBLH4UKqRo17NOZ0I0GfsKI4MzyHHMgAAEIQAACLRNQHUaDZwgQgAAEfAgwG9WH0vJzdD+2ZZOXx3J1pfZJjSGkajCw4tHA4ND28pU1vIMABCAAga0IdBM5Pt0qOdKBAAQaJICI2mCm4zIEjIDtIRPSONQ+Yj5CqtKwpZWYlWrEed2CQEh5lj0s7bhFrpAGBCAAgf0JcL/fPw+wAAIlETg7u+ttLjMhvVFdO1GDdGMLqUtXRVIbQtdq1SYJsspTay/Tnr2WbXyAAAQgkA0B3bt1vyZAAAIQSEkAETUlXeKGQAEE+o1DNRDnGp5aeilMSA1fPrgAdJiYKQF1doR0dLC0Y6YZiVkQgAAEIhPgfh8ZKNFBoHICods+dMIby/qGFovYQqratxJCQ2al6tyuDXGzI97iCx2oGcqB8yEAAQhAIIyA7su6dxMgAAEIpCbAelapCRM/BAohYI1DM/fZs09eCqXD+9SoQ0EzUkOWzFDFRnuAqpFMgEBqAtoPQ2XUJ7C0ow8lzoEABCBQLgEN/Or2N6TpU24uYjkE9iGgJX3VTvINIXVQ3zhbOE9tRLUVQ1jPcZGorT8L9izQgBqr/2vgpfLMJ13ZR4AABCAAgTwIaPCLe4/PwyqsgAAEaiVAT0KtOYtfEFhJwCojU6KnZqRqlK9vUJzqiGA5vY5YyD5Lvow5ryOgjhBVqqfKr8tKnSo+nSfuNbyHAAQgAIH8CWiZSN9nQf7eYCEEILA1Ad0/rF3kk7bqkxLmTKTzuYZzOgJqI6asj3d50wniqvurLRaSt4iolFQIQAACEIAABCDQJgGW820z3/EaAl4E1KicWtp3SecAS+ldoUdMvmKR4p3Kr++yWwjaKXKAOCEAAQjsR0Ad5MfjIwTU/bKAlCFQDYHQPTs1s5EQTmDLdqIE1RABVd6YQB7uGVdAAAIQgAAEIAABCJRMABG15NzDdghsQECNRc02HdtjUp2UIWGJ8BoSf2nnhnbKlObf3vb67o/KyPK9c4r0IQABCMQj0AmoR2aCxUNKTBBomkDobHa1n0L242wabqbOj7VxX7xgSd9MswyzIACBxgjQh9NYhuMuBHYmgIi6cwaQPARKISAhdWhWX8hsSgTDm7lNxe8mk9jfzM0G0AABdXYRIAABCECgDgLaboAAAQhAICaB0HaMregT04ba48ppsK2eI0NC6lB7uPZ8wT8IQAACuRGgDye3HMEeCNRPABG1/jzGQwhEI6BZff0QsuySOhPGZrT2423hMxW/bXJ5bjbAs2efbGMIqUAAAhCAwCYEcuqI38RhEoEABJITCJ2NKoPm6qDJjS4wgSGxWmLmw4cPD0PHUrio9PQcGdruQ3mKkJqCOnFCAAIQ8CfAqgD+rDgTAhCIQwARNQ5HYoFAswTUwBwapTsGZGxG69j5NX+PeLdd7k4J+MwG3i4fSAkCEIBAagIhdZLUthA/BCBQF4ElIl7ovpt1EQv35uzs7rWLdE8/Ho8HrX7UP3btxEgflMdKT2FIRNX3Glh8cXFxWrIZQVVECBCAAAS2JcC9d1vepAYBCBwOiKiUAghAYDWB0GXz1PBkn6DDAfFuddELimBsb1+W8g3CyMkQgAAEIAABCECgSQJLZqMKFO0e/+LSH6AbsnWMfyrDZ2q2q5vHcysuSSA3QfXy8vI0Q7WUVZdkJyLEcDngWwhAIG8Cut/Sh5N3HmEdBGokcLtGp/AJAhDYloAauxq1GzLSWudKROz2m2nvVqTOFCp+25ZTpSYhVR0kW3bIbO8lKUIAAhBolwD393bzHs8hsAWB0DaPbFK7xxXntrCz5DTUPlSdXcG9p6vNmSoMtQ9C0lO7ztp2mj07Nou1b79m14ak07/e57MEUy19qba3/sxOXSshtdX2uA87zoEABPIioHuWew/LyzqsgQAEaiaQrhZaMzV8gwAEbhBQx0C/UXbjpN4Xqvy0KmqFCM49bHxcSUAjxlVWfTs3VibH5RCAAAQgsCGBuZlDG5pCUhCAQIUE1OZZUo/XAEqEVL8CIVFxTIjU97E70IcEVLN0SXqyz9dGlaWh9F3h02wJffVpm1t7/Pz8PDR6zocABCCwKQHdF9WXExLsWbLkuR2SDudCAAL1E0BErT+P8RACmxHQSGHfBqNrlIlarXQsqPJH2JfA0kq0KuEq56GV9329JXUIQAAC7RBIPaOnHZJ4CgEIjBFgNuoYmXjfh24XszTlIQHTjUuDLpe0b9045t6rXaHZVUrLR/ici2/JcbVPeX4uIcc1EIDAFgQ0ECm0D8e9v2vW/9OnrAa3RV6RBgRqJcCeqLXmLH5BIBGBqT19JC5JZFoSVCHS3gYECORMQJ0ba8p5zr5hGwQgAIHSCSytg5TuN/ZDAALbElg68JOBlP751M1GvTnmP+ZKMm4Hu79lac6UUKv2cGrBdsx6iQsECEAAAjkS0LMzVEA9Hh9tthx8jsywCQIQiE8AETU+U2KEQNUEusZdmpmUajROibS1gNWeNIQyCWgEo8JWo+PLpITVEIAABPYhELNzfR8PSBUCECiFgGajhgbaAKHEbp6vmZoxgvJPAyPngtX9584r/bja4RcXF6cZsaX7gv0QgEBdBEIHeej+PjSzfq9BKnXlBt5AoF0CiKjt5j2eQ2AxAe1jOjaSem3FJKVIu9jhyBfGavxHNovoAgioUr6k8ywgCU6FAAQgAIFAAq10dgdi4XQIQCABgSWzUWkDrMsItT/XtjVlgerwvvk31BG/zou8r2bLkrzzB+sg0BIBLXOuSRah9/2h9sBY/2VLPPEVAhBYRwARdR0/roZAswQkpKpS0w9aFmltCB1ptja9ra8fqtRtbQPpLSNg5V6VcGY8LWPIVRCAAARSENCyXa11dqfgSJwQgIA/gdABdYio/myHznz27Gbbc+i8qe+07LuvgGrxtLZUfAsrQ1ne8goBCORJQPchDeoIXcZ3bBYqK0Hkmc9YBYGSCCCilpRb2AqBzAioUtMXUrUskjoy1wSNNKt5f1Q6edeUjv2vVbmXmMpI7f3zAgsgAAEIiAACKuUAAhDYg0CoGKc2Tr/ttIfdraYpMfR4PAa7r2tCBfPgRDK6IFS0yMh0TIEABCogoL7AJfehqUEyDGKqoGDgAgR2JoCIunMGkDwESicgIak/WlUi4fn5+arGpjoZ+vGWzgr7IQABCEAAAhCIS0ArYDA4KS5TYoMABPwJhA4eVdtJe0+qncPygv6cdaZE6ykxUx3o+tM5dp773RIB1SxU2oqrlUA7vJWcxk8I5EVAAmro8r3mwf37D+ztjVdE1BtI+AICEAgk8Nrjx48/C7yG0yEAAQjcIKBG5VDDVJ0DmrW3NKgBHDrKe2laW16nzhMCBCAAAQhAAALLCUhA1QoYBAhAAAJ7EpDgtGTWjGxmJn14ztls3lu3bp8u3nIgzZoO/nBP971C7XDbhmZLxvt6TeoQgMBeBNbcX6f6Ddf2Se7Fg3QhAIG8CHS1zrxswhoIQKBAArYEr0Z/uY0svVfnwFIhVR0S2nuSTtICCwUmQwACEIAABBIRQEBNBJZoIQCBYAJrZriojcT9LAz5nu1CDRpWh7z211O+62/prKkwr7c/W+1wd3AAgv/2eUCKEGiFQLc6w6eL3NWEjqmJFzH2015kGBdBAAJVEUBErSo7cQYC+xLohNQnN0ZUS0hV58DSPSR1nUYau+Lsvp6SOgQgAAEIQAACexHQaPM9O9H38pt0IQCB+AQkiO3dxqCtEz9fU8ao8tIvM66w6gqPKe3YOu6nTz8eXHlqaztIDwIQqIeA7p26t6wZjKJJF1NhzUCnqXg5BgEItEWAPVHbym+8hcAmBDSi2pZZsgTV2alOz6VBcaqCRYAABCAAAQhAoG0Ctrxg2xTwHgIQiEEgRhtjTeev+aCZjYRyCUhUVXt3bt/Wcj08nESOfhu/ZH+wHQIQ2JeA7ifdM3jZDFQf69WHGOMZ7ZMW50AAAnUTQEStO3/xDgK7EdCI6tiNLFWwCBCAAAQgAAEItEtAA7L6M4DapYHnEIDAGgLWVtEsmDVBy5yuDWbL2ni4fn8CElK1vGSNgXJaY67iEwS2J6B7ydKV6vrWTs00ZSnfPi0+QwACSwkgoi4lx3UQgMAsgX4ja6pyMxvZb0/QZvMECEwRUAd718l+p9oOjCn/OQYBCECgZgLMQq05d/ENAtsSsLaKZqnY+yUWaGDHmhV3lOZaG5bYzTXpCNy//yBd5DvGrHKqvQsJEIAABJYS0D0kloA6Z0OMPsi5NDgOAQi0QWB64fA2GOAlBCCQiIAaWbYE79p9DsxExSkh9Xg82le8Nk5AnVbaB2Nq31yVQy2Tpkq0e646zPSnckWAAAQgAIG8CWhmD7NQ884jrINAKQSs/vfw4cOTyfq8Zq9lzT5UPXNNndI6ldfYUQr/2u3Us0ozlGtcSUl7vlqbytpVlp88o40ErxCAwBABCaix940ee+6ylO9QDvAdBCCwlAAi6lJyXAcBCHgRiCWeuokhpLo02nyvjnR1MPl2MqlBP9SotzgQU9ssR3gNAQiURcD3nl+WV1gLAQjsQUAikEQuqx/q/rJWSNUgz4uLi1XuyC5CHQRUtiTSmzheh1edF2qPjwkX8pnndU25jS8QCCfQH8RuA5fCY1p+xdql+penzJUQgECNBBBRa8xVfIJARgTGGldrTVS8azs61trA9dsTkHiq5bGsw2vMApUNGyHt04jXOfpTZT+F8D9mJ99DAAIQgIA/AZ/7uX9snAkBCLRIwOqImjnaDzHuMWtnHyKi9nOl7M8qU8rT2DOvcqYS43eUs3/Y1hHQjMKh+yh82iawV39Kf7U6lc9UfZFt5zDeQ6BdAoio7eY9nkOgeAKIqMVnYZAD7myB/oXuSEfrpNAyv6GNeImzmkWg+J49+6SpDo8+Uz5DAAIQyInA2v0Gc/IFWyAAgX0IqJNVdcOUHf+qS+p+ZfXRUE/V6at66NyAwdB4OX8/AjGWet7P+rCUeVaH8Sr1bN1Lda/SAAG2WSo1F5fZPfR8kmCpsrCnaKm0XSF16TN4GRWuggAEWiCAiNpCLuMjBColoIoSQmqlmdtzSw3yoc6kqQq7Ks6qzGuvHtuvZyiOXlKnjzrvzp0Hp042m7FgFXHNhlV89nnoer6DAAQgAIG4BM7O7saNkNggAIGmCKg+57OaSQwoJtIurSu+eIGIGiMfcopDQpMJTznZFcMWaxupfRQ6gDVG+sSxLQG3HNMfsy37HFLTPs/u6mDqj1n6rIvtjwmpuhcRIAABCMQmwJ0lNlHigwAENiWgPWZorG2KfJfE1HmuUY8KmiGq4DPaURVp/VlwK/z23dyrlS/ZoLStY0zX5dJgmPOB4xCAAARKJqD91XwHwZTsJ7ZDAALpCFh9Ll0K12NeM/tQdVwCBEogwP6nJeRSPBuHlkjlfhWPbykxdWJlJ6a6fS052N/v/8nBJmyAAATqIICIWkc+4gUEmiagyrwrbDUNo1LnNeIxRrAKv+Ky5aZ8y47NTjU77DqEVCPCKwQgAIH4BOigjc+UGCEAgW0IaObrkjososQ2+bNlKkPi05bp557WxcXFy2VhHzFgKtOMmtrqhvtVppkWySybaWozzt1ocxNQXdt4DwEIQCA2AUTU2ESJDwIQ2JyARCzNEmSWyuboi07QxE81/JYu74aQWnQRwHgIQCBzAuqw2Xr2WOZIMA8CECiIgNoma/ZHLchVTJ0goKWkrd0xcVqRh7QqlEKMZ/XTpx+zv2aiUqAyuGRJc7tuSiybOpbIHaLdgIDy3n7fSk75TF5vAJ4kIACBbAkgomabNRgGAQiEENAyq9rDspRAh0o+OaXGgO3toQ6AW7e6R6OvKI+Qmk9eYgkEIFAXAfY0qis/8QYCLRJQPVED9kI6n0PObZFpST5rBp8rRJRku6+t5t9aIVXlXsLN2nh87W7lPJtJKH/V5rXVmPR5aBYp9x+RyT/ot6L8i7UXscVX64CP/HMUCyEAgdwJIKLmnkPYBwEIeBEobTbqkg4VLxA7nTS0vEtoh9FOpr9KVg3GfqNRfimocWJi6asLnDd2jEaHA4W3EIAABCAAAQhAAAKnFU+WLOsLuvIJaHZlC2GNkCrxxsKQqGfHePUnMLX8bor2qtLzHYDs7wVn9glIEB/qY9HvT+K4+iw0IHxuVreVD4t/KE47xisEIAABCHQEEFEpCRCAQDUESpuNqlG2fdGuhMwwwdQq6XMNJlXSFZQ/KRptKZlZ/uh1bsloCak6p0Q/UzIkbghAAAJLCdCZupQc10EAAjkRYFnfnHJjO1suLy+LbOstJSQhRwLOXNvQjV/tRBNg3e95v5yAmDJoYzm/XK/UYIOpvpT+Md1/jsfjDXcUD7+5G1j4AgIQgMAsAUTUWUScAAEIQCANAVs2Nk3scWPVyMY5EXEsxauG9N3Jiv/Y9bl8PzeiU3bKVy0rLUFVDRT9mRCbix/YAQEIQKAUAtw/S8kp7IQABOYIqG7Y7+Seu4bj5RLQjLEWn2ES747HR95Can+mLoOn1pf5PtP1Mc7HUNpg9nmP8jtD/Qohwb3/0C8RQo5zIQABCAwTeH34a76FAAQgAIHUBK7ExdQprYtfDWF1/Ky198WLbkbqOmv2u1oNEY3o9A2aaazRn+fn59f2nvG9nvMgAAEIQOBwGowCBwhAAAKtEbCVXFrzuxZ/WxbMJaT6lN9WheZayrjrB+K3SyP+e/2eXFE0NAUGdocS43wIQAACNwkgot5kwjcQgAAENiMggTLn8PDhw9XiqflXQ+NKjZeLiwuvjgHzW68SoTWblwABCEAAAmEEtORY6Oj7sBQ4GwIQgEB+BHyFqPwsxyKJg60Hld9OuLk5iFbfqz01JDSvEYpaZ27+a8udrYPyjXIfj7pYavC2/vReM32XBgTUpeS4DgIQgMB1Ats/Xa+nzycIQAACTRPQ7E4JlTnuS6G9TzWbMkbQ6MmhhnKMuPeIQx0DriiqxuocKwmpOs/EZL3SUbBH7pEmBCBQGgE9I0P3WSvNR+yFAAQg0Ceg+mbI0qj96/m8PYHa2jxrCFr7Vm1KE/Z82oNiuHYFpDV2l36ttuDx4RzbT6W5dPuf2LaUHp/bT7C2v0B9FIpvjzJRej5gPwQgAAGXACKqS4P3EIBA0QSscVaaE7lWbGPyVCdQbaHfEPHp4O8LrRpZ2o+nNk74AwEIQCAGAT1HtDw6AQIQgEBLBHTv04DLfh2yJQal+Eq9fjinJAKFCEHsrznM0ffbNbMWfdMYO4+62hgZ/+/XLt07lNJewvqQLXwHAQhAoFQCiKil5hx2QwAC1wjEnDV5LeKNPmiWojvicPs6ayoAAEAASURBVKNkN0kmZB/RTQxKkIjK35IR08p3NWqePv04qHMhgQtECQEIQAACEIAABCCQIQGb0YeQmmHmvDRJy2VaHuVpYVlWxRzIW5bn661VuztEsF6f4s0YZMPxeLx5gG+8CLx4cXMJbK8LB05SXuj3pD/1V+xdNgZM5CsIQAACxRCIvidqt9zMnWIAYCgEIFAHgfv3HxTvSA0+9DNBI7Jrr6yrQbKmoSjxVde7ywP3OfIZAhCAAAQOL58n8TqW4AkBCECgJAIS6VoYmFhSnshW5QkCarxcK31gdDwSYTGpfqSymEO7WzZoYAEhnEDsARnKC616pXtUDmUjnAhXQAACEMiHQPSZqNYZHPvmnw8yLIEABHIjIPFpySzA3PyQDzntjxpjFHDtS9WGCqh9AUAjTTUDWcFecyuX2AMBCEAAAhCAAAQgsD8BdYJLKFkzeG9/L+qyAGEibn7GaH/GtSj/2DoBNa+tcyTa+Wx1kz/dbSxUHqZamUr9Ffa7qr1vZpvcIhUIQKBVAtFFVAOppWb0x74QRoRXCEAgFQFVBrUkag1Cqu6bEtP2ruDGGAXcwghUe871y7YriK7pXLF8sEaoGlgmvA6VEbeRJBvWpN33ic8QgAAE9iag+18Nz/q9OZI+BCBQLgHV7dTHoi0hCPsS6A+O3NcaUm+RQM6TV7Q/qhvY196lcfU+tgiuCQYSTa3/4Cql7t1QH0L/HD5DAAIQgMBNAslEVEuq5n3+zEdeIQCB/Qlo5B6jsuPlg8TBtaEFEXWL5bvcvJB4YAKCnq9qdD179snoIAJXdEVUXVuiuR4CEIAABCAAAQgsJ6DBbjEGuFknOELq8rzgyjwJuANR87RwX6s0gMJCaW07tUutHWs+8Ho4DZCOxaHbXm+8m1/PDHt+xEqTeCAAAQi0QmD87hqRgISNXNbnj+gWUUEAAhkRqGlUti23sideV7jb047W01a5vri4eNngHN53tRNVx2ciuKKrWPIsbr1E4T8EyiagUfUECEAAAhA4nDrCJaIwiJTSUBOBGIMMauLh+lJ6O47VRNzcvHofa+CA7xZXOg8h9Yo/7yAAAQj4Enjd98Q152k2EpWhNQS5FgIQ8CGgyqBGOJYe9hYwVbGOEXIQg2P4kUMceobGKNv3748Lrjn4iQ0QgAAExghoMAkzGMbo8D0EIFACgdh1Y9UPW1j5pYS8xUYIpCRQQ59qLLEwJec94o7BRXVk35UJEFD3yGXShAAEaiCQXETVchNbLHdYQ2bgAwQgsJ6A9t7QfSeG4LTemuUxaCmWvYL2l40RYncUxbCp5Di0ZPXaIAFCZSuWUL7WHq6HAAQgAAEIQAACrRBIUTdGRN2v9GhmHSE+gdLb8bGJiEcNfaoS77hfXS8dytsYE458B0q7y0Fft4RPEIAABCAwRyC6iNotMfH89HDUEoSMcpnLAo5DAAKxCei+U7qYamKXRhVuGXyXgfGxiWUXfSj5nxOjgaXUVLY0UhUx1Z89Z0IAAvsTYMbV/nmABRCAwDoCKerGujciOq3Ll6VXx5hBtjTtmq9DnL6euzEG0l6Pcb9PEoO5X13xf/bsk6sPC989fPjQa6UWcad/fiFkLoMABCDwkkD0jYVUiZd4QYAABCCwNwFVEvUnYdB3eZO9bXbT74TU42lQyhZL+IQsA+PaOfRe9tYwYnbItz2/00ClWHtfqXzdufPg9NtQfm1RxvZkR9oQgED5BPRc2XvJ+/Ip4gEEILAXAdW9UgR1xKtOR0hLQHVlVzh136dNua3Y4XqV390KW59efVHBO/UXazBvqvthSYi2LOs1ifEl5TG2QgAC9RCIPhO1HjR4AgEI1EJAQmrJS5eow1jCWTfKMN3M1FjiHAJqul+OBiqlKMtWxrae+ZyOFDFDAAK1EmAGQ605i18QaIOA6vOxA7OLYhO9GZ+ePRrIY4N09ap6OSE+gS2FpfjWx4tRbepaf9tMvOnKie8yvFOlymd2r+5f3K+mKHIMAhCAwDyBNEMh59PlDAhAAAKbElADRA2yWELhpsb/NjEJXfpbIlKO7YEpJqpQx+rQkcBXa2MvZZ5LvFQjSstXKU8sX4bSFF/tWxt79G6NI52H+PEdBCBQNgHdJ2Pf/8omgvUQgEBJBKw+322DFE+EU/tAcRPSEED0ScOVWIcJmGg/fLSOb7lnddvsqB9m7QpemmU61M+lcqSVClrqn+n3e031q9TxS8ILCEBgKwKIqFuRJh0IQGB3AhILYy6HupdD6iDRnkpDjXmJcbdv3z792b5LW3U2x+4M2ovvXLpirEaKGiUWbD+TpZV0Gxna7/yyNExcVd72zzEb+q/WaOp/P/bZp3E1tfRSK/k/xo/vIQCBbQjQ6bYNZ1KBAATSElBdMubgQ+6N6fJLdVzCdgSsXbRdinmlpN/yWlEtL4+GrVG7mXA4te3FwqctPsZLvxk9T7SFlcqP4lvaLzGWRinfD23jZf0iaxiX4j92QgAC6Qi89vjx48/SRU/MEIAABPIkYGJjihl9W3msCrL+XNF0K8F0zMeYnUFjaeTwvUaMjomZVklf0nBRuVRQntqrxPB+vioNCasKfTusXKTogJgSUWULQqooECAAgZQEbCBLyjSIGwIQgMBWBFRviyWYzNXTtvKppnRaadvklmeaTTYkhuRmZ2x7Yt4PYtuWIr7z8/MU0RYZJ+3o9dk210Zo7fe1nigxQAACLgFmoro0eA8BCDRDQAKT/mw0mhpqIbP8cgAl8awvoOVgVws2WGfX0GxfCZ537jw4jQYNFTLtfHv1YanGgLt8jz6HXO+Thp0ztowmDRIjxCsEIJCaQKr7W2q7iR8CEIDAEAHV5cdWmBk6f+o7rYyiOighDgENWrS2YpwYicWXgAajthTUlkrZhsuVpXymP6PLHbXnEVLXldS5sqTjLf7O1lHlaghAwAggohoJXiEAgaYJWANZ4pgE1ZJnqO6ZkS01eE1INd7uLNIls1AtntBXCQru8j0pBQb53Pc71F7OhwAEILCGgN1r18TBtRCAAARyIqABeJpFOrRVR4idas+oDuoOrgu5vuVzbSUZl4G1D93veA+B2ARanu3cUt+BT7lBSPWhNH7OnIiqK3VOyv6Sces4AgEIlE4AEbX0HMR+CEAgOgE1mPU3txxI9IQLj7D1UX1WGbfXLbPTOnnsdcu0SQsCEIDAlgRsufMt0yQtCEAAAqkJdCuZ3Fnduat6qGYzIaT655gE1LUCtn9qnOlDYI/2lI9dsc9pfeYhdbqbJer+/Qfcj25iifaNRFQGhUfDSUQQaIrA6015i7MQgAAEAghYJ4TEQcI8AUaSzjNKeQYCakq6xA0BCORCQCtFECAAAQjUSMBnFo2P32rDaHYbwY8AAqofp63Pkrhda5BvFxcXqwdNlM7HtsYp3Y+Y9tuAmphxEtd1Alp5jgABCEAglAAiaigxzocABJoioE4IjVTrRonW25BrKlNxFgIQgAAEiiWgziUCBCAAgRoJxBQUNLiuZhGqxvzHpzYIaIA2wn0beb3US81GJaQjwIDMdGyJGQI1E0BErTl38Q0CEIhGoJuV+uQkpjIzNRpWIoIABCAAAQh4E2DkuDcqToQABAokEHsGEkLNfCFAaJ5ntNcZL17UN4BZM8RZSnR9idIA95pD7GdBzayW+AbfJdS4BgIQQESlDEAAAhAIIGAzU7X8DmLqdXAs53udB58gAAEIQCAuAfbOisuT2CAAgfwIxL7P0V7p8lhiqQQs/YmJPusVoTm/34BZVHrb0sqclTeVPbZfsdztXpesLtLx7PZ+vh5bXZ+YjZo2P2M/a9NaS+wQgEAOBFgPK4dcwAYIQKBIAhpFqj/NjNGSIEsaAUU6PmK0BGYCBCAAAQhAIBWBWPsFprKPeCEAAQisJRC7Y1eCQ8v3TglZT59+3Pzek2vL5R7Xly6idn0DdxHqIxceKxe19z2o/ByPjyg/kcuPRWflyD7zCgEIQGCOADNR5whxHAIQgMAMAY0o1ShmLStjI01nLqnusDooCBCAAAQgAAEIQAACEIDAcgKxBU8JDWqftBTkr2b9qW2mNlrtYktLeVuaryaElWZ3zva64lftfRCUnzQlUeWG50IatsQKgZoJMBO15tzFNwhAYFMCqohZZezOnTunUd+xO0I2dSggsRr3rAlwn1MhAAEIQCAxAT1XCRCAAARaIKD7nbUpYvjbwmxUdYo/e/YJy6XGKDCZxBHzN7CnSxLCHj58yF6ovUwIqdfZ71sCqlsuNEhCq4I9ePCgF3s9H01IZenxeHlK31U8lsQEgZYIIKK2lNv4CgEIbEZAlXv9ablfNZpSiKnqELl163YWywi3NsJ9s4JEQhCAAAQgcCIQe4lLsEIAAhDIlYDud65QsNbOrl3yPIs2w1pfhq7XjNOYvIbS4Lt9CEg8k4hUajDxj71Ql+eg+hnUpzIWjC1C6hghvu8ToO+qT4TPEICAD4FyayM+3nEOBCAAgQwIqNKvipqE1LViquLRn9tRsPeerFouy7UnA+SYAAEIQAAClRFARK0sQ3EHAhAYJXB2djf6jErN0rxzp77ZWgioo8WoigPaz/Z4PBbpi9rsU+JfkU5FNNqnXuf7+3aX+I1oYlZRaTDB+fn5aalyE46zMnAHY2w2s/qi7P2cGRrYQN/VHCWOQwACQwQQUYeo8B0EIACByARUUdOfGlP37z9YNKJWYuVQhVnf6S/VjNcpFGM2TV3DMQhAAAIQgEAoAa28QIAABCDQAoEUM+8kzNYW+gNLa/MPfw6v2s9rByJvyRLx1I+2hE+xGltZy1dA9UutnrNsxu1Qv1A9Xvp7okEW6pMyLmNXSjzVoAwE1DFCfA8BCMwRoDdijhDHIQABCEQkoEqb9rPQSDkbfalOjbHOEjUs1MDo7/8xZJLNeF0q0g7FOfeddciEVuLNfzEYazgpbfM/NP45uzkOAQhAAAJlERh7TpblBdZCAAIQ8COglWao/06zYnDNNJ9ajqqNm7OIakKgeCPS+Jc6G2TuXmGzCdVHgNjlkrn+XoKhT//Q9avq+2RlZE5AlefsKVtf/uMRBLYmgIi6NXHSgwAEIPCSgNtosA4SExYFaGmlWPGqgqiOF5/K5NrMUKe2lgZTWiZ4mjCquNd2eluDWWItFd+1ucX1EIAABMokoGcaAQIQgEBLBGJ3kq+tk+fI/sWL5zmahU0JCPjMNEuQ7GyUrMo0iyjoBBPF7NX34tDzfePN+TwNnKd/RP1q8/sm6xwCBCAAgbUEEFHXEuR6CEAAApEIqPIfqwFgwuwWQqq5b4KnfY75qo4fRuTHJEpcEIAABMohsOWzrBwqWAoBCNROQHXrWG2D2lhp8Cb7TdaWq+P+aIBxbkHCjLW5c7MNe+onoP4RbefU+n1Qg2nmBglpT3ACBCAAgbUEXl8bAddDAAIQgECeBNSo014itQR1otsSP7X4hB8QgAAEIDBNgFmo03w4CgEI1EtAImqsum8tM3Eknl5cXDQvHNRb6oc902AC5X1OQUv3EvIhUMs9LoRozGdESLo5nZvjAIuc+GALBCAQjwAiajyWxAQBCEAgOwJqcNYkpB6Px2idSdllFgZBAAIQgMA1AhIPmIV6DQkfIACBxghoycYYg0lKnokjcQTxtLGCP+BuTiKqbGGW+EAm8dXmBPSMaDkgorac+/gOgW0JsJzvtrxJDQIQgMDmBNTA04jt4/HR7FInmxu3IEEJqWq4tr50zQJ0XAIBCECgKAKtdwwVlVkYCwEIJCGgZQrv3HlwGlCi+u9S8aakjmaJplqiUTazXGqSYlVkpDYbNeUWMkWCwegTAZ9lXWtExbK+NeYqPkEAAjkSQETNMVewCQIQgEACApeXT6oRUtV4vnXr9stZtk8SkCJKCEAAAhDYm4BmXs3tcbS3jaQPAQhAYEsCqv/qTyKjZpaGCIy5z5pbIxBvmQektS8BlZMcRFS1Qwl5EShpoEhscvpNtDrA3OfZdnZ2N+h5GTt/iA8CEKiDAMv51pGPeAEBCEDAi4BEx1r2C6Fz3SvLOQkCEIBAkQRa7gwrMsMwGgIQ2IyA6sBa6vz8/Pzw8OFD73QlQOUWZJPtcerTGZ6b/dizLQGVkY8/3n8vUtqh2+a7T2qt1xtj7Z/twzq3c+a2r9LvtWU+ueUX9kCgVAKIqKXmHHZDAAIQWEhAQmqOnSih7tQiBof6zfkQgAAEIAABCEAAAhAQAc1A8hVScxEZVIeXEGbiKTkJgRACITOwQ+Ll3LIJSGCvoY9jaS7cvt3u7Gjl/ZyQmsMM9qV5y3UQgEAeBBBR88gHrIAABCCwKQEt99JyI2NT2CQGAQhAAALBBJiRFIyMC3YmIFFInXh6ZaDXzpnRWPLqHPaZZZODiNr9Tp6wtGJjZTS2u3u3Y7nHx87ROPHtXS7ieLEslpZFVBGbm6WOiLqsXHEVBCBwRQAR9YoF7yAAAQg0RaB0IfXFi+dN5RfOQgACEGiNAJ2UreV4uf5KGNLsKHXi6VWrfug7AgS2InA8HmeTUvnc674qcUMzT5lFOJtNnOBBIIcBAR5mcsrGBPa8x23s6o3k2Kf3cHq+TAnp9+7de8VN77WKw/H4yGsQ0qsLeQMBCDRLABG12azHcQhAAAKHg4TUUjv5aDxTgiEAAQjUTYDBMnXnb03eDdVJEItqyuEyfPFZ1nfL+6oEW3Voa4a22hwECMQiMHTPjRW3Tzxb/o587OGcKwLPnuW39/OVdenesU9vx3ZqosDZWbdqg/YT177i3SoOtw82i1eCKgECEIDAGIF2F00fI8L3EIAABBojoE6+sY6+bmReno+KvRvPjRUT3IUABCCwOQF1vrP81ubYSXABAc0CtNmo7uUSkejYdInwPiUBu19OCZZb3FeHfgsp/Sbu9gjYjMO97q+0Q/Mtc+rXkEDWYtCy7vpttB70DNTMXLs/6Lmn36z+3FUbrI4mcVXlRudrMNLUM7R1tvgPgZYJMBO15dzHdwhAAAIzBHJdjk4VXhoIM5nHYQhAAAKFE9B9XjOYdM8nQCB3AkOdtk+fsj9q7vlWm30SUqdm06SsP9us07HBmbWxxp99Cew549Bmru1LgNTHCOheRGibgPVjaRl5iaJ6Llm7wsiojmarsml2qoINRrJzeIUABCBgBPKcXmTW8QoBCEAAArsTUIVTo/bUWNQoPQUb1beXcXs2mvfymXQhAAEItEig6/B4crDOjRYZ4HM5BPqzQKz8ygMds7rU3vWocohi6RICKl8SUjsR/+asJJt9syRu9xrFo2VN1U5AOHXJ8H4LAip3ewUJLRLqUg5K2Mu3GtJV3viKYTrX8jLnVbh88kU+t1omVcdScP0fei519bLL04xU8TKBVTNQrcz063I+7DkHAhConwAiav15jIcQgAAEVhNQZVN/bkXUOgPdyK0xq3Pdiqh7Toz3jP6NQZE4IAABCEAAAhCISeD+/QcvZ08/GYzSrUuV3lE76CBfZkWgE1KPv53Nf11IlfC5VMiX2KD6vv5UpgkQ2ItAd09dXpbX2t2yYOXDbk8hyrdsdKudXN3H9Pwu+fmsJWxbDcpzyzsN8NGg+7HnlM5V3rt9ShJTTUTVkr/9stEqV/yGAASuCLR7h71iwDsIQAACEFhAoGucXDU6+lGkrMSnjLvvB58hAAEIQGBfAja6fF8rSB0C8wQkTN27d+/aoLP+VdbJ1/+ezxBIQWBov96QWVqyyZ2plcJG4oTAUgJrBgQsTdOuoz1qJIZf9xaZ58qGlnFVf0Y/LB1g0o9nj88l2x6Dl1Zf0DNPHO7c6fbF1fNraI/Tob4slQnbmmFqUFwMW4kDAhAojwB7opaXZ1gMAQhAoAgCKSvxKeMuAi5GQgACEGiIgI0Mb8hlXC2YgDrgxoR/rdJBHabgzC3UdJVJlT0LQ8KBHXNfNZvH9pPzvca9nvcQSE1AAsleQYINYZiAnoG2QtXwGem/nSsb7izE9NaQwhYE9JyyPU4tvZDBDlp1TeXGlrwfq8tZ3LxCAAJtEWAmalv5jbcQgAAENiPgjuSLnagqtgQIQAACEGiDQEgHSBtE8DJ3Aib8q5NWfyrDiKe551rd9qlMqhzactNaqlAzdvpBHcgSP1Ruh2bv9M/nMwT2JIC4vyf98bR1/9hbRFXZMDFsyFLqlkNUyv9OQujZ2d1XdS7VvSSG+t4r7Lmna1SOfa8rnxweQAACcwQQUecIcRwCEIAABBYRUAVWjScthRK741DL8xAgAAEIQKB+AurEiP0MqZ8aHu5NQIKVCal720L6EDACupdqOWkJqeoY1ixT6yjWOaq319RhrKW11ZmuvfFq9O/kFP9OM8e2vt92s9VuLgVLduRFYG5J3yFr3b0y7Z6oe4kt8zp0TS7fMdC8ywlb1tfyZYkYqmdhTc9DY8ErBCCwnAAi6nJ2XAkBCEAAAjMEVPFUR42WEIvZuN17ZOuM25sfntt/bXODSBACEIBAJALq+CBAAAIQgEAcAv1BKTV3FNuATptxi/AVpwzlFsse7UKVJcI4AQ1e+NWvnoyfsNGRJWVj6J7Yv5dsZH5wMjZgJPjCyi5QHtqqaBKWlX8+wQYVDZ2v/ha1SWxlEcU/dJ5POpwDAQiUSYBeiTLzDashAAEIFEXAlkWJJaQuaRAVBSzAWBOoVak3zgGXcyoEIACBrAlYB4W7NFfWBmMcBCAAAQhkQ6Ab0Hl5skfvCfURUD1hyzqCRBnK0nQ5KkHM6w8omfbocMpzzVJNscrWXNq+x+kjuSKl+0Jo/4j6qqy/ytofinFoJrJmJrvnXKXMOwhAoFYCr9fqGH5BAAIQgEBeBCTwxRq1S8O1y1sTUPVJFX4t0TYUNKqSAAEIQKBUAuqk0KoGGvXNUmWl5iJ2QwACENiHgNoNtB32Yb9Vqlq+c6tQgkC4FYvW0tF9pFsOPc+thbjPXS+RSweYSyCVcGpB7ZCh9gd9LEaIVwi0QQARtY18xksIQAACWRAYElLVKa5RnXr1CbGEWJ+0cj5HgqmNlDQ7x/aK1ShMCa4ECEAAAiUTMDFVzwyeBSXnJLZDAAJ7ERjqCN7Llrl01UFNJ/UcJY6LgMQj37bkWmLM9psnWAKjNeVFQmpu9dCS7u3zJWifM9RXpb3CbV9c9/kzlOfqYyFAAALtEOAX305e4ykEIACBLAjYiEATANXIUsPXRk5q5N9UKKFRNmX/2mOqzA8tI6SG4NiSMmImrtrDQyO1jfVaW7geAhCAwB4E7Jlh97Y9bCBNCEAAAqURUKe/1cNzt91dbUUd2tRdc8+x/e1TOyj1sr76DVEW98/rtRZIcBxrN/vGrXup7Y/pe03K85gh7UfXZphO5b+1M/oxKs/1Z8+nbu9fv/1W+3HxGQIQKI8AM1HLyzMshgAEIFA8AVU+h0ZvqjKrjpKp0KqIKvFUFfbj8fhyVP7VGCg1AsVsqiFgPHWdrrfGg33PKwQgAIESCbT6PCgxr7AZAhDYl4Dq3UN1732tupm66qjn5+fXVltR3ZUAAR8CqZf1pd7hkwvdzGC/M/c5K1Y5yUm4pGz6lyUNLteqXu5MU9+rdY1NBnD7ZHyv5zwIQKBcAle9sOX6gOUQgAAEIFAgAQmpCuoYcUeYa+SfZlXOzUgt0OXFJttox34E6gwzjv1j7uf+iOkhtj4irBsn7yEAAQhAAAIQgAAEyiCgTl/r+PWtP6b2TJ3R7nKIqWcRpvaH+PcnkLod6ZbX/b3FgiUENAC53zZeEo+uUfs5h/tWTJ+WsijtOhtc7vZDzfmgZ1Z/UI++i1We5tLnOAQgsC8BRNR9+ZM6BCAAgaYJmACoyqjboTM1krKVSqp1LKmxbp1e/cKiJYSmgsWhxl0/9IVUpWP50T+XzxCAAARyJKDngTqOGAmeY+5gEwQgkCsBq1duWe/TDFPVNXNa/jLX/MGudQRSCltzba91lnP1FgRizx5VfHfuTG9HlNKvqS19Uqa7Z9zq41BY0i/UHwihbZK036lP6AuoPtdwDgQgUA+B6d7XevzEEwhAAAIQyJSAdeCoQ0cNUzVEpkTUTN1YbJYJnUs6liQcaJaqMTQj1FEVOirW+Ps2IiwtXiEAAQjsSUD3rG5JLpo1e+YDaUMAAmURUL1PAxiXdEKPeao6reLVnwa4qE6v+q0+EyCwJQEt15pC8FDbS+U85u9mSy6tpdUXzOR/7H4GifYanKz76Zb3OncAemv5Ks7KxyW/w/5AiLHf9NTvXMK1laMlNrSWX/gLgVoI0NtQS07iBwQgAIGCCVhltqvETo/kHBINS3R9bIneUF/UiFAjSo3EtR1VY6JsqE2cDwEIQGBLAgipW9ImLQhAoBYCITNwpnx2xVM7z6dOb+fyCoHYBBA2YhMtLz67L7mWxx44YnFrSViFLURUDVDRIIGWy7j6jkzEtDxY8uqyVHlRX4ptcWR5OcZ57PsldnANBCBQBgFE1DLyCSshAAEIVE1AHS2+wUTDUiuumiXaX0rX1/ex82KOtM6Zrxo36vB78eL5jdm3Y2z4HgIQaIOAhNRYg1PaIIaXEIBA6wRCBs+p/uoGdTSbSGGdze5x3kNgbwKpZgaW2gbdOz+2Tl9txn6IIbz149RnlQndD1OHFpfuHWLa9R3dfSV4Dp0z9p31O7kzed3+GZvhqueavbe4bAsRrfhlYqsd4xUCEKifgH+vdf0s8BACEIAABHYgsKTBEWvk/NbuytfYAqp8UINKIVbcxlf2Di2DpO80AlSNEDVAQkb1unHaksNqkEgYVUNlqkGixozS1F9/CeMTAP5BAAJNE7D7Ah36TRcDnIcABAII6H6pP7dDWZdbfW1slZNYdU4fU2UbAQKhBFRuYtcH1GYhlEtgqp251isJqdYmV1xj907fdNzy278/+8ZR43l6NimYGBrqo1jqzx0MoT4JN9igoX55UX/F0nTd+HkPAQiUSQARtcx8w2oIQAACTRNQ5VWV237FNncoQ4LkWpvVmDcOsTq0xPf8/NzLtLHOt/7FavDYuTePdcKo68vNc7rr+9/zGQIQgIBLACHVpcF7CEAAAn4ErI6mzmUbKOd3ZfqzZBMBAqEEXJEk9Nqx8yWiEMogoD2Z79y5mo26xX3E2uRGSGlqcHKo8KY2seqzZnOKsmw2lvSq/gRbgcsVrEN8sHbC0DXiLtbKs6H4U81kHrKF7yAAgfwIvJ6fSVgEAQhAAAIQmCcQSzCcTynvM7QnioWhyr4dS/2qzrfj8dHLRuLNpYwkeKvBo3OmghqYQ9frmrlrp+LlGAQg0BYBdZDseT9sizbeQgACNRFQfSu0wz+l/9apnTIN4q6XgIlQMTzUvpdTAkyMNIgjHoEhQTNe7H4xSZDTdhOhdVIT63U9AmrH2gRU/aYvLi5eDSL3y4nps+yZ1800vXNaIatffhSDvrP9b6dj5CgEIFAjAWai1pir+AQBCECgIAJd4+Ly1ajCENMl2qlhUkqIPRNVjQi3YaWK/Z7ishogNjpUnV5qiITOZrClhN08lQirkZ/WaHF9ds/jPQQgAAEjYJ0fe94TzRZeIQABCEBgGQETE5ZdzVWtE1BbKcZATLVBaH+UV5rc/N8z/1QnVVtWZXGsPLq26j3hioAroMYeyOAO4BZ3lZOpsqJjJfU/XVHkHQQgsJYAM1HXEuR6CEAAAhBYTUCVUY0olPAWEiTaPXz4MOSSXc+VoBgzDDUiQke6xrTHjUt5s2Q2QyfEPjot16wlhSWUK6jhOdeocdPnPQQgAAF1WuVyTyQ3IAABCEAgnABiQjgzrrgi0LUdwtqXV1d371SPUDyE8gi4gqUrlu3hyVwZkq0qa9zzrueOCajqJxrq+7h+dtgni9uucvNIx6wvQv1Ne5cfs5FXCEBgPwJxe3P384OUIQABCECgAgIa1adZhwq254TNbBxzzxpHsSvVY+nl9L0q825lX7YZt5zsDLVFQqrtYeO+V+OJkZ+hNDkfAm0TsNH/c8+StinhPQQgAIE8CfTruXlaiVU5E+iW6FzW9SlRy1a2yNlHbLtJwPoUbh7Z5xvZY/0WUxa02KcxxkPMtKJMij6AvoDaF6/17NF3Ngh+6FlkZYx7xFgO8j0E6iKwrCZRFwO8gQAEIACBjAj0K6FaPkkNjqlGh3tsTcNDFWGb8RgbiSrqEgRjBvndr9C7LGKmlUNc4qcRoWrQrMnnHHzBBghAYDsCuk/qWYKQuh1zUoIABCAAAQjkQEDthiXtIwk3/XZpDv5ggx+Bs7O7fidudNbctj4I9tczwgRUffv06cfXDyb41BdRlcRcf4P6jdS2UFljoHeCTCFKCGRGIG5vbmbOYQ4EIAABCJRPQJ3f+lPFVvtljgmR1jjW65J9a7RMi8Uhamo4a+SyKsdrGtAST6fsXpNDstet3Cst14c1ced8rfno+p6zvdgGAQjsTwAhdf88wAIIQAACEIDA1gS6tuTz0TbkmD0++/HatjK0ScYo7vd9v89AIqbKwl7BZjQOpY+Aep2KK6Au6de5Htvwp367YEnZsGtU1nQv4D4wzJpvIVALAUTUWnISPyAAAQhUTkCVVI1C9JlJpHN8Zyuqkq7Rg/2Glj7bd7aMjImqvrNV+8vEpMgit8IusbaVMNUQbYUBfkIAAmEE9BxRR5Xu6QQIQAACEMibgO7XBAjEIBC6pO9cO7I/SFbtEmaixcipOHEof/pB7X3fNnz/2lSfNWj72bNPVg3YTmXbXvG6AqqeASZUprBHcduqZ0vid8uZBnmvHXy/xAaugQAEtiOAiLoda1KCAAQgAIGVBFTRVWPDxM2p6FSRVYNWwutQ5bs/89SNy5Zz0fWWliuq6lyfUZFbiJryU3++XFw/S35v+VKyD9gOAQhAAAIQgAAEIDBMYM1KMMMx8m2rBNS2U3tpLsyJp3a94nLbInov8Ycya4T2fR1aOld5ZIOx9xAv3fIiOr5lbV+S26YuUdIGr4/14cS2qOtfCp+hLFutPMW2ifggAIE8CSCi5pkvWAUBCEAAAiMEQkYSW2PJXSJnSjxVkkPi6PH46FpDWeep0jx0ro4pqCHdbyx1R9L83zKtNB6Ex6rGy5BAHh4TV0AAAq0Q0ChxAgQgAAEI5E2AWah5509p1vkOxPVdjnNoRRyJP4ioZZSMrt18d9P8cu9puc2IzSXXQlYT28tm9T9IpGdVm71ygHQhsB8BRNT92JMyBCAAAQgsIOA7ktiNWpXcuYquRqSOjXjU8kxD4qsq+q5Aa2naKEr7zGsaAnvvbZPGK2KFAAQgAAEIQAACbRNAjGo7/1N4r2VT79wZX85fbUzfMDZ4VQNvWdbXl2K684ZmovZTUx5uOXuYe1o/B65/Vl/L1AD162fv88ldanjIAp9yN3Qd30EAAmUQQEQtI5+wEgIQgAAEfktAI4klXNoIziFxMxSWz3I6GpmsNPtirH22hhFLu4TSX35+XxzPveG13FOuhAAEYhFg9nosksQDAQhAIA0Bd8ZWmhSItUUC1laztlufga+IqrbeWJAwp7ap74zWsXj4fh2BoZnCQzFqn1QrF0PH+W4bAvpN7f2bkQ1aptu2c7q4uHjlvB2bWxLcrmcgxSt0vIFAVQQQUavKTpyBAAQg0AYBt7Fj4qY81+g/azSNjRDuExqaSdo/xz4rXQmp/f0v1Bg3UXeucm1x8RqfQAlLAMX3mhghAAEIQAACEIBAHQRC6uV1eIwXWxIYastJPNWf7yCrfjuwb7/agnsLQn2bWvxsovhU21z9BRLIfPO+RY5b+Lwn/zGBVN8r3L//IGiLJm09RYAABOokgIhaZ77iFQQgAIGmCLiiquu4Kr9TFd8lMxfHlmlRA00NgKmGmmsb79MQEH/9hXaIpLGGWCEAgRwJ6N4/1wmao93YBAEIQKBmAgioNeduPr6pvaZ6gNp0Y23ItdYizK0luO56dyagzSwci9Ha8GPH+b5eAvqdjrUHpvqQpohYP8SewvCUfRyDAASWE3h9+aVcCQEIQAACEMibQNdIfnJa/nfIUlWOQ8PYElCqMGv5JkIeBJQfahRpbyICBCAAAZeAng0sF+kSufleA1HUyQynm2z4BgIQiE8AATU+U2IcJ6B6QCoBVamqHULIg4AE1U8/HZ8dSF7lkU9bWzEloMoW31XNhuweG3Q/dC7fQQAC5RBARC0nr7AUAhCAAAQWElAjWfta9DuDbd8a32jv3bs3eSqNsEk8uxxUHiOk7oKeRCGQNQE9F2ypt6wN3ck4Pc+sk3mq83En80gWAhCojEBKQasyVLizMwGfZ6KeoRJpCHkQePr04zwMwYpsCGgwPe2AbLIDQyBQBAFE1CKyCSMhAAEIQCAGAXXQ9IVUNXJ9Z5Dqep+GcwxbiSMeAYTUeCyJCQI1EdCeZdzTx3PUBg49e/bJ+EkcgQAEILCSQL9uvjI6LodAFgSWrHiUheEVGsEKJBVm6gqX1Pej/gG1A7TqioLaAxJV9TzSd/b9imS4FAIQqIwAImplGYo7EIAABCAwTaA/+0iV5ZBRiHNLAk2nztG9CCCk7kWedCGQNwHu6eP5c3bGcoTjdDgCAQjEIsAs1FgkiScnAmp72GCknOxq1ZZ+H4DLgXxyadT9XjPENYjeRFIJ7FqxTO0BiardoPlPT6uxMMCn7rKAdxAIJYCIGkqM8yEAAQhAoHgCqiCrUqwKczcT6dMgn1gSKAhXNierM4OltbLJDgyBQDYE1HESMpgmG8MTG8IM1MSAiR4CELixQgxIIFATgefPx/firMnPUnxRu38oPHjwYOhrvquQQLddxfOTSDrnXieozv+GWdVmjiTHIVAHAUTUOvIRLyAAAQhAIJDAmlHvLAkUCDuj02/fvp2RNZgCAQjkQkAdaxqVTkfIVY7Q+XvFgncQgEAaAmvq42ksIlYITBN48WJeVLEY1GYk5EXAZiD2rfLd3qd/HZ/LIaDB1KrbxhwQr3aDBmMya7WccoClEFhKgJ7EpeS4DgIQgAAEmiagTh8JchrNSCiHAKJAOXmFpRDYmoA6O9URomXdtJStZq+3GtQpZJ2/LOvbainAbwikJUCnc1q+xJ6GgG9bghUu0vBfG6vqNsqbfhten/WnY2MzVtemzfXXCVh9W3XvLYLy3uq2PunZ3qlj55qAquPqG1J9eStfxmziewhAIB0BZqKmY0vMEIAABCBQOQEaWOVlsBpOahAx2ri8vMNiCGxFQB0h6gRpuQM05ij9rfKNdCAAgbIIMAu1rPzC2jACLdchwkhtf/ZUG15C6vn5OW3FxNmitriWUdaAxePxUeLUlkU/N2Civ+0FdedlnLkKAqUQuP23X/ziydb3v/e9w/ELX3hl93/4sz87/OJHP3r1eerNG++8c/jj73536hSOQQACEIAABKokoBGILc9WKilT1ZmhRprl161btxktWlIGYisENiagTjbdN+7f7zp5Nk5+1+RshoYGntg9c1eDSBwCEKiKALNQq8rOppyZE1YMRsiMN7uG1+0IaFnf4/E4miAzU0fRrD7gtscVmeqZElWnxO3ViW4QAb/5DSCTBAR2JPDa48ePP1ub/kcffnB4673310bD9RCAAAQgAIHiCKjCb53NxRmPwaf9DzVqlEYPhQECEJgioH2Upjrbpq4t+ZhE5JBnnAYWab84dTLrrxNh75wQuHtS670Gsigg0p4w8A8CTRG4uLhoyl+crYtAXwTqe6dnZ+mCUN+nGj/P5aP5TH4aifWvU8w1uCa3FQpKs3d9DhEDBCAwRiCKiDoWOd9DAAIQgAAEaifQasd6bfmq0cgIqbXlKv5AIC4B7vc3eUo01XJmJpjePMPvGwYk+XHiLAjUQgARtZacbNcP1QlscJDto24DiRBQyygX2pNTS8r6BOUt+136kBo/x4d3jkLqWB01R1vH6XMEAhBYS6Ab/rs2Fq6HAAQgAAEIQAACBRPQDDMaQgVnIKZDYAMCGmihjv+pUekbmLF7ErGEU9cR63AOmfXqXs97CECgHAKa1UWAQOkEVCewAZi5zZ4rne1W9ivffEVUrZqh+h8rGC3LHQ068GGtc9YOzFtm4fhVqqPKJrNf9WACBCDQHgFE1PbyHI8hAAEIQCAiAWs8R4ySqHYioIaR/mwUuRpLCtaQU+NPeyMqaOaVgi1JqYZ1CmHhlAj/IACBrAhoJsLYqPSsDI1ojEQP3QtTdhSrk0pL/LK8b8SMIyoIZEjABk1kaBomQQACjRFQ/cZ3AFcnpB5fzkhlBaPQYmJtaJ/rNLg5t9UKVP9VPVhtf72XoE6AAATaIhB1Od+//eIXD+9/73uH4xe+0BZFvIUABCAAgaYJnJ+fN+0/zt8kgKB6kwnfQKA2ArULqXYfSymcDpWJ1mf6DjHhOwjUQgDxoZacxA8I1EFg6VYNrGDkn/9L68s5M5ZPqQcX+hPmTAhAYAsCr8dM5Etf/9rhn/7+72JGSVwQgAAEIAABCECgOAIaqaxZrRpJK0FAe8CokU6AAATqIaDZVOrgqTHIL8243VpAFUulKwGXAAEI1EVAM75YwaWuPMUbCMQmoDaT2k4SqXJuO6mdJ1sJ0wTEyHembz+mri39KMtyYEv89m3mMwQgUC+BqCLq7/3hlw//+O3v1EsLzyAAAQhAAAIQgEAgAVdQpbEdCI/TIZA5AYmMmllVQ5BwKfFUS6jtIZ66DLXnGAECEKiLAMv41pWfeAOBFAQknKntJOHNHYyaIq21cXa2Mkh2jKNEcDFaE2wJ5Rzb0AwKWpOzXAuB8ghE3RNVy/i+8c47h48+/ODw1nvvl0cDiyEAAQhAAAIQgEBCAmpIai8VOhITQiZqCGxMQJ0oEh6XLlfmY64tratzbZ9mu85maujeYsHdr9m+G3vV7LDcZoiJacg+ZWO+8T0EIJAHgVoGm+RBEysgUC8B1XcknFnQ+zt3HpzEONULVAdyw9pBX2vrG9rrUytoEG4SCNkH9ebV178xMXZtfl+PlU8QgAAE/AlcPZn8r5k88/Pvv3f42QcfIqJOUuIgBCAAAQjUQsA6r2vxBz/SE7AljRBS07MmBQhsSUC/aXXwqdPI7QAMtUEdiC9ePD91FPYF06G4bCS8vbrnaOT+2dndG/bIztzvQbLP7peuT7yHAATKIqD7zdD9qSwvsBYCENiCgOo/Y3WooTqB6jhrRcxbt5Z3jctW1bUQ966Xjm455uVcr8d2OG3z0BfQ++fwGQIQgEBKAlGX85WhNgP18qc/TWk3cUMAAhCAAAQgAIFiCXRLVD0q1n4MhwAEhglIKFBnnpbFlRjqG3SuLaWr6yUgqkNurfCgOBSfZoF1QkaXTu4CqnFj9pqR4BUC5RIo5X5TLmEsh0A9BFRXCQkSMbWH6pog4XZNsFmSa+Io/VoNLJeYLPFU+TEkeC/xUfVj1QVVl11bJ16SPtdAAAIQMALxhoVYjC9f3/iD3z/809//3eHtl8v7EiAAAQhAAAIQgAAEbhKwRr/2/qNReJMP30CgZAISL/U3NhPUfFPn0LNnnySfwaB7TIn3mc7u8VkpxpFXCEAgTwIMhMgzX7AKArkS0HNfg8pChElrU0loWxIk3K4V/VqdjSrxdO0KLGN5pudHiXXXMX/4HgIQKJvAa48fP/4stguahfrBv/k3hz//yU9iR018EIAABCAAgawIqMEU0sjLyniMyYaAhBTE1GyyA0MgEJ2APSv0W1eQcOqzVG90QwqMUB10x+Nx0HLjacsf6ySXq67V/rD6W9tBOmgAX0IAAqMEJEwwC3UUDwcgAIEJAlPP/rHL1txzNHtSYuzS0KLgtySPQvhKTNeARAIEIACBHAgkEVHl2I//5q8PD99449Xyvjk4iw0QgAAEIACB2ASsYzx2vMTXJgEai23mO15DAALTBPSsVbD9sJbMTDg/P59OhKMQiEBAHeljon+E6IuJQgMcls4KK8ZJDIUABJISWCLSLRVS17bpWxNR1/KaKjh6fmhwHINwpihxDAIQ2JpA9D1RzYHf+8MvH372wYf2kVcIQAACEIBAlQQ0OlKNNQIEYhDQrGZ1GBAgAAEIQOCKgC2P3C3v++nVgYB36uAkQCAlAQ2EWiLwp7Rpj7gRUPegTpoQqI+A7qehz26tOqF9OUOD6hm2ukXota2dn1JAVX5rAA4CamulCn8hkD+BZCLq8bf7oWppXwIEIAABCECgZgKq5NPoqjmHt/VNM1gQUrdlTmoQgED9BNQZe3FxcdprTa8ECMQmYMsOtlwnRECNXaqIDwJtE9hSSNXWKktDKwNoUguorXBcWs64DgIQ2I9AMhFVLv3xd797MDF1PxdJGQIQgAAEIAABCJRFQPv3ESAAAQhAID4BE7rix0yMEOgIaBnCFgMCaou5js8QSE/AhNSQASqakdrtc+q/wo/SWbrCVAsDYOWjVk0iQAACEGiRQFIRtUWg+AwBCEAAAu0R0IjMO3cQvdrLeTyGAAQgAIFSCSztKC3VX+xOT8A60W/daq9OiICavnyRAgRaJtAJqU9Oy/v6iqlqn2uFH7XVfcPSZWRbGACbcr9vlsP3LaGcBwEI7EUAEXUv8qQLAQhAAAJVEGBEZhXZiBMQgAAEINAYAZbibyzDN3D3/v1uhk5rA+sQUDcoXCQBAQicCJiYGjIQSrMnQ/ZJlaBHuE5As3pTBlYJSUmXuCEAgRgENhFR2Rc1RlYRBwQgAAEI5EjAOsxytA2byiXQwmjmcnMHyyEAgVoIPHv2SS2u4EcGBCSeasZTSOd+BmavMgEBdRU+LoYABBYS0ECokHutLe/rMytVgp7vbNeF5hd1mQTolIODYF1UccBYCDRLYBMR9T//5V8ePvrwg2Yh4zgEIAABCNRJgGV868zXHLxqcSnAHLhjAwQg0BYBBqy0ld9beHt2dvcQ2rm/hV0p0kBATUGVOCEAAV8CoStKSAjUrFSfvVJbHmSllbbUzyFO5+fnBwnQBAhAAAKtE9hERP38++8dfvbBh62zxn8IQAACEKiMgBphBAikIKBGvu2tliJ+4oQABCAAgcOBASuUgtgEbDZq7UIqAmrskkN8EIDAEgKXl08GL5ua3aj79NxqUqGzUUsflCXRVDNOJZxq71P1c4jTFkHppF4ueAs/SAMCEKibwCYi6lvvvX/4xY9+dGBZ37oLE95BAAIQaIlAyL4qLXHB13gEGPUbjyUxQQACEIAABLYioM5ndUhLSK0xIKDWmKv4BIFyCQwJphLmpvY29REInz713xtV7bYSB8CqT0OzTfXc6nzYRjjtlzaE1D4RPkMAArkR2EREldNf+vrXDv/093+Xm//YAwEIQAACEPAiYA0MNTJY1sYLGSetJICIuhIgl0MAAhCYIeDTiToTBYchMEjAhNTBgwV/qT0Ix2Z+FewWpkMAAgUTePHi+aj1l5eXo8fmZj9++umnL+93l957r2oGZ0lCqgb75NTeVJ2sJH6jBYsDEIBAlQQ2E1F/7w+/fPjHb3+nSog4BQEIQAAC9RNgyb/68zhHD2lI5pgr2AQBCEAAAhCYJyAhtaYgMaHW2bU15RO+QKA1AhrcMRTsHjw0U1XnS7SbW11KQqrue7r/jcXjpi0htZRgfEqxFzshAAEI7ElgMxH1+IUvHN54553DRx9+sKe/pA0BCEAAAhAIJiAhi9kqwdi4IAKBnEYHR3CHKCAAAQhkQ4BBKtlkBYZkTkACxcXFxUsB4dPMLcU8CECgRQJTM0a72aHjS9SqraUZqaoTSFAdqxt0aTzxmpU6FkdOeaNZqDmG0veWzZEpNkEAAnEIbCaiytzPv//e4WcffBjHcmKBAAQgAAEIJCagBpD+qMwnBk30owQQUUfRcAACEIAABCAAgcQEtKcgs08TQyZ6CEBgNYHQGaNughosLbG1E1SPpz2t3ePue90Pp/Za1bl7t998RNxc+zdytcstA2vfz81+Xhs/10MAAmkIbCqivvXe+ycvLn/60zTeECsEIAABCEAgIgFV4tWgYqmbiFCJKpiA9uClsRWMjQsgAAEITBJooaNuEgAHITBBQMtWavnKX/3qVxNncQgCEIBAXgRsxqiETp/ld4esV9t/qu2l+2I3O394L9Y9RVTZ3c2+vTPk2qvv9rTxlREDb2RXrrNkB8wN/mqqXAVHxgUQgMCmBDYVUeWZZqP+09//3aZOkhgEIAABCEAAAhAomYAalIipJecgtkMAAjkR0CwNBkjllCPYkhMBLd97efmE5XtzyhRsgQAEgghI6OzuY8NC51xkPm0vxT82K9VnNuicDaHHlaaJoxJSJdhJkNT3rj25i5Sqn+Vqo/EMzRudr2uVP8+fLyuTS9LkGghAIB6B8YXh46VxLSbNRv3bL37x8PZXvnrtez5AAAIQgAAEIAABCEwTUMOLZfWmGXEUAhCAwBwBZqHOEeJ4iwQ0a+vpU83eYu/TFvMfnyEAgZsE1PbSnwaXDLXBJNZKFLt//8FLofKqi13XbH0vlQ1ukA39ID+Gvu+ft/dnG+iW02oIEkHNLq3UEJq/Vvd0RVSJ26Hx7J03pA+BVglsPhNVoL/09a8dPvrwg1aZ4zcEIAABCEAAAhCAAAQgAAEIQAACEMiCALNPs8gGjIAABAIJzC2P+uJFnFl/Eh7H0pIIZrNSNTNVf65QFujSotO7GZJXIu5YJCUIqGa7BMsx5nbO2OuaGaNDcUrsNAFVA46WCJ+3bl3PH/mmGcOylQABCORP4PoveCN7mYW6EWiSgQAEIACBRQRUSe6P5FwUERdBAAIQgAAEIAABCEAgYwLq8M9ptk/GqDANAhDIjICEKYlQY/ewmDMvJUAqPQmmQ2HMhqFzY393dnZz1mnsNPaIz0TfoVnAY/ZInLTrJHg+e/bJSdReInwqDfUNSey0oBUblgSbqSw7XBuXxMU1EIDA9gR2EVG3d5MUIQABCEAAAvME1ABTA8QquPNXcAYEtiWghiABAhCAAAQgAAEIrCVgnct7dvyv9YHrIQABCGiG4Nh9bKlwNkZV/QTH46NRIXXsutTf19x/YYLonJBqA+FdFnp/5871ZY7d9rRmKtusYb265UXxaQledwbqmIDum79K2xVQJfKPlV3fODkPAhDYhgAi6jacSQUCEIAABDIm0B9dmLGpmNY4gVhLUjWOEfchAAEIQAACTRNQR+7azuCmAeI8BCCQBQHdxyRKbTUbVU7nJqSqL6OWIFFRYqn5ZPuITgmNoQPh+yKry07PRrW3NePYPS/GM1NxdKLulRTTX+LXtYX3EIBAXgR22RPVEGhf1Muf/tQ+8goBCEAAAhDYhQBL9+6CnUQXELCRsgsu5RIIQAACEPgtAeuUAwgEWiQQozO4RW74DAEI5ElAottUG0nCXOwgMUzibQ6hljqNCahiqhmh+pN4OiWgSmzVTFFX8FyTJ4pHM1/d+GI9M7WscD8oHYnABAhAIH8CV8MfdrD1l7/4xUF/b3/hCzukTpIQgAAEIACBbo8Lt5IMEwjkRECNNo2GtWWMpjoIcrIbWyAAAQjkTICR/znnDralJBCrMziljcQNAQhAIJSAuwxr/9pOkOtmAfaPrfls7TPVKbRP5pQNa9Jp4Vo9m+aW6x3i4ArIl5eXpzzoz2LVdW4beiif3CV2LR1rhy+xy+JwX80Gi9fqotpOakooduPgPQQgsB+BXUXU3/vDLx/+81/+5eHwla/uR4CUIQABCECgaQJuxbtpEDifHQEbjat9dyyovFqZpbFlVHiFAAQg4E9AnWsMnvLn1cKZet6qc1PPVbfzVc9b6ySvgQMCag25iA8QgMASApoF2N8bc0k8/WvsGaHXIXGuf36Kz3p22b6dKeLfIs6hWZo+6Vq72ARUXWP5YK8+8Ugo1Z/qAIozZTtbvqaM38dfzoEABMIJ3P7x3/z16FVv98TNqXOHIvG5/hc/+tFhLF6f64fSte+4/ro4PcbZePVf4Qc/t0xQfsbvlS4ne9/q76fZJWlcAABAAElEQVREvx/cvVo+5X/6t//WsvD0+n//1V9d+zz3gevh55aRNeVHHbr/8a/+j1N0bhl14//4k1+5Hw8l/v5cB7CfeodbHqh3UO9wy8Pc+5D7x0kYu319/zCe320+vz95/ulJPHXLjzpd3fvP2DPYLZOllB/z17Vd713/9dn1X5/nAtfz/HbLCOWH57dbHubeb33/6N/TY92/bVbhXuVfIuLxeDysaX8qr/a63mZphvL78v/yvx4+/vhqFnDo9f3y9/986/+cK7LXjvevn0vfyp+140Ovv5b4yw9cz/PXLRNz5c89V+8pP2HlZ9c9UZVhX/r61w7/+O3v6C0BAhCAAAQgAAEIQOAlgbllgz7pCahAgwAEIAABPwJ3ewKq31WcVRMBdV7qzzptp3yzc6fOKeGYr78l+IKNEIAABJYSqOWe3vc/ZNZl/9qSP2tlEWZ1lpyD2A6Bcgi89vjx48/2Nvc//NmfHf7nf//vDw/ffHNvU0gfAhCAAAQaIqDlWjRikwCBnAi4yxH5llHbW8WWI8zJH2yBAAQgkAsB33tqLvZiR3wCtlR+aMxD+6WFxrHX+W69Yi8bSBcCEIBATgS0XUrspf0vLi52c/HevXtFL+m7hJ3V6Up6xlk+lWTzboWahCGQGYHdZ6KKxxt/8PuHj37w/czQYA4EIAABCNROwPYwqd1P/CuHgLsckay2fV7mPFAngMqz9sNRg5IAAQhAAAI3CfDcv8mktW8koi4JPrNWl8Sb+pp+vSJ1esQPAQhAoAQCT59+HN3MPdtgmo2pQbWlhj3ZbclM+aR6SOr6qMRaDf46Pz8/vbbCd8u8JK32CGQhor71J3/Kkr7tlT08hgAEILA7Adu7ZHdDMAACLwmo4Xt2dvfU2FGDR38SRUPD0HJOajipMUUDKpQm50MAAjURSN1pVROrWn0ZekbO+WozR+bOy+24BFSWOcwtV7AHAhDIgYCeBbpH1hQuL5/U5M6sLzbY2F5nL8jkhLlte5aYaW19zbC2PgSr8+pVq69JVKUvYAldroFAR+B2DiC0jO8b77xz+OjDDw5vvfd+DiZhAwQgAAEIVE5AFcjYS/hUjgz3EhOIUR6tM0AdvmpQaqBAP96lSxkmdp/oIQABCCQlQMdRUrxFRL50lo4GOJUW9KxHQC0t17AXAhDYkoDukbq/99tKS21Q22vJQJ2l6Q1dp+dcLH+G4s/pO3s2LxVRVS/UtXs8KyWkKv215UVtft8yLDFVfyojz5751xGUhoU9WFnavEJgbwJZzEQVhLe/8Y3Dzz74cG8epA8BCEAAAo0QWFrZbgQPbhZIQA0ia9hoBqsaSUONaH1vS/sU6CYmQwACEFhEQPc+QtsE1GkYGkoddLd02eJQPpwPAQhAoGQCMZf1lZglwWnPQVt6zi0dMLRHPsrWJfuDdpy7eWGq37lCX98PzcDUDE296jybranZmXuGtQKqbPcVUF0/1T+gvgL1B/iUVfUvqO/MRGs3Lt5DoCUC2Yiob7z77on7L374w5b44ysEIAABCOxEgErgTuBJNhkB6wSYakS6iZuYqoakTwPKvZb3EIAABEojgIhaWo7Ft3dJ3e/+/fBl9eNbHhbjkg7psBQ4GwIQgEAdBCRkxRp0YuKUxLm92lcSvLSs78XFRfYZJO6yNVRMVLu1v+WNPg+1ZyWcqv6nvNFrd14nvpa+5L38HRowHZLxvkKyZs5KoB9iHJIe50KgZALZiKiC+Pn33zv8vz/8h5J5YjsEIAABCBRCYG2FsxA3MbMRAmqEWgM0tJNYv4U9G/uNZBFuQgACOxMoaWbGzqiqTT607hejg3JrmOoUtvrA1mmTHgQgAIESCaTZo7JrX+3JI+d6j55VS7mPDW5Se7aboXrnhN0E1H4e2OxXW8GpfzzV565O0dkWI40xDjHiHopDvKhfDJHhu1YIZLEnqsFmP1QjwSsEIAABCKQk4DtTL6UNxJ2OgATFlmYcyV9rhKqxGNpJbDlhYqoaljarda99YswmXiEAAQjEIqD7mu+I+1hpEk9eBEI7lEurS5Q+qyav0oI1EIBASwR0/+zPbozhv4QzhKfrJPUsXipgdiLpuJQxl4duu/m6Vek/WR00lg2axavypfb68+fPDxJVl/YDpPeeFCBQPoHxO0/5vuEBBCAAAQhAAAINElAjogUhVT7qTw1zNaBiNZxMTLWio5mtaqQRIAABCJRMQPfKFp4NJedRattD9kTVc7UkEVVle2mndGruxA8BCEAgdwK6f84JcDF9cMWvVCJrt/xqfkvShzyLYzG3QcKpWPvYaQO5bt26fZoxG+OZLX/Mp70HC1qZlqgrH9WnoLqJ+mb0Z3b6sOIcCORIABE1x1zBJghAAAIQSEpAlThCvQRsNGa9Hl55psaIRuSmbPR3ouojhNQr7LyDAAQKJWCz9ksSxwpFnaXZIfW/ksqIOimtbGcJHqMgAAEIFEAgxWxUPUv64pHEJpuVKCwS11oasLpGPFQ7PzTkwjd1HqucydetZ6NO9UW4dSnZJqG3/3sIzU/Oh8BeBLLaE9Ug/PLnPz/ojwABCEAAAhCAAARCCaiynlJUDLUn1fndCM87m/iqxpiWCiZAAAIQKJ2AxCaJToT2CIR03LkdfzmTUqckAmrOOYRtEIBAKQTWiHtjPupZcjw+enW4L6DqgNpZ+j52kD+51XfW2qP2b2jYY+ZrqI2xzrcteWLFNxeP+gd8+126gdlH+hTmoHI8WwJZiqj/9Yf/cPhPf/EX2ULDMAhAAAIQgAAEILA3AWuIbGWHOgHYT3gr2qQDAQikJCDRSeITAQJDBFJ0Zg+ls/Y7leHUM1vW2sj1EIAABFon0LXZOiFVg3kuLi5Of5r5akHbsqQIISswpEi/H+cSEbQfR+hniXylPNdDfeufr/J1eXl5UNmSYO3WdfVef/p+rZitdDU4YMmAM11zfn5Ov0I/8/icPYHwIRwbuPTWe+8f/q//7X8/zUZ9+OabG6RIEhCAAAQg0BIBVS5VgVSDhgCBpQSsUdJSORpriEtc1bGQWT5LuXMdBCAAgRgE9t47KoYPxBFGQJ2otTyn1AHKDNSw/OdsCEAAAnMEUizpqzTVXtSsPbctpZmiNotPx1M8o9z05nwv4fjSdreWT5a4WEsdYCqvur6uT6dOOR2zfUtVLkPrExJQl+aFGaayf3Z299CfKZxiRrilySsE1hC49c1vfvPfrYkg2bWvv3b4//7Lfzn8q3f/dbIkiBgCEIAABNoloM6nW7duHZbsq9EuNTx3Cfzyl//tZUPs14tGYLrxlPJeovF//+9PX5mrhv79+/cPv/M7v3P43Oc+d+Kg39Rnn312+M1vfvPqPN5AAAIQyJGA7lO6X+n+RWiHgPL8d3/3d1/m+9nL59a9U6e1nl16ptnfvXv/w8s6YpaLdr2sd2j53v92oJOxnTKLpxCAwHYEJDrq+ZDiGaB+B9U59Pfaa6+fZgO6/REStWLMEHRpKf4lswXdOGK+1/NraTtRg3bX1tl+/etfx3SniLi6PUsfXqvzPHjw8JUIqnIp4dU3X2IIqAZOvzP7Tdir+hfoUzBCvOZE4LXHjx9/lpNBZov2RP3eH/3R4c9/8hP7ilcIQAACEIBAdAIaeZdTwyK6g0SYjIBGs6rstFJ+bNZLJ55qWaTxmdzq5NWoUjp5kxU/IoYABCIRoB4QCSTRJCegZyvL9ybHTAIQgAAETrNGU7fxNOtVbSW3HjI1W1Li1ZJngJZOzSVoKeMlQe1PzSadC3pOaqWRsTb60vTn0s3tuHiNMRiy1bd+4ZbVoXhif0efQmyixLeGwHjv15pYI1yrZXzfeOedw0cffnDQ8r4ECEAAAhCAAAQgkBMBjdhMtX9NTn6aLRJRfRtO3ZJUD14tUaUGkBtevHj+ajkrjX615YSs4dvCUksuD95DAAL7EdASZnYP2s8KUobAPAE9OwkQgAAEIJCegC1vmlJI1VKmElGVlv7UzrJZgX0PdWxqAGv/fPezu/eq+73ey4al8fbjmvu8ZpbtnIDab0OqLTmUd0uF6Dnflh7vZomO74drImLotjkqR0P+j9mpMiBbpgZA+/YDjKWx5Hu3T0HlR3/0EywhyTUxCGQrosq5t7/xjcOPv/UtRNQYOU0cEIAABCAwSEAdpwQIhBJQg6Zb9q+d8iPBeGkju39d/7Px1/dqJNNIMiK8QgACWxDQzI6cZmps4TNplEegtr3tyssBLIYABFoikFpIVbtH7UkThSy9IcZqGy19BkwJY3ZsTMyzNpkEubUDzhTX0tC1vcfb3f0ZuuI6FMR8Tiwcui7kO6UtEVPB+A5dr/NsT9yh4/quKyOdyGqC6lScFo+dMxe/na9XO9eudY/tIaC66eu9yqD+Qjj04+AzBNYQGL8DrYk10rVvvPvuKSYt7auZqQQIQAACEIAABCCQAwFbJigHW7ayQY24rYI1kqzhbp0LW6VPOhCAQHsEtITe3EyH9qjgcU4Ehjo2c7IPWyAAAQjURkDC5lrxcIrJ2MzT/jVqC6VsD+n5IpHWrQdJrDJh19IeE1v79g59tjiGjs19p5UYQtqiJmIOxTt1bOj8kO+GxMahZ7c4mh3irL4FhalByyaoDsU3ZKPOUxpqV/sGE1JVFnSt/lKWf1+73POMg2ylr8Alw/vUBLbrDVvoyRt/8PuHj37w/cPbX/nqwhi4DAIQgAAEIDBMQKP/Qirjw7HwbYsE1Ah0G5ktMtjCZ1dMtUb8FumSBgQg0B4B3de15J11ILVHoAyP1dmo0Fr9bWo5xjJyDishAAEIlElAsxy1DGztzx3Vg+b2DDWxVedKCAxZDlh9L7puSZBY5s7E7dfV+nHLrrGg9qXiW2rLWLz63neVMxNC5ZO91/Uqa/JF4qWODXEOmUlr7eclQqrsyT1YX4Frp/LW/Ha/5z0E1hJ4fW0Eqa9/60/+9PCP3/5O6mSIHwIQgAAEGiOgyikiWGOZHtFdjTIlbEdADSQttQn37ZiTEgRaJKCOLHW+EPIloNkoNmMjXyvjW+Z2ssaPnRghAAEIQGCKQH+52Klzaz9m4qOeS+LiM8jHBkAtZaM0lZ79zcUzJ3hLpEwZ5K9WOJl7dg8dN1/7nBWf6qh9AXnOD1d81rlm29x1pR63fgOJzQQIxCRw65vf/Oa/ixlh7LjO/sW/OBxef+3w9OWSvv/yC/9j7OiJDwIQgAAEGiSAgNpgpkd2OXXDK7K51UTXLSl06/DrX/+6Gp9wBAIQyIuA7i+f+9zZy9kE2Y83zgvcRtaoA/HZs2cvl7y7v1GK+yejDup+J+j+VmEBBCAAgbYISNQKmdHnQ0d1jtLv77K//0yWUPfpp78+iX7//M//fHr9zW9+44PE65x+PU11Azd+EyDH2uyvvfZ6kkFzsuOzzz57KSz/8po9Xk7NnCT/VF7k261bt7zjf+21116V205AfXK6VnZ+7nOfm0m13MPyTZzETP1/Z2dnRf7WJAaXfo8otxRdt7yIluG/evdfH372wYfXLecTBCAAAQhAYAEBBNQF0LgEAhkRUOcFM1IzyhBMgUCFBDSzQh1hhHwJqCOwlTA0U6UV3/ETAhCAQC4EJF5pNiDhJgEN9hEb/WlJYNWjtKRqqufXs2fTdTTlldIfqytopqr6hVKEVD6brfJNf76hO//5qV7rzqiWncov5d0YJ980cj3PZqVqBTrN4NWy3KUFCaj0feSRa689fvz4szxMwQoIQAACEIBAegJaEpQAAQiUT8BG0pbvCR5AAAK5EtDo79Bl03L1pRa71Nmnjr9W8sb8rSX/8AMCEIBA6QRiDsrmHr+sNPTrAGMc++f1Uxu7rn9e6Z9VZueEV7EK2eO2VCYl9iFIRNXgzrk8LDVPSrG7iJmopcDETghAAAIQyJtAqtGGeXuNdRCok4BGEJc4mrTO3MArCNRJwEbp1+ldmV7Z0nzKm9pnC8s/+UmAAAQgAIF8CEjIkPgWI7BMZwyK43HoGTo1y7KVgXI+4ltX5/Xb43aceP5HrA8hx75B9W1IMJWg7dqn+uD9+w/yh1u5hYiolWcw7kEAAhCAAAQgAIFaCVgjqFb/8AsCENifgDqeWL5v/3wwC27dum1vq94jSp2+WoqQAAEIQAAC+RGQ4BRLSM3Pu/Is0gzKsfDixfXl//V8dYVVCVaEKwIq21qSWeW7m/14nd/VmePvXL7jZ+13pOtDOGa5TK6WIO6WHj4ebBU9tUVkM2V1vzKjlK9aIPva4ZX6L3/+88N//eE/HN56732v8zkJAhCAAAQgAAEIQKBuAmpQqIHRynJMdecm3kEgTwLqvFCHkO43hH0JtJIH7r5l+xIndQhAAAIQGCIgsUl/mjkm4WNJ8JkhuCTe2q+xVSl8/NRsXxsMZ7y7mX7dzD4JVspHwnUCfSY2M1Ls55b97fasvZt9vVm/Ww3Oe/pU+8L67zN7ndQ2n1idZBvOU6kUNxP1Zx98OOUPxyAAAQhAAAKjBEIq26ORcAACEMiSQDdi89G1pW+yNBSjIACBIgn0ZzIU6UQlRltHXq3LIKqjjAABCEAAAmUQ0KoBzErdNq/6onUn2g3bIDGwGwx3JZL1l/Flht8wO/dbYyieGuglYXqqvjKUJznOUNXgvOPxmEUfgstMrEz8Vz6wOolbGvd5X5SI+vDNN0+UfvHDH+5Di1QhAAEIQAACEIAABLIlYI0gjQgnQAACEIhJQJ0XbmdGzLiJK4yADYrLfdZAmFdXZ9cqDl95yDsIQAACdRGQsISQuk2e2kAqNzWrF7jfjb0fur4/63LsWr6/IqA6mOrGWvpX9WP9SfgzodSty0hs1XHN+FToC4RXsbb5TiK+9kM1cb/j9eQk/rdJJE+vi1uP6PPvv3f48be+dfjj7343T6JYBQEIQAAC2RJQ5dgqJtkaiWEQgMBqAhqd3B+h7EbK0r8uDd5DAAK+BGoV7Xz9z/E8dTRN3e9ztHnOJjpz5whxHAIQgEB+BOzeTX9D2rwZeua7+6WHpj41mzI0rlbPt/qxRNL79x8cTNQWW3cGpQnYmnGpa9Qmb/33IiZ9BmvKc6tlcAu/i5qJKiDaD/UXP/rRQfujEiAAAQhAAAKhBKgkhxLjfAjUR6DfUKnPQzyCAAQgUC8B7cVlwZ3pYN+V/GozOEr2AdshAAEItEpAQiqrVqTN/dgCE/1D8fJLwqjt6a72dr+OZuKqvpd46Nbn4lmxLCYTgpddPX+VCcj9MyU694NW1xo7v38un7cjUNxMVKH50te/dvjoB98/vP2Vr25HipQgAAEIQAACEIAABKohoGVzbMR4NU7hCAQgAIEGCKhzyUK/g86+L/XV3Q+rVB+wGwIQgEDLBDoh6fK0z6I42OAY99nVMp+1vmuPepel+IbsW9+fAZlaPFvrb4nXu7NPZb/a3RJQbRaxhEM3D3PwUcvpqg6meuXSMtEXPk00ln82iNvuB1Zm+xz6s3eXsJEdS31Ykl4r17z2+PHjz0pzVrNQv/dHf3T485/8pDTTsRcCEIAABHYmcH5+vrMFJA8BCORCQHu4ECAAAQiEEKAeEUIr3bnu/VsdX/1OqHQpp42521Ps07SJEDsEIAABCCQnICHjeDz+dq/I7r6u7ySs6E8zKm3WXnJjKktAotwasUs4EJquF4oUA4xLrZ9J6JSg6jvgWuxMJL1O1f+T0tRyyDHET9mjWb4hPvhb2u6ZxS3nq6x6+Oabhzfeeefw0YcftJtzeA4BCEAAAsEEVFEmQAACEDACamAQIAABCIQQ0P5NhH0J9Jfes9H8+1q1PnV1oMXoPFtvCTFAAAIQgMBaArqf9wfG6DsJM5qph4C6nLAYrn1err1+ufX5Xak2cYqVPUpdXUMD8ySKauDkw4cPT4L7VK6pPHa/9edTp40eU9tC94NYZVL2mA/0d4xiDz5QpIgqL9/+xjcOP/vgw2CHuQACEIAABCAAAQhAAAIisHbEKBQhAIH2CKhjgrAvAXc/NHVu2fJw+1q1PvVaxOD1JIgBAhCAQB0E5kQRCRz602Bvd8C3nm2axecj4NRBCi/2JJCqTVxDnVl1TM0on/st6rcuIdRXTNXAuU48vfSe8RpSRmzQp/IWITWE3Pi5V5uJjJ+T5ZE33n33ZJeW9tXMVAIEIAABCEBgjkBXsbk85LgHw5ztHIcABNIQUKOihgZeGjrECgEIDBFQx0SqDqeh9PjuOgF36V7NSq1FRJUfmgnCM+l6fvMJAhCAQI0EJJrO1SX0vNOzwZYXXbuEbY0c8WkdgdQCWy11Zv0O9ad6p/7GBkiYmKrfd7/fccvfseqSWtLXZqSqlFC/XPdbKXYmqtx+4w9+//DRD76/jgBXQwACEIBAUwSsUtNfCq4pCDgLAQi8IqA9iQgQgAAEQgjQCRFCK8251ulnA+TSpLJ9rMwY2J45KUIAAhDYg4AEGd9gQojPjDjfODkPAiJgbeExUXAtJdWZJR7WEvS7lTg6F6zf8eLi4mB/mqna8ej2SJ6LY+1x7bFqYW7Ahp3H6ziBokXUt7/y1XHPOAIBCEAAAhCYIKB9SFSZQUydgMQhCDRAwF0WsgF3cRECEIhEwJbJihQd0QQS0Oh6CzUKqe6yjuYnrxCAAAQgUAcB3eNDRFTXa10nMZXnhEuF90sJqC2cuk7rinlL7czpulq2X+AeElaqXnv8+PFnYZdwNgQgAAEIQKAuAqo8qCFCgAAE2iSgARUECEAAAqEEzs/PQy/h/IgE1OnnzgqurT7X7au1zWyFiNlCVBCAAAQgMENA+526S9PPnD54WLP7NLPNN2gFB806tAGkSt+WF3Wfpb7xcV4dBLba2iZGmd+LuH4nEk61nHaJS2orjzX4sH+/UL1Z9wR+/34lCxHVjxNnQQACEIBA5QRq63irPLtwDwJRCdBRHRUnkUGgGQIPHz5cPJOkGUgJHR3qQK6tPscgn4QFiKghAAEI7EjABAwTNteKqmtd0QpdEojc0P+caslXN03e10mg5DpzzXUxE1g1W5jf9/Rvj02gpvlwFAIQgAAEGiGgCoMaDkuX1WkEE25CoEoC6ryg0VBl1uIUBJISoN6QFO9s5OpwVie0e/92389GkPkJEokJEIAABCBQJwE9r9xn1t6DgIb6Qew59OzZJ9cywbX72gE+7EKgXxfaxYiZRIfK18wl2Rwuge9SWJqFqlmqWpmvv8LL0jhrva7oPVEtU375858ffvw3f20feYUABCAAAQgsIqB9Uq2hsCgCLoIABIokIBGVAAEIQCCUgDoR2Vs9lFrc8+/ffxA3woxiq2XPrYyQYgoEIACBbAl0omo+g2dstQctASqhRX+djSwzn1MhksBXQl1IKz+VGkoWgH2Y6zeu9ozEVM0YJgwTqEJEffjmm4d//PZ3DhJTCRCAAAQgAIE1BGrb9H4NC66FQCsEbG+gVvzFTwhAIB4BRNR4LJfEpNmoWorMDbUMiOsvo+j6yHsIQAACEKiPgGZ8ql6Rw3Ns6PlaH/HyPZKAmuugK9XPJMppP1TNdCw1SESVWF1z0IQSial6JQwTqEJElWtf+vrXDh/94PvDXvItBCAAAQhAwJOARldqGQsCBCAAAQhAAAIQmCOQ28yROXtrPP7gwfXZqLUMiENErbG04hMEIACBcQKa7WlihvZh1Ow9/al/Qn8msG4lsur5Wrt4NJ4b+R+RQCmxO8cBfSo3Kj+dAFn+qk8SgZmlmf9vIqWF5Zfi39J560/+9PCf/uIvDoevfDUlL+KGAAQgAIEGCNi+AKqQEiAAgfoJ5Dp6t37yeAiBOghItCt5hH0NuaDZDqq/KZiwTT2uhpzFBwhAAALtEtDzTMFex0iY0GlblOhVK+3EeA6qfmMina3eY/Gyh+JYjmzzvQZbdcJ6XkssqzzmUC9W+RQj/R5sYJp+S7JP4m7oMr06X78B1fvnfpPblABS2ZJANb3DWtJX4Rc//OHhjXff3ZIhaUEAAhCAQIUE6BCtMFNxCQIjBKxRNXKYryEAAQhMElBHimaFWKfi5MkcTEJAsx10L7dOrRrqceZLEmBECgEIQAAC1RCw54W9mmNLxSK73l7HxCZbCcIGMdn5vG5DIFfuOQioqpcbn/7vQp/1p1nfGoSnvUB96/A6zwYWsPTtNuU8l1SqWc5XQD///nuHH3/rW7mwxQ4IQAACECiYgCpVWjqHAAEI1E8AEbX+PMZDCKQmoH3MCPsScDt5uw6y5/satCL1rZZqXGEil0IAAhCAQOYETCjS0sC2JLCeLzGfMRJSz8/P///27p43kiS/EzB3mkSz0STAMQisIXPPW2ex+yG0gARIwPmSPMnQp5EheVr5B0ie9A3uDAnryBTaXqCNLoBsTBPDxt78yImeYnWRlVWVLxGZTwIzLFZlxcsTya6o+EdEPmx1moBU+a9yGsUbSCDt3+XINZhVtGWVc5f37HNOJtN1ORJozb1AM/a3T1nS58y9Xh3LEfjZu3fv/jin6v7zL3958r//4z9OysrUOdVNXQgQIEBgfIF0jLrOShu/dHIkQKAPgQwsOAgQIHCsQAYRHdMKZBAsg8Y5MpBXVslMW6r9c89AnhUO+7t5BwECBAjsJ7C5FXBW5eXIGEgCXeW2J9u2B87rmUS2bSXf+ufxY3qPW6jm8618Tj9kdOT/ymrblC9lzeTYsgLxyKS9/UCB9L/KdVTapExa3tb2acO3b3P/3eM2TM31eOxWuynLPitpbWl94EXS4NtmF0T9/T/940Mz/Mq9URu8HBWZAAEC9Qm0PABXn6YSEahPIF+2MvvUQYAAgWME9h10OSYv731ZYH1Aq9XA9nodXq6tVwkQIECAwDgC6wHLEvAqwdKMm+Tek2VXiPXJQJeXlw/Prz+XEuc9zwU8k1e5x+v6dv3rNS3prj9XHievErjLc+uP8/u2YF6e73qkfDlKGfO4BA5LANp3zKh0P/pYwFCux+65fn3mPmOAxhK+9ivPvPT3Xc5p6edxIf4Ka/qLP/vzk//zp396IohaYeMoEgECBBoU2OxsN1gFRSZA4AWBMrv6hVO8RIAAAQINCWT1aQYy8+97BrfKQG9DVXgyKNtSuZWVAAECBOYrkMBjCT6WgGqCpnmuBEMzfpL/ynlFI5/H6zsslIBZPrPzWj6zyyrV9eDoZjC0pJf8s/r0uaMEc9dfL/mUMZ7NMq6f+9zj5NtlpWL6HnMLIj1n0tfzCTqvt/0h6Zbr8ZD3lvfkWt62urq8vv5TO69rPH0cw23/Fjw9q53fnv/Xpp06PClptvH9+a9/ffI///avJ7/4i7988ppfCBAgQIDAvgLpWKfjvq0Tvm9azidAoD6B/H07CBAgcKzA+kqEY9Py/uMFMqjVYvC01Dz9zvXB5vK8nwQIECBAoAaBjJNsC0KWYOp6GTe/byVQtv4ZXR7nsy/9qQRedu3IkLzLSs8EK/O+suXwerC07yBOtp196ShB320OL73Pa48C6fukzQ69HUNf/adsC9wlWJ5SJ1iovb++gjMxIoZ9rA7+OvXxn5ldEDWEv/r7vz/5/T/8gyDq+NeTHAkQIDBLgXTiHAQIzE8gX3K3ffmfX03ViACBoQUEUYcWXl76VrAsr83VmAABAnMU2Py+VQKNqWsfQc4xAlhl5W0J+K63U6nPGOVYz3euj+OY66JrELM4JHie4GcfR67ZBPK7BHNzTeT6KEeZCLB53ZfXl/KzjKNm4kGZ8NBy3WcZRP35b35z8r/+8i9abhdlJ0CAAIGKBNKJ69J5qqjIikKAwA6BfMmyymcHkpcJEOgs8NKWcp0TcSKBNQGB+TUMDwkQIEBgNgIJLrUSYCqrXDd3Jst3ybu7T1YgDnRV5vp4//79Q+qbAco8ub7dbgme9n1NlWBugoDbgufrVd8M+Gb15dKP+JV2Shv23T5j+/7s3bt3fxw7U/kRIECAAIHWBI69N0Nr9VVeAnMWyBetOcyGnHMbqRuB1gSur69bK7LyNiAwly3QGqBWRAIECBCoXCABzbK6LUUdMiiToM9mYKzw7NpquJzn57ACJbg65HVQarDveKD+W5E7ebg3cH5LULXlY5YrUVtuEGUnQIAAgToFskXL5uzDOkuqVAQI7BIQQN0l5HUCBPYV0E/YV6yN86du16xGHWNwsI3WUEoCBAgQWLJAAqibqwLzOd337kIvBVAFx+q5AsfsH5VrzJjg1+2fyQ2bO/eVVcQ5u/XgaanxN+WBnwQIECBAgMDzAumgZfWagwCBtgVsrdN2+yk9gVoFMojnmJ9ABs2m/NzINmgOAgQIECBA4HHlaSbDZiVoORLUyirBvo6XAqjJd8zAXV91kk4/AiWQ2iW1rGIuK2W7nN/yOQmSbvaV51j3WQdR//2v/qrla1DZCRAgQKAygc+fBVEraxLFIbCXgC++e3E5mQCBPQRMttoDq6FTMwg0ZdvmHlxzHIhq6BJQVAIECBCoTCBBm6x0KxPY+lwduO1+5I+3glnNZkVdZc3ZVHHWA/i7Cp5AalZpLuFIXzl/kwmm7mPUks2sg6h/+K//aqktlJUAAQIEKhconfTKi6l4BAhsEcjf71y2ktlSPU8RIFCBwN2d1agVNEOvRSgDsx8//rTqpdcMOiRWytDhVKcQIECAAIHFCJTdIhLkHGrCUQJCWf1qBepiLqsXK1pWXXbdpS7b3Gal9JKCqTGa49+Le6K++KfhRQIECBAg8JNAWYmQVQEOAgTaEciXnH2232mnZkpKgEBNAhk02LwnUE3lU5b9BRLAzOfHlH3AlOHVq9OHQdz9a+AdBAgQIEBgvgL5fE6Qs+8gaibg+v443+vmmJqVa24zjVyDZSVzfqbvlrHDMhku3xEyLpGJeUnD0ZaAUeC22ktpCRAgQGBigXR4si2HgwCBNgTyRSVfrB0ECBAYQyArFgRSx5AeL48MimWwKyuNz84uxst4LacMwl1dfevzbM3EQwIECBAgUAT6Ckrd398/bEta0vWTQFeBXIPbrsP038pCjPKza5pzOi+rcV+/Pn/oT+fvbJtVzfWd9Xa+NcMrGwECBAi0KfDYMXJv1DZbT6mXJpAZxAKoS2t19SUwrYBtw6f1HyL3sqogAz5THhl463ulzZT1kTcBAgQIEKhNoLXATm1+yvO1QMYjMskyk7szPrHUayz96PRlM9m0xfvFnv7zL3/5dev++MzPf/3rk9/+y798ef0P//mfJ//+13/95fddD156/29/97uTn//mN7uS8DoBAgQIEKhOwGrU6ppEgQh8JZAvKoIZX7F4ggCBEQSsRh0BeYIsahj0evv2wuSgCdpelgQIECBAgACBQwUyLrH0sYn0o9+/f/9wf9gEUsskxUNNx37fz969e/fHsTP9/T/940OWv/rbvxs06wSI/+a//3vQPCROgAABAssUWN+SY5kCak2gXoHVarXYGZ71toqSEViWwPX19bIqPOPark/KqaFdfcbN+GJTNQIECBAgQKCTwOXlpfvWdpJyUh8CtvPtQ1EaBAgQILA4gaxGdRAgUJ/AkrfIqa81lIjAMgVsuTrfds9nzNRHazP3p/aSPwECBAgQIDAvgdxf8/z8/OF+8fOqmdrUKiCIWmvLKBcBAgQIVC2QrShyTwMHAQJ1Cdzc3NRVIKUhQIAAgaYFXr8+/1L+fMbo/33h8IAAAQIECBAgMKpAJitmO9gcucdmAqoOAkMLnA6dgfQJECBAgMBcBXKD+GwhkhlwDgIEphfIFocOAgQITC1gpeDULTBs/tmN5OrqathMpE6AAAECBAgQ+FEggcJM6krQcP14aYv/vGeO9+E0/rZ+BXg8lsDTv7yxcv0hnz/83/938vu1/H7xZ39+cvknf/Llmf/5t389ufnDH778vuvBtvfveo/XCRAgQIDAsQJZkZCt3QymHSvp/QSOE8jKoKwQdxAgQIAAgT4FPn+280ifntIiQIAAAQIEugusr7xcf9eu778Juua/u7tPJ/f38/iuHAtB1PWrwOOxBCYJov7qb//uSQB1qMr+9ne/Gypp6RIgQIAAgS8CCdwkkKoz94XEAwKjC7hP8ejkMiRAgMAiBDLwuH7o761reEyAAAECBAgMKZAdTm5vbx+yyONXr04fVqTu+v6bSWDps5ydPW59m6Br6wHVbbu9bHtuyPaQ9jIFfvbu3bs/LrPqak2AAAECBPoTyIw4q1H785QSgX0F3r9/v+9bnE+AAIFBBGz1PwjrZIlubpV3dfXtV9vpjVm4DKTOcXu+MQ3lRYAAAQIE5i6wqz+ahQCZKNZSn+KlPthmf23u7at+4wpMshJ13CrKjQABAgQIDC9gNerwxnIg8JxAvgA6CBAgUIOAbcZqaIX+ypDPl/Wt4tO+m/cj6y+35aSUgd3cEsNBgAABAgQI9C/QpT9adta4uLh42FktAdX13TfKCs88t94Xmupeq7v6YCnvejn7V5XikgUEUZfc+upOgAABAr0K2NK3V06JEegkkG2JDMR2onISAQIjCLx9+7hl2ghZyWIEgfXBxGRXBhRHyHq2WZSB3WxHuFp9mG09VYwAAQIECAwlsGuV6b75loDqc+8ru2DkMzxB1xxjr2DdVcbnyu55An0IfNNHItIgQIAAAQIETh5mvSWg4yBAYByBTFwwADuOtVwIENgtkJn5VinudmrpjNevz58UdzOo+uRFv3QSKBMN8reSQWAHAQIECBAg0E0gn5vX19cP9zrt9o5+zkp/KHmXW1ht9o/6yeXlVHYFUaco08sl9uqcBARR59Sa6kKAAAECkwvc3dlWdPJGUIBFCGQ2rBWoi2hqlSTQhEACqGVmfhMFVshOAgn0pW0d/QhsbsWXAdE85yBAgAABAgReFuh79enLuT19Nf2hEsTMwoEaJzKnjLlnqoPAEAKCqEOoSpMAAQIEFiuQLU2sRl1s86v4SAKr1Wr07YNGqppsCBBoUCADNgKoDTZcxyKvb+HrXlsd0fY4raxM3eMtTiVAgAABAosSmDKAugld88KBBFIdBIYQEEQdQlWaBAgQILBogZo7lYtuGJWfhUACqAaxZ9GUKkFgFgIZ1DJgM4umfLYSZeXFsyd4obPAekC6vCl/P1ajFg0/CRAgQIDAU4HsiFFLXyQLBsa+F+pTjd2/6VPsNnLG/gKCqPubeQcBAgQIEHhRoPZO5YuF9yKBigXypU0AteIGUjQCCxOoaVXAwuhHr64BuX7In7tfmdWo/fhKhQABAgQIDClQ4za+Q9ZX2gSKgCBqkfCTAAECBAj0KGBL3x4xJUXgR4GPH29ZECBAoAqBmlYFVAGyoELo4x3e2M+t2rYa9XBT7yRAgAABAmMIZEeoqQ6T2aaSl28REEQtEn4SIECAAIEeBT5/vu8xNUkRIGAVqmuAAAECBKYSWN+G1m0bDmuFrNx+6Vg3fuk8rxEgQIAAgSUJ1PD5eHt7O+mOUPsY7HPukq4jdT1OQBD1OD/vJkCAAAECWwXu7wVRt8J4ksCBAlahHgjnbQQIECBwtMDFxcVJVh/nmPq2Dc9tiXt0JQdKIG7X19c77+dm0HOgBpAsAQIECDQrUMutI1oa39KfaPZyr7rggqhVN4/CESBAgECrAi11Mls1Vu5lCbgX6rLaW20J1C5ggKb2Fuq/fOuB1E+fPvWfQccUn9sSt+PbRz0t2+/Frctxfn7e5TTnECBAgACBRQhcXX27cwLSGBCt7QilPzHGVbG8PARRl9fmakyAAAECBAgQaE6grABqruAKTIDALAUM0MyyWXdWqgRSpwyi7ixkRSdcXV3tVRr3PNuLy8kECBAgUIlAvquuf4blcVaRJhC6azv7bVXI+2qZNNXibQyMHWy7qjx3jMDpMW/2XgIECBAgQGC7gFVz2108S+BQgam3Tzy03N5HgMD8BNYHyeZXOzXaJZBA6uO9we4nG+DMNVh7X/OQAcys8K69XruuD68TIECAwLIE8plcdl3IJKtXr06f9A8SDM1zq9WHTjCPAdl6QjYtfg/PrQ9aLHenC8RJkwhYiToJu0wJECBAYAkCq9VqCdVURwIECBAgsCgBq1AX1dxbK1sGS7e+OMKTLWwnPbXRCM0gCwIECBAg8GTL3fQRt60gzXNZXdrlqOnWUK3uvBHvMukxPx9X9p514XcOga0CgqhbWTxJgAABAgSOF8hMeoHU4x2lQIAAAQIEahLIagIHgW2DpGOpZIVFzcchq1BTn9rrVbO5shEgQIDA+AL5vOs6ua5rILWmHRlqCuju27pv3148BE9za4FH+/wUSN3X0fmPAoKorgQCBAgQIDCggEDqgLiSXpSALzyLam6VJVCtQP4tmjJ4Vi2MghFYE7AKdQ3DQwIECBCYlUD6grnP6fX19ZdtfLtWsHsg9b5rkoOe13IQNdabffYEVA+d6DUotMSrFxBErb6JFJAAAQIEWhcQSG29BZWfAAECBAg8CrSwjaq2mr/A5891DK5uk87A8qHH5mDnoel4HwECBAgQGEogKxy7rj7dVobH4N7jFrPZZjZBvc3AXi2f88fUc1vda3guE72O6avUUAdlGF/APkTjm8uRAAECBBYokEDq7e3t3jMVF0ilygQIECBAoFoBQdRqm2ZRBavxHmVZmZOB5WMDoUmnpq0MF3VhqSwBAgQIvCiQz6hjj3yGpz9ZPi/Pzi4ekkxw7/vv708SQM05NQQwU4aUZW6fy6lXbs+xWn04tjm9fyECVqIupKFVkwABAgSmF/juu+8eAqnTl0QJCBAgQIAAgUMEahjQOqTc3jMfgQyw1jaYmRU05Z5jx0onEOsgQIAAAQK1CWT73r4+657b9j6B1fQ1a/osTJ0dBFoVKKu9jy2/IOqxgt5PgAABAgT2EKghkFrj6oU9CJ26UAGrvxba8KpNoCKBza3WKiqaoixI4O7uUzW1zYqcDE49NxhcTUEVhAABAgQIHCGQz7q+ji4T8soq1b7yPDadPut/SFmGGAuoZcvkQzy8p7vAx4+POwIe+z3Odr7dzZ1JgAABAgR6EUgg9f7+vpctz/YtULYUTv4JpJpRuK+e8wkQIEBgyQKvX58vufpN1z2rN3NkwCx9sBxpz9oGKR8KtuN/6cfVcGQwaojgaU1B4hqclYEAAQIEphXI/TNb7C/0qZb6J5A61fa32XrXQeAQgezeku8Bj1toH37LCFfgIfreQ4AAAQIEjhTIB3k6oEMNQG0rXgmg5rXk7x6t25Q8R4AAAQIEvhbIirulD6B9rVLvMxksSTAuAdNtW9+2OiCavlstR58B1LJLSlbn1BIkrsVZOQgQIEBgOoGM13RZOTpdCcfLecpA6hB9cIHZ8a6dqXPqI/gviDp1K8qfAAECBBYtkIGi/JfBvCE75xlMLCsvCnjyzXNWpBYRPwkQIECAwHaBIbYR256TZ/sQeBxsy8rhTw/9qzJQNsQgXB/l7ZLG+mS4LucPdU4mFPT595A+6s3NzUNxN/uqQ9VBugQIECBAoItAxkz6nDTUJc+az5kikJp+xxBH6pK0t022GyI/abYtIIjadvspPQECBAjMRCCDR5mFn0DqEMHUx87u1UMeyad0FPNztVoJpM7kOlINAgQIEBhGoM+g0TAllOqmwOPg2MXm003+PlUAtQRMc/0nEB3Tvo/17XszWO0gQIAAAQI1CZRxmprKNGVZ0he4vr7+YUzp5V0/pixj17zTvyljY13f47x2BUq/9pD+Zv894HYdlZwAAQIECEwqkM5b/iud9CGCqSVIWzq86TwkT1v7Ttr0Mu8gYHVKBySnECAwmEBZyThYBhIm8IzAmAHUbFs4ZMD0mSp6mgABAgQIVCswxLhMtZXdo2Cbk9XWx5j2SGbnqfx3Ejmho0DGPrMTX8aW8nifQxB1Hy3nEiBAgACBEQTyYZ7/sjo1g1mvX5/3PvO/dHhtTTNCg8qiF4F9O7m9ZCoRAgQIECAwocCYAdRUc4g+5y4+q7x3CXmdAAECBMYSyPhLxkgSEPz8+X6sbGeRTxljSmUOWen3HIIg6nMynj9EIH/bCaRmR759xpgEUQ/R9h4CBAgQIDCSQDqf+S/bTpRVpCNlLRsC1QhkENlBgAABAssTKLtzLK/mJw+7hPQ5CLnLMH3NDICOfVjlPba4/AgQIEAgAtu29iy7Hz0GBMf/TJxDy5SJ+n30YRLUHvIwkWtI3TrT/vjxcWxpnwBqauJfgzrbU6kIECBAgMATgXzA578ymGg23hMevxAgQIAAgUEFpgguDVqhyhNPfyf/Zab4Eo+xV6DGWN9yiVeaOhMgQGCZAgmglj7G+tae+wZWlqm3u9YJpCZAmb7cMaYlILs7x8POSN8n7d9HwPewEnjX2AKHXo+CqGO3lPwIECBAgMARAvnAz3/pjL59ezHJioEjiu+tBA4SKDOCD3qzNxEgQIBAUwLZXitHGdxsqvA9FHaKAGqKbUVoD40nCQIECBBoQiBjKeXI49XqQ/n1h/GWe+MsXzQOf1B2UsvY1SGByqFXoZaalUCtQGoR8XObwDfbnvQcAQIECBAgULdAAqnp6KdD6iBAgAABAgQIzEFgyQHU9OlS/ykG8TJQOcVq68c6/zRwPYdrWB0IECBAoG6By8vLJ595+fxbD9i5F2q/7ZdgagKVV1ffPnHelUvu0z7WUQKpY+Unn/YErERtr82UmAABAgQIfBG4ubl5mNWn0/eFxIMZChy65coMKVSJAIGJBKxKGB6+3P96SStQc13d3X2aJHC63qJT3RPMThPrreAxAQIECIwhsG37+oyn5DMp3zvtzDBMKzzeZ/ZxBfCuCWNTTO5KnrvKNYyMVFsQEERtoZWUkQABAgQIvCCQjl46/EsadHyBw0sECBAgQIBAYwIJJuZYQl8mdc0ql6zCrGWS0FQDxoKojf2hKi4BAgQaF1hfcbpZlbL97BQ7M2yWZc6/J2CdyVtZEPDcMeYq1FKG5CmIWjT83BQQRN0U8TsBAgQIEGhQoJZBuAbpFJkAAQIECBCYWCCrMee+q0Ytq063NbUB420qniNAgACBuQm8tPPCthWqc6t/LfWJdSZwffx4+2RC2dnZ2Ulem6Jf8rhS9uxJeWrxUo7pBQRRp28DJSBAgAABAr0IZHBuis5mL4WXCIFnBNz39xkYTxMgQGAmAvl3fu4B1NTxpRUXUzZlBiwdBAgQIEBgCQICpfW0csausgNJ+kgJqNYwlpUguwUK9VwjNZXkm5oKoywECBAgQIDA4QKr1YeHDujhKXgngboEMjGg1kHnuqSUhgCBoQWyUtIxjMDcBzRzr1efZcNcO1IlQIAAAQL7CJT7r+/zHucOKzDVytNttbKd7zYVz0VAENV1QIAAAQIEZiSQQbrVavXD7LnHe4vNqGqqskCBTAxwECBAgACBVgUyWFv7gNxLWxsO7W61x9DC0idAgACBdYHaP5PXy+rxuALG0Mb1bi03QdTWWkx5CRAgQIDADoEMSFmVugPJy9ULmCVcfRMpIIFFCdzfm5y0qAbvobItBFB7qKYkCBAgQIBAMwKXl5fNlFVBxxX4/Flff1zxtnITRG2rvZSWAAECBAh0FiirUju/wYkEKhIQsKioMRSFAIGH+yOZ3OFC6CrQUgB1qs9bKz66Xk3OI0CAAIE+BK6uvj2Z+y0E+nBaahq5NnKNOAhsExBE3abiOQIECBAgMBOBrErtY5Dq/fv3MxFRjVYEbPHXSkspJ4HlCGQLuD4+U58TS9oJvtmW/zmhNp5vKYAa0b76ivu2jvsM7yvmfAIECBA4VCArUM/OTg99u/ctRCDXyJs3bxZSW9XcR0AQdR8t5xIgQIAAgQUKfPr06aHWGdR1ECBAgACBJQt8/Hjbe/UTPM1nbLbifwzUfn9iS7HemUdJsLUAakEZO6CZa9596Yq+nwQIECAwpMDZ2ZkVqEMCzyztqXbomBnj7KojiDq7JlUhAgQIECDwVODYgdhsa5KZm1mpkMFBBwECBAgQWKrAUJ+F66vv85lru7n2rrBWA6iRHnvAcOygbXtXkxITIECAQF8Cb99e9JWUdBYgsN4nX0B1VbGjgHXsHaGcRoAAAQIEWhXoY2Asg7mvXp2eDLECp1VX5SZAgACBZQpkBd3p6Wlvgc6ydVifaS6zZaardcsB1KhlwDCrQ8fa6tAq1OmuVTkTIEBgSQLZmnWsz7Yluc65rrkvanaHcRBYF7ASdV3DYwIECBAgMEOBPoKoYcmXj6urqxkKqRIBAgQIENhP4ObmZr837Dj74uKit6Dsjqy83LNA6wHUwjHW6tBym4iSr58ECBAgQGAIgWzjm/6Vg8A+Ahn3ur6+ftiNbZ/3OXfeAoKo825ftSNAgAABAgQINCeQ1TAOAgQI1C5gi/vaW2j48s0lgBqpsVaH9jW5b/jWlQMBAgQItCqQAKoJ4K22Xh3lzm5sJZj6uKL5rI6CKcUkAoKok7DLlAABAgQIjCfgng7jWcupHwHbRvfjKBUCBIYVGCvoNGwtpH6owJwCqIcaHPI+fzeHqHkPAQIECHQVEEDtKuW8LgIJpmZFc4LyubYcyxRwT9RltrtaEyBAgAABAgSqFMgqVIH/KptGoQgQ2CKQQJqt4rbAzPwpAdTDGthOE4e5eRcBAgQI7BbIasHXr8/dA3U3lTMOFEhA1VjFgXiNv00QtfEGVHwCBAgQIECAwJwErEKdU2uqC4H5C9iadP5tvF7DBAFXqw/rT3m8h8BY913do0hOJUCAAIGGBbIyMIGt/OcgMLRArrNXr05P0p+xs8bQ2nWlL4haV3soDQECBAgQIEBgsQJWoS626VWcQLMCmY3+6dMng3fNtuB+Bf/82T279xN7erZJB089/EaAAAEC3QSurr61wrQblbMGFjg7O/3hWrx4WPWcCeBWpg4MXkny7olaSUMoBgECBAgQIEBg6QJWoS79ClB/Am0KJIjqWIbAnIOAl5eXgzaiiVKD8kqcAAECsxXI51MCVw4CNQnkmsx9UrONtGP+Av4Fmn8bqyEBAgQIECBAoHoBg6vVN5ECEiDwjIDVqM/AzPDpuQZRy3aIQzaZVbxD6kqbAAEC8xIon0vZOlUAdV5tO7faXFxcPFTJ9r7Dt2wJWE9hLYg6fPvKgQABAgQIECBAYIeAVag7gLxMgEDVArb0rbp5FG6HwNu3jwOAO0476mUrto/i82YCBAjMXiABktPT04d7Tgqczr65Z1XBBFKnCOzNCrFDZTKZMat/8+/Ezc1Nh3f0d4ogan+WUiJAgAABAgQIEDhAwCrUA9C8hQCBqgSsRq2qOQYrTAZuVqvVrO5/lUHrMQar3TNssMtSwgQIEGhGoKwkWy9wAiLn5+frT3lMoDmBrJ7W1xm22Ta/b40ZSBVEHbZtpU6AAAECBAgQILBDwCrUHUBeJkCgCQGrUZtopqMLmVWbq9WHo9OpJYGyDd2Q5bEKdUhdaRMgQKANgaurb0eZtNOGhlLOTaBMBBBIHbZly/eteGe777H65N8MWy2pEyBAgAABAgQIEHheYG4rep6vqVcIEJi7QJkdPfd6Lr1+WbW5bSVNiy6Xl5ejFHuu95IdBU8mBAgQaFwgK/QEUBtvRMXfKZCgXnYsyfXuGE5g/ftW+uT5t2WMQxB1DGV5ECBAgAABAgQIfCVwe3try5uvVDxBgEDLAlbctdx6yyp7BvnKqomhay6IOrSw9AkQIFCnQCYdPQaWbIZZZwspVd8CY/Wt+i53S+mtf98qgdShg9eCqC1dIcpKgAABAgQIEJiJQDq+33333UxqoxoECBB4FMjs6Nzn2TFvgdy/rfUj2xKPcbjv+RjK8iBAgEB9AtntYIwt4+uruRItWUAQdfjWz/etTMgvx2Mg9WrQVamCqEXbTwIECBAgMFOBoWdkzZRNtQgQIECAwEEC7vN8EFtTb2p9gCwrgzLgNMbx+bNJBWM4y4MAAQK1CGT8IVtstv5ZWYuncrQnMJfbPtQsnwn579+/P9lclTrU00jO1QAADfBJREFUrSrG6TXXLK5sBAgQIECAAAECowu8eqUbOjq6DAkQGEWgzI62+mIU7skyySBx2rq1I+Ue89pcH9xqzUp5CRAgQKCbQD5bEjTNd7yxJul0K5mzCIwv8Pr1uV23RmK/ubl5CKRmh5X821P+Hcqk1j776VaijtSgsiFAgAABAgQIECBAgACBZQjYrnz+7dzqCpuxy93nANb8ryo1JECAQHsCWfmV+57m80UAtb32U+L+BfJ3kIkFjnEE0tdcrT58WZUa//yb1OeKYEHUcdpSLgQIECBAYDKBOdy3azI8GQ8mYHu/wWglTIBAJQLr9+qppEiK0aNAqzsqjFnu1WrVo7ikCBAgQKAGgfXgUFmBWkO5Wi5D7h9u54aWW/Drso89ae3rEizvmaxKTd8zf085svNKX9v7CqIu73pSYwIECBAgQIDAZAL5cpiObTq4DgIECMxZ4P7evSDn3L6trjIYcxKTVahz/gtQNwIEliiQoGlWeJUjW2g6jhN4/H780yq641Lz7loEBFGnaYmyKrVMZk079LEi1c2opmlPuRIgQIAAgdEErEQdjVpGLwhkNmC2WHEQIEBgKQL5Ep9/+2xtN98WTx+rtUDhWMH9sgpgvq2vZgQIEFiewHpgKAFVfZzjroEEesotINZtj0vVu2sRuL6+fvgukAlsJpGP2yr5u0qfN39XffR9BVHHbT+5ESBAgACB0QXG3LZt9MrJsAmBzK71paGJplJIAgR6Fri7+/TDAKNVGj2zVpNcixPV+hhI6tIAY6547VIe5xAgQIDA8QIl0JctMsvj41NdbgrZbjRHCfYsV2K+NX/cueT04e8l4yL5r7UJeK22zuOE1u97Kb7tfHthlAgBAgQIECBAgMBzAvmi4CBAgMASBcrqgiXWfQl1NlHt+VYeK1j7fAm8QoAAAQJDCQig9iebQKptkfvzrDml/N1kO+y+7tNZc13nVjZB1Lm1qPoQIECAAAECBCoQSOA02xPl/qdmWlbQIIpAgMBkAiaSTEY/eMYtbmM41meyIOrgl58MCBAgMKpAtu91DCPQYn9iGIllpGoSQnvtbDvf9tpMiQkQIECAwF4COuR7cTn5GYHc2yxb860Piq4/HmtQ9pnieZoAAQLVCqz/W1ltIRXsIIFW7/uZwP6QA3hJX7/goEvKmwgQIECAAAECBCoTEEStrEEUhwABAgQI9CXw5s2bk3KPjb7SlM4yBbKi1JaUy2x7tSZA4HiBFu+beXytl5FCq/f9HDqIauLAMq5/tSRAgAABAgQILEHAdr5LaGV1JECAAAECBAgcKCCAeiCctxEgQOBHAffNnO+l0GqwMKtEW11FO9+rSc0IECBQt4BJYXW3j9IRIDCcgCDqcLZSJkCAAAECBAg0LZD7mVqB2nQTKjwBAgQIDCjQahA1JHd3nwaTadllMBQJEyBAgAABAgQINCkgiNpksyk0AQIECBDYLWAAa7eRM54XSADV/cye9/EKAQIECBDwObn9GuCy3cWzBAgQIECAAIEIXF5egmhIwD1RG2osRSVAgAABAgQIDCGQe6NtBt0NgA4hLU0CBJYocHbma/cS232pdU6fwkGAAAEC8xOwne/82lSNphM4Pz8/yS0/VqsP0xVCzp0FfJvrTOVEAgQIECBAgMC8BHI/tI8fb604nVezqg0BAgQIEJhMQBB1MnoZEyBAYFAB93gflFfiCxTIRMurq28fbrHgNkp1XwCCqHW3j9IRIECAAAECBAYRyCDnzc3NIGlLlAABAgR+EsiEFatRf/LwaL4CudbtZDHf9lUzAgQIECBAoF+BfEc4O7s4yUpv4zP92vaZmiBqn5rSIkCAAAECBAhULpABTlvGVN5IikeAwKwE7u4+PQyOzKpSKvNDsPCewoZArnUHAQIECBAgQIDAfgK2993Pa+yzvxk7Q/kRIECAAAECBAhMIyCAOo27XAkQWLaA7bnm1/4+T7e3qWt9u4tnCRAgMAcBu2rMoRXVoWaBsr1vzWVcatkEUZfa8upNgAABArMXsJ3a7Jt4rwpm+14rUPciczIBAgR6E3CfyN4oJ09oLp+nCXj2uZr29vZ28rZRAAIECBAgQIBAywKP2/uetVyFWZZdEHWWzapSBAgQIECAAIGfBDKw6f4aP3l4RIAAgbEFBFHHFu8/vwQc045z+jzta3JVbKxC7f+akyIBAgRqEjBZpqbWUJY5C1xdXZ28efNmzlVsrm6CqM01mQITIECAAAECBLoJPG43uDKw2Y3LWQQIEBhMILtDCKQOxjtowvkszcBxAo5zCqAWtNVqVR4e/PPjR6tQD8bzRgIECDQiYLJMIw2lmLMQuLi4ODk7e7oidfP3WVS0kUqcNlJOxSRAgAABAgQIENhD4DGA+mGPdziVAAECBIYUuL+/HzJ5afcskKB3/pv77RFSvwSJM1i375G+RgKoczfa18X5BAgQmKvAoZ8Xc/VQLwJDCpyfnz/pY52enj75fci8pf1UQBD1qYffCBAgQIDAbATMUptNU+5dkbltN7g3gDcQIECAAIEDBBIUvLv7tLgdHLK6KP9dXl6eZMBu17GUAPMuB68TIEBgaQL5rDhk0s3SnNSXQB8CpU+WnVAyvpcgqmMaAfLTuMuVAAECBAgQIDCIgADqIKwSJUCAwNECVqIeTThoAllds/StCjNIl/9yH64M1L169ThkdHaWlQ/LDDAPetFJnAABAg0KWI3aYKMpcrMCCaRmjOft24uHiX7NVqTxgguiNt6Aik+AAAECBJ4TMEvtOZl5P58OtoMAAQIECBDoLpD7gtqS9ievpQeTf5LwiAABAgQ2BaxG3RTxO4FhBa6urh4y+PjRrUGGlX4+9W+ef8krBAgQIECAAAECrQkYBG6txZSXAAECBKYUyIoan51TtoC8CRAgQKA1gXx2OggQILAUAUHUpbS0ehIgQIAAAQKzF8hWew4CBAgQIECgm0BWoFp12c3KWQQIECBAoAj47CwSfhIYT8Ckv/GsN3MSRN0U8TsBAgQIEJiJwOvX5zOpiWp0Ffj8WRC1q5XzCBAgMLaAgY+xxV/OLxOPtMnLRl4lQIAAAQLbBM7OzrY97TkCBAjMUkAQdZbNqlIECBAgQIDAEgVevXK7+yW2uzoTIECAwP4CZ2enJ1dX3+7/Ru8gQIAAAQILFzg/N2F74ZeA6hNYlIAg6qKaW2UJECBAYEkCGRx0ECBAgAABAvUIuIdYPW2RkqSvZDVNXW2iNAQIECBQt8Dl5eWJybt1t5HSESDQr4Agar+eUiNAgAABAgQITCZwd/dpsrxlTIAAAQK7BXIPMfev3u005hlW04ypLS8CBAgQaFngzZs3J/ncNGG75VZUdgIE9hUQRN1XzPkECBAgQKABAasqGmikAYqYwXkHAQIECNQtYMJLXe0jiFpXeygNAQIECNQpkC3wLy4u6iycUhEgQGBAAUHUAXElTYAAAQIEphI4PbWV71T2U+YreD6lvrwJECDQTeD+/r7bic4aRcDK4FGYZUKAAAECjQt8/HjbeA0UnwABAocJCKIe5uZdBAgQIECgaoHXr8+rLp/CDSMgeD6Mq1QJECDQp8D333/fZ3LSOlLg82dB7SMJvZ0AAQIEFiCQ/ot7uy+goVWRAIGvBARRvyLxBAECBAgQaF/APUrab0M1IECAAIH5Clj9WE/bfvrkfuL1tIaSECBAgEDNAu7tXnPrKNucBXx3mLZ1BVGn9Zc7AQIECBDoXcCWrr2TSpAAAQIECPQqYPVjr5wSI0CAAAECBEYS0IcZCVo2BAhUIyCIWk1TKAgBAgQIEOhH4PzcVr79SEqFAAECBAgMI+C+qMO47ptqZvXbXnlfNecTIECAwJIF7OCw5NZX96kEstucBRNT6Z+cCKJOZy9nAgQIECAwiMCrV6eDpCvR+gUMytffRkpIgACBCNgOr47rwGqaOtpBKQgQIECgHYFMPrK1aDvtpaTzEXj79mI+lWmsJoKojTWY4hIgQIAAgV0C7oe6S2i+r1tNM9+2VTMCBOYn8PHj7fwq1ViNTD5qrMEUlwABAgSqEDAJqYpmUIiFCViNOl2DC6JOZy9nAgQIECDQu4DtPXonbSpB7d9UcyksAQILF8jEl9VqtXCFaasviDqtv9wJECBAoE0BW/q22W59lvrxlgj3fSYprQ4Cbt/VAWmAUwRRB0CVJAECBAgQmEpAh2oq+TryPT21lXMdLaEUBAgQ6CaQQOrtrRWp3bT6Pcv9UPv1lBoBAgQILEfAlr7Laevnanp39+mHyYAfHiYECqo/p9T/8xnzM3m+f9ddKQqi7hLyOgECBAgQaEjA/VAbaqyei5rB4Nxjz0GAAAECbQnk326DT+O3ma0IxzeXIwECBAjMRyBBNAeBBNRvbm5MChzxUjB5fkTsH7MSRB3fXI4ECBAgQGAwAfdDHYy2+oQzC9RBgAABAm0KZPApk2Ec4wjEOuYOAgQIECBA4DABE3gPc5vru1wPc21Z9YqAIKrrgAABAgQIzETgzZs3M6mJauwr4J56+4o5nwABAvUJZDKMQOrw7RJjE4+Gd5YDAQIECMxfwE4a82/jrjW0xWxXKee1KCCI2mKrKTMBAgQIENgiYEuPLSgLeCr30ssWOg4CBAgQaF8gwT0DksO1owDqcLZSJkCAAIHlCeizLK/N1ZjAEgUEUZfY6upMgAABArMUqPl+qL5cDXPJJYBq25xhbKVKgACBqQR8Zg4jL4A6jKtUCRAgQGC5ApnMq9+yzPbPJH6rT5fZ9kus9f8HQgVzg6u3nfgAAAAASUVORK5CYII="></image>
+                </g>
+                <rect id="overlay" fill-opacity="0.810000002" fill="#3BA8CF" style="mix-blend-mode: overlay;" x="0" y="0" width="1163" height="565"></rect>
+            </g>
+            <g id="angular" filter="url(#filter-3)" transform="translate(602.000000, 155.000000)">
+                <g id="Group" transform="translate(0.800000, 0.880000)">
+                    <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                    <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                    <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+            </g>
+            <g id="pins" transform="translate(99.000000, 97.000000)">
+                <g id="angular" filter="url(#filter-4)" transform="translate(1021.000000, 0.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-5)" transform="translate(96.000000, 238.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-6)" transform="translate(460.000000, 128.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" transform="translate(64.000000, 84.000000)">
+                    <g id="Group" filter="url(#filter-7)" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" transform="translate(16.000000, 111.000000)">
+                    <g id="Group" filter="url(#filter-8)" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" transform="translate(98.000000, 121.000000)">
+                    <g id="Group" filter="url(#filter-9)" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" transform="translate(188.000000, 161.000000)">
+                    <g id="Group" filter="url(#filter-10)" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" transform="translate(151.000000, 130.000000)">
+                    <g id="Group" filter="url(#filter-11)" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-12)" transform="translate(56.000000, 162.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-13)" transform="translate(86.000000, 180.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-14)" transform="translate(138.000000, 203.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-15)" transform="translate(163.000000, 209.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-16)" transform="translate(567.000000, 284.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-17)" transform="translate(591.000000, 88.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-18)" transform="translate(567.000000, 15.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" transform="translate(241.000000, 343.000000)">
+                    <g id="Group" filter="url(#filter-19)" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-20)" transform="translate(269.000000, 384.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-21)" transform="translate(174.000000, 310.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" transform="translate(0.000000, 34.000000)">
+                    <g id="Group" filter="url(#filter-22)" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-23)" transform="translate(754.000000, 184.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-24)" transform="translate(738.000000, 275.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-25)" transform="translate(859.000000, 218.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-26)" transform="translate(833.000000, 172.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-27)" transform="translate(966.000000, 433.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-28)" transform="translate(533.000000, 118.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-29)" transform="translate(802.000000, 181.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-30)" transform="translate(833.000000, 224.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-31)" transform="translate(571.000000, 123.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-32)" transform="translate(909.000000, 128.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-33)" transform="translate(878.000000, 122.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-34)" transform="translate(828.000000, 15.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+                <g id="angular" filter="url(#filter-35)" transform="translate(496.000000, 145.000000)">
+                    <g id="Group" transform="translate(0.800000, 0.880000)">
+                        <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                        <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+            <g id="angular" filter="url(#filter-36)" transform="translate(549.000000, 284.000000)">
+                <g id="Group" transform="translate(0.800000, 0.880000)">
+                    <polygon id="Shape" fill="#DD0031" points="15.12 0 15.12 0 15.12 0 0.144765957 5.3784 2.42885106 25.3206 15.12 32.4 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                    <polygon id="Shape" fill="#C3002F" points="15.12 0 15.12 3.5964 15.12 3.5802 15.12 19.9908 15.12 19.9908 15.12 32.4 15.12 32.4 27.8111489 25.3206 30.095234 5.3784"></polygon>
+                    <path d="M15.12,3.5802 L5.75846809,24.7212 L5.75846809,24.7212 L9.24893617,24.7212 L9.24893617,24.7212 L11.1308936,19.9908 L19.0769362,19.9908 L20.9588936,24.7212 L20.9588936,24.7212 L24.4493617,24.7212 L24.4493617,24.7212 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 L15.12,3.5802 Z M17.8544681,17.0748 L12.3855319,17.0748 L15.12,10.449 L17.8544681,17.0748 L17.8544681,17.0748 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/aio/content/images/marketing/home/ng-atl.png b/aio/content/images/marketing/home/ng-atl.png
new file mode 100644
index 000000000000..f0ab40f0e2d3
Binary files /dev/null and b/aio/content/images/marketing/home/ng-atl.png differ
diff --git a/aio/content/images/marketing/home/ng-conf.png b/aio/content/images/marketing/home/ng-conf.png
new file mode 100644
index 000000000000..16d8a273e3a5
Binary files /dev/null and b/aio/content/images/marketing/home/ng-conf.png differ
diff --git a/aio/content/images/marketing/home/responsive-framework.svg b/aio/content/images/marketing/home/responsive-framework.svg
new file mode 100644
index 000000000000..0ff2b594fa42
--- /dev/null
+++ b/aio/content/images/marketing/home/responsive-framework.svg
@@ -0,0 +1,169 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="1295px" height="759px" viewBox="0 0 1295 759" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>Responsive Framework</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="832.761381" height="555.226994" rx="10"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <path d="M423.070823,375.356054 L672.348703,375.356054 L672.348703,19.349783 C672.348703,8.65536397 663.539446,0 652.652382,0 L93.95269,0 C83.0763366,0 74.2563691,8.65536397 74.2563691,19.349783 L74.2563691,375.356054 L423.070823,375.356054 L423.070823,375.356054 Z M111.988908,41.0412933 L634.610809,41.0412933 L634.610809,338.21233 L111.988908,338.21233 L111.988908,41.0412933 Z M376.253236,375.356054 L8.97682789,375.356054 C2.50778066,375.356054 -1.8299083,381.005936 0.761994731,386.045163 L1.28144637,387.054071 C9.24994163,402.522215 27.2165422,412.515709 47.0628079,412.515709 L705.443664,412.515709 C725.289929,412.515709 743.25653,402.522215 751.21967,387.054071 L751.739122,386.045163 C754.33638,381.005936 749.998691,375.356054 743.529644,375.356054 L376.253236,375.356054 Z" id="path-3"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <path d="M17.4881428,400 C7.83037292,400 0,392.07203 0,382.293886 L0,17.7061143 C0,7.92561643 7.83037292,0 17.4881428,0 L207.509532,0 C217.169627,0 225,7.92561643 225,17.7061143 L225,382.293886 C225,392.07203 217.169627,400 207.509532,400 L17.4881428,400 Z M17.4068526,52.9896762 L208.782763,52.9896762 L208.782763,336.195004 L17.4068526,336.195004 L17.4068526,52.9896762 Z" id="path-5"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="One-framework.--All-platforms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Responsive-Framework">
+            <g id="monitor" transform="translate(399.000000, 34.000000)">
+                <g id="frame" transform="translate(0.238619, 0.000000)">
+                    <g id="Combined-Shape">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#ECEFF1" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    </g>
+                </g>
+                <g id="screen" transform="translate(37.000000, 40.000000)">
+                    <rect fill="#FFFFFF" x="0.750392465" y="0.0163599182" width="760.238619" height="480.196319"></rect>
+                    <g id="text" transform="translate(60.000000, 331.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
+                        <path d="M0,4.5 L186.513046,4.5" id="Line"></path>
+                        <path d="M0,27.5 L186.513046,27.5" id="Line"></path>
+                        <path d="M0,49.5 L186.513046,49.5" id="Line"></path>
+                        <path d="M0,72.5 L186.513046,72.5" id="Line"></path>
+                        <path d="M0,94.5 L186.513046,94.5" id="Line"></path>
+                    </g>
+                    <g id="text" transform="translate(289.000000, 332.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
+                        <path d="M0,4.5 L186.513046,4.5" id="Line"></path>
+                        <path d="M0,27.5 L186.513046,27.5" id="Line"></path>
+                        <path d="M0,49.5 L186.513046,49.5" id="Line"></path>
+                        <path d="M0,72.5 L186.513046,72.5" id="Line"></path>
+                        <path d="M0,94.5 L186.513046,94.5" id="Line"></path>
+                    </g>
+                    <g id="text" transform="translate(514.000000, 332.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
+                        <path d="M0,4.5 L186.513046,4.5" id="Line"></path>
+                        <path d="M0,27.5 L186.513046,27.5" id="Line"></path>
+                        <path d="M0,49.5 L186.513046,49.5" id="Line"></path>
+                        <path d="M0,72.5 L186.513046,72.5" id="Line"></path>
+                        <path d="M0,94.5 L186.513046,94.5" id="Line"></path>
+                    </g>
+                    <g id="boxes" transform="translate(53.000000, 25.000000)" fill="#E1E2E3" fill-opacity="0.7">
+                        <rect id="Rectangle-70" x="0" y="149" width="204" height="135" rx="4"></rect>
+                        <rect id="Rectangle-70" x="226" y="149" width="204" height="135" rx="4"></rect>
+                        <rect id="Rectangle-70" x="451" y="149" width="204" height="135" rx="4"></rect>
+                        <rect id="Rectangle-69" x="0" y="0" width="655" height="123" rx="4"></rect>
+                    </g>
+                </g>
+                <g id="angular-logo" transform="translate(363.000000, 230.000000)">
+                    <g id="Group">
+                        <polygon id="Shape" fill="#DD0031" points="51.5 0 51.5 0 51.5 0 0.493085106 18.26 8.27287234 85.965 51.5 110 51.5 110 51.5 110 94.7271277 85.965 102.506915 18.26"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="51.5 0 51.5 12.21 51.5 12.155 51.5 67.87 51.5 67.87 51.5 110 51.5 110 94.7271277 85.965 102.506915 18.26"></polygon>
+                        <path d="M51.5,12.155 L19.6138298,83.93 L19.6138298,83.93 L31.5026596,83.93 L31.5026596,83.93 L37.912766,67.87 L64.9776596,67.87 L71.387766,83.93 L71.387766,83.93 L83.2765957,83.93 L83.2765957,83.93 L51.5,12.155 L51.5,12.155 L51.5,12.155 L51.5,12.155 L51.5,12.155 L51.5,12.155 Z M60.8138298,57.97 L42.1861702,57.97 L51.5,35.475 L60.8138298,57.97 L60.8138298,57.97 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+            <g id="laptop" transform="translate(18.000000, 312.000000)">
+                <g id="Imported-Layers">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                    <use fill="#ECEFF1" fill-rule="evenodd" xlink:href="#path-3"></use>
+                </g>
+                <polygon id="Line" fill="#DDE2E6" points="75.0725076 375.46146 671.102719 375.46146 672.35355 375.46146 672.35355 372.95843 671.102719 372.95843 75.0725076 372.95843 73.821677 372.95843 73.821677 375.46146"></polygon>
+                <path d="M430.984819,374.209945 C430.984819,378.60861 428.025348,382.085501 424.473135,382.085501 L326.23079,382.085501 C322.680532,382.085501 319.740257,378.616468 319.740257,374.209945 L318.489426,375.46146 L432.23565,375.46146 L430.984819,374.209945 L430.984819,374.209945 Z M433.48648,374.209945 L433.48648,372.95843 L432.23565,372.95843 L318.489426,372.95843 L317.238595,372.95843 L317.238595,374.209945 C317.238595,379.915807 321.199093,384.588532 326.23079,384.588532 L424.473135,384.588532 C429.504051,384.588532 433.48648,379.909832 433.48648,374.209945 L433.48648,374.209945 Z" id="Path-Copy-4" fill="#DDE2E6"></path>
+                <path d="M109.196375,36.5082873 L636.978852,36.5082873 L636.978852,41.2195446 L636.978852,41.5143479 L109.196375,41.5143479 L109.196375,36.5082873 Z" id="top-shadow" fill="#DDE2E6"></path>
+                <g id="screen" transform="translate(111.000000, 39.000000)">
+                    <rect fill="#FFFFFF" x="0.516695994" y="0.0102036912" width="523.475737" height="299.498744"></rect>
+                    <g id="text" transform="translate(41.000000, 216.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="6.174" stroke-linecap="square">
+                        <path d="M0.314060447,2.85446985 L128.740915,2.85446985" id="Line"></path>
+                        <path d="M0.314060447,17.1995842 L128.740915,17.1995842" id="Line"></path>
+                        <path d="M0.314060447,30.9209979 L128.740915,30.9209979" id="Line"></path>
+                        <path d="M0.314060447,45.2661123 L128.740915,45.2661123" id="Line"></path>
+                        <path d="M0.314060447,58.987526 L128.740915,58.987526" id="Line"></path>
+                    </g>
+                    <g id="text" transform="translate(198.000000, 216.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="6.174" stroke-linecap="square">
+                        <path d="M0.996057819,3.47817048 L129.422912,3.47817048" id="Line"></path>
+                        <path d="M0.996057819,17.8232848 L129.422912,17.8232848" id="Line"></path>
+                        <path d="M0.996057819,31.5446985 L129.422912,31.5446985" id="Line"></path>
+                        <path d="M0.996057819,45.8898129 L129.422912,45.8898129" id="Line"></path>
+                        <path d="M0.996057819,59.6112266 L129.422912,59.6112266" id="Line"></path>
+                    </g>
+                    <g id="text" transform="translate(353.000000, 216.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="6.174" stroke-linecap="square">
+                        <path d="M0.923784494,3.47817048 L129.350639,3.47817048" id="Line"></path>
+                        <path d="M0.923784494,17.8232848 L129.350639,17.8232848" id="Line"></path>
+                        <path d="M0.923784494,31.5446985 L129.350639,31.5446985" id="Line"></path>
+                        <path d="M0.923784494,45.8898129 L129.350639,45.8898129" id="Line"></path>
+                        <path d="M0.923784494,59.6112266 L129.350639,59.6112266" id="Line"></path>
+                    </g>
+                    <g id="boxes" transform="translate(36.000000, 23.000000)" fill="#E1E2E3">
+                        <rect id="Rectangle-70" fill-opacity="0.7" x="0.494086728" y="93.8586279" width="140.467806" height="84.7200012" rx="2.744"></rect>
+                        <rect id="Rectangle-70" fill-opacity="0.7" x="156.110381" y="93.8586279" width="140.467806" height="84.7200012" rx="2.744"></rect>
+                        <rect id="Rectangle-70" x="311.038108" y="93.8586279" width="140.467806" height="84.7200012" rx="2.744"></rect>
+                        <rect id="Rectangle-69" fill-opacity="0.7" x="0.494086728" y="0.0457380457" width="451.011827" height="76.7151767" rx="2.744"></rect>
+                    </g>
+                </g>
+                <g id="angular-logo" transform="translate(338.000000, 161.000000)">
+                    <g id="Group">
+                        <polygon id="Shape" fill="#DD0031" points="34 0 34 0 34 0 0.325531915 12.118 5.46170213 57.0495 34 73 34 73 34 73 62.5382979 57.0495 67.6744681 12.118"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="34 0 34 8.103 34 8.0665 34 45.041 34 45.041 34 73 34 73 62.5382979 57.0495 67.6744681 12.118"></polygon>
+                        <path d="M34,8.0665 L12.9489362,55.699 L12.9489362,55.699 L20.7978723,55.699 L20.7978723,55.699 L25.0297872,45.041 L42.8978723,45.041 L47.1297872,55.699 L47.1297872,55.699 L54.9787234,55.699 L54.9787234,55.699 L34,8.0665 L34,8.0665 L34,8.0665 L34,8.0665 L34,8.0665 L34,8.0665 Z M40.1489362,38.471 L27.8510638,38.471 L34,23.5425 L40.1489362,38.471 L40.1489362,38.471 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+            <g id="iphone" transform="translate(1030.000000, 325.000000)">
+                <g id="iPhone-Outline-Copy-2">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                    <use fill="#ECEFF1" fill-rule="evenodd" xlink:href="#path-5"></use>
+                </g>
+                <path d="M133.449217,26.9964062 L90.3984404,26.9964062 C88.5408193,26.9964062 87.034263,25.4710722 87.034263,23.5902978 C87.034263,21.7095234 88.5408193,20.1865433 90.3984404,20.1865433 L133.449217,20.1865433 C135.306838,20.1865433 136.813394,21.7095234 136.813394,23.5902978 C136.813394,25.4710722 135.306838,26.9964062 133.449217,26.9964062 L133.449217,26.9964062 Z" id="speaker" fill="#FFFFFF"></path>
+                <path d="M126.5625,366.666667 C126.5625,374.454876 120.266084,380.769231 112.5,380.769231 C104.733916,380.769231 98.4375,374.454876 98.4375,366.666667 C98.4375,358.878458 104.733916,352.564103 112.5,352.564103 C120.266084,352.564103 126.5625,358.878458 126.5625,366.666667 L126.5625,366.666667 Z" id="home-button" stroke="#FFFFFF" stroke-width="2.5"></path>
+                <rect id="screen" fill="#FFFFFF" x="15" y="51" width="194.318182" height="287.179487"></rect>
+                <g id="text" transform="translate(31.000000, 249.000000)" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
+                    <path d="M0,1.5 L166.689941,1.5" id="Line" opacity="0.7"></path>
+                    <path d="M0,18.5 L166.689941,18.5" id="Line" stroke-opacity="0.7"></path>
+                    <path d="M0,35.5 L166.689941,35.5" id="Line" stroke-opacity="0.7"></path>
+                    <path d="M0,53.5 L166.689941,53.5" id="Line" stroke-opacity="0.7"></path>
+                </g>
+                <g id="boxes" transform="translate(25.000000, 67.000000)" fill-opacity="0.7">
+                    <rect id="Rectangle-69" fill="#E1E2E3" x="0" y="0.00359380031" width="173" height="54.9964062" rx="4"></rect>
+                    <rect id="Rectangle-70" fill="#E1E2E3" x="1" y="69" width="175" height="100" rx="4"></rect>
+                    <rect id="Rectangle-69" fill="#E1E3E4" x="3" y="249" width="173" height="22.2099991" rx="4"></rect>
+                </g>
+                <g id="angular-logo" transform="translate(75.000000, 145.000000)">
+                    <g id="Group">
+                        <polygon id="Shape" fill="#DD0031" points="40 0 40 0 40 0 0.382978723 14.11 6.42553191 66.4275 40 85 40 85 40 85 73.5744681 66.4275 79.6170213 14.11"></polygon>
+                        <polygon id="Shape" fill="#C3002F" points="40 0 40 9.435 40 9.3925 40 52.445 40 52.445 40 85 40 85 73.5744681 66.4275 79.6170213 14.11"></polygon>
+                        <path d="M40,9.3925 L15.2340426,64.855 L15.2340426,64.855 L24.4680851,64.855 L24.4680851,64.855 L29.4468085,52.445 L50.4680851,52.445 L55.4468085,64.855 L55.4468085,64.855 L64.6808511,64.855 L64.6808511,64.855 L40,9.3925 L40,9.3925 L40,9.3925 L40,9.3925 L40,9.3925 L40,9.3925 Z M47.2340426,44.795 L32.7659574,44.795 L40,27.4125 L47.2340426,44.795 L47.2340426,44.795 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/aio/content/images/marketing/home/speed-performance.svg b/aio/content/images/marketing/home/speed-performance.svg
new file mode 100644
index 000000000000..c6294874b6dd
--- /dev/null
+++ b/aio/content/images/marketing/home/speed-performance.svg
@@ -0,0 +1,279 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="962px" height="594px" viewBox="0 0 962 594" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>Speed &amp; Performance</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="11" y="17" width="940" height="560" rx="4"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.25 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <circle id="path-3" cx="6" cy="6" r="6"></circle>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <circle id="path-5" cx="25" cy="6" r="6"></circle>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <circle id="path-7" cx="45" cy="6" r="6"></circle>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <rect id="path-9" x="0" y="0" width="19.1467222" height="15"></rect>
+        <mask id="mask-10" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
+            <use xlink:href="#path-9"></use>
+        </mask>
+        <rect id="path-11" x="0" y="0" width="19.1467222" height="15"></rect>
+        <mask id="mask-12" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
+            <use xlink:href="#path-11"></use>
+        </mask>
+        <rect id="path-13" x="0" y="0" width="19.1467222" height="15"></rect>
+        <mask id="mask-14" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
+            <use xlink:href="#path-13"></use>
+        </mask>
+        <rect id="path-15" x="0" y="0" width="19.1467222" height="15"></rect>
+        <mask id="mask-16" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
+            <use xlink:href="#path-15"></use>
+        </mask>
+        <rect id="path-17" x="0" y="0" width="19.1467222" height="15"></rect>
+        <mask id="mask-18" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
+            <use xlink:href="#path-17"></use>
+        </mask>
+        <rect id="path-19" x="0" y="0" width="19.1467222" height="15"></rect>
+        <mask id="mask-20" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
+            <use xlink:href="#path-19"></use>
+        </mask>
+        <rect id="path-21" x="0" y="0" width="19.1467222" height="15"></rect>
+        <mask id="mask-22" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
+            <use xlink:href="#path-21"></use>
+        </mask>
+        <path d="M0,0 L304,0 L304,150.740752 L248.558542,150.740752 L0,150.740752 L0,0 Z" id="path-23"></path>
+        <path d="M66.6262384,229.312333 C86.871865,252.340626 116.608936,266.883014 149.756364,266.883014 C210.758055,266.883014 260.209697,217.631474 260.209697,156.876621 C260.209697,96.1217685 210.758055,46.870229 149.756364,46.870229 C88.7546721,46.870229 39.3030303,96.1217685 39.3030303,156.876621 C39.3030303,184.618175 49.6135448,209.961324 66.6262384,229.312333 Z" id="path-25"></path>
+        <mask id="mask-26" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="220.906667" height="220.012785" fill="white">
+            <use xlink:href="#path-25"></use>
+        </mask>
+        <linearGradient x1="0%" y1="50%" x2="0%" y2="0%" id="linearGradient-27">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-28" x="0" y="0" width="276" height="136.764789"></rect>
+        <linearGradient x1="100%" y1="61.2487674%" x2="44.8372349%" y2="61.2487674%" id="linearGradient-30">
+            <stop stop-color="#ED2222" offset="0%"></stop>
+            <stop stop-color="#4BA4E7" stop-opacity="0.297101449" offset="100%"></stop>
+        </linearGradient>
+        <path d="M65.0238664,214.583184 C81.6762853,233.511674 106.135601,245.465032 133.4,245.465032 C183.57507,245.465032 224.25,204.981907 224.25,155.043441 C224.25,105.104974 183.57507,64.6218487 133.4,64.6218487 C83.2249305,64.6218487 42.55,105.104974 42.55,155.043441 C42.55,177.846074 51.0305973,198.677299 65.0238664,214.583184 Z" id="path-31"></path>
+        <mask id="mask-32" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="181.7" height="180.843184" fill="white">
+            <use xlink:href="#path-31"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Speed-&amp;-Performance">
+            <g id="frame">
+                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                <use fill="#EAEAEB" fill-rule="evenodd" xlink:href="#path-1"></use>
+            </g>
+            <g id="controls" transform="translate(35.000000, 38.000000)">
+                <g id="Oval-1">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                    <use fill="#FF6057" fill-rule="evenodd" xlink:href="#path-3"></use>
+                </g>
+                <g id="Oval-1">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                    <use fill="#FFC22E" fill-rule="evenodd" xlink:href="#path-5"></use>
+                </g>
+                <g id="Oval-1">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                    <use fill="#28CA40" fill-rule="evenodd" xlink:href="#path-7"></use>
+                </g>
+            </g>
+            <rect id="url-bar" fill="#FFFFFF" x="111" y="32" width="774" height="29" rx="4"></rect>
+            <g id="menu" transform="translate(901.000000, 38.000000)" stroke="#FFFFFF" stroke-width="4" stroke-linecap="square">
+                <path d="M0,2 L25.1782593,2" id="Line"></path>
+                <path d="M0,9 L25.1782593,9" id="Line"></path>
+                <path d="M0,16 L25.1782593,16" id="Line"></path>
+            </g>
+            <g id="homepage" transform="translate(21.000000, 74.000000)">
+                <rect id="screen" fill="#FFFFFF" x="0" y="0" width="920" height="491"></rect>
+                <g id="text" transform="translate(37.000000, 202.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="11.7" stroke-linecap="square">
+                    <path d="M0.105343511,6.80295567 L242.71468,6.80295567" id="Line"></path>
+                    <path d="M0.105343511,36.7142857 L242.71468,36.7142857" id="Line"></path>
+                </g>
+                <g id="text" transform="translate(334.000000, 204.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="11.7" stroke-linecap="square">
+                    <path d="M0.980152672,6.10344828 L243.589489,6.10344828" id="Line"></path>
+                    <path d="M0.980152672,36.0147783 L243.589489,36.0147783" id="Line"></path>
+                </g>
+                <g id="text" transform="translate(627.000000, 204.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="11.7" stroke-linecap="square">
+                    <path d="M0.651908397,6.10344828 L243.261245,6.10344828" id="Line"></path>
+                    <path d="M0.651908397,36.0147783 L243.261245,36.0147783" id="Line"></path>
+                </g>
+                <g id="box" transform="translate(28.000000, 24.000000)" fill="#E1E2E3" fill-opacity="0.7">
+                    <rect id="Rectangle-70" x="0" y="0.773399015" width="265.355725" height="160.570007" rx="5.2"></rect>
+                    <rect id="Rectangle-70" x="293.972519" y="0.773399015" width="265.355725" height="160.570007" rx="5.2"></rect>
+                    <rect id="Rectangle-70" x="586.644275" y="0.773399015" width="265.355725" height="160.570007" rx="5.2"></rect>
+                </g>
+            </g>
+            <g id="screen" transform="translate(21.000000, 341.000000)">
+                <g id="Grid">
+                    <rect id="Rectangle-2" fill="#EFEFEF" x="0" y="0" width="921" height="32.7200012"></rect>
+                    <rect id="Rectangle-2" fill="#EFEFEF" x="0" y="66" width="921" height="32.7200012"></rect>
+                    <rect id="Rectangle-2-Copy-2" fill="#EFEFEF" x="0" y="134" width="921" height="32.7200012"></rect>
+                    <rect id="Rectangle-2-Copy" fill="#EFEFEF" x="0" y="200" width="921" height="25.7199993"></rect>
+                    <path d="M190.552549,7.8452814e-15 L190.552549,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
+                    <path d="M259.480749,7.8452814e-15 L259.480749,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
+                    <path d="M328.408949,7.8452814e-15 L328.408949,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
+                    <path d="M397.337149,7.8452814e-15 L397.337149,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
+                    <path d="M498.814776,7.8452814e-15 L498.814776,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
+                    <path d="M564.870968,7.8452814e-15 L564.870968,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
+                    <path d="M627.097815,7.8452814e-15 L627.097815,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
+                    <path d="M845.849116,0.355095541 L845.849116,222.740787" id="Line" stroke="#0037FF" stroke-linecap="square"></path>
+                    <path d="M887.014568,0.355095541 L887.014568,222.740787" id="Line" stroke="#FF0000" stroke-linecap="square"></path>
+                </g>
+                <g id="Items" transform="translate(11.530697, 9.000000)">
+                    <g id="items">
+                        <use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-10)" stroke-width="3" fill="#EFC535" xlink:href="#path-9"></use>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
+                    </g>
+                    <g id="items" transform="translate(0.000000, 33.000000)">
+                        <use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-12)" stroke-width="3" fill="#9279EA" xlink:href="#path-11"></use>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
+                    </g>
+                    <g id="items" transform="translate(0.000000, 66.000000)">
+                        <use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-14)" stroke-width="3" fill="#EFC535" xlink:href="#path-13"></use>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
+                    </g>
+                    <g id="items" transform="translate(0.000000, 99.000000)">
+                        <use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-16)" stroke-width="3" fill="#79B256" xlink:href="#path-15"></use>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
+                    </g>
+                    <g id="items-" transform="translate(0.000000, 133.000000)">
+                        <use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-18)" stroke-width="3" fill="#79B256" xlink:href="#path-17"></use>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
+                    </g>
+                    <g id="items" transform="translate(0.000000, 166.000000)">
+                        <use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-20)" stroke-width="3" fill="#EFC535" xlink:href="#path-19"></use>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
+                    </g>
+                    <g id="items-" transform="translate(0.000000, 199.000000)">
+                        <use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-22)" stroke-width="3" fill="#EFC535" xlink:href="#path-21"></use>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
+                        <rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
+                    </g>
+                </g>
+                <rect id="overlay" fill-opacity="0.550000012" fill="#FFFFFF" x="1" y="0" width="920" height="225"></rect>
+            </g>
+            <g id="speed" transform="translate(659.000000, 349.000000)">
+                <rect id="Rectangle" fill="#2FAE57" x="37.3361082" y="167" width="27.8598384" height="15"></rect>
+                <rect id="Rectangle" fill="#4BA4E7" x="65.0988554" y="167" width="20.6547078" height="15"></rect>
+                <rect id="Rectangle" fill="#2FAE57" x="45.9521332" y="200" width="16.0308012" height="15"></rect>
+                <rect id="Rectangle-" fill="#4BA4E7" x="61.2695109" y="200" width="15.7098854" height="15"></rect>
+                <rect id="Rectangle-" fill="#2FAE57" x="26.805411" y="132" width="27.8598384" height="15"></rect>
+                <rect id="Rectangle" fill="#4BA4E7" x="54.5681582" y="132" width="20.6547078" height="15"></rect>
+                <rect id="Rectangle" fill="#2FAE57" x="17.2320499" y="101" width="27.8598384" height="15"></rect>
+                <rect id="Rectangle" fill="#4BA4E7" x="44.9947971" y="101" width="13.9579604" height="15"></rect>
+                <rect id="Rectangle" fill="#2FAE57" x="11.9918112" y="67" width="20.6547078" height="15"></rect>
+                <rect id="Rectangle" fill="#4BA4E7" x="32.5494277" y="67" width="13.9579604" height="15"></rect>
+                <rect id="Rectangle" fill="#2FAE57" x="5.29045841" y="35" width="16.0308012" height="15"></rect>
+                <rect id="Rectangle-" fill="#4BA4E7" x="19.1513275" y="35" width="20.6547078" height="15"></rect>
+                <rect id="Rectangle-" fill="#2FAE57" x="0" y="0" width="10.4501626" height="15"></rect>
+                <rect id="Rectangle-" fill="#4BA4E7" x="7.154911" y="0" width="20.6547078" height="15"></rect>
+            </g>
+            <path d="M20.5,339.5 L945.865356,339.5" id="divder" stroke="#EAEAEB" stroke-width="3" stroke-linecap="square"></path>
+            <g id="Speed-gauge-" transform="translate(328.000000, 74.000000)">
+                <g id="speed-outline" transform="translate(0.000000, 2.000000)">
+                    <mask id="mask-24" fill="white">
+                        <use xlink:href="#path-23"></use>
+                    </mask>
+                    <g id="Mask"></g>
+                    <g id="Oval-" mask="url(#mask-24)" stroke-width="14.168" stroke="#FFFFFF">
+                        <use mask="url(#mask-26)" xlink:href="#path-25"></use>
+                    </g>
+                </g>
+                <path d="M46.1066667,149.148993 L254.348228,149.148993" id="Line" stroke="#FFFFFF" stroke-width="7.084" stroke-linecap="square"></path>
+                <path d="M155.081379,132.624066 C155.015229,132.626094 154.948821,132.627116 154.882169,132.627116 C154.395878,132.627116 153.922552,132.572743 153.468182,132.469865 C152.804427,132.394628 151.893833,132.162947 151.167113,131.429442 C149.62741,130.313781 148.629108,128.522197 148.629108,126.502227 C148.629108,123.119545 151.428699,120.377339 154.882169,120.377339 C155.357229,120.377339 155.819915,120.429229 156.264644,120.527538 C167.543996,121.043681 205.086153,127.450459 205.086153,127.450459 C210.736184,128.389079 210.667842,129.368325 204.925994,129.644561 C204.925994,129.644561 162.306078,131.590023 156.130652,132.603685 C155.732096,132.669106 155.379616,132.657248 155.081379,132.624066 Z" id="gauge-line" fill="#E72A2D" transform="translate(178.953783, 126.514130) rotate(-32.000000) translate(-178.953783, -126.514130) "></path>
+                <g id="angular-logo" transform="translate(132.000000, 120.000000)">
+                    <path d="M0.0167838345,0 L18.9284668,4.01730537 L36.656498,10.8978434 L35.6646042,20.2834702 C36.4835729,20.2834702 37.7833744,25.3201689 37.7793083,25.3641902 C37.7096348,26.1185132 37.7793083,35.0976279 37.7793083,35.0976279 L41,45.9999991 L0,46 L0.0167838345,0 Z" id="background-mask" fill="#EAEAEB"></path>
+                    <g id="Group" transform="translate(1.000000, 4.000000)" fill="#FFFFFF">
+                        <g id="Shape">
+                            <polygon points="17.9090158 25.7437931 13.2031361 25.7437931 10.9740352 31.8355172 10.9740352 31.8355172 6.83971985 31.8355172 6.8206677 31.8355172 17.9090158 4.61051724 17.9090158 4.63137931 17.9090158 4.63137931 17.9090158 0 17.9090158 0 0.1714693 6.9262069 2.87687381 32.6074138 17.9090158 41.7241379 17.9090158 41.7241379"></polygon>
+                            <polygon points="14.6701512 21.9886207 17.9090158 21.9886207 17.9090158 21.9886207 17.9090158 13.4560345"></polygon>
+                        </g>
+                        <g opacity="0.9" transform="translate(17.909016, 0.000000)" id="Shape">
+                            <polygon points="1.77635684e-15 25.7437931 4.70587967 25.7437931 6.93498057 31.8355172 6.93498057 31.8355172 11.0692959 31.8355172 11.0883481 31.8355172 1.77635684e-15 4.61051724 1.77635684e-15 4.63137931 1.77635684e-15 4.63137931 1.77635684e-15 0 1.77635684e-15 0 17.7375465 6.9262069 15.0321419 32.6074138 1.77635684e-15 41.7241379 1.77635684e-15 41.7241379"></polygon>
+                            <polygon points="3.23886455 21.9886207 0 21.9886207 0 21.9886207 0 13.4560345"></polygon>
+                        </g>
+                    </g>
+                </g>
+                <g id="Lines" transform="translate(155.000000, 72.000000)" stroke="url(#linearGradient-27)" stroke-width="2.3" stroke-linecap="square">
+                    <path d="M27.2768367,6.1378486 L22.7819389,17.8474575" id="Line-Copy-3"></path>
+                    <path d="M40,12 L33,23" id="Line-Copy-6"></path>
+                    <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-gauge" transform="translate(17.000000, 0.000000)">
+                    <mask id="mask-29" fill="white">
+                        <use xlink:href="#path-28"></use>
+                    </mask>
+                    <g id="Rectangle-286"></g>
+                    <g id="Oval-25-Copy-3" mask="url(#mask-29)" stroke-width="16.1" stroke="url(#linearGradient-30)">
+                        <use mask="url(#mask-32)" xlink:href="#path-31"></use>
+                    </g>
+                    <g id="Oval-56-Copy-+-Rectangle-331" mask="url(#mask-29)" fill="#E3E3E4">
+                        <g transform="translate(-373.291476, 407.207367) rotate(3.000000) translate(373.291476, -407.207367) translate(-406.791476, 373.207367)" id="Oval-56-Copy">
+                            <path d="M3.15835059,41.6420067 C3.01165034,41.6498871 2.86389683,41.6538789 2.7151949,41.6538789 C2.00319306,41.6538789 1.31293476,41.5623635 0.655928305,41.3906458 C-0.126625332,41.2697588 -1.1063159,40.9666155 -1.92621611,40.1941776 C-3.95519512,38.7691732 -5.2778242,36.4346736 -5.2778242,33.7964996 C-5.2778242,29.4569888 -1.69922766,25.9391203 2.7151949,25.9391203 C3.27617754,25.9391203 3.82366226,25.995931 4.35202025,26.1040193 C18.6176095,26.7360162 66.8311582,35.0278524 66.8311582,35.0278524 C74.0912314,36.2433272 74.0037913,37.5054314 66.6519821,37.8545163 C66.6519821,37.8545163 12.2059231,40.3048396 4.3117252,41.5987591 C3.88366341,41.6689217 3.49713058,41.669147 3.15835269,41.6420066 Z" transform="translate(33.471829, 33.798938) rotate(-46.000000) translate(-33.471829, -33.798938) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/aio/content/license.md b/aio/content/license.md
new file mode 100644
index 000000000000..35f5cedfba6c
--- /dev/null
+++ b/aio/content/license.md
@@ -0,0 +1,23 @@
+@title
+@description
+The MIT License
+
+Copyright (c) 2014-2018 Google, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/aio/content/marketing/about.html b/aio/content/marketing/about.html
new file mode 100644
index 000000000000..4039734d1a5a
--- /dev/null
+++ b/aio/content/marketing/about.html
@@ -0,0 +1,8 @@
+<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>
+
+<aio-contributor-list></aio-contributor-list>
diff --git a/aio/content/marketing/announcements.json b/aio/content/marketing/announcements.json
new file mode 100644
index 000000000000..879e0b474094
--- /dev/null
+++ b/aio/content/marketing/announcements.json
@@ -0,0 +1,30 @@
+[
+  {
+    "startDate": "2018-02-14",
+    "endDate": "2018-04-18",
+    "message": "Join us for ng-conf<br/>Apr 18th-20th, 2018",
+    "imageUrl": "generated/images/marketing/home/ng-conf.png",
+    "linkUrl": "http://ng-conf.org/"
+  },
+  {
+    "startDate": "2018-04-18",
+    "endDate": "2018-04-22",
+    "message": "Watch ng-conf live stream <br/>Apr 18th-20th, 2018",
+    "imageUrl": "generated/images/marketing/home/ng-conf.png",
+    "linkUrl": "https://www.ng-conf.org/livestream/"
+  },
+  {
+    "startDate": "2018-06-01",
+    "endDate": "2018-08-15",
+    "message": "Join us for Angular Mix<br/>October 10th-12th, 2018",
+    "imageUrl": "generated/images/marketing/home/angular-mix.png",
+    "linkUrl": "https://angularmix.com/"
+  },
+  {
+    "startDate": "2018-08-15",
+    "endDate": "2018-11-06",
+    "message": "Join us for Angular Connect<br/>November 6th-7th, 2018",
+    "imageUrl": "generated/images/marketing/home/angular-connect.png",
+    "linkUrl": "https://angularconnect.com/"
+  }
+]
diff --git a/aio/content/marketing/api.html b/aio/content/marketing/api.html
new file mode 100755
index 000000000000..c2508b53b317
--- /dev/null
+++ b/aio/content/marketing/api.html
@@ -0,0 +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 000000000000..8cef8c9536db
--- /dev/null
+++ b/aio/content/marketing/contribute.html
@@ -0,0 +1,43 @@
+<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="card-section">
+    <div>
+      <h3 class="no-anchor">Angular</h3>
+
+      Angular is a next generation mobile and desktop application development platform.
+
+    </div>
+    <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button button-blue" md-button>Contribute</a>
+  </div>
+
+  <div class="card-section">
+    <div>
+      <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).
+
+    </div>
+
+    <a href="https://github.com/angular/material2/blob/master/CONTRIBUTING.md" class="button button-blue" md-button>Contribute</a>
+  </div>
+
+  <div class="card-section">
+    <div>
+      <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.
+
+    </div>
+    <a href="https://github.com/angular/angularfire2" class="button button-blue" md-button> Contribute</a>
+  </div>
+
+</article>
diff --git a/aio/content/marketing/contributors.json b/aio/content/marketing/contributors.json
new file mode 100644
index 000000000000..ec98a6c996c7
--- /dev/null
+++ b/aio/content/marketing/contributors.json
@@ -0,0 +1,667 @@
+{
+ "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": "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": "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": "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, 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": "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": "Angular"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "wardbell": {
+     "name": "Ward Bell",
+     "picture": "wardbell.jpg",
+     "website": "https://github.com/wardbell",
+     "twitter": "wardbell",
+     "bio": "Ward is an all-around developer with JavaScript, Node.js®, 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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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": "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": "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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"
+ },
+
+ "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 ThoughtWorks 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 immersed in the excitement of the arrival of the 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 Full Stack Developer in ByteDefault, a professor for several courses related to JavaScript, a speaker, and an author of technical articles and the book \"Entendiendo Angular.\" He is a Google Developer Expert in web technologies (nominated by Google) and a 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": "Lead for AngularJS Material. Owner and consultant at DevIntent. Ex-Angular GDE. Founder of the Google Developers Group (GDG) community on the Space Coast of Florida, USA.",
+   "group": "Angular"
+ },
+
+"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"
+ },
+
+ "amcdnl": {
+    "name": "Austin McDaniel",
+    "picture": "amcdnl.jpeg",
+    "twitter": "amcdnl",
+    "website": "https://amcdnl.com",
+    "bio": "Austin is an software architect with a passion for JavaScript and Angular. Austin loves to share his experiences with other like-minded developers by giving talks, blogging, podcasting and open-sourcing.",
+    "group": "Angular"
+  },
+
+  "nirkaufman": {
+    "name": "Nir Kaufman",
+    "picture": "nirkaufman.jpg",
+    "twitter": "nirkaufman",
+    "website": "http://ngnir.life/",
+    "bio": "Nir is a Principal Frontend Consultant & Head of the Angular department at 500Tech, Google Developer Expert and community leader. He organizes the largest Angular meetup group in Israel (Angular-IL), talks and teaches about front-end technologies around the world. He is also the author of two books about Angular and the founder of the 'Frontend Band'.",
+    "group": "GDE"
+  },
+
+  "achautard": {
+    "name": "Alain Chautard",
+    "picture": "alainchautard.png",
+    "twitter": "AlainChautard",
+    "website": "http://www.angulartraining.com",
+    "bio": "Alain Chautard is a Google Developer Expert in Web Technologies / Angular. He started working with Angular JS in 2011. Since then he has worked with all Angular versions on a daily basis, both as a developer and as a technical trainer. He is the organizer of the Sacramento Angular Meetup group, co-organizer of the Google Developer Group chapter in Sacramento, California, and published author of the Packt video course 'Getting Started with Angular'",
+    "group": "GDE"
+  },
+
+  "coryrylan": {
+    "name": "Cory Rylan",
+    "picture": "cory-rylan.jpg",
+    "twitter": "coryrylan",
+    "website": "https://coryrylan.com",
+    "bio": "Cory is a full time front end web developer. He works full time building responsive web applications and progressive web apps. When not building web apps he is busy teaching Angular and other web technologies in workshops and conferences. He loves the web and is optimistic of the places it can take us.",
+    "group": "GDE"
+  },
+
+  "mhartington": {
+    "name": "Mike Hartington",
+    "picture": "mhartington.png",
+    "twitter": "mhartington",
+    "website": "https://mhartington.io",
+    "bio": "Mike is a Developer Advocate for the Ionic Framework and a GDE in Angular. He spends most of his time making fast PWAs and exploring emerging web standards. When not behind a keyboard, you'll probably find him with a guitar and beer.",
+    "group": "GDE"
+  },
+
+  "juristr": {
+    "name": "Juri Strumpflohner",
+    "picture": "juristr.jpg",
+    "twitter": "juristr",
+    "website": "https://juristr.com",
+    "bio": "Juri is a software engineer and freelance trainer and consultant currently mostly focusing on the frontend side using JavaScript, TypeScript and Angular. He has a passion for teaching and sharing his knowledge and experiences with others. This mostly happens by writing tech articles for his personal blog, by creating video courses for Egghead.io, during on-site workshops at companies or by speaking at conferences. In his free time he enjoys practicing Yoseikan Budo, a martial art where he currently owns the 3rd DAN black belt.",
+    "group": "GDE"
+  },
+
+  "mashhoodr": {
+    "name": "Mashhood Rastgar",
+    "picture": "mashhood.jpg",
+    "twitter": "mashhoodr",
+    "website": "http://imars.info/",
+    "bio": "Mashhood is the principal technical consultant at Recurship and a Google Developer Expert. He  works with different startups in US and EU to helps them crawl through the technical maze and quickly build amazing products focused around the problems they are trying to solve. He specializes in using the latest web technologies available to execute the best possible solutions.",
+    "group": "GDE"
+  },
+
+  "kimmaida": {
+    "name": "Kim Maida",
+    "picture": "kimmaida.jpg",
+    "twitter": "KimMaida",
+    "website": "https://kmaida.io/",
+    "bio": "Kim is an an Angular consultant, developer, speaker, writer, and Google Developer Expert. She is passionate about learning from and sharing knowledge with other developers through blogging, speaking, workshops, and open source.",
+    "group": "GDE"
+  },
+
+  "elanaolson": {
+    "name": "Elana Olson",
+    "picture": "elanaolson.jpg",
+    "twitter": "elanathellama",
+    "bio": "Elana is a Developer Relations intern on the Angular team at Google. She is working on migration paths from AngularJS to Angular and would love to chat about your experience with upgrading.",
+    "group": "Angular"
+  },
+  
+   "kevinyang": {
+    "name": "Kevin Yang",
+    "picture": "kevinyang.jpg",
+    "twitter": "chgc",
+    "website": "https://blog.kevinyang.net/",
+    "bio":
+      "Kevin is a Angular Taiwan, Angular Girls Taiwan community organzier. He loves sharing knowledge with other developers through blogging, speaking, workshops.",
+    "group": "GDE"
+  }
+}
diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md
new file mode 100644
index 000000000000..24f89329cccd
--- /dev/null
+++ b/aio/content/marketing/docs.md
@@ -0,0 +1,50 @@
+<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/toh-pt1/stackblitz.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>
+
+  <a href="guide/quickstart" class="docs-card" title="Angular Quickstart">
+      <section>Get Going with Angular</section>
+      <p>Get going on your own environment with the Quickstart.</p>
+      <p class="card-footer">Quickstart</p>
+  </a>
+
+  <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
new file mode 100755
index 000000000000..1c00a3ca2d14
--- /dev/null
+++ b/aio/content/marketing/events.html
@@ -0,0 +1,72 @@
+<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>
+      <th>Event</th>
+      <th>Location</th>
+      <th>Date</th>
+    </tr>
+    </thead>
+    <tbody>
+    <!-- AngularConnect-->
+    <tr>
+      <th><a href="http://angularconnect.com" title="AngularConnect">AngularConnect</a></th>
+      <td>London, United Kingdom</td>
+      <td>November 7-8, 2017</td>
+    </tr>
+    <!-- ngAtlanta-->
+    <tr>
+      <th><a href="http://ng-atl.org/" title="ngAtlanta">ngAtlanta</a></th>
+      <td>Atlanta, Georgia</td>
+      <td>January 30, 2018</td>
+    </tr>
+    <!-- ngVikings-->
+    <tr>
+      <th><a href="https://ngvikings.org/" title="ngVikings">ngVikings</a></th>
+      <td>Helsinki, Finland</td>
+      <td>March 1-2, 2018</td>
+    </tr>
+    <!-- ngconf 2018-->
+    <tr>
+      <th><a href="https://www.ng-conf.org/" title="ng-conf">ng-conf</a></th>
+      <td>Salt Lake City, UT</td>
+      <td>April 18-20, 2018</td>
+    </tr>
+    <!-- WeRDevs-->
+    <tr>
+      <th><a href="https://www.wearedevelopers.com/" title="WeAreDevs">WeAreDevelopers</a></th>
+      <td>Vienna</td>
+      <td>May 16-18, 2018</td>
+    </tr>
+    <!-- ngJapan-->
+    <tr>
+      <th><a href="https://ngjapan.org/en.html" title="ng-japan">ng-japan</a></th>
+      <td>Tokyo, Japan</td>
+      <td>Jun 16, 2018</td>
+    </tr>
+    <!-- Angular Conf Australia-->
+    <tr>
+      <th><a href="https://www.angularconf.com.au/" title="Angular Conf Australia">Angular Conf Australia</a></th>
+      <td>Melbourne, Australia</td>
+      <td>Jun 22, 2018</td>
+    </tr>
+    <!-- ReactiveConf -->
+    <tr>
+      <th><a href="https://reactiveconf.com/" title="ReactiveConf">ReactiveConf</a></th>
+      <td>Bratislava, Slovakia</td>
+      <td>October 29-31, 2018</td>
+    </tr>
+    <!-- AngularConnect-->
+    <tr>
+      <th><a href="http://angularconnect.com" title="AngularConnect">AngularConnect</a></th>
+      <td>London, United Kingdom</td>
+      <td>November 5-7, 2018</td>
+    </tr>
+    </tbody>
+  </table>
+</article>
diff --git a/aio/content/marketing/features.html b/aio/content/marketing/features.html
new file mode 100755
index 000000000000..e62dfd8e0996
--- /dev/null
+++ b/aio/content/marketing/features.html
@@ -0,0 +1,114 @@
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Features & Benefits</h1>
+</header>
+
+<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-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 Cordova, Ionic, or NativeScript.</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>
+
+      <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 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
new file mode 100755
index 000000000000..7de22cc0f22f
--- /dev/null
+++ b/aio/content/marketing/index.html
@@ -0,0 +1,118 @@
+<!-- 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">
+      <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>
+
+  </section>
+
+</header>
+
+<!-- MAIN CONTENT -->
+<article>
+
+  <h1 class="no-anchor no-toc" style="display: none"></h1>
+
+  <div class="home-rows">
+
+    <aio-announcement-bar></aio-announcement-bar>
+
+    <!-- Group 1 -->
+    <div layout="row" layout-xs="column" class="home-row homepage-container">
+      <div class="promo-img-container promo-1">
+        <div>
+          <img height="222" width="340" src="generated/images/marketing/home/responsive-framework.svg" alt="responsive framework">
+        </div>
+      </div>
+
+      <div class="text-container">
+        <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>
+    <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/presskit.html b/aio/content/marketing/presskit.html
new file mode 100644
index 000000000000..5d20411d0e9c
--- /dev/null
+++ b/aio/content/marketing/presskit.html
@@ -0,0 +1,629 @@
+<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" 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>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/angular/angular.svg" alt="Angular">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">FULL COLOR LOGO</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Angular Logo (png) - <a href="assets/images/logos/angular/angular.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Angular Logo (svg) - <a href="assets/images/logos/angular/angular.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <div>
+          <img src="assets/images/logos/angular/angular_solidBlack.svg">
+        </div>
+      </div>
+      <div>
+        <h3 class="l-space-left-3">ONE COLOR LOGO</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Angular Logo Black (png) - <a href="assets/images/logos/angular/angular_solidBlack.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Angular Logo Black (svg) - <a href="assets/images/logos/angular/angular_solidBlack.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <div>
+          <img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg">
+        </div>
+      </div>
+      <div>
+        <h3 class="l-space-left-3">ONE COLOR INVERSE LOGO</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Angular Logo White Semi-Transparent (png) - <a href="assets/images/logos/angular/angular_whiteTransparent.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Angular Logo Semi-Transparent (svg) - <a href="assets/images/logos/angular/angular_whiteTransparent.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div>
+        <h2>BRAND ICONS</h2>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/animations.png" alt="Animations Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">ANIMATIONS</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Animations Icon (png) - <a href="assets/images/logos/concept-icons/animations.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Animations Icon (svg) - <a href="assets/images/logos/concept-icons/animations.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/augury.png" alt="Augury Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">AUGURY</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Augury Icon (png) - <a href="assets/images/logos/concept-icons/augury.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Augury Icon (svg) - <a href="assets/images/logos/concept-icons/augury.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/cdk.png" alt="CDK Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">COMPONENT DEV KIT (CDK)</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>CDK Icon (png) - <a href="assets/images/logos/concept-icons/cdk.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>CDK Icon (svg) - <a href="assets/images/logos/concept-icons/cdk.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/cli.png" alt="CLI Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">CLI</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>CLI Icon (png) - <a href="assets/images/logos/concept-icons/cli.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>CLI Icon (svg) - <a href="assets/images/logos/concept-icons/cli.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/compiler.png" alt="Compiler Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">COMPILER</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Compiler Icon (png) - <a href="assets/images/logos/concept-icons/compiler.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Compiler Icon (svg) - <a href="assets/images/logos/concept-icons/compiler.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/components.png" alt="Components Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">WEB COMPONENTS</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Web Components Icon (png) - <a href="assets/images/logos/concept-icons/components.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Web Components Icon (svg) - <a href="assets/images/logos/concept-icons/components.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/forms.png" alt="Forms Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">FORMS</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Forms Icon (png) - <a href="assets/images/logos/concept-icons/forms.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Forms Icon (svg) - <a href="assets/images/logos/concept-icons/forms.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/http.png" alt="HTTP Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">HTTP</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>HTTP Icon (png) - <a href="assets/images/logos/concept-icons/http.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>HTTP Icon (svg) - <a href="assets/images/logos/concept-icons/http.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/i18n.png" alt="i18n Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">i18n</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>HTTP Icon (png) - <a href="assets/images/logos/concept-icons/i18n.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>HTTP Icon (svg) - <a href="assets/images/logos/concept-icons/i18n.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/karma.png" alt="Karma Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">KARMA</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Karma Icon (png) - <a href="assets/images/logos/concept-icons/karma.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Karma Icon (svg) - <a href="assets/images/logos/concept-icons/karma.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/labs.png" alt="Labs Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">LABS</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Labs Icon (png) - <a href="assets/images/logos/concept-icons/labs.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Labs Icon (svg) - <a href="assets/images/logos/concept-icons/labs.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/language-services.png" alt="Language Services Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">LANGUAGE SERVICES</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Language Services Icon (png) - <a href="assets/images/logos/concept-icons/language-services.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Language Services Icon (svg) - <a href="assets/images/logos/concept-icons/language-services.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/material.png" alt="Material Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">MATERIAL</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Material Icon (png) - <a href="assets/images/logos/concept-icons/material.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Material Icon (svg) - <a href="assets/images/logos/concept-icons/material.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/protractor.png" alt="Protractor Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">PROTRACTOR</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Protractor Icon (png) - <a href="assets/images/logos/concept-icons/protractor.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Protractor Icon (svg) - <a href="assets/images/logos/concept-icons/protractor.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/pwa.png" alt="PWA Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">PWA</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>PWA Icon (png) - <a href="assets/images/logos/concept-icons/pwa.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>PWA Icon (svg) - <a href="assets/images/logos/concept-icons/pwa.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/router.png" alt="Router Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">ROUTER</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Router Icon (png) - <a href="assets/images/logos/concept-icons/router.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Router Icon (svg) - <a href="assets/images/logos/concept-icons/router.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/universal.png" alt="Universal Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">UNIVERSAL</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Universal Icon (png) - <a href="assets/images/logos/concept-icons/universal.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Universal Icon (svg) - <a href="assets/images/logos/concept-icons/universal.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div>
+        <h2>CONCEPT & FEATURE ICONS</h2>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/dependency-injection.png" alt="Dependency Injection Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">DEPENDENCY INJECTION</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Dependency Injection Icon (png) - <a href="assets/images/logos/concept-icons/dependency-injection.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Dependency Injection Icon (svg) - <a href="assets/images/logos/concept-icons/dependency-injection.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/lazy-loading.png" alt="Lazy Loading Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">LAZY LOADING</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Lazy Loading Icon (png) - <a href="assets/images/logos/concept-icons/lazy-loading.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Lazy Loading Icon (svg) - <a href="assets/images/logos/concept-icons/lazy-loading.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/libraries.png" alt="Libraries Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">LIBRARIES</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Libraries Icon (png) - <a href="assets/images/logos/concept-icons/libraries.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Libraries Icon (svg) - <a href="assets/images/logos/concept-icons/libraries.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/performance.png" alt="Performance Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">PERFORMANCE</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Performance Icon (png) - <a href="assets/images/logos/concept-icons/performance.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Performance Icon (svg) - <a href="assets/images/logos/concept-icons/performance.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/templates.png" alt="Templates Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">TEMPLATES</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Templates Icon (png) - <a href="assets/images/logos/concept-icons/templates.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Templates Icon (svg) - <a href="assets/images/logos/concept-icons/templates.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div>
+        <h2>PRESS AND MEDIA</h2>
+        <p>For inquiries regarding press and media please contact us at
+        <a href="mailto:press@angular.io">press@angular.io</a>.</p>
+      </div>
+    </div>
+  </div>
+
+  <style>
+    div.bullets ul {
+      list-style-type: disc !important; margin-left: 1em !important;
+    }
+  </style>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="bullets">
+        <h2>BRAND NAMES</h2>
+          <h3>Angular</h3>
+          <p>The name <b>Angular</b> represents the work and promises provided to you by the Angular team.</p>
+
+          <p>When not specified, Angular is assumed to be referring to the latest and greatest stable version from the Angular Team.</p>
+
+          <h4>Example</h4>
+          <p><b>Version v4.1 now available</b> - We are pleased to announce that the latest release of Angular is now available. Staying up to date is easy!</p>
+
+          <h4>Example</h4>
+
+          <p><b>Correct: </b> "New <code>*ngIf</code> capabilities</b>&mdash;new in version 4.0 is the ability to ..."</p>
+          <p><b style="color: red">Incorrect: </b> "New <code>*ngIf</code> capabilities in Angular 4</b>&mdash;Angular 4 introduces the ability to ..."</p>
+
+          <p><b>Reasoning</b></p>
+
+          <p>By not using “Angular 4” in the title, the content still feels applicable and useful after version 5, 6, 7 have been released, as the syntax is unlikely to change in the short and medium term.</p>
+
+          <h3>AngularJS</h3>
+
+          <p><b>AngularJS</b> is the v1.x series of work and promises provided by the Angular team.</p>
+
+          <h4>Examples</h4>
+          <ol>
+            <li>AngularJS is one of the most used framework on the web today (by number of projects).</li>
+            <li>Millions of developers are currently building with AngularJS.</li>
+            <li>Developers are beginning to upgrade from AngularJS to Angular.</li>
+            <li>I’m upgrading my application from AngularJS to Angular.</li>
+            <li>I'm using AngularJS Material on this project.</li>
+          </ol>
+
+          <p>AngularJS projects should use the
+          <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;" height="128" width="128">
+
+          <h3>Angular Material</h3>
+
+          <p>This is the work being performed by the Angular team to provide Material Design components for Angular applications.</p>
+
+          <h3>AngularJS Material</h3>
+
+          <p>This is the work being performed by the Angular team on Material Design components that are compatible with AngularJS.</p>
+
+          <h3>3rd Party Projects</h3>
+
+          <p><b>X for Angular</b></p>
+
+          <p>3rd parties should use the terminology “X for Angular” or “ng-X” for software projects. Projects should avoid the use of Angular X (e.g. Angular UI Toolkit), as it could create authorship confusion. This rule does not apply to events or meetup groups.</p>
+
+          <p>Developers should avoid using Angular version numbers in project names, as this will artificially limit their projects by tying them to a point in time of Angular, or will require renaming over time.</p>
+
+          <p>Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.</p>
+
+          <b>Do not use</b>
+          <ul>
+            <li><code>ng2-</code></li>
+            <li><code>angular2-</code></li>
+          </ul>
+
+          <b>OK to use</b>
+          <ul>
+            <li><code>ng-</code></li>
+            <li><code>angular-</code></li>
+          </ul>
+
+          <p>As always, component and directive selectors should not begin with “ng-” selectors as this will conflict with components and directives provided by the Angular team.</p>
+
+          <h4>Examples</h4>
+          <ul>
+            <li>The ng-BE team just launched <code>ng-health</code> to help developers track their own health.</li>
+            <li>I’m going to use NativeScript for Angular to take advantage of native UI widgets.</li>
+            <li><code>ReallyCoolTool</code> for Angular.</li>
+            <li><code>ReallyCoolTool</code> for AngularJS.</li>
+          </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="bullets">
+        <h2>TERMS WE USE</h2>
+        <p>
+        We often use terms that are not part of our brand,
+        but we want to remain consistent on the styling and use of them to prevent confusion and to appear unified.
+        </p>
+        <ul>
+          <li>Ahead of Time compilation (AOT)</li>
+          <li>Just in Time compilation (JIT)</li>
+        </ul>
+      </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 000000000000..8289db1008c7
--- /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 000000000000..6f1210c599f3
--- /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 000000000000..640161a90d09
--- /dev/null
+++ b/aio/content/marketing/resources.json
@@ -0,0 +1,782 @@
+{
+  "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"
+          },
+          "angular-ru": {
+            "desc": "Angular-RU Community on GitHub is a single entry point for all resources, chats, podcasts and meetups for Angular in Russia.",
+            "rev": true,
+            "title": "Angular Conferences and Angular Camps in Moscow, Russia.",
+            "url": "https://angular-ru.github.io/"
+          },
+          "made-with-angular": {
+            "desc": "A showcase of web apps built with Angular.",
+            "rev": true,
+            "title": "Made with Angular",
+            "url": "https://www.madewithangular.com/"
+          }
+        }
+      },
+      "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"
+          },
+          "ab4": {
+            "desc": "Angular Commerce is a solution for building modern e-commerce applications with power of Google Firebase. Set of components is design agnostic and allows to easily extend functionality.",
+            "logo": "",
+            "rev": true,
+            "title": "AngularCommerce",
+            "url": "https://github.com/NodeArt/angular-commerce"
+          }
+        }
+      },
+      "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"
+          },
+          "amexio-canvas": {
+             "desc": "Amexio Canvas is Drag and Drop Environment to create Fully Responsive Web and Smart Device HTML5/Angular Apps. Code will be auto generated and hot deployed by the Canvas for live testing. Out of the box 50+ Material Design Theme support. Commit your code to GitHub public or private repository.",
+            "rev": true,
+            "title": "Amexio Canvas Web Based Drag and Drop IDE by MetaMagic",
+            "url": "https://amexio.tech/"
+          }
+        }
+      },
+      "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.js® 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": "Static analysis for Angular 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"
+          },
+          "ncg": {
+            "desc": "Generate several types of CRUD apps complete with e2e testing using template-sets for Angular, Material Design, Bootstrap, Kendo UI, Ionic, ...",
+            "logo": "https://avatars3.githubusercontent.com/u/27976684",
+            "rev": true,
+            "title": "NinjaCodeGen - Angular CRUD Generator",
+            "url": "https://ninjaCodeGen.com"
+          },
+          "angular-playground": {
+            "desc": "UI development environment for building, testing, and documenting Angular applications.",
+            "rev": true,
+            "title": "Angular Playground",
+            "url": "http://www.angularplayground.it/"
+          },
+          "nx": {
+            "desc": "Nx (Nrwl Extensions for Angular) is an open source toolkit built on top of Angular CLI to help enterprise teams develop Angular at scale.",
+            "rev": true,
+            "title": "Nx",
+            "logo": "https://nrwl.io/assets/nx-logo.png",
+            "url": "https://nrwl.io/nx"
+          },
+          "uijar": {
+            "desc": "A drop in module to automatically create a living style guide based on the test you write for your components.",
+            "logo": "",
+            "rev": true,
+            "title": "UI-jar - Test Driven Style Guide Development",
+            "url": "https://github.com/ui-jar/ui-jar"
+          }
+        }
+      },
+      "UI Components": {
+        "order": 4,
+        "resources": {
+          "IgniteUIforAngular": {
+            "desc": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps.",
+            "rev": true,
+            "title": "Ignite UI for Angular",
+            "url": "https://www.infragistics.com/products/ignite-ui-angular"
+          },
+          "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": "A professional grade library of Angular UI components written in TypeScript that includes our Data Grid, TreeView, Charts, Editors, DropDowns, DatePickers, and many more. Features include support for AOT compilation, Tree Shaking for high-performance, localization, and accessibility.",
+            "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",
+            "url": "https://github.com/angular/material2"
+          },
+          "mcc": {
+            "desc": "Material components made by the community",
+            "logo": "",
+            "rev": true,
+            "title": "Material Community Components",
+            "url": "https://github.com/tiaguinho/material-community-components"
+          },
+          "ngzorro": {
+            "desc": "A set of enterprise-class UI components based on Ant Design and Angular",
+            "rev": true,
+            "title": "Ant Design of Angular (ng-zorro-antd)",
+            "url": "https://ng.ant.design/docs/introduce/en"
+          },
+          "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 data grid, tree grid, pivot grid, scheduler, charts, editors and other multi-purpose components",
+            "rev": true,
+            "title": "jQWidgets",
+            "url": "https://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"
+          },
+          "bm": {
+            "desc": "A lightweight Material Design library for Angular, based upon Google's Material Components for the Web",
+            "logo": "https://blox.src.zone/assets/bloxmaterial.03ecfe4fa0147a781487749dc1cc4580.svg",
+            "rev": true,
+            "title": "Blox Material",
+            "url": "https://github.com/src-zone/material"
+          },
+          "essentialjs2": {
+            "desc": "Essential JS 2 for Angular is a collection modern TypeScript based true Angular Components. It has support for Ahead Of Time (AOT) compilation and Tree-Shaking. All the components are developed from the ground up to be lightweight, responsive, modular and touch friendly.",
+            "rev": true,
+            "title": "Essential JS 2",
+            "url": "https://www.syncfusion.com/products/angular-js2"
+          },
+          "trulyui": {
+            "desc": "TrulyUI is an Angular UI Framework especially developed for Desktop Applications based on Web Components using the greatest technologies of the world.",
+            "rev": true,
+            "title": "Truly UI",
+            "url": "http://truly-ui.tk"
+          }
+        }
+      }
+    }
+  },
+  "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 - Second Edition",
+            "url": "https://www.packtpub.com/web-development/learning-angular-second-edition"
+          },
+          "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"
+          },
+          "angular-buch": {
+            "desc": "The first German book about Angular. It gives you a detailed practical overview of the key concepts of the platform. In each chapter a sample application is built upon with a new Angular topic. All sources are available on GitHub.",
+            "logo": "https://angular-buch.com/assets/img/brand.svg",
+            "rev": true,
+            "title": "Angular-Buch (German)",
+            "url": "https://angular-buch.com/"
+          },
+          "wishtack-guide-angular": {
+            "desc": "The free, open-source and up-to-date Angular guide. This pragmatic guide is focused on best practices and will drive you from scratch to cloud.",
+            "logo": "https://raw.githubusercontent.com/wishtack/gitbook-guide-angular/master/.gitbook/assets/wishtack-logo-with-text.png",
+            "rev": true,
+            "title": "The Angular Guide by Wishtack (Français)",
+            "url": "https://guide-angular.wishtack.io/"
+          },
+          "ab5": {
+            "desc": "How to build Angular applications using NGRX",
+            "logo": "",
+            "rev": true,
+            "title": "Architecting Angular Applications with NGRX",
+            "url": "https://www.packtpub.com/web-development/architecting-angular-applications-redux"
+          }
+        }
+      },
+      "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"
+          },
+          "angular-playbook": {
+            "desc": "Learn advanced Angular best practices for enterprise teams, created by Nrwl.io.",
+            "logo": "https://nrwl.io/assets/logo_footer_2x.png",
+            "rev": true,
+            "title": "Angular Enterprise Playbook",
+            "url": "https://angularplaybook.com"
+          },
+          "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"
+          },
+          "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/browse/frameworks/angular"
+          },
+          "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/"
+          },
+          "upgrading-ajs": {
+            "desc": "The world's most comprehensive, step-by-step course on using best practices and avoiding pitfalls while migrating from AngularJS to Angular.",
+            "rev": true,
+            "title": "Upgrading AngularJS",
+            "url": "https://www.upgradingangularjs.com"
+          },
+          "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/"
+          },
+          "willh-angular-zero": {
+            "desc": "Online video course in Chinese for newbies who need to learning from the scratch in Chinese.  It's covering Angular, Angular CLI, TypeScript, VSCode, and some must known knowledge of Angular development.",
+            "rev": true,
+            "title": "Angular in Action: Start From Scratch (正體中文)",
+            "url": "https://www.udemy.com/angular-zero/?couponCode=ANGULAR.IO"
+          },
+          "angular-firebase": {
+            "desc": "Video lessons covering progressive web apps with Angular, Firebase, RxJS, and related APIs.",
+            "rev": true,
+            "title": "AngularFirebase.com",
+            "url": "https://angularfirebase.com/"
+          },
+          "loiane-angulartraining": {
+            "desc": "Free Angular course in Portuguese.",
+            "rev": true,
+            "title": "Loiane Training (Português)",
+            "url": "https://loiane.training/course/angular/"
+          }
+        }
+      },
+      "Workshops & Onsite Training": {
+        "order": 2,
+        "resources": {
+          "-acceleb": {
+            "desc": "Customized, Instructor-Led Angular Training",
+            "rev": true,
+            "title": "Accelebrate",
+            "url": "https://www.accelebrate.com/angular-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"
+          },
+          "at": {
+            "desc": "Angular Training teaches Angular on-site all over the world. Also provides consulting and mentoring.",
+            "rev": true,
+            "title": "Angular Training",
+            "url": "http://www.angulartraining.com"
+          },
+          "-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 through advanced Angular topics. It includes extensive workshop sessions, with hands-on help from our experienced developer-trainers. We take developers or teams from the beginnings of Angular understanding through a working knowledge of all essential Angular features.",
+            "logo": "https://angularbootcamp.com/images/angular-boot-camp-logo.svg",
+            "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/"
+          },
+          "formationjs": {
+            "desc": "Angular onsite training in Paris (France). Monthly Angular workshops and custom onsite classes. We are focused on Angular, so we are always up to date.",
+            "rev": true,
+            "title": "Formation JavaScript (French)",
+            "url": "https://formationjavascript.com/formation-angular/"
+          },
+          "wao": {
+            "desc": "Onsite Angular Training delivered by We Are One Sàrl in Switzerland",
+            "logo": "https://weareone.ch/wordpress/wao-content/uploads/2014/12/logo_200_2x.png",
+            "rev": true,
+            "title": "We Are One Sàrl",
+            "url": "https://weareone.ch/courses/angular/"
+          },
+          "angular-schule": {
+            "desc": "Angular onsite training and public workshops in Germany from the authors of the German Angular book. We also regularly post articles and videos on our blog (in English and German language).",
+            "logo": "https://angular.schule/assets/img/brand.svg",
+            "rev": true,
+            "title": "Angular.Schule (German)",
+            "url": "https://angular.schule/"
+          },
+          "strbrw": {
+            "desc": "Angular and RxJS trainings, Code Reviews and consultancy. We help software engineers all over the world to create better web-applications...",
+            "rev": true,
+            "title": "StrongBrew",
+            "url": "https://strongbrew.io/"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/aio/content/marketing/test.html b/aio/content/marketing/test.html
new file mode 100644
index 000000000000..271bd9be111e
--- /dev/null
+++ b/aio/content/marketing/test.html
@@ -0,0 +1,122 @@
+<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>
+<code-tabs >
+  <code-pane title='TS code file' language='ts'>
+  class {
+    foo(param: string) {}
+  }
+  </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='avoid'>{ "key": "value" }</code-pane>
+</code-tabs>
+<p></p>
+
+<p>linenums=true at code-tabs level</p>
+<code-tabs linenums='true'>
+  <code-pane title='TS code file' language='ts'>
+  class {
+    foo(param: string) {}
+  }
+  </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='avoid'>{ "key": "value" }</code-pane>
+</code-tabs>
+<p></p>
+
+<p>No linenums at code-tabs level; linenums=true for HTML pane</p>
+<code-tabs >
+  <code-pane title='TS code file' language='ts'>
+  class {
+    foo(param: string) {}
+  }
+  </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='avoid'>{ "key": "value" }</code-pane>
+</code-tabs>
+<p></p>
+
+<h2>&lt;code-example&gt;</h2>
+
+<p>One line.</p>
+<code-example>const foo = 'bar'</code-example>
+
+<p>Multi-line, linenums=false.</p>
+<code-example linenums='false'>
+&lt;hero-details <em>nghost-pmm-5&gt;
+  &lt;h2 </em>ngcontent-pmm-5&gt;Bah Dah Bing&lt;/h2&gt;
+  &lt;hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6&gt;
+    &lt;h3 _ngcontent-pmm-6&gt;Headless Team&lt;/h3&gt;
+  &lt;/hero-team&gt;
+&lt;/hero-details&gt;
+</code-example>
+
+<p>Default linenums.</p>
+<code-example>
+&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;
+    &lt;h3 _ngcontent-pmm-6&gt;Headless Team&lt;/h3&gt;
+  &lt;/hero-team&gt;
+&lt;/hero-details&gt;
+</code-example>
+
+<p>Header on this one.</p>
+<code-example title="hero-details.component.ts (excerpt)">
+  &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;
+      &lt;h3 _ngcontent-pmm-6&gt;Winning Team&lt;/h3&gt;
+    &lt;/hero-team&gt;
+  &lt;/hero-details&gt;
+</code-example>
+
+<p>An "avoid" header on this one.</p>
+<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;
+      &lt;h3 _ngcontent-pmm-6&gt;Losing Team&lt;/h3&gt;
+    &lt;/hero-team&gt;
+  &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>
+Try this <live-example></live-example>.
+
+<p>live-example with title atty</p>
+<live-example title="Good Example"></live-example>
+
+<p>live-example with title body</p>
+<live-example title="Good Example">Try this great example</live-example>
+
+<p>live-example with name</p>
+<live-example name="testy" title="Better Example"></live-example>
+
+<p>live-example with spacey name and stackblitz</p>
+<live-example name=" testy " stackblitz="super-stackblitz"></live-example>
+
+<p>live-example with name and stackblitz but no download</p>
+<live-example name="testy" stackblitz="super-stackblitz" noDownload></live-example>
+
+<p>live-example embedded with name and stackblitz</p>
+<live-example embedded name="testy" stackblitz="super-stackblitz"></live-example>
+
+<p>More text follows ...</p>
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
new file mode 100644
index 000000000000..fb14f51ddc9a
--- /dev/null
+++ b/aio/content/navigation.json
@@ -0,0 +1,667 @@
+{
+  "TopBar": [
+    {
+      "url": "features",
+      "title": "Features"
+    },
+    {
+      "url": "docs",
+      "title": "Docs"
+    },
+    {
+      "url": "resources",
+      "title": "Resources"
+    },
+    {
+      "url": "events",
+      "title": "Events"
+    },
+    {
+      "url": "https://blog.angular.io/",
+      "title": "Blog"
+    }
+  ],
+
+  "TopBarNarrow": [
+    {
+      "title": "About Angular",
+      "children": [
+        {
+          "url": "features",
+          "title": "Features"
+        },
+        {
+          "url": "resources",
+          "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-pt0",
+          "title": "2. The Application Shell",
+          "tooltip": "Part 2: Creating the application shell"
+        },
+        {
+          "url": "tutorial/toh-pt1",
+          "title": "3. The Hero Editor",
+          "tooltip": "Part 3: Build a simple hero editor"
+        },
+        {
+          "url": "tutorial/toh-pt2",
+          "title": "4. Displaying a List",
+          "tooltip": "Part 4: Build a master/detail page with a list of heroes."
+        },
+        {
+          "url": "tutorial/toh-pt3",
+          "title": "5. Master/Detail Components",
+          "tooltip": "Part 5: Refactor the master/detail view into separate components."
+        },
+        {
+          "url": "tutorial/toh-pt4",
+          "title": "6. Services",
+          "tooltip": "Part 6: Create a reusable service to manage hero data."
+        },
+        {
+          "url": "tutorial/toh-pt5",
+          "title": "7. Routing",
+          "tooltip": "Part 7: Add the Angular router and navigate among the views."
+        },
+        {
+          "url": "tutorial/toh-pt6",
+          "title": "8. HTTP",
+          "tooltip": "Part 8: Use HTTP to retrieve and save hero data."
+        }
+      ]
+    },
+
+    {
+      "title": "Fundamentals",
+      "tooltip": "The fundamentals of Angular",
+      "children": [
+        {
+          "title": "Architecture",
+          "tooltip": "The basic building blocks of Angular applications.",
+          "children": [
+            {
+              "url": "guide/architecture",
+              "title": "Architecture Overview",
+              "tooltip": "Basic building blocks of Angular applications."
+            },
+            {
+              "url": "guide/architecture-modules",
+              "title": "Intro to Modules",
+              "tooltip": "About NgModules."
+            },
+            {
+              "url": "guide/architecture-components",
+              "title": "Intro to Components",
+              "tooltip": "About Components, Templates, and Views."
+            },
+            {
+              "url": "guide/architecture-services",
+              "title": "Intro to Services and DI",
+              "tooltip": "About services and dependency injection."
+            },
+            {
+              "url": "guide/architecture-next-steps",
+              "title": "Next Steps",
+              "tooltip": "Beyond the basics."
+            }
+          ]
+        },
+        {
+          "title": "Components & Templates",
+          "tooltip": "Building dynamic views with 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/elements",
+              "title": "Angular Elements",
+              "tooltip": "Convert components to Custom Elements."
+            },
+            {
+              "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."
+            }
+          ]
+        },
+        {
+          "title": "Observables & RxJS",
+          "tooltip": "Observables & RxJS",
+          "children": [
+            {
+              "url": "guide/observables",
+              "title": "Observables",
+              "tooltip": ""
+            },
+            {
+              "url": "guide/rx-library",
+              "title": "The RxJS Library",
+              "tooltip": ""
+            },
+            {
+              "url": "guide/observables-in-angular",
+              "title": "Observables in Angular",
+              "tooltip": ""
+            },
+            {
+              "url": "guide/practical-observable-usage",
+              "title": "Practical Usage",
+              "tooltip": ""
+            },
+            {
+              "url": "guide/comparing-observables",
+              "title": "Compare to Other Techniques",
+              "tooltip": ""
+            }
+          ]
+        },
+
+        {
+          "url": "guide/bootstrapping",
+          "title": "Bootstrapping",
+          "tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
+        },
+        {
+
+          "title": "NgModules",
+          "tooltip": "NgModules.",
+          "children": [
+            {
+              "url": "guide/ngmodules",
+              "title": "NgModules Introduction",
+              "tooltip": "Use NgModules to make your apps efficient."
+            },
+            {
+              "url": "guide/ngmodule-vs-jsmodule",
+              "title": "JS Modules vs NgModules",
+              "tooltip": "Differentiate between JavaScript modules and NgModules."
+            },
+            {
+              "url": "guide/frequent-ngmodules",
+              "title": "Frequently Used NgModules",
+              "tooltip": "Introduction to the most frequently used NgModules."
+            },
+            {
+              "url": "guide/module-types",
+              "title": "Types of Feature Modules",
+              "tooltip": "Description of the different types of feature modules."
+            },
+            {
+              "url": "guide/entry-components",
+              "title": "Entry Components",
+              "tooltip": "All about entry components in Angular."
+            },
+            {
+              "url": "guide/feature-modules",
+              "title": "Feature Modules",
+              "tooltip": "Create feature modules to organize your code."
+            },
+            {
+              "url": "guide/providers",
+              "title": "Providers",
+              "tooltip": "Providers and NgModules."
+            },
+            {
+              "url": "guide/singleton-services",
+              "title": "Singleton Services",
+              "tooltip": "Creating singleton services."
+            },
+            {
+              "url": "guide/lazy-loading-ngmodules",
+              "title": "Lazy Loading Feature Modules",
+              "tooltip": "Lazy load modules to speed up your apps."
+            },
+            {
+              "url": "guide/sharing-ngmodules",
+              "title": "Sharing NgModules",
+              "tooltip": "Share NgModules to streamline your apps."
+            },
+            {
+              "url": "guide/ngmodule-api",
+              "title": "NgModule API",
+              "tooltip": "Understand the details of NgModules."
+            },
+            {
+              "url": "guide/ngmodule-faq",
+              "title": "NgModule FAQs",
+              "tooltip": "Answers to frequently asked questions about NgModules."
+            }
+        ]},
+
+        {
+          "title": "Dependency Injection",
+          "tooltip": "Dependency Injection: creating and injecting services",
+          "children": [
+            {
+              "url": "guide/dependency-injection-pattern",
+              "title": "The Dependency Injection pattern",
+              "tooltip": "Learn about the dependency injection pattern behind the Angular DI system."
+            },
+            {
+              "url": "guide/dependency-injection",
+              "title": "Angular Dependency Injection",
+              "tooltip": "Angular's dependency injection system creates and delivers dependent services to Angular-created classes."
+            },
+            {
+              "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."
+        },
+        {
+          "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": "Service Workers",
+          "tooltip": "Angular service workers: Controlling caching of application resources.",
+          "children": [
+            {
+              "url": "guide/service-worker-intro",
+              "title": "Introduction",
+              "tooltip": "Angular's implementation of service workers improves user experience with slow or unreliable network connectivity."
+            },
+            {
+              "url": "guide/service-worker-getting-started",
+              "title": "Getting Started",
+              "tooltip": "Enabling the service worker in a CLI project and observing behavior in the browser."
+            },
+            {
+              "url": "guide/service-worker-communications",
+              "title": "Service Worker Communication",
+              "tooltip": "Services that enable you to interact with an Angular service worker."
+            },
+            {
+              "url": "guide/service-worker-devops",
+              "title": "Service Worker in Production",
+              "tooltip": "Running applications with service workers, managing application update, debugging, and killing applications."
+            },
+            {
+              "url": "guide/service-worker-config",
+              "title": "Service Worker Configuration",
+              "tooltip": "Configuring service worker caching behavior."
+            }
+          ]
+        },
+
+        {
+          "title": "Keeping Up-to-Date",
+          "tooltip": "Angular release practices, planning for updates, and update resources.",
+          "children": [
+            {
+              "url": "guide/updating",
+              "title": "Updating Your Projects",
+              "tooltip": "Information about updating Angular applications and libraries to the latest version."
+            },
+            {
+              "url": "guide/releases",
+              "title": "Angular Releases",
+              "tooltip": "Angular versioning, release, support, and deprecation policies and practices."
+            }
+          ]
+        },
+
+        {
+          "title": "Upgrading from AngularJS",
+          "tooltip": "Incrementally upgrade an AngularJS application to Angular.",
+          "children": [
+            {
+              "url": "guide/upgrade",
+              "title": "Upgrading Instructions",
+              "tooltip": "Incrementally upgrade an AngularJS application to Angular."
+            },
+            {
+              "url": "guide/upgrade-performance",
+              "title": "Upgrading for Performance",
+              "tooltip": "Upgrade from AngularJS to Angular in a more flexible way."
+            },
+            {
+              "url": "guide/ajs-quick-reference",
+              "title": "AngularJS-Angular Concepts",
+              "tooltip": "Learn how AngularJS concepts and techniques map to Angular."
+            }
+          ]
+        },
+        {
+          "url": "guide/universal",
+          "title": "Server-side Rendering",
+          "tooltip": "Render HTML server-side with Angular Universal."
+        },
+        {
+          "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"
+    },
+    {
+      "url": "guide/change-log",
+      "title": "Change Log",
+      "tooltip": "Angular Documentation Change Log",
+      "hidden": true
+    }
+  ],
+
+  "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": "Press Kit",
+          "tooltip": "Press contacts, logos, and branding."
+        },
+        {
+          "url": "https://blog.angular.io/",
+          "title": "Blog",
+          "tooltip": "Angular Blog"
+        }
+      ]
+    },
+    {
+      "title": "Help",
+      "children": [
+        {
+          "url": "https://stackoverflow.com/questions/tagged/angular",
+          "title": "Stack Overflow",
+          "tooltip": "Stack Overflow: where the community answers your technical Angular questions."
+        },
+        {
+          "url": "https://gitter.im/angular/angular",
+          "title": "Gitter",
+          "tooltip": "Chat about Angular with other birds of a feather."
+        },
+        {
+          "url": "https://github.com/angular/angular/issues",
+          "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": "Community",
+      "children": [
+        {
+          "url": "events",
+          "title": "Events",
+          "tooltip": "Post issues and suggestions on github."
+        },
+        {
+          "url": "http://www.meetup.com/topics/angularjs/",
+          "title": "Meetups",
+          "tooltip": "Attend a meetup and learn from fellow developers."
+        },
+        {
+          "url": "https://twitter.com/angular",
+          "title": "Twitter",
+          "tooltip": "Twitter"
+        },
+        {
+          "url": "https://github.com/angular/angular",
+          "title": "GitHub",
+          "tooltip": "GitHub"
+        },
+        {
+          "url": "contribute",
+          "title": "Contribute",
+          "tooltip": "Contribute to Angular"
+        }
+      ]
+    },
+    {
+      "title": "Languages",
+      "children": [
+        {
+          "title": "中文版",
+          "url": "https://angular.cn/"
+        },
+        {
+          "title": "日本語版",
+          "url": "https://angular.jp/"
+        }
+      ]
+    }
+  ],
+
+  "docVersions": [
+    { "title": "v5", "url": "https://v5.angular.io" },
+    { "title": "v4", "url": "https://v4.angular.io" },
+    { "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
new file mode 100644
index 000000000000..5e82584693f6
--- /dev/null
+++ b/aio/content/tutorial/index.md
@@ -0,0 +1,70 @@
+<h1 class="no-toc">Tutorial: Tour of Heroes</h1>
+
+The _Tour of Heroes_ tutorial covers the fundamentals of Angular.  
+In this tutorial you will build an app that helps a staffing agency manage its stable of heroes.
+
+This basic app has many of the features you'd expect to find in a data-driven application.
+It acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data.
+
+By the end of the tutorial you will be able to do the following:
+
+* Use built-in Angular directives to show and hide elements and display lists of hero data.
+* Create Angular components to display hero details and show an array of heroes.
+* Use one-way data binding for read-only data.
+* Add editable fields to update a model with two-way data binding.
+* Bind component methods to user events, like keystrokes and clicks.
+* Enable users to select a hero from a master list and edit that hero in the details view. 
+* Format data with pipes.
+* Create a shared service to assemble the heroes.
+* Use routing to navigate among different views and their components.
+
+You'll learn enough Angular to get started and gain confidence that
+Angular can do whatever you need it to do. 
+
+After completing all tutorial steps, the final app will look like this <live-example name="toh-pt6"></live-example>.
+
+
+## What you'll build
+
+Here's a visual idea of where this tutorial leads, beginning with the "Dashboard"
+view and the most heroic heroes:
+
+<figure>
+  <img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard">
+</figure>
+
+You can click the two links above the dashboard ("Dashboard" and "Heroes")
+to navigate between this Dashboard view and a Heroes view.
+
+If you click the dashboard hero "Magneta," the router opens a "Hero Details" view
+where you can change the hero's name.
+
+<figure>
+  <img src='generated/images/guide/toh/hero-details-1.png' alt="Details of hero in app">
+</figure>
+
+Clicking the "Back" button returns you to the Dashboard.
+Links at the top take you to either of the main views.
+If you click "Heroes," the app displays the "Heroes" master list view.
+
+
+<figure>
+  <img src='generated/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app">
+</figure>
+
+When you click a different hero name, the read-only mini detail beneath the list reflects the new choice.
+
+You can click the "View Details" button to drill into the
+editable details of the selected hero.
+
+The following diagram captures all of the navigation options.
+
+<figure>
+  <img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
+</figure>
+
+Here's the app in action:
+
+<figure>
+  <img src='generated/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action">
+</figure>
diff --git a/aio/content/tutorial/toh-pt0.md b/aio/content/tutorial/toh-pt0.md
new file mode 100644
index 000000000000..0079060c607b
--- /dev/null
+++ b/aio/content/tutorial/toh-pt0.md
@@ -0,0 +1,131 @@
+# The Application Shell
+
+## Install the Angular CLI
+
+ Install the [Angular CLI](https://github.com/angular/angular-cli), if you haven't already done so.
+
+<code-example language="sh" class="code-shell">
+  npm install -g @angular/cli
+</code-example>  
+
+## Create a new application
+
+Create a new project named `angular-tour-of-heroes` with this CLI command.
+
+<code-example language="sh" class="code-shell">
+  ng new angular-tour-of-heroes
+</code-example> 
+
+The Angular CLI generated a new project with a default application and supporting files. 
+
+
+<div class="alert is-helpful">
+
+
+
+You can add pre-packaged functionality to a new project by using the `ng add` command. The `ng add` command transforms a project by applying the schematics in the specified package. 
+For more information, see the [Angular CLI documentation.](https://github.com/angular/angular-cli/wiki/add "Angular CLI documentation") 
+
+Angular Material provides schematics for typical app layouts. 
+See the [Angular Material documentation](https://material.angular.io/guides "Angular Material documentation") for details.
+
+</div>
+
+
+## Serve the application
+
+Go to the project directory and launch the application.
+
+<code-example language="sh" class="code-shell">
+  cd angular-tour-of-heroes
+  ng serve --open
+</code-example>
+ 
+<div class="alert is-helpful">
+
+The `ng serve` command builds the app, starts the development server,
+watches the source files, and rebuilds the app as you make changes to those files.
+
+The `--open` flag  opens a browser to `http://localhost:4200/`.
+
+</div>
+
+You should see the app running in your browser.
+
+## Angular components
+
+The page you see is the _application shell_.
+The shell is controlled by an Angular **component** named `AppComponent`.
+
+_Components_ are the fundamental building blocks of Angular applications.
+They display data on the screen, listen for user input, and take action based on that input.
+
+## Change the application title
+
+Open the project in your favorite editor or IDE and navigate to the `src/app` folder.
+
+You'll find the implementation of the shell `AppComponent` distributed over three files:
+
+1. `app.component.ts`&mdash; the component class code, written in TypeScript. 
+1. `app.component.html`&mdash; the component template, written in HTML.
+1. `app.component.css`&mdash; the component's private CSS styles.
+
+
+Open the component class file (`app.component.ts`) and change the value of the `title` property to 'Tour of Heroes'.
+
+<code-example path="toh-pt0/src/app/app.component.ts" region="set-title" title="app.component.ts (class title property)" linenums="false">
+</code-example>
+
+Open the component template file (`app.component.html`) and
+delete the default template generated by the Angular CLI.
+Replace it with the following line of HTML.
+
+<code-example path="toh-pt0/src/app/app.component.html" 
+  title="app.component.html (template)" linenums="false">
+</code-example>
+
+The double curly braces are Angular's *interpolation binding* syntax. 
+This interpolation binding presents the component's `title` property value 
+inside the HTML header tag.
+
+The browser refreshes and displays the new application title.
+
+{@a app-wide-styles}
+
+## Add application styles
+
+Most apps strive for a consistent look across the application.
+The CLI generated an empty `styles.css` for this purpose.
+Put your application-wide styles there.
+
+Here's an excerpt from the `styles.css` for the _Tour of Heroes_ sample app.
+
+<code-example path="toh-pt0/src/styles.1.css" title="src/styles.css (excerpt)">
+</code-example>
+
+## Final code review
+
+The source code for this tutorial and the complete _Tour of Heroes_ global styles 
+are available in the <live-example></live-example>. 
+
+Here are the code files discussed on this page. 
+
+<code-tabs>
+
+  <code-pane title="src/app/app.component.ts" path="toh-pt0/src/app/app.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/app.component.html" path="toh-pt0/src/app/app.component.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/styles.css (excerpt)" 
+    path="toh-pt0/src/styles.1.css">
+  </code-pane>
+</code-tabs>
+
+## Summary
+
+* You created the initial application structure using the Angular CLI.
+* You learned that Angular components display data.
+* You used the double curly braces of interpolation to display the app title. 
diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md
new file mode 100644
index 000000000000..b581fc2feaa9
--- /dev/null
+++ b/aio/content/tutorial/toh-pt1.md
@@ -0,0 +1,256 @@
+# The Hero Editor
+
+The application now has a basic title.
+Next you will create a new component to display hero information
+and place that component in the application shell.
+
+## Create the heroes component
+
+Using the Angular CLI, generate a new component named `heroes`.
+
+<code-example language="sh" class="code-shell">
+  ng generate component heroes
+</code-example>
+
+The CLI creates a new folder, `src/app/heroes/` and generates
+the three files of the  `HeroesComponent`.
+
+The `HeroesComponent` class file is as follows:
+
+<code-example 
+  path="toh-pt1/src/app/heroes/heroes.component.ts" region="v1" 
+  title="app/heroes/heroes.component.ts (initial version)" linenums="false">
+</code-example>
+
+You always import the `Component` symbol from the Angular core library
+and annotate the component class with `@Component`.
+
+`@Component` is a decorator function that specifies the Angular metadata for the component.
+
+The CLI generated three metadata properties:
+
+1. `selector`&mdash; the component's CSS element selector
+1. `templateUrl`&mdash; the location of the component's template file.
+1. `styleUrls`&mdash; the location of the component's private CSS styles.
+
+{@a selector}
+
+The [CSS element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors),
+`'app-heroes'`, matches the name of the HTML element that identifies this component within a parent component's template.
+
+The `ngOnInit` is a [lifecycle hook](guide/lifecycle-hooks#oninit) 
+Angular calls `ngOnInit` shortly after creating a component.
+It's a good place to put initialization logic.
+
+Always `export` the component class so you can `import` it elsewhere ... like in the `AppModule`.
+
+### Add a _hero_ property
+
+Add a `hero` property to the `HeroesComponent` for a hero named "Windstorm."
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" title="heroes.component.ts (hero property)" linenums="false">
+</code-example>
+
+### Show the hero
+
+Open the `heroes.component.html` template file.
+Delete the default text generated by the Angular CLI and 
+replace it with a data binding to the new `hero` property.  
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" title="heroes.component.html" region="show-hero-1" linenums="false">
+</code-example>
+
+## Show the _HeroesComponent_ view
+
+To display the `HeroesComponent`, you must add it to the template of the shell `AppComponent`.
+
+Remember that `app-heroes` is the [element selector](#selector) for the `HeroesComponent`. 
+So add an `<app-heroes>` element to the `AppComponent` template file, just below the title.
+
+<code-example path="toh-pt1/src/app/app.component.html" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+Assuming that the CLI `ng serve` command is still running,
+the browser should refresh and display both the application title and the hero name.
+
+## Create a Hero class
+
+A real hero is more than a name.
+
+Create a `Hero` class in its own file in the `src/app` folder.
+Give it `id` and `name` properties.
+
+<code-example path="toh-pt1/src/app/hero.ts"  title="src/app/hero.ts" linenums="false">
+</code-example>
+
+
+Return to the `HeroesComponent` class and import the `Hero` class.
+
+Refactor the component's `hero` property to be of type `Hero`.
+Initialize it with an `id` of `1` and the name `Windstorm`.
+
+The revised `HeroesComponent` class file should look like this:
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" linenums="false"
+  title= "src/app/heroes/heroes.component.ts">
+</code-example>
+
+The page no longer displays properly because you changed the hero from a string to an object.
+
+## Show the hero object
+
+Update the binding in the template to announce the hero's name
+and show both `id` and `name` in a details layout like this:
+
+<code-example 
+  path="toh-pt1/src/app/heroes/heroes.component.1.html"
+  region="show-hero-2" 
+  title="heroes.component.html (HeroesComponent's template)" linenums="false">
+</code-example>
+
+The browser refreshes and display's the hero's information.
+
+## Format with the _UppercasePipe_
+
+Modify the `hero.name` binding like this.
+<code-example
+  path="toh-pt1/src/app/heroes/heroes.component.html"
+  region="pipe">
+</code-example>
+
+The browser refreshes and now the hero's name is displayed in capital letters.
+
+The word `uppercase` in the interpolation binding, 
+right after the pipe operator ( | ),
+activates the built-in `UppercasePipe`.
+
+[Pipes](guide/pipes) are a good way to format strings, currency amounts, dates and other display data.
+Angular ships with several built-in pipes and you can create your own.
+
+## Edit the hero
+
+Users should be able to edit the hero name in an `<input>` textbox.
+
+The textbox should both _display_ the hero's `name` property
+and _update_ that property as the user types.
+That means data flow from the component class _out to the screen_ and
+from the screen _back to the class_.
+
+To automate that data flow, setup a two-way data binding between the `<input>` form element and the `hero.name` property.
+
+### Two-way binding
+
+Refactor the details area in the `HeroesComponent` template so it looks like this:
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" title="src/app/heroes/heroes.component.html (HeroesComponent's template)" linenums="false">
+
+</code-example>
+
+**[(ngModel)]** is Angular's two-way data binding syntax. 
+
+Here it binds the `hero.name` property to the HTML textbox so that data can flow _in both directions:_ from the `hero.name` property to the textbox, and from the textbox back to the `hero.name`.
+
+### The missing _FormsModule_
+
+Notice that the app stopped working when you added `[(ngModel)]`.
+
+To see the error, open the browser development tools and look in the console
+for a message like
+
+<code-example language="sh" class="code-shell">
+Template parse errors:
+Can't bind to 'ngModel' since it isn't a known property of 'input'.
+</code-example>
+
+Although `ngModel` is a valid Angular directive, it isn't available by default. 
+
+It belongs to the optional `FormsModule` and you must _opt-in_ to using it.
+
+## _AppModule_
+
+Angular needs to know how the pieces of your application fit together
+and what other files and libraries the app requires.
+This information is called _metadata_
+
+Some of the metadata is in the `@Component` decorators that you added to your component classes.
+Other critical metadata is in [`@NgModule`](guide/ngmodules) decorators.
+
+The most important `@NgModule` decorator annotates the top-level **AppModule** class.
+
+The Angular CLI generated an `AppModule` class in `src/app/app.module.ts` when it created the project.
+This is where you _opt-in_ to the `FormsModule`.
+
+### Import _FormsModule_
+
+Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the `@angular/forms` library. 
+
+<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts (FormsModule symbol import)"
+ region="formsmodule-js-import">
+</code-example>
+
+Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs.
+
+<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts ( @NgModule imports)"
+region="ng-imports">
+</code-example>
+
+When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `<h2>` above the textbox.
+
+### Declare _HeroesComponent_ 
+
+Every component must be declared in _exactly one_ [NgModule](guide/ngmodules).
+
+_You_ didn't declare the `HeroesComponent`.
+So why did the application work?
+
+It worked because the Angular CLI declared `HeroesComponent` in the `AppModule` when it generated that component.
+
+Open `src/app/app.module.ts` and find `HeroesComponent` imported near the top.
+<code-example path="toh-pt1/src/app/app.module.ts" region="heroes-import" >
+</code-example>
+
+The `HeroesComponent` is declared in the `@NgModule.declarations` array.
+<code-example path="toh-pt1/src/app/app.module.ts" region="declarations">
+</code-example>
+
+Note that `AppModule`  declares both application components, `AppComponent` and `HeroesComponent`.
+
+
+## Final code review
+
+Your app should look like this <live-example></live-example>. Here are the code files discussed on this page.
+
+<code-tabs>
+
+  <code-pane title="src/app/heroes/heroes.component.ts" path="toh-pt1/src/app/heroes/heroes.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/heroes.component.html" path="toh-pt1/src/app/heroes/heroes.component.html">
+  </code-pane>
+
+  <code-pane title="src/app/app.module.ts" 
+  path="toh-pt1/src/app/app.module.ts">
+  </code-pane>
+
+  <code-pane title="src/app/app.component.ts" path="toh-pt1/src/app/app.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/app.component.html" path="toh-pt1/src/app/app.component.html">
+  </code-pane>
+
+  <code-pane title="src/app/hero.ts" 
+  path="toh-pt1/src/app/hero.ts">
+  </code-pane>
+
+</code-tabs>
+
+## Summary
+
+* You used the CLI to create a second `HeroesComponent`.
+* You displayed the `HeroesComponent` by adding it to the `AppComponent` shell. 
+* You applied the `UppercasePipe` to format the name.
+* You used two-way data binding with the `ngModel` directive.
+* You learned about the `AppModule`.
+* You imported the `FormsModule` in the `AppModule` so that Angular would recognize and apply the `ngModel` directive. 
+* You learned the importance of declaring components in the `AppModule`
+and appreciated that the CLI declared it for you.
diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md
new file mode 100644
index 000000000000..48e3a0d154e8
--- /dev/null
+++ b/aio/content/tutorial/toh-pt2.md
@@ -0,0 +1,256 @@
+# Display a Heroes List
+
+In this page, you'll expand the Tour of Heroes app to display a list of heroes, and
+allow users to select a hero and display the hero's details.
+
+
+## Create mock heroes
+
+You'll need some heroes to display.
+
+Eventually you'll get them from a remote data server.
+For now, you'll create some _mock heroes_ and pretend they came from the server.
+
+Create a file called `mock-heroes.ts` in the `src/app/` folder.
+Define a `HEROES` constant as an array of ten heroes and export it.
+The file should look like this.
+
+<code-example path="toh-pt2/src/app/mock-heroes.ts" linenums="false"
+title="src/app/mock-heroes.ts">
+</code-example>
+
+## Displaying heroes
+
+You're about to display the list of heroes at the top of the `HeroesComponent`.
+
+Open the `HeroesComponent` class file and import the mock `HEROES`.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="import-heroes" title="src/app/heroes/heroes.component.ts (import HEROES)">
+</code-example>
+
+Add a `heroes` property to the class that exposes these heroes for binding.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="heroes">
+</code-example>
+
+### List heroes with _*ngFor_
+
+Open the `HeroesComponent` template file and make the following changes:
+
+* Add an `<h2>` at the top, 
+* Below it add an HTML unordered list (`<ul>`)
+* Insert an `<li>` within the `<ul>` that displays properties of a `hero`.
+* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
+
+Make it look like this:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="list" title="heroes.component.html (heroes template)" linenums="false">
+</code-example>
+
+Now change the `<li>` to this:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li">
+</code-example>
+
+The [`*ngFor`](guide/template-syntax#ngFor) is Angular's _repeater_ directive. 
+It repeats the host element for each element in a list.
+
+In this example
+
+* `<li>` is the host element
+* `heroes` is the list from the `HeroesComponent` class.
+* `hero` holds the current hero object for each iteration through the list. 
+
+<div class="alert is-important">
+
+Don't forget the asterisk (*) in front of `ngFor`. It's a critical part of the syntax.
+
+</div>
+
+After the browser refreshes, the list of heroes appears.
+
+{@a styles}
+
+### Style the heroes
+
+The heroes list should be attractive and should respond visually when users 
+hover over and select a hero from the list.
+
+In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`.
+That stylesheet didn't include styles for this list of heroes.
+
+You could add more styles to `styles.css` and keep growing that stylesheet as you add components.
+
+You may prefer instead to define private styles for a specific component and keep everything a component needs&mdash; the code, the HTML,
+and the CSS &mdash;together in one place.
+
+This approach makes it easier to re-use the component somewhere else
+and deliver the component's intended appearance even if the global styles are different.
+
+You define private styles either inline in the `@Component.styles` array or
+as stylesheet file(s) identified in the `@Component.styleUrls` array.
+
+When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent`
+and pointed to it in `@Component.styleUrls` like this.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="metadata"
+ title="src/app/heroes/heroes.component.ts (@Component)">
+</code-example>
+
+Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`.
+You'll find them in the [final code review](#final-code-review) at the bottom of this guide.
+
+<div class="alert is-important">
+
+Styles and stylesheets identified in `@Component` metadata are scoped to that specific component.
+The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component.
+
+</div>
+
+## Master/Detail
+
+When the user clicks a hero in the **master** list, 
+the component should display the selected hero's **details** at the bottom of the page.
+
+In this section, you'll listen for the hero item click event
+and update the hero detail.
+
+### Add a click event binding
+
+Add a click event binding to the `<li>` like this:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" title="heroes.component.html (template excerpt)" linenums="false">
+</code-example>
+
+This is an example of Angular's [event binding](guide/template-syntax#event-binding) syntax.
+
+The parentheses around `click` tell Angular to listen for the `<li>` element's  `click` event.
+When the user clicks in the `<li>`, Angular executes the `onSelect(hero)` expression.
+
+`onSelect()` is a `HeroesComponent` method that you're about to write.
+Angular calls it with the `hero` object displayed in the clicked `<li>`,
+the same `hero` defined previously in the `*ngFor` expression.
+
+### Add the click event handler
+
+Rename the component's `hero` property to `selectedHero` but don't assign it.
+There is no _selected hero_ when the application starts.
+
+Add the following `onSelect()` method, which assigns the clicked hero from the template
+to the component's `selectedHero`.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="on-select" title="src/app/heroes/heroes.component.ts (onSelect)" linenums="false">
+</code-example>
+
+### Update the details template
+
+The template still refers to the component's old `hero` property which no longer exists. 
+Rename `hero` to `selectedHero`.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" title="heroes.component.html (selected hero details)" linenums="false">
+</code-example>
+
+### Hide empty details with _*ngIf_
+
+After the browser refreshes, the application is broken.
+
+Open the browser developer tools and look in the console for an error message like this:
+
+<code-example language="sh" class="code-shell">
+  HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
+</code-example>
+
+Now click one of the list items.
+The app seems to be working again.
+The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
+
+#### What happened?
+
+When the app starts, the `selectedHero` is `undefined` _by design_.
+
+Binding expressions in the template that refer to properties of `selectedHero` &mdash; expressions like `{{selectedHero.name}}` &mdash; _must fail_ because there is no selected hero.
+
+#### The fix
+
+The component should only display the selected hero details if the `selectedHero` exists.
+
+Wrap the hero detail HTML in a `<div>`.
+Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
+
+<div class="alert is-important">
+
+Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.
+
+</div>
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="ng-if" title="src/app/heroes/heroes.component.html (*ngIf)" linenums="false">
+</code-example>
+
+After the browser refreshes, the list of names reappears.
+The details area is blank.
+Click a hero and its details appear.
+
+#### Why it works
+
+When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to worry about.
+
+When the user picks a hero, `selectedHero` has a value and
+`ngIf` puts the hero detail into the DOM.
+
+### Style the selected hero
+
+It's difficult to identify the _selected hero_ in the list when all `<li>` elements look alike.
+
+If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this:
+
+<figure>
+
+  <img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
+
+</figure>
+
+That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).
+You just have to apply the `.selected` class to the `<li>` when the user clicks it.
+
+The Angular [class binding](guide/template-syntax#class-binding) makes it easy to add and remove a CSS class conditionally. 
+Just add `[class.some-css-class]="some-condition"` to the element you want to style.
+
+Add the following `[class.selected]` binding to  the `<li>` in the `HeroesComponent` template:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" title="heroes.component.html (toggle the 'selected' CSS class)" linenums="false">
+</code-example>
+
+When the current row hero is the same as the `selectedHero`, Angular adds the `selected` CSS class. When the two heroes are different, Angular removes the class.
+
+The finished `<li>` looks like this:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="li" title="heroes.component.html (list item hero)" linenums="false">
+
+</code-example>
+
+{@a final-code-review}
+
+## Final code review
+
+Your app should look like this <live-example></live-example>. 
+
+Here are the code files discussed on this page, including the `HeroesComponent` styles.
+
+<code-tabs>
+  <code-pane title="src/app/heroes/heroes.component.ts" path="toh-pt2/src/app/heroes/heroes.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/heroes.component.html" path="toh-pt2/src/app/heroes/heroes.component.html">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/heroes.component.css" path="toh-pt2/src/app/heroes/heroes.component.css">
+  </code-pane>
+</code-tabs>
+
+## Summary
+
+* The Tour of Heroes app displays a list of heroes in a Master/Detail view.
+* The user can select a hero and see that hero's details.
+* You used `*ngFor` to display a list.
+* You used `*ngIf` to conditionally include or exclude a block of HTML.
+* You can toggle a CSS style class with a `class` binding.
diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md
new file mode 100644
index 000000000000..ff53e9a0323c
--- /dev/null
+++ b/aio/content/tutorial/toh-pt3.md
@@ -0,0 +1,160 @@
+# Master/Detail Components
+
+At the moment, the `HeroesComponent` displays both the list of heroes and the selected hero's details. 
+
+Keeping all features in one component as the application grows will not be maintainable.
+You'll want to split up large components into smaller sub-components, each focused on a specific task or workflow.
+
+In this page, you'll take the first step in that direction by moving the hero details into a separate, reusable `HeroDetailComponent`.
+
+The `HeroesComponent` will only present the list of heroes.
+The `HeroDetailComponent` will present details of a selected hero.
+
+## Make the `HeroDetailComponent`
+
+Use the Angular CLI to generate a new component named `hero-detail`.
+
+<code-example language="sh" class="code-shell">
+  ng generate component hero-detail
+</code-example>
+
+The command scaffolds the `HeroDetailComponent` files and declares the component in `AppModule`.
+
+### Write the template
+
+Cut the HTML for the hero detail from the bottom of the `HeroesComponent` template and paste it over the generated boilerplate in the `HeroDetailComponent` template.
+
+The pasted HTML refers to a `selectedHero`.
+The new `HeroDetailComponent` can present _any_ hero, not just a selected hero.
+So replace "selectedHero" with "hero" everywhere in the template. 
+
+When you're done, the `HeroDetailComponent` template should look like this:
+
+<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.html" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
+
+</code-example>
+
+### Add the `@Input()` hero property
+
+The `HeroDetailComponent` template binds to the component's `hero` property
+which is of type `Hero`.
+
+Open the `HeroDetailComponent` class file and import the `Hero` symbol.
+
+<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.ts" 
+region="import-hero" title="src/app/hero-detail/hero-detail.component.ts (import Hero)">
+</code-example>
+
+The `hero` property 
+[must be an _Input_ property](guide/template-syntax#inputs-outputs "Input and Output properties"),
+annotated with the `@Input()` decorator,
+because the _external_ `HeroesComponent` [will bind to it](#heroes-component-template) like this.
+
+<code-example path="toh-pt3/src/app/heroes/heroes.component.html" region="hero-detail-binding">
+</code-example>
+
+Amend the `@angular/core` import statement to include the `Input` symbol.
+
+<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.ts" region="import-input" title="src/app/hero-detail/hero-detail.component.ts (import Input)" linenums="false">
+</code-example>
+
+Add a `hero` property, preceded by the `@Input()` decorator.
+
+<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.ts" region="input-hero"  linenums="false">
+</code-example>
+
+That's the only change you should make to the `HeroDetailComponent` class.
+There are no more properties. There's no presentation logic. 
+This component simply receives a hero object through its `hero` property and displays it.
+
+## Show the `HeroDetailComponent`
+
+The `HeroesComponent` is still a master/detail view. 
+
+It used to display the hero details on its own, before you cut that portion of the template. Now it will delegate to the `HeroDetailComponent`.
+
+The two components will have a parent/child relationship.
+The parent `HeroesComponent` will control the child `HeroDetailComponent` 
+by sending it a new hero to display whenever
+the user selects a hero from the list.
+
+You won't change the `HeroesComponent` _class_ but you will change its _template_.
+
+{@a heroes-component-template}
+
+### Update the `HeroesComponent` template
+
+The `HeroDetailComponent` selector is `'app-hero-detail'`.
+Add an `<app-hero-detail>` element near the bottom of the `HeroesComponent` template, where the hero detail view used to be.
+
+Bind the `HeroesComponent.selectedHero` to the element's `hero` property like this.
+
+<code-example path="toh-pt3/src/app/heroes/heroes.component.html" region="hero-detail-binding" title="heroes.component.html (HeroDetail binding)">
+
+</code-example>
+
+`[hero]="selectedHero"` is an Angular [property binding](guide/template-syntax#property-binding).
+
+It's a _one way_ data binding from
+the `selectedHero` property of the `HeroesComponent` to the `hero` property of the target element, which maps to the `hero` property of the `HeroDetailComponent`.
+
+Now when the user clicks a hero in the list, the `selectedHero` changes.
+When the `selectedHero` changes, the _property binding_ updates `hero`
+and the `HeroDetailComponent` displays the new hero.
+
+The revised `HeroesComponent` template should look like this:
+
+<code-example path="toh-pt3/src/app/heroes/heroes.component.html"
+  title="heroes.component.html" linenums="false">
+</code-example>
+
+The browser refreshes and the app starts working again as it did before.
+
+## What changed?
+
+As [before](tutorial/toh-pt2), whenever a user clicks on a hero name,
+the hero detail appears below the hero list.
+Now the `HeroDetailComponent` is presenting those details instead of the `HeroesComponent`.
+
+Refactoring the original `HeroesComponent` into two components yields benefits, both now and in the future:
+
+1. You simplified the `HeroesComponent` by reducing its responsibilities.
+
+1. You can evolve the `HeroDetailComponent` into a rich hero editor
+without touching the parent `HeroesComponent`.
+
+1. You can evolve the `HeroesComponent` without touching the hero detail view.
+
+1. You can re-use the `HeroDetailComponent` in the template of some future component.
+
+## Final code review
+
+Here are the code files discussed on this page and your app should look like this <live-example></live-example>.
+
+<code-tabs>
+
+  <code-pane title="src/app/hero-detail/hero-detail.component.ts" path="toh-pt3/src/app/hero-detail/hero-detail.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/hero-detail/hero-detail.component.html" path="toh-pt3/src/app/hero-detail/hero-detail.component.html">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/heroes.component.html" path="toh-pt3/src/app/heroes/heroes.component.html">
+  </code-pane>
+
+  <code-pane title="src/app/app.module.ts" path="toh-pt3/src/app/app.module.ts">
+  </code-pane>
+
+</code-tabs>
+
+## Summary
+
+* You created a separate, reusable `HeroDetailComponent`.
+
+
+* You used a [property binding](guide/template-syntax#property-binding) to give the parent `HeroesComponent` control over the child `HeroDetailComponent`.
+
+
+* You used the [`@Input` decorator](guide/template-syntax#inputs-outputs) 
+to make the `hero` property available for binding
+by the external `HeroesComponent`.
diff --git a/aio/content/tutorial/toh-pt4.md b/aio/content/tutorial/toh-pt4.md
new file mode 100644
index 000000000000..a382104e3170
--- /dev/null
+++ b/aio/content/tutorial/toh-pt4.md
@@ -0,0 +1,438 @@
+# Services
+
+The Tour of Heroes `HeroesComponent` is currently getting and displaying fake data.
+
+After the refactoring in this tutorial, `HeroesComponent` will be lean and focused on supporting the view.
+It will also be easier to unit-test with a mock service.
+
+## Why services
+
+Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data.
+They should focus on presenting data and delegate data access to a service.
+
+In this tutorial, you'll create a `HeroService` that all application classes can use to get heroes.
+Instead of creating that service with `new`, 
+you'll rely on Angular [*dependency injection*](guide/dependency-injection) 
+to inject it into the `HeroesComponent` constructor.
+
+Services are a great way to share information among classes that _don't know each other_.
+You'll create a `MessageService` and inject it in two places:
+
+1. in `HeroService` which uses the service to send a message.
+2. in `MessagesComponent` which displays that message.
+
+
+## Create the _HeroService_
+
+Using the Angular CLI, create a service called `hero`.
+
+<code-example language="sh" class="code-shell">
+  ng generate service hero
+</code-example>
+
+The command generates skeleton `HeroService` class in `src/app/hero.service.ts`
+The `HeroService` class should look like the following example.
+
+<code-example path="toh-pt4/src/app/hero.service.1.ts" region="new"
+ title="src/app/hero.service.ts (new service)" linenums="false">
+</code-example>
+
+### _@Injectable()_ services
+
+Notice that the new service imports the Angular `Injectable` symbol and annotates
+the class with the `@Injectable()` decorator. This marks the class as one that participates in the _dependency injection system_. The `HeroService` class is going to provide an injectable service, and it can also have its own injected dependencies.
+It doesn't have any dependencies yet, but [it will soon](#inject-message-service).
+
+The `@Injectable()` decorator accepts a metadata object for the service, the same way the `@Component()` decorator did for your component classes. 
+
+### Get hero data
+
+The `HeroService` could get hero data from anywhere&mdash;a web service, local storage, or a mock data source. 
+
+Removing data access from components means you can change your mind about the implementation anytime, without touching any components.
+They don't know how the service works.
+
+The implementation in _this_ tutorial will continue to deliver _mock heroes_.
+
+Import the `Hero` and `HEROES`.
+
+<code-example path="toh-pt4/src/app/hero.service.ts" region="import-heroes">
+</code-example>
+
+Add a `getHeroes` method to return the _mock heroes_.
+
+<code-example path="toh-pt4/src/app/hero.service.1.ts" region="getHeroes">
+</code-example>
+
+{@a provide}
+## Provide the `HeroService`
+
+You must make the `HeroService` available to the dependency injection system 
+before Angular can _inject_ it into the `HeroesComponent`, 
+as you will do [below](#inject). You do this by registering a _provider_. A provider is something that can create or deliver a service; in this case, it instantiates the `HeroService` class to provide the service.
+
+Now, you need to make sure that the `HeroService` is registered as the provider of this service. 
+You are registering it with an _injector_, which is the object that is responsible for choosing and injecting the provider where it is required. 
+
+By default, the Angular CLI command `ng generate service` registers a provider with the _root injector_ for your service by including provider metadata in the `@Injectable` decorator. 
+
+If you look at the `@Injectable()` statement right before the `HeroService` class definition, you can see that the `providedIn` metadata value is 'root':    
+
+```
+@Injectable({
+  providedIn: 'root',
+})
+```
+
+When you provide the service at the root level, Angular creates a single, shared instance of `HeroService` and injects into any class that asks for it. 
+Registering the provider in the `@Injectable` metadata also allows Angular to optimize an app by removing the service if it turns out not to be used after all. 
+
+<div class="alert is-helpful">
+
+To learn more about providers, see the [Providers section](guide/providers).
+To learn more about injectors, see the [Dependency Injection guide](guide/dependency-injection).
+
+</div>
+
+The `HeroService` is now ready to plug into the `HeroesComponent`.
+
+<div class="alert is-important">
+
+This is a interim code sample that will allow you to provide and use the `HeroService`.  At this point, the code will differ from the `HeroService` in the ["final code review"](#final-code-review).
+
+</div>
+
+
+## Update `HeroesComponent`
+
+Open the `HeroesComponent` class file.
+
+Delete the `HEROES` import, because you won't need that anymore.
+Import the `HeroService` instead.
+
+<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" title="src/app/heroes/heroes.component.ts (import HeroService)" region="hero-service-import">
+</code-example>
+
+Replace the definition of the `heroes` property with a simple declaration.
+
+<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" region="heroes">
+</code-example>
+
+{@a inject}
+
+### Inject the `HeroService`
+
+Add a private `heroService` parameter of type `HeroService` to the constructor.
+
+<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" region="ctor">
+</code-example>
+
+The parameter simultaneously defines a private `heroService` property and identifies it as a `HeroService` injection site.
+
+When Angular creates a `HeroesComponent`, the [Dependency Injection](guide/dependency-injection) system
+sets the `heroService` parameter to the singleton instance of `HeroService`. 
+
+### Add _getHeroes()_
+
+Create a function to retrieve the heroes from the service.
+
+<code-example path="toh-pt4/src/app/heroes/heroes.component.1.ts" region="getHeroes">
+</code-example>
+
+{@a oninit}
+
+### Call it in `ngOnInit`
+
+While you could call `getHeroes()` in the constructor, that's not the best practice.
+
+Reserve the constructor for simple initialization such as wiring constructor parameters to properties.
+The constructor shouldn't _do anything_.
+It certainly shouldn't call a function that makes HTTP requests to a remote server as a _real_ data service would.
+
+Instead, call `getHeroes()` inside the [*ngOnInit lifecycle hook*](guide/lifecycle-hooks) and
+let Angular call `ngOnInit` at an appropriate time _after_ constructing a `HeroesComponent` instance.
+
+<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" region="ng-on-init">
+</code-example>
+
+### See it run
+
+After the browser refreshes, the app should run as before, 
+showing a list of heroes and a hero detail view when you click on a hero name.
+
+## Observable data
+
+The `HeroService.getHeroes()` method has a _synchronous signature_,
+which implies that the `HeroService` can fetch heroes synchronously.
+The `HeroesComponent` consumes the `getHeroes()` result 
+as if heroes could be fetched synchronously.
+
+<code-example path="toh-pt4/src/app/heroes/heroes.component.1.ts" region="get-heroes">
+</code-example>
+
+This will not work in a real app.
+You're getting away with it now because the service currently returns _mock heroes_.
+But soon the app will fetch heroes from a remote server, 
+which is an inherently _asynchronous_ operation.
+
+The `HeroService` must wait for the server to respond,
+`getHeroes()` cannot return immediately with hero data,
+and the browser will not block while the service waits.
+
+`HeroService.getHeroes()` must have an _asynchronous signature_ of some kind.
+
+It can take a callback. It could return a `Promise`. It could return an `Observable`.
+
+In this tutorial, `HeroService.getHeroes()` will return an `Observable`
+in part because it will eventually use the Angular `HttpClient.get` method to fetch the heroes
+and [`HttpClient.get()` returns an `Observable`](guide/http).
+
+### Observable _HeroService_
+
+`Observable` is one of the key classes in the [RxJS library](http://reactivex.io/rxjs/).
+
+In a [later tutorial on HTTP](tutorial/toh-pt6), you'll learn that Angular's `HttpClient` methods return RxJS `Observable`s.
+In this tutorial, you'll simulate getting data from the server with the RxJS `of()` function.
+
+Open the `HeroService` file and import the `Observable` and `of` symbols from RxJS.
+
+<code-example path="toh-pt4/src/app/hero.service.ts" 
+title="src/app/hero.service.ts (Observable imports)" region="import-observable">
+</code-example>
+
+Replace the `getHeroes` method with this one.
+
+<code-example path="toh-pt4/src/app/hero.service.ts" region="getHeroes-1"></code-example>
+
+`of(HEROES)` returns an `Observable<Hero[]>` that emits  _a single value_, the array of mock heroes.
+
+<div class="alert is-helpful">
+
+In the [HTTP tutorial](tutorial/toh-pt6), you'll call `HttpClient.get<Hero[]>()` which also returns an `Observable<Hero[]>` that emits  _a single value_, an array of heroes from the body of the HTTP response.
+
+</div>
+
+### Subscribe in _HeroesComponent_
+
+The `HeroService.getHeroes` method used to return a `Hero[]`.
+Now it returns an `Observable<Hero[]>`.
+
+You'll have to adjust to that difference in `HeroesComponent`.
+
+Find the `getHeroes` method and replace it with the following code
+(shown side-by-side with the previous version for comparison)
+
+<code-tabs>
+
+  <code-pane title="heroes.component.ts (Observable)" 
+    path="toh-pt4/src/app/heroes/heroes.component.ts" region="getHeroes">
+  </code-pane>
+
+  <code-pane title="heroes.component.ts (Original)" 
+    path="toh-pt4/src/app/heroes/heroes.component.1.ts" region="getHeroes">
+  </code-pane>
+
+</code-tabs>
+
+`Observable.subscribe()` is the critical difference.
+
+The previous version assigns an array of heroes to the component's `heroes` property.
+The assignment occurs _synchronously_, as if the server could return heroes instantly
+or the browser could freeze the UI while it waited for the server's response.
+
+That _won't work_ when the `HeroService` is actually making requests of a remote server.
+
+The new version waits for the `Observable` to emit the array of heroes&mdash; 
+which could happen now or several minutes from now.
+Then `subscribe` passes the emitted array to the callback,
+which sets the component's `heroes` property.
+
+This asynchronous approach _will work_ when
+the `HeroService` requests heroes from the server.
+
+## Show messages
+
+In this section you will 
+
+* add a `MessagesComponent` that displays app messages at the bottom of the screen.
+* create an injectable, app-wide `MessageService` for sending messages to be displayed
+* inject `MessageService` into the `HeroService`
+* display a message when `HeroService` fetches heroes successfully.
+
+### Create _MessagesComponent_
+
+Use the CLI to create the `MessagesComponent`.
+
+<code-example language="sh" class="code-shell">
+  ng generate component messages
+</code-example>
+
+The CLI creates the component files in the `src/app/messages` folder and declare `MessagesComponent` in `AppModule`.
+
+Modify the `AppComponent` template to display the generated `MessagesComponent`
+
+<code-example
+  title = "/src/app/app.component.html"
+  path="toh-pt4/src/app/app.component.html">
+</code-example>
+
+You should see the default paragraph from `MessagesComponent` at the bottom of the page.
+
+### Create the _MessageService_
+
+Use the CLI to create the `MessageService` in `src/app`. 
+
+<code-example language="sh" class="code-shell">
+  ng generate service message
+</code-example>
+
+Open `MessageService` and replace its contents with the following.
+
+<code-example
+  title = "/src/app/message.service.ts"
+  path="toh-pt4/src/app/message.service.ts">
+</code-example>
+
+The service exposes its cache of `messages` and two methods: one to `add()` a message to the cache and another to `clear()` the cache.
+
+{@a inject-message-service}
+### Inject it into the `HeroService`
+
+Re-open the `HeroService` and import the `MessageService`.
+
+<code-example
+  title = "/src/app/hero.service.ts (import MessageService)"
+  path="toh-pt4/src/app/hero.service.ts" region="import-message-service">
+</code-example>
+
+Modify the constructor with a parameter that declares a private `messageService` property.
+Angular will inject the singleton `MessageService` into that property 
+when it creates the `HeroService`.
+
+<code-example
+  path="toh-pt4/src/app/hero.service.ts" region="ctor">
+</code-example>
+
+<div class="alert is-helpful">
+
+This is a typical "*service-in-service*" scenario:
+you inject the `MessageService` into the `HeroService` which is injected into the `HeroesComponent`.
+
+</div>
+
+### Send a message from `HeroService`
+
+Modify the `getHeroes` method to send a message when the heroes are fetched.
+
+<code-example path="toh-pt4/src/app/hero.service.ts" region="getHeroes">
+</code-example>
+
+### Display the message from `HeroService`
+
+The `MessagesComponent` should display all messages, 
+including the message sent by the `HeroService` when it fetches heroes.
+
+Open `MessagesComponent` and import the `MessageService`.
+
+<code-example
+  title = "/src/app/messages/messages.component.ts (import MessageService)"
+  path="toh-pt4/src/app/messages/messages.component.ts" region="import-message-service">
+</code-example>
+
+Modify the constructor with a parameter that declares a **public** `messageService` property.
+Angular will inject the singleton `MessageService` into that property 
+when it creates the `MessagesComponent`.
+
+<code-example
+  path="toh-pt4/src/app/messages/messages.component.ts" region="ctor">
+</code-example>
+
+The `messageService` property **must be public** because you're about to bind to it in the template.
+
+<div class="alert is-important">
+
+Angular only binds to _public_ component properties.
+
+</div>
+
+### Bind to the _MessageService_
+
+Replace the CLI-generated `MessagesComponent` template with the following.
+
+<code-example
+  title = "src/app/messages/messages.component.html"
+  path="toh-pt4/src/app/messages/messages.component.html">
+</code-example>
+
+This template binds directly to the component's `messageService`.
+
+* The `*ngIf` only displays the messages area if there are messages to show.
+
+
+* An `*ngFor` presents the list of messages in repeated `<div>` elements.
+
+
+* An Angular [event binding](guide/template-syntax#event-binding) binds the button's click event
+to `MessageService.clear()`.
+
+The messages will look better when you add the private CSS styles to `messages.component.css`
+as listed in one of the ["final code review"](#final-code-review) tabs below.
+
+The browser refreshes and the page displays the list of heroes.
+Scroll to the bottom to see the message from the `HeroService` in the message area.
+Click the "clear" button and the message area disappears.
+
+{@a final-code-review}
+
+## Final code review
+
+Here are the code files discussed on this page and your app should look like this <live-example></live-example>.
+
+<code-tabs>
+
+  <code-pane title="src/app/hero.service.ts" 
+  path="toh-pt4/src/app/hero.service.ts">
+  </code-pane>
+
+  <code-pane title="src/app/message.service.ts" 
+  path="toh-pt4/src/app/message.service.ts">
+  </code-pane>
+
+  <code-pane title="src/app/heroes/heroes.component.ts"
+  path="toh-pt4/src/app/heroes/heroes.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/messages/messages.component.ts"
+  path="toh-pt4/src/app/messages/messages.component.ts">
+  </code-pane>
+
+  <code-pane title="src/app/messages/messages.component.html"
+  path="toh-pt4/src/app/messages/messages.component.html">
+  </code-pane>
+
+  <code-pane title="src/app/messages/messages.component.css"
+  path="toh-pt4/src/app/messages/messages.component.css">
+  </code-pane>
+
+  <code-pane title="src/app/app.module.ts"
+  path="toh-pt4/src/app/app.module.ts">
+  </code-pane>
+
+  <code-pane title="src/app/app.component.html"
+  path="toh-pt4/src/app/app.component.html">
+  </code-pane>
+
+</code-tabs>
+
+## Summary
+
+* You refactored data access to the `HeroService` class.
+* You registered the `HeroService` as the _provider_ of its service at the root level so that it can be injected anywhere in the app.
+* You used [Angular Dependency Injection](guide/dependency-injection) to inject it into a component.
+* You gave the `HeroService` _get data_ method an asynchronous signature.
+* You discovered `Observable` and the RxJS _Observable_ library.
+* You used RxJS `of()` to return an observable of mock heroes (`Observable<Hero[]>`).
+* The component's `ngOnInit` lifecycle hook calls the `HeroService` method, not the constructor.
+* You created a `MessageService` for loosely-coupled communication between classes.
+* The `HeroService` injected into a component is created with another injected service,
+ `MessageService`.
diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md
new file mode 100644
index 000000000000..a1bedcaafeec
--- /dev/null
+++ b/aio/content/tutorial/toh-pt5.md
@@ -0,0 +1,615 @@
+# Routing
+
+There are new requirements for the Tour of Heroes app:
+
+* Add a *Dashboard* view.
+* Add the ability to navigate between the *Heroes* and *Dashboard* views.
+* When users click a hero name in either view, navigate to a detail view of the selected hero.
+* When users click a *deep link* in an email, open the detail view for a particular hero.
+
+When you’re done, users will be able to navigate the app like this:
+
+<figure>
+
+  <img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
+
+</figure>
+
+## Add the `AppRoutingModule`
+
+An Angular best practice is to load and configure the router in a separate, top-level module
+that is dedicated to routing and imported by the root `AppModule`.
+
+By convention, the module class name is `AppRoutingModule` and it belongs in the `app-routing.module.ts` in the `src/app` folder.
+
+Use the CLI to generate it.
+
+<code-example language="sh" class="code-shell">
+  ng generate module app-routing --flat --module=app
+</code-example>
+
+<div class="alert is-helpful">
+
+`--flat` puts the file in `src/app` instead of its own folder.<br>
+`--module=app` tells the CLI to register it in the `imports` array of the `AppModule`.
+</div>
+
+The generated file looks like this:
+
+<code-example path="toh-pt5/src/app/app-routing.module.0.ts" 
+  title="src/app/app-routing.module.ts (generated)">
+</code-example>
+
+You generally don't declare components in a routing module so you can delete the
+`@NgModule.declarations` array and delete `CommonModule` references too.
+
+You'll configure the router with `Routes` in the `RouterModule`
+so import those two symbols from the `@angular/router` library.
+
+Add an `@NgModule.exports` array with `RouterModule` in it.
+Exporting `RouterModule` makes router directives available for use
+in the `AppModule` components that will need them.
+
+`AppRoutingModule` looks like this now:
+
+<code-example path="toh-pt5/src/app/app-routing.module.ts" 
+  region="v1"
+  title="src/app/app-routing.module.ts (v1)">
+</code-example>
+
+### Add routes
+
+*Routes* tell the router which view to display when a user clicks a link or
+pastes a URL into the browser address bar.
+
+A typical Angular `Route` has two properties:
+
+1. `path`: a string that matches the URL in the browser address bar.
+1. `component`: the component that the router should create when navigating to this route.
+
+You intend to navigate to the `HeroesComponent` when the URL is something like `localhost:4200/heroes`.
+
+Import the `HeroesComponent` so you can reference it in a `Route`.
+Then define an array of routes with a single `route` to that component.
+
+<code-example path="toh-pt5/src/app/app-routing.module.ts" 
+  region="heroes-route">
+</code-example>
+
+Once you've finished setting up, the router will match that URL to `path: 'heroes'` 
+and display the `HeroesComponent`.
+
+### _RouterModule.forRoot()_
+
+You first must initialize the router and start it listening for browser location changes.
+
+Add `RouterModule` to the `@NgModule.imports` array and 
+configure it with the `routes` in one step by calling 
+`RouterModule.forRoot()` _within_ the `imports` array, like this:
+
+<code-example path="toh-pt5/src/app/app-routing.module.ts" 
+  region="ngmodule-imports">
+</code-example>
+
+<div class="alert is-helpful">
+
+  The method is called `forRoot()` because you configure the router at the application's root level.
+  The `forRoot()` method supplies the service providers and directives needed for routing, 
+  and performs the initial navigation based on the current browser URL.
+
+</div>
+
+## Add _RouterOutlet_
+
+Open the `AppComponent` template replace the `<app-heroes>` element with a `<router-outlet>` element.
+
+<code-example path="toh-pt5/src/app/app.component.html" 
+  region="outlet"
+  title="src/app/app.component.html (router-outlet)">
+</code-example>
+
+You removed `<app-heroes>` because you will only display the `HeroesComponent` when the user navigates to it.
+
+The `<router-outlet>` tells the router where to display routed views.
+
+<div class="alert is-helpful">
+
+The `RouterOutlet` is one of the router directives that became available to the `AppComponent`
+because `AppModule` imports `AppRoutingModule` which exported `RouterModule`.
+
+</div>
+
+#### Try it
+
+You should still be running with this CLI command.
+
+<code-example language="sh" class="code-shell">
+  ng serve
+</code-example>
+
+The browser should refresh and display the app title but not the list of heroes.
+
+Look at the browser's address bar. 
+The URL ends in `/`.
+The route path to `HeroesComponent` is `/heroes`.
+
+Append `/heroes` to the URL in the browser address bar.
+You should see the familiar heroes master/detail view.
+
+{@a routerlink}
+
+## Add a navigation link (`routerLink`)
+
+Users shouldn't have to paste a route URL into the address bar. 
+They should be able to click a link to navigate.
+
+Add a `<nav>` element and, within that, an anchor element that, when clicked, 
+triggers navigation to the `HeroesComponent`.
+The revised `AppComponent` template looks like this:
+
+<code-example 
+  path="toh-pt5/src/app/app.component.html" 
+  region="heroes"
+  title="src/app/app.component.html (heroes RouterLink)">
+</code-example>
+
+A [`routerLink` attribute](#routerlink) is set to `"/heroes"`,
+the string that the router matches to the route to `HeroesComponent`.
+The `routerLink` is the selector for the [`RouterLink` directive](#routerlink)
+that turns user clicks into router navigations.
+It's another of the public directives in the `RouterModule`.
+
+The browser refreshes and displays the app title and heroes link, 
+but not the heroes list.
+
+Click the link. 
+The address bar updates to `/heroes` and the list of heroes appears.
+
+<div class="alert is-helpful">
+
+Make this and future navigation links look better by adding private CSS styles to `app.component.css`
+as listed in the [final code review](#appcomponent) below.
+
+</div>
+
+
+## Add a dashboard view
+
+Routing makes more sense when there are multiple views.
+So far there's only the heroes view. 
+
+Add a `DashboardComponent` using the CLI:
+
+<code-example language="sh" class="code-shell">
+  ng generate component dashboard
+</code-example>
+
+The CLI generates the files for the `DashboardComponent` and declares it in `AppModule`.
+
+Replace the default file content in these three files as follows and then return for a little discussion:
+
+<code-tabs>
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.html" path="toh-pt5/src/app/dashboard/dashboard.component.1.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.ts" path="toh-pt5/src/app/dashboard/dashboard.component.ts">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.css" path="toh-pt5/src/app/dashboard/dashboard.component.css">
+  </code-pane>
+</code-tabs>
+
+The  _template_ presents a grid of hero name links.
+
+* The `*ngFor` repeater creates as many links as are in the component's `heroes` array.
+* The links are styled as colored blocks by the `dashboard.component.css`.
+* The links don't go anywhere yet but [they will shortly](#hero-details).
+
+The _class_ is similar to the `HeroesComponent` class.
+* It defines a `heroes` array property.
+* The constructor expects Angular to inject the `HeroService` into a private `heroService` property.
+* The `ngOnInit()` lifecycle hook calls `getHeroes`.
+
+This `getHeroes` reduces the number of heroes displayed to four
+(2nd, 3rd, 4th, and 5th).
+
+<code-example path="toh-pt5/src/app/dashboard/dashboard.component.ts" region="getHeroes">
+</code-example>
+
+### Add the dashboard route
+
+To navigate to the dashboard, the router needs an appropriate route.
+
+Import the `DashboardComponent` in the `AppRoutingModule`.
+
+<code-example 
+  path="toh-pt5/src/app/app-routing.module.ts" 
+  region="import-dashboard" 
+  title="src/app/app-routing.module.ts (import DashboardComponent)">
+</code-example>
+
+Add a route to the `AppRoutingModule.routes` array that matches a path to the `DashboardComponent`.
+
+<code-example 
+  path="toh-pt5/src/app/app-routing.module.ts" 
+  region="dashboard-route">
+</code-example>
+
+### Add a default route
+
+When the app starts, the browsers address bar points to the web site's root.
+That doesn't match any existing route so the router doesn't navigate anywhere.
+The space below the `<router-outlet>` is blank.
+
+To make the app navigate to the dashboard automatically, add the following
+route to the `AppRoutingModule.Routes` array.
+
+<code-example path="toh-pt5/src/app/app-routing.module.ts" region="redirect-route">
+</code-example>
+
+This route redirects a URL that fully matches the empty path to the route whose path is `'/dashboard'`.
+
+After the browser refreshes, the router loads the `DashboardComponent`
+and the browser address bar shows the `/dashboard` URL.
+
+### Add dashboard link to the shell
+
+The user should be able to navigate back and forth between the
+`DashboardComponent` and the `HeroesComponent` by clicking links in the
+navigation area near the top of the page.
+
+Add a dashboard navigation link to the `AppComponent` shell template, just above the *Heroes* link.
+
+<code-example path="toh-pt5/src/app/app.component.html" title="src/app/app.component.html">
+</code-example>
+
+After the browser refreshes you can navigate freely between the two views by clicking the links.
+
+{@a hero-details}
+## Navigating to hero details
+
+The `HeroDetailsComponent` displays details of a selected hero.
+At the moment the `HeroDetailsComponent` is only visible at the bottom of the `HeroesComponent`
+
+The user should be able to get to these details in three ways.
+
+1. By clicking a hero in the dashboard.
+1. By clicking a hero in the heroes list.
+1. By pasting a "deep link" URL into the browser address bar that identifies the hero to display.
+
+In this section, you'll enable navigation to the `HeroDetailsComponent`
+and liberate it from the `HeroesComponent`.
+
+### Delete _hero details_ from `HeroesComponent`
+
+When the user clicks a hero item in the `HeroesComponent`,
+the app should navigate to the `HeroDetailComponent`,
+replacing the heroes list view with the hero detail view.
+The heroes list view should no longer show hero details as it does now.
+
+Open the `HeroesComponent` template (`heroes/heroes.component.html`) and
+delete the `<app-hero-detail>` element from the bottom.
+
+Clicking a hero item now does nothing. 
+You'll [fix that shortly](#heroes-component-links) after you enable routing to the `HeroDetailComponent`.
+
+### Add a _hero detail_ route
+
+A URL like `~/detail/11` would be a good URL for navigating to the *Hero Detail* view of the hero whose `id` is `11`. 
+
+Open `AppRoutingModule` and import `HeroDetailComponent`.
+
+<code-example 
+  path="toh-pt5/src/app/app-routing.module.ts" 
+  region="import-herodetail" 
+  title="src/app/app-routing.module.ts (import HeroDetailComponent)">
+</code-example>
+
+Then add a _parameterized_ route to the `AppRoutingModule.routes` array that matches the path pattern to the _hero detail_ view.
+
+<code-example 
+  path="toh-pt5/src/app/app-routing.module.ts" 
+  region="detail-route">
+</code-example>
+
+The colon (:) in the `path` indicates that `:id` is a placeholder for a specific hero `id`.
+
+At this point, all application routes are in place.
+
+<code-example 
+  path="toh-pt5/src/app/app-routing.module.ts" 
+  region="routes" 
+  title="src/app/app-routing.module.ts (all routes)">
+</code-example>
+
+### `DashboardComponent` hero links
+
+The `DashboardComponent` hero links do nothing at the moment.
+
+Now that the router has a route to `HeroDetailComponent`,
+fix the dashboard hero links to navigate via the _parameterized_ dashboard route.
+
+<code-example 
+  path="toh-pt5/src/app/dashboard/dashboard.component.html" 
+  region="click" 
+  title="src/app/dashboard/dashboard.component.html (hero links)">
+</code-example>
+
+You're using Angular [interpolation binding](guide/template-syntax#interpolation) within the `*ngFor` repeater 
+to insert the current iteration's `hero.id` into each 
+[`routerLink`](#routerlink).
+
+{@a heroes-component-links}
+### `HeroesComponent` hero links
+
+The hero items in the `HeroesComponent` are `<li>` elements whose click events
+are bound to the component's `onSelect()` method.
+
+<code-example 
+  path="toh-pt4/src/app/heroes/heroes.component.html" 
+  region="list" 
+  title="src/app/heroes/heroes.component.html (list with onSelect)">
+</code-example>
+
+Strip the `<li>` back to just its `*ngFor`,
+wrap the badge and name in an anchor element (`<a>`),
+and add a `routerLink` attribute to the anchor that 
+is the same as in the dashboard template
+
+<code-example 
+  path="toh-pt5/src/app/heroes/heroes.component.html" 
+  region="list" 
+  title="src/app/heroes/heroes.component.html (list with links)">
+</code-example>
+
+You'll have to fix the private stylesheet (`heroes.component.css`) to make
+the list look as it did before.
+Revised styles are in the [final code review](#heroescomponent) at the bottom of this guide.
+
+#### Remove dead code (optional)
+
+While the `HeroesComponent` class still works, 
+the `onSelect()` method and `selectedHero` property are no longer used.
+
+It's nice to tidy up and you'll be grateful to yourself later.
+Here's the class after pruning away the dead code.
+
+<code-example 
+  path="toh-pt5/src/app/heroes/heroes.component.ts"
+  region="class" 
+  title="src/app/heroes/heroes.component.ts (cleaned up)" linenums="false">
+</code-example>
+
+## Routable *HeroDetailComponent*
+
+Previously, the parent `HeroesComponent` set the `HeroDetailComponent.hero`
+property and the `HeroDetailComponent` displayed the hero.
+
+`HeroesComponent` doesn't do that anymore.
+Now the router creates the `HeroDetailComponent` in response to a URL such as `~/detail/11`.
+
+The `HeroDetailComponent` needs a new way to obtain the _hero-to-display_.
+
+* Get the route that created it, 
+* Extract the `id` from the route
+* Acquire the hero with that `id` from the server via the `HeroService`
+
+Add the following imports:
+
+<code-example 
+  path="toh-pt5/src/app/hero-detail/hero-detail.component.ts" 
+  region="added-imports" 
+  title="src/app/hero-detail/hero-detail.component.ts">
+</code-example>
+
+{@a hero-detail-ctor}
+
+Inject the `ActivatedRoute`, `HeroService`, and `Location` services
+into the constructor, saving their values in private fields:
+
+<code-example 
+  path="toh-pt5/src/app/hero-detail/hero-detail.component.ts" region="ctor">
+</code-example>
+
+The [`ActivatedRoute`](api/router/ActivatedRoute) holds information about the route to this instance of the `HeroDetailComponent`.
+This component is interested in the route's bag of parameters extracted from the URL.
+The _"id"_ parameter is the `id` of the hero to display.
+
+The [`HeroService`](tutorial/toh-pt4) gets hero data from the remote server
+and this component will use it to get the _hero-to-display_.
+
+The [`location`](api/common/Location) is an Angular service for interacting with the browser.
+You'll use it [later](#goback) to navigate back to the view that navigated here.
+
+### Extract the _id_ route parameter
+
+In the `ngOnInit()` [lifecycle hook](guide/lifecycle-hooks#oninit)
+call `getHero()` and define it as follows.
+
+<code-example 
+  path="toh-pt5/src/app/hero-detail/hero-detail.component.ts" region="ngOnInit">
+</code-example>
+
+The `route.snapshot` is a static image of the route information shortly after the component was created.
+
+The `paramMap` is a dictionary of route parameter values extracted from the URL.
+The `"id"` key returns the `id` of the hero to fetch.
+
+Route parameters are always strings.
+The JavaScript (+) operator converts the string to a number,
+which is what a hero `id` should be.
+
+The browser refreshes and the app crashes with a compiler error.
+`HeroService` doesn't have a `getHero()` method.
+Add it now.
+
+### Add `HeroService.getHero()`
+
+Open `HeroService` and add this `getHero()` method
+
+<code-example 
+  path="toh-pt5/src/app/hero.service.ts" 
+  region="getHero" 
+  title="src/app/hero.service.ts (getHero)">
+</code-example>
+
+<div class="alert is-important">
+
+Note the backticks ( &#96; ) that 
+define a JavaScript 
+[_template literal_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) for embedding the `id`.
+</div>
+
+Like [`getHeroes()`](tutorial/toh-pt4#observable-heroservice),
+`getHero()` has an asynchronous signature.
+It returns a _mock hero_ as an `Observable`, using the RxJS `of()` function.
+
+You'll be able to re-implement `getHero()` as a real `Http` request
+without having to change the `HeroDetailComponent` that calls it.
+
+#### Try it
+
+The browser refreshes and the app is working again.
+You can click a hero in the dashboard or in the heroes list and navigate to that hero's detail view.
+
+If you paste `localhost:4200/detail/11` in the browser address bar,
+the router navigates to the detail view for the hero with `id: 11`,  "Mr. Nice".
+
+{@a goback}
+
+### Find the way back
+
+By clicking the browser's back button, 
+you can go back to the hero list or dashboard view,
+depending upon which sent you to the detail view.
+
+It would be nice to have a button on the `HeroDetail` view that can do that.
+
+Add a *go back* button to the bottom of the component template and bind it
+to the component's `goBack()` method.
+
+<code-example 
+  path="toh-pt5/src/app/hero-detail/hero-detail.component.html" 
+  region="back-button"
+  title="src/app/hero-detail/hero-detail.component.html (back button)">
+</code-example>
+
+Add a `goBack()` _method_ to the component class that navigates backward one step 
+in the browser's history stack
+using the `Location` service that you [injected previously](#hero-detail-ctor).
+
+<code-example path="toh-pt5/src/app/hero-detail/hero-detail.component.ts" region="goBack" title="src/app/hero-detail/hero-detail.component.ts (goBack)">
+
+</code-example>
+
+
+Refresh the browser and start clicking.
+Users can navigate around the app, from the dashboard to hero details and back,
+from heroes list to the mini detail to the hero details and back to the heroes again.
+
+You've met all of the navigational requirements that propelled this page.
+
+## Final code review
+
+Here are the code files discussed on this page and your app should look like this <live-example></live-example>.
+
+{@a approutingmodule}
+{@a appmodule}
+#### _AppRoutingModule_, _AppModule_, and _HeroService_
+
+<code-tabs>
+  <code-pane 
+    title="src/app/app-routing.module.ts" 
+    path="toh-pt5/src/app/app-routing.module.ts">
+  </code-pane>
+  <code-pane 
+    title="src/app/app.module.ts" 
+    path="toh-pt5/src/app/app.module.ts">
+  </code-pane>
+  <code-pane 
+    title="src/app/hero.service.ts" 
+    path="toh-pt5/src/app/hero.service.ts">
+  </code-pane>
+</code-tabs>
+
+{@a appcomponent}
+#### _AppComponent_
+
+<code-tabs>
+  <code-pane 
+    title="src/app/app.component.html"
+    path="toh-pt5/src/app/app.component.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/app.component.css"
+    path="toh-pt5/src/app/app.component.css">
+  </code-pane>
+</code-tabs>
+
+{@a dashboardcomponent}
+#### _DashboardComponent_
+
+<code-tabs>
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.html" path="toh-pt5/src/app/dashboard/dashboard.component.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.ts" path="toh-pt5/src/app/dashboard/dashboard.component.ts">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.css" path="toh-pt5/src/app/dashboard/dashboard.component.css">
+  </code-pane>
+</code-tabs>
+
+{@a heroescomponent}
+#### _HeroesComponent_
+
+<code-tabs>
+  <code-pane 
+    title="src/app/heroes/heroes.component.html" path="toh-pt5/src/app/heroes/heroes.component.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/heroes/heroes.component.ts" 
+    path="toh-pt5/src/app/heroes/heroes.component.ts">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/heroes/heroes.component.css" 
+    path="toh-pt5/src/app/heroes/heroes.component.css">
+  </code-pane>
+</code-tabs>
+
+{@a herodetailcomponent}
+#### _HeroDetailComponent_
+
+<code-tabs>
+  <code-pane 
+    title="src/app/hero-detail/hero-detail.component.html" path="toh-pt5/src/app/hero-detail/hero-detail.component.html">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/hero-detail/hero-detail.component.ts" path="toh-pt5/src/app/hero-detail/hero-detail.component.ts">
+  </code-pane>
+
+  <code-pane 
+    title="src/app/hero-detail/hero-detail.component.css" path="toh-pt5/src/app/hero-detail/hero-detail.component.css">
+  </code-pane>
+</code-tabs>
+
+## Summary
+
+* You added the Angular router to navigate among different components.
+* You turned the `AppComponent` into a navigation shell with `<a>` links and a `<router-outlet>`.
+* You configured the router in an `AppRoutingModule` 
+* You defined simple routes, a redirect route, and a parameterized route.
+* You used the `routerLink` directive in anchor elements.
+* You refactored a tightly-coupled master/detail view into a routed detail view.
+* You used router link parameters to navigate to the detail view of a user-selected hero.
+* You shared the `HeroService` among multiple components.
diff --git a/aio/content/tutorial/toh-pt6.md b/aio/content/tutorial/toh-pt6.md
new file mode 100644
index 000000000000..46d59f14d325
--- /dev/null
+++ b/aio/content/tutorial/toh-pt6.md
@@ -0,0 +1,655 @@
+# HTTP
+
+In this tutorial, you'll add the following data persistence features with help from
+Angular's `HttpClient`.
+
+* The `HeroService` gets hero data with HTTP requests.
+* Users can add, edit, and delete heroes and save these changes over HTTP.
+* Users can search for heroes by name.
+
+When you're done with this page, the app should look like this <live-example></live-example>.
+
+## Enable HTTP services
+
+`HttpClient` is Angular's mechanism for communicating with a remote server over HTTP. 
+
+To make `HttpClient` available everywhere in the app,
+
+* open the root `AppModule`, 
+* import the `HttpClientModule` symbol from `@angular/common/http`,
+* add it to the `@NgModule.imports` array.
+
+## Simulate a data server
+
+This tutorial sample _mimics_ communication with a remote data server by using the
+[_In-memory Web API_](https://github.com/angular/in-memory-web-api "In-memory Web API") module.
+
+After installing the module, the app will make requests to and receive responses from the `HttpClient`
+without knowing that the *In-memory Web API* is intercepting those requests,
+applying them to an in-memory data store, and returning simulated responses.
+
+This facility is a great convenience for the tutorial.
+You won't have to set up a server to learn about `HttpClient`.
+
+It may also be convenient in the early stages of your own app development when
+the server's web api is ill-defined or not yet implemented.
+
+<div class="alert is-important">
+
+**Important:** the *In-memory Web API* module has nothing to do with HTTP in Angular.
+
+If you're just _reading_ this tutorial to learn about `HttpClient`, you can [skip over](#import-heroes) this step.
+If you're _coding along_ with this tutorial, stay here and add the *In-memory Web API* now.
+
+</div>
+
+Install the *In-memory Web API* package from _npm_
+
+<code-example language="sh" class="code-shell">
+  npm install angular-in-memory-web-api --save
+</code-example>
+
+Import the `HttpClientInMemoryWebApiModule` and the `InMemoryDataService` class, 
+which you will create in a moment.
+
+<code-example 
+  path="toh-pt6/src/app/app.module.ts" 
+  region="import-in-mem-stuff" 
+  title="src/app/app.module.ts (In-memory Web API imports)">
+</code-example>
+
+Add the `HttpClientInMemoryWebApiModule` to the `@NgModule.imports` array&mdash;
+_after importing the `HttpClient`_,
+&mdash;while configuring it with the `InMemoryDataService`.
+
+<code-example   
+  path="toh-pt6/src/app/app.module.ts" 
+  region="in-mem-web-api-imports">
+</code-example>
+
+The `forRoot()` configuration method takes an `InMemoryDataService` class
+that primes the in-memory database.
+
+The _Tour of Heroes_ sample creates such a class 
+`src/app/in-memory-data.service.ts` which has the following content:
+
+<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.
+
+When your server is ready, detach the *In-memory Web API*, and the app's requests will go through to the server.
+
+Now back to the `HttpClient` story.
+
+{@a import-heroes}
+## Heroes and HTTP
+
+Import some HTTP symbols that you'll need:
+
+<code-example
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="import-httpclient" 
+  title="src/app/hero.service.ts (import HTTP symbols)">
+</code-example>
+
+Inject `HttpClient` into the constructor in a private property called `http`.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="ctor" >
+</code-example>
+
+Keep injecting the `MessageService`. You'll call it so frequently that
+you'll wrap it in private `log` method.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="log" >
+</code-example>
+
+Define the `heroesUrl` with the address of the heroes resource on the server.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="heroesUrl" >
+</code-example>
+
+### Get heroes with _HttpClient_
+
+The current `HeroService.getHeroes()` 
+uses the RxJS `of()` function to return an array of mock heroes
+as an `Observable<Hero[]>`.
+
+<code-example 
+  path="toh-pt4/src/app/hero.service.ts" 
+  region="getHeroes-1" 
+  title="src/app/hero.service.ts (getHeroes with RxJs 'of()')">
+</code-example>
+
+Convert that method to use `HttpClient`
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="getHeroes-1">
+</code-example>
+
+Refresh the browser. The hero data should successfully load from the
+mock server.
+
+You've swapped `of` for `http.get` and the app keeps working without any other changes
+because both functions return an `Observable<Hero[]>`.
+
+### Http methods return one value
+
+All `HttpClient` methods return an RxJS `Observable` of something.
+
+HTTP is a request/response protocol. 
+You make a request, it returns a single response.
+
+In general, an observable _can_ return multiple values over time.
+An observable from `HttpClient` always emits a single value and then completes, never to emit again.
+
+This particular `HttpClient.get` call returns an `Observable<Hero[]>`, literally "_an observable of hero arrays_". In practice, it will only return a single hero array.
+
+### _HttpClient.get_ returns response data
+
+`HttpClient.get` returns the _body_ of the response as an untyped JSON object by default.
+Applying the optional type specifier, `<Hero[]>` , gives you a typed result object.
+
+The shape of the JSON data is determined by the server's data API.
+The _Tour of Heroes_ data API returns the hero data as an array.
+
+<div class="alert is-helpful">
+
+Other APIs may bury the data that you want within an object.
+You might have to dig that data out by processing the `Observable` result
+with the RxJS `map` operator.
+
+Although not discussed here, there's an example of `map` in the `getHeroNo404()`
+method included in the sample source code.
+
+</div>
+
+### Error handling
+
+Things go wrong, especially when you're getting data from a remote server.
+The `HeroService.getHeroes()` method should catch errors and do something appropriate.
+
+To catch errors, you **"pipe" the observable** result from `http.get()` through an RxJS `catchError()` operator.
+
+Import the `catchError` symbol from `rxjs/operators`, along with some other operators you'll need later.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="import-rxjs-operators">
+</code-example>
+
+Now extend the observable result with the `.pipe()` method and
+give it a `catchError()` operator.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="getHeroes-2" >
+</code-example>
+
+The `catchError()` operator intercepts an **`Observable` that failed**.
+It passes the error an _error handler_ that can do what it wants with the error.
+
+The following `handleError()` method reports the error and then returns an
+innocuous result so that the application keeps working.
+
+#### _handleError_
+
+The following `errorHandler()` will be shared by many `HeroService` methods
+so it's generalized to meet their different needs.
+
+Instead of handling the error directly, it returns an _error handler_ function to `catchError` that it 
+has configured with both the name of the operation that failed and a safe return value.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="handleError">
+</code-example>
+
+After reporting the error to console, the handler constructs
+a user friendly message and returns a safe value to the app so it can keep working.
+
+Because each service method returns a different kind of `Observable` result,
+`errorHandler()` takes a type parameter so it can return the safe value as the type that the app expects.
+
+### Tap into the _Observable_
+
+The `HeroService` methods will **tap** into the flow of observable values
+and send a message (via `log()`) to the message area at the bottom of the page.
+
+They'll do that with the RxJS `tap` operator,
+which _looks_ at the observable values, does _something_ with those values,
+and passes them along.
+The `tap` call back doesn't touch the values themselves.
+
+Here is the final version of `getHeroes` with the `tap` that logs the operation.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="getHeroes" >
+</code-example>
+
+### Get hero by id
+
+Most web APIs support a _get by id_ request in the form `api/hero/:id` 
+(such as `api/hero/11`).
+Add a `HeroService.getHero()` method to make that request:
+
+<code-example path="toh-pt6/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts"></code-example>
+
+There are three significant differences from  `getHeroes()`.
+
+* it constructs a request URL with the desired hero's id.
+* the server should respond with a single hero rather than an array of heroes.
+* therefore, `getHero` returns an `Observable<Hero>` ("_an observable of Hero objects_")
+ rather than an observable of hero _arrays_ .
+
+## Update heroes
+
+Edit a hero's name in the _hero detail_ view.
+As you type, the hero name updates the heading at the top of the page.
+But when you click the "go back button", the changes are lost.
+
+If you want changes to persist, you must write them back to
+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()`.
+
+<code-example path="toh-pt6/src/app/hero-detail/hero-detail.component.html" region="save" title="src/app/hero-detail/hero-detail.component.html (save)"></code-example>
+
+Add the following `save()` method, which persists hero name changes using the hero service
+`updateHero()` method and then navigates back to the previous view.
+
+<code-example path="toh-pt6/src/app/hero-detail/hero-detail.component.ts" region="save" title="src/app/hero-detail/hero-detail.component.ts (save)"></code-example>
+
+#### Add _HeroService.updateHero()_
+
+The overall structure of the `updateHero()` method is similar to that of
+`getHeroes()`, but it uses `http.put()` to persist the changed hero
+on the server.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="updateHero" 
+  title="src/app/hero.service.ts (update)">
+</code-example>
+
+The `HttpClient.put()` method takes three parameters
+* the URL
+* the data to update (the modified hero in this case)
+* options
+
+The URL is unchanged. The heroes web API knows which hero to update by looking at the hero's `id`.
+
+The heroes web API expects a special header in HTTP save requests.
+That header is in the `httpOptions` constant defined in the `HeroService`.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="http-options"
+  title="src/app/hero.service.ts">
+</code-example>
+
+Refresh the browser, change a hero name and save your change. Navigating to the previous view is implemented in the `save()` method defined in `HeroDetailComponent`.
+The hero now appears in the list with the changed name.
+
+## Add a new hero
+
+To add a hero, this app only needs the hero's name. You can use an `input`
+element paired with an add button.
+
+Insert the following into the `HeroesComponent` template, just after
+the heading:
+
+<code-example path="toh-pt6/src/app/heroes/heroes.component.html" region="add" title="src/app/heroes/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-pt6/src/app/heroes/heroes.component.ts" region="add" title="src/app/heroes/heroes.component.ts (add)"></code-example>
+
+When the given name is non-blank, the handler creates a `Hero`-like object
+from the name (it's only missing the `id`) and passes it to the services `addHero()` method.
+
+When `addHero` saves successfully, the `subscribe` callback
+receives the new hero and pushes it into to the `heroes` list for display.
+
+You'll write `HeroService.addHero` in the next section.
+
+#### Add _HeroService.addHero()_
+
+Add the following `addHero()` method to the `HeroService` class.
+
+<code-example path="toh-pt6/src/app/hero.service.ts" region="addHero" title="src/app/hero.service.ts (addHero)"></code-example>
+
+`HeroService.addHero()` differs from `updateHero` in two ways.
+
+* it calls `HttpClient.post()` instead of `put()`.
+* it expects the server to generates an id for the new hero, 
+which it returns in the `Observable<Hero>` to the caller.
+
+Refresh the browser and add some heroes.
+
+## Delete a hero
+
+Each hero in the heroes list should have a delete button.
+
+Add the following button element to the `HeroesComponent` template, after the hero
+name in the repeated `<li>` element.
+
+<code-example path="toh-pt6/src/app/heroes/heroes.component.html" region="delete"></code-example>
+
+The HTML for the list of heroes should look like this:
+
+<code-example path="toh-pt6/src/app/heroes/heroes.component.html" region="list" title="src/app/heroes/heroes.component.html (list of heroes)"></code-example>
+
+To position the delete button at the far right of the hero entry,
+add some CSS to the `heroes.component.css`.  You'll find that CSS
+in the [final review code](#heroescomponent) below.
+
+Add the `delete()` handler to the component.
+
+<code-example path="toh-pt6/src/app/heroes/heroes.component.ts" region="delete" title="src/app/heroes/heroes.component.ts (delete)"></code-example>
+
+Although the component delegates hero deletion to the `HeroService`,
+it remains responsible for updating its own list of heroes.
+The component's `delete()` method immediately removes the _hero-to-delete_ from that list,
+anticipating that the `HeroService` will succeed on the server.
+
+There's really nothing for the component to do with the `Observable` returned by
+`heroService.delete()`. **It must subscribe anyway**.
+
+<div class="alert is-important">
+
+  If you neglect to `subscribe()`, the service will not send the delete request to the server!
+  As a rule, an `Observable` _does nothing_ until something subscribes!
+  
+  Confirm this for yourself by temporarily removing the `subscribe()`,
+  clicking "Dashboard", then clicking "Heroes".
+  You'll see the full list of heroes again.
+
+</div>
+
+#### Add _HeroService.deleteHero()_
+
+Add a `deleteHero()` method to `HeroService` like this.
+
+<code-example path="toh-pt6/src/app/hero.service.ts" region="deleteHero" title="src/app/hero.service.ts (delete)"></code-example>
+
+Note that
+
+* it calls `HttpClient.delete`.
+* the URL is the heroes resource URL plus the `id` of the hero to delete
+* you don't send data as you did with `put` and `post`.
+* you still send the `httpOptions`.
+
+Refresh the browser and try the new delete functionality.
+
+## Search by name
+
+In this last exercise, you learn to chain `Observable` operators together
+so you can minimize the number of similar HTTP requests
+and consume network bandwidth economically.
+
+You will add a *heroes search* feature to the *Dashboard*.
+As the user types a name into a search box, 
+you'll make repeated HTTP requests for heroes filtered by that name.
+Your goal is to issue only as many requests as necessary.
+
+#### _HeroService.searchHeroes_
+
+Start by adding a `searchHeroes` method to the `HeroService`.
+
+<code-example 
+  path="toh-pt6/src/app/hero.service.ts" 
+  region="searchHeroes"
+  title="src/app/hero.service.ts">
+</code-example>
+
+The method returns immediately with an empty array if there is no search term.
+The rest of it closely resembles `getHeroes()`.
+The only significant difference is the URL, 
+which includes a query string with the search term.
+
+### Add search to the Dashboard
+
+Open the `DashboardComponent` _template_ and
+Add the hero search element, `<app-hero-search>`, to the bottom of the `DashboardComponent` template.
+
+<code-example 
+  path="toh-pt6/src/app/dashboard/dashboard.component.html" title="src/app/dashboard/dashboard.component.html" linenums="false">
+</code-example>
+
+This template looks a lot like the `*ngFor` repeater in the `HeroesComponent` template.
+
+Unfortunately, adding this element breaks the app.
+Angular can't find a component with a selector that matches `<app-hero-search>`.
+
+The `HeroSearchComponent` doesn't exist yet. Fix that.
+
+### Create _HeroSearchComponent_
+
+Create a `HeroSearchComponent` with the CLI.
+
+<code-example language="sh" class="code-shell">
+  ng generate component hero-search
+</code-example>
+
+The CLI generates the three `HeroSearchComponent` files and adds the component to the `AppModule` declarations
+
+Replace the generated `HeroSearchComponent` _template_ with a text box and a list of matching search results like this.
+
+<code-example path="toh-pt6/src/app/hero-search/hero-search.component.html" title="src/app/hero-search/hero-search.component.html"></code-example>
+
+Add private CSS styles to `hero-search.component.css`
+as listed in the [final code review](#herosearchcomponent) below.
+
+As the user types in the search box, a *keyup* event binding calls the component's `search()`
+method with the new search box value.
+
+{@a asyncpipe}
+
+### _AsyncPipe_
+
+As expected, the `*ngFor` repeats hero objects.
+
+Look closely and you'll see that the `*ngFor` iterates over a list called `heroes$`, not `heroes`.
+
+<code-example path="toh-pt6/src/app/hero-search/hero-search.component.html" region="async"></code-example>
+
+The `$` is a convention that indicates `heroes$` is an `Observable`, not an array.
+
+The `*ngFor` can't do anything with an `Observable`.
+But there's also a pipe character (`|`) followed by `async`,
+which identifies Angular's `AsyncPipe`.
+
+The `AsyncPipe` subscribes to an `Observable` automatically so you won't have to
+do so in the component class.
+
+### Fix the _HeroSearchComponent_ class
+
+Replace the generated `HeroSearchComponent` class and metadata as follows.
+
+<code-example path="toh-pt6/src/app/hero-search/hero-search.component.ts" title="src/app/hero-search/hero-search.component.ts"></code-example>
+
+Notice the declaration of `heroes$` as an `Observable`
+<code-example 
+  path="toh-pt6/src/app/hero-search/hero-search.component.ts" 
+  region="heroes-stream">
+</code-example>
+
+You'll set it in [`ngOnInit()`](#search-pipe). 
+Before you do, focus on the definition of `searchTerms`.
+
+### The _searchTerms_ RxJS subject
+
+The `searchTerms` property is declared as an RxJS `Subject`.
+
+<code-example path="toh-pt6/src/app/hero-search/hero-search.component.ts" region="searchTerms"></code-example>
+
+A `Subject` is both a source of _observable_ values and an `Observable` itself.
+You can subscribe to a `Subject` as you would any `Observable`.
+
+You can also push values into that `Observable` by calling its `next(value)` method
+as the `search()` method does.
+
+The `search()` method is called via an _event binding_ to the
+textbox's `keystroke` event.
+
+<code-example path="toh-pt6/src/app/hero-search/hero-search.component.html" region="input"></code-example>
+
+Every time the user types in the textbox, the binding calls `search()` with the textbox value, a "search term". 
+The `searchTerms` becomes an `Observable` emitting a steady stream of search terms.
+
+{@a search-pipe}
+
+### Chaining RxJS operators
+
+Passing a new search term directly to the `searchHeroes()` after every user keystroke would create an excessive amount of HTTP requests,
+taxing server resources and burning through the cellular network data plan.
+
+Instead, the `ngOnInit()` method pipes the `searchTerms` observable through a sequence of RxJS operators that reduce the number of calls to the `searchHeroes()`,
+ultimately returning an observable of timely hero search results (each a `Hero[]`).
+
+Here's the code.
+
+<code-example 
+  path="toh-pt6/src/app/hero-search/hero-search.component.ts" 
+  region="search">
+</code-example>
+
+
+
+* `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds
+before passing along the latest string. You'll never make requests more frequently than 300ms.
+
+
+* `distinctUntilChanged()` ensures that a request is sent only if the filter text changed.
+
+
+* `switchMap()` calls the search service for each search term that makes it through `debounce` and `distinctUntilChanged`.
+It cancels and discards previous search observables, returning only the latest search service observable.
+
+
+<div class="alert is-helpful">
+
+  With the [switchMap operator](http://www.learnrxjs.io/operators/transformation/switchmap.html),
+  every qualifying key event can trigger an `HttpClient.get()` 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()` 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.
+
+  Note that _canceling_ a previous `searchHeroes()` _Observable_
+  doesn't actually abort a pending HTTP request.
+  Unwanted results are simply discarded before they reach your application code.
+
+</div>
+
+Remember that the component _class_ does not subscribe to the `heroes$` _observable_.
+That's the job of the [`AsyncPipe`](#asyncpipe) in the template.
+
+#### Try it
+
+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>
+  <img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component">
+</figure>
+
+## Final code review
+
+Your app should look like this <live-example></live-example>.
+
+Here are the code files discussed on this page (all in the `src/app/` folder).
+
+{@a heroservice}
+{@a inmemorydataservice}
+{@a appmodule}
+#### _HeroService_, _InMemoryDataService_, _AppModule_
+
+<code-tabs>
+  <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-pane 
+    title="app.module.ts" 
+    path="toh-pt6/src/app/app.module.ts">
+  </code-pane>
+</code-tabs>
+
+{@a heroescomponent}
+#### _HeroesComponent_
+
+<code-tabs>
+  <code-pane 
+    title="heroes/heroes.component.html" 
+    path="toh-pt6/src/app/heroes/heroes.component.html">
+  </code-pane>
+  <code-pane 
+    title="heroes/heroes.component.ts" 
+    path="toh-pt6/src/app/heroes/heroes.component.ts">
+  </code-pane>
+  <code-pane 
+    title="heroes/heroes.component.css" 
+    path="toh-pt6/src/app/heroes/heroes.component.css">
+  </code-pane>
+</code-tabs>
+
+{@a herodetailcomponent}
+#### _HeroDetailComponent_
+
+<code-tabs>
+  <code-pane 
+    title="hero-detail/hero-detail.component.html"
+    path="toh-pt6/src/app/hero-detail/hero-detail.component.html">
+  </code-pane>
+  <code-pane 
+    title="hero-detail/hero-detail.component.ts" 
+    path="toh-pt6/src/app/hero-detail/hero-detail.component.ts">
+  </code-pane>
+</code-tabs>
+
+{@a herosearchcomponent}
+#### _HeroSearchComponent_
+
+<code-tabs>
+  <code-pane 
+    title="hero-search/hero-search.component.html"
+    path="toh-pt6/src/app/hero-search/hero-search.component.html">
+  </code-pane>
+  <code-pane 
+    title="hero-search/hero-search.component.ts"
+    path="toh-pt6/src/app/hero-search/hero-search.component.ts">
+  </code-pane>
+  <code-pane 
+    title="hero-search/hero-search.component.css"
+    path="toh-pt6/src/app/hero-search/hero-search.component.css">
+  </code-pane>
+</code-tabs>
+
+## Summary
+
+You're at the end of your journey, and you've accomplished a lot.
+* You added the necessary dependencies to use HTTP in the app.
+* You refactored `HeroService` to load heroes from a web API.
+* You extended `HeroService` to support `post()`, `put()`, and `delete()` methods.
+* You updated the components to allow adding, editing, and deleting of heroes.
+* You configured an in-memory web API.
+* You learned how to use observables.
+
+This 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.
diff --git a/aio/database.rules.json b/aio/database.rules.json
new file mode 100644
index 000000000000..8e33ddc1efd9
--- /dev/null
+++ b/aio/database.rules.json
@@ -0,0 +1,6 @@
+{
+  "rules": {
+    ".read": "auth != null",
+    ".write": "auth != null"
+  }
+}
diff --git a/aio/firebase.json b/aio/firebase.json
new file mode 100644
index 000000000000..57fee90f7a59
--- /dev/null
+++ b/aio/firebase.json
@@ -0,0 +1,127 @@
+{
+  "database": {
+    "rules": "database.rules.json"
+  },
+  "hosting": {
+    "public": "dist",
+    "cleanUrls": true,
+    "redirects": [
+      //////////////////////////////////////////////////////////////////////////////////////////////
+      // README:
+      //   Redirects must also be handled by the ServiceWorker. If you add a redirect rule here,
+      //   make sure the routing RegExp in `ngsw-manifest.json` is updated accordingly.
+      //////////////////////////////////////////////////////////////////////////////////////////////
+
+      // A random bad indexed page that used `api/api`
+      {"type": 301, "source": "/api/api/:rest*", "destination": "/api/:rest*"},
+
+      // Guide renames/removals
+      {"type": 301, "source": "/docs/*/latest/cli-quickstart.html", "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/docs/*/latest/glossary.html", "destination": "/guide/glossary"},
+      {"type": 301, "source": "/docs/*/latest/quickstart.html", "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/docs/*/latest/guide/server-communication.html", "destination": "/guide/http"},
+      {"type": 301, "source": "/docs/*/latest/guide/style-guide.html", "destination": "/guide/styleguide"},
+      {"type": 301, "source": "/guide/cli-quickstart", "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/guide/service-worker-getstart", "destination": "/guide/service-worker-getting-started"},
+      {"type": 301, "source": "/guide/service-worker-comm", "destination": "/guide/service-worker-communications"},
+      {"type": 301, "source": "/guide/service-worker-configref", "destination": "/guide/service-worker-config"},
+      {"type": 301, "source": "/guide/webpack", "destination": "https://v5.angular.io/guide/webpack"},
+
+      // some top level guide pages on old site were moved below the guide folder
+      {"type": 301, "source": "/styleguide", "destination": "/guide/styleguide"},
+      {"type": 301, "source": "/docs/styleguide", "destination": "/guide/styleguide"},
+
+      // news is now blog
+      {"type": 301, "source": "/news*", "destination": "https://blog.angular.io/"},
+
+      // cookbook guides were moved (and sometime renamed or removed)
+      {"type": 301, "source": "/docs/*/latest/cookbook", "destination": "/docs"},
+      {"type": 301, "source": "/docs/*/latest/cookbook/", "destination": "/docs"},
+      {"type": 301, "source": "/docs/*/latest/cookbook/index.html", "destination": "/docs"},
+      {"type": 301, "source": "/**/cookbook/ts-to-js*", "destination": "https://github.com/angular/angular/blob/master/aio/content/guide/change-log.md#es6--described-in-typescript-to-javascript-2016-11-14"},
+      {"type": 301, "source": "/docs/*/latest/cookbook/a1-a2-quick-reference.html", "destination": "/guide/ajs-quick-reference"},
+      {"type": 301, "source": "/docs/*/latest/cookbook/component-communication.html", "destination": "/guide/component-interaction"},
+      {"type": 301, "source": "/docs/*/latest/cookbook/dependency-injection.html", "destination": "/guide/dependency-injection-in-action"},
+      {"type": 301, "source": "/docs/*/latest/cookbook/:cookbook.html", "destination": "/guide/:cookbook"},
+
+      // Forms related code was moved from the `common` to `forms` package (and NgFor was renamed to NgForOf)
+      {"type": 301, "source": "/**/NgFor-*", "destination": "/api/common/NgForOf"},
+      {"type": 301, "source": "/**/api/common/index/MaxLengthValidator-*", "destination": "/api/forms/MaxLengthValidator"},
+      {"type": 301, "source": "/**/api/common/ControlGroup*", "destination": "/api/forms/FormGroup"},
+      {"type": 301, "source": "/**/api/common/Control*", "destination": "/api/forms/FormControl"},
+      {"type": 301, "source": "/**/api/common/SelectControlValueAccessor-*", "destination": "/api/forms/SelectControlValueAccessor"},
+      {"type": 301, "source": "/**/api/common/NgModel", "destination": "/api/forms/NgModel"},
+
+      // Animations moves, renames and removals
+      {"type": 301, "source": "/api/animate/:rest*", "destination": "/api/animations/:rest*"},
+      // AnimationStateDeclarationMetadata was removed
+      {"type": 301, "source": "/**/AnimationStateDeclarationMetadata*", "destination": "/api/animations"},
+      // `AnimationDriver` was moved to the `animations/browser` package
+      {"type": 301, "source": "/api/platform-browser/AnimationDriver", "destination": "/api/animations/browser/AnimationDriver"},
+
+      // The `testing` package was renamed to `core/testing`
+      {"type": 301, "source": "/api/testing/:api-*", "destination": "/api/core/testing/:api"},
+
+      // CORE_DIRECTIVES & PLATFORM_PIPES were removed and are now in the CommonModule
+      {"type": 301, "source": "/**/CORE_DIRECTIVES*", "destination": "/api/common/CommonModule"},
+      {"type": 301, "source": "/**/PLATFORM_PIPES*",  "destination": "/api/common/CommonModule"},
+
+      // DirectiveMetadata is now covered by the Directive decorator
+      {"type": 301, "source": "/**/DirectiveMetadata-*", "destination": "/api/core/Directive"},
+
+      // OptionalMetadata is now covered by the Optional decorator
+      {"type": 301, "source": "/**/OptionalMetadata-*", "destination": "/api/core/Optional"},
+
+      // HTTP_PROVIDERS was removed and is now provided in HttpModule
+      {"type": 301, "source": "/**/HTTP_PROVIDERS*", "destination": "/api/http/HttpModule"},
+
+      // URLs that use the old scheme of adding the type to the end (e.g. `SomeClass-class`)
+      {"type": 301, "source": "/api/:package/:api-*", "destination": "/api/:package/:api"},
+      {"type": 301, "source": "/api/:package/testing/index/:api-*", "destination": "/api/:package/testing/:api"},
+      {"type": 301, "source": "/api/:package/testing/:api-*", "destination": "/api/:package/testing/:api"},
+      {"type": 301, "source": "/api/upgrade/:package/index/:api-*", "destination": "/api/upgrade/:package/:api"},
+      {"type": 301, "source": "/api/upgrade/:package/:api-*", "destination": "/api/upgrade/:package/:api"},
+
+      // URLs that use the old scheme before we moved the docs to the angular/angular repo
+      {"type": 301, "source": "/docs/*/latest", "destination": "/docs"},
+      {"type": 301, "source": "/docs/*/latest/api/", "destination": "/api"},
+      {"type": 301, "source": "/docs/*/latest/api/:package", "destination": "/api/:package"},
+      {"type": 301, "source": "/docs/*/latest/api/testing/:api-*",  "destination": "/api/core/testing/:api"},
+      {"type": 301, "source": "/docs/*/latest/api/:package/:api-*", "destination": "/api/:package/:api"},
+      {"type": 301, "source": "/docs/*/latest/api/:package/index/:api-*", "destination": "/api/:package/:api"},
+      {"type": 301, "source": "/docs/*/latest/api/:package/testing", "destination": "/api/:package/testing"},
+      {"type": 301, "source": "/docs/*/latest/api/:package/testing/index/:api-*", "destination": "/api/:package/testing/:api"},
+      {"type": 301, "source": "/docs/*/latest/api/platform-browser/animations/index/:api-*", "destination": "/api/platform-browser/animations/:api"},
+      {"type": 301, "source": "/docs/*/latest/api/upgrade/:package/:api-*", "destination": "/api/upgrade/:package/:api"},
+      {"type": 301, "source": "/docs/*/latest/api/upgrade/:package/index/:api-*", "destination": "/api/upgrade/:package/:api"},
+      {"type": 301, "source": "/docs/*/latest/glossary", "destination": "/guide/glossary"},
+      {"type": 301, "source": "/docs/*/latest/guide/", "destination": "/docs"},
+      {"type": 301, "source": "/docs/*/latest/guide/lifecycle-hooks", "destination": "/guide/lifecycle-hooks"},
+      {"type": 301, "source": "/docs/*/latest/:rest*", "destination": "/:rest*"},
+      {"type": 301, "source": "/docs/latest/:rest*", "destination": "/:rest*"},
+      {"type": 301, "source": "/docs/styleguide*", "destination": "/guide/styleguide"},
+      {"type": 301, "source": "/guide/metadata", "destination": "/guide/aot-compiler"},
+      {"type": 301, "source": "/guide/ngmodule", "destination": "/guide/ngmodules"},
+      {"type": 301, "source": "/guide/learning-angular*", "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/testing", "destination": "/guide/testing"},
+      {"type": 301, "source": "/testing/**", "destination": "/guide/testing"}
+    ],
+    "rewrites": [
+      {
+        "source": "**/!(*.*)",
+        "destination": "/index.html"
+      }
+    ],
+    "headers": [
+      {
+        "source": "/",
+        "headers": [
+          {
+            "key": "Link",
+            "value": "</generated/navigation.json>;rel=preload;as=fetch,</generated/docs/index.json>;rel=preload;as=fetch"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/aio/ngsw-manifest.json b/aio/ngsw-manifest.json
new file mode 100644
index 000000000000..8eed08fd1873
--- /dev/null
+++ b/aio/ngsw-manifest.json
@@ -0,0 +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$",
+    "^(?:/|\\\\)generated(?:/|\\\\)(?:docs(?:/|\\\\)(?!api(?:/|\\\\)api-list\\.json).*|images(?:/|\\\\)(?!marketing(?:/|\\\\)).*|live-examples|zips)(?:/|\\\\)"
+  ],
+  "static.versioned": [
+    "\\.[0-9a-z]{20}\\."
+  ],
+  "routing": {
+    "index": "/index.html",
+    "routes": {
+      "^(?!/styleguide|/docs/.|(?:/guide/(?:cli-quickstart|metadata|ngmodule|service-worker-(?:getstart|comm|configref)|learning-angular|webpack)|/news)(?:\\.html|/)?$|/testing|/api/(?:.+/[^/]+-|platform-browser/AnimationDriver|testing/|api/|animate/|(?:common/(?:NgModel|Control|MaxLengthValidator))|(?:[^/]+/)?(?:NgFor(?:$|-)|AnimationStateDeclarationMetadata|CORE_DIRECTIVES|PLATFORM_PIPES|DirectiveMetadata|HTTP_PROVIDERS))|.*/stackblitz(?:\\.html)?(?:\\?.*)?$|.*\\.[^\/.]+$)": {
+        "match": "regex"
+      }
+    }
+  }
+}
diff --git a/aio/package.json b/aio/package.json
new file mode 100644
index 000000000000..b8cdcaff5f11
--- /dev/null
+++ b/aio/package.json
@@ -0,0 +1,165 @@
+{
+  "name": "angular.io",
+  "version": "0.0.0",
+  "main": "index.js",
+  "repository": "git@github.com:angular/angular.git",
+  "author": "Angular",
+  "license": "MIT",
+  "scripts": {
+    "preinstall": "node ../tools/yarn/check-yarn.js",
+    "postinstall": "node tools/cli-patches/patch.js && uglifyjs node_modules/lunr/lunr.js -c -m -o src/assets/js/lunr.min.js --source-map",
+    "aio-use-local": "node tools/ng-packages-installer overwrite . --debug --ignore-packages @angular/service-worker",
+    "aio-use-npm": "node tools/ng-packages-installer restore .",
+    "aio-check-local": "node tools/ng-packages-installer check .",
+    "ng": "yarn check-env && ng",
+    "start": "yarn check-env && ng serve --configuration=fast",
+    "build": "yarn build-for stable",
+    "prebuild-for": "yarn setup",
+    "build-for": "yarn ~~build --configuration",
+    "prebuild-local": "yarn setup-local",
+    "build-local": "yarn ~~build --configuration=stable",
+    "lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint && yarn tools-lint",
+    "test": "yarn check-env && ng test",
+    "pree2e": "yarn check-env && yarn update-webdriver",
+    "e2e": "ng e2e --no-webdriver-update",
+    "presetup": "yarn install --frozen-lockfile && yarn ~~check-env && yarn boilerplate:remove",
+    "setup": "yarn aio-use-npm && yarn example-use-npm",
+    "postsetup": "yarn boilerplate:add && yarn build-ie-polyfills && yarn docs",
+    "presetup-local": "yarn presetup",
+    "setup-local": "yarn aio-use-local && yarn example-use-local",
+    "postsetup-local": "yarn postsetup",
+    "test-pwa-score-localhost": "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": "yarn example-check-local && node ./tools/examples/run-example-e2e",
+    "example-lint": "tslint -c \"content/examples/tslint.json\" \"content/examples/**/*.ts\" -e \"content/examples/styleguide/**/*.avoid.ts\"",
+    "example-use-local": "node tools/ng-packages-installer overwrite ./tools/examples/shared --debug",
+    "example-use-npm": "node tools/ng-packages-installer restore ./tools/examples/shared",
+    "example-check-local": "node tools/ng-packages-installer check ./tools/examples/shared",
+    "deploy-preview": "scripts/deploy-preview.sh",
+    "deploy-production": "scripts/deploy-to-firebase.sh",
+    "check-env": "yarn ~~check-env",
+    "postcheck-env": "yarn aio-check-local",
+    "payload-size": "scripts/payload.sh",
+    "predocs": "yarn generate-stackblitz && yarn generate-zips",
+    "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",
+    "redirects-test": "jasmine-ts tests/deployment/unit/**/*.spec.ts",
+    "firebase-utils-test": "jasmine-ts tools/firebase-test-utils/*.spec.ts",
+    "tools-lint": "tslint -c \"tools/tslint.json\" \"tools/firebase-test-utils/**/*.ts\"",
+    "tools-test": "./scripts/deploy-to-firebase.test.sh && yarn docs-test && yarn boilerplate:test && jasmine tools/ng-packages-installer/index.spec.js && yarn firebase-utils-test",
+    "preserve-and-sync": "yarn docs",
+    "serve-and-sync": "concurrently --kill-others \"yarn docs-watch --watch-only\" \"yarn start\"",
+    "boilerplate:add": "node ./tools/examples/example-boilerplate add",
+    "boilerplate:remove": "node ./tools/examples/example-boilerplate remove",
+    "boilerplate:test": "node tools/examples/test.js",
+    "generate-stackblitz": "node ./tools/stackblitz-builder/generateStackblitz",
+    "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/",
+    "build-ie-polyfills": "yarn webpack-cli src/ie-polyfills.js -o src/generated/ie-polyfills.min.js --mode production",
+    "update-webdriver": "webdriver-manager update --standalone false --gecko false $CHROMEDRIVER_VERSION_ARG",
+    "~~check-env": "node scripts/check-environment",
+    "~~build": "ng build",
+    "post~~build": "yarn sw-manifest && yarn sw-copy"
+  },
+  "engines": {
+    "node": ">=8.9.1 <9.0.0",
+    "yarn": ">=1.3.2 <2.0.0"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "6.0.0",
+    "@angular/cdk": "6.0.0",
+    "@angular/common": "6.0.0",
+    "@angular/core": "6.0.0",
+    "@angular/elements": "6.0.0",
+    "@angular/forms": "6.0.0",
+    "@angular/http": "6.0.0",
+    "@angular/material": "6.0.0",
+    "@angular/platform-browser": "6.0.0",
+    "@angular/platform-browser-dynamic": "6.0.0",
+    "@angular/platform-server": "6.0.0",
+    "@angular/router": "6.0.0",
+    "@angular/service-worker": "^1.0.0-beta.16",
+    "@webcomponents/custom-elements": "^1.0.8",
+    "classlist.js": "^1.1.20150312",
+    "core-js": "^2.4.1",
+    "jasmine": "^2.6.0",
+    "ng-pwa-tools": "^0.0.10",
+    "rxjs": "6.0.0-uncanny-rc.7",
+    "rxjs-compat": "6.0.0-uncanny-rc.7",
+    "tslib": "^1.9.0",
+    "web-animations-js": "^2.2.5",
+    "zone.js": "^0.8.26"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^0.6.0",
+    "@angular/cli": "^6.0.0",
+    "@angular/compiler": "6.0.0",
+    "@angular/compiler-cli": "6.0.0",
+    "@angular/language-service": "6.0.0",
+    "@types/jasmine": "^2.5.52",
+    "@types/jasminewd2": "^2.0.3",
+    "@types/node": "~6.0.60",
+    "archiver": "^1.3.0",
+    "canonical-path": "^0.0.2",
+    "chalk": "^2.1.0",
+    "cjson": "^0.5.0",
+    "codelyzer": "~4.2.1",
+    "concurrently": "^3.4.0",
+    "cross-spawn": "^5.1.0",
+    "css-selector-parser": "^1.3.0",
+    "dgeni": "^0.4.7",
+    "dgeni-packages": "^0.26.2",
+    "entities": "^1.1.1",
+    "eslint": "^3.19.0",
+    "eslint-plugin-jasmine": "^2.2.0",
+    "firebase-tools": "^3.2.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",
+    "http-server": "^0.9.0",
+    "ignore": "^3.3.3",
+    "image-size": "^0.5.1",
+    "jasmine-core": "^2.8.0",
+    "jasmine-marbles": "^0.3.1",
+    "jasmine-spec-reporter": "^4.1.0",
+    "jasmine-ts": "^0.2.1",
+    "jsdom": "^9.12.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.5.0",
+    "lodash": "^4.17.4",
+    "lunr": "^2.1.0",
+    "protractor": "^5.2.0",
+    "rehype": "^4.0.0",
+    "rehype-slug": "^2.0.0",
+    "remark": "^7.0.0",
+    "remark-html": "^6.0.0",
+    "rimraf": "^2.6.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.7",
+    "tree-kill": "^1.1.0",
+    "ts-node": "^3.3.0",
+    "tslint": "~5.9.1",
+    "typescript": "~2.7.2",
+    "uglify-js": "^3.0.15",
+    "unist-util-filter": "^0.2.1",
+    "unist-util-source": "^1.0.1",
+    "unist-util-visit": "^1.1.1",
+    "unist-util-visit-parents": "^1.1.1",
+    "vrsource-tslint-rules": "^5.8.2",
+    "watchr": "^3.0.1",
+    "webpack-cli": "^2.0.14",
+    "xregexp": "^4.0.0",
+    "yargs": "^7.0.2"
+  }
+}
diff --git a/aio/scripts/_payload-limits.json b/aio/scripts/_payload-limits.json
new file mode 100755
index 000000000000..b02773aeef4b
--- /dev/null
+++ b/aio/scripts/_payload-limits.json
@@ -0,0 +1,12 @@
+{
+  "aio": {
+    "master": {
+      "uncompressed": {
+        "runtime": 2768,
+        "main": 475855,
+        "polyfills": 38453,
+        "prettify": 14913
+      }
+    }
+  }
+}
diff --git a/aio/scripts/check-environment.js b/aio/scripts/check-environment.js
new file mode 100644
index 000000000000..cd571b64ac59
--- /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
new file mode 100755
index 000000000000..70b3e2ee8411
--- /dev/null
+++ b/aio/scripts/deploy-preview.sh
@@ -0,0 +1,58 @@
+#!/usr/bin/env bash
+
+# WARNING: NGBUILDS_IO_KEY should NOT be printed.
+set +x -eu -o pipefail
+exec 3>&1
+
+
+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" .
+
+  # Deploy to staging
+  readonly output=$(
+    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
+  )
+  readonly isHidden=$([[ `echo $output | grep 'non-public'` ]] && echo "true" || echo "")
+  readonly httpCode=$(echo "$output" | 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 ]] && [[ "$isHidden" != "true" ]]; then
+    yarn test-pwa-score "$DEPLOYED_URL" "$MIN_PWA_SCORE"
+  fi
+
+  # Check the bundle sizes.
+  yarn payload-size
+)
diff --git a/aio/scripts/deploy-to-firebase.sh b/aio/scripts/deploy-to-firebase.sh
new file mode 100755
index 000000000000..f72aeb1c16bd
--- /dev/null
+++ b/aio/scripts/deploy-to-firebase.sh
@@ -0,0 +1,104 @@
+#!/usr/bin/env bash
+
+# WARNING: FIREBASE_TOKEN should NOT be printed.
+set +x -eu -o pipefail
+
+# Only deploy if this not a PR. PRs are deployed early in `build.sh`.
+if [[ $TRAVIS_PULL_REQUEST != "false" ]]; then
+  echo "Skipping deploy because this is a PR build."
+  exit 0
+fi
+
+# 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
+
+# The deployment mode is computed based on the branch we are building
+if [[ $TRAVIS_BRANCH == master ]]; then
+  readonly deployEnv=next
+elif [[ $TRAVIS_BRANCH == $STABLE_BRANCH ]]; then
+  readonly deployEnv=stable
+else
+  # Extract the major versions from the branches, e.g. the 4 from 4.3.x
+  readonly majorVersion=${TRAVIS_BRANCH%%.*}
+  readonly majorVersionStable=${STABLE_BRANCH%%.*}
+
+  # Do not deploy if the major version is not less than the stable branch major version
+  if [[ !( "$majorVersion" < "$majorVersionStable" ) ]]; then
+    echo "Skipping deploy of branch \"${TRAVIS_BRANCH}\" to firebase."
+    echo "We only deploy archive branches with the major version less than the stable branch: \"${STABLE_BRANCH}\""
+    exit 0
+  fi
+
+  # Find the branch that has highest minor version for the given `$majorVersion`
+  readonly mostRecentMinorVersion=$(
+    # List the branches that start with the major version
+    git ls-remote origin refs/heads/${majorVersion}.*.x |
+    # Extract the version number
+    awk -F'/' '{print $3}' |
+    # Sort by the minor version
+    sort -t. -k 2,2n |
+    # Get the highest version
+    tail -n1
+  )
+
+  # Do not deploy as it is not the latest branch for the given major version
+  if [[ $TRAVIS_BRANCH != $mostRecentMinorVersion ]]; then
+    echo "Skipping deploy of branch \"${TRAVIS_BRANCH}\" to firebase."
+    echo "There is a more recent branch with the same major version: \"${mostRecentMinorVersion}\""
+    exit 0
+  fi
+
+  readonly deployEnv=archive
+fi
+
+case $deployEnv in
+  next)
+    readonly projectId=aio-staging
+    readonly deployedUrl=https://next.angular.io/
+    readonly firebaseToken=$FIREBASE_TOKEN
+    ;;
+  stable)
+    readonly projectId=angular-io
+    readonly deployedUrl=https://angular.io/
+    readonly firebaseToken=$FIREBASE_TOKEN
+    ;;
+  archive)
+    readonly projectId=v${majorVersion}-angular-io
+    readonly deployedUrl=https://v${majorVersion}.angular.io/
+    readonly firebaseToken=$FIREBASE_TOKEN
+    ;;
+esac
+
+echo "Git branch        : $TRAVIS_BRANCH"
+echo "Build/deploy mode : $deployEnv"
+echo "Firebase project  : $projectId"
+echo "Deployment URL    : $deployedUrl"
+
+if [[ ${1:-} == "--dry-run" ]]; then
+  exit 0
+fi
+
+# Deploy
+(
+  cd "`dirname $0`/.."
+
+  # Build the app
+  yarn build-for $deployEnv
+
+  # Include any mode-specific files
+  cp -rf src/extra-files/$deployEnv/. dist/
+
+  # 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/deploy-to-firebase.test.sh b/aio/scripts/deploy-to-firebase.test.sh
new file mode 100755
index 000000000000..0ffea8e128dd
--- /dev/null
+++ b/aio/scripts/deploy-to-firebase.test.sh
@@ -0,0 +1,159 @@
+#!/usr/bin/env bash
+set +x -eu -o pipefail
+
+function check {
+  if [[ $1 == $2 ]]; then
+    echo Pass
+    exit 0
+  fi
+  echo Fail
+  echo ---- Expected ----
+  echo "$2"
+  echo ---- Actual   ----
+  echo "$1"
+  exit 1
+}
+
+(
+  echo ===== master - skip deploy - pull request
+  actual=$(
+    export TRAVIS_PULL_REQUEST=true
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy because this is a PR build."
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== master - deploy success
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=master
+    export TRAVIS_COMMIT=$(git ls-remote origin master | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Git branch        : master
+Build/deploy mode : next
+Firebase project  : aio-staging
+Deployment URL    : https://next.angular.io/"
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== master - skip deploy - commit not HEAD
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=master
+    export TRAVIS_COMMIT=DUMMY_TEST_COMMIT
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy because DUMMY_TEST_COMMIT is not the latest commit ($(git ls-remote origin master | cut -c1-40))."
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== stable - deploy success
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=4.3.x
+    export STABLE_BRANCH=4.3.x
+    export TRAVIS_COMMIT=$(git ls-remote origin 4.3.x | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Git branch        : 4.3.x
+Build/deploy mode : stable
+Firebase project  : angular-io
+Deployment URL    : https://angular.io/"
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== stable - skip deploy - commit not HEAD
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=4.3.x
+    export STABLE_BRANCH=4.3.x
+    export TRAVIS_COMMIT=DUMMY_TEST_COMMIT
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy because DUMMY_TEST_COMMIT is not the latest commit ($(git ls-remote origin 4.3.x | cut -c1-40))."
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== archive - deploy success
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=2.4.x
+    export STABLE_BRANCH=4.3.x
+    export TRAVIS_COMMIT=$(git ls-remote origin 2.4.x | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Git branch        : 2.4.x
+Build/deploy mode : archive
+Firebase project  : v2-angular-io
+Deployment URL    : https://v2.angular.io/"
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== archive - skip deploy - commit not HEAD
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=2.4.x
+    export STABLE_BRANCH=4.3.x
+    export TRAVIS_COMMIT=DUMMY_TEST_COMMIT
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy because DUMMY_TEST_COMMIT is not the latest commit ($(git ls-remote origin 2.4.x | cut -c1-40))."
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== archive - skip deploy - major version too high, lower minor
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=2.1.x
+    export STABLE_BRANCH=2.2.x
+    export TRAVIS_COMMIT=$(git ls-remote origin 2.1.x | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy of branch \"2.1.x\" to firebase.
+We only deploy archive branches with the major version less than the stable branch: \"2.2.x\""
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== archive - skip deploy - major version too high, higher minor
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=2.4.x
+    export STABLE_BRANCH=2.2.x
+    export TRAVIS_COMMIT=$(git ls-remote origin 2.4.x | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy of branch \"2.4.x\" to firebase.
+We only deploy archive branches with the major version less than the stable branch: \"2.2.x\""
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== archive - skip deploy - minor version too low
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=2.1.x
+    export STABLE_BRANCH=4.3.x
+    export TRAVIS_COMMIT=$(git ls-remote origin 2.1.x | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy of branch \"2.1.x\" to firebase.
+There is a more recent branch with the same major version: \"2.4.x\""
+  check "$actual" "$expected"
+)
diff --git a/aio/scripts/payload.sh b/aio/scripts/payload.sh
new file mode 100755
index 000000000000..0ab4b73fb91d
--- /dev/null
+++ b/aio/scripts/payload.sh
@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+set -eu -o pipefail
+
+readonly thisDir=$(cd $(dirname $0); pwd)
+readonly parentDir=$(dirname $thisDir)
+
+# Track payload size functions
+source ../scripts/ci/payload-size.sh
+
+# Provide node_modules from aio
+NODE_MODULES_BIN=$PROJECT_ROOT/aio/node_modules/.bin/
+
+trackPayloadSize "aio" "dist/*.js" true true "${thisDir}/_payload-limits.json"
+
diff --git a/aio/scripts/test-production.sh b/aio/scripts/test-production.sh
new file mode 100755
index 000000000000..313d9b946a5b
--- /dev/null
+++ b/aio/scripts/test-production.sh
@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+set +x -eu -o pipefail
+
+(
+  readonly thisDir="$(cd $(dirname ${BASH_SOURCE[0]}); pwd)"
+  readonly aioDir="$(realpath $thisDir/..)"
+
+  readonly protractorConf="$aioDir/tests/deployment/e2e/protractor.conf.js"
+  readonly minPwaScore="95"
+  readonly urls=(
+    "https://angular.io/"
+    "https://next.angular.io/"
+  )
+
+  cd "$aioDir"
+
+  # Install dependencies.
+  echo -e "\nInstalling dependencies in '$aioDir'...\n-----"
+  yarn install --frozen-lockfile
+  yarn update-webdriver
+
+  # Run checks for all URLs.
+  for url in "${urls[@]}"; do
+    echo -e "\nChecking '$url'...\n-----"
+
+    # Run basic e2e and deployment config tests.
+    yarn protractor "$protractorConf" --baseUrl "$url"
+
+    # Run PWA-score tests.
+    yarn test-pwa-score "$url" "$minPwaScore"
+  done
+
+  echo -e "\nAll checks passed!"
+)
diff --git a/aio/scripts/test-pwa-score.js b/aio/scripts/test-pwa-score.js
new file mode 100644
index 000000000000..f78a48cbd158
--- /dev/null
+++ b/aio/scripts/test-pwa-score.js
@@ -0,0 +1,109 @@
+#!/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.
+ *
+ * (Skips HTTPS-related audits, when run for HTTP URL.)
+ */
+
+// Imports
+const lighthouse = require('lighthouse');
+const chromeLauncher = require('lighthouse/chrome-launcher');
+const printer = require('lighthouse/lighthouse-cli/printer');
+const config = require('lighthouse/lighthouse-core/config/default.js');
+
+// Constants
+const CHROME_LAUNCH_OPTS = {};
+const SKIPPED_HTTPS_AUDITS = ['redirects-http'];
+const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/';
+
+
+// Specify the path and flags for Chrome on Travis
+if (process.env.TRAVIS) {
+  process.env.LIGHTHOUSE_CHROMIUM_PATH = process.env.CHROME_BIN;
+  CHROME_LAUNCH_OPTS.chromeFlags = ['--no-sandbox'];
+}
+
+// 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) {
+    skipHttpsAudits(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 launchChromeAndRunLighthouse(url, flags, config) {
+  return chromeLauncher.launch(CHROME_LAUNCH_OPTS).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})`);
+
+    // Remove the artifacts, which are not necessary for the report.
+    // (Saves ~1,500,000 lines of formatted JSON output \o/)
+    results.artifacts = undefined;
+
+    promise = printer.write(results, 'json', logFile);
+  }
+
+  return promise.then(() => Math.round(results.score));
+}
+
+function skipHttpsAudits(config) {
+  console.info(`Skipping HTTPS-related audits (${SKIPPED_HTTPS_AUDITS.join(', ')})...`);
+  config.settings.skipAudits = SKIPPED_HTTPS_AUDITS;
+}
diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
new file mode 100644
index 000000000000..b03d3c44cd18
--- /dev/null
+++ b/aio/src/app/app.component.html
@@ -0,0 +1,74 @@
+<div id="top-of-page"></div>
+
+<div *ngIf="isFetching" class="progress-bar-container">
+  <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
+</div>
+
+<mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
+  <mat-toolbar-row class="notification-container">
+    <aio-notification
+      notificationId="angular-v6-announcement"
+      expirationDate="2018-07-01"
+      [dismissOnContentClick]="true"
+      (dismissed)="notificationDismissed()">
+      <a href="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4">
+        <mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
+        <span class="message">Version 6 of Angular Now Available!</span>
+        <span class="action-button">Learn More</span>
+      </a>
+    </aio-notification>
+  </mat-toolbar-row>
+  <mat-toolbar-row>
+    <button mat-button class="hamburger" [class.starting]="isStarting" (click)="sidenav.toggle()" title="Docs menu">
+      <mat-icon svgIcon="menu"></mat-icon>
+    </button>
+    <a class="nav-link home" href="/" [ngSwitch]="isSideBySide">
+      <img *ngSwitchCase="true" src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home">
+      <img *ngSwitchDefault src="assets/images/logos/angular/shield-large.svg" width="37" height="40" title="Home" alt="Home">
+    </a>
+    <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
+    <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
+    <div class="toolbar-external-icons-container">
+      <a  href="https://twitter.com/angular" title="Twitter">
+        <img src="assets/images/logos/twitter-icon.svg"></a>
+      <a  href="https://github.com/angular/angular" title="GitHub">
+        <img src="assets/images/logos/github-icon.svg"></a>
+    </div>
+  </mat-toolbar-row>
+</mat-toolbar>
+
+<aio-search-results #searchResultsView *ngIf="showSearchResults" [searchResults]="searchResults | async" (resultSelected)="hideSearchResults()"></aio-search-results>
+
+<mat-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
+
+  <mat-sidenav [ngClass]="{'collapsed': !isSideBySide}" #sidenav class="sidenav" [mode]="mode" [opened]="isOpened" (openedChange)="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">
+      <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select>
+    </div>
+  </mat-sidenav>
+
+  <section class="sidenav-content" [id]="pageId" role="content">
+    <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
+    <aio-doc-viewer [class.no-animations]="isStarting"
+        [doc]="currentDocument"
+        (docReady)="onDocReady()"
+        (docRemoved)="onDocRemoved()"
+        (docInserted)="onDocInserted()"
+        (docRendered)="onDocRendered()">
+    </aio-doc-viewer>
+    <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
+  </section>
+
+</mat-sidenav-container>
+
+<div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (mousewheel)="restrainScrolling($event)">
+  <aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
+</div>
+
+<footer class="no-print">
+  <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
new file mode 100644
index 000000000000..5b646af0a51a
--- /dev/null
+++ b/aio/src/app/app.component.spec.ts
@@ -0,0 +1,1398 @@
+import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
+import { inject, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { Title } from '@angular/platform-browser';
+import { APP_BASE_HREF } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { MatProgressBar, MatSidenav } from '@angular/material';
+import { By } from '@angular/platform-browser';
+
+import { of, timer } from 'rxjs';
+import { first, mapTo } from 'rxjs/operators';
+
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
+import { DocumentService } from 'app/documents/document.service';
+import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
+import { Deployment } from 'app/shared/deployment.service';
+import { ElementsLoader } from 'app/custom-elements/elements-loader';
+import { GaService } from 'app/shared/ga.service';
+import { LocationService } from 'app/shared/location.service';
+import { Logger } from 'app/shared/logger.service';
+import { MockLocationService } from 'testing/location.service';
+import { MockLogger } from 'testing/logger.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/shared/search-results/search-results.component';
+import { SearchService } from 'app/search/search.service';
+import { SelectComponent } from 'app/shared/select/select.component';
+import { TocItem, TocService } from 'app/shared/toc.service';
+
+const sideBySideBreakPoint = 992;
+const hideToCBreakPoint = 800;
+const startedDelay = 100;
+
+describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
+  let documentService: DocumentService;
+  let docViewer: HTMLElement;
+  let docViewerComponent: DocViewerComponent;
+  let hamburger: HTMLButtonElement;
+  let locationService: MockLocationService;
+  let sidenav: MatSidenav;
+  let tocService: TocService;
+
+  async function awaitDocRendered() {
+    const newDocPromise = new Promise(resolve => documentService.currentDocument.subscribe(resolve));
+    const docRenderedPromise = new Promise(resolve => docViewerComponent.docRendered.subscribe(resolve));
+
+    await newDocPromise;       // Wait for the new document to be fetched.
+    fixture.detectChanges();   // Propagate document change to the view (i.e to `DocViewer`).
+    await docRenderedPromise;  // Wait for the `docRendered` event.
+  };
+
+  function initializeTest(waitForDoc = true) {
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+    component.onResize(sideBySideBreakPoint + 1); // wide by default
+
+    const de = fixture.debugElement;
+    const docViewerDe = de.query(By.css('aio-doc-viewer'));
+
+    documentService = de.injector.get<DocumentService>(DocumentService);
+    docViewer = docViewerDe.nativeElement;
+    docViewerComponent = docViewerDe.componentInstance;
+    hamburger = de.query(By.css('.hamburger')).nativeElement;
+    locationService = de.injector.get<any>(LocationService);
+    sidenav = de.query(By.directive(MatSidenav)).componentInstance;
+    tocService = de.injector.get<TocService>(TocService);
+
+    return waitForDoc && awaitDocRendered();
+  };
+
+
+  describe('with proper DocViewer', () => {
+
+    beforeEach(async () => {
+      DocViewerComponent.animationsEnabled = false;
+
+      createTestingModule('a/b');
+      await initializeTest();
+    });
+
+    afterEach(() => DocViewerComponent.animationsEnabled = true);
+
+    it('should create', () => {
+      expect(component).toBeDefined();
+    });
+
+    describe('hasFloatingToc', () => {
+      it('should initially be false', () => {
+        const fixture2 = TestBed.createComponent(AppComponent);
+        const component2 = fixture2.componentInstance;
+
+        expect(component2.hasFloatingToc).toBe(false);
+      });
+
+      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);
+      });
+    });
+
+    describe('isSideBySide', () => {
+      it('should be updated on resize', () => {
+        component.onResize(sideBySideBreakPoint - 1);
+        expect(component.isSideBySide).toBe(false);
+
+        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', () => {
+      const navigateTo = (path: string) => {
+        locationService.go(path);
+        component.updateSideNav();
+        fixture.detectChanges();
+      };
+      const resizeTo = (width: number) => {
+        component.onResize(width);
+        fixture.detectChanges();
+      };
+      const toggleSidenav = () => {
+        hamburger.click();
+        fixture.detectChanges();
+      };
+
+      describe('when side-by-side (wide)', () => {
+        beforeEach(() => resizeTo(sideBySideBreakPoint + 1));  // side-by-side
+
+        it('should open when navigating to a guide page (guide/pipes)', () => {
+          navigateTo('guide/pipes');
+          expect(sidenav.opened).toBe(true);
+        });
+
+        it('should open when navigating to an api page', () => {
+          navigateTo('api/a/b/c/d');
+          expect(sidenav.opened).toBe(true);
+        });
+
+        it('should be closed when navigating to a marketing page (features)', () => {
+          navigateTo('features');
+          expect(sidenav.opened).toBe(false);
+        });
+
+        describe('when manually closed', () => {
+
+          beforeEach(() => {
+            navigateTo('guide/pipes');
+            toggleSidenav();
+          });
+
+          it('should be closed', () => {
+            expect(sidenav.opened).toBe(false);
+          });
+
+          it('should stay closed when navigating from one guide page to another', () => {
+            navigateTo('guide/bags');
+            expect(sidenav.opened).toBe(false);
+          });
+
+          it('should stay closed when navigating from a guide page to api page', () => {
+            navigateTo('api');
+            expect(sidenav.opened).toBe(false);
+          });
+
+          it('should reopen when navigating to market page and back to guide page', () => {
+            navigateTo('features');
+            navigateTo('guide/bags');
+            expect(sidenav.opened).toBe(true);
+          });
+        });
+      });
+
+      describe('when NOT side-by-side (narrow)', () => {
+        beforeEach(() => resizeTo(sideBySideBreakPoint - 1)); // NOT side-by-side
+
+        it('should be closed when navigating to a guide page (guide/pipes)', () => {
+          navigateTo('guide/pipes');
+          expect(sidenav.opened).toBe(false);
+        });
+
+        it('should be closed when navigating to an api page', () => {
+          navigateTo('api/a/b/c/d');
+          expect(sidenav.opened).toBe(false);
+        });
+
+        it('should be closed when navigating to a marketing page (features)', () => {
+          navigateTo('features');
+          expect(sidenav.opened).toBe(false);
+        });
+
+        describe('when manually opened', () => {
+
+          beforeEach(() => {
+            navigateTo('guide/pipes');
+            toggleSidenav();
+          });
+
+          it('should be open', () => {
+            expect(sidenav.opened).toBe(true);
+          });
+
+          it('should close when clicking in gray content area overlay', () => {
+            const sidenavBackdrop = fixture.debugElement.query(By.css('.mat-drawer-backdrop')).nativeElement;
+            sidenavBackdrop.click();
+            fixture.detectChanges();
+            expect(sidenav.opened).toBe(false);
+          });
+
+          it('should close when navigating to another guide page', () => {
+            navigateTo('guide/bags');
+            expect(sidenav.opened).toBe(false);
+          });
+
+          it('should close when navigating to api page', () => {
+            navigateTo('api');
+            expect(sidenav.opened).toBe(false);
+          });
+
+          it('should close again when navigating to market page', () => {
+            navigateTo('features');
+            expect(sidenav.opened).toBe(false);
+          });
+
+        });
+      });
+
+      describe('when changing side-by-side (narrow --> wide)', () => {
+        const sidenavDocs = ['api/a/b/c/d', 'guide/pipes'];
+        const nonSidenavDocs = ['features', 'about'];
+
+        sidenavDocs.forEach(doc => {
+          it(`should open when on a sidenav doc (${doc})`, () => {
+            resizeTo(sideBySideBreakPoint - 1);
+
+            navigateTo(doc);
+            expect(sidenav.opened).toBe(false);
+
+            resizeTo(sideBySideBreakPoint + 1);
+            expect(sidenav.opened).toBe(true);
+          });
+        });
+
+        nonSidenavDocs.forEach(doc => {
+          it(`should remain closed when on a non-sidenav doc (${doc})`, () => {
+            resizeTo(sideBySideBreakPoint - 1);
+
+            navigateTo(doc);
+            expect(sidenav.opened).toBe(false);
+
+            resizeTo(sideBySideBreakPoint + 1);
+            expect(sidenav.opened).toBe(false);
+          });
+        });
+
+        describe('when manually opened', () => {
+          sidenavDocs.forEach(doc => {
+            it(`should remain opened when on a sidenav doc (${doc})`, () => {
+              resizeTo(sideBySideBreakPoint - 1);
+
+              navigateTo(doc);
+              toggleSidenav();
+              expect(sidenav.opened).toBe(true);
+
+              resizeTo(sideBySideBreakPoint + 1);
+              expect(sidenav.opened).toBe(true);
+            });
+          });
+
+          nonSidenavDocs.forEach(doc => {
+            it(`should close when on a non-sidenav doc (${doc})`, () => {
+              resizeTo(sideBySideBreakPoint - 1);
+
+              navigateTo(doc);
+              toggleSidenav();
+              expect(sidenav.opened).toBe(true);
+
+              resizeTo(sideBySideBreakPoint + 1);
+              expect(sidenav.opened).toBe(false);
+            });
+          });
+        });
+      });
+
+      describe('when changing side-by-side (wide --> narrow)', () => {
+        const sidenavDocs = ['api/a/b/c/d', 'guide/pipes'];
+        const nonSidenavDocs = ['features', 'about'];
+
+        sidenavDocs.forEach(doc => {
+          it(`should close when on a sidenav doc (${doc})`, () => {
+            navigateTo(doc);
+            expect(sidenav.opened).toBe(true);
+
+            resizeTo(sideBySideBreakPoint - 1);
+            expect(sidenav.opened).toBe(false);
+          });
+        });
+
+        nonSidenavDocs.forEach(doc => {
+          it(`should remain closed when on a non-sidenav doc (${doc})`, () => {
+            navigateTo(doc);
+            expect(sidenav.opened).toBe(false);
+
+            resizeTo(sideBySideBreakPoint - 1);
+            expect(sidenav.opened).toBe(false);
+          });
+        });
+      });
+    });
+
+    describe('SideNav version selector', () => {
+      let selectElement: DebugElement;
+      let selectComponent: SelectComponent;
+
+      async function setupSelectorForTesting(mode?: string) {
+        createTestingModule('a/b', mode);
+        await initializeTest();
+        component.onResize(sideBySideBreakPoint + 1); // side-by-side
+        selectElement = fixture.debugElement.query(By.directive(SelectComponent));
+        selectComponent = selectElement.componentInstance;
+      }
+
+      it('should select the version that matches the deploy mode', async () => {
+        await setupSelectorForTesting();
+        expect(selectComponent.selected.title).toContain('stable');
+        await setupSelectorForTesting('next');
+        expect(selectComponent.selected.title).toContain('next');
+        await setupSelectorForTesting('archive');
+        expect(selectComponent.selected.title).toContain('v4');
+      });
+
+      it('should add the current raw version string to the selected version', async () => {
+        await setupSelectorForTesting();
+        expect(selectComponent.selected.title).toContain(`(v${component.versionInfo.raw})`);
+        await setupSelectorForTesting('next');
+        expect(selectComponent.selected.title).toContain(`(v${component.versionInfo.raw})`);
+        await setupSelectorForTesting('archive');
+        expect(selectComponent.selected.title).toContain(`(v${component.versionInfo.raw})`);
+      });
+
+      // Older docs versions have an href
+      it('should navigate when change to a version with a url', async () => {
+        await setupSelectorForTesting();
+        const versionWithUrlIndex = component.docVersions.findIndex(v => !!v.url);
+        const versionWithUrl = component.docVersions[versionWithUrlIndex];
+        selectElement.triggerEventHandler('change', { option: versionWithUrl, index: versionWithUrlIndex});
+        expect(locationService.go).toHaveBeenCalledWith(versionWithUrl.url);
+      });
+
+      it('should not navigate when change to a version without a url', async () => {
+        await setupSelectorForTesting();
+        const versionWithoutUrlIndex = component.docVersions.length;
+        const versionWithoutUrl = component.docVersions[versionWithoutUrlIndex] = { title: 'foo' };
+        selectElement.triggerEventHandler('change', { option: versionWithoutUrl, index: versionWithoutUrlIndex });
+        expect(locationService.go).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('currentDocument', () => {
+      const navigateTo = async (path: string) => {
+        locationService.go(path);
+        await awaitDocRendered();
+      };
+
+      it('should display a guide page (guide/pipes)', async () => {
+        await navigateTo('guide/pipes');
+        expect(docViewer.textContent).toMatch(/Pipes/i);
+      });
+
+      it('should display the api page', async () => {
+        await navigateTo('api');
+        expect(docViewer.textContent).toMatch(/API/i);
+      });
+
+      it('should display a marketing page', async () => {
+        await navigateTo('features');
+        expect(docViewer.textContent).toMatch(/Features/i);
+      });
+
+      it('should update the document title', async () => {
+        const titleService = TestBed.get(Title);
+        spyOn(titleService, 'setTitle');
+
+        await navigateTo('guide/pipes');
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Pipes');
+      });
+
+      it('should update the document title, with a default value if the document has no title', async () => {
+        const titleService = TestBed.get(Title);
+        spyOn(titleService, 'setTitle');
+
+        await navigateTo('no-title');
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular');
+      });
+    });
+
+    describe('auto-scrolling', () => {
+      const scrollDelay = 500;
+      let scrollService: ScrollService;
+      let scrollSpy: jasmine.Spy;
+      let scrollToTopSpy: jasmine.Spy;
+
+      beforeEach(() => {
+        scrollService = fixture.debugElement.injector.get<ScrollService>(ScrollService);
+        scrollSpy = spyOn(scrollService, 'scroll');
+        scrollToTopSpy = spyOn(scrollService, 'scrollToTop');
+      });
+
+      it('should not scroll immediately when the docId (path) changes', () => {
+        locationService.go('guide/pipes');
+        // deliberately not calling `fixture.detectChanges` because don't want `onDocInserted`
+        expect(scrollSpy).not.toHaveBeenCalled();
+        expect(scrollToTopSpy).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 navigating 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 navigating to the same path', () => {
+        locationService.go('guide/pipes');
+        scrollSpy.calls.reset();
+
+        locationService.go('guide/pipes');
+        expect(scrollSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('should scroll when re-nav to the empty path', () => {
+        locationService.go('');
+        scrollSpy.calls.reset();
+
+        locationService.go('');
+        expect(scrollSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('should scroll to top when call `onDocRemoved` directly', () => {
+        scrollToTopSpy.calls.reset();
+
+        component.onDocRemoved();
+        expect(scrollToTopSpy).toHaveBeenCalled();
+      });
+
+      it('should scroll after a delay when call `onDocInserted` directly', fakeAsync(() => {
+        component.onDocInserted();
+        expect(scrollSpy).not.toHaveBeenCalled();
+
+        tick(scrollDelay);
+        expect(scrollSpy).toHaveBeenCalled();
+      }));
+
+      it('should scroll (via `onDocInserted`) when finish navigating to a new doc', fakeAsync(() => {
+        expect(scrollToTopSpy).not.toHaveBeenCalled();
+
+        locationService.go('guide/pipes');
+        tick(1);                 // triggers the HTTP response for the document
+        fixture.detectChanges(); // triggers the event that calls `onDocInserted`
+
+        expect(scrollToTopSpy).toHaveBeenCalled();
+        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 tocContainer: HTMLElement|null;
+      let toc: HTMLElement|null;
+
+      const setHasFloatingToc = (hasFloatingToc: boolean) => {
+        component.hasFloatingToc = hasFloatingToc;
+        fixture.detectChanges();
+
+        tocContainer = fixture.debugElement.nativeElement.querySelector('.toc-container');
+        toc = tocContainer && tocContainer.querySelector('aio-toc');
+      };
+
+
+      it('should show/hide `<aio-toc>` based on `hasFloatingToc`', () => {
+        expect(tocContainer).toBeFalsy();
+        expect(toc).toBeFalsy();
+
+        setHasFloatingToc(true);
+        expect(tocContainer).toBeTruthy();
+        expect(toc).toBeTruthy();
+
+        setHasFloatingToc(false);
+        expect(tocContainer).toBeFalsy();
+        expect(toc).toBeFalsy();
+      });
+
+      it('should have a non-embedded `<aio-toc>` element', () => {
+        setHasFloatingToc(true);
+        expect(toc!.classList.contains('embedded')).toBe(false);
+      });
+
+      it('should update the TOC container\'s `maxHeight` based on `tocMaxHeight`', () => {
+        setHasFloatingToc(true);
+
+        expect(tocContainer!.style['max-height']).toBe('');
+
+        component.tocMaxHeight = '100';
+        fixture.detectChanges();
+
+        expect(tocContainer!.style['max-height']).toBe('100px');
+      });
+
+      it('should restrain scrolling inside the ToC container', () => {
+        const restrainScrolling = spyOn(component, 'restrainScrolling');
+        const evt = new MouseEvent('mousewheel');
+
+        setHasFloatingToc(true);
+        expect(restrainScrolling).not.toHaveBeenCalled();
+
+        tocContainer!.dispatchEvent(evt);
+        expect(restrainScrolling).toHaveBeenCalledWith(evt);
+      });
+
+      it('should not be loaded/registered until necessary', () => {
+        const loader: TestElementsLoader = fixture.debugElement.injector.get(ElementsLoader);
+        expect(loader.loadCustomElement).not.toHaveBeenCalled();
+
+        setHasFloatingToc(true);
+        expect(loader.loadCustomElement).toHaveBeenCalledWith('aio-toc');
+      });
+    });
+
+    describe('footer', () => {
+      it('should have version number', () => {
+        const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer')).nativeElement;
+        expect(versionEl.textContent).toContain(TestHttpClient.versionInfo.full);
+      });
+    });
+
+    describe('deployment banner', () => {
+      it('should show a message if the deployment mode is "archive"', async () => {
+        createTestingModule('a/b', 'archive');
+        await initializeTest();
+        const banner: HTMLElement = fixture.debugElement.query(By.css('aio-mode-banner')).nativeElement;
+        expect(banner.textContent).toContain('archived documentation for Angular v4');
+      });
+
+      it('should show no message if the deployment mode is not "archive"', async () => {
+        createTestingModule('a/b', 'stable');
+        await initializeTest();
+        const banner: HTMLElement = fixture.debugElement.query(By.css('aio-mode-banner')).nativeElement;
+        expect(banner.textContent!.trim()).toEqual('');
+      });
+    });
+
+    describe('search', () => {
+      describe('initialization', () => {
+        it('should initialize the search worker', inject([SearchService], (searchService: SearchService) => {
+          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('archive redirection', () => {
+      it('should redirect to `docs` if deployment mode is `archive` and not at a docs page', () => {
+        createTestingModule('', 'archive');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).toHaveBeenCalledWith('docs');
+
+        createTestingModule('resources', 'archive');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).toHaveBeenCalledWith('docs');
+
+        createTestingModule('guide/aot-compiler', 'archive');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial', 'archive');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial/toh-pt1', 'archive');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('docs', 'archive');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('api', 'archive');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('api/core/getPlatform', 'archive');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+      });
+
+      it('should not redirect if deployment mode is `next`', () => {
+        createTestingModule('', 'next');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('resources', 'next');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('guide/aot-compiler', 'next');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial', 'next');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial/toh-pt1', 'next');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('docs', 'next');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('api', 'next');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('api/core/getPlatform', 'next');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+      });
+
+      it('should not redirect to `docs` if deployment mode is `stable`', () => {
+        createTestingModule('', 'stable');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('resources', 'stable');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('guide/aot-compiler', 'stable');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial', 'stable');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial/toh-pt1', 'stable');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('docs', 'stable');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('api', 'stable');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('api/core/getPlatform', 'stable');
+        initializeTest(false);
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('with mocked DocViewer', () => {
+    const getDocViewer = () => fixture.debugElement.query(By.css('aio-doc-viewer'));
+    const triggerDocViewerEvent =
+        (evt: 'docReady' | 'docRemoved' | 'docInserted' | 'docRendered') =>
+          getDocViewer().triggerEventHandler(evt, undefined);
+
+    beforeEach(() => {
+      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] }
+      });
+    });
+
+    describe('initial rendering', () => {
+      beforeEach(jasmine.clock().install);
+      afterEach(jasmine.clock().uninstall);
+
+      it('should initially disable Angular animations until a document is rendered', () => {
+        initializeTest(false);
+        jasmine.clock().tick(1);  // triggers the HTTP response for the document
+
+        expect(component.isStarting).toBe(true);
+        expect(fixture.debugElement.properties['@.disabled']).toBe(true);
+
+        triggerDocViewerEvent('docInserted');
+        jasmine.clock().tick(startedDelay);
+        fixture.detectChanges();
+        expect(component.isStarting).toBe(true);
+        expect(fixture.debugElement.properties['@.disabled']).toBe(true);
+
+        triggerDocViewerEvent('docRendered');
+        jasmine.clock().tick(startedDelay);
+        fixture.detectChanges();
+        expect(component.isStarting).toBe(false);
+        expect(fixture.debugElement.properties['@.disabled']).toBe(false);
+      });
+
+      it('should initially add the starting class until a document is rendered', () => {
+        initializeTest(false);
+        jasmine.clock().tick(1);  // triggers the HTTP response for the document
+        const sidenavContainer = fixture.debugElement.query(By.css('mat-sidenav-container')).nativeElement;
+
+        expect(component.isStarting).toBe(true);
+        expect(hamburger.classList.contains('starting')).toBe(true);
+        expect(sidenavContainer.classList.contains('starting')).toBe(true);
+
+        triggerDocViewerEvent('docInserted');
+        jasmine.clock().tick(startedDelay);
+        fixture.detectChanges();
+        expect(component.isStarting).toBe(true);
+        expect(hamburger.classList.contains('starting')).toBe(true);
+        expect(sidenavContainer.classList.contains('starting')).toBe(true);
+
+        triggerDocViewerEvent('docRendered');
+        jasmine.clock().tick(startedDelay);
+        fixture.detectChanges();
+        expect(component.isStarting).toBe(false);
+        expect(hamburger.classList.contains('starting')).toBe(false);
+        expect(sidenavContainer.classList.contains('starting')).toBe(false);
+      });
+
+      it('should initially disable animations on the DocViewer for the first rendering', () => {
+        initializeTest(false);
+        jasmine.clock().tick(1);  // triggers the HTTP response for the document
+
+        expect(component.isStarting).toBe(true);
+        expect(docViewer.classList.contains('no-animations')).toBe(true);
+
+        triggerDocViewerEvent('docInserted');
+        jasmine.clock().tick(startedDelay);
+        fixture.detectChanges();
+        expect(component.isStarting).toBe(true);
+        expect(docViewer.classList.contains('no-animations')).toBe(true);
+
+        triggerDocViewerEvent('docRendered');
+        jasmine.clock().tick(startedDelay);
+        fixture.detectChanges();
+        expect(component.isStarting).toBe(false);
+        expect(docViewer.classList.contains('no-animations')).toBe(false);
+      });
+    });
+
+    describe('subsequent rendering', () => {
+      beforeEach(jasmine.clock().install);
+      afterEach(jasmine.clock().uninstall);
+
+      it('should set the transitioning class on `.app-toolbar` while a document is being rendered', () => {
+        initializeTest(false);
+        jasmine.clock().tick(1);  // triggers the HTTP response for the document
+        const toolbar = fixture.debugElement.query(By.css('.app-toolbar'));
+
+        // Initially, `isTransitoning` is true.
+        expect(component.isTransitioning).toBe(true);
+        expect(toolbar.classes['transitioning']).toBe(true);
+
+        triggerDocViewerEvent('docRendered');
+        fixture.detectChanges();
+        expect(component.isTransitioning).toBe(false);
+        expect(toolbar.classes['transitioning']).toBe(false);
+
+        // While a document is being rendered, `isTransitoning` is set to true.
+        triggerDocViewerEvent('docReady');
+        fixture.detectChanges();
+        expect(component.isTransitioning).toBe(true);
+        expect(toolbar.classes['transitioning']).toBe(true);
+
+        triggerDocViewerEvent('docRendered');
+        fixture.detectChanges();
+        expect(component.isTransitioning).toBe(false);
+        expect(toolbar.classes['transitioning']).toBe(false);
+      });
+
+      it('should update the sidenav state as soon as a new document is inserted (but not before)', () => {
+        initializeTest(false);
+        jasmine.clock().tick(1);  // triggers the HTTP response for the document
+        jasmine.clock().tick(0);  // calls `updateSideNav()` for initial rendering
+        const updateSideNavSpy = spyOn(component, 'updateSideNav');
+
+        triggerDocViewerEvent('docReady');
+        jasmine.clock().tick(0);
+        expect(updateSideNavSpy).not.toHaveBeenCalled();
+
+        triggerDocViewerEvent('docInserted');
+        jasmine.clock().tick(0);
+        expect(updateSideNavSpy).toHaveBeenCalledTimes(1);
+
+        updateSideNavSpy.calls.reset();
+
+        triggerDocViewerEvent('docReady');
+        jasmine.clock().tick(0);
+        expect(updateSideNavSpy).not.toHaveBeenCalled();
+
+        triggerDocViewerEvent('docInserted');
+        jasmine.clock().tick(0);
+        expect(updateSideNavSpy).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('pageId', () => {
+      const navigateTo = (path: string) => {
+        locationService.go(path);
+        jasmine.clock().tick(1);  // triggers the HTTP response for the document
+        triggerDocViewerEvent('docInserted');
+        jasmine.clock().tick(0);  // triggers `updateHostClasses()`
+        fixture.detectChanges();
+      };
+
+      beforeEach(jasmine.clock().install);
+      afterEach(jasmine.clock().uninstall);
+
+      it('should set the id of the doc viewer container based on the current doc', () => {
+        initializeTest(false);
+        const container = fixture.debugElement.query(By.css('section.sidenav-content'));
+
+        navigateTo('guide/pipes');
+        expect(component.pageId).toEqual('guide-pipes');
+        expect(container.properties['id']).toEqual('guide-pipes');
+
+        navigateTo('news');
+        expect(component.pageId).toEqual('news');
+        expect(container.properties['id']).toEqual('news');
+
+        navigateTo('');
+        expect(component.pageId).toEqual('home');
+        expect(container.properties['id']).toEqual('home');
+      });
+
+      it('should not be affected by changes to the query', () => {
+        initializeTest(false);
+        const container = fixture.debugElement.query(By.css('section.sidenav-content'));
+
+        navigateTo('guide/pipes');
+        navigateTo('guide/other?search=http');
+
+        expect(component.pageId).toEqual('guide-other');
+        expect(container.properties['id']).toEqual('guide-other');
+      });
+    });
+
+    describe('hostClasses', () => {
+      const triggerUpdateHostClasses = () => {
+        jasmine.clock().tick(1);  // triggers the HTTP response for document
+        triggerDocViewerEvent('docInserted');
+        jasmine.clock().tick(0);  // triggers `updateHostClasses()`
+        fixture.detectChanges();
+      };
+      const navigateTo = (path: string) => {
+        locationService.go(path);
+        triggerUpdateHostClasses();
+      };
+
+      beforeEach(jasmine.clock().install);
+      afterEach(jasmine.clock().uninstall);
+
+      it('should set the css classes of the host container based on the current doc and navigation view', () => {
+        initializeTest(false);
+
+        navigateTo('guide/pipes');
+        checkHostClass('page', 'guide-pipes');
+        checkHostClass('folder', 'guide');
+        checkHostClass('view', 'SideNav');
+
+        navigateTo('features');
+        checkHostClass('page', 'features');
+        checkHostClass('folder', 'features');
+        checkHostClass('view', 'TopBar');
+
+        navigateTo('');
+        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', async () => {
+        initializeTest(false);
+
+        navigateTo('guide/pipes');
+        checkHostClass('sidenav', 'open');
+
+        sidenav.close();
+        await waitForSidenavOpenedChange();
+        fixture.detectChanges();
+        checkHostClass('sidenav', 'closed');
+
+        sidenav.open();
+        await waitForSidenavOpenedChange();
+        fixture.detectChanges();
+        checkHostClass('sidenav', 'open');
+
+        async function waitForSidenavOpenedChange() {
+          const promise = new Promise(resolve => sidenav.openedChange.pipe(first()).subscribe(resolve));
+
+          await Promise.resolve();  // Wait for `MatSidenav.openedChange.emit()` to be called.
+          jasmine.clock().tick(0);  // Notify `MatSidenav.openedChange` observers.
+                                    // (It is an async `EventEmitter`, thus uses `setTimeout()`.)
+
+          await promise;
+        }
+      });
+
+      it('should set the css class of the host container based on the initial deployment mode', () => {
+        createTestingModule('a/b', 'archive');
+        initializeTest(false);
+
+        triggerUpdateHostClasses();
+        checkHostClass('mode', 'archive');
+      });
+
+      function checkHostClass(type: string, value: string) {
+        const host = fixture.debugElement;
+        const classes: string = 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('progress bar', () => {
+      const SHOW_DELAY = 200;
+      const HIDE_DELAY = 500;
+      const getProgressBar = () => fixture.debugElement.query(By.directive(MatProgressBar));
+      const initializeAndCompleteNavigation = () => {
+        initializeTest(false);
+        triggerDocViewerEvent('docReady');
+        tick(HIDE_DELAY);
+      };
+
+      it('should initially be hidden', () => {
+        initializeTest(false);
+        expect(getProgressBar()).toBeFalsy();
+      });
+
+      it('should be shown (after a delay) when the path changes', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('c/d');
+
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
+
+        tick(SHOW_DELAY - 1);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
+
+        tick(1);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeTruthy();
+      }));
+
+      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('');
+        triggerDocViewerEvent('docReady');
+
+        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 prepared quickly', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('c/d');
+
+        tick(SHOW_DELAY - 1);
+        triggerDocViewerEvent('docReady');
+
+        tick(1);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
+
+        tick(HIDE_DELAY);   // Fire the remaining timer or `fakeAsync()` complains.
+      }));
+
+      it('should be shown if preparing the doc takes too long', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('c/d');
+
+        tick(SHOW_DELAY);
+        triggerDocViewerEvent('docReady');
+
+        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 has been prepared', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('c/d');
+
+        tick(SHOW_DELAY);
+        triggerDocViewerEvent('docReady');
+
+        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 `onDocReady()`.
+
+        tick(SHOW_DELAY - 1);               // `onDocReady()` is triggered (for the last doc),
+        triggerDocViewerEvent('docReady');  // before the progress bar is shown.
+
+        tick(1);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
+
+        tick(HIDE_DELAY);   // Fire the remaining timer or `fakeAsync()` complains.
+      }));
+    });
+
+  });
+
+});
+
+//// test helpers ////
+
+function createTestingModule(initialUrl: string, mode: string = 'stable') {
+  const mockLocationService = new MockLocationService(initialUrl);
+  TestBed.resetTestingModule();
+  TestBed.configureTestingModule({
+    imports: [ AppModule ],
+    providers: [
+      { provide: APP_BASE_HREF, useValue: '/' },
+      { provide: ElementsLoader, useClass: TestElementsLoader },
+      { provide: GaService, useClass: TestGaService },
+      { provide: HttpClient, useClass: TestHttpClient },
+      { provide: LocationService, useFactory: () => mockLocationService },
+      { provide: Logger, useClass: MockLogger },
+      { provide: SearchService, useClass: MockSearchService },
+      { provide: Deployment, useFactory: () => {
+        const deployment = new Deployment(mockLocationService as any);
+        deployment.mode = mode;
+        return deployment;
+      }},
+    ]
+  });
+}
+
+class TestElementsLoader {
+  loadContainedCustomElements = jasmine.createSpy('loadContainedCustomElements')
+      .and.returnValue(of(undefined));
+
+  loadCustomElement = jasmine.createSpy('loadCustomElement')
+      .and.returnValue(Promise.resolve());
+}
+
+class TestGaService {
+  locationChanged = jasmine.createSpy('locationChanged');
+}
+
+class TestHttpClient {
+
+  static versionInfo = {
+    raw: '4.0.0-rc.6',
+    major: 4,
+    minor: 0,
+    patch: 0,
+    prerelease: [ 'local' ],
+    build: 'sha.73808dd',
+    version: '4.0.0-local',
+    codeName: 'snapshot',
+    isSnapshot: true,
+    full: '4.0.0-local+sha.73808dd',
+    branch: 'master',
+    commitSHA: '73808dd38b5ccd729404936834d1568bd066de81'
+  };
+
+  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": [
+      {
+      "title": "Core",
+      "tooltip": "Learn the core capabilities of Angular",
+      "children": [
+          {
+            "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."
+          }
+        ]
+      },
+      {
+        "url": "api",
+        "title": "API",
+        "tooltip": "Details of the Angular classes and values."
+      }
+    ],
+    "docVersions": TestHttpClient.docVersions,
+
+    "__versionInfo": TestHttpClient.versionInfo,
+  };
+
+  get(url: string) {
+    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 class="no-toc">${title}</h1>`;
+      const contents = `${h1}<h2 id="#somewhere">Some heading</h2>`;
+      data = { id, contents };
+    }
+
+    // Preserve async nature of `HttpClient`.
+    return timer(1).pipe(mapTo(data));
+  }
+}
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
new file mode 100644
index 000000000000..e587d25ad165
--- /dev/null
+++ b/aio/src/app/app.component.ts
@@ -0,0 +1,414 @@
+import { Component, ElementRef, HostBinding, HostListener, OnInit,
+         QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+
+import { CurrentNodes, NavigationService, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
+import { DocumentService, DocumentContents } from 'app/documents/document.service';
+import { Deployment } from 'app/shared/deployment.service';
+import { LocationService } from 'app/shared/location.service';
+import { NotificationComponent } from 'app/layout/notification/notification.component';
+import { ScrollService } from 'app/shared/scroll.service';
+import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
+import { SearchResults } from 'app/search/interfaces';
+import { SearchService } from 'app/search/search.service';
+import { TocService } from 'app/shared/toc.service';
+
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { first, map } from 'rxjs/operators';
+
+const sideNavView = 'SideNav';
+
+@Component({
+  selector: 'aio-shell',
+  templateUrl: './app.component.html',
+})
+export class AppComponent implements OnInit {
+
+  currentDocument: DocumentContents;
+  currentDocVersion: NavigationNode;
+  currentNodes: CurrentNodes = {};
+  currentPath: string;
+  docVersions: NavigationNode[];
+  dtOn = false;
+  footerNodes: NavigationNode[];
+
+  /**
+   * 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 = '';
+
+  // Disable all Angular animations for the initial render.
+  @HostBinding('@.disabled')
+  isStarting = true;
+  isTransitioning = true;
+  isFetching = false;
+  isSideBySide = false;
+  private isFetchingTimeout: any;
+  private isSideNavDoc = false;
+
+  private sideBySideWidth = 992;
+  sideNavNodes: NavigationNode[];
+  topMenuNodes: NavigationNode[];
+  topMenuNarrowNodes: NavigationNode[];
+
+  hasFloatingToc = false;
+  private showFloatingToc = new BehaviorSubject(false);
+  private showFloatingTocWidth = 800;
+  tocMaxHeight: string;
+  private tocMaxHeightOffset = 0;
+
+  versionInfo: VersionInfo;
+
+  get isOpened() { return this.isSideBySide && this.isSideNavDoc; }
+  get mode() { return this.isSideBySide ? 'side' : 'over'; }
+
+  // Search related properties
+  showSearchResults = false;
+  searchResults: Observable<SearchResults>;
+  @ViewChildren('searchBox, searchResultsView', { read: ElementRef })
+  searchElements: QueryList<ElementRef>;
+  @ViewChild(SearchBoxComponent)
+  searchBox: SearchBoxComponent;
+
+  @ViewChild(MatSidenav)
+  sidenav: MatSidenav;
+
+  @ViewChild(NotificationComponent)
+  notification: NotificationComponent;
+  notificationAnimating = false;
+
+  constructor(
+    public deployment: Deployment,
+    private documentService: DocumentService,
+    private hostElement: ElementRef,
+    private locationService: LocationService,
+    private navigationService: NavigationService,
+    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);
+
+    this.locationService.currentPath.subscribe(path => {
+      // Redirect to docs if we are in archive mode and are not hitting a docs page
+      // (i.e. we have arrived at a marketing page)
+      if (this.deployment.mode === 'archive' && !/^(docs$|api|guide|tutorial)/.test(path)) {
+        this.locationService.replace('docs');
+      }
+      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);
+
+    // Compute the version picker list from the current version and the versions in the navigation map
+    combineLatest(
+      this.navigationService.versionInfo,
+      this.navigationService.navigationViews.pipe(map(views => views['docVersions'])))
+      .subscribe(([versionInfo, versions]) => {
+        // TODO(pbd): consider whether we can lookup the stable and next versions from the internet
+        const computedVersions: NavigationNode[] = [
+          { title: 'next', url: 'https://next.angular.io' },
+          { title: 'stable', url: 'https://angular.io' },
+        ];
+        if (this.deployment.mode === 'archive') {
+          computedVersions.push({ title: `v${versionInfo.major}` });
+        }
+        this.docVersions = [...computedVersions, ...versions];
+
+        // Find the current version - eithers title matches the current deployment mode
+        // or its title matches the major version of the current version info
+        this.currentDocVersion = this.docVersions.find(version =>
+          version.title === this.deployment.mode || version.title === `v${versionInfo.major}`)!;
+        this.currentDocVersion.title += ` (v${versionInfo.raw})`;
+      });
+
+    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);
+
+    const hasNonEmptyToc = this.tocService.tocList.pipe(map(tocList => tocList.length > 0));
+    combineLatest(hasNonEmptyToc, this.showFloatingToc)
+        .subscribe(([hasToc, showFloatingToc]) => this.hasFloatingToc = hasToc && showFloatingToc);
+
+    // Generally, we want to delay updating the shell (e.g. host classes, sidenav state) for the new
+    // document, until after the leaving document has been removed (to avoid having the styles for
+    // the new document applied prematurely).
+    // For the first document, though, (when we know there is no previous document), we want to
+    // ensure the styles are applied as soon as possible to avoid flicker.
+    combineLatest(
+      this.documentService.currentDocument,  // ...needed to determine host classes
+      this.navigationService.currentNodes)   // ...needed to determine `sidenav` state
+      .pipe(first())
+      .subscribe(() => this.updateShell());
+  }
+
+  // Scroll to the anchor in the hash fragment or top of doc.
+  autoScroll() {
+    this.scrollService.scroll();
+  }
+
+  onDocReady() {
+    // About to transition to new view.
+    this.isTransitioning = true;
+
+    // Stop fetching timeout (which, when render is fast, means progress bar never shown)
+    clearTimeout(this.isFetchingTimeout);
+
+    // If progress bar has been shown, keep it for at least 500ms (to avoid flashing).
+    setTimeout(() => this.isFetching = false, 500);
+  }
+
+  onDocRemoved() {
+    // The previous document has been removed.
+    // Scroll to top to restore a clean visual state for the new document.
+    this.scrollService.scrollToTop();
+  }
+
+  onDocInserted() {
+    // Update the shell (host classes, sidenav state) to match the new document.
+    // This may be called as a result of actions initiated by view updates.
+    // In order to avoid errors (e.g. `ExpressionChangedAfterItHasBeenChecked`), updating the view
+    // (e.g. sidenav, host classes) needs to happen asynchronously.
+    setTimeout(() => this.updateShell());
+
+    // Scroll 500ms after the new document has been inserted into the doc-viewer.
+    // The delay is to allow time for async layout to complete.
+    setTimeout(() => this.autoScroll(), 500);
+  }
+
+  onDocRendered() {
+    if (this.isStarting) {
+      // In order to ensure that the initial sidenav-content left margin
+      // adjustment happens without animation, we need to ensure that
+      // `isStarting` remains `true` until the margin change is triggered.
+      // (Apparently, this happens with a slight delay.)
+      setTimeout(() => this.isStarting = false, 100);
+    }
+
+    this.isTransitioning = false;
+  }
+
+  onDocVersionChange(versionIndex: number) {
+    const version = this.docVersions[versionIndex];
+    if (version.url) {
+      this.locationService.go(version.url);
+    }
+  }
+
+  @HostListener('window:resize', ['$event.target.innerWidth'])
+  onResize(width: number) {
+    this.isSideBySide = width > this.sideBySideWidth;
+    this.showFloatingToc.next(width > this.showFloatingTocWidth);
+
+    if (this.isSideBySide && !this.isSideNavDoc) {
+      // If this is a non-sidenav doc and the screen is wide enough so that we can display menu
+      // items in the top-bar, ensure the sidenav is closed.
+      // (This condition can only be met when the resize event changes the value of `isSideBySide`
+      //  from `false` to `true` while on a non-sidenav doc.)
+      this.sidenav.toggle(false);
+    }
+  }
+
+  @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.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; climb DOM tree until anchor found (or null)
+    let target: HTMLElement|null = eventTarget;
+    while (target && !(target instanceof HTMLAnchorElement)) {
+      target = target.parentElement;
+    }
+    if (target instanceof HTMLAnchorElement) {
+      return this.locationService.handleAnchorClick(target, button, ctrlKey, metaKey);
+    }
+
+    // Allow the click to pass through
+    return true;
+  }
+
+  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];
+  }
+
+  notificationDismissed() {
+    this.notificationAnimating = true;
+      // this should be kept in sync with the animation durations in:
+      // - aio/src/styles/2-modules/_notification.scss
+      // - aio/src/app/layout/notification/notification.component.ts
+      setTimeout(() => this.notificationAnimating = false, 250);
+    this.updateHostClasses();
+  }
+
+  updateHostClasses() {
+    const mode = `mode-${this.deployment.mode}`;
+    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(' ');
+    const notificationClass = `aio-notification-${this.notification.showNotification}`;
+    const notificationAnimatingClass = this.notificationAnimating ? 'aio-notification-animating' : '';
+
+    this.hostClasses = [
+      mode,
+      sideNavOpen,
+      pageClass,
+      folderClass,
+      viewClasses,
+      notificationClass,
+      notificationAnimatingClass
+    ].join(' ');
+  }
+
+  updateShell() {
+    // Update the SideNav state (if necessary).
+    this.updateSideNav();
+
+    // Update the host classes.
+    this.setPageId(this.currentDocument.id);
+    this.setFolderId(this.currentDocument.id);
+    this.updateHostClasses();
+  }
+
+  updateSideNav() {
+    // Preserve current sidenav open state by default.
+    let openSideNav = this.sidenav.opened;
+    const isSideNavDoc = !!this.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.sidenav.toggle(this.isSideBySide && openSideNav);
+  }
+
+  // Dynamically change height of table of contents container
+  @HostListener('window:scroll')
+  onScroll() {
+    if (!this.tocMaxHeightOffset) {
+      // Must wait until now for mat-toolbar to be measurable.
+      const el = this.hostElement.nativeElement as Element;
+      this.tocMaxHeightOffset =
+          el.querySelector('footer')!.clientHeight +
+          el.querySelector('.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: string) {
+    this.searchResults = 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
new file mode 100644
index 000000000000..a3e89e24ce2b
--- /dev/null
+++ b/aio/src/app/app.module.ts
@@ -0,0 +1,136 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { ErrorHandler, NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+import { AppComponent } from 'app/app.component';
+import { CustomIconRegistry, SVG_ICONS } from 'app/shared/custom-icon-registry';
+import { Deployment } from 'app/shared/deployment.service';
+import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
+import { DtComponent } from 'app/layout/doc-viewer/dt.component';
+import { ModeBannerComponent } from 'app/layout/mode-banner/mode-banner.component';
+import { GaService } from 'app/shared/ga.service';
+import { Logger } from 'app/shared/logger.service';
+import { LocationService } from 'app/shared/location.service';
+import { NavigationService } from 'app/navigation/navigation.service';
+import { DocumentService } from 'app/documents/document.service';
+import { SearchService } from 'app/search/search.service';
+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 { ReportingErrorHandler } from 'app/shared/reporting-error-handler';
+import { ScrollService } from 'app/shared/scroll.service';
+import { ScrollSpyService } from 'app/shared/scroll-spy.service';
+import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
+import { NotificationComponent } from 'app/layout/notification/notification.component';
+import { TocService } from 'app/shared/toc.service';
+import { CurrentDateToken, currentDateProvider } from 'app/shared/current-date';
+import { WindowToken, windowProvider } from 'app/shared/window';
+
+import { CustomElementsModule } from 'app/custom-elements/custom-elements.module';
+import { SharedModule } from 'app/shared/shared.module';
+import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
+
+// These are the hardcoded inline svg sources to be used by the `<mat-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
+  },
+  {
+    provide: SVG_ICONS,
+    useValue: {
+      name: 'insert_comment',
+      svgSource:
+      '<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">' +
+        '<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>' +
+        '<path d="M0 0h24v24H0z" fill="none"/>' +
+      '</svg>'
+    },
+    multi: true
+  },
+  {
+    provide: SVG_ICONS,
+    useValue: {
+      name: 'close',
+      svgSource:
+      '<svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">' +
+        '<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>' +
+        '<path d="M0 0h24v24H0z" fill="none"/>' +
+      '</svg>'
+    },
+    multi: true
+  }
+];
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CustomElementsModule,
+    HttpClientModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressBarModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    SwUpdatesModule,
+    SharedModule,
+  ],
+  declarations: [
+    AppComponent,
+    DocViewerComponent,
+    DtComponent,
+    FooterComponent,
+    ModeBannerComponent,
+    NavMenuComponent,
+    NavItemComponent,
+    SearchBoxComponent,
+    NotificationComponent,
+    TopMenuComponent,
+  ],
+  providers: [
+    Deployment,
+    DocumentService,
+    { provide: ErrorHandler, useClass: ReportingErrorHandler },
+    GaService,
+    Logger,
+    Location,
+    { provide: LocationStrategy, useClass: PathLocationStrategy },
+    LocationService,
+    { provide: MatIconRegistry, useClass: CustomIconRegistry },
+    NavigationService,
+    ScrollService,
+    ScrollSpyService,
+    SearchService,
+    svgIconProviders,
+    TocService,
+    { provide: CurrentDateToken, useFactory: currentDateProvider },
+    { provide: WindowToken, useFactory: windowProvider },
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/src/app/custom-elements/announcement-bar/announcement-bar.component.spec.ts b/aio/src/app/custom-elements/announcement-bar/announcement-bar.component.spec.ts
new file mode 100644
index 000000000000..068f792ad36e
--- /dev/null
+++ b/aio/src/app/custom-elements/announcement-bar/announcement-bar.component.spec.ts
@@ -0,0 +1,115 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Logger } from 'app/shared/logger.service';
+import { MockLogger } from 'testing/logger.service';
+import { AnnouncementBarComponent } from './announcement-bar.component';
+
+const today = new Date();
+const lastWeek = changeDays(today, -7);
+const yesterday = changeDays(today, -1);
+const tomorrow = changeDays(today, 1);
+const nextWeek = changeDays(today, 7);
+
+describe('AnnouncementBarComponent', () => {
+
+  let element: HTMLElement;
+  let fixture: ComponentFixture<AnnouncementBarComponent>;
+  let component: AnnouncementBarComponent;
+  let httpMock: HttpTestingController;
+  let mockLogger: MockLogger;
+
+  beforeEach(() => {
+    const injector = TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      declarations: [AnnouncementBarComponent],
+      providers: [{ provide: Logger, useClass: MockLogger }]
+    });
+
+    httpMock = injector.get(HttpTestingController);
+    mockLogger = injector.get(Logger);
+    fixture = TestBed.createComponent(AnnouncementBarComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should have no announcement when first created', () => {
+    expect(component.announcement).toBeUndefined();
+  });
+
+  describe('ngOnInit', () => {
+    it('should make a single request to the server', () => {
+      component.ngOnInit();
+      httpMock.expectOne('generated/announcements.json');
+    });
+
+    it('should set the announcement to the first "live" one in the list loaded from `announcements.json`', () => {
+      component.ngOnInit();
+      const request = httpMock.expectOne('generated/announcements.json');
+      request.flush([
+        { startDate: lastWeek, endDate: yesterday, message: 'Test Announcement 0' },
+        { startDate: tomorrow, endDate: nextWeek, message: 'Test Announcement 1' },
+        { startDate: yesterday, endDate: tomorrow, message: 'Test Announcement 2' },
+        { startDate: yesterday, endDate: tomorrow, message: 'Test Announcement 3' }
+      ]);
+      expect(component.announcement.message).toEqual('Test Announcement 2');
+    });
+
+    it('should set the announcement to `undefined` if there are no announcements in `announcements.json`', () => {
+      component.ngOnInit();
+      const request = httpMock.expectOne('generated/announcements.json');
+      request.flush([]);
+      expect(component.announcement).toBeUndefined();
+    });
+
+    it('should handle invalid data in `announcements.json`', () => {
+      component.ngOnInit();
+      const request = httpMock.expectOne('generated/announcements.json');
+      request.flush('some random response');
+      expect(component.announcement).toBeUndefined();
+      expect(mockLogger.output.error).toEqual([
+        [jasmine.any(Error)]
+      ]);
+      expect(mockLogger.output.error[0][0].message).toMatch(/^generated\/announcements\.json contains invalid data:/);
+    });
+
+    it('should handle a failed request for `announcements.json`', () => {
+      component.ngOnInit();
+      const request = httpMock.expectOne('generated/announcements.json');
+      request.error(new ErrorEvent('404'));
+      expect(component.announcement).toBeUndefined();
+      expect(mockLogger.output.error).toEqual([
+        [jasmine.any(Error)]
+      ]);
+      expect(mockLogger.output.error[0][0].message).toMatch(/^generated\/announcements\.json request failed:/);
+    });
+  });
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      component.announcement = {
+        imageUrl: 'link/to/image',
+        linkUrl: 'link/to/website',
+        message: 'this is an <b>important</b> message',
+        endDate: '2018-03-01',
+        startDate: '2018-02-01'
+      };
+      fixture.detectChanges();
+    });
+
+    it('should display the message as HTML', () => {
+      expect(element.innerHTML).toContain('this is an <b>important</b> message');
+    });
+
+    it('should display an image', () => {
+      expect(element.querySelector('img')!.src).toContain('link/to/image');
+    });
+
+    it('should display a link', () => {
+      expect(element.querySelector('a')!.href).toContain('link/to/website');
+    });
+  });
+});
+
+function changeDays(initial: Date, days: number) {
+  return (new Date(initial.valueOf()).setDate(initial.getDate() + days));
+}
diff --git a/aio/src/app/custom-elements/announcement-bar/announcement-bar.component.ts b/aio/src/app/custom-elements/announcement-bar/announcement-bar.component.ts
new file mode 100644
index 000000000000..6698ec19bb2b
--- /dev/null
+++ b/aio/src/app/custom-elements/announcement-bar/announcement-bar.component.ts
@@ -0,0 +1,85 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { catchError, map } from 'rxjs/operators';
+import { Logger } from 'app/shared/logger.service';
+import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
+const announcementsPath = CONTENT_URL_PREFIX + 'announcements.json';
+
+export interface Announcement {
+  imageUrl: string;
+  message: string;
+  linkUrl: string;
+  startDate: string;
+  endDate: string;
+}
+
+/**
+ * Display the latest live announcement. This is used on the homepage.
+ *
+ * The data for the announcements is kept in `aio/content/marketing/announcements.json`.
+ *
+ * The format for that data file looks like:
+ *
+ * ```
+ * [
+ *   {
+ *     "startDate": "2018-02-01",
+ *     "endDate": "2018-03-01",
+ *     "message": "This is an <b>important</b> announcement",
+ *     "imageUrl": "url/to/image",
+ *     "linkUrl": "url/to/website"
+ *   },
+ *   ...
+ * ]
+ * ```
+ *
+ * Only one announcement will be shown at any time. This is determined as the first "live"
+ * announcement in the file, where "live" means that its start date is before today, and its
+ * end date is after today.
+ *
+ * **Security Note:**
+ * The `message` field can contain unsanitized HTML but this field should only updated by
+ * verified members of the Angular team.
+ */
+@Component({
+  selector: 'aio-announcement-bar',
+  template: `
+  <div class="homepage-container" *ngIf="announcement">
+    <div class="announcement-bar">
+      <img [src]="announcement.imageUrl">
+      <p [innerHTML]="announcement.message"></p>
+      <a class="button" [href]="announcement.linkUrl">Learn More</a>
+    </div>
+  </div>`
+})
+export class AnnouncementBarComponent implements OnInit {
+  announcement: Announcement;
+
+  constructor(private http: HttpClient, private logger: Logger) {}
+
+  ngOnInit() {
+    this.http.get<Announcement[]>(announcementsPath)
+      .pipe(
+        catchError(error => {
+          this.logger.error(new Error(`${announcementsPath} request failed: ${error.message}`));
+          return [];
+        }),
+        map(announcements => this.findCurrentAnnouncement(announcements)),
+        catchError(error => {
+          this.logger.error(new Error(`${announcementsPath} contains invalid data: ${error.message}`));
+          return [];
+        }),
+      )
+      .subscribe(announcement => this.announcement = announcement);
+  }
+
+  /**
+   * Get the first date in the list that is "live" now
+   */
+  private findCurrentAnnouncement(announcements: Announcement[]) {
+    return announcements
+      .filter(announcement => new Date(announcement.startDate).valueOf() < Date.now())
+      .filter(announcement => new Date(announcement.endDate).valueOf() > Date.now())
+      [0];
+  }
+}
diff --git a/aio/src/app/custom-elements/announcement-bar/announcement-bar.module.ts b/aio/src/app/custom-elements/announcement-bar/announcement-bar.module.ts
new file mode 100644
index 000000000000..90c905514df5
--- /dev/null
+++ b/aio/src/app/custom-elements/announcement-bar/announcement-bar.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { SharedModule } from '../../shared/shared.module';
+import { AnnouncementBarComponent } from './announcement-bar.component';
+import { WithCustomElementComponent } from '../element-registry';
+
+@NgModule({
+  imports: [ CommonModule, SharedModule, HttpClientModule ],
+  declarations: [ AnnouncementBarComponent ],
+  entryComponents: [ AnnouncementBarComponent ],
+})
+export class AnnouncementBarModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = AnnouncementBarComponent;
+}
diff --git a/aio/src/app/custom-elements/api/api-list.component.html b/aio/src/app/custom-elements/api/api-list.component.html
new file mode 100644
index 000000000000..3011853b140d
--- /dev/null
+++ b/aio/src/app/custom-elements/api/api-list.component.html
@@ -0,0 +1,33 @@
+<div class="l-flex-wrap api-filter">
+
+  <aio-select (change)="setType($event.option)"
+              [options]="types"
+              [selected]="type"
+              [showSymbol]="true"
+              label="Type:">
+  </aio-select>
+
+  <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)">
+    <i class="material-icons">search</i>
+  </div>
+</div>
+
+<article class="api-list-container l-content-small docs-content">
+  <div *ngFor="let section of filteredSections | async" >
+    <h2 *ngIf="section.items"><a [href]="section.path">{{section.title}}</a></h2>
+    <ul class="api-list" *ngIf="section.items?.length">
+      <ng-container *ngFor="let item of section.items">
+        <li class="api-item">
+          <a [href]="item.path"><span class="symbol {{item.docType}}"></span> {{item.title}}</a>
+        </li>
+      </ng-container>
+    </ul>
+  </div>
+</article>
diff --git a/aio/src/app/custom-elements/api/api-list.component.spec.ts b/aio/src/app/custom-elements/api/api-list.component.spec.ts
new file mode 100644
index 000000000000..12cbf13056bf
--- /dev/null
+++ b/aio/src/app/custom-elements/api/api-list.component.spec.ts
@@ -0,0 +1,297 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BehaviorSubject } from 'rxjs';
+
+import { ApiListComponent } from './api-list.component';
+import { ApiItem, ApiSection, ApiService } from './api.service';
+import { LocationService } from 'app/shared/location.service';
+import { Logger } from 'app/shared/logger.service';
+import { MockLogger } from 'testing/logger.service';
+import { ApiListModule } from './api-list.module';
+
+describe('ApiListComponent', () => {
+  let component: ApiListComponent;
+  let fixture: ComponentFixture<ApiListComponent>;
+  let sections: ApiSection[];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ ApiListModule ],
+      providers: [
+        { provide: ApiService, useClass: TestApiService },
+        { provide: Logger, useClass: MockLogger },
+        { provide: LocationService, useClass: TestLocationService }
+      ]
+    });
+
+    fixture = TestBed.createComponent(ApiListComponent);
+    component = fixture.componentInstance;
+    sections = getApiSections();
+  });
+
+  /**
+   * Expectation Utility: Assert that filteredSections has the expected result for this test
+   * @param itemTest - return true if the item passes the match test
+   *
+   * Subscibes to `filteredSections` and performs expectation within subscription callback.
+   */
+  function expectFilteredResult(label: string, itemTest: (item: ApiItem) => boolean) {
+    component.filteredSections.subscribe(filtered => {
+      filtered = filtered.filter(section => section.items);
+      expect(filtered.length).toBeGreaterThan(0, 'expected something');
+      expect(filtered.every(section => section.items!.every(itemTest))).toBe(true, label);
+    });
+  }
+
+
+  describe('#filteredSections', () => {
+
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should return all complete sections when no criteria', () => {
+      let filtered: ApiSection[]|undefined;
+      component.filteredSections.subscribe(f => filtered = f);
+      expect(filtered).toEqual(sections);
+    });
+
+    it('item.show should be true for all queried items', () => {
+      component.setQuery('class');
+      expectFilteredResult('query: class', item => /class/.test(item.name));
+    });
+
+    it('items should be an array for every item in section when query matches section name', () => {
+      component.setQuery('core');
+      component.filteredSections.subscribe(filtered => {
+        filtered = filtered.filter(section => Array.isArray(section.items));
+        expect(filtered.length).toBe(1, 'only one section');
+        expect(filtered[0].name).toBe('core');
+        expect(filtered[0].items).toEqual(sections.find(section => section.name === 'core')!.items);
+      });
+    });
+
+    describe('section.items', () => {
+      it('should null if there are no matching items and the section itself does not match', () => {
+        component.setQuery('core');
+        component.filteredSections.subscribe(filtered => {
+          const commonSection = filtered.find(section => section.name === 'common')!;
+          expect(commonSection.items).toBe(null);
+        });
+      });
+
+      it('should be visible if they have the selected stability status', () => {
+        component.setStatus({value: 'stable', title: 'Stable'});
+        expectFilteredResult('status: stable', item => item.stability === 'stable');
+      });
+
+      it('should be visible if they have the selected security status', () => {
+        component.setStatus({value: 'security-risk', title: 'Security Risk'});
+        expectFilteredResult('status: security-risk', item => item.securityRisk);
+      });
+
+      it('should be visible if they match the selected API type', () => {
+        component.setType({value: 'class', title: 'Class'});
+        expectFilteredResult('type: class', item => item.docType === 'class');
+      });
+    });
+
+    it('should have no sections and no items visible when there is no match', () => {
+      component.setQuery('fizbuzz');
+      component.filteredSections.subscribe(filtered => {
+        expect(filtered.some(section => !!section.items)).toBeFalsy();
+      });
+    });
+  });
+
+  describe('initial criteria from location', () => {
+    let locationService: TestLocationService;
+
+    beforeEach(() => {
+      locationService = fixture.componentRef.injector.get<any>(LocationService);
+    });
+
+    function expectOneItem(name: string, section: string, type: string, stability: string) {
+      fixture.detectChanges();
+
+      component.filteredSections.subscribe(filtered => {
+        filtered = filtered.filter(s => s.items);
+        expect(filtered.length).toBe(1, 'sections');
+        expect(filtered[0].name).toBe(section, 'section name');
+        const items = filtered[0].items!;
+        expect(items.length).toBe(1, 'items');
+
+        const item = items[0];
+        const badItem = 'Wrong item: ' + JSON.stringify(item, null, 2);
+
+        expect(item.docType).toBe(type, badItem);
+        expect(item.stability).toBe(stability, badItem);
+        expect(item.name).toBe(name, badItem);
+      });
+    }
+
+    it('should filter as expected for ?query', () => {
+      locationService.query = {query: '_3'};
+      expectOneItem('class_3', 'core', 'class', 'experimental');
+    });
+
+    it('should filter as expected for ?status', () => {
+      locationService.query = {status: 'deprecated'};
+      expectOneItem('function_1', 'core', 'function', 'deprecated');
+    });
+
+    it('should filter as expected when status is security-risk', () => {
+      locationService.query = {status: 'security-risk'};
+      fixture.detectChanges();
+      expectFilteredResult('security-risk', item => item.securityRisk);
+    });
+
+    it('should filter as expected for ?type', () => {
+      locationService.query = {type: 'pipe'};
+      expectOneItem('pipe_1', 'common', 'pipe', 'stable');
+    });
+
+    it('should filter as expected for ?query&status&type', () => {
+      locationService.query = {
+        query: 's_1',
+        status: 'experimental',
+        type: 'class'
+      };
+      fixture.detectChanges();
+      expectOneItem('class_1', 'common', 'class', 'experimental');
+    });
+
+    it('should ignore case for ?query&status&type', () => {
+      locationService.query = {
+        query: 'S_1',
+        status: 'ExperiMental',
+        type: 'CLASS'
+      };
+      fixture.detectChanges();
+      expectOneItem('class_1', 'common', 'class', 'experimental');
+    });
+  });
+
+  describe('location path after criteria change', () => {
+    let locationService: TestLocationService;
+
+    beforeEach(() => {
+      locationService = fixture.componentRef.injector.get<any>(LocationService);
+    });
+
+    it('should have query', () => {
+      component.setQuery('foo');
+
+      // `setSearch` 2nd param is a query/search params object
+      const search = locationService.setSearch.calls.mostRecent().args[1];
+      expect(search.query).toBe('foo');
+    });
+
+    it('should keep last of multiple query settings (in lowercase)', () => {
+      component.setQuery('foo');
+      component.setQuery('fooBar');
+
+      const search = locationService.setSearch.calls.mostRecent().args[1];
+      expect(search.query).toBe('foobar');
+    });
+
+    it('should have query, status, and type', () => {
+      component.setQuery('foo');
+      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');
+      expect(search.status).toBe('stable');
+      expect(search.type).toBe('class');
+    });
+  });
+});
+
+////// Helpers ////////
+
+class TestLocationService {
+  query: {[index: string]: string } = {};
+  setSearch = jasmine.createSpy('setSearch');
+  search() { return this.query; }
+}
+
+class TestApiService {
+  sectionsSubject = new BehaviorSubject(getApiSections());
+  sections = this.sectionsSubject.asObservable();
+}
+
+// tslint:disable:quotemark
+const apiSections: ApiSection[] = [
+  {
+    "name": "common",
+    "title": "common",
+    "path": "api/common",
+    "items": [
+      {
+        "name": "class_1",
+        "title": "Class 1",
+        "path": "api/common/class_1",
+        "docType": "class",
+        "stability": "experimental",
+        "securityRisk": false
+      },
+      {
+        "name": "class_2",
+        "title": "Class 2",
+        "path": "api/common/class_2",
+        "docType": "class",
+        "stability": "stable",
+        "securityRisk": false
+      },
+      {
+        "name": "directive_1",
+        "title": "Directive 1",
+        "path": "api/common/directive_1",
+        "docType": "directive",
+        "stability": "stable",
+        "securityRisk": true
+      },
+      {
+        "name": "pipe_1",
+        "title": "Pipe 1",
+        "path": "api/common/pipe_1",
+        "docType": "pipe",
+        "stability": "stable",
+        "securityRisk": true
+      },
+    ]
+  },
+  {
+    "name": "core",
+    "title": "core",
+    "path": "api/core",
+    "items": [
+      {
+        "name": "class_3",
+        "title": "Class 3",
+        "path": "api/core/class_3",
+        "docType": "class",
+        "stability": "experimental",
+        "securityRisk": false
+      },
+      {
+        "name": "function_1",
+        "title": "Function 1",
+        "path": "api/core/function 1",
+        "docType": "function",
+        "stability": "deprecated",
+        "securityRisk": true
+      },
+      {
+        "name": "const_1",
+        "title": "Const 1",
+        "path": "api/core/const_1",
+        "docType": "const",
+        "stability": "stable",
+        "securityRisk": false
+      }
+    ]
+  }
+];
+
+function getApiSections() { return apiSections; }
diff --git a/aio/src/app/custom-elements/api/api-list.component.ts b/aio/src/app/custom-elements/api/api-list.component.ts
new file mode 100644
index 000000000000..666b05aa4942
--- /dev/null
+++ b/aio/src/app/custom-elements/api/api-list.component.ts
@@ -0,0 +1,171 @@
+/*
+* API List & Filter Component
+*
+* A page that displays a formatted list of the public Angular API entities.
+* Clicking on a list item triggers navigation to the corresponding API entity document.
+* Can add/remove API entity links based on filter settings.
+*/
+
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+
+import { combineLatest, Observable, ReplaySubject } from 'rxjs';
+
+import { LocationService } from 'app/shared/location.service';
+import { ApiSection, ApiService } from './api.service';
+
+import { Option } from 'app/shared/select/select.component';
+
+class SearchCriteria {
+  query ? = '';
+  status ? = 'all';
+  type ? = 'all';
+}
+
+@Component({
+  selector: 'aio-api-list',
+  templateUrl: './api-list.component.html',
+})
+export class ApiListComponent implements OnInit {
+
+  filteredSections: Observable<ApiSection[]>;
+
+  showStatusMenu = false;
+  showTypeMenu = false;
+
+  private criteriaSubject = new ReplaySubject<SearchCriteria>(1);
+  private searchCriteria = new SearchCriteria();
+
+  status: Option;
+  type: Option;
+
+  // API types
+  types: Option[] = [
+    { value: 'all', title: 'All' },
+    { value: 'class', title: 'Class' },
+    { value: 'const', title: 'Const'},
+    { value: 'decorator', title: 'Decorator' },
+    { value: 'directive', title: 'Directive' },
+    { value: 'enum', title: 'Enum' },
+    { value: 'function', title: 'Function' },
+    { value: 'interface', title: 'Interface' },
+    { value: 'pipe', title: 'Pipe'},
+    { value: 'type-alias', title: 'Type alias' },
+    { value: 'package', title: 'Package'}
+  ];
+
+  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;
+
+  constructor(
+    private apiService: ApiService,
+    private locationService: LocationService) { }
+
+  ngOnInit() {
+    this.filteredSections = combineLatest(
+      this.apiService.sections,
+      this.criteriaSubject,
+      (sections, criteria) => {
+        return sections
+          .map(section => ({ ...section, items: this.filterSection(section, criteria) }));
+      }
+    );
+
+    this.initializeSearchCriteria();
+  }
+
+  // TODO: may need to debounce as the original did
+  // although there shouldn't be any perf consequences if we don't
+  setQuery(query: string) {
+    this.setSearchCriteria({query: (query || '').toLowerCase().trim() });
+  }
+
+  setStatus(status: Option) {
+    this.toggleStatusMenu();
+    this.status = status;
+    this.setSearchCriteria({status: status.value});
+  }
+
+  setType(type: Option) {
+    this.toggleTypeMenu();
+    this.type = type;
+    this.setSearchCriteria({type: type.value});
+  }
+
+  toggleStatusMenu() {
+    this.showStatusMenu = !this.showStatusMenu;
+  }
+
+  toggleTypeMenu() {
+    this.showTypeMenu = !this.showTypeMenu;
+  }
+
+  //////// Private //////////
+
+  private filterSection(section: ApiSection, { query, status, type }: SearchCriteria) {
+    const items = section.items!.filter(item => {
+      return matchesType() && matchesStatus() && matchesQuery();
+
+      function matchesQuery() {
+        return !query ||
+          section.name.indexOf(query) !== -1 ||
+          item.name.indexOf(query) !== -1;
+      }
+
+      function matchesStatus() {
+        return status === 'all' ||
+          status === item.stability ||
+          (status === 'security-risk' && item.securityRisk);
+      };
+
+      function matchesType() {
+        return type === 'all' || type === item.docType;
+      }
+    });
+
+    // If there are no items we still return an empty array if the section name matches and the type is 'package'
+    return items.length ? items : (type === 'package' && (!query || section.name.indexOf(query) !== -1)) ? [] : null;
+  }
+
+  // Get initial search criteria from URL search params
+  private initializeSearchCriteria() {
+    const {query, status, type} = this.locationService.search();
+
+    const q = (query || '').toLowerCase();
+    // 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.value === status) || this.statuses[0];
+    this.type = this.types.find(x => x.value === type) || this.types[0];
+
+    this.searchCriteria = {
+      query: q,
+      status: this.status.value,
+      type: this.type.value
+    };
+
+    this.criteriaSubject.next(this.searchCriteria);
+  }
+
+  private setLocationSearch() {
+    const {query, status, type} = this.searchCriteria;
+    const params = {
+      query:  query ? query : undefined,
+      status: status !== 'all' ? status : undefined,
+      type:   type   !== 'all' ? type   : undefined
+    };
+
+    this.locationService.setSearch('API Search', params);
+  }
+
+  private setSearchCriteria(criteria: SearchCriteria) {
+    this.criteriaSubject.next(Object.assign(this.searchCriteria, criteria));
+    this.setLocationSearch();
+  }
+}
diff --git a/aio/src/app/custom-elements/api/api-list.module.ts b/aio/src/app/custom-elements/api/api-list.module.ts
new file mode 100644
index 000000000000..b81de1411e76
--- /dev/null
+++ b/aio/src/app/custom-elements/api/api-list.module.ts
@@ -0,0 +1,17 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { SharedModule } from '../../shared/shared.module';
+import { ApiListComponent } from './api-list.component';
+import { ApiService } from './api.service';
+import { WithCustomElementComponent } from '../element-registry';
+
+@NgModule({
+  imports: [ CommonModule, SharedModule, HttpClientModule ],
+  declarations: [ ApiListComponent ],
+  entryComponents: [ ApiListComponent ],
+  providers: [ ApiService ]
+})
+export class ApiListModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = ApiListComponent;
+}
diff --git a/aio/src/app/custom-elements/api/api.service.spec.ts b/aio/src/app/custom-elements/api/api.service.spec.ts
new file mode 100644
index 000000000000..253acd57dec0
--- /dev/null
+++ b/aio/src/app/custom-elements/api/api.service.spec.ts
@@ -0,0 +1,118 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import { Logger } from 'app/shared/logger.service';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+
+  let injector: Injector;
+  let service: ApiService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    injector = TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        ApiService,
+        { provide: Logger, useClass: TestLogger }
+      ]
+    });
+
+    service = injector.get<ApiService>(ApiService);
+    httpMock = injector.get(HttpTestingController);
+  });
+
+  afterEach(() => httpMock.verify());
+
+  it('should not immediately connect to the server', () => {
+    httpMock.expectNone({});
+  });
+
+  it('subscribers should be completed/unsubscribed when service destroyed', () => {
+      let completed = false;
+
+      service.sections.subscribe(
+        undefined,
+        undefined,
+        () => completed = true
+      );
+
+      service.ngOnDestroy();
+      expect(completed).toBe(true);
+
+      // Stop `httpMock.verify()` from complaining.
+      httpMock.expectOne({});
+  });
+
+  describe('#sections', () => {
+
+    it('first subscriber should fetch sections', done => {
+      const data = [{name: 'a', title: 'A', path: '', items: []}, {name: 'b', title: 'B', path: '', items: []}];
+
+      service.sections.subscribe(sections => {
+        expect(sections).toEqual(data);
+        done();
+      });
+
+      httpMock.expectOne({}).flush(data);
+    });
+
+    it('second subscriber should get previous sections and NOT trigger refetch', done => {
+      const data = [{name: 'a', title: 'A', path: '', items: []}, {name: 'b', title: 'B', path: '', items: []}];
+      let subscriptions = 0;
+
+      service.sections.subscribe(sections => {
+        subscriptions++;
+        expect(sections).toEqual(data);
+      });
+
+      service.sections.subscribe(sections => {
+        subscriptions++;
+        expect(sections).toEqual(data);
+        expect(subscriptions).toBe(2);
+        done();
+      });
+
+      httpMock.expectOne({}).flush(data);
+    });
+  });
+
+  describe('#fetchSections', () => {
+
+    it('should connect to the server w/ expected URL', () => {
+      service.fetchSections();
+      httpMock.expectOne('generated/docs/api/api-list.json');
+    });
+
+    it('should refresh the #sections observable w/ new content on second call', () => {
+
+      let call = 0;
+
+      let data = [{name: 'a', title: 'A', path: '', items: []}, {name: 'b', title: 'B', path: '', items: []}];
+
+      service.sections.subscribe(sections => {
+        // called twice during this test
+        // (1) during subscribe
+        // (2) after refresh
+        expect(sections).toEqual(data, 'call ' + call++);
+      });
+
+      httpMock.expectOne({}).flush(data);
+
+      // refresh/refetch
+      data = [{name: 'c', title: 'C', path: '', items: []}];
+      service.fetchSections();
+      httpMock.expectOne({}).flush(data);
+
+      expect(call).toBe(2, 'should be called twice');
+    });
+  });
+});
+
+class TestLogger {
+  log = jasmine.createSpy('log');
+  error = jasmine.createSpy('error');
+}
diff --git a/aio/src/app/custom-elements/api/api.service.ts b/aio/src/app/custom-elements/api/api.service.ts
new file mode 100644
index 000000000000..f90599c8af72
--- /dev/null
+++ b/aio/src/app/custom-elements/api/api.service.ts
@@ -0,0 +1,83 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+import { ReplaySubject, Subject } from 'rxjs';
+import { takeUntil, tap } from 'rxjs/operators';
+
+import { Logger } from 'app/shared/logger.service';
+import { DOC_CONTENT_URL_PREFIX } from 'app/documents/document.service';
+
+export interface ApiItem {
+  name: string;
+  title: string;
+  path: string;
+  docType: string;
+  stability: string;
+  securityRisk: boolean;
+}
+
+export interface ApiSection {
+  path: string;
+  name: string;
+  title: string;
+  items: ApiItem[]|null;
+}
+
+@Injectable()
+export class ApiService implements OnDestroy {
+
+  private apiBase = DOC_CONTENT_URL_PREFIX + 'api/';
+  private apiListJsonDefault = 'api-list.json';
+  private firstTime = true;
+  private onDestroy = new Subject();
+  private sectionsSubject = new ReplaySubject<ApiSection[]>(1);
+  private _sections = this.sectionsSubject.pipe(takeUntil(this.onDestroy));
+
+  /**
+  * Return a cached observable of API sections from a JSON file.
+  * API sections is an array of Angular top modules and metadata about their API documents (items).
+   */
+  get sections() {
+
+    if (this.firstTime) {
+      this.firstTime = false;
+      this.fetchSections(); // TODO: get URL for fetchSections by configuration?
+
+      // makes sectionsSubject hot; subscribe ensures stays alive (always refCount > 0);
+      this._sections.subscribe(sections => this.logger.log('ApiService got API sections') );
+    }
+
+    return this._sections;
+  };
+
+  constructor(private http: HttpClient, private logger: Logger) { }
+
+  ngOnDestroy() {
+    this.onDestroy.next();
+  }
+
+ /**
+  * Fetch API sections from a JSON file.
+  * API sections is an array of Angular top modules and metadata about their API documents (items).
+  * Updates `sections` observable
+  *
+  * @param {string} [src] - Name of the api list JSON file
+  */
+  fetchSections(src?: string) {
+    // TODO: get URL by configuration?
+    const url = this.apiBase + (src || this.apiListJsonDefault);
+    this.http.get<ApiSection[]>(url)
+      .pipe(
+        takeUntil(this.onDestroy),
+        tap(() => this.logger.log(`Got API sections from ${url}`)),
+      )
+      .subscribe(
+        sections => this.sectionsSubject.next(sections),
+        (err: HttpErrorResponse) => {
+          // TODO: handle error
+          this.logger.error(err);
+          throw err; // rethrow for now.
+        }
+      );
+  }
+}
diff --git a/aio/src/app/custom-elements/code/code-example.component.spec.ts b/aio/src/app/custom-elements/code/code-example.component.spec.ts
new file mode 100644
index 000000000000..7045d9ba2ed2
--- /dev/null
+++ b/aio/src/app/custom-elements/code/code-example.component.spec.ts
@@ -0,0 +1,100 @@
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CodeExampleComponent } from './code-example.component';
+import { CodeExampleModule } from './code-example.module';
+import { Logger } from 'app/shared/logger.service';
+import { MockLogger } from 'testing/logger.service';
+
+describe('CodeExampleComponent', () => {
+  let hostComponent: HostComponent;
+  let codeExampleComponent: CodeExampleComponent;
+  let fixture: ComponentFixture<HostComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ CodeExampleModule ],
+      declarations: [
+        HostComponent,
+      ],
+      providers: [
+        { provide: Logger, useClass: MockLogger },
+      ]
+    });
+
+    fixture = TestBed.createComponent(HostComponent);
+    hostComponent = fixture.componentInstance;
+    codeExampleComponent = hostComponent.codeExampleComponent;
+
+    fixture.detectChanges();
+  });
+
+  it('should be able to capture the code snippet provided in content', () => {
+    expect(codeExampleComponent.aioCode.code.trim()).toBe(`const foo = "bar";`);
+  });
+
+  it('should change aio-code classes based on title presence', () => {
+    expect(codeExampleComponent.title).toBe('Great Example');
+    expect(fixture.nativeElement.querySelector('header')).toBeTruthy();
+    expect(codeExampleComponent.classes).toEqual({
+      'headed-code': true,
+      'simple-code': false
+    });
+
+    codeExampleComponent.title = '';
+    fixture.detectChanges();
+
+    expect(codeExampleComponent.title).toBe('');
+    expect(fixture.nativeElement.querySelector('header')).toBeFalsy();
+    expect(codeExampleComponent.classes).toEqual({
+      'headed-code': false,
+      'simple-code': true
+    });
+  });
+
+  it('should set avoidFile class if path has .avoid.', () => {
+    const codeExampleComponentElement: HTMLElement =
+        fixture.nativeElement.querySelector('code-example');
+
+    expect(codeExampleComponent.path).toBe('code-path');
+    expect(codeExampleComponentElement.className.indexOf('avoidFile') === -1).toBe(true);
+
+    codeExampleComponent.path = 'code-path.avoid.';
+    fixture.detectChanges();
+
+    expect(codeExampleComponentElement.className.indexOf('avoidFile') === -1).toBe(false);
+  });
+
+  it('should coerce hidecopy', () => {
+    expect(codeExampleComponent.hidecopy).toBe(false);
+
+    hostComponent.hidecopy = true;
+    fixture.detectChanges();
+    expect(codeExampleComponent.hidecopy).toBe(true);
+
+    hostComponent.hidecopy = 'false';
+    fixture.detectChanges();
+    expect(codeExampleComponent.hidecopy).toBe(false);
+
+    hostComponent.hidecopy = 'true';
+    fixture.detectChanges();
+    expect(codeExampleComponent.hidecopy).toBe(true);
+  });
+});
+
+@Component({
+  selector: 'aio-host-comp',
+  template: `
+    <code-example [title]="title" [path]="path" [hidecopy]="hidecopy">
+      {{code}}
+    </code-example>
+  `
+})
+class HostComponent {
+  code = `const foo = "bar";`;
+  title = 'Great Example';
+  path = 'code-path';
+  hidecopy: boolean | string = false;
+
+  @ViewChild(CodeExampleComponent) codeExampleComponent: CodeExampleComponent;
+}
diff --git a/aio/src/app/custom-elements/code/code-example.component.ts b/aio/src/app/custom-elements/code/code-example.component.ts
new file mode 100644
index 000000000000..baede37f68c2
--- /dev/null
+++ b/aio/src/app/custom-elements/code/code-example.component.ts
@@ -0,0 +1,89 @@
+/* tslint:disable component-selector */
+import { Component, HostBinding, ElementRef, ViewChild, Input, AfterViewInit } from '@angular/core';
+import { CodeComponent } from './code.component';
+
+/**
+ * An embeddable code block that displays nicely formatted code.
+ * Example usage:
+ *
+ * ```
+ * <code-example language="ts" linenums="2" class="special" title="Do Stuff">
+ * // a code block
+ * console.log('do stuff');
+ * </code-example>
+ * ```
+ */
+@Component({
+  selector: 'code-example',
+  template: `
+    <!-- Content projection is used to get the content HTML provided to this component -->
+    <div #content style="display: none"><ng-content></ng-content></div>
+
+    <header *ngIf="title">{{title}}</header>
+
+    <aio-code [ngClass]="classes"
+              [language]="language"
+              [linenums]="linenums"
+              [path]="path"
+              [region]="region"
+              [hideCopy]="hidecopy"
+              [title]="title">
+    </aio-code>
+  `,
+})
+export class CodeExampleComponent implements AfterViewInit {
+  classes: {};
+
+  @Input() language: string;
+
+  @Input() linenums: string;
+
+  @Input() region: string;
+
+  @Input()
+  set title(title: string) {
+    this._title = title;
+    this.classes = {
+      'headed-code': !!this.title,
+      'simple-code': !this.title,
+    };
+  }
+  get title(): string { return this._title; }
+  private _title: string;
+
+  @Input()
+  set path(path: string) {
+    this._path = path;
+    this.isAvoid = this.path.indexOf('.avoid.') !== -1;
+  }
+  get path(): string { return this._path; }
+  private _path = '';
+
+  @Input()
+  set hidecopy(hidecopy: boolean) {
+    // Coerce the boolean value.
+    this._hidecopy = hidecopy != null && `${hidecopy}` !== 'false';
+  }
+  get hidecopy(): boolean { return this._hidecopy; }
+  private _hidecopy: boolean;
+
+  @Input('hide-copy')
+  set hyphenatedHideCopy(hidecopy: boolean) {
+    this.hidecopy = hidecopy;
+  }
+
+  @Input('hideCopy')
+  set capitalizedHideCopy(hidecopy: boolean) {
+    this.hidecopy = hidecopy;
+  }
+
+  @HostBinding('class.avoidFile') isAvoid = false;
+
+  @ViewChild('content') content: ElementRef;
+
+  @ViewChild(CodeComponent) aioCode: CodeComponent;
+
+  ngAfterViewInit() {
+    this.aioCode.code = this.content.nativeElement.innerHTML;
+  }
+}
diff --git a/aio/src/app/custom-elements/code/code-example.module.ts b/aio/src/app/custom-elements/code/code-example.module.ts
new file mode 100644
index 000000000000..54e04cf67017
--- /dev/null
+++ b/aio/src/app/custom-elements/code/code-example.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CodeExampleComponent } from './code-example.component';
+import { CodeModule } from './code.module';
+import { WithCustomElementComponent } from '../element-registry';
+
+@NgModule({
+  imports: [ CommonModule, CodeModule ],
+  declarations: [ CodeExampleComponent ],
+  exports: [ CodeExampleComponent ],
+  entryComponents: [ CodeExampleComponent ]
+})
+export class CodeExampleModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = CodeExampleComponent;
+}
diff --git a/aio/src/app/custom-elements/code/code-tabs.component.spec.ts b/aio/src/app/custom-elements/code/code-tabs.component.spec.ts
new file mode 100644
index 000000000000..636787a005be
--- /dev/null
+++ b/aio/src/app/custom-elements/code/code-tabs.component.spec.ts
@@ -0,0 +1,96 @@
+import { Component, ViewChild, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Logger } from 'app/shared/logger.service';
+import { MockLogger } from 'testing/logger.service';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { CodeTabsComponent } from './code-tabs.component';
+import { CodeTabsModule } from './code-tabs.module';
+
+describe('CodeTabsComponent', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let hostComponent: HostComponent;
+  let codeTabsComponent: CodeTabsComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HostComponent ],
+      imports: [ CodeTabsModule, NoopAnimationsModule ],
+      schemas: [ NO_ERRORS_SCHEMA ],
+      providers: [
+       { provide: Logger, useClass: MockLogger },
+      ]
+    });
+
+    fixture = TestBed.createComponent(HostComponent);
+    hostComponent = fixture.componentInstance;
+    codeTabsComponent = hostComponent.codeTabsComponent;
+
+    fixture.detectChanges();
+  });
+
+  it('should get correct tab info', () => {
+    const tabs = codeTabsComponent.tabs;
+    expect(tabs.length).toBe(2);
+
+    // First code pane expectations
+    expect(tabs[0].class).toBe('class-A');
+    expect(tabs[0].language).toBe('language-A');
+    expect(tabs[0].linenums).toBe('linenums-A');
+    expect(tabs[0].path).toBe('path-A');
+    expect(tabs[0].region).toBe('region-A');
+    expect(tabs[0].title).toBe('title-A');
+    expect(tabs[0].code.trim()).toBe('Code example 1');
+
+    // Second code pane expectations
+    expect(tabs[1].class).toBe('class-B');
+    expect(tabs[1].language).toBe('language-B');
+    expect(tabs[1].linenums).toBe('default-linenums', 'Default linenums should have been used');
+    expect(tabs[1].path).toBe('path-B');
+    expect(tabs[1].region).toBe('region-B');
+    expect(tabs[1].title).toBe('title-B');
+    expect(tabs[1].code.trim()).toBe('Code example 2');
+  });
+
+  it('should create the right number of tabs with the right labels and classes', () => {
+    const matTabs = fixture.nativeElement.querySelectorAll('.mat-tab-label');
+    expect(matTabs.length).toBe(2);
+
+    expect(matTabs[0].textContent.trim()).toBe('title-A');
+    expect(matTabs[0].querySelector('.class-A')).toBeTruthy();
+
+    expect(matTabs[1].textContent.trim()).toBe('title-B');
+    expect(matTabs[1].querySelector('.class-B')).toBeTruthy();
+  });
+
+  it('should show the first tab with the right code', () => {
+    const codeContent = fixture.nativeElement.querySelector('aio-code').textContent;
+    expect(codeContent.indexOf('Code example 1') !== -1).toBeTruthy();
+  });
+});
+
+@Component({
+  selector: 'aio-host-comp',
+  template: `
+    <code-tabs linenums="default-linenums">
+      <code-pane class="class-A"
+                 language="language-A"
+                 linenums="linenums-A"
+                 path="path-A"
+                 region="region-A"
+                 title="title-A">
+        Code example 1
+      </code-pane>
+      <code-pane class="class-B"
+                 language="language-B"
+                 path="path-B"
+                 region="region-B"
+                 title="title-B">
+        Code example 2
+      </code-pane>
+    </code-tabs>
+  `
+})
+class HostComponent {
+  @ViewChild(CodeTabsComponent) codeTabsComponent: CodeTabsComponent;
+}
diff --git a/aio/src/app/custom-elements/code/code-tabs.component.ts b/aio/src/app/custom-elements/code/code-tabs.component.ts
new file mode 100644
index 000000000000..d7759955c2a2
--- /dev/null
+++ b/aio/src/app/custom-elements/code/code-tabs.component.ts
@@ -0,0 +1,83 @@
+/* tslint:disable component-selector */
+import { Component, AfterViewInit, ViewChild, Input, ViewChildren, QueryList, OnInit } from '@angular/core';
+import { CodeComponent } from './code.component';
+
+export interface TabInfo {
+  class: string|null;
+  code: string;
+  language: string|null;
+  linenums: any;
+  path: string;
+  region: string;
+  title: string|null;
+}
+
+/**
+ * Renders a set of tab group of code snippets.
+ *
+ * The innerHTML of the `<code-tabs>` component should contain `<code-pane>` elements.
+ * Each `<code-pane>` has the same interface as the embedded `<code-example>` component.
+ * The optional `linenums` attribute is the default `linenums` for each code pane.
+ */
+@Component({
+  selector: 'code-tabs',
+  template: `
+    <!-- Use content projection so that the provided HTML's code-panes can be split into tabs -->
+    <div #content style="display: none"><ng-content></ng-content></div>
+
+    <mat-card>
+      <mat-tab-group class="code-tab-group" disableRipple>
+        <mat-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
+          <ng-template mat-tab-label>
+            <span class="{{ tab.class }}">{{ tab.title }}</span>
+          </ng-template>
+          <aio-code class="{{ tab.class }}"
+                    [language]="tab.language"
+                    [linenums]="tab.linenums"
+                    [path]="tab.path"
+                    [region]="tab.region"
+                    [title]="tab.title">
+          </aio-code>
+        </mat-tab>
+      </mat-tab-group>
+    </mat-card>
+  `,
+})
+export class CodeTabsComponent implements OnInit, AfterViewInit {
+  tabs: TabInfo[];
+
+  @Input('linenums') linenums: string;
+
+  @ViewChild('content') content;
+
+  @ViewChildren(CodeComponent) codeComponents: QueryList<CodeComponent>;
+
+  ngOnInit() {
+    this.tabs = [];
+    const codeExamples = this.content.nativeElement.querySelectorAll('code-pane');
+
+    for (let i = 0; i < codeExamples.length; i++) {
+      const tabContent = codeExamples[i];
+      this.tabs.push(this.getTabInfo(tabContent));
+    }
+  }
+
+  ngAfterViewInit() {
+    this.codeComponents.toArray().forEach((codeComponent, i) => {
+      codeComponent.code = this.tabs[i].code;
+    });
+  }
+
+  /** Gets the extracted TabInfo data from the provided code-pane element. */
+  private getTabInfo(tabContent: HTMLElement): TabInfo {
+    return {
+      class: tabContent.getAttribute('class'),
+      code: tabContent.innerHTML,
+      language: tabContent.getAttribute('language'),
+      linenums: tabContent.getAttribute('linenums') || this.linenums,
+      path: tabContent.getAttribute('path') || '',
+      region: tabContent.getAttribute('region') || '',
+      title: tabContent.getAttribute('title')
+    };
+  }
+}
diff --git a/aio/src/app/custom-elements/code/code-tabs.module.ts b/aio/src/app/custom-elements/code/code-tabs.module.ts
new file mode 100644
index 000000000000..eac0e29b37b9
--- /dev/null
+++ b/aio/src/app/custom-elements/code/code-tabs.module.ts
@@ -0,0 +1,16 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CodeTabsComponent } from './code-tabs.component';
+import { MatCardModule, MatTabsModule } from '@angular/material';
+import { CodeModule } from './code.module';
+import { WithCustomElementComponent } from '../element-registry';
+
+@NgModule({
+  imports: [ CommonModule, MatCardModule, MatTabsModule, CodeModule ],
+  declarations: [ CodeTabsComponent ],
+  exports: [ CodeTabsComponent ],
+  entryComponents: [ CodeTabsComponent ]
+})
+export class CodeTabsModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = CodeTabsComponent;
+}
diff --git a/aio/src/app/custom-elements/code/code.component.spec.ts b/aio/src/app/custom-elements/code/code.component.spec.ts
new file mode 100644
index 000000000000..32ed5a360708
--- /dev/null
+++ b/aio/src/app/custom-elements/code/code.component.spec.ts
@@ -0,0 +1,302 @@
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatSnackBar } from '@angular/material';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { first } from 'rxjs/operators';
+
+import { CodeComponent } from './code.component';
+import { CodeModule } from './code.module';
+import { CopierService } from 'app/shared//copier.service';
+import { Logger } from 'app/shared/logger.service';
+import { PrettyPrinter } from './pretty-printer.service';
+
+const oneLineCode = 'const foo = "bar";';
+
+const smallMultiLineCode = `
+&lt;hero-details&gt;
+  &lt;h2&gt;Bah Dah Bing&lt;/h2&gt;
+  &lt;hero-team&gt;
+    &lt;h3&gt;NYC Team&lt;/h3&gt;
+  &lt;/hero-team&gt;
+&lt;/hero-details&gt;`;
+
+const bigMultiLineCode = smallMultiLineCode + smallMultiLineCode + smallMultiLineCode;
+
+describe('CodeComponent', () => {
+  let hostComponent: HostComponent;
+  let fixture: ComponentFixture<HostComponent>;
+
+  // WARNING: Chance of cross-test pollution
+  // CodeComponent injects PrettyPrintService
+  // Once PrettyPrintService runs once _anywhere_, its ctor loads `prettify.js`
+  // which sets `window['prettyPrintOne']`
+  // That global survives these tests unless
+  // we take strict measures to wipe it out in the `afterAll`
+  // and make sure THAT runs after the tests by making component creation async
+  afterAll(() => {
+    delete (window as any)['prettyPrint'];
+    delete (window as any)['prettyPrintOne'];
+  });
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ NoopAnimationsModule, CodeModule ],
+      declarations: [ HostComponent ],
+      providers: [
+        PrettyPrinter,
+        CopierService,
+        {provide: Logger, useClass: TestLogger }
+     ]
+    }).compileComponents();
+  });
+
+  // Must be async because
+  // CodeComponent creates PrettyPrintService which async loads `prettify.js`.
+  // If not async, `afterAll` finishes before tests do!
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(HostComponent);
+    hostComponent = fixture.componentInstance;
+
+    fixture.detectChanges();
+  }));
+
+  describe('pretty printing', () => {
+    const untilCodeFormatted = () => {
+      const emitter = hostComponent.codeComponent.codeFormatted;
+      return emitter.pipe(first()).toPromise();
+    };
+    const hasLineNumbers = async () => {
+      // presence of `<li>`s are a tell-tale for line numbers
+      await untilCodeFormatted();
+      return 0 < fixture.nativeElement.querySelectorAll('li').length;
+    };
+
+    it('should format a one-line code sample', async () => {
+      hostComponent.setCode(oneLineCode);
+      await untilCodeFormatted();
+
+      // 'pln' spans are a tell-tale for syntax highlighting
+      const spans = fixture.nativeElement.querySelectorAll('span.pln');
+      expect(spans.length).toBeGreaterThan(0, 'formatted spans');
+    });
+
+    it('should format a one-line code sample without linenums by default', async () => {
+      hostComponent.setCode(oneLineCode);
+      expect(await hasLineNumbers()).toBe(false);
+    });
+
+    it('should add line numbers to one-line code sample when linenums set true', async () => {
+      hostComponent.linenums = 'true';
+      fixture.detectChanges();
+
+      expect(await hasLineNumbers()).toBe(true);
+    });
+
+    it('should format a small multi-line code without linenums by default', async () => {
+      hostComponent.setCode(smallMultiLineCode);
+      expect(await hasLineNumbers()).toBe(false);
+    });
+
+    it('should add line numbers to a big multi-line code by default', async () => {
+      hostComponent.setCode(bigMultiLineCode);
+      expect(await hasLineNumbers()).toBe(true);
+    });
+
+    it('should format big multi-line code without linenums when linenums set false', async () => {
+      hostComponent.linenums = false;
+      fixture.detectChanges();
+
+      hostComponent.setCode(bigMultiLineCode);
+      expect(await hasLineNumbers()).toBe(false);
+    });
+  });
+
+  describe('whitespace handling', () => {
+    it('should remove common indentation from the code before rendering', () => {
+      hostComponent.linenums = false;
+      fixture.detectChanges();
+
+      hostComponent.setCode('  abc\n   let x = text.split(\'\\n\');\n  ghi\n\n  jkl\n');
+      const codeContent = fixture.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;
+      fixture.detectChanges();
+
+      hostComponent.setCode('\n\n\n' + smallMultiLineCode + '\n\n\n');
+      const codeContent = fixture.nativeElement.querySelector('code').textContent;
+      expect(codeContent).toEqual(codeContent.trim());
+    });
+
+    it('should trim whitespace from code before computing whether to format linenums', () => {
+      hostComponent.setCode('\n\n\n' + oneLineCode + '\n\n\n');
+
+      // `<li>`s are a tell-tale for line numbers
+      const lis = fixture.nativeElement.querySelectorAll('li');
+      expect(lis.length).toBe(0, 'should be no linenums');
+    });
+  });
+
+  describe('error message', () => {
+
+    function getErrorMessage() {
+      const missing: HTMLElement = fixture.nativeElement.querySelector('.code-missing');
+      return missing ? missing.textContent : null;
+    }
+
+    it('should not display "code-missing" class when there is some code', () => {
+      expect(getErrorMessage()).toBeNull('should not have element with "code-missing" class');
+    });
+
+    it('should display error message when there is no code (after trimming)', () => {
+      hostComponent.setCode(' \n ');
+      expect(getErrorMessage()).toContain('missing');
+    });
+
+    it('should show path and region in missing-code error message', () => {
+      hostComponent.path = 'fizz/buzz/foo.html';
+      hostComponent.region = 'something';
+      fixture.detectChanges();
+
+      hostComponent.setCode(' \n ');
+      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.path = 'fizz/buzz/foo.html';
+      fixture.detectChanges();
+
+      hostComponent.setCode(' \n ');
+      expect(getErrorMessage()).toMatch(/for[\s\S]fizz\/buzz\/foo\.html$/);
+    });
+
+    it('should show simple missing-code error message when no path/region', () => {
+      hostComponent.setCode(' \n ');
+      expect(getErrorMessage()).toMatch(/missing.$/);
+    });
+  });
+
+  describe('copy button', () => {
+
+    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', () => {
+      expect(getButton().title).toBe('Copy code snippet');
+    });
+
+    it('should have no aria-label by default', () => {
+      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.setCode(smallMultiLineCode);
+
+      [false, true, 42].forEach(linenums => {
+        hostComponent.linenums = linenums;
+        fixture.detectChanges();
+        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: MatSnackBar = TestBed.get(MatSnackBar);
+      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: MatSnackBar = TestBed.get(MatSnackBar);
+      const copierService: CopierService = TestBed.get(CopierService);
+      const logger: TestLogger = TestBed.get(Logger);
+      spyOn(snackBar, 'open');
+      spyOn(copierService, 'copyText').and.returnValue(false);
+      getButton().click();
+      expect(snackBar.open).toHaveBeenCalledWith('Copy failed. Please try again!', '', { duration: 800 });
+      expect(logger.error).toHaveBeenCalledTimes(1);
+      expect(logger.error).toHaveBeenCalledWith(jasmine.any(Error));
+      expect(logger.error.calls.mostRecent().args[0].message).toMatch(/^ERROR copying code to clipboard:/);
+    });
+  });
+});
+
+//// Test helpers ////
+// tslint:disable:member-ordering
+@Component({
+  selector: 'aio-host-comp',
+  template: `
+    <aio-code [language]="language"
+    [linenums]="linenums" [path]="path" [region]="region"
+    [hideCopy]="hideCopy" [title]="title"></aio-code>
+  `
+})
+class HostComponent implements AfterViewInit {
+  hideCopy: boolean;
+  language: string;
+  linenums: boolean | number | string;
+  path: string;
+  region: string;
+  title: string;
+
+  @ViewChild(CodeComponent) codeComponent: CodeComponent;
+
+  ngAfterViewInit() {
+    this.setCode(oneLineCode);
+  }
+
+  /** Changes the displayed code on the code component. */
+  setCode(code: string) {
+    this.codeComponent.code = code;
+  }
+}
+
+class TestLogger {
+  log = jasmine.createSpy('log');
+  error = jasmine.createSpy('error');
+}
diff --git a/aio/src/app/custom-elements/code/code.component.ts b/aio/src/app/custom-elements/code/code.component.ts
new file mode 100644
index 000000000000..534f93fdd5ad
--- /dev/null
+++ b/aio/src/app/custom-elements/code/code.component.ts
@@ -0,0 +1,191 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core';
+import { Logger } from 'app/shared/logger.service';
+import { PrettyPrinter } from './pretty-printer.service';
+import { CopierService } from 'app/shared/copier.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { tap } from 'rxjs/operators';
+
+/**
+ * If linenums is not set, this is the default maximum number of lines that
+ * an example can display without line numbers.
+ */
+const DEFAULT_LINE_NUMS_COUNT = 10;
+
+/**
+ * Formatted Code Block
+ *
+ * Pretty renders a code block, used in the docs and API reference by the code-example and
+ * code-tabs embedded components.
+ * It includes a "copy" button that will send the content to the clipboard when clicked
+ *
+ * Example usage:
+ *
+ * ```
+ * <aio-code
+ *   [language]="ts"
+ *   [linenums]="true"
+ *   [path]="router/src/app/app.module.ts"
+ *   [region]="animations-module">
+ * </aio-code>
+ * ```
+ *
+ *
+ * Renders code provided through the `updateCode` method.
+ */
+@Component({
+  selector: 'aio-code',
+  template: `
+    <pre class="prettyprint lang-{{language}}">
+      <button *ngIf="!hideCopy" class="material-icons copy-button no-print"
+        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 copied when clicking the copy button, this should not be HTML encoded */
+  private codeText: string;
+
+  /** Code that should be formatted with current inputs and displayed in the view. */
+  set code(code: string) {
+    this._code = code;
+
+    if (!this._code || !this._code.trim()) {
+      this.showMissingCodeMessage();
+    } else {
+      this.formatDisplayedCode();
+    }
+  }
+  get code(): string { return this._code; }
+  _code: string;
+
+  /** Whether the copy button should be shown. */
+  @Input() hideCopy: boolean;
+
+  /** Language to render the code (e.g. javascript, dart, typescript). */
+  @Input() language: string;
+
+  /**
+   * Whether to display line numbers:
+   *  - If false: hide
+   *  - If true: show
+   *  - If number: show but start at that number
+   */
+  @Input() linenums: boolean | number | string;
+
+  /** Path to the source of the code. */
+  @Input() path: string;
+
+  /** Region of the source of the code being displayed. */
+  @Input() region: string;
+
+  /** Optional title to be displayed above the code. */
+  @Input()
+  set title(title: string) {
+    this._title = title;
+    this.ariaLabel = this.title ? `Copy code snippet from ${this.title}` : '';
+  }
+  get title(): string { return this._title; }
+  private _title: string;
+
+  @Output() codeFormatted = new EventEmitter<void>();
+
+  /** The element in the template that will display the formatted code. */
+  @ViewChild('codeContainer') codeContainer: ElementRef;
+
+  constructor(
+    private snackbar: MatSnackBar,
+    private pretty: PrettyPrinter,
+    private copier: CopierService,
+    private logger: Logger) {}
+
+  ngOnChanges() {
+    // If some inputs have changed and there is code displayed, update the view with the latest
+    // formatted code.
+    if (this.code) {
+      this.formatDisplayedCode();
+    }
+  }
+
+  private formatDisplayedCode() {
+    const leftAlignedCode = leftAlign(this.code);
+    this.setCodeHtml(leftAlignedCode); // start with unformatted code
+    this.codeText = this.getCodeText(); // store the unformatted code as text (for copying)
+
+    this.pretty
+        .formatCode(leftAlignedCode, this.language, this.getLinenums(leftAlignedCode))
+        .pipe(tap(() => this.codeFormatted.emit()))
+        .subscribe(c => this.setCodeHtml(c), err => { /* ignore failure to format */ }
+    );
+  }
+
+  /** Sets the message showing that the code could not be found. */
+  private showMissingCodeMessage() {
+    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>`);
+  }
+
+  /** Sets the innerHTML of the code container to the provided code string. */
+  private setCodeHtml(formattedCode: string) {
+    // **Security:** Code example content is provided by docs authors and as such its considered to
+    // be safe for innerHTML purposes.
+    this.codeContainer.nativeElement.innerHTML = formattedCode;
+  }
+
+  /** Gets the textContent of the displayed code element. */
+  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;
+  }
+
+  /** Copies the code snippet to the user's clipboard. */
+  doCopy() {
+    const code = this.codeText;
+    const successfullyCopied = this.copier.copyText(code);
+
+    if (successfullyCopied) {
+      this.logger.log('Copied code to clipboard:', code);
+      this.snackbar.open('Code Copied', '', { duration: 800 });
+    } else {
+      this.logger.error(new Error(`ERROR copying code to clipboard: "${code}"`));
+      this.snackbar.open('Copy failed. Please try again!', '', { duration: 800 });
+    }
+  }
+
+  /** Gets the calculated value of linenums (boolean/number). */
+  getLinenums(code: string) {
+    const linenums =
+      typeof this.linenums === 'boolean' ? this.linenums :
+      this.linenums === 'true' ? true :
+      this.linenums === 'false' ? false :
+      typeof this.linenums === 'string' ? parseInt(this.linenums, 10) :
+      this.linenums;
+
+    // if no linenums, enable line numbers if more than one line
+    return linenums == null || isNaN(linenums as number) ?
+        (code.match(/\n/g) || []).length > DEFAULT_LINE_NUMS_COUNT : linenums;
+  }
+}
+
+function leftAlign(text: string): string {
+  let indent = Number.MAX_VALUE;
+
+  const lines = text.split('\n');
+  lines.forEach(line => {
+    const lineIndent = line.search(/\S/);
+    if (lineIndent !== -1) {
+      indent = Math.min(lineIndent, indent);
+    }
+  });
+
+  return lines.map(line => line.substr(indent)).join('\n').trim();
+}
diff --git a/aio/src/app/custom-elements/code/code.module.ts b/aio/src/app/custom-elements/code/code.module.ts
new file mode 100644
index 000000000000..ced134dcb45b
--- /dev/null
+++ b/aio/src/app/custom-elements/code/code.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CodeComponent } from './code.component';
+import { MatSnackBarModule } from '@angular/material';
+import { PrettyPrinter } from './pretty-printer.service';
+import { CopierService } from 'app/shared/copier.service';
+
+@NgModule({
+  imports: [ CommonModule, MatSnackBarModule ],
+  declarations: [ CodeComponent ],
+  entryComponents: [ CodeComponent ],
+  exports: [ CodeComponent ],
+  providers: [ PrettyPrinter, CopierService ]
+})
+export class CodeModule { }
diff --git a/aio/src/app/custom-elements/code/pretty-printer.service.ts b/aio/src/app/custom-elements/code/pretty-printer.service.ts
new file mode 100644
index 000000000000..d56a3a27fc56
--- /dev/null
+++ b/aio/src/app/custom-elements/code/pretty-printer.service.ts
@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+
+import { from as fromPromise, Observable } from 'rxjs';
+import { first, map, share } from 'rxjs/operators';
+
+import { Logger } from 'app/shared/logger.service';
+
+declare const System: {
+  import(name: string): Promise<any>;
+};
+
+type PrettyPrintOne = (code: string, language?: string, linenums?: number | boolean) => string;
+
+/**
+ * Wrapper around the prettify.js library
+ */
+@Injectable()
+export class PrettyPrinter {
+
+  private prettyPrintOne: Observable<PrettyPrintOne>;
+
+  constructor(private logger: Logger) {
+    this.prettyPrintOne = fromPromise(this.getPrettyPrintOne()).pipe(share());
+  }
+
+  private getPrettyPrintOne(): Promise<PrettyPrintOne> {
+    const ppo = (window as any)['prettyPrintOne'];
+    return ppo ? Promise.resolve(ppo) :
+      // prettify.js is not in window global; load it with webpack loader
+      System.import('assets/js/prettify.js')
+        .then(
+          () => (window as any)['prettyPrintOne'],
+          err => {
+            const msg = `Cannot get prettify.js from server: ${err.message}`;
+            this.logger.error(new Error(msg));
+            // return a pretty print fn that always fails.
+            return () => { throw new Error(msg); };
+          });
+  }
+
+  /**
+   * Format code snippet as HTML
+   * @param {string} code - the code snippet to format; should already be HTML encoded
+   * @param {string} [language] - The language of the code to render (could be javascript, html, typescript, etc)
+   * @param {string|number} [linenums] - Whether to display line numbers:
+   *  - false: don't display
+   *  - true: do display
+   *  - number: do display but start at the given number
+   * @returns Observable<string> - Observable of formatted code
+   */
+  formatCode(code: string, language?: string, linenums?: number | boolean) {
+    return this.prettyPrintOne.pipe(
+      map(ppo => {
+        try {
+          return ppo(code, language, linenums);
+        } catch (err) {
+          const msg = `Could not format code that begins '${code.substr(0, 50)}...'.`;
+          console.error(msg, err);
+          throw new Error(msg);
+        }
+      }),
+      first(),  // complete immediately
+    );
+  }
+}
diff --git a/aio/src/app/custom-elements/contributor/contributor-list.component.spec.ts b/aio/src/app/custom-elements/contributor/contributor-list.component.spec.ts
new file mode 100644
index 000000000000..4ecb04612cf3
--- /dev/null
+++ b/aio/src/app/custom-elements/contributor/contributor-list.component.spec.ts
@@ -0,0 +1,105 @@
+import { ReflectiveInjector } from '@angular/core';
+
+import { of } from 'rxjs';
+
+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/custom-elements/contributor/contributor-list.component.ts b/aio/src/app/custom-elements/contributor/contributor-list.component.ts
new file mode 100644
index 000000000000..cb31a6ea24e1
--- /dev/null
+++ b/aio/src/app/custom-elements/contributor/contributor-list.component.ts
@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { ContributorGroup } from './contributors.model';
+import { ContributorService } from './contributor.service';
+import { LocationService } from 'app/shared/location.service';
+
+@Component({
+  selector: `aio-contributor-list`,
+  template: `
+  <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 {
+  private groups: ContributorGroup[];
+  groupNames: string[];
+  selectedGroup: ContributorGroup;
+
+  constructor(
+    private contributorService: ContributorService,
+    private locationService: LocationService) { }
+
+  ngOnInit() {
+    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: string) {
+    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/custom-elements/contributor/contributor-list.module.ts b/aio/src/app/custom-elements/contributor/contributor-list.module.ts
new file mode 100644
index 000000000000..d404fae9f48e
--- /dev/null
+++ b/aio/src/app/custom-elements/contributor/contributor-list.module.ts
@@ -0,0 +1,16 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContributorListComponent } from './contributor-list.component';
+import { ContributorService } from './contributor.service';
+import { ContributorComponent } from './contributor.component';
+import { WithCustomElementComponent } from '../element-registry';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ ContributorListComponent, ContributorComponent ],
+  entryComponents: [ ContributorListComponent ],
+  providers: [ ContributorService ]
+})
+export class ContributorListModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = ContributorListComponent;
+}
diff --git a/aio/src/app/custom-elements/contributor/contributor.component.ts b/aio/src/app/custom-elements/contributor/contributor.component.ts
new file mode 100644
index 000000000000..710d797b6c74
--- /dev/null
+++ b/aio/src/app/custom-elements/contributor/contributor.component.ts
@@ -0,0 +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: `
+    <div [ngClass]="{ 'flipped': person.isFlipped }" class="contributor-card">
+
+        <div class="card-front" (click)="flipCard(person)">
+            <h3>{{person.name}}</h3>
+
+            <div class="contributor-image" [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
+                <div class="contributor-info">
+                    <a *ngIf="person.bio" mat-button>
+                        View Bio
+                    </a>
+                    <a *ngIf="person.twitter" mat-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" mat-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;
+  noPicture = '_no-one.png';
+  pictureBase = CONTENT_URL_PREFIX + 'images/bios/';
+
+  flipCard(person: Contributor) {
+    person.isFlipped = !person.isFlipped;
+  }
+}
diff --git a/aio/src/app/custom-elements/contributor/contributor.service.spec.ts b/aio/src/app/custom-elements/contributor/contributor.service.spec.ts
new file mode 100644
index 000000000000..909b3cf60ba2
--- /dev/null
+++ b/aio/src/app/custom-elements/contributor/contributor.service.spec.ts
@@ -0,0 +1,117 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import { ContributorService } from './contributor.service';
+import { ContributorGroup } from './contributors.model';
+
+describe('ContributorService', () => {
+
+  let injector: Injector;
+  let contribService: ContributorService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    injector = TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        ContributorService
+      ]
+    });
+
+    contribService = injector.get<ContributorService>(ContributorService);
+    httpMock = injector.get(HttpTestingController);
+  });
+
+  afterEach(() => httpMock.verify());
+
+  it('should make a single connection to the server', () => {
+    const req = httpMock.expectOne({});
+    expect(req.request.url).toBe('generated/contributors.json');
+  });
+
+  describe('#contributors', () => {
+
+    let contribs: ContributorGroup[];
+    let testData: any;
+
+    beforeEach(() => {
+      testData = getTestContribs();
+      httpMock.expectOne({}).flush(testData);
+      contribService.contributors.subscribe(results => contribs = results);
+    });
+
+    it('contributors observable should complete', () => {
+      let completed = false;
+      contribService.contributors.subscribe(undefined, undefined, () => 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() {
+  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/custom-elements/contributor/contributor.service.ts b/aio/src/app/custom-elements/contributor/contributor.service.ts
new file mode 100644
index 000000000000..9cc29c6f4747
--- /dev/null
+++ b/aio/src/app/custom-elements/contributor/contributor.service.ts
@@ -0,0 +1,71 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { ConnectableObservable, Observable } from 'rxjs';
+import { map, publishLast } from 'rxjs/operators';
+
+import { Contributor, ContributorGroup } from './contributors.model';
+
+// TODO(andrewjs): Look into changing this so that we don't import the service just to get the const
+import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
+
+const contributorsPath = CONTENT_URL_PREFIX + 'contributors.json';
+const knownGroups = ['Angular', 'GDE'];
+
+@Injectable()
+export class ContributorService {
+  contributors: Observable<ContributorGroup[]>;
+
+  constructor(private http: HttpClient) {
+    this.contributors = this.getContributors();
+  }
+
+  private getContributors() {
+    const contributors = this.http.get<{[key: string]: Contributor}>(contributorsPath).pipe(
+      // Create group map
+      map(contribs => {
+        const contribMap: { [name: string]: Contributor[]} = {};
+        Object.keys(contribs).forEach(key => {
+          const contributor = contribs[key];
+          const group = contributor.group;
+          const contribGroup = contribMap[group];
+          if (contribGroup) {
+            contribGroup.push(contributor);
+          } else {
+            contribMap[group] = [contributor];
+          }
+        });
+
+        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 as ConnectableObservable<ContributorGroup[]>).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/custom-elements/contributor/contributors.model.ts b/aio/src/app/custom-elements/contributor/contributors.model.ts
new file mode 100644
index 000000000000..da01decdf6f8
--- /dev/null
+++ b/aio/src/app/custom-elements/contributor/contributors.model.ts
@@ -0,0 +1,15 @@
+export class ContributorGroup {
+  name: string;
+  order: number;
+  contributors: Contributor[];
+}
+
+export class Contributor {
+  group: string;
+  name: string;
+  picture?: string;
+  website?: string;
+  twitter?: string;
+  bio?: string;
+  isFlipped ? = false;
+}
diff --git a/aio/src/app/custom-elements/current-location/current-location.component.spec.ts b/aio/src/app/custom-elements/current-location/current-location.component.spec.ts
new file mode 100644
index 000000000000..58dac0445ff8
--- /dev/null
+++ b/aio/src/app/custom-elements/current-location/current-location.component.spec.ts
@@ -0,0 +1,35 @@
+import { 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/custom-elements/current-location/current-location.component.ts b/aio/src/app/custom-elements/current-location/current-location.component.ts
new file mode 100644
index 000000000000..38af7b148da6
--- /dev/null
+++ b/aio/src/app/custom-elements/current-location/current-location.component.ts
@@ -0,0 +1,12 @@
+/* tslint:disable component-selector */
+import { Component } from '@angular/core';
+import { LocationService } from 'app/shared/location.service';
+
+/** Renders 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/custom-elements/current-location/current-location.module.ts b/aio/src/app/custom-elements/current-location/current-location.module.ts
new file mode 100644
index 000000000000..dce7885408d1
--- /dev/null
+++ b/aio/src/app/custom-elements/current-location/current-location.module.ts
@@ -0,0 +1,13 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CurrentLocationComponent } from './current-location.component';
+import { WithCustomElementComponent } from '../element-registry';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ CurrentLocationComponent ],
+  entryComponents: [ CurrentLocationComponent ]
+})
+export class CurrentLocationModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = CurrentLocationComponent;
+}
diff --git a/aio/src/app/custom-elements/custom-elements.module.ts b/aio/src/app/custom-elements/custom-elements.module.ts
new file mode 100644
index 000000000000..f2000a391fbb
--- /dev/null
+++ b/aio/src/app/custom-elements/custom-elements.module.ts
@@ -0,0 +1,25 @@
+import { NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader } from '@angular/core';
+import { ROUTES} from '@angular/router';
+import { ElementsLoader } from './elements-loader';
+import {
+  ELEMENT_MODULE_PATHS,
+  ELEMENT_MODULE_PATHS_AS_ROUTES,
+  ELEMENT_MODULE_PATHS_TOKEN
+} from './element-registry';
+import { LazyCustomElementComponent } from './lazy-custom-element.component';
+
+@NgModule({
+  declarations: [ LazyCustomElementComponent ],
+  exports: [ LazyCustomElementComponent ],
+  providers: [
+    ElementsLoader,
+    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },
+    { provide: ELEMENT_MODULE_PATHS_TOKEN, useValue: ELEMENT_MODULE_PATHS },
+
+    // Providing these routes as a signal to the build system that these modules should be
+    // registered as lazy-loadable.
+    // TODO(andrewjs): Provide first-class support for providing this.
+    { provide: ROUTES, useValue: ELEMENT_MODULE_PATHS_AS_ROUTES, multi: true },
+  ],
+})
+export class CustomElementsModule { }
diff --git a/aio/src/app/custom-elements/element-registry.ts b/aio/src/app/custom-elements/element-registry.ts
new file mode 100644
index 000000000000..d8ca727b67ac
--- /dev/null
+++ b/aio/src/app/custom-elements/element-registry.ts
@@ -0,0 +1,68 @@
+import { InjectionToken, Type } from '@angular/core';
+
+// Modules containing custom elements must be set up as lazy-loaded routes (loadChildren)
+// TODO(andrewjs): This is a hack, Angular should have first-class support for preparing a module
+// that contains custom elements.
+export const ELEMENT_MODULE_PATHS_AS_ROUTES = [
+  {
+    selector: 'aio-announcement-bar',
+    loadChildren: './announcement-bar/announcement-bar.module#AnnouncementBarModule'
+  },
+  {
+    selector: 'aio-api-list',
+    loadChildren: './api/api-list.module#ApiListModule'
+  },
+  {
+    selector: 'aio-contributor-list',
+    loadChildren: './contributor/contributor-list.module#ContributorListModule'
+  },
+  {
+    selector: 'aio-file-not-found-search',
+    loadChildren: './search/file-not-found-search.module#FileNotFoundSearchModule'
+  },
+  {
+    selector: 'aio-resource-list',
+    loadChildren: './resource/resource-list.module#ResourceListModule'
+  },
+  {
+    selector: 'aio-toc',
+    loadChildren: './toc/toc.module#TocModule'
+  },
+  {
+    selector: 'code-example',
+    loadChildren: './code/code-example.module#CodeExampleModule'
+  },
+  {
+    selector: 'code-tabs',
+    loadChildren: './code/code-tabs.module#CodeTabsModule'
+  },
+  {
+    selector: 'current-location',
+    loadChildren: './current-location/current-location.module#CurrentLocationModule'
+  },
+  {
+    selector: 'expandable-section',
+    loadChildren: './expandable-section/expandable-section.module#ExpandableSectionModule'
+  },
+  {
+    selector: 'live-example',
+    loadChildren: './live-example/live-example.module#LiveExampleModule'
+  },
+];
+
+/**
+ * Interface expected to be implemented by all modules that declare a component that can be used as
+ * a custom element.
+ */
+export interface WithCustomElementComponent {
+  customElementComponent: Type<any>;
+}
+
+/** Injection token to provide the element path modules. */
+export const ELEMENT_MODULE_PATHS_TOKEN = new InjectionToken('aio/elements-map');
+
+/** Map of possible custom element selectors to their lazy-loadable module paths. */
+export const ELEMENT_MODULE_PATHS = new Map<string, string>();
+ELEMENT_MODULE_PATHS_AS_ROUTES.forEach(route => {
+  ELEMENT_MODULE_PATHS.set(route.selector, route.loadChildren);
+});
diff --git a/aio/src/app/custom-elements/elements-loader.spec.ts b/aio/src/app/custom-elements/elements-loader.spec.ts
new file mode 100644
index 000000000000..817dd71a57ba
--- /dev/null
+++ b/aio/src/app/custom-elements/elements-loader.spec.ts
@@ -0,0 +1,296 @@
+import {
+  ComponentFactory,
+  ComponentFactoryResolver, ComponentRef, Injector, NgModuleFactory, NgModuleFactoryLoader,
+  NgModuleRef,
+  Type
+} from '@angular/core';
+import { TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing';
+
+import { ElementsLoader } from './elements-loader';
+import { ELEMENT_MODULE_PATHS_TOKEN, WithCustomElementComponent } from './element-registry';
+
+
+interface Deferred {
+  resolve(): void;
+  reject(err: any): void;
+}
+
+describe('ElementsLoader', () => {
+  let elementsLoader: ElementsLoader;
+
+  beforeEach(() => {
+    const injector = TestBed.configureTestingModule({
+      providers: [
+        ElementsLoader,
+        { provide: NgModuleFactoryLoader, useClass: FakeModuleFactoryLoader },
+        { provide: ELEMENT_MODULE_PATHS_TOKEN, useValue: new Map([
+          ['element-a-selector', 'element-a-module-path'],
+          ['element-b-selector', 'element-b-module-path']
+        ])},
+      ]
+    });
+
+    elementsLoader = injector.get(ElementsLoader);
+  });
+
+  describe('loadContainedCustomElements()', () => {
+    let loadCustomElementSpy: jasmine.Spy;
+
+    beforeEach(() => loadCustomElementSpy = spyOn(elementsLoader, 'loadCustomElement'));
+
+    it('should attempt to load and register all contained elements', fakeAsync(() => {
+      expect(loadCustomElementSpy).not.toHaveBeenCalled();
+
+      const hostEl = document.createElement('div');
+      hostEl.innerHTML = `
+        <element-a-selector></element-a-selector>
+        <element-b-selector></element-b-selector>
+      `;
+
+      elementsLoader.loadContainedCustomElements(hostEl);
+      flushMicrotasks();
+
+      expect(loadCustomElementSpy).toHaveBeenCalledTimes(2);
+      expect(loadCustomElementSpy).toHaveBeenCalledWith('element-a-selector');
+      expect(loadCustomElementSpy).toHaveBeenCalledWith('element-b-selector');
+    }));
+
+    it('should attempt to load and register only contained elements', fakeAsync(() => {
+      expect(loadCustomElementSpy).not.toHaveBeenCalled();
+
+      const hostEl = document.createElement('div');
+      hostEl.innerHTML = `
+        <element-b-selector></element-b-selector>
+      `;
+
+      elementsLoader.loadContainedCustomElements(hostEl);
+      flushMicrotasks();
+
+      expect(loadCustomElementSpy).toHaveBeenCalledTimes(1);
+      expect(loadCustomElementSpy).toHaveBeenCalledWith('element-b-selector');
+    }));
+
+    it('should wait for all contained elements to load and register', fakeAsync(() => {
+      const deferreds = returnPromisesFromSpy(loadCustomElementSpy);
+
+      const hostEl = document.createElement('div');
+      hostEl.innerHTML = `
+        <element-a-selector></element-a-selector>
+        <element-b-selector></element-b-selector>
+      `;
+
+      const log: any[] = [];
+      elementsLoader.loadContainedCustomElements(hostEl).subscribe(
+        v => log.push(`emitted: ${v}`),
+        e => log.push(`errored: ${e}`),
+        () => log.push('completed'),
+      );
+
+      flushMicrotasks();
+      expect(log).toEqual([]);
+
+      deferreds[0].resolve();
+      flushMicrotasks();
+      expect(log).toEqual([]);
+
+      deferreds[1].resolve();
+      flushMicrotasks();
+      expect(log).toEqual(['emitted: undefined', 'completed']);
+    }));
+
+    it('should fail if any of the contained elements fails to load and register', fakeAsync(() => {
+      const deferreds = returnPromisesFromSpy(loadCustomElementSpy);
+
+      const hostEl = document.createElement('div');
+      hostEl.innerHTML = `
+        <element-a-selector></element-a-selector>
+        <element-b-selector></element-b-selector>
+      `;
+
+      const log: any[] = [];
+      elementsLoader.loadContainedCustomElements(hostEl).subscribe(
+        v => log.push(`emitted: ${v}`),
+        e => log.push(`errored: ${e}`),
+        () => log.push('completed'),
+      );
+
+      flushMicrotasks();
+      expect(log).toEqual([]);
+
+      deferreds[0].resolve();
+      flushMicrotasks();
+      expect(log).toEqual([]);
+
+      deferreds[1].reject('foo');
+      flushMicrotasks();
+      expect(log).toEqual(['errored: foo']);
+    }));
+  });
+
+  describe('loadCustomElement()', () => {
+    let definedSpy: jasmine.Spy;
+    let whenDefinedSpy: jasmine.Spy;
+    let whenDefinedDeferreds: Deferred[];
+
+    beforeEach(() => {
+      // `loadCustomElement()` uses the `window.customElements` API. Provide mocks for these tests.
+      definedSpy = spyOn(window.customElements, 'define');
+      whenDefinedSpy = spyOn(window.customElements, 'whenDefined');
+      whenDefinedDeferreds = returnPromisesFromSpy(whenDefinedSpy);
+    });
+
+    it('should be able to load and register an element', fakeAsync(() => {
+      elementsLoader.loadCustomElement('element-a-selector');
+      flushMicrotasks();
+
+      expect(definedSpy).toHaveBeenCalledTimes(1);
+      expect(definedSpy).toHaveBeenCalledWith('element-a-selector', jasmine.any(Function));
+
+      // Verify the right component was loaded/registered.
+      const Ctor = definedSpy.calls.argsFor(0)[1];
+      expect(Ctor.observedAttributes).toEqual(['element-a-module-path']);
+    }));
+
+    it('should wait until the element is defined', fakeAsync(() => {
+      let state = 'pending';
+      elementsLoader.loadCustomElement('element-b-selector').then(() => state = 'resolved');
+      flushMicrotasks();
+
+      expect(state).toBe('pending');
+      expect(whenDefinedSpy).toHaveBeenCalledTimes(1);
+      expect(whenDefinedSpy).toHaveBeenCalledWith('element-b-selector');
+
+      whenDefinedDeferreds[0].resolve();
+      flushMicrotasks();
+      expect(state).toBe('resolved');
+    }));
+
+    it('should not load and register the same element more than once', fakeAsync(() => {
+      elementsLoader.loadCustomElement('element-a-selector');
+      flushMicrotasks();
+      expect(definedSpy).toHaveBeenCalledTimes(1);
+
+      definedSpy.calls.reset();
+
+      // While loading/registering is still in progress:
+      elementsLoader.loadCustomElement('element-a-selector');
+      flushMicrotasks();
+      expect(definedSpy).not.toHaveBeenCalled();
+
+      definedSpy.calls.reset();
+      whenDefinedDeferreds[0].resolve();
+
+      // Once loading/registering is already completed:
+      let state = 'pending';
+      elementsLoader.loadCustomElement('element-a-selector').then(() => state = 'resolved');
+      flushMicrotasks();
+      expect(state).toBe('resolved');
+      expect(definedSpy).not.toHaveBeenCalled();
+    }));
+
+    it('should fail if defining the the custom element fails', fakeAsync(() => {
+      let state = 'pending';
+      elementsLoader.loadCustomElement('element-b-selector').catch(e => state = `rejected: ${e}`);
+      flushMicrotasks();
+      expect(state).toBe('pending');
+
+      whenDefinedDeferreds[0].reject('foo');
+      flushMicrotasks();
+      expect(state).toBe('rejected: foo');
+    }));
+
+    it('should be able to load and register an element again if previous attempt failed',
+      fakeAsync(() => {
+        elementsLoader.loadCustomElement('element-a-selector');
+        flushMicrotasks();
+        expect(definedSpy).toHaveBeenCalledTimes(1);
+
+        definedSpy.calls.reset();
+
+        // While loading/registering is still in progress:
+        elementsLoader.loadCustomElement('element-a-selector').catch(() => undefined);
+        flushMicrotasks();
+        expect(definedSpy).not.toHaveBeenCalled();
+
+        whenDefinedDeferreds[0].reject('foo');
+        flushMicrotasks();
+        expect(definedSpy).not.toHaveBeenCalled();
+
+        // Once loading/registering has already failed:
+        elementsLoader.loadCustomElement('element-a-selector');
+        flushMicrotasks();
+        expect(definedSpy).toHaveBeenCalledTimes(1);
+      })
+    );
+  });
+});
+
+// TEST CLASSES/HELPERS
+
+class FakeCustomElementModule implements WithCustomElementComponent {
+  customElementComponent: Type<any>;
+}
+
+class FakeComponentFactory extends ComponentFactory<any> {
+  selector: string;
+  componentType: Type<any>;
+  ngContentSelectors: string[];
+  inputs = [{propName: this.identifyingInput, templateName: this.identifyingInput}];
+  outputs = [];
+
+  constructor(private identifyingInput: string) { super(); }
+
+  create(injector: Injector,
+         projectableNodes?: any[][],
+         rootSelectorOrNode?: string | any,
+         ngModule?: NgModuleRef<any>): ComponentRef<any> {
+    return jasmine.createSpy('ComponentRef') as any;
+  };
+}
+
+class FakeComponentFactoryResolver extends ComponentFactoryResolver {
+  constructor(private modulePath) { super(); }
+
+  resolveComponentFactory(component: Type<any>): ComponentFactory<any> {
+    return new FakeComponentFactory(this.modulePath);
+  }
+}
+
+class FakeModuleRef extends NgModuleRef<WithCustomElementComponent> {
+  injector = jasmine.createSpyObj('injector', ['get']);
+  componentFactoryResolver = new FakeComponentFactoryResolver(this.modulePath);
+  instance: WithCustomElementComponent = new FakeCustomElementModule();
+
+  constructor(private modulePath) {
+    super();
+
+    this.injector.get.and.returnValue(this.componentFactoryResolver);
+  }
+
+  destroy() {}
+  onDestroy(callback: () => void) {}
+}
+
+class FakeModuleFactory extends NgModuleFactory<any> {
+  moduleType: Type<any>;
+  moduleRefToCreate = new FakeModuleRef(this.modulePath);
+
+  constructor(private modulePath) { super(); }
+
+  create(parentInjector: Injector | null): NgModuleRef<any> {
+    return this.moduleRefToCreate;
+  }
+}
+
+class FakeModuleFactoryLoader extends NgModuleFactoryLoader {
+  load(modulePath: string): Promise<NgModuleFactory<any>> {
+    const fakeModuleFactory = new FakeModuleFactory(modulePath);
+    return Promise.resolve(fakeModuleFactory);
+  }
+}
+
+function returnPromisesFromSpy(spy: jasmine.Spy): Deferred[] {
+  const deferreds: Deferred[] = [];
+  spy.and.callFake(() => new Promise((resolve, reject) => deferreds.push({resolve, reject})));
+  return deferreds;
+}
diff --git a/aio/src/app/custom-elements/elements-loader.ts b/aio/src/app/custom-elements/elements-loader.ts
new file mode 100644
index 000000000000..8eef788c5b8d
--- /dev/null
+++ b/aio/src/app/custom-elements/elements-loader.ts
@@ -0,0 +1,82 @@
+import {
+  Inject,
+  Injectable,
+  NgModuleFactoryLoader,
+  NgModuleRef,
+} from '@angular/core';
+import { ELEMENT_MODULE_PATHS_TOKEN } from './element-registry';
+import { from as fromPromise, Observable, of } from 'rxjs';
+import { createCustomElement } from '@angular/elements';
+
+@Injectable()
+export class ElementsLoader {
+  /** Map of unregistered custom elements and their respective module paths to load. */
+  private elementsToLoad: Map<string, string>;
+  /** Map of custom elements that are in the process of being loaded and registered. */
+  private elementsLoading = new Map<string, Promise<void>>();
+
+  constructor(private moduleFactoryLoader: NgModuleFactoryLoader,
+              private moduleRef: NgModuleRef<any>,
+              @Inject(ELEMENT_MODULE_PATHS_TOKEN) elementModulePaths: Map<string, string>) {
+    this.elementsToLoad = new Map(elementModulePaths);
+  }
+
+  /**
+   * Queries the provided element for any custom elements that have not yet been registered with
+   * the browser. Custom elements that are registered will be removed from the list of unregistered
+   * elements so that they will not be queried in subsequent calls.
+   */
+  loadContainedCustomElements(element: HTMLElement): Observable<void> {
+    const unregisteredSelectors = Array.from(this.elementsToLoad.keys())
+        .filter(s => element.querySelector(s));
+
+    if (!unregisteredSelectors.length) { return of(undefined); }
+
+    // Returns observable that completes when all discovered elements have been registered.
+    const allRegistered = Promise.all(unregisteredSelectors.map(s => this.loadCustomElement(s)));
+    return fromPromise(allRegistered.then(() => undefined));
+  }
+
+  /** Loads and registers the custom element defined on the `WithCustomElement` module factory. */
+  loadCustomElement(selector: string): Promise<void> {
+    if (this.elementsLoading.has(selector)) {
+      // The custom element is in the process of being loaded and registered.
+      return this.elementsLoading.get(selector)!;
+    }
+
+    if (this.elementsToLoad.has(selector)) {
+      // Load and register the custom element (for the first time).
+      const modulePath = this.elementsToLoad.get(selector)!;
+      const loadedAndRegistered = this.moduleFactoryLoader
+          .load(modulePath)
+          .then(elementModuleFactory => {
+            const elementModuleRef = elementModuleFactory.create(this.moduleRef.injector);
+            const injector = elementModuleRef.injector;
+            const CustomElementComponent = elementModuleRef.instance.customElementComponent;
+            const CustomElement = createCustomElement(CustomElementComponent, {injector});
+
+            customElements!.define(selector, CustomElement);
+            return customElements.whenDefined(selector);
+          })
+          .then(() => {
+            // The custom element has been successfully loaded and registered.
+            // Remove from `elementsLoading` and `elementsToLoad`.
+            this.elementsLoading.delete(selector);
+            this.elementsToLoad.delete(selector);
+          })
+          .catch(err => {
+            // The custom element has failed to load and register.
+            // Remove from `elementsLoading`.
+            // (Do not remove from `elementsToLoad` in case it was a temporary error.)
+            this.elementsLoading.delete(selector);
+            return Promise.reject(err);
+          });
+
+      this.elementsLoading.set(selector, loadedAndRegistered);
+      return loadedAndRegistered;
+    }
+
+    // The custom element has already been loaded and registered.
+    return Promise.resolve();
+  }
+}
diff --git a/aio/src/app/custom-elements/expandable-section/expandable-section.component.html b/aio/src/app/custom-elements/expandable-section/expandable-section.component.html
new file mode 100644
index 000000000000..e0c5017f03fa
--- /dev/null
+++ b/aio/src/app/custom-elements/expandable-section/expandable-section.component.html
@@ -0,0 +1,7 @@
+<mat-expansion-panel style="background: inherit">
+  <mat-expansion-panel-header>
+    {{title}}
+  </mat-expansion-panel-header>
+
+  <ng-content></ng-content>
+</mat-expansion-panel>
diff --git a/aio/src/app/custom-elements/expandable-section/expandable-section.component.ts b/aio/src/app/custom-elements/expandable-section/expandable-section.component.ts
new file mode 100644
index 000000000000..22dfa4b47f7c
--- /dev/null
+++ b/aio/src/app/custom-elements/expandable-section/expandable-section.component.ts
@@ -0,0 +1,11 @@
+/* tslint:disable component-selector */
+import {Component, Input} from '@angular/core';
+
+/** Custom element wrapper for the material expansion panel with a title input. */
+@Component({
+  selector: 'aio-expandable-section',
+  templateUrl: 'expandable-section.component.html',
+})
+export class ExpandableSectionComponent {
+  @Input() title;
+}
diff --git a/aio/src/app/custom-elements/expandable-section/expandable-section.module.ts b/aio/src/app/custom-elements/expandable-section/expandable-section.module.ts
new file mode 100644
index 000000000000..54875b5a311a
--- /dev/null
+++ b/aio/src/app/custom-elements/expandable-section/expandable-section.module.ts
@@ -0,0 +1,13 @@
+import { NgModule, Type } from '@angular/core';
+import { ExpandableSectionComponent } from './expandable-section.component';
+import { WithCustomElementComponent } from '../element-registry';
+import { MatExpansionModule } from '@angular/material';
+
+@NgModule({
+  imports: [ MatExpansionModule ],
+  declarations: [ ExpandableSectionComponent, ],
+  entryComponents: [ ExpandableSectionComponent ]
+})
+export class ExpandableSectionModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = ExpandableSectionComponent;
+}
diff --git a/aio/src/app/custom-elements/lazy-custom-element.component.spec.ts b/aio/src/app/custom-elements/lazy-custom-element.component.spec.ts
new file mode 100644
index 000000000000..5bb0eeefa533
--- /dev/null
+++ b/aio/src/app/custom-elements/lazy-custom-element.component.spec.ts
@@ -0,0 +1,67 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Logger } from 'app/shared/logger.service';
+import { MockLogger } from 'testing/logger.service';
+import { LazyCustomElementComponent } from './lazy-custom-element.component';
+import { ElementsLoader } from './elements-loader';
+
+describe('LazyCustomElementComponent', () => {
+  let mockElementsLoader: jasmine.SpyObj<ElementsLoader>;
+  let mockLogger: MockLogger;
+  let fixture: ComponentFixture<LazyCustomElementComponent>;
+
+  beforeEach(() => {
+    mockElementsLoader = jasmine.createSpyObj<ElementsLoader>('ElementsLoader', [
+      'loadContainedCustomElements',
+      'loadCustomElement',
+    ]);
+
+    const injector = TestBed.configureTestingModule({
+      declarations: [ LazyCustomElementComponent ],
+      providers: [
+        { provide: ElementsLoader, useValue: mockElementsLoader },
+        { provide: Logger, useClass: MockLogger },
+      ],
+    });
+
+    mockLogger = injector.get(Logger);
+    fixture = TestBed.createComponent(LazyCustomElementComponent);
+  });
+
+  it('should set the HTML content based on the selector', () => {
+    const elem = fixture.nativeElement;
+
+    expect(elem.innerHTML).toBe('');
+
+    fixture.componentInstance.selector = 'foo-bar';
+    fixture.detectChanges();
+
+    expect(elem.innerHTML).toBe('<foo-bar></foo-bar>');
+  });
+
+  it('should load the specified custom element', () => {
+    expect(mockElementsLoader.loadCustomElement).not.toHaveBeenCalled();
+
+    fixture.componentInstance.selector = 'foo-bar';
+    fixture.detectChanges();
+
+    expect(mockElementsLoader.loadCustomElement).toHaveBeenCalledWith('foo-bar');
+  });
+
+  it('should log an error (and abort) if the selector is empty', () => {
+    fixture.detectChanges();
+
+    expect(mockElementsLoader.loadCustomElement).not.toHaveBeenCalled();
+    expect(mockLogger.output.error).toEqual([[jasmine.any(Error)]]);
+    expect(mockLogger.output.error[0][0].message).toBe('Invalid selector for \'aio-lazy-ce\': ');
+  });
+
+  it('should log an error (and abort) if the selector is invalid', () => {
+    fixture.componentInstance.selector = 'foo-bar><script></script><foo-bar';
+    fixture.detectChanges();
+
+    expect(mockElementsLoader.loadCustomElement).not.toHaveBeenCalled();
+    expect(mockLogger.output.error).toEqual([[jasmine.any(Error)]]);
+    expect(mockLogger.output.error[0][0].message).toBe(
+        'Invalid selector for \'aio-lazy-ce\': foo-bar><script></script><foo-bar');
+  });
+});
diff --git a/aio/src/app/custom-elements/lazy-custom-element.component.ts b/aio/src/app/custom-elements/lazy-custom-element.component.ts
new file mode 100644
index 000000000000..1b1f4d4e2322
--- /dev/null
+++ b/aio/src/app/custom-elements/lazy-custom-element.component.ts
@@ -0,0 +1,27 @@
+import { Component, ElementRef, Input, OnInit } from '@angular/core';
+import { Logger } from 'app/shared/logger.service';
+import { ElementsLoader } from './elements-loader';
+
+@Component({
+  selector: 'aio-lazy-ce',
+  template: '',
+})
+export class LazyCustomElementComponent implements OnInit {
+  @Input() selector = '';
+
+  constructor(
+    private elementRef: ElementRef,
+    private elementsLoader: ElementsLoader,
+    private logger: Logger,
+  ) {}
+
+  ngOnInit() {
+    if (!this.selector || /[^\w-]/.test(this.selector)) {
+      this.logger.error(new Error(`Invalid selector for 'aio-lazy-ce': ${this.selector}`));
+      return;
+    }
+
+    this.elementRef.nativeElement.innerHTML = `<${this.selector}></${this.selector}>`;
+    this.elementsLoader.loadCustomElement(this.selector);
+  }
+}
diff --git a/aio/src/app/custom-elements/live-example/live-example.component.html b/aio/src/app/custom-elements/live-example/live-example.component.html
new file mode 100644
index 000000000000..6c21e3b6fde4
--- /dev/null
+++ b/aio/src/app/custom-elements/live-example/live-example.component.html
@@ -0,0 +1,22 @@
+<!-- Content projection is used to get the content HTML provided to the component. -->
+<span #content style="display: none"><ng-content></ng-content></span>
+
+<span [ngSwitch]="mode">
+  <span *ngSwitchCase="'embedded'">
+    <div title="{{title}}">
+      <aio-embedded-stackblitz [src]="stackblitz"></aio-embedded-stackblitz>
+    </div>
+    <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]="stackblitz" target="_blank" title="{{title}}">{{title}}</a>
+    <span *ngIf="enableDownload">
+      / <a [href]="zip" download title="Download example">download example</a>
+    </span>
+  </span>
+</span>
diff --git a/aio/src/app/custom-elements/live-example/live-example.component.spec.ts b/aio/src/app/custom-elements/live-example/live-example.component.spec.ts
new file mode 100644
index 000000000000..8974c4a5d35d
--- /dev/null
+++ b/aio/src/app/custom-elements/live-example/live-example.component.spec.ts
@@ -0,0 +1,230 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Component, DebugElement } from '@angular/core';
+import { Location } from '@angular/common';
+
+import { LiveExampleComponent, EmbeddedStackblitzComponent } from './live-example.component';
+
+const defaultTestPath = '/test';
+
+describe('LiveExampleComponent', () => {
+  let liveExampleDe: DebugElement;
+  let liveExampleComponent: LiveExampleComponent;
+  let fixture: ComponentFixture<HostComponent>;
+  let testPath: string;
+
+  //////// test helpers ////////
+
+  @Component({
+    selector: 'aio-host-comp',
+    template: `<live-example></live-example>`
+  })
+  class HostComponent { }
+
+  class TestLocation {
+    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) {
+    fixture = TestBed.createComponent(HostComponent);
+    liveExampleDe = fixture.debugElement.children[0];
+    liveExampleComponent = liveExampleDe.componentInstance;
+
+    // Trigger `ngAfterContentInit()`.
+    fixture.detectChanges();
+
+    testFn();
+  }
+
+  //////// tests ////////
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HostComponent, LiveExampleComponent, EmbeddedStackblitzComponent ],
+      providers: [
+        { provide: Location, useClass: TestLocation }
+      ]
+    })
+    // Disable the <iframe> within the EmbeddedStackblitzComponent
+    .overrideComponent(EmbeddedStackblitzComponent, {set: {template: 'NO IFRAME'}});
+
+    testPath = defaultTestPath;
+  });
+
+  describe('when not embedded', () => {
+    function getLiveExampleAnchor() { return getAnchors()[0]; }
+
+    it('should create LiveExampleComponent', () => {
+      testComponent(() => {
+        expect(liveExampleComponent).toBeTruthy('LiveExampleComponent');
+      });
+    });
+
+    it('should have expected stackblitz & download hrefs', () => {
+      testPath = '/tutorial/toh-pt1';
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain('/toh-pt1/stackblitz.html');
+        expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
+      });
+    });
+
+    it('should have expected stackblitz & download hrefs even when path has # frag', () => {
+      testPath = '/tutorial/toh-pt1#somewhere';
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain('/toh-pt1/stackblitz.html');
+        expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
+      });
+    });
+
+    it('should have expected stackblitz & 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/stackblitz.html');
+        expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
+      });
+    });
+
+    it('should have expected stackblitz & download hrefs when has example directory (name)', () => {
+      testPath = '/guide/somewhere';
+      setHostTemplate('<live-example name="toh-pt1"></live-example>');
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain('/toh-pt1/stackblitz.html');
+        expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
+      });
+    });
+
+    it('should have expected stackblitz & download hrefs when has `stackblitz`', () => {
+      testPath = '/testing';
+      setHostTemplate('<live-example stackblitz="app-specs"></live-example>');
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain('/testing/app-specs.stackblitz.html');
+        expect(hrefs[1]).toContain('/testing/app-specs.testing.zip');
+      });
+    });
+
+    it('should have expected stackblitz & download hrefs when has `name` & `stackblitz`', () => {
+      testPath = '/guide/somewhere';
+      setHostTemplate('<live-example name="testing" stackblitz="app-specs"></live-example>');
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain('/testing/app-specs.stackblitz.html');
+        expect(hrefs[1]).toContain('/testing/app-specs.testing.zip');
+      });
+    });
+
+    it('should be embedded style by default', () => {
+      setHostTemplate('<live-example></live-example>');
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain(defaultTestPath + '/stackblitz.html');
+      });
+    });
+
+    it('should not have a download link when `noDownload` attr present', () => {
+      setHostTemplate('<live-example noDownload></live-example>');
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs.length).toBe(1, 'only the stackblitz live-example anchor');
+        expect(hrefs[0]).toContain('stackblitz.html');
+      });
+    });
+
+    it('should only have a download link when `downloadOnly` attr 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.textContent).toBe(expectedTitle, 'anchor content');
+        expect(anchor.getAttribute('title')).toBe(expectedTitle, 'title');
+      });
+    });
+
+    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.textContent).toBe(expectedTitle, 'anchor content');
+        expect(anchor.getAttribute('title')).toBe(expectedTitle, 'title');
+      });
+    });
+
+    it('should add title from <live-example> body', () => {
+      const expectedTitle = 'The Greatest Example';
+      setHostTemplate(`<live-example title="ignore this title">${expectedTitle}</live-example>`);
+      testComponent(() => {
+        const anchor = getLiveExampleAnchor();
+        expect(anchor.textContent).toBe(expectedTitle, 'anchor content');
+        expect(anchor.getAttribute('title')).toBe(expectedTitle, '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/stackblitz.html');
+        expect(hrefs[1]).toContain('/testing/ts/testing.zip');
+      });
+    });
+  });
+
+  describe('when embedded', () => {
+
+    function getDownloadAnchor() {
+      const anchor = liveExampleDe.query(By.css('p > a'));
+      return anchor && anchor.nativeElement as HTMLAnchorElement;
+    }
+
+    function getEmbeddedStackblitzComponent() {
+      const compDe = liveExampleDe.query(By.directive(EmbeddedStackblitzComponent));
+      return compDe && compDe.componentInstance as EmbeddedStackblitzComponent;
+    }
+
+    it('should have hidden, embedded stackblitz', () => {
+      setHostTemplate('<live-example embedded></live-example>');
+      testComponent(() => {
+        expect(liveExampleComponent.mode).toBe('embedded', 'component is embedded');
+        expect(getEmbeddedStackblitzComponent()).toBeTruthy('EmbeddedStackblitzComponent');
+      });
+    });
+
+    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`', () => {
+      testPath = '/tutorial/toh-pt1';
+      setHostTemplate('<live-example embedded nodownload></live-example>');
+      testComponent(() => {
+        expect(getDownloadAnchor()).toBeNull();
+      });
+    });
+  });
+});
diff --git a/aio/src/app/custom-elements/live-example/live-example.component.ts b/aio/src/app/custom-elements/live-example/live-example.component.ts
new file mode 100644
index 000000000000..bc52ef32d35b
--- /dev/null
+++ b/aio/src/app/custom-elements/live-example/live-example.component.ts
@@ -0,0 +1,157 @@
+/* tslint:disable component-selector */
+import { AfterContentInit, AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { Location } from '@angular/common';
+import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
+import { AttrMap, boolFromValue, getAttrs, getAttrValue } from 'app/shared/attribute-utils';
+
+
+const LIVE_EXAMPLE_BASE = CONTENT_URL_PREFIX + 'live-examples/';
+const ZIP_BASE = CONTENT_URL_PREFIX + 'zips/';
+
+/**
+ * Angular.io Live Example Embedded Component
+ *
+ * Renders a link to a live/host example of the doc page.
+ *
+ * All attributes and the text content are optional
+ *
+ * Usage:
+ *   <live-example
+ *      [name="..."]        // name of the example directory
+ *      [stackblitz="...""] // name of the stackblitz file (becomes part of zip file name as well)
+ *      [embedded]          // embed the stackblitz in the doc page, else display in new browser tab (default)
+ *      [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>
+ * Example:
+ *   <p>Run <live-example>Try the live example</live-example></p>.
+ *   // ~/resources/live-examples/{page}/stackblitz.json
+ *
+ *   <p>Run <live-example name="toh-pt1">this example</live-example></p>.
+ *   // ~/resources/live-examples/toh-pt1/stackblitz.json
+ *
+ *   // Link to the default stackblitz in the toh-pt1 sample
+ *   // The title overrides default ("live example") with "Tour of Heroes - Part 1"
+ *   <p>Run <live-example name="toh-pt1" title="Tour of Heroes - Part 1"></live-example></p>.
+ *   // ~/resources/live-examples/toh-pt1/stackblitz.json
+ *
+ *   <p>Run <live-example stackblitz="minimal"></live-example></p>.
+ *   // ~/resources/live-examples/{page}/minimal.stackblitz.json
+ *
+ *   // Embed the current page's default stackblitz
+ *   // Text within tag is "live example"
+ *   // No title (no tooltip)
+ *   <live-example embedded title=""></live-example>
+ *   // ~/resources/live-examples/{page}/stackblitz.json
+ *
+ *   // Displays within the document page as an embedded style stackblitz editor
+ *   <live-example name="toh-pt1" embedded stackblitz="minimal">Tour of Heroes - Part 1</live-example>
+ *   // ~/resources/live-examples/toh-pt1/minimal.stackblitz.json
+ */
+@Component({
+  selector: 'live-example',
+  templateUrl: 'live-example.component.html'
+})
+export class LiveExampleComponent implements AfterContentInit {
+
+  readonly mode: 'default' | 'embedded' | 'downloadOnly';
+  readonly enableDownload: boolean;
+  readonly stackblitz: string;
+  readonly zip: string;
+  title: string;
+
+  @ViewChild('content')
+  private content: ElementRef;
+
+  constructor(elementRef: ElementRef, location: Location) {
+    const attrs = getAttrs(elementRef);
+    const exampleDir = this.getExampleDir(attrs, location.path(false));
+    const stackblitzName = this.getStackblitzName(attrs);
+
+    this.mode = this.getMode(attrs);
+    this.enableDownload = this.getEnableDownload(attrs);
+    this.stackblitz = this.getStackblitz(exampleDir, stackblitzName, this.mode === 'embedded');
+    this.zip = this.getZip(exampleDir, stackblitzName);
+    this.title = this.getTitle(attrs);
+  }
+
+  ngAfterContentInit() {
+    // Angular will sanitize this title when displayed, so it should be plain text.
+    const textContent = this.content.nativeElement.textContent.trim();
+    if (textContent) {
+      this.title = textContent;
+    }
+  }
+
+  private getEnableDownload(attrs: AttrMap) {
+    const downloadDisabled = boolFromValue(getAttrValue(attrs, 'noDownload'));
+    return !downloadDisabled;
+  }
+
+  private getExampleDir(attrs: AttrMap, path: string) {
+    let exampleDir = getAttrValue(attrs, 'name');
+    if (!exampleDir) {
+      // Take the last path segment, excluding query params and hash fragment.
+      const match = path.match(/[^/?#]+(?=\/?(?:\?|#|$))/);
+      exampleDir = match ? match[0] : 'index';
+    }
+    return exampleDir.trim();
+  }
+
+  private getMode(this: LiveExampleComponent, attrs: AttrMap): typeof this.mode {
+    const downloadOnly = boolFromValue(getAttrValue(attrs, 'downloadOnly'));
+    const isEmbedded = boolFromValue(getAttrValue(attrs, 'embedded'));
+
+    return downloadOnly ? 'downloadOnly'
+           : isEmbedded ? 'embedded' :
+                          'default';
+  }
+
+  private getStackblitz(exampleDir: string, stackblitzName: string, isEmbedded: boolean) {
+    const urlQuery = isEmbedded ? '?ctl=1' : '';
+    return `${LIVE_EXAMPLE_BASE}${exampleDir}/${stackblitzName}stackblitz.html${urlQuery}`;
+  }
+
+  private getStackblitzName(attrs: AttrMap) {
+    const attrValue = (getAttrValue(attrs, 'stackblitz') || '').trim();
+    return attrValue && `${attrValue}.`;
+  }
+
+  private getTitle(attrs: AttrMap) {
+    return (getAttrValue(attrs, 'title') || 'live example').trim();
+  }
+
+  private getZip(exampleDir: string, stackblitzName: string) {
+    const zipName = exampleDir.split('/')[0];
+    return `${ZIP_BASE}${exampleDir}/${stackblitzName}${zipName}.zip`;
+  }
+}
+
+///// EmbeddedStackblitzComponent ///
+/**
+ * Hides the <iframe> so we can test LiveExampleComponent without actually triggering
+ * a call to stackblitz to load the iframe
+ */
+@Component({
+  selector: 'aio-embedded-stackblitz',
+  template: `<iframe #iframe frameborder="0" width="100%" height="100%"></iframe>`,
+  styles: [ 'iframe { min-height: 400px; }' ]
+})
+export class EmbeddedStackblitzComponent implements AfterViewInit {
+  @Input() src: string;
+
+  @ViewChild('iframe') iframe: ElementRef;
+
+  ngAfterViewInit() {
+    // DEVELOPMENT TESTING ONLY
+    // this.src = 'https://angular.io/resources/live-examples/quickstart/ts/stackblitz.json';
+
+    if (this.iframe) {
+      // security: the `src` is always authored by the documentation team
+      // and is considered to be safe
+      this.iframe.nativeElement.src = this.src;
+    }
+  }
+}
diff --git a/aio/src/app/custom-elements/live-example/live-example.module.ts b/aio/src/app/custom-elements/live-example/live-example.module.ts
new file mode 100644
index 000000000000..f8e536427ba0
--- /dev/null
+++ b/aio/src/app/custom-elements/live-example/live-example.module.ts
@@ -0,0 +1,13 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EmbeddedStackblitzComponent, LiveExampleComponent } from './live-example.component';
+import { WithCustomElementComponent } from '../element-registry';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ LiveExampleComponent, EmbeddedStackblitzComponent ],
+  entryComponents: [ LiveExampleComponent ]
+})
+export class LiveExampleModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = LiveExampleComponent;
+}
diff --git a/aio/src/app/custom-elements/resource/resource-list.component.html b/aio/src/app/custom-elements/resource/resource-list.component.html
new file mode 100644
index 000000000000..e5b861caebf4
--- /dev/null
+++ b/aio/src/app/custom-elements/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/custom-elements/resource/resource-list.component.spec.ts b/aio/src/app/custom-elements/resource/resource-list.component.spec.ts
new file mode 100644
index 000000000000..c42ae7d01a3a
--- /dev/null
+++ b/aio/src/app/custom-elements/resource/resource-list.component.spec.ts
@@ -0,0 +1,78 @@
+import { ReflectiveInjector } from '@angular/core';
+import { PlatformLocation } from '@angular/common';
+
+import { of } from 'rxjs';
+
+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;
+
+  beforeEach(() => {
+    injector = ReflectiveInjector.resolveAndCreate([
+      ResourceListComponent,
+      {provide: PlatformLocation, useClass: TestPlatformLocation },
+      {provide: ResourceService, useClass: TestResourceService }
+    ]);
+
+    location = injector.get(PlatformLocation);
+  });
+
+  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/custom-elements/resource/resource-list.component.ts b/aio/src/app/custom-elements/resource/resource-list.component.ts
new file mode 100644
index 000000000000..2b424db53823
--- /dev/null
+++ b/aio/src/app/custom-elements/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/custom-elements/resource/resource-list.module.ts b/aio/src/app/custom-elements/resource/resource-list.module.ts
new file mode 100644
index 000000000000..1f08688cf207
--- /dev/null
+++ b/aio/src/app/custom-elements/resource/resource-list.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ResourceListComponent } from './resource-list.component';
+import { ResourceService } from './resource.service';
+import { WithCustomElementComponent } from '../element-registry';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ ResourceListComponent ],
+  entryComponents: [ ResourceListComponent ],
+  providers: [ ResourceService ]
+})
+export class ResourceListModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = ResourceListComponent;
+}
diff --git a/aio/src/app/custom-elements/resource/resource.model.ts b/aio/src/app/custom-elements/resource/resource.model.ts
new file mode 100644
index 000000000000..87c299a01eec
--- /dev/null
+++ b/aio/src/app/custom-elements/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/custom-elements/resource/resource.service.spec.ts b/aio/src/app/custom-elements/resource/resource.service.spec.ts
new file mode 100644
index 000000000000..317115c0b681
--- /dev/null
+++ b/aio/src/app/custom-elements/resource/resource.service.spec.ts
@@ -0,0 +1,153 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import { ResourceService } from './resource.service';
+import { Category } from './resource.model';
+
+describe('ResourceService', () => {
+
+  let injector: Injector;
+  let resourceService: ResourceService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    injector = TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        ResourceService
+      ]
+    });
+
+    resourceService = injector.get(ResourceService);
+    httpMock = injector.get(HttpTestingController);
+  });
+
+  afterEach(() => httpMock.verify());
+
+  it('should make a single connection to the server', () => {
+    const req = httpMock.expectOne({});
+    expect(req.request.url).toBe('generated/resources.json');
+  });
+
+  describe('#categories', () => {
+
+    let categories: Category[];
+    let testData: any;
+
+    beforeEach(() => {
+      testData = getTestResources();
+      httpMock.expectOne({}).flush(testData);
+      resourceService.categories.subscribe(results => categories = results);
+    });
+
+    it('categories observable should complete', () => {
+      let completed = false;
+      resourceService.categories.subscribe(undefined, undefined, () => 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/custom-elements/resource/resource.service.ts b/aio/src/app/custom-elements/resource/resource.service.ts
new file mode 100644
index 000000000000..9fc921e09220
--- /dev/null
+++ b/aio/src/app/custom-elements/resource/resource.service.ts
@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { ConnectableObservable, Observable } from 'rxjs';
+import { map, publishLast } from 'rxjs/operators';
+
+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: HttpClient) {
+    this.categories = this.getCategories();
+  }
+
+  private getCategories(): Observable<Category[]> {
+
+    const categories = this.http.get<any>(resourcesPath).pipe(
+      map(data => mkCategories(data)),
+      publishLast(),
+    );
+
+    (categories as ConnectableObservable<Category[]>).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/custom-elements/search/file-not-found-search.component.spec.ts b/aio/src/app/custom-elements/search/file-not-found-search.component.spec.ts
new file mode 100644
index 000000000000..3cf746e7a95a
--- /dev/null
+++ b/aio/src/app/custom-elements/search/file-not-found-search.component.spec.ts
@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Subject } from 'rxjs';
+import { LocationService } from 'app/shared/location.service';
+import { MockLocationService } from 'testing/location.service';
+import { SearchResults } from 'app/search/interfaces';
+import { SearchResultsComponent } from 'app/shared/search-results/search-results.component';
+import { SearchService } from 'app/search/search.service';
+import { FileNotFoundSearchComponent } from './file-not-found-search.component';
+
+
+describe('FileNotFoundSearchComponent', () => {
+  let fixture: ComponentFixture<FileNotFoundSearchComponent>;
+  let searchService: SearchService;
+  let searchResultSubject: Subject<SearchResults>;
+
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [ FileNotFoundSearchComponent, SearchResultsComponent ],
+      providers: [
+        { provide: LocationService, useValue: new MockLocationService('base/initial-url?some-query') },
+        SearchService
+      ]
+    });
+
+    fixture = TestBed.createComponent(FileNotFoundSearchComponent);
+    searchService = TestBed.get(SearchService);
+    searchResultSubject = new Subject<SearchResults>();
+    spyOn(searchService, 'search').and.callFake(() => searchResultSubject.asObservable());
+    fixture.detectChanges();
+  });
+
+  it('should run a search with a query built from the current url', () => {
+    expect(searchService.search).toHaveBeenCalledWith('base initial url');
+  });
+
+  it('should pass through any results to the `aio-search-results` component', () => {
+    const searchResultsComponent = fixture.debugElement.query(By.directive(SearchResultsComponent)).componentInstance;
+    expect(searchResultsComponent.searchResults).toBe(null);
+
+    const results = { query: 'base initial url', results: []};
+    searchResultSubject.next(results);
+    fixture.detectChanges();
+    expect(searchResultsComponent.searchResults).toEqual(results);
+  });
+});
diff --git a/aio/src/app/custom-elements/search/file-not-found-search.component.ts b/aio/src/app/custom-elements/search/file-not-found-search.component.ts
new file mode 100644
index 000000000000..e8af858b498b
--- /dev/null
+++ b/aio/src/app/custom-elements/search/file-not-found-search.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { LocationService } from 'app/shared/location.service';
+import { SearchResults } from 'app/search/interfaces';
+import { SearchService } from 'app/search/search.service';
+
+@Component({
+  selector: 'aio-file-not-found-search',
+  template:
+  `<p>Let's see if any of these search results help...</p>
+  <aio-search-results class="embedded" [searchResults]="searchResults | async"></aio-search-results>`
+})
+export class FileNotFoundSearchComponent implements OnInit {
+  searchResults: Observable<SearchResults>;
+  constructor(private location: LocationService, private search: SearchService) {}
+
+  ngOnInit() {
+    this.searchResults = this.location.currentPath.pipe(switchMap(path => {
+      const query = path.split(/\W+/).join(' ');
+      return this.search.search(query);
+    }));
+  }
+}
diff --git a/aio/src/app/custom-elements/search/file-not-found-search.module.ts b/aio/src/app/custom-elements/search/file-not-found-search.module.ts
new file mode 100644
index 000000000000..31756e2a176c
--- /dev/null
+++ b/aio/src/app/custom-elements/search/file-not-found-search.module.ts
@@ -0,0 +1,14 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../shared/shared.module';
+import { FileNotFoundSearchComponent } from './file-not-found-search.component';
+import { WithCustomElementComponent } from '../element-registry';
+
+@NgModule({
+  imports: [ CommonModule, SharedModule ],
+  declarations: [ FileNotFoundSearchComponent ],
+  entryComponents: [ FileNotFoundSearchComponent ]
+})
+export class FileNotFoundSearchModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = FileNotFoundSearchComponent;
+}
diff --git a/aio/src/app/custom-elements/toc/toc.component.html b/aio/src/app/custom-elements/toc/toc.component.html
new file mode 100644
index 000000000000..4aa7b989d62a
--- /dev/null
+++ b/aio/src/app/custom-elements/toc/toc.component.html
@@ -0,0 +1,31 @@
+<div *ngIf="type !== 'None'" class="toc-inner no-print" [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
+    <mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></mat-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/custom-elements/toc/toc.component.spec.ts b/aio/src/app/custom-elements/toc/toc.component.spec.ts
new file mode 100644
index 000000000000..c7f228724f35
--- /dev/null
+++ b/aio/src/app/custom-elements/toc/toc.component.spec.ts
@@ -0,0 +1,489 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { asapScheduler as asap, BehaviorSubject } from 'rxjs';
+
+import { ScrollService } from 'app/shared/scroll.service';
+import { TocItem, TocService } from 'app/shared/toc.service';
+import { TocComponent } from './toc.component';
+
+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.queryAll(By.css('li')).length).toBe(1);
+
+      tocService.tocList.next([tocItem('Heading A'), tocItem('Heading B'), tocItem('Heading C')]);
+      fixture.detectChanges();
+      expect(tocComponentDe.queryAll(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.queryAll(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.queryAll(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.queryAll(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>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(HostNotEmbeddedTocComponent);
+
+      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 hostElem = fixture.nativeElement;
+          const firstItem = page.listItems[0].nativeElement;
+
+          Object.assign(hostElem.style, {
+            display: 'block',
+            maxHeight: `${hostElem.clientHeight - firstItem.clientHeight}px`,
+            overflow: 'auto',
+            position: 'relative',
+          });
+          Object.defineProperty(hostElem, '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: number|null) {
+    this.activeItemIndex.next(index);
+    if (asap.scheduled !== undefined) {
+      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/custom-elements/toc/toc.component.ts b/aio/src/app/custom-elements/toc/toc.component.ts
new file mode 100644
index 000000000000..b79736af0786
--- /dev/null
+++ b/aio/src/app/custom-elements/toc/toc.component.ts
@@ -0,0 +1,94 @@
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { asapScheduler as asap, combineLatest, Subject } from 'rxjs';
+import { startWith, subscribeOn, takeUntil } from 'rxjs/operators';
+
+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
+        .pipe(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.
+      combineLatest(this.tocService.activeItemIndex.pipe(subscribeOn(asap)), this.items.changes.pipe(startWith(this.items)))
+          .pipe(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: (item: T) => boolean) {
+  return array.reduce((result, item) => fn(item) ? result + 1 : result, 0);
+}
diff --git a/aio/src/app/custom-elements/toc/toc.module.ts b/aio/src/app/custom-elements/toc/toc.module.ts
new file mode 100644
index 000000000000..848176261e9f
--- /dev/null
+++ b/aio/src/app/custom-elements/toc/toc.module.ts
@@ -0,0 +1,14 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { WithCustomElementComponent } from '../element-registry';
+import { TocComponent } from './toc.component';
+
+@NgModule({
+  imports: [ CommonModule, MatIconModule ],
+  declarations: [ TocComponent ],
+  entryComponents: [ TocComponent ],
+})
+export class TocModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = TocComponent;
+}
diff --git a/aio/src/app/documents/document-contents.ts b/aio/src/app/documents/document-contents.ts
new file mode 100644
index 000000000000..ca0e398db425
--- /dev/null
+++ b/aio/src/app/documents/document-contents.ts
@@ -0,0 +1,6 @@
+export interface DocumentContents {
+  /** The unique identifier for this document */
+  id: string;
+  /** The HTML to display in the doc viewer */
+  contents: string|null;
+}
diff --git a/aio/src/app/documents/document.service.spec.ts b/aio/src/app/documents/document.service.spec.ts
new file mode 100644
index 000000000000..ab2f56d28c05
--- /dev/null
+++ b/aio/src/app/documents/document.service.spec.ts
@@ -0,0 +1,198 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+
+import { Subscription } from 'rxjs';
+
+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,
+         FETCHING_ERROR_ID, FILE_NOT_FOUND_ID } from './document.service';
+
+
+const CONTENT_URL_PREFIX = 'generated/docs/';
+
+describe('DocumentService', () => {
+
+  let httpMock: HttpTestingController;
+
+  function createInjector(initialUrl: string) {
+    return TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        DocumentService,
+        { provide: LocationService, useFactory: () => new MockLocationService(initialUrl) },
+        { provide: Logger, useClass: MockLogger },
+      ]
+    });
+  }
+
+  function getServices(initialUrl: string = '') {
+    const injector = createInjector(initialUrl);
+    httpMock = injector.get(HttpTestingController) as HttpTestingController;
+    return {
+      locationService: injector.get(LocationService) as MockLocationService,
+      docService: injector.get(DocumentService) as DocumentService,
+      logger: injector.get(Logger) as MockLogger
+    };
+  }
+
+  afterEach(() => httpMock.verify());
+
+  describe('currentDocument', () => {
+
+    it('should fetch a document for the initial location', () => {
+      const { docService } = getServices('initial/doc');
+      docService.currentDocument.subscribe();
+
+      httpMock.expectOne(CONTENT_URL_PREFIX + 'initial/doc.json');
+    });
+
+    it('should emit a document each time the location changes', () => {
+      let latestDocument: DocumentContents|undefined;
+      const doc0 = { contents: 'doc 0', id: 'initial/doc' };
+      const doc1 = { contents: 'doc 1', id: 'new/doc' };
+      const { docService, locationService } = getServices('initial/doc');
+
+      docService.currentDocument.subscribe(doc => latestDocument = doc);
+      expect(latestDocument).toBeUndefined();
+
+      httpMock.expectOne({}).flush(doc0);
+      expect(latestDocument).toEqual(doc0);
+
+      locationService.go('new/doc');
+      httpMock.expectOne({}).flush(doc1);
+      expect(latestDocument).toEqual(doc1);
+    });
+
+    it('should emit the not-found document if the document is not found on the server', () => {
+      let currentDocument: DocumentContents|undefined;
+      const notFoundDoc = { id: FILE_NOT_FOUND_ID, contents: '<h1>Page Not Found</h1>' };
+      const { docService, logger } = getServices('missing/doc');
+      docService.currentDocument.subscribe(doc => currentDocument = doc);
+
+      // Initial request return 404.
+      httpMock.expectOne({}).flush(null, {status: 404, statusText: 'NOT FOUND'});
+      expect(logger.output.error).toEqual([
+        [jasmine.any(Error)]
+      ]);
+      expect(logger.output.error[0][0].message).toEqual(`Document file not found at 'missing/doc'`);
+
+      // Subsequent request for not-found document.
+      logger.output.error = [];
+      httpMock.expectOne(CONTENT_URL_PREFIX + 'file-not-found.json').flush(notFoundDoc);
+      expect(logger.output.error).toEqual([]); // does not report repeate errors
+      expect(currentDocument).toEqual(notFoundDoc);
+    });
+
+    it('should emit a hard-coded not-found document if the not-found document is not found on the server', () => {
+      let currentDocument: DocumentContents|undefined;
+      const hardCodedNotFoundDoc = { contents: 'Document not found', id: FILE_NOT_FOUND_ID };
+      const nextDoc = { contents: 'Next Doc', id: 'new/doc' };
+      const { docService, locationService } = getServices(FILE_NOT_FOUND_ID);
+
+      docService.currentDocument.subscribe(doc => currentDocument = doc);
+
+      httpMock.expectOne({}).flush(null, { status: 404, statusText: 'NOT FOUND'});
+      expect(currentDocument).toEqual(hardCodedNotFoundDoc);
+
+      // now check that we haven't killed the currentDocument observable sequence
+      locationService.go('new/doc');
+      httpMock.expectOne({}).flush(nextDoc);
+      expect(currentDocument).toEqual(nextDoc);
+    });
+
+    it('should use a hard-coded error doc if the request fails (but not cache it)', () => {
+      let latestDocument!: DocumentContents;
+      const doc1 = { contents: 'doc 1' } as DocumentContents;
+      const doc2 = { contents: 'doc 2' } as DocumentContents;
+      const { docService, locationService, logger } = getServices('initial/doc');
+
+      docService.currentDocument.subscribe(doc => latestDocument = doc);
+
+      httpMock.expectOne({}).flush(null, {status: 500, statusText: 'Server Error'});
+      expect(latestDocument.id).toEqual(FETCHING_ERROR_ID);
+      expect(logger.output.error).toEqual([
+        [jasmine.any(Error)]
+      ]);
+      expect(logger.output.error[0][0].message)
+          .toEqual(`Error fetching document 'initial/doc': (Http failure response for generated/docs/initial/doc.json: 500 Server Error)`);
+
+      locationService.go('new/doc');
+      httpMock.expectOne({}).flush(doc1);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
+
+      locationService.go('initial/doc');
+      httpMock.expectOne({}).flush(doc2);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc2));
+    });
+
+    it('should not crash the app if the response is invalid JSON', () => {
+      let latestDocument!: DocumentContents;
+      const doc1 = { contents: 'doc 1' } as DocumentContents;
+      const { docService, locationService } = getServices('initial/doc');
+
+      docService.currentDocument.subscribe(doc => latestDocument = doc);
+
+      httpMock.expectOne({}).flush('this is invalid JSON');
+      expect(latestDocument.id).toEqual(FETCHING_ERROR_ID);
+
+      locationService.go('new/doc');
+      httpMock.expectOne({}).flush(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 = { contents: 'doc 0' } as DocumentContents;
+      const doc1 = { contents: 'doc 1' } as DocumentContents;
+      const { docService, locationService } = getServices('url/0');
+
+      subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
+      httpMock.expectOne({}).flush(doc0);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc0));
+      subscription.unsubscribe();
+
+      subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
+      locationService.go('url/1');
+      httpMock.expectOne({}).flush(doc1);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
+      subscription.unsubscribe();
+
+      // This should not trigger a new request.
+      subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
+      locationService.go('url/0');
+      httpMock.expectNone({});
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc0));
+      subscription.unsubscribe();
+
+      // This should not trigger a new request.
+      subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
+      locationService.go('url/1');
+      httpMock.expectNone({});
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
+      subscription.unsubscribe();
+    });
+  });
+
+  describe('computeMap', () => {
+    it('should map the "empty" location to the correct document request', () => {
+      let latestDocument: DocumentContents;
+      const { docService } = getServices();
+
+      docService.currentDocument.subscribe(doc => latestDocument = doc);
+
+      httpMock.expectOne(CONTENT_URL_PREFIX + 'index.json');
+    });
+
+    it('should map the "folder" locations to the correct document request', () => {
+      const { docService } = getServices('guide');
+      docService.currentDocument.subscribe();
+
+      httpMock.expectOne(CONTENT_URL_PREFIX + 'guide.json');
+    });
+  });
+});
diff --git a/aio/src/app/documents/document.service.ts b/aio/src/app/documents/document.service.ts
new file mode 100644
index 000000000000..432e1c4ab2da
--- /dev/null
+++ b/aio/src/app/documents/document.service.ts
@@ -0,0 +1,99 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+import { AsyncSubject, Observable, of } from 'rxjs';
+import { catchError, switchMap, tap } from 'rxjs/operators';
+
+import { DocumentContents } from './document-contents';
+export { DocumentContents } from './document-contents';
+
+import { LocationService } from 'app/shared/location.service';
+import { Logger } from 'app/shared/logger.service';
+
+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>>();
+
+  currentDocument: Observable<DocumentContents>;
+
+  constructor(
+    private logger: Logger,
+    private http: HttpClient,
+    location: LocationService) {
+    // Whenever the URL changes we try to get the appropriate doc
+    this.currentDocument = location.currentPath.pipe(switchMap(path => this.getDocument(path)));
+  }
+
+  private getDocument(url: string) {
+    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(id)!;
+  }
+
+  private fetchDocument(id: string): Observable<DocumentContents> {
+    const requestPath = `${DOC_CONTENT_URL_PREFIX}${id}.json`;
+    const subject = new AsyncSubject<DocumentContents>();
+
+    this.logger.log('fetching document from', requestPath);
+    this.http
+      .get<DocumentContents>(requestPath, {responseType: 'json'})
+      .pipe(
+        tap(data => {
+          if (!data || typeof data !== 'object') {
+            this.logger.log('received invalid data:', data);
+            throw Error('Invalid data');
+          }
+        }),
+        catchError((error: HttpErrorResponse) => {
+          return error.status === 404 ? this.getFileNotFoundDoc(id) : this.getErrorDoc(id, error);
+        }),
+      )
+      .subscribe(subject);
+
+    return subject.asObservable();
+  }
+
+  private getFileNotFoundDoc(id: string): Observable<DocumentContents> {
+    if (id !== FILE_NOT_FOUND_ID) {
+      this.logger.error(new 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'
+      });
+    }
+  }
+
+  private getErrorDoc(id: string, error: HttpErrorResponse): Observable<DocumentContents> {
+    this.logger.error(new Error(`Error fetching document '${id}': (${error.message})`));
+    this.cache.delete(id);
+    return of({
+      id: FETCHING_ERROR_ID,
+      contents: FETCHING_ERROR_CONTENTS
+    });
+  }
+}
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
new file mode 100644
index 000000000000..0f94629bf3c9
--- /dev/null
+++ b/aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts
@@ -0,0 +1,733 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Meta, Title } from '@angular/platform-browser';
+
+import { Observable, of } from 'rxjs';
+
+import { FILE_NOT_FOUND_ID, FETCHING_ERROR_ID } from 'app/documents/document.service';
+import { Logger } from 'app/shared/logger.service';
+import { CustomElementsModule } from 'app/custom-elements/custom-elements.module';
+import { TocService } from 'app/shared/toc.service';
+import { ElementsLoader } from 'app/custom-elements/elements-loader';
+import {
+MockTitle, MockTocService, ObservableWithSubscriptionSpies,
+TestDocViewerComponent, TestModule, TestParentComponent, MockElementsLoader
+} from 'testing/doc-viewer-utils';
+import { MockLogger } from 'testing/logger.service';
+import { DocViewerComponent, NO_ANIMATIONS } from './doc-viewer.component';
+
+describe('DocViewerComponent', () => {
+  let parentFixture: ComponentFixture<TestParentComponent>;
+  let parentComponent: TestParentComponent;
+  let docViewerEl: HTMLElement;
+  let docViewer: TestDocViewerComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [CustomElementsModule, TestModule],
+    });
+
+    parentFixture = TestBed.createComponent(TestParentComponent);
+    parentComponent = parentFixture.componentInstance;
+
+    parentFixture.detectChanges();
+
+    docViewerEl = parentFixture.debugElement.children[0].nativeElement;
+    docViewer = parentComponent.docViewer as any;
+  });
+
+  it('should create a `DocViewer`', () => {
+    expect(docViewer).toEqual(jasmine.any(DocViewerComponent));
+  });
+
+  describe('#doc', () => {
+    let renderSpy: jasmine.Spy;
+
+    const setCurrentDoc = (contents: string|null, id = 'fizz/buzz') => {
+      parentComponent.currentDoc = {contents, id};
+      parentFixture.detectChanges();
+    };
+
+    beforeEach(() => renderSpy = spyOn(docViewer, 'render').and.returnValue([null]));
+
+    it('should render the new document', () => {
+      setCurrentDoc('foo', 'bar');
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+      expect(renderSpy.calls.mostRecent().args).toEqual([{id: 'bar', contents: 'foo'}]);
+
+      setCurrentDoc(null, 'baz');
+      expect(renderSpy).toHaveBeenCalledTimes(2);
+      expect(renderSpy.calls.mostRecent().args).toEqual([{id: 'baz', contents: null}]);
+    });
+
+    it('should unsubscribe from the previous "render" observable upon new document', () => {
+      const obs = new ObservableWithSubscriptionSpies();
+      renderSpy.and.returnValue(obs);
+
+      setCurrentDoc('foo', 'bar');
+      expect(obs.subscribeSpy).toHaveBeenCalledTimes(1);
+      expect(obs.unsubscribeSpies[0]).not.toHaveBeenCalled();
+
+      setCurrentDoc('baz', 'qux');
+      expect(obs.subscribeSpy).toHaveBeenCalledTimes(2);
+      expect(obs.unsubscribeSpies[0]).toHaveBeenCalledTimes(1);
+    });
+
+    it('should ignore falsy document values', () => {
+      parentComponent.currentDoc = null;
+      parentFixture.detectChanges();
+
+      expect(renderSpy).not.toHaveBeenCalled();
+
+      parentComponent.currentDoc = undefined;
+      parentFixture.detectChanges();
+
+      expect(renderSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('#ngOnDestroy()', () => {
+    it('should stop responding to document changes', () => {
+      const renderSpy = spyOn(docViewer, 'render').and.returnValue([undefined]);
+
+      expect(renderSpy).not.toHaveBeenCalled();
+
+      docViewer.doc = {contents: 'Some content', id: 'some-id'};
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+
+      docViewer.ngOnDestroy();
+
+      docViewer.doc = {contents: 'Other content', id: 'other-id'};
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+
+      docViewer.doc = {contents: 'More content', id: 'more-id'};
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('#prepareTitleAndToc()', () => {
+    const EMPTY_DOC = '';
+    const DOC_WITHOUT_H1 = 'Some content';
+    const DOC_WITH_H1 = '<h1>Features</h1>Some content';
+    const DOC_WITH_NO_TOC_H1 = '<h1 class="no-toc">Features</h1>Some content';
+    const DOC_WITH_EMBEDDED_TOC = '<h1>Features</h1><aio-toc class="embedded"></aio-toc>Some content';
+    const DOC_WITH_EMBEDDED_TOC_WITHOUT_H1 = '<aio-toc class="embedded"></aio-toc>Some content';
+    const DOC_WITH_EMBEDDED_TOC_WITH_NO_TOC_H1 = '<aio-toc class="embedded"></aio-toc>Some content';
+    const DOC_WITH_HIDDEN_H1_CONTENT = '<h1><i style="visibility: hidden">link</i>Features</h1>Some content';
+    let titleService: MockTitle;
+    let tocService: MockTocService;
+    let targetEl: HTMLElement;
+
+    const getTocEl = () => targetEl.querySelector('aio-toc');
+    const doPrepareTitleAndToc = (contents: string, docId = '') => {
+      targetEl.innerHTML = contents;
+      return docViewer.prepareTitleAndToc(targetEl, docId);
+    };
+    const doAddTitleAndToc = (contents: string, docId = '') => {
+      const addTitleAndToc = doPrepareTitleAndToc(contents, docId);
+      return addTitleAndToc();
+    };
+
+    beforeEach(() => {
+      titleService = TestBed.get(Title);
+      tocService = TestBed.get(TocService);
+
+      targetEl = document.createElement('div');
+      document.body.appendChild(targetEl);  // Required for `innerText` to work as expected.
+    });
+
+    afterEach(() => document.body.removeChild(targetEl));
+
+    it('should return a function for doing the actual work', () => {
+      const addTitleAndToc = doPrepareTitleAndToc(DOC_WITH_H1);
+
+      expect(getTocEl()).toBeTruthy();
+      expect(titleService.setTitle).not.toHaveBeenCalled();
+      expect(tocService.reset).not.toHaveBeenCalled();
+      expect(tocService.genToc).not.toHaveBeenCalled();
+
+      addTitleAndToc();
+
+      expect(titleService.setTitle).toHaveBeenCalledTimes(1);
+      expect(tocService.reset).toHaveBeenCalledTimes(1);
+      expect(tocService.genToc).toHaveBeenCalledTimes(1);
+    });
+
+    describe('(title)', () => {
+      it('should set the title if there is an `<h1>` heading', () => {
+        doAddTitleAndToc(DOC_WITH_H1);
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Features');
+      });
+
+      it('should set the title if there is a `.no-toc` `<h1>` heading', () => {
+        doAddTitleAndToc(DOC_WITH_NO_TOC_H1);
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Features');
+      });
+
+      it('should set the default title if there is no `<h1>` heading', () => {
+        doAddTitleAndToc(DOC_WITHOUT_H1);
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular');
+
+        doAddTitleAndToc(EMPTY_DOC);
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular');
+      });
+
+      it('should not include hidden content of the `<h1>` heading in the title', () => {
+        doAddTitleAndToc(DOC_WITH_HIDDEN_H1_CONTENT);
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Features');
+      });
+
+      it('should fall back to `textContent` if `innerText` is not available', () => {
+        const querySelector_ = targetEl.querySelector;
+        spyOn(targetEl, 'querySelector').and.callFake((selector: string) => {
+          const elem = querySelector_.call(targetEl, selector);
+          return elem && Object.defineProperties(elem, {
+            innerText: {value: undefined},
+            textContent: {value: 'Text Content'},
+          });
+        });
+
+        doAddTitleAndToc(DOC_WITH_HIDDEN_H1_CONTENT);
+
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Text Content');
+      });
+
+      it('should still use `innerText` if available but empty', () => {
+        const querySelector_ = targetEl.querySelector;
+        spyOn(targetEl, 'querySelector').and.callFake((selector: string) => {
+          const elem = querySelector_.call(targetEl, selector);
+          return elem && Object.defineProperties(elem, {
+            innerText: { value: '' },
+            textContent: { value: 'Text Content' }
+          });
+        });
+
+        doAddTitleAndToc(DOC_WITH_HIDDEN_H1_CONTENT);
+
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular');
+      });
+    });
+
+    describe('(ToC)', () => {
+      describe('needed', () => {
+        it('should add an embedded ToC element if there is an `<h1>` heading', () => {
+          doPrepareTitleAndToc(DOC_WITH_H1);
+          const tocEl = getTocEl()!;
+
+          expect(tocEl).toBeTruthy();
+          expect(tocEl.classList.contains('embedded')).toBe(true);
+        });
+
+        it('should not add a second ToC element if there a hard coded one in place', () => {
+          doPrepareTitleAndToc(DOC_WITH_EMBEDDED_TOC);
+          expect(targetEl.querySelectorAll('aio-toc').length).toEqual(1);
+        });
+      });
+
+
+      describe('not needed', () => {
+        it('should not add a ToC element if there is a `.no-toc` `<h1>` heading', () => {
+          doPrepareTitleAndToc(DOC_WITH_NO_TOC_H1);
+          expect(getTocEl()).toBeFalsy();
+        });
+
+        it('should not add a ToC element if there is no `<h1>` heading', () => {
+          doPrepareTitleAndToc(DOC_WITHOUT_H1);
+          expect(getTocEl()).toBeFalsy();
+
+          doPrepareTitleAndToc(EMPTY_DOC);
+          expect(getTocEl()).toBeFalsy();
+        });
+
+        it('should remove ToC a hard coded one', () => {
+          doPrepareTitleAndToc(DOC_WITH_EMBEDDED_TOC_WITHOUT_H1);
+          expect(getTocEl()).toBeFalsy();
+
+          doPrepareTitleAndToc(DOC_WITH_EMBEDDED_TOC_WITH_NO_TOC_H1);
+          expect(getTocEl()).toBeFalsy();
+        });
+      });
+
+
+      it('should generate ToC entries if there is an `<h1>` heading', () => {
+        doAddTitleAndToc(DOC_WITH_H1, 'foo');
+
+        expect(tocService.genToc).toHaveBeenCalledTimes(1);
+        expect(tocService.genToc).toHaveBeenCalledWith(targetEl, 'foo');
+      });
+
+      it('should not generate ToC entries if there is a `.no-toc` `<h1>` heading', () => {
+        doAddTitleAndToc(DOC_WITH_NO_TOC_H1);
+        expect(tocService.genToc).not.toHaveBeenCalled();
+      });
+
+      it('should not generate ToC entries if there is no `<h1>` heading', () => {
+        doAddTitleAndToc(DOC_WITHOUT_H1);
+        doAddTitleAndToc(EMPTY_DOC);
+
+        expect(tocService.genToc).not.toHaveBeenCalled();
+      });
+
+      it('should always reset the ToC (before generating the new one)', () => {
+        doAddTitleAndToc(DOC_WITH_H1, 'foo');
+        expect(tocService.reset).toHaveBeenCalledTimes(1);
+        expect(tocService.reset).toHaveBeenCalledBefore(tocService.genToc);
+        expect(tocService.genToc).toHaveBeenCalledWith(targetEl, 'foo');
+
+        tocService.genToc.calls.reset();
+
+        doAddTitleAndToc(DOC_WITH_NO_TOC_H1, 'bar');
+        expect(tocService.reset).toHaveBeenCalledTimes(2);
+        expect(tocService.genToc).not.toHaveBeenCalled();
+
+        doAddTitleAndToc(DOC_WITHOUT_H1, 'baz');
+        expect(tocService.reset).toHaveBeenCalledTimes(3);
+        expect(tocService.genToc).not.toHaveBeenCalled();
+
+        doAddTitleAndToc(EMPTY_DOC, 'qux');
+        expect(tocService.reset).toHaveBeenCalledTimes(4);
+        expect(tocService.genToc).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('#render()', () => {
+    let prepareTitleAndTocSpy: jasmine.Spy;
+    let swapViewsSpy: jasmine.Spy;
+    let loadElementsSpy: jasmine.Spy;
+
+    const doRender = (contents: string | null, id = 'foo') =>
+      docViewer.render({contents, id}).toPromise();
+
+    beforeEach(() => {
+      const elementsLoader = TestBed.get(ElementsLoader) as MockElementsLoader;
+      loadElementsSpy = elementsLoader.loadContainedCustomElements.and.returnValue(of(undefined));
+      prepareTitleAndTocSpy = spyOn(docViewer, 'prepareTitleAndToc');
+      swapViewsSpy = spyOn(docViewer, 'swapViews').and.returnValue(of(undefined));
+    });
+
+    it('should return an `Observable`', () => {
+      expect(docViewer.render({contents: '', id: ''})).toEqual(jasmine.any(Observable));
+    });
+
+    describe('(contents, title, ToC)', () => {
+      beforeEach(() => swapViewsSpy.and.callThrough());
+
+      it('should display the document contents', async () => {
+        const contents = '<h1>Hello,</h1> <div>world!</div>';
+        await doRender(contents);
+
+        expect(docViewerEl.innerHTML).toContain(contents);
+        expect(docViewerEl.textContent).toBe('Hello, world!');
+      });
+
+      it('should display nothing if the document has no contents', async () => {
+        await doRender('Test');
+        expect(docViewerEl.textContent).toBe('Test');
+
+        await doRender('');
+        expect(docViewerEl.textContent).toBe('');
+
+        docViewer.currViewContainer.innerHTML = 'Test';
+        expect(docViewerEl.textContent).toBe('Test');
+
+        await doRender(null);
+        expect(docViewerEl.textContent).toBe('');
+      });
+
+      it('should prepare the title and ToC (before embedding components)', async () => {
+        prepareTitleAndTocSpy.and.callFake((targetEl: HTMLElement, docId: string) => {
+          expect(targetEl.innerHTML).toBe('Some content');
+          expect(docId).toBe('foo');
+        });
+
+        await doRender('Some content', 'foo');
+
+        expect(prepareTitleAndTocSpy).toHaveBeenCalledTimes(1);
+        expect(prepareTitleAndTocSpy).toHaveBeenCalledBefore(loadElementsSpy);
+      });
+
+      it('should set the title and ToC (after the content has been set)', async () => {
+        const addTitleAndTocSpy = jasmine.createSpy('addTitleAndToc');
+        prepareTitleAndTocSpy.and.returnValue(addTitleAndTocSpy);
+
+        addTitleAndTocSpy.and.callFake(() => expect(docViewerEl.textContent).toBe('Foo content'));
+        await doRender('Foo content');
+        expect(addTitleAndTocSpy).toHaveBeenCalledTimes(1);
+
+        addTitleAndTocSpy.and.callFake(() => expect(docViewerEl.textContent).toBe('Bar content'));
+        await doRender('Bar content');
+        expect(addTitleAndTocSpy).toHaveBeenCalledTimes(2);
+
+        addTitleAndTocSpy.and.callFake(() => expect(docViewerEl.textContent).toBe(''));
+        await doRender('');
+        expect(addTitleAndTocSpy).toHaveBeenCalledTimes(3);
+
+        addTitleAndTocSpy.and.callFake(() => expect(docViewerEl.textContent).toBe('Qux content'));
+        await doRender('Qux content');
+        expect(addTitleAndTocSpy).toHaveBeenCalledTimes(4);
+      });
+
+      it('should remove the "noindex" meta tag if the document is valid', async () => {
+        await doRender('foo', 'bar');
+        expect(TestBed.get(Meta).removeTag).toHaveBeenCalledWith('name="robots"');
+      });
+
+      it('should add the "noindex" meta tag if the document is 404', async () => {
+        await doRender('missing', FILE_NOT_FOUND_ID);
+        expect(TestBed.get(Meta).addTag).toHaveBeenCalledWith({ name: 'robots', content: 'noindex' });
+      });
+
+      it('should add a "noindex" meta tag if the document fetching fails', async () => {
+        await doRender('error', FETCHING_ERROR_ID);
+        expect(TestBed.get(Meta).addTag).toHaveBeenCalledWith({ name: 'robots', content: 'noindex' });
+      });
+    });
+
+    describe('(embedding components)', () => {
+      it('should embed components', async () => {
+        await doRender('Some content');
+        expect(loadElementsSpy).toHaveBeenCalledTimes(1);
+        expect(loadElementsSpy).toHaveBeenCalledWith(docViewer.nextViewContainer);
+      });
+
+      it('should attempt to embed components even if the document is empty', async () => {
+        await doRender('');
+        await doRender(null);
+
+        expect(loadElementsSpy).toHaveBeenCalledTimes(2);
+        expect(loadElementsSpy.calls.argsFor(0)).toEqual([docViewer.nextViewContainer]);
+        expect(loadElementsSpy.calls.argsFor(1)).toEqual([docViewer.nextViewContainer]);
+      });
+
+      it('should unsubscribe from the previous "embed" observable when unsubscribed from', () => {
+        const obs = new ObservableWithSubscriptionSpies();
+        loadElementsSpy.and.returnValue(obs);
+
+        const renderObservable = docViewer.render({contents: 'Some content', id: 'foo'});
+        const subscription = renderObservable.subscribe();
+
+        expect(obs.subscribeSpy).toHaveBeenCalledTimes(1);
+        expect(obs.unsubscribeSpies[0]).not.toHaveBeenCalled();
+
+        subscription.unsubscribe();
+
+        expect(obs.subscribeSpy).toHaveBeenCalledTimes(1);
+        expect(obs.unsubscribeSpies[0]).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('(swapping views)', () => {
+      it('should still swap the views if the document is empty', async () => {
+        await doRender('');
+        expect(swapViewsSpy).toHaveBeenCalledTimes(1);
+
+        await doRender(null);
+        expect(swapViewsSpy).toHaveBeenCalledTimes(2);
+      });
+
+      it('should pass the `addTitleAndToc` callback', async () => {
+        const addTitleAndTocSpy = jasmine.createSpy('addTitleAndToc');
+        prepareTitleAndTocSpy.and.returnValue(addTitleAndTocSpy);
+
+        await doRender('<div></div>');
+
+        expect(swapViewsSpy).toHaveBeenCalledWith(addTitleAndTocSpy);
+      });
+
+      it('should unsubscribe from the previous "swap" observable when unsubscribed from', () => {
+        const obs = new ObservableWithSubscriptionSpies();
+        swapViewsSpy.and.returnValue(obs);
+
+        const renderObservable = docViewer.render({contents: 'Hello, world!', id: 'foo'});
+        const subscription = renderObservable.subscribe();
+
+        expect(obs.subscribeSpy).toHaveBeenCalledTimes(1);
+        expect(obs.unsubscribeSpies[0]).not.toHaveBeenCalled();
+
+        subscription.unsubscribe();
+
+        expect(obs.subscribeSpy).toHaveBeenCalledTimes(1);
+        expect(obs.unsubscribeSpies[0]).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('(on error) should clean up, log the error and recover', () => {
+      let logger: MockLogger;
+
+      beforeEach(() => logger = TestBed.get(Logger));
+
+      it('when `prepareTitleAndTocSpy()` fails', async () => {
+        const error = Error('Typical `prepareTitleAndToc()` error');
+        prepareTitleAndTocSpy.and.callFake(() => {
+          expect(docViewer.nextViewContainer.innerHTML).not.toBe('');
+          throw error;
+        });
+
+        await doRender('Some content', 'foo');
+
+        expect(prepareTitleAndTocSpy).toHaveBeenCalledTimes(1);
+        expect(swapViewsSpy).not.toHaveBeenCalled();
+        expect(docViewer.nextViewContainer.innerHTML).toBe('');
+        expect(logger.output.error).toEqual([
+          [jasmine.any(Error)]
+        ]);
+        expect(logger.output.error[0][0].message).toEqual(`[DocViewer] Error preparing document 'foo': ${error.stack}`);
+        expect(TestBed.get(Meta).addTag).toHaveBeenCalledWith({ name: 'robots', content: 'noindex' });
+      });
+
+      it('when `EmbedComponentsService.embedInto()` fails', async () => {
+        const error = Error('Typical `embedInto()` error');
+        loadElementsSpy.and.callFake(() => {
+          expect(docViewer.nextViewContainer.innerHTML).not.toBe('');
+          throw error;
+        });
+
+        await doRender('Some content', 'bar');
+
+        expect(prepareTitleAndTocSpy).toHaveBeenCalledTimes(1);
+        expect(loadElementsSpy).toHaveBeenCalledTimes(1);
+        expect(swapViewsSpy).not.toHaveBeenCalled();
+        expect(docViewer.nextViewContainer.innerHTML).toBe('');
+        expect(logger.output.error).toEqual([
+          [jasmine.any(Error)]
+        ]);
+        expect(TestBed.get(Meta).addTag).toHaveBeenCalledWith({ name: 'robots', content: 'noindex' });
+      });
+
+      it('when `swapViews()` fails', async () => {
+        const error = Error('Typical `swapViews()` error');
+        swapViewsSpy.and.callFake(() => {
+          expect(docViewer.nextViewContainer.innerHTML).not.toBe('');
+          throw error;
+        });
+
+        await doRender('Some content', 'qux');
+
+        expect(prepareTitleAndTocSpy).toHaveBeenCalledTimes(1);
+        expect(swapViewsSpy).toHaveBeenCalledTimes(1);
+        expect(docViewer.nextViewContainer.innerHTML).toBe('');
+        expect(logger.output.error).toEqual([
+          [jasmine.any(Error)]
+        ]);
+        expect(logger.output.error[0][0].message).toEqual(`[DocViewer] Error preparing document 'qux': ${error.stack}`);
+        expect(TestBed.get(Meta).addTag).toHaveBeenCalledWith({ name: 'robots', content: 'noindex' });
+      });
+
+      it('when something fails with non-Error', async () => {
+        const error = 'Typical string error';
+        swapViewsSpy.and.callFake(() => {
+          expect(docViewer.nextViewContainer.innerHTML).not.toBe('');
+          throw error;
+        });
+
+        await doRender('Some content', 'qux');
+
+        expect(swapViewsSpy).toHaveBeenCalledTimes(1);
+        expect(docViewer.nextViewContainer.innerHTML).toBe('');
+        expect(logger.output.error).toEqual([
+          [jasmine.any(Error)]
+        ]);
+        expect(logger.output.error[0][0].message).toEqual(`[DocViewer] Error preparing document 'qux': ${error}`);
+        expect(TestBed.get(Meta).addTag).toHaveBeenCalledWith({ name: 'robots', content: 'noindex' });
+      });
+    });
+
+    describe('(events)', () => {
+      it('should emit `docReady` after loading elements', async () => {
+        const onDocReadySpy = jasmine.createSpy('onDocReady');
+        docViewer.docReady.subscribe(onDocReadySpy);
+
+        await doRender('Some content');
+
+        expect(onDocReadySpy).toHaveBeenCalledTimes(1);
+        expect(loadElementsSpy).toHaveBeenCalledBefore(onDocReadySpy);
+      });
+
+      it('should emit `docReady` before swapping views', async () => {
+        const onDocReadySpy = jasmine.createSpy('onDocReady');
+        docViewer.docReady.subscribe(onDocReadySpy);
+
+        await doRender('Some content');
+
+        expect(onDocReadySpy).toHaveBeenCalledTimes(1);
+        expect(onDocReadySpy).toHaveBeenCalledBefore(swapViewsSpy);
+      });
+
+      it('should emit `docRendered` after swapping views', async () => {
+        const onDocRenderedSpy = jasmine.createSpy('onDocRendered');
+        docViewer.docRendered.subscribe(onDocRenderedSpy);
+
+        await doRender('Some content');
+
+        expect(onDocRenderedSpy).toHaveBeenCalledTimes(1);
+        expect(swapViewsSpy).toHaveBeenCalledBefore(onDocRenderedSpy);
+      });
+    });
+  });
+
+  describe('#swapViews()', () => {
+    let oldCurrViewContainer: HTMLElement;
+    let oldNextViewContainer: HTMLElement;
+
+    const doSwapViews = (cb?: () => void) =>
+      new Promise<void>((resolve, reject) =>
+        docViewer.swapViews(cb).subscribe(resolve, reject));
+
+    beforeEach(() => {
+      oldCurrViewContainer = docViewer.currViewContainer;
+      oldNextViewContainer = docViewer.nextViewContainer;
+
+      oldCurrViewContainer.innerHTML = 'Current view';
+      oldNextViewContainer.innerHTML = 'Next view';
+
+      docViewerEl.appendChild(oldCurrViewContainer);
+
+      expect(docViewerEl.contains(oldCurrViewContainer)).toBe(true);
+      expect(docViewerEl.contains(oldNextViewContainer)).toBe(false);
+    });
+
+    [true, false].forEach(animationsEnabled => {
+      describe(`(animationsEnabled: ${animationsEnabled})`, () => {
+        beforeEach(() => DocViewerComponent.animationsEnabled = animationsEnabled);
+        afterEach(() => DocViewerComponent.animationsEnabled = true);
+
+        [true, false].forEach(noAnimations => {
+          describe(`(.${NO_ANIMATIONS}: ${noAnimations})`, () => {
+            beforeEach(() => docViewerEl.classList[noAnimations ? 'add' : 'remove'](NO_ANIMATIONS));
+
+            it('should return an observable', done => {
+              docViewer.swapViews().subscribe(done, done.fail);
+            });
+
+            it('should swap the views', async () => {
+              await doSwapViews();
+
+              expect(docViewerEl.contains(oldCurrViewContainer)).toBe(false);
+              expect(docViewerEl.contains(oldNextViewContainer)).toBe(true);
+              expect(docViewer.currViewContainer).toBe(oldNextViewContainer);
+              expect(docViewer.nextViewContainer).toBe(oldCurrViewContainer);
+
+              await doSwapViews();
+
+              expect(docViewerEl.contains(oldCurrViewContainer)).toBe(true);
+              expect(docViewerEl.contains(oldNextViewContainer)).toBe(false);
+              expect(docViewer.currViewContainer).toBe(oldCurrViewContainer);
+              expect(docViewer.nextViewContainer).toBe(oldNextViewContainer);
+            });
+
+            it('should emit `docRemoved` after removing the leaving view', async () => {
+              const onDocRemovedSpy = jasmine.createSpy('onDocRemoved').and.callFake(() => {
+                expect(docViewerEl.contains(oldCurrViewContainer)).toBe(false);
+                expect(docViewerEl.contains(oldNextViewContainer)).toBe(false);
+              });
+
+              docViewer.docRemoved.subscribe(onDocRemovedSpy);
+
+              expect(docViewerEl.contains(oldCurrViewContainer)).toBe(true);
+              expect(docViewerEl.contains(oldNextViewContainer)).toBe(false);
+
+              await doSwapViews();
+
+              expect(onDocRemovedSpy).toHaveBeenCalledTimes(1);
+              expect(docViewerEl.contains(oldCurrViewContainer)).toBe(false);
+              expect(docViewerEl.contains(oldNextViewContainer)).toBe(true);
+            });
+
+            it('should not emit `docRemoved` if the leaving view is already removed', async () => {
+              const onDocRemovedSpy = jasmine.createSpy('onDocRemoved');
+
+              docViewer.docRemoved.subscribe(onDocRemovedSpy);
+              docViewerEl.removeChild(oldCurrViewContainer);
+
+              await doSwapViews();
+
+              expect(onDocRemovedSpy).not.toHaveBeenCalled();
+            });
+
+            it('should emit `docInserted` after inserting the entering view', async () => {
+              const onDocInsertedSpy = jasmine.createSpy('onDocInserted').and.callFake(() => {
+                expect(docViewerEl.contains(oldCurrViewContainer)).toBe(false);
+                expect(docViewerEl.contains(oldNextViewContainer)).toBe(true);
+              });
+
+              docViewer.docInserted.subscribe(onDocInsertedSpy);
+
+              expect(docViewerEl.contains(oldCurrViewContainer)).toBe(true);
+              expect(docViewerEl.contains(oldNextViewContainer)).toBe(false);
+
+              await doSwapViews();
+
+              expect(onDocInsertedSpy).toHaveBeenCalledTimes(1);
+              expect(docViewerEl.contains(oldCurrViewContainer)).toBe(false);
+              expect(docViewerEl.contains(oldNextViewContainer)).toBe(true);
+            });
+
+            it('should call the callback after inserting the entering view', async () => {
+              const onInsertedCb = jasmine.createSpy('onInsertedCb').and.callFake(() => {
+                expect(docViewerEl.contains(oldCurrViewContainer)).toBe(false);
+                expect(docViewerEl.contains(oldNextViewContainer)).toBe(true);
+              });
+              const onDocInsertedSpy = jasmine.createSpy('onDocInserted');
+
+              docViewer.docInserted.subscribe(onDocInsertedSpy);
+
+              expect(docViewerEl.contains(oldCurrViewContainer)).toBe(true);
+              expect(docViewerEl.contains(oldNextViewContainer)).toBe(false);
+
+              await doSwapViews(onInsertedCb);
+
+              expect(onInsertedCb).toHaveBeenCalledTimes(1);
+              expect(onInsertedCb).toHaveBeenCalledBefore(onDocInsertedSpy);
+              expect(docViewerEl.contains(oldCurrViewContainer)).toBe(false);
+              expect(docViewerEl.contains(oldNextViewContainer)).toBe(true);
+            });
+
+            it('should empty the previous view', async () => {
+              await doSwapViews();
+
+              expect(docViewer.currViewContainer.innerHTML).toBe('Next view');
+              expect(docViewer.nextViewContainer.innerHTML).toBe('');
+
+              docViewer.nextViewContainer.innerHTML = 'Next view 2';
+              await doSwapViews();
+
+              expect(docViewer.currViewContainer.innerHTML).toBe('Next view 2');
+              expect(docViewer.nextViewContainer.innerHTML).toBe('');
+            });
+
+            if (animationsEnabled && !noAnimations) {
+              // Only test this when there are animations. Without animations, the views are swapped
+              // synchronously, so there is no need (or way) to abort.
+              it('should abort swapping if the returned observable is unsubscribed from', async () => {
+                docViewer.swapViews().subscribe().unsubscribe();
+                await doSwapViews();
+
+                // Since the first call was cancelled, only one swapping should have taken place.
+                expect(docViewerEl.contains(oldCurrViewContainer)).toBe(false);
+                expect(docViewerEl.contains(oldNextViewContainer)).toBe(true);
+                expect(docViewer.currViewContainer).toBe(oldNextViewContainer);
+                expect(docViewer.nextViewContainer).toBe(oldCurrViewContainer);
+                expect(docViewer.currViewContainer.innerHTML).toBe('Next view');
+                expect(docViewer.nextViewContainer.innerHTML).toBe('');
+              });
+            } else {
+              it('should swap views synchronously when animations are disabled', () => {
+                const cbSpy = jasmine.createSpy('cb');
+
+                docViewer.swapViews(cbSpy).subscribe();
+
+                expect(cbSpy).toHaveBeenCalledTimes(1);
+                expect(docViewerEl.contains(oldCurrViewContainer)).toBe(false);
+                expect(docViewerEl.contains(oldNextViewContainer)).toBe(true);
+                expect(docViewer.currViewContainer).toBe(oldNextViewContainer);
+                expect(docViewer.nextViewContainer).toBe(oldCurrViewContainer);
+                expect(docViewer.currViewContainer.innerHTML).toBe('Next view');
+                expect(docViewer.nextViewContainer.innerHTML).toBe('');
+              });
+            }
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
new file mode 100644
index 000000000000..a1b5ddabb001
--- /dev/null
+++ b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
@@ -0,0 +1,242 @@
+import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import { Title, Meta } from '@angular/platform-browser';
+
+import { Observable, of, timer } from 'rxjs';
+import { catchError, switchMap, takeUntil, tap } from 'rxjs/operators';
+
+import { DocumentContents, FILE_NOT_FOUND_ID, FETCHING_ERROR_ID } from 'app/documents/document.service';
+import { Logger } from 'app/shared/logger.service';
+import { TocService } from 'app/shared/toc.service';
+import { ElementsLoader } from 'app/custom-elements/elements-loader';
+
+
+// Constants
+export const NO_ANIMATIONS = 'no-animations';
+
+// Initialization prevents flicker once pre-rendering is on
+const initialDocViewerElement = document.querySelector('aio-doc-viewer');
+const initialDocViewerContent = initialDocViewerElement ? initialDocViewerElement.innerHTML : '';
+
+@Component({
+  selector: 'aio-doc-viewer',
+  template: ''
+  // TODO(robwormald): shadow DOM and emulated don't work here (?!)
+  // encapsulation: ViewEncapsulation.Native
+})
+export class DocViewerComponent implements OnDestroy {
+  // Enable/Disable view transition animations.
+  static animationsEnabled = true;
+
+  private hostElement: HTMLElement;
+
+  private void$ = of<void>(undefined);
+  private onDestroy$ = new EventEmitter<void>();
+  private docContents$ = new EventEmitter<DocumentContents>();
+
+  protected currViewContainer: HTMLElement = document.createElement('div');
+  protected nextViewContainer: HTMLElement = document.createElement('div');
+
+  @Input()
+  set doc(newDoc: DocumentContents) {
+    // Ignore `undefined` values that could happen if the host component
+    // does not initially specify a value for the `doc` input.
+    if (newDoc) {
+      this.docContents$.emit(newDoc);
+    }
+  }
+
+  // The new document is ready to be inserted into the viewer.
+  // (Embedded components have been loaded and instantiated, if necessary.)
+  @Output() docReady = new EventEmitter<void>();
+
+  // The previous document has been removed from the viewer.
+  // (The leaving animation (if any) has been completed and the node has been removed from the DOM.)
+  @Output() docRemoved = new EventEmitter<void>();
+
+  // The new document has been inserted into the viewer.
+  // (The node has been inserted into the DOM, but the entering animation may still be in progress.)
+  @Output() docInserted = new EventEmitter<void>();
+
+  // The new document has been fully rendered into the viewer.
+  // (The entering animation has been completed.)
+  @Output() docRendered = new EventEmitter<void>();
+
+  constructor(
+      elementRef: ElementRef,
+      private logger: Logger,
+      private titleService: Title,
+      private metaService: Meta,
+      private tocService: TocService,
+      private elementsLoader: ElementsLoader) {
+    this.hostElement = elementRef.nativeElement;
+    // Security: the initialDocViewerContent comes from the prerendered DOM and is considered to be secure
+    this.hostElement.innerHTML = initialDocViewerContent;
+
+    if (this.hostElement.firstElementChild) {
+      this.currViewContainer = this.hostElement.firstElementChild as HTMLElement;
+    }
+
+    this.docContents$
+        .pipe(
+            switchMap(newDoc => this.render(newDoc)),
+            takeUntil(this.onDestroy$),
+        )
+        .subscribe();
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.emit();
+  }
+
+  /**
+   * Prepare for setting the window title and ToC.
+   * Return a function to actually set them.
+   */
+  protected prepareTitleAndToc(targetElem: HTMLElement, docId: string): () => void {
+    const titleEl = targetElem.querySelector('h1');
+    const needsToc = !!titleEl && !/no-?toc/i.test(titleEl.className);
+    const embeddedToc = targetElem.querySelector('aio-toc.embedded');
+
+    if (needsToc && !embeddedToc) {
+      // Add an embedded ToC if it's needed and there isn't one in the content already.
+      titleEl!.insertAdjacentHTML('afterend', '<aio-toc class="embedded"></aio-toc>');
+    } else if (!needsToc && embeddedToc) {
+      // Remove the embedded Toc if it's there and not needed.
+      embeddedToc.remove();
+    }
+
+    return () => {
+      this.tocService.reset();
+      let title: string|null = '';
+
+      // Only create ToC for docs with an `<h1>` heading.
+      // If you don't want a ToC, add "no-toc" class to `<h1>`.
+      if (titleEl) {
+        title = (typeof titleEl.innerText === 'string') ? titleEl.innerText : titleEl.textContent;
+
+        if (needsToc) {
+          this.tocService.genToc(targetElem, docId);
+        }
+      }
+
+      this.titleService.setTitle(title ? `Angular - ${title}` : 'Angular');
+    };
+  }
+
+  /**
+   * Add doc content to host element and build it out with embedded components.
+   */
+  protected render(doc: DocumentContents): Observable<void> {
+    let addTitleAndToc: () => void;
+
+    this.setNoIndex(doc.id === FILE_NOT_FOUND_ID || doc.id === FETCHING_ERROR_ID);
+
+    return this.void$.pipe(
+        // Security: `doc.contents` is always authored by the documentation team
+        //           and is considered to be safe.
+        tap(() => this.nextViewContainer.innerHTML = doc.contents || ''),
+        tap(() => addTitleAndToc = this.prepareTitleAndToc(this.nextViewContainer, doc.id)),
+        switchMap(() => this.elementsLoader.loadContainedCustomElements(this.nextViewContainer)),
+        tap(() => this.docReady.emit()),
+        switchMap(() => this.swapViews(addTitleAndToc)),
+        tap(() => this.docRendered.emit()),
+        catchError(err => {
+          const errorMessage = (err instanceof Error) ? err.stack : err;
+          this.logger.error(new Error(`[DocViewer] Error preparing document '${doc.id}': ${errorMessage}`));
+          this.nextViewContainer.innerHTML = '';
+          this.setNoIndex(true);
+          return this.void$;
+        }),
+    );
+  }
+
+  /**
+   * Tell search engine crawlers whether to index this page
+   */
+  private setNoIndex(val: boolean) {
+    if (val) {
+      this.metaService.addTag({ name: 'robots', content: 'noindex' });
+    } else {
+      this.metaService.removeTag('name="robots"');
+    }
+  }
+
+  /**
+   * Swap the views, removing `currViewContainer` and inserting `nextViewContainer`.
+   * (At this point all content should be ready, including having loaded and instantiated embedded
+   *  components.)
+   *
+   * Optionally, run a callback as soon as `nextViewContainer` has been inserted, but before the
+   * entering animation has been completed. This is useful for work that needs to be done as soon as
+   * the element has been attached to the DOM.
+   */
+  protected swapViews(onInsertedCb = () => {}): Observable<void> {
+    const raf$ = new Observable<void>(subscriber => {
+      const rafId = requestAnimationFrame(() => {
+        subscriber.next();
+        subscriber.complete();
+      });
+      return () => cancelAnimationFrame(rafId);
+    });
+
+    // Get the actual transition duration (taking global styles into account).
+    // According to the [CSSOM spec](https://drafts.csswg.org/cssom/#serializing-css-values),
+    // `time` values should be returned in seconds.
+    const getActualDuration = (elem: HTMLElement) => {
+      const cssValue = getComputedStyle(elem).transitionDuration || '';
+      const seconds = Number(cssValue.replace(/s$/, ''));
+      return 1000 * seconds;
+    };
+    const animateProp =
+        (elem: HTMLElement, prop: keyof CSSStyleDeclaration, from: string, to: string, duration = 200) => {
+          const animationsDisabled = !DocViewerComponent.animationsEnabled
+                                     || this.hostElement.classList.contains(NO_ANIMATIONS);
+          if (prop === 'length' || prop === 'parentRule') {
+            // We cannot animate length or parentRule properties because they are readonly
+            return this.void$;
+          }
+          elem.style.transition = '';
+          return animationsDisabled
+              ? this.void$.pipe(tap(() => elem.style[prop] = to))
+              : this.void$.pipe(
+                    // In order to ensure that the `from` value will be applied immediately (i.e.
+                    // without transition) and that the `to` value will be affected by the
+                    // `transition` style, we need to ensure an animation frame has passed between
+                    // setting each style.
+                    switchMap(() => raf$), tap(() => elem.style[prop] = from),
+                    switchMap(() => raf$), tap(() => elem.style.transition = `all ${duration}ms ease-in-out`),
+                    switchMap(() => raf$), tap(() => (elem.style as any)[prop] = to),
+                    switchMap(() => timer(getActualDuration(elem))), switchMap(() => this.void$),
+                );
+        };
+
+    const animateLeave = (elem: HTMLElement) => animateProp(elem, 'opacity', '1', '0.1');
+    const animateEnter = (elem: HTMLElement) => animateProp(elem, 'opacity', '0.1', '1');
+
+    let done$ = this.void$;
+
+    if (this.currViewContainer.parentElement) {
+      done$ = done$.pipe(
+          // Remove the current view from the viewer.
+          switchMap(() => animateLeave(this.currViewContainer)),
+          tap(() => this.currViewContainer.parentElement!.removeChild(this.currViewContainer)),
+          tap(() => this.docRemoved.emit()),
+      );
+    }
+
+    return done$.pipe(
+        // Insert the next view into the viewer.
+        tap(() => this.hostElement.appendChild(this.nextViewContainer)),
+        tap(() => onInsertedCb()),
+        tap(() => this.docInserted.emit()),
+        switchMap(() => animateEnter(this.nextViewContainer)),
+        // Update the view references and clean up unused nodes.
+        tap(() => {
+          const prevViewContainer = this.currViewContainer;
+          this.currViewContainer = this.nextViewContainer;
+          this.nextViewContainer = prevViewContainer;
+          this.nextViewContainer.innerHTML = '';  // Empty to release memory.
+        }),
+    );
+  }
+}
diff --git a/aio/src/app/layout/doc-viewer/dt.component.ts b/aio/src/app/layout/doc-viewer/dt.component.ts
new file mode 100644
index 000000000000..41dc9397f540
--- /dev/null
+++ b/aio/src/app/layout/doc-viewer/dt.component.ts
@@ -0,0 +1,30 @@
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { DocumentContents } from 'app/documents/document.service';
+
+@Component({
+  selector: 'aio-dt',
+  template: `
+  <div *ngIf="on">
+    <hr>
+    <textarea #dt [value]="text" rows="10" cols="80"></textarea>
+    <br/>
+    <button (click)="dtextSet()">Show change</button>
+  </div>
+  `
+})
+export class DtComponent {
+
+  @Input() on = false;
+  @Input('doc') doc: DocumentContents;
+  @Output() docChange = new EventEmitter<DocumentContents>();
+
+  @ViewChild('dt', { read: ElementRef })
+  dt: ElementRef;
+
+  get text() { return this.doc && this.doc.contents; }
+
+  dtextSet() {
+    this.doc.contents = this.dt.nativeElement.value;
+    this.docChange.emit({ ...this.doc });
+  }
+}
diff --git a/aio/src/app/layout/footer/footer.component.html b/aio/src/app/layout/footer/footer.component.html
new file mode 100644
index 000000000000..2e1f835fbe52
--- /dev/null
+++ b/aio/src/app/layout/footer/footer.component.html
@@ -0,0 +1,23 @@
+
+  <div class="grid-fluid">
+    <div class="footer-block" *ngFor="let node of nodes">
+      <h3>{{node.title}}</h3>
+      <ul>
+        <li *ngFor="let item of node.children">
+          <a class="link" [href]="item.url"
+            [title]="item.tooltip || item.title">{{ item.title }}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <p>
+    Powered by Google ©2010-2018.
+    Code licensed under an <a href="license" title="License text" >MIT-style License</a>.
+    Documentation licensed under
+    <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
+  </p>
+  <p>
+    Version {{versionInfo?.full}}.
+  </p>
+  <!-- TODO: twitter widget (but only on pages that use twitter) -->
diff --git a/aio/src/app/layout/footer/footer.component.ts b/aio/src/app/layout/footer/footer.component.ts
new file mode 100644
index 000000000000..ad89c7480f2f
--- /dev/null
+++ b/aio/src/app/layout/footer/footer.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+import { NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
+
+@Component({
+  selector: 'aio-footer',
+  templateUrl: 'footer.component.html'
+})
+export class FooterComponent {
+  @Input() nodes: NavigationNode[];
+  @Input() versionInfo: VersionInfo;
+}
diff --git a/aio/src/app/layout/mode-banner/mode-banner.component.ts b/aio/src/app/layout/mode-banner/mode-banner.component.ts
new file mode 100644
index 000000000000..366a0154e94c
--- /dev/null
+++ b/aio/src/app/layout/mode-banner/mode-banner.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { VersionInfo } from 'app/navigation/navigation.service';
+
+@Component({
+  selector: 'aio-mode-banner',
+  template: `
+  <div *ngIf="mode == 'archive'" class="mode-banner">
+    This is the <strong>archived documentation for Angular v{{version?.major}}.</strong>
+    Please visit <a href="https://angular.io/">angular.io</a> to see documentation for the current version of Angular.
+  </div>
+  `
+})
+export class ModeBannerComponent {
+  @Input() mode: string;
+  @Input() version: VersionInfo;
+}
diff --git a/aio/src/app/layout/nav-item/nav-item.component.html b/aio/src/app/layout/nav-item/nav-item.component.html
new file mode 100644
index 000000000000..5e76ec1e46e6
--- /dev/null
+++ b/aio/src/app/layout/nav-item/nav-item.component.html
@@ -0,0 +1,27 @@
+<div *ngIf="!node.children">
+  <a href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
+    class="vertical-menu-item">
+    {{node.title}}
+  </a>
+</div>
+
+<div *ngIf="node.children">
+  <a *ngIf="node.url != null" href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
+    (click)="headerClicked()" class="vertical-menu-item heading">
+    {{node.title}}
+    <mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
+  </a>
+
+  <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}}
+    <mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
+  </button>
+
+  <div class="heading-children" [ngClass]="classes">
+    <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 000000000000..cc09f429e972
--- /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 { 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
new file mode 100644
index 000000000000..a62612f834a8
--- /dev/null
+++ b/aio/src/app/layout/nav-item/nav-item.component.ts
@@ -0,0 +1,50 @@
+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() 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() {
+    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();
+  }
+
+  setClasses() {
+    this.classes = {
+      ['level-' + this.level]: true,
+      collapsed: !this.isExpanded,
+      expanded: this.isExpanded,
+      selected: this.isSelected
+    };
+  }
+
+  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
new file mode 100644
index 000000000000..87a09145b87c
--- /dev/null
+++ b/aio/src/app/layout/nav-menu/nav-menu.component.spec.ts
@@ -0,0 +1,15 @@
+import { NavMenuComponent } from './nav-menu.component';
+import { NavigationNode } from 'app/navigation/navigation.service';
+
+// 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] ]);
+  });
+});
diff --git a/aio/src/app/layout/nav-menu/nav-menu.component.ts b/aio/src/app/layout/nav-menu/nav-menu.component.ts
new file mode 100644
index 000000000000..53194f6c96fb
--- /dev/null
+++ b/aio/src/app/layout/nav-menu/nav-menu.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+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" [isWide]="isWide">
+  </aio-nav-item>`
+})
+export class NavMenuComponent {
+  @Input() currentNode: CurrentNode;
+  @Input() isWide = false;
+  @Input() nodes: NavigationNode[];
+  get filteredNodes() { return this.nodes ? this.nodes.filter(n => !n.hidden) : []; }
+}
diff --git a/aio/src/app/layout/notification/notification.component.html b/aio/src/app/layout/notification/notification.component.html
new file mode 100644
index 000000000000..58d7b6bc46a9
--- /dev/null
+++ b/aio/src/app/layout/notification/notification.component.html
@@ -0,0 +1,7 @@
+<span class="content" (click)="contentClick()">
+  <ng-content></ng-content>
+</span>
+
+<button mat-icon-button class="close-button" aria-label="Close" (click)="dismiss()">
+  <mat-icon svgIcon="close" aria-label="Dismiss notification"></mat-icon>
+</button>
diff --git a/aio/src/app/layout/notification/notification.component.spec.ts b/aio/src/app/layout/notification/notification.component.spec.ts
new file mode 100644
index 000000000000..b823ad518f41
--- /dev/null
+++ b/aio/src/app/layout/notification/notification.component.spec.ts
@@ -0,0 +1,135 @@
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { CurrentDateToken } from 'app/shared/current-date';
+import { NotificationComponent } from './notification.component';
+import { WindowToken } from 'app/shared/window';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  function configTestingModule(now = new Date('2018-01-20')) {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent, NotificationComponent],
+      providers: [
+        { provide: WindowToken, useClass: MockWindow },
+        { provide: CurrentDateToken, useValue: now },
+      ],
+      imports: [NoopAnimationsModule],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+  }
+
+  function createComponent() {
+    fixture = TestBed.createComponent(TestComponent);
+    const debugElement = fixture.debugElement.query(By.directive(NotificationComponent));
+    component = debugElement.componentInstance;
+    component.ngOnInit();
+    fixture.detectChanges();
+  }
+
+  describe('content projection', () => {
+    it('should display the message text', () => {
+      configTestingModule();
+      createComponent();
+      expect(fixture.nativeElement.innerHTML).toContain('Version 6 of Angular Now Available!');
+    });
+
+    it('should render HTML elements', () => {
+      configTestingModule();
+      createComponent();
+      const button = fixture.debugElement.query(By.css('.action-button'));
+      expect(button.nativeElement.textContent).toEqual('Learn More');
+    });
+
+    it('should process Angular directives', () => {
+      configTestingModule();
+      createComponent();
+      const badSpans = fixture.debugElement.queryAll(By.css('.bad'));
+      expect(badSpans.length).toEqual(0);
+    });
+  });
+
+  it('should call dismiss() when the message link is clicked, if dismissOnContentClick is true', () => {
+    configTestingModule();
+    createComponent();
+    spyOn(component, 'dismiss');
+    component.dismissOnContentClick = true;
+    const message: HTMLSpanElement = fixture.debugElement.query(By.css('.messageholder')).nativeElement;
+    message.click();
+    expect(component.dismiss).toHaveBeenCalled();
+  });
+
+  it('should not call dismiss() when the message link is clicked, if dismissOnContentClick is false', () => {
+    configTestingModule();
+    createComponent();
+    spyOn(component, 'dismiss');
+    component.dismissOnContentClick = false;
+    const message: HTMLSpanElement = fixture.debugElement.query(By.css('.messageholder')).nativeElement;
+    message.click();
+    expect(component.dismiss).not.toHaveBeenCalled();
+  });
+
+  it('should call dismiss() when the close button is clicked', () => {
+    configTestingModule();
+    createComponent();
+    spyOn(component, 'dismiss');
+    fixture.debugElement.query(By.css('button')).triggerEventHandler('click', null);
+    fixture.detectChanges();
+    expect(component.dismiss).toHaveBeenCalled();
+  });
+
+  it('should hide the notification when dismiss is called', () => {
+    configTestingModule();
+    createComponent();
+    expect(component.showNotification).toBe('show');
+    component.dismiss();
+    expect(component.showNotification).toBe('hide');
+  });
+
+  it('should update localStorage key when dismiss is called', () => {
+    configTestingModule();
+    createComponent();
+    const setItemSpy: jasmine.Spy = TestBed.get(WindowToken).localStorage.setItem;
+    component.dismiss();
+    expect(setItemSpy).toHaveBeenCalledWith('aio-notification/survey-january-2018', 'hide');
+  });
+
+  it('should not show the notification if the date is after the expiry date', () => {
+    configTestingModule(new Date('2018-01-23'));
+    createComponent();
+    expect(component.showNotification).toBe('hide');
+  });
+
+  it('should not show the notification if the there is a "hide" flag in localStorage', () => {
+    configTestingModule();
+    const getItemSpy: jasmine.Spy = TestBed.get(WindowToken).localStorage.getItem;
+    getItemSpy.and.returnValue('hide');
+    createComponent();
+    expect(getItemSpy).toHaveBeenCalledWith('aio-notification/survey-january-2018');
+    expect(component.showNotification).toBe('hide');
+  });
+});
+
+@Component({
+  template: `
+  <aio-notification
+    notificationId="survey-january-2018"
+    expirationDate="2018-01-22">
+    <span class="messageholder">
+    <a href="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4">
+      <span *ngIf="false" class="bad">This should not appear</span>
+      <span class="message">Version 6 of Angular Now Available!</span>
+      <span class="action-button">Learn More</span>
+    </a>
+    </span>
+  </aio-notification>`
+})
+class TestComponent {
+}
+
+class MockWindow {
+  localStorage = jasmine.createSpyObj('localStorage', ['getItem', 'setItem']);
+}
diff --git a/aio/src/app/layout/notification/notification.component.ts b/aio/src/app/layout/notification/notification.component.ts
new file mode 100644
index 000000000000..586b9cdf8b62
--- /dev/null
+++ b/aio/src/app/layout/notification/notification.component.ts
@@ -0,0 +1,55 @@
+import { animate, state, style, trigger, transition } from '@angular/animations';
+import { Component, EventEmitter, HostBinding, Inject, Input, OnInit, Output } from '@angular/core';
+import { CurrentDateToken } from 'app/shared/current-date';
+import { WindowToken } from 'app/shared/window';
+
+const LOCAL_STORAGE_NAMESPACE = 'aio-notification/';
+
+@Component({
+  selector: 'aio-notification',
+  templateUrl: 'notification.component.html',
+  animations: [
+    trigger('hideAnimation', [
+      state('show', style({height: '*'})),
+      state('hide', style({height: 0})),
+      // this should be kept in sync with the animation durations in:
+      // - aio/src/styles/2-modules/_notification.scss
+      // - aio/src/app/app.component.ts : notificationDismissed()
+      transition('show => hide', animate(250))
+    ])
+  ]
+})
+export class NotificationComponent implements OnInit {
+  private get localStorage() { return this.window.localStorage; }
+
+  @Input() dismissOnContentClick: boolean;
+  @Input() notificationId: string;
+  @Input() expirationDate: string;
+  @Output() dismissed = new EventEmitter();
+
+  @HostBinding('@hideAnimation')
+  showNotification: 'show'|'hide';
+
+  constructor(
+    @Inject(WindowToken) private window: Window,
+    @Inject(CurrentDateToken) private currentDate: Date
+  ) {}
+
+  ngOnInit() {
+    const previouslyHidden = this.localStorage.getItem(LOCAL_STORAGE_NAMESPACE + this.notificationId) === 'hide';
+    const expired = this.currentDate > new Date(this.expirationDate);
+    this.showNotification = previouslyHidden || expired ? 'hide' : 'show';
+  }
+
+  contentClick() {
+    if (this.dismissOnContentClick) {
+      this.dismiss();
+    }
+  }
+
+  dismiss() {
+    this.localStorage.setItem(LOCAL_STORAGE_NAMESPACE + this.notificationId, 'hide');
+    this.showNotification = 'hide';
+    this.dismissed.next();
+  }
+}
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
new file mode 100644
index 000000000000..fbc6efde7989
--- /dev/null
+++ b/aio/src/app/layout/top-menu/top-menu.component.spec.ts
@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BehaviorSubject } from 'rxjs';
+
+import { TopMenuComponent } from './top-menu.component';
+import { NavigationService, NavigationViews } from 'app/navigation/navigation.service';
+
+describe('TopMenuComponent', () => {
+  let component: TopMenuComponent;
+  let fixture: ComponentFixture<TopMenuComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TopMenuComponent ],
+      providers: [
+        { provide: NavigationService, useClass: TestNavigationService }
+      ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+//// Test Helpers ////
+class TestNavigationService {
+  navJson = {
+    TopBar: [
+      {url: 'api', title: 'API' },
+      {url: 'features', title: 'Features' }
+    ],
+  };
+
+  navigationViews = new BehaviorSubject<NavigationViews>(this.navJson);
+}
diff --git a/aio/src/app/layout/top-menu/top-menu.component.ts b/aio/src/app/layout/top-menu/top-menu.component.ts
new file mode 100644
index 000000000000..7cf09713e201
--- /dev/null
+++ b/aio/src/app/layout/top-menu/top-menu.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { NavigationNode } from 'app/navigation/navigation.service';
+
+@Component({
+  selector: 'aio-top-menu',
+  template: `
+    <ul role="navigation">
+      <li *ngFor="let node of nodes"><a class="nav-link" [href]="node.url" [title]="node.title">{{ node.title }}</a></li>
+    </ul>`
+})
+export class TopMenuComponent {
+  @Input() nodes: NavigationNode[];
+
+}
diff --git a/aio/src/app/navigation/navigation.model.ts b/aio/src/app/navigation/navigation.model.ts
new file mode 100644
index 000000000000..e54f175977f5
--- /dev/null
+++ b/aio/src/app/navigation/navigation.model.ts
@@ -0,0 +1,53 @@
+// Pulled all interfaces out of `navigation.service.ts` because of this:
+// https://github.com/angular/angular-cli/issues/2034
+// Then re-export them from `navigation.service.ts`
+
+export interface NavigationNode {
+  url?: string;
+  title?: string;
+  tooltip?: string;
+  hidden?: boolean;
+  children?: NavigationNode[];
+}
+
+export type NavigationResponse = {__versionInfo: VersionInfo } & { [name: string]: NavigationNode[]|VersionInfo };
+
+export interface NavigationViews {
+  [name: string]: NavigationNode[];
+}
+
+/**
+ *  Navigation information about a node at specific URL
+ *  url: the current URL
+ *  view: 'SideNav' | 'TopBar' | 'Footer' | etc
+ *  nodes: the current node and its ancestor nodes within that view
+ */
+export interface CurrentNode {
+  url: string;
+  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;
+  minor: number;
+  patch: number;
+  prerelease: string[];
+  build: string;
+  version: string;
+  codeName: string;
+  isSnapshot: boolean;
+  full: string;
+  branch: string;
+  commitSHA: string;
+}
diff --git a/aio/src/app/navigation/navigation.service.spec.ts b/aio/src/app/navigation/navigation.service.spec.ts
new file mode 100644
index 000000000000..4120d43118ac
--- /dev/null
+++ b/aio/src/app/navigation/navigation.service.spec.ts
@@ -0,0 +1,264 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import { CurrentNodes, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
+import { LocationService } from 'app/shared/location.service';
+import { MockLocationService } from 'testing/location.service';
+
+describe('NavigationService', () => {
+
+  let injector: Injector;
+  let navService: NavigationService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    injector = TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        NavigationService,
+        { provide: LocationService, useFactory: () => new MockLocationService('a') }
+      ]
+    });
+
+    navService = injector.get(NavigationService);
+    httpMock = injector.get(HttpTestingController);
+  });
+
+  afterEach(() => httpMock.verify());
+
+  describe('navigationViews', () => {
+
+    it('should make a single connection to the server', () => {
+      const req = httpMock.expectOne({});
+      expect(req.request.url).toBe('generated/navigation.json');
+    });
+
+    it('should expose the server response', () => {
+      const viewsEvents: NavigationViews[] = [];
+      navService.navigationViews.subscribe(views => viewsEvents.push(views));
+
+      expect(viewsEvents).toEqual([]);
+      httpMock.expectOne({}).flush({ TopBar: [ { url: 'a' }] });
+      expect(viewsEvents).toEqual([{ TopBar: [ { url: 'a' }] }]);
+    });
+
+    it('navigationViews observable should complete', () => {
+      let completed = false;
+      navService.navigationViews.subscribe(undefined, undefined, () => completed = true);
+      expect(true).toBe(true, 'observable completed');
+
+      // Stop `$httpMock.verify()` from complaining.
+      httpMock.expectOne({});
+    });
+
+    it('should return the same object to all subscribers', () => {
+      let views1: NavigationViews|undefined;
+      navService.navigationViews.subscribe(views => views1 = views);
+
+      let views2: NavigationViews|undefined;
+      navService.navigationViews.subscribe(views => views2 = views);
+
+      httpMock.expectOne({}).flush({ TopBar: [{ url: 'a' }] });
+
+      let views3: NavigationViews|undefined;
+      navService.navigationViews.subscribe(views => views3 = views);
+
+      expect(views2).toBe(views1);
+      expect(views3).toBe(views1);
+
+      // Verfy that subsequent subscriptions did not trigger another request.
+      httpMock.expectNone({});
+    });
+
+    it('should do WHAT(?) if the request fails');
+  });
+
+  describe('node.tooltip', () => {
+    let view: NavigationNode[];
+
+    const sideNav: NavigationNode[] = [
+      { title: 'a', tooltip: 'a tip' },
+      { title: 'b' },
+      { title: 'c!'},
+      { url: 'foo' }
+    ];
+
+    beforeEach(() => {
+      navService.navigationViews.subscribe(views => view = views['sideNav']);
+      httpMock.expectOne({}).flush({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', 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', tooltip: 'tip' }
+        ] },
+        { url: 'f', title: 'f', tooltip: 'tip' }
+      ];
+
+    const navJson = {
+      TopBar: topBarNodes,
+      SideNav: sideNavNodes,
+      __versionInfo: {}
+    };
+
+    beforeEach(() => {
+      locationService = injector.get(LocationService) as any as MockLocationService;
+      navService.currentNodes.subscribe(selected => currentNodes = selected);
+      httpMock.expectOne({}).flush(navJson);
+    });
+
+    it('should list the side navigation node that matches the current location, and all its ancestors', () => {
+      locationService.go('b');
+      expect(currentNodes).toEqual({
+        SideNav: {
+          url: 'b',
+          view: 'SideNav',
+          nodes: [
+            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]
+          ]
+        }
+      });
+
+      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', () => {
+      locationService.go('features');
+      expect(currentNodes).toEqual({
+        TopBar: {
+          url: 'features',
+          view: 'TopBar',
+          nodes: [ topBarNodes[0] ]
+        }
+      });
+    });
+
+    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: CurrentNodes = {
+        SideNav: {
+          url: 'c',
+          view: 'SideNav',
+          nodes: [
+            sideNavNodes[0].children![0].children![0],
+            sideNavNodes[0].children![0],
+            sideNavNodes[0]
+          ]
+        }
+      };
+
+      locationService.go('c');
+      expect(currentNodes).toEqual(cnode, 'location: c');
+
+      locationService.go('c#foo');
+      expect(currentNodes).toEqual(cnode, 'location: c#foo');
+
+      locationService.go('c?foo=1');
+      expect(currentNodes).toEqual(cnode, 'location: c?foo=1');
+
+      locationService.go('c#foo?bar=1&baz=2');
+      expect(currentNodes).toEqual(cnode, 'location: c#foo?bar=1&baz=2');
+    });
+  });
+
+  describe('versionInfo', () => {
+    const expectedVersionInfo = { raw: '4.0.0' } as VersionInfo;
+    let versionInfo: VersionInfo;
+
+    beforeEach(() => {
+      navService.versionInfo.subscribe(info => versionInfo = info);
+      httpMock.expectOne({}).flush({
+        __versionInfo: expectedVersionInfo
+      });
+    });
+
+    it('should extract the version info', () => {
+      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', () => {
+      httpMock.expectOne({}).flush({ docVersions });
+      expect(actualDocVersions).toEqual(expectedDocVersions);
+    });
+  });
+});
diff --git a/aio/src/app/navigation/navigation.service.ts b/aio/src/app/navigation/navigation.service.ts
new file mode 100644
index 000000000000..dbee4e367c02
--- /dev/null
+++ b/aio/src/app/navigation/navigation.service.ts
@@ -0,0 +1,158 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { combineLatest, ConnectableObservable, Observable } from 'rxjs';
+import { map, publishLast, publishReplay } from 'rxjs/operators';
+
+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 { CurrentNodes, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
+export { CurrentNodes, CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
+
+const navigationPath = CONTENT_URL_PREFIX + 'navigation.json';
+
+@Injectable()
+export class NavigationService {
+  /**
+   * An observable collection of NavigationNode trees, which can be used to render navigational menus
+   */
+  navigationViews: Observable<NavigationViews>;
+
+  /**
+   * The current version of doc-app that we are running
+   */
+  versionInfo: Observable<VersionInfo>;
+
+  /**
+   * An observable of the current node with info about the
+   * node (if any) that matches the current URL location
+   * including its navigation view and its ancestor nodes in that view
+   */
+  currentNodes: Observable<CurrentNodes>;
+
+  constructor(private http: HttpClient, 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);
+  }
+
+  /**
+   * Get an observable that fetches the `NavigationResponse` from the server.
+   * We create an observable by calling `http.get` but then publish it to share the result
+   * among multiple subscribers, without triggering new requests.
+   * We use `publishLast` because once the http request is complete the request observable completes.
+   * If you use `publish` here then the completed request observable will cause the subscribed observables to complete too.
+   * We `connect` to the published observable to trigger the request immediately.
+   * We could use `.refCount` here but then if the subscribers went from 1 -> 0 -> 1 then you would get
+   * another request to the server.
+   * We are not storing the subscription from connecting as we do not expect this service to be destroyed.
+   */
+  private fetchNavigationInfo(): Observable<NavigationResponse> {
+    const navigationInfo = this.http.get<NavigationResponse>(navigationPath)
+      .pipe(publishLast());
+    (navigationInfo as ConnectableObservable<NavigationResponse>).connect();
+    return navigationInfo;
+  }
+
+  private getVersionInfo(navigationInfo: Observable<NavigationResponse>) {
+    const versionInfo = navigationInfo.pipe(
+      map(response => response.__versionInfo),
+      publishLast(),
+    );
+    (versionInfo as ConnectableObservable<VersionInfo>).connect();
+    return versionInfo;
+  }
+
+  private getNavigationViews(navigationInfo: Observable<NavigationResponse>): Observable<NavigationViews> {
+    const navigationViews = navigationInfo.pipe(
+      map(response => {
+        const views = Object.assign({}, response);
+        Object.keys(views).forEach(key => {
+          if (key[0] === '_') { delete views[key]; }
+        });
+        return views as NavigationViews;
+      }),
+      publishLast(),
+    );
+    (navigationViews as ConnectableObservable<NavigationViews>).connect();
+    return navigationViews;
+  }
+
+  /**
+   * 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 getCurrentNodes(navigationViews: Observable<NavigationViews>): Observable<CurrentNodes> {
+    const currentNodes = combineLatest(
+      navigationViews.pipe(map(views => this.computeUrlToNavNodesMap(views))),
+      this.location.currentPath,
+
+      (navMap, url) => {
+        const urlKey = url.startsWith('api/') ? 'api' : url;
+        return navMap.get(urlKey) || { '' : { view: '', url: urlKey, nodes: [] }};
+      })
+      .pipe(publishReplay(1));
+    (currentNodes as ConnectableObservable<CurrentNodes>).connect();
+    return currentNodes;
+  }
+
+  /**
+   * Compute a mapping from URL to an array of nodes, where the first node in the array
+   * is the one that matches the URL and the rest are the ancestors of that node.
+   *
+   * @param navigation - A collection of navigation nodes that are to be mapped
+   */
+  private computeUrlToNavNodesMap(navigation: NavigationViews) {
+    const navMap = new Map<string, CurrentNodes>();
+    Object.keys(navigation)
+      .forEach(view => navigation[view]
+        .forEach(node => this.walkNodes(view, navMap, node)));
+    return navMap;
+  }
+
+  /**
+   * 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);
+
+      // 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(/\/$/, '');
+        if (!navMap.has(cleanedUrl)) {
+          navMap.set(cleanedUrl, {});
+        }
+        const navMapItem = navMap.get(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/interfaces.ts b/aio/src/app/search/interfaces.ts
new file mode 100644
index 000000000000..c0c18d5c986d
--- /dev/null
+++ b/aio/src/app/search/interfaces.ts
@@ -0,0 +1,19 @@
+export interface SearchResults {
+  query: string;
+  results: SearchResult[];
+}
+
+export interface SearchResult {
+  path: string;
+  title: string;
+  type: string;
+  titleWords: string;
+  keywords: string;
+}
+
+export interface SearchArea {
+  name: string;
+  pages: SearchResult[];
+  priorityPages: SearchResult[];
+}
+
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
new file mode 100644
index 000000000000..4fabfc54a7a1
--- /dev/null
+++ b/aio/src/app/search/search-box/search-box.component.spec.ts
@@ -0,0 +1,127 @@
+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 { 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 host: HostComponent;
+  let fixture: ComponentFixture<HostComponent>;
+
+  beforeEach(() => {
+    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 get the current search query from the location service',
+          fakeAsync(inject([LocationService], (location: MockLocationService) => {
+      location.search.and.returnValue({ search: 'initial search' });
+      component.ngOnInit();
+      expect(location.search).toHaveBeenCalled();
+      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 trigger a search', () => {
+      const input = fixture.debugElement.query(By.css('input'));
+      spyOn(component, 'doSearch');
+      input.triggerEventHandler('keyup', { });
+      expect(component.doSearch).toHaveBeenCalled();
+    });
+  });
+
+  describe('on focus', () => {
+    it('should trigger the onFocus event', () => {
+      const input = fixture.debugElement.query(By.css('input'));
+      input.nativeElement.value = 'some query (focus)';
+      input.triggerEventHandler('focus', { });
+      expect(host.focusHandler).toHaveBeenCalledWith('some query (focus)');
+    });
+  });
+
+  describe('on click', () => {
+    it('should trigger a search', () => {
+      const input = fixture.debugElement.query(By.css('input'));
+      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
new file mode 100644
index 000000000000..af50c6fd5853
--- /dev/null
+++ b/aio/src/app/search/search-box/search-box.component.ts
@@ -0,0 +1,63 @@
+import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
+import { LocationService } from 'app/shared/location.service';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+/**
+ * This component provides a text box to type a search query that will be sent to the SearchService.
+ *
+ * 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
+ * results had been hidden for some reason.
+ *
+ */
+@Component({
+  selector: 'aio-search-box',
+  template: `<input #searchBox
+    type="search"
+    aria-label="search"
+    placeholder="Search"
+    (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.pipe(distinctUntilChanged(), debounceTime(this.searchDebounce));
+  @Output() onFocus = new EventEmitter<string>();
+
+  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() {
+    const query = this.locationService.search()['search'];
+    if (query) {
+      this.query = query;
+      this.doSearch();
+    }
+  }
+
+  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-worker.js b/aio/src/app/search/search-worker.js
new file mode 100644
index 000000000000..0fc98c1ff888
--- /dev/null
+++ b/aio/src/app/search/search-worker.js
@@ -0,0 +1,102 @@
+'use strict';
+
+/* eslint-env worker */
+/* global importScripts, lunr */
+
+var SEARCH_TERMS_URL = '/generated/docs/app/search-data.json';
+
+// NOTE: This needs to be kept in sync with `ngsw-manifest.json`.
+importScripts('/assets/js/lunr.min.js');
+
+var index;
+var pages /* : SearchInfo */ = {};
+
+// interface SearchInfo {
+//  [key: string]: PageInfo;
+// }
+
+// interface PageInfo {
+//   path: string;
+//   type: string,
+//   titleWords: string;
+//   keyWords: string;
+// }
+
+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(addFn) {
+  return lunr(/** @this */function() {
+    this.ref('path');
+    this.field('titleWords', {boost: 100});
+    this.field('headingWords', {boost: 50});
+    this.field('members', {boost: 40});
+    this.field('keywords', {boost: 20});
+    addFn(this);
+  });
+}
+
+// The worker receives a message to load the index and to query the index
+function handleMessage(message) {
+  var type = message.data.type;
+  var id = message.data.id;
+  var payload = message.data.payload;
+  switch(type) {
+    case 'load-index':
+      makeRequest(SEARCH_TERMS_URL, function(searchInfo) {
+        index = createIndex(loadIndex(searchInfo));
+        self.postMessage({type: type, id: id, payload: true});
+      });
+      break;
+    case 'query-index':
+      self.postMessage({type: type, id: id, payload: {query: payload, results: queryIndex(payload)}});
+      break;
+    default:
+      self.postMessage({type: type, id: id, payload: {error: 'invalid message type'}})
+  }
+}
+
+// Use XHR to make a request to the server
+function makeRequest(url, callback) {
+
+  // The JSON file that is loaded should be an array of PageInfo:
+  var searchDataRequest = new XMLHttpRequest();
+  searchDataRequest.onload = function() {
+    callback(JSON.parse(this.responseText));
+  };
+  searchDataRequest.open('GET', url);
+  searchDataRequest.send();
+}
+
+
+// Create the search index from the searchInfo which contains the information about each page to be indexed
+function loadIndex(searchInfo /*: SearchInfo */) {
+  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 /*: PageInfo */) {
+      index.add(page);
+      pages[page.path] = page;
+    });
+  };
+}
+
+// Query the index and return the processed results
+function queryIndex(query) {
+  try {
+    if (query.length) {
+      // Add a relaxed search in the title for the first word in the query
+      // E.g. if the search is "ngCont guide" then we search for "ngCont guide titleWords:ngCont*"
+      var titleQuery = 'titleWords:*' + query.split(' ', 1)[0] + '*';
+      var results = index.search(query + ' ' + titleQuery);
+      // Map the hits into info about each page to be returned as results
+      return results.map(function(hit) { return pages[hit.ref]; });
+    }
+  } catch(e) {
+    // If the search query cannot be parsed the index throws an error
+    // Log it and recover
+    console.log(e);
+  }
+  return [];
+}
diff --git a/aio/src/app/search/search.service.spec.ts b/aio/src/app/search/search.service.spec.ts
new file mode 100644
index 000000000000..27ededb7bff9
--- /dev/null
+++ b/aio/src/app/search/search.service.spec.ts
@@ -0,0 +1,64 @@
+import { ReflectiveInjector, NgZone } from '@angular/core';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { of } from 'rxjs';
+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(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('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', () => {
+    beforeEach(() => {
+      // We must initialize the service before calling connectSearches
+      service.initWorker('some/url', 1000);
+      // Simulate the index being ready so that searches get sent to the worker
+      (service as any).ready = of(true);
+    });
+
+    it('should trigger a `loadIndex` synchronously (not waiting for the delay)', () => {
+      expect(mockWorker.sendMessage).not.toHaveBeenCalled();
+      service.search('some query').subscribe();
+      expect(mockWorker.sendMessage).toHaveBeenCalledWith('load-index');
+    });
+
+    it('should send a "query-index" message to the worker', () => {
+      service.search('some query').subscribe();
+      expect(mockWorker.sendMessage).toHaveBeenCalledWith('query-index', 'some query');
+    });
+
+    it('should push the response to the returned observable', () => {
+      const mockSearchResults = { results: ['a', 'b'] };
+      let actualSearchResults: any;
+      (mockWorker.sendMessage as jasmine.Spy).and.returnValue(of(mockSearchResults));
+      service.search('some query').subscribe(results => actualSearchResults = results);
+      expect(actualSearchResults).toEqual(mockSearchResults);
+    });
+  });
+});
diff --git a/aio/src/app/search/search.service.ts b/aio/src/app/search/search.service.ts
new file mode 100644
index 000000000000..cd3790040286
--- /dev/null
+++ b/aio/src/app/search/search.service.ts
@@ -0,0 +1,59 @@
+/*
+Copyright 2016 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 http://angular.io/license
+*/
+
+import { NgZone, Injectable } from '@angular/core';
+import { ConnectableObservable, Observable, race, ReplaySubject, timer } from 'rxjs';
+import { concatMap, first, publishReplay } from 'rxjs/operators';
+import { WebWorkerClient } from 'app/shared/web-worker';
+import { SearchResults } from 'app/search/interfaces';
+
+@Injectable()
+export class SearchService {
+  private ready: Observable<boolean>;
+  private searchesSubject = new ReplaySubject<string>(1);
+  private worker: WebWorkerClient;
+  constructor(private zone: NgZone) {}
+
+  /**
+   * 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) {
+    // Wait for the initDelay or the first search
+    const ready = this.ready = race<any>(
+        timer(initDelay),
+        this.searchesSubject.asObservable().pipe(first()),
+      )
+      .pipe(
+        concatMap(() => {
+          // Create the worker and load the index
+          this.worker = WebWorkerClient.create(workerUrl, this.zone);
+          return this.worker.sendMessage<boolean>('load-index');
+        }),
+        publishReplay(1),
+      );
+
+    // Connect to the observable to kick off the timer
+    (ready as ConnectableObservable<boolean>).connect();
+    return ready;
+  }
+
+  /**
+   * Search the index using the given query and emit results on the observable that is returned.
+   * @param query The query to run against the index.
+   * @returns an observable collection of search results
+   */
+  search(query: string): Observable<SearchResults> {
+    // Trigger the searches subject to override the init delay timer
+    this.searchesSubject.next(query);
+    // Once the index has loaded, switch to listening to the searches coming in.
+    return this.ready.pipe(concatMap(() => this.worker.sendMessage<SearchResults>('query-index', 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 000000000000..dd0ee2c26517
--- /dev/null
+++ b/aio/src/app/shared/attribute-utils.spec.ts
@@ -0,0 +1,142 @@
+import { ElementRef } from '@angular/core';
+
+import { AttrMap, 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', () => {
+    const 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(expectedMap);
+    });
+
+    it('should get attr map from getAttrs(elementRef)', () => {
+      const actual = getAttrs(new ElementRef(testEl));
+      expect(actual).toEqual(expectedMap);
+    });
+  });
+
+  describe('getAttrValue', () => {
+    let attrMap: AttrMap;
+
+    beforeEach(() => {
+      attrMap = getAttrs(testEl);
+    });
+
+    it('should return empty string for attribute "a"', () => {
+      expect(getAttrValue(attrMap, 'a')).toBe('');
+    });
+
+    it('should return empty string 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 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 for non-existent attributes', () => {
+      expect(getAttrValue(attrMap, 'x')).toBeUndefined();
+      expect(getAttrValue(attrMap, '')).toBeUndefined();
+      expect(getAttrValue(attrMap, ['', 'x'])).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 000000000000..758aaa422aeb
--- /dev/null
+++ b/aio/src/app/shared/attribute-utils.ts
@@ -0,0 +1,54 @@
+// Utilities for processing HTML element attributes
+import { ElementRef } from '@angular/core';
+
+export interface AttrMap {
+  [key: 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): AttrMap {
+  const attrs: NamedNodeMap = el instanceof ElementRef ? el.nativeElement.attributes : el.attributes;
+  const attrMap: AttrMap = {};
+  for (const attr of attrs as any as Attr[] /* cast due to https://github.com/Microsoft/TypeScript/issues/2695 */) {
+    attrMap[attr.name.toLowerCase()] = 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: AttrMap, attr: string | string[]): string | undefined {
+  const key = (typeof attr === 'string')
+      ? attr
+      : attr.find(a => attrs.hasOwnProperty(a.toLowerCase()));
+
+  return (key === undefined) ? undefined : attrs[key.toLowerCase()];
+}
+
+/**
+ * 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 | undefined, def: boolean = false) {
+  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/copier.service.ts b/aio/src/app/shared/copier.service.ts
new file mode 100644
index 000000000000..e00a750ec2cc
--- /dev/null
+++ b/aio/src/app/shared/copier.service.ts
@@ -0,0 +1,66 @@
+/**
+ * This class is based on the code in the following projects:
+ *
+ * - https://github.com/zenorocha/select
+ * - https://github.com/zenorocha/clipboard.js/
+ *
+ * Both released under MIT license - © Zeno Rocha
+ */
+
+
+export class CopierService {
+    private fakeElem: HTMLTextAreaElement|null;
+
+    /**
+     * Creates a fake textarea element, sets its value from `text` property,
+     * and makes a selection on it.
+     */
+    createFake(text: string) {
+      const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+
+      // Create a fake element to hold the contents to copy
+      this.fakeElem = document.createElement('textarea');
+
+      // Prevent zooming on iOS
+      this.fakeElem.style.fontSize = '12pt';
+
+      // Reset box model
+      this.fakeElem.style.border = '0';
+      this.fakeElem.style.padding = '0';
+      this.fakeElem.style.margin = '0';
+
+      // Move element out of screen horizontally
+      this.fakeElem.style.position = 'absolute';
+      this.fakeElem.style[ isRTL ? 'right' : 'left' ] = '-9999px';
+
+      // Move element to the same position vertically
+      const yPosition = window.pageYOffset || document.documentElement.scrollTop;
+      this.fakeElem.style.top = yPosition + 'px';
+
+      this.fakeElem.setAttribute('readonly', '');
+      this.fakeElem.value = text;
+
+      document.body.appendChild(this.fakeElem);
+
+      this.fakeElem.select();
+      this.fakeElem.setSelectionRange(0, this.fakeElem.value.length);
+    }
+
+    removeFake() {
+      if (this.fakeElem) {
+        document.body.removeChild(this.fakeElem);
+        this.fakeElem = null;
+      }
+    }
+
+    copyText(text: string) {
+      try {
+        this.createFake(text);
+        return document.execCommand('copy');
+      } catch (err) {
+        return false;
+      } finally {
+        this.removeFake();
+      }
+    }
+}
diff --git a/aio/src/app/shared/current-date.ts b/aio/src/app/shared/current-date.ts
new file mode 100644
index 000000000000..ab02331bff4d
--- /dev/null
+++ b/aio/src/app/shared/current-date.ts
@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+
+export const CurrentDateToken = new InjectionToken('CurrentDate');
+export function currentDateProvider() { return new Date(); }
diff --git a/aio/src/app/shared/custom-icon-registry.spec.ts b/aio/src/app/shared/custom-icon-registry.spec.ts
new file mode 100644
index 000000000000..6cfdbc4b4c11
--- /dev/null
+++ b/aio/src/app/shared/custom-icon-registry.spec.ts
@@ -0,0 +1,45 @@
+import { MatIconRegistry } from '@angular/material';
+import { CustomIconRegistry, SvgIconInfo } from './custom-icon-registry';
+
+describe('CustomIconRegistry', () => {
+  it('should get the SVG element for a preloaded icon from the cache', () => {
+    const mockHttp: any = {};
+    const mockSanitizer: any = {};
+    const mockDocument: 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 CustomIconRegistry(mockHttp, mockSanitizer, mockDocument, svgIcons);
+    let svgElement: SVGElement|undefined;
+    registry.getNamedSvgIcon('test_icon').subscribe(el => svgElement = el);
+    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 mockDocument: 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(MatIconRegistry.prototype, 'getNamedSvgIcon');
+
+    const registry = new CustomIconRegistry(mockHttp, mockSanitizer, mockDocument, svgIcons);
+
+    registry.getNamedSvgIcon('other_icon');
+    expect(MatIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', undefined);
+
+    registry.getNamedSvgIcon('other_icon', 'foo');
+    expect(MatIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', 'foo');
+  });
+});
+
+function createSvg(svgSrc: string): SVGElement {
+  const div = document.createElement('div');
+  div.innerHTML = svgSrc;
+  return div.querySelector('svg')!;
+}
diff --git a/aio/src/app/shared/custom-icon-registry.ts b/aio/src/app/shared/custom-icon-registry.ts
new file mode 100644
index 000000000000..2e3792b968ca
--- /dev/null
+++ b/aio/src/app/shared/custom-icon-registry.ts
@@ -0,0 +1,60 @@
+import { InjectionToken, Inject, Injectable, Optional } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { of } from 'rxjs';
+import { MatIconRegistry } from '@angular/material/icon';
+import { HttpClient } from '@angular/common/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 `CustomIconRegistry`
+ * 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 CustomIconRegistry extends MatIconRegistry {
+  private preloadedSvgElements: SvgIconMap = {};
+
+  constructor(http: HttpClient, sanitizer: DomSanitizer, @Optional() @Inject(DOCUMENT) document,
+              @Inject(SVG_ICONS) svgIcons: SvgIconInfo[]) {
+    super(http, sanitizer, document);
+    this.loadSvgElements(svgIcons);
+  }
+
+  getNamedSvgIcon(iconName: string, namespace?: string) {
+    if (this.preloadedSvgElements[iconName]) {
+      return of(this.preloadedSvgElements[iconName].cloneNode(true) as SVGElement);
+    }
+    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/deployment.service.spec.ts b/aio/src/app/shared/deployment.service.spec.ts
new file mode 100644
index 000000000000..34df4ec92e95
--- /dev/null
+++ b/aio/src/app/shared/deployment.service.spec.ts
@@ -0,0 +1,32 @@
+import { ReflectiveInjector } from '@angular/core';
+import { environment } from 'environments/environment';
+import { LocationService } from 'app/shared/location.service';
+import { MockLocationService } from 'testing/location.service';
+import { Deployment } from './deployment.service';
+
+describe('Deployment service', () => {
+  describe('mode', () => {
+    it('should get the mode from the environment', () => {
+      environment.mode = 'foo';
+      const deployment = getInjector().get(Deployment);
+      expect(deployment.mode).toEqual('foo');
+    });
+
+    it('should get the mode from the `mode` query parameter if available', () => {
+      const injector = getInjector();
+
+      const locationService: MockLocationService = injector.get(LocationService);
+      locationService.search.and.returnValue({ mode: 'bar' });
+
+      const deployment = injector.get(Deployment);
+      expect(deployment.mode).toEqual('bar');
+    });
+  });
+});
+
+function getInjector() {
+  return ReflectiveInjector.resolveAndCreate([
+    Deployment,
+    { provide: LocationService, useFactory: () => new MockLocationService('') }
+  ]);
+}
diff --git a/aio/src/app/shared/deployment.service.ts b/aio/src/app/shared/deployment.service.ts
new file mode 100644
index 000000000000..6a3f0ee79a94
--- /dev/null
+++ b/aio/src/app/shared/deployment.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { LocationService } from 'app/shared/location.service';
+import { environment } from 'environments/environment';
+
+/**
+ * Information about the deployment of this application.
+ */
+@Injectable()
+export class Deployment {
+  /**
+   * The deployment mode set from the environment provided at build time;
+   * or overridden by the `mode` query parameter: e.g. `...?mode=archive`
+   */
+  mode: string = this.location.search()['mode'] || environment.mode;
+
+  constructor(private location: LocationService) {}
+};
diff --git a/aio/src/app/shared/ga.service.spec.ts b/aio/src/app/shared/ga.service.spec.ts
new file mode 100644
index 000000000000..ffd95fbc45b9
--- /dev/null
+++ b/aio/src/app/shared/ga.service.spec.ts
@@ -0,0 +1,94 @@
+import { ReflectiveInjector } from '@angular/core';
+
+import { GaService } from 'app/shared/ga.service';
+import { WindowToken } from 'app/shared/window';
+
+describe('GaService', () => {
+  let gaService: GaService;
+  let injector: ReflectiveInjector;
+  let gaSpy: jasmine.Spy;
+  let mockWindow: any;
+
+  beforeEach(() => {
+    gaSpy = jasmine.createSpy('ga');
+    mockWindow = { ga: gaSpy };
+    injector = ReflectiveInjector.resolveAndCreate([GaService, { provide: WindowToken, useFactory: () => mockWindow }]);
+    gaService = injector.get(GaService);
+  });
+
+  it('should initialize ga with "create" when constructed', () => {
+    const first = gaSpy.calls.first().args;
+    expect(first[0]).toBe('create');
+  });
+
+  describe('#locationChanged(url)', () => {
+    it('should send page to url w/ leading slash', () => {
+      gaService.locationChanged('testUrl');
+      expect(gaSpy).toHaveBeenCalledWith('set', 'page', '/testUrl');
+      expect(gaSpy).toHaveBeenCalledWith('send', 'pageview');
+    });
+  });
+
+  describe('#sendPage(url)', () => {
+    it('should set page to url w/ leading slash', () => {
+      gaService.sendPage('testUrl');
+      expect(gaSpy).toHaveBeenCalledWith('set', 'page', '/testUrl');
+    });
+
+    it('should send "pageview" ', () => {
+      gaService.sendPage('testUrl');
+      expect(gaSpy).toHaveBeenCalledWith('send', 'pageview');
+    });
+
+    it('should not send twice with same URL, back-to-back', () => {
+      gaService.sendPage('testUrl');
+      gaSpy.calls.reset();
+      gaService.sendPage('testUrl');
+      expect(gaSpy).not.toHaveBeenCalled();
+    });
+
+    it('should send again even if only 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');
+      expect(gaSpy).toHaveBeenCalledWith('set', 'page', '/testUrl#one');
+      expect(gaSpy).toHaveBeenCalledWith('send', 'pageview');
+      gaSpy.calls.reset();
+      gaService.sendPage('testUrl#two');
+      expect(gaSpy).toHaveBeenCalledWith('set', 'page', '/testUrl#two');
+      expect(gaSpy).toHaveBeenCalledWith('send', 'pageview');
+    });
+
+    it('should send same URL twice when other intervening URL', () => {
+      gaService.sendPage('testUrl');
+      expect(gaSpy).toHaveBeenCalledWith('set', 'page', '/testUrl');
+      expect(gaSpy).toHaveBeenCalledWith('send', 'pageview');
+      gaSpy.calls.reset();
+      gaService.sendPage('testUrl2');
+      expect(gaSpy).toHaveBeenCalledWith('set', 'page', '/testUrl2');
+      expect(gaSpy).toHaveBeenCalledWith('send', 'pageview');
+      gaSpy.calls.reset();
+      gaService.sendPage('testUrl');
+      expect(gaSpy).toHaveBeenCalledWith('set', 'page', '/testUrl');
+      expect(gaSpy).toHaveBeenCalledWith('send', 'pageview');
+    });
+  });
+
+  describe('sendEvent', () => {
+    it('should send "event" with associated data', () => {
+      gaService.sendEvent('some source', 'some campaign', 'a label', 45);
+      expect(gaSpy).toHaveBeenCalledWith('send', 'event', 'some source', 'some campaign', 'a label', 45);
+    });
+  });
+
+  it('should support replacing the `window.ga` function', () => {
+    const gaSpy2 = jasmine.createSpy('new ga');
+    mockWindow.ga = gaSpy2;
+    gaSpy.calls.reset();
+
+    gaService.sendPage('testUrl');
+    expect(gaSpy).not.toHaveBeenCalled();
+    expect(gaSpy2).toHaveBeenCalledWith('set', 'page', '/testUrl');
+    expect(gaSpy2).toHaveBeenCalledWith('send', 'pageview');
+  });
+});
diff --git a/aio/src/app/shared/ga.service.ts b/aio/src/app/shared/ga.service.ts
new file mode 100644
index 000000000000..65318f2a20d7
--- /dev/null
+++ b/aio/src/app/shared/ga.service.ts
@@ -0,0 +1,42 @@
+import { Inject, Injectable } from '@angular/core';
+
+import { environment } from '../../environments/environment';
+import { WindowToken } from 'app/shared/window';
+
+@Injectable()
+/**
+ * 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`).
+ */
+export class GaService {
+
+  private previousUrl: string;
+
+  constructor(@Inject(WindowToken) private window: Window) {
+    this.ga('create', environment['gaId'] , 'auto');
+  }
+
+  locationChanged(url: string) {
+    this.sendPage(url);
+  }
+
+  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);
+    this.ga('send', 'pageview');
+  }
+
+  sendEvent(source: string, action: string, label?: string, value?: number) {
+    this.ga('send', 'event', source, action, label, value);
+  }
+
+  ga(...args: any[]) {
+    const gaFn = (this.window as any)['ga'];
+    if (gaFn) {
+      gaFn(...args);
+    }
+  }
+}
diff --git a/aio/src/app/shared/location.service.spec.ts b/aio/src/app/shared/location.service.spec.ts
new file mode 100644
index 000000000000..cabdb466bc8a
--- /dev/null
+++ b/aio/src/app/shared/location.service.spec.ts
@@ -0,0 +1,612 @@
+import { ReflectiveInjector } from '@angular/core';
+import { Location, LocationStrategy, PlatformLocation } from '@angular/common';
+import { MockLocationStrategy } from '@angular/common/testing';
+import { Subject } from 'rxjs';
+
+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([
+        LocationService,
+        Location,
+        { provide: GaService, useClass: TestGaService },
+        { provide: LocationStrategy, useClass: MockLocationStrategy },
+        { provide: PlatformLocation, useClass: MockPlatformLocation },
+        { provide: SwUpdatesService, useClass: MockSwUpdatesService }
+    ]);
+
+    location  = injector.get(LocationStrategy);
+    service  = injector.get(LocationService);
+    swUpdates  = injector.get(SwUpdatesService);
+  });
+
+  describe('currentUrl', () => {
+    it('should emit the latest url 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 initialUrl: string|undefined;
+      service.currentUrl.subscribe(url => initialUrl = url);
+      expect(initialUrl).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 urls: string[] = [];
+      service.currentUrl.subscribe(url => urls.push(url));
+
+      location.simulatePopState('/next-url1');
+      location.simulatePopState('/next-url2');
+      location.simulatePopState('/next-url3');
+
+      expect(urls).toEqual([
+        'initial-url3',
+        'next-url1',
+        'next-url2',
+        'next-url3'
+      ]);
+    });
+
+    it('should pass only the latest and later urls to each subscriber', () => {
+      location.simulatePopState('/initial-url1');
+      location.simulatePopState('/initial-url2');
+      location.simulatePopState('/initial-url3');
+
+      const urls1: string[] = [];
+      service.currentUrl.subscribe(url => urls1.push(url));
+
+      location.simulatePopState('/next-url1');
+      location.simulatePopState('/next-url2');
+
+      const urls2: string[] = [];
+      service.currentUrl.subscribe(url => urls2.push(url));
+
+      location.simulatePopState('/next-url3');
+
+      expect(urls1).toEqual([
+        'initial-url3',
+        'next-url1',
+        '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|undefined;
+
+      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|undefined;
+      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', () => {
+      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 urls: string[] = [];
+      service.go('some-initial-url');
+
+      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|undefined;
+
+      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 empty URL string', () => {
+        const initialUrl = 'some/url';
+        const goExternalSpy = spyOn(service, 'goExternal');
+        let url: string|undefined;
+
+        service.go(initialUrl);
+        service.currentUrl.subscribe(u => url = u);
+
+        service.go('');
+        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|undefined;
+      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', () => {
+      location.simulatePopState('a/b/c?foo=bar&moo=car');
+      expect(service.search()).toEqual({ foo: 'bar', moo: 'car' });
+    });
+
+    it('should cope with an empty query', () => {
+      location.simulatePopState('a/b/c');
+      expect(service.search()).toEqual({ });
+
+      location.simulatePopState('x/y/z?');
+      expect(service.search()).toEqual({ });
+
+      location.simulatePopState('x/y/z?x=');
+      expect(service.search()).toEqual({ x: '' });
+
+      location.simulatePopState('x/y/z?x');
+      expect(service.search()).toEqual({ x: undefined });
+    });
+
+    it('should URL decode query values', () => {
+      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', () => {
+      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', () => {
+      spyOn(location, 'path').and.callThrough();
+      service.search();
+      expect(location.path).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('setSearch', () => {
+    let platformLocation: MockPlatformLocation;
+
+    beforeEach(() => {
+      platformLocation = injector.get(PlatformLocation);
+    });
+
+    it('should call replaceState on PlatformLocation', () => {
+      const params = {};
+      service.setSearch('Some label', params);
+      expect(platformLocation.replaceState).toHaveBeenCalledWith(jasmine.any(Object), 'Some label', 'a/b/c');
+    });
+
+    it('should convert the params to a query string', () => {
+      const params = { foo: 'bar', moo: 'car' };
+      service.setSearch('Some label', params);
+      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 params = { query: 'a&b+c d' };
+      service.setSearch('', params);
+      const [, query] = platformLocation.replaceState.calls.mostRecent().args[2].split('?');
+      expect(query).toContain('query=a%26b%2Bc%20d');
+    });
+
+    it('should URL encode param keys', () => {
+      const params = { 'a&b+c d': 'value' };
+      service.setSearch('', params);
+      const [, query] = platformLocation.replaceState.calls.mostRecent().args[2].split('?');
+      expect(query).toContain('a%26b%2Bc%20d=value');
+    });
+  });
+
+  describe('handleAnchorClick', () => {
+    let anchor: HTMLAnchorElement;
+
+    beforeEach(() => {
+      anchor = document.createElement('a');
+      spyOn(service, 'go');
+    });
+
+    describe('should try to navigate with go() when anchor clicked for', () => {
+      it('relative local url', () => {
+        anchor.href = 'some/local/url';
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).toHaveBeenCalledWith('/some/local/url');
+        expect(result).toBe(false);
+      });
+
+      it('absolute local url', () => {
+        anchor.href = '/some/local/url';
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).toHaveBeenCalledWith('/some/local/url');
+        expect(result).toBe(false);
+      });
+
+      it('local url with query params', () => {
+        anchor.href = '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('local url with hash fragment', () => {
+        anchor.href = 'some/local/url#somefragment';
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).toHaveBeenCalledWith('/some/local/url#somefragment');
+        expect(result).toBe(false);
+      });
+
+      it('local url with query params and hash fragment', () => {
+        anchor.href = '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('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';
+        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);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+      });
+
+      it('mouse button is not zero (middle or right)', () => {
+        anchor.href = 'some/local/url';
+        const result = service.handleAnchorClick(anchor, 1, false, false);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+      });
+
+      it('ctrl key is pressed', () => {
+        anchor.href = 'some/local/url';
+        const result = service.handleAnchorClick(anchor, 0, true, false);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+      });
+
+      it('meta key is pressed', () => {
+        anchor.href = 'some/local/url';
+        const result = service.handleAnchorClick(anchor, 0, false, true);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+      });
+
+      it('anchor has (non-_self) target', () => {
+        anchor.href = 'some/local/url';
+        anchor.target = '_blank';
+        let result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+
+        anchor.target = '_parent';
+        result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+
+        anchor.target = '_top';
+        result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+
+        anchor.target = 'other-frame';
+        result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+
+        anchor.target = '_self';
+        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;
+
+    beforeEach(() => {
+      const gaService = injector.get(GaService);
+      gaLocationChanged = gaService.locationChanged;
+      // execute currentPath observable so that gaLocationChanged is called
+      service.currentPath.subscribe();
+    });
+
+    it('should call locationChanged with initial URL', () => {
+      const initialUrl = location.path().replace(/^\/+/, '');  // strip leading slashes
+
+      expect(gaLocationChanged.calls.count()).toBe(1, 'gaService.locationChanged');
+      const args = gaLocationChanged.calls.first().args;
+      expect(args[0]).toBe(initialUrl);
+    });
+
+    it('should call locationChanged when `go` to a page', () => {
+      service.go('some-new-url');
+      expect(gaLocationChanged.calls.count()).toBe(2, 'gaService.locationChanged');
+      const args = gaLocationChanged.calls.argsFor(1);
+      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', () => {
+      location.simulatePopState('/next-url');
+
+      expect(gaLocationChanged.calls.count()).toBe(2, 'gaService.locationChanged');
+      const args = gaLocationChanged.calls.argsFor(1);
+      expect(args[0]).toBe('next-url');
+    });
+
+  });
+
+});
+
+/// Test Helpers ///
+class MockPlatformLocation {
+  pathname = 'a/b/c';
+  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
new file mode 100644
index 000000000000..a200774e58b7
--- /dev/null
+++ b/aio/src/app/shared/location.service.ts
@@ -0,0 +1,149 @@
+import { Injectable } from '@angular/core';
+import { Location, PlatformLocation } from '@angular/common';
+
+import { ReplaySubject } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
+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 ReplaySubject<string>(1);
+  private swUpdateActivated = false;
+
+  currentUrl = this.urlSubject
+    .pipe(map(url => this.stripSlashes(url)));
+
+  currentPath = this.currentUrl.pipe(
+    map(url => (url.match(/[^?#]*/) || [])[0]),  // strip query and hash
+    tap(path => this.gaService.locationChanged(path)),
+  );
+
+  constructor(
+    private gaService: GaService,
+    private location: Location,
+    private platformLocation: PlatformLocation,
+    swUpdates: SwUpdatesService) {
+
+    this.urlSubject.next(location.path(true));
+
+    this.location.subscribe(state => {
+      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|null|undefined) {
+    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);
+    }
+  }
+
+  goExternal(url: string) {
+    window.location.assign(url);
+  }
+
+  replace(url: string) {
+    window.location.replace(url);
+  }
+
+  private stripSlashes(url: string) {
+    return url.replace(/^\/+/, '').replace(/\/+(\?|#|$)/, '$1');
+  }
+
+  search() {
+    const search: { [index: string]: string|undefined; } = {};
+    const path = this.location.path();
+    const q = path.indexOf('?');
+    if (q > -1) {
+      try {
+          const params = path.substr(q + 1).split('&');
+          params.forEach(p => {
+            const pair = p.split('=');
+            if (pair[0]) {
+              search[decodeURIComponent(pair[0])] = pair[1] && decodeURIComponent(pair[1]);
+            }
+          });
+      } catch (e) { /* don't care */ }
+    }
+    return search;
+  }
+
+  setSearch(label: string, params: { [key: string]: string|undefined}) {
+    const search = Object.keys(params).reduce((acc, key) => {
+      const value = params[key];
+      return (value === undefined) ? acc :
+        acc += (acc ? '&' : '?') + `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    }, '');
+
+    this.platformLocation.replaceState({}, label, this.platformLocation.pathname + search);
+  }
+
+  /**
+   * 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()`
+   * and tell the browser not to handle the event.
+   *
+   * In most apps you might do this in a `LinkDirective` attached to anchors but in this app
+   * we have a special situation where the `DocViewerComponent` is displaying semi-static
+   * content that cannot contain directives. So all the links in that content would not be
+   * able to use such a `LinkDirective`. Instead we are adding a click handler to the
+   * `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 = 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;
+    }
+
+    // If there is a target and it is not `_self` then we take this
+    // as a signal that it doesn't want to be intercepted.
+    // TODO: should we also allow an explicit `_self` target to opt-out?
+    const anchorTarget = anchor.target;
+    if (anchorTarget && anchorTarget !== '_self') {
+      return true;
+    }
+
+    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;
+
+    // don't navigate if external link or has extension
+    if ( anchor.href !== this.urlParser.href ||
+         !/\/[^/.]*$/.test(pathname) ) {
+      return true;
+    }
+
+    // approved for navigation
+    this.go(relativeUrl);
+    return false;
+  }
+}
diff --git a/aio/src/app/shared/logger.service.spec.ts b/aio/src/app/shared/logger.service.spec.ts
new file mode 100644
index 000000000000..d676cc4e3769
--- /dev/null
+++ b/aio/src/app/shared/logger.service.spec.ts
@@ -0,0 +1,47 @@
+import { ErrorHandler, ReflectiveInjector } from '@angular/core';
+import { Logger } from './logger.service';
+
+describe('logger service', () => {
+  let logSpy: jasmine.Spy;
+  let warnSpy: jasmine.Spy;
+  let logger: Logger;
+  let errorHandler: ErrorHandler;
+
+  beforeEach(() => {
+    logSpy = spyOn(console, 'log');
+    warnSpy = spyOn(console, 'warn');
+    const injector = ReflectiveInjector.resolveAndCreate([
+      Logger,
+      { provide: ErrorHandler, useClass: MockErrorHandler }
+    ]);
+    logger = injector.get(Logger);
+    errorHandler = injector.get(ErrorHandler);
+  });
+
+  describe('log', () => {
+    it('should delegate to console.log', () => {
+      logger.log('param1', 'param2', 'param3');
+      expect(logSpy).toHaveBeenCalledWith('param1', 'param2', 'param3');
+    });
+  });
+
+  describe('warn', () => {
+    it('should delegate to console.warn', () => {
+      logger.warn('param1', 'param2', 'param3');
+      expect(warnSpy).toHaveBeenCalledWith('param1', 'param2', 'param3');
+    });
+  });
+
+  describe('error', () => {
+    it('should delegate to ErrorHandler', () => {
+      const err = new Error('some error message');
+      logger.error(err);
+      expect(errorHandler.handleError).toHaveBeenCalledWith(err);
+    });
+  });
+});
+
+
+class MockErrorHandler implements ErrorHandler {
+  handleError = jasmine.createSpy('handleError');
+}
diff --git a/aio/src/app/shared/logger.service.ts b/aio/src/app/shared/logger.service.ts
new file mode 100644
index 000000000000..2a86d766ea75
--- /dev/null
+++ b/aio/src/app/shared/logger.service.ts
@@ -0,0 +1,23 @@
+import { ErrorHandler, Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+
+
+@Injectable()
+export class Logger {
+
+  constructor(private errorHandler: ErrorHandler) {}
+
+  log(value: any, ...rest: any[]) {
+    if (!environment.production) {
+      console.log(value, ...rest);
+    }
+  }
+
+  error(error: Error) {
+    this.errorHandler.handleError(error);
+  }
+
+  warn(value: any, ...rest: any[]) {
+    console.warn(value, ...rest);
+  }
+}
diff --git a/aio/src/app/shared/reporting-error-handler.spec.ts b/aio/src/app/shared/reporting-error-handler.spec.ts
new file mode 100644
index 000000000000..e8aef4440bcd
--- /dev/null
+++ b/aio/src/app/shared/reporting-error-handler.spec.ts
@@ -0,0 +1,64 @@
+import { ErrorHandler, ReflectiveInjector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { WindowToken } from 'app/shared/window';
+import { AppModule } from 'app/app.module';
+
+import { ReportingErrorHandler } from './reporting-error-handler';
+
+describe('ReportingErrorHandler service', () => {
+  let handler: ReportingErrorHandler;
+  let superHandler: jasmine.Spy;
+  let onerrorSpy: jasmine.Spy;
+
+  beforeEach(() => {
+    onerrorSpy = jasmine.createSpy('onerror');
+    superHandler = spyOn(ErrorHandler.prototype, 'handleError');
+
+    const injector = ReflectiveInjector.resolveAndCreate([
+      { provide: ErrorHandler, useClass: ReportingErrorHandler },
+      { provide: WindowToken, useFactory: () => ({ onerror: onerrorSpy }) }
+    ]);
+    handler = injector.get(ErrorHandler);
+  });
+
+  it('should be registered on the AppModule', () => {
+    handler = TestBed.configureTestingModule({ imports: [AppModule] }).get(ErrorHandler);
+    expect(handler).toEqual(jasmine.any(ReportingErrorHandler));
+  });
+
+  describe('handleError', () => {
+    it('should call the super class handleError', () => {
+      const error = new Error();
+      handler.handleError(error);
+      expect(superHandler).toHaveBeenCalledWith(error);
+    });
+
+    it('should cope with the super handler throwing an error', () => {
+      const error = new Error('initial error');
+      superHandler.and.throwError('super handler error');
+      handler.handleError(error);
+
+      expect(onerrorSpy).toHaveBeenCalledTimes(2);
+
+      // Error from super handler is reported first
+      expect(onerrorSpy.calls.argsFor(0)[0]).toEqual('super handler error');
+      expect(onerrorSpy.calls.argsFor(0)[4]).toEqual(jasmine.any(Error));
+
+      // Then error from initial exception
+      expect(onerrorSpy.calls.argsFor(1)[0]).toEqual('initial error');
+      expect(onerrorSpy.calls.argsFor(1)[4]).toEqual(error);
+    });
+
+    it('should send an error object to window.onerror', () => {
+      const error = new Error('this is an error message');
+      handler.handleError(error);
+      expect(onerrorSpy).toHaveBeenCalledWith(error.message, undefined, undefined, undefined, error);
+    });
+
+    it('should send an error string to window.onerror', () => {
+      const error = 'this is an error message';
+      handler.handleError(error);
+      expect(onerrorSpy).toHaveBeenCalledWith(error);
+    });
+  });
+});
diff --git a/aio/src/app/shared/reporting-error-handler.ts b/aio/src/app/shared/reporting-error-handler.ts
new file mode 100644
index 000000000000..6289d6e05788
--- /dev/null
+++ b/aio/src/app/shared/reporting-error-handler.ts
@@ -0,0 +1,37 @@
+import { ErrorHandler, Inject, Injectable } from '@angular/core';
+import { WindowToken } from './window';
+
+/**
+ * Extend the default error handling to report errors to an external service - e.g Google Analytics.
+ *
+ * Errors outside the Angular application may also be handled by `window.onerror`.
+ */
+@Injectable()
+export class ReportingErrorHandler extends ErrorHandler {
+
+  constructor(@Inject(WindowToken) private window: Window) {
+    super();
+  }
+
+  /**
+   * Send error info to Google Analytics, in addition to the default handling.
+   * @param error Information about the error.
+   */
+  handleError(error: string | Error) {
+
+    try {
+      super.handleError(error);
+    } catch (e) {
+      this.reportError(e);
+    }
+    this.reportError(error);
+  }
+
+  private reportError(error: string | Error) {
+    if (typeof error === 'string') {
+      this.window.onerror(error);
+    } else {
+      this.window.onerror(error.message, undefined, undefined, undefined, error);
+    }
+  }
+}
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 000000000000..675d1190d314
--- /dev/null
+++ b/aio/src/app/shared/scroll-spy.service.spec.ts
@@ -0,0 +1,517 @@
+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, 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|null)[];
+
+    const activeIndices = () => activeItems.map(x => x && x.index);
+
+    beforeEach(() => {
+      const tops = [50, 150, 100];
+
+      spyOn(ScrollSpiedElement.prototype, 'calculateTop').and.callFake(
+        function(this: ScrollSpiedElement, scrollTop: number, topOffset: number) {
+        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);
+  });
+
+
+  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();
+      expect(calibrateSpy).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 000000000000..80c72e2835f4
--- /dev/null
+++ b/aio/src/app/shared/scroll-spy.service.ts
@@ -0,0 +1,229 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { fromEvent, Observable, ReplaySubject, Subject } from 'rxjs';
+import { auditTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+
+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|undefined;
+
+    if (scrollTop + 1 >= maxScrollTop) {
+      activeItem = this.spiedElements[0];
+    } else {
+      this.spiedElements.some(spiedElem => {
+        if (spiedElem.top <= scrollTop) {
+          activeItem = spiedElem;
+          return true;
+        }
+        return false;
+      });
+    }
+
+    this.activeScrollItem.next(activeItem || null);
+  }
+}
+
+@Injectable()
+export class ScrollSpyService {
+  private spiedElementGroups: ScrollSpiedElementGroup[] = [];
+  private onStopListening = new Subject();
+  private resizeEvents = fromEvent(window, 'resize').pipe(auditTime(300), takeUntil(this.onStopListening));
+  private scrollEvents = fromEvent(window, 'scroll').pipe(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().pipe(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 000000000000..75dd14120b80
--- /dev/null
+++ b/aio/src/app/shared/scroll.service.spec.ts
@@ -0,0 +1,213 @@
+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: string) => 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();
+    });
+
+    it('should scroll to the element whose id matches the hash with encoded characters', () => {
+      const element = new MockElement();
+      location.hash = '%F0%9F%91%8D'; // 👍
+      document.getElementById.and.returnValue(element);
+
+      scrollService.scroll();
+      expect(document.getElementById).toHaveBeenCalledWith('👍');
+      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: string) => 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 000000000000..764433b747ff
--- /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';
+
+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('.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|null) {
+    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 decodeURIComponent(this.location.hash.replace(/^#/, ''));
+  }
+}
diff --git a/aio/src/app/shared/search-results/search-results.component.html b/aio/src/app/shared/search-results/search-results.component.html
new file mode 100644
index 000000000000..fedce7b829bb
--- /dev/null
+++ b/aio/src/app/shared/search-results/search-results.component.html
@@ -0,0 +1,28 @@
+<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/shared/search-results/search-results.component.spec.ts b/aio/src/app/shared/search-results/search-results.component.spec.ts
new file mode 100644
index 000000000000..602763b9d705
--- /dev/null
+++ b/aio/src/app/shared/search-results/search-results.component.spec.ts
@@ -0,0 +1,181 @@
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SearchResult } from 'app/search/interfaces';
+import { SearchResultsComponent } from './search-results.component';
+
+describe('SearchResultsComponent', () => {
+  let component: SearchResultsComponent;
+  let fixture: ComponentFixture<SearchResultsComponent>;
+
+  /** 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: SearchResult, r: SearchResult) {
+    return l.title!.toUpperCase() > r.title!.toUpperCase() ? 1 : -1;
+  }
+
+  function setSearchResults(query: string, results: SearchResult[]) {
+    component.searchResults = {query, results};
+    component.ngOnChanges({});
+    fixture.detectChanges();
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchResultsComponent ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchResultsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should map the search results into groups based on their containing folder', () => {
+    setSearchResults('', getTestResults(3));
+    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 special case results that are top level folders', () => {
+    setSearchResults('', [
+      { 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();
+    setSearchResults('', 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();
+    setSearchResults('', 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();
+    setSearchResults('', 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: '' }
+    ];
+
+    setSearchResults('', results);
+    expect(component.searchAreas).toEqual([
+      { name: 'other', priorityPages: [
+        { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
+      ], pages: [] }
+    ]);
+  });
+
+  it('should omit search results with no title', () => {
+    const results = [
+      { path: 'news', title: '', type: 'marketing', keywords: '', titleWords: '' }
+    ];
+
+    setSearchResults('something', results);
+    expect(component.searchAreas).toEqual([]);
+  });
+
+  it('should display "Searching ..." while waiting for search results', () => {
+    fixture.detectChanges();
+    expect(getText()).toContain('Searching ...');
+  });
+
+  describe('when a search result anchor is clicked', () => {
+    let searchResult: SearchResult;
+    let selected: SearchResult|null;
+    let anchor: DebugElement;
+
+    beforeEach(() => {
+      component.resultSelected.subscribe((result: SearchResult) => selected = result);
+
+      selected = null;
+      searchResult = { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' };
+      setSearchResults('something', [searchResult]);
+
+      fixture.detectChanges();
+      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(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', () => {
+      setSearchResults('something', []);
+      expect(getText()).toContain('No results');
+    });
+  });
+});
diff --git a/aio/src/app/shared/search-results/search-results.component.ts b/aio/src/app/shared/search-results/search-results.component.ts
new file mode 100644
index 000000000000..9423fa9556d5
--- /dev/null
+++ b/aio/src/app/shared/search-results/search-results.component.ts
@@ -0,0 +1,77 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { SearchResult, SearchResults, SearchArea } from 'app/search/interfaces';
+
+/**
+ * A component to display search results in groups
+ */
+@Component({
+  selector: 'aio-search-results',
+  templateUrl: './search-results.component.html',
+})
+export class SearchResultsComponent implements OnChanges {
+
+  /**
+   * The results to display
+   */
+  @Input()
+  searchResults: SearchResults;
+
+  /**
+   * Emitted when the user selects a search result
+   */
+  @Output()
+  resultSelected = new EventEmitter<SearchResult>();
+
+  readonly defaultArea = 'other';
+  notFoundMessage = 'Searching ...';
+  readonly topLevelFolders = ['guide', 'tutorial'];
+  searchAreas: SearchArea[] = [];
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.searchAreas = this.processSearchResults(this.searchResults);
+  }
+
+  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);
+    }
+  }
+
+  // Map the search results into groups by area
+  private processSearchResults(search: SearchResults) {
+    if (!search) {
+      return [];
+    }
+    this.notFoundMessage = 'No results found.';
+    const searchAreaMap: { [key: string]: SearchResult[] } = {};
+    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);
+    });
+    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: SearchResult, r: SearchResult) {
+  return l.title.toUpperCase() > r.title.toUpperCase() ? 1 : -1;
+}
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 000000000000..54974b82c0ff
--- /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 000000000000..d175e613d318
--- /dev/null
+++ b/aio/src/app/shared/select/select.component.spec.ts
@@ -0,0 +1,163 @@
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } 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 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));
+  });
+
+  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|null {
+  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 000000000000..11bc9913dfc5
--- /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 000000000000..afefd050e87a
--- /dev/null
+++ b/aio/src/app/shared/shared.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SearchResultsComponent } from './search-results/search-results.component';
+import { SelectComponent } from './select/select.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    SearchResultsComponent,
+    SelectComponent
+  ],
+  declarations: [
+    SearchResultsComponent,
+    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 000000000000..58c53f8e37e2
--- /dev/null
+++ b/aio/src/app/shared/toc.service.spec.ts
@@ -0,0 +1,376 @@
+import { DOCUMENT } from '@angular/common';
+import { ReflectiveInjector } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Subject } from 'rxjs';
+
+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);
+  });
+
+  describe('tocList', () => {
+    it('should emit the latest value to new subscribers', () => {
+      const expectedValue1 = createTocItem('Heading A');
+      const expectedValue2 = createTocItem('Heading B');
+      let value1: TocItem[]|undefined;
+      let value2: TocItem[]|undefined;
+
+      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 = createTocItem('Heading A');
+      const expectedValue2 = createTocItem('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 = createTocItem('Heading A');
+      const expectedValue2 = createTocItem('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 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 links and extra whitespace', () => {
+    let docId: string;
+    let tocItem: TocItem;
+
+    beforeEach(() => {
+      docId = 'fizz/buzz/';
+
+      // An almost-actual <h2> ... with extra whitespace
+      callGenToc(`
+        <h2 id="setup-to-develop-locally">
+          Setup to <a href="moo">develop</a> <i>locally</i>.
+          <a class="header-link" href="tutorial/toh-pt1#setup-to-develop-locally" aria-hidden="true">
+            <span class="icon icon-link"></span>
+          </a>
+        </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('Setup to develop <i>locally</i>.');
+    });
+  });
+});
+
+interface TestSafeHtml extends SafeHtml {
+  changingThisBreaksApplicationSecurity: string;
+  getTypeName: () => string;
+}
+
+class TestDomSanitizer {
+  bypassSecurityTrustHtml = jasmine.createSpy('bypassSecurityTrustHtml')
+    .and.callFake((html: string) => {
+      return {
+        changingThisBreaksApplicationSecurity: html,
+        getTypeName: () => 'HTML',
+      } as TestSafeHtml;
+    });
+}
+
+class MockScrollSpyService {
+  private $$lastInfo: {
+    active: Subject<ScrollItem | null>,
+    unspy: jasmine.Spy,
+  } | undefined;
+
+  get $lastInfo() {
+    if (!this.$$lastInfo) {
+      throw new Error('$lastInfo is not yet defined. You must call `spyOn` first.');
+    }
+    return this.$$lastInfo;
+  }
+
+  spyOn(headings: HTMLHeadingElement[]): ScrollSpyInfo {
+    return this.$$lastInfo = {
+      active: new Subject<ScrollItem | null>(),
+      unspy: jasmine.createSpy('unspy'),
+    };
+  }
+}
+
+function createTocItem(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 000000000000..e5fdd0196ae4
--- /dev/null
+++ b/aio/src/app/shared/toc.service.ts
@@ -0,0 +1,115 @@
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { ReplaySubject } from 'rxjs';
+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 = 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 div: HTMLDivElement = this.document.createElement('div');
+    div.innerHTML = heading.innerHTML;
+    const anchorLinks: NodeListOf<HTMLAnchorElement> = div.querySelectorAll('a');
+    for (let i = 0; i < anchorLinks.length; i++) {
+      const anchorLink = anchorLinks[i];
+      if (!anchorLink.classList.contains('header-link')) {
+        // this is an anchor that contains actual content that we want to keep
+        // move the contents of the anchor into its parent
+        const parent = anchorLink.parentNode!;
+        while (anchorLink.childNodes.length) {
+          parent.insertBefore(anchorLink.childNodes[0], anchorLink);
+        }
+      }
+      // now remove the anchor
+      anchorLink.remove();
+    }
+    // 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(div.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 oldCount = idMap.get(key) || 0;
+      const count = oldCount + 1;
+      idMap.set(key, count);
+      return count === 1 ? key : `${key}-${count}`;
+    }
+  }
+}
diff --git a/aio/src/app/shared/web-worker.ts b/aio/src/app/shared/web-worker.ts
new file mode 100644
index 000000000000..464e32fe07e2
--- /dev/null
+++ b/aio/src/app/shared/web-worker.ts
@@ -0,0 +1,61 @@
+/*
+Copyright 2016 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 http://angular.io/license
+*/
+
+import {NgZone} from '@angular/core';
+import {Observable} from 'rxjs';
+
+export interface WebWorkerMessage {
+  type: string;
+  payload: any;
+  id?: number;
+}
+
+export class WebWorkerClient {
+  private nextId = 0;
+
+  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> {
+
+    return new Observable<T>(subscriber => {
+
+      const id = this.nextId++;
+
+      const handleMessage = (response: MessageEvent) => {
+        const {type: responseType, id: responseId, payload: responsePayload} = response.data as WebWorkerMessage;
+        if (type === responseType && id === responseId) {
+          this.zone.run(() => {
+            subscriber.next(responsePayload);
+            subscriber.complete();
+          });
+        }
+      };
+
+      const handleError = (error: ErrorEvent) => {
+        // Since we do not check type and id any error from the webworker will kill all subscribers
+        this.zone.run(() => subscriber.error(error));
+      };
+
+      // Wire up the event listeners for this message
+      this.worker.addEventListener('message', handleMessage);
+      this.worker.addEventListener('error', handleError);
+
+      // Post the message to the web worker
+      this.worker.postMessage({type, id, payload});
+
+      // At completion/error unwire the event listeners
+      return () => {
+        this.worker.removeEventListener('message', handleMessage);
+        this.worker.removeEventListener('error', handleError);
+      };
+    });
+  }
+}
diff --git a/aio/src/app/shared/window.ts b/aio/src/app/shared/window.ts
new file mode 100644
index 000000000000..c1eba5a7e81a
--- /dev/null
+++ b/aio/src/app/shared/window.ts
@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+
+export const WindowToken = new InjectionToken('Window');
+export function windowProvider() { return window; }
diff --git a/aio/src/app/sw-updates/sw-updates.module.ts b/aio/src/app/sw-updates/sw-updates.module.ts
new file mode 100644
index 000000000000..573f64d3e744
--- /dev/null
+++ b/aio/src/app/sw-updates/sw-updates.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { ServiceWorkerModule } from '@angular/service-worker';
+
+import { SwUpdatesService } from './sw-updates.service';
+
+
+@NgModule({
+  imports: [
+    ServiceWorkerModule
+  ],
+  providers: [
+    SwUpdatesService
+  ]
+})
+export class SwUpdatesModule {}
diff --git a/aio/src/app/sw-updates/sw-updates.service.spec.ts b/aio/src/app/sw-updates/sw-updates.service.spec.ts
new file mode 100644
index 000000000000..12a48436ea70
--- /dev/null
+++ b/aio/src/app/sw-updates/sw-updates.service.spec.ts
@@ -0,0 +1,179 @@
+import { ApplicationRef, ReflectiveInjector } from '@angular/core';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { NgServiceWorker } from '@angular/service-worker';
+import { Subject } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { Logger } from 'app/shared/logger.service';
+import { SwUpdatesService } from './sw-updates.service';
+
+describe('SwUpdatesService', () => {
+  let injector: ReflectiveInjector;
+  let appRef: MockApplicationRef;
+  let service: SwUpdatesService;
+  let sw: MockNgServiceWorker;
+  let checkInterval: number;
+
+  // Helpers
+  // NOTE:
+  //   Because `SwUpdatesService` uses the `debounceTime` operator, it needs to be instantiated and
+  //   destroyed inside the `fakeAsync` zone (when `fakeAsync` is used for the test). Thus, we can't
+  //   run `setup()`/`tearDown()` in `beforeEach()`/`afterEach()` blocks. We use the `run()` helper
+  //   to call them inside each test's zone.
+  const setup = () => {
+    injector = ReflectiveInjector.resolveAndCreate([
+      { provide: ApplicationRef, useClass: MockApplicationRef },
+      { provide: Logger, useClass: MockLogger },
+      { provide: NgServiceWorker, useClass: MockNgServiceWorker },
+      SwUpdatesService
+    ]);
+
+    appRef = injector.get(ApplicationRef);
+    service = injector.get(SwUpdatesService);
+    sw = injector.get(NgServiceWorker);
+    checkInterval = (service as any).checkInterval;
+  };
+  const tearDown = () => service.ngOnDestroy();
+  const run = (specFn: VoidFunction) => () => {
+    setup();
+    specFn();
+    tearDown();
+  };
+
+
+  it('should create', run(() => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should start checking for updates when instantiated (once the app stabilizes)', run(() => {
+    expect(sw.checkForUpdate).not.toHaveBeenCalled();
+
+    appRef.isStable.next(false);
+    expect(sw.checkForUpdate).not.toHaveBeenCalled();
+
+    appRef.isStable.next(true);
+    expect(sw.checkForUpdate).toHaveBeenCalled();
+  }));
+
+  it('should schedule a new check if there is no update available', fakeAsync(run(() => {
+    appRef.isStable.next(true);
+    sw.checkForUpdate.calls.reset();
+
+    sw.$$checkForUpdateSubj.next(false);
+    expect(sw.checkForUpdate).not.toHaveBeenCalled();
+
+    tick(checkInterval);
+    expect(sw.checkForUpdate).toHaveBeenCalled();
+    expect(sw.activateUpdate).not.toHaveBeenCalled();
+  })));
+
+  it('should activate new updates immediately', fakeAsync(run(() => {
+    appRef.isStable.next(true);
+    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(() => {
+    appRef.isStable.next(true);
+    sw.$$checkForUpdateSubj.next(true);
+    tick(checkInterval);
+
+    expect(sw.activateUpdate).toHaveBeenCalledWith(null);
+  })));
+
+  it('should schedule a new check after activating the update', fakeAsync(run(() => {
+    appRef.isStable.next(true);
+    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|undefined)[] = [];
+    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(() => {
+      appRef.isStable.next(true);
+      sw.checkForUpdate.calls.reset();
+
+      service.ngOnDestroy();
+      sw.$$checkForUpdateSubj.next(false);
+      tick(checkInterval);
+
+      expect(sw.checkForUpdate).not.toHaveBeenCalled();
+    })));
+
+    it('should not schedule a new check for update (after activating an update)', fakeAsync(run(() => {
+      appRef.isStable.next(true);
+      sw.checkForUpdate.calls.reset();
+
+      sw.$$checkForUpdateSubj.next(true);
+      expect(sw.activateUpdate).toHaveBeenCalled();
+
+      service.ngOnDestroy();
+      sw.$$activateUpdateSubj.next();
+      tick(checkInterval);
+
+      expect(sw.checkForUpdate).not.toHaveBeenCalled();
+    })));
+
+    it('should stop emitting on `updateActivated`', run(() => {
+      const activatedVersions: (string|undefined)[] = [];
+      service.updateActivated.subscribe(v => activatedVersions.push(v));
+
+      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'});
+
+      expect(activatedVersions).toEqual(['bar']);
+    }));
+  });
+});
+
+// Mocks
+class MockApplicationRef {
+  isStable = new Subject<boolean>();
+}
+
+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.pipe(take(1)));
+
+  checkForUpdate = jasmine.createSpy('MockNgServiceWorker.checkForUpdate')
+                          .and.callFake(() => this.$$checkForUpdateSubj.pipe(take(1)));
+}
diff --git a/aio/src/app/sw-updates/sw-updates.service.ts b/aio/src/app/sw-updates/sw-updates.service.ts
new file mode 100644
index 000000000000..e858990eddf0
--- /dev/null
+++ b/aio/src/app/sw-updates/sw-updates.service.ts
@@ -0,0 +1,73 @@
+import { ApplicationRef, Injectable, OnDestroy } from '@angular/core';
+import { NgServiceWorker } from '@angular/service-worker';
+import { concat, Subject } from 'rxjs';
+import { debounceTime, defaultIfEmpty, filter, first, map, startWith, takeUntil, tap } from 'rxjs/operators';
+
+import { Logger } from 'app/shared/logger.service';
+
+
+/**
+ * SwUpdatesService
+ *
+ * @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 activates the update and notifies interested parties.
+ * 4. It continues to check for available updates.
+ *
+ * @property
+ * `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<void>();
+  private checkForUpdateSubj = new Subject<void>();
+  updateActivated = this.sw.updates.pipe(
+      takeUntil(this.onDestroy),
+      tap(evt => this.log(`Update event: ${JSON.stringify(evt)}`)),
+      filter(({type}) => type === 'activation'),
+      map(({version}) => version),
+  );
+
+  constructor(appRef: ApplicationRef, private logger: Logger, private sw: NgServiceWorker) {
+    const appIsStable$ = appRef.isStable.pipe(first(v => v));
+    const checkForUpdates$ = this.checkForUpdateSubj.pipe(debounceTime(this.checkInterval), startWith<void>(undefined));
+
+    concat(appIsStable$, checkForUpdates$)
+        .pipe(takeUntil(this.onDestroy))
+        .subscribe(() => this.checkForUpdate());
+  }
+
+  ngOnDestroy() {
+    this.onDestroy.next();
+  }
+
+  private activateUpdate() {
+    this.log('Activating update...');
+    this.sw.activateUpdate(null as any) // expects a non-null string
+        .subscribe(() => this.scheduleCheckForUpdate());
+  }
+
+  private checkForUpdate() {
+    this.log('Checking for update...');
+    this.sw.checkForUpdate()
+        .pipe(
+            // Temp workaround for https://github.com/angular/mobile-toolkit/pull/137.
+            // TODO (gkalpak): Remove once #137 is fixed.
+            defaultIfEmpty(false),
+            first(),
+            tap(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/.gitkeep b/aio/src/assets/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/src/assets/images/favicons/favicon-144x144.png b/aio/src/assets/images/favicons/favicon-144x144.png
new file mode 100644
index 000000000000..8488500f26ed
Binary files /dev/null and b/aio/src/assets/images/favicons/favicon-144x144.png differ
diff --git a/aio/src/assets/images/favicons/favicon-16x16.png b/aio/src/assets/images/favicons/favicon-16x16.png
new file mode 100644
index 000000000000..17a704375bdb
Binary files /dev/null and b/aio/src/assets/images/favicons/favicon-16x16.png differ
diff --git a/aio/src/assets/images/favicons/favicon-194x194.png b/aio/src/assets/images/favicons/favicon-194x194.png
new file mode 100644
index 000000000000..2365b313f425
Binary files /dev/null and b/aio/src/assets/images/favicons/favicon-194x194.png differ
diff --git a/aio/src/assets/images/favicons/favicon-32x32.png b/aio/src/assets/images/favicons/favicon-32x32.png
new file mode 100644
index 000000000000..cb365b857207
Binary files /dev/null and b/aio/src/assets/images/favicons/favicon-32x32.png differ
diff --git a/aio/src/assets/images/favicons/favicon-96x96.png b/aio/src/assets/images/favicons/favicon-96x96.png
new file mode 100644
index 000000000000..409257e3a8b7
Binary files /dev/null and b/aio/src/assets/images/favicons/favicon-96x96.png differ
diff --git a/aio/src/assets/images/favicons/favicon.ico b/aio/src/assets/images/favicons/favicon.ico
new file mode 100644
index 000000000000..cebb174068b1
Binary files /dev/null and b/aio/src/assets/images/favicons/favicon.ico differ
diff --git a/aio/src/assets/images/logos/angular/angular.png b/aio/src/assets/images/logos/angular/angular.png
new file mode 100644
index 000000000000..c51029391822
Binary files /dev/null and b/aio/src/assets/images/logos/angular/angular.png differ
diff --git a/aio/src/assets/images/logos/angular/angular.svg b/aio/src/assets/images/logos/angular/angular.svg
new file mode 100644
index 000000000000..bf081acb1295
--- /dev/null
+++ b/aio/src/assets/images/logos/angular/angular.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.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 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#DD0031;}
+	.st1{fill:#C3002F;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<polygon class="st0" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 	"/>
+	<polygon class="st1" points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 	"/>
+	<path class="st2" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
+		L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
+</g>
+</svg>
diff --git a/aio/src/assets/images/logos/angular/angular_solidBlack.png b/aio/src/assets/images/logos/angular/angular_solidBlack.png
new file mode 100644
index 000000000000..8a75032b9249
Binary files /dev/null and b/aio/src/assets/images/logos/angular/angular_solidBlack.png differ
diff --git a/aio/src/assets/images/logos/angular/angular_solidBlack.svg b/aio/src/assets/images/logos/angular/angular_solidBlack.svg
new file mode 100644
index 000000000000..b3dc892e10dd
--- /dev/null
+++ b/aio/src/assets/images/logos/angular/angular_solidBlack.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.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 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
+<g>
+	<polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5 	"/>
+	<path d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0
+		l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z"/>
+</g>
+</svg>
diff --git a/aio/src/assets/images/logos/angular/angular_whiteTransparent.png b/aio/src/assets/images/logos/angular/angular_whiteTransparent.png
new file mode 100644
index 000000000000..1ce45c9a8a4d
Binary files /dev/null and b/aio/src/assets/images/logos/angular/angular_whiteTransparent.png differ
diff --git a/aio/src/assets/images/logos/angular/angular_whiteTransparent.svg b/aio/src/assets/images/logos/angular/angular_whiteTransparent.svg
new file mode 100644
index 000000000000..25e14770babc
--- /dev/null
+++ b/aio/src/assets/images/logos/angular/angular_whiteTransparent.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.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 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.9;}
+</style>
+<g>
+	<g>
+		<polygon class="st0" points="125,153.4 100.3,153.4 88.6,182.6 88.6,182.6 66.9,182.6 66.8,182.6 125,52.1 125,52.2 125,52.2 
+			125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,153.4 		"/>
+		<polygon class="st0" points="108,135.4 125,135.4 125,135.4 125,94.5 		"/>
+	</g>
+	<g class="st1">
+		<polygon class="st0" points="125,153.4 149.7,153.4 161.4,182.6 161.4,182.6 183.1,182.6 183.2,182.6 125,52.1 125,52.2 125,52.2 
+			125,30 125,30 218.1,63.2 203.9,186.3 125,230 125,230 125,153.4 		"/>
+		<polygon class="st0" points="142,135.4 125,135.4 125,135.4 125,94.5 		"/>
+	</g>
+</g>
+</svg>
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 000000000000..c920d95739a1
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 000000000000..fc836726f2a3
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/angular/shield-large.svg b/aio/src/assets/images/logos/angular/shield-large.svg
new file mode 100644
index 000000000000..08c93b7a1ec8
--- /dev/null
+++ b/aio/src/assets/images/logos/angular/shield-large.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="184px" height="200px" viewBox="0 0 184 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>shield-large</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="shield-large" sketch:type="MSArtboardGroup">
+            <g id="Imported-Layers" sketch:type="MSLayerGroup" transform="translate(8.000000, 11.000000)">
+                <path d="M83.2,1.03249275 L83.2,1.02860145 L0.3068,30.4481594 L12.8986,139.673181 L82.9998,178.450029 L154.0981,139.150449 L167.9587,29.9267246 L83.2,1.03249275" id="Fill-1" fill="#E23237" sketch:type="MSShapeGroup"></path>
+                <path d="M167.8378,29.9267246 L82.9712,1.03249275 L82.9712,178.450029 L154.0838,139.150449 L167.8378,29.9267246 L167.8378,29.9267246 Z" id="Fill-2" fill="#B52E31" sketch:type="MSShapeGroup"></path>
+                <path d="M0.1924,30.4481594 L12.8414,139.673181 L82.9712,178.450029 L82.9712,1.02860145 L0.1924,30.4481594 L0.1924,30.4481594 Z" id="Fill-3" fill="#E23237" sketch:type="MSShapeGroup"></path>
+                <path d="M100.6837,94.2266377 L82.9712,57.7054493 L67.7261,94.2266377 L100.6837,94.2266377 L100.6837,94.2266377 Z M107.367,109.583022 L60.905,109.583022 L50.5115,135.523754 L31.1779,135.879159 L82.9712,20.8106957 L136.6664,135.879159 L118.7459,135.879159 L107.367,109.583022 L107.367,109.583022 Z" id="Fill-4" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/angularjs/AngularJS-Shield.svg b/aio/src/assets/images/logos/angularjs/AngularJS-Shield.svg
new file mode 100644
index 000000000000..db879ab4f74e
--- /dev/null
+++ b/aio/src/assets/images/logos/angularjs/AngularJS-Shield.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   width="335.88126"
+   height="355.80875"
+   xml:space="preserve"
+   sodipodi:docname="AngularJS-Shield.svg"
+   inkscape:export-filename="/usr/local/google/home/stephenfluin/AngularJS-Shield.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs6" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1393"
+     inkscape:window-height="697"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="0.25757162"
+     inkscape:cx="171.15375"
+     inkscape:cy="177.21499"
+     inkscape:window-x="2290"
+     inkscape:window-y="312"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g10"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" /><g
+     id="g10"
+     inkscape:groupmode="layer"
+     inkscape:label="ink_ext_XXXXXX"
+     transform="matrix(1.25,0,0,-1.25,-188.84625,636.71875)"><g
+       id="g12"
+       transform="scale(0.1,0.1)"><path
+         d="M 2850,5093.75 1510.77,4622.45 1722.39,2867.82 2851.42,2247.28 3986.27,2876.23 4197.82,4630.79 2850,5093.75 z"
+         style="fill:#b3b3b3;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path14"
+         inkscape:connector-curvature="0" /><path
+         d="m 4064.25,4529.39 -1217.38,415.13 0,-2548.98 1020.22,564.62 197.16,1569.23 z"
+         style="fill:#af2b2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path16"
+         inkscape:connector-curvature="0" /><path
+         d="m 1661.05,4521.89 181.34,-1569.22 1004.47,-557.13 0,2549.03 -1185.81,-422.68 z"
+         style="fill:#df2e31;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path18"
+         inkscape:connector-curvature="0" /><path
+         d="m 3129.05,3676.7 -279.96,584.64 -246.46,-584.64 526.42,0 z m 106.74,-245.83 -742.11,0 -166.02,-415.26 -308.82,-5.71 828.04,1842.06 856.9,-1842.06 -286.23,0 -181.76,420.97 z"
+         style="fill:#f2f2f2;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path20"
+         inkscape:connector-curvature="0" /><path
+         d="m 2846.87,4851.96 2.21,-590.62 279.67,-585.09 -281.25,0 -0.63,-245 388.9,-0.38 181.77,-421.04 295.49,-5.48 -866.16,1847.61 z"
+         style="fill:#b3b3b3;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path22"
+         inkscape:connector-curvature="0" /></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/animations.png b/aio/src/assets/images/logos/concept-icons/animations.png
new file mode 100755
index 000000000000..85bec902259b
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/animations.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/animations.svg b/aio/src/assets/images/logos/concept-icons/animations.svg
new file mode 100644
index 000000000000..6e73ef311014
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/animations.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 200"><defs><style>.cls-1{fill:#ff7043;}.cls-2{fill:#f4511e;}.cls-3{fill:#ffb8a1;}.cls-4{fill:#ffc6b4;}.cls-5{fill:#ffe2d9;}.cls-6{fill:#fff;}</style></defs><title>animations</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.8 0 92.8 0 92.8 0 0 33.3 14 156.1 92.8 200 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><polygon class="cls-2" points="92.8 0 92.8 22.2 92.8 22.2 92.8 123.2 92.8 123.2 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><rect class="cls-3" x="43" y="71.2" width="68.4" height="68.84" rx="4" ry="4"/><rect class="cls-4" x="57.4" y="62.3" width="68.8" height="68.84" rx="4" ry="4" transform="translate(38.6 -25.6) rotate(20)"/><rect class="cls-5" x="71.3" y="59.2" width="68.8" height="68.84" rx="4" ry="4" transform="translate(66.9 -42.1) rotate(32.5)"/><rect class="cls-6" x="81.6" y="58.3" width="68.8" height="68.84" rx="4" ry="4" transform="translate(99.6 -54.9) rotate(45)"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/augury.png b/aio/src/assets/images/logos/concept-icons/augury.png
new file mode 100755
index 000000000000..d65dd38c3b1e
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/augury.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/augury.svg b/aio/src/assets/images/logos/concept-icons/augury.svg
new file mode 100644
index 000000000000..6080bea35cb6
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/augury.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.6 200"><defs><style>.cls-1{fill:#4a3493;}.cls-2{fill:#311b92;}.cls-3{opacity:0.5;}.cls-4{fill:#fff;}</style></defs><title>augury</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.4 0 92.4 0 92.4 0 0 33.3 14 156.1 92.4 200 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-2" points="92.4 0 92.4 22.2 92.4 22.2 92.4 123.2 92.4 123.2 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><g id="Group-2"><g id="Group-2-2" class="cls-3"><path id="Combined-Shape" class="cls-4" d="M142.4,90.2A44.1,44.1,0,1,1,92.7,52.8a40.3,40.3,0,0,1,6-.4,44.8,44.8,0,0,1,15.9,2.9,25.8,25.8,0,1,0,27.8,34.9Z"/></g><path id="Combined-Shape-2" class="cls-4" d="M140.6,87.8A44.1,44.1,0,1,1,90.9,50.4a40.3,40.3,0,0,1,6-.4,45.6,45.6,0,0,1,15.9,2.9,25.8,25.8,0,1,0,27.8,34.9Z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/cdk.png b/aio/src/assets/images/logos/concept-icons/cdk.png
new file mode 100755
index 000000000000..03003c5f5531
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/cdk.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/cdk.svg b/aio/src/assets/images/logos/concept-icons/cdk.svg
new file mode 100644
index 000000000000..551cd705bde4
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/cdk.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.6 200"><defs><style>.cls-1{fill:#03a9f4;}.cls-2{fill:#039be5;}.cls-3{fill:#fff;}</style></defs><title>cdk</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.4 0 92.4 0 92.4 0 0 33.3 14 156.1 92.4 200 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-2" points="92.4 0 92.4 22.2 92.4 22.2 92.4 123.2 92.4 123.2 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><rect class="cls-3" x="117.8" y="45" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="117.8" y="85" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="117.8" y="125" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="77.8" y="125" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="37.8" y="125" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="37.8" y="85" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="77.8" y="85" width="30" height="30" rx="1" ry="1"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/cli.png b/aio/src/assets/images/logos/concept-icons/cli.png
new file mode 100755
index 000000000000..e4d2b584521f
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/cli.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/cli.svg b/aio/src/assets/images/logos/concept-icons/cli.svg
new file mode 100644
index 000000000000..1d00bd1f08a7
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/cli.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.6 200"><defs><style>.cls-1{fill:#37474f;}.cls-2{fill:#263238;}.cls-3{fill:#fff;}</style></defs><title>cli</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.4 0 92.4 0 92.4 0 0 33.3 14 156.1 92.4 200 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-2" points="92.4 0 92.4 22.2 92.4 22.2 92.4 123.2 92.4 123.2 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><path class="cls-3" d="M42.8,55v90h100V55ZM138,139.9H47.5V60.1h90.6v79.8Z"/><polygon class="cls-3" points="60.1 111.4 63.5 114.9 82.8 95.5 63.2 75.9 59.8 79.3 76 95.5 60.1 111.4"/><rect class="cls-3" x="82.8" y="117.2" width="30" height="4"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/compiler.png b/aio/src/assets/images/logos/concept-icons/compiler.png
new file mode 100755
index 000000000000..285031201a65
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/compiler.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/compiler.svg b/aio/src/assets/images/logos/concept-icons/compiler.svg
new file mode 100644
index 000000000000..b1fdbce869ac
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/compiler.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.6 200"><defs><style>.cls-1{fill:#8bc34a;}.cls-2{fill:#7cb342;}.cls-3{fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.08px;}.cls-4{fill:#bed9a1;}</style></defs><title>compiler</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.4 0 92.4 0 92.4 0 0 33.3 14 156.1 92.4 200 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-2" points="92.4 0 92.4 22.2 92.4 22.2 92.4 123.2 92.4 123.2 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><path class="cls-3" d="M113.9,144.1l-1.5-5.5a7,7,0,0,1,2.7-7.4,26.2,26.2,0,0,0,4.8-4,36,36,0,0,0,4.1-4.8,6.7,6.7,0,0,1,7.4-2.7l5.4,1.4a1.7,1.7,0,0,0,1.4-.1c.5-.3.9-.7.9-1.1l3.7-13.8a1.9,1.9,0,0,0-1.4-2.2l-5.4-1.5a7.2,7.2,0,0,1-5.2-6,38.7,38.7,0,0,0-3.2-12.1,7.1,7.1,0,0,1,1.3-7.9l4-3.9a1.9,1.9,0,0,0,0-2.6l-10-10a1.8,1.8,0,0,0-2.5,0l-4,4a7,7,0,0,1-7.8,1.3A37.4,37.4,0,0,0,96.5,62a7.3,7.3,0,0,1-6.1-5.2L89,51.4a1.9,1.9,0,0,0-2.3-1.3L73,53.7a2.3,2.3,0,0,0-1.1.9,3.4,3.4,0,0,0-.2,1.4l1.5,5.4a6.9,6.9,0,0,1-2.7,7.4,38.3,38.3,0,0,0-4.8,4.1,47.2,47.2,0,0,0-4.1,4.8,6.8,6.8,0,0,1-7.4,2.7L48.8,79a1.7,1.7,0,0,0-1.4.1,1.9,1.9,0,0,0-.9,1.1L42.9,93.9a1.9,1.9,0,0,0,1.3,2.3l5.4,1.4a6.2,6.2,0,0,1,3,1.8,6.8,6.8,0,0,1,2.1,4.2,38.7,38.7,0,0,0,3.2,12.1,6.8,6.8,0,0,1-1.3,7.9l-4,3.9a1.9,1.9,0,0,0,0,2.6l10,10a1.9,1.9,0,0,0,2.6,0l3.9-4a6.8,6.8,0,0,1,7.9-1.3A36.8,36.8,0,0,0,89.1,138a7.2,7.2,0,0,1,6,5.2l1.5,5.4a1.7,1.7,0,0,0,2.2,1.3l13.8-3.5a2.3,2.3,0,0,0,1.1-.9A1.8,1.8,0,0,0,113.9,144.1ZM76.5,116.3a23,23,0,1,1,32.5,0A23.2,23.2,0,0,1,76.5,116.3Z"/><ellipse class="cls-4" cx="92.8" cy="100" rx="13.3" ry="13.3"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/components.png b/aio/src/assets/images/logos/concept-icons/components.png
new file mode 100755
index 000000000000..2e74e9e719ce
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/components.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/components.svg b/aio/src/assets/images/logos/concept-icons/components.svg
new file mode 100644
index 000000000000..0c58f21013ee
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/components.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.6 200"><defs><style>.cls-1{fill:#448aff;}.cls-2{fill:#2979ff;}.cls-3{fill:#fff;}.cls-4{fill:#a2c5ff;}</style></defs><title>components</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.4 0 92.4 0 92.4 0 0 33.3 14 156.1 92.4 200 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-2" points="92.4 0 92.4 22.2 92.4 22.2 92.4 123.2 92.4 123.2 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-3" points="73.6 131.4 54.3 98 84.3 46.1 62.8 46.1 32.8 98 62.8 150 84.4 150 73.6 131.4 73.6 131.4"/><polygon class="cls-4" points="152.8 98 122.8 46.1 84.3 46.1 54.3 98 73.6 64.7 112.1 64.7 131.3 98 112.1 131.4 73.6 131.4 84.4 150 122.8 150 152.8 98"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/dependency-injection.png b/aio/src/assets/images/logos/concept-icons/dependency-injection.png
new file mode 100755
index 000000000000..f1871cd3e91f
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/dependency-injection.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/dependency-injection.svg b/aio/src/assets/images/logos/concept-icons/dependency-injection.svg
new file mode 100644
index 000000000000..82cdf98dce49
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/dependency-injection.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#546e7a;}.cls-2{fill:#455a64;}.cls-3,.cls-4{fill:#fff;}.cls-3{opacity:0.5;}</style></defs><title>dependency-injection</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,100A100,100,0,0,0,100,200V0A100,100,0,0,0,0,100Z"/><path class="cls-2" d="M100,0V200A100,100,0,0,0,100,0Z"/><polygon class="cls-3" points="131.2 73.2 151 47.7 125.6 67.5 108.6 61.8 59.1 111.3 87.4 139.6 136.9 90.1 131.2 73.2"/><rect class="cls-4" x="74.5" y="74.3" width="40" height="60" transform="translate(101.4 -36.3) rotate(45)"/><rect class="cls-4" x="66.8" y="107" width="20" height="30" transform="translate(108.7 -18.6) rotate(45)"/><rect class="cls-4" x="42.6" y="131.1" width="40" height="10" transform="translate(114.6 -4.4) rotate(45)"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/forms.png b/aio/src/assets/images/logos/concept-icons/forms.png
new file mode 100755
index 000000000000..9324696aaf0b
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/forms.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/forms.svg b/aio/src/assets/images/logos/concept-icons/forms.svg
new file mode 100644
index 000000000000..b0bf02adb128
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/forms.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 200"><defs><style>.cls-1{fill:#e57373;}.cls-2{fill:#ef5350;}.cls-3{fill:#fff;}</style></defs><title>forms</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.8 0 92.8 0 92.8 0 0 33.3 14 156.1 92.8 200 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><polygon class="cls-2" points="92.8 0 92.8 22.2 92.8 22.2 92.8 123.2 92.8 123.2 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><path class="cls-3" d="M138.7,90H47c-2.4,0-4-2.3-4-5.6V55.6c0-3.3,1.6-5.6,4-5.6h92.1c2.3,0,3.9,2.3,3.9,5.6V84.4C142.6,87.7,141,90,138.7,90Z"/><path class="cls-3" d="M139.8,120H96.3c-2,0-3.3-1.4-3.3-3.6V103.6c0-2.2,1.3-3.6,3.3-3.6h43.5c1.9,0,3.2,1.4,3.2,3.6v12.8A3.4,3.4,0,0,1,139.8,120Z"/><path class="cls-3" d="M139.8,150H96.3c-2,0-3.3-1.5-3.3-3.8V133.8c0-2.3,1.3-3.8,3.3-3.8h43.5c1.9,0,3.2,1.5,3.2,3.8v12.4C143,148.1,141.7,150,139.8,150Z"/><rect class="cls-3" x="43" y="100" width="40" height="50" rx="4" ry="4"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/http.png b/aio/src/assets/images/logos/concept-icons/http.png
new file mode 100755
index 000000000000..ebbf122d6da3
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/http.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/http.svg b/aio/src/assets/images/logos/concept-icons/http.svg
new file mode 100644
index 000000000000..fd099fe52a2c
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/http.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.6 200"><defs><style>.cls-1{fill:#2e7d32;}.cls-2{fill:#1b5e20;}.cls-3,.cls-4,.cls-5{fill:#fff;stroke:#fff;stroke-miterlimit:10;}.cls-3{stroke-width:0.24px;}.cls-4{stroke-width:0.27px;}.cls-5{stroke-width:0.27px;}</style></defs><title>http</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.4 0 92.4 0 92.4 0 0 33.3 14 156.1 92.4 200 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-2" points="92.4 0 92.4 22.2 92.4 22.2 92.4 123.2 92.4 123.2 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-3" points="107.5 150 100.3 148.2 125.7 50 132.9 51.8 107.5 150"/><polygon class="cls-3" points="81.5 150 74.3 148.2 99.7 50 106.8 51.8 81.5 150"/><circle class="cls-4" cx="65.5" cy="82.8" r="7.1"/><circle class="cls-5" cx="65.5" cy="113.1" r="7.1"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/i18n.png b/aio/src/assets/images/logos/concept-icons/i18n.png
new file mode 100755
index 000000000000..4a6172420aff
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/i18n.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/i18n.svg b/aio/src/assets/images/logos/concept-icons/i18n.svg
new file mode 100644
index 000000000000..8b8b596375af
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/i18n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 200"><defs><style>.cls-1{fill:#4caf50;}.cls-2{fill:#388e3c;}.cls-3{fill:#fff;}</style></defs><title>i18n</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.8 0 92.8 0 92.8 0 0 33.3 14 156.1 92.8 200 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><polygon class="cls-2" points="92.8 0 92.8 22.2 92.8 22.2 92.8 123.2 92.8 123.2 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><path class="cls-3" d="M93,150a50,50,0,0,1-50-50A49.3,49.3,0,0,1,71.4,55.1,43.5,43.5,0,0,1,82,51.3,41.1,41.1,0,0,1,92.6,50c27.4,0,50,22.4,50.4,50a49.5,49.5,0,0,1-17.3,37.7,47.7,47.7,0,0,1-21.7,11A42.5,42.5,0,0,1,93,150Zm-.4-95.9a39,39,0,0,0-9.7,1.1,47.2,47.2,0,0,0-9.7,3.5A45.4,45.4,0,0,0,47.1,100,46,46,0,0,0,93,145.9a45.3,45.3,0,0,0,10.1-1.1A43.1,43.1,0,0,0,123,134.6,45.5,45.5,0,0,0,139,100C138.6,74.7,117.8,54.1,92.6,54.1Z"/><rect class="cls-3" x="90.9" y="54.1" width="3.9" height="91.78"/><path class="cls-3" d="M92.8,147.8c-16.3,0-29.7-21.5-29.7-48s13.4-48,29.7-48,29.7,21.5,29.7,48S109.2,147.8,92.8,147.8Zm0-92.1C78.6,55.7,67,75.5,67,99.8s11.6,44.1,25.8,44.1,25.8-19.8,25.8-44.1S107,55.7,92.8,55.7Z"/><rect class="cls-3" x="47.1" y="97.9" width="91.8" height="3.91"/><rect class="cls-3" x="53" y="76" width="80.5" height="3.91"/><rect class="cls-3" x="53" y="117.8" width="80.5" height="3.91"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/karma.png b/aio/src/assets/images/logos/concept-icons/karma.png
new file mode 100755
index 000000000000..385a964297c2
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/karma.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/karma.svg b/aio/src/assets/images/logos/concept-icons/karma.svg
new file mode 100644
index 000000000000..e668f91049f0
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/karma.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 200"><defs><style>.cls-1{fill:#3dbeae;}.cls-2{fill:#349b8b;}.cls-3,.cls-4{fill:#fff;}.cls-4{opacity:0.5;isolation:isolate;}</style></defs><title>karma</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.8 0 92.8 0 92.8 0 0 33.3 14 156.1 92.8 200 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><polygon class="cls-2" points="92.8 0 92.8 22.2 92.8 22.2 92.8 123.2 92.8 123.2 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><polygon class="cls-3" points="76.6 59.9 99.7 59.9 99.7 82.2 115.5 59.9 140.1 59.9 99.9 119.2 99.9 139.9 92.4 139.9 76.6 84.2 76.6 59.9"/><polygon class="cls-4" points="143 139.9 114.4 97.8 101.8 116.4 118.2 139.9 143 139.9"/><polygon class="cls-3" points="39 84.2 51.3 128.4 69.6 95.6 57.7 106.3 39 84.2"/><polygon class="cls-4" points="80.7 139.1 69.6 95.6 51.3 128.4 62.8 117.3 80.7 139.1"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/labs.png b/aio/src/assets/images/logos/concept-icons/labs.png
new file mode 100755
index 000000000000..256cd5de4c1c
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/labs.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/labs.svg b/aio/src/assets/images/logos/concept-icons/labs.svg
new file mode 100644
index 000000000000..2c0229b705ed
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/labs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 192.7"><defs><style>.cls-1{fill:#1de9b6;}.cls-2{fill:#00bfa5;}.cls-3{fill:#bbf8e9;}.cls-4{fill:#fff;}</style></defs><title>labs</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="89.4 0 89.4 0 89.4 0 0 32 13.5 150.4 89.4 192.7 89.4 192.7 89.4 192.7 165.4 150.4 179.2 32 89.4 0"/><polygon class="cls-2" points="89.4 0 89.4 21.4 89.4 21.4 89.4 118.7 89.4 118.7 89.4 192.7 89.4 192.7 165.4 150.4 179.2 32 89.4 0"/><path class="cls-3" d="M124.1,75.8l-37-11.5a2.8,2.8,0,0,0-3.5,1.9l-.2.5a2.9,2.9,0,0,0,1.9,3.5l7.1,2.2L85.2,95.5a30.4,30.4,0,0,0,1.7,60.7A30.7,30.7,0,0,0,98,153.8h0l1.5-.7a30.5,30.5,0,0,0,4.8-51.5l7.2-23.3,10.7,3.4a3,3,0,0,0,3.6-1.9v-.5A2.7,2.7,0,0,0,124.1,75.8Z"/><ellipse class="cls-4" cx="90.4" cy="44.1" rx="7.8" ry="7.9"/><ellipse class="cls-4" cx="126.8" cy="60.3" rx="3.8" ry="3.8"/><ellipse class="cls-4" cx="51.5" cy="73.9" rx="4.9" ry="4.9"/><path class="cls-4" d="M111.3,134.2a26.3,26.3,0,1,1-50.2-15.6"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/language-services.png b/aio/src/assets/images/logos/concept-icons/language-services.png
new file mode 100755
index 000000000000..be46eb8fd524
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/language-services.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/language-services.svg b/aio/src/assets/images/logos/concept-icons/language-services.svg
new file mode 100644
index 000000000000..5b3cbe23131d
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/language-services.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 200"><defs><style>.cls-1{fill:#5c6bc0;}.cls-2{fill:#3949ab;}.cls-3{fill:#fff;}.cls-4{fill:#aeb5e0;}</style></defs><title>language-services</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.8 0 92.8 0 92.8 0 0 33.3 14 156.1 92.8 200 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><polygon class="cls-2" points="92.8 0 92.8 22.2 92.8 22.2 92.8 123.2 92.8 123.2 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><path class="cls-3" d="M93,50a50,50,0,1,0,50,50A50,50,0,0,0,93,50Zm-5.3,80.3L68.9,111.5l6.7-6.7L86,115.2l24-38.8,8,5Z"/><polygon class="cls-4" points="86 115.2 75.6 104.8 68.9 111.5 87.7 130.3 118 81.4 110 76.4 86 115.2"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/lazy-loading.png b/aio/src/assets/images/logos/concept-icons/lazy-loading.png
new file mode 100755
index 000000000000..bbb68345572f
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/lazy-loading.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/lazy-loading.svg b/aio/src/assets/images/logos/concept-icons/lazy-loading.svg
new file mode 100644
index 000000000000..91f21c7df5f1
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/lazy-loading.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#546e7a;}.cls-2{fill:#455a64;}.cls-3{fill:#fff;}</style></defs><title>lazy-loading</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,100A100,100,0,0,0,100,200V0A100,100,0,0,0,0,100Z"/><path class="cls-2" d="M100,0V200A100,100,0,0,0,100,0Z"/><path class="cls-3" d="M120,93.7a24.4,24.4,0,0,0,10.1,2.1,24.9,24.9,0,1,0-20.3-10.6l-10,10.1-9.8-9.8a24.5,24.5,0,0,0,4.7-14.6,24.7,24.7,0,1,0-15,22.9l10.8,10.8L47.7,147.5l3.7,3.8a7.9,7.9,0,0,0,11.2,0L99.8,114l37.6,37.7a7.9,7.9,0,0,0,11.2,0l3.7-3.8-43.2-43.3ZM109.8,70.9a20.4,20.4,0,1,1,20.3,20.4,20.8,20.8,0,0,1-6.6-1.1,20.5,20.5,0,0,1-13.7-19.3ZM76.2,90.3a18.9,18.9,0,0,1-6.3,1,20.4,20.4,0,1,1,20.3-20.4,20.6,20.6,0,0,1-3.4,11.3A20.3,20.3,0,0,1,76.2,90.3Z"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/libraries.png b/aio/src/assets/images/logos/concept-icons/libraries.png
new file mode 100755
index 000000000000..036ed3ae863e
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/libraries.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/libraries.svg b/aio/src/assets/images/logos/concept-icons/libraries.svg
new file mode 100644
index 000000000000..9f92fa721019
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/libraries.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#546e7a;}.cls-2{fill:#455a64;}.cls-3,.cls-4{fill:#fff;}.cls-4{opacity:0.5;}</style></defs><title>libraries</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,100A100,100,0,0,0,100,200V0A100,100,0,0,0,0,100Z"/><path class="cls-2" d="M100,0V200A100,100,0,0,0,100,0Z"/><path class="cls-3" d="M25,63.3v75H58.3v-75Zm25,60H33.3V120H50ZM50,90H33.3V86.6H50Zm0-8.4H33.3V78.3H50Z"/><rect class="cls-4" x="33.3" y="77.9" width="16.7" height="4"/><rect class="cls-4" x="33.3" y="86.6" width="16.7" height="3.34"/><rect class="cls-4" x="33.3" y="120" width="16.7" height="3.34"/><path class="cls-3" d="M65,63.3v75H98.3v-75Zm25,60H73.3V120H90ZM90,90H73.3V86.6H90Zm0-8.4H73.3V78.3H90Z"/><rect class="cls-4" x="73.3" y="78.3" width="16.7" height="3.34"/><rect class="cls-4" x="73.3" y="86.6" width="16.7" height="3.34"/><rect class="cls-4" x="73.3" y="120" width="16.7" height="3.34"/><path class="cls-3" d="M98.3,85.3l53.1,53L175,114.7l-53.1-53ZM158.5,110l-11.8,11.8-2.3-2.3,11.8-11.8ZM134.9,86.4,123.1,98.2l-2.3-2.3,11.8-11.8ZM129,80.5,117.2,92.3,114.9,90l11.8-11.8Z"/><rect class="cls-4" x="113.6" y="83.6" width="16.7" height="3.34" transform="translate(-24.6 111.2) rotate(-45)"/><rect class="cls-4" x="119.5" y="89.5" width="16.7" height="3.34" transform="translate(-27 117.1) rotate(-45)"/><rect class="cls-4" x="143.1" y="113.1" width="16.7" height="3.34" transform="translate(-36.8 140.7) rotate(-45)"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/material.png b/aio/src/assets/images/logos/concept-icons/material.png
new file mode 100755
index 000000000000..608ca6984b5e
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/material.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/material.svg b/aio/src/assets/images/logos/concept-icons/material.svg
new file mode 100644
index 000000000000..9ac283627006
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/material.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 192.7"><defs><style>.cls-1{fill:#ffa726;}.cls-2{fill:#fb8c00;}.cls-3{fill:#ffe0b2;}.cls-4{fill:#fff3e0;}.cls-5{fill:#fff;}</style></defs><title>material</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="89.4 0 89.4 0 89.4 0 0 32 13.5 150.4 89.4 192.7 89.4 192.7 89.4 192.7 165.4 150.4 179.2 32 89.4 0"/><polygon class="cls-2" points="89.4 0 89.4 21.4 89.4 21.4 89.4 118.7 89.4 118.7 89.4 192.7 89.4 192.7 165.4 150.4 179.2 32 89.4 0"/><polygon class="cls-3" points="102.9 146.3 39.6 115.8 75.9 93.4 139.6 124 102.9 146.3"/><polygon class="cls-4" points="102.9 122.8 39.6 92.2 75.9 69.9 139.6 100.5 102.9 122.8"/><polygon class="cls-5" points="102.9 99.3 39.6 68.7 75.9 46.3 139.6 76.9 102.9 99.3"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/performance.png b/aio/src/assets/images/logos/concept-icons/performance.png
new file mode 100755
index 000000000000..01a9622b0cc6
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/performance.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/performance.svg b/aio/src/assets/images/logos/concept-icons/performance.svg
new file mode 100644
index 000000000000..057e1b23cb26
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/performance.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#546e7a;}.cls-2{fill:#455a64;}.cls-3{fill:#bbc5ca;}.cls-4{fill:#fff;}.cls-5{fill:none;}</style></defs><title>performance</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,100A100,100,0,0,0,100,200V0A100,100,0,0,0,0,100Z"/><path class="cls-2" d="M100,0V200A100,100,0,0,0,100,0Z"/><circle class="cls-3" cx="100" cy="100" r="50"/><circle class="cls-4" cx="100" cy="100" r="8.33"/><rect class="cls-4" x="94.82" y="85.42" width="35.36" height="4.17" transform="translate(-28.92 105.18) rotate(-45)"/><path class="cls-5" d="M100,59.09A41,41,0,0,0,59.09,100h81.82A41,41,0,0,0,100,59.09Z"/><path class="cls-5" d="M100,140.91A41,41,0,0,0,140.91,100H59.09A41,41,0,0,0,100,140.91Z"/><path class="cls-4" d="M100,50a50,50,0,0,0-50,50h9.09a40.91,40.91,0,0,1,81.82,0H150A50,50,0,0,0,100,50Z"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/protractor.png b/aio/src/assets/images/logos/concept-icons/protractor.png
new file mode 100755
index 000000000000..79c32c91a30d
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/protractor.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/protractor.svg b/aio/src/assets/images/logos/concept-icons/protractor.svg
new file mode 100644
index 000000000000..545ee9a1327d
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/protractor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 200"><defs><style>.cls-1{fill:#e13439;}.cls-2{fill:#b52f32;}.cls-3{fill:#fff;}</style></defs><title>protractor</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.8 0 92.8 0 92.8 0 0 33.3 14 156.1 92.8 200 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><polygon class="cls-2" points="92.8 0 92.8 22.2 92.8 22.2 92.8 123.2 92.8 123.2 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><path class="cls-3" d="M145.3,117.1v-3.6H158a64.9,64.9,0,0,0-18-43.1L130.4,80l-2.5-2.5,9.5-9.6A64.3,64.3,0,0,0,95.3,50.4V63H91.7V50.3A65,65,0,0,0,48.6,67.9l9.6,9.6L55.6,80,46,70.4a64.8,64.8,0,0,0-17.9,43.1H40.7v3.6H28v14.8H158V117.1Zm-93.5-2.2a41.3,41.3,0,1,1,82.5,0Z"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/pwa.png b/aio/src/assets/images/logos/concept-icons/pwa.png
new file mode 100755
index 000000000000..c0e42c3feeb1
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/pwa.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/pwa.svg b/aio/src/assets/images/logos/concept-icons/pwa.svg
new file mode 100644
index 000000000000..70e9a79a8fe2
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/pwa.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 200"><defs><style>.cls-1{fill:#9c27b0;}.cls-2{fill:#7b1fa2;}.cls-3,.cls-4{fill:#fff;}.cls-4{opacity:0.8;}</style></defs><title>pwa</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.8 0 92.8 0 92.8 0 0 33.3 14 156.1 92.8 200 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><polygon class="cls-2" points="92.8 0 92.8 22.2 92.8 22.2 92.8 123.2 92.8 123.2 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><path class="cls-3" d="M123.2,115.4l3.7-9.3h10.7L132.5,92l6.4-16L157,124H143.6l-3.1-8.6Z"/><path class="cls-4" d="M111.8,124l19.4-48H118.4l-13.3,31L95.6,76H85.7L75.6,107,68.4,92.9l-6.5,19.9L68.5,124H81.2l9.1-27.8L99.1,124Z"/><path class="cls-3" d="M41.2,107.5h8a21.2,21.2,0,0,0,6.4-.8l2.1-6.3,5.7-17.6a9,9,0,0,0-1.5-1.9C58.9,77.6,54.6,76,49,76H29v48H41.2ZM51.7,87a6.3,6.3,0,0,1,1.8,4.7A6.7,6.7,0,0,1,52,96.3c-1.2,1.3-3.2,1.9-6.2,1.9H41.2V85.3h4.7C48.6,85.3,50.6,85.9,51.7,87Z"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/router.png b/aio/src/assets/images/logos/concept-icons/router.png
new file mode 100755
index 000000000000..759c500261de
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/router.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/router.svg b/aio/src/assets/images/logos/concept-icons/router.svg
new file mode 100644
index 000000000000..a2ef8b334e5e
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/router.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.6 200"><defs><style>.cls-1{fill:#1565c0;}.cls-2{fill:#0d47a1;}.cls-3{fill:#fff;}.cls-4{fill:#86a3d0;}</style></defs><title>router</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.4 0 92.4 0 92.4 0 0 33.3 14 156.1 92.4 200 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-2" points="92.4 0 92.4 22.2 92.4 22.2 92.4 123.2 92.4 123.2 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-3" points="76.1 128.9 42.8 139.9 42.8 60.9 76.1 49.9 76.1 128.9"/><polygon class="cls-3" points="142.8 128.9 109.5 139.9 109.5 60.9 142.8 49.9 142.8 128.9"/><polygon class="cls-4" points="109.5 139.9 76.1 128.9 76.1 49.9 109.5 60.9 109.5 139.9"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/templates.png b/aio/src/assets/images/logos/concept-icons/templates.png
new file mode 100755
index 000000000000..ba462715959b
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/templates.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/templates.svg b/aio/src/assets/images/logos/concept-icons/templates.svg
new file mode 100644
index 000000000000..fe789d48d678
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/templates.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#546e7a;}.cls-2{fill:#455a64;}.cls-3{fill:#a2adb2;}.cls-4{fill:#e3e6e8;}.cls-5{fill:#fff;}</style></defs><title>templates</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,100A100,100,0,0,0,100,200V0A100,100,0,0,0,0,100Z"/><path class="cls-2" d="M100,0V200A100,100,0,0,0,100,0Z"/><rect class="cls-3" x="80" y="70" width="60" height="80"/><rect class="cls-4" x="70" y="60" width="60" height="80"/><rect class="cls-5" x="60" y="50" width="60" height="80"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/concept-icons/universal.png b/aio/src/assets/images/logos/concept-icons/universal.png
new file mode 100755
index 000000000000..7450d9720eb3
Binary files /dev/null and b/aio/src/assets/images/logos/concept-icons/universal.png differ
diff --git a/aio/src/assets/images/logos/concept-icons/universal.svg b/aio/src/assets/images/logos/concept-icons/universal.svg
new file mode 100644
index 000000000000..6093544f8160
--- /dev/null
+++ b/aio/src/assets/images/logos/concept-icons/universal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 200"><defs><style>.cls-1{fill:#00acc1;}.cls-2{fill:#00838f;}.cls-3{fill:#fff;}.cls-4{fill:#80d6e0;}</style></defs><title>universal</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.8 0 92.8 0 92.8 0 0 33.3 14 156.1 92.8 200 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><polygon class="cls-2" points="92.8 0 92.8 22.2 92.8 22.2 92.8 123.2 92.8 123.2 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><path class="cls-3" d="M121,40H65A12,12,0,0,0,53,52v96a12,12,0,0,0,12,12h56a12,12,0,0,0,12-12V52A12,12,0,0,0,121,40ZM93,150a10,10,0,1,1,10-10A10,10,0,0,1,93,150Zm30-44a4,4,0,0,1-4,4H67a4,4,0,0,1-4-4V94a4,4,0,0,1,4-4h52a4,4,0,0,1,4,4Zm0-30a4,4,0,0,1-4,4H67a4,4,0,0,1-4-4V64a4,4,0,0,1,4-4h52a4,4,0,0,1,4,4Z"/><rect class="cls-4" x="63" y="60" width="60" height="20" rx="4" ry="4"/><rect class="cls-4" x="63" y="90" width="60" height="20" rx="4" ry="4"/><circle class="cls-4" cx="93" cy="140" r="10"/></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/logos/github-icon.svg b/aio/src/assets/images/logos/github-icon.svg
new file mode 100644
index 000000000000..6fe590f96736
--- /dev/null
+++ b/aio/src/assets/images/logos/github-icon.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.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 51.8 50.4" style="enable-background:new 0 0 51.8 50.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8
+	c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1
+	c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6
+	c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9
+	c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3
+	C51.5,11.7,40.1,0.2,25.9,0.2z"/>
+</svg>
diff --git a/aio/src/assets/images/logos/twitter-icon.svg b/aio/src/assets/images/logos/twitter-icon.svg
new file mode 100644
index 000000000000..4928d64d0310
--- /dev/null
+++ b/aio/src/assets/images/logos/twitter-icon.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 49.7" style="enable-background:new 0 0 50 49.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2
+	c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5
+	C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2
+	c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2
+	c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"/>
+</svg>
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 000000000000..173ea9d2f7dc
--- /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/src/assets/js/prettify.js b/aio/src/assets/js/prettify.js
new file mode 100755
index 000000000000..3b74b5bdaa3d
--- /dev/null
+++ b/aio/src/assets/js/prettify.js
@@ -0,0 +1,46 @@
+!function(){/*
+
+ Copyright (C) 2006 Google Inc.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+window.PR_SHOULD_USE_CONTINUATION=!0;
+(function(){function T(a){function d(e){var b=e.charCodeAt(0);if(92!==b)return b;var a=e.charAt(1);return(b=w[a])?b:"0"<=a&&"7">=a?parseInt(e.substring(1),8):"u"===a||"x"===a?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return"\\"===e||"-"===e||"]"===e||"^"===e?"\\"+e:e}function b(e){var b=e.substring(1,e.length-1).match(/\\u[0-9A-Fa-f]{4}|\\x[0-9A-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\s\S]|-|[^-\\]/g);e=
+[];var a="^"===b[0],c=["["];a&&c.push("^");for(var a=a?1:0,g=b.length;a<g;++a){var h=b[a];if(/\\[bdsw]/i.test(h))c.push(h);else{var h=d(h),k;a+2<g&&"-"===b[a+1]?(k=d(b[a+2]),a+=2):k=h;e.push([h,k]);65>k||122<h||(65>k||90<h||e.push([Math.max(65,h)|32,Math.min(k,90)|32]),97>k||122<h||e.push([Math.max(97,h)&-33,Math.min(k,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});b=[];g=[];for(a=0;a<e.length;++a)h=e[a],h[0]<=g[1]+1?g[1]=Math.max(g[1],h[1]):b.push(g=h);for(a=0;a<b.length;++a)h=b[a],
+c.push(f(h[0])),h[1]>h[0]&&(h[1]+1>h[0]&&c.push("-"),c.push(f(h[1])));c.push("]");return c.join("")}function v(e){for(var a=e.source.match(/(?:\[(?:[^\x5C\x5D]|\\[\s\S])*\]|\\u[A-Fa-f0-9]{4}|\\x[A-Fa-f0-9]{2}|\\[0-9]+|\\[^ux0-9]|\(\?[:!=]|[\(\)\^]|[^\x5B\x5C\(\)\^]+)/g),c=a.length,d=[],g=0,h=0;g<c;++g){var k=a[g];"("===k?++h:"\\"===k.charAt(0)&&(k=+k.substring(1))&&(k<=h?d[k]=-1:a[g]=f(k))}for(g=1;g<d.length;++g)-1===d[g]&&(d[g]=++A);for(h=g=0;g<c;++g)k=a[g],"("===k?(++h,d[h]||(a[g]="(?:")):"\\"===
+k.charAt(0)&&(k=+k.substring(1))&&k<=h&&(a[g]="\\"+d[k]);for(g=0;g<c;++g)"^"===a[g]&&"^"!==a[g+1]&&(a[g]="");if(e.ignoreCase&&n)for(g=0;g<c;++g)k=a[g],e=k.charAt(0),2<=k.length&&"["===e?a[g]=b(k):"\\"!==e&&(a[g]=k.replace(/[a-zA-Z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var A=0,n=!1,l=!1,m=0,c=a.length;m<c;++m){var p=a[m];if(p.ignoreCase)l=!0;else if(/[a-z]/i.test(p.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,""))){n=!0;
+l=!1;break}}for(var w={b:8,t:9,n:10,v:11,f:12,r:13},r=[],m=0,c=a.length;m<c;++m){p=a[m];if(p.global||p.multiline)throw Error(""+p);r.push("(?:"+v(p)+")")}return new RegExp(r.join("|"),l?"gi":"g")}function U(a,d){function f(a){var c=a.nodeType;if(1==c){if(!b.test(a.className)){for(c=a.firstChild;c;c=c.nextSibling)f(c);c=a.nodeName.toLowerCase();if("br"===c||"li"===c)v[l]="\n",n[l<<1]=A++,n[l++<<1|1]=a}}else if(3==c||4==c)c=a.nodeValue,c.length&&(c=d?c.replace(/\r\n?/g,"\n"):c.replace(/[ \t\r\n]+/g,
+" "),v[l]=c,n[l<<1]=A,A+=c.length,n[l++<<1|1]=a)}var b=/(?:^|\s)nocode(?:\s|$)/,v=[],A=0,n=[],l=0;f(a);return{a:v.join("").replace(/\n$/,""),c:n}}function J(a,d,f,b,v){f&&(a={h:a,l:1,j:null,m:null,a:f,c:null,i:d,g:null},b(a),v.push.apply(v,a.g))}function V(a){for(var d=void 0,f=a.firstChild;f;f=f.nextSibling)var b=f.nodeType,d=1===b?d?a:f:3===b?W.test(f.nodeValue)?a:d:d;return d===a?void 0:d}function G(a,d){function f(a){for(var l=a.i,m=a.h,c=[l,"pln"],p=0,w=a.a.match(v)||[],r={},e=0,t=w.length;e<
+t;++e){var z=w[e],q=r[z],g=void 0,h;if("string"===typeof q)h=!1;else{var k=b[z.charAt(0)];if(k)g=z.match(k[1]),q=k[0];else{for(h=0;h<A;++h)if(k=d[h],g=z.match(k[1])){q=k[0];break}g||(q="pln")}!(h=5<=q.length&&"lang-"===q.substring(0,5))||g&&"string"===typeof g[1]||(h=!1,q="src");h||(r[z]=q)}k=p;p+=z.length;if(h){h=g[1];var B=z.indexOf(h),D=B+h.length;g[2]&&(D=z.length-g[2].length,B=D-h.length);q=q.substring(5);J(m,l+k,z.substring(0,B),f,c);J(m,l+k+B,h,K(q,h),c);J(m,l+k+D,z.substring(D),f,c)}else c.push(l+
+k,q)}a.g=c}var b={},v;(function(){for(var f=a.concat(d),l=[],m={},c=0,p=f.length;c<p;++c){var w=f[c],r=w[3];if(r)for(var e=r.length;0<=--e;)b[r.charAt(e)]=w;w=w[1];r=""+w;m.hasOwnProperty(r)||(l.push(w),m[r]=null)}l.push(/[\0-\uffff]/);v=T(l)})();var A=d.length;return f}function y(a){var d=[],f=[];a.tripleQuotedStrings?d.push(["str",/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+null,"'\""]):a.multiLineStrings?d.push(["str",/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):d.push(["str",/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);a.verbatimStrings&&f.push(["str",/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);var b=a.hashComments;b&&(a.cStyleComments?(1<b?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
+null,"#"]),f.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/,null]));if(b=a.regexLiterals){var v=(b=1<b?"":"\n\r")?".":"[\\S\\s]";f.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+
+("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+v+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+v+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&f.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&f.push(["kwd",new RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i,
+null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(b),null]);return G(d,f)}function L(a,d,f){function b(a){var c=a.nodeType;if(1==c&&!A.test(a.className))if("br"===a.nodeName)v(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((3==c||4==c)&&f){var d=a.nodeValue,q=d.match(n);q&&(c=d.substring(0,q.index),a.nodeValue=c,(d=d.substring(q.index+q[0].length))&&
+a.parentNode.insertBefore(l.createTextNode(d),a.nextSibling),v(a),c||a.parentNode.removeChild(a))}}function v(a){function b(a,c){var d=c?a.cloneNode(!1):a,k=a.parentNode;if(k){var k=b(k,1),e=a.nextSibling;k.appendChild(d);for(var f=e;f;f=e)e=f.nextSibling,k.appendChild(f)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=b(a.nextSibling,0);for(var d;(d=a.parentNode)&&1===d.nodeType;)a=d;c.push(a)}for(var A=/(?:^|\s)nocode(?:\s|$)/,n=/\r\n?|\n/,l=a.ownerDocument,m=l.createElement("li");a.firstChild;)m.appendChild(a.firstChild);
+for(var c=[m],p=0;p<c.length;++p)b(c[p]);d===(d|0)&&c[0].setAttribute("value",d);var w=l.createElement("ol");w.className="linenums";d=Math.max(0,d-1|0)||0;for(var p=0,r=c.length;p<r;++p)m=c[p],m.className="L"+(p+d)%10,m.firstChild||m.appendChild(l.createTextNode("\u00a0")),w.appendChild(m);a.appendChild(w)}function t(a,d){for(var f=d.length;0<=--f;){var b=d[f];I.hasOwnProperty(b)?E.console&&console.warn("cannot override language handler %s",b):I[b]=a}}function K(a,d){a&&I.hasOwnProperty(a)||(a=/^\s*</.test(d)?
+"default-markup":"default-code");return I[a]}function M(a){var d=a.j;try{var f=U(a.h,a.l),b=f.a;a.a=b;a.c=f.c;a.i=0;K(d,b)(a);var v=/\bMSIE\s(\d+)/.exec(navigator.userAgent),v=v&&8>=+v[1],d=/\n/g,A=a.a,n=A.length,f=0,l=a.c,m=l.length,b=0,c=a.g,p=c.length,w=0;c[p]=n;var r,e;for(e=r=0;e<p;)c[e]!==c[e+2]?(c[r++]=c[e++],c[r++]=c[e++]):e+=2;p=r;for(e=r=0;e<p;){for(var t=c[e],z=c[e+1],q=e+2;q+2<=p&&c[q+1]===z;)q+=2;c[r++]=t;c[r++]=z;e=q}c.length=r;var g=a.h;a="";g&&(a=g.style.display,g.style.display="none");
+try{for(;b<m;){var h=l[b+2]||n,k=c[w+2]||n,q=Math.min(h,k),B=l[b+1],D;if(1!==B.nodeType&&(D=A.substring(f,q))){v&&(D=D.replace(d,"\r"));B.nodeValue=D;var N=B.ownerDocument,u=N.createElement("span");u.className=c[w+1];var y=B.parentNode;y.replaceChild(u,B);u.appendChild(B);f<h&&(l[b+1]=B=N.createTextNode(A.substring(q,h)),y.insertBefore(B,u.nextSibling))}f=q;f>=h&&(b+=2);f>=k&&(w+=2)}}finally{g&&(g.style.display=a)}}catch(x){E.console&&console.log(x&&x.stack||x)}}var E=window,C=["break,continue,do,else,for,if,return,while"],
+F=[[C,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,restrict,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],H=[F,"alignas,alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,noexcept,noreturn,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],
+O=[F,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],P=[F,"abstract,add,alias,as,ascending,async,await,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,get,global,group,implicit,in,interface,internal,into,is,join,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,remove,sbyte,sealed,select,set,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,value,var,virtual,where,yield"],
+F=[F,"abstract,async,await,constructor,debugger,enum,eval,export,function,get,implements,instanceof,interface,let,null,set,undefined,var,with,yield,Infinity,NaN"],Q=[C,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],R=[C,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],C=[C,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],
+S=/^(DIR|FILE|array|vector|(de|priority_)?queue|(forward_)?list|stack|(const_)?(reverse_)?iterator|(unordered_)?(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,W=/\S/,X=y({keywords:[H,P,O,F,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",Q,R,C],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),I={};t(X,["default-code"]);t(G([],[["pln",/^[^<?]+/],["dec",
+/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));t(G([["pln",/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,
+"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);t(G([],[["atv",/^[\s\S]+/]]),["uq.val"]);t(y({keywords:H,
+hashComments:!0,cStyleComments:!0,types:S}),"c cc cpp cxx cyc m".split(" "));t(y({keywords:"null,true,false"}),["json"]);t(y({keywords:P,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:S}),["cs"]);t(y({keywords:O,cStyleComments:!0}),["java"]);t(y({keywords:C,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);t(y({keywords:Q,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);t(y({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",
+hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);t(y({keywords:R,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);t(y({keywords:F,cStyleComments:!0,regexLiterals:!0}),["javascript","js","ts","typescript"]);t(y({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,
+regexLiterals:!0}),["coffee"]);t(G([],[["str",/^[\s\S]+/]]),["regex"]);var Y=E.PR={createSimpleLexer:G,registerLangHandler:t,sourceDecorator:y,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:E.prettyPrintOne=function(a,d,f){f=f||!1;d=d||null;var b=document.createElement("div");b.innerHTML="<pre>"+a+"</pre>";
+b=b.firstChild;f&&L(b,f,!0);M({j:d,m:f,h:b,l:1,a:null,i:null,c:null,g:null});return b.innerHTML},prettyPrint:E.prettyPrint=function(a,d){function f(){for(var b=E.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;p<t.length&&c.now()<b;p++){for(var d=t[p],l=g,m=d;m=m.previousSibling;){var n=m.nodeType,u=(7===n||8===n)&&m.nodeValue;if(u?!/^\??prettify\b/.test(u):3!==n||/\S/.test(m.nodeValue))break;if(u){l={};u.replace(/\b(\w+)=([\w:.%+-]+)/g,function(a,b,c){l[b]=c});break}}m=d.className;if((l!==g||r.test(m))&&
+!e.test(m)){n=!1;for(u=d.parentNode;u;u=u.parentNode)if(q.test(u.tagName)&&u.className&&r.test(u.className)){n=!0;break}if(!n){d.className+=" prettyprinted";n=l.lang;if(!n){var n=m.match(w),C;!n&&(C=V(d))&&z.test(C.tagName)&&(n=C.className.match(w));n&&(n=n[1])}if(y.test(d.tagName))u=1;else var u=d.currentStyle,x=v.defaultView,u=(u=u?u.whiteSpace:x&&x.getComputedStyle?x.getComputedStyle(d,null).getPropertyValue("white-space"):0)&&"pre"===u.substring(0,3);x=l.linenums;(x="true"===x||+x)||(x=(x=m.match(/\blinenums\b(?::(\d+))?/))?
+x[1]&&x[1].length?+x[1]:!0:!1);x&&L(d,x,u);M({j:n,h:d,m:x,l:u,a:null,i:null,c:null,g:null})}}}p<t.length?E.setTimeout(f,250):"function"===typeof a&&a()}for(var b=d||document.body,v=b.ownerDocument||document,b=[b.getElementsByTagName("pre"),b.getElementsByTagName("code"),b.getElementsByTagName("xmp")],t=[],n=0;n<b.length;++n)for(var l=0,m=b[n].length;l<m;++l)t.push(b[n][l]);var b=null,c=Date;c.now||(c={now:function(){return+new Date}});var p=0,w=/\blang(?:uage)?-([\w.]+)(?!\S)/,r=/\bprettyprint\b/,
+e=/\bprettyprinted\b/,y=/pre|xmp/i,z=/^code$/i,q=/^(?:pre|code|xmp)$/i,g={};f()}},H=E.define;"function"===typeof H&&H.amd&&H("google-code-prettify",[],function(){return Y})})();}()
diff --git a/aio/src/environments/environment.archive.ts b/aio/src/environments/environment.archive.ts
new file mode 100644
index 000000000000..5100c50a7755
--- /dev/null
+++ b/aio/src/environments/environment.archive.ts
@@ -0,0 +1,6 @@
+// This is for archived sites, which are hosted at https://vX.angular.io, where X is the major Angular version.
+export const environment = {
+  gaId: 'UA-8594346-15', // Production id (since it is linked from the main site)
+  production: true,
+  mode: 'archive'
+};
diff --git a/aio/src/environments/environment.next.ts b/aio/src/environments/environment.next.ts
new file mode 100644
index 000000000000..63682ea65e9e
--- /dev/null
+++ b/aio/src/environments/environment.next.ts
@@ -0,0 +1,6 @@
+// This is for the staging site, which is hosted at https://next.angular.io (and https://aio-staging.firebaseapp.org)
+export const environment = {
+  gaId: 'UA-8594346-15', // Production id (since it is linked from the main site)
+  production: true,
+  mode: 'next'
+};
diff --git a/aio/src/environments/environment.stable.ts b/aio/src/environments/environment.stable.ts
new file mode 100644
index 000000000000..f454b83ddc2c
--- /dev/null
+++ b/aio/src/environments/environment.stable.ts
@@ -0,0 +1,6 @@
+// This is for the production site, which is hosted at https://angular.io
+export const environment = {
+  gaId: 'UA-8594346-15', // Production id
+  production: true,
+  mode: 'stable'
+};
diff --git a/aio/src/environments/environment.ts b/aio/src/environments/environment.ts
new file mode 100644
index 000000000000..2fdfcb911b4d
--- /dev/null
+++ b/aio/src/environments/environment.ts
@@ -0,0 +1,17 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `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, which use use only for tests
+// to make the unit tests work we load these polyfills in tests.ts instead
+// import 'core-js/es6/reflect';
+// import 'core-js/es7/reflect';
+
+
+export const environment = {
+  gaId: 'UA-8594346-26', // Development id
+  production: false,
+  mode: 'stable'
+};
diff --git a/aio/src/extra-files/README.md b/aio/src/extra-files/README.md
new file mode 100644
index 000000000000..55a09439bf47
--- /dev/null
+++ b/aio/src/extra-files/README.md
@@ -0,0 +1,13 @@
+# Extra files folder
+
+This folder is used for extra files that should be included in deployments to firebase.
+
+After the AIO application had been built and before it is deployed all files and folders
+inside the folder with the same name as the current deployment mode (next, stable, archive)
+will be copied to the `dist` folder.
+
+See the `scripts/deploy-to-firebase.sh` script for more detail.
+
+**Note:**
+The `deploy-to-firebase.sh` script always expects there to be a folder for the current deployment
+mode (even if it is empty).
diff --git a/aio/src/extra-files/archive/robots.txt b/aio/src/extra-files/archive/robots.txt
new file mode 100644
index 000000000000..35272cac7255
--- /dev/null
+++ b/aio/src/extra-files/archive/robots.txt
@@ -0,0 +1,3 @@
+# Disallow all URLs (see http://www.robotstxt.org/robotstxt.html)
+User-agent: *
+Disallow: /
diff --git a/aio/src/extra-files/next/robots.txt b/aio/src/extra-files/next/robots.txt
new file mode 100644
index 000000000000..35272cac7255
--- /dev/null
+++ b/aio/src/extra-files/next/robots.txt
@@ -0,0 +1,3 @@
+# Disallow all URLs (see http://www.robotstxt.org/robotstxt.html)
+User-agent: *
+Disallow: /
diff --git a/aio/src/extra-files/stable/robots.txt b/aio/src/extra-files/stable/robots.txt
new file mode 100644
index 000000000000..7ff3ad772b68
--- /dev/null
+++ b/aio/src/extra-files/stable/robots.txt
@@ -0,0 +1,4 @@
+# Allow all URLs (see http://www.robotstxt.org/robotstxt.html)
+User-agent: *
+Disallow:
+Sitemap: https://angular.io/generated/sitemap.xml
diff --git a/aio/src/favicon.ico b/aio/src/favicon.ico
new file mode 100644
index 000000000000..8081c7ceaf2b
Binary files /dev/null and b/aio/src/favicon.ico differ
diff --git a/aio/src/google385281288605d160.html b/aio/src/google385281288605d160.html
new file mode 100644
index 000000000000..0e3614a1959c
--- /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 000000000000..83bd30af94b5
--- /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
new file mode 100644
index 000000000000..99565e7800b0
--- /dev/null
+++ b/aio/src/index.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Angular Docs</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico">
+  <link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png"
+        sizes="32x32">
+  <link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png"
+        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/favicon-16x16.png"
+        sizes="16x16">
+  <link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png">
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-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">
+
+  <script>
+    // Dynamically, pre-emptively, add `noindex`, which will be removed when the doc is ready and valid
+    tag = document.createElement('meta'); tag.name = 'robots'; tag.content = 'noindex';
+    document.head.appendChild(tag);
+  </script>
+
+  <!-- Google Analytics -->
+  <script>
+  // Note this is a customised version of the GA tracking snippet
+  // See the comments below for more info
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
+  ~i.name.indexOf('NG_DEFER_BOOTSTRAP')|| // only load library if not running e2e tests
+  m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  </script>
+  <!-- End Google Analytics -->
+
+  <script>
+    // Report fatal errors to Google Analytics
+    window.onerror = function() {
+      ga('send', 'exception', {exDescription: formatError.apply(null, arguments), exFatal: true});
+
+      function formatError(msg, url, line, col, e) {
+        var stack;
+        msg = msg.replace(/^Error: /, '');
+        if (e) {
+          stack = e.stack
+              // strip the leading "Error: " from the stack trace
+              .replace(/^Error: /, '')
+              // strip the message from the stack trace, if present
+              .replace(msg + '\n', '')
+              // strip leading spaces
+              .replace(/^ +/gm, '')
+              // strip all leading "at " for each frame
+              .replace(/^at /gm, '')
+              // replace long urls with just the last segment: `filename:line:column`
+              .replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm, '@$1\n')
+              // replace "eval code" in Edge
+              .replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm, '@???$1\n')
+        } else {
+          line = line || '?';
+          col = col || '?';
+          stack = url + ':' + line + ':' + col;
+        }
+        return (msg + '\n' + stack).substr(0, 150);
+      }
+    };
+  </script>
+
+  <script nomodule src="generated/ie-polyfills.min.js"></script>
+
+  <script>
+    //load CE polyfill
+    //HACK: webpack's html plugin mangles the document.write calls if we don't trick it.
+
+    //load the ES5 shim for browsers with native CE support
+    function loadCustomElementsShim(){
+      document.write('<scri' + 'pt src="assets/js/native-shim.js"><' + '/script>');
+    }
+
+    //load the full custom elements polyfill for browsers without support
+    function loadCustomElementsPolyfill(){
+      document.write('<scri' + 'pt src="assets/js/custom-elements.min.js"><' + '/script>');
+    }
+    //detect if we have native CE support
+    if(!window.customElements){
+      loadCustomElementsPolyfill();
+    }
+    else {
+      loadCustomElementsShim();
+    }
+  </script>
+
+</head>
+<body>
+
+  <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/karma.conf.js b/aio/src/karma.conf.js
new file mode 100644
index 000000000000..98840de72818
--- /dev/null
+++ b/aio/src/karma.conf.js
@@ -0,0 +1,41 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['CustomChrome'],
+    browserNoActivityTimeout: 60000,
+    singleRun: false,
+    customLaunchers: {
+      CustomChrome: {
+        base: 'Chrome',
+        flags: process.env.TRAVIS && ['--no-sandbox']
+      }
+    }
+  });
+};
diff --git a/aio/src/main.ts b/aio/src/main.ts
new file mode 100644
index 000000000000..2d2f9568880e
--- /dev/null
+++ b/aio/src/main.ts
@@ -0,0 +1,19 @@
+import { enableProdMode, ApplicationRef } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { first } from 'rxjs/operators';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+  if (environment.production && 'serviceWorker' in (navigator as any)) {
+    const appRef: ApplicationRef = ref.injector.get(ApplicationRef);
+    appRef.isStable.pipe(first(v => v)).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 000000000000..7a91805dddb5
--- /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
new file mode 100644
index 000000000000..babba81e97d6
--- /dev/null
+++ b/aio/src/polyfills.ts
@@ -0,0 +1,50 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * 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.
+ */
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
diff --git a/aio/src/pwa-manifest.json b/aio/src/pwa-manifest.json
new file mode 100644
index 000000000000..be24c5fc0c38
--- /dev/null
+++ b/aio/src/pwa-manifest.json
@@ -0,0 +1,20 @@
+{
+  "short_name": "Angular",
+  "name": "Angular",
+  "icons": [
+    {
+      "src":"assets/images/favicons/favicon-194x194.png",
+      "sizes": "194x194 512x512",
+      "type": "image/png"
+    },
+    {
+      "src":"assets/images/favicons/favicon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/?utm_source=homescreen",
+  "background_color": "#1976d2",
+  "theme_color": "#1976d2",
+  "display": "standalone"
+}
diff --git a/aio/src/styles.scss b/aio/src/styles.scss
new file mode 100644
index 000000000000..9576ae3458ee
--- /dev/null
+++ b/aio/src/styles.scss
@@ -0,0 +1,3 @@
+/* You can add global styles to this file, and also import other style files */
+@import './styles/ng-io-theme';
+@import './styles/main.scss';
diff --git a/aio/src/styles/0-base/_base-dir.scss b/aio/src/styles/0-base/_base-dir.scss
new file mode 100644
index 000000000000..73cc3d42e6c7
--- /dev/null
+++ b/aio/src/styles/0-base/_base-dir.scss
@@ -0,0 +1,5 @@
+/* ==============================
+   BASE STYLES
+   ============================== */
+
+@import 'typography';
\ No newline at end of file
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
new file mode 100755
index 000000000000..b83a0604b030
--- /dev/null
+++ b/aio/src/styles/0-base/_typography.scss
@@ -0,0 +1,159 @@
+body {
+  font-family: $main-font;
+  margin: 0;
+  color: $darkgray;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1 {
+  display: inline-block;
+  font-size: 24px;
+  font-weight: 500;
+  margin: 8px 0px;
+
+  @media screen and (max-width: 600px) {
+    margin-top: 0;
+  }
+}
+
+h2 {
+  font-size: 22px;
+  font-weight: 500;
+  margin: 32px 0px 24px;
+  clear: both;
+}
+
+h3 {
+  font-size: 20px;
+  font-weight: 400;
+  margin: 24px 0px 12px;
+  clear: both;
+}
+
+h4 {
+  font-size: 18px;
+  font-weight: 400;
+  margin: 8px 0px;
+  clear: both;
+}
+
+h5 {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 8px 0px;
+  clear: both;
+}
+
+h6 {
+  color: $mediumgray;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 8px 0px;
+  clear: both;
+}
+
+h2, h3, h4, h5, h6 {
+  a {
+    font-size: inherit;
+  }
+
+  @media screen and (max-width: 600px) {
+    margin: 8px 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;
+  font-weight: 400;
+  & > em {
+    letter-spacing: 0.30px;
+  }
+}
+
+ol {
+  li, p {
+    margin: 4px 0;
+  }
+}
+
+li p {
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+.app-toolbar a {
+  font-size: 16px;
+  font-weight: 400;
+  color: white;
+  font-family: $main-font;
+  text-transform: uppercase;
+  padding: 21px 0;
+}
+
+strong {
+  font-weight: 500;
+}
+
+table {
+  border-collapse: collapse;
+  border-radius: 2px;
+  border-spacing: 0;
+  margin: 12px 0 32px;
+}
+
+table tbody th {
+  max-width: 100px;
+  padding: 13px 32px;
+  text-align: left;
+}
+
+td {
+  font-weight: 400;
+  padding: 8px 30px;
+  letter-spacing: 0.30px;
+
+  p {
+    margin: 0;
+  }
+}
+
+th {
+  font-size: 16px;
+  font-weight: 500;
+  padding: 13px 32px;
+  text-align: left;
+}
+
+p > code, li > code, td > code, th > code {
+  font-family: $code-font;
+  font-size: 85%;
+  color: $darkgray;
+  letter-spacing: 0;
+  line-height: 1;
+  padding: 2px 0;
+  background-color: $backgroundgray;
+  border-radius: 4px;
+}
+
+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-pages.scss b/aio/src/styles/1-layouts/_api-pages.scss
new file mode 100644
index 000000000000..a819b1192f35
--- /dev/null
+++ b/aio/src/styles/1-layouts/_api-pages.scss
@@ -0,0 +1,46 @@
+.api-body {
+
+    max-width: 1200px;
+
+    table {
+        margin: 12px 0 24px;
+
+        th {
+            text-transform: none;
+            font-size: 16px;
+            font-weight: bold;
+        }
+
+        tr {
+            border-bottom: 1px solid $lightgray;
+        }
+
+        td {
+            vertical-align: middle;
+        }
+
+        hr {
+            margin: 16px 0;
+        }
+
+        tr:last-child {
+            border-bottom: none;
+        }
+
+        &.item-table {
+            td {
+                padding: 32px;
+            }
+        }
+
+        &.list-table {
+            td {
+                padding: 16px 24px;
+            }
+        }
+
+        .short-description {
+            margin-left: 0;
+        }
+    }
+}
\ 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
new file mode 100644
index 000000000000..4f31cd173b91
--- /dev/null
+++ b/aio/src/styles/1-layouts/_content-layout.scss
@@ -0,0 +1,39 @@
+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;
+  }
+}
+
+.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 {
+  width: 100%;
+  height: 100vh;
+}
+
+.sidenav-content button {
+  min-width: 24px;
+}
+
+#guide-change-log h2::before {
+  content: "";
+  display: block;
+  height: 1px;
+  margin: 24px 0px;
+  background: $lightgray;
+}
diff --git a/aio/src/styles/1-layouts/_doc-viewer.scss b/aio/src/styles/1-layouts/_doc-viewer.scss
new file mode 100644
index 000000000000..928f2c666bed
--- /dev/null
+++ b/aio/src/styles/1-layouts/_doc-viewer.scss
@@ -0,0 +1,4 @@
+.no-animations aio-doc-viewer > * {
+  // Disable view transition animations.
+  transition: none !important;
+}
diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss
new file mode 100644
index 000000000000..5cf5d98e98d8
--- /dev/null
+++ b/aio/src/styles/1-layouts/_footer.scss
@@ -0,0 +1,110 @@
+footer {
+  position: relative;
+  line-height: 24px;
+  flex: 1;
+  padding: 48px;
+  z-index: 0;
+  background-color: $blue;
+  color: $offwhite;
+  font-weight: 300;
+
+  aio-footer {
+    position: relative;
+    z-index: 0;
+  }
+
+  .footer-block {
+    margin: 0 24px;
+    vertical-align: top;
+  }
+
+  a {
+      color: $offwhite;
+      font-weight: 300;
+      text-decoration: none;
+      z-index: 20;
+      position: relative;
+      &:hover {
+        text-decoration: underline;
+      }
+      &:visited {
+        text-decoration: none;
+      }
+  }
+  a.action {
+    cursor: pointer;
+  }
+  h3 {
+    font-size: 16px;
+    text-transform: uppercase;
+    font-weight: 400;
+    margin: 0 0 16px;
+  }
+  p {
+    text-align: center;
+    margin: 10px 0px 5px;
+
+    @media (max-width: 480px) {
+      text-align: left;
+    }
+  }
+
+  div.grid-fluid {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    justify-content: center;
+
+    text-align: left;
+    margin: 0 0 40px;
+
+    ul {
+      list-style-position: inside;
+      padding: 0px;
+      margin: 0px;
+
+      li {
+        list-style-type: none;
+        padding: 0px;
+        text-align: left;
+      }
+    }
+
+    @media (max-width: 480px) {
+      flex-direction: column;
+      .footer-block {
+        margin: 8px 24px;
+      }
+    }
+  }
+
+
+
+
+  @media (max-width: 700px) {
+    h3 {
+      font-size: 110%;
+    }
+  }
+  @media (max-width: 600px) {
+    h3 {
+      font-size: 100%;
+    }
+  }
+}
+
+footer::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background:
+        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 160px repeat;
+    opacity: 0.05;
+    background-size: 320px auto;
+}
diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss
new file mode 100644
index 000000000000..769c5c9ca863
--- /dev/null
+++ b/aio/src/styles/1-layouts/_layout-global.scss
@@ -0,0 +1,51 @@
+html, body {
+    height: 100%;
+}
+
+body {
+    background-color: $offwhite;
+}
+
+.clearfix {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.clear {
+    clear: both;
+}
+
+.l-clearfix:after, .clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.is-visible {
+    display: block!important;
+}
+
+.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
new file mode 100644
index 000000000000..e9d687bef683
--- /dev/null
+++ b/aio/src/styles/1-layouts/_layouts-dir.scss
@@ -0,0 +1,14 @@
+/* ==============================
+   LAYOUT STYLES
+   ============================== */
+
+@import 'api-pages';
+@import 'content-layout';
+@import 'doc-viewer';
+@import 'footer';
+@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
new file mode 100644
index 000000000000..f90c0ec4ec4d
--- /dev/null
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -0,0 +1,446 @@
+.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: 480px) {
+    max-height: 486px;
+    padding-top: 40px;
+    transform: 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;
+  flex-wrap: wrap;
+  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) {
+      mat-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) {
+  mat-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) {
+      display: block;
+  }
+}
+
+.layout-row {
+    flex-direction: row;
+}
+
+.home-rows {
+    overflow: hidden;
+    @media (max-width: 600px) {
+      margin: 0;
+    }
+}
+
+.background-superhero-paper {
+    background-size: 100%;
+    background-blend-mode: multiply;
+}
+
+.home-row {
+  max-width: 920px;
+  margin: 32px auto;
+
+  .promo-img-container, .text-container {
+    max-width: 50%;
+
+    @media(max-width: 480px) {
+      max-width: 100%;
+      text-align: center;
+
+      &:nth-child(even) {
+        flex-direction: column-reverse;
+      }
+    }
+  }
+
+  .text-block {
+    padding-right: 15%;
+
+    @media(max-width: 600px) {
+      padding: 0;
+    }
+  }
+
+  .promo-img-container {
+
+    img {
+      max-width: 90% !important;
+    }
+
+    p {
+      margin: 0 20px;
+    }
+
+    img {
+      max-width: 90%;
+
+
+      @media (max-width: 599px) {
+        max-width: 100%;
+        float: initial !important;
+      }
+    }
+  }
+}
+
+.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 000000000000..d599aa3b9a29
--- /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
new file mode 100644
index 000000000000..2e8b8c7bafd5
--- /dev/null
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -0,0 +1,195 @@
+// Disable sidenav animations for the initial render.
+.starting.mat-drawer-transition .mat-drawer-content {
+  transition: none;
+}
+
+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;
+  }
+}
+
+mat-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);
+
+  &.collapsed {
+    top: 56px;
+  }
+}
+
+mat-sidenav-container.sidenav-container {
+  min-height: 100%;
+  height: auto !important;
+  max-width: 100%;
+  margin: 0;
+  transform: none;
+
+  &.has-floating-toc {
+    max-width: 82%;
+  }
+}
+
+mat-sidenav-container div.mat-sidenav-content {
+  height: auto;
+}
+
+.vertical-menu-item {
+  box-sizing: border-box;
+  color: $darkgray;
+  cursor: pointer;
+  display: block;
+  max-width: 260px;
+  overflow-wrap: break-word;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  text-decoration: none;
+  text-align: left;
+  width: 93%;
+  word-wrap: break-word;
+
+  &:hover {
+    background-color: $lightgray;
+    color: $blue;
+    text-shadow: 0 0 5px #ffffff;
+  }
+
+  &:focus {
+    outline: $accentblue auto 2px;
+  }
+
+  //icons _within_ nav
+  .mat-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 4px;
+  }
+}
+
+.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: $darkgray;
+  cursor: pointer;
+  position: relative;
+  text-transform: uppercase;
+}
+
+.heading-children.expanded {
+  visibility: visible;
+  opacity: 1;
+  max-height: 4000px; // Arbitrary max-height. Can increase if needed. Must have measurement to transition height.
+  transition: visibility 500ms, opacity 500ms, max-height 500ms;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+
+.heading-children.collapsed {
+  visibility: hidden;
+  opacity: 0;
+  max-height: 1px; // Must have measurement to transition height.
+  transition: visibility 275ms, opacity 275ms, max-height 280ms;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+
+.no-animations {
+  .heading-children.expanded, .heading-children.collapsed {
+    transition: none! important;
+  }
+}
+
+.level-1 {
+  font-family: $main-font;
+  font-size: 14px;
+  font-weight: 400;
+  margin-left: 14px;
+  transition: background-color 0.2s;
+  text-transform: uppercase;
+}
+
+.level-2 {
+  color: $mediumgray;
+  font-family: $main-font;
+  font-size: 14px;
+  font-weight: 400;
+  margin-left: 12px;
+  text-transform: none;
+}
+
+.level-3 {
+  color: $mediumgray;
+  font-family: $main-font;
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
+  @include rotate(90deg);
+}
+
+.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
+  @include rotate(0deg);
+}
+
+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
+mat-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 000000000000..86a0e5194aad
--- /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
new file mode 100644
index 000000000000..0488d764a537
--- /dev/null
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -0,0 +1,225 @@
+// VARIABLES
+$hamburgerShownMargin: 0 8px 0 0;
+$hamburgerHiddenMargin: 0 16px 0 -88px;
+
+// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
+mat-toolbar.mat-toolbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+
+  mat-toolbar-row {
+    padding: 0 16px 0 0;
+  }
+
+  mat-icon {
+    color: $white;
+  }
+}
+
+// HOME PAGE OVERRIDE: TOPNAV TOOLBAR
+aio-shell.page-home mat-toolbar.mat-toolbar {
+  background-color: $blue;
+
+  @media (min-width: 481px) {
+    &:not(.transitioning) {
+      background-color: transparent;
+      transition: background-color 0.2s linear;
+    }
+  }
+}
+
+// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
+aio-shell.page-home mat-toolbar.mat-toolbar,
+aio-shell.page-features mat-toolbar.mat-toolbar,
+aio-shell.page-events mat-toolbar.mat-toolbar,
+aio-shell.page-resources mat-toolbar.mat-toolbar {
+  box-shadow: none;
+
+  // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
+  @media (min-width: 481px) {
+    position: absolute;
+  }
+}
+
+// DOCS PAGES OVERRIDE: HAMBURGER
+aio-shell.folder-api mat-toolbar.mat-toolbar,
+aio-shell.folder-docs mat-toolbar.mat-toolbar,
+aio-shell.folder-guide mat-toolbar.mat-toolbar,
+aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
+  @media (min-width: 992px) {
+    .hamburger.mat-button {
+      // Hamburger shown on non-marketing pages on large screens.
+      margin: $hamburgerShownMargin;
+    }
+  }
+}
+
+// HAMBURGER BUTTON
+.hamburger.mat-button {
+  height: 100%;
+  margin: $hamburgerShownMargin;
+  padding: 0;
+
+  @media (min-width: 992px) {
+    // Hamburger hidden by default on large screens.
+    // (Will be shown per doc.)
+    margin: $hamburgerHiddenMargin;
+  }
+
+  @media (max-width: 480px) {
+    min-width: 15%;
+  }
+
+  &:not(.starting) {
+    transition-duration: 0.4s;
+    transition-property: color, margin;
+    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+  }
+
+  &:hover {
+    color: $offwhite;
+  }
+
+  & .mat-icon {
+    color: white;
+    position: inherit;
+  }
+}
+
+// HOME NAV-LINK
+.nav-link.home {
+  cursor: pointer;
+  margin: 0 16px 0 0;
+  padding: 21px 0;
+
+  @media screen and (max-width: 480px) {
+    margin-right: 8px;
+  }
+
+  img {
+    position: relative;
+    margin-top: -21px;
+    top: 12px;
+    height: 40px;
+
+    @media (max-width: 992px) {
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+
+// TOP MENU
+aio-top-menu {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 80%;
+
+  ul {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    list-style-position: inside;
+    padding: 0px;
+    margin: 0px;
+
+    li {
+      padding-bottom: 2px;
+      list-style-type: none;
+      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;
+    }
+  }
+}
+
+// SEARCH BOX
+aio-search-box.search-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  min-width: 150px;
+  height: 100%;
+
+  input {
+    color: $darkgray;
+    border: none;
+    border-radius: 100px;
+    background-color: $offwhite;
+    padding: 5px 16px;
+    margin-left: 8px;
+    width: 180px;
+    max-width: 240px;
+    height: 50%;
+    -webkit-appearance: none;
+
+    &:focus {
+      outline: none;
+    }
+
+    @include bp(big) {
+      transition: width 0.4s ease-in-out;
+
+      &:focus {
+        width: 50%;
+      }
+    }
+    @media (max-width: 480px) {
+      width: 150px;
+    }
+  }
+}
+
+// EXTERNAL LINK ICONS
+.app-toolbar {
+  .toolbar-external-icons-container {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+
+    a {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      @media screen and (max-width: 480px) {
+        margin-left: 8px;
+      }
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      img {
+        height: 24px;
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_alert.scss b/aio/src/styles/2-modules/_alert.scss
new file mode 100644
index 000000000000..213e4fc88f3a
--- /dev/null
+++ b/aio/src/styles/2-modules/_alert.scss
@@ -0,0 +1,44 @@
+.alert {
+    padding: 16px;
+    margin: 24px 0px;
+    font-size: 14px;
+    color: $darkgray;
+    width: 100%;
+    box-sizing: border-box;
+    clear: both;
+
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: 500;
+    }
+
+    &.is-critical {
+        border-left: 8px solid $brightred;
+        background-color: rgba($brightred, 0.05);
+
+        h1, h2, h3, h4, h5, h6 {
+            color: $brightred;
+        }
+    }
+
+    &.is-important {
+        border-left: 8px solid $orange;
+        background-color: rgba($orange, 0.05);
+
+        h1, h2, h3, h4, h5, h6 {
+            color: $orange;
+        }
+    }
+
+    &.is-helpful {
+        border-left: 8px solid $blue;
+        background-color: rgba($blue, 0.05);
+
+        h1, h2, h3, h4, h5, h6 {
+            color: $blue;
+        }
+    }
+
+    > * {
+        margin: 8px 16px;
+    }
+}
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
new file mode 100644
index 000000000000..d3428e1545f9
--- /dev/null
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -0,0 +1,320 @@
+/* API EDIT ICON */
+#api {
+  .api-filter .material-icons {
+    right: 48px;
+  }
+}
+
+/* API LIST STYLES */
+
+aio-api-list {
+    div.form-search i.material-icons {
+        width: 20px;
+        pointer-events: none;
+    }
+
+    .form-search input {
+        width: 182px;
+    }
+
+    .api-list-container {
+      display: flex;
+      flex-direction: column;
+      margin: 0 auto;
+
+      h2 {
+        margin-top: 16px;
+      }
+    }
+}
+
+.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;
+    }
+
+    &: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: 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;
+  font-size: inherit;
+
+  &: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 000000000000..55e273408fbe
--- /dev/null
+++ b/aio/src/styles/2-modules/_api-pages.scss
@@ -0,0 +1,111 @@
+.github-links {
+  float: right;
+  .material-icons {
+    border-radius: 4px;
+    padding: 4px;
+    font-size: 20px;
+    &:hover {
+      background-color: $mist;
+    }
+  }
+}
+
+.api-header {
+  display: flex;
+  align-items: center;
+
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.api-body {
+
+  .class-overview {
+    position: relative;
+
+    code-example {
+        clear: left;
+    }
+  }
+
+  .method-table, .option-table, .list-table {
+    .with-github-links {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+
+      .github-links {
+        a {
+          color: $mediumgray;
+          .material-icons:hover {
+            background: none;
+            color: $blue;
+          }
+        }
+      }
+    }
+
+    h3 {
+      margin: 6px 0;
+      font-weight: bold;
+      clear: left;
+    }
+
+    h4 {
+      font-size: 14px;
+      font-weight: bold;
+      margin-top: 12px;
+    }
+  }
+
+  .api-heading {
+    padding: 5px 0;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .short-description {
+    margin: 6px 0 0 10px;
+  }
+
+  .properties-table {
+    font-size: 14px;
+
+    thead th {
+      &:nth-child(1) {
+        width: 20%;
+      }
+      &:nth-child(2) {
+        width: 20%;
+      }
+    }
+  }
+
+  .parameters-table {
+    margin-top: 0;
+    font-size: 14px;
+    td:nth-child(1) {
+      width: 20%;
+    }
+  }
+
+  details.overloads {
+    margin-left: -8px;
+
+    summary {
+      height: inherit;
+      padding: 8px 12px;
+      h4 {
+        margin: 0;
+        clear: left;
+      }
+    }
+}
+
+  .from-constructor, .read-only-property {
+    font-style: italic;
+    color: $blue;
+  }
+}
diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/_buttons.scss
new file mode 100644
index 000000000000..deb6086d3039
--- /dev/null
+++ b/aio/src/styles/2-modules/_buttons.scss
@@ -0,0 +1,118 @@
+/* Button Styles */
+
+.button,
+a.button.mat-button {
+  display: inline-block;
+  line-height: 32px;
+  padding: 0px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  border-radius: 3px;
+  text-decoration: none;
+  text-transform: uppercase;
+  overflow: hidden;
+  border: none;
+
+  // SIZES
+  &.button-small {
+    font-size: 12px;
+    line-height: 24px;
+    padding: 0px 8px;
+  }
+
+  &.button-large {
+    font-size: 15px;
+    line-height: 48px;
+    padding: 0px 24px;
+  }
+
+  &.button-x-large {
+    font-size: 16px;
+    line-height: 56px;
+    padding: 0px 24px;
+  }
+
+
+  // COLORS
+
+  &.button-secondary {
+    background: $mediumgray;
+    color: rgba($white, .87);
+  }
+
+  &.button-plain {
+    background: $white;
+    color: rgba($darkgray, .87);
+  }
+
+  &.button-subtle {
+    background: $mediumgray;
+    color: darken($offwhite, 10%);
+
+    &:hover {
+      color: rgba($white, 0.7);
+    }
+  }
+
+  &.button-blue {
+    background: $blue;
+    color: rgba($white, .87);
+
+    &:hover {
+      color: rgba($white, 0.7);
+    }
+  }
+
+  &.button-banner {
+    background: $darkgray;
+    color: rgba($white, .87);
+  }
+
+  &.button-shield,
+  &.button-shield.mat-button {
+    background-color: $blue;
+    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;
+
+    }
+  }
+}
+
+.cta-bar {
+  text-align: center;
+
+  .button {
+    margin: 0px 8px;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+    transition: all .2s ease-in-out;
+    &:hover {
+        transform: scale(1.1);
+        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;
+  }
+}
+
+[mat-button], [mat-raised-button], [mat-button], [mat-raised-button] {
+  text-transform: uppercase;
+}
diff --git a/aio/src/styles/2-modules/_callout.scss b/aio/src/styles/2-modules/_callout.scss
new file mode 100644
index 000000000000..b11f85d70208
--- /dev/null
+++ b/aio/src/styles/2-modules/_callout.scss
@@ -0,0 +1,49 @@
+.callout {
+  @extend .alert;
+  padding: 0px;
+  border-left: none !important;
+  border-radius: 4px;
+
+  header {
+    color: $white;
+    line-height: 24px;
+    font-weight: 500;
+    padding: 8px 16px;
+    margin: 0;
+    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;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/_card.scss
new file mode 100644
index 000000000000..294cd7a01d4e
--- /dev/null
+++ b/aio/src/styles/2-modules/_card.scss
@@ -0,0 +1,98 @@
+.card-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 24px 0;
+}
+
+.docs-card {
+  @include card(194px, 30%);
+  max-width: 340px;
+  min-width: 262px;
+  margin: 24px 8px;
+  padding-bottom: 48px;
+  position: relative;
+
+  &:hover {
+    text-decoration: none;
+
+    section {
+      color: $blue;
+    }
+
+    p {
+      color: $darkgray;
+      padding: 0 16px;
+    }
+
+    .card-footer {
+      line-height: 32px;
+      padding: 8px 16px;
+      background-color: rgba($blue, 0.1);
+      color: $blue;
+    }
+  }
+
+
+  section {
+    color: $darkgray;
+    font-size: 20px;
+    line-height: 24px;
+    margin: 0;
+    padding: 32px 0 24px;
+    text-transform: none;
+    text-align: center;
+  }
+
+  p {
+    color: $darkgray;
+    font-size: 13px;
+    line-height: 24px;
+    padding: 0 16px;
+    margin: 0;
+    text-align: center;
+  }
+
+  .card-footer {
+    bottom: 0;
+    border-top: 0.5px solid $lightgray;
+    box-sizing: border-box;
+    line-height: 48px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    color: $mediumgray;
+
+    a {
+      color: $mediumgray;
+      font-size: 13px;
+    }
+  }
+  .card-footer.center {
+    text-align: center;
+  }
+}
+
+.card-section {
+  @include card(auto, 90%);
+  padding: 16px 32px;
+  margin: 16px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  // Removes on-hover effect from card mixin
+  &:hover {
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 8px 0;
+  }
+
+  a, .button, button {
+    text-align: center;
+  }
+
+}
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
new file mode 100644
index 000000000000..173f52427421
--- /dev/null
+++ b/aio/src/styles/2-modules/_code.scss
@@ -0,0 +1,200 @@
+code-example, code-tabs {
+    clear: both;
+    display: block;
+}
+
+code-example {
+
+
+  &:not(.no-box) {
+    background-color: rgba($backgroundgray, 0.2);
+    border: 0.5px solid $lightgray;
+    border-radius: 5px;
+    color: $darkgray;
+    margin: 16px auto;
+  }
+
+  &.no-box {
+    pre {
+      margin: 0;
+    }
+    code {
+      background-color: transparent;
+    }
+  }
+
+  code {
+    overflow: auto;
+  }
+}
+
+code-example, code-tabs {
+  .mat-card {
+    padding: 0;
+    border-radius: 5px;
+  }
+  code {
+    overflow: auto;
+  }
+}
+
+// TERMINAL / SHELL TEXT STYLES
+
+code-example.code-shell, code-example[language=sh], code-example[language=bash] {
+  background-color: $darkgray;
+}
+
+code-example header {
+  background-color: $accentblue;
+  border-radius: 5px 5px 0 0;
+  color: $offwhite;
+  font-size: 16px;
+  padding: 8px 16px;
+}
+
+code-example.avoid header,
+code-example.avoidFile header {
+  border: 2px solid $anti-pattern;
+  background: $anti-pattern;
+}
+
+code-example.avoid,
+code-example.avoidFile,
+code-tabs.avoid mat-tab-body,
+code-tabs.avoidFile mat-tab-body {
+  border: 0.5px solid $anti-pattern;
+}
+
+code-tabs div .mat-tab-body-content {
+  height: auto;
+}
+
+code-tabs .mat-tab-body-wrapper mat-tab-body .mat-tab-body {
+  overflow-y: hidden;
+}
+
+code-tabs mat-tab-body-content .fadeIn {
+  animation: opacity 2s ease-in;
+}
+
+aio-code pre {
+    display: flex;
+    min-height: 32px;
+    margin: 16px 24px;
+    white-space: pre-wrap;
+    align-items: center;
+
+    code span {
+      line-height: 24px;
+    }
+}
+
+
+.code-missing {
+  color: $darkred;
+}
+
+
+.copy-button {
+  position: absolute;
+  top: -7px;
+  right: -19px;
+  padding: 0;
+
+  color: $blue-grey-200;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  &:hover {
+    color: $mediumgray;
+  }
+}
+
+.lang-sh .copy-button, .lang-bash .copy-button {
+  color: $mediumgray;
+  &:hover {
+    color: $lightgray;
+  }
+}
+
+.code-tab-group .mat-tab-label {
+  &:hover {
+    background: rgba(black, 0.04);
+  }
+  white-space: nowrap;
+}
+
+.code-tab-group .mat-tab-body-content {
+  height: auto;
+  transform: none;
+}
+
+
+[role="tabpanel"] {
+    transition: none;
+}
+
+.sidenav-content code a {
+  color: inherit;
+  font-size: inherit;
+}
+
+/* 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 */
+
+code-example.code-shell, code-example[language=sh], code-example[language=bash] {
+  .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
+    color: $codegreen;
+  }
+}
diff --git a/aio/src/styles/2-modules/_contribute.scss b/aio/src/styles/2-modules/_contribute.scss
new file mode 100644
index 000000000000..73cf42950273
--- /dev/null
+++ b/aio/src/styles/2-modules/_contribute.scss
@@ -0,0 +1,19 @@
+.contribute-container {
+  h2 {
+    margin: 0;
+  }
+
+  .card-section {
+    justify-content: space-between;
+    max-width: 880px;
+
+    > :first-child {
+      margin-right: 2rem;
+      width: 60%;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss
new file mode 100644
index 000000000000..aec293f8ca9a
--- /dev/null
+++ b/aio/src/styles/2-modules/_contributor.scss
@@ -0,0 +1,187 @@
+aio-contributor-list {
+  @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
+    .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;
+      margin-right: 20px;
+      float: none;
+      display: block;
+      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 {
+  background: $white;
+  margin: 8px;
+  position: relative;
+  cursor: pointer;
+  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;
+  perspective: 800px;
+
+  &:hover {
+    transform: translate3d(0,-3px,0);
+    box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);
+
+    .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%;
+
+    [mat-button] {
+      color: $white;
+      font-size: 14px;
+      font-weight: 500;
+      margin: 8px;
+      padding: 0;
+
+      &: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;
+
+    h3 {
+      margin: 8px 0;
+    }
+
+    .card-front, .card-back {
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+    }
+
+    .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;
+      }
+
+      p {
+        margin: 8px 0;
+        font-size: 12px;
+        line-height: 14px;
+        text-align: left;
+      }
+
+    }
+
+    &.flipped {
+      transform:rotateY(180deg);
+      .card-front {
+        display: none;
+      }
+    }
+  }
+
+  .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;
+  }
+
+  section {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 8px;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+  }
+
+  p {
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 18px;
+    margin: 8px 16px;
+    text-overflow: ellipsis;
+    overflow: scroll;
+    font-weight: 400;
+  }
+}
diff --git a/aio/src/styles/2-modules/_deploy-theme.scss b/aio/src/styles/2-modules/_deploy-theme.scss
new file mode 100644
index 000000000000..3858b66ce759
--- /dev/null
+++ b/aio/src/styles/2-modules/_deploy-theme.scss
@@ -0,0 +1,50 @@
+
+aio-shell.mode-archive {
+
+  .mat-toolbar.mat-primary, footer {
+    background: linear-gradient(145deg,#263238,#78909C);
+  }
+
+  .vertical-menu-item {
+    &.selected, &:hover {
+      color: #263238;
+    }
+  }
+
+  .toc-inner ul.toc-list li.active a {
+    color: #263238;
+
+    &:before {
+      background-color: #263238;
+    }
+  }
+
+  .toc-inner ul.toc-list li:hover a {
+    color: #263238;
+  }
+}
+
+aio-shell.mode-next {
+
+  .mat-toolbar.mat-primary, footer {
+    background: linear-gradient(145deg,#DD0031,#C3002F);
+  }
+
+  .vertical-menu-item {
+    &.selected, &:hover {
+      color: #DD0031;
+    }
+  }
+
+  .toc-inner ul.toc-list li.active a {
+    color: #DD0031;
+
+    &:before {
+      background-color: #DD0031;
+    }
+  }
+
+  .toc-inner ul.toc-list li:hover a {
+    color: #DD0031;
+  }
+}
diff --git a/aio/src/styles/2-modules/_details.scss b/aio/src/styles/2-modules/_details.scss
new file mode 100644
index 000000000000..32728d80265f
--- /dev/null
+++ b/aio/src/styles/2-modules/_details.scss
@@ -0,0 +1,48 @@
+/*
+ * 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
+  }
+
+  &::before {
+    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
+    float: right;
+  }
+}
+
+details {
+  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+
+  .detail-contents {
+    padding: 16px 24px;
+  }
+
+  &[open] > summary::before {
+    @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 000000000000..54aeb1c5f7e5
--- /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
new file mode 100644
index 000000000000..ffe8f92e278d
--- /dev/null
+++ b/aio/src/styles/2-modules/_features.scss
@@ -0,0 +1,38 @@
+// FEATURES MARKETING PAGE SPECIFIC STYLES
+
+.feature-section {
+  margin: 0 0 32px;
+
+  .feature-header, .text-headline {
+    text-align: center;
+  }
+
+  .feature-header img {
+    margin: 16px;
+  }
+
+  .feature-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 8px 0px;
+    clear: both;
+  }
+
+  .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
new file mode 100644
index 000000000000..e3b4ae84999c
--- /dev/null
+++ b/aio/src/styles/2-modules/_filetree.scss
@@ -0,0 +1,38 @@
+.filetree {
+  background: $offwhite;
+  border: 4px solid $lightgray;
+  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: 24px;
+    position: relative;
+    overflow: hidden;
+
+    .file {
+      position: relative;
+
+      &:before {
+        content: '';
+        left: -18px;
+        bottom: 16px;
+        width: 16px;
+        height: 9999px;
+        position: absolute;
+        border-width: 0 0 1px 1px;
+        border-style: solid;
+        border-color: $lightgray;
+        border-radius: 0 0 0 3px;
+      }
+    }
+  }
+}
\ No newline at end of file
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 000000000000..cbf88cf111e2
--- /dev/null
+++ b/aio/src/styles/2-modules/_heading-anchors.scss
@@ -0,0 +1,18 @@
+.sidenav-content {
+  h1, h2, h3, h4, h5, h6 {
+
+    .header-link {
+      color: $mediumgray;
+      margin: 0 4px;
+      text-decoration: none;
+      user-select: none;
+      visibility: hidden;
+      display: inline-block;
+      vertical-align: text-top;
+    }
+
+    &:hover .header-link {
+      visibility: visible;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_hr.scss b/aio/src/styles/2-modules/_hr.scss
new file mode 100644
index 000000000000..eacfad9b2df2
--- /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
new file mode 100644
index 000000000000..b0d1bd0c4a5b
--- /dev/null
+++ b/aio/src/styles/2-modules/_images.scss
@@ -0,0 +1,46 @@
+.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;
+    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
+    margin: 0 0 14px 0;
+
+    img {
+      border-radius: 4px;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_label.scss b/aio/src/styles/2-modules/_label.scss
new file mode 100644
index 000000000000..67d546e2c86a
--- /dev/null
+++ b/aio/src/styles/2-modules/_label.scss
@@ -0,0 +1,67 @@
+label.raised, .api-header label {
+    border-radius: 4px;
+    padding: 4px 16px;
+    display: inline;
+    font-size: 14px;
+    color: white;
+    margin-right: 8px;
+    font-weight: 500;
+    text-transform: uppercase;
+
+    @media screen and (max-width: 600px) {
+        display: block;
+        margin: 8px 0;
+    }
+
+    &.page-label {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        background-color: $mist;
+        color: $mediumgray;
+        margin-bottom: 8px;
+        width: 140px;
+
+        .material-icons {
+            margin-right: 8px;
+        }
+    }
+
+    &.property-type-label {
+        font-size: 12px;
+        background-color: $darkgray;
+        color: $white;
+        text-transform: none;
+    }
+}
+
+.api-header label {
+
+    // The API badges should be a little smaller
+    padding: 2px 10px;
+    font-size: 12px;
+
+    @media screen and (max-width: 600px) {
+        margin: 4px 0;
+    }
+
+    &.api-status-label {
+        background-color: $mediumgray;
+
+        &.impure-pipe {
+            background-color: $brightred;
+        }
+    }
+
+    &.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/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
new file mode 100644
index 000000000000..3584f91dc7e6
--- /dev/null
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -0,0 +1,31 @@
+/* ==============================
+   MODULE STYLES
+   ============================== */
+
+   @import 'alert';
+   @import 'api-pages';
+   @import 'api-list';
+   @import 'buttons';
+   @import 'callout';
+   @import 'card';
+   @import 'code';
+   @import 'contribute';
+   @import 'contributor';
+   @import 'details';
+   @import 'edit-page-cta';
+   @import 'features';
+   @import 'filetree';
+   @import 'heading-anchors';
+   @import 'hr';
+   @import 'images';
+   @import 'progress-bar';
+   @import 'table';
+   @import 'presskit';
+   @import 'resources';
+   @import 'scrollbar';
+   @import 'search-results';
+   @import 'toc';
+   @import 'select-menu';
+   @import 'deploy-theme';
+   @import 'notification';
+   @import 'label';
diff --git a/aio/src/styles/2-modules/_notification.scss b/aio/src/styles/2-modules/_notification.scss
new file mode 100644
index 000000000000..fcdd67234fd0
--- /dev/null
+++ b/aio/src/styles/2-modules/_notification.scss
@@ -0,0 +1,109 @@
+$notificationHeight: 56px;
+
+// we need to override some of the toolbar styling
+.mat-toolbar mat-toolbar-row.notification-container {
+  padding: 0;
+  height: auto;
+  overflow: hidden;
+}
+
+aio-notification {
+  background: $darkgray;
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+  height: $notificationHeight;
+  justify-content: center;
+
+  @media (max-width: 430px) {
+    justify-content: flex-start;
+    padding-left: 10px;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: $notificationHeight;
+    height: $notificationHeight;
+    background: $darkgray;
+  }
+
+  .content {
+    max-width: calc(100% - #{$notificationHeight});
+    text-transform: none;
+    padding: 0;
+
+    > * {
+      display: flex;
+    }
+
+    .icon {
+      margin-right: 10px;
+      @media (max-width: 464px) {
+        display: none;
+      }
+    }
+
+    .message {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 10px;
+    }
+
+    .action-button {
+      background: $brightred;
+      border-radius: 15px;
+      text-transform: uppercase;
+      padding: 0 10px;
+      font-size: 12px;
+      @media (max-width: 780px) {
+        display: none;
+      }
+    }
+  }
+}
+
+// Here are all the hacks to make the content and sidebars the right height
+// when the notification is visible
+.aio-notification-show {
+  .sidenav-content {
+    padding-top: 80px + $notificationHeight;
+  }
+
+  mat-sidenav.mat-sidenav.sidenav {
+    top: 56px + $notificationHeight;
+
+    @media (max-width: 600px) {
+      top: 56px + $notificationHeight;
+    }
+  }
+
+  .toc-container {
+    top: 76px + $notificationHeight;
+  }
+
+  .search-results {
+    padding-top: 68px + $notificationHeight;
+  }
+
+  &.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute  {
+    section {
+      padding-top: $notificationHeight;
+    }
+  }
+}
+
+// Animate the content when the notification bar is dismissed
+// this should be kept in sync with the animation durations in
+// - aio/src/app/layout/notification/notification.component.ts
+// - aio/src/app/app.component.ts : notificationDismissed()
+.aio-notification-animating {
+  .sidenav-content {
+    transition: padding-top 250ms ease;
+  }
+  mat-sidenav.mat-sidenav.sidenav, .toc-container {
+    transition: top 250ms ease;
+  }
+}
diff --git a/aio/src/styles/2-modules/_presskit.scss b/aio/src/styles/2-modules/_presskit.scss
new file mode 100644
index 000000000000..88921249ce26
--- /dev/null
+++ b/aio/src/styles/2-modules/_presskit.scss
@@ -0,0 +1,84 @@
+.presskit-container {
+  padding: 0 32px 32px 32px;
+
+  h2 {
+    color: #37474F;
+  }
+
+  .l-space-left-3 {
+    margin-left: 3 * 8px;
+  }
+
+  .cc-by-anchor {
+    text-decoration: underline;
+    color: grey !important;
+  }
+
+  .presskit-row {
+    margin: 48px 0;
+    width: 100%;
+
+    .presskit-inner {
+      display: flex;
+      align-items: center;
+
+      @media(max-width: 599px) {
+        flex-direction: column;
+      }
+
+      h3 {
+        font-weight: 500;
+        margin-top: 0;
+        margin-bottom: 0;
+        color: #455A64;
+
+        @media(max-width: 599px) {
+          padding-bottom: 16px;
+        }
+      }
+
+      .transparent-img-bg {
+        margin-top: 10px;
+        border-radius: 4px;
+        width: 128px;
+        height: 128px;
+        background-color: #34474F;
+      }
+
+      ul {
+        padding: 0;
+        list-style-type: none;
+
+        @media(max-width: 599px) {
+          padding: 0 !important;
+          margin: 0 !important;
+        }
+
+        li {
+          margin: 0 0 8px 0;
+        }
+      }
+    }
+
+    .presskit-image-container {
+
+      @media(max-width: 599px) {
+        text-align: center;
+      }
+
+      img {
+        height: 128px;
+        width: auto;
+        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 000000000000..bf9e6480cf99
--- /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 000000000000..f0a18d1e90ac
--- /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 000000000000..dd9b27e9bd0a
--- /dev/null
+++ b/aio/src/styles/2-modules/_scrollbar.scss
@@ -0,0 +1,27 @@
+body::-webkit-scrollbar, mat-sidenav.sidenav::-webkit-scrollbar, .mat-sidenav-content::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+body::-webkit-scrollbar-track, mat-sidenav.sidenav::-webkit-scrollbar-track, .mat-sidenav-content::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+body::-webkit-scrollbar-thumb, mat-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-track {
+  -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/2-modules/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss
new file mode 100644
index 000000000000..fc71cea5dcef
--- /dev/null
+++ b/aio/src/styles/2-modules/_search-results.scss
@@ -0,0 +1,99 @@
+aio-search-results {
+    z-index: 10;
+}
+
+.search-results {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    overflow: auto;
+    padding: 68px 32px 0;
+    color: $offwhite;
+    width: auto;
+    max-height: 95vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 5;
+    background-color: $darkgray;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+    box-sizing: border-box;
+
+    @media (max-width: 480px) {
+        display: block;
+        .search-area {
+            display: block;
+            margin: 16px 16px;
+        }
+    }
+}
+
+aio-search-results.embedded .search-results {
+    padding: 0;
+    color: inherit;
+    width: auto;
+    max-height: 100%;
+    position: relative;
+    background-color: inherit;
+    box-shadow: none;
+    box-sizing: border-box;
+
+    .search-area a {
+        color: lighten($darkgray, 10);
+        &:hover {
+            color: $accentblue;
+        }
+    }
+}
+
+.search-area {
+    display: flex;
+    flex-direction: column;
+    margin: 16px 16px;
+    height: 100%;
+
+    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: normal;
+        &:hover {
+            color: $white;
+        }
+        &:visited {
+          text-decoration: none;
+        }
+
+        span.symbol {
+          margin-right: 8px;
+        }
+    }
+
+    .priority-pages {
+        padding: 0.5rem 0;
+        a {
+            font-weight: bold;
+        }
+    }
+
+    @include bp(tiny) {
+        display: block;
+    }
+}
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 000000000000..a93fa753e980
--- /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/_table.scss b/aio/src/styles/2-modules/_table.scss
new file mode 100644
index 000000000000..0d5436d63253
--- /dev/null
+++ b/aio/src/styles/2-modules/_table.scss
@@ -0,0 +1,114 @@
+table {
+  margin: 24px 0px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  border-radius: 2px;
+  background: $offwhite;
+
+  &.is-full-width {
+    width: 100%;
+  }
+
+  &.is-fixed-layout {
+    table-layout: fixed;
+  }
+
+  thead > {
+    vertical-align: middle;
+    border-color: inherit;
+
+    tr {
+      vertical-align: inherit;
+      border-color: inherit;
+    }
+
+    tr > th {
+      background: rgba($lightgray, 0.2);
+      border-bottom: 1px solid $lightgray;
+      color: $darkgray;
+      font-size: 12px;
+      font-weight: 500;
+      padding: 8px 24px;
+      text-align: left;
+      text-transform: uppercase;
+      line-height: 28px;
+    }
+  }
+
+  tbody > tr > {
+    th,
+    td {
+      border-bottom: 1px solid $lightgray;
+      padding: 16px;
+      text-align: left;
+      line-height: 24px;
+      vertical-align: top;
+
+      @media (max-width: 480px) {
+        &:before {
+          // content: **ADD TABLE HEADER**;
+          display: inline-block;
+        }
+      }
+
+    }
+
+    td {
+      letter-spacing: 0.30px;
+
+    tr td:first-child {
+      @media (max-width: 480px) {
+        background-color: $lightgray;
+      }
+    }
+
+    }
+
+    th {
+      background: rgba($lightgray, 0.2);
+      border-right: 1px solid $lightgray;
+      font-weight: 600;
+      max-width: 100px;
+    }
+
+    &:last-child td {
+      border: none;
+
+      @media (max-width: 480px) {
+        border-bottom: 1px solid $lightgray;
+      }
+    }
+  }
+}
+
+#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 000000000000..a03b1bb698c9
--- /dev/null
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -0,0 +1,207 @@
+.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 {
+    padding: 12px 0 0 0;
+
+    .toc-heading {
+      margin: 0 0 8px;
+    }
+  }
+}
+
+.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 {
+    mat-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
new file mode 100755
index 000000000000..c719602f6521
--- /dev/null
+++ b/aio/src/styles/_constants.scss
@@ -0,0 +1,117 @@
+// 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;
+$mist: #ECEFF1;
+$mediumgray: #6e6e6e;
+$darkgray: #333;
+$black: #0A1014;
+$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
+  ),
+  package: (
+    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
new file mode 100644
index 000000000000..a265208ffd3d
--- /dev/null
+++ b/aio/src/styles/_mixins.scss
@@ -0,0 +1,75 @@
+/************************************
+
+             Media queries
+
+ To use these, put this snippet in the appropriate selector:
+
+     @include bp(tiny) {
+         background-color: purple;
+     }
+
+     Replace "tiny" with "medium" or "big" as necessary.
+*************************************/
+
+@mixin bp($point) {
+
+  $bp-xsmall: "(min-width: 320px)";
+  $bp-teeny: "(min-width: 480px)";
+  $bp-tiny: "(min-width: 600px)";
+  $bp-small: "(min-width: 650px)";
+  $bp-medium: "(min-width: 800px)";
+  $bp-big: "(min-width: 1000px)";
+
+  @if $point == big {
+    @media #{$bp-big} { @content; }
+  }
+  @else if $point == medium {
+    @media #{$bp-medium} { @content; }
+  }
+  @else if $point == small {
+    @media #{$bp-small}  { @content; }
+  }
+  @else if $point == tiny {
+    @media #{$bp-tiny}  { @content; }
+  }
+  @else if $point == teeny {
+    @media #{$bp-teeny}  { @content; }
+  }
+  @else if $point == xsmall {
+    @media #{$bp-xsmall}  { @content; }
+  }
+}
+
+@mixin rotate($degrees) {
+  -moz-transform: rotate($degrees);
+  -webkit-transform: rotate($degrees);
+  -o-transform: rotate($degrees);
+  -ms-transform: rotate($degrees);
+  transform: rotate($degrees);
+  transition: transform 150ms;
+  transition-timing-function: ease-in-out;
+}
+
+@mixin codeblock($bgcolor) {
+    background-color: $bgcolor;
+    border-radius: 5px;
+    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/_print.scss b/aio/src/styles/_print.scss
new file mode 100644
index 000000000000..240ac41e50ba
--- /dev/null
+++ b/aio/src/styles/_print.scss
@@ -0,0 +1,115 @@
+@media print {
+
+    // General Adjustments
+    * {
+        box-shadow: none !important;
+    }
+
+    body, mat-sidenav-container {
+        background: none !important;
+    }
+
+    h1 {
+        height: 40px !important;
+        color: $darkgray !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        page-break-after: avoid;
+    }
+
+    ul, ol, img, code-example, table, tr, .alert, .feature {
+        page-break-inside: avoid;
+    }
+
+    table tbody tr:last-child td {
+        border-bottom: 1px solid $lightgray !important;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    p {
+        widows: 4;
+    }
+
+    p > code, li > code, table code {
+        color: $blue !important;
+    }
+
+    // No Print Class
+    .no-print {
+        display: none !important;
+    }
+
+    // Custom No Print for Sidenav Menu
+    mat-sidenav.sidenav.mat-sidenav {
+        display: none !important;
+    }
+
+    // Custom No Print Element Adjustments
+    .mat-sidenav-content {
+        margin: 0 !important;
+    }
+
+    mat-sidenav-container.sidenav-container {
+        min-width: 100vw;
+    }
+
+    .sidenav-content {
+        overflow: visible;
+    }
+
+    .filetree {
+        max-width: 100%;
+    }
+
+    aio-code code {
+        border: none !important;
+    }
+
+    code-example {
+        &.code-shell, &[language=sh], &[language=bash] {
+            background: none;
+
+            .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
+                color: $darkgray;
+            }
+        }
+
+        header {
+            background: none;
+            border: 0.5px solid $lightgray;
+            color: $darkgray;
+        }
+    }
+
+    .content code {
+        border: 0.5px solid $lightgray;
+    }
+
+    .mat-tab-labels {
+        div.mat-tab-label {
+            &:not(.mat-tab-label-active) span {
+                font-style: italic;
+            }
+
+            &.mat-tab-label-active span {
+                font-weight: bold;
+            }
+        }
+    }
+
+    .api-header label {
+        color: $darkgray !important;
+        font-weight: bold !important;
+        margin: 2px !important;
+        padding: 0 !important;
+        display: block !important;
+    }
+
+    .feature-section img {
+        max-width: 70px !important;
+    }
+}
diff --git a/aio/src/styles/_typography-theme.scss b/aio/src/styles/_typography-theme.scss
new file mode 100755
index 000000000000..d94535b7138e
--- /dev/null
+++ b/aio/src/styles/_typography-theme.scss
@@ -0,0 +1,47 @@
+@import '~@angular/material/core/theming/theming';
+
+@mixin docs-site-typography-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .docs-component-viewer-tabbed-content,
+  .docs-guide-content {
+      h1 {
+        color: mat-color($primary, 800);
+        background: rgba(mat-color($foreground, secondary-text), .03);
+      }
+
+      h3, h2, h4, h5, p, ol, li {
+        color: mat-color($foreground, secondary-text);
+      }
+
+      a {
+        color: mat-color($primary);
+      }
+
+      .nav-link:visited {
+        text-decoration: none;
+      }
+
+      table {
+        box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
+      }
+
+      table > tbody > tr > th {
+        border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
+      }
+
+      td {
+        color: mat-color($foreground, secondary-text);
+        border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
+      }
+
+      th {
+        color: mat-color($foreground, secondary-text);
+        background: rgba(mat-color($foreground, secondary-text), .03);
+      }
+  }
+}
diff --git a/aio/src/styles/main.scss b/aio/src/styles/main.scss
new file mode 100755
index 000000000000..8ca81bc8f872
--- /dev/null
+++ b/aio/src/styles/main.scss
@@ -0,0 +1,17 @@
+// import global themes
+@import '~@angular/material/theming';
+@import './ng-io-theme';
+
+// import global variables
+@import './constants';
+
+// import global mixins
+@import './mixins';
+
+// import directories
+@import './0-base/base-dir';
+@import './1-layouts/layouts-dir';
+@import './2-modules/modules-dir';
+
+// import print styles
+@import './print';
diff --git a/aio/src/styles/ng-io-theme.scss b/aio/src/styles/ng-io-theme.scss
new file mode 100644
index 000000000000..1b1cca8604ed
--- /dev/null
+++ b/aio/src/styles/ng-io-theme.scss
@@ -0,0 +1,23 @@
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the base styles for Angular Material core. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue.
+$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
+$ng-io-accent:  mat-palette($mat-red, 700, 600, 800);
+
+// The warn palette is optional (defaults to red).
+$ng-io-warn:    mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($ng-io-theme);
diff --git a/aio/src/test.ts b/aio/src/test.ts
new file mode 100644
index 000000000000..09b54c738991
--- /dev/null
+++ b/aio/src/test.ts
@@ -0,0 +1,24 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// Reflect.metadata polyfill is only needed in the JIT mode which we use only for unit tests
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/aio/src/testing/doc-viewer-utils.ts b/aio/src/testing/doc-viewer-utils.ts
new file mode 100644
index 000000000000..a078e492ec5b
--- /dev/null
+++ b/aio/src/testing/doc-viewer-utils.ts
@@ -0,0 +1,93 @@
+import { Component, NgModule, ViewChild } from '@angular/core';
+import { Title, Meta } from '@angular/platform-browser';
+
+import { Observable } from 'rxjs';
+
+import { DocumentContents } from 'app/documents/document.service';
+import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
+import { Logger } from 'app/shared/logger.service';
+import { TocService } from 'app/shared/toc.service';
+import { MockLogger } from 'testing/logger.service';
+import { ElementsLoader } from 'app/custom-elements/elements-loader';
+
+
+////////////////////////////////////////////////////////////////////////////////////////////////////
+/// `TestDocViewerComponent` (for exposing internal `DocViewerComponent` methods as public).     ///
+/// Only used for type-casting; the actual implementation is irrelevant.                         ///
+////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export class TestDocViewerComponent extends DocViewerComponent {
+  currViewContainer: HTMLElement;
+  nextViewContainer: HTMLElement;
+
+  prepareTitleAndToc(targetElem: HTMLElement, docId: string): () => void { return null as any; }
+  render(doc: DocumentContents): Observable<void> { return null as any; }
+  swapViews(onInsertedCb?: () => void): Observable<void> { return null as any; }
+}
+
+
+////////////////////////////////////////////////////////////////////////////////////////////////////
+/// `TestModule` and `TestParentComponent`.                                                      ///
+////////////////////////////////////////////////////////////////////////////////////////////////////
+
+// Test parent component.
+@Component({
+  selector: 'aio-test',
+  template: '<aio-doc-viewer [doc]="currentDoc">Test Component</aio-doc-viewer>',
+})
+export class TestParentComponent {
+  currentDoc?: DocumentContents|null;
+  @ViewChild(DocViewerComponent) docViewer: DocViewerComponent;
+}
+
+// Mock services.
+export class MockTitle {
+  setTitle = jasmine.createSpy('Title#reset');
+}
+
+export class MockMeta {
+  addTag = jasmine.createSpy('Meta#addTag');
+  removeTag = jasmine.createSpy('Meta#removeTag');
+}
+
+export class MockTocService {
+  genToc = jasmine.createSpy('TocService#genToc');
+  reset = jasmine.createSpy('TocService#reset');
+}
+
+export class MockElementsLoader {
+  loadContainedCustomElements =
+      jasmine.createSpy('MockElementsLoader#loadContainedCustomElements');
+}
+
+@NgModule({
+  declarations: [
+    DocViewerComponent,
+    TestParentComponent,
+  ],
+  providers: [
+    { provide: Logger, useClass: MockLogger },
+    { provide: Title, useClass: MockTitle },
+    { provide: Meta, useClass: MockMeta },
+    { provide: TocService, useClass: MockTocService },
+    { provide: ElementsLoader, useClass: MockElementsLoader },
+  ],
+})
+export class TestModule { }
+
+
+////////////////////////////////////////////////////////////////////////////////////////////////////
+/// An observable with spies to test subscribing/unsubscribing.                                  ///
+////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export class ObservableWithSubscriptionSpies<T = void> extends Observable<T> {
+  unsubscribeSpies: jasmine.Spy[] = [];
+  subscribeSpy = spyOn(this, 'subscribe').and.callFake((...args: any[]) => {
+    const subscription = super.subscribe(...args);
+    const unsubscribeSpy = spyOn(subscription, 'unsubscribe').and.callThrough();
+    this.unsubscribeSpies.push(unsubscribeSpy);
+    return subscription;
+  });
+
+  constructor(subscriber = () => undefined) { super(subscriber); }
+}
diff --git a/aio/src/testing/location.service.ts b/aio/src/testing/location.service.ts
new file mode 100644
index 000000000000..f51ff294dcda
--- /dev/null
+++ b/aio/src/testing/location.service.ts
@@ -0,0 +1,24 @@
+import { BehaviorSubject } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export class MockLocationService {
+  urlSubject = new BehaviorSubject<string>(this.initialUrl);
+  currentUrl = this.urlSubject.asObservable().pipe(map(url => this.stripSlashes(url)));
+  // strip off query and hash
+  currentPath = this.currentUrl.pipe(map(url => url.match(/[^?#]*/)![0]));
+  search = jasmine.createSpy('search').and.returnValue({});
+  setSearch = jasmine.createSpy('setSearch');
+  go = jasmine.createSpy('Location.go').and
+              .callFake((url: string) => this.urlSubject.next(url));
+  goExternal = jasmine.createSpy('Location.goExternal');
+  replace = jasmine.createSpy('Location.replace');
+  handleAnchorClick = jasmine.createSpy('Location.handleAnchorClick')
+      .and.returnValue(false); // prevent click from causing a browser navigation
+
+  constructor(private initialUrl: string) {}
+
+  private stripSlashes(url: string) {
+    return url.replace(/^\/+/, '').replace(/\/+(\?|#|$)/, '$1');
+  }
+}
+
diff --git a/aio/src/testing/logger.service.ts b/aio/src/testing/logger.service.ts
new file mode 100644
index 000000000000..f1aa4de6fa9c
--- /dev/null
+++ b/aio/src/testing/logger.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MockLogger {
+
+  output: { log: any[], error: any[], warn: any[] } = {
+    log: [],
+    error: [],
+    warn: []
+  };
+
+  log(value: any, ...rest: any[]) {
+    this.output.log.push([value, ...rest]);
+  }
+
+  error(value: any, ...rest: any[]) {
+    this.output.error.push([value, ...rest]);
+  }
+
+  warn(value: any, ...rest: any[]) {
+    this.output.warn.push([value, ...rest]);
+  }
+}
diff --git a/aio/src/testing/search.service.ts b/aio/src/testing/search.service.ts
new file mode 100644
index 000000000000..cdc10b9c50a5
--- /dev/null
+++ b/aio/src/testing/search.service.ts
@@ -0,0 +1,9 @@
+import { Subject } from 'rxjs';
+import { SearchResults } from 'app/search/interfaces';
+
+export class MockSearchService {
+  searchResults = new Subject<SearchResults>();
+  initWorker = jasmine.createSpy('initWorker');
+  loadIndex = jasmine.createSpy('loadIndex');
+  search = jasmine.createSpy('search');
+}
diff --git a/aio/src/tsconfig.app.json b/aio/src/tsconfig.app.json
new file mode 100644
index 000000000000..f92893cafd0e
--- /dev/null
+++ b/aio/src/tsconfig.app.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": [],
+    "importHelpers": true
+  },
+  "exclude": [
+    "testing/**/*",
+    "test.ts",
+    "test-specs.ts",
+    "**/*.spec.ts"
+  ],
+  "angularCompilerOptions": {
+    "preserveWhitespaces": false
+  }
+}
diff --git a/aio/src/tsconfig.spec.json b/aio/src/tsconfig.spec.json
new file mode 100644
index 000000000000..02d6181c99f7
--- /dev/null
+++ b/aio/src/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "testing/**/*.ts",
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
\ No newline at end of file
diff --git a/aio/src/tslint.json b/aio/src/tslint.json
new file mode 100644
index 000000000000..4025ad42827a
--- /dev/null
+++ b/aio/src/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "aio",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "aio",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/aio/src/typings.d.ts b/aio/src/typings.d.ts
new file mode 100644
index 000000000000..ef5c7bd62057
--- /dev/null
+++ b/aio/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
diff --git a/aio/tests/deployment/e2e/protractor.conf.js b/aio/tests/deployment/e2e/protractor.conf.js
new file mode 100644
index 000000000000..72a1894efbb2
--- /dev/null
+++ b/aio/tests/deployment/e2e/protractor.conf.js
@@ -0,0 +1,52 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './*.e2e-spec.ts'
+  ],
+  capabilities: {
+    browserName: 'chrome',
+    // For Travis
+    chromeOptions: {
+      binary: process.env.CHROME_BIN,
+      args: ['--no-sandbox']
+    }
+  },
+  directConnect: true,
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  params: {
+    sitemapUrls: [],
+    legacyUrls: [],
+  },
+  beforeLaunch() {
+    const {register} = require('ts-node');
+    register({});
+  },
+  onPrepare() {
+    const {SpecReporter} = require('jasmine-spec-reporter');
+    const {browser} = require('protractor');
+    const {loadLegacyUrls, loadRemoteSitemapUrls} = require('../shared/helpers');
+
+    return Promise.all([
+      browser.getProcessedConfig(),
+      loadRemoteSitemapUrls(browser.baseUrl),
+      loadLegacyUrls(),
+    ]).then(([config, sitemapUrls, legacyUrls]) => {
+      if (sitemapUrls.length <= 100) {
+        throw new Error(`Too few sitemap URLs. (Expected: >100 | Found: ${sitemapUrls.length})`);
+      } else if (legacyUrls.length <= 100) {
+        throw new Error(`Too few legacy URLs. (Expected: >100 | Found: ${legacyUrls.length})`);
+      }
+
+      Object.assign(config.params, {sitemapUrls, legacyUrls});
+      jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
+    });
+  }
+};
diff --git a/aio/tests/deployment/e2e/redirection.e2e-spec.ts b/aio/tests/deployment/e2e/redirection.e2e-spec.ts
new file mode 100644
index 000000000000..cd31d828bbeb
--- /dev/null
+++ b/aio/tests/deployment/e2e/redirection.e2e-spec.ts
@@ -0,0 +1,37 @@
+import { browser } from 'protractor';
+import { SitePage } from './site.po';
+
+describe(browser.baseUrl, () => {
+  const page = new SitePage();
+
+  beforeAll(done => page.init().then(done));
+
+  beforeEach(() => browser.waitForAngularEnabled(false));
+  afterEach(() => browser.waitForAngularEnabled(true));
+
+  describe('(with sitemap URLs)', () => {
+    page.sitemapUrls.forEach((url, i) => {
+      it(`should not redirect '${url}' (${i + 1}/${page.sitemapUrls.length})`, async () => {
+        await page.goTo(url);
+
+        const expectedUrl = browser.baseUrl + url;
+        const actualUrl = (await browser.getCurrentUrl()).replace(/\?.*$/, '');
+
+        expect(actualUrl).toBe(expectedUrl);
+      });
+    });
+  });
+
+  describe('(with legacy URLs)', () => {
+    page.legacyUrls.forEach(([fromUrl, toUrl], i) => {
+      it(`should redirect '${fromUrl}' to '${toUrl}' (${i + 1}/${page.legacyUrls.length})`, async () => {
+        await page.goTo(fromUrl);
+
+        const expectedUrl = (/^http/.test(toUrl) ? '' : browser.baseUrl.replace(/\/$/, '')) + toUrl;
+        const actualUrl = (await browser.getCurrentUrl()).replace(/\?.*$/, '');
+
+        expect(actualUrl).toBe(expectedUrl);
+      });
+    });
+  });
+});
diff --git a/aio/tests/deployment/e2e/site.po.ts b/aio/tests/deployment/e2e/site.po.ts
new file mode 100644
index 000000000000..32d1519dc201
--- /dev/null
+++ b/aio/tests/deployment/e2e/site.po.ts
@@ -0,0 +1,60 @@
+import { browser, by, element, ExpectedConditions } from 'protractor';
+
+export class SitePage {
+  /** All URLs found in the app's `sitemap.xml` (i.e. valid URLs tha should not be redirected). */
+  sitemapUrls: string[] = browser.params.sitemapUrls;
+
+  /** A list of legacy URLs that should be redirected to new URLs (in the form `[fromUrl, toUrl]`). */
+  legacyUrls: string[][] = browser.params.legacyUrls;
+
+  /**
+   * Enter a query into the search field.
+   */
+  async enterSearch(query: string) {
+    const searchInput = element(by.css('input[type=search]'));
+    await searchInput.clear();
+    await searchInput.sendKeys(query);
+  }
+
+  /**
+   * Get the text content of the `aio-doc-viewer` element (in lowercase).
+   */
+  async getDocViewerText() {
+    const docViewer = element(by.css('aio-doc-viewer'));
+    const text = await docViewer.getText();
+    return text.toLowerCase();
+  }
+
+  /**
+   * Get a list of text contents for all search result items found on the page.
+   */
+  async getSearchResults() {
+    const results = element.all(by.css('.search-results li'));
+    await browser.wait(ExpectedConditions.presenceOf(results.first()), 8000);
+    return await results.map<string>(link => link!.getText());
+  }
+
+  /**
+   * Navigate to a URL, disable animations, unregister the ServiceWorker, and wait for Angular.
+   * (The SW is unregistered to ensure that subsequent requests are passed through to the server.)
+   */
+  async goTo(url: string) {
+    const unregisterServiceWorker = (cb: () => void) => navigator.serviceWorker
+        .getRegistrations()
+        .then(regs => Promise.all(regs.map(reg => reg.unregister())))
+        .then(cb);
+
+    await browser.get(url || browser.baseUrl);
+    await browser.executeScript('document.body.classList.add(\'no-animations\')');
+    await browser.executeAsyncScript(unregisterServiceWorker);
+    await browser.waitForAngular();
+  };
+
+  /**
+   * Initialize the page object and get it ready for further requests.
+   */
+  async init() {
+    // Make an initial request to unregister the ServiceWorker.
+    await this.goTo('');
+  }
+}
diff --git a/aio/tests/deployment/e2e/smoke-tests.e2e-spec.ts b/aio/tests/deployment/e2e/smoke-tests.e2e-spec.ts
new file mode 100644
index 000000000000..b55aae136e2c
--- /dev/null
+++ b/aio/tests/deployment/e2e/smoke-tests.e2e-spec.ts
@@ -0,0 +1,103 @@
+import { browser } from 'protractor';
+import { SitePage } from './site.po';
+
+describe(browser.baseUrl, () => {
+  const page = new SitePage();
+
+  beforeAll(done => page.init().then(done));
+
+  beforeEach(() => browser.waitForAngularEnabled(false));
+  afterEach(() => browser.waitForAngularEnabled(true));
+
+  describe('(smoke tests)', () => {
+    it('should show the home page', () => {
+      page.goTo('');
+      const text = page.getDocViewerText();
+
+      expect(text).toContain('one framework');
+      expect(text).toContain('mobile & desktop');
+    });
+
+    describe('(marketing pages)', () => {
+      const textPerUrl = {
+        features: 'features & benefits',
+        docs: 'what is angular?',
+        events: 'events',
+        resources: 'explore angular resources',
+      };
+
+      Object.keys(textPerUrl).forEach(url => {
+        it(`should show the page at '${url}'`, () => {
+          page.goTo(url);
+          expect(page.getDocViewerText()).toContain(textPerUrl[url]);
+        });
+      });
+    });
+
+    describe('(docs pages)', () => {
+      const textPerUrl = {
+        api: 'api list',
+        'guide/architecture': 'architecture',
+        'guide/http': 'httpclient',
+        'guide/quickstart': 'quickstart',
+        'guide/security': 'security',
+        tutorial: 'tutorial',
+      };
+
+      Object.keys(textPerUrl).forEach(url => {
+        it(`should show the page at '${url}'`, () => {
+          page.goTo(url);
+          expect(page.getDocViewerText()).toContain(textPerUrl[url]);
+        });
+      });
+    });
+
+    describe('(api docs pages)', () => {
+      const textPerUrl = {
+        /* Class */ 'api/core/Injector': 'class injector',
+        /* Const */ 'api/forms/NG_VALIDATORS': 'const ng_validators',
+        /* Decorator */ 'api/core/Component': '@component',
+        /* Directive */ 'api/common/NgIf': 'class ngif',
+        /* Enum */ 'api/core/ChangeDetectionStrategy': 'enum changedetectionstrategy',
+        /* Function */ 'api/animations/animate': 'animate(',
+        /* Interface */ 'api/core/OnDestroy': 'interface ondestroy',
+        /* Pipe */ 'api/common/JsonPipe': '| json',
+        /* Type-Alias */ 'api/common/http/HttpEvent': 'type httpevent',
+      };
+
+      Object.keys(textPerUrl).forEach(url => {
+        it(`should show the page at '${url}'`, () => {
+          page.goTo(url);
+          expect(page.getDocViewerText()).toContain(textPerUrl[url]);
+        });
+      });
+    });
+
+    describe('(search results)', () => {
+      beforeEach(() => page.goTo(''));
+
+      it('should find pages when searching by a partial word in the title', () => {
+        page.enterSearch('ngCont');
+        expect(page.getSearchResults()).toContain('NgControl');
+      });
+
+      it('should find API docs when searching for an instance member name', () => {
+        page.enterSearch('writeValue');
+        expect(page.getSearchResults()).toContain('ControlValueAccessor');
+      });
+
+      it('should find API docs when searching for a static member name', () => {
+        page.enterSearch('compose');
+        expect(page.getSearchResults()).toContain('Validators');
+      });
+    });
+
+    it('should show relevant results on 404', () => {
+      page.goTo('http/router');
+      const results = page.getSearchResults();
+
+      expect(results).toContain('HttpClient');
+      expect(results).toContain('Router');
+    });
+  });
+});
diff --git a/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt b/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt
new file mode 100644
index 000000000000..e81bc5e7067d
--- /dev/null
+++ b/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt
@@ -0,0 +1,185 @@
+/api/animate/AnimationBuilder	/api/animations/AnimationBuilder
+/api/animate/CssAnimationBuilder	/api/animations/CssAnimationBuilder
+/api/api/core/ElementRef	/api/core/ElementRef
+/api/common/Control-class	/api/forms/FormControl
+/api/common/CORE_DIRECTIVES	/api/common/CommonModule
+/api/common/DatePipe-class	/api/common/DatePipe
+/api/common/NgClass-directive.html	/api/common/NgClass
+/api/common/NgFor-directive.html	/api/common/NgForOf
+/api/common/NgModel-directive	/api/forms/NgModel
+/api/common/SelectControlValueAccessor-directive	/api/forms/SelectControlValueAccessor
+/api/common/SlicePipe-class.html	/api/common/SlicePipe
+/api/core/AnimationStateDeclarationMetadata	/api/animations
+/api/core/DoCheck-interface.html	/api/core/DoCheck
+/api/core/HostBinding-var	/api/core/HostBinding
+/api/core/OpaqueToken-class	/api/core/OpaqueToken
+/api/core/OptionalMetadata-class	/api/core/Optional
+/api/core/PLATFORM_PIPES	/api/common/CommonModule
+/api/core/Provider-class.html	/api/core/Provider
+/api/core/Renderer-class	/api/core/Renderer
+/api/core/testing/async-function	/api/core/testing/async
+/api/core/testing/index/async-function	/api/core/testing/async
+/api/core/testing/index/TestBed-class.html	/api/core/testing/TestBed
+/api/core/testing/inject-function	/api/core/testing/inject
+/api/core/testing/inject-function.html	/api/core/testing/inject
+/api/http/Headers-class	/api/http/Headers
+/api/http/Headers-class.html	/api/http/Headers
+/api/http/HTTP_PROVIDERS-let	/api/http/HttpModule
+/api/http/testing/index/MockBackend-class	/api/http/testing/MockBackend
+/api/http/testing/index/MockBackend-class.html	/api/http/testing/MockBackend
+/api/platform-browser-dynamic/testing/index/platformBrowserDynamicTesting-let.html	/api/platform-browser-dynamic/testing/platformBrowserDynamicTesting
+/api/platform-browser/AnimationDriver	/api/animations/browser/AnimationDriver
+/api/router/Route-class	/api/router/Route
+/api/router/RouterLink-directive	/api/router/RouterLink
+/api/testing/tick-function	/api/core/testing/tick
+/api/upgrade/static/downgradeComponent-function	/api/upgrade/static/downgradeComponent
+/api/upgrade/static/downgradeComponent-function.html	/api/upgrade/static/downgradeComponent
+/api/upgrade/static/index/downgradeComponent-function	/api/upgrade/static/downgradeComponent
+/api/upgrade/static/UpgradeModule-class	/api/upgrade/static/UpgradeModule
+/docs/js/latest/api/	/api
+/docs/js/latest/api/animate/AnimationBuilder-class	/api/animations/AnimationBuilder
+/docs/js/latest/api/animate/CssAnimationBuilder-class.html	/api/animations/CssAnimationBuilder
+/docs/js/latest/api/animations/index/trigger-function	/api/animations/trigger
+/docs/js/latest/api/common/ControlGroup-class.html	/api/forms/FormGroup
+/docs/js/latest/api/common/index/DatePipe-pipe	/api/common/DatePipe
+/docs/js/latest/api/common/index/Location-class.html	/api/common/Location
+/docs/js/latest/api/common/index/MaxLengthValidator-directive.html	/api/forms/MaxLengthValidator
+/docs/js/latest/api/common/index/NgFor-directive	/api/common/NgForOf
+/docs/js/latest/api/common/index/NgFor-directive.html	/api/common/NgForOf
+/docs/js/latest/api/common/index/NgFor-type-alias	/api/common/NgForOf
+/docs/js/latest/api/common/index/NgFor-type-alias.html	/api/common/NgForOf
+/docs/js/latest/api/common/index/NgTemplateOutlet-directive	/api/common/NgTemplateOutlet
+/docs/js/latest/api/common/NgStyle-directive	/api/common/NgStyle
+/docs/js/latest/api/core/DynamicComponentLoader-class.html	/api/core/DynamicComponentLoader
+/docs/js/latest/api/core/HostListener-var	/api/core/HostListener
+/docs/js/latest/api/core/index/AfterViewChecked-class	/api/core/AfterViewChecked
+/docs/js/latest/api/core/index/AnimationStateTransitionMetadata-class.html	/api/core/AnimationStateTransitionMetadata
+/docs/js/latest/api/core/index/AnimationStateTransitionMetadata-type-alias	/api/core/AnimationStateTransitionMetadata
+/docs/js/latest/api/core/index/ApplicationModule-class	/api/core/ApplicationModule
+/docs/js/latest/api/core/index/ApplicationRef-class	/api/core/ApplicationRef
+/docs/js/latest/api/core/index/ChangeDetectorRef-class	/api/core/ChangeDetectorRef
+/docs/js/latest/api/core/index/ComponentFactory-class	/api/core/ComponentFactory
+/docs/js/latest/api/core/index/DebugNode-class	/api/core/DebugNode
+/docs/js/latest/api/core/index/destroyPlatform-function	/api/core/destroyPlatform
+/docs/js/latest/api/core/index/DirectiveMetadata-class	/api/core/Directive
+/docs/js/latest/api/core/index/ErrorHandler-class	/api/core/ErrorHandler
+/docs/js/latest/api/core/index/EventEmitter-class	/api/core/EventEmitter
+/docs/js/latest/api/core/index/EventEmitter-class.html	/api/core/EventEmitter
+/docs/js/latest/api/core/index/getPlatform-function	/api/core/getPlatform
+/docs/js/latest/api/core/index/NgModule-interface	/api/core/NgModule
+/docs/js/latest/api/core/index/NgModuleRef-class	/api/core/NgModuleRef
+/docs/js/latest/api/core/index/NgModuleRef-class.html	/api/core/NgModuleRef
+/docs/js/latest/api/core/index/OnInit-class	/api/core/OnInit
+/docs/js/latest/api/core/index/OnInit-class.html	/api/core/OnInit
+/docs/js/latest/api/core/index/OnInit-interface	/api/core/OnInit
+/docs/js/latest/api/core/index/PlatformRef-class	/api/core/PlatformRef
+/docs/js/latest/api/core/index/QueryList-class.html	/api/core/QueryList
+/docs/js/latest/api/core/index/RenderComponentType-class	/api/core/RenderComponentType
+/docs/js/latest/api/core/index/Renderer2-class.html	/api/core/Renderer2
+/docs/js/latest/api/core/index/state-function.html	/api/core/state
+/docs/js/latest/api/core/index/transition-function.html	/api/core/transition
+/docs/js/latest/api/core/index/trigger-function	/api/core/trigger
+/docs/js/latest/api/core/index/trigger-function.html	/api/core/trigger
+/docs/js/latest/api/core/index/ViewChild-decorator	/api/core/ViewChild
+/docs/js/latest/api/core/index/wtfLeave-let	/api/core/wtfLeave
+/docs/js/latest/api/core/Injector-class.html	/api/core/Injector
+/docs/js/latest/api/core/Query-var	/api/core/Query
+/docs/js/latest/api/core/ResolvedProvider-interface.html	/api/core/ResolvedProvider
+/docs/js/latest/api/core/testing/index/TestBed-class	/api/core/testing/TestBed
+/docs/js/latest/api/core/testing/index/tick-function	/api/core/testing/tick
+/docs/js/latest/api/core/testing/index/tick-function.html	/api/core/testing/tick
+/docs/js/latest/api/core/ViewContainerRef-class.html	/api/core/ViewContainerRef
+/docs/js/latest/api/forms/index/AbstractControl-class	/api/forms/AbstractControl
+/docs/js/latest/api/forms/index/AbstractControl-class.html	/api/forms/AbstractControl
+/docs/js/latest/api/forms/index/FormArray-class.html	/api/forms/FormArray
+/docs/js/latest/api/forms/index/FormBuilder-class.html	/api/forms/FormBuilder
+/docs/js/latest/api/forms/index/NG_VALIDATORS-let	/api/forms/NG_VALIDATORS
+/docs/js/latest/api/forms/index/Validator-interface.html	/api/forms/Validator
+/docs/js/latest/api/http/ConnectionBackend-class	/api/http/ConnectionBackend
+/docs/js/latest/api/http/index/Http-class.html	/api/http/Http
+/docs/js/latest/api/http/index/Jsonp-class.html	/api/http/Jsonp
+/docs/js/latest/api/http/index/ResponseOptions-class.html	/api/http/ResponseOptions
+/docs/js/latest/api/http/index/URLSearchParams-class	/api/http/URLSearchParams
+/docs/js/latest/api/http/index/XHRConnection-class	/api/http/XHRConnection
+/docs/js/latest/api/http/index/XHRConnection-class.html	/api/http/XHRConnection
+/docs/js/latest/api/http/testing/index/MockConnection-class.html	/api/http/testing/MockConnection
+/docs/js/latest/api/http/testing/MockBackend-class	/api/http/testing/MockBackend
+/docs/js/latest/api/platform-browser-dynamic/index/platformBrowserDynamic-let.html	/api/platform-browser-dynamic/platformBrowserDynamic
+/docs/js/latest/api/platform-browser-dynamic/testing/index/BrowserDynamicTestingModule-class.html	/api/platform-browser-dynamic/testing/BrowserDynamicTestingModule
+/docs/js/latest/api/platform-browser/animations/index/BrowserAnimationsModule-class	/api/platform-browser/animations/BrowserAnimationsModule
+/docs/js/latest/api/platform-browser/animations/index/BrowserAnimationsModule-class.html	/api/platform-browser/animations/BrowserAnimationsModule
+/docs/js/latest/api/platform-browser/animations/index/NoopAnimationsModule-class.html	/api/platform-browser/animations/NoopAnimationsModule
+/docs/js/latest/api/platform-browser/index/DomSanitizer-class	/api/platform-browser/DomSanitizer
+/docs/js/latest/api/platform-browser/index/Meta-class	/api/platform-browser/Meta
+/docs/js/latest/api/platform-browser/index/MetaDefinition-type-alias	/api/platform-browser/MetaDefinition
+/docs/js/latest/api/platform-browser/index/SafeUrl-interface	/api/platform-browser/SafeUrl
+/docs/js/latest/api/platform-browser/index/Title-class	/api/platform-browser/Title
+/docs/js/latest/api/platform-browser/index/Title-class.html	/api/platform-browser/Title
+/docs/js/latest/api/platform-server/index/PlatformState-class	/api/platform-server/PlatformState
+/docs/js/latest/api/platform-server/index/PlatformState-class.html	/api/platform-server/PlatformState
+/docs/js/latest/api/platform-webworker	/api/platform-webworker
+/docs/js/latest/api/platform-webworker/index/MessageBus-class	/api/platform-webworker/MessageBus
+/docs/js/latest/api/router/index/ActivatedRoute-interface	/api/router/ActivatedRoute
+/docs/js/latest/api/router/index/CanActivate-interface.html	/api/router/CanActivate
+/docs/js/latest/api/router/index/CanActivateChild-interface	/api/router/CanActivateChild
+/docs/js/latest/api/router/index/CanDeactivate-interface.html	/api/router/CanDeactivate
+/docs/js/latest/api/router/index/CanLoad-interface	/api/router/CanLoad
+/docs/js/latest/api/router/index/CanLoad-interface.html	/api/router/CanLoad
+/docs/js/latest/api/router/index/NavigationEnd-class	/api/router/NavigationEnd
+/docs/js/latest/api/router/index/provideRoutes-function	/api/router/provideRoutes
+/docs/js/latest/api/router/index/provideRoutes-function.html	/api/router/provideRoutes
+/docs/js/latest/api/router/index/Router-class	/api/router/Router
+/docs/js/latest/api/router/index/RouterLink-directive	/api/router/RouterLink
+/docs/js/latest/api/router/index/Routes-type-alias	/api/router/Routes
+/docs/js/latest/api/router/index/UrlSegment-class	/api/router/UrlSegment
+/docs/js/latest/api/router/index/UrlSerializer-class.html	/api/router/UrlSerializer
+/docs/js/latest/api/router/Instruction-class	/api/router/Instruction
+/docs/js/latest/api/router/Location-class	/api/router/Location
+/docs/js/latest/api/router/OnActivate-interface	/api/router/OnActivate
+/docs/js/latest/api/router/Redirect-class.html	/api/router/Redirect
+/docs/js/latest/api/router/RouteDefinition-interface.html	/api/router/RouteDefinition
+/docs/js/latest/api/router/RouteParams-class	/api/router/RouteParams
+/docs/js/latest/api/router/RouteParams-class.html	/api/router/RouteParams
+/docs/js/latest/api/router/Router-class.html	/api/router/Router
+/docs/js/latest/api/router/testing	/api/router/testing
+/docs/js/latest/api/upgrade/index/UpgradeAdapter-class.html	/api/upgrade/UpgradeAdapter
+/docs/js/latest/api/upgrade/static/UpgradeModule-class	/api/upgrade/static/UpgradeModule
+/docs/js/latest/api/upgrade/static/UpgradeModule-class.html	/api/upgrade/static/UpgradeModule
+/docs/js/latest/cookbook/ts-to-js.html	https://github.com/angular/angular/blob/master/aio/content/guide/change-log.md#es6--described-in-typescript-to-javascript-2016-11-14
+/docs/js/latest/glossary	/guide/glossary
+/docs/js/latest/guide/	/docs
+/docs/js/latest/guide/lifecycle-hooks	/guide/lifecycle-hooks
+/docs/js/latest/guide/ngmodule	/guide/ngmodules
+/docs/js/latest/resources	/resources
+/docs/latest/tutorial	/tutorial
+/styleguide	/guide/styleguide
+/docs/styleguide	/guide/styleguide
+/docs/styleguide.html	/guide/styleguide
+/docs/ts/latest/api/core/HostBinding-var.html	/api/core/HostBinding
+/docs/ts/latest/api/core/index/BaseException-class.html	/api/core/BaseException
+/docs/ts/latest/api/core/index/PLATFORM_PIPES-let.html	/api/common/CommonModule
+/docs/ts/latest/api/core/OnInit-interface.html	/api/core/OnInit
+/docs/ts/latest/api/core/OpaqueToken-class.html	/api/core/OpaqueToken
+/docs/ts/latest/api/core/OptionalMetadata-class.html	/api/core/Optional
+/docs/ts/latest/api/core/testing/index/async-function.html	/api/core/testing/async
+/docs/ts/latest/api/core/testing/index/fakeAsync-function.html	/api/core/testing/fakeAsync
+/docs/ts/latest/api/core/testing/index/TestComponentRenderer-class.html	/api/core/testing/TestComponentRenderer
+/docs/ts/latest/api/core/testing/index/tick-function.html	/api/core/testing/tick
+/docs/ts/latest/api/http/Connection-class.html	/api/http/Connection
+/docs/ts/latest/api/http/testing/index/MockBackend-class.html	/api/http/testing/MockBackend
+/docs/ts/latest/api/http/testing/index/MockConnection-class.html	/api/http/testing/MockConnection
+/docs/ts/latest/api/platform-browser-dynamic/index/workerAppDynamicPlatform-let.html	/api/platform-browser-dynamic/workerAppDynamicPlatform
+/docs/ts/latest/api/testing/fakeAsync-function.html	/api/core/testing/fakeAsync
+/docs/ts/latest/cookbook/ts-to-js.html	https://github.com/angular/angular/blob/master/aio/content/guide/change-log.md#es6--described-in-typescript-to-javascript-2016-11-14
+/guide/cli-quickstart	/guide/quickstart
+/guide/learning-angular	/guide/quickstart
+/guide/learning-angular.html	/guide/quickstart
+/guide/metadata	/guide/aot-compiler
+/guide/service-worker-getstart	/guide/service-worker-getting-started
+/guide/service-worker-comm	/guide/service-worker-communications
+/guide/service-worker-configref	/guide/service-worker-config
+/guide/webpack	https://v5.angular.io/guide/webpack
+/news	https://blog.angular.io/
+/news.html	https://blog.angular.io/
+/testing	/guide/testing
+/testing/first-app-tests.html	/guide/testing
\ No newline at end of file
diff --git a/aio/tests/deployment/shared/helpers.ts b/aio/tests/deployment/shared/helpers.ts
new file mode 100644
index 000000000000..d50a6ae375a4
--- /dev/null
+++ b/aio/tests/deployment/shared/helpers.ts
@@ -0,0 +1,76 @@
+import { resolve } from 'canonical-path';
+import { load as loadJson } from 'cjson';
+import { readFileSync } from 'fs';
+import { get as httpGet } from 'http';
+import { get as httpsGet } from 'https';
+
+import { FirebaseRedirector, FirebaseRedirectConfig } from '../../../tools/firebase-test-utils/FirebaseRedirector';
+
+
+const AIO_DIR = resolve(__dirname, '../../..');
+
+export function getRedirector() {
+  return new FirebaseRedirector(loadRedirects());
+}
+
+export function loadRedirects(): FirebaseRedirectConfig[] {
+  const pathToFirebaseJSON = `${AIO_DIR}/firebase.json`;
+  const contents = loadJson(pathToFirebaseJSON);
+  return contents.hosting.redirects;
+}
+
+export function loadLegacyUrls() {
+  const pathToLegacyUrls = `${__dirname}/URLS_TO_REDIRECT.txt`;
+  const urls = readFileSync(pathToLegacyUrls, 'utf8').split('\n').map(line => line.split('\t'));
+  return urls;
+}
+
+export function loadLocalSitemapUrls() {
+  const pathToSiteMap = `${AIO_DIR}/src/generated/sitemap.xml`;
+  const xml = readFileSync(pathToSiteMap, 'utf8');
+  return extractSitemapUrls(xml);
+}
+
+export async function loadRemoteSitemapUrls(host: string) {
+  const urlToSiteMap = `${host}/generated/sitemap.xml`;
+  const get = /^https:/.test(host) ? httpsGet : httpGet;
+
+  const xml = await new Promise<string>((resolve, reject) => {
+    let responseText = '';
+    get(urlToSiteMap, res => res
+        .on('data', chunk => responseText += chunk)
+        .on('end', () => resolve(responseText))
+        .on('error', reject));
+  });
+
+  // Currently, all sitemaps use `angular.io` as host in URLs (which is fine since we only use the
+  // sitemap `angular.io`). See also `aio/src/extra-files/*/robots.txt`.
+  return extractSitemapUrls(xml, 'https://angular.io/');
+}
+
+export function loadSWRoutes() {
+  const pathToSWManifest = `${AIO_DIR}/ngsw-manifest.json`;
+  const contents = loadJson(pathToSWManifest);
+  const routes = contents.routing.routes;
+  return Object.keys(routes).map(route => {
+    const routeConfig = routes[route];
+    switch (routeConfig.match) {
+      case 'exact':
+        return (url) => url === route;
+      case 'prefix':
+        return (url) => url.startsWith(route);
+      case 'regex':
+        const regex = new RegExp(route);
+        return (url) => regex.test(url);
+      default:
+        throw new Error(`unknown route config: ${route} - ${routeConfig.match}`);
+    }
+  });
+}
+
+// Private functions
+function extractSitemapUrls(xml: string, host = '%%DEPLOYMENT_HOST%%') {
+  const urls: string[] = [];
+  xml.replace(/<loc>([^<]+)<\/loc>/g, (_, loc) => urls.push(loc.replace(host, '')) as any);
+  return urls;
+}
diff --git a/aio/tests/deployment/unit/testFirebaseRedirection.spec.ts b/aio/tests/deployment/unit/testFirebaseRedirection.spec.ts
new file mode 100644
index 000000000000..d50f81f32db7
--- /dev/null
+++ b/aio/tests/deployment/unit/testFirebaseRedirection.spec.ts
@@ -0,0 +1,31 @@
+import { getRedirector, loadLegacyUrls, loadLocalSitemapUrls, loadRedirects } from '../shared/helpers';
+
+describe('firebase.json redirect config', () => {
+  describe('with sitemap urls', () => {
+    loadLocalSitemapUrls().forEach(url => {
+      it('should not redirect any urls in the sitemap', () => {
+        expect(getRedirector().redirect(url)).toEqual(url);
+      });
+    });
+  });
+
+  describe('with legacy urls', () => {
+    loadLegacyUrls().forEach(urlPair => {
+      it('should redirect the legacy urls', () => {
+        const redirector = getRedirector();
+        expect(redirector.redirect(urlPair[0])).not.toEqual(urlPair[0]);
+        if (urlPair[1]) {
+          expect(redirector.redirect(urlPair[0])).toEqual(urlPair[1]);
+        }
+      });
+    });
+
+    describe('destinations', () => {
+      loadRedirects().forEach(redirect => {
+        it('should match pattern "^(https?:/)?/.*"', () => {
+          expect(redirect.destination).toMatch(/^(https?:\/)?\/.*/);
+        });
+      });
+    });
+  });
+});
diff --git a/aio/tests/deployment/unit/testServiceWorkerRoutes.spec.ts b/aio/tests/deployment/unit/testServiceWorkerRoutes.spec.ts
new file mode 100644
index 000000000000..005353ee72b5
--- /dev/null
+++ b/aio/tests/deployment/unit/testServiceWorkerRoutes.spec.ts
@@ -0,0 +1,39 @@
+import { loadLegacyUrls, loadLocalSitemapUrls, loadSWRoutes } from '../shared/helpers';
+
+describe('service-worker routes', () => {
+
+  loadLocalSitemapUrls().forEach(url => {
+    it('should process URLs in the Sitemap', () => {
+      const routes = loadSWRoutes();
+      expect(routes.some(test => test(url))).toBeTruthy(url);
+    });
+  });
+
+  loadLegacyUrls().forEach(urlPair => {
+    const url = urlPair[0];
+    it('should ignore legacy URLs that will be redirected', () => {
+      const routes = loadSWRoutes();
+      expect(routes.some(test => test(url))).toBeFalsy(url);
+    });
+  });
+
+  it('should ignore stackblitz URLs', () => {
+    const routes = loadSWRoutes();
+
+    // Normal StackBlitz URLs.
+    expect(routes.some(test => test('/generated/live-examples/toh-pt6/stackblitz.html'))).toBeFalsy();
+    expect(routes.some(test => test('/generated/live-examples/toh-pt6/stackblitz'))).toBeFalsy();
+
+    // Embedded StackBlitz URLs.
+    expect(routes.some(test => test('/generated/live-examples/toh-pt6/stackblitz.html?ctl=1'))).toBeFalsy();
+    expect(routes.some(test => test('/generated/live-examples/toh-pt6/stackblitz?ctl=1'))).toBeFalsy();
+  });
+
+  it('should ignore URLs to files with extensions', () => {
+    const routes = loadSWRoutes();
+    expect(routes.some(test => test('/generated/zips/animations/animations.zip'))).toBeFalsy();
+    expect(routes.some(test => test('/generated/images/guide/animations/animation_auto.gif'))).toBeFalsy();
+    expect(routes.some(test => test('/generated/ie-polyfills.min.js'))).toBeFalsy();
+    expect(routes.some(test => test('/generated/docs/guide/animations.json'))).toBeFalsy();
+  });
+});
diff --git a/aio/tests/e2e/api.e2e-spec.ts b/aio/tests/e2e/api.e2e-spec.ts
new file mode 100644
index 000000000000..9ff6625eef3f
--- /dev/null
+++ b/aio/tests/e2e/api.e2e-spec.ts
@@ -0,0 +1,69 @@
+import { ApiPage } from './api.po';
+
+describe('Api pages', function() {
+  it('should show direct subclasses of a class', () => {
+    const page = new ApiPage('api/forms/AbstractControlDirective');
+    expect(page.getDescendants('class', true)).toEqual(['ControlContainer', 'NgControl']);
+  });
+
+  it('should show direct and indirect subclasses of a class', () => {
+    const page = new ApiPage('api/forms/AbstractControlDirective');
+    expect(page.getDescendants('class')).toEqual(['ControlContainer', 'AbstractFormGroupDirective', 'NgControl']);
+  });
+
+  it('should show child interfaces that extend an interface', () => {
+    const page = new ApiPage('api/forms/Validator');
+    expect(page.getDescendants('interface')).toEqual(['AsyncValidator']);
+  });
+
+  it('should show classes that implement an interface', () => {
+    const page = new ApiPage('api/animations/AnimationPlayer');
+    expect(page.getDescendants('class')).toEqual(['NoopAnimationPlayer', 'MockAnimationPlayer']);
+  });
+
+  it('should show type params of type-aliases', () => {
+    const page = new ApiPage('api/common/http/HttpEvent');
+    expect(page.getOverview('type-alias').getText()).toContain('type HttpEvent<T>');
+  });
+
+  it('should show readonly properties as getters', () => {
+    const page = new ApiPage('api/common/http/HttpRequest');
+    expect(page.getOverview('class').getText()).toContain('get body: T | null');
+  });
+
+  it('should not show parenthesis for getters', () => {
+    const page = new ApiPage('api/core/NgModuleRef');
+    expect(page.getOverview('class').getText()).toContain('get injector: Injector');
+  });
+
+  it('should show both type and initializer if set', () => {
+    const page = new ApiPage('api/common/HashLocationStrategy');
+    expect(page.getOverview('class').getText()).toContain('path(includeHash: boolean = false): string');
+  });
+
+  it('should show a "Properties" section if there are public properties', () => {
+    const page = new ApiPage('api/core/ViewContainerRef');
+    expect(page.getSection('instance-properties').isPresent()).toBe(true);
+  });
+
+  it('should not show a "Properties" section if there are only internal properties', () => {
+    const page = new ApiPage('api/forms/FormControl');
+    expect(page.getSection('instance-properties').isPresent()).toBe(false);
+  });
+
+  it('should show "impure" badge if pipe is not pure', () => {
+    const page = new ApiPage('api/common/AsyncPipe');
+    const impureBadge = page.getBadge('impure-pipe');
+    expect(impureBadge.isPresent()).toBe(true);
+  });
+
+  it('should show links to github', () => {
+    const page = new ApiPage('api/core/EventEmitter');
+    /* tslint:disable:max-line-length */
+    expect(page.ghLinks.get(0).getAttribute('href'))
+      .toMatch(/https:\/\/github\.com\/angular\/angular\/edit\/master\/packages\/core\/src\/event_emitter\.ts\?message=docs\(core\)%3A%20describe%20your%20change\.\.\.#L\d+-L\d+/);
+    expect(page.ghLinks.get(1).getAttribute('href'))
+      .toMatch(/https:\/\/github\.com\/angular\/angular\/tree\/[^/]+\/packages\/core\/src\/event_emitter\.ts#L\d+-L\d+/);
+    /* tslint:enable:max-line-length */
+  });
+});
diff --git a/aio/tests/e2e/api.po.ts b/aio/tests/e2e/api.po.ts
new file mode 100644
index 000000000000..b2bb4a3b1504
--- /dev/null
+++ b/aio/tests/e2e/api.po.ts
@@ -0,0 +1,42 @@
+import { element, by } from 'protractor';
+import { SitePage } from './app.po';
+
+export class ApiPage extends SitePage {
+  constructor(url: string) {
+    super();
+    this.navigateTo(url);
+  }
+
+  getDescendants(docType: string, onlyDirect = false) {
+    // This selector is horrible because we have potentially recursive HTML lists
+    //
+    // ul
+    //   li
+    //     code
+    //     ul
+    //       li
+    //         code
+    //     ul
+    //       li
+    //         code
+    //   li
+    //     code
+    //
+    // and we want to be able to pull out the code elements from only the first level
+    // if `onlyDirect` is set to `true`.
+    const selector = `.descendants.${docType} ${onlyDirect ? '>' : ''} ul > li > code`;
+    return element.all(by.css(selector)).map<string>(item => item && item.getText());
+  }
+
+  getOverview(docType) {
+    return element(by.css(`.${docType}-overview`));
+  }
+
+  getSection(cls) {
+    return element(by.css(`section.${cls}`));
+  }
+
+  getBadge(cls) {
+    return element(by.css('.api-status-label.' +  cls));
+  }
+}
diff --git a/aio/tests/e2e/app.e2e-spec.ts b/aio/tests/e2e/app.e2e-spec.ts
new file mode 100644
index 000000000000..458b102ae60a
--- /dev/null
+++ b/aio/tests/e2e/app.e2e-spec.ts
@@ -0,0 +1,182 @@
+import { browser, by, element, ElementFinder } from 'protractor';
+import { SitePage } from './app.po';
+
+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();
+  });
+
+  it('should show features text after clicking "Features"', () => {
+    page.navigateTo('');
+    page.click(page.getTopMenuLink('features'));
+    expect(page.getDocViewerText()).toMatch(/Progressive web apps/i);
+  });
+
+  it('should set appropriate window titles', () => {
+    page.navigateTo('');
+    expect(browser.getTitle()).toBe('Angular');
+
+    page.click(page.getTopMenuLink('features'));
+    expect(browser.getTitle()).toBe('Angular - FEATURES & BENEFITS');
+
+    page.click(page.homeLink);
+    expect(browser.getTitle()).toBe('Angular');
+  });
+
+  it('should not navigate when clicking on nav-item headings (sub-menu toggles)', () => {
+    // Show the sidenav.
+    page.navigateTo('docs');
+    expect(page.locationPath()).toBe('/docs');
+
+    // Get the top-level nav-item headings (sub-menu toggles).
+    const navItemHeadings = page.getNavItemHeadings(page.sidenav, 1);
+
+    // Test all headings (and sub-headings).
+    expect(navItemHeadings.count()).toBeGreaterThan(0);
+    navItemHeadings.each(heading => testNavItemHeading(heading!, 1));
+
+    // Helpers
+    function expectToBeCollapsed(elementFinder: ElementFinder) {
+      expect(elementFinder.getAttribute('class')).toMatch(/\bcollapsed\b/);
+      expect(elementFinder.getAttribute('class')).not.toMatch(/\bexpanded\b/);
+    }
+
+    function expectToBeExpanded(elementFinder: ElementFinder) {
+      expect(elementFinder.getAttribute('class')).not.toMatch(/\bcollapsed\b/);
+      expect(elementFinder.getAttribute('class')).toMatch(/\bexpanded\b/);
+    }
+
+    function testNavItemHeading(heading: ElementFinder, level: number) {
+      const children = page.getNavItemHeadingChildren(heading, level);
+
+      // Headings are initially collapsed.
+      expectToBeCollapsed(children);
+
+      // Ensure heading does not cause navigation when expanding.
+      page.click(heading);
+      expectToBeExpanded(children);
+      expect(page.locationPath()).toBe('/docs');
+
+      // Recursively test child-headings (while this heading is expanded).
+      const nextLevel = level + 1;
+      const childNavItemHeadings = page.getNavItemHeadings(children, nextLevel);
+      childNavItemHeadings.each(childHeading => testNavItemHeading(childHeading!, nextLevel));
+
+      // Ensure heading does not cause navigation when collapsing.
+      page.click(heading);
+      expectToBeCollapsed(children);
+      expect(page.locationPath()).toBe('/docs');
+    }
+  });
+
+  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.click(page.getTopMenuLink('features'));
+    expect(page.getDocViewerText()).toMatch(/Progressive web apps/i);
+
+    // Show the menu
+    page.click(page.docsMenuLink);
+
+    // 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.click(page.getNavItem(/introduction/i));
+    expect(page.getDocViewerText()).toMatch(/Tutorial: Tour of Heroes/i);
+  });
+
+  it('should render `{@example}` dgeni tags as `<code-example>` elements with HTML escaped content', () => {
+    page.navigateTo('guide/component-styles');
+    const codeExample = element.all(by.css('code-example')).first();
+    expect(page.getInnerHtml(codeExample)).toContain('&lt;h1&gt;Tour of Heroes&lt;/h1&gt;');
+  });
+
+  describe('scrolling to the top', () => {
+    it('should scroll to the top when navigating to another page', () => {
+      page.navigateTo('guide/security');
+
+      page.scrollToBottom();
+      expect(page.getScrollTop()).toBeGreaterThan(0);
+
+      page.click(page.getNavItem(/api/i));
+      expect(page.locationPath()).toBe('/api');
+      expect(page.getScrollTop()).toBe(0);
+    });
+
+    it('should scroll to the top when navigating to the same page', () => {
+      page.navigateTo('guide/security');
+
+      page.scrollToBottom();
+      expect(page.getScrollTop()).toBeGreaterThan(0);
+
+      page.click(page.getNavItem(/security/i));
+      expect(page.locationPath()).toBe('/guide/security');
+      expect(page.getScrollTop()).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();
+    });
+  });
+
+  describe('google analytics', () => {
+
+    it('should call ga with initial URL', done => {
+      let path: string;
+      page.navigateTo('api');
+      page.locationPath()
+        .then(p => path = p)
+        .then(() => page.ga())
+        .then(calls => {
+          // The last call (length-1) will be the `send` command
+          // The second to last call (length-2) will be the command to `set` the page url
+          expect(calls[calls.length - 2]).toEqual(['set', 'page', path]);
+          done();
+        });
+    });
+
+    it('should call ga with new URL on navigation', done => {
+      let path: string;
+      page.navigateTo('');
+      page.click(page.getTopMenuLink('features'));
+      page.locationPath()
+        .then(p => path = p)
+        .then(() => page.ga())
+        .then(calls => {
+          // The last call (length-1) will be the `send` command
+          // The second to last call (length-2) will be the command to `set` the page url
+          expect(calls[calls.length - 2]).toEqual(['set', 'page', path]);
+          done();
+        });
+    });
+  });
+
+  describe('404 page', () => {
+    it('should add or remove the "noindex" meta tag depending upon the validity of the page', () => {
+      page.navigateTo('');
+      expect(element(by.css('meta[name="robots"]')).isPresent()).toBeFalsy();
+
+      page.navigateTo('does/not/exist');
+      expect(element(by.css('meta[name="robots"][content="noindex"]')).isPresent()).toBeTruthy();
+
+      page.click(page.getTopMenuLink('features'));
+      expect(element(by.css('meta[name="robots"]')).isPresent()).toBeFalsy();
+    });
+
+    it('should search the index for words found in the url', () => {
+      page.navigateTo('http/router');
+      const results = page.getSearchResults();
+
+      expect(results).toContain('Http');
+      expect(results).toContain('Router');
+    });
+  });
+});
diff --git a/aio/tests/e2e/app.po.ts b/aio/tests/e2e/app.po.ts
new file mode 100644
index 000000000000..c15b84f35a7e
--- /dev/null
+++ b/aio/tests/e2e/app.po.ts
@@ -0,0 +1,81 @@
+import { browser, element, by, promise, ElementFinder, ExpectedConditions } from 'protractor';
+
+const githubRegex = /https:\/\/github.com\/angular\/angular\//;
+
+export class SitePage {
+
+  links = element.all(by.css('md-toolbar a'));
+  homeLink = element(by.css('a.home'));
+  docsMenuLink = element(by.cssContainingText('aio-top-menu a', 'Docs'));
+  sidenav = element(by.css('mat-sidenav'));
+  docViewer = element(by.css('aio-doc-viewer'));
+  codeExample = element.all(by.css('aio-doc-viewer pre > code'));
+  ghLinks = this.docViewer
+    .all(by.css('a'))
+    .filter((a: ElementFinder) => a.getAttribute('href').then(href => githubRegex.test(href)));
+
+  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 .vertical-menu-item'))
+                  .filter(elementFinder => elementFinder.getText().then(text => pattern.test(text)))
+                  .first();
+  }
+  getNavItemHeadings(parent: ElementFinder, level: number) {
+    const targetSelector = `aio-nav-item .vertical-menu-item.heading.level-${level}`;
+    return parent.all(by.css(targetSelector));
+  }
+  getNavItemHeadingChildren(heading: ElementFinder, level: number) {
+    const targetSelector = `.heading-children.level-${level}`;
+    const script = `return arguments[0].parentNode.querySelector('${targetSelector}');`;
+    return element(() => browser.executeScript(script, heading));
+  }
+  getTopMenuLink(path) { return element(by.css(`aio-top-menu a[href="${path}"]`)); }
+
+  ga() { return browser.executeScript('return window["ga"].q') as promise.Promise<any[][]>; }
+  locationPath() { return browser.executeScript('return document.location.pathname') as promise.Promise<string>; }
+
+  navigateTo(pageUrl) {
+    // Navigate to the page, disable animations, and wait for Angular.
+    return browser.get('/' + pageUrl)
+        .then(() => browser.executeScript('document.body.classList.add(\'no-animations\')'))
+        .then(() => browser.waitForAngular());
+  }
+
+  getDocViewerText() {
+    return this.docViewer.getText();
+  }
+
+  getInnerHtml(elementFinder) {
+    // `getInnerHtml` was removed from webDriver and this is the workaround.
+    // See https://github.com/angular/protractor/blob/master/CHANGELOG.md#breaking-changes
+    return browser.executeScript('return arguments[0].innerHTML;', elementFinder);
+  }
+
+  getScrollTop() {
+    return browser.executeScript('return window.pageYOffset');
+  }
+
+  scrollToBottom() {
+    return browser.executeScript('window.scrollTo(0, document.body.scrollHeight)');
+  }
+
+  click(elementFinder: ElementFinder) {
+    return elementFinder.click().then(() => browser.waitForAngular());
+  }
+
+  enterSearch(query: string) {
+    const input = element(by.css('.search-container input[type=search]'));
+    input.clear();
+    input.sendKeys(query);
+  }
+
+  getSearchResults() {
+    const results = element.all(by.css('.search-results li'));
+    browser.wait(ExpectedConditions.presenceOf(results.first()), 8000);
+    return results.map(link => link && link.getText());
+  }
+}
diff --git a/aio/tests/e2e/onerror.e2e-spec.ts b/aio/tests/e2e/onerror.e2e-spec.ts
new file mode 100644
index 000000000000..70549b4cd01e
--- /dev/null
+++ b/aio/tests/e2e/onerror.e2e-spec.ts
@@ -0,0 +1,203 @@
+import { browser } from 'protractor';
+import { SitePage } from './app.po';
+
+/* tslint:disable:max-line-length */
+
+describe('onerror handler', function() {
+  let page: SitePage;
+
+  beforeAll(() => {
+    page = new SitePage();
+    page.navigateTo('');
+  });
+
+
+  it('(called without an error object) should call ga with a payload based on the message, url, row and column arguments', async () => {
+    const message1 = await callOnError('Error: some error message', 'some-file.js', 12, 3, undefined);
+    expect(message1).toEqual('some error message\nsome-file.js:12:3');
+    const message2 = await callOnError('Error: some error message', undefined, undefined, undefined, undefined);
+    expect(message2).toEqual('some error message\nnull:?:?');
+  });
+
+  it('(called without an error object) should call ga with a payload that is no longer that 150 characters', async () => {
+    const message = await callOnError(
+      'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz' +
+      'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz',
+      'some-file.js', 12, 3, undefined);
+    expect(message).toEqual(
+      'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz' +
+      'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrst');
+  });
+
+  it('(called with a Firefox on android style error) should call ga with a payload based on the error object', async () => {
+    const message = await callOnError('Error: something terrible has happened. oh no. oh no.', undefined, undefined, undefined, {
+      stack: `AppComponent@https://example.com/app/app.component.ts:31:29
+createClass@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:12200:20
+createDirectiveInstance@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:12049:37
+createViewNodes@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:13487:53
+createRootView@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:13377:5
+callWithDebugContext@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:14778:39
+debugCreateRootView@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:14079:12
+ComponentFactory_.prototype.create@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:10998:37
+ComponentFactoryBoundToModule.prototype.create@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:3958:16
+ApplicationRef.prototype.bootstrap@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:5769:40
+PlatformRef.prototype._moduleDoBootstrap/<@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:5496:74
+PlatformRef.prototype._moduleDoBootstrap@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:5496:13
+PlatformRef.prototype.bootstrapModuleFactory/</</<@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:5417:21
+ZoneDelegate.prototype.invoke@https://example.com/packages/zone.js@0.8.18/dist/zone.js:392:17
+forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:4665:24
+ZoneDelegate.prototype.invoke@https://example.com/packages/zone.js@0.8.18/dist/zone.js:391:17
+Zone.prototype.run@https://example.com/packages/zone.js@0.8.18/dist/zone.js:142:24
+scheduleResolveOrReject/<@https://example.com/packages/zone.js@0.8.18/dist/zone.js:873:52
+ZoneDelegate.prototype.invokeTask@https://example.com/packages/zone.js@0.8.18/dist/zone.js:425:17
+forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:4656:24
+ZoneDelegate.prototype.invokeTask@https://example.com/packages/zone.js@0.8.18/dist/zone.js:424:17
+Zone.prototype.runTask@https://example.com/packages/zone.js@0.8.18/dist/zone.js:192:28
+drainMicroTaskQueue@https://example.com/packages/zone.js@0.8.18/dist/zone.js:602:25` });
+
+    expect(message).toEqual(`something terrible has happened. oh no. oh no.
+AppComponent@app.component.ts:31:29
+createClass@core.umd.js:12200:20
+createDirectiveInstance@core.umd.j`);
+  });
+
+  it('(called with a Safari 11 style error) should call ga with a payload based on the error object', async () => {
+    const message = await callOnError('Error: something terrible has happened. oh no. oh no.', undefined, undefined, undefined, {
+      stack: `AppComponent
+      createClass
+      createDirectiveInstance
+      createViewNodes
+      createRootView
+      callWithDebugContext
+      create
+      bootstrap
+      forEach@[native code]
+      _moduleDoBootstrap
+
+      onInvoke
+      run
+
+      onInvokeTask
+      runTask
+      drainMicroTaskQueue
+      promiseReactionJob@[native code]` });
+
+    expect(message).toEqual(`something terrible has happened. oh no. oh no.
+AppComponent
+createClass
+createDirectiveInstance
+createViewNodes
+createRootView
+callWithDebugContext
+cr`);
+  });
+
+  it('(called with a Opera 50 style error) should call ga with a payload based on the error object', async () => {
+    const message = await callOnError('Error: something terrible has happened. oh no. oh no.', undefined, undefined, undefined, {
+      stack: `Error: something terrible has happened. oh no. oh no.
+      at new AppComponent (https://example.com/app/app.component.ts:31:29)
+      at createClass (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:12200:20)
+      at createDirectiveInstance (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:12049:37)
+      at createViewNodes (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:13487:53)
+      at createRootView (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:13377:5)
+      at callWithDebugContext (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:14778:42)
+      at Object.debugCreateRootView [as createRootView] (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:14079:12)
+      at ComponentFactory_.create (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:10998:46)
+      at ComponentFactoryBoundToModule.create (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:3958:29)
+      at ApplicationRef.bootstrap (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:5769:57)` });
+
+    expect(message).toEqual(`something terrible has happened. oh no. oh no.
+new AppComponent@app.component.ts:31:29
+createClass@core.umd.js:12200:20
+createDirectiveInstance@core.u`);
+  });
+
+  it('(called with a Chrome 64 style error) should call ga with a payload based on the error object', async () => {
+    const message = await callOnError('Error: something terrible has happened. oh no. oh no.', undefined, undefined, undefined, {
+      stack: `Error: something terrible has happened. oh no. oh no.
+      at new AppComponent (https://example.com/app/app.component.ts:31:29)
+      at createClass (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:12200:20)
+      at createDirectiveInstance (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:12049:37)
+      at createViewNodes (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:13487:53)
+      at createRootView (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:13377:5)
+      at callWithDebugContext (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:14778:42)
+      at Object.debugCreateRootView [as createRootView] (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:14079:12)
+      at ComponentFactory_.create (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:10998:46)
+      at ComponentFactoryBoundToModule.create (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:3958:29)
+      at ApplicationRef.bootstrap (https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:5769:57)` });
+
+    expect(message).toEqual(`something terrible has happened. oh no. oh no.
+new AppComponent@app.component.ts:31:29
+createClass@core.umd.js:12200:20
+createDirectiveInstance@core.u`);
+  });
+
+  it('(called with a Firefox 58 style error) should call ga with a payload based on the error object', async () => {
+    const message = await callOnError('Error: something terrible has happened. oh no. oh no.', undefined, undefined, undefined, {
+      stack: `AppComponent@https://example.com/app/app.component.ts:31:29
+createClass@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:12200:20
+createDirectiveInstance@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:12049:37
+createViewNodes@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:13487:53
+createRootView@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:13377:5
+callWithDebugContext@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:14778:39
+debugCreateRootView@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:14079:12
+ComponentFactory_.prototype.create@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:10998:37
+ComponentFactoryBoundToModule.prototype.create@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:3958:16
+ApplicationRef.prototype.bootstrap@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:5769:40
+PlatformRef.prototype._moduleDoBootstrap/<@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:5496:74
+PlatformRef.prototype._moduleDoBootstrap@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:5496:13
+PlatformRef.prototype.bootstrapModuleFactory/</</<@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:5417:21
+ZoneDelegate.prototype.invoke@https://example.com/packages/zone.js@0.8.18/dist/zone.js:392:17
+onInvoke@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:4665:24
+ZoneDelegate.prototype.invoke@https://example.com/packages/zone.js@0.8.18/dist/zone.js:391:17
+Zone.prototype.run@https://example.com/packages/zone.js@0.8.18/dist/zone.js:142:24
+scheduleResolveOrReject/<@https://example.com/packages/zone.js@0.8.18/dist/zone.js:873:52
+ZoneDelegate.prototype.invokeTask@https://example.com/packages/zone.js@0.8.18/dist/zone.js:425:17
+onInvokeTask@https://example.com/packages/@angular/core@5.0.0/bundles/core.umd.js:4656:24
+ZoneDelegate.prototype.invokeTask@https://example.com/packages/zone.js@0.8.18/dist/zone.js:424:17
+Zone.prototype.runTask@https://example.com/packages/zone.js@0.8.18/dist/zone.js:192:28
+drainMicroTaskQueue@https://example.com/packages/zone.js@0.8.18/dist/zone.js:602:25` });
+
+    expect(message).toEqual(`something terrible has happened. oh no. oh no.
+AppComponent@app.component.ts:31:29
+createClass@core.umd.js:12200:20
+createDirectiveInstance@core.umd.j`);
+  });
+
+  it('(called with a Edge 16 style error) should call ga with a payload based on the error object', async () => {
+    const message = await callOnError('Error: something terrible has happened. oh no. oh no.', undefined, undefined, undefined, {
+      stack: `Error: something terrible has happened. oh no. oh no.
+      at AppComponent (eval code:31:21)
+      at createClass (eval code:12200:13)
+      at createDirectiveInstance (eval code:12049:5)
+      at createViewNodes (eval code:13487:21)
+      at createRootView (eval code:13377:5)
+      at callWithDebugContext (eval code:14778:9)
+      at debugCreateRootView (eval code:14079:5)
+      at ComponentFactory_.prototype.create (eval code:10998:9)
+      at ComponentFactoryBoundToModule.prototype.create (eval code:3958:9)
+      at ApplicationRef.prototype.bootstrap (eval code:5769:9)` });
+
+    expect(message).toEqual(`something terrible has happened. oh no. oh no.
+AppComponent@???:31:21
+createClass@???:12200:13
+createDirectiveInstance@???:12049:5
+createViewNodes@???`);
+  });
+
+  async function callOnError(message, url, line, column, error) {
+    await browser.executeScript(function() {
+      // reset the ga queue
+      (window as any).ga.q.length = 0;
+      // post the error to the handler
+      window.onerror(arguments[0], arguments[1], arguments[2], arguments[3], arguments[4]);
+    }, message, url, line, column, error);
+    const gaCalls = await page.ga();
+    const exceptionCall = gaCalls.find(call => call[0] === 'send' && call[1] === 'exception');
+    if (exceptionCall) {
+      const payload = exceptionCall[2];
+      expect(payload.exFatal).toBe(true);
+      return payload.exDescription;
+    }
+  }
+});
diff --git a/aio/tests/e2e/protractor.conf.js b/aio/tests/e2e/protractor.conf.js
new file mode 100644
index 000000000000..2fbf107c8f2c
--- /dev/null
+++ b/aio/tests/e2e/protractor.conf.js
@@ -0,0 +1,35 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './*.e2e-spec.ts'
+  ],
+  capabilities: {
+    browserName: 'chrome',
+    // For Travis
+    chromeOptions: {
+      binary: process.env.CHROME_BIN,
+      args: ['--no-sandbox']
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'tests/e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
diff --git a/aio/tests/e2e/search.e2e-spec.ts b/aio/tests/e2e/search.e2e-spec.ts
new file mode 100644
index 000000000000..84bd4e64d65b
--- /dev/null
+++ b/aio/tests/e2e/search.e2e-spec.ts
@@ -0,0 +1,28 @@
+import { SitePage } from './app.po';
+
+describe('site search', () => {
+  let page;
+
+  beforeEach(() => {
+    page = new SitePage();
+    page.navigateTo('');
+  });
+
+  it('should find pages when searching by a partial word in the title', () => {
+    page.enterSearch('ngCont');
+    expect(page.getSearchResults()).toContain('NgControl');
+
+    page.enterSearch('accessor');
+    expect(page.getSearchResults()).toContain('ControlValueAccessor');
+  });
+
+  it('should find API docs whose instance member name matches the search query', () => {
+    page.enterSearch('decode');
+    expect(page.getSearchResults()).toContain('HttpParameterCodec');
+  });
+
+  it('should find API docs whose static method name matches the search query', () => {
+    page.enterSearch('compose');
+    expect(page.getSearchResults()).toContain('Validators');
+  });
+});
diff --git a/aio/tests/e2e/tsconfig.e2e.json b/aio/tests/e2e/tsconfig.e2e.json
new file mode 100644
index 000000000000..3e5bb16361bb
--- /dev/null
+++ b/aio/tests/e2e/tsconfig.e2e.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
diff --git a/aio/tools/README.md b/aio/tools/README.md
new file mode 100644
index 000000000000..fa0d40b36454
--- /dev/null
+++ b/aio/tools/README.md
@@ -0,0 +1,69 @@
+# AIO project tooling
+
+This document gives an overview of the tools that we use to generate the content for the angular.io website.
+
+The application that actually renders this content can be found in the `/aio/src` folder.
+The handwritten content can be found in the `/aio/content` folder.
+
+Each subfolder in this `/aio/tools/` folder contains a self-contained tool and its configuration. There is
+a `README.md` file in each folder that describes the tool in more detail.
+
+## cli-patches
+
+The AIO application is built using the Angular CLI tool. We are often trialling new features for the CLI, which
+we apply to the library after it is installed.  This folder contains git patch files that contain these new features
+and a utility to apply those patches to the CLI library.
+
+See the [README.md](cli-patches/README.md) for more details.
+
+## examples
+
+Many of the documentation pages contain snippets of code examples. We extract these snippets from real
+working example applications, which are stored in subfolders of the `/aio/content/examples` folder. Each
+example can be built and run independently. Each example also provides e2e specs, which are run as part
+of our Travis build tasks, to verify that the examples continue to work as expected, as changes are made
+to the core Angular libraries.
+
+In order to build, run and test these examples independently we need to install dependencies into their
+sub-folder. Also there are a number of common boilerplate files that are needed to configure each
+example's project. We maintain these common boilerplate files centrally to reduce the amount of effort
+if one of them needs to change.
+
+This `examples` tool folder contains two utilities:
+
+* example-boilerplate.js - install/remove the npm dependencies and boilerplate files into/from each of the
+  examples' subfolders.
+* run-example-e2e.js - run the e2e tests for one or more examples
+
+See the [README.md](examples/README.md) for more details.
+
+## example-zipper
+
+In the AIO application, we offer the reader the option to download each example as a full self-contained
+runnable project packaged as a zip file. These zip files are generated by the utility in this folder.
+
+See the [README.md](example-zipper/README.md) for more details.
+
+## stackblitz-builder
+
+In the AIO application, we can embed a running version of the example as a [Stackblitz](https://stackblitz.com/) session.
+We can also provide a link to create a runnable version of the example in the [Stackblitz](https://stackblitz.com/)
+editor.
+
+See the [README.md](stackblitz-builder/README.md) for more details.
+
+## transforms
+
+All the content that is rendered by the AIO application, and some of its configuration files, are
+generated from source files by [Dgeni](https://github.com/angular/dgeni). Dgeni is a general purpose
+documentation generation tool.
+
+Markdown files in `/aio/content`, code comments in the core Angular source files and example files are
+processed and transformed into files that are consumed by the AIO application.
+
+Dgeni is configured by "packages", which contain services and processors. Some of these packages are
+installed as `node_modules` from the [dgeni-packages](https://github.com/angular/dgeni-packages) and
+some are specific to the AIO project.
+
+The project specific packages are stored in the `aio/tools/transforms` folder. See the
+[README.md](transforms/README.md) for more details.
diff --git a/aio/tools/RELEASE.md b/aio/tools/RELEASE.md
new file mode 100644
index 000000000000..64293bf196bf
--- /dev/null
+++ b/aio/tools/RELEASE.md
@@ -0,0 +1,29 @@
+# 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 are several files in `/aio/tools/examples/shared/boilerplate/*/tsconfig.json` (based on the example type).
+
+**3)** The files `/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web[.build].js` contains the configuration for plunkers. They have some hardcoded versions that could be updated.
+
+>N.B.: Plunkers have been replaced by Stackblitz and (almost) all examples have be replaced by CLI/WebPack-based examples that do not use SystemJS.
+The upgrade examples may still rely on SystemJS.
+
+---
+> NOTE(gkalpak):
+> There are some `package.json` files in `/aio/tools/examples/shared/boilerplate/*`.
+> AFAICT, they are copied over to the examples (based on the example type), but they are neither
+> used for installing dependencies (which come from `/aio/tools/examples/shared/package.json`) nor
+> used in zips (since they are overwritten by `/aio/tools/example-zipper/customizer`).
+> For all stackblitz live-examples, `/aio/tools/examples/shared/boilerplate/cli/package.json` seems
+> to be used.
diff --git a/aio/tools/cli-patches/README.md b/aio/tools/cli-patches/README.md
new file mode 100644
index 000000000000..e92303bf249d
--- /dev/null
+++ b/aio/tools/cli-patches/README.md
@@ -0,0 +1,7 @@
+# Overview
+
+The AIO application is built using the Angular CLI tool. We are often trialling new features for the CLI, which
+we apply to the library after it is installed.  This folder contains git patch files that contain these new features
+and a utility to apply those patches to the CLI library.
+
+**Currently, we have no patches to run.**
\ No newline at end of file
diff --git a/aio/tools/cli-patches/patch.js b/aio/tools/cli-patches/patch.js
new file mode 100644
index 000000000000..e7afdf43fac2
--- /dev/null
+++ b/aio/tools/cli-patches/patch.js
@@ -0,0 +1,9 @@
+const fs = require('fs');
+const sh = require('shelljs');
+
+const PATCH_LOCK = 'node_modules/@angular/cli/.patched';
+
+if (!fs.existsSync(PATCH_LOCK)) {
+  sh.touch(PATCH_LOCK);
+}
+
diff --git a/aio/tools/example-zipper/README.md b/aio/tools/example-zipper/README.md
new file mode 100644
index 000000000000..e4d728a661a7
--- /dev/null
+++ b/aio/tools/example-zipper/README.md
@@ -0,0 +1,84 @@
+# Overview
+
+In the AIO application, we offer the reader the option to download each example as a full self-contained
+runnable project packaged as a zip file. These zip files are generated by the utility in this folder.
+
+## Example zipper
+
+The `exampleZipper.js` tool is very similar to the Stackblitz's `builder.js`. The latter creates an HTML file
+with all the examples' files and the former creates a zip file instead. They both use the `stackblitz.json` file
+to flag an example as something to stackblitz or zip. For example:
+
+```json
+{
+  "description": "Tour of Heroes: Part 6",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes", "http"]
+}
+```
+
+The zipper will use this information for creating new zips.
+
+## Three kinds of examples
+
+The majority of examples in AIO use `CLI`, with some additionally using `Webpack` and upgrade usiing `SystemJS`. This
+tool is able to differentiate between them.
+
+The boilerplate uses a `package.json` that contains packages and scripts to run any kind of example.
+Using that `package.json` in the zips would confuse the users.
+
+Thanks to the `package.json` customizer, we can create a new `package.json` on the fly that would
+only contain the packages and scripts needed to run that example.
+
+The `exampleZipper.js` won't include any `System.js` related files for `CLI` or `Webpack` projects.
+
+### The package.json customizer
+
+Given a `type`, this tool will populate a `package.json` file customized for that type.
+
+Here you find a:
+
+* **base.json** - All the common scripts and packages
+* **cli.json** - Extra scripts and packages for the CLI
+* **universal.json** - Extra scripts and packages for universal
+* **i18n.json** - Extra scripts and packages for i18n
+* **systemjs.json** - All the System.js related packages but it also contains the remainder scripts
+  that are not in the other files.
+
+The tool will also give some standard names to the scripts.
+
+## The zipper.json
+
+As mentioned, the tool uses the `stackblitz.json` as a flag and also a configuration file for the zipper.
+The problem is that not all examples have a stackblitz but they could offer a zip instead.
+
+In those cases, you can create a `zipper.json` file with the same syntax. It will be ignored by the
+stackblitz tool.
+
+## Choosing the zip "type"
+
+In both `stackblitz.json` and `zipper.json` you can use two extra properties for the zipper configuration:
+
+```
+{
+  ...
+  "removeSystemJsConfig": true,
+  "type": "testing"
+}
+```
+
+This would generate a zip for a testing application and it will also remove everything related with
+SystemJS.
+
+## Executing the zip generation
+
+`generateZips.js` will create a zip for each `stackblitz.json`  or `zipper.json` it finds.
+
+Where? At `src/generated/zips/`.
+
+Then the `<live-example>` embedded component will look at this folder to get the zip it needs for
+the example.
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 000000000000..a31942af05c5
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/base.json
@@ -0,0 +1,39 @@
+{
+  "scripts": [
+    { "name": "lint" }
+  ],
+  "dependencies": [
+    "@angular/animations",
+    "@angular/common",
+    "@angular/compiler",
+    "@angular/core",
+    "@angular/forms",
+    "@angular/http",
+    "@angular/platform-browser",
+    "@angular/platform-browser-dynamic",
+    "@angular/router",
+    "@angular/upgrade",
+    "angular-in-memory-web-api",
+    "core-js",
+    "rxjs",
+    "zone.js"
+  ],
+  "devDependencies": [
+    "@angular/compiler-cli",
+    "@angular/platform-server",
+    "@types/jasmine",
+    "@types/node",
+    "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 000000000000..965bd82407a4
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/cli.json
@@ -0,0 +1,19 @@
+{
+  "scripts": [
+    { "name": "ng", "command": "ng" },
+    { "name": "build", "command": "ng build --prod" },
+    { "name": "start", "command": "ng serve" },
+    { "name": "test", "command": "ng test" },
+    { "name": "lint", "command": "ng lint" },
+    { "name": "e2e", "command": "ng e2e" }
+  ],
+  "dependencies": [],
+  "devDependencies": [
+    "@angular-devkit/build-angular",
+    "@angular/cli",
+    "@types/jasminewd2",
+    "jasmine-spec-reporter",
+    "karma-coverage-istanbul-reporter",
+    "ts-node"
+  ]
+}
diff --git a/aio/tools/example-zipper/customizer/package-json/elements.json b/aio/tools/example-zipper/customizer/package-json/elements.json
new file mode 100644
index 000000000000..ac3d25cd1f8b
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/elements.json
@@ -0,0 +1,21 @@
+{
+  "scripts": [
+    { "name": "ng", "command": "ng" },
+    { "name": "build", "command": "ng build" },
+    { "name": "start", "command": "ng serve" },
+    { "name": "test", "command": "ng test" },
+    { "name": "lint", "command": "ng lint" },
+    { "name": "e2e", "command": "ng e2e" }
+  ],
+  "dependencies": [
+    "@angular/elements"
+  ],
+  "devDependencies": [
+    "@angular-devkit/build-angular",
+    "@angular/cli",
+    "@types/jasminewd2",
+    "jasmine-spec-reporter",
+    "karma-coverage-istanbul-reporter",
+    "ts-node"
+  ]
+}
diff --git a/aio/tools/example-zipper/customizer/package-json/i18n.json b/aio/tools/example-zipper/customizer/package-json/i18n.json
new file mode 100644
index 000000000000..57320e769eb0
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/i18n.json
@@ -0,0 +1,21 @@
+{
+  "scripts": [
+    { "name": "start", "command": "ng serve" },
+    { "name": "start:fr", "command": "ng serve --configuration=fr" },
+    { "name": "build", "command": "ng build --prod" },
+    { "name": "build:fr", "command": "ng build --configuration=production-fr" },
+    { "name": "test", "command": "ng test" },
+    { "name": "lint", "command": "ng lint" },
+    { "name": "e2e", "command": "ng e2e" },
+    { "name": "extract", "command": "ng xi18n --output-path=locale" }
+  ],
+  "dependencies": [],
+  "devDependencies": [
+    "@angular-devkit/build-angular",
+    "@angular/cli",
+    "@types/jasminewd2",
+    "jasmine-spec-reporter",
+    "karma-coverage-istanbul-reporter",
+    "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 000000000000..a4afa9a41e87
--- /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 000000000000..2255244dcce2
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/packageJsonCustomizer.js
@@ -0,0 +1,63 @@
+'use strict';
+
+const path = require('canonical-path');
+const fs = require('fs');
+
+const examplesPath = path.resolve(__dirname, '../../../examples');
+const packageFolder = path.resolve(__dirname);
+
+class PackageJsonCustomizer {
+  constructor() {
+    this.dependenciesPackageJson = this.readJson(path.join(examplesPath, '/shared/package.json'));
+    this.scriptsPackageJson = this.readJson(path.join(examplesPath, '/shared/boilerplate/systemjs/package.json'));
+    this.basePackageJson = this.readJson(`${packageFolder}/base.json`);
+    this.templatePackageJson = this.readJson(`${packageFolder}/package.json`, false);
+  }
+
+  generate(type = 'systemjs') {
+    let packageJson = JSON.parse(this.templatePackageJson);
+    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;
+  }
+
+  readJson(jsonFile, parse = true) {
+    const contents = fs.readFileSync(jsonFile, 'utf8');
+
+    return parse ? JSON.parse(contents) : contents;
+  }
+}
+
+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 000000000000..535bf0cc5273
--- /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/testing.json b/aio/tools/example-zipper/customizer/package-json/testing.json
new file mode 100644
index 000000000000..37c304b4cca2
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/testing.json
@@ -0,0 +1,20 @@
+{
+  "scripts": [
+    { "name": "ng", "command": "ng" },
+    { "name": "build", "command": "ng build" },
+    { "name": "start", "command": "ng serve" },
+    { "name": "test", "command": "ng test" },
+    { "name": "lint", "command": "ng lint" },
+    { "name": "e2e", "command": "ng e2e" }
+  ],
+  "dependencies": [],
+  "devDependencies": [
+    "@angular-devkit/build-angular",
+    "@angular/cli",
+    "@types/jasminewd2",
+    "jasmine-marbles",
+    "jasmine-spec-reporter",
+    "karma-coverage-istanbul-reporter",
+    "ts-node"
+  ]
+}
diff --git a/aio/tools/example-zipper/customizer/package-json/universal.json b/aio/tools/example-zipper/customizer/package-json/universal.json
new file mode 100644
index 000000000000..c3f649d52949
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/universal.json
@@ -0,0 +1,27 @@
+{
+  "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" },
+    { "name": "build:ssr", "command": "npm run build:client-and-server-bundles && npm run webpack:server" },
+    { "name": "serve:ssr", "command": "node dist/server.js" },
+    { "name": "build:client-and-server-bundles", "command": "ng build --prod && ng run angular.io-example:server" },
+    { "name": "webpack:server", "command": "webpack --config webpack.server.config.js --progress --colors" }
+  ],
+  "dependencies": [
+    "@nguniversal/express-engine",
+    "@nguniversal/module-map-ngfactory-loader"
+  ],
+  "devDependencies": [
+    "@angular-devkit/build-angular",
+    "@angular/cli",
+    "@types/jasminewd2",
+    "jasmine-spec-reporter",
+    "karma-coverage-istanbul-reporter",
+    "ts-loader",
+    "ts-node",
+    "webpack-cli"
+  ]
+}
diff --git a/aio/tools/example-zipper/exampleZipper.js b/aio/tools/example-zipper/exampleZipper.js
new file mode 100644
index 000000000000..3afce755d7e1
--- /dev/null
+++ b/aio/tools/example-zipper/exampleZipper.js
@@ -0,0 +1,186 @@
+'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');
+
+const EXAMPLE_CONFIG_NAME = 'example-config.json';
+
+class ExampleZipper {
+  constructor(sourceDirName, outputDirName) {
+    this.examplesPackageJson = path.join(__dirname, '../examples/shared/package.json');
+    this.examplesSystemjsConfig = path.join(__dirname, '../examples/shared/boilerplate/systemjs/src/systemjs.config.js');
+    this.examplesSystemjsLoaderConfig = path.join(__dirname, '../examples/shared/boilerplate/systemjs/src/systemjs-angular-loader.js');
+    this.exampleTsconfig = path.join(__dirname, '../examples/shared/boilerplate/systemjs/src/tsconfig.json');
+    this.customizer = new PackageJsonCustomizer();
+
+    let gpathStackblitz = path.join(sourceDirName, '**/*stackblitz.json');
+    let gpathZipper = path.join(sourceDirName, '**/zipper.json');
+    let configFileNames = globby.sync([gpathStackblitz, 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;
+  }
+
+  _getExampleType(sourceFolder) {
+    const filePath = path.join(sourceFolder, EXAMPLE_CONFIG_NAME);
+    try {
+      return require(filePath, 'utf-8').projectType || 'cli';
+    } catch (err) { // empty file, so it is cli
+      return 'cli';
+    }
+  }
+
+  // rename a custom main.ts or index.html file
+  _renameFile(file, exampleType) {
+    if (/src\/main[-.]\w+\.ts$/.test(file) && exampleType !== 'universal') {
+      return 'src/main.ts';
+    }
+
+    if (/src\/index[-.]\w+\.html$/.test(file)) {
+      return 'src/index.html';
+    }
+
+    return file;
+  }
+
+  _zipExample(configFileName, sourceDirName, outputDirName) {
+    let json = require(configFileName, 'utf-8');
+    const basePath = json.basePath || '';
+    const jsonFileName = configFileName.replace(/^.*[\\\/]/, '');
+    let relativeDirName = path.dirname(path.relative(sourceDirName, configFileName));
+    let exampleZipName;
+    const exampleType = this._getExampleType(path.join(sourceDirName, relativeDirName));
+    if (relativeDirName.indexOf('/') !== -1) { // Special example
+      exampleZipName = relativeDirName.split('/').join('-');
+    } else {
+      exampleZipName = jsonFileName.replace(/(stackblitz|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',
+      'e2e/protractor.conf.js',
+      'angular.json',
+      '.editorconfig',
+      '.gitignore',
+      'tslint.json',
+      'karma-test-shim.js',
+      'tsconfig.json',
+      'src/testing/**/*',
+      'src/.babelrc',
+      'src/browserslist',
+      'src/favicon.ico',
+      'src/karma.conf.js',
+      'src/polyfills.ts',
+      'src/test.ts',
+      'src/typings.d.ts',
+      'src/environments/**/*',
+      'src/tsconfig.*',
+      'src/tslint.*'
+    ];
+    var alwaysExcludes = [
+      '!**/bs-config.e2e.json',
+      '!**/*stackblitz.*',
+      '!**/*zipper.*',
+      '!**/systemjs.config.js',
+      '!**/npm-debug.log',
+      '!**/package.json',
+      '!**/example-config.json',
+      '!**/wallaby.js',
+      // 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, alwaysExcludes);
+
+    let fileNames = globby.sync(gpaths, { ignore: ['**/node_modules/**']});
+
+    let zip = this._createZipArchive(outputFileName);
+    fileNames.forEach((fileName) => {
+      let relativePath = path.relative(exampleDirName, fileName);
+      relativePath = this._renameFile(relativePath, exampleType);
+      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 (exampleType === 'systemjs') {
+      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 000000000000..30543861073f
--- /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/README.md b/aio/tools/examples/README.md
new file mode 100644
index 000000000000..ac85afeafbe4
--- /dev/null
+++ b/aio/tools/examples/README.md
@@ -0,0 +1,92 @@
+# Overview
+
+Many of the documentation pages contain snippets of code examples. Extract these snippets from
+real working example applications, which are stored in subfolders of the `/aio/content/examples`
+folder. Each example can be built and run independently. Each example also provides e2e specs, which
+are run as part of our Travis build tasks, to verify that the examples continue to work as expected,
+as changes are made to the core Angular libraries.
+
+In order to build, run and test these examples independently you need to install dependencies into
+their sub-folder. Also there are a number of common boilerplate files that are needed to configure
+each example's project. Maintain these common boilerplate files centrally to reduce the amount
+of effort if one of them needs to change.
+
+## Boilerplate overview
+
+As mentioned, many of the documentation pages contain snippets extracted from real example applications.
+To achieve that, all those applications needs to contain a basic boilerplate. E.g. a `node_modules`
+folder, `package.json` with scripts, etc.
+
+No one wants to maintain the boilerplate on each example, so the goal of this tool is to provide a
+set of boilerplates that works in all the examples.
+
+### Boilerplate files
+
+Inside `/aio/tools/examples/shared/boilerplate` you will find a set of folders representing each
+boilerplate.
+
+Currently you will find the next boilerplates:
+
+
+* CLI - For CLI based examples. This is the default one, to be used in the majority of the examples.
+* systemjs - Currently in deprecation, only used in a a few examples.
+* i18n - Based on the CLI one, features a few scripts for i18n.
+* universal - Based on the cli with a extra server for universal.
+
+There is also a `common` folder that contains files used in all different examples.
+
+### The example-config.json
+
+Each example is identified by an **example-config.json** configuration file in its root folder.
+This configuration file indicates what type of boilerplate this example needs. E.g.
+
+```json
+{ projectType: 'universal' }
+```
+
+If the file is empty then the default type of cli is assumed.
+When the boilerplate tooling runs, it will copy into the example folder all of the appropriate boilerplate files.
+
+### A node_modules to share
+
+With all the boilerplate files in place, the only missing piece are the installed packages. For
+that you have a `/aio/tools/examples/shared/package.json` which contains **all** the packages
+needed to run all the examples through all different boilerplates.
+
+After installing these dependencies, a `node_modules` will be created at
+`/aio/tools/examples/shared/node_modules`. This folder will be **symlinked** into each example.
+So it is not a copy like the other boilerplate files. This solution works in all OSes. Windows
+may require admin rights.
+
+### End to end tests
+
+End to end changes between boilerplates.
+
+For CLI applications, create a `app.e2e-spec.ts` inside the `e2e` folder. The tooling will run
+`ng e2e` for each CLI based examples.
+
+For SystemJS, each example contains an `e2e-spec.ts` file. You can find all the related configuration files
+in the `/aio/tools/examples/shared` folder.
+
+### example-boilerplate.js
+
+This script installs all the dependencies that are shared among all the examples, creates the
+`node_modules` symlinks and copy all the boilerplate files where needed. It won't do anything
+about stackblitz nor e2e tests.
+
+It also contains a function to remove all the boilerplate. It uses a `git clean -xdf` to do
+the job. It will remove all files that don't exist in the git repository, **including any
+new file that you are working on that hasn't been stage yet.** So be sure to save your work
+before removing the boilerplate.
+
+### run-example-e2e.js
+
+This script will find all the `e2e-spec.ts` files and run them.
+
+To not run all tests, you can use the `--filter=name` flag to run the example's e2e that contains
+that name.
+
+It also has an optional `--setup` flag to run the `example-boilerplate.js` script and install
+the latest `webdriver`.
+
+It will create a `/aio/protractor-results-txt` file when it finishes running tests.
diff --git a/aio/tools/examples/example-boilerplate.js b/aio/tools/examples/example-boilerplate.js
new file mode 100644
index 000000000000..773b37aea62d
--- /dev/null
+++ b/aio/tools/examples/example-boilerplate.js
@@ -0,0 +1,155 @@
+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 BOILERPLATE_COMMON_BASE_PATH = path.resolve(BOILERPLATE_BASE_PATH, 'common');
+const EXAMPLES_BASE_PATH = path.resolve(__dirname, '../../content/examples');
+
+const BOILERPLATE_PATHS = {
+  cli: [
+    'src/environments/environment.prod.ts',
+    'src/environments/environment.ts',
+    'src/assets/.gitkeep',
+    'src/browserslist',
+    'src/favicon.ico',
+    'src/karma.conf.js',
+    'src/polyfills.ts',
+    'src/test.ts',
+    'src/tsconfig.app.json',
+    'src/tsconfig.spec.json',
+    'src/tslint.json',
+    'e2e/src/app.po.ts',
+    'e2e/protractor.conf.js',
+    'e2e/tsconfig.e2e.json',
+    '.editorconfig',
+    'angular.json',
+    'package.json',
+    'tsconfig.json',
+    'tslint.json'
+  ],
+  systemjs: [
+    'src/systemjs-angular-loader.js',
+    'src/systemjs.config.js',
+    'src/tsconfig.json',
+    'bs-config.json',
+    'bs-config.e2e.json',
+    'package.json',
+    'tslint.json'
+  ],
+  common: [
+    'src/styles.css'
+  ]
+};
+
+// All paths in this tool are relative to the current boilerplate folder, i.e boilerplate/i18n
+// This maps the CLI files that exists in a parent folder
+const cliRelativePath = BOILERPLATE_PATHS.cli.map(file => `../cli/${file}`);
+
+BOILERPLATE_PATHS.elements = [
+  ...cliRelativePath,
+  'tsconfig.json'
+];
+
+BOILERPLATE_PATHS.i18n = [
+  ...cliRelativePath,
+  'angular.json',
+  'package.json'
+];
+
+BOILERPLATE_PATHS.testing = [
+  ...cliRelativePath,
+  'angular.json'
+];
+
+BOILERPLATE_PATHS.universal = [
+  ...cliRelativePath,
+  'angular.json',
+  'package.json'
+];
+
+const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
+
+class ExampleBoilerPlate {
+  /**
+   * Add boilerplate files to all the examples
+   */
+  add() {
+    // 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 => {
+      const exampleConfig = this.loadJsonFile(path.resolve(exampleFolder, EXAMPLE_CONFIG_FILENAME));
+
+      if (!fs.existsSync(SHARED_NODE_MODULES_PATH)) {
+        throw new Error(`The shared node_modules folder for the examples (${SHARED_NODE_MODULES_PATH}) is missing.\n` +
+        `Perhaps you need to run "yarn example-use-npm" or "yarn example-use-local" to install the dependencies?`);
+      }
+
+      // 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);
+
+      const boilerPlateType = exampleConfig.projectType || 'cli';
+      const boilerPlateBasePath = path.resolve(BOILERPLATE_BASE_PATH, boilerPlateType);
+
+      // Copy the boilerplate specific files
+      BOILERPLATE_PATHS[boilerPlateType].forEach(filePath => this.copyFile(boilerPlateBasePath, exampleFolder, filePath));
+
+      // Copy the boilerplate common files
+      BOILERPLATE_PATHS.common.forEach(filePath => this.copyFile(BOILERPLATE_COMMON_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', 'add the boilerplate to each example', () => this.add())
+      .command('remove', 'remove the boilerplate from each example', () => this.remove())
+      .demandCommand(1, 'Please supply a command from the list above')
+      .argv;
+  }
+
+  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);
+
+    // normalize path if needed
+    filePath = this.normalizePath(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}) || {};
+  }
+
+  normalizePath(filePath) {
+    // transform for example ../cli/src/tsconfig.app.json to src/tsconfig.app.json
+    return filePath.replace(/\.{2}\/\w+\//, '');
+  }
+}
+
+module.exports = new ExampleBoilerPlate();
+
+// If this file was run directly then run the main function,
+if (require.main === module) {
+  module.exports.main();
+}
diff --git a/aio/tools/examples/example-boilerplate.spec.js b/aio/tools/examples/example-boilerplate.spec.js
new file mode 100644
index 000000000000..91cfd6b04487
--- /dev/null
+++ b/aio/tools/examples/example-boilerplate.spec.js
@@ -0,0 +1,159 @@
+const path = require('canonical-path');
+const fs = require('fs-extra');
+const glob = require('glob');
+const shelljs = require('shelljs');
+
+const exampleBoilerPlate = require('./example-boilerplate');
+
+describe('example-boilerplate tool', () => {
+  describe('add', () => {
+    const sharedDir = path.resolve(__dirname, 'shared');
+    const sharedNodeModulesDir = path.resolve(sharedDir, 'node_modules');
+    const BPFiles = {
+      cli: 19,
+      i18n: 2,
+      universal: 2,
+      systemjs: 7,
+      common: 1
+    };
+    const exampleFolders = ['a/b', 'c/d'];
+
+    beforeEach(() => {
+      spyOn(fs, 'ensureSymlinkSync');
+      spyOn(fs, 'existsSync').and.returnValue(true);
+      spyOn(exampleBoilerPlate, 'copyFile');
+      spyOn(exampleBoilerPlate, 'getFoldersContaining').and.returnValue(exampleFolders);
+      spyOn(exampleBoilerPlate, 'loadJsonFile').and.returnValue({});
+    });
+
+    it('should process all the example folders', () => {
+      const examplesDir = path.resolve(__dirname, '../../content/examples');
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.getFoldersContaining)
+          .toHaveBeenCalledWith(examplesDir, 'example-config.json', 'node_modules');
+    });
+
+    it('should symlink the node_modules', () => {
+      exampleBoilerPlate.add();
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledTimes(exampleFolders.length);
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(sharedNodeModulesDir, path.resolve('a/b/node_modules'));
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(sharedNodeModulesDir, path.resolve('c/d/node_modules'));
+    });
+
+    it('should error if the node_modules folder is missing', () => {
+      fs.existsSync.and.returnValue(false);
+      expect(() => exampleBoilerPlate.add()).toThrowError(
+        `The shared node_modules folder for the examples (${sharedNodeModulesDir}) is missing.\n` +
+        `Perhaps you need to run "yarn example-use-npm" or "yarn example-use-local" to install the dependencies?`);
+      expect(fs.ensureSymlinkSync).not.toHaveBeenCalled();
+    });
+
+    it('should copy all the source boilerplate files for systemjs', () => {
+      const boilerplateDir = path.resolve(sharedDir, 'boilerplate');
+      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { projectType: 'systemjs' } : {})
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
+        (BPFiles.cli) +
+        (BPFiles.systemjs) +
+        (BPFiles.common * exampleFolders.length)
+      );
+      // for example
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/systemjs`, 'a/b', 'package.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/common`, 'a/b', 'src/styles.css');
+    });
+
+    it('should copy all the source boilerplate files for cli', () => {
+      const boilerplateDir = path.resolve(sharedDir, 'boilerplate');
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
+        (BPFiles.cli * exampleFolders.length) +
+        (BPFiles.common * exampleFolders.length)
+      );
+      // for example
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/cli`, 'a/b', 'package.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/common`, 'c/d', 'src/styles.css');
+    });
+
+    it('should copy all the source boilerplate files for i18n', () => {
+      const boilerplateDir = path.resolve(sharedDir, 'boilerplate');
+      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { projectType: 'i18n' } : {})
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
+        (BPFiles.cli + BPFiles.i18n) +
+        (BPFiles.cli) +
+        (BPFiles.common * exampleFolders.length)
+      );
+      // for example
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/i18n`, 'a/b', '../cli/angular.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/i18n`, 'a/b', 'package.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/common`, 'c/d', 'src/styles.css');
+    });
+
+    it('should copy all the source boilerplate files for universal', () => {
+      const boilerplateDir = path.resolve(sharedDir, 'boilerplate');
+      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { projectType: 'universal' } : {})
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
+        (BPFiles.cli + BPFiles.universal) +
+        (BPFiles.cli) +
+        (BPFiles.common * exampleFolders.length)
+      );
+      // for example
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/universal`, 'a/b', '../cli/tslint.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/universal`, 'a/b', 'angular.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/common`, 'c/d', 'src/styles.css');
+    });
+
+    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'));
+    });
+  });
+
+  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('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 000000000000..43c56b134aac
--- /dev/null
+++ b/aio/tools/examples/run-example-e2e.js
@@ -0,0 +1,334 @@
+const path = require('canonical-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 shelljs = require('shelljs');
+
+shelljs.set('-e');
+
+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 SJS_SPEC_FILENAME = 'e2e-spec.ts';
+const CLI_SPEC_FILENAME = 'e2e/src/app.e2e-spec.ts';
+const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
+const IGNORED_EXAMPLES = [ // temporary ignores
+  'quickstart',
+  'setup',
+];
+
+/**
+ * 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() {
+  if (argv.setup) {
+    // Run setup.
+    console.log('runE2e: setup boilerplate');
+    const installPackagesCommand = `example-use-${argv.local ? 'local' : 'npm'}`;
+    const addBoilerplateCommand = 'boilerplate:add';
+    shelljs.exec(`yarn ${installPackagesCommand}`, { cwd: AIO_PATH });
+    shelljs.exec(`yarn ${addBoilerplateCommand}`, { cwd: AIO_PATH });
+  }
+
+  const outputFile = path.join(AIO_PATH, './protractor-results.txt');
+
+  return Promise.resolve()
+    .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 getE2eSpecs(EXAMPLES_PATH, filter)
+    .then(e2eSpecPaths => {
+      console.log('All e2e specs:');
+      logSpecs(e2eSpecPaths);
+
+      Object.keys(e2eSpecPaths).forEach(key => {
+        const value = e2eSpecPaths[key];
+        e2eSpecPaths[key] = value.filter((p, index) => index % shardDivider === shardModulo);
+      });
+
+      console.log(`E2e specs for shard ${shardParts.join('/')}:`);
+      logSpecs(e2eSpecPaths);
+
+      return e2eSpecPaths.systemjs.reduce((promise, specPath) => {
+        return promise.then(() => {
+          const examplePath = path.dirname(specPath);
+          return runE2eTestsSystemJS(examplePath, outputFile).then(ok => {
+            const arr = ok ? status.passed : status.failed;
+            arr.push(examplePath);
+          });
+        });
+      }, Promise.resolve())
+      .then(() => {
+        return e2eSpecPaths.cli.reduce((promise, specPath) => {
+          return promise.then(() => {
+            return runE2eTestsCLI(specPath, outputFile).then(ok => {
+              const arr = ok ? status.passed : status.failed;
+              arr.push(specPath);
+            });
+          });
+        }, Promise.resolve());
+      });
+    })
+    .then(() => {
+      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.
+// SystemJS version
+function runE2eTestsSystemJS(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 = runProtractorSystemJS(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
+
+  if (fs.existsSync(appDir + '/aot/index.html')) {
+    run = run.then((ok) => ok && runProtractorAoT(appDir, outputFile));
+  }
+  return run;
+}
+
+function runProtractorSystemJS(prepPromise, appDir, appRunSpawnInfo, outputFile) {
+  const specFilename = path.resolve(`${appDir}/${SJS_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 () {
+      let transpileError = false;
+
+      // Start protractor.
+      console.log(`\n\n=========== Running aio example tests for: ${appDir}`);
+      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 () {
+        if (transpileError) {
+          const emsg = `${specFilename} failed to transpile.\n\n`;
+          console.log(emsg);
+          fs.appendFileSync(outputFile, emsg);
+        }
+        return Promise.reject();
+      });
+    })
+    .then(
+    function () { return finish(appRunSpawnInfo.proc.pid, true); },
+    function () { return finish(appRunSpawnInfo.proc.pid, false); }
+    );
+}
+
+function finish(spawnProcId, ok) {
+  // Ugh... proc.kill does not work properly on windows with child processes.
+  // appRun.proc.kill();
+  treeKill(spawnProcId);
+  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 runProtractorSystemJS(promise, appDir, aotRunSpawnInfo, outputFile);
+}
+
+// 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.
+// CLI version
+function runE2eTestsCLI(appDir, outputFile) {
+  console.log(`\n\n=========== Running aio example tests for: ${appDir}`);
+  // `--preserve-symlinks` is needed due the symlinked `node_modules/` in each example.
+  // `--no-webdriver-update` is needed to preserve the ChromeDriver version already installed.
+  const args = ['e2e', '--no-webdriver-update'];
+  const e2eSpawn = spawnExt('yarn', args, { cwd: appDir });
+  return e2eSpawn.promise.then(
+    function () {
+      fs.appendFileSync(outputFile, `Passed: ${appDir}\n\n`);
+      return finish(e2eSpawn.proc.pid, true);
+    },
+    function () {
+      fs.appendFileSync(outputFile, `Failed: ${appDir}\n\n`);
+      return finish(e2eSpawn.proc.pid, false);
+    }
+  );
+}
+
+// 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 };
+}
+
+function getE2eSpecs(basePath, filter) {
+  let specs = {};
+
+  return getE2eSpecsFor(basePath, SJS_SPEC_FILENAME, filter).then(sjsPaths => {
+    specs.systemjs = sjsPaths;
+  }).then(() => {
+    return getE2eSpecsFor(basePath, CLI_SPEC_FILENAME, filter).then(cliPaths => {
+      return cliPaths.map(p => {
+        return p.replace(`${CLI_SPEC_FILENAME}`, '');
+      });
+    });
+  }).then(cliPaths => {
+    specs.cli = cliPaths;
+  }).then(() => specs);
+}
+
+// Find all e2e specs in a given example folder.
+function getE2eSpecsFor(basePath, specFile, filter) {
+  // Only get spec file at the example root.
+  const e2eSpecGlob = `${filter ? `*${filter}*` : '*'}/${specFile}`;
+  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. Used for SystemJS
+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;
+}
+
+// Log the specs (for debugging purposes).
+// `e2eSpecPaths` is of type: `{[type: string]: string[]}`
+// (where `type` is `systemjs`, `cli, etc.)
+function logSpecs(e2eSpecPaths) {
+  Object.keys(e2eSpecPaths).forEach(type => {
+    const paths = e2eSpecPaths[type];
+
+    console.log(`  ${type.toUpperCase()}:`);
+    console.log(paths.map(p => `    ${p}`).join('\n'));
+  });
+}
+
+runE2e();
diff --git a/aio/tools/examples/shared/boilerplate/UPDATING_CLI.md b/aio/tools/examples/shared/boilerplate/UPDATING_CLI.md
new file mode 100644
index 000000000000..8092025c3033
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/UPDATING_CLI.md
@@ -0,0 +1,56 @@
+# How to update the CLI boilerplate
+
+The boilerplate is updated by hand so you normally update it every minor version unless there is a major bug to fix.
+
+## Getting a new boilerplate
+
+The first thing would be updating the CLI globally
+
+```
+npm i -g @angular/cli
+```
+
+Then create a new dummy project in a temporary folder outside angular
+
+```
+ng new dummy
+```
+
+Now you have a fresh application to get our new boilerplate files.
+
+## Updating files
+
+From `dummy` you can replace the following files into `aio/tools/examples/shared/boilerplate/cli`:
+
+* .editorconfig
+* angular.json
+* package.json
+* tsconfig.json
+* tslint.json
+* e2e/src/app.po.ts
+* e2e/protractor.conf.js
+* e2e/tsconfig.e2e.json
+* src/environments/environment.prod.ts
+* src/environments/environment.ts
+* src/browserslist
+* src/favicon.ico
+* src/karma.conf.js
+* src/polyfills.js
+* src/styles.css
+* src/test.ts
+* src/tsconfig.app.json
+* src/tsconfig.spec.json
+* src/tslint.json
+* src/typings.d.ts
+
+### angular.json
+
+Update the `project > name` to `angular.io-example`.
+
+### package.json
+
+Update the `name` to `angular.io-example`.
+
+### src/tsconfig.app.json
+
+This file is small enough and there are a few new excludes, update by hand.
diff --git a/aio/tools/examples/shared/boilerplate/cli/.editorconfig b/aio/tools/examples/shared/boilerplate/cli/.editorconfig
new file mode 100644
index 000000000000..6e87a003da89
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/aio/tools/examples/shared/boilerplate/cli/.gitignore b/aio/tools/examples/shared/boilerplate/cli/.gitignore
new file mode 100644
index 000000000000..6b66814308dc
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/.gitignore
@@ -0,0 +1,43 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# 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
+yarn-error.log
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/aio/tools/examples/shared/boilerplate/cli/angular.json b/aio/tools/examples/shared/boilerplate/cli/angular.json
new file mode 100644
index 000000000000..5d17ddcf306a
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/angular.json
@@ -0,0 +1,139 @@
+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular.io-example": {
+      "root": "",
+      "projectType": "application",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ],
+            "styles": [
+              {
+                "input": "src/styles.css"
+              }
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular.io-example:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              {
+                "input": "styles.css"
+              }
+            ],
+            "scripts": [],
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src/",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "angular.io-example-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angular.io-example:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js b/aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js
new file mode 100644
index 000000000000..bff549e914aa
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js
@@ -0,0 +1,33 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome',
+    // For Travis CI only
+    chromeOptions: {
+      binary: process.env.CHROME_BIN,
+      args: ['--no-sandbox']
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
\ No newline at end of file
diff --git a/aio/tools/examples/shared/boilerplate/cli/e2e/src/app.po.ts b/aio/tools/examples/shared/boilerplate/cli/e2e/src/app.po.ts
new file mode 100644
index 000000000000..82ea75ba504a
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/e2e/src/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.e2e.json b/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.e2e.json
new file mode 100644
index 000000000000..1d9e5edf0965
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.e2e.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/cli/package.json b/aio/tools/examples/shared/boilerplate/cli/package.json
new file mode 100644
index 000000000000..1ef3da3ca382
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "angular.io-example",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^6.0.0",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@angular/forms": "^6.0.0",
+    "@angular/http": "^6.0.0",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0",
+    "@angular/router": "^6.0.0",
+    "angular-in-memory-web-api": "^0.6.0",
+    "core-js": "^2.5.4",
+    "rxjs": "^6.0.0",
+    "web-animations-js": "^2.3.1",
+    "zone.js": "^0.8.24"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^6.0.0",
+    "@angular-devkit/build-angular": "~0.6.0",
+    "typescript": "~2.7.2",
+    "@angular/cli": "^6.0.0",
+    "@angular/language-service": "^6.0.0",
+    "@types/jasmine": "~2.8.6",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "codelyzer": "~4.2.1",
+    "jasmine-core": "~2.99.1",
+    "jasmine-marbles": "^0.3.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~1.4.2",
+    "karma-jasmine": "~1.1.1",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.3.0",
+    "ts-node": "~5.0.1",
+    "tslint": "~5.9.1"
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/assets/.gitkeep b/aio/tools/examples/shared/boilerplate/cli/src/assets/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/browserslist b/aio/tools/examples/shared/boilerplate/cli/src/browserslist
new file mode 100644
index 000000000000..1b1be9044162
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/browserslist
@@ -0,0 +1,5 @@
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+IE 9-11
\ No newline at end of file
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/environments/environment.prod.ts b/aio/tools/examples/shared/boilerplate/cli/src/environments/environment.prod.ts
new file mode 100644
index 000000000000..3612073bc31c
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/environments/environment.ts b/aio/tools/examples/shared/boilerplate/cli/src/environments/environment.ts
new file mode 100644
index 000000000000..bed42878cdac
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/environments/environment.ts
@@ -0,0 +1,15 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * In development mode, to ignore zone related error stack frames such as
+ * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
+ * import the following file, but please comment it out in production mode
+ * because it will have performance impact when throw error
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/favicon.ico b/aio/tools/examples/shared/boilerplate/cli/src/favicon.ico
new file mode 100644
index 000000000000..8081c7ceaf2b
Binary files /dev/null and b/aio/tools/examples/shared/boilerplate/cli/src/favicon.ico differ
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/karma.conf.js b/aio/tools/examples/shared/boilerplate/cli/src/karma.conf.js
new file mode 100644
index 000000000000..15b5b0d5f762
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/karma.conf.js
@@ -0,0 +1,34 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
\ No newline at end of file
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/polyfills.ts b/aio/tools/examples/shared/boilerplate/cli/src/polyfills.ts
new file mode 100644
index 000000000000..e16a72f6c917
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/polyfills.ts
@@ -0,0 +1,79 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * 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/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 for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/styles.css b/aio/tools/examples/shared/boilerplate/cli/src/styles.css
new file mode 100644
index 000000000000..90d4ee0072ce
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/test.ts b/aio/tools/examples/shared/boilerplate/cli/src/test.ts
new file mode 100644
index 000000000000..16317897b1c5
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.app.json b/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.app.json
new file mode 100644
index 000000000000..009e50f002ce
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts",
+    "**/testing/*"
+  ]
+}
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.spec.json b/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.spec.json
new file mode 100644
index 000000000000..18bad40ed42a
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.spec.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/tslint.json b/aio/tools/examples/shared/boilerplate/cli/src/tslint.json
new file mode 100644
index 000000000000..52e2c1a5a74c
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/tslint.json
@@ -0,0 +1,17 @@
+{
+    "extends": "../tslint.json",
+    "rules": {
+        "directive-selector": [
+            true,
+            "attribute",
+            "app",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "app",
+            "kebab-case"
+        ]
+    }
+}
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/typings.d.ts b/aio/tools/examples/shared/boilerplate/cli/src/typings.d.ts
new file mode 100644
index 000000000000..ef5c7bd62057
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
diff --git a/aio/tools/examples/shared/boilerplate/cli/tsconfig.json b/aio/tools/examples/shared/boilerplate/cli/tsconfig.json
new file mode 100644
index 000000000000..403c230e1981
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "skipLibCheck": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/cli/tslint.json b/aio/tools/examples/shared/boilerplate/cli/tslint.json
new file mode 100644
index 000000000000..a2e30eff294a
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/tslint.json
@@ -0,0 +1,144 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs",
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": 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"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "typeof-compare": true,
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "no-output-on-prefix": true,
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/common/src/styles.css b/aio/tools/examples/shared/boilerplate/common/src/styles.css
new file mode 100644
index 000000000000..a0496ae272ee
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/common/src/styles.css
@@ -0,0 +1,65 @@
+/* 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;
+}
+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;
+}
+
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/aio/tools/examples/shared/boilerplate/elements/tsconfig.json b/aio/tools/examples/shared/boilerplate/elements/tsconfig.json
new file mode 100644
index 000000000000..1a4f29fa894b
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/elements/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es2015",  // Custom Elements require ES2015 classes (or polyfill).
+    "skipLibCheck": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/i18n/angular.json b/aio/tools/examples/shared/boilerplate/i18n/angular.json
new file mode 100644
index 000000000000..d8bc38f37488
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/i18n/angular.json
@@ -0,0 +1,172 @@
+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular.io-example": {
+      "root": "",
+      "projectType": "application",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ],
+            "styles": [
+              {
+                "input": "src/styles.css"
+              }
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            },
+            "production-fr": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "outputPath": "dist/my-project-fr/",
+              "i18nFile": "src/locale/messages.fr.xlf",
+              "i18nFormat": "xlf",
+              "i18nLocale": "fr",
+              "i18nMissingTranslation": "error"
+            },
+            "fr": {
+              "aot": true,
+              "outputPath": "dist/my-project-fr/",
+              "i18nFile": "src/locale/messages.fr.xlf",
+              "i18nFormat": "xlf",
+              "i18nLocale": "fr",
+              "i18nMissingTranslation": "error"
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular.io-example:build:production"
+            },
+            "fr": {
+              "browserTarget": "angular.io-example:build:fr"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              {
+                "input": "styles.css"
+              }
+            ],
+            "scripts": [],
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src/",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "angular.io-example-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angular.io-example:serve:fr"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/aio/tools/examples/shared/boilerplate/i18n/package.json b/aio/tools/examples/shared/boilerplate/i18n/package.json
new file mode 100644
index 000000000000..82de963571e3
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/i18n/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "angular.io-example",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "start:fr": "ng serve --configuration=fr",
+    "build": "ng build --prod",
+    "build:fr": "ng build --configuration=production-fr",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "extract": "ng xi18n --output-path=locale"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^6.0.0",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@angular/forms": "^6.0.0",
+    "@angular/http": "^6.0.0",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0",
+    "@angular/router": "^6.0.0",
+    "core-js": "^2.5.4",
+    "rxjs": "^6.0.0",
+    "zone.js": "^0.8.24"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^6.0.0",
+    "@angular-devkit/build-angular": "~0.6.0",
+    "@angular/cli": "^6.0.0",
+    "@angular/language-service": "^6.0.0",
+    "@angular/platform-server": "^6.0.0",
+    "@types/jasmine": "~2.8.6",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "codelyzer": "~4.2.1",
+    "jasmine-core": "~2.99.1",
+    "jasmine-marbles": "^0.3.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~1.4.2",
+    "karma-jasmine": "~1.1.1",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.3.0",
+    "ts-node": "~5.0.1",
+    "tslint": "~5.9.1",
+    "typescript": "~2.7.2"
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/systemjs/bs-config.e2e.json b/aio/tools/examples/shared/boilerplate/systemjs/bs-config.e2e.json
new file mode 100644
index 000000000000..24570dbcc969
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/systemjs/bs-config.e2e.json
@@ -0,0 +1,14 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/systemjs/bs-config.json b/aio/tools/examples/shared/boilerplate/systemjs/bs-config.json
new file mode 100644
index 000000000000..4e585952675d
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/systemjs/bs-config.json
@@ -0,0 +1,8 @@
+{
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    }
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/systemjs/package.json b/aio/tools/examples/shared/boilerplate/systemjs/package.json
new file mode 100644
index 000000000000..d9747ad511b8
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/systemjs/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "angular-examples",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Example package.json, only contains needed scripts for examples. See _examples/package.json for master package.json.",
+  "scripts": {
+    "build": "tsc -p src/",
+    "build:watch": "tsc -p src/ -w",
+    "build:e2e": "tsc -p e2e/",
+    "serve": "lite-server -c=bs-config.json",
+    "serve:e2e": "lite-server -c=bs-config.e2e.json",
+    "prestart": "npm run build",
+    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
+    "pree2e": "webdriver-manager update && npm run build:e2e",
+    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
+    "protractor": "protractor protractor.config.js",
+    "pretest": "npm run build",
+    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
+    "pretest:once": "npm run build",
+    "test:once": "karma start karma.conf.js --single-run",
+    "lint": "tslint ./src/**/*.ts -t verbose",
+
+    "build:upgrade": "tsc",
+    "serve:upgrade": "http-server",
+    "build:cli": "ng build --no-progress",
+    "serve:cli": "http-server dist/",
+    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "serve:aot": "lite-server -c bs-config.aot.json",
+    "build:babel": "babel src -d src --extensions \".es6\" --source-maps",
+
+    "clean": "rimraf src/dist && rimraf src/app/*.js* && rimraf src/universal/*.js* && rimraf src/main.js*",
+    "copy-dist-files": "node ./copy-dist-files.js",
+    "i18n": "ng-xi18n"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {
+    "@angular/cli": "^1.2.0"
+  },
+  "repository": {}
+}
diff --git a/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs-angular-loader.js b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs-angular-loader.js
new file mode 100644
index 000000000000..8b1005444e88
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs-angular-loader.js
@@ -0,0 +1,49 @@
+var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
+var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
+var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
+
+module.exports.translate = function(load){
+  if (load.source.indexOf('moduleId') != -1) return load;
+
+  var url = document.createElement('a');
+  url.href = load.address;
+
+  var basePathParts = url.pathname.split('/');
+
+  basePathParts.pop();
+  var basePath = basePathParts.join('/');
+
+  var baseHref = document.createElement('a');
+  baseHref.href = this.baseURL;
+  baseHref = baseHref.pathname;
+
+  if (!baseHref.startsWith('/base/')) { // it is not karma
+    basePath = basePath.replace(baseHref, '');
+  }
+
+  load.source = load.source
+    .replace(templateUrlRegex, function(match, quote, url){
+      var resolvedUrl = url;
+
+      if (url.startsWith('.')) {
+        resolvedUrl = basePath + url.substr(1);
+      }
+
+      return 'templateUrl: "' + resolvedUrl + '"';
+    })
+    .replace(stylesRegex, function(match, relativeUrls) {
+      var urls = [];
+
+      while ((match = stringRegex.exec(relativeUrls)) !== null) {
+        if (match[2].startsWith('.')) {
+          urls.push('"' + basePath + match[2].substr(1) + '"');
+        } else {
+          urls.push('"' + match[2] + '"');
+        }
+      }
+
+      return "styleUrls: [" + urls.join(', ') + "]";
+    });
+
+  return load;
+};
diff --git a/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.js b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.js
new file mode 100644
index 000000000000..43ccdcdfa985
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.js
@@ -0,0 +1,56 @@
+/**
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    paths: {
+      // paths serve as alias
+      'npm:': 'node_modules/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      'app': 'app',
+
+      // angular bundles
+      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
+      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/common/http': 'npm:@angular/common/bundles/common-http.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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.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',
+      'tslib':                     'npm:tslib/tslib.js',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.js',
+        defaultExtension: 'js',
+        meta: {
+          './*.js': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
+      },
+      'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs': { main: 'index.js', defaultExtension: 'js' },
+    }
+  });
+})(this);
diff --git a/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.build.js b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.build.js
new file mode 100644
index 000000000000..e1fbdf49b316
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.build.js
@@ -0,0 +1,102 @@
+/**
+ * WEB VERSION FOR CURRENT ANGULAR BUILD
+ * (based on systemjs.config.js in angular.io)
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ *
+ * UNTESTED !
+ */
+(function (global) {
+  System.config({
+    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
+    transpiler: 'ts',
+    typescriptOptions: {
+      // Copy of compiler options in standard tsconfig.json
+      "target": "es5",
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "sourceMap": true,
+      "emitDecoratorMetadata": true,
+      "experimentalDecorators": true,
+      "lib": ["es2015", "dom"],
+      "noImplicitAny": true,
+      "suppressImplicitAnyIndexErrors": true
+    },
+    meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+      // paths serve as alias
+      'npm:': 'https://unpkg.com/',
+      'ng:': 'https://cdn.rawgit.com/angular/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      'app': 'app',
+
+      // angular bundles
+      '@angular/animations': 'ng:animations-builds/master/bundles/animations.umd.js',
+      '@angular/animations/browser': 'ng:animations-builds/master/bundles/animations-browser.umd.js',
+      '@angular/core': 'ng:core-builds/master/bundles/core.umd.js',
+      '@angular/common': 'ng:common-builds/master/bundles/common.umd.js',
+      '@angular/common/http': 'ng:common-builds/master/bundles/common-http.umd.js',
+      '@angular/compiler': 'ng:compiler-builds/master/bundles/compiler.umd.js',
+      '@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js',
+      '@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js',
+      '@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js',
+      '@angular/http': 'ng:http-builds/master/bundles/http.umd.js',
+      '@angular/router': 'ng:router-builds/master/bundles/router.umd.js',
+      '@angular/router/upgrade': 'ng:router-builds/master/bundles/router-upgrade.umd.js',
+      '@angular/forms': 'ng:forms-builds/master/bundles/forms.umd.js',
+      '@angular/upgrade': 'ng:upgrade-builds/master/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'ng:upgrade-builds/master/bundles/upgrade-static.umd.js',
+
+      // angular testing umd bundles (overwrite the shim mappings)
+      '@angular/core/testing': 'ng:core-builds/master/bundles/core-testing.umd.js',
+      '@angular/common/testing': 'ng:common-builds/master/bundles/common-testing.umd.js',
+      '@angular/common/http/testing': 'ng:common-builds/master/bundles/common-http-testing.umd.js',
+      '@angular/compiler/testing': 'ng:compiler-builds/master/bundles/compiler-testing.umd.js',
+      '@angular/platform-browser/testing': 'ng:platform-browser-builds/master/bundles/platform-browser-testing.umd.js',
+      '@angular/platform-browser-dynamic/testing': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic-testing.umd.js',
+      '@angular/http/testing': 'ng:http-builds/master/bundles/http-testing.umd.js',
+      '@angular/router/testing': 'ng:router-builds/master/bundles/router-testing.umd.js',
+      '@angular/forms/testing': 'ng:forms-builds/master/bundles/forms-testing.umd.js',
+
+      // other libraries
+      'rxjs':                      'npm:rxjs@5.5.2',
+      'rxjs/operators':            'npm:rxjs@5.5.2/operators/index.js',
+      'tslib':                     'npm:tslib/tslib.js',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api@0.4/bundles/in-memory-web-api.umd.js',
+      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
+      'typescript':                'npm:typescript@2.4.2/lib/typescript.js',
+
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.ts',
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
+      },
+      'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs': { main: 'index.js', defaultExtension: 'js' },
+    }
+  });
+
+})(this);
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/
diff --git a/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.js b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.js
new file mode 100644
index 000000000000..f8169ffa1a5b
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.js
@@ -0,0 +1,88 @@
+/**
+ * WEB ANGULAR VERSION
+ * (based on systemjs.config.js in angular.io)
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
+    transpiler: 'ts',
+    typescriptOptions: {
+      // Copy of compiler options in standard tsconfig.json
+      "target": "es5",
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "sourceMap": true,
+      "emitDecoratorMetadata": true,
+      "experimentalDecorators": true,
+      "lib": ["es2015", "dom"],
+      "noImplicitAny": true,
+      "suppressImplicitAnyIndexErrors": true
+    },
+    meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+      // paths serve as alias
+      'npm:': 'https://unpkg.com/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      'app': 'app',
+
+      // angular bundles
+      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
+      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/common/http': 'npm:@angular/common/bundles/common-http.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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.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@5.5.2',
+      'rxjs/operators':            'npm:rxjs@5.5.2/operators/index.js',
+      'tslib':                     'npm:tslib/tslib.js',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api@0.4/bundles/in-memory-web-api.umd.js',
+      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
+      'typescript':                'npm:typescript@2.4.2/lib/typescript.js',
+
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.ts',
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
+      },
+      'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs': { main: 'index.js', defaultExtension: 'js' },
+    }
+  });
+
+})(this);
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/
diff --git a/aio/tools/examples/shared/boilerplate/systemjs/src/tsconfig.json b/aio/tools/examples/shared/boilerplate/systemjs/src/tsconfig.json
new file mode 100644
index 000000000000..e12e9a7fec36
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/systemjs/src/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "compileOnSave": true,
+  "exclude": [
+    "node_modules/*",
+    "**/*-aot.ts",
+    "universal/*"
+  ]
+}
diff --git a/aio/tools/examples/shared/boilerplate/systemjs/tslint.json b/aio/tools/examples/shared/boilerplate/systemjs/tslint.json
new file mode 100644
index 000000000000..276453f4f5b2
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/systemjs/tslint.json
@@ -0,0 +1,93 @@
+{
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-unused-variable": true,
+    "no-unreachable": 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"
+    ]
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/testing/angular.json b/aio/tools/examples/shared/boilerplate/testing/angular.json
new file mode 100644
index 000000000000..11ed94218d72
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/testing/angular.json
@@ -0,0 +1,142 @@
+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular.io-example": {
+      "root": "",
+      "projectType": "application",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ],
+            "styles": [
+              {
+                "input": "src/styles.css"
+              },
+              {
+                "input": "src/test.css"
+              }
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular.io-example:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              {
+                "input": "styles.css"
+              }
+            ],
+            "scripts": [],
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src/",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "angular.io-example-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angular.io-example:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/aio/tools/examples/shared/boilerplate/universal/angular.json b/aio/tools/examples/shared/boilerplate/universal/angular.json
new file mode 100644
index 000000000000..d0f9c2d5f4b9
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/universal/angular.json
@@ -0,0 +1,156 @@
+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular.io-example": {
+      "root": "",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/browser",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              },
+              {
+                "glob": "favicon.ico",
+                "input": "src",
+                "output": "/"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular.io-example:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              },
+              {
+                "glob": "favicon.ico",
+                "input": "src",
+                "output": "/"
+              }
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/server",
+            "main": "src/main.server.ts",
+            "tsConfig": "src/tsconfig.server.json"
+          }
+        }
+      }
+    },
+    "angular.io-example-e2e": {
+      "root": "",
+      "projectType": "application",
+      "cli": {},
+      "schematics": {},
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "angular.io-example:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "cli": {},
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
\ No newline at end of file
diff --git a/aio/tools/examples/shared/boilerplate/universal/package.json b/aio/tools/examples/shared/boilerplate/universal/package.json
new file mode 100644
index 000000000000..5039c4bfc3b3
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/universal/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "angular.io-example",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
+    "serve:ssr": "node dist/server.js",
+    "build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
+    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^6.0.0",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@angular/forms": "^6.0.0",
+    "@angular/http": "^6.0.0",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0",
+    "@angular/router": "^6.0.0",
+    "angular-in-memory-web-api": "^0.6.0",
+    "@nguniversal/common": "^6.0.0",
+    "@nguniversal/express-engine": "^6.0.0",
+    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
+    "core-js": "^2.5.4",
+    "rxjs": "^6.0.0",
+    "web-animations-js": "^2.3.1",
+    "zone.js": "^0.8.24"    
+  },
+  "devDependencies": {
+    "@angular/cli": "^6.0.0",
+    "@angular/compiler-cli": "^6.0.0",
+    "@angular/language-service": "^6.0.0",
+    "@angular/platform-server": "^6.0.0",
+    "@angular-devkit/build-angular": "~0.6.0",
+    "@types/jasmine": "~2.8.6",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "codelyzer": "~4.2.1",
+    "jasmine-core": "~2.99.1",
+    "jasmine-marbles": "^0.3.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~1.4.2",
+    "karma-jasmine": "~1.1.1",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.3.0",
+    "ts-loader": "^4.2.0",
+    "ts-node": "~5.0.1",
+    "tslint": "~5.9.1",
+    "typescript": "~2.7.2",
+    "webpack-cli": "^2.1.2"
+  }
+}
diff --git a/aio/tools/examples/shared/jsconfig.json b/aio/tools/examples/shared/jsconfig.json
new file mode 100644
index 000000000000..82750484d19b
--- /dev/null
+++ b/aio/tools/examples/shared/jsconfig.json
@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "target": "ES5",
+        "module": "commonjs"
+    }
+}
diff --git a/aio/tools/examples/shared/package.json b/aio/tools/examples/shared/package.json
new file mode 100644
index 000000000000..1d0bdbc1836e
--- /dev/null
+++ b/aio/tools/examples/shared/package.json
@@ -0,0 +1,88 @@
+{
+  "name": "angular-examples-master",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Master package.json, the superset of all dependencies for all of the _example package.json files. See _boilerplate/package.json for example npm scripts.",
+  "scripts": {
+    "http-server": "http-server",
+    "protractor": "protractor",
+    "webdriver:update": "webdriver-manager update --standalone false --gecko false $CHROMEDRIVER_VERSION_ARG",
+    "preinstall": "node ../../../../tools/yarn/check-yarn.js",
+    "postinstall": "yarn webdriver:update"
+  },
+  "engines": {
+    "node": ">=8.9.1 <9.0.0",
+    "yarn": ">=1.3.2 <2.0.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/animations": "^6.0.0",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@angular/elements": "^6.0.0",
+    "@angular/forms": "^6.0.0",
+    "@angular/http": "^6.0.0",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0",
+    "@angular/router": "^6.0.0",
+    "@angular/service-worker": "^6.0.0",
+    "@angular/upgrade": "^6.0.0",
+    "@nguniversal/express-engine": "^6.0.0",
+    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
+    "angular-in-memory-web-api": "^0.6.0",
+    "core-js": "^2.5.4",
+    "express": "^4.14.1",
+    "rxjs": "^6.0.0",
+    "systemjs": "0.19.39",
+    "web-animations-js": "^2.3.1",
+    "zone.js": "^0.8.24"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.6.0",
+    "@angular/cli": "^6.0.0",
+    "@angular/compiler-cli": "^6.0.0",
+    "@angular/language-service": "^6.0.0",
+    "@angular/platform-server": "^6.0.0",
+    "@types/angular": "^1.6.47",
+    "@types/angular-animate": "^1.5.10",
+    "@types/angular-mocks": "^1.6.0",
+    "@types/angular-resource": "^1.5.14",
+    "@types/angular-route": "^1.3.5",
+    "@types/express": "^4.0.35",
+    "@types/jasmine": "~2.8.0",
+    "@types/jasminewd2": "^2.0.3",
+    "@types/jquery": "^3.3.4",
+    "@types/node": "^6.0.45",
+    "canonical-path": "0.0.2",
+    "concurrently": "^3.0.0",
+    "http-server": "^0.9.0",
+    "jasmine-core": "~2.99.1",
+    "jasmine-marbles": "^0.3.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~1.7.1",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~1.4.2",
+    "karma-jasmine": "~1.1.1",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "lite-server": "^2.2.2",
+    "lodash": "^4.16.2",
+    "phantomjs-prebuilt": "^2.1.7",
+    "protractor": "~5.3.0",
+    "rimraf": "^2.5.4",
+    "rollup": "^0.41.6",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "2.0.0",
+    "rollup-plugin-uglify": "^1.0.1",
+    "source-map-explorer": "^1.3.2",
+    "ts-loader": "^4.2.0",
+    "ts-node": "^5.0.1",
+    "tslint": "^5.9.1",
+    "typescript": "2.7.2",
+    "webpack-cli": "^2.0.14"
+  },
+  "repository": {}
+}
diff --git a/aio/tools/examples/shared/protractor.config.js b/aio/tools/examples/shared/protractor.config.js
new file mode 100644
index 000000000000..11c8d6d5feb2
--- /dev/null
+++ b/aio/tools/examples/shared/protractor.config.js
@@ -0,0 +1,165 @@
+// FIRST TIME ONLY- run:
+//   ./node_modules/.bin/webdriver-manager update
+//
+//   Try: `npm run webdriver:update`
+//
+// AND THEN EVERY TIME ...
+//   1. Compile with `tsc`
+//   2. Make sure the test server (e.g., http-server: localhost:8080) is running.
+//   3. ./node_modules/.bin/protractor protractor.config.js
+//
+//   To do all steps, try:  `npm run e2e`
+
+var fs = require('fs');
+var path = require('canonical-path');
+var _ = require('lodash');
+
+
+exports.config = {
+  directConnect: true,
+
+  // Capabilities to be passed to the webdriver instance.
+  capabilities: {
+    'browserName': 'chrome',
+    // For Travis
+    chromeOptions: {
+      binary: process.env.CHROME_BIN,
+      args: ['--no-sandbox']
+    }
+  },
+
+  // Framework to use. Jasmine is recommended.
+  framework: 'jasmine',
+
+  // For angular tests
+  useAllAngular2AppRoots: true,
+
+  // Base URL for application server
+  baseUrl: 'http://localhost:8080',
+
+  // doesn't seem to work.
+  // resultJsonOutputFile: "foo.json",
+
+  onPrepare: function() {
+    //// SpecReporter
+    //var SpecReporter = require('jasmine-spec-reporter');
+    //jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'none'}));
+    //// jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'all'}));
+
+    // debugging
+    // console.log('browser.params:' + JSON.stringify(browser.params));
+
+    jasmine.getEnv().addReporter(new Reporter( browser.params ));
+  },
+
+  jasmineNodeOpts: {
+    // defaultTimeoutInterval: 60000,
+    defaultTimeoutInterval: 10000,
+    showTiming: true,
+    print: function() {}
+  },
+
+  beforeLaunch: function() {
+    // add TS support for specs
+    require('ts-node').register({
+      project: './tsconfig.json'
+    });
+  }
+};
+
+// See http://jasmine.github.io/2.1/custom_reporter.html
+function Reporter(options) {
+  var _defaultOutputFile = path.resolve(__dirname, '../../protractor-results.txt');
+  options.outputFile = options.outputFile || _defaultOutputFile;
+
+  var _root = { appDir: options.appDir, suites: [] };
+  log('AppDir: ' + options.appDir, +1);
+  var _currentSuite;
+
+  this.suiteStarted = function(suite) {
+    _currentSuite = { description: suite.description, status: null, specs: [] };
+    _root.suites.push(_currentSuite);
+    log('Suite: ' + suite.description, +1);
+  };
+
+  this.suiteDone = function(suite) {
+    var statuses = _currentSuite.specs.map(function(spec) {
+      return spec.status;
+    });
+    statuses = _.uniq(statuses);
+    var status = statuses.indexOf('failed') >= 0 ? 'failed' : statuses.join(', ');
+    _currentSuite.status = status;
+    log('Suite ' + _currentSuite.status + ': ' + suite.description, -1);
+  };
+
+  this.specStarted = function(spec) {
+
+  };
+
+  this.specDone = function(spec) {
+    var currentSpec = {
+      description: spec.description,
+      status: spec.status
+    };
+    if (spec.failedExpectations.length > 0) {
+      currentSpec.failedExpectations = spec.failedExpectations;
+    }
+
+    _currentSuite.specs.push(currentSpec);
+    log(spec.status + ' - ' + spec.description);
+    if (spec.status === 'failed') {
+      spec.failedExpectations.forEach(function(err) {
+        log(err.message);
+      });
+    }
+  };
+
+  this.jasmineDone = function() {
+    outputFile = options.outputFile;
+    //// Alternate approach - just stringify the _root - not as pretty
+    //// but might be more useful for automation.
+    // var output = JSON.stringify(_root, null, 2);
+    var output = formatOutput(_root);
+    fs.appendFileSync(outputFile, output);
+  };
+
+  // for output file output
+  function formatOutput(output) {
+    var indent = '  ';
+    var pad = '  ';
+    var results = [];
+    results.push('AppDir:' + output.appDir);
+    output.suites.forEach(function(suite) {
+      results.push(pad + 'Suite: ' + suite.description + ' -- ' + suite.status);
+      pad+=indent;
+      suite.specs.forEach(function(spec) {
+        results.push(pad + spec.status + ' - ' + spec.description);
+        if (spec.failedExpectations) {
+          pad+=indent;
+          spec.failedExpectations.forEach(function (fe) {
+            results.push(pad + 'message: ' + fe.message);
+          });
+          pad=pad.substr(2);
+        }
+      });
+      pad = pad.substr(2);
+      results.push('');
+    });
+    results.push('');
+    return results.join('\n');
+  }
+
+  // for console output
+  var _pad;
+  function log(str, indent) {
+    _pad = _pad || '';
+    if (indent == -1) {
+      _pad = _pad.substr(2);
+    }
+    console.log(_pad + str);
+    if (indent == 1) {
+      _pad = _pad + '  ';
+    }
+  }
+
+}
diff --git a/aio/tools/examples/shared/tsconfig.json b/aio/tools/examples/shared/tsconfig.json
new file mode 100644
index 000000000000..b564f9cb9f9b
--- /dev/null
+++ b/aio/tools/examples/shared/tsconfig.json
@@ -0,0 +1,21 @@
+// this tsconfig is used for protractor tests
+// see boilerplate/tsconfig.json for the tsconfig used in examples
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es2015", "dom"],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "include": [
+    "../../../content/examples/*/e2e-spec.ts"
+  ]
+}
diff --git a/aio/tools/examples/shared/yarn.lock b/aio/tools/examples/shared/yarn.lock
new file mode 100644
index 000000000000..96143da8103f
--- /dev/null
+++ b/aio/tools/examples/shared/yarn.lock
@@ -0,0 +1,9241 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular-devkit/architect@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.6.0.tgz#622a933337c946ef85d646545cc4244272ccb402"
+  dependencies:
+    "@angular-devkit/core" "0.6.0"
+    rxjs "^6.0.0"
+
+"@angular-devkit/build-angular@~0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-0.6.0.tgz#f5757f80fc402458e6b5eae1578bbc2a1af44ebe"
+  dependencies:
+    "@angular-devkit/architect" "0.6.0"
+    "@angular-devkit/build-optimizer" "0.6.0"
+    "@angular-devkit/core" "0.6.0"
+    "@ngtools/webpack" "6.0.0"
+    ajv "~6.4.0"
+    autoprefixer "^8.1.0"
+    cache-loader "^1.2.2"
+    chalk "~2.2.2"
+    circular-dependency-plugin "^5.0.2"
+    clean-css "^4.1.11"
+    copy-webpack-plugin "^4.5.1"
+    file-loader "^1.1.11"
+    glob "^7.0.3"
+    html-webpack-plugin "^3.0.6"
+    istanbul "^0.4.5"
+    istanbul-instrumenter-loader "^3.0.1"
+    karma-source-map-support "^1.2.0"
+    less "^3.0.2"
+    less-loader "^4.1.0"
+    license-webpack-plugin "^1.3.1"
+    lodash "^4.17.4"
+    memory-fs "^0.4.1"
+    mini-css-extract-plugin "~0.4.0"
+    minimatch "^3.0.4"
+    node-sass "^4.8.3"
+    opn "^5.1.0"
+    parse5 "^4.0.0"
+    portfinder "^1.0.13"
+    postcss "^6.0.19"
+    postcss-import "^11.1.0"
+    postcss-loader "^2.1.4"
+    postcss-url "^7.3.1"
+    raw-loader "^0.5.1"
+    resolve "^1.5.0"
+    rxjs "^6.0.0"
+    sass-loader "^7.0.1"
+    silent-error "^1.1.0"
+    source-map-support "^0.5.0"
+    stats-webpack-plugin "^0.6.2"
+    style-loader "^0.21.0"
+    stylus "^0.54.5"
+    stylus-loader "^3.0.2"
+    tree-kill "^1.2.0"
+    uglifyjs-webpack-plugin "^1.2.5"
+    url-loader "^1.0.1"
+    webpack "~4.6.0"
+    webpack-dev-middleware "^3.1.3"
+    webpack-dev-server "^3.1.4"
+    webpack-merge "^4.1.2"
+    webpack-sources "^1.1.0"
+    webpack-subresource-integrity "^1.1.0-rc.4"
+
+"@angular-devkit/build-optimizer@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.6.0.tgz#150a76155b473dea17327a176d18245a2da1c13e"
+  dependencies:
+    loader-utils "^1.1.0"
+    source-map "^0.5.6"
+    typescript "~2.7.2"
+    webpack-sources "^1.1.0"
+
+"@angular-devkit/core@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-0.6.0.tgz#d1a7275ff0f93de5cf007c4a549d1ebd00776fd0"
+  dependencies:
+    ajv "~6.4.0"
+    chokidar "^2.0.3"
+    rxjs "^6.0.0"
+    source-map "^0.5.6"
+
+"@angular-devkit/schematics@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-0.6.0.tgz#0117dc7d5905b053df4f2918e2e073efd1091f5c"
+  dependencies:
+    "@angular-devkit/core" "0.6.0"
+    rxjs "^6.0.0"
+
+"@angular/animations@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-6.0.0.tgz#cfc825dbfdf33bf3bf75962d1e12495aed5e3c32"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/cli@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-6.0.0.tgz#346b356775ddf8cdb8a9a5095b0663878eca3486"
+  dependencies:
+    "@angular-devkit/architect" "0.6.0"
+    "@angular-devkit/core" "0.6.0"
+    "@angular-devkit/schematics" "0.6.0"
+    "@schematics/angular" "0.6.0"
+    "@schematics/update" "0.6.0"
+    opn "~5.1.0"
+    resolve "^1.1.7"
+    rxjs "^6.0.0"
+    semver "^5.1.0"
+    silent-error "^1.0.0"
+    symbol-observable "^1.2.0"
+    yargs-parser "^10.0.0"
+
+"@angular/common@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-6.0.0.tgz#ca3b6b6b96837fe048861da897c31991aa04954f"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-6.0.0.tgz#be50277faaa5ac08f3002c2c8cb8c39d220c76d5"
+  dependencies:
+    chokidar "^1.4.2"
+    minimist "^1.2.0"
+    reflect-metadata "^0.1.2"
+    tsickle "^0.27.2"
+
+"@angular/compiler@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-6.0.0.tgz#9092a0f02f33dd1108276ab93cc48142e36a1e95"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-6.0.0.tgz#785cc8a37b7fb784a6b7dcbd0984abb4f10e5dfe"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/elements@^6.0.0":
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/@angular/elements/-/elements-6.0.9.tgz#6c238632631fa545f4893db8b48a4e89b2a277b2"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/forms@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-6.0.0.tgz#436e2df39dc57db124da5a5c02bc63909fdf7046"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/http@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/http/-/http-6.0.0.tgz#f409e35cd2f4990b43a37beab915ffdcd9c7c992"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/language-service@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-6.0.0.tgz#85bf577fd7f45eff13128d4f5f0125078d610aec"
+
+"@angular/platform-browser-dynamic@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.0.tgz#66a34b65136446cb3ec39362fd6d2dbb5482ba70"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-6.0.0.tgz#848b687ea46786483fddcdbbbd17b29c7adcc768"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-server@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-6.0.0.tgz#482878cc538a80caa3962e9376e4225b20c2a4bd"
+  dependencies:
+    domino "^2.0.1"
+    tslib "^1.9.0"
+    xhr2 "^0.1.4"
+
+"@angular/router@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-6.0.0.tgz#09a5c6f6220084c3575df81e8b36cbe9fff10d1f"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/service-worker@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/service-worker/-/service-worker-6.0.0.tgz#35a187554d33e05911544080fafc281ff1b322e0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/upgrade@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/upgrade/-/upgrade-6.0.0.tgz#932e39709b17a455018c3dfe63a5b8e794027f05"
+  dependencies:
+    tslib "^1.9.0"
+
+"@mrmlnc/readdir-enhanced@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
+  dependencies:
+    call-me-maybe "^1.0.1"
+    glob-to-regexp "^0.3.0"
+
+"@ngtools/webpack@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-6.0.0.tgz#e160cccd85823e9b01ee7bc5156a02510a323a34"
+  dependencies:
+    "@angular-devkit/core" "0.6.0"
+    tree-kill "^1.0.0"
+    webpack-sources "^1.1.0"
+
+"@nguniversal/express-engine@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@nguniversal/express-engine/-/express-engine-6.0.0.tgz#f8bc7b5e940afb1ffdbdcb1bb22665d440ea0b0b"
+
+"@nguniversal/module-map-ngfactory-loader@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@nguniversal/module-map-ngfactory-loader/-/module-map-ngfactory-loader-6.0.0.tgz#0dd26c3f1c26d17bb21b8dfc0da53d82b7f11028"
+
+"@schematics/angular@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-0.6.0.tgz#d7589c50f80ef089f7fba526ed9becefb187b6a2"
+  dependencies:
+    "@angular-devkit/core" "0.6.0"
+    "@angular-devkit/schematics" "0.6.0"
+    typescript ">=2.6.2 <2.8"
+
+"@schematics/update@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@schematics/update/-/update-0.6.0.tgz#1a5f75a5a02de85cc4b4bd4fa68dd53ddc95ba30"
+  dependencies:
+    "@angular-devkit/core" "0.6.0"
+    "@angular-devkit/schematics" "0.6.0"
+    npm-registry-client "^8.5.1"
+    rxjs "^6.0.0"
+    semver "^5.3.0"
+    semver-intersect "^1.1.2"
+
+"@sindresorhus/is@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
+
+"@types/angular-animate@^1.5.10":
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/@types/angular-animate/-/angular-animate-1.5.10.tgz#b94b45358c61163f1478768e8b081c76439c515f"
+  dependencies:
+    "@types/angular" "*"
+
+"@types/angular-mocks@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@types/angular-mocks/-/angular-mocks-1.6.0.tgz#bd32f55b678c239880d2d0d9a3a79b5cad45547e"
+  dependencies:
+    "@types/angular" "*"
+
+"@types/angular-resource@^1.5.14":
+  version "1.5.14"
+  resolved "https://registry.yarnpkg.com/@types/angular-resource/-/angular-resource-1.5.14.tgz#902f34e8c98f708ae99493c6d416b39b4a22d9fe"
+  dependencies:
+    "@types/angular" "*"
+
+"@types/angular-route@^1.3.5":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@types/angular-route/-/angular-route-1.3.5.tgz#78b8e0b069d5efe55ec7072461f4e2f6ae20767b"
+  dependencies:
+    "@types/angular" "*"
+
+"@types/angular@*", "@types/angular@^1.6.47":
+  version "1.6.47"
+  resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.47.tgz#f7a31279a02c0892ed9aa76aae2da1b17791bacd"
+
+"@types/body-parser@*":
+  version "1.16.7"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.16.7.tgz#455fc23fd0ddaaeda6cd6cbb653558276e5920fa"
+  dependencies:
+    "@types/express" "*"
+    "@types/node" "*"
+
+"@types/express-serve-static-core@*":
+  version "4.0.55"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.0.55.tgz#f53868838a955f98b380819ec9134f5df7d9482f"
+  dependencies:
+    "@types/node" "*"
+
+"@types/express@*", "@types/express@^4.0.35":
+  version "4.0.39"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.0.39.tgz#1441f21d52b33be8d4fa8a865c15a6a91cd0fa09"
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "*"
+    "@types/serve-static" "*"
+
+"@types/jasmine@*":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.6.2.tgz#6e6d4cb183cd55c7a1ad6270bced10fdd5367a3c"
+
+"@types/jasmine@~2.8.0":
+  version "2.8.4"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.4.tgz#5528fb5e53f1b27594f81f18debb7eab8dc532cb"
+
+"@types/jasminewd2@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/jasminewd2/-/jasminewd2-2.0.3.tgz#0d2886b0cbdae4c0eeba55e30792f584bf040a95"
+  dependencies:
+    "@types/jasmine" "*"
+
+"@types/jquery@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.4.tgz#f1850fb9a70041a14ace4f81a7ed782db8548317"
+
+"@types/mime@*":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.0.tgz#5a7306e367c539b9f6543499de8dd519fac37a8b"
+
+"@types/node@*":
+  version "8.0.47"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.47.tgz#968e596f91acd59069054558a00708c445ca30c2"
+
+"@types/node@^6.0.45", "@types/node@^6.0.46":
+  version "6.0.90"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.90.tgz#0ed74833fa1b73dcdb9409dcb1c97ec0a8b13b02"
+
+"@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.42"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.42.tgz#74cb77fb6052edaff2a8984ddafd88d419f25cac"
+
+"@types/serve-static@*":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.0.tgz#2ef359d8d5982bc011a7a8fa36016e629e8b7635"
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/mime" "*"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+abbrev@1.0.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+
+accepts@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+accepts@~1.3.3, accepts@~1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  dependencies:
+    mime-types "~2.1.16"
+    negotiator "0.6.1"
+
+acorn-dynamic-import@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz#901ceee4c7faaef7e07ad2a47e890675da50a278"
+  dependencies:
+    acorn "^5.0.0"
+
+acorn@^5.0.0, acorn@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7"
+
+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:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
+
+after@0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627"
+
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+
+agent-base@2:
+  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"
+
+ajv-keywords@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+
+ajv-keywords@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.1.0.tgz#ac2b27939c543e95d2c06e7f7f5c27be4aa543be"
+
+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, ajv@^5.1.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.3.0.tgz#4414ff74a50879c208ee5fdc826e32c303549eda"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+ajv@^6.1.0, ajv@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.4.0.tgz#d3aff78e9277549771daf0164cff48482b754fc6"
+  dependencies:
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+    uri-js "^3.0.2"
+
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+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.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.6.0.tgz#28262d6f7cdf1415c1d540c1a5cb838d58cb602a"
+
+ansi-escapes@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+
+ansi-escapes@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
+
+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-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
+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@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
+
+any-observable@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.2.0.tgz#c67870058003579009083f54ac0abafb5c33d242"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+append-transform@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  dependencies:
+    default-require-extensions "^1.0.0"
+
+aproba@^1.0.3, aproba@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  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.6"
+
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+
+arr-flatten@^1.0.1, arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+
+array-differ@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-flatten@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
+
+array-includes@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.7.0"
+
+array-slice@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+
+arraybuffer.slice@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca"
+
+arrify@^1.0.0, arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
+asn1.js@^4.0.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+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@^1.1.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+
+ast-types@0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.10.1.tgz#f52fca9715579a14f841d67d7f8d25432ab6a3dd"
+
+ast-types@0.11.3:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.3.tgz#c20757fe72ee71278ea0ff3d87e5c2ca30d9edf8"
+
+async-each-series@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/async-each-series/-/async-each-series-0.1.1.tgz#7617c1917401fd8ca4a28aadce3dbae98afeb432"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-foreach@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+
+async@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.0.tgz#ac3613b1da9bed1b47510bb4651b8931e47146c7"
+
+async@1.5.2, async@1.x, async@^1.4.0, async@^1.5.0, async@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+async@^2.1.4, async@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
+  dependencies:
+    lodash "^4.14.0"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+atob@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.0.3.tgz#19c7a760473774468f20b2d2d03372ad7d4cbf5d"
+
+autoprefixer@^8.1.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.2.0.tgz#1e49b611b31a5259b86b7a6b2b1b8faf091abe2a"
+  dependencies:
+    browserslist "^3.2.0"
+    caniuse-lite "^1.0.30000817"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.20"
+    postcss-value-parser "^3.2.3"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-core@^6.26.0:
+  version "6.26.3"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-generator "^6.26.0"
+    babel-helpers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-register "^6.26.0"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    convert-source-map "^1.5.1"
+    debug "^2.6.9"
+    json5 "^0.5.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    path-is-absolute "^1.0.1"
+    private "^0.1.8"
+    slash "^1.0.0"
+    source-map "^0.5.7"
+
+babel-generator@^6.18.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.6"
+    trim-right "^1.0.1"
+
+babel-generator@^6.26.0:
+  version "6.26.1"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.7"
+    trim-right "^1.0.1"
+
+babel-helper-bindify-decorators@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.24.1.tgz#14c19e5f142d7b47f19a52431e52b1ccbc40a330"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-define-map@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz#a5f56dab41a25f97ecb498c7ebaca9819f95be5f"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-helper-explode-assignable-expression@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-explode-class@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-class/-/babel-helper-explode-class-6.24.1.tgz#7dc2a3910dee007056e1e31d640ced3d54eaa9eb"
+  dependencies:
+    babel-helper-bindify-decorators "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+
+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.24.1"
+
+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.24.1"
+
+babel-helper-regex@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz#325c59f902f82f24b74faceed0363954f6495e72"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-helper-remap-async-to-generator@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz#5ec581827ad723fecdd381f1c928390676e4551b"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-check-es2015-constants@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-syntax-async-functions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+
+babel-plugin-syntax-async-generators@^6.5.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"
+
+babel-plugin-syntax-class-constructor-call@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz#9cb9d39fe43c8600bec8146456ddcbd4e1a76416"
+
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+
+babel-plugin-syntax-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+
+babel-plugin-syntax-export-extensions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz#70a1484f0f9089a4e84ad44bac353c95b9b12721"
+
+babel-plugin-syntax-flow@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+
+babel-plugin-syntax-trailing-function-commas@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
+
+babel-plugin-transform-async-generator-functions@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.24.1.tgz#f058900145fd3e9907a6ddf28da59f215258a5db"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-generators "^6.5.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-async-to-generator@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-class-constructor-call@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-constructor-call/-/babel-plugin-transform-class-constructor-call-6.24.1.tgz#80dc285505ac067dcb8d6c65e2f6f11ab7765ef9"
+  dependencies:
+    babel-plugin-syntax-class-constructor-call "^6.18.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-class-properties@^6.24.1:
+  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.24.1"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-decorators@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz#788013d8f8c6b5222bdf7b344390dfd77569e24d"
+  dependencies:
+    babel-helper-explode-class "^6.24.1"
+    babel-plugin-syntax-decorators "^6.13.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-arrow-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+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.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.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+
+babel-plugin-transform-es2015-destructuring@^6.22.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+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.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.22.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+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.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+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.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+
+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.24.1"
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+
+babel-plugin-transform-es2015-spread@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.22.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-export-extensions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-export-extensions/-/babel-plugin-transform-export-extensions-6.22.0.tgz#53738b47e75e8218589eea946cbbd39109bbe653"
+  dependencies:
+    babel-plugin-syntax-export-extensions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.8.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-object-rest-spread@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
+
+babel-plugin-transform-regenerator@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
+  dependencies:
+    regenerator-transform "^0.10.0"
+
+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.24.1"
+
+babel-preset-es2015@^6.9.0:
+  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.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.24.1"
+    babel-plugin-transform-es2015-for-of "^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.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.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.24.1"
+    babel-plugin-transform-regenerator "^6.24.1"
+
+babel-preset-stage-1@^6.5.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-1/-/babel-preset-stage-1-6.24.1.tgz#7692cd7dcd6849907e6ae4a0a85589cfb9e2bfb0"
+  dependencies:
+    babel-plugin-transform-class-constructor-call "^6.24.1"
+    babel-plugin-transform-export-extensions "^6.22.0"
+    babel-preset-stage-2 "^6.24.1"
+
+babel-preset-stage-2@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz#d9e2960fb3d71187f0e64eec62bc07767219bdc1"
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-plugin-transform-class-properties "^6.24.1"
+    babel-plugin-transform-decorators "^6.24.1"
+    babel-preset-stage-3 "^6.24.1"
+
+babel-preset-stage-3@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-3/-/babel-preset-stage-3-6.24.1.tgz#836ada0a9e7a7fa37cb138fb9326f87934a48395"
+  dependencies:
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-generator-functions "^6.24.1"
+    babel-plugin-transform-async-to-generator "^6.24.1"
+    babel-plugin-transform-exponentiation-operator "^6.24.1"
+    babel-plugin-transform-object-rest-spread "^6.22.0"
+
+babel-register@^6.26.0, babel-register@^6.9.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  dependencies:
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
+
+babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
+babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.17.3, babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+
+babylon@^7.0.0-beta.30:
+  version "7.0.0-beta.46"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.46.tgz#b6ddaba81bbb130313932757ff9c195d527088b6"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base64-arraybuffer@0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+
+base64-js@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+base64id@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-0.1.0.tgz#02ce0fdeee0cef4f40080e1e73e834f0b1bfce3f"
+
+base64id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+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"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+big.js@^3.1.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+
+binary-extensions@^1.0.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+
+binaryextensions@2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.1.1.tgz#3209a51ca4a4ad541a3b8d3d6a6d5b83a2485935"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+blocking-proxy@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/blocking-proxy/-/blocking-proxy-1.0.1.tgz#81d6fd1fe13a4c0d6957df7f91b75e98dac40cb2"
+  dependencies:
+    minimist "^1.2.0"
+
+bluebird@^3.3.0, bluebird@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+
+body-parser@1.18.2, body-parser@^1.16.1:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.2.tgz#87678a19d84b47d859b83199bd59bce222b10454"
+  dependencies:
+    bytes "3.0.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.1"
+    http-errors "~1.6.2"
+    iconv-lite "0.4.19"
+    on-finished "~2.3.0"
+    qs "6.5.1"
+    raw-body "2.3.2"
+    type-is "~1.6.15"
+
+bonjour@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  dependencies:
+    array-flatten "^2.1.0"
+    deep-equal "^1.0.1"
+    dns-equal "^1.0.0"
+    dns-txt "^2.0.2"
+    multicast-dns "^6.0.1"
+    multicast-dns-service-types "^1.1.0"
+
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
+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"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+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 "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^0.1.2:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-0.1.5.tgz#c085711085291d8b75fdd74eab0f8597280711e6"
+  dependencies:
+    expand-range "^0.1.0"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+braces@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.0.tgz#a46941cb5fb492156b3d6a656e06c35364e3e66e"
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+braces@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+brorand@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+
+browser-resolve@^1.11.0:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+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"
+
+browser-sync-ui@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-0.6.3.tgz#640a537c180689303d5be92bc476b9ebc441c0bc"
+  dependencies:
+    async-each-series "0.1.1"
+    connect-history-api-fallback "^1.1.0"
+    immutable "^3.7.6"
+    server-destroy "1.0.1"
+    stream-throttle "^0.1.3"
+    weinre "^2.0.0-pre-I0Z7U9OV"
+
+browser-sync@^2.18.5:
+  version "2.18.13"
+  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.18.13.tgz#c28dc3eb3be67c97a907082b772a37f915c14d7d"
+  dependencies:
+    browser-sync-client "2.5.1"
+    browser-sync-ui "0.6.3"
+    bs-recipes "1.3.4"
+    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 "3.0.1"
+    http-proxy "1.15.2"
+    immutable "3.8.1"
+    localtunnel "1.8.3"
+    micromatch "2.3.11"
+    opn "4.0.2"
+    portscanner "2.1.1"
+    qs "6.2.1"
+    resp-modifier "6.0.2"
+    rx "4.1.0"
+    serve-index "1.8.0"
+    serve-static "1.12.2"
+    server-destroy "1.0.1"
+    socket.io "1.6.0"
+    socket.io-client "1.6.0"
+    ua-parser-js "0.7.12"
+    yargs "6.4.0"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.1.tgz#38b7ab55edb806ff2dcda1a7f1620773a477c49f"
+  dependencies:
+    buffer-xor "^1.0.3"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.3"
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+browserify-rsa@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  dependencies:
+    bn.js "^4.1.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  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"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.2"
+    elliptic "^6.0.0"
+    inherits "^2.0.1"
+    parse-asn1 "^5.0.0"
+
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@^3.2.0:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.4.tgz#fb9ad70fd09875137ae943a31ab815ed76896031"
+  dependencies:
+    caniuse-lite "^1.0.30000821"
+    electron-to-chromium "^1.3.41"
+
+bs-recipes@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.3.4.tgz#0d2d4d48a718c8c044769fdc4f89592dc8b69585"
+
+btoa@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.1.2.tgz#3e40b81663f81d2dd6596a4cb714a8dc16cfabe0"
+
+buffer-from@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.0.0.tgz#4cb8832d23612589b0406e9e2956c17f06fdf531"
+
+buffer-indexof@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+
+buffer-xor@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+
+buffer@^4.3.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.0.0, builtin-modules@^1.1.0, builtin-modules@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+
+builtins@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+
+cacache@^10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"
+  dependencies:
+    bluebird "^3.5.1"
+    chownr "^1.0.1"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    lru-cache "^4.1.1"
+    mississippi "^2.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.2"
+    ssri "^5.2.4"
+    unique-filename "^1.1.0"
+    y18n "^4.0.0"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+cache-loader@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-1.2.2.tgz#6d5c38ded959a09cc5d58190ab5af6f73bd353f5"
+  dependencies:
+    loader-utils "^1.1.0"
+    mkdirp "^0.5.1"
+    neo-async "^2.5.0"
+    schema-utils "^0.4.2"
+
+cacheable-request@^2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-2.1.4.tgz#0d808801b6342ad33c91df9d0b44dc09b91e5c3d"
+  dependencies:
+    clone-response "1.0.2"
+    get-stream "3.0.0"
+    http-cache-semantics "3.8.1"
+    keyv "3.0.0"
+    lowercase-keys "1.0.0"
+    normalize-url "2.0.1"
+    responselike "1.0.2"
+
+call-me-maybe@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+camel-case@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@^1.0.2, camelcase@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
+caniuse-lite@^1.0.30000817, caniuse-lite@^1.0.30000821:
+  version "1.0.30000828"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000828.tgz#048f98de213f7a3c047bf78a9523c611855d4fdd"
+
+canonical-path@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/canonical-path/-/canonical-path-0.0.2.tgz#e31eb937a8c93ee2a01df1839794721902874574"
+
+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"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    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.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^2.0.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^2.0.1, chalk@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^2.1.0, chalk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.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"
+
+chalk@~2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.2.2.tgz#4403f5cf18f35c05f51fbdf152bf588f956cf7cb"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+
+chokidar@1.7.0, chokidar@^1.4.1, chokidar@^1.4.2:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+chokidar@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.0.tgz#6686313c541d3274b2a5c01233342037948c911b"
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.0"
+    braces "^2.3.0"
+    glob-parent "^3.1.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^2.1.1"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+chokidar@^2.0.2, chokidar@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.3.tgz#dcbd4f6cbb2a55b4799ba8a840ac527e5f4b1176"
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.0"
+    braces "^2.3.0"
+    glob-parent "^3.1.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^2.1.1"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+    upath "^1.0.0"
+  optionalDependencies:
+    fsevents "^1.1.2"
+
+chownr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
+
+chrome-trace-event@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-0.1.2.tgz#90f36885d5345a50621332f0717b595883d5d982"
+
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+circular-dependency-plugin@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/circular-dependency-plugin/-/circular-dependency-plugin-5.0.2.tgz#da168c0b37e7b43563fb9f912c1c007c213389ef"
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+clean-css@4.1.x:
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
+  dependencies:
+    source-map "0.5.x"
+
+clean-css@^4.1.11:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
+  dependencies:
+    source-map "0.5.x"
+
+cli-cursor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  dependencies:
+    restore-cursor "^1.0.1"
+
+cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  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"
+  dependencies:
+    colors "1.0.3"
+
+cli-truncate@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
+  dependencies:
+    slice-ansi "0.0.4"
+    string-width "^1.0.1"
+
+cli-width@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.0.3, cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+cliui@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.0.0.tgz#743d4650e05f36d1ed2575b59638d87322bfbbcc"
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+    wrap-ansi "^2.0.0"
+
+clone-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+
+clone-deep@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-2.0.2.tgz#00db3a1e173656730d1188c3d6aced6d7ea97713"
+  dependencies:
+    for-own "^1.0.0"
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.0"
+    shallow-clone "^1.0.0"
+
+clone-response@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
+  dependencies:
+    mimic-response "^1.0.0"
+
+clone-stats@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
+
+clone-stats@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
+
+clone@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+
+clone@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
+
+cloneable-readable@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.1.2.tgz#d591dee4a8f8bc15da43ce97dceeba13d43e2a65"
+  dependencies:
+    inherits "^2.0.1"
+    process-nextick-args "^2.0.0"
+    readable-stream "^2.3.5"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-convert@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
+colors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+
+colors@1.1.2, colors@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+colors@^1.1.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.2.3.tgz#1b152a9c4f6c9f74bc4bb96233ad0b7983b79744"
+
+combine-lists@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/combine-lists/-/combine-lists-1.0.1.tgz#458c07e09e0d900fc28b70a3fec2dacd1d2cb7f6"
+  dependencies:
+    lodash "^4.5.0"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.11.x, commander@^2.2.0, commander@~2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
+
+commander@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+
+commander@^2.12.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
+
+commander@^2.9.0, commander@~2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.1.2.tgz#296594f2753daa63996d2af08d15a95116c9aec3"
+
+component-emitter@1.2.1, component-emitter@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+
+compressible@~2.0.11:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"
+  dependencies:
+    mime-db ">= 1.30.0 < 2"
+
+compression@^1.5.2:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.1.tgz#eff2603efc2e22cf86f35d2eb93589f9875373db"
+  dependencies:
+    accepts "~1.3.4"
+    bytes "3.0.0"
+    compressible "~2.0.11"
+    debug "2.6.9"
+    on-headers "~1.0.1"
+    safe-buffer "5.1.1"
+    vary "~1.1.2"
+
+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.6.0, concat-stream@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+concat-stream@^1.5.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+concurrently@^3.0.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.5.0.tgz#8cf1b7707a6916a78a4ff5b77bb04dec54b379b2"
+  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"
+
+connect-history-api-fallback@^1.1.0, connect-history-api-fallback@^1.2.0, connect-history-api-fallback@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.4.0.tgz#3db24f973f4b923b0e82f619ce0df02411ca623d"
+
+connect-logger@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/connect-logger/-/connect-logger-0.0.1.tgz#4d999978a1d20bb4608e7cd434d741652255174b"
+  dependencies:
+    moment "*"
+
+connect@1.x:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-1.9.2.tgz#42880a22e9438ae59a8add74e437f58ae8e52807"
+  dependencies:
+    formidable "1.0.x"
+    mime ">= 0.0.1"
+    qs ">= 0.4.0"
+
+connect@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.5.0.tgz#b357525a0b4c1f50599cd983e1d9efeea9677198"
+  dependencies:
+    debug "~2.2.0"
+    finalhandler "0.5.0"
+    parseurl "~1.3.1"
+    utils-merge "1.0.0"
+
+connect@^3.6.0:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.5.tgz#fb8dde7ba0763877d0ec9df9dac0b4b40e72c7da"
+  dependencies:
+    debug "2.6.9"
+    finalhandler "1.0.6"
+    parseurl "~1.3.2"
+    utils-merge "1.0.1"
+
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  dependencies:
+    date-now "^0.1.4"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+
+content-disposition@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+
+convert-source-map@^1.1.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
+
+convert-source-map@^1.5.0, convert-source-map@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+
+copy-webpack-plugin@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.5.1.tgz#fc4f68f4add837cc5e13d111b20715793225d29c"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    globby "^7.1.1"
+    is-glob "^4.0.0"
+    loader-utils "^1.1.0"
+    minimatch "^3.0.4"
+    p-limit "^1.0.0"
+    serialize-javascript "^1.4.0"
+
+core-js@^2.2.0, core-js@^2.4.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
+
+core-js@^2.4.1, core-js@^2.5.0, core-js@^2.5.4:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.5.tgz#b14dde936c640c0579a6b50cabcc132dd6127e3b"
+
+core-js@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.3.0.tgz#fab83fbb0b2d8dc85fa636c4b9d34c75420c6d65"
+
+core-util-is@1.0.2, 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.2.2"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
+  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"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-hash@^1.1.0, 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 "^2.0.0"
+    sha.js "^2.4.0"
+
+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"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cross-spawn@^5.0.1:
+  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"
+
+cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+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"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
+crypto-browserify@^3.11.0:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f"
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+
+css-parse@1.7.x:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
+
+css-select@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
+css-what@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+
+cuint@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+custom-event@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
+
+cyclist@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+
+dargs@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dargs/-/dargs-5.1.0.tgz#ec7ea50c78564cd36c9d5ec18f66329fade27829"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-fns@^1.23.0, date-fns@^1.27.2:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+
+dateformat@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
+
+debug@*, debug@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
+debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@2.2.0, debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+debug@2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.3.3.tgz#40c453e67e6e13c901ddec317af8986cda9eff8c"
+  dependencies:
+    ms "0.7.2"
+
+debug@2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
+  dependencies:
+    ms "0.7.3"
+
+debug@2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  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"
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+
+decompress-response@^3.2.0, decompress-response@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
+  dependencies:
+    mimic-response "^1.0.0"
+
+deep-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
+deep-extend@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.5.1.tgz#b894a9dd90d3023fbf1c55a394fb858eb2066f1f"
+
+deep-extend@~0.4.0:
+  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"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+default-require-extensions@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  dependencies:
+    strip-bom "^2.0.0"
+
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+del@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+del@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+  dependencies:
+    globby "^6.1.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    p-map "^1.1.1"
+    pify "^3.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@1.1.1, depd@~1.1.0, depd@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+des.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-conflict@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/detect-conflict/-/detect-conflict-1.0.1.tgz#088657a66a961c05019db7c4230883b1c6b4176e"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+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"
+
+di@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
+
+diff@^3.1.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
+
+diff@^3.2.0, diff@^3.3.1, diff@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+dir-glob@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
+dns-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+
+dns-packet@^1.0.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.2.2.tgz#a8a26bec7646438963fc86e06f8f8b16d6c8bf7a"
+  dependencies:
+    ip "^1.1.0"
+    safe-buffer "^5.0.1"
+
+dns-txt@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  dependencies:
+    buffer-indexof "^1.0.0"
+
+docopt@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/docopt/-/docopt-0.6.2.tgz#b28e9e2220da5ec49f7ea5bb24a47787405eeb11"
+
+dom-converter@~0.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+  dependencies:
+    utila "~0.3"
+
+dom-serialize@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
+  dependencies:
+    custom-event "~1.0.0"
+    ent "~2.2.0"
+    extend "^3.0.0"
+    void-elements "^2.0.0"
+
+dom-serializer@0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  dependencies:
+    domelementtype "~1.1.1"
+    entities "~1.1.1"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+domelementtype@1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
+
+domelementtype@~1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+
+domhandler@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
+  dependencies:
+    domelementtype "1"
+
+domino@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.0.2.tgz#fa2da6ace8381cf64089079470ee33c53901010f"
+
+domutils@1.1:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+duplexer3@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
+
+duplexify@^3.1.2, duplexify@^3.4.2:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.1.tgz#4e1516be68838bc90a49994f0b39a6e5960befcd"
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+easy-extender@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/easy-extender/-/easy-extender-2.3.2.tgz#3d3248febe2b159607316d8f9cf491c16648221d"
+  dependencies:
+    lodash "^3.10.1"
+
+eazy-logger@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/eazy-logger/-/eazy-logger-3.0.2.tgz#a325aa5e53d13a2225889b2ac4113b2b9636f4fc"
+  dependencies:
+    tfunk "^3.0.1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+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.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+ejs@^2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
+
+ejs@^2.5.9:
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.9.tgz#7ba254582a560d267437109a68354112475b0ce5"
+
+electron-to-chromium@^1.3.41:
+  version "1.3.42"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.42.tgz#95c33bf01d0cc405556aec899fe61fd4d76ea0f9"
+
+elegant-spinner@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
+
+elliptic@^6.0.0:
+  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"
+
+emitter-steward@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/emitter-steward/-/emitter-steward-1.0.0.tgz#f3411ade9758a7565df848b2da0cbbd1b46cbd64"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
+  dependencies:
+    once "^1.4.0"
+
+engine.io-client@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-1.8.0.tgz#7b730e4127414087596d9be3c88d2bc5fdb6cf5c"
+  dependencies:
+    component-emitter "1.2.1"
+    component-inherit "0.0.3"
+    debug "2.3.3"
+    engine.io-parser "1.3.1"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parsejson "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "1.1.1"
+    xmlhttprequest-ssl "1.5.3"
+    yeast "0.1.2"
+
+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"
+    debug "2.3.3"
+    engine.io-parser "1.3.2"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parsejson "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "1.1.2"
+    xmlhttprequest-ssl "1.5.3"
+    yeast "0.1.2"
+
+engine.io-parser@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-1.3.1.tgz#9554f1ae33107d6fbd170ca5466d2f833f6a07cf"
+  dependencies:
+    after "0.8.1"
+    arraybuffer.slice "0.0.6"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.4"
+    has-binary "0.1.6"
+    wtf-8 "1.0.0"
+
+engine.io-parser@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-1.3.2.tgz#937b079f0007d0893ec56d46cb220b8cb435220a"
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "0.0.6"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.4"
+    has-binary "0.1.7"
+    wtf-8 "1.0.0"
+
+engine.io@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-1.8.0.tgz#3eeb5f264cb75dbbec1baaea26d61f5a4eace2aa"
+  dependencies:
+    accepts "1.3.3"
+    base64id "0.1.0"
+    cookie "0.3.1"
+    debug "2.3.3"
+    engine.io-parser "1.3.1"
+    ws "1.1.1"
+
+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.2"
+
+enhanced-resolve@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.0.0.tgz#e34a6eaa790f62fccd71d93959f56b2b432db10a"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    tapable "^1.0.0"
+
+ent@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
+
+entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
+envinfo@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-4.4.2.tgz#472c49f3a8b9bca73962641ce7cb692bf623cd1c"
+
+errno@^0.1.1, errno@^0.1.3, errno@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+error-ex@^1.2.0, error-ex@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+error@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02"
+  dependencies:
+    string-template "~0.2.1"
+    xtend "~4.0.0"
+
+es-abstract@^1.5.1:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.11.0.tgz#cce87d518f0496893b1a30cd8461835535480681"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+es-abstract@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+es-to-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+es6-promise@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.0.2.tgz#010d5858423a5f118979665f46486a95c6ee2bb6"
+
+es6-promise@~4.0.3:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.0.5.tgz#7882f30adde5b240ccfa7f7d78c548330951ae42"
+
+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.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"
+
+escodegen@1.8.x:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
+  dependencies:
+    esprima "^2.7.1"
+    estraverse "^1.9.1"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.2.0"
+
+eslint-scope@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+esprima@2.7.x, esprima@^2.7.1:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esprima@^4.0.0, esprima@~4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
+esrecurse@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.0.tgz#fa9568d98d3823f9a41d91e902dcab9ea6e5b163"
+  dependencies:
+    estraverse "^4.1.0"
+    object-assign "^4.0.1"
+
+estraverse@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
+
+estraverse@^4.1.0, estraverse@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+
+estree-walker@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.3.1.tgz#e6b1a51cf7292524e7237c312e5fe6660c1ce1aa"
+
+estree-walker@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.0.tgz#aae3b57c42deb8010e349c892462f0e71c5dd1aa"
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+etag@^1.7.0, etag@~1.8.0, etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+eventsource@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+  dependencies:
+    original ">=0.0.5"
+
+evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  dependencies:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.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"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-braces@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/expand-braces/-/expand-braces-0.1.2.tgz#488b1d1d2451cb3d3a6b192cfc030f44c5855fea"
+  dependencies:
+    array-slice "^0.2.3"
+    array-unique "^0.2.1"
+    braces "^0.1.2"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+expand-range@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-0.1.1.tgz#4cb8eda0993ca56fa4f41fc42f3cbb4ccadff044"
+  dependencies:
+    is-number "^0.1.1"
+    repeat-string "^0.2.2"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+expand-tilde@^2.0.0, expand-tilde@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+express@2.5.x:
+  version "2.5.11"
+  resolved "https://registry.yarnpkg.com/express/-/express-2.5.11.tgz#4ce8ea1f3635e69e49f0ebb497b6a4b0a51ce6f0"
+  dependencies:
+    connect "1.x"
+    mime "1.2.4"
+    mkdirp "0.3.0"
+    qs "0.4.x"
+
+express@^4.14.1, express@^4.16.2:
+  version "4.16.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
+  dependencies:
+    accepts "~1.3.4"
+    array-flatten "1.1.1"
+    body-parser "1.18.2"
+    content-disposition "0.5.2"
+    content-type "~1.0.4"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.1"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.1.0"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.2"
+    qs "6.5.1"
+    range-parser "~1.2.0"
+    safe-buffer "5.1.1"
+    send "0.16.1"
+    serve-static "1.13.1"
+    setprototypeof "1.1.0"
+    statuses "~1.3.1"
+    type-is "~1.6.15"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+external-editor@^2.0.4, external-editor@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
+  dependencies:
+    chardet "^0.4.0"
+    iconv-lite "^0.4.17"
+    tmp "^0.0.33"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extglob@^2.0.2, extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extract-zip@~1.6.5:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.5.tgz#99a06735b6ea20ea9b705d779acffcc87cff0440"
+  dependencies:
+    concat-stream "1.6.0"
+    debug "2.2.0"
+    mkdirp "0.5.0"
+    yauzl "2.4.1"
+
+extsprintf@1.3.0, extsprintf@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
+fast-glob@^2.0.2:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.1.tgz#686c2345be88f3741e174add0be6f2e5b6078889"
+  dependencies:
+    "@mrmlnc/readdir-enhanced" "^2.2.1"
+    glob-parent "^3.1.0"
+    is-glob "^4.0.0"
+    merge2 "^1.2.1"
+    micromatch "^3.1.10"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+
+faye-websocket@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+faye-websocket@~0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+fd-slicer@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
+  dependencies:
+    pend "~1.2.0"
+
+figures@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+file-loader@^1.1.11:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.4.5"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
+  dependencies:
+    glob "^7.0.3"
+    minimatch "^3.0.3"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.0"
+    unpipe "~1.0.0"
+
+finalhandler@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.6.tgz#007aea33d1a4d3e42017f624848ad58d212f814f"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
+finalhandler@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
+find-cache-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  dependencies:
+    locate-path "^2.0.0"
+
+first-chunk-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-2.0.0.tgz#1bdecdb8e083c0664b91945581577a43a9f31d70"
+  dependencies:
+    readable-stream "^2.0.2"
+
+flow-parser@^0.*:
+  version "0.71.0"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.71.0.tgz#da2479b83f9207905b4b17ab0c4e6d17bd505250"
+
+flush-write-stream@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.2.tgz#c81b90d8746766f1a609a46809946c45dd8ae417"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.4"
+
+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, for-in@^1.0.2:
+  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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    for-in "^1.0.1"
+
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  dependencies:
+    for-in "^1.0.1"
+
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+
+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.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"
+    mime-types "^2.1.12"
+
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+formidable@1.0.x:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/formidable/-/formidable-1.0.17.tgz#ef5491490f9433b705faa77249c99029ae348559"
+
+forwarded@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  dependencies:
+    map-cache "^0.2.2"
+
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+fresh@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+
+from2@^2.1.0, from2@^2.1.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
+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@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 "^3.0.0"
+    universalify "^0.1.0"
+
+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-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
+
+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.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.36"
+
+fsevents@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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"
+
+function-bind@^1.0.2, function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+gaze@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
+  dependencies:
+    globule "^1.0.0"
+
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+get-stream@3.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"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+gh-got@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gh-got/-/gh-got-6.0.0.tgz#d74353004c6ec466647520a10bd46f7299d268d0"
+  dependencies:
+    got "^7.0.0"
+    is-plain-obj "^1.1.0"
+
+github-username@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/github-username/-/github-username-4.1.0.tgz#cbe280041883206da4212ae9e4b5f169c30bf417"
+  dependencies:
+    gh-got "^6.0.0"
+
+glob-all@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-all/-/glob-all-3.1.0.tgz#8913ddfb5ee1ac7812656241b03d5217c64b02ab"
+  dependencies:
+    glob "^7.0.5"
+    yargs "~1.2.6"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
+glob-to-regexp@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
+
+glob@7.0.x:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^5.0.15:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1, glob@^7.1.2, 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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global-modules@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
+  dependencies:
+    global-prefix "^1.0.1"
+    is-windows "^1.0.1"
+    resolve-dir "^1.0.0"
+
+global-prefix@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
+
+globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globby@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+globby@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.1.tgz#b5ad48b8aa80b35b814fc1281ecc851f1d2b5b50"
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    fast-glob "^2.0.2"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+globule@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
+  dependencies:
+    glob "~7.1.1"
+    lodash "~4.17.4"
+    minimatch "~3.0.2"
+
+got@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/got/-/got-7.1.0.tgz#05450fd84094e6bbea56f451a43a9c289166385a"
+  dependencies:
+    decompress-response "^3.2.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    is-plain-obj "^1.1.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    isurl "^1.0.0-alpha5"
+    lowercase-keys "^1.0.0"
+    p-cancelable "^0.3.0"
+    p-timeout "^1.1.1"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    url-parse-lax "^1.0.0"
+    url-to-options "^1.0.1"
+
+got@^8.2.0:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-8.3.1.tgz#093324403d4d955f5a16a7a8d39955d055ae10ed"
+  dependencies:
+    "@sindresorhus/is" "^0.7.0"
+    cacheable-request "^2.1.1"
+    decompress-response "^3.3.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    into-stream "^3.1.0"
+    is-retry-allowed "^1.1.0"
+    isurl "^1.0.0-alpha5"
+    lowercase-keys "^1.0.0"
+    mimic-response "^1.0.0"
+    p-cancelable "^0.4.0"
+    p-timeout "^2.0.1"
+    pify "^3.0.0"
+    safe-buffer "^5.1.1"
+    timed-out "^4.0.1"
+    url-parse-lax "^3.0.0"
+    url-to-options "^1.0.1"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, 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"
+
+grouped-queue@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/grouped-queue/-/grouped-queue-0.3.3.tgz#c167d2a5319c5a0e0964ef6a25b7c2df8996c85c"
+  dependencies:
+    lodash "^4.17.2"
+
+handle-thing@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
+
+handlebars@^4.0.1, handlebars@^4.0.3:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+  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-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+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"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.6.tgz#25326f39cfa4f616ad8787894e3af2cfbc7b6e10"
+  dependencies:
+    isarray "0.0.1"
+
+has-binary@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.7.tgz#68e61eb16210c9545a0a5cce06a873912fe1e68c"
+  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"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
+has-symbol-support-x@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz#1409f98bc00247da45da67cee0a36f282ff26455"
+
+has-to-string-tag-x@^1.2.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz#a045ab383d7b4b2012a00148ab0aa5f290044d4d"
+  dependencies:
+    has-symbol-support-x "^1.4.1"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  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-base@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
+
+hasha@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/hasha/-/hasha-2.2.0.tgz#78d7cbfc1e6d66303fe79837365984517b2f6ee1"
+  dependencies:
+    is-stream "^1.0.1"
+    pinkie-promise "^2.0.0"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+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"
+
+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"
+
+hoek@4.x.x:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
+
+home-or-tmp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+homedir-polyfill@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  dependencies:
+    parse-passwd "^1.0.0"
+
+hosted-git-info@^2.1.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+
+hosted-git-info@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.6.0.tgz#23235b29ab230c576aab0d4f13fc046b0b038222"
+
+hpack.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  dependencies:
+    inherits "^2.0.1"
+    obuf "^1.0.0"
+    readable-stream "^2.0.1"
+    wbuf "^1.1.0"
+
+html-entities@^1.2.0:
+  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.5.6"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.6.tgz#7e4e661a09999599c7d8e8a2b8d7fb7430bb5c3e"
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "4.1.x"
+    commander "2.11.x"
+    he "1.1.x"
+    ncname "1.0.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "3.1.x"
+
+html-webpack-plugin@^3.0.6:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
+  dependencies:
+    html-minifier "^3.2.3"
+    loader-utils "^0.2.16"
+    lodash "^4.17.3"
+    pretty-error "^2.0.2"
+    tapable "^1.0.0"
+    toposort "^1.0.0"
+    util.promisify "1.0.0"
+
+htmlparser2@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
+  dependencies:
+    domelementtype "1"
+    domhandler "2.1"
+    domutils "1.1"
+    readable-stream "1.0"
+
+http-cache-semantics@3.8.1:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"
+
+http-deceiver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+
+http-errors@1.6.2, http-errors@~1.6.1, http-errors@~1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-errors@~1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+  dependencies:
+    inherits "2.0.3"
+    setprototypeof "1.0.2"
+    statuses ">= 1.3.1 < 2"
+
+http-parser-js@>=0.4.0:
+  version "0.4.9"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.9.tgz#ea1a04fb64adff0242e9974f297dd4c3cad271e1"
+
+http-proxy-middleware@~0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz#0987e6bb5a5606e5a69168d8f967a87f15dd8aab"
+  dependencies:
+    http-proxy "^1.16.2"
+    is-glob "^4.0.0"
+    lodash "^4.17.5"
+    micromatch "^3.1.9"
+
+http-proxy@1.15.2:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.15.2.tgz#642fdcaffe52d3448d2bda3b0079e9409064da31"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+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"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+https-proxy-agent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+iconv-lite@0.4.19:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
+iconv-lite@^0.4.17:
+  version "0.4.21"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.21.tgz#c47f8733d02171189ebc4a400f3218d348094798"
+  dependencies:
+    safer-buffer "^2.1.0"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+
+ignore@^3.3.5:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
+
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+
+immutable@3.8.1:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
+
+immutable@^3.7.6:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+
+import-local@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
+  dependencies:
+    pkg-dir "^2.0.0"
+    resolve-cwd "^2.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+in-publish@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+inquirer@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.0.4"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rx-lite "^4.0.8"
+    rx-lite-aggregates "^4.0.8"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
+    through "^2.3.6"
+
+inquirer@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.1.0"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rxjs "^5.5.2"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
+    through "^2.3.6"
+
+internal-ip@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  dependencies:
+    meow "^3.3.0"
+
+interpret@^1.0.0, interpret@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
+
+into-stream@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6"
+  dependencies:
+    from2 "^2.1.1"
+    p-is-promise "^1.1.0"
+
+invariant@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  dependencies:
+    loose-envify "^1.0.0"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+ip@^1.1.0, ip@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+
+ipaddr.js@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0"
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-callable@^1.1.1, is-callable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+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.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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-extglob@^2.1.0, is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-glob@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-my-json-valid@^2.12.4:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.17.1.tgz#3da98914a70a22f0a8563ef1511a246c6fc55471"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-number-like@^1.0.3:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/is-number-like/-/is-number-like-1.0.8.tgz#2e129620b50891042e44e9bbbb30593e75cfbbe3"
+  dependencies:
+    lodash.isfinite "^3.3.2"
+
+is-number@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-0.1.1.tgz#69a7af116963d47206ec9bd9b48a14216f1e3806"
+
+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-number@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+
+is-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
+
+is-observable@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-0.2.0.tgz#b361311d83c6e5d726cabf5e250b0237106f5ae2"
+  dependencies:
+    symbol-observable "^0.2.2"
+
+is-odd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-1.0.0.tgz#3b8a932eb028b3775c39bb09e91767accdb69088"
+  dependencies:
+    is-number "^3.0.0"
+
+is-odd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-2.0.0.tgz#7646624671fd7ea558ccd9a2795182f2958f1b24"
+  dependencies:
+    is-number "^4.0.0"
+
+is-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+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, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-promise@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
+is-regex@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
+
+is-retry-allowed@^1.0.0, is-retry-allowed@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
+
+is-scoped@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-scoped/-/is-scoped-1.0.0.tgz#449ca98299e713038256289ecb2b540dc437cb30"
+  dependencies:
+    scoped-regex "^1.0.0"
+
+is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+is-windows@^1.0.1, is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+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"
+
+isbinaryfile@^3.0.0, isbinaryfile@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.2.tgz#4a3e974ec0cba9004d3fc6cde7209ea69368a621"
+
+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"
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+istanbul-api@^1.1.14:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.1.tgz#0c60a0515eb11c7d65c6b50bba2c6e999acd8620"
+  dependencies:
+    async "^2.1.4"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-hook "^1.1.0"
+    istanbul-lib-instrument "^1.9.1"
+    istanbul-lib-report "^1.1.2"
+    istanbul-lib-source-maps "^1.2.2"
+    istanbul-reports "^1.1.3"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-instrumenter-loader@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-instrumenter-loader/-/istanbul-instrumenter-loader-3.0.1.tgz#9957bd59252b373fae5c52b7b5188e6fde2a0949"
+  dependencies:
+    convert-source-map "^1.5.0"
+    istanbul-lib-instrument "^1.7.3"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+
+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.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.1.0.tgz#8538d970372cb3716d53e55523dd54b557a8d89b"
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.7.3, istanbul-lib-instrument@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz#250b30b3531e5d3251299fdd64b0b2c9db6b558e"
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.1.1"
+    semver "^5.3.0"
+
+istanbul-lib-report@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.2.tgz#922be27c13b9511b979bd1587359f69798c1d425"
+  dependencies:
+    istanbul-lib-coverage "^1.1.1"
+    mkdirp "^0.5.1"
+    path-parse "^1.0.5"
+    supports-color "^3.1.2"
+
+istanbul-lib-source-maps@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz#750578602435f28a0c04ee6d7d9e0f2960e62c1c"
+  dependencies:
+    debug "^3.1.0"
+    istanbul-lib-coverage "^1.1.1"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.1"
+    source-map "^0.5.3"
+
+istanbul-reports@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.3.tgz#3b9e1e8defb6d18b1d425da8e8b32c5a163f2d10"
+  dependencies:
+    handlebars "^4.0.3"
+
+istanbul@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/istanbul/-/istanbul-0.4.5.tgz#65c7d73d4c4da84d4f3ac310b918fb0b8033733b"
+  dependencies:
+    abbrev "1.0.x"
+    async "1.x"
+    escodegen "1.8.x"
+    esprima "2.7.x"
+    glob "^5.0.15"
+    handlebars "^4.0.1"
+    js-yaml "3.x"
+    mkdirp "0.5.x"
+    nopt "3.x"
+    once "1.x"
+    resolve "1.1.x"
+    supports-color "^3.1.0"
+    which "^1.1.1"
+    wordwrap "^1.0.0"
+
+istextorbinary@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.2.1.tgz#a5231a08ef6dd22b268d0895084cf8d58b5bec53"
+  dependencies:
+    binaryextensions "2"
+    editions "^1.3.3"
+    textextensions "2"
+
+isurl@^1.0.0-alpha5:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
+  dependencies:
+    has-to-string-tag-x "^1.2.0"
+    is-object "^1.0.1"
+
+jasmine-core@~2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
+
+jasmine-core@~2.99.1:
+  version "2.99.1"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.99.1.tgz#e6400df1e6b56e130b61c4bcd093daa7f6e8ca15"
+
+jasmine-marbles@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/jasmine-marbles/-/jasmine-marbles-0.3.1.tgz#ef65edecb41b8dd62fc6bda40448222042e32043"
+  dependencies:
+    lodash "^4.5.0"
+
+jasmine-spec-reporter@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/jasmine-spec-reporter/-/jasmine-spec-reporter-4.2.1.tgz#1d632aec0341670ad324f92ba84b4b32b35e9e22"
+  dependencies:
+    colors "1.1.2"
+
+jasmine@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.8.0.tgz#6b089c0a11576b1f16df11b80146d91d4e8b8a3e"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.8.0"
+
+jasminewd2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
+
+js-base64@^2.1.8:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf"
+
+js-tokens@^3.0.0, js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+js-yaml@3.x:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^3.4.3, js-yaml@^3.7.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+jscodeshift@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.4.1.tgz#da91a1c2eccfa03a3387a21d39948e251ced444a"
+  dependencies:
+    async "^1.5.0"
+    babel-plugin-transform-flow-strip-types "^6.8.0"
+    babel-preset-es2015 "^6.9.0"
+    babel-preset-stage-1 "^6.5.0"
+    babel-register "^6.9.0"
+    babylon "^6.17.3"
+    colors "^1.1.2"
+    flow-parser "^0.*"
+    lodash "^4.13.1"
+    micromatch "^2.3.7"
+    node-dir "0.1.8"
+    nomnom "^1.8.1"
+    recast "^0.12.5"
+    temp "^0.8.1"
+    write-file-atomic "^1.2.0"
+
+jscodeshift@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.5.0.tgz#bdb7b6cc20dd62c16aa728c3fa2d2fe66ca7c748"
+  dependencies:
+    babel-plugin-transform-flow-strip-types "^6.8.0"
+    babel-preset-es2015 "^6.9.0"
+    babel-preset-stage-1 "^6.5.0"
+    babel-register "^6.9.0"
+    babylon "^7.0.0-beta.30"
+    colors "^1.1.2"
+    flow-parser "^0.*"
+    lodash "^4.13.1"
+    micromatch "^2.3.7"
+    neo-async "^2.5.0"
+    node-dir "0.1.8"
+    nomnom "^1.8.1"
+    recast "^0.14.1"
+    temp "^0.8.1"
+    write-file-atomic "^1.2.0"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json-buffer@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
+
+json-parse-better-errors@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+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"
+
+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.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  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"
+
+jsonpointer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+jszip@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.1.5.tgz#e3c2a6c6d706ac6e603314036d43cd40beefdf37"
+  dependencies:
+    core-js "~2.3.0"
+    es6-promise "~3.0.2"
+    lie "~3.1.0"
+    pako "~1.0.2"
+    readable-stream "~2.0.6"
+
+karma-chrome-launcher@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz#cf1b9d07136cc18fe239327d24654c3dbc368acf"
+  dependencies:
+    fs-access "^1.0.0"
+    which "^1.2.1"
+
+karma-coverage-istanbul-reporter@~1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.4.2.tgz#a8d0c8815c7d6f6cea15a394a7c4b39ef151a939"
+  dependencies:
+    istanbul-api "^1.1.14"
+    minimatch "^3.0.4"
+
+karma-jasmine-html-reporter@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-0.2.2.tgz#48a8e5ef18807617ee2b5e33c1194c35b439524c"
+  dependencies:
+    karma-jasmine "^1.0.2"
+
+karma-jasmine@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/karma-jasmine/-/karma-jasmine-1.1.0.tgz#22e4c06bf9a182e5294d1f705e3733811b810acf"
+
+karma-jasmine@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/karma-jasmine/-/karma-jasmine-1.1.1.tgz#6fe840e75a11600c9d91e84b33c458e1c46a3529"
+
+karma-phantomjs-launcher@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/karma-phantomjs-launcher/-/karma-phantomjs-launcher-1.0.4.tgz#d23ca34801bda9863ad318e3bb4bd4062b13acd2"
+  dependencies:
+    lodash "^4.0.1"
+    phantomjs-prebuilt "^2.1.7"
+
+karma-source-map-support@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/karma-source-map-support/-/karma-source-map-support-1.2.0.tgz#1bf81e7bb4b089627ab352ec4179e117c406a540"
+  dependencies:
+    source-map-support "^0.4.1"
+
+karma@~1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-1.7.1.tgz#85cc08e9e0a22d7ce9cca37c4a1be824f6a2b1ae"
+  dependencies:
+    bluebird "^3.3.0"
+    body-parser "^1.16.1"
+    chokidar "^1.4.1"
+    colors "^1.1.0"
+    combine-lists "^1.0.0"
+    connect "^3.6.0"
+    core-js "^2.2.0"
+    di "^0.0.1"
+    dom-serialize "^2.2.0"
+    expand-braces "^0.1.1"
+    glob "^7.1.1"
+    graceful-fs "^4.1.2"
+    http-proxy "^1.13.0"
+    isbinaryfile "^3.0.0"
+    lodash "^3.8.0"
+    log4js "^0.6.31"
+    mime "^1.3.4"
+    minimatch "^3.0.2"
+    optimist "^0.6.1"
+    qjobs "^1.1.4"
+    range-parser "^1.2.0"
+    rimraf "^2.6.0"
+    safe-buffer "^5.0.1"
+    socket.io "1.7.3"
+    source-map "^0.5.3"
+    tmp "0.0.31"
+    useragent "^2.1.12"
+
+kew@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/kew/-/kew-0.7.0.tgz#79d93d2d33363d6fdd2970b335d9141ad591d79b"
+
+keyv@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.0.0.tgz#44923ba39e68b12a7cec7df6c3268c031f2ef373"
+  dependencies:
+    json-buffer "3.0.0"
+
+killable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    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"
+
+kind-of@^5.0.0, kind-of@^5.0.2:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+
+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@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lazy-cache@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264"
+  dependencies:
+    set-getter "^0.1.0"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+less-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.1.0.tgz#2c1352c5b09a4f84101490274fd51674de41363e"
+  dependencies:
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^3.0.0"
+
+less@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/less/-/less-3.0.2.tgz#1bcb9813bb6090c884ac142f02c633bd42931844"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    mime "^1.4.1"
+    mkdirp "^0.5.0"
+    promise "^7.1.1"
+    request "^2.83.0"
+    source-map "^0.5.3"
+
+levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+license-webpack-plugin@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-1.3.1.tgz#688b76472188ef597918b7cae3eec7dc2fa5a0e8"
+  dependencies:
+    ejs "^2.5.7"
+
+lie@~3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  dependencies:
+    immediate "~3.0.5"
+
+limiter@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.2.tgz#229d8055891c8b11af9e0ee5200e8e09bb3dcbeb"
+
+listr-silent-renderer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
+
+listr-update-renderer@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.4.0.tgz#344d980da2ca2e8b145ba305908f32ae3f4cc8a7"
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    elegant-spinner "^1.0.1"
+    figures "^1.7.0"
+    indent-string "^3.0.0"
+    log-symbols "^1.0.2"
+    log-update "^1.0.2"
+    strip-ansi "^3.0.1"
+
+listr-verbose-renderer@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#8206f4cf6d52ddc5827e5fd14989e0e965933a35"
+  dependencies:
+    chalk "^1.1.3"
+    cli-cursor "^1.0.2"
+    date-fns "^1.27.2"
+    figures "^1.7.0"
+
+listr@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/listr/-/listr-0.13.0.tgz#20bb0ba30bae660ee84cc0503df4be3d5623887d"
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    figures "^1.7.0"
+    indent-string "^2.1.0"
+    is-observable "^0.2.0"
+    is-promise "^2.1.0"
+    is-stream "^1.1.0"
+    listr-silent-renderer "^1.1.1"
+    listr-update-renderer "^0.4.0"
+    listr-verbose-renderer "^0.4.0"
+    log-symbols "^1.0.2"
+    log-update "^1.0.2"
+    ora "^0.2.3"
+    p-map "^1.1.1"
+    rxjs "^5.4.2"
+    stream-to-observable "^0.2.0"
+    strip-ansi "^3.0.1"
+
+lite-server@^2.2.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/lite-server/-/lite-server-2.3.0.tgz#5b4cc8f5d5fd4836105480ab2ac48a3a0de2b0c8"
+  dependencies:
+    browser-sync "^2.18.5"
+    connect-history-api-fallback "^1.2.0"
+    connect-logger "0.0.1"
+    lodash "^4.11.1"
+    minimist "1.2.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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
+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.16:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+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"
+    json5 "^0.5.0"
+
+localtunnel@1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/localtunnel/-/localtunnel-1.8.3.tgz#dcc5922fd85651037d4bde24fd93248d0b24eb05"
+  dependencies:
+    debug "2.6.8"
+    openurl "1.1.1"
+    request "2.81.0"
+    yargs "3.29.0"
+
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
+lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+
+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"
+
+lodash.isfinite@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
+
+lodash.mergewith@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
+
+lodash.tail@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
+
+lodash@^3.10.1, lodash@^3.8.0:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.16.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.5.1, lodash@~4.17.4:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.2:
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+
+lodash@^4.17.5:
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+
+log-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
+  dependencies:
+    chalk "^1.0.0"
+
+log-symbols@^2.1.0, log-symbols@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  dependencies:
+    chalk "^2.0.1"
+
+log-update@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1"
+  dependencies:
+    ansi-escapes "^1.0.0"
+    cli-cursor "^1.0.2"
+
+log4js@^0.6.31:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.38.tgz#2c494116695d6fb25480943d3fc872e662a522fd"
+  dependencies:
+    readable-stream "~1.0.2"
+    semver "~4.3.3"
+
+loglevel@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.5.1.tgz#189078c94ab9053ee215a0acdbf24244ea0f6502"
+
+loglevelnext@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-1.0.4.tgz#0d991d9998180991dac8bd81e73a596a8720a645"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loose-envify@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+loud-rejection@^1.0.0, loud-rejection@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.0.0"
+
+lower-case@^1.1.1:
+  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"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
+
+lowercase-keys@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
+
+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, lru-cache@^4.1.1:
+  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"
+
+magic-string@^0.22.4:
+  version "0.22.4"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.4.tgz#31039b4e40366395618c1d6cf8193c53917475ff"
+  dependencies:
+    vlq "^0.2.1"
+
+make-dir@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.1.0.tgz#19b4369fe48c116f53c2af95ad102c0e39e85d51"
+  dependencies:
+    pify "^3.0.0"
+
+make-dir@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.2.0.tgz#6d6a49eead4aae296c53bbf3a1a008bd6c89469b"
+  dependencies:
+    pify "^3.0.0"
+
+make-error@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.0.tgz#52ad3a339ccf10ce62b4040b708fe707244b8b96"
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+
+map-obj@^1.0.0, map-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  dependencies:
+    object-visit "^1.0.0"
+
+md5.js@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+mem-fs-editor@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/mem-fs-editor/-/mem-fs-editor-4.0.1.tgz#27e6b59df91b37248e9be2145b1bea84695103ed"
+  dependencies:
+    commondir "^1.0.1"
+    deep-extend "^0.5.1"
+    ejs "^2.5.9"
+    glob "^7.0.3"
+    globby "^8.0.0"
+    isbinaryfile "^3.0.2"
+    mkdirp "^0.5.0"
+    multimatch "^2.0.0"
+    rimraf "^2.2.8"
+    through2 "^2.0.0"
+    vinyl "^2.0.1"
+
+mem-fs@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/mem-fs/-/mem-fs-1.1.3.tgz#b8ae8d2e3fcb6f5d3f9165c12d4551a065d989cc"
+  dependencies:
+    through2 "^2.0.0"
+    vinyl "^1.1.0"
+    vinyl-file "^2.0.0"
+
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.0"
+
+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:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+meow@^3.3.0, meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  dependencies:
+    camelcase-keys "^2.0.0"
+    decamelize "^1.1.2"
+    loud-rejection "^1.0.0"
+    map-obj "^1.0.1"
+    minimist "^1.1.3"
+    normalize-package-data "^2.3.4"
+    object-assign "^4.0.1"
+    read-pkg-up "^1.0.1"
+    redent "^1.0.0"
+    trim-newlines "^1.0.0"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+merge2@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.2.1.tgz#271d2516ff52d4af7f7b710b8bf3e16e183fef66"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@2.3.11, micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+micromatch@^3.1.10, micromatch@^3.1.8, micromatch@^3.1.9:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+micromatch@^3.1.4:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.5.tgz#d05e168c206472dfbca985bfef4f57797b4cd4ba"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.0"
+    define-property "^1.0.0"
+    extend-shallow "^2.0.1"
+    extglob "^2.0.2"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.0"
+    nanomatch "^1.2.5"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+miller-rabin@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+"mime-db@>= 1.30.0 < 2":
+  version "1.31.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.31.0.tgz#a49cd8f3ebf3ed1a482b60561d9105ad40ca74cb"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mime@1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.4.tgz#11b5fdaf29c2509255176b80ad520294f5de92b7"
+
+mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+mime@1.4.1, mime@^1.2.11, mime@^1.3.4, mime@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+
+"mime@>= 0.0.1":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.0.3.tgz#4353337854747c48ea498330dc034f9f4bbbcc0b"
+
+mime@^2.0.3, mime@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.3.1.tgz#b1621c54d63b97c47d3cfe7f7215f7d64517c369"
+
+mimic-fn@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+
+mimic-response@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.0.tgz#df3d3652a73fded6b9b0b24146e6fd052353458e"
+
+mini-css-extract-plugin@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz#ff3bf08bee96e618e177c16ca6131bfecef707f9"
+  dependencies:
+    loader-utils "^1.1.0"
+    webpack-sources "^1.1.0"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+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"
+
+"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"
+
+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"
+
+minimist@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"
+
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+
+mississippi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^2.0.1"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
+mixin-deep@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.0.tgz#47a8732ba97799457c8c1eca28f95132d7e8150a"
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
+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"
+
+mkdirp@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12"
+  dependencies:
+    minimist "0.0.8"
+
+mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+moment@*:
+  version "2.19.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.1.tgz#56da1a2d1cbf01d38b7e1afc31c10bcfa1929167"
+
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+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"
+
+multicast-dns-service-types@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+
+multicast-dns@^6.0.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.1.1.tgz#6e7de86a570872ab17058adea7160bbeca814dde"
+  dependencies:
+    dns-packet "^1.0.1"
+    thunky "^0.1.0"
+
+multimatch@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-2.1.0.tgz#9c7906a22fb4c02919e2f5f75161b4cdbd4b2a2b"
+  dependencies:
+    array-differ "^1.0.0"
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    minimatch "^3.0.0"
+
+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.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+
+nan@^2.3.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
+
+nanomatch@^1.2.5:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.7.tgz#53cd4aa109ff68b7f869591fdc9d10daeeea3e79"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    is-odd "^1.0.0"
+    kind-of "^5.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+nanomatch@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.9.tgz#879f7150cb2dab7a471259066c104eee6e0fa7c2"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-odd "^2.0.0"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+ncname@1.0.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ncname/-/ncname-1.0.0.tgz#5b57ad18b1ca092864ef62b0b1ed8194f383b71c"
+  dependencies:
+    xml-char-classes "^1.0.0"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+neo-async@^2.5.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.1.tgz#acb909e327b1e87ec9ef15f41b8a269512ad41ee"
+
+nice-try@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"
+
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  dependencies:
+    lower-case "^1.1.1"
+
+node-dir@0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.8.tgz#55fb8deb699070707fb67f91a460f0448294c77d"
+
+node-forge@0.6.33:
+  version "0.6.33"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
+
+node-gyp@^3.3.1:
+  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"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3 || 4"
+    osenv "0"
+    request "2"
+    rimraf "2"
+    semver "~5.3.0"
+    tar "^2.0.0"
+    which "1"
+
+node-libs-browser@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.0.0.tgz#a3a59ec97024985b46e958379646f96c4b616646"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.36:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
+  dependencies:
+    hawk "3.1.3"
+    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-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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.8.3:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.9.0.tgz#d1b8aa855d98ed684d6848db929a20771cc2ae52"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    lodash.mergewith "^4.6.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.10.0"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "~2.79.0"
+    sass-graph "^2.2.4"
+    stdout-stream "^1.4.0"
+    "true-case-path" "^1.0.2"
+
+nomnom@^1.8.1:
+  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.x, nopt@3.x:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
+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"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, "normalize-package-data@~1.0.1 || ^2.0.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  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.0, normalize-path@^2.0.1, normalize-path@^2.1.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"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+
+normalize-url@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-2.0.1.tgz#835a9da1551fa26f70e92329069a23aa6574d7e6"
+  dependencies:
+    prepend-http "^2.0.0"
+    query-string "^5.0.1"
+    sort-keys "^2.0.0"
+
+"npm-package-arg@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-6.1.0.tgz#15ae1e2758a5027efb4c250554b85a737db7fcc1"
+  dependencies:
+    hosted-git-info "^2.6.0"
+    osenv "^0.1.5"
+    semver "^5.5.0"
+    validate-npm-package-name "^3.0.0"
+
+npm-registry-client@^8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/npm-registry-client/-/npm-registry-client-8.5.1.tgz#8115809c0a4b40938b8a109b8ea74d26c6f5d7f1"
+  dependencies:
+    concat-stream "^1.5.2"
+    graceful-fs "^4.1.6"
+    normalize-package-data "~1.0.1 || ^2.0.0"
+    npm-package-arg "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
+    once "^1.3.3"
+    request "^2.74.0"
+    retry "^0.10.0"
+    safe-buffer "^5.1.1"
+    semver "2 >=2.2.1 || 3.x || 4 || 5"
+    slide "^1.1.3"
+    ssri "^5.2.4"
+  optionalDependencies:
+    npmlog "2 || ^3.1.0 || ^4.0.0"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+"npmlog@0 || 1 || 2 || 3 || 4", "npmlog@2 || ^3.1.0 || ^4.0.0", npmlog@^4.0.0, npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+nth-check@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+  dependencies:
+    boolbase "~1.0.0"
+
+null-check@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/null-check/-/null-check-1.0.0.tgz#977dffd7176012b9ec30d2a39db5cf72a0439edd"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+
+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"
+
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-keys@^1.0.8:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+object-path@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.9.2.tgz#0fd9a74fc5fad1ae3968b586bda5c632bd6c05a5"
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  dependencies:
+    isobject "^3.0.0"
+
+object.getownpropertydescriptors@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.1"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  dependencies:
+    isobject "^3.0.1"
+
+obuf@^1.0.0, obuf@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+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.x, once@^1.3.0, once@^1.3.1, 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"
+
+onetime@^1.0.0:
+  version "1.1.0"
+  resolved "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  dependencies:
+    mimic-fn "^1.0.0"
+
+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"
+
+openurl@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.1.tgz#3875b4b0ef7a52c156f0db41d4609dbb0f94b387"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+opn@^5.1.0, opn@~5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
+  dependencies:
+    is-wsl "^1.1.0"
+
+optimist@0.6.x, optimist@^0.6.1, optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+optionator@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
+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"
+  dependencies:
+    url-parse "1.0.x"
+
+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.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-locale@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  dependencies:
+    execa "^0.7.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@0, osenv@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+osenv@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+p-cancelable@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.3.0.tgz#b9e123800bcebb7ac13a479be195b507b98d30fa"
+
+p-cancelable@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.4.1.tgz#35f363d67d52081c8d9585e37bcceb7e0bbcb2a0"
+
+p-each-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
+  dependencies:
+    p-reduce "^1.0.0"
+
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
+p-is-promise@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
+
+p-lazy@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-lazy/-/p-lazy-1.0.0.tgz#ec53c802f2ee3ac28f166cc82d0b2b02de27a835"
+
+p-limit@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
+  dependencies:
+    p-try "^1.0.0"
+
+p-limit@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  dependencies:
+    p-limit "^1.1.0"
+
+p-map@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+
+p-reduce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+
+p-timeout@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-1.2.1.tgz#5eb3b353b7fce99f101a1038880bb054ebbea386"
+  dependencies:
+    p-finally "^1.0.0"
+
+p-timeout@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-2.0.1.tgz#d8dd1979595d2dc0139e1fe46b8b646cb3cdf038"
+  dependencies:
+    p-finally "^1.0.0"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+pako@~1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
+
+parallel-transform@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  dependencies:
+    cyclist "~0.2.2"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
+param-case@2.1.x:
+  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.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"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.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"
+
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+
+parse5@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
+
+parsejson@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.3.tgz#ab7e3759f209ece99437973f7d0f1f64ae0e64ab"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseqs@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.1, parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+
+path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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@^2.0.0, path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  dependencies:
+    pify "^3.0.0"
+
+pbkdf2@^3.0.3:
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  dependencies:
+    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"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+phantomjs-prebuilt@^2.1.7:
+  version "2.1.15"
+  resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.15.tgz#20f86e82d3349c505917527745b7a411e08b3903"
+  dependencies:
+    es6-promise "~4.0.3"
+    extract-zip "~1.6.5"
+    fs-extra "~1.0.0"
+    hasha "~2.2.0"
+    kew "~0.7.0"
+    progress "~1.1.8"
+    request "~2.81.0"
+    request-progress "~2.0.1"
+    which "~1.2.10"
+
+pify@^2.0.0, pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  dependencies:
+    find-up "^2.1.0"
+
+portfinder@0.4.x:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-0.4.0.tgz#a3ffadffafe4fb98e0601a85eda27c27ce84ca1e"
+  dependencies:
+    async "0.9.0"
+    mkdirp "0.5.x"
+
+portfinder@^1.0.13, portfinder@^1.0.9:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
+portscanner@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/portscanner/-/portscanner-2.1.1.tgz#eabb409e4de24950f5a2a516d35ae769343fbb96"
+  dependencies:
+    async "1.5.2"
+    is-number-like "^1.0.3"
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+
+postcss-import@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.1.0.tgz#55c9362c9192994ec68865d224419df1db2981f0"
+  dependencies:
+    postcss "^6.0.1"
+    postcss-value-parser "^3.2.3"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+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:
+    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@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.4.tgz#f44a6390e03c84108b2b2063182d1a1011b2ce76"
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^6.0.0"
+    postcss-load-config "^1.2.0"
+    schema-utils "^0.4.0"
+
+postcss-url@^7.3.1:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-7.3.2.tgz#5fea273807fb84b38c461c3c9a9e8abd235f7120"
+  dependencies:
+    mime "^1.4.1"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.0"
+    postcss "^6.0.1"
+    xxhashjs "^0.2.1"
+
+postcss-value-parser@^3.2.3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
+postcss@^6.0.0:
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146"
+  dependencies:
+    chalk "^2.3.0"
+    source-map "^0.6.1"
+    supports-color "^5.1.0"
+
+postcss@^6.0.1:
+  version "6.0.13"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.13.tgz#b9ecab4ee00c89db3ec931145bd9590bbf3f125f"
+  dependencies:
+    chalk "^2.1.0"
+    source-map "^0.6.1"
+    supports-color "^4.4.0"
+
+postcss@^6.0.19, postcss@^6.0.20:
+  version "6.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.21.tgz#8265662694eddf9e9a5960db6da33c39e4cd069d"
+  dependencies:
+    chalk "^2.3.2"
+    source-map "^0.6.1"
+    supports-color "^5.3.0"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
+prepend-http@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+prepend-http@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+prettier@^1.5.3:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.12.1.tgz#c1ad20e803e7749faf905a409d2367e06bbe7325"
+
+pretty-bytes@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
+
+pretty-error@^2.0.2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
+  dependencies:
+    renderkid "^2.0.1"
+    utila "~0.4"
+
+private@^0.1.6, private@^0.1.8, private@~0.1.5:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+
+process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+process@^0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+progress@~1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  dependencies:
+    asap "~2.0.3"
+
+protractor@~5.3.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/protractor/-/protractor-5.3.1.tgz#b8b8ac4ad2278bb7a461b99a34d79532095f14b8"
+  dependencies:
+    "@types/node" "^6.0.46"
+    "@types/q" "^0.0.32"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "^1.0.0"
+    chalk "^1.1.3"
+    glob "^7.0.3"
+    jasmine "2.8.0"
+    jasminewd2 "^2.1.0"
+    optimist "~0.6.0"
+    q "1.4.1"
+    saucelabs "~1.3.0"
+    selenium-webdriver "3.6.0"
+    source-map-support "~0.4.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
+
+proxy-addr@~2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.5.2"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
+
+pump@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.2.tgz#3b3ee6512f94f0e575538c17995f9f16990a5d51"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.3.5.tgz#1b671c619940abcaeac0ad0e3a3c164be760993b"
+  dependencies:
+    duplexify "^3.1.2"
+    inherits "^2.0.1"
+    pump "^1.0.0"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+punycode@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
+
+q@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+q@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qjobs@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
+
+qs@0.4.x:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-0.4.2.tgz#3cac4c861e371a8c9c4770ac23cda8de639b8e5f"
+
+qs@6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.1.tgz#ce03c5ff0935bc1d9d69a9f14cbd18e568d67625"
+
+qs@6.5.1, "qs@>= 0.4.0", qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+qs@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404"
+
+qs@~6.3.0:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+query-string@^5.0.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb"
+  dependencies:
+    decode-uri-component "^0.2.0"
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
+querystring-es3@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+
+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.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+randombytes@^2.0.0, randombytes@^2.0.1:
+  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"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+raw-body@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89"
+  dependencies:
+    bytes "3.0.0"
+    http-errors "1.6.2"
+    iconv-lite "0.4.19"
+    unpipe "1.0.0"
+
+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.1.7:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  dependencies:
+    pify "^2.3.0"
+
+read-chunk@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-2.1.0.tgz#6a04c0928005ed9d42e1a6ac5600e19cbc7ff655"
+  dependencies:
+    pify "^3.0.0"
+    safe-buffer "^5.1.1"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^3.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.6, readable-stream@^2.2.9:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@1.0, readable-stream@~1.0.2:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readable-stream@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+recast@^0.12.5:
+  version "0.12.9"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.12.9.tgz#e8e52bdb9691af462ccbd7c15d5a5113647a15f1"
+  dependencies:
+    ast-types "0.10.1"
+    core-js "^2.4.1"
+    esprima "~4.0.0"
+    private "~0.1.5"
+    source-map "~0.6.1"
+
+recast@^0.14.1:
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.14.7.tgz#4f1497c2b5826d42a66e8e3c9d80c512983ff61d"
+  dependencies:
+    ast-types "0.11.3"
+    esprima "~4.0.0"
+    private "~0.1.5"
+    source-map "~0.6.1"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  dependencies:
+    resolve "^1.1.6"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+reflect-metadata@^0.1.2:
+  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.3"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  dependencies:
+    babel-runtime "^6.18.0"
+    babel-types "^6.19.0"
+    private "^0.1.6"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+regex-not@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.0.tgz#42f83e39771622df826b02af176525d6a5f157f9"
+  dependencies:
+    extend-shallow "^2.0.1"
+
+regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  dependencies:
+    jsesc "~0.5.0"
+
+relateurl@0.2.x:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+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"
+    htmlparser2 "~3.3.0"
+    strip-ansi "^3.0.0"
+    utila "~0.3"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-0.2.2.tgz#c7a8d3236068362059a7e4651fc6884e8b1fb4ae"
+
+repeat-string@^1.5.2, repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+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"
+
+replace-ext@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
+
+replace-ext@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
+
+request-progress@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-2.0.1.tgz#5d36bb57961c673aa5b788dbc8141fdf23b44e08"
+  dependencies:
+    throttleit "^1.0.0"
+
+request@2, request@^2.78.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
+request@2.81.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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+request@^2.74.0, request@^2.83.0:
+  version "2.85.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.85.0.tgz#5a03615a47c61420b3eb99b7dba204f83603e1fa"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
+request@~2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.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"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+    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"
+
+requires-port@1.0.x, requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve-cwd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  dependencies:
+    resolve-from "^3.0.0"
+
+resolve-dir@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
+  dependencies:
+    expand-tilde "^2.0.0"
+    global-modules "^1.0.0"
+
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+
+resolve@1.1.7, resolve@1.1.x:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+  dependencies:
+    path-parse "^1.0.5"
+
+resolve@^1.3.2, resolve@^1.5.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
+  dependencies:
+    path-parse "^1.0.5"
+
+resp-modifier@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/resp-modifier/-/resp-modifier-6.0.2.tgz#b124de5c4fbafcba541f48ffa73970f4aa456b4f"
+  dependencies:
+    debug "^2.2.0"
+    minimatch "^3.0.2"
+
+responselike@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
+  dependencies:
+    lowercase-keys "^1.0.0"
+
+restore-cursor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  dependencies:
+    exit-hook "^1.0.0"
+    onetime "^1.0.0"
+
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  dependencies:
+    onetime "^2.0.0"
+    signal-exit "^3.0.2"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+
+retry@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
+
+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.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1, rimraf@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+rimraf@~2.2.6:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
+
+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.2.5"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.2.5.tgz#924421278a6f879fd976b2ef1a28391b1e4f2a6e"
+  dependencies:
+    acorn "^5.1.2"
+    estree-walker "^0.5.0"
+    magic-string "^0.22.4"
+    resolve "^1.4.0"
+    rollup-pluginutils "^2.0.1"
+
+rollup-plugin-node-resolve@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-2.0.0.tgz#07e0ae94ac002a3ea36e8f33ca121d9f836b1309"
+  dependencies:
+    browser-resolve "^1.11.0"
+    builtin-modules "^1.1.0"
+    resolve "^1.1.6"
+
+rollup-plugin-uglify@^1.0.1:
+  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"
+
+rollup-pluginutils@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.0.1.tgz#7ec95b3573f6543a46a6461bd9a7c544525d0fc0"
+  dependencies:
+    estree-walker "^0.3.0"
+    micromatch "^2.3.11"
+
+rollup@^0.41.6:
+  version "0.41.6"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.41.6.tgz#e0d05497877a398c104d816d2733a718a7a94e2a"
+  dependencies:
+    source-map-support "^0.4.0"
+
+run-async@^2.0.0, 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"
+
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  dependencies:
+    aproba "^1.1.1"
+
+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:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
+
+rxjs@^5.4.2, rxjs@^5.5.2:
+  version "5.5.10"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.10.tgz#fde02d7a614f6c8683d0d1957827f492e09db045"
+  dependencies:
+    symbol-observable "1.0.1"
+
+rxjs@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.1.0.tgz#833447de4e4f6427b9cec3e5eb9f56415cd28315"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  dependencies:
+    ret "~0.1.10"
+
+safer-buffer@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+sass-graph@^2.2.4:
+  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"
+    scss-tokenizer "^0.2.3"
+    yargs "^7.0.0"
+
+sass-loader@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.0.1.tgz#fd937259ccba3a9cfe0d5f8a98746d48adfcc261"
+  dependencies:
+    clone-deep "^2.0.1"
+    loader-utils "^1.0.1"
+    lodash.tail "^4.1.1"
+    neo-async "^2.5.0"
+    pify "^3.0.0"
+
+saucelabs@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.3.0.tgz#d240e8009df7fa87306ec4578a69ba3b5c424fee"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+
+sax@0.5.x:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
+
+sax@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
+
+sax@>=0.6.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+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"
+
+schema-utils@^0.4.0, schema-utils@^0.4.3, schema-utils@^0.4.4, schema-utils@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
+schema-utils@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e"
+  dependencies:
+    ajv "^5.0.0"
+    ajv-keywords "^2.1.0"
+
+scoped-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
+
+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@3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-3.6.0.tgz#2ba87a1662c020b8988c981ae62cb2a01298eafc"
+  dependencies:
+    jszip "^3.1.3"
+    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:
+    adm-zip "0.4.4"
+    rimraf "^2.2.8"
+    tmp "0.0.24"
+    ws "^1.0.1"
+    xml2js "0.4.4"
+
+selfsigned@^1.9.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
+  dependencies:
+    node-forge "0.6.33"
+
+semver-intersect@^1.1.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/semver-intersect/-/semver-intersect-1.3.1.tgz#8fa84a9e1028bd239e4530d1a3e181e698d884ba"
+  dependencies:
+    semver "^5.0.0"
+
+"semver@2 >=2.2.1 || 3.x || 4 || 5", semver@^5.0.0, semver@^5.0.1, semver@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
+"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+semver@~4.3.3:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
+
+semver@~5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
+
+semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+send@0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.2.tgz#f91fab4403bcf87e716f70ceb5db2f578bdc17d6"
+  dependencies:
+    debug "2.6.4"
+    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 "1.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.1"
+
+send@0.16.1:
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3"
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.1"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.4.1"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.1"
+
+serialize-javascript@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.4.0.tgz#7c958514db6ac2443a8abc062dc9f7886a7f6005"
+
+serve-index@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.8.0.tgz#7c5d96c13fb131101f93c1c5774f8516a1e78d3b"
+  dependencies:
+    accepts "~1.3.3"
+    batch "0.5.3"
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    http-errors "~1.5.0"
+    mime-types "~2.1.11"
+    parseurl "~1.3.1"
+
+serve-index@^1.7.2:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  dependencies:
+    accepts "~1.3.4"
+    batch "0.6.1"
+    debug "2.6.9"
+    escape-html "~1.0.3"
+    http-errors "~1.6.2"
+    mime-types "~2.1.17"
+    parseurl "~1.3.2"
+
+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.2"
+
+serve-static@1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.1.tgz#4c57d53404a761d8f2e7c1e8a18a47dbf278a719"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.2"
+    send "0.16.1"
+
+server-destroy@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-getter@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.0.tgz#d769c182c9d5a51f409145f2fba82e5e86e80376"
+  dependencies:
+    to-object-path "^0.3.0"
+
+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"
+
+set-value@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.1"
+    to-object-path "^0.3.0"
+
+set-value@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+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"
+
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.9"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+shallow-clone@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-1.0.0.tgz#4480cd06e882ef68b2ad88a3ea54832e2c48b571"
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^5.0.0"
+    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.8.0:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.1.tgz#729e038c413a2254c4078b95ed46e0397154a9f1"
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+signal-exit@^3.0.0, signal-exit@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+silent-error@^1.0.0, silent-error@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/silent-error/-/silent-error-1.1.0.tgz#2209706f1c850a9f1d10d0d840918b46f26e1bc9"
+  dependencies:
+    debug "^2.2.0"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+slice-ansi@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+
+slide@^1.1.3, slide@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.1.tgz#e12b5487faded3e3dea0ac91e9400bf75b401370"
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^2.0.0"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
+socket.io-adapter@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-0.5.0.tgz#cb6d4bb8bec81e1078b99677f9ced0046066bb8b"
+  dependencies:
+    debug "2.3.3"
+    socket.io-parser "2.3.1"
+
+socket.io-client@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-1.6.0.tgz#5b668f4f771304dfeed179064708386fa6717853"
+  dependencies:
+    backo2 "1.0.2"
+    component-bind "1.0.0"
+    component-emitter "1.2.1"
+    debug "2.3.3"
+    engine.io-client "1.8.0"
+    has-binary "0.1.7"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseuri "0.0.5"
+    socket.io-parser "2.3.1"
+    to-array "0.1.4"
+
+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.3"
+    has-binary "0.1.7"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseuri "0.0.5"
+    socket.io-parser "2.3.1"
+    to-array "0.1.4"
+
+socket.io-parser@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-2.3.1.tgz#dd532025103ce429697326befd64005fcfe5b4a0"
+  dependencies:
+    component-emitter "1.1.2"
+    debug "2.2.0"
+    isarray "0.0.1"
+    json3 "3.3.2"
+
+socket.io@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-1.6.0.tgz#3e40d932637e6bd923981b25caf7c53e83b6e2e1"
+  dependencies:
+    debug "2.3.3"
+    engine.io "1.8.0"
+    has-binary "0.1.7"
+    object-assign "4.1.0"
+    socket.io-adapter "0.5.0"
+    socket.io-client "1.6.0"
+    socket.io-parser "2.3.1"
+
+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.3"
+    has-binary "0.1.7"
+    object-assign "4.1.0"
+    socket.io-adapter "0.5.0"
+    socket.io-client "1.7.3"
+    socket.io-parser "2.3.1"
+
+sockjs-client@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
+  dependencies:
+    debug "^2.6.6"
+    eventsource "0.1.6"
+    faye-websocket "~0.11.0"
+    inherits "^2.0.1"
+    json3 "^3.3.2"
+    url-parse "^1.1.8"
+
+sockjs@0.3.19:
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+  dependencies:
+    faye-websocket "^0.10.0"
+    uuid "^3.0.1"
+
+sort-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+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-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-explorer@^1.3.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/source-map-explorer/-/source-map-explorer-1.5.0.tgz#654e2ba0db158fecfc99b9cefdf891b755b767d1"
+  dependencies:
+    btoa "^1.1.2"
+    convert-source-map "^1.1.1"
+    docopt "^0.6.2"
+    glob "^7.1.2"
+    open "0.0.5"
+    source-map "^0.5.1"
+    temp "^0.8.3"
+    underscore "^1.8.3"
+
+source-map-resolve@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.1.tgz#7ad0f593f2281598e854df80f19aae4b92d7a11a"
+  dependencies:
+    atob "^2.0.0"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@^0.4.0, source-map-support@^0.4.1, source-map-support@^0.4.15, source-map-support@~0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map-support@^0.5.0, source-map-support@^0.5.3:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.4.tgz#54456efa89caa9270af7cd624cc2f123e51fbae8"
+  dependencies:
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+
+source-map@0.1.x:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@0.5.x, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+source-map@^0.4.2, source-map@^0.4.4, source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+source-map@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
+  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"
+
+spdx-correct@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+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.18:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.20.tgz#735e72054c486b2354fe89e702256004a39ace4d"
+  dependencies:
+    debug "^2.6.8"
+    detect-node "^2.0.3"
+    hpack.js "^2.1.6"
+    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.7"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
+  dependencies:
+    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.18"
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  dependencies:
+    extend-shallow "^3.0.0"
+
+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.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+ssri@^5.2.4:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.3.0.tgz#ba3872c9c6d33a0704a7d71ff045e5ec48999d06"
+  dependencies:
+    safe-buffer "^5.1.1"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+stats-webpack-plugin@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/stats-webpack-plugin/-/stats-webpack-plugin-0.6.2.tgz#2c5949b531e07f87a88e6ea4dcfac53aa8c75a2b"
+  dependencies:
+    lodash "^4.17.4"
+
+"statuses@>= 1.3.1 < 2":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+statuses@~1.3.0, statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+stdout-stream@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"
+  dependencies:
+    readable-stream "^2.0.1"
+
+stream-browserify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-each@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.2.tgz#8e8c463f91da8991778765873fe4d960d8f616bd"
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
+stream-http@^2.3.1:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.2.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-shift@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+
+stream-throttle@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/stream-throttle/-/stream-throttle-0.1.3.tgz#add57c8d7cc73a81630d31cd55d3961cfafba9c3"
+  dependencies:
+    commander "^2.2.0"
+    limiter "^1.0.5"
+
+stream-to-observable@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.2.0.tgz#59d6ea393d87c2c0ddac10aa0d561bc6ba6f0e10"
+  dependencies:
+    any-observable "^0.2.0"
+
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+
+string-template@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
+
+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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+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.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4, stringstream@~0.0.5:
+  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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.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-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-stream/-/strip-bom-stream-2.0.0.tgz#f87db5ef2613f6968aa545abfe1ec728b6a829ca"
+  dependencies:
+    first-chunk-stream "^2.0.0"
+    strip-bom "^2.0.0"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  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-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.0.1"
+
+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"
+
+style-loader@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.21.0.tgz#68c52e5eb2afc9ca92b6274be277ee59aea3a852"
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^0.4.5"
+
+stylus-loader@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.2.tgz#27a706420b05a38e038e7cacb153578d450513c6"
+  dependencies:
+    loader-utils "^1.0.2"
+    lodash.clonedeep "^4.5.0"
+    when "~3.6.x"
+
+stylus@^0.54.5:
+  version "0.54.5"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
+  dependencies:
+    css-parse "1.7.x"
+    debug "*"
+    glob "7.0.x"
+    mkdirp "0.5.x"
+    sax "0.5.x"
+    source-map "0.1.x"
+
+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"
+
+supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^4.0.0, supports-color@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+  dependencies:
+    has-flag "^2.0.0"
+
+supports-color@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.1.0.tgz#058a021d1b619f7ddf3980d712ea3590ce7de3d5"
+  dependencies:
+    has-flag "^2.0.0"
+
+supports-color@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
+  dependencies:
+    has-flag "^3.0.0"
+
+symbol-observable@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+
+symbol-observable@^0.2.2:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40"
+
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+
+systemjs@0.19.39:
+  version "0.19.39"
+  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-0.19.39.tgz#e513e6f91a25a37b8b607c51c7989ee0d67b9356"
+  dependencies:
+    when "^3.7.5"
+
+tapable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.0.0.tgz#cbb639d9002eed9c6b5975eb20598d7936f1f9f2"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  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"
+
+tar@^2.0.0, tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+temp@^0.8.1, temp@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.3.tgz#e0c6bc4d26b903124410e4fed81103014dfc1f59"
+  dependencies:
+    os-tmpdir "^1.0.0"
+    rimraf "~2.2.6"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+
+textextensions@2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.2.0.tgz#38ac676151285b658654581987a0ce1a4490d286"
+
+tfunk@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-3.1.0.tgz#38e4414fc64977d87afdaa72facb6d29f82f7b5b"
+  dependencies:
+    chalk "^1.1.1"
+    object-path "^0.9.0"
+
+throttleit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
+
+through2@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  dependencies:
+    readable-stream "^2.1.5"
+    xtend "~4.0.1"
+
+through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+thunky@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-0.1.0.tgz#bf30146824e2b6e67b0f2d7a4ac8beb26908684e"
+
+timed-out@^4.0.0, timed-out@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
+
+timers-browserify@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.4.tgz#96ca53f4b794a5e7c0e1bd7cc88a372298fa01e6"
+  dependencies:
+    setimmediate "^1.0.4"
+
+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:
+  version "0.0.31"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
+  dependencies:
+    os-tmpdir "~1.0.1"
+
+tmp@0.0.x, tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  dependencies:
+    os-tmpdir "~1.0.2"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.1.tgz#15358bee4a2c83bd76377ba1dc049d0f18837aae"
+  dependencies:
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    regex-not "^1.0.0"
+
+to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+toposort@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"
+
+tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+tree-kill@^1.0.0, tree-kill@^1.1.0, tree-kill@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+"true-case-path@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
+  dependencies:
+    glob "^6.0.4"
+
+ts-loader@^4.2.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-4.4.1.tgz#c93a46eea430ebce1f790dfe438caefb8670d365"
+  dependencies:
+    chalk "^2.3.0"
+    enhanced-resolve "^4.0.0"
+    loader-utils "^1.0.2"
+    micromatch "^3.1.4"
+    semver "^5.0.1"
+
+ts-node@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-5.0.1.tgz#78e5d1cb3f704de1b641e43b76be2d4094f06f81"
+  dependencies:
+    arrify "^1.0.0"
+    chalk "^2.3.0"
+    diff "^3.1.0"
+    make-error "^1.1.1"
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map-support "^0.5.3"
+    yn "^2.0.0"
+
+tsickle@^0.27.2:
+  version "0.27.5"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.27.5.tgz#41e1a41a5acf971cbb2b0558a9590779234d591f"
+  dependencies:
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
+tslint@^5.9.1:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.9.1.tgz#1255f87a3ff57eb0b0e1f0e610a8b4748046c9ae"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    builtin-modules "^1.1.1"
+    chalk "^2.3.0"
+    commander "^2.12.1"
+    diff "^3.2.0"
+    glob "^7.1.1"
+    js-yaml "^3.7.0"
+    minimatch "^3.0.4"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.8.0"
+    tsutils "^2.12.1"
+
+tsutils@^2.12.1:
+  version "2.26.1"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.26.1.tgz#9e4a0cb9ff173863f34c22a961969081270d1878"
+  dependencies:
+    tslib "^1.8.1"
+
+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.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"
+
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
+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-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  dependencies:
+    prelude-ls "~1.1.2"
+
+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.15"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+typescript@2.7.2, "typescript@>=2.6.2 <2.8", typescript@~2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
+
+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-es@^3.3.4:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.8.tgz#f2c68e6cff0d0f9dc9577e4da207151c2e753b7e"
+  dependencies:
+    commander "~2.13.0"
+    source-map "~0.6.1"
+
+uglify-js@3.1.x:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.5.tgz#4c1a6d53b2fe77e4710dd94631853effd3ff5143"
+  dependencies:
+    commander "~2.11.0"
+    source-map "~0.6.1"
+
+uglify-js@^2.6, uglify-js@^2.6.1:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
+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"
+
+uglifyjs-webpack-plugin@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.4.tgz#5eec941b2e9b8538be0a20fc6eda25b14c7c1043"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    schema-utils "^0.4.5"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    uglify-es "^3.3.4"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
+uglifyjs-webpack-plugin@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.5.tgz#2ef8387c8f1a903ec5e44fa36f9f3cbdcea67641"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    schema-utils "^0.4.5"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    uglify-es "^3.3.4"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+underscore@1.7.x:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209"
+
+underscore@^1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
+
+underscore@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
+
+union-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^0.4.3"
+
+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"
+
+unique-filename@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.0.tgz#d05f2fe4032560871f30e93cbe735eea201514f3"
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.0.tgz#db6676e7c7cc0629878ff196097c78855ae9f4ab"
+  dependencies:
+    imurmurhash "^0.1.4"
+
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+untildify@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-3.0.2.tgz#7f1f302055b3fea0f3e81dc78eb36766cb65e3f1"
+
+upath@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.0.4.tgz#ee2321ba0a786c50973db043a50b7bcba822361d"
+
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
+uri-js@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-3.0.2.tgz#f90b858507f81dea4dcfbb3c4c3dbfa2b557faaa"
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+
+url-join@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-1.1.0.tgz#741c6c2f4596c4830d6718460920d0c92202dc78"
+
+url-join@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.0.tgz#4d3340e807d3773bda9991f8305acdcc2a665d2a"
+
+url-loader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.0.1.tgz#61bc53f1f184d7343da2728a1289ef8722ea45ee"
+  dependencies:
+    loader-utils "^1.1.0"
+    mime "^2.0.3"
+    schema-utils "^0.4.3"
+
+url-parse-lax@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
+  dependencies:
+    prepend-http "^1.0.1"
+
+url-parse-lax@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"
+  dependencies:
+    prepend-http "^2.0.0"
+
+url-parse@1.0.x:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
+  dependencies:
+    querystringify "0.0.x"
+    requires-port "1.0.x"
+
+url-parse@^1.1.8:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.9.tgz#c67f1d775d51f0a18911dd7b3ffad27bb9e5bd19"
+  dependencies:
+    querystringify "~1.0.0"
+    requires-port "1.0.x"
+
+url-to-options@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
+
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+use@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/use/-/use-2.0.2.tgz#ae28a0d72f93bf22422a18a2e379993112dec8e8"
+  dependencies:
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    lazy-cache "^2.0.2"
+
+useragent@^2.1.12:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.2.1.tgz#cf593ef4f2d175875e8bb658ea92e18a4fd06d8e"
+  dependencies:
+    lru-cache "2.2.x"
+    tmp "0.0.x"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util.promisify@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  dependencies:
+    define-properties "^1.1.2"
+    object.getownpropertydescriptors "^2.0.3"
+
+util@0.10.3, util@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+utila@~0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+
+uuid@^3.0.0, uuid@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+uuid@^3.0.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
+
+v8-compile-cache@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-1.1.2.tgz#8d32e4f16974654657e676e0e467a348e89b0dc4"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+validate-npm-package-name@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
+  dependencies:
+    builtins "^1.0.3"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vinyl-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vinyl-file/-/vinyl-file-2.0.0.tgz#a7ebf5ffbefda1b7d18d140fcb07b223efb6751a"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.3.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+    strip-bom-stream "^2.0.0"
+    vinyl "^1.1.0"
+
+vinyl@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-1.2.0.tgz#5c88036cf565e5df05558bfc911f8656df218884"
+  dependencies:
+    clone "^1.0.0"
+    clone-stats "^0.0.1"
+    replace-ext "0.0.1"
+
+vinyl@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.1.0.tgz#021f9c2cf951d6b939943c89eb5ee5add4fd924c"
+  dependencies:
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
+vlq@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
+
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+void-elements@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+
+watchpack@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.5.0.tgz#231e783af830a22f8966f65c4c4bacc814072eed"
+  dependencies:
+    chokidar "^2.0.2"
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.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"
+
+web-animations-js@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/web-animations-js/-/web-animations-js-2.3.1.tgz#3a6d9bc15196377a90f8e2803fa5262165b04510"
+
+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"
+    del "^2.2.0"
+    glob "^7.0.3"
+    ini "^1.3.4"
+    minimist "^1.2.0"
+    q "^1.4.1"
+    request "^2.78.0"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+    xml2js "^0.4.17"
+
+webpack-addons@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/webpack-addons/-/webpack-addons-1.1.5.tgz#2b178dfe873fb6e75e40a819fa5c26e4a9bc837a"
+  dependencies:
+    jscodeshift "^0.4.0"
+
+webpack-cli@^2.0.14:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-2.1.2.tgz#9c9a4b90584f7b8acaf591238ef0667e04c817f6"
+  dependencies:
+    chalk "^2.3.2"
+    cross-spawn "^6.0.5"
+    diff "^3.5.0"
+    enhanced-resolve "^4.0.0"
+    envinfo "^4.4.2"
+    glob-all "^3.1.0"
+    global-modules "^1.0.0"
+    got "^8.2.0"
+    import-local "^1.0.0"
+    inquirer "^5.1.0"
+    interpret "^1.0.4"
+    jscodeshift "^0.5.0"
+    listr "^0.13.0"
+    loader-utils "^1.1.0"
+    lodash "^4.17.5"
+    log-symbols "^2.2.0"
+    mkdirp "^0.5.1"
+    p-each-series "^1.0.0"
+    p-lazy "^1.0.0"
+    prettier "^1.5.3"
+    supports-color "^5.3.0"
+    v8-compile-cache "^1.1.2"
+    webpack-addons "^1.1.5"
+    yargs "^11.1.0"
+    yeoman-environment "^2.0.0"
+    yeoman-generator "^2.0.4"
+
+webpack-core@^0.6.8:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack-dev-middleware@3.1.3, webpack-dev-middleware@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.1.3.tgz#8b32aa43da9ae79368c1bf1183f2b6cf5e1f39ed"
+  dependencies:
+    loud-rejection "^1.6.0"
+    memory-fs "~0.4.1"
+    mime "^2.1.0"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    url-join "^4.0.0"
+    webpack-log "^1.0.1"
+
+webpack-dev-server@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.1.4.tgz#9a08d13c4addd1e3b6d8ace116e86715094ad5b4"
+  dependencies:
+    ansi-html "0.0.7"
+    array-includes "^3.0.3"
+    bonjour "^3.5.0"
+    chokidar "^2.0.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
+    del "^3.0.0"
+    express "^4.16.2"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.18.0"
+    import-local "^1.0.0"
+    internal-ip "1.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
+    serve-index "^1.7.2"
+    sockjs "0.3.19"
+    sockjs-client "1.1.4"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.0"
+    supports-color "^5.1.0"
+    webpack-dev-middleware "3.1.3"
+    webpack-log "^1.1.2"
+    yargs "11.0.0"
+
+webpack-log@^1.0.1, webpack-log@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
+  dependencies:
+    chalk "^2.1.0"
+    log-symbols "^2.1.0"
+    loglevelnext "^1.0.1"
+    uuid "^3.1.0"
+
+webpack-merge@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.2.tgz#5d372dddd3e1e5f8874f5bf5a8e929db09feb216"
+  dependencies:
+    lodash "^4.17.5"
+
+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-sources@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+webpack-subresource-integrity@^1.1.0-rc.4:
+  version "1.1.0-rc.4"
+  resolved "https://registry.yarnpkg.com/webpack-subresource-integrity/-/webpack-subresource-integrity-1.1.0-rc.4.tgz#c5c4e3d690f9d2f64a9550e07a8767f9796aa5d8"
+  dependencies:
+    webpack-core "^0.6.8"
+
+webpack@~4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.6.0.tgz#363eafa733710eb0ed28c512b2b9b9f5fb01e69b"
+  dependencies:
+    acorn "^5.0.0"
+    acorn-dynamic-import "^3.0.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+    chrome-trace-event "^0.1.1"
+    enhanced-resolve "^4.0.0"
+    eslint-scope "^3.7.1"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    micromatch "^3.1.8"
+    mkdirp "~0.5.0"
+    neo-async "^2.5.0"
+    node-libs-browser "^2.0.0"
+    schema-utils "^0.4.4"
+    tapable "^1.0.0"
+    uglifyjs-webpack-plugin "^1.2.4"
+    watchpack "^1.5.0"
+    webpack-sources "^1.0.1"
+
+websocket-driver@>=0.5.1:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
+  dependencies:
+    http-parser-js ">=0.4.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.2.tgz#0e18781de629a18308ce1481650f67ffa2693a5d"
+
+weinre@^2.0.0-pre-I0Z7U9OV:
+  version "2.0.0-pre-I0Z7U9OV"
+  resolved "https://registry.yarnpkg.com/weinre/-/weinre-2.0.0-pre-I0Z7U9OV.tgz#fef8aa223921f7b40bbbbd4c3ed4302f6fd0a813"
+  dependencies:
+    express "2.5.x"
+    nopt "3.0.x"
+    underscore "1.7.x"
+
+when@^3.7.5:
+  version "3.7.8"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"
+
+when@~3.6.x:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
+which@1, which@^1.1.1, which@^1.2.1, which@^1.2.14, which@^1.2.9:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  dependencies:
+    isexe "^2.0.0"
+
+which@~1.2.10:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
+  dependencies:
+    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"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+window-size@^0.1.2:
+  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"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@^1.0.0, wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+worker-farm@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.2.tgz#32b312e5dc3d5d45d79ef44acc2587491cd729ae"
+  dependencies:
+    errno "^0.1.4"
+    xtend "^4.0.1"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+write-file-atomic@^1.2.0:
+  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"
+
+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:
+  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"
+
+xhr2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.4.tgz#7f87658847716db5026323812f818cadab387a5f"
+
+xml-char-classes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
+
+xml2js@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.4.tgz#3111010003008ae19240eba17497b57c729c555d"
+  dependencies:
+    sax "0.6.x"
+    xmlbuilder ">=1.0.0"
+
+xml2js@^0.4.17:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"
+
+xmlhttprequest-ssl@1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d"
+
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+xxhashjs@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.2.tgz#8a6251567621a1c46a5ae204da0249c7f8caa9d8"
+  dependencies:
+    cuint "^0.2.2"
+
+y18n@^3.2.0, y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
+yargs-parser@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.0.0.tgz#c737c93de2567657750cb1f2c00be639fd19c994"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs-parser@^4.1.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-parser@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.0.0.tgz#c052931006c5eee74610e5fc0354bedfd08a201b"
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.1.1"
+    find-up "^2.1.0"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^9.0.2"
+
+yargs@3.29.0:
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.29.0.tgz#1aab9660eae79d8b8f675bcaeeab6ee34c2cf69c"
+  dependencies:
+    camelcase "^1.2.1"
+    cliui "^3.0.3"
+    decamelize "^1.0.0"
+    os-locale "^1.4.0"
+    window-size "^0.1.2"
+    y18n "^3.2.0"
+
+yargs@6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.4.0.tgz#816e1a866d5598ccf34e5596ddce22d92da490d4"
+  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"
+    window-size "^0.2.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.1.0"
+
+yargs@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.0.tgz#90b869934ed6e871115ea2ff58b03f4724ed2d77"
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.1.1"
+    find-up "^2.1.0"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^9.0.2"
+
+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@~1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-1.2.6.tgz#9c7b4a82fd5d595b2bf17ab6dcc43135432fe34b"
+  dependencies:
+    minimist "^0.1.0"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
+yauzl@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
+  dependencies:
+    fd-slicer "~1.0.1"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+yeoman-environment@^2.0.0, yeoman-environment@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/yeoman-environment/-/yeoman-environment-2.0.6.tgz#ae1b21d826b363f3d637f88a7fc9ea7414cb5377"
+  dependencies:
+    chalk "^2.1.0"
+    debug "^3.1.0"
+    diff "^3.3.1"
+    escape-string-regexp "^1.0.2"
+    globby "^6.1.0"
+    grouped-queue "^0.3.3"
+    inquirer "^3.3.0"
+    is-scoped "^1.0.0"
+    lodash "^4.17.4"
+    log-symbols "^2.1.0"
+    mem-fs "^1.1.0"
+    text-table "^0.2.0"
+    untildify "^3.0.2"
+
+yeoman-generator@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/yeoman-generator/-/yeoman-generator-2.0.5.tgz#57b0b3474701293cc9ec965288f3400b00887c81"
+  dependencies:
+    async "^2.6.0"
+    chalk "^2.3.0"
+    cli-table "^0.3.1"
+    cross-spawn "^6.0.5"
+    dargs "^5.1.0"
+    dateformat "^3.0.3"
+    debug "^3.1.0"
+    detect-conflict "^1.0.0"
+    error "^7.0.2"
+    find-up "^2.1.0"
+    github-username "^4.0.0"
+    istextorbinary "^2.2.1"
+    lodash "^4.17.10"
+    make-dir "^1.1.0"
+    mem-fs-editor "^4.0.0"
+    minimist "^1.2.0"
+    pretty-bytes "^4.0.2"
+    read-chunk "^2.1.0"
+    read-pkg-up "^3.0.0"
+    rimraf "^2.6.2"
+    run-async "^2.0.0"
+    shelljs "^0.8.0"
+    text-table "^0.2.0"
+    through2 "^2.0.0"
+    yeoman-environment "^2.0.5"
+
+yn@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"
+
+zone.js@^0.8.24:
+  version "0.8.26"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.26.tgz#7bdd72f7668c5a7ad6b118148b4ea39c59d08d2d"
diff --git a/aio/tools/examples/test.js b/aio/tools/examples/test.js
new file mode 100644
index 000000000000..4620f9204fb9
--- /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/firebase-test-utils/FirebaseGlob.spec.ts b/aio/tools/firebase-test-utils/FirebaseGlob.spec.ts
new file mode 100644
index 000000000000..447ec98c9247
--- /dev/null
+++ b/aio/tools/firebase-test-utils/FirebaseGlob.spec.ts
@@ -0,0 +1,189 @@
+import { FirebaseGlob } from './FirebaseGlob';
+describe('FirebaseGlob', () => {
+
+  describe('test', () => {
+    it('should match * parts', () => {
+      testGlob('asdf/*.jpg',
+        ['asdf/.jpg', 'asdf/asdf.jpg', 'asdf/asdf_asdf.jpg'],
+        ['asdf/asdf/asdf.jpg', 'xxxasdf/asdf.jpgxxx']);
+    });
+
+    it('should match ** parts', () => {
+      testGlob('asdf/**.jpg', // treated like two consecutive single `*`s
+        ['asdf/.jpg', 'asdf/asdf.jpg', 'asdf/asdf_asdf.jpg'],
+        ['asdf/a/.jpg', 'asdf/a/b.jpg', '/asdf/asdf.jpg', 'asdff/asdf.jpg', 'xxxasdf/asdf.jpg', 'asdf/asdf.jpgxxx']);
+    });
+
+    it('should match **/ and /**/', () => {
+      testGlob('**/*.js',
+        ['asdf.js', 'asdf/asdf.js', 'asdf/asdf/asdfasdf_asdf.js', '/asdf/asdf.js', '/asdf/aasdf-asdf.2.1.4.js'],
+        ['asdf/asdf.jpg', '/asdf/asdf.jpg']);
+      testGlob('aaa/**/bbb',
+        ['aaa/xxx/bbb', 'aaa/xxx/yyy/bbb', 'aaa/bbb'],
+        ['/aaa/xxx/bbb', 'aaa/x/bbb/', 'aaa/bbb/ccc']);
+    });
+
+    it('should match choice groups', () => {
+      testGlob('aaa/*.@(bbb|ccc)',
+        ['aaa/aaa.bbb', 'aaa/aaa_aaa.ccc'],
+        ['/aaa/aaa.bbb', 'aaaf/aaa.bbb', 'aaa/aaa.ddd']);
+
+      testGlob('aaa/*(bbb|ccc)',
+        ['aaa/', 'aaa/bbb', 'aaa/ccc', 'aaa/bbbbbb', 'aaa/bbbccc', 'aaa/cccbbb', 'aaa/bbbcccbbb'],
+        ['aaa/aaa', 'aaa/bbbb']);
+
+      testGlob('aaa/+(bbb|ccc)',
+        ['aaa/bbb', 'aaa/ccc', 'aaa/bbbbbb', 'aaa/bbbccc', 'aaa/cccbbb', 'aaa/bbbcccbbb'],
+        ['aaa/', 'aaa/aaa', 'aaa/bbbb']);
+
+      testGlob('aaa/?(bbb|ccc)',
+        ['aaa/', 'aaa/bbb', 'aaa/ccc'],
+        ['aaa/aaa', 'aaa/bbbb', 'aaa/bbbbbb', 'aaa/bbbccc', 'aaa/cccbbb', 'aaa/bbbcccbbb']);
+    });
+
+    it('should error on non-supported choice groups', () => {
+      expect(() => new FirebaseGlob('/!(a|b)/c'))
+        .toThrowError('Error in FirebaseGlob: "/!(a|b)/c" - "not" expansions are not supported: "!(a|b)"');
+      expect(() => new FirebaseGlob('/(a|b)/c'))
+      .toThrowError('Error in FirebaseGlob: "/(a|b)/c" - unknown expansion type: "/" in "/(a|b)"');
+      expect(() => new FirebaseGlob('/&(a|b)/c'))
+        .toThrowError('Error in FirebaseGlob: "/&(a|b)/c" - unknown expansion type: "&" in "&(a|b)"');
+    });
+
+    // Globs that contain params tested via the match tests below
+  });
+
+  describe('match', () => {
+    it('should match patterns with no parameters', () => {
+      testMatch('/abc/def/*', {
+      }, {
+        '/abc/def/': {},
+        '/abc/def/ghi': {},
+        '/': undefined,
+        '/abc': undefined,
+        '/abc/def/ghi/jk;': undefined,
+      });
+    });
+
+    it('should capture a simple named param', () => {
+      testMatch('/:abc', {
+        named: ['abc']
+      }, {
+        '/a': {abc: 'a'},
+        '/abc': {abc: 'abc'},
+        '/': undefined,
+        '/a/': undefined,
+        '/a/b/': undefined,
+        '/a/a/b': undefined,
+        '/a/a/b/': undefined,
+      });
+      testMatch('/a/:b', {
+        named: ['b']
+      }, {
+        '/a/b': {b: 'b'},
+        '/a/bcd': {b: 'bcd'},
+        '/a/': undefined,
+        '/a/b/': undefined,
+        '/a': undefined,
+        '/a//': undefined,
+        '/a/a/b': undefined,
+        '/a/a/b/': undefined,
+      });
+    });
+
+    it('should capture a named param followed by non-word chars', () => {
+      testMatch('/a/:x-', {
+        named: ['x']
+      }, {
+        '/a/b-': {x: 'b'},
+        '/a/bcd-': {x: 'bcd'},
+        '/a/--': {x: '-'},
+        '/a': undefined,
+        '/a/-': undefined,
+        '/a/-/': undefined,
+        '/a/': undefined,
+        '/a/b/-': undefined,
+        '/a/b-c': undefined,
+      });
+    });
+
+    it('should capture multiple named params', () => {
+      testMatch('/a/:b/:c', {
+        named: ['b', 'c']
+      }, {
+        '/a/b/c': {b: 'b', c: 'c'},
+        '/a/bcd/efg': {b: 'bcd', c: 'efg'},
+        '/a/b/c-': {b: 'b', c: 'c-'},
+        '/a/': undefined,
+        '/a/b/': undefined,
+        '/a/b/c/': undefined,
+      });
+      testMatch('/:a/b/:c', {
+        named: ['a', 'c']
+      }, {
+        '/a/b/c': {a: 'a', c: 'c'},
+        '/abc/b/efg': {a: 'abc', c: 'efg'},
+        '/a/b/c-': {a: 'a', c: 'c-'},
+        '/a/': undefined,
+        '/a/b/': undefined,
+        '/a/b/c/': undefined,
+      });
+    });
+
+    it('should capture a simple rest param', () => {
+      testMatch('/:abc*', {
+        rest: ['abc']
+      }, {
+        '/a': {abc: 'a'},
+        '/a/b': {abc: 'a/b'},
+        '/a/bcd': {abc: 'a/bcd'},
+        '/a/': {abc: 'a/'},
+        '/a/b/': {abc: 'a/b/'},
+        '/a//': {abc: 'a//'},
+        '/a/b/c': {abc: 'a/b/c'},
+        '/a/b/c/': {abc: 'a/b/c/'},
+      });
+      testMatch('/a/:b*', {
+        rest: ['b']
+      }, {
+        '/a/b': {b: 'b'},
+        '/a/bcd': {b: 'bcd'},
+        '/a/': {b: ''},
+        '/a/b/': {b: 'b/'},
+        '/a': {b: undefined},
+        '/a//': {b: '/'},
+        '/a/a/b': {b: 'a/b'},
+        '/a/a/b/': {b: 'a/b/'},
+      });
+    });
+
+    it('should capture a rest param mixed with a named param', () => {
+      testMatch('/:abc/:rest*', {
+        named: ['abc'],
+        rest: ['rest']
+      }, {
+        '/a': {abc: 'a', rest: undefined},
+        '/a/b': {abc: 'a', rest: 'b'},
+        '/a/bcd': {abc: 'a', rest: 'bcd'},
+        '/a/': {abc: 'a', rest: ''},
+        '/a/b/': {abc: 'a', rest: 'b/'},
+        '/a//': {abc: 'a', rest: '/'},
+        '/a/b/c': {abc: 'a', rest: 'b/c'},
+        '/a/b/c/': {abc: 'a', rest: 'b/c/'},
+      });
+    });
+  });
+});
+
+function testGlob(pattern: string, matches: string[], nonMatches: string[]) {
+  const glob = new FirebaseGlob(pattern);
+  matches.forEach(url => expect(glob.test(url)).toBe(true, url));
+  nonMatches.forEach(url => expect(glob.test(url)).toBe(false, url));
+}
+
+function testMatch(pattern: string, captures: { named?: string[], rest?: string[] }, matches: { [url: string]: object|undefined }) {
+  const glob = new FirebaseGlob(pattern);
+  expect(Object.keys(glob.namedParams)).toEqual(captures.named || []);
+  expect(Object.keys(glob.restParams)).toEqual(captures.rest || []);
+  Object.keys(matches).forEach(url => expect(glob.match(url)).toEqual(matches[url]));
+}
diff --git a/aio/tools/firebase-test-utils/FirebaseGlob.ts b/aio/tools/firebase-test-utils/FirebaseGlob.ts
new file mode 100644
index 000000000000..1e26d668cece
--- /dev/null
+++ b/aio/tools/firebase-test-utils/FirebaseGlob.ts
@@ -0,0 +1,74 @@
+import * as XRegExp from 'xregexp';
+
+const dot = /\./g;
+const star = /\*/g;
+const doubleStar = /(^|\/)\*\*($|\/)/g;           // e.g. a/**/b or **/b or a/** but not a**b
+const modifiedPatterns = /(.)\(([^)]+)\)/g;       // e.g. `@(a|b)
+const restParam = /\/:([A-Za-z]+)\*/g;            // e.g. `:rest*`
+const namedParam = /\/:([A-Za-z]+)/g;             // e.g. `:api`
+const possiblyEmptyInitialSegments = /^\.🐷\//g;  // e.g. `**/a` can also match `a`
+const possiblyEmptySegments = /\/\.🐷\//g;        // e.g. `a/**/b` can also match `a/b`
+const willBeStar = /🐷/g;                         // e.g. `a**b` not matched by previous rule
+
+export class FirebaseGlob {
+  pattern: string;
+  regex: XRegExp;
+  namedParams: { [key: string]: boolean } = {};
+  restParams: { [key: string]: boolean } = {};
+  constructor(glob: string) {
+    try {
+      const pattern = glob
+          .replace(dot, '\\.')
+          .replace(modifiedPatterns, replaceModifiedPattern)
+          .replace(restParam, (_, param) => {
+            // capture the rest of the string
+            this.restParams[param] = true;
+            return `(?:/(?<${param}>.🐷))?`;
+          })
+          .replace(namedParam, (_, param) => {
+            // capture the named parameter
+            this.namedParams[param] = true;
+            return `/(?<${param}>[^/]+)`;
+          })
+          .replace(doubleStar, '$1.🐷$2')                 // use the pig to avoid replacing ** in next rule
+          .replace(star, '[^/]*')                         // match a single segment
+          .replace(possiblyEmptyInitialSegments, '(?:.*)')// deal with **/ special cases
+          .replace(possiblyEmptySegments, '(?:/|/.*/)')   // deal with /**/ special cases
+          .replace(willBeStar, '*');                      // other ** matches
+      this.pattern = `^${pattern}$`;
+      this.regex = XRegExp(this.pattern);
+    } catch (e) {
+      throw new Error(`Error in FirebaseGlob: "${glob}" - ${e.message}`);
+    }
+  }
+
+  test(url: string) {
+    return XRegExp.test(url, this.regex);
+  }
+
+  match(url: string) {
+    const match = XRegExp.exec(url, this.regex);
+    if (match) {
+      const result = {};
+      const names = (this.regex as any).xregexp.captureNames || [];
+      names.forEach(name => result[name] = match[name]);
+      return result;
+    }
+  }
+}
+
+function replaceModifiedPattern(_, modifier, pattern) {
+  switch (modifier) {
+    case '!':
+      throw new Error(`"not" expansions are not supported: "${_}"`);
+    case '?':
+    case '+':
+      return `(${pattern})${modifier}`;
+    case '*':
+      return `(${pattern})🐷`;  // it will become a star
+    case '@':
+      return `(${pattern})`;
+    default:
+      throw new Error(`unknown expansion type: "${modifier}" in "${_}"`);
+  }
+}
diff --git a/aio/tools/firebase-test-utils/FirebaseRedirect.spec.ts b/aio/tools/firebase-test-utils/FirebaseRedirect.spec.ts
new file mode 100644
index 000000000000..db652cc1aa4c
--- /dev/null
+++ b/aio/tools/firebase-test-utils/FirebaseRedirect.spec.ts
@@ -0,0 +1,30 @@
+import { FirebaseRedirect } from './FirebaseRedirect';
+
+describe('FirebaseRedirect', () => {
+  describe('replace', () => {
+    it('should return undefined if the redirect does not match the url', () => {
+      const redirect = new FirebaseRedirect('/a/b/c', '/x/y/z');
+      expect(redirect.replace('/1/2/3')).toBe(undefined);
+    });
+
+    it('should return the destination if there is a match', () => {
+      const redirect = new FirebaseRedirect('/a/b/c', '/x/y/z');
+      expect(redirect.replace('/a/b/c')).toBe('/x/y/z');
+    });
+
+    it('should inject name params into the destination', () => {
+      const redirect = new FirebaseRedirect('/api/:package/:api-*', '<:package><:api>');
+      expect(redirect.replace('/api/common/NgClass-directive')).toEqual('<common><NgClass>');
+    });
+
+    it('should inject rest params into the destination', () => {
+      const redirect = new FirebaseRedirect('/a/:rest*', '/x/:rest*/y');
+      expect(redirect.replace('/a/b/c')).toEqual('/x/b/c/y');
+    });
+
+    it('should inject both named and rest parameters into the destination', () => {
+      const redirect = new FirebaseRedirect('/:a/:rest*', '/x/:a/y/:rest*/z');
+      expect(redirect.replace('/a/b/c')).toEqual('/x/a/y/b/c/z');
+    });
+  });
+});
diff --git a/aio/tools/firebase-test-utils/FirebaseRedirect.ts b/aio/tools/firebase-test-utils/FirebaseRedirect.ts
new file mode 100644
index 000000000000..9dee3bd0114e
--- /dev/null
+++ b/aio/tools/firebase-test-utils/FirebaseRedirect.ts
@@ -0,0 +1,16 @@
+import * as XRegExp from 'xregexp';
+import { FirebaseGlob } from './FirebaseGlob';
+
+export class FirebaseRedirect {
+  glob = new FirebaseGlob(this.source);
+  constructor(public source: string, public destination: string) {}
+
+  replace(url: string) {
+    const match = this.glob.match(url);
+    if (match) {
+      const paramReplacers = Object.keys(this.glob.namedParams).map(name => [ XRegExp(`:${name}`, 'g'), match[name] ]);
+      const restReplacers = Object.keys(this.glob.restParams).map(name => [ XRegExp(`:${name}\\*`, 'g'), match[name] ]);
+      return XRegExp.replaceEach(this.destination, [...paramReplacers, ...restReplacers]);
+    }
+  }
+}
diff --git a/aio/tools/firebase-test-utils/FirebaseRedirector.spec.ts b/aio/tools/firebase-test-utils/FirebaseRedirector.spec.ts
new file mode 100644
index 000000000000..1833e525f79a
--- /dev/null
+++ b/aio/tools/firebase-test-utils/FirebaseRedirector.spec.ts
@@ -0,0 +1,42 @@
+import { FirebaseRedirector } from './FirebaseRedirector';
+
+describe('FirebaseRedirector', () => {
+  it('should replace with the first matching redirect', () => {
+    const redirector = new FirebaseRedirector([
+      { source: '/a/b/c', destination: '/X/Y/Z' },
+      { source: '/a/:foo/c', destination: '/X/:foo/Z' },
+      { source: '/**/:foo/c', destination: '/A/:foo/zzz' },
+    ]);
+    expect(redirector.redirect('/a/b/c')).toEqual('/X/Y/Z');
+    expect(redirector.redirect('/a/moo/c')).toEqual('/X/moo/Z');
+    expect(redirector.redirect('/x/y/a/b/c')).toEqual('/A/b/zzz');
+    expect(redirector.redirect('/x/y/c')).toEqual('/A/y/zzz');
+  });
+
+  it('should return the original url if no redirect matches', () => {
+    const redirector = new FirebaseRedirector([
+      { source: 'x', destination: 'X' },
+      { source: 'y', destination: 'Y' },
+      { source: 'z', destination: 'Z' },
+    ]);
+    expect(redirector.redirect('a')).toEqual('a');
+  });
+
+  it('should recursively redirect', () => {
+    const redirector = new FirebaseRedirector([
+      { source: 'a', destination: 'b' },
+      { source: 'b', destination: 'c' },
+      { source: 'c', destination: 'd' },
+    ]);
+    expect(redirector.redirect('a')).toEqual('d');
+  });
+
+  it('should throw if stuck in an infinite loop', () => {
+    const redirector = new FirebaseRedirector([
+      { source: 'a', destination: 'b' },
+      { source: 'b', destination: 'c' },
+      { source: 'c', destination: 'a' },
+    ]);
+    expect(() => redirector.redirect('a')).toThrowError('infinite redirect loop');
+  });
+});
diff --git a/aio/tools/firebase-test-utils/FirebaseRedirector.ts b/aio/tools/firebase-test-utils/FirebaseRedirector.ts
new file mode 100644
index 000000000000..cd8a44e75ae3
--- /dev/null
+++ b/aio/tools/firebase-test-utils/FirebaseRedirector.ts
@@ -0,0 +1,36 @@
+import { FirebaseRedirect } from './FirebaseRedirect';
+
+export interface FirebaseRedirectConfig {
+  source: string;
+  destination: string;
+}
+
+export class FirebaseRedirector {
+  private redirects: FirebaseRedirect[];
+  constructor(redirects: FirebaseRedirectConfig[]) {
+    this.redirects = redirects.map(redirect => new FirebaseRedirect(redirect.source, redirect.destination));
+  }
+
+  redirect(url: string) {
+    let ttl = 50;
+    while (ttl > 0) {
+      const newUrl = this.doRedirect(url);
+      if (newUrl === url) {
+        return url;
+      } else {
+        url = newUrl;
+        ttl--;
+      }
+    }
+    throw new Error('infinite redirect loop');
+  }
+  private doRedirect(url: string) {
+    for (let i = 0; i < this.redirects.length; i++) {
+      const newUrl = this.redirects[i].replace(url);
+      if (newUrl !== undefined) {
+        return newUrl;
+      }
+    }
+    return url;
+  }
+}
diff --git a/aio/tools/ng-packages-installer/index.js b/aio/tools/ng-packages-installer/index.js
new file mode 100644
index 000000000000..d8b6fd0670eb
--- /dev/null
+++ b/aio/tools/ng-packages-installer/index.js
@@ -0,0 +1,296 @@
+'use strict';
+
+const chalk = require('chalk');
+const fs = require('fs-extra');
+const path = require('canonical-path');
+const shelljs = require('shelljs');
+const yargs = require('yargs');
+
+const PACKAGE_JSON = 'package.json';
+const LOCAL_MARKER_PATH = 'node_modules/_local_.json';
+const PACKAGE_JSON_REGEX = /^[^/]+\/package\.json$/;
+
+const ANGULAR_ROOT_DIR = path.resolve(__dirname, '../../..');
+const ANGULAR_DIST_PACKAGES = path.resolve(ANGULAR_ROOT_DIR, 'dist/packages-dist');
+
+/**
+ * A tool that can install Angular dependencies for a project from NPM or from the
+ * locally built distributables.
+ *
+ * This tool is used to change dependencies of the `aio` application and the example
+ * applications.
+ */
+class NgPackagesInstaller {
+
+  /**
+   * Create a new installer for a project in the specified directory.
+   *
+   * @param {string} projectDir - the path to the directory containing the project.
+   * @param {object} options - a hash of options for the install
+   *                           * `debug` (`boolean`) - whether to display debug messages.
+   *                           * `force` (`boolean`) - whether to force a local installation
+   *                                                   even if there is a local marker file.
+   *                           * `ignorePackages` (`string[]`) - a collection of names of packages
+   *                                                   that should not be copied over.
+   */
+  constructor(projectDir, options = {}) {
+    this.debug = options.debug;
+    this.force = options.force;
+    this.ignorePackages = options.ignorePackages || [];
+    this.projectDir = path.resolve(projectDir);
+    this.localMarkerPath = path.resolve(this.projectDir, LOCAL_MARKER_PATH);
+
+    this._log('Project directory:', this.projectDir);
+  }
+
+  // Public methods
+
+  /**
+   * Check whether the dependencies have been overridden with locally built
+   * Angular packages. This is done by checking for the `_local_.json` marker file.
+   * This will emit a warning to the console if the dependencies have been overridden.
+   */
+  checkDependencies() {
+    if (this._checkLocalMarker()) {
+      this._printWarning();
+    }
+  }
+
+  /**
+   * Install locally built Angular dependencies, overriding the dependencies in the package.json
+   * This will also write a "marker" file (`_local_.json`), which contains the overridden package.json
+   * contents and acts as an indicator that dependencies have been overridden.
+   */
+  installLocalDependencies() {
+    if (this._checkLocalMarker() !== true || this.force) {
+      const pathToPackageConfig = path.resolve(this.projectDir, PACKAGE_JSON);
+      const packages = this._getDistPackages();
+
+      try {
+        // Overwrite local Angular packages dependencies to other Angular packages with local files.
+        Object.keys(packages).forEach(key => {
+          const pkg = packages[key];
+          const tmpConfig = JSON.parse(JSON.stringify(pkg.config));
+
+          // Prevent accidental publishing of the package, if something goes wrong.
+          tmpConfig.private = true;
+
+          // Overwrite project dependencies/devDependencies to Angular packages with local files.
+          ['dependencies', 'devDependencies'].forEach(prop => {
+            const deps = tmpConfig[prop] || {};
+            Object.keys(deps).forEach(key2 => {
+              const pkg2 = packages[key2];
+              if (pkg2) {
+                // point the core Angular packages at the distributable folder
+                deps[key2] = `file:${pkg2.parentDir}/${key2.replace('@angular/', '')}`;
+                this._log(`Overriding dependency of local ${key} with local package: ${key2}: ${deps[key2]}`);
+              }
+            });
+          });
+
+          fs.writeFileSync(pkg.packageJsonPath, JSON.stringify(tmpConfig));
+        });
+
+        const packageConfigFile = fs.readFileSync(pathToPackageConfig);
+        const packageConfig = JSON.parse(packageConfigFile);
+
+        const [dependencies, peers] = this._collectDependencies(packageConfig.dependencies || {}, packages);
+        const [devDependencies, devPeers] = this._collectDependencies(packageConfig.devDependencies || {}, packages);
+
+        this._assignPeerDependencies(peers, dependencies, devDependencies);
+        this._assignPeerDependencies(devPeers, dependencies, devDependencies);
+
+        const localPackageConfig = Object.assign(Object.create(null), packageConfig, { dependencies, devDependencies });
+        localPackageConfig.__angular = { local: true };
+        const localPackageConfigJson = JSON.stringify(localPackageConfig, null, 2);
+
+        try {
+          this._log(`Writing temporary local ${PACKAGE_JSON} to ${pathToPackageConfig}`);
+          fs.writeFileSync(pathToPackageConfig, localPackageConfigJson);
+          this._installDeps('--no-lockfile', '--check-files');
+          this._setLocalMarker(localPackageConfigJson);
+        } finally {
+          this._log(`Restoring original ${PACKAGE_JSON} to ${pathToPackageConfig}`);
+          fs.writeFileSync(pathToPackageConfig, packageConfigFile);
+        }
+      } finally {
+        // Restore local Angular packages dependencies to other Angular packages.
+        this._log(`Restoring original ${PACKAGE_JSON} for local Angular packages.`);
+        Object.keys(packages).forEach(key => {
+          const pkg = packages[key];
+          fs.writeFileSync(pkg.packageJsonPath, JSON.stringify(pkg.config));
+        });
+      }
+    }
+  }
+
+  /**
+   * Reinstall the original package.json depdendencies
+   * Yarn will also delete the local marker file for us.
+   */
+  restoreNpmDependencies() {
+    this._installDeps('--frozen-lockfile', '--check-files');
+  }
+
+  // Protected helpers
+
+  _assignPeerDependencies(peerDependencies, dependencies, devDependencies) {
+    Object.keys(peerDependencies).forEach(key => {
+      // If there is already an equivalent dependency then override it - otherwise assign/override the devDependency
+      if (dependencies[key]) {
+        this._log(`Overriding dependency with peerDependency: ${key}: ${peerDependencies[key]}`);
+        dependencies[key] = peerDependencies[key];
+      } else {
+        this._log(`${devDependencies[key] ? 'Overriding' : 'Assigning'} devDependency with peerDependency: ${key}: ${peerDependencies[key]}`);
+        devDependencies[key] = peerDependencies[key];
+      }
+    });
+  }
+
+  _collectDependencies(dependencies, packages) {
+    const peerDependencies = Object.create(null);
+    const mergedDependencies = Object.assign(Object.create(null), dependencies);
+
+    Object.keys(dependencies).forEach(key => {
+      const sourcePackage = packages[key];
+      if (sourcePackage) {
+        // point the core Angular packages at the distributable folder
+        mergedDependencies[key] = `file:${sourcePackage.parentDir}/${key.replace('@angular/', '')}`;
+        this._log(`Overriding dependency with local package: ${key}: ${mergedDependencies[key]}`);
+        // grab peer dependencies
+        const sourcePackagePeerDeps = sourcePackage.config.peerDependencies || {};
+        Object.keys(sourcePackagePeerDeps)
+          // ignore peerDependencies which are already core Angular packages
+          .filter(key => !packages[key])
+          .forEach(key => peerDependencies[key] = sourcePackagePeerDeps[key]);
+      }
+    });
+
+    // FIXME: Temporarily use RxJS from root `node_modules/`.
+    if (peerDependencies.rxjs) {
+      peerDependencies.rxjs = `file:${ANGULAR_ROOT_DIR}/node_modules/rxjs`;
+    }
+
+    return [mergedDependencies, peerDependencies];
+  }
+
+  /**
+   * A hash of Angular package configs.
+   * (Detected as directories in '/packages/' that contain a top-level 'package.json' file.)
+   */
+  _getDistPackages() {
+    const packageConfigs = Object.create(null);
+
+    [ANGULAR_DIST_PACKAGES].forEach(distDir => {
+      this._log(`Angular distributable directory: ${distDir}.`);
+      shelljs
+        .find(distDir)
+        .map(filePath => filePath.slice(distDir.length + 1))
+        .filter(filePath => PACKAGE_JSON_REGEX.test(filePath))
+        .forEach(packagePath => {
+          const packageName = `@angular/${packagePath.slice(0, -PACKAGE_JSON.length -1)}`;
+          if (this.ignorePackages.indexOf(packageName) === -1) {
+            const packageConfig = require(path.resolve(distDir, packagePath));
+            packageConfigs[packageName] = {
+              parentDir: distDir,
+              packageJsonPath: path.resolve(distDir, packagePath),
+              config: packageConfig
+            };
+          } else {
+            this._log('Ignoring package', packageName);
+          }
+        });
+
+    });
+
+    this._log('Found the following Angular distributables:', Object.keys(packageConfigs).map(key => `\n - ${key}`));
+    return packageConfigs;
+  }
+
+  _installDeps(...options) {
+    const command = 'yarn install ' + options.join(' ');
+    this._log('Installing dependencies with:', command);
+    shelljs.exec(command, {cwd: this.projectDir});
+  }
+
+  /**
+   * Log a message if the `debug` property is set to true.
+   * @param {...string[]} messages - The messages to be logged.
+   */
+  _log(...messages) {
+    if (this.debug) {
+      const header = `  [${NgPackagesInstaller.name}]: `;
+      const indent = ' '.repeat(header.length);
+      const message = messages.join(' ');
+      console.info(`${header}${message.split('\n').join(`\n${indent}`)}`);
+    }
+  }
+
+  _printWarning() {
+    const relativeScriptPath = path.relative('.', __filename.replace(/\.js$/, ''));
+    const absoluteProjectDir = path.resolve(this.projectDir);
+    const restoreCmd = `node ${relativeScriptPath} restore ${absoluteProjectDir}`;
+
+    // Log a warning.
+    console.warn(chalk.yellow([
+      '',
+      '!'.repeat(110),
+      '!!!',
+      '!!!  WARNING',
+      '!!!',
+      `!!!  The project at "${absoluteProjectDir}" is running against the local Angular build.`,
+      '!!!',
+      '!!!  To restore the npm packages run:',
+      '!!!',
+      `!!!    "${restoreCmd}"`,
+      '!!!',
+      '!'.repeat(110),
+      '',
+    ].join('\n')));
+  }
+
+  // Local marker helpers
+
+  _checkLocalMarker() {
+    this._log('Checking for local marker at', this.localMarkerPath);
+    return fs.existsSync(this.localMarkerPath);
+  }
+
+  _setLocalMarker(contents) {
+    this._log('Writing local marker file to', this.localMarkerPath);
+    fs.writeFileSync(this.localMarkerPath, contents);
+  }
+}
+
+function main() {
+  shelljs.set('-e');
+
+  yargs
+    .usage('$0 <cmd> [args]')
+
+    .option('debug', { describe: 'Print additional debug information.', default: false })
+    .option('force', { describe: 'Force the command to execute even if not needed.', default: false })
+    .option('ignore-packages', { describe: 'List of Angular packages that should not be used in local mode.', default: [], array: true })
+
+    .command('overwrite <projectDir> [--force] [--debug] [--ignore-packages package1 package2]', 'Install dependencies from the locally built Angular distributables.', () => {}, argv => {
+      const installer = new NgPackagesInstaller(argv.projectDir, argv);
+      installer.installLocalDependencies();
+    })
+    .command('restore <projectDir> [--debug]', 'Install dependencies from the npm registry.', () => {}, argv => {
+      const installer = new NgPackagesInstaller(argv.projectDir, argv);
+      installer.restoreNpmDependencies();
+    })
+    .command('check <projectDir> [--debug]', 'Check that dependencies came from npm. Otherwise display a warning message.', () => {}, argv => {
+      const installer = new NgPackagesInstaller(argv.projectDir, argv);
+      installer.checkDependencies();
+    })
+    .demandCommand(1, 'Please supply a command from the list above.')
+    .strict()
+    .wrap(yargs.terminalWidth())
+    .argv;
+}
+
+module.exports = NgPackagesInstaller;
+if (require.main === module) {
+  main();
+}
diff --git a/aio/tools/ng-packages-installer/index.spec.js b/aio/tools/ng-packages-installer/index.spec.js
new file mode 100644
index 000000000000..f20594738015
--- /dev/null
+++ b/aio/tools/ng-packages-installer/index.spec.js
@@ -0,0 +1,323 @@
+'use strict';
+
+const fs = require('fs-extra');
+const path = require('canonical-path');
+const shelljs = require('shelljs');
+
+const NgPackagesInstaller = require('./index');
+
+describe('NgPackagesInstaller', () => {
+  const rootDir = 'root/dir';
+  const absoluteRootDir = path.resolve(rootDir);
+  const nodeModulesDir = path.resolve(absoluteRootDir, 'node_modules');
+  const packageJsonPath = path.resolve(absoluteRootDir, 'package.json');
+  const packagesDir = path.resolve(path.resolve(__dirname, '../../../dist/packages-dist'));
+  const toolsDir = path.resolve(path.resolve(__dirname, '../../../dist/tools/@angular'));
+  let installer;
+
+  beforeEach(() => {
+    spyOn(fs, 'existsSync');
+    spyOn(fs, 'readFileSync');
+    spyOn(fs, 'writeFileSync');
+    spyOn(shelljs, 'exec');
+    spyOn(shelljs, 'rm');
+    spyOn(console, 'log');
+    spyOn(console, 'warn');
+    installer = new NgPackagesInstaller(rootDir);
+  });
+
+  describe('checkDependencies()', () => {
+    beforeEach(() => {
+      spyOn(installer, '_printWarning');
+    });
+
+    it('should not print a warning if there is no _local_.json file', () => {
+      fs.existsSync.and.returnValue(false);
+      installer.checkDependencies();
+      expect(fs.existsSync).toHaveBeenCalledWith(path.resolve(rootDir, 'node_modules/_local_.json'));
+      expect(installer._printWarning).not.toHaveBeenCalled();
+    });
+
+    it('should print a warning if there is a _local_.json file', () => {
+      fs.existsSync.and.returnValue(true);
+      installer.checkDependencies();
+      expect(fs.existsSync).toHaveBeenCalledWith(path.resolve(rootDir, 'node_modules/_local_.json'));
+      expect(installer._printWarning).toHaveBeenCalled();
+    });
+  });
+
+  describe('installLocalDependencies()', () => {
+    const copyJsonObj = obj => JSON.parse(JSON.stringify(obj));
+    let dummyNgPackages, dummyPackage, dummyPackageJson, expectedModifiedPackage, expectedModifiedPackageJson;
+
+    beforeEach(() => {
+      spyOn(installer, '_checkLocalMarker');
+
+      // These are the packages that are "found" in the dist directory
+      dummyNgPackages = {
+        '@angular/core': {
+          parentDir: packagesDir,
+          packageJsonPath: `${packagesDir}/core/package.json`,
+          config: { peerDependencies: { 'some-package': '5.0.1' } }
+        },
+        '@angular/common': {
+          parentDir: packagesDir,
+          packageJsonPath: `${packagesDir}/common/package.json`,
+          config: { peerDependencies: { '@angular/core': '4.4.4-1ab23cd4' } }
+        },
+        '@angular/compiler': {
+          parentDir: packagesDir,
+          packageJsonPath: `${packagesDir}/compiler/package.json`,
+          config: { peerDependencies: { '@angular/common': '4.4.4-1ab23cd4' } }
+        },
+        '@angular/compiler-cli': {
+          parentDir: toolsDir,
+          packageJsonPath: `${toolsDir}/compiler-cli/package.json`,
+          config: {
+            dependencies: { '@angular/tsc-wrapped': '4.4.4-1ab23cd4' },
+            peerDependencies: { typescript: '^2.4.2', '@angular/compiler': '4.4.4-1ab23cd4' }
+          }
+        },
+        '@angular/tsc-wrapped': {
+          parentDir: toolsDir,
+          packageJsonPath: `${toolsDir}/tsc-wrapped/package.json`,
+          config: {
+            devDependencies: { '@angular/common': '4.4.4-1ab23cd4' },
+            peerDependencies: { tsickle: '^1.4.0' }
+          }
+        }
+      };
+      spyOn(installer, '_getDistPackages').and.callFake(() => copyJsonObj(dummyNgPackages));
+
+      // This is the package.json in the "test" folder
+      dummyPackage = {
+        dependencies: {
+          '@angular/core': '4.4.1',
+          '@angular/common': '4.4.1'
+        },
+        devDependencies: {
+          '@angular/compiler-cli': '4.4.1'
+        }
+      };
+      dummyPackageJson = JSON.stringify(dummyPackage);
+      fs.readFileSync.and.returnValue(dummyPackageJson);
+
+      // This is the package.json that is temporarily written to the "test" folder
+      // Note that the Angular (dev)dependencies have been modified to use a "file:" path
+      // And that the peerDependencies from `dummyNgPackages` have been added as (dev)dependencies.
+      expectedModifiedPackage = {
+        dependencies: {
+          '@angular/core': `file:${packagesDir}/core`,
+          '@angular/common': `file:${packagesDir}/common`
+        },
+        devDependencies: {
+          '@angular/compiler-cli': `file:${toolsDir}/compiler-cli`,
+          'some-package': '5.0.1',
+          typescript: '^2.4.2'
+        },
+        __angular: { local: true }
+      };
+      expectedModifiedPackageJson = JSON.stringify(expectedModifiedPackage, null, 2);
+    });
+
+    describe('when there is a local package marker', () => {
+      it('should not continue processing', () => {
+        installer._checkLocalMarker.and.returnValue(true);
+        installer.installLocalDependencies();
+        expect(installer._checkLocalMarker).toHaveBeenCalled();
+        expect(installer._getDistPackages).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when there is no local package marker', () => {
+      let log;
+
+      beforeEach(() => {
+        log = [];
+        fs.writeFileSync.and.callFake((filePath, contents) => filePath === packageJsonPath && log.push(`writeFile: ${contents}`));
+        spyOn(installer, '_installDeps').and.callFake(() => log.push('installDeps:'));
+        spyOn(installer, '_setLocalMarker');
+        installer._checkLocalMarker.and.returnValue(false);
+        installer.installLocalDependencies();
+      });
+
+      it('should get the dist packages', () => {
+        expect(installer._checkLocalMarker).toHaveBeenCalled();
+        expect(installer._getDistPackages).toHaveBeenCalled();
+      });
+
+      it('should temporarily overwrite the package.json files of local Angular packages', () => {
+        const pkgJsonFor = pkgName => dummyNgPackages[`@angular/${pkgName}`].packageJsonPath;
+        const pkgConfigFor = pkgName => copyJsonObj(dummyNgPackages[`@angular/${pkgName}`].config);
+        const overwriteConfigFor = (pkgName, newProps) => Object.assign(pkgConfigFor(pkgName), newProps);
+
+        const allArgs = fs.writeFileSync.calls.allArgs();
+        const firstFiveArgs = allArgs.slice(0, 5);
+        const lastFiveArgs = allArgs.slice(-5);
+
+        expect(firstFiveArgs).toEqual([
+          [pkgJsonFor('core'), JSON.stringify(overwriteConfigFor('core', {private: true}))],
+          [pkgJsonFor('common'), JSON.stringify(overwriteConfigFor('common', {private: true}))],
+          [pkgJsonFor('compiler'), JSON.stringify(overwriteConfigFor('compiler', {private: true}))],
+          [pkgJsonFor('compiler-cli'), JSON.stringify(overwriteConfigFor('compiler-cli', {
+            private: true,
+            dependencies: { '@angular/tsc-wrapped': `file:${toolsDir}/tsc-wrapped` }
+          }))],
+          [pkgJsonFor('tsc-wrapped'), JSON.stringify(overwriteConfigFor('tsc-wrapped', {
+            private: true,
+            devDependencies: { '@angular/common': `file:${packagesDir}/common` }
+          }))],
+        ]);
+
+        expect(lastFiveArgs).toEqual(['core', 'common', 'compiler', 'compiler-cli', 'tsc-wrapped']
+            .map(pkgName => [pkgJsonFor(pkgName), JSON.stringify(pkgConfigFor(pkgName))]));
+      });
+
+      it('should load the package.json', () => {
+        expect(fs.readFileSync).toHaveBeenCalledWith(packageJsonPath);
+      });
+
+      it('should overwrite package.json with modified config', () => {
+        expect(fs.writeFileSync).toHaveBeenCalledWith(packageJsonPath, expectedModifiedPackageJson);
+      });
+
+      it('should restore original package.json', () => {
+        expect(fs.writeFileSync).toHaveBeenCalledWith(packageJsonPath, dummyPackageJson);
+      });
+
+      it('should overwrite package.json, then install deps, then restore original package.json', () => {
+        expect(log).toEqual([
+          `writeFile: ${expectedModifiedPackageJson}`,
+          `installDeps:`,
+          `writeFile: ${dummyPackageJson}`
+        ]);
+      });
+
+      it('should set the local marker file with the contents of the modified package.json', () => {
+        expect(installer._setLocalMarker).toHaveBeenCalledWith(expectedModifiedPackageJson);
+      });
+    });
+  });
+
+  describe('restoreNpmDependencies()', () => {
+    it('should run `yarn install` in the specified directory, with the correct options', () => {
+      spyOn(installer, '_installDeps');
+      installer.restoreNpmDependencies();
+      expect(installer._installDeps).toHaveBeenCalledWith('--frozen-lockfile', '--check-files');
+    });
+  });
+
+  describe('_getDistPackages()', () => {
+    it('should include top level Angular packages', () => {
+      const ngPackages = installer._getDistPackages();
+      const expectedValue = jasmine.objectContaining({
+        parentDir: jasmine.any(String),
+        packageJsonPath: jasmine.any(String),
+        config: jasmine.any(Object),
+      });
+
+      // For example...
+      expect(ngPackages['@angular/common']).toEqual(expectedValue);
+      expect(ngPackages['@angular/core']).toEqual(expectedValue);
+      expect(ngPackages['@angular/router']).toEqual(expectedValue);
+      expect(ngPackages['@angular/upgrade']).toEqual(expectedValue);
+
+      expect(ngPackages['@angular/upgrade/static']).not.toBeDefined();
+    });
+
+    it('should store each package\'s parent directory', () => {
+      const ngPackages = installer._getDistPackages();
+
+      // For example...
+      expect(ngPackages['@angular/core'].parentDir).toBe(packagesDir);
+      expect(ngPackages['@angular/router'].parentDir).toBeDefined(toolsDir);
+    });
+
+    it('should not include packages that have been ignored', () => {
+      installer = new NgPackagesInstaller(rootDir, { ignorePackages: ['@angular/router'] });
+      const ngPackages = installer._getDistPackages();
+
+      expect(ngPackages['@angular/common']).toBeDefined();
+      expect(ngPackages['@angular/router']).toBeUndefined();
+    });
+  });
+
+  describe('_log()', () => {
+    beforeEach(() => {
+      spyOn(console, 'info');
+    });
+
+    it('should assign the debug property from the options', () => {
+      installer = new NgPackagesInstaller(rootDir, { debug: true });
+      expect(installer.debug).toBe(true);
+      installer = new NgPackagesInstaller(rootDir, { });
+      expect(installer.debug).toBe(undefined);
+    });
+
+    it('should log a message to the console if the `debug` property is true', () => {
+      installer._log('foo');
+      expect(console.info).not.toHaveBeenCalled();
+
+      installer.debug = true;
+      installer._log('bar');
+      expect(console.info).toHaveBeenCalledWith('  [NgPackagesInstaller]: bar');
+    });
+  });
+
+  describe('_printWarning()', () => {
+    it('should mention the message passed in the warning', () => {
+      installer._printWarning();
+      expect(console.warn.calls.argsFor(0)[0]).toContain('is running against the local Angular build');
+    });
+
+    it('should mention the command to restore the Angular packages in any warning', () => {
+      // When run for the current working directory...
+      const dir1 = '.';
+      const restoreCmdRe1 = RegExp('\\bnode .*?ng-packages-installer/index restore ' + path.resolve(dir1));
+      installer = new NgPackagesInstaller(dir1);
+      installer._printWarning('');
+      expect(console.warn.calls.argsFor(0)[0]).toMatch(restoreCmdRe1);
+
+      // When run for a different directory...
+      const dir2 = rootDir;
+      const restoreCmdRe2 = RegExp(`\\bnode .*?ng-packages-installer/index restore .*?${path.resolve(dir1)}\\b`);
+      installer = new NgPackagesInstaller(dir2);
+      installer._printWarning('');
+      expect(console.warn.calls.argsFor(1)[0]).toMatch(restoreCmdRe2);
+    });
+  });
+
+  describe('_installDeps()', () => {
+    it('should run yarn install with the given options', () => {
+      installer._installDeps('option-1', 'option-2');
+      expect(shelljs.exec).toHaveBeenCalledWith('yarn install option-1 option-2', { cwd: absoluteRootDir });
+    });
+  });
+
+  describe('local marker helpers', () => {
+    let installer;
+    beforeEach(() => {
+      installer = new NgPackagesInstaller(rootDir);
+    });
+
+    describe('_checkLocalMarker', () => {
+      it ('should return true if the local marker file exists', () => {
+        fs.existsSync.and.returnValue(true);
+        expect(installer._checkLocalMarker()).toEqual(true);
+        expect(fs.existsSync).toHaveBeenCalledWith(path.resolve(nodeModulesDir, '_local_.json'));
+        fs.existsSync.calls.reset();
+
+        fs.existsSync.and.returnValue(false);
+        expect(installer._checkLocalMarker()).toEqual(false);
+        expect(fs.existsSync).toHaveBeenCalledWith(path.resolve(nodeModulesDir, '_local_.json'));
+      });
+    });
+
+    describe('_setLocalMarker', () => {
+      it('should create a local marker file', () => {
+        installer._setLocalMarker('test contents');
+        expect(fs.writeFileSync).toHaveBeenCalledWith(path.resolve(nodeModulesDir, '_local_.json'), 'test contents');
+      });
+    });
+  });
+});
diff --git a/aio/tools/stackblitz-builder/README.md b/aio/tools/stackblitz-builder/README.md
new file mode 100644
index 000000000000..dc39dce25306
--- /dev/null
+++ b/aio/tools/stackblitz-builder/README.md
@@ -0,0 +1,59 @@
+# Overview
+
+[Stackblitz](https://stackblitz.com/) is an online tool for creating, collaborating and sharing ideas. 
+In AIO we use it to share one or more runnable versions of our examples.
+
+Stackblitz can be used both in a separate page and in an embedded form.
+* `generateStackblitz.js` - executes each of the the StackblitzBuilder to generate a stackblitz file for each example.
+
+## Stackblitz generation
+
+Both forms are created within `builder.js`. How is a stackblitz created? What is the process from a
+directory with files to a link with a stackblitz.
+
+An "executable" stackblitz is an HTML file with a `<form>` that makes a post to stackblitz on submit. It
+contains an `<input>` element for each file we need in the stackblitz.
+
+The form will be submitted on load, so you can either double click the HTML file or open it with an
+anchor tag to open the stackblitz.
+
+So the `builder.js` job is to get all the needed files from an example and build this HTML file for you.
+
+## Customizing the generation per example basis
+
+How does this tool know what is an example and what is not? It will look for all folders containing a
+`stackblitz.json` file. If found, all files within the folder and subfolders will be used in the stackblitz, with
+a few generic exceptions that you can find at `builder.js`.
+
+You can use the `stackblitz.json` to customize the stackblitz generation. For example:
+
+```json
+{
+  "description": "Tour of Heroes: Part 6",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes", "http"]
+}
+```
+
+Here you can specify a description for the stackblitz, some tags and also a files array where you
+can specify extra files to add or to ignore.
+
+## Executing the stackblitz generation
+
+`generateStackblitz.js` will create a stackblitz for each `stackblitz.json` it finds.
+
+Where? At `src/generated/live-examples/`.
+
+Then the `<live-example>` embedded component will look at this folder to get the stackblitz it needs for the
+example.
+
+## Appendix: Why not generating stackblitz at runtime?
+
+At AngularJS, all the plunker examples were generated a runtime. The downside was that all the example code had to be 
+deployed as well and would no longer be useful after the plunker was generated. 
+
+This `StackblitzBuilder` tool takes a few seconds to run, and the end result is only 3mb~.
diff --git a/aio/tools/stackblitz-builder/builder.js b/aio/tools/stackblitz-builder/builder.js
new file mode 100644
index 000000000000..a738b2eca38b
--- /dev/null
+++ b/aio/tools/stackblitz-builder/builder.js
@@ -0,0 +1,306 @@
+'use strict';
+
+// Canonical path provides a consistent path (i.e. always forward slashes) across different OSes
+var path = require('canonical-path');
+var Q = require('q');
+var _ = require('lodash');
+var jsdom = require("jsdom");
+var fs = require("fs-extra");
+var globby = require('globby');
+
+var regionExtractor = require('../transforms/examples-package/services/region-parser');
+
+class StackblitzBuilder {
+  constructor(basePath, destPath) {
+    this.basePath = basePath;
+    this.destPath = destPath;
+
+    // Extract npm package dependencies
+    var packageJson = require(path.join(__dirname, '../examples/shared/boilerplate/cli/package.json'));
+    this.examplePackageDependencies = packageJson.dependencies;
+
+    // Add unit test packages from devDependency for unit test examples
+    var devDependencies = packageJson.devDependencies;
+    this.examplePackageDependencies['jasmine-core'] = devDependencies['jasmine-core'];
+    this.examplePackageDependencies['jasmine-marbles'] = devDependencies['jasmine-marbles'];
+
+    this.copyrights = {};
+
+    this._buildCopyrightStrings();
+  }
+
+  build() {
+    this._checkForOutdatedConfig();
+
+    // When testing it sometimes helps to look a just one example directory like so:
+    // var stackblitzPaths = path.join(this.basePath, '**/testing/*stackblitz.json');
+    var stackblitzPaths = path.join(this.basePath, '**/*stackblitz.json');
+    var fileNames = globby.sync(stackblitzPaths, { ignore: ['**/node_modules/**'] });
+    fileNames.forEach((configFileName) => {
+      try {
+        // console.log('***'+configFileName)
+        this._buildStackblitzFrom(configFileName);
+      } catch (e) {
+        console.log(e);
+      }
+    });
+  }
+
+  _addDependencies(postData) {
+    postData['dependencies'] = JSON.stringify(this.examplePackageDependencies);
+  }
+
+  _buildCopyrightStrings() {
+    var copyright = 'Copyright 2017-2018 Google Inc. All Rights Reserved.\n'
+      + 'Use of this source code is governed by an MIT-style license that\n'
+      + 'can be found in the LICENSE file at http://angular.io/license';
+    var pad = '\n\n';
+    this.copyrights.jsCss = `${pad}/*\n${copyright}\n*/`;
+    this.copyrights.html = `${pad}<!-- \n${copyright}\n-->`;
+  }
+
+  // Build stackblitz from JSON configuration file (e.g., stackblitz.json):
+  // all properties are optional
+  //   files: string[] - array of globs - defaults to all js, ts, html, json, css and md files (with certain files removed)
+  //   description: string - description of this stackblitz - defaults to the title in the index.html page.
+  //   tags: string[] - optional array of stackblitz tags (for searchability)
+  //   main: string - name of file that will become index.html in the stackblitz - defaults to index.html
+  //   file: string - name of file to display within the stackblitz (e.g. `"file": "app/app.module.ts"`)
+  _buildStackblitzFrom(configFileName) {
+    // replace ending 'stackblitz.json' with 'stackblitz.no-link.html' to create output file name;
+    var outputFileName = `stackblitz.no-link.html`;
+    outputFileName = configFileName.replace(/stackblitz\.json$/, outputFileName);
+    var altFileName;
+    if (this.destPath && this.destPath.length > 0) {
+      var partPath = path.dirname(path.relative(this.basePath, outputFileName));
+      var altFileName = path.join(this.destPath, partPath, path.basename(outputFileName)).replace('.no-link.', '.');
+    }
+    try {
+      var config = this._initConfigAndCollectFileNames(configFileName);
+      var postData = this._createPostData(config, configFileName);
+      this._addDependencies(postData);
+      var html = this._createStackblitzHtml(config, postData);
+      fs.writeFileSync(outputFileName, html, 'utf-8');
+      if (altFileName) {
+        var altDirName = path.dirname(altFileName);
+        fs.ensureDirSync(altDirName);
+        fs.writeFileSync(altFileName, html, 'utf-8');
+      }
+    } catch (e) {
+      // if we fail delete the outputFile if it exists because it is an old one.
+      if (this._existsSync(outputFileName)) {
+        fs.unlinkSync(outputFileName);
+      }
+      if (altFileName && this._existsSync(altFileName)) {
+        fs.unlinkSync(altFileName);
+      }
+      throw e;
+    }
+  }
+
+  _checkForOutdatedConfig() {
+    // Ensure that nobody is trying to use the old config filenames (i.e. `plnkr.json`).
+    var plunkerPaths = path.join(this.basePath, '**/*plnkr.json');
+    var fileNames = globby.sync(plunkerPaths, { ignore: ['**/node_modules/**'] });
+
+    if (fileNames.length) {
+      const readmePath = path.join(__dirname, 'README.md');
+      const errorMessage =
+          'One or more examples are still trying to use \'plnkr.json\' files for configuring ' +
+          'live examples. This is not supported any more. \'stackblitz.json\' should be used ' +
+          'instead.\n' +
+          `(Slight modifications may be required. See '${readmePath}' for more info.\n\n` +
+          fileNames.map(name => `- ${name}`).join('\n');
+
+      throw Error(errorMessage);
+    }
+  }
+
+  _createBaseStackblitzHtml(config) {
+    var file = '';
+
+    // TODO: Doesn't work properly yet
+    if (config.file) {
+      file = `?file=${config.file}`;
+    }
+    var action = `https://run.stackblitz.com/api/angular/v1${file}`;
+    var html = `<!DOCTYPE html><html lang="en"><body>
+    <form id="mainForm" method="post" action="${action}" target="_self"></form>
+    <script>
+      var embedded = 'ctl=1';
+      var isEmbedded = window.location.search.indexOf(embedded) > -1;
+
+      if (isEmbedded) {
+        var form = document.getElementById('mainForm');
+        var action = form.action;
+        var actionHasParams = action.indexOf('?') > -1;
+        var symbol = actionHasParams ? '&' : '?'
+        form.action = form.action + symbol + embedded;
+      }
+      document.getElementById("mainForm").submit();
+    </script>
+    </body></html>`;
+    return html;
+  }
+
+  _createPostData(config, configFileName) {
+    var postData = {};
+
+    // If `config.main` is specified, ensure that it points to an existing file.
+    if (config.main && !this._existsSync(path.join(config.basePath, config.main))) {
+      throw Error(`The main file ('${config.main}') specified in '${configFileName}' does not exist.`);
+    }
+
+    config.fileNames.forEach((fileName) => {
+      var content;
+      var extn = path.extname(fileName);
+      if (extn == '.png') {
+        content = this._encodeBase64(fileName);
+        fileName = fileName.substr(0, fileName.length - 4) + '.base64.png'
+      } else {
+        content = fs.readFileSync(fileName, 'utf-8');
+      }
+
+      if (extn == '.js' || extn == '.ts' || extn == '.css') {
+        content = content + this.copyrights.jsCss;
+      } else if (extn == '.html') {
+        content = content + this.copyrights.html;
+      }
+      // var escapedValue = escapeHtml(content);
+
+      var relativeFileName = path.relative(config.basePath, fileName);
+
+      // Is the main a custom index-xxx.html file? Rename it
+      if (relativeFileName == config.main) {
+        relativeFileName = 'src/index.html';
+      }
+
+      // A custom main.ts file? Rename it
+      if (/src\/main[-.]\w+\.ts$/.test(relativeFileName)) {
+        relativeFileName = 'src/main.ts'
+      }
+
+      if (relativeFileName == 'index.html') {
+        if (config.description == null) {
+          // set config.description to title from index.html
+          var matches = /<title>(.*)<\/title>/.exec(content);
+          if (matches) {
+            config.description = matches[1];
+          }
+        }
+      }
+
+      content = regionExtractor()(content, extn.substr(1)).contents;
+
+      postData[`files[${relativeFileName}]`] = content;
+    });
+
+    var tags = ['angular', 'example'].concat(config.tags || []);
+    tags.forEach(function(tag,ix) {
+      postData['tags[' + ix + ']'] = tag;
+    });
+
+    postData.description = "Angular Example - " + config.description;
+
+    return postData;
+  }
+
+  _createStackblitzHtml(config, postData) {
+    var baseHtml = this._createBaseStackblitzHtml(config);
+    var doc = jsdom.jsdom(baseHtml);
+    var form = doc.querySelector('form');
+    _.forEach(postData, (value, key) => {
+      var ele = this._htmlToElement(doc, '<input type="hidden" name="' + key + '">');
+      ele.setAttribute('value', value);
+      form.appendChild(ele)
+    });
+    var html = doc.documentElement.outerHTML;
+
+    return html;
+  }
+
+  _encodeBase64(file) {
+    // read binary data
+    var bitmap = fs.readFileSync(file);
+    // convert binary data to base64 encoded string
+    return Buffer(bitmap).toString('base64');
+  }
+
+  _existsSync(filename) {
+    try {
+      fs.accessSync(filename);
+      return true;
+    } catch(ex) {
+      return false;
+    }
+  }
+
+  _htmlToElement(document, html) {
+    var div = document.createElement('div');
+    div.innerHTML = html;
+    return div.firstChild;
+  }
+
+  _initConfigAndCollectFileNames(configFileName) {
+    var configDir = path.dirname(configFileName);
+    var configSrc = fs.readFileSync(configFileName, 'utf-8');
+    try {
+      var config = (configSrc && configSrc.trim().length) ? JSON.parse(configSrc) : {};
+      config.basePath = configDir; // assumes 'stackblitz.json' is at `/src` level.
+    } catch (e) {
+      throw new Error(`Stackblitz config - unable to parse json file: ${configFileName}\n${e}`);
+    }
+
+    var defaultIncludes = ['**/*.ts', '**/*.js', '**/*.css', '**/*.html', '**/*.md', '**/*.json', '**/*.png'];
+    var boilerplateIncludes = ['src/environments/*.*', 'angular.json', 'src/polyfills.ts'];
+    if (config.files) {
+      if (config.files.length > 0) {
+        if (config.files[0].substr(0, 1) == '!') {
+          config.files = defaultIncludes.concat(config.files);
+        }
+      }
+    } else {
+      config.files = defaultIncludes;
+    }
+    config.files = config.files.concat(boilerplateIncludes);
+
+    var includeSpec = false;
+    var gpaths = config.files.map(function(fileName) {
+      fileName = fileName.trim();
+      if (fileName.substr(0,1) == '!') {
+        return '!' + path.join(config.basePath, fileName.substr(1));
+      } else {
+        includeSpec = includeSpec || /\.spec\.(ts|js)$/.test(fileName);
+        return path.join(config.basePath, fileName);
+      }
+    });
+
+    var defaultExcludes = [
+      '!**/e2e/**/*.*',
+      '!**/tsconfig.json',
+      '!**/package.json',
+      '!**/example-config.json',
+      '!**/tslint.json',
+      '!**/.editorconfig',
+      '!**/wallaby.js',
+      '!**/karma-test-shim.js',
+      '!**/karma.conf.js',
+      '!**/test.ts',
+      '!**/tsconfig.app.json',
+      '!**/*stackblitz.*'
+    ];
+
+    // exclude all specs if no spec is mentioned in `files[]`
+    if (!includeSpec) {
+      defaultExcludes.push('!**/*.spec.*','!**/spec.js');
+    }
+
+    gpaths.push(...defaultExcludes);
+
+    config.fileNames = globby.sync(gpaths, { ignore: ["**/node_modules/**"] });
+
+    return config;
+  }
+}
+
+module.exports = StackblitzBuilder;
diff --git a/aio/tools/stackblitz-builder/generateStackblitz.js b/aio/tools/stackblitz-builder/generateStackblitz.js
new file mode 100644
index 000000000000..0b80089ce026
--- /dev/null
+++ b/aio/tools/stackblitz-builder/generateStackblitz.js
@@ -0,0 +1,8 @@
+const path = require('path');
+const StackblitzBuilder = require('./builder');
+
+const EXAMPLES_PATH = path.join(__dirname, '../../content/examples');
+const LIVE_EXAMPLES_PATH = path.join(__dirname, '../../src/generated/live-examples');
+
+new StackblitzBuilder(EXAMPLES_PATH, LIVE_EXAMPLES_PATH).build();
+
diff --git a/aio/tools/transforms/.eslintignore b/aio/tools/transforms/.eslintignore
new file mode 100644
index 000000000000..4f9e159136ff
--- /dev/null
+++ b/aio/tools/transforms/.eslintignore
@@ -0,0 +1 @@
+**/*.template.js
diff --git a/aio/tools/transforms/.eslintrc.js b/aio/tools/transforms/.eslintrc.js
new file mode 100644
index 000000000000..9d2b6792c224
--- /dev/null
+++ b/aio/tools/transforms/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+  'env': {
+    'es6': true,
+    'jasmine': true,
+    'node': true
+  },
+  'extends': [
+    'eslint:recommended',
+    'plugin:jasmine/recommended'
+  ],
+  'plugins': [
+    'jasmine'
+  ],
+  'rules': {
+    'indent': ['error', 2],
+    'linebreak-style': ['error', 'unix'],
+    'quotes': ['error', 'single'],
+    'semi': ['error', 'always'],
+    'jasmine/new-line-before-expect': 0
+  }
+};
diff --git a/aio/tools/transforms/README.md b/aio/tools/transforms/README.md
new file mode 100644
index 000000000000..cbda103a3d9c
--- /dev/null
+++ b/aio/tools/transforms/README.md
@@ -0,0 +1,50 @@
+# Overview
+
+All the content that is rendered by the AIO application, and some of its configuration files, are
+generated from source files by [Dgeni](https://github.com/angular/dgeni). Dgeni is a general purpose
+documentation generation tool.
+
+Markdown files in `/aio/content`, code comments in the core Angular source files and example files
+are processed and transformed into files that are consumed by the AIO application.
+
+Dgeni is configured by "packages", which contain services and processors. Some of these packages are
+installed as `node_modules` from the [dgeni-packages](https://github.com/angular/dgeni-packages) and
+some are specific to the AIO project.
+
+The project specific packages are stored in this folder (`aio/tools/transforms`).
+
+If you are an author and want to know how to generate the documentation, the steps are outlined in
+the top level [README.md](../../README.md#guide-to-authoring).
+
+## Root packages
+
+To run Dgeni, you must specify a root package, which acts as the entry point to the documentation
+generation.
+This root 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`.
+
+* The primary root package is defined in `tools/transforms/angular.io-package/index.js`. This package
+is used to run a full generation of all the documentation.
+* There are also root packages defined in `tools/transforms/authors-package/*-package.js`. These
+packages are used by the documentation authors when writing docs, since it allows them to run partial
+doc generation, which is not complete but is faster for quickly seeing changes to the document that
+you are working on.
+
+## Other packages
+
+* angular-base-package
+* angular-api-package
+* angular-content-package
+* content-package
+* examples-package
+* links-package
+* post-process-package
+* remark-package
+* target-package
+
+## Templates
+
+All the templates for the angular.io dgeni transformations are stoted in the `tools/transforms/templates`
+folder. See the [README](./templates/README.md).
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/content-rules/minLength.js b/aio/tools/transforms/angular-api-package/content-rules/minLength.js
new file mode 100644
index 000000000000..bbcd77613d77
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/content-rules/minLength.js
@@ -0,0 +1,8 @@
+module.exports = function createMinLengthRule(minLength) {
+  minLength = minLength || 2;
+  return (doc, prop, value) => {
+    if (value.length < minLength) {
+      return `Invalid "${prop}" property: "${value}". It must have at least ${minLength} characters.`;
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/content-rules/minLength.spec.js b/aio/tools/transforms/angular-api-package/content-rules/minLength.spec.js
new file mode 100644
index 000000000000..66f16e7550f6
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/content-rules/minLength.spec.js
@@ -0,0 +1,19 @@
+const createMinLengthRule = require('./minLength');
+
+describe('createMinLength rule', () => {
+
+  const defaultRule = createMinLengthRule();
+  const atLeast5CharsRule = createMinLengthRule(5);
+
+  it('should return `undefined` if the length of the property value is long enough', () => {
+    expect(defaultRule({}, 'description', 'abc')).toBeUndefined();
+    expect(atLeast5CharsRule({}, 'description', 'abcde')).toBeUndefined();
+  });
+
+  it('should return an error message if length of the property value is not long enough', () => {
+    expect(defaultRule({}, 'description', 'a'))
+      .toEqual('Invalid "description" property: "a". It must have at least 2 characters.');
+    expect(atLeast5CharsRule({}, 'description', 'abcd'))
+      .toEqual('Invalid "description" property: "abcd". It must have at least 5 characters.');
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/content-rules/noMarkdownHeadings.js b/aio/tools/transforms/angular-api-package/content-rules/noMarkdownHeadings.js
new file mode 100644
index 000000000000..427fb9bc90c8
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/content-rules/noMarkdownHeadings.js
@@ -0,0 +1,50 @@
+/**
+ * A factory for creating a rule for the `checkContentRules` processor, which disallows markdown
+ * headings in a content property.
+ *
+ * @param {...number|string} disallowedHeadings
+ * Each parameter identifies heading levels that are not allowed. They can be in the form of:
+ *
+ * - a number (e.g. 1), which implies that the specified heading is not allowed
+ * - a range (e.g. '2,3'), which implies the range of headings that are not allowed
+ *
+ * (A range can be open ended on the upper bound by not specifying a value after the comma.)
+ *
+ * @example
+ * To create a rule that will only allow level 3 headings:
+ *
+ * ```
+ * const rule = createNoMarkdownHeadingRule(1, 2, '4,');
+ * ```
+ *
+ */
+module.exports = function createrNoMarkdownHeadingRule() {
+  const args = Array.prototype.slice.apply(arguments);
+  const disallowedHeadings = args.map(arg => `#{${arg}}`);
+  if (!disallowedHeadings.length) {
+    disallowedHeadings.push('#{1,}');
+  }
+  const regex = new RegExp(`^ {0,3}(${disallowedHeadings.join('|')}) +.*$`, 'mg');
+  return (doc, prop, value) => {
+    let match, matches = [];
+    while(match = regex.exec(value)) { // eslint-disable-line no-cond-assign
+      matches.push(match[0]);
+    }
+    if (matches.length) {
+      const list = listify(matches.map(match => `"${match}"`));
+      return `Invalid headings found in "${prop}" property: ${list}.`;
+    }
+  };
+};
+
+
+/**
+ * Convert an array of strings in to a human list - e.g separated by commas and the word `and`.
+ * @param {string[]} values The strings to convert to a list
+ */
+function listify(values) {
+  if (values.length <= 1) return values;
+  const last = values[values.length - 1];
+  const rest = values.slice(0, values.length - 1);
+  return [rest.join(', '), last].join(' and ');
+}
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/content-rules/noMarkdownHeadings.spec.js b/aio/tools/transforms/angular-api-package/content-rules/noMarkdownHeadings.spec.js
new file mode 100644
index 000000000000..82c68185ff86
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/content-rules/noMarkdownHeadings.spec.js
@@ -0,0 +1,59 @@
+const createNoMarkdownHeadings = require('./noMarkdownHeadings');
+
+describe('createNoMarkdownHeadings rule', () => {
+
+  const noMarkdownHeadings = createNoMarkdownHeadings();
+
+  it('should return `undefined` if there is no heading in a value', () => {
+    expect(noMarkdownHeadings({}, 'description', 'some ## text'))
+      .toBeUndefined();
+  });
+
+  it('should return an error message if there is a markdown heading in a single line value', () => {
+    expect(noMarkdownHeadings({}, 'description', '# heading 1'))
+        .toEqual('Invalid headings found in "description" property: "# heading 1".');
+  });
+
+  it('should return an error message if there is a markdown heading in a multiline value', () => {
+    expect(noMarkdownHeadings({}, 'description', 'some text\n# heading 1'))
+        .toEqual('Invalid headings found in "description" property: "# heading 1".');
+  });
+
+  it('should cope with up to 3 spaces before the heading marker', () => {
+    expect(noMarkdownHeadings({}, 'description', ' # heading 1'))
+        .toEqual('Invalid headings found in "description" property: " # heading 1".');
+    expect(noMarkdownHeadings({}, 'description', '  # heading 1'))
+        .toEqual('Invalid headings found in "description" property: "  # heading 1".');
+    expect(noMarkdownHeadings({}, 'description', '   # heading 1'))
+        .toEqual('Invalid headings found in "description" property: "   # heading 1".');
+  });
+
+  it('should return an error message for each heading found', () => {
+    expect(noMarkdownHeadings({}, 'description', '# heading 1\nsome text\n## heading 2\nmore text\n### heading 3'))
+        .toEqual('Invalid headings found in "description" property: "# heading 1", "## heading 2" and "### heading 3".');
+  });
+
+  describe('(specified heading levels)', () => {
+    it('should take heading levels into account', () => {
+      const noTopLevelHeadings = createNoMarkdownHeadings(1);
+      expect(noTopLevelHeadings({}, 'description', '# top level'))
+        .toEqual('Invalid headings found in "description" property: "# top level".');
+      expect(noTopLevelHeadings({}, 'description', '## second level'))
+        .toBeUndefined();
+      expect(noTopLevelHeadings({}, 'description', '### third level'))
+        .toBeUndefined();
+      expect(noTopLevelHeadings({}, 'description', '#### fourth level'))
+        .toBeUndefined();
+
+      const allowLevel3Headings = createNoMarkdownHeadings(1, 2, '4,');
+      expect(allowLevel3Headings({}, 'description', '# top level'))
+        .toEqual('Invalid headings found in "description" property: "# top level".');
+      expect(allowLevel3Headings({}, 'description', '## second level'))
+        .toEqual('Invalid headings found in "description" property: "## second level".');
+      expect(allowLevel3Headings({}, 'description', '### third level'))
+        .toBeUndefined();
+      expect(allowLevel3Headings({}, 'description', '#### fourth level'))
+      .toEqual('Invalid headings found in "description" property: "#### fourth level".');
+    });
+  });
+});
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 000000000000..a40e3f7ed16f
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/index.js
@@ -0,0 +1,260 @@
+/**
+ * @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/migrateLegacyJSDocTags'))
+  .processor(require('./processors/splitDescription'))
+  .processor(require('./processors/convertPrivateClassesToInterfaces'))
+  .processor(require('./processors/generateApiListDoc'))
+  .processor(require('./processors/addNotYetDocumentedProperty'))
+  .processor(require('./processors/mergeDecoratorDocs'))
+  .processor(require('./processors/extractDecoratedClasses'))
+  .processor(require('./processors/extractPipeParams'))
+  .processor(require('./processors/matchUpDirectiveDecorators'))
+  .processor(require('./processors/addMetadataAliases'))
+  .processor(require('./processors/computeApiBreadCrumbs'))
+  .processor(require('./processors/filterContainedDocs'))
+  .processor(require('./processors/processClassLikeMembers'))
+  .processor(require('./processors/markBarredODocsAsPrivate'))
+  .processor(require('./processors/filterPrivateDocs'))
+  .processor(require('./processors/computeSearchTitle'))
+  .processor(require('./processors/simplifyMemberAnchors'))
+  .processor(require('./processors/computeStability'))
+  .processor(require('./processors/removeInjectableConstructors'))
+  .processor(require('./processors/processPackages'))
+
+  /**
+   * These are the API doc types that will be rendered to actual files.
+   * This is a super set of the exported docs, since we convert some classes to
+   * more Angular specific API types, such as decorators and directives.
+   */
+  .factory(function API_DOC_TYPES_TO_RENDER(EXPORT_DOC_TYPES) {
+    return EXPORT_DOC_TYPES.concat(['decorator', 'directive', 'pipe', 'package']);
+  })
+
+  /**
+   * These are the doc types that are contained within other docs
+   */
+  .factory(function API_CONTAINED_DOC_TYPES() {
+    return ['member', 'function-overload', 'get-accessor-info', 'set-accessor-info', 'parameter'];
+  })
+
+  /**
+   * These are the doc types that are API docs, including ones that will be merged into container docs,
+   * such as members and overloads.
+   */
+  .factory(function API_DOC_TYPES(API_DOC_TYPES_TO_RENDER, API_CONTAINED_DOC_TYPES) {
+    return API_DOC_TYPES_TO_RENDER.concat(API_CONTAINED_DOC_TYPES);
+  })
+
+  .factory(require('./readers/package-content'))
+
+  // Where do we get the source files?
+  .config(function(readTypeScriptModules, readFilesProcessor, collectExamples, tsParser, packageContentFileReader) {
+
+    // Tell TypeScript how to load modules that start with with `@angular`
+    tsParser.options.paths = { '@angular/*': [API_SOURCE_PATH + '/*'] };
+    tsParser.options.baseUrl = '.';
+
+    // API files are typescript
+    readTypeScriptModules.basePath = API_SOURCE_PATH;
+    readTypeScriptModules.ignoreExportsMatching = [/^[_ɵ]|^VERSION$/];
+    readTypeScriptModules.hidePrivateMembers = true;
+
+    // NOTE: This list shold be in sync with tools/public_api_guard/BUILD.bazel
+    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',
+      'elements/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',
+      'service-worker/index.ts',
+      'upgrade/index.ts',
+      'upgrade/static/index.ts',
+    ];
+
+    readFilesProcessor.fileReaders.push(packageContentFileReader);
+
+    // API Examples
+    readFilesProcessor.sourceFiles = [
+      {
+        basePath: API_SOURCE_PATH,
+        include: API_SOURCE_PATH + '/examples/**/*',
+        fileReader: 'exampleFileReader'
+      },
+      {
+        basePath: API_SOURCE_PATH,
+        include: API_SOURCE_PATH + '/**/PACKAGE.md',
+        fileReader: 'packageContentFileReader'
+      }
+    ];
+    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')));
+  })
+
+  .config(function(computeStability, splitDescription, addNotYetDocumentedProperty, API_DOC_TYPES_TO_RENDER, API_DOC_TYPES) {
+    computeStability.docTypes = API_DOC_TYPES_TO_RENDER;
+    // Only split the description on the API docs
+    splitDescription.docTypes = API_DOC_TYPES.concat(['package-content']);
+    addNotYetDocumentedProperty.docTypes = API_DOC_TYPES;
+  })
+
+  .config(function(mergeDecoratorDocs) {
+    mergeDecoratorDocs.propertiesToMerge = [
+      'shortDescription',
+      'description',
+      'security',
+      'deprecated',
+      'see',
+      'usageNotes',
+    ];
+  })
+
+  .config(function(checkContentRules, EXPORT_DOC_TYPES) {
+    // Min length rules
+    const createMinLengthRule = require('./content-rules/minLength');
+    const paramRuleSet = checkContentRules.docTypeRules['parameter'] = checkContentRules.docTypeRules['parameter'] || {};
+    const paramRules = paramRuleSet['name'] = paramRuleSet['name'] || [];
+    paramRules.push(createMinLengthRule());
+
+    // Heading rules
+    const createNoMarkdownHeadingsRule = require('./content-rules/noMarkdownHeadings');
+    const noMarkdownHeadings = createNoMarkdownHeadingsRule();
+    const allowOnlyLevel3Headings = createNoMarkdownHeadingsRule(1, 2, '4,');
+    const DOC_TYPES_TO_CHECK = EXPORT_DOC_TYPES.concat(['member', 'overload-info']);
+    const PROPS_TO_CHECK = ['description', 'shortDescription'];
+
+    DOC_TYPES_TO_CHECK.forEach(docType => {
+      const ruleSet = checkContentRules.docTypeRules[docType] = checkContentRules.docTypeRules[docType] || {};
+      PROPS_TO_CHECK.forEach(prop => {
+        const rules = ruleSet[prop] = ruleSet[prop] || [];
+        rules.push(noMarkdownHeadings);
+      });
+      const rules = ruleSet['usageNotes'] = ruleSet['usageNotes'] || [];
+      rules.push(allowOnlyLevel3Headings);
+    });
+  })
+
+  .config(function(filterContainedDocs, API_CONTAINED_DOC_TYPES) {
+    filterContainedDocs.docTypes = API_CONTAINED_DOC_TYPES;
+  })
+
+  .config(function(checkContentRules, API_DOC_TYPES, API_CONTAINED_DOC_TYPES) {
+    addMinLengthRules(checkContentRules);
+    addHeadingRules(checkContentRules, API_DOC_TYPES);
+    addAllowedPropertiesRules(checkContentRules, API_CONTAINED_DOC_TYPES);
+  })
+
+  .config(function(computePathsProcessor, EXPORT_DOC_TYPES, generateApiListDoc) {
+
+    const API_SEGMENT = 'api';
+
+    generateApiListDoc.outputFolder = API_SEGMENT;
+
+    computePathsProcessor.pathTemplates.push({
+      docTypes: ['package'],
+      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, API_DOC_TYPES_TO_RENDER, API_DOC_TYPES, autoLinkCode) {
+    convertToJsonProcessor.docTypes = convertToJsonProcessor.docTypes.concat(API_DOC_TYPES_TO_RENDER);
+    postProcessHtml.docTypes = convertToJsonProcessor.docTypes.concat(API_DOC_TYPES_TO_RENDER);
+    autoLinkCode.docTypes = API_DOC_TYPES;
+    autoLinkCode.codeElements = ['code', 'code-example', 'code-pane'];
+  });
+
+
+function addMinLengthRules(checkContentRules) {
+  const createMinLengthRule = require('./content-rules/minLength');
+  const paramRuleSet = checkContentRules.docTypeRules['parameter'] = checkContentRules.docTypeRules['parameter'] || {};
+  const paramRules = paramRuleSet['name'] = paramRuleSet['name'] || [];
+  paramRules.push(createMinLengthRule());
+}
+
+function addHeadingRules(checkContentRules, API_DOC_TYPES) {
+  const createNoMarkdownHeadingsRule = require('./content-rules/noMarkdownHeadings');
+  const noMarkdownHeadings = createNoMarkdownHeadingsRule();
+  const allowOnlyLevel3Headings = createNoMarkdownHeadingsRule(1, 2, '4,');
+
+  API_DOC_TYPES.forEach(docType => {
+    let rules;
+    const ruleSet = checkContentRules.docTypeRules[docType] = checkContentRules.docTypeRules[docType] || {};
+
+    rules = ruleSet['description'] = ruleSet['description'] || [];
+    rules.push(noMarkdownHeadings);
+
+    rules = ruleSet['shortDescription'] = ruleSet['shortDescription'] || [];
+    rules.push(noMarkdownHeadings);
+
+    rules = ruleSet['usageNotes'] = ruleSet['usageNotes'] || [];
+    rules.push(allowOnlyLevel3Headings);
+  });
+}
+
+function addAllowedPropertiesRules(checkContentRules, API_CONTAINED_DOC_TYPES) {
+  API_CONTAINED_DOC_TYPES.forEach(docType => {
+    const ruleSet = checkContentRules.docTypeRules[docType] = checkContentRules.docTypeRules[docType] || {};
+
+    const rules = ruleSet['usageNotes'] = ruleSet['usageNotes'] || [];
+    rules.push((doc, prop, value) => value && !isMethod(doc) &&
+      `Invalid property: "${prop}" is not allowed on "${doc.docType}" docs.`);
+  });
+}
+
+function isMethod(doc) {
+  return doc.hasOwnProperty('parameters') && !doc.isGetAccessor && !doc.isSetAccessor;
+}
diff --git a/aio/tools/transforms/angular-api-package/mocks/importedSrc.ts b/aio/tools/transforms/angular-api-package/mocks/importedSrc.ts
new file mode 100644
index 000000000000..a3f9d5d19b0d
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/mocks/importedSrc.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 const x = 100;
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/mocks/testSrc.ts b/aio/tools/transforms/angular-api-package/mocks/testSrc.ts
new file mode 100644
index 000000000000..1b6863cefbdb
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/mocks/testSrc.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
+ */
+
+/**
+ * @module
+ * @description
+ * This is the module description
+ */
+
+export * from './importedSrc';
+
+/**
+ * This is some random other comment
+ */
+
+/**
+ * This is MyClass
+ */
+export class MyClass {
+  message: String;
+
+  /**
+   * Create a new MyClass
+   * @param {String} name The name to say hello to
+   */
+  constructor(name) { this.message = 'hello ' + name; }
+
+  /**
+   * Return a greeting message
+   */
+  greet() { return this.message; }
+}
+
+/**
+ * An exported function
+ */
+export const myFn = (val: number) => val * 2;
diff --git a/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.js b/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.js
new file mode 100644
index 000000000000..433125bd1677
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.js
@@ -0,0 +1,49 @@
+const CssSelectorParser = require('css-selector-parser').CssSelectorParser;
+const cssParser = new CssSelectorParser();
+/**
+ * @dgProcessor addMetadataAliases
+ *
+ * Directives and components can also be referenced by their selectors,
+ * and Pipes can be referenced by their name.
+ * So let's add each selector as an alias to this doc.
+ */
+module.exports = function addMetadataAliasesProcessor() {
+  return {
+    $runAfter: ['extractDecoratedClassesProcessor'],
+    $runBefore: ['computing-ids'],
+    $process: function(docs) {
+      docs.forEach(doc => {
+        switch(doc.docType) {
+        case 'directive':
+        case 'component':
+          doc.aliases = doc.aliases.concat(extractSelectors(doc[doc.docType + 'Options'].selector));
+          break;
+        case 'pipe':
+          if (doc.pipeOptions.name) {
+            doc.aliases = doc.aliases.concat(stripQuotes(doc.pipeOptions.name));
+          }
+          break;
+        }
+      });
+    }
+  };
+};
+
+function extractSelectors(selectors) {
+  const selectorAST = cssParser.parse(stripQuotes(selectors));
+  const rules = selectorAST.selectors ? selectorAST.selectors.map(ruleSet => ruleSet.rule) : [selectorAST.rule];
+  const aliases = {};
+  rules.forEach(rule => {
+    if (rule.tagName) {
+      aliases[rule.tagName] = true;
+    }
+    if (rule.attrs) {
+      rule.attrs.forEach(attr => aliases[attr.name] = true);
+    }
+  });
+  return Object.keys(aliases);
+}
+
+function stripQuotes(value) {
+  return (typeof(value) === 'string') ? value.trim().replace(/^(['"])(.*)\1$/, '$2') : value;
+}
diff --git a/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.spec.js b/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.spec.js
new file mode 100644
index 000000000000..33faa8ae734a
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.spec.js
@@ -0,0 +1,57 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./addMetadataAliases');
+const Dgeni = require('dgeni');
+
+describe('addSelectorsAsAliases processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('addMetadataAliasesProcessor');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run after the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runAfter).toEqual(['extractDecoratedClassesProcessor']);
+  });
+
+  it('should run before the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runBefore).toEqual(['computing-ids']);
+  });
+
+  it('should add new aliases for directives, components and pipes', () => {
+    const processor = processorFactory();
+    const docs = [
+      { docType: 'class', name: 'MyClass', aliases: ['MyClass'] },
+      { docType: 'interface', name: 'MyInterface', aliases: ['MyInterface'] },
+      { docType: 'enum', name: 'MyEnum', aliases: ['MyEnum'] },
+      { docType: 'function', name: 'myFunction', aliases: ['myFunction'] },
+      { docType: 'pipe', name: 'MyPipe', aliases: ['MyPipe'], pipeOptions: { name: '\'myPipe\'' } },
+      { docType: 'directive', name: 'MyDirective', aliases: ['MyDirective'], directiveOptions: { selector: '\'my-directive,[myDirective],[my-directive]\'' } },
+      { docType: 'directive', name: 'NgModel', aliases: ['NgModel'], directiveOptions: { selector: '\'[ngModel]:not([formControlName]):not([formControl])\'' } },
+      { docType: 'component', name: 'MyComponent', aliases: ['MyComponent'], componentOptions: { selector: '\'my-component\'' } },
+      { docType: 'decorator', name: 'MyDecorator', aliases: ['MyDecorator'] },
+      { docType: 'package', name: 'myPackage', aliases: ['myPackage'], id: 'some/myPackage' },
+      { docType: 'var', name: 'myVar', aliases: ['myVar'] },
+      { docType: 'let', name: 'myLet', aliases: ['myLet'] },
+      { docType: 'const', name: 'myConst', aliases: ['myConst'] },
+      { docType: 'type-alias', name: 'myType', aliases: ['myType'] },
+    ];
+    processor.$process(docs);
+    expect(docs[0].aliases).toEqual([docs[0].name]);
+    expect(docs[1].aliases).toEqual([docs[1].name]);
+    expect(docs[2].aliases).toEqual([docs[2].name]);
+    expect(docs[3].aliases).toEqual([docs[3].name]);
+    expect(docs[4].aliases).toEqual([docs[4].name, 'myPipe']);
+    expect(docs[5].aliases).toEqual([docs[5].name, 'my-directive', 'myDirective']);
+    expect(docs[6].aliases).toEqual([docs[6].name, 'ngModel']);
+    expect(docs[7].aliases).toEqual([docs[7].name, 'my-component']);
+    expect(docs[8].aliases).toEqual([docs[8].name]);
+    expect(docs[9].aliases).toEqual([docs[9].name]);
+    expect(docs[10].aliases).toEqual([docs[10].name]);
+    expect(docs[11].aliases).toEqual([docs[11].name]);
+    expect(docs[12].aliases).toEqual([docs[12].name]);
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.js b/aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.js
new file mode 100644
index 000000000000..d9b69709f759
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.js
@@ -0,0 +1,19 @@
+module.exports = function addNotYetDocumentedProperty(log, createDocMessage) {
+  return {
+    docTypes: [],
+    $runAfter: ['tags-extracted'],
+    $runBefore: ['processing-docs', 'splitDescription'],
+    $process(docs) {
+      docs.forEach(doc => {
+        if (
+          this.docTypes.indexOf(doc.docType) !== -1 &&
+          !doc.noDescription &&
+          (!doc.description || doc.description.trim().length === 0)
+        ) {
+          doc.notYetDocumented = true;
+          log.debug(createDocMessage('Not yet documented', doc));
+        }
+      });
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.spec.js b/aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.spec.js
new file mode 100644
index 000000000000..e8037165f3f2
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.spec.js
@@ -0,0 +1,60 @@
+const testPackage = require('../../helpers/test-package');
+const Dgeni = require('dgeni');
+
+describe('addNotYetDocumentedProperty', function() {
+  let processor;
+
+  beforeEach(function() {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    processor = injector.get('addNotYetDocumentedProperty');
+    processor.docTypes = ['test'];
+    processor.properties = ['description', 'name'];
+  });
+
+  it('should run at the right time', () => {
+    expect(processor.$runAfter).toEqual(['tags-extracted']);
+    expect(processor.$runBefore).toEqual(['processing-docs', 'splitDescription']);
+  });
+
+  it('should mark docs with no `description` property as "not yet documented"', () => {
+    const docs = [
+      {id: 'a', docType: 'test', description: 'some content' },
+      {id: 'b', docType: 'test', description: '' },
+      {id: 'c', docType: 'test' },
+    ];
+
+    processor.$process(docs);
+
+    expect(docs[0].notYetDocumented).toBeFalsy();
+    expect(docs[1].notYetDocumented).toBeTruthy();
+    expect(docs[2].notYetDocumented).toBeTruthy();
+  });
+
+  it('should ignore docs that do not match the specified doc types', () => {
+    const docs = [
+      {id: 'a', docType: 'other', description: '' },
+      {id: 'b', docType: 'other', shortDescription: '' },
+      {id: 'c', docType: 'other' },
+    ];
+
+    processor.$process(docs);
+    expect(docs[0].notYetDocumented).toBeFalsy();
+    expect(docs[1].notYetDocumented).toBeFalsy();
+    expect(docs[2].notYetDocumented).toBeFalsy();
+  });
+
+
+  it('should not mark documents explicitly tagged as `@noDescription`', function() {
+    const docs = [
+      {id: 'a', docType: 'other', description: '', noDescription: true },
+      {id: 'b', docType: 'other', shortDescription: '', noDescription: true },
+      {id: 'c', docType: 'other', noDescription: true },
+    ];
+
+    processor.$process(docs);
+    expect(docs[0].notYetDocumented).toBeFalsy();
+    expect(docs[1].notYetDocumented).toBeFalsy();
+    expect(docs[2].notYetDocumented).toBeFalsy();
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/processors/computeApiBreadCrumbs.js b/aio/tools/transforms/angular-api-package/processors/computeApiBreadCrumbs.js
new file mode 100644
index 000000000000..622b4d320222
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/computeApiBreadCrumbs.js
@@ -0,0 +1,34 @@
+module.exports = function computeApiBreadCrumbs(API_DOC_TYPES_TO_RENDER) {
+  return {
+    $runAfter: ['paths-computed'],
+    $runBefore: ['rendering-docs'],
+    $process(docs) {
+      // Compute the breadcrumb for each doc by processing its containers
+      docs.forEach(doc => {
+        if (API_DOC_TYPES_TO_RENDER.indexOf(doc.docType) !== -1) {
+          doc.breadCrumbs = [];
+          doc.breadCrumbs.push({ text: 'API', path: '/api' });
+          if (isSecondaryEntryPoint(doc)) {
+            doc.breadCrumbs.push(createPackageBreadcrumb(doc));
+          }
+          if (doc.moduleDoc) {
+            if (isSecondaryEntryPoint(doc.moduleDoc)) {
+              doc.breadCrumbs.push(createPackageBreadcrumb(doc.moduleDoc));
+            }
+            doc.breadCrumbs.push({ text: '@angular/' + doc.moduleDoc.id, path: doc.moduleDoc.path });
+          }
+          doc.breadCrumbs.push({ text: doc.name, path: doc.path });
+        }
+
+      });
+    }
+  };
+};
+
+function isSecondaryEntryPoint(doc) {
+  return doc.docType === 'package' && !doc.isPrimaryPackage;
+}
+
+function createPackageBreadcrumb(doc) {
+  return { text: doc.packageInfo.primary.name, path: doc.packageInfo.primary.path };
+}
diff --git a/aio/tools/transforms/angular-api-package/processors/computeApiBreadCrumbs.spec.js b/aio/tools/transforms/angular-api-package/processors/computeApiBreadCrumbs.spec.js
new file mode 100644
index 000000000000..2266cc149b78
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/computeApiBreadCrumbs.spec.js
@@ -0,0 +1,61 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./computeApiBreadCrumbs');
+const Dgeni = require('dgeni');
+
+describe('angular-api-package: computeApiBreadCrumbs processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('computeApiBreadCrumbs');
+    expect(processor.$process).toBeDefined();
+    expect(processor.$runAfter).toEqual(['paths-computed']);
+    expect(processor.$runBefore).toEqual(['rendering-docs']);
+  });
+
+  it('should attach a breadCrumbs property to each of the API_DOC_TYPES_TO_RENDER docs', () => {
+    const API_DOC_TYPES_TO_RENDER = ['class', 'interface', 'package'];
+    const processor = processorFactory(API_DOC_TYPES_TO_RENDER);
+
+    const httpPackage = { docType: 'package', name: '@angular/http', id: 'http', path: 'http', isPrimaryPackage: true };
+    const httpTestingPackage = { docType: 'package', name: '@angular/http/testing', id: 'http/testing', path: 'http/testing', packageInfo: { primary: httpPackage } };
+    const testRequestClass = { docType: 'class', name: 'TestRequest', path: 'http/testing/test-request', moduleDoc: httpTestingPackage };
+
+    const docs = [
+      { docType: 'class', name: 'ClassA', path: 'module-1/class-a', moduleDoc: { id: 'moduleOne', path: 'module-1' } },
+      { docType: 'interface', name: 'InterfaceB', path: 'module-2/interface-b', moduleDoc: { id: 'moduleTwo', path: 'module-2' } },
+      { docType: 'guide', name: 'Guide One', path: 'guide/guide-1' },
+      httpPackage,
+      httpTestingPackage,
+      testRequestClass
+    ];
+    processor.$process(docs);
+
+    expect(docs[0].breadCrumbs).toEqual([
+      { text: 'API', path: '/api' },
+      { text: '@angular/moduleOne', path: 'module-1' },
+      { text: 'ClassA', path: 'module-1/class-a' },
+    ]);
+    expect(docs[1].breadCrumbs).toEqual([
+      { text: 'API', path: '/api' },
+      { text: '@angular/moduleTwo', path: 'module-2' },
+      { text: 'InterfaceB', path: 'module-2/interface-b' },
+    ]);
+    expect(docs[2].breadCrumbs).toBeUndefined();
+    expect(docs[3].breadCrumbs).toEqual([
+      { text: 'API', path: '/api' },
+      { text: '@angular/http', path: 'http' },
+    ]);
+    expect(docs[4].breadCrumbs).toEqual([
+      { text: 'API', path: '/api' },
+      { text: '@angular/http', path: 'http' },
+      { text: '@angular/http/testing', path: 'http/testing' },
+    ]);
+    expect(docs[5].breadCrumbs).toEqual([
+      { text: 'API', path: '/api' },
+      { text: '@angular/http', path: 'http' },
+      { text: '@angular/http/testing', path: 'http/testing' },
+      { text: 'TestRequest', path: 'http/testing/test-request' },
+    ]);
+  });
+});
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 000000000000..295a2839fabd
--- /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 'package':
+          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 000000000000..61b205d95647
--- /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: 'package', name: 'myPackage', id: 'some/myPackage' },
+      { 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/myPackage 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/tools/transforms/angular-api-package/processors/computeStability.js b/aio/tools/transforms/angular-api-package/processors/computeStability.js
new file mode 100644
index 000000000000..bcf1a2fb0dd1
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/computeStability.js
@@ -0,0 +1,18 @@
+module.exports = function computeStability(log, createDocMessage) {
+  return {
+    docTypes: [],
+    $runAfter: ['tags-extracted'],
+    $runBefore: ['rendering-docs'],
+    $process(docs) {
+      docs.forEach(doc => {
+        if (this.docTypes.indexOf(doc.docType) !== -1 &&
+            doc.experimental === undefined &&
+            doc.deprecated === undefined &&
+            doc.stable === undefined) {
+          log.debug(createDocMessage('Adding stable property', doc));
+          doc.stable = true;
+        }
+      });
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/processors/computeStability.spec.js b/aio/tools/transforms/angular-api-package/processors/computeStability.spec.js
new file mode 100644
index 000000000000..e1203c8d83cd
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/computeStability.spec.js
@@ -0,0 +1,82 @@
+const log = require('dgeni/lib/mocks/log')(false);
+const createDocMessage = require('dgeni-packages/base/services/createDocMessage')();
+const computeStability = require('./computeStability')(log, createDocMessage);
+const testPackage = require('../../helpers/test-package');
+const Dgeni = require('dgeni');
+
+describe('computeStability processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('computeStability');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run before the correct processor', () => {
+    expect(computeStability.$runBefore).toEqual(['rendering-docs']);
+  });
+
+  it('should run after the correct processor', () => {
+    expect(computeStability.$runAfter).toEqual(['tags-extracted']);
+  });
+
+  it('should compute stability based on the existence of experimental and deprecated tags', () => {
+    computeStability.docTypes = ['test'];
+    const docs = [
+      { docType: 'test' },
+      { docType: 'test', experimental: undefined },
+      { docType: 'test', experimental: true },
+      { docType: 'test', experimental: '' },
+      { docType: 'test', deprecated: undefined },
+      { docType: 'test', deprecated: true },
+      { docType: 'test', deprecated: '' },
+      { docType: 'test', experimental: true, deprecated: true },
+    ];
+    computeStability.$process(docs);
+    expect(docs.map(doc => doc.stable)).toEqual([
+      true,
+      true,
+      undefined,
+      undefined,
+      true,
+      undefined,
+      undefined,
+      undefined
+    ]);
+  });
+
+  it('should ignore docs that are not in the docTypes list', () => {
+    computeStability.docTypes = ['test1', 'test2'];
+    const docs = [
+      { docType: 'test1' },
+      { docType: 'test2' },
+      { docType: 'test3' },
+      { docType: 'test4' },
+    ];
+    computeStability.$process(docs);
+    expect(docs.map(doc => doc.stable)).toEqual([
+      true,
+      true,
+      undefined,
+      undefined
+    ]);
+  });
+
+  it('should not ignore docs where `stable` has already been defined', () => {
+    computeStability.docTypes = ['test'];
+    const docs = [
+      { docType: 'test' },
+      { docType: 'test', stable: true },
+      { docType: 'test', stable: '' },
+      { docType: 'test', stable: undefined },
+    ];
+    computeStability.$process(docs);
+    expect(docs.map(doc => doc.stable)).toEqual([
+      true,
+      true,
+      '',
+      true
+    ]);
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/processors/convertPrivateClassesToInterfaces.js b/aio/tools/transforms/angular-api-package/processors/convertPrivateClassesToInterfaces.js
new file mode 100644
index 000000000000..83ccf6a3c361
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/convertPrivateClassesToInterfaces.js
@@ -0,0 +1,11 @@
+module.exports = function convertPrivateClassesToInterfacesProcessor(
+    convertPrivateClassesToInterfaces) {
+  return {
+    $runAfter: ['processing-docs'],
+    $runBefore: ['docs-processed'],
+    $process: function(docs) {
+      convertPrivateClassesToInterfaces(docs, false);
+      return docs;
+    }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.js b/aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.js
new file mode 100644
index 000000000000..de643aa5a5cd
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.js
@@ -0,0 +1,29 @@
+var _ = require('lodash');
+
+module.exports = function extractDecoratedClassesProcessor(EXPORT_DOC_TYPES) {
+
+  // Add the "directive" docType into those that can be exported from a module
+  EXPORT_DOC_TYPES.push('directive', 'pipe');
+
+  return {
+    $runAfter: ['processing-docs'],
+    $runBefore: ['docs-processed'],
+    decoratorTypes: ['Directive', 'Component', 'Pipe'],
+    $process: function(docs) {
+      var decoratorTypes = this.decoratorTypes;
+
+      _.forEach(docs, function(doc) {
+
+        _.forEach(doc.decorators, function(decorator) {
+
+          if (decoratorTypes.indexOf(decorator.name) !== -1) {
+            doc.docType = decorator.name.toLowerCase();
+            doc[doc.docType + 'Options'] = decorator.argumentInfo[0];
+          }
+        });
+      });
+
+      return docs;
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.spec.js b/aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.spec.js
new file mode 100644
index 000000000000..b626f6c13064
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.spec.js
@@ -0,0 +1,48 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('extractDecoratedClasses processor', function() {
+  var dgeni, injector, processor;
+
+  beforeEach(function() {
+    dgeni = new Dgeni([testPackage('angular-api-package')]);
+    injector = dgeni.configureInjector();
+    processor = injector.get('extractDecoratedClassesProcessor');
+  });
+
+  it('should extract specified decorator arguments', function() {
+    var doc1 = {
+      id: '@angular/common/ngFor',
+      name: 'ngFor',
+      docType: 'class',
+      decorators: [{
+        name: 'Directive',
+        arguments: ['{selector: \'[ng-for][ng-for-of]\', properties: [\'ngForOf\']}'],
+        argumentInfo: [{selector: '[ng-for][ng-for-of]', properties: ['ngForOf']}]
+      }]
+    };
+    var doc2 = {
+      id: '@angular/core/DecimalPipe',
+      name: 'DecimalPipe',
+      docType: 'class',
+      decorators:
+          [{name: 'Pipe', arguments: ['{name: \'number\'}'], argumentInfo: [{name: 'number'}]}]
+    };
+
+    processor.$process([doc1, doc2]);
+
+    expect(doc1).toEqual(jasmine.objectContaining({
+      id: '@angular/common/ngFor',
+      name: 'ngFor',
+      docType: 'directive',
+      directiveOptions: {selector: '[ng-for][ng-for-of]', properties: ['ngForOf']}
+    }));
+
+    expect(doc2).toEqual(jasmine.objectContaining({
+      id: '@angular/core/DecimalPipe',
+      name: 'DecimalPipe',
+      docType: 'pipe',
+      pipeOptions: {name: 'number'}
+    }));
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/processors/extractPipeParams.js b/aio/tools/transforms/angular-api-package/processors/extractPipeParams.js
new file mode 100644
index 000000000000..441377e01936
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/extractPipeParams.js
@@ -0,0 +1,19 @@
+module.exports = function extractPipeParams(createDocMessage) {
+  return {
+    $runAfter: ['extractDecoratedClassesProcessor'],
+    $runBefore: ['docs-processed'],
+    $process(docs) {
+      docs.forEach(doc => {
+        if (doc.docType === 'pipe') {
+          const transformFn = doc.members && doc.members.find(member => member.name === 'transform');
+          if (!transformFn) {
+            throw new Error(createDocMessage('Missing `transform` method - pipes must implement PipeTransform interface', doc));
+          }
+          doc.pipeName = doc.pipeOptions.name.replace(/^["']|["']$/g, '');
+          doc.valueParam = transformFn.parameterDocs[0];
+          doc.pipeParams = transformFn.parameterDocs.slice(1);
+        }
+      });
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/processors/extractPipeParams.spec.js b/aio/tools/transforms/angular-api-package/processors/extractPipeParams.spec.js
new file mode 100644
index 000000000000..75448ba477bd
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/extractPipeParams.spec.js
@@ -0,0 +1,61 @@
+const testPackage = require('../../helpers/test-package');
+const Dgeni = require('dgeni');
+
+describe('extractPipeParams processor', () => {
+  let processor;
+  beforeEach(() => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    processor = injector.get('extractPipeParams');
+  });
+
+  it('should be available on the injector', () => {
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run before the correct processor', () => {
+    expect(processor.$runBefore).toEqual(['docs-processed']);
+  });
+
+  it('should run after the correct processor', () => {
+    expect(processor.$runAfter).toEqual(['extractDecoratedClassesProcessor']);
+  });
+
+  it('should throw an error if the pipe document does not contain a `transform` method', () => {
+    expect(() => processor.$process([{ docType: 'pipe' }])).toThrowError('Missing `transform` method - pipes must implement PipeTransform interface - doc (pipe) ');
+    expect(() => processor.$process([{ docType: 'pipe', members: [] }])).toThrowError('Missing `transform` method - pipes must implement PipeTransform interface - doc (pipe) ');
+    expect(() => processor.$process([{ docType: 'pipe', members: [ { name: 'notTransform' }] }])).toThrowError('Missing `transform` method - pipes must implement PipeTransform interface - doc (pipe) ');
+  });
+
+  it('should extract the pipe name', () => {
+    const docs = [ { docType: 'pipe', pipeOptions: { name: 'testPipe' }, members: [ { name: 'transform', parameterDocs: [] }] } ];
+    processor.$process(docs);
+    expect(docs[0].pipeName).toEqual('testPipe');
+  });
+
+  it('should extract the value parameter', () => {
+    const valueParam = {};
+    const pipeParam1 = {};
+    const pipeParam2 = {};
+    const docs = [ { docType: 'pipe', pipeOptions: { name: 'testPipe' }, members: [
+      { name: 'transform', parameterDocs: [valueParam, pipeParam1, pipeParam2] }
+    ] } ];
+    processor.$process(docs);
+    expect(docs[0].valueParam).toBe(valueParam);
+  });
+
+  it('should extract the pipe parameters', () => {
+    const valueParam = {};
+    const pipeParam1 = {};
+    const pipeParam2 = {};
+    const docs = [ { docType: 'pipe', pipeOptions: { name: 'testPipe' }, members: [
+      { name: 'transform', parameterDocs: [valueParam, pipeParam1, pipeParam2] }
+    ] } ];
+    processor.$process(docs);
+    expect(docs[0].pipeParams.length).toEqual(2);
+    expect(docs[0].pipeParams[0]).toBe(pipeParam1);
+    expect(docs[0].pipeParams[1]).toBe(pipeParam2);
+  });
+});
+
+
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 000000000000..df62bfd88863
--- /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', 'get-accessor-info', 'set-accessor-info', 'parameter'],
+    $runAfter: ['extra-docs-added', 'checkContentRules'],
+    $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/tools/transforms/angular-api-package/processors/filterPrivateDocs.js b/aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.js
new file mode 100644
index 000000000000..cd9ee16f97f5
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.js
@@ -0,0 +1,9 @@
+module.exports = function filterPrivateDocs() {
+  return {
+    $runAfter: ['extra-docs-added', 'checkContentRules'],
+    $runBefore: ['computing-paths'],
+    $process: function(docs) {
+      return docs.filter(function(doc) { return doc.privateExport !== true; });
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.spec.js b/aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.spec.js
new file mode 100644
index 000000000000..8715abd688e8
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.spec.js
@@ -0,0 +1,40 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./filterPrivateDocs');
+const Dgeni = require('dgeni');
+
+describe('filterPrivateDocs processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('filterPrivateDocs');
+    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(['extra-docs-added', 'checkContentRules']);
+  });
+
+  it('should remove docs that are marked as private exports', () => {
+    const processor = processorFactory();
+    const docs = [
+      { name: 'public1'},
+      { name: 'ɵPrivate1', privateExport: true },
+      { name: 'public2'},
+      { name: 'ɵPrivate2', privateExport: true },
+      { id: 'other'}
+    ];
+    const filteredDocs = processor.$process(docs);
+    expect(filteredDocs).toEqual([
+      { name: 'public1'},
+      { name: 'public2'},
+      { id: 'other'}
+    ]);
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/processors/generateApiListDoc.js b/aio/tools/transforms/angular-api-package/processors/generateApiListDoc.js
new file mode 100644
index 000000000000..4a8fd31a1163
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/generateApiListDoc.js
@@ -0,0 +1,58 @@
+module.exports = function generateApiListDoc() {
+
+  return {
+    $runAfter: ['extra-docs-added', 'computeStability'],
+    $runBefore: ['rendering-docs'],
+    outputFolder: null,
+    $validate: {outputFolder: {presence: true}},
+    $process: function(docs) {
+      docs.push({
+        docType: 'api-list-data',
+        template: 'json-doc.template.json',
+        path: this.outputFolder + '/api-list.json',
+        outputPath: this.outputFolder + '/api-list.json',
+        data: docs
+          .filter(doc => doc.docType === 'package')
+          .map(getPackageInfo)
+      });
+    }
+  };
+};
+
+function getPackageInfo(packageDoc) {
+  const packageName = packageDoc.id.replace(/\/index$/, '');
+  return {
+    name: packageName.toLowerCase(),
+    title: packageName,
+    path: packageDoc.path,
+    items: packageDoc.exports
+                  // Ignore internals and private exports (indicated by the ɵ prefix)
+                  .filter(doc => !doc.internal && !doc.privateExport)
+                  .map(getExportInfo)
+                  .sort((a, b) => a.name === b.name ? 0 : a.name > b.name ? 1 : -1)
+  };
+}
+
+function getExportInfo(exportDoc) {
+  return {
+    name: exportDoc.name.toLowerCase(),
+    title: exportDoc.name,
+    path: exportDoc.path,
+    docType: getDocType(exportDoc),
+    stability: getStability(exportDoc),
+    securityRisk: !!exportDoc.security
+  };
+}
+
+function getDocType(doc) {
+  // We map `let` and `var` types to `const`
+  if (['let', 'var'].indexOf(doc.docType) !== -1) {
+    return 'const';
+  }
+  return doc.docType;
+}
+
+const stabilityProperties = ['stable', 'experimental', 'deprecated'];
+function getStability(doc) {
+  return stabilityProperties.find(prop => doc.hasOwnProperty(prop)) || '';
+}
diff --git a/aio/tools/transforms/angular-api-package/processors/generateApiListDoc.spec.js b/aio/tools/transforms/angular-api-package/processors/generateApiListDoc.spec.js
new file mode 100644
index 000000000000..14eda0482f72
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/generateApiListDoc.spec.js
@@ -0,0 +1,169 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./generateApiListDoc');
+const Dgeni = require('dgeni');
+
+describe('generateApiListDoc processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('generateApiListDoc');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run after the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runAfter).toEqual(['extra-docs-added', 'computeStability']);
+  });
+
+  it('should run before the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runBefore).toEqual(['rendering-docs']);
+  });
+
+  it('should create a new api list doc', () => {
+    const processor = processorFactory();
+    const docs = [];
+    processor.outputFolder = 'test/path';
+    processor.$process(docs);
+    expect(docs[0]).toEqual({
+      docType: 'api-list-data',
+      template: 'json-doc.template.json',
+      path: 'test/path/api-list.json',
+      outputPath: 'test/path/api-list.json',
+      data: []
+    });
+  });
+
+  it('should add an info object to the doc for each module doc', () => {
+    const processor = processorFactory();
+    const docs = [
+      { docType: 'package', id: '@angular/common/index', exports: [], path: 'common' },
+      { docType: 'package', id: '@angular/core/index', exports: [], path: 'core' },
+      { docType: 'package', id: '@angular/http/index', exports: [], path: 'http' },
+    ];
+    processor.$process(docs);
+    expect(docs[3].data).toEqual([
+      { name: '@angular/common', title: '@angular/common', items: [], path: 'common' },
+      { name: '@angular/core', title: '@angular/core', items: [], path: 'core' },
+      { name: '@angular/http', title: '@angular/http', items: [], path: 'http' },
+    ]);
+  });
+
+  it('should add info about each export on each module', () => {
+    const processor = processorFactory();
+    const docs = [
+      { docType: 'package', id: '@angular/common/index', exports: [
+        { docType: 'directive', name: 'AaaAaa', path: 'aaa' },
+        { docType: 'pipe', name: 'BbbBbb', path: 'bbb' },
+        { docType: 'decorator', name: 'CccCcc', path: 'ccc' },
+        { docType: 'class', name: 'DddDdd', path: 'ddd' }
+      ] },
+      { docType: 'package', id: '@angular/core/index', exports: [
+        { docType: 'interface', name: 'EeeEee', path: 'eee' },
+        { docType: 'function', name: 'FffFff', path: 'fff' },
+        { docType: 'enum', name: 'GggGgg', path: 'ggg' },
+        { docType: 'type-alias', name: 'HhhHhh', path: 'hhh' },
+        { docType: 'const', name: 'IiiIii', path: 'iii' },
+      ] },
+    ];
+    processor.$process(docs);
+    expect(docs[2].data[0].items).toEqual([
+      { docType: 'directive', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: '', securityRisk: false },
+      { docType: 'pipe', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false },
+      { docType: 'decorator', title: 'CccCcc', name: 'cccccc', path: 'ccc', stability: '', securityRisk: false },
+      { docType: 'class', title: 'DddDdd', name: 'dddddd', path: 'ddd', stability: '', securityRisk: false }
+    ]);
+    expect(docs[2].data[1].items).toEqual([
+      { docType: 'interface', title: 'EeeEee', name: 'eeeeee', path: 'eee', stability: '', securityRisk: false },
+      { docType: 'function', title: 'FffFff', name: 'ffffff', path: 'fff', stability: '', securityRisk: false },
+      { docType: 'enum', title: 'GggGgg', name: 'gggggg', path: 'ggg', stability: '', securityRisk: false },
+      { docType: 'type-alias', title: 'HhhHhh', name: 'hhhhhh', path: 'hhh', stability: '', securityRisk: false },
+      { docType: 'const', title: 'IiiIii', name: 'iiiiii', path: 'iii', stability: '', securityRisk: false },
+    ]);
+  });
+
+  it('should ignore internal and private exports', () => {
+    const processor = processorFactory();
+    const docs = [
+      { docType: 'package', id: '@angular/common/index', exports: [
+        { docType: 'directive', name: 'AaaAaa', path: 'aaa', internal: true },
+        { docType: 'class', name: 'XxxXxx', path: 'xxx', privateExport: true },
+        { docType: 'pipe', name: 'BbbBbb', path: 'bbb' }
+      ]}
+    ];
+    processor.$process(docs);
+    expect(docs[1].data[0].items).toEqual([
+      { docType: 'pipe', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false },
+    ]);
+  });
+
+  it('should convert `let` and `var` docTypes to `const`', () => {
+    const processor = processorFactory();
+    const docs = [
+      { docType: 'package', id: '@angular/common/index', exports: [
+        { docType: 'var', name: 'AaaAaa', path: 'aaa' },
+        { docType: 'let', name: 'BbbBbb', path: 'bbb' },
+      ]}
+    ];
+    processor.$process(docs);
+    expect(docs[1].data[0].items).toEqual([
+      { docType: 'const', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: '', securityRisk: false },
+      { docType: 'const', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false },
+    ]);
+  });
+
+  it('should convert security to a boolean securityRisk', () => {
+    const processor = processorFactory();
+    const docs = [
+      { docType: 'package', id: '@angular/common/index', exports: [
+        { docType: 'class', name: 'AaaAaa', path: 'aaa', security: 'This is a security risk' },
+        { docType: 'class', name: 'BbbBbb', path: 'bbb', security: '' },
+      ]}
+    ];
+    processor.$process(docs);
+    expect(docs[1].data[0].items).toEqual([
+      { docType: 'class', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: '', securityRisk: true },
+      { docType: 'class', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: '', securityRisk: false },
+    ]);
+  });
+
+  it('should convert stability tags to the stable string property', () => {
+    const processor = processorFactory();
+    const docs = [
+      { docType: 'package', id: '@angular/common/index', exports: [
+        { docType: 'class', name: 'AaaAaa', path: 'aaa', stable: undefined },
+        { docType: 'class', name: 'BbbBbb', path: 'bbb', experimental: 'Some message' },
+        { docType: 'class', name: 'CccCcc', path: 'ccc', deprecated: null },
+        { docType: 'class', name: 'DddDdd', path: 'ddd' },
+      ]}
+    ];
+    processor.$process(docs);
+    expect(docs[1].data[0].items).toEqual([
+      { docType: 'class', title: 'AaaAaa', name: 'aaaaaa', path: 'aaa', stability: 'stable', securityRisk: false },
+      { docType: 'class', title: 'BbbBbb', name: 'bbbbbb', path: 'bbb', stability: 'experimental', securityRisk: false },
+      { docType: 'class', title: 'CccCcc', name: 'cccccc', path: 'ccc', stability: 'deprecated', securityRisk: false },
+      { docType: 'class', title: 'DddDdd', name: 'dddddd', path: 'ddd', stability: '', securityRisk: false },
+    ]);
+  });
+
+  it('should sort items in each group alphabetically', () => {
+    const processor = processorFactory();
+    const docs = [
+      { docType: 'package', id: '@angular/common/index', exports: [
+        { docType: 'class', name: 'DddDdd', path: 'uuu' },
+        { docType: 'class', name: 'BbbBbb', path: 'vvv' },
+        { docType: 'class', name: 'AaaAaa', path: 'xxx' },
+        { docType: 'class', name: 'CccCcc', path: 'yyy' },
+      ]}
+    ];
+    processor.$process(docs);
+    expect(docs[1].data[0].items).toEqual([
+      { docType: 'class', title: 'AaaAaa', name: 'aaaaaa', path: 'xxx', stability: '', securityRisk: false },
+      { docType: 'class', title: 'BbbBbb', name: 'bbbbbb', path: 'vvv', stability: '', securityRisk: false },
+      { docType: 'class', title: 'CccCcc', name: 'cccccc', path: 'yyy', stability: '', securityRisk: false },
+      { docType: 'class', title: 'DddDdd', name: 'dddddd', path: 'uuu', stability: '', securityRisk: false },
+    ]);
+  });
+});
+
diff --git a/aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.js b/aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.js
new file mode 100644
index 000000000000..702811b562e1
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.js
@@ -0,0 +1,13 @@
+module.exports = function markBarredODocsAsPrivate() {
+  return {
+    $runAfter: ['readTypeScriptModules'],
+    $runBefore: ['adding-extra-docs'],
+    $process: function(docs) {
+      docs.forEach(doc => {
+        if (doc.name && doc.name.indexOf('ɵ') === 0) {
+          doc.privateExport = true;
+        }
+      });
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.spec.js b/aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.spec.js
new file mode 100644
index 000000000000..d2601ca5815b
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.spec.js
@@ -0,0 +1,28 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./markBarredODocsAsPrivate');
+const Dgeni = require('dgeni');
+
+describe('markBarredODocsAsPrivate processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('markBarredODocsAsPrivate');
+    expect(processor.$process).toBeDefined();
+    expect(processor.$runAfter).toContain('readTypeScriptModules');
+    expect(processor.$runBefore).toContain('adding-extra-docs');
+  });
+
+  it('should mark docs starting with barred-o ɵ as private', () => {
+    const processor = processorFactory();
+    const docs = [
+      { name: 'ɵPrivate' },
+      { name: 'public' }
+    ];
+    processor.$process(docs);
+
+    expect(docs[0].privateExport).toBeTruthy();
+    expect(docs[1].privateExport).toBeFalsy();
+  });
+});
+
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 000000000000..9557ceac2b7c
--- /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 000000000000..6a266203d537
--- /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 000000000000..956f2f431814
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/mergeDecoratorDocs.js
@@ -0,0 +1,126 @@
+const {mergeProperties} = require('../../helpers/utils');
+
+/**
+ * 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', 'checkContentRules'],
+    propertiesToMerge: [],
+    makeDecoratorCalls: [
+      {type: '', description: 'toplevel', functionName: 'makeDecorator'},
+      {type: 'Prop', description: 'property', functionName: 'makePropDecorator'},
+      {type: 'Param', description: 'parameter', functionName: 'makeParamDecorator'},
+    ],
+    $process(docs) {
+
+      const decoratorDocs = Object.create(null);
+
+      // find all the decorators, signified by a call to `make...Decorator<Decorator>(metadata)`
+      docs.forEach(doc => {
+        const initializer = getInitializer(doc);
+        if (initializer) {
+          this.makeDecoratorCalls.forEach(function(call) {
+            if (initializer.expression && initializer.expression.text === call.functionName) {
+              // Get the type of the decorator metadata from the first "type" argument of the call.
+              // For example the `X` of `createDecorator<X>(...)`.
+              const decoratorType = initializer.arguments[0].text;
+
+              log.debug('mergeDecoratorDocs: found decorator', doc.docType, doc.name, decoratorType);
+
+              doc.docType = 'decorator';
+              doc.decoratorLocation = call.description;
+              doc.decoratorType = decoratorType;
+
+              decoratorDocs[doc.name + 'Decorator'] = doc;
+            }
+          });
+        }
+      });
+
+      // merge the info from the associated metadata interfaces into the decorator docs
+      docs = docs.filter(doc => {
+        if (decoratorDocs[doc.name]) {
+
+          // We have found an `XxxDecorator` document that will hold the call signature of the decorator
+          var decoratorDoc = decoratorDocs[doc.name];
+          var callMember = doc.members.find(member => member.isCallMember);
+
+          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
+          mergeProperties(decoratorDoc, callMember, this.propertiesToMerge);
+
+          // remove doc from its module doc's exports
+          doc.moduleDoc.exports = doc.moduleDoc.exports.filter(exportDoc => exportDoc !== doc);
+        }
+
+        return !decoratorDocs[doc.name];
+      });
+
+      return docs;
+    }
+  };
+};
+
+function getInitializer(doc) {
+  var initializer = doc.symbol && doc.symbol.valueDeclaration && doc.symbol.valueDeclaration.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 && initializer.expression && initializer.expression.expression) {
+    initializer = initializer.expression;
+  }
+  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 000000000000..77bc9f8141bd
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/mergeDecoratorDocs.spec.js
@@ -0,0 +1,91 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('mergeDecoratorDocs processor', () => {
+  let processor, moduleDoc, decoratorDoc, metadataDoc, otherDoc;
+
+  beforeEach(() => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    processor = injector.get('mergeDecoratorDocs');
+
+    // Note that we do not include usageNotes in the tests.
+    processor.propertiesToMerge = ['description', 'shortDescription'];
+
+    moduleDoc = {};
+
+    decoratorDoc = {
+      name: 'Component',
+      docType: 'const',
+      shortDescription: 'decorator - short description',
+      description: 'decorator - description',
+      symbol: {
+        valueDeclaration: { initializer: { expression: { text: 'makeDecorator' }, arguments: [{ text: 'X' }] } }
+      },
+      members: [
+        { name: 'templateUrl', description: 'templateUrl - description' }
+      ],
+      moduleDoc
+    };
+
+    metadataDoc = {
+      name: 'ComponentDecorator',
+      docType: 'interface',
+      description: 'call interface - description',
+      members: [
+        {
+          isCallMember: true,
+          description: 'call interface - call member - description',
+          usageNotes: 'call interface - call member - usageNotes',
+        },
+        {
+          description: 'call interface - non call member - description'
+        }
+      ],
+      moduleDoc
+    };
+
+    otherDoc = {
+      name: 'Y',
+      docType: 'const',
+      symbol: {
+        valueDeclaration: { initializer: { expression: { text: 'otherCall' }, arguments: [{ text: 'param1' }] } }
+      },
+      moduleDoc
+    };
+
+    moduleDoc.exports = [decoratorDoc, metadataDoc, otherDoc];
+  });
+
+
+  it('should change the docType of only the docs that are initialized by a call to makeDecorator', () => {
+    processor.$process([decoratorDoc, metadataDoc, otherDoc]);
+    expect(decoratorDoc.docType).toEqual('decorator');
+    expect(otherDoc.docType).toEqual('const');
+  });
+
+  it('should extract the "type" of the decorator meta data', () => {
+    processor.$process([decoratorDoc, metadataDoc, otherDoc]);
+    expect(decoratorDoc.decoratorType).toEqual('X');
+  });
+
+  it('should copy across specified properties from the call signature doc', () => {
+    processor.$process([decoratorDoc, metadataDoc, otherDoc]);
+    expect(decoratorDoc.description).toEqual('call interface - call member - description');
+    // Since usageNotes is not in `propertiesToMerge` it will not get copied over in these tests.
+    expect(decoratorDoc.usageNotes).toBeUndefined();
+    // Since `shortDescription` does not exist on the call-member this will not get overridden.
+    expect(decoratorDoc.shortDescription).toEqual('decorator - short description');
+  });
+
+  it('should remove the metadataDoc from the module exports', () => {
+    processor.$process([decoratorDoc, metadataDoc, otherDoc]);
+    expect(moduleDoc.exports).not.toContain(metadataDoc);
+  });
+
+  it('should cope with decorators that have type params', () => {
+    decoratorDoc.symbol.valueDeclaration.initializer.expression.type = {};
+    processor.$process([decoratorDoc, metadataDoc, otherDoc]);
+    expect(decoratorDoc.docType).toEqual('decorator');
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/processors/migrateLegacyJSDocTags.js b/aio/tools/transforms/angular-api-package/processors/migrateLegacyJSDocTags.js
new file mode 100644
index 000000000000..cf3f10a322eb
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/migrateLegacyJSDocTags.js
@@ -0,0 +1,36 @@
+module.exports = function migrateLegacyJSDocTags(log, createDocMessage) {
+  return {
+    $runAfter: ['tags-extracted'],
+    $runBefore: ['processing-docs'],
+    $process(docs) {
+      let migrated = false;
+      docs.forEach(doc => {
+        if (doc.howToUse) {
+          if (doc.usageNotes) {
+            throw new Error(createDocMessage('`@usageNotes` and the deprecated `@howToUse` are not allowed on the same doc', doc));
+          }
+          log.debug(createDocMessage('Using deprecated `@howToUse` tag as though it was `@usageNotes` tag', doc));
+          doc.usageNotes = doc.howToUse;
+          doc.howToUse = null;
+          migrated = true;
+        }
+
+        if (doc.whatItDoes) {
+          log.debug(createDocMessage('Merging the content of `@whatItDoes` tag into the description.', doc));
+          if (doc.description) {
+            doc.description = `${doc.whatItDoes}\n\n${doc.description}`;
+          } else {
+            doc.description = doc.whatItDoes;
+          }
+          doc.whatItDoes = null;
+          migrated = true;
+        }
+      });
+
+      if (migrated) {
+        log.warn('Some deprecated tags were migrated.');
+        log.warn('This automatic handling will be removed in a future version of the doc generation.\n');
+      }
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/processors/migrateLegacyJSDocTags.spec.js b/aio/tools/transforms/angular-api-package/processors/migrateLegacyJSDocTags.spec.js
new file mode 100644
index 000000000000..e64a77dc8139
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/migrateLegacyJSDocTags.spec.js
@@ -0,0 +1,66 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./migrateLegacyJSDocTags');
+const log = require('dgeni/lib/mocks/log')(false);
+const createDocMessage = require('dgeni-packages/base/services/createDocMessage')();
+const Dgeni = require('dgeni');
+
+describe('migrateLegacyJSDocTags processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('migrateLegacyJSDocTags');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run before the correct processor', () => {
+    const processor = processorFactory(log, createDocMessage);
+    expect(processor.$runBefore).toEqual(['processing-docs']);
+  });
+
+  it('should run after the correct processor', () => {
+    const processor = processorFactory(log, createDocMessage);
+    expect(processor.$runAfter).toEqual(['tags-extracted']);
+  });
+
+  it('should migrate `howToUse` property to `usageNotes` property', () => {
+    const processor = processorFactory(log, createDocMessage);
+    const docs = [
+      { howToUse: 'this is how to use it' }
+    ];
+    processor.$process(docs);
+    expect(docs[0].howToUse).toBe(null);
+    expect(docs[0].usageNotes).toEqual('this is how to use it');
+  });
+
+  it('should migrate `whatItDoes` property to the `description`', () => {
+    const processor = processorFactory(log, createDocMessage);
+    const docs = [
+      { whatItDoes: 'what it does' },
+      { whatItDoes: 'what it does', description: 'the description' },
+      { description: 'the description' }
+    ];
+    processor.$process(docs);
+    expect(docs[0].whatItDoes).toBe(null);
+    expect(docs[0].description).toEqual('what it does');
+
+    expect(docs[1].whatItDoes).toBe(null);
+    expect(docs[1].description).toEqual('what it does\n\nthe description');
+
+    expect(docs[2].whatItDoes).toBeUndefined();
+    expect(docs[2].description).toEqual('the description');
+  });
+
+  it('should ignore docs that have neither `howToUse` nor `whatItDoes` properties', () => {
+    const processor = processorFactory(log, createDocMessage);
+    const docs = [
+      { },
+      { description: 'the description' }
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      { },
+      { description: 'the description' }
+    ]);
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/processors/processClassLikeMembers.js b/aio/tools/transforms/angular-api-package/processors/processClassLikeMembers.js
new file mode 100644
index 000000000000..b9cf73e5b1a6
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/processClassLikeMembers.js
@@ -0,0 +1,59 @@
+/**
+ * A class like API doc contains members, but these can be either properties or method.
+ * Separate the members into two new collections: `doc.properties` and `doc.methods`.
+ */
+module.exports = function processClassLikeMembers() {
+  return {
+    $runAfter: ['filterContainedDocs'],
+    $runBefore: ['rendering-docs'],
+    $process(docs) {
+      docs.forEach(doc => {
+        if (doc.members) {
+          doc.properties = [];
+          doc.methods = [];
+          doc.members.forEach(member => {
+            if (isMethod(member)) {
+              doc.methods.push(member);
+              computeMemberDescription(member);
+            } else {
+              doc.properties.push(member);
+
+              if (!member.description) {
+                // Is this property defined as a constructor parameter e.g. `constructor(public property: string) { ... }`?
+                const constructorDoc = member.containerDoc.constructorDoc;
+                if (constructorDoc) {
+                  const matchingParameterDoc = constructorDoc.parameterDocs.filter(doc => doc.declaration === member.declaration)[0];
+                  member.constructorParamDoc = matchingParameterDoc;
+                }
+              }
+            }
+          });
+        }
+        if (doc.statics) {
+          doc.staticProperties = [];
+          doc.staticMethods = [];
+          doc.statics.forEach(member => {
+            if (isMethod(member)) {
+              doc.staticMethods.push(member);
+              computeMemberDescription(member);
+            } else {
+              doc.staticProperties.push(member);
+            }
+          });
+        }
+
+      });
+    }
+  };
+};
+
+function isMethod(doc) {
+  return doc.hasOwnProperty('parameters') && !doc.isGetAccessor && !doc.isSetAccessor;
+}
+
+function computeMemberDescription(member) {
+  if (!member.description && member.overloads) {
+    // Perhaps the description is on one of the overloads - take the first non-empty one
+    member.description = member.overloads.map(overload => overload.description).filter(description => !!description)[0];
+  }
+}
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/processors/processClassLikeMembers.spec.js b/aio/tools/transforms/angular-api-package/processors/processClassLikeMembers.spec.js
new file mode 100644
index 000000000000..b61602bc0cf9
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/processClassLikeMembers.spec.js
@@ -0,0 +1,81 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./processClassLikeMembers');
+const Dgeni = require('dgeni');
+
+const property1 = { description: 'property 1' };
+const property2 = { description: 'property 2' };
+const getter1 = { parameters: [], isGetAccessor: true, description: 'getter 1' };
+const setter1 = { parameters: [], isSetAccessor: true, description: 'setter 1' };
+const method1 = { parameters: [] };
+const method2 = { parameters: [] };
+const method3 = { parameters: [] };
+
+describe('angular-api-package: processClassLikeMembers processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('processClassLikeMembers');
+    expect(processor.$process).toBeDefined();
+    expect(processor.$runAfter).toEqual(['filterContainedDocs']);
+    expect(processor.$runBefore).toEqual(['rendering-docs']);
+  });
+
+  it('should copy instance members into properties and methods', () => {
+    const processor = processorFactory();
+    const docs = [
+      { members: [ property1, method1, getter1] },
+      { members: [ method2, property2, method3, setter1] },
+      { }
+    ];
+    processor.$process(docs);
+
+    expect(docs[0].properties).toEqual([property1, getter1]);
+    expect(docs[0].methods).toEqual([method1]);
+
+    expect(docs[1].properties).toEqual([property2, setter1]);
+    expect(docs[1].methods).toEqual([method2, method3]);
+
+    expect(docs[2].properties).toBeUndefined();
+    expect(docs[2].methods).toBeUndefined();
+  });
+
+  it('should copy static members into properties and methods', () => {
+    const processor = processorFactory();
+    const docs = [
+      { statics: [ property1, method1, getter1] },
+      { statics: [ method2, property2, method3, setter1] },
+      { }
+    ];
+    processor.$process(docs);
+
+    expect(docs[0].staticProperties).toEqual([property1, getter1]);
+    expect(docs[0].staticMethods).toEqual([method1]);
+
+    expect(docs[1].staticProperties).toEqual([property2, setter1]);
+    expect(docs[1].staticMethods).toEqual([method2, method3]);
+
+    expect(docs[2].staticProperties).toBeUndefined();
+    expect(docs[2].staticMethods).toBeUndefined();
+  });
+
+  it('should wire up properties that are declared as parameters on the constructor to its associated parameter doc', () => {
+    const processor = processorFactory();
+    const propertyDeclaration = {};
+    const parameterDoc1 = { declaration: {} };
+    const parameterDoc2 = { declaration: propertyDeclaration };
+    const parameterDoc3 = { declaration: {} };
+    const property = {
+      declaration: propertyDeclaration,
+      containerDoc: {
+        constructorDoc: {
+          parameterDocs: [ parameterDoc1, parameterDoc2, parameterDoc3 ]
+        }
+      }
+    };
+    const docs = [{ members: [ property] }];
+    processor.$process(docs);
+
+    expect(property.constructorParamDoc).toEqual(parameterDoc2);
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/processors/processPackages.js b/aio/tools/transforms/angular-api-package/processors/processPackages.js
new file mode 100644
index 000000000000..3d9fc3f2027f
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/processPackages.js
@@ -0,0 +1,63 @@
+const { dirname } = require('canonical-path');
+
+module.exports = function processPackages() {
+  return {
+    $runAfter: ['extractDecoratedClassesProcessor'],
+    $runBefore: ['computing-ids'],
+    $process(docs) {
+      const packageContentFiles = {};
+      const packageMap = {};
+
+      docs = docs.filter(doc => {
+        if (doc.docType === 'package-content') {
+          packageContentFiles[dirname(doc.fileInfo.filePath)] = doc;
+          return false;
+        } else {
+          return true;
+        }
+      });
+
+      docs.forEach(doc => {
+        if (doc.docType === 'module') {
+          // Convert the doc type from "module" to "package"
+          doc.docType = 'package';
+          // The name is actually the full id
+          doc.name = `@angular/${doc.id}`;
+
+          // Partition the exports into groups by type
+          if (doc.exports) {
+            doc.classes = doc.exports.filter(doc => doc.docType === 'class');
+            doc.decorators = doc.exports.filter(doc => doc.docType === 'decorator');
+            doc.functions = doc.exports.filter(doc => doc.docType === 'function');
+            doc.structures = doc.exports.filter(doc => doc.docType === 'enum' || doc.docType === 'interface');
+            doc.directives = doc.exports.filter(doc => doc.docType === 'directive');
+            doc.pipes = doc.exports.filter(doc => doc.docType === 'pipe');
+            doc.types = doc.exports.filter(doc => doc.docType === 'type-alias' || doc.docType === 'const');
+          }
+
+          // Copy over docs from the PACKAGE.md file that is used to document packages
+          const readmeDoc = packageContentFiles[dirname(doc.fileInfo.filePath)];
+          if (readmeDoc) {
+            doc.shortDescription = readmeDoc.shortDescription;
+            doc.description = readmeDoc.description;
+            doc.see = readmeDoc.see;
+            doc.fileInfo = readmeDoc.fileInfo;
+          }
+
+          // Compute the primary/secondary entry point relationships
+          const packageParts = doc.id.split('/');
+          const primaryPackageName = packageParts[0];
+          doc.isPrimaryPackage = packageParts.length === 1;
+          doc.packageInfo = packageMap[primaryPackageName] = packageMap[primaryPackageName] || { primary: undefined, secondary: [] };
+          if (doc.isPrimaryPackage) {
+            doc.packageInfo.primary = doc;
+          } else {
+            doc.packageInfo.secondary.push(doc);
+          }
+        }
+      });
+
+      return docs;
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/processors/processPackages.spec.js b/aio/tools/transforms/angular-api-package/processors/processPackages.spec.js
new file mode 100644
index 000000000000..3692ab1b4ccf
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/processPackages.spec.js
@@ -0,0 +1,180 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./processPackages');
+const Dgeni = require('dgeni');
+
+describe('processPackages processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('processPackages');
+    expect(processor.$process).toBeDefined();
+    expect(processor.$runAfter).toEqual(['extractDecoratedClassesProcessor']);
+    expect(processor.$runBefore).toEqual(['computing-ids']);
+  });
+
+  it('should filter out any `package-content` docs from the collection', () => {
+    const docs = [
+      { fileInfo: { filePath: 'some/a' }, docType: 'a', id: 'a' },
+      { fileInfo: { filePath: 'some/x' }, docType: 'package-content', id: 'x' },
+      { fileInfo: { filePath: 'some/b' }, docType: 'b', id: 'b' },
+      { fileInfo: { filePath: 'some/y' }, docType: 'package-content', id: 'y' },
+      { fileInfo: { filePath: 'some/z' }, docType: 'package-content', id: 'z' },
+    ];
+    const processor = processorFactory();
+    const newDocs = processor.$process(docs);
+    expect(newDocs).toEqual([
+      { fileInfo: { filePath: 'some/a' }, docType: 'a', id: 'a' },
+      { fileInfo: { filePath: 'some/b' }, docType: 'b', id: 'b' },
+    ]);
+  });
+
+
+  it('should change `module` docs to `package` docs', () => {
+    const processor = processorFactory();
+    const docs = [
+      { fileInfo: { filePath: 'some/a' }, docType: 'module', id: 'a' },
+      { fileInfo: { filePath: 'some/b' }, docType: 'module', id: 'b' },
+      { docType: 'other', id: 'c' },
+    ];
+    const newDocs = processor.$process(docs);
+    expect(newDocs).toEqual([
+      jasmine.objectContaining({ docType: 'package', id: 'a' }),
+      jasmine.objectContaining({ docType: 'package', id: 'b' }),
+      jasmine.objectContaining({ docType: 'other', id: 'c' }),
+    ]);
+  });
+
+  it('should attach the relevant package contents to the package doc', () => {
+    const docs = [
+      {
+        fileInfo: { filePath: 'some/package-1/index' },
+        docType: 'module',
+        id: 'package-1',
+        someProp: 'foo',
+      },
+      {
+        fileInfo: { filePath: 'some/package-1/PACKAGE.md' },
+        docType: 'package-content',
+        id: 'package-1/PACKAGE.md',
+        shortDescription: 'some short description',
+        description: 'some description',
+        see: [ 'a', 'b' ],
+      },
+      {
+        fileInfo: { filePath: 'some/package-2/index' },
+        docType: 'module',
+        id: 'package-2',
+      },
+    ];
+    const processor = processorFactory();
+    const newDocs = processor.$process(docs);
+
+    const package1 = jasmine.objectContaining({
+      fileInfo: { filePath: 'some/package-1/PACKAGE.md' },
+      docType: 'package',
+      name: '@angular/package-1',
+      id: 'package-1',
+      someProp: 'foo',
+      shortDescription: 'some short description',
+      description: 'some description',
+      see: [ 'a', 'b' ],
+      isPrimaryPackage: true,
+    });
+
+    const package2 = jasmine.objectContaining({
+      fileInfo: { filePath: 'some/package-2/index' },
+      docType: 'package',
+      name: '@angular/package-2',
+      id: 'package-2',
+      isPrimaryPackage: true,
+    });
+
+    expect(newDocs).toEqual([package1, package2]);
+  });
+
+  it('should compute primary and second package info', () => {
+    const docs = [
+      {
+        fileInfo: { filePath: 'some/package-1/index' },
+        docType: 'module',
+        id: 'package-1',
+      },
+      {
+        fileInfo: { filePath: 'some/package-1/sub-1index' },
+        docType: 'module',
+        id: 'package-1/sub-1',
+      },
+      {
+        fileInfo: { filePath: 'some/package-1/sub-2index' },
+        docType: 'module',
+        id: 'package-1/sub-2',
+      },
+    ];
+    const processor = processorFactory();
+    const newDocs = processor.$process(docs);
+
+    expect(newDocs[0].isPrimaryPackage).toBe(true);
+    expect(newDocs[1].isPrimaryPackage).toBe(false);
+    expect(newDocs[2].isPrimaryPackage).toBe(false);
+
+    expect(newDocs[0].packageInfo.primary).toBe(newDocs[0]);
+    expect(newDocs[1].packageInfo.primary).toBe(newDocs[0]);
+    expect(newDocs[2].packageInfo.primary).toBe(newDocs[0]);
+
+    expect(newDocs[0].packageInfo.secondary).toEqual([newDocs[1], newDocs[2]]);
+    expect(newDocs[1].packageInfo.secondary).toEqual([newDocs[1], newDocs[2]]);
+    expect(newDocs[2].packageInfo.secondary).toEqual([newDocs[1], newDocs[2]]);
+  });
+
+  it('should partition the exports of packages into groups', () => {
+    const docs = [
+      {
+        fileInfo: { filePath: 'some/x' },
+        docType: 'module',
+        id: 'x',
+        exports: [
+          { docType: 'directive', id: 'directive-1' },
+          { docType: 'function', id: 'function-1' },
+          { docType: 'directive', id: 'directive-2' },
+          { docType: 'decorator', id: 'decorator-1' },
+          { docType: 'class', id: 'class-1' },
+          { docType: 'type-alias', id: 'type-alias-1' },
+          { docType: 'class', id: 'class-2' },
+          { docType: 'pipe', id: 'pipe-1' },
+          { docType: 'const', id: 'const-1' },
+          { docType: 'const', id: 'const-2' },
+          { docType: 'enum', id: 'enum-1' },
+          { docType: 'interface', id: 'interface-1' },
+          { docType: 'interface', id: 'interface-2' },
+        ]
+      },
+    ];
+    const processor = processorFactory();
+    const newDocs = processor.$process(docs);
+
+    expect(newDocs[0].decorators).toEqual([
+      { docType: 'decorator', id: 'decorator-1' },
+    ]);
+    expect(newDocs[0].functions).toEqual([
+      { docType: 'function', id: 'function-1' },
+    ]);
+    expect(newDocs[0].structures).toEqual([
+      { docType: 'enum', id: 'enum-1' },
+      { docType: 'interface', id: 'interface-1' },
+      { docType: 'interface', id: 'interface-2' },
+    ]);
+    expect(newDocs[0].directives).toEqual([
+      { docType: 'directive', id: 'directive-1' },
+      { docType: 'directive', id: 'directive-2' },
+    ]);
+    expect(newDocs[0].pipes).toEqual([
+      { docType: 'pipe', id: 'pipe-1' },
+    ]);
+    expect(newDocs[0].types).toEqual([
+      { docType: 'type-alias', id: 'type-alias-1' },
+      { docType: 'const', id: 'const-1' },
+      { docType: 'const', id: 'const-2' },
+    ]);
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/processors/removeInjectableConstructors.js b/aio/tools/transforms/angular-api-package/processors/removeInjectableConstructors.js
new file mode 100644
index 000000000000..ea8daeb231e1
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/removeInjectableConstructors.js
@@ -0,0 +1,18 @@
+module.exports = function removeInjectableConstructors() {
+  return {
+    $runAfter: ['processing-docs', 'splitDescription'],
+    $runBefore: ['docs-processed'],
+    injectableDecorators: ['Injectable', 'Directive', 'Component', 'Pipe', 'NgModule'],
+    $process(docs) {
+      docs.forEach(doc => {
+        if (
+          doc.constructorDoc &&
+          !doc.constructorDoc.shortDescription &&
+          doc.decorators &&
+          doc.decorators.some(decorator => this.injectableDecorators.indexOf(decorator.name) !== -1)) {
+          delete doc.constructorDoc;
+        }
+      });
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/processors/removeInjectableConstructors.spec.js b/aio/tools/transforms/angular-api-package/processors/removeInjectableConstructors.spec.js
new file mode 100644
index 000000000000..d7372fa7c30a
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/removeInjectableConstructors.spec.js
@@ -0,0 +1,58 @@
+const processorFactory = require('./removeInjectableConstructors');
+const testPackage = require('../../helpers/test-package');
+const Dgeni = require('dgeni');
+
+describe('removeInjectableConstructors processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('removeInjectableConstructors');
+    expect(processor.$process).toBeDefined();
+    expect(processor.$runAfter).toEqual(['processing-docs', 'splitDescription']);
+    expect(processor.$runBefore).toEqual(['docs-processed']);
+  });
+
+  it('should remove undocumented constructors from docs that have an "Injectable" decorator on them', () => {
+    const processor = processorFactory();
+    const docs = [
+      { constructorDoc: {} },
+      { constructorDoc: {}, decorators: [] },
+      { constructorDoc: {}, decorators: [{ name: 'Injectable' }] },
+      { constructorDoc: {}, decorators: [{ name: 'Component' }] },
+      { constructorDoc: {}, decorators: [{ name: 'Directive' }] },
+      { constructorDoc: {}, decorators: [{ name: 'Pipe' }] },
+      { constructorDoc: {}, decorators: [{ name: 'Other' }, { name: 'Injectable' }] },
+      { constructorDoc: {}, decorators: [{ name: 'Other' }] },
+
+      { constructorDoc: { shortDescription: 'Blah' } },
+      { constructorDoc: { shortDescription: 'Blah' }, decorators: [] },
+      { constructorDoc: { shortDescription: 'Blah' }, decorators: [{ name: 'Injectable' }] },
+      { constructorDoc: { shortDescription: 'Blah' }, decorators: [{ name: 'Component' }] },
+      { constructorDoc: { shortDescription: 'Blah' }, decorators: [{ name: 'Directive' }] },
+      { constructorDoc: { shortDescription: 'Blah' }, decorators: [{ name: 'Pipe' }] },
+      { constructorDoc: { shortDescription: 'Blah' }, decorators: [{ name: 'Other' }, { name: 'Injectable' }] },
+      { constructorDoc: { shortDescription: 'Blah' }, decorators: [{ name: 'Other' }] },
+    ];
+
+    processor.$process(docs);
+
+    expect(docs[0].constructorDoc).toBeDefined();
+    expect(docs[1].constructorDoc).toBeDefined();
+    expect(docs[2].constructorDoc).toBeUndefined();
+    expect(docs[3].constructorDoc).toBeUndefined();
+    expect(docs[4].constructorDoc).toBeUndefined();
+    expect(docs[5].constructorDoc).toBeUndefined();
+    expect(docs[6].constructorDoc).toBeUndefined();
+    expect(docs[7].constructorDoc).toBeDefined();
+
+    expect(docs[8].constructorDoc).toBeDefined();
+    expect(docs[9].constructorDoc).toBeDefined();
+    expect(docs[10].constructorDoc).toBeDefined();
+    expect(docs[11].constructorDoc).toBeDefined();
+    expect(docs[12].constructorDoc).toBeDefined();
+    expect(docs[13].constructorDoc).toBeDefined();
+    expect(docs[14].constructorDoc).toBeDefined();
+    expect(docs[15].constructorDoc).toBeDefined();
+  });
+});
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 000000000000..f36a8d480940
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/simplifyMemberAnchors.js
@@ -0,0 +1,32 @@
+/**
+ * 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: ['paths-computed'],
+    $runBefore: ['rendering-docs'],
+    $process: function(docs) {
+      return docs.forEach(doc => {
+        if (doc.members) {
+          doc.members.forEach(member => {
+            member.anchor = computeAnchor(member);
+            member.path = doc.path + '#' + member.anchor;
+          });
+        }
+        if (doc.statics) {
+          doc.statics.forEach(member => {
+            member.anchor = computeAnchor(member);
+            member.path = doc.path + '#' + member.anchor;
+          });
+        }
+      });
+    }
+  };
+};
+
+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/tools/transforms/angular-api-package/processors/simplifyMemberAnchors.spec.js b/aio/tools/transforms/angular-api-package/processors/simplifyMemberAnchors.spec.js
new file mode 100644
index 000000000000..b857af196d7d
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/simplifyMemberAnchors.spec.js
@@ -0,0 +1,72 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./simplifyMemberAnchors');
+const Dgeni = require('dgeni');
+
+describe('simplifyMemberAnchors processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('simplifyMemberAnchors');
+    expect(processor.$process).toBeDefined();
+    expect(processor.$runAfter).toEqual(['paths-computed']);
+    expect(processor.$runBefore).toEqual(['rendering-docs']);
+  });
+
+  describe('$process', () => {
+    describe('docs without members', () => {
+      it('should ignore the docs', () => {
+        const processor = processorFactory();
+        const docs = [
+          { id: 'some-doc' },
+          { id: 'some-other' }
+        ];
+        processor.$process(docs);
+        expect(docs).toEqual([
+          { id: 'some-doc' },
+          { id: 'some-other' }
+        ]);
+      });
+    });
+
+    describe('docs with members', () => {
+      it('should compute an anchor for each instance member', () => {
+        const processor = processorFactory();
+        const docs = [
+          { id: 'some-doc', members: [ { name: 'foo' }, { name: 'new' }, { name: '' } ] }
+        ];
+        processor.$process(docs);
+        expect(docs[0].members.map(member => member.anchor)).toEqual(['foo', 'new', 'call']);
+      });
+
+      it('should compute a path for each instance member', () => {
+        const processor = processorFactory();
+        const docs = [
+          { id: 'some-doc', path: 'a/b/c', members: [ { name: 'foo' }, { name: 'new' }, { name: '' } ] }
+        ];
+        processor.$process(docs);
+        expect(docs[0].members.map(member => member.path)).toEqual(['a/b/c#foo', 'a/b/c#new', 'a/b/c#call']);
+      });
+    });
+
+    describe('docs with static members', () => {
+      it('should compute an anchor for each static member', () => {
+        const processor = processorFactory();
+        const docs = [
+          { id: 'some-doc', statics: [ { name: 'foo' }, { name: 'new' }, { name: '' } ] }
+        ];
+        processor.$process(docs);
+        expect(docs[0].statics.map(member => member.anchor)).toEqual(['foo', 'new', 'call']);
+      });
+
+      it('should compute a path for each static member', () => {
+        const processor = processorFactory();
+        const docs = [
+          { id: 'some-doc', path: 'a/b/c', statics: [ { name: 'foo' }, { name: 'new' }, { name: '' } ] }
+        ];
+        processor.$process(docs);
+        expect(docs[0].statics.map(member => member.path)).toEqual(['a/b/c#foo', 'a/b/c#new', 'a/b/c#call']);
+      });
+    });
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/processors/splitDescription.js b/aio/tools/transforms/angular-api-package/processors/splitDescription.js
new file mode 100644
index 000000000000..2d6de6a9fcc1
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/splitDescription.js
@@ -0,0 +1,28 @@
+/**
+ * Split the description (of selected docs) into:
+ * * `shortDescription`: the first paragraph
+ * * `description`: the rest of the paragraphs
+ */
+module.exports = function splitDescription() {
+  return {
+    $runAfter: ['tags-extracted', 'migrateLegacyJSDocTags'],
+    $runBefore: ['processing-docs'],
+    docTypes: [],
+    $process(docs) {
+      docs.forEach(doc => {
+        if (this.docTypes.indexOf(doc.docType) !== -1 && doc.description !== undefined) {
+          const description = doc.description.trim();
+          const endOfParagraph = description.search(/\n\s*\n/);
+          if (endOfParagraph === -1) {
+            doc.shortDescription = description;
+            doc.description = '';
+          } else {
+            doc.shortDescription = description.substr(0, endOfParagraph).trim();
+            doc.description = description.substr(endOfParagraph).trim();
+          }
+        }
+      });
+    }
+  };
+};
+
diff --git a/aio/tools/transforms/angular-api-package/processors/splitDescription.spec.js b/aio/tools/transforms/angular-api-package/processors/splitDescription.spec.js
new file mode 100644
index 000000000000..90b3b6b92b88
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/splitDescription.spec.js
@@ -0,0 +1,71 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./splitDescription');
+const Dgeni = require('dgeni');
+
+describe('splitDescription processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('splitDescription');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run before the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runBefore).toEqual(['processing-docs']);
+  });
+
+  it('should run after the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runAfter).toEqual(['tags-extracted', 'migrateLegacyJSDocTags']);
+  });
+
+  it('should split the `description` property into the first paragraph and other paragraphs', () => {
+    const processor = processorFactory();
+    processor.docTypes = ['test'];
+    const docs = [
+      { docType: 'test' },
+      { docType: 'test', description: '' },
+      { docType: 'test', description: 'abc' },
+      { docType: 'test', description: 'abc\n' },
+      { docType: 'test', description: 'abc\n\n' },
+      { docType: 'test', description: 'abc\ncde' },
+      { docType: 'test', description: 'abc\ncde\n' },
+      { docType: 'test', description: 'abc\n\ncde' },
+      { docType: 'test', description: 'abc\n  \ncde' },
+      { docType: 'test', description: 'abc\n\n\ncde' },
+      { docType: 'test', description: 'abc\n\ncde\nfgh' },
+      { docType: 'test', description: 'abc\n\ncde\n\nfgh' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      { docType: 'test' },
+      { docType: 'test', shortDescription: '', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: '' },
+      { docType: 'test', shortDescription: 'abc\ncde', description: '' },
+      { docType: 'test', shortDescription: 'abc\ncde', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde\nfgh' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde\n\nfgh' },
+    ]);
+  });
+
+  it('should ignore docs that do not match the specified doc types', () => {
+    const processor = processorFactory();
+    processor.docTypes = ['test'];
+    const docs = [
+      { docType: 'test', description: 'abc\n\ncde' },
+      { docType: 'other', description: 'abc\n\ncde' }
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'other', description: 'abc\n\ncde' }
+    ]);
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/readers/package-content.js b/aio/tools/transforms/angular-api-package/readers/package-content.js
new file mode 100644
index 000000000000..941b9c74e77d
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/readers/package-content.js
@@ -0,0 +1,25 @@
+/**
+ * @dgService
+ * @description
+ * This file reader will pull the contents from a text file that will be used
+ * as the description of a package.
+ *
+ * The doc will initially have the form:
+ * ```
+ * {
+ *   content: 'the content of the file',
+ *   startingLine: 1
+ * }
+ * ```
+ */
+module.exports = function packageContentFileReader() {
+  return {
+    name: 'packageContentFileReader',
+    defaultPattern: /PACKAGE\.md$/,
+    getDocs: function(fileInfo) {
+
+      // We return a single element array because content files only contain one document
+      return [{docType: 'package-content', content: fileInfo.content, startingLine: 1}];
+    }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/Annotation.js b/aio/tools/transforms/angular-api-package/tag-defs/Annotation.js
new file mode 100644
index 000000000000..49f55d5eecfb
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/Annotation.js
@@ -0,0 +1,5 @@
+// A ts2dart compiler annotation that we don't care about for API docs.
+// But, if we don't have a tag-def for it the doc-gen will error.
+module.exports = function() {
+  return {name: 'Annotation'};
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/deprecated.js b/aio/tools/transforms/angular-api-package/tag-defs/deprecated.js
new file mode 100644
index 000000000000..7a984c75ac00
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/deprecated.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'deprecated'};
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/docsNotRequired.js b/aio/tools/transforms/angular-api-package/tag-defs/docsNotRequired.js
new file mode 100644
index 000000000000..8bc386388c75
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/docsNotRequired.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'docsNotRequired'};
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/experimental.js b/aio/tools/transforms/angular-api-package/tag-defs/experimental.js
new file mode 100644
index 000000000000..4f679b5c1420
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/experimental.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'experimental'};
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/howToUse.js b/aio/tools/transforms/angular-api-package/tag-defs/howToUse.js
new file mode 100644
index 000000000000..a0d7968e0784
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/howToUse.js
@@ -0,0 +1,11 @@
+module.exports = function(log, createDocMessage) {
+  return {
+    name: 'howToUse',
+    deprecated: true,
+    transforms(doc, tag, value) {
+      log.warn(createDocMessage('Deprecated `@howToUse` tag found', doc));
+      log.warn('PLEASE FIX by renaming to `@usageNotes.');
+      return value;
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/internal.js b/aio/tools/transforms/angular-api-package/tag-defs/internal.js
new file mode 100644
index 000000000000..39be3e5389f0
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/internal.js
@@ -0,0 +1,16 @@
+/**
+ * Use this tag to ensure that dgeni does not include this code item
+ * in the rendered docs.
+ *
+ * The `@internal` tag indicates to the compiler not to include the
+ * item in the public typings file.
+ * Use the `@nodoc` alias if you only want to hide the item from the
+ * docs but not from the typings file.
+ */
+module.exports = function() {
+  return {
+    name: 'internal',
+    aliases: ['nodoc'],
+    transforms: function() { return true; }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/ngModule.js b/aio/tools/transforms/angular-api-package/tag-defs/ngModule.js
new file mode 100644
index 000000000000..a80c7df32a91
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/ngModule.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'ngModule'};
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/no-description.js b/aio/tools/transforms/angular-api-package/tag-defs/no-description.js
new file mode 100644
index 000000000000..9a105df8dba7
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/no-description.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'noDescription', transforms: function() { return true; }};
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/security.js b/aio/tools/transforms/angular-api-package/tag-defs/security.js
new file mode 100644
index 000000000000..1351061d996a
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/security.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'security'};
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/stable.js b/aio/tools/transforms/angular-api-package/tag-defs/stable.js
new file mode 100644
index 000000000000..cc689085c002
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/stable.js
@@ -0,0 +1,11 @@
+module.exports = function(log, createDocMessage) {
+  return {
+    name: 'stable',
+    deprecated: true,
+    transforms(doc, tag, value) {
+      log.warn(createDocMessage('Deprecated `@stable` tag found', doc));
+      log.warn('PLEASE REMOVE - its value is now computed.');
+      return value;
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/suppress.js b/aio/tools/transforms/angular-api-package/tag-defs/suppress.js
new file mode 100644
index 000000000000..a2fe2ea19df9
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/suppress.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'suppress'};
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/syntax.js b/aio/tools/transforms/angular-api-package/tag-defs/syntax.js
new file mode 100644
index 000000000000..45c5a53cf92d
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/syntax.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'syntax'};
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/throws.js b/aio/tools/transforms/angular-api-package/tag-defs/throws.js
new file mode 100644
index 000000000000..4e1ac58be756
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/throws.js
@@ -0,0 +1,8 @@
+module.exports = function(extractTypeTransform, wholeTagTransform) {
+  return {
+    name: 'throws',
+    aliases: ['exception'],
+    multi: true,
+    transforms: [ extractTypeTransform, wholeTagTransform ]
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/ts2dart_const.js b/aio/tools/transforms/angular-api-package/tag-defs/ts2dart_const.js
new file mode 100644
index 000000000000..68c43bb23bc1
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/ts2dart_const.js
@@ -0,0 +1,4 @@
+// A ts2dart compiler annotation that can be ignored in API docs.
+module.exports = function() {
+  return {name: 'ts2dart_const', ignore: true};
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/usageNotes.js b/aio/tools/transforms/angular-api-package/tag-defs/usageNotes.js
new file mode 100644
index 000000000000..2fe75c0977d7
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/usageNotes.js
@@ -0,0 +1,5 @@
+module.exports = function() {
+  return {
+    name: 'usageNotes'
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/whatItDoes.js b/aio/tools/transforms/angular-api-package/tag-defs/whatItDoes.js
new file mode 100644
index 000000000000..8b995890a972
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/whatItDoes.js
@@ -0,0 +1,11 @@
+module.exports = function(log, createDocMessage) {
+  return {
+    name: 'whatItDoes',
+    deprecated: true,
+    transforms(doc, tag, value) {
+      log.warn(createDocMessage('Deprecated `@whatItDoes` tag found', doc));
+      log.warn('PLEASE FIX by adding the content of this tag as the first paragraph of the `@description` tag.');
+      return value;
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-base-package/ignore.words b/aio/tools/transforms/angular-base-package/ignore.words
new file mode 100644
index 000000000000..82b9f2fc3fc5
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/ignore.words
@@ -0,0 +1,701 @@
+a
+able
+about
+above
+abst
+accordance
+according
+accordingly
+across
+act
+actually
+added
+adj
+adopted
+affected
+affecting
+affects
+after
+afterwards
+again
+against
+ah
+all
+almost
+alone
+along
+already
+also
+although
+always
+am
+among
+amongst
+an
+and
+announce
+another
+any
+anybody
+anyhow
+anymore
+anyone
+anything
+anyway
+anyways
+anywhere
+apparently
+approximately
+are
+aren
+arent
+arise
+around
+as
+aside
+ask
+asking
+at
+auth
+available
+away
+awfully
+b
+back
+be
+became
+because
+become
+becomes
+becoming
+been
+before
+beforehand
+begin
+beginning
+beginnings
+begins
+behind
+being
+believe
+below
+beside
+besides
+between
+beyond
+biol
+both
+brief
+briefly
+but
+by
+c
+ca
+came
+can
+cannot
+can't
+cant
+cause
+causes
+certain
+certainly
+co
+com
+come
+comes
+contain
+containing
+contains
+could
+couldnt
+d
+date
+did
+didn't
+didnt
+different
+do
+does
+doesn't
+doesnt
+doing
+done
+don't
+dont
+down
+downwards
+due
+during
+e
+each
+ed
+edu
+effect
+eg
+eight
+eighty
+either
+else
+elsewhere
+end
+ending
+enough
+especially
+et
+et-al
+etc
+even
+ever
+every
+everybody
+everyone
+everything
+everywhere
+ex
+except
+f
+far
+few
+ff
+fifth
+first
+five
+fix
+followed
+following
+follows
+for
+former
+formerly
+forth
+found
+four
+from
+further
+furthermore
+g
+gave
+get
+gets
+getting
+give
+given
+gives
+giving
+go
+goes
+gone
+got
+gotten
+h
+had
+happens
+hardly
+has
+hasn't
+hasnt
+have
+haven't
+havent
+having
+he
+hed
+hence
+her
+here
+hereafter
+hereby
+herein
+heres
+hereupon
+hers
+herself
+hes
+hi
+hid
+him
+himself
+his
+hither
+home
+how
+howbeit
+however
+hundred
+i
+id
+ie
+if
+i'll
+ill
+im
+immediate
+immediately
+importance
+important
+in
+inc
+indeed
+index
+information
+instead
+into
+invention
+inward
+is
+isn't
+isnt
+it
+itd
+it'll
+itll
+its
+itself
+i've
+ive
+j
+just
+k
+keep
+keeps
+kept
+keys
+kg
+km
+know
+known
+knows
+l
+largely
+last
+lately
+later
+latter
+latterly
+least
+less
+lest
+let
+lets
+like
+liked
+likely
+line
+little
+'ll
+'ll
+look
+looking
+looks
+ltd
+m
+made
+mainly
+make
+makes
+many
+may
+maybe
+me
+mean
+means
+meantime
+meanwhile
+merely
+mg
+might
+million
+miss
+ml
+more
+moreover
+most
+mostly
+mr
+mrs
+much
+mug
+must
+my
+myself
+n
+na
+name
+namely
+nay
+nd
+near
+nearly
+necessarily
+necessary
+need
+needs
+neither
+never
+nevertheless
+new
+next
+nine
+ninety
+no
+nobody
+non
+none
+nonetheless
+noone
+nor
+normally
+nos
+not
+noted
+nothing
+now
+nowhere
+o
+obtain
+obtained
+obviously
+of
+off
+often
+oh
+ok
+okay
+old
+omitted
+on
+once
+one
+ones
+only
+onto
+or
+ord
+other
+others
+otherwise
+ought
+our
+ours
+ourselves
+out
+outside
+over
+overall
+owing
+own
+p
+page
+pages
+part
+particular
+particularly
+past
+per
+perhaps
+placed
+please
+plus
+poorly
+possible
+possibly
+potentially
+pp
+predominantly
+present
+previously
+primarily
+probably
+promptly
+proud
+provides
+put
+q
+que
+quickly
+quite
+qv
+r
+ran
+rather
+rd
+re
+readily
+really
+recent
+recently
+ref
+refs
+regarding
+regardless
+regards
+related
+relatively
+research
+respectively
+resulted
+resulting
+results
+right
+run
+s
+said
+same
+saw
+say
+saying
+says
+sec
+section
+see
+seeing
+seem
+seemed
+seeming
+seems
+seen
+self
+selves
+sent
+seven
+several
+shall
+she
+shed
+she'll
+shell
+shes
+should
+shouldn't
+shouldnt
+show
+showed
+shown
+showns
+shows
+significant
+significantly
+similar
+similarly
+since
+six
+slightly
+so
+some
+somebody
+somehow
+someone
+somethan
+something
+sometime
+sometimes
+somewhat
+somewhere
+soon
+sorry
+specifically
+specified
+specify
+specifying
+state
+states
+still
+stop
+strongly
+sub
+substantially
+successfully
+such
+sufficiently
+suggest
+sup
+sure
+t
+take
+taken
+taking
+tell
+tends
+th
+than
+thank
+thanks
+thanx
+that
+that'll
+thatll
+thats
+that've
+thatve
+the
+their
+theirs
+them
+themselves
+then
+thence
+there
+thereafter
+thereby
+thered
+therefore
+therein
+there'll
+therell
+thereof
+therere
+theres
+thereto
+thereupon
+there've
+thereve
+these
+they
+theyd
+they'll
+theyll
+theyre
+they've
+theyve
+think
+this
+those
+thou
+though
+thoughh
+thousand
+throug
+through
+throughout
+thru
+thus
+til
+tip
+to
+together
+too
+took
+toward
+towards
+tried
+tries
+truly
+try
+trying
+ts
+twice
+two
+u
+un
+under
+unfortunately
+unless
+unlike
+unlikely
+until
+unto
+up
+upon
+ups
+us
+use
+used
+useful
+usefully
+usefulness
+uses
+using
+usually
+v
+value
+various
+'ve
+'ve
+very
+via
+viz
+vol
+vols
+vs
+w
+want
+wants
+was
+wasn't
+wasnt
+way
+we
+wed
+welcome
+we'll
+well
+went
+were
+weren't
+werent
+we've
+weve
+what
+whatever
+what'll
+whatll
+whats
+when
+whence
+whenever
+where
+whereafter
+whereas
+whereby
+wherein
+wheres
+whereupon
+wherever
+whether
+which
+while
+whim
+whither
+who
+whod
+whoever
+whole
+who'll
+wholl
+whom
+whomever
+whos
+whose
+why
+widely
+will
+willing
+wish
+with
+within
+without
+won't
+wont
+words
+would
+wouldn't
+wouldnt
+www
+x
+y
+yes
+yet
+you
+youd
+you'll
+youll
+your
+youre
+yours
+yourself
+yourselves
+you've
+youve
+z
+zero
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 000000000000..01314550a283
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/index.js
@@ -0,0 +1,145 @@
+/**
+ * @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/createSitemap'))
+  .processor(require('./processors/checkUnbalancedBackTicks'))
+  .processor(require('./processors/convertToJson'))
+  .processor(require('./processors/fixInternalDocumentLinks'))
+  .processor(require('./processors/copyContentAssets'))
+  .processor(require('./processors/renderLinkInfo'))
+  .processor(require('./processors/checkContentRules'))
+
+  // 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/filterPipes'))
+  .factory(require('./services/filterAmbiguousDirectiveAliases'))
+  .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, filterPipes, filterAmbiguousDirectiveAliases) {
+    addImageDimensions.basePath = path.resolve(AIO_PATH, 'src');
+    autoLinkCode.customFilters = [filterPipes, filterAmbiguousDirectiveAliases];
+    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 000000000000..075c0de44d2c
--- /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 000000000000..9c21f3ac86b3
--- /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).toHaveBeenCalledWith('Missing src in image tag `<img attr="value">` - doc (a) ');
+  });
+
+  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).toHaveBeenCalledWith('base/path', 'missing');
+  });
+
+  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 000000000000..92f5cf06ee9b
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js
@@ -0,0 +1,81 @@
+const visit = require('unist-util-visit-parents');
+const is = require('hast-util-is-element');
+const textContent = require('hast-util-to-string');
+
+/**
+ * Automatically add in a link to the relevant document for 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.
+ *
+ * @property customFilters array of functions `(docs, words, wordIndex) => docs` that will filter
+ * out docs where a word should not link to a doc.
+ *   - `docs` is the array of docs that match the link `word`
+ *   - `words` is the collection of words parsed from the code text
+ *   - `wordIndex` is the index of the current `word` for which we are finding a link
+ *
+ * @property codeElements an array of strings.
+ * Only text contained in these elements will be linked to.
+ * Usually set to "code" but also "code-example" for angular.io.
+ */
+module.exports = function autoLinkCode(getDocFromAlias) {
+  autoLinkCodeImpl.docTypes = [];
+  autoLinkCodeImpl.customFilters = [];
+  autoLinkCodeImpl.codeElements = ['code'];
+  return autoLinkCodeImpl;
+
+  function autoLinkCodeImpl()  {
+    return (ast) => {
+      visit(ast, 'element', (node, ancestors) => {
+        // Only interested in code elements that are not inside links
+        if (autoLinkCodeImpl.codeElements.some(elementType => is(node, elementType)) &&
+            ancestors.every(ancestor => !is(ancestor, 'a'))) {
+          visit(node, 'text', (node, ancestors) => {
+            // Only interested in text nodes that are not inside links
+            if (ancestors.every(ancestor => !is(ancestor, 'a'))) {
+
+              const parent = ancestors[ancestors.length-1];
+              const index = parent.children.indexOf(node);
+
+              // Can we convert the whole text node into a doc link?
+              const docs = getDocFromAlias(node.value);
+              if (foundValidDoc(docs)) {
+                parent.children.splice(index, 1, createLinkNode(docs[0], node.value));
+              } else {
+                // Parse the text for words that we can convert to links
+                const nodes = textContent(node).split(/([A-Za-z0-9_.-]+)/)
+                  .filter(word => word.length)
+                  .map((word, index, words) => {
+                    // remove docs that fail the custom filter tests
+                    const filteredDocs = autoLinkCodeImpl.customFilters.reduce((docs, filter) => filter(docs, words, index), getDocFromAlias(word));
+                    return foundValidDoc(filteredDocs) ?
+                              createLinkNode(filteredDocs[0], word) : // Create a link wrapping the text node.
+                              { type: 'text', value: word };  // this is just text so push a new text node
+                  });
+
+                // Replace the text node with the links and leftover text nodes
+                Array.prototype.splice.apply(parent.children, [index, 1].concat(nodes));
+              }
+            }
+          });
+        }
+      });
+    };
+  }
+  function foundValidDoc(docs) {
+    return docs.length === 1 &&
+           !docs[0].internal &&
+           autoLinkCodeImpl.docTypes.indexOf(docs[0].docType) !== -1;
+  }
+
+  function createLinkNode(doc, text) {
+    return {
+      type: 'element',
+      tagName: 'a',
+      properties: { href: doc.path, class: 'code-anchor' },
+      children: [{ type: 'text', value: text }]
+    };
+  }
+};
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 000000000000..c5fabf43d3ec
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js
@@ -0,0 +1,112 @@
+var createTestPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('autoLinkCode post-processor', () => {
+  let processor, autoLinkCode, aliasMap, filterPipes;
+
+  beforeEach(() => {
+    const testPackage = createTestPackage('angular-base-package');
+    const dgeni = new Dgeni([testPackage]);
+    const injector = dgeni.configureInjector();
+    autoLinkCode = injector.get('autoLinkCode');
+    autoLinkCode.docTypes = ['class', 'pipe', 'function', 'const', 'member'];
+    aliasMap = injector.get('aliasMap');
+    processor = injector.get('postProcessHtml');
+    processor.docTypes = ['test-doc'];
+    processor.plugins = [autoLinkCode];
+    filterPipes = injector.get('filterPipes');
+  });
+
+  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" class="code-anchor">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" class="code-anchor">foo.MyClass</a></code>');
+  });
+
+  it('should match code items within a block of code that contain a dot in their identifier', () => {
+    aliasMap.addDoc({ docType: 'member', id: 'MyEnum.Value', aliases: ['Value', 'MyEnum.Value'], path: 'a/b/myenum' });
+    const doc = { docType: 'test-doc', renderedContent: '<code>someFn(): MyEnum.Value</code>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code>someFn(): <a href="a/b/myenum" class="code-anchor">MyEnum.Value</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>');
+  });
+
+  it('should ignore code items that are already inside a link', () => {
+    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
+    const doc = { docType: 'test-doc', renderedContent: '<a href="..."><div><code>MyClass</code></div></a>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<a href="..."><div><code>MyClass</code></div></a>');
+  });
+
+  it('should ignore code items match an API doc but are not in the list of acceptable docTypes', () => {
+    aliasMap.addDoc({ docType: 'directive', 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>');
+  });
+
+  it('should ignore code items that match an API doc but are attached to other text via a dash', () => {
+    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
+    const doc = { docType: 'test-doc', renderedContent: '<code>xyz-MyClass</code>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code>xyz-MyClass</code>');
+  });
+
+  it('should ignore code items that are filtered out by custom filters', () => {
+    autoLinkCode.customFilters = [filterPipes];
+    aliasMap.addDoc({ docType: 'pipe', id: 'MyClass', aliases: ['MyClass', 'myClass'], path: 'a/b/myclass', pipeOptions: { name: '\'myClass\'' } });
+    const doc = { docType: 'test-doc', renderedContent: '<code>{ xyz | myClass } { xyz|myClass } MyClass myClass OtherClass|MyClass</code>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code>' +
+                                        '{ xyz | <a href="a/b/myclass" class="code-anchor">myClass</a> } '  +
+                                        '{ xyz|<a href="a/b/myclass" class="code-anchor">myClass</a> } ' +
+                                        '<a href="a/b/myclass" class="code-anchor">MyClass</a> ' +
+                                        'myClass OtherClass|<a href="a/b/myclass" class="code-anchor">MyClass</a>' +
+                                        '</code>');
+  });
+
+  it('should ignore code items that match an internal API doc', () => {
+    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass', internal: true });
+    const doc = { docType: 'test-doc', renderedContent: '<code>MyClass</code>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code>MyClass</code>');
+  });
+
+  it('should insert anchors for individual text nodes within a code block', () => {
+    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
+    const doc = { docType: 'test-doc', renderedContent: '<code><span>MyClass</span><span>MyClass</span></code>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code><span><a href="a/b/myclass" class="code-anchor">MyClass</a></span><span><a href="a/b/myclass" class="code-anchor">MyClass</a></span></code>');
+  });
+
+  it('should insert anchors for words that match within text nodes in a code block', () => {
+    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
+    aliasMap.addDoc({ docType: 'function', id: 'myFunc', aliases: ['myFunc'], path: 'ng/myfunc' });
+    aliasMap.addDoc({ docType: 'const', id: 'MY_CONST', aliases: ['MY_CONST'], path: 'ng/my_const' });
+    const doc = { docType: 'test-doc', renderedContent: '<code>myFunc() {\n  return new MyClass(MY_CONST);\n}</code>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code><a href="ng/myfunc" class="code-anchor">myFunc</a>() {\n  return new <a href="a/b/myclass" class="code-anchor">MyClass</a>(<a href="ng/my_const" class="code-anchor">MY_CONST</a>);\n}</code>');
+  });
+
+  it('should work with custom elements', () => {
+    autoLinkCode.codeElements = ['code-example'];
+    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
+    const doc = { docType: 'test-doc', renderedContent: '<code-example>MyClass</code-example>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code-example><a href="a/b/myclass" class="code-anchor">MyClass</a></code-example>');
+  });
+});
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 000000000000..27e1117cc295
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js
@@ -0,0 +1,49 @@
+const has = require('hast-util-has-property');
+const is = require('hast-util-is-element');
+const slug = require('rehype-slug');
+const visit = require('unist-util-visit');
+
+/**
+ * Get remark to add IDs to headings and inject anchors into them.
+ * This is a stripped-down equivalent of [rehype-autolink-headings](https://github.com/wooorm/rehype-autolink-headings)
+ * that supports ignoring headings with the `no-anchor` class.
+ */
+const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const NO_ANCHOR_CLASS = 'no-anchor';
+
+const clone = obj => JSON.parse(JSON.stringify(obj));
+const hasClass = (node, cls) => {
+  const className = node.properties.className;
+  return className && className.includes(cls);
+};
+
+const link = options =>
+  tree => visit(tree, node => {
+    if (is(node, HEADINGS) && has(node, 'id') && !hasClass(node, NO_ANCHOR_CLASS)) {
+      node.children.push({
+        type: 'element',
+        tagName: 'a',
+        properties: Object.assign(clone(options.properties), {href: `#${node.properties.id}`}),
+        children: clone(options.content)
+      });
+    }
+  });
+
+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 000000000000..4b22faae4345
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js
@@ -0,0 +1,50 @@
+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 originalContent = `
+      <h1>Heading 1</h2>
+      <h2>Heading with <strong>bold</strong></h2>
+      <h3>Heading with encoded chars &#x26;</h3>
+    `;
+    const processedContent = `
+      <h1 id="heading-1">Heading 1<a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a></h1>
+      <h2 id="heading-with-bold">Heading with <strong>bold</strong><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a></h2>
+      <h3 id="heading-with-encoded-chars-">Heading with encoded chars &#x26;<a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a></h3>
+    `;
+
+    const docs = [{docType: 'a', renderedContent: originalContent}];
+    processor.$process(docs);
+    expect(docs[0].renderedContent).toBe(processedContent);
+  });
+
+  it('should ignore headings with the `no-anchor` class', () => {
+    const originalContent = `
+      <h1 class="no-anchor">Heading 1</h2>
+      <h2 class="no-anchor">Heading with <strong>bold</strong></h2>
+      <h3 class="no-anchor">Heading with encoded chars &#x26;</h3>
+    `;
+    const processedContent = `
+      <h1 class="no-anchor" id="heading-1">Heading 1</h1>
+      <h2 class="no-anchor" id="heading-with-bold">Heading with <strong>bold</strong></h2>
+      <h3 class="no-anchor" id="heading-with-encoded-chars-">Heading with encoded chars &#x26;</h3>
+    `;
+
+    const docs = [{docType: 'a', renderedContent: originalContent}];
+    processor.$process(docs);
+    expect(docs[0].renderedContent).toBe(processedContent);
+  });
+});
+
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 000000000000..d54c5b4880bb
--- /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 cleaned ? toString(cleaned) : '';
+}
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 000000000000..22443afcdd9b
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/h1-checker.spec.js
@@ -0,0 +1,82 @@
+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?');
+  });
+
+  it('should not break if the h1 is empty (except for an aria-hidden anchor)', () => {
+    const doc = {
+      docType: 'a',
+      renderedContent: `
+        <h1><a aria-hidden="true"></a></h1>
+      `
+    };
+    expect(() => processor.$process([doc])).not.toThrow();
+  });
+});
diff --git a/aio/tools/transforms/angular-base-package/processors/checkContentRules.js b/aio/tools/transforms/angular-base-package/processors/checkContentRules.js
new file mode 100644
index 000000000000..f12480dbcaf0
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/checkContentRules.js
@@ -0,0 +1,70 @@
+
+/**
+ * A processor that can run arbitrary checking rules against properties of documents
+
+ * The configuration for the processor is via the `docTypeRules`.
+ * This is a hash of docTypes to rulesets.
+ * Each rules set is a hash of properties to rule functions.
+ *
+ * The processor will run each rule function against each matching property of each matching doc.
+ *
+ * An example rule might look like:
+ *
+ * ```
+ * function noMarkdownHeadings(doc, prop, value) {
+ *   const match = /^\s?#+\s+.*$/m.exec(value);
+ *   if (match) {
+ *     return `Headings not allowed in "${prop}" property. Found "${match[0]}"`;
+ *   }
+ * }
+ * ```
+ *
+ */
+module.exports = function checkContentRules(log, createDocMessage) {
+  return {
+    /**
+     * {
+     *   [docType]: {
+     *     [property]: Array<(doc: Document, property: string, value: any) => string|undefined>
+     *   }
+     * }
+     */
+    docTypeRules: {},
+    failOnContentErrors: false,
+    $runAfter: ['tags-extracted'],
+    $runBefore: [],
+    $process(docs) {
+      const logMessage = this.failOnContentErrors ? log.error.bind(log) : log.warn.bind(log);
+      const errors = [];
+      docs.forEach(doc => {
+        const docErrors = [];
+        const rules = this.docTypeRules[doc.docType] || {};
+        if (rules) {
+          Object.keys(rules).forEach(property => {
+            const ruleFns = rules[property];
+            ruleFns.forEach(ruleFn => {
+              const error = ruleFn(doc, property, doc[property]);
+              if (error) {
+                docErrors.push(error);
+              }
+            });
+          });
+        }
+        if (docErrors.length) {
+          errors.push({ doc, errors: docErrors });
+        }
+      });
+
+      if (errors.length) {
+        logMessage('Content contains errors');
+        errors.forEach(docError => {
+          const errors = docError.errors.join('\n        ');
+          logMessage(createDocMessage(errors + '\n        ', docError.doc));
+        });
+        if (this.failOnContentErrors) {
+          throw new Error('Stopping due to content errors.');
+        }
+      }
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-base-package/processors/checkContentRules.spec.js b/aio/tools/transforms/angular-base-package/processors/checkContentRules.spec.js
new file mode 100644
index 000000000000..8c0f500acd15
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/checkContentRules.spec.js
@@ -0,0 +1,122 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('checkContentRules processor', function() {
+  let processor, logger;
+
+  beforeEach(function() {
+    const dgeni = new Dgeni([testPackage('angular-base-package')]);
+    const injector = dgeni.configureInjector();
+    processor = injector.get('checkContentRules');
+    logger = injector.get('log');
+  });
+
+  it('should exist on the injector', () => {
+    expect(processor).toBeDefined();
+    expect(processor.$process).toEqual(jasmine.any(Function));
+  });
+
+  it('shpuld run at the right time', () => {
+    expect(processor.$runAfter).toEqual(['tags-extracted']);
+    expect(processor.$runBefore).toEqual([]);
+  });
+
+  it('should do nothing if not configured', () => {
+    const docs = [{ docType: 'test', description: '## heading 2' }];
+    processor.$process(docs);
+    expect(docs).toEqual([{ docType: 'test', description: '## heading 2' }]);
+
+    expect(logger.error).not.toHaveBeenCalled();
+  });
+
+  it('should run configured rules against matching docs', () => {
+    const nameSpy1 = jasmine.createSpy('name 1');
+    const nameSpy2 = jasmine.createSpy('name 2');
+    const nameSpy3 = jasmine.createSpy('name 3');
+    const descriptionSpy1 = jasmine.createSpy('description 1');
+    const descriptionSpy2 = jasmine.createSpy('description 2');
+    const descriptionSpy3 = jasmine.createSpy('description 3');
+
+    processor.docTypeRules = {
+      'test1': {
+        name: [nameSpy1, nameSpy3],
+        description: [descriptionSpy1, descriptionSpy3]
+      },
+      'test2': {
+        name: [nameSpy2],
+        description: [descriptionSpy2]
+      }
+    };
+
+    const docs = [
+      { docType: 'test1', description: 'test doc 1', name: 'test-1' },
+      { docType: 'test2', description: 'test doc 2', name: 'test-2' }
+    ];
+    processor.$process(docs);
+    expect(nameSpy1).toHaveBeenCalledTimes(1);
+    expect(nameSpy1).toHaveBeenCalledWith(docs[0], 'name', 'test-1');
+    expect(nameSpy2).toHaveBeenCalledTimes(1);
+    expect(nameSpy2).toHaveBeenCalledWith(docs[1], 'name', 'test-2');
+    expect(nameSpy3).toHaveBeenCalledTimes(1);
+    expect(nameSpy3).toHaveBeenCalledWith(docs[0], 'name', 'test-1');
+    expect(descriptionSpy1).toHaveBeenCalledTimes(1);
+    expect(descriptionSpy1).toHaveBeenCalledWith(docs[0], 'description', 'test doc 1');
+    expect(descriptionSpy2).toHaveBeenCalledTimes(1);
+    expect(descriptionSpy2).toHaveBeenCalledWith(docs[1], 'description', 'test doc 2');
+    expect(descriptionSpy3).toHaveBeenCalledTimes(1);
+    expect(descriptionSpy3).toHaveBeenCalledWith(docs[0], 'description', 'test doc 1');
+  });
+
+  it('should log warnings if the rule returns error messages and `failOnContentErrors` is false', () => {
+    const nameSpy1 = jasmine.createSpy('name 1').and.returnValue('name error message');
+    const descriptionSpy1 = jasmine.createSpy('description 1').and.returnValue('description error message');
+
+    processor.failOnContentErrors = false;
+    processor.docTypeRules = {
+      'test1': {
+        name: [nameSpy1],
+        description: [descriptionSpy1]
+      }
+    };
+
+    const docs = [
+      { docType: 'test1', description: 'test doc 1', name: 'test-1' },
+      { docType: 'test2', description: 'test doc 2', name: 'test-2' }
+    ];
+
+    processor.$process(docs);
+
+    expect(logger.warn).toHaveBeenCalledTimes(2);
+    expect(logger.warn).toHaveBeenCalledWith('Content contains errors');
+    expect(logger.warn).toHaveBeenCalledWith(`name error message
+        description error message
+         - doc "test-1" (test1) `);
+  });
+
+  it('should log errors and then throw if `failOnContentErrors` is true and errors are found', () => {
+    const nameSpy1 = jasmine.createSpy('name 1').and.returnValue('name error message');
+    const descriptionSpy1 = jasmine.createSpy('description 1').and.returnValue('description error message');
+
+    processor.failOnContentErrors = true;
+    processor.docTypeRules = {
+      'test1': {
+        name: [nameSpy1],
+        description: [descriptionSpy1]
+      }
+    };
+
+    const docs = [
+      { docType: 'test1', description: 'test doc 1', name: 'test-1' },
+      { docType: 'test2', description: 'test doc 2', name: 'test-2' }
+    ];
+
+    expect(() => processor.$process(docs)).toThrowError('Stopping due to content errors.');
+
+    expect(logger.error).toHaveBeenCalledTimes(2);
+    expect(logger.error).toHaveBeenCalledWith('Content contains errors');
+    expect(logger.error).toHaveBeenCalledWith(`name error message
+        description error message
+         - doc "test-1" (test1) `);
+  });
+
+});
diff --git a/aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.js b/aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.js
new file mode 100644
index 000000000000..f79b1ba9617a
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.js
@@ -0,0 +1,33 @@
+var _ = require('lodash');
+
+/**
+ * @dgProcessor checkUnbalancedBackTicks
+ * @description
+ * Searches the rendered content for an odd number of (```) backticks,
+ * which would indicate an unbalanced pair and potentially a typo in the
+ * source content.
+ */
+module.exports = function checkUnbalancedBackTicks(log, createDocMessage) {
+
+  var BACKTICK_REGEX = /^ *```/gm;
+
+  return {
+    // $runAfter: ['checkAnchorLinksProcessor'],
+    $runAfter: ['inlineTagProcessor'],
+    $runBefore: ['writeFilesProcessor'],
+    $process: function(docs) {
+      _.forEach(docs, function(doc) {
+        if (doc.renderedContent) {
+          var matches = doc.renderedContent.match(BACKTICK_REGEX);
+          if (matches && matches.length % 2 !== 0) {
+            doc.unbalancedBackTicks = true;
+            log.warn(createDocMessage(
+                'checkUnbalancedBackTicks processor: unbalanced backticks found in rendered content',
+                doc));
+            log.warn(doc.renderedContent);
+          }
+        }
+      });
+    }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.spec.js b/aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.spec.js
new file mode 100644
index 000000000000..7b5a718389ab
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.spec.js
@@ -0,0 +1,29 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('checkUnbalancedBackTicks', function() {
+  var dgeni, injector, processor, log;
+
+  beforeEach(function() {
+    dgeni = new Dgeni([testPackage('angular-base-package')]);
+    injector = dgeni.configureInjector();
+    processor = injector.get('checkUnbalancedBackTicks');
+    log = injector.get('log');
+  });
+
+  it('should warn if there are an odd number of back ticks in the rendered content', function() {
+    var docs = [{
+      renderedContent: '```\n' +
+          'code block\n' +
+          '```\n' +
+          '```\n' +
+          'code block with missing closing back ticks\n'
+    }];
+
+    processor.$process(docs);
+
+    expect(log.warn).toHaveBeenCalledWith(
+        'checkUnbalancedBackTicks processor: unbalanced backticks found in rendered content - doc');
+    expect(docs[0].unbalancedBackTicks).toBe(true);
+  });
+});
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 000000000000..932f6e69d2dc
--- /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 000000000000..b68f1527de04
--- /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).toHaveBeenCalledWith('Title property expected - doc (test-doc) ');
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/processors/copyContentAssets.js b/aio/tools/transforms/angular-base-package/processors/copyContentAssets.js
new file mode 100644
index 000000000000..968a07a1c3a7
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/copyContentAssets.js
@@ -0,0 +1,12 @@
+
+module.exports = function copyContentAssetsProcessor(copyFolder) {
+  return {
+    $runBefore: ['postProcessHtml'],
+    assetMappings: [],
+    $process() {
+      this.assetMappings.forEach(map => {
+        copyFolder(map.from, map.to);
+      });
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-base-package/processors/copyContentAssets.spec.js b/aio/tools/transforms/angular-base-package/processors/copyContentAssets.spec.js
new file mode 100644
index 000000000000..df2d85769cdb
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/copyContentAssets.spec.js
@@ -0,0 +1,27 @@
+const testPackage = require('../../helpers/test-package');
+const Dgeni = require('dgeni');
+const factory = require('./copyContentAssets');
+
+describe('extractDecoratedClasses processor', function() {
+  let dgeni, injector, processor;
+
+  beforeEach(function() {
+    dgeni = new Dgeni([testPackage('angular-content-package')]);
+    injector = dgeni.configureInjector();
+    processor = injector.get('copyContentAssetsProcessor');
+  });
+
+  it('should exist', () => {
+    expect(processor).toBeDefined();
+  });
+
+  it('should call copyFolder with each mapping', () => {
+    const mockCopyFolder = jasmine.createSpy();
+    processor = factory(mockCopyFolder);
+    processor.assetMappings.push({ from: 'a/b/c', to: 'x/y/z' });
+    processor.assetMappings.push({ from: '1/2/3', to: '4/5/6' });
+    processor.$process();
+    expect(mockCopyFolder).toHaveBeenCalledWith('a/b/c', 'x/y/z');
+    expect(mockCopyFolder).toHaveBeenCalledWith('1/2/3', '4/5/6');
+  });
+});
diff --git a/aio/tools/transforms/angular-base-package/processors/createSitemap.js b/aio/tools/transforms/angular-base-package/processors/createSitemap.js
new file mode 100644
index 000000000000..4cbf8f5287a0
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/createSitemap.js
@@ -0,0 +1,34 @@
+module.exports = function createSitemap() {
+  return {
+    blacklistedDocTypes: [
+      'navigation-json',
+      'contributors-json',
+      'resources-json',
+    ],
+    blacklistedPaths: [
+      'test',
+      'file-not-found',
+      'overview-dump'
+    ],
+    $runAfter: ['paths-computed'],
+    $runBefore: ['rendering-docs'],
+    $process(docs) {
+      docs.push({
+        id: 'sitemap.xml',
+        path: 'sitemap.xml',
+        outputPath: '../sitemap.xml',
+        template: 'sitemap.template.xml',
+        urls: docs
+          // Filter out docs that are not outputted
+          .filter(doc => doc.outputPath)
+          // Filter out unwanted docs
+          .filter(doc => this.blacklistedDocTypes.indexOf(doc.docType) === -1)
+          .filter(doc => this.blacklistedPaths.indexOf(doc.path) === -1)
+          // Capture the path of each doc
+          .map(doc => doc.path)
+          // Convert the homepage: `index` to `/`
+          .map(path => path === 'index' ? '' : path)
+      });
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-base-package/processors/createSitemap.spec.js b/aio/tools/transforms/angular-base-package/processors/createSitemap.spec.js
new file mode 100644
index 000000000000..5559d0c80e59
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/createSitemap.spec.js
@@ -0,0 +1,83 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('createSitemap processor', () => {
+  var injector, processor;
+
+  beforeEach(() => {
+    const dgeni = new Dgeni([testPackage('angular-base-package')]);
+
+    injector = dgeni.configureInjector();
+    processor = injector.get('createSitemap');
+  });
+
+  it('should be available from the injector', () => {
+    expect(processor).toBeDefined();
+  });
+
+  it('should run after "paths-computed"', () => {
+    expect(processor.$runAfter).toEqual(['paths-computed']);
+  });
+
+  it('should run before "rendering-docs"', () => {
+    expect(processor.$runBefore).toEqual(['rendering-docs']);
+  });
+
+  describe('$process', () => {
+    describe('should add a sitemap doc', () => {
+
+      it('with the correct id, path, outputPath and template properties', () => {
+        const docs = [];
+        processor.$process(docs);
+        expect(docs.pop()).toEqual(jasmine.objectContaining({
+          id: 'sitemap.xml',
+          path: 'sitemap.xml',
+          outputPath: '../sitemap.xml',
+          template: 'sitemap.template.xml'
+        }));
+      });
+
+      it('with an array of urls for each doc that has an outputPath', () => {
+        const docs = [
+          { path: 'abc', outputPath: 'abc' },
+          { path: 'cde' },
+          { path: 'fgh', outputPath: 'fgh' },
+        ];
+        processor.$process(docs);
+        expect(docs.pop().urls).toEqual(['abc', 'fgh']);
+      });
+
+      it('ignoring blacklisted doc types', () => {
+        const docs = [
+          { path: 'abc', outputPath: 'abc', docType: 'good' },
+          { path: 'cde', outputPath: 'cde', docType: 'bad' },
+          { path: 'fgh', outputPath: 'fgh', docType: 'good' },
+        ];
+        processor.blacklistedDocTypes = ['bad'];
+        processor.$process(docs);
+        expect(docs.pop().urls).toEqual(['abc', 'fgh']);
+      });
+
+      it('ignoring blacklisted paths', () => {
+        const docs = [
+          { path: 'abc', outputPath: 'abc' },
+          { path: 'cde', outputPath: 'cde' },
+          { path: 'fgh', outputPath: 'fgh' },
+        ];
+        processor.blacklistedPaths = ['cde'];
+        processor.$process(docs);
+        expect(docs.pop().urls).toEqual(['abc', 'fgh']);
+      });
+
+      it('mapping the home page\'s path to `/`', () => {
+        const docs = [
+          { path: 'abc', outputPath: 'abc' },
+          { path: 'index', outputPath: 'index.json' },
+          { path: 'fgh', outputPath: 'fgh' },
+        ];
+        processor.$process(docs);
+        expect(docs.pop().urls).toEqual(['abc', '', 'fgh']);
+      });
+    });
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.js b/aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.js
new file mode 100644
index 000000000000..0ed3b3bade09
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.js
@@ -0,0 +1,24 @@
+/**
+ * @dgProcessor fixInternalDocumentLinks
+ * @description
+ * Add in the document path to links that start with a hash.
+ * This is important when the web app has a base href in place,
+ * since links like: `<a href="#some-id">` would get mapped to
+ * the URL `base/#some-id` even if the current location is `base/some/doc`.
+ */
+module.exports = function fixInternalDocumentLinks() {
+
+  var INTERNAL_LINK = /(<a [^>]*href=")(#[^"]*)/g;
+
+  return {
+    $runAfter: ['inlineTagProcessor'],
+    $runBefore: ['convertToJsonProcessor'],
+    $process: function(docs) {
+      docs.forEach(doc => {
+        doc.renderedContent = doc.renderedContent.replace(INTERNAL_LINK, (_, pre, hash) => {
+          return pre + doc.path + hash;
+        });
+      });
+    }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.spec.js b/aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.spec.js
new file mode 100644
index 000000000000..d8957ec9979a
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.spec.js
@@ -0,0 +1,52 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./fixInternalDocumentLinks');
+const Dgeni = require('dgeni');
+
+describe('fixInternalDocumentLinks processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-base-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('fixInternalDocumentLinks');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run before the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runBefore).toEqual(['convertToJsonProcessor']);
+  });
+
+  it('should run after the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runAfter).toEqual(['inlineTagProcessor']);
+  });
+
+  it('should prefix internal hash links with the current doc path', () => {
+    const processor = processorFactory();
+    const docs = [
+      {
+        path: 'some/doc',
+        renderedContent: `
+          <a href="http://google.com#q=angular">Google</a>
+          <a href="some/relative/path#some-id">Some Id</a>
+          <a href="#some-internal-id">Link to heading</a>
+          <a class="important" href="#some-internal-id">Link to heading</a>
+          <a href="#some-internal-id" target="_blank">Link to heading</a>
+        `
+      },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      {
+        path: 'some/doc',
+        renderedContent: `
+          <a href="http://google.com#q=angular">Google</a>
+          <a href="some/relative/path#some-id">Some Id</a>
+          <a href="some/doc#some-internal-id">Link to heading</a>
+          <a class="important" href="some/doc#some-internal-id">Link to heading</a>
+          <a href="some/doc#some-internal-id" target="_blank">Link to heading</a>
+        `
+      },
+    ]);
+  });
+});
diff --git a/aio/tools/transforms/angular-base-package/processors/generateKeywords.js b/aio/tools/transforms/angular-base-package/processors/generateKeywords.js
new file mode 100644
index 000000000000..ae52139c2947
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/generateKeywords.js
@@ -0,0 +1,158 @@
+'use strict';
+
+var fs = require('fs');
+var path = require('canonical-path');
+
+/**
+ * @dgProcessor generateKeywordsProcessor
+ * @description
+ * This processor extracts all the keywords from each document and creates
+ * a new document that will be rendered as a JavaScript file containing all
+ * this data.
+ */
+module.exports = function generateKeywordsProcessor(log, readFilesProcessor) {
+  return {
+    ignoreWordsFile: undefined,
+    propertiesToIgnore: [],
+    docTypesToIgnore: [],
+    outputFolder: '',
+    $validate: {
+      ignoreWordsFile: {},
+      docTypesToIgnore: {},
+      propertiesToIgnore: {},
+      outputFolder: {presence: true}
+    },
+    $runAfter: ['postProcessHtml'],
+    $runBefore: ['writing-files'],
+    $process: function(docs) {
+
+      // Keywords to ignore
+      var wordsToIgnore = [];
+      var propertiesToIgnore;
+      var docTypesToIgnore;
+
+      // Keywords start with "ng:" or one of $, _ or a letter
+      var KEYWORD_REGEX = /^((ng:|[$_a-z])[\w\-_]+)/;
+
+      // Load up the keywords to ignore, if specified in the config
+      if (this.ignoreWordsFile) {
+        var ignoreWordsPath = path.resolve(readFilesProcessor.basePath, this.ignoreWordsFile);
+        wordsToIgnore = fs.readFileSync(ignoreWordsPath, 'utf8').toString().split(/[,\s\n\r]+/gm);
+
+        log.debug('Loaded ignore words from "' + ignoreWordsPath + '"');
+        log.silly(wordsToIgnore);
+      }
+
+      propertiesToIgnore = convertToMap(this.propertiesToIgnore);
+      log.debug('Properties to ignore', propertiesToIgnore);
+      docTypesToIgnore = convertToMap(this.docTypesToIgnore);
+      log.debug('Doc types to ignore', docTypesToIgnore);
+
+      var ignoreWordsMap = convertToMap(wordsToIgnore);
+
+      // 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 = preprocessText(text).toLowerCase().split(/[.\s,`'"#]+/mg);
+        tokens.forEach(function(token) {
+          var match = token.match(KEYWORD_REGEX);
+          if (match) {
+            var key = match[1];
+            if (!keywordMap[key]) {
+              keywordMap[key] = true;
+              words.push(key);
+            }
+          }
+        });
+      }
+
+
+      const filteredDocs = docs
+          // We are not interested in some docTypes
+          .filter(function(doc) { return !docTypesToIgnore[doc.docType]; })
+          // Ignore internals and private exports (indicated by the ɵ prefix)
+          .filter(function(doc) { return !doc.internal && !doc.privateExport; });
+
+
+      filteredDocs.forEach(function(doc) {
+
+        var words = [];
+        var keywordMap = Object.assign({}, ignoreWordsMap);
+        var members = [];
+        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) {
+          const value = doc[key];
+
+          if (isString(value) && !propertiesToIgnore[key]) {
+            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 === 'members' || key === 'statics') {
+            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: preprocessText(doc.searchTitle),
+          headingWords: headingWords.sort().join(' '),
+          keywords: words.sort().join(' '),
+          members: members.sort().join(' ')
+        };
+
+      });
+
+      // 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',
+        path: this.outputFolder + '/search-data.json',
+        outputPath: this.outputFolder + '/search-data.json',
+        data: searchData,
+        renderedContent: JSON.stringify(searchData)
+      });
+    }
+  };
+};
+
+
+function isString(value) {
+  return typeof value == 'string';
+}
+
+function convertToMap(collection) {
+  const obj = {};
+  collection.forEach(key => { obj[key] = true; });
+  return obj;
+}
\ No newline at end of file
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 000000000000..7b899643d05c
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/generateKeywords.spec.js
@@ -0,0 +1,173 @@
+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 add member doc properties to the search terms', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    const docs = [
+      {
+        docType: 'class',
+        name: 'PublicExport',
+        searchTitle: 'class PublicExport',
+        vFile: { headings: { h2: ['heading A'] } },
+        content: 'Some content with ngClass in it.',
+        members: [
+          { name: 'instanceMethodA' },
+          { name: 'instancePropertyA' },
+          { name: 'instanceMethodB' },
+          { name: 'instancePropertyB' },
+        ],
+        statics: [
+          { name: 'staticMethodA' },
+          { name: 'staticPropertyA' },
+          { name: 'staticMethodB' },
+          { name: 'staticPropertyB' },
+        ],
+      },
+    ];
+    processor.$process(docs);
+    const keywordsDoc = docs[docs.length - 1];
+    expect(keywordsDoc.data[0].members).toEqual(
+      'instancemethoda instancemethodb instancepropertya instancepropertyb staticmethoda staticmethodb staticpropertya staticpropertyb'
+    );
+  });
+
+  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/tools/transforms/angular-base-package/processors/renderLinkInfo.js b/aio/tools/transforms/angular-base-package/processors/renderLinkInfo.js
new file mode 100644
index 000000000000..0a0f71df1fa0
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/renderLinkInfo.js
@@ -0,0 +1,52 @@
+/**
+ * @dgProcessor renderLinkInfo
+ * @description For each doc that has one of the specified docTypes,
+ * add HTML comments that describe the links to and from the doc.
+ */
+module.exports = function renderLinkInfo(extractLinks) {
+  return {
+    docTypes: [],
+    $runBefore: ['convertToJsonProcessor'],
+    $runAfter: ['fixInternalDocumentLinks'],
+    $process(docs) {
+      const toLinks = {};
+      const fromLinks = {};
+      const docsToCheck = docs.filter(doc => this.docTypes.indexOf(doc.docType) !==  -1);
+
+      // Extract and store all links found in each doc in hashes
+      docsToCheck.forEach(doc => {
+        const linksFromDoc = extractLinks(doc.renderedContent).hrefs;
+        // Update the hashes
+        fromLinks[doc.path] = linksFromDoc;
+        linksFromDoc.forEach(linkPath => {
+          linkPath = linkPath.match(/^[^#?]+/)[0]; // remove the query and hash from the link
+          (toLinks[linkPath] = toLinks[linkPath] || []).push(doc.path);
+        });
+      });
+
+      // Add HTML comments to the end of the rendered content that list the links found above
+      docsToCheck.forEach(doc => {
+        const linksFromDoc = getLinks(fromLinks, doc.path);
+        const linksToDoc = getLinks(toLinks, doc.path);
+        doc.renderedContent +=
+        `\n<!-- links to this doc:${linksToDoc.map(link => `\n - ${link}`).join('')}\n-->\n` +
+        `<!-- links from this doc:${linksFromDoc.map(link => `\n - ${link}`).join('')}\n-->`;
+      });
+    }
+  };
+};
+
+function getLinks(hash, docPath) {
+  const links = (hash[docPath] || []).filter(link => link !== docPath);
+  const internal = {};
+  const external = {};
+  links.forEach(link => {
+    if (/^[^:/#?]+:/.test(link)) {
+      external[link] = true;
+    } else {
+      internal[link] = true;
+    }
+  });
+  return Object.keys(internal).sort()
+        .concat(Object.keys(external).sort());
+}
diff --git a/aio/tools/transforms/angular-base-package/processors/renderLinkInfo.spec.js b/aio/tools/transforms/angular-base-package/processors/renderLinkInfo.spec.js
new file mode 100644
index 000000000000..08d5cd8cddd7
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/renderLinkInfo.spec.js
@@ -0,0 +1,222 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./renderLinkInfo');
+const extractLinks = require('dgeni-packages/base/services/extractLinks')();
+const Dgeni = require('dgeni');
+
+describe('renderLinkInfo processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-base-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('renderLinkInfo');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run before the correct processor', () => {
+    const processor = processorFactory(extractLinks);
+    expect(processor.$runBefore).toEqual(['convertToJsonProcessor']);
+  });
+
+  it('should run after the correct processor', () => {
+    const processor = processorFactory(extractLinks);
+    expect(processor.$runAfter).toEqual(['fixInternalDocumentLinks']);
+  });
+
+  it('should add HTML comments for links out of docs', () => {
+    const processor = processorFactory(extractLinks);
+    processor.docTypes = ['test'];
+    const docs = [
+      { path: 'test-1', docType: 'test', renderedContent: '<a href="a/b/c"></a><a href="x/y/z"></a>' },
+      { path: 'test-2', docType: 'test', renderedContent: '<a href="foo"></a><a href="bar"></a>' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      {
+        path: 'test-1',
+        docType: 'test',
+        renderedContent: '<a href="a/b/c"></a><a href="x/y/z"></a>\n' +
+                         '<!-- links to this doc:\n-->\n' +
+                         '<!-- links from this doc:\n - a/b/c\n - x/y/z\n-->'
+      },
+      {
+        path: 'test-2',
+        docType: 'test',
+        renderedContent: '<a href="foo"></a><a href="bar"></a>\n' +
+                         '<!-- links to this doc:\n-->\n' +
+                         '<!-- links from this doc:\n - bar\n - foo\n-->'
+      },
+    ]);
+  });
+
+  it('should order links alphabetically', () => {
+    const processor = processorFactory(extractLinks);
+    processor.docTypes = ['test'];
+    const docs = [
+      { path: 'test-1', docType: 'test', renderedContent: '<a href="orange"></a><a href="apple"></a><a href="banana"></a>' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      {
+        path: 'test-1',
+        docType: 'test',
+        renderedContent: '<a href="orange"></a><a href="apple"></a><a href="banana"></a>\n' +
+                         '<!-- links to this doc:\n-->\n' +
+                         '<!-- links from this doc:\n - apple\n - banana\n - orange\n-->'
+      },
+    ]);
+  });
+
+  it('should list repeated links only once', () => {
+    const processor = processorFactory(extractLinks);
+    processor.docTypes = ['test'];
+    const docs = [
+      { path: 'test-1', docType: 'test', renderedContent: '<a href="banana"></a><a href="apple"></a><a href="banana"></a>' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      {
+        path: 'test-1',
+        docType: 'test',
+        renderedContent: '<a href="banana"></a><a href="apple"></a><a href="banana"></a>\n' +
+                         '<!-- links to this doc:\n-->\n' +
+                         '<!-- links from this doc:\n - apple\n - banana\n-->'
+      },
+    ]);
+  });
+
+  it('should list internal links before external', () => {
+    const processor = processorFactory(extractLinks);
+    processor.docTypes = ['test'];
+    const docs = [
+      { path: 'test-1', docType: 'test', renderedContent: '<a href="https://www.google.com"></a><a href="apple"></a><a href="ftp://myfile.org"></a>' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      {
+        path: 'test-1',
+        docType: 'test',
+        renderedContent: '<a href="https://www.google.com"></a><a href="apple"></a><a href="ftp://myfile.org"></a>\n' +
+                         '<!-- links to this doc:\n-->\n' +
+                         '<!-- links from this doc:\n - apple\n - ftp://myfile.org\n - https://www.google.com\n-->'
+      },
+    ]);
+  });
+
+  it('should ignore docs that do not have the specified docType', () => {
+    const processor = processorFactory(extractLinks);
+    processor.docTypes = ['test'];
+    const docs = [
+      { path: 'test-1', docType: 'test', renderedContent: '<a href="a/b/c"></a><a href="x/y/z"></a>' },
+      { path: 'test-2', docType: 'test2', renderedContent: '<a href="foo"></a><a href="bar"></a>' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      {
+        path: 'test-1',
+        docType: 'test',
+        renderedContent: '<a href="a/b/c"></a><a href="x/y/z"></a>\n' +
+                         '<!-- links to this doc:\n-->\n' +
+                         '<!-- links from this doc:\n - a/b/c\n - x/y/z\n-->'
+      },
+      {
+        path: 'test-2',
+        docType: 'test2',
+        renderedContent: '<a href="foo"></a><a href="bar"></a>'
+      },
+    ]);
+  });
+
+  it('should add HTML comments for links into docs', () => {
+    const processor = processorFactory(extractLinks);
+    processor.docTypes = ['test'];
+    const docs = [
+      { path: 'test-1', docType: 'test', renderedContent: '<a href="test-2"></a>' },
+      { path: 'test-2', docType: 'test', renderedContent: '<a href="test-1"></a><a href="test-3"></a>' },
+      { path: 'test-3', docType: 'test', renderedContent: '<a href="test-1"></a><a href="test-2"></a>' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      {
+        path: 'test-1',
+        docType: 'test',
+        renderedContent: '<a href="test-2"></a>\n' +
+        '<!-- links to this doc:\n - test-2\n - test-3\n-->\n' +
+        '<!-- links from this doc:\n - test-2\n-->'
+      },
+      {
+        path: 'test-2',
+        docType: 'test',
+        renderedContent: '<a href="test-1"></a><a href="test-3"></a>\n' +
+        '<!-- links to this doc:\n - test-1\n - test-3\n-->\n' +
+        '<!-- links from this doc:\n - test-1\n - test-3\n-->'
+      },
+      {
+        path: 'test-3',
+        docType: 'test',
+        renderedContent: '<a href="test-1"></a><a href="test-2"></a>\n' +
+        '<!-- links to this doc:\n - test-2\n-->\n' +
+        '<!-- links from this doc:\n - test-1\n - test-2\n-->'
+      },
+    ]);
+  });
+
+  it('should not include links to themselves', () => {
+    const processor = processorFactory(extractLinks);
+    processor.docTypes = ['test'];
+    const docs = [
+      { path: 'test-1', docType: 'test', renderedContent: '<a href="test-2"></a>' },
+      { path: 'test-2', docType: 'test', renderedContent: '<a href="test-1"></a><a href="test-2"></a>' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      {
+        path: 'test-1',
+        docType: 'test',
+        renderedContent: '<a href="test-2"></a>\n' +
+        '<!-- links to this doc:\n - test-2\n-->\n' +
+        '<!-- links from this doc:\n - test-2\n-->'
+      },
+      {
+        path: 'test-2',
+        docType: 'test',
+        renderedContent: '<a href="test-1"></a><a href="test-2"></a>\n' +
+        '<!-- links to this doc:\n - test-1\n-->\n' +
+        '<!-- links from this doc:\n - test-1\n-->'
+      },
+    ]);
+  });
+
+  it('should match links that contain fragments or queries', () => {
+    const processor = processorFactory(extractLinks);
+    processor.docTypes = ['test'];
+    const docs = [
+      { path: 'test-1', docType: 'test', renderedContent: '<a href="test-2#foo"></a>' },
+      { path: 'test-2', docType: 'test', renderedContent: '<a href="test-1?some-query"></a>' },
+      { path: 'test-3', docType: 'test', renderedContent: '<a href="test-1?some-query#foo"></a>' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      {
+        path: 'test-1',
+        docType: 'test',
+        renderedContent: '<a href="test-2#foo"></a>\n' +
+        '<!-- links to this doc:\n - test-2\n - test-3\n-->\n' +
+        '<!-- links from this doc:\n - test-2#foo\n-->'
+      },
+      {
+        path: 'test-2',
+        docType: 'test',
+        renderedContent: '<a href="test-1?some-query"></a>\n' +
+        '<!-- links to this doc:\n - test-1\n-->\n' +
+        '<!-- links from this doc:\n - test-1?some-query\n-->'
+      },
+      {
+        path: 'test-3',
+        docType: 'test',
+        renderedContent: '<a href="test-1?some-query#foo"></a>\n' +
+        '<!-- links to this doc:\n-->\n' +
+        '<!-- links from this doc:\n - test-1?some-query#foo\n-->'
+      },
+    ]);
+  });
+});
diff --git a/aio/tools/transforms/angular-base-package/readers/json.js b/aio/tools/transforms/angular-base-package/readers/json.js
new file mode 100644
index 000000000000..07c2ff6e2ed9
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/readers/json.js
@@ -0,0 +1,19 @@
+/**
+ * Read in JSON files
+ */
+module.exports = function jsonFileReader() {
+  return {
+    name: 'jsonFileReader',
+    getDocs: function(fileInfo) {
+
+      // We return a single element array because content files only contain one document
+      return [{
+        docType: fileInfo.baseName + '-json',
+        data: JSON.parse(fileInfo.content),
+        template: 'json-doc.template.json',
+        id: fileInfo.baseName,
+        aliases: [fileInfo.baseName, fileInfo.relativePath]
+      }];
+    }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.js b/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.js
new file mode 100644
index 000000000000..9b3c3b6fcaaf
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.js
@@ -0,0 +1,9 @@
+module.exports = function filterBy() {
+  return {
+    name: 'filterByPropertyValue',
+    process: function(list, property, value) {
+      if (!list) return list;
+      return list.filter(item => item[property] === value);
+    }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.spec.js b/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.spec.js
new file mode 100644
index 000000000000..d2c5823bb5db
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.spec.js
@@ -0,0 +1,14 @@
+const factory = require('./filterByPropertyValue');
+
+describe('filterByPropertyValue filter', () => {
+  let filter;
+
+  beforeEach(function() { filter = factory(); });
+
+  it('should be called "filterByPropertyValue"', function() { expect(filter.name).toEqual('filterByPropertyValue'); });
+
+  it('should filter out items that do not match the given property value', function() {
+    expect(filter.process([{ a: 1 }, { a: 2 }, { b: 1 }, { a: 1, b: 2 }, { a: null }, { a: undefined }], 'a', 1))
+        .toEqual([{ a: 1 }, { a: 1, b: 2 }]);
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/hasValues.js b/aio/tools/transforms/angular-base-package/rendering/hasValues.js
new file mode 100644
index 000000000000..7b15501fa29b
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/hasValues.js
@@ -0,0 +1,9 @@
+module.exports = function hasValues() {
+  return {
+    name: 'hasValues',
+    process: function(list, property) {
+      if (!list || !Array.isArray(list)) return false;
+      return list.some(item => item[property]);
+    }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/hasValues.spec.js b/aio/tools/transforms/angular-base-package/rendering/hasValues.spec.js
new file mode 100644
index 000000000000..7b057bcafd4b
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/hasValues.spec.js
@@ -0,0 +1,19 @@
+const factory = require('./hasValues');
+
+describe('hasValues filter', () => {
+  let filter;
+
+  beforeEach(function() { filter = factory(); });
+
+  it('should be called "hasValues"', function() { expect(filter.name).toEqual('hasValues'); });
+
+  it('should return true if the specified property is truthy on any item in the list', function() {
+    expect(filter.process([], 'a')).toEqual(false);
+    expect(filter.process(0, 'a')).toEqual(false);
+    expect(filter.process({}, 'a')).toEqual(false);
+    expect(filter.process([{a: 1}], 'a')).toEqual(true);
+    expect(filter.process([{b: 2}], 'a')).toEqual(false);
+    expect(filter.process([{a: 1, b: 2}], 'a')).toEqual(true);
+    expect(filter.process([{b: 2}, {a: 1}], 'a')).toEqual(true);
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/indentForMarkdown.js b/aio/tools/transforms/angular-base-package/rendering/indentForMarkdown.js
new file mode 100644
index 000000000000..3330114f0481
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/indentForMarkdown.js
@@ -0,0 +1,62 @@
+module.exports = function() {
+  // var MIXIN_PATTERN = /\S*\+\S*\(.*/;
+  return {
+    name: 'indentForMarkdown',
+    process: function(str, width) {
+      if (str == null || str.length === 0) {
+        return '';
+      }
+      width = width || 4;
+
+      var lines = str.split('\n');
+      var newLines = [];
+      var sp = spaces(width);
+      var spMixin = spaces(width - 2);
+      var isAfterMarkdownTag = true;
+      lines.forEach(function(line) {
+        // indent lines that match mixin pattern by 2 less than specified width
+        if (line.indexOf('{@example') >= 0) {
+          if (isAfterMarkdownTag) {
+            // happens if example follows example
+            if (newLines.length > 0) {
+              newLines.pop();
+            } else {
+              // 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
+            }
+          }
+          newLines.push(spMixin + line);
+          // after a mixin line we need to reenter markdown.
+          newLines.push(spMixin + ':marked');
+          isAfterMarkdownTag = true;
+        } else {
+          if ((!isAfterMarkdownTag) || (line.trim().length > 0)) {
+            newLines.push(sp + line);
+            isAfterMarkdownTag = false;
+          }
+        }
+      });
+      if (isAfterMarkdownTag) {
+        if (newLines.length > 0) {
+          // if last line is a markdown tag remove it.
+          newLines.pop();
+        }
+      }
+      // force character to be a newLine.
+      if (newLines.length > 0) newLines.push('');
+      var res = newLines.join('\n');
+      return res;
+    }
+  };
+
+  function spaces(n) {
+    var str = '';
+    for (var i = 0; i < n; i++) {
+      str += ' ';
+    }
+    return str;
+  }
+
+};
diff --git a/aio/tools/transforms/angular-base-package/rendering/toId.js b/aio/tools/transforms/angular-base-package/rendering/toId.js
new file mode 100644
index 000000000000..007172eea608
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/toId.js
@@ -0,0 +1,6 @@
+module.exports = function toId() {
+  return {
+    name: 'toId',
+    process: function(str) { return str.replace(/[^(a-z)(A-Z)(0-9)._-]/g, '-'); }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/toId.spec.js b/aio/tools/transforms/angular-base-package/rendering/toId.spec.js
new file mode 100644
index 000000000000..2a6e984a02c3
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/toId.spec.js
@@ -0,0 +1,14 @@
+var factory = require('./toId');
+
+describe('toId filter', function() {
+  var filter;
+
+  beforeEach(function() { filter = factory(); });
+
+  it('should be called "toId"', function() { expect(filter.name).toEqual('toId'); });
+
+  it('should convert a string to make it appropriate for use as an HTML id', function() {
+    expect(filter.process('This is a big string with €bad#characaters¢\nAnd even NewLines'))
+        .toEqual('This-is-a-big-string-with--bad-characaters--And-even-NewLines');
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/trimBlankLines.js b/aio/tools/transforms/angular-base-package/rendering/trimBlankLines.js
new file mode 100644
index 000000000000..37615955c60d
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/trimBlankLines.js
@@ -0,0 +1,15 @@
+module.exports = function() {
+  return {
+    name: 'trimBlankLines',
+    process: function(str) {
+      var lines = str.split(/\r?\n/);
+      while (lines.length && (lines[0].trim() === '')) {
+        lines.shift();
+      }
+      while (lines.length && (lines[lines.length - 1].trim() === '')) {
+        lines.pop();
+      }
+      return lines.join('\n');
+    }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/trimBlankLines.spec.js b/aio/tools/transforms/angular-base-package/rendering/trimBlankLines.spec.js
new file mode 100644
index 000000000000..77a0c8e01d3b
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/trimBlankLines.spec.js
@@ -0,0 +1,15 @@
+var factory = require('./trimBlankLines');
+
+describe('trimBlankLines filter', function() {
+  var filter;
+
+  beforeEach(function() { filter = factory(); });
+
+  it('should be called "trimBlankLines"',
+     function() { expect(filter.name).toEqual('trimBlankLines'); });
+
+  it('should remove empty lines from the start and end of the string', function() {
+    expect(filter.process('\n  \n\nsome text\n  \nmore text\n  \n'))
+        .toEqual('some text\n  \nmore text');
+  });
+});
\ No newline at end of file
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 000000000000..a0ea95b7137d
--- /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 000000000000..6e9f3b59c448
--- /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 000000000000..7a1ce297bf6d
--- /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/filterAmbiguousDirectiveAliases.js b/aio/tools/transforms/angular-base-package/services/filterAmbiguousDirectiveAliases.js
new file mode 100644
index 000000000000..c599230c5367
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/services/filterAmbiguousDirectiveAliases.js
@@ -0,0 +1,26 @@
+
+/**
+ * This service is used by the autoLinkCode post-processor to filter out ambiguous directive
+ * docs where the matching word is a directive selector.
+ * E.g. `ngModel`, which is a selector for a number of directives, where we are only really
+ * interested in the `NgModel` class.
+ */
+module.exports = function filterAmbiguousDirectiveAliases() {
+  return (docs, words, index) => {
+    const word = words[index];
+
+    // we are only interested if there are multiple matching docs
+    if (docs.length > 1) {
+      if (docs.every(doc =>
+        // We are only interested if they are all either directives or components
+        (doc.docType === 'directive' || doc.docType === 'component') &&
+        // and the matching word is in the selector for all of them
+        doc[doc.docType + 'Options'].selector.indexOf(word) != -1
+      )) {
+        // find the directive whose class name matches the word (case-insensitive)
+        return docs.filter(doc => doc.name.toLowerCase() === word.toLowerCase());
+      }
+    }
+    return docs;
+  };
+};
diff --git a/aio/tools/transforms/angular-base-package/services/filterAmbiguousDirectiveAliases.spec.js b/aio/tools/transforms/angular-base-package/services/filterAmbiguousDirectiveAliases.spec.js
new file mode 100644
index 000000000000..14564898bbf9
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/services/filterAmbiguousDirectiveAliases.spec.js
@@ -0,0 +1,50 @@
+const filterAmbiguousDirectiveAliases = require('./filterAmbiguousDirectiveAliases')();
+
+const words = ['Http', 'ngModel', 'NgModel', 'NgControlStatus'];
+
+describe('filterAmbiguousDirectiveAliases(docs, words, index)', () => {
+  it('should not try to filter the docs, if the docs are not all directives or components', () => {
+    const docs = [
+      { docType: 'class', name: 'Http' },
+      { docType: 'directive', name: 'NgModel', directiveOptions: { selector: '[ngModel]' } },
+      { docType: 'component', name: 'NgModel', componentOptions: { selector: '[ngModel]' } }
+    ];
+    // take a copy to prove `docs` was not modified
+    const filteredDocs = docs.slice(0);
+    expect(filterAmbiguousDirectiveAliases(docs, words, 1)).toEqual(filteredDocs);
+    expect(filterAmbiguousDirectiveAliases(docs, words, 2)).toEqual(filteredDocs);
+  });
+
+  describe('(where all the docs are components or directives', () => {
+    describe('and do not all contain the matching word in their selector)', () => {
+      it('should not try to filter the docs', () => {
+        const docs = [
+          { docType: 'directive', name: 'NgModel', ['directiveOptions']: { selector: '[ngModel]' } },
+          { docType: 'component', name: 'NgControlStatus', ['componentOptions']: { selector: '[ngControlStatus]' } }
+        ];
+        // take a copy to prove `docs` was not modified
+        const filteredDocs = docs.slice(0);
+        expect(filterAmbiguousDirectiveAliases(docs, words, 1)).toEqual(filteredDocs);
+        expect(filterAmbiguousDirectiveAliases(docs, words, 2)).toEqual(filteredDocs);
+
+        // Also test that the check is case-sensitive
+        docs[1].componentOptions.selector = '[ngModel]';
+        filteredDocs[1].componentOptions.selector = '[ngModel]';
+        expect(filterAmbiguousDirectiveAliases(docs, words, 2)).toEqual(filteredDocs);
+      });
+    });
+
+    describe('and do all contain the matching word in there selector)', () => {
+      it('should filter out docs whose class name is not (case-insensitively) equal to the matching word', () => {
+        const docs = [
+          { docType: 'directive', name: 'NgModel', ['directiveOptions']: { selector: '[ngModel],[ngControlStatus]' } },
+          { docType: 'component', name: 'NgControlStatus', ['componentOptions']: { selector: '[ngModel],[ngControlStatus]' } }
+        ];
+        const filteredDocs = [
+          { docType: 'directive', name: 'NgModel', ['directiveOptions']: { selector: '[ngModel],[ngControlStatus]' } }
+        ];
+        expect(filterAmbiguousDirectiveAliases(docs, words, 1)).toEqual(filteredDocs);
+      });
+    });
+  });
+});
diff --git a/aio/tools/transforms/angular-base-package/services/filterPipes.js b/aio/tools/transforms/angular-base-package/services/filterPipes.js
new file mode 100644
index 000000000000..f6e334c20f86
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/services/filterPipes.js
@@ -0,0 +1,12 @@
+
+/**
+ * This service is used by the autoLinkCode post-processors to filter out pipe docs
+ * where the matching word is the pipe name and is not preceded by a pipe
+ */
+module.exports = function filterPipes() {
+  return (docs, words, index) =>
+    docs.filter(doc =>
+      doc.docType !== 'pipe' ||
+      doc.pipeOptions.name !== '\'' + words[index] + '\'' ||
+      index > 0 && words[index - 1].trim() === '|');
+};
diff --git a/aio/tools/transforms/angular-base-package/services/filterPipes.spec.js b/aio/tools/transforms/angular-base-package/services/filterPipes.spec.js
new file mode 100644
index 000000000000..448b69d1960a
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/services/filterPipes.spec.js
@@ -0,0 +1,36 @@
+const filterPipes = require('./filterPipes')();
+
+describe('filterPipes', () => {
+  it('should ignore docs that are not pipes', () => {
+    const docs = [{ docType: 'class', name: 'B', pipeOptions: { name: '\'b\'' } }];
+    const words = ['A', 'b', 'B', 'C'];
+    const filteredDocs = [{ docType: 'class', name: 'B', pipeOptions: { name: '\'b\'' } }];
+    expect(filterPipes(docs, words, 1)).toEqual(filteredDocs);
+    expect(filterPipes(docs, words, 2)).toEqual(filteredDocs);
+  });
+
+  it('should ignore docs that are pipes but do not match the pipe name', () => {
+    const docs = [{ docType: 'pipe', name: 'B', pipeOptions: { name: '\'b\'' } }];
+    const words = ['A', 'B', 'C'];
+    const filteredDocs = [{ docType: 'pipe', name: 'B', pipeOptions: { name: '\'b\'' } }];
+    expect(filterPipes(docs, words, 1)).toEqual(filteredDocs);
+  });
+
+  it('should ignore docs that are pipes, match the pipe name and are preceded by a pipe character', () => {
+    const docs = [{ docType: 'pipe', name: 'B', pipeOptions: { name: '\'b\'' } }];
+    const words = ['A', '|', 'b', 'C'];
+    const filteredDocs = [{ docType: 'pipe', name: 'B', pipeOptions: { name: '\'b\'' } }];
+    expect(filterPipes(docs, words, 2)).toEqual(filteredDocs);
+  });
+
+  it('should filter out docs that are pipes, match the pipe name but are not preceded by a pipe character', () => {
+    const docs = [
+      { docType: 'pipe', name: 'B', pipeOptions: { name: '\'b\'' } },
+      { docType: 'class', name: 'B' }
+    ];
+    const words = ['A', 'b', 'C'];
+    const index = 1;
+    const filteredDocs = [{ docType: 'class', name: 'B' }];
+    expect(filterPipes(docs, words, index)).toEqual(filteredDocs);
+  });
+});
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 000000000000..e32febb4c81d
--- /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 000000000000..8a064a4605f9
--- /dev/null
+++ b/aio/tools/transforms/angular-content-package/index.js
@@ -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
+ */
+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, renderExamples) {
+
+    const gitignoreFilePath = path.resolve(GUIDE_EXAMPLES_PATH, '.gitignore');
+    const gitignoreFile = fs.readFileSync(gitignoreFilePath, '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 ignoredExamplePaths = [];
+    const resolvedExamplePaths = [];
+
+    examplePaths.forEach(filePath => {
+      // filter out files that match the .gitignore rules
+      if (gitignore.ignores(filePath)) {
+        ignoredExamplePaths.push(filePath);
+      } else {
+        // we need the full paths for the filereader
+        resolvedExamplePaths.push(path.resolve(GUIDE_EXAMPLES_PATH, filePath));
+      }
+    });
+
+    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: resolvedExamplePaths,
+        fileReader: 'exampleFileReader'
+      },
+      {
+        basePath: CONTENTS_PATH,
+        include: CONTENTS_PATH + '/navigation.json',
+        fileReader: 'jsonFileReader'
+      },
+      {
+        basePath: CONTENTS_PATH,
+        include: CONTENTS_PATH + '/marketing/announcements.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');
+    collectExamples.registerIgnoredExamples(ignoredExamplePaths, gitignoreFilePath);
+
+    renderExamples.ignoreBrokenExamples = true;
+  })
+
+
+  // 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: ['announcements-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/tools/transforms/angular-content-package/inline-tag-defs/anchor.js b/aio/tools/transforms/angular-content-package/inline-tag-defs/anchor.js
new file mode 100644
index 000000000000..c975910c48a4
--- /dev/null
+++ b/aio/tools/transforms/angular-content-package/inline-tag-defs/anchor.js
@@ -0,0 +1,7 @@
+module.exports = {
+  name: 'a',
+  description: 'A shorthand for creating heading anchors. Usage: `{@a some-id}`',
+  handler: function(doc, tagName, tagDescription) {
+    return '<a id="' + tagDescription.trim() + '"></a>';
+  }
+};
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 000000000000..cb24f95e991d
--- /dev/null
+++ b/aio/tools/transforms/angular.io-package/index.js
@@ -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
+ */
+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'))
+  .processor(require('./processors/createOverviewDump'))
+  .processor(require('./processors/cleanGeneratedFiles'))
+
+  // 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, renderExamples) {
+
+    // 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;
+
+    // Make sure we fail if the examples are not right
+    renderExamples.ignoreBrokenExamples = false;
+
+  })
+
+  .config(function(renderLinkInfo, postProcessHtml) {
+    renderLinkInfo.docTypes = postProcessHtml.docTypes;
+  });
diff --git a/aio/tools/transforms/angular.io-package/processors/cleanGeneratedFiles.js b/aio/tools/transforms/angular.io-package/processors/cleanGeneratedFiles.js
new file mode 100644
index 000000000000..e3992f974f12
--- /dev/null
+++ b/aio/tools/transforms/angular.io-package/processors/cleanGeneratedFiles.js
@@ -0,0 +1,10 @@
+const rimraf = require('rimraf');
+module.exports = function cleanGeneratedFiles() {
+  return {
+    $runAfter: ['writing-files'],
+    $runBefore: ['writeFilesProcessor'],
+    $process: function() {
+      rimraf.sync('src/generated/{docs,*.json}');
+    }
+  };
+};
diff --git a/docs/dgeni-package/processors/createOverviewDump.js b/aio/tools/transforms/angular.io-package/processors/createOverviewDump.js
similarity index 92%
rename from docs/dgeni-package/processors/createOverviewDump.js
rename to aio/tools/transforms/angular.io-package/processors/createOverviewDump.js
index eadd24e0af90..ab590315b049 100644
--- a/docs/dgeni-package/processors/createOverviewDump.js
+++ b/aio/tools/transforms/angular.io-package/processors/createOverviewDump.js
@@ -14,7 +14,7 @@ module.exports = function createOverviewDump() {
         modules: []
       };
       _.forEach(docs, function(doc) {
-        if ( doc.docType === 'module' ) {
+        if (doc.docType === 'package') {
           overviewDoc.modules.push(doc);
         }
       });
diff --git a/aio/tools/transforms/angular.io-package/processors/processNavigationMap.js b/aio/tools/transforms/angular.io-package/processors/processNavigationMap.js
new file mode 100644
index 000000000000..c744256749ed
--- /dev/null
+++ b/aio/tools/transforms/angular.io-package/processors/processNavigationMap.js
@@ -0,0 +1,53 @@
+module.exports = function processNavigationMap(versionInfo, log) {
+  return {
+    $runAfter: ['paths-computed'],
+    $runBefore: ['rendering-docs'],
+    $process: function(docs) {
+
+      const navigationDoc = docs.find(doc => doc.docType === 'navigation-json');
+
+      if (!navigationDoc) {
+        throw new Error(
+          'Missing navigation map document (docType="navigation-json").' +
+          'Did you forget to add it to the readFileProcessor?');
+      }
+
+      // Verify that all the navigation paths are to valid docs
+      const pathMap = {};
+      docs.forEach(doc => pathMap[doc.path] = true);
+      const errors = walk(navigationDoc.data, pathMap, []);
+
+      if (errors.length) {
+        log.error(`Navigation doc: ${navigationDoc.fileInfo.relativePath} contains invalid urls`);
+        // eslint-disable-next-line no-console
+        console.log(errors);
+        throw new Error('processNavigationMap failed');
+      }
+
+      // Add in the version data in a "secret" field to be extracted in the docs app
+      navigationDoc.data['__versionInfo'] = versionInfo.currentVersion;
+    }
+  };
+};
+
+function walk(node, map, path) {
+  let errors = [];
+  for(const key in node) {
+    const child = node[key];
+    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])));
+      }
+    }
+  }
+  return errors;
+}
+
+function isRelative(url) {
+  return !/^(https?:)?\/\//.test(url);
+}
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 000000000000..5f07254b2264
--- /dev/null
+++ b/aio/tools/transforms/authors-package/api-package.js
@@ -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
+ */
+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', 'common/http/index.ts', 'common/http/testing/index.ts'],
+  core: ['core/index.ts', 'core/testing/index.ts'],
+  elements: ['elements/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'],
+  'service-worker': ['service-worker/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 000000000000..8bac6f4ba43d
--- /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 000000000000..6fe25eb86b94
--- /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\/|navigation\.json)/.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 000000000000..fea8bfe4dec5
--- /dev/null
+++ b/aio/tools/transforms/authors-package/index.spec.js
@@ -0,0 +1,92 @@
+/* eslint jasmine/prefer-toHaveBeenCalledWith:0 */
+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 originalJasmineTimeout;
+  let files;
+
+  beforeAll(() => {
+    originalJasmineTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+  });
+
+  afterAll(() => jasmine.DEFAULT_TIMEOUT_INTERVAL = originalJasmineTimeout);
+
+  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();
+    });
+  });
+
+  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();
+    });
+  });
+
+  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();
+    });
+  });
+
+  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();
+    });
+  });
+
+  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();
+    });
+  });
+
+  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();
+    });
+  });
+
+  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);
+});
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 000000000000..30dac6b9d89b
--- /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 000000000000..5bc6cce02376
--- /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 000000000000..70982f43dcbc
--- /dev/null
+++ b/aio/tools/transforms/authors-package/watchr.js
@@ -0,0 +1,55 @@
+/* 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');
+  const dgeni = new Dgeni([require('../angular.io-package')]);
+
+  // Turn off all the potential failures for this doc-gen one-off run.
+  // This enables authors to run `docs-watch` while the docs are still in an unstable state.
+  const injector = dgeni.configureInjector();
+  injector.get('linkInlineTagDef').failOnBadLink = false;
+  injector.get('checkAnchorLinksProcessor').$enabled = false;
+  injector.get('renderExamples').ignoreBrokenExamples = true;
+
+  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);
+
+});
diff --git a/aio/tools/transforms/config.js b/aio/tools/transforms/config.js
new file mode 100644
index 000000000000..59eb3cae4785
--- /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 000000000000..6e48da3d81e8
--- /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/tools/transforms/content-package/readers/content.js b/aio/tools/transforms/content-package/readers/content.js
new file mode 100644
index 000000000000..0a8b539e8fe9
--- /dev/null
+++ b/aio/tools/transforms/content-package/readers/content.js
@@ -0,0 +1,24 @@
+/**
+ * @dgService
+ * @description
+ * This file reader will pull the contents from a text file (by default .md)
+ *
+ * The doc will initially have the form:
+ * ```
+ * {
+ *   content: 'the content of the file',
+ *   startingLine: 1
+ * }
+ * ```
+ */
+module.exports = function contentFileReader() {
+  return {
+    name: 'contentFileReader',
+    defaultPattern: /\.md$/,
+    getDocs: function(fileInfo) {
+
+      // We return a single element array because content files only contain one document
+      return [{docType: 'content', content: fileInfo.content, startingLine: 1}];
+    }
+  };
+};
diff --git a/aio/tools/transforms/content-package/readers/content.spec.js b/aio/tools/transforms/content-package/readers/content.spec.js
new file mode 100644
index 000000000000..5db4091cf3b8
--- /dev/null
+++ b/aio/tools/transforms/content-package/readers/content.spec.js
@@ -0,0 +1,44 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+var path = require('canonical-path');
+
+describe('contentFileReader', function() {
+  var dgeni, injector, fileReader;
+
+  beforeEach(function() {
+    dgeni = new Dgeni([testPackage('content-package', true)]);
+    injector = dgeni.configureInjector();
+    fileReader = injector.get('contentFileReader');
+  });
+
+  var createFileInfo = function(file, content, basePath) {
+    return {
+      fileReader: fileReader.name,
+      filePath: file,
+      baseName: path.basename(file, path.extname(file)),
+      extension: path.extname(file).replace(/^\./, ''),
+      basePath: basePath,
+      relativePath: path.relative(basePath, file),
+      content: content
+    };
+  };
+
+  describe('defaultPattern', function() {
+    it('should match .md files', function() {
+      expect(fileReader.defaultPattern.test('abc.md')).toBeTruthy();
+      expect(fileReader.defaultPattern.test('abc.js')).toBeFalsy();
+    });
+  });
+
+
+  describe('getDocs', function() {
+    it('should return an object containing info about the file and its contents', function() {
+      var fileInfo = createFileInfo(
+          'project/path/modules/someModule/foo/docs/subfolder/bar.ngdoc', 'A load of content',
+          'project/path');
+      expect(fileReader.getDocs(fileInfo)).toEqual([
+        {docType: 'content', content: 'A load of content', startingLine: 1}
+      ]);
+    });
+  });
+});
diff --git a/aio/tools/transforms/content-package/tag-defs/intro.js b/aio/tools/transforms/content-package/tag-defs/intro.js
new file mode 100644
index 000000000000..a4276442b3a7
--- /dev/null
+++ b/aio/tools/transforms/content-package/tag-defs/intro.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'intro'};
+};
diff --git a/aio/tools/transforms/content-package/tag-defs/title.js b/aio/tools/transforms/content-package/tag-defs/title.js
new file mode 100644
index 000000000000..376f2087dcac
--- /dev/null
+++ b/aio/tools/transforms/content-package/tag-defs/title.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'title'};
+};
diff --git a/aio/tools/transforms/examples-package/file-readers/example-reader.js b/aio/tools/transforms/examples-package/file-readers/example-reader.js
new file mode 100644
index 000000000000..f7ff368675a5
--- /dev/null
+++ b/aio/tools/transforms/examples-package/file-readers/example-reader.js
@@ -0,0 +1,14 @@
+/**
+ * The point of this reader is to tag all the files that are going to be used as examples in the
+ * documentation.
+ * Later on we can extract the regions, via "shredding"; and we can also construct runnable examples
+ * for passing to Stackblitz and the like.
+ */
+module.exports = function exampleFileReader() {
+  return {
+    name: 'exampleFileReader',
+    getDocs: function(fileInfo) {
+      return [{docType: 'example-file', content: fileInfo.content, startingLine: 1}];
+    }
+  };
+};
diff --git a/aio/tools/transforms/examples-package/index.js b/aio/tools/transforms/examples-package/index.js
new file mode 100644
index 000000000000..436cde974f14
--- /dev/null
+++ b/aio/tools/transforms/examples-package/index.js
@@ -0,0 +1,28 @@
+var Package = require('dgeni').Package;
+var jsdocPackage = require('dgeni-packages/jsdoc');
+
+module.exports =
+    new Package('examples', [jsdocPackage])
+
+        .factory(require('./inline-tag-defs/example'))
+        .factory(require('./services/parseArgString'))
+        .factory(require('./services/example-map'))
+        .factory(require('./file-readers/example-reader'))
+        .factory(require('./services/region-parser'))
+        .factory(require('./services/getExampleRegion'))
+
+        .processor(require('./processors/collect-examples'))
+        .processor(require('./processors/render-examples'))
+
+        .config(function(readFilesProcessor, exampleFileReader) {
+          readFilesProcessor.fileReaders.push(exampleFileReader);
+        })
+
+        .config(function(inlineTagProcessor, exampleInlineTagDef) {
+          inlineTagProcessor.inlineTagDefinitions.push(exampleInlineTagDef);
+        })
+
+        .config(function(computePathsProcessor) {
+          computePathsProcessor.pathTemplates.push(
+              {docTypes: ['example-region'], getPath: function() {}, getOutputPath: function() {}});
+        });
diff --git a/aio/tools/transforms/examples-package/inline-tag-defs/example.js b/aio/tools/transforms/examples-package/inline-tag-defs/example.js
new file mode 100644
index 000000000000..5a2093207bd0
--- /dev/null
+++ b/aio/tools/transforms/examples-package/inline-tag-defs/example.js
@@ -0,0 +1,41 @@
+var entities = require('entities');
+
+/**
+ * @dgService exampleInlineTagDef
+ * @description
+ * Process inline example tags (of the form {@example relativePath region -title='some title'
+ * -stylePattern='{some style pattern}' }),
+ * replacing them with code from a shredded file
+ * Examples:
+ * {@example core/application_spec.ts hello-app -title='Sample component' }
+ * {@example core/application_spec.ts -region=hello-app -title='Sample component' }
+ * @kind function
+ */
+module.exports = function exampleInlineTagDef(parseArgString, createDocMessage, getExampleRegion) {
+  return {
+    name: 'example',
+    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(entities.decodeHTML(tagDescription));
+      var unnamedArgs = tagArgs._;
+      var relativePath = unnamedArgs[0];
+      var regionName = tagArgs.region || (unnamedArgs.length > 1 ? unnamedArgs[1] : '');
+      if (regionName === '\'\'') regionName = '';
+      var title = tagArgs.title || (unnamedArgs.length > 2 ? unnamedArgs.slice(2).join(' ') : null);
+      var linenums = tagArgs.linenums;
+      // var stylePattern = tagArgs.stylePattern;  // TODO: not yet implemented here
+
+      const sourceCode = getExampleRegion(doc, relativePath, regionName);
+
+      const attributes = [];
+      if (title) attributes.push(` title="${title}"`);
+      if (linenums !== undefined) attributes.push(` linenums="${linenums}"`);
+
+      return '<code-example' + attributes.join('') + '>\n' + sourceCode + '\n</code-example>';
+    }
+  };
+};
+
diff --git a/aio/tools/transforms/examples-package/inline-tag-defs/example.spec.js b/aio/tools/transforms/examples-package/inline-tag-defs/example.spec.js
new file mode 100644
index 000000000000..ec506b2c6cfa
--- /dev/null
+++ b/aio/tools/transforms/examples-package/inline-tag-defs/example.spec.js
@@ -0,0 +1,69 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('example inline-tag-def', function() {
+  let injector, tag, collectExamples, exampleMap;
+
+  beforeEach(() => {
+    const dgeni = new Dgeni([testPackage('examples-package', true)]);
+    injector = dgeni.configureInjector();
+    tag = injector.get('exampleInlineTagDef');
+    collectExamples = injector.get('collectExamples');
+    exampleMap = injector.get('exampleMap');
+  });
+
+  it('should be available as a service', () => {
+    expect(tag).toBeDefined();
+    expect(tag.name).toEqual('example');
+  });
+
+  describe('handler', () => {
+    let handler;
+
+    beforeEach(() => {
+      handler = tag.handler;
+      collectExamples.exampleFolders = ['examples'];
+      exampleMap['examples'] = {
+        'test/url': { regions: {
+          '': { renderedContent: 'whole file' },
+          'region-1': { renderedContent: 'region 1 contents' }
+        } }
+      };
+    });
+
+    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', () => {
+      expect(handler({}, 'example', 'test/url')).toEqual('<code-example>\nwhole file\n</code-example>');
+    });
+
+    it('should contain the region contents from the example file if a region is specified', () => {
+      expect(handler({}, 'example', 'test/url region-1')).toEqual('<code-example>\nregion 1 contents\n</code-example>');
+    });
+
+    it('should add a title if specified', () => {
+      expect(handler({}, 'example', 'test/url region-1 \'Some Title\'')).toEqual('<code-example title="Some Title">\nregion 1 contents\n</code-example>');
+      expect(handler({}, 'example', 'test/url region-1 Some Title')).toEqual('<code-example title="Some Title">\nregion 1 contents\n</code-example>');
+    });
+
+    it('should contain the whole contents from the example file if an empty ("") region is specified', () => {
+      expect(handler({}, 'example', 'test/url \'\'')).toEqual('<code-example>\nwhole file\n</code-example>');
+      expect(handler({}, 'example', 'test/url \'\' Some Title')).toEqual('<code-example title="Some Title">\nwhole file\n</code-example>');
+    });
+
+    it('should add in linenum attribute if specified', () => {
+      expect(handler({}, 'example', 'test/url --linenums=\'false\'')).toEqual('<code-example linenums="false">\nwhole file\n</code-example>');
+      expect(handler({}, 'example', 'test/url --linenums=\'true\'')).toEqual('<code-example linenums="true">\nwhole file\n</code-example>');
+      expect(handler({}, 'example', 'test/url --linenums=\'15\'')).toEqual('<code-example linenums="15">\nwhole file\n</code-example>');
+    });
+  });
+});
+
diff --git a/aio/tools/transforms/examples-package/processors/collect-examples.js b/aio/tools/transforms/examples-package/processors/collect-examples.js
new file mode 100644
index 000000000000..ebf66658a9ea
--- /dev/null
+++ b/aio/tools/transforms/examples-package/processors/collect-examples.js
@@ -0,0 +1,96 @@
+const {extname} = require('canonical-path');
+const {mapObject} = require('../../helpers/utils');
+
+module.exports = function collectExamples(exampleMap, regionParser, log, createDocMessage) {
+  return {
+    $runAfter: ['files-read'],
+    $runBefore: ['parsing-tags'],
+    $validate: {exampleFolders: {presence: true}},
+    exampleFolders: [],
+    ignoredExamples: {},
+    /**
+     * Call this method to indicate to the processor that some files, that actually exist,
+     * have been filtered out from being processed.
+     * @param paths an array of relative paths to the examples that have been ignored.
+     * @param gitIgnorePath the path to the gitignore file that caused this example to be ignored.
+     */
+    registerIgnoredExamples(paths, gitIgnorePath) {
+      paths.forEach(path => { this.ignoredExamples[path] = gitIgnorePath; });
+    },
+    /**
+     * Call this method to find out if an example was ignored.
+     * @param path a relative path to the example file to test for being ignored.
+     * @returns the path to the .gitignore file.
+     */
+    isExampleIgnored(path) {
+      return this.ignoredExamples[path];
+    },
+    $process(docs) {
+      const exampleFolders = this.exampleFolders;
+      exampleFolders.forEach(folder => exampleMap[folder] = exampleMap[folder] || {});
+      const regionDocs = [];
+      docs = docs.filter((doc) => {
+        if (doc.docType === 'example-file') {
+          try {
+            // find the first matching folder
+            exampleFolders.some((folder) => {
+              if (doc.fileInfo.relativePath.indexOf(folder) === 0) {
+                const relativePath =
+                    doc.fileInfo.relativePath.substr(folder.length).replace(/^\//, '');
+                exampleMap[folder][relativePath] = doc;
+
+                // We treat files that end in `.annotated` specially
+                // They are used to annotate files that cannot contain comments, such as JSON
+                // So you provide two files: `xyz.json` and `xyz.json.annotated`, which is a copy
+                // of the original but contains inline doc region comments
+                let fileType = doc.fileInfo.extension;
+                if (fileType === 'annotated') {
+                  fileType = extname(doc.fileInfo.baseName).substr(1) + '.' + fileType;
+                }
+
+                const parsedRegions = regionParser(doc.content, fileType);
+
+                log.debug(
+                    'found example file', folder, relativePath, Object.keys(parsedRegions.regions));
+
+                doc.renderedContent = parsedRegions.contents;
+
+                // Map each region into a doc that can be put through the rendering pipeline
+                doc.regions = mapObject(parsedRegions.regions, (regionName, regionContents) => {
+                  const regionDoc =
+                      createRegionDoc(folder, relativePath, regionName, regionContents);
+                  regionDocs.push(regionDoc);
+                  return regionDoc;
+                });
+
+                return true;
+              }
+            });
+
+            return false;
+
+          } catch (e) {
+            throw new Error(createDocMessage(e.message, doc, e));
+          }
+        } else {
+          return true;
+        }
+      });
+
+      return docs.concat(regionDocs);
+    }
+  };
+};
+
+function createRegionDoc(folder, relativePath, regionName, regionContents) {
+  const path = folder + '/' + relativePath;
+  const id = path + '#' + regionName;
+  return {
+    docType: 'example-region',
+    path: path,
+    name: regionName,
+    id: id,
+    aliases: [id],
+    contents: regionContents
+  };
+}
diff --git a/aio/tools/transforms/examples-package/processors/collect-examples.spec.js b/aio/tools/transforms/examples-package/processors/collect-examples.spec.js
new file mode 100644
index 000000000000..85f10ca02ea2
--- /dev/null
+++ b/aio/tools/transforms/examples-package/processors/collect-examples.spec.js
@@ -0,0 +1,213 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+var path = require('path');
+
+describe('collectExampleRegions processor', () => {
+  var injector, processor, exampleMap, regionParser;
+
+  beforeEach(function() {
+
+    regionParser = jasmine.createSpy('regionParser').and.callFake(function(contents, extension) {
+      return { contents: 'PARSED:' + contents, regions: {dummy: extension} };
+    });
+
+    const dgeni =
+        new Dgeni([testPackage('examples-package', true).factory('regionParser', function() {
+          return regionParser;
+        })]);
+
+    injector = dgeni.configureInjector();
+    exampleMap = injector.get('exampleMap');
+    processor = injector.get('collectExamples');
+
+    processor.exampleFolders = ['examples-1', 'examples-2'];
+  });
+
+  describe('$process', () => {
+
+    it('should initialise the `exampleMap` even if there are no examples to collect', () => {
+      processor.$process([]);
+      expect(exampleMap['examples-1']).toEqual(jasmine.any(Object));
+      expect(exampleMap['examples-2']).toEqual(jasmine.any(Object));
+    });
+
+    it('should identify example files that are in the exampleFolders', () => {
+      const docs = [
+        createDoc('A', 'examples-1/x/app.js'), createDoc('B', 'examples-1/y/index.html'),
+        createDoc('C', 'examples-2/s/app.js'), createDoc('D', 'examples-2/t/style.css'),
+        createDoc('E', 'other/b/c.js')
+      ];
+
+      processor.$process(docs);
+
+      expect(exampleMap['examples-1']['x/app.js']).toBeDefined();
+      expect(exampleMap['examples-1']['y/index.html']).toBeDefined();
+      expect(exampleMap['examples-2']['s/app.js']).toBeDefined();
+      expect(exampleMap['examples-2']['t/style.css']).toBeDefined();
+
+      expect(exampleMap['other']).toBeUndefined();
+    });
+
+    it('should remove example files from the docs collection', () => {
+      const docs = [
+        createDoc('Example A', 'examples-1/x/app.js'),
+        createDoc('Example B', 'examples-1/y/index.html'),
+        createDoc('Other doc 1', 'examples-2/t/style.css', 'content'),
+        createDoc('Example C', 'examples-2/s/app.js'),
+        createDoc('Other doc 2', 'other/b/c.js', 'content')
+      ];
+
+      const processedDocs = processor.$process(docs);
+
+      expect(processedDocs.filter(doc => doc.docType === 'example-file')).toEqual([]);
+    });
+
+    it('should not remove docs from the docs collection that are not example files', () => {
+      const docs = [
+        createDoc('Example A', 'examples-1/x/app.js'),
+        createDoc('Example B', 'examples-1/y/index.html'),
+        createDoc('Other doc 1', 'examples-2/t/style.css', 'content'),
+        createDoc('Example C', 'examples-2/s/app.js'),
+        createDoc('Other doc 2', 'other/b/c.js', 'content')
+      ];
+
+      const processedDocs = processor.$process(docs);
+
+      expect(processedDocs.filter(doc => doc.docType !== 'example-file'))
+          .toEqual(jasmine.objectContaining([
+            createDoc('Other doc 1', 'examples-2/t/style.css', 'content'),
+            createDoc('Other doc 2', 'other/b/c.js', 'content')
+          ]));
+    });
+
+    it('should call `regionParser` from with the content and file extension of each example doc',
+      () => {
+        const docs = [
+          createDoc('Example A', 'examples-1/x/app.js'),
+          createDoc('Example B', 'examples-1/y/index.html'),
+          createDoc('Other doc 1', 'examples-2/t/style.css', 'content'),
+          createDoc('Example C', 'examples-2/s/app.js'),
+          createDoc('Other doc 2', 'other/b/c.js', 'content')
+        ];
+
+        processor.$process(docs);
+
+        expect(regionParser).toHaveBeenCalledTimes(3);
+        expect(regionParser).toHaveBeenCalledWith('Example A', 'js');
+        expect(regionParser).toHaveBeenCalledWith('Example B', 'html');
+        expect(regionParser).toHaveBeenCalledWith('Example C', 'js');
+      });
+
+
+    it('should attach parsed content as renderedContent to the example file docs', () => {
+      const docs = [
+        createDoc('A', 'examples-1/x/app.js'),
+        createDoc('B', 'examples-1/y/index.html'),
+        createDoc('C', 'examples-2/s/app.js'),
+        createDoc('D', 'examples-2/t/style.css'),
+      ];
+
+      processor.$process(docs);
+
+      expect(exampleMap['examples-1']['x/app.js'].renderedContent).toEqual('PARSED:A');
+      expect(exampleMap['examples-1']['y/index.html'].renderedContent).toEqual('PARSED:B');
+      expect(exampleMap['examples-2']['s/app.js'].renderedContent).toEqual('PARSED:C');
+      expect(exampleMap['examples-2']['t/style.css'].renderedContent).toEqual('PARSED:D');
+
+    });
+
+    it('should create region docs for each region in the example file docs', () => {
+      const docs = [
+        createDoc('/* #docregion X */\nA', 'examples-1/x/app.js'),
+        createDoc('<!-- #docregion Y -->\nB', 'examples-1/y/index.html'),
+        createDoc('/* #docregion Z */\nC', 'examples-2/t/style.css'),
+      ];
+
+      const newDocs = processor.$process(docs);
+
+      expect(newDocs.length).toEqual(3);
+      expect(newDocs).toEqual([
+        jasmine.objectContaining({
+          docType: 'example-region',
+          name: 'dummy',
+          id: 'examples-1/x/app.js#dummy',
+          contents: 'js'
+        }),
+        jasmine.objectContaining({
+          docType: 'example-region',
+          name: 'dummy',
+          id: 'examples-1/y/index.html#dummy',
+          contents: 'html'
+        }),
+        jasmine.objectContaining({
+          docType: 'example-region',
+          name: 'dummy',
+          id: 'examples-2/t/style.css#dummy',
+          contents: 'css'
+        })
+      ]);
+    });
+
+    it('should attach region docs to the example file docs', () => {
+      const docs = [
+        createDoc('/* #docregion X */\nA', 'examples-1/x/app.js'),
+        createDoc('<!-- #docregion Y -->\nB', 'examples-1/y/index.html'),
+        createDoc('/* #docregion Z */\nC', 'examples-2/t/style.css'),
+      ];
+
+      processor.$process(docs);
+
+      expect(exampleMap['examples-1']['x/app.js'].regions).toEqual({
+        dummy: {
+          docType: 'example-region',
+          path: 'examples-1/x/app.js',
+          name: 'dummy',
+          id: 'examples-1/x/app.js#dummy',
+          aliases: ['examples-1/x/app.js#dummy'],
+          contents: 'js'
+        }
+      });
+      expect(exampleMap['examples-1']['y/index.html'].regions).toEqual({
+        dummy: {
+          docType: 'example-region',
+          path: 'examples-1/y/index.html',
+          name: 'dummy',
+          id: 'examples-1/y/index.html#dummy',
+          aliases: ['examples-1/y/index.html#dummy'],
+          contents: 'html'
+        }
+      });
+      expect(exampleMap['examples-2']['t/style.css'].regions).toEqual({
+        dummy: {
+          docType: 'example-region',
+          path: 'examples-2/t/style.css',
+          name: 'dummy',
+          id: 'examples-2/t/style.css#dummy',
+          aliases: ['examples-2/t/style.css#dummy'],
+          contents: 'css'
+        }
+      });
+    });
+  });
+
+  describe('filtered examples', () => {
+    it('should indicate if an example was filtered', () => {
+      processor.registerIgnoredExamples(['c/d/e', 'e/f/g'], 'path/to/gitignore');
+      processor.registerIgnoredExamples(['x/y/z'], 'path/to/other/gitignore');
+      expect(processor.isExampleIgnored('a/b/c')).toBeFalsy();
+      expect(processor.isExampleIgnored('c/d/e')).toEqual('path/to/gitignore');
+      expect(processor.isExampleIgnored('e/f/g')).toEqual('path/to/gitignore');
+      expect(processor.isExampleIgnored('x/y/z')).toEqual('path/to/other/gitignore');
+    });
+  });
+});
+
+
+function createDoc(content, relativePath, docType) {
+  return {
+    fileInfo: {relativePath: relativePath, extension: path.extname(relativePath).substr(1)},
+    content: content,
+    docType: docType || 'example-file',
+    startingLine: 1
+  };
+}
diff --git a/aio/tools/transforms/examples-package/processors/render-examples.js b/aio/tools/transforms/examples-package/processors/render-examples.js
new file mode 100644
index 000000000000..b90d5763f16e
--- /dev/null
+++ b/aio/tools/transforms/examples-package/processors/render-examples.js
@@ -0,0 +1,64 @@
+const { parseAttributes, renderAttributes } = require('../../helpers/utils');
+
+/**
+ * Search the renderedContent looking for code examples that have a path (and optionally a region) attribute.
+ * When they are found replace their content with the appropriate doc-region parsed previously from an example file.
+ */
+module.exports = function renderExamples(getExampleRegion, log, createDocMessage) {
+  return {
+    $runAfter: ['docs-rendered'],
+    $runBefore: ['writing-files'],
+    ignoreBrokenExamples: false,
+    $process: function(docs) {
+      docs.forEach(doc => {
+        if (doc.renderedContent) {
+          // We match either `code-example` or `code-pane` elements that have a path attribute
+          doc.renderedContent = doc.renderedContent.replace(
+            /<(code-example|code-pane)([^>]*)>[^<]*<\/([^>]+)>/g,
+            (original, openingTag, attributes, closingTag) => {
+              const attrMap = parseAttributes(attributes);
+              if (attrMap.path) {
+                try {
+                  if (closingTag !== openingTag) {
+                    // The markdown renderer will wrap what it thinks is a paragraph in `<p>` and `</p>` tags.
+                    // If you do not leave a blank line between a paragraph of text and a `<code-example>` then
+                    // the markdown renderer may add a paragraph marker "in-between" the opening and closing
+                    // tags of the code-example. For example:
+                    //
+                    // ```
+                    // Some paragraph
+                    // <code-example path="...">
+                    //
+                    // </code-example>
+                    // ```
+                    //
+                    // will be rendered as:
+                    //
+                    // ```
+                    // <p>Some paragraph
+                    // <code-example path="...">
+                    // </p>
+                    // </code-example>
+                    // ```
+                    throw new Error(
+                      'Badly formed example: ' + original + ' - closing tag does not match opening tag.\n' +
+                      ' - Perhaps you forgot to put a blank line before the example?');
+                  }
+                  // We found a path attribute so look up the example and rebuild the HTML
+                  const exampleContent = getExampleRegion(doc, attrMap.path, attrMap.region);
+                  return `<${openingTag}${renderAttributes(attrMap)}>\n${exampleContent}\n</${openingTag}>`;
+                } catch(e) {
+                  log.warn(createDocMessage(e.message, doc));
+                  if (!this.ignoreBrokenExamples) {
+                    throw e;
+                  }
+                }
+              }
+              // No path attribute so just ignore this one
+              return original;
+            });
+        }
+      });
+    }
+  };
+};
diff --git a/aio/tools/transforms/examples-package/processors/render-examples.spec.js b/aio/tools/transforms/examples-package/processors/render-examples.spec.js
new file mode 100644
index 000000000000..2fdf0bab9ba8
--- /dev/null
+++ b/aio/tools/transforms/examples-package/processors/render-examples.spec.js
@@ -0,0 +1,122 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('renderExamples processor', () => {
+  var injector, processor, exampleMap, collectExamples, log;
+
+  beforeEach(function() {
+    const dgeni = new Dgeni([testPackage('examples-package', true)]);
+    injector = dgeni.configureInjector();
+
+    exampleMap = injector.get('exampleMap');
+    processor = injector.get('renderExamples');
+    collectExamples = injector.get('collectExamples');
+    exampleMap = injector.get('exampleMap');
+    log = injector.get('log');
+
+    collectExamples.exampleFolders = ['examples'];
+    exampleMap['examples'] = {
+      'test/url': { regions: {
+        '': { renderedContent: 'whole file' },
+        'region-1': { renderedContent: 'region 1 contents' }
+      } }
+    };
+  });
+
+  it('should run before the correct processor', () => {
+    expect(processor.$runBefore).toEqual(['writing-files']);
+  });
+
+  it('should run after the correct processor', () => {
+    expect(processor.$runAfter).toEqual(['docs-rendered']);
+  });
+
+  ['code-example', 'code-pane'].forEach(CODE_TAG =>
+    describe(CODE_TAG, () => {
+      it(`should ignore a <${CODE_TAG}> tags with no path attribute`, () => {
+        const docs = [
+          { renderedContent: `Some text\n<${CODE_TAG}>Some code</${CODE_TAG}>\n<${CODE_TAG} class="anti-pattern" title="Bad Code">do <strong>not</strong> do this</${CODE_TAG}>` }
+        ];
+        processor.$process(docs);
+        expect(docs[0].renderedContent).toEqual(`Some text\n<${CODE_TAG}>Some code</${CODE_TAG}>\n<${CODE_TAG} class="anti-pattern" title="Bad Code">do <strong>not</strong> do this</${CODE_TAG}>`);
+      });
+
+      it(`should replace the content of the <${CODE_TAG}> tag with the whole contents from an example file if a path is provided`, () => {
+        const docs = [
+          { renderedContent: `<${CODE_TAG} path="test/url">Some code</${CODE_TAG}>`}
+        ];
+        processor.$process(docs);
+        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} path="test/url">\nwhole file\n</${CODE_TAG}>`);
+      });
+
+      it(`should replace all instances of <${CODE_TAG}> tags`, () => {
+        const docs = [
+          { 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} 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', () => {
+        const docs = [
+          { renderedContent: `<${CODE_TAG} path="test/url" region="region-1">Some code</${CODE_TAG}>` }
+        ];
+        processor.$process(docs);
+        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`, () => {
+        const docs = [
+          { renderedContent: `<${CODE_TAG} path="test/url" region="">Some code</${CODE_TAG}>` }
+        ];
+        processor.$process(docs);
+        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} path="test/url" region="">\nwhole file\n</${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(`${openTag}\nregion 1 contents\n</${CODE_TAG}>`);
+      });
+
+      it('should cope with spaces and double quotes inside attribute values', () => {
+        const docs = [
+          { 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" path="test/url">\nwhole file\n</${CODE_TAG}>`);
+      });
+
+      it('should throw an exception if the code-example tag is not closed correctly', () => {
+        const docs = [
+          { renderedContent: `<${CODE_TAG} path="test/url"></p></${CODE_TAG}>`}
+        ];
+        expect(() => processor.$process(docs)).toThrowError(
+          'Badly formed example: <' + CODE_TAG + ' path="test/url"></p> - closing tag does not match opening tag.\n' +
+          ' - Perhaps you forgot to put a blank line before the example?');
+      });
+
+      it('should not throw if `ignoreBrokenExamples` is set to true', () => {
+        processor.ignoreBrokenExamples = true;
+        const docs = [
+          { renderedContent: `<${CODE_TAG} path="test/url"></p></${CODE_TAG}>`},
+          { renderedContent: `<${CODE_TAG} path="test/url" region="missing"></${CODE_TAG}>`},
+          { renderedContent: `<${CODE_TAG} path="missing/url"></${CODE_TAG}>`}
+        ];
+        expect(() => processor.$process(docs)).not.toThrow();
+        expect(log.warn).toHaveBeenCalledWith(
+          'Badly formed example: <' + CODE_TAG + ' path="test/url"></p> - closing tag does not match opening tag.\n' +
+          ' - Perhaps you forgot to put a blank line before the example? - doc');
+        expect(log.warn).toHaveBeenCalledWith(
+          'Missing example region... relativePath: "test/url", region: "missing". - doc\n' +
+          'Regions available are: "", "region-1" - doc');
+        expect(log.warn).toHaveBeenCalledWith(
+          'Missing example file... relativePath: "missing/url". - doc\n' +
+          'Example files can be found in the following relative paths: "examples" - doc');
+      });
+    })
+  );
+});
diff --git a/aio/tools/transforms/examples-package/services/example-map.js b/aio/tools/transforms/examples-package/services/example-map.js
new file mode 100644
index 000000000000..86e8614d65aa
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/example-map.js
@@ -0,0 +1,3 @@
+module.exports = function exampleMap() {
+  return {};
+};
diff --git a/aio/tools/transforms/examples-package/services/getExampleRegion.js b/aio/tools/transforms/examples-package/services/getExampleRegion.js
new file mode 100644
index 000000000000..ebf09c241fdb
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/getExampleRegion.js
@@ -0,0 +1,38 @@
+module.exports = function getExampleRegion(exampleMap, createDocMessage, collectExamples) {
+  return function getExampleRegionImpl(doc, relativePath, regionName) {
+    const EXAMPLES_FOLDERS = collectExamples.exampleFolders;
+
+    // Find the example in the folders
+    var exampleFile;
+    // Try an "annotated" version first
+    EXAMPLES_FOLDERS.some(EXAMPLES_FOLDER => { return exampleFile = exampleMap[EXAMPLES_FOLDER][relativePath + '.annotated']; });
+
+    // If no annotated version is available then try the actual file
+    if (!exampleFile) {
+      EXAMPLES_FOLDERS.some(EXAMPLES_FOLDER => { return exampleFile = exampleMap[EXAMPLES_FOLDER][relativePath]; });
+    }
+
+    // If still no file then we error
+    if (!exampleFile) {
+      const gitIgnoreFile = collectExamples.isExampleIgnored(relativePath);
+      if( gitIgnoreFile) {
+        const message = createDocMessage('Ignored example file... relativePath: "' + relativePath + '"', doc) + '\n' +
+        'This example file exists but has been ignored by a rule, in "' + gitIgnoreFile + '".';
+        throw new Error(message);
+      } else {
+        const message = createDocMessage('Missing example file... relativePath: "' + relativePath + '".', doc) + '\n' +
+            'Example files can be found in the following relative paths: ' + EXAMPLES_FOLDERS.map(function(folder) { return '"' + folder + '"'; }).join(', ');
+        throw new Error(message);
+      }
+    }
+
+    var sourceCodeDoc = exampleFile.regions[regionName || ''];
+    if (!sourceCodeDoc) {
+      const message = createDocMessage('Missing example region... relativePath: "' + relativePath + '", region: "' + regionName + '".', doc) + '\n' +
+                      'Regions available are: ' + Object.keys(exampleFile.regions).map(function(region) { return '"' + region + '"'; }).join(', ');
+      throw new Error(message);
+    }
+
+    return sourceCodeDoc.renderedContent;
+  };
+};
diff --git a/aio/tools/transforms/examples-package/services/getExampleRegion.spec.js b/aio/tools/transforms/examples-package/services/getExampleRegion.spec.js
new file mode 100644
index 000000000000..ba42d118058e
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/getExampleRegion.spec.js
@@ -0,0 +1,46 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('getExampleRegion', () => {
+  var dgeni, injector, getExampleRegion, collectExamples, exampleMap;
+
+  beforeEach(function() {
+    dgeni = new Dgeni([testPackage('examples-package', true)]);
+    injector = dgeni.configureInjector();
+    getExampleRegion = injector.get('getExampleRegion');
+    collectExamples = injector.get('collectExamples');
+    exampleMap = injector.get('exampleMap');
+    collectExamples.exampleFolders = ['examples'];
+    collectExamples.registerIgnoredExamples(['filtered/path'], 'some/gitignore');
+    exampleMap['examples'] = {
+      'test/url': { regions: {
+        '': { renderedContent: 'whole file' },
+        'region-1': { renderedContent: 'region 1 contents' }
+      } }
+    };
+  });
+
+  it('should contain the whole contents from the example file if no region is specified', () => {
+    expect(getExampleRegion({}, 'test/url')).toEqual('whole file');
+  });
+
+  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', () => {
+    expect(() => {
+      getExampleRegion({}, 'missing/file', 'region-1');
+    }).toThrowError('Missing example file... relativePath: "missing/file". - doc\nExample files can be found in the following relative paths: "examples"');
+    expect(() => {
+      getExampleRegion({}, 'test/url', 'missing-region');
+    }).toThrowError('Missing example region... relativePath: "test/url", region: "missing-region". - doc\nRegions available are: "", "region-1"');
+  });
+
+  it('should throw an error if an example has been filtered out', () => {
+    expect(() => {
+      getExampleRegion({}, 'filtered/path', 'any-region');
+    }).toThrowError('Ignored example file... relativePath: "filtered/path" - doc\n' +
+                    'This example file exists but has been ignored by a rule, in "some/gitignore".');
+  });
+});
diff --git a/aio/tools/transforms/examples-package/services/parseArgString.js b/aio/tools/transforms/examples-package/services/parseArgString.js
new file mode 100644
index 000000000000..6507ab6c6c9e
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/parseArgString.js
@@ -0,0 +1,58 @@
+/**
+ * @dgService parseArgString
+ * @description
+ * processes an arg string in 'almost' the same fashion that the command processor does
+ * and returns an args object in yargs format.
+ * @kind function
+ * @param  {String} str   The arg string to process
+ * @return {Object} The args parsed into a yargs format.
+ */
+
+module.exports = function parseArgString() {
+
+  return function parseArgStringImpl(str) {
+    // regex from npm string-argv
+    //[^\s'"] Match if not a space ' or "
+
+    //+|['] or Match '
+    //([^']*) Match anything that is not '
+    //['] Close match if '
+
+    //+|["] or Match "
+    //([^"]*) Match anything that is not "
+    //["] Close match if "
+    var rx = /[^\s'"]+|[']([^']*?)[']|["]([^"]*?)["]/gi;
+    var value = str;
+    var unnammedArgs = [];
+    var args = {_: unnammedArgs};
+    var match, key;
+    do {
+      // Each call to exec returns the next regex match as an array
+      match = rx.exec(value);
+      if (match !== null) {
+        // Index 1 in the array is the captured group if it exists
+        // Index 0 is the matched text, which we use if no captured group exists
+        var arg = match[2] ? match[2] : (match[1] ? match[1] : match[0]);
+        if (key) {
+          args[key] = arg;
+          key = null;
+        } else {
+          if (arg.substr(arg.length - 1) === '=') {
+            key = arg.substr(0, arg.length - 1);
+            // remove leading '-' (or '--') if it exists.
+            if (key.substr(0, 1) == '-') {
+              key = key.substr(1);
+            }
+            if (key.substr(0, 1) == '-') {
+              key = key.substr(1);
+            }
+          } else {
+            unnammedArgs.push(arg);
+            key = null;
+          }
+        }
+      }
+    } while (match !== null);
+    return args;
+  };
+};
diff --git a/aio/tools/transforms/examples-package/services/region-matchers/block-c.js b/aio/tools/transforms/examples-package/services/region-matchers/block-c.js
new file mode 100644
index 000000000000..d7464a6460c7
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-matchers/block-c.js
@@ -0,0 +1,7 @@
+// These kind of comments are used CSS and other languages that do not support inline comments
+module.exports = {
+  regionStartMatcher: /^\s*\/\*\s*#docregion\s*(.*)\s*\*\/\s*$/,
+  regionEndMatcher: /^\s*\/\*\s*#enddocregion\s*(.*)\s*\*\/\s*$/,
+  plasterMatcher: /^\s*\/\*\s*#docplaster\s*(.*)\s*\*\/\s*$/,
+  createPlasterComment: plaster => `/* ${plaster} */`
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/examples-package/services/region-matchers/block-c.spec.js b/aio/tools/transforms/examples-package/services/region-matchers/block-c.spec.js
new file mode 100644
index 000000000000..68d24e454225
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-matchers/block-c.spec.js
@@ -0,0 +1,55 @@
+const matcher = require('./block-c');
+
+describe('block-c region-matcher', () => {
+  it('should match start annotations', () => {
+    let matches;
+
+    matches = matcher.regionStartMatcher.exec('/* #docregion A b c */');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c ');
+
+    matches = matcher.regionStartMatcher.exec('/*#docregion A b c*/');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionStartMatcher.exec('/* #docregion */');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should match end annotations', () => {
+    let matches;
+
+    matches = matcher.regionEndMatcher.exec('/* #enddocregion A b c */');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c ');
+
+    matches = matcher.regionEndMatcher.exec('/*#enddocregion A b c*/');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionEndMatcher.exec('/* #enddocregion */');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should match plaster annotations', () => {
+    let matches;
+
+    matches = matcher.plasterMatcher.exec('/* #docplaster A b c */');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c ');
+
+    matches = matcher.plasterMatcher.exec('/*#docplaster A b c*/');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.plasterMatcher.exec('/* #docplaster */');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should create a plaster comment', () => {
+    expect(matcher.createPlasterComment('... elided ...')).toEqual('/* ... elided ... */');
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/examples-package/services/region-matchers/html.js b/aio/tools/transforms/examples-package/services/region-matchers/html.js
new file mode 100644
index 000000000000..4528c10750c7
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-matchers/html.js
@@ -0,0 +1,7 @@
+// These kind of comments are used in HTML
+module.exports = {
+  regionStartMatcher: /^\s*<!--\s*#docregion\s*(.*?)\s*(?:-->)?\s*$/,
+  regionEndMatcher: /^\s*<!--\s*#enddocregion\s*(.*?)\s*-->\s*$/,
+  plasterMatcher: /^\s*<!--\s*#docplaster\s*(.*?)\s*-->\s*$/,
+  createPlasterComment: plaster => `<!-- ${plaster} -->`
+};
diff --git a/aio/tools/transforms/examples-package/services/region-matchers/html.spec.js b/aio/tools/transforms/examples-package/services/region-matchers/html.spec.js
new file mode 100644
index 000000000000..9764b16a7344
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-matchers/html.spec.js
@@ -0,0 +1,63 @@
+const matcher = require('./html');
+
+describe('html region-matcher', () => {
+  it('should match start annotations', () => {
+    let matches;
+
+    matches = matcher.regionStartMatcher.exec('<!-- #docregion A b c -->');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionStartMatcher.exec('<!--#docregion A b c-->');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionStartMatcher.exec('<!-- #docregion -->');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should match end annotations', () => {
+    let matches;
+
+    matches = matcher.regionEndMatcher.exec('<!-- #enddocregion A b c -->');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionEndMatcher.exec('<!--#enddocregion A b c-->');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionEndMatcher.exec('<!-- #enddocregion -->');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should handle annotations that do not close the comment on the same line', () => {
+    let matches;
+
+    matches = matcher.regionStartMatcher.exec('<!-- #docregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+  });
+
+  it('should match plaster annotations', () => {
+    let matches;
+
+    matches = matcher.plasterMatcher.exec('<!-- #docplaster A b c -->');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.plasterMatcher.exec('<!--#docplaster A b c-->');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.plasterMatcher.exec('<!-- #docplaster -->');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should create a plaster comment', () => {
+    expect(matcher.createPlasterComment('... elided ...')).toEqual('<!-- ... elided ... -->');
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/examples-package/services/region-matchers/inline-c-only.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-c-only.js
new file mode 100644
index 000000000000..90b1d8d9bade
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-matchers/inline-c-only.js
@@ -0,0 +1,7 @@
+// These kind of comments are used in languages that do not support block comments, such as Jade
+module.exports = {
+  regionStartMatcher: /^\s*\/\/\s*#docregion\s*(.*)\s*$/,
+  regionEndMatcher: /^\s*\/\/\s*#enddocregion\s*(.*)\s*$/,
+  plasterMatcher: /^\s*\/\/\s*#docplaster\s*(.*)\s*$/,
+  createPlasterComment: plaster => `// ${plaster}`
+};
diff --git a/aio/tools/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
new file mode 100644
index 000000000000..b3a8cb694ab0
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-matchers/inline-c-only.spec.js
@@ -0,0 +1,55 @@
+const matcher = require('./inline-c-only');
+
+describe('inline-c-only region-matcher', () => {
+  it('should match start annotations', () => {
+    let matches;
+
+    matches = matcher.regionStartMatcher.exec('// #docregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionStartMatcher.exec('//#docregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionStartMatcher.exec('// #docregion');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should match end annotations', () => {
+    let matches;
+
+    matches = matcher.regionEndMatcher.exec('// #enddocregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionEndMatcher.exec('//#enddocregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionEndMatcher.exec('// #enddocregion');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should match plaster annotations', () => {
+    let matches;
+
+    matches = matcher.plasterMatcher.exec('// #docplaster A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.plasterMatcher.exec('//#docplaster A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.plasterMatcher.exec('// #docplaster');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should create a plaster comment', () => {
+    expect(matcher.createPlasterComment('... elided ...')).toEqual('// ... elided ...');
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/examples-package/services/region-matchers/inline-c.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-c.js
new file mode 100644
index 000000000000..2c4dc870b36e
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-matchers/inline-c.js
@@ -0,0 +1,7 @@
+// This comment type is used in C like languages such as JS, TS, Dart, etc
+module.exports = {
+  regionStartMatcher: /^\s*\/\/\s*#docregion\s*(.*)\s*$/,
+  regionEndMatcher: /^\s*\/\/\s*#enddocregion\s*(.*)\s*$/,
+  plasterMatcher: /^\s*\/\/\s*#docplaster\s*(.*)\s*$/,
+  createPlasterComment: plaster => `/* ${plaster} */`
+};
diff --git a/aio/tools/transforms/examples-package/services/region-matchers/inline-c.spec.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-c.spec.js
new file mode 100644
index 000000000000..e148537fe77b
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-matchers/inline-c.spec.js
@@ -0,0 +1,55 @@
+const matcher = require('./inline-c');
+
+describe('inline-c region-matcher', () => {
+  it('should match start annotations', () => {
+    let matches;
+
+    matches = matcher.regionStartMatcher.exec('// #docregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionStartMatcher.exec('//#docregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionStartMatcher.exec('// #docregion');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should match end annotations', () => {
+    let matches;
+
+    matches = matcher.regionEndMatcher.exec('// #enddocregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionEndMatcher.exec('//#enddocregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionEndMatcher.exec('// #enddocregion');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should match plaster annotations', () => {
+    let matches;
+
+    matches = matcher.plasterMatcher.exec('// #docplaster A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.plasterMatcher.exec('//#docplaster A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.plasterMatcher.exec('// #docplaster');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should create a plaster comment', () => {
+    expect(matcher.createPlasterComment('... elided ...')).toEqual('/* ... elided ... */');
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/examples-package/services/region-matchers/inline-hash.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-hash.js
new file mode 100644
index 000000000000..1dc975fe3fbc
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-matchers/inline-hash.js
@@ -0,0 +1,7 @@
+// These type of comments are used in hash comment based languages such as bash and Yaml
+module.exports = {
+  regionStartMatcher: /^\s*#\s*#docregion\s*(.*)\s*$/,
+  regionEndMatcher: /^\s*#\s*#enddocregion\s*(.*)\s*$/,
+  plasterMatcher: /^\s*#\s*#docplaster\s*(.*)\s*$/,
+  createPlasterComment: plaster => `# ${plaster}`
+};
diff --git a/aio/tools/transforms/examples-package/services/region-matchers/inline-hash.spec.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-hash.spec.js
new file mode 100644
index 000000000000..e9b294a1a340
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-matchers/inline-hash.spec.js
@@ -0,0 +1,54 @@
+const matcher = require('./inline-hash');
+
+describe('inline-hash region-matcher', () => {
+  it('should match start annotations', () => {
+    let matches;
+
+    matches = matcher.regionStartMatcher.exec('# #docregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionStartMatcher.exec('##docregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionStartMatcher.exec('# #docregion');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should match end annotations', () => {
+    let matches;
+
+    matches = matcher.regionEndMatcher.exec('# #enddocregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionEndMatcher.exec('##enddocregion A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.regionEndMatcher.exec('# #enddocregion');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should match plaster annotations', () => {
+    let matches;
+
+    matches = matcher.plasterMatcher.exec('# #docplaster A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.plasterMatcher.exec('##docplaster A b c');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('A b c');
+
+    matches = matcher.plasterMatcher.exec('# #docplaster');
+    expect(matches).not.toBeNull();
+    expect(matches[1]).toEqual('');
+  });
+
+  it('should create a plaster comment',
+     () => { expect(matcher.createPlasterComment('... elided ...')).toEqual('# ... elided ...'); });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/examples-package/services/region-parser.js b/aio/tools/transforms/examples-package/services/region-parser.js
new file mode 100644
index 000000000000..d996ce83014f
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-parser.js
@@ -0,0 +1,142 @@
+const blockC = require('./region-matchers/block-c');
+const html = require('./region-matchers/html');
+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('../../helpers/utils');
+
+module.exports = function regionParser() {
+  return regionParserImpl;
+};
+
+regionParserImpl.regionMatchers = {
+  ts: inlineC,
+  js: inlineC,
+  es6: inlineC,
+  dart: inlineC,
+  html: html,
+  css: blockC,
+  yaml: inlineHash,
+  jade: inlineCOnly,
+  json: inlineC,
+  'json.annotated': inlineC
+};
+
+/**
+ * @param contents string
+ * @param fileType string
+ * @returns {contents: string, regions: {[regionName: string]: string}}
+ */
+function regionParserImpl(contents, fileType) {
+  const regionMatcher = regionParserImpl.regionMatchers[fileType];
+  const openRegions = [];
+  const regionMap = {};
+
+  if (regionMatcher) {
+    let plaster = regionMatcher.createPlasterComment(DEFAULT_PLASTER);
+    const lines = contents.split(/\r?\n/).filter((line, index) => {
+      const startRegion = line.match(regionMatcher.regionStartMatcher);
+      const endRegion = line.match(regionMatcher.regionEndMatcher);
+      const updatePlaster = line.match(regionMatcher.plasterMatcher);
+
+      // start region processing
+      if (startRegion) {
+        // open up the specified region
+        const regionNames = getRegionNames(startRegion[1]);
+        if (regionNames.length === 0) {
+          regionNames.push('');
+        }
+        regionNames.forEach(regionName => {
+          const region = regionMap[regionName];
+          if (region) {
+            if (region.open) {
+              throw new RegionParserError(
+                  `Tried to open a region, named "${regionName}", that is already open`, index);
+            }
+            region.open = true;
+            if (plaster) {
+              region.lines.push(plaster);
+            }
+          } else {
+            regionMap[regionName] = {lines: [], open: true};
+          }
+          openRegions.push(regionName);
+        });
+
+        // end region processing
+      } else if (endRegion) {
+        if (openRegions.length === 0) {
+          throw new RegionParserError('Tried to close a region when none are open', index);
+        }
+        // close down the specified region (or most recent if no name is given)
+        const regionNames = getRegionNames(endRegion[1]);
+        if (regionNames.length === 0) {
+          regionNames.push(openRegions[openRegions.length - 1]);
+        }
+
+        regionNames.forEach(regionName => {
+          const region = regionMap[regionName];
+          if (!region || !region.open) {
+            throw new RegionParserError(
+                `Tried to close a region, named "${regionName}", that is not open`, index);
+          }
+          region.open = false;
+          removeLast(openRegions, regionName);
+        });
+
+        // doc plaster processing
+      } else if (updatePlaster) {
+        const plasterString = updatePlaster[1].trim();
+        plaster = plasterString ? regionMatcher.createPlasterComment(plasterString) : '';
+
+        // simple line of content processing
+      } else {
+        openRegions.forEach(regionName => regionMap[regionName].lines.push(line));
+        // do not filter out this line from the content
+        return true;
+      }
+
+      // this line contained an annotation so let's filter it out
+      return false;
+    });
+    if (!regionMap['']) {
+      regionMap[''] = {lines};
+    }
+    return {
+      contents: lines.join('\n'),
+      regions: mapObject(regionMap, (regionName, region) => leftAlign(region.lines).join('\n'))
+    };
+  } else {
+    return {contents, regions: {}};
+  }
+}
+
+function getRegionNames(input) {
+  return (input.trim() === '') ? [] : input.split(',').map(name => name.trim());
+}
+
+function removeLast(array, item) {
+  const index = array.lastIndexOf(item);
+  array.splice(index, 1);
+}
+
+function leftAlign(lines) {
+  let indent = Number.MAX_VALUE;
+  lines.forEach(line => {
+    const lineIndent = line.search(/\S/);
+    if (lineIndent !== -1) {
+      indent = Math.min(lineIndent, indent);
+    }
+  });
+  return lines.map(line => line.substr(indent));
+}
+
+function RegionParserError(message, index) {
+  const lineNum = index + 1;
+  this.message = `regionParser: ${message} (at line ${lineNum}).`;
+  this.lineNum = lineNum;
+  this.stack = (new Error()).stack;
+}
+RegionParserError.prototype = Object.create(Error.prototype);
+RegionParserError.prototype.constructor = RegionParserError;
diff --git a/aio/tools/transforms/examples-package/services/region-parser.spec.js b/aio/tools/transforms/examples-package/services/region-parser.spec.js
new file mode 100644
index 000000000000..803d47b0ea8a
--- /dev/null
+++ b/aio/tools/transforms/examples-package/services/region-parser.spec.js
@@ -0,0 +1,180 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+const testRegionMatcher = {
+  regionStartMatcher: /^\s*\/\*\s*#docregion\s+(.*)\s*\*\/\s*$/,
+  regionEndMatcher: /^\s*\/\*\s*#enddocregion\s+(.*)\s*\*\/\s*$/,
+  plasterMatcher: /^\s*\/\*\s*#docplaster\s+(.*)\s*\*\/\s*$/,
+  createPlasterComment: plaster => `/* ${plaster} */`
+};
+
+describe('regionParser service', () => {
+  var dgeni, injector, regionParser;
+
+  beforeEach(function() {
+    dgeni = new Dgeni([testPackage('examples-package', true)]);
+    injector = dgeni.configureInjector();
+    regionParser = injector.get('regionParser');
+    regionParser.regionMatchers = {'test-type': testRegionMatcher};
+  });
+
+  it('should return just the contents if there is no region-matcher for the file type', () => {
+    const output = regionParser('some contents', 'unknown');
+    expect(output).toEqual({contents: 'some contents', regions: {}});
+  });
+
+  it('should return just the contents if there is a region-matcher but no regions', () => {
+    const output = regionParser('some contents', 'test-type');
+    expect(output).toEqual({contents: 'some contents', regions: { '': 'some contents' }});
+  });
+
+  it('should remove start region annotations from the contents', () => {
+    const output = regionParser(
+        t('/* #docregion */', 'abc', '/* #docregion X */', 'def', '/* #docregion Y */', 'ghi'),
+        'test-type');
+    expect(output.contents).toEqual(t('abc', 'def', 'ghi'));
+  });
+
+  it('should remove end region annotations from the contents', () => {
+    const output = regionParser(
+        t('/* #docregion */', 'abc', '/* #docregion X */', 'def', '/* #enddocregion X */',
+          '/* #docregion Y */', 'ghi', '/* #enddocregion Y */', '/* #enddocregion */'),
+        'test-type');
+    expect(output.contents).toEqual(t('abc', 'def', 'ghi'));
+  });
+
+  it('should left align the text of the region', () => {
+    const output = regionParser(
+      t(
+        '/* #docregion X */', '  all', '    indented', '    by', '  two', '  spaces', '/* #enddocregion X */',
+        '/* #docregion Y */', '    first', '  line', '  indented', '    more', '  than', '  later', '  lines', '/* #enddocregion Y */',
+        '/* #docregion Z */', '  ignore', '  ', '  empty', '', '  lines', '/* #enddocregion Z */'
+      ), 'test-type');
+    expect(output.regions['X']).toEqual(t('all', '  indented', '  by', 'two', 'spaces'));
+    expect(output.regions['Y']).toEqual(t('  first', 'line', 'indented', '  more', 'than', 'later', 'lines'));
+    expect(output.regions['Z']).toEqual(t('ignore', '', 'empty', '', 'lines'));
+  });
+
+  it('should remove doc plaster annotations from the contents', () => {
+    const output =
+        regionParser(t('/* #docplaster ... elided ... */', 'abc', 'def', 'ghi'), 'test-type');
+    expect(output.contents).toEqual(t('abc', 'def', 'ghi'));
+  });
+
+  it('should capture the rest of the contents for a region with no end region annotation', () => {
+    const output = regionParser(
+        t('/* #docregion */', 'abc', '/* #docregion X */', 'def', '/* #docregion Y */', 'ghi'),
+        'test-type');
+    expect(output.regions['']).toEqual(t('abc', 'def', 'ghi'));
+    expect(output.regions['X']).toEqual(t('def', 'ghi'));
+    expect(output.regions['Y']).toEqual(t('ghi'));
+  });
+
+
+  it('should capture the contents for a region up to the end region annotation', () => {
+    const output = regionParser(
+        t('/* #docregion */', 'abc', '/* #enddocregion */', '/* #docregion X */', 'def',
+          '/* #enddocregion X */', '/* #docregion Y */', 'ghi', '/* #enddocregion Y */'),
+        'test-type');
+    expect(output.regions['']).toEqual(t('abc'));
+    expect(output.regions['X']).toEqual(t('def'));
+    expect(output.regions['Y']).toEqual(t('ghi'));
+  });
+
+  it('should open a region with a null name if there is no region name', () => {
+    const output = regionParser(t('/* #docregion */', 'abc', '/* #enddocregion */'), 'test-type');
+    expect(output.regions['']).toEqual('abc');
+  });
+
+  it('should close the most recently opened region if there is no region name', () => {
+    const output = regionParser(
+        t('/* #docregion X*/', 'abc', '/* #docregion Y */', 'def', '/* #enddocregion */', 'ghi',
+          '/* #enddocregion */'),
+        'test-type');
+    expect(output.regions['X']).toEqual(t('abc', 'def', 'ghi'));
+    expect(output.regions['Y']).toEqual(t('def'));
+  });
+
+  it('should handle overlapping regions', () => {
+    const output = regionParser(
+        t('/* #docregion X*/', 'abc', '/* #docregion Y */', 'def', '/* #enddocregion X */', 'ghi',
+          '/* #enddocregion Y */'),
+        'test-type');
+    expect(output.regions['X']).toEqual(t('abc', 'def'));
+    expect(output.regions['Y']).toEqual(t('def', 'ghi'));
+  });
+
+  it('should error if we attempt to open an already open region', () => {
+    expect(() => regionParser(t('/* #docregion */', 'abc', '/* #docregion */', 'def'), 'test-type'))
+        .toThrowError(
+            'regionParser: Tried to open a region, named "", that is already open (at line 3).');
+
+    expect(
+        () =>
+            regionParser(t('/* #docregion X */', 'abc', '/* #docregion X */', 'def'), 'test-type'))
+        .toThrowError(
+            'regionParser: Tried to open a region, named "X", that is already open (at line 3).');
+  });
+
+  it('should error if we attempt to close an already closed region', () => {
+    expect(() => regionParser(t('abc', '/* #enddocregion */', 'def'), 'test-type'))
+        .toThrowError('regionParser: Tried to close a region when none are open (at line 2).');
+
+    expect(
+        () =>
+            regionParser(t('/* #docregion */', 'abc', '/* #enddocregion X */', 'def'), 'test-type'))
+        .toThrowError(
+            'regionParser: Tried to close a region, named "X", that is not open (at line 3).');
+  });
+
+  it('should handle whitespace in region names on single annotation', () => {
+    const output =
+        regionParser(t('/* #docregion A B*/', 'abc', '/* #docregion A C */', 'def'), 'test-type');
+    expect(output.regions['A B']).toEqual(t('abc', 'def'));
+    expect(output.regions['A C']).toEqual(t('def'));
+  });
+
+  it('should join multiple regions with the default plaster string (". . .")', () => {
+    const output = regionParser(
+        t('/* #docregion */', 'abc', '/* #enddocregion */', 'def', '/* #docregion */', 'ghi',
+          '/* #enddocregion */'),
+        'test-type');
+    expect(output.regions['']).toEqual(t('abc', '/* . . . */', 'ghi'));
+  });
+
+
+  it('should join multiple regions with the current plaster string', () => {
+    const output = regionParser(
+        t('/* #docregion */', 'abc', '/* #enddocregion */', 'def', '/* #docregion */', 'ghi',
+          '/* #enddocregion */', '/* #docplaster ... elided ... */', '/* #docregion A */', 'jkl',
+          '/* #enddocregion A */', 'mno', '/* #docregion A */', 'pqr', '/* #enddocregion A */'),
+        'test-type');
+    expect(output.regions['']).toEqual(t('abc', '/* . . . */', 'ghi'));
+    expect(output.regions['A']).toEqual(t('jkl', '/* ... elided ... */', 'pqr'));
+  });
+
+  it('should remove the plaster altogether if the current plaster string is ""', () => {
+    const output = regionParser(
+        t('/* #docregion */', 'abc', '/* #enddocregion */', 'def', '/* #docregion */', 'ghi',
+          '/* #enddocregion */', '/* #docplaster */', '/* #docregion A */', 'jkl',
+          '/* #enddocregion A */', 'mno', '/* #docregion A */', 'pqr', '/* #enddocregion A */'),
+        'test-type');
+    expect(output.regions['']).toEqual(t('abc', '/* . . . */', 'ghi'));
+    expect(output.regions['A']).toEqual(t('jkl', 'pqr'));
+  });
+
+  it('should parse multiple region names separated by commas', () => {
+    const output = regionParser(
+        t('/* #docregion , A, B */', 'abc', '/* #enddocregion B */', '/* #docregion C */', 'xyz',
+          '/* #enddocregion A, C */', '123', '/* #enddocregion */'),
+        'test-type');
+    expect(output.regions['']).toEqual(t('abc', 'xyz', '123'));
+    expect(output.regions['A']).toEqual(t('abc', 'xyz'));
+    expect(output.regions['B']).toEqual(t('abc'));
+    expect(output.regions['C']).toEqual(t('xyz'));
+  });
+});
+
+function t() {
+  return Array.prototype.join.call(arguments, '\n');
+}
diff --git a/aio/tools/transforms/helpers/test-package.js b/aio/tools/transforms/helpers/test-package.js
new file mode 100644
index 000000000000..a714ed929c53
--- /dev/null
+++ b/aio/tools/transforms/helpers/test-package.js
@@ -0,0 +1,30 @@
+/**
+ * @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('canonical-path');
+
+const Package = require('dgeni').Package;
+
+module.exports = function testPackage(packageName, mockTemplateEngine) {
+
+  const pkg = new Package('mock_' + packageName, [require('../' + packageName)]);
+
+  // provide a mock log service
+  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, '../../../..');
+  pkg.factory('packageInfo', function() { return require(path.resolve(PROJECT_ROOT, 'package.json')); });
+
+
+  if (mockTemplateEngine) {
+    pkg.factory('templateEngine', function() { return {}; });
+  }
+
+  return pkg;
+};
diff --git a/aio/tools/transforms/helpers/utils.js b/aio/tools/transforms/helpers/utils.js
new file mode 100644
index 000000000000..3ca5556beb33
--- /dev/null
+++ b/aio/tools/transforms/helpers/utils.js
@@ -0,0 +1,114 @@
+module.exports = {
+  /**
+   * Transform the values of an object via a mapper function
+   * @param {Object} obj
+   * @param {Function} mapper
+   */
+  mapObject(obj, mapper) {
+    const mappedObj = {};
+    Object.keys(obj).forEach(key => { mappedObj[key] = mapper(key, obj[key]); });
+    return mappedObj;
+  },
+
+  /**
+   * Parses the attributes from a string taken from an HTML element start tag
+   * E.g. ` a="one" b="two" `
+   * @param {string} str
+   */
+  parseAttributes(str) {
+    const attrMap = {};
+    let index = 0;
+
+    skipSpace();
+
+    while(index < str.length) {
+      takeAttribute();
+      skipSpace();
+    }
+
+    function takeAttribute() {
+      const key = takeKey();
+      skipSpace();
+      if (tryEquals()) {
+        skipSpace();
+        const quote = tryQuote();
+        attrMap[key] = takeValue(quote);
+        // skip the closing quote or whitespace
+        index++;
+      } else {
+        attrMap[key] = true;
+      }
+    }
+
+
+    function skipSpace() {
+      while(index < str.length && /\s/.test(str[index])) {
+        index++;
+      }
+    }
+
+    function tryEquals() {
+      if (str[index] === '=') {
+        index++;
+        return true;
+      }
+    }
+
+    function takeKey() {
+      let startIndex = index;
+      while(index < str.length && /[^\s=]/.test(str[index])) {
+        index++;
+      }
+      return str.substring(startIndex, index);
+    }
+
+    function tryQuote() {
+      const quote = str[index];
+      if (['"', '\''].indexOf(quote) !== -1) {
+        index++;
+        return quote;
+      }
+    }
+
+    function takeValue(quote) {
+      let startIndex = index;
+
+      if (quote) {
+        while(index < str.length && str[index] !== quote) {
+          index++;
+        }
+        if (index >= str.length) {
+          throw new Error(`Unterminated quoted attribute value in \`${str}\`. Starting at ${startIndex}. Expected a ${quote} but got "end of string".`);
+        }
+      } else {
+        while(index < str.length && /\S/.test(str[index])) {
+          index++;
+        }
+      }
+      return str.substring(startIndex, index);
+    }
+
+    return attrMap;
+  },
+
+  renderAttributes(attrMap) {
+    return Object.keys(attrMap).map(key =>
+      attrMap[key] === false ? '' :
+      attrMap[key] === true ? ` ${key}` :
+      ` ${key}="${attrMap[key].replace(/"/g, '&quot;')}"`).join('');
+  },
+
+  /**
+   * Merge the specified properties from the source to the target document
+   * @param {Document} target The document to receive the properties from the source
+   * @param {Document} source The document from which to get the properties to merge
+   * @param {string[]} properties A collection of the names of the properties to merge
+   */
+  mergeProperties(target, source, properties) {
+    properties.forEach(property => {
+      if (source.hasOwnProperty(property)) {
+        target[property] = source[property];
+      }
+    });
+  },
+};
diff --git a/aio/tools/transforms/helpers/utils.spec.js b/aio/tools/transforms/helpers/utils.spec.js
new file mode 100644
index 000000000000..ee086b83746a
--- /dev/null
+++ b/aio/tools/transforms/helpers/utils.spec.js
@@ -0,0 +1,129 @@
+const { mergeProperties, mapObject, parseAttributes, renderAttributes } = require('./utils');
+
+describe('utils', () => {
+  describe('mapObject', () => {
+    it('creates a new object', () => {
+      const testObj = { a: 1 };
+      const mappedObj = mapObject(testObj, (key, value) => value);
+      expect(mappedObj).toEqual(testObj);
+      expect(mappedObj).not.toBe(testObj);
+    });
+
+    it('maps the values via the mapper function', () => {
+      const testObj = { a: 1, b: 2 };
+      const mappedObj = mapObject(testObj, (key, value) => value * 2);
+      expect(mappedObj).toEqual({ a: 2, b: 4 });
+    });
+  });
+
+  describe('parseAttributes', () => {
+    it('should parse empty string', () => {
+      const attrs = parseAttributes('');
+      expect(attrs).toEqual({ });
+    });
+
+    it('should parse blank string', () => {
+      const attrs = parseAttributes('  ');
+      expect(attrs).toEqual({ });
+    });
+
+    it('should parse double quoted attributes', () => {
+      const attrs = parseAttributes('a="one" b="two"');
+      expect(attrs).toEqual({ a: 'one', b: 'two' });
+    });
+
+    it('should parse empty quoted attributes', () => {
+      const attrs = parseAttributes('a="" b="two"');
+      expect(attrs).toEqual({ a: '', b: 'two' });
+    });
+
+    it('should parse single quoted attributes', () => {
+      const attrs = parseAttributes('a=\'one\' b=\'two\'');
+      expect(attrs).toEqual({ a: 'one', b: 'two' });
+    });
+
+    it('should ignore whitespace', () => {
+      const attrs = parseAttributes('   a = "one"   b  =  "two"   ');
+      expect(attrs).toEqual({ a: 'one', b: 'two' });
+    });
+
+    it('should parse attributes with quotes within quotes', () => {
+      const attrs = parseAttributes('a=\'o"n"e\' b="t\'w\'o"');
+      expect(attrs).toEqual({ a: 'o"n"e', b: 't\'w\'o' });
+    });
+
+    it('should parse attributes with spaces in their values', () => {
+      const attrs = parseAttributes('a="one and two" b="three and four"');
+      expect(attrs).toEqual({ a: 'one and two', b: 'three and four' });
+    });
+
+    it('should parse empty attributes', () => {
+      const attrs = parseAttributes('a b="two"');
+      expect(attrs).toEqual({ a: true, b: 'two' });
+    });
+
+    it('should parse unquoted attributes', () => {
+      const attrs = parseAttributes('a=one b=two');
+      expect(attrs).toEqual({ a: 'one', b: 'two' });
+    });
+
+    it('should complain if a quoted attribute is not closed', () => {
+      expect(() => parseAttributes('a="" b="two')).toThrowError(
+        'Unterminated quoted attribute value in `a="" b="two`. Starting at 8. Expected a " but got "end of string".'
+      );
+    });
+  });
+
+  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('');
+    });
+  });
+
+  describe('mergeProperties', () => {
+    it('should write specified properties from the source to the target', () => {
+      const source = { a: 1, b: 2, c: 3 };
+      const target = { };
+      mergeProperties(target, source, ['a', 'b']);
+      expect(target).toEqual({ a: 1, b: 2 });
+    });
+
+    it('should not overwrite target properties that are not specified', () => {
+      const source = { a: 1, b: 2, c: 3 };
+      const target = { b: 10 };
+      mergeProperties(target, source, ['a']);
+      expect(target).toEqual({ a: 1, b: 10 });
+    });
+
+    it('should not overwrite target properties that are specified but do not exist in the source', () => {
+      const source = { a: 1 };
+      const target = { b: 10 };
+      mergeProperties(target, source, ['a', 'b']);
+      expect(target).toEqual({ a: 1, b: 10 });
+    });
+
+    it('should overwrite target properties even if they are `undefined` in the source', () => {
+      const source = { a: undefined };
+      const target = { a: 10 };
+      mergeProperties(target, source, ['a']);
+      expect(target).toEqual({ a: undefined });
+    });
+  });
+});
diff --git a/aio/tools/transforms/links-package/index.js b/aio/tools/transforms/links-package/index.js
new file mode 100644
index 000000000000..e6b93b093eb5
--- /dev/null
+++ b/aio/tools/transforms/links-package/index.js
@@ -0,0 +1,27 @@
+var Package = require('dgeni').Package;
+var jsdocPackage = require('dgeni-packages/jsdoc');
+
+module.exports =
+    new Package('links', [jsdocPackage])
+
+        .factory(require('./inline-tag-defs/link'))
+        .factory(require('./services/getAliases'))
+        .factory(require('./services/getDocFromAlias'))
+        .factory(require('./services/getLinkInfo'))
+        .factory(require('./services/disambiguators/disambiguateByContainer'))
+        .factory(require('./services/disambiguators/disambiguateByDeprecated'))
+        .factory(require('./services/disambiguators/disambiguateByModule'))
+        .factory(require('./services/disambiguators/disambiguateByNonMember'))
+
+        .config(function(inlineTagProcessor, linkInlineTagDef) {
+          inlineTagProcessor.inlineTagDefinitions.push(linkInlineTagDef);
+        })
+
+        .config(function(getDocFromAlias, disambiguateByContainer, disambiguateByDeprecated, disambiguateByModule, disambiguateByNonMember) {
+          getDocFromAlias.disambiguators = [
+            disambiguateByContainer,
+            disambiguateByDeprecated,
+            disambiguateByModule,
+            disambiguateByNonMember,
+          ];
+        });
diff --git a/aio/tools/transforms/links-package/inline-tag-defs/link.js b/aio/tools/transforms/links-package/inline-tag-defs/link.js
new file mode 100644
index 000000000000..16f44baaf791
--- /dev/null
+++ b/aio/tools/transforms/links-package/inline-tag-defs/link.js
@@ -0,0 +1,40 @@
+var INLINE_LINK = /(\S+)(?:\s+([\s\S]+))?/;
+
+/**
+ * @dgService linkInlineTagDef
+ * @description
+ * Process inline link tags (of the form {@link some/uri Some Title}), replacing them with HTML anchors
+ * @kind function
+ * @param  {Object} url   The url to match
+ * @param  {Function} docs error message
+ * @return {String}  The html link information
+ *
+ * @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',
+    failOnBadLink: false,
+    description:
+        'Process inline link tags (of the form {@link some/uri Some Title}), replacing them with HTML anchors',
+    handler(doc, tagName, tagDescription) {
+
+      // Parse out the uri and title
+      return tagDescription.replace(INLINE_LINK, (match, uri, title) => {
+
+        var linkInfo = getLinkInfo(uri, title, doc);
+
+        if (!linkInfo.valid) {
+          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>';
+      });
+    }
+  };
+};
\ No newline at end of file
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 000000000000..c380b2ce3c0d
--- /dev/null
+++ b/aio/tools/transforms/links-package/inline-tag-defs/link.spec.js
@@ -0,0 +1,60 @@
+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');
+  });
+
+  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/tools/transforms/links-package/services/disambiguators/disambiguateByContainer.js b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByContainer.js
new file mode 100644
index 000000000000..abd68a4854f6
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByContainer.js
@@ -0,0 +1,19 @@
+/**
+ * This link disambiguator looks for matching docs that have a common container with the
+ * originatingDoc and will return just those.
+ */
+module.exports = function disambiguateByContainer() {
+  return _disambiguate;
+};
+
+function _disambiguate(alias, originatingDoc, docs) {
+  if (originatingDoc) {
+    const filteredDocs = docs.filter(doc => doc.containerDoc === originatingDoc);
+    if (filteredDocs.length === 0) {
+      // No docs match so let's look at the containers container
+      return _disambiguate(alias, originatingDoc.containerDoc, docs);
+    }
+    return filteredDocs;
+  }
+  return docs;
+}
diff --git a/aio/tools/transforms/links-package/services/disambiguators/disambiguateByContainer.spec.js b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByContainer.spec.js
new file mode 100644
index 000000000000..310133800f4c
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByContainer.spec.js
@@ -0,0 +1,34 @@
+const disambiguateByContainer = require('./disambiguateByContainer')();
+const containerA = { name: 'a' };
+const containerB = { name: 'b' };
+const docs = [
+  { id: 'doc1', containerDoc: containerA },
+  { id: 'doc2', containerDoc: containerA },
+  { id: 'doc3', containerDoc: containerB },
+];
+
+describe('disambiguateByContainer', () => {
+  it('should return all docs if the originating doc has no containerDoc', () => {
+    expect(disambiguateByContainer('alias', { }, docs)).toEqual(docs);
+  });
+
+  it('should return all docs if no docs match the originating doc containerDoc', () => {
+    expect(disambiguateByContainer('alias', { containerDoc: { name: 'c' } }, docs)).toEqual(docs);
+  });
+
+  it('should return only docs that are contained by the originating doc or its containers', () => {
+    expect(disambiguateByContainer('alias', containerB, docs)).toEqual([
+      { id: 'doc3', containerDoc: containerB },
+    ]);
+
+    expect(disambiguateByContainer('alias', { containerDoc: containerA }, docs)).toEqual([
+      { id: 'doc1', containerDoc: containerA },
+      { id: 'doc2', containerDoc: containerA },
+    ]);
+
+    expect(disambiguateByContainer('alias', { containerDoc: containerB }, docs)).toEqual([
+      { id: 'doc3', containerDoc: containerB },
+    ]);
+
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/links-package/services/disambiguators/disambiguateByDeprecated.js b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByDeprecated.js
new file mode 100644
index 000000000000..44427c9d40ad
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByDeprecated.js
@@ -0,0 +1,3 @@
+module.exports = function disambiguateByDeprecated() {
+  return (alias, originatingDoc, docs) => docs.filter(doc => doc.deprecated === undefined);
+};
diff --git a/aio/tools/transforms/links-package/services/disambiguators/disambiguateByDeprecated.spec.js b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByDeprecated.spec.js
new file mode 100644
index 000000000000..edc51aa9dd6b
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByDeprecated.spec.js
@@ -0,0 +1,17 @@
+const disambiguateByDeprecated = require('./disambiguateByDeprecated')();
+const docs = [
+  { id: 'doc1' },
+  { id: 'doc2', deprecated: true },
+  { id: 'doc3', deprecated: '' },
+  { id: 'doc4' },
+  { id: 'doc5', deprecated: 'Some text' },
+];
+
+describe('disambiguateByDeprecated', () => {
+  it('should filter out docs whose `deprecated` property is defined', () => {
+    expect(disambiguateByDeprecated('alias', {}, docs)).toEqual([
+      { id: 'doc1' },
+      { id: 'doc4' },
+    ]);
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/links-package/services/disambiguators/disambiguateByModule.js b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByModule.js
new file mode 100644
index 000000000000..8ed131477fa7
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByModule.js
@@ -0,0 +1,12 @@
+module.exports = function disambiguateByModule() {
+  return (alias, originatingDoc, docs) => {
+    const originatingModule = originatingDoc && originatingDoc.moduleDoc;
+    if (originatingModule) {
+      const filteredDocs = docs.filter(doc => doc.moduleDoc === originatingModule);
+      if (filteredDocs.length > 0) {
+        return filteredDocs;
+      }
+    }
+    return docs;
+  };
+};
diff --git a/aio/tools/transforms/links-package/services/disambiguators/disambiguateByModule.spec.js b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByModule.spec.js
new file mode 100644
index 000000000000..f80e24ae859f
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByModule.spec.js
@@ -0,0 +1,29 @@
+const disambiguateByModule = require('./disambiguateByModule')();
+const moduleA = { name: 'a' };
+const moduleB = { name: 'b' };
+const docs = [
+  { id: 'doc1', moduleDoc: moduleA },
+  { id: 'doc2', moduleDoc: moduleA },
+  { id: 'doc3', moduleDoc: moduleB },
+];
+
+describe('disambiguateByModule', () => {
+  it('should return all docs if the originating doc has no moduleDoc', () => {
+    expect(disambiguateByModule('alias', { }, docs)).toEqual(docs);
+  });
+
+  it('should return all docs if no docs match the originating doc moduleDoc', () => {
+    expect(disambiguateByModule('alias', { moduleDoc: { name: 'c' } }, docs)).toEqual(docs);
+  });
+
+  it('should return only docs that match the moduleDoc of the originating doc', () => {
+    expect(disambiguateByModule('alias', { moduleDoc: moduleA }, docs)).toEqual([
+      { id: 'doc1', moduleDoc: moduleA },
+      { id: 'doc2', moduleDoc: moduleA },
+    ]);
+
+    expect(disambiguateByModule('alias', { moduleDoc: moduleB }, docs)).toEqual([
+      { id: 'doc3', moduleDoc: moduleB },
+    ]);
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/links-package/services/disambiguators/disambiguateByNonMember.js b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByNonMember.js
new file mode 100644
index 000000000000..0f6cd1dd1f7c
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByNonMember.js
@@ -0,0 +1,14 @@
+/**
+ * This link disambiguator will remove all the members from the list of ambiguous links
+ * if there is at least one link to a doc that is not a member.
+ *
+ * The heuristic is that exports are more important than members when linking, and that
+ * in general members will be linked to via a more explicit code links such as
+ * `MyClass.member` rather than simply `member`.
+ */
+module.exports = function disambiguateByNonMember() {
+  return (alias, originatingDoc, docs) => {
+    const filteredDocs = docs.filter(doc => doc.docType !== 'member');
+    return filteredDocs.length > 0 ? filteredDocs : docs;
+  };
+};
diff --git a/aio/tools/transforms/links-package/services/disambiguators/disambiguateByNonMember.spec.js b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByNonMember.spec.js
new file mode 100644
index 000000000000..fd2afca6fd61
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/disambiguators/disambiguateByNonMember.spec.js
@@ -0,0 +1,23 @@
+const disambiguateByNonMember = require('./disambiguateByNonMember')();
+const doc1 = { id: 'doc1', docType: 'function', containerDoc: {} };
+const doc2 = { id: 'doc2', docType: 'member', containerDoc: {} };
+const doc3 = { id: 'doc3', docType: 'member', containerDoc: {} };
+const doc4 = { id: 'doc4', docType: 'class', containerDoc: {} };
+const doc5 = { id: 'doc5', docType: 'member', containerDoc: {} };
+
+describe('disambiguateByNonMember', () => {
+  it('should filter out docs that are not members', () => {
+    const docs = [doc1, doc2, doc3, doc4, doc5];
+    expect(disambiguateByNonMember('alias', {}, docs)).toEqual([doc1, doc4]);
+  });
+
+  it('should return all docs if there are no members', () => {
+    const docs = [doc1, doc4];
+    expect(disambiguateByNonMember('alias', {}, docs)).toEqual([doc1, doc4]);
+  });
+
+  it('should return all docs if there are only members', () => {
+    const docs = [doc2, doc3, doc5];
+    expect(disambiguateByNonMember('alias', {}, docs)).toEqual([doc2, doc3, doc5]);
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/links-package/services/getAliases.js b/aio/tools/transforms/links-package/services/getAliases.js
new file mode 100644
index 000000000000..1f21a6c80f79
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/getAliases.js
@@ -0,0 +1,71 @@
+
+function parseCodeName(codeName) {
+  var parts = [];
+  var currentPart;
+
+  codeName.split('.').forEach(function(part) {
+    var subParts = part.split(':');
+
+    var name = subParts.pop();
+    var modifier = subParts.pop();
+
+    if (!modifier && currentPart) {
+      currentPart.name += '.' + name;
+    } else {
+      currentPart = {name: name, modifier: modifier};
+      parts.push(currentPart);
+    }
+  });
+  return parts;
+}
+
+/**
+ * @dgService getAliases
+ * @description
+ * Get a list of all the aliases that can be made from the doc
+ * @param  {Object} doc A doc from which to extract aliases
+ * @return {Array}      A collection of aliases
+ */
+module.exports = function getAliases() {
+
+  return function(doc) {
+
+    var codeNameParts = parseCodeName(doc.id);
+
+    var methodName;
+    var aliases = [];
+    // Add the last part to the list of aliases
+    var part = codeNameParts.pop();
+
+    // If the name contains a # then it is a member and that should be included in the aliases
+    if (part.name.indexOf('#') !== -1) {
+      methodName = part.name.split('#')[1];
+    }
+    // Add the part name and modifier, if provided
+    aliases.push(part.name);
+    if (part.modifier) {
+      aliases.push(part.modifier + ':' + part.name);
+    }
+
+    // Continue popping off the parts of the codeName and work forward collecting up each alias
+    aliases = codeNameParts.reduceRight(function(aliases, part) {
+
+      // Add this part to each of the aliases we have so far
+      aliases.forEach(function(name) {
+        // Add the part name and modifier, if provided
+        aliases.push(part.name + '.' + name);
+        if (part.modifier) {
+          aliases.push(part.modifier + ':' + part.name + '.' + name);
+        }
+      });
+
+      return aliases;
+    }, aliases);
+
+    if (methodName) {
+      aliases.push(methodName);
+    }
+
+    return aliases;
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/links-package/services/getAliases.spec.js b/aio/tools/transforms/links-package/services/getAliases.spec.js
new file mode 100644
index 000000000000..e3f57c759994
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/getAliases.spec.js
@@ -0,0 +1,14 @@
+var getAliasesFactory = require('./getAliases');
+
+describe('getAliases', function() {
+
+  it('should extract all the parts from a code name', function() {
+
+    var getAliases = getAliasesFactory();
+
+    expect(getAliases({id: 'module:ng.service:$http#get'})).toEqual([
+      '$http#get', 'service:$http#get', 'ng.$http#get', 'module:ng.$http#get',
+      'ng.service:$http#get', 'module:ng.service:$http#get', 'get'
+    ]);
+  });
+});
diff --git a/aio/tools/transforms/links-package/services/getDocFromAlias.js b/aio/tools/transforms/links-package/services/getDocFromAlias.js
new file mode 100644
index 000000000000..3cb8173669c6
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/getDocFromAlias.js
@@ -0,0 +1,23 @@
+/**
+ * @dgService getDocFromAlias
+ * @description Get an array of docs that match this alias, relative to the originating doc.
+ *
+ * @property {Array<(alias: string, originatingDoc: Doc, ambiguousDocs: Doc[]) => Doc[]>} disambiguators
+ *           a collection of functions that attempt to resolve ambiguous links. Each disambiguator returns
+ *           a new collection of docs with unwanted ambiguous docs removed (see links-package/service/disambiguators
+ *           for examples).
+ */
+module.exports = function getDocFromAlias(aliasMap) {
+
+  getDocFromAlias.disambiguators = [];
+  return getDocFromAlias;
+
+  function getDocFromAlias(alias, originatingDoc) {
+    return getDocFromAlias.disambiguators.reduce(
+      // Run the disambiguators while there is more than 1 doc found
+      (docs, disambiguater) => docs.length > 1 ? disambiguater(alias, originatingDoc, docs) : docs,
+      // Start with the docs that match the alias
+      aliasMap.getDocs(alias)
+    );
+  }
+};
diff --git a/aio/tools/transforms/links-package/services/getDocFromAlias.spec.js b/aio/tools/transforms/links-package/services/getDocFromAlias.spec.js
new file mode 100644
index 000000000000..989ff43ab64c
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/getDocFromAlias.spec.js
@@ -0,0 +1,47 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+var getDocFromAlias, aliasMap;
+
+describe('getDocFromAlias', () => {
+  beforeEach(() => {
+    var dgeni = new Dgeni([testPackage('links-package', true)]);
+    var injector = dgeni.configureInjector();
+    aliasMap = injector.get('aliasMap');
+    getDocFromAlias = injector.get('getDocFromAlias');
+  });
+
+  it('should return an array of docs that match the alias', () => {
+    var doc1 = {aliases: ['a', 'b', 'c']};
+    var doc2 = {aliases: ['a', 'b']};
+    var doc3 = {aliases: ['a']};
+    aliasMap.addDoc(doc1);
+    aliasMap.addDoc(doc2);
+    aliasMap.addDoc(doc3);
+
+    expect(getDocFromAlias('a')).toEqual([doc1, doc2, doc3]);
+    expect(getDocFromAlias('b')).toEqual([doc1, doc2]);
+    expect(getDocFromAlias('c')).toEqual([doc1]);
+  });
+
+  it('should filter ambiguous docs by calling each disambiguator', () => {
+    getDocFromAlias.disambiguators = [
+      (alias, originatingDoc, docs) => docs.filter(doc => doc.name.indexOf('X') !== -1), // only if X appears in name
+      (alias, originatingDoc, docs) => docs.filter(doc => doc.name.indexOf('Y') !== -1)  // only if Y appears in name
+    ];
+
+    var doc1 = {name: 'X', aliases: ['a', 'b', 'c']};
+    var doc2 = {name: 'Y', aliases: ['a', 'b']};
+    var doc3 = {name: 'XY', aliases: ['a', 'c']};
+    aliasMap.addDoc(doc1);
+    aliasMap.addDoc(doc2);
+    aliasMap.addDoc(doc3);
+
+    // doc1 and doc2 get removed as they don't both have X and Y in name
+    expect(getDocFromAlias('a')).toEqual([doc3]);
+    // doc2 gets removed as it has no X; then we have only one doc left so second disambiguator never runs
+    expect(getDocFromAlias('b')).toEqual([doc1]);
+    // doc1 gets removed as it has no Y; then we have only one doc left (which would anyway pass 2nd disambiguator)
+    expect(getDocFromAlias('c')).toEqual([doc3]);
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/links-package/services/getLinkInfo.js b/aio/tools/transforms/links-package/services/getLinkInfo.js
new file mode 100644
index 000000000000..7b9eb61237a3
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/getLinkInfo.js
@@ -0,0 +1,73 @@
+var path = require('canonical-path');
+
+/**
+ * @dgService getLinkInfo
+ * @description
+ * Get link information to a document that matches the given url
+ * @kind function
+ * @param  {String} url   The url to match
+ * @param  {String} title An optional title to return in the link information
+ * @return {Object}       The link information
+ *
+ * @property {boolean} relativeLinks Whether we expect the links to be relative to the originating doc
+ */
+module.exports = function getLinkInfo(getDocFromAlias, encodeCodeBlock, log) {
+
+  return getLinkInfoImpl;
+
+  function getLinkInfoImpl(url, title, currentDoc) {
+    var linkInfo = {url: url, type: 'url', valid: true, title: title || url};
+
+    if (!url) {
+      throw new Error('Invalid url');
+    }
+
+    var docs = getDocFromAlias(url, currentDoc);
+
+    if (!getLinkInfoImpl.useFirstAmbiguousLink && docs.length > 1) {
+      linkInfo.valid = false;
+      linkInfo.errorType = 'ambiguous';
+      linkInfo.error = 'Ambiguous link: "' + url + '".\n' + docs.reduce(function(msg, doc) {
+        return msg + '\n  "' + doc.id + '" (' + doc.docType + ') : (' + doc.path + ' / ' +
+            doc.fileInfo.relativePath + ')';
+      }, 'Matching docs: ');
+
+    } else if (docs.length >= 1) {
+      linkInfo.url = docs[0].path;
+      linkInfo.title = title || docs[0].title || docs[0].name && encodeCodeBlock(docs[0].name, true);
+      linkInfo.type = 'doc';
+
+      if (getLinkInfoImpl.relativeLinks && currentDoc && currentDoc.path) {
+        var currentFolder = path.dirname(currentDoc.path);
+        var docFolder = path.dirname(linkInfo.url);
+        var relativeFolder =
+            path.relative(path.join('/', currentFolder), path.join('/', docFolder));
+        linkInfo.url = path.join(relativeFolder, path.basename(linkInfo.url));
+        log.debug(currentDoc.path, docs[0].path, linkInfo.url);
+      }
+
+    } else if (url.indexOf('#') > 0) {
+      var pathAndHash = url.split('#');
+      linkInfo = getLinkInfoImpl(pathAndHash[0], title, currentDoc);
+      linkInfo.url = linkInfo.url + '#' + pathAndHash[1];
+      return linkInfo;
+
+    } else if (url.indexOf('/') === -1 && url.indexOf('#') !== 0) {
+      linkInfo.valid = false;
+      linkInfo.errorType = 'missing';
+      linkInfo.error = 'Invalid link (does not match any doc): "' + url + '"';
+
+    } else {
+      linkInfo.title =
+          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 000000000000..fbaef20a6467
--- /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/tools/transforms/post-process-package/index.js b/aio/tools/transforms/post-process-package/index.js
new file mode 100644
index 000000000000..559bc57d555b
--- /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 000000000000..5f8f837bf5d3
--- /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 000000000000..f6423bf59836
--- /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).toHaveBeenCalledWith('There was a problem - doc (a) ');
+  });
+
+  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/tools/transforms/remark-package/index.js b/aio/tools/transforms/remark-package/index.js
new file mode 100644
index 000000000000..1ef0fe274649
--- /dev/null
+++ b/aio/tools/transforms/remark-package/index.js
@@ -0,0 +1,9 @@
+var Package = require('dgeni').Package;
+
+/**
+ * @dgPackage remark
+ * @description Overrides the renderMarkdown service with an implementation based on remark
+ */
+module.exports = new Package('remark', ['nunjucks'])
+                     .factory(require('./services/markedNunjucksFilter'))
+                     .factory(require('./services/renderMarkdown'));
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 000000000000..a208704e9366
--- /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/tools/transforms/remark-package/services/markedNunjucksFilter.js b/aio/tools/transforms/remark-package/services/markedNunjucksFilter.js
new file mode 100644
index 000000000000..11dae32016ce
--- /dev/null
+++ b/aio/tools/transforms/remark-package/services/markedNunjucksFilter.js
@@ -0,0 +1,12 @@
+/**
+ * Convert the value, as markdown, into HTML
+ * @param headingMappings A map of headings to convert (e.g. from h3 to h4).
+ */
+module.exports = function markedNunjucksFilter(renderMarkdown) {
+  return {
+    name: 'marked',
+    process: function(str, headingMappings) {
+      return str && renderMarkdown(str, headingMappings);
+    }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/remark-package/services/plugins/mapHeadings.js b/aio/tools/transforms/remark-package/services/plugins/mapHeadings.js
new file mode 100644
index 000000000000..e00ee7c7754f
--- /dev/null
+++ b/aio/tools/transforms/remark-package/services/plugins/mapHeadings.js
@@ -0,0 +1,31 @@
+const visit = require('unist-util-visit');
+
+function headingToLevel(heading) {
+  const match = /^h(\d+)/.exec(heading);
+  return match ? match[1] : '0';
+}
+
+function parseMappings(mappings) {
+  const mapping = {};
+  Object.keys(mappings).forEach(key => mapping[headingToLevel(key)] = headingToLevel(mappings[key]));
+  return mapping;
+}
+
+module.exports = function mapHeadings(mappings) {
+  const headings = parseMappings(mappings || {});
+  return () => ast => {
+    const nodesToFix = [];
+    Object.keys(headings).forEach(heading => {
+      visit(ast, 'heading', node => {
+        if (node.depth === Number(heading)) {
+          nodesToFix.push(node);
+        }
+      });
+    });
+
+    // Update the depth of the matched nodes
+    nodesToFix.forEach(node => node.depth = headings[node.depth]);
+
+    return ast;
+  };
+};
diff --git a/aio/tools/transforms/remark-package/services/renderMarkdown.js b/aio/tools/transforms/remark-package/services/renderMarkdown.js
new file mode 100644
index 000000000000..4bdaf90021d7
--- /dev/null
+++ b/aio/tools/transforms/remark-package/services/renderMarkdown.js
@@ -0,0 +1,214 @@
+const remark = require('remark');
+const html = require('remark-html');
+const code = require('./handlers/code');
+const mapHeadings = require('./plugins/mapHeadings');
+
+/**
+ * @dgService renderMarkdown
+ * @description
+ * Render the markdown in the given string as HTML.
+ * @param headingMap A map of headings to convert.
+ *                   E.g. `{h3: 'h4'} will map heading 3 level into heading 4.
+ */
+module.exports = function renderMarkdown() {
+  return function renderMarkdownImpl(content, headingMap) {
+
+    const renderer = remark()
+      .use(inlineTagDefs)
+      .use(noIndentedCodeBlocks)
+      .use(plainHTMLBlocks)
+      // USEFUL DEBUGGING CODE
+      // .use(() => tree => {
+      //   console.log(require('util').inspect(tree, { colors: true, depth: 4 }));
+      // })
+      .use(mapHeadings(headingMap))
+      .use(html, { handlers: { code } });
+
+    return renderer.processSync(content).toString();
+  };
+
+  /**
+   * Teach remark not to render indented codeblocks
+   */
+  function noIndentedCodeBlocks() {
+    const blockMethods = this.Parser.prototype.blockMethods;
+    blockMethods.splice(blockMethods.indexOf('indentedCode'), 1);
+  }
+
+
+  /**
+   * Teach remark about inline tags, so that it neither wraps block level
+   * tags in paragraphs nor processes the text within the tag.
+   */
+  function inlineTagDefs() {
+    const Parser = this.Parser;
+    const inlineTokenizers = Parser.prototype.inlineTokenizers;
+    const inlineMethods = Parser.prototype.inlineMethods;
+    const blockTokenizers = Parser.prototype.blockTokenizers;
+    const blockMethods = Parser.prototype.blockMethods;
+
+    blockTokenizers.inlineTag = tokenizeInlineTag;
+    blockMethods.splice(blockMethods.indexOf('paragraph'), 0, 'inlineTag');
+
+    inlineTokenizers.inlineTag = tokenizeInlineTag;
+    inlineMethods.splice(blockMethods.indexOf('text'), 0, 'inlineTag');
+    tokenizeInlineTag.notInLink = true;
+    tokenizeInlineTag.locator = inlineTagLocator;
+
+    function tokenizeInlineTag(eat, value, silent) {
+      const match = /^\{@[^\s\}]+[^\}]*\}/.exec(value);
+
+      if (match) {
+        if (silent) {
+          return true;
+        }
+        return eat(match[0])({
+          'type': 'inlineTag',
+          'value': match[0]
+        });
+      }
+    }
+
+    function inlineTagLocator(value, fromIndex) {
+      return value.indexOf('{@', fromIndex);
+    }
+  }
+
+  /**
+   * Teach remark that some HTML blocks never include markdown
+   */
+  function plainHTMLBlocks() {
+
+    const plainBlocks = ['code-example', 'code-tabs'];
+
+    // Create matchers for each block
+    const anyBlockMatcher = new RegExp('^' + createOpenMatcher(`(${plainBlocks.join('|')})`));
+
+    const Parser = this.Parser;
+    const blockTokenizers = Parser.prototype.blockTokenizers;
+    const blockMethods = Parser.prototype.blockMethods;
+
+    blockTokenizers.plainHTMLBlocks = tokenizePlainHTMLBlocks;
+    blockMethods.splice(blockMethods.indexOf('html'), 0, 'plainHTMLBlocks');
+
+    function tokenizePlainHTMLBlocks(eat, value, silent) {
+      const openMatch = anyBlockMatcher.exec(value);
+      if (openMatch) {
+        const blockName = openMatch[1];
+        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);
+        }
+      }
+    }
+  }
+};
+
+/**
+ * matchRecursiveRegExp
+ *
+ * (c) 2007 Steven Levithan <stevenlevithan.com>
+ * MIT License
+ *
+ * Accepts a string to search, a left and right format delimiter
+ * as regex patterns, and optional regex flags. Returns an array
+ * of matches, allowing nested instances of left/right delimiters.
+ * Use the "g" flag to return all matches, otherwise only the
+ * first is returned. Be careful to ensure that the left and
+ * right format delimiters produce mutually exclusive matches.
+ * Backreferences are not supported within the right delimiter
+ * due to how it is internally combined with the left delimiter.
+ * When matching strings whose format delimiters are unbalanced
+ * to the left or right, the output is intentionally as a
+ * conventional regex library with recursion support would
+ * produce, e.g. "<<x>" and "<x>>" both produce ["x"] when using
+ * "<" and ">" as the delimiters (both strings contain a single,
+ * balanced instance of "<x>").
+ *
+ * examples:
+ * matchRecursiveRegExp("test", "\\(", "\\)")
+ * returns: []
+ * matchRecursiveRegExp("<t<<e>><s>>t<>", "<", ">", "g")
+ * returns: ["t<<e>><s>", ""]
+ * matchRecursiveRegExp("<div id=\"x\">test</div>", "<div\\b[^>]*>", "</div>", "gi")
+ * returns: ["test"]
+ */
+function matchRecursiveRegExp(str, left, right, flags) {
+  'use strict';
+
+  const matchPos = rgxFindMatchPos(str, left, right, flags);
+  const results = [];
+
+  for (var i = 0; i < matchPos.length; ++i) {
+    results.push([
+      str.slice(matchPos[i].wholeMatch.start, matchPos[i].wholeMatch.end),
+      str.slice(matchPos[i].match.start, matchPos[i].match.end),
+      str.slice(matchPos[i].left.start, matchPos[i].left.end),
+      str.slice(matchPos[i].right.start, matchPos[i].right.end)
+    ]);
+  }
+  return results;
+}
+
+function rgxFindMatchPos(str, left, right, flags) {
+  'use strict';
+  flags = flags || '';
+  const global = flags.indexOf('g') > -1;
+  const bothMatcher = new RegExp(left + '|' + right, 'g' + flags.replace(/g/g, ''));
+  const leftMatcher = new RegExp(left, flags.replace(/g/g, ''));
+  const pos = [];
+  let index, match, start, end;
+  let count = 0;
+
+  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;
+        }
+      }
+    }
+  }
+
+  if (count) {
+    throw new Error(str.slice(start, index));
+  }
+
+  return pos;
+}
+
+function createOpenMatcher(elementNameMatcher) {
+  const attributeName = '[a-zA-Z_:][a-zA-Z0-9:._-]*';
+  const unquoted = '[^"\'=<>`\\u0000-\\u0020]+';
+  const singleQuoted = '\'[^\']*\'';
+  const doubleQuoted = '"[^"]*"';
+  const attributeValue = '(?:' + unquoted + '|' + singleQuoted + '|' + doubleQuoted + ')';
+  const attribute = '(?:\\s+' + attributeName + '(?:\\s*=\\s*' + attributeValue + ')?)';
+  return `<${elementNameMatcher}${attribute}*\\s*>`;
+}
+
+function createCloseMatcher(elementNameMatcher) {
+  return `</${elementNameMatcher}>`;
+}
\ No newline at end of file
diff --git a/aio/tools/transforms/remark-package/services/renderMarkdown.spec.js b/aio/tools/transforms/remark-package/services/renderMarkdown.spec.js
new file mode 100644
index 000000000000..973a9c800860
--- /dev/null
+++ b/aio/tools/transforms/remark-package/services/renderMarkdown.spec.js
@@ -0,0 +1,130 @@
+const renderMarkdownFactory = require('./renderMarkdown');
+
+describe('remark: renderMarkdown service', () => {
+  let renderMarkdown;
+  beforeEach(() => {
+    renderMarkdown = renderMarkdownFactory();
+  });
+
+  it('should convert markdown to HTML', () => {
+    const content = '# heading 1\n' +
+        '\n' +
+        'A paragraph with **bold** and _italic_.\n' +
+        '\n' +
+        '* List item 1\n' +
+        '* List item 2';
+    const output = renderMarkdown(content);
+
+    expect(output).toEqual(
+        '<h1>heading 1</h1>\n' +
+        '<p>A paragraph with <strong>bold</strong> and <em>italic</em>.</p>\n' +
+        '<ul>\n' +
+        '<li>List item 1</li>\n' +
+        '<li>List item 2</li>\n' +
+        '</ul>\n');
+  });
+
+  it('should not process markdown inside inline tags', () => {
+    const content = '* list item {@link some_url_path}';
+    const output = renderMarkdown(content);
+    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', () => {
+    const content = 'A paragraph.\n' +
+        '\n' +
+        '{@example blah **blah** blah }\n' +
+        '\n' +
+        'Another paragraph {@link _containing_ } an inline tag';
+    const output = renderMarkdown(content);
+    expect(output).toEqual(
+        '<p>A paragraph.</p>\n' +
+        '{@example blah **blah** blah }\n' +
+        '<p>Another paragraph {@link _containing_ } an inline tag</p>\n');
+  });
+
+  it('should not format the contents of tags marked as unformatted ', () => {
+    const content = '<code-example>\n\n  **abc**\n\n  def\n</code-example>\n\n<code-tabs><code-pane>\n\n  **abc**\n\n  def\n</code-pane></code-tabs>';
+    const output = renderMarkdown(content);
+    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' +
+        '[foo](path/to/foo) bbb.';
+    var output =
+        '<p>' +
+        'A aa aaa aaaa aaaaa aaaaaa aaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaaa aaaaaaaaaaa\n' +
+        '<a href="path/to/foo">foo</a> bbb.' +
+        '</p>\n';
+
+    expect(renderMarkdown(input)).toEqual(output);
+  });
+
+  it('should not format indented text as code', () => {
+    const content = 'some text\n\n    indented text\n\nother text';
+    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'
+    );
+  });
+
+  it('should map heading levels as specified', () => {
+    const content =
+    '# heading 1\n' +
+    '\n' +
+    'some paragraph\n' +
+    '\n' +
+    '## heading 2a\n' +
+    '\n' +
+    'some paragraph\n' +
+    '\n' +
+    '### heading 3\n' +
+    '\n' +
+    'some paragraph\n' +
+    '\n' +
+    '## heading 2b\n' +
+    '\n' +
+    'some paragraph\n' +
+    '\n';
+    const headingMappings = { h2: 'h3', h3: 'h5' };
+    const output = renderMarkdown(content, headingMappings);
+    expect(output).toEqual(
+      '<h1>heading 1</h1>\n' +
+      '<p>some paragraph</p>\n' +
+      '<h3>heading 2a</h3>\n' +
+      '<p>some paragraph</p>\n' +
+      '<h5>heading 3</h5>\n' +
+      '<p>some paragraph</p>\n' +
+      '<h3>heading 2b</h3>\n' +
+      '<p>some paragraph</p>\n'
+      );
+  });
+});
diff --git a/aio/tools/transforms/target-package/index.js b/aio/tools/transforms/target-package/index.js
new file mode 100644
index 000000000000..edfb9c8d9a43
--- /dev/null
+++ b/aio/tools/transforms/target-package/index.js
@@ -0,0 +1,10 @@
+var Package = require('dgeni').Package;
+
+module.exports = new Package('target', [require('dgeni-packages/jsdoc')])
+
+                     .factory(require('./services/targetEnvironments'))
+                     .factory(require('./inline-tag-defs/target'))
+
+                     .config(function(inlineTagProcessor, targetInlineTagDef) {
+                       inlineTagProcessor.inlineTagDefinitions.push(targetInlineTagDef);
+                     });
diff --git a/aio/tools/transforms/target-package/inline-tag-defs/target.js b/aio/tools/transforms/target-package/inline-tag-defs/target.js
new file mode 100644
index 000000000000..bab4913018f4
--- /dev/null
+++ b/aio/tools/transforms/target-package/inline-tag-defs/target.js
@@ -0,0 +1,33 @@
+/**
+ * @dgService
+ * @description
+ * Process inline `target` block tags
+ * (of the form `{@target environment1 environment2}...{@endtarget}`),
+ * filtering out the blocks that do not match the active `targetEnvironments`.
+ */
+module.exports = function targetInlineTagDef(targetEnvironments, log, createDocMessage) {
+  return {
+    name: 'target',
+    end: 'endtarget',
+    handler: function(doc, tagName, tagDescription) {
+      var targets = tagDescription && tagDescription.tag.split(' ');
+      var hasTargets = targets && targets.length;
+
+      try {
+        // Return the contents of this block if any of the following is true:
+        // * it has no targets
+        // * there are no targets stored in the targetEnvironments service
+        // * the block's targets overlap with the active targets in the targetEnvironments service
+        if (!hasTargets || !targetEnvironments.hasActive() ||
+            targetEnvironments.someActive(targets)) {
+          return tagDescription.content;
+        }
+      } catch (x) {
+        log.error(createDocMessage('Error processing target inline tag def - ' + x.message, doc));
+      }
+
+      // Otherwise return an empty string
+      return '';
+    }
+  };
+};
\ No newline at end of file
diff --git a/aio/tools/transforms/target-package/inline-tag-defs/target.spec.js b/aio/tools/transforms/target-package/inline-tag-defs/target.spec.js
new file mode 100644
index 000000000000..e01bf14ace12
--- /dev/null
+++ b/aio/tools/transforms/target-package/inline-tag-defs/target.spec.js
@@ -0,0 +1,40 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('target inline-tag-def', function() {
+  var dgeni, injector, targetInlineTagDef;
+
+  beforeEach(function() {
+    dgeni = new Dgeni([testPackage('target-package', true)]);
+    injector = dgeni.configureInjector();
+    targetInlineTagDef = injector.get('targetInlineTagDef');
+  });
+
+
+  it('should filter out content that does not match the targetEnvironments', function() {
+
+    var doc = {};
+
+    var targetEnvironments = injector.get('targetEnvironments');
+    targetEnvironments.addAllowed('js', true);
+    targetEnvironments.addAllowed('es6', true);
+    targetEnvironments.addAllowed('ts', false);
+
+    var result = targetInlineTagDef.handler(doc, 'target', {tag: 'es6 ts', content: 'abc'});
+    expect(result).toEqual('abc');
+
+    result = targetInlineTagDef.handler(doc, 'target', {tag: 'ts', content: 'xyz'});
+    expect(result).toEqual('');
+  });
+
+
+  it('should not filter anything if there are no doc nor global target environments', function() {
+    var doc = {};
+
+    var result = targetInlineTagDef.handler(doc, 'target', {tag: 'es6 ts', content: 'abc'});
+    expect(result).toEqual('abc');
+
+    result = targetInlineTagDef.handler(doc, 'target', {tag: 'ts', content: 'xyz'});
+    expect(result).toEqual('xyz');
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/target-package/services/targetEnvironments.js b/aio/tools/transforms/target-package/services/targetEnvironments.js
new file mode 100644
index 000000000000..18376561d859
--- /dev/null
+++ b/aio/tools/transforms/target-package/services/targetEnvironments.js
@@ -0,0 +1,51 @@
+module.exports = function targetEnvironments() {
+  var _targets = Object.create(null);
+  var _activeCount = 0;
+
+  var checkAllowed = function(target) {
+    if (!(target in _targets)) {
+      throw new Error(
+          'Error accessing target "' + target + '". It is not in the list of allowed targets: ' +
+          Object.keys(_targets));
+    }
+  };
+
+  var updateActiveCount = function() {
+    _activeCount = 0;
+    for (let target in _targets) {
+      if (_targets[target]) _activeCount++;
+    }
+  };
+
+  return {
+    addAllowed: function(target, isActive) {
+      _targets[target] = !!isActive;
+      updateActiveCount();
+    },
+    removeAllowed: function(target) {
+      delete _targets[target];
+      updateActiveCount();
+    },
+    activate: function(target) {
+      checkAllowed(target);
+      _targets[target] = true;
+      updateActiveCount();
+    },
+    deactivate: function(target) {
+      checkAllowed(target);
+      _targets[target] = false;
+      updateActiveCount();
+    },
+    isActive: function(target) {
+      checkAllowed(target);
+      return _targets[target];
+    },
+    hasActive: function() { return _activeCount > 0; },
+    someActive: function(targets) {
+      for (var i = 0, ii = targets.length; i < ii; i++) {
+        if (this.isActive(targets[i])) return true;
+      }
+      return false;
+    }
+  };
+};
diff --git a/aio/tools/transforms/target-package/services/targetEnvironments.spec.js b/aio/tools/transforms/target-package/services/targetEnvironments.spec.js
new file mode 100644
index 000000000000..3f7d7bdfa1cd
--- /dev/null
+++ b/aio/tools/transforms/target-package/services/targetEnvironments.spec.js
@@ -0,0 +1,108 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('target inline-tag-def', function() {
+  var dgeni, injector, te;
+
+  beforeEach(function() {
+    dgeni = new Dgeni([testPackage('target-package', true)]);
+    injector = dgeni.configureInjector();
+    te = injector.get('targetEnvironments');
+  });
+
+  describe('addAllowed', function() {
+    it('should store the target and whether it is active', function() {
+      te.addAllowed('a', true);
+      te.addAllowed('b', false);
+      te.addAllowed('c');
+      expect(te.isActive('a')).toBe(true);
+      expect(te.isActive('b')).toBe(false);
+      expect(te.isActive('c')).toBe(false);
+    });
+  });
+
+  describe('removeAllowed', function() {
+    it('should disallow the target', function() {
+      te.addAllowed('a');
+      te.addAllowed('b');
+      te.removeAllowed('b');
+      expect(te.isActive('a')).toBe(false);
+      expect(function() {
+        te.isActive('b');
+      }).toThrowError('Error accessing target "b". It is not in the list of allowed targets: a');
+    });
+  });
+
+  describe('activate', function() {
+    it('should active an already allowed target', function() {
+      te.addAllowed('a', true);
+      te.addAllowed('b', false);
+      te.addAllowed('c');
+
+      te.activate('a');
+      te.activate('b');
+      te.activate('c');
+      expect(te.isActive('a')).toBe(true);
+      expect(te.isActive('b')).toBe(true);
+      expect(te.isActive('c')).toBe(true);
+    });
+  });
+
+  describe('deactivate', function() {
+    it('should deactive an already allowed target', function() {
+      te.addAllowed('a', true);
+      te.addAllowed('b', false);
+      te.addAllowed('c');
+
+      te.deactivate('a');
+      te.deactivate('b');
+      te.deactivate('c');
+      expect(te.isActive('a')).toBe(false);
+      expect(te.isActive('b')).toBe(false);
+      expect(te.isActive('c')).toBe(false);
+    });
+  });
+
+  describe('isActive', function() {
+    it('should return true if the item is allowed and active', function() {
+      te.addAllowed('a', true);
+      te.addAllowed('b', false);
+
+      expect(te.isActive('a')).toBe(true);
+      expect(te.isActive('b')).toBe(false);
+    });
+  });
+
+  describe('hasActive', function() {
+    it('should return true if there are any active targets', function() {
+      te.addAllowed('a', true);
+      te.addAllowed('b', false);
+      expect(te.hasActive()).toBe(true);
+
+      te.deactivate('a');
+      expect(te.hasActive()).toBe(false);
+
+      te.activate('b');
+      expect(te.hasActive()).toBe(true);
+    });
+  });
+
+  describe('someActive', function() {
+    it('should return true if the array of targets passed are all allowed and at least on is active',
+       function() {
+         te.addAllowed('a', true);
+         te.addAllowed('b', false);
+         te.addAllowed('c');
+
+         expect(te.someActive(['a'])).toBe(true);
+         expect(te.someActive(['b'])).toBe(false);
+         expect(te.someActive(['a', 'b'])).toBe(true);
+         expect(te.someActive(['b', 'c'])).toBe(false);
+         expect(te.someActive([])).toBe(false);
+
+         expect(function() { te.someActive('d'); })
+             .toThrowError(
+                 'Error accessing target "d". It is not in the list of allowed targets: a,b,c');
+       });
+  });
+});
diff --git a/aio/tools/transforms/templates/README.md b/aio/tools/transforms/templates/README.md
new file mode 100644
index 000000000000..39defb73bef4
--- /dev/null
+++ b/aio/tools/transforms/templates/README.md
@@ -0,0 +1,32 @@
+This folder contains the dgeni templates that are used to generate the API docs
+
+Generally there is a template for each docType. Templates can extend and/or include
+other templates. Templates can also import macros from other template files.
+
+# Template inheritance
+
+When extending a template, parent must declare blocks that can be overridden by the
+child. The template extension hierarchy looks like this (with declared blocks in parentheses):
+
+- layout/base.template.html (base)
+  - module.template.html
+  - layout/api-base.template.html (jumpNav, jumpNavLinks, whatItDoes, infoBar, securityConsiderations,
+    deprecationNotes, howToUse, details)
+    - class.template.html
+      - directive.template.html
+      - enum.template.html
+    - var.template.html
+      - const.template.html
+      - let.template.html
+    - decorator.template.html
+    - function.template.html
+    - interface.template.html
+      - type-alias.template.html
+    - pipe.template.html
+
+# Doc Properties
+
+It is useful to know what properties are available on each doc type when working with the templates.
+The `typescript` Dgeni package is now written in TypeScript and there is a class for each of the types of
+API document. See https://github.com/angular/dgeni-packages/tree/master/typescript/src/api-doc-types.
+This is a good place to go to see what properties you can use in the templates.
\ No newline at end of file
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 000000000000..8826e9b913c7
--- /dev/null
+++ b/aio/tools/transforms/templates/api/base.template.html
@@ -0,0 +1,29 @@
+{% import "lib/githubLinks.html" as github -%}
+{% set comma = joiner(',') %}
+{% set breadcrumbDelimiter = joiner('&gt;') %}
+<article>
+  {$ github.githubLinks(doc, versionInfo) $}
+  <div class="breadcrumb">
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org",
+        "@type": "BreadcrumbList",
+        "itemListElement": [
+          {%- for crumb in doc.breadCrumbs %}{$ comma() $}
+          { "@type": "ListItem", "position": {$ loop.index $}, "item": { "@id": "https://angular.io/{$ crumb.path $}", "name": "{$ crumb.text $}" } }{% endfor %}
+        ]
+      }
+    </script>
+    {% for crumb in doc.breadCrumbs %}{% if not loop.last %} {$ breadcrumbDelimiter() $} {% if crumb.path %}<a href="{$ crumb.path $}">{$ crumb.text $}</a>{% else %}{$ crumb.text $}{% endif %}{% endif %}{% endfor %}
+  </div>
+  <header class="api-header">
+    <h1>{$ doc.name $}</h1>
+    <label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
+    {% if doc.pipeOptions.pure === 'false' %}<label class="api-status-label impure-pipe">impure</label>{% endif %}
+  </header>
+  <aio-toc class="embedded"></aio-toc>
+
+  <div class="api-body">
+    {% block body %}{% endblock %}
+  </div>
+</article>
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 000000000000..45cd8ad08d45
--- /dev/null
+++ b/aio/tools/transforms/templates/api/class.template.html
@@ -0,0 +1,23 @@
+{% import "lib/memberHelpers.html" as memberHelpers -%}
+{% import "lib/descendants.html" as descendants -%}
+{% 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.renderProperties(doc.staticProperties, 'static-properties', 'static-property', 'Static properties') $}
+  {$ memberHelpers.renderMethodDetails(versionInfo, doc.staticMethods, 'static-methods', 'static-method', 'Static methods') $}
+  {% if doc.constructorDoc %}
+  <h2>Constructor</h2>
+  {$ memberHelpers.renderMethodDetail(versionInfo, doc.constructorDoc, 'constructor') $}{% endif %}
+
+  {$ memberHelpers.renderProperties(doc.properties, 'instance-properties', 'instance-property', 'Properties') $}
+
+  {$ memberHelpers.renderMethodDetails(versionInfo, doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
+
+  {% block annotations %}{% include "includes/annotations.html" %}{% endblock %}
+{% endblock %}
diff --git a/aio/tools/transforms/templates/api/const.template.html b/aio/tools/transforms/templates/api/const.template.html
new file mode 100644
index 000000000000..a208c7ca4f20
--- /dev/null
+++ b/aio/tools/transforms/templates/api/const.template.html
@@ -0,0 +1 @@
+{% extends 'var.template.html' -%}
\ No newline at end of file
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 000000000000..dca547549f0a
--- /dev/null
+++ b/aio/tools/transforms/templates/api/decorator.template.html
@@ -0,0 +1,49 @@
+{% import "lib/githubLinks.html" as github -%}
+{% 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" %}
+
+<section class="decorator-options">
+  <h2>Options</h2>
+  {% for option in doc.members %}
+  <a id="{$ option.anchor $}"></a>
+  <table class="is-full-width option-table">
+    <thead><tr><th>
+      <div class="with-github-links">
+        <h3>{$ option.name $}</h3>
+        {$ github.githubLinks(option, versionInfo) $}
+      </div>
+    </th></tr></thead>
+    <tbody>
+      <tr>
+        <td>
+          {% if option.shortDescription %}{$ option.shortDescription | marked $}{% endif %}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code-example language="ts" hideCopy="true" class="no-box api-heading">
+          {$ option.name $}: {$ option.type | escape $}
+          </code-example>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {%- if option.description %}
+          {$ option.description | marked({ h3: 'h4' }) $}
+          {% endif %}
+
+          {%- if option.usageNotes %}
+          {$ option.usageNotes | marked({ h3: 'h4' }) $}
+          {% endif %}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  {% endfor %}
+</section>
+{% 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 000000000000..79c9fc8752ea
--- /dev/null
+++ b/aio/tools/transforms/templates/api/directive.template.html
@@ -0,0 +1,13 @@
+{% 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 %}
+
+{% block annotations %}{% endblock %}
diff --git a/aio/tools/transforms/templates/api/enum.template.html b/aio/tools/transforms/templates/api/enum.template.html
new file mode 100644
index 000000000000..0f07f88cbc19
--- /dev/null
+++ b/aio/tools/transforms/templates/api/enum.template.html
@@ -0,0 +1,14 @@
+{% import "lib/memberHelpers.html" as memberHelpers -%}
+{% extends 'export-base.template.html' -%}
+
+{% block details %}
+<section class="enum-overview">
+<code-example language="ts" hideCopy="true">
+enum {$ doc.name $} {{$ memberHelpers.renderMembers(doc) $}
+}
+</code-example>
+</section>
+
+{% include "includes/description.html" %}
+{$ memberHelpers.renderProperties(doc.properties, 'members', 'member', 'Members', ['Member', 'Value']) $}
+{% endblock %}
\ No newline at end of file
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 000000000000..2d42946f4477
--- /dev/null
+++ b/aio/tools/transforms/templates/api/export-base.template.html
@@ -0,0 +1,11 @@
+{% extends 'base.template.html' -%}
+
+{% block body %}
+  <p class="short-description">{$ doc.shortDescription | marked $}</p>
+  {% include "includes/security-notes.html" %}
+  {% include "includes/deprecation.html" %}
+  {% block overview %}{% endblock %}
+  {% include "includes/see-also.html" %}
+  {% block details %}{% endblock %}
+  {% include "includes/usageNotes.html" %}
+{% 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 000000000000..c5707f1f2a1b
--- /dev/null
+++ b/aio/tools/transforms/templates/api/function.template.html
@@ -0,0 +1,33 @@
+{% import "lib/memberHelpers.html" as memberHelpers -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'export-base.template.html' -%}
+
+{% block overview %}
+{% if doc.overloads.length > 0 and doc.overloads < 3 -%}
+  {% for overload in doc.overloads -%}
+    {$ memberHelpers.renderOverloadInfo(overload, 'function-overload', doc) $}
+    {% if not loop.last %}<hr class="hr-margin fullwidth">{% endif %}
+  {% endfor -%}
+{% else %}
+  {$ memberHelpers.renderOverloadInfo(doc, 'function-overload', doc) $}
+{% endif %}
+{% endblock %}
+
+
+{% block details %}
+{% include "includes/description.html" %}
+{% if doc.overloads.length >= 3 %}
+<section class="overloads">
+  <h2>Overloads</h2>
+  <table>
+  {% for overload in doc.overloads %}
+  <tr>
+    <td>
+      {$ memberHelpers.renderOverloadInfo(overload, 'function-overload', doc) $}
+    </td>
+  </tr>
+  {% endfor %}
+  </table>
+</section>
+{% 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 000000000000..0f5ad4233256
--- /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 language="ts" hideCopy="true" class="no-box api-heading">@{$ decorator.name $}({$ 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 000000000000..d9064a17bf60
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/class-overview.html
@@ -0,0 +1,9 @@
+{% import "lib/memberHelpers.html" as memberHelper -%}
+
+<section class="{$ doc.docType $}-overview">
+<code-example language="ts" hideCopy="true" linenums="false">
+{% if doc.isAbstract %}abstract {% endif%}{$ doc.docType $} {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {{$ memberHelper.renderMembers(doc) $}
+}
+</code-example>
+{$ descendants.renderDescendants(doc, 'class', 'Subclasses') $}
+</section>
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 000000000000..657a4933d1ec
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/decorator-overview.html
@@ -0,0 +1,33 @@
+{% import "lib/descendants.html" as descendants -%}
+
+{% macro renderOptionsTable(doc) %}
+<table class="is-full-width list-table option-overview">
+  <thead>
+    <tr><th>Option</th><th>Description</th></tr>
+  </thead>
+  <tbody>
+  {%- for option in doc.members %}
+    <tr class="option">
+      <td>
+        <a class="code-anchor" href="{$ doc.path $}#{$ option.anchor | urlencode $}">
+          <code>{$ option.name $}</code>
+        </a>
+      </td>
+      <td>{$ option.shortDescription | marked $}</td>
+    </tr>
+    {% endfor -%}
+  </tbody>
+</table>
+
+{% for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
+<h3 class="no-toc">Inherited from <a class="code-anchor" href="{$ ancestor.doc.path $}">{$ ancestor.doc.name $}</a> decorator</h3>
+{$ renderOptionsTable(ancestor.doc) $}
+{% endif %}{% endfor %}
+{% endmacro %}
+
+{% if doc.members.length %}
+<section class="decorator-overview">
+  {$ renderOptionsTable(doc) $}
+  {$ descendants.renderDescendants(doc, 'decorator', 'Subclasses') $}
+</section>
+{% endif %}
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 000000000000..8286ab414806
--- /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 000000000000..d5545c06e70a
--- /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 000000000000..0946b1b0a6a4
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/directive-overview.html
@@ -0,0 +1,12 @@
+{% import "lib/memberHelpers.html" as memberHelper -%}
+
+<section class="{$ doc.docType $}-overview">
+<code-example language="ts" hideCopy="true">{% for decorator in doc.decorators %}
+@{$ decorator.name $}({$ decorator.arguments $}){% 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 | urlencode $}">{$ memberHelper.renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor %}{% endif -%}
+{$ memberHelper.renderMembers(doc) $}
+}
+</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 000000000000..a3fed860db1b
--- /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/info-bar.html b/aio/tools/transforms/templates/api/includes/info-bar.html
new file mode 100644
index 000000000000..5a30c525bada
--- /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 000000000000..7b2b8d6b063a
--- /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">
+<code-example language="ts" hideCopy="true">
+interface {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {{$ memberHelper.renderMembers(doc) $}
+}
+</code-example>
+{$ descendants.renderDescendants(doc, 'interface', 'Child interfaces') $}
+{$ descendants.renderDescendants(doc, 'class', 'Class implementations') $}
+</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 000000000000..9aa301e44d18
--- /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 language="ts" 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/pipe-overview.html b/aio/tools/transforms/templates/api/includes/pipe-overview.html
new file mode 100644
index 000000000000..ec822379dd6d
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/pipe-overview.html
@@ -0,0 +1,21 @@
+{% import "lib/memberHelpers.html" as memberHelpers -%}
+{% import "lib/paramList.html" as params -%}
+
+<section class="{$ doc.docType $}-overview">
+  <code-example hideCopy="true" class="no-box api-heading">{{ {$ doc.valueParam.name $}_expression | <span class="kwd nocode">{$ doc.pipeName $}</span>
+    {%- for param in doc.pipeParams %}
+      {%- if param.isOptional or param.defaultValue !== undefined %} [{% endif %} : {$ param.name $}
+    {%- endfor %}
+    {%- for param in doc.pipeParams %}
+      {%- if param.isOptional or param.defaultValue !== undefined %} ]{% endif %}
+    {%- endfor %} }}</code-example>
+
+  {% if doc.valueParam.type %}
+  <h2>Input value</h2>
+  {$ params.renderParameters([doc.valueParam], 'pipe-parameters', 'pipe-parameter', true) $}
+  {% endif %}
+  {% if doc.pipeParams.length %}
+  <h2>Parameters</h2>
+  {$ params.renderParameters(doc.pipeParams, 'pipe-parameters', 'pipe-parameter', true) $}
+  {% endif %}
+</section>
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 000000000000..ff13159b9da9
--- /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/see-also.html b/aio/tools/transforms/templates/api/includes/see-also.html
new file mode 100644
index 000000000000..5d37c3340f82
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/see-also.html
@@ -0,0 +1,9 @@
+{%- if doc.see.length %}
+<section class="see-also">
+  <h2>See also</h2>
+  <ul>
+  {% for see in doc.see %}
+    <li>{$ see | marked $}</li>{% endfor %}
+  </ul>
+</section>
+{% endif %}
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 000000000000..0e14513b3711
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/selectors.html
@@ -0,0 +1,9 @@
+{%- if doc.selector %}
+<section class="selectors">
+  <h2>Selectors</h2>
+  <code-example hideCopy="true" class="no-box api-heading selector">
+  {%- for selector in doc.selector.split(',') %}
+  {$ selector $}{% endfor %}
+  </code-example>
+</section>
+{% endif %}
diff --git a/aio/tools/transforms/templates/api/includes/usageNotes.html b/aio/tools/transforms/templates/api/includes/usageNotes.html
new file mode 100644
index 000000000000..7b5b0b20eadb
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/usageNotes.html
@@ -0,0 +1,6 @@
+{% if doc.usageNotes %}
+<section class="usage-notes">
+  <h2>Usage notes</h2>
+  {$ doc.usageNotes | marked $}
+</section>
+{% endif %}
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 000000000000..79fb8c5c1272
--- /dev/null
+++ b/aio/tools/transforms/templates/api/interface.template.html
@@ -0,0 +1,11 @@
+{% import "lib/paramList.html" as params -%}
+{% import "lib/memberHelpers.html" as memberHelper -%}
+{% import "lib/descendants.html" as descendants -%}
+{% extends 'export-base.template.html' -%}
+
+{% block overview %}{% include "includes/interface-overview.html" %}{% endblock %}
+{% block details %}
+  {% include "includes/description.html" %}
+  {$ memberHelper.renderProperties(doc.properties, 'instance-properties', 'instance-property', 'Properties') $}
+  {$ memberHelper.renderMethodDetails(versionInfo, doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
+{% endblock %}
diff --git a/aio/tools/transforms/templates/api/let.template.html b/aio/tools/transforms/templates/api/let.template.html
new file mode 100644
index 000000000000..a208c7ca4f20
--- /dev/null
+++ b/aio/tools/transforms/templates/api/let.template.html
@@ -0,0 +1 @@
+{% extends 'var.template.html' -%}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/lib/descendants.html b/aio/tools/transforms/templates/api/lib/descendants.html
new file mode 100644
index 000000000000..73b097a1a9e8
--- /dev/null
+++ b/aio/tools/transforms/templates/api/lib/descendants.html
@@ -0,0 +1,22 @@
+{% macro renderDescendantList(descendants, docType, recursed) %}
+{% if descendants.length %}
+<ul>
+  {% for descendant in descendants %}
+    <li>
+      <code>{$ descendant.name $}</code>
+      {$ renderDescendantList(descendant.descendants | filterByPropertyValue('docType', docType), docType, recursed) $}
+    </li>
+  {% endfor %}
+</ul>
+{% endif %}
+{% endmacro -%}
+
+{%- macro renderDescendants(doc, docType, title='', recursed=true) %}
+  {% set descendants = doc.descendants | filterByPropertyValue('docType', docType) %}
+  {% if descendants.length %}
+  <div class="descendants {$ docType $}">
+    {% if title %}<h2>{$ title $}</h2>{% endif %}
+    {$ renderDescendantList(descendants, docType, recursed) $}
+  </div>
+  {% endif %}
+{% endmacro %}
\ No newline at end of file
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 000000000000..937f02b891eb
--- /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/tools/transforms/templates/api/lib/githubLinks.html b/aio/tools/transforms/templates/api/lib/githubLinks.html
new file mode 100644
index 000000000000..f99b37543b66
--- /dev/null
+++ b/aio/tools/transforms/templates/api/lib/githubLinks.html
@@ -0,0 +1,19 @@
+{% macro githubViewHref(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.realProjectRelativePath or doc.fileInfo.relativePath $}#L{$ doc.startingLine + 1 $}-L{$ doc.endingLine + 1 $}
+{%- endmacro -%}
+
+
+{% macro githubEditHref(doc, versionInfo) -%}
+https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/edit/master/packages/{$ doc.fileInfo.realProjectRelativePath or doc.fileInfo.relativePath $}?message=docs(
+  {%- if doc.moduleDoc %}{$ doc.moduleDoc.id.split('/')[0] $}
+  {%- elseif doc.docType === 'package' %}{$ doc.id.split('/')[0] $}
+  {%- else %}...{%- endif -%}
+)%3A%20describe%20your%20change...#L{$ doc.startingLine + 1 $}-L{$ doc.endingLine + 1 $}
+{%- endmacro -%}
+
+{% macro githubLinks(doc, versionInfo) -%}
+<div class="github-links">
+  <a href="{$ githubEditHref(doc, versionInfo) $}" aria-label="Suggest Edits" title="Suggest Edits"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a>
+  <a href="{$ githubViewHref(doc, versionInfo) $}" aria-label="View Source" title="View Source"><i class="material-icons" aria-hidden="true" role="img">code</i></a>
+</div>
+{%- endmacro -%}
\ No newline at end of file
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 000000000000..0a8fca6a07b9
--- /dev/null
+++ b/aio/tools/transforms/templates/api/lib/memberHelpers.html
@@ -0,0 +1,186 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+
+{%- macro renderHeritage(exportDoc) -%}
+  {%- if exportDoc.extendsClauses.length %} extends {% for clause in exportDoc.extendsClauses -%}
+  <a class="code-anchor" href="{$ clause.doc.path $}">{$ clause.text $}</a>{% if not loop.last %}, {% endif -%}
+  {% endfor %}{% endif %}
+  {%- if exportDoc.implementsClauses.length %} implements {% for clause in exportDoc.implementsClauses -%}
+  <a class="code-anchor" href="{$ clause.doc.path $}">{$ clause.text $}</a>{% if not loop.last %}, {% endif -%}
+  {% endfor %}{% endif %}
+{%- endmacro -%}
+
+{%- macro renderMembers(doc) -%}
+  {%- for member in doc.staticProperties %}{% if not member.internal %}
+  <a class="code-anchor" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+  {% for member in doc.staticMethods %}{% if not member.internal %}
+  <a class="code-anchor" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+  {% if doc.constructorDoc and not doc.constructorDoc.internal %}
+  <a class="code-anchor" href="{$ doc.path $}#{$ doc.constructorDoc.anchor | urlencode $}">{$ renderMemberSyntax(doc.constructorDoc, 1) $}</a>{% endif -%}
+  {% for member in doc.properties %}{% if not member.internal %}
+  <a class="code-anchor" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+  {% for member in doc.methods %}{% if not member.internal %}
+  <a class="code-anchor" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+
+  {%- for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
+
+  // inherited from <a class="code-anchor" href="{$ ancestor.doc.path $}">{$ ancestor.doc.id $}</a>{$ renderMembers(ancestor.doc) $}{% endif %}{% endfor -%}
+{%- endmacro -%}
+
+{%- macro renderMemberSyntax(member, truncateLines) -%}
+    {%- if member.accessibility !== 'public' %}{$ member.accessibility $} {% endif -%}
+    {%- if member.isAbstract %}abstract {% endif -%}
+    {%- if member.isStatic %}static {% endif -%}
+    {%- if (member.isGetAccessor or member.isReadonly) and not member.isSetAccessor %}get {% endif -%}
+    {%- if member.isSetAccessor and not member.isGetAccessor %}set {% endif -%}
+    {$ member.name $}{$ member.typeParameters | escape $}{% if not member.isGetAccessor %}{$ params.paramList(member.parameters, truncateLines) | trim $}{% endif %}
+    {%- if member.isOptional  %}?{% endif -%}
+    {$ params.returnType(member.type) | trim | truncateCode(truncateLines) $}
+{%- endmacro -%}
+
+{%- macro renderOverloadInfo(overload, cssClass, method) -%}
+
+{% if overload.shortDescription and (overload.shortDescription != method.shortDescription) %}
+<div class="short-description">
+  {$ overload.shortDescription | marked $}
+</div>{% endif %}
+
+<code-example language="ts" hideCopy="true" linenums="false" class="no-box api-heading">{$ renderMemberSyntax(overload) $}</code-example>
+
+<h4 class="no-anchor">Parameters</h4>
+{$ params.renderParameters(overload.parameterDocs, cssClass + '-parameters', cssClass + '-parameter') $}
+
+{% if overload.type or overload.returns.type %}
+<h4 class="no-anchor">Returns</h4>
+{% marked %}`{$ (overload.type or overload.returns.type) $}`{% if overload.returns %}: {$ overload.returns.description $}{% endif %}{% endmarked %}
+{% endif %}
+
+
+{% if overload.throws.length %}
+<h4 class="no-anchor">Throws</h4>
+{% for error in overload.throws %}
+{% marked %}`{$ (error.typeList or 'Error') $}` {$ error.description $}{% endmarked %}
+{% endfor %}
+{% endif %}
+
+{% if overload.description and (overload.description != method.description) -%}
+<div class="description">
+  {$ overload.description | marked $}
+</div>
+{%- endif %}
+{%- endmacro -%}
+
+{%- macro renderMethodDetail(versionInfo, method, cssClass) -%}
+<a id="{$ method.anchor $}"></a>
+<table class="is-full-width method-table {$ cssClass $}">
+  {% if method.name !== 'constructor' %}<thead><tr><th>
+    <div class="with-github-links">
+      <h3>
+        {% if method.isCallMember %}<i>call signature</i>
+        {% elseif method.isNewMember %}<i>construct signature</i>
+        {% else %}{$ method.name $}()
+        {% endif %}
+      </h3>
+      {$ github.githubLinks(method, versionInfo) $}
+    </div>
+  </th></tr></thead>{% endif %}
+  <tbody>
+    {% if method.shortDescription %}<tr>
+      <td class="short-description">
+        {$ method.shortDescription | marked $}
+      </td>
+    </tr>{% endif %}
+  {% if method.overloads.length == 0 %}
+    <tr>
+      <td>
+        {$ renderOverloadInfo(method, cssClass + '-overload', method) $}
+      </td>
+    </tr>
+  {% elseif method.overloads.length < 3 -%}
+    {% for overload in method.overloads -%}
+    <tr>
+      <td>
+        {$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
+      </td>
+    </tr>
+    {% endfor -%}
+  {% else -%}
+    <tr>
+      <td>
+        <details class="overloads">
+          <summary><h4 class="no-anchor">{$ method.overloads.length $} overloads...</h4></summary>
+          <div class="detail-contents">
+              {% for overload in method.overloads %}
+                {$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
+                {% if not loop.last %}<hr class="hr-margin fullwidth">{% endif %}
+              {% endfor %}
+          </div>
+        </details>
+      </td>
+    </tr>
+  {% endif %}
+
+  {% if method.description -%}
+    <tr>
+      <td class="description">
+        {$ method.description | marked({ h3: 'h4' }) $}
+      </td>
+    </tr>
+  {%- endif %}
+
+  {% if method.usageNotes -%}
+    <tr>
+      <td class="usage-notes">
+        {$ method.usageNotes | marked({ h3: 'h4' }) $}
+      </td>
+    </tr>
+  {%- endif %}
+    </tbody>
+</table>
+{% endmacro -%}
+
+{%- macro renderMethodDetails(versionInfo, methods, containerClass, itemClass, headingText) -%}
+{% set nonInternalMethods = methods | filterByPropertyValue('internal', undefined) %}
+{% if nonInternalMethods.length %}
+<section class="{$ containerClass $}">
+  <h2>{$ headingText $}</h2>
+  {% for member in nonInternalMethods %}
+    {$ renderMethodDetail(versionInfo, member, itemClass) $}
+  {% endfor %}
+</section>
+{% endif %}
+{%- endmacro -%}
+
+
+{%- macro renderProperties(properties, containerClass, propertyClass, headingText, headings) -%}
+{% set nonInternalProperties = properties | filterByPropertyValue('internal', undefined) %}
+{% set hasTypes = properties | hasValues('type') %}
+{% if nonInternalProperties.length -%}
+<section class="{$ containerClass $}">
+  <h2>{$ headingText $}</h2>
+  <table class="is-full-width list-table property-table">
+    <thead>
+      <tr>
+        <th>{$ headings[0] or 'Property' $}</th>
+        {% if hasTypes %}<th>{$ headings[1] or 'Type' $}</th>{% endif %}
+        <th>{$ headings[2] or 'Description' $}</th>
+      </tr>
+    </thead>
+    <tbody>
+    {% for property in nonInternalProperties %}
+      <tr class="{$ propertyClass $}">
+        <td><a id="{$ property.anchor $}"></a>{$ property.name $}</td>
+        {% if hasTypes %}<td><label class="property-type-label"><code>{$ property.type | escape $}</code></label></td>{% endif %}
+        <td>
+          {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}<span class='read-only-property'>Read-only.</span>{% endif %}
+          {% if property.shortDescription %}{$ property.shortDescription | marked $}{% endif %}
+          {$ (property.description or property.constructorParamDoc.description) | marked $}
+          {% if property.constructorParamDoc %} <span class='from-constructor'>Declared in constructor.</span>{% endif %}
+        </td>
+    </tr>
+    {% endfor %}
+    </tbody>
+  </table>
+</section>
+{%- endif -%}
+{%- endmacro -%}
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 000000000000..8c8e3c98494e
--- /dev/null
+++ b/aio/tools/transforms/templates/api/lib/paramList.html
@@ -0,0 +1,37 @@
+{% 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 -%}
+
+{%- macro renderParameters(parameters, containerClass, parameterClass, showType) -%}
+{%- if parameters.length -%}
+<table class="is-full-width list-table parameters-table {$ containerClass $}">
+  <tbody>
+  {% for parameter in parameters %}
+    <tr class="{$ parameterClass $}">
+      <td class="param-name"><a id="{$ parameter.anchor $}"></a>{$ parameter.name $}</td>
+      {% if showType %}<td class="param-type"><code>{$ parameter.type $}</code></td>{% endif %}
+      <td class="param-description">
+      {% marked %}
+      {% if (parameter.shortDescription | trim) or (parameter.description | trim) %}{$ parameter.shortDescription + '\n\n' + parameter.description $}
+      {% elseif not showType and parameter.type %}<p>Type: <code>{$ parameter.type $}</code>.</p>
+      {% endif %}
+
+      {% if parameter.isOptional or parameter.defaultValue !== undefined %}Optional. Default is `{$ parameter.defaultValue === undefined and 'undefined' or parameter.defaultValue $}`.{% endif %}
+      {% endmarked %}
+      </td>
+    </tr>{% endfor %}
+  </tbody>
+</table>
+{%- else -%}
+<p>There are no parameters.</p>
+{%- endif -%}
+{%- endmacro -%}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/package.template.html b/aio/tools/transforms/templates/api/package.template.html
new file mode 100644
index 000000000000..568125c505ba
--- /dev/null
+++ b/aio/tools/transforms/templates/api/package.template.html
@@ -0,0 +1,41 @@
+{% extends 'base.template.html' -%}
+
+{% macro listItems(items, title, overridePath) %}
+  {% if items.length %}
+  <section class="export-list">
+    <h3>{$ title $}</h3>
+    <table class="is-full-width list-table">
+      {% for item in items %}
+      <tr>
+        <td><code class="code-anchor">
+          <a href="{$ overridePath or item.path $}">{$ item.name $}</a></code></td>
+        <td>{% if item.shortDescription %}{$ item.shortDescription | marked $}{% endif %}</td>
+      </tr>
+      {% endfor %}
+    </table>
+  </section>
+  {% endif %}
+{% endmacro %}
+
+{% block body -%}
+  {% include "includes/deprecation.html" %}
+  {$ doc.shortDescription | marked $}
+  {% if doc.description %}{$ doc.description | marked $}{% endif %}
+
+  {% include "includes/see-also.html" %}
+
+  {% if doc.isPrimaryPackage %}
+  <h2>Entry points</h2>
+  {$ listItems([doc.packageInfo.primary], 'Primary', '#primary-entry-point-exports') $}
+  {$ listItems(doc.packageInfo.secondary, 'Secondary') $}
+  {% endif %}
+
+  <h2>{% if doc.isPrimaryPackage %}Primary entry{% else %}Entry{% endif %} point exports</h2>
+  {$ listItems(doc.classes, 'Classes') $}
+  {$ listItems(doc.decorators, 'Decorators') $}
+  {$ listItems(doc.functions, 'Functions') $}
+  {$ listItems(doc.structures, 'Structures') $}
+  {$ listItems(doc.directives, 'Directives') $}
+  {$ listItems(doc.pipes, 'Pipes') $}
+  {$ listItems(doc.types, 'Types') $}
+{%- 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 000000000000..f4ad4d77d356
--- /dev/null
+++ b/aio/tools/transforms/templates/api/pipe.template.html
@@ -0,0 +1,8 @@
+{% extends 'export-base.template.html' -%}
+
+{% block overview %}
+{% include "includes/pipe-overview.html" %}
+{% endblock %}
+{% 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 000000000000..0f223318df29
--- /dev/null
+++ b/aio/tools/transforms/templates/api/type-alias.template.html
@@ -0,0 +1,13 @@
+{% extends 'export-base.template.html' %}
+
+{% block overview %}
+  <section class="{$ doc.docType $}-overview">
+    <code-example language="ts" hideCopy="true">
+    type {$ doc.name $}{$ doc.typeParameters | escape $}{% if doc.typeDefinition %} = {$ doc.typeDefinition | escape $}{% endif %};
+    </code-example>
+  </section>
+{% endblock %}
+
+{% block details %}
+  {% include "includes/description.html" %}
+{% endblock %}
diff --git a/aio/tools/transforms/templates/api/value-module.template.html b/aio/tools/transforms/templates/api/value-module.template.html
new file mode 100644
index 000000000000..0d57fd28af10
--- /dev/null
+++ b/aio/tools/transforms/templates/api/value-module.template.html
@@ -0,0 +1 @@
+{% extends 'interface.template.html' %}
\ No newline at end of file
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 000000000000..5375b8c11787
--- /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.type | escape) 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 000000000000..a9216df1df6d
--- /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/tools/transforms/templates/data-module.template.js b/aio/tools/transforms/templates/data-module.template.js
new file mode 100644
index 000000000000..5efe2868079f
--- /dev/null
+++ b/aio/tools/transforms/templates/data-module.template.js
@@ -0,0 +1,3 @@
+/* tslint:disable quotemark */
+/* TODO: rework this so that it has single quotes */
+export const {$ doc.serviceName $} = {$ doc.value | json $};
diff --git a/aio/tools/transforms/templates/example-region.template.html b/aio/tools/transforms/templates/example-region.template.html
new file mode 100644
index 000000000000..b1fdd4b2a757
--- /dev/null
+++ b/aio/tools/transforms/templates/example-region.template.html
@@ -0,0 +1 @@
+{$ doc.contents | escape $}
diff --git a/aio/tools/transforms/templates/json-doc.template.json b/aio/tools/transforms/templates/json-doc.template.json
new file mode 100644
index 000000000000..3e7f09635414
--- /dev/null
+++ b/aio/tools/transforms/templates/json-doc.template.json
@@ -0,0 +1 @@
+{$ doc.data | json $}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/overview-dump.template.html b/aio/tools/transforms/templates/overview-dump.template.html
new file mode 100644
index 000000000000..14039af66729
--- /dev/null
+++ b/aio/tools/transforms/templates/overview-dump.template.html
@@ -0,0 +1,110 @@
+{% import "api/lib/githubLinks.html" as github -%}
+{% import "api/lib/memberHelpers.html" as members -%}
+{% macro goToCode(doc) %}<a href="{$ github.githubViewHref(doc, versionInfo) $}" class="go-to-code" title="Go to source code"><i class="material-icons" aria-hidden="true" role="img">code</i></a>{% endmacro %}
+{% macro label(test, class, text) %}{% if test %}<label class="{$ class $}">{$ text $}</label>{% endif %}{% endmacro %}
+{% macro renderLabels(doc) -%}
+  {$ label(doc.notYetDocumented, 'no-doc', 'UNDOCUMENTED') $}
+  {%- for tag in doc.tags.tags %}{$ label(tag.tagDef.deprecated, 'deprecated', '@' + tag.tagDef.name + ' deprecated') $}{% endfor %}
+{% endmacro %}
+{% macro renderMember(member) -%}
+  <div class="member">{$ goToCode(member) $}
+  <h4><code>{$ members.renderMemberSyntax(member, 1) $}</code></h4>
+    {$ renderLabels(member) $}
+  </div>
+{% endmacro -%}
+
+<!DOCTYPE html>
+<html>
+<head>
+  <title></title>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <style>
+    body {
+      margin: 0 50px;
+    }
+    details {
+      margin: 10px;
+      padding: 0 10px;
+      border: solid black 1px;
+    }
+    details details {
+      border: none;
+      margin: 0;
+    }
+
+    .member:nth-child(odd) {
+      background-color: #eee;
+    }
+    h2, h3, h4 {
+      display: inline-block;
+      margin: 0;
+    }
+    h3 {
+      padding-left: 15px;
+    }
+    h4 {
+      padding: 10px 0 0 30px;
+    }
+    div {
+      position: relative;
+    }
+
+    label {
+      border-radius: 4px;
+      padding: 4px 8px;
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin: 0 8px;
+      font-weight: bold;
+      font-family: Arial, Helvetica, sans-serif;
+    }
+
+    .no-doc {
+      background-color: red;
+    }
+
+    .deprecated {
+      background-color: orange;
+      color: black;
+    }
+
+    a.go-to-code {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+    }
+  </style>
+</head>
+<body>
+
+
+<h1>Documentation Status Report</h1>
+
+{% for module in doc.modules %}
+<details>
+  <summary><h2><code>{$ module.id $}{%- if module.public %} (public){% endif %}</code></h2></summary>
+
+  {% for export in module.exports %}
+  <div class="export">{$ goToCode(export) $}
+    <details>
+      <summary><h3><code>{$ export.docType $} {$ export.name $}</code></h3>{$ renderLabels(export) $}</summary>
+
+      {%- for member in export.staticProperties %}{% if not member.internal %}
+      {$ renderMember(member) $}</a>{% endif %}{% endfor -%}
+      {% for member in export.staticMethods %}{% if not member.internal %}
+      {$ renderMember(member) $}</a>{% endif %}{% endfor -%}
+      {% if export.constructorDoc and not export.constructorexport.internal %}
+      {$ renderMember(export.constructorDoc) $}</a>{% endif -%}
+      {% for member in export.properties %}{% if not member.internal %}
+      {$ renderMember(member) $}</a>{% endif %}{% endfor -%}
+      {% for member in export.methods %}{% if not member.internal %}
+      {$ renderMember(member) $}</a>{% endif %}{% endfor -%}
+
+    </details>
+  </div>
+  {% endfor %}
+</details>
+{% endfor %}
+</body>
+</html>
diff --git a/aio/tools/transforms/templates/sitemap.template.xml b/aio/tools/transforms/templates/sitemap.template.xml
new file mode 100644
index 000000000000..009dd5d66d4c
--- /dev/null
+++ b/aio/tools/transforms/templates/sitemap.template.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  {%- for url in doc.urls %}
+  <url>
+    <loc>https://angular.io/{$ url $}</loc>
+  </url>{% endfor %}
+</urlset>
\ No newline at end of file
diff --git a/aio/tools/transforms/test.js b/aio/tools/transforms/test.js
new file mode 100644
index 000000000000..48967ddd4591
--- /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/tools/tslint.json b/aio/tools/tslint.json
new file mode 100644
index 000000000000..dc43816374ca
--- /dev/null
+++ b/aio/tools/tslint.json
@@ -0,0 +1,88 @@
+{
+    "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": [
+        true
+      ],
+      "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"
+      ],
+
+      "import-destructuring-spacing": true
+    }
+  }
diff --git a/aio/tsconfig.json b/aio/tsconfig.json
new file mode 100644
index 000000000000..3ad01dc727a1
--- /dev/null
+++ b/aio/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": false,
+    // disabled because this is on by default in tsc 2.7 breaking our codebase - we need to refactor
+    "strictPropertyInitialization": false,
+    // disabled because of https://github.com/angular/angular/issues/22877
+    "skipLibCheck": true,
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noUnusedLocals": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2016",
+      "dom"
+    ]
+  },
+  "exclude": [
+    "content",
+    "tools",
+    "aio-builds-setup",
+    "node_modules",
+    "scripts"
+  ]
+}
diff --git a/aio/tslint.json b/aio/tslint.json
new file mode 100644
index 000000000000..693598c51181
--- /dev/null
+++ b/aio/tslint.json
@@ -0,0 +1,115 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer",
+    "node_modules/vrsource-tslint-rules/rules"
+  ],
+  "rules": {
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": true,
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "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-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [true, "ignore-params"],
+    "no-jasmine-focus": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": false,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "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"
+      }
+    ],
+    "unified-signatures": true,
+    "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-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}
diff --git a/aio/yarn.lock b/aio/yarn.lock
new file mode 100644
index 000000000000..32589bffcbc5
--- /dev/null
+++ b/aio/yarn.lock
@@ -0,0 +1,11478 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular-devkit/architect@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.6.0.tgz#622a933337c946ef85d646545cc4244272ccb402"
+  dependencies:
+    "@angular-devkit/core" "0.6.0"
+    rxjs "^6.0.0"
+
+"@angular-devkit/build-angular@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-0.6.0.tgz#f5757f80fc402458e6b5eae1578bbc2a1af44ebe"
+  dependencies:
+    "@angular-devkit/architect" "0.6.0"
+    "@angular-devkit/build-optimizer" "0.6.0"
+    "@angular-devkit/core" "0.6.0"
+    "@ngtools/webpack" "6.0.0"
+    ajv "~6.4.0"
+    autoprefixer "^8.1.0"
+    cache-loader "^1.2.2"
+    chalk "~2.2.2"
+    circular-dependency-plugin "^5.0.2"
+    clean-css "^4.1.11"
+    copy-webpack-plugin "^4.5.1"
+    file-loader "^1.1.11"
+    glob "^7.0.3"
+    html-webpack-plugin "^3.0.6"
+    istanbul "^0.4.5"
+    istanbul-instrumenter-loader "^3.0.1"
+    karma-source-map-support "^1.2.0"
+    less "^3.0.2"
+    less-loader "^4.1.0"
+    license-webpack-plugin "^1.3.1"
+    lodash "^4.17.4"
+    memory-fs "^0.4.1"
+    mini-css-extract-plugin "~0.4.0"
+    minimatch "^3.0.4"
+    node-sass "^4.8.3"
+    opn "^5.1.0"
+    parse5 "^4.0.0"
+    portfinder "^1.0.13"
+    postcss "^6.0.19"
+    postcss-import "^11.1.0"
+    postcss-loader "^2.1.4"
+    postcss-url "^7.3.1"
+    raw-loader "^0.5.1"
+    resolve "^1.5.0"
+    rxjs "^6.0.0"
+    sass-loader "^7.0.1"
+    silent-error "^1.1.0"
+    source-map-support "^0.5.0"
+    stats-webpack-plugin "^0.6.2"
+    style-loader "^0.21.0"
+    stylus "^0.54.5"
+    stylus-loader "^3.0.2"
+    tree-kill "^1.2.0"
+    uglifyjs-webpack-plugin "^1.2.5"
+    url-loader "^1.0.1"
+    webpack "~4.6.0"
+    webpack-dev-middleware "^3.1.3"
+    webpack-dev-server "^3.1.4"
+    webpack-merge "^4.1.2"
+    webpack-sources "^1.1.0"
+    webpack-subresource-integrity "^1.1.0-rc.4"
+
+"@angular-devkit/build-optimizer@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.6.0.tgz#150a76155b473dea17327a176d18245a2da1c13e"
+  dependencies:
+    loader-utils "^1.1.0"
+    source-map "^0.5.6"
+    typescript "~2.7.2"
+    webpack-sources "^1.1.0"
+
+"@angular-devkit/core@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-0.6.0.tgz#d1a7275ff0f93de5cf007c4a549d1ebd00776fd0"
+  dependencies:
+    ajv "~6.4.0"
+    chokidar "^2.0.3"
+    rxjs "^6.0.0"
+    source-map "^0.5.6"
+
+"@angular-devkit/schematics@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-0.6.0.tgz#0117dc7d5905b053df4f2918e2e073efd1091f5c"
+  dependencies:
+    "@angular-devkit/core" "0.6.0"
+    rxjs "^6.0.0"
+
+"@angular/animations@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-6.0.0.tgz#cfc825dbfdf33bf3bf75962d1e12495aed5e3c32"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/cdk@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-6.0.0.tgz#0e1736eca8900ce1c4e66699d09e91d4ce151f56"
+  dependencies:
+    tslib "^1.7.1"
+
+"@angular/cli@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-6.0.0.tgz#346b356775ddf8cdb8a9a5095b0663878eca3486"
+  dependencies:
+    "@angular-devkit/architect" "0.6.0"
+    "@angular-devkit/core" "0.6.0"
+    "@angular-devkit/schematics" "0.6.0"
+    "@schematics/angular" "0.6.0"
+    "@schematics/update" "0.6.0"
+    opn "~5.1.0"
+    resolve "^1.1.7"
+    rxjs "^6.0.0"
+    semver "^5.1.0"
+    silent-error "^1.0.0"
+    symbol-observable "^1.2.0"
+    yargs-parser "^10.0.0"
+
+"@angular/common@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-6.0.0.tgz#ca3b6b6b96837fe048861da897c31991aa04954f"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-6.0.0.tgz#be50277faaa5ac08f3002c2c8cb8c39d220c76d5"
+  dependencies:
+    chokidar "^1.4.2"
+    minimist "^1.2.0"
+    reflect-metadata "^0.1.2"
+    tsickle "^0.27.2"
+
+"@angular/compiler@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-6.0.0.tgz#9092a0f02f33dd1108276ab93cc48142e36a1e95"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-6.0.0.tgz#785cc8a37b7fb784a6b7dcbd0984abb4f10e5dfe"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/elements@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/elements/-/elements-6.0.0.tgz#271392b64f097cdf3b3d86b7204f5df4c8814d2d"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/forms@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-6.0.0.tgz#436e2df39dc57db124da5a5c02bc63909fdf7046"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/http@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/http/-/http-6.0.0.tgz#f409e35cd2f4990b43a37beab915ffdcd9c7c992"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/language-service@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-6.0.0.tgz#85bf577fd7f45eff13128d4f5f0125078d610aec"
+
+"@angular/material@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-6.0.0.tgz#9704ced8ba2eca59b04c6c6ed032a1f36f685667"
+  dependencies:
+    tslib "^1.7.1"
+
+"@angular/platform-browser-dynamic@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.0.tgz#66a34b65136446cb3ec39362fd6d2dbb5482ba70"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-6.0.0.tgz#848b687ea46786483fddcdbbbd17b29c7adcc768"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-server@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-6.0.0.tgz#482878cc538a80caa3962e9376e4225b20c2a4bd"
+  dependencies:
+    domino "^2.0.1"
+    tslib "^1.9.0"
+    xhr2 "^0.1.4"
+
+"@angular/router@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-6.0.0.tgz#09a5c6f6220084c3575df81e8b36cbe9fff10d1f"
+  dependencies:
+    tslib "^1.9.0"
+
+"@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"
+
+"@google-cloud/common@^0.13.0":
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/@google-cloud/common/-/common-0.13.6.tgz#a9d8e137bc429a44aba9689fe6a0e4331784f853"
+  dependencies:
+    array-uniq "^1.0.3"
+    arrify "^1.0.1"
+    concat-stream "^1.6.0"
+    create-error-class "^3.0.2"
+    duplexify "^3.5.0"
+    ent "^2.2.0"
+    extend "^3.0.0"
+    google-auto-auth "^0.7.1"
+    is "^3.2.0"
+    log-driver "^1.2.5"
+    methmeth "^1.1.0"
+    modelo "^4.2.0"
+    request "^2.79.0"
+    retry-request "^3.0.0"
+    split-array-stream "^1.0.0"
+    stream-events "^1.0.1"
+    string-format-obj "^1.1.0"
+    through2 "^2.0.3"
+
+"@google-cloud/functions-emulator@^1.0.0-alpha.23":
+  version "1.0.0-alpha.25"
+  resolved "https://registry.yarnpkg.com/@google-cloud/functions-emulator/-/functions-emulator-1.0.0-alpha.25.tgz#b443e148244f3887633f1fc3678d03735b2a9587"
+  dependencies:
+    "@google-cloud/storage" "1.2.1"
+    adm-zip "0.4.7"
+    ajv "5.2.2"
+    body-parser "1.17.2"
+    cli-table2 "0.2.0"
+    colors "1.1.2"
+    configstore "3.1.1"
+    express "4.15.4"
+    google-proto-files "0.12.1"
+    googleapis "20.1.0"
+    got "7.1.0"
+    grpc "1.4.1"
+    http-proxy "1.16.2"
+    lodash "4.17.4"
+    prompt "1.0.0"
+    rimraf "2.6.1"
+    semver "5.4.1"
+    serializerr "1.0.3"
+    tmp "0.0.33"
+    uuid "3.1.0"
+    winston "2.3.1"
+    yargs "8.0.2"
+
+"@google-cloud/storage@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@google-cloud/storage/-/storage-1.2.1.tgz#a0f2e20871b862f0ea64a90ac48fc08845cf9505"
+  dependencies:
+    "@google-cloud/common" "^0.13.0"
+    arrify "^1.0.0"
+    async "^2.0.1"
+    concat-stream "^1.5.0"
+    create-error-class "^3.0.2"
+    duplexify "^3.5.0"
+    extend "^3.0.0"
+    gcs-resumable-upload "^0.8.0"
+    hash-stream-validation "^0.2.1"
+    is "^3.0.1"
+    mime-types "^2.0.8"
+    once "^1.3.1"
+    pumpify "^1.3.3"
+    stream-events "^1.0.1"
+    string-format-obj "^1.0.0"
+    through2 "^2.0.0"
+
+"@ngtools/webpack@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-6.0.0.tgz#e160cccd85823e9b01ee7bc5156a02510a323a34"
+  dependencies:
+    "@angular-devkit/core" "0.6.0"
+    tree-kill "^1.0.0"
+    webpack-sources "^1.1.0"
+
+"@schematics/angular@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-0.6.0.tgz#d7589c50f80ef089f7fba526ed9becefb187b6a2"
+  dependencies:
+    "@angular-devkit/core" "0.6.0"
+    "@angular-devkit/schematics" "0.6.0"
+    typescript ">=2.6.2 <2.8"
+
+"@schematics/update@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@schematics/update/-/update-0.6.0.tgz#1a5f75a5a02de85cc4b4bd4fa68dd53ddc95ba30"
+  dependencies:
+    "@angular-devkit/core" "0.6.0"
+    "@angular-devkit/schematics" "0.6.0"
+    npm-registry-client "^8.5.1"
+    rxjs "^6.0.0"
+    semver "^5.3.0"
+    semver-intersect "^1.1.2"
+
+"@sindresorhus/is@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
+
+"@types/core-js@^0.9.41":
+  version "0.9.43"
+  resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-0.9.43.tgz#65d646c5e8c0cd1bdee37065799f9d3d48748253"
+
+"@types/jasmine@*":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.6.2.tgz#6e6d4cb183cd55c7a1ad6270bced10fdd5367a3c"
+
+"@types/jasmine@^2.5.52":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.6.0.tgz#997b41a27752b4850af2683bc4a8d8222c25bd02"
+
+"@types/jasminewd2@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/jasminewd2/-/jasminewd2-2.0.3.tgz#0d2886b0cbdae4c0eeba55e30792f584bf040a95"
+  dependencies:
+    "@types/jasmine" "*"
+
+"@types/mkdirp@^0.3.29":
+  version "0.3.29"
+  resolved "https://registry.yarnpkg.com/@types/mkdirp/-/mkdirp-0.3.29.tgz#7f2ad7ec55f914482fc9b1ec4bb1ae6028d46066"
+
+"@types/node@*":
+  version "8.0.46"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.46.tgz#6e1766b2d0ed06631d5b5f87bb8e72c8dbb6888e"
+
+"@types/node@6.0.66":
+  version "6.0.66"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.66.tgz#5680b74a6135d33d4c00447e7c3dc691a4601625"
+
+"@types/node@^6.0.46", "@types/node@~6.0.60":
+  version "6.0.90"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.90.tgz#0ed74833fa1b73dcdb9409dcb1c97ec0a8b13b02"
+
+"@types/q@^0.0.32":
+  version "0.0.32"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-0.0.32.tgz#bd284e57c84f1325da702babfc82a5328190c0c5"
+
+"@types/rimraf@^0.0.28":
+  version "0.0.28"
+  resolved "https://registry.yarnpkg.com/@types/rimraf/-/rimraf-0.0.28.tgz#5562519bc7963caca8abf7f128cae3b594d41d06"
+
+"@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"
+
+"@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" "*"
+
+"@webcomponents/custom-elements@^1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@webcomponents/custom-elements/-/custom-elements-1.0.8.tgz#b7b8ef7248f7681d1ad4286a0ada5fe3c2bc7228"
+
+JSONStream@^1.2.1:
+  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.4"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+abbrev@1.0.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+
+accepts@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+accepts@~1.3.3, accepts@~1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  dependencies:
+    mime-types "~2.1.16"
+    negotiator "0.6.1"
+
+accepts@~1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
+  dependencies:
+    mime-types "~2.1.18"
+    negotiator "0.6.1"
+
+acorn-dynamic-import@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz#901ceee4c7faaef7e07ad2a47e890675da50a278"
+  dependencies:
+    acorn "^5.0.0"
+
+acorn-globals@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+  dependencies:
+    acorn "^4.0.4"
+
+acorn-jsx@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  dependencies:
+    acorn "^3.0.4"
+
+acorn@^3.0.4:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+acorn@^4.0.4:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+acorn@^5.0.0:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
+
+acorn@^5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7"
+
+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:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
+
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+
+agent-base@2:
+  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"
+
+ajv-keywords@^1.0.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
+
+ajv-keywords@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.1.0.tgz#ac2b27939c543e95d2c06e7f7f5c27be4aa543be"
+
+ajv@5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    json-schema-traverse "^0.3.0"
+    json-stable-stringify "^1.0.1"
+
+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.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+ajv@^5.1.0:
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.5.tgz#b637234d3e2675eb5f79fc652242a853a48cb49f"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    json-schema-traverse "^0.3.0"
+    json-stable-stringify "^1.0.1"
+
+ajv@^6.1.0, ajv@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.4.0.tgz#d3aff78e9277549771daf0164cff48482b754fc6"
+  dependencies:
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+    uri-js "^3.0.2"
+
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+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"
+
+ansi-align@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-1.1.0.tgz#2f0c1658829739add5ebb15e6b0c6e3423f016ba"
+  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.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"
+
+ansi-escapes@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
+
+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-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
+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@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
+
+any-observable@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.2.0.tgz#c67870058003579009083f54ac0abafb5c33d242"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+app-root-path@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.0.1.tgz#cd62dcf8e4fd5a417efc664d2e5b10653c651b46"
+
+append-transform@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  dependencies:
+    default-require-extensions "^1.0.0"
+
+aproba@^1.0.3, aproba@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+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"
+  dependencies:
+    async "~1.4.2"
+    buffer-crc32 "~0.2.1"
+    glob "~5.0.0"
+    lazystream "~0.1.0"
+    lodash "~3.10.0"
+    readable-stream "~1.0.26"
+    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.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.6"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+arguejs@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/arguejs/-/arguejs-0.2.3.tgz#b6f939f5fe0e3cd1f3f93e2aa9262424bf312af7"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+
+arr-flatten@^1.0.1, arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+
+array-differ@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031"
+
+array-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+array-flatten@1.1.1, array-flatten@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-flatten@2.1.1, array-flatten@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
+
+array-includes@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.7.0"
+
+array-iterate@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-iterate/-/array-iterate-1.1.1.tgz#865bf7f8af39d6b0982c60902914ac76bc0108f6"
+
+array-slice@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1, array-uniq@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+
+arraybuffer.slice@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca"
+
+arrify@^1.0.0, arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+as-array@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/as-array/-/as-array-1.0.0.tgz#28a6eeeaa5729f1f4eca2047df5e9de1abda0ed1"
+  dependencies:
+    lodash.isarguments "2.4.x"
+    lodash.isobject "^2.4.1"
+    lodash.values "^2.4.1"
+
+as-array@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/as-array/-/as-array-2.0.0.tgz#4f04805d87f8fce8e511bc2108f8e5e3a287d547"
+
+asap@^2.0.3, asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
+ascli@~1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ascli/-/ascli-1.0.1.tgz#bcfa5974a62f18e81cabaeb49732ab4a88f906bc"
+  dependencies:
+    colour "~0.7.1"
+    optjs "~3.2.2"
+
+asn1.js@^4.0.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+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@^1.1.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+
+ast-types@0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.10.1.tgz#f52fca9715579a14f841d67d7f8d25432ab6a3dd"
+
+ast-types@0.11.3:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.3.tgz#c20757fe72ee71278ea0ff3d87e5c2ca30d9edf8"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-foreach@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+
+async@0.2.x:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
+async@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.0.tgz#ac3613b1da9bed1b47510bb4651b8931e47146c7"
+
+async@1.x, async@^1.3.0, async@^1.4.0, async@^1.5.0, async@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+async@^2.0.0, async@^2.0.1, async@^2.3.0, async@^2.4.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
+  dependencies:
+    lodash "^4.14.0"
+
+async@^2.1.4, async@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
+  dependencies:
+    lodash "^4.14.0"
+
+async@~0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.0.0.tgz#f8fc04ca3a13784ade9e1641af98578cfbd647a9"
+
+async@~1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.4.2.tgz#6c9edcb11ced4f0dd2f2d40db0d49a109c088aab"
+
+async@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.3.0.tgz#1013d1051047dd320fe24e494d5c66ecaf6147d9"
+  dependencies:
+    lodash "^4.14.0"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+atob@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.0.tgz#ab2b150e51d7b122b9efc8d7340c06b6c41076bc"
+
+autoprefixer@^8.1.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.2.0.tgz#1e49b611b31a5259b86b7a6b2b1b8faf091abe2a"
+  dependencies:
+    browserslist "^3.2.0"
+    caniuse-lite "^1.0.30000817"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.20"
+    postcss-value-parser "^3.2.3"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+axe-core@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-2.4.1.tgz#55b6ceaa847cb1eaef5d559b6c41035dc3e07dbf"
+
+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.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-core@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-generator "^6.26.0"
+    babel-helpers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-register "^6.26.0"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    convert-source-map "^1.5.0"
+    debug "^2.6.8"
+    json5 "^0.5.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    path-is-absolute "^1.0.1"
+    private "^0.1.7"
+    slash "^1.0.0"
+    source-map "^0.5.6"
+
+babel-generator@^6.18.0, babel-generator@^6.26.0:
+  version "6.26.1"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.7"
+    trim-right "^1.0.1"
+
+babel-helper-bindify-decorators@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.24.1.tgz#14c19e5f142d7b47f19a52431e52b1ccbc40a330"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-define-map@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz#a5f56dab41a25f97ecb498c7ebaca9819f95be5f"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-helper-explode-assignable-expression@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-explode-class@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-class/-/babel-helper-explode-class-6.24.1.tgz#7dc2a3910dee007056e1e31d640ced3d54eaa9eb"
+  dependencies:
+    babel-helper-bindify-decorators "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+
+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.24.1"
+
+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.24.1"
+
+babel-helper-regex@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz#325c59f902f82f24b74faceed0363954f6495e72"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-helper-remap-async-to-generator@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz#5ec581827ad723fecdd381f1c928390676e4551b"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-check-es2015-constants@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-syntax-async-functions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+
+babel-plugin-syntax-async-generators@^6.5.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"
+
+babel-plugin-syntax-class-constructor-call@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz#9cb9d39fe43c8600bec8146456ddcbd4e1a76416"
+
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+
+babel-plugin-syntax-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+
+babel-plugin-syntax-export-extensions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz#70a1484f0f9089a4e84ad44bac353c95b9b12721"
+
+babel-plugin-syntax-flow@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+
+babel-plugin-syntax-trailing-function-commas@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
+
+babel-plugin-transform-async-generator-functions@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.24.1.tgz#f058900145fd3e9907a6ddf28da59f215258a5db"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-generators "^6.5.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-async-to-generator@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-class-constructor-call@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-constructor-call/-/babel-plugin-transform-class-constructor-call-6.24.1.tgz#80dc285505ac067dcb8d6c65e2f6f11ab7765ef9"
+  dependencies:
+    babel-plugin-syntax-class-constructor-call "^6.18.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-class-properties@^6.24.1:
+  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.24.1"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-decorators@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz#788013d8f8c6b5222bdf7b344390dfd77569e24d"
+  dependencies:
+    babel-helper-explode-class "^6.24.1"
+    babel-plugin-syntax-decorators "^6.13.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-arrow-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+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.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.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+
+babel-plugin-transform-es2015-destructuring@^6.22.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+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.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.22.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+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.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz#0d8394029b7dc6abe1a97ef181e00758dd2e5d8a"
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+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.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+
+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.24.1"
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+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.24.1"
+
+babel-plugin-transform-es2015-spread@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.22.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+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.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-export-extensions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-export-extensions/-/babel-plugin-transform-export-extensions-6.22.0.tgz#53738b47e75e8218589eea946cbbd39109bbe653"
+  dependencies:
+    babel-plugin-syntax-export-extensions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.8.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-object-rest-spread@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
+
+babel-plugin-transform-regenerator@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
+  dependencies:
+    regenerator-transform "^0.10.0"
+
+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.24.1"
+
+babel-preset-es2015@^6.9.0:
+  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.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.24.1"
+    babel-plugin-transform-es2015-for-of "^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.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.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.24.1"
+    babel-plugin-transform-regenerator "^6.24.1"
+
+babel-preset-stage-1@^6.5.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-1/-/babel-preset-stage-1-6.24.1.tgz#7692cd7dcd6849907e6ae4a0a85589cfb9e2bfb0"
+  dependencies:
+    babel-plugin-transform-class-constructor-call "^6.24.1"
+    babel-plugin-transform-export-extensions "^6.22.0"
+    babel-preset-stage-2 "^6.24.1"
+
+babel-preset-stage-2@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz#d9e2960fb3d71187f0e64eec62bc07767219bdc1"
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-plugin-transform-class-properties "^6.24.1"
+    babel-plugin-transform-decorators "^6.24.1"
+    babel-preset-stage-3 "^6.24.1"
+
+babel-preset-stage-3@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-3/-/babel-preset-stage-3-6.24.1.tgz#836ada0a9e7a7fa37cb138fb9326f87934a48395"
+  dependencies:
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-generator-functions "^6.24.1"
+    babel-plugin-transform-async-to-generator "^6.24.1"
+    babel-plugin-transform-exponentiation-operator "^6.24.1"
+    babel-plugin-transform-object-rest-spread "^6.22.0"
+
+babel-register@^6.26.0, babel-register@^6.9.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  dependencies:
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
+
+babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
+babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.17.3, babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+
+babylon@^7.0.0-beta.30:
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+bail@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.2.tgz#f7d6c1731630a9f9f0d4d35ed1f962e2074a1764"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base64-arraybuffer@0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+
+base64-js@^1.0.2, base64-js@^1.1.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.3.tgz#fb13668233d9614cf5fb4bce95a9ba4096cdf801"
+
+base64id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
+
+base64url@2.0.0, base64url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/base64url/-/base64url-2.0.0.tgz#eac16e03ea1438eff9423d69baa36262ed1f70bb"
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+basic-auth-connect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz#fdb0b43962ca7b40456a7c2bb48fe173da2d2122"
+
+basic-auth@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.0.tgz#015db3f353e02e56377755f962742e8981e7bbba"
+  dependencies:
+    safe-buffer "5.1.1"
+
+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"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+big.js@^3.1.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+
+binary-extensions@^1.0.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+
+binaryextensions@2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.1.1.tgz#3209a51ca4a4ad541a3b8d3d6a6d5b83a2485935"
+
+bl@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.1.tgz#cac328f7bee45730d404b692203fcb590e172d5e"
+  dependencies:
+    readable-stream "^2.0.5"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  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.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+
+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"
+
+body-parser@1.18.2, body-parser@^1.16.1:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.2.tgz#87678a19d84b47d859b83199bd59bce222b10454"
+  dependencies:
+    bytes "3.0.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.1"
+    http-errors "~1.6.2"
+    iconv-lite "0.4.19"
+    on-finished "~2.3.0"
+    qs "6.5.1"
+    raw-body "2.3.2"
+    type-is "~1.6.15"
+
+bonjour@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  dependencies:
+    array-flatten "^2.1.0"
+    deep-equal "^1.0.1"
+    dns-equal "^1.0.0"
+    dns-txt "^2.0.2"
+    multicast-dns "^6.0.1"
+    multicast-dns-service-types "^1.1.0"
+
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
+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"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+boxen@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-0.6.0.tgz#8364d4248ac34ff0ef1b2f2bf49a6c60ce0d81b6"
+  dependencies:
+    ansi-align "^1.1.0"
+    camelcase "^2.1.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"
+    widest-line "^1.0.0"
+
+boxen@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.2.2.tgz#3f1d4032c30ffea9d4b02c322eaf2ea741dcbce5"
+  dependencies:
+    ansi-align "^2.0.0"
+    camelcase "^4.0.0"
+    chalk "^2.0.1"
+    cli-boxes "^1.0.0"
+    string-width "^2.0.0"
+    term-size "^1.2.0"
+    widest-line "^1.0.0"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^0.1.2:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-0.1.5.tgz#c085711085291d8b75fdd74eab0f8597280711e6"
+  dependencies:
+    expand-range "^0.1.0"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+braces@^2.3.0, braces@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.1.tgz#7086c913b4e5a08dbe37ac0ee6a2500c4ba691bb"
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    kind-of "^6.0.2"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+brorand@^1.0.1:
+  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.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
+  dependencies:
+    buffer-xor "^1.0.3"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.3"
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+browserify-rsa@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  dependencies:
+    bn.js "^4.1.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  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"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.2"
+    elliptic "^6.0.0"
+    inherits "^2.0.1"
+    parse-asn1 "^5.0.0"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  dependencies:
+    pako "~1.0.5"
+
+browserslist@^3.2.0:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.4.tgz#fb9ad70fd09875137ae943a31ab815ed76896031"
+  dependencies:
+    caniuse-lite "^1.0.30000821"
+    electron-to-chromium "^1.3.41"
+
+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"
+
+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-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-1.0.0.tgz#59616b498304d556abd466966b22eeda3eca5fbe"
+
+buffer-indexof@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+
+buffer-xor@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+
+buffer@^4.3.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.0.0, builtin-modules@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+
+builtins@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
+
+bytebuffer@~5:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/bytebuffer/-/bytebuffer-5.0.1.tgz#582eea4b1a873b6d020a48d58df85f0bba6cfddd"
+  dependencies:
+    long "~3"
+
+bytes@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+
+cacache@^10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"
+  dependencies:
+    bluebird "^3.5.1"
+    chownr "^1.0.1"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    lru-cache "^4.1.1"
+    mississippi "^2.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.2"
+    ssri "^5.2.4"
+    unique-filename "^1.1.0"
+    y18n "^4.0.0"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+cache-loader@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-1.2.2.tgz#6d5c38ded959a09cc5d58190ab5af6f73bd353f5"
+  dependencies:
+    loader-utils "^1.1.0"
+    mkdirp "^0.5.1"
+    neo-async "^2.5.0"
+    schema-utils "^0.4.2"
+
+cacheable-request@^2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-2.1.4.tgz#0d808801b6342ad33c91df9d0b44dc09b91e5c3d"
+  dependencies:
+    clone-response "1.0.2"
+    get-stream "3.0.0"
+    http-cache-semantics "3.8.1"
+    keyv "3.0.0"
+    lowercase-keys "1.0.0"
+    normalize-url "2.0.1"
+    responselike "1.0.2"
+
+caller-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  dependencies:
+    callsites "^0.2.0"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+callsites@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
+
+camel-case@3.0.x, camel-case@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^2.0.0, camelcase@^2.0.1, camelcase@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+camelcase@^4.0.0, camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
+caniuse-lite@^1.0.30000817, caniuse-lite@^1.0.30000821:
+  version "1.0.30000824"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000824.tgz#de3bc1ba0bff4937302f8cb2a8632a8cc1c07f9a"
+
+canonical-path@0.0.2, canonical-path@^0.0.2, canonical-path@~0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/canonical-path/-/canonical-path-0.0.2.tgz#e31eb937a8c93ee2a01df1839794721902874574"
+
+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.9"
+  resolved "https://registry.yarnpkg.com/catharsis/-/catharsis-0.8.9.tgz#98cc890ca652dd2ef0e70b37925310ff9e90fc8b"
+  dependencies:
+    underscore-contrib "~0.3.0"
+
+ccount@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.2.tgz#53b6a2f815bb77b9c2871f7b9a72c3a25f1d8e89"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    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"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
+chalk@^2.3.0, chalk@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.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"
+
+chalk@~2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.2.2.tgz#4403f5cf18f35c05f51fbdf152bf588f956cf7cb"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
+change-case@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.0.0.tgz#6c9c8e35f8790870a82b6b0745be8c3cbef9b081"
+  dependencies:
+    camel-case "^3.0.0"
+    constant-case "^2.0.0"
+    dot-case "^2.1.0"
+    header-case "^1.0.0"
+    is-lower-case "^1.1.0"
+    is-upper-case "^1.1.0"
+    lower-case "^1.1.1"
+    lower-case-first "^1.0.0"
+    no-case "^2.2.0"
+    param-case "^2.1.0"
+    pascal-case "^2.0.0"
+    path-case "^2.1.0"
+    sentence-case "^2.1.0"
+    snake-case "^2.1.0"
+    swap-case "^1.1.0"
+    title-case "^2.1.0"
+    upper-case "^1.1.1"
+    upper-case-first "^1.1.0"
+
+char-spinner@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/char-spinner/-/char-spinner-1.0.1.tgz#e6ea67bd247e107112983b7ab0479ed362800081"
+
+character-entities-html4@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.1.tgz#359a2a4a0f7e29d3dc2ac99bdbe21ee39438ea50"
+
+character-entities-legacy@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.1.tgz#f40779df1a101872bb510a3d295e1fccf147202f"
+
+character-entities@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.1.tgz#f76871be5ef66ddb7f8f8e3478ecc374c27d6dca"
+
+character-reference-invalid@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.1.tgz#942835f750e4ec61a308e60c2ef8cc1011202efc"
+
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+
+"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.2, chokidar@^1.6.0:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.3.tgz#dcbd4f6cbb2a55b4799ba8a840ac527e5f4b1176"
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.0"
+    braces "^2.3.0"
+    glob-parent "^3.1.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^2.1.1"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+    upath "^1.0.0"
+  optionalDependencies:
+    fsevents "^1.1.2"
+
+chownr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
+
+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"
+
+chrome-launcher@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/chrome-launcher/-/chrome-launcher-0.8.0.tgz#5cdf3089015a441faeb36388489ab5494742f00f"
+  dependencies:
+    "@types/core-js" "^0.9.41"
+    "@types/mkdirp" "^0.3.29"
+    "@types/node" "6.0.66"
+    "@types/rimraf" "^0.0.28"
+    is-wsl "^1.1.0"
+    lighthouse-logger "^1.0.0"
+    mkdirp "0.5.1"
+    rimraf "^2.6.1"
+
+chrome-trace-event@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-0.1.2.tgz#90f36885d5345a50621332f0717b595883d5d982"
+
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+circular-dependency-plugin@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/circular-dependency-plugin/-/circular-dependency-plugin-5.0.2.tgz#da168c0b37e7b43563fb9f912c1c007c213389ef"
+
+circular-json@^0.3.1:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+
+cjson@^0.3.1:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/cjson/-/cjson-0.3.3.tgz#a92d9c786e5bf9b930806329ee05d5d3261b4afa"
+  dependencies:
+    json-parse-helpfulerror "^1.0.3"
+
+cjson@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cjson/-/cjson-0.5.0.tgz#a0f48601e016164dfb2c6d891e380c96cada9839"
+  dependencies:
+    json-parse-helpfulerror "^1.0.3"
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+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.1.x, clean-css@^4.1.11:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
+  dependencies:
+    source-map "0.5.x"
+
+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.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  dependencies:
+    restore-cursor "^1.0.1"
+
+cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  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-table2@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/cli-table2/-/cli-table2-0.2.0.tgz#2d1ef7f218a0e786e214540562d4bd177fe32d97"
+  dependencies:
+    lodash "^3.10.1"
+    string-width "^1.0.1"
+  optionalDependencies:
+    colors "^1.1.2"
+
+cli-table@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.1.tgz#f53b05266a8b1a0b934b3d0821e6e2dc5914ae23"
+  dependencies:
+    colors "1.0.3"
+
+cli-truncate@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
+  dependencies:
+    slice-ansi "0.0.4"
+    string-width "^1.0.1"
+
+cli-width@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.0.3, cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+cliui@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.0.0.tgz#743d4650e05f36d1ed2575b59638d87322bfbbcc"
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+    wrap-ansi "^2.0.0"
+
+clone-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+
+clone-deep@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-2.0.2.tgz#00db3a1e173656730d1188c3d6aced6d7ea97713"
+  dependencies:
+    for-own "^1.0.0"
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.0"
+    shallow-clone "^1.0.0"
+
+clone-response@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
+  dependencies:
+    mimic-response "^1.0.0"
+
+clone-stats@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
+
+clone-stats@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
+
+clone@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+
+cloneable-readable@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.1.2.tgz#d591dee4a8f8bc15da43ce97dceeba13d43e2a65"
+  dependencies:
+    inherits "^2.0.1"
+    process-nextick-args "^2.0.0"
+    readable-stream "^2.3.5"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+codelyzer@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/codelyzer/-/codelyzer-4.2.1.tgz#d56eaacefca7e8138aac0a630e484bdb09988544"
+  dependencies:
+    app-root-path "^2.0.1"
+    css-selector-tokenizer "^0.7.0"
+    cssauron "^1.4.0"
+    semver-dsl "^1.0.1"
+    source-map "^0.5.6"
+    sprintf-js "^1.0.3"
+
+coffee-script@^1.12.5:
+  version "1.12.7"
+  resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.7.tgz#c05dae0cb79591d05b3070a8433a98c9a89ccc53"
+
+collapse-white-space@^1.0.0, collapse-white-space@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-convert@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
+colors@1.0.3, colors@1.0.x:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+
+colors@1.1.2, colors@^1.1.0, 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"
+
+colour@~0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/colour/-/colour-0.7.1.tgz#9cb169917ec5d12c0736d3e8685746df1cadf778"
+
+combine-lists@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/combine-lists/-/combine-lists-1.0.1.tgz#458c07e09e0d900fc28b70a3fec2dacd1d2cb7f6"
+  dependencies:
+    lodash "^4.5.0"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+comma-separated-tokens@^1.0.0, comma-separated-tokens@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.4.tgz#72083e58d4a462f01866f6617f4d98a3cd3b8a46"
+  dependencies:
+    trim "0.0.1"
+
+commander@2.15.x, commander@^2.12.1, commander@^2.9.0, commander@~2.15.0:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
+
+commander@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+
+commander@^2.8.1, commander@~2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
+
+commander@~2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+
+compare-semver@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/compare-semver/-/compare-semver-1.1.0.tgz#7c0a79a27bb80b6c6994445f82958259d3d02153"
+  dependencies:
+    semver "^5.0.1"
+
+compare-versions@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.1.0.tgz#43310256a5c555aaed4193c04d8f154cf9c6efd5"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.1.2.tgz#296594f2753daa63996d2af08d15a95116c9aec3"
+
+component-emitter@1.2.1, component-emitter@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+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.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.2.2.tgz#524a9f10903f3a813389b0225d27c48bb751890f"
+  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"
+  dependencies:
+    buffer-crc32 "~0.2.1"
+    crc32-stream "~0.3.1"
+    node-int64 "~0.4.0"
+    readable-stream "~1.0.26"
+
+compressible@~2.0.11:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"
+  dependencies:
+    mime-db ">= 1.30.0 < 2"
+
+compressible@~2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.13.tgz#0d1020ab924b2fdb4d6279875c7d6daba6baa7a9"
+  dependencies:
+    mime-db ">= 1.33.0 < 2"
+
+compression@^1.5.2:
+  version "1.7.2"
+  resolved "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz#aaffbcd6aaf854b44ebb280353d5ad1651f59a69"
+  dependencies:
+    accepts "~1.3.4"
+    bytes "3.0.0"
+    compressible "~2.0.13"
+    debug "2.6.9"
+    on-headers "~1.0.1"
+    safe-buffer "5.1.1"
+    vary "~1.1.2"
+
+compression@^1.7.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.1.tgz#eff2603efc2e22cf86f35d2eb93589f9875373db"
+  dependencies:
+    accepts "~1.3.4"
+    bytes "3.0.0"
+    compressible "~2.0.11"
+    debug "2.6.9"
+    on-headers "~1.0.1"
+    safe-buffer "5.1.1"
+    vary "~1.1.2"
+
+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.7, concat-stream@^1.5.0, concat-stream@^1.5.2, concat-stream@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+concurrently@^3.4.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.5.0.tgz#8cf1b7707a6916a78a4ff5b77bb04dec54b379b2"
+  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@3.1.1, configstore@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90"
+  dependencies:
+    dot-prop "^4.1.0"
+    graceful-fs "^4.1.2"
+    make-dir "^1.0.0"
+    unique-string "^1.0.0"
+    write-file-atomic "^2.0.0"
+    xdg-basedir "^3.0.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"
+  dependencies:
+    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"
+
+configstore@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-2.1.0.tgz#737a3a7036e9886102aa6099e47bb33ab1aba1a1"
+  dependencies:
+    dot-prop "^3.0.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"
+
+connect-history-api-fallback@^1.3.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
+
+connect-query@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/connect-query/-/connect-query-1.0.0.tgz#de44f577209da2404d1fc04692d1a4118e582119"
+  dependencies:
+    qs "~6.4.0"
+
+connect@^3.6.0, connect@^3.6.2:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.5.tgz#fb8dde7ba0763877d0ec9df9dac0b4b40e72c7da"
+  dependencies:
+    debug "2.6.9"
+    finalhandler "1.0.6"
+    parseurl "~1.3.2"
+    utils-merge "1.0.1"
+
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  dependencies:
+    date-now "^0.1.4"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+constant-case@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-2.0.0.tgz#4175764d389d3fa9c8ecd29186ed6005243b6a46"
+  dependencies:
+    snake-case "^2.1.0"
+    upper-case "^1.1.1"
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+
+content-disposition@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+
+content-type-parser@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
+
+content-type@~1.0.2, content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+
+convert-source-map@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+
+copy-webpack-plugin@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.5.1.tgz#fc4f68f4add837cc5e13d111b20715793225d29c"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    globby "^7.1.1"
+    is-glob "^4.0.0"
+    loader-utils "^1.1.0"
+    minimatch "^3.0.4"
+    p-limit "^1.0.0"
+    serialize-javascript "^1.4.0"
+
+core-js@^2.2.0, core-js@^2.4.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
+
+core-js@^2.4.0, core-js@^2.5.0:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.5.tgz#b14dde936c640c0579a6b50cabcc132dd6127e3b"
+
+core-js@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.3.0.tgz#fab83fbb0b2d8dc85fa636c4b9d34c75420c6d65"
+
+core-util-is@1.0.2, 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.2.2"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
+  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"
+  dependencies:
+    buffer-crc32 "~0.2.1"
+    readable-stream "~1.0.24"
+
+crc@^3.4.4:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/crc/-/crc-3.5.0.tgz#98b8ba7d489665ba3979f59b21381374101a1964"
+
+create-ecdh@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-error-class@^3.0.0, create-error-class@^3.0.1, create-error-class@^3.0.2:
+  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"
+
+create-hash@^1.1.0, 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 "^2.0.0"
+    sha.js "^2.4.0"
+
+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"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cross-spawn@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cross-spawn@^5.0.1, 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"
+
+cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    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"
+  dependencies:
+    boom "2.x.x"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
+crypto-browserify@^3.11.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+    randomfill "^1.0.3"
+
+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-parse@1.7.x:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
+
+css-select@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
+css-selector-parser@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.3.0.tgz#5f1ad43e2d8eefbfdc304fcd39a521664943e3eb"
+
+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"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-what@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+
+cssauron@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/cssauron/-/cssauron-1.4.0.tgz#a6602dff7e04a8306dc0db9a551e92e8b5662ad8"
+  dependencies:
+    through X.X.X
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
+
+"cssstyle@>= 0.2.37 < 0.3.0":
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+  dependencies:
+    cssom "0.3.x"
+
+csv-streamify@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/csv-streamify/-/csv-streamify-3.0.4.tgz#4cb614c57e3f299cca17b63fdcb4ad167777f47a"
+  dependencies:
+    through2 "2.0.1"
+
+cuint@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+custom-event@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
+
+cycle@1.0.x:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/cycle/-/cycle-1.0.3.tgz#21e80b2be8580f98b468f379430662b046c34ad2"
+
+cyclist@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+
+d@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  dependencies:
+    es5-ext "^0.10.9"
+
+dargs@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dargs/-/dargs-5.1.0.tgz#ec7ea50c78564cd36c9d5ec18f66329fade27829"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-fns@^1.23.0, date-fns@^1.27.2:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+
+dateformat@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
+
+debug@*, debug@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
+debug@2, debug@2.6.9, debug@^2.1.1, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+debug@2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.3.3.tgz#40c453e67e6e13c901ddec317af8986cda9eff8c"
+  dependencies:
+    ms "0.7.2"
+
+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"
+
+debug@2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  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"
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+
+decompress-response@^3.2.0, decompress-response@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
+  dependencies:
+    mimic-response "^1.0.0"
+
+deep-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
+deep-equal@~0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-0.2.2.tgz#84b745896f34c684e98f2ce0e42abaf43bba017d"
+
+deep-extend@^0.4.0, deep-extend@~0.4.0:
+  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"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+default-require-extensions@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  dependencies:
+    strip-bom "^2.0.0"
+
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+del@^2.0.2, del@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+del@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+  dependencies:
+    globby "^6.1.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    p-map "^1.1.1"
+    pify "^3.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@1.1.1, depd@~1.1.0, depd@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+
+dependency-graph@~0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.4.1.tgz#302e58218d85c51a97638730dbf9b7d852a19693"
+
+des.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+destroy@^1.0.4, destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detab@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/detab/-/detab-2.0.1.tgz#531f5e326620e2fd4f03264a905fb3bcc8af4df4"
+  dependencies:
+    repeat-string "^1.5.4"
+
+detect-conflict@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/detect-conflict/-/detect-conflict-1.0.1.tgz#088657a66a961c05019db7c4230883b1c6b4176e"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+detect-node@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
+
+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.26.2:
+  version "0.26.2"
+  resolved "https://registry.yarnpkg.com/dgeni-packages/-/dgeni-packages-0.26.2.tgz#dac22d7e861d4d72ed42af5272714f42b6b5bf3d"
+  dependencies:
+    canonical-path "0.0.2"
+    catharsis "^0.8.1"
+    change-case "3.0.0"
+    dgeni "^0.4.9"
+    espree "^2.2.3"
+    estraverse "^4.1.0"
+    glob "^7.0.5"
+    htmlparser2 "^3.7.3"
+    lodash "^4.13.1"
+    marked "^0.3.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.1"
+    mkdirp-promise "^5.0.0"
+    node-html-encoder "0.0.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 "~2.7.1"
+    urlencode "^1.1.0"
+
+dgeni@^0.4.7, 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"
+
+didyoumean@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff"
+
+diff@^3.1.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
+
+diff@^3.2.0, diff@^3.3.1, diff@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+dir-glob@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
+dns-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+
+dns-packet@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
+  dependencies:
+    ip "^1.1.0"
+    safe-buffer "^5.0.1"
+
+dns-txt@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  dependencies:
+    buffer-indexof "^1.0.0"
+
+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"
+
+dom-converter@~0.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+  dependencies:
+    utila "~0.3"
+
+dom-serialize@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
+  dependencies:
+    custom-event "~1.0.0"
+    ent "~2.2.0"
+    extend "^3.0.0"
+    void-elements "^2.0.0"
+
+dom-serializer@0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  dependencies:
+    domelementtype "~1.1.1"
+    entities "~1.1.1"
+
+domain-browser@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+
+domelementtype@1, domelementtype@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
+
+domelementtype@~1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+
+domhandler@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
+  dependencies:
+    domelementtype "1"
+
+domhandler@^2.3.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
+  dependencies:
+    domelementtype "1"
+
+domino@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.0.1.tgz#9e1d63215d0fe8dcb8202bff07effa1a216db504"
+
+domutils@1.1:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+domutils@^1.5.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+dot-case@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.1.tgz#34dcf37f50a8e93c2b3bca8bb7fb9155c7da3bee"
+  dependencies:
+    no-case "^2.2.0"
+
+dot-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
+  dependencies:
+    is-obj "^1.0.0"
+
+dot-prop@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
+  dependencies:
+    is-obj "^1.0.0"
+
+duplexer2@^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"
+
+duplexer3@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
+
+duplexify@^3.1.2, duplexify@^3.2.0, duplexify@^3.5.0:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.1.tgz#4e1516be68838bc90a49994f0b39a6e5960befcd"
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+duplexify@^3.4.2:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.4.tgz#4bb46c1796eabebeec4ca9a2e66b808cb7a3d8b4"
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    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"
+  dependencies:
+    jsbn "~0.1.0"
+
+ecdsa-sig-formatter@1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.9.tgz#4bc926274ec3b5abb5016e7e1d60921ac262b2a1"
+  dependencies:
+    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"
+
+ejs@^2.3.1, ejs@^2.5.7:
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.8.tgz#2ab6954619f225e6193b7ac5f7c39c48fefe4380"
+
+electron-to-chromium@^1.3.41:
+  version "1.3.42"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.42.tgz#95c33bf01d0cc405556aec899fe61fd4d76ea0f9"
+
+elegant-spinner@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
+
+elliptic@^6.0.0:
+  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"
+
+"emoji-regex@>=6.0.0 <=6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.1.tgz#c6cd0ec1b0642e2a3c67a1137efc5e796da4f88e"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
+  dependencies:
+    once "^1.4.0"
+
+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"
+    debug "2.3.3"
+    engine.io-parser "1.3.2"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parsejson "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "1.1.2"
+    xmlhttprequest-ssl "1.5.3"
+    yeast "0.1.2"
+
+engine.io-parser@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-1.3.2.tgz#937b079f0007d0893ec56d46cb220b8cb435220a"
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "0.0.6"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.4"
+    has-binary "0.1.7"
+    wtf-8 "1.0.0"
+
+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.2"
+
+enhanced-resolve@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.0.0.tgz#e34a6eaa790f62fccd71d93959f56b2b432db10a"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    tapable "^1.0.0"
+
+ent@^2.2.0, ent@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
+
+entities@^1.1.1, entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
+envinfo@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-4.4.2.tgz#472c49f3a8b9bca73962641ce7cb692bf623cd1c"
+
+errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0, error-ex@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+error@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02"
+  dependencies:
+    string-template "~0.2.1"
+    xtend "~4.0.0"
+
+es-abstract@^1.5.1, es-abstract@^1.7.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.11.0.tgz#cce87d518f0496893b1a30cd8461835535480681"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+es-to-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.35"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.35.tgz#18ee858ce6a3c45c7d79e91c15fcca9ec568494f"
+  dependencies:
+    es6-iterator "~2.0.1"
+    es6-symbol "~3.1.1"
+
+es6-iterator@^2.0.1, es6-iterator@~2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
+es6-map@^0.1.3:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
+  dependencies:
+    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.0.2"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.0.2.tgz#010d5858423a5f118979665f46486a95c6ee2bb6"
+
+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:
+    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.1.1, es6-symbol@^3.1.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 "1"
+    es5-ext "~0.10.14"
+
+es6-weak-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
+  dependencies:
+    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"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+
+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"
+
+escodegen@1.8.x:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
+  dependencies:
+    esprima "^2.7.1"
+    estraverse "^1.9.1"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.2.0"
+
+escodegen@^1.6.1:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
+  dependencies:
+    esprima "^3.1.3"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.5.6"
+
+escope@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
+  dependencies:
+    es6-map "^0.1.3"
+    es6-weak-map "^2.0.1"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-plugin-jasmine@^2.2.0:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jasmine/-/eslint-plugin-jasmine-2.9.1.tgz#22e19a59f16f3a5f643a04aba04438d0e3047030"
+
+eslint-scope@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint@^3.19.0:
+  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.5.2"
+    debug "^2.1.1"
+    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"
+    glob "^7.0.3"
+    globals "^9.14.0"
+    ignore "^3.2.0"
+    imurmurhash "^0.1.4"
+    inquirer "^0.12.0"
+    is-my-json-valid "^2.10.0"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.5.1"
+    json-stable-stringify "^1.0.0"
+    levn "^0.3.0"
+    lodash "^4.0.0"
+    mkdirp "^0.5.0"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    path-is-inside "^1.0.1"
+    pluralize "^1.2.1"
+    progress "^1.1.8"
+    require-uncached "^1.0.2"
+    shelljs "^0.7.5"
+    strip-bom "^3.0.0"
+    strip-json-comments "~2.0.1"
+    table "^3.7.8"
+    text-table "~0.2.0"
+    user-home "^2.0.0"
+
+espree@^2.2.3:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-2.2.5.tgz#df691b9310889402aeb29cc066708c56690b854b"
+
+espree@^3.4.0:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.1.tgz#0c988b8ab46db53100a1954ae4ba995ddd27d87e"
+  dependencies:
+    acorn "^5.1.1"
+    acorn-jsx "^3.0.0"
+
+esprima@2.7.x, esprima@^2.7.1:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esprima@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+
+esprima@^4.0.0, esprima@~4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
+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.2.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.0.tgz#fa9568d98d3823f9a41d91e902dcab9ea6e5b163"
+  dependencies:
+    estraverse "^4.1.0"
+    object-assign "^4.0.1"
+
+estraverse@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
+
+estraverse@^4.0.0, estraverse@^4.1.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"
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+etag@~1.8.0, etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+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 "1"
+    es5-ext "~0.10.14"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+eventsource@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+  dependencies:
+    original ">=0.0.5"
+
+evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  dependencies:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit-code@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/exit-code/-/exit-code-1.0.2.tgz#ce165811c9f117af6a5f882940b96ae7f9aecc34"
+
+exit-hook@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-braces@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/expand-braces/-/expand-braces-0.1.2.tgz#488b1d1d2451cb3d3a6b192cfc030f44c5855fea"
+  dependencies:
+    array-slice "^0.2.3"
+    array-unique "^0.2.1"
+    braces "^0.1.2"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+expand-range@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-0.1.1.tgz#4cb8eda0993ca56fa4f41fc42f3cbb4ccadff044"
+  dependencies:
+    is-number "^0.1.1"
+    repeat-string "^0.2.2"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+expand-tilde@^2.0.0, expand-tilde@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+express@4.15.4:
+  version "4.15.4"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.15.4.tgz#032e2253489cf8fce02666beca3d11ed7a2daed1"
+  dependencies:
+    accepts "~1.3.3"
+    array-flatten "1.1.1"
+    content-disposition "0.5.2"
+    content-type "~1.0.2"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "2.6.8"
+    depd "~1.1.1"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.0"
+    finalhandler "~1.0.4"
+    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.5"
+    qs "6.5.0"
+    range-parser "~1.2.0"
+    send "0.15.4"
+    serve-static "1.12.4"
+    setprototypeof "1.0.3"
+    statuses "~1.3.1"
+    type-is "~1.6.15"
+    utils-merge "1.0.0"
+    vary "~1.1.1"
+
+express@^4.16.2:
+  version "4.16.3"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"
+  dependencies:
+    accepts "~1.3.5"
+    array-flatten "1.1.1"
+    body-parser "1.18.2"
+    content-disposition "0.5.2"
+    content-type "~1.0.4"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.1.1"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.3"
+    qs "6.5.1"
+    range-parser "~1.2.0"
+    safe-buffer "5.1.1"
+    send "0.16.2"
+    serve-static "1.13.2"
+    setprototypeof "1.1.0"
+    statuses "~1.4.0"
+    type-is "~1.6.16"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
+  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.4, external-editor@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
+  dependencies:
+    chardet "^0.4.0"
+    iconv-lite "^0.4.17"
+    tmp "^0.0.33"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extsprintf@1.3.0, extsprintf@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+eyes@0.1.x:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/eyes/-/eyes-0.1.8.tgz#62cf120234c683785d902348a800ef3e0cc20bc0"
+
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+
+fast-url-parser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fast-url-parser/-/fast-url-parser-1.1.3.tgz#f4af3ea9f34d8a271cf58ad2b3759f431f0b318d"
+  dependencies:
+    punycode "^1.3.2"
+
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
+faye-websocket@>=0.6.0, faye-websocket@~0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+faye-websocket@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+figures@^1.3.5, figures@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+file-entry-cache@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+file-loader@^1.1.11:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.4.5"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
+  dependencies:
+    glob "^7.0.3"
+    minimatch "^3.0.3"
+
+filesize@^3.1.3:
+  version "3.5.11"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+filled-array@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/filled-array/-/filled-array-1.1.0.tgz#c3c4f6c663b923459a9aa29912d2d031f1507f84"
+
+finalhandler@1.0.6, finalhandler@~1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.6.tgz#007aea33d1a4d3e42017f624848ad58d212f814f"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
+finalhandler@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.4.0"
+    unpipe "~1.0.0"
+
+find-cache-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  dependencies:
+    locate-path "^2.0.0"
+
+firebase-tools@^3.2.1:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/firebase-tools/-/firebase-tools-3.13.1.tgz#2ca82a5cdd5e887c5fe961cd8019e4a987625f5a"
+  dependencies:
+    JSONStream "^1.2.1"
+    archiver "^0.16.0"
+    chalk "^1.1.0"
+    cjson "^0.3.1"
+    cli-table "^0.3.1"
+    commander "^2.8.1"
+    configstore "^1.2.0"
+    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"
+    fs-extra "^0.23.1"
+    fstream-ignore "^1.0.5"
+    glob "^7.1.2"
+    google-auto-auth "^0.7.2"
+    inquirer "^0.12.0"
+    jsonschema "^1.0.2"
+    jsonwebtoken "^7.4.1"
+    lodash "^4.6.1"
+    open "^0.0.5"
+    ora "0.2.3"
+    portfinder "^0.4.0"
+    progress "^2.0.0"
+    request "^2.58.0"
+    rsvp "^3.0.18"
+    semver "^5.0.3"
+    superstatic "^5.0.1"
+    tar "^3.1.5"
+    tmp "0.0.27"
+    universal-analytics "^0.3.9"
+    update-notifier "^0.5.0"
+    user-home "^2.0.0"
+    uuid "^3.0.0"
+    winston "^1.0.1"
+  optionalDependencies:
+    "@google-cloud/functions-emulator" "^1.0.0-alpha.23"
+
+firebase@2.x.x:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/firebase/-/firebase-2.4.2.tgz#4e1119ec0396ca561d8a7acbff1630feac6c0a31"
+  dependencies:
+    faye-websocket ">=0.6.0"
+
+first-chunk-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-2.0.0.tgz#1bdecdb8e083c0664b91945581577a43a9f31d70"
+  dependencies:
+    readable-stream "^2.0.2"
+
+flat-arguments@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flat-arguments/-/flat-arguments-1.0.2.tgz#9baa780adf0501f282d726c9c6a038dba44ea76f"
+  dependencies:
+    array-flatten "^1.0.0"
+    as-array "^1.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isobject "^3.0.0"
+
+flat-cache@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.0.tgz#d3030b32b38154f4e3b7e9c709f490f7ef97c481"
+  dependencies:
+    circular-json "^0.3.1"
+    del "^2.0.2"
+    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"
+
+flow-parser@^0.*:
+  version "0.69.0"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.69.0.tgz#378b5128d6d0b554a8b2f16a4ca3e1ab9649f00e"
+
+flush-write-stream@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.4"
+
+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, for-in@^1.0.2:
+  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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    for-in "^1.0.1"
+
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  dependencies:
+    for-in "^1.0.1"
+
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+
+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.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"
+    mime-types "^2.1.12"
+
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+forwarded@~0.1.0, forwarded@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  dependencies:
+    map-cache "^0.2.2"
+
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+from2@^2.1.0, from2@^2.1.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
+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@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.23.1.tgz#6611dba6adf2ab8dc9c69fab37cddf8818157e3d"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+fs-extra@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+fs-extra@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-2.1.2.tgz#046c70163cef9aad46b0e4a7fa467fb22d71de35"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
+
+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.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.36"
+
+fsevents@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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"
+
+function-bind@^1.0.2, function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+gaze@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
+  dependencies:
+    globule "^1.0.0"
+
+gcp-metadata@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/gcp-metadata/-/gcp-metadata-0.3.1.tgz#313814456e7c3d0eeb8f8b084b33579e886f829a"
+  dependencies:
+    extend "^3.0.0"
+    retry-request "^3.0.0"
+
+gcs-resumable-upload@^0.8.0:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/gcs-resumable-upload/-/gcs-resumable-upload-0.8.2.tgz#37df02470430395a789a637e72cabc80677ae964"
+  dependencies:
+    buffer-equal "^1.0.0"
+    configstore "^3.0.0"
+    google-auto-auth "^0.7.1"
+    pumpify "^1.3.3"
+    request "^2.81.0"
+    stream-events "^1.0.1"
+    through2 "^2.0.0"
+
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+get-stream@3.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"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+gh-got@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gh-got/-/gh-got-6.0.0.tgz#d74353004c6ec466647520a10bd46f7299d268d0"
+  dependencies:
+    got "^7.0.0"
+    is-plain-obj "^1.1.0"
+
+github-slugger@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.2.0.tgz#8ada3286fd046d8951c3c952a8d7854cfd90fd9a"
+  dependencies:
+    emoji-regex ">=6.0.0 <=6.1.1"
+
+github-username@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/github-username/-/github-username-4.1.0.tgz#cbe280041883206da4212ae9e4b5f169c30bf417"
+  dependencies:
+    gh-got "^6.0.0"
+
+glob-all@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-all/-/glob-all-3.1.0.tgz#8913ddfb5ee1ac7812656241b03d5217c64b02ab"
+  dependencies:
+    glob "^7.0.5"
+    yargs "~1.2.6"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
+glob-slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/glob-slash/-/glob-slash-1.0.0.tgz#fe52efa433233f74a2fe64c7abb9bc848202ab95"
+
+glob-slasher@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/glob-slasher/-/glob-slasher-1.0.1.tgz#747a0e5bb222642ee10d3e05443e109493cb0f8e"
+  dependencies:
+    glob-slash "^1.0.0"
+    lodash.isobject "^2.4.1"
+    toxic "^1.0.0"
+
+glob@7.0.x:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^5.0.15, glob@~5.0.0:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1, glob@^7.1.2, 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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global-dirs@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.0.tgz#10d34039e0df04272e262cf24224f7209434df4f"
+  dependencies:
+    ini "^1.3.4"
+
+global-modules@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
+  dependencies:
+    global-prefix "^1.0.1"
+    is-windows "^1.0.1"
+    resolve-dir "^1.0.0"
+
+global-prefix@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
+
+globals@^9.14.0, globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globby@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+globule@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
+  dependencies:
+    glob "~7.1.1"
+    lodash "~4.17.4"
+    minimatch "~3.0.2"
+
+google-auth-library@^0.10.0, google-auth-library@~0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/google-auth-library/-/google-auth-library-0.10.0.tgz#6e15babee85fd1dd14d8d128a295b6838d52136e"
+  dependencies:
+    gtoken "^1.2.1"
+    jws "^3.1.4"
+    lodash.noop "^3.0.1"
+    request "^2.74.0"
+
+google-auto-auth@^0.7.1, google-auto-auth@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/google-auto-auth/-/google-auto-auth-0.7.2.tgz#bf9352d5c4a0897bf31fd9c491028b765fbea71e"
+  dependencies:
+    async "^2.3.0"
+    gcp-metadata "^0.3.0"
+    google-auth-library "^0.10.0"
+    request "^2.79.0"
+
+google-p12-pem@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/google-p12-pem/-/google-p12-pem-0.1.2.tgz#33c46ab021aa734fa0332b3960a9a3ffcb2f3177"
+  dependencies:
+    node-forge "^0.7.1"
+
+google-proto-files@0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/google-proto-files/-/google-proto-files-0.12.1.tgz#6434dc7e025a0d0c82e5f04e615c737d6a4c4387"
+
+googleapis@20.1.0:
+  version "20.1.0"
+  resolved "https://registry.yarnpkg.com/googleapis/-/googleapis-20.1.0.tgz#efb2541f0cab123492bc8ccfe09fa6baaf2b84ca"
+  dependencies:
+    async "~2.3.0"
+    google-auth-library "~0.10.0"
+    string-template "~1.0.0"
+
+got@7.1.0, got@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/got/-/got-7.1.0.tgz#05450fd84094e6bbea56f451a43a9c289166385a"
+  dependencies:
+    decompress-response "^3.2.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    is-plain-obj "^1.1.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    isurl "^1.0.0-alpha5"
+    lowercase-keys "^1.0.0"
+    p-cancelable "^0.3.0"
+    p-timeout "^1.1.1"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    url-parse-lax "^1.0.0"
+    url-to-options "^1.0.1"
+
+got@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-3.3.1.tgz#e5d0ed4af55fc3eef4d56007769d98192bcb2eca"
+  dependencies:
+    duplexify "^3.2.0"
+    infinity-agent "^2.0.0"
+    is-redirect "^1.0.0"
+    is-stream "^1.0.0"
+    lowercase-keys "^1.0.0"
+    nested-error-stacks "^1.0.0"
+    object-assign "^3.0.0"
+    prepend-http "^1.0.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"
+  dependencies:
+    create-error-class "^3.0.1"
+    duplexer2 "^0.1.4"
+    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"
+    url-parse-lax "^1.0.0"
+
+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.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"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    unzip-response "^2.0.1"
+    url-parse-lax "^1.0.0"
+
+got@^8.2.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/got/-/got-8.3.0.tgz#6ba26e75f8a6cc4c6b3eb1fe7ce4fec7abac8533"
+  dependencies:
+    "@sindresorhus/is" "^0.7.0"
+    cacheable-request "^2.1.1"
+    decompress-response "^3.3.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    into-stream "^3.1.0"
+    is-retry-allowed "^1.1.0"
+    isurl "^1.0.0-alpha5"
+    lowercase-keys "^1.0.0"
+    mimic-response "^1.0.0"
+    p-cancelable "^0.4.0"
+    p-timeout "^2.0.1"
+    pify "^3.0.0"
+    safe-buffer "^5.1.1"
+    timed-out "^4.0.1"
+    url-parse-lax "^3.0.0"
+    url-to-options "^1.0.1"
+
+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"
+
+grouped-queue@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/grouped-queue/-/grouped-queue-0.3.3.tgz#c167d2a5319c5a0e0964ef6a25b7c2df8996c85c"
+  dependencies:
+    lodash "^4.17.2"
+
+grpc@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/grpc/-/grpc-1.4.1.tgz#3ee4a8346a613f2823928c9f8f99081b6368ec7c"
+  dependencies:
+    arguejs "^0.2.3"
+    lodash "^4.15.0"
+    nan "^2.0.0"
+    node-pre-gyp "^0.6.35"
+    protobufjs "^5.0.0"
+
+gtoken@^1.2.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/gtoken/-/gtoken-1.2.3.tgz#5509571b8afd4322e124cf66cf68115284c476d8"
+  dependencies:
+    google-p12-pem "^0.1.0"
+    jws "^3.0.0"
+    mime "^1.4.1"
+    request "^2.72.0"
+
+handle-thing@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
+
+handlebars@^4.0.1, handlebars@^4.0.3:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+  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-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+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"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.7.tgz#68e61eb16210c9545a0a5cce06a873912fe1e68c"
+  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"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
+has-symbol-support-x@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.1.tgz#66ec2e377e0c7d7ccedb07a3a84d77510ff1bc4c"
+
+has-to-string-tag-x@^1.2.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz#a045ab383d7b4b2012a00148ab0aa5f290044d4d"
+  dependencies:
+    has-symbol-support-x "^1.4.1"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  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-base@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+hash-stream-validation@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/hash-stream-validation/-/hash-stream-validation-0.2.1.tgz#ecc9b997b218be5bb31298628bb807869b73dcd1"
+  dependencies:
+    through2 "^2.0.0"
+
+hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
+
+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.2"
+  resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-1.1.2.tgz#d10bd6757a21e59c13abc8ae3530dd3b6d7d679e"
+  dependencies:
+    xtend "^4.0.1"
+
+hast-util-to-html@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-3.1.0.tgz#882c99849e40130e991c042e456d453d95c36cff"
+  dependencies:
+    ccount "^1.0.0"
+    comma-separated-tokens "^1.0.1"
+    hast-util-is-element "^1.0.0"
+    hast-util-whitespace "^1.0.0"
+    html-void-elements "^1.0.0"
+    kebab-case "^1.0.0"
+    property-information "^3.1.0"
+    space-separated-tokens "^1.0.0"
+    stringify-entities "^1.0.1"
+    unist-util-is "^2.0.0"
+    xtend "^4.0.1"
+
+hast-util-to-string@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-1.0.1.tgz#b28055cdca012d3c8fd048757c8483d0de0d002c"
+
+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.1.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-3.1.0.tgz#66628ba6d7f1ad07d9277dd09028aba7f4934599"
+  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, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+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.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"
+
+hoek@4.x.x:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
+
+home-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/home-dir/-/home-dir-1.0.0.tgz#2917eb44bdc9072ceda942579543847e3017fe4e"
+
+home-or-tmp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+homedir-polyfill@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  dependencies:
+    parse-passwd "^1.0.0"
+
+hosted-git-info@^2.1.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+
+hosted-git-info@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.6.0.tgz#23235b29ab230c576aab0d4f13fc046b0b038222"
+
+hpack.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  dependencies:
+    inherits "^2.0.1"
+    obuf "^1.0.0"
+    readable-stream "^2.0.1"
+    wbuf "^1.1.0"
+
+html-encoding-sniffer@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
+html-entities@^1.2.0:
+  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.5.13"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.13.tgz#6bca6d533a7f18a476dc6aeb3d113071ab5c165e"
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "4.1.x"
+    commander "2.15.x"
+    he "1.1.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "3.3.x"
+
+html-void-elements@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.2.tgz#9d22e0ca32acc95b3f45b8d5b4f6fbdc05affd55"
+
+html-webpack-plugin@^3.0.6:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
+  dependencies:
+    html-minifier "^3.2.3"
+    loader-utils "^0.2.16"
+    lodash "^4.17.3"
+    pretty-error "^2.0.2"
+    tapable "^1.0.0"
+    toposort "^1.0.0"
+    util.promisify "1.0.0"
+
+html@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/html/-/html-1.0.0.tgz#a544fa9ea5492bfb3a2cca8210a10be7b5af1f61"
+  dependencies:
+    concat-stream "^1.4.7"
+
+htmlparser2@^3.7.3:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
+  dependencies:
+    domelementtype "^1.3.0"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^2.0.2"
+
+htmlparser2@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
+  dependencies:
+    domelementtype "1"
+    domhandler "2.1"
+    domutils "1.1"
+    readable-stream "1.0"
+
+http-cache-semantics@3.8.1:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"
+
+http-deceiver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+
+http-errors@1.6.2, http-errors@~1.6.1, http-errors@~1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-parser-js@>=0.4.0:
+  version "0.4.9"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.9.tgz#ea1a04fb64adff0242e9974f297dd4c3cad271e1"
+
+http-proxy-middleware@~0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz#0987e6bb5a5606e5a69168d8f967a87f15dd8aab"
+  dependencies:
+    http-proxy "^1.16.2"
+    is-glob "^4.0.0"
+    lodash "^4.17.5"
+    micromatch "^3.1.9"
+
+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"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+
+https-proxy-agent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+i@0.3.x:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/i/-/i-0.3.6.tgz#d96c92732076f072711b6b10fd7d4f65ad8ee23d"
+
+iconv-lite@0.4.13:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+
+iconv-lite@0.4.15:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+
+iconv-lite@0.4.19, iconv-lite@~0.4.11:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
+iconv-lite@^0.4.17:
+  version "0.4.21"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.21.tgz#c47f8733d02171189ebc4a400f3218d348094798"
+  dependencies:
+    safer-buffer "^2.1.0"
+
+ieee754@^1.1.4:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.11.tgz#c16384ffe00f5b7835824e67b6f2bd44a5229455"
+
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+
+ignore@^3.2.0, ignore@^3.3.3:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.6.tgz#b6f3196b38ed92f0c86e52f6f79b7fc4c8266c8d"
+
+ignore@^3.3.5:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
+
+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.5"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+
+image-ssim@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/image-ssim/-/image-ssim-0.2.0.tgz#83b42c7a2e6e4b85505477fe6917f5dbc56420e5"
+
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+
+import-lazy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
+
+import-local@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
+  dependencies:
+    pkg-dir "^2.0.0"
+    resolve-cwd "^2.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+in-publish@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+infinity-agent@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/infinity-agent/-/infinity-agent-2.0.3.tgz#45e0e2ff7a9eb030b27d62b74b3744b7a7ac4216"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+inquirer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
+  dependencies:
+    ansi-escapes "^1.1.0"
+    ansi-regex "^2.0.0"
+    chalk "^1.0.0"
+    cli-cursor "^1.0.1"
+    cli-width "^2.0.0"
+    figures "^1.3.5"
+    lodash "^4.3.0"
+    readline2 "^1.0.1"
+    run-async "^0.1.0"
+    rx-lite "^3.1.2"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.0"
+    through "^2.3.6"
+
+inquirer@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.0.4"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rx-lite "^4.0.8"
+    rx-lite-aggregates "^4.0.8"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
+    through "^2.3.6"
+
+inquirer@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.1.0"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rxjs "^5.5.2"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
+    through "^2.3.6"
+
+internal-ip@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  dependencies:
+    meow "^3.3.0"
+
+interpret@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0"
+
+interpret@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
+
+into-stream@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6"
+  dependencies:
+    from2 "^2.1.1"
+    p-is-promise "^1.1.0"
+
+invariant@^2.2.2:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  dependencies:
+    loose-envify "^1.0.0"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+ip@^1.1.0, ip@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+
+ipaddr.js@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.4.0.tgz#296aca878a821816e5b85d0a285a99bcff4582f0"
+
+ipaddr.js@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.6.0.tgz#e3fa357b773da619f26e95f049d055c72796f86b"
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-alphabetical@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.1.tgz#c77079cc91d4efac775be1034bf2d243f95e6f08"
+
+is-alphanumeric@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz#4a9cef71daf4c001c1d81d63d140cf53fd6889f4"
+
+is-alphanumerical@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.1.tgz#dfb4aa4d1085e33bdb61c2dee9c80e9c6c19f53b"
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-callable@^1.1.1, is-callable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
+is-decimal@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.1.tgz#f5fb6a94996ad9e8e3761fbfbd091f1fca8c4e82"
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+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.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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-extglob@^2.1.0, is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-glob@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-hexadecimal@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.1.tgz#6e084bbc92061fbb0971ec58b6ce6d404e24da69"
+
+is-installed-globally@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
+  dependencies:
+    global-dirs "^0.1.0"
+    is-path-inside "^1.0.0"
+
+is-lower-case@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-lower-case/-/is-lower-case-1.1.3.tgz#7e147be4768dc466db3bfb21cc60b31e6ad69393"
+  dependencies:
+    lower-case "^1.1.0"
+
+is-my-ip-valid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
+
+is-my-json-valid@^2.10.0:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.1.tgz#5a846777e2c2620d1e69104e5d3a03b1f6088f11"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-my-json-valid@^2.12.4:
+  version "2.17.2"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz#6b2103a288e94ef3de5cf15d29dd85fc4b78d65c"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    is-my-ip-valid "^1.0.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+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@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-0.1.1.tgz#69a7af116963d47206ec9bd9b48a14216f1e3806"
+
+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-number@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+
+is-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
+
+is-observable@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-0.2.0.tgz#b361311d83c6e5d726cabf5e250b0237106f5ae2"
+  dependencies:
+    symbol-observable "^0.2.2"
+
+is-odd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-2.0.0.tgz#7646624671fd7ea558ccd9a2795182f2958f1b24"
+  dependencies:
+    is-number "^4.0.0"
+
+is-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+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, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-promise@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
+is-redirect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+
+is-regex@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
+
+is-resolvable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
+  dependencies:
+    tryit "^1.0.1"
+
+is-retry-allowed@^1.0.0, is-retry-allowed@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
+
+is-scoped@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-scoped/-/is-scoped-1.0.0.tgz#449ca98299e713038256289ecb2b540dc437cb30"
+  dependencies:
+    scoped-regex "^1.0.0"
+
+is-stream-ended@^0.1.0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/is-stream-ended/-/is-stream-ended-0.1.3.tgz#a0473b267c756635486beedc7e3344e549d152ac"
+
+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"
+
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-upper-case@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-upper-case/-/is-upper-case-1.1.2.tgz#8d0b1fa7e7933a1e58483600ec7d9661cbaf756f"
+  dependencies:
+    upper-case "^1.1.0"
+
+is-url@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.2.tgz#498905a593bf47cc2d9e7f738372bbf7696c7f26"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+is-whitespace-character@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.1.tgz#9ae0176f3282b65457a1992cdb084f8a5f833e3b"
+
+is-windows@^1.0.1, is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+
+is-word-character@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.1.tgz#5a03fa1ea91ace8a6eb0c7cd770eb86d65c8befb"
+
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+
+is@^3.0.1, is@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/is/-/is-3.2.1.tgz#d0ac2ad55eb7b0bec926a5266f6c662aaa83dca5"
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+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"
+
+isbinaryfile@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.2.tgz#4a3e974ec0cba9004d3fc6cde7209ea69368a621"
+
+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"
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
+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.14:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.3.1.tgz#4c3b05d18c0016d1022e079b98dc82c40f488954"
+  dependencies:
+    async "^2.1.4"
+    compare-versions "^3.1.0"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.2.0"
+    istanbul-lib-hook "^1.2.0"
+    istanbul-lib-instrument "^1.10.1"
+    istanbul-lib-report "^1.1.4"
+    istanbul-lib-source-maps "^1.2.4"
+    istanbul-reports "^1.3.0"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-instrumenter-loader@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-instrumenter-loader/-/istanbul-instrumenter-loader-3.0.1.tgz#9957bd59252b373fae5c52b7b5188e6fde2a0949"
+  dependencies:
+    convert-source-map "^1.5.0"
+    istanbul-lib-instrument "^1.7.3"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+
+istanbul-lib-coverage@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.0.tgz#f7d8f2e42b97e37fe796114cb0f9d68b5e3a4341"
+
+istanbul-lib-hook@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.0.tgz#ae556fd5a41a6e8efa0b1002b1e416dfeaf9816c"
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.10.1, istanbul-lib-instrument@^1.7.3:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.1.tgz#724b4b6caceba8692d3f1f9d0727e279c401af7b"
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.2.0"
+    semver "^5.3.0"
+
+istanbul-lib-report@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.4.tgz#e886cdf505c4ebbd8e099e4396a90d0a28e2acb5"
+  dependencies:
+    istanbul-lib-coverage "^1.2.0"
+    mkdirp "^0.5.1"
+    path-parse "^1.0.5"
+    supports-color "^3.1.2"
+
+istanbul-lib-source-maps@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.4.tgz#cc7ccad61629f4efff8e2f78adb8c522c9976ec7"
+  dependencies:
+    debug "^3.1.0"
+    istanbul-lib-coverage "^1.2.0"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.1"
+    source-map "^0.5.3"
+
+istanbul-reports@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.3.0.tgz#2f322e81e1d9520767597dca3c20a0cce89a3554"
+  dependencies:
+    handlebars "^4.0.3"
+
+istanbul@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/istanbul/-/istanbul-0.4.5.tgz#65c7d73d4c4da84d4f3ac310b918fb0b8033733b"
+  dependencies:
+    abbrev "1.0.x"
+    async "1.x"
+    escodegen "1.8.x"
+    esprima "2.7.x"
+    glob "^5.0.15"
+    handlebars "^4.0.1"
+    js-yaml "3.x"
+    mkdirp "0.5.x"
+    nopt "3.x"
+    once "1.x"
+    resolve "1.1.x"
+    supports-color "^3.1.0"
+    which "^1.1.1"
+    wordwrap "^1.0.0"
+
+istextorbinary@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.2.1.tgz#a5231a08ef6dd22b268d0895084cf8d58b5bec53"
+  dependencies:
+    binaryextensions "2"
+    editions "^1.3.3"
+    textextensions "2"
+
+isurl@^1.0.0-alpha5:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
+  dependencies:
+    has-to-string-tag-x "^1.2.0"
+    is-object "^1.0.1"
+
+jasmine-core@^2.8.0, jasmine-core@~2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
+
+jasmine-marbles@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/jasmine-marbles/-/jasmine-marbles-0.3.1.tgz#ef65edecb41b8dd62fc6bda40448222042e32043"
+  dependencies:
+    lodash "^4.5.0"
+
+jasmine-spec-reporter@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/jasmine-spec-reporter/-/jasmine-spec-reporter-4.2.1.tgz#1d632aec0341670ad324f92ba84b4b32b35e9e22"
+  dependencies:
+    colors "1.1.2"
+
+jasmine-ts@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/jasmine-ts/-/jasmine-ts-0.2.1.tgz#7fe5911d98ea22cc257efe98f9728ab66ac0e90e"
+  dependencies:
+    jasmine "^2.6.0"
+    ts-node "^3.2.0"
+    typescript "^2.4.1"
+    yargs "^8.0.2"
+
+jasmine@^2.5.3, jasmine@^2.6.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.8.0.tgz#6b089c0a11576b1f16df11b80146d91d4e8b8a3e"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.8.0"
+
+jasminewd2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
+
+jju@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jju/-/jju-1.3.0.tgz#dadd9ef01924bc728b03f2f7979bdbd62f7a2aaa"
+
+joi@^6.10.1:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-6.10.1.tgz#4d50c318079122000fe5f16af1ff8e1917b77e06"
+  dependencies:
+    hoek "2.x.x"
+    isemail "1.x.x"
+    moment "2.x.x"
+    topo "1.x.x"
+
+join-path@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/join-path/-/join-path-1.1.1.tgz#10535a126d24cbd65f7ffcdf15ef2e631076b505"
+  dependencies:
+    as-array "^2.0.0"
+    url-join "0.0.1"
+    valid-url "^1"
+
+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.8:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
+
+js-library-detector@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-library-detector/-/js-library-detector-4.1.0.tgz#c5e3fa4d006de3c9d32847c0ff266472fbd892c5"
+
+js-tokens@^3.0.0, js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+js-yaml@3.x, js-yaml@^3.4.3, js-yaml@^3.7.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^3.5.1:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+jscodeshift@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.4.1.tgz#da91a1c2eccfa03a3387a21d39948e251ced444a"
+  dependencies:
+    async "^1.5.0"
+    babel-plugin-transform-flow-strip-types "^6.8.0"
+    babel-preset-es2015 "^6.9.0"
+    babel-preset-stage-1 "^6.5.0"
+    babel-register "^6.9.0"
+    babylon "^6.17.3"
+    colors "^1.1.2"
+    flow-parser "^0.*"
+    lodash "^4.13.1"
+    micromatch "^2.3.7"
+    node-dir "0.1.8"
+    nomnom "^1.8.1"
+    recast "^0.12.5"
+    temp "^0.8.1"
+    write-file-atomic "^1.2.0"
+
+jscodeshift@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.5.0.tgz#bdb7b6cc20dd62c16aa728c3fa2d2fe66ca7c748"
+  dependencies:
+    babel-plugin-transform-flow-strip-types "^6.8.0"
+    babel-preset-es2015 "^6.9.0"
+    babel-preset-stage-1 "^6.5.0"
+    babel-register "^6.9.0"
+    babylon "^7.0.0-beta.30"
+    colors "^1.1.2"
+    flow-parser "^0.*"
+    lodash "^4.13.1"
+    micromatch "^2.3.7"
+    neo-async "^2.5.0"
+    node-dir "0.1.8"
+    nomnom "^1.8.1"
+    recast "^0.14.1"
+    temp "^0.8.1"
+    write-file-atomic "^1.2.0"
+
+jsdom@^9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
+  dependencies:
+    abab "^1.0.3"
+    acorn "^4.0.4"
+    acorn-globals "^3.1.0"
+    array-equal "^1.0.0"
+    content-type-parser "^1.0.1"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle ">= 0.2.37 < 0.3.0"
+    escodegen "^1.6.1"
+    html-encoding-sniffer "^1.0.1"
+    nwmatcher ">= 1.3.9 < 2.0.0"
+    parse5 "^1.5.1"
+    request "^2.79.0"
+    sax "^1.2.1"
+    symbol-tree "^3.2.1"
+    tough-cookie "^2.3.2"
+    webidl-conversions "^4.0.0"
+    whatwg-encoding "^1.0.1"
+    whatwg-url "^4.3.0"
+    xml-name-validator "^2.0.1"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+jshashes@^1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/jshashes/-/jshashes-1.0.7.tgz#bed8c97a0e9632fd0513916f55f76dd5486be59f"
+
+json-buffer@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
+
+json-parse-better-errors@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+
+json-parse-helpfulerror@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/json-parse-helpfulerror/-/json-parse-helpfulerror-1.0.3.tgz#13f14ce02eed4e981297b64eb9e3b932e2dd13dc"
+  dependencies:
+    jju "^1.1.0"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+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"
+
+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.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  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"
+
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+
+jsonpointer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+
+jsonschema@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/jsonschema/-/jsonschema-1.2.0.tgz#d6ebaf70798db7b3a20c544f6c9ef9319b077de2"
+
+jsonwebtoken@^7.4.1:
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-7.4.3.tgz#77f5021de058b605a1783fa1283e99812e645638"
+  dependencies:
+    joi "^6.10.1"
+    jws "^3.1.4"
+    lodash.once "^4.0.0"
+    ms "^2.0.0"
+    xtend "^4.0.1"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+jszip@^3.1.3:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.1.4.tgz#fc323fe41bb1730348d20dd022aa4d8b57cbbcf9"
+  dependencies:
+    core-js "~2.3.0"
+    es6-promise "~3.0.2"
+    lie "~3.1.0"
+    pako "~1.0.2"
+    readable-stream "~2.0.6"
+
+jwa@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.1.5.tgz#a0552ce0220742cd52e153774a32905c30e756e5"
+  dependencies:
+    base64url "2.0.0"
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.9"
+    safe-buffer "^5.0.1"
+
+jws@^3.0.0, jws@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.1.4.tgz#f9e8b9338e8a847277d6444b1464f61880e050a2"
+  dependencies:
+    base64url "^2.0.0"
+    jwa "^1.1.4"
+    safe-buffer "^5.0.1"
+
+karma-chrome-launcher@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz#cf1b9d07136cc18fe239327d24654c3dbc368acf"
+  dependencies:
+    fs-access "^1.0.0"
+    which "^1.2.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@^1.3.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.4.2.tgz#a8d0c8815c7d6f6cea15a394a7c4b39ef151a939"
+  dependencies:
+    istanbul-api "^1.1.14"
+    minimatch "^3.0.4"
+
+karma-jasmine-html-reporter@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-0.2.2.tgz#48a8e5ef18807617ee2b5e33c1194c35b439524c"
+  dependencies:
+    karma-jasmine "^1.0.2"
+
+karma-jasmine@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/karma-jasmine/-/karma-jasmine-1.1.0.tgz#22e4c06bf9a182e5294d1f705e3733811b810acf"
+
+karma-jasmine@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/karma-jasmine/-/karma-jasmine-1.1.1.tgz#6fe840e75a11600c9d91e84b33c458e1c46a3529"
+
+karma-source-map-support@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/karma-source-map-support/-/karma-source-map-support-1.2.0.tgz#1bf81e7bb4b089627ab352ec4179e117c406a540"
+  dependencies:
+    source-map-support "^0.4.1"
+
+karma@^1.7.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-1.7.1.tgz#85cc08e9e0a22d7ce9cca37c4a1be824f6a2b1ae"
+  dependencies:
+    bluebird "^3.3.0"
+    body-parser "^1.16.1"
+    chokidar "^1.4.1"
+    colors "^1.1.0"
+    combine-lists "^1.0.0"
+    connect "^3.6.0"
+    core-js "^2.2.0"
+    di "^0.0.1"
+    dom-serialize "^2.2.0"
+    expand-braces "^0.1.1"
+    glob "^7.1.1"
+    graceful-fs "^4.1.2"
+    http-proxy "^1.13.0"
+    isbinaryfile "^3.0.0"
+    lodash "^3.8.0"
+    log4js "^0.6.31"
+    mime "^1.3.4"
+    minimatch "^3.0.2"
+    optimist "^0.6.1"
+    qjobs "^1.1.4"
+    range-parser "^1.2.0"
+    rimraf "^2.6.0"
+    safe-buffer "^5.0.1"
+    socket.io "1.7.3"
+    source-map "^0.5.3"
+    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"
+
+keyv@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.0.0.tgz#44923ba39e68b12a7cec7df6c3268c031f2ef373"
+  dependencies:
+    json-buffer "3.0.0"
+
+killable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    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"
+
+kind-of@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+
+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"
+
+latest-version@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-1.0.1.tgz#72cfc46e3e8d1be651e1ebb54ea9f6ea96f374bb"
+  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"
+  dependencies:
+    package-json "^2.0.0"
+
+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 "^4.0.0"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lazy-req@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-1.1.0.tgz#bdaebead30f8d824039ce0ce149d4daa07ba1fac"
+
+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"
+  dependencies:
+    readable-stream "~1.0.2"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+less-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.1.0.tgz#2c1352c5b09a4f84101490274fd51674de41363e"
+  dependencies:
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^3.0.0"
+
+less@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/less/-/less-3.0.2.tgz#1bcb9813bb6090c884ac142f02c633bd42931844"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    mime "^1.4.1"
+    mkdirp "^0.5.0"
+    promise "^7.1.1"
+    request "^2.83.0"
+    source-map "^0.5.3"
+
+levn@^0.3.0, levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+license-webpack-plugin@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-1.3.1.tgz#688b76472188ef597918b7cae3eec7dc2fa5a0e8"
+  dependencies:
+    ejs "^2.5.7"
+
+lie@~3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  dependencies:
+    immediate "~3.0.5"
+
+lighthouse-logger@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/lighthouse-logger/-/lighthouse-logger-1.0.1.tgz#f073d83f7acbc96729bf100a121c8f006991ae61"
+  dependencies:
+    debug "^2.6.8"
+
+lighthouse@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/lighthouse/-/lighthouse-2.5.0.tgz#c38c3bb0cfc5645bd59ed2550531bdc59a6c8fdd"
+  dependencies:
+    axe-core "2.4.1"
+    chrome-devtools-frontend "1.0.422034"
+    chrome-launcher "0.8.0"
+    devtools-timeline-model "1.1.6"
+    jpeg-js "0.1.2"
+    js-library-detector "^4.0.0"
+    json-stringify-safe "5.0.1"
+    lighthouse-logger "^1.0.0"
+    metaviewport-parser "0.1.0"
+    mkdirp "0.5.1"
+    opn "4.0.2"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    speedline "1.2.0"
+    update-notifier "^2.1.0"
+    whatwg-url "4.0.0"
+    ws "1.1.2"
+    yargs "3.32.0"
+    yargs-parser "7.0.0"
+
+listr-silent-renderer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
+
+listr-update-renderer@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.4.0.tgz#344d980da2ca2e8b145ba305908f32ae3f4cc8a7"
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    elegant-spinner "^1.0.1"
+    figures "^1.7.0"
+    indent-string "^3.0.0"
+    log-symbols "^1.0.2"
+    log-update "^1.0.2"
+    strip-ansi "^3.0.1"
+
+listr-verbose-renderer@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#8206f4cf6d52ddc5827e5fd14989e0e965933a35"
+  dependencies:
+    chalk "^1.1.3"
+    cli-cursor "^1.0.2"
+    date-fns "^1.27.2"
+    figures "^1.7.0"
+
+listr@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/listr/-/listr-0.13.0.tgz#20bb0ba30bae660ee84cc0503df4be3d5623887d"
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    figures "^1.7.0"
+    indent-string "^2.1.0"
+    is-observable "^0.2.0"
+    is-promise "^2.1.0"
+    is-stream "^1.1.0"
+    listr-silent-renderer "^1.1.1"
+    listr-update-renderer "^0.4.0"
+    listr-verbose-renderer "^0.4.0"
+    log-symbols "^1.0.2"
+    log-update "^1.0.2"
+    ora "^0.2.3"
+    p-map "^1.1.1"
+    rxjs "^5.4.2"
+    stream-to-observable "^0.2.0"
+    strip-ansi "^3.0.1"
+
+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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+load-json-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
+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.16:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+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"
+    json5 "^0.5.0"
+
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
+lodash._isnative@~2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/lodash._isnative/-/lodash._isnative-2.4.1.tgz#3ea6404b784a7be836c7b57580e1cdf79b14832c"
+
+lodash._objecttypes@~2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz#7c0b7f69d98a1f76529f890b0cdb1b4dfec11c11"
+
+lodash._shimkeys@~2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/lodash._shimkeys/-/lodash._shimkeys-2.4.1.tgz#6e9cc9666ff081f0b5a6c978b83e242e6949d203"
+  dependencies:
+    lodash._objecttypes "~2.4.1"
+
+lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+
+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"
+
+lodash.isarguments@2.4.x:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-2.4.1.tgz#4931a9c08253adf091ae7ca192258a973876ecca"
+
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+
+lodash.isobject@^2.4.1, lodash.isobject@~2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-2.4.1.tgz#5a2e47fe69953f1ee631a7eba1fe64d2d06558f5"
+  dependencies:
+    lodash._objecttypes "~2.4.1"
+
+lodash.isobject@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"
+
+lodash.keys@~2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-2.4.1.tgz#48dea46df8ff7632b10d706b8acb26591e2b3727"
+  dependencies:
+    lodash._isnative "~2.4.1"
+    lodash._shimkeys "~2.4.1"
+    lodash.isobject "~2.4.1"
+
+lodash.mergewith@^4.6.0:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
+
+lodash.noop@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.noop/-/lodash.noop-3.0.1.tgz#38188f4d650a3a474258439b96ec45b32617133c"
+
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+
+lodash.tail@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
+
+lodash.values@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-2.4.1.tgz#abf514436b3cb705001627978cbcf30b1280eea4"
+  dependencies:
+    lodash.keys "~2.4.1"
+
+lodash@4.17.4, lodash@^4.0.0, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.4, 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"
+
+lodash@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e"
+
+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.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.5, lodash@~4.17.4:
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+
+log-driver@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.5.tgz#7ae4ec257302fd790d557cb10c97100d857b0056"
+
+log-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
+  dependencies:
+    chalk "^1.0.0"
+
+log-symbols@^2.1.0, log-symbols@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  dependencies:
+    chalk "^2.0.1"
+
+log-update@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1"
+  dependencies:
+    ansi-escapes "^1.0.0"
+    cli-cursor "^1.0.2"
+
+log4js@^0.6.31:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.38.tgz#2c494116695d6fb25480943d3fc872e662a522fd"
+  dependencies:
+    readable-stream "~1.0.2"
+    semver "~4.3.3"
+
+loglevel@^1.4.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
+
+loglevelnext@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-1.0.3.tgz#0f69277e73bbbf2cd61b94d82313216bf87ac66e"
+
+long@~3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b"
+
+longest-streak@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.1.tgz#42d291b5411e40365c00e63193497e2247316e35"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loose-envify@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+loud-rejection@^1.0.0, loud-rejection@^1.3.0, loud-rejection@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.0.0"
+
+lower-case-first@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case-first/-/lower-case-first-1.0.2.tgz#e5da7c26f29a7073be02d52bac9980e5922adfa1"
+  dependencies:
+    lower-case "^1.1.2"
+
+lower-case@^1.1.0, lower-case@^1.1.1, lower-case@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+
+lowercase-keys@1.0.0, 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@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.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"
+
+lru-cache@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.2.tgz#45234b2e6e2f2b33da125624c4664929a0224c3f"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+lunr@^2.1.0:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.1.4.tgz#52be0a9d068321909a7fb46575620e24417d5591"
+
+make-dir@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.1.0.tgz#19b4369fe48c116f53c2af95ad102c0e39e85d51"
+  dependencies:
+    pify "^3.0.0"
+
+make-dir@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.2.0.tgz#6d6a49eead4aae296c53bbf3a1a008bd6c89469b"
+  dependencies:
+    pify "^3.0.0"
+
+make-error@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.0.tgz#52ad3a339ccf10ce62b4040b708fe707244b8b96"
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+
+map-obj@^1.0.0, map-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  dependencies:
+    object-visit "^1.0.0"
+
+markdown-escapes@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.1.tgz#1994df2d3af4811de59a6714934c2b2292734518"
+
+markdown-table@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.1.tgz#4b3dd3a133d1518b8ef0dbc709bf2a1b4824bc8c"
+
+marked@^0.3.2:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
+
+md5.js@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+mdast-util-compact@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.1.tgz#cdb5f84e2b6a2d3114df33bd05d9cb32e3c4083a"
+  dependencies:
+    unist-util-modify-children "^1.0.0"
+    unist-util-visit "^1.1.0"
+
+mdast-util-definitions@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-1.2.2.tgz#673f4377c3e23d3de7af7a4fe2214c0e221c5ac7"
+  dependencies:
+    unist-util-visit "^1.0.0"
+
+mdast-util-to-hast@^2.1.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-2.5.0.tgz#f087844d255c7540f36906da30ba106c0ee5ee2f"
+  dependencies:
+    collapse-white-space "^1.0.0"
+    detab "^2.0.0"
+    mdast-util-definitions "^1.2.0"
+    mdurl "^1.0.1"
+    trim "0.0.1"
+    trim-lines "^1.0.0"
+    unist-builder "^1.0.1"
+    unist-util-generated "^1.1.0"
+    unist-util-position "^3.0.0"
+    unist-util-visit "^1.1.0"
+    xtend "^4.0.1"
+
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+mem-fs-editor@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/mem-fs-editor/-/mem-fs-editor-3.0.2.tgz#dd0a6eaf2bb8a6b37740067aa549eb530105af9f"
+  dependencies:
+    commondir "^1.0.1"
+    deep-extend "^0.4.0"
+    ejs "^2.3.1"
+    glob "^7.0.3"
+    globby "^6.1.0"
+    mkdirp "^0.5.0"
+    multimatch "^2.0.0"
+    rimraf "^2.2.8"
+    through2 "^2.0.0"
+    vinyl "^2.0.1"
+
+mem-fs@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/mem-fs/-/mem-fs-1.1.3.tgz#b8ae8d2e3fcb6f5d3f9165c12d4551a065d989cc"
+  dependencies:
+    through2 "^2.0.0"
+    vinyl "^1.1.0"
+    vinyl-file "^2.0.0"
+
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.0"
+
+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:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+meow@^3.3.0, meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  dependencies:
+    camelcase-keys "^2.0.0"
+    decamelize "^1.1.2"
+    loud-rejection "^1.0.0"
+    map-obj "^1.0.1"
+    minimist "^1.1.3"
+    normalize-package-data "^2.3.4"
+    object-assign "^4.0.1"
+    read-pkg-up "^1.0.1"
+    redent "^1.0.0"
+    trim-newlines "^1.0.0"
+
+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.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/metaviewport-parser/-/metaviewport-parser-0.1.0.tgz#97fa67ea4bbf640f4fd59010f88f10cea7d5accc"
+
+methmeth@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/methmeth/-/methmeth-1.1.0.tgz#e80a26618e52f5c4222861bb748510bd10e29089"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5, micromatch@^2.3.7:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+micromatch@^3.1.4, micromatch@^3.1.8, micromatch@^3.1.9:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+miller-rabin@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+"mime-db@>= 1.30.0 < 2", mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+"mime-db@>= 1.33.0 < 2", mime-db@~1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
+
+mime-types@^2.0.8, mime-types@^2.1.12, mime-types@^2.1.16, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mime-types@~2.1.18:
+  version "2.1.18"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
+  dependencies:
+    mime-db "~1.33.0"
+
+mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+mime@1.4.1, mime@^1.2.11, mime@^1.3.4, mime@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+
+mime@^2.0.3, mime@^2.1.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.2.2.tgz#6b4c109d88031d7b5c23635f5b923da336d79121"
+
+mimic-fn@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+
+mimic-response@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.0.tgz#df3d3652a73fded6b9b0b24146e6fd052353458e"
+
+mini-css-extract-plugin@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz#ff3bf08bee96e618e177c16ca6131bfecef707f9"
+  dependencies:
+    loader-utils "^1.1.0"
+    webpack-sources "^1.1.0"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+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"
+
+"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"
+
+minimist@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"
+
+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"
+
+minipass@^2.0.2, minipass@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.2.1.tgz#5ada97538b1027b4cf7213432428578cb564011f"
+  dependencies:
+    yallist "^3.0.0"
+
+minizlib@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.0.4.tgz#8ebb51dd8bbe40b0126b5633dbb36b284a2f523c"
+  dependencies:
+    minipass "^2.2.1"
+
+mississippi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^2.0.1"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
+mixin-deep@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
+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.1, mkdirp@0.5.x, mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+modelo@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/modelo/-/modelo-4.2.0.tgz#3b4b420023a66ca7e32bdba16e710937e14d1b0b"
+
+moment@2.x.x:
+  version "2.19.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.1.tgz#56da1a2d1cbf01d38b7e1afc31c10bcfa1929167"
+
+morgan@^1.8.2:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.9.0.tgz#d01fa6c65859b76fcf31b3cb53a3821a311d8051"
+  dependencies:
+    basic-auth "~2.0.0"
+    debug "2.6.9"
+    depd "~1.1.1"
+    on-finished "~2.3.0"
+    on-headers "~1.0.1"
+
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+ms@0.7.2:
+  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"
+
+multicast-dns-service-types@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+
+multicast-dns@^6.0.1:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
+  dependencies:
+    dns-packet "^1.3.1"
+    thunky "^1.0.2"
+
+multimatch@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-2.1.0.tgz#9c7906a22fb4c02919e2f5f75161b4cdbd4b2a2b"
+  dependencies:
+    array-differ "^1.0.0"
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    minimatch "^3.0.0"
+
+mute-stream@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
+
+mute-stream@0.0.7, mute-stream@~0.0.4:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+
+nan@^2.0.0, nan@^2.3.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
+
+nan@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+
+nanomatch@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.9.tgz#879f7150cb2dab7a471259066c104eee6e0fa7c2"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-odd "^2.0.0"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+nash@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/nash/-/nash-2.0.4.tgz#cb964791cefd376d59cfacd80109274616aa15d2"
+  dependencies:
+    async "^1.3.0"
+    flat-arguments "^1.0.0"
+    lodash "^3.10.0"
+    minimist "^1.1.0"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
+ncp@1.0.x:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ncp/-/ncp-1.0.1.tgz#d15367e5cb87432ba117d2bf80fdf45aecfb4246"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+neo-async@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.0.tgz#76b1c823130cca26acfbaccc8fbaf0a2fa33b18f"
+
+nested-error-stacks@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-1.0.2.tgz#19f619591519f096769a5ba9a86e6eeec823c3cf"
+  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"
+
+nice-try@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"
+
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  dependencies:
+    lower-case "^1.1.1"
+
+node-dir@0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.8.tgz#55fb8deb699070707fb67f91a460f0448294c77d"
+
+node-forge@0.7.1, node-forge@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.1.tgz#9da611ea08982f4b94206b3beb4cc9665f20c300"
+
+node-gyp@^3.3.1:
+  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"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3 || 4"
+    osenv "0"
+    request "2"
+    rimraf "2"
+    semver "~5.3.0"
+    tar "^2.0.0"
+    which "1"
+
+node-html-encoder@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/node-html-encoder/-/node-html-encoder-0.0.2.tgz#8973618d727da5526a830b47d07c0d803e0a15c6"
+
+node-int64@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+
+node-libs-browser@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.1.0.tgz#5f94263d404f6e44767d726901fff05478d600df"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.2.0"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "^1.0.0"
+    os-browserify "^0.3.0"
+    path-browserify "0.0.0"
+    process "^0.11.10"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.3.3"
+    stream-browserify "^2.0.1"
+    stream-http "^2.7.2"
+    string_decoder "^1.0.0"
+    timers-browserify "^2.0.4"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.35, node-pre-gyp@^0.6.36:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
+  dependencies:
+    hawk "3.1.3"
+    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-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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.8.3:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.9.0.tgz#d1b8aa855d98ed684d6848db929a20771cc2ae52"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    lodash.mergewith "^4.6.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.10.0"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "~2.79.0"
+    sass-graph "^2.2.4"
+    stdout-stream "^1.4.0"
+    "true-case-path" "^1.0.2"
+
+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"
+
+node-uuid@1.x:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.8.tgz#b040eb0923968afabf8d32fb1f17f1167fdab907"
+
+nomnom@^1.8.1:
+  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.x:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
+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"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, "normalize-package-data@~1.0.1 || ^2.0.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  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.0, normalize-path@^2.0.1, normalize-path@^2.1.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"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+
+normalize-url@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-2.0.1.tgz#835a9da1551fa26f70e92329069a23aa6574d7e6"
+  dependencies:
+    prepend-http "^2.0.0"
+    query-string "^5.0.1"
+    sort-keys "^2.0.0"
+
+"npm-package-arg@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-6.1.0.tgz#15ae1e2758a5027efb4c250554b85a737db7fcc1"
+  dependencies:
+    hosted-git-info "^2.6.0"
+    osenv "^0.1.5"
+    semver "^5.5.0"
+    validate-npm-package-name "^3.0.0"
+
+npm-registry-client@^8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/npm-registry-client/-/npm-registry-client-8.5.1.tgz#8115809c0a4b40938b8a109b8ea74d26c6f5d7f1"
+  dependencies:
+    concat-stream "^1.5.2"
+    graceful-fs "^4.1.6"
+    normalize-package-data "~1.0.1 || ^2.0.0"
+    npm-package-arg "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
+    once "^1.3.3"
+    request "^2.74.0"
+    retry "^0.10.0"
+    safe-buffer "^5.1.1"
+    semver "2 >=2.2.1 || 3.x || 4 || 5"
+    slide "^1.1.3"
+    ssri "^5.2.4"
+  optionalDependencies:
+    npmlog "2 || ^3.1.0 || ^4.0.0"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+"npmlog@0 || 1 || 2 || 3 || 4", "npmlog@2 || ^3.1.0 || ^4.0.0", npmlog@^4.0.0, npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+nth-check@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+  dependencies:
+    boolbase "~1.0.0"
+
+null-check@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/null-check/-/null-check-1.0.0.tgz#977dffd7176012b9ec30d2a39db5cf72a0439edd"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+
+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@^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"
+    yargs "^3.32.0"
+  optionalDependencies:
+    chokidar "^1.6.0"
+
+"nwmatcher@>= 1.3.9 < 2.0.0":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.3.tgz#64348e3b3d80f035b40ac11563d278f8b72db89c"
+
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+
+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:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-keys@^1.0.8:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  dependencies:
+    isobject "^3.0.0"
+
+object.getownpropertydescriptors@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.1"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  dependencies:
+    isobject "^3.0.1"
+
+objectdiff@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/objectdiff/-/objectdiff-1.1.0.tgz#8d7a15be6cb8670df8a490cc6be12a4f05ea82f4"
+
+obuf@^1.0.0, obuf@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+
+on-finished@^2.2.0, on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+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.x, once@^1.3.0, once@^1.3.1, 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"
+
+onetime@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  dependencies:
+    mimic-fn "^1.0.0"
+
+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"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+opn@^5.1.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.3.0.tgz#64871565c863875f052cfdf53d3e3cb5adb53b1c"
+  dependencies:
+    is-wsl "^1.1.0"
+
+opn@~5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
+  dependencies:
+    is-wsl "^1.1.0"
+
+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:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+optionator@^0.8.1, optionator@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+optjs@~3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/optjs/-/optjs-3.2.2.tgz#69a6ce89c442a44403141ad2f9b370bd5bb6f4ee"
+
+ora@0.2.3, 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"
+  dependencies:
+    url-parse "1.0.x"
+
+os-browserify@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+
+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"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-locale@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  dependencies:
+    execa "^0.7.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.0, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@0, osenv@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.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:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+p-cancelable@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.3.0.tgz#b9e123800bcebb7ac13a479be195b507b98d30fa"
+
+p-cancelable@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.4.1.tgz#35f363d67d52081c8d9585e37bcceb7e0bbcb2a0"
+
+p-each-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
+  dependencies:
+    p-reduce "^1.0.0"
+
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
+p-is-promise@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
+
+p-lazy@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-lazy/-/p-lazy-1.0.0.tgz#ec53c802f2ee3ac28f166cc82d0b2b02de27a835"
+
+p-limit@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
+  dependencies:
+    p-try "^1.0.0"
+
+p-limit@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  dependencies:
+    p-limit "^1.1.0"
+
+p-map@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+
+p-reduce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+
+p-timeout@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-1.2.0.tgz#9820f99434c5817868b4f34809ee5291660d5b6c"
+  dependencies:
+    p-finally "^1.0.0"
+
+p-timeout@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-2.0.1.tgz#d8dd1979595d2dc0139e1fe46b8b646cb3cdf038"
+  dependencies:
+    p-finally "^1.0.0"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+
+package-json@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-1.2.0.tgz#c8ecac094227cdf76a316874ed05e27cc939a0e0"
+  dependencies:
+    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"
+  dependencies:
+    got "^5.0.0"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
+
+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 "^6.7.1"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
+
+pako@~1.0.2, pako@~1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
+
+parallel-transform@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  dependencies:
+    cyclist "~0.2.2"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
+param-case@2.1.x, param-case@^2.1.0:
+  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.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"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+
+parse-entities@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.1.1.tgz#8112d88471319f27abae4d64964b122fe4e1b890"
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.1.0, parse-json@^2.2.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"
+
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+
+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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
+
+parsejson@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.3.tgz#ab7e3759f209ece99437973f7d0f1f64ae0e64ab"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseqs@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.1, parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+pascal-case@^2.0.0:
+  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"
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+
+path-browserify@0.0.0:
+  version "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.1"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-2.1.1.tgz#94b8037c372d3fe2906e465bb45e25d226e8eea5"
+  dependencies:
+    no-case "^2.2.0"
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+
+path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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@^2.0.0, path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  dependencies:
+    pify "^2.0.0"
+
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  dependencies:
+    pify "^3.0.0"
+
+pbkdf2@^3.0.3:
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  dependencies:
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0, pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  dependencies:
+    find-up "^2.1.0"
+
+pkginfo@0.3.x:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.3.1.tgz#5b29f6a81f70717142e09e765bbeab97b4f81e21"
+
+pkginfo@0.x.x:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.1.tgz#b5418ef0439de5425fc4995042dced14fb2a84ff"
+
+pluralize@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
+
+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:
+    async "0.9.0"
+    mkdirp "0.5.x"
+
+portfinder@^1.0.13, portfinder@^1.0.9:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+
+postcss-import@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.1.0.tgz#55c9362c9192994ec68865d224419df1db2981f0"
+  dependencies:
+    postcss "^6.0.1"
+    postcss-value-parser "^3.2.3"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+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:
+    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@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.4.tgz#f44a6390e03c84108b2b2063182d1a1011b2ce76"
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^6.0.0"
+    postcss-load-config "^1.2.0"
+    schema-utils "^0.4.0"
+
+postcss-url@^7.3.1:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-7.3.2.tgz#5fea273807fb84b38c461c3c9a9e8abd235f7120"
+  dependencies:
+    mime "^1.4.1"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.0"
+    postcss "^6.0.1"
+    xxhashjs "^0.2.1"
+
+postcss-value-parser@^3.2.3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.19, postcss@^6.0.20:
+  version "6.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.21.tgz#8265662694eddf9e9a5960db6da33c39e4cd069d"
+  dependencies:
+    chalk "^2.3.2"
+    source-map "^0.6.1"
+    supports-color "^5.3.0"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
+prepend-http@^1.0.0, prepend-http@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+prepend-http@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+prettier@^1.5.3:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.12.0.tgz#d26fc5894b9230de97629b39cae225b503724ce8"
+
+pretty-bytes@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
+
+pretty-error@^2.0.2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
+  dependencies:
+    renderkid "^2.0.1"
+    utila "~0.4"
+
+private@^0.1.6, private@^0.1.7, private@~0.1.5:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+
+process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+progress@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+
+progress@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
+
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  dependencies:
+    asap "~2.0.3"
+
+prompt@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prompt/-/prompt-1.0.0.tgz#8e57123c396ab988897fb327fd3aedc3e735e4fe"
+  dependencies:
+    colors "^1.1.2"
+    pkginfo "0.x.x"
+    read "1.0.x"
+    revalidator "0.1.x"
+    utile "0.3.x"
+    winston "2.1.x"
+
+property-information@^3.0.0, property-information@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-3.2.0.tgz#fd1483c8fbac61808f5fe359e7693a1f48a58331"
+
+protobufjs@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-5.0.2.tgz#59748d7dcf03d2db22c13da9feb024e16ab80c91"
+  dependencies:
+    ascli "~1"
+    bytebuffer "~5"
+    glob "^7.0.5"
+    yargs "^3.10.0"
+
+protochain@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/protochain/-/protochain-1.0.5.tgz#991c407e99de264aadf8f81504b5e7faf7bfa260"
+
+protractor@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/protractor/-/protractor-5.2.0.tgz#d3f39b195e85f3539ad9d8cb6560a9d2b63297c4"
+  dependencies:
+    "@types/node" "^6.0.46"
+    "@types/q" "^0.0.32"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "0.0.5"
+    chalk "^1.1.3"
+    glob "^7.0.3"
+    jasmine "^2.5.3"
+    jasminewd2 "^2.1.0"
+    optimist "~0.6.0"
+    q "1.4.1"
+    saucelabs "~1.3.0"
+    selenium-webdriver "3.6.0"
+    source-map-support "~0.4.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
+
+proxy-addr@~1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918"
+  dependencies:
+    forwarded "~0.1.0"
+    ipaddr.js "1.4.0"
+
+proxy-addr@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.3.tgz#355f262505a621646b3130a728eb647e22055341"
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.6.0"
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
+
+pump@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.2.tgz#3b3ee6512f94f0e575538c17995f9f16990a5d51"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.3.5.tgz#1b671c619940abcaeac0ad0e3a3c164be760993b"
+  dependencies:
+    duplexify "^3.1.2"
+    inherits "^2.0.1"
+    pump "^1.0.0"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@^1.2.4, punycode@^1.3.2, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+punycode@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
+
+q@1.4.1, q@~1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+q@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qjobs@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
+
+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@6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49"
+
+qs@6.5.1, qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+qs@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404"
+
+qs@~6.3.0:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
+
+query-string@^5.0.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb"
+  dependencies:
+    decode-uri-component "^0.2.0"
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
+querystring-es3@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+
+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.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"
+  dependencies:
+    safe-buffer "^5.1.0"
+
+randomfill@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  dependencies:
+    randombytes "^2.0.5"
+    safe-buffer "^5.1.0"
+
+range-parser@^1.0.3, range-parser@^1.2.0, range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+raw-body@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89"
+  dependencies:
+    bytes "3.0.0"
+    http-errors "1.6.2"
+    iconv-lite "0.4.19"
+    unpipe "1.0.0"
+
+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"
+
+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.7:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+read-all-stream@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"
+  dependencies:
+    pinkie-promise "^2.0.0"
+    readable-stream "^2.0.0"
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  dependencies:
+    pify "^2.3.0"
+
+read-chunk@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-2.1.0.tgz#6a04c0928005ed9d42e1a6ac5600e19cbc7ff655"
+  dependencies:
+    pify "^3.0.0"
+    safe-buffer "^5.1.1"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
+read-pkg-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^3.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+read@1.0.x:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
+  dependencies:
+    mute-stream "~0.0.4"
+
+"readable-stream@1 || 2", readable-stream@^2.0.1, readable-stream@^2.0.4, readable-stream@^2.2.9, readable-stream@^2.3.3, readable-stream@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readable-stream@1.0, readable-stream@~1.0.2, readable-stream@~1.0.24, readable-stream@~1.0.26:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+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.1.5, readable-stream@^2.2.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@~2.0.0, readable-stream@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+readline2@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    mute-stream "0.0.5"
+
+recast@^0.12.5:
+  version "0.12.9"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.12.9.tgz#e8e52bdb9691af462ccbd7c15d5a5113647a15f1"
+  dependencies:
+    ast-types "0.10.1"
+    core-js "^2.4.1"
+    esprima "~4.0.0"
+    private "~0.1.5"
+    source-map "~0.6.1"
+
+recast@^0.14.1:
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.14.7.tgz#4f1497c2b5826d42a66e8e3c9d80c512983ff61d"
+  dependencies:
+    ast-types "0.11.3"
+    esprima "~4.0.0"
+    private "~0.1.5"
+    source-map "~0.6.1"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  dependencies:
+    resolve "^1.1.6"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+reflect-metadata@^0.1.2:
+  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.3"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  dependencies:
+    babel-runtime "^6.18.0"
+    babel-types "^6.19.0"
+    private "^0.1.6"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+registry-auth-token@^3.0.1:
+  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"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
+  dependencies:
+    rc "^1.0.1"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  dependencies:
+    jsesc "~0.5.0"
+
+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.1"
+  resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-2.0.1.tgz#8c1809ea1eb513b231f721cae17bd1ce9329e373"
+  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"
+
+remark-html@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-6.0.1.tgz#5094d2c71f7941fdb2ae865bac76627757ce09c1"
+  dependencies:
+    hast-util-sanitize "^1.0.0"
+    hast-util-to-html "^3.0.0"
+    mdast-util-to-hast "^2.1.1"
+    xtend "^4.0.1"
+
+remark-parse@^3.0.0:
+  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"
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    is-word-character "^1.0.0"
+    markdown-escapes "^1.0.0"
+    parse-entities "^1.0.2"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    trim "0.0.1"
+    trim-trailing-lines "^1.0.0"
+    unherit "^1.0.4"
+    unist-util-remove-position "^1.0.0"
+    vfile-location "^2.0.0"
+    xtend "^4.0.1"
+
+remark-stringify@^3.0.0:
+  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"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    longest-streak "^2.0.1"
+    markdown-escapes "^1.0.0"
+    markdown-table "^1.1.0"
+    mdast-util-compact "^1.0.0"
+    parse-entities "^1.0.2"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    stringify-entities "^1.0.1"
+    unherit "^1.0.4"
+    xtend "^4.0.1"
+
+remark@^7.0.0:
+  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"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+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"
+    htmlparser2 "~3.3.0"
+    strip-ansi "^3.0.0"
+    utila "~0.3"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-0.2.2.tgz#c7a8d3236068362059a7e4651fc6884e8b1fb4ae"
+
+repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+repeating@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-1.1.3.tgz#3d4114218877537494f97f77f9785fab810fa4ac"
+  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"
+
+replace-ext@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
+
+replace-ext@1.0.0, 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.83.0:
+  version "2.85.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.85.0.tgz#5a03615a47c61420b3eb99b7dba204f83603e1fa"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+request@2.x, request@^2.58.0, request@^2.72.0, request@^2.74.0, request@^2.78.0, request@^2.79.0, request@^2.81.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
+request@~2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.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"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+    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"
+
+require-uncached@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
+  dependencies:
+    caller-path "^0.1.0"
+    resolve-from "^1.0.0"
+
+requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve-cwd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  dependencies:
+    resolve-from "^3.0.0"
+
+resolve-dir@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
+  dependencies:
+    expand-tilde "^2.0.0"
+    global-modules "^1.0.0"
+
+resolve-from@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
+
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+
+resolve@1.1.7, resolve@1.1.x:
+  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.4.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
+  dependencies:
+    path-parse "^1.0.5"
+
+resolve@^1.3.2:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
+  dependencies:
+    path-parse "^1.0.5"
+
+resolve@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.6.0.tgz#0fbd21278b27b4004481c395349e7aba60a9ff5c"
+  dependencies:
+    path-parse "^1.0.5"
+
+responselike@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
+  dependencies:
+    lowercase-keys "^1.0.0"
+
+restore-cursor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  dependencies:
+    exit-hook "^1.0.0"
+    onetime "^1.0.0"
+
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  dependencies:
+    onetime "^2.0.0"
+    signal-exit "^3.0.2"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+
+retry-request@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/retry-request/-/retry-request-3.1.0.tgz#f948ca1792657a64abc89a0fad727dd07b62b0d6"
+  dependencies:
+    request "^2.81.0"
+    through2 "^2.0.0"
+
+retry@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
+
+revalidator@0.1.x:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/revalidator/-/revalidator-0.1.8.tgz#fece61bfa0c1b52a206bd6b18198184bdd523a3b"
+
+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.x.x, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1, rimraf@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+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:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
+
+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"
+
+router@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/router/-/router-1.3.2.tgz#bfaa16888a5283d5ee40d999da7a9fa15296a60c"
+  dependencies:
+    array-flatten "2.1.1"
+    debug "2.6.9"
+    methods "~1.1.2"
+    parseurl "~1.3.2"
+    path-to-regexp "0.1.7"
+    setprototypeof "1.1.0"
+    utils-merge "1.0.1"
+
+rsvp@^3.0.18, rsvp@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"
+
+run-async@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
+  dependencies:
+    once "^1.3.0"
+
+run-async@^2.0.0, 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"
+
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  dependencies:
+    aproba "^1.1.1"
+
+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-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"
+
+rxjs-compat@6.0.0-uncanny-rc.7:
+  version "6.0.0-uncanny-rc.7"
+  resolved "https://registry.yarnpkg.com/rxjs-compat/-/rxjs-compat-6.0.0-uncanny-rc.7.tgz#4d9d88c2296aefda6b6503a52c27d1bf7e6ff1f0"
+
+rxjs@6.0.0-uncanny-rc.7:
+  version "6.0.0-uncanny-rc.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.0.0-uncanny-rc.7.tgz#e5d6ebe2c538c583bf4b3600b60112d64a7a6991"
+  dependencies:
+    tslib "^1.9.0"
+
+rxjs@^5.4.2, rxjs@^5.5.2:
+  version "5.5.10"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.10.tgz#fde02d7a614f6c8683d0d1957827f492e09db045"
+  dependencies:
+    symbol-observable "1.0.1"
+
+rxjs@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.1.0.tgz#833447de4e4f6427b9cec3e5eb9f56415cd28315"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  dependencies:
+    ret "~0.1.10"
+
+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"
+
+safer-buffer@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+sass-graph@^2.2.4:
+  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"
+    scss-tokenizer "^0.2.3"
+    yargs "^7.0.0"
+
+sass-loader@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.0.1.tgz#fd937259ccba3a9cfe0d5f8a98746d48adfcc261"
+  dependencies:
+    clone-deep "^2.0.1"
+    loader-utils "^1.0.1"
+    lodash.tail "^4.1.1"
+    neo-async "^2.5.0"
+    pify "^3.0.0"
+
+saucelabs@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.3.0.tgz#d240e8009df7fa87306ec4578a69ba3b5c424fee"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+
+sax@0.5.x:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
+
+sax@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
+
+sax@>=0.6.0, sax@^1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+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"
+
+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"
+
+schema-utils@^0.4.0, schema-utils@^0.4.2, schema-utils@^0.4.3, schema-utils@^0.4.4, schema-utils@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
+scoped-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
+
+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@3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-3.6.0.tgz#2ba87a1662c020b8988c981ae62cb2a01298eafc"
+  dependencies:
+    jszip "^3.1.3"
+    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:
+    adm-zip "0.4.4"
+    rimraf "^2.2.8"
+    tmp "0.0.24"
+    ws "^1.0.1"
+    xml2js "0.4.4"
+
+selfsigned@^1.9.1:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.2.tgz#b4449580d99929b65b10a48389301a6592088758"
+  dependencies:
+    node-forge "0.7.1"
+
+semver-diff@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
+  dependencies:
+    semver "^5.0.3"
+
+semver-dsl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/semver-dsl/-/semver-dsl-1.0.1.tgz#d3678de5555e8a61f629eed025366ae5f27340a0"
+  dependencies:
+    semver "^5.3.0"
+
+semver-intersect@^1.1.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/semver-intersect/-/semver-intersect-1.3.1.tgz#8fa84a9e1028bd239e4530d1a3e181e698d884ba"
+  dependencies:
+    semver "^5.0.0"
+
+"semver@2 >=2.2.1 || 3.x || 4 || 5", semver@^5.0.0, semver@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
+"semver@2 || 3 || 4 || 5", semver@5.4.1, semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.2.0, semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+semver@~4.3.3:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
+
+semver@~5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
+
+semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+send@0.15.4:
+  version "0.15.4"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.4.tgz#985faa3e284b0273c793364a35c6737bd93905b9"
+  dependencies:
+    debug "2.6.8"
+    depd "~1.1.1"
+    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.2"
+    mime "1.3.4"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.1"
+
+send@0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.4.1"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.4.0"
+
+sentence-case@^2.1.0:
+  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"
+
+serialize-javascript@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.4.0.tgz#7c958514db6ac2443a8abc062dc9f7886a7f6005"
+
+serializerr@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/serializerr/-/serializerr-1.0.3.tgz#12d4c5aa1c3ffb8f6d1dc5f395aa9455569c3f91"
+  dependencies:
+    protochain "^1.0.5"
+
+serve-index@^1.7.2:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  dependencies:
+    accepts "~1.3.4"
+    batch "0.6.1"
+    debug "2.6.9"
+    escape-html "~1.0.3"
+    http-errors "~1.6.2"
+    mime-types "~2.1.17"
+    parseurl "~1.3.2"
+
+serve-static@1.12.4:
+  version "1.12.4"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.4.tgz#9b6aa98eeb7253c4eedc4c1f6fdbca609901a961"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.15.4"
+
+serve-static@1.13.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.2"
+    send "0.16.2"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+set-value@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.1"
+    to-object-path "^0.3.0"
+
+set-value@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+setprototypeof@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
+
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.11"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.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@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-1.0.0.tgz#4480cd06e882ef68b2ad88a3ea54832e2c48b571"
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^5.0.0"
+    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.8"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+shelljs@^0.8.0:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.1.tgz#729e038c413a2254c4078b95ed46e0397154a9f1"
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+signal-exit@^3.0.0, signal-exit@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+silent-error@^1.0.0, silent-error@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/silent-error/-/silent-error-1.1.0.tgz#2209706f1c850a9f1d10d0d840918b46f26e1bc9"
+  dependencies:
+    debug "^2.2.0"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+slice-ansi@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+
+slide@^1.1.3, slide@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+
+snake-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f"
+  dependencies:
+    no-case "^2.2.0"
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.0.2.tgz#5064110f0af85f7cfdb7d6b67a40028ce52b4b2b"
+  dependencies:
+    hoek "4.x.x"
+
+socket.io-adapter@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-0.5.0.tgz#cb6d4bb8bec81e1078b99677f9ced0046066bb8b"
+  dependencies:
+    debug "2.3.3"
+    socket.io-parser "2.3.1"
+
+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.3"
+    has-binary "0.1.7"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseuri "0.0.5"
+    socket.io-parser "2.3.1"
+    to-array "0.1.4"
+
+socket.io-parser@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-2.3.1.tgz#dd532025103ce429697326befd64005fcfe5b4a0"
+  dependencies:
+    component-emitter "1.1.2"
+    debug "2.2.0"
+    isarray "0.0.1"
+    json3 "3.3.2"
+
+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.3"
+    has-binary "0.1.7"
+    object-assign "4.1.0"
+    socket.io-adapter "0.5.0"
+    socket.io-client "1.7.3"
+    socket.io-parser "2.3.1"
+
+sockjs-client@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
+  dependencies:
+    debug "^2.6.6"
+    eventsource "0.1.6"
+    faye-websocket "~0.11.0"
+    inherits "^2.0.1"
+    json3 "^3.3.2"
+    url-parse "^1.1.8"
+
+sockjs@0.3.19:
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+  dependencies:
+    faye-websocket "^0.10.0"
+    uuid "^3.0.1"
+
+sort-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+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-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-resolve@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.1.tgz#7ad0f593f2281598e854df80f19aae4b92d7a11a"
+  dependencies:
+    atob "^2.0.0"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@^0.4.0, source-map-support@^0.4.1, source-map-support@^0.4.15, source-map-support@~0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map-support@^0.5.0:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.4.tgz#54456efa89caa9270af7cd624cc2f123e51fbae8"
+  dependencies:
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+
+source-map@0.1.x:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+source-map@^0.4.2, source-map@^0.4.4, source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+source-map@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
+  dependencies:
+    amdefine ">=0.0.4"
+
+space-separated-tokens@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.1.tgz#9695b9df9e65aec1811d4c3f9ce52520bc2f7e4d"
+  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"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+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"
+
+spdx-license-list@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/spdx-license-list/-/spdx-license-list-2.1.0.tgz#3788ffb5c80b24afbe8283934e9e6684ea6a218d"
+
+spdy-transport@^2.0.18:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.1.0.tgz#4bbb15aaffed0beefdd56ad61dbdc8ba3e2cb7a1"
+  dependencies:
+    debug "^2.6.8"
+    detect-node "^2.0.3"
+    hpack.js "^2.1.6"
+    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.7"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
+  dependencies:
+    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.18"
+
+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"
+
+split-array-stream@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/split-array-stream/-/split-array-stream-1.0.3.tgz#d2b75a8e5e0d824d52fdec8b8225839dc2e35dfa"
+  dependencies:
+    async "^2.4.0"
+    is-stream-ended "^0.1.0"
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  dependencies:
+    extend-shallow "^3.0.0"
+
+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.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+ssri@^5.2.4:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.3.0.tgz#ba3872c9c6d33a0704a7d71ff045e5ec48999d06"
+  dependencies:
+    safe-buffer "^5.1.1"
+
+stack-trace@0.0.x:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
+
+state-toggle@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.0.tgz#d20f9a616bb4f0c3b98b91922d25b640aa2bc425"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+stats-webpack-plugin@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/stats-webpack-plugin/-/stats-webpack-plugin-0.6.2.tgz#2c5949b531e07f87a88e6ea4dcfac53aa8c75a2b"
+  dependencies:
+    lodash "^4.17.4"
+
+"statuses@>= 1.3.1 < 2", statuses@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+stdout-stream@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"
+  dependencies:
+    readable-stream "^2.0.1"
+
+stream-browserify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-each@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.2.tgz#8e8c463f91da8991778765873fe4d960d8f616bd"
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
+stream-events@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/stream-events/-/stream-events-1.0.2.tgz#abf39f66c0890a4eb795bc8d5e859b2615b590b2"
+  dependencies:
+    stubs "^3.0.0"
+
+stream-http@^2.7.2:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.1.tgz#d0441be1a457a73a733a8a7b53570bebd9ef66a4"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.3.3"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-shift@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+
+stream-to-observable@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.2.0.tgz#59d6ea393d87c2c0ddac10aa0d561bc6ba6f0e10"
+  dependencies:
+    any-observable "^0.2.0"
+
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+
+string-format-obj@^1.0.0, string-format-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/string-format-obj/-/string-format-obj-1.1.0.tgz#7635610b1ef397013e8478be98a170e04983d068"
+
+string-length@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"
+  dependencies:
+    strip-ansi "^3.0.0"
+
+string-template@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
+
+string-template@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/string-template/-/string-template-1.0.0.tgz#9e9f2233dc00f218718ec379a28a5673ecca8b96"
+
+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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+string_decoder@^1.0.0, string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  dependencies:
+    safe-buffer "~5.1.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.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringify-entities@^1.0.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-1.3.1.tgz#b150ec2d72ac4c1b5f324b51fb6b28c9cdff058c"
+  dependencies:
+    character-entities-html4 "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
+stringmap@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/stringmap/-/stringmap-0.2.2.tgz#556c137b258f942b8776f5b2ef582aa069d7d1b1"
+
+stringstream@~0.0.4, stringstream@~0.0.5:
+  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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.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-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-stream/-/strip-bom-stream-2.0.0.tgz#f87db5ef2613f6968aa545abfe1ec728b6a829ca"
+  dependencies:
+    first-chunk-stream "^2.0.0"
+    strip-bom "^2.0.0"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  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-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.0.1"
+
+strip-json-comments@^2.0.0, 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"
+
+stubs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/stubs/-/stubs-3.0.0.tgz#e8d2ba1fa9c90570303c030b6900f7d5f89abe5b"
+
+style-loader@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.21.0.tgz#68c52e5eb2afc9ca92b6274be277ee59aea3a852"
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^0.4.5"
+
+stylus-loader@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.2.tgz#27a706420b05a38e038e7cacb153578d450513c6"
+  dependencies:
+    loader-utils "^1.0.2"
+    lodash.clonedeep "^4.5.0"
+    when "~3.6.x"
+
+stylus@^0.54.5:
+  version "0.54.5"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
+  dependencies:
+    css-parse "1.7.x"
+    debug "*"
+    glob "7.0.x"
+    mkdirp "0.5.x"
+    sax "0.5.x"
+    source-map "0.1.x"
+
+superstatic@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/superstatic/-/superstatic-5.0.1.tgz#f0a83942ad8e93c5c53a98341c4a3de229dff94e"
+  dependencies:
+    as-array "^2.0.0"
+    async "^1.5.2"
+    basic-auth-connect "^1.0.0"
+    chalk "^1.1.3"
+    char-spinner "^1.0.1"
+    compare-semver "^1.0.0"
+    compression "^1.7.0"
+    connect "^3.6.2"
+    connect-query "^1.0.0"
+    destroy "^1.0.4"
+    fast-url-parser "^1.1.3"
+    fs-extra "^0.30.0"
+    glob "^7.1.2"
+    glob-slasher "^1.0.1"
+    home-dir "^1.0.0"
+    is-url "^1.2.2"
+    join-path "^1.1.1"
+    lodash "^4.17.4"
+    mime-types "^2.1.16"
+    minimatch "^3.0.4"
+    morgan "^1.8.2"
+    nash "^2.0.4"
+    on-finished "^2.2.0"
+    on-headers "^1.0.0"
+    path-to-regexp "^1.7.0"
+    router "^1.3.1"
+    rsvp "^3.6.2"
+    string-length "^1.0.0"
+    try-require "^1.0.0"
+    update-notifier "^1.0.3"
+
+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"
+
+supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+  dependencies:
+    has-flag "^2.0.0"
+
+supports-color@^5.1.0, supports-color@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
+  dependencies:
+    has-flag "^3.0.0"
+
+swap-case@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/swap-case/-/swap-case-1.1.2.tgz#c39203a4587385fad3c850a0bd1bcafa081974e3"
+  dependencies:
+    lower-case "^1.1.1"
+    upper-case "^1.1.1"
+
+symbol-observable@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+
+symbol-observable@^0.2.2:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40"
+
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+
+symbol-tree@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+
+table@^3.7.8:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
+  dependencies:
+    ajv "^4.7.0"
+    ajv-keywords "^1.0.0"
+    chalk "^1.1.1"
+    lodash "^4.0.0"
+    slice-ansi "0.0.4"
+    string-width "^2.0.0"
+
+tapable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.0.0.tgz#cbb639d9002eed9c6b5975eb20598d7936f1f9f2"
+
+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"
+
+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"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.2.2.tgz#9632f23d98fd33d41661bbdec05489120dec6028"
+  dependencies:
+    bl "^1.0.0"
+    end-of-stream "^1.0.0"
+    readable-stream "^2.0.0"
+    xtend "^4.0.0"
+
+tar@^2.0.0, tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+tar@^3.1.5:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-3.2.1.tgz#9aa8e41c88f09e76c166075bc71f93d5166e61b1"
+  dependencies:
+    chownr "^1.0.1"
+    minipass "^2.0.2"
+    minizlib "^1.0.3"
+    mkdirp "^0.5.0"
+    yallist "^3.0.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.1:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.3.tgz#e0c6bc4d26b903124410e4fed81103014dfc1f59"
+  dependencies:
+    os-tmpdir "^1.0.0"
+    rimraf "~2.2.6"
+
+term-size@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
+  dependencies:
+    execa "^0.7.0"
+
+text-table@^0.2.0, text-table@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+
+textextensions@2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.2.0.tgz#38ac676151285b658654581987a0ce1a4490d286"
+
+through2@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.1.tgz#384e75314d49f32de12eebb8136b8eb6b5d59da9"
+  dependencies:
+    readable-stream "~2.0.0"
+    xtend "~4.0.0"
+
+through2@^2.0.0, through2@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  dependencies:
+    readable-stream "^2.1.5"
+    xtend "~4.0.1"
+
+"through@>=2.2.7 <3", through@X.X.X, through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+thunky@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.2.tgz#a862e018e3fb1ea2ec3fce5d55605cf57f247371"
+
+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, timed-out@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
+
+timers-browserify@^2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.6.tgz#241e76927d9ca05f4d959819022f5b3664b64bae"
+  dependencies:
+    setimmediate "^1.0.4"
+
+title-case@^2.1.0:
+  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"
+
+tmp@0.0.24:
+  version "0.0.24"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.24.tgz#d6a5e198d14a9835cc6f2d7c3d9e302428c8cf12"
+
+tmp@0.0.27:
+  version "0.0.27"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.27.tgz#6aaf42a2d7664150ab528287068ecbc27139a013"
+  dependencies:
+    os-tmpdir "~1.0.0"
+
+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:
+  version "0.0.31"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
+  dependencies:
+    os-tmpdir "~1.0.1"
+
+tmp@0.0.33, tmp@0.0.x, tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  dependencies:
+    os-tmpdir "~1.0.2"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+topo@1.x.x:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/topo/-/topo-1.1.0.tgz#e9d751615d1bb87dc865db182fa1ca0a5ef536d5"
+  dependencies:
+    hoek "2.x.x"
+
+toposort@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"
+
+tough-cookie@^2.3.2, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+toxic@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toxic/-/toxic-1.0.0.tgz#f1154d8b6ac21875ac943a9f7408df2dfe164ea2"
+  dependencies:
+    lodash "^2.4.1"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+
+tree-kill@^1.0.0, tree-kill@^1.1.0, tree-kill@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36"
+
+trim-lines@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-1.1.0.tgz#9926d03ede13ba18f7d42222631fb04c79ff26fe"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+trim-trailing-lines@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.0.tgz#7aefbb7808df9d669f6da2e438cac8c46ada7684"
+
+trim@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
+
+trough@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.1.tgz#a9fd8b0394b0ae8fff82e0633a0a36ccad5b5f86"
+
+"true-case-path@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
+  dependencies:
+    glob "^6.0.4"
+
+try-require@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/try-require/-/try-require-1.2.1.tgz#34489a2cac0c09c1cc10ed91ba011594d4333be2"
+
+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, ts-node@^3.2.0, ts-node@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-3.3.0.tgz#c13c6a3024e30be1180dd53038fc209289d4bf69"
+  dependencies:
+    arrify "^1.0.0"
+    chalk "^2.0.0"
+    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 "^3.0.0"
+    yn "^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.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.27.2.tgz#f33d46d046f73dd5c155a37922e422816e878736"
+  dependencies:
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.7.1:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.8.0.tgz#dc604ebad64bcbf696d613da6c954aa0e7ea1eb6"
+
+tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
+tslint@~5.8.0:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.8.0.tgz#1f49ad5b2e77c76c3af4ddcae552ae4e3612eb13"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    builtin-modules "^1.1.1"
+    chalk "^2.1.0"
+    commander "^2.9.0"
+    diff "^3.2.0"
+    glob "^7.1.1"
+    minimatch "^3.0.4"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.7.1"
+    tsutils "^2.12.1"
+
+tslint@~5.9.1:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.9.1.tgz#1255f87a3ff57eb0b0e1f0e610a8b4748046c9ae"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    builtin-modules "^1.1.1"
+    chalk "^2.3.0"
+    commander "^2.12.1"
+    diff "^3.2.0"
+    glob "^7.1.1"
+    js-yaml "^3.7.0"
+    minimatch "^3.0.4"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.8.0"
+    tsutils "^2.12.1"
+
+tsutils@^2.12.1:
+  version "2.26.1"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.26.1.tgz#9e4a0cb9ff173863f34c22a961969081270d1878"
+  dependencies:
+    tslib "^1.8.1"
+
+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.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"
+
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
+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-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  dependencies:
+    prelude-ls "~1.1.2"
+
+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.15"
+
+type-is@~1.6.16:
+  version "1.6.16"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.18"
+
+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.6.2 <2.8", typescript@~2.7.1, typescript@~2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
+
+typescript@^2.4.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
+
+uglify-es@^3.3.4:
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
+  dependencies:
+    commander "~2.13.0"
+    source-map "~0.6.1"
+
+uglify-js@3.3.x:
+  version "3.3.18"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.18.tgz#e16df66d71638df3c9bc61cce827e46f24bdac02"
+  dependencies:
+    commander "~2.15.0"
+    source-map "~0.6.1"
+
+uglify-js@^2.6:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
+uglify-js@^3.0.15:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.5.tgz#4c1a6d53b2fe77e4710dd94631853effd3ff5143"
+  dependencies:
+    commander "~2.11.0"
+    source-map "~0.6.1"
+
+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"
+
+uglifyjs-webpack-plugin@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.4.tgz#5eec941b2e9b8538be0a20fc6eda25b14c7c1043"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    schema-utils "^0.4.5"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    uglify-es "^3.3.4"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
+uglifyjs-webpack-plugin@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.5.tgz#2ef8387c8f1a903ec5e44fa36f9f3cbdcea67641"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    schema-utils "^0.4.5"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    uglify-es "^3.3.4"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+underscore-contrib@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/underscore-contrib/-/underscore-contrib-0.3.0.tgz#665b66c24783f8fa2b18c9f8cbb0e2c7d48c26c7"
+  dependencies:
+    underscore "1.6.0"
+
+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"
+  dependencies:
+    inherits "^2.0.1"
+    xtend "^4.0.1"
+
+unified@^6.0.0:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-6.1.5.tgz#716937872621a63135e62ced2f3ac6a063c6fb87"
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^1.1.0"
+    trough "^1.0.0"
+    vfile "^2.0.0"
+    x-is-function "^1.0.4"
+    x-is-string "^0.1.0"
+
+union-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^0.4.3"
+
+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"
+
+unique-filename@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.0.tgz#d05f2fe4032560871f30e93cbe735eea201514f3"
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.0.tgz#db6676e7c7cc0629878ff196097c78855ae9f4ab"
+  dependencies:
+    imurmurhash "^0.1.4"
+
+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"
+
+unist-builder@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-1.0.2.tgz#8c3b9903ef64bcfb117dd7cf6a5d98fc1b3b27b6"
+  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.1"
+  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.1.tgz#99f16c78959ac854dee7c615c291924c8bf4de7f"
+
+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.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.1.tgz#0c312629e3f960c66e931e812d3d80e77010947b"
+
+unist-util-modify-children@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-modify-children/-/unist-util-modify-children-1.1.1.tgz#66d7e6a449e6f67220b976ab3cb8b5ebac39e51d"
+  dependencies:
+    array-iterate "^1.0.0"
+
+unist-util-position@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.0.0.tgz#e6e1e03eeeb81c5e1afe553e8d4adfbd7c0d8f82"
+
+unist-util-remove-position@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.1.tgz#5a85c1555fc1ba0c101b86707d15e50fa4c871bb"
+  dependencies:
+    unist-util-visit "^1.1.0"
+
+unist-util-source@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-source/-/unist-util-source-1.0.2.tgz#1ed3a84eb9f64912f46be333da07703f386efd5a"
+  dependencies:
+    vfile-location "^2.0.1"
+
+unist-util-stringify-position@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.1.tgz#3ccbdc53679eed6ecf3777dd7f5e3229c1b6aa3c"
+
+unist-util-visit-parents@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-1.1.1.tgz#7d3f56b5b039a3c6e2d16e51cc093f10e4755342"
+
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.1.3.tgz#ec268e731b9d277a79a5b5aa0643990e405d600b"
+
+universal-analytics@^0.3.9:
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/universal-analytics/-/universal-analytics-0.3.11.tgz#512879193a12a66dcbd9185121389bab913cd4b6"
+  dependencies:
+    async "0.2.x"
+    node-uuid "1.x"
+    request "2.x"
+    underscore "1.x"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+untildify@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-3.0.2.tgz#7f1f302055b3fea0f3e81dc78eb36766cb65e3f1"
+
+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"
+
+upath@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.0.4.tgz#ee2321ba0a786c50973db043a50b7bcba822361d"
+
+update-notifier@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-0.5.0.tgz#07b5dc2066b3627ab3b4f530130f7eddda07a4cc"
+  dependencies:
+    chalk "^1.0.0"
+    configstore "^1.0.0"
+    is-npm "^1.0.0"
+    latest-version "^1.0.0"
+    repeating "^1.1.2"
+    semver-diff "^2.0.0"
+    string-length "^1.0.0"
+
+update-notifier@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-1.0.3.tgz#8f92c515482bd6831b7c93013e70f87552c7cf5a"
+  dependencies:
+    boxen "^0.6.0"
+    chalk "^1.0.0"
+    configstore "^2.0.0"
+    is-npm "^1.0.0"
+    latest-version "^2.0.0"
+    lazy-req "^1.1.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^2.0.0"
+
+update-notifier@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.3.0.tgz#4e8827a6bb915140ab093559d7014e3ebb837451"
+  dependencies:
+    boxen "^1.2.1"
+    chalk "^2.0.1"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
+    is-installed-globally "^0.1.0"
+    is-npm "^1.0.0"
+    latest-version "^3.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+upper-case-first@^1.1.0, upper-case-first@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-1.1.2.tgz#5d79bedcff14419518fd2edb0a0507c9b6859115"
+  dependencies:
+    upper-case "^1.1.1"
+
+upper-case@^1.0.3, upper-case@^1.1.0, upper-case@^1.1.1, upper-case@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
+uri-js@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-3.0.2.tgz#f90b858507f81dea4dcfbb3c4c3dbfa2b557faaa"
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+
+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-join@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.0.tgz#4d3340e807d3773bda9991f8305acdcc2a665d2a"
+
+url-loader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.0.1.tgz#61bc53f1f184d7343da2728a1289ef8722ea45ee"
+  dependencies:
+    loader-utils "^1.1.0"
+    mime "^2.0.3"
+    schema-utils "^0.4.3"
+
+url-parse-lax@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
+  dependencies:
+    prepend-http "^1.0.1"
+
+url-parse-lax@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"
+  dependencies:
+    prepend-http "^2.0.0"
+
+url-parse@1.0.x:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
+  dependencies:
+    querystringify "0.0.x"
+    requires-port "1.0.x"
+
+url-parse@^1.1.8:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.3.0.tgz#04a06c420d22beb9804f7ada2d57ad13160a4258"
+  dependencies:
+    querystringify "~1.0.0"
+    requires-port "~1.0.0"
+
+url-to-options@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
+
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+urlencode@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/urlencode/-/urlencode-1.1.0.tgz#1f2ba26f013c85f0133f7a3ad6ff2730adf7cbb7"
+  dependencies:
+    iconv-lite "~0.4.11"
+
+use@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.0.tgz#14716bf03fdfefd03040aef58d8b4b85f3a7c544"
+  dependencies:
+    kind-of "^6.0.2"
+
+user-home@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
+  dependencies:
+    os-homedir "^1.0.0"
+
+useragent@^2.1.12:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.2.1.tgz#cf593ef4f2d175875e8bb658ea92e18a4fd06d8e"
+  dependencies:
+    lru-cache "2.2.x"
+    tmp "0.0.x"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util.promisify@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  dependencies:
+    define-properties "^1.1.2"
+    object.getownpropertydescriptors "^2.0.3"
+
+util@0.10.3, util@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+utila@~0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+
+utile@0.3.x:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/utile/-/utile-0.3.0.tgz#1352c340eb820e4d8ddba039a4fbfaa32ed4ef3a"
+  dependencies:
+    async "~0.9.0"
+    deep-equal "~0.2.1"
+    i "0.3.x"
+    mkdirp "0.x.x"
+    ncp "1.0.x"
+    rimraf "2.x.x"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+
+uuid@3.1.0, uuid@^3.0.0, uuid@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+uuid@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
+
+uuid@^3.0.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
+
+v8-compile-cache@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-1.1.2.tgz#8d32e4f16974654657e676e0e467a348e89b0dc4"
+
+v8flags@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.0.1.tgz#dce8fc379c17d9f2c9e9ed78d89ce00052b1b76b"
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+valid-url@^1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/valid-url/-/valid-url-1.0.9.tgz#1c14479b40f1397a75782f115e4086447433a200"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+validate-npm-package-name@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
+  dependencies:
+    builtins "^1.0.3"
+
+validate.js@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.9.0.tgz#8acf0144f1520a19835c6cc663f45e0836aa56c8"
+
+vary@~1.1.1, vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vfile-location@^2.0.0, vfile-location@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.2.tgz#d3675c59c877498e492b4756ff65e4af1a752255"
+
+vfile@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.2.0.tgz#ce47a4fb335922b233e535db0f7d8121d8fced4e"
+  dependencies:
+    is-buffer "^1.1.4"
+    replace-ext "1.0.0"
+    unist-util-stringify-position "^1.0.0"
+
+vinyl-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vinyl-file/-/vinyl-file-2.0.0.tgz#a7ebf5ffbefda1b7d18d140fcb07b223efb6751a"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.3.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+    strip-bom-stream "^2.0.0"
+    vinyl "^1.1.0"
+
+vinyl@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-1.2.0.tgz#5c88036cf565e5df05558bfc911f8656df218884"
+  dependencies:
+    clone "^1.0.0"
+    clone-stats "^0.0.1"
+    replace-ext "0.0.1"
+
+vinyl@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.1.0.tgz#021f9c2cf951d6b939943c89eb5ee5add4fd924c"
+  dependencies:
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+void-elements@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+
+vrsource-tslint-rules@^5.8.2:
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/vrsource-tslint-rules/-/vrsource-tslint-rules-5.8.2.tgz#f08a8b0a254f86a9d3f39f5d2493de7c4fac1a58"
+  dependencies:
+    tslint "~5.8.0"
+
+walkdir@^0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.0.11.tgz#a16d025eb931bd03b52f308caed0f40fcebe9532"
+
+watchpack@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.5.0.tgz#231e783af830a22f8966f65c4c4bacc814072eed"
+  dependencies:
+    chokidar "^2.0.2"
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+
+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.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
+  dependencies:
+    minimalistic-assert "^1.0.0"
+
+web-animations-js@^2.2.5:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/web-animations-js/-/web-animations-js-2.3.1.tgz#3a6d9bc15196377a90f8e2803fa5262165b04510"
+
+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"
+    del "^2.2.0"
+    glob "^7.0.3"
+    ini "^1.3.4"
+    minimist "^1.2.0"
+    q "^1.4.1"
+    request "^2.78.0"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+    xml2js "^0.4.17"
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+
+webidl-conversions@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+
+webpack-addons@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/webpack-addons/-/webpack-addons-1.1.5.tgz#2b178dfe873fb6e75e40a819fa5c26e4a9bc837a"
+  dependencies:
+    jscodeshift "^0.4.0"
+
+webpack-cli@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-2.0.14.tgz#71d03d8c10547c1dfd674f71ff3b0457c33a74cd"
+  dependencies:
+    chalk "^2.3.2"
+    cross-spawn "^6.0.5"
+    diff "^3.5.0"
+    enhanced-resolve "^4.0.0"
+    envinfo "^4.4.2"
+    glob-all "^3.1.0"
+    global-modules "^1.0.0"
+    got "^8.2.0"
+    import-local "^1.0.0"
+    inquirer "^5.1.0"
+    interpret "^1.0.4"
+    jscodeshift "^0.5.0"
+    listr "^0.13.0"
+    loader-utils "^1.1.0"
+    lodash "^4.17.5"
+    log-symbols "^2.2.0"
+    mkdirp "^0.5.1"
+    p-each-series "^1.0.0"
+    p-lazy "^1.0.0"
+    prettier "^1.5.3"
+    supports-color "^5.3.0"
+    v8-compile-cache "^1.1.2"
+    webpack-addons "^1.1.5"
+    yargs "^11.1.0"
+    yeoman-environment "^2.0.0"
+    yeoman-generator "^2.0.3"
+
+webpack-core@^0.6.8:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack-dev-middleware@3.1.3, webpack-dev-middleware@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.1.3.tgz#8b32aa43da9ae79368c1bf1183f2b6cf5e1f39ed"
+  dependencies:
+    loud-rejection "^1.6.0"
+    memory-fs "~0.4.1"
+    mime "^2.1.0"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    url-join "^4.0.0"
+    webpack-log "^1.0.1"
+
+webpack-dev-server@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.1.4.tgz#9a08d13c4addd1e3b6d8ace116e86715094ad5b4"
+  dependencies:
+    ansi-html "0.0.7"
+    array-includes "^3.0.3"
+    bonjour "^3.5.0"
+    chokidar "^2.0.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
+    del "^3.0.0"
+    express "^4.16.2"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.18.0"
+    import-local "^1.0.0"
+    internal-ip "1.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
+    serve-index "^1.7.2"
+    sockjs "0.3.19"
+    sockjs-client "1.1.4"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.0"
+    supports-color "^5.1.0"
+    webpack-dev-middleware "3.1.3"
+    webpack-log "^1.1.2"
+    yargs "11.0.0"
+
+webpack-log@^1.0.1, webpack-log@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
+  dependencies:
+    chalk "^2.1.0"
+    log-symbols "^2.1.0"
+    loglevelnext "^1.0.1"
+    uuid "^3.1.0"
+
+webpack-merge@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.2.tgz#5d372dddd3e1e5f8874f5bf5a8e929db09feb216"
+  dependencies:
+    lodash "^4.17.5"
+
+webpack-sources@^1.0.1, webpack-sources@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+webpack-subresource-integrity@^1.1.0-rc.4:
+  version "1.1.0-rc.4"
+  resolved "https://registry.yarnpkg.com/webpack-subresource-integrity/-/webpack-subresource-integrity-1.1.0-rc.4.tgz#c5c4e3d690f9d2f64a9550e07a8767f9796aa5d8"
+  dependencies:
+    webpack-core "^0.6.8"
+
+webpack@~4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.6.0.tgz#363eafa733710eb0ed28c512b2b9b9f5fb01e69b"
+  dependencies:
+    acorn "^5.0.0"
+    acorn-dynamic-import "^3.0.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+    chrome-trace-event "^0.1.1"
+    enhanced-resolve "^4.0.0"
+    eslint-scope "^3.7.1"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    micromatch "^3.1.8"
+    mkdirp "~0.5.0"
+    neo-async "^2.5.0"
+    node-libs-browser "^2.0.0"
+    schema-utils "^0.4.4"
+    tapable "^1.0.0"
+    uglifyjs-webpack-plugin "^1.2.4"
+    watchpack "^1.5.0"
+    webpack-sources "^1.0.1"
+
+websocket-driver@>=0.5.1:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
+  dependencies:
+    http-parser-js ">=0.4.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.2.tgz#0e18781de629a18308ce1481650f67ffa2693a5d"
+
+whatwg-encoding@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.2.tgz#bd68ad169c3cf55080562257714bf012e668a165"
+  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.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"
+
+when@~3.6.x:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
+which@1, which@^1.1.1, which@^1.2.1, which@^1.2.14, which@^1.2.9:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  dependencies:
+    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"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+window-size@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
+
+winston@2.1.x:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/winston/-/winston-2.1.1.tgz#3c9349d196207fd1bdff9d4bc43ef72510e3a12e"
+  dependencies:
+    async "~1.0.0"
+    colors "1.0.x"
+    cycle "1.0.x"
+    eyes "0.1.x"
+    isstream "0.1.x"
+    pkginfo "0.3.x"
+    stack-trace "0.0.x"
+
+winston@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/winston/-/winston-2.3.1.tgz#0b48420d978c01804cf0230b648861598225a119"
+  dependencies:
+    async "~1.0.0"
+    colors "1.0.x"
+    cycle "1.0.x"
+    eyes "0.1.x"
+    isstream "0.1.x"
+    stack-trace "0.0.x"
+
+winston@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/winston/-/winston-1.1.2.tgz#68edd769ff79d4f9528cf0e5d80021aade67480c"
+  dependencies:
+    async "~1.0.0"
+    colors "1.0.x"
+    cycle "1.0.x"
+    eyes "0.1.x"
+    isstream "0.1.x"
+    pkginfo "0.3.x"
+    stack-trace "0.0.x"
+
+winston@^2.1.1:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/winston/-/winston-2.4.0.tgz#808050b93d52661ed9fb6c26b3f0c826708b0aee"
+  dependencies:
+    async "~1.0.0"
+    colors "1.0.x"
+    cycle "1.0.x"
+    eyes "0.1.x"
+    isstream "0.1.x"
+    stack-trace "0.0.x"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@^1.0.0, wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+worker-farm@^1.5.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.6.0.tgz#aecc405976fab5a95526180846f0dba288f3a4a0"
+  dependencies:
+    errno "~0.1.7"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+write-file-atomic@^1.1.2, write-file-atomic@^1.2.0:
+  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.3.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.2"
+
+write@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  dependencies:
+    mkdirp "^0.5.1"
+
+ws@1.1.2:
+  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"
+
+x-is-function@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/x-is-function/-/x-is-function-1.0.4.tgz#5d294dc3d268cbdd062580e0c5df77a391d1fa1e"
+
+x-is-string@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
+
+xdg-basedir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-2.0.0.tgz#edbc903cc385fc04523d966a335504b5504d1bd2"
+  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"
+
+xhr2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.4.tgz#7f87658847716db5026323812f818cadab387a5f"
+
+xml-name-validator@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
+
+xml2js@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.4.tgz#3111010003008ae19240eba17497b57c729c555d"
+  dependencies:
+    sax "0.6.x"
+    xmlbuilder ">=1.0.0"
+
+xml2js@^0.4.17:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"
+
+xmlhttprequest-ssl@1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d"
+
+xregexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
+
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+xxhashjs@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.2.tgz#8a6251567621a1c46a5ae204da0249c7f8caa9d8"
+  dependencies:
+    cuint "^0.2.2"
+
+y18n@^3.2.0, y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
+yallist@^3.0.0, yallist@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
+
+yargs-parser@7.0.0, yargs-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs-parser@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.0.0.tgz#c737c93de2567657750cb1f2c00be639fd19c994"
+  dependencies:
+    camelcase "^4.1.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-parser@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.0.0.tgz#c052931006c5eee74610e5fc0354bedfd08a201b"
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.1.1"
+    find-up "^2.1.0"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^9.0.2"
+
+yargs@3.32.0, yargs@^3.10.0, yargs@^3.32.0:
+  version "3.32.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
+  dependencies:
+    camelcase "^2.0.1"
+    cliui "^3.0.3"
+    decamelize "^1.1.1"
+    os-locale "^1.4.0"
+    string-width "^1.0.1"
+    window-size "^0.1.4"
+    y18n "^3.2.0"
+
+yargs@8.0.2, yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^7.0.0"
+
+yargs@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.0.tgz#90b869934ed6e871115ea2ff58b03f4724ed2d77"
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.1.1"
+    find-up "^2.1.0"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^9.0.2"
+
+yargs@^7.0.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@~1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-1.2.6.tgz#9c7b4a82fd5d595b2bf17ab6dcc43135432fe34b"
+  dependencies:
+    minimist "^0.1.0"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+yeoman-environment@^2.0.0, yeoman-environment@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/yeoman-environment/-/yeoman-environment-2.0.6.tgz#ae1b21d826b363f3d637f88a7fc9ea7414cb5377"
+  dependencies:
+    chalk "^2.1.0"
+    debug "^3.1.0"
+    diff "^3.3.1"
+    escape-string-regexp "^1.0.2"
+    globby "^6.1.0"
+    grouped-queue "^0.3.3"
+    inquirer "^3.3.0"
+    is-scoped "^1.0.0"
+    lodash "^4.17.4"
+    log-symbols "^2.1.0"
+    mem-fs "^1.1.0"
+    text-table "^0.2.0"
+    untildify "^3.0.2"
+
+yeoman-generator@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/yeoman-generator/-/yeoman-generator-2.0.3.tgz#19426ed22687ffe05d31526c3f1c2cf67ba768f3"
+  dependencies:
+    async "^2.6.0"
+    chalk "^2.3.0"
+    cli-table "^0.3.1"
+    cross-spawn "^5.1.0"
+    dargs "^5.1.0"
+    dateformat "^3.0.2"
+    debug "^3.1.0"
+    detect-conflict "^1.0.0"
+    error "^7.0.2"
+    find-up "^2.1.0"
+    github-username "^4.0.0"
+    istextorbinary "^2.1.0"
+    lodash "^4.17.4"
+    make-dir "^1.1.0"
+    mem-fs-editor "^3.0.2"
+    minimist "^1.2.0"
+    pretty-bytes "^4.0.2"
+    read-chunk "^2.1.0"
+    read-pkg-up "^3.0.0"
+    rimraf "^2.6.2"
+    run-async "^2.0.0"
+    shelljs "^0.8.0"
+    text-table "^0.2.0"
+    through2 "^2.0.0"
+    yeoman-environment "^2.0.5"
+
+yn@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"
+
+zip-stream@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"
+  dependencies:
+    archiver-utils "^1.3.0"
+    compress-commons "^1.2.0"
+    lodash "^4.8.0"
+    readable-stream "^2.0.0"
+
+zip-stream@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-0.6.0.tgz#ee933aed996fb18b344a91ae3b5d264cec5e812b"
+  dependencies:
+    compress-commons "~0.3.0"
+    lodash "~3.10.1"
+    readable-stream "~1.0.26"
+
+zone.js@^0.8.26:
+  version "0.8.26"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.26.tgz#7bdd72f7668c5a7ad6b118148b4ea39c59d08d2d"
diff --git a/bower.json b/bower.json
index 970fcaf38283..007371a434d2 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
-  "name": "angular2",
+  "name": "angular",
   "dependencies": {
-    "polymer": "dart-lang/polymer_js#0.8.0-preview"
+    "polymer": "Polymer/polymer#^1.6.0"
   }
 }
diff --git a/browser-providers.conf.js b/browser-providers.conf.js
new file mode 100644
index 000000000000..0239c1013120
--- /dev/null
+++ b/browser-providers.conf.js
@@ -0,0 +1,198 @@
+/**
+ * @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
+ */
+
+// Unique place to configure the browsers which are used in the different CI jobs in Sauce Labs (SL)
+// and BrowserStack (BS).
+// If the target is set to null, then the browser is not run anywhere during CI.
+// If a category becomes empty (e.g. BS and required), then the corresponding job must be commented
+// out in Travis configuration.
+var CIconfiguration = {
+  'Chrome': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
+  'Firefox': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
+  'ChromeBeta': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: false}},
+  'ChromeDev': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
+  // FirefoxBeta and FirefoxDev should be target:'BS' or target:'SL', and required:true
+  // Currently deactivated due to https://github.com/angular/angular/issues/7560
+  'FirefoxBeta': {unitTest: {target: null, required: true}, e2e: {target: null, required: false}},
+  'FirefoxDev': {unitTest: {target: null, required: true}, e2e: {target: null, required: true}},
+  'IE9': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
+  'IE10': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
+  'IE11': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
+  'Edge': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
+  'Android4.4': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
+  'Android5': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
+  'Android6': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
+  'Android7': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
+  'Safari7': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
+  'Safari8': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
+  'Safari9': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
+  'Safari10': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
+  'iOS7': {unitTest: {target: 'BS', required: true}, e2e: {target: null, required: true}},
+  'iOS8': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
+  'iOS9': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
+  'iOS10': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
+  'WindowsPhone': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}}
+};
+
+var customLaunchers = {
+  'DartiumWithWebPlatform':
+      {base: 'Dartium', flags: ['--enable-experimental-web-platform-features']},
+  'ChromeNoSandbox': {base: 'Chrome', flags: ['--no-sandbox']},
+  'SL_CHROME': {base: 'SauceLabs', browserName: 'chrome', version: '60'},
+  'SL_CHROMEBETA': {base: 'SauceLabs', browserName: 'chrome', version: 'beta'},
+  'SL_CHROMEDEV': {base: 'SauceLabs', browserName: 'chrome', version: 'dev'},
+  'SL_FIREFOX': {base: 'SauceLabs', browserName: 'firefox', version: '54'},
+  'SL_FIREFOXBETA':
+      {base: 'SauceLabs', platform: 'Windows 10', browserName: 'firefox', version: 'beta'},
+  'SL_FIREFOXDEV':
+      {base: 'SauceLabs', platform: 'Windows 10', browserName: 'firefox', version: 'dev'},
+  'SL_SAFARI7': {base: 'SauceLabs', browserName: 'safari', platform: 'OS X 10.9', version: '7.0'},
+  'SL_SAFARI8': {base: 'SauceLabs', browserName: 'safari', platform: 'OS X 10.10', version: '8.0'},
+  'SL_SAFARI9': {base: 'SauceLabs', browserName: 'safari', platform: 'OS X 10.11', version: '9.0'},
+  'SL_SAFARI10':
+      {base: 'SauceLabs', browserName: 'safari', platform: 'OS X 10.12', version: '10.0'},
+  'SL_IOS7': {base: 'SauceLabs', browserName: 'iphone', platform: 'OS X 10.10', version: '7.1'},
+  'SL_IOS8': {base: 'SauceLabs', browserName: 'iphone', platform: 'OS X 10.10', version: '8.4'},
+  'SL_IOS9': {base: 'SauceLabs', browserName: 'iphone', platform: 'OS X 10.10', version: '9.3'},
+  'SL_IOS10': {base: 'SauceLabs', browserName: 'iphone', platform: 'OS X 10.10', version: '10.0'},
+  'SL_IE9':
+      {base: 'SauceLabs', browserName: 'internet explorer', platform: 'Windows 2008', version: '9'},
+  'SL_IE10': {
+    base: 'SauceLabs',
+    browserName: 'internet explorer',
+    platform: 'Windows 2012',
+    version: '10'
+  },
+  'SL_IE11':
+      {base: 'SauceLabs', browserName: 'internet explorer', platform: 'Windows 8.1', version: '11'},
+  'SL_EDGE': {
+    base: 'SauceLabs',
+    browserName: 'MicrosoftEdge',
+    platform: 'Windows 10',
+    version: '14.14393'
+  },
+  'SL_ANDROID4.1': {base: 'SauceLabs', browserName: 'android', platform: 'Linux', version: '4.1'},
+  'SL_ANDROID4.2': {base: 'SauceLabs', browserName: 'android', platform: 'Linux', version: '4.2'},
+  'SL_ANDROID4.3': {base: 'SauceLabs', browserName: 'android', platform: 'Linux', version: '4.3'},
+  'SL_ANDROID4.4': {base: 'SauceLabs', browserName: 'android', platform: 'Linux', version: '4.4'},
+  'SL_ANDROID5': {base: 'SauceLabs', browserName: 'android', platform: 'Linux', version: '5.1'},
+  'SL_ANDROID6': {
+    base: 'SauceLabs',
+    browserName: 'Chrome',
+    platform: 'Android',
+    version: '6.0',
+    device: 'Android Emulator'
+  },
+  'SL_ANDROID7': {
+    base: 'SauceLabs',
+    browserName: 'Chrome',
+    platform: 'Android',
+    version: '7.1',
+    device: 'Android GoogleAPI Emulator'
+  },
+
+  'BS_CHROME': {base: 'BrowserStack', browser: 'chrome', os: 'OS X', os_version: 'Yosemite'},
+  'BS_FIREFOX': {base: 'BrowserStack', browser: 'firefox', os: 'Windows', os_version: '10'},
+  'BS_SAFARI7': {base: 'BrowserStack', browser: 'safari', os: 'OS X', os_version: 'Mavericks'},
+  'BS_SAFARI8': {base: 'BrowserStack', browser: 'safari', os: 'OS X', os_version: 'Yosemite'},
+  'BS_SAFARI9': {base: 'BrowserStack', browser: 'safari', os: 'OS X', os_version: 'El Capitan'},
+  'BS_SAFARI10': {base: 'BrowserStack', browser: 'safari', os: 'OS X', os_version: 'Sierra'},
+  'BS_IOS7': {base: 'BrowserStack', device: 'iPhone 5S', os: 'ios', os_version: '7.0'},
+  'BS_IOS8': {base: 'BrowserStack', device: 'iPhone 6', os: 'ios', os_version: '8.3'},
+  'BS_IOS9': {base: 'BrowserStack', device: 'iPhone 6S', os: 'ios', os_version: '9.1'},
+  'BS_IOS10': {base: 'BrowserStack', device: 'iPhone SE', os: 'ios', os_version: '10.0'},
+  'BS_IE9':
+      {base: 'BrowserStack', browser: 'ie', browser_version: '9.0', os: 'Windows', os_version: '7'},
+  'BS_IE10': {
+    base: 'BrowserStack',
+    browser: 'ie',
+    browser_version: '10.1',
+    os: 'Windows',
+    os_version: '8'
+  },
+  'BS_IE11': {
+    base: 'BrowserStack',
+    browser: 'ie',
+    browser_version: '11.0',
+    os: 'Windows',
+    os_version: '10'
+  },
+  'BS_EDGE': {base: 'BrowserStack', browser: 'edge', os: 'Windows', os_version: '10'},
+  'BS_WINDOWSPHONE':
+      {base: 'BrowserStack', device: 'Nokia Lumia 930', os: 'winphone', os_version: '8.1'},
+  'BS_ANDROID7': {base: 'BrowserStack', device: 'Google Pixel', os: 'android', os_version: '7.1'},
+  'BS_ANDROID6': {base: 'BrowserStack', device: 'Google Nexus 6', os: 'android', os_version: '6.0'},
+  'BS_ANDROID5': {base: 'BrowserStack', device: 'Google Nexus 5', os: 'android', os_version: '5.0'},
+  'BS_ANDROID4.4': {base: 'BrowserStack', device: 'HTC One M8', os: 'android', os_version: '4.4'},
+  'BS_ANDROID4.3':
+      {base: 'BrowserStack', device: 'Samsung Galaxy S4', os: 'android', os_version: '4.3'},
+  'BS_ANDROID4.2':
+      {base: 'BrowserStack', device: 'Google Nexus 4', os: 'android', os_version: '4.2'},
+  'BS_ANDROID4.1':
+      {base: 'BrowserStack', device: 'Google Nexus 7', os: 'android', os_version: '4.1'}
+};
+
+var sauceAliases = {
+  'ALL': Object.keys(customLaunchers).filter(function(item) {
+    return customLaunchers[item].base == 'SauceLabs';
+  }),
+  'DESKTOP': [
+    'SL_CHROME', 'SL_FIREFOX', 'SL_IE9', 'SL_IE10', 'SL_IE11', 'SL_EDGE', 'SL_SAFARI7',
+    'SL_SAFARI8', 'SL_SAFARI9', 'SL_SAFARI10'
+  ],
+  'MOBILE': [
+    'SL_ANDROID4.1', 'SL_ANDROID4.2', 'SL_ANDROID4.3', 'SL_ANDROID4.4', 'SL_ANDROID5',
+    'SL_ANDROID6', 'SL_ANDROID7', 'SL_IOS7', 'SL_IOS8', 'SL_IOS9', 'SL_IOS10'
+  ],
+  'ANDROID': [
+    'SL_ANDROID4.1', 'SL_ANDROID4.2', 'SL_ANDROID4.3', 'SL_ANDROID4.4', 'SL_ANDROID5',
+    'SL_ANDROID6', 'SL_ANDROID7'
+  ],
+  'IE': ['SL_IE9', 'SL_IE10', 'SL_IE11'],
+  'IOS': ['SL_IOS7', 'SL_IOS8', 'SL_IOS9', 'SL_IOS10'],
+  'SAFARI': ['SL_SAFARI7', 'SL_SAFARI8', 'SL_SAFARI9', 'SL_SAFARI10'],
+  'BETA': ['SL_CHROMEBETA', 'SL_FIREFOXBETA'],
+  'DEV': ['SL_CHROMEDEV', 'SL_FIREFOXDEV'],
+  'CI_REQUIRED': buildConfiguration('unitTest', 'SL', true),
+  'CI_OPTIONAL': buildConfiguration('unitTest', 'SL', false)
+};
+
+var browserstackAliases = {
+  'ALL': Object.keys(customLaunchers).filter(function(item) {
+    return customLaunchers[item].base == 'BrowserStack';
+  }),
+  'DESKTOP': [
+    'BS_CHROME', 'BS_FIREFOX', 'BS_IE9', 'BS_IE10', 'BS_IE11', 'BS_EDGE', 'BS_SAFARI7',
+    'BS_SAFARI8', 'BS_SAFARI9', 'BS_SAFARI10'
+  ],
+  'MOBILE': [
+    'BS_ANDROID4.3', 'BS_ANDROID4.4', 'BS_ANDROID5', 'BS_ANDROID6', 'BS_ANDROID7', 'BS_IOS7',
+    'BS_IOS8', 'BS_IOS9', 'BS_IOS10', 'BS_WINDOWSPHONE'
+  ],
+  'ANDROID': ['BS_ANDROID4.3', 'BS_ANDROID4.4', 'BS_ANDROID5', 'BS_ANDROID6', 'BS_ANDROID7'],
+  'IE': ['BS_IE9', 'BS_IE10', 'BS_IE11'],
+  'IOS': ['BS_IOS7', 'BS_IOS8', 'BS_IOS9', 'BS_IOS10'],
+  'SAFARI': ['BS_SAFARI7', 'BS_SAFARI8', 'BS_SAFARI9', 'BS_SAFARI10'],
+  'CI_REQUIRED': buildConfiguration('unitTest', 'BS', true),
+  'CI_OPTIONAL': buildConfiguration('unitTest', 'BS', false)
+};
+
+module.exports = {
+  customLaunchers: customLaunchers,
+  sauceAliases: sauceAliases,
+  browserstackAliases: browserstackAliases
+};
+
+function buildConfiguration(type, target, required) {
+  return Object.keys(CIconfiguration)
+      .filter((item) => {
+        var conf = CIconfiguration[item][type];
+        return conf.required === required && conf.target === target;
+      })
+      .map((item) => target + '_' + item.toUpperCase());
+}
diff --git a/build.sh b/build.sh
new file mode 100755
index 000000000000..722b1fc2eafe
--- /dev/null
+++ b/build.sh
@@ -0,0 +1,557 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+readonly currentDir=$(cd $(dirname $0); pwd)
+source ${currentDir}/scripts/ci/_travis-fold.sh
+
+# TODO(i): wrap into subshell, so that we don't pollute CWD, but not yet to minimize diff collision with Jason
+cd ${currentDir}
+
+PACKAGES=(compiler
+  core
+  common
+  animations
+  platform-browser
+  platform-browser-dynamic
+  forms
+  http
+  platform-server
+  platform-webworker
+  platform-webworker-dynamic
+  upgrade
+  router
+  compiler-cli
+  language-service
+  benchpress
+  service-worker
+  elements)
+
+TSC_PACKAGES=(compiler
+  compiler-cli
+  language-service
+  benchpress)
+
+NODE_PACKAGES=(compiler-cli
+  benchpress)
+
+SCOPED_PACKAGES=$(
+  for P in ${PACKAGES[@]}; do echo \\@angular/${P}; done
+)
+NG_UPDATE_PACKAGE_GROUP=$(
+  # The first sed creates an array of strings
+  # The second sed is to allow it to be run in the perl expression so forward slashes don't end
+  #   the regular expression.
+  echo \[\"${SCOPED_PACKAGES[@]}\"] \
+    | sed 's/ /", "/g' \
+    | sed 's/\//\\\//g'
+)
+
+
+BUILD_ALL=true
+BUNDLE=true
+VERSION_PREFIX=$(node -p "require('./package.json').version")
+VERSION_SUFFIX="-$(git log --oneline -1 | awk '{print $1}')"
+REMOVE_BENCHPRESS=false
+BUILD_EXAMPLES=true
+COMPILE_SOURCE=true
+TYPECHECK_ALL=true
+BUILD_TOOLS=true
+export NODE_PATH=${NODE_PATH:-}:${currentDir}/dist/tools
+
+for ARG in "$@"; do
+  case "$ARG" in
+    --quick-bundle=*)
+      COMPILE_SOURCE=false
+      TYPECHECK_ALL=false
+      BUILD_EXAMPLES=false
+      BUILD_TOOLS=false
+      ;;
+    --packages=*)
+      PACKAGES_STR=${ARG#--packages=}
+      PACKAGES=( ${PACKAGES_STR//,/ } )
+      BUILD_ALL=false
+      ;;
+    --bundle=*)
+      BUNDLE=( "${ARG#--bundle=}" )
+      ;;
+    --publish)
+      VERSION_SUFFIX=""
+      REMOVE_BENCHPRESS=true
+      ;;
+    --examples=*)
+      BUILD_EXAMPLES=${ARG#--examples=}
+      ;;
+    --compile=*)
+      COMPILE_SOURCE=${ARG#--compile=}
+      ;;
+    --typecheck=*)
+      TYPECHECK_ALL=${ARG#--typecheck=}
+      ;;
+    --tools=*)
+      BUILD_TOOLS=${ARG#--tools=}
+      ;;
+    *)
+      echo "Unknown option $ARG."
+      exit 1
+      ;;
+  esac
+done
+
+#######################################
+# Verifies a directory isn't in the ignored list
+# Arguments:
+#   param1 - Path to check
+# Returns:
+#   Boolean
+#######################################
+isIgnoredDirectory() {
+  name=$(basename ${1})
+  if [[ -f "${1}" || "${name}" == "src" || "${name}" == "test" || "${name}" == "integrationtest" || "${name}" == "locales" ]]; then
+    return 0
+  else
+    return 1
+  fi
+}
+
+#######################################
+# Check if array contains an element
+# Arguments:
+#   param1 - Element to check
+#   param2 - Array to look for element in
+# Returns:
+#   None
+#######################################
+containsElement () {
+  local e
+  for e in "${@:2}"; do [[ "$e" == "$1" ]] && return 0; done
+  return 1
+}
+
+#######################################
+# Rollup index files recursively, ignoring blacklisted directories
+# Arguments:
+#   param1 - Base source folder
+#   param2 - Destination directory
+#   param3 - Package name
+#   param4 - Is sub directory
+# Returns:
+#   None
+#######################################
+rollupIndex() {
+  # Iterate over the files in this directory, rolling up each into ${2} directory
+  in_file="${1}/${3}.js"
+  if [ ${4:-} ]; then
+    out_file="$(dropLast ${2})/${3}.js"
+  else
+    out_file="${2}/${3}.js"
+  fi
+
+  BANNER_TEXT=`cat ${LICENSE_BANNER}`
+  if [[ -f ${in_file} ]]; then
+    echo "===========           $ROLLUP -i ${in_file} -o ${out_file} --sourcemap -f es --banner BANNER_TEXT >/dev/null 2>&1"
+    $ROLLUP -i ${in_file} -o ${out_file} --sourcemap -f es --banner "$BANNER_TEXT" >/dev/null 2>&1
+  fi
+
+  # Recurse for sub directories
+  for DIR in ${1}/* ; do
+    local sub_package=$(basename "${DIR}")
+    isIgnoredDirectory ${DIR} && continue
+    local regex=".+/(.+)/${sub_package}.js"
+    if [[ "${DIR}/${sub_package}.js" =~ $regex ]]; then
+
+      rollupIndex ${DIR} ${2}/${BASH_REMATCH[1]} ${sub_package} true
+    fi
+  done
+}
+
+#######################################
+# Recursively runs rollup on any entry point that has a "rollup.config.js" file
+# Arguments:
+#   param1 - Base source folder containing rollup.config.js
+# Returns:
+#   None
+#######################################
+runRollup() {
+  if [[ -f "${1}/rollup.config.js" ]]; then
+    cd ${1}
+
+    echo "======           $ROLLUP -c ${1}/rollup.config.js --sourcemap"
+    $ROLLUP -c rollup.config.js --sourcemap >/dev/null 2>&1
+
+    # Recurse for sub directories
+    for DIR in ${1}/* ; do
+      isIgnoredDirectory ${DIR} && continue
+      runRollup ${DIR}
+    done
+  fi
+}
+
+#######################################
+# Adds banners to all files in a directory
+# Arguments:
+#   param1 - Directory to add license banners to
+# Returns:
+#   None
+#######################################
+addBanners() {
+  for file in ${1}/*; do
+    if [[ -f ${file} && "${file##*.}" != "map" ]]; then
+      cat ${LICENSE_BANNER} > ${file}.tmp
+      cat ${file} >> ${file}.tmp
+      mv ${file}.tmp ${file}
+    fi
+  done
+}
+
+#######################################
+# Minifies files in a directory
+# Arguments:
+#   param1 - Directory to minify
+# Returns:
+#   None
+#######################################
+minify() {
+  # Iterate over the files in this directory, rolling up each into ${2} directory
+  regex="(.+).js"
+  files=(${1}/*)
+  echo "${files[@]}"
+  for file in "${files[@]}"; do
+    echo "${file}"
+    base_file=$( basename "${file}" )
+    if [[ "${base_file}" =~ $regex && "${base_file##*.}" != "map" ]]; then
+      local out_file=$(dirname "${file}")/${BASH_REMATCH[1]}.min.js
+      echo "======          $UGLIFY -c --comments -o ${out_file} --source-map "includeSources=true,content='${file}.map',filename='${out_file}.map'" ${file}"
+      $UGLIFY -c --comments -o ${out_file} --source-map "includeSources=true,content='${file}.map',filename='${out_file}.map'" ${file}
+    fi
+  done
+}
+
+#######################################
+# Recursively compile package
+# Arguments:
+#   param1 - Source directory
+#   param2 - Out dir
+#   param3 - Package Name
+# Returns:
+#   None
+#######################################
+compilePackage() {
+  # For TSC_PACKAGES items
+  if containsElement "${3}" "${TSC_PACKAGES[@]}"; then
+    echo "======      [${3}]: COMPILING: ${TSC} -p ${1}/tsconfig-build.json"
+    local package_name=$(basename "${2}")
+    $TSC -p ${1}/tsconfig-build.json
+    if [[ "${3}" = "compiler" ]]; then
+      if [[ "${package_name}" = "testing" ]]; then
+        echo "$(cat ${LICENSE_BANNER}) ${N} export * from './${package_name}/${package_name}'" > ${2}/../${package_name}.d.ts
+      fi
+    fi
+  else
+    echo "======      [${3}]: COMPILING: ${NGC} -p ${1}/tsconfig-build.json"
+    local package_name=$(basename "${2}")
+    $NGC -p ${1}/tsconfig-build.json
+    if [[ "${package_name}" != "locales" ]]; then
+      echo "======           Create ${1}/../${package_name}.d.ts re-export file for tsickle"
+      echo "$(cat ${LICENSE_BANNER}) ${N} export * from './${package_name}/${package_name}'" > ${2}/../${package_name}.d.ts
+      echo "{\"__symbolic\":\"module\",\"version\":3,\"metadata\":{},\"exports\":[{\"from\":\"./${package_name}/${package_name}\"}],\"flatModuleIndexRedirect\":true}" > ${2}/../${package_name}.metadata.json
+    fi
+  fi
+
+  # Build subpackages
+  for DIR in ${1}/* ; do
+    [ -d "${DIR}" ] || continue
+    BASE_DIR=$(basename "${DIR}")
+    # Skip over directories that are not nested entry points
+    [[ -e ${DIR}/tsconfig-build.json && "${BASE_DIR}" != "integrationtest" ]] || continue
+    compilePackage ${DIR} ${2}/${BASE_DIR} ${3}
+  done
+}
+
+#######################################
+# Recursively compile package
+# Arguments:
+#   param1 - Source directory
+#   param2 - Out dir
+#   param3 - Package Name
+# Returns:
+#   None
+#######################################
+compilePackageES5() {
+  if containsElement "${3}" "${TSC_PACKAGES[@]}"; then
+    echo "======      [${3}]: COMPILING: ${TSC} -p ${1}/tsconfig-build.json --target es5 -d false --outDir ${2} --importHelpers true --sourceMap"
+    local package_name=$(basename "${2}")
+    $TSC -p ${1}/tsconfig-build.json --target es5 -d false --outDir ${2} --importHelpers true --sourceMap
+  else
+    echo "======      [${3}]: COMPILING: ${NGC} -p ${1}/tsconfig-build.json --target es5 -d false --outDir ${2} --importHelpers true --sourceMap"
+    local package_name=$(basename "${2}")
+    $NGC -p ${1}/tsconfig-build.json --target es5 -d false --outDir ${2} --importHelpers true --sourceMap
+  fi
+
+  for DIR in ${1}/* ; do
+    [ -d "${DIR}" ] || continue
+    BASE_DIR=$(basename "${DIR}")
+    # Skip over directories that are not nested entry points
+    [[ -e ${DIR}/tsconfig-build.json && "${BASE_DIR}" != "integrationtest" ]] || continue
+    compilePackageES5 ${DIR} ${2} ${3}
+  done
+}
+
+#######################################
+# Adds a package.json in directories where needed (secondary entry point typings).
+# This is read by NGC to be able to find the flat module index.
+# Arguments:
+#   param1 - Source directory of typings files
+# Returns:
+#   None
+#######################################
+addNgcPackageJson() {
+  for DIR in ${1}/* ; do
+    [ -d "${DIR}" ] || continue
+    # Confirm there is an ${PACKAGE}.d.ts and ${PACKAGE}.metadata.json file. If so, create
+    # the package.json and recurse.
+    if [[ -f ${DIR}/${PACKAGE}.d.ts && -f ${DIR}/${PACKAGE}.metadata.json ]]; then
+      echo '{"typings": "${PACKAGE}.d.ts"}' > ${DIR}/package.json
+      addNgcPackageJson ${DIR}
+    fi
+  done
+}
+
+updateVersionReferences() {
+  NPM_DIR="$1"
+  (
+    echo "======      VERSION: Updating version references in ${NPM_DIR}"
+    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
+  )
+}
+
+#######################################
+# Drops the last entry of a path. Similar to normalizing a path such as
+# /parent/child/.. to /parent.
+# Arguments:
+#   param1 - Directory on which to drop the last item
+# Returns:
+#   None
+#######################################
+
+dropLast() {
+  local last_item=$(basename ${1})
+  local regex=local regex="(.+)/${last_item}"
+  if [[ "${1}" =~ $regex ]]; then
+    echo "${BASH_REMATCH[1]}"
+  else
+    echo "${1}"
+  fi
+}
+
+VERSION="${VERSION_PREFIX}${VERSION_SUFFIX}"
+echo "====== BUILDING: Version ${VERSION}"
+
+N="
+"
+TSC=`pwd`/node_modules/.bin/tsc
+NGC="node --max-old-space-size=3000 `pwd`/dist/tools/@angular/compiler-cli/src/main"
+UGLIFY=`pwd`/node_modules/.bin/uglifyjs
+TSCONFIG=./tools/tsconfig.json
+ROLLUP=`pwd`/node_modules/.bin/rollup
+
+if [[ ${BUILD_TOOLS} == true ]]; then
+  travisFoldStart "build tools" "no-xtrace"
+    echo "====== (tools)COMPILING: \$(npm bin)/tsc -p ${TSCONFIG} ====="
+    rm -rf ./dist/tools/
+    mkdir -p ./dist/tools/
+    $(npm bin)/tsc -p ${TSCONFIG}
+  travisFoldEnd "build tools"
+fi
+
+
+if [[ ${BUILD_ALL} == true && ${TYPECHECK_ALL} == true ]]; then
+  travisFoldStart "clean dist" "no-xtrace"
+    rm -rf ./dist/all/
+    rm -rf ./dist/packages
+  travisFoldEnd "clean dist"
+
+  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 .
+    )
+
+    (
+      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"
+    $TSC -p ${TSCONFIG}
+  travisFoldEnd "tsc -p ${TSCONFIG}"
+  TSCONFIG="packages/examples/tsconfig.json"
+  travisFoldStart "tsc -p ${TSCONFIG}" "no-xtrace"
+    $TSC -p ${TSCONFIG}
+  travisFoldEnd "tsc -p ${TSCONFIG}"
+  TSCONFIG="modules/tsconfig.json"
+  travisFoldStart "tsc -p ${TSCONFIG}" "no-xtrace"
+    $TSC -p ${TSCONFIG}
+  travisFoldEnd "tsc -p ${TSCONFIG}"
+
+fi
+
+if [[ ${BUILD_ALL} == true ]]; then
+  rm -rf ./dist/packages
+  if [[ ${BUNDLE} == true ]]; then
+    rm -rf ./dist/packages-dist
+  fi
+fi
+
+if [[ ${BUILD_TOOLS} == true || ${BUILD_ALL} == true ]]; then
+  echo "====== (compiler)COMPILING: \$(npm bin)/tsc -p packages/compiler/tsconfig-tools.json"
+  $(npm bin)/tsc -p packages/compiler/tsconfig-tools.json
+  echo "====== (compiler)COMPILING: \$(npm bin)/tsc -p packages/compiler-cli/tsconfig-tools.json"
+  $(npm bin)/tsc -p packages/compiler-cli/tsconfig-tools.json
+
+  mkdir -p ./dist/packages-dist
+  rsync -a packages/bazel/ ./dist/packages-dist/bazel
+  echo "workspace(name=\"angular\")" > ./dist/packages-dist/bazel/WORKSPACE
+  # Remove BEGIN-INTERNAL...END-INTERAL blocks
+  # https://stackoverflow.com/questions/24175271/how-can-i-match-multi-line-patterns-in-the-command-line-with-perl-style-regex
+  perl -0777 -n -i -e "s/(?m)^.*BEGIN-INTERNAL[\w\W]*END-INTERNAL.*\n//g; print" $(grep -ril BEGIN-INTERNAL dist/packages-dist/bazel) < /dev/null 2> /dev/null
+  # Re-host //packages/bazel/ which is just // in the public distro
+  perl -0777 -n -i -e "s#//packages/bazel/#//#g; print" $(grep -ril packages/bazel dist/packages-dist/bazel) < /dev/null 2> /dev/null
+  perl -0777 -n -i -e "s#angular/packages/bazel/#angular/#g; print" $(grep -ril packages/bazel dist/packages-dist/bazel) < /dev/null 2> /dev/null
+  updateVersionReferences dist/packages-dist/bazel
+fi
+
+for PACKAGE in ${PACKAGES[@]}
+do
+  travisFoldStart "build package: ${PACKAGE}" "no-xtrace"
+  PWD=`pwd`
+  ROOT_DIR=${PWD}/packages
+  SRC_DIR=${ROOT_DIR}/${PACKAGE}
+  ROOT_OUT_DIR=${PWD}/dist/packages
+  OUT_DIR=${ROOT_OUT_DIR}/${PACKAGE}
+  OUT_DIR_ESM5=${ROOT_OUT_DIR}/${PACKAGE}/esm5
+  NPM_DIR=${PWD}/dist/packages-dist/${PACKAGE}
+  ESM2015_DIR=${NPM_DIR}/esm2015
+  FESM2015_DIR=${NPM_DIR}/fesm2015
+  ESM5_DIR=${NPM_DIR}/esm5
+  FESM5_DIR=${NPM_DIR}/fesm5
+  BUNDLES_DIR=${NPM_DIR}/bundles
+
+  LICENSE_BANNER=${ROOT_DIR}/license-banner.txt
+
+  if [[ ${COMPILE_SOURCE} == true ]]; then
+    rm -rf ${OUT_DIR}
+    rm -f ${ROOT_OUT_DIR}/${PACKAGE}.js
+    compilePackage ${SRC_DIR} ${OUT_DIR} ${PACKAGE}
+  fi
+
+  if [[ ${BUNDLE} == true ]]; then
+    echo "======      BUNDLING ${PACKAGE}: ${SRC_DIR} ====="
+    rm -rf ${NPM_DIR} && mkdir -p ${NPM_DIR}
+
+    if ! containsElement "${PACKAGE}" "${NODE_PACKAGES[@]}"; then
+
+      echo "======        Copy ${PACKAGE} typings"
+      rsync -a --exclude=*.js --exclude=*.js.map ${OUT_DIR}/ ${NPM_DIR}
+
+      (
+        cd  ${SRC_DIR}
+        echo "======         Copy ESM2015 for ${PACKAGE}"
+        rsync -a --exclude="locale/**" --exclude="**/*.d.ts" --exclude="**/*.metadata.json" ${OUT_DIR}/ ${ESM2015_DIR}
+
+        echo "======         Rollup ${PACKAGE}"
+        rollupIndex ${OUT_DIR} ${FESM2015_DIR} ${PACKAGE}
+
+        echo "======         Produce ESM5 version"
+        compilePackageES5 ${SRC_DIR} ${OUT_DIR_ESM5} ${PACKAGE}
+        rsync -a --exclude="locale/**" --exclude="**/*.d.ts" --exclude="**/*.metadata.json" ${OUT_DIR_ESM5}/ ${ESM5_DIR}
+        rollupIndex ${OUT_DIR_ESM5} ${FESM5_DIR} ${PACKAGE}
+
+        echo "======         Run rollup conversions on ${PACKAGE}"
+        runRollup ${SRC_DIR}
+        addBanners ${BUNDLES_DIR}
+        minify ${BUNDLES_DIR}
+
+        if [[ -e ${SRC_DIR}/build.sh ]]; then
+          echo "======         Custom build for ${PACKAGE}"
+          cd ${SRC_DIR} && ${SRC_DIR}/build.sh
+        fi
+
+      ) 2>&1 | grep -v "as external dependency"
+
+      if [[ ${PACKAGE} == "common" ]]; then
+        echo "======      Copy i18n locale data"
+        rsync -a ${OUT_DIR}/locales/ ${NPM_DIR}/locales
+      fi
+    else
+      echo "======        Copy ${PACKAGE} node tool"
+      rsync -a ${OUT_DIR}/ ${NPM_DIR}
+    fi
+
+    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}/
+
+    # Replace the NG_UPDATE_PACKAGE_GROUP value with the JSON array of packages.
+    perl -p -i -e "s/\"NG_UPDATE_PACKAGE_GROUP\"/${NG_UPDATE_PACKAGE_GROUP}/g" ${NPM_DIR}/package.json < /dev/null
+
+    cp ${ROOT_DIR}/README.md ${NPM_DIR}/
+  fi
+
+
+  if [[ -d ${NPM_DIR} ]]; then
+    updateVersionReferences ${NPM_DIR}
+  fi
+
+  travisFoldEnd "build package: ${PACKAGE}"
+done
+
+if [[ ${BUILD_EXAMPLES} == true ]]; then
+  travisFoldStart "build examples" "no-xtrace"
+    echo "====== Building examples: ./packages/examples/build.sh ====="
+    ./packages/examples/build.sh
+  travisFoldEnd "build examples"
+fi
+
+if [[ ${REMOVE_BENCHPRESS} == true ]]; then
+  travisFoldStart "remove benchpress" "no-xtrace"
+    echo ""
+    echo "==== Removing benchpress from publication"
+    rm -r dist/packages-dist/benchpress
+  travisFoldEnd "remove benchpress"
+fi
+
+
+# Print return arrows as a log separator
+travisFoldReturnArrows
diff --git a/docs/BAZEL.md b/docs/BAZEL.md
new file mode 100644
index 000000000000..b10552f6faa8
--- /dev/null
+++ b/docs/BAZEL.md
@@ -0,0 +1,232 @@
+# 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
+
+### Installation of ibazel
+
+Install interactive bazel runner / fs watcher via:
+
+```
+yarn global add @bazel/ibazel
+```
+
+## 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 `yarn install` (which depends on whatever
+version you have installed on your machine), you can
+`bazel run @nodejs//:yarn`.
+
+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
+
+## Testing Angular
+
+- Test package in node: `bazel test packages/core/test:test`
+- Test package in karma: `bazel test packages/core/test:test_web`
+- Test all packages: `bazel test packages/...`
+
+You can use [ibazel] to get a "watch mode" that continuously
+keeps the outputs up-to-date as you save sources.
+
+### Various Flags Used For Tests
+
+If you're experiencing problems with seemingly unrelated tests failing, it may be because you're not using the proper flags with your Bazel test runs in Angular.
+
+See also: [`//tools/bazel.rc`](https://github.com/angular/angular/blob/master/tools/bazel.rc) where `--define=ivy=false` is defined as default.
+
+- `--config=debug`: build and launch in debug mode (see [debugging](#debugging) instructions below)
+- `--define=compile=<option>` Controls if ivy or legacy mode is enabled. This is done by generating the [`src/ivy_switch.ts`](https://github.com/angular/angular/blob/master/packages/core/src/ivy_switch.ts) file from [`ivy_switch_legacy.ts`](https://github.com/angular/angular/blob/master/packages/core/src/ivy_switch_legacy.ts) (default), [`ivy_switch_jit.ts`](https://github.com/angular/angular/blob/master/packages/core/src/ivy_switch_jit.ts), or [`ivy_switch_local.ts`](https://github.com/angular/angular/blob/master/packages/core/src/ivy_switch_local.ts).
+    - `legacy`: (default behavior) compile against View Engine, e.g. `--define=compile=legacy`
+    - `jit`: Compile in ivy JIT mode, e.g. `--define=compile=jit`
+    - `local`: Compile in ivy AOT move, e.g. `--define=compile=local`
+- `--test_tag_filters=<tag>`: filter tests down to tags defined in the `tag` config
+of your rules in any given `BUILD.bazel`.
+    - `ivy-jit`: This flag should be set for tests that should be excuted with ivy JIT, e.g. `--test_tag_filters=ivy-jit`. For this, you may have to include `--define=compile=jit`.
+    - `ivy-local`: Only run tests that have to do with ivy AOT. For this, you may have to include `--define=compile=local`, e.g. `--test_tag_filters=ivy-local`..
+    - `ivy-only`: Only run ivy related tests, e.g. `--test_tag_filters=ivy-only`.
+
+
+### Debugging a Node Test
+<a id="debugging"></a>
+
+- Open chrome at: [chrome://inspect](chrome://inspect)
+- Click on  `Open dedicated DevTools for Node` to launch a debugger.
+- Run test: `bazel test packages/core/test:test --config=debug`
+
+The process should automatically connect to the debugger.
+
+### Debugging a Node Test in VSCode
+
+First time setup:
+- Go to Debug > Add configuration (in the menu bar) to open `launch.json`
+- Add the following to the `configurations` array:
+
+```json
+        {
+            "name": "Attach (inspect)",
+            "type": "node",
+            "request": "attach",
+            "port": 9229,
+            "address": "localhost",
+            "restart": false,
+            "sourceMaps": true,
+            "localRoot": "${workspaceRoot}",
+            "remoteRoot": null
+        },
+        {
+            "name": "Attach (no-sm,inspect)",
+            "type": "node",
+            "request": "attach",
+            "port": 9229,
+            "address": "localhost",
+            "restart": false,
+            "sourceMaps": false,
+            "localRoot": "${workspaceRoot}",
+            "remoteRoot": null
+        },
+```
+
+**Setting breakpoints directly in your code files may not work in VSCode**. This is because the files you're actually debugging are built files that exist in a `./private/...` folder.
+The easiest way to debug a test for now is to add a `debugger` statement in the code
+and launch the bazel corresponding test (`bazel test <target> --config=debug`).
+
+Bazel will wait on a connection. Go to the debug view (by clicking on the sidebar or
+Apple+Shift+D on Mac) and click on the green play icon next to the configuration name
+(ie `Attach (inspect)`).
+
+### Debugging a Karma Test
+
+- Run test: `bazel run packages/core/test:test_web`
+- Open chrome at: [http://localhost:9876/debug.html](http://localhost:9876/debug.html)
+- Open chrome inspector
+
+### Debugging Bazel rules
+
+Open `external` directory which contains everything that bazel downloaded while executing the workspace file:
+```sh
+open $(bazel info output_base)/external
+```
+
+See subcommands that bazel executes (helpful for debugging):
+```sh
+bazel build //packages/core:package -s
+```
+
+To debug nodejs_binary executable paths uncomment `find . -name rollup 1>&2` (~ line 96) in
+```sh
+open $(bazel info output_base)/external/build_bazel_rules_nodejs/internal/node_launcher.sh
+```
+
+## Stamping
+
+Bazel supports the ability to include non-hermetic information from the version control system in built artifacts. This is called stamping.
+You can see an overview at https://www.kchodorow.com/blog/2017/03/27/stamping-your-builds/
+In our repo, here is how it's configured:
+
+1) In `tools/bazel_stamp_vars.sh` we run the `git` commands to generate our versioning info.
+1) In `tools/bazel.rc` we register this script as the value for the `workspace_status_command` flag. Bazel will run the script when it needs to stamp a binary.
+
+Note that Bazel has a `--stamp` argument to `bazel build`, but this has no effect since our stamping takes place in Skylark rules. See https://github.com/bazelbuild/bazel/issues/1054
+
+## Remote cache
+
+Bazel supports fetching action results from a cache, allowing a clean build to pick up artifacts from prior builds.
+This makes builds incremental, even on CI.
+It works because Bazel assigns a content-based hash to all action inputs, which is used as the cache key for the action outputs.
+Thanks to the hermeticity property, we can skip executing an action if the inputs hash is already present in the cache.
+
+Of course, non-hermeticity in an action can cause problems.
+At worst, you can fetch a broken artifact from the cache, making your build non-reproducible.
+For this reason, we are careful to implement our Bazel rules to depend only on their inputs.
+
+Currently we only use remote caching on CircleCI.
+We could enable it for developer builds as well, which would make initial builds much faster for developers by fetching already-built artifacts from the cache.
+
+This feature is experimental, and developed by the CircleCI team with guidance from Angular.
+Contact Alex Eagle with questions.
+
+*How it's configured*:
+
+1. In `.circleci/config.yml`, each CircleCI job downloads a proxy binary, which is built from https://github.com/notnoopci/bazel-remote-proxy. The download is done by running `.circleci/setup_cache.sh`. When the feature graduates from experimental, this proxy will be installed by default on every CircleCI worker, and this step will not be needed.
+1. Next, each job runs the `setup-bazel-remote-cache` anchor. This starts up the proxy running in the background. In the CircleCI UI, you'll see this step continues running while later steps run, and you can see logging from the proxy process.
+1. Bazel must be configured to connect to the proxy on a local port. This configuration lives in `.circleci/bazel.rc` and is enabled because we overwrite the system Bazel settings in /etc/bazel.bazelrc with this file.
+1. Each `bazel` command in `.circleci/config.yml` picks up and uses the caching flags.
+
+## Known issues
+
+### Webstorm
+
+The autocompletion in WebStorm can be added via a Bazel plugin intended for IntelliJ IDEA, but the plugin needs to be installed in a special way.
+See [bazelbuild/intellij#246](https://github.com/bazelbuild/intellij/issues/246) for more info.
+
+### Xcode
+
+If you see the following error:
+
+```
+$ bazel build packages/...
+ERROR: /private/var/tmp/[...]/external/local_config_cc/BUILD:50:5: in apple_cc_toolchain rule @local_config_cc//:cc-compiler-darwin_x86_64: Xcode version must be specified to use an Apple CROSSTOOL
+ERROR: Analysis of target '//packages/core/test/render3:render3' failed; build aborted: Analysis of target '@local_config_cc//:cc-compiler-darwin_x86_64' failed; build aborted
+```
+
+It might be linked to an interaction with VSCode.
+If closing VSCode fixes the issue, you can add the following line to your VSCode configuration:
+
+```
+"files.exclude": {"bazel-*": true}
+```
+
+source: https://github.com/bazelbuild/bazel/issues/4603
+
+If VSCode is not the root cause, you might try:
+
+- Quit VSCode (make sure no VSCode is running).
+
+```
+bazel clean --expunge
+sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
+sudo xcodebuild -license
+bazel build //packages/core    # Run a build outside VSCode to pre-build the xcode; then safe to run VSCode
+```
+
+Source: https://stackoverflow.com/questions/45276830/xcode-version-must-be-specified-to-use-an-apple-crosstool
diff --git a/docs/CARETAKER.md b/docs/CARETAKER.md
new file mode 100644
index 000000000000..19038e8ee912
--- /dev/null
+++ b/docs/CARETAKER.md
@@ -0,0 +1,74 @@
+# Caretaker
+
+Caretaker is responsible for merging PRs into the individual branches and internally at Google.
+
+## Responsibilities
+
+- Draining the queue of PRs ready to be merged. (PRs with [`PR action: merge`](https://github.com/angular/angular/pulls?q=is%3Aopen+is%3Apr+label%3A%22PR+action%3A+merge%22) label)
+- Assigning [new issues](https://github.com/angular/angular/issues?q=is%3Aopen+is%3Aissue+no%3Alabel) to individual component authors.
+
+## Merging the PR
+
+A PR needs to have `PR action: merge` and `PR target: *` labels to be considered
+ready to merge. Merging is performed by running `merge-pr` with a PR number to merge.
+
+To merge a PR run:
+
+```
+$ ./scripts/github/merge-pr 1234
+```
+
+The `merge-pr` script will:
+- Ensure that all appropriate labels are on the PR.
+- Fetches the latest PR code from the `angular/angular` repo.
+- It will `cherry-pick` all of the SHAs from the PR into the current corresponding branches `master` and or `?.?.x` (patch).
+- It will rewrite commit history by automatically adding `Close #1234` and `(#1234)` into the commit message.
+
+NOTE: The `merge-pr` will land the PR on `master` and or `?.?.x` (patch) as described by `PR target: *` label.
+
+### Recovering from failed `merge-pr` due to conflicts
+
+When running `merge-pr` the script will output the commands which it is about to run.
+
+```
+$ ./scripts/github/merge-pr 1234
+======================
+GitHub Merge PR Steps
+======================
+   git cherry-pick angular/pr/1234~1..angular/pr/1234
+   git filter-branch -f --msg-filter "/home/misko/angular/scripts/github/utils/github.closes 1234" HEAD~1..HEAD
+```
+
+If the `cherry-pick` command fails than resolve conflicts and use `git cherry-pick --continue` once ready. After the `cherry-pick` is done cut&paste and run the `filter-branch` command to properly rewrite the messages
+
+## Cherry-picking PRs into patch branch
+
+In addition to merging PRs into the master branch, many PRs need to be also merged into a patch branch.
+Follow these steps to get patch branch up to date.
+
+1. Check out the most recent patch branch: `git checkout 4.3.x`
+2. Get a list of PRs merged into master: `git log master --oneline -n10`
+3. For each PR number in the commit message run: `././scripts/github/merge-pr 1234`
+   - The PR will only merge if the `PR target:` matches the branch.
+
+Once all of the PRs are in patch branch, push the all branches and tags to github using `push-upstream` script.
+
+
+## Pushing merged PRs into github
+
+Use `push-upstream` script to push all of the branch and tags to github.
+
+```
+$ ./scripts/github/push-upstream
+git push git@github.com:angular/angular.git master:master 4.3.x:4.3.x
+Counting objects: 25, done.
+Delta compression using up to 6 threads.
+Compressing objects: 100% (17/17), done.
+Writing objects: 100% (25/25), 2.22 KiB | 284.00 KiB/s, done.
+Total 25 (delta 22), reused 8 (delta 7)
+remote: Resolving deltas: 100% (22/22), completed with 18 local objects.
+To github.com:angular/angular.git
+   079d884b6..d1c4a94bb  master -> master
+git push --tags -f git@github.com:angular/angular.git patch_sync:patch_sync
+Everything up-to-date
+```
diff --git a/docs/COMMITTER.md b/docs/COMMITTER.md
new file mode 100644
index 000000000000..6592bc6b3ee9
--- /dev/null
+++ b/docs/COMMITTER.md
@@ -0,0 +1,21 @@
+# Pushing changes into the Angular tree
+
+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.
+Someone with committer access will do the rest.
+
+# Change approvals
+
+Change approvals in our monorepo are managed via [pullapprove.com](https://about.pullapprove.com/) and are configured via the `.pullapprove.yaml` file.
+
+
+# Merging
+
+Once a change has all the approvals either the last approver or the PR author (if PR author has the project collaborator status) should mark the PR with `PR: merge` as well as `PR target: *` labels.
+This signals to the caretaker that the PR should be merged. See [merge instructions](../CARETAKER.md).
+
+# Who is the Caretaker?
+
+See [this explanation](https://twitter.com/IgorMinar/status/799365744806854656).
diff --git a/docs/DEBUG.md b/docs/DEBUG.md
new file mode 100644
index 000000000000..af98cafb78ff
--- /dev/null
+++ b/docs/DEBUG.md
@@ -0,0 +1,59 @@
+# Debugging Angular
+
+The Angular project has comprehensive unit tests for the core packages and the tools.
+The core packages are tested both in the browser (via Karma) and on the server (via Node.js).
+
+## Debugging in Karma
+
+Run the unit tests as normal using via the `./test.sh` script. For example:
+
+```bash
+./test.sh browserNoRouter
+```
+
+Once the initial build has completed and the Karma server has started up, you can go to the
+Chrome browser that is automatically opened, usually pointing to `http://localhost:9876`.
+The script will sit watching for code changes, recompiling the changed files and triggering
+further runs of the unit tests in the browser.
+
+In this browser there is a "DEBUG" link (in the top right corner). Clicking this link will
+open up a new tab that will run the unit tests and will not timeout, giving you time to
+step through the code.
+
+Open up this tab's developer console to access the source code viewer where you can set
+breakpoints and interrogate the current stack and variables.
+
+It is useful to focus your debugging on one test at a time by changing that test to be
+defined using the `fit(...)` function, rather than `it(...)`. Moreover it can be helpful
+to place a `debugger` statement in this `fit` clause to cause the debugger to stop when
+it hits this test.
+
+## Debugging in Node
+
+Run the unit tests as normal using the `./test.sh` script, but add the `--debug` flag to
+the command. For example:
+
+```bash
+./test.sh node --debug
+```
+
+Once the initial building has completed, the script will watch for code changes, recompiling
+and running the unit tests via a tool call `cjs-jasmine`. Due to the `--debug` flag, each
+test run will create a debugging server listening on a port (such as 9229), which can be
+connected to by a debugger.
+
+You can use Chrome as the debugger by navigating to `chrome://inspect` then clicking the
+"Open dedicated DevTools for Node" link. This will open up a Developer console, which will
+automatically connect to the debugging server.
+
+It is useful to focus your debugging on one test at a time by changing that test to be
+defined using the `fit(...)` function, rather than `it(...)`. Moreover it can be helpful
+to place a `debugger` statement in this `fit` clause to cause the debugger to stop when
+it hits this test.
+
+**Problem with node 6:** at the time of writing, the node process does not tell the Chrome
+debugger when it has completed, and so the debugger is not able to automatically disconnect
+from listening to the debugging server. To solve this, just close the developer tools window
+after each run of the unit tests, before making changes to the code.  This is fixed in node 8
+and may be backported to node 6. This issue is tracked in
+https://github.com/nodejs/node/pull/12814#issuecomment-309908579.
diff --git a/docs/DEVELOPER.md b/docs/DEVELOPER.md
new file mode 100644
index 000000000000..ba0b2e24c270
--- /dev/null
+++ b/docs/DEVELOPER.md
@@ -0,0 +1,169 @@
+# Building and Testing Angular
+
+This document describes how to set up your development environment to build and test Angular.
+It also explains the basic mechanics of using `git`, `node`, and `npm`.
+
+* [Prerequisite Software](#prerequisite-software)
+* [Getting the Sources](#getting-the-sources)
+* [Installing NPM Modules](#installing-npm-modules)
+* [Building](#building)
+* [Running Tests Locally](#running-tests-locally)
+
+See the [contribution guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md)
+if you'd like to contribute to Angular.
+
+## Prerequisite Software
+
+Before you can build and test Angular, you must install and configure the
+following products on your development machine:
+
+* [Git](http://git-scm.com) and/or the **GitHub app** (for [Mac](http://mac.github.com) or
+  [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 specified in the engines field of [`package.json`](../package.json)) which is used to run a development web server,
+  run tests, and generate distributable files.
+
+* [Yarn](https://yarnpkg.com) (version specified in the engines field of [`package.json`](../package.json)) which is used to install dependencies.
+
+* [Java Development Kit](http://www.oracle.com/technetwork/es/java/javase/downloads/index.html) which is used
+  to execute the selenium standalone server for e2e testing.
+
+* (Optional for now) [Bazel](https://bazel.build/), please follow instructions in [BAZEL.md](https://github.com/angular/angular/blob/master/docs/BAZEL.md)
+
+## Getting the Sources
+
+Fork and clone the Angular repository:
+
+1. Login to your GitHub account or create one by following the instructions given
+   [here](https://github.com/signup/free).
+2. [Fork](http://help.github.com/forking) the [main Angular
+   repository](https://github.com/angular/angular).
+3. Clone your fork of the Angular repository and define an `upstream` remote pointing back to
+   the Angular repository that you forked in the first place.
+
+```shell
+# Clone your GitHub repository:
+git clone git@github.com:<github username>/angular.git
+
+# Go to the Angular directory:
+cd angular
+
+# Add the main Angular repository as an upstream remote to your repository:
+git remote add upstream https://github.com/angular/angular.git
+```
+## Installing NPM Modules
+
+Next, install the JavaScript modules needed to build and test Angular:
+
+```shell
+# Install Angular project dependencies (package.json)
+yarn install
+```
+
+**Optional**: In this document, we make use of installed npm package scripts and binaries
+(stored under `./node_modules/.bin`) by prefixing these command invocations with `$(yarn bin)`; in
+particular `gulp` and `protractor` commands.
+
+
+
+## Windows only
+
+In order to create the right symlinks, run **as administrator**:
+```shell
+./scripts/windows/create-symlinks.sh
+```
+
+Before submitting a PR, do not forget to remove them:
+```shell
+ ./scripts/windows/remove-symlinks.sh
+ ```
+
+## Building
+
+To build Angular run:
+
+```shell
+./build.sh
+```
+
+* Results are put in the dist folder.
+
+## Running Tests Locally
+
+To run tests:
+
+```shell
+$ ./test.sh node             # Run all angular tests on node
+
+$ ./test.sh browser          # Run all angular tests in browser
+
+$ ./test.sh browserNoRouter  # Optionally run all angular tests without router in browser
+
+$ ./test.sh router           # Optionally run only the router tests in browser
+```
+
+You should execute the 3 test suites before submitting a PR to github.
+
+See [DEBUG.md](DEBUG.md) for information on debugging the code while running the unit tests.
+
+All the tests are executed on our Continuous Integration infrastructure and a PR could only be merged once the tests pass.
+
+- CircleCI fails if your code is not formatted properly,
+- Travis CI fails if any of the test suites described above fails.
+
+## <a name="clang-format"></a> Formatting your source code
+
+Angular uses [clang-format](http://clang.llvm.org/docs/ClangFormat.html) to format the source code. If the source code
+is not properly formatted, the CI will fail and the PR can not be merged.
+
+You can automatically format your code by running:
+
+``` shell
+$ gulp format
+```
+
+There is a handy [clang-format extension](https://marketplace.visualstudio.com/items?itemName=xaver.clang-format)
+for Visual Studio Code. Use the following settings to format your code when you save a file:
+
+```json
+{
+    "editor.formatOnSave": true,
+    "clang-format.executable": "${workspaceRoot}/node_modules/.bin/clang-format"
+}
+```
+
+## Linting/verifying your source code
+
+You can check that your code is properly formatted and adheres to coding style by running:
+
+``` shell
+$ gulp lint
+```
+
+## Publishing snapshot builds
+
+When a build of any branch on the upstream fork angular/angular is green on CircleCI,
+it automatically publishes build artifacts
+to repositories in the Angular org, eg. the `@angular/core` package is published to
+http://github.com/angular/core-builds.
+
+You may find that your un-merged change needs some validation from external participants.
+Rather than requiring them to pull your Pull Request and build Angular locally, you can
+publish the `*-builds` snapshots just like our Travis build does.
+
+First time, you need to create the github repositories:
+
+``` shell
+$ export TOKEN=[get one from https://github.com/settings/tokens]
+$ CREATE_REPOS=1 TRAVIS= ./scripts/ci/publish-build-artifacts.sh [github username]
+```
+
+For subsequent snapshots, just run
+
+``` shell
+$ ./scripts/publish/publish-build-artifacts.sh [github username]
+```
+
+The script will publish the build snapshot to a branch with the same name as your current branch,
+and create it if it doesn't exist.
diff --git a/docs/NAMING.md b/docs/NAMING.md
new file mode 100644
index 000000000000..a04cdcf012e4
--- /dev/null
+++ b/docs/NAMING.md
@@ -0,0 +1,32 @@
+Naming Conventions in Angular
+---
+
+In general Angular should follow TypeScript naming conventions.
+See: https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines
+
+
+Classes:
+  - Example: `Compiler`, `ApplicationMetadata`
+  - 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 
+    interface.
+  
+  
+Interfaces:
+  - Follow the same rules as Classes 
+  - Should not have `I` or `Interface` in the name or any other way of identifying it as an interface.
+
+  
+Methods and functions:
+  - Example: `bootstrap`, `someMethod`
+  - Should be camel case with first letter lowercase
+
+
+Constants:
+  - Example: `CORE_DIRECTIVES`
+  - Should be all uppercase with SNAKE_CASE
+
+
+
diff --git a/docs/PR_REVIEW.md b/docs/PR_REVIEW.md
new file mode 100644
index 000000000000..5a4278513a9d
--- /dev/null
+++ b/docs/PR_REVIEW.md
@@ -0,0 +1,155 @@
+# PR Review
+
+## Tools
+
+A better way to do a code-review of a PR is to do it in your IDE.
+Here are two scripts which allow you to perform the review and create local changes which can be appended to the PR.
+
+### 1. Loading PR
+
+Run this command to load the changes into your local repository where your IDE is running.
+
+```
+$ ./scripts/github/review-pr 24623
+```
+
+This will result in output:
+
+```
+Already on 'master'
+Your branch is up to date with 'origin/master'.
+Fetching pull request #24623 with 1 SHA(s) into branch range: pr/24623_base..pr/24623_top
+======================================================================================
+cef93a51b (pr/24623_top) ci: scripts to review PRs locally
+======================================================================================
+Switched to a new branch 'pr/24623'
+On branch pr/24623
+Untracked files:
+  (use "git add <file>..." to include in what will be committed)
+
+        docs/PR_REVIEW.md
+        scripts/github/push-pr
+        scripts/github/review-pr
+
+nothing added to commit but untracked files present (use "git add" to track)
+```
+
+Note that the script created `pr/24623_top` and `pr/24623_base` branches which denote SHAs where the PR start and end.
+
+```
+cef93a51b (pr/24623_top) ci: scripts to review PRs locally
+637805a0c (pr/24623_base) docs: update `lowercase` pipe example in "AngularJS to Angular" guide (#24588)
+```
+
+Knowing `pr/24623_top` and `pr/24623_base` makes it convenient to refer to different SHAs in PR when rebasing or reseting. 
+
+### 2. Review PR
+
+Because the script has reset the `HEAD` of the PR the changes show up as unstaged files.
+
+```
+$ git status
+On branch pr/24623
+Untracked files:
+  (use "git add <file>..." to include in what will be committed)
+
+        docs/PR_REVIEW.md
+        scripts/github/push-pr
+        scripts/github/review-pr
+
+nothing added to commit but untracked files present (use "git add" to track)
+```
+
+Use your IDE to review the untracked files as needed.
+A good trick is to use your IDE to stage the files which were already reviewed.
+When all files are staged the review is done.
+
+### 3. Creating Edits
+
+At any point you can edit any line in the repository.
+The idea is to create edits locally and push them to the PR later.
+This is useful because it is often times easier to make minor changes locally than to request the PR author to change and repush through a comment (often times the comment is larger than the change.)
+
+Example of a local edit.
+```
+echo "# here is a change" >> docs/PR_REVIEW.md
+```
+
+### 4. Creating a Commit From Local Edits
+
+Since the HEAD has been reset to `pr/24623_base` so that changes show up in `git status` we have to reverse the reset to only see our local changes.
+To do that reset the `HEAD` to `pr/24623_top`.
+
+```
+$ git reset pr/24623_top
+```
+
+Doing so will remove all PR changes and only leave your local modifications which you have done.
+You can verify by running `git status` and `git diff` to see only your changes (PR changes have been removed.)
+
+```
+$ git status
+On branch pr/24623
+Changes not staged for commit:
+  (use "git add <file>..." to update what will be committed)
+  (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   docs/PR_REVIEW.md
+
+no changes added to commit (use "git add" and/or "git commit -a")
+```
+```
+$ git diff
+diff --git a/docs/PR_REVIEW.md b/docs/PR_REVIEW.md
+index 184b5aeca..83517fbe0 100644
+--- a/docs/PR_REVIEW.md
++++ b/docs/PR_REVIEW.md
+@@ -8,4 +8,4 @@ A better way to do code review of the PR is to do it in your IDE. Here are two s
+existing text
+-
+\ No newline at end of file
++# here is a change
+```
+
+Next step is to turn your local changes into a `fixup!` commit.
+Run `git commit --all --fixup HEAD` to create a `fixup!` commit.
+
+NOTE: If you added new files they must be added using `git add .` or they will not be picked up by the `git commit --all` flag.
+
+```
+$ git commit --all --fixup HEAD
+[pr/24623 45ae87ce4] fixup! ci: scripts to review PRs locally
+ 1 file changed, 1 insertion(+), 1 deletion(-)
+```
+
+You can verify that the `fixup!` commit with your local modifications was created.
+```
+$ git log --oneline
+45ae87ce4 (HEAD -> pr/24623) fixup! ci: scripts to review PRs locally
+cef93a51b (pr/24623_top) ci: scripts to review PRs locally
+```
+
+### 5. Pushing local edits back to the PR
+
+The last step is to push your local changes back into the PR. 
+Use `./scripts/github/push-pr` script for that.
+
+```
+$ ./scripts/github/push-pr
+Assuming PR #24623
+>>> git push  git@github.com:mhevery/angular.git HEAD:review_pr_script
+Counting objects: 4, done.
+Delta compression using up to 8 threads.
+Compressing objects: 100% (4/4), done.
+Writing objects: 100% (4/4), 392 bytes | 392.00 KiB/s, done.
+Total 4 (delta 3), reused 0 (delta 0)
+remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
+To github.com:mhevery/angular.git
+   cef93a51b..45ae87ce4  HEAD -> review_pr_script
+```
+
+NOTE: Notice that we did not have to specify the PR number since the script can guess it from the branch name.
+
+If you visit https://github.com/angular/angular/pull/24623/commits you will see that your `fixup!` commit has been added to the PR.
+This greatly simplifies the work for many minor changes to the PR. 
+
diff --git a/docs/PUBLIC_API.md b/docs/PUBLIC_API.md
new file mode 100644
index 000000000000..80c73a7a6fae
--- /dev/null
+++ b/docs/PUBLIC_API.md
@@ -0,0 +1,45 @@
+# Supported Public API Surface of Angular
+
+Our semver, timed-release cycle and deprecation policy currently applies to these npm packages:
+
+- `@angular/animations`
+- `@angular/core`
+- `@angular/common`
+- `@angular/elements`
+- `@angular/forms`
+- `@angular/http`
+- `@angular/platform-browser`
+- `@angular/platform-browser-dynamic`
+- `@angular/platform-server`
+- `@angular/platform-webworker`
+- `@angular/platform-webworker-dynamic`
+- `@angular/upgrade`
+- `@angular/router`
+- `@angular/service-worker`
+
+
+One intentional omission from this list is `@angular/compiler`, which is currently considered a low level api and is subject to internal changes. These changes will not affect any applications or libraries using the higher-level apis (the command line interface or JIT compilation via `@angular/platform-browser-dynamic`). Only very specific use-cases require direct access to the compiler API (mostly tooling integration for IDEs, linters, etc). If you are working on this kind of integration, please reach out to us first.
+
+Package `@angular/bazel` is currently an Angular Labs project and not covered by the public API guarantees.
+
+Additionally only the command line usage (not direct use of APIs) of `@angular/compiler-cli` is covered.
+
+Other projects developed by the Angular team like angular-cli, Angular Material, will be covered by these or similar guarantees in the future as they mature.
+
+Within the supported packages, we provide guarantees for:
+
+- symbols exported via the main entry point (e.g. `@angular/core`) and testing entry point (e.g. `@angular/core/testing`). This applies to both runtime/JavaScript values and TypeScript types.
+- symbols exported via global namespace `ng` (e.g. `ng.core`)
+- bundles located in the `bundles/` directory of our npm packages (e.g. `@angular/core/bundles/core.umd.js`)
+
+
+We explicitly don't consider the following to be our public API surface:
+
+- any file/import paths within our package except for the `/`, `/testing` and `/bundles/*` and other documented package entry-points.
+- constructors of injectable classes (services and directives) - please use DI to obtain instances of these classes
+- any class members or symbols marked as `private`, or prefixed with underscore (`_`) and [barred latin o](https://en.wikipedia.org/wiki/%C6%9F) (`ɵ`)
+- extending any of our classes unless the support for this is specifically documented in the API docs
+- the contents and API surface of the code generated by Angular's compiler (with one notable exception: the existence and name of `NgModuleFactory` instances exported from generated code is guaranteed)
+
+
+Our peer dependencies (e.g. TypeScript, Zone.js, or RxJS) are not considered part of our API surface, but they are included in our SemVer policies. We might update the required version of any of these dependencies in minor releases if the update doesn't cause breaking changes for Angular applications. Peer dependency updates that result in non-trivial breaking changes must be deferred to major Angular releases.
diff --git a/docs/RELEASE_SCHEDULE.md b/docs/RELEASE_SCHEDULE.md
new file mode 100644
index 000000000000..ee976eb90269
--- /dev/null
+++ b/docs/RELEASE_SCHEDULE.md
@@ -0,0 +1,6 @@
+# Angular Release Schedule
+
+The Angular release schedule has moved. 
+
+See [Angular releases](https://angular.io/guide/releases "Angular releases") for information about release policies and practices&mdash;including deprecation and support practices&mdash;as well as estimated dates for our next major releases. 
+
diff --git a/docs/SAVED_REPLIES.md b/docs/SAVED_REPLIES.md
new file mode 100644
index 000000000000..b381f8df4e0a
--- /dev/null
+++ b/docs/SAVED_REPLIES.md
@@ -0,0 +1,72 @@
+# Saved Responses for Angular's Issue Tracker
+
+The following are canned responses that the Angular team should use to close issues on our issue tracker that fall into the listed resolution categories.
+
+Since GitHub currently doesn't allow us to have a repository-wide or organization-wide list of [saved replies](https://help.github.com/articles/working-with-saved-replies/), these replies need to be maintained by individual team members. Since the responses can be modified in the future, all responses are versioned to simplify the process of keeping the responses up to date.
+
+
+## Angular: Already Fixed (v2)
+```
+Thanks for reporting this issue. Luckily it has already been fixed in one of the recent releases. Please update to the most recent version to resolve the problem.
+
+If after upgrade the problem still exists in your application please open a new issue and provide a StackBlitz reproducing the problem and describing the difference between the expected and current behavior. You can use this StackBlitz template: https://stackblitz.com/fork/angular-gitter
+```
+
+## Angular: Don't Understand (v2)
+```
+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 StackBlitz reproducing the problem and describing the difference between the expected and current behavior. You can use this StackBlitz template: https://stackblitz.com/fork/angular-gitter
+```
+
+## Angular: StackBlitz Needed (v1)
+```
+I'm sorry but reported issues require a StackBlitz reproducing the problem.
+
+If this issue persists, please create a StackBlitz using this template and describe the difference between the expected and current behavior and create a new issue: https://stackblitz.com/fork/angular-gitter
+```
+
+## Angular: Duplicate (v1)
+```
+Thanks for reporting this issue. However this issue is a duplicate of an existing issue #<ISSUE_NUMBER>. Please subscribe to that issue for future updates.
+```
+
+
+## Angular: Insufficient Information Provided (v1)
+```
+Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out [our submission guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-submitting-an-issue) to understand why we can't act on issues that are lacking important information.
+
+If the problem still persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.
+```
+
+## Angular: Issue Outside of Angular (v1)
+```
+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)
+```
+I'm sorry but we can't reproduce the problem following the instructions you provided.
+
+If the problem still exists please open a new issue following [our submission guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-submitting-an-issue).
+```
+
+## Angular: Obsolete (v1)
+```
+Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular version.
+
+If the problem still persists, please file a new issue and ensure you provide the version of Angular affected and include the steps to reproduce the problem when filling out the issue template.
+```
+
+
+## Angular: Support Request (v1)
+```
+Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on [StackOverflow](http://stackoverflow.com/) using tag `angular`.
+
+If you are wondering why we don't resolve support issues via the issue tracker, please [check out this explanation](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-got-a-question-or-problem).
+```
diff --git a/docs/TOOLS.md b/docs/TOOLS.md
new file mode 100644
index 000000000000..6a8d36614252
--- /dev/null
+++ b/docs/TOOLS.md
@@ -0,0 +1,146 @@
+# Developer Tools for Angular
+
+Here you will find a collection of tools and tips for keeping your application
+perform well and contain fewer bugs.
+
+## Angular debug tools in the dev console
+
+Angular provides a set of debug tools that are accessible from any browser's
+developer console. In Chrome the dev console can be accessed by pressing
+Ctrl + Shift + j.
+
+### Enabling debug tools
+
+By default the debug tools are disabled. You can enable debug tools as follows:
+
+```typescript
+import {ApplicationRef} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {enableDebugTools} from '@angular/platform-browser';
+
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .then(moduleRef => {
+    const applicationRef = moduleRef.injector.get(ApplicationRef);
+    const appComponent = applicationRef.components[0];
+    enableDebugTools(appComponent);
+  })
+```
+
+### Using debug tools
+
+In the browser open the developer console (Ctrl + Shift + j in Chrome). The
+top level object is called `ng` and contains more specific tools inside it.
+
+Example:
+
+```javascript
+ng.profiler.timeChangeDetection();
+```
+
+## Performance
+
+### 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
+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
+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 within the 16 millisecond frame
+(assuming the 60 FPS target frame rate).
+
+Change detection profiler repeatedly performs change detection without invoking
+any user actions, such as clicking buttons or entering text in input fields. It
+then computes the average amount of time it took to perform a single cycle of
+change detection in milliseconds and prints it to the console. This number
+depends on the current state of the UI. You will likely see different numbers
+as you go from one screen in your application to another.
+
+#### Running the profiler
+
+Enable debug tools (see above), then in the dev console enter the following:
+
+```javascript
+ng.profiler.timeChangeDetection();
+```
+
+The results will be printed to the console.
+
+#### Recording CPU profile
+
+Pass `{record: true}` an argument:
+
+```javascript
+ng.profiler.timeChangeDetection({record: true});
+```
+
+Then open the "Profiles" tab. You will see the recorded profile titled
+"Change Detection". In Chrome, if you record the profile repeatedly, all the
+profiles will be nested under "Change Detection".
+
+#### Interpreting the numbers
+
+In a properly-designed application repeated attempts to detect changes without
+any user actions should result in no changes to be applied on the UI. It is
+also desirable to have the cost of a user action be proportional to the amount
+of UI changes required. For example, popping up a menu with 5 items should be
+vastly faster than rendering a table of 500 rows and 10 columns. Therefore,
+change detection with no UI updates should be as fast as possible. Ideally the
+number printed by the profiler should be well below the length of a single
+animation frame (16ms). A good rule of thumb is to keep it under 3ms.
+
+#### Investigating slow change detection
+
+So you found a screen in your application on which the profiler reports a very
+high number (i.e. >3ms). This is where a recorded CPU profile can help. Enable
+recording while profiling:
+
+```javascript
+ng.profiler.timeChangeDetection({record: true});
+```
+
+Then look for hot spots using
+[Chrome CPU profiler](https://developer.chrome.com/devtools/docs/cpu-profiling).
+
+#### Reducing change detection cost
+
+There are many reasons for slow change detection. To gain intuition about
+possible causes it would help to understand how change detection works. Such a
+discussion is outside the scope of this document (TODO link to docs), but here
+are some key concepts in brief.
+
+By default Angular uses "dirty checking" mechanism for finding model changes.
+This mechanism involves evaluating every bound expression that's active on the
+UI. These usually include text interpolation via `{{expression}}` and property
+bindings via `[prop]="expression"`. If any of the evaluated expressions are
+costly to compute they could contribute to slow change detection. A good way to
+speed things up is to use plain class fields in your expressions and avoid any
+kinds of computation. Example:
+
+```typescript
+@Component({
+  template: '<button [enabled]="isEnabled">{{title}}</button>'
+})
+class FancyButton {
+  // GOOD: no computation, just return the value
+  isEnabled: boolean;
+
+  // BAD: computes the final value upon request
+  _title: String;
+  get title(): String { return this._title.trim().toUpperCase(); }
+}
+```
+
+Most cases like these could be solved by precomputing the value and storing the
+final value in a field.
+
+Angular also supports a second type of change detection - the "push" model. In
+this model Angular does not poll your component for changes. Instead, the
+component "tells" Angular when it changes and only then does Angular perform
+the update. This model is suitable in situations when your data model uses
+observable or immutable objects (also a discussion for another time).
diff --git a/docs/TRIAGE_AND_LABELS.md b/docs/TRIAGE_AND_LABELS.md
new file mode 100644
index 000000000000..248ba91084a4
--- /dev/null
+++ b/docs/TRIAGE_AND_LABELS.md
@@ -0,0 +1,163 @@
+# Triage Process and GitHub Labels for Angular
+
+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 (`comp: *`) label.
+The owner of the component is then responsible for the secondary / component-level triage.
+
+
+## Label Types
+
+### Components
+
+The caretaker should be able to determine which component the issue belongs to.
+The components have a clear piece of source code associated with it within the `/packages/` folder of this repo.
+
+* `comp: docs-infra` - the angular.io application
+* `comp: animations`
+* `comp: bazel` - @angular/bazel rules
+* `comp: benchpress`
+* `comp: common` - this includes core components / pipes
+* `comp: common/http` - 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: ivy` - a subset of core representing the new Ivy renderer.
+* `comp: elements`
+* `comp: forms`
+* `comp: http`
+* `comp: i18n`
+* `comp: language-service`
+* `comp: metadata-extractor`
+* `comp: router`
+* `comp: server`
+* `comp: service-worker`
+* `comp: testing`
+* `comp: upgrade/dynamic`
+* `comp: upgrade/static`
+* `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: build & ci` - build and CI infrastructure for the angular/angular repo
+* `comp: docs` - documentation, including API docs, guides, tutorial
+* `comp: packaging` - packaging format of @angular/* npm packages
+* `comp: performance`
+* `comp: security`
+
+Sometimes, especially in the case of cross-cutting issues or PRs, these PRs or issues belong to multiple components.
+In these cases, all applicable component labels should be used to triage the issue or PR.
+
+
+### Type
+
+What kind of problem is this?
+
+* `type: RFC / discussion / question`
+* `type: bug`
+* `type: docs`
+* `type: feature`
+* `type: performance`
+* `type: refactor`
+
+
+## Caretaker Triage Process (Primary Triage)
+
+It is the caretaker's responsibility to assign `comp:  *` to each new issue as they come in.
+
+If it's obvious that the issue or PR is related to a release regression, the caretaker is also responsible for assigning the `severity(5): regression` label to make the issue or PR highly visible.
+
+The primary triage should be done on a daily basis so that the issues become available for secondary triage without much of delay.
+
+The reason why we limit the responsibility of the caretaker to this one label is that it is likely that without domain knowledge the caretaker could mislabel issues or lack knowledge of duplicate issues.
+
+
+## Component's owner Triage Process
+
+The component owner is responsible for assigning one of the labels from each of these categories:
+
+- `type: *`
+- `frequency: *`
+- `severity: *`
+
+We've adopted the issue categorization based on [user pain](http://www.lostgarden.com/2008/05/improving-bug-triage-with-user-pain.html) used by AngularJS. In this system every issue is assigned frequency and severity based on which the total user pain score is calculated.
+
+Following is the definition of various frequency and severity levels:
+
+1. `freq(score): *` – How often does this issue come up? How many developers does this affect?
+    * low (1) - obscure issue affecting a handful of developers
+    * moderate (2) - impacts auxiliary usage patterns, only small number of applications are affected
+    * high (3) - impacts primary usage patterns, affecting most Angular apps
+    * critical (4) - impacts all Angular apps
+1. `severity(score): *` - How bad is the issue?
+    * inconvenience (1) - causes ugly/boilerplate code in apps
+    * confusing (2) - unexpected or inconsistent behavior; hard-to-debug
+    * broken expected use (3) - it's hard or impossible for a developer using Angular to accomplish something that Angular should be able to do
+    * memory leak (4)
+    * regression (5) - functionality that used to work no longer works in a new release due to an unintentional change
+    * security issue (6)
+
+
+These criteria are then used to calculate a "user pain" score as follows:
+
+`pain = severity × frequency`
+
+This score can then be used to estimate the impact of the issue which helps with prioritization.
+
+
+## Triaging PRs
+
+Triaging PRs is the same as triaging issues, except that PRs have additional label categories that should be used to signal their state.
+
+Every triaged PR must have a `pr_action` label assigned to it:
+
+* `PR action: review` - work is complete and comment is needed from the reviewers.
+* `PR action: cleanup` - more work is needed from the author.
+* `PR action: discuss` - discussion is needed, to be led by the author.
+* `PR action: merge` - the PR is ready to be merged by the caretaker.
+
+In addition, PRs can have the following states:
+
+* `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 or merge.
+
+
+## PR Target
+
+In our git workflow, we merge changes either to the `master` branch, the active patch branch (e.g. `5.0.x`), or to both.
+
+The decision about the target must be done by the PR author and/or reviewer.
+This decision is then honored when the PR is being merged by the caretaker.
+
+To communicate the target we use the following labels:
+
+* `PR target: master & patch`: the PR should me merged into the master branch and cherry-picked into the most recent patch branch. All PRs with fixes, docs and refactorings should use this target.
+* `PR target: master-only`: the PR should be merged only into the `master` branch. All PRs with new features, API changes or high-risk changes should use this target.
+* `PR target: patch-only`: the PR should be merged only into the most recent patch branch (e.g. 5.0.x). This target is useful if a `master & patch` PR can't be cleanly cherry-picked into the stable branch and a new PR is needed.
+* `PR target: LTS-only`: the PR should be merged only into the active LTS branch(es). Only security and critical fixes are allowed in these branches. Always send a new PR targeting just the LTS branch and request review approval from @IgorMinar.
+* `PR target: TBD`: the target is yet to be determined.
+
+If a PR is missing the "PR target: *" label, or if the label is set to "TBD" when the PR is sent to the caretaker, the caretaker should reject the PR and request the appropriate target label to be applied before the PR is merged.
+
+
+## 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.
+Only the `PR action: merge` label means that the PR is ready for merging.
+
+
+## Special Labels
+
+### `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.
+
+### `aio: preview`
+Applying this label to a PR makes the angular.io preview available regardless of the author. [More info](../aio/aio-builds-setup/docs/overview--security-model.md)
diff --git a/docs/angular.io-package/index.js b/docs/angular.io-package/index.js
deleted file mode 100644
index 965b08c0d687..000000000000
--- a/docs/angular.io-package/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-var path = require('canonical-path');
-var Package = require('dgeni').Package;
-var basePackage = require('../public-docs-package');
-
-var PARTIAL_PATH = 'partials';
-var MODULES_DOCS_PATH = PARTIAL_PATH + '/api';
-
-module.exports = new Package('angular.io', [basePackage])
-
-.factory(require('./services/renderMarkdown'))
-.processor(require('./processors/addJadeDataDocsProcessor'))
-
-// Configure rendering
-.config(function(templateFinder, templateEngine) {
-
-  templateFinder.templateFolders
-      .unshift(path.resolve(__dirname, 'templates'));
-})
-
-.config(function(writeFilesProcessor) {
-  writeFilesProcessor.outputFolder  = 'dist/angular.io';
-})
-
-.config(function(readFilesProcessor, generateNavigationDoc, createOverviewDump, createTypeDefinitionFile) {
-  // Clear out unwanted processors
-  readFilesProcessor.$enabled = false;
-  generateNavigationDoc.$enabled = false;
-  createOverviewDump.$enabled = false;
-  createTypeDefinitionFile.$enabled = false;
-})
-
-
-
-
-.config(function(computeIdsProcessor, computePathsProcessor, EXPORT_DOC_TYPES) {
-
-  computePathsProcessor.pathTemplates.push({
-    docTypes: ['module'],
-    pathTemplate: '${id}/',
-    outputPathTemplate: MODULES_DOCS_PATH + '/${id}/index.jade'
-  });
-
-  computePathsProcessor.pathTemplates.push({
-    docTypes: EXPORT_DOC_TYPES,
-    pathTemplate: '${moduleDoc.id}/${name}-${docType}.html',
-    outputPathTemplate: MODULES_DOCS_PATH + '/${moduleDoc.id}/${name}-${docType}.jade',
-  });
-
-  computePathsProcessor.pathTemplates.push({
-    docTypes: ['jade-data'],
-    pathTemplate: '${originalDoc.id}/_data',
-    outputPathTemplate: MODULES_DOCS_PATH + '/${path}.json'
-  });
-})
-
-.config(function(getLinkInfo) {
-  getLinkInfo.relativeLinks = true;
-});
\ No newline at end of file
diff --git a/docs/angular.io-package/processors/addJadeDataDocsProcessor.js b/docs/angular.io-package/processors/addJadeDataDocsProcessor.js
deleted file mode 100644
index 0481574c81cf..000000000000
--- a/docs/angular.io-package/processors/addJadeDataDocsProcessor.js
+++ /dev/null
@@ -1,76 +0,0 @@
-var _ = require('lodash');
-var path = require('canonical-path');
-
-var titleCase = function(text) {
-  return text.replace(/(.)(.*)/, function(_, first, rest) {
-    return first.toUpperCase() + rest;
-  });
-};
-
-/*
-* Create _data.json file for Harp pages
-*
-* http://harpjs.com/docs/development/metadata
-*
-* This method creates the meta data required for each page
-* such as the title, description, etc. This meta data is used
-* in the harp static site generator to create the title for headers
-* and the navigation used in the API docs
-*
-*/
-
-module.exports = function addJadeDataDocsProcessor() {
-  return {
-    $runAfter: ['adding-extra-docs'],
-    $runBefore: ['extra-docs-added'],
-    $process: function(docs) {
-      var extraDocs = [];
-      var modules = [];
-
-
-      /*
-      * Create Data for Modules
-      *
-      * Modules must be public and have content
-      */
-
-      _.forEach(docs, function(doc) {
-        if (doc.docType === 'module' && doc.public && doc.exports.length) {
-          modules.push(doc);
-
-          // GET DATA FOR INDEX PAGE OF MODULE SECTION
-          var indexPageInfo = [{
-            name: 'index',
-            title: _.map(path.basename(doc.fileInfo.baseName).split('_'), function(part) {
-              return titleCase(part);
-            }).join(' '),
-            intro: doc.description.replace('"', '\"').replace(/\r?\n|\r/g,"")
-          }];
-
-          // GET DATA FOR EACH PAGE (CLASS, VARS, FUNCTIONS)
-          var modulePageInfo  = _.map(doc.exports, function(exportDoc) {
-            return {
-              name: exportDoc.name + '-' + exportDoc.docType,
-              title: exportDoc.name + ' ' + titleCase(exportDoc.docType)
-            };
-          });
-
-          //COMBINE PAGE DATA
-          var allPageData = indexPageInfo.concat(modulePageInfo);
-
-          // PUSH DATA TO EXTRA DOCS ARRAY
-          extraDocs.push({
-            id: doc.id + "-data",
-            aliases: [doc.id + "-data"],
-            docType: 'jade-data',
-            originalDoc: doc,
-            data: allPageData
-          });
-        }
-      });
-
-
-      return docs.concat(extraDocs);
-    }
-  };
-};
\ No newline at end of file
diff --git a/docs/angular.io-package/services/renderMarkdown.js b/docs/angular.io-package/services/renderMarkdown.js
deleted file mode 100644
index 45b8acee625d..000000000000
--- a/docs/angular.io-package/services/renderMarkdown.js
+++ /dev/null
@@ -1,50 +0,0 @@
-var marked = require('marked');
-var Encoder = require('node-html-encoder').Encoder;
-var html2jade = require('html2jade');
-var indentString = require('indent-string');
-var S = require('string');
-
-// entity type encoder
-var encoder = new Encoder('entity');
-
-
-
-/**
- * @dgService renderMarkdown
- * @description
- * Render the markdown in the given string as HTML.
- */
-module.exports = function renderMarkdown(trimIndentation) {
-
-  var renderer = new marked.Renderer();
-
-  renderer.code = function(code, lang, escaped) {
-
-    var cssClasses = ['prettyprint', 'linenums'];
-    var trimmedCode = trimIndentation(code);
-
-    if(lang) {
-      if(lang=='html') {
-        trimmedCode = encoder.htmlEncode(trimmedCode);
-      }
-      cssClasses.push(this.options.langPrefix + escape(lang, true));
-    }
-
-    return 'pre(class="' + cssClasses.join(' ') + '")\n' + indentString('code.\n', ' ', 2) + trimmedCode;
-  };
-
-  renderer.heading = function (text, level, raw) {
-    var headingText = marked.Renderer.prototype.heading.call(renderer, text, level, raw);
-    var title = 'h2 ' + S(headingText).stripTags().s;
-
-    if (level==2) {
-      title = '.l-main-section\n' + indentString(title, ' ', 2) ;
-    }
-
-    return title;
-  };
-
-  return function(content) {
-    return marked(content, { renderer: renderer });
-  };
-};
\ No newline at end of file
diff --git a/docs/angular.io-package/templates/class.template.html b/docs/angular.io-package/templates/class.template.html
deleted file mode 100644
index 841077020cb9..000000000000
--- a/docs/angular.io-package/templates/class.template.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{% include "lib/githubLinks.html" -%}
-{% include "lib/paramList.html" -%}
-{% extends 'layout/base.template.html' -%}
-
-{% block body %}
-p.location-badge.
-  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
-  defined in {$ githubViewLink(doc) $}
-
-:markdown
-{$ doc.description | indent(2, true) $}
-
-{%- if doc.constructorDoc or doc.members.length -%}
-.l-main-section
-  h2 Members
-
-{%- if doc.constructorDoc %}
-  .l-sub-section
-    h3 {$ doc.constructorDoc.name $}
-
-    {% if doc.constructorDoc.parameters %}
-    pre.prettyprint
-      code.
-        {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(4, true) | trim $}
-    {% endif %}
-    :markdown
-{$ doc.constructorDoc.description | indent(6, true) | replace('## Example', '') | replace('# Example', '') $}
-
-
-{% endif -%}
-
-{%- for member in doc.members %}{% if not member.private %}
-  .l-sub-section
-    h3 {$ member.name $}
-
-    {% if member.parameters %}
-    pre.prettyprint
-      code.
-        {$ member.name $}{$ paramList(member.parameters) | indent(4, true) | trim $}{$ returnType(doc.returnType) $}
-    {% endif %}
-    :markdown
-
-{$ member.description | indent(6, true) | replace('## Example', '') | replace('# Example', '')  $}
-
-
-
-{% endif %}{% endfor %}
-{%- endif -%}
-
-{% endblock %}
\ No newline at end of file
diff --git a/docs/angular.io-package/templates/function.template.html b/docs/angular.io-package/templates/function.template.html
deleted file mode 100644
index 7426f9f9ec90..000000000000
--- a/docs/angular.io-package/templates/function.template.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{% include "lib/githubLinks.html" -%}
-{% include "lib/paramList.html" -%}
-{% extends 'layout/base.template.html' -%}
-
-{% block body %}
-.l-main-section
-  h2(class="function export") {$ doc.name $}
-
-  {% if doc.parameters %}
-  pre.prettyprint
-    code.
-      {$ doc.name $}{$ paramList(doc.parameters) | indent(4, true) | trim $}{$ returnType(doc.returnType) $}
-  {% endif %}
-
-  p.location-badge.
-    exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
-    defined in {$ githubViewLink(doc) $}
-
-  :markdown
-{$ doc.description | indent(4, true) $}
-
-{% endblock %}
\ No newline at end of file
diff --git a/docs/angular.io-package/templates/jade-data.template.html b/docs/angular.io-package/templates/jade-data.template.html
deleted file mode 100644
index fcafb63db7b1..000000000000
--- a/docs/angular.io-package/templates/jade-data.template.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-{%- for item in doc.data %}
-  "{$ item.name $}" : {
-    "title" : "{$ item.title $}"{% if item.intro %},
-    "intro" : "{$ item.intro $}"{% endif %}
-  }{% if not loop.last %},{% endif %}
-{% endfor -%}
-}
\ No newline at end of file
diff --git a/docs/angular.io-package/templates/layout/base.template.html b/docs/angular.io-package/templates/layout/base.template.html
deleted file mode 100644
index 16a0d9dc96f0..000000000000
--- a/docs/angular.io-package/templates/layout/base.template.html
+++ /dev/null
@@ -1 +0,0 @@
-{% block body %}{% endblock %}
\ No newline at end of file
diff --git a/docs/angular.io-package/templates/lib/paramList.html b/docs/angular.io-package/templates/lib/paramList.html
deleted file mode 100644
index 24ba12c080b7..000000000000
--- a/docs/angular.io-package/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/docs/angular.io-package/templates/module.template.html b/docs/angular.io-package/templates/module.template.html
deleted file mode 100644
index 1bc24aeff7d8..000000000000
--- a/docs/angular.io-package/templates/module.template.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{% include "lib/githubLinks.html" -%}
-{% extends 'layout/base.template.html' -%}
-{% block body -%}
-p.location-badge.
-  defined in {$ githubViewLink(doc) $}
-
-ul
-  for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
-    if slug != 'index'
-      url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html"
-
-      li.c8
-        != partial("../../../../../_includes/_hover-card", {name: page.title, url: url })
-
-{% endblock %}
\ No newline at end of file
diff --git a/docs/angular.io-package/templates/var.template.html b/docs/angular.io-package/templates/var.template.html
deleted file mode 100644
index a7d59866f7ba..000000000000
--- a/docs/angular.io-package/templates/var.template.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% include "lib/githubLinks.html" -%}
-{% extends 'layout/base.template.html' %}
-
-{% block body %}
-.l-main-section
-  h2 {$ doc.name $} <span class="type">variable</span>
-  p.location-badge.
-    exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
-    defined in {$ githubViewLink(doc) $}
-
-  :markdown
-{$ doc.description | indent(4, true) $}
-{% endblock %}
\ No newline at end of file
diff --git a/docs/app/css/app.css b/docs/app/css/app.css
deleted file mode 100644
index ac23dd0c82d9..000000000000
--- a/docs/app/css/app.css
+++ /dev/null
@@ -1,379 +0,0 @@
-
-.hide { display: none !important; }
-
-body {
-  overflow: hidden;
-  max-width: 100%;
-  max-height: 100%;
-  font-size: 14px;
-}
-
-a {
-  color: #3f51b5;
-}
-
-table {
-  margin-bottom: 20px;
-  max-width: 100%;
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-  background-color: transparent;
-}
-
-td,
-th {
-  padding: $baseline-grid ($baseline-grid * 2);
-  border-top: 1px solid #ddd;
-  vertical-align: top;
-}
-
-th {
-  border-bottom: 2px solid #ddd;
-  vertical-align: bottom;
-}
-
-pre {
-  white-space: pre;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-.md-sidenav-inner {
-  background: #fff;
-}
-
-.layout-content,
-.doc-content {
-  max-width: 864px;
-  margin: auto;
-}
-.layout-label {
-  width: 120px;
-}
-.layout-content code.highlight {
-  margin-bottom: 15px;
-}
-
-.menu-item {
-  background: none;
-  border-width: 0;
-  cursor: pointer;
-  display: block;
-  color: #333;
-  font-size: inherit;
-  line-height: 40px;
-  max-height: 40px;
-  opacity: 1;
-  margin: 0;
-  outline: none;
-  padding: 0px 28px;
-  position: relative;
-  text-align: left;
-  text-decoration: none;
-  width: 100%;
-  z-index: 1;
-  -webkit-transition: 0.45s cubic-bezier(0.35, 0, 0.25, 1);
-  -webkit-transition-property: max-height, background-color, opacity;
-  -moz-transition: 0.45s cubic-bezier(0.35, 0, 0.25, 1);
-  -moz-transition-property: max-height, background-color, opacity;
-  transition: 0.45s cubic-bezier(0.35, 0, 0.25, 1);
-  transition-property: max-height, background-color, opacity;
-}
-.menu-item.ng-hide {
-  max-height: 0;
-  opacity: 0;
-}
-.menu-item:hover {
-  color: #999;
-}
-.menu-item:focus {
-  font-weight: bold;
-}
-.menu-item.menu-title {
-  color: #888;
-  font-size: 14px;
-  padding-left: 16px;
-  text-align: left;
-  text-transform: uppercase;
-  transition: color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
-}
-.menu-item.menu-title:hover,
-.menu-item.menu-title.active {
-  color: #1976d2;
-}
-
-.menu-icon {
-  background: none;
-  border: none;
-}
-.app-toolbar .md-toolbar-tools h3 {
-  -webkit-margin-before: 0;
-  -webkit-margin-after: 0;
-}
-
-.demo-container {
-  border-radius: 4px;
-  margin-top: 16px;
-  -webkit-transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
-  transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
-  position: relative;
-  padding-bottom: 0;
-}
-.demo-source-tabs {
-  z-index: 1;
-  -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
-  transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
-  max-height: 448px;
-  min-height: 448px;
-  background: #fff;
-  overflow: hidden;
-}
-
-md-tabs.demo-source-tabs md-tab,
-md-tabs.demo-source-tabs .md-header {
-  background-color: #444444 !important;
-}
-
-
-md-tabs.demo-source-tabs md-tab-label {
-  color: #ccc !important;
-}
-
-md-tabs.demo-source-tabs .active md-tab-label {
-  color: #fff !important;
-}
-
-.demo-source-tabs.ng-hide {
-  max-height: 0px;
-  min-height: 0px;
-}
-.demo-source-tabs {
-  position: relative;
-  width: 100%;
-  z-index: 0;
-}
-.demo-content {
-  position: relative;
-  overflow:hidden;
-  min-height: 448px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-.small-demo .demo-source-tabs:not(.ng-hide) {
-  min-height: 224px;
-  max-height: 224px;
-}
-.small-demo .demo-content {
-  min-height: 128px;
-}
-.demo-content > * {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  -moz-box-flex: 1;
-  -moz-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.demo-content > div[layout-fill] {
-  min-height: 448px;
-}
-.small-demo .demo-content > div[layout-fill] {
-  min-height: 224px;
-}
-.small-demo .demo-toolbar,
-.small-demo .md-toolbar-tools {
-  min-height: 48px;
-  max-height: 48px;
-  font-size: 20px;
-}
-
-.show-source md-toolbar.demo-toolbar {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
-}
-.demo-toolbar .md-button {
-  color: #616161;
-}
-
-md-toolbar.demo-toolbar,
-.demo-source-tabs md-tab,
-.demo-source-tabs .tabs-header {
-  background: #E0E0E0 !important;
-  color: #616161;
-}
-md-toolbar.demo-toolbar md-tab-label {
-  color: #99E4EE
-}
-md-toolbar.demo-toolbar .md-button:hover,
-md-toolbar.demo-toolbar .md-button:focus,
-md-toolbar.demo-toolbar .md-button.active {
-  background: rgba(0,0,0,0.1);
-}
-
-md-toolbar.demo-toolbar .md-button {
-  -webkit-transition: all 0.3s linear;
-  -moz-transition: all 0.3s linear;
-  transition: all 0.3s linear;
-}
-.demo-source-container {
-  display: block;
-  border: 1px solid #ddd;
-  background-color: #f6f6f6;
-  height: 400px;
-}
-
-.demo-source-content {
-  height: 400px;
-}
-.demo-source-content,
-.demo-source-content pre,
-.demo-source-content code {
-  background: #f6f6f6;
-  font-family: monospace;
-}
-.demo-source-content pre {
-  max-width: 100%;
-  overflow-wrap: break-word;
-}
-
-.show-source div[demo-include] {
-  border-top: #ddd solid 2px;
-}
-
-
-.menu-separator-icon {
-  margin: 0;
-}
-.menu-module-name {
-  opacity: 0.6;
-  font-size: 18px;
-}
-
-/************
- * DOCS
- ************/
-.api-options-bar .md-button {
-  margin: 4px;
-  padding: 4px;
-}
-.api-options-bar .md-button:hover,
-.api-options-bar .md-button:focus {
-  background: rgba(0, 0, 0, 0.2);
-}
-.api-options-bar.with-icon md-icon {
-  position: absolute;
-  top: -3px;
-  left: 2px;
-}
-.api-options-bar.with-icon .md-button span {
-  margin-left: 22px;
-}
-
-.api-params-item {
-  min-height: 72px;
-  border-bottom: 1px solid #ddd;
-}
-.api-params-label {
-  margin-right: 8px;
-  text-align: center;
-  margin-top: 14px;
-  -webkit-align-self: flex-start;
-  -moz-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
-}
-.api-params-title {
-  color: #888;
-}
-code.api-type {
-  font-weight: bold;
-}
-
-ul {
-  margin: 0;
-}
-ul li {
-  margin-top: 3px;
-  list-style-position: inside;
-}
-ul li:first-child {
-  margin-top: 0;
-}
-
-.layout-title {
-  color: #999999;
-  font-size: 14px;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-.api-params-content ul {
-  padding-left: 4px;
-}
-ul.methods > li {
-  margin-bottom: 48px;
-}
-
-ul.methods .method-function-syntax {
-  font-weight: normal;
-  font-size: 20px;
-  margin: 0;
-  -webkit-margin-before: 0;
-  -webkit-margin-after: 0;
-}
-ul.methods li h3 {
-  /* border-bottom: 1px solid #eee; */
-}
-
-@media (max-width: 600px) {
-  ul.methods > li {
-    padding-left: 0;
-    border-left: none;
-    list-style: default;
-  }
-  ul.methods .method-function-syntax {
-    font-size: 14px;
-  }
-}
-
-.version {
-    padding-left: 10px;
-    text-decoration: underline;
-    font-size: 0.95em;
-}
-
-.demo-source-container pre,
-.demo-source-container code {
-  min-height: 100%;
-}
-
-md-content.demo-source-container > hljs > pre > code.highlight {
-  position : absolute;
-  top : 0px;
-  left: 0px;
-  right: 0px;
-}
-
-
-.extraPad {
-  padding-left:32px !important;
-  padding-right:32px !important;
-}
-
-
-.member .name {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  font-family: monospace;
-  font-size: 1.17em;
-  margin: 1em 0;
-}
-
-.left-nav {
-  min-width: 300px;
-}
\ No newline at end of file
diff --git a/docs/app/css/prettify-theme.css b/docs/app/css/prettify-theme.css
deleted file mode 100644
index 7308e1ec719f..000000000000
--- a/docs/app/css/prettify-theme.css
+++ /dev/null
@@ -1,142 +0,0 @@
-/* GitHub Theme */
-.prettyprint {
-  background: white;
-  font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.lang-text * {
-  color: #333333!important;
-}
-
-.pln {
-  color: #333333;
-}
-
-@media screen {
-  .str {
-    color: #dd1144;
-  }
-
-  .kwd {
-    color: #333333;
-  }
-
-  .com {
-    color: #999988;
-  }
-
-  .typ {
-    color: #445588;
-  }
-
-  .lit {
-    color: #445588;
-  }
-
-  .pun {
-    color: #333333;
-  }
-
-  .opn {
-    color: #333333;
-  }
-
-  .clo {
-    color: #333333;
-  }
-
-  .tag {
-    color: navy;
-  }
-
-  .atn {
-    color: teal;
-  }
-
-  .atv {
-    color: #dd1144;
-  }
-
-  .dec {
-    color: #333333;
-  }
-
-  .var {
-    color: teal;
-  }
-
-  .fun {
-    color: #990000;
-  }
-}
-@media print, projection {
-  .str {
-    color: #006600;
-  }
-
-  .kwd {
-    color: #006;
-    font-weight: bold;
-  }
-
-  .com {
-    color: #600;
-    font-style: italic;
-  }
-
-  .typ {
-    color: #404;
-    font-weight: bold;
-  }
-
-  .lit {
-    color: #004444;
-  }
-
-  .pun, .opn, .clo {
-    color: #444400;
-  }
-
-  .tag {
-    color: #006;
-    font-weight: bold;
-  }
-
-  .atn {
-    color: #440044;
-  }
-
-  .atv {
-    color: #006600;
-  }
-}
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/* IE indents via margin-left */
-li.L0,
-li.L1,
-li.L2,
-li.L3,
-li.L4,
-li.L5,
-li.L6,
-li.L7,
-li.L8,
-li.L9 {
-  /* */
-}
-
-/* Alternate shading for lines */
-li.L1,
-li.L3,
-li.L5,
-li.L7,
-li.L9 {
-  /* */
-}
diff --git a/docs/app/index.html b/docs/app/index.html
deleted file mode 100644
index 3bfb05b69e3c..000000000000
--- a/docs/app/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Angular 2 Docs</title>
-  <base href="/">
-
-  <link rel="stylesheet" type="text/css" href="/lib/angular-material/angular-material.css">
-  <link rel="stylesheet" type="text/css" href="/css/prettify-theme.css">
-  <link rel="stylesheet" type="text/css" href="/css/app.css">
-
-  <script src="/lib/hammerjs/hammer.js"></script>
-  <script src="/lib/google-code-prettify/src/prettify.js"></script>
-  <script src="/lib/google-code-prettify/src/lang-css.js"></script>
-  <script src="/lib/angular/angular.js"></script>
-  <script src="/lib/angular-animate/angular-animate.js"></script>
-  <script src="/lib/angular-aria/angular-aria.js"></script>
-  <script src="/lib/angular-material/angular-material.js"></script>
-  <script src="/js/navigation-modules.js"></script>
-  <script src="/js/navigation-guides.js"></script>
-  <script src="/js/app.js"></script>
-  <script src="/js/code.js"></script>
-</head>
-<body ng-app="app" ng-controller="NavController as nav" layout="column">
-
-  <md-toolbar md-scroll-shrink>
-    <h1 class="md-toolbar-tools">Angular V2</h1>
-  </md-toolbar>
-
-  <section layout="row">
-
-    <md-content class="left-nav">
-      <h2>Navigation</h2>
-      <section ng-repeat="area in nav.areas">
-        <h3>{{ area.name }}</h3>
-        <md-list>
-          <md-item ng-repeat="section in area.sections">
-            <h3><a href="{{section.path}}">{{section.name}}</a></h3>
-            <ul>
-              <li ng-repeat="page in section.pages">
-                <a href="{{page.path}}">{{ page.name }}</a>
-              </li>
-            </ul>
-          </md-item>
-        </md-list>
-        </section>
-    </md-content>
-
-
-    <md-content class="md-padding">
-      <ng-include autoscroll src="nav.currentPage.partial"></ng-include>
-    </md-content>
-
-  </section>
-</body>
-</html>
\ No newline at end of file
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
deleted file mode 100644
index cfdc53015959..000000000000
--- a/docs/app/js/app.js
+++ /dev/null
@@ -1,46 +0,0 @@
-angular.module('app', ['ngMaterial', 'navigation-modules', 'navigation-guides', 'code'])
-
-.config(function($locationProvider) {
-  $locationProvider.html5Mode(true);
-})
-
-.controller('NavController', ['$scope', '$location', 'MODULES', 'GUIDES',
-                  function($scope, $location, MODULES, GUIDES) {
-  var that = this;
-
-  this.areas = [
-    { name: 'Guides', sections: [ { pages: GUIDES.pages } ] },
-    { name: 'Modules', sections: MODULES.sections }
-  ];
-
-  this.updateCurrentPage = function(path) {
-    console.log('path', path);
-    this.currentPage = null;
-
-    this.areas.forEach(function(area) {
-      area.sections.forEach(function(section) {
-
-        // Short-circuit out if the page has been found
-        if ( that.currentPage ) {
-          return;
-        }
-
-        if (section.path === path) {
-          console.log('found!');
-          that.currentPage = section;
-        } else {
-          section.pages.forEach(function(page) {
-            if (page.path === path) {
-              that.currentPage = page;
-            }
-          });
-        }
-      });
-    });
-  };
-
-  $scope.$watch(
-    function getLocationPath() { return $location.path(); },
-    function handleLocationPathChange(path) { that.updateCurrentPage(path); }
-  );
-}]);
diff --git a/docs/app/js/code.js b/docs/app/js/code.js
deleted file mode 100644
index 0550459d50d0..000000000000
--- a/docs/app/js/code.js
+++ /dev/null
@@ -1,15 +0,0 @@
-angular.module('code', [])
-
-.directive('code', function() {
-  return {
-    restrict: 'E',
-    terminal: true,
-    compile: function(element) {
-      var linenums = element.hasClass('linenum');
-      var match = /lang-(\S+)/.exec(element[0].className);
-      var lang = match && match[1];
-      var html = element.html();
-      element.html(window.prettyPrintOne(html, lang, linenums));
-    }
-  };
-});
diff --git a/docs/bower.json b/docs/bower.json
deleted file mode 100644
index 86cf418b25fb..000000000000
--- a/docs/bower.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "angular-docs",
-  "main": "index.js",
-  "version": "0.0.0",
-  "homepage": "https://github.com/angular/angular",
-  "authors": [],
-  "license": "Apache-2.0",
-  "private": true,
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "angular-material": "~0.6.0",
-    "google-code-prettify": "~1.0.3"
-  }
-}
diff --git a/docs/dgeni-package/index.js b/docs/dgeni-package/index.js
deleted file mode 100644
index fca60b697657..000000000000
--- a/docs/dgeni-package/index.js
+++ /dev/null
@@ -1,172 +0,0 @@
-require('../../tools/transpiler/index.js').init();
-
-var Package = require('dgeni').Package;
-var jsdocPackage = require('dgeni-packages/jsdoc');
-var nunjucksPackage = require('dgeni-packages/nunjucks');
-var linksPackage = require('../links-package');
-var gitPackage = require('dgeni-packages/git');
-var path = require('canonical-path');
-
-var PARTIAL_PATH = 'partials';
-var MODULES_DOCS_PATH = PARTIAL_PATH + '/modules';
-var GUIDES_PATH = PARTIAL_PATH + '/guides';
-
-// Define the dgeni package for generating the docs
-module.exports = new Package('angular', [jsdocPackage, nunjucksPackage, linksPackage, gitPackage])
-
-// Register the services and file readers
-.factory(require('./services/modules'))
-.factory(require('./services/tsParser'))
-.factory(require('./services/tsParser/createCompilerHost'))
-.factory(require('./services/tsParser/getFileInfo'))
-.factory(require('./services/tsParser/getExportDocType'))
-.factory(require('./services/tsParser/getContent'))
-.factory(require('./readers/ngdoc'))
-
-.factory('EXPORT_DOC_TYPES', function() {
-  return [
-    'class',
-    'interface',
-    'function',
-    'var',
-    'const',
-    'enum',
-    'type-alias'
-  ];
-})
-
-
-// Register the processors
-.processor(require('./processors/readTypeScriptModules'))
-.processor(require('./processors/generateNavigationDoc'))
-.processor(require('./processors/extractTitleFromGuides'))
-.processor(require('./processors/createOverviewDump'))
-.processor(require('./processors/createTypeDefinitionFile'))
-
-
-// Configure the log service
-.config(function(log) {
-  log.level = 'warn';
-})
-
-
-.config(function(renderDocsProcessor, versionInfo) {
-  renderDocsProcessor.extraData.versionInfo = versionInfo;
-})
-
-// Configure file reading
-.config(function(readFilesProcessor, ngdocFileReader, readTypeScriptModules) {
-  readFilesProcessor.fileReaders = [ngdocFileReader];
-  readFilesProcessor.basePath = path.resolve(__dirname, '../..');
-  readFilesProcessor.sourceFiles = [
-    { include: 'modules/*/docs/**/*.md', basePath: 'modules' },
-    { include: 'docs/content/**/*.md', basePath: 'docs/content' }
-  ];
-
-  readTypeScriptModules.sourceFiles = [
-    '*/*.@(js|es6|ts)',
-    '*/src/**/*.@(js|es6|ts)'
-  ];
-  readTypeScriptModules.basePath = 'modules';
-})
-
-
-.config(function(parseTagsProcessor, getInjectables) {
-  parseTagsProcessor.tagDefinitions.push(require('./tag-defs/public'));
-  parseTagsProcessor.tagDefinitions.push(require('./tag-defs/private'));
-  parseTagsProcessor.tagDefinitions.push(require('./tag-defs/exportedAs'));
-
-  // We actually don't want to parse param docs in this package as we are getting the data out using TS
-  parseTagsProcessor.tagDefinitions.forEach(function(tagDef) {
-    if (tagDef.name === 'param') {
-      tagDef.docProperty = 'paramData';
-      tagDef.transforms = [];
-    }
-  });
-
-})
-
-
-// Configure links
-.config(function(getLinkInfo) {
-  getLinkInfo.useFirstAmbiguousLink = true;
-})
-
-
-// Configure file writing
-.config(function(writeFilesProcessor) {
-  writeFilesProcessor.outputFolder  = 'dist/docs';
-})
-
-
-// Configure rendering
-.config(function(templateFinder, templateEngine) {
-
-  // Nunjucks and Angular conflict in their template bindings so change Nunjucks
-  templateEngine.config.tags = {
-    variableStart: '{$',
-    variableEnd: '$}'
-  };
-
-  templateFinder.templateFolders
-      .unshift(path.resolve(__dirname, 'templates'));
-
-  templateFinder.templatePatterns = [
-    '${ doc.template }',
-    '${ doc.id }.${ doc.docType }.template.html',
-    '${ doc.id }.template.html',
-    '${ doc.docType }.template.html',
-    'common.template.html'
-  ];
-})
-
-
-// Configure ids and paths
-.config(function(computeIdsProcessor, computePathsProcessor, EXPORT_DOC_TYPES) {
-
-  computeIdsProcessor.idTemplates.push({
-    docTypes: ['member'],
-    idTemplate: '${classDoc.id}.${name}',
-    getAliases: function(doc) { return [doc.id]; }
-  });
-
-  computeIdsProcessor.idTemplates.push({
-    docTypes: ['guide'],
-    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]; }
-  });
-
-
-  computePathsProcessor.pathTemplates.push({
-    docTypes: ['module'],
-    pathTemplate: '/${id}',
-    outputPathTemplate: MODULES_DOCS_PATH + '/${id}/index.html'
-  });
-
-  computePathsProcessor.pathTemplates.push({
-    docTypes: EXPORT_DOC_TYPES,
-    pathTemplate: '${moduleDoc.path}/${name}',
-    outputPathTemplate: MODULES_DOCS_PATH + '/${path}/index.html'
-  });
-
-  computePathsProcessor.pathTemplates.push({
-    docTypes: ['member'],
-    pathTemplate: '${classDoc.path}/${name}',
-    getOutputPath: function() {} // These docs are not written to their own file, instead they are part of their class doc
-  });
-
-
-  computePathsProcessor.pathTemplates.push({
-    docTypes: ['guide'],
-    pathTemplate: '/${id}',
-    outputPathTemplate: GUIDES_PATH + '/${id}.html'
-  });
-});
diff --git a/docs/dgeni-package/mocks/importedSrc.ts b/docs/dgeni-package/mocks/importedSrc.ts
deleted file mode 100644
index 74a115e5fe9a..000000000000
--- a/docs/dgeni-package/mocks/importedSrc.ts
+++ /dev/null
@@ -1 +0,0 @@
-export var x = 100;
\ No newline at end of file
diff --git a/docs/dgeni-package/mocks/mockPackage.js b/docs/dgeni-package/mocks/mockPackage.js
deleted file mode 100644
index 61d0df228abe..000000000000
--- a/docs/dgeni-package/mocks/mockPackage.js
+++ /dev/null
@@ -1,10 +0,0 @@
-var Package = require('dgeni').Package;
-
-module.exports = function mockPackage() {
-
-  return new Package('mockPackage', [require('../')])
-
-  // provide a mock log service
-  .factory('log', function() { return require('dgeni/lib/mocks/log')(false); });
-
-};
diff --git a/docs/dgeni-package/mocks/readTypeScriptModules/ignoreExportsMatching.ts b/docs/dgeni-package/mocks/readTypeScriptModules/ignoreExportsMatching.ts
deleted file mode 100644
index 476d4cc44ba8..000000000000
--- a/docs/dgeni-package/mocks/readTypeScriptModules/ignoreExportsMatching.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export var __esModule = true;
-export class OKToExport {}
-export function _thisIsPrivate() {}
-export var thisIsOK = '!';
\ No newline at end of file
diff --git a/docs/dgeni-package/mocks/readTypeScriptModules/orderingOfMembers.ts b/docs/dgeni-package/mocks/readTypeScriptModules/orderingOfMembers.ts
deleted file mode 100644
index 2020ec7fa4de..000000000000
--- a/docs/dgeni-package/mocks/readTypeScriptModules/orderingOfMembers.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export class Test {
-  firstItem;
-  constructor() { this.doStuff(); }
-  otherMethod() {}
-  doStuff() {}
-}
\ No newline at end of file
diff --git a/docs/dgeni-package/mocks/testSrc.ts b/docs/dgeni-package/mocks/testSrc.ts
deleted file mode 100644
index 7b6d3f18ddd1..000000000000
--- a/docs/dgeni-package/mocks/testSrc.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * @module
- * @description
- * This is the module description
- */
-
-export * from 'importedSrc';
-
-/**
- * This is some random other comment
- */
-
-/**
- * This is MyClass
- */
-export class MyClass {
-  message: String;
-
-  /**
-   * Create a new MyClass
-   * @param {String} name The name to say hello to
-   */
-  constructor(name) { this.message = 'hello ' + name; }
-
-  /**
-   * Return a greeting message
-   */
-  greet() { return this.message; }
-}
-
-/**
- * An exported function
- */
-export var myFn = (val: number) => return val * 2;
\ No newline at end of file
diff --git a/docs/dgeni-package/processors/createTypeDefinitionFile.js b/docs/dgeni-package/processors/createTypeDefinitionFile.js
deleted file mode 100644
index f0a90efb567b..000000000000
--- a/docs/dgeni-package/processors/createTypeDefinitionFile.js
+++ /dev/null
@@ -1,77 +0,0 @@
-var _ = require('lodash');
-var path = require('canonical-path');
-
-module.exports = function createTypeDefinitionFile(log) {
-
-  return {
-    $runAfter: ['processing-docs'],
-    $runBefore: ['docs-processed'],
-    $validate: {
-      dtsPath: { presence: true },
-      dtsExtension: { presence: true },
-      typeDefinitions: { presence: true }
-    },
-    dtsPath: 'typings',
-    dtsExtension: '.d.ts',
-    typeDefinitions: [
-      {
-        id: 'angular2/angular2',
-        modules: {
-          // The shape of the public API is determined by what is reexported into
-          // angular2/angular2, with hacks layered into angular2.api.ts
-          'angular2/angular2': 'angular2/angular2.api',
-        }
-      },
-      {
-        id: 'angular2/router',
-        modules: {
-          'angular2/router': 'angular2/router'
-        }
-      }
-    ],
-    $process: function(docs) {
-      var dtsPath = this.dtsPath;
-      var dtsExtension = this.dtsExtension;
-
-      // For each type definition that we wish to create we define a dgeni "doc" for it
-      var typeDefDocs = _.map(this.typeDefinitions, function(def) {
-
-        var id = def.id + dtsExtension;
-        var docPath = path.join(dtsPath, id);
-
-        return {
-          docType: 'type-definition',
-          id: id,
-          aliases: [id],
-          path: docPath,
-          outputPath: docPath,
-          // A type definition may include a number of top level modules
-          // And those modules could be aliased (such as 'angular2/angular2.api' -> 'angular2/angular2')
-          moduleDocs: _.transform(def.modules, function(moduleDocs, id, alias) {
-            moduleDocs[id] = { id: alias, doc: null };
-          })
-        };
-      });
-
-      // Now add all the module docs to their corresponding type definition doc
-      _.forEach(docs, function(doc) {
-        _.forEach(typeDefDocs, function(typeDefDoc) {
-          if(typeDefDoc.moduleDocs[doc.id]) {
-            typeDefDoc.moduleDocs[doc.id].doc = doc;
-          }
-        });
-      });
-
-      _.forEach(typeDefDocs, function(doc) {
-        _.forEach(doc.moduleDocs, function(modDoc, alias) {
-          if (!modDoc.doc) {
-            log.error('createTypeDefinitionFile processor: no such module "' + alias + '" (Did you forget to add it to the modules to load?)');
-          }
-        });
-      });
-
-      // Add all the type definition docs to the docs collection so that dgeni can process them
-      return docs.concat(typeDefDocs);
-    }
-  };
-};
diff --git a/docs/dgeni-package/processors/extractTitleFromGuides.js b/docs/dgeni-package/processors/extractTitleFromGuides.js
deleted file mode 100644
index 1a4e6c3806dd..000000000000
--- a/docs/dgeni-package/processors/extractTitleFromGuides.js
+++ /dev/null
@@ -1,24 +0,0 @@
-var _ = require('lodash');
-
-module.exports = function extractTitleFromGuides() {
-
-  return {
-    $runAfter: ['processing-docs'],
-    $runBefore: ['docs-processed'],
-    $process: function(docs) {
-      _(docs).forEach(function(doc) {
-        if (doc.docType === 'guide') {
-          doc.name = doc.name || getNameFromHeading(doc.description);
-        }
-      });
-    }
-  };
-};
-
-
-function getNameFromHeading(text) {
-  var match = /^\s*#\s*(.*)/.exec(text);
-  if (match) {
-    return match[1];
-  }
-}
\ No newline at end of file
diff --git a/docs/dgeni-package/processors/generateNavigationDoc.js b/docs/dgeni-package/processors/generateNavigationDoc.js
deleted file mode 100644
index 5e8ecf714979..000000000000
--- a/docs/dgeni-package/processors/generateNavigationDoc.js
+++ /dev/null
@@ -1,68 +0,0 @@
-var _ = require('lodash');
-
-module.exports = function generateNavigationDoc() {
-
-  return {
-    $runAfter: ['docs-processed'],
-    $runBefore: ['rendering-docs'],
-    $process: function(docs) {
-      var modulesDoc = {
-        value: { sections: [] },
-        moduleName: 'navigation-modules',
-        serviceName: 'MODULES',
-        template: 'data-module.template.js',
-        outputPath: 'js/navigation-modules.js'
-      };
-
-      _.forEach(docs, function(doc) {
-        if ( doc.docType === 'module' ) {
-          var moduleNavItem = {
-            path: doc.path,
-            partial: doc.outputPath,
-            name: doc.id,
-            type: 'module',
-            pages: []
-          };
-
-          modulesDoc.value.sections.push(moduleNavItem);
-
-          _.forEach(doc.exports, function(exportDoc) {
-            if (!exportDoc.private) {
-              var exportNavItem = {
-                path: exportDoc.path,
-                partial: exportDoc.outputPath,
-                name: exportDoc.name,
-                type: exportDoc.docType
-              };
-              moduleNavItem.pages.push(exportNavItem);
-            }
-          });
-        }
-      });
-
-      docs.push(modulesDoc);
-
-
-      var guidesDoc = {
-        value: { pages: [] },
-        moduleName: 'navigation-guides',
-        serviceName: 'GUIDES',
-        template: 'data-module.template.js',
-        outputPath: 'js/navigation-guides.js'
-      };
-
-      _.forEach(docs, function(doc) {
-        if ( doc.docType === 'guide' ) {
-          var guideDoc = {
-            path: doc.path,
-            partial: doc.outputPath,
-            name: doc.name,
-            type: 'guide'
-          };
-          guidesDoc.value.pages.push(guideDoc);
-        }
-      });
-      docs.push(guidesDoc);
-    }
-  };
-};
diff --git a/docs/dgeni-package/processors/readTypeScriptModules.js b/docs/dgeni-package/processors/readTypeScriptModules.js
deleted file mode 100644
index a29454318069..000000000000
--- a/docs/dgeni-package/processors/readTypeScriptModules.js
+++ /dev/null
@@ -1,307 +0,0 @@
-var glob = require('glob');
-var path = require('canonical-path');
-var _ = require('lodash');
-var ts = require('typescript');
-
-module.exports = function readTypeScriptModules(tsParser, readFilesProcessor, modules, getFileInfo,
-                                                getExportDocType, getContent, log) {
-
-  return {
-    $runAfter: ['files-read'],
-    $runBefore: ['parsing-tags'],
-
-    $validate: {
-      sourceFiles: {presence: true},
-      basePath: {presence: true},
-      hidePrivateMembers: {inclusion: [true, false]},
-      sortClassMembers: {inclusion: [true, false]},
-      ignoreExportsMatching: {}
-    },
-
-    // A collection of globs that identify those modules for which we should create docs
-    sourceFiles: [],
-    // The base path from which to load the source files
-    basePath: '.',
-    // We can ignore members of classes that are private
-    hidePrivateMembers: true,
-    // We leave class members sorted in order of declaration
-    sortClassMembers: false,
-    // We can provide a collection of strings or regexes to ignore exports whose export names match
-    ignoreExportsMatching: ['___esModule'],
-
-    $process: function(docs) {
-
-      // Convert ignoreExportsMatching to an array of regexes
-      var ignoreExportsMatching = convertToRegexCollection(this.ignoreExportsMatching);
-
-      var hidePrivateMembers = this.hidePrivateMembers;
-      var sortClassMembers = this.sortClassMembers;
-
-      var basePath = path.resolve(readFilesProcessor.basePath, this.basePath);
-      var filesPaths = expandSourceFiles(this.sourceFiles, basePath);
-      var parseInfo = tsParser.parse(filesPaths, this.basePath);
-      var moduleSymbols = parseInfo.moduleSymbols;
-
-      // Iterate through each of the modules that were parsed and generate a module doc
-      // as well as docs for each module's exports.
-      moduleSymbols.forEach(function(moduleSymbol) {
-
-        var moduleDoc = createModuleDoc(moduleSymbol, basePath);
-
-        // Add this module doc to the module lookup collection and the docs collection
-        modules[moduleDoc.id] = moduleDoc;
-        docs.push(moduleDoc);
-
-        // Iterate through this module's exports and generate a doc for each
-        moduleSymbol.exportArray.forEach(function(exportSymbol) {
-
-          // Ignore exports starting with an underscore
-          if (anyMatches(ignoreExportsMatching, exportSymbol.name)) return;
-
-          // If the symbol is an Alias then for most things we want the original resolved symbol
-          var resolvedExport = exportSymbol.resolvedSymbol || exportSymbol;
-          var exportDoc = createExportDoc(exportSymbol.name, resolvedExport, moduleDoc, basePath, parseInfo.typeChecker);
-          log.debug('>>>> EXPORT: ' + exportDoc.name + ' (' + exportDoc.docType + ') from ' + moduleDoc.id);
-
-          // Generate docs for each of the export's members
-          if (resolvedExport.flags & ts.SymbolFlags.HasMembers) {
-
-            exportDoc.members = [];
-            for(var memberName in resolvedExport.members) {
-              // FIXME(alexeagle): why do generic type params appear in members?
-              if (memberName === 'T') {
-                continue;
-              }
-              log.silly('>>>>>> member: ' + memberName + ' from ' + exportDoc.id + ' in ' + moduleDoc.id);
-              var memberSymbol = resolvedExport.members[memberName];
-              var memberDoc = createMemberDoc(memberSymbol, exportDoc, basePath, parseInfo.typeChecker);
-
-              // We special case the constructor and sort the other members alphabetically
-              if (memberSymbol.flags & ts.SymbolFlags.Constructor) {
-                exportDoc.constructorDoc = memberDoc;
-                docs.push(memberDoc);
-              } else if (!hidePrivateMembers || memberSymbol.name.charAt(0) !== '_') {
-                docs.push(memberDoc);
-                exportDoc.members.push(memberDoc);
-              }
-            }
-
-            if (sortClassMembers) {
-              exportDoc.members.sort(function(a, b) {
-                if (a.name > b.name) return 1;
-                if (a.name < b.name) return -1;
-                return 0;
-              });
-            }
-          }
-
-          if (exportDoc.docType == 'enum') {
-            exportDoc.members = [];
-            for (var etype in resolvedExport.exports) {
-              exportDoc.members.push(etype);
-            }
-          }
-
-          // Add this export doc to its module doc
-          moduleDoc.exports.push(exportDoc);
-          docs.push(exportDoc);
-        });
-      });
-    }
-  };
-
-
-  function createModuleDoc(moduleSymbol, basePath) {
-    var id = moduleSymbol.name.replace(/^"|"$/g, '');
-    var moduleDoc = {
-      docType: 'module',
-      id: id,
-      aliases: [id],
-      moduleTree: moduleSymbol,
-      content: getContent(moduleSymbol),
-      exports: [],
-      fileInfo: getFileInfo(moduleSymbol, basePath),
-      location: getLocation(moduleSymbol)
-    };
-    return moduleDoc;
-  }
-
-  function createExportDoc(name, exportSymbol, moduleDoc, basePath, typeChecker) {
-    var typeParamString = '';
-    var heritageString = '';
-
-    exportSymbol.declarations.forEach(function(decl) {
-      var sourceFile = ts.getSourceFileOfNode(decl);
-
-      if (decl.typeParameters) {
-        typeParamString = '<' + getText(sourceFile, decl.typeParameters) + '>';
-      }
-
-      if (decl.heritageClauses) {
-        decl.heritageClauses.forEach(function(heritage) {
-
-          if (heritage.token == ts.SyntaxKind.ExtendsKeyword) {
-            heritageString += " extends ";
-            heritage.types.forEach(function(typ, idx) {
-              heritageString += (idx > 0 ? ', ' : '') + typ.getFullText();
-            });
-          }
-
-          if (heritage.token == ts.SyntaxKind.ImplementsKeyword) {
-            heritageString += " implements ";
-            heritage.types.forEach(function(typ, idx) {
-              heritageString += (idx > 0 ? ', ' : '') + typ.getFullText();
-            });
-          }
-        });
-      }
-    });
-
-    //Make sure duplicate aliases aren't created, so "Ambiguous link" warnings are prevented
-    var aliasNames = [name, moduleDoc.id + '/' + name];
-    if (typeParamString) {
-      aliasNames.push(name + typeParamString);
-      aliasNames.push(moduleDoc.id + '/' + name + typeParamString);
-    }
-
-    var exportDoc = {
-      docType: getExportDocType(exportSymbol),
-      name: name,
-      id: moduleDoc.id + '/' + name,
-      typeParams: typeParamString,
-      heritage: heritageString,
-      aliases: aliasNames,
-      moduleDoc: moduleDoc,
-      content: getContent(exportSymbol),
-      fileInfo: getFileInfo(exportSymbol, basePath),
-      location: getLocation(exportSymbol)
-    };
-
-    if(exportSymbol.flags & ts.SymbolFlags.Function) {
-      exportDoc.parameters = getParameters(typeChecker, exportSymbol);
-    }
-    if(exportSymbol.flags & ts.SymbolFlags.Value) {
-      exportDoc.returnType = getReturnType(typeChecker, exportSymbol);
-    }
-    return exportDoc;
-  }
-
-  function createMemberDoc(memberSymbol, classDoc, basePath, typeChecker) {
-    var memberDoc = {
-      docType: 'member',
-      classDoc: classDoc,
-      name: memberSymbol.name,
-      content: getContent(memberSymbol),
-      fileInfo: getFileInfo(memberSymbol, basePath),
-      location: getLocation(memberSymbol)
-    };
-
-    if (memberSymbol.flags & ts.SymbolFlags.Method) {
-      // NOTE: we use the property name `parameters` here so we don't conflict
-      // with the `params` property that will be updated by dgeni reading the
-      // `@param` tags from the docs
-      memberDoc.parameters = getParameters(typeChecker, memberSymbol);
-    }
-
-    if (memberSymbol.flags & ts.SymbolFlags.Constructor) {
-      memberDoc.parameters = getParameters(typeChecker, memberSymbol);
-      memberDoc.name = 'constructor';
-    }
-
-    if(memberSymbol.flags & ts.SymbolFlags.Value) {
-      memberDoc.returnType = getReturnType(typeChecker, memberSymbol);
-    }
-
-    return memberDoc;
-  }
-
-  function getParameters(typeChecker, symbol) {
-    var declaration = symbol.valueDeclaration || symbol.declarations[0];
-    var sourceFile = ts.getSourceFileOfNode(declaration);
-    if (!declaration.parameters) {
-      var location = getLocation(symbol);
-      throw new Error('missing declaration parameters for "' + symbol.name +
-        '" in ' + sourceFile.fileName +
-        ' at line ' + location.start.line);
-    }
-    return declaration.parameters.map(function(parameter) {
-      var paramText = getText(sourceFile, parameter.name);
-      if (parameter.questionToken || parameter.initializer) {
-        paramText += '?';
-      }
-      if (parameter.type) {
-        paramText += ':' + getType(sourceFile, parameter.type);
-      } else {
-        paramText += ': any';
-      }
-      return paramText.trim();
-    });
-  }
-
-  function getReturnType(typeChecker, symbol) {
-    var declaration = symbol.valueDeclaration || symbol.declarations[0];
-    var sourceFile = ts.getSourceFileOfNode(declaration);
-    if (declaration.type) {
-      return getType(sourceFile, declaration.type).trim();
-    }
-  }
-
-
-  function expandSourceFiles(sourceFiles, basePath) {
-    var filePaths = [];
-    sourceFiles.forEach(function(sourcePattern) {
-      filePaths = filePaths.concat(glob.sync(sourcePattern, { cwd: basePath }));
-    });
-    return filePaths;
-  }
-
-
-  function getText(sourceFile, node) {
-    return sourceFile.text.substring(node.pos, node.end);
-  }
-
-
-  // Strip any local renamed imports from the front of types
-  function getType(sourceFile, type) {
-    var text = getText(sourceFile, type);
-    while (text.indexOf(".") >= 0) {
-      // Keep namespaced symbols in Rx
-      if (text.match(/^\s*Rx\./)) break;
-      // handle the case List<thing.stuff> -> List<stuff>
-      text = text.replace(/([^.<]*)\.([^>]*)/, "$2");
-    }
-    return text;
-  }
-
-  function getLocation(symbol) {
-    var node = symbol.valueDeclaration || symbol.declarations[0];
-    var sourceFile = ts.getSourceFileOfNode(node);
-    var location = {
-      start: ts.getLineAndCharacterOfPosition(sourceFile, node.pos),
-      end: ts.getLineAndCharacterOfPosition(sourceFile, node.end)
-    };
-    return location;
-  }
-
-};
-
-function convertToRegexCollection(items) {
-  if (!items) return [];
-
-  // Must be an array
-  if (!_.isArray(items)) {
-    items = [items];
-  }
-
-  // Convert string to exact matching regexes
-  return items.map(function(item) {
-    return _.isString(item) ? new RegExp('^' + item + '$') : item;
-  });
-}
-
-function anyMatches(regexes, item) {
-  for(var i=0; i<regexes.length; ++i) {
-    if ( item.match(regexes[i]) ) return true;
-  }
-  return false;
-}
diff --git a/docs/dgeni-package/processors/readTypeScriptModules.spec.js b/docs/dgeni-package/processors/readTypeScriptModules.spec.js
deleted file mode 100644
index f8208d53b81e..000000000000
--- a/docs/dgeni-package/processors/readTypeScriptModules.spec.js
+++ /dev/null
@@ -1,81 +0,0 @@
-var mockPackage = require('../mocks/mockPackage');
-var Dgeni = require('dgeni');
-var path = require('canonical-path');
-var _ = require('lodash');
-
-describe('readTypeScriptModules', function() {
-  var dgeni, injector, processor;
-
-  beforeEach(function() {
-    dgeni = new Dgeni([mockPackage()]);
-    injector = dgeni.configureInjector();
-    processor = injector.get('readTypeScriptModules');
-    processor.basePath = path.resolve(__dirname, '../mocks/readTypeScriptModules');
-  });
-
-
-  describe('ignoreExportsMatching', function() {
-    it('should ignore exports that match items in the `ignoreExportsMatching` property', function() {
-      processor.sourceFiles = [ 'ignoreExportsMatching.ts'];
-      processor.ignoreExportsMatching = [/^_/];
-      var docs = [];
-      processor.$process(docs);
-
-      var moduleDoc = docs[0];
-      expect(moduleDoc.docType).toEqual('module');
-      expect(moduleDoc.exports).toEqual([
-        jasmine.objectContaining({ name: 'OKToExport' }),
-        jasmine.objectContaining({ name: 'thisIsOK' })
-      ]);
-    });
-
-    it('should only ignore `___esModule` exports by default', function() {
-      processor.sourceFiles = [ 'ignoreExportsMatching.ts'];
-      var docs = [];
-      processor.$process(docs);
-
-      var moduleDoc = docs[0];
-      expect(moduleDoc.docType).toEqual('module');
-      expect(getNames(moduleDoc.exports)).toEqual([
-        'OKToExport',
-        '_thisIsPrivate',
-        'thisIsOK'
-      ]);
-    });
-  });
-
-
-  describe('ordering of members', function() {
-    it('should order class members in order of appearance (by default)', function() {
-      processor.sourceFiles = ['orderingOfMembers.ts'];
-      var docs = [];
-      processor.$process(docs);
-      var classDoc = _.find(docs, { docType: 'class' });
-      expect(classDoc.docType).toEqual('class');
-      expect(getNames(classDoc.members)).toEqual([
-        'firstItem',
-        'otherMethod',
-        'doStuff',
-      ]);
-    });
-
-
-    it('should not order class members if not sortClassMembers is false', function() {
-      processor.sourceFiles = ['orderingOfMembers.ts'];
-      processor.sortClassMembers = false;
-      var docs = [];
-      processor.$process(docs);
-      var classDoc = _.find(docs, { docType: 'class' });
-      expect(classDoc.docType).toEqual('class');
-      expect(getNames(classDoc.members)).toEqual([
-        'firstItem',
-        'otherMethod',
-        'doStuff'
-      ]);
-    });
-  });
-});
-
-function getNames(collection) {
-  return collection.map(function(item) { return item.name; });
-}
\ No newline at end of file
diff --git a/docs/dgeni-package/readers/ngdoc.js b/docs/dgeni-package/readers/ngdoc.js
deleted file mode 100644
index a1e6a7e4d5cd..000000000000
--- a/docs/dgeni-package/readers/ngdoc.js
+++ /dev/null
@@ -1,32 +0,0 @@
-var path = require('canonical-path');
-
-/**
- * @dgService ngdocFileReader
- * @description
- * This file reader will pull the contents from a text file (by default .ngdoc)
- *
- * The doc will initially have the form:
- * ```
- * {
- *   content: 'the content of the file',
- *   startingLine: 1
- * }
- * ```
- */
-module.exports = function ngdocFileReader() {
-  var reader = {
-    name: 'ngdocFileReader',
-    defaultPattern: /\.md$/,
-    getDocs: function(fileInfo) {
-
-      // We return a single element array because ngdoc files only contain one document
-      return [{
-        docType: 'guide',
-        content: fileInfo.content,
-        startingLine: 1
-      }];
-    }
-  };
-
-  return reader;
-};
\ No newline at end of file
diff --git a/docs/dgeni-package/readers/ngdoc.spec.js b/docs/dgeni-package/readers/ngdoc.spec.js
deleted file mode 100644
index 658663c9fb99..000000000000
--- a/docs/dgeni-package/readers/ngdoc.spec.js
+++ /dev/null
@@ -1,45 +0,0 @@
-var ngdocFileReaderFactory = require('./ngdoc');
-var path = require('canonical-path');
-
-describe('ngdocFileReader', function() {
-
-  var fileReader;
-
-  var createFileInfo = function(file, content, basePath) {
-    return {
-      fileReader: fileReader.name,
-      filePath: file,
-      baseName: path.basename(file, path.extname(file)),
-      extension: path.extname(file).replace(/^\./, ''),
-      basePath: basePath,
-      relativePath: path.relative(basePath, file),
-      content: content
-    };
-  };
-
-
-  beforeEach(function() {
-    fileReader = ngdocFileReaderFactory();
-  });
-
-
-  describe('defaultPattern', function() {
-    it('should match .md files', function() {
-      expect(fileReader.defaultPattern.test('abc.md')).toBeTruthy();
-      expect(fileReader.defaultPattern.test('abc.js')).toBeFalsy();
-    });
-  });
-
-
-  describe('getDocs', function() {
-    it('should return an object containing info about the file and its contents', function() {
-      var fileInfo = createFileInfo('project/path/modules/someModule/foo/docs/subfolder/bar.ngdoc', 'A load of content', 'project/path');
-      expect(fileReader.getDocs(fileInfo)).toEqual([{
-        docType: 'guide',
-        content: 'A load of content',
-        startingLine: 1
-      }]);
-    });
-  });
-});
-
diff --git a/docs/dgeni-package/services/modules.js b/docs/dgeni-package/services/modules.js
deleted file mode 100644
index 76013902209b..000000000000
--- a/docs/dgeni-package/services/modules.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = function modules() {
-  return {};
-};
diff --git a/docs/dgeni-package/services/tsParser.js b/docs/dgeni-package/services/tsParser.js
deleted file mode 100644
index 32b6d29aa8cb..000000000000
--- a/docs/dgeni-package/services/tsParser.js
+++ /dev/null
@@ -1,74 +0,0 @@
-var ts = require('typescript');
-var path = require('canonical-path');
-
-module.exports = function tsParser(createCompilerHost, log) {
-
-  return {
-
-    // These are the extension that we should consider when trying to load a module
-    // During migration from Traceur, there is a mix of `.ts`, `.es6` and `.js` (atScript)
-    // files in the project and the TypeScript compiler only looks for `.ts` files when trying
-    // to load imports.
-    extensions: ['.ts', '.js'],
-
-    // The options for the TS compiler
-    options: {
-      allowNonTsExtensions: true,
-      charset: 'utf8'
-    },
-
-    parse: function(fileNames, baseDir) {
-
-      // "Compile" a program from the given module filenames, to get hold of a
-      // typeChecker that can be used to interrogate the modules, exports and so on.
-      var host = createCompilerHost(this.options, baseDir, this.extensions);
-      var program = ts.createProgram(fileNames, this.options, host);
-      var typeChecker = program.getTypeChecker();
-
-      // Create an array of module symbols for each file we were given
-      var moduleSymbols = [];
-      fileNames.forEach(function(fileName) {
-        var sourceFile = program.getSourceFile(fileName);
-
-        if (!sourceFile) {
-          throw new Error('Invalid source file: ' + fileName);
-        } else if (!sourceFile.symbol) {
-          // Some files contain only a comment and no actual module code
-          log.warn('No module code found in ' + fileName);
-        } else {
-          moduleSymbols.push(sourceFile.symbol);
-        }
-      });
-
-
-      moduleSymbols.forEach(function(tsModule) {
-
-        // The type checker has a nice helper function that returns an array of Symbols
-        // representing the exports for a given module
-        tsModule.exportArray = typeChecker.getExportsOfModule(tsModule);
-
-        // Although 'star' imports (e.g. `export * from 'some/module';) get resolved automatically
-        // by the compiler/binder, it seems that explicit imports (e.g. `export {SomeClass} from 'some/module'`)
-        // do not so we have to do a little work.
-        tsModule.exportArray.forEach(function(moduleExport) {
-          if (moduleExport.flags & ts.SymbolFlags.Alias) {
-            // To maintain the alias information (particularly the alias name)
-            // we just attach the original "resolved" symbol to the alias symbol
-            moduleExport.resolvedSymbol = typeChecker.getAliasedSymbol(moduleExport);
-          }
-        });
-      });
-
-      moduleSymbols.typeChecker = typeChecker;
-
-      return {
-        moduleSymbols: moduleSymbols,
-        typeChecker: typeChecker,
-        program: program,
-        host: host
-      };
-    }
-  };
-
-
-};
diff --git a/docs/dgeni-package/services/tsParser.spec.js b/docs/dgeni-package/services/tsParser.spec.js
deleted file mode 100644
index a7819276cac0..000000000000
--- a/docs/dgeni-package/services/tsParser.spec.js
+++ /dev/null
@@ -1,21 +0,0 @@
-var mockPackage = require('../mocks/mockPackage');
-var Dgeni = require('dgeni');
-var path = require('canonical-path');
-
-describe('tsParser', function() {
-  var dgeni, injector, parser;
-
-  beforeEach(function() {
-    dgeni = new Dgeni([mockPackage()]);
-    injector = dgeni.configureInjector();
-    parser = injector.get('tsParser');
-  });
-
-  it("should parse a TS file", function() {
-    var parseInfo = parser.parse(['testSrc.ts'], path.resolve(__dirname, '../mocks/'));
-    var tsModules = parseInfo.moduleSymbols;
-    expect(tsModules.length).toEqual(1);
-    expect(tsModules[0].exportArray.length).toEqual(3);
-    expect(tsModules[0].exportArray.map(function(i) { return i.name; })).toEqual(['MyClass', 'myFn', 'x']);
-  });
-});
\ No newline at end of file
diff --git a/docs/dgeni-package/services/tsParser/createCompilerHost.js b/docs/dgeni-package/services/tsParser/createCompilerHost.js
deleted file mode 100644
index 5f7d672baf4a..000000000000
--- a/docs/dgeni-package/services/tsParser/createCompilerHost.js
+++ /dev/null
@@ -1,62 +0,0 @@
-var ts = require('typescript');
-var fs = require('fs');
-var path = require('canonical-path');
-
-// We need to provide our own version of CompilerHost because we want to set the
-// base directory and specify what extensions to consider when trying to load a source
-// file
-module.exports = function createCompilerHost(log) {
-
-  return function createCompilerHost(options, baseDir, extensions) {
-
-    return {
-      getSourceFile: function(fileName, languageVersion, onError) {
-        var text, resolvedPath, resolvedPathWithExt;
-
-        // Strip off the extension and resolve relative to the baseDir
-        baseFilePath = fileName.replace(/\.[^.]+$/, '');
-        resolvedPath = path.resolve(baseDir, baseFilePath);
-
-        // Iterate through each possible extension and return the first source file that is actually found
-        for(var i=0; i<extensions.length; i++) {
-
-          // Try reading the content from files using each of the given extensions
-          try {
-            resolvedPathWithExt = resolvedPath + extensions[i];
-            log.silly('getSourceFile:', resolvedPathWithExt);
-            text = fs.readFileSync(resolvedPathWithExt, { encoding: options.charset });
-            log.debug('found source file:', fileName, resolvedPathWithExt);
-            return ts.createSourceFile(baseFilePath + extensions[i], text, languageVersion);
-          }
-          catch(e) {
-            // Try again if the file simply did not exist, otherwise report the error as a warning
-            if(e.code !== 'ENOENT') {
-              if (onError) onError(e.message);
-              log.warn('Error reading ' + resolvedPathWithExt + ' : ' + e.message);
-            }
-          }
-        }
-      },
-      getDefaultLibFileName: function(options) {
-        return path.resolve(path.dirname(ts.sys.getExecutingFilePath()), ts.getDefaultLibFileName(options));
-      },
-      writeFile: function(fileName, data, writeByteOrderMark, onError) {
-        // no-op
-      },
-      getCurrentDirectory: function() {
-        return baseDir;
-      },
-      useCaseSensitiveFileNames: function() {
-        return ts.sys.useCaseSensitiveFileNames;
-      },
-      getCanonicalFileName: function(fileName) {
-        // if underlying system can distinguish between two files whose names differs only in cases then file name already in canonical form.
-        // otherwise use toLowerCase as a canonical form.
-        return ts.sys.useCaseSensitiveFileNames ? fileName : fileName.toLowerCase();
-      },
-      getNewLine: function() {
-        return ts.sys.newLine;
-      }
-    };
-  };
-};
\ No newline at end of file
diff --git a/docs/dgeni-package/services/tsParser/createCompilerHost.spec.js b/docs/dgeni-package/services/tsParser/createCompilerHost.spec.js
deleted file mode 100644
index 13bf9c9eeee2..000000000000
--- a/docs/dgeni-package/services/tsParser/createCompilerHost.spec.js
+++ /dev/null
@@ -1,80 +0,0 @@
-var mockPackage = require('../../mocks/mockPackage');
-var Dgeni = require('dgeni');
-var path = require('canonical-path');
-var ts = require('typescript');
-
-describe('createCompilerHost', function() {
-  var dgeni, injector, options, host, baseDir, extensions;
-
-  beforeEach(function() {
-    dgeni = new Dgeni([mockPackage()]);
-    injector = dgeni.configureInjector();
-    var createCompilerHost = injector.get('createCompilerHost');
-
-    options = { charset: 'utf8' };
-    baseDir = path.resolve(__dirname, '../../mocks/');
-    extensions = ['.ts', '.js'];
-
-    host = createCompilerHost(options, baseDir, extensions);
-  });
-
-  describe('getSourceFile', function() {
-    it('should return a SourceFile object for a given path, with fileName relative to baseDir', function() {
-      var sourceFile = host.getSourceFile('testSrc.ts');
-      expect(sourceFile.fileName).toEqual('testSrc.ts');
-      expect(sourceFile.pos).toEqual(0);
-      expect(sourceFile.text).toEqual(jasmine.any(String));
-    });
-
-    it('should try each of the configured extensions and update the filename to the correct extension', function() {
-      var sourceFile = host.getSourceFile('testSrc.js');
-      expect(sourceFile.fileName).toEqual('testSrc.ts');
-
-      sourceFile = host.getSourceFile('mockPackage.ts');
-      expect(sourceFile.fileName).toEqual('mockPackage.js');
-    });
-  });
-
-
-  describe('getDefaultLibFileName', function() {
-    it('should return a path to the default library', function() {
-      expect(host.getDefaultLibFileName(options)).toContain('typescript/bin/lib.d.ts');
-    });
-  });
-
-
-  describe('writeFile', function() {
-    it('should do nothing', function() {
-      host.writeFile();
-    });
-  });
-
-
-  describe('getCurrentDirectory', function() {
-    it('should return the baseDir', function() {
-      expect(host.getCurrentDirectory()).toEqual(baseDir);
-    });
-  });
-
-
-  describe('useCaseSensitiveFileNames', function() {
-    it('should return true if the OS is case sensitive', function() {
-      expect(host.useCaseSensitiveFileNames()).toBe(ts.sys.useCaseSensitiveFileNames);
-    });
-  });
-
-
-  describe('getCanonicalFileName', function() {
-    it('should lower case the filename', function() {
-      var expectedFilePath = host.useCaseSensitiveFileNames() ? 'SomeFile.ts' : 'somefile.ts';
-      expect(host.getCanonicalFileName('SomeFile.ts')).toEqual(expectedFilePath);
-    });
-  });
-
-
-  describe('getNewLine', function() {
-    it('should return the newline character for the OS', function() {
-      expect(host.getNewLine()).toEqual(require('os').EOL);
-    });
-  });
-});
\ No newline at end of file
diff --git a/docs/dgeni-package/services/tsParser/getContent.js b/docs/dgeni-package/services/tsParser/getContent.js
deleted file mode 100644
index c7cbb36fc287..000000000000
--- a/docs/dgeni-package/services/tsParser/getContent.js
+++ /dev/null
@@ -1,49 +0,0 @@
-var ts = require('typescript');
-var LEADING_STAR = /^[^\S\r\n]*\*[^\S\n\r]?/gm;
-
-module.exports = function getContent() {
-  return function(symbol) {
-
-    var content = "";
-
-    if (!symbol.declarations) return content;
-
-    symbol.declarations.forEach(function(declaration) {
-
-      // If this is left side of dotted module declaration, there is no doc comment associated with this declaration
-      if (declaration.kind === ts.SyntaxKind.ModuleDeclaration && declaration.body.kind === ts.SyntaxKind.ModuleDeclaration) {
-          return content;
-      }
-
-      // If this is dotted module name, get the doc comments from the parent
-      while (declaration.kind === ts.SyntaxKind.ModuleDeclaration && declaration.parent.kind === ts.SyntaxKind.ModuleDeclaration) {
-          declaration = declaration.parent;
-      }
-
-      // If this is a variable declaration then we get the doc comments from the grand parent
-      if (declaration.kind === ts.SyntaxKind.VariableDeclaration) {
-        declaration = declaration.parent.parent;
-      }
-
-      // Get the source file of this declaration
-      var sourceFile = ts.getSourceFileOfNode(declaration);
-      var commentRanges = ts.getJsDocComments(declaration, sourceFile);
-
-      if (commentRanges) {
-        commentRanges.forEach(function(commentRange) {
-          content += sourceFile.text
-              .substring(commentRange.pos+ '/**'.length, commentRange.end - '*/'.length)
-              .replace(LEADING_STAR, '')
-              .trim();
-          if (commentRange.hasTrailingNewLine) {
-            content += '\n';
-          }
-        });
-      }
-
-      content += '\n';
-    });
-
-    return content;
-  };
-};
\ No newline at end of file
diff --git a/docs/dgeni-package/services/tsParser/getExportDocType.js b/docs/dgeni-package/services/tsParser/getExportDocType.js
deleted file mode 100644
index 72aae26df21f..000000000000
--- a/docs/dgeni-package/services/tsParser/getExportDocType.js
+++ /dev/null
@@ -1,56 +0,0 @@
-var ts = require('typescript');
-
-module.exports = function getExportDocType(log) {
-
-  return function(symbol) {
-    if(symbol.flags & ts.SymbolFlags.FunctionScopedVariable) {
-      return 'var';
-    }
-    if(symbol.flags & ts.SymbolFlags.BlockScopedVariable) {
-      return getBlockScopedVariableDocType(symbol);
-    }
-    if(symbol.flags & ts.SymbolFlags.Function) {
-      return 'function';
-    }
-    if(symbol.flags & ts.SymbolFlags.Class) {
-      return 'class';
-    }
-    if(symbol.flags & ts.SymbolFlags.Interface) {
-      return 'interface';
-    }
-    if(symbol.flags & ts.SymbolFlags.ConstEnum) {
-      return 'enum';
-    }
-    if(symbol.flags & ts.SymbolFlags.RegularEnum) {
-      return 'enum';
-    }
-    if(symbol.flags & ts.SymbolFlags.Property) {
-      return 'module-property';
-    }
-    if(symbol.flags & ts.SymbolFlags.TypeAlias) {
-      return 'type-alias';
-    }
-
-    log.warn('getExportDocType(): Unknown symbol type', {
-      symbolName: symbol.name,
-      symbolType: symbol.flags,
-      symbolTarget: symbol.target,
-      file: ts.getSourceFileOfNode(symbol.declarations[0]).fileName
-    });
-    return 'unknown';
-  }
-
-  function getBlockScopedVariableDocType(symbol) {
-
-    var node = symbol.valueDeclaration;
-    while(node) {
-      if ( node.flags & 0x2000 /* const */) {
-        // DefinitelyTyped is still TS 1.4 so const is not allowed.
-        // https://github.com/borisyankov/DefinitelyTyped/issues/4564
-        return 'var'; // change to const when targetting TS 1.5
-      }
-      node = node.parent;
-    }
-    return 'let';
-  }
-};
\ No newline at end of file
diff --git a/docs/dgeni-package/services/tsParser/getFileInfo.js b/docs/dgeni-package/services/tsParser/getFileInfo.js
deleted file mode 100644
index 3074a084acc9..000000000000
--- a/docs/dgeni-package/services/tsParser/getFileInfo.js
+++ /dev/null
@@ -1,20 +0,0 @@
-var path = require('canonical-path');
-var ts = require('typescript');
-
-module.exports = function getFileInfo(log) {
-
-  return function (symbol, basePath) {
-    var fileName = ts.getSourceFileOfNode(symbol.declarations[0]).fileName;
-
-    var file = path.resolve(basePath, fileName);
-    var fileInfo = {
-      filePath: file,
-      baseName: path.basename(file, path.extname(file)),
-      extension: path.extname(file).replace(/^\./, ''),
-      basePath: basePath,
-      relativePath: fileName,
-      projectRelativePath: fileName
-    };
-    return fileInfo;
-  };
-};
\ No newline at end of file
diff --git a/docs/dgeni-package/tag-defs/exportedAs.js b/docs/dgeni-package/tag-defs/exportedAs.js
deleted file mode 100644
index aa36151697e2..000000000000
--- a/docs/dgeni-package/tag-defs/exportedAs.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  name: 'exportedAs',
-  multi: true
-};
\ No newline at end of file
diff --git a/docs/dgeni-package/tag-defs/private.js b/docs/dgeni-package/tag-defs/private.js
deleted file mode 100644
index 328ec0ac5bf8..000000000000
--- a/docs/dgeni-package/tag-defs/private.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  name: 'private',
-  transforms: function(doc, tag) { return true; }
-};
\ No newline at end of file
diff --git a/docs/dgeni-package/tag-defs/public.js b/docs/dgeni-package/tag-defs/public.js
deleted file mode 100644
index a85d5dd43c17..000000000000
--- a/docs/dgeni-package/tag-defs/public.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  name: 'public',
-  transforms: function(doc, tag) { return true; }
-};
\ No newline at end of file
diff --git a/docs/dgeni-package/templates/angular2/angular2.d.ts.template.html b/docs/dgeni-package/templates/angular2/angular2.d.ts.template.html
deleted file mode 100644
index 4be251c555dd..000000000000
--- a/docs/dgeni-package/templates/angular2/angular2.d.ts.template.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{% extends '../type-definition.template.html' %}
-{% block staticDeclarations %}
-// Angular depends transitively on these libraries.
-// If you don't have them installed you can run
-// $ tsd query es6-promise rx rx-lite --action install --save
-///<reference path="../es6-promise/es6-promise.d.ts"/>
-///<reference path="../rx/rx.d.ts"/>
-
-interface List<T> extends Array<T> {}
-interface Map<K,V> {}
-interface StringMap<K,V> extends Map<K,V> {}
-interface Type {}
-
-declare module "angular2/angular2" {
-  type SetterFn = typeof Function;
-  type int = number;
-
-  // See https://github.com/Microsoft/TypeScript/issues/1168
-  class BaseException /* extends Error */ {
-    message: string;
-    stack: string;
-    toString(): string;
-  }
-}
-{% endblock %}
\ No newline at end of file
diff --git a/docs/dgeni-package/templates/class.template.html b/docs/dgeni-package/templates/class.template.html
deleted file mode 100644
index 23d608b30ad1..000000000000
--- a/docs/dgeni-package/templates/class.template.html
+++ /dev/null
@@ -1,35 +0,0 @@
-{% include "lib/paramList.html" -%}
-{% include "lib/githubLinks.html" -%}
-{% extends 'layout/base.template.html' -%}
-
-{% block body %}
-<h1 class="class export">{$ doc.name $} <span class="type">{$ doc.docType $}</span></h1>
-<p class="module">exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }<br/>
-defined in {$ githubViewLink(doc) $}
-</p>
-<p>{$ doc.description | marked $}</p>
-
-{%- if doc.constructorDoc or doc.members.length -%}
-<h2>Members</h2>
-
-{%- if doc.constructorDoc %}
-  <section class="member constructor">
-    <h1 id="constructor" class="name">{$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.params) $}</h1>
-    {% marked %}
-      {$ doc.constructorDoc.description $}
-    {% endmarked %}
-  </section>
-{% endif -%}
-
-{%- for member in doc.members %}{% if not member.private %}
-  <section class="member">
-    <h1 id="{$ member.name $}" class="name">{$ member.name $}{$ paramList(member.params) $}</h1>
-    {% marked %}
-      {$ member.description $}
-    {% endmarked %}
-  </section>
-
-{% endif %}{% endfor %}
-{%- endif -%}
-
-{% endblock %}
\ No newline at end of file
diff --git a/docs/dgeni-package/templates/common.template.html b/docs/dgeni-package/templates/common.template.html
deleted file mode 100644
index dc10750a8043..000000000000
--- a/docs/dgeni-package/templates/common.template.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends 'layout/base.template.html' %}
-
-{% block body %}
-<h1>{$ doc.id $}</h1>
-<h2>({$ doc.docType $})</h2>
-<div>
-{$ doc.description | marked $}
-</div>
-{% endblock %}
\ No newline at end of file
diff --git a/docs/dgeni-package/templates/const.template.html b/docs/dgeni-package/templates/const.template.html
deleted file mode 100644
index 8b813c7d8e95..000000000000
--- a/docs/dgeni-package/templates/const.template.html
+++ /dev/null
@@ -1 +0,0 @@
-{% extends 'var.template.html' -%}
diff --git a/docs/dgeni-package/templates/data-module.template.js b/docs/dgeni-package/templates/data-module.template.js
deleted file mode 100644
index 498cdad8cf98..000000000000
--- a/docs/dgeni-package/templates/data-module.template.js
+++ /dev/null
@@ -1,3 +0,0 @@
-angular.module('{$ doc.moduleName $}', [])
-
-.value('{$ doc.serviceName $}', {$ doc.value | json $});
\ No newline at end of file
diff --git a/docs/dgeni-package/templates/function.template.html b/docs/dgeni-package/templates/function.template.html
deleted file mode 100644
index 4e6d5441f606..000000000000
--- a/docs/dgeni-package/templates/function.template.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% include "lib/paramList.html" -%}
-{% include "lib/githubLinks.html" -%}
-{% extends 'layout/base.template.html' -%}
-
-{% block body %}
-<h1 class="function export">{$ doc.name $}{$ paramList(doc.parameters) $}</h1>
-<p class="module">exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }<br/>
-defined in {$ githubViewLink(doc) $}</p>
-<p>{$ doc.description | marked $}</p>
-
-{% endblock %}
\ No newline at end of file
diff --git a/docs/dgeni-package/templates/guide.template.html b/docs/dgeni-package/templates/guide.template.html
deleted file mode 100644
index 3ee289dbc8d0..000000000000
--- a/docs/dgeni-package/templates/guide.template.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% extends 'layout/base.template.html' %}
-
-{% block body %}
-{$ doc.description | marked $}
-{% endblock %}
\ No newline at end of file
diff --git a/docs/dgeni-package/templates/interface.template.html b/docs/dgeni-package/templates/interface.template.html
deleted file mode 100644
index 3bde456ceb84..000000000000
--- a/docs/dgeni-package/templates/interface.template.html
+++ /dev/null
@@ -1 +0,0 @@
-{% extends 'class.template.html' -%}
diff --git a/docs/dgeni-package/templates/layout/base.template.html b/docs/dgeni-package/templates/layout/base.template.html
deleted file mode 100644
index 16a0d9dc96f0..000000000000
--- a/docs/dgeni-package/templates/layout/base.template.html
+++ /dev/null
@@ -1 +0,0 @@
-{% block body %}{% endblock %}
\ No newline at end of file
diff --git a/docs/dgeni-package/templates/lib/githubLinks.html b/docs/dgeni-package/templates/lib/githubLinks.html
deleted file mode 100644
index 574656542f36..000000000000
--- a/docs/dgeni-package/templates/lib/githubLinks.html
+++ /dev/null
@@ -1,3 +0,0 @@
-{% macro githubViewLink(doc) -%}
-  <a href="https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/tree/{$ versionInfo.currentVersion.isSnapshot and versionInfo.currentVersion.SHA or versionInfo.currentVersion.raw $}/modules/{$ doc.fileInfo.relativePath $}#L{$ doc.location.start.line+1 $}-L{$ doc.location.end.line+1 $}">{$ doc.fileInfo.relativePath $} (line {$ doc.location.start.line+1 $})</a>
-{%- endmacro -%}
diff --git a/docs/dgeni-package/templates/lib/paramList.html b/docs/dgeni-package/templates/lib/paramList.html
deleted file mode 100644
index 85dccb212bf1..000000000000
--- a/docs/dgeni-package/templates/lib/paramList.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% macro paramList(params) -%}
-  {%- if params -%}<span class="params">(
-    {%- for param in params -%}
-      <span class="param">{$ param | escape $}{% if not loop.last %}, {% endif %}</span>
-    {%- endfor %})</span>
-  {%- endif %}
-{%- endmacro -%}
diff --git a/docs/dgeni-package/templates/module.template.html b/docs/dgeni-package/templates/module.template.html
deleted file mode 100644
index c016075c480b..000000000000
--- a/docs/dgeni-package/templates/module.template.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% include "lib/githubLinks.html" -%}
-{% extends 'layout/base.template.html' %}
-
-{% block body %}
-<h1 class="id">{$ doc.id $} <span class="type">module</span></h1>
-<p>defined in {$ githubViewLink(doc) $}</p>
-<p>{$ doc.description | marked $}</p>
-
-{% if doc.exports.length %}
-<h2>Exports</h2>
-<ul>
-{%- for exportDoc in doc.exports %}
-  {% if not exportDoc.private -%}
-  <li><a href="{$ exportDoc.path $}"><strong>{$ exportDoc.name $}</strong> {$ exportDoc.docType $}</a></li>
-  {%- endif %}
-{%- endfor %}
-</ul>
-{% endif %}
-{% endblock %}
\ No newline at end of file
diff --git a/docs/dgeni-package/templates/overview-dump.template.html b/docs/dgeni-package/templates/overview-dump.template.html
deleted file mode 100644
index 3f4ee1294fa1..000000000000
--- a/docs/dgeni-package/templates/overview-dump.template.html
+++ /dev/null
@@ -1,43 +0,0 @@
-{% include "lib/paramList.html" -%}
-<!DOCTYPE html>
-<html>
-<head>
-  <title></title>
-  <style>
-    h2 {
-      padding-left: 20px;
-    }
-    h3 {
-      padding-left: 50px;
-    }
-    h4 {
-      padding-left: 60px;
-    }
-  </style>
-</head>
-<body>
-
-
-<h1>Modules</h1>
-
-{% for module in doc.modules %}
-
-<h2>{$ module.id $}
-    {%- if module.public %} (public){% endif %}</h2>
-
-  {% for export in module.exports %}
-  <h3>{$ export.name $}</h3>
-
-    {%- if export.constructorDoc %}
-      <h4>{$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.params) $}</h4>
-    {% endif -%}
-    {%- for member in export.members %}
-      <h4>{$ member.name $}{$ paramList(member.params) $}</h4>
-    {% endfor %}
-
-  {% endfor %}
-
-{% endfor %}
-
-</body>
-</html>
diff --git a/docs/dgeni-package/templates/type-alias.template.html b/docs/dgeni-package/templates/type-alias.template.html
deleted file mode 100644
index 7f0ea6399fab..000000000000
--- a/docs/dgeni-package/templates/type-alias.template.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% include "lib/githubLinks.html" -%}
-{% extends 'layout/base.template.html' %}
-
-{% block body %}
-<h1>{$ doc.name $} <span class="type">type alias</span></h1>
-<p class="module">exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }<br/>
-defined in {$ githubViewLink(doc) $}</p>
-<p>{$ doc.description | marked $}</p>
-
-{% endblock %}
\ No newline at end of file
diff --git a/docs/dgeni-package/templates/type-definition.template.html b/docs/dgeni-package/templates/type-definition.template.html
deleted file mode 100644
index afa928315e33..000000000000
--- a/docs/dgeni-package/templates/type-definition.template.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{%- macro commentBlock(doc, level) -%}
-{%- if doc.content | trim %}
-
-{% if level > 1 %}{$ '/**' | indent(level-1, true) | replace(r/\n$/, "") $}{% else %}/**{% endif %}
-{$ doc.content | trim | replace(r/^/gm, "* ") | indent(level, true) | replace(r/\n$/, "") $}
-{$ '*/' | indent(level, true) | replace(r/\n$/, "") $}{% endif -%}
-{%- endmacro -%}
-// Type definitions for Angular v{$ versionInfo.currentVersion.full | replace(r/\+/, "_") $}
-// Project: http://angular.io/
-// Definitions by: angular team <https://github.com/angular/>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-// ***********************************************************
-// This file is generated by the Angular build process.
-// Please do not create manual edits or send pull requests
-// modifying this file.
-// ***********************************************************
-{% block staticDeclarations %}{% endblock %}
-{% for alias, module in doc.moduleDocs %}
-{$ commentBlock(module.doc, 1) $}
-declare module "{$ module.id $}" {
-
-  {%- for export in module.doc.exports -%}
-  {%- if export.content -%}
-    {$ commentBlock(export, 3) $}
-  {%- endif %}
-  {$ export.docType $} {$ export.name $}{$ export.typeParams $}{$ export.heritage $}
-  {%- if export.docType == 'class' or export.docType == 'interface' %} {
-  {%- for member in export.members -%}
-    {$ commentBlock(member, 5) $}
-    {$ member.name $}
-    {%- if member.parameters %}({% for param in member.parameters %}{$ param $}{% if not loop.last %}, {% endif %}{% endfor %}){%- endif %}
-    {%- if member.returnType %}: {$ member.returnType $}{%- else -%}: any{% endif -%}
-    ;
-  {%- endfor %}
-  }
-
-  {%- elif export.docType == 'enum' %} {
-    {%- for member in export.members %}
-    {$ member $}{% if not loop.last %},
-    {%- endif -%}
-    {%- endfor %}
-  }
-
-  {%- else -%}
-    {% if export.parameters %}({% for param in export.parameters %}{$ param $}{% if not loop.last %}, {% endif %}{% endfor %}){%- endif %}
-    {%- if export.returnType %} : {$ export.returnType $} {% endif -%}
-    ;
-  {%- endif %}
-  {% endfor %}
-}
-
-{% endfor %}
-
diff --git a/docs/dgeni-package/templates/var.template.html b/docs/dgeni-package/templates/var.template.html
deleted file mode 100644
index 2d43873595ab..000000000000
--- a/docs/dgeni-package/templates/var.template.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% include "lib/githubLinks.html" -%}
-{% extends 'layout/base.template.html' %}
-
-{% block body %}
-<h1>{$ doc.name $} <span class="type">variable</span></h1>
-<p class="module">exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }<br/>
-defined in {$ githubViewLink(doc) $}</p>
-<p>{$ doc.description | marked $}</p>
-
-{% endblock %}
\ No newline at end of file
diff --git a/docs/links-package/index.js b/docs/links-package/index.js
deleted file mode 100644
index a3ffc7199175..000000000000
--- a/docs/links-package/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-var Package = require('dgeni').Package;
-
-module.exports = new Package('links', [])
-
-.factory(require('./inline-tag-defs/link'))
-.factory(require('dgeni-packages/ngdoc/services/getAliases'))
-.factory(require('dgeni-packages/ngdoc/services/getDocFromAlias'))
-.factory(require('./services/getLinkInfo'))
-
-.config(function(inlineTagProcessor, linkInlineTagDef) {
-  inlineTagProcessor.inlineTagDefinitions.push(linkInlineTagDef);
-});
diff --git a/docs/links-package/inline-tag-defs/link.js b/docs/links-package/inline-tag-defs/link.js
deleted file mode 100644
index 89272c63ca2d..000000000000
--- a/docs/links-package/inline-tag-defs/link.js
+++ /dev/null
@@ -1,33 +0,0 @@
-var INLINE_LINK = /(\S+)(?:\s+([\s\S]+))?/;
-
-/**
- * @dgService linkInlineTagDef
- * @description
- * Process inline link tags (of the form {@link some/uri Some Title}), replacing them with HTML anchors
- * @kind function
- * @param  {Object} url   The url to match
- * @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
- */
-module.exports = function linkInlineTagDef(getLinkInfo, createDocMessage, log) {
-  return {
-    name: 'link',
-    description: 'Process inline link tags (of the form {@link some/uri Some Title}), replacing them with HTML anchors',
-    handler: function(doc, tagName, tagDescription) {
-
-      // Parse out the uri and title
-      return tagDescription.replace(INLINE_LINK, function(match, uri, title) {
-
-        var linkInfo = getLinkInfo(uri, title, doc);
-
-        if ( !linkInfo.valid ) {
-          log.warn(createDocMessage(linkInfo.error, doc));
-        }
-
-        return "<a href='" + linkInfo.url + "'>" + linkInfo.title + "</a>";
-      });
-    }
-  };
-};
\ No newline at end of file
diff --git a/docs/links-package/services/getLinkInfo.js b/docs/links-package/services/getLinkInfo.js
deleted file mode 100644
index 787ff0433859..000000000000
--- a/docs/links-package/services/getLinkInfo.js
+++ /dev/null
@@ -1,72 +0,0 @@
-var _ = require('lodash');
-var path = require('canonical-path');
-
-/**
- * @dgService getLinkInfo
- * @description
- * Get link information to a document that matches the given url
- * @kind function
- * @param  {String} url   The url to match
- * @param  {String} title An optional title to return in the link information
- * @return {Object}       The link information
- *
- * @property {boolean} relativeLinks Whether we expect the links to be relative to the originating doc
- */
-module.exports = function getLinkInfo(getDocFromAlias, encodeCodeBlock, log) {
-
-  return function getLinkInfoImpl(url, title, currentDoc) {
-    var linkInfo = {
-      url: url,
-      type: 'url',
-      valid: true,
-      title: title || url
-    };
-
-    if ( !url ) {
-      throw new Error('Invalid url');
-    }
-
-    var docs = getDocFromAlias(url, currentDoc);
-
-    if ( !getLinkInfoImpl.useFirstAmbiguousLink && docs.length > 1 ) {
-
-      linkInfo.valid = false;
-      linkInfo.errorType = 'ambiguous';
-      linkInfo.error = 'Ambiguous link: "' + url + '".\n' +
-        docs.reduce(function(msg, doc) { return msg + '\n  "' + doc.id + '" ('+ doc.docType + ') : (' + doc.path + ' / ' + doc.fileInfo.relativePath + ')'; }, 'Matching docs: ');
-
-    } else if ( docs.length >= 1 ) {
-
-      linkInfo.url = docs[0].path;
-      linkInfo.title = title || encodeCodeBlock(docs[0].name, true);
-      linkInfo.type = 'doc';
-
-      if ( getLinkInfoImpl.relativeLinks && currentDoc && currentDoc.path ) {
-        var currentFolder = path.dirname(currentDoc.path);
-        var docFolder = path.dirname(linkInfo.url);
-        var relativeFolder = path.relative(path.join('/', currentFolder), path.join('/', docFolder));
-        linkInfo.url = path.join(relativeFolder, path.basename(linkInfo.url));
-        log.debug(currentDoc.path, docs[0].path, linkInfo.url);
-      }
-
-    } else if ( url.indexOf('#') > 0 ) {
-      var pathAndHash = url.split('#');
-      linkInfo = getLinkInfoImpl(pathAndHash[0], title, currentDoc);
-      linkInfo.url = linkInfo.url + '#' + pathAndHash[1];
-      return linkInfo;
-
-    } else if ( url.indexOf('/') === -1 && url.indexOf('#') !== 0 ) {
-
-      linkInfo.valid = false;
-      linkInfo.errorType = 'missing';
-      linkInfo.error = 'Invalid link (does not match any doc): "' + url + '"';
-
-    } else {
-
-      linkInfo.title = title || (( url.indexOf('#') === 0 ) ? url.substring(1) : path.basename(url, '.html'));
-
-    }
-
-    return linkInfo;
-  };
-};
\ No newline at end of file
diff --git a/docs/public-docs-package/index.js b/docs/public-docs-package/index.js
deleted file mode 100644
index 44a0f3776a7a..000000000000
--- a/docs/public-docs-package/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-var Package = require('dgeni').Package;
-var basePackage = require('../dgeni-package');
-
-module.exports = new Package('angular-public', [basePackage])
-
-.config(function(readTypeScriptModules) {
-  readTypeScriptModules.sourceFiles = [
-    'angular2/annotations.ts',
-    'angular2/change_detection.ts',
-    'angular2/core.ts',
-    'angular2/di.ts',
-    'angular2/directives.ts',
-    'angular2/http.ts',
-    'angular2/forms.ts',
-    'angular2/router.ts',
-    'angular2/test.ts',
-    'angular2/pipes.ts'
-  ];
-  readTypeScriptModules.hidePrivateMembers = true;
-})
-
-.config(function(getLinkInfo) {
-  getLinkInfo.useFirstAmbiguousLink = false;
-})
-
-// Configure file writing
-.config(function(writeFilesProcessor) {
-  writeFilesProcessor.outputFolder  = 'dist/public_docs';
-});
diff --git a/gulpfile.js b/gulpfile.js
index 9573fd27f0eb..eea57c01d8b2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,1063 +1,46 @@
-'use strict';
-
-var autoprefixer = require('gulp-autoprefixer');
-var clangFormat = require('clang-format');
-var del = require('del');
-var exec = require('child_process').exec;
-var fork = require('child_process').fork;
-var gulp = require('gulp');
-var gulpFormat = require('gulp-clang-format');
-var gulpPlugins = require('gulp-load-plugins')();
-var sass = require('gulp-sass');
-var shell = require('gulp-shell');
-var spawn = require('child_process').spawn;
-var runSequence = require('run-sequence');
-var madge = require('madge');
-var merge = require('merge');
-var merge2 = require('merge2');
-var path = require('path');
-
-var watch = require('./tools/build/watch');
-
-var transpile = require('./tools/build/transpile');
-var pubget = require('./tools/build/pubget');
-var linknodemodules = require('./tools/build/linknodemodules');
-var pubbuild = require('./tools/build/pubbuild');
-var dartanalyzer = require('./tools/build/dartanalyzer');
-var jsserve = require('./tools/build/jsserve');
-var pubserve = require('./tools/build/pubserve');
-var karma = require('karma');
-var minimist = require('minimist');
-var runServerDartTests = require('./tools/build/run_server_dart_tests');
-var sourcemaps = require('gulp-sourcemaps');
-var tsc = require('gulp-typescript');
-var util = require('./tools/build/util');
-var bundler = require('./tools/build/bundle');
-var replace = require('gulp-replace');
-var insert = require('gulp-insert');
-var uglify = require('gulp-uglify');
-var shouldLog = require('./tools/build/logging');
-var tslint = require('gulp-tslint');
-var dartSdk = require('./tools/build/dart');
-
-require('./tools/check-environment')({
-  requiredNpmVersion: '>=2.9.0',
-  requiredNodeVersion: '>=0.12.2'
-});
-
-// Make it easy to quiet down portions of the build.
-// --logs=all -> log everything (This is the default)
-// --logs=quiet -> log nothing
-// --logs=<comma-separated-list> -> log listed items.
-//
-// Not all commands support optional logging, feel free
-// to add support by adding a new key to this list,
-// and toggling output from the command based on it.
-var logs = {
-  dartfmt: shouldLog('dartfmt')
-};
-
-// dynamic require in build.tools so we can bootstrap TypeScript compilation
-function throwToolsBuildMissingError() {
-  throw new Error('ERROR: build.tools task should have been run before using angularBuilder');
-}
-
-var angularBuilder = {
-  rebuildBrowserDevTree: throwToolsBuildMissingError,
-  rebuildBrowserProdTree: throwToolsBuildMissingError,
-  rebuildNodeTree: throwToolsBuildMissingError,
-  rebuildDartTree: throwToolsBuildMissingError,
-  mock: true
-};
-
-
-function sequenceComplete(done) {
-  return function (err) {
-    if (err) {
-      var error = new Error('build sequence failed');
-      error.showStack = false;
-      done(error);
-    } else {
-      done();
-    }
-  };
-}
-
-
-var treatTestErrorsAsFatal = true;
-
-function runJasmineTests(globs, done) {
-  var args = ['--'].concat(globs);
-  fork('./tools/traceur-jasmine', args, {
-    stdio: 'inherit'
-  }).on('close', function jasmineCloseHandler(exitCode) {
-    if (exitCode && treatTestErrorsAsFatal) {
-      var err = new Error('Jasmine tests failed');
-      // Mark the error for gulp similar to how gulp-utils.PluginError does it.
-      // The stack is not useful in this context.
-      err.showStack = false;
-      done(err);
-    } else {
-      done();
-    }
-  });
-}
-
-// Note: when DART_SDK is not found, all gulp tasks ending with `.dart` will be skipped.
-var DART_SDK = dartSdk.detect(gulp);
-
-// -----------------------
-// configuration
-
-var CONFIG = {
-  dest: {
-    js: {
-      all: 'dist/js',
-      dev: {
-        es6: 'dist/js/dev/es6',
-        es5: 'dist/js/dev/es5'
-      },
-      prod: {
-        es6: 'dist/js/prod/es6',
-        es5: 'dist/js/prod/es5'
-      },
-      cjs: 'dist/js/cjs',
-      dart2js: 'dist/js/dart2js'
-    },
-    dart: 'dist/dart',
-    docs: 'dist/docs',
-    docs_angular_io: 'dist/angular.io',
-    benchpress_bundle: 'dist/build/benchpress_bundle/'
-  }
-};
-
-var BENCHPRESS_BUNDLE_CONFIG = {
-  entries: ['./dist/js/cjs/benchpress/index.js'],
-  packageJson: './dist/js/cjs/benchpress/package.json',
-  includes: [
-    'angular2'
-  ],
-  excludes: [
-    'traceur',
-    'traceur/bin/traceur-runtime',
-    'reflect-metadata',
-    'selenium-webdriver',
-    'rtts_assert',
-    'zone.js'
-  ],
-  ignore: [
-    'rx'
-  ],
-  dest: CONFIG.dest.benchpress_bundle
-}
-
-// ------------
-// clean
-
-gulp.task('build/clean.tools', function() {
-  del(path.join('dist', 'tools'));
-});
-
-gulp.task('build/clean.js', function(done) {
-  del(CONFIG.dest.js.all, done);
-});
-
-gulp.task('build/clean.dart', function(done) {
-  del(CONFIG.dest.dart, done);
-});
-
-gulp.task('build/clean.docs',  function(done) {
-  del(CONFIG.dest.docs, done);
-});
-
-gulp.task('build/clean.docs_angular_io', function(done) {
-  del(CONFIG.dest.docs_angular_io, done);
-});
-
-gulp.task('build/clean.benchpress.bundle', function(done) {
-  del(CONFIG.dest.benchpress_bundle, done);
-});
-
-// ------------
-// transpile
-
-gulp.task('build/tree.dart', ['build/clean.dart', 'build.tools'], function(done) {
-  runSequence('!build/tree.dart', sequenceComplete(done));
-});
-
-
-gulp.task('!build/tree.dart', function() {
-  return angularBuilder.rebuildDartTree();
-});
-
-
-// ------------
-// pubspec
-
-// Run a top-level `pub get` for this project.
-gulp.task('pubget.dart', pubget.dir(gulp, gulpPlugins, { dir: '.', command: DART_SDK.PUB }));
-
-// Run `pub get` only on the angular2 dir of CONFIG.dest.dart
-gulp.task('!build/pubget.angular2.dart', pubget.dir(gulp, gulpPlugins, {
-  dir: path.join(CONFIG.dest.dart, 'angular2'),
-  command: DART_SDK.PUB
-}));
-
-// Run `pub get` over CONFIG.dest.dart
-gulp.task('build/pubspec.dart', pubget.subDir(gulp, gulpPlugins, {
-  dir: CONFIG.dest.dart,
-  command: DART_SDK.PUB
-}));
-
-
-// This is a hacky way to work around dart's pub that creates `packages` symlink in every directory
-// that contains a dart file with the main method. For our tests this means that every test subfolder
-// has a link to the root `packages` directory which causes Karma to sift through 80k files during
-// each `karma run` invocation.
-//
-// Since these directories are not needed for karma tests to run, it's safe to delete them without
-// breaking any functionality.
-//
-// See #2437 for more info.
-gulp.task('!build/remove-pub-symlinks', function(done) {
-  if (process.platform == 'win32') {
-    done();
-    return;
-  }
-
-  exec('find dist/dart/angular2/test/ -name packages | xargs rm -r', function (error, stdout, stderr) {
-    if (error) {
-      done(stderr);
-      return;
-    }
-    done();
-  });
-});
-
-// ------------
-// dartanalyzer
-
-gulp.task('build/analyze.dart', dartanalyzer(gulp, gulpPlugins, {
-  dest: CONFIG.dest.dart,
-  command: DART_SDK.ANALYZER
-}));
-
-// ------------
-// pubbuild
-
-gulp.task('build/pubbuild.dart', pubbuild(gulp, gulpPlugins, {
-  src: CONFIG.dest.dart,
-  dest: CONFIG.dest.js.dart2js,
-  command: DART_SDK.PUB
-}));
-
-// ------------
-// formatting
-
-function doCheckFormat() {
-  return gulp.src(['modules/**/*.ts', 'tools/**/*.ts', '!**/typings/**/*.d.ts'])
-      .pipe(gulpFormat.checkFormat('file', clangFormat));
-}
-
-gulp.task('check-format', function() {
-  return doCheckFormat().on('warning', function(e) {
-    console.log("NOTE: this will be promoted to an ERROR in the continuous build");
-  });
-});
-
-gulp.task('enforce-format', function() {
-  return doCheckFormat().on('warning', function(e) {
-    console.log("ERROR: You forgot to run clang-format on your change.");
-    console.log("See https://github.com/angular/angular/blob/master/DEVELOPER.md#formatting");
-    process.exit(1);
-  });
-});
-
-gulp.task('lint', ['build.tools'], function() {
-  // https://github.com/palantir/tslint#supported-rules
-  var tslintConfig = {
-    "rules": {
-      "requireReturnType": true
-    }
-  };
-
-  return gulp.src(['modules/angular2/src/**/*.ts', '!modules/angular2/src/test_lib/**'])
-      .pipe(tslint({configuration: tslintConfig, rulesDirectory: 'dist/tools/tslint'}))
-      .pipe(tslint.report('prose'));
-});
-
-// ------------
-// check circular dependencies in Node.js context
-gulp.task('build/checkCircularDependencies', function (done) {
-  var dependencyObject = madge(CONFIG.dest.js.dev.es6, {
-    format: 'es6',
-    paths: [CONFIG.dest.js.dev.es6],
-    extensions: ['.js'],
-    onParseFile: function(data) {
-      data.src = data.src.replace(/import \* as/g, "//import * as");
-    }
-  });
-  var circularDependencies = dependencyObject.circular().getArray();
-  if (circularDependencies.length > 0) {
-    console.log(circularDependencies);
-    process.exit(1);
-  }
-  done();
-});
-
-function jsServeDev() {
-  return jsserve(gulp, gulpPlugins, {
-    path: CONFIG.dest.js.dev.es5,
-    port: 8000
-  })();
-}
-
-function jsServeProd() {
-  return jsserve(gulp, gulpPlugins, {
-    path: CONFIG.dest.js.prod.es5,
-    port: 8001
-  })();
-}
-
-function jsServeDartJs() {
-  return jsserve(gulp, gulpPlugins, {
-    path: CONFIG.dest.js.dart2js,
-    port: 8002
-  })();
-}
-
-// ------------------
-// web servers
-gulp.task('serve.js.dev', ['build.js.dev'], function(neverDone) {
-  watch('modules/**', { ignoreInitial: true }, '!broccoli.js.dev');
-  jsServeDev();
-});
-
-gulp.task('serve.js.prod', jsServeProd);
-
-gulp.task('serve.e2e.dev', ['build.js.dev', 'build.js.cjs', 'build.css.material'], function(neverDone) {
-  watch('modules/**', { ignoreInitial: true }, ['!broccoli.js.dev', '!build.js.cjs']);
-  jsServeDev();
-});
-
-gulp.task('serve.e2e.prod', ['build.js.prod', 'build.js.cjs', 'build.css.material'], function(neverDone) {
-  watch('modules/**', { ignoreInitial: true }, ['!broccoli.js.prod', '!build.js.cjs']);
-  jsServeProd();
-});
-
-gulp.task('serve.js.dart2js', jsServeDartJs);
-
-gulp.task('serve/examples.dart', pubserve(gulp, gulpPlugins, {
-  command: DART_SDK.PUB,
-  path: CONFIG.dest.dart + '/examples'
-}));
-
-gulp.task('serve/benchmarks.dart', pubserve(gulp, gulpPlugins, {
-  command: DART_SDK.PUB,
-  path: CONFIG.dest.dart + '/benchmarks'
-}));
-
-gulp.task('serve/benchmarks_external.dart', pubserve(gulp, gulpPlugins, {
-  command: DART_SDK.PUB,
-  path: CONFIG.dest.dart + '/benchmarks_external'
-}));
-
-// --------------
-// doc generation
-var Dgeni = require('dgeni');
-var bower = require('bower');
-var webserver = require('gulp-webserver');
-
-gulp.task('docs/bower', function() {
-  var bowerTask = bower.commands.install(undefined, undefined, { cwd: 'docs' });
-  bowerTask.on('log', function (result) {
-    console.log('bower:', result.id, result.data.endpoint.name);
-  });
-  bowerTask.on('error', function(error) {
-    console.log(error);
-  });
-  return bowerTask;
-});
-
-
-function createDocsTasks(publicBuild) {
-  var dgeniPackage = publicBuild ? './docs/public-docs-package' : './docs/dgeni-package';
-  var distDocsPath = publicBuild ? 'dist/public_docs' : 'dist/docs';
-  var taskPrefix = publicBuild ? 'public_docs' : 'docs';
-
-  gulp.task(taskPrefix + '/dgeni', function() {
-    try {
-      var dgeni = new Dgeni([require(dgeniPackage)]);
-      return dgeni.generate();
-    } catch(x) {
-      console.log(x);
-      console.log(x.stack);
-      throw x;
-    }
-  });
-
-  gulp.task(taskPrefix + '/assets', ['docs/bower'], function() {
-    return gulp.src('docs/bower_components/**/*')
-      .pipe(gulp.dest(distDocsPath + '/lib'));
-  });
-
-  gulp.task(taskPrefix + '/app', function() {
-    return gulp.src('docs/app/**/*')
-      .pipe(gulp.dest(distDocsPath));
-  });
-
-  gulp.task(taskPrefix, [taskPrefix + '/assets', taskPrefix + '/app', taskPrefix + '/dgeni']);
-  gulp.task(taskPrefix + '/watch', function() {
-    return watch('docs/app/**/*', [taskPrefix + '/app']);
-  });
-
-  gulp.task(taskPrefix + '/test', function (done) {
-    runJasmineTests(['docs/**/*.spec.js'], done);
-  });
-
-  gulp.task(taskPrefix + '/serve', function() {
-    gulp.src(distDocsPath + '/')
-      .pipe(webserver({
-        fallback: 'index.html'
-      }));
-  });
-}
-
-createDocsTasks(true);
-createDocsTasks(false);
-
-gulp.task('docs/angular.io', ['build/clean.docs_angular_io'], function() {
-  try {
-    var dgeni = new Dgeni([require('./docs/angular.io-package')]);
-    return dgeni.generate();
-  } catch(x) {
-    console.log(x);
-    console.log(x.stack);
-    throw x;
-  }
-});
-
-
-// ------------------
-// CI tests suites
-
-function runKarma(configFile, done) {
-  var cmd = process.platform === 'win32' ? 'node_modules\\.bin\\karma run ' :
-                                           'node node_modules/.bin/karma run ';
-  cmd += configFile;
-  exec(cmd, function(e, stdout) {
-    // ignore errors, we don't want to fail the build in the interactive (non-ci) mode
-    // karma server will print all test failures
-    done();
-  });
-}
-
-gulp.task('test.js', function(done) {
-  runSequence('test.unit.tools/ci', 'test.transpiler.unittest', 'docs/test', 'test.unit.js/ci',
-              'test.unit.cjs/ci', 'test.typings', sequenceComplete(done));
-});
-
-gulp.task('test.dart', function(done) {
-  runSequence('versions.dart', 'test.transpiler.unittest', 'docs/test', 'test.unit.dart/ci',
-              sequenceComplete(done));
-});
-
-gulp.task('versions.dart', function() {
-  dartSdk.logVersion(DART_SDK);
-});
-
-// Reuse the Travis scripts
-// TODO: rename test_*.sh to test_all_*.sh
-gulp.task('test.all.js', shell.task(['./scripts/ci/test_js.sh']))
-gulp.task('test.all.dart', shell.task(['./scripts/ci/test_dart.sh']))
-
-// karma tests
-//     These tests run in the browser and are allowed to access
-//     HTML DOM APIs.
-function getBrowsersFromCLI() {
-  var args = minimist(process.argv.slice(2));
-  return [args.browsers?args.browsers:'DartiumWithWebPlatform']
-}
-
-
-gulp.task('test.unit.js', ['build.js.dev'], function (neverDone) {
-
-  runSequence(
-    '!test.unit.js/karma-server',
-    function() {
-      watch('modules/**', [
-        '!broccoli.js.dev',
-        '!test.unit.js/karma-run'
-      ]);
-    }
-  );
-});
-
-
-gulp.task('!test.unit.js/karma-server', function() {
-  karma.server.start({configFile: __dirname + '/karma-js.conf.js', reporters: 'dots'});
-});
-
-
-gulp.task('!test.unit.js/karma-run', function(done) {
-  // run the run command in a new process to avoid duplicate logging by both server and runner from
-  // a single process
-  runKarma('karma-js.conf.js', done);
-});
-
-
-gulp.task('test.unit.dart', function (done) {
-  runSequence(
-    'build/tree.dart',
-    '!build/pubget.angular2.dart',
-    '!build/change_detect.dart',
-    '!build/remove-pub-symlinks',
-    '!test.unit.dart/karma-server',
-    '!test.unit.dart/karma-run',
-    function(error) {
-      // if initial build failed (likely due to build or formatting step) then exit
-      // otherwise karma server doesn't start and we can't continue running properly
-      if (error) {
-        done(error);
-        return;
-      }
-
-      watch('modules/angular2/**', { ignoreInitial: true }, [
-        '!build/tree.dart',
-        '!test.unit.dart/karma-run'
-      ]);
-    }
-  );
-});
-
-gulp.task('!test.unit.dart/karma-run', function (done) {
-  // run the run command in a new process to avoid duplicate logging by both server and runner from
-  // a single process
-  runKarma('karma-dart.conf.js', done);
-});
-
-
-gulp.task('!test.unit.dart/karma-server', function() {
-  karma.server.start({configFile: __dirname + '/karma-dart.conf.js', reporters: 'dots'});
-});
-
-
-gulp.task('test.unit.js/ci', function (done) {
-  karma.server.start({configFile: __dirname + '/karma-js.conf.js',
-    singleRun: true, reporters: ['dots'], browsers: getBrowsersFromCLI()}, done);
-});
-
-gulp.task('test.unit.dart/ci', function (done) {
-  karma.server.start({configFile: __dirname + '/karma-dart.conf.js',
-    singleRun: true, reporters: ['dots'], browsers: getBrowsersFromCLI()}, done);
-});
-
-
-gulp.task('test.unit.cjs/ci', function(done) {
-  runJasmineTests(['dist/js/cjs/{angular2,benchpress}/test/**/*_spec.js'], done);
-});
-
-
-gulp.task('test.unit.cjs', ['build/clean.js', 'build.tools'], function (neverDone) {
-
-  treatTestErrorsAsFatal = false;
-
-  var buildAndTest = [
-    '!build.js.cjs',
-    'test.unit.cjs/ci'
-  ];
-
-  watch('modules/**', buildAndTest);
-});
-
-
-gulp.task('test.unit.dartvm', function (done) {
-  runSequence(
-    'build/tree.dart',
-    'build/pubspec.dart',
-    '!build/change_detect.dart',
-    '!test.unit.dartvm/run',
-    function(error) {
-      // if initial build failed (likely due to build or formatting step) then exit
-      // otherwise karma server doesn't start and we can't continue running properly
-      if (error) {
-        done(error);
-        return;
-      }
-
-      watch('modules/angular2/**', { ignoreInitial: true }, [
-        '!build/tree.dart',
-        '!test.unit.dartvm/run'
-      ]);
-    }
-  );
-});
-
-gulp.task('!test.unit.dartvm/run', runServerDartTests(gulp, gulpPlugins, {
-  dir: 'dist/dart/angular2'
-}));
-
-
-gulp.task('test.unit.tools/ci', function(done) {
-  runJasmineTests(['dist/tools/**/*.spec.js', 'tools/**/*.spec.js'], done);
-});
-
-
-gulp.task('test.unit.tools', ['build/clean.tools'],  function(done) {
-
-  treatTestErrorsAsFatal = false;
-
-  var buildAndTest = [
-    '!build.tools',
-    'test.unit.tools/ci'
-  ];
-
-  watch(['tools/**', '!tools/**/test-fixtures/**'], buildAndTest);
-});
-
-
-// ------------------
-// server tests
-//     These tests run on the VM on the command-line and are
-//     allowed to access the file system and network.
-gulp.task('test.server.dart', runServerDartTests(gulp, gulpPlugins, {
-  dest: 'dist/dart'
-}));
-
-// -----------------
-// test builders
-gulp.task('test.transpiler.unittest', function(done) {
-  runJasmineTests(['tools/transpiler/unittest/**/*.js'], done);
-});
-
-// -----------------
-// Pre/Post-test checks
-
-gulp.task('pre-test-checks', function(done) {
-  runSequence('build/checkCircularDependencies', sequenceComplete(done));
-});
-
-gulp.task('post-test-checks', function(done) {
-  runSequence('lint', 'enforce-format', sequenceComplete(done));
-});
-
-
-gulp.task('!pre.test.typings', [], function() {
-  return gulp
-    .src([
-      'modules/angular2/typings/**/*'], {
-        base: 'modules/angular2/typings/**'
-      }
-    )
-    .pipe(gulp.dest('dist/docs/typings/*'));
-});
-
-// -----------------
-// TODO: Use a version of TypeScript that matches what is used by DefinitelyTyped.
-gulp.task('test.typings', ['!pre.test.typings'], function() {
-  return gulp.src(['typing_spec/*.ts', 'dist/docs/typings/angular2/angular2.d.ts'])
-      .pipe(tsc({target: 'ES5', module: 'commonjs',
-                 // Don't use the version of typescript that gulp-typescript depends on, we need 1.5
-                 // see https://github.com/ivogabe/gulp-typescript#typescript-version
-                 typescript: require('typescript')}));
-});
-
-// -----------------
-// orchestrated targets
-
-// Pure Dart packages only contain Dart code and conform to pub package layout.
-// These packages need no transpilation. All code is copied over to `dist`
-// unmodified and directory structure is preserved.
-//
-// This task also fixes relative `dependency_overrides` paths in `pubspec.yaml`
-// files.
-gulp.task('build/pure-packages.dart', function() {
-  var through2 = require('through2');
-  var yaml = require('js-yaml');
-  var originalPrefix = '../../dist/dart/';
-
-  return gulp
-    .src([
-      'modules_dart/**/*.dart',
-      'modules_dart/**/pubspec.yaml',
-    ])
-    .pipe(through2.obj(function(file, enc, done) {
-      if (file.path.endsWith('pubspec.yaml')) {
-        // Pure packages specify dependency_overrides relative to
-        // `modules_dart`, so they have to walk up and into `dist`.
-        //
-        // Example:
-        //
-        // dependency_overrides:
-        //   angular2:
-        //     path: ../../dist/dart/angular2
-        //
-        // When we copy a pure package into `dist` the relative path
-        // must be updated. The code below replaces paths accordingly.
-        // So the example above is turned into:
-        //
-        // dependency_overrides:
-        //   angular2:
-        //     path: ../angular2
-        //
-        var pubspec = yaml.safeLoad(file.contents.toString());
-        var overrides = pubspec['dependency_overrides'];
-        if (overrides) {
-          Object.keys(overrides).forEach(function(pkg) {
-            var overridePath = overrides[pkg]['path'];
-            if (overridePath.startsWith(originalPrefix)) {
-              overrides[pkg]['path'] = overridePath.replace(originalPrefix, '../');
-            }
-          });
-          file.contents = new Buffer(yaml.safeDump(pubspec));
-        }
-      }
-      this.push(file);
-      done();
-    }))
-    .pipe(gulp.dest('dist/dart'));
-});
-
-// Builds all Dart packages, but does not compile them
-gulp.task('build/packages.dart', function(done) {
-  runSequence(
-    'build/tree.dart',
-    // Run after 'build/tree.dart' because broccoli clears the dist/dart folder
-    '!build/pubget.angular2.dart',
-    '!build/change_detect.dart',
-    'build/pure-packages.dart',
-    sequenceComplete(done));
-});
-
-// Builds and compiles all Dart packages
-gulp.task('build.dart', function(done) {
-  runSequence(
-    'build/packages.dart',
-    'build/pubspec.dart',
-    'build/analyze.dart',
-    'build/pubbuild.dart',
-    sequenceComplete(done)
-  );
-});
-
-
-// public task to build tools
-gulp.task('build.tools', ['build/clean.tools'], function(done) {
-  runSequence('!build.tools', sequenceComplete(done));
-});
-
-
-// private task to build tools
-gulp.task('!build.tools', function() {
-  var stream = gulp.src(['tools/**/*.ts'])
-      .pipe(sourcemaps.init())
-      .pipe(tsc({target: 'ES5', module: 'commonjs',
-                 // Don't use the version of typescript that gulp-typescript depends on, we need 1.5
-                 // see https://github.com/ivogabe/gulp-typescript#typescript-version
-                 typescript: require('typescript')}))
-      .on('error', function(error) {
-        // nodejs doesn't propagate errors from the src stream into the final stream so we are
-        // forwarding the error into the final stream
-        stream.emit('error', error);
-      })
-      .pipe(sourcemaps.write('.'))
-      .pipe(gulp.dest('dist/tools'))
-      .on('end', function() {
-        var AngularBuilder = require('./dist/tools/broccoli/angular_builder').AngularBuilder;
-        angularBuilder = new AngularBuilder({
-          outputPath: 'dist',
-          dartSDK: DART_SDK,
-          logs: logs
-        });
-      });
-
-  return stream;
-});
-
-gulp.task('broccoli.js.dev', ['build.tools'], function(done) {
-  runSequence('!broccoli.js.dev', sequenceComplete(done));
-});
-
-gulp.task('!broccoli.js.dev', function() {
-  return angularBuilder.rebuildBrowserDevTree();
-});
-
-gulp.task('!broccoli.js.prod', function() {
-  return angularBuilder.rebuildBrowserProdTree();
-});
-
-gulp.task('build.js.dev', ['build/clean.js'], function(done) {
-  runSequence(
-    'broccoli.js.dev',
-    sequenceComplete(done)
-  );
-});
-
-gulp.task('build.js.prod', ['build.tools'], function(done) {
-  runSequence('!broccoli.js.prod', sequenceComplete(done));
-});
-
-
-/**
- * public task
- */
-gulp.task('build.js.cjs', ['build.tools'], function(done) {
-  runSequence('!build.js.cjs', sequenceComplete(done));
-});
-
-
-var firstBuildJsCjs = true;
-
 /**
- * private task
+ * @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
  */
-gulp.task('!build.js.cjs', function() {
-  return angularBuilder.rebuildNodeTree().then(function() {
-    if (firstBuildJsCjs) {
-      firstBuildJsCjs = false;
-      console.log('creating node_modules symlink hack');
-      // linknodemodules is all sync
-      linknodemodules(gulp, gulpPlugins, {
-        dir: CONFIG.dest.js.cjs
-      })();
-    }
-  });
-});
-
-
-var bundleConfig = {
-  paths: {
-    "*": "dist/js/prod/es6/*.js",
-    "rx": "node_modules/rx/dist/rx.js"
-  },
-  meta: {
-    // auto-detection fails to detect properly here - https://github.com/systemjs/builder/issues/123
-    'rx': {
-        format: 'cjs'
-      }
-    }
-};
-
-// production build
-gulp.task('bundle.js.prod', ['build.js.prod'], function() {
-  return bundler.bundle(
-      bundleConfig,
-      'angular2/angular2',
-      './dist/build/angular2.js',
-      {
-        sourceMaps: true
-      });
-});
-
-// minified production build
-gulp.task('bundle.js.min', ['build.js.prod'], function() {
-  return bundler.bundle(
-      bundleConfig,
-      'angular2/angular2',
-      './dist/build/angular2.min.js',
-      {
-        sourceMaps: true,
-        minify: true
-      });
-});
-
-// development build
-gulp.task('bundle.js.dev', ['build.js.dev'], function() {
-  var devBundleConfig = merge(true, bundleConfig);
-  devBundleConfig.paths =
-      merge(true, devBundleConfig.paths, {
-       "*": "dist/js/dev/es6/*.js"
-      });
-  return bundler.bundle(
-      devBundleConfig,
-      'angular2/angular2',
-      './dist/build/angular2.dev.js',
-      { sourceMaps: true });
-});
-
-gulp.task('router.bundle.js.dev', ['build.js.dev'], function() {
-  var devBundleConfig = merge(true, bundleConfig);
-  devBundleConfig.paths =
-    merge(true, devBundleConfig.paths, {
-      "*": "dist/js/dev/es6/*.js"
-    });
-  return bundler.bundle(
-    devBundleConfig,
-    'angular2/router - angular2/angular2',
-    './dist/bundle/router.dev.js',
-    { sourceMaps: true });
-});
-
-gulp.task('mock.bundle.js.dev', ['build.js.dev'], function() {
-  var devBundleConfig = merge(true, bundleConfig);
-  devBundleConfig.paths =
-    merge(true, devBundleConfig.paths, {
-      "*": "dist/js/dev/es6/*.js"
-    });
-  return bundler.bundle(
-    devBundleConfig,
-    'angular2/mock - angular2/angular2',
-    './dist/bundle/mock.dev.js',
-    { sourceMaps: true });
-});
-
-// self-executing development build
-// This bundle executes its main module - angular2_sfx, when loaded, without
-// a corresponding System.import call. It is aimed at ES5 developers that do not
-// use System loader polyfills (like system.js and es6 loader).
-// see: https://github.com/systemjs/builder (SFX bundles).
-gulp.task('bundle.js.sfx.dev', ['build.js.dev'], function() {
-  var devBundleConfig = merge(true, bundleConfig);
-  devBundleConfig.paths =
-      merge(true, devBundleConfig.paths, {
-       '*': 'dist/js/dev/es6/*.js'
-      });
-  return bundler.bundle(
-      devBundleConfig,
-      'angular2/angular2_sfx',
-      './dist/build/angular2.sfx.dev.js',
-      { sourceMaps: true },
-      /* self-executing */ true);
-});
-
-gulp.task('bundle.js.prod.deps', ['bundle.js.prod'], function() {
-  return bundler.modify(
-      ['node_modules/zone.js/dist/zone-microtask.js', 'node_modules/reflect-metadata/Reflect.js',
-      'dist/build/angular2.js'],
-      'angular2.js'
-  ).pipe(gulp.dest('dist/bundle'));
-});
-
-gulp.task('bundle.js.min.deps', ['bundle.js.min'], function() {
-  return bundler.modify(
-      ['node_modules/zone.js/dist/zone-microtask.min.js',
-      'node_modules/reflect-metadata/Reflect.js', 'dist/build/angular2.min.js'],
-      'angular2.min.js'
-  )
-  .pipe(uglify())
-  .pipe(gulp.dest('dist/bundle'));
-});
-
-var JS_DEV_DEPS = [
-    'node_modules/zone.js/dist/zone-microtask.js',
-    'node_modules/zone.js/dist/long-stack-trace-zone.js',
-    'node_modules/reflect-metadata/Reflect.js'
-];
-
-gulp.task('bundle.js.dev.deps', ['bundle.js.dev'], function() {
-  return bundler.modify(JS_DEV_DEPS.concat(['dist/build/angular2.dev.js']), 'angular2.dev.js')
-      .pipe(insert.append('\nSystem.config({"paths":{"*":"*.js","angular2/*":"angular2/*"}});\n'))
-      .pipe(gulp.dest('dist/bundle'));
-});
-
-gulp.task('bundle.js.sfx.dev.deps', ['bundle.js.sfx.dev'], function() {
-  return bundler.modify(JS_DEV_DEPS.concat(['dist/build/angular2.sfx.dev.js']),
-                        'angular2.sfx.dev.js')
-      .pipe(gulp.dest('dist/bundle'));
-});
 
-gulp.task('bundle.js.deps', ['bundle.js.prod.deps', 'bundle.js.dev.deps', 'bundle.js.min.deps', 'bundle.js.sfx.dev.deps', 'router.bundle.js.dev', 'mock.bundle.js.dev']);
-
-gulp.task('build.js', ['build.js.dev', 'build.js.prod', 'build.js.cjs', 'bundle.js.deps', 'benchpress.bundle']);
-
-gulp.task('clean', ['build/clean.tools', 'build/clean.js', 'build/clean.dart', 'build/clean.docs', 'build/clean.benchpress.bundle']);
-
-gulp.task('build', ['build.js', 'build.dart']);
-
-// ------------
-// change detection codegen
-
-
-gulp.task('build.change_detect.dart', function(done) {
-  return runSequence('build/packages.dart', '!build/pubget.angular2.dart',
-                     '!build/change_detect.dart', done);
-});
-
-gulp.task('!build/change_detect.dart', function(done) {
-  var fs = require('fs');
-  var changeDetectDir = path.join(CONFIG.dest.dart, 'angular2/test/change_detection/');
-  var srcDir = path.join(changeDetectDir, 'generator');
-  var destDir = path.join(changeDetectDir, 'generated');
-
-  var dartStream = fs.createWriteStream(path.join(destDir, 'change_detector_classes.dart'));
-  var genMain = path.join(srcDir, 'gen_change_detectors.dart');
-  var proc = spawn(DART_SDK.VM, [genMain], { stdio:['ignore', 'pipe', 'inherit'] });
-  proc.on('error', function(code) {
-    done(new Error('Failed while generating change detector classes. Please run manually: ' +
-                   DART_SDK.VM + ' ' + dartArgs.join(' ')));
-  });
-  proc.on('close', function() {
-    dartStream.close();
-    done();
-  });
-  proc.stdout.pipe(dartStream);
-});
-
-// ------------
-// angular material testing rules
-gulp.task('build.css.material', function() {
-  return gulp.src('modules/*/src/**/*.scss')
-      .pipe(sass())
-      .pipe(autoprefixer())
-      .pipe(gulp.dest(CONFIG.dest.js.prod.es5))
-      .pipe(gulp.dest(CONFIG.dest.js.dev.es5))
-      .pipe(gulp.dest(CONFIG.dest.js.dart2js + '/examples/packages'));
-});
-
-
-gulp.task('build.js.material', function(done) {
-  runSequence('build.js.dev', 'build.css.material', sequenceComplete(done));
-});
-
-gulp.task('build.dart2js.material', function(done) {
-  runSequence('build.dart', 'build.css.material', sequenceComplete(done));
-});
-
-// TODO: this target is temporary until we find a way to use the SASS transformer
-gulp.task('build.dart.material', ['build/packages.dart'], function() {
-  return gulp.src('dist/dart/angular2_material/src/**/*.scss')
-      .pipe(sass())
-      .pipe(autoprefixer())
-      .pipe(gulp.dest('dist/dart/angular2_material/lib/src'));
-});
-
-
-gulp.task('cleanup.builder', function() {
-  return angularBuilder.cleanup();
-});
-
-gulp.task('benchpress.bundle', ['build/clean.benchpress.bundle', 'build.js.cjs'], function(cb) {
-  bundler.benchpressBundle(
-    BENCHPRESS_BUNDLE_CONFIG.entries,
-    BENCHPRESS_BUNDLE_CONFIG.packageJson,
-    BENCHPRESS_BUNDLE_CONFIG.includes,
-    BENCHPRESS_BUNDLE_CONFIG.excludes,
-    BENCHPRESS_BUNDLE_CONFIG.ignore,
-    BENCHPRESS_BUNDLE_CONFIG.dest,
-    cb
-  );
-})
-
-
-// register cleanup listener for ctrl+c/kill used to quit any persistent task (autotest or serve tasks)
-process.on('SIGINT', function() {
-  if (!angularBuilder.mock) {
-    runSequence('cleanup.builder', function () {
-      process.exit();
-    });
-  }
-});
-
-
-// register cleanup listener for all non-persistent tasks
-var beforeExitRan = false;
-
-process.on('beforeExit', function() {
-  if (beforeExitRan) return;
+'use strict';
 
-  beforeExitRan = true;
 
-  if (!angularBuilder.mock) {
-    gulp.start('cleanup.builder');
-  }
-});
+// THIS CHECK SHOULD BE THE FIRST THING IN THIS FILE
+// This is to ensure that we catch env issues before we error while requiring other dependencies.
+const engines = require('./package.json').engines;
+require('./tools/check-environment')({
+  requiredNodeVersion: engines.node,
+  requiredNpmVersion: engines.npm,
+  requiredYarnVersion: engines.yarn
+});
+
+const gulp = require('gulp');
+
+// See `tools/gulp-tasks/README.md` for information about task loading.
+function loadTask(fileName, taskName) {
+  const taskModule = require('./tools/gulp-tasks/' + fileName);
+  const task = taskName ? taskModule[taskName] : taskModule;
+  return task(gulp);
+}
+
+gulp.task('format:enforce', loadTask('format', 'enforce'));
+gulp.task('format', loadTask('format', 'format'));
+gulp.task('build.sh', loadTask('build', 'all'));
+gulp.task('build.sh:no-bundle', loadTask('build', 'no-bundle'));
+gulp.task('lint', ['format:enforce', 'validate-commit-messages', 'tslint']);
+gulp.task('tslint', ['tools:build'], loadTask('lint'));
+gulp.task('validate-commit-messages', loadTask('validate-commit-message'));
+gulp.task('source-map-test', loadTask('source-map-test'));
+gulp.task('tools:build', loadTask('tools-build'));
+gulp.task('check-cycle', loadTask('check-cycle'));
+gulp.task('serve', loadTask('serve', 'default'));
+gulp.task('serve-examples', loadTask('serve', 'examples'));
+gulp.task('changelog', loadTask('changelog'));
+gulp.task('check-env', () => {/* this is a noop because the env test ran already above */});
+gulp.task('cldr:extract', loadTask('cldr', 'extract'));
+gulp.task('cldr:download', loadTask('cldr', 'download'));
+gulp.task('cldr:gen-closure-locale', loadTask('cldr', 'closure'));
diff --git a/index.bzl b/index.bzl
new file mode 100644
index 000000000000..f5d5e8037140
--- /dev/null
+++ b/index.bzl
@@ -0,0 +1,28 @@
+# 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
+""" Public API surface is re-exported here.
+
+This API is exported for users building angular from source in downstream
+projects. The rules from packages/bazel are re-exported here as well
+as the ng_setup_workspace repository rule needed when building angular
+from source downstream. Alternately, this API is available from the
+@angular/bazel npm package if the npm distribution of angular is
+used in a downstream project.
+"""
+
+load(
+    "//packages/bazel:index.bzl",
+    _ng_module = "ng_module",
+    _ng_package = "ng_package",
+    _protractor_web_test = "protractor_web_test",
+    _protractor_web_test_suite = "protractor_web_test_suite",
+)
+load("//tools:ng_setup_workspace.bzl", _ng_setup_workspace = "ng_setup_workspace")
+
+ng_module = _ng_module
+ng_package = _ng_package
+protractor_web_test = _protractor_web_test
+protractor_web_test_suite = _protractor_web_test_suite
+ng_setup_workspace = _ng_setup_workspace
diff --git a/integration/.gitignore b/integration/.gitignore
new file mode 100644
index 000000000000..72620c968c61
--- /dev/null
+++ b/integration/.gitignore
@@ -0,0 +1,9 @@
+built/
+dist/
+vendor/
+*/src/*.d.ts
+*/src/*.js
+**/*.ngfactory.ts
+**/*.ngsummary.json
+**/*.ngsummary.ts
+**/.yarn_local_cache*
diff --git a/integration/README.md b/integration/README.md
new file mode 100644
index 000000000000..9367c08f2eef
--- /dev/null
+++ b/integration/README.md
@@ -0,0 +1,56 @@
+# Integration tests for Angular
+
+This directory contains end-to-end tests for Angular. Each directory is a self-contained application that exactly mimics how a user might expect Angular
+to work, so they allow high-fidelity reproductions of real-world issues.
+
+For this to work, we first build the Angular distribution just like we would
+publish it to npm, then install the distribution into each app.
+
+To test Angular CLI applications, we use the integration test `cli-hello-world`.
+When a significant change is released in the CLI, the application should be updated with `ng update`:
+
+```bash
+$ cd integration
+$ ng update
+# ng build
+# ng test
+# typescript version
+```
+
+## Render3 tests
+
+The directory `hello_world_cli` contains a test for render3 used with the angular cli.
+
+If the Angular CLI is modified to generate a render3 application this should be replaced with that project.
+
+If the render3 is updated to support the Angular 5 bootstrap a version of this project should be created that
+uses the Angular 5 bootstrap.
+
+## Writing an integration test
+
+The API for each test is:
+
+- Each sub-directory here is an integration test
+- Each test should have a `package.json` file
+- The test runner will run `yarn` and `yarn test` on the package
+
+This means that the test should be started by test script, like
+```
+'scripts' { 'test': 'runProgramA && assertResultIsGood' }
+```
+
+Note that the `package.json` file uses a special `file://../../dist` scheme
+to reference the Angular packages, so that the locally-built Angular
+is installed into the test app.
+
+Also, beware of floating (non-locked) dependencies. If in doubt
+you can install the package directly from `file:../../node_modules`.
+
+## Running integration tests
+
+```
+$ ./integration/run_tests.sh
+```
+
+The test runner will first re-build any stale npm packages, then `cd` into each
+subdirectory to execute the test.
diff --git a/integration/_payload-limits.json b/integration/_payload-limits.json
new file mode 100644
index 000000000000..5f364d95a54c
--- /dev/null
+++ b/integration/_payload-limits.json
@@ -0,0 +1,43 @@
+{
+  "cli-hello-world": {
+    "master": {
+      "uncompressed": {
+        "runtime": 1110,
+        "main": 151765,
+        "polyfills": 59462
+      }
+    }
+  },
+  "hello_world__closure": {
+    "master": {
+      "uncompressed": {
+        "bundle": "TODO(i): temporarily increase the payload size limit from 105779 - this is due to a closure issue related to ESM reexports that still needs to be investigated",
+        "bundle": 178101
+      }
+    }
+  },
+  "hello_world__render3__closure": {
+    "master": {
+      "uncompressed": {
+        "bundle": 8153
+      }
+    }
+  },
+  "hello_world__render3__rollup": {
+    "master": {
+      "uncompressed": {
+        "bundle": 10129
+      }
+    }
+  },
+  "hello_world__render3__cli": {
+    "master": {
+      "uncompressed": {
+        "inline": 1447,
+        "main": 40513,
+        "polyfills": 60105
+      }
+    }
+  }
+}
+
diff --git a/integration/bazel/BUILD.bazel b/integration/bazel/BUILD.bazel
new file mode 100644
index 000000000000..fe695525e134
--- /dev/null
+++ b/integration/bazel/BUILD.bazel
@@ -0,0 +1,44 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files([
+    "protractor.conf.js",
+])
+
+filegroup(
+    name = "node_modules",
+    srcs = glob(
+        ["node_modules/**/*"],
+        exclude = [
+            # Exclude rxjs because we build it from sources using the label @rxjs//:rxjs
+            "node_modules/rxjs/**",
+
+            # Exclude directories that commonly contain filenames which are
+            # illegal bazel labels
+            # e.g. node_modules/adm-zip/test/assets/attributes_test/New folder/hidden.txt
+            "node_modules/**/test/**",
+            # e.g. node_modules/xpath/docs/function resolvers.md
+            "node_modules/**/docs/**",
+        ],
+    ),
+)
+
+ANGULAR_TESTING = [
+    "node_modules/@angular/*/bundles/*-testing.umd.js",
+    # We use AOT, so the dynamic platform-browser should be visible only in tests
+    # NOTE that we still need to include the compiler because the core depends on it
+    "node_modules/@angular/platform-browser-dynamic/bundles/*.umd.js",
+]
+
+filegroup(
+    name = "angular_bundles",
+    srcs = glob(
+        ["node_modules/@angular/*/bundles/*.umd.js"],
+        exclude = ANGULAR_TESTING,
+    ),
+)
+
+filegroup(
+    name = "angular_test_bundles",
+    testonly = 1,
+    srcs = glob(ANGULAR_TESTING),
+)
diff --git a/integration/bazel/WORKSPACE b/integration/bazel/WORKSPACE
new file mode 100644
index 000000000000..3a6465f927ac
--- /dev/null
+++ b/integration/bazel/WORKSPACE
@@ -0,0 +1,94 @@
+workspace(name = "bazel_integration_test")
+
+#
+# Download Bazel toolchain dependencies as needed by build actions
+#
+
+http_archive(
+    name = "build_bazel_rules_nodejs",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/archive/0.11.4.zip"],
+    strip_prefix = "rules_nodejs-0.11.4",
+    sha256 = "c31c4ead696944a50fad2b3ee9dfbbeffe31a8dcca0b21b9bf5b3e6c6b069801",
+)
+
+http_archive(
+    name = "bazel_skylib",
+    urls = ["https://github.com/bazelbuild/bazel-skylib/archive/0.3.1.zip"],
+    strip_prefix = "bazel-skylib-0.3.1",
+    sha256 = "95518adafc9a2b656667bbf517a952e54ce7f350779d0dd95133db4eb5c27fb1",
+)
+
+http_archive(
+    name = "io_bazel_rules_webtesting",
+    url = "https://github.com/bazelbuild/rules_webtesting/archive/0.2.1.zip",
+    strip_prefix = "rules_webtesting-0.2.1",
+    sha256 = "7d490aadff9b5262e5251fa69427ab2ffd1548422467cb9f9e1d110e2c36f0fa",
+)
+
+http_archive(
+    name = "build_bazel_rules_typescript",
+    url = "https://github.com/bazelbuild/rules_typescript/archive/0.16.0.zip",
+    strip_prefix = "rules_typescript-0.16.0",
+    sha256 = "e65c5639a42e2f6d3f9d2bda62487d6b42734830dda45be1620c3e2b1115070c",
+)
+
+http_archive(
+    name = "io_bazel_rules_go",
+    url = "https://github.com/bazelbuild/rules_go/releases/download/0.11.0/rules_go-0.11.0.tar.gz",
+    sha256 = "f70c35a8c779bb92f7521ecb5a1c6604e9c3edd431e50b6376d7497abc8ad3c1",
+)
+
+http_archive(
+    name = "io_bazel_rules_sass",
+    url = "https://github.com/bazelbuild/rules_sass/archive/0.1.0.zip",
+    strip_prefix = "rules_sass-0.1.0",
+    sha256 = "b243c4d64f054c174051785862ab079050d90b37a1cef7da93821c6981cb9ad4",
+)
+
+#
+# Point Bazel to WORKSPACEs that live in subdirectories
+#
+
+local_repository(
+    name = "angular",
+    path = "node_modules/@angular/bazel",
+)
+
+local_repository(
+    name = "rxjs",
+    path = "node_modules/rxjs/src",
+)
+
+#
+# Load and install our dependencies downloaded above.
+#
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
+
+check_bazel_version("0.15.0")
+node_repositories(package_json = ["//:package.json"])
+
+load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
+
+go_rules_dependencies()
+go_register_toolchains()
+
+load("@io_bazel_rules_webtesting//web:repositories.bzl", "browser_repositories", "web_test_repositories")
+
+web_test_repositories()
+browser_repositories(
+    chromium = True,
+    firefox = True,
+)
+
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
+
+ts_setup_workspace()
+
+load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
+
+sass_repositories()
+
+load("@angular//:index.bzl", "ng_setup_workspace")
+
+ng_setup_workspace()
diff --git a/integration/bazel/angular.tsconfig.json b/integration/bazel/angular.tsconfig.json
new file mode 100644
index 000000000000..57184c92e942
--- /dev/null
+++ b/integration/bazel/angular.tsconfig.json
@@ -0,0 +1,22 @@
+// WORKAROUND https://github.com/angular/angular/issues/18810
+// This file is required to run ngc on angular libraries, to write files like
+// node_modules/@angular/core/core.ngsummary.json
+{
+  "compilerOptions": {
+      "lib": [
+          "dom",
+          "es2015"
+      ],
+      "experimentalDecorators": true,
+      "types": []
+  },
+   "include": [
+      "node_modules/@angular/**/*"
+  ],
+  "exclude": [
+      "node_modules/@angular/bazel/**",
+      "node_modules/@angular/compiler-cli/**",
+      "node_modules/@angular/common/locales/**",
+      "node_modules/@angular/*/testing/**"
+  ]
+}
diff --git a/integration/bazel/package.json b/integration/bazel/package.json
new file mode 100644
index 000000000000..3730e3fdb9e5
--- /dev/null
+++ b/integration/bazel/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "angular-bazel",
+  "description": "example and integration test for building Angular apps with Bazel",
+  "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/core": "file:../../dist/packages-dist/core",
+    "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
+    "rxjs": "file:../../node_modules/rxjs",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "devDependencies": {
+    "@angular/bazel": "file:../../dist/packages-dist/bazel",
+    "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
+    "@types/jasmine": "2.8.7",
+    "@types/source-map": "0.5.1",
+    "http-server": "0.11.1",
+    "protractor": "file:../../node_modules/protractor",
+    "tsutils": "file:../../node_modules/tsutils",
+    "typescript": "file:../../node_modules/typescript"
+  },
+  "scripts": {
+    "postinstall": "ngc -p angular.tsconfig.json",
+    "test": "bazel build ... --noshow_progress && bazel test ..."
+  }
+}
diff --git a/integration/bazel/protractor.conf.js b/integration/bazel/protractor.conf.js
new file mode 100644
index 000000000000..6d86d03a38b1
--- /dev/null
+++ b/integration/bazel/protractor.conf.js
@@ -0,0 +1,4 @@
+exports.config = {
+  getPageTimeout: 60 * 1000,
+  allScriptsTimeout: 60 * 1000,
+};
diff --git a/integration/bazel/src/BUILD.bazel b/integration/bazel/src/BUILD.bazel
new file mode 100644
index 000000000000..11933be46281
--- /dev/null
+++ b/integration/bazel/src/BUILD.bazel
@@ -0,0 +1,58 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@angular//:index.bzl", "ng_module")
+
+# Allow targets under sub-packages to reference the tsconfig.json file
+exports_files(["tsconfig.json"])
+
+ng_module(
+    name = "src",
+    srcs = glob(["*.ts"]),
+    tsconfig = ":tsconfig.json",
+    deps = ["//src/hello-world"],
+)
+
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+ts_devserver(
+    name = "devserver",
+    additional_root_paths = [
+        "bazel_integration_test/node_modules/zone.js/dist",
+    ],
+    entry_module = "bazel_integration_test/src/main",
+    scripts = ["//:angular_bundles"],
+    serving_path = "/bundle.min.js",
+    static_files = [
+        "//:node_modules/zone.js/dist/zone.min.js",
+        "index.html",
+    ],
+    deps = ["//src"],
+)
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary", "rollup_bundle")
+
+rollup_bundle(
+    name = "bundle",
+    entry_point = "src/main",
+    deps = ["//src"],
+)
+
+# Needed because the prodserver only loads static files that appear under this
+# package.
+genrule(
+    name = "zone.js",
+    srcs = ["//:node_modules/zone.js/dist/zone.min.js"],
+    outs = ["zone.min.js"],
+    cmd = "cp $< $@",
+)
+
+nodejs_binary(
+    name = "prodserver",
+    data = [
+        "index.html",
+        ":bundle",
+        ":zone.js",
+    ],
+    entry_point = "http-server/bin/http-server",
+    templated_args = ["src"],
+)
diff --git a/integration/bazel/src/app.component.ts b/integration/bazel/src/app.component.ts
new file mode 100644
index 000000000000..df2ab4a7758f
--- /dev/null
+++ b/integration/bazel/src/app.component.ts
@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-component',
+  template: `
+    <hello-world-app></hello-world-app>
+    <div>The current time is {{ time$ | async }}</div>
+  `})
+export class AppComponent {
+  constructor(private http: HttpClient) {
+  }
+
+  time$ = this.http.get('http://worldclockapi.com/api/json/pst/now').pipe(
+    map((result: any) => result.currentDateTime),
+    startWith(['...']));
+}
diff --git a/integration/bazel/src/app.module.ts b/integration/bazel/src/app.module.ts
new file mode 100644
index 000000000000..bbd2d88dff69
--- /dev/null
+++ b/integration/bazel/src/app.module.ts
@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {HttpClientModule} from '@angular/common/http';
+import {CommonModule} from '@angular/common';
+
+import {AppComponent} from './app.component';
+import {HelloWorldModule} from './hello-world/hello-world.module';
+
+@NgModule({
+  imports: [CommonModule, BrowserModule, HttpClientModule, HelloWorldModule],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
diff --git a/integration/bazel/src/hello-world/BUILD.bazel b/integration/bazel/src/hello-world/BUILD.bazel
new file mode 100644
index 000000000000..c5751b8f2436
--- /dev/null
+++ b/integration/bazel/src/hello-world/BUILD.bazel
@@ -0,0 +1,51 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@angular//:index.bzl", "ng_module", "ng_package")
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test_suite")
+
+sass_binary(
+    name = "hello-world-styles",
+    src = "hello-world.component.scss",
+)
+
+ng_module(
+    name = "hello-world",
+    srcs = glob(
+        ["*.ts"],
+        exclude = ["*.spec.ts"],
+    ),
+    assets = [":hello-world-styles"],
+    tsconfig = "//src:tsconfig.json",
+    # FIXME(alexeagle): the rxjs dep should come from Angular, but if we use the
+    # npm distro of angular there is no ts_library rule to propagate the dep.
+    deps = ["@rxjs"],
+)
+
+ng_package(
+    name = "npm_package",
+    entry_point = "src/hello-world/index.js",
+    deps = [":hello-world"],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["*.spec.ts"]),
+    tsconfig = "//src:tsconfig.json",
+    deps = [":hello-world"],
+)
+
+ts_web_test_suite(
+    name = "test",
+    bootstrap = ["//:node_modules/zone.js/dist/zone-testing-bundle.js"],
+    browsers = [
+        "@io_bazel_rules_webtesting//browsers:chromium-local",
+        "@io_bazel_rules_webtesting//browsers:firefox-local",
+    ],
+    deps = [
+        ":test_lib",
+        "//:angular_bundles",
+        "//:angular_test_bundles",
+    ],
+)
diff --git a/integration/bazel/src/hello-world/hello-world.component.scss b/integration/bazel/src/hello-world/hello-world.component.scss
new file mode 100644
index 000000000000..c5a2b03af2ef
--- /dev/null
+++ b/integration/bazel/src/hello-world/hello-world.component.scss
@@ -0,0 +1,5 @@
+$example-red: #ff0000;
+
+h1 {
+  color: $example-red;
+}
diff --git a/integration/bazel/src/hello-world/hello-world.component.spec.ts b/integration/bazel/src/hello-world/hello-world.component.spec.ts
new file mode 100644
index 000000000000..c23d8c6b8248
--- /dev/null
+++ b/integration/bazel/src/hello-world/hello-world.component.spec.ts
@@ -0,0 +1,45 @@
+import {DebugElement} from '@angular/core';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+
+import {HelloWorldComponent} from './hello-world.component';
+import {HelloWorldModuleNgSummary} from './hello-world.module.ngsummary';
+
+// TODO(alexeagle): this helper should be in @angular/platform-browser-dynamic/testing
+try {
+  TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+} catch {
+  // Ignore exceptions when calling it multiple times.
+}
+
+describe('BannerComponent (inline template)', () => {
+  let comp: HelloWorldComponent;
+  let fixture: ComponentFixture<HelloWorldComponent>;
+  let el: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [HelloWorldComponent],  // declare the test component
+      aotSummaries: HelloWorldModuleNgSummary,
+    });
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HelloWorldComponent);
+    comp = fixture.componentInstance;
+    el = fixture.debugElement.query(By.css('div')).nativeElement;
+  });
+
+  it('should display original title', () => {
+    fixture.detectChanges();
+    expect(el.textContent).toContain(comp.name);
+  });
+
+  it('should display a different test title', () => {
+    comp.name = 'Test';
+    fixture.detectChanges();
+    expect(el.textContent).toContain('Test');
+  });
+});
diff --git a/integration/bazel/src/hello-world/hello-world.component.ts b/integration/bazel/src/hello-world/hello-world.component.ts
new file mode 100644
index 000000000000..5386c6360782
--- /dev/null
+++ b/integration/bazel/src/hello-world/hello-world.component.ts
@@ -0,0 +1,15 @@
+
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'hello-world-app',
+  template: `
+    <div>Hello {{ name }}!</div>
+    <input type="text" [value]="name" (input)="name = $event.target.value"/>
+  `,
+  // TODO: might be better to point to .scss so this looks valid at design-time
+  styleUrls: ['./hello-world.component.css'],
+})
+export class HelloWorldComponent {
+  name: string = 'world';
+}
diff --git a/integration/bazel/src/hello-world/hello-world.module.ts b/integration/bazel/src/hello-world/hello-world.module.ts
new file mode 100644
index 000000000000..92cba5c01f9c
--- /dev/null
+++ b/integration/bazel/src/hello-world/hello-world.module.ts
@@ -0,0 +1,8 @@
+import {HelloWorldComponent} from './hello-world.component';
+import {NgModule} from '@angular/core';
+
+@NgModule({
+  declarations: [HelloWorldComponent],
+  exports: [HelloWorldComponent],
+})
+export class HelloWorldModule {}
diff --git a/integration/bazel/src/hello-world/index.ts b/integration/bazel/src/hello-world/index.ts
new file mode 100644
index 000000000000..3362a036e573
--- /dev/null
+++ b/integration/bazel/src/hello-world/index.ts
@@ -0,0 +1,2 @@
+export * from './hello-world.component';
+export * from './hello-world.module';
diff --git a/integration/bazel/src/index.html b/integration/bazel/src/index.html
new file mode 100644
index 000000000000..766707a3f221
--- /dev/null
+++ b/integration/bazel/src/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Bazel Integration Test</title>
+  </head>
+  <body>
+    <app-component></app-component>
+    <script src="/zone.min.js"></script>
+    <script src="/bundle.min.js"></script>
+  </body>
+</html>
diff --git a/integration/bazel/src/main.ts b/integration/bazel/src/main.ts
new file mode 100644
index 000000000000..beeae5e4b3e6
--- /dev/null
+++ b/integration/bazel/src/main.ts
@@ -0,0 +1,4 @@
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModuleNgFactory} from './app.module.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/integration/bazel/src/tsconfig.json b/integration/bazel/src/tsconfig.json
new file mode 100644
index 000000000000..068cd10fccf9
--- /dev/null
+++ b/integration/bazel/src/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "es5",
+      "es2015.collection",
+      "es2015.iterable",
+      "es2015.promise"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/integration/bazel/test/e2e/BUILD.bazel b/integration/bazel/test/e2e/BUILD.bazel
new file mode 100644
index 000000000000..fad7aa946f63
--- /dev/null
+++ b/integration/bazel/test/e2e/BUILD.bazel
@@ -0,0 +1,35 @@
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+load("@angular//:index.bzl", "protractor_web_test_suite")
+
+ts_library(
+    name = "e2e",
+    testonly = 1,
+    srcs = ["app.spec.ts"],
+    tsconfig = ":tsconfig.json",
+)
+
+ts_library(
+    name = "ts_on_prepare",
+    testonly = 1,
+    srcs = ["on-prepare.ts"],
+    tsconfig = ":tsconfig.json",
+    deps = ["@angular//src/protractor/utils"],
+)
+
+protractor_web_test_suite(
+    name = "devserver_test",
+    configuration = "//:protractor.conf.js",
+    data = ["@angular//src/protractor/utils"],
+    on_prepare = ":ts_on_prepare",
+    server = "//src:devserver",
+    deps = [":e2e"],
+)
+
+protractor_web_test_suite(
+    name = "prodserver_test",
+    configuration = "//:protractor.conf.js",
+    data = ["@angular//src/protractor/utils"],
+    on_prepare = ":ts_on_prepare",
+    server = "//src:prodserver",
+    deps = [":e2e"],
+)
diff --git a/integration/bazel/test/e2e/app.spec.ts b/integration/bazel/test/e2e/app.spec.ts
new file mode 100644
index 000000000000..276d099a51fa
--- /dev/null
+++ b/integration/bazel/test/e2e/app.spec.ts
@@ -0,0 +1,14 @@
+import {browser, by, element} from 'protractor';
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 120000;
+
+describe('angular example application', () => {
+  it('should display: Hello World!', (done) => {
+    browser.get('');
+    const div = element(by.css('div'));
+    div.getText().then(t => expect(t).toEqual(`Hello world!`));
+    element(by.css('input')).sendKeys('!');
+    div.getText().then(t => expect(t).toEqual(`Hello world!!`));
+    done();
+  });
+});
diff --git a/integration/bazel/test/e2e/on-prepare.ts b/integration/bazel/test/e2e/on-prepare.ts
new file mode 100644
index 000000000000..83c96a4ab62d
--- /dev/null
+++ b/integration/bazel/test/e2e/on-prepare.ts
@@ -0,0 +1,12 @@
+import { browser } from 'protractor';
+import {OnPrepareConfig, runServer} from '@angular/bazel/protractor-utils';
+
+export = function(config: OnPrepareConfig) {
+  const portFlag = config.server.endsWith('prodserver') ? '-p' : '-port';
+  return runServer(config.workspace, config.server, portFlag, [])
+    .then(serverSpec => {
+      const serverUrl = `http://localhost:${serverSpec.port}`;
+      console.log(`Server has been started, starting tests against ${serverUrl}`);
+      browser.baseUrl = serverUrl;
+    });
+}
diff --git a/integration/bazel/test/e2e/tsconfig.json b/integration/bazel/test/e2e/tsconfig.json
new file mode 100644
index 000000000000..8f3c65679683
--- /dev/null
+++ b/integration/bazel/test/e2e/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015"]
+  }
+}
diff --git a/integration/bazel/tools/bazel.rc b/integration/bazel/tools/bazel.rc
new file mode 100644
index 000000000000..b005159840b9
--- /dev/null
+++ b/integration/bazel/tools/bazel.rc
@@ -0,0 +1,10 @@
+# Make TypeScript and Angular compilation fast, by keeping a few copies of the
+# compiler running as daemons, and cache SourceFile AST's to reduce parse time.
+build --strategy=TypeScriptCompile=worker
+build --strategy=AngularTemplateCompile=worker
+
+test --test_output=errors
+
+# Workaround https://github.com/bazelbuild/bazel/issues/3645
+# Limit Bazel to consuming 3072K of RAM
+build --local_resources=3072,2.0,1.0
diff --git a/integration/bazel/yarn.lock b/integration/bazel/yarn.lock
new file mode 100644
index 000000000000..0351e1f77ac4
--- /dev/null
+++ b/integration/bazel/yarn.lock
@@ -0,0 +1,1573 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular/animations@file:../../dist/packages-dist/animations":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/bazel@file:../../dist/packages-dist/bazel":
+  version "6.1.0"
+  dependencies:
+    "@bazel/typescript" "^0.15.0"
+    "@types/node" "6.0.84"
+    protobufjs "5.0.0"
+
+"@angular/common@file:../../dist/packages-dist/common":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@file:../../dist/packages-dist/compiler-cli":
+  version "6.1.0"
+  dependencies:
+    chokidar "^1.4.2"
+    convert-source-map "^1.5.1"
+    magic-string "^0.25.0"
+    minimist "^1.2.0"
+    reflect-metadata "^0.1.2"
+    source-map "^0.6.1"
+    tsickle "^0.32.1"
+
+"@angular/compiler@file:../../dist/packages-dist/compiler":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@file:../../dist/packages-dist/core":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser-dynamic@file:../../dist/packages-dist/platform-browser-dynamic":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@bazel/typescript@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@bazel/typescript/-/typescript-0.15.0.tgz#bd588b8b9fcc5763c3f14787fdb29ba4e127258d"
+
+"@types/jasmine@2.8.7":
+  version "2.8.7"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.7.tgz#3fe583928ae0a22cdd34cedf930eeffeda2602fd"
+
+"@types/node@6.0.84":
+  version "6.0.84"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.84.tgz#193ffe5a9f42864d425ffd9739d95b753c6a1eab"
+
+"@types/node@^6.0.46":
+  version "6.0.113"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.113.tgz#4b41f38ad03e4b41f9dc259b3b58aecb22c9aebc"
+
+"@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.43"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz#2de3d718819bc20165754c4a59afb7e9833f6707"
+
+"@types/source-map@0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@types/source-map/-/source-map-0.5.1.tgz#7e74db5d06ab373a712356eebfaea2fad0ea2367"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+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:
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.11.tgz#2aa54c84c4b01a9d0fb89bb11982a51f13e3d62a"
+
+agent-base@2:
+  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"
+
+ajv@^5.1.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+ascli@~1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ascli/-/ascli-1.0.1.tgz#bcfa5974a62f18e81cabaeb49732ab4a88f906bc"
+  dependencies:
+    colour "~0.7.1"
+    optjs "~3.2.2"
+
+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"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.6.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+binary-extensions@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+
+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"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+buffer-from@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.0.tgz#87fcaa3a298358e0ade6e442cfce840740d1ad04"
+
+bytebuffer@~5:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/bytebuffer/-/bytebuffer-5.0.1.tgz#582eea4b1a873b6d020a48d58df85f0bba6cfddd"
+  dependencies:
+    long "~3"
+
+camelcase@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+chalk@^1.1.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chokidar@^1.4.2:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+chownr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
+
+cliui@^3.0.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+colors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+
+colour@~0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/colour/-/colour-0.7.1.tgz#9cb169917ec5d12c0736d3e8685746df1cadf778"
+
+combined-stream@1.0.6, combined-stream@~1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+convert-source-map@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+
+core-util-is@1.0.2, 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"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+debug@2, debug@^2.1.2, debug@^2.2.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
+decamelize@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+
+del@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+diff@^3.2.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ecstatic@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ecstatic/-/ecstatic-3.2.0.tgz#1b1aee1ca7c6b99cfb5cf6c9b26b481b90c4409f"
+  dependencies:
+    he "^1.1.1"
+    mime "^1.4.1"
+    minimist "^1.1.0"
+    url-join "^2.0.2"
+
+escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+eventemitter3@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@3, extend@~3.0.0, extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+fast-deep-equal@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+filename-regex@^2.0.0:
+  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.4"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^3.0.0"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+follow-redirects@^1.0.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.0.tgz#234f49cf770b7f35b40e790f636ceba0c3a0ab77"
+  dependencies:
+    debug "^3.1.0"
+
+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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    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.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "1.0.6"
+    mime-types "^2.1.12"
+
+fs-minipass@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
+  dependencies:
+    minipass "^2.2.1"
+
+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.2.4"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
+  dependencies:
+    nan "^2.9.2"
+    node-pre-gyp "^0.10.0"
+
+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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^5.0.10:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.3, glob@^7.0.5, glob@^7.0.6:
+  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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+graceful-fs@^4.1.2:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+he@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+
+http-proxy@^1.8.1:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
+  dependencies:
+    eventemitter3 "^3.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
+http-server@0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/http-server/-/http-server-0.11.1.tgz#2302a56a6ffef7f9abea0147d838a5e9b6b6a79b"
+  dependencies:
+    colors "1.0.3"
+    corser "~2.0.0"
+    ecstatic "^3.0.0"
+    http-proxy "^1.8.1"
+    opener "~1.4.0"
+    optimist "0.6.x"
+    portfinder "^1.0.13"
+    union "~0.4.3"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-proxy-agent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+iconv-lite@^0.4.4:
+  version "0.4.23"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+ignore-walk@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
+  dependencies:
+    minimatch "^3.0.4"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.1, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-dotfile@^1.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+
+is-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+isarray@1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jasmine-core@~2.99.0:
+  version "2.99.1"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.99.1.tgz#e6400df1e6b56e130b61c4bcd093daa7f6e8ca15"
+
+jasmine-diff@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/jasmine-diff/-/jasmine-diff-0.1.3.tgz#93ccc2dcc41028c5ddd4606558074839f2deeaa8"
+  dependencies:
+    diff "^3.2.0"
+
+jasmine@^2.5.3:
+  version "2.99.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.99.0.tgz#8ca72d102e639b867c6489856e0e18a9c7aa42b7"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.99.0"
+
+jasminewd2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+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"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+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"
+
+kind-of@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+long@~3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b"
+
+magic-string@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.0.tgz#1f3696f9931ff0a1ed4c132250529e19cad6759b"
+  dependencies:
+    sourcemap-codec "^1.4.1"
+
+math-random@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
+
+mime-types@^2.1.12, mime-types@~2.1.17:
+  version "2.1.18"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
+  dependencies:
+    mime-db "~1.33.0"
+
+mime@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+
+"minimatch@2 || 3", 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.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@^1.1.0, 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"
+
+minipass@^2.2.1, minipass@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.3.tgz#a7dcc8b7b833f5d368759cce544dccb55f50f233"
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
+minizlib@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.0.tgz#11e13658ce46bc3a70a267aac58359d1e0c29ceb"
+  dependencies:
+    minipass "^2.2.1"
+
+mkdirp@0.5.x, 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"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nan@^2.9.2:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+
+needle@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.1.tgz#b5e325bd3aae8c2678902fa296f729455d1d3a7d"
+  dependencies:
+    debug "^2.1.2"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
+node-pre-gyp@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.0.tgz#6e4ef5bb5c5203c6552448828c852c40111aac46"
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.0"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
+
+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"
+
+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"
+
+npm-bundled@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308"
+
+npm-packlist@^1.1.6:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.1.10.tgz#1039db9e985727e464df066f4cf0ab6ef85c398a"
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+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"
+
+oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+opener@~1.4.0:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
+
+optimist@0.6.x, optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+optjs@~3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/optjs/-/optjs-3.2.2.tgz#69a6ce89c442a44403141ad2f9b370bd5bb6f4ee"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+portfinder@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+
+protobufjs@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-5.0.0.tgz#4223063233ea96ac063ca2b554035204db524fa1"
+  dependencies:
+    ascli "~1"
+    bytebuffer "~5"
+    glob "^5.0.10"
+    yargs "^3.10.0"
+
+"protractor@file:../../node_modules/protractor":
+  version "5.1.2"
+  dependencies:
+    "@types/node" "^6.0.46"
+    "@types/q" "^0.0.32"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "0.0.5"
+    chalk "^1.1.3"
+    glob "^7.0.3"
+    jasmine "^2.5.3"
+    jasminewd2 "^2.1.0"
+    optimist "~0.6.0"
+    q "1.4.1"
+    saucelabs "~1.3.0"
+    selenium-webdriver "3.0.1"
+    source-map-support "~0.4.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+q@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+q@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qs@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404"
+
+qs@~6.5.1:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+
+randomatic@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.0.0.tgz#d35490030eb4f7578de292ce6dfb04a91a128923"
+  dependencies:
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    math-random "^1.0.1"
+
+rc@^1.1.7:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  dependencies:
+    deep-extend "^0.6.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@^2.0.2, readable-stream@^2.0.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+reflect-metadata@^0.1.2:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.12.tgz#311bf0c6b63cd782f228a81abe146a2bfa9c56f2"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+request@^2.78.0:
+  version "2.87.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+rimraf@^2.2.8, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+"rxjs@file:../../node_modules/rxjs":
+  version "6.0.0"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+saucelabs@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.3.0.tgz#d240e8009df7fa87306ec4578a69ba3b5c424fee"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+
+sax@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
+
+sax@>=0.6.0, sax@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+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:
+    adm-zip "0.4.4"
+    rimraf "^2.2.8"
+    tmp "0.0.24"
+    ws "^1.0.1"
+    xml2js "0.4.4"
+
+semver@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
+semver@~5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+source-map-support@^0.5.0:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.6.tgz#4435cee46b1aab62b8e8610ce60f788091c51c13"
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-support@~0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+source-map@^0.6.0, source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+sourcemap-codec@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.1.tgz#c8fd92d91889e902a07aee392bdd2c5863958ba2"
+
+sshpk@^1.7.0:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.2.tgz#c6fc61648a3d9c4e764fd3fcdf4ea105e492ba98"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+    safer-buffer "^2.0.2"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+"string-width@^1.0.2 || 2":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.0.0"
+
+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"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+tar@^4:
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.4.tgz#ec8409fae9f665a4355cc3b4087d0820232bb8cd"
+  dependencies:
+    chownr "^1.0.1"
+    fs-minipass "^1.2.5"
+    minipass "^2.3.3"
+    minizlib "^1.1.0"
+    mkdirp "^0.5.0"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.2"
+
+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"
+
+tough-cookie@~2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
+  dependencies:
+    punycode "^1.4.1"
+
+tsickle@^0.32.1:
+  version "0.32.1"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.32.1.tgz#f16e94ba80b32fc9ebe320dc94fbc2ca7f3521a5"
+  dependencies:
+    jasmine-diff "^0.1.3"
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.8.1, tslib@^1.9.0:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.2.tgz#8be0cc9a1f6dc7727c38deb16c2ebd1a2892988e"
+
+"tsutils@file:../../node_modules/tsutils":
+  version "2.20.0"
+  dependencies:
+    tslib "^1.8.1"
+
+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"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+"typescript@file:../../node_modules/typescript":
+  version "2.9.2"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+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"
+
+url-join@^2.0.2:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+uuid@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+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"
+    del "^2.2.0"
+    glob "^7.0.3"
+    ini "^1.3.4"
+    minimist "^1.2.0"
+    q "^1.4.1"
+    request "^2.78.0"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+    xml2js "^0.4.17"
+
+wide-align@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  dependencies:
+    string-width "^1.0.2 || 2"
+
+window-size@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+ws@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.5.tgz#cbd9e6e75e09fc5d2c90015f21f0c40875e0dd51"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
+xml2js@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.4.tgz#3111010003008ae19240eba17497b57c729c555d"
+  dependencies:
+    sax "0.6.x"
+    xmlbuilder ">=1.0.0"
+
+xml2js@^0.4.17:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@>=1.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-10.0.0.tgz#c64e52f8ae097fe5fd46d1c38adaade071ee1b55"
+
+xmlbuilder@~9.0.1:
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
+
+y18n@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yallist@^3.0.0, yallist@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
+
+yargs@^3.10.0:
+  version "3.32.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
+  dependencies:
+    camelcase "^2.0.1"
+    cliui "^3.0.3"
+    decamelize "^1.1.1"
+    os-locale "^1.4.0"
+    string-width "^1.0.1"
+    window-size "^0.1.4"
+    y18n "^3.2.0"
+
+"zone.js@file:../../node_modules/zone.js":
+  version "0.8.26"
diff --git a/integration/cli-hello-world/.editorconfig b/integration/cli-hello-world/.editorconfig
new file mode 100644
index 000000000000..6e87a003da89
--- /dev/null
+++ b/integration/cli-hello-world/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/integration/cli-hello-world/README.md b/integration/cli-hello-world/README.md
new file mode 100644
index 000000000000..b56c8fedaf52
--- /dev/null
+++ b/integration/cli-hello-world/README.md
@@ -0,0 +1,27 @@
+# CliHelloWorld
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.6.
+
+## 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.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+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.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+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).
diff --git a/integration/cli-hello-world/angular.json b/integration/cli-hello-world/angular.json
new file mode 100644
index 000000000000..0e6f64e89a81
--- /dev/null
+++ b/integration/cli-hello-world/angular.json
@@ -0,0 +1,170 @@
+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "yarn"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "cli-hello-world": {
+      "root": "",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "assets",
+                "input": "/src",
+                "output": "/"
+              },
+              {
+                "glob": "favicon.ico",
+                "input": "/src",
+                "output": "/"
+              }
+            ],
+            "styles": [
+              {
+                "input": "src/styles.css"
+              }
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "dev": {
+              "fileReplacements": [
+                {
+                  "from": "src/environments/environment.ts",
+                  "to": "dist/environments/environment.ts"
+                }
+              ]
+            },
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": true,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "src": "src/environments/environment.ts",
+                  "replaceWith": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "cli-hello-world:build"
+          },
+          "configurations": {
+            "dev": {
+              "browserTarget": "cli-hello-world:build:dev"
+            },
+            "production": {
+              "browserTarget": "cli-hello-world:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "cli-hello-world:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "karmaConfig": "./karma.conf.js",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              {
+                "input": "src/styles.css"
+              }
+            ],
+            "assets": [
+              {
+                "glob": "assets",
+                "input": "/src",
+                "output": "/"
+              },
+              {
+                "glob": "favicon.ico",
+                "input": "/src",
+                "output": "/"
+              }
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "cli-hello-world-e2e": {
+      "root": "",
+      "projectType": "application",
+      "cli": {},
+      "schematics": {},
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "cli-hello-world:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "cli-hello-world:serve:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
diff --git a/integration/cli-hello-world/e2e/app.e2e-spec.ts b/integration/cli-hello-world/e2e/app.e2e-spec.ts
new file mode 100644
index 000000000000..899e84d526b4
--- /dev/null
+++ b/integration/cli-hello-world/e2e/app.e2e-spec.ts
@@ -0,0 +1,19 @@
+import { AppPage } from './app.po';
+
+describe('cli-hello-world App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+
+  it('the percent pipe should work', () => {
+    page.navigateTo();
+    expect(page.getPipeContent()).toEqual('100 % awesome');
+  })
+});
diff --git a/integration/cli-hello-world/e2e/app.po.ts b/integration/cli-hello-world/e2e/app.po.ts
new file mode 100644
index 000000000000..ae3d5f7f15c7
--- /dev/null
+++ b/integration/cli-hello-world/e2e/app.po.ts
@@ -0,0 +1,15 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+
+  getPipeContent() {
+    return element(by.css('app-root p')).getText();
+  }
+}
diff --git a/integration/cli-hello-world/e2e/tsconfig.e2e.json b/integration/cli-hello-world/e2e/tsconfig.e2e.json
new file mode 100644
index 000000000000..1d9e5edf0965
--- /dev/null
+++ b/integration/cli-hello-world/e2e/tsconfig.e2e.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
diff --git a/integration/cli-hello-world/karma.conf.js b/integration/cli-hello-world/karma.conf.js
new file mode 100644
index 000000000000..70468805f79c
--- /dev/null
+++ b/integration/cli-hello-world/karma.conf.js
@@ -0,0 +1,39 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['CustomChrome'],
+    singleRun: false,
+    customLaunchers: {
+      CustomChrome: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    }
+  });
+};
diff --git a/integration/cli-hello-world/package.json b/integration/cli-hello-world/package.json
new file mode 100644
index 000000000000..2486ce07da7a
--- /dev/null
+++ b/integration/cli-hello-world/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "cli-hello-world",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "ng build --prod --progress false",
+    "e2e": "ng e2e",
+    "lint": "ng lint",
+    "ng": "ng",
+    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG",
+    "start": "ng serve",
+    "test": "ng test && ng e2e --webdriver-update=false && ng e2e --prod --webdriver-update=false"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
+    "@angular/common": "file:../../dist/packages-dist/common",
+    "@angular/compiler": "file:../../dist/packages-dist/compiler",
+    "@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/router": "file:../../dist/packages-dist/router",
+    "core-js": "file:../../node_modules/core-js",
+    "rxjs": "file:../../node_modules/rxjs",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.5.0",
+    "@angular/cli": "^6.0.0-rc.5",
+    "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
+    "@angular/language-service": "file:../../dist/packages-dist/language-service",
+    "@types/jasmine": "~2.8.3",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "^4.3.0",
+    "jasmine-core": "~2.8.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "file:../../node_modules/protractor",
+    "ts-node": "~4.1.0",
+    "tslint": "~5.9.1",
+    "typescript": "file:../../node_modules/typescript"
+  }
+}
diff --git a/integration/cli-hello-world/protractor.conf.js b/integration/cli-hello-world/protractor.conf.js
new file mode 100644
index 000000000000..1c07cbce63b5
--- /dev/null
+++ b/integration/cli-hello-world/protractor.conf.js
@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      binary: process.env.CHROME_BIN,
+      args: ['--no-sandbox']
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
diff --git a/integration/cli-hello-world/src/app/app.component.css b/integration/cli-hello-world/src/app/app.component.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/integration/cli-hello-world/src/app/app.component.html b/integration/cli-hello-world/src/app/app.component.html
new file mode 100644
index 000000000000..fade7834d1e2
--- /dev/null
+++ b/integration/cli-hello-world/src/app/app.component.html
@@ -0,0 +1,21 @@
+<!--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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+</div>
+<p>{{ 1 | percent }} awesome</p>
+<h2>Here are some links to help you start: </h2>
+<ul>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
+  </li>
+</ul>
+
diff --git a/integration/cli-hello-world/src/app/app.component.spec.ts b/integration/cli-hello-world/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..bcbdf36b3e50
--- /dev/null
+++ b/integration/cli-hello-world/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    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('Welcome to app!');
+  }));
+});
diff --git a/integration/cli-hello-world/src/app/app.component.ts b/integration/cli-hello-world/src/app/app.component.ts
new file mode 100644
index 000000000000..7b0f67283151
--- /dev/null
+++ b/integration/cli-hello-world/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app';
+}
diff --git a/integration/cli-hello-world/src/app/app.module.ts b/integration/cli-hello-world/src/app/app.module.ts
new file mode 100644
index 000000000000..314179fcf766
--- /dev/null
+++ b/integration/cli-hello-world/src/app/app.module.ts
@@ -0,0 +1,21 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { LOCALE_ID, NgModule } from '@angular/core';
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+
+import { AppComponent } from './app.component';
+
+// adding this code to detect issues like https://github.com/angular/angular-cli/issues/10322
+registerLocaleData(localeFr);
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [{ provide: LOCALE_ID, useValue: 'fr' }],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/integration/cli-hello-world/src/assets/.gitkeep b/integration/cli-hello-world/src/assets/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/integration/cli-hello-world/src/environments/environment.prod.ts b/integration/cli-hello-world/src/environments/environment.prod.ts
new file mode 100644
index 000000000000..3612073bc31c
--- /dev/null
+++ b/integration/cli-hello-world/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/integration/cli-hello-world/src/environments/environment.ts b/integration/cli-hello-world/src/environments/environment.ts
new file mode 100644
index 000000000000..b7f639aecac5
--- /dev/null
+++ b/integration/cli-hello-world/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `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`.
+
+export const environment = {
+  production: false
+};
diff --git a/integration/cli-hello-world/src/favicon.ico b/integration/cli-hello-world/src/favicon.ico
new file mode 100644
index 000000000000..8081c7ceaf2b
Binary files /dev/null and b/integration/cli-hello-world/src/favicon.ico differ
diff --git a/integration/cli-hello-world/src/index.html b/integration/cli-hello-world/src/index.html
new file mode 100644
index 000000000000..a6304df1c56f
--- /dev/null
+++ b/integration/cli-hello-world/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>CliHelloWorld</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/integration/cli-hello-world/src/main.ts b/integration/cli-hello-world/src/main.ts
new file mode 100644
index 000000000000..91ec6da5f078
--- /dev/null
+++ b/integration/cli-hello-world/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));
diff --git a/integration/cli-hello-world/src/polyfills.ts b/integration/cli-hello-world/src/polyfills.ts
new file mode 100644
index 000000000000..d68672ffe4a3
--- /dev/null
+++ b/integration/cli-hello-world/src/polyfills.ts
@@ -0,0 +1,66 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * 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/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 for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * 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`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/integration/cli-hello-world/src/styles.css b/integration/cli-hello-world/src/styles.css
new file mode 100644
index 000000000000..90d4ee0072ce
--- /dev/null
+++ b/integration/cli-hello-world/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/integration/cli-hello-world/src/test.ts b/integration/cli-hello-world/src/test.ts
new file mode 100644
index 000000000000..16317897b1c5
--- /dev/null
+++ b/integration/cli-hello-world/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/integration/cli-hello-world/src/tsconfig.app.json b/integration/cli-hello-world/src/tsconfig.app.json
new file mode 100644
index 000000000000..39ba8dbacbbe
--- /dev/null
+++ b/integration/cli-hello-world/src/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/integration/cli-hello-world/src/tsconfig.spec.json b/integration/cli-hello-world/src/tsconfig.spec.json
new file mode 100644
index 000000000000..47c2dd0ca022
--- /dev/null
+++ b/integration/cli-hello-world/src/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
\ No newline at end of file
diff --git a/integration/cli-hello-world/tsconfig.json b/integration/cli-hello-world/tsconfig.json
new file mode 100644
index 000000000000..a6c016bf38ad
--- /dev/null
+++ b/integration/cli-hello-world/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}
diff --git a/integration/cli-hello-world/tslint.json b/integration/cli-hello-world/tslint.json
new file mode 100644
index 000000000000..9963d6c3954c
--- /dev/null
+++ b/integration/cli-hello-world/tslint.json
@@ -0,0 +1,143 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs",
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": 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"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "no-output-on-prefix": true,
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}
diff --git a/integration/cli-hello-world/yarn.lock b/integration/cli-hello-world/yarn.lock
new file mode 100644
index 000000000000..2680a734eb2a
--- /dev/null
+++ b/integration/cli-hello-world/yarn.lock
@@ -0,0 +1,7209 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular-devkit/architect@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.5.7.tgz#f0bbf10265eef1481c24cc4fc5330dc2326f3062"
+  dependencies:
+    "@angular-devkit/core" "0.5.7"
+    rxjs "^6.0.0-beta.3"
+
+"@angular-devkit/build-angular@~0.5.0":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-0.5.7.tgz#a28f3fa88a8b62720cd7b96583d0ed3e2ec353dd"
+  dependencies:
+    "@angular-devkit/architect" "0.5.7"
+    "@angular-devkit/build-optimizer" "0.5.7"
+    "@angular-devkit/core" "0.5.7"
+    "@ngtools/webpack" "6.0.0-rc.5"
+    ajv "^6.0.0"
+    autoprefixer "^8.1.0"
+    cache-loader "^1.2.2"
+    chalk "~2.2.2"
+    circular-dependency-plugin "^5.0.0"
+    clean-css "^4.1.11"
+    copy-webpack-plugin "^4.5.0"
+    file-loader "^1.1.11"
+    glob "^7.0.3"
+    html-webpack-plugin "^3.0.6"
+    istanbul "^0.4.5"
+    istanbul-instrumenter-loader "^3.0.1"
+    karma-source-map-support "^1.2.0"
+    less "^3.0.1"
+    less-loader "^4.1.0"
+    license-webpack-plugin "^1.2.3"
+    lodash "^4.17.4"
+    memory-fs "^0.4.1"
+    mini-css-extract-plugin "~0.3.0"
+    minimatch "^3.0.4"
+    node-sass "^4.7.2"
+    opn "^5.1.0"
+    parse5 "^4.0.0"
+    portfinder "^1.0.13"
+    postcss "^6.0.19"
+    postcss-import "^11.1.0"
+    postcss-loader "^2.1.1"
+    postcss-url "^7.3.1"
+    raw-loader "^0.5.1"
+    request "^2.83.0"
+    resolve "^1.5.0"
+    rxjs "^6.0.0-beta.3"
+    sass-loader "^6.0.7"
+    silent-error "^1.1.0"
+    source-map-support "^0.5.0"
+    stats-webpack-plugin "^0.6.2"
+    style-loader "^0.20.2"
+    stylus "^0.54.5"
+    stylus-loader "^3.0.2"
+    tree-kill "^1.2.0"
+    uglifyjs-webpack-plugin "^1.2.2"
+    url-loader "^1.0.1"
+    webpack "~4.5.0"
+    webpack-dev-middleware "^3.1.0"
+    webpack-dev-server "^3.1.1"
+    webpack-merge "^4.1.2"
+    webpack-sources "^1.1.0"
+    webpack-subresource-integrity "^1.1.0-rc.4"
+
+"@angular-devkit/build-optimizer@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.5.7.tgz#a66e21707fe65131549133bc03ebff4dbd61cbe8"
+  dependencies:
+    loader-utils "^1.1.0"
+    source-map "^0.5.6"
+    typescript "~2.7.2"
+    webpack-sources "^1.1.0"
+
+"@angular-devkit/core@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-0.5.7.tgz#77cff4d1d0a29040c8771b99cb849909691c3653"
+  dependencies:
+    ajv "~6.4.0"
+    chokidar "^1.7.0"
+    rxjs "^6.0.0-beta.3"
+    source-map "^0.5.6"
+
+"@angular-devkit/schematics@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-0.5.7.tgz#a3780798147451d2455960060c22d7b499655e4a"
+  dependencies:
+    "@angular-devkit/core" "0.5.7"
+    "@ngtools/json-schema" "^1.1.0"
+    rxjs "^6.0.0-beta.3"
+
+"@angular/animations@file:../../dist/packages-dist/animations":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/cli@^6.0.0-rc.5":
+  version "6.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-6.0.0-rc.5.tgz#7eeb00697342b7e0412abcdf0b3c3a4c6b85dd56"
+  dependencies:
+    "@angular-devkit/architect" "0.5.7"
+    "@angular-devkit/core" "0.5.7"
+    "@angular-devkit/schematics" "0.5.7"
+    "@schematics/angular" "0.5.7"
+    "@schematics/update" "0.5.7"
+    chalk "~2.2.0"
+    fs-extra "^4.0.0"
+    node-modules-path "^1.0.0"
+    opn "~5.1.0"
+    resolve "^1.1.7"
+    rxjs "^6.0.0-turbo-rc.4"
+    semver "^5.1.0"
+    silent-error "^1.0.0"
+    symbol-observable "^1.2.0"
+    yargs-parser "^9.0.2"
+
+"@angular/common@file:../../dist/packages-dist/common":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@file:../../dist/packages-dist/compiler-cli":
+  version "6.0.0-rc.5"
+  dependencies:
+    chokidar "^1.4.2"
+    minimist "^1.2.0"
+    reflect-metadata "^0.1.2"
+    tsickle "^0.29.0"
+
+"@angular/compiler@file:../../dist/packages-dist/compiler":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@file:../../dist/packages-dist/core":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/forms@file:../../dist/packages-dist/forms":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/http@file:../../dist/packages-dist/http":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/language-service@file:../../dist/packages-dist/language-service":
+  version "6.0.0-rc.5"
+
+"@angular/platform-browser-dynamic@file:../../dist/packages-dist/platform-browser-dynamic":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/router@file:../../dist/packages-dist/router":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@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@6.0.0-rc.5":
+  version "6.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-6.0.0-rc.5.tgz#841c7cc8cde31e195e46703fcd925330f3cb2727"
+  dependencies:
+    "@angular-devkit/core" "0.5.7"
+    tree-kill "^1.0.0"
+    webpack-sources "^1.1.0"
+
+"@schematics/angular@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-0.5.7.tgz#4260ffc2728453697a42a58560666775f31bc74c"
+  dependencies:
+    "@angular-devkit/core" "0.5.7"
+    "@angular-devkit/schematics" "0.5.7"
+    typescript ">=2.6.2 <2.8"
+
+"@schematics/update@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@schematics/update/-/update-0.5.7.tgz#9ae1ab70cc77a0d14c0148df2737dbcd3988fedd"
+  dependencies:
+    "@angular-devkit/core" "0.5.7"
+    "@angular-devkit/schematics" "0.5.7"
+    rxjs "^6.0.0-beta.3"
+    semver "^5.3.0"
+    semver-intersect "^1.1.2"
+
+"@types/jasmine@*":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.5.tgz#96e58872583fa80c7ea0dd29024b180d5e133678"
+
+"@types/jasmine@~2.8.3":
+  version "2.8.6"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.6.tgz#14445b6a1613cf4e05dd61c3c3256d0e95c0421e"
+
+"@types/jasminewd2@~2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/jasminewd2/-/jasminewd2-2.0.3.tgz#0d2886b0cbdae4c0eeba55e30792f584bf040a95"
+  dependencies:
+    "@types/jasmine" "*"
+
+"@types/node@^6.0.46":
+  version "6.0.96"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.96.tgz#7bf0bf40d6ce51e93762cc47d010c8cc5ebb2179"
+
+"@types/node@~6.0.60":
+  version "6.0.104"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.104.tgz#5a17c151c223041602f11a404db9a00e54250174"
+
+"@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.43"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz#2de3d718819bc20165754c4a59afb7e9833f6707"
+
+"@types/strip-bom@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
+
+"@types/strip-json-comments@0.0.30":
+  version "0.0.30"
+  resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
+
+JSONStream@^1.0.3:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
+  dependencies:
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+abbrev@1.0.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+
+accepts@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+accepts@~1.3.4, accepts@~1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
+  dependencies:
+    mime-types "~2.1.18"
+    negotiator "0.6.1"
+
+acorn-dynamic-import@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz#901ceee4c7faaef7e07ad2a47e890675da50a278"
+  dependencies:
+    acorn "^5.0.0"
+
+acorn@^4.0.3:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+acorn@^5.0.0:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
+
+acorn@^5.2.1:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
+
+addressparser@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/addressparser/-/addressparser-1.0.1.tgz#47afbe1a2a9262191db6838e4fd1d39b40821746"
+
+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:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
+
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+
+agent-base@2:
+  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"
+
+ajv-keywords@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.1.0.tgz#ac2b27939c543e95d2c06e7f7f5c27be4aa543be"
+
+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, ajv@^5.1.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+ajv@^6.0.0, ajv@^6.1.0, ajv@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.4.0.tgz#d3aff78e9277549771daf0164cff48482b754fc6"
+  dependencies:
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+    uri-js "^3.0.2"
+
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+amqplib@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/amqplib/-/amqplib-0.5.2.tgz#d2d7313c7ffaa4d10bcf1e6252de4591b6cc7b63"
+  dependencies:
+    bitsyntax "~0.0.4"
+    bluebird "^3.4.6"
+    buffer-more-ints "0.0.2"
+    readable-stream "1.x >=1.1.9"
+    safe-buffer "^5.0.1"
+
+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@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
+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@^3.1.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  dependencies:
+    color-convert "^1.9.0"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+app-root-path@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.0.1.tgz#cd62dcf8e4fd5a417efc664d2e5b10653c651b46"
+
+append-transform@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  dependencies:
+    default-require-extensions "^1.0.0"
+
+aproba@^1.0.3, aproba@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  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.6"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+
+arr-flatten@^1.0.1, arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+
+array-filter@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-flatten@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
+
+array-includes@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.7.0"
+
+array-map@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
+
+array-reduce@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+
+array-slice@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+
+arrify@^1.0.0, arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
+asn1.js@^4.0.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+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@^1.1.1, assert@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+
+ast-types@0.x.x:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.10.1.tgz#f52fca9715579a14f841d67d7f8d25432ab6a3dd"
+
+astw@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/astw/-/astw-2.2.0.tgz#7bd41784d32493987aeb239b6b4e1c57a873b917"
+  dependencies:
+    acorn "^4.0.3"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-foreach@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
+async@1.x, 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.1.4:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
+  dependencies:
+    lodash "^4.14.0"
+
+async@~2.1.2:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
+  dependencies:
+    lodash "^4.14.0"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+atob@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.0.tgz#ab2b150e51d7b122b9efc8d7340c06b6c41076bc"
+
+autoprefixer@^8.1.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.2.0.tgz#1e49b611b31a5259b86b7a6b2b1b8faf091abe2a"
+  dependencies:
+    browserslist "^3.2.0"
+    caniuse-lite "^1.0.30000817"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.20"
+    postcss-value-parser "^3.2.3"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+axios@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.15.3.tgz#2c9d638b2e191a08ea1d6cc988eadd6ba5bdc053"
+  dependencies:
+    follow-redirects "1.0.0"
+
+babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-generator@^6.18.0:
+  version "6.26.1"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.7"
+    trim-right "^1.0.1"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
+babel-template@^6.16.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.18.0, babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.18.0, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base64-arraybuffer@0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+
+base64-js@^1.0.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.3.tgz#fb13668233d9614cf5fb4bce95a9ba4096cdf801"
+
+base64id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+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"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+big.js@^3.1.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+
+binary-extensions@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+
+bitsyntax@~0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/bitsyntax/-/bitsyntax-0.0.4.tgz#eb10cc6f82b8c490e3e85698f07e83d46e0cba82"
+  dependencies:
+    buffer-more-ints "0.0.2"
+
+bl@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.1.2.tgz#fdca871a99713aa00d19e3bbba41c44787a65398"
+  dependencies:
+    readable-stream "~2.0.5"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  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.6, bluebird@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+
+body-parser@1.18.2, body-parser@^1.16.1:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.2.tgz#87678a19d84b47d859b83199bd59bce222b10454"
+  dependencies:
+    bytes "3.0.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.1"
+    http-errors "~1.6.2"
+    iconv-lite "0.4.19"
+    on-finished "~2.3.0"
+    qs "6.5.1"
+    raw-body "2.3.2"
+    type-is "~1.6.15"
+
+bonjour@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  dependencies:
+    array-flatten "^2.1.0"
+    deep-equal "^1.0.1"
+    dns-equal "^1.0.0"
+    dns-txt "^2.0.2"
+    multicast-dns "^6.0.1"
+    multicast-dns-service-types "^1.1.0"
+
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
+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"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^0.1.2:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-0.1.5.tgz#c085711085291d8b75fdd74eab0f8597280711e6"
+  dependencies:
+    expand-range "^0.1.0"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+braces@^2.3.0, braces@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.1.tgz#7086c913b4e5a08dbe37ac0ee6a2500c4ba691bb"
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    kind-of "^6.0.2"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+brorand@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+
+browser-pack@^6.0.1:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/browser-pack/-/browser-pack-6.0.3.tgz#91ca96518583ef580ab063a309de62e407767a39"
+  dependencies:
+    JSONStream "^1.0.3"
+    combine-source-map "~0.8.0"
+    defined "^1.0.0"
+    safe-buffer "^5.1.1"
+    through2 "^2.0.0"
+    umd "^3.0.0"
+
+browser-resolve@^1.11.0, browser-resolve@^1.7.0:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
+  dependencies:
+    buffer-xor "^1.0.3"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.3"
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+browserify-rsa@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  dependencies:
+    bn.js "^4.1.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  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"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.2"
+    elliptic "^6.0.0"
+    inherits "^2.0.1"
+    parse-asn1 "^5.0.0"
+
+browserify-zlib@^0.2.0, browserify-zlib@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  dependencies:
+    pako "~1.0.5"
+
+browserify@^14.5.0:
+  version "14.5.0"
+  resolved "https://registry.yarnpkg.com/browserify/-/browserify-14.5.0.tgz#0bbbce521acd6e4d1d54d8e9365008efb85a9cc5"
+  dependencies:
+    JSONStream "^1.0.3"
+    assert "^1.4.0"
+    browser-pack "^6.0.1"
+    browser-resolve "^1.11.0"
+    browserify-zlib "~0.2.0"
+    buffer "^5.0.2"
+    cached-path-relative "^1.0.0"
+    concat-stream "~1.5.1"
+    console-browserify "^1.1.0"
+    constants-browserify "~1.0.0"
+    crypto-browserify "^3.0.0"
+    defined "^1.0.0"
+    deps-sort "^2.0.0"
+    domain-browser "~1.1.0"
+    duplexer2 "~0.1.2"
+    events "~1.1.0"
+    glob "^7.1.0"
+    has "^1.0.0"
+    htmlescape "^1.1.0"
+    https-browserify "^1.0.0"
+    inherits "~2.0.1"
+    insert-module-globals "^7.0.0"
+    labeled-stream-splicer "^2.0.0"
+    module-deps "^4.0.8"
+    os-browserify "~0.3.0"
+    parents "^1.0.1"
+    path-browserify "~0.0.0"
+    process "~0.11.0"
+    punycode "^1.3.2"
+    querystring-es3 "~0.2.0"
+    read-only-stream "^2.0.0"
+    readable-stream "^2.0.2"
+    resolve "^1.1.4"
+    shasum "^1.0.0"
+    shell-quote "^1.6.1"
+    stream-browserify "^2.0.0"
+    stream-http "^2.0.0"
+    string_decoder "~1.0.0"
+    subarg "^1.0.0"
+    syntax-error "^1.1.1"
+    through2 "^2.0.0"
+    timers-browserify "^1.0.1"
+    tty-browserify "~0.0.0"
+    url "~0.11.0"
+    util "~0.10.1"
+    vm-browserify "~0.0.1"
+    xtend "^4.0.0"
+
+browserslist@^3.2.0:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.4.tgz#fb9ad70fd09875137ae943a31ab815ed76896031"
+  dependencies:
+    caniuse-lite "^1.0.30000821"
+    electron-to-chromium "^1.3.41"
+
+buffer-from@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.0.0.tgz#4cb8832d23612589b0406e9e2956c17f06fdf531"
+
+buffer-indexof@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+
+buffer-more-ints@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/buffer-more-ints/-/buffer-more-ints-0.0.2.tgz#26b3885d10fa13db7fc01aae3aab870199e0124c"
+
+buffer-xor@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+
+buffer@^4.3.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+buffer@^5.0.2:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+
+buildmail@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/buildmail/-/buildmail-4.0.1.tgz#877f7738b78729871c9a105e3b837d2be11a7a72"
+  dependencies:
+    addressparser "1.0.1"
+    libbase64 "0.1.0"
+    libmime "3.0.0"
+    libqp "1.1.0"
+    nodemailer-fetch "1.6.0"
+    nodemailer-shared "1.1.0"
+    punycode "1.4.1"
+
+builtin-modules@^1.0.0, builtin-modules@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+
+cacache@^10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"
+  dependencies:
+    bluebird "^3.5.1"
+    chownr "^1.0.1"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    lru-cache "^4.1.1"
+    mississippi "^2.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.2"
+    ssri "^5.2.4"
+    unique-filename "^1.1.0"
+    y18n "^4.0.0"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+cache-loader@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-1.2.2.tgz#6d5c38ded959a09cc5d58190ab5af6f73bd353f5"
+  dependencies:
+    loader-utils "^1.1.0"
+    mkdirp "^0.5.1"
+    neo-async "^2.5.0"
+    schema-utils "^0.4.2"
+
+cached-path-relative@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cached-path-relative/-/cached-path-relative-1.0.1.tgz#d09c4b52800aa4c078e2dd81a869aac90d2e54e7"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+camel-case@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
+caniuse-lite@^1.0.30000817, caniuse-lite@^1.0.30000821:
+  version "1.0.30000824"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000824.tgz#de3bc1ba0bff4937302f8cb2a8632a8cc1c07f9a"
+
+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"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@^1.1.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@~2.2.0, chalk@~2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.2.2.tgz#4403f5cf18f35c05f51fbdf152bf588f956cf7cb"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
+chokidar@^1.4.1, chokidar@^1.4.2, chokidar@^1.7.0:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+chokidar@^2.0.0, chokidar@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.3.tgz#dcbd4f6cbb2a55b4799ba8a840ac527e5f4b1176"
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.0"
+    braces "^2.3.0"
+    glob-parent "^3.1.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^2.1.1"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+    upath "^1.0.0"
+  optionalDependencies:
+    fsevents "^1.1.2"
+
+chownr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
+
+chrome-trace-event@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-0.1.2.tgz#90f36885d5345a50621332f0717b595883d5d982"
+
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+circular-dependency-plugin@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/circular-dependency-plugin/-/circular-dependency-plugin-5.0.1.tgz#dbf270002e805e3aaa060f315e99dde4763eaff9"
+
+circular-json@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.5.1.tgz#b8942a09e535863dc21b04417a91971e1d9cd91f"
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+clean-css@4.1.x, clean-css@^4.1.11:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
+  dependencies:
+    source-map "0.5.x"
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone-deep@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-2.0.2.tgz#00db3a1e173656730d1188c3d6aced6d7ea97713"
+  dependencies:
+    for-own "^1.0.0"
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.0"
+    shallow-clone "^1.0.0"
+
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+co@~3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/co/-/co-3.0.6.tgz#1445f226c5eb956138e68c9ac30167ea7d2e6bda"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+codelyzer@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/codelyzer/-/codelyzer-4.3.0.tgz#6bf3ba68efd9d655a451ecaa14a2852001a43dfb"
+  dependencies:
+    app-root-path "^2.0.1"
+    css-selector-tokenizer "^0.7.0"
+    cssauron "^1.4.0"
+    semver-dsl "^1.0.1"
+    source-map "^0.5.7"
+    sprintf-js "^1.0.3"
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-convert@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
+colors@1.1.2, colors@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+combine-lists@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/combine-lists/-/combine-lists-1.0.1.tgz#458c07e09e0d900fc28b70a3fec2dacd1d2cb7f6"
+  dependencies:
+    lodash "^4.5.0"
+
+combine-source-map@~0.7.1:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/combine-source-map/-/combine-source-map-0.7.2.tgz#0870312856b307a87cc4ac486f3a9a62aeccc09e"
+  dependencies:
+    convert-source-map "~1.1.0"
+    inline-source-map "~0.6.0"
+    lodash.memoize "~3.0.3"
+    source-map "~0.5.3"
+
+combine-source-map@~0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/combine-source-map/-/combine-source-map-0.8.0.tgz#a58d0df042c186fcf822a8e8015f5450d2d79a8b"
+  dependencies:
+    convert-source-map "~1.1.0"
+    inline-source-map "~0.6.0"
+    lodash.memoize "~3.0.3"
+    source-map "~0.5.3"
+
+combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.15.x, commander@^2.9.0, commander@~2.15.0:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
+
+commander@^2.12.1, commander@~2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.2.1, component-emitter@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+
+compressible@~2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.13.tgz#0d1020ab924b2fdb4d6279875c7d6daba6baa7a9"
+  dependencies:
+    mime-db ">= 1.33.0 < 2"
+
+compression@^1.5.2:
+  version "1.7.2"
+  resolved "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz#aaffbcd6aaf854b44ebb280353d5ad1651f59a69"
+  dependencies:
+    accepts "~1.3.4"
+    bytes "3.0.0"
+    compressible "~2.0.13"
+    debug "2.6.9"
+    on-headers "~1.0.1"
+    safe-buffer "5.1.1"
+    vary "~1.1.2"
+
+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.5.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+concat-stream@~1.5.0, concat-stream@~1.5.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.2.tgz#708978624d856af41a5a741defdd261da752c266"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "~2.0.0"
+    typedarray "~0.0.5"
+
+connect-history-api-fallback@^1.3.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
+
+connect@^3.6.0:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.5.tgz#fb8dde7ba0763877d0ec9df9dac0b4b40e72c7da"
+  dependencies:
+    debug "2.6.9"
+    finalhandler "1.0.6"
+    parseurl "~1.3.2"
+    utils-merge "1.0.1"
+
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  dependencies:
+    date-now "^0.1.4"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+constants-browserify@^1.0.0, constants-browserify@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+
+content-disposition@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+
+convert-source-map@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+
+convert-source-map@~1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+
+copy-webpack-plugin@^4.5.0:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.5.1.tgz#fc4f68f4add837cc5e13d111b20715793225d29c"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    globby "^7.1.1"
+    is-glob "^4.0.0"
+    loader-utils "^1.1.0"
+    minimatch "^3.0.4"
+    p-limit "^1.0.0"
+    serialize-javascript "^1.4.0"
+
+core-js@^2.2.0:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e"
+
+core-js@^2.4.0:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.4.tgz#f2c8bf181f2a80b92f360121429ce63a2f0aeae0"
+
+"core-js@file:../../node_modules/core-js":
+  version "2.5.1"
+
+core-util-is@1.0.2, 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"
+
+cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
+  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"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-hash@^1.1.0, 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 "^2.0.0"
+    sha.js "^2.4.0"
+
+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"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cross-spawn@^5.0.1:
+  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"
+
+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"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
+crypto-browserify@^3.0.0, crypto-browserify@^3.11.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+    randomfill "^1.0.3"
+
+css-parse@1.7.x:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
+
+css-select@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
+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"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-what@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+
+cssauron@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/cssauron/-/cssauron-1.4.0.tgz#a6602dff7e04a8306dc0db9a551e92e8b5662ad8"
+  dependencies:
+    through X.X.X
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+
+cuint@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+custom-event@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
+
+cyclist@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+data-uri-to-buffer@1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-1.2.0.tgz#77163ea9c20d8641b4707e8f18abdf9a78f34835"
+
+date-format@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/date-format/-/date-format-1.2.0.tgz#615e828e233dd1ab9bb9ae0950e0ceccfa6ecad8"
+
+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@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
+debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8, debug@~2.6.4, debug@~2.6.6, debug@~2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+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"
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+
+deep-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
+deep-extend@~0.4.0:
+  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"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+default-require-extensions@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  dependencies:
+    strip-bom "^2.0.0"
+
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+degenerator@~1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/degenerator/-/degenerator-1.0.4.tgz#fcf490a37ece266464d9cc431ab98c5819ced095"
+  dependencies:
+    ast-types "0.x.x"
+    escodegen "1.x.x"
+    esprima "3.x.x"
+
+del@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+del@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+  dependencies:
+    globby "^6.1.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    p-map "^1.1.1"
+    pify "^3.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+depd@~1.1.1, depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+
+deps-sort@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/deps-sort/-/deps-sort-2.0.0.tgz#091724902e84658260eb910748cccd1af6e21fb5"
+  dependencies:
+    JSONStream "^1.0.3"
+    shasum "^1.0.0"
+    subarg "^1.0.0"
+    through2 "^2.0.0"
+
+des.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+detect-node@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
+
+detective@^4.0.0:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-4.7.1.tgz#0eca7314338442febb6d65da54c10bb1c82b246e"
+  dependencies:
+    acorn "^5.2.1"
+    defined "^1.0.0"
+
+di@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
+
+diff@^3.1.0, diff@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+dir-glob@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
+dns-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+
+dns-packet@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
+  dependencies:
+    ip "^1.1.0"
+    safe-buffer "^5.0.1"
+
+dns-txt@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  dependencies:
+    buffer-indexof "^1.0.0"
+
+dom-converter@~0.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+  dependencies:
+    utila "~0.3"
+
+dom-serialize@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
+  dependencies:
+    custom-event "~1.0.0"
+    ent "~2.2.0"
+    extend "^3.0.0"
+    void-elements "^2.0.0"
+
+dom-serializer@0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  dependencies:
+    domelementtype "~1.1.1"
+    entities "~1.1.1"
+
+domain-browser@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+
+domain-browser@~1.1.0:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+domelementtype@1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
+
+domelementtype@~1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+
+domhandler@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.1:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+double-ended-queue@^2.1.0-0:
+  version "2.1.0-0"
+  resolved "https://registry.yarnpkg.com/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz#103d3527fd31528f40188130c841efdd78264e5c"
+
+duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
+  dependencies:
+    readable-stream "^2.0.2"
+
+duplexify@^3.4.2, duplexify@^3.5.3:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.4.tgz#4bb46c1796eabebeec4ca9a2e66b808cb7a3d8b4"
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+ejs@^2.5.7:
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.8.tgz#2ab6954619f225e6193b7ac5f7c39c48fefe4380"
+
+electron-to-chromium@^1.3.41:
+  version "1.3.42"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.42.tgz#95c33bf01d0cc405556aec899fe61fd4d76ea0f9"
+
+elliptic@^6.0.0:
+  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"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+encodeurl@~1.0.1, encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
+  dependencies:
+    once "^1.4.0"
+
+engine.io-client@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.1.4.tgz#4fcf1370b47163bd2ce9be2733972430350d4ea1"
+  dependencies:
+    component-emitter "1.2.1"
+    component-inherit "0.0.3"
+    debug "~2.6.9"
+    engine.io-parser "~2.1.1"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "~3.3.1"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
+
+engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.2.tgz#4c0f4cff79aaeecbbdcfdea66a823c6085409196"
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "~0.0.7"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.4"
+    has-binary2 "~1.0.2"
+
+engine.io@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.1.4.tgz#3d0211b70a552ce841ffc7da8627b301a9a4162e"
+  dependencies:
+    accepts "1.3.3"
+    base64id "1.0.0"
+    cookie "0.3.1"
+    debug "~2.6.9"
+    engine.io-parser "~2.1.0"
+    ws "~3.3.1"
+  optionalDependencies:
+    uws "~0.14.4"
+
+enhanced-resolve@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.0.0.tgz#e34a6eaa790f62fccd71d93959f56b2b432db10a"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    tapable "^1.0.0"
+
+ent@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
+
+entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
+errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es-abstract@^1.5.1, es-abstract@^1.7.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.11.0.tgz#cce87d518f0496893b1a30cd8461835535480681"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+es-to-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+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:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+escodegen@1.8.x:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
+  dependencies:
+    esprima "^2.7.1"
+    estraverse "^1.9.1"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.2.0"
+
+escodegen@1.x.x:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
+  dependencies:
+    esprima "^3.1.3"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.5.6"
+
+eslint-scope@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+esprima@2.7.x, esprima@^2.7.1:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esprima@3.x.x, esprima@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+
+esprima@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
+esrecurse@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
+  dependencies:
+    estraverse "^4.1.0"
+
+estraverse@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
+
+estraverse@^4.1.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"
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+events@^1.0.0, events@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+eventsource@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+  dependencies:
+    original ">=0.0.5"
+
+evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  dependencies:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-braces@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/expand-braces/-/expand-braces-0.1.2.tgz#488b1d1d2451cb3d3a6b192cfc030f44c5855fea"
+  dependencies:
+    array-slice "^0.2.3"
+    array-unique "^0.2.1"
+    braces "^0.1.2"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+expand-range@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-0.1.1.tgz#4cb8eda0993ca56fa4f41fc42f3cbb4ccadff044"
+  dependencies:
+    is-number "^0.1.1"
+    repeat-string "^0.2.2"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+express@^4.16.2:
+  version "4.16.3"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"
+  dependencies:
+    accepts "~1.3.5"
+    array-flatten "1.1.1"
+    body-parser "1.18.2"
+    content-disposition "0.5.2"
+    content-type "~1.0.4"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.1.1"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.3"
+    qs "6.5.1"
+    range-parser "~1.2.0"
+    safe-buffer "5.1.1"
+    send "0.16.2"
+    serve-static "1.13.2"
+    setprototypeof "1.1.0"
+    statuses "~1.4.0"
+    type-is "~1.6.16"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+fast-deep-equal@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
+faye-websocket@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+faye-websocket@~0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+file-loader@^1.1.11:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.4.5"
+
+file-uri-to-path@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
+  dependencies:
+    glob "^7.0.3"
+    minimatch "^3.0.3"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+finalhandler@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.6.tgz#007aea33d1a4d3e42017f624848ad58d212f814f"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
+finalhandler@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.4.0"
+    unpipe "~1.0.0"
+
+find-cache-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  dependencies:
+    locate-path "^2.0.0"
+
+flush-write-stream@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.4"
+
+follow-redirects@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.0.0.tgz#8e34298cbd2e176f254effec75a1c78cc849fd37"
+  dependencies:
+    debug "^2.2.0"
+
+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, for-in@^1.0.2:
+  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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    for-in "^1.0.1"
+
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  dependencies:
+    for-in "^1.0.1"
+
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+
+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.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.0.0.tgz#6f0aebadcc5da16c13e1ecc11137d85f9b883b25"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.11"
+
+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"
+    mime-types "^2.1.12"
+
+form-data@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "1.0.6"
+    mime-types "^2.1.12"
+
+forwarded@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  dependencies:
+    map-cache "^0.2.2"
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+from2@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
+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@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
+
+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, fsevents@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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"
+
+ftp@~0.3.10:
+  version "0.3.10"
+  resolved "https://registry.yarnpkg.com/ftp/-/ftp-0.3.10.tgz#9197d861ad8142f3e63d5a83bfe4c59f7330885d"
+  dependencies:
+    readable-stream "1.1.x"
+    xregexp "2.0.0"
+
+function-bind@^1.0.2, function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+gaze@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
+  dependencies:
+    globule "^1.0.0"
+
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
+get-uri@2:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/get-uri/-/get-uri-2.0.1.tgz#dbdcacacd8c608a38316869368117697a1631c59"
+  dependencies:
+    data-uri-to-buffer "1"
+    debug "2"
+    extend "3"
+    file-uri-to-path "1"
+    ftp "~0.3.10"
+    readable-stream "2"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
+glob@7.0.x:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^5.0.15:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.0, glob@^7.1.1, glob@^7.1.2, 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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globby@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+globule@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
+  dependencies:
+    glob "~7.1.1"
+    lodash "~4.17.4"
+    minimatch "~3.0.2"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+handle-thing@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
+
+handlebars@^4.0.1, handlebars@^4.0.3:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+  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-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary2@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.2.tgz#e83dba49f0b9be4d026d27365350d9f03f54be98"
+  dependencies:
+    isarray "2.0.1"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has@^1.0.0, has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  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-base@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+he@1.1.x:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+
+hipchat-notifier@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hipchat-notifier/-/hipchat-notifier-1.1.0.tgz#b6d249755437c191082367799d3ba9a0f23b231e"
+  dependencies:
+    lodash "^4.0.0"
+    request "^2.0.0"
+
+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"
+
+hoek@4.x.x:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
+
+homedir-polyfill@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  dependencies:
+    parse-passwd "^1.0.0"
+
+hosted-git-info@^2.1.4:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.6.0.tgz#23235b29ab230c576aab0d4f13fc046b0b038222"
+
+hpack.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  dependencies:
+    inherits "^2.0.1"
+    obuf "^1.0.0"
+    readable-stream "^2.0.1"
+    wbuf "^1.1.0"
+
+html-entities@^1.2.0:
+  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.5.13"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.13.tgz#6bca6d533a7f18a476dc6aeb3d113071ab5c165e"
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "4.1.x"
+    commander "2.15.x"
+    he "1.1.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "3.3.x"
+
+html-webpack-plugin@^3.0.6:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
+  dependencies:
+    html-minifier "^3.2.3"
+    loader-utils "^0.2.16"
+    lodash "^4.17.3"
+    pretty-error "^2.0.2"
+    tapable "^1.0.0"
+    toposort "^1.0.0"
+    util.promisify "1.0.0"
+
+htmlescape@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/htmlescape/-/htmlescape-1.1.1.tgz#3a03edc2214bca3b66424a3e7959349509cb0351"
+
+htmlparser2@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
+  dependencies:
+    domelementtype "1"
+    domhandler "2.1"
+    domutils "1.1"
+    readable-stream "1.0"
+
+http-deceiver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+
+http-errors@1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-errors@~1.6.2:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+http-parser-js@>=0.4.0:
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.11.tgz#5b720849c650903c27e521633d94696ee95f3529"
+
+http-proxy-agent@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-1.0.0.tgz#cc1ce38e453bf984a0f7702d2dd59c73d081284a"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+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:
+  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-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+httpntlm@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/httpntlm/-/httpntlm-1.6.1.tgz#ad01527143a2e8773cfae6a96f58656bb52a34b2"
+  dependencies:
+    httpreq ">=0.4.22"
+    underscore "~1.7.0"
+
+httpreq@>=0.4.22:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/httpreq/-/httpreq-0.4.24.tgz#4335ffd82cd969668a39465c929ac61d6393627f"
+
+https-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+
+https-proxy-agent@1, https-proxy-agent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+iconv-lite@0.4.15:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+
+iconv-lite@0.4.19:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
+ieee754@^1.1.4:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.11.tgz#c16384ffe00f5b7835824e67b6f2bd44a5229455"
+
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+
+ignore@^3.3.5:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
+
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+
+import-local@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
+  dependencies:
+    pkg-dir "^2.0.0"
+    resolve-cwd "^2.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+in-publish@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflection@~1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/inflection/-/inflection-1.10.0.tgz#5bffcb1197ad3e81050f8e17e21668087ee9eb2f"
+
+inflection@~1.3.0:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/inflection/-/inflection-1.3.8.tgz#cbd160da9f75b14c3cc63578d4f396784bf3014e"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+inline-source-map@~0.6.0:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/inline-source-map/-/inline-source-map-0.6.2.tgz#f9393471c18a79d1724f863fa38b586370ade2a5"
+  dependencies:
+    source-map "~0.5.3"
+
+insert-module-globals@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/insert-module-globals/-/insert-module-globals-7.0.1.tgz#c03bf4e01cb086d5b5e5ace8ad0afe7889d638c3"
+  dependencies:
+    JSONStream "^1.0.3"
+    combine-source-map "~0.7.1"
+    concat-stream "~1.5.1"
+    is-buffer "^1.1.0"
+    lexical-scope "^1.2.0"
+    process "~0.11.0"
+    through2 "^2.0.0"
+    xtend "^4.0.0"
+
+internal-ip@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  dependencies:
+    meow "^3.3.0"
+
+invariant@^2.2.2:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  dependencies:
+    loose-envify "^1.0.0"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+ip@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.0.1.tgz#c7e356cdea225ae71b36d70f2e71a92ba4e42590"
+
+ip@^1.1.0, ip@^1.1.2, ip@^1.1.4, ip@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+
+ipaddr.js@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.6.0.tgz#e3fa357b773da619f26e95f049d055c72796f86b"
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.0, is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-callable@^1.1.1, is-callable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+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.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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-extglob@^2.1.0, is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-glob@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-my-ip-valid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
+
+is-my-json-valid@^2.12.4:
+  version "2.17.2"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz#6b2103a288e94ef3de5cf15d29dd85fc4b78d65c"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    is-my-ip-valid "^1.0.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-number@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-0.1.1.tgz#69a7af116963d47206ec9bd9b48a14216f1e3806"
+
+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-number@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+
+is-odd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-2.0.0.tgz#7646624671fd7ea558ccd9a2795182f2958f1b24"
+  dependencies:
+    is-number "^4.0.0"
+
+is-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
+is-regex@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
+
+is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+
+isarray@0.0.1, isarray@~0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+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@^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"
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+istanbul-api@^1.1.14:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.1.tgz#0c60a0515eb11c7d65c6b50bba2c6e999acd8620"
+  dependencies:
+    async "^2.1.4"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-hook "^1.1.0"
+    istanbul-lib-instrument "^1.9.1"
+    istanbul-lib-report "^1.1.2"
+    istanbul-lib-source-maps "^1.2.2"
+    istanbul-reports "^1.1.3"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-instrumenter-loader@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-instrumenter-loader/-/istanbul-instrumenter-loader-3.0.1.tgz#9957bd59252b373fae5c52b7b5188e6fde2a0949"
+  dependencies:
+    convert-source-map "^1.5.0"
+    istanbul-lib-instrument "^1.7.3"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+
+istanbul-lib-coverage@^1.1.1, istanbul-lib-coverage@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.0.tgz#f7d8f2e42b97e37fe796114cb0f9d68b5e3a4341"
+
+istanbul-lib-hook@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.1.0.tgz#8538d970372cb3716d53e55523dd54b557a8d89b"
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.7.3:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.1.tgz#724b4b6caceba8692d3f1f9d0727e279c401af7b"
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.2.0"
+    semver "^5.3.0"
+
+istanbul-lib-instrument@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz#250b30b3531e5d3251299fdd64b0b2c9db6b558e"
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.1.1"
+    semver "^5.3.0"
+
+istanbul-lib-report@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.2.tgz#922be27c13b9511b979bd1587359f69798c1d425"
+  dependencies:
+    istanbul-lib-coverage "^1.1.1"
+    mkdirp "^0.5.1"
+    path-parse "^1.0.5"
+    supports-color "^3.1.2"
+
+istanbul-lib-source-maps@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz#750578602435f28a0c04ee6d7d9e0f2960e62c1c"
+  dependencies:
+    debug "^3.1.0"
+    istanbul-lib-coverage "^1.1.1"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.1"
+    source-map "^0.5.3"
+
+istanbul-reports@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.3.tgz#3b9e1e8defb6d18b1d425da8e8b32c5a163f2d10"
+  dependencies:
+    handlebars "^4.0.3"
+
+istanbul@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/istanbul/-/istanbul-0.4.5.tgz#65c7d73d4c4da84d4f3ac310b918fb0b8033733b"
+  dependencies:
+    abbrev "1.0.x"
+    async "1.x"
+    escodegen "1.8.x"
+    esprima "2.7.x"
+    glob "^5.0.15"
+    handlebars "^4.0.1"
+    js-yaml "3.x"
+    mkdirp "0.5.x"
+    nopt "3.x"
+    once "1.x"
+    resolve "1.1.x"
+    supports-color "^3.1.0"
+    which "^1.1.1"
+    wordwrap "^1.0.0"
+
+jasmine-core@~2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
+
+jasmine-core@~2.9.0:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.9.1.tgz#b6bbc1d8e65250d56f5888461705ebeeeb88f22f"
+
+jasmine-spec-reporter@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/jasmine-spec-reporter/-/jasmine-spec-reporter-4.2.1.tgz#1d632aec0341670ad324f92ba84b4b32b35e9e22"
+  dependencies:
+    colors "1.1.2"
+
+jasmine@^2.5.3:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.9.0.tgz#76571f925c8783409e7c6153572e5a6341cf93eb"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.9.0"
+
+jasminewd2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
+
+js-base64@^2.1.8:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
+
+js-tokens@^3.0.0, js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+js-yaml@3.x, js-yaml@^3.4.3:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^3.7.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+json-stable-stringify@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz#611c23e814db375527df851193db59dd2af27f45"
+  dependencies:
+    jsonify "~0.0.0"
+
+json-stringify-safe@5.0.x, 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"
+
+json3@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
+
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  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"
+
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+
+jsonpointer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+karma-chrome-launcher@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz#cf1b9d07136cc18fe239327d24654c3dbc368acf"
+  dependencies:
+    fs-access "^1.0.0"
+    which "^1.2.1"
+
+karma-coverage-istanbul-reporter@^1.2.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.4.1.tgz#2b42d145ddbb4868d85d52888c495a21c61d873c"
+  dependencies:
+    istanbul-api "^1.1.14"
+    minimatch "^3.0.4"
+
+karma-jasmine-html-reporter@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-0.2.2.tgz#48a8e5ef18807617ee2b5e33c1194c35b439524c"
+  dependencies:
+    karma-jasmine "^1.0.2"
+
+karma-jasmine@^1.0.2, karma-jasmine@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/karma-jasmine/-/karma-jasmine-1.1.1.tgz#6fe840e75a11600c9d91e84b33c458e1c46a3529"
+
+karma-source-map-support@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/karma-source-map-support/-/karma-source-map-support-1.2.0.tgz#1bf81e7bb4b089627ab352ec4179e117c406a540"
+  dependencies:
+    source-map-support "^0.4.1"
+
+karma@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-2.0.0.tgz#a02698dd7f0f05ff5eb66ab8f65582490b512e58"
+  dependencies:
+    bluebird "^3.3.0"
+    body-parser "^1.16.1"
+    browserify "^14.5.0"
+    chokidar "^1.4.1"
+    colors "^1.1.0"
+    combine-lists "^1.0.0"
+    connect "^3.6.0"
+    core-js "^2.2.0"
+    di "^0.0.1"
+    dom-serialize "^2.2.0"
+    expand-braces "^0.1.1"
+    glob "^7.1.1"
+    graceful-fs "^4.1.2"
+    http-proxy "^1.13.0"
+    isbinaryfile "^3.0.0"
+    lodash "^4.17.4"
+    log4js "^2.3.9"
+    mime "^1.3.4"
+    minimatch "^3.0.2"
+    optimist "^0.6.1"
+    qjobs "^1.1.4"
+    range-parser "^1.2.0"
+    rimraf "^2.6.0"
+    safe-buffer "^5.0.1"
+    socket.io "2.0.4"
+    source-map "^0.6.1"
+    tmp "0.0.33"
+    useragent "^2.1.12"
+
+killable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    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"
+
+kind-of@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+
+labeled-stream-splicer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/labeled-stream-splicer/-/labeled-stream-splicer-2.0.0.tgz#a52e1d138024c00b86b1c0c91f677918b8ae0a59"
+  dependencies:
+    inherits "^2.0.1"
+    isarray "~0.0.1"
+    stream-splicer "^2.0.0"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+less-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.1.0.tgz#2c1352c5b09a4f84101490274fd51674de41363e"
+  dependencies:
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^3.0.0"
+
+less@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/less/-/less-3.0.1.tgz#ba2fea24a5632ccb8c84230d6043c0bf91855e37"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    mime "^1.4.1"
+    mkdirp "^0.5.0"
+    promise "^7.1.1"
+    request "2.81.0"
+    source-map "^0.5.3"
+
+levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+lexical-scope@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/lexical-scope/-/lexical-scope-1.2.0.tgz#fcea5edc704a4b3a8796cdca419c3a0afaf22df4"
+  dependencies:
+    astw "^2.0.0"
+
+libbase64@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/libbase64/-/libbase64-0.1.0.tgz#62351a839563ac5ff5bd26f12f60e9830bb751e6"
+
+libmime@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/libmime/-/libmime-3.0.0.tgz#51a1a9e7448ecbd32cda54421675bb21bc093da6"
+  dependencies:
+    iconv-lite "0.4.15"
+    libbase64 "0.1.0"
+    libqp "1.1.0"
+
+libqp@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/libqp/-/libqp-1.1.0.tgz#f5e6e06ad74b794fb5b5b66988bf728ef1dedbe8"
+
+license-webpack-plugin@^1.2.3:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-1.3.1.tgz#688b76472188ef597918b7cae3eec7dc2fa5a0e8"
+  dependencies:
+    ejs "^2.5.7"
+
+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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+load-json-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
+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.16:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+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"
+    json5 "^0.5.0"
+
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
+lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+
+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"
+
+lodash.memoize@~3.0.3:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
+
+lodash.mergewith@^4.6.0:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
+
+lodash.tail@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
+
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.4:
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+
+lodash@^4.15.0, lodash@^4.5.0:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+log-symbols@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  dependencies:
+    chalk "^2.0.1"
+
+log4js@^2.3.9:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/log4js/-/log4js-2.5.2.tgz#234e9c688bc4aab3999bd4b149c85851a4e62faa"
+  dependencies:
+    circular-json "^0.5.1"
+    date-format "^1.2.0"
+    debug "^3.1.0"
+    semver "^5.3.0"
+    streamroller "^0.7.0"
+  optionalDependencies:
+    amqplib "^0.5.2"
+    axios "^0.15.3"
+    hipchat-notifier "^1.1.0"
+    loggly "^1.1.0"
+    mailgun-js "^0.7.0"
+    nodemailer "^2.5.0"
+    redis "^2.7.1"
+    slack-node "~0.2.0"
+
+loggly@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/loggly/-/loggly-1.1.1.tgz#0a0fc1d3fa3a5ec44fdc7b897beba2a4695cebee"
+  dependencies:
+    json-stringify-safe "5.0.x"
+    request "2.75.x"
+    timespan "2.3.x"
+
+loglevel@^1.4.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
+
+loglevelnext@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-1.0.3.tgz#0f69277e73bbbf2cd61b94d82313216bf87ac66e"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loose-envify@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+loud-rejection@^1.0.0, loud-rejection@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.0.0"
+
+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.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, lru-cache@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.2.tgz#45234b2e6e2f2b33da125624c4664929a0224c3f"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+lru-cache@~2.6.5:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.6.5.tgz#e56d6354148ede8d7707b58d143220fd08df0fd5"
+
+mailcomposer@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/mailcomposer/-/mailcomposer-4.0.1.tgz#0e1c44b2a07cf740ee17dc149ba009f19cadfeb4"
+  dependencies:
+    buildmail "4.0.1"
+    libmime "3.0.0"
+
+mailgun-js@^0.7.0:
+  version "0.7.15"
+  resolved "https://registry.yarnpkg.com/mailgun-js/-/mailgun-js-0.7.15.tgz#ee366a20dac64c3c15c03d6c1b3e0ed795252abb"
+  dependencies:
+    async "~2.1.2"
+    debug "~2.2.0"
+    form-data "~2.1.1"
+    inflection "~1.10.0"
+    is-stream "^1.1.0"
+    path-proxy "~1.0.0"
+    proxy-agent "~2.0.0"
+    q "~1.4.0"
+    tsscmp "~1.0.0"
+
+make-dir@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.2.0.tgz#6d6a49eead4aae296c53bbf3a1a008bd6c89469b"
+  dependencies:
+    pify "^3.0.0"
+
+make-error@^1.1.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.2.tgz#8762ffad2444dd8ff1f7c819629fa28e24fea1c4"
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+
+map-obj@^1.0.0, map-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  dependencies:
+    object-visit "^1.0.0"
+
+md5.js@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.0"
+
+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:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+meow@^3.3.0, meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  dependencies:
+    camelcase-keys "^2.0.0"
+    decamelize "^1.1.2"
+    loud-rejection "^1.0.0"
+    map-obj "^1.0.1"
+    minimist "^1.1.3"
+    normalize-package-data "^2.3.4"
+    object-assign "^4.0.1"
+    read-pkg-up "^1.0.1"
+    redent "^1.0.0"
+    trim-newlines "^1.0.0"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5, micromatch@^2.3.11:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+micromatch@^3.1.4, micromatch@^3.1.8:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+miller-rabin@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+"mime-db@>= 1.33.0 < 2", mime-db@~1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.11, mime-types@~2.1.11:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.7:
+  version "2.1.18"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
+  dependencies:
+    mime-db "~1.33.0"
+
+mime@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+
+mime@^1.3.4, mime@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+
+mime@^2.0.3, mime@^2.1.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.2.2.tgz#6b4c109d88031d7b5c23635f5b923da336d79121"
+
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+
+mini-css-extract-plugin@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.3.0.tgz#f8dc03abb3a8663f1a431143e232fb47fb4d9318"
+  dependencies:
+    loader-utils "^1.1.0"
+    webpack-sources "^1.1.0"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+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"
+
+"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"
+
+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"
+
+mississippi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^2.0.1"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
+mixin-deep@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
+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.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+module-deps@^4.0.8:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-4.1.1.tgz#23215833f1da13fd606ccb8087b44852dcb821fd"
+  dependencies:
+    JSONStream "^1.0.3"
+    browser-resolve "^1.7.0"
+    cached-path-relative "^1.0.0"
+    concat-stream "~1.5.0"
+    defined "^1.0.0"
+    detective "^4.0.0"
+    duplexer2 "^0.1.2"
+    inherits "^2.0.1"
+    parents "^1.0.0"
+    readable-stream "^2.0.2"
+    resolve "^1.1.3"
+    stream-combiner2 "^1.1.1"
+    subarg "^1.0.0"
+    through2 "^2.0.0"
+    xtend "^4.0.0"
+
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+multicast-dns-service-types@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+
+multicast-dns@^6.0.1:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
+  dependencies:
+    dns-packet "^1.3.1"
+    thunky "^1.0.2"
+
+nan@^2.10.0, nan@^2.3.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+
+nanomatch@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.9.tgz#879f7150cb2dab7a471259066c104eee6e0fa7c2"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-odd "^2.0.0"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+neo-async@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.0.tgz#76b1c823130cca26acfbaccc8fbaf0a2fa33b18f"
+
+netmask@~1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
+
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  dependencies:
+    lower-case "^1.1.1"
+
+node-forge@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.1.tgz#9da611ea08982f4b94206b3beb4cc9665f20c300"
+
+node-gyp@^3.3.1:
+  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"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3 || 4"
+    osenv "0"
+    request "2"
+    rimraf "2"
+    semver "~5.3.0"
+    tar "^2.0.0"
+    which "1"
+
+node-libs-browser@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.1.0.tgz#5f94263d404f6e44767d726901fff05478d600df"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.2.0"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "^1.0.0"
+    os-browserify "^0.3.0"
+    path-browserify "0.0.0"
+    process "^0.11.10"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.3.3"
+    stream-browserify "^2.0.1"
+    stream-http "^2.7.2"
+    string_decoder "^1.0.0"
+    timers-browserify "^2.0.4"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-modules-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/node-modules-path/-/node-modules-path-1.0.1.tgz#40096b08ce7ad0ea14680863af449c7c75a5d1c8"
+
+node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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.7.2:
+  version "4.8.3"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.8.3.tgz#d077cc20a08ac06f661ca44fb6f19cd2ed41debb"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    lodash.mergewith "^4.6.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.10.0"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "~2.79.0"
+    sass-graph "^2.2.4"
+    stdout-stream "^1.4.0"
+    "true-case-path" "^1.0.2"
+
+node-uuid@~1.4.7:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.8.tgz#b040eb0923968afabf8d32fb1f17f1167fdab907"
+
+nodemailer-direct-transport@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/nodemailer-direct-transport/-/nodemailer-direct-transport-3.3.2.tgz#e96fafb90358560947e569017d97e60738a50a86"
+  dependencies:
+    nodemailer-shared "1.1.0"
+    smtp-connection "2.12.0"
+
+nodemailer-fetch@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/nodemailer-fetch/-/nodemailer-fetch-1.6.0.tgz#79c4908a1c0f5f375b73fe888da9828f6dc963a4"
+
+nodemailer-shared@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/nodemailer-shared/-/nodemailer-shared-1.1.0.tgz#cf5994e2fd268d00f5cf0fa767a08169edb07ec0"
+  dependencies:
+    nodemailer-fetch "1.6.0"
+
+nodemailer-smtp-pool@2.8.2:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/nodemailer-smtp-pool/-/nodemailer-smtp-pool-2.8.2.tgz#2eb94d6cf85780b1b4725ce853b9cbd5e8da8c72"
+  dependencies:
+    nodemailer-shared "1.1.0"
+    nodemailer-wellknown "0.1.10"
+    smtp-connection "2.12.0"
+
+nodemailer-smtp-transport@2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/nodemailer-smtp-transport/-/nodemailer-smtp-transport-2.7.2.tgz#03d71c76314f14ac7dbc7bf033a6a6d16d67fb77"
+  dependencies:
+    nodemailer-shared "1.1.0"
+    nodemailer-wellknown "0.1.10"
+    smtp-connection "2.12.0"
+
+nodemailer-wellknown@0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/nodemailer-wellknown/-/nodemailer-wellknown-0.1.10.tgz#586db8101db30cb4438eb546737a41aad0cf13d5"
+
+nodemailer@^2.5.0:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-2.7.2.tgz#f242e649aeeae39b6c7ed740ef7b061c404d30f9"
+  dependencies:
+    libmime "3.0.0"
+    mailcomposer "4.0.1"
+    nodemailer-direct-transport "3.3.2"
+    nodemailer-shared "1.1.0"
+    nodemailer-smtp-pool "2.8.2"
+    nodemailer-smtp-transport "2.7.2"
+    socks "1.1.9"
+
+"nopt@2 || 3", nopt@3.x:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
+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"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  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.0, normalize-path@^2.0.1, normalize-path@^2.1.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"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+nth-check@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+  dependencies:
+    boolbase "~1.0.0"
+
+null-check@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/null-check/-/null-check-1.0.0.tgz#977dffd7176012b9ec30d2a39db5cf72a0439edd"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+
+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"
+
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-keys@^1.0.8:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  dependencies:
+    isobject "^3.0.0"
+
+object.getownpropertydescriptors@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.1"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  dependencies:
+    isobject "^3.0.1"
+
+obuf@^1.0.0, obuf@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+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.x, once@^1.3.0, once@^1.3.1, 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"
+
+opn@^5.1.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.3.0.tgz#64871565c863875f052cfdf53d3e3cb5adb53b1c"
+  dependencies:
+    is-wsl "^1.1.0"
+
+opn@~5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
+  dependencies:
+    is-wsl "^1.1.0"
+
+optimist@^0.6.1, optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+optionator@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+original@>=0.0.5:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
+  dependencies:
+    url-parse "1.0.x"
+
+os-browserify@^0.3.0, os-browserify@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+
+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"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-locale@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  dependencies:
+    execa "^0.7.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@0, osenv@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
+p-limit@^1.0.0, p-limit@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
+  dependencies:
+    p-try "^1.0.0"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  dependencies:
+    p-limit "^1.1.0"
+
+p-map@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+
+pac-proxy-agent@1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pac-proxy-agent/-/pac-proxy-agent-1.1.0.tgz#34a385dfdf61d2f0ecace08858c745d3e791fd4d"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+    get-uri "2"
+    http-proxy-agent "1"
+    https-proxy-agent "1"
+    pac-resolver "~2.0.0"
+    raw-body "2"
+    socks-proxy-agent "2"
+
+pac-resolver@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pac-resolver/-/pac-resolver-2.0.0.tgz#99b88d2f193fbdeefc1c9a529c1f3260ab5277cd"
+  dependencies:
+    co "~3.0.6"
+    degenerator "~1.0.2"
+    ip "1.0.1"
+    netmask "~1.0.4"
+    thunkify "~2.1.1"
+
+pako@~1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
+
+parallel-transform@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  dependencies:
+    cyclist "~0.2.2"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
+param-case@2.1.x:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  dependencies:
+    no-case "^2.2.0"
+
+parents@^1.0.0, parents@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parents/-/parents-1.0.1.tgz#fedd4d2bf193a77745fe71e371d73c3307d9c751"
+  dependencies:
+    path-platform "~0.11.15"
+
+parse-asn1@^5.0.0:
+  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"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.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"
+
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+
+parse5@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
+
+parseqs@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+
+path-browserify@0.0.0, path-browserify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+path-platform@~0.11.15:
+  version "0.11.15"
+  resolved "https://registry.yarnpkg.com/path-platform/-/path-platform-0.11.15.tgz#e864217f74c36850f0852b78dc7bf7d4a5721bf2"
+
+path-proxy@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/path-proxy/-/path-proxy-1.0.0.tgz#18e8a36859fc9d2f1a53b48dee138543c020de5e"
+  dependencies:
+    inflection "~1.3.0"
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  dependencies:
+    pify "^2.0.0"
+
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  dependencies:
+    pify "^3.0.0"
+
+pbkdf2@^3.0.3:
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  dependencies:
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0, pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  dependencies:
+    find-up "^2.1.0"
+
+portfinder@^1.0.13, portfinder@^1.0.9:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+
+postcss-import@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.1.0.tgz#55c9362c9192994ec68865d224419df1db2981f0"
+  dependencies:
+    postcss "^6.0.1"
+    postcss-value-parser "^3.2.3"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+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:
+    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@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.3.tgz#eb210da734e475a244f76ccd61f9860f5bb3ee09"
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^6.0.0"
+    postcss-load-config "^1.2.0"
+    schema-utils "^0.4.0"
+
+postcss-url@^7.3.1:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-7.3.2.tgz#5fea273807fb84b38c461c3c9a9e8abd235f7120"
+  dependencies:
+    mime "^1.4.1"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.0"
+    postcss "^6.0.1"
+    xxhashjs "^0.2.1"
+
+postcss-value-parser@^3.2.3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.19, postcss@^6.0.20:
+  version "6.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.21.tgz#8265662694eddf9e9a5960db6da33c39e4cd069d"
+  dependencies:
+    chalk "^2.3.2"
+    source-map "^0.6.1"
+    supports-color "^5.3.0"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+pretty-error@^2.0.2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
+  dependencies:
+    renderkid "^2.0.1"
+    utila "~0.4"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+
+process@^0.11.10, process@~0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  dependencies:
+    asap "~2.0.3"
+
+"protractor@file:../../node_modules/protractor":
+  version "5.1.2"
+  dependencies:
+    "@types/node" "^6.0.46"
+    "@types/q" "^0.0.32"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "0.0.5"
+    chalk "^1.1.3"
+    glob "^7.0.3"
+    jasmine "^2.5.3"
+    jasminewd2 "^2.1.0"
+    optimist "~0.6.0"
+    q "1.4.1"
+    saucelabs "~1.3.0"
+    selenium-webdriver "3.0.1"
+    source-map-support "~0.4.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
+
+proxy-addr@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.3.tgz#355f262505a621646b3130a728eb647e22055341"
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.6.0"
+
+proxy-agent@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/proxy-agent/-/proxy-agent-2.0.0.tgz#57eb5347aa805d74ec681cb25649dba39c933499"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+    http-proxy-agent "1"
+    https-proxy-agent "1"
+    lru-cache "~2.6.5"
+    pac-proxy-agent "1"
+    socks-proxy-agent "2"
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
+
+pump@^2.0.0, pump@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.4.0.tgz#80b7c5df7e24153d03f0e7ac8a05a5d068bd07fb"
+  dependencies:
+    duplexify "^3.5.3"
+    inherits "^2.0.3"
+    pump "^2.0.0"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@1.4.1, punycode@^1.2.4, punycode@^1.3.2, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+punycode@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
+
+q@1.4.1, q@~1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+q@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qjobs@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
+
+qs@6.5.1, qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+qs@~6.2.0:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.3.tgz#1cfcb25c10a9b2b483053ff39f5dfc9233908cfe"
+
+qs@~6.3.0:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+querystring-es3@^0.2.0, querystring-es3@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+
+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.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"
+  dependencies:
+    safe-buffer "^5.1.0"
+
+randomfill@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  dependencies:
+    randombytes "^2.0.5"
+    safe-buffer "^5.1.0"
+
+range-parser@^1.0.3, range-parser@^1.2.0, range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+raw-body@2, raw-body@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89"
+  dependencies:
+    bytes "3.0.0"
+    http-errors "1.6.2"
+    iconv-lite "0.4.19"
+    unpipe "1.0.0"
+
+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.1.7:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.6.tgz#eb18989c6d4f4f162c399f79ddd29f3835568092"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  dependencies:
+    pify "^2.3.0"
+
+read-only-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-only-stream/-/read-only-stream-2.0.0.tgz#2724fd6a8113d73764ac288d4386270c1dbf17f0"
+  dependencies:
+    readable-stream "^2.0.2"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readable-stream@1.0:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@1.1.x, "readable-stream@1.x >=1.1.9":
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@2, readable-stream@^2.3.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@~2.0.0, readable-stream@~2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+redis-commands@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/redis-commands/-/redis-commands-1.3.1.tgz#81d826f45fa9c8b2011f4cd7a0fe597d241d442b"
+
+redis-parser@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/redis-parser/-/redis-parser-2.6.0.tgz#52ed09dacac108f1a631c07e9b69941e7a19504b"
+
+redis@^2.7.1:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/redis/-/redis-2.8.0.tgz#202288e3f58c49f6079d97af7a10e1303ae14b02"
+  dependencies:
+    double-ended-queue "^2.1.0-0"
+    redis-commands "^1.2.0"
+    redis-parser "^2.6.0"
+
+reflect-metadata@^0.1.2:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.12.tgz#311bf0c6b63cd782f228a81abe146a2bfa9c56f2"
+
+regenerate@^1.2.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  dependencies:
+    jsesc "~0.5.0"
+
+relateurl@0.2.x:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+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"
+    htmlparser2 "~3.3.0"
+    strip-ansi "^3.0.0"
+    utila "~0.3"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-0.2.2.tgz#c7a8d3236068362059a7e4651fc6884e8b1fb4ae"
+
+repeat-string@^1.5.2, repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+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, request@^2.83.0:
+  version "2.85.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.85.0.tgz#5a03615a47c61420b3eb99b7dba204f83603e1fa"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
+request@2.75.x:
+  version "2.75.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.75.0.tgz#d2b8268a286da13eaa5d01adf5d18cc90f657d93"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    bl "~1.1.2"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.0.0"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    node-uuid "~1.4.7"
+    oauth-sign "~0.8.1"
+    qs "~6.2.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+
+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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+request@^2.0.0, request@^2.74.0, request@^2.78.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
+request@~2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.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"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+    uuid "^3.0.0"
+
+requestretry@^1.2.2:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/requestretry/-/requestretry-1.13.0.tgz#213ec1006eeb750e8b8ce54176283d15a8d55d94"
+  dependencies:
+    extend "^3.0.0"
+    lodash "^4.15.0"
+    request "^2.74.0"
+    when "^3.7.7"
+
+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"
+
+requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve-cwd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  dependencies:
+    resolve-from "^3.0.0"
+
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+
+resolve@1.1.7, resolve@1.1.x:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@^1.1.3, resolve@^1.1.4, resolve@^1.3.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+  dependencies:
+    path-parse "^1.0.5"
+
+resolve@^1.1.7, resolve@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.6.0.tgz#0fbd21278b27b4004481c395349e7aba60a9ff5c"
+  dependencies:
+    path-parse "^1.0.5"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+
+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.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1, rimraf@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+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"
+
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  dependencies:
+    aproba "^1.1.1"
+
+rxjs@^6.0.0-beta.3, rxjs@^6.0.0-turbo-rc.4, "rxjs@file:../../node_modules/rxjs":
+  version "6.0.0"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  dependencies:
+    ret "~0.1.10"
+
+sass-graph@^2.2.4:
+  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"
+    scss-tokenizer "^0.2.3"
+    yargs "^7.0.0"
+
+sass-loader@^6.0.7:
+  version "6.0.7"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.7.tgz#dd2fdb3e7eeff4a53f35ba6ac408715488353d00"
+  dependencies:
+    clone-deep "^2.0.1"
+    loader-utils "^1.0.1"
+    lodash.tail "^4.1.1"
+    neo-async "^2.5.0"
+    pify "^3.0.0"
+
+saucelabs@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.3.0.tgz#d240e8009df7fa87306ec4578a69ba3b5c424fee"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+
+sax@0.5.x:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
+
+sax@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
+
+sax@>=0.6.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+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"
+
+schema-utils@^0.4.0, schema-utils@^0.4.2, schema-utils@^0.4.3, schema-utils@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
+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@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:
+    adm-zip "0.4.4"
+    rimraf "^2.2.8"
+    tmp "0.0.24"
+    ws "^1.0.1"
+    xml2js "0.4.4"
+
+selfsigned@^1.9.1:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.2.tgz#b4449580d99929b65b10a48389301a6592088758"
+  dependencies:
+    node-forge "0.7.1"
+
+semver-dsl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/semver-dsl/-/semver-dsl-1.0.1.tgz#d3678de5555e8a61f629eed025366ae5f27340a0"
+  dependencies:
+    semver "^5.3.0"
+
+semver-intersect@^1.1.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/semver-intersect/-/semver-intersect-1.3.1.tgz#8fa84a9e1028bd239e4530d1a3e181e698d884ba"
+  dependencies:
+    semver "^5.0.0"
+
+"semver@2 || 3 || 4 || 5", semver@^5.0.0, semver@^5.1.0, semver@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
+semver@~5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
+
+semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+send@0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.4.1"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.4.0"
+
+serialize-javascript@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.4.0.tgz#7c958514db6ac2443a8abc062dc9f7886a7f6005"
+
+serve-index@^1.7.2:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  dependencies:
+    accepts "~1.3.4"
+    batch "0.6.1"
+    debug "2.6.9"
+    escape-html "~1.0.3"
+    http-errors "~1.6.2"
+    mime-types "~2.1.17"
+    parseurl "~1.3.2"
+
+serve-static@1.13.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.2"
+    send "0.16.2"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+set-value@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.1"
+    to-object-path "^0.3.0"
+
+set-value@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+setprototypeof@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
+
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.11"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+sha.js@~2.4.4:
+  version "2.4.10"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.10.tgz#b1fde5cd7d11a5626638a07c604ab909cfa31f9b"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+shallow-clone@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-1.0.0.tgz#4480cd06e882ef68b2ad88a3ea54832e2c48b571"
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^5.0.0"
+    mixin-object "^2.0.1"
+
+shasum@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/shasum/-/shasum-1.0.2.tgz#e7012310d8f417f4deb5712150e5678b87ae565f"
+  dependencies:
+    json-stable-stringify "~0.0.0"
+    sha.js "~2.4.4"
+
+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"
+
+shell-quote@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  dependencies:
+    array-filter "~0.0.0"
+    array-map "~0.0.0"
+    array-reduce "~0.0.0"
+    jsonify "~0.0.0"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+silent-error@^1.0.0, silent-error@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/silent-error/-/silent-error-1.1.0.tgz#2209706f1c850a9f1d10d0d840918b46f26e1bc9"
+  dependencies:
+    debug "^2.2.0"
+
+slack-node@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/slack-node/-/slack-node-0.2.0.tgz#de4b8dddaa8b793f61dbd2938104fdabf37dfa30"
+  dependencies:
+    requestretry "^1.2.2"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+smart-buffer@^1.0.13, smart-buffer@^1.0.4:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-1.1.15.tgz#7f114b5b65fab3e2a35aa775bb12f0d1c649bf16"
+
+smtp-connection@2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/smtp-connection/-/smtp-connection-2.12.0.tgz#d76ef9127cb23c2259edb1e8349c2e8d5e2d74c1"
+  dependencies:
+    httpntlm "1.6.1"
+    nodemailer-shared "1.1.0"
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
+socket.io-adapter@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
+
+socket.io-client@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.0.4.tgz#0918a552406dc5e540b380dcd97afc4a64332f8e"
+  dependencies:
+    backo2 "1.0.2"
+    base64-arraybuffer "0.1.5"
+    component-bind "1.0.0"
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    engine.io-client "~3.1.0"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    socket.io-parser "~3.1.1"
+    to-array "0.1.4"
+
+socket.io-parser@~3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.1.2.tgz#dbc2282151fc4faebbe40aeedc0772eba619f7f2"
+  dependencies:
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    has-binary2 "~1.0.2"
+    isarray "2.0.1"
+
+socket.io@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.0.4.tgz#c1a4590ceff87ecf13c72652f046f716b29e6014"
+  dependencies:
+    debug "~2.6.6"
+    engine.io "~3.1.0"
+    socket.io-adapter "~1.1.0"
+    socket.io-client "2.0.4"
+    socket.io-parser "~3.1.1"
+
+sockjs-client@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
+  dependencies:
+    debug "^2.6.6"
+    eventsource "0.1.6"
+    faye-websocket "~0.11.0"
+    inherits "^2.0.1"
+    json3 "^3.3.2"
+    url-parse "^1.1.8"
+
+sockjs@0.3.19:
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+  dependencies:
+    faye-websocket "^0.10.0"
+    uuid "^3.0.1"
+
+socks-proxy-agent@2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-2.1.1.tgz#86ebb07193258637870e13b7bd99f26c663df3d3"
+  dependencies:
+    agent-base "2"
+    extend "3"
+    socks "~1.1.5"
+
+socks@1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-1.1.9.tgz#628d7e4d04912435445ac0b6e459376cb3e6d691"
+  dependencies:
+    ip "^1.1.2"
+    smart-buffer "^1.0.4"
+
+socks@~1.1.5:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-1.1.10.tgz#5b8b7fc7c8f341c53ed056e929b7bf4de8ba7b5a"
+  dependencies:
+    ip "^1.1.4"
+    smart-buffer "^1.0.13"
+
+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-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-resolve@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.1.tgz#7ad0f593f2281598e854df80f19aae4b92d7a11a"
+  dependencies:
+    atob "^2.0.0"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@^0.4.1, source-map-support@~0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map-support@^0.5.0:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.4.tgz#54456efa89caa9270af7cd624cc2f123e51fbae8"
+  dependencies:
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+
+source-map@0.1.x:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+source-map@^0.4.2, source-map@^0.4.4, source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+source-map@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
+  dependencies:
+    amdefine ">=0.0.4"
+
+spdx-correct@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.0.tgz#05a5b4d7153a195bc92c3c425b69f3b2a9524c82"
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz#2c7ae61056c714a5b9b9b2b2af7d311ef5c78fe9"
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz#7a7cd28470cc6d3a1cfe6d66886f6bc430d3ac87"
+
+spdy-transport@^2.0.18:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.1.0.tgz#4bbb15aaffed0beefdd56ad61dbdc8ba3e2cb7a1"
+  dependencies:
+    debug "^2.6.8"
+    detect-node "^2.0.3"
+    hpack.js "^2.1.6"
+    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.7"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
+  dependencies:
+    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.18"
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  dependencies:
+    extend-shallow "^3.0.0"
+
+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.14.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.1.tgz#130f5975eddad963f1d56f92b9ac6c51fa9f83eb"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+ssri@^5.2.4:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.3.0.tgz#ba3872c9c6d33a0704a7d71ff045e5ec48999d06"
+  dependencies:
+    safe-buffer "^5.1.1"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+stats-webpack-plugin@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/stats-webpack-plugin/-/stats-webpack-plugin-0.6.2.tgz#2c5949b531e07f87a88e6ea4dcfac53aa8c75a2b"
+  dependencies:
+    lodash "^4.17.4"
+
+"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+
+statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+statuses@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+stdout-stream@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"
+  dependencies:
+    readable-stream "^2.0.1"
+
+stream-browserify@^2.0.0, stream-browserify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-combiner2@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stream-combiner2/-/stream-combiner2-1.1.1.tgz#fb4d8a1420ea362764e21ad4780397bebcb41cbe"
+  dependencies:
+    duplexer2 "~0.1.0"
+    readable-stream "^2.0.2"
+
+stream-each@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.2.tgz#8e8c463f91da8991778765873fe4d960d8f616bd"
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
+stream-http@^2.0.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.0.tgz#fd86546dac9b1c91aff8fc5d287b98fafb41bc10"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.3.3"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-http@^2.7.2:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.1.tgz#d0441be1a457a73a733a8a7b53570bebd9ef66a4"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.3.3"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-shift@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+
+stream-splicer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/stream-splicer/-/stream-splicer-2.0.0.tgz#1b63be438a133e4b671cc1935197600175910d83"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.2"
+
+streamroller@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/streamroller/-/streamroller-0.7.0.tgz#a1d1b7cf83d39afb0d63049a5acbf93493bdf64b"
+  dependencies:
+    date-format "^1.2.0"
+    debug "^3.1.0"
+    mkdirp "^0.5.1"
+    readable-stream "^2.3.0"
+
+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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string-width@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+string_decoder@^1.0.0, string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  dependencies:
+    safe-buffer "~5.1.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, string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4, stringstream@~0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.0.0"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  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-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.0.1"
+
+strip-json-comments@^2.0.0, 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"
+
+style-loader@^0.20.2:
+  version "0.20.3"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.20.3.tgz#ebef06b89dec491bcb1fdb3452e913a6fd1c10c4"
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^0.4.5"
+
+stylus-loader@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.2.tgz#27a706420b05a38e038e7cacb153578d450513c6"
+  dependencies:
+    loader-utils "^1.0.2"
+    lodash.clonedeep "^4.5.0"
+    when "~3.6.x"
+
+stylus@^0.54.5:
+  version "0.54.5"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
+  dependencies:
+    css-parse "1.7.x"
+    debug "*"
+    glob "7.0.x"
+    mkdirp "0.5.x"
+    sax "0.5.x"
+    source-map "0.1.x"
+
+subarg@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
+  dependencies:
+    minimist "^1.1.0"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+supports-color@^3.1.0, supports-color@^3.1.2:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+  dependencies:
+    has-flag "^2.0.0"
+
+supports-color@^5.1.0, supports-color@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
+  dependencies:
+    has-flag "^3.0.0"
+
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+
+syntax-error@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/syntax-error/-/syntax-error-1.3.0.tgz#1ed9266c4d40be75dc55bf9bb1cb77062bb96ca1"
+  dependencies:
+    acorn "^4.0.3"
+
+tapable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.0.0.tgz#cbb639d9002eed9c6b5975eb20598d7936f1f9f2"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  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"
+
+tar@^2.0.0, tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+through2@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  dependencies:
+    readable-stream "^2.1.5"
+    xtend "~4.0.1"
+
+"through@>=2.2.7 <3", through@X.X.X:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+thunkify@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/thunkify/-/thunkify-2.1.2.tgz#faa0e9d230c51acc95ca13a361ac05ca7e04553d"
+
+thunky@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.2.tgz#a862e018e3fb1ea2ec3fce5d55605cf57f247371"
+
+timers-browserify@^1.0.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  dependencies:
+    process "~0.11.0"
+
+timers-browserify@^2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.6.tgz#241e76927d9ca05f4d959819022f5b3664b64bae"
+  dependencies:
+    setimmediate "^1.0.4"
+
+timespan@2.3.x:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/timespan/-/timespan-2.3.0.tgz#4902ce040bd13d845c8f59b27e9d59bad6f39929"
+
+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.33, tmp@0.0.x:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  dependencies:
+    os-tmpdir "~1.0.2"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+toposort@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"
+
+tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
+  dependencies:
+    punycode "^1.4.1"
+
+tree-kill@^1.0.0, tree-kill@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+"true-case-path@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
+  dependencies:
+    glob "^6.0.4"
+
+ts-node@~4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-4.1.0.tgz#36d9529c7b90bb993306c408cd07f7743de20712"
+  dependencies:
+    arrify "^1.0.0"
+    chalk "^2.3.0"
+    diff "^3.1.0"
+    make-error "^1.1.1"
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map-support "^0.5.0"
+    tsconfig "^7.0.0"
+    v8flags "^3.0.0"
+    yn "^2.0.0"
+
+tsconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/tsconfig/-/tsconfig-7.0.0.tgz#84538875a4dc216e5c4a5432b3a4dec3d54e91b7"
+  dependencies:
+    "@types/strip-bom" "^3.0.0"
+    "@types/strip-json-comments" "0.0.30"
+    strip-bom "^3.0.0"
+    strip-json-comments "^2.0.0"
+
+tsickle@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.29.0.tgz#812806554bb46c1aa16eb0fe2a051da95ca8f5a4"
+  dependencies:
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
+tslint@~5.9.1:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.9.1.tgz#1255f87a3ff57eb0b0e1f0e610a8b4748046c9ae"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    builtin-modules "^1.1.1"
+    chalk "^2.3.0"
+    commander "^2.12.1"
+    diff "^3.2.0"
+    glob "^7.1.1"
+    js-yaml "^3.7.0"
+    minimatch "^3.0.4"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.8.0"
+    tsutils "^2.12.1"
+
+tsscmp@~1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.5.tgz#7dc4a33af71581ab4337da91d85ca5427ebd9a97"
+
+tsutils@^2.12.1:
+  version "2.19.1"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.19.1.tgz#76d7ebdea9d7a7bf4a05f50ead3701b0168708d7"
+  dependencies:
+    tslib "^1.8.1"
+
+tty-browserify@0.0.0, 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.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"
+
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
+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-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-is@~1.6.15, type-is@~1.6.16:
+  version "1.6.16"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.18"
+
+typedarray@^0.0.6, typedarray@~0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+"typescript@>=2.6.2 <2.8", typescript@~2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
+
+"typescript@file:../../node_modules/typescript":
+  version "2.7.2"
+
+uglify-es@^3.3.4:
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
+  dependencies:
+    commander "~2.13.0"
+    source-map "~0.6.1"
+
+uglify-js@3.3.x:
+  version "3.3.18"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.18.tgz#e16df66d71638df3c9bc61cce827e46f24bdac02"
+  dependencies:
+    commander "~2.15.0"
+    source-map "~0.6.1"
+
+uglify-js@^2.6:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
+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"
+
+uglifyjs-webpack-plugin@^1.2.2, uglifyjs-webpack-plugin@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.4.tgz#5eec941b2e9b8538be0a20fc6eda25b14c7c1043"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    schema-utils "^0.4.5"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    uglify-es "^3.3.4"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+
+umd@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.1.tgz#8ae556e11011f63c2596708a8837259f01b3d60e"
+
+underscore@~1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209"
+
+union-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^0.4.3"
+
+unique-filename@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.0.tgz#d05f2fe4032560871f30e93cbe735eea201514f3"
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.0.tgz#db6676e7c7cc0629878ff196097c78855ae9f4ab"
+  dependencies:
+    imurmurhash "^0.1.4"
+
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+upath@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.0.4.tgz#ee2321ba0a786c50973db043a50b7bcba822361d"
+
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
+uri-js@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-3.0.2.tgz#f90b858507f81dea4dcfbb3c4c3dbfa2b557faaa"
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+
+url-join@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.0.tgz#4d3340e807d3773bda9991f8305acdcc2a665d2a"
+
+url-loader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.0.1.tgz#61bc53f1f184d7343da2728a1289ef8722ea45ee"
+  dependencies:
+    loader-utils "^1.1.0"
+    mime "^2.0.3"
+    schema-utils "^0.4.3"
+
+url-parse@1.0.x:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
+  dependencies:
+    querystringify "0.0.x"
+    requires-port "1.0.x"
+
+url-parse@^1.1.8:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.3.0.tgz#04a06c420d22beb9804f7ada2d57ad13160a4258"
+  dependencies:
+    querystringify "~1.0.0"
+    requires-port "~1.0.0"
+
+url@^0.11.0, url@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+use@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.0.tgz#14716bf03fdfefd03040aef58d8b4b85f3a7c544"
+  dependencies:
+    kind-of "^6.0.2"
+
+useragent@^2.1.12:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.2.1.tgz#cf593ef4f2d175875e8bb658ea92e18a4fd06d8e"
+  dependencies:
+    lru-cache "2.2.x"
+    tmp "0.0.x"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util.promisify@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  dependencies:
+    define-properties "^1.1.2"
+    object.getownpropertydescriptors "^2.0.3"
+
+util@0.10.3, util@^0.10.3, util@~0.10.1:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+utila@~0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+
+uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
+
+uws@~0.14.4:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/uws/-/uws-0.14.5.tgz#67aaf33c46b2a587a5f6666d00f7691328f149dc"
+
+v8flags@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.0.1.tgz#dce8fc379c17d9f2c9e9ed78d89ce00052b1b76b"
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz#81643bcbef1bdfecd4623793dc4648948ba98338"
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vm-browserify@0.0.4, vm-browserify@~0.0.1:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+void-elements@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+
+watchpack@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.5.0.tgz#231e783af830a22f8966f65c4c4bacc814072eed"
+  dependencies:
+    chokidar "^2.0.2"
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+
+wbuf@^1.1.0, wbuf@^1.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
+  dependencies:
+    minimalistic-assert "^1.0.0"
+
+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"
+    del "^2.2.0"
+    glob "^7.0.3"
+    ini "^1.3.4"
+    minimist "^1.2.0"
+    q "^1.4.1"
+    request "^2.78.0"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+    xml2js "^0.4.17"
+
+webpack-core@^0.6.8:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack-dev-middleware@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.0.1.tgz#7ffd6d0192883c83d3f262e8d7dec822493c6166"
+  dependencies:
+    loud-rejection "^1.6.0"
+    memory-fs "~0.4.1"
+    mime "^2.1.0"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    url-join "^4.0.0"
+    webpack-log "^1.0.1"
+
+webpack-dev-middleware@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.1.2.tgz#be4d0c36a4fa7d69d6904093418514caa9df3a40"
+  dependencies:
+    loud-rejection "^1.6.0"
+    memory-fs "~0.4.1"
+    mime "^2.1.0"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    url-join "^4.0.0"
+    webpack-log "^1.0.1"
+
+webpack-dev-server@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.1.1.tgz#3c0fdd1ba3b50ebc79858a0e6b9ccdd1565b0c24"
+  dependencies:
+    ansi-html "0.0.7"
+    array-includes "^3.0.3"
+    bonjour "^3.5.0"
+    chokidar "^2.0.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
+    del "^3.0.0"
+    express "^4.16.2"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.17.4"
+    import-local "^1.0.0"
+    internal-ip "1.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
+    serve-index "^1.7.2"
+    sockjs "0.3.19"
+    sockjs-client "1.1.4"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.0"
+    supports-color "^5.1.0"
+    webpack-dev-middleware "3.0.1"
+    webpack-log "^1.1.2"
+    yargs "9.0.1"
+
+webpack-log@^1.0.1, webpack-log@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
+  dependencies:
+    chalk "^2.1.0"
+    log-symbols "^2.1.0"
+    loglevelnext "^1.0.1"
+    uuid "^3.1.0"
+
+webpack-merge@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.2.tgz#5d372dddd3e1e5f8874f5bf5a8e929db09feb216"
+  dependencies:
+    lodash "^4.17.5"
+
+webpack-sources@^1.0.1, webpack-sources@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+webpack-subresource-integrity@^1.1.0-rc.4:
+  version "1.1.0-rc.4"
+  resolved "https://registry.yarnpkg.com/webpack-subresource-integrity/-/webpack-subresource-integrity-1.1.0-rc.4.tgz#c5c4e3d690f9d2f64a9550e07a8767f9796aa5d8"
+  dependencies:
+    webpack-core "^0.6.8"
+
+webpack@~4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.5.0.tgz#1e6f71e148ead02be265ff2879c9cd6bb30b8848"
+  dependencies:
+    acorn "^5.0.0"
+    acorn-dynamic-import "^3.0.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+    chrome-trace-event "^0.1.1"
+    enhanced-resolve "^4.0.0"
+    eslint-scope "^3.7.1"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    micromatch "^3.1.8"
+    mkdirp "~0.5.0"
+    neo-async "^2.5.0"
+    node-libs-browser "^2.0.0"
+    schema-utils "^0.4.2"
+    tapable "^1.0.0"
+    uglifyjs-webpack-plugin "^1.2.4"
+    watchpack "^1.5.0"
+    webpack-sources "^1.0.1"
+
+websocket-driver@>=0.5.1:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
+  dependencies:
+    http-parser-js ">=0.4.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
+
+when@^3.7.7:
+  version "3.7.8"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"
+
+when@~3.6.x:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
+which@1, which@^1.1.1, which@^1.2.1, which@^1.2.9:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  dependencies:
+    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"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@^1.0.0, wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+worker-farm@^1.5.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.6.0.tgz#aecc405976fab5a95526180846f0dba288f3a4a0"
+  dependencies:
+    errno "~0.1.7"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+ws@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.5.tgz#cbd9e6e75e09fc5d2c90015f21f0c40875e0dd51"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
+ws@~3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
+xml2js@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.4.tgz#3111010003008ae19240eba17497b57c729c555d"
+  dependencies:
+    sax "0.6.x"
+    xmlbuilder ">=1.0.0"
+
+xml2js@^0.4.17:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"
+
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+
+xregexp@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-2.0.0.tgz#52a63e56ca0b84a7f3a5f3d61872f126ad7a5943"
+
+xtend@^4.0.0, xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+xxhashjs@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.2.tgz#8a6251567621a1c46a5ae204da0249c7f8caa9d8"
+  dependencies:
+    cuint "^0.2.2"
+
+y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
+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-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs-parser@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-9.0.1.tgz#52acc23feecac34042078ee78c0c007f5085db4c"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^7.0.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"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+yn@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"
+
+"zone.js@file:../../node_modules/zone.js":
+  version "0.8.26"
diff --git a/integration/dynamic-compiler/e2e/app.e2e-spec.ts b/integration/dynamic-compiler/e2e/app.e2e-spec.ts
new file mode 100644
index 000000000000..654e76298f18
--- /dev/null
+++ b/integration/dynamic-compiler/e2e/app.e2e-spec.ts
@@ -0,0 +1,19 @@
+import { AppPage } from './app.po';
+
+describe('dynamic-compiler App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Hello world!');
+  });
+
+  it('should display lazy-loaded component', () => {
+    page.navigateTo();
+    expect(page.getLazyLoadedText()).toEqual('Lazy-loaded component!');
+  });
+});
diff --git a/integration/dynamic-compiler/e2e/app.po.ts b/integration/dynamic-compiler/e2e/app.po.ts
new file mode 100644
index 000000000000..af43732cc6f2
--- /dev/null
+++ b/integration/dynamic-compiler/e2e/app.po.ts
@@ -0,0 +1,16 @@
+import {browser, by, element, protractor} from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+
+  getLazyLoadedText() {
+    const el = element(by.css('app-root lazy-component'));
+    return browser.wait(protractor.ExpectedConditions.presenceOf(el)).then(() => el.getText(), err => el.getText());
+  }
+}
diff --git a/integration/dynamic-compiler/e2e/browser.config.json b/integration/dynamic-compiler/e2e/browser.config.json
new file mode 100644
index 000000000000..44f23aa0092c
--- /dev/null
+++ b/integration/dynamic-compiler/e2e/browser.config.json
@@ -0,0 +1,15 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": ".",
+    "routes": {
+      "/dist": "dist",
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}
diff --git a/integration/dynamic-compiler/e2e/protractor.config.js b/integration/dynamic-compiler/e2e/protractor.config.js
new file mode 100644
index 000000000000..9b7d88e74139
--- /dev/null
+++ b/integration/dynamic-compiler/e2e/protractor.config.js
@@ -0,0 +1,16 @@
+exports.config = {
+  specs: [
+    '../dist/e2e/*.e2e-spec.js'
+  ],
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      args: ['--no-sandbox'],
+      binary: process.env.CHROME_BIN,
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:8080/',
+  framework: 'jasmine',
+  useAllAngular2AppRoots: true
+};
diff --git a/integration/dynamic-compiler/e2e/tsconfig.json b/integration/dynamic-compiler/e2e/tsconfig.json
new file mode 100644
index 000000000000..c560c74bad49
--- /dev/null
+++ b/integration/dynamic-compiler/e2e/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "outDir": "../dist/e2e",
+    "types": [
+      "jasmine",
+      "jasminewd2"
+    ],
+    "skipLibCheck": true
+  }
+}
diff --git a/integration/dynamic-compiler/index.html b/integration/dynamic-compiler/index.html
new file mode 100644
index 000000000000..6c291a4a5f2a
--- /dev/null
+++ b/integration/dynamic-compiler/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+  <app-root></app-root>
+  <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.js"></script>
+  <script src="/dist/bundle.js"></script>
+</body>
+</html>
diff --git a/integration/dynamic-compiler/package.json b/integration/dynamic-compiler/package.json
new file mode 100644
index 000000000000..71f48d5a38f4
--- /dev/null
+++ b/integration/dynamic-compiler/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "dynamic-compiler",
+  "version": "0.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run clean && npm run ngc && npm run rollup && npm run rollup:lazy && npm run es5 && npm run es5:lazy",
+    "clean": "rm -rf dist",
+    "es5": "tsc --target es5 --skipLibCheck --allowJs dist/bundle.es2015.js --out dist/bundle.js",
+    "es5:lazy": "tsc --target es5 --skipLibCheck --allowJs dist/lazy.bundle.es2015.js --out dist/lazy.bundle.js",
+    "ngc": "ngc -p tsconfig.json",
+    "rollup": "rollup -f iife -c rollup.config.js -o dist/bundle.es2015.js",
+    "rollup:lazy": "rollup -f cjs -c rollup.lazy.config.js -o dist/lazy.bundle.es2015.js",
+    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG",
+    "preprotractor": "tsc -p e2e",
+    "protractor": "protractor e2e/protractor.config.js",
+    "serve": "lite-server -c e2e/browser.config.json",
+    "test": "npm run build && concurrently \"yarn run serve\" \"yarn run protractor\" --kill-others --success first"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
+    "concurrently": "3.4.0",
+    "lite-server": "2.2.2",
+    "protractor": "file:../../node_modules/protractor",
+    "rollup": "file:../../node_modules/rollup",
+    "rollup-plugin-commonjs": "file:../../node_modules/rollup-plugin-commonjs",
+    "rollup-plugin-node-resolve": "file:../../node_modules/rollup-plugin-node-resolve",
+    "typescript": "file:../../node_modules/typescript"
+  },
+  "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
+    "@angular/common": "file:../../dist/packages-dist/common",
+    "@angular/compiler": "file:../../dist/packages-dist/compiler",
+    "@angular/core": "file:../../dist/packages-dist/core",
+    "@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",
+    "core-js": "file:../../node_modules/core-js",
+    "rxjs": "file:../../node_modules/rxjs",
+    "systemjs": "file:../../node_modules/systemjs",
+    "zone.js": "file:../../node_modules/zone.js"
+  }
+}
diff --git a/integration/dynamic-compiler/rollup.config.js b/integration/dynamic-compiler/rollup.config.js
new file mode 100644
index 000000000000..0df72458fd5e
--- /dev/null
+++ b/integration/dynamic-compiler/rollup.config.js
@@ -0,0 +1,11 @@
+import nodeResolve from 'rollup-plugin-node-resolve';
+
+export default {
+  entry: 'dist/src/main.js',
+  sourceMap: true,
+  treeshake: true,
+  moduleName: 'main',
+  plugins: [
+    nodeResolve()
+  ]
+};
diff --git a/integration/dynamic-compiler/rollup.lazy.config.js b/integration/dynamic-compiler/rollup.lazy.config.js
new file mode 100644
index 000000000000..85b82b9214ff
--- /dev/null
+++ b/integration/dynamic-compiler/rollup.lazy.config.js
@@ -0,0 +1,14 @@
+import nodeResolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+
+// a real app should make a common bundle for libraries instead of bundling them
+// in both the main module & the lazy module, but we don't care about size here
+export default {
+  entry: 'dist/src/lazy.module.js',
+  sourceMap: true,
+  treeshake: true,
+  moduleName: 'lazy',
+  plugins: [
+    nodeResolve()
+  ]
+};
diff --git a/integration/dynamic-compiler/src/app.component.ts b/integration/dynamic-compiler/src/app.component.ts
new file mode 100644
index 000000000000..e54316da9be1
--- /dev/null
+++ b/integration/dynamic-compiler/src/app.component.ts
@@ -0,0 +1,27 @@
+import {AfterViewInit, Compiler, Component, ViewChild, ViewContainerRef} from '@angular/core';
+
+declare var System: any;
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>Hello world!</h1>
+    <div #vc></div>
+  `,
+})
+export class AppComponent implements AfterViewInit {
+  @ViewChild('vc', {read: ViewContainerRef}) container: ViewContainerRef;
+
+  constructor(private compiler: Compiler) {
+  }
+
+  ngAfterViewInit() {
+    System.import('./dist/lazy.bundle.js').then((module: any) => {
+      this.compiler.compileModuleAndAllComponentsAsync(module.LazyModule)
+        .then((compiled) => {
+          const factory = compiled.componentFactories[0];
+          this.container.createComponent(factory);
+        });
+    });
+  }
+}
diff --git a/integration/dynamic-compiler/src/app.module.ts b/integration/dynamic-compiler/src/app.module.ts
new file mode 100644
index 000000000000..0963654c9522
--- /dev/null
+++ b/integration/dynamic-compiler/src/app.module.ts
@@ -0,0 +1,22 @@
+import {Compiler, COMPILER_OPTIONS, CompilerFactory, NgModule} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import {JitCompilerFactory} from '@angular/platform-browser-dynamic';
+
+import { AppComponent } from './app.component';
+
+export function createCompiler(compilerFactory: CompilerFactory) {
+  return compilerFactory.createCompiler();
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  bootstrap: [AppComponent],
+  declarations: [AppComponent],
+  providers: [
+    {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
+    {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
+    {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}
+  ]
+})
+export class AppModule {}
+
diff --git a/integration/dynamic-compiler/src/lazy.module.ts b/integration/dynamic-compiler/src/lazy.module.ts
new file mode 100644
index 000000000000..876cf05f4a22
--- /dev/null
+++ b/integration/dynamic-compiler/src/lazy.module.ts
@@ -0,0 +1,17 @@
+import {NgModule} from "@angular/core";
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'lazy-component',
+  template: 'Lazy-loaded component!'
+})
+export class LazyComponent {
+  constructor() {
+  }
+}
+
+@NgModule({
+  declarations: [LazyComponent]
+})
+export class LazyModule {
+}
diff --git a/integration/dynamic-compiler/src/main.ts b/integration/dynamic-compiler/src/main.ts
new file mode 100644
index 000000000000..7c5e5943c354
--- /dev/null
+++ b/integration/dynamic-compiler/src/main.ts
@@ -0,0 +1,8 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowser } from '@angular/platform-browser';
+
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/integration/dynamic-compiler/tsconfig.json b/integration/dynamic-compiler/tsconfig.json
new file mode 100644
index 000000000000..4adfea7714c5
--- /dev/null
+++ b/integration/dynamic-compiler/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": false,
+    "removeComments": true,
+    "noLib": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "es2015", "dom"],
+    "sourceMap": true,
+    "pretty": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noFallthroughCasesInSwitch": true,
+    "outDir": "./dist",
+    "types": [
+    ]
+  },
+  "files": [
+    "src/main.ts",
+    "src/lazy.module.ts"
+  ]
+}
diff --git a/integration/dynamic-compiler/yarn.lock b/integration/dynamic-compiler/yarn.lock
new file mode 100644
index 000000000000..b9d169b0b3d8
--- /dev/null
+++ b/integration/dynamic-compiler/yarn.lock
@@ -0,0 +1,2459 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular/animations@file:../../dist/packages-dist/animations":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/common@file:../../dist/packages-dist/common":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@file:../../dist/packages-dist/compiler-cli":
+  version "6.0.0-rc.5"
+  dependencies:
+    chokidar "^1.4.2"
+    minimist "^1.2.0"
+    reflect-metadata "^0.1.2"
+    tsickle "^0.29.0"
+
+"@angular/compiler@file:../../dist/packages-dist/compiler":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@file:../../dist/packages-dist/core":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser-dynamic@file:../../dist/packages-dist/platform-browser-dynamic":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
+  version "6.0.0-rc.5"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-server@file:../../dist/packages-dist/platform-server":
+  version "6.0.0-rc.5"
+  dependencies:
+    domino "^2.0.1"
+    tslib "^1.9.0"
+    xhr2 "^0.1.4"
+
+"@types/jasmine@file:../../node_modules/@types/jasmine":
+  version "2.2.22-alpha"
+
+"@types/node@^6.0.46":
+  version "6.0.96"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.96.tgz#7bf0bf40d6ce51e93762cc47d010c8cc5ebb2179"
+
+"@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.43"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz#2de3d718819bc20165754c4a59afb7e9833f6707"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+accepts@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+accepts@~1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  dependencies:
+    mime-types "~2.1.16"
+    negotiator "0.6.1"
+
+acorn@^4.0.1:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+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:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
+
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+
+agent-base@2:
+  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"
+
+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.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+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"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  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.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+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"
+
+async-each-series@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/async-each-series/-/async-each-series-0.1.1.tgz#7617c1917401fd8ca4a28aadce3dbae98afeb432"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
+async@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base64-arraybuffer@0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+
+base64id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
+
+batch@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+binary-extensions@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  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"
+
+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"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+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 "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browser-resolve@^1.11.0:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+browser-sync-ui@v1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-1.0.1.tgz#9740527b26d1d7ace259acc0c79e5b5e37d0fdf2"
+  dependencies:
+    async-each-series "0.1.1"
+    connect-history-api-fallback "^1.1.0"
+    immutable "^3.7.6"
+    server-destroy "1.0.1"
+    socket.io-client "2.0.4"
+    stream-throttle "^0.1.3"
+
+browser-sync@^2.12.3:
+  version "2.23.5"
+  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.23.5.tgz#088bc5c3bb4dfc1507bad0278f140d8060fe4299"
+  dependencies:
+    browser-sync-ui v1.0.1
+    bs-recipes "1.3.4"
+    chokidar "1.7.0"
+    connect "3.5.0"
+    connect-history-api-fallback "^1.5.0"
+    dev-ip "^1.0.1"
+    easy-extender "2.3.2"
+    eazy-logger "3.0.2"
+    emitter-steward "^1.0.0"
+    etag "^1.8.1"
+    fresh "^0.5.2"
+    fs-extra "3.0.1"
+    http-proxy "1.15.2"
+    immutable "3.8.2"
+    localtunnel "1.8.3"
+    micromatch "2.3.11"
+    opn "4.0.2"
+    portscanner "2.1.1"
+    qs "6.2.1"
+    resp-modifier "6.0.2"
+    rx "4.1.0"
+    serve-index "1.8.0"
+    serve-static "1.12.2"
+    server-destroy "1.0.1"
+    socket.io "2.0.4"
+    ua-parser-js "0.7.12"
+    yargs "6.4.0"
+
+bs-recipes@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.3.4.tgz#0d2d4d48a718c8c044769fdc4f89592dc8b69585"
+
+builtin-modules@^1.0.0, builtin-modules@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+camelcase@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+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"
+  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.1.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chokidar@1.7.0, chokidar@^1.4.2:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+cliui@^3.0.3, cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+
+commander@^2.2.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+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"
+
+connect-history-api-fallback@^1.1.0, connect-history-api-fallback@^1.2.0, connect-history-api-fallback@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
+
+connect-logger@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/connect-logger/-/connect-logger-0.0.1.tgz#4d999978a1d20bb4608e7cd434d741652255174b"
+  dependencies:
+    moment "*"
+
+connect@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.5.0.tgz#b357525a0b4c1f50599cd983e1d9efeea9677198"
+  dependencies:
+    debug "~2.2.0"
+    finalhandler "0.5.0"
+    parseurl "~1.3.1"
+    utils-merge "1.0.0"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+"core-js@file:../../node_modules/core-js":
+  version "2.5.1"
+
+core-util-is@1.0.2, 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"
+
+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"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-fns@^1.23.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+
+debug@2, debug@^2.2.0, debug@~2.6.4, debug@~2.6.6, debug@~2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
+  dependencies:
+    ms "0.7.3"
+
+debug@2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  dependencies:
+    ms "2.0.0"
+
+debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+del@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+depd@~1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+dev-ip@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dev-ip/-/dev-ip-1.0.1.tgz#a76a3ed1855be7a012bb8ac16cb80f3c00dc28f0"
+
+domino@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.0.1.tgz#9e1d63215d0fe8dcb8202bff07effa1a216db504"
+
+easy-extender@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/easy-extender/-/easy-extender-2.3.2.tgz#3d3248febe2b159607316d8f9cf491c16648221d"
+  dependencies:
+    lodash "^3.10.1"
+
+eazy-logger@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/eazy-logger/-/eazy-logger-3.0.2.tgz#a325aa5e53d13a2225889b2ac4113b2b9636f4fc"
+  dependencies:
+    tfunk "^3.0.1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+emitter-steward@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/emitter-steward/-/emitter-steward-1.0.0.tgz#f3411ade9758a7565df848b2da0cbbd1b46cbd64"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+engine.io-client@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.1.4.tgz#4fcf1370b47163bd2ce9be2733972430350d4ea1"
+  dependencies:
+    component-emitter "1.2.1"
+    component-inherit "0.0.3"
+    debug "~2.6.9"
+    engine.io-parser "~2.1.1"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "~3.3.1"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
+
+engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.2.tgz#4c0f4cff79aaeecbbdcfdea66a823c6085409196"
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "~0.0.7"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.4"
+    has-binary2 "~1.0.2"
+
+engine.io@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.1.4.tgz#3d0211b70a552ce841ffc7da8627b301a9a4162e"
+  dependencies:
+    accepts "1.3.3"
+    base64id "1.0.0"
+    cookie "0.3.1"
+    debug "~2.6.9"
+    engine.io-parser "~2.1.0"
+    ws "~3.3.1"
+  optionalDependencies:
+    uws "~0.14.4"
+
+error-ex@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es6-module-loader@^0.17.4:
+  version "0.17.11"
+  resolved "https://registry.yarnpkg.com/es6-module-loader/-/es6-module-loader-0.17.11.tgz#094f042e3b4d3086bcfd17380affabdfc99f35d7"
+  dependencies:
+    when "^3.7.2"
+
+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.0, escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+estree-walker@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.3.1.tgz#e6b1a51cf7292524e7237c312e5fe6660c1ce1aa"
+
+etag@^1.8.1, etag@~1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@3, extend@~3.0.0, extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.0"
+    unpipe "~1.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    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.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"
+    mime-types "^2.1.12"
+
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
+
+fresh@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+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 "^3.0.0"
+    universalify "^0.1.0"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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.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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.3, glob@^7.0.5, glob@^7.0.6:
+  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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+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"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary2@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.2.tgz#e83dba49f0b9be4d026d27365350d9f03f54be98"
+  dependencies:
+    isarray "2.0.1"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+hoek@4.x.x:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
+
+hosted-git-info@^2.1.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+
+http-errors@~1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+  dependencies:
+    inherits "2.0.3"
+    setprototypeof "1.0.2"
+    statuses ">= 1.3.1 < 2"
+
+http-errors@~1.6.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-proxy@1.15.2:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.15.2.tgz#642fdcaffe52d3448d2bda3b0079e9409064da31"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-proxy-agent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+immutable@3.8.2, immutable@^3.7.6:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-dotfile@^1.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+
+is-number-like@^1.0.3:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/is-number-like/-/is-number-like-1.0.8.tgz#2e129620b50891042e44e9bbbb30593e75cfbbe3"
+  dependencies:
+    lodash.isfinite "^3.3.2"
+
+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-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+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"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jasmine-core@~2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
+
+jasmine@^2.5.3:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.8.0.tgz#6b089c0a11576b1f16df11b80146d91d4e8b8a3e"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.8.0"
+
+jasminewd2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+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"
+
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  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"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+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"
+
+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"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+limiter@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.2.tgz#229d8055891c8b11af9e0ee5200e8e09bb3dcbeb"
+
+lite-server@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/lite-server/-/lite-server-2.2.2.tgz#4644afe6c9146d850cfa0ad9a86a94f87156499e"
+  dependencies:
+    browser-sync "^2.12.3"
+    connect-history-api-fallback "^1.2.0"
+    connect-logger "0.0.1"
+    lodash "^4.11.1"
+    minimist "1.2.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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+localtunnel@1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/localtunnel/-/localtunnel-1.8.3.tgz#dcc5922fd85651037d4bde24fd93248d0b24eb05"
+  dependencies:
+    debug "2.6.8"
+    openurl "1.1.1"
+    request "2.81.0"
+    yargs "3.29.0"
+
+lodash.isfinite@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
+
+lodash@^3.10.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+lodash@^4.11.1, lodash@^4.5.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+magic-string@^0.19.0:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.19.1.tgz#14d768013caf2ec8fdea16a49af82fc377e75201"
+  dependencies:
+    vlq "^0.2.1"
+
+micromatch@2.3.11, micromatch@^2.1.5, micromatch@^2.3.11:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+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.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@1.2.0, 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"
+
+"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@*:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+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"
+
+nan@^2.3.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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"
+
+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"
+
+normalize-package-data@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  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.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"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+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"
+
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-path@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.9.2.tgz#0fd9a74fc5fad1ae3968b586bda5c632bd6c05a5"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+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"
+
+openurl@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.1.tgz#3875b4b0ef7a52c156f0db41d4609dbb0f94b387"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.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"
+
+parseqs@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^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"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+portscanner@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/portscanner/-/portscanner-2.1.1.tgz#eabb409e4de24950f5a2a516d35ae769343fbb96"
+  dependencies:
+    async "1.5.2"
+    is-number-like "^1.0.3"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+"protractor@file:../../node_modules/protractor":
+  version "5.1.2"
+  dependencies:
+    "@types/node" "^6.0.46"
+    "@types/q" "^0.0.32"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "0.0.5"
+    chalk "^1.1.3"
+    glob "^7.0.3"
+    jasmine "^2.5.3"
+    jasminewd2 "^2.1.0"
+    optimist "~0.6.0"
+    q "1.4.1"
+    saucelabs "~1.3.0"
+    selenium-webdriver "3.0.1"
+    source-map-support "~0.4.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+q@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+q@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qs@6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.1.tgz#ce03c5ff0935bc1d9d69a9f14cbd18e568d67625"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    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.1.7:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.3.tgz#51575a900f8dd68381c710b4712c2154c3e2035b"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+reflect-metadata@^0.1.2:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.10.tgz#b4f83704416acad89988c9b15635d47e03b9344a"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+request@^2.78.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.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-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"
+
+requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+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.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+  dependencies:
+    path-parse "^1.0.5"
+
+resp-modifier@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/resp-modifier/-/resp-modifier-6.0.2.tgz#b124de5c4fbafcba541f48ffa73970f4aa456b4f"
+  dependencies:
+    debug "^2.2.0"
+    minimatch "^3.0.2"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+"rollup-plugin-commonjs@file:../../node_modules/rollup-plugin-commonjs":
+  version "8.1.0"
+  dependencies:
+    acorn "^4.0.1"
+    estree-walker "^0.3.0"
+    magic-string "^0.19.0"
+    resolve "^1.1.7"
+    rollup-pluginutils "^2.0.1"
+
+"rollup-plugin-node-resolve@file:../../node_modules/rollup-plugin-node-resolve":
+  version "3.0.0"
+  dependencies:
+    browser-resolve "^1.11.0"
+    builtin-modules "^1.1.0"
+    is-module "^1.0.0"
+    resolve "^1.1.6"
+
+rollup-pluginutils@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.0.1.tgz#7ec95b3573f6543a46a6461bd9a7c544525d0fc0"
+  dependencies:
+    estree-walker "^0.3.0"
+    micromatch "^2.3.11"
+
+"rollup@file:../../node_modules/rollup":
+  version "0.47.4"
+
+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@file:../../node_modules/rxjs":
+  version "6.0.0"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+saucelabs@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.3.0.tgz#d240e8009df7fa87306ec4578a69ba3b5c424fee"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+
+sax@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
+
+sax@>=0.6.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+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:
+    adm-zip "0.4.4"
+    rimraf "^2.2.8"
+    tmp "0.0.24"
+    ws "^1.0.1"
+    xml2js "0.4.4"
+
+"semver@2 || 3 || 4 || 5", semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+semver@~5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
+
+send@0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.2.tgz#f91fab4403bcf87e716f70ceb5db2f578bdc17d6"
+  dependencies:
+    debug "2.6.4"
+    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 "1.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:
+    accepts "~1.3.3"
+    batch "0.5.3"
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    http-errors "~1.5.0"
+    mime-types "~2.1.11"
+    parseurl "~1.3.1"
+
+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.2"
+
+server-destroy@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
+socket.io-adapter@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
+
+socket.io-client@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.0.4.tgz#0918a552406dc5e540b380dcd97afc4a64332f8e"
+  dependencies:
+    backo2 "1.0.2"
+    base64-arraybuffer "0.1.5"
+    component-bind "1.0.0"
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    engine.io-client "~3.1.0"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    socket.io-parser "~3.1.1"
+    to-array "0.1.4"
+
+socket.io-parser@~3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.1.2.tgz#dbc2282151fc4faebbe40aeedc0772eba619f7f2"
+  dependencies:
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    has-binary2 "~1.0.2"
+    isarray "2.0.1"
+
+socket.io@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.0.4.tgz#c1a4590ceff87ecf13c72652f046f716b29e6014"
+  dependencies:
+    debug "~2.6.6"
+    engine.io "~3.1.0"
+    socket.io-adapter "~1.1.0"
+    socket.io-client "2.0.4"
+    socket.io-parser "~3.1.1"
+
+source-map-support@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.3.tgz#2b3d5fff298cfa4d1afd7d4352d569e9a0158e76"
+  dependencies:
+    source-map "^0.6.0"
+
+source-map-support@~0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+source-map@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+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"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+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"
+
+sshpk@^1.7.0:
+  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"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+"statuses@>= 1.3.1 < 2":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+statuses@~1.3.0, statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+stream-throttle@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/stream-throttle/-/stream-throttle-0.1.3.tgz#add57c8d7cc73a81630d31cd55d3961cfafba9c3"
+  dependencies:
+    commander "^2.2.0"
+    limiter "^1.0.5"
+
+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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4, stringstream@~0.0.5:
+  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-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.0"
+
+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"
+
+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"
+
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+"systemjs@file:../../node_modules/systemjs":
+  version "0.18.10"
+  dependencies:
+    es6-module-loader "^0.17.4"
+    when "^3.7.2"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  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"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+tfunk@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-3.1.0.tgz#38e4414fc64977d87afdaa72facb6d29f82f7b5b"
+  dependencies:
+    chalk "^1.1.1"
+    object-path "^0.9.0"
+
+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"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+tree-kill@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36"
+
+tsickle@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.29.0.tgz#812806554bb46c1aa16eb0fe2a051da95ca8f5a4"
+  dependencies:
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
+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"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+"typescript@file:../../node_modules/typescript":
+  version "2.7.2"
+
+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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+uuid@^3.0.0, uuid@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+uws@~0.14.4:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/uws/-/uws-0.14.5.tgz#67aaf33c46b2a587a5f6666d00f7691328f149dc"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vlq@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
+
+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"
+    del "^2.2.0"
+    glob "^7.0.3"
+    ini "^1.3.4"
+    minimist "^1.2.0"
+    q "^1.4.1"
+    request "^2.78.0"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+    xml2js "^0.4.17"
+
+when@^3.7.2:
+  version "3.7.8"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+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"
+
+window-size@^0.1.2:
+  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"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+ws@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.5.tgz#cbd9e6e75e09fc5d2c90015f21f0c40875e0dd51"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
+ws@~3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
+xhr2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.4.tgz#7f87658847716db5026323812f818cadab387a5f"
+
+xml2js@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.4.tgz#3111010003008ae19240eba17497b57c729c555d"
+  dependencies:
+    sax "0.6.x"
+    xmlbuilder ">=1.0.0"
+
+xml2js@^0.4.17:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"
+
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+
+y18n@^3.2.0, y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yargs-parser@^4.1.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@3.29.0:
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.29.0.tgz#1aab9660eae79d8b8f675bcaeeab6ee34c2cf69c"
+  dependencies:
+    camelcase "^1.2.1"
+    cliui "^3.0.3"
+    decamelize "^1.0.0"
+    os-locale "^1.4.0"
+    window-size "^0.1.2"
+    y18n "^3.2.0"
+
+yargs@6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.4.0.tgz#816e1a866d5598ccf34e5596ddce22d92da490d4"
+  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"
+    window-size "^0.2.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.1.0"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+"zone.js@file:../../node_modules/zone.js":
+  version "0.8.26"
diff --git a/integration/hello_world__closure/closure.conf b/integration/hello_world__closure/closure.conf
new file mode 100644
index 000000000000..1198d0c87040
--- /dev/null
+++ b/integration/hello_world__closure/closure.conf
@@ -0,0 +1,40 @@
+--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
+--jscomp_off=checkVars
+
+node_modules/zone.js/dist/zone_externs.js
+
+--js node_modules/rxjs/package.json
+--js node_modules/rxjs/_esm2015/index.js
+--js node_modules/rxjs/_esm2015/internal/**.js
+--js node_modules/rxjs/operators/package.json
+--js node_modules/rxjs/_esm2015/operators/index.js
+
+--js node_modules/@angular/compiler/package.json
+--js node_modules/@angular/compiler/fesm2015/compiler.js
+
+--js node_modules/@angular/core/package.json
+--js node_modules/@angular/core/fesm2015/core.js
+--js node_modules/@angular/core/src/testability/testability.externs.js
+
+--js node_modules/@angular/common/package.json
+--js node_modules/@angular/common/fesm2015/common.js
+
+--js node_modules/@angular/platform-browser/package.json
+--js node_modules/@angular/platform-browser/fesm2015/platform-browser.js
+
+--module_resolution=node
+--package_json_entry_names es2015
+--process_common_js_modules
+
+--js built/**.js
+--entry_point=built/src/main
diff --git a/integration/hello_world__closure/e2e/app.e2e-spec.ts b/integration/hello_world__closure/e2e/app.e2e-spec.ts
new file mode 100644
index 000000000000..04fadb25251a
--- /dev/null
+++ b/integration/hello_world__closure/e2e/app.e2e-spec.ts
@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+describe('Hello world E2E Tests', function () {
+  it('should display: Hello world!', function () {
+    browser.get('');
+    const div = element(by.css('div'));
+    expect(div.getText()).toEqual('Hello world!');
+    element(by.css('input')).sendKeys('!');
+    expect(div.getText()).toEqual('Hello world!!');
+  });
+});
diff --git a/integration/hello_world__closure/e2e/browser.config.json b/integration/hello_world__closure/e2e/browser.config.json
new file mode 100644
index 000000000000..dcdae6300835
--- /dev/null
+++ b/integration/hello_world__closure/e2e/browser.config.json
@@ -0,0 +1,15 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/dist": "dist",
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}
\ No newline at end of file
diff --git a/integration/hello_world__closure/e2e/protractor.config.js b/integration/hello_world__closure/e2e/protractor.config.js
new file mode 100644
index 000000000000..5bc4f6e640d1
--- /dev/null
+++ b/integration/hello_world__closure/e2e/protractor.config.js
@@ -0,0 +1,16 @@
+exports.config = {
+  specs: [
+    '../built/e2e/*.e2e-spec.js'
+  ],
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      args: ['--no-sandbox'],
+      binary: process.env.CHROME_BIN,
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:8080/',
+  framework: 'jasmine',
+  useAllAngular2AppRoots: true
+};
diff --git a/integration/hello_world__closure/e2e/tsconfig.json b/integration/hello_world__closure/e2e/tsconfig.json
new file mode 100644
index 000000000000..e112859422e7
--- /dev/null
+++ b/integration/hello_world__closure/e2e/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "outDir": "../built/e2e",
+    "types": ["jasmine"],
+    // TODO(alexeagle): was required for Protractor 4.0.11
+    "skipLibCheck": true
+  }
+}
\ No newline at end of file
diff --git a/integration/hello_world__closure/package.json b/integration/hello_world__closure/package.json
new file mode 100644
index 000000000000..6e1c9706d728
--- /dev/null
+++ b/integration/hello_world__closure/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "angular-integration",
+  "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/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
+    "google-closure-compiler": "20180716.0.0",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "file:../../node_modules/typescript",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "devDependencies": {
+    "@types/jasmine": "2.5.41",
+    "concurrently": "3.4.0",
+    "lite-server": "2.2.2",
+    "protractor": "file:../../node_modules/protractor"
+  },
+  "scripts": {
+    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG",
+    "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"
+  }
+}
diff --git a/integration/hello_world__closure/src/app.ts b/integration/hello_world__closure/src/app.ts
new file mode 100644
index 000000000000..31ecac712b0d
--- /dev/null
+++ b/integration/hello_world__closure/src/app.ts
@@ -0,0 +1,11 @@
+import {HelloWorldComponent} from './hello-world.component';
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [HelloWorldComponent],
+  bootstrap: [HelloWorldComponent],
+  imports: [BrowserModule],
+})
+export class AppModule {}
diff --git a/integration/hello_world__closure/src/hello-world.component.ts b/integration/hello_world__closure/src/hello-world.component.ts
new file mode 100644
index 000000000000..87b9ca39de84
--- /dev/null
+++ b/integration/hello_world__closure/src/hello-world.component.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'hello-world-app',
+  template: `
+    <div>Hello {{ name }}!</div>
+    <input type="text" [value]="name" (input)="name = $event.target.value"/>
+  `,
+})
+export class HelloWorldComponent {
+  name: string = 'world';
+}
diff --git a/integration/hello_world__closure/src/index.html b/integration/hello_world__closure/src/index.html
new file mode 100644
index 000000000000..ffbd2616e9d0
--- /dev/null
+++ b/integration/hello_world__closure/src/index.html
@@ -0,0 +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="node_modules/zone.js/dist/zone.min.js"></script>
+  <script src="dist/bundle.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/integration/hello_world__closure/src/main.ts b/integration/hello_world__closure/src/main.ts
new file mode 100644
index 000000000000..81d2aa7b15f7
--- /dev/null
+++ b/integration/hello_world__closure/src/main.ts
@@ -0,0 +1,4 @@
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModuleNgFactory} from './app.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/integration/hello_world__closure/tsconfig.json b/integration/hello_world__closure/tsconfig.json
new file mode 100644
index 000000000000..34cc0b9fb285
--- /dev/null
+++ b/integration/hello_world__closure/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "angularCompilerOptions": {
+    "annotationsAs": "static fields",
+    "annotateForClosureCompiler": true,
+    "alwaysCompileGeneratedCode": true
+  },
+
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    // TODO(i): strictNullChecks should turned on but are temporarily disabled due to #15432
+    "strictNullChecks": false,
+    "target": "es6",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "experimentalDecorators": true,
+    "outDir": "built",
+    "rootDir": ".",
+    "declaration": true,
+    "types": []
+  },
+
+  "exclude": [
+    "vendor",
+    "node_modules",
+    "built",
+    "dist",
+    "e2e"
+  ]
+}
\ No newline at end of file
diff --git a/integration/hello_world__closure/yarn.lock b/integration/hello_world__closure/yarn.lock
new file mode 100644
index 000000000000..37a0e35a83a5
--- /dev/null
+++ b/integration/hello_world__closure/yarn.lock
@@ -0,0 +1,3613 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular/animations@file:../../dist/packages-dist/animations":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/common@file:../../dist/packages-dist/common":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@file:../../dist/packages-dist/compiler-cli":
+  version "6.1.0"
+  dependencies:
+    chokidar "^1.4.2"
+    convert-source-map "^1.5.1"
+    magic-string "^0.25.0"
+    minimist "^1.2.0"
+    reflect-metadata "^0.1.2"
+    source-map "^0.6.1"
+    tsickle "^0.32.1"
+
+"@angular/compiler@file:../../dist/packages-dist/compiler":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@file:../../dist/packages-dist/core":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
+  version "6.1.0"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-server@file:../../dist/packages-dist/platform-server":
+  version "6.1.0"
+  dependencies:
+    domino "^2.0.1"
+    tslib "^1.9.0"
+    xhr2 "^0.1.4"
+
+"@types/jasmine@2.5.41":
+  version "2.5.41"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.41.tgz#d5e86161a0af80d52062b310a33ed65b051a0713"
+
+"@types/node@^6.0.46":
+  version "6.0.96"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.96.tgz#7bf0bf40d6ce51e93762cc47d010c8cc5ebb2179"
+
+"@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.43"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz#2de3d718819bc20165754c4a59afb7e9833f6707"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+accepts@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+accepts@~1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  dependencies:
+    mime-types "~2.1.16"
+    negotiator "0.6.1"
+
+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:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
+
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+
+agent-base@2:
+  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"
+
+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.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+ansi-gray@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
+  dependencies:
+    ansi-wrap "0.1.0"
+
+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-wrap@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+archy@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
+
+are-we-there-yet@~1.1.2:
+  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.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+
+arr-flatten@^1.0.1, arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+
+array-differ@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031"
+
+array-each@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-each/-/array-each-1.0.1.tgz#a794af0c05ab1752846ee753a1f211a05ba0c44f"
+
+array-slice@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-1.1.0.tgz#e368ea15f89bc7069f7ffb89aec3a6c7d4ac22d4"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1, array-uniq@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+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"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+
+async-each-series@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/async-each-series/-/async-each-series-0.1.1.tgz#7617c1917401fd8ca4a28aadce3dbae98afeb432"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
+async@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+atob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base64-arraybuffer@0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+
+base64id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+batch@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+beeper@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+binary-extensions@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  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"
+
+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"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+brace-expansion@^1.0.0:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+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 "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+braces@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+browser-sync-ui@v1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-1.0.1.tgz#9740527b26d1d7ace259acc0c79e5b5e37d0fdf2"
+  dependencies:
+    async-each-series "0.1.1"
+    connect-history-api-fallback "^1.1.0"
+    immutable "^3.7.6"
+    server-destroy "1.0.1"
+    socket.io-client "2.0.4"
+    stream-throttle "^0.1.3"
+
+browser-sync@^2.12.3:
+  version "2.23.5"
+  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.23.5.tgz#088bc5c3bb4dfc1507bad0278f140d8060fe4299"
+  dependencies:
+    browser-sync-ui v1.0.1
+    bs-recipes "1.3.4"
+    chokidar "1.7.0"
+    connect "3.5.0"
+    connect-history-api-fallback "^1.5.0"
+    dev-ip "^1.0.1"
+    easy-extender "2.3.2"
+    eazy-logger "3.0.2"
+    emitter-steward "^1.0.0"
+    etag "^1.8.1"
+    fresh "^0.5.2"
+    fs-extra "3.0.1"
+    http-proxy "1.15.2"
+    immutable "3.8.2"
+    localtunnel "1.8.3"
+    micromatch "2.3.11"
+    opn "4.0.2"
+    portscanner "2.1.1"
+    qs "6.2.1"
+    resp-modifier "6.0.2"
+    rx "4.1.0"
+    serve-index "1.8.0"
+    serve-static "1.12.2"
+    server-destroy "1.0.1"
+    socket.io "2.0.4"
+    ua-parser-js "0.7.12"
+    yargs "6.4.0"
+
+bs-recipes@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.3.4.tgz#0d2d4d48a718c8c044769fdc4f89592dc8b69585"
+
+builtin-modules@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+camelcase@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+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"
+  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.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chokidar@1.7.0, chokidar@^1.4.2:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+cliui@^3.0.3, cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+
+clone-stats@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
+
+clone-stats@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
+
+clone@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f"
+
+clone@^1.0.0, clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+
+clone@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
+
+cloneable-readable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.0.0.tgz#a6290d413f217a61232f95e458ff38418cfb0117"
+  dependencies:
+    inherits "^2.0.1"
+    process-nextick-args "^1.0.6"
+    through2 "^2.0.1"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-support@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+
+commander@^2.2.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.2.1, component-emitter@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+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"
+
+connect-history-api-fallback@^1.1.0, connect-history-api-fallback@^1.2.0, connect-history-api-fallback@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
+
+connect-logger@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/connect-logger/-/connect-logger-0.0.1.tgz#4d999978a1d20bb4608e7cd434d741652255174b"
+  dependencies:
+    moment "*"
+
+connect@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.5.0.tgz#b357525a0b4c1f50599cd983e1d9efeea9677198"
+  dependencies:
+    debug "~2.2.0"
+    finalhandler "0.5.0"
+    parseurl "~1.3.1"
+    utils-merge "1.0.0"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+convert-source-map@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+
+core-util-is@1.0.2, 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"
+
+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"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-fns@^1.23.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+
+dateformat@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.2.0.tgz#4065e2013cf9fb916ddfd82efb506ad4c6769062"
+
+debug@2, debug@^2.2.0, debug@^2.3.3, debug@~2.6.4, debug@~2.6.6, debug@~2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
+  dependencies:
+    ms "0.7.3"
+
+debug@2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  dependencies:
+    ms "2.0.0"
+
+debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+defaults@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  dependencies:
+    clone "^1.0.2"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+del@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+depd@~1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+
+deprecated@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/deprecated/-/deprecated-0.0.1.tgz#f9c9af5464afa1e7a971458a8bdef2aa94d5bb19"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-file@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+dev-ip@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dev-ip/-/dev-ip-1.0.1.tgz#a76a3ed1855be7a012bb8ac16cb80f3c00dc28f0"
+
+diff@^3.2.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+
+domino@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.0.1.tgz#9e1d63215d0fe8dcb8202bff07effa1a216db504"
+
+duplexer2@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
+  dependencies:
+    readable-stream "~1.1.9"
+
+easy-extender@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/easy-extender/-/easy-extender-2.3.2.tgz#3d3248febe2b159607316d8f9cf491c16648221d"
+  dependencies:
+    lodash "^3.10.1"
+
+eazy-logger@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/eazy-logger/-/eazy-logger-3.0.2.tgz#a325aa5e53d13a2225889b2ac4113b2b9636f4fc"
+  dependencies:
+    tfunk "^3.0.1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+emitter-steward@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/emitter-steward/-/emitter-steward-1.0.0.tgz#f3411ade9758a7565df848b2da0cbbd1b46cbd64"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+end-of-stream@~0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-0.1.5.tgz#8e177206c3c80837d85632e8b9359dfe8b2f6eaf"
+  dependencies:
+    once "~1.3.0"
+
+engine.io-client@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.1.4.tgz#4fcf1370b47163bd2ce9be2733972430350d4ea1"
+  dependencies:
+    component-emitter "1.2.1"
+    component-inherit "0.0.3"
+    debug "~2.6.9"
+    engine.io-parser "~2.1.1"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "~3.3.1"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
+
+engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.2.tgz#4c0f4cff79aaeecbbdcfdea66a823c6085409196"
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "~0.0.7"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.4"
+    has-binary2 "~1.0.2"
+
+engine.io@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.1.4.tgz#3d0211b70a552ce841ffc7da8627b301a9a4162e"
+  dependencies:
+    accepts "1.3.3"
+    base64id "1.0.0"
+    cookie "0.3.1"
+    debug "~2.6.9"
+    engine.io-parser "~2.1.0"
+    ws "~3.3.1"
+  optionalDependencies:
+    uws "~0.14.4"
+
+error-ex@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+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.0, escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+etag@^1.8.1, etag@~1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+expand-tilde@^2.0.0, expand-tilde@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@3, extend@~3.0.0, extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extend@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+fancy-log@^1.1.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.2.tgz#f41125e3d84f2e7d89a43d06d958c8f78be16be1"
+  dependencies:
+    ansi-gray "^0.1.1"
+    color-support "^1.1.3"
+    time-stamp "^1.0.0"
+
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.0"
+    unpipe "~1.0.0"
+
+find-index@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+findup-sync@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc"
+  dependencies:
+    detect-file "^1.0.0"
+    is-glob "^3.1.0"
+    micromatch "^3.0.4"
+    resolve-dir "^1.0.1"
+
+fined@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fined/-/fined-1.1.0.tgz#b37dc844b76a2f5e7081e884f7c0ae344f153476"
+  dependencies:
+    expand-tilde "^2.0.2"
+    is-plain-object "^2.0.3"
+    object.defaults "^1.1.0"
+    object.pick "^1.2.0"
+    parse-filepath "^1.0.1"
+
+first-chunk-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz#59bfb50cd905f60d7c394cd3d9acaab4e6ad934e"
+
+flagged-respawn@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-1.0.0.tgz#4e79ae9b2eb38bf86b3bb56bf3e0a56aa5fcabd7"
+
+for-in@^1.0.1, for-in@^1.0.2:
+  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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    for-in "^1.0.1"
+
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  dependencies:
+    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.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"
+    mime-types "^2.1.12"
+
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  dependencies:
+    map-cache "^0.2.2"
+
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
+
+fresh@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+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 "^3.0.0"
+    universalify "^0.1.0"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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.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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+gaze@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-0.5.2.tgz#40b709537d24d1d45767db5a908689dfe69ac44f"
+  dependencies:
+    globule "~0.1.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob-stream@^3.1.5:
+  version "3.1.18"
+  resolved "https://registry.yarnpkg.com/glob-stream/-/glob-stream-3.1.18.tgz#9170a5f12b790306fdfe598f313f8f7954fd143b"
+  dependencies:
+    glob "^4.3.1"
+    glob2base "^0.0.12"
+    minimatch "^2.0.1"
+    ordered-read-streams "^0.1.0"
+    through2 "^0.6.1"
+    unique-stream "^1.0.0"
+
+glob-watcher@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/glob-watcher/-/glob-watcher-0.0.6.tgz#b95b4a8df74b39c83298b0c05c978b4d9a3b710b"
+  dependencies:
+    gaze "^0.5.1"
+
+glob2base@^0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/glob2base/-/glob2base-0.0.12.tgz#9d419b3e28f12e83a362164a277055922c9c0d56"
+  dependencies:
+    find-index "^0.1.1"
+
+glob@^4.3.1:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-4.5.3.tgz#c6cb73d3226c1efef04de3c56d012f03377ee15f"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^2.0.1"
+    once "^1.3.0"
+
+glob@^7.0.3, glob@^7.0.5, glob@^7.0.6:
+  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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@~3.1.21:
+  version "3.1.21"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-3.1.21.tgz#d29e0a055dea5138f4d07ed40e8982e83c2066cd"
+  dependencies:
+    graceful-fs "~1.2.0"
+    inherits "1"
+    minimatch "~0.2.11"
+
+global-modules@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
+  dependencies:
+    global-prefix "^1.0.1"
+    is-windows "^1.0.1"
+    resolve-dir "^1.0.0"
+
+global-prefix@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globule@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-0.1.0.tgz#d9c8edde1da79d125a151b79533b978676346ae5"
+  dependencies:
+    glob "~3.1.21"
+    lodash "~1.0.1"
+    minimatch "~0.2.11"
+
+glogg@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.1.tgz#dcf758e44789cc3f3d32c1f3562a3676e6a34810"
+  dependencies:
+    sparkles "^1.0.0"
+
+google-closure-compiler-linux@^20180716.0.0:
+  version "20180716.0.0"
+  resolved "https://registry.yarnpkg.com/google-closure-compiler-linux/-/google-closure-compiler-linux-20180716.0.0.tgz#b0dc9aa4751085b46002d6a300146df73fa87d35"
+
+google-closure-compiler-osx@^20180716.0.0:
+  version "20180716.0.0"
+  resolved "https://registry.yarnpkg.com/google-closure-compiler-osx/-/google-closure-compiler-osx-20180716.0.0.tgz#5691c07580578dfea3205e90a6a2968d23b85bd9"
+
+google-closure-compiler@20180716.0.0:
+  version "20180716.0.0"
+  resolved "https://registry.yarnpkg.com/google-closure-compiler/-/google-closure-compiler-20180716.0.0.tgz#620e50472ae57ae3c2f30076a5bbcb117f2be3b3"
+  dependencies:
+    chalk "^1.0.0"
+    gulp "^3.9.0"
+    vinyl "^2.0.1"
+    vinyl-sourcemaps-apply "^0.2.0"
+  optionalDependencies:
+    google-closure-compiler-linux "^20180716.0.0"
+    google-closure-compiler-osx "^20180716.0.0"
+
+graceful-fs@^3.0.0:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-3.0.11.tgz#7613c778a1afea62f25c630a086d7f3acbbdd818"
+  dependencies:
+    natives "^1.1.0"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+graceful-fs@~1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-1.2.3.tgz#15a4806a57547cb2d2dbf27f42e89a8c3451b364"
+
+gulp-util@^3.0.0:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
+  dependencies:
+    array-differ "^1.0.0"
+    array-uniq "^1.0.2"
+    beeper "^1.0.0"
+    chalk "^1.0.0"
+    dateformat "^2.0.0"
+    fancy-log "^1.1.0"
+    gulplog "^1.0.0"
+    has-gulplog "^0.1.0"
+    lodash._reescape "^3.0.0"
+    lodash._reevaluate "^3.0.0"
+    lodash._reinterpolate "^3.0.0"
+    lodash.template "^3.0.0"
+    minimist "^1.1.0"
+    multipipe "^0.1.2"
+    object-assign "^3.0.0"
+    replace-ext "0.0.1"
+    through2 "^2.0.0"
+    vinyl "^0.5.0"
+
+gulp@^3.9.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/gulp/-/gulp-3.9.1.tgz#571ce45928dd40af6514fc4011866016c13845b4"
+  dependencies:
+    archy "^1.0.0"
+    chalk "^1.0.0"
+    deprecated "^0.0.1"
+    gulp-util "^3.0.0"
+    interpret "^1.0.0"
+    liftoff "^2.1.0"
+    minimist "^1.1.0"
+    orchestrator "^0.3.0"
+    pretty-hrtime "^1.0.0"
+    semver "^4.1.0"
+    tildify "^1.0.0"
+    v8flags "^2.0.2"
+    vinyl-fs "^0.3.0"
+
+gulplog@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gulplog/-/gulplog-1.0.0.tgz#e28c4d45d05ecbbed818363ce8f9c5926229ffe5"
+  dependencies:
+    glogg "^1.0.0"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+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"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary2@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.2.tgz#e83dba49f0b9be4d026d27365350d9f03f54be98"
+  dependencies:
+    isarray "2.0.1"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-gulplog@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce"
+  dependencies:
+    sparkles "^1.0.0"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+hoek@4.x.x:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
+
+homedir-polyfill@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  dependencies:
+    parse-passwd "^1.0.0"
+
+hosted-git-info@^2.1.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+
+http-errors@~1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+  dependencies:
+    inherits "2.0.3"
+    setprototypeof "1.0.2"
+    statuses ">= 1.3.1 < 2"
+
+http-errors@~1.6.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-proxy@1.15.2:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.15.2.tgz#642fdcaffe52d3448d2bda3b0079e9409064da31"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-proxy-agent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+immutable@3.8.2, immutable@^3.7.6:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-1.0.2.tgz#ca4309dadee6b54cc0b8d247e8d7c7a0975bdc9b"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+interpret@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+is-absolute@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
+  dependencies:
+    is-relative "^1.0.0"
+    is-windows "^1.0.1"
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+is-dotfile@^1.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-extglob@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-number-like@^1.0.3:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/is-number-like/-/is-number-like-1.0.8.tgz#2e129620b50891042e44e9bbbb30593e75cfbbe3"
+  dependencies:
+    lodash.isfinite "^3.3.2"
+
+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-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-relative@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
+  dependencies:
+    is-unc-path "^1.0.0"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-unc-path@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-1.0.0.tgz#d731e8898ed090a12c352ad2eaed5095ad322c9d"
+  dependencies:
+    unc-path-regex "^0.1.2"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+is-windows@^1.0.1, is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+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"
+
+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"
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jasmine-core@~2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
+
+jasmine-diff@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/jasmine-diff/-/jasmine-diff-0.1.3.tgz#93ccc2dcc41028c5ddd4606558074839f2deeaa8"
+  dependencies:
+    diff "^3.2.0"
+
+jasmine@^2.5.3:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.8.0.tgz#6b089c0a11576b1f16df11b80146d91d4e8b8a3e"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.8.0"
+
+jasminewd2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+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"
+
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  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"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    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"
+
+kind-of@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+liftoff@^2.1.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-2.5.0.tgz#2009291bb31cea861bbf10a7c15a28caf75c31ec"
+  dependencies:
+    extend "^3.0.0"
+    findup-sync "^2.0.0"
+    fined "^1.0.1"
+    flagged-respawn "^1.0.0"
+    is-plain-object "^2.0.4"
+    object.map "^1.0.0"
+    rechoir "^0.6.2"
+    resolve "^1.1.7"
+
+limiter@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.2.tgz#229d8055891c8b11af9e0ee5200e8e09bb3dcbeb"
+
+lite-server@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/lite-server/-/lite-server-2.2.2.tgz#4644afe6c9146d850cfa0ad9a86a94f87156499e"
+  dependencies:
+    browser-sync "^2.12.3"
+    connect-history-api-fallback "^1.2.0"
+    connect-logger "0.0.1"
+    lodash "^4.11.1"
+    minimist "1.2.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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+localtunnel@1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/localtunnel/-/localtunnel-1.8.3.tgz#dcc5922fd85651037d4bde24fd93248d0b24eb05"
+  dependencies:
+    debug "2.6.8"
+    openurl "1.1.1"
+    request "2.81.0"
+    yargs "3.29.0"
+
+lodash._basecopy@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+
+lodash._basetostring@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz#d1861d877f824a52f669832dcaf3ee15566a07d5"
+
+lodash._basevalues@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz#5b775762802bde3d3297503e26300820fdf661b7"
+
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+
+lodash._isiterateecall@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
+
+lodash._reescape@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reescape/-/lodash._reescape-3.0.0.tgz#2b1d6f5dfe07c8a355753e5f27fac7f1cde1616a"
+
+lodash._reevaluate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz#58bc74c40664953ae0b124d806996daca431e2ed"
+
+lodash._reinterpolate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+
+lodash._root@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
+
+lodash.escape@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
+  dependencies:
+    lodash._root "^3.0.0"
+
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+
+lodash.isfinite@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
+
+lodash.keys@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
+lodash.restparam@^3.0.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
+
+lodash.template@^3.0.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-3.6.2.tgz#f8cdecc6169a255be9098ae8b0c53d378931d14f"
+  dependencies:
+    lodash._basecopy "^3.0.0"
+    lodash._basetostring "^3.0.0"
+    lodash._basevalues "^3.0.0"
+    lodash._isiterateecall "^3.0.0"
+    lodash._reinterpolate "^3.0.0"
+    lodash.escape "^3.0.0"
+    lodash.keys "^3.0.0"
+    lodash.restparam "^3.0.0"
+    lodash.templatesettings "^3.0.0"
+
+lodash.templatesettings@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz#fb307844753b66b9f1afa54e262c745307dba8e5"
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.escape "^3.0.0"
+
+lodash@^3.10.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+lodash@^4.11.1, lodash@^4.5.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+lodash@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-1.0.2.tgz#8f57560c83b59fc270bd3d561b690043430e2551"
+
+lru-cache@2:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952"
+
+magic-string@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.0.tgz#1f3696f9931ff0a1ed4c132250529e19cad6759b"
+  dependencies:
+    sourcemap-codec "^1.4.1"
+
+make-iterator@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/make-iterator/-/make-iterator-1.0.1.tgz#29b33f312aa8f547c4a5e490f56afcec99133ad6"
+  dependencies:
+    kind-of "^6.0.2"
+
+map-cache@^0.2.0, map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  dependencies:
+    object-visit "^1.0.0"
+
+micromatch@2.3.11, micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+micromatch@^3.0.4:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+minimatch@^2.0.1:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-2.0.10.tgz#8d087c39c6b38c001b97fca7ce6d0e1e80afbac7"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+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.1.7"
+
+minimatch@~0.2.11:
+  version "0.2.14"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-0.2.14.tgz#c74e780574f63c6f9a090e90efbe6ef53a6a756a"
+  dependencies:
+    lru-cache "2"
+    sigmund "~1.0.0"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@1.2.0, minimist@^1.1.0, 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-deep@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.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@*:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+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"
+
+multipipe@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-0.1.2.tgz#2a8f2ddf70eed564dff2d57f1e1a137d9f05078b"
+  dependencies:
+    duplexer2 "0.0.2"
+
+nan@^2.3.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+natives@^1.1.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.4.tgz#2f0f224fc9a7dd53407c7667c84cf8dbe773de58"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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"
+
+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"
+
+normalize-package-data@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  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.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"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+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"
+
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+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:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-path@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.9.2.tgz#0fd9a74fc5fad1ae3968b586bda5c632bd6c05a5"
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  dependencies:
+    isobject "^3.0.0"
+
+object.defaults@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.defaults/-/object.defaults-1.1.0.tgz#3a7f868334b407dea06da16d88d5cd29e435fecf"
+  dependencies:
+    array-each "^1.0.1"
+    array-slice "^1.0.0"
+    for-own "^1.0.0"
+    isobject "^3.0.0"
+
+object.map@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object.map/-/object.map-1.0.1.tgz#cf83e59dc8fcc0ad5f4250e1f78b3b81bd801d37"
+  dependencies:
+    for-own "^1.0.0"
+    make-iterator "^1.0.0"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+object.pick@^1.2.0, object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  dependencies:
+    isobject "^3.0.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+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:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  dependencies:
+    wrappy "1"
+
+openurl@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.1.tgz#3875b4b0ef7a52c156f0db41d4609dbb0f94b387"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+orchestrator@^0.3.0:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/orchestrator/-/orchestrator-0.3.8.tgz#14e7e9e2764f7315fbac184e506c7aa6df94ad7e"
+  dependencies:
+    end-of-stream "~0.1.5"
+    sequencify "~0.0.7"
+    stream-consume "~0.1.0"
+
+ordered-read-streams@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz#fd565a9af8eb4473ba69b6ed8a34352cb552f126"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+parse-filepath@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-filepath/-/parse-filepath-1.0.2.tgz#a632127f53aaf3d15876f5872f3ffac763d6c891"
+  dependencies:
+    is-absolute "^1.0.0"
+    map-cache "^0.2.0"
+    path-root "^0.1.1"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.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"
+
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+
+parseqs@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+path-root-regex@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/path-root-regex/-/path-root-regex-0.1.2.tgz#bfccdc8df5b12dc52c8b43ec38d18d72c04ba96d"
+
+path-root@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/path-root/-/path-root-0.1.1.tgz#9a4a6814cac1c0cd73360a95f32083c8ea4745b7"
+  dependencies:
+    path-root-regex "^0.1.0"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^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"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+portscanner@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/portscanner/-/portscanner-2.1.1.tgz#eabb409e4de24950f5a2a516d35ae769343fbb96"
+  dependencies:
+    async "1.5.2"
+    is-number-like "^1.0.3"
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+pretty-hrtime@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+
+process-nextick-args@^1.0.6, process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+"protractor@file:../../node_modules/protractor":
+  version "5.1.2"
+  dependencies:
+    "@types/node" "^6.0.46"
+    "@types/q" "^0.0.32"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "0.0.5"
+    chalk "^1.1.3"
+    glob "^7.0.3"
+    jasmine "^2.5.3"
+    jasminewd2 "^2.1.0"
+    optimist "~0.6.0"
+    q "1.4.1"
+    saucelabs "~1.3.0"
+    selenium-webdriver "3.0.1"
+    source-map-support "~0.4.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+q@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+q@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qs@6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.1.tgz#ce03c5ff0935bc1d9d69a9f14cbd18e568d67625"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    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.1.7:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.3.tgz#51575a900f8dd68381c710b4712c2154c3e2035b"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+"readable-stream@>=1.0.33-1 <1.1.0-0":
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@~1.1.9:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readdirp@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  dependencies:
+    resolve "^1.1.6"
+
+reflect-metadata@^0.1.2:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.10.tgz#b4f83704416acad89988c9b15635d47e03b9344a"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2, repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+replace-ext@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
+
+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.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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+request@^2.78.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.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-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"
+
+requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve-dir@^1.0.0, resolve-dir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
+  dependencies:
+    expand-tilde "^2.0.0"
+    global-modules "^1.0.0"
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+
+resolve@^1.1.6, resolve@^1.1.7:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
+  dependencies:
+    path-parse "^1.0.5"
+
+resp-modifier@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/resp-modifier/-/resp-modifier-6.0.2.tgz#b124de5c4fbafcba541f48ffa73970f4aa456b4f"
+  dependencies:
+    debug "^2.2.0"
+    minimatch "^3.0.2"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+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@file:../../node_modules/rxjs":
+  version "6.0.0"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  dependencies:
+    ret "~0.1.10"
+
+saucelabs@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.3.0.tgz#d240e8009df7fa87306ec4578a69ba3b5c424fee"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+
+sax@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
+
+sax@>=0.6.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+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:
+    adm-zip "0.4.4"
+    rimraf "^2.2.8"
+    tmp "0.0.24"
+    ws "^1.0.1"
+    xml2js "0.4.4"
+
+"semver@2 || 3 || 4 || 5", semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+semver@^4.1.0:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
+
+semver@~5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
+
+send@0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.2.tgz#f91fab4403bcf87e716f70ceb5db2f578bdc17d6"
+  dependencies:
+    debug "2.6.4"
+    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 "1.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.1"
+
+sequencify@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/sequencify/-/sequencify-0.0.7.tgz#90cff19d02e07027fd767f5ead3e7b95d1e7380c"
+
+serve-index@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.8.0.tgz#7c5d96c13fb131101f93c1c5774f8516a1e78d3b"
+  dependencies:
+    accepts "~1.3.3"
+    batch "0.5.3"
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    http-errors "~1.5.0"
+    mime-types "~2.1.11"
+    parseurl "~1.3.1"
+
+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.2"
+
+server-destroy@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+set-value@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.1"
+    to-object-path "^0.3.0"
+
+set-value@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+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"
+
+sigmund@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
+socket.io-adapter@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
+
+socket.io-client@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.0.4.tgz#0918a552406dc5e540b380dcd97afc4a64332f8e"
+  dependencies:
+    backo2 "1.0.2"
+    base64-arraybuffer "0.1.5"
+    component-bind "1.0.0"
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    engine.io-client "~3.1.0"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    socket.io-parser "~3.1.1"
+    to-array "0.1.4"
+
+socket.io-parser@~3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.1.2.tgz#dbc2282151fc4faebbe40aeedc0772eba619f7f2"
+  dependencies:
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    has-binary2 "~1.0.2"
+    isarray "2.0.1"
+
+socket.io@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.0.4.tgz#c1a4590ceff87ecf13c72652f046f716b29e6014"
+  dependencies:
+    debug "~2.6.6"
+    engine.io "~3.1.0"
+    socket.io-adapter "~1.1.0"
+    socket.io-client "2.0.4"
+    socket.io-parser "~3.1.1"
+
+source-map-resolve@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
+  dependencies:
+    atob "^2.1.1"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.3.tgz#2b3d5fff298cfa4d1afd7d4352d569e9a0158e76"
+  dependencies:
+    source-map "^0.6.0"
+
+source-map-support@~0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+
+source-map@^0.5.1, source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+source-map@^0.6.0, source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+sourcemap-codec@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.1.tgz#c8fd92d91889e902a07aee392bdd2c5863958ba2"
+
+sparkles@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.1.tgz#008db65edce6c50eec0c5e228e1945061dd0437c"
+
+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"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+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"
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  dependencies:
+    extend-shallow "^3.0.0"
+
+sshpk@^1.7.0:
+  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"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+"statuses@>= 1.3.1 < 2":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+statuses@~1.3.0, statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+stream-consume@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/stream-consume/-/stream-consume-0.1.1.tgz#d3bdb598c2bd0ae82b8cac7ac50b1107a7996c48"
+
+stream-throttle@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/stream-throttle/-/stream-throttle-0.1.3.tgz#add57c8d7cc73a81630d31cd55d3961cfafba9c3"
+  dependencies:
+    commander "^2.2.0"
+    limiter "^1.0.5"
+
+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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.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.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4, stringstream@~0.0.5:
+  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-bom@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-1.0.0.tgz#85b8862f3844b5a6d5ec8467a93598173a36f794"
+  dependencies:
+    first-chunk-stream "^1.0.0"
+    is-utf8 "^0.2.0"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.0"
+
+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"
+
+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"
+
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  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"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+tfunk@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-3.1.0.tgz#38e4414fc64977d87afdaa72facb6d29f82f7b5b"
+  dependencies:
+    chalk "^1.1.1"
+    object-path "^0.9.0"
+
+through2@^0.6.1:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-0.6.5.tgz#41ab9c67b29d57209071410e1d7a7a968cd3ad48"
+  dependencies:
+    readable-stream ">=1.0.33-1 <1.1.0-0"
+    xtend ">=4.0.0 <4.1.0-0"
+
+through2@^2.0.0, through2@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  dependencies:
+    readable-stream "^2.1.5"
+    xtend "~4.0.1"
+
+tildify@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tildify/-/tildify-1.2.0.tgz#dcec03f55dca9b7aa3e5b04f21817eb56e63588a"
+  dependencies:
+    os-homedir "^1.0.0"
+
+time-stamp@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
+
+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"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+tree-kill@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36"
+
+tsickle@^0.32.1:
+  version "0.32.1"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.32.1.tgz#f16e94ba80b32fc9ebe320dc94fbc2ca7f3521a5"
+  dependencies:
+    jasmine-diff "^0.1.3"
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
+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"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+"typescript@file:../../node_modules/typescript":
+  version "2.9.2"
+
+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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+
+unc-path-regex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+
+union-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^0.4.3"
+
+unique-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-1.0.0.tgz#d59a4a75427447d9aa6c91e70263f8d26a4b104b"
+
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+
+user-home@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+uuid@^3.0.0, uuid@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+uws@~0.14.4:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/uws/-/uws-0.14.5.tgz#67aaf33c46b2a587a5f6666d00f7691328f149dc"
+
+v8flags@^2.0.2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
+  dependencies:
+    user-home "^1.1.1"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vinyl-fs@^0.3.0:
+  version "0.3.14"
+  resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-0.3.14.tgz#9a6851ce1cac1c1cea5fe86c0931d620c2cfa9e6"
+  dependencies:
+    defaults "^1.0.0"
+    glob-stream "^3.1.5"
+    glob-watcher "^0.0.6"
+    graceful-fs "^3.0.0"
+    mkdirp "^0.5.0"
+    strip-bom "^1.0.0"
+    through2 "^0.6.1"
+    vinyl "^0.4.0"
+
+vinyl-sourcemaps-apply@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705"
+  dependencies:
+    source-map "^0.5.1"
+
+vinyl@^0.4.0:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.4.6.tgz#2f356c87a550a255461f36bbeb2a5ba8bf784847"
+  dependencies:
+    clone "^0.2.0"
+    clone-stats "^0.0.1"
+
+vinyl@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.5.3.tgz#b0455b38fc5e0cf30d4325132e461970c2091cde"
+  dependencies:
+    clone "^1.0.0"
+    clone-stats "^0.0.1"
+    replace-ext "0.0.1"
+
+vinyl@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.1.0.tgz#021f9c2cf951d6b939943c89eb5ee5add4fd924c"
+  dependencies:
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
+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"
+    del "^2.2.0"
+    glob "^7.0.3"
+    ini "^1.3.4"
+    minimist "^1.2.0"
+    q "^1.4.1"
+    request "^2.78.0"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+    xml2js "^0.4.17"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+which@^1.2.14:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  dependencies:
+    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"
+
+window-size@^0.1.2:
+  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"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+ws@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.5.tgz#cbd9e6e75e09fc5d2c90015f21f0c40875e0dd51"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
+ws@~3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
+xhr2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.4.tgz#7f87658847716db5026323812f818cadab387a5f"
+
+xml2js@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.4.tgz#3111010003008ae19240eba17497b57c729c555d"
+  dependencies:
+    sax "0.6.x"
+    xmlbuilder ">=1.0.0"
+
+xml2js@^0.4.17:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"
+
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+
+"xtend@>=4.0.0 <4.1.0-0", xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+y18n@^3.2.0, y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yargs-parser@^4.1.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@3.29.0:
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.29.0.tgz#1aab9660eae79d8b8f675bcaeeab6ee34c2cf69c"
+  dependencies:
+    camelcase "^1.2.1"
+    cliui "^3.0.3"
+    decamelize "^1.0.0"
+    os-locale "^1.4.0"
+    window-size "^0.1.2"
+    y18n "^3.2.0"
+
+yargs@6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.4.0.tgz#816e1a866d5598ccf34e5596ddce22d92da490d4"
+  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"
+    window-size "^0.2.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.1.0"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+"zone.js@file:../../node_modules/zone.js":
+  version "0.8.26"
diff --git a/integration/hello_world__systemjs_umd/.gitignore b/integration/hello_world__systemjs_umd/.gitignore
new file mode 100644
index 000000000000..8168095bad3b
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/.gitignore
@@ -0,0 +1,3 @@
+**/*.js
+**/*.js.map
+!src/systemjs.config.js
\ No newline at end of file
diff --git a/integration/hello_world__systemjs_umd/bs-config.e2e.json b/integration/hello_world__systemjs_umd/bs-config.e2e.json
new file mode 100644
index 000000000000..042cbc20447a
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/bs-config.e2e.json
@@ -0,0 +1,14 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8000,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}
\ No newline at end of file
diff --git a/integration/hello_world__systemjs_umd/e2e/app.e2e-spec.ts b/integration/hello_world__systemjs_umd/e2e/app.e2e-spec.ts
new file mode 100644
index 000000000000..fc5341db263d
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/e2e/app.e2e-spec.ts
@@ -0,0 +1,8 @@
+import { browser, element, by } from 'protractor';
+
+describe('Hello world E2E Tests', function () {
+  it('should display: Hello world!', function () {
+    browser.get('');
+    expect(element(by.css('div')).getText()).toEqual('Hello world!');
+  });
+});
\ No newline at end of file
diff --git a/integration/hello_world__systemjs_umd/e2e/tsconfig.json b/integration/hello_world__systemjs_umd/e2e/tsconfig.json
new file mode 100644
index 000000000000..dc9bfefe8738
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/e2e/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "types": [
+      "jasmine"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/integration/hello_world__systemjs_umd/package.json b/integration/hello_world__systemjs_umd/package.json
new file mode 100644
index 000000000000..6b53c8326bfe
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "angular-integration",
+  "description": "Ensure SystemJS ^0.22 UMD compatibility via __esModule flag.",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG",
+    "test": "concurrently \"yarn serve\" \"yarn protractor\" --kill-others --success first",
+    "serve": "lite-server -c bs-config.e2e.json",
+    "preprotractor": "tsc -p e2e",
+    "protractor": "protractor protractor.config.js"
+  },
+  "dependencies": {
+    "@angular/common": "file:../../dist/packages-dist/common",
+    "@angular/core": "file:../../dist/packages-dist/core",
+    "@angular/compiler": "file:../../dist/packages-dist/compiler",
+    "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
+    "core-js": "file:../../node_modules/core-js",
+    "plugin-typescript": "8.0.0",
+    "rxjs": "file:../../node_modules/rxjs",
+    "systemjs": "0.20.2",
+    "typescript": "file:../../node_modules/typescript",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "devDependencies": {
+    "@types/jasmine": "2.5.41",
+    "concurrently": "3.4.0",
+    "lite-server": "2.2.2",
+    "protractor": "file:../../node_modules/protractor"
+  }
+}
diff --git a/integration/hello_world__systemjs_umd/protractor.config.js b/integration/hello_world__systemjs_umd/protractor.config.js
new file mode 100644
index 000000000000..906d87e2e114
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/protractor.config.js
@@ -0,0 +1,16 @@
+exports.config = {
+  specs: [
+    './e2e/**/*.e2e-spec.js'
+  ],
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      'args': ['--no-sandbox'],
+      'binary': process.env.CHROME_BIN,
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:8000/',
+  framework: 'jasmine',
+  useAllAngular2AppRoots: true,
+};
diff --git a/integration/hello_world__systemjs_umd/src/app/app.ts b/integration/hello_world__systemjs_umd/src/app/app.ts
new file mode 100644
index 000000000000..31ecac712b0d
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/src/app/app.ts
@@ -0,0 +1,11 @@
+import {HelloWorldComponent} from './hello-world.component';
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [HelloWorldComponent],
+  bootstrap: [HelloWorldComponent],
+  imports: [BrowserModule],
+})
+export class AppModule {}
diff --git a/integration/hello_world__systemjs_umd/src/app/hello-world.component.ts b/integration/hello_world__systemjs_umd/src/app/hello-world.component.ts
new file mode 100644
index 000000000000..ce2f219a47d2
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/src/app/hello-world.component.ts
@@ -0,0 +1,10 @@
+import {Component, Injectable} from '@angular/core';
+
+@Component({
+  selector: 'hello-world-app',
+  template: '<div>Hello {{ name }}!</div>',
+})
+@Injectable()
+export class HelloWorldComponent {
+  name: string = 'world';
+}
diff --git a/integration/hello_world__systemjs_umd/src/index.html b/integration/hello_world__systemjs_umd/src/index.html
new file mode 100644
index 000000000000..c28b0922734b
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/src/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Hello World</title>
+  <base href="/">
+  <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/systemjs/dist/system.src.js"></script>
+  <script src="systemjs.config.js"></script>
+  <script>
+    System.import('main.ts').catch(function (err) { console.error(err); });
+  </script>
+</head>
+
+<body>
+  <hello-world-app>Loading...</hello-world-app>
+</body>
+
+</html>
diff --git a/integration/hello_world__systemjs_umd/src/main.ts b/integration/hello_world__systemjs_umd/src/main.ts
new file mode 100644
index 000000000000..3c618b1246e3
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/src/main.ts
@@ -0,0 +1,4 @@
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {AppModule} from './app/app';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/integration/hello_world__systemjs_umd/src/systemjs.config.js b/integration/hello_world__systemjs_umd/src/systemjs.config.js
new file mode 100644
index 000000000000..9f4c143296fb
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/src/systemjs.config.js
@@ -0,0 +1,45 @@
+(function (global) {
+  SystemJS.typescriptOptions = {
+    "target": "es5",
+    "module": "system",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  };
+  System.config({
+    transpiler: 'ts',
+    meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+      'npm:': 'node_modules/'
+    },
+    map: {
+      app: 'app',
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js',
+      '@angular/platform-browser':
+         'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js',
+      '@angular/platform-browser-dynamic':
+         'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
+      'rxjs': 'npm:rxjs',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
+      'ts': 'npm:plugin-typescript/lib/plugin.js',
+      'typescript': 'npm:typescript/lib/typescript.js',
+    },
+    packages: {
+      'app': { defaultExtension: 'ts' },
+      'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },
+      'rxjs': { main: 'index.js', defaultExtension: 'js' },
+    }
+  });
+})(this);
\ No newline at end of file
diff --git a/integration/hello_world__systemjs_umd/src/tsconfig.json b/integration/hello_world__systemjs_umd/src/tsconfig.json
new file mode 100644
index 000000000000..afd210825fcd
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/src/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "system",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}
\ No newline at end of file
diff --git a/integration/hello_world__systemjs_umd/yarn.lock b/integration/hello_world__systemjs_umd/yarn.lock
new file mode 100644
index 000000000000..03ca236930c6
--- /dev/null
+++ b/integration/hello_world__systemjs_umd/yarn.lock
@@ -0,0 +1,2332 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular/common@file:../../dist/packages-dist/common":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler@file:../../dist/packages-dist/compiler":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@file:../../dist/packages-dist/core":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser-dynamic@file:../../dist/packages-dist/platform-browser-dynamic":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@types/jasmine@2.5.41":
+  version "2.5.41"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.41.tgz#d5e86161a0af80d52062b310a33ed65b051a0713"
+
+"@types/node@^6.0.46":
+  version "6.0.96"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.96.tgz#7bf0bf40d6ce51e93762cc47d010c8cc5ebb2179"
+
+"@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.43"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz#2de3d718819bc20165754c4a59afb7e9833f6707"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+accepts@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+accepts@~1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  dependencies:
+    mime-types "~2.1.16"
+    negotiator "0.6.1"
+
+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:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
+
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+
+agent-base@2:
+  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"
+
+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.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+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"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  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.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+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"
+
+async-each-series@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/async-each-series/-/async-each-series-0.1.1.tgz#7617c1917401fd8ca4a28aadce3dbae98afeb432"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
+async@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base64-arraybuffer@0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+
+base64id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
+
+batch@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+binary-extensions@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  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"
+
+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"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+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 "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browser-sync-ui@v1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-1.0.1.tgz#9740527b26d1d7ace259acc0c79e5b5e37d0fdf2"
+  dependencies:
+    async-each-series "0.1.1"
+    connect-history-api-fallback "^1.1.0"
+    immutable "^3.7.6"
+    server-destroy "1.0.1"
+    socket.io-client "2.0.4"
+    stream-throttle "^0.1.3"
+
+browser-sync@^2.12.3:
+  version "2.23.5"
+  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.23.5.tgz#088bc5c3bb4dfc1507bad0278f140d8060fe4299"
+  dependencies:
+    browser-sync-ui v1.0.1
+    bs-recipes "1.3.4"
+    chokidar "1.7.0"
+    connect "3.5.0"
+    connect-history-api-fallback "^1.5.0"
+    dev-ip "^1.0.1"
+    easy-extender "2.3.2"
+    eazy-logger "3.0.2"
+    emitter-steward "^1.0.0"
+    etag "^1.8.1"
+    fresh "^0.5.2"
+    fs-extra "3.0.1"
+    http-proxy "1.15.2"
+    immutable "3.8.2"
+    localtunnel "1.8.3"
+    micromatch "2.3.11"
+    opn "4.0.2"
+    portscanner "2.1.1"
+    qs "6.2.1"
+    resp-modifier "6.0.2"
+    rx "4.1.0"
+    serve-index "1.8.0"
+    serve-static "1.12.2"
+    server-destroy "1.0.1"
+    socket.io "2.0.4"
+    ua-parser-js "0.7.12"
+    yargs "6.4.0"
+
+bs-recipes@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.3.4.tgz#0d2d4d48a718c8c044769fdc4f89592dc8b69585"
+
+builtin-modules@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+camelcase@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+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"
+  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.1.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chokidar@1.7.0:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+cliui@^3.0.3, cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+
+commander@^2.2.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+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"
+
+connect-history-api-fallback@^1.1.0, connect-history-api-fallback@^1.2.0, connect-history-api-fallback@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
+
+connect-logger@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/connect-logger/-/connect-logger-0.0.1.tgz#4d999978a1d20bb4608e7cd434d741652255174b"
+  dependencies:
+    moment "*"
+
+connect@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.5.0.tgz#b357525a0b4c1f50599cd983e1d9efeea9677198"
+  dependencies:
+    debug "~2.2.0"
+    finalhandler "0.5.0"
+    parseurl "~1.3.1"
+    utils-merge "1.0.0"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+"core-js@file:../../node_modules/core-js":
+  version "2.5.1"
+
+core-util-is@1.0.2, 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"
+
+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"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-fns@^1.23.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+
+debug@2, debug@^2.2.0, debug@~2.6.4, debug@~2.6.6, debug@~2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
+  dependencies:
+    ms "0.7.3"
+
+debug@2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  dependencies:
+    ms "2.0.0"
+
+debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+del@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+depd@~1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+dev-ip@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dev-ip/-/dev-ip-1.0.1.tgz#a76a3ed1855be7a012bb8ac16cb80f3c00dc28f0"
+
+easy-extender@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/easy-extender/-/easy-extender-2.3.2.tgz#3d3248febe2b159607316d8f9cf491c16648221d"
+  dependencies:
+    lodash "^3.10.1"
+
+eazy-logger@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/eazy-logger/-/eazy-logger-3.0.2.tgz#a325aa5e53d13a2225889b2ac4113b2b9636f4fc"
+  dependencies:
+    tfunk "^3.0.1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+emitter-steward@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/emitter-steward/-/emitter-steward-1.0.0.tgz#f3411ade9758a7565df848b2da0cbbd1b46cbd64"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+engine.io-client@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.1.4.tgz#4fcf1370b47163bd2ce9be2733972430350d4ea1"
+  dependencies:
+    component-emitter "1.2.1"
+    component-inherit "0.0.3"
+    debug "~2.6.9"
+    engine.io-parser "~2.1.1"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "~3.3.1"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
+
+engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.2.tgz#4c0f4cff79aaeecbbdcfdea66a823c6085409196"
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "~0.0.7"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.4"
+    has-binary2 "~1.0.2"
+
+engine.io@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.1.4.tgz#3d0211b70a552ce841ffc7da8627b301a9a4162e"
+  dependencies:
+    accepts "1.3.3"
+    base64id "1.0.0"
+    cookie "0.3.1"
+    debug "~2.6.9"
+    engine.io-parser "~2.1.0"
+    ws "~3.3.1"
+  optionalDependencies:
+    uws "~0.14.4"
+
+error-ex@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+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.0, escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+etag@^1.8.1, etag@~1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@3, extend@~3.0.0, extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.0"
+    unpipe "~1.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    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.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"
+    mime-types "^2.1.12"
+
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
+
+fresh@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+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 "^3.0.0"
+    universalify "^0.1.0"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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.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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.3, glob@^7.0.5, glob@^7.0.6:
+  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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+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"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary2@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.2.tgz#e83dba49f0b9be4d026d27365350d9f03f54be98"
+  dependencies:
+    isarray "2.0.1"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+hoek@4.x.x:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
+
+hosted-git-info@^2.1.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+
+http-errors@~1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+  dependencies:
+    inherits "2.0.3"
+    setprototypeof "1.0.2"
+    statuses ">= 1.3.1 < 2"
+
+http-errors@~1.6.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-proxy@1.15.2:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.15.2.tgz#642fdcaffe52d3448d2bda3b0079e9409064da31"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-proxy-agent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+immutable@3.8.2, immutable@^3.7.6:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-dotfile@^1.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-number-like@^1.0.3:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/is-number-like/-/is-number-like-1.0.8.tgz#2e129620b50891042e44e9bbbb30593e75cfbbe3"
+  dependencies:
+    lodash.isfinite "^3.3.2"
+
+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-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+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"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jasmine-core@~2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
+
+jasmine@^2.5.3:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.8.0.tgz#6b089c0a11576b1f16df11b80146d91d4e8b8a3e"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.8.0"
+
+jasminewd2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+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"
+
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  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"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+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"
+
+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"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+limiter@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.2.tgz#229d8055891c8b11af9e0ee5200e8e09bb3dcbeb"
+
+lite-server@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/lite-server/-/lite-server-2.2.2.tgz#4644afe6c9146d850cfa0ad9a86a94f87156499e"
+  dependencies:
+    browser-sync "^2.12.3"
+    connect-history-api-fallback "^1.2.0"
+    connect-logger "0.0.1"
+    lodash "^4.11.1"
+    minimist "1.2.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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+localtunnel@1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/localtunnel/-/localtunnel-1.8.3.tgz#dcc5922fd85651037d4bde24fd93248d0b24eb05"
+  dependencies:
+    debug "2.6.8"
+    openurl "1.1.1"
+    request "2.81.0"
+    yargs "3.29.0"
+
+lodash.isfinite@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
+
+lodash@^3.10.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+lodash@^4.11.1, lodash@^4.5.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+micromatch@2.3.11, micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+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.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@1.2.0, 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"
+
+"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@*:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+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"
+
+nan@^2.3.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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"
+
+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"
+
+normalize-package-data@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  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.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"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+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"
+
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-path@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.9.2.tgz#0fd9a74fc5fad1ae3968b586bda5c632bd6c05a5"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+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"
+
+openurl@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.1.tgz#3875b4b0ef7a52c156f0db41d4609dbb0f94b387"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.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"
+
+parseqs@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^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"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+plugin-typescript@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/plugin-typescript/-/plugin-typescript-8.0.0.tgz#b47a9e6a93e17e835b5c1a38cf7d81d42a84e1ee"
+
+portscanner@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/portscanner/-/portscanner-2.1.1.tgz#eabb409e4de24950f5a2a516d35ae769343fbb96"
+  dependencies:
+    async "1.5.2"
+    is-number-like "^1.0.3"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+"protractor@file:../../node_modules/protractor":
+  version "5.1.2"
+  dependencies:
+    "@types/node" "^6.0.46"
+    "@types/q" "^0.0.32"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "0.0.5"
+    chalk "^1.1.3"
+    glob "^7.0.3"
+    jasmine "^2.5.3"
+    jasminewd2 "^2.1.0"
+    optimist "~0.6.0"
+    q "1.4.1"
+    saucelabs "~1.3.0"
+    selenium-webdriver "3.0.1"
+    source-map-support "~0.4.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+q@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+q@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qs@6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.1.tgz#ce03c5ff0935bc1d9d69a9f14cbd18e568d67625"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    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.1.7:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.3.tgz#51575a900f8dd68381c710b4712c2154c3e2035b"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+request@^2.78.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.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-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"
+
+requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resp-modifier@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/resp-modifier/-/resp-modifier-6.0.2.tgz#b124de5c4fbafcba541f48ffa73970f4aa456b4f"
+  dependencies:
+    debug "^2.2.0"
+    minimatch "^3.0.2"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+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@file:../../node_modules/rxjs":
+  version "6.0.0-alpha.4"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+saucelabs@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.3.0.tgz#d240e8009df7fa87306ec4578a69ba3b5c424fee"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+
+sax@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
+
+sax@>=0.6.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+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:
+    adm-zip "0.4.4"
+    rimraf "^2.2.8"
+    tmp "0.0.24"
+    ws "^1.0.1"
+    xml2js "0.4.4"
+
+"semver@2 || 3 || 4 || 5", semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+semver@~5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
+
+send@0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.2.tgz#f91fab4403bcf87e716f70ceb5db2f578bdc17d6"
+  dependencies:
+    debug "2.6.4"
+    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 "1.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:
+    accepts "~1.3.3"
+    batch "0.5.3"
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    http-errors "~1.5.0"
+    mime-types "~2.1.11"
+    parseurl "~1.3.1"
+
+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.2"
+
+server-destroy@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
+socket.io-adapter@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
+
+socket.io-client@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.0.4.tgz#0918a552406dc5e540b380dcd97afc4a64332f8e"
+  dependencies:
+    backo2 "1.0.2"
+    base64-arraybuffer "0.1.5"
+    component-bind "1.0.0"
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    engine.io-client "~3.1.0"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    socket.io-parser "~3.1.1"
+    to-array "0.1.4"
+
+socket.io-parser@~3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.1.2.tgz#dbc2282151fc4faebbe40aeedc0772eba619f7f2"
+  dependencies:
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    has-binary2 "~1.0.2"
+    isarray "2.0.1"
+
+socket.io@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.0.4.tgz#c1a4590ceff87ecf13c72652f046f716b29e6014"
+  dependencies:
+    debug "~2.6.6"
+    engine.io "~3.1.0"
+    socket.io-adapter "~1.1.0"
+    socket.io-client "2.0.4"
+    socket.io-parser "~3.1.1"
+
+source-map-support@~0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+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"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+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"
+
+sshpk@^1.7.0:
+  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"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+"statuses@>= 1.3.1 < 2":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+statuses@~1.3.0, statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+stream-throttle@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/stream-throttle/-/stream-throttle-0.1.3.tgz#add57c8d7cc73a81630d31cd55d3961cfafba9c3"
+  dependencies:
+    commander "^2.2.0"
+    limiter "^1.0.5"
+
+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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4, stringstream@~0.0.5:
+  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-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.0"
+
+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"
+
+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"
+
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+systemjs@0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-0.20.2.tgz#9e351656489d5311b3b498d3444d4d880e29c83f"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  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"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+tfunk@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-3.1.0.tgz#38e4414fc64977d87afdaa72facb6d29f82f7b5b"
+  dependencies:
+    chalk "^1.1.1"
+    object-path "^0.9.0"
+
+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"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+tree-kill@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36"
+
+tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
+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"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+"typescript@file:../../node_modules/typescript":
+  version "2.7.2"
+
+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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+uuid@^3.0.0, uuid@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+uws@~0.14.4:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/uws/-/uws-0.14.5.tgz#67aaf33c46b2a587a5f6666d00f7691328f149dc"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+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"
+    del "^2.2.0"
+    glob "^7.0.3"
+    ini "^1.3.4"
+    minimist "^1.2.0"
+    q "^1.4.1"
+    request "^2.78.0"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+    xml2js "^0.4.17"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+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"
+
+window-size@^0.1.2:
+  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"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+ws@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.5.tgz#cbd9e6e75e09fc5d2c90015f21f0c40875e0dd51"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
+ws@~3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
+xml2js@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.4.tgz#3111010003008ae19240eba17497b57c729c555d"
+  dependencies:
+    sax "0.6.x"
+    xmlbuilder ">=1.0.0"
+
+xml2js@^0.4.17:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"
+
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+
+y18n@^3.2.0, y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yargs-parser@^4.1.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@3.29.0:
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.29.0.tgz#1aab9660eae79d8b8f675bcaeeab6ee34c2cf69c"
+  dependencies:
+    camelcase "^1.2.1"
+    cliui "^3.0.3"
+    decamelize "^1.0.0"
+    os-locale "^1.4.0"
+    window-size "^0.1.2"
+    y18n "^3.2.0"
+
+yargs@6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.4.0.tgz#816e1a866d5598ccf34e5596ddce22d92da490d4"
+  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"
+    window-size "^0.2.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.1.0"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+"zone.js@file:../../node_modules/zone.js":
+  version "0.8.20"
diff --git a/integration/i18n/closure.conf b/integration/i18n/closure.conf
new file mode 100644
index 000000000000..6cba1da94a92
--- /dev/null
+++ b/integration/i18n/closure.conf
@@ -0,0 +1,34 @@
+--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
+--package_json_entry_names es2015
+
+--js node_modules/@angular/compiler/package.json
+--js node_modules/@angular/compiler/fesm2015/compiler.js
+
+--js node_modules/@angular/core/package.json
+--js node_modules/@angular/core/fesm2015/core.js
+--js node_modules/@angular/core/src/testability/testability.externs.js
+
+--js node_modules/@angular/common/package.json
+--js node_modules/@angular/common/fesm2015/common.js
+
+--js node_modules/@angular/platform-browser/package.json
+--js node_modules/@angular/platform-browser/fesm2015/platform-browser.js
+
+--js built/**.js
+--entry_point=built/src/main
diff --git a/integration/i18n/e2e/app.e2e-spec.ts b/integration/i18n/e2e/app.e2e-spec.ts
new file mode 100644
index 000000000000..afcc36025a61
--- /dev/null
+++ b/integration/i18n/e2e/app.e2e-spec.ts
@@ -0,0 +1,10 @@
+import { browser, element, by } from 'protractor';
+
+describe('i18n E2E Tests', function () {
+  it('remove i18n attributes', function () {
+    browser.get('');
+    const div = element(by.css('div'));
+    expect(div.getAttribute('title')).not.toBe(null);
+    expect(div.getAttribute('i18n')).toBe(null);
+  });
+});
diff --git a/integration/i18n/e2e/browser.config.json b/integration/i18n/e2e/browser.config.json
new file mode 100644
index 000000000000..dcdae6300835
--- /dev/null
+++ b/integration/i18n/e2e/browser.config.json
@@ -0,0 +1,15 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/dist": "dist",
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}
\ No newline at end of file
diff --git a/integration/i18n/e2e/protractor.config.js b/integration/i18n/e2e/protractor.config.js
new file mode 100644
index 000000000000..5bc4f6e640d1
--- /dev/null
+++ b/integration/i18n/e2e/protractor.config.js
@@ -0,0 +1,16 @@
+exports.config = {
+  specs: [
+    '../built/e2e/*.e2e-spec.js'
+  ],
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      args: ['--no-sandbox'],
+      binary: process.env.CHROME_BIN,
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:8080/',
+  framework: 'jasmine',
+  useAllAngular2AppRoots: true
+};
diff --git a/integration/i18n/e2e/tsconfig.json b/integration/i18n/e2e/tsconfig.json
new file mode 100644
index 000000000000..e112859422e7
--- /dev/null
+++ b/integration/i18n/e2e/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "outDir": "../built/e2e",
+    "types": ["jasmine"],
+    // TODO(alexeagle): was required for Protractor 4.0.11
+    "skipLibCheck": true
+  }
+}
\ No newline at end of file
diff --git a/integration/i18n/package.json b/integration/i18n/package.json
new file mode 100644
index 000000000000..8672de9ccb50
--- /dev/null
+++ b/integration/i18n/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "angular-integration",
+  "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/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",
+    "google-closure-compiler": "git+https://github.com/alexeagle/closure-compiler.git#packagejson.dist",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "file:../../node_modules/typescript",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "devDependencies": {
+    "@types/jasmine": "2.5.41",
+    "concurrently": "3.4.0",
+    "lite-server": "2.2.2",
+    "protractor": "file:../../node_modules/protractor"
+  },
+  "scripts": {
+    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG",
+    "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 && npm run test-locale-folder",
+    "test-locale-folder": "node test-locale-folder.js",
+    "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/i18n/src/app.ts b/integration/i18n/src/app.ts
new file mode 100644
index 000000000000..31ecac712b0d
--- /dev/null
+++ b/integration/i18n/src/app.ts
@@ -0,0 +1,11 @@
+import {HelloWorldComponent} from './hello-world.component';
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [HelloWorldComponent],
+  bootstrap: [HelloWorldComponent],
+  imports: [BrowserModule],
+})
+export class AppModule {}
diff --git a/integration/i18n/src/hello-world.component.ts b/integration/i18n/src/hello-world.component.ts
new file mode 100644
index 000000000000..5aabbddd9309
--- /dev/null
+++ b/integration/i18n/src/hello-world.component.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'hello-world-app',
+  template: `<div i18n="desc|meaning" title="i18n attribute should be removed">Hello {{ name }}!</div>`,
+})
+export class HelloWorldComponent {
+  name: string = 'world';
+}
diff --git a/integration/i18n/src/index.html b/integration/i18n/src/index.html
new file mode 100644
index 000000000000..ffbd2616e9d0
--- /dev/null
+++ b/integration/i18n/src/index.html
@@ -0,0 +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="node_modules/zone.js/dist/zone.min.js"></script>
+  <script src="dist/bundle.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/integration/i18n/src/main.ts b/integration/i18n/src/main.ts
new file mode 100644
index 000000000000..81d2aa7b15f7
--- /dev/null
+++ b/integration/i18n/src/main.ts
@@ -0,0 +1,4 @@
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModuleNgFactory} from './app.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/integration/i18n/test-locale-folder.js b/integration/i18n/test-locale-folder.js
new file mode 100644
index 000000000000..13eef35f121e
--- /dev/null
+++ b/integration/i18n/test-locale-folder.js
@@ -0,0 +1,14 @@
+const fs = require('fs');
+const path = require('path');
+
+const packageJson = require('@angular/common/package.json');
+const localesFolder = packageJson['locales'];
+if (!localesFolder) {
+  throw new Error(`@angular/common/package.json does not contain 'locales' entry.`)
+}
+const enLocalePath = `@angular/common/${localesFolder}/en`;
+try {
+  require.resolve(enLocalePath);
+} catch (err) {
+  throw new Error(`@angular/common does not contain 'en' locale in ${enLocalePath}.`)
+}
diff --git a/integration/i18n/tsconfig.json b/integration/i18n/tsconfig.json
new file mode 100644
index 000000000000..34cc0b9fb285
--- /dev/null
+++ b/integration/i18n/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "angularCompilerOptions": {
+    "annotationsAs": "static fields",
+    "annotateForClosureCompiler": true,
+    "alwaysCompileGeneratedCode": true
+  },
+
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    // TODO(i): strictNullChecks should turned on but are temporarily disabled due to #15432
+    "strictNullChecks": false,
+    "target": "es6",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "experimentalDecorators": true,
+    "outDir": "built",
+    "rootDir": ".",
+    "declaration": true,
+    "types": []
+  },
+
+  "exclude": [
+    "vendor",
+    "node_modules",
+    "built",
+    "dist",
+    "e2e"
+  ]
+}
\ No newline at end of file
diff --git a/integration/i18n/yarn.lock b/integration/i18n/yarn.lock
new file mode 100644
index 000000000000..8bfbdd926abf
--- /dev/null
+++ b/integration/i18n/yarn.lock
@@ -0,0 +1,2460 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular/animations@file:../../dist/packages-dist/animations":
+  version "7.0.0-beta.1-d2d510089c"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/common@file:../../dist/packages-dist/common":
+  version "7.0.0-beta.1-d2d510089c"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@file:../../dist/packages-dist/compiler-cli":
+  version "7.0.0-beta.1-d2d510089c"
+  dependencies:
+    chokidar "^1.4.2"
+    convert-source-map "^1.5.1"
+    magic-string "^0.25.0"
+    minimist "^1.2.0"
+    reflect-metadata "^0.1.2"
+    source-map "^0.6.1"
+    tsickle "^0.32.1"
+
+"@angular/compiler@file:../../dist/packages-dist/compiler":
+  version "7.0.0-beta.1-d2d510089c"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@file:../../dist/packages-dist/core":
+  version "7.0.0-beta.1-d2d510089c"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser-dynamic@file:../../dist/packages-dist/platform-browser-dynamic":
+  version "7.0.0-beta.1-d2d510089c"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
+  version "7.0.0-beta.1-d2d510089c"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-server@file:../../dist/packages-dist/platform-server":
+  version "7.0.0-beta.1-d2d510089c"
+  dependencies:
+    domino "^2.0.1"
+    tslib "^1.9.0"
+    xhr2 "^0.1.4"
+
+"@types/jasmine@2.5.41":
+  version "2.5.41"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.41.tgz#d5e86161a0af80d52062b310a33ed65b051a0713"
+
+"@types/node@^6.0.46":
+  version "6.0.96"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.96.tgz#7bf0bf40d6ce51e93762cc47d010c8cc5ebb2179"
+
+"@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.43"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz#2de3d718819bc20165754c4a59afb7e9833f6707"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+accepts@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+accepts@~1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  dependencies:
+    mime-types "~2.1.16"
+    negotiator "0.6.1"
+
+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:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
+
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+
+agent-base@2:
+  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"
+
+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.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+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"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  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.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+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"
+
+async-each-series@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/async-each-series/-/async-each-series-0.1.1.tgz#7617c1917401fd8ca4a28aadce3dbae98afeb432"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
+async@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base64-arraybuffer@0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+
+base64id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
+
+batch@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+binary-extensions@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  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"
+
+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"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+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 "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browser-sync-ui@v1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-1.0.1.tgz#9740527b26d1d7ace259acc0c79e5b5e37d0fdf2"
+  dependencies:
+    async-each-series "0.1.1"
+    connect-history-api-fallback "^1.1.0"
+    immutable "^3.7.6"
+    server-destroy "1.0.1"
+    socket.io-client "2.0.4"
+    stream-throttle "^0.1.3"
+
+browser-sync@^2.12.3:
+  version "2.23.5"
+  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.23.5.tgz#088bc5c3bb4dfc1507bad0278f140d8060fe4299"
+  dependencies:
+    browser-sync-ui v1.0.1
+    bs-recipes "1.3.4"
+    chokidar "1.7.0"
+    connect "3.5.0"
+    connect-history-api-fallback "^1.5.0"
+    dev-ip "^1.0.1"
+    easy-extender "2.3.2"
+    eazy-logger "3.0.2"
+    emitter-steward "^1.0.0"
+    etag "^1.8.1"
+    fresh "^0.5.2"
+    fs-extra "3.0.1"
+    http-proxy "1.15.2"
+    immutable "3.8.2"
+    localtunnel "1.8.3"
+    micromatch "2.3.11"
+    opn "4.0.2"
+    portscanner "2.1.1"
+    qs "6.2.1"
+    resp-modifier "6.0.2"
+    rx "4.1.0"
+    serve-index "1.8.0"
+    serve-static "1.12.2"
+    server-destroy "1.0.1"
+    socket.io "2.0.4"
+    ua-parser-js "0.7.12"
+    yargs "6.4.0"
+
+bs-recipes@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.3.4.tgz#0d2d4d48a718c8c044769fdc4f89592dc8b69585"
+
+builtin-modules@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+camelcase@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+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"
+  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.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chokidar@1.7.0, chokidar@^1.4.2:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+cliui@^3.0.3, cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+
+clone-stats@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
+
+clone@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
+
+cloneable-readable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.0.0.tgz#a6290d413f217a61232f95e458ff38418cfb0117"
+  dependencies:
+    inherits "^2.0.1"
+    process-nextick-args "^1.0.6"
+    through2 "^2.0.1"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+
+commander@^2.2.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+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"
+
+connect-history-api-fallback@^1.1.0, connect-history-api-fallback@^1.2.0, connect-history-api-fallback@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
+
+connect-logger@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/connect-logger/-/connect-logger-0.0.1.tgz#4d999978a1d20bb4608e7cd434d741652255174b"
+  dependencies:
+    moment "*"
+
+connect@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.5.0.tgz#b357525a0b4c1f50599cd983e1d9efeea9677198"
+  dependencies:
+    debug "~2.2.0"
+    finalhandler "0.5.0"
+    parseurl "~1.3.1"
+    utils-merge "1.0.0"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+convert-source-map@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+core-util-is@1.0.2, 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"
+
+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"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-fns@^1.23.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+
+debug@2, debug@^2.2.0, debug@~2.6.4, debug@~2.6.6, debug@~2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
+  dependencies:
+    ms "0.7.3"
+
+debug@2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  dependencies:
+    ms "2.0.0"
+
+debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+del@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+depd@~1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+dev-ip@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dev-ip/-/dev-ip-1.0.1.tgz#a76a3ed1855be7a012bb8ac16cb80f3c00dc28f0"
+
+diff@^3.2.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+
+domino@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.0.1.tgz#9e1d63215d0fe8dcb8202bff07effa1a216db504"
+
+easy-extender@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/easy-extender/-/easy-extender-2.3.2.tgz#3d3248febe2b159607316d8f9cf491c16648221d"
+  dependencies:
+    lodash "^3.10.1"
+
+eazy-logger@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/eazy-logger/-/eazy-logger-3.0.2.tgz#a325aa5e53d13a2225889b2ac4113b2b9636f4fc"
+  dependencies:
+    tfunk "^3.0.1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+emitter-steward@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/emitter-steward/-/emitter-steward-1.0.0.tgz#f3411ade9758a7565df848b2da0cbbd1b46cbd64"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+engine.io-client@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.1.4.tgz#4fcf1370b47163bd2ce9be2733972430350d4ea1"
+  dependencies:
+    component-emitter "1.2.1"
+    component-inherit "0.0.3"
+    debug "~2.6.9"
+    engine.io-parser "~2.1.1"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "~3.3.1"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
+
+engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.2.tgz#4c0f4cff79aaeecbbdcfdea66a823c6085409196"
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "~0.0.7"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.4"
+    has-binary2 "~1.0.2"
+
+engine.io@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.1.4.tgz#3d0211b70a552ce841ffc7da8627b301a9a4162e"
+  dependencies:
+    accepts "1.3.3"
+    base64id "1.0.0"
+    cookie "0.3.1"
+    debug "~2.6.9"
+    engine.io-parser "~2.1.0"
+    ws "~3.3.1"
+  optionalDependencies:
+    uws "~0.14.4"
+
+error-ex@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+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.0, escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+etag@^1.8.1, etag@~1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@3, extend@~3.0.0, extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.0"
+    unpipe "~1.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    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.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"
+    mime-types "^2.1.12"
+
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
+
+fresh@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+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 "^3.0.0"
+    universalify "^0.1.0"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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.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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.3, glob@^7.0.5, glob@^7.0.6:
+  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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+"google-closure-compiler@git+https://github.com/alexeagle/closure-compiler.git#packagejson.dist":
+  version "20170409.0.0"
+  resolved "git+https://github.com/alexeagle/closure-compiler.git#2af4cb7d5591fbbe067119b8e8e6a1e1345f0c04"
+  dependencies:
+    chalk "^1.0.0"
+    vinyl "^2.0.1"
+    vinyl-sourcemaps-apply "^0.2.0"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+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"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary2@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.2.tgz#e83dba49f0b9be4d026d27365350d9f03f54be98"
+  dependencies:
+    isarray "2.0.1"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+hoek@4.x.x:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
+
+hosted-git-info@^2.1.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+
+http-errors@~1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+  dependencies:
+    inherits "2.0.3"
+    setprototypeof "1.0.2"
+    statuses ">= 1.3.1 < 2"
+
+http-errors@~1.6.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-proxy@1.15.2:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.15.2.tgz#642fdcaffe52d3448d2bda3b0079e9409064da31"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-proxy-agent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+immutable@3.8.2, immutable@^3.7.6:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-dotfile@^1.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-number-like@^1.0.3:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/is-number-like/-/is-number-like-1.0.8.tgz#2e129620b50891042e44e9bbbb30593e75cfbbe3"
+  dependencies:
+    lodash.isfinite "^3.3.2"
+
+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-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+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"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jasmine-core@~2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
+
+jasmine-diff@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/jasmine-diff/-/jasmine-diff-0.1.3.tgz#93ccc2dcc41028c5ddd4606558074839f2deeaa8"
+  dependencies:
+    diff "^3.2.0"
+
+jasmine@^2.5.3:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.8.0.tgz#6b089c0a11576b1f16df11b80146d91d4e8b8a3e"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.8.0"
+
+jasminewd2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+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"
+
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  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"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+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"
+
+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"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+limiter@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.2.tgz#229d8055891c8b11af9e0ee5200e8e09bb3dcbeb"
+
+lite-server@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/lite-server/-/lite-server-2.2.2.tgz#4644afe6c9146d850cfa0ad9a86a94f87156499e"
+  dependencies:
+    browser-sync "^2.12.3"
+    connect-history-api-fallback "^1.2.0"
+    connect-logger "0.0.1"
+    lodash "^4.11.1"
+    minimist "1.2.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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+localtunnel@1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/localtunnel/-/localtunnel-1.8.3.tgz#dcc5922fd85651037d4bde24fd93248d0b24eb05"
+  dependencies:
+    debug "2.6.8"
+    openurl "1.1.1"
+    request "2.81.0"
+    yargs "3.29.0"
+
+lodash.isfinite@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
+
+lodash@^3.10.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+lodash@^4.11.1, lodash@^4.5.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+magic-string@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.0.tgz#1f3696f9931ff0a1ed4c132250529e19cad6759b"
+  dependencies:
+    sourcemap-codec "^1.4.1"
+
+micromatch@2.3.11, micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+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.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@1.2.0, 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"
+
+"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@*:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+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"
+
+nan@^2.3.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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"
+
+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"
+
+normalize-package-data@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  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.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"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+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"
+
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-path@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.9.2.tgz#0fd9a74fc5fad1ae3968b586bda5c632bd6c05a5"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+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"
+
+openurl@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.1.tgz#3875b4b0ef7a52c156f0db41d4609dbb0f94b387"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.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"
+
+parseqs@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^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"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+portscanner@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/portscanner/-/portscanner-2.1.1.tgz#eabb409e4de24950f5a2a516d35ae769343fbb96"
+  dependencies:
+    async "1.5.2"
+    is-number-like "^1.0.3"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+process-nextick-args@^1.0.6, process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+"protractor@file:../../node_modules/protractor":
+  version "5.1.2"
+  dependencies:
+    "@types/node" "^6.0.46"
+    "@types/q" "^0.0.32"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "0.0.5"
+    chalk "^1.1.3"
+    glob "^7.0.3"
+    jasmine "^2.5.3"
+    jasminewd2 "^2.1.0"
+    optimist "~0.6.0"
+    q "1.4.1"
+    saucelabs "~1.3.0"
+    selenium-webdriver "3.0.1"
+    source-map-support "~0.4.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+q@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+q@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qs@6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.1.tgz#ce03c5ff0935bc1d9d69a9f14cbd18e568d67625"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    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.1.7:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.3.tgz#51575a900f8dd68381c710b4712c2154c3e2035b"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+reflect-metadata@^0.1.2:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.10.tgz#b4f83704416acad89988c9b15635d47e03b9344a"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+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.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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+request@^2.78.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.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-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"
+
+requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resp-modifier@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/resp-modifier/-/resp-modifier-6.0.2.tgz#b124de5c4fbafcba541f48ffa73970f4aa456b4f"
+  dependencies:
+    debug "^2.2.0"
+    minimatch "^3.0.2"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+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@file:../../node_modules/rxjs":
+  version "6.0.0"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+saucelabs@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.3.0.tgz#d240e8009df7fa87306ec4578a69ba3b5c424fee"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+
+sax@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
+
+sax@>=0.6.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+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:
+    adm-zip "0.4.4"
+    rimraf "^2.2.8"
+    tmp "0.0.24"
+    ws "^1.0.1"
+    xml2js "0.4.4"
+
+"semver@2 || 3 || 4 || 5", semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+semver@~5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
+
+send@0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.2.tgz#f91fab4403bcf87e716f70ceb5db2f578bdc17d6"
+  dependencies:
+    debug "2.6.4"
+    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 "1.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:
+    accepts "~1.3.3"
+    batch "0.5.3"
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    http-errors "~1.5.0"
+    mime-types "~2.1.11"
+    parseurl "~1.3.1"
+
+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.2"
+
+server-destroy@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
+socket.io-adapter@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
+
+socket.io-client@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.0.4.tgz#0918a552406dc5e540b380dcd97afc4a64332f8e"
+  dependencies:
+    backo2 "1.0.2"
+    base64-arraybuffer "0.1.5"
+    component-bind "1.0.0"
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    engine.io-client "~3.1.0"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    socket.io-parser "~3.1.1"
+    to-array "0.1.4"
+
+socket.io-parser@~3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.1.2.tgz#dbc2282151fc4faebbe40aeedc0772eba619f7f2"
+  dependencies:
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    has-binary2 "~1.0.2"
+    isarray "2.0.1"
+
+socket.io@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.0.4.tgz#c1a4590ceff87ecf13c72652f046f716b29e6014"
+  dependencies:
+    debug "~2.6.6"
+    engine.io "~3.1.0"
+    socket.io-adapter "~1.1.0"
+    socket.io-client "2.0.4"
+    socket.io-parser "~3.1.1"
+
+source-map-support@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.3.tgz#2b3d5fff298cfa4d1afd7d4352d569e9a0158e76"
+  dependencies:
+    source-map "^0.6.0"
+
+source-map-support@~0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map@^0.5.1, source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+source-map@^0.6.0, source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+sourcemap-codec@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.1.tgz#c8fd92d91889e902a07aee392bdd2c5863958ba2"
+
+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"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+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"
+
+sshpk@^1.7.0:
+  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"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+"statuses@>= 1.3.1 < 2":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+statuses@~1.3.0, statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+stream-throttle@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/stream-throttle/-/stream-throttle-0.1.3.tgz#add57c8d7cc73a81630d31cd55d3961cfafba9c3"
+  dependencies:
+    commander "^2.2.0"
+    limiter "^1.0.5"
+
+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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4, stringstream@~0.0.5:
+  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-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.0"
+
+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"
+
+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"
+
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  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"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+tfunk@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-3.1.0.tgz#38e4414fc64977d87afdaa72facb6d29f82f7b5b"
+  dependencies:
+    chalk "^1.1.1"
+    object-path "^0.9.0"
+
+through2@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  dependencies:
+    readable-stream "^2.1.5"
+    xtend "~4.0.1"
+
+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"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+tree-kill@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36"
+
+tsickle@^0.32.1:
+  version "0.32.1"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.32.1.tgz#f16e94ba80b32fc9ebe320dc94fbc2ca7f3521a5"
+  dependencies:
+    jasmine-diff "^0.1.3"
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
+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"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+"typescript@file:../../node_modules/typescript":
+  version "2.9.2"
+
+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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+uuid@^3.0.0, uuid@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+uws@~0.14.4:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/uws/-/uws-0.14.5.tgz#67aaf33c46b2a587a5f6666d00f7691328f149dc"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vinyl-sourcemaps-apply@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705"
+  dependencies:
+    source-map "^0.5.1"
+
+vinyl@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.1.0.tgz#021f9c2cf951d6b939943c89eb5ee5add4fd924c"
+  dependencies:
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
+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"
+    del "^2.2.0"
+    glob "^7.0.3"
+    ini "^1.3.4"
+    minimist "^1.2.0"
+    q "^1.4.1"
+    request "^2.78.0"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+    xml2js "^0.4.17"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+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"
+
+window-size@^0.1.2:
+  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"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+ws@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.5.tgz#cbd9e6e75e09fc5d2c90015f21f0c40875e0dd51"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
+ws@~3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
+xhr2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.4.tgz#7f87658847716db5026323812f818cadab387a5f"
+
+xml2js@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.4.tgz#3111010003008ae19240eba17497b57c729c555d"
+  dependencies:
+    sax "0.6.x"
+    xmlbuilder ">=1.0.0"
+
+xml2js@^0.4.17:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"
+
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+
+xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+y18n@^3.2.0, y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yargs-parser@^4.1.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@3.29.0:
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.29.0.tgz#1aab9660eae79d8b8f675bcaeeab6ee34c2cf69c"
+  dependencies:
+    camelcase "^1.2.1"
+    cliui "^3.0.3"
+    decamelize "^1.0.0"
+    os-locale "^1.4.0"
+    window-size "^0.1.2"
+    y18n "^3.2.0"
+
+yargs@6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.4.0.tgz#816e1a866d5598ccf34e5596ddce22d92da490d4"
+  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"
+    window-size "^0.2.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.1.0"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+"zone.js@file:../../node_modules/zone.js":
+  version "0.8.26"
diff --git a/integration/injectable-def/package.json b/integration/injectable-def/package.json
new file mode 100644
index 000000000000..6b4835975846
--- /dev/null
+++ b/integration/injectable-def/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "angular-integration",
+  "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/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",
+    "@types/node": "^9.4.0",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "file:../../node_modules/typescript",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "devDependencies": {
+    "@types/jasmine": "2.5.41",
+    "concurrently": "3.4.0",
+    "lite-server": "2.2.2",
+    "protractor": "file:../../node_modules/protractor"
+  },
+  "scripts": {
+    "test": "./test.sh"
+  }
+}
diff --git a/integration/injectable-def/src/app.ts b/integration/injectable-def/src/app.ts
new file mode 100644
index 000000000000..bc93d3432e18
--- /dev/null
+++ b/integration/injectable-def/src/app.ts
@@ -0,0 +1,21 @@
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ServerModule} from '@angular/platform-server';
+import {Lib2Module} from 'lib2_built';
+
+@Component({
+  selector: 'test-app',
+  template: '<test-cmp></test-cmp>',
+})
+export class TestApp {}
+
+@NgModule({
+  declarations: [TestApp],
+  bootstrap: [TestApp],
+  imports: [
+    Lib2Module,
+    BrowserModule.withServerTransition({appId: 'appId'}),
+    ServerModule,
+  ],
+})
+export class AppModule {}
diff --git a/integration/injectable-def/src/lib1.ts b/integration/injectable-def/src/lib1.ts
new file mode 100644
index 000000000000..c2df12827372
--- /dev/null
+++ b/integration/injectable-def/src/lib1.ts
@@ -0,0 +1,10 @@
+import {Injectable, NgModule} from '@angular/core';
+
+@NgModule({})
+export class Lib1Module {}
+
+@Injectable({providedIn: Lib1Module})
+export class Service {
+  static instance = 0;
+  readonly instance = Service.instance++;
+}
diff --git a/integration/injectable-def/src/lib2.ts b/integration/injectable-def/src/lib2.ts
new file mode 100644
index 000000000000..ebf7ce9bdd49
--- /dev/null
+++ b/integration/injectable-def/src/lib2.ts
@@ -0,0 +1,23 @@
+import {Component, Injector, NgModule} from '@angular/core';
+import {Lib1Module, Service} from 'lib1_built';
+
+@Component({
+  selector: 'test-cmp',
+  template: '{{instance1}}:{{instance2}}',
+})
+export class TestCmp {
+  instance1: number;
+  instance2: number;
+
+  constructor(service: Service, injector: Injector) {
+    this.instance1 = service.instance;
+    this.instance2 = injector.get(Service).instance;
+  }
+}
+
+@NgModule({
+  declarations: [TestCmp],
+  exports: [TestCmp],
+  imports: [Lib1Module],
+})
+export class Lib2Module {}
diff --git a/integration/injectable-def/src/main.ts b/integration/injectable-def/src/main.ts
new file mode 100644
index 000000000000..85cb135d51b8
--- /dev/null
+++ b/integration/injectable-def/src/main.ts
@@ -0,0 +1,21 @@
+import 'zone.js/dist/zone-node';
+
+import {enableProdMode} from '@angular/core';
+import {renderModuleFactory} from '@angular/platform-server';
+import {AppModuleNgFactory} from './app.ngfactory';
+
+enableProdMode();
+renderModuleFactory(AppModuleNgFactory, {
+  document: '<test-app></test-app>',
+  url: '/',
+}).then(html => {
+  if (/>0:0</.test(html)) {
+    process.exit(0);
+  } else {
+    console.error('html was', html);
+    process.exit(1);
+  }
+}).catch(err => {
+  console.error(err);
+  process.exit(2);
+})
\ No newline at end of file
diff --git a/integration/injectable-def/src/package-lib1.json b/integration/injectable-def/src/package-lib1.json
new file mode 100644
index 000000000000..bbed60124149
--- /dev/null
+++ b/integration/injectable-def/src/package-lib1.json
@@ -0,0 +1,7 @@
+{
+  "name": "lib1_built",
+  "version": "0.0.0",
+  "license": "MIT",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}
\ No newline at end of file
diff --git a/integration/injectable-def/src/package-lib2.json b/integration/injectable-def/src/package-lib2.json
new file mode 100644
index 000000000000..e6d2dbaa0905
--- /dev/null
+++ b/integration/injectable-def/src/package-lib2.json
@@ -0,0 +1,7 @@
+{
+  "name": "lib2_built",
+  "version": "0.0.0",
+  "license": "MIT",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}
\ No newline at end of file
diff --git a/integration/injectable-def/test.sh b/integration/injectable-def/test.sh
new file mode 100755
index 000000000000..e0bceaeb0742
--- /dev/null
+++ b/integration/injectable-def/test.sh
@@ -0,0 +1,17 @@
+#!/bin/bash
+set -e -x
+
+NPM_BIN=$(npm bin)
+PATH="$PATH:${NPM_BIN}"
+
+rm -rf node_modules/lib1_built node_modules/lib2_built dist/
+
+ngc -p tsconfig-lib1.json
+cp src/package-lib1.json node_modules/lib1_built/package.json
+
+ngc -p tsconfig-lib2.json
+cp src/package-lib2.json node_modules/lib2_built/package.json
+
+ngc -p tsconfig-app.json
+
+node ./dist/src/main.js
diff --git a/integration/injectable-def/tsconfig-app.json b/integration/injectable-def/tsconfig-app.json
new file mode 100644
index 000000000000..bb53b7866425
--- /dev/null
+++ b/integration/injectable-def/tsconfig-app.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "lib": ["es2015", "dom"],
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "outDir": "dist",
+    "types": ["node"],
+    "rootDir": "."
+  },
+  "files": [
+    "src/app.ts",
+    "src/main.ts"
+  ]
+}
\ No newline at end of file
diff --git a/integration/injectable-def/tsconfig-lib1.json b/integration/injectable-def/tsconfig-lib1.json
new file mode 100644
index 000000000000..f51660e935f5
--- /dev/null
+++ b/integration/injectable-def/tsconfig-lib1.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "declaration": true,
+    "moduleResolution": "node",
+    "lib": ["es2015", "dom"],
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "outDir": "node_modules/lib1_built",
+    "types": [],
+    "rootDir": "."
+  },
+  "files": [
+    "src/lib1.ts"
+  ],
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "lib1_built"
+  }
+}
\ No newline at end of file
diff --git a/integration/injectable-def/tsconfig-lib2.json b/integration/injectable-def/tsconfig-lib2.json
new file mode 100644
index 000000000000..c0bf41639539
--- /dev/null
+++ b/integration/injectable-def/tsconfig-lib2.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "declaration": true,
+    "moduleResolution": "node",
+    "lib": ["es2015", "dom"],
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "outDir": "node_modules/lib2_built",
+    "types": [],
+    "rootDir": "."
+  },
+  "files": [
+    "src/lib2.ts"
+  ],
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "flatModuleId": "lib2_built",
+    "flatModuleOutFile": "index.js"
+  }
+}
\ No newline at end of file
diff --git a/integration/injectable-def/yarn.lock b/integration/injectable-def/yarn.lock
new file mode 100644
index 000000000000..7eb45684c751
--- /dev/null
+++ b/integration/injectable-def/yarn.lock
@@ -0,0 +1,2388 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular/animations@file:../../dist/packages-dist/animations":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/common@file:../../dist/packages-dist/common":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@file:../../dist/packages-dist/compiler-cli":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    chokidar "^1.4.2"
+    minimist "^1.2.0"
+    reflect-metadata "^0.1.2"
+    tsickle "^0.27.2"
+
+"@angular/compiler@file:../../dist/packages-dist/compiler":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@file:../../dist/packages-dist/core":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/http@file:../../dist/packages-dist/http":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser-dynamic@file:../../dist/packages-dist/platform-browser-dynamic":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-server@file:../../dist/packages-dist/platform-server":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    domino "^2.0.1"
+    tslib "^1.9.0"
+    xhr2 "^0.1.4"
+
+"@types/jasmine@2.5.41":
+  version "2.5.41"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.41.tgz#d5e86161a0af80d52062b310a33ed65b051a0713"
+
+"@types/node@^6.0.46":
+  version "6.0.101"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.101.tgz#0c5911cfb434af4a51c0a499931fe6423207d921"
+
+"@types/node@^9.4.0":
+  version "9.4.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.6.tgz#d8176d864ee48753d053783e4e463aec86b8d82e"
+
+"@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.43"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz#2de3d718819bc20165754c4a59afb7e9833f6707"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+accepts@~1.3.3, accepts@~1.3.4:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
+  dependencies:
+    mime-types "~2.1.18"
+    negotiator "0.6.1"
+
+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:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
+
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+
+agent-base@2:
+  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"
+
+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.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+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"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  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.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+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"
+
+async-each-series@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/async-each-series/-/async-each-series-0.1.1.tgz#7617c1917401fd8ca4a28aadce3dbae98afeb432"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
+async@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base64-arraybuffer@0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+
+base64id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
+
+batch@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+binary-extensions@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  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"
+
+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"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browser-sync-ui@v1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-1.0.1.tgz#9740527b26d1d7ace259acc0c79e5b5e37d0fdf2"
+  dependencies:
+    async-each-series "0.1.1"
+    connect-history-api-fallback "^1.1.0"
+    immutable "^3.7.6"
+    server-destroy "1.0.1"
+    socket.io-client "2.0.4"
+    stream-throttle "^0.1.3"
+
+browser-sync@^2.12.3:
+  version "2.23.6"
+  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.23.6.tgz#ed0721c92e5b98c71b7bf839b39092ac9f220650"
+  dependencies:
+    browser-sync-ui v1.0.1
+    bs-recipes "1.3.4"
+    chokidar "1.7.0"
+    connect "3.5.0"
+    connect-history-api-fallback "^1.5.0"
+    dev-ip "^1.0.1"
+    easy-extender "2.3.2"
+    eazy-logger "3.0.2"
+    emitter-steward "^1.0.0"
+    etag "^1.8.1"
+    fresh "^0.5.2"
+    fs-extra "3.0.1"
+    http-proxy "1.15.2"
+    immutable "3.8.2"
+    localtunnel "1.8.3"
+    micromatch "2.3.11"
+    opn "4.0.2"
+    portscanner "2.1.1"
+    qs "6.2.1"
+    resp-modifier "6.0.2"
+    rx "4.1.0"
+    serve-index "1.8.0"
+    serve-static "1.12.2"
+    server-destroy "1.0.1"
+    socket.io "2.0.4"
+    ua-parser-js "0.7.12"
+    yargs "6.4.0"
+
+bs-recipes@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.3.4.tgz#0d2d4d48a718c8c044769fdc4f89592dc8b69585"
+
+builtin-modules@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+camelcase@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+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"
+  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.1.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chokidar@1.7.0, chokidar@^1.4.2:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+cliui@^3.0.3, cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+
+commander@^2.2.0:
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+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"
+
+connect-history-api-fallback@^1.1.0, connect-history-api-fallback@^1.2.0, connect-history-api-fallback@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
+
+connect-logger@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/connect-logger/-/connect-logger-0.0.1.tgz#4d999978a1d20bb4608e7cd434d741652255174b"
+  dependencies:
+    moment "*"
+
+connect@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.5.0.tgz#b357525a0b4c1f50599cd983e1d9efeea9677198"
+  dependencies:
+    debug "~2.2.0"
+    finalhandler "0.5.0"
+    parseurl "~1.3.1"
+    utils-merge "1.0.0"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+core-util-is@1.0.2, 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"
+
+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"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-fns@^1.23.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+
+debug@2, debug@^2.2.0, debug@~2.6.4, debug@~2.6.6:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
+  dependencies:
+    ms "0.7.3"
+
+debug@2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  dependencies:
+    ms "2.0.0"
+
+debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+debug@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
+decamelize@^1.0.0, decamelize@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+del@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+depd@~1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+dev-ip@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dev-ip/-/dev-ip-1.0.1.tgz#a76a3ed1855be7a012bb8ac16cb80f3c00dc28f0"
+
+domino@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.0.1.tgz#9e1d63215d0fe8dcb8202bff07effa1a216db504"
+
+easy-extender@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/easy-extender/-/easy-extender-2.3.2.tgz#3d3248febe2b159607316d8f9cf491c16648221d"
+  dependencies:
+    lodash "^3.10.1"
+
+eazy-logger@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/eazy-logger/-/eazy-logger-3.0.2.tgz#a325aa5e53d13a2225889b2ac4113b2b9636f4fc"
+  dependencies:
+    tfunk "^3.0.1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+emitter-steward@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/emitter-steward/-/emitter-steward-1.0.0.tgz#f3411ade9758a7565df848b2da0cbbd1b46cbd64"
+
+encodeurl@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+
+engine.io-client@~3.1.0:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.1.5.tgz#85de17666560327ef1817978f6e3f8101ded2c47"
+  dependencies:
+    component-emitter "1.2.1"
+    component-inherit "0.0.3"
+    debug "~3.1.0"
+    engine.io-parser "~2.1.1"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "~3.3.1"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
+
+engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.2.tgz#4c0f4cff79aaeecbbdcfdea66a823c6085409196"
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "~0.0.7"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.4"
+    has-binary2 "~1.0.2"
+
+engine.io@~3.1.0:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.1.5.tgz#0e7ef9d690eb0b35597f1d4ad02a26ca2dba3845"
+  dependencies:
+    accepts "~1.3.4"
+    base64id "1.0.0"
+    cookie "0.3.1"
+    debug "~3.1.0"
+    engine.io-parser "~2.1.0"
+    ws "~3.3.1"
+  optionalDependencies:
+    uws "~9.14.0"
+
+error-ex@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+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.0, escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+etag@^1.8.1, etag@~1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@3, extend@~3.0.0, extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+fast-deep-equal@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.0"
+    unpipe "~1.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    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.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"
+    mime-types "^2.1.12"
+
+form-data@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "1.0.6"
+    mime-types "^2.1.12"
+
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
+
+fresh@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+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 "^3.0.0"
+    universalify "^0.1.0"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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.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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.3, glob@^7.0.5, glob@^7.0.6:
+  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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+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"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary2@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.2.tgz#e83dba49f0b9be4d026d27365350d9f03f54be98"
+  dependencies:
+    isarray "2.0.1"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+hoek@4.x.x:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
+
+hosted-git-info@^2.1.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+
+http-errors@~1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+  dependencies:
+    inherits "2.0.3"
+    setprototypeof "1.0.2"
+    statuses ">= 1.3.1 < 2"
+
+http-errors@~1.6.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-proxy@1.15.2:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.15.2.tgz#642fdcaffe52d3448d2bda3b0079e9409064da31"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-proxy-agent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+immutable@3.8.2, immutable@^3.7.6:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-dotfile@^1.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-number-like@^1.0.3:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/is-number-like/-/is-number-like-1.0.8.tgz#2e129620b50891042e44e9bbbb30593e75cfbbe3"
+  dependencies:
+    lodash.isfinite "^3.3.2"
+
+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-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+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"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jasmine-core@~2.99.0:
+  version "2.99.1"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.99.1.tgz#e6400df1e6b56e130b61c4bcd093daa7f6e8ca15"
+
+jasmine@^2.5.3:
+  version "2.99.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.99.0.tgz#8ca72d102e639b867c6489856e0e18a9c7aa42b7"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.99.0"
+
+jasminewd2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+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"
+
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  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"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+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"
+
+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"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+limiter@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.2.tgz#229d8055891c8b11af9e0ee5200e8e09bb3dcbeb"
+
+lite-server@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/lite-server/-/lite-server-2.2.2.tgz#4644afe6c9146d850cfa0ad9a86a94f87156499e"
+  dependencies:
+    browser-sync "^2.12.3"
+    connect-history-api-fallback "^1.2.0"
+    connect-logger "0.0.1"
+    lodash "^4.11.1"
+    minimist "1.2.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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+localtunnel@1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/localtunnel/-/localtunnel-1.8.3.tgz#dcc5922fd85651037d4bde24fd93248d0b24eb05"
+  dependencies:
+    debug "2.6.8"
+    openurl "1.1.1"
+    request "2.81.0"
+    yargs "3.29.0"
+
+lodash.isfinite@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
+
+lodash@^3.10.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+lodash@^4.11.1, lodash@^4.5.1:
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+
+micromatch@2.3.11, micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
+
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.7:
+  version "2.1.18"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
+  dependencies:
+    mime-db "~1.33.0"
+
+mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+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.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@1.2.0, 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"
+
+"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@*:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+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"
+
+nan@^2.3.0:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.9.2.tgz#f564d75f5f8f36a6d9456cca7a6c4fe488ab7866"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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"
+
+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"
+
+normalize-package-data@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  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.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"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+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"
+
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-path@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.9.2.tgz#0fd9a74fc5fad1ae3968b586bda5c632bd6c05a5"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+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"
+
+openurl@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.1.tgz#3875b4b0ef7a52c156f0db41d4609dbb0f94b387"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.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"
+
+parseqs@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^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"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+portscanner@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/portscanner/-/portscanner-2.1.1.tgz#eabb409e4de24950f5a2a516d35ae769343fbb96"
+  dependencies:
+    async "1.5.2"
+    is-number-like "^1.0.3"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+
+"protractor@file:../../node_modules/protractor":
+  version "5.1.2"
+  dependencies:
+    "@types/node" "^6.0.46"
+    "@types/q" "^0.0.32"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "0.0.5"
+    chalk "^1.1.3"
+    glob "^7.0.3"
+    jasmine "^2.5.3"
+    jasminewd2 "^2.1.0"
+    optimist "~0.6.0"
+    q "1.4.1"
+    saucelabs "~1.3.0"
+    selenium-webdriver "3.0.1"
+    source-map-support "~0.4.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+q@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+q@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qs@6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.1.tgz#ce03c5ff0935bc1d9d69a9f14cbd18e568d67625"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    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.1.7:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.5.tgz#275cd687f6e3b36cc756baa26dfee80a790301fd"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.4.tgz#c946c3f47fa7d8eabc0b6150f4a12f69a4574071"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+reflect-metadata@^0.1.2:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.12.tgz#311bf0c6b63cd782f228a81abe146a2bfa9c56f2"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+request@^2.78.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.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-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"
+
+requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resp-modifier@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/resp-modifier/-/resp-modifier-6.0.2.tgz#b124de5c4fbafcba541f48ffa73970f4aa456b4f"
+  dependencies:
+    debug "^2.2.0"
+    minimatch "^3.0.2"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+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@file:../../node_modules/rxjs":
+  version "6.0.0-alpha.4"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+saucelabs@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.3.0.tgz#d240e8009df7fa87306ec4578a69ba3b5c424fee"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+
+sax@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
+
+sax@>=0.6.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+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:
+    adm-zip "0.4.4"
+    rimraf "^2.2.8"
+    tmp "0.0.24"
+    ws "^1.0.1"
+    xml2js "0.4.4"
+
+"semver@2 || 3 || 4 || 5", semver@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
+semver@~5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
+
+send@0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.2.tgz#f91fab4403bcf87e716f70ceb5db2f578bdc17d6"
+  dependencies:
+    debug "2.6.4"
+    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 "1.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:
+    accepts "~1.3.3"
+    batch "0.5.3"
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    http-errors "~1.5.0"
+    mime-types "~2.1.11"
+    parseurl "~1.3.1"
+
+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.2"
+
+server-destroy@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
+socket.io-adapter@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
+
+socket.io-client@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.0.4.tgz#0918a552406dc5e540b380dcd97afc4a64332f8e"
+  dependencies:
+    backo2 "1.0.2"
+    base64-arraybuffer "0.1.5"
+    component-bind "1.0.0"
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    engine.io-client "~3.1.0"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    socket.io-parser "~3.1.1"
+    to-array "0.1.4"
+
+socket.io-parser@~3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.1.3.tgz#ed2da5ee79f10955036e3da413bfd7f1e4d86c8e"
+  dependencies:
+    component-emitter "1.2.1"
+    debug "~3.1.0"
+    has-binary2 "~1.0.2"
+    isarray "2.0.1"
+
+socket.io@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.0.4.tgz#c1a4590ceff87ecf13c72652f046f716b29e6014"
+  dependencies:
+    debug "~2.6.6"
+    engine.io "~3.1.0"
+    socket.io-adapter "~1.1.0"
+    socket.io-client "2.0.4"
+    socket.io-parser "~3.1.1"
+
+source-map-support@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.3.tgz#2b3d5fff298cfa4d1afd7d4352d569e9a0158e76"
+  dependencies:
+    source-map "^0.6.0"
+
+source-map-support@~0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+source-map@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+spawn-command@^0.0.2-1:
+  version "0.0.2-1"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
+
+spdx-correct@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.0.tgz#05a5b4d7153a195bc92c3c425b69f3b2a9524c82"
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz#2c7ae61056c714a5b9b9b2b2af7d311ef5c78fe9"
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz#7a7cd28470cc6d3a1cfe6d66886f6bc430d3ac87"
+
+sshpk@^1.7.0:
+  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"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+"statuses@>= 1.3.1 < 2":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+statuses@~1.3.0, statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+stream-throttle@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/stream-throttle/-/stream-throttle-0.1.3.tgz#add57c8d7cc73a81630d31cd55d3961cfafba9c3"
+  dependencies:
+    commander "^2.2.0"
+    limiter "^1.0.5"
+
+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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4, stringstream@~0.0.5:
+  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-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.0"
+
+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"
+
+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"
+
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  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"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+tfunk@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-3.1.0.tgz#38e4414fc64977d87afdaa72facb6d29f82f7b5b"
+  dependencies:
+    chalk "^1.1.1"
+    object-path "^0.9.0"
+
+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"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
+  dependencies:
+    punycode "^1.4.1"
+
+tree-kill@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36"
+
+tsickle@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.27.2.tgz#f33d46d046f73dd5c155a37922e422816e878736"
+  dependencies:
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
+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"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+"typescript@file:../../node_modules/typescript":
+  version "2.7.2"
+
+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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+uuid@^3.0.0, uuid@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
+
+uws@~9.14.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/uws/-/uws-9.14.0.tgz#fac8386befc33a7a3705cbd58dc47b430ca4dd95"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz#81643bcbef1bdfecd4623793dc4648948ba98338"
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+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"
+    del "^2.2.0"
+    glob "^7.0.3"
+    ini "^1.3.4"
+    minimist "^1.2.0"
+    q "^1.4.1"
+    request "^2.78.0"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+    xml2js "^0.4.17"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+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"
+
+window-size@^0.1.2:
+  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"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+ws@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.5.tgz#cbd9e6e75e09fc5d2c90015f21f0c40875e0dd51"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
+ws@~3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
+xhr2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.4.tgz#7f87658847716db5026323812f818cadab387a5f"
+
+xml2js@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.4.tgz#3111010003008ae19240eba17497b57c729c555d"
+  dependencies:
+    sax "0.6.x"
+    xmlbuilder ">=1.0.0"
+
+xml2js@^0.4.17:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1:
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
+
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+
+y18n@^3.2.0, y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yargs-parser@^4.1.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@3.29.0:
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.29.0.tgz#1aab9660eae79d8b8f675bcaeeab6ee34c2cf69c"
+  dependencies:
+    camelcase "^1.2.1"
+    cliui "^3.0.3"
+    decamelize "^1.0.0"
+    os-locale "^1.4.0"
+    window-size "^0.1.2"
+    y18n "^3.2.0"
+
+yargs@6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.4.0.tgz#816e1a866d5598ccf34e5596ddce22d92da490d4"
+  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"
+    window-size "^0.2.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.1.0"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+"zone.js@file:../../node_modules/zone.js":
+  version "0.8.20"
diff --git a/integration/language_service_plugin/.gitignore b/integration/language_service_plugin/.gitignore
new file mode 100644
index 000000000000..4c43fe68f640
--- /dev/null
+++ b/integration/language_service_plugin/.gitignore
@@ -0,0 +1 @@
+*.js
\ No newline at end of file
diff --git a/integration/language_service_plugin/README.md b/integration/language_service_plugin/README.md
new file mode 100644
index 000000000000..3873350e2169
--- /dev/null
+++ b/integration/language_service_plugin/README.md
@@ -0,0 +1,36 @@
+# Angular Language Service Test
+
+This directory is an integration test for `@angular/language-service` to ensure
+that various versions of the server can be loaded in the supported versions of 
+TypeScript's language service.
+
+## New supported version of TypeScript
+
+To add a new supported version of TypeScript:
+
+1) Create directory in `typescripts` to hold the new version following the pattern
+   of the other versions.
+2) Add the directory name to the end of the `TYPESCRIPTS` variable in the 
+   `scripts/env.sh` file.
+3) Run `scripts/update_golden.sh` to generate the expected files.
+4) Verify the expected output is reasonable by comparing to a known good output
+   from a previous version.
+
+## Update golden files
+
+If the expected output needs to be updated run `scripts/update_golden.sh` to
+update the expected output of the server.
+
+## Adding a new fixture
+
+Currently there is no automated way to produce a new fixture. The way the
+current fixtures were created was to hack a version of tsserver.js to write the
+commands from `VSCode` to a file while performing the operation to be tested.
+I also hand modified the input to remove superfluous request.
+
+Once a new fixture is created:
+
+1) Add the fixture base name (without the .json) to `FIXTURES` in 
+   `scripts/env.sh`.
+2) Run `scripts/udpate_golden.sh` to produce the expected output files.
+3) Hand validate the expected output is reasonable.
diff --git a/integration/language_service_plugin/fixtures/getCompletions-expected-2.3.json b/integration/language_service_plugin/fixtures/getCompletions-expected-2.3.json
new file mode 100644
index 000000000000..3560e80927dd
--- /dev/null
+++ b/integration/language_service_plugin/fixtures/getCompletions-expected-2.3.json
@@ -0,0 +1,260 @@
+[
+ {
+  "type": "response",
+  "command": "configure",
+  "success": true
+ },
+ {
+  "type": "response",
+  "command": "compilerOptionsForInferredProjects",
+  "success": true,
+  "body": true
+ },
+ {
+  "type": "response",
+  "command": "completions",
+  "success": true,
+  "body": [
+   {
+    "name": "anchor",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "anchor"
+   },
+   {
+    "name": "big",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "big"
+   },
+   {
+    "name": "blink",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "blink"
+   },
+   {
+    "name": "bold",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "bold"
+   },
+   {
+    "name": "charAt",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "charAt"
+   },
+   {
+    "name": "charCodeAt",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "charCodeAt"
+   },
+   {
+    "name": "codePointAt",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "codePointAt"
+   },
+   {
+    "name": "concat",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "concat"
+   },
+   {
+    "name": "endsWith",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "endsWith"
+   },
+   {
+    "name": "fixed",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "fixed"
+   },
+   {
+    "name": "fontcolor",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "fontcolor"
+   },
+   {
+    "name": "fontsize",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "fontsize"
+   },
+   {
+    "name": "includes",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "includes"
+   },
+   {
+    "name": "indexOf",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "indexOf"
+   },
+   {
+    "name": "italics",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "italics"
+   },
+   {
+    "name": "lastIndexOf",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "lastIndexOf"
+   },
+   {
+    "name": "length",
+    "kind": "property",
+    "kindModifiers": "",
+    "sortText": "length"
+   },
+   {
+    "name": "link",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "link"
+   },
+   {
+    "name": "localeCompare",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "localeCompare"
+   },
+   {
+    "name": "match",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "match"
+   },
+   {
+    "name": "normalize",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "normalize"
+   },
+   {
+    "name": "repeat",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "repeat"
+   },
+   {
+    "name": "replace",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "replace"
+   },
+   {
+    "name": "search",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "search"
+   },
+   {
+    "name": "slice",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "slice"
+   },
+   {
+    "name": "small",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "small"
+   },
+   {
+    "name": "split",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "split"
+   },
+   {
+    "name": "startsWith",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "startsWith"
+   },
+   {
+    "name": "strike",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "strike"
+   },
+   {
+    "name": "sub",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "sub"
+   },
+   {
+    "name": "substr",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "substr"
+   },
+   {
+    "name": "substring",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "substring"
+   },
+   {
+    "name": "sup",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "sup"
+   },
+   {
+    "name": "toLocaleLowerCase",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "toLocaleLowerCase"
+   },
+   {
+    "name": "toLocaleUpperCase",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "toLocaleUpperCase"
+   },
+   {
+    "name": "toLowerCase",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "toLowerCase"
+   },
+   {
+    "name": "toString",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "toString"
+   },
+   {
+    "name": "toUpperCase",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "toUpperCase"
+   },
+   {
+    "name": "trim",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "trim"
+   },
+   {
+    "name": "valueOf",
+    "kind": "method",
+    "kindModifiers": "",
+    "sortText": "valueOf"
+   }
+  ]
+ }
+]
diff --git a/integration/language_service_plugin/fixtures/getCompletions.json b/integration/language_service_plugin/fixtures/getCompletions.json
new file mode 100644
index 000000000000..94be1ebe386a
--- /dev/null
+++ b/integration/language_service_plugin/fixtures/getCompletions.json
@@ -0,0 +1,68 @@
+[
+  {
+    "seq": 0,
+    "type": "request",
+    "command": "configure",
+    "arguments": {
+      "hostInfo": "vscode"
+    }
+  },
+  {
+    "seq": 1,
+    "type": "request",
+    "command": "compilerOptionsForInferredProjects",
+    "arguments": {
+      "options": {
+        "module": "CommonJS",
+        "target": "ES6",
+        "allowSyntheticDefaultImports": true,
+        "allowNonTsExtensions": true,
+        "allowJs": true,
+        "jsx": "Preserve"
+      }
+    }
+  },
+  {
+    "seq": 4,
+    "type": "request",
+    "command": "open",
+    "arguments": {
+      "file": "$$PWD$$/project/app/app.component.ts",
+      "fileContent": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'my-app',\n  template: `<h1>Hello {{name}}</h1>`,\n})\nexport class AppComponent  { name = 'Angular'; }\n"
+    }
+  },
+  {
+    "seq": 7,
+    "type": "request",
+    "command": "geterr",
+    "arguments": {
+      "delay": 0,
+      "files": [
+        "$$PWD$$/project/app/app.component.ts"
+      ]
+    }
+  },
+  {
+    "seq": 12,
+    "type": "request",
+    "command": "change",
+    "arguments": {
+      "file": "$$PWD$$/project/app/app.component.ts",
+      "line": 5,
+      "offset": 30,
+      "endLine": 5,
+      "endOffset": 30,
+      "insertString": "."
+    }
+  },
+  {
+    "seq": 13,
+    "type": "request",
+    "command": "completions",
+    "arguments": {
+      "file": "$$PWD$$/project/app/app.component.ts",
+      "line": 5,
+      "offset": 31
+    }
+  }
+]
\ No newline at end of file
diff --git a/integration/language_service_plugin/fixtures/smokeTest-expected-2.3.json b/integration/language_service_plugin/fixtures/smokeTest-expected-2.3.json
new file mode 100644
index 000000000000..55645cf60dc5
--- /dev/null
+++ b/integration/language_service_plugin/fixtures/smokeTest-expected-2.3.json
@@ -0,0 +1,13 @@
+[
+ {
+  "type": "response",
+  "command": "configure",
+  "success": true
+ },
+ {
+  "type": "response",
+  "command": "compilerOptionsForInferredProjects",
+  "success": true,
+  "body": true
+ }
+]
diff --git a/integration/language_service_plugin/fixtures/smokeTest.json b/integration/language_service_plugin/fixtures/smokeTest.json
new file mode 100644
index 000000000000..7ddc202c9a65
--- /dev/null
+++ b/integration/language_service_plugin/fixtures/smokeTest.json
@@ -0,0 +1,45 @@
+[
+  {
+    "seq": 0,
+    "type": "request",
+    "command": "configure",
+    "arguments": {
+      "hostInfo": "vscode"
+    }
+  },
+  {
+    "seq": 1,
+    "type": "request",
+    "command": "compilerOptionsForInferredProjects",
+    "arguments": {
+      "options": {
+        "module": "CommonJS",
+        "target": "ES6",
+        "allowSyntheticDefaultImports": true,
+        "allowNonTsExtensions": true,
+        "allowJs": true,
+        "jsx": "Preserve"
+      }
+    }
+  },
+  {
+    "seq": 2,
+    "type": "request",
+    "command": "open",
+    "arguments": {
+      "file": "$$PWD$$/app/app.module.ts",
+      "fileContent": ""
+    }
+  },
+  {
+    "seq": 3,
+    "type": "request",
+    "command": "geterr",
+    "arguments": {
+      "delay": 0,
+      "files": [
+        "$$PWD$$/app/app.module.ts"
+      ]
+    }
+  }
+]
\ No newline at end of file
diff --git a/integration/language_service_plugin/package.json b/integration/language_service_plugin/package.json
new file mode 100644
index 000000000000..c6c91f558fd8
--- /dev/null
+++ b/integration/language_service_plugin/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "language_service_plugin",
+  "version": "0.0.0",
+  "license": "MIT",
+  "description": "Angular Language Service plugin integration test",
+  "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/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",
+    "@types/minimist": "^1.2.0",
+    "@types/node": "^7.0.5",
+    "minimist": "^1.2.0",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "file:../../node_modules/typescript",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "scripts": {
+    "postinstall": "scripts/install.sh",
+    "test": "tsc -p tools && scripts/test.sh"
+  }
+}
diff --git a/integration/language_service_plugin/project/app/app.component.ts b/integration/language_service_plugin/project/app/app.component.ts
new file mode 100644
index 000000000000..7fb173cd011f
--- /dev/null
+++ b/integration/language_service_plugin/project/app/app.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `<h1>Hello {{name}}</h1>`,
+})
+export class AppComponent  { name = 'Angular'; }
diff --git a/integration/language_service_plugin/project/app/app.module.ts b/integration/language_service_plugin/project/app/app.module.ts
new file mode 100644
index 000000000000..357b003a5ab7
--- /dev/null
+++ b/integration/language_service_plugin/project/app/app.module.ts
@@ -0,0 +1,11 @@
+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/integration/language_service_plugin/project/app/main.ts b/integration/language_service_plugin/project/app/main.ts
new file mode 100644
index 000000000000..6af7a5b2ae88
--- /dev/null
+++ b/integration/language_service_plugin/project/app/main.ts
@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/integration/language_service_plugin/project/tsconfig.json b/integration/language_service_plugin/project/tsconfig.json
new file mode 100644
index 000000000000..6a81fdd7df2a
--- /dev/null
+++ b/integration/language_service_plugin/project/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "plugins": [
+      { "name": "@angular/language-service" }
+    ]
+  }
+}
diff --git a/integration/language_service_plugin/scripts/env.sh b/integration/language_service_plugin/scripts/env.sh
new file mode 100755
index 000000000000..321f42a45c44
--- /dev/null
+++ b/integration/language_service_plugin/scripts/env.sh
@@ -0,0 +1,2 @@
+TYPESCRIPTS=2.3
+FIXTURES="smokeTest getCompletions"
diff --git a/integration/language_service_plugin/scripts/install.sh b/integration/language_service_plugin/scripts/install.sh
new file mode 100755
index 000000000000..d8354792591a
--- /dev/null
+++ b/integration/language_service_plugin/scripts/install.sh
@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+set -ex -o pipefail
+
+cd `dirname $0`
+cd ..
+source scripts/env.sh
+
+# Setup TypeScripts
+for TYPESCRIPT in ${TYPESCRIPTS[@]}
+do
+  (
+    cd typescripts/$TYPESCRIPT
+    yarn
+  )
+done
\ No newline at end of file
diff --git a/integration/language_service_plugin/scripts/test.sh b/integration/language_service_plugin/scripts/test.sh
new file mode 100755
index 000000000000..0721da0c45df
--- /dev/null
+++ b/integration/language_service_plugin/scripts/test.sh
@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+
+set -ex -o pipefail
+
+cd `dirname $0`
+cd ..
+source scripts/env.sh
+
+HOST="node tools/typescript_host.js"
+VALIDATE="node tools/typescript_validator.js"
+
+# Ensure the languages service can load correctly in node before typescript loads it.
+# This verifies its dependencies and emits any exceptions, both of which are  only  
+# emitted to the typescript logs (not the validated output).
+node tools/load_test.js
+
+for TYPESCRIPT in ${TYPESCRIPTS[@]}
+do
+  SERVER="node typescripts/$TYPESCRIPT/node_modules/typescript/lib/tsserver.js"
+  for FIXTURE_BASE in ${FIXTURES[@]}
+  do
+    FIXTURE=fixtures/$FIXTURE_BASE.json
+    EXPECTED=fixtures/$FIXTURE_BASE-expected-$TYPESCRIPT.json
+    if [[ ${UPDATE_GOLDEN} == true ]]; then
+      $HOST --file $FIXTURE --pwd $(pwd) | $SERVER | $VALIDATE --golden > $EXPECTED
+    else
+      $HOST --file $FIXTURE --pwd $(pwd) | $SERVER | $VALIDATE --expect $EXPECTED
+    fi
+  done
+done
\ No newline at end of file
diff --git a/integration/language_service_plugin/scripts/update_golden.sh b/integration/language_service_plugin/scripts/update_golden.sh
new file mode 100755
index 000000000000..4fd0d2484dc6
--- /dev/null
+++ b/integration/language_service_plugin/scripts/update_golden.sh
@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+set -ex -o pipefail
+
+cd `dirname $0`
+cd ..
+
+UPDATE_GOLDEN=true scripts/test.sh
\ No newline at end of file
diff --git a/integration/language_service_plugin/tools/load_test.ts b/integration/language_service_plugin/tools/load_test.ts
new file mode 100644
index 000000000000..22090f30f6e4
--- /dev/null
+++ b/integration/language_service_plugin/tools/load_test.ts
@@ -0,0 +1,35 @@
+const ts = require('typescript');
+const Module = require('module');
+
+const existingRequire = Module.prototype.require;
+
+const recordedRequires: string[] = [];
+
+function recordingRequire(path: string) {
+  recordedRequires.push(path);
+  return existingRequire.call(this, path);
+}
+
+Module.prototype.require = recordingRequire;
+
+try {
+  const lsf = require('@angular/language-service');
+  const ls = lsf({typescript: ts});
+
+  // Assert that the only module that should have been required are '@angular/language-service', 'fs', and 'path'
+
+  const allowedLoads = new Set(["@angular/language-service", "fs", "path"]);
+
+  const invalidModules = recordedRequires.filter(m => !allowedLoads.has(m));
+
+  if (invalidModules.length > 0) {
+    console.error(`FAILED: Loading the language service required: ${invalidModules.join(', ')}`);
+    process.exit(1);
+  }
+} catch (e) {
+  console.error(`FAILED: Loading the language service caused the following exception: ${e.stack || e}`);
+  process.exit(1);
+}
+
+console.log('SUCCESS: Loading passed')
+process.exit(0);
\ No newline at end of file
diff --git a/integration/language_service_plugin/tools/tsconfig.json b/integration/language_service_plugin/tools/tsconfig.json
new file mode 100644
index 000000000000..fd844f194c50
--- /dev/null
+++ b/integration/language_service_plugin/tools/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es5",
+        "noImplicitAny": true,
+        "skipLibCheck": true,
+        "sourceMap": false,
+        "lib": ["es2015", "dom"],
+        "types": [
+            "node",
+            "minimist"
+        ]
+    },
+    "files": [
+        "typescript_host.ts", 
+        "typescript_validator.ts",
+        "load_test.ts"
+    ]
+}
\ No newline at end of file
diff --git a/integration/language_service_plugin/tools/typescript_host.ts b/integration/language_service_plugin/tools/typescript_host.ts
new file mode 100644
index 000000000000..4dc2f415c8ba
--- /dev/null
+++ b/integration/language_service_plugin/tools/typescript_host.ts
@@ -0,0 +1,77 @@
+import * as fs from 'fs';
+import * as minimist from 'minimist';
+
+const RE_PWD = /\$\$PWD\$\$/g;
+
+let errorsDetected = false;
+
+function reportError(arg: string): boolean {
+  console.error(`Unknown argument: ${arg}`);
+  errorsDetected = true;
+  return false;
+}
+
+function help() {
+  console.log('TypeScript Host')
+  console.log(`${process.argv[1]} --file <file-name> [--pwd <pwd>]`);
+  console.log(`
+  Send JSON message using the JSON RPC protocol to stdout.
+  `)
+}
+
+let args = minimist(process.argv.slice(2), { string: ['file', 'pwd'], unknown: reportError });
+
+if (errorsDetected) {
+  help();
+  process.exit(2);
+}
+
+const file = args['file'];
+if (!file) {
+  console.log('stdin form not supported yet.')
+  process.exit(1);
+}
+
+// Sender
+const pending: string[] = [];
+let writing = false;
+
+function writeMessage(message: string) {
+  writing = true;
+  process.stdout.write(message + '\n', checkPending);
+}
+
+function checkPending() {
+  writing = false;
+  if (pending.length) {
+    writeMessage(pending.shift());
+  }
+}
+
+function send(message: string) {
+  if (writing) {
+    pending.push(message);
+  } else {
+    writeMessage(message);
+  }
+}
+
+try {
+  let content = fs.readFileSync(file, 'utf8');
+  if (args['pwd']) {
+    content = content.replace(RE_PWD, args['pwd']);
+  }
+
+  const json = JSON.parse(content);
+  
+  if (Array.isArray(json)) {
+    for (const message of json) {
+      send(JSON.stringify(message));
+    }
+  } else {
+    throw Error('Expected an array for input messages.')
+  }
+} catch(e) {
+  console.error(`Error: ${e.message}`);
+  process.exit(2);
+}
\ No newline at end of file
diff --git a/integration/language_service_plugin/tools/typescript_validator.ts b/integration/language_service_plugin/tools/typescript_validator.ts
new file mode 100644
index 000000000000..0bad6a4d071a
--- /dev/null
+++ b/integration/language_service_plugin/tools/typescript_validator.ts
@@ -0,0 +1,164 @@
+import * as fs from 'fs';
+import * as minimist from 'minimist';
+
+let errorsDetected = false;
+
+const start = Date.now();
+
+function reportError(arg: string): boolean {
+  console.error(`Unknown argument: ${arg}`);
+  errorsDetected = true;
+  return false;
+}
+
+function help() {
+  console.log('TypeScript Validator')
+  console.log(`${process.argv[1]} [--expect <file-name> | --golden] [--pwd <dir>]`);
+  console.log(`
+  Validate that the emitted output produces the expect JSON.`)
+}
+
+let args = minimist(process.argv.slice(2), { string: ['expect', 'pwd'], boolean: ['golden'], unknown: reportError });
+
+if (!args.golden && !args.expect) {
+  console.log('Expected -golden or -expect');
+  errorsDetected = true;
+}
+
+if (args.golden && args.expect) {
+  console.log('Expected -golded or -expect but not both');
+  errorsDetected = true;
+}
+
+if (errorsDetected) {
+  help();
+  process.exit(2);
+}
+
+var expected: any;
+if (args.expect) {
+  expected = JSON.parse(fs.readFileSync(args.expect, 'utf8'));
+}
+
+// Reader
+let pending = Buffer.alloc(0);
+
+const prefix = 'Content-Length: ';
+
+function tryReadMessage(cb: (message: any) => void) {
+  const firstLine = pending.indexOf(10);
+  if (firstLine >= 1) {
+    const line = pending.toString('utf8', 0, firstLine);
+    if (!line.startsWith(prefix)) {
+      throw Error(`Unexpected input: ${line}`);
+    }
+    const length = +line.substring(prefix.length, firstLine - 1);
+    const dataStart = firstLine + 2;
+    const messageText = pending.toString('utf8', dataStart, dataStart + length);
+    const message = JSON.parse(messageText);
+    pending = pending.slice(dataStart + length + 1);
+    cb(message);
+    tryReadMessage(cb);
+  }
+}
+
+function collect(cb: (error: any, messages: any[]) => void) {
+  const result: any[] = [];
+
+  function report(error: any, messages: any[]) {
+    cb(error, messages);
+    cb = () => {};
+  }
+
+  process.stdin.on('error', report);
+  process.stdin.on('data', (data: Buffer) => {
+    try {
+      pending = Buffer.concat([pending, data], pending.length + data.length);
+      tryReadMessage((message: any) => {
+        result.push(message);    
+      });
+    } catch (e) {
+      report(e, []);
+    }
+  });
+
+  process.stdin.on('close', () => {
+    report(null, result);
+  });
+}
+
+function sanitize(messages: any[]): any[] {
+  return messages.filter((message: any) => {
+    return message && message.type == 'response';
+  }).map((message: any) => {
+    // Only preserve a fixed set of fields.
+    const result: any = {};
+    if (message.type != null) result.type = message.type;
+    if (message.command != null) result.command = message.command;
+    if (message.success != null) result.success = message.success;
+    if (message.body != null) result.body = message.body;
+    return result;
+  });
+}
+
+
+function isPrimitive(value: any): boolean {
+  return Object(value) !== value;
+}
+
+function expectPrimitive(received: any, expected: any) {
+  if (received !== expected) {
+    throw new Error(`Expected ${expected} but received ${received}`);
+  }
+}
+
+function expectArray(received: any, expected: any[]) {
+  if (!Array.isArray(received)) {
+    throw new Error(`Expected an array, received ${JSON.stringify(received)}`);
+  }
+  if (received.length != expected.length) {
+    throw new Error(`Expected an array length ${expected.length}, received ${JSON.stringify(received)}`);
+  }
+  for (let i = 0; i < expected.length; i++) {
+    expect(received[i], expected[i]);
+  }
+}
+
+function expectObject(received: any, expected: any) {
+  for (const name of Object.getOwnPropertyNames(expected)) {
+    if (!received.hasOwnProperty(name)) {
+      throw new Error(`Expected object an object containing a field ${name}, received  ${JSON.stringify(expected)}`);
+    }
+    expect(received[name], expected[name]);
+  }
+}
+
+function expect(received: any, expected: any) {
+  if (isPrimitive(expected)) {
+    expectPrimitive(received, expected);
+  } else if (Array.isArray(expected)) {
+    expectArray(received, expected);
+  } else {
+    expectObject(received, expected);
+  }
+}
+
+
+collect((err: any, messages: any[]) => {
+  if (err) {
+    console.error(err.message);
+    process.exit(1);
+  }
+  if (args.golden) {
+    console.log(JSON.stringify(sanitize(messages), null, ' '));
+  } else {
+    try {
+      expect(sanitize(messages), expected);
+      console.log('PASSED:', Date.now() - start, 'ms');
+      process.exit(0);
+    } catch(e) {
+      console.log('FAILED:', e.message);
+      process.exit(1);
+    }
+  }
+});
diff --git a/integration/language_service_plugin/tsconfig.json b/integration/language_service_plugin/tsconfig.json
new file mode 100644
index 000000000000..2c7260d1bcdb
--- /dev/null
+++ b/integration/language_service_plugin/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}
diff --git a/integration/language_service_plugin/typescripts/2.3/package.json b/integration/language_service_plugin/typescripts/2.3/package.json
new file mode 100644
index 000000000000..a76f86606d68
--- /dev/null
+++ b/integration/language_service_plugin/typescripts/2.3/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "2.3",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "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
new file mode 100644
index 000000000000..978ea5c25e08
--- /dev/null
+++ b/integration/language_service_plugin/typescripts/2.3/yarn.lock
@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.0.tgz#2e63e09284392bc8158a2444c33e2093795c0418"
diff --git a/integration/language_service_plugin/yarn.lock b/integration/language_service_plugin/yarn.lock
new file mode 100644
index 000000000000..2e3bc312da83
--- /dev/null
+++ b/integration/language_service_plugin/yarn.lock
@@ -0,0 +1,1004 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular/animations@file:../../dist/packages-dist/animations":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/common@file:../../dist/packages-dist/common":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@file:../../dist/packages-dist/compiler-cli":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    chokidar "^1.4.2"
+    minimist "^1.2.0"
+    reflect-metadata "^0.1.2"
+    tsickle "^0.27.2"
+
+"@angular/compiler@file:../../dist/packages-dist/compiler":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@file:../../dist/packages-dist/core":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/language-service@file:../../dist/packages-dist/language-service":
+  version "6.0.0-beta.7-8203e0365a"
+
+"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-server@file:../../dist/packages-dist/platform-server":
+  version "6.0.0-beta.7-8203e0365a"
+  dependencies:
+    domino "^2.0.1"
+    tslib "^1.9.0"
+    xhr2 "^0.1.4"
+
+"@types/minimist@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
+
+"@types/node@^7.0.5":
+  version "7.0.52"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.52.tgz#8990d3350375542b0c21a83cd0331e6a8fc86716"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+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-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  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.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+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"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+binary-extensions@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+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"
+
+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 "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+chokidar@^1.4.2:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+core-util-is@1.0.2, 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"
+
+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"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+debug@^2.2.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+domino@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.0.1.tgz#9e1d63215d0fe8dcb8202bff07effa1a216db504"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    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.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"
+    mime-types "^2.1.12"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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.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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.5:
+  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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+graceful-fs@^4.1.2:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+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@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-dotfile@^1.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.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-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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+isarray@1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+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"
+
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+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"
+
+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"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+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.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+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.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nan@^2.3.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
+
+node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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"
+
+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"
+
+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"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+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"
+
+oauth-sign@~0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+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"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+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.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+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.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+rc@^1.1.7:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.3.tgz#51575a900f8dd68381c710b4712c2154c3e2035b"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+reflect-metadata@^0.1.2:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.10.tgz#b4f83704416acad89988c9b15635d47e03b9344a"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+"rxjs@file:../../node_modules/rxjs":
+  version "6.0.0-alpha.4"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@^5.0.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+source-map-support@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.3.tgz#2b3d5fff298cfa4d1afd7d4352d569e9a0158e76"
+  dependencies:
+    source-map "^0.6.0"
+
+source-map@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+sshpk@^1.7.0:
+  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"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+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-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"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  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"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+tough-cookie@~2.3.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+tsickle@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.27.2.tgz#f33d46d046f73dd5c155a37922e422816e878736"
+  dependencies:
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
+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"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+"typescript@file:../../node_modules/typescript":
+  version "2.7.2"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+uuid@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.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"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xhr2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.4.tgz#7f87658847716db5026323812f818cadab387a5f"
+
+"zone.js@file:../../node_modules/zone.js":
+  version "0.8.20"
diff --git a/integration/ng_update/check.js b/integration/ng_update/check.js
new file mode 100644
index 000000000000..9b1898a23bc5
--- /dev/null
+++ b/integration/ng_update/check.js
@@ -0,0 +1,42 @@
+const fs = require('fs');
+const path = require('path');
+
+const angularRoot = path.resolve('./node_modules/@angular');
+const angularModules = fs.readdirSync(angularRoot).map(function (name) {
+  const content = fs.readFileSync(path.join(angularRoot, name, 'package.json'), 'utf-8').toString();
+  return JSON.parse(content);
+}).reduce(function (acc, packageJson) {
+  acc[packageJson.name] = packageJson;
+  return acc;
+}, Object.create(null));
+
+var error = false;
+Object.keys(angularModules).forEach(function (name) {
+  packageJson = angularModules[name];
+
+  const ngUpdate = packageJson['ng-update'];
+  if (!ngUpdate) {
+    console.error('Package ' + JSON.stringify(name) + ' does not have an "ng-update" key.');
+    error = true;
+    return;
+  }
+
+  const packageGroup = ngUpdate['packageGroup'];
+  if (!packageGroup) {
+    console.error('Package ' + JSON.stringify(name) + ' does not have a "packageGroup" key.');
+    error = true;
+    return;
+  }
+
+  // Verify that every packageGroup is represented in the list of modules.
+  Object.keys(angularModules).forEach(function (groupEntry) {
+    if (packageGroup.indexOf(groupEntry) == -1) {
+      console.error('Package ' + JSON.stringify(name) + ' is missing ' + JSON.stringify(groupEntry)
+        + ' as a packageGroup entry.');
+      error = true;
+      return;
+    }
+  });
+});
+
+process.exit(error ? 1 : 0);
diff --git a/integration/ng_update/package.json b/integration/ng_update/package.json
new file mode 100644
index 000000000000..0bd79d2311e0
--- /dev/null
+++ b/integration/ng_update/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "ng_update",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "",
+    "test": "node ./check.js"
+  },
+  "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/language-service": "file:../../dist/packages-dist/language-service",
+    "@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/platform-webworker": "file:../../dist/packages-dist/platform-webworker",
+    "@angular/platform-webworker-dynamic": "file:../../dist/packages-dist/platform-webworker-dynamic",
+    "@angular/router": "file:../../dist/packages-dist/router",
+    "@angular/service-worker": "file:../../dist/packages-dist/service-worker",
+    "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "file:../../node_modules/typescript",
+    "zone.js": "file:../../node_modules/zone.js"
+  }
+}
diff --git a/integration/ng_update/yarn.lock b/integration/ng_update/yarn.lock
new file mode 100644
index 000000000000..58bb0a5c9092
--- /dev/null
+++ b/integration/ng_update/yarn.lock
@@ -0,0 +1,1036 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular/animations@file:../../dist/packages-dist/animations":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/common@file:../../dist/packages-dist/common":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@file:../../dist/packages-dist/compiler-cli":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    chokidar "^1.4.2"
+    minimist "^1.2.0"
+    reflect-metadata "^0.1.2"
+    tsickle "^0.27.2"
+
+"@angular/compiler@file:../../dist/packages-dist/compiler":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/core@file:../../dist/packages-dist/core":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/forms@file:../../dist/packages-dist/forms":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/http@file:../../dist/packages-dist/http":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/language-service@file:../../dist/packages-dist/language-service":
+  version "6.0.0-rc.0-b32e6343a3"
+
+"@angular/platform-browser-dynamic@file:../../dist/packages-dist/platform-browser-dynamic":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-server@file:../../dist/packages-dist/platform-server":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    domino "^2.0.1"
+    tslib "^1.9.0"
+    xhr2 "^0.1.4"
+
+"@angular/platform-webworker-dynamic@file:../../dist/packages-dist/platform-webworker-dynamic":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/platform-webworker@file:../../dist/packages-dist/platform-webworker":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/router@file:../../dist/packages-dist/router":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/service-worker@file:../../dist/packages-dist/service-worker":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/upgrade@file:../../dist/packages-dist/upgrade":
+  version "6.0.0-rc.0-b32e6343a3"
+  dependencies:
+    tslib "^1.9.0"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+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-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  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.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+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"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+binary-extensions@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+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"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+chokidar@^1.4.2:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+core-util-is@1.0.2, 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"
+
+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"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+debug@^2.2.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+domino@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.0.2.tgz#fa2da6ace8381cf64089079470ee33c53901010f"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+filename-regex@^2.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    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.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"
+    mime-types "^2.1.12"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+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.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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.5:
+  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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+graceful-fs@^4.1.2:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+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@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-dotfile@^1.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.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-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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+isarray@1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+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"
+
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+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"
+
+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"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
+
+mime-types@^2.1.12, mime-types@~2.1.7:
+  version "2.1.18"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
+  dependencies:
+    mime-db "~1.33.0"
+
+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.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+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.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nan@^2.3.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+
+node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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"
+
+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"
+
+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"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+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"
+
+oauth-sign@~0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+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"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+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.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+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.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+rc@^1.1.7:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.6.tgz#eb18989c6d4f4f162c399f79ddd29f3835568092"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.5.tgz#b4f85003a938cbb6ecbce2a124fb1012bd1a838d"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+reflect-metadata@^0.1.2:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.12.tgz#311bf0c6b63cd782f228a81abe146a2bfa9c56f2"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+"rxjs@file:../../node_modules/rxjs":
+  version "6.0.0-beta.4"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@^5.0.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+semver@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+source-map-support@^0.5.0:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.4.tgz#54456efa89caa9270af7cd624cc2f123e51fbae8"
+  dependencies:
+    source-map "^0.6.0"
+
+source-map@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+sshpk@^1.7.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.1.tgz#130f5975eddad963f1d56f92b9ac6c51fa9f83eb"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+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:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+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-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"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  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"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+tough-cookie@~2.3.0:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
+  dependencies:
+    punycode "^1.4.1"
+
+tsickle@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.27.2.tgz#f33d46d046f73dd5c155a37922e422816e878736"
+  dependencies:
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
+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"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+"typescript@file:../../node_modules/typescript":
+  version "2.7.2"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+uuid@^3.0.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.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"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xhr2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.4.tgz#7f87658847716db5026323812f818cadab387a5f"
+
+"zone.js@file:../../node_modules/zone.js":
+  version "0.8.20"
diff --git a/integration/platform-server/README.md b/integration/platform-server/README.md
new file mode 100644
index 000000000000..318f84d82366
--- /dev/null
+++ b/integration/platform-server/README.md
@@ -0,0 +1,7 @@
+To add a new server side rendering E2E test
+
+- Add a new server side rendered application to src/
+- Edit webpack.client.config.js to add new entry point for the new client bundle
+- The index.html can access the client bundle from /built/<bundle-name>.js
+- Edit src/server.ts to add the server side application to a new URL
+- Add a protractor test in e2e/ to test with the new URL
diff --git a/integration/platform-server/build.sh b/integration/platform-server/build.sh
new file mode 100755
index 000000000000..09c6c62d836b
--- /dev/null
+++ b/integration/platform-server/build.sh
@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+set -eu -o pipefail
+
+rm -rf built
+
+ngc
+
+# This is to mainlt copy the index.html to be packaged into the server.
+cp -r src/* built/src
+
+# Bundle the server which hosts all the server side apps.
+webpack  --config webpack.server.config.js
+
+# Bundle the clients into individual bundles.
+webpack  --config webpack.client.config.js
\ No newline at end of file
diff --git a/integration/platform-server/e2e/helloworld-spec.ts b/integration/platform-server/e2e/helloworld-spec.ts
new file mode 100644
index 000000000000..594c9ab01a6e
--- /dev/null
+++ b/integration/platform-server/e2e/helloworld-spec.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 {browser, by, element} from 'protractor';
+
+import {verifyNoBrowserErrors} from './util';
+
+describe('Hello world E2E Tests', function() {
+  it('should display: Hello world!', function() {
+    // Load the page without waiting for Angular since it is not bootstrapped automatically.
+    browser.driver.get(browser.baseUrl + 'helloworld');
+
+    const style = browser.driver.findElement(by.css('style[ng-transition="hlw"]'));
+    expect(style.getText()).not.toBeNull();
+
+    // Test the contents from the server.
+    const serverDiv = browser.driver.findElement(by.css('div'));
+    expect(serverDiv.getText()).toEqual('Hello world!');
+
+    // Bootstrap the client side app.
+    browser.executeScript('doBootstrap()');
+
+    // Retest the contents after the client bootstraps.
+    expect(element(by.css('div')).getText()).toEqual('Hello world!');
+
+    // Make sure the server styles got replaced by client side ones.
+    expect(element(by.css('style[ng-transition="hlw"]')).isPresent()).toBe(false);
+    expect(element(by.css('style')).getText()).toBe('');
+
+    // Make sure there were no client side errors.
+    verifyNoBrowserErrors();
+  });
+});
diff --git a/integration/platform-server/e2e/protractor.config.js b/integration/platform-server/e2e/protractor.config.js
new file mode 100644
index 000000000000..92cb61607c82
--- /dev/null
+++ b/integration/platform-server/e2e/protractor.config.js
@@ -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
+ */
+
+exports.config = {
+  specs: ['../built/e2e/*-spec.js'],
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      args: ['--no-sandbox'],
+      binary: process.env.CHROME_BIN,
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:9876/',
+  framework: 'jasmine',
+  useAllAngular2AppRoots: true
+};
diff --git a/integration/platform-server/e2e/transferstate-spec.ts b/integration/platform-server/e2e/transferstate-spec.ts
new file mode 100644
index 000000000000..c7d5cc8f6137
--- /dev/null
+++ b/integration/platform-server/e2e/transferstate-spec.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 {browser, by, element} from 'protractor';
+
+import {verifyNoBrowserErrors} from './util';
+
+describe('TransferState', function() {
+  it('should transfer component state', function() {
+    // Load the page without waiting for Angular since it is not bootstrapped automatically.
+    browser.driver.get(browser.baseUrl + 'transferstate');
+
+    // Test the contents from the server.
+    const serverDiv = browser.driver.findElement(by.css('div'));
+    expect(serverDiv.getText()).toEqual('5');
+
+    // Bootstrap the client side app and retest the contents
+    browser.executeScript('doBootstrap()');
+    expect(element(by.css('div')).getText()).toEqual('50');
+
+    // Make sure there were no client side errors.
+    verifyNoBrowserErrors();
+  });
+});
diff --git a/integration/platform-server/e2e/tsconfig.json b/integration/platform-server/e2e/tsconfig.json
new file mode 100644
index 000000000000..c70d9a1cf54a
--- /dev/null
+++ b/integration/platform-server/e2e/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "outDir": "../built/e2e",
+    "types": ["jasmine"],
+    // TODO(alexeagle): was required for Protractor 4.0.11
+    "skipLibCheck": true
+  }
+}
diff --git a/integration/platform-server/e2e/util.ts b/integration/platform-server/e2e/util.ts
new file mode 100644
index 000000000000..3002af5d6b9e
--- /dev/null
+++ b/integration/platform-server/e2e/util.ts
@@ -0,0 +1,25 @@
+/**
+ * @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
+ */
+/* tslint:disable:no-console  */
+import * as webdriver from 'selenium-webdriver';
+declare var browser: any;
+declare var expect: any;
+
+export function verifyNoBrowserErrors() {
+  browser.manage().logs().get('browser').then(function(browserLog: any[]) {
+    const errors: any[] = [];
+    browserLog.filter(logEntry => {
+      const msg = logEntry.message;
+      console.log('>> ' + msg);
+      if (logEntry.level.value >= webdriver.logging.Level.INFO.value) {
+        errors.push(msg);
+      }
+    });
+    expect(errors).toEqual([]);
+  });
+}
diff --git a/integration/platform-server/package.json b/integration/platform-server/package.json
new file mode 100644
index 000000000000..074e55772a70
--- /dev/null
+++ b/integration/platform-server/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "platform-server-integration",
+  "version": "0.0.0",
+  "license": "MIT",
+  "description": "Integration tests for @angular/platform-server",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "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/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",
+    "express": "^4.14.1",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "file:../../node_modules/typescript",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "devDependencies": {
+    "@types/jasmine": "2.5.41",
+    "babel-core": "^6.23.1",
+    "babel-loader": "^6.4.0",
+    "babel-preset-es2015": "^6.22.0",
+    "concurrently": "3.1.0",
+    "protractor": "file:../../node_modules/protractor",
+    "raw-loader": "^0.5.1",
+    "webpack": "^2.2.1"
+  },
+  "scripts": {
+    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG",
+    "build": "./build.sh",
+    "test": "npm run build && concurrently \"npm run serve\" \"npm run protractor\" --kill-others --success first",
+    "serve": "node built/server-bundle.js",
+    "preprotractor": "tsc -p e2e",
+    "protractor": "protractor e2e/protractor.config.js"
+  }
+}
diff --git a/integration/platform-server/src/helloworld/app.server.ts b/integration/platform-server/src/helloworld/app.server.ts
new file mode 100644
index 000000000000..c07d2f4837e3
--- /dev/null
+++ b/integration/platform-server/src/helloworld/app.server.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
+ */
+
+import {NgModule} from '@angular/core';
+import {ServerModule} from '@angular/platform-server';
+
+import {HelloWorldModule} from './app';
+import {HelloWorldComponent} from './hello-world.component';
+
+@NgModule({
+  bootstrap: [HelloWorldComponent],
+  imports: [HelloWorldModule, ServerModule],
+})
+export class HelloWorldServerModule {
+}
diff --git a/integration/platform-server/src/helloworld/app.ts b/integration/platform-server/src/helloworld/app.ts
new file mode 100644
index 000000000000..50a2898ae566
--- /dev/null
+++ b/integration/platform-server/src/helloworld/app.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
+ */
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {HelloWorldComponent} from './hello-world.component';
+
+@NgModule({
+  declarations: [HelloWorldComponent],
+  bootstrap: [HelloWorldComponent],
+  imports: [BrowserModule.withServerTransition({appId: 'hlw'})],
+})
+export class HelloWorldModule {
+}
diff --git a/integration/platform-server/src/helloworld/client.ts b/integration/platform-server/src/helloworld/client.ts
new file mode 100644
index 000000000000..b2ecbecac401
--- /dev/null
+++ b/integration/platform-server/src/helloworld/client.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 'zone.js/dist/zone.js';
+
+import {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+import {HelloWorldModuleNgFactory} from './app.ngfactory';
+
+window['doBootstrap'] = function() {
+  platformBrowser().bootstrapModuleFactory(HelloWorldModuleNgFactory);
+};
diff --git a/integration/platform-server/src/helloworld/hello-world.component.ts b/integration/platform-server/src/helloworld/hello-world.component.ts
new file mode 100644
index 000000000000..79e99e0063ae
--- /dev/null
+++ b/integration/platform-server/src/helloworld/hello-world.component.ts
@@ -0,0 +1,24 @@
+/**
+ * @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';
+
+@Component({
+  selector: 'hello-world-app',
+  template: `
+    <div>Hello {{ name }}!</div>
+  `,
+  styles: [`
+    div {
+      font-weight: bold;
+    }
+  `]
+})
+export class HelloWorldComponent {
+  name: string = 'world';
+}
diff --git a/integration/platform-server/src/helloworld/index.html b/integration/platform-server/src/helloworld/index.html
new file mode 100644
index 000000000000..9da04776ae3f
--- /dev/null
+++ b/integration/platform-server/src/helloworld/index.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Hello World</title>
+  <script src="built/helloworld-bundle.js"></script>
+</head>
+<body>
+  <hello-world-app></hello-world-app>
+</body>
+</html>
diff --git a/integration/platform-server/src/server.ts b/integration/platform-server/src/server.ts
new file mode 100644
index 000000000000..2c4a0280ed0d
--- /dev/null
+++ b/integration/platform-server/src/server.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
+ */
+/* tslint:disable:no-console  */
+require('zone.js/dist/zone-node.js');
+
+import {enableProdMode, NgModuleFactory} from '@angular/core';
+import {renderModuleFactory} from '@angular/platform-server';
+import * as express from 'express';
+
+import {HelloWorldServerModuleNgFactory} from './helloworld/app.server.ngfactory';
+const helloworld = require('raw-loader!./helloworld/index.html');
+
+import {TransferStateServerModuleNgFactory} from './transferstate/app.server.ngfactory';
+const transferstate = require('raw-loader!./transferstate/index.html');
+
+const app = express();
+
+function render<T>(moduleFactory: NgModuleFactory<T>, html: string) {
+  return (req, res) => {
+    renderModuleFactory(moduleFactory, {
+      document: html,
+      url: req.url,
+    }).then((response) => { res.send(response); });
+  };
+}
+
+enableProdMode();
+
+// Client bundles will be statically served from the built/ directory.
+app.use('/built', express.static('built'));
+
+// Keep the browser logs free of errors.
+app.get('/favicon.ico', (req, res) => { res.send(''); });
+
+//-----------ADD YOUR SERVER SIDE RENDERED APP HERE ----------------------
+app.get('/helloworld', render(HelloWorldServerModuleNgFactory, helloworld));
+app.get('/transferstate', render(TransferStateServerModuleNgFactory, transferstate));
+
+app.listen(9876, function() { console.log('Server listening on port 9876!'); });
\ No newline at end of file
diff --git a/integration/platform-server/src/transferstate/app.server.ts b/integration/platform-server/src/transferstate/app.server.ts
new file mode 100644
index 000000000000..7cc606b5768c
--- /dev/null
+++ b/integration/platform-server/src/transferstate/app.server.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
+ */
+
+import {NgModule} from '@angular/core';
+import {ServerModule, ServerTransferStateModule} from '@angular/platform-server';
+
+import {TransferStateModule} from './app';
+import {TransferStateComponent} from './transfer-state.component';
+
+@NgModule({
+  bootstrap: [TransferStateComponent],
+  imports: [TransferStateModule, ServerModule, ServerTransferStateModule],
+})
+export class TransferStateServerModule {
+}
diff --git a/integration/platform-server/src/transferstate/app.ts b/integration/platform-server/src/transferstate/app.ts
new file mode 100644
index 000000000000..576c0b1967f5
--- /dev/null
+++ b/integration/platform-server/src/transferstate/app.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {BrowserModule, BrowserTransferStateModule} from '@angular/platform-browser';
+
+import {TransferStateComponent} from './transfer-state.component';
+
+@NgModule({
+  declarations: [TransferStateComponent],
+  bootstrap: [TransferStateComponent],
+  imports: [
+    BrowserModule.withServerTransition({appId: 'ts'}),
+    BrowserTransferStateModule,
+  ],
+})
+export class TransferStateModule {
+}
diff --git a/integration/platform-server/src/transferstate/client.ts b/integration/platform-server/src/transferstate/client.ts
new file mode 100644
index 000000000000..1ea8affe353b
--- /dev/null
+++ b/integration/platform-server/src/transferstate/client.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 'zone.js/dist/zone.js';
+
+import {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+import {TransferStateModuleNgFactory} from './app.ngfactory';
+
+window['doBootstrap'] = function() {
+  platformBrowser().bootstrapModuleFactory(TransferStateModuleNgFactory);
+};
diff --git a/integration/platform-server/src/transferstate/index.html b/integration/platform-server/src/transferstate/index.html
new file mode 100644
index 000000000000..b6b699fc8517
--- /dev/null
+++ b/integration/platform-server/src/transferstate/index.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Hello World</title>
+  <script src="built/transferstate-bundle.js"></script>
+</head>
+<body>
+  <transfer-state-app></transfer-state-app>
+</body>
+</html>
diff --git a/integration/platform-server/src/transferstate/transfer-state.component.ts b/integration/platform-server/src/transferstate/transfer-state.component.ts
new file mode 100644
index 000000000000..1bf40a67ff25
--- /dev/null
+++ b/integration/platform-server/src/transferstate/transfer-state.component.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 {isPlatformServer} from '@angular/common';
+import {Component, Inject, PLATFORM_ID} from '@angular/core';
+import {StateKey, TransferState, makeStateKey} from '@angular/platform-browser';
+
+const COUNTER_KEY = makeStateKey<number>('counter');
+
+@Component({
+  selector: 'transfer-state-app',
+  template: `
+    <div>{{counter}}</div>
+  `,
+})
+export class TransferStateComponent {
+  counter = 0;
+
+  constructor(@Inject(PLATFORM_ID) private platformId: {}, private transferState: TransferState) {}
+
+  ngOnInit() {
+    if (isPlatformServer(this.platformId)) {
+      // Set it to 5 in the server.
+      this.counter = 5;
+      this.transferState.set(COUNTER_KEY, 50);
+    } else {
+      // Get the transferred counter state in the client(should be 50 and not 0).
+      this.counter = this.transferState.get(COUNTER_KEY, 0);
+    }
+  }
+}
diff --git a/integration/platform-server/tsconfig.json b/integration/platform-server/tsconfig.json
new file mode 100644
index 000000000000..d54783edd440
--- /dev/null
+++ b/integration/platform-server/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "angularCompilerOptions": {
+    "annotationsAs": "static fields",
+    "annotateForClosureCompiler": true
+  },
+
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    // TODO(i): strictNullChecks should turned on but are temporarily disabled due to #15432
+    "strictNullChecks": false,
+    "target": "es6",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "experimentalDecorators": true,
+    "outDir": "built",
+    "rootDir": ".",
+    "declaration": true,
+    "typeRoots": ["node_modules/@types"]
+  },
+
+  "exclude": [
+    "vendor",
+    "node_modules",
+    "built",
+    "dist",
+    "e2e"
+  ]
+}
diff --git a/integration/platform-server/webpack.client.config.js b/integration/platform-server/webpack.client.config.js
new file mode 100644
index 000000000000..05684eccb75b
--- /dev/null
+++ b/integration/platform-server/webpack.client.config.js
@@ -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
+ */
+
+const path = require('path');
+
+module.exports = {
+  entry: {
+    helloworld: './built/src/helloworld/client.js',
+    transferstate: './built/src/transferstate/client.js',
+  },
+  output: {path: path.join(__dirname, 'built'), filename: '[name]-bundle.js'},
+  module: {loaders: [{test: /\.js$/, loader: 'babel-loader?presets[]=es2015'}]},
+  resolve: {extensions: ['.js']}
+};
diff --git a/integration/platform-server/webpack.server.config.js b/integration/platform-server/webpack.server.config.js
new file mode 100644
index 000000000000..286d8df00383
--- /dev/null
+++ b/integration/platform-server/webpack.server.config.js
@@ -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.exports = {
+  target: 'node',
+  entry: './built/src/server.js',
+  output: {filename: './built/server-bundle.js'},
+  resolve: {extensions: ['.js']},
+};
diff --git a/integration/run_tests.sh b/integration/run_tests.sh
new file mode 100755
index 000000000000..ca35c2d44415
--- /dev/null
+++ b/integration/run_tests.sh
@@ -0,0 +1,66 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# see https://circleci.com/docs/2.0/env-vars/#circleci-built-in-environment-variables
+CI=${CI:-false}
+
+cd "$(dirname "$0")"
+
+# basedir is the workspace root
+readonly basedir=$(pwd)/..
+
+# Track payload size functions
+if $CI; then
+  # We don't install this by default because it contains some broken Bazel setup
+  # and also it's a very big dependency that we never use except when publishing
+  # payload sizes on CI.
+  yarn add --silent -D firebase-tools@3.12.0
+  source ${basedir}/scripts/ci/payload-size.sh
+
+  # NB: we don't run build-packages-dist.sh because we expect that it was done
+  # by an earlier job in the CircleCI workflow.
+else
+  # Not on CircleCI so let's build the packages-dist directory.
+  # This should be fast on incremental re-build.
+  ${basedir}/scripts/build-packages-dist.sh
+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
+function rm_cache {
+  rm -rf $cache
+}
+rm_cache
+mkdir $cache
+trap rm_cache EXIT
+
+for testDir in $(ls | grep -v node_modules) ; do
+  [[ -d "$testDir" ]] || continue
+  echo "#################################"
+  echo "Running integration test $testDir"
+  echo "#################################"
+  (
+    cd $testDir
+    rm -rf dist
+
+    yarn install --cache-folder ../$cache
+    yarn test || exit 1
+    # Track payload size for cli-hello-world and hello_world__closure and the render3 tests
+    if [[ $testDir == cli-hello-world ]] || [[ $testDir == hello_world__closure ]] || [[ $testDir == hello_world__render3__closure ]] || [[ $testDir == hello_world__render3__rollup ]] || [[ $testDir == hello_world__render3__cli ]]; then
+      if [[ $testDir == cli-hello-world ]] || [[ $testDir == hello_world__render3__cli ]]; then
+        yarn build
+      fi
+      #if $CI; then
+      #  trackPayloadSize "$testDir" "dist/*.js" true false "${basedir}/integration/_payload-limits.json"
+      #fi
+    fi
+    # remove the temporary node modules directory to keep the source folder clean.
+    rm -rf node_modules
+  )
+done
+
+#if $CI; then
+#  trackPayloadSize "umd" "../dist/packages-dist/*/bundles/*.umd.min.js" false false
+#fi
diff --git a/integration/typings_test_ts27/include-all.ts b/integration/typings_test_ts27/include-all.ts
new file mode 100644
index 000000000000..ca81c56472ba
--- /dev/null
+++ b/integration/typings_test_ts27/include-all.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 elements from '@angular/elements';
+import * as forms from '@angular/forms';
+import * as http from '@angular/http';
+import * as httpTesting from '@angular/http/testing';
+import * as platformBrowser from '@angular/platform-browser';
+import * as platformBrowserTesting from '@angular/platform-browser/testing';
+import * as platformBrowserDynamic from '@angular/platform-browser-dynamic';
+import * as platformServer from '@angular/platform-server';
+import * as platformServerTesting from '@angular/platform-server/testing';
+import * as platformWebworker from '@angular/platform-webworker';
+import * as platformWebworkerDynamic from '@angular/platform-webworker-dynamic';
+import * as router from '@angular/router';
+import * as routerTesting from '@angular/router/testing';
+import * as serviceWorker from '@angular/service-worker';
+import * as upgrade from '@angular/upgrade';
+
+export default {
+  compiler,
+  compilerTesting,
+  core,
+  coreTesting,
+  elements,
+  forms,
+  http,
+  httpTesting,
+  platformBrowser,
+  platformBrowserTesting,
+  platformBrowserDynamic,
+  platformServer,
+  platformServerTesting,
+  platformWebworker,
+  platformWebworkerDynamic,
+  router,
+  routerTesting,
+  serviceWorker,
+  upgrade,
+};
diff --git a/integration/typings_test_ts27/package.json b/integration/typings_test_ts27/package.json
new file mode 100644
index 000000000000..f601b04922b5
--- /dev/null
+++ b/integration/typings_test_ts27/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "angular-integration",
+  "description": "Assert that users with TypeScript 2.7 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/elements": "file:../../dist/packages-dist/elements",
+    "@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/platform-webworker": "file:../../dist/packages-dist/platform-webworker",
+    "@angular/platform-webworker-dynamic": "file:../../dist/packages-dist/platform-webworker-dynamic",
+    "@angular/router": "file:../../dist/packages-dist/router",
+    "@angular/service-worker": "file:../../dist/packages-dist/service-worker",
+    "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
+    "@types/jasmine": "2.5.41",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "2.7.x",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "scripts": {
+    "test": "tsc"
+  }
+}
diff --git a/integration/typings_test_ts27/tsconfig.json b/integration/typings_test_ts27/tsconfig.json
new file mode 100644
index 000000000000..55de6011ace1
--- /dev/null
+++ b/integration/typings_test_ts27/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../../dist/typings_test_ts27/",
+    "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/integration/typings_test_ts28/include-all.ts b/integration/typings_test_ts28/include-all.ts
new file mode 100644
index 000000000000..ca81c56472ba
--- /dev/null
+++ b/integration/typings_test_ts28/include-all.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 elements from '@angular/elements';
+import * as forms from '@angular/forms';
+import * as http from '@angular/http';
+import * as httpTesting from '@angular/http/testing';
+import * as platformBrowser from '@angular/platform-browser';
+import * as platformBrowserTesting from '@angular/platform-browser/testing';
+import * as platformBrowserDynamic from '@angular/platform-browser-dynamic';
+import * as platformServer from '@angular/platform-server';
+import * as platformServerTesting from '@angular/platform-server/testing';
+import * as platformWebworker from '@angular/platform-webworker';
+import * as platformWebworkerDynamic from '@angular/platform-webworker-dynamic';
+import * as router from '@angular/router';
+import * as routerTesting from '@angular/router/testing';
+import * as serviceWorker from '@angular/service-worker';
+import * as upgrade from '@angular/upgrade';
+
+export default {
+  compiler,
+  compilerTesting,
+  core,
+  coreTesting,
+  elements,
+  forms,
+  http,
+  httpTesting,
+  platformBrowser,
+  platformBrowserTesting,
+  platformBrowserDynamic,
+  platformServer,
+  platformServerTesting,
+  platformWebworker,
+  platformWebworkerDynamic,
+  router,
+  routerTesting,
+  serviceWorker,
+  upgrade,
+};
diff --git a/integration/typings_test_ts28/package.json b/integration/typings_test_ts28/package.json
new file mode 100644
index 000000000000..10a38622bdbb
--- /dev/null
+++ b/integration/typings_test_ts28/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "angular-integration",
+  "description": "Assert that users with TypeScript 2.8 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/elements": "file:../../dist/packages-dist/elements",
+    "@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/platform-webworker": "file:../../dist/packages-dist/platform-webworker",
+    "@angular/platform-webworker-dynamic": "file:../../dist/packages-dist/platform-webworker-dynamic",
+    "@angular/router": "file:../../dist/packages-dist/router",
+    "@angular/service-worker": "file:../../dist/packages-dist/service-worker",
+    "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
+    "@types/jasmine": "2.5.41",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "2.8.x",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "scripts": {
+    "test": "tsc"
+  }
+}
diff --git a/integration/typings_test_ts28/tsconfig.json b/integration/typings_test_ts28/tsconfig.json
new file mode 100644
index 000000000000..165bd7a957b2
--- /dev/null
+++ b/integration/typings_test_ts28/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../../dist/typings_test_ts28/",
+    "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/integration/typings_test_ts29/include-all.ts b/integration/typings_test_ts29/include-all.ts
new file mode 100644
index 000000000000..ca81c56472ba
--- /dev/null
+++ b/integration/typings_test_ts29/include-all.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 elements from '@angular/elements';
+import * as forms from '@angular/forms';
+import * as http from '@angular/http';
+import * as httpTesting from '@angular/http/testing';
+import * as platformBrowser from '@angular/platform-browser';
+import * as platformBrowserTesting from '@angular/platform-browser/testing';
+import * as platformBrowserDynamic from '@angular/platform-browser-dynamic';
+import * as platformServer from '@angular/platform-server';
+import * as platformServerTesting from '@angular/platform-server/testing';
+import * as platformWebworker from '@angular/platform-webworker';
+import * as platformWebworkerDynamic from '@angular/platform-webworker-dynamic';
+import * as router from '@angular/router';
+import * as routerTesting from '@angular/router/testing';
+import * as serviceWorker from '@angular/service-worker';
+import * as upgrade from '@angular/upgrade';
+
+export default {
+  compiler,
+  compilerTesting,
+  core,
+  coreTesting,
+  elements,
+  forms,
+  http,
+  httpTesting,
+  platformBrowser,
+  platformBrowserTesting,
+  platformBrowserDynamic,
+  platformServer,
+  platformServerTesting,
+  platformWebworker,
+  platformWebworkerDynamic,
+  router,
+  routerTesting,
+  serviceWorker,
+  upgrade,
+};
diff --git a/integration/typings_test_ts29/package.json b/integration/typings_test_ts29/package.json
new file mode 100644
index 000000000000..3b1a092dc937
--- /dev/null
+++ b/integration/typings_test_ts29/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "angular-integration",
+  "description": "Assert that users with TypeScript 2.9 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/elements": "file:../../dist/packages-dist/elements",
+    "@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/platform-webworker": "file:../../dist/packages-dist/platform-webworker",
+    "@angular/platform-webworker-dynamic": "file:../../dist/packages-dist/platform-webworker-dynamic",
+    "@angular/router": "file:../../dist/packages-dist/router",
+    "@angular/service-worker": "file:../../dist/packages-dist/service-worker",
+    "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
+    "@types/jasmine": "2.5.41",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "2.9.x",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "scripts": {
+    "test": "tsc"
+  }
+}
diff --git a/integration/typings_test_ts29/tsconfig.json b/integration/typings_test_ts29/tsconfig.json
new file mode 100644
index 000000000000..165bd7a957b2
--- /dev/null
+++ b/integration/typings_test_ts29/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../../dist/typings_test_ts28/",
+    "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-dart.conf.js b/karma-dart.conf.js
deleted file mode 100644
index d7e21b3d5a26..000000000000
--- a/karma-dart.conf.js
+++ /dev/null
@@ -1,60 +0,0 @@
-// Karma configuration
-// Generated on Thu Sep 25 2014 11:52:02 GMT-0700 (PDT)
-module.exports = function(config) {
-  config.set({
-
-    frameworks: ['dart-unittest'],
-
-    files: [
-      // Init and configure guiness.
-      {pattern: 'test-init.dart', included: true},
-      // Unit test files needs to be included.
-      {pattern: 'dist/dart/**/*_spec.dart', included: true, watched: false},
-
-      // Karma-dart via the dart-unittest framework generates
-      // `__adapter_unittest.dart` that imports these files.
-      {pattern: 'dist/dart/**', included: false, watched: false},
-
-      // Dependencies, installed with `pub install`.
-      {pattern: 'packages/**/*.dart', included: false, watched: false},
-
-      // Init and configure guiness.
-      {pattern: 'test-main.dart', included: true},
-      {pattern: 'modules/**/test/**/static_assets/**', included: false, watched: false},
-    ],
-
-    exclude: [
-      'dist/dart/**/packages/**',
-    ],
-
-    karmaDartImports: {
-      guinness: 'package:guinness/guinness_html.dart'
-    },
-
-    // Map packages to the correct urls where Karma serves them.
-    proxies: {
-      // Dependencies installed with `pub install`.
-      '/packages/unittest': '/base/packages/unittest',
-      '/packages/guinness': '/base/packages/guinness',
-      '/packages/matcher': '/base/packages/matcher',
-      '/packages/stack_trace': '/base/packages/stack_trace',
-      '/packages/collection': '/base/packages/collection',
-      '/packages/path': '/base/packages/path',
-
-      // Local dependencies, transpiled from the source.
-      '/packages/angular2': '/base/dist/dart/angular2/lib',
-      '/packages/angular2_material': '/base/dist/dart/angular2_material/lib',
-      '/packages/benchpress': '/base/dist/dart/benchpress/lib',
-      '/packages/examples': '/base/dist/dart/examples/lib'
-    },
-
-    customLaunchers: {
-      DartiumWithWebPlatform: {
-        base: 'Dartium',
-        flags: ['--enable-experimental-web-platform-features'] }
-    },
-    browsers: ['DartiumWithWebPlatform'],
-
-    port: 9877
-  });
-};
diff --git a/karma-js.conf.js b/karma-js.conf.js
index 5fd438f3d885..f9ecc2b27f7f 100644
--- a/karma-js.conf.js
+++ b/karma-js.conf.js
@@ -1,3 +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
+ */
+
+const browserProvidersConf = require('./browser-providers.conf');
+const {generateSeed} = require('./tools/jasmine-seed-generator');
+
 // Karma configuration
 // Generated on Thu Sep 25 2014 11:52:02 GMT-0700 (PDT)
 module.exports = function(config) {
@@ -5,43 +16,153 @@ module.exports = function(config) {
 
     frameworks: ['jasmine'],
 
+    client: {
+      jasmine: {
+        random: true,
+        seed: generateSeed('karma-js.conf'),
+      },
+    },
+
     files: [
       // Sources and specs.
-      // Loaded through the es6-module-loader, in `test-main.js`.
-      {pattern: 'dist/js/dev/es5/**', included: false, watched: false},
+      // Loaded through the System loader, in `test-main.js`.
+      {pattern: 'dist/all/@angular/**/*.js', included: false, watched: true},
+
+      // Serve AngularJS for `ngUpgrade` testing.
+      {pattern: 'node_modules/angular-1.5/angular.js', included: false, watched: false},
+      {pattern: 'node_modules/angular-mocks-1.5/angular-mocks.js', included: false, watched: false},
+      {pattern: 'node_modules/angular-1.6/angular.js', included: false, watched: false},
+      {pattern: 'node_modules/angular-mocks-1.6/angular-mocks.js', included: false, watched: false},
+      {pattern: 'node_modules/angular/angular.js', included: false, watched: false},
+      {pattern: 'node_modules/angular-mocks/angular-mocks.js', included: false, watched: false},
 
-      // zone-microtask must be included first as it contains a Promise monkey patch
-      'node_modules/zone.js/dist/zone-microtask.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
+      'node_modules/core-js/client/core.js',
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/zone.js/dist/zone-testing.js',
+      'node_modules/zone.js/dist/task-tracking.js',
 
-      'node_modules/traceur/bin/traceur-runtime.js',
-      'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js',
       // Including systemjs because it defines `__eval`, which produces correct stack traces.
+      'test-events.js',
+      'shims_for_IE.js',
       'node_modules/systemjs/dist/system.src.js',
-      'node_modules/systemjs/lib/extension-register.js',
-      'node_modules/systemjs/lib/extension-cjs.js',
-      'node_modules/rx/dist/rx.js',
+
+      // Serve polyfills necessary for testing the `elements` package.
+      {
+        pattern: 'node_modules/@webcomponents/custom-elements/**/*.js',
+        included: false,
+        watched: false
+      },
+      {pattern: 'node_modules/mutation-observer/index.js', included: false, watched: false},
+
+      {pattern: 'node_modules/rxjs/**', included: false, watched: false, served: true},
       'node_modules/reflect-metadata/Reflect.js',
       'tools/build/file2modulename.js',
       'test-main.js',
-      {pattern: 'modules/**/test/**/static_assets/**', included: false, watched: false}
+      {pattern: 'dist/all/@angular/empty.*', included: false, watched: false},
+      {pattern: 'packages/platform-browser/test/static_assets/**', included: false, watched: false},
+      {
+        pattern: 'packages/platform-browser/test/browser/static_assets/**',
+        included: false,
+        watched: false,
+      },
+      {pattern: 'packages/common/i18n/**', included: false, watched: false, served: true},
     ],
 
     exclude: [
-      'dist/js/dev/es5/**/e2e_test/**',
+      'dist/all/@angular/_testing_init/**',
+      'dist/all/@angular/**/e2e_test/**',
+      'dist/all/@angular/**/*node_only_spec.js',
+      'dist/all/@angular/benchpress/**',
+      'dist/all/@angular/compiler-cli/**',
+      'dist/all/@angular/compiler-cli/src/ngtsc/**',
+      'dist/all/@angular/compiler-cli/test/compliance/**',
+      'dist/all/@angular/compiler-cli/test/ngtsc/**',
+      'dist/all/@angular/compiler/test/aot/**',
+      'dist/all/@angular/compiler/test/render3/**',
+      'dist/all/@angular/core/test/bundling/**',
+      'dist/all/@angular/core/test/render3/ivy/**',
+      'dist/all/@angular/elements/schematics/**',
+      'dist/all/@angular/examples/**/e2e_test/*',
+      'dist/all/@angular/language-service/**',
+      'dist/all/@angular/router/**/test/**',
+      'dist/all/@angular/platform-browser/testing/e2e_util.js',
+      'dist/all/angular1_router.js',
+      'dist/examples/**/e2e_test/**',
+    ],
+
+    customLaunchers: browserProvidersConf.customLaunchers,
+
+    plugins: [
+      'karma-jasmine',
+      'karma-browserstack-launcher',
+      'karma-sauce-launcher',
+      'karma-chrome-launcher',
+      'karma-sourcemap-loader',
     ],
 
-    customLaunchers: {
-      DartiumWithWebPlatform: {
-        base: 'Dartium',
-        flags: ['--enable-experimental-web-platform-features'] },
-      ChromeNoSandbox: {
-        base: 'Chrome',
-        flags: ['--no-sandbox'] }
+    preprocessors: {
+      '**/*.js': ['sourcemap'],
     },
-    browsers: ['ChromeCanary'],
 
-    port: 9876
+    // Bazel inter-op: Allow tests to request resources from either
+    //   /base/node_modules/path/to/thing
+    // or
+    //   /base/angular/node_modules/path/to/thing
+    // This can be removed when all karma tests are run under Bazel, then we
+    // don't need this entire config file.
+    proxies: {
+      '/base/angular/': '/base/',
+      '/base/angular_deps/': '/base/',
+    },
+
+    reporters: ['dots'],
+    sauceLabs: {
+      testName: 'Angular2',
+      retryLimit: 3,
+      startConnect: false,
+      recordVideo: false,
+      recordScreenshots: false,
+      options: {
+        'selenium-version': '2.53.0',
+        'command-timeout': 600,
+        'idle-timeout': 600,
+        'max-duration': 5400,
+      }
+    },
+
+    browserStack: {
+      project: 'Angular2',
+      startTunnel: false,
+      retryLimit: 3,
+      timeout: 1800,
+      pollingTimeout: 10000,
+    },
+
+    browsers: ['Chrome'],
+
+    port: 9876,
+    captureTimeout: 180000,
+    browserDisconnectTimeout: 180000,
+    browserDisconnectTolerance: 3,
+    browserNoActivityTimeout: 300000,
   });
+
+  if (process.env.TRAVIS) {
+    var buildId =
+        'TRAVIS #' + process.env.TRAVIS_BUILD_NUMBER + ' (' + process.env.TRAVIS_BUILD_ID + ')';
+    if (process.env.CI_MODE.startsWith('saucelabs')) {
+      config.sauceLabs.build = buildId;
+      config.sauceLabs.tunnelIdentifier = process.env.TRAVIS_JOB_NUMBER;
+
+      // TODO(mlaval): remove once SauceLabs supports websockets.
+      // This speeds up the capturing a bit, as browsers don't even try to use websocket.
+      console.log('>>>> setting socket.io transport to polling <<<<');
+      config.transports = ['polling'];
+    }
+
+    if (process.env.CI_MODE.startsWith('browserstack')) {
+      config.browserStack.build = buildId;
+      config.browserStack.tunnelIdentifier = process.env.TRAVIS_JOB_NUMBER;
+    }
+  }
 };
diff --git a/modules/angular1_router/build.js b/modules/angular1_router/build.js
new file mode 100644
index 000000000000..c9a2587d8656
--- /dev/null
+++ b/modules/angular1_router/build.js
@@ -0,0 +1,118 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+var fs = require('fs');
+var ts = require('typescript');
+
+var files = [
+  'utils.ts',
+  'url_parser.ts',
+  'lifecycle/lifecycle_annotations_impl.ts',
+  'lifecycle/route_lifecycle_reflector.ts',
+  'route_config/route_config_impl.ts',
+  'route_config/route_config_normalizer.ts',
+  'rules/route_handlers/async_route_handler.ts',
+  'rules/route_handlers/sync_route_handler.ts',
+  'rules/rules.ts',
+  'rules/rule_set.ts',
+  'rules/route_paths/route_path.ts',
+  'rules/route_paths/param_route_path.ts',
+  'rules/route_paths/regex_route_path.ts',
+  'instruction.ts',
+  'route_registry.ts',
+  'router.ts'
+];
+
+var PRELUDE = '(function(){\n';
+var POSTLUDE = '\n}());\n';
+
+function main(modulesDirectory) {
+  var angular1RouterModuleDirectory = modulesDirectory + '/angular1_router';
+
+  var facades = fs.readFileSync(
+      angular1RouterModuleDirectory + '/lib/facades.es5', 'utf8');
+  var directives = fs.readFileSync(
+      angular1RouterModuleDirectory + '/src/ng_outlet.ts', 'utf8');
+  var moduleTemplate = fs.readFileSync(
+      angular1RouterModuleDirectory + '/src/module_template.js', 'utf8');
+
+  var dir = modulesDirectory + '/angular2/src/router/';
+  var sharedCode = files.reduce(function (prev, file) {
+    return prev + transform(fs.readFileSync(dir + file, 'utf8'));
+  }, '');
+
+  // we have to use a function callback for replace to prevent it from interpreting `$`
+  // as a replacement command character
+  var out = moduleTemplate.replace('//{{FACADES}}', function() { return facades; })
+                .replace('//{{SHARED_CODE}}', function() { return sharedCode; });
+  return PRELUDE + transform(directives) + out + POSTLUDE;
+}
+
+/*
+ * Given a directory name and a file's TypeScript content, return an object with the ES5 code,
+ * sourcemap, and exported variable identifier name for the content.
+ */
+var IMPORT_RE = new RegExp("import \\{?([\\w\\n_, ]+)\\}? from '(.+)';?", 'g');
+var INJECT_RE = new RegExp("@Inject\\(ROUTER_PRIMARY_COMPONENT\\)", 'g');
+var INJECTABLE_RE = new RegExp("@Injectable\\(\\)", 'g');
+var REQUIRE_RE = new RegExp("require\\('(.*?)'\\);", 'g');
+function transform(contents) {
+  contents = contents.replace(INJECT_RE, '').replace(INJECTABLE_RE, '');
+  contents = contents.replace(IMPORT_RE, function (match, imports, includePath) {
+    //TODO: remove special-case
+    if (isFacadeModule(includePath) || includePath === './router_outlet') {
+      return '';
+    }
+    return match;
+  });
+  contents = ts.transpile(contents, {
+    target: ts.ScriptTarget.ES5,
+    module: ts.ModuleKind.CommonJS
+  });
+
+  // Rename require functions from transpiled imports
+  contents = contents.replace(REQUIRE_RE, 'routerRequire(\'$1\');');
+
+  return contents;
+}
+
+function isFacadeModule(modulePath) {
+  return modulePath.indexOf('facade') > -1 ||
+    modulePath === 'angular2/src/core/reflection/reflection';
+}
+
+module.exports = function(modulesDirectory, outputDirectory) {
+  if (!fs.existsSync(outputDirectory)) {
+    fs.mkdirSync(outputDirectory);
+  }
+  fs.writeFileSync(
+      outputDirectory + '/angular_1_router.js', main(modulesDirectory));
+};
+
+// CLI entry point
+if (require.main === module) {
+  try {
+    var args = process.argv;
+    args.shift();  // node
+    args.shift();  // scriptfile.js
+    if (args.length < 2) {
+      // tslint:disable-next-line:no-console
+      console.log("usage: $0 outFile path/to/modules");
+      process.exit(1);
+    }
+    var outfile = args.shift();
+    var directory = args.shift();
+    fs.writeFileSync(outfile, main(directory));
+  } catch (e) {
+    // tslint:disable-next-line:no-console
+    console.log(e.message);
+    process.exit(1);
+  }
+}
diff --git a/modules/angular1_router/index.html b/modules/angular1_router/index.html
new file mode 100644
index 000000000000..5927dee81182
--- /dev/null
+++ b/modules/angular1_router/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+<div ng-app="myApp" ng-controller="MyCtrl">
+
+</div>
+<script src="../../node_modules/angular/angular.js"></script>
+<script src="../../dist/angular_1_router.js"></script>
+<script>
+  angular.module('myApp', ['ngComponentRouter'])
+    .controller('MyCtrl', ['$rootRouter', function ($rootRouter) {
+      console.log($rootRouter);
+      $rootRouter.navigateByUrl('/')
+        .then(console.log.bind(console, 'resolve'), console.log.bind(console, 'reject'));
+    }]);
+</script>
+</body>
+</html>
diff --git a/modules/angular1_router/karma-router.conf.js b/modules/angular1_router/karma-router.conf.js
new file mode 100644
index 000000000000..0eeae813009c
--- /dev/null
+++ b/modules/angular1_router/karma-router.conf.js
@@ -0,0 +1,38 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+var browserProvidersConf = require('../../browser-providers.conf.js');
+
+// This runs the tests for the router in AngularJS
+
+module.exports = function (config) {
+  var options = {
+    frameworks: ['jasmine'],
+
+    files: [
+      '../../node_modules/core-js/client/core.js',
+      '../../node_modules/angular/angular.js',
+      '../../node_modules/angular-animate/angular-animate.js',
+      '../../node_modules/angular-mocks/angular-mocks.js',
+
+      '../../dist/angular_1_router.js',
+      'src/ng_route_shim.js',
+
+      'test/*.es5.js',
+      'test/**/*_spec.js'
+    ],
+
+    customLaunchers: browserProvidersConf.customLaunchers,
+
+    browsers: ['Chrome']
+  };
+
+  config.set(options);
+};
diff --git a/modules/angular1_router/lib/facades.es5 b/modules/angular1_router/lib/facades.es5
new file mode 100644
index 000000000000..dc883a556df3
--- /dev/null
+++ b/modules/angular1_router/lib/facades.es5
@@ -0,0 +1,329 @@
+function CONST() {
+  return (function(target) {
+    return target;
+  });
+}
+
+function CONST_EXPR(expr) {
+  return expr;
+}
+
+function isPresent (x) {
+  return !!x;
+}
+
+function isBlank (x) {
+  return !x;
+}
+
+function isString(obj) {
+  return typeof obj === 'string';
+}
+
+function isType (x) {
+  return typeof x === 'function';
+}
+
+function isStringMap(obj) {
+  return typeof obj === 'object' && obj !== null;
+}
+
+function isArray(obj) {
+  return Array.isArray(obj);
+}
+
+function getTypeNameForDebugging (fn) {
+  return fn.name || 'Root';
+}
+
+var PromiseWrapper = {
+  resolve: function (reason) {
+    return $q.when(reason);
+  },
+
+  reject: function (reason) {
+    return $q.reject(reason);
+  },
+
+  catchError: function (promise, fn) {
+    return promise.then(null, fn);
+  },
+  all: function (promises) {
+    return $q.all(promises);
+  }
+};
+
+var RegExpWrapper = {
+  create: function(regExpStr, flags) {
+    flags = flags ? flags.replace(/g/g, '') : '';
+    return new RegExp(regExpStr, flags + 'g');
+  },
+  firstMatch: function(regExp, input) {
+    regExp.lastIndex = 0;
+    return regExp.exec(input);
+  },
+  matcher: function (regExp, input) {
+    regExp.lastIndex = 0;
+    return { re: regExp, input: input };
+  }
+};
+
+var reflector = {
+  annotations: function (fn) {
+    //TODO: implement me
+    return fn.annotations || [];
+  }
+};
+
+var MapWrapper = {
+  create: function() {
+    return new Map();
+  },
+
+  get: function(m, k) {
+    return m.get(k);
+  },
+
+  set: function(m, k, v) {
+    return m.set(k, v);
+  },
+
+  contains: function (m, k) {
+    return m.has(k);
+  },
+
+  forEach: function (m, fn) {
+    return m.forEach(fn);
+  }
+};
+
+var StringMapWrapper = {
+  create: function () {
+    return {};
+  },
+
+  set: function (m, k, v) {
+    return m[k] = v;
+  },
+
+  get: function (m, k) {
+    return m.hasOwnProperty(k) ? m[k] : undefined;
+  },
+
+  contains: function (m, k) {
+    return m.hasOwnProperty(k);
+  },
+
+  keys: function(map) {
+    return Object.keys(map);
+  },
+
+  isEmpty: function(map) {
+    for (var prop in map) {
+      if (map.hasOwnProperty(prop)) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  delete: function(map, key) {
+    delete map[key];
+  },
+
+  forEach: function (m, fn) {
+    for (var prop in m) {
+      if (m.hasOwnProperty(prop)) {
+        fn(m[prop], prop);
+      }
+    }
+  },
+
+  equals: function (m1, m2) {
+    var k1 = Object.keys(m1);
+    var k2 = Object.keys(m2);
+    if (k1.length != k2.length) {
+      return false;
+    }
+    var key;
+    for (var i = 0; i < k1.length; i++) {
+      key = k1[i];
+      if (m1[key] !== m2[key]) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  merge: function(m1, m2) {
+    var m = {};
+    for (var attr in m1) {
+      if (m1.hasOwnProperty(attr)) {
+        m[attr] = m1[attr];
+      }
+    }
+    for (var attr in m2) {
+      if (m2.hasOwnProperty(attr)) {
+        m[attr] = m2[attr];
+      }
+    }
+    return m;
+  }
+};
+
+var List = Array;
+var ListWrapper = {
+  toJSON: function(l) {
+    return JSON.stringify(l);
+  },
+
+  clear: function (l) {
+    l.length = 0;
+  },
+
+  create: function () {
+    return [];
+  },
+
+  push: function (l, v) {
+    return l.push(v);
+  },
+
+  forEach: function (l, fn) {
+    return l.forEach(fn);
+  },
+
+  first: function(array) {
+    if (!array)
+      return null;
+    return array[0];
+  },
+
+  last: function(array) {
+    return (array && array.length) > 0 ? array[array.length - 1] : null;
+  },
+
+  map: function (l, fn) {
+    return l.map(fn);
+  },
+
+  join: function (l, str) {
+    return l.join(str);
+  },
+
+  reduce: function(list, fn, init) {
+    return list.reduce(fn, init);
+  },
+
+  filter: function(array, pred) {
+    return array.filter(pred);
+  },
+
+  concat: function(a, b) {
+    return a.concat(b);
+  },
+
+  slice: function(l) {
+    var from = arguments[1] !== (void 0) ? arguments[1] : 0;
+    var to = arguments[2] !== (void 0) ? arguments[2] : null;
+    return l.slice(from, to === null ? undefined : to);
+  },
+
+  maximum: function(list, predicate) {
+    if (list.length == 0) {
+      return null;
+    }
+    var solution = null;
+    var maxValue = -Infinity;
+    for (var index = 0; index < list.length; index++) {
+      var candidate = list[index];
+      if (isBlank(candidate)) {
+        continue;
+      }
+      var candidateValue = predicate(candidate);
+      if (candidateValue > maxValue) {
+        solution = candidate;
+        maxValue = candidateValue;
+      }
+    }
+    return solution;
+  }
+};
+
+var StringWrapper = {
+  charCodeAt: function(s, i) {
+    return s.charCodeAt(i);
+  },
+
+  equals: function (s1, s2) {
+    return s1 === s2;
+  },
+
+  split: function(s, re) {
+    return s.split(re);
+  },
+
+  replaceAll: function(s, from, replace) {
+    return s.replace(from, replace);
+  },
+
+  replaceAllMapped: function(s, from, cb) {
+    return s.replace(from, function(matches) {
+      // The callback receives match, p1, ..., pn
+      return cb.apply(null, matches);
+    });
+  },
+
+  contains: function(s, substr) {
+    return s.indexOf(substr) != -1;
+  }
+
+};
+
+//TODO: implement?
+// I think it's too heavy to ask 1.x users to bring in Rx for the router...
+function EventEmitter() {}
+
+var ObservableWrapper = {
+  callNext: function(ob, val) {
+    ob.fn(val);
+  },
+  callEmit: function(ob, val) {
+    ob.fn(val);
+  },
+
+  subscribe: function(ob, fn) {
+    ob.fn = fn;
+  }
+};
+
+// TODO: https://github.com/angular/angular.js/blob/master/src/ng/browser.js#L227-L265
+var $__router_47_location__ = {
+  Location: Location
+};
+
+function Location(){}
+Location.prototype.subscribe = function () {
+  //TODO: implement
+};
+Location.prototype.path = function () {
+  return $location.url();
+};
+Location.prototype.isCurrentPathEqualTo = function (path, query) {
+  if (query === void 0) { query = ''; }
+  return this.path() === (path + query);
+};
+Location.prototype.go = function (path, query) {
+  return $location.url(path + query);
+};
+Location.prototype.replaceState = function (path, query) {
+  if (query === void 0) { query = ''; }
+  $location.url(path + query);
+  $location.replace();
+};
+Location.prototype.prepareExternalUrl = function(url) {
+  if (url.length > 0 && !url.startsWith('/')) {
+    url = '/' + url;
+  }
+  return $location.$$html5 ? '.' + url : '#' + $locationHashPrefix + url;
+};
diff --git a/modules/angular1_router/src/module_template.js b/modules/angular1_router/src/module_template.js
new file mode 100644
index 000000000000..1c7f4fe4e695
--- /dev/null
+++ b/modules/angular1_router/src/module_template.js
@@ -0,0 +1,130 @@
+/**
+ * @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
+ */
+
+angular.module('ngComponentRouter').
+    value('$route', null). // can be overloaded with ngRouteShim
+    // Because AngularJS has no notion of a root component, we use an object with unique identity
+    // to represent this. Can be overloaded with a component name
+    value('$routerRootComponent', new Object()).
+
+    // Unfortunately, $location doesn't expose what the current hashPrefix is
+    // So we have to monkey patch the $locationProvider to capture this value
+    provider('$locationHashPrefix', ['$locationProvider', $locationHashPrefixProvider]).
+    factory('$rootRouter', ['$q', '$location', '$browser', '$rootScope', '$injector', '$routerRootComponent', '$locationHashPrefix', routerFactory]);
+
+function $locationHashPrefixProvider($locationProvider) {
+
+  // Get hold of the original hashPrefix method
+  var hashPrefixFn = $locationProvider.hashPrefix.bind($locationProvider);
+
+  // Read the current hashPrefix (in case it was set before this monkey-patch occurred)
+  var hashPrefix = hashPrefixFn();
+
+  // Override the helper so that we can read any changes to the prefix (after this monkey-patch)
+  $locationProvider.hashPrefix = function(prefix) {
+    if (angular.isDefined(prefix)) {
+      hashPrefix = prefix;
+    }
+    return hashPrefixFn(prefix);
+  };
+
+  // Return the final hashPrefix as the value of this service
+  this.$get = function() { return hashPrefix; };
+}
+
+function routerFactory($q, $location, $browser, $rootScope, $injector, $routerRootComponent, $locationHashPrefix) {
+
+  // When this file is processed, the line below is replaced with
+  // the contents of `../lib/facades.es5`.
+  //{{FACADES}}
+
+  var exports = {
+    Injectable: function () {},
+    InjectionToken: function () {},
+    Inject: function () {}
+  };
+  var routerRequire = function () {return exports;};
+
+  // When this file is processed, the line below is replaced with
+  // the contents of the compiled TypeScript classes.
+  //{{SHARED_CODE}}
+
+  function getComponentConstructor(name) {
+    var serviceName = name + 'Directive';
+    if ($injector.has(serviceName)) {
+      var definitions = $injector.get(serviceName);
+      if (definitions.length > 1) {
+        throw new Error('too many directives named "' + name + '"');
+      }
+      return definitions[0].controller;
+    } else {
+      throw new Error('directive "' + name + '" is not registered');
+    }
+  }
+
+  //TODO: this is a hack to replace the exiting implementation at run-time
+  exports.getCanActivateHook = function (directiveName) {
+    var controller = getComponentConstructor(directiveName);
+    return controller.$canActivate && function (next, prev) {
+      return $injector.invoke(controller.$canActivate, null, {
+        $nextInstruction: next,
+        $prevInstruction: prev
+      });
+    };
+  };
+
+  // This hack removes assertions about the type of the "component"
+  // property in a route config
+  exports.assertComponentExists = function () {};
+
+  angular.stringifyInstruction = function (instruction) {
+    return instruction.toRootUrl();
+  };
+
+  var RouteRegistry = exports.RouteRegistry;
+  var RootRouter = exports.RootRouter;
+
+  // Override this method to actually get hold of the child routes
+  RouteRegistry.prototype.configFromComponent = function (component) {
+    var that = this;
+    if (typeof component === 'string') {
+      // Don't read the annotations component a type more than once –
+      // this prevents an infinite loop if a component routes recursively.
+      if (this._rules.has(component)) {
+        return;
+      }
+      var controller = getComponentConstructor(component);
+      if (angular.isArray(controller.$routeConfig)) {
+        controller.$routeConfig.forEach(function (config) {
+          var loader = config.loader;
+          if (isPresent(loader)) {
+            config = angular.extend({}, config, { loader: function() { return $injector.invoke(loader); } });
+          }
+          that.config(component, config);
+        });
+      }
+    }
+
+  };
+
+  var registry = new RouteRegistry($routerRootComponent);
+  var location = new Location();
+
+  var router = new RootRouter(registry, location, $routerRootComponent);
+  $rootScope.$watch(function () { return $location.url(); }, function (path) {
+    if (router.lastNavigationAttempt !== path) {
+      router.navigateByUrl(path);
+    }
+  });
+
+  router.subscribe(function () {
+    $rootScope.$broadcast('$routeChangeSuccess', {});
+  });
+
+  return router;
+}
diff --git a/modules/angular1_router/src/ng_outlet.ts b/modules/angular1_router/src/ng_outlet.ts
new file mode 100644
index 000000000000..a1e24f7b9039
--- /dev/null
+++ b/modules/angular1_router/src/ng_outlet.ts
@@ -0,0 +1,275 @@
+/**
+ * @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
+ */
+
+///<reference path="../typings/angularjs/angular.d.ts"/>
+
+
+
+/**
+ * @name ngOutlet
+ *
+ * @description
+ * An ngOutlet is where resolved content goes.
+ *
+ * ## Use
+ *
+ * ```html
+ * <div ng-outlet="name"></div>
+ * ```
+ *
+ * The value for the `ngOutlet` attribute is optional.
+ */
+function ngOutletDirective($animate, $q: ng.IQService, $rootRouter) {
+  const rootRouter = $rootRouter;
+
+  return {
+    restrict: 'AE',
+    transclude: 'element',
+    terminal: true,
+    priority: 400,
+    require: ['?^^ngOutlet', 'ngOutlet'],
+    link: outletLink,
+    controller: class {},
+    controllerAs: '$$ngOutlet'
+  };
+
+  function outletLink(scope, element, attrs, ctrls, $transclude) {
+    class Outlet {
+      constructor(private controller, private router) {}
+
+      private currentController;
+      private currentInstruction;
+      private currentScope;
+      private currentElement;
+      private previousLeaveAnimation;
+
+      private cleanupLastView() {
+        if (this.previousLeaveAnimation) {
+          $animate.cancel(this.previousLeaveAnimation);
+          this.previousLeaveAnimation = null;
+        }
+
+        if (this.currentScope) {
+          this.currentScope.$destroy();
+          this.currentScope = null;
+        }
+        if (this.currentElement) {
+          this.previousLeaveAnimation = $animate.leave(this.currentElement);
+          this.previousLeaveAnimation.then(() => this.previousLeaveAnimation = null);
+          this.currentElement = null;
+        }
+      }
+
+      reuse(instruction) {
+        let next = $q.when(true);
+        const previousInstruction = this.currentInstruction;
+        this.currentInstruction = instruction;
+        if (this.currentController && this.currentController.$routerOnReuse) {
+          next = $q.when(
+              this.currentController.$routerOnReuse(this.currentInstruction, previousInstruction));
+        }
+
+        return next;
+      }
+
+      routerCanReuse(nextInstruction) {
+        let result;
+        if (!this.currentInstruction ||
+            this.currentInstruction.componentType !== nextInstruction.componentType) {
+          result = false;
+        } else if (this.currentController && this.currentController.$routerCanReuse) {
+          result = this.currentController.$routerCanReuse(nextInstruction, this.currentInstruction);
+        } else {
+          result = nextInstruction === this.currentInstruction ||
+                   angular.equals(nextInstruction.params, this.currentInstruction.params);
+        }
+        return $q.when(result);
+      }
+
+      routerCanDeactivate(instruction) {
+        if (this.currentController && this.currentController.$routerCanDeactivate) {
+          return $q.when(
+              this.currentController.$routerCanDeactivate(instruction, this.currentInstruction));
+        }
+        return $q.when(true);
+      }
+
+      deactivate(instruction) {
+        if (this.currentController && this.currentController.$routerOnDeactivate) {
+          return $q.when(
+              this.currentController.$routerOnDeactivate(instruction, this.currentInstruction));
+        }
+        return $q.when();
+      }
+
+      activate(instruction) {
+        this.previousInstruction = this.currentInstruction;
+        this.currentInstruction = instruction;
+
+        const componentName = this.controller.$$componentName = instruction.componentType;
+
+        if (typeof componentName !== 'string') {
+          throw new Error('Component is not a string for ' + instruction.urlPath);
+        }
+
+        this.controller.$$template = '<' + dashCase(componentName) + ' $router="::$$router"></' +
+                                     dashCase(componentName) + '>';
+        this.controller.$$router = this.router.childRouter(instruction.componentType);
+        this.controller.$$outlet = this;
+
+        const newScope = scope.$new();
+        newScope.$$router = this.controller.$$router;
+        this.deferredActivation = $q.defer();
+
+        const clone = $transclude(newScope, clone => {});
+
+        const activateView = () => {
+          $animate.enter(clone, null, this.currentElement || element);
+          this.cleanupLastView();
+          this.currentElement = clone;
+          this.currentScope = newScope;
+        };
+
+        return this.deferredActivation.promise.then(activateView, activateView);
+      }
+    }
+
+    const parentCtrl = ctrls[0], myCtrl = ctrls[1],
+        router = (parentCtrl && parentCtrl.$$router) || rootRouter;
+
+    myCtrl.$$currentComponent = null;
+
+    router.registerPrimaryOutlet(new Outlet(myCtrl, router));
+  }
+}
+/**
+ * This directive is responsible for compiling the contents of ng-outlet
+ */
+function ngOutletFillContentDirective($compile) {
+  return {
+    restrict: 'EA',
+    priority: -400,
+    require: 'ngOutlet',
+    link: (scope, element, attrs, ctrl) => {
+      const template = ctrl.$$template;
+      element.html(template);
+      $compile(element.contents())(scope);
+    }
+  };
+}
+
+
+
+function routerTriggerDirective($q) {
+  return {
+    require: '^ngOutlet',
+    priority: -1000,
+    link: function(scope, element, attr, ngOutletCtrl) {
+      let promise = $q.when();
+      const outlet = ngOutletCtrl.$$outlet;
+      const currentComponent = outlet.currentController =
+          element.controller(ngOutletCtrl.$$componentName);
+      if (currentComponent.$routerOnActivate) {
+        promise = $q.when(currentComponent.$routerOnActivate(outlet.currentInstruction,
+                                                             outlet.previousInstruction));
+      }
+      promise.then(outlet.deferredActivation.resolve, outlet.deferredActivation.reject);
+    }
+  };
+}
+
+
+/**
+ * @name ngLink
+ * @description
+ * Lets you link to different parts of the app, and automatically generates hrefs.
+ *
+ * ## Use
+ * The directive uses a simple syntax: `ng-link="componentName({ param: paramValue })"`
+ *
+ * ### Example
+ *
+ * ```js
+ * angular.module('myApp', ['ngComponentRouter'])
+ *   .controller('AppController', ['$rootRouter', function($rootRouter) {
+ *     $rootRouter.config({ path: '/user/:id', component: 'user' });
+ *     this.user = { name: 'Brian', id: 123 };
+ *   });
+ * ```
+ *
+ * ```html
+ * <div ng-controller="AppController as app">
+ *   <a ng-link="user({id: app.user.id})">{{app.user.name}}</a>
+ * </div>
+ * ```
+ */
+function ngLinkDirective($rootRouter, $parse) {
+  return {require: '?^^ngOutlet', restrict: 'A', link: ngLinkDirectiveLinkFn};
+
+  function ngLinkDirectiveLinkFn(scope, element, attrs, ctrl) {
+    const router = (ctrl && ctrl.$$router) || $rootRouter;
+    if (!router) {
+      return;
+    }
+
+    let navigationInstruction = null;
+    const link = attrs.ngLink || '';
+
+    function getLink(params) {
+      if (!params) {
+        return;
+      }
+
+      navigationInstruction = router.generate(params);
+
+      scope.$watch(function() { return router.isRouteActive(navigationInstruction); },
+                   function(active) {
+                     if (active) {
+                       element.addClass('ng-link-active');
+                     } else {
+                       element.removeClass('ng-link-active');
+                     }
+                   });
+
+      const navigationHref = navigationInstruction.toLinkUrl();
+      return $rootRouter._location.prepareExternalUrl(navigationHref);
+    }
+
+    const routeParamsGetter = $parse(link);
+    // we can avoid adding a watcher if it's a literal
+    if (routeParamsGetter.constant) {
+      const params = routeParamsGetter();
+      element.attr('href', getLink(params));
+    } else {
+      scope.$watch(() => routeParamsGetter(scope), params => element.attr('href', getLink(params)),
+                   true);
+    }
+
+    element.on('click', event => {
+      if (event.which !== 1 || !navigationInstruction) {
+        return;
+      }
+
+      $rootRouter.navigateByInstruction(navigationInstruction);
+      event.preventDefault();
+    });
+  }
+}
+
+function dashCase(str: string): string {
+  return str.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
+}
+
+/*
+ * A module for adding new a routing system AngularJS.
+ */
+angular.module('ngComponentRouter', [])
+    .directive('ngOutlet', ['$animate', '$q', '$rootRouter', ngOutletDirective])
+    .directive('ngOutlet', ['$compile', ngOutletFillContentDirective])
+    .directive('ngLink', ['$rootRouter', '$parse', ngLinkDirective])
+    .directive('$router', ['$q', routerTriggerDirective]);
diff --git a/modules/angular1_router/src/ng_route_shim.js b/modules/angular1_router/src/ng_route_shim.js
new file mode 100644
index 000000000000..7bbef6a13bfd
--- /dev/null
+++ b/modules/angular1_router/src/ng_route_shim.js
@@ -0,0 +1,347 @@
+/**
+ * @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
+ */
+
+(function () {
+
+  'use strict';
+
+  // keep a reference to compileProvider so we can register new component-directives
+  // on-the-fly based on $routeProvider configuration
+  // TODO: remove this– right now you can only bootstrap one Angular app with this hack
+  var $compileProvider, $q, $injector;
+
+  /**
+   * This module loads services that mimic ngRoute's configuration, and includes
+   * an anchor link directive that intercepts clicks to routing.
+   *
+   * This module is intended to be used as a stop-gap solution for projects upgrading from ngRoute.
+   * It intentionally does not implement all features of ngRoute.
+   */
+  angular.module('ngRouteShim', [])
+    .provider('$route', $RouteProvider)
+    .config(['$compileProvider', function (compileProvider) {
+      $compileProvider = compileProvider;
+    }])
+    .factory('$routeParams', $routeParamsFactory)
+    .directive('a', anchorLinkDirective)
+
+    // Connects the legacy $routeProvider config shim to Component Router's config.
+    .run(['$route', '$rootRouter', function ($route, $rootRouter) {
+      $route.$$subscribe(function (routeDefinition) {
+        if (!angular.isArray(routeDefinition)) {
+          routeDefinition = [routeDefinition];
+        }
+        $rootRouter.config(routeDefinition);
+      });
+    }]);
+
+
+  /**
+   * A shimmed out provider that provides the same API as ngRoute's $routeProvider, but uses these calls
+   * to configure Component Router.
+   */
+  function $RouteProvider() {
+
+    var routes = [];
+    var subscriptionFn = null;
+
+    var routeMap = {};
+
+    // Stats for which routes are skipped
+    var skipCount = 0;
+    var successCount = 0;
+    var allCount = 0;
+
+    function consoleMetrics() {
+      return '(' + skipCount + ' skipped / ' + successCount + ' success / ' + allCount + ' total)';
+    }
+
+
+    /**
+     * @ngdoc method
+     * @name $routeProvider#when
+     *
+     * @param {string} path Route path (matched against `$location.path`). If `$location.path`
+     *    contains redundant trailing slash or is missing one, the route will still match and the
+     *    `$location.path` will be updated to add or drop the trailing slash to exactly match the
+     *    route definition.
+     *
+     * @param {Object} route Mapping information to be assigned to `$route.current` on route
+     *    match.
+     */
+    this.when = function(path, route) {
+      //copy original route object to preserve params inherited from proto chain
+      var routeCopy = angular.copy(route);
+
+      allCount++;
+
+      if (angular.isDefined(routeCopy.reloadOnSearch)) {
+        console.warn('Route for "' + path + '" uses "reloadOnSearch" which is not implemented.');
+      }
+      if (angular.isDefined(routeCopy.caseInsensitiveMatch)) {
+        console.warn('Route for "' + path + '" uses "caseInsensitiveMatch" which is not implemented.');
+      }
+
+      // use new wildcard format
+      path = reformatWildcardParams(path);
+
+      if (path[path.length - 1] == '*') {
+        skipCount++;
+        console.warn('Route for "' + path + '" ignored because it ends with *. Skipping.', consoleMetrics());
+        return this;
+      }
+
+      if (path.indexOf('?') > -1) {
+        skipCount++;
+        console.warn('Route for "' + path + '" ignored because it has optional parameters. Skipping.', consoleMetrics());
+        return this;
+      }
+
+      if (typeof route.redirectTo == 'function') {
+        skipCount++;
+        console.warn('Route for "' + path + '" ignored because lazy redirecting to a function is not yet implemented. Skipping.', consoleMetrics());
+        return this;
+      }
+
+
+      var routeDefinition = {
+        path: path,
+        data: routeCopy
+      };
+
+      routeMap[path] = routeCopy;
+
+      if (route.redirectTo) {
+        routeDefinition.redirectTo = [routeMap[route.redirectTo].name];
+      } else {
+        if (routeCopy.controller && !routeCopy.controllerAs) {
+          console.warn('Route for "' + path + '" should use "controllerAs".');
+        }
+
+        var componentName = routeObjToRouteName(routeCopy, path);
+
+        if (!componentName) {
+          throw new Error('Could not determine a name for route "' + path + '".');
+        }
+
+        routeDefinition.component = componentName;
+        routeDefinition.name = route.name || upperCase(componentName);
+
+        var directiveController = routeCopy.controller;
+
+        var componentDefinition = {
+          controller: directiveController,
+          controllerAs: routeCopy.controllerAs
+
+        };
+        if (routeCopy.templateUrl) componentDefinition.templateUrl = routeCopy.templateUrl;
+        if (routeCopy.template) componentDefinition.template = routeCopy.template;
+
+
+        // if we have route resolve options, prepare a wrapper controller
+        if (directiveController && routeCopy.resolve) {
+          var originalController = directiveController;
+          var resolvedLocals = {};
+
+          componentDefinition.controller = ['$injector', '$scope', function ($injector, $scope) {
+            var locals = angular.extend({
+              $scope: $scope
+            }, resolvedLocals);
+
+            return $injector.instantiate(originalController, locals);
+          }];
+
+          // we resolve the locals in a canActivate block
+          componentDefinition.controller.$canActivate = function() {
+            var locals = angular.extend({}, routeCopy.resolve);
+
+            angular.forEach(locals, function(value, key) {
+              locals[key] = angular.isString(value) ?
+                $injector.get(value) : $injector.invoke(value, null, null, key);
+            });
+
+            return $q.all(locals).then(function (locals) {
+              resolvedLocals = locals;
+            }).then(function () {
+              return true;
+            });
+          };
+        }
+
+        // register the dynamically created directive
+        $compileProvider.component(componentName, componentDefinition);
+      }
+      if (subscriptionFn) {
+        subscriptionFn(routeDefinition);
+      } else {
+        routes.push(routeDefinition);
+      }
+      successCount++;
+
+      return this;
+    };
+
+    this.otherwise = function(params) {
+      if (typeof params === 'string') {
+        params = {redirectTo: params};
+      }
+      this.when('/*rest', params);
+      return this;
+    };
+
+
+    this.$get = ['$q', '$injector', function (q, injector) {
+      $q = q;
+      $injector = injector;
+
+      var $route = {
+        routes: routeMap,
+
+        /**
+         * @ngdoc method
+         * @name $route#reload
+         *
+         * @description
+         * Causes `$route` service to reload the current route even if
+         * {@link ng.$location $location} hasn't changed.
+         */
+        reload: function() {
+          throw new Error('Not implemented: $route.reload');
+        },
+
+        /**
+         * @ngdoc method
+         * @name $route#updateParams
+         */
+        updateParams: function(newParams) {
+          throw new Error('Not implemented: $route.updateParams');
+        },
+
+        /**
+         * Runs the given `fn` whenever new configs are added.
+         * Only one subscription is allowed.
+         * Passed `fn` is called synchronously.
+         */
+        $$subscribe: function(fn) {
+          if (subscriptionFn) {
+            throw new Error('only one subscription allowed');
+          }
+          subscriptionFn = fn;
+          subscriptionFn(routes);
+          routes = [];
+        },
+
+        /**
+         * Runs a string with stats about many route configs were adapted, and how many were
+         * dropped because they are incompatible.
+         */
+        $$getStats: consoleMetrics
+      };
+
+      return $route;
+    }];
+
+  }
+
+  function $routeParamsFactory($rootRouter, $rootScope) {
+    // the identity of this object cannot change
+    var paramsObj = {};
+
+    $rootScope.$on('$routeChangeSuccess', function () {
+      var newParams = $rootRouter.currentInstruction && $rootRouter.currentInstruction.component.params;
+
+      angular.forEach(paramsObj, function (val, name) {
+        delete paramsObj[name];
+      });
+      angular.forEach(newParams, function (val, name) {
+        paramsObj[name] = val;
+      });
+    });
+
+    return paramsObj;
+  }
+
+  /**
+   * Allows normal anchor links to kick off routing.
+   */
+  function anchorLinkDirective($rootRouter) {
+    return {
+      restrict: 'E',
+      link: function (scope, element) {
+        // If the linked element is not an anchor tag anymore, do nothing
+        if (element[0].nodeName.toLowerCase() !== 'a') {
+          return;
+        }
+
+        // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute.
+        var hrefAttrName = Object.prototype.toString.call(element.prop('href')) === '[object SVGAnimatedString]' ?
+          'xlink:href' : 'href';
+
+        element.on('click', function (event) {
+          if (event.which !== 1) {
+            return;
+          }
+
+          var href = element.attr(hrefAttrName);
+          var target = element.attr('target');
+          var isExternal = (['_blank', '_parent', '_self', '_top'].indexOf(target) > -1);
+
+          if (href && $rootRouter.recognize(href) && !isExternal) {
+            $rootRouter.navigateByUrl(href);
+            event.preventDefault();
+          }
+        });
+      }
+    };
+  }
+
+  /**
+   * Given a route object, attempts to find a unique directive name.
+   *
+   * @param route – route config object passed to $routeProvider.when
+   * @param path – route configuration path
+   * @returns {string|name} – a normalized (camelCase) directive name
+   */
+  function routeObjToRouteName(route, path) {
+    var name = route.controllerAs;
+
+    var controller = route.controller;
+    if (!name && controller) {
+      if (angular.isArray(controller)) {
+        controller = controller[controller.length - 1];
+      }
+      name = controller.name;
+    }
+
+    if (!name) {
+      var segments = path.split('/');
+      name = segments[segments.length - 1];
+    }
+
+    if (name) {
+      name = name + 'AutoCmp';
+    }
+
+    return name;
+  }
+
+  function upperCase(str) {
+    return str.charAt(0).toUpperCase() + str.substr(1);
+  }
+
+  /*
+   * Changes "/:foo*" to "/*foo"
+   */
+  var WILDCARD_PARAM_RE = new RegExp('\\/:([a-z0-9]+)\\*', 'gi');
+  function reformatWildcardParams(path) {
+    return path.replace(WILDCARD_PARAM_RE, function (m, m1) {
+      return '/*' + m1;
+    });
+  }
+
+}());
diff --git a/modules/angular1_router/test/integration/animation_spec.js b/modules/angular1_router/test/integration/animation_spec.js
new file mode 100644
index 000000000000..bb11563041b5
--- /dev/null
+++ b/modules/angular1_router/test/integration/animation_spec.js
@@ -0,0 +1,113 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+describe('ngOutlet animations', function () {
+  var elt,
+    $animate,
+    $compile,
+    $rootScope,
+    $rootRouter,
+    $compileProvider;
+
+  beforeEach(function () {
+    module('ng');
+    module('ngAnimate');
+    module('ngAnimateMock');
+    module('ngComponentRouter');
+    module(function (_$compileProvider_) {
+      $compileProvider = _$compileProvider_;
+    });
+
+    inject(function (_$animate_, _$compile_, _$rootScope_, _$rootRouter_) {
+      $animate = _$animate_;
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+      $rootRouter = _$rootRouter_;
+    });
+
+    registerComponent('userCmp', {
+      template: '<div>hello {{userCmp.$routeParams.name}}</div>',
+      $routerOnActivate: function(next) {
+        this.$routeParams = next.params;
+      }
+    });
+  });
+
+  afterEach(function () {
+    expect($animate.queue).toEqual([]);
+  });
+
+  it('should work in a simple case', function () {
+    var item;
+
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.config([
+      { path: '/user/:name', component: 'userCmp' }
+    ]);
+
+    $rootRouter.navigateByUrl('/user/brian');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello brian');
+
+    // "user" component enters
+    item = $animate.queue.shift();
+    expect(item.event).toBe('enter');
+
+    // navigate to pete
+    $rootRouter.navigateByUrl('/user/pete');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello pete');
+
+    // "user pete" component enters
+    item = $animate.queue.shift();
+    expect(item.event).toBe('enter');
+    expect(item.element.text()).toBe('hello pete');
+
+    // "user brian" component leaves
+    item = $animate.queue.shift();
+    expect(item.event).toBe('leave');
+    expect(item.element.text()).toBe('hello brian');
+  });
+
+
+  function registerComponent(name, options) {
+    var controller = options.controller || function () {};
+
+    ['$routerOnActivate', '$routerOnDeactivate', '$routerOnReuse', '$routerCanReuse', '$routerCanDeactivate'].forEach(function (hookName) {
+      if (options[hookName]) {
+        controller.prototype[hookName] = options[hookName];
+      }
+    });
+
+    function factory() {
+      return {
+        template: options.template || '',
+        controllerAs: name,
+        controller: controller
+      };
+    }
+
+    if (options.$canActivate) {
+      factory.$canActivate = options.$canActivate;
+    }
+    if (options.$routeConfig) {
+      factory.$routeConfig = options.$routeConfig;
+    }
+
+    $compileProvider.directive(name, factory);
+  }
+
+  function compile(template) {
+    elt = $compile('<div>' + template + '</div>')($rootScope);
+    $rootScope.$digest();
+    return elt;
+  }
+});
diff --git a/modules/angular1_router/test/integration/lifecycle_hook_spec.js b/modules/angular1_router/test/integration/lifecycle_hook_spec.js
new file mode 100644
index 000000000000..3e93cc4405ab
--- /dev/null
+++ b/modules/angular1_router/test/integration/lifecycle_hook_spec.js
@@ -0,0 +1,537 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+describe('Navigation lifecycle', function () {
+  var elt,
+    $compile,
+    $q,
+    $rootScope,
+    $rootRouter,
+    $compileProvider;
+
+  beforeEach(function () {
+    module('ng');
+    module('ngComponentRouter');
+    module(function (_$compileProvider_) {
+      $compileProvider = _$compileProvider_;
+    });
+
+    inject(function (_$compile_, _$q_, _$rootScope_, _$rootRouter_) {
+      $compile = _$compile_;
+      $q = _$q_;
+      $rootScope = _$rootScope_;
+      $rootRouter = _$rootRouter_;
+    });
+
+    registerComponent('oneCmp', {
+      template: '<div>{{oneCmp.number}}</div>',
+      controller: function () {this.number = 'one';}
+    });
+    registerComponent('twoCmp', {
+      template: '<div><a ng-link="[\'/Two\']">{{twoCmp.number}}</a></div>',
+      controller: function () {this.number = 'two';}
+    });
+  });
+
+
+  it('should run the activate hook of controllers', function () {
+    var spy = jasmine.createSpy('activate');
+    registerComponent('activateCmp', {
+      template: '<p>hello</p>',
+      $routerOnActivate: spy
+    });
+
+    $rootRouter.config([
+      { path: '/a', component: 'activateCmp' }
+    ]);
+    compile('<div>outer { <div ng-outlet></div> }</div>');
+
+    $rootRouter.navigateByUrl('/a');
+    $rootScope.$digest();
+
+    expect(spy).toHaveBeenCalled();
+  });
+
+
+  it('should pass instruction into the activate hook of a controller', function () {
+    var spy = jasmine.createSpy('activate');
+    registerComponent('userCmp', {
+      $routerOnActivate: spy
+    });
+
+    $rootRouter.config([
+      { path: '/user/:name', component: 'userCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/user/brian');
+    $rootScope.$digest();
+
+    expect(spy).toHaveBeenCalledWith(instructionFor('userCmp'), undefined);
+  });
+
+
+  it('should pass previous instruction into the activate hook of a controller', function () {
+    var spy = jasmine.createSpy('activate');
+    var activate = registerComponent('activateCmp', {
+      template: 'hi',
+      $routerOnActivate: spy
+    });
+
+    $rootRouter.config([
+      { path: '/user/:name', component: 'oneCmp' },
+      { path: '/post/:id', component: 'activateCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/user/brian');
+    $rootScope.$digest();
+    $rootRouter.navigateByUrl('/post/123');
+    $rootScope.$digest();
+    expect(spy).toHaveBeenCalledWith(instructionFor('activateCmp'),
+                                     instructionFor('oneCmp'));
+  });
+
+  describe('activate hook with promise', () => {
+    var activateDeferred;
+    beforeEach(() => {
+      activateDeferred = $q.defer();
+      var activate = registerComponent('activateCmp', {
+        template: 'hi',
+        $routerOnActivate: function() {
+          return activateDeferred.promise;
+        }
+      });
+
+      $rootRouter.config([
+        { path: '/user/:name', component: 'oneCmp' },
+        { path: '/post', component: 'activateCmp' },
+      ]);
+      compile('<div ng-outlet></div>');
+
+      $rootRouter.navigateByUrl('/user/fabian');
+      $rootScope.$digest();
+      $rootRouter.navigateByUrl('/post');
+      $rootScope.$digest();
+    });
+
+    it('should update the view once the promise gets resolved', () => {
+      expect(elt.text()).toBe('one');
+
+      activateDeferred.resolve();
+      $rootScope.$digest();
+      expect(elt.text()).toBe('hi');
+    });
+
+    it('should update the view once the promise gets rejected', () => {
+      expect(elt.text()).toBe('one');
+
+      activateDeferred.reject();
+      $rootScope.$digest();
+      expect(elt.text()).toBe('hi');
+    });
+  });
+
+  it('should inject $scope into the controller constructor', function () {
+    var injectedScope;
+    registerComponent('userCmp', {
+      template: '',
+      controller: function ($scope) {
+        injectedScope = $scope;
+      }
+    });
+
+    $rootRouter.config([
+      { path: '/user', component: 'userCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/user');
+    $rootScope.$digest();
+
+    expect(injectedScope).toBeDefined();
+  });
+
+
+  it('should run the deactivate hook of controllers', function () {
+    var spy = jasmine.createSpy('deactivate');
+    registerComponent('deactivateCmp', {
+      $routerOnDeactivate: spy
+    });
+
+    $rootRouter.config([
+      { path: '/a', component: 'deactivateCmp' },
+      { path: '/b', component: 'oneCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/a');
+    $rootScope.$digest();
+    $rootRouter.navigateByUrl('/b');
+    $rootScope.$digest();
+    expect(spy).toHaveBeenCalled();
+  });
+
+
+  it('should pass instructions into the deactivate hook of controllers', function () {
+    var spy = jasmine.createSpy('deactivate');
+    registerComponent('deactivateCmp', {
+      $routerOnDeactivate: spy
+    });
+
+    $rootRouter.config([
+      { path: '/user/:name', component: 'deactivateCmp' },
+      { path: '/post/:id', component: 'oneCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/user/brian');
+    $rootScope.$digest();
+    $rootRouter.navigateByUrl('/post/123');
+    $rootScope.$digest();
+    expect(spy).toHaveBeenCalledWith(instructionFor('oneCmp'),
+                                     instructionFor('deactivateCmp'));
+  });
+
+
+  it('should run the deactivate hook before the activate hook', function () {
+    var log = [];
+
+    registerComponent('activateCmp', {
+      $routerOnActivate: function () {
+        log.push('activate');
+      }
+    });
+
+    registerComponent('deactivateCmp', {
+      $routerOnDeactivate: function () {
+        log.push('deactivate');
+      }
+    });
+
+    $rootRouter.config([
+      { path: '/a', component: 'deactivateCmp' },
+      { path: '/b', component: 'activateCmp' }
+    ]);
+    compile('outer { <div ng-outlet></div> }');
+
+    $rootRouter.navigateByUrl('/a');
+    $rootScope.$digest();
+    $rootRouter.navigateByUrl('/b');
+    $rootScope.$digest();
+
+    expect(log).toEqual(['deactivate', 'activate']);
+  });
+
+  it('should reuse a component when the routerCanReuse hook returns true', function () {
+    var log = [];
+    var cmpInstanceCount = 0;
+
+    function ReuseCmp() {
+      cmpInstanceCount++;
+    }
+
+    registerComponent('reuseCmp', {
+      template: 'reuse {<ng-outlet></ng-outlet>}',
+      $routeConfig: [
+        {path: '/a', component: 'oneCmp'},
+        {path: '/b', component: 'twoCmp'}
+      ],
+      controller: ReuseCmp,
+      $routerCanReuse: function () {
+        return true;
+      },
+      $routerOnReuse: function (next, prev) {
+        log.push('reuse: ' + prev.urlPath + ' -> ' + next.urlPath);
+      }
+    });
+
+    $rootRouter.config([
+      { path: '/on-reuse/:number/...', component: 'reuseCmp' },
+      { path: '/two', component: 'twoCmp', name: 'Two'}
+    ]);
+    compile('outer { <div ng-outlet></div> }');
+
+    $rootRouter.navigateByUrl('/on-reuse/1/a');
+    $rootScope.$digest();
+    expect(log).toEqual([]);
+    expect(cmpInstanceCount).toBe(1);
+    expect(elt.text()).toBe('outer { reuse {one} }');
+
+    $rootRouter.navigateByUrl('/on-reuse/2/b');
+    $rootScope.$digest();
+    expect(log).toEqual(['reuse: on-reuse/1 -> on-reuse/2']);
+    expect(cmpInstanceCount).toBe(1);
+    expect(elt.text()).toBe('outer { reuse {two} }');
+  });
+
+
+  it('should not reuse a component when the routerCanReuse hook returns false', function () {
+    var log = [];
+    var cmpInstanceCount = 0;
+
+    function NeverReuseCmp() {
+      cmpInstanceCount++;
+    }
+    registerComponent('reuseCmp', {
+      template: 'reuse {<ng-outlet></ng-outlet>}',
+      $routeConfig: [
+        {path: '/a', component: 'oneCmp'},
+        {path: '/b', component: 'twoCmp'}
+      ],
+      controller: NeverReuseCmp,
+      $routerCanReuse: function () {
+        return false;
+      },
+      $routerOnReuse: function (next, prev) {
+        log.push('reuse: ' + prev.urlPath + ' -> ' + next.urlPath);
+      }
+    });
+
+    $rootRouter.config([
+      { path: '/never-reuse/:number/...', component: 'reuseCmp' },
+      { path: '/two', component: 'twoCmp', name: 'Two'}
+    ]);
+    compile('outer { <div ng-outlet></div> }');
+
+    $rootRouter.navigateByUrl('/never-reuse/1/a');
+    $rootScope.$digest();
+    expect(log).toEqual([]);
+    expect(cmpInstanceCount).toBe(1);
+    expect(elt.text()).toBe('outer { reuse {one} }');
+
+    $rootRouter.navigateByUrl('/never-reuse/2/b');
+    $rootScope.$digest();
+    expect(log).toEqual([]);
+    expect(cmpInstanceCount).toBe(2);
+    expect(elt.text()).toBe('outer { reuse {two} }');
+  });
+
+
+  // TODO: need to solve getting ahold of canActivate hook
+  it('should not activate a component when canActivate returns false', function () {
+    var canActivateSpy = jasmine.createSpy('canActivate').and.returnValue(false);
+    var spy = jasmine.createSpy('activate');
+    registerComponent('activateCmp', {
+      $canActivate: canActivateSpy,
+      $routerOnActivate: spy
+    });
+
+    $rootRouter.config([
+      { path: '/a', component: 'activateCmp' }
+    ]);
+    compile('outer { <div ng-outlet></div> }');
+
+    $rootRouter.navigateByUrl('/a');
+    $rootScope.$digest();
+
+    expect(spy).not.toHaveBeenCalled();
+    expect(elt.text()).toBe('outer {  }');
+  });
+
+
+  it('should activate a component when canActivate returns true', function () {
+    var activateSpy = jasmine.createSpy('activate');
+    var canActivateSpy = jasmine.createSpy('canActivate').and.returnValue(true);
+    registerComponent('activateCmp', {
+      template: 'hi',
+      $canActivate: canActivateSpy,
+      $routerOnActivate: activateSpy
+    });
+
+    $rootRouter.config([
+      { path: '/a', component: 'activateCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/a');
+    $rootScope.$digest();
+
+    expect(canActivateSpy).toHaveBeenCalled();
+    expect(activateSpy).toHaveBeenCalled();
+    expect(elt.text()).toBe('hi');
+  });
+
+
+  it('should activate a component when canActivate returns a resolved promise', inject(function ($q) {
+    var spy = jasmine.createSpy('activate');
+    registerComponent('activateCmp', {
+      template: 'hi',
+      $canActivate: function () {
+        return $q.when(true);
+      },
+      $routerOnActivate: spy
+    });
+
+    $rootRouter.config([
+      { path: '/a', component: 'activateCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/a');
+    $rootScope.$digest();
+
+    expect(spy).toHaveBeenCalled();
+    expect(elt.text()).toBe('hi');
+  }));
+
+
+  it('should inject into the canActivate hook of controllers', inject(function ($http) {
+    var spy = jasmine.createSpy('canActivate').and.returnValue(true);
+    registerComponent('activateCmp', {
+      $canActivate: spy
+    });
+
+    spy.$inject = ['$nextInstruction', '$http'];
+
+    $rootRouter.config([
+      { path: '/user/:name', component: 'activateCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/user/brian');
+    $rootScope.$digest();
+
+    expect(spy).toHaveBeenCalled();
+    var args = spy.calls.mostRecent().args;
+    expect(args[0].params).toEqual(jasmine.objectContaining({name: 'brian'}));
+    expect(args[1]).toBe($http);
+  }));
+
+
+  it('should not navigate when routerCanDeactivate returns false', function () {
+    registerComponent('activateCmp', {
+      template: 'hi',
+      $routerCanDeactivate: function () {
+        return false;
+      }
+    });
+
+    $rootRouter.config([
+      { path: '/a', component: 'activateCmp' },
+      { path: '/b', component: 'oneCmp' }
+    ]);
+    compile('outer { <div ng-outlet></div> }');
+
+    $rootRouter.navigateByUrl('/a');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('outer { hi }');
+
+    $rootRouter.navigateByUrl('/b');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('outer { hi }');
+  });
+
+
+  it('should navigate when routerCanDeactivate returns true', function () {
+    registerComponent('activateCmp', {
+      template: 'hi',
+      $routerCanDeactivate: function () {
+        return true;
+      }
+    });
+
+    $rootRouter.config([
+      { path: '/a', component: 'activateCmp' },
+      { path: '/b', component: 'oneCmp' }
+    ]);
+    compile('outer { <div ng-outlet></div> }');
+
+    $rootRouter.navigateByUrl('/a');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('outer { hi }');
+
+    $rootRouter.navigateByUrl('/b');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('outer { one }');
+  });
+
+
+  it('should activate a component when canActivate returns true', function () {
+    var spy = jasmine.createSpy('activate');
+    registerComponent('activateCmp', {
+      template: 'hi',
+      $canActivate: function () {
+        return true;
+      },
+      $routerOnActivate: spy
+    });
+
+    $rootRouter.config([
+      { path: '/a', component: 'activateCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/a');
+    $rootScope.$digest();
+
+    expect(spy).toHaveBeenCalled();
+    expect(elt.text()).toBe('hi');
+  });
+
+
+  it('should pass instructions into the routerCanDeactivate hook of controllers', function () {
+    var spy = jasmine.createSpy('routerCanDeactivate').and.returnValue(true);
+    registerComponent('deactivateCmp', {
+      $routerCanDeactivate: spy
+    });
+
+    $rootRouter.config([
+      { path: '/user/:name', component: 'deactivateCmp' },
+      { path: '/post/:id', component: 'oneCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/user/brian');
+    $rootScope.$digest();
+    $rootRouter.navigateByUrl('/post/123');
+    $rootScope.$digest();
+    expect(spy).toHaveBeenCalledWith(instructionFor('oneCmp'),
+                                     instructionFor('deactivateCmp'));
+  });
+
+
+  function registerComponent(name, options) {
+    var controller = options.controller || function () {};
+
+    ['$routerOnActivate', '$routerOnDeactivate', '$routerOnReuse', '$routerCanReuse', '$routerCanDeactivate'].forEach(function (hookName) {
+      if (options[hookName]) {
+        controller.prototype[hookName] = options[hookName];
+      }
+    });
+
+    function factory() {
+      return {
+        template: options.template || '',
+        controllerAs: name,
+        controller: controller
+      };
+    }
+
+    if (options.$canActivate) {
+      controller.$canActivate = options.$canActivate;
+    }
+    if (options.$routeConfig) {
+      controller.$routeConfig = options.$routeConfig;
+    }
+
+    $compileProvider.directive(name, factory);
+  }
+
+  function compile(template) {
+    elt = $compile('<div>' + template + '</div>')($rootScope);
+    $rootScope.$digest();
+    return elt;
+  }
+
+  function instructionFor(componentType) {
+    return jasmine.objectContaining({componentType: componentType});
+  }
+});
diff --git a/modules/angular1_router/test/integration/navigation_spec.js b/modules/angular1_router/test/integration/navigation_spec.js
new file mode 100644
index 000000000000..8498f2d6a9e2
--- /dev/null
+++ b/modules/angular1_router/test/integration/navigation_spec.js
@@ -0,0 +1,367 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+describe('navigation', function () {
+
+  var elt,
+      $compile,
+      $rootScope,
+      $rootRouter,
+      $compileProvider;
+
+  beforeEach(function () {
+    module('ng');
+    module('ngComponentRouter');
+    module(function (_$compileProvider_) {
+      $compileProvider = _$compileProvider_;
+    });
+
+    inject(function (_$compile_, _$rootScope_, _$rootRouter_) {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+      $rootRouter = _$rootRouter_;
+    });
+
+    registerDirective('userCmp', {
+      template: '<div>hello {{userCmp.$routeParams.name}}</div>',
+      $routerOnActivate: function(next) {
+        this.$routeParams = next.params;
+      }
+    });
+    registerDirective('oneCmp', {
+      template: '<div>{{oneCmp.number}}</div>',
+      controller: function () {this.number = 'one';}
+    });
+    registerDirective('twoCmp', {
+      template: '<div>{{twoCmp.number}}</div>',
+      controller: function () {this.number = 'two';}
+    });
+    registerComponent('threeCmp', {
+      template: '<div>{{$ctrl.number}}</div>',
+      controller: function () {this.number = 'three';}
+    });
+    registerComponent('getParams', {
+      template: '<div>{{$ctrl.params.x}}</div>',
+      controller: function () {
+        this.$routerOnActivate = function(next) {
+          this.params = next.params;
+        };
+      }
+    });
+  });
+
+  it('should work in a simple case', function () {
+    compile('<ng-outlet></ng-outlet>');
+
+    $rootRouter.config([
+      { path: '/', component: 'oneCmp' }
+    ]);
+
+    $rootRouter.navigateByUrl('/');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('one');
+  });
+
+
+  it('should work with components created by the `mod.component()` helper', function () {
+    compile('<ng-outlet></ng-outlet>');
+
+    $rootRouter.config([
+      { path: '/', component: 'threeCmp' }
+    ]);
+
+    $rootRouter.navigateByUrl('/');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('three');
+  });
+
+
+  it('should navigate between components with different parameters', function () {
+    $rootRouter.config([
+      { path: '/user/:name', component: 'userCmp' }
+    ]);
+    compile('<ng-outlet></ng-outlet>');
+
+    $rootRouter.navigateByUrl('/user/brian');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello brian');
+
+    $rootRouter.navigateByUrl('/user/igor');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello igor');
+  });
+
+
+  it('should reuse a parent when navigating between child components with different parameters', function () {
+    var instanceCount = 0;
+    function ParentController() {
+      instanceCount += 1;
+    }
+    registerDirective('parentCmp', {
+      template: 'parent { <ng-outlet></ng-outlet> }',
+      $routeConfig: [
+        { path: '/user/:name', component: 'userCmp' }
+      ],
+      controller: ParentController
+    });
+
+    $rootRouter.config([
+      { path: '/parent/...', component: 'parentCmp' }
+    ]);
+    compile('<ng-outlet></ng-outlet>');
+
+    $rootRouter.navigateByUrl('/parent/user/brian');
+    $rootScope.$digest();
+    expect(instanceCount).toBe(1);
+    expect(elt.text()).toBe('parent { hello brian }');
+
+    $rootRouter.navigateByUrl('/parent/user/igor');
+    $rootScope.$digest();
+    expect(instanceCount).toBe(1);
+    expect(elt.text()).toBe('parent { hello igor }');
+  });
+
+
+  it('should work with nested outlets', function () {
+    registerDirective('childCmp', {
+      template: '<div>inner { <div ng-outlet></div> }</div>',
+      $routeConfig: [
+        { path: '/b', component: 'oneCmp' }
+      ]
+    });
+
+    $rootRouter.config([
+      { path: '/a/...', component: 'childCmp' }
+    ]);
+    compile('<div>outer { <div ng-outlet></div> }</div>');
+
+    $rootRouter.navigateByUrl('/a/b');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('outer { inner { one } }');
+  });
+
+  it('should work when parent route has empty path', inject(function ($location) {
+    registerComponent('childCmp', {
+      template: '<div>inner { <div ng-outlet></div> }</div>',
+      $routeConfig: [
+        { path: '/b', component: 'oneCmp' }
+      ]
+    });
+
+    $rootRouter.config([
+      { path: '/...', component: 'childCmp' }
+    ]);
+    compile('<div>outer { <div ng-outlet></div> }</div>');
+
+    $rootRouter.navigateByUrl('/b');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('outer { inner { one } }');
+    expect($location.path()).toBe('/b');
+  }));
+
+
+  it('should work with recursive nested outlets', function () {
+    registerDirective('recurCmp', {
+      template: '<div>recur { <div ng-outlet></div> }</div>',
+      $routeConfig: [
+        { path: '/recur', component: 'recurCmp' },
+        { path: '/end', component: 'oneCmp' }
+      ]});
+
+    $rootRouter.config([
+      { path: '/recur', component: 'recurCmp' },
+      { path: '/', component: 'oneCmp' }
+    ]);
+
+    compile('<div>root { <div ng-outlet></div> }</div>');
+    $rootRouter.navigateByUrl('/recur/recur/end');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('root { one }');
+  });
+
+
+  it('should change location path', inject(function ($location) {
+    $rootRouter.config([
+      { path: '/user', component: 'userCmp' }
+    ]);
+
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/user');
+    $rootScope.$digest();
+
+    expect($location.path()).toBe('/user');
+  }));
+
+
+  it('should pass through query terms to the location', inject(function ($location) {
+    $rootRouter.config([
+      { path: '/user', component: 'userCmp' }
+    ]);
+
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/user?x=y');
+    $rootScope.$digest();
+
+    expect($location.path()).toBe('/user');
+    expect($location.search()).toEqual({ x: 'y'});
+  }));
+
+
+  it('should change location to the canonical route', inject(function ($location) {
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.config([
+      { path: '/',     redirectTo: ['/User'] },
+      { path: '/user', component:  'userCmp', name: 'User' }
+    ]);
+
+    $rootRouter.navigateByUrl('/');
+    $rootScope.$digest();
+
+    expect($location.path()).toBe('/user');
+  }));
+
+
+  it('should change location to the canonical route with nested components', inject(function ($location) {
+    registerDirective('childRouter', {
+      template: '<div>inner { <div ng-outlet></div> }</div>',
+      $routeConfig: [
+        { path: '/new-child', component: 'oneCmp', name: 'NewChild'},
+        { path: '/new-child-two', component: 'twoCmp', name: 'NewChildTwo'}
+      ]
+    });
+
+    $rootRouter.config([
+      { path: '/old-parent/old-child', redirectTo: ['/NewParent', 'NewChild'] },
+      { path: '/old-parent/old-child-two', redirectTo: ['/NewParent', 'NewChildTwo'] },
+      { path: '/new-parent/...', component:  'childRouter', name: 'NewParent' }
+    ]);
+
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/old-parent/old-child');
+    $rootScope.$digest();
+
+    expect($location.path()).toBe('/new-parent/new-child');
+    expect(elt.text()).toBe('inner { one }');
+
+    $rootRouter.navigateByUrl('/old-parent/old-child-two');
+    $rootScope.$digest();
+
+    expect($location.path()).toBe('/new-parent/new-child-two');
+    expect(elt.text()).toBe('inner { two }');
+  }));
+
+
+  it('should navigate when the location path changes', inject(function ($location) {
+    $rootRouter.config([
+      { path: '/one', component: 'oneCmp' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $location.path('/one');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('one');
+  }));
+
+
+  it('should navigate when the location query changes', inject(function ($location) {
+    $rootRouter.config([
+      { path: '/get/params', component: 'getParams' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $location.url('/get/params?x=y');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('y');
+  }));
+
+
+  it('should expose a "navigating" property on $rootRouter', inject(function ($q) {
+    var defer;
+    registerDirective('pendingActivate', {
+      $canActivate: function () {
+        defer = $q.defer();
+        return defer.promise;
+      }
+    });
+    $rootRouter.config([
+      { path: '/pending-activate', component: 'pendingActivate' }
+    ]);
+    compile('<div ng-outlet></div>');
+
+    $rootRouter.navigateByUrl('/pending-activate');
+    $rootScope.$digest();
+    expect($rootRouter.navigating).toBe(true);
+    defer.resolve();
+    $rootScope.$digest();
+    expect($rootRouter.navigating).toBe(false);
+  }));
+
+  function registerDirective(name, options) {
+    var controller = getController(options);
+    function factory() {
+      return {
+        template: options.template || '',
+        controllerAs: name,
+        controller: controller
+      };
+    }
+    applyStaticProperties(controller, options);
+    $compileProvider.directive(name, factory);
+  }
+
+  function registerComponent(name, options) {
+
+    var definition = {
+      template: options.template || '',
+      controller: getController(options),
+    };
+    applyStaticProperties(definition.controller, options);
+    $compileProvider.component(name, definition);
+  }
+
+  function compile(template) {
+    elt = $compile('<div>' + template + '</div>')($rootScope);
+    $rootScope.$digest();
+    return elt;
+  }
+
+  function getController(options) {
+    var controller = options.controller || function () {};
+    [
+      '$routerOnActivate', '$routerOnDeactivate',
+      '$routerOnReuse', '$routerCanReuse',
+      '$routerCanDeactivate'
+    ].forEach(function (hookName) {
+      if (options[hookName]) {
+        controller.prototype[hookName] = options[hookName];
+      }
+    });
+    return controller;
+  }
+
+  function applyStaticProperties(target, options) {
+    ['$canActivate', '$routeConfig'].forEach(function(property) {
+      if (options[property]) {
+        target[property] = options[property];
+      }
+    });
+  }
+});
+
diff --git a/modules/angular1_router/test/integration/router_spec.js b/modules/angular1_router/test/integration/router_spec.js
new file mode 100644
index 000000000000..393f15462acf
--- /dev/null
+++ b/modules/angular1_router/test/integration/router_spec.js
@@ -0,0 +1,225 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+describe('router', function () {
+
+  var elt, testMod;
+  beforeEach(function () {
+    testMod = angular.module('testMod', ['ngComponentRouter'])
+      .value('$routerRootComponent', 'app');
+  });
+
+  it('should work with a provided root component', function() {
+
+    registerComponent('homeCmp', {
+      template: 'Home'
+    });
+
+    registerComponent('app', {
+      template: '<div ng-outlet></div>',
+      $routeConfig: [
+        { path: '/', component: 'homeCmp' }
+      ]
+    });
+
+    module('testMod');
+    compileApp();
+
+    inject(function($location, $rootScope) {
+      $location.path('/');
+      $rootScope.$digest();
+      expect(elt.text()).toBe('Home');
+    });
+  });
+
+  it('should bind the component to the current router', function() {
+    var router;
+    registerComponent('homeCmp', {
+      providers: { $router: '=' },
+      controller: function($scope, $element) {
+        this.$routerOnActivate = function() {
+          router = this.$router;
+        };
+      },
+      template: 'Home'
+    });
+
+    registerComponent('app', {
+      template: '<div ng-outlet></div>',
+      $routeConfig: [
+        { path: '/', component: 'homeCmp' }
+      ]
+    });
+
+    module('testMod');
+    compileApp();
+
+    inject(function($location, $rootScope) {
+      $location.path('/');
+      $rootScope.$digest();
+      var homeElement = elt.find('home-cmp');
+      expect(homeElement.text()).toBe('Home');
+      expect(homeElement.isolateScope().$ctrl.$router).toBeDefined();
+      expect(router).toBeDefined();
+    });
+  });
+
+  it('should work when an async route is provided route data', function() {
+    registerComponent('homeCmp', {
+      template: 'Home ({{$ctrl.isAdmin}})',
+      $routerOnActivate: function(next, prev) {
+        this.isAdmin = next.routeData.data.isAdmin;
+      }
+    });
+
+    registerComponent('app', {
+      template: '<div ng-outlet></div>',
+      $routeConfig: [
+        { path: '/', loader: function($q) { return $q.when('homeCmp'); }, data: { isAdmin: true } }
+      ]
+    });
+
+    module('testMod');
+    compileApp();
+
+    inject(function($location, $rootScope) {
+      $location.path('/');
+      $rootScope.$digest();
+      expect(elt.text()).toBe('Home (true)');
+    });
+  });
+
+  it('should work with a templateUrl component', function() {
+
+    var $routerOnActivate = jasmine.createSpy('$routerOnActivate');
+
+    registerComponent('homeCmp', {
+      templateUrl: 'homeCmp.html',
+      $routerOnActivate: $routerOnActivate
+    });
+
+    registerComponent('app', {
+      template: '<div ng-outlet></div>',
+      $routeConfig: [
+        { path: '/', component: 'homeCmp' }
+      ]
+    });
+
+    module('testMod');
+
+    inject(function($location, $rootScope, $httpBackend) {
+
+      $httpBackend.expectGET('homeCmp.html').respond('Home');
+
+      compileApp();
+
+      $location.path('/');
+      $rootScope.$digest();
+      $httpBackend.flush();
+      var homeElement = elt.find('home-cmp');
+      expect(homeElement.text()).toBe('Home');
+      expect($routerOnActivate).toHaveBeenCalled();
+    });
+  });
+
+  it('should provide the current instruction', function() {
+    registerComponent('homeCmp', {
+      template: 'Home ({{homeCmp.isAdmin}})'
+    });
+
+    registerComponent('app', {
+      template: '<div ng-outlet></div>',
+      $routeConfig: [
+        { path: '/', component: 'homeCmp', name: 'Home' }
+      ]
+    });
+
+    module('testMod');
+
+    inject(function($rootScope, $rootRouter, $location) {
+      compileApp();
+
+      $location.path('/');
+      $rootScope.$digest();
+      var instruction = $rootRouter.generate(['/Home']);
+      expect($rootRouter.currentInstruction).toEqual(instruction);
+    });
+  });
+
+  it('should provide the root level router', function() {
+    registerComponent('homeCmp', {
+      template: 'Home ({{homeCmp.isAdmin}})',
+      providers: {
+        $router: '<'
+      }
+    });
+
+    registerComponent('app', {
+      template: '<div ng-outlet></div>',
+      $routeConfig: [
+        { path: '/', component: 'homeCmp', name: 'Home' }
+      ]
+    });
+
+    module('testMod');
+
+    inject(function($rootScope, $rootRouter, $location) {
+      compileApp();
+
+      $location.path('/');
+      $rootScope.$digest();
+      var homeElement = elt.find('home-cmp');
+      expect(homeElement.isolateScope().$ctrl.$router.root).toEqual($rootRouter);
+    });
+  });
+
+  function registerComponent(name, options) {
+
+    var definition = {
+      providers: options.providers,
+      controller: getController(options)
+    };
+    if (options.template) definition.template = options.template;
+    if (options.templateUrl) definition.templateUrl = options.templateUrl;
+
+    applyStaticProperties(definition.controller, options);
+    angular.module('testMod').component(name, definition);
+  }
+
+  function compileApp() {
+    inject(function($compile, $rootScope) {
+      elt = $compile('<div><app></app</div>')($rootScope);
+      $rootScope.$digest();
+    });
+    return elt;
+  }
+
+  function getController(options) {
+    var controller = options.controller || function () {};
+    [
+      '$routerOnActivate', '$routerOnDeactivate',
+      '$routerOnReuse', '$routerCanReuse',
+      '$routerCanDeactivate'
+    ].forEach(function (hookName) {
+      if (options[hookName]) {
+        controller.prototype[hookName] = options[hookName];
+      }
+    });
+    return controller;
+  }
+
+  function applyStaticProperties(target, options) {
+    ['$canActivate', '$routeConfig'].forEach(function(property) {
+      if (options[property]) {
+        target[property] = options[property];
+      }
+    });
+  }
+});
diff --git a/modules/angular1_router/test/integration/shim_spec.js b/modules/angular1_router/test/integration/shim_spec.js
new file mode 100644
index 000000000000..b70041e1ac69
--- /dev/null
+++ b/modules/angular1_router/test/integration/shim_spec.js
@@ -0,0 +1,191 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+describe('ngRoute shim', function () {
+
+  var elt,
+    $compile,
+    $rootScope,
+    $rootRouter,
+    $compileProvider,
+    $routeProvider;
+
+  beforeEach(function () {
+    module('ng');
+    module('ngComponentRouter');
+    module('ngRouteShim');
+    module(function (_$compileProvider_, _$routeProvider_) {
+      $compileProvider = _$compileProvider_;
+      $routeProvider = _$routeProvider_;
+    });
+
+    inject(function (_$compile_, _$rootScope_, _$rootRouter_) {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+      $rootRouter = _$rootRouter_;
+    });
+  });
+
+  it('should work in a simple case', function () {
+    $routeProvider.when('/', {
+      controller: function OneController() {
+        this.number = 'one';
+      },
+      controllerAs: 'oneCmp',
+      template: '{{oneCmp.number}}'
+    });
+
+    compile('<ng-outlet></ng-outlet>');
+
+    $rootRouter.navigateByUrl('/');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('one');
+  });
+
+  it('should adapt routes with templateUrl', inject(function ($templateCache) {
+    $routeProvider.when('/', {
+      controller: function OneController() {
+        this.number = 'one';
+      },
+      controllerAs: 'oneCmp',
+      templateUrl: '/foo'
+    });
+
+    $templateCache.put('/foo', [200, '{{oneCmp.number}}', {}]);
+
+    compile('root {<ng-outlet></ng-outlet>}');
+
+    $rootRouter.navigateByUrl('/');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('root {one}');
+  }));
+
+  it('should adapt routes using the "resolve" option', inject(function ($q) {
+    $routeProvider.when('/', {
+      controller: function TestController(resolvedService) {
+        this.resolvedValue = resolvedService;
+      },
+      controllerAs: 'testCmp',
+      resolve: {
+        resolvedService: function () {
+          return $q.when(42);
+        }
+      },
+      template: 'value: {{testCmp.resolvedValue}}'
+    });
+
+    compile('<ng-outlet></ng-outlet>');
+
+    $rootRouter.navigateByUrl('/');
+    $rootScope.$digest();
+
+    expect(elt.text()).toBe('value: 42');
+  }));
+
+  it('should adapt routes with params', function () {
+    $routeProvider.when('/user/:name', {
+      controller: function UserController($routeParams) {
+        this.$routeParams = $routeParams;
+      },
+      controllerAs: 'userCmp',
+      template: 'hello {{userCmp.$routeParams.name}}'
+    });
+    $rootScope.$digest();
+
+    compile('<ng-outlet></ng-outlet>');
+
+    $rootRouter.navigateByUrl('/user/brian');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello brian');
+
+    $rootRouter.navigateByUrl('/user/igor');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello igor');
+  });
+
+  it('should adapt routes with wildcard params', function () {
+    $routeProvider.when('/home/:params*', {
+      controller: function UserController($routeParams) {
+        this.$routeParams = $routeParams;
+      },
+      controllerAs: 'homeCmp',
+      template: 'rest: {{homeCmp.$routeParams.params}}'
+    });
+    $rootScope.$digest();
+
+    compile('<ng-outlet></ng-outlet>');
+
+    $rootRouter.navigateByUrl('/home/foo/bar/123');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('rest: foo/bar/123');
+  });
+
+  it('should warn about and ignore routes with optional params', function () {
+    spyOn(console, 'warn');
+    $routeProvider.when('/home/:params?', {
+      template: 'home'
+    });
+    $rootScope.$digest();
+
+    compile('root {<ng-outlet></ng-outlet>}');
+
+    $rootRouter.navigateByUrl('/home/test');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('root {}');
+    expect(console.warn)
+        .toHaveBeenCalledWith('Route for "/home/:params?" ignored because it has optional parameters. Skipping.',
+                              '(1 skipped / 0 success / 1 total)');
+  });
+
+  it('should adapt routes with redirects', inject(function ($location) {
+    $routeProvider
+        .when('/home', {
+          template: 'welcome home!',
+          name: 'Home'
+        })
+        .when('/', {
+          redirectTo: '/home'
+        });
+    $rootScope.$digest();
+
+    compile('root {<ng-outlet></ng-outlet>}');
+
+    $rootRouter.navigateByUrl('/');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('root {welcome home!}');
+    expect($location.path()).toBe('/home');
+  }));
+
+  //TODO: this is broken in recognition. un-xit this when https://github.com/angular/angular/issues/4133 is fixed
+  xit('should adapt "otherwise" routes', inject(function ($location) {
+    $routeProvider
+      .when('/home', {
+        template: 'welcome home!'
+      })
+      .otherwise({
+        redirectTo: '/home'
+      });
+    $rootScope.$digest();
+
+    compile('root {<ng-outlet></ng-outlet>}');
+
+    $rootRouter.navigateByUrl('/somewhere');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('root {welcome home!}');
+    expect($location.path()).toBe('/home');
+  }));
+
+  function compile(template) {
+    elt = $compile('<div>' + template + '</div>')($rootScope);
+    $rootScope.$digest();
+    return elt;
+  }
+});
diff --git a/modules/angular1_router/test/ng_link_spec.js b/modules/angular1_router/test/ng_link_spec.js
new file mode 100644
index 000000000000..cf8f74c477e1
--- /dev/null
+++ b/modules/angular1_router/test/ng_link_spec.js
@@ -0,0 +1,212 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+describe('ngLink', function () {
+
+  describe('html5Mode enabled', function () {
+    runHrefTestsAndExpectPrefix('/', true);
+  });
+
+  describe('html5Mode disabled', function () {
+    runHrefTestsAndExpectPrefix('', false, '');
+  });
+
+  describe('html5Mode disabled, with hash prefix', function () {
+    runHrefTestsAndExpectPrefix('', false, '!');
+  });
+
+  describe('html5Mode enabled', function () {
+    runHrefTestsAndExpectPrefix('/moo', true);
+  });
+
+  describe('html5Mode disabled', function () {
+    runHrefTestsAndExpectPrefix('/moo', false, '');
+  });
+
+  describe('html5Mode disabled, with hash prefix', function () {
+    runHrefTestsAndExpectPrefix('/moo', false, '!');
+  });
+
+  function runHrefTestsAndExpectPrefix(baseHref, html5Mode, hashPrefix) {
+    var prefix = html5Mode ? '.' : '#' + hashPrefix;
+
+    it('should allow linking from the parent to the child', function () {
+      setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
+      configureRouter([
+        { path: '/a', component: 'oneCmp' },
+        { path: '/b', component: 'twoCmp', name: 'Two' }
+      ]);
+
+      var elt = compile('<a ng-link="[\'/Two\']">link</a> | outer { <div ng-outlet></div> }');
+      navigateTo('/a');
+      expect(elt.find('a').attr('href')).toBe(prefix + '/b');
+    });
+
+    it('should allow linking from the child and the parent', function () {
+      setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
+      configureRouter([
+        { path: '/a', component: 'oneCmp' },
+        { path: '/b', component: 'twoCmp', name: 'Two' }
+      ]);
+
+      var elt = compile('outer { <div ng-outlet></div> }');
+      navigateTo('/b');
+      expect(elt.find('a').attr('href')).toBe(prefix + '/b');
+    });
+
+
+    it('should allow params in routerLink directive', function () {
+      setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
+      registerComponent('twoLinkCmp', '<div><a ng-link="[\'/Two\', {param: \'lol\'}]">{{twoLinkCmp.number}}</a></div>', function () {this.number = 'two';});
+      configureRouter([
+        { path: '/a', component: 'twoLinkCmp' },
+        { path: '/b/:param', component: 'twoCmp', name: 'Two' }
+      ]);
+
+      var elt = compile('<div ng-outlet></div>');
+      navigateTo('/a');
+      expect(elt.find('a').attr('href')).toBe(prefix + '/b/lol');
+    });
+
+
+    it('should update the href of links with bound params', function () {
+      setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
+      registerComponent('twoLinkCmp', '<div><a ng-link="[\'/Two\', {param: $ctrl.number}]">{{$ctrl.number}}</a></div>', function () {this.number = 43;});
+      configureRouter([
+        { path: '/a', component: 'twoLinkCmp' },
+        { path: '/b/:param', component: 'twoCmp', name: 'Two' }
+      ]);
+
+      var elt = compile('<div ng-outlet></div>');
+      navigateTo('/a');
+      expect(elt.find('a').text()).toBe('43');
+      expect(elt.find('a').attr('href')).toBe(prefix + '/b/43');
+    });
+
+
+    it('should navigate on left-mouse click when a link url matches a route', function () {
+      setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
+      configureRouter([
+        { path: '/', component: 'oneCmp' },
+        { path: '/two', component: 'twoCmp', name: 'Two'}
+      ]);
+
+      var elt = compile('<a ng-link="[\'/Two\']">link</a> | <div ng-outlet></div>');
+      expect(elt.text()).toBe('link | one');
+      expect(elt.find('a').attr('href')).toBe(prefix + '/two');
+
+      elt.find('a')[0].click();
+      inject(function($rootScope) { $rootScope.$digest(); });
+      expect(elt.text()).toBe('link | two');
+    });
+
+
+    it('should not navigate on non-left mouse click when a link url matches a route', function() {
+      setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
+      configureRouter([
+        { path: '/', component: 'oneCmp' },
+        { path: '/two', component: 'twoCmp', name: 'Two'}
+      ]);
+
+      var elt = compile('<a ng-link="[\'/Two\']">link</a> | <div ng-outlet></div>');
+      expect(elt.text()).toBe('link | one');
+      elt.find('a').triggerHandler({ type: 'click', which: 3 });
+      inject(function($rootScope) { $rootScope.$digest(); });
+      expect(elt.text()).toBe('link | one');
+    });
+
+
+    // See https://github.com/angular/router/issues/206
+    it('should not navigate a link without an href', function () {
+      setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
+      configureRouter([
+        { path: '/', component: 'oneCmp' },
+        { path: '/two', component: 'twoCmp', name: 'Two'}
+      ]);
+      expect(function () {
+        var elt = compile('<a>link</a>');
+        expect(elt.text()).toBe('link');
+        elt.find('a')[0].click();
+        inject(function($rootScope) { $rootScope.$digest(); });
+      }).not.toThrow();
+    });
+
+    it('should add an ng-link-active class on the current link', function() {
+      setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
+      configureRouter([
+        { path: '/', component: 'oneCmp', name: 'One' }
+      ]);
+
+      var elt = compile('<a ng-link="[\'/One\']">one</a> | <div ng-outlet></div>');
+      navigateTo('/');
+      expect(elt.find('a').attr('class')).toBe('ng-link-active');
+    });
+
+    it('should not add a href if link attributes are undefined', function () {
+      setup({baseHref: baseHref, html5Mode: html5Mode, hashPrefix: hashPrefix});
+      configureRouter([
+        { path: '/a', component: 'oneCmp' },
+        { path: '/b', component: 'twoCmp', name: 'Two' }
+      ]);
+
+      var elt = compile('<a ng-link="something.undefined">link</a> | outer { <div ng-outlet></div> }');
+      navigateTo('/a');
+      expect(elt.find('a').hasAttr('href')).toBeFalsy();
+    });
+  }
+
+  function registerComponent(name, template, controller) {
+    module(function($compileProvider) {
+      $compileProvider.component(name, {
+        template: template,
+        controller: controller
+      });
+    });
+  }
+
+  function setup(config) {
+    module(function($provide) {
+      $provide.decorator('$browser', function($delegate) {
+        $delegate.baseHref = function() { return config.baseHref; };
+        return $delegate;
+      });
+    });
+    module('ngComponentRouter');
+    module(function($locationProvider) {
+      $locationProvider.html5Mode(config.html5Mode);
+      $locationProvider.hashPrefix(config.hashPrefix);
+    });
+    registerComponent('userCmp', '<div>hello {{$ctrl.$routeParams.name}}</div>', function () {});
+    registerComponent('oneCmp', '<div>{{$ctrl.number}}</div>', function () {this.number = 'one';});
+    registerComponent('twoCmp', '<div><a ng-link="[\'/Two\']">{{$ctrl.number}}</a></div>', function () {this.number = 'two';});
+  }
+
+  function configureRouter(routeConfig) {
+    inject(function($rootRouter) {
+      $rootRouter.config(routeConfig);
+    });
+  }
+
+  function compile(template) {
+    var elt;
+    inject(function($compile, $rootScope) {
+      elt = $compile('<div>' + template + '</div>')($rootScope);
+      $rootScope.$digest();
+    });
+    return elt;
+  }
+
+  function navigateTo(url) {
+    inject(function($rootRouter, $rootScope) {
+      $rootRouter.navigateByUrl(url);
+      $rootScope.$digest();
+    });
+  }
+});
diff --git a/modules/angular1_router/test/util.es5.js b/modules/angular1_router/test/util.es5.js
new file mode 100644
index 000000000000..0ed620c469c1
--- /dev/null
+++ b/modules/angular1_router/test/util.es5.js
@@ -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
+ */
+
+/*
+ * Helpers to keep tests DRY
+ */
+
+function componentTemplatePath(name) {
+  return './components/' + dashCase(name) + '/' + dashCase(name) + '.html';
+}
+
+function componentControllerName(name) {
+  return name[0].toUpperCase() + name.substr(1) + 'Controller';
+}
+
+function dashCase(str) {
+  return str.replace(/([A-Z])/g, function ($1) {
+    return '-' + $1.toLowerCase();
+  });
+}
+
+
+function provideHelpers(fn, preInject) {
+  return function () {
+    var elt,
+        $compile,
+        $rootScope,
+        $rootRouter,
+        $templateCache,
+        $controllerProvider;
+
+    module('ng');
+    module('ngNewRouter');
+    module(function(_$controllerProvider_) {
+      $controllerProvider = _$controllerProvider_;
+    });
+
+    inject(function(_$compile_, _$rootScope_, _$rootRouter_, _$templateCache_) {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+      $rootRouter = _$rootRouter_;
+      $templateCache = _$templateCache_;
+    });
+
+    function registerComponent(name, template, config) {
+      if (!template) {
+        template = '';
+      }
+      var ctrl;
+      if (!config) {
+        ctrl = function () {};
+      } else if (angular.isArray(config)) {
+        ctrl = function () {};
+        ctrl.$routeConfig = config;
+      } else if (typeof config === 'function') {
+        ctrl = config;
+      } else {
+        ctrl = function () {};
+        ctrl.prototype = config;
+      }
+      $controllerProvider.register(componentControllerName(name), ctrl);
+      put(name, template);
+    }
+
+
+    function put (name, template) {
+      $templateCache.put(componentTemplatePath(name), [200, template, {}]);
+    }
+
+    function compile(template) {
+      var elt = $compile('<div>' + template + '</div>')($rootScope);
+      $rootScope.$digest();
+      return elt;
+    }
+
+    fn({
+      registerComponent: registerComponent,
+      $rootRouter: $rootRouter,
+      put: put,
+      compile: compile
+    });
+  };
+}
diff --git a/modules/angular2/README.dart.md b/modules/angular2/README.dart.md
deleted file mode 100644
index 35cead771148..000000000000
--- a/modules/angular2/README.dart.md
+++ /dev/null
@@ -1,6 +0,0 @@
-Angular2
-=========
-
-The sources for this package are in the main [Angular2](https://github.com/angular/angular) repo. Please file issues and pull requests against that repo. This is the repository for the upcoming 2.0 version. If you're looking for the current official version of Angular you should go to [angular/angular.js](https://github.com/angular/angular.js)
-
-License: Apache MIT 2.0
diff --git a/modules/angular2/README.js.md b/modules/angular2/README.js.md
deleted file mode 100644
index 237f3e50acae..000000000000
--- a/modules/angular2/README.js.md
+++ /dev/null
@@ -1,18 +0,0 @@
-Angular2
-=========
-
-The sources for this package are in the main [Angular2](https://github.com/angular/angular) repo. Please file issues and pull requests against that repo. This is the repository for the upcoming 2.0 version. If you're looking for the current official version of Angular you should go to [angular/angular.js](https://github.com/angular/angular.js)
-
-This package contains different sources for different users:
-
-1. The files located in the root folder can be consumed using CommonJS.
-2. The files under `/es6` are es6 compatible files that can be transpiled to
-   es5 using any transpiler. This contains:
-    * `dev/`: a development version that includes runtime type assertions
-    * `prod/`: a production version that does not include runtime type assertions
-3. The files under `/ts` are the TypeScript source files.
-
-As a convenience, we provide you with `/es6/{dev|prod}/es5build.js`, a script to transpile the es6 sources into es5
-using [Google Traceur](https://github.com/google/traceur-compiler/).
-
-License: Apache MIT 2.0
diff --git a/modules/angular2/angular2.api.dart b/modules/angular2/angular2.api.dart
deleted file mode 100644
index e7d1496a13fc..000000000000
--- a/modules/angular2/angular2.api.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library angular2.angular2.api;
-// Ignore this file for dart emit.
-// It is used only for generating the TypeScript .d.ts file.
\ No newline at end of file
diff --git a/modules/angular2/angular2.api.ts b/modules/angular2/angular2.api.ts
deleted file mode 100644
index ba4c75782054..000000000000
--- a/modules/angular2/angular2.api.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// This module is used by dgeni to produce the angular2.d.ts file.
-
-// Re-export everything we export to the application runtime
-export * from './angular2';
-
-// Horrible hack. See
-// https://docs.google.com/document/d/1nNebWTiLzz5ePcit_bjZPtaiSIFU4EsQKUlX7LX0c0A/edit
-// Exports needed to make angular2.d.ts work,
-// because these symbols are dependencies of other exports but are not otherwise exported.
-// This should be cleaned up in one of two ways:
-// 1) if the symbol is intended to be part of the public API, then re-export somewhere else
-// 2) if the symbol should be omitted from the public API, then the class exposing it should
-//    not be exported, or should avoid exposing the symbol.
-export {ProtoRecord, RecordType} from './src/change_detection/proto_record';
-export * from './src/core/compiler/element_injector';
-export {DependencyAnnotation} from './src/di/annotations_impl';
-// FIXME: this is a workaround for https://github.com/angular/angular/issues/2356
-// We export the Directive *annotation* instead of the *decorator*.
-// But it breaks the build.
-export {Directive, LifecycleEvent} from './src/core/annotations_impl/annotations';
-export {Form} from './src/forms/directives/form_interface';
-export {TypeDecorator, ClassDefinition} from './src/util/decorators';
-export {Query} from './src/core/annotations_impl/di';
-export {ControlContainer} from './src/forms/directives/control_container';
-export {Injectable, Visibility} from './src/di/annotations_impl';
-export {BaseQueryList} from './src/core/compiler/base_query_list';
-export {AppProtoView, AppView, AppViewContainer} from './src/core/compiler/view';
-export * from './src/change_detection/parser/ast';
-export {AppViewManager} from './src/core/compiler/view_manager';
diff --git a/modules/angular2/angular2.ts b/modules/angular2/angular2.ts
deleted file mode 100644
index 18f92394cd17..000000000000
--- a/modules/angular2/angular2.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-export {
-  DehydratedException,
-  ExpressionChangedAfterItHasBeenChecked,
-  ChangeDetectionError,
-  ChangeDetection,
-  ON_PUSH,
-  DEFAULT,
-  ChangeDetectorRef,
-  PipeRegistry,
-  WrappedValue,
-  Pipe,
-  PipeFactory,
-  NullPipe,
-  NullPipeFactory,
-  defaultPipes,
-  DynamicChangeDetection,
-  JitChangeDetection,
-  PreGeneratedChangeDetection,
-  preGeneratedProtoDetectors,
-  defaultPipeRegistry,
-  DirectiveIndex,
-  BindingRecord,
-  ProtoChangeDetector,
-  ChangeDispatcher,
-  ChangeDetector,
-  Locals,
-  ChangeDetectorDefinition,
-  BasePipe,
-  DirectiveRecord
-} from './change_detection';
-
-export {
-  Inject,
-  Optional,
-  Injectable,
-  forwardRef,
-  resolveForwardRef,
-  ForwardRefFn,
-  Injector,
-  ProtoInjector,
-  Binding,
-  bind,
-  Key,
-  NoBindingError,
-  AbstractBindingError,
-  AsyncBindingError,
-  CyclicDependencyError,
-  InstantiationError,
-  InvalidBindingError,
-  NoAnnotationError,
-  OpaqueToken,
-  ResolvedBinding,
-  BindingBuilder,
-  Dependency,
-  Visibility,
-  Self,
-  Parent,
-  Ancestor,
-  Unbounded
-} from './di';
-
-export * from './core';
-export * from './annotations';
-export * from './directives';
-
-export {
-  AbstractControl,
-  Control,
-  ControlGroup,
-  ControlArray,
-  NgControlName,
-  NgFormControl,
-  NgModel,
-  NgControl,
-  NgControlGroup,
-  NgFormModel,
-  NgForm,
-  ControlValueAccessor,
-  DefaultValueAccessor,
-  CheckboxControlValueAccessor,
-  SelectControlValueAccessor,
-  formDirectives,
-  Validators,
-  NgValidator,
-  NgRequiredValidator,
-  FormBuilder,
-  formInjectables
-} from './forms';
-
-export * from './http';
-export {Observable, EventEmitter} from 'angular2/src/facade/async';
-export * from 'angular2/src/render/api';
-export {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
diff --git a/modules/angular2/angular2_sfx.dart b/modules/angular2/angular2_sfx.dart
deleted file mode 100644
index 529af8346be5..000000000000
--- a/modules/angular2/angular2_sfx.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library angular2.sfx;
-
-// empty as we don't have a version for Dart
diff --git a/modules/angular2/angular2_sfx.ts b/modules/angular2/angular2_sfx.ts
deleted file mode 100644
index ef31e617ecd8..000000000000
--- a/modules/angular2/angular2_sfx.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as ng from './angular2';
-// the router should have its own SFX bundle
-// But currently the module arithemtic 'angular2/router_sfx - angular2/angular2',
-// is not support by system builder.
-import * as router from './router';
-
-var angular: AngularOne = <any>ng;
-(<AngularWindow>window).angular = angular;
-
-var _prevAngular = (<AngularWindow>window).angular;
-
-
-angular.router = router;
-/**
- * Calling noConflict will restore window.angular to its pre-angular loading state
- * and return the angular module object.
- */
-angular.noConflict = function() {
-  (<AngularWindow>window).angular = _prevAngular;
-  return angular;
-};
-
-interface AngularOne {
-  router: any;
-  noConflict(): any;
-}
-
-interface AngularWindow extends Window {
-  angular: any;
-}
diff --git a/modules/angular2/annotations.ts b/modules/angular2/annotations.ts
deleted file mode 100644
index b95aa883ce22..000000000000
--- a/modules/angular2/annotations.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * @module
- * @public
- * @description
- *
- * Annotations provide the additional information that Angular requires in order to run your
- * application. This module
- * contains {@link Component}, {@link Directive}, and {@link View} annotations, as well as
- * {@link Parent} and {@link Ancestor} annotations that are
- * used by Angular to resolve dependencies.
- *
- */
-export * from './src/core/annotations/annotations';
-export * from './src/core/annotations/decorators';
diff --git a/modules/angular2/change_detection.ts b/modules/angular2/change_detection.ts
deleted file mode 100644
index 16a241c63507..000000000000
--- a/modules/angular2/change_detection.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * Change detection enables data binding in Angular.
- */
-
-export {
-  ASTWithSource,
-  AST,
-  AstTransformer,
-  AccessMember,
-  LiteralArray,
-  ImplicitReceiver
-} from './src/change_detection/parser/ast';
-
-export {Lexer} from './src/change_detection/parser/lexer';
-export {Parser} from './src/change_detection/parser/parser';
-export {Locals} from './src/change_detection/parser/locals';
-
-export {
-  DehydratedException,
-  ExpressionChangedAfterItHasBeenChecked,
-  ChangeDetectionError
-} from './src/change_detection/exceptions';
-export {
-  ProtoChangeDetector,
-  ChangeDetector,
-  ChangeDispatcher,
-  ChangeDetection,
-  ChangeDetectorDefinition
-} from './src/change_detection/interfaces';
-export {
-  CHECK_ONCE,
-  CHECK_ALWAYS,
-  DETACHED,
-  CHECKED,
-  ON_PUSH,
-  DEFAULT
-} from './src/change_detection/constants';
-export {DynamicProtoChangeDetector} from './src/change_detection/proto_change_detector';
-export {BindingRecord} from './src/change_detection/binding_record';
-export {DirectiveIndex, DirectiveRecord} from './src/change_detection/directive_record';
-export {DynamicChangeDetector} from './src/change_detection/dynamic_change_detector';
-export {ChangeDetectorRef} from './src/change_detection/change_detector_ref';
-export {PipeRegistry} from './src/change_detection/pipes/pipe_registry';
-export {uninitialized} from './src/change_detection/change_detection_util';
-export {WrappedValue, Pipe, PipeFactory, BasePipe} from './src/change_detection/pipes/pipe';
-export {NullPipe, NullPipeFactory} from './src/change_detection/pipes/null_pipe';
-export {
-  defaultPipes,
-  DynamicChangeDetection,
-  JitChangeDetection,
-  PreGeneratedChangeDetection,
-  preGeneratedProtoDetectors,
-  defaultPipeRegistry
-} from './src/change_detection/change_detection';
diff --git a/modules/angular2/core.ts b/modules/angular2/core.ts
deleted file mode 100644
index 3318ddfa5ffe..000000000000
--- a/modules/angular2/core.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * Define angular core API here.
- */
-export * from './src/core/annotations/view';
-export * from './src/core/application';
-export * from './src/core/application_tokens';
-export * from './src/core/annotations/di';
-
-export * from './src/core/compiler/compiler';
-export * from './src/core/compiler/interfaces';
-export * from './src/core/compiler/query_list';
-export * from './src/core/compiler/directive_resolver';
-export * from './src/core/compiler/dynamic_component_loader';
-export {ViewRef, ProtoViewRef} from './src/core/compiler/view_ref';
-export {ViewContainerRef} from './src/core/compiler/view_container_ref';
-export {ElementRef} from './src/core/compiler/element_ref';
-export {EventEmitter} from './src/facade/async';
-
-export {NgZone} from './src/core/zone/ng_zone';
\ No newline at end of file
diff --git a/modules/angular2/debug.ts b/modules/angular2/debug.ts
deleted file mode 100644
index c175b989bd0b..000000000000
--- a/modules/angular2/debug.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './src/debug/debug_element';
-export {inspectNativeElement, ELEMENT_PROBE_CONFIG} from './src/debug/debug_element_view_listener';
diff --git a/modules/angular2/di.ts b/modules/angular2/di.ts
deleted file mode 100644
index 71fd8487bb3b..000000000000
--- a/modules/angular2/di.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * The `di` module provides dependency injection container services.
- */
-
-export {
-  InjectAnnotation,
-  OptionalAnnotation,
-  InjectableAnnotation,
-  DependencyAnnotation,
-  VisibilityAnnotation,
-  SelfAnnotation,
-  ParentAnnotation,
-  AncestorAnnotation,
-  UnboundedAnnotation
-} from './src/di/annotations';
-
-export {
-  Inject,
-  Optional,
-  Injectable,
-  Visibility,
-  Self,
-  Parent,
-  Ancestor,
-  Unbounded
-} from './src/di/decorators';
-export {self} from './src/di/annotations_impl';
-export {forwardRef, resolveForwardRef, ForwardRefFn} from './src/di/forward_ref';
-export {
-  resolveBindings,
-  Injector,
-  ProtoInjector,
-  PUBLIC_AND_PRIVATE,
-  PUBLIC,
-  PRIVATE,
-  undefinedValue
-} from './src/di/injector';
-export {Binding, BindingBuilder, ResolvedBinding, Dependency, bind} from './src/di/binding';
-export {Key, KeyRegistry, TypeLiteral} from './src/di/key';
-export {
-  NoBindingError,
-  AbstractBindingError,
-  AsyncBindingError,
-  CyclicDependencyError,
-  InstantiationError,
-  InvalidBindingError,
-  NoAnnotationError,
-  OutOfBoundsError
-} from './src/di/exceptions';
-export {OpaqueToken} from './src/di/opaque_token';
diff --git a/modules/angular2/di_annotations.ts b/modules/angular2/di_annotations.ts
deleted file mode 100644
index 186676b48b33..000000000000
--- a/modules/angular2/di_annotations.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * Annotations which control how the dependencies are resolved by the {@link Injector}.
- */
diff --git a/modules/angular2/di_errors.ts b/modules/angular2/di_errors.ts
deleted file mode 100644
index 589f7b7f4797..000000000000
--- a/modules/angular2/di_errors.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * Errors thrown by the {@link Injector}.
- */
diff --git a/modules/angular2/directives.ts b/modules/angular2/directives.ts
deleted file mode 100644
index 580faafe32eb..000000000000
--- a/modules/angular2/directives.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * Common directives shipped with Angular.
- */
-
-import {CONST_EXPR, Type} from './src/facade/lang';
-import {NgFor} from './src/directives/ng_for';
-import {NgIf} from './src/directives/ng_if';
-import {NgNonBindable} from './src/directives/ng_non_bindable';
-import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from './src/directives/ng_switch';
-
-export * from './src/directives/class';
-export * from './src/directives/ng_for';
-export * from './src/directives/ng_if';
-export * from './src/directives/ng_non_bindable';
-export * from './src/directives/ng_switch';
-
-/**
- * A collection of the Angular core directives that are likely to be used in each and every Angular
- * application.
- *
- * This collection can be used to quickly enumerate all the built-in directives in the `@View`
- * annotation. For example,
- * instead of writing:
- *
- * ```
- * import {If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2';
- * import {OtherDirective} from 'myDirectives';
- *
- * @Component({
- *  selector: 'my-component'
- * })
- * @View({
- *   templateUrl: 'myComponent.html',
- *   directives: [If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
- * })
- * export class MyComponent {
- *   ...
- * }
- * ```
- * one could enumerate all the core directives at once:
- *
- * ```
- * import {coreDirectives} from 'angular2/angular2';
- * import {OtherDirective} from 'myDirectives';
- *
- * @Component({
- *  selector: 'my-component'
- * })
- * @View({
- *   templateUrl: 'myComponent.html',
- *   directives: [coreDirectives, OtherDirective]
- * })
- * export class MyComponent {
- *   ...
- * }
- * ```
- *
- */
-export const coreDirectives: List<Type> =
-    CONST_EXPR([NgFor, NgIf, NgNonBindable, NgSwitch, NgSwitchWhen, NgSwitchDefault]);
diff --git a/modules/angular2/docs/change_detection/change_detection.md b/modules/angular2/docs/change_detection/change_detection.md
deleted file mode 100644
index 4207687163db..000000000000
--- a/modules/angular2/docs/change_detection/change_detection.md
+++ /dev/null
@@ -1,10 +0,0 @@
-@name Change Detection
-@description
-# Change Detection
-
-* Mechanisms by which changes are detected in the model
-* DAG
-* Order of evaluation
-* Pure Functions
-* `onChange` method
-* Parser
diff --git a/modules/angular2/docs/change_detection/expressions.md b/modules/angular2/docs/change_detection/expressions.md
deleted file mode 100644
index e9cdc9aa9bb6..000000000000
--- a/modules/angular2/docs/change_detection/expressions.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Expressions
-
-## Binding Semantics
-
-### Formatters
-
-## Statement Semantics
\ No newline at end of file
diff --git a/modules/angular2/docs/change_detection/record.md b/modules/angular2/docs/change_detection/record.md
deleted file mode 100644
index 343624acec22..000000000000
--- a/modules/angular2/docs/change_detection/record.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Record
-
-## RecordRange
\ No newline at end of file
diff --git a/modules/angular2/docs/core/00_index.md b/modules/angular2/docs/core/00_index.md
deleted file mode 100644
index 95c575cf1b0b..000000000000
--- a/modules/angular2/docs/core/00_index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Overview
-
-* High level description of all of the components.
\ No newline at end of file
diff --git a/modules/angular2/docs/core/01_templates.md b/modules/angular2/docs/core/01_templates.md
deleted file mode 100644
index ebc63a0bd4f3..000000000000
--- a/modules/angular2/docs/core/01_templates.md
+++ /dev/null
@@ -1,635 +0,0 @@
-# Templates
-
-Templates are markup which is added to HTML to declaratively describe how the application model should be
-projected to DOM as well as which DOM events should invoke which methods on the controller. Templates contain
-syntax which is core to Angular and allows for data-binding, event-binding, template-instantiation.
-
-The design of the template syntax has these properties:
-
-
-* All data-binding expressions are easily identifiable. (i.e. there is never an ambiguity whether the value should be
-  interpreted as string literal or as an expression.)
-* All events and their statements are easily identifiable.
-* All places of DOM instantiation are easily identifiable.
-* All places of variable declaration are easily identifiable.
-
-The above properties guarantee that the templates are easy to parse by tools (such as IDEs) and reason about by people.
-At no point is it necessary to understand which directives are active or what their semantics are in order to reason
-about the template runtime characteristics.
-
-
-
-## Summary
-
-Below is a summary of the kinds of syntaxes which Angular templating supports. The syntaxes are explained in more
-detail in the following sections.
-
-<table>
-  <thead>
-    <tr>
-      <th>Description</th><th>Short</th><th>Canonical</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th>Text Interpolation</th>
-      <td>
-<pre>
-```
-<div>{{exp}}</div>
-```
-</pre>
-
-Example:
-<pre>
-```
-<div>
-  Hello {{name}}!
-  <br>
-  Goodbye {{name}}!
-</div>
-```
-</pre>
-      </td>
-      <td>
-`<div [text|index]=exp>`
-
-Example:
-<pre>
-```
-<div
-  [text|0]=" 'Hello' + stringify(name) + '!' "
-  [text|2]=" 'Goodbye' + stringify(name) + '!' ">
-  _<b>x</b>_
-</div>
-```
-</pre>
-      </td>
-    </tr>
-    <tr>
-      <th>Property Interpolation</th>
-      <td>
-<pre>
-```
-<div name="{{exp}}">
-```
-</pre>
-
-Example:
-
-<pre>
-```
-<div class="{{selected}}">`
-```
-</pre>
-      </td>
-      <td>
-<pre>
-```
-<div [name]="stringify(exp)">
-```
-</pre>
-
-Example:
-
-<pre>
-```
-<div [class]="stringify(selected)">
-```
-</pre>
-      </td>
-    </tr>
-    <tr>
-      <th>Property binding</th>
-      <td>
-`<div [prop]="exp">`
-
-Example:
-
-`<div [hidden]="true">`
-      </td>
-      <td>
-`<div bind-prop="exp">`
-
-Example:
-
-`<div bind-hidden="true">`
-      </td>
-    </tr>
-    <tr>
-      <th>Event binding (non-bubbling)</th>
-      <td>
-`<div (event)="statement">`
-
-Example:
-
-`<div (click)="doX()">`
-      </td>
-      <td>
-`<div on-event="statement">`
-
-Example:
-
-`<div on-click="doX()">`
-      </td>
-    </tr>
-    <tr>
-      <th>Event binding (bubbling)</th>
-      <td>
-`<div (^event)="statement">`
-
-Example:
-
-`<div (^mouseover)="hlite()">`
-      </td>
-      <td>
-`<div on-bubble-event="statement">`
-
-Example:
-
-`<div on-bubble-mouseover="hlite()">`
-      </td>
-    </tr>
-    <tr>
-      <th>Declare reference</th>
-      <td>
-`<div #symbol>`
-
-Example:
-
-<pre>
-```
-<video #player>
-<button (click)="player.play()">play</button>
-```
-</pre>
-      </td>
-      <td>
-`<div def="symbol">`
-
-Example:
-
-<pre>
-```
-<video def="player">
-<button on-click="player.play()">play</button>
-```
-</pre>
-      </td>
-    </tr>
-    <tr>
-      <th>Inline Template</th>
-      <td>
-`<div template="...">...</div>`
-
-Example:
-
-<pre>
-```
-<ul>
-  <li template="for: #item of items">
-    {{item}}
-  </li>
-</ul>
-```
-</pre>
-      </td>
-      <td>
-`<template>...</template>`
-
-Example:
-<pre>
-```
-<ul>
-  <template def-for:"item"
-            bind-for-in="items">
-    <li>
-      {{item}}
-    </li>
-  </template>
-</ul>
-```
-</pre>
-      </td>
-    </tr>
-    <tr>
-      <th>Explicit Template</th>
-      <td>
-`<template>...</template>`
-
-Example:
-
-<pre>
-```
-<template #for="item"
-          [for-in]="items">
-  _some_content_to_repeat_
-</template>
-```
-</pre>
-      </td>
-      <td>
-`<template>...</template>`
-
-Example:
-<pre>
-```
-<template def-for="item"
-          bind-for-in="items">
-  _some_content_to_repeat_
-</template>
-```
-</pre>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-
-
-## Property Binding
-
-Binding application model data to the UI is the most common kind of bindings in an Angular application. The bindings
-are always in the form of `property-name` which is assigned an `expression`. The generic form is:
-
-<table>
-  <tr>
-    <th>Short form</th>
-    <td>`<some-element [some-property]="expression">`</td>
-  </tr>
-  <tr>
-    <th>Canonical form</th>
-    <td>`<some-element bind-some-property="expression">`</td>
-  </tr>
-</table>
-
-
-Where:
-* `some-element` can be any existing DOM element.
-* `some-property` (escaped with `[]` or `bind-`) is the name of the property on `some-element`. In this case the
-  dash-case is converted into camel-case `someProperty`.
-* `expression` is a valid expression (as defined in section below).
-
-Example:
-```
-<div [title]="user.firstName">
-```
-
-In the above example the `title` property of the `div` element will be updated whenever the `user.firstName` changes
-its value.
-
-Key points:
-* The binding is to the element property not the element attribute.
-* To prevent custom element from accidentally reading the literal `expression` on the title element, the attribute name
-  is escaped. In our case the `title` is escaped to `[title]` through the addition of square brackets `[]`.
-* A binding value (in this case `user.firstName` will always be an expression, never a string literal).
-
-NOTE: Unlike Angular v1, Angular v2 binds to properties of elements rather than attributes of elements. This is
-done to better support custom elements, and to allow binding for values other than strings.
-
-NOTE: Some editors/server side pre-processors may have trouble generating `[]` around the attribute name. For this
-reason Angular also supports a canonical version which is prefixed using `bind-`.
-
-
-
-### String Interpolation
-
-Property bindings are the only data bindings which Angular supports, but for convenience Angular supports an interpolation
-syntax which is just a short hand for the data binding syntax.
-
-```
-<span>Hello {{name}}!</span>
-```
-
-is a short hand for:
-
-```
-<span [text|0]=" 'Hello ' + stringify(name) + '!' ">_</span>
-```
-
-The above says to bind the `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text`
-property. The index is necessary in case there are more than one text nodes, or if the text node we wish to bind to
-is not the first one.
-
-Similarly the same rules apply to interpolation inside attributes.
-
-```
-<span title="Hello {{name}}!"></span>
-```
-
-is a short hand for:
-
-```
-<span [title]=" 'Hello ' + stringify(name) + '!' "></span>
-```
-
-NOTE: `stringify()` is a built in implicit function which converts its argument to a string representation, while
-keeping `null` and `undefined` as empty strings.
-
-
-
-
-## Local Variables
-
-
-
-
-## Inline Templates
-
-Data binding allows updating the DOM's properties, but it does not allow for changing of the DOM structure. To change
-DOM structure we need the ability to define child templates, and then instantiate these templates into Views. The
-Views than can be inserted and removed as needed to change the DOM structure.
-
-<table>
-  <tr>
-    <th>Short form</th>
-    <td>
-```
-parent template
-<element>
-  <some-element template="instantiating-directive-microsyntax">child template</some-element>
-</element>
-```
-    </td>
-  </tr>
-  <tr>
-    <th>Canonical form</th>
-    <td>
-```
-parent template
-<element>
-  <template instantiating-directive-bindings>
-    <some-element>child template</some-element>
-  </template>
-</element>
-```
-    </td>
-  </tr>
-</table>
-
-Where:
-* `template` defines a child template and designates the anchor where Views (instances of the template) will be
-  inserted. The template can be defined implicitly with `template` attribute, which turns the current element into
-  a template, or explicitly with `<template>` element. Explicit declaration is longer, but it allows for having
-  templates which have more than one root DOM node.
-* `viewport` is required for templates. The directive is responsible for deciding when
-  and in which order should child views be inserted into this location. Such a directive usually has one or
-  more bindings and can be represented as either `viewport-directive-bindings` or
-  `viewport-directive-microsyntax` on `template` element or attribute. See template microsyntax for more details.
-
-
-Example of conditionally included template:
-
-```
-Hello {{user}}!
-<div template="ng-if: isAdministrator">
-  ...administrator menu here...
-</div>
-```
-
-In the above example the `ng-if` directive determines whether the child view (an instance of the child template) should be
-inserted into the root view. The `ng-if` makes this decision based on if the `isAdministrator` binding is true.
-
-The above example is in the short form, for better clarity let's rewrite it in the canonical form, which is functionally
-identical.
-
-```
-Hello {{user}}!
-<template [ng-if]="isAdministrator">
-  <div>
-    ...administrator menu here...
-  </div>
-</template>
-```
-
-
-### Template Microsyntax
-
-Often times it is necessary to encode a lot of different bindings into a template to control how the instantiation
-of the templates occurs. One such example is `ng-for`.
-
-```
-<form #foo=form>
-</form>
-<ul>
-  <template [ng-for] #person [ng-for-of]="people" #i="index">
-    <li>{{i}}. {{person}}<li>
-  </template>
-</ul>
-```
-
-Where:
-* `[ng-for]` triggers the for directive.
-* `#person` exports the implicit `ng-for` item. 
-* `[ng-for-of]="people"` binds an iterable object to the `ng-for` controller.
-* `#i=index` exports item index as `i`.
-
-The above example is explicit but quite wordy. For this reason in most situations a short hand version of the
-syntax is preferable.
-
-```
-<ul>
-  <li template="ng-for; #person; of=people; #i=index;">{{i}}. {{person}}<li>
-</ul>
-```
-
-Notice how each key value pair is translated to a `key=value;` statement in the `template` attribute. This makes the
-repeat syntax a much shorter, but we can do better. Turns out that most punctuation is optional in the short version
-which allows us to further shorten the text.
-
-```
-<ul>
-  <li template="ng-for #person of people #i=index">{{i}}. {{person}}<li>
-</ul>
-```
-
-We can also optionally use `var` instead of `#` and add `:` to `for` which creates the following recommended
-microsyntax for `ng-for`.
-
-```
-<ul>
-  <li template="ng-for: var person of people; var i=index">{{i}}. {{person}}<li>
-</ul>
-```
-
-Finally, we can move the `ng-for` keyword to the left hand side and prefix it with `*` as so:
-
-```
-<ul>
-  <li *ng-for="var person of people; var i=index">{{i}}. {{person}}<li>
-</ul>
-```
-
-
-The format is intentionally defined freely, so that developers of directives can build an expressive microsyntax for
-their directives. The following code describes a more formal definition.
-
-```
-expression: ...                     // as defined in Expressions section
-local: [a-zA-Z][a-zA-Z0-9]*         // exported variable name available for binding
-internal: [a-zA-Z][a-zA-Z0-9]*      // internal variable name which the directive exports.
-key: [a-z][-|_|a-z0-9]]*            // key which maps to attribute name
-keyExpression: key[:|=]?expression  // binding which maps an expression to a property
-varExport: [#|var]local(=internal)? // binding which exports a local variable from a directive
-microsyntax: ([[key|keyExpression|varExport][;|,]?)*
-```
-
-Where
-* `expression` is an Angular expression as defined in section: Expressions
-* `local` is a local identifier for local variables.
-* `internal` is an internal variable which the directive exports for binding.
-* `key` is an attribute name usually only used to trigger a specific directive.
-* `keyExpression` is an property name to which the expression will be bound to.
-* `varExport` allows exporting of directive internal state as variables for further binding. If no `internal` name
-  is specified, the exporting is to an implicit variable.
-* `microsyntax` allows you to build a simple microsyntax which can still clearly identify which expressions bind to
-  which properties as well as which variables are exported for binding.
-
-
-NOTE: the `template` attribute must be present to make it clear to the user that a sub-template is being created. This
-goes along with the philosophy that the developer should be able to reason about the template without understanding the
-semantics of the instantiator directive.
-
-
-
-
-## Binding Events
-
-Binding events allows wiring events from DOM (or other components) to the Angular controller.
-
-<table>
-  <tr>
-    <th>Short form</th>
-    <td>`<some-element (some-event)="statement">`</td>
-  </tr>
-  <tr>
-    <th>Canonical form</th>
-    <td>`<some-element on-some-event="statement">`</td>
-  </tr>
-</table>
-
-Where:
-* `some-element` Any element which can generate DOM events (or has an angular directive which generates the event).
-* `some-event` (escaped with `()` or `on-`) is the name of the event `some-event`. In this case the
-  dash-case is converted into camel-case `someEvent`.
-* `statement` is a valid statement (as defined in section below).
-If the execution of the statement returns `false`, then `preventDefault`is applied on the DOM event.
-
-By default, angular only listens to the element on the event, and ignores events which bubble. To listen to bubbled
-events (as in the case of clicking on any child) use the bubble option (`(event)` or `on-bubble-event`) as shown
-below.
-
-<table>
-  <tr>
-    <th>Short form</th>
-    <td>`<some-element (^some-event)="statement">`</td>
-  </tr>
-  <tr>
-    <th>Canonical form</th>
-    <td>`<some-element on-bubble-some-event="statement">`</td>
-  </tr>
-</table>
-
-
-Example:
-```
-@Component(...)
-class Example {
-  submit() {
-    // do something when button is clicked
-  }
-}
-
-<button (click)="submit()">Submit</button>
-```
-
-In the above example, when clicking on the submit button angular will invoke the `submit` method on the surrounding
-component's controller.
-
-
-NOTE: Unlike Angular v1, Angular v2 treats event bindings as core constructs not as directives. This means that there
-is no need to create a event directive for each kind of event. This makes it possible for Angular v2 to easily
-bind to custom events of Custom Elements, whose event names are not known ahead of time.
-
-
-
-
-## Expressions, Statements and Formatters
-
-Angular templates contain expressions for binding to data and statements for binding to events. Expressions and statements
-have different semantics.
-
-
-### Expressions
-
-Expressions can be used to bind to properties only. Expressions represent how data should be projected to the View.
-Expressions should not have any side effects and should be idempotent. Examples of where expressions can be used in
-Angular are:
-```
-<div title="{{expression}}">{{expression}}</div>
-<div [title]="expression">...</div>
-<div bind-title="expression">...</div>
-<div template="ng-if: expression">...</div>
-```
-
-Expressions are simplified version of expression in the language in which you are writing your application. (i.e.
-expressions follow JS syntax and semantics in JS and Dart syntax and semantics in Dart). Unlike expressions in the
-language, binding expressions behave differently in following ways:
-
-* *Must be defined*: Unlike Angular v1, Angular v2 will throw an error on dereferencing fields which are not defined.
-  For example: `user.name` will throw an error if `user` is defined but it does not have `name` property. If the `name`
-  property is not known, it must be declared and set to some value such as empty string, `null` (or `undefined` in JS).
-  This is done to allow early detection of errors in the templates.
-* *Safe dereference*: Expressions `user.name` where `user` is null will throw `NullPointerException` in the language.
-  In contrast Angular will silently ignore `null` on `user`. This is done because Views often have to wait for the data
-  to arrive from the backend and many fields will be `null` until the data arrives. Safe dereference is so common in the
-  Views that we have made it the default.
-* *Single expression*: An expression must be a single statement. (i.e. no `;`)
-* *No assignments*: Binding expressions can not contain assignments.
-* *No keywords*: Binding expressions can not contain keywords such as: `var`, `if`, and so on.
-* *Formatters*: Angular expressions can be piped through formatters to further transform the binding value.
-  (See: Formatters)
-
-Examples of some expressions and their behavior:
-
-Given:
-```
-class Greeter {
-  name:string;
-}
-```
-
-* `name` : Will result in the value of the `name` property on the `Greeter` class.
-* `name.length`: Will result in either the length of the `name` string or `undefined` (`null` in Dart) if `name`
-  property is `null` or `undefined`. Example of: safe dereference.
-* `foo`: Will throw an error because `foo` is not declared on the `Greeter` class. Example of: Must be defined
-* `name=1`: Not allowed because of assignment.
-* `name; name.length`: Not allowed because of multiple statements.
-
-
-
-### Statements
-
-Statements can be used to bind to events only. Statements represent actions to trigger as a response to an event.
-Examples of where statements can be used in Angular are:
-```
-<div (click)="statements">...</div>
-<div on-click="statements">...</div>
-```
-
-Statements are similar to statements in the language in which you are writing your application. (i.e.
-statements follow JS syntax and semantics in JS and Dart syntax and semantics in Dart). Unlike statements in the
-language, binding expressions behave differently in the following ways:
-
-* *Unsafe dereference*: Expressions `user.verify()` where `user` is `null` will throw `NullPointerException` in the
-  language as well as in statements. (In contrast to Safe dereference in Angular expressions.) While Angular protects
-  you from null dereferencing in expressions due to lazy loading of data, no such protection is required for statements,
-  and doing so would make it harder to detect typos in statements.
-* *Multiple statements OK*: Statements can be composed from more than one statement. (i.e. no `doA(); doB()`)
-* *Assignments OK*: Event bindings can have side effects and hence assignments are allowed.
-* *No keywords*: Statements can not contain keywords such as: `var`, `if`, and so on.
-* *No Formatters*: Angular statements can not contain formatters. (Formatters are only useful for data binding)
-
-## Further Reading
-
-* [Template Syntax Constraints and Reasoning](https://docs.google.com/document/d/1HHy_zPLGqJj0bHMiWPzPCxn1pO5GlOYwmv-qGgl4f_s)
diff --git a/modules/angular2/docs/core/02_directives.md b/modules/angular2/docs/core/02_directives.md
deleted file mode 100644
index 30584eb94309..000000000000
--- a/modules/angular2/docs/core/02_directives.md
+++ /dev/null
@@ -1,391 +0,0 @@
-# Directives
-
-Directives are classes which get instantiated as a response to a particular DOM structure. By controlling the DOM structure, what directives are imported, and their selectors, the developer can use the [composition pattern](http://en.wikipedia.org/wiki/Object_composition) to get a desirable application behavior.
-
-Directives are the cornerstone of an Angular application. We use Directives to break complex problems into smaller more reusable components. Directives allow the developer to turn HTML into a DSL and then control the application assembly process.
-
-Angular applications do not have a main method. Instead they have a root Component. Dependency Injection then assembles the directives into a working Angular application.
-
-Directives with an encapsulated view and an optional injector are called *Components*.
-
-
-## CSS Selectors
-
-Directives are instantiated whenever the CSS selector matches the DOM structure.
-
-Angular supports these CSS selector constructs:
-* Element name: `name`
-* Attribute: `[attribute]`
-* Attribute has value: `[attribute=value]`
-* Attribute contains value: `[attribute*=value]`
-* Class: `.class`
-* AND operation: `name[attribute]`
-* OR operation: `name,.class`
-* NOT operation: `:not(.class)`
-
-Angular does not support these (and any CSS selector which crosses element boundaries):
-* Descendant: `body div`
-* Direct descendant: `body > div`
-* Adjacent: `div + table`
-* Sibling: `div ~ table`
-* Wildcard: `*`
-* ID: `#id`
-* Pseudo selectors: `:pseudo` other than `:not`
-
-
-
-Given this DOM:
-
-```<input type="text" required class="primary">```
-
-These CSS selectors will match:
-* `input`: Triggers whenever element name is `input`.
-* `[required]`: Triggers whenever element contains a required attribute.
-* `[type=text]`: Triggers whenever element contains attribute `type` whose value is `text`.
-* `.primary`: Triggers whenever element class contains `primary`.
-
-CSS Selectors can be combined:
-* `input[type=text]`: Triggers on element name `input` which is of `type` `text`.
-* `input[type=text], textarea`: triggers on element name `input` which is of `type` `text` or element name `textarea`.
-
-
-
-## Directives
-
-The simplest kind of directive is a decorator. Directives are usefull for encapsulating behavior.
-
-* Multiple decorators can be placed on a single element.
-* Directives do not introduce new evaluation context.
-* Directives are registered through the `@Directive` meta-data annotation.
-
-Here is a trivial example of a tooltip decorator. The directive will log a tooltip into the console on every time mouse enters a region:
-
-```
-@Directive({
-  selector: '[tooltip]',     | CSS Selector which triggers the decorator
-  properties: [              | List which properties need to be bound
-    'text: tooltip'          |  - DOM element tooltip property should be
-  ],                         |    mapped to the directive text property.
-  host: {                    | List which events need to be mapped.
-    (mouseover): 'show()'    |  - Invoke the show() method every time
-  }                          |    the mouseover event is fired.
-})                           |
-class Form {                 | Directive controller class, instantiated
-                             | when CSS matches.
-  text:string;               | text property on the Directive Controller.
-                             |
-  show(event) {              | Show method which implements the show action.
-    console.log(this.text);  |
-  }
-}
-```
-
-Example of usage:
-
-```<span tooltip="Tooltip text goes here.">Some text here.</span>```
-
-The developer of an application can now freely use the `tooltip` attribute wherever the behavior is needed. The code above has taught the browser a new reusable and declarative behavior.
-
-Notice that data binding will work with this decorator with no further effort as shown below.
-
-```<span tooltip="Greetings {{user}}!">Some text here.</span>```
-
-
-
-## Components
-
-Component is a directive which uses shadow DOM to create encapsulate visual behavior. Components are typically used to create UI widgets or to break up the application into smaller components.
-
-* Only one component can be present per DOM element.
-* Component's CSS selectors usually trigger on element names. (Best practice)
-* Component has its own shadow view which is attached to the element as a Shadow DOM.
-* Shadow view context is the component instance. (i.e. template expressions are evaluated against the component instance.)
-
->> TODO(misko): Configuring the injector
-
-Example of a component:
-
-```
-@Component({                      | Component annotation
-  selector: 'pane',               | CSS selector on <pane> element
-  properties: [                   | List which property need to be bound
-    'title',                      |  - title mapped to component title
-    'open'                        |  - open attribute mapped to component's open property
-  ],                              |
-})                                |
-@View({                           | View annotation
-  templateUrl: 'pane.html'        |  - URL of template HTML
-})                                |
-class Pane {                      | Component controller class
-  title:string;                   |  - title property
-  open:boolean;
-
-  constructor() {
-    this.title = '';
-    this.open = true;
-  }
-
-  // Public API
-  toggle() => this.open = !this.open;
-  open() => this.open = true;
-  close() => this.open = false;
-}
-```
-
-`pane.html`:
-```
-<div class="outer">
-  <h1>{{title}}</h1>
-  <div class="inner" [hidden]="!open">
-    <content></content>
-  </div>
-</div>
-```
-
-`pane.css`:
-```
-.outer, .inner { border: 1px solid blue;}
-.h1 {background-color: blue;}
-```
-
-Example of usage:
-```
-<pane #pane title="Example Title" open="true">
-  Some text to wrap.
-</pane>
-<button (click)="pane.toggle()">toggle</button>
-
-```
-
-
-
-## Directives that use a ViewContainer
-
-Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `ng-if` and `ng-for`.)
-
-* Every `template` element creates a `ProtoView` which can be used to create Views via the ViewContainer.
-* The child views show up as siblings of the directive in the DOM.
-
->> TODO(misko): Relationship with Injection
->> TODO(misko): Instantiator can not be injected into child Views
-
-
-```
-@Directive({
-  selector: '[if]',
-  properties: [
-    'condition: if'
-  ]
-})
-export class If {
-  viewContainer: ViewContainerRef;
-  protoViewRef: ProtoViewRef;
-  view: View;
-
-  constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
-    this.viewContainer = viewContainer;
-    this.protoViewRef = protoViewRef;
-    this.view = null;
-  }
-
-  set condition(value) {
-    if (value) {
-      if (this.view === null) {
-        this.view = this.viewContainer.create(protoViewRef);
-      }
-    } else {
-      if (this.view !== null) {
-        this.viewContainer.remove(this.view);
-        this.view = null;
-      }
-    }
-  }
-}
-```
-
-## Dependency Injection
-
-Dependency Injection (DI) is a key aspect of directives. DI allows directives to be assembled into different [compositional](http://en.wikipedia.org/wiki/Object_composition) hierarchies. Angular encourages [composition over inheritance](http://en.wikipedia.org/wiki/Composition_over_inheritance) in the application design (but inheritance based approaches are still supported).
-
-When Angular directives are instantiated, the directive can ask for other related directives to be injected into it. By assembling the directives in different order and subtypes the application behavior can be controlled. A good mental model is that the DOM structure controls the directive instantiation graph.
-
-Directive instantiation is triggered by the directive CSS selector matching the DOM structure. In a directive's constructor, it can ask for other directives or application services. When asking for directives, the dependency is attempted to be located by its DOM hierarchy first, then if not found, by using the application level injector.
-
-To better understand the kinds of injections which are supported in Angular we have broken them down into use case examples.
-
-
-### Injecting Services
-
-Service injection is the most straight forward kind of injection which Angular supports. It involves a component configuring the `viewInjector` or `hostInjector` and then letting the directive ask for the configured service.
-
-This example illustrates how to inject `MyService` into `House` directive.
-
-
-```
-class MyService {}                   | Assume a service which needs to be injected
-                                     | into a directive.
-                                     |
-@Component({                         | Assume a top level application component which
-  selector: 'my-app',                | configures the services to be injected.
-  viewInjector: [MyService]           |
-})                                   |
-@View({                              | Assume we have a template that needs to be
-  templateUrl: 'my_app.html',        | configured with directives to be injected.
-  directives: [House]                |
-})                                   |
-class MyApp {}                       |
-                                     |
-@Directive({                         | This is the directive into which we would like
-  selector: '[house]'                | to inject the MyService.
-})                                   |
-class House {                        |
-  constructor(myService:MyService) { | Notice that in the constructor we can simply
-  }                                  | ask for MyService.
-}                                    |
-
-
-```
-
-Assume the following DOM structure for `my_app.html`:
-```
-<div house>     | The house attribute triggers the creation of the House directive.
-</div>          | This is equivalent to:
-                |   new House(injector.get(MyService));
-```
-
-
-### Injecting other Directives
-
-Injecting other directives into directives follows a similar mechanism as injecting services into directives, but with added constraint of visibility governed by DOM structure.
-
-There are five kinds of visibilities:
-
-* (no annotation): Inject dependant directives only if they are on the current element.
-* `@ancestor`: Inject a directive if it is at any element above the current element.
-* `@parent`: Inject a directive which is a direct parent of the current element.
-* `@child`: Inject a list of direct children which match a given type. (Used with `Query`)
-* `@descendant`: Inject a list of any children which match a given type. (Used with `Query`)
-
-NOTE: if the injection constraint can not be satisfied by the current visibility constraint, then it is forwarded to the normal injector which either provides a default value for the directive or throws an error.
-
-Here is an example of the kinds of injections which can be achieved:
-
-
-```
-@Component({                         |
-  selector: 'my-app'                 |
-})                                   |
-@View({                              |
-  templateUrl: 'my_app.html',        |
-  directives: [Form, FieldSet,       |
-    Field, Primary]                  |
-})                                   |
-class MyApp {}                       |
-                                     |
-@Directive({ selector: 'form' })     |
-class Form {                         |
-  constructor(                       |
-    @descendant sets:Query<FieldSet> |
-  ) {                                |
-  }                                  |
-}                                    |
-                                     |
-@Directive({ selector: 'fieldset' }) |
-class FieldSet {                     |
-  constructor(                       |
-    @child sets:Query<Field>         |
-  ) { ... }                          |
-}                                    |
-                                     |
-@Directive({ selector: 'field' })    |
-class Field {                        |
-  constructor(                       |
-    @ancestor field:Form,            |
-    @parent field:FieldSet,          |
-  ) { ... }                          |
-}                                    |
-                                     |
-@Directive({ selector: '[primary]'}) |
-class Primary {                      |
-  constructor(field:Field ) { ... }  |
-}                                    |
-```
-
-Assume the following DOM structure for `my_app.html`:
-```
-<form>                         |
-  <div>                        |
-    <fieldset>                 |
-       <field primary></field> |
-       <field></field>         |
-    </fieldset>                |
-  </div>                       |
-</form>                        |
-```
-
-#### Shadow DOM effects on Directive DI
-
-Shadow DOM provides an encapsulation for components, so as a general rule it does not allow directive injections to cross the shadow DOM boundaries. To remedy this, declaritively specify the required component as an injectable.
-
-```
-@Component({
-  selector: '[kid]'
-})
-@View({
-  templateUrl: 'kid.html',
-  directives: []
-})
-class Kid {
-  constructor(
-    @Parent() dad:Dad,
-    @Optional() grandpa:Grandpa
-  ) {
-    this.name = 'Billy';
-    this.dad = dad.name;
-    this.grandpa = grandpa.name;
-  }
-}
-
-@Component({
-  selector: '[dad]'
-})
-@View({
-  templateUrl: 'dad.html',
-  directives: [Kid]
-})
-class Dad {
-  constructor(@Parent() dad:Grandpa) {
-    this.name = 'Joe Jr';
-    this.dad = dad.name;
-  }
-}
-
-@Component({
-  selector: '[grandpa]',
-  viewInjector: []
-})
-@View({
-  templateUrl: 'grandpa.html',
-  directives: [Dad]
-})
-class Grandpa {
-  constructor() {
-    this.name = 'Joe';
-  }
-}
-```
-
-Assume the following DOM structure for `grandpa.html`: The Dad has access to the Grandpa.
-```
-Name: {{name}}: <br> Children: <div dad></div>
-```
-
-Assume the following DOM structure for `dad.html`: Here the rendered Kid will also have access to Grandpa.
-```
-Name: {{name}}: <br> Dad: {{dad}} <br> Children: <div kid></div>
-```
-
-## Further Reading
-
-* [Composition](http://en.wikipedia.org/wiki/Object_composition)
-* [Composition over Inheritance](http://en.wikipedia.org/wiki/Composition_over_inheritance)
diff --git a/modules/angular2/docs/core/03_pipes.md b/modules/angular2/docs/core/03_pipes.md
deleted file mode 100644
index 768a9d395799..000000000000
--- a/modules/angular2/docs/core/03_pipes.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Pipes
-
-Pipes can be appended on the end of the expressions to translate the value to a different format. Typically used
-to control the stringification of numbers, dates, and other data, but can also be used for ordering, mapping, and 
-reducing arrays. Pipes can be chained.
-
-NOTE: Pipes are known as filters in Angular v1.
-
-Pipes syntax is:
-
-```
-<div class="movie-copy">
-  <p>
-    {{ model.getValue('copy') | async | uppercase }}
-  </p>
-  <ul>
-    <li>
-      <b>Starring</b>: {{ model.getValue('starring') | async }}
-    </li>
-    <li>
-      <b>Genres</b>: {{ model.getValue('genres') | async }}
-    </li>
-  <ul>
-</div>
-```
-
-
diff --git a/modules/angular2/docs/core/05_component_directive.md b/modules/angular2/docs/core/05_component_directive.md
deleted file mode 100644
index 32cb4658b809..000000000000
--- a/modules/angular2/docs/core/05_component_directive.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Components
-
-* Different kinds of injections and visibility
-* Shadow DOM usage
-* 
\ No newline at end of file
diff --git a/modules/angular2/docs/core/09_compilation.md b/modules/angular2/docs/core/09_compilation.md
deleted file mode 100644
index fe07ed120ba7..000000000000
--- a/modules/angular2/docs/core/09_compilation.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# HTML Template Compilation
-
-* Process by which a HTML template is converted to a ProtoView
-
-1. DOM parse()
-2. Macro
-3.
-
-# HTML Template
-
-* https://docs.google.com/document/d/1HHy_zPLGqJj0bHMiWPzPCxn1pO5GlOYwmv-qGgl4f_s
-* https://docs.google.com/document/d/1kpuR512G1b0D8egl9245OHaG0cFh0ST0ekhD_g8sxtI
-* https://docs.google.com/document/d/1DuFQKElIq293FlhQHvAp__NfP1XV9r8femZFMigm4-k
-* Must understand without understanding directives
-* IDE support
-* local variables
-
-
-# Binding Philosophy
-
-# Binding to Shadow DOM
\ No newline at end of file
diff --git a/modules/angular2/docs/core/10_view.md b/modules/angular2/docs/core/10_view.md
deleted file mode 100644
index 96da86044148..000000000000
--- a/modules/angular2/docs/core/10_view.md
+++ /dev/null
@@ -1,246 +0,0 @@
-# View
-
-## Overview
-
-This document explains the concept of a View.
-A View is a core primitive used by angular to render the DOM tree.
-A ViewContainer is location in a View which can accept child Views.
-Every ViewContainer has an associated ViewContainerRef than can contain any number of child Views.
-Views form a tree structure which mimics the DOM tree.
-
-* View is a core rendering construct. A running application is just a collection of Views which are
-  nested in a tree like structure. The View tree is a simplified version of the DOM tree. A View can
-  have a single DOM Element or large DOM structures. The key is that the DOM tree in the View can
-  not undergo structural changes (only property changes).
-* Views represent a running instance of a DOM View. This implies that while elements in a View
-  can change properties, they can not change structurally. (Structural changes such as, adding or
-  removing elements requires adding or removing child Views into ViewContainers).
-* View can have zero or more ViewContainers. A ViewContainer is a marker in the DOM which allows
-  the insertion of child Views.
-* Views are created from a ProtoView. A ProtoView is a compiled DOM View which is efficient at
-  creating Views.
-* View contains a context object. The context represents the object instance against which all
-  expressions are evaluated.
-* View contains a ChangeDetector for looking for detecting changes to the model.
-* View contains ElementInjector for creating Directives.
-
-## Simple View
-
-Let's examine a simple View and all of its parts in detail.
-
-Assume the following Component:
-
-```
-class Greeter {
-  greeting:string;
-
-  constructor() {
-    this.greeting = 'Hello';
-  }
-}
-```
-
-And assume following HTML View:
-
-```
-<div>
-  Your name:
-  <input var="name" type="Text">
-  <br>
-  {{greeting}} {{name.value}}!
-</div>
-```
-
-The above template is compiled by the Compiler to create a ProtoView. The ProtoView is then used to
-create an instance of the View. The instantiation process involves cloning the above template and
-locating all of the elements which contain bindings and finally instantiating the Directives
-associated with the template. (See compilation for more details.)
-
-```
-<div>                             | viewA(greeter)
-  Your name:                      | viewA(greeter)
-  <input var="name" type="Text">  | viewA(greeter): local variable 'name'
-  <br>                            | viewA(greeter)
-  {{greeting}} {{name.value}}!    | viewA(greeter): binding expression 'greeting' & 'name.value'
-</div>                            | viewA(greeter)
-```
-
-The resulting View instance looks something like this (simplified pseudo code):
-```
-viewA = new View({
-  template: ...,
-  context: new Greeter(),
-  localVars: ['name'],
-  watchExp: ['greeting', 'name.value']
-});
-```
-
-Note:
-* View uses instance of `Greeter` as the evaluation context.
-* View knows of local variables `name`.
-* View knows which expressions need to be watched.
-* View knows what needs to be updated if the watched expression changes.
-* All DOM elements are owned by single instance of the view.
-* The structure of the DOM can not change during runtime. To allow structural changes to the DOM we need
-  to understand Composed View.
-
-
-## Composed View
-
-An important part of an application is to be able to change the DOM structure to render data for the
-user. In Angular this is done by inserting child views into the ViewContainer.
-
-Let's start with a View such as:
-
-```
-<ul>
-  <li template="ng-for: #person of people">{{person}}</li>
-</ul>
-```
-
-During the compilation process the Compiler breaks the HTML template into these two ProtoViews:
-
-```
-  <li>{{person}}</li>   | protoViewB(Locals)
-```
-
-and
-
-```
-<ul>                    | protoViewA(someContext)
-  <template></template> | protoViewA(someContext): protoViewB
-</ul>                   | protoViewA(someContext)
-```
-
-
-The next step is to compose these two ProtoViews into an actual view which is rendered to the user.
-
-*Step 1:* Instantiate `viewA`
-
-```
-<ul>                    | viewA(someContext)
-  <template></template> | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
-</ul>                   | viewA(someContext)
-```
-
-*Step2:* Instantiate `NgFor` directive which will receive the `ViewContainerRef`. (The ViewContainerRef
-has a reference to `protoViewA`).
-
-
-*Step3:* As the `NgFor` directive unrolls it asks the `ViewContainerRef` to instantiate `protoViewB` and insert
-it after the `ViewContainer` anchor. This is repeated for each `person` in `people`. Notice that
-
-```
-<ul>                    | viewA(someContext)
-  <template></template> | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
-  <li>{{person}}</li>   | viewB0(locals0(someContext))
-  <li>{{person}}</li>   | viewB1(locals0(someContext))
-</ul>                   | viewA(someContext)
-```
-
-*Step4:* All of the bindings in the child Views are updated. Notice that in the case of `NgFor`
-the evaluation context for the `viewB0` and `viewB1` are `locals0` and `locals1` respectively.
-Locals allow the introduction of new local variables visible only within the scope of the View, and
-delegate any unknown references to the parent context.
-
-```
-<ul>                    | viewA
-  <template></template> | viewA: new NgFor(new ViewContainer(protoViewB))
-  <li>Alice</li>        | viewB0
-  <li>Bob</li>          | viewB1
-</ul>                   | viewA
-```
-
-Each View can have zero or more ViewContainers. By inserting and removing child Views to and from the
-ViewContainers, the application can mutate the DOM structure to any desirable state. A View may contain
-individual nodes or a complex DOM structure. The insertion points for the child Views, known as
-ViewContainers, contain a DOM element which acts as an anchor. The anchor is either a `template` or
-a `script` element depending on your browser. It is used to identify where the child Views will be
-inserted.
-
-## Component Views
-
-A View can also contain Components. Components contain Shadow DOM for encapsulating their internal
-rendering state. Unlike ViewContainers which can contain zero or more Views, the Component always contains
-exactly one Shadow View.
-
-```
-<div>                            | viewA
-  <my-component>                 | viewA
-    #SHADOW_ROOT                 | (encapsulation boundary)
-      <div>                      |   viewB
-         encapsulated rendering  |   viewB
-      </div>                     |   viewB
-  </my-component>                | viewA
-</div>                           | viewA
-```
-
-## Evaluation Context
-
-Each View acts as a context for evaluating its expressions. There are two kinds of contexts:
-
-1. A component controller instance and
-2. a `Locals` context for introducing local variables into the View.
-
-Let's assume following component:
-
-```
-class Greeter {
-  greeting:string;
-
-  constructor() {
-    this.greeting = 'Hello';
-  }
-}
-```
-
-And assume the following HTML View:
-
-```
-<div>                             | viewA(greeter)
-  Your name:                      | viewA(greeter)
-  <input var="name" type="Text">  | viewA(greeter)
-  <br>                            | viewA(greeter)
-  {{greeting}} {{name.value}}!    | viewA(greeter)
-</div>                            | viewA(greeter)
-```
-
-The above UI is built using a single View, and hence a single context `greeter`. It can be expressed
-in this pseudo-code.
-
-```
-var greeter = new Greeter();
-```
-
-The View contains two bindings:
-
-1. `greeting`: This is bound to the `greeting` property on the `Greeter` instance.
-2. `name.value`: This poses a problem. There is no `name` property on the `Greeter` instance. To solve
-this we wrap the `Greeter` instance in the `Local` instance like so:
-```
-var greeter = new Locals(new Greeter(), {name: ref_to_input_element })
-```
-
-
-By wrapping the `Greeter` instance into the `Locals` we allow the view to introduce variables which
-are in addition to the `Greeter` instance. During the resolution of the expressions we first check
-the locals, and then the `Greeter` instance.
-
-
-
-## View LifeCycle (Hydration and Dehydration)
-
-Views transition through a particular set of states:
-
-1. View is created from the ProtoView.
-2. View can be attached to an existing ViewContainerRef.
-3. Upon attaching View to the ViewContainerRef the View needs to be hydrated. The hydration process
-   involves instantiating all of the Directives associated with the current View.
-4. At this point the view is ready and renderable. Multiple changes can be delivered to the
-   Directives from the ChangeDetection.
-5. At some point the View can be removed. At this point all of the directives are destroyed during
-   the dehydration process and the view becomes inactive.
-6. The View has to wait until it is detached from the DOM. The delay in detaching could be caused
-   because an animation is animating the view away.
-7. After the View is detached from the DOM it is ready to be reused. The view reuse allows the
-   application to be faster in subsequent renderings.
diff --git a/modules/angular2/docs/core/12_zones.md b/modules/angular2/docs/core/12_zones.md
deleted file mode 100644
index 070b62454990..000000000000
--- a/modules/angular2/docs/core/12_zones.md
+++ /dev/null
@@ -1,108 +0,0 @@
-# Zones
-
-A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for
-JavaScript. Zones are used to intercept all async operation callbacks in the browser. By intercepting async
-callbacks Angular can automatically execute the change detection at the end of the VM turn to update the application
-UI bindings. Zones means that in Angular v2 you don't have to remember to call `rootScope.$apply()` in your async call.
-
-## Execution Context
-
-```
-zone.inTheZone = false;
-
-zone.fork().run(function () {
-  zone.inTheZone = true;
-
-  setTimeout(function () {
-    console.log('async in the zone: ' + zone.inTheZone);
-  }, 0);
-});
-
-console.log('sync in the zone: ' + zone.inTheZone);
-```
-
-The above will log:
-
-```
-sync in the zone: false
-async in the zone: true
-```
-
-In the above example the `zone` is a global-callback-local variable. To the `zone`  we can attach arbitrary properties
-such as `inTheZone`.  When we enter the zone, we get a new `zone` context (which inherits all properties from the
-parent zone), once we leave the zone, the previous `zone` variable is restored. The key part is that when a async
-callback is scheduled in the zone, as is the case with `setTimeout`, the current `zone` variable is captured and
-restored on the callback. This is why the output of the `inTheZone` property inside the callback of the `setTimeout`
-prints `true`.
-
-
-## Callback Interception
-
-In addition to storing properties on the current `zone`, zones can also allow us to intercept all async callbacks
-and notify us before and after the callback executes.
-
-```
-zone.fork({
-  afterTask: function () {
-    // do some cleanup
-  }
-}).run(function () {
-  // do stuff
-});
-```
-
-The above example will execute the `afterTask` function not only after the `run` finishes, but also after any callback
-execution which was registered in the `run` block.
-
-## Putting it all together in Angular
-
-In Angular2 it is not necessary to notify Angular of changes manually after async callback, because a relevant
-async callbacks are intercepted. The question is how do we know which callbacks are Angular relevant?
-
-// TODO(vicb): outdated, rework.
-
-```
-/// Some other code running on page can do async operation
-document.addEventListener('mousemove', function () {
-  console.log('Mouse moved.');
-});
-
-var AngularZone = {
-  afterTask: function () {
-    console.log('ANGULAR AUTO-DIGEST!');
-  }
-};
-
-var ngZone = zone.fork(AngularZone);
-ngZone.run(function() {
-  console.log('I aware of angular, I should cause digest.');
-  document.addEventListener('click', function () {
-    console.log('Mouse clicked.');
-  });
-});
-```
-
-Will produce:
-
-```
-I aware of angular, I should cause digest.
-ANGULAR AUTO-DIGEST!
-```
-
-Moving the mouse will produce many:
-```
-Mouse moved.
-```
-
-But clicking will produce:
-```
-Mouse clicked.
-ANGULAR AUTO-DIGEST!
-```
-
-Notice how the place where the listener was registered will effect whether or not Angular will be notified of the
-async call and cause a change detection to run to update the UI.
-
-Being able to globally intercept the async operation is important to have a seamless integration with all existing
-libraries. But it is equally important to be able to differentiate between Angular and non-Angular code running
-on the same page concurrently.
diff --git a/modules/angular2/docs/di/di.md b/modules/angular2/docs/di/di.md
deleted file mode 100644
index 0a32ad5761ed..000000000000
--- a/modules/angular2/docs/di/di.md
+++ /dev/null
@@ -1,413 +0,0 @@
-# DI
-
-The DI module/library is a port of [di.js](https://github.com/angular/di.js) (+ the best parts of [di.dart](https://github.com/angular/di.dart)) to ES6+A.
-
-## Core Abstractions
-
-The library is built on top of the following core abstractions: `Injector`, `Binding`, and `Dependency`.
-
-* An injector resolves dependencies and creates objects.
-* A binding maps a token to a factory function and a list of dependencies. So a binding defines how to create an object. A binding can be synchronous or asynchronous.
-* A dependency points to a token and contains extra information on how the object corresponding to that token should be injected.
-
-```
-[Injector]
-    |
-    |
-    |*
-[Binding]
-   |----------|-----------------|
-   |          |                 |*
-[Token]    [FactoryFn]     [Dependency]
-                               |---------|
-                               |         |
-                            [Token]   [Flags]
-```
-
-
-
-#### Key and Token
-
-Any object can be a token. For performance reasons, however, DI does not deal with tokens directly, and, instead, wraps every token into a Key. See the section on "Key" to learn more.
-
-
-
-## Example
-
-```
-class Engine {
-}
-
-class Car {
-	constructor(@Inject(Engine) engine) {
-	}
-}
-
-var inj = Injector.resolveAndCreate([
-	bind(Car).toClass(Car),
-	bind(Engine).toClass(Engine)
-]);
-var car = inj.get(Car);
-```
-
-In this example we create two bindings: one for Car and one for Engine. `@Inject(Engine)` declares that Car depends on Engine.
-
-
-
-## Injector
-
-An injector instantiates objects lazily, only when needed, and then caches them.
-
-Compare
-
-```
-var car = inj.get(Car); //instantiates both an Engine and a Car
-```
-
-with
-
-```
-var engine = inj.get(Engine); //instantiates an Engine
-var car = inj.get(Car); //instantiates a Car
-```
-
-and with
-
-```
-var car = inj.get(Car); //instantiates both an Engine and a Car
-var engine = inj.get(Engine); //reads the Engine from the cache
-```
-
-To avoid bugs make sure the registered objects have side-effect-free constructors. If it is the case, an injector acts like a hash map with all of the registered objects created at once.
-
-
-### Child Injector
-
-Injectors are hierarchical.
-
-```
-var child = injector.resolveAndCreateChild([
-	bind(Engine).toClass(TurboEngine)
-]);
-
-var car = child.get(Car); // uses the Car binding from the parent injector and Engine from the child injector
-```
-
-
-## Bindings
-
-You can bind to a class, a value, or a factory. It is also possible to alias existing bindings.
-
-```
-var inj = Injector.resolveAndCreate([
-	bind(Car).toClass(Car),
-	bind(Engine).toClass(Engine)
-]);
-
-var inj = Injector.resolveAndCreate([
-	Car,  // syntax sugar for bind(Car).toClass(Car)
-	Engine
-]);
-
-var inj = Injector.resolveAndCreate([
-	bind(Car).toValue(new Car(new Engine()))
-]);
-
-var inj = Injector.resolveAndCreate([
-	bind(Car).toFactory((e) => new Car(e), [Engine]),
-	bind(Engine).toFactory(() => new Engine())
-]);
-```
-
-You can bind any token.
-
-```
-var inj = Injector.resolveAndCreate([
-	bind(Car).toFactory((e) => new Car(), ["engine!"]),
-	bind("engine!").toClass(Engine)
-]);
-```
-
-If you want to alias an existing binding, you can do so using `toAlias`:
-
-```
-var inj = Injector.resolveAndCreate([
-	bind(Engine).toClass(Engine),
-	bind("engine!").toAlias(Engine)
-]);
-```
-which implies `inj.get(Engine) === inj.get("engine!")`.
-
-Note that tokens and factory functions are decoupled.
-
-```
-bind("some token").toFactory(someFactory);
-```
-
-The `someFactory` function does not have to know that it creates an object for `some token`.
-
-
-### Default Bindings
-
-Injector can create binding on the fly if we enable default bindings.
-
-```
-var inj = Injector.resolveAndCreate([], {defaultBindings: true});
-var car = inj.get(Car); //this works as if `bind(Car).toClass(Car)` and `bind(Engine).toClass(Engine)` were present.
-```
-
-This can be useful in tests, but highly discouraged in production.
-
-
-## Dependencies
-
-A dependency can be synchronous, asynchronous, or lazy.
-
-```
-class Car {
-	constructor(@Inject(Engine) engine) {} // sync
-}
-
-class Car {
-	constructor(engine:Engine) {} // syntax sugar for `constructor(@Inject(Engine) engine:Engine)`
-}
-
-class Car {
-	constructor(@InjectPromise(Engine) engine:Promise) {} //async
-}
-
-class Car {
-	constructor(@InjectLazy(Engine) engineFactory:Function) {} //lazy
-}
-```
-
-* The type annotation is used by DI only when no @Inject annotations are present.
-* `InjectPromise` tells DI to inject a promise (see the section on async for more information).
-* `InjectLazy` enables deferring the instantiation of a dependency by injecting a factory function.
-
-
-
-## Async
-
-Asynchronicity makes code hard to understand and unit test. DI provides two mechanisms to help with it: asynchronous bindings and asynchronous dependencies.
-
-Suppose we have an object that requires some data from the server.
-
-This is one way to implement it:
-
-```
-class UserList {
-	loadUsers() {
-		this.usersLoaded = fetchUsersUsingHttp();
-		this.usersLoaded.then((users) => this.users = users);
-	}
-}
-
-class UserController {
-	constructor(ul:UserList){
-		this.ul.usersLoaded.then((_) => someLogic(ul.users));
-	}
-}
-```
-
-Both the UserList and UserController classes have to deal with asynchronicity. This is not ideal. UserList should only be responsible for dealing with the list of users (e.g., filtering). And UserController should make ui-related decisions based on the list. Neither should be aware of the fact that the list of users comes from the server. In addition, it clutters unit tests with dummy promises that we are forced to provide.
-
-The DI library supports asynchronous bindings, which can be used to clean up UserList and UserController.
-
-```
-class UserList {
-	constructor(users:List){
-		this.users = users;
-	}
-}
-
-class UserController {
-	constructor(ul:UserList){
-	}
-}
-
-var inj = Injector.resolveAndCreate([
-	bind(UserList).toAsyncFactory(() => fetchUsersUsingHttp().then((u) => new UserList(u))),
-	UserController
-])
-
-var uc:Promise = inj.asyncGet(UserController);
-```
-
-Both UserList, UserController are now async-free. As a result, they are easy to reason about and unit test. We pushed the async code to the edge of our system, where the initialization happens. The initialization code tends to be declarative and relatively simple. And it should be tested with integration tests, not unit tests.
-
-Note that asynchronicity have not disappeared. We just pushed out it of services.
-
-DI also supports asynchronous dependencies, so we can make some of our services responsible for dealing with async.
-
-```
-class UserList {
-	constructor(users:List){
-		this.users = users;
-	}
-}
-
-class UserController {
-	constructor(@InjectPromise(UserList) ul:Promise){
-	}
-}
-
-var inj = Injector.resolveAndCreate([
-	bind(UserList).toAsyncFactory(() => fetchUsersUsingHttp().then((u) => new UserList(u))),
-	UserController
-])
-
-var uc = inj.get(UserController);
-```
-
-We can get an instance of UserController synchronously. It is possible because we made UserController responsible for dealing with asynchronicity, so the initialization code does not have to.
-
-
-
-### Cheat Sheet
-
-#### Sync Binding + Sync Dependency:
-
-```
-class UserList {
-}
-
-class UserController {
-	constructor(ul:UserList){}
-}
-
-var inj = Injector.resolveAndCreate([UserList, UserController]);
-var ctrl:UserController = inj.get(UserController);
-```
-
-#### Sync Binding + Async Dependency:
-
-```
-class UserList {
-}
-
-class UserController {
-	constructor(@InjectPromise(UserList) ul){}
-}
-
-var inj = Injector.resolveAndCreate([UserList, UserController]);
-var ctrl:UserController = inj.get(UserController);
-// UserController responsible for dealing with asynchrony.
-expect(ctrl.ul).toBePromise();
-```
-
-#### Async Binding + Sync Dependency:
-
-```
-class UserList {
-}
-
-class UserController {
-	constructor(ul:UserList){}
-}
-
-var inj = Injector.resolveAndCreate([
-	bind(UserList).toAsyncFactory(() => fetchUsersUsingHttp().then((u) => new UserList(u))),
-	UserController
-]);
-var ctrlPromise:Promise = inj.asyncGet(UserController);
-// Caller opts in to dealing with asynchrony.
-ctrlPromise.then((ctrl) {
-	expect(ctrl).toBeAnInstanceOf(UserController);
-	expect(ctrl.ul).toBeAnInstanceOf(UserList);
-});
-// No synchronous provider for UserList, results in a NoBindingError.
-expect(() => inj.get(UserController)).toThrow(new NoBindingError(...));
-```
-
-
-#### Async Binding + Async Dependency:
-
-```
-class UserList {
-}
-
-class UserController {
-	constructor(@InjectPromise(UserList) ul){}
-}
-
-var inj = Injector.resolveAndCreate([
-	bind(UserList).toAsyncFactory(() => fetchUsersUsingHttp().then((u) => new UserList(u))),
-	UserController
-]);
-var ctrl = inj.get(UserController);
-// UserController responsible for dealing with asynchrony.
-expect(ctrl.ul).toBePromise();
-
-var ctrlPromise = inj.asyncGet(UserController);
-ctrlPromise.then((ctrl) {
-  // UserList still provided async.
-  expect(ctrl.ul).toBePromise();
-});
-```
-
-
-
-## Everything is Singleton
-
-```
-inj.get(MyClass) === inj.get(MyClass); //always holds
-```
-
-This holds even when we try to get the same token synchronously and asynchronously.
-
-```
-var p = inj.asyncGet(MyClass);
-var mc = inj.get(MyClass);
-p.then((mc2) => mc2 === mc); // always holds
-```
-
-### Transient Dependencies
-
-If we need a transient dependency, something that we want a new instance of every single time, we have two options.
-
-We can create a child injector:
-
-```
-var child = inj.resolveAndCreateChild([MyClass]);
-child.get(MyClass);
-```
-
-Or we can register a factory function:
-
-```
-var inj = Injector.resolveAndCreate([
-  bind('MyClassFactory').toFactory(dep => () => new MyClass(dep), [SomeDependency])
-]);
-
-var factory = inj.get('MyClassFactory');
-var instance1 = factory(), instance2 = factory();
-// Depends on the implementation of MyClass, but generally holds.
-expect(instance1).not.toBe(instance2);
-```
-
-
-
-## Key
-
-Most of the time we do not have to deal with keys.
-
-```
-var inj = Injector.resolveAndCreate([
-  bind(Engine).toFactory(() => new TurboEngine())  //the passed in token Engine gets mapped to a key
-]);
-var engine = inj.get(Engine); //the passed in token Engine gets mapped to a key
-```
-
-Now, the same example, but with keys
-
-```
-var ENGINE_KEY = Key.get(Engine);
-
-var inj = Injector.resolveAndCreate([
-  bind(ENGINE_KEY).toFactory(() => new TurboEngine()) // no mapping
-]);
-var engine = inj.get(ENGINE_KEY);  // no mapping
-```
-
-Every key has an id, which we utilize to store bindings and instances. Essentially, `inj.get(ENGINE_KEY)` is an array read, which is very fast.
diff --git a/modules/angular2/forms.ts b/modules/angular2/forms.ts
deleted file mode 100644
index ffc86bb6d08f..000000000000
--- a/modules/angular2/forms.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * This module is used for handling user input, by defining and building a {@link ControlGroup} that
- * consists of
- * {@link Control} objects, and mapping them onto the DOM. {@link Control} objects can then be used
- * to read information
- * from the form DOM elements.
- *
- * This module is not included in the `angular2` module; you must import the forms module
- * explicitly.
- *
- */
-
-export {AbstractControl, Control, ControlGroup, ControlArray} from './src/forms/model';
-
-export {NgControlName} from './src/forms/directives/ng_control_name';
-export {NgFormControl} from './src/forms/directives/ng_form_control';
-export {NgModel} from './src/forms/directives/ng_model';
-export {NgControl} from './src/forms/directives/ng_control';
-export {NgControlGroup} from './src/forms/directives/ng_control_group';
-export {NgFormModel} from './src/forms/directives/ng_form_model';
-export {NgForm} from './src/forms/directives/ng_form';
-export {ControlValueAccessor} from './src/forms/directives/control_value_accessor';
-export {DefaultValueAccessor} from './src/forms/directives/default_value_accessor';
-export {CheckboxControlValueAccessor} from './src/forms/directives/checkbox_value_accessor';
-export {SelectControlValueAccessor} from './src/forms/directives/select_control_value_accessor';
-export {formDirectives} from './src/forms/directives';
-export {Validators} from './src/forms/validators';
-export {NgValidator, NgRequiredValidator} from './src/forms/directives/validators';
-export {FormBuilder} from './src/forms/form_builder';
-
-import {FormBuilder} from './src/forms/form_builder';
-import {CONST_EXPR, Type} from './src/facade/lang';
-
-export const formInjectables: List<Type> = CONST_EXPR([FormBuilder]);
\ No newline at end of file
diff --git a/modules/angular2/globals.d.ts b/modules/angular2/globals.d.ts
deleted file mode 100644
index d6b18a78459d..000000000000
--- a/modules/angular2/globals.d.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * This file contains declarations of global symbols we reference in our code
- */
-
-/// <reference path="typings/zone/zone.d.ts"/>
-/// <reference path="traceur-runtime.d.ts" />
-declare var assert: any;
-declare type int = number;
-
-interface List<T> extends Array<T> {}
-
-// FIXME: K must be string!
-// FIXME: should have an index signature, `[k: string]: V;`
-interface StringMap<K, V> {}
-
-interface BrowserNodeGlobal {
-  Object: typeof Object;
-  Array: typeof Array;
-  Map: typeof Map;
-  Set: typeof Set;
-  Date: typeof Date;
-  RegExp: typeof RegExp;
-  JSON: typeof JSON;
-  Math: typeof Math;
-  assert(condition): void;
-  Reflect: any;
-  zone: Zone;
-  getAngularTestability: Function;
-  setTimeout: Function;
-  clearTimeout: Function;
-  setInterval: Function;
-  clearInterval: Function;
-}
-
-declare var global: any;
diff --git a/modules/angular2/http.ts b/modules/angular2/http.ts
deleted file mode 100644
index 58b41e34368b..000000000000
--- a/modules/angular2/http.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * The http module provides services to perform http requests. To get started, see the {@link Http}
- * class.
- */
-import {bind, Binding} from 'angular2/di';
-import {Http} from 'angular2/src/http/http';
-import {XHRBackend, XHRConnection} from 'angular2/src/http/backends/xhr_backend';
-import {BrowserXhr} from 'angular2/src/http/backends/browser_xhr';
-import {BaseRequestOptions, RequestOptions} from 'angular2/src/http/base_request_options';
-import {ConnectionBackend} from 'angular2/src/http/interfaces';
-
-export {MockConnection, MockBackend} from 'angular2/src/http/backends/mock_backend';
-export {Request} from 'angular2/src/http/static_request';
-export {Response} from 'angular2/src/http/static_response';
-import {BaseResponseOptions, ResponseOptions} from 'angular2/src/http/base_response_options';
-
-export {
-  IRequestOptions,
-  IResponseOptions,
-  Connection,
-  ConnectionBackend
-} from 'angular2/src/http/interfaces';
-
-export {BaseRequestOptions, RequestOptions} from 'angular2/src/http/base_request_options';
-export {BaseResponseOptions, ResponseOptions} from 'angular2/src/http/base_response_options';
-export {XHRBackend, XHRConnection} from 'angular2/src/http/backends/xhr_backend';
-export {Http} from 'angular2/src/http/http';
-
-export {Headers} from 'angular2/src/http/headers';
-
-export {
-  ResponseTypes,
-  ReadyStates,
-  RequestMethods,
-  RequestCredentialsOpts,
-  RequestCacheOpts,
-  RequestModesOpts
-} from 'angular2/src/http/enums';
-export {URLSearchParams} from 'angular2/src/http/url_search_params';
-
-/**
- * Provides a basic set of injectables to use the {@link Http} service in any application.
- *
- * #Example
- *
- * ```
- * import {httpInjectables, Http} from 'angular2/http';
- * @Component({selector: 'http-app', viewInjector: [httpInjectables]})
- * @View({template: '{{data}}'})
- * class MyApp {
- *   constructor(http:Http) {
- *     http.request('data.txt').subscribe(res => this.data = res.text());
- *   }
- * }
- * ```
- *
- */
-export var httpInjectables: List<any> = [
-  bind(ConnectionBackend)
-      .toClass(XHRBackend),
-  BrowserXhr,
-  bind(RequestOptions).toClass(BaseRequestOptions),
-  bind(ResponseOptions).toClass(BaseResponseOptions),
-  Http
-];
diff --git a/modules/angular2/mock.ts b/modules/angular2/mock.ts
deleted file mode 100644
index 4d186a45766d..000000000000
--- a/modules/angular2/mock.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './src/mock/mock_location_strategy';
-export {LocationStrategy} from './src/router/location_strategy';
-
-export {MockViewResolver} from 'angular2/src/mock/view_resolver_mock';
-export {MockXHR} from 'angular2/src/render/xhr_mock';
diff --git a/modules/angular2/package.json b/modules/angular2/package.json
deleted file mode 100644
index 731c5233b1e7..000000000000
--- a/modules/angular2/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "angular2",
-  "version": "<%= packageJson.version %>",
-  "description": "Angular 2 - a web framework for modern web apps",
-  "homepage": "<%= packageJson.homepage %>",
-  "bugs": "<%= packageJson.bugs %>",
-  "contributors": <%= JSON.stringify(packageJson.contributors) %>,
-  "license": "<%= packageJson.license %>",
-  "dependencies": {
-    "traceur": "<%= packageJson.dependencies.traceur %>",
-    "reflect-metadata": "<%= packageJson.dependencies['reflect-metadata'] %>",
-    "rtts_assert": "<%= packageJson.version %>",
-    "rx": "<%= packageJson.dependencies['rx'] %>",
-    "zone.js": "<%= packageJson.dependencies['zone.js'] %>"
-  },
-  "devDependencies": <%= JSON.stringify(packageJson.defaultDevDependencies) %>
-}
diff --git a/modules/angular2/pipes.ts b/modules/angular2/pipes.ts
deleted file mode 100644
index 84309712fac9..000000000000
--- a/modules/angular2/pipes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * This module provides advanced support for extending change detection.
- */
-
-export {PromisePipe} from './src/change_detection/pipes/promise_pipe';
-export {UpperCasePipe} from './src/change_detection/pipes/uppercase_pipe';
-export {LowerCasePipe} from './src/change_detection/pipes/lowercase_pipe';
-export {ObservablePipe} from './src/change_detection/pipes/observable_pipe';
-export {JsonPipe} from './src/change_detection/pipes/json_pipe';
-export {IterableChanges} from './src/change_detection/pipes/iterable_changes';
-export {KeyValueChanges} from './src/change_detection/pipes/keyvalue_changes';
-export {LimitToPipe} from './src/change_detection/pipes/limit_to_pipe';
diff --git a/modules/angular2/pubspec.yaml b/modules/angular2/pubspec.yaml
deleted file mode 100644
index c0b7d76030e6..000000000000
--- a/modules/angular2/pubspec.yaml
+++ /dev/null
@@ -1,27 +0,0 @@
-name: angular2
-version: <%= packageJson.version %>
-authors:
-<%= Object.keys(packageJson.contributors).map(function(name) {
-  return '- '+name+' <'+packageJson.contributors[name]+'>';
-}).join('\n') %>
-description: Angular 2 for Dart - a web framework for modern web apps
-homepage: <%= packageJson.homepage %>
-environment:
-  sdk: '>=1.10.0-dev.1.10 <2.0.0'
-dependencies:
-  analyzer: '>=0.24.4 <0.26.0'
-  barback: '^0.15.2+2'
-  code_transformers: '^0.2.8'
-  dart_style: '^0.1.8'
-  html: '^0.12.0'
-  logging: '>=0.9.0 <0.12.0'
-  source_span: '^1.0.0'
-  stack_trace: '^1.1.1'
-  quiver: '^0.21.4'
-dev_dependencies:
-  guinness: '^0.1.17'
-transformers:
-- angular2
-- $dart2js:
-    commandLineOptions:
-    - --show-package-warnings
diff --git a/modules/angular2/render.ts b/modules/angular2/render.ts
deleted file mode 100644
index 22f1de953a80..000000000000
--- a/modules/angular2/render.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * This module provides advanced support for extending dom strategy.
- */
-
-export * from './src/render/dom/compiler/view_loader';
-export * from './src/render/dom/shadow_dom/shadow_dom_strategy';
-export * from './src/render/dom/shadow_dom/native_shadow_dom_strategy';
-export * from './src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy';
-export * from './src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
-export * from './src/render/api';
diff --git a/modules/angular2/router.ts b/modules/angular2/router.ts
deleted file mode 100644
index 9c7e6052919a..000000000000
--- a/modules/angular2/router.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * Maps application URLs into application states, to support deep-linking and navigation.
- */
-
-
-export {Router, RootRouter} from './src/router/router';
-export {RouterOutlet} from './src/router/router_outlet';
-export {RouterLink} from './src/router/router_link';
-export {RouteParams} from './src/router/instruction';
-export {RouteRegistry} from './src/router/route_registry';
-export {LocationStrategy} from './src/router/location_strategy';
-export {HashLocationStrategy} from './src/router/hash_location_strategy';
-export {HTML5LocationStrategy} from './src/router/html5_location_strategy';
-export {Location, appBaseHrefToken} from './src/router/location';
-export {Pipeline} from './src/router/pipeline';
-export * from './src/router/route_config_decorator';
-
-import {LocationStrategy} from './src/router/location_strategy';
-import {HTML5LocationStrategy} from './src/router/html5_location_strategy';
-import {Router, RootRouter} from './src/router/router';
-import {RouterOutlet} from './src/router/router_outlet';
-import {RouterLink} from './src/router/router_link';
-import {RouteRegistry} from './src/router/route_registry';
-import {Pipeline} from './src/router/pipeline';
-import {Location} from './src/router/location';
-import {appComponentTypeToken} from './src/core/application_tokens';
-import {bind} from './di';
-import {CONST_EXPR} from './src/facade/lang';
-import {List} from './src/facade/collection';
-
-export const routerDirectives: List<any> = CONST_EXPR([RouterOutlet, RouterLink]);
-
-export var routerInjectables: List<any> = [
-  bind(RouteRegistry)
-      .toFactory((appRoot) => new RouteRegistry(appRoot), [appComponentTypeToken]),
-  Pipeline,
-  bind(LocationStrategy).toClass(HTML5LocationStrategy),
-  Location,
-  bind(Router)
-      .toFactory((registry, pipeline, location,
-                  appRoot) => { return new RootRouter(registry, pipeline, location, appRoot);},
-                 [RouteRegistry, Pipeline, Location, appComponentTypeToken])
-];
diff --git a/modules/angular2/src/change_detection/abstract_change_detector.ts b/modules/angular2/src/change_detection/abstract_change_detector.ts
deleted file mode 100644
index 3b51309d58a5..000000000000
--- a/modules/angular2/src/change_detection/abstract_change_detector.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import {isPresent} from 'angular2/src/facade/lang';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {ChangeDetectorRef} from './change_detector_ref';
-import {ChangeDetector} from './interfaces';
-import {Locals} from './parser/locals';
-import {CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED, ON_PUSH} from './constants';
-
-export class AbstractChangeDetector implements ChangeDetector {
-  lightDomChildren: List<any> = [];
-  shadowDomChildren: List<any> = [];
-  parent: ChangeDetector;
-  mode: string = null;
-  ref: ChangeDetectorRef;
-
-  constructor(public id: string) { this.ref = new ChangeDetectorRef(this); }
-
-  addChild(cd: ChangeDetector): void {
-    this.lightDomChildren.push(cd);
-    cd.parent = this;
-  }
-
-  removeChild(cd: ChangeDetector): void { ListWrapper.remove(this.lightDomChildren, cd); }
-
-  addShadowDomChild(cd: ChangeDetector): void {
-    this.shadowDomChildren.push(cd);
-    cd.parent = this;
-  }
-
-  removeShadowDomChild(cd: ChangeDetector): void { ListWrapper.remove(this.shadowDomChildren, cd); }
-
-  remove(): void { this.parent.removeChild(this); }
-
-  detectChanges(): void { this._detectChanges(false); }
-
-  checkNoChanges(): void { this._detectChanges(true); }
-
-  _detectChanges(throwOnChange: boolean): void {
-    if (this.mode === DETACHED || this.mode === CHECKED) return;
-
-    this.detectChangesInRecords(throwOnChange);
-
-    this._detectChangesInLightDomChildren(throwOnChange);
-
-    if (throwOnChange === false) this.callOnAllChangesDone();
-
-    this._detectChangesInShadowDomChildren(throwOnChange);
-
-    if (this.mode === CHECK_ONCE) this.mode = CHECKED;
-  }
-
-  detectChangesInRecords(throwOnChange: boolean): void {}
-
-  hydrate(context: any, locals: Locals, directives: any): void {}
-
-  dehydrate(): void {}
-
-  callOnAllChangesDone(): void {}
-
-  _detectChangesInLightDomChildren(throwOnChange: boolean): void {
-    var c = this.lightDomChildren;
-    for (var i = 0; i < c.length; ++i) {
-      c[i]._detectChanges(throwOnChange);
-    }
-  }
-
-  _detectChangesInShadowDomChildren(throwOnChange: boolean): void {
-    var c = this.shadowDomChildren;
-    for (var i = 0; i < c.length; ++i) {
-      c[i]._detectChanges(throwOnChange);
-    }
-  }
-
-  markAsCheckOnce(): void { this.mode = CHECK_ONCE; }
-
-  markPathToRootAsCheckOnce(): void {
-    var c: ChangeDetector = this;
-    while (isPresent(c) && c.mode != DETACHED) {
-      if (c.mode === CHECKED) c.mode = CHECK_ONCE;
-      c = c.parent;
-    }
-  }
-}
diff --git a/modules/angular2/src/change_detection/binding_record.ts b/modules/angular2/src/change_detection/binding_record.ts
deleted file mode 100644
index 6665d45a23b8..000000000000
--- a/modules/angular2/src/change_detection/binding_record.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import {isPresent, isBlank} from 'angular2/src/facade/lang';
-import {SetterFn} from 'angular2/src/reflection/types';
-import {AST} from './parser/ast';
-import {DirectiveIndex, DirectiveRecord} from './directive_record';
-
-const DIRECTIVE = "directive";
-const DIRECTIVE_LIFECYCLE = "directiveLifecycle";
-const ELEMENT_PROPERTY = "elementProperty";
-const ELEMENT_ATTRIBUTE = "elementAttribute";
-const ELEMENT_CLASS = "elementClass";
-const ELEMENT_STYLE = "elementStyle";
-const TEXT_NODE = "textNode";
-
-export class BindingRecord {
-  constructor(public mode: string, public implicitReceiver: any, public ast: AST,
-              public elementIndex: number, public propertyName: string, public propertyUnit: string,
-              public setter: SetterFn, public lifecycleEvent: string,
-              public directiveRecord: DirectiveRecord) {}
-
-  callOnChange(): boolean {
-    return isPresent(this.directiveRecord) && this.directiveRecord.callOnChange;
-  }
-
-  isOnPushChangeDetection(): boolean {
-    return isPresent(this.directiveRecord) && this.directiveRecord.isOnPushChangeDetection();
-  }
-
-  isDirective(): boolean { return this.mode === DIRECTIVE; }
-
-  isDirectiveLifecycle(): boolean { return this.mode === DIRECTIVE_LIFECYCLE; }
-
-  isElementProperty(): boolean { return this.mode === ELEMENT_PROPERTY; }
-
-  isElementAttribute(): boolean { return this.mode === ELEMENT_ATTRIBUTE; }
-
-  isElementClass(): boolean { return this.mode === ELEMENT_CLASS; }
-
-  isElementStyle(): boolean { return this.mode === ELEMENT_STYLE; }
-
-  isTextNode(): boolean { return this.mode === TEXT_NODE; }
-
-  static createForDirective(ast: AST, propertyName: string, setter: SetterFn,
-                            directiveRecord: DirectiveRecord): BindingRecord {
-    return new BindingRecord(DIRECTIVE, 0, ast, 0, propertyName, null, setter, null,
-                             directiveRecord);
-  }
-
-  static createDirectiveOnCheck(directiveRecord: DirectiveRecord): BindingRecord {
-    return new BindingRecord(DIRECTIVE_LIFECYCLE, 0, null, 0, null, null, null, "onCheck",
-                             directiveRecord);
-  }
-
-  static createDirectiveOnInit(directiveRecord: DirectiveRecord): BindingRecord {
-    return new BindingRecord(DIRECTIVE_LIFECYCLE, 0, null, 0, null, null, null, "onInit",
-                             directiveRecord);
-  }
-
-  static createDirectiveOnChange(directiveRecord: DirectiveRecord): BindingRecord {
-    return new BindingRecord(DIRECTIVE_LIFECYCLE, 0, null, 0, null, null, null, "onChange",
-                             directiveRecord);
-  }
-
-  static createForElementProperty(ast: AST, elementIndex: number,
-                                  propertyName: string): BindingRecord {
-    return new BindingRecord(ELEMENT_PROPERTY, 0, ast, elementIndex, propertyName, null, null, null,
-                             null);
-  }
-
-  static createForElementAttribute(ast: AST, elementIndex: number,
-                                   attributeName: string): BindingRecord {
-    return new BindingRecord(ELEMENT_ATTRIBUTE, 0, ast, elementIndex, attributeName, null, null,
-                             null, null);
-  }
-
-  static createForElementClass(ast: AST, elementIndex: number, className: string): BindingRecord {
-    return new BindingRecord(ELEMENT_CLASS, 0, ast, elementIndex, className, null, null, null,
-                             null);
-  }
-
-  static createForElementStyle(ast: AST, elementIndex: number, styleName: string,
-                               unit: string): BindingRecord {
-    return new BindingRecord(ELEMENT_STYLE, 0, ast, elementIndex, styleName, unit, null, null,
-                             null);
-  }
-
-  static createForHostProperty(directiveIndex: DirectiveIndex, ast: AST,
-                               propertyName: string): BindingRecord {
-    return new BindingRecord(ELEMENT_PROPERTY, directiveIndex, ast, directiveIndex.elementIndex,
-                             propertyName, null, null, null, null);
-  }
-
-  static createForHostAttribute(directiveIndex: DirectiveIndex, ast: AST,
-                                attributeName: string): BindingRecord {
-    return new BindingRecord(ELEMENT_ATTRIBUTE, directiveIndex, ast, directiveIndex.elementIndex,
-                             attributeName, null, null, null, null);
-  }
-
-  static createForHostClass(directiveIndex: DirectiveIndex, ast: AST,
-                            className: string): BindingRecord {
-    return new BindingRecord(ELEMENT_CLASS, directiveIndex, ast, directiveIndex.elementIndex,
-                             className, null, null, null, null);
-  }
-
-  static createForHostStyle(directiveIndex: DirectiveIndex, ast: AST, styleName: string,
-                            unit: string): BindingRecord {
-    return new BindingRecord(ELEMENT_STYLE, directiveIndex, ast, directiveIndex.elementIndex,
-                             styleName, unit, null, null, null);
-  }
-
-  static createForTextNode(ast: AST, elementIndex: number): BindingRecord {
-    return new BindingRecord(TEXT_NODE, 0, ast, elementIndex, null, null, null, null, null);
-  }
-}
diff --git a/modules/angular2/src/change_detection/change_detection.ts b/modules/angular2/src/change_detection/change_detection.ts
deleted file mode 100644
index 167caa155145..000000000000
--- a/modules/angular2/src/change_detection/change_detection.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import {JitProtoChangeDetector} from './jit_proto_change_detector';
-import {PregenProtoChangeDetector} from './pregen_proto_change_detector';
-import {DynamicProtoChangeDetector} from './proto_change_detector';
-import {PipeFactory, Pipe} from './pipes/pipe';
-import {PipeRegistry} from './pipes/pipe_registry';
-import {IterableChangesFactory} from './pipes/iterable_changes';
-import {KeyValueChangesFactory} from './pipes/keyvalue_changes';
-import {ObservablePipeFactory} from './pipes/observable_pipe';
-import {PromisePipeFactory} from './pipes/promise_pipe';
-import {UpperCaseFactory} from './pipes/uppercase_pipe';
-import {LowerCaseFactory} from './pipes/lowercase_pipe';
-import {JsonPipe} from './pipes/json_pipe';
-import {LimitToPipeFactory} from './pipes/limit_to_pipe';
-import {NullPipeFactory} from './pipes/null_pipe';
-import {ChangeDetection, ProtoChangeDetector, ChangeDetectorDefinition} from './interfaces';
-import {Inject, Injectable, OpaqueToken, Optional} from 'angular2/di';
-import {List, StringMap, StringMapWrapper} from 'angular2/src/facade/collection';
-import {CONST, CONST_EXPR, isPresent, BaseException} from 'angular2/src/facade/lang';
-
-/**
- * Structural diffing for `Object`s and `Map`s.
- *
- * @exportedAs angular2/pipes
- */
-export const keyValDiff: List<PipeFactory> =
-    CONST_EXPR([CONST_EXPR(new KeyValueChangesFactory()), CONST_EXPR(new NullPipeFactory())]);
-
-/**
- * Structural diffing for `Iterable` types such as `Array`s.
- *
- * @exportedAs angular2/pipes
- */
-export const iterableDiff: List<PipeFactory> =
-    CONST_EXPR([CONST_EXPR(new IterableChangesFactory()), CONST_EXPR(new NullPipeFactory())]);
-
-/**
- * Async binding to such types as Observable.
- *
- * @exportedAs angular2/pipes
- */
-export const async: List<PipeFactory> = CONST_EXPR([
-  CONST_EXPR(new ObservablePipeFactory()),
-  CONST_EXPR(new PromisePipeFactory()),
-  CONST_EXPR(new NullPipeFactory())
-]);
-
-/**
- * Uppercase text transform.
- *
- * @exportedAs angular2/pipes
- */
-export const uppercase: List<PipeFactory> =
-    CONST_EXPR([CONST_EXPR(new UpperCaseFactory()), CONST_EXPR(new NullPipeFactory())]);
-
-/**
- * Lowercase text transform.
- *
- * @exportedAs angular2/pipes
- */
-export const lowercase: List<PipeFactory> =
-    CONST_EXPR([CONST_EXPR(new LowerCaseFactory()), CONST_EXPR(new NullPipeFactory())]);
-
-/**
- * Json stringify transform.
- *
- * @exportedAs angular2/pipes
- */
-export const json: List<PipeFactory> =
-    CONST_EXPR([CONST_EXPR(new JsonPipe()), CONST_EXPR(new NullPipeFactory())]);
-
-/**
- * LimitTo text transform.
- *
- * @exportedAs angular2/pipes
- */
-export const limitTo: List<PipeFactory> =
-    CONST_EXPR([CONST_EXPR(new LimitToPipeFactory()), CONST_EXPR(new NullPipeFactory())]);
-
-export const defaultPipes = CONST_EXPR({
-  "iterableDiff": iterableDiff,
-  "keyValDiff": keyValDiff,
-  "async": async,
-  "uppercase": uppercase,
-  "lowercase": lowercase,
-  "json": json,
-  "limitTo": limitTo
-});
-
-/**
- * Map from {@link ChangeDetectorDefinition#id} to a factory method which takes a
- * {@link PipeRegistry} and a {@link ChangeDetectorDefinition} and generates a
- * {@link ProtoChangeDetector} associated with the definition.
- */
-// TODO(kegluneq): Use PregenProtoChangeDetectorFactory rather than Function once possible in
-// dart2js. See https://github.com/dart-lang/sdk/issues/23630 for details.
-export var preGeneratedProtoDetectors: StringMap<string, Function> = {};
-
-export const PROTO_CHANGE_DETECTOR_KEY = CONST_EXPR(new OpaqueToken('ProtoChangeDetectors'));
-
-/**
- * Implements change detection using a map of pregenerated proto detectors.
- *
- * @exportedAs angular2/change_detection
- */
-@Injectable()
-export class PreGeneratedChangeDetection extends ChangeDetection {
-  _dynamicChangeDetection: ChangeDetection;
-  _protoChangeDetectorFactories: StringMap<string, Function>;
-
-  constructor(private registry: PipeRegistry,
-              @Inject(PROTO_CHANGE_DETECTOR_KEY) @Optional()
-              protoChangeDetectorsForTest?: StringMap<string, Function>) {
-    super();
-    this._dynamicChangeDetection = new DynamicChangeDetection(registry);
-    this._protoChangeDetectorFactories = isPresent(protoChangeDetectorsForTest) ?
-                                             protoChangeDetectorsForTest :
-                                             preGeneratedProtoDetectors;
-  }
-
-  static isSupported(): boolean { return PregenProtoChangeDetector.isSupported(); }
-
-  createProtoChangeDetector(definition: ChangeDetectorDefinition): ProtoChangeDetector {
-    var id = definition.id;
-    if (StringMapWrapper.contains(this._protoChangeDetectorFactories, id)) {
-      return StringMapWrapper.get(this._protoChangeDetectorFactories, id)(this.registry,
-                                                                          definition);
-    }
-    return this._dynamicChangeDetection.createProtoChangeDetector(definition);
-  }
-}
-
-
-/**
- * Implements change detection that does not require `eval()`.
- *
- * This is slower than {@link JitChangeDetection}.
- *
- * @exportedAs angular2/change_detection
- */
-@Injectable()
-export class DynamicChangeDetection extends ChangeDetection {
-  constructor(private registry: PipeRegistry) { super(); }
-
-  createProtoChangeDetector(definition: ChangeDetectorDefinition): ProtoChangeDetector {
-    return new DynamicProtoChangeDetector(this.registry, definition);
-  }
-}
-
-/**
- * Implements faster change detection by generating source code.
- *
- * This requires `eval()`. For change detection that does not require `eval()`, see
- * {@link DynamicChangeDetection} and {@link PreGeneratedChangeDetection}.
- *
- * @exportedAs angular2/change_detection
- */
-@Injectable()
-@CONST()
-export class JitChangeDetection extends ChangeDetection {
-  constructor(public registry: PipeRegistry) { super(); }
-
-  static isSupported(): boolean { return JitProtoChangeDetector.isSupported(); }
-
-  createProtoChangeDetector(definition: ChangeDetectorDefinition): ProtoChangeDetector {
-    return new JitProtoChangeDetector(this.registry, definition);
-  }
-}
-
-export const defaultPipeRegistry: PipeRegistry = CONST_EXPR(new PipeRegistry(defaultPipes));
diff --git a/modules/angular2/src/change_detection/change_detection_jit_generator.dart b/modules/angular2/src/change_detection/change_detection_jit_generator.dart
deleted file mode 100644
index 04069bf1896e..000000000000
--- a/modules/angular2/src/change_detection/change_detection_jit_generator.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-library change_detection.change_detection_jit_generator;
-
-/// Placeholder JIT generator for Dart.
-/// Dart does not support `eval`, so JIT generation is not an option. Instead,
-/// the Dart transformer pre-generates these Change Detector classes and
-/// registers them with the system. See `PreGeneratedChangeDetection`,
-/// `PregenProtoChangeDetector`, and
-/// `src/transform/template_compiler/change_detector_codegen.dart` for details.
-class ChangeDetectorJITGenerator {
-  ChangeDetectorJITGenerator(typeName, strategy, records, directiveMementos) {}
-
-  generate() {
-    throw "Jit Change Detection is not supported in Dart";
-  }
-
-  static bool isSupported() => false;
-}
diff --git a/modules/angular2/src/change_detection/change_detection_jit_generator.ts b/modules/angular2/src/change_detection/change_detection_jit_generator.ts
deleted file mode 100644
index 0731a742a7bf..000000000000
--- a/modules/angular2/src/change_detection/change_detection_jit_generator.ts
+++ /dev/null
@@ -1,449 +0,0 @@
-import {BaseException, Type, isBlank, isPresent} from 'angular2/src/facade/lang';
-import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-
-import {AbstractChangeDetector} from './abstract_change_detector';
-import {ChangeDetectionUtil} from './change_detection_util';
-import {DirectiveIndex, DirectiveRecord} from './directive_record';
-
-import {ProtoRecord, RecordType} from './proto_record';
-
-
-/**
- * The code generator takes a list of proto records and creates a function/class
- * that "emulates" what the developer would write by hand to implement the same
- * kind of behaviour.
- *
- * This code should be kept in sync with the Dart transformer's
- * `angular2.transform.template_compiler.change_detector_codegen` library. If you make updates
- * here, please make equivalent changes there.
-*/
-var ABSTRACT_CHANGE_DETECTOR = "AbstractChangeDetector";
-var UTIL = "ChangeDetectionUtil";
-var DISPATCHER_ACCESSOR = "this.dispatcher";
-var PIPE_REGISTRY_ACCESSOR = "this.pipeRegistry";
-var PROTOS_ACCESSOR = "this.protos";
-var DIRECTIVES_ACCESSOR = "this.directiveRecords";
-var CONTEXT_ACCESSOR = "this.context";
-var IS_CHANGED_LOCAL = "isChanged";
-var CHANGES_LOCAL = "changes";
-var LOCALS_ACCESSOR = "this.locals";
-var MODE_ACCESSOR = "this.mode";
-var CURRENT_PROTO = "currentProto";
-var ALREADY_CHECKED_ACCESSOR = "this.alreadyChecked";
-
-
-export class ChangeDetectorJITGenerator {
-  _localNames: List<string>;
-  _changeNames: List<string>;
-  _fieldNames: List<string>;
-  _pipeNames: List<string>;
-
-  constructor(public id: string, public changeDetectionStrategy: string,
-              public records: List<ProtoRecord>, public directiveRecords: List<any>) {
-    this._localNames = this._getLocalNames(records);
-    this._changeNames = this._getChangeNames(this._localNames);
-    this._fieldNames = this._getFieldNames(this._localNames);
-    this._pipeNames = this._getPipeNames(this._localNames);
-  }
-
-  _getLocalNames(records: List<ProtoRecord>): List<string> {
-    var index = 0;
-    var names = records.map((r) => { return _sanitizeName(`${r.name}${index++}`); });
-    return ["context"].concat(names);
-  }
-
-  _getChangeNames(_localNames: List<string>): List<string> {
-    return _localNames.map((n) => `change_${n}`);
-  }
-
-  _getFieldNames(_localNames: List<string>): List<string> {
-    return _localNames.map((n) => `this.${n}`);
-  }
-
-  _getPipeNames(_localNames: List<string>): List<string> {
-    return _localNames.map((n) => `this.${n}_pipe`);
-  }
-
-  generate(): Function {
-    var typeName = _sanitizeName(`ChangeDetector_${this.id}`);
-    var classDefinition = `
-      var ${typeName} = function ${typeName}(dispatcher, pipeRegistry, protos, directiveRecords) {
-        ${ABSTRACT_CHANGE_DETECTOR}.call(this, ${JSON.stringify(this.id)});
-        ${DISPATCHER_ACCESSOR} = dispatcher;
-        ${PIPE_REGISTRY_ACCESSOR} = pipeRegistry;
-        ${PROTOS_ACCESSOR} = protos;
-        ${DIRECTIVES_ACCESSOR} = directiveRecords;
-        ${LOCALS_ACCESSOR} = null;
-        ${ALREADY_CHECKED_ACCESSOR} = false;
-        ${this._genFieldDefinitions()}
-      }
-
-      ${typeName}.prototype = Object.create(${ABSTRACT_CHANGE_DETECTOR}.prototype);
-
-      ${typeName}.prototype.detectChangesInRecords = function(throwOnChange) {
-        if (!this.hydrated()) {
-          ${UTIL}.throwDehydrated();
-        }
-        ${this._genLocalDefinitions()}
-        ${this._genChangeDefinitions()}
-        var ${IS_CHANGED_LOCAL} = false;
-        var ${CURRENT_PROTO};
-        var ${CHANGES_LOCAL} = null;
-
-        context = ${CONTEXT_ACCESSOR};
-
-        ${this.records.map((r) => this._genRecord(r)).join("\n")}
-
-        ${ALREADY_CHECKED_ACCESSOR} = true;
-      }
-
-      ${typeName}.prototype.callOnAllChangesDone = function() {
-        ${this._genCallOnAllChangesDoneBody()}
-      }
-
-      ${typeName}.prototype.hydrate = function(context, locals, directives) {
-        ${MODE_ACCESSOR} = "${ChangeDetectionUtil.changeDetectionMode(this.changeDetectionStrategy)}";
-        ${CONTEXT_ACCESSOR} = context;
-        ${LOCALS_ACCESSOR} = locals;
-        ${this._genHydrateDirectives()}
-        ${this._genHydrateDetectors()}
-        ${ALREADY_CHECKED_ACCESSOR} = false;
-      }
-
-      ${typeName}.prototype.dehydrate = function() {
-        ${this._genPipeOnDestroy()}
-        ${this._genFieldDefinitions()}
-        ${LOCALS_ACCESSOR} = null;
-      }
-
-      ${typeName}.prototype.hydrated = function() {
-        return ${CONTEXT_ACCESSOR} !== null;
-      }
-
-      return function(dispatcher, pipeRegistry) {
-        return new ${typeName}(dispatcher, pipeRegistry, protos, directiveRecords);
-      }
-    `;
-    return new Function('AbstractChangeDetector', 'ChangeDetectionUtil', 'protos',
-                        'directiveRecords', classDefinition)(
-        AbstractChangeDetector, ChangeDetectionUtil, this.records, this.directiveRecords);
-  }
-
-  _genGetDirectiveFieldNames(): List<string> {
-    return this.directiveRecords.map(d => this._genGetDirective(d.directiveIndex));
-  }
-
-  _genGetDetectorFieldNames(): List<string> {
-    return this.directiveRecords.filter(r => r.isOnPushChangeDetection())
-        .map((d) => this._genGetDetector(d.directiveIndex));
-  }
-
-  _genGetDirective(d: DirectiveIndex): string { return `this.directive_${d.name}`; }
-
-  _genGetDetector(d: DirectiveIndex): string { return `this.detector_${d.name}`; }
-
-  _getNonNullPipeNames(): List<string> {
-    var pipes = [];
-    this.records.forEach((r) => {
-      if (r.isPipeRecord()) {
-        pipes.push(this._pipeNames[r.selfIndex]);
-      }
-    });
-    return pipes;
-  }
-
-  _genFieldDefinitions(): string {
-    var fields = [];
-    fields = fields.concat(this._fieldNames);
-    fields = fields.concat(this._getNonNullPipeNames());
-    fields = fields.concat(this._genGetDirectiveFieldNames());
-    fields = fields.concat(this._genGetDetectorFieldNames());
-    return fields.map((n) => {
-                   return n == CONTEXT_ACCESSOR ? `${n} = null;` :
-                                                  `${n} = ${UTIL}.uninitialized();`;
-                 })
-        .join("\n");
-  }
-
-  _genHydrateDirectives(): string {
-    var directiveFieldNames = this._genGetDirectiveFieldNames();
-    var lines = ListWrapper.createFixedSize(directiveFieldNames.length);
-    for (var i = 0, iLen = directiveFieldNames.length; i < iLen; ++i) {
-      lines[i] =
-          `${directiveFieldNames[i]} = directives.getDirectiveFor(${DIRECTIVES_ACCESSOR}[${i}].directiveIndex);`
-    }
-    return lines.join('\n');
-  }
-
-  _genHydrateDetectors(): string {
-    var detectorFieldNames = this._genGetDetectorFieldNames();
-    var lines = ListWrapper.createFixedSize(detectorFieldNames.length);
-    for (var i = 0, iLen = detectorFieldNames.length; i < iLen; ++i) {
-      lines[i] = `${detectorFieldNames[i]} =
-          directives.getDetectorFor(${DIRECTIVES_ACCESSOR}[${i}].directiveIndex);`
-    }
-    return lines.join('\n');
-  }
-
-  _genPipeOnDestroy(): string {
-    return this._getNonNullPipeNames().map((p) => `${p}.onDestroy();`).join("\n");
-  }
-
-  _genCallOnAllChangesDoneBody(): string {
-    var notifications = [];
-    var dirs = this.directiveRecords;
-
-    for (var i = dirs.length - 1; i >= 0; --i) {
-      var dir = dirs[i];
-      if (dir.callOnAllChangesDone) {
-        notifications.push(`${this._genGetDirective(dir.directiveIndex)}.onAllChangesDone();`);
-      }
-    }
-
-    var directiveNotifications = notifications.join("\n");
-
-    return `
-      this.dispatcher.notifyOnAllChangesDone();
-      ${directiveNotifications}
-    `;
-  }
-
-  _genLocalDefinitions(): string { return this._localNames.map((n) => `var ${n};`).join("\n"); }
-
-  _genChangeDefinitions(): string {
-    return this._changeNames.map((n) => `var ${n} = false;`).join("\n");
-  }
-
-  _genRecord(r: ProtoRecord): string {
-    var rec;
-    if (r.isLifeCycleRecord()) {
-      rec = this._genDirectiveLifecycle(r);
-    } else if (r.isPipeRecord()) {
-      rec = this._genPipeCheck(r);
-    } else {
-      rec = this._genReferenceCheck(r);
-    }
-    return `${rec}${this._maybeGenLastInDirective(r)}`;
-  }
-
-  _genDirectiveLifecycle(r: ProtoRecord): string {
-    if (r.name === "onCheck") {
-      return this._genOnCheck(r);
-    } else if (r.name === "onInit") {
-      return this._genOnInit(r);
-    } else if (r.name === "onChange") {
-      return this._genOnChange(r);
-    } else {
-      throw new BaseException(`Unknown lifecycle event '${r.name}'`);
-    }
-  }
-
-  _genPipeCheck(r: ProtoRecord): string {
-    var context = this._localNames[r.contextIndex];
-    var argString = r.args.map((arg) => this._localNames[arg]).join(", ");
-
-    var oldValue = this._fieldNames[r.selfIndex];
-    var newValue = this._localNames[r.selfIndex];
-    var change = this._changeNames[r.selfIndex];
-
-    var pipe = this._pipeNames[r.selfIndex];
-    var cdRef = "this.ref";
-
-    var protoIndex = r.selfIndex - 1;
-    var pipeType = r.name;
-
-    return `
-      ${CURRENT_PROTO} = ${PROTOS_ACCESSOR}[${protoIndex}];
-      if (${pipe} === ${UTIL}.uninitialized()) {
-        ${pipe} = ${PIPE_REGISTRY_ACCESSOR}.get('${pipeType}', ${context}, ${cdRef});
-      } else if (!${pipe}.supports(${context})) {
-        ${pipe}.onDestroy();
-        ${pipe} = ${PIPE_REGISTRY_ACCESSOR}.get('${pipeType}', ${context}, ${cdRef});
-      }
-
-      ${newValue} = ${pipe}.transform(${context}, [${argString}]);
-      if (${oldValue} !== ${newValue}) {
-        ${newValue} = ${UTIL}.unwrapValue(${newValue});
-        ${change} = true;
-        ${this._genUpdateDirectiveOrElement(r)}
-        ${this._genAddToChanges(r)}
-        ${oldValue} = ${newValue};
-      }
-    `;
-  }
-
-  _genReferenceCheck(r: ProtoRecord): string {
-    var oldValue = this._fieldNames[r.selfIndex];
-    var newValue = this._localNames[r.selfIndex];
-
-    var protoIndex = r.selfIndex - 1;
-    var check = `
-      ${CURRENT_PROTO} = ${PROTOS_ACCESSOR}[${protoIndex}];
-      ${this._genUpdateCurrentValue(r)}
-      if (${newValue} !== ${oldValue}) {
-        ${this._changeNames[r.selfIndex]} = true;
-        ${this._genUpdateDirectiveOrElement(r)}
-        ${this._genAddToChanges(r)}
-        ${oldValue} = ${newValue};
-      }
-    `;
-
-    if (r.isPureFunction()) {
-      var condition = r.args.map((a) => this._changeNames[a]).join(" || ");
-      return `if (${condition}) { ${check} } else { ${newValue} = ${oldValue}; }`;
-    } else {
-      return check;
-    }
-  }
-
-  _genUpdateCurrentValue(r: ProtoRecord): string {
-    var context = (r.contextIndex == -1) ? this._genGetDirective(r.directiveIndex) :
-                                           this._localNames[r.contextIndex];
-    var newValue = this._localNames[r.selfIndex];
-    var argString = r.args.map((arg) => this._localNames[arg]).join(", ");
-
-    var rhs;
-    switch (r.mode) {
-      case RecordType.SELF:
-        rhs = context;
-        break;
-
-      case RecordType.CONST:
-        rhs = JSON.stringify(r.funcOrValue);
-        break;
-
-      case RecordType.PROPERTY:
-        rhs = `${context}.${r.name}`;
-        break;
-
-      case RecordType.SAFE_PROPERTY:
-        rhs = `${UTIL}.isValueBlank(${context}) ? null : ${context}.${r.name}`;
-        break;
-
-      case RecordType.LOCAL:
-        rhs = `${LOCALS_ACCESSOR}.get('${r.name}')`;
-        break;
-
-      case RecordType.INVOKE_METHOD:
-        rhs = `${context}.${r.name}(${argString})`;
-        break;
-
-      case RecordType.SAFE_INVOKE_METHOD:
-        rhs = `${UTIL}.isValueBlank(${context}) ? null : ${context}.${r.name}(${argString})`;
-        break;
-
-      case RecordType.INVOKE_CLOSURE:
-        rhs = `${context}(${argString})`;
-        break;
-
-      case RecordType.PRIMITIVE_OP:
-        rhs = `${UTIL}.${r.name}(${argString})`;
-        break;
-
-      case RecordType.INTERPOLATE:
-        rhs = this._genInterpolation(r);
-        break;
-
-      case RecordType.KEYED_ACCESS:
-        rhs = `${context}[${this._localNames[r.args[0]]}]`;
-        break;
-
-      default:
-        throw new BaseException(`Unknown operation ${r.mode}`);
-    }
-    return `${newValue} = ${rhs}`;
-  }
-
-  _genInterpolation(r: ProtoRecord): string {
-    var res = "";
-    for (var i = 0; i < r.args.length; ++i) {
-      res += JSON.stringify(r.fixedArgs[i]);
-      res += " + ";
-      res += this._localNames[r.args[i]];
-      res += " + ";
-    }
-    res += JSON.stringify(r.fixedArgs[r.args.length]);
-    return res;
-  }
-
-  _genUpdateDirectiveOrElement(r: ProtoRecord): string {
-    if (!r.lastInBinding) return "";
-
-    var newValue = this._localNames[r.selfIndex];
-    var oldValue = this._fieldNames[r.selfIndex];
-
-    var br = r.bindingRecord;
-    if (br.isDirective()) {
-      var directiveProperty =
-          `${this._genGetDirective(br.directiveRecord.directiveIndex)}.${br.propertyName}`;
-      return `
-        ${this._genThrowOnChangeCheck(oldValue, newValue)}
-        ${directiveProperty} = ${newValue};
-        ${IS_CHANGED_LOCAL} = true;
-      `;
-    } else {
-      return `
-        ${this._genThrowOnChangeCheck(oldValue, newValue)}
-        ${DISPATCHER_ACCESSOR}.notifyOnBinding(${CURRENT_PROTO}.bindingRecord, ${newValue});
-      `;
-    }
-  }
-
-  _genThrowOnChangeCheck(oldValue: string, newValue: string): string {
-    return `
-      if(throwOnChange) {
-        ${UTIL}.throwOnChange(${CURRENT_PROTO}, ${UTIL}.simpleChange(${oldValue}, ${newValue}));
-      }
-      `;
-  }
-
-  _genAddToChanges(r: ProtoRecord): string {
-    var newValue = this._localNames[r.selfIndex];
-    var oldValue = this._fieldNames[r.selfIndex];
-    if (!r.bindingRecord.callOnChange()) return "";
-    return `
-      ${CHANGES_LOCAL} = ${UTIL}.addChange(
-          ${CHANGES_LOCAL}, ${CURRENT_PROTO}.bindingRecord.propertyName,
-          ${UTIL}.simpleChange(${oldValue}, ${newValue}));
-    `;
-  }
-
-  _maybeGenLastInDirective(r: ProtoRecord): string {
-    if (!r.lastInDirective) return "";
-    return `
-      ${CHANGES_LOCAL} = null;
-      ${this._genNotifyOnPushDetectors(r)}
-      ${IS_CHANGED_LOCAL} = false;
-    `;
-  }
-
-  _genOnCheck(r: ProtoRecord): string {
-    var br = r.bindingRecord;
-    return `if (!throwOnChange) ${this._genGetDirective(br.directiveRecord.directiveIndex)}.onCheck();`;
-  }
-
-  _genOnInit(r: ProtoRecord): string {
-    var br = r.bindingRecord;
-    return `if (!throwOnChange && !${ALREADY_CHECKED_ACCESSOR}) ${this._genGetDirective(br.directiveRecord.directiveIndex)}.onInit();`;
-  }
-
-  _genOnChange(r: ProtoRecord): string {
-    var br = r.bindingRecord;
-    return `if (!throwOnChange && ${CHANGES_LOCAL}) ${this._genGetDirective(br.directiveRecord.directiveIndex)}.onChange(${CHANGES_LOCAL});`;
-  }
-
-  _genNotifyOnPushDetectors(r: ProtoRecord): string {
-    var br = r.bindingRecord;
-    if (!r.lastInDirective || !br.isOnPushChangeDetection()) return "";
-    var retVal = `
-      if(${IS_CHANGED_LOCAL}) {
-        ${this._genGetDetector(br.directiveRecord.directiveIndex)}.markAsCheckOnce();
-      }
-    `;
-    return retVal;
-  }
-}
-
-function _sanitizeName(s: string): string {
-  return s.replace(new RegExp("\\W", "g"), '');
-}
diff --git a/modules/angular2/src/change_detection/change_detection_util.ts b/modules/angular2/src/change_detection/change_detection_util.ts
deleted file mode 100644
index 1e252a8c1e4a..000000000000
--- a/modules/angular2/src/change_detection/change_detection_util.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import {isPresent, isBlank, BaseException, Type} from 'angular2/src/facade/lang';
-import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {ProtoRecord} from './proto_record';
-import {DehydratedException, ExpressionChangedAfterItHasBeenChecked} from './exceptions';
-import {WrappedValue} from './pipes/pipe';
-import {CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED, ON_PUSH} from './constants';
-
-export var uninitialized = new Object();
-
-export class SimpleChange {
-  constructor(public previousValue: any, public currentValue: any) {}
-}
-
-var _simpleChangesIndex = 0;
-var _simpleChanges = [
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null),
-  new SimpleChange(null, null)
-];
-
-function _simpleChange(previousValue, currentValue): SimpleChange {
-  var index = _simpleChangesIndex++ % 20;
-  var s = _simpleChanges[index];
-  s.previousValue = previousValue;
-  s.currentValue = currentValue;
-  return s;
-}
-
-export class ChangeDetectionUtil {
-  static uninitialized(): Object { return uninitialized; }
-
-  static arrayFn0(): any[] { return []; }
-  static arrayFn1(a1): any[] { return [a1]; }
-  static arrayFn2(a1, a2): any[] { return [a1, a2]; }
-  static arrayFn3(a1, a2, a3): any[] { return [a1, a2, a3]; }
-  static arrayFn4(a1, a2, a3, a4): any[] { return [a1, a2, a3, a4]; }
-  static arrayFn5(a1, a2, a3, a4, a5): any[] { return [a1, a2, a3, a4, a5]; }
-  static arrayFn6(a1, a2, a3, a4, a5, a6): any[] { return [a1, a2, a3, a4, a5, a6]; }
-  static arrayFn7(a1, a2, a3, a4, a5, a6, a7): any[] { return [a1, a2, a3, a4, a5, a6, a7]; }
-  static arrayFn8(a1, a2, a3, a4, a5, a6, a7, a8): any[] {
-    return [a1, a2, a3, a4, a5, a6, a7, a8];
-  }
-  static arrayFn9(a1, a2, a3, a4, a5, a6, a7, a8, a9): any[] {
-    return [a1, a2, a3, a4, a5, a6, a7, a8, a9];
-  }
-
-  static operation_negate(value): any { return !value; }
-  static operation_add(left, right): any { return left + right; }
-  static operation_subtract(left, right): any { return left - right; }
-  static operation_multiply(left, right): any { return left * right; }
-  static operation_divide(left, right): any { return left / right; }
-  static operation_remainder(left, right): any { return left % right; }
-  static operation_equals(left, right): any { return left == right; }
-  static operation_not_equals(left, right): any { return left != right; }
-  static operation_identical(left, right): any { return left === right; }
-  static operation_not_identical(left, right): any { return left !== right; }
-  static operation_less_then(left, right): any { return left < right; }
-  static operation_greater_then(left, right): any { return left > right; }
-  static operation_less_or_equals_then(left, right): any { return left <= right; }
-  static operation_greater_or_equals_then(left, right): any { return left >= right; }
-  static operation_logical_and(left, right): any { return left && right; }
-  static operation_logical_or(left, right): any { return left || right; }
-  static cond(cond, trueVal, falseVal): any { return cond ? trueVal : falseVal; }
-
-  static mapFn(keys: List<any>): any {
-    function buildMap(values): StringMap<any, any> {
-      var res = StringMapWrapper.create();
-      for (var i = 0; i < keys.length; ++i) {
-        StringMapWrapper.set(res, keys[i], values[i]);
-      }
-      return res;
-    }
-
-    switch (keys.length) {
-      case 0:
-        return () => [];
-      case 1:
-        return (a1) => buildMap([a1]);
-      case 2:
-        return (a1, a2) => buildMap([a1, a2]);
-      case 3:
-        return (a1, a2, a3) => buildMap([a1, a2, a3]);
-      case 4:
-        return (a1, a2, a3, a4) => buildMap([a1, a2, a3, a4]);
-      case 5:
-        return (a1, a2, a3, a4, a5) => buildMap([a1, a2, a3, a4, a5]);
-      case 6:
-        return (a1, a2, a3, a4, a5, a6) => buildMap([a1, a2, a3, a4, a5, a6]);
-      case 7:
-        return (a1, a2, a3, a4, a5, a6, a7) => buildMap([a1, a2, a3, a4, a5, a6, a7]);
-      case 8:
-        return (a1, a2, a3, a4, a5, a6, a7, a8) => buildMap([a1, a2, a3, a4, a5, a6, a7, a8]);
-      case 9:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9) =>
-                   buildMap([a1, a2, a3, a4, a5, a6, a7, a8, a9]);
-      default:
-        throw new BaseException(`Does not support literal maps with more than 9 elements`);
-    }
-  }
-
-  static keyedAccess(obj, args): any { return obj[args[0]]; }
-
-  static unwrapValue(value: any): any {
-    if (value instanceof WrappedValue) {
-      return value.wrapped;
-    } else {
-      return value;
-    }
-  }
-
-  static throwOnChange(proto: ProtoRecord, change) {
-    throw new ExpressionChangedAfterItHasBeenChecked(proto, change);
-  }
-
-  static throwDehydrated() { throw new DehydratedException(); }
-
-  static changeDetectionMode(strategy: string): string {
-    return strategy == ON_PUSH ? CHECK_ONCE : CHECK_ALWAYS;
-  }
-
-  static simpleChange(previousValue: any, currentValue: any): SimpleChange {
-    return _simpleChange(previousValue, currentValue);
-  }
-
-  static addChange(changes, propertyName: string, change): Map<any, any> {
-    if (isBlank(changes)) {
-      changes = {};
-    }
-    changes[propertyName] = change;
-    return changes;
-  }
-
-  static isValueBlank(value: any): boolean { return isBlank(value); }
-}
diff --git a/modules/angular2/src/change_detection/change_detector_ref.ts b/modules/angular2/src/change_detection/change_detector_ref.ts
deleted file mode 100644
index bd6262eb6522..000000000000
--- a/modules/angular2/src/change_detection/change_detector_ref.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import {ChangeDetector} from './interfaces';
-import {CHECK_ONCE, DETACHED, CHECK_ALWAYS} from './constants';
-
-/**
- * Controls change detection.
- *
- * {@link ChangeDetectorRef} allows requesting checks for detectors that rely on observables. It
- *also allows detaching and
- * attaching change detector subtrees.
- *
- * @exportedAs angular2/change_detection
- */
-export class ChangeDetectorRef {
-  constructor(private _cd: ChangeDetector) {}
-
-  /**
-   * Request to check all ON_PUSH ancestors.
-   */
-  requestCheck(): void { this._cd.markPathToRootAsCheckOnce(); }
-
-  /**
-   * Detaches the change detector from the change detector tree.
-   *
-   * The detached change detector will not be checked until it is reattached.
-   */
-  detach(): void { this._cd.mode = DETACHED; }
-
-  /**
-   * Reattach the change detector to the change detector tree.
-   *
-   * This also requests a check of this change detector. This reattached change detector will be
-   *checked during the
-   * next change detection run.
-   */
-  reattach(): void {
-    this._cd.mode = CHECK_ALWAYS;
-    this.requestCheck();
-  }
-}
diff --git a/modules/angular2/src/change_detection/coalesce.ts b/modules/angular2/src/change_detection/coalesce.ts
deleted file mode 100644
index 300fc3914fb4..000000000000
--- a/modules/angular2/src/change_detection/coalesce.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import {isPresent} from 'angular2/src/facade/lang';
-import {List, ListWrapper, Map} from 'angular2/src/facade/collection';
-import {RecordType, ProtoRecord} from './proto_record';
-
-/**
- * Removes "duplicate" records. It assuming that record evaluation does not
- * have side-effects.
- *
- * Records that are not last in bindings are removed and all the indices
- * of the records that depend on them are updated.
- *
- * Records that are last in bindings CANNOT be removed, and instead are
- * replaced with very cheap SELF records.
- */
-export function coalesce(records: List<ProtoRecord>): List<ProtoRecord> {
-  var res: List<ProtoRecord> = [];
-  var indexMap: Map<number, number> = new Map<number, number>();
-
-  for (var i = 0; i < records.length; ++i) {
-    var r = records[i];
-    var record = _replaceIndices(r, res.length + 1, indexMap);
-    var matchingRecord = _findMatching(record, res);
-
-    if (isPresent(matchingRecord) && record.lastInBinding) {
-      res.push(_selfRecord(record, matchingRecord.selfIndex, res.length + 1));
-      indexMap.set(r.selfIndex, matchingRecord.selfIndex);
-
-    } else if (isPresent(matchingRecord) && !record.lastInBinding) {
-      indexMap.set(r.selfIndex, matchingRecord.selfIndex);
-
-    } else {
-      res.push(record);
-      indexMap.set(r.selfIndex, record.selfIndex);
-    }
-  }
-
-  return res;
-}
-
-function _selfRecord(r: ProtoRecord, contextIndex: number, selfIndex: number): ProtoRecord {
-  return new ProtoRecord(RecordType.SELF, "self", null, [], r.fixedArgs, contextIndex,
-                         r.directiveIndex, selfIndex, r.bindingRecord, r.expressionAsString,
-                         r.lastInBinding, r.lastInDirective);
-}
-
-function _findMatching(r: ProtoRecord, rs: List<ProtoRecord>) {
-  return ListWrapper.find(rs, (rr) => rr.mode !== RecordType.DIRECTIVE_LIFECYCLE &&
-                                      rr.mode === r.mode && rr.funcOrValue === r.funcOrValue &&
-                                      rr.contextIndex === r.contextIndex && rr.name === r.name &&
-                                      ListWrapper.equals(rr.args, r.args));
-}
-
-function _replaceIndices(r: ProtoRecord, selfIndex: number, indexMap: Map<any, any>) {
-  var args = ListWrapper.map(r.args, (a) => _map(indexMap, a));
-  var contextIndex = _map(indexMap, r.contextIndex);
-  return new ProtoRecord(r.mode, r.name, r.funcOrValue, args, r.fixedArgs, contextIndex,
-                         r.directiveIndex, selfIndex, r.bindingRecord, r.expressionAsString,
-                         r.lastInBinding, r.lastInDirective);
-}
-
-function _map(indexMap: Map<any, any>, value: number) {
-  var r = indexMap.get(value);
-  return isPresent(r) ? r : value;
-}
diff --git a/modules/angular2/src/change_detection/constants.ts b/modules/angular2/src/change_detection/constants.ts
deleted file mode 100644
index 7ecea3295b21..000000000000
--- a/modules/angular2/src/change_detection/constants.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// TODO:vsavkin Use enums after switching to TypeScript
-
-/**
- * CHECK_ONCE means that after calling detectChanges the mode of the change detector
- * will become CHECKED.
- */
-export const CHECK_ONCE = "CHECK_ONCE";
-
-/**
- * CHECKED means that the change detector should be skipped until its mode changes to
- * CHECK_ONCE or CHECK_ALWAYS.
- */
-export const CHECKED = "CHECKED";
-
-/**
- * CHECK_ALWAYS means that after calling detectChanges the mode of the change detector
- * will remain CHECK_ALWAYS.
- */
-export const CHECK_ALWAYS = "ALWAYS_CHECK";
-
-/**
- * DETACHED means that the change detector sub tree is not a part of the main tree and
- * should be skipped.
- */
-export const DETACHED = "DETACHED";
-
-/**
- * ON_PUSH means that the change detector's mode will be set to CHECK_ONCE during hydration.
- */
-export const ON_PUSH = "ON_PUSH";
-
-/**
- * DEFAULT means that the change detector's mode will be set to CHECK_ALWAYS during hydration.
- */
-export const DEFAULT = "DEFAULT";
\ No newline at end of file
diff --git a/modules/angular2/src/change_detection/directive_record.ts b/modules/angular2/src/change_detection/directive_record.ts
deleted file mode 100644
index edfadd266807..000000000000
--- a/modules/angular2/src/change_detection/directive_record.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import {ON_PUSH} from './constants';
-import {StringWrapper, normalizeBool} from 'angular2/src/facade/lang';
-
-export class DirectiveIndex {
-  constructor(public elementIndex: number, public directiveIndex: number) {}
-
-  get name() { return `${this.elementIndex}_${this.directiveIndex}`; }
-}
-
-export class DirectiveRecord {
-  directiveIndex: DirectiveIndex;
-  callOnAllChangesDone: boolean;
-  callOnChange: boolean;
-  callOnCheck: boolean;
-  callOnInit: boolean;
-  changeDetection: string;
-
-  constructor({directiveIndex, callOnAllChangesDone, callOnChange, callOnCheck, callOnInit,
-               changeDetection}: {
-    directiveIndex?: DirectiveIndex,
-    callOnAllChangesDone?: boolean,
-    callOnChange?: boolean,
-    callOnCheck?: boolean,
-    callOnInit?: boolean,
-    changeDetection?: string
-  } = {}) {
-    this.directiveIndex = directiveIndex;
-    this.callOnAllChangesDone = normalizeBool(callOnAllChangesDone);
-    this.callOnChange = normalizeBool(callOnChange);
-    this.callOnCheck = normalizeBool(callOnCheck);
-    this.callOnInit = normalizeBool(callOnInit);
-    this.changeDetection = changeDetection;
-  }
-
-  isOnPushChangeDetection(): boolean { return StringWrapper.equals(this.changeDetection, ON_PUSH); }
-}
\ No newline at end of file
diff --git a/modules/angular2/src/change_detection/dynamic_change_detector.ts b/modules/angular2/src/change_detection/dynamic_change_detector.ts
deleted file mode 100644
index 70918213aaf7..000000000000
--- a/modules/angular2/src/change_detection/dynamic_change_detector.ts
+++ /dev/null
@@ -1,327 +0,0 @@
-import {isPresent, isBlank, BaseException, FunctionWrapper} from 'angular2/src/facade/lang';
-import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {Locals} from 'angular2/src/change_detection/parser/locals';
-
-import {AbstractChangeDetector} from './abstract_change_detector';
-import {BindingRecord} from './binding_record';
-import {PipeRegistry} from './pipes/pipe_registry';
-import {ChangeDetectionUtil, SimpleChange, uninitialized} from './change_detection_util';
-
-
-import {ProtoRecord, RecordType} from './proto_record';
-
-import {ExpressionChangedAfterItHasBeenChecked, ChangeDetectionError} from './exceptions';
-
-export class DynamicChangeDetector extends AbstractChangeDetector {
-  locals: Locals = null;
-  values: List<any>;
-  changes: List<any>;
-  pipes: List<any>;
-  prevContexts: List<any>;
-  directives: any = null;
-  alreadyChecked: boolean = false;
-
-  constructor(id: string, private changeControlStrategy: string, private dispatcher: any,
-              private pipeRegistry: PipeRegistry, private protos: List<ProtoRecord>,
-              private directiveRecords: List<any>) {
-    super(id);
-    this.values = ListWrapper.createFixedSize(protos.length + 1);
-    this.pipes = ListWrapper.createFixedSize(protos.length + 1);
-    this.prevContexts = ListWrapper.createFixedSize(protos.length + 1);
-    this.changes = ListWrapper.createFixedSize(protos.length + 1);
-
-    this.values[0] = null;
-    ListWrapper.fill(this.values, uninitialized, 1);
-    ListWrapper.fill(this.pipes, null);
-    ListWrapper.fill(this.prevContexts, uninitialized);
-    ListWrapper.fill(this.changes, false);
-  }
-
-  hydrate(context: any, locals: Locals, directives: any) {
-    this.mode = ChangeDetectionUtil.changeDetectionMode(this.changeControlStrategy);
-    this.values[0] = context;
-    this.locals = locals;
-    this.directives = directives;
-    this.alreadyChecked = false;
-  }
-
-  dehydrate() {
-    this._destroyPipes();
-    this.values[0] = null;
-    ListWrapper.fill(this.values, uninitialized, 1);
-    ListWrapper.fill(this.changes, false);
-    ListWrapper.fill(this.pipes, null);
-    ListWrapper.fill(this.prevContexts, uninitialized);
-    this.locals = null;
-  }
-
-  _destroyPipes() {
-    for (var i = 0; i < this.pipes.length; ++i) {
-      if (isPresent(this.pipes[i])) {
-        this.pipes[i].onDestroy();
-      }
-    }
-  }
-
-  hydrated(): boolean { return this.values[0] !== null; }
-
-  detectChangesInRecords(throwOnChange: boolean) {
-    if (!this.hydrated()) {
-      ChangeDetectionUtil.throwDehydrated();
-    }
-    var protos: List<ProtoRecord> = this.protos;
-
-    var changes = null;
-    var isChanged = false;
-    for (var i = 0; i < protos.length; ++i) {
-      var proto: ProtoRecord = protos[i];
-      var bindingRecord = proto.bindingRecord;
-      var directiveRecord = bindingRecord.directiveRecord;
-
-      if (proto.isLifeCycleRecord()) {
-        if (proto.name === "onCheck" && !throwOnChange) {
-          this._getDirectiveFor(directiveRecord.directiveIndex).onCheck();
-        } else if (proto.name === "onInit" && !throwOnChange && !this.alreadyChecked) {
-          this._getDirectiveFor(directiveRecord.directiveIndex).onInit();
-        } else if (proto.name === "onChange" && isPresent(changes) && !throwOnChange) {
-          this._getDirectiveFor(directiveRecord.directiveIndex).onChange(changes);
-        }
-
-      } else {
-        var change = this._check(proto, throwOnChange);
-        if (isPresent(change)) {
-          this._updateDirectiveOrElement(change, bindingRecord);
-          isChanged = true;
-          changes = this._addChange(bindingRecord, change, changes);
-        }
-      }
-
-      if (proto.lastInDirective) {
-        changes = null;
-        if (isChanged && bindingRecord.isOnPushChangeDetection()) {
-          this._getDetectorFor(directiveRecord.directiveIndex).markAsCheckOnce();
-        }
-
-        isChanged = false;
-      }
-    }
-
-    this.alreadyChecked = true;
-  }
-
-  callOnAllChangesDone() {
-    this.dispatcher.notifyOnAllChangesDone();
-    var dirs = this.directiveRecords;
-    for (var i = dirs.length - 1; i >= 0; --i) {
-      var dir = dirs[i];
-      if (dir.callOnAllChangesDone) {
-        this._getDirectiveFor(dir.directiveIndex).onAllChangesDone();
-      }
-    }
-  }
-
-  _updateDirectiveOrElement(change, bindingRecord) {
-    if (isBlank(bindingRecord.directiveRecord)) {
-      this.dispatcher.notifyOnBinding(bindingRecord, change.currentValue);
-    } else {
-      var directiveIndex = bindingRecord.directiveRecord.directiveIndex;
-      bindingRecord.setter(this._getDirectiveFor(directiveIndex), change.currentValue);
-    }
-  }
-
-  _addChange(bindingRecord: BindingRecord, change, changes) {
-    if (bindingRecord.callOnChange()) {
-      return ChangeDetectionUtil.addChange(changes, bindingRecord.propertyName, change);
-    } else {
-      return changes;
-    }
-  }
-
-  _getDirectiveFor(directiveIndex) { return this.directives.getDirectiveFor(directiveIndex); }
-
-  _getDetectorFor(directiveIndex) { return this.directives.getDetectorFor(directiveIndex); }
-
-  _check(proto: ProtoRecord, throwOnChange: boolean): SimpleChange {
-    try {
-      if (proto.isPipeRecord()) {
-        return this._pipeCheck(proto, throwOnChange);
-      } else {
-        return this._referenceCheck(proto, throwOnChange);
-      }
-    } catch (e) {
-      throw new ChangeDetectionError(proto, e);
-    }
-  }
-
-  _referenceCheck(proto: ProtoRecord, throwOnChange: boolean) {
-    if (this._pureFuncAndArgsDidNotChange(proto)) {
-      this._setChanged(proto, false);
-      return null;
-    }
-
-    var prevValue = this._readSelf(proto);
-    var currValue = this._calculateCurrValue(proto);
-
-    if (!isSame(prevValue, currValue)) {
-      if (proto.lastInBinding) {
-        var change = ChangeDetectionUtil.simpleChange(prevValue, currValue);
-        if (throwOnChange) ChangeDetectionUtil.throwOnChange(proto, change);
-
-        this._writeSelf(proto, currValue);
-        this._setChanged(proto, true);
-
-        return change;
-
-      } else {
-        this._writeSelf(proto, currValue);
-        this._setChanged(proto, true);
-        return null;
-      }
-    } else {
-      this._setChanged(proto, false);
-      return null;
-    }
-  }
-
-  _calculateCurrValue(proto: ProtoRecord) {
-    switch (proto.mode) {
-      case RecordType.SELF:
-        return this._readContext(proto);
-
-      case RecordType.CONST:
-        return proto.funcOrValue;
-
-      case RecordType.PROPERTY:
-        var context = this._readContext(proto);
-        return proto.funcOrValue(context);
-
-      case RecordType.SAFE_PROPERTY:
-        var context = this._readContext(proto);
-        return isBlank(context) ? null : proto.funcOrValue(context);
-
-      case RecordType.LOCAL:
-        return this.locals.get(proto.name);
-
-      case RecordType.INVOKE_METHOD:
-        var context = this._readContext(proto);
-        var args = this._readArgs(proto);
-        return proto.funcOrValue(context, args);
-
-      case RecordType.SAFE_INVOKE_METHOD:
-        var context = this._readContext(proto);
-        if (isBlank(context)) {
-          return null;
-        }
-        var args = this._readArgs(proto);
-        return proto.funcOrValue(context, args);
-
-      case RecordType.KEYED_ACCESS:
-        var arg = this._readArgs(proto)[0];
-        return this._readContext(proto)[arg];
-
-      case RecordType.INVOKE_CLOSURE:
-        return FunctionWrapper.apply(this._readContext(proto), this._readArgs(proto));
-
-      case RecordType.INTERPOLATE:
-      case RecordType.PRIMITIVE_OP:
-        return FunctionWrapper.apply(proto.funcOrValue, this._readArgs(proto));
-
-      default:
-        throw new BaseException(`Unknown operation ${proto.mode}`);
-    }
-  }
-
-  _pipeCheck(proto: ProtoRecord, throwOnChange: boolean) {
-    var context = this._readContext(proto);
-    var args = this._readArgs(proto);
-
-    var pipe = this._pipeFor(proto, context);
-    var prevValue = this._readSelf(proto);
-    var currValue = pipe.transform(context, args);
-
-    if (!isSame(prevValue, currValue)) {
-      currValue = ChangeDetectionUtil.unwrapValue(currValue);
-
-      if (proto.lastInBinding) {
-        var change = ChangeDetectionUtil.simpleChange(prevValue, currValue);
-        if (throwOnChange) ChangeDetectionUtil.throwOnChange(proto, change);
-
-        this._writeSelf(proto, currValue);
-        this._setChanged(proto, true);
-
-        return change;
-
-      } else {
-        this._writeSelf(proto, currValue);
-        this._setChanged(proto, true);
-        return null;
-      }
-    } else {
-      this._setChanged(proto, false);
-      return null;
-    }
-  }
-
-  _pipeFor(proto: ProtoRecord, context) {
-    var storedPipe = this._readPipe(proto);
-    if (isPresent(storedPipe) && storedPipe.supports(context)) {
-      return storedPipe;
-    }
-    if (isPresent(storedPipe)) {
-      storedPipe.onDestroy();
-    }
-    var pipe = this.pipeRegistry.get(proto.name, context, this.ref);
-    this._writePipe(proto, pipe);
-    return pipe;
-  }
-
-  _readContext(proto: ProtoRecord) {
-    if (proto.contextIndex == -1) {
-      return this._getDirectiveFor(proto.directiveIndex);
-    } else {
-      return this.values[proto.contextIndex];
-    }
-
-    return this.values[proto.contextIndex];
-  }
-
-  _readSelf(proto: ProtoRecord) { return this.values[proto.selfIndex]; }
-
-  _writeSelf(proto: ProtoRecord, value) { this.values[proto.selfIndex] = value; }
-
-  _readPipe(proto: ProtoRecord) { return this.pipes[proto.selfIndex]; }
-
-  _writePipe(proto: ProtoRecord, value) { this.pipes[proto.selfIndex] = value; }
-
-  _setChanged(proto: ProtoRecord, value: boolean) { this.changes[proto.selfIndex] = value; }
-
-  _pureFuncAndArgsDidNotChange(proto: ProtoRecord): boolean {
-    return proto.isPureFunction() && !this._argsChanged(proto);
-  }
-
-  _argsChanged(proto: ProtoRecord): boolean {
-    var args = proto.args;
-    for (var i = 0; i < args.length; ++i) {
-      if (this.changes[args[i]]) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  _readArgs(proto: ProtoRecord) {
-    var res = ListWrapper.createFixedSize(proto.args.length);
-    var args = proto.args;
-    for (var i = 0; i < args.length; ++i) {
-      res[i] = this.values[args[i]];
-    }
-    return res;
-  }
-}
-
-function isSame(a, b): boolean {
-  if (a === b) return true;
-  if (a instanceof String && b instanceof String && a == b) return true;
-  if ((a !== a) && (b !== b)) return true;
-  return false;
-}
diff --git a/modules/angular2/src/change_detection/exceptions.ts b/modules/angular2/src/change_detection/exceptions.ts
deleted file mode 100644
index 38aa43202fa5..000000000000
--- a/modules/angular2/src/change_detection/exceptions.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {ProtoRecord} from './proto_record';
-import {BaseException} from "angular2/src/facade/lang";
-
-export class ExpressionChangedAfterItHasBeenChecked extends BaseException {
-  message: string;
-
-  constructor(proto: ProtoRecord, change: any) {
-    super();
-    this.message =
-        `Expression '${proto.expressionAsString}' has changed after it was checked. ` +
-        `Previous value: '${change.previousValue}'. Current value: '${change.currentValue}'`;
-  }
-
-  toString(): string { return this.message; }
-}
-
-export class ChangeDetectionError extends BaseException {
-  message: string;
-  location: string;
-
-  constructor(proto: ProtoRecord, public originalException: any) {
-    super();
-    this.location = proto.expressionAsString;
-    this.message = `${this.originalException} in [${this.location}]`;
-  }
-
-  toString(): string { return this.message; }
-}
-
-export class DehydratedException extends BaseException {
-  constructor() { super('Attempt to detect changes on a dehydrated detector.'); }
-}
diff --git a/modules/angular2/src/change_detection/interfaces.ts b/modules/angular2/src/change_detection/interfaces.ts
deleted file mode 100644
index d25a4880d519..000000000000
--- a/modules/angular2/src/change_detection/interfaces.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import {List} from 'angular2/src/facade/collection';
-import {CONST} from 'angular2/src/facade/lang';
-import {Locals} from './parser/locals';
-import {BindingRecord} from './binding_record';
-import {DirectiveRecord} from './directive_record';
-
-/**
- * Interface used by Angular to control the change detection strategy for an application.
- *
- * Angular implements the following change detection strategies by default:
- *
- * - {@link DynamicChangeDetection}: slower, but does not require `eval()`.
- * - {@link JitChangeDetection}: faster, but requires `eval()`.
- *
- * In JavaScript, you should always use `JitChangeDetection`, unless you are in an environment that
- *has
- * [CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP), such as a Chrome Extension.
- *
- * In Dart, use `DynamicChangeDetection` during development. The Angular transformer generates an
- *analog to the
- * `JitChangeDetection` strategy at compile time.
- *
- *
- * See: {@link DynamicChangeDetection}, {@link JitChangeDetection},
- * {@link PreGeneratedChangeDetection}
- *
- * # Example
- * ```javascript
- * bootstrap(MyApp, [bind(ChangeDetection).toClass(DynamicChangeDetection)]);
- * ```
- * @exportedAs angular2/change_detection
- */
-@CONST()
-export class ChangeDetection {
-  createProtoChangeDetector(definition: ChangeDetectorDefinition): ProtoChangeDetector {
-    return null;
-  }
-}
-
-export interface ChangeDispatcher {
-  notifyOnBinding(bindingRecord: BindingRecord, value: any): void;
-  notifyOnAllChangesDone(): void;
-}
-
-export interface ChangeDetector {
-  parent: ChangeDetector;
-  mode: string;
-
-  addChild(cd: ChangeDetector): void;
-  addShadowDomChild(cd: ChangeDetector): void;
-  removeChild(cd: ChangeDetector): void;
-  removeShadowDomChild(cd: ChangeDetector): void;
-  remove(): void;
-  hydrate(context: any, locals: Locals, directives: any): void;
-  dehydrate(): void;
-  markPathToRootAsCheckOnce(): void;
-
-  detectChanges(): void;
-  checkNoChanges(): void;
-}
-
-export interface ProtoChangeDetector { instantiate(dispatcher: any): ChangeDetector; }
-
-export class ChangeDetectorDefinition {
-  constructor(public id: string, public strategy: string, public variableNames: List<string>,
-              public bindingRecords: List<BindingRecord>,
-              public directiveRecords: List<DirectiveRecord>) {}
-}
diff --git a/modules/angular2/src/change_detection/jit_proto_change_detector.dart b/modules/angular2/src/change_detection/jit_proto_change_detector.dart
deleted file mode 100644
index ccbd30eaebf0..000000000000
--- a/modules/angular2/src/change_detection/jit_proto_change_detector.dart
+++ /dev/null
@@ -1,13 +0,0 @@
-library change_detection.jit_proto_change_detector;
-
-import 'interfaces.dart' show ChangeDetector, ProtoChangeDetector;
-
-class JitProtoChangeDetector implements ProtoChangeDetector {
-  JitProtoChangeDetector(registry, definition) : super();
-
-  static bool isSupported() => false;
-
-  ChangeDetector instantiate(dispatcher) {
-    throw "Jit Change Detection not supported in Dart";
-  }
-}
diff --git a/modules/angular2/src/change_detection/jit_proto_change_detector.ts b/modules/angular2/src/change_detection/jit_proto_change_detector.ts
deleted file mode 100644
index 4672e531391d..000000000000
--- a/modules/angular2/src/change_detection/jit_proto_change_detector.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {ProtoChangeDetector, ChangeDetector, ChangeDetectorDefinition} from './interfaces';
-import {ChangeDetectorJITGenerator} from './change_detection_jit_generator';
-
-import {coalesce} from './coalesce';
-import {ProtoRecordBuilder} from './proto_change_detector';
-
-export class JitProtoChangeDetector implements ProtoChangeDetector {
-  _factory: Function;
-
-  constructor(private _pipeRegistry, private definition: ChangeDetectorDefinition) {
-    this._factory = this._createFactory(definition);
-  }
-
-  static isSupported(): boolean { return true; }
-
-  instantiate(dispatcher: any): ChangeDetector {
-    return this._factory(dispatcher, this._pipeRegistry);
-  }
-
-  _createFactory(definition: ChangeDetectorDefinition) {
-    var recordBuilder = new ProtoRecordBuilder();
-    ListWrapper.forEach(definition.bindingRecords,
-                        (b) => { recordBuilder.add(b, definition.variableNames); });
-    var records = coalesce(recordBuilder.records);
-    return new ChangeDetectorJITGenerator(definition.id, definition.strategy, records,
-                                          this.definition.directiveRecords)
-        .generate();
-  }
-}
diff --git a/modules/angular2/src/change_detection/parser/ast.ts b/modules/angular2/src/change_detection/parser/ast.ts
deleted file mode 100644
index 0f02849367d7..000000000000
--- a/modules/angular2/src/change_detection/parser/ast.ts
+++ /dev/null
@@ -1,455 +0,0 @@
-import {isBlank, isPresent, FunctionWrapper, BaseException} from "angular2/src/facade/lang";
-import {List, Map, ListWrapper, StringMapWrapper} from "angular2/src/facade/collection";
-import {Locals} from "./locals";
-
-export class AST {
-  eval(context, locals: Locals) { throw new BaseException("Not supported"); }
-
-  get isAssignable(): boolean { return false; }
-
-  assign(context, locals: Locals, value) { throw new BaseException("Not supported"); }
-
-  visit(visitor: AstVisitor): any { return null; }
-
-  toString(): string { return "AST"; }
-}
-
-export class EmptyExpr extends AST {
-  eval(context, locals: Locals): any { return null; }
-
-  visit(visitor: AstVisitor) {
-    // do nothing
-  }
-}
-
-export class ImplicitReceiver extends AST {
-  eval(context, locals: Locals): any { return context; }
-
-  visit(visitor: AstVisitor): any { return visitor.visitImplicitReceiver(this); }
-}
-
-/**
- * Multiple expressions separated by a semicolon.
- */
-export class Chain extends AST {
-  constructor(public expressions: List<any>) { super(); }
-
-  eval(context, locals: Locals): any {
-    var result;
-    for (var i = 0; i < this.expressions.length; i++) {
-      var last = this.expressions[i].eval(context, locals);
-      if (isPresent(last)) result = last;
-    }
-    return result;
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitChain(this); }
-}
-
-export class Conditional extends AST {
-  constructor(public condition: AST, public trueExp: AST, public falseExp: AST) { super(); }
-
-  eval(context, locals: Locals): any {
-    if (this.condition.eval(context, locals)) {
-      return this.trueExp.eval(context, locals);
-    } else {
-      return this.falseExp.eval(context, locals);
-    }
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitConditional(this); }
-}
-
-export class If extends AST {
-  constructor(public condition: AST, public trueExp: AST, public falseExp?: AST) { super(); }
-
-  eval(context, locals) {
-    if (this.condition.eval(context, locals)) {
-      this.trueExp.eval(context, locals);
-    } else if (isPresent(this.falseExp)) {
-      this.falseExp.eval(context, locals);
-    }
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitIf(this); }
-}
-
-export class AccessMember extends AST {
-  constructor(public receiver: AST, public name: string, public getter: Function,
-              public setter: Function) {
-    super();
-  }
-
-  eval(context, locals: Locals): any {
-    if (this.receiver instanceof ImplicitReceiver && isPresent(locals) &&
-                                     locals.contains(this.name)) {
-      return locals.get(this.name);
-    } else {
-      var evaluatedReceiver = this.receiver.eval(context, locals);
-      return this.getter(evaluatedReceiver);
-    }
-  }
-
-  get isAssignable(): boolean { return true; }
-
-  assign(context, locals: Locals, value): any {
-    var evaluatedContext = this.receiver.eval(context, locals);
-
-    if (this.receiver instanceof ImplicitReceiver && isPresent(locals) &&
-                                     locals.contains(this.name)) {
-      throw new BaseException(`Cannot reassign a variable binding ${this.name}`);
-    } else {
-      return this.setter(evaluatedContext, value);
-    }
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitAccessMember(this); }
-}
-
-export class SafeAccessMember extends AST {
-  constructor(public receiver: AST, public name: string, public getter: Function,
-              public setter: Function) {
-    super();
-  }
-
-  eval(context, locals: Locals): any {
-    var evaluatedReceiver = this.receiver.eval(context, locals);
-    return isBlank(evaluatedReceiver) ? null : this.getter(evaluatedReceiver);
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitSafeAccessMember(this); }
-}
-
-export class KeyedAccess extends AST {
-  constructor(public obj: AST, public key: AST) { super(); }
-
-  eval(context, locals: Locals): any {
-    var obj: any = this.obj.eval(context, locals);
-    var key: any = this.key.eval(context, locals);
-    return obj[key];
-  }
-
-  get isAssignable(): boolean { return true; }
-
-  assign(context, locals: Locals, value): any {
-    var obj: any = this.obj.eval(context, locals);
-    var key: any = this.key.eval(context, locals);
-    obj[key] = value;
-    return value;
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitKeyedAccess(this); }
-}
-
-export class BindingPipe extends AST {
-  constructor(public exp: AST, public name: string, public args: List<any>) { super(); }
-
-  visit(visitor: AstVisitor): any { return visitor.visitPipe(this); }
-}
-
-export class LiteralPrimitive extends AST {
-  constructor(public value) { super(); }
-
-  eval(context, locals: Locals): any { return this.value; }
-
-  visit(visitor: AstVisitor): any { return visitor.visitLiteralPrimitive(this); }
-}
-
-export class LiteralArray extends AST {
-  constructor(public expressions: List<any>) { super(); }
-
-  eval(context, locals: Locals): any {
-    return ListWrapper.map(this.expressions, (e) => e.eval(context, locals));
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitLiteralArray(this); }
-}
-
-export class LiteralMap extends AST {
-  constructor(public keys: List<any>, public values: List<any>) { super(); }
-
-  eval(context, locals: Locals): any {
-    var res = StringMapWrapper.create();
-    for (var i = 0; i < this.keys.length; ++i) {
-      StringMapWrapper.set(res, this.keys[i], this.values[i].eval(context, locals));
-    }
-    return res;
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitLiteralMap(this); }
-}
-
-export class Interpolation extends AST {
-  constructor(public strings: List<any>, public expressions: List<any>) { super(); }
-
-  eval(context, locals): any {
-    throw new BaseException("evaluating an Interpolation is not supported");
-  }
-
-  visit(visitor: AstVisitor) { visitor.visitInterpolation(this); }
-}
-
-export class Binary extends AST {
-  constructor(public operation: string, public left: AST, public right: AST) { super(); }
-
-  eval(context, locals: Locals): any {
-    var left: any = this.left.eval(context, locals);
-    switch (this.operation) {
-      case '&&':
-        return left && this.right.eval(context, locals);
-      case '||':
-        return left || this.right.eval(context, locals);
-    }
-    var right: any = this.right.eval(context, locals);
-
-    switch (this.operation) {
-      case '+':
-        return left + right;
-      case '-':
-        return left - right;
-      case '*':
-        return left * right;
-      case '/':
-        return left / right;
-      case '%':
-        return left % right;
-      case '==':
-        return left == right;
-      case '!=':
-        return left != right;
-      case '===':
-        return left === right;
-      case '!==':
-        return left !== right;
-      case '<':
-        return left < right;
-      case '>':
-        return left > right;
-      case '<=':
-        return left <= right;
-      case '>=':
-        return left >= right;
-      case '^':
-        return left ^ right;
-      case '&':
-        return left & right;
-    }
-    throw 'Internal error [$operation] not handled';
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitBinary(this); }
-}
-
-export class PrefixNot extends AST {
-  constructor(public expression: AST) { super(); }
-
-  eval(context, locals: Locals): any { return !this.expression.eval(context, locals); }
-
-  visit(visitor: AstVisitor): any { return visitor.visitPrefixNot(this); }
-}
-
-export class Assignment extends AST {
-  constructor(public target: AST, public value: AST) { super(); }
-
-  eval(context, locals: Locals): any {
-    return this.target.assign(context, locals, this.value.eval(context, locals));
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitAssignment(this); }
-}
-
-export class MethodCall extends AST {
-  constructor(public receiver: AST, public name: string, public fn: Function,
-              public args: List<any>) {
-    super();
-  }
-
-  eval(context, locals: Locals): any {
-    var evaluatedArgs = evalList(context, locals, this.args);
-    if (this.receiver instanceof ImplicitReceiver && isPresent(locals) &&
-                                     locals.contains(this.name)) {
-      var fn = locals.get(this.name);
-      return FunctionWrapper.apply(fn, evaluatedArgs);
-    } else {
-      var evaluatedReceiver = this.receiver.eval(context, locals);
-      return this.fn(evaluatedReceiver, evaluatedArgs);
-    }
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitMethodCall(this); }
-}
-
-export class SafeMethodCall extends AST {
-  constructor(public receiver: AST, public name: string, public fn: Function,
-              public args: List<any>) {
-    super();
-  }
-
-  eval(context, locals: Locals): any {
-    var evaluatedReceiver = this.receiver.eval(context, locals);
-    if (isBlank(evaluatedReceiver)) return null;
-    var evaluatedArgs = evalList(context, locals, this.args);
-    return this.fn(evaluatedReceiver, evaluatedArgs);
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitSafeMethodCall(this); }
-}
-
-export class FunctionCall extends AST {
-  constructor(public target: AST, public args: List<any>) { super(); }
-
-  eval(context, locals: Locals): any {
-    var obj: any = this.target.eval(context, locals);
-    if (!(obj instanceof Function)) {
-      throw new BaseException(`${obj} is not a function`);
-    }
-    return FunctionWrapper.apply(obj, evalList(context, locals, this.args));
-  }
-
-  visit(visitor: AstVisitor): any { return visitor.visitFunctionCall(this); }
-}
-
-export class ASTWithSource extends AST {
-  constructor(public ast: AST, public source: string, public location: string) { super(); }
-
-  eval(context, locals: Locals): any { return this.ast.eval(context, locals); }
-
-  get isAssignable(): boolean { return this.ast.isAssignable; }
-
-  assign(context, locals: Locals, value): any { return this.ast.assign(context, locals, value); }
-
-  visit(visitor: AstVisitor): any { return this.ast.visit(visitor); }
-
-  toString(): string { return `${this.source} in ${this.location}`; }
-}
-
-export class TemplateBinding {
-  constructor(public key: string, public keyIsVar: boolean, public name: string,
-              public expression: ASTWithSource) {}
-}
-
-export interface AstVisitor {
-  visitAccessMember(ast: AccessMember): any;
-  visitAssignment(ast: Assignment): any;
-  visitBinary(ast: Binary): any;
-  visitChain(ast: Chain): any;
-  visitConditional(ast: Conditional): any;
-  visitIf(ast: If): any;
-  visitPipe(ast: BindingPipe): any;
-  visitFunctionCall(ast: FunctionCall): any;
-  visitImplicitReceiver(ast: ImplicitReceiver): any;
-  visitInterpolation(ast: Interpolation): any;
-  visitKeyedAccess(ast: KeyedAccess): any;
-  visitLiteralArray(ast: LiteralArray): any;
-  visitLiteralMap(ast: LiteralMap): any;
-  visitLiteralPrimitive(ast: LiteralPrimitive): any;
-  visitMethodCall(ast: MethodCall): any;
-  visitPrefixNot(ast: PrefixNot): any;
-  visitSafeAccessMember(ast: SafeAccessMember): any;
-  visitSafeMethodCall(ast: SafeMethodCall): any;
-}
-
-export class AstTransformer implements AstVisitor {
-  visitImplicitReceiver(ast: ImplicitReceiver): ImplicitReceiver { return ast; }
-
-  visitInterpolation(ast: Interpolation): Interpolation {
-    return new Interpolation(ast.strings, this.visitAll(ast.expressions));
-  }
-
-  visitLiteralPrimitive(ast: LiteralPrimitive): LiteralPrimitive {
-    return new LiteralPrimitive(ast.value);
-  }
-
-  visitAccessMember(ast: AccessMember): AccessMember {
-    return new AccessMember(ast.receiver.visit(this), ast.name, ast.getter, ast.setter);
-  }
-
-  visitSafeAccessMember(ast: SafeAccessMember): SafeAccessMember {
-    return new SafeAccessMember(ast.receiver.visit(this), ast.name, ast.getter, ast.setter);
-  }
-
-  visitMethodCall(ast: MethodCall): MethodCall {
-    return new MethodCall(ast.receiver.visit(this), ast.name, ast.fn, this.visitAll(ast.args));
-  }
-
-  visitSafeMethodCall(ast: SafeMethodCall): SafeMethodCall {
-    return new SafeMethodCall(ast.receiver.visit(this), ast.name, ast.fn, this.visitAll(ast.args));
-  }
-
-  visitFunctionCall(ast: FunctionCall): FunctionCall {
-    return new FunctionCall(ast.target.visit(this), this.visitAll(ast.args));
-  }
-
-  visitLiteralArray(ast: LiteralArray): LiteralArray {
-    return new LiteralArray(this.visitAll(ast.expressions));
-  }
-
-  visitLiteralMap(ast: LiteralMap): LiteralMap {
-    return new LiteralMap(ast.keys, this.visitAll(ast.values));
-  }
-
-  visitBinary(ast: Binary): Binary {
-    return new Binary(ast.operation, ast.left.visit(this), ast.right.visit(this));
-  }
-
-  visitPrefixNot(ast: PrefixNot): PrefixNot { return new PrefixNot(ast.expression.visit(this)); }
-
-  visitConditional(ast: Conditional): Conditional {
-    return new Conditional(ast.condition.visit(this), ast.trueExp.visit(this),
-                           ast.falseExp.visit(this));
-  }
-
-  visitPipe(ast: BindingPipe): BindingPipe {
-    return new BindingPipe(ast.exp.visit(this), ast.name, this.visitAll(ast.args));
-  }
-
-  visitKeyedAccess(ast: KeyedAccess): KeyedAccess {
-    return new KeyedAccess(ast.obj.visit(this), ast.key.visit(this));
-  }
-
-  visitAll(asts: List<any>): List<any> {
-    var res = ListWrapper.createFixedSize(asts.length);
-    for (var i = 0; i < asts.length; ++i) {
-      res[i] = asts[i].visit(this);
-    }
-    return res;
-  }
-
-  visitChain(ast: Chain): Chain { return new Chain(this.visitAll(ast.expressions)); }
-
-  visitAssignment(ast: Assignment): Assignment {
-    return new Assignment(ast.target.visit(this), ast.value.visit(this));
-  }
-
-  visitIf(ast: If): If {
-    let falseExp = isPresent(ast.falseExp) ? ast.falseExp.visit(this) : null;
-    return new If(ast.condition.visit(this), ast.trueExp.visit(this), falseExp);
-  }
-}
-
-var _evalListCache = [
-  [],
-  [0],
-  [0, 0],
-  [0, 0, 0],
-  [0, 0, 0, 0],
-  [0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
-];
-
-function evalList(context, locals: Locals, exps: List<any>): any[] {
-  var length = exps.length;
-  if (length > 10) {
-    throw new BaseException("Cannot have more than 10 argument");
-  }
-
-  var result = _evalListCache[length];
-  for (var i = 0; i < length; i++) {
-    result[i] = exps[i].eval(context, locals);
-  }
-  return result;
-}
diff --git a/modules/angular2/src/change_detection/parser/lexer.ts b/modules/angular2/src/change_detection/parser/lexer.ts
deleted file mode 100644
index 0e99793d9aba..000000000000
--- a/modules/angular2/src/change_detection/parser/lexer.ts
+++ /dev/null
@@ -1,468 +0,0 @@
-import {Injectable} from 'angular2/src/di/decorators';
-import {List, ListWrapper, SetWrapper} from "angular2/src/facade/collection";
-import {
-  NumberWrapper,
-  StringJoiner,
-  StringWrapper,
-  BaseException,
-  isPresent
-} from "angular2/src/facade/lang";
-
-enum TokenType {
-  CHARACTER,
-  IDENTIFIER,
-  KEYWORD,
-  STRING,
-  OPERATOR,
-  NUMBER
-}
-
-@Injectable()
-export class Lexer {
-  tokenize(text: string): List<any> {
-    var scanner = new _Scanner(text);
-    var tokens = [];
-    var token = scanner.scanToken();
-    while (token != null) {
-      tokens.push(token);
-      token = scanner.scanToken();
-    }
-    return tokens;
-  }
-}
-
-export class Token {
-  constructor(public index: number, public type: TokenType, public numValue: number,
-              public strValue: string) {}
-
-  isCharacter(code: number): boolean {
-    return (this.type == TokenType.CHARACTER && this.numValue == code);
-  }
-
-  isNumber(): boolean { return (this.type == TokenType.NUMBER); }
-
-  isString(): boolean { return (this.type == TokenType.STRING); }
-
-  isOperator(operater: string): boolean {
-    return (this.type == TokenType.OPERATOR && this.strValue == operater);
-  }
-
-  isIdentifier(): boolean { return (this.type == TokenType.IDENTIFIER); }
-
-  isKeyword(): boolean { return (this.type == TokenType.KEYWORD); }
-
-  isKeywordVar(): boolean { return (this.type == TokenType.KEYWORD && this.strValue == "var"); }
-
-  isKeywordNull(): boolean { return (this.type == TokenType.KEYWORD && this.strValue == "null"); }
-
-  isKeywordUndefined(): boolean {
-    return (this.type == TokenType.KEYWORD && this.strValue == "undefined");
-  }
-
-  isKeywordTrue(): boolean { return (this.type == TokenType.KEYWORD && this.strValue == "true"); }
-
-  isKeywordIf(): boolean { return (this.type == TokenType.KEYWORD && this.strValue == "if"); }
-
-  isKeywordElse(): boolean { return (this.type == TokenType.KEYWORD && this.strValue == "else"); }
-
-  isKeywordFalse(): boolean { return (this.type == TokenType.KEYWORD && this.strValue == "false"); }
-
-  toNumber(): number {
-    // -1 instead of NULL ok?
-    return (this.type == TokenType.NUMBER) ? this.numValue : -1;
-  }
-
-  toString(): string {
-    switch (this.type) {
-      case TokenType.CHARACTER:
-      case TokenType.STRING:
-      case TokenType.IDENTIFIER:
-      case TokenType.KEYWORD:
-        return this.strValue;
-      case TokenType.NUMBER:
-        return this.numValue.toString();
-      default:
-        return null;
-    }
-  }
-}
-
-function newCharacterToken(index: number, code: number): Token {
-  return new Token(index, TokenType.CHARACTER, code, StringWrapper.fromCharCode(code));
-}
-
-function newIdentifierToken(index: number, text: string): Token {
-  return new Token(index, TokenType.IDENTIFIER, 0, text);
-}
-
-function newKeywordToken(index: number, text: string): Token {
-  return new Token(index, TokenType.KEYWORD, 0, text);
-}
-
-function newOperatorToken(index: number, text: string): Token {
-  return new Token(index, TokenType.OPERATOR, 0, text);
-}
-
-function newStringToken(index: number, text: string): Token {
-  return new Token(index, TokenType.STRING, 0, text);
-}
-
-function newNumberToken(index: number, n: number): Token {
-  return new Token(index, TokenType.NUMBER, n, "");
-}
-
-
-export var EOF: Token = new Token(-1, TokenType.CHARACTER, 0, "");
-
-export const $EOF = 0;
-export const $TAB = 9;
-export const $LF = 10;
-export const $VTAB = 11;
-export const $FF = 12;
-export const $CR = 13;
-export const $SPACE = 32;
-export const $BANG = 33;
-export const $DQ = 34;
-export const $HASH = 35;
-export const $$ = 36;
-export const $PERCENT = 37;
-export const $AMPERSAND = 38;
-export const $SQ = 39;
-export const $LPAREN = 40;
-export const $RPAREN = 41;
-export const $STAR = 42;
-export const $PLUS = 43;
-export const $COMMA = 44;
-export const $MINUS = 45;
-export const $PERIOD = 46;
-export const $SLASH = 47;
-export const $COLON = 58;
-export const $SEMICOLON = 59;
-export const $LT = 60;
-export const $EQ = 61;
-export const $GT = 62;
-export const $QUESTION = 63;
-
-const $0 = 48;
-const $9 = 57;
-
-const $A = 65, $E = 69, $Z = 90;
-
-export const $LBRACKET = 91;
-export const $BACKSLASH = 92;
-export const $RBRACKET = 93;
-const $CARET = 94;
-const $_ = 95;
-
-const $a = 97, $e = 101, $f = 102, $n = 110, $r = 114, $t = 116, $u = 117, $v = 118, $z = 122;
-
-export const $LBRACE = 123;
-export const $BAR = 124;
-export const $RBRACE = 125;
-const $NBSP = 160;
-
-
-export class ScannerError extends BaseException {
-  constructor(public message) { super(); }
-
-  toString(): string { return this.message; }
-}
-
-class _Scanner {
-  length: number;
-  peek: number = 0;
-  index: number = -1;
-
-  constructor(public input: string) {
-    this.length = input.length;
-    this.advance();
-  }
-
-  advance() {
-    this.peek =
-        ++this.index >= this.length ? $EOF : StringWrapper.charCodeAt(this.input, this.index);
-  }
-
-  scanToken(): Token {
-    var input = this.input, length = this.length, peek = this.peek, index = this.index;
-
-    // Skip whitespace.
-    while (peek <= $SPACE) {
-      if (++index >= length) {
-        peek = $EOF;
-        break;
-      } else {
-        peek = StringWrapper.charCodeAt(input, index);
-      }
-    }
-
-    this.peek = peek;
-    this.index = index;
-
-    if (index >= length) {
-      return null;
-    }
-
-    // Handle identifiers and numbers.
-    if (isIdentifierStart(peek)) return this.scanIdentifier();
-    if (isDigit(peek)) return this.scanNumber(index);
-
-    var start: number = index;
-    switch (peek) {
-      case $PERIOD:
-        this.advance();
-        return isDigit(this.peek) ? this.scanNumber(start) : newCharacterToken(start, $PERIOD);
-      case $LPAREN:
-      case $RPAREN:
-      case $LBRACE:
-      case $RBRACE:
-      case $LBRACKET:
-      case $RBRACKET:
-      case $COMMA:
-      case $COLON:
-      case $SEMICOLON:
-        return this.scanCharacter(start, peek);
-      case $SQ:
-      case $DQ:
-        return this.scanString();
-      case $HASH:
-      case $PLUS:
-      case $MINUS:
-      case $STAR:
-      case $SLASH:
-      case $PERCENT:
-      case $CARET:
-        return this.scanOperator(start, StringWrapper.fromCharCode(peek));
-      case $QUESTION:
-        return this.scanComplexOperator(start, '?', $PERIOD, '.');
-      case $LT:
-      case $GT:
-        return this.scanComplexOperator(start, StringWrapper.fromCharCode(peek), $EQ, '=');
-      case $BANG:
-      case $EQ:
-        return this.scanComplexOperator(start, StringWrapper.fromCharCode(peek), $EQ, '=', $EQ,
-                                        '=');
-      case $AMPERSAND:
-        return this.scanComplexOperator(start, '&', $AMPERSAND, '&');
-      case $BAR:
-        return this.scanComplexOperator(start, '|', $BAR, '|');
-      case $NBSP:
-        while (isWhitespace(this.peek)) this.advance();
-        return this.scanToken();
-    }
-
-    this.error(`Unexpected character [${StringWrapper.fromCharCode(peek)}]`, 0);
-    return null;
-  }
-
-  scanCharacter(start: number, code: number): Token {
-    assert(this.peek == code);
-    this.advance();
-    return newCharacterToken(start, code);
-  }
-
-
-  scanOperator(start: number, str: string): Token {
-    assert(this.peek == StringWrapper.charCodeAt(str, 0));
-    assert(SetWrapper.has(OPERATORS, str));
-    this.advance();
-    return newOperatorToken(start, str);
-  }
-
-  /**
-   * Tokenize a 2/3 char long operator
-   *
-   * @param start start index in the expression
-   * @param one first symbol (always part of the operator)
-   * @param twoCode code point for the second symbol
-   * @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,
-                      three?: string): Token {
-    assert(this.peek == StringWrapper.charCodeAt(one, 0));
-    this.advance();
-    var str: string = one;
-    if (this.peek == twoCode) {
-      this.advance();
-      str += two;
-    }
-    if (isPresent(threeCode) && this.peek == threeCode) {
-      this.advance();
-      str += three;
-    }
-    assert(SetWrapper.has(OPERATORS, str));
-    return newOperatorToken(start, str);
-  }
-
-  scanIdentifier(): Token {
-    assert(isIdentifierStart(this.peek));
-    var start: number = this.index;
-    this.advance();
-    while (isIdentifierPart(this.peek)) this.advance();
-    var str: string = this.input.substring(start, this.index);
-    if (SetWrapper.has(KEYWORDS, str)) {
-      return newKeywordToken(start, str);
-    } else {
-      return newIdentifierToken(start, str);
-    }
-  }
-
-  scanNumber(start: number): Token {
-    assert(isDigit(this.peek));
-    var simple: boolean = (this.index === start);
-    this.advance();  // Skip initial digit.
-    while (true) {
-      if (isDigit(this.peek)) {
-        // Do nothing.
-      } else if (this.peek == $PERIOD) {
-        simple = false;
-      } else if (isExponentStart(this.peek)) {
-        this.advance();
-        if (isExponentSign(this.peek)) this.advance();
-        if (!isDigit(this.peek)) this.error('Invalid exponent', -1);
-        simple = false;
-      } else {
-        break;
-      }
-      this.advance();
-    }
-    var str: string = this.input.substring(start, this.index);
-    // TODO
-    var value: number =
-        simple ? NumberWrapper.parseIntAutoRadix(str) : NumberWrapper.parseFloat(str);
-    return newNumberToken(start, value);
-  }
-
-  scanString(): Token {
-    assert(this.peek == $SQ || this.peek == $DQ);
-    var start: number = this.index;
-    var quote: number = this.peek;
-    this.advance();  // Skip initial quote.
-
-    var buffer: StringJoiner;
-    var marker: number = this.index;
-    var input: string = this.input;
-
-    while (this.peek != quote) {
-      if (this.peek == $BACKSLASH) {
-        if (buffer == null) buffer = new StringJoiner();
-        buffer.add(input.substring(marker, this.index));
-        this.advance();
-        var unescapedCode: number;
-        if (this.peek == $u) {
-          // 4 character hex code for unicode character.
-          var hex: string = input.substring(this.index + 1, this.index + 5);
-          try {
-            unescapedCode = NumberWrapper.parseInt(hex, 16);
-          } catch (e) {
-            this.error(`Invalid unicode escape [\\u${hex}]`, 0);
-          }
-          for (var i: number = 0; i < 5; i++) {
-            this.advance();
-          }
-        } else {
-          unescapedCode = unescape(this.peek);
-          this.advance();
-        }
-        buffer.add(StringWrapper.fromCharCode(unescapedCode));
-        marker = this.index;
-      } else if (this.peek == $EOF) {
-        this.error('Unterminated quote', 0);
-      } else {
-        this.advance();
-      }
-    }
-
-    var last: string = input.substring(marker, this.index);
-    this.advance();  // Skip terminating quote.
-
-    // Compute the unescaped string value.
-    var unescaped: string = last;
-    if (buffer != null) {
-      buffer.add(last);
-      unescaped = buffer.toString();
-    }
-    return newStringToken(start, unescaped);
-  }
-
-  error(message: string, offset: number) {
-    var position: number = this.index + offset;
-    throw new ScannerError(
-        `Lexer Error: ${message} at column ${position} in expression [${this.input}]`);
-  }
-}
-
-function isWhitespace(code: number): boolean {
-  return (code >= $TAB && code <= $SPACE) || (code == $NBSP);
-}
-
-function isIdentifierStart(code: number): boolean {
-  return ($a <= code && code <= $z) || ($A <= code && code <= $Z) || (code == $_) || (code == $$);
-}
-
-function isIdentifierPart(code: number): boolean {
-  return ($a <= code && code <= $z) || ($A <= code && code <= $Z) || ($0 <= code && code <= $9) ||
-         (code == $_) || (code == $$);
-}
-
-function isDigit(code: number): boolean {
-  return $0 <= code && code <= $9;
-}
-
-function isExponentStart(code: number): boolean {
-  return code == $e || code == $E;
-}
-
-function isExponentSign(code: number): boolean {
-  return code == $MINUS || code == $PLUS;
-}
-
-function unescape(code: number): number {
-  switch (code) {
-    case $n:
-      return $LF;
-    case $f:
-      return $FF;
-    case $r:
-      return $CR;
-    case $t:
-      return $TAB;
-    case $v:
-      return $VTAB;
-    default:
-      return code;
-  }
-}
-
-var OPERATORS = SetWrapper.createFromList([
-  '+',
-  '-',
-  '*',
-  '/',
-  '%',
-  '^',
-  '=',
-  '==',
-  '!=',
-  '===',
-  '!==',
-  '<',
-  '>',
-  '<=',
-  '>=',
-  '&&',
-  '||',
-  '&',
-  '|',
-  '!',
-  '?',
-  '#',
-  '?.'
-]);
-
-
-var KEYWORDS =
-    SetWrapper.createFromList(['var', 'null', 'undefined', 'true', 'false', 'if', 'else']);
diff --git a/modules/angular2/src/change_detection/parser/locals.ts b/modules/angular2/src/change_detection/parser/locals.ts
deleted file mode 100644
index 5042991d8523..000000000000
--- a/modules/angular2/src/change_detection/parser/locals.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {isPresent, BaseException} from 'angular2/src/facade/lang';
-import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-
-export class Locals {
-  constructor(public parent: Locals, public current: Map<any, any>) {}
-
-  contains(name: string): boolean {
-    if (this.current.has(name)) {
-      return true;
-    }
-
-    if (isPresent(this.parent)) {
-      return this.parent.contains(name);
-    }
-
-    return false;
-  }
-
-  get(name: string): any {
-    if (this.current.has(name)) {
-      return this.current.get(name);
-    }
-
-    if (isPresent(this.parent)) {
-      return this.parent.get(name);
-    }
-
-    throw new BaseException(`Cannot find '${name}'`);
-  }
-
-  set(name: string, value): void {
-    // TODO(rado): consider removing this check if we can guarantee this is not
-    // exposed to the public API.
-    // TODO: vsavkin maybe it should check only the local map
-    if (this.current.has(name)) {
-      this.current.set(name, value);
-    } else {
-      throw new BaseException(
-          `Setting of new keys post-construction is not supported. Key: ${name}.`);
-    }
-  }
-
-  clearValues(): void { MapWrapper.clearValues(this.current); }
-}
diff --git a/modules/angular2/src/change_detection/parser/parser.ts b/modules/angular2/src/change_detection/parser/parser.ts
deleted file mode 100644
index f7049ab52f72..000000000000
--- a/modules/angular2/src/change_detection/parser/parser.ts
+++ /dev/null
@@ -1,662 +0,0 @@
-import {Injectable} from 'angular2/src/di/decorators';
-import {
-  isBlank,
-  isPresent,
-  BaseException,
-  StringWrapper,
-  RegExpWrapper
-} from 'angular2/src/facade/lang';
-import {ListWrapper, List} from 'angular2/src/facade/collection';
-import {
-  Lexer,
-  EOF,
-  Token,
-  $PERIOD,
-  $COLON,
-  $SEMICOLON,
-  $LBRACKET,
-  $RBRACKET,
-  $COMMA,
-  $LBRACE,
-  $RBRACE,
-  $LPAREN,
-  $RPAREN
-} from './lexer';
-import {reflector, Reflector} from 'angular2/src/reflection/reflection';
-import {
-  AST,
-  EmptyExpr,
-  ImplicitReceiver,
-  AccessMember,
-  SafeAccessMember,
-  LiteralPrimitive,
-  Binary,
-  PrefixNot,
-  Conditional,
-  If,
-  BindingPipe,
-  Assignment,
-  Chain,
-  KeyedAccess,
-  LiteralArray,
-  LiteralMap,
-  Interpolation,
-  MethodCall,
-  SafeMethodCall,
-  FunctionCall,
-  TemplateBinding,
-  ASTWithSource,
-  AstVisitor
-} from './ast';
-
-
-var _implicitReceiver = new ImplicitReceiver();
-// TODO(tbosch): Cannot make this const/final right now because of the transpiler...
-var INTERPOLATION_REGEXP = RegExpWrapper.create('\\{\\{(.*?)\\}\\}');
-
-@Injectable()
-export class Parser {
-  _reflector: Reflector;
-
-  constructor(public _lexer: Lexer, providedReflector: Reflector = null) {
-    this._reflector = isPresent(providedReflector) ? providedReflector : reflector;
-  }
-
-  parseAction(input: string, location: any): ASTWithSource {
-    var tokens = this._lexer.tokenize(input);
-    var ast = new _ParseAST(input, location, tokens, this._reflector, true).parseChain();
-    return new ASTWithSource(ast, input, location);
-  }
-
-  parseBinding(input: string, location: any): ASTWithSource {
-    var tokens = this._lexer.tokenize(input);
-    var ast = new _ParseAST(input, location, tokens, this._reflector, false).parseChain();
-    return new ASTWithSource(ast, input, location);
-  }
-
-  parseSimpleBinding(input: string, location: string): ASTWithSource {
-    var tokens = this._lexer.tokenize(input);
-    var ast = new _ParseAST(input, location, tokens, this._reflector, false).parseSimpleBinding();
-    return new ASTWithSource(ast, input, location);
-  }
-
-  parseTemplateBindings(input: string, location: any): List<TemplateBinding> {
-    var tokens = this._lexer.tokenize(input);
-    return new _ParseAST(input, location, tokens, this._reflector, false).parseTemplateBindings();
-  }
-
-  parseInterpolation(input: string, location: any): ASTWithSource {
-    var parts = StringWrapper.split(input, INTERPOLATION_REGEXP);
-    if (parts.length <= 1) {
-      return null;
-    }
-    var strings = [];
-    var expressions = [];
-
-    for (var i = 0; i < parts.length; i++) {
-      var part = parts[i];
-      if (i % 2 === 0) {
-        // fixed string
-        strings.push(part);
-      } else {
-        var tokens = this._lexer.tokenize(part);
-        var ast = new _ParseAST(input, location, tokens, this._reflector, false).parseChain();
-        expressions.push(ast);
-      }
-    }
-    return new ASTWithSource(new Interpolation(strings, expressions), input, location);
-  }
-
-  wrapLiteralPrimitive(input: string, location: any): ASTWithSource {
-    return new ASTWithSource(new LiteralPrimitive(input), input, location);
-  }
-}
-
-class _ParseAST {
-  index: int = 0;
-  constructor(public input: string, public location: any, public tokens: List<any>,
-              public reflector: Reflector, public parseAction: boolean) {}
-
-  peek(offset: int): Token {
-    var i = this.index + offset;
-    return i < this.tokens.length ? this.tokens[i] : EOF;
-  }
-
-  get next(): Token { return this.peek(0); }
-
-  get inputIndex(): int {
-    return (this.index < this.tokens.length) ? this.next.index : this.input.length;
-  }
-
-  advance() { this.index++; }
-
-  optionalCharacter(code: int): boolean {
-    if (this.next.isCharacter(code)) {
-      this.advance();
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  optionalKeywordVar(): boolean {
-    if (this.peekKeywordVar()) {
-      this.advance();
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  peekKeywordVar(): boolean { return this.next.isKeywordVar() || this.next.isOperator('#'); }
-
-  expectCharacter(code: int) {
-    if (this.optionalCharacter(code)) return;
-    this.error(`Missing expected ${StringWrapper.fromCharCode(code)}`);
-  }
-
-
-  optionalOperator(op: string): boolean {
-    if (this.next.isOperator(op)) {
-      this.advance();
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  expectOperator(operator: string) {
-    if (this.optionalOperator(operator)) return;
-    this.error(`Missing expected operator ${operator}`);
-  }
-
-  expectIdentifierOrKeyword(): string {
-    var n = this.next;
-    if (!n.isIdentifier() && !n.isKeyword()) {
-      this.error(`Unexpected token ${n}, expected identifier or keyword`)
-    }
-    this.advance();
-    return n.toString();
-  }
-
-  expectIdentifierOrKeywordOrString(): string {
-    var n = this.next;
-    if (!n.isIdentifier() && !n.isKeyword() && !n.isString()) {
-      this.error(`Unexpected token ${n}, expected identifier, keyword, or string`)
-    }
-    this.advance();
-    return n.toString();
-  }
-
-  parseChain(): AST {
-    var exprs = [];
-    while (this.index < this.tokens.length) {
-      var expr = this.parsePipe();
-      exprs.push(expr);
-
-      if (this.optionalCharacter($SEMICOLON)) {
-        if (!this.parseAction) {
-          this.error("Binding expression cannot contain chained expression");
-        }
-        while (this.optionalCharacter($SEMICOLON)) {
-        }  // read all semicolons
-      } else if (this.index < this.tokens.length) {
-        this.error(`Unexpected token '${this.next}'`);
-      }
-    }
-    if (exprs.length == 0) return new EmptyExpr();
-    if (exprs.length == 1) return exprs[0];
-    return new Chain(exprs);
-  }
-
-  parseSimpleBinding(): AST {
-    var ast = this.parseChain();
-    if (!SimpleExpressionChecker.check(ast)) {
-      this.error(`Simple binding expression can only contain field access and constants'`);
-    }
-    return ast;
-  }
-
-  parsePipe(): AST {
-    var result = this.parseExpression();
-    if (this.optionalOperator("|")) {
-      if (this.parseAction) {
-        this.error("Cannot have a pipe in an action expression");
-      }
-
-      do {
-        var name = this.expectIdentifierOrKeyword();
-        var args = [];
-        while (this.optionalCharacter($COLON)) {
-          args.push(this.parsePipe());
-        }
-        result = new BindingPipe(result, name, args);
-      } while (this.optionalOperator("|"));
-    }
-
-    return result;
-  }
-
-  parseExpression(): AST {
-    var start = this.inputIndex;
-    var result = this.parseConditional();
-
-    while (this.next.isOperator('=')) {
-      if (!result.isAssignable) {
-        var end = this.inputIndex;
-        var expression = this.input.substring(start, end);
-        this.error(`Expression ${expression} is not assignable`);
-      }
-
-      if (!this.parseAction) {
-        this.error("Binding expression cannot contain assignments");
-      }
-
-      this.expectOperator('=');
-      result = new Assignment(result, this.parseConditional());
-    }
-
-    return result;
-  }
-
-  parseConditional(): AST {
-    var start = this.inputIndex;
-    var result = this.parseLogicalOr();
-
-    if (this.optionalOperator('?')) {
-      var yes = this.parsePipe();
-      if (!this.optionalCharacter($COLON)) {
-        var end = this.inputIndex;
-        var expression = this.input.substring(start, end);
-        this.error(`Conditional expression ${expression} requires all 3 expressions`);
-      }
-      var no = this.parsePipe();
-      return new Conditional(result, yes, no);
-    } else {
-      return result;
-    }
-  }
-
-  parseLogicalOr(): AST {
-    // '||'
-    var result = this.parseLogicalAnd();
-    while (this.optionalOperator('||')) {
-      result = new Binary('||', result, this.parseLogicalAnd());
-    }
-    return result;
-  }
-
-  parseLogicalAnd(): AST {
-    // '&&'
-    var result = this.parseEquality();
-    while (this.optionalOperator('&&')) {
-      result = new Binary('&&', result, this.parseEquality());
-    }
-    return result;
-  }
-
-  parseEquality(): AST {
-    // '==','!=','===','!=='
-    var result = this.parseRelational();
-    while (true) {
-      if (this.optionalOperator('==')) {
-        result = new Binary('==', result, this.parseRelational());
-      } else if (this.optionalOperator('===')) {
-        result = new Binary('===', result, this.parseRelational());
-      } else if (this.optionalOperator('!=')) {
-        result = new Binary('!=', result, this.parseRelational());
-      } else if (this.optionalOperator('!==')) {
-        result = new Binary('!==', result, this.parseRelational());
-      } else {
-        return result;
-      }
-    }
-  }
-
-  parseRelational(): AST {
-    // '<', '>', '<=', '>='
-    var result = this.parseAdditive();
-    while (true) {
-      if (this.optionalOperator('<')) {
-        result = new Binary('<', result, this.parseAdditive());
-      } else if (this.optionalOperator('>')) {
-        result = new Binary('>', result, this.parseAdditive());
-      } else if (this.optionalOperator('<=')) {
-        result = new Binary('<=', result, this.parseAdditive());
-      } else if (this.optionalOperator('>=')) {
-        result = new Binary('>=', result, this.parseAdditive());
-      } else {
-        return result;
-      }
-    }
-  }
-
-  parseAdditive(): AST {
-    // '+', '-'
-    var result = this.parseMultiplicative();
-    while (true) {
-      if (this.optionalOperator('+')) {
-        result = new Binary('+', result, this.parseMultiplicative());
-      } else if (this.optionalOperator('-')) {
-        result = new Binary('-', result, this.parseMultiplicative());
-      } else {
-        return result;
-      }
-    }
-  }
-
-  parseMultiplicative(): AST {
-    // '*', '%', '/'
-    var result = this.parsePrefix();
-    while (true) {
-      if (this.optionalOperator('*')) {
-        result = new Binary('*', result, this.parsePrefix());
-      } else if (this.optionalOperator('%')) {
-        result = new Binary('%', result, this.parsePrefix());
-      } else if (this.optionalOperator('/')) {
-        result = new Binary('/', result, this.parsePrefix());
-      } else {
-        return result;
-      }
-    }
-  }
-
-  parsePrefix(): AST {
-    if (this.optionalOperator('+')) {
-      return this.parsePrefix();
-    } else if (this.optionalOperator('-')) {
-      return new Binary('-', new LiteralPrimitive(0), this.parsePrefix());
-    } else if (this.optionalOperator('!')) {
-      return new PrefixNot(this.parsePrefix());
-    } else {
-      return this.parseCallChain();
-    }
-  }
-
-  parseCallChain(): AST {
-    var result = this.parsePrimary();
-    while (true) {
-      if (this.optionalCharacter($PERIOD)) {
-        result = this.parseAccessMemberOrMethodCall(result, false);
-
-      } else if (this.optionalOperator('?.')) {
-        result = this.parseAccessMemberOrMethodCall(result, true);
-
-      } else if (this.optionalCharacter($LBRACKET)) {
-        var key = this.parsePipe();
-        this.expectCharacter($RBRACKET);
-        result = new KeyedAccess(result, key);
-
-      } else if (this.optionalCharacter($LPAREN)) {
-        var args = this.parseCallArguments();
-        this.expectCharacter($RPAREN);
-        result = new FunctionCall(result, args);
-
-      } else {
-        return result;
-      }
-    }
-  }
-
-  parsePrimary(): AST {
-    if (this.optionalCharacter($LPAREN)) {
-      let result = this.parsePipe();
-      this.expectCharacter($RPAREN);
-      return result;
-    } else if (this.next.isKeywordNull() || this.next.isKeywordUndefined()) {
-      this.advance();
-      return new LiteralPrimitive(null);
-
-    } else if (this.next.isKeywordTrue()) {
-      this.advance();
-      return new LiteralPrimitive(true);
-
-    } else if (this.next.isKeywordFalse()) {
-      this.advance();
-      return new LiteralPrimitive(false);
-
-    } else if (this.parseAction && this.next.isKeywordIf()) {
-      this.advance();
-      this.expectCharacter($LPAREN);
-      let condition = this.parseExpression();
-      this.expectCharacter($RPAREN);
-      let ifExp = this.parseExpressionOrBlock();
-      let elseExp;
-      if (this.next.isKeywordElse()) {
-        this.advance();
-        elseExp = this.parseExpressionOrBlock();
-      }
-      return new If(condition, ifExp, elseExp);
-
-    } else if (this.optionalCharacter($LBRACKET)) {
-      var elements = this.parseExpressionList($RBRACKET);
-      this.expectCharacter($RBRACKET);
-      return new LiteralArray(elements);
-
-    } else if (this.next.isCharacter($LBRACE)) {
-      return this.parseLiteralMap();
-
-    } else if (this.next.isIdentifier()) {
-      return this.parseAccessMemberOrMethodCall(_implicitReceiver, false);
-
-    } else if (this.next.isNumber()) {
-      var value = this.next.toNumber();
-      this.advance();
-      return new LiteralPrimitive(value);
-
-    } else if (this.next.isString()) {
-      var literalValue = this.next.toString();
-      this.advance();
-      return new LiteralPrimitive(literalValue);
-
-    } else if (this.index >= this.tokens.length) {
-      this.error(`Unexpected end of expression: ${this.input}`);
-
-    } else {
-      this.error(`Unexpected token ${this.next}`);
-    }
-    // error() throws, so we don't reach here.
-    throw new BaseException("Fell through all cases in parsePrimary");
-  }
-
-  parseExpressionList(terminator: int): List<any> {
-    var result = [];
-    if (!this.next.isCharacter(terminator)) {
-      do {
-        result.push(this.parsePipe());
-      } while (this.optionalCharacter($COMMA));
-    }
-    return result;
-  }
-
-  parseLiteralMap(): LiteralMap {
-    var keys = [];
-    var values = [];
-    this.expectCharacter($LBRACE);
-    if (!this.optionalCharacter($RBRACE)) {
-      do {
-        var key = this.expectIdentifierOrKeywordOrString();
-        keys.push(key);
-        this.expectCharacter($COLON);
-        values.push(this.parsePipe());
-      } while (this.optionalCharacter($COMMA));
-      this.expectCharacter($RBRACE);
-    }
-    return new LiteralMap(keys, values);
-  }
-
-  parseAccessMemberOrMethodCall(receiver, isSafe: boolean = false): AST {
-    let id = this.expectIdentifierOrKeyword();
-
-    if (this.optionalCharacter($LPAREN)) {
-      let args = this.parseCallArguments();
-      this.expectCharacter($RPAREN);
-      let fn = this.reflector.method(id);
-      return isSafe ? new SafeMethodCall(receiver, id, fn, args) :
-                      new MethodCall(receiver, id, fn, args);
-
-    } else {
-      let getter = this.reflector.getter(id);
-      let setter = this.reflector.setter(id);
-      return isSafe ? new SafeAccessMember(receiver, id, getter, setter) :
-                      new AccessMember(receiver, id, getter, setter);
-    }
-  }
-
-  parseCallArguments(): BindingPipe[] {
-    if (this.next.isCharacter($RPAREN)) return [];
-    var positionals = [];
-    do {
-      positionals.push(this.parsePipe());
-    } while (this.optionalCharacter($COMMA));
-    return positionals;
-  }
-
-  parseExpressionOrBlock(): AST {
-    if (this.optionalCharacter($LBRACE)) {
-      let block = this.parseBlockContent();
-      this.expectCharacter($RBRACE);
-      return block;
-    }
-
-    return this.parseExpression();
-  }
-
-  parseBlockContent(): AST {
-    if (!this.parseAction) {
-      this.error("Binding expression cannot contain chained expression");
-    }
-    var exprs = [];
-    while (this.index < this.tokens.length && !this.next.isCharacter($RBRACE)) {
-      var expr = this.parseExpression();
-      exprs.push(expr);
-
-      if (this.optionalCharacter($SEMICOLON)) {
-        while (this.optionalCharacter($SEMICOLON)) {
-        }  // read all semicolons
-      }
-    }
-    if (exprs.length == 0) return new EmptyExpr();
-    if (exprs.length == 1) return exprs[0];
-
-    return new Chain(exprs);
-  }
-
-
-  /**
-   * An identifier, a keyword, a string with an optional `-` inbetween.
-   */
-  expectTemplateBindingKey(): string {
-    var result = '';
-    var operatorFound = false;
-    do {
-      result += this.expectIdentifierOrKeywordOrString();
-      operatorFound = this.optionalOperator('-');
-      if (operatorFound) {
-        result += '-';
-      }
-    } while (operatorFound);
-
-    return result.toString();
-  }
-
-  parseTemplateBindings(): any[] {
-    var bindings = [];
-    var prefix = null;
-    while (this.index < this.tokens.length) {
-      var keyIsVar: boolean = this.optionalKeywordVar();
-      var key = this.expectTemplateBindingKey();
-      if (!keyIsVar) {
-        if (prefix == null) {
-          prefix = key;
-        } else {
-          key = prefix + '-' + key;
-        }
-      }
-      this.optionalCharacter($COLON);
-      var name = null;
-      var expression = null;
-      if (keyIsVar) {
-        if (this.optionalOperator("=")) {
-          name = this.expectTemplateBindingKey();
-        } else {
-          name = '\$implicit';
-        }
-      } else if (this.next !== EOF && !this.peekKeywordVar()) {
-        var start = this.inputIndex;
-        var ast = this.parsePipe();
-        var source = this.input.substring(start, this.inputIndex);
-        expression = new ASTWithSource(ast, source, this.location);
-      }
-      bindings.push(new TemplateBinding(key, keyIsVar, name, expression));
-      if (!this.optionalCharacter($SEMICOLON)) {
-        this.optionalCharacter($COMMA);
-      }
-    }
-    return bindings;
-  }
-
-  error(message: string, index: int = null) {
-    if (isBlank(index)) index = this.index;
-
-    var location = (index < this.tokens.length) ? `at column ${this.tokens[index].index + 1} in` :
-                                                  `at the end of the expression`;
-
-    throw new BaseException(
-        `Parser Error: ${message} ${location} [${this.input}] in ${this.location}`);
-  }
-}
-
-class SimpleExpressionChecker implements AstVisitor {
-  static check(ast: AST): boolean {
-    var s = new SimpleExpressionChecker();
-    ast.visit(s);
-    return s.simple;
-  }
-
-  simple = true;
-
-  visitImplicitReceiver(ast: ImplicitReceiver) {}
-
-  visitInterpolation(ast: Interpolation) { this.simple = false; }
-
-  visitLiteralPrimitive(ast: LiteralPrimitive) {}
-
-  visitAccessMember(ast: AccessMember) {}
-
-  visitSafeAccessMember(ast: SafeAccessMember) { this.simple = false; }
-
-  visitMethodCall(ast: MethodCall) { this.simple = false; }
-
-  visitSafeMethodCall(ast: SafeMethodCall) { this.simple = false; }
-
-  visitFunctionCall(ast: FunctionCall) { this.simple = false; }
-
-  visitLiteralArray(ast: LiteralArray) { this.visitAll(ast.expressions); }
-
-  visitLiteralMap(ast: LiteralMap) { this.visitAll(ast.values); }
-
-  visitBinary(ast: Binary) { this.simple = false; }
-
-  visitPrefixNot(ast: PrefixNot) { this.simple = false; }
-
-  visitConditional(ast: Conditional) { this.simple = false; }
-
-  visitPipe(ast: BindingPipe) { this.simple = false; }
-
-  visitKeyedAccess(ast: KeyedAccess) { this.simple = false; }
-
-  visitAll(asts: List<any>): List<any> {
-    var res = ListWrapper.createFixedSize(asts.length);
-    for (var i = 0; i < asts.length; ++i) {
-      res[i] = asts[i].visit(this);
-    }
-    return res;
-  }
-
-  visitChain(ast: Chain) { this.simple = false; }
-
-  visitAssignment(ast: Assignment) { this.simple = false; }
-
-  visitIf(ast: If) { this.simple = false; }
-}
diff --git a/modules/angular2/src/change_detection/pipes/iterable_changes.ts b/modules/angular2/src/change_detection/pipes/iterable_changes.ts
deleted file mode 100644
index 9a7e8bfc5d65..000000000000
--- a/modules/angular2/src/change_detection/pipes/iterable_changes.ts
+++ /dev/null
@@ -1,626 +0,0 @@
-import {CONST} from 'angular2/src/facade/lang';
-import {
-  isListLikeIterable,
-  iterateListLike,
-  ListWrapper,
-  MapWrapper
-} from 'angular2/src/facade/collection';
-
-import {
-  isBlank,
-  isPresent,
-  stringify,
-  getMapKey,
-  looseIdentical,
-  isArray
-} from 'angular2/src/facade/lang';
-
-import {WrappedValue, Pipe, BasePipe, PipeFactory} from './pipe';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
-@CONST()
-export class IterableChangesFactory implements PipeFactory {
-  supports(obj): boolean { return IterableChanges.supportsObj(obj); }
-
-  create(cdRef: ChangeDetectorRef): Pipe { return new IterableChanges(); }
-}
-
-/**
- * @exportedAs angular2/pipes
- */
-export class IterableChanges extends BasePipe {
-  private _collection = null;
-  private _length: int = null;
-  // Keeps track of the used records at any point in time (during & across `_check()` calls)
-  private _linkedRecords: _DuplicateMap = null;
-  // Keeps track of the removed records at any point in time during `_check()` calls.
-  private _unlinkedRecords: _DuplicateMap = null;
-  private _previousItHead: CollectionChangeRecord = null;
-  private _itHead: CollectionChangeRecord = null;
-  private _itTail: CollectionChangeRecord = null;
-  private _additionsHead: CollectionChangeRecord = null;
-  private _additionsTail: CollectionChangeRecord = null;
-  private _movesHead: CollectionChangeRecord = null;
-  private _movesTail: CollectionChangeRecord = null;
-  private _removalsHead: CollectionChangeRecord = null;
-  private _removalsTail: CollectionChangeRecord = null;
-
-  constructor() { super(); }
-
-  static supportsObj(obj): boolean { return isListLikeIterable(obj); }
-
-  supports(obj): boolean { return IterableChanges.supportsObj(obj); }
-
-  get collection() { return this._collection; }
-
-  get length(): int { return this._length; }
-
-  forEachItem(fn: Function) {
-    var record: CollectionChangeRecord;
-    for (record = this._itHead; record !== null; record = record._next) {
-      fn(record);
-    }
-  }
-
-  forEachPreviousItem(fn: Function) {
-    var record: CollectionChangeRecord;
-    for (record = this._previousItHead; record !== null; record = record._nextPrevious) {
-      fn(record);
-    }
-  }
-
-  forEachAddedItem(fn: Function) {
-    var record: CollectionChangeRecord;
-    for (record = this._additionsHead; record !== null; record = record._nextAdded) {
-      fn(record);
-    }
-  }
-
-  forEachMovedItem(fn: Function) {
-    var record: CollectionChangeRecord;
-    for (record = this._movesHead; record !== null; record = record._nextMoved) {
-      fn(record);
-    }
-  }
-
-  forEachRemovedItem(fn: Function) {
-    var record: CollectionChangeRecord;
-    for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
-      fn(record);
-    }
-  }
-
-  transform(collection, args: List<any> = null): any {
-    if (this.check(collection)) {
-      return WrappedValue.wrap(this);
-    } else {
-      return null;
-    }
-  }
-
-  // todo(vicb): optim for UnmodifiableListView (frozen arrays)
-  check(collection): boolean {
-    this._reset();
-
-    var record: CollectionChangeRecord = this._itHead;
-    var mayBeDirty: boolean = false;
-    var index: int;
-    var item;
-
-    if (isArray(collection)) {
-      var list = collection;
-      this._length = collection.length;
-
-      for (index = 0; index < this._length; index++) {
-        item = list[index];
-        if (record === null || !looseIdentical(record.item, item)) {
-          record = this._mismatch(record, item, index);
-          mayBeDirty = true;
-        } else if (mayBeDirty) {
-          // TODO(misko): can we limit this to duplicates only?
-          record = this._verifyReinsertion(record, item, index);
-        }
-        record = record._next;
-      }
-    } else {
-      index = 0;
-      iterateListLike(collection, (item) => {
-        if (record === null || !looseIdentical(record.item, item)) {
-          record = this._mismatch(record, item, index);
-          mayBeDirty = true;
-        } else if (mayBeDirty) {
-          // TODO(misko): can we limit this to duplicates only?
-          record = this._verifyReinsertion(record, item, index);
-        }
-        record = record._next;
-        index++
-      });
-      this._length = index;
-    }
-
-    this._truncate(record);
-    this._collection = collection;
-    return this.isDirty;
-  }
-
-  // CollectionChanges is considered dirty if it has any additions, moves or removals.
-  get isDirty(): boolean {
-    return this._additionsHead !== null || this._movesHead !== null || this._removalsHead !== null;
-  }
-
-  /**
-   * Reset the state of the change objects to show no changes. This means set previousKey to
-   * currentKey, and clear all of the queues (additions, moves, removals).
-   * Set the previousIndexes of moved and added items to their currentIndexes
-   * Reset the list of additions, moves and removals
-   */
-  _reset() {
-    if (this.isDirty) {
-      var record: CollectionChangeRecord;
-      var nextRecord: CollectionChangeRecord;
-
-      for (record = this._previousItHead = this._itHead; record !== null; record = record._next) {
-        record._nextPrevious = record._next;
-      }
-
-      for (record = this._additionsHead; record !== null; record = record._nextAdded) {
-        record.previousIndex = record.currentIndex;
-      }
-      this._additionsHead = this._additionsTail = null;
-
-      for (record = this._movesHead; record !== null; record = nextRecord) {
-        record.previousIndex = record.currentIndex;
-        nextRecord = record._nextMoved;
-      }
-      this._movesHead = this._movesTail = null;
-      this._removalsHead = this._removalsTail = null;
-
-      // todo(vicb) when assert gets supported
-      // assert(!this.isDirty);
-    }
-  }
-
-  /**
-   * This is the core function which handles differences between collections.
-   *
-   * - `record` is the record which we saw at this position last time. If null then it is a new
-   *   item.
-   * - `item` is the current item in the collection
-   * - `index` is the position of the item in the collection
-   */
-  _mismatch(record: CollectionChangeRecord, item, index: int): CollectionChangeRecord {
-    // The previous record after which we will append the current one.
-    var previousRecord: CollectionChangeRecord;
-
-    if (record === null) {
-      previousRecord = this._itTail;
-    } else {
-      previousRecord = record._prev;
-      // Remove the record from the collection since we know it does not match the item.
-      this._remove(record);
-    }
-
-    // Attempt to see if we have seen the item before.
-    record = this._linkedRecords === null ? null : this._linkedRecords.get(item, index);
-    if (record !== null) {
-      // We have seen this before, we need to move it forward in the collection.
-      this._moveAfter(record, previousRecord, index);
-    } else {
-      // Never seen it, check evicted list.
-      record = this._unlinkedRecords === null ? null : this._unlinkedRecords.get(item);
-      if (record !== null) {
-        // It is an item which we have evicted earlier: reinsert it back into the list.
-        this._reinsertAfter(record, previousRecord, index);
-      } else {
-        // It is a new item: add it.
-        record = this._addAfter(new CollectionChangeRecord(item), previousRecord, index);
-      }
-    }
-    return record;
-  }
-
-  /**
-   * This check is only needed if an array contains duplicates. (Short circuit of nothing dirty)
-   *
-   * Use case: `[a, a]` => `[b, a, a]`
-   *
-   * If we did not have this check then the insertion of `b` would:
-   *   1) evict first `a`
-   *   2) insert `b` at `0` index.
-   *   3) leave `a` at index `1` as is. <-- this is wrong!
-   *   3) reinsert `a` at index 2. <-- this is wrong!
-   *
-   * The correct behavior is:
-   *   1) evict first `a`
-   *   2) insert `b` at `0` index.
-   *   3) reinsert `a` at index 1.
-   *   3) move `a` at from `1` to `2`.
-   *
-   *
-   * Double check that we have not evicted a duplicate item. We need to check if the item type may
-   * have already been removed:
-   * The insertion of b will evict the first 'a'. If we don't reinsert it now it will be reinserted
-   * at the end. Which will show up as the two 'a's switching position. This is incorrect, since a
-   * better way to think of it is as insert of 'b' rather then switch 'a' with 'b' and then add 'a'
-   * at the end.
-   */
-  _verifyReinsertion(record: CollectionChangeRecord, item, index: int): CollectionChangeRecord {
-    var reinsertRecord: CollectionChangeRecord =
-        this._unlinkedRecords === null ? null : this._unlinkedRecords.get(item);
-    if (reinsertRecord !== null) {
-      record = this._reinsertAfter(reinsertRecord, record._prev, index);
-    } else if (record.currentIndex != index) {
-      record.currentIndex = index;
-      this._addToMoves(record, index);
-    }
-    return record;
-  }
-
-  /**
-   * Get rid of any excess {@link CollectionChangeRecord}s from the previous collection
-   *
-   * - `record` The first excess {@link CollectionChangeRecord}.
-   */
-  _truncate(record: CollectionChangeRecord) {
-    // Anything after that needs to be removed;
-    while (record !== null) {
-      var nextRecord: CollectionChangeRecord = record._next;
-      this._addToRemovals(this._unlink(record));
-      record = nextRecord;
-    }
-    if (this._unlinkedRecords !== null) {
-      this._unlinkedRecords.clear();
-    }
-
-    if (this._additionsTail !== null) {
-      this._additionsTail._nextAdded = null;
-    }
-    if (this._movesTail !== null) {
-      this._movesTail._nextMoved = null;
-    }
-    if (this._itTail !== null) {
-      this._itTail._next = null;
-    }
-    if (this._removalsTail !== null) {
-      this._removalsTail._nextRemoved = null;
-    }
-  }
-
-  _reinsertAfter(record: CollectionChangeRecord, prevRecord: CollectionChangeRecord,
-                 index: int): CollectionChangeRecord {
-    if (this._unlinkedRecords !== null) {
-      this._unlinkedRecords.remove(record);
-    }
-    var prev = record._prevRemoved;
-    var next = record._nextRemoved;
-
-    if (prev === null) {
-      this._removalsHead = next;
-    } else {
-      prev._nextRemoved = next;
-    }
-    if (next === null) {
-      this._removalsTail = prev;
-    } else {
-      next._prevRemoved = prev;
-    }
-
-    this._insertAfter(record, prevRecord, index);
-    this._addToMoves(record, index);
-    return record;
-  }
-
-  _moveAfter(record: CollectionChangeRecord, prevRecord: CollectionChangeRecord,
-             index: int): CollectionChangeRecord {
-    this._unlink(record);
-    this._insertAfter(record, prevRecord, index);
-    this._addToMoves(record, index);
-    return record;
-  }
-
-  _addAfter(record: CollectionChangeRecord, prevRecord: CollectionChangeRecord,
-            index: int): CollectionChangeRecord {
-    this._insertAfter(record, prevRecord, index);
-
-    if (this._additionsTail === null) {
-      // todo(vicb)
-      // assert(this._additionsHead === null);
-      this._additionsTail = this._additionsHead = record;
-    } else {
-      // todo(vicb)
-      // assert(_additionsTail._nextAdded === null);
-      // assert(record._nextAdded === null);
-      this._additionsTail = this._additionsTail._nextAdded = record;
-    }
-    return record;
-  }
-
-  _insertAfter(record: CollectionChangeRecord, prevRecord: CollectionChangeRecord,
-               index: int): CollectionChangeRecord {
-    // todo(vicb)
-    // assert(record != prevRecord);
-    // assert(record._next === null);
-    // assert(record._prev === null);
-
-    var next: CollectionChangeRecord = prevRecord === null ? this._itHead : prevRecord._next;
-    // todo(vicb)
-    // assert(next != record);
-    // assert(prevRecord != record);
-    record._next = next;
-    record._prev = prevRecord;
-    if (next === null) {
-      this._itTail = record;
-    } else {
-      next._prev = record;
-    }
-    if (prevRecord === null) {
-      this._itHead = record;
-    } else {
-      prevRecord._next = record;
-    }
-
-    if (this._linkedRecords === null) {
-      this._linkedRecords = new _DuplicateMap();
-    }
-    this._linkedRecords.put(record);
-
-    record.currentIndex = index;
-    return record;
-  }
-
-  _remove(record: CollectionChangeRecord): CollectionChangeRecord {
-    return this._addToRemovals(this._unlink(record));
-  }
-
-  _unlink(record: CollectionChangeRecord): CollectionChangeRecord {
-    if (this._linkedRecords !== null) {
-      this._linkedRecords.remove(record);
-    }
-
-    var prev = record._prev;
-    var next = record._next;
-
-    // todo(vicb)
-    // assert((record._prev = null) === null);
-    // assert((record._next = null) === null);
-
-    if (prev === null) {
-      this._itHead = next;
-    } else {
-      prev._next = next;
-    }
-    if (next === null) {
-      this._itTail = prev;
-    } else {
-      next._prev = prev;
-    }
-
-    return record;
-  }
-
-  _addToMoves(record: CollectionChangeRecord, toIndex: int): CollectionChangeRecord {
-    // todo(vicb)
-    // assert(record._nextMoved === null);
-
-    if (record.previousIndex === toIndex) {
-      return record;
-    }
-
-    if (this._movesTail === null) {
-      // todo(vicb)
-      // assert(_movesHead === null);
-      this._movesTail = this._movesHead = record;
-    } else {
-      // todo(vicb)
-      // assert(_movesTail._nextMoved === null);
-      this._movesTail = this._movesTail._nextMoved = record;
-    }
-
-    return record;
-  }
-
-  _addToRemovals(record: CollectionChangeRecord): CollectionChangeRecord {
-    if (this._unlinkedRecords === null) {
-      this._unlinkedRecords = new _DuplicateMap();
-    }
-    this._unlinkedRecords.put(record);
-    record.currentIndex = null;
-    record._nextRemoved = null;
-
-    if (this._removalsTail === null) {
-      // todo(vicb)
-      // assert(_removalsHead === null);
-      this._removalsTail = this._removalsHead = record;
-      record._prevRemoved = null;
-    } else {
-      // todo(vicb)
-      // assert(_removalsTail._nextRemoved === null);
-      // assert(record._nextRemoved === null);
-      record._prevRemoved = this._removalsTail;
-      this._removalsTail = this._removalsTail._nextRemoved = record;
-    }
-    return record;
-  }
-
-  toString(): string {
-    var record: CollectionChangeRecord;
-
-    var list = [];
-    for (record = this._itHead; record !== null; record = record._next) {
-      list.push(record);
-    }
-
-    var previous = [];
-    for (record = this._previousItHead; record !== null; record = record._nextPrevious) {
-      previous.push(record);
-    }
-
-    var additions = [];
-    for (record = this._additionsHead; record !== null; record = record._nextAdded) {
-      additions.push(record);
-    }
-    var moves = [];
-    for (record = this._movesHead; record !== null; record = record._nextMoved) {
-      moves.push(record);
-    }
-
-    var removals = [];
-    for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
-      removals.push(record);
-    }
-
-    return "collection: " + list.join(', ') + "\n" + "previous: " + previous.join(', ') + "\n" +
-           "additions: " + additions.join(', ') + "\n" + "moves: " + moves.join(', ') + "\n" +
-           "removals: " + removals.join(', ') + "\n";
-  }
-}
-
-/**
- * @exportedAs angular2/pipes
- */
-export class CollectionChangeRecord {
-  currentIndex: int = null;
-  previousIndex: int = null;
-
-  _nextPrevious: CollectionChangeRecord = null;
-  _prev: CollectionChangeRecord = null;
-  _next: CollectionChangeRecord = null;
-  _prevDup: CollectionChangeRecord = null;
-  _nextDup: CollectionChangeRecord = null;
-  _prevRemoved: CollectionChangeRecord = null;
-  _nextRemoved: CollectionChangeRecord = null;
-  _nextAdded: CollectionChangeRecord = null;
-  _nextMoved: CollectionChangeRecord = null;
-
-  constructor(public item: any) {}
-
-  toString(): string {
-    return this.previousIndex === this.currentIndex ?
-               stringify(this.item) :
-               stringify(this.item) + '[' + stringify(this.previousIndex) + '->' +
-                   stringify(this.currentIndex) + ']';
-  }
-}
-
-// A linked list of CollectionChangeRecords with the same CollectionChangeRecord.item
-class _DuplicateItemRecordList {
-  _head: CollectionChangeRecord = null;
-  _tail: CollectionChangeRecord = null;
-
-  /**
-   * Append the record to the list of duplicates.
-   *
-   * Note: by design all records in the list of duplicates hold the same value in record.item.
-   */
-  add(record: CollectionChangeRecord): void {
-    if (this._head === null) {
-      this._head = this._tail = record;
-      record._nextDup = null;
-      record._prevDup = null;
-    } else {
-      // todo(vicb)
-      // assert(record.item ==  _head.item ||
-      //       record.item is num && record.item.isNaN && _head.item is num && _head.item.isNaN);
-      this._tail._nextDup = record;
-      record._prevDup = this._tail;
-      record._nextDup = null;
-      this._tail = record;
-    }
-  }
-
-  // Returns a CollectionChangeRecord having CollectionChangeRecord.item == item and
-  // CollectionChangeRecord.currentIndex >= afterIndex
-  get(item, afterIndex: int): CollectionChangeRecord {
-    var record: CollectionChangeRecord;
-    for (record = this._head; record !== null; record = record._nextDup) {
-      if ((afterIndex === null || afterIndex < record.currentIndex) &&
-          looseIdentical(record.item, item)) {
-        return record;
-      }
-    }
-    return null;
-  }
-
-  /**
-   * Remove one {@link CollectionChangeRecord} from the list of duplicates.
-   *
-   * Returns whether the list of duplicates is empty.
-   */
-  remove(record: CollectionChangeRecord): boolean {
-    // todo(vicb)
-    // assert(() {
-    //  // verify that the record being removed is in the list.
-    //  for (CollectionChangeRecord cursor = _head; cursor != null; cursor = cursor._nextDup) {
-    //    if (identical(cursor, record)) return true;
-    //  }
-    //  return false;
-    //});
-
-    var prev: CollectionChangeRecord = record._prevDup;
-    var next: CollectionChangeRecord = record._nextDup;
-    if (prev === null) {
-      this._head = next;
-    } else {
-      prev._nextDup = next;
-    }
-    if (next === null) {
-      this._tail = prev;
-    } else {
-      next._prevDup = prev;
-    }
-    return this._head === null;
-  }
-}
-
-class _DuplicateMap {
-  map: Map<any, _DuplicateItemRecordList> = new Map();
-
-  put(record: CollectionChangeRecord) {
-    // todo(vicb) handle corner cases
-    var key = getMapKey(record.item);
-
-    var duplicates = this.map.get(key);
-    if (!isPresent(duplicates)) {
-      duplicates = new _DuplicateItemRecordList();
-      this.map.set(key, duplicates);
-    }
-    duplicates.add(record);
-  }
-
-  /**
-   * Retrieve the `value` using key. Because the CollectionChangeRecord value maybe one which we
-   * have already iterated over, we use the afterIndex 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.
-   */
-  get(value, afterIndex = null): CollectionChangeRecord {
-    var key = getMapKey(value);
-
-    var recordList = this.map.get(key);
-    return isBlank(recordList) ? null : recordList.get(value, afterIndex);
-  }
-
-  /**
-   * Removes a {@link CollectionChangeRecord} from the list of duplicates.
-   *
-   * The list of duplicates also is removed from the map if it gets empty.
-   */
-  remove(record: CollectionChangeRecord): CollectionChangeRecord {
-    var key = getMapKey(record.item);
-    // todo(vicb)
-    // assert(this.map.containsKey(key));
-    var recordList: _DuplicateItemRecordList = this.map.get(key);
-    // Remove the list of duplicates when it gets empty
-    if (recordList.remove(record)) {
-      MapWrapper.delete(this.map, key);
-    }
-    return record;
-  }
-
-  get isEmpty(): boolean { return MapWrapper.size(this.map) === 0; }
-
-  clear() { this.map.clear(); }
-
-  toString(): string { return '_DuplicateMap(' + stringify(this.map) + ')'; }
-}
diff --git a/modules/angular2/src/change_detection/pipes/json_pipe.ts b/modules/angular2/src/change_detection/pipes/json_pipe.ts
deleted file mode 100644
index de5b8533b4b4..000000000000
--- a/modules/angular2/src/change_detection/pipes/json_pipe.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {isBlank, isPresent, Json, CONST} from 'angular2/src/facade/lang';
-import {Pipe, BasePipe, PipeFactory} from './pipe';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
-/**
- * Implements json transforms to any object.
- *
- * # Example
- *
- * In this example we transform the user object to json.
- *
- *  ```
- * @Component({
- *   selector: "user-cmp"
- * })
- * @View({
- *   template: "User: {{ user | json }}"
- * })
- * class Username {
- *  user:Object
- *  constructor() {
- *    this.user = { name: "PatrickJS" };
- *  }
- * }
- *
- * ```
- *
- * @exportedAs angular2/pipes
- */
-@CONST()
-export class JsonPipe extends BasePipe implements PipeFactory {
-  transform(value, args: List<any> = null): string { return Json.stringify(value); }
-
-  create(cdRef: ChangeDetectorRef): Pipe { return this }
-}
diff --git a/modules/angular2/src/change_detection/pipes/keyvalue_changes.ts b/modules/angular2/src/change_detection/pipes/keyvalue_changes.ts
deleted file mode 100644
index 16be78b276f3..000000000000
--- a/modules/angular2/src/change_detection/pipes/keyvalue_changes.ts
+++ /dev/null
@@ -1,353 +0,0 @@
-import {ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {stringify, looseIdentical, isJsObject, CONST} from 'angular2/src/facade/lang';
-import {ChangeDetectorRef} from '../change_detector_ref';
-import {WrappedValue, BasePipe, Pipe, PipeFactory} from './pipe';
-
-/**
- * @exportedAs angular2/pipes
- */
-@CONST()
-export class KeyValueChangesFactory implements PipeFactory {
-  supports(obj): boolean { return KeyValueChanges.supportsObj(obj); }
-
-  create(cdRef: ChangeDetectorRef): Pipe { return new KeyValueChanges(); }
-}
-
-/**
- * @exportedAs angular2/pipes
- */
-export class KeyValueChanges extends BasePipe {
-  private _records: Map<any, any> = new Map();
-  private _mapHead: KVChangeRecord = null;
-  private _previousMapHead: KVChangeRecord = null;
-  private _changesHead: KVChangeRecord = null;
-  private _changesTail: KVChangeRecord = null;
-  private _additionsHead: KVChangeRecord = null;
-  private _additionsTail: KVChangeRecord = null;
-  private _removalsHead: KVChangeRecord = null;
-  private _removalsTail: KVChangeRecord = null;
-
-  static supportsObj(obj): boolean { return obj instanceof Map || isJsObject(obj); }
-
-  supports(obj): boolean { return KeyValueChanges.supportsObj(obj); }
-
-  transform(map, args: List<any> = null): any {
-    if (this.check(map)) {
-      return WrappedValue.wrap(this);
-    } else {
-      return null;
-    }
-  }
-
-  get isDirty(): boolean {
-    return this._additionsHead !== null || this._changesHead !== null ||
-           this._removalsHead !== null;
-  }
-
-  forEachItem(fn: Function) {
-    var record: KVChangeRecord;
-    for (record = this._mapHead; record !== null; record = record._next) {
-      fn(record);
-    }
-  }
-
-  forEachPreviousItem(fn: Function) {
-    var record: KVChangeRecord;
-    for (record = this._previousMapHead; record !== null; record = record._nextPrevious) {
-      fn(record);
-    }
-  }
-
-  forEachChangedItem(fn: Function) {
-    var record: KVChangeRecord;
-    for (record = this._changesHead; record !== null; record = record._nextChanged) {
-      fn(record);
-    }
-  }
-
-  forEachAddedItem(fn: Function) {
-    var record: KVChangeRecord;
-    for (record = this._additionsHead; record !== null; record = record._nextAdded) {
-      fn(record);
-    }
-  }
-
-  forEachRemovedItem(fn: Function) {
-    var record: KVChangeRecord;
-    for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
-      fn(record);
-    }
-  }
-
-  check(map): boolean {
-    this._reset();
-    var records = this._records;
-    var oldSeqRecord: KVChangeRecord = this._mapHead;
-    var lastOldSeqRecord: KVChangeRecord = null;
-    var lastNewSeqRecord: KVChangeRecord = null;
-    var seqChanged: boolean = false;
-
-    this._forEach(map, (value, key) => {
-      var newSeqRecord;
-      if (oldSeqRecord !== null && key === oldSeqRecord.key) {
-        newSeqRecord = oldSeqRecord;
-        if (!looseIdentical(value, oldSeqRecord.currentValue)) {
-          oldSeqRecord.previousValue = oldSeqRecord.currentValue;
-          oldSeqRecord.currentValue = value;
-          this._addToChanges(oldSeqRecord);
-        }
-      } else {
-        seqChanged = true;
-        if (oldSeqRecord !== null) {
-          oldSeqRecord._next = null;
-          this._removeFromSeq(lastOldSeqRecord, oldSeqRecord);
-          this._addToRemovals(oldSeqRecord);
-        }
-        if (records.has(key)) {
-          newSeqRecord = records.get(key);
-        } else {
-          newSeqRecord = new KVChangeRecord(key);
-          records.set(key, newSeqRecord);
-          newSeqRecord.currentValue = value;
-          this._addToAdditions(newSeqRecord);
-        }
-      }
-
-      if (seqChanged) {
-        if (this._isInRemovals(newSeqRecord)) {
-          this._removeFromRemovals(newSeqRecord);
-        }
-        if (lastNewSeqRecord == null) {
-          this._mapHead = newSeqRecord;
-        } else {
-          lastNewSeqRecord._next = newSeqRecord;
-        }
-      }
-      lastOldSeqRecord = oldSeqRecord;
-      lastNewSeqRecord = newSeqRecord;
-      oldSeqRecord = oldSeqRecord === null ? null : oldSeqRecord._next;
-    });
-    this._truncate(lastOldSeqRecord, oldSeqRecord);
-    return this.isDirty;
-  }
-
-  _reset() {
-    if (this.isDirty) {
-      var record: KVChangeRecord;
-      // Record the state of the mapping
-      for (record = this._previousMapHead = this._mapHead; record !== null; record = record._next) {
-        record._nextPrevious = record._next;
-      }
-
-      for (record = this._changesHead; record !== null; record = record._nextChanged) {
-        record.previousValue = record.currentValue;
-      }
-
-      for (record = this._additionsHead; record != null; record = record._nextAdded) {
-        record.previousValue = record.currentValue;
-      }
-
-      // todo(vicb) once assert is supported
-      // assert(() {
-      //  var r = _changesHead;
-      //  while (r != null) {
-      //    var nextRecord = r._nextChanged;
-      //    r._nextChanged = null;
-      //    r = nextRecord;
-      //  }
-      //
-      //  r = _additionsHead;
-      //  while (r != null) {
-      //    var nextRecord = r._nextAdded;
-      //    r._nextAdded = null;
-      //    r = nextRecord;
-      //  }
-      //
-      //  r = _removalsHead;
-      //  while (r != null) {
-      //    var nextRecord = r._nextRemoved;
-      //    r._nextRemoved = null;
-      //    r = nextRecord;
-      //  }
-      //
-      //  return true;
-      //});
-      this._changesHead = this._changesTail = null;
-      this._additionsHead = this._additionsTail = null;
-      this._removalsHead = this._removalsTail = null;
-    }
-  }
-
-  _truncate(lastRecord: KVChangeRecord, record: KVChangeRecord) {
-    while (record !== null) {
-      if (lastRecord === null) {
-        this._mapHead = null;
-      } else {
-        lastRecord._next = null;
-      }
-      var nextRecord = record._next;
-      // todo(vicb) assert
-      // assert((() {
-      //  record._next = null;
-      //  return true;
-      //}));
-      this._addToRemovals(record);
-      lastRecord = record;
-      record = nextRecord;
-    }
-
-    for (var rec: KVChangeRecord = this._removalsHead; rec !== null; rec = rec._nextRemoved) {
-      rec.previousValue = rec.currentValue;
-      rec.currentValue = null;
-      MapWrapper.delete(this._records, rec.key);
-    }
-  }
-
-  _isInRemovals(record: KVChangeRecord) {
-    return record === this._removalsHead || record._nextRemoved !== null ||
-           record._prevRemoved !== null;
-  }
-
-  _addToRemovals(record: KVChangeRecord) {
-    // todo(vicb) assert
-    // assert(record._next == null);
-    // assert(record._nextAdded == null);
-    // assert(record._nextChanged == null);
-    // assert(record._nextRemoved == null);
-    // assert(record._prevRemoved == null);
-    if (this._removalsHead === null) {
-      this._removalsHead = this._removalsTail = record;
-    } else {
-      this._removalsTail._nextRemoved = record;
-      record._prevRemoved = this._removalsTail;
-      this._removalsTail = record;
-    }
-  }
-
-  _removeFromSeq(prev: KVChangeRecord, record: KVChangeRecord) {
-    var next = record._next;
-    if (prev === null) {
-      this._mapHead = next;
-    } else {
-      prev._next = next;
-    }
-    // todo(vicb) assert
-    // assert((() {
-    //  record._next = null;
-    //  return true;
-    //})());
-  }
-
-  _removeFromRemovals(record: KVChangeRecord) {
-    // todo(vicb) assert
-    // assert(record._next == null);
-    // assert(record._nextAdded == null);
-    // assert(record._nextChanged == null);
-
-    var prev = record._prevRemoved;
-    var next = record._nextRemoved;
-    if (prev === null) {
-      this._removalsHead = next;
-    } else {
-      prev._nextRemoved = next;
-    }
-    if (next === null) {
-      this._removalsTail = prev;
-    } else {
-      next._prevRemoved = prev;
-    }
-    record._prevRemoved = record._nextRemoved = null;
-  }
-
-  _addToAdditions(record: KVChangeRecord) {
-    // todo(vicb): assert
-    // assert(record._next == null);
-    // assert(record._nextAdded == null);
-    // assert(record._nextChanged == null);
-    // assert(record._nextRemoved == null);
-    // assert(record._prevRemoved == null);
-    if (this._additionsHead === null) {
-      this._additionsHead = this._additionsTail = record;
-    } else {
-      this._additionsTail._nextAdded = record;
-      this._additionsTail = record;
-    }
-  }
-
-  _addToChanges(record: KVChangeRecord) {
-    // todo(vicb) assert
-    // assert(record._nextAdded == null);
-    // assert(record._nextChanged == null);
-    // assert(record._nextRemoved == null);
-    // assert(record._prevRemoved == null);
-    if (this._changesHead === null) {
-      this._changesHead = this._changesTail = record;
-    } else {
-      this._changesTail._nextChanged = record;
-      this._changesTail = record;
-    }
-  }
-
-  toString(): string {
-    var items = [];
-    var previous = [];
-    var changes = [];
-    var additions = [];
-    var removals = [];
-    var record: KVChangeRecord;
-
-    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";
-  }
-
-  _forEach(obj, fn: Function) {
-    if (obj instanceof Map) {
-      MapWrapper.forEach(obj, fn);
-    } else {
-      StringMapWrapper.forEach(obj, fn);
-    }
-  }
-}
-
-
-
-/**
- * @exportedAs angular2/pipes
- */
-export class KVChangeRecord {
-  previousValue: any = null;
-  currentValue: any = null;
-
-  _nextPrevious: KVChangeRecord = null;
-  _next: KVChangeRecord = null;
-  _nextAdded: KVChangeRecord = null;
-  _nextRemoved: KVChangeRecord = null;
-  _prevRemoved: KVChangeRecord = null;
-  _nextChanged: KVChangeRecord = null;
-
-  constructor(public key: any) {}
-
-  toString(): string {
-    return looseIdentical(this.previousValue, this.currentValue) ?
-               stringify(this.key) :
-               (stringify(this.key) + '[' + stringify(this.previousValue) + '->' +
-                stringify(this.currentValue) + ']');
-  }
-}
diff --git a/modules/angular2/src/change_detection/pipes/limit_to_pipe.ts b/modules/angular2/src/change_detection/pipes/limit_to_pipe.ts
deleted file mode 100644
index f79e95047ff6..000000000000
--- a/modules/angular2/src/change_detection/pipes/limit_to_pipe.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-  isBlank,
-  isString,
-  isArray,
-  StringWrapper,
-  BaseException,
-  CONST
-} from 'angular2/src/facade/lang';
-import {ListWrapper} from 'angular2/src/facade/collection';
-import {Math} from 'angular2/src/facade/math';
-import {WrappedValue, Pipe, PipeFactory} from './pipe';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
-/**
- * Creates a new List or String containing only a prefix/suffix of the
- * elements.
- *
- * The number of elements to return is specified by the `limitTo` parameter.
- *
- * # Usage
- *
- *     expression | limitTo:number
- *
- * Where the input expression is a [List] or [String], and `limitTo` is:
- *
- * - **a positive integer**: return _number_ items from the beginning of the list or string
- * expression.
- * - **a negative integer**: return _number_ items from the end of the list or string expression.
- * - **`|limitTo|` greater than the size of the expression**: return the entire expression.
- *
- * When operating on a [List], the returned list is always a copy even when all
- * the elements are being returned.
- *
- * # Examples
- *
- * ## List Example
- *
- * Assuming `var collection = ['a', 'b', 'c']`, this `ng-for` directive:
- *
- *     <li *ng-for="var i in collection | limitTo:2">{{i}}</li>
- *
- * produces the following:
- *
- *     <li>a</li>
- *     <li>b</li>
- *
- * ## String Examples
- *
- *     {{ 'abcdefghij' | limitTo: 4 }}       // output is 'abcd'
- *     {{ 'abcdefghij' | limitTo: -4 }}      // output is 'ghij'
- *     {{ 'abcdefghij' | limitTo: -100 }}    // output is 'abcdefghij'
- *
- * @exportedAs angular2/pipes
- */
-export class LimitToPipe implements Pipe {
-  static supportsObj(obj): boolean { return isString(obj) || isArray(obj); }
-
-  supports(obj): boolean { return LimitToPipe.supportsObj(obj); }
-
-  transform(value, args: List<any> = null): any {
-    if (isBlank(args) || args.length == 0) {
-      throw new BaseException('limitTo pipe requires one argument');
-    }
-    var limit: int = args[0];
-    var left = 0, right = Math.min(limit, value.length);
-    if (limit < 0) {
-      left = Math.max(0, value.length + limit);
-      right = value.length;
-    }
-    if (isString(value)) {
-      return StringWrapper.substring(value, left, right);
-    }
-    return ListWrapper.slice(value, left, right);
-  }
-
-  onDestroy(): void {}
-}
-
-/**
- * @exportedAs angular2/pipes
- */
-@CONST()
-export class LimitToPipeFactory implements PipeFactory {
-  supports(obj): boolean { return LimitToPipe.supportsObj(obj); }
-
-  create(cdRef: ChangeDetectorRef): Pipe { return new LimitToPipe(); }
-}
diff --git a/modules/angular2/src/change_detection/pipes/lowercase_pipe.ts b/modules/angular2/src/change_detection/pipes/lowercase_pipe.ts
deleted file mode 100644
index 7684e4d4e6df..000000000000
--- a/modules/angular2/src/change_detection/pipes/lowercase_pipe.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {isString, StringWrapper, CONST} from 'angular2/src/facade/lang';
-import {Pipe, PipeFactory} from './pipe';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
-/**
- * Implements lowercase transforms to text.
- *
- * # Example
- *
- * In this example we transform the user text lowercase.
- *
- *  ```
- * @Component({
- *   selector: "username-cmp"
- * })
- * @View({
- *   template: "Username: {{ user | lowercase }}"
- * })
- * class Username {
- *   user:string;
- * }
- *
- * ```
- *
- * @exportedAs angular2/pipes
- */
-export class LowerCasePipe implements Pipe {
-  _latestValue: string = null;
-
-  supports(str): boolean { return isString(str); }
-
-  onDestroy(): void { this._latestValue = null; }
-
-  transform(value: string, args: List<any> = null): string {
-    if (this._latestValue !== value) {
-      this._latestValue = value;
-      return StringWrapper.toLowerCase(value);
-    } else {
-      return this._latestValue;
-    }
-  }
-}
-
-/**
- * @exportedAs angular2/pipes
- */
-@CONST()
-export class LowerCaseFactory implements PipeFactory {
-  supports(str): boolean { return isString(str); }
-
-  create(cdRef: ChangeDetectorRef): Pipe { return new LowerCasePipe(); }
-}
diff --git a/modules/angular2/src/change_detection/pipes/null_pipe.ts b/modules/angular2/src/change_detection/pipes/null_pipe.ts
deleted file mode 100644
index c14a711fecf6..000000000000
--- a/modules/angular2/src/change_detection/pipes/null_pipe.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import {isBlank, CONST} from 'angular2/src/facade/lang';
-import {Pipe, BasePipe, WrappedValue, PipeFactory} from './pipe';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
-/**
- * @exportedAs angular2/pipes
- */
-@CONST()
-export class NullPipeFactory implements PipeFactory {
-  supports(obj): boolean { return NullPipe.supportsObj(obj); }
-
-  create(cdRef: ChangeDetectorRef): Pipe { return new NullPipe(); }
-}
-
-/**
- * @exportedAs angular2/pipes
- */
-export class NullPipe extends BasePipe {
-  called: boolean = false;
-
-  static supportsObj(obj): boolean { return isBlank(obj); }
-
-  supports(obj): boolean { return NullPipe.supportsObj(obj); }
-
-  transform(value, args: List<any> = null): WrappedValue {
-    if (!this.called) {
-      this.called = true;
-      return WrappedValue.wrap(null);
-    } else {
-      return null;
-    }
-  }
-}
diff --git a/modules/angular2/src/change_detection/pipes/observable_pipe.ts b/modules/angular2/src/change_detection/pipes/observable_pipe.ts
deleted file mode 100644
index fb14b84b8030..000000000000
--- a/modules/angular2/src/change_detection/pipes/observable_pipe.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import {Observable, ObservableWrapper} from 'angular2/src/facade/async';
-import {isBlank, isPresent, CONST} from 'angular2/src/facade/lang';
-import {Pipe, WrappedValue, PipeFactory} from './pipe';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
-/**
- * Implements async bindings to Observable.
- *
- * # Example
- *
- * In this example we bind the description observable to the DOM. The async pipe will convert an
- *observable to the
- * latest value it emitted. It will also request a change detection check when a new value is
- *emitted.
- *
- *  ```
- * @Component({
- *   selector: "task-cmp",
- *   changeDetection: ON_PUSH
- * })
- * @View({
- *   template: "Task Description {{ description | async }}"
- * })
- * class Task {
- *  description:Observable<string>;
- * }
- *
- * ```
- *
- * @exportedAs angular2/pipes
- */
-export class ObservablePipe implements Pipe {
-  _latestValue: Object = null;
-  _latestReturnedValue: Object = null;
-
-  _subscription: Object = null;
-  _observable: Observable = null;
-
-  constructor(public _ref: ChangeDetectorRef) {}
-
-  supports(obs): boolean { return ObservableWrapper.isObservable(obs); }
-
-  onDestroy(): void {
-    if (isPresent(this._subscription)) {
-      this._dispose();
-    }
-  }
-
-  transform(obs: Observable, args: List<any> = null): any {
-    if (isBlank(this._subscription)) {
-      this._subscribe(obs);
-      return null;
-    }
-
-    if (obs !== this._observable) {
-      this._dispose();
-      return this.transform(obs);
-    }
-
-    if (this._latestValue === this._latestReturnedValue) {
-      return this._latestReturnedValue;
-    } else {
-      this._latestReturnedValue = this._latestValue;
-      return WrappedValue.wrap(this._latestValue);
-    }
-  }
-
-  _subscribe(obs: Observable): void {
-    this._observable = obs;
-    this._subscription = ObservableWrapper.subscribe(obs, value => {this._updateLatestValue(value)},
-                                                     e => { throw e; });
-  }
-
-  _dispose(): void {
-    ObservableWrapper.dispose(this._subscription);
-    this._latestValue = null;
-    this._latestReturnedValue = null;
-    this._subscription = null;
-    this._observable = null;
-  }
-
-  _updateLatestValue(value: Object) {
-    this._latestValue = value;
-    this._ref.requestCheck();
-  }
-}
-
-/**
- * Provides a factory for [ObervablePipe].
- *
- * @exportedAs angular2/pipes
- */
-@CONST()
-export class ObservablePipeFactory implements PipeFactory {
-  supports(obs): boolean { return ObservableWrapper.isObservable(obs); }
-
-  create(cdRef: ChangeDetectorRef): Pipe { return new ObservablePipe(cdRef); }
-}
diff --git a/modules/angular2/src/change_detection/pipes/pipe.ts b/modules/angular2/src/change_detection/pipes/pipe.ts
deleted file mode 100644
index 203947bd2706..000000000000
--- a/modules/angular2/src/change_detection/pipes/pipe.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {ABSTRACT, BaseException, CONST} from 'angular2/src/facade/lang';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
-/**
- * Indicates that the result of a {@link Pipe} transformation has changed even though the reference
- *has not changed.
- *
- * The wrapped value will be unwrapped by change detection, and the unwrapped value will be stored.
- *
- * @exportedAs angular2/pipes
- */
-export class WrappedValue {
-  constructor(public wrapped: any) {}
-
-  static wrap(value: any): WrappedValue {
-    var w = _wrappedValues[_wrappedIndex++ % 5];
-    w.wrapped = value;
-    return w;
-  }
-}
-
-var _wrappedValues = [
-  new WrappedValue(null),
-  new WrappedValue(null),
-  new WrappedValue(null),
-  new WrappedValue(null),
-  new WrappedValue(null)
-];
-
-var _wrappedIndex = 0;
-
-/**
- * An interface for extending the list of pipes known to Angular.
- *
- * If you are writing a custom {@link Pipe}, you must extend this interface.
- *
- * #Example
- *
- * ```
- * class DoublePipe implements Pipe {
- *  supports(obj) {
- *    return true;
- *  }
- *
- *  onDestroy() {}
- *
- *  transform(value, args = []) {
- *    return `${value}${value}`;
- *  }
- * }
- * ```
- *
- * @exportedAs angular2/pipes
- */
-export interface Pipe {
-  supports(obj): boolean;
-  onDestroy(): void;
-  transform(value: any, args: List<any>): any;
-}
-
-/**
- * Provides default implementation of supports and onDestroy.
- *
- * #Example
- *
- * ```
- * class DoublePipe extends BasePipe {*
- *  transform(value) {
- *    return `${value}${value}`;
- *  }
- * }
- * ```
- */
-@CONST()
-export class BasePipe implements Pipe {
-  supports(obj): boolean { return true; }
-  onDestroy(): void {}
-  transform(value: any, args: List<any>): any { return _abstract(); }
-}
-
-export interface PipeFactory {
-  supports(obs): boolean;
-  create(cdRef: ChangeDetectorRef): Pipe;
-}
-
-function _abstract() {
-  throw new BaseException('This method is abstract');
-}
diff --git a/modules/angular2/src/change_detection/pipes/pipe_registry.ts b/modules/angular2/src/change_detection/pipes/pipe_registry.ts
deleted file mode 100644
index ae9eeca173e6..000000000000
--- a/modules/angular2/src/change_detection/pipes/pipe_registry.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {isBlank, isPresent, BaseException, CONST} from 'angular2/src/facade/lang';
-import {Pipe, PipeFactory} from './pipe';
-import {Injectable} from 'angular2/src/di/decorators';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
-@Injectable()
-@CONST()
-export class PipeRegistry {
-  constructor(public config) {}
-
-  get(type: string, obj, cdRef?: ChangeDetectorRef, existingPipe?: Pipe): Pipe {
-    if (isPresent(existingPipe) && existingPipe.supports(obj)) return existingPipe;
-
-    if (isPresent(existingPipe)) existingPipe.onDestroy();
-
-    var factories = this._getListOfFactories(type, obj);
-    var factory = this._getMatchingFactory(factories, type, obj);
-
-    return factory.create(cdRef);
-  }
-
-  private _getListOfFactories(type: string, obj: any): PipeFactory[] {
-    var listOfFactories = this.config[type];
-    if (isBlank(listOfFactories)) {
-      throw new BaseException(`Cannot find '${type}' pipe supporting object '${obj}'`);
-    }
-    return listOfFactories;
-  }
-
-  private _getMatchingFactory(listOfFactories: PipeFactory[], type: string, obj: any): PipeFactory {
-    var matchingFactory =
-        ListWrapper.find(listOfFactories, pipeFactory => pipeFactory.supports(obj));
-    if (isBlank(matchingFactory)) {
-      throw new BaseException(`Cannot find '${type}' pipe supporting object '${obj}'`);
-    }
-    return matchingFactory;
-  }
-}
diff --git a/modules/angular2/src/change_detection/pipes/promise_pipe.ts b/modules/angular2/src/change_detection/pipes/promise_pipe.ts
deleted file mode 100644
index 9c35e771ba89..000000000000
--- a/modules/angular2/src/change_detection/pipes/promise_pipe.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {isBlank, isPresent, isPromise, CONST} from 'angular2/src/facade/lang';
-import {Pipe, PipeFactory, WrappedValue} from './pipe';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
-/**
- * Implements async bindings to Promise.
- *
- * # Example
- *
- * In this example we bind the description promise to the DOM.
- * The async pipe will convert a promise to the value with which it is resolved. It will also
- * request a change detection check when the promise is resolved.
- *
- *  ```
- * @Component({
- *   selector: "task-cmp",
- *   changeDetection: ON_PUSH
- * })
- * @View({
- *   template: "Task Description {{ description | async }}"
- * })
- * class Task {
- *   description:Promise<string>;
- * }
- *
- * ```
- *
- * @exportedAs angular2/pipes
- */
-export class PromisePipe implements Pipe {
-  _latestValue: Object = null;
-  _latestReturnedValue: Object = null;
-  _sourcePromise: Promise<any>;
-
-  constructor(public _ref: ChangeDetectorRef) {}
-
-  supports(promise): boolean { return isPromise(promise); }
-
-  onDestroy(): void {
-    if (isPresent(this._sourcePromise)) {
-      this._latestValue = null;
-      this._latestReturnedValue = null;
-      this._sourcePromise = null;
-    }
-  }
-
-  transform(promise: Promise<any>, args: List<any> = null): any {
-    if (isBlank(this._sourcePromise)) {
-      this._sourcePromise = promise;
-      promise.then((val) => {
-        if (this._sourcePromise === promise) {
-          this._updateLatestValue(val);
-        }
-      });
-      return null;
-    }
-
-    if (promise !== this._sourcePromise) {
-      this._sourcePromise = null;
-      return this.transform(promise);
-    }
-
-    if (this._latestValue === this._latestReturnedValue) {
-      return this._latestReturnedValue;
-    } else {
-      this._latestReturnedValue = this._latestValue;
-      return WrappedValue.wrap(this._latestValue);
-    }
-  }
-
-  _updateLatestValue(value: Object) {
-    this._latestValue = value;
-    this._ref.requestCheck();
-  }
-}
-
-/**
- * Provides a factory for [PromisePipe].
- *
- * @exportedAs angular2/pipes
- */
-@CONST()
-export class PromisePipeFactory implements PipeFactory {
-  supports(promise): boolean { return isPromise(promise); }
-
-  create(cdRef: ChangeDetectorRef): Pipe { return new PromisePipe(cdRef); }
-}
diff --git a/modules/angular2/src/change_detection/pipes/uppercase_pipe.ts b/modules/angular2/src/change_detection/pipes/uppercase_pipe.ts
deleted file mode 100644
index ba9883ae4e7d..000000000000
--- a/modules/angular2/src/change_detection/pipes/uppercase_pipe.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {isString, StringWrapper, CONST} from 'angular2/src/facade/lang';
-import {Pipe, PipeFactory} from './pipe';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
-/**
- * Implements uppercase transforms to text.
- *
- * # Example
- *
- * In this example we transform the user text uppercase.
- *
- *  ```
- * @Component({
- *   selector: "username-cmp"
- * })
- * @View({
- *   template: "Username: {{ user | uppercase }}"
- * })
- * class Username {
- *   user:string;
- * }
- *
- * ```
- *
- * @exportedAs angular2/pipes
- */
-export class UpperCasePipe implements Pipe {
-  _latestValue: string = null;
-
-  supports(str): boolean { return isString(str); }
-
-  onDestroy(): void { this._latestValue = null; }
-
-  transform(value: string, args: List<any> = null): string {
-    if (this._latestValue !== value) {
-      this._latestValue = value;
-      return StringWrapper.toUpperCase(value);
-    } else {
-      return this._latestValue;
-    }
-  }
-}
-
-/**
- * @exportedAs angular2/pipes
- */
-@CONST()
-export class UpperCaseFactory implements PipeFactory {
-  supports(str): boolean { return isString(str); }
-
-  create(cdRef: ChangeDetectorRef): Pipe { return new UpperCasePipe(); }
-}
diff --git a/modules/angular2/src/change_detection/pregen_proto_change_detector.dart b/modules/angular2/src/change_detection/pregen_proto_change_detector.dart
deleted file mode 100644
index 51dac4b28f10..000000000000
--- a/modules/angular2/src/change_detection/pregen_proto_change_detector.dart
+++ /dev/null
@@ -1,72 +0,0 @@
-library angular2.src.change_detection.pregen_proto_change_detector;
-
-import 'package:angular2/src/change_detection/coalesce.dart';
-import 'package:angular2/src/change_detection/directive_record.dart';
-import 'package:angular2/src/change_detection/interfaces.dart';
-import 'package:angular2/src/change_detection/pipes/pipe_registry.dart';
-import 'package:angular2/src/change_detection/proto_change_detector.dart';
-import 'package:angular2/src/change_detection/proto_record.dart';
-
-export 'dart:core' show List;
-export 'package:angular2/src/change_detection/abstract_change_detector.dart'
-    show AbstractChangeDetector;
-export 'package:angular2/src/change_detection/change_detection.dart'
-    show preGeneratedProtoDetectors;
-export 'package:angular2/src/change_detection/directive_record.dart'
-    show DirectiveIndex, DirectiveRecord;
-export 'package:angular2/src/change_detection/interfaces.dart'
-    show ChangeDetector, ChangeDetectorDefinition, ProtoChangeDetector;
-export 'package:angular2/src/change_detection/pipes/pipe_registry.dart'
-    show PipeRegistry;
-export 'package:angular2/src/change_detection/proto_record.dart'
-    show ProtoRecord;
-export 'package:angular2/src/change_detection/change_detection_util.dart'
-    show ChangeDetectionUtil;
-export 'package:angular2/src/facade/lang.dart' show looseIdentical;
-
-typedef ProtoChangeDetector PregenProtoChangeDetectorFactory(
-    PipeRegistry registry, ChangeDetectorDefinition definition);
-
-typedef ChangeDetector InstantiateMethod(dynamic dispatcher,
-    PipeRegistry registry, List<ProtoRecord> protoRecords,
-    List<DirectiveRecord> directiveRecords);
-
-/// Implementation of [ProtoChangeDetector] for use by pre-generated change
-/// detectors in Angular 2 Dart.
-/// Classes generated by the `TemplateCompiler` use this. The `export`s above
-/// allow the generated code to `import` a single library and get all
-/// dependencies.
-class PregenProtoChangeDetector extends ProtoChangeDetector {
-  /// The [ChangeDetectorDefinition#id]. Strictly informational.
-  final String id;
-
-  /// Closure used to generate an actual [ChangeDetector].
-  final InstantiateMethod _instantiateMethod;
-
-  // [ChangeDetector] dependencies.
-  final PipeRegistry _pipeRegistry;
-  final List<ProtoRecord> _protoRecords;
-  final List<DirectiveRecord> _directiveRecords;
-
-  /// Internal ctor.
-  PregenProtoChangeDetector._(this.id, this._instantiateMethod,
-      this._pipeRegistry, this._protoRecords, this._directiveRecords);
-
-  static bool isSupported() => true;
-
-  factory PregenProtoChangeDetector(InstantiateMethod instantiateMethod,
-      PipeRegistry registry, ChangeDetectorDefinition def) {
-    // TODO(kegluneq): Pre-generate these (#2067).
-    var recordBuilder = new ProtoRecordBuilder();
-    def.bindingRecords.forEach((b) {
-      recordBuilder.add(b, def.variableNames);
-    });
-    var protoRecords = coalesce(recordBuilder.records);
-    return new PregenProtoChangeDetector._(def.id, instantiateMethod, registry,
-        protoRecords, def.directiveRecords);
-  }
-
-  @override
-  instantiate(dynamic dispatcher) => _instantiateMethod(
-      dispatcher, _pipeRegistry, _protoRecords, _directiveRecords);
-}
diff --git a/modules/angular2/src/change_detection/pregen_proto_change_detector.ts b/modules/angular2/src/change_detection/pregen_proto_change_detector.ts
deleted file mode 100644
index 52df89cb0242..000000000000
--- a/modules/angular2/src/change_detection/pregen_proto_change_detector.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {BaseException} from 'angular2/src/facade/lang';
-
-import {ProtoChangeDetector, ChangeDetector} from './interfaces';
-import {coalesce} from './coalesce';
-
-export {Function as PregenProtoChangeDetectorFactory};
-
-export class PregenProtoChangeDetector implements ProtoChangeDetector {
-  static isSupported(): boolean { return false; }
-
-  instantiate(dispatcher: any): ChangeDetector {
-    throw new BaseException('Pregen change detection not supported in Js');
-  }
-}
diff --git a/modules/angular2/src/change_detection/proto_change_detector.ts b/modules/angular2/src/change_detection/proto_change_detector.ts
deleted file mode 100644
index 4330a7fc426f..000000000000
--- a/modules/angular2/src/change_detection/proto_change_detector.ts
+++ /dev/null
@@ -1,377 +0,0 @@
-import {BaseException, Type, isBlank, isPresent, isString} from 'angular2/src/facade/lang';
-import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-
-import {
-  AccessMember,
-  Assignment,
-  AST,
-  ASTWithSource,
-  AstVisitor,
-  Binary,
-  Chain,
-  Conditional,
-  If,
-  BindingPipe,
-  FunctionCall,
-  ImplicitReceiver,
-  Interpolation,
-  KeyedAccess,
-  LiteralArray,
-  LiteralMap,
-  LiteralPrimitive,
-  MethodCall,
-  PrefixNot,
-  SafeAccessMember,
-  SafeMethodCall
-} from './parser/ast';
-
-import {ChangeDetector, ProtoChangeDetector, ChangeDetectorDefinition} from './interfaces';
-import {ChangeDetectionUtil} from './change_detection_util';
-import {DynamicChangeDetector} from './dynamic_change_detector';
-import {PipeRegistry} from './pipes/pipe_registry';
-import {BindingRecord} from './binding_record';
-import {DirectiveRecord, DirectiveIndex} from './directive_record';
-
-import {coalesce} from './coalesce';
-
-import {ProtoRecord, RecordType} from './proto_record';
-
-export class DynamicProtoChangeDetector implements ProtoChangeDetector {
-  _records: List<ProtoRecord>;
-
-  constructor(private _pipeRegistry: PipeRegistry, private definition: ChangeDetectorDefinition) {
-    this._records = this._createRecords(definition);
-  }
-
-  instantiate(dispatcher: any): ChangeDetector {
-    return new DynamicChangeDetector(this.definition.id, this.definition.strategy, dispatcher,
-                                     this._pipeRegistry, this._records,
-                                     this.definition.directiveRecords);
-  }
-
-  _createRecords(definition: ChangeDetectorDefinition) {
-    var recordBuilder = new ProtoRecordBuilder();
-    ListWrapper.forEach(definition.bindingRecords,
-                        (b) => { recordBuilder.add(b, definition.variableNames); });
-    return coalesce(recordBuilder.records);
-  }
-}
-
-export class ProtoRecordBuilder {
-  records: List<ProtoRecord>;
-
-  constructor() { this.records = []; }
-
-  add(b: BindingRecord, variableNames: List<string> = null) {
-    var oldLast = ListWrapper.last(this.records);
-    if (isPresent(oldLast) && oldLast.bindingRecord.directiveRecord == b.directiveRecord) {
-      oldLast.lastInDirective = false;
-    }
-    this._appendRecords(b, variableNames);
-    var newLast = ListWrapper.last(this.records);
-    if (isPresent(newLast) && newLast !== oldLast) {
-      newLast.lastInBinding = true;
-      newLast.lastInDirective = true;
-    }
-  }
-
-  _appendRecords(b: BindingRecord, variableNames: List<string>) {
-    if (b.isDirectiveLifecycle()) {
-      this.records.push(new ProtoRecord(RecordType.DIRECTIVE_LIFECYCLE, b.lifecycleEvent, null, [],
-                                        [], -1, null, this.records.length + 1, b, null, false,
-                                        false));
-    } else {
-      _ConvertAstIntoProtoRecords.append(this.records, b, variableNames);
-    }
-  }
-}
-
-class _ConvertAstIntoProtoRecords implements AstVisitor {
-  constructor(private _records: List<ProtoRecord>, private _bindingRecord: BindingRecord,
-              private _expressionAsString: string, private _variableNames: List<any>) {}
-
-  static append(records: List<ProtoRecord>, b: BindingRecord, variableNames: List<any>) {
-    var c = new _ConvertAstIntoProtoRecords(records, b, b.ast.toString(), variableNames);
-    b.ast.visit(c);
-  }
-
-  visitImplicitReceiver(ast: ImplicitReceiver): any { return this._bindingRecord.implicitReceiver; }
-
-  visitInterpolation(ast: Interpolation): number {
-    var args = this._visitAll(ast.expressions);
-    return this._addRecord(RecordType.INTERPOLATE, "interpolate", _interpolationFn(ast.strings),
-                           args, ast.strings, 0);
-  }
-
-  visitLiteralPrimitive(ast: LiteralPrimitive): number {
-    return this._addRecord(RecordType.CONST, "literal", ast.value, [], null, 0);
-  }
-
-  visitAccessMember(ast: AccessMember): number {
-    var receiver = ast.receiver.visit(this);
-    if (isPresent(this._variableNames) && ListWrapper.contains(this._variableNames, ast.name) &&
-            ast.receiver instanceof
-            ImplicitReceiver) {
-      return this._addRecord(RecordType.LOCAL, ast.name, ast.name, [], null, receiver);
-    } else {
-      return this._addRecord(RecordType.PROPERTY, ast.name, ast.getter, [], null, receiver);
-    }
-  }
-
-  visitSafeAccessMember(ast: SafeAccessMember): number {
-    var receiver = ast.receiver.visit(this);
-    return this._addRecord(RecordType.SAFE_PROPERTY, ast.name, ast.getter, [], null, receiver);
-  }
-
-  visitMethodCall(ast: MethodCall): number {
-    var receiver = ast.receiver.visit(this);
-    var args = this._visitAll(ast.args);
-    if (isPresent(this._variableNames) && ListWrapper.contains(this._variableNames, ast.name)) {
-      var target = this._addRecord(RecordType.LOCAL, ast.name, ast.name, [], null, receiver);
-      return this._addRecord(RecordType.INVOKE_CLOSURE, "closure", null, args, null, target);
-    } else {
-      return this._addRecord(RecordType.INVOKE_METHOD, ast.name, ast.fn, args, null, receiver);
-    }
-  }
-
-  visitSafeMethodCall(ast: SafeMethodCall): number {
-    var receiver = ast.receiver.visit(this);
-    var args = this._visitAll(ast.args);
-    return this._addRecord(RecordType.SAFE_INVOKE_METHOD, ast.name, ast.fn, args, null, receiver);
-  }
-
-  visitFunctionCall(ast: FunctionCall): number {
-    var target = ast.target.visit(this);
-    var args = this._visitAll(ast.args);
-    return this._addRecord(RecordType.INVOKE_CLOSURE, "closure", null, args, null, target);
-  }
-
-  visitLiteralArray(ast: LiteralArray): number {
-    var primitiveName = `arrayFn${ast.expressions.length}`;
-    return this._addRecord(RecordType.PRIMITIVE_OP, primitiveName, _arrayFn(ast.expressions.length),
-                           this._visitAll(ast.expressions), null, 0);
-  }
-
-  visitLiteralMap(ast: LiteralMap): number {
-    return this._addRecord(RecordType.PRIMITIVE_OP, _mapPrimitiveName(ast.keys),
-                           ChangeDetectionUtil.mapFn(ast.keys), this._visitAll(ast.values), null,
-                           0);
-  }
-
-  visitBinary(ast: Binary): number {
-    var left = ast.left.visit(this);
-    var right = ast.right.visit(this);
-    return this._addRecord(RecordType.PRIMITIVE_OP, _operationToPrimitiveName(ast.operation),
-                           _operationToFunction(ast.operation), [left, right], null, 0);
-  }
-
-  visitPrefixNot(ast: PrefixNot): number {
-    var exp = ast.expression.visit(this);
-    return this._addRecord(RecordType.PRIMITIVE_OP, "operation_negate",
-                           ChangeDetectionUtil.operation_negate, [exp], null, 0);
-  }
-
-  visitConditional(ast: Conditional): number {
-    var c = ast.condition.visit(this);
-    var t = ast.trueExp.visit(this);
-    var f = ast.falseExp.visit(this);
-    return this._addRecord(RecordType.PRIMITIVE_OP, "cond", ChangeDetectionUtil.cond, [c, t, f],
-                           null, 0);
-  }
-
-  visitPipe(ast: BindingPipe): number {
-    var value = ast.exp.visit(this);
-    var args = this._visitAll(ast.args);
-    return this._addRecord(RecordType.PIPE, ast.name, ast.name, args, null, value);
-  }
-
-  visitKeyedAccess(ast: KeyedAccess): number {
-    var obj = ast.obj.visit(this);
-    var key = ast.key.visit(this);
-    return this._addRecord(RecordType.KEYED_ACCESS, "keyedAccess", ChangeDetectionUtil.keyedAccess,
-                           [key], null, obj);
-  }
-
-  visitAssignment(ast: Assignment) { throw new BaseException('Not supported'); }
-
-  visitChain(ast: Chain) { throw new BaseException('Not supported'); }
-
-  visitIf(ast: If) { throw new BaseException('Not supported'); }
-
-  _visitAll(asts: List<any>) {
-    var res = ListWrapper.createFixedSize(asts.length);
-    for (var i = 0; i < asts.length; ++i) {
-      res[i] = asts[i].visit(this);
-    }
-    return res;
-  }
-
-  _addRecord(type, name, funcOrValue, args, fixedArgs, context) {
-    var selfIndex = this._records.length + 1;
-    if (context instanceof DirectiveIndex) {
-      this._records.push(new ProtoRecord(type, name, funcOrValue, args, fixedArgs, -1, context,
-                                         selfIndex, this._bindingRecord, this._expressionAsString,
-                                         false, false));
-    } else {
-      this._records.push(new ProtoRecord(type, name, funcOrValue, args, fixedArgs, context, null,
-                                         selfIndex, this._bindingRecord, this._expressionAsString,
-                                         false, false));
-    }
-    return selfIndex;
-  }
-}
-
-
-function _arrayFn(length: number): Function {
-  switch (length) {
-    case 0:
-      return ChangeDetectionUtil.arrayFn0;
-    case 1:
-      return ChangeDetectionUtil.arrayFn1;
-    case 2:
-      return ChangeDetectionUtil.arrayFn2;
-    case 3:
-      return ChangeDetectionUtil.arrayFn3;
-    case 4:
-      return ChangeDetectionUtil.arrayFn4;
-    case 5:
-      return ChangeDetectionUtil.arrayFn5;
-    case 6:
-      return ChangeDetectionUtil.arrayFn6;
-    case 7:
-      return ChangeDetectionUtil.arrayFn7;
-    case 8:
-      return ChangeDetectionUtil.arrayFn8;
-    case 9:
-      return ChangeDetectionUtil.arrayFn9;
-    default:
-      throw new BaseException(`Does not support literal maps with more than 9 elements`);
-  }
-}
-
-function _mapPrimitiveName(keys: List<any>) {
-  var stringifiedKeys =
-      ListWrapper.join(ListWrapper.map(keys, (k) => isString(k) ? `"${k}"` : `${k}`), ", ");
-  return `mapFn([${stringifiedKeys}])`;
-}
-
-function _operationToPrimitiveName(operation: string): string {
-  switch (operation) {
-    case '+':
-      return "operation_add";
-    case '-':
-      return "operation_subtract";
-    case '*':
-      return "operation_multiply";
-    case '/':
-      return "operation_divide";
-    case '%':
-      return "operation_remainder";
-    case '==':
-      return "operation_equals";
-    case '!=':
-      return "operation_not_equals";
-    case '===':
-      return "operation_identical";
-    case '!==':
-      return "operation_not_identical";
-    case '<':
-      return "operation_less_then";
-    case '>':
-      return "operation_greater_then";
-    case '<=':
-      return "operation_less_or_equals_then";
-    case '>=':
-      return "operation_greater_or_equals_then";
-    case '&&':
-      return "operation_logical_and";
-    case '||':
-      return "operation_logical_or";
-    default:
-      throw new BaseException(`Unsupported operation ${operation}`);
-  }
-}
-
-function _operationToFunction(operation: string): Function {
-  switch (operation) {
-    case '+':
-      return ChangeDetectionUtil.operation_add;
-    case '-':
-      return ChangeDetectionUtil.operation_subtract;
-    case '*':
-      return ChangeDetectionUtil.operation_multiply;
-    case '/':
-      return ChangeDetectionUtil.operation_divide;
-    case '%':
-      return ChangeDetectionUtil.operation_remainder;
-    case '==':
-      return ChangeDetectionUtil.operation_equals;
-    case '!=':
-      return ChangeDetectionUtil.operation_not_equals;
-    case '===':
-      return ChangeDetectionUtil.operation_identical;
-    case '!==':
-      return ChangeDetectionUtil.operation_not_identical;
-    case '<':
-      return ChangeDetectionUtil.operation_less_then;
-    case '>':
-      return ChangeDetectionUtil.operation_greater_then;
-    case '<=':
-      return ChangeDetectionUtil.operation_less_or_equals_then;
-    case '>=':
-      return ChangeDetectionUtil.operation_greater_or_equals_then;
-    case '&&':
-      return ChangeDetectionUtil.operation_logical_and;
-    case '||':
-      return ChangeDetectionUtil.operation_logical_or;
-    default:
-      throw new BaseException(`Unsupported operation ${operation}`);
-  }
-}
-
-function s(v): string {
-  return isPresent(v) ? `${v}` : '';
-}
-
-function _interpolationFn(strings: List<any>) {
-  var length = strings.length;
-  var c0 = length > 0 ? strings[0] : null;
-  var c1 = length > 1 ? strings[1] : null;
-  var c2 = length > 2 ? strings[2] : null;
-  var c3 = length > 3 ? strings[3] : null;
-  var c4 = length > 4 ? strings[4] : null;
-  var c5 = length > 5 ? strings[5] : null;
-  var c6 = length > 6 ? strings[6] : null;
-  var c7 = length > 7 ? strings[7] : null;
-  var c8 = length > 8 ? strings[8] : null;
-  var c9 = length > 9 ? strings[9] : null;
-  switch (length - 1) {
-    case 1:
-      return (a1) => c0 + s(a1) + c1;
-    case 2:
-      return (a1, a2) => c0 + s(a1) + c1 + s(a2) + c2;
-    case 3:
-      return (a1, a2, a3) => c0 + s(a1) + c1 + s(a2) + c2 + s(a3) + c3;
-    case 4:
-      return (a1, a2, a3, a4) => c0 + s(a1) + c1 + s(a2) + c2 + s(a3) + c3 + s(a4) + c4;
-    case 5:
-      return (a1, a2, a3, a4, a5) =>
-                 c0 + s(a1) + c1 + s(a2) + c2 + s(a3) + c3 + s(a4) + c4 + s(a5) + c5;
-    case 6:
-      return (a1, a2, a3, a4, a5, a6) =>
-                 c0 + s(a1) + c1 + s(a2) + c2 + s(a3) + c3 + s(a4) + c4 + s(a5) + c5 + s(a6) + c6;
-    case 7:
-      return (a1, a2, a3, a4, a5, a6, a7) => c0 + s(a1) + c1 + s(a2) + c2 + s(a3) + c3 + s(a4) +
-                                             c4 + s(a5) + c5 + s(a6) + c6 + s(a7) + c7;
-    case 8:
-      return (a1, a2, a3, a4, a5, a6, a7, a8) => c0 + s(a1) + c1 + s(a2) + c2 + s(a3) + c3 + s(a4) +
-                                                 c4 + s(a5) + c5 + s(a6) + c6 + s(a7) + c7 + s(a8) +
-                                                 c8;
-    case 9:
-      return (a1, a2, a3, a4, a5, a6, a7, a8, a9) => c0 + s(a1) + c1 + s(a2) + c2 + s(a3) + c3 +
-                                                     s(a4) + c4 + s(a5) + c5 + s(a6) + c6 + s(a7) +
-                                                     c7 + s(a8) + c8 + s(a9) + c9;
-    default:
-      throw new BaseException(`Does not support more than 9 expressions`);
-  }
-}
diff --git a/modules/angular2/src/change_detection/proto_record.ts b/modules/angular2/src/change_detection/proto_record.ts
deleted file mode 100644
index df6458cf84a1..000000000000
--- a/modules/angular2/src/change_detection/proto_record.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {List} from 'angular2/src/facade/collection';
-import {BindingRecord} from './binding_record';
-import {DirectiveIndex} from './directive_record';
-
-export enum RecordType {
-  SELF,
-  CONST,
-  PRIMITIVE_OP,
-  PROPERTY,
-  LOCAL,
-  INVOKE_METHOD,
-  INVOKE_CLOSURE,
-  KEYED_ACCESS,
-  PIPE,
-  INTERPOLATE,
-  SAFE_PROPERTY,
-  SAFE_INVOKE_METHOD,
-  DIRECTIVE_LIFECYCLE
-}
-
-export class ProtoRecord {
-  constructor(public mode: RecordType, public name: string, public funcOrValue,
-              public args: List<any>, public fixedArgs: List<any>, public contextIndex: number,
-              public directiveIndex: DirectiveIndex, public selfIndex: number,
-              public bindingRecord: BindingRecord, public expressionAsString: string,
-              public lastInBinding: boolean, public lastInDirective: boolean) {}
-
-  isPureFunction(): boolean {
-    return this.mode === RecordType.INTERPOLATE || this.mode === RecordType.PRIMITIVE_OP;
-  }
-
-  isPipeRecord(): boolean { return this.mode === RecordType.PIPE; }
-
-  isLifeCycleRecord(): boolean { return this.mode === RecordType.DIRECTIVE_LIFECYCLE; }
-}
diff --git a/modules/angular2/src/core/annotations/annotations.dart b/modules/angular2/src/core/annotations/annotations.dart
deleted file mode 100644
index cc4f68947dd5..000000000000
--- a/modules/angular2/src/core/annotations/annotations.dart
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * This indirection is needed for TS compilation path.
- * See comment in annotations.es6.
- */
-
-library angular2.core.annotations.annotations;
-
-export "../annotations_impl/annotations.dart";
diff --git a/modules/angular2/src/core/annotations/annotations.ts b/modules/angular2/src/core/annotations/annotations.ts
deleted file mode 100644
index 9663e31cc5a0..000000000000
--- a/modules/angular2/src/core/annotations/annotations.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * This indirection is needed to free up Component, etc symbols in the public API
- * to be used by the decorator versions of these annotations.
- */
-
-export {
-  Component as ComponentAnnotation,
-  Directive as DirectiveAnnotation,
-  ComponentArgs,
-  DirectiveArgs,
-  onDestroy,
-  onChange,
-  onCheck,
-  onInit,
-  onAllChangesDone
-} from '../annotations_impl/annotations';
diff --git a/modules/angular2/src/core/annotations/decorators.dart b/modules/angular2/src/core/annotations/decorators.dart
deleted file mode 100644
index f2976668a8dc..000000000000
--- a/modules/angular2/src/core/annotations/decorators.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library angular2.core.decorators;
-
-export '../annotations_impl/annotations.dart';
-export '../annotations_impl/view.dart';
-export '../annotations_impl/di.dart';
diff --git a/modules/angular2/src/core/annotations/decorators.ts b/modules/angular2/src/core/annotations/decorators.ts
deleted file mode 100644
index 7359ab518da6..000000000000
--- a/modules/angular2/src/core/annotations/decorators.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
-  ComponentAnnotation,
-  DirectiveAnnotation,
-  ComponentArgs,
-  DirectiveArgs
-} from './annotations';
-import {ViewAnnotation, ViewArgs} from './view';
-import {AttributeAnnotation, QueryAnnotation} from './di';
-import {makeDecorator, makeParamDecorator, TypeDecorator, Class} from '../../util/decorators';
-import {Type} from 'angular2/src/facade/lang';
-
-export interface DirectiveTypeDecorator extends TypeDecorator {}
-
-export interface ComponentTypeDecorator extends TypeDecorator {
-  View(obj: ViewArgs): ViewTypeDecorator;
-}
-
-export interface ViewTypeDecorator extends TypeDecorator { View(obj: ViewArgs): ViewTypeDecorator }
-
-export interface Directive {
-  (obj: DirectiveArgs): DirectiveTypeDecorator;
-  new (obj: DirectiveAnnotation): DirectiveAnnotation;
-}
-
-export interface Component {
-  (obj: ComponentArgs): ComponentTypeDecorator;
-  new (obj: ComponentAnnotation): ComponentAnnotation;
-}
-
-export interface View {
-  (obj: ViewArgs): ViewTypeDecorator;
-  new (obj: ViewArgs): ViewAnnotation;
-}
-
-
-/* from annotations */
-export var Component = <Component>makeDecorator(ComponentAnnotation, (fn: any) => fn.View = View);
-export var Directive = <Directive>makeDecorator(DirectiveAnnotation);
-
-/* from view */
-export var View = <View>makeDecorator(ViewAnnotation, (fn: any) => fn.View = View);
-
-/* from di */
-export var Attribute = makeParamDecorator(AttributeAnnotation);
-export var Query = makeParamDecorator(QueryAnnotation);
diff --git a/modules/angular2/src/core/annotations/di.dart b/modules/angular2/src/core/annotations/di.dart
deleted file mode 100644
index 8b182acb0d26..000000000000
--- a/modules/angular2/src/core/annotations/di.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library angular2.core.annotations.di;
-
-export "../annotations_impl/di.dart";
diff --git a/modules/angular2/src/core/annotations/di.ts b/modules/angular2/src/core/annotations/di.ts
deleted file mode 100644
index f72309786311..000000000000
--- a/modules/angular2/src/core/annotations/di.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export {
-  Query as QueryAnnotation,
-  Attribute as AttributeAnnotation,
-} from '../annotations_impl/di';
diff --git a/modules/angular2/src/core/annotations/view.dart b/modules/angular2/src/core/annotations/view.dart
deleted file mode 100644
index 30171a89dc86..000000000000
--- a/modules/angular2/src/core/annotations/view.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library angular2.core.annotations.view;
-
-export "../annotations_impl/view.dart";
diff --git a/modules/angular2/src/core/annotations/view.ts b/modules/angular2/src/core/annotations/view.ts
deleted file mode 100644
index 39e2ae0ac6e4..000000000000
--- a/modules/angular2/src/core/annotations/view.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {View as ViewAnnotation, ViewArgs} from '../annotations_impl/view';
diff --git a/modules/angular2/src/core/annotations_impl/annotations.ts b/modules/angular2/src/core/annotations_impl/annotations.ts
deleted file mode 100644
index e4a00276193a..000000000000
--- a/modules/angular2/src/core/annotations_impl/annotations.ts
+++ /dev/null
@@ -1,1070 +0,0 @@
-import {CONST, CONST_EXPR} from 'angular2/src/facade/lang';
-import {List} from 'angular2/src/facade/collection';
-import {Injectable, self} from 'angular2/src/di/annotations_impl';
-import {DEFAULT} from 'angular2/change_detection';
-
-// type StringMap = {[idx: string]: string};
-
-/**
- * Directives allow you to attach behavior to elements in the DOM.
- *
- * {@link Directive}s with an embedded view are called {@link Component}s.
- *
- * A directive consists of a single directive annotation and a controller class. When the
- * directive's `selector` matches
- * elements in the DOM, the following steps occur:
- *
- * 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor
- * arguments.
- * 2. Angular instantiates directives for each matched element using `ElementInjector` in a
- * depth-first order,
- *    as declared in the HTML.
- *
- * ## Understanding How Injection Works
- *
- * There are three stages of injection resolution.
- * - *Pre-existing Injectors*:
- *   - The terminal {@link Injector} cannot resolve dependencies. It either throws an error or, if
- * the dependency was
- *     specified as `@Optional`, returns `null`.
- *   - The platform injector resolves browser singleton resources, such as: cookies, title,
- * location, and others.
- * - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow
- * the same parent-child hierarchy
- *     as the component instances in the DOM.
- * - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each
- * element has an `ElementInjector`
- *     which follow the same parent-child hierarchy as the DOM elements themselves.
- *
- * When a template is instantiated, it also must instantiate the corresponding directives in a
- * depth-first order. The
- * current `ElementInjector` resolves the constructor dependencies for each directive.
- *
- * Angular then resolves dependencies as follows, according to the order in which they appear in the
- * {@link View}:
- *
- * 1. Dependencies on the current element
- * 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
- * 3. Dependencies on component injectors and their parents until it encounters the root component
- * 4. Dependencies on pre-existing injectors
- *
- *
- * The `ElementInjector` can inject other directives, element-specific special objects, or it can
- * delegate to the parent
- * injector.
- *
- * To inject other directives, declare the constructor parameter as:
- * - `directive:DirectiveType`: a directive on the current element only
- * - `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current
- * element and the
- *    Shadow DOM root. Current element is not included in the resolution, therefore even if it could
- * resolve it, it will
- *    be ignored.
- * - `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent
- * element only.
- * - `@Query(DirectiveType) query:QueryList<DirectiveType>`: A live collection of direct child
- * directives.
- * - `@QueryDescendants(DirectiveType) query:QueryList<DirectiveType>`: A live collection of any
- * child directives.
- *
- * To inject element-specific special objects, declare the constructor parameter as:
- * - `element: ElementRef` to obtain a reference to logical element in the view.
- * - `viewContainer: ViewContainerRef` to control child template instantiation, for
- * {@link Directive} directives only
- * - `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
- *
- * ## Example
- *
- * The following example demonstrates how dependency injection resolves constructor arguments in
- * practice.
- *
- *
- * Assume this HTML template:
- *
- * ```
- * <div dependency="1">
- *   <div dependency="2">
- *     <div dependency="3" my-directive>
- *       <div dependency="4">
- *         <div dependency="5"></div>
- *       </div>
- *       <div dependency="6"></div>
- *     </div>
- *   </div>
- * </div>
- * ```
- *
- * With the following `dependency` decorator and `SomeService` injectable class.
- *
- * ```
- * @Injectable()
- * class SomeService {
- * }
- *
- * @Directive({
- *   selector: '[dependency]',
- *   properties: [
- *     'id: dependency'
- *   ]
- * })
- * class Dependency {
- *   id:string;
- * }
- * ```
- *
- * Let's step through the different ways in which `MyDirective` could be declared...
- *
- *
- * ### No injection
- *
- * Here the constructor is declared with no arguments, therefore nothing is injected into
- * `MyDirective`.
- *
- * ```
- * @Directive({ selector: '[my-directive]' })
- * class MyDirective {
- *   constructor() {
- *   }
- * }
- * ```
- *
- * This directive would be instantiated with no dependencies.
- *
- *
- * ### Component-level injection
- *
- * Directives can inject any injectable instance from the closest component injector or any of its
- * parents.
- *
- * Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type
- * from the parent
- * component's injector.
- * ```
- * @Directive({ selector: '[my-directive]' })
- * class MyDirective {
- *   constructor(someService: SomeService) {
- *   }
- * }
- * ```
- *
- * This directive would be instantiated with a dependency on `SomeService`.
- *
- *
- * ### Injecting a directive from the current element
- *
- * Directives can inject other directives declared on the current element.
- *
- * ```
- * @Directive({ selector: '[my-directive]' })
- * class MyDirective {
- *   constructor(dependency: Dependency) {
- *     expect(dependency.id).toEqual(3);
- *   }
- * }
- * ```
- * This directive would be instantiated with `Dependency` declared at the same element, in this case
- * `dependency="3"`.
- *
- *
- * ### Injecting a directive from a direct parent element
- *
- * Directives can inject other directives declared on a direct parent element. By definition, a
- * directive with a
- * `@Parent` annotation does not attempt to resolve dependencies for the current element, even if
- * this would satisfy
- * the dependency.
- *
- * ```
- * @Directive({ selector: '[my-directive]' })
- * class MyDirective {
- *   constructor(@Parent() dependency: Dependency) {
- *     expect(dependency.id).toEqual(2);
- *   }
- * }
- * ```
- * This directive would be instantiated with `Dependency` declared at the parent element, in this
- * case `dependency="2"`.
- *
- *
- * ### Injecting a directive from any ancestor elements
- *
- * Directives can inject other directives declared on any ancestor element (in the current Shadow
- * DOM), i.e. on the
- * parent element and its parents. By definition, a directive with an `@Ancestor` annotation does
- * not attempt to
- * resolve dependencies for the current element, even if this would satisfy the dependency.
- *
- * ```
- * @Directive({ selector: '[my-directive]' })
- * class MyDirective {
- *   constructor(@Ancestor() dependency: Dependency) {
- *     expect(dependency.id).toEqual(2);
- *   }
- * }
- * ```
- *
- * Unlike the `@Parent` which only checks the parent, `@Ancestor` checks the parent, as well as its
- * parents recursively. If `dependency="2"` didn't exist on the direct parent, this injection would
- * have returned
- * `dependency="1"`.
- *
- *
- * ### Injecting a live collection of direct child directives
- *
- *
- * A directive can also query for other child directives. Since parent directives are instantiated
- * before child directives, a directive can't simply inject the list of child directives. Instead,
- * the directive injects a {@link QueryList}, which updates its contents as children are added,
- * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ng-for`, an
- * `ng-if`, or an `ng-switch`.
- *
- * ```
- * @Directive({ selector: '[my-directive]' })
- * class MyDirective {
- *   constructor(@Query(Dependency) dependencies:QueryList<Dependency>) {
- *   }
- * }
- * ```
- *
- * This directive would be instantiated with a {@link QueryList} which contains `Dependency` 4 and
- * 6. Here, `Dependency` 5 would not be included, because it is not a direct child.
- *
- * ### Injecting a live collection of descendant directives
- *
- * By passing the descendant flag to `@Query` above, we can include the children of the child
- * elements.
- *
- * ```
- * @Directive({ selector: '[my-directive]' })
- * class MyDirective {
- *   constructor(@Query(Dependency, {descendants: true}) dependencies:QueryList<Dependency>) {
- *   }
- * }
- * ```
- *
- * This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6.
- *
- * ### Optional injection
- *
- * The normal behavior of directives is to return an error when a specified dependency cannot be
- * resolved. If you
- * would like to inject `null` on unresolved dependency instead, you can annotate that dependency
- * with `@Optional()`.
- * This explicitly permits the author of a template to treat some of the surrounding directives as
- * optional.
- *
- * ```
- * @Directive({ selector: '[my-directive]' })
- * class MyDirective {
- *   constructor(@Optional() dependency:Dependency) {
- *   }
- * }
- * ```
- *
- * This directive would be instantiated with a `Dependency` directive found on the current element.
- * If none can be
- * found, the injector supplies `null` instead of throwing an error.
- *
- * ## Example
- *
- * Here we use a decorator directive to simply define basic tool-tip behavior.
- *
- * ```
- * @Directive({
- *   selector: '[tooltip]',
- *   properties: [
- *     'text: tooltip'
- *   ],
- *   hostListeners: {
- *     'onmouseenter': 'onMouseEnter()',
- *     'onmouseleave': 'onMouseLeave()'
- *   }
- * })
- * class Tooltip{
- *   text:string;
- *   overlay:Overlay; // NOT YET IMPLEMENTED
- *   overlayManager:OverlayManager; // NOT YET IMPLEMENTED
- *
- *   constructor(overlayManager:OverlayManager) {
- *     this.overlay = overlay;
- *   }
- *
- *   onMouseEnter() {
- *     // exact signature to be determined
- *     this.overlay = this.overlayManager.open(text, ...);
- *   }
- *
- *   onMouseLeave() {
- *     this.overlay.close();
- *     this.overlay = null;
- *   }
- * }
- * ```
- * In our HTML template, we can then add this behavior to a `<div>` or any other element with the
- * `tooltip` selector,
- * like so:
- *
- * ```
- * <div tooltip="some text here"></div>
- * ```
- *
- * Directives can also control the instantiation, destruction, and positioning of inline template
- * elements:
- *
- * A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at
- * runtime.
- * The {@link ViewContainerRef} is created as a result of `<template>` element, and represents a
- * location in the current view
- * where these actions are performed.
- *
- * Views are always created as children of the current {@link View}, and as siblings of the
- * `<template>` element. Thus a
- * directive in a child view cannot inject the directive that created it.
- *
- * Since directives that create views via ViewContainers are common in Angular, and using the full
- * `<template>` element syntax is wordy, Angular
- * also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are
- * equivalent.
- *
- * Thus,
- *
- * ```
- * <ul>
- *   <li *foo="bar" title="text"></li>
- * </ul>
- * ```
- *
- * Expands in use to:
- *
- * ```
- * <ul>
- *   <template [foo]="bar">
- *     <li title="text"></li>
- *   </template>
- * </ul>
- * ```
- *
- * Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for
- * the directive
- * controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
- *
- *
- * ## Example
- *
- * Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
- *
- * Here is a simple directive that triggers on an `unless` selector:
- *
- * ```
- * @Directive({
- *   selector: '[unless]',
- *   properties: ['unless']
- * })
- * export class Unless {
- *   viewContainer: ViewContainerRef;
- *   protoViewRef: ProtoViewRef;
- *   prevCondition: boolean;
- *
- *   constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
- *     this.viewContainer = viewContainer;
- *     this.protoViewRef = protoViewRef;
- *     this.prevCondition = null;
- *   }
- *
- *   set unless(newCondition) {
- *     if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
- *       this.prevCondition = true;
- *       this.viewContainer.clear();
- *     } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
- *       this.prevCondition = false;
- *       this.viewContainer.create(this.protoViewRef);
- *     }
- *   }
- * }
- * ```
- *
- * We can then use this `unless` selector in a template:
- * ```
- * <ul>
- *   <li *unless="expr"></li>
- * </ul>
- * ```
- *
- * Once the directive instantiates the child view, the shorthand notation for the template expands
- * and the result is:
- *
- * ```
- * <ul>
- *   <template [unless]="exp">
- *     <li></li>
- *   </template>
- *   <li></li>
- * </ul>
- * ```
- *
- * Note also that although the `<li></li>` template still exists inside the `<template></template>`,
- * the instantiated
- * view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
- *
- * @exportedAs angular2/annotations
- */
-@CONST()
-export class Directive extends Injectable {
-  /**
-   * The CSS selector that triggers the instantiation of a directive.
-   *
-   * Angular only allows directives to trigger on CSS selectors that do not cross element
-   * boundaries.
-   *
-   * `selector` may be declared as one of the following:
-   *
-   * - `element-name`: select by element name.
-   * - `.class`: select by class name.
-   * - `[attribute]`: select by attribute name.
-   * - `[attribute=value]`: select by attribute name and value.
-   * - `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
-   * - `selector1, selector2`: select if either `selector1` or `selector2` matches.
-   *
-   *
-   * ## Example
-   *
-   * Suppose we have a directive with an `input[type=text]` selector.
-   *
-   * And the following HTML:
-   *
-   * ```html
-   * <form>
-   *   <input type="text">
-   *   <input type="radio">
-   * <form>
-   * ```
-   *
-   * The directive would only be instantiated on the `<input type="text">` element.
-   *
-   */
-  selector: string;
-
-  /**
-   * Enumerates the set of properties that accept data binding for a directive.
-   *
-   * The `properties` property defines a set of `directiveProperty` to `bindingProperty`
-   * configuration:
-   *
-   * - `directiveProperty` specifies the component property where the value is written.
-   * - `bindingProperty` specifies the DOM property where the value is read from.
-   *
-   * You can include a {@link Pipe} when specifying a `bindingProperty` to allow for data
-   * transformation and structural change detection of the value. These pipes will be evaluated in
-   * the context of this component.
-   *
-   * ## Syntax
-   *
-   * There is no need to specify both `directiveProperty` and `bindingProperty` when they both have
-   * the same value.
-   *
-   * ```
-   * @Directive({
-   *   properties: [
-   *     'propertyName', // shorthand notation for 'propertyName: propertyName'
-   *     'directiveProperty1: bindingProperty1',
-   *     'directiveProperty2: bindingProperty2 | pipe1 | ...',
-   *     ...
-   *   ]
-   * }
-   * ```
-   *
-   *
-   * ## Basic Property Binding
-   *
-   * We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can
-   * be used in templates with standard Angular syntax. For example:
-   *
-   * ```
-   * @Directive({
-   *   selector: '[tooltip]',
-   *   properties: [
-   *     'text: tooltip'
-   *   ]
-   * })
-   * class Tooltip {
-   *   set text(value: string) {
-   *     // This will get called every time with the new value when the 'tooltip' property changes
-   *   }
-   * }
-   * ```
-   *
-   * We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a
-   * string literal, as shown in the HTML template below:
-   *
-   * ```html
-   * <div [tooltip]="someExpression">...</div>
-   * <div tooltip="Some Text">...</div>
-   * ```
-   *
-   * Whenever the `someExpression` expression changes, the `properties` declaration instructs
-   * Angular to update the `Tooltip`'s `text` property.
-   *
-   * ## Bindings With Pipes
-   *
-   * You can also use pipes when writing binding definitions for a directive.
-   *
-   * For example, we could write a binding that updates the directive on structural changes, rather
-   * than on reference changes, as normally occurs in change detection.
-   *
-   * See {@link Pipe} and {@link KeyValueChanges} documentation for more details.
-   *
-   * ```
-   * @Directive({
-   *   selector: '[class-set]',
-   *   properties: [
-   *     'classChanges: classSet | keyValDiff'
-   *   ]
-   * })
-   * class ClassSet {
-   *   set classChanges(changes: KeyValueChanges) {
-   *     // This will get called every time the `class-set` expressions changes its structure.
-   *   }
-   * }
-   * ```
-   *
-   * The template that this directive is used in may also contain its own pipes. For example:
-   *
-   * ```html
-   * <div [class-set]="someExpression | somePipe">
-   * ```
-   *
-   * In this case, the two pipes compose as if they were inlined: `someExpression | somePipe |
-   * keyValDiff`.
-   *
-   */
-  properties: List<string>;
-
-  /**
-   * Enumerates the set of emitted events.
-   *
-   * ## Syntax
-   *
-   * ```
-   * @Component({
-   *   events: ['statusChange']
-   * })
-   * class TaskComponent {
-   *   statusChange: EventEmitter;
-   *
-   *   constructor() {
-   *     this.statusChange = new EventEmitter();
-   *   }
-   *
-   *   onComplete() {
-   *     this.statusChange.next('completed');
-   *   }
-   * }
-   * ```
-   *
-   * Use `propertyName: eventName` when the event emitter property name is different from the name
-   * of the emitted event:
-   *
-   * ```
-   * @Component({
-   *   events: ['status: statusChange']
-   * })
-   * class TaskComponent {
-   *   status: EventEmitter;
-   *
-   *   constructor() {
-   *     this.status = new EventEmitter();
-   *   }
-   *
-   *   onComplete() {
-   *     this.status.next('completed');
-   *   }
-   * }
-   * ```
-   *
-   */
-  events: List<string>;
-
-  /**
-   * Specifiy the events, actions, properties and attributes related to the host element.
-   *
-   * ## Events
-   *
-   * Specifies which DOM hostListeners a directive listens to via a set of `(event)` to `method`
-   * key-value pairs:
-   *
-   * - `event1`: the DOM event that the directive listens to.
-   * - `statement`: the statement to execute when the event occurs.
-   * If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM
-   * event.
-   *
-   * To listen to global events, a target must be added to the event name.
-   * The target can be `window`, `document` or `body`.
-   *
-   * When writing a directive event binding, you can also refer to the following local variables:
-   * - `$event`: Current event object which triggered the event.
-   * - `$target`: The source of the event. This will be either a DOM element or an Angular
-   * directive. (will be implemented in later release)
-   *
-   * ## Syntax
-   *
-   * ```
-   * @Directive({
-   *   host: {
-   *     '(event1)': 'onMethod1(arguments)',
-   *     '(target:event2)': 'onMethod2(arguments)',
-   *     ...
-   *   }
-   * }
-   * ```
-   *
-   * ## Basic Event Binding:
-   *
-   * Suppose you want to write a directive that reacts to `change` events in the DOM and on
-   * `resize` events in window.
-   * You would define the event binding as follows:
-   *
-   * ```
-   * @Directive({
-   *   selector: 'input',
-   *   host: {
-   *     '(change)': 'onChange($event)',
-   *     '(window:resize)': 'onResize($event)'
-   *   }
-   * })
-   * class InputDirective {
-   *   onChange(event:Event) {
-   *     // invoked when the input element fires the 'change' event
-   *   }
-   *   onResize(event:Event) {
-   *     // invoked when the window fires the 'resize' event
-   *   }
-   * }
-   * ```
-   *
-   * ## Properties
-   *
-   * Specifies which DOM properties a directives updates.
-   *
-   * ## Syntax
-   *
-   * ```
-   * @Directive({
-   *   selector: 'input',
-   *   host: {
-   *     '[prop]': 'expression'
-   *   }
-   * })
-   * class InputDirective {
-   *   value:string;
-   * }
-   * ```
-   *
-   * In this example the prop property of the host element is updated with the expression value
-   * every time it changes.
-   *
-   * ## Attributes
-   *
-   * Specifies static attributes that should be propagated to a host element. Attributes specified
-   * in `hostAttributes` are propagated only if a given attribute is not present on a host element.
-   *
-   * ## Syntax
-   *
-   * ```
-   * @Directive({
-   *   selector: '[my-button]',
-   *   host: {
-   *     'role': 'button'
-   *   }
-   * })
-   * class MyButton {
-   * }
-   * ```
-   *
-   * In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element
-   * (here: `<div>` ) will ensure that this element will get the "button" role.
-   *
-   * ## Actions
-   *
-   * Specifies which DOM methods a directive can invoke.
-   *
-   * ## Syntax
-   *
-   * ```
-   * @Directive({
-   *   selector: 'input',
-   *   host: {
-   *     '@emitFocus': 'focus()'
-   *   }
-   * })
-   * class InputDirective {
-   *   constructor() {
-   *     this.emitFocus = new EventEmitter();
-   *   }
-   *
-   *   focus() {
-   *     this.emitFocus.next();
-   *   }
-   * }
-   * ```
-   *
-   * In this example calling focus on InputDirective will result in calling focus on the input.
-   */
-  host: StringMap<string, string>;
-
-  /**
-   * Specifies which lifecycle should be notified to the directive.
-   *
-   * See {@link onChange}, {@link onDestroy}, {@link onCheck},
-   * {@link onInit}, {@link onAllChangesDone} for details.
-   */
-  lifecycle: List<LifecycleEvent>;
-
-  /**
-   * If set to false the compiler does not compile the children of this directive.
-   */
-  // TODO(vsavkin): This would better fall under the Macro directive concept.
-  compileChildren: boolean;
-
-  /**
-   * Defines the set of injectable objects that are visible to a Directive and its light dom
-   * children.
-   *
-   * ## Simple Example
-   *
-   * Here is an example of a class that can be injected:
-   *
-   * ```
-   * class Greeter {
-   *    greet(name:string) {
-   *      return 'Hello ' + name + '!';
-   *    }
-   * }
-   *
-   * @Directive({
-   *   selector: 'greet',
-   *   hostInjector: [
-   *     Greeter
-   *   ]
-   * })
-   * class HelloWorld {
-   *   greeter:Greeter;
-   *
-   *   constructor(greeter:Greeter) {
-   *     this.greeter = greeter;
-   *   }
-   * }
-   * ```
-   */
-  hostInjector: List<any>;
-
-  /**
-   * Defines the name that can be used in the template to assign this directive to a variable.
-   *
-   * ## Simple Example
-   *
-   * ```
-   * @Directive({
-   *   selector: 'child-dir',
-   *   exportAs: 'child'
-   * })
-   * class ChildDir {
-   * }
-   *
-   * @Component({
-   *   selector: 'main',
-   * })
-   * @View({
-   *   template: `<child-dir #c="child"></child-dir>`,
-   *   directives: [ChildDir]
-   * })
-   * class MainComponent {
-   * }
-   *
-   * ```
-   */
-  exportAs: string;
-
-  constructor({
-                  selector, properties, events, host, lifecycle, hostInjector, exportAs,
-                  compileChildren = true,
-              }: DirectiveArgs = {}) {
-    super(self);
-    this.selector = selector;
-    this.properties = properties;
-    this.events = events;
-    this.host = host;
-    this.exportAs = exportAs;
-    this.lifecycle = lifecycle;
-    this.compileChildren = compileChildren;
-    this.hostInjector = hostInjector;
-  }
-}
-
-export interface DirectiveArgs {
-  selector?: string;
-  properties?: List<string>;
-  events?: List<string>;
-  host?: StringMap<string, string>;
-  lifecycle?: List<LifecycleEvent>;
-  hostInjector?: List<any>;
-  exportAs?: string;
-  compileChildren?: boolean;
-}
-
-/**
- * Declare reusable UI building blocks for an application.
- *
- * Each Angular component requires a single `@Component` and at least one `@View` annotation. The
- * `@Component`
- * annotation specifies when a component is instantiated, and which properties and hostListeners it
- * binds to.
- *
- * When a component is instantiated, Angular
- * - creates a shadow DOM for the component.
- * - loads the selected template into the shadow DOM.
- * - creates all the injectable objects configured with `hostInjector` and `viewInjector`.
- *
- * All template expressions and statements are then evaluated against the component instance.
- *
- * For details on the `@View` annotation, see {@link View}.
- *
- * ## Example
- *
- * ```
- * @Component({
- *   selector: 'greet'
- * })
- * @View({
- *   template: 'Hello {{name}}!'
- * })
- * class Greet {
- *   name: string;
- *
- *   constructor() {
- *     this.name = 'World';
- *   }
- * }
- * ```
- *
- *
- * @exportedAs angular2/annotations
- */
-@CONST()
-export class Component extends Directive {
-  /**
-   * Defines the used change detection strategy.
-   *
-   * When a component is instantiated, Angular creates a change detector, which is responsible for
-   * propagating
-   * the component's bindings.
-   *
-   * The `changeDetection` property defines, whether the change detection will be checked every time
-   * or only when the component
-   * tells it to do so.
-   */
-  changeDetection: string;
-
-  /**
-   * Defines the set of injectable objects that are visible to its view dom children.
-   *
-   * ## Simple Example
-   *
-   * Here is an example of a class that can be injected:
-   *
-   * ```
-   * class Greeter {
-   *    greet(name:string) {
-   *      return 'Hello ' + name + '!';
-   *    }
-   * }
-   *
-   * @Directive({
-   *   selector: 'needs-greeter'
-   * })
-   * class NeedsGreeter {
-   *   greeter:Greeter;
-   *
-   *   constructor(greeter:Greeter) {
-   *     this.greeter = greeter;
-   *   }
-   * }
-   *
-   * @Component({
-   *   selector: 'greet',
-   *   viewInjector: [
-   *     Greeter
-   *   ]
-   * })
-   * @View({
-   *   template: `<needs-greeter></needs-greeter>`,
-   *   directives: [NeedsGreeter]
-   * })
-   * class HelloWorld {
-   * }
-   *
-   * ```
-   */
-  viewInjector: List<any>;
-
-  constructor({selector, properties, events, host, exportAs, lifecycle, hostInjector, viewInjector,
-               changeDetection = DEFAULT, compileChildren = true}: ComponentArgs = {}) {
-    super({
-      selector: selector,
-      properties: properties,
-      events: events,
-      host: host,
-      exportAs: exportAs,
-      hostInjector: hostInjector,
-      lifecycle: lifecycle,
-      compileChildren: compileChildren
-    });
-
-    this.changeDetection = changeDetection;
-    this.viewInjector = viewInjector;
-  }
-}
-
-export interface ComponentArgs extends DirectiveArgs {
-  viewInjector?: List<any>;
-  changeDetection?: string;
-}
-
-/**
- * Lifecycle events are guaranteed to be called in the following order:
- * - `onChange` (optional if any bindings have changed),
- * - `onInit` (optional after the first check only),
- * - `onCheck`,
- * - `onAllChangesDone`
- */
-@CONST()
-export class LifecycleEvent {
-  constructor(public name: string) {}
-}
-
-/**
- * Notify a directive whenever a {@link View} that contains it is destroyed.
- *
- * ## Example
- *
- * ```
- * @Directive({
- *   ...,
- *   lifecycle: [onDestroy]
- * })
- * class ClassSet {
- *   onDestroy() {
- *     // invoked to notify directive of the containing view destruction.
- *   }
- * }
- * ```
- * @exportedAs angular2/annotations
- */
-export const onDestroy = CONST_EXPR(new LifecycleEvent("onDestroy"));
-
-
-/**
- * Notify a directive when any of its bindings have changed.
- *
- * This method is called right after the directive's bindings have been checked,
- * and before any of its children's bindings have been checked.
- *
- * It is invoked only if at least one of the directive's bindings has changed.
- *
- * ## Example:
- *
- * ```
- * @Directive({
- *   selector: '[class-set]',
- *   properties: [
- *     'propA',
- *     'propB'
- *   ],
- *   lifecycle: [onChange]
- * })
- * class ClassSet {
- *   propA;
- *   propB;
- *   onChange(changes:{[idx: string, PropertyUpdate]}) {
- *     // This will get called after any of the properties have been updated.
- *     if (changes['propA']) {
- *       // if propA was updated
- *     }
- *     if (changes['propA']) {
- *       // if propB was updated
- *     }
- *   }
- * }
- *  ```
- * @exportedAs angular2/annotations
- */
-export const onChange = CONST_EXPR(new LifecycleEvent("onChange"));
-
-/**
- * Notify a directive when it has been checked.
- *
- * This method is called right after the directive's bindings have been checked,
- * and before any of its children's bindings have been checked.
- *
- * It is invoked every time even when none of the directive's bindings has changed.
- *
- * ## Example:
- *
- * ```
- * @Directive({
- *   selector: '[class-set]',
- *   lifecycle: [onCheck]
- * })
- * class ClassSet {
- *   onCheck() {
- *   }
- * }
- *  ```
- * @exportedAs angular2/annotations
- */
-export const onCheck = CONST_EXPR(new LifecycleEvent("onCheck"));
-
-/**
- * Notify a directive when it has been checked the first itme.
- *
- * This method is called right after the directive's bindings have been checked,
- * and before any of its children's bindings have been checked.
- *
- * It is invoked only once.
- *
- * ## Example:
- *
- * ```
- * @Directive({
- *   selector: '[class-set]',
- *   lifecycle: [onInit]
- * })
- * class ClassSet {
- *   onInit() {
- *   }
- * }
- *  ```
- * @exportedAs angular2/annotations
- */
-export const onInit = CONST_EXPR(new LifecycleEvent("onInit"));
-
-/**
- * Notify a directive when the bindings of all its children have been checked (whether they have
- * changed or not).
- *
- * ## Example:
- *
- * ```
- * @Directive({
- *   selector: '[class-set]',
- *   lifecycle: [onAllChangesDone]
- * })
- * class ClassSet {
- *
- *   onAllChangesDone() {
- *   }
- *
- * }
- *  ```
- * @exportedAs angular2/annotations
- */
-export const onAllChangesDone = CONST_EXPR(new LifecycleEvent("onAllChangesDone"));
diff --git a/modules/angular2/src/core/annotations_impl/di.ts b/modules/angular2/src/core/annotations_impl/di.ts
deleted file mode 100644
index 78ed67384af8..000000000000
--- a/modules/angular2/src/core/annotations_impl/di.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {CONST, Type, stringify, isPresent, StringWrapper, isString} from 'angular2/src/facade/lang';
-import {DependencyAnnotation} from 'angular2/src/di/annotations_impl';
-import {resolveForwardRef} from 'angular2/di';
-
-/**
- * Specifies that a constant attribute value should be injected.
- *
- * The directive can inject constant string literals of host element attributes.
- *
- * ## Example
- *
- * Suppose we have an `<input>` element and want to know its `type`.
- *
- * ```html
- * <input type="text">
- * ```
- *
- * A decorator can inject string literal `text` like so:
- *
- * ```javascript
- * @Directive({
- *   selector: `input'
- * })
- * class InputDirective {
- *   constructor(@Attribute('type') type) {
- *     // type would be `text` in this example
- *   }
- * }
- * ```
- *
- * @exportedAs angular2/annotations
- */
-@CONST()
-export class Attribute extends DependencyAnnotation {
-  constructor(public attributeName: string) { super(); }
-
-  get token() {
-    // Normally one would default a token to a type of an injected value but here
-    // the type of a variable is "string" and we can't use primitive type as a return value
-    // so we use instance of Attribute instead. This doesn't matter much in practice as arguments
-    // with @Attribute annotation are injected by ElementInjector that doesn't take tokens into
-    // account.
-    return this;
-  }
-  toString(): string { return `@Attribute(${stringify(this.attributeName)})`; }
-}
-
-/**
- * Specifies that a {@link QueryList} should be injected.
- *
- * See {@link QueryList} for usage and example.
- *
- * @exportedAs angular2/annotations
- */
-@CONST()
-export class Query extends DependencyAnnotation {
-  descendants: boolean;
-  constructor(private _selector: Type | string,
-              {descendants = false}: {descendants?: boolean} = {}) {
-    super();
-    this.descendants = descendants;
-  }
-
-  get selector() { return resolveForwardRef(this._selector); }
-
-  get isVarBindingQuery(): boolean { return isString(this.selector); }
-
-  get varBindings(): List<string> { return StringWrapper.split(this.selector, new RegExp(",")); }
-
-  toString(): string { return `@Query(${stringify(this.selector)})`; }
-}
diff --git a/modules/angular2/src/core/annotations_impl/view.ts b/modules/angular2/src/core/annotations_impl/view.ts
deleted file mode 100644
index 45d01c47164d..000000000000
--- a/modules/angular2/src/core/annotations_impl/view.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import {ABSTRACT, CONST, Type} from 'angular2/src/facade/lang';
-
-/**
- * Declares the available HTML templates for an application.
- *
- * Each angular component requires a single `@Component` and at least one `@View` annotation. The
- * `@View` annotation specifies the HTML template to use, and lists the directives that are active
- * within the template.
- *
- * When a component is instantiated, the template is loaded into the component's shadow root, and
- * the expressions and statements in the template are evaluated against the component.
- *
- * For details on the `@Component` annotation, see {@link Component}.
- *
- * ## Example
- *
- * ```
- * @Component({
- *   selector: 'greet'
- * })
- * @View({
- *   template: 'Hello {{name}}!',
- *   directives: [GreetUser, Bold]
- * })
- * class Greet {
- *   name: string;
- *
- *   constructor() {
- *     this.name = 'World';
- *   }
- * }
- * ```
- *
- * @exportedAs angular2/annotations
- */
-@CONST()
-export class View {
-  /**
-   * Specifies a template URL for an angular component.
-   *
-   * NOTE: either `templateUrl` or `template` should be used, but not both.
-   */
-  templateUrl: string;
-
-  /**
-   * Specifies an inline template for an angular component.
-   *
-   * NOTE: either `templateUrl` or `template` should be used, but not both.
-   */
-  template: string;
-
-  /**
-   * Specifies stylesheet URLs for an angular component.
-   */
-  styleUrls: List<string>;
-
-  /**
-   * Specifies an inline stylesheet for an angular component.
-   */
-  styles: List<string>;
-
-  /**
-   * Specifies a list of directives that can be used within a template.
-   *
-   * Directives must be listed explicitly to provide proper component encapsulation.
-   *
-   * ## Example
-   *
-   * ```javascript
-   * @Component({
-   *     selector: 'my-component'
-   *   })
-   * @View({
-   *   directives: [For]
-   *   template: '
-   *   <ul>
-   *     <li *ng-for="#item of items">{{item}}</li>
-   *   </ul>'
-   * })
-   * class MyComponent {
-   * }
-   * ```
-   */
-  // TODO(tbosch): use Type | Binding | List<any> when Dart supports union types,
-  // as otherwise we would need to import Binding type and Dart would warn
-  // for an unused import.
-  directives: List<Type | any | List<any>>;
-
-  /**
-   * Specify a custom renderer for this View.
-   * If this is set, neither `template`, `templateUrl`, `styles`, `styleUrls` nor `directives` are
-   * used.
-   */
-  renderer: string;
-
-  constructor({templateUrl, template, directives, renderer, styles, styleUrls}: ViewArgs = {}) {
-    this.templateUrl = templateUrl;
-    this.template = template;
-    this.styleUrls = styleUrls;
-    this.styles = styles;
-    this.directives = directives;
-    this.renderer = renderer;
-  }
-}
-export interface ViewArgs {
-  templateUrl?: string;
-  template?: string;
-  directives?: List<Type | any | List<any>>;
-  renderer?: string;
-  styles?: List<string>;
-  styleUrls?: List<string>;
-}
diff --git a/modules/angular2/src/core/application.ts b/modules/angular2/src/core/application.ts
deleted file mode 100644
index d0a4b6549c5c..000000000000
--- a/modules/angular2/src/core/application.ts
+++ /dev/null
@@ -1,341 +0,0 @@
-import {Injector, bind, OpaqueToken, Binding} from 'angular2/di';
-import {
-  NumberWrapper,
-  Type,
-  isBlank,
-  isPresent,
-  BaseException,
-  assertionsEnabled,
-  print,
-  stringify
-} from 'angular2/src/facade/lang';
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Compiler, CompilerCache} from './compiler/compiler';
-import {Reflector, reflector} from 'angular2/src/reflection/reflection';
-import {
-  Parser,
-  Lexer,
-  ChangeDetection,
-  DynamicChangeDetection,
-  JitChangeDetection,
-  PreGeneratedChangeDetection,
-  PipeRegistry,
-  defaultPipeRegistry
-} from 'angular2/change_detection';
-import {ExceptionHandler} from './exception_handler';
-import {ViewLoader} from 'angular2/src/render/dom/compiler/view_loader';
-import {StyleUrlResolver} from 'angular2/src/render/dom/compiler/style_url_resolver';
-import {StyleInliner} from 'angular2/src/render/dom/compiler/style_inliner';
-import {ViewResolver} from './compiler/view_resolver';
-import {DirectiveResolver} from './compiler/directive_resolver';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
-import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
-import {ShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/shadow_dom_strategy';
-import {
-  EmulatedUnscopedShadowDomStrategy
-} from 'angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
-import {XHR} from 'angular2/src/render/xhr';
-import {XHRImpl} from 'angular2/src/render/xhr_impl';
-import {EventManager, DomEventsPlugin} from 'angular2/src/render/dom/events/event_manager';
-import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
-import {HammerGesturesPlugin} from 'angular2/src/render/dom/events/hammer_gestures';
-import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {AppRootUrl} from 'angular2/src/services/app_root_url';
-import {
-  ComponentRef,
-  DynamicComponentLoader
-} from 'angular2/src/core/compiler/dynamic_component_loader';
-import {TestabilityRegistry, Testability} from 'angular2/src/core/testability/testability';
-import {AppViewPool, APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
-import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
-import {AppViewListener} from 'angular2/src/core/compiler/view_listener';
-import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
-import {Renderer, RenderCompiler} from 'angular2/src/render/api';
-import {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
-import {DefaultDomCompiler} from 'angular2/src/render/dom/compiler/compiler';
-import {internalView} from 'angular2/src/core/compiler/view_ref';
-
-import {appComponentRefToken, appComponentTypeToken} from './application_tokens';
-
-var _rootInjector: Injector;
-
-// Contains everything that is safe to share between applications.
-var _rootBindings = [bind(Reflector).toValue(reflector), TestabilityRegistry];
-
-function _injectorBindings(appComponentType): List<Type | Binding | List<any>> {
-  var bestChangeDetection: Type = DynamicChangeDetection;
-  if (PreGeneratedChangeDetection.isSupported()) {
-    bestChangeDetection = PreGeneratedChangeDetection;
-  } else if (JitChangeDetection.isSupported()) {
-    bestChangeDetection = JitChangeDetection;
-  }
-  return [
-    bind(DOCUMENT_TOKEN)
-        .toValue(DOM.defaultDoc()),
-    bind(appComponentTypeToken).toValue(appComponentType),
-    bind(appComponentRefToken)
-        .toFactory(
-            (dynamicComponentLoader, injector, testability, registry) => {
-              // TODO(rado): investigate whether to support bindings on root component.
-              return dynamicComponentLoader.loadAsRoot(appComponentType, null, injector)
-                  .then((componentRef) => {
-                    registry.registerApplication(componentRef.location.nativeElement, testability);
-                    return componentRef;
-                  });
-            },
-            [DynamicComponentLoader, Injector, Testability, TestabilityRegistry]),
-
-    bind(appComponentType)
-        .toFactory((p: Promise<any>) => p.then(ref => ref.instance), [appComponentRefToken]),
-    bind(LifeCycle)
-        .toFactory((exceptionHandler) => new LifeCycle(exceptionHandler, null, assertionsEnabled()),
-                   [ExceptionHandler]),
-    bind(EventManager)
-        .toFactory(
-            (ngZone) => {
-              var plugins =
-                  [new HammerGesturesPlugin(), new KeyEventsPlugin(), new DomEventsPlugin()];
-              return new EventManager(plugins, ngZone);
-            },
-            [NgZone]),
-    bind(ShadowDomStrategy)
-        .toFactory((doc) => new EmulatedUnscopedShadowDomStrategy(doc.head), [DOCUMENT_TOKEN]),
-    DomRenderer,
-    DefaultDomCompiler,
-    bind(Renderer).toAlias(DomRenderer),
-    bind(RenderCompiler).toAlias(DefaultDomCompiler),
-    ProtoViewFactory,
-    AppViewPool,
-    bind(APP_VIEW_POOL_CAPACITY).toValue(10000),
-    AppViewManager,
-    AppViewManagerUtils,
-    AppViewListener,
-    Compiler,
-    CompilerCache,
-    ViewResolver,
-    bind(PipeRegistry).toValue(defaultPipeRegistry),
-    bind(ChangeDetection).toClass(bestChangeDetection),
-    ViewLoader,
-    DirectiveResolver,
-    Parser,
-    Lexer,
-    ExceptionHandler,
-    bind(XHR).toValue(new XHRImpl()),
-    ComponentUrlMapper,
-    UrlResolver,
-    StyleUrlResolver,
-    StyleInliner,
-    DynamicComponentLoader,
-    Testability,
-    AppRootUrl
-  ];
-}
-
-function _createNgZone(givenReporter: Function): NgZone {
-  var defaultErrorReporter = (exception, stackTrace) => {
-    var longStackTrace = ListWrapper.join(stackTrace, "\n\n-----async gap-----\n");
-    DOM.logError(`${exception}\n\n${longStackTrace}`);
-    throw exception;
-  };
-
-  var reporter = isPresent(givenReporter) ? givenReporter : defaultErrorReporter;
-
-  var zone = new NgZone({enableLongStackTrace: assertionsEnabled()});
-  zone.initCallbacks({onErrorHandler: reporter});
-  return zone;
-}
-
-/**
- * Bootstrapping for Angular applications.
- *
- * You instantiate an Angular application by explicitly specifying a component to use as the root
- * component for your
- * application via the `bootstrap()` method.
- *
- * ## Simple Example
- *
- * Assuming this `index.html`:
- *
- * ```html
- * <html>
- *   <!-- load Angular script tags here. -->
- *   <body>
- *     <my-app>loading...</my-app>
- *   </body>
- * </html>
- * ```
- *
- * An application is bootstrapped inside an existing browser DOM, typically `index.html`. Unlike
- * Angular 1, Angular 2
- * does not compile/process bindings in `index.html`. This is mainly for security reasons, as well
- * as architectural
- * changes in Angular 2. This means that `index.html` can safely be processed using server-side
- * technologies such as
- * bindings. Bindings can thus use double-curly `{{ syntax }}` without collision from Angular 2
- * component double-curly
- * `{{ syntax }}`.
- *
- * We can use this script code:
- *
- * ```
- * @Component({
- *    selector: 'my-app'
- * })
- * @View({
- *    template: 'Hello {{ name }}!'
- * })
- * class MyApp {
- *   name:string;
- *
- *   constructor() {
- *     this.name = 'World';
- *   }
- * }
- *
- * main() {
- *   return bootstrap(MyApp);
- * }
- * ```
- *
- * When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument,
- * Angular performs the
- * following tasks:
- *
- *  1. It uses the component's `selector` property to locate the DOM element which needs to be
- * upgraded into
- *     the angular component.
- *  2. It creates a new child injector (from the platform injector). Optionally, you can also
- * override the injector configuration for an app by
- * invoking `bootstrap` with the `componentInjectableBindings` argument.
- *  3. It creates a new `Zone` and connects it to the angular application's change detection domain
- * instance.
- *  4. It creates a shadow DOM on the selected component's host element and loads the template into
- * it.
- *  5. It instantiates the specified component.
- *  6. Finally, Angular performs change detection to apply the initial data bindings for the
- * application.
- *
- *
- * ## Instantiating Multiple Applications on a Single Page
- *
- * There are two ways to do this.
- *
- *
- * ### Isolated Applications
- *
- * Angular creates a new application each time that the `bootstrap()` method is invoked. When
- * multiple applications
- * are created for a page, Angular treats each application as independent within an isolated change
- * detection and
- * `Zone` domain. If you need to share data between applications, use the strategy described in the
- * next
- * section, "Applications That Share Change Detection."
- *
- *
- * ### Applications That Share Change Detection
- *
- * If you need to bootstrap multiple applications that share common data, the applications must
- * share a common
- * change detection and zone. To do that, create a meta-component that lists the application
- * components in its template.
- * By only invoking the `bootstrap()` method once, with the meta-component as its argument, you
- * ensure that only a
- * single change detection zone is created and therefore data can be shared across the applications.
- *
- *
- * ## Platform Injector
- *
- * When working within a browser window, there are many singleton resources: cookies, title,
- * location, and others.
- * Angular services that represent these resources must likewise be shared across all Angular
- * applications that
- * occupy the same browser window.  For this reason, Angular creates exactly one global platform
- * injector which stores
- * all shared services, and each angular application injector has the platform injector as its
- * parent.
- *
- * Each application has its own private injector as well. When there are multiple applications on a
- * page, Angular treats
- * each application injector's services as private to that application.
- *
- *
- * # API
- * - `appComponentType`: The root component which should act as the application. This is a reference
- * to a `Type`
- *   which is annotated with `@Component(...)`.
- * - `componentInjectableBindings`: An additional set of bindings that can be added to the app
- * injector
- * to override default injection behavior.
- * - `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter for
- * unhandled exceptions.
- *
- * Returns a `Promise` with the application`s private {@link Injector}.
- *
- * @exportedAs angular2/core
- */
-export function bootstrap(appComponentType: Type,
-                          componentInjectableBindings: List<Type | Binding | List<any>> = null,
-                          errorReporter: Function = null): Promise<ApplicationRef> {
-  BrowserDomAdapter.makeCurrent();
-  var bootstrapProcess = PromiseWrapper.completer();
-
-  var zone = _createNgZone(errorReporter);
-  zone.run(() => {
-    // TODO(rado): prepopulate template cache, so applications with only
-    // index.html and main.js are possible.
-
-    var appInjector = _createAppInjector(appComponentType, componentInjectableBindings, zone);
-    var compRefToken: Promise<any> =
-        PromiseWrapper.wrap(() => appInjector.get(appComponentRefToken));
-    var tick = (componentRef) => {
-      var appChangeDetector = internalView(componentRef.hostView).changeDetector;
-      // retrieve life cycle: may have already been created if injected in root component
-      var lc = appInjector.get(LifeCycle);
-      lc.registerWith(zone, appChangeDetector);
-      lc.tick();  // the first tick that will bootstrap the app
-
-      bootstrapProcess.resolve(new ApplicationRef(componentRef, appComponentType, appInjector));
-    };
-    PromiseWrapper.then(compRefToken, tick,
-                        (err, stackTrace) => {bootstrapProcess.reject(err, stackTrace)});
-  });
-
-  return bootstrapProcess.promise;
-}
-
-export class ApplicationRef {
-  _hostComponent: ComponentRef;
-  _injector: Injector;
-  _hostComponentType: Type;
-  constructor(hostComponent: ComponentRef, hostComponentType: Type, injector: Injector) {
-    this._hostComponent = hostComponent;
-    this._injector = injector;
-    this._hostComponentType = hostComponentType;
-  }
-
-  get hostComponentType() { return this._hostComponentType; }
-
-  get hostComponent() { return this._hostComponent.instance; }
-
-  dispose() {
-    // TODO: We also need to clean up the Zone, ... here!
-    this._hostComponent.dispose();
-  }
-
-  get injector() { return this._injector; }
-}
-
-function _createAppInjector(appComponentType: Type, bindings: List<Type | Binding | List<any>>,
-                            zone: NgZone): Injector {
-  if (isBlank(_rootInjector)) _rootInjector = Injector.resolveAndCreate(_rootBindings);
-  var mergedBindings: any[] =
-      isPresent(bindings) ? ListWrapper.concat(_injectorBindings(appComponentType), bindings) :
-                            _injectorBindings(appComponentType);
-  mergedBindings.push(bind(NgZone).toValue(zone));
-  return _rootInjector.resolveAndCreateChild(mergedBindings);
-}
diff --git a/modules/angular2/src/core/application_tokens.ts b/modules/angular2/src/core/application_tokens.ts
deleted file mode 100644
index 441c5407bc8e..000000000000
--- a/modules/angular2/src/core/application_tokens.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {OpaqueToken} from 'angular2/di';
-import {CONST_EXPR} from 'angular2/src/facade/lang';
-
-export const appComponentRefToken: OpaqueToken = CONST_EXPR(new OpaqueToken('ComponentRef'));
-export const appComponentTypeToken: OpaqueToken = CONST_EXPR(new OpaqueToken('RootComponent'));
diff --git a/modules/angular2/src/core/compiler/base_query_list.dart b/modules/angular2/src/core/compiler/base_query_list.dart
deleted file mode 100644
index 1b1d53bc74bf..000000000000
--- a/modules/angular2/src/core/compiler/base_query_list.dart
+++ /dev/null
@@ -1,48 +0,0 @@
-library angular2.src.core.compiler.base_query_list;
-
-import 'dart:collection';
-
-/**
- * Injectable Objects that contains a live list of child directives in the light Dom of a directive.
- * The directives are kept in depth-first pre-order traversal of the DOM.
- *
- * In the future this class will implement an Observable interface.
- * For now it uses a plain list of observable callbacks.
- */
-class BaseQueryList<T> extends Object with IterableMixin<T> {
-  List<T> _results = [];
-  List _callbacks = [];
-  bool _dirty = false;
-
-  Iterator<T> get iterator => _results.iterator;
-
-  reset(newList) {
-    _results = newList;
-    _dirty = true;
-  }
-
-  add(obj) {
-    _results.add(obj);
-    _dirty = true;
-  }
-
-  // TODO(rado): hook up with change detection after #995.
-  fireCallbacks() {
-    if (_dirty) {
-      _callbacks.forEach((c) => c());
-      _dirty = false;
-    }
-  }
-
-  onChange(callback) {
-    _callbacks.add(callback);
-  }
-
-  removeCallback(callback) {
-    _callbacks.remove(callback);
-  }
-
-  get length => _results.length;
-  get first => _results.first;
-  get last => _results.last;
-}
diff --git a/modules/angular2/src/core/compiler/base_query_list.ts b/modules/angular2/src/core/compiler/base_query_list.ts
deleted file mode 100644
index 1768f9ca0913..000000000000
--- a/modules/angular2/src/core/compiler/base_query_list.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-
-/**
- * Injectable Objects that contains a live list of child directives in the light Dom of a directive.
- * The directives are kept in depth-first pre-order traversal of the DOM.
- *
- * In the future this class will implement an Observable interface.
- * For now it uses a plain list of observable callbacks.
- *
- * @exportedAs angular2/view
- */
-export class BaseQueryList<T> {
-  protected _results: List<T> = [];
-  protected _callbacks = [];
-  protected _dirty = false;
-
-  [Symbol.iterator](): any { return this._results[Symbol.iterator](); }
-
-  reset(newList) {
-    this._results = newList;
-    this._dirty = true;
-  }
-
-  add(obj) {
-    this._results.push(obj);
-    this._dirty = true;
-  }
-
-  fireCallbacks() {
-    if (this._dirty) {
-      ListWrapper.forEach(this._callbacks, (c) => c());
-      this._dirty = false;
-    }
-  }
-
-  onChange(callback): void { this._callbacks.push(callback); }
-
-  removeCallback(callback): void { ListWrapper.remove(this._callbacks, callback); }
-
-  get length() { return this._results.length; }
-  get first() { return ListWrapper.first(this._results); }
-  get last() { return ListWrapper.last(this._results); }
-}
diff --git a/modules/angular2/src/core/compiler/compiler.ts b/modules/angular2/src/core/compiler/compiler.ts
deleted file mode 100644
index f1292c845f89..000000000000
--- a/modules/angular2/src/core/compiler/compiler.ts
+++ /dev/null
@@ -1,280 +0,0 @@
-import {Binding, resolveForwardRef, Injectable} from 'angular2/di';
-import {
-  Type,
-  isBlank,
-  isType,
-  isPresent,
-  BaseException,
-  normalizeBlank,
-  stringify,
-  isArray,
-  isPromise
-} from 'angular2/src/facade/lang';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
-
-import {DirectiveResolver} from './directive_resolver';
-
-import {AppProtoView} from './view';
-import {ElementBinder} from './element_binder';
-import {ProtoViewRef} from './view_ref';
-import {DirectiveBinding} from './element_injector';
-import {ViewResolver} from './view_resolver';
-import {View} from '../annotations_impl/view';
-import {ComponentUrlMapper} from './component_url_mapper';
-import {ProtoViewFactory} from './proto_view_factory';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {AppRootUrl} from 'angular2/src/services/app_root_url';
-
-import * as renderApi from 'angular2/src/render/api';
-
-/**
- * Cache that stores the AppProtoView of the template of a component.
- * Used to prevent duplicate work and resolve cyclic dependencies.
- */
-@Injectable()
-export class CompilerCache {
-  _cache: Map<Type, AppProtoView> = new Map();
-  _hostCache: Map<Type, AppProtoView> = new Map();
-
-  set(component: Type, protoView: AppProtoView): void { this._cache.set(component, protoView); }
-
-  get(component: Type): AppProtoView {
-    var result = this._cache.get(component);
-    return normalizeBlank(result);
-  }
-
-  setHost(component: Type, protoView: AppProtoView): void {
-    this._hostCache.set(component, protoView);
-  }
-
-  getHost(component: Type): AppProtoView {
-    var result = this._hostCache.get(component);
-    return normalizeBlank(result);
-  }
-
-  clear(): void {
-    this._cache.clear();
-    this._hostCache.clear();
-  }
-}
-
-/**
- * @exportedAs angular2/view
- */
-@Injectable()
-export class Compiler {
-  private _reader: DirectiveResolver;
-  private _compilerCache: CompilerCache;
-  private _compiling: Map<Type, Promise<AppProtoView>>;
-  private _viewResolver: ViewResolver;
-  private _componentUrlMapper: ComponentUrlMapper;
-  private _urlResolver: UrlResolver;
-  private _appUrl: string;
-  private _render: renderApi.RenderCompiler;
-  private _protoViewFactory: ProtoViewFactory;
-
-  constructor(reader: DirectiveResolver, cache: CompilerCache, viewResolver: ViewResolver,
-              componentUrlMapper: ComponentUrlMapper, urlResolver: UrlResolver,
-              render: renderApi.RenderCompiler, protoViewFactory: ProtoViewFactory,
-              appUrl: AppRootUrl) {
-    this._reader = reader;
-    this._compilerCache = cache;
-    this._compiling = new Map();
-    this._viewResolver = viewResolver;
-    this._componentUrlMapper = componentUrlMapper;
-    this._urlResolver = urlResolver;
-    this._appUrl = appUrl.value;
-    this._render = render;
-    this._protoViewFactory = protoViewFactory;
-  }
-
-  private _bindDirective(directiveTypeOrBinding): DirectiveBinding {
-    if (directiveTypeOrBinding instanceof DirectiveBinding) {
-      return directiveTypeOrBinding;
-    } else if (directiveTypeOrBinding instanceof Binding) {
-      let annotation = this._reader.resolve(directiveTypeOrBinding.token);
-      return DirectiveBinding.createFromBinding(directiveTypeOrBinding, annotation);
-    } else {
-      let annotation = this._reader.resolve(directiveTypeOrBinding);
-      return DirectiveBinding.createFromType(directiveTypeOrBinding, annotation);
-    }
-  }
-
-  // Create a hostView as if the compiler encountered <hostcmp></hostcmp>.
-  // Used for bootstrapping.
-  compileInHost(componentTypeOrBinding: Type | Binding): Promise<ProtoViewRef> {
-    var componentType = isType(componentTypeOrBinding) ? componentTypeOrBinding :
-                                                         (<Binding>componentTypeOrBinding).token;
-
-    var hostAppProtoView = this._compilerCache.getHost(componentType);
-    var hostPvPromise;
-    if (isPresent(hostAppProtoView)) {
-      hostPvPromise = PromiseWrapper.resolve(hostAppProtoView);
-    } else {
-      var componentBinding = this._bindDirective(componentTypeOrBinding);
-      Compiler._assertTypeIsComponent(componentBinding);
-
-      var directiveMetadata = componentBinding.metadata;
-      hostPvPromise = this._render.compileHost(directiveMetadata)
-                          .then((hostRenderPv) => {
-                            return this._compileNestedProtoViews(componentBinding, hostRenderPv,
-                                                                 [componentBinding]);
-                          });
-    }
-    return hostPvPromise.then((hostAppProtoView) => { return new ProtoViewRef(hostAppProtoView); });
-  }
-
-  private _compile(componentBinding: DirectiveBinding): Promise<AppProtoView>| AppProtoView {
-    var component = <Type>componentBinding.key.token;
-    var protoView = this._compilerCache.get(component);
-    if (isPresent(protoView)) {
-      // The component has already been compiled into an AppProtoView,
-      // returns a plain AppProtoView, not wrapped inside of a Promise.
-      // Needed for recursive components.
-      return protoView;
-    }
-
-    var pvPromise = this._compiling.get(component);
-    if (isPresent(pvPromise)) {
-      // The component is already being compiled, attach to the existing Promise
-      // instead of re-compiling the component.
-      // It happens when a template references a component multiple times.
-      return pvPromise;
-    }
-    var view = this._viewResolver.resolve(component);
-
-    var directives = this._flattenDirectives(view);
-
-    for (var i = 0; i < directives.length; i++) {
-      if (!Compiler._isValidDirective(directives[i])) {
-        throw new BaseException(
-            `Unexpected directive value '${stringify(directives[i])}' on the View of component '${stringify(component)}'`);
-      }
-    }
-
-    var boundDirectives = this._removeDuplicatedDirectives(
-        ListWrapper.map(directives, (directive) => this._bindDirective(directive)));
-
-    var renderTemplate = this._buildRenderTemplate(component, view, boundDirectives);
-    pvPromise =
-        this._render.compile(renderTemplate)
-            .then((renderPv) => {
-              return this._compileNestedProtoViews(componentBinding, renderPv, boundDirectives);
-            });
-
-    this._compiling.set(component, pvPromise);
-    return pvPromise;
-  }
-
-  private _removeDuplicatedDirectives(directives: List<DirectiveBinding>): List<DirectiveBinding> {
-    var directivesMap: Map<number, DirectiveBinding> = new Map();
-    directives.forEach((dirBinding) => { directivesMap.set(dirBinding.key.id, dirBinding); });
-    return MapWrapper.values(directivesMap);
-  }
-
-  private _compileNestedProtoViews(componentBinding, renderPv, directives): Promise<AppProtoView>|
-      AppProtoView {
-    var protoViews =
-        this._protoViewFactory.createAppProtoViews(componentBinding, renderPv, directives);
-    var protoView = protoViews[0];
-    if (isPresent(componentBinding)) {
-      var component = componentBinding.key.token;
-      if (renderPv.type === renderApi.ViewType.COMPONENT) {
-        // Populate the cache before compiling the nested components,
-        // so that components can reference themselves in their template.
-        this._compilerCache.set(component, protoView);
-        MapWrapper.delete(this._compiling, component);
-      } else {
-        this._compilerCache.setHost(component, protoView);
-      }
-    }
-    var nestedPVPromises = [];
-    ListWrapper.forEach(this._collectComponentElementBinders(protoViews), (elementBinder) => {
-      var nestedComponent = elementBinder.componentDirective;
-      var elementBinderDone =
-          (nestedPv: AppProtoView) => { elementBinder.nestedProtoView = nestedPv; };
-      var nestedCall = this._compile(nestedComponent);
-      if (isPromise(nestedCall)) {
-        nestedPVPromises.push((<Promise<AppProtoView>>nestedCall).then(elementBinderDone));
-      } else {
-        elementBinderDone(<AppProtoView>nestedCall);
-      }
-    });
-
-    if (nestedPVPromises.length > 0) {
-      return PromiseWrapper.all(nestedPVPromises).then((_) => protoView);
-    } else {
-      return protoView;
-    }
-  }
-
-  private _collectComponentElementBinders(protoViews: List<AppProtoView>): List<ElementBinder> {
-    var componentElementBinders = [];
-    ListWrapper.forEach(protoViews, (protoView) => {
-      ListWrapper.forEach(protoView.elementBinders, (elementBinder) => {
-        if (isPresent(elementBinder.componentDirective)) {
-          componentElementBinders.push(elementBinder);
-        }
-      });
-    });
-    return componentElementBinders;
-  }
-
-  private _buildRenderTemplate(component, view, directives): renderApi.ViewDefinition {
-    var componentUrl =
-        this._urlResolver.resolve(this._appUrl, this._componentUrlMapper.getUrl(component));
-    var templateAbsUrl = null;
-    var styleAbsUrls = null;
-    if (isPresent(view.templateUrl)) {
-      templateAbsUrl = this._urlResolver.resolve(componentUrl, view.templateUrl);
-    } else if (isPresent(view.template)) {
-      // Note: If we have an inline template, we also need to send
-      // the url for the component to the render so that it
-      // is able to resolve urls in stylesheets.
-      templateAbsUrl = componentUrl;
-    }
-    if (isPresent(view.styleUrls)) {
-      styleAbsUrls =
-          ListWrapper.map(view.styleUrls, url => this._urlResolver.resolve(componentUrl, url));
-    }
-    return new renderApi.ViewDefinition({
-      componentId: stringify(component),
-      templateAbsUrl: templateAbsUrl, template: view.template,
-      styleAbsUrls: styleAbsUrls,
-      styles: view.styles,
-      directives: ListWrapper.map(directives, directiveBinding => directiveBinding.metadata)
-    });
-  }
-
-  private _flattenDirectives(template: View): List<Type> {
-    if (isBlank(template.directives)) return [];
-
-    var directives = [];
-    this._flattenList(template.directives, directives);
-
-    return directives;
-  }
-
-  private _flattenList(tree: List<any>, out: List<Type | Binding | List<any>>): void {
-    for (var i = 0; i < tree.length; i++) {
-      var item = resolveForwardRef(tree[i]);
-      if (isArray(item)) {
-        this._flattenList(item, out);
-      } else {
-        out.push(item);
-      }
-    }
-  }
-
-  private static _isValidDirective(value: Type | Binding): boolean {
-    return isPresent(value) && (value instanceof Type || value instanceof Binding);
-  }
-
-  private static _assertTypeIsComponent(directiveBinding: DirectiveBinding): void {
-    if (directiveBinding.metadata.type !== renderApi.DirectiveMetadata.COMPONENT_TYPE) {
-      throw new BaseException(
-          `Could not load '${stringify(directiveBinding.key.token)}' because it is not a component.`);
-    }
-  }
-}
diff --git a/modules/angular2/src/core/compiler/component_url_mapper.ts b/modules/angular2/src/core/compiler/component_url_mapper.ts
deleted file mode 100644
index 038ff34af301..000000000000
--- a/modules/angular2/src/core/compiler/component_url_mapper.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {Type, isPresent} from 'angular2/src/facade/lang';
-import {Map, MapWrapper} from 'angular2/src/facade/collection';
-
-@Injectable()
-export class ComponentUrlMapper {
-  // Returns the base URL to the component source file.
-  // The returned URL could be:
-  // - an absolute URL,
-  // - a path relative to the application
-  getUrl(component: Type): string { return './'; }
-}
-
-export class RuntimeComponentUrlMapper extends ComponentUrlMapper {
-  _componentUrls: Map<Type, string>;
-
-  constructor() {
-    super();
-    this._componentUrls = new Map();
-  }
-
-  setComponentUrl(component: Type, url: string) { this._componentUrls.set(component, url); }
-
-  getUrl(component: Type): string {
-    var url = this._componentUrls.get(component);
-    if (isPresent(url)) return url;
-    return super.getUrl(component);
-  }
-}
diff --git a/modules/angular2/src/core/compiler/directive_lifecycle_reflector.dart b/modules/angular2/src/core/compiler/directive_lifecycle_reflector.dart
deleted file mode 100644
index c035e996d560..000000000000
--- a/modules/angular2/src/core/compiler/directive_lifecycle_reflector.dart
+++ /dev/null
@@ -1,28 +0,0 @@
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'package:angular2/src/core/compiler/interfaces.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-
-bool hasLifecycleHook(LifecycleEvent e, type, Directive annotation) {
-  if (annotation.lifecycle != null) {
-    return annotation.lifecycle.contains(e);
-  } else {
-    if (type is! Type) return false;
-
-    final List interfaces = reflector.interfaces(type);
-    var interface;
-
-    if (e == onChange) {
-      interface = OnChange;
-    } else if (e == onDestroy) {
-      interface = OnDestroy;
-    } else if (e == onAllChangesDone) {
-      interface = OnAllChangesDone;
-    } else if (e == onCheck) {
-      interface = OnCheck;
-    } else if (e == onInit) {
-      interface = OnInit;
-    }
-
-    return interfaces.contains(interface);
-  }
-}
diff --git a/modules/angular2/src/core/compiler/directive_lifecycle_reflector.ts b/modules/angular2/src/core/compiler/directive_lifecycle_reflector.ts
deleted file mode 100644
index f58af0c12a0c..000000000000
--- a/modules/angular2/src/core/compiler/directive_lifecycle_reflector.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Type, isPresent} from 'angular2/src/facade/lang';
-import {LifecycleEvent, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-export function hasLifecycleHook(e: LifecycleEvent, type, annotation: Directive): boolean {
-  if (isPresent(annotation.lifecycle)) {
-    return annotation.lifecycle.indexOf(e) !== -1;
-  } else {
-    if (!(type instanceof Type)) return false;
-    return e.name in(<any>type).prototype;
-  }
-}
\ No newline at end of file
diff --git a/modules/angular2/src/core/compiler/directive_resolver.ts b/modules/angular2/src/core/compiler/directive_resolver.ts
deleted file mode 100644
index 0517336f8462..000000000000
--- a/modules/angular2/src/core/compiler/directive_resolver.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {resolveForwardRef, Injectable} from 'angular2/di';
-import {Type, isPresent, BaseException, stringify} from 'angular2/src/facade/lang';
-import {Directive} from '../annotations_impl/annotations';
-import {reflector} from 'angular2/src/reflection/reflection';
-
-@Injectable()
-export class DirectiveResolver {
-  resolve(type: Type): Directive {
-    var annotations = reflector.annotations(resolveForwardRef(type));
-    if (isPresent(annotations)) {
-      for (var i = 0; i < annotations.length; i++) {
-        var annotation = annotations[i];
-        if (annotation instanceof Directive) {
-          return annotation;
-        }
-      }
-    }
-    throw new BaseException(`No Directive annotation found on ${stringify(type)}`);
-  }
-}
diff --git a/modules/angular2/src/core/compiler/dynamic_component_loader.ts b/modules/angular2/src/core/compiler/dynamic_component_loader.ts
deleted file mode 100644
index f188547a6426..000000000000
--- a/modules/angular2/src/core/compiler/dynamic_component_loader.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import {Key, Injector, ResolvedBinding, Binding, bind, Injectable} from 'angular2/di';
-import {Compiler} from './compiler';
-import {Type, BaseException, stringify, isPresent} from 'angular2/src/facade/lang';
-import {Promise} from 'angular2/src/facade/async';
-import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {ElementRef} from './element_ref';
-import {ViewRef} from './view_ref';
-
-/**
- * @exportedAs angular2/view
- */
-export class ComponentRef {
-  constructor(public location: ElementRef, public instance: any, public dispose: Function) {}
-
-  get hostView(): ViewRef { return this.location.parentView; }
-}
-
-/**
- * Service for dynamically loading a Component into an arbitrary position in the internal Angular
- * application tree.
- *
- * @exportedAs angular2/view
- */
-@Injectable()
-export class DynamicComponentLoader {
-  constructor(private _compiler: Compiler, private _viewManager: AppViewManager) {}
-
-  /**
-   * Loads a root component that is placed at the first element that matches the
-   * component's selector.
-   * The loaded component receives injection normally as a hosted view.
-   */
-  loadAsRoot(typeOrBinding: Type | Binding, overrideSelector: string,
-             injector: Injector): Promise<ComponentRef> {
-    return this._compiler.compileInHost(typeOrBinding)
-        .then(hostProtoViewRef => {
-          var hostViewRef =
-              this._viewManager.createRootHostView(hostProtoViewRef, overrideSelector, injector);
-          var newLocation = this._viewManager.getHostElement(hostViewRef);
-          var component = this._viewManager.getComponent(newLocation);
-
-          var dispose = () => { this._viewManager.destroyRootHostView(hostViewRef); };
-          return new ComponentRef(newLocation, component, dispose);
-        });
-  }
-
-  /**
-   * Loads a component into the component view of the provided ElementRef
-   * next to the element with the given name
-   * The loaded component receives
-   * injection normally as a hosted view.
-   */
-  loadIntoLocation(typeOrBinding: Type | Binding, hostLocation: ElementRef, anchorName: string,
-                   bindings: ResolvedBinding[] = null): Promise<ComponentRef> {
-    return this.loadNextToLocation(
-        typeOrBinding, this._viewManager.getNamedElementInComponentView(hostLocation, anchorName),
-        bindings);
-  }
-
-  /**
-   * Loads a component next to the provided ElementRef. The loaded component receives
-   * injection normally as a hosted view.
-   */
-  loadNextToLocation(typeOrBinding: Type | Binding, location: ElementRef,
-                     bindings: ResolvedBinding[] = null): Promise<ComponentRef> {
-    return this._compiler.compileInHost(typeOrBinding)
-        .then(hostProtoViewRef => {
-          var viewContainer = this._viewManager.getViewContainer(location);
-          var hostViewRef =
-              viewContainer.create(hostProtoViewRef, viewContainer.length, null, bindings);
-          var newLocation = this._viewManager.getHostElement(hostViewRef);
-          var component = this._viewManager.getComponent(newLocation);
-
-          var dispose = () => {
-            var index = viewContainer.indexOf(hostViewRef);
-            if (index !== -1) {
-              viewContainer.remove(index);
-            }
-          };
-          return new ComponentRef(newLocation, component, dispose);
-        });
-  }
-}
diff --git a/modules/angular2/src/core/compiler/element_binder.ts b/modules/angular2/src/core/compiler/element_binder.ts
deleted file mode 100644
index adca11aa3dbf..000000000000
--- a/modules/angular2/src/core/compiler/element_binder.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {AST} from 'angular2/change_detection';
-import {isBlank, isPresent, BaseException} from 'angular2/src/facade/lang';
-import * as eiModule from './element_injector';
-import {DirectiveBinding} from './element_injector';
-import {List, StringMap} from 'angular2/src/facade/collection';
-import * as viewModule from './view';
-
-export class ElementBinder {
-  // updated later, so we are able to resolve cycles
-  nestedProtoView: viewModule.AppProtoView = null;
-  // updated later when events are bound
-  hostListeners: StringMap<string, Map<number, AST>> = null;
-
-  constructor(public index: int, public parent: ElementBinder, public distanceToParent: int,
-              public protoElementInjector: eiModule.ProtoElementInjector,
-              public componentDirective: DirectiveBinding) {
-    if (isBlank(index)) {
-      throw new BaseException('null index not allowed.');
-    }
-  }
-
-  hasStaticComponent(): boolean {
-    return isPresent(this.componentDirective) && isPresent(this.nestedProtoView);
-  }
-
-  hasEmbeddedProtoView(): boolean {
-    return !isPresent(this.componentDirective) && isPresent(this.nestedProtoView);
-  }
-}
diff --git a/modules/angular2/src/core/compiler/element_injector.ts b/modules/angular2/src/core/compiler/element_injector.ts
deleted file mode 100644
index 8eed251d4aed..000000000000
--- a/modules/angular2/src/core/compiler/element_injector.ts
+++ /dev/null
@@ -1,1046 +0,0 @@
-import {
-  isPresent,
-  isBlank,
-  Type,
-  BaseException,
-  stringify,
-  CONST_EXPR,
-  StringWrapper
-} from 'angular2/src/facade/lang';
-import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {
-  Injector,
-  ProtoInjector,
-  PUBLIC_AND_PRIVATE,
-  PUBLIC,
-  PRIVATE,
-  undefinedValue,
-  Key,
-  Dependency,
-  bind,
-  Binding,
-  ResolvedBinding,
-  NoBindingError,
-  AbstractBindingError,
-  CyclicDependencyError,
-  resolveForwardRef,
-  resolveBindings,
-  Visibility,
-  VisibilityAnnotation,
-  self
-} from 'angular2/di';
-import {
-  InjectorInlineStrategy,
-  InjectorDynamicStrategy,
-  BindingWithVisibility
-} from 'angular2/src/di/injector';
-
-import {Attribute, Query} from 'angular2/src/core/annotations_impl/di';
-
-import * as viewModule from './view';
-import * as avmModule from './view_manager';
-import {ViewContainerRef} from './view_container_ref';
-import {ElementRef} from './element_ref';
-import {ProtoViewRef, ViewRef} from './view_ref';
-import {
-  Directive,
-  Component,
-  onChange,
-  onDestroy,
-  onCheck,
-  onInit,
-  onAllChangesDone
-} from 'angular2/src/core/annotations_impl/annotations';
-import {hasLifecycleHook} from './directive_lifecycle_reflector';
-import {ChangeDetector, ChangeDetectorRef} from 'angular2/change_detection';
-import {QueryList} from './query_list';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {DirectiveMetadata} from 'angular2/src/render/api';
-
-var _staticKeys;
-
-class StaticKeys {
-  viewManagerId: number;
-  protoViewId: number;
-  viewContainerId: number;
-  changeDetectorRefId: number;
-  elementRefId: number;
-
-  constructor() {
-    // TODO: vsavkin Key.annotate(Key.get(AppView), 'static')
-    this.viewManagerId = Key.get(avmModule.AppViewManager).id;
-    this.protoViewId = Key.get(ProtoViewRef).id;
-    this.viewContainerId = Key.get(ViewContainerRef).id;
-    this.changeDetectorRefId = Key.get(ChangeDetectorRef).id;
-    this.elementRefId = Key.get(ElementRef).id;
-  }
-
-  static instance(): StaticKeys {
-    if (isBlank(_staticKeys)) _staticKeys = new StaticKeys();
-    return _staticKeys;
-  }
-}
-
-export class TreeNode<T extends TreeNode<any>> {
-  _parent: T;
-  _head: T = null;
-  _tail: T = null;
-  _next: T = null;
-  constructor(parent: T) {
-    if (isPresent(parent)) parent.addChild(this);
-  }
-
-  /**
-   * Adds a child to the parent node. The child MUST NOT be a part of a tree.
-   */
-  addChild(child: T): void {
-    if (isPresent(this._tail)) {
-      this._tail._next = child;
-      this._tail = child;
-    } else {
-      this._tail = this._head = child;
-    }
-    child._next = null;
-    child._parent = this;
-  }
-
-  /**
-   * Adds a child to the parent node after a given sibling.
-   * The child MUST NOT be a part of a tree and the sibling must be present.
-   */
-  addChildAfter(child: T, prevSibling: T): void {
-    if (isBlank(prevSibling)) {
-      var prevHead = this._head;
-      this._head = child;
-      child._next = prevHead;
-      if (isBlank(this._tail)) this._tail = child;
-    } else if (isBlank(prevSibling._next)) {
-      this.addChild(child);
-      return;
-    } else {
-      child._next = prevSibling._next;
-      prevSibling._next = child;
-    }
-    child._parent = this;
-  }
-
-  /**
-   * Detaches a node from the parent's tree.
-   */
-  remove(): void {
-    if (isBlank(this.parent)) return;
-    var nextSibling = this._next;
-    var prevSibling = this._findPrev();
-    if (isBlank(prevSibling)) {
-      this.parent._head = this._next;
-    } else {
-      prevSibling._next = this._next;
-    }
-    if (isBlank(nextSibling)) {
-      this._parent._tail = prevSibling;
-    }
-    this._parent = null;
-    this._next = null;
-  }
-
-  /**
-   * Finds a previous sibling or returns null if first child.
-   * Assumes the node has a parent.
-   * TODO(rado): replace with DoublyLinkedList to avoid O(n) here.
-   */
-  _findPrev() {
-    var node = this.parent._head;
-    if (node == this) return null;
-    while (node._next !== this) node = node._next;
-    return node;
-  }
-
-  get parent() { return this._parent; }
-
-  // TODO(rado): replace with a function call, does too much work for a getter.
-  get children(): T[] {
-    var res = [];
-    var child = this._head;
-    while (child != null) {
-      res.push(child);
-      child = child._next;
-    }
-    return res;
-  }
-}
-
-export class DirectiveDependency extends Dependency {
-  constructor(key: Key, optional: boolean, visibility: any, properties: List<any>,
-              public attributeName: string, public queryDecorator: Query) {
-    super(key, optional, visibility, properties);
-    this._verify();
-  }
-
-  _verify(): void {
-    var count = 0;
-    if (isPresent(this.queryDecorator)) count++;
-    if (isPresent(this.attributeName)) count++;
-    if (count > 1)
-      throw new BaseException(
-          'A directive injectable can contain only one of the following @Attribute or @Query.');
-  }
-
-  static createFrom(d: Dependency): Dependency {
-    return new DirectiveDependency(d.key, d.optional, d.visibility, d.properties,
-                                   DirectiveDependency._attributeName(d.properties),
-                                   DirectiveDependency._query(d.properties));
-  }
-
-  static _attributeName(properties): string {
-    var p = <Attribute>ListWrapper.find(properties, (p) => p instanceof Attribute);
-    return isPresent(p) ? p.attributeName : null;
-  }
-
-  static _query(properties): Query {
-    return <Query>ListWrapper.find(properties, (p) => p instanceof Query);
-  }
-}
-
-export class DirectiveBinding extends ResolvedBinding {
-  constructor(key: Key, factory: Function, dependencies: List<Dependency>,
-              public resolvedHostInjectables: List<ResolvedBinding>,
-              public resolvedViewInjectables: List<ResolvedBinding>,
-              public metadata: DirectiveMetadata) {
-    super(key, factory, dependencies);
-  }
-
-  get callOnDestroy(): boolean { return this.metadata.callOnDestroy; }
-
-  get callOnChange(): boolean { return this.metadata.callOnChange; }
-
-  get callOnAllChangesDone(): boolean { return this.metadata.callOnAllChangesDone; }
-
-  get displayName(): string { return this.key.displayName; }
-
-  get eventEmitters(): List<string> {
-    return isPresent(this.metadata) && isPresent(this.metadata.events) ? this.metadata.events : [];
-  }
-
-  get hostActions(): Map<string, string> {
-    return isPresent(this.metadata) && isPresent(this.metadata.hostActions) ?
-               this.metadata.hostActions :
-               new Map();
-  }
-
-  get changeDetection() { return this.metadata.changeDetection; }
-
-  static createFromBinding(binding: Binding, ann: Directive): DirectiveBinding {
-    if (isBlank(ann)) {
-      ann = new Directive();
-    }
-
-    var rb = binding.resolve();
-    var deps = ListWrapper.map(rb.dependencies, DirectiveDependency.createFrom);
-    var resolvedHostInjectables =
-        isPresent(ann.hostInjector) ? resolveBindings(ann.hostInjector) : [];
-    var resolvedViewInjectables = ann instanceof Component && isPresent(ann.viewInjector) ?
-                                                     resolveBindings(ann.viewInjector) :
-                                                     [];
-    var metadata = DirectiveMetadata.create({
-      id: stringify(rb.key.token),
-      type: ann instanceof
-          Component ? DirectiveMetadata.COMPONENT_TYPE : DirectiveMetadata.DIRECTIVE_TYPE,
-      selector: ann.selector,
-      compileChildren: ann.compileChildren,
-      events: ann.events,
-      host: isPresent(ann.host) ? MapWrapper.createFromStringMap(ann.host) : null,
-      properties: ann.properties,
-      readAttributes: DirectiveBinding._readAttributes(deps),
-
-      callOnDestroy: hasLifecycleHook(onDestroy, rb.key.token, ann),
-      callOnChange: hasLifecycleHook(onChange, rb.key.token, ann),
-      callOnCheck: hasLifecycleHook(onCheck, rb.key.token, ann),
-      callOnInit: hasLifecycleHook(onInit, rb.key.token, ann),
-      callOnAllChangesDone: hasLifecycleHook(onAllChangesDone, rb.key.token, ann),
-
-      changeDetection: ann instanceof
-          Component ? ann.changeDetection : null,
-
-      exportAs: ann.exportAs
-    });
-    return new DirectiveBinding(rb.key, rb.factory, deps, resolvedHostInjectables,
-                                resolvedViewInjectables, metadata);
-  }
-
-  static _readAttributes(deps) {
-    var readAttributes = [];
-    ListWrapper.forEach(deps, (dep) => {
-      if (isPresent(dep.attributeName)) {
-        readAttributes.push(dep.attributeName);
-      }
-    });
-    return readAttributes;
-  }
-
-  static createFromType(type: Type, annotation: Directive): DirectiveBinding {
-    var binding = new Binding(type, {toClass: type});
-    return DirectiveBinding.createFromBinding(binding, annotation);
-  }
-}
-
-// TODO(rado): benchmark and consider rolling in as ElementInjector fields.
-export class PreBuiltObjects {
-  constructor(public viewManager: avmModule.AppViewManager, public view: viewModule.AppView,
-              public protoView: viewModule.AppProtoView) {}
-}
-
-export class EventEmitterAccessor {
-  constructor(public eventName: string, public getter: Function) {}
-
-  subscribe(view: viewModule.AppView, boundElementIndex: number, directive: Object): Object {
-    var eventEmitter = this.getter(directive);
-    return ObservableWrapper.subscribe(
-        eventEmitter,
-        eventObj => view.triggerEventHandlers(this.eventName, eventObj, boundElementIndex));
-  }
-}
-
-export class HostActionAccessor {
-  constructor(public methodName: string, public getter: Function) {}
-
-  subscribe(view: viewModule.AppView, boundElementIndex: number, directive: Object): Object {
-    var eventEmitter = this.getter(directive);
-    return ObservableWrapper.subscribe(
-        eventEmitter,
-        actionArgs => view.invokeElementMethod(boundElementIndex, this.methodName, actionArgs));
-  }
-}
-
-function _createEventEmitterAccessors(bwv: BindingWithVisibility): EventEmitterAccessor[] {
-  var binding = bwv.binding;
-  if (!(binding instanceof DirectiveBinding)) return [];
-  var db = <DirectiveBinding>binding;
-  return ListWrapper.map(db.eventEmitters, eventConfig => {
-    let fieldName;
-    let eventName;
-    var colonIdx = eventConfig.indexOf(':');
-    if (colonIdx > -1) {
-      // long format: 'fieldName: eventName'
-      fieldName = StringWrapper.substring(eventConfig, 0, colonIdx).trim();
-      eventName = StringWrapper.substring(eventConfig, colonIdx + 1).trim();
-    } else {
-      // short format: 'name' when fieldName and eventName are the same
-      fieldName = eventName = eventConfig;
-    }
-    return new EventEmitterAccessor(eventName, reflector.getter(fieldName));
-  });
-}
-
-function _createHostActionAccessors(bwv: BindingWithVisibility): HostActionAccessor[] {
-  var binding = bwv.binding;
-  if (!(binding instanceof DirectiveBinding)) return [];
-  var res = [];
-  var db = <DirectiveBinding>binding;
-  MapWrapper.forEach(db.hostActions, (actionExpression, actionName) => {
-    res.push(new HostActionAccessor(actionExpression, reflector.getter(actionName)));
-  });
-  return res;
-}
-
-export class ProtoElementInjector {
-  view: viewModule.AppView;
-  attributes: Map<string, string>;
-  eventEmitterAccessors: List<List<EventEmitterAccessor>>;
-  hostActionAccessors: List<List<HostActionAccessor>>;
-  protoInjector: ProtoInjector;
-
-  static create(parent: ProtoElementInjector, index: number, bindings: List<ResolvedBinding>,
-                firstBindingIsComponent: boolean, distanceToParent: number,
-                directiveVariableBindings: Map<string, number>): ProtoElementInjector {
-    var bd = [];
-
-    ProtoElementInjector._createDirectiveBindingWithVisibility(bindings, bd,
-                                                               firstBindingIsComponent);
-    if (firstBindingIsComponent) {
-      ProtoElementInjector._createViewInjectorBindingWithVisibility(bindings, bd);
-    }
-    ProtoElementInjector._createHostInjectorBindingWithVisibility(bindings, bd,
-                                                                  firstBindingIsComponent);
-    return new ProtoElementInjector(parent, index, bd, distanceToParent, firstBindingIsComponent,
-                                    directiveVariableBindings);
-  }
-
-  private static _createDirectiveBindingWithVisibility(dirBindings: List<ResolvedBinding>,
-                                                       bd: BindingWithVisibility[],
-                                                       firstBindingIsComponent: boolean) {
-    ListWrapper.forEach(dirBindings, dirBinding => {
-      bd.push(ProtoElementInjector._createBindingWithVisibility(firstBindingIsComponent, dirBinding,
-                                                                dirBindings, dirBinding));
-    });
-  }
-
-  private static _createHostInjectorBindingWithVisibility(dirBindings: List<ResolvedBinding>,
-                                                          bd: BindingWithVisibility[],
-                                                          firstBindingIsComponent: boolean) {
-    ListWrapper.forEach(dirBindings, dirBinding => {
-      ListWrapper.forEach(dirBinding.resolvedHostInjectables, b => {
-        bd.push(ProtoElementInjector._createBindingWithVisibility(firstBindingIsComponent,
-                                                                  dirBinding, dirBindings, b));
-      });
-    });
-  }
-
-  private static _createBindingWithVisibility(firstBindingIsComponent, dirBinding, dirBindings,
-                                              binding) {
-    var isComponent = firstBindingIsComponent && dirBindings[0] === dirBinding;
-    return new BindingWithVisibility(binding, isComponent ? PUBLIC_AND_PRIVATE : PUBLIC);
-  }
-
-  private static _createViewInjectorBindingWithVisibility(bindings: List<ResolvedBinding>,
-                                                          bd: BindingWithVisibility[]) {
-    var db = <DirectiveBinding>bindings[0];
-    ListWrapper.forEach(db.resolvedViewInjectables,
-                        b => bd.push(new BindingWithVisibility(b, PRIVATE)));
-  }
-
-
-
-  constructor(public parent: ProtoElementInjector, public index: int, bwv: BindingWithVisibility[],
-              public distanceToParent: number, public _firstBindingIsComponent: boolean,
-              public directiveVariableBindings: Map<string, number>) {
-    var length = bwv.length;
-
-    this.protoInjector = new ProtoInjector(bwv, distanceToParent);
-
-    this.eventEmitterAccessors = ListWrapper.createFixedSize(length);
-    this.hostActionAccessors = ListWrapper.createFixedSize(length);
-
-    for (var i = 0; i < length; ++i) {
-      this.eventEmitterAccessors[i] = _createEventEmitterAccessors(bwv[i]);
-      this.hostActionAccessors[i] = _createHostActionAccessors(bwv[i]);
-    }
-  }
-
-  instantiate(parent: ElementInjector): ElementInjector {
-    return new ElementInjector(this, parent);
-  }
-
-  directParent(): ProtoElementInjector { return this.distanceToParent < 2 ? this.parent : null; }
-
-  get hasBindings(): boolean { return this.eventEmitterAccessors.length > 0; }
-
-  getBindingAtIndex(index: number): any { return this.protoInjector.getBindingAtIndex(index); }
-}
-
-
-export class ElementInjector extends TreeNode<ElementInjector> {
-  private _host: ElementInjector;
-  private _preBuiltObjects = null;
-
-  // Queries are added during construction or linking with a new parent.
-  // They are never removed.
-  private _query0: QueryRef;
-  private _query1: QueryRef;
-  private _query2: QueryRef;
-
-  hydrated: boolean;
-
-  private _injector: Injector;
-  private _strategy: _ElementInjectorStrategy;
-
-  constructor(public _proto: ProtoElementInjector, parent: ElementInjector) {
-    super(parent);
-
-    this._injector = new Injector(this._proto.protoInjector);
-    this._injector.ei = this;  // TODO savkin remove after mergin DI and EI
-
-    // we couple ourselves to the injector strategy to avoid polymoprhic calls
-    var injectorStrategy = <any>this._injector.internalStrategy;
-    this._strategy = injectorStrategy instanceof InjectorInlineStrategy ?
-                                                     new ElementInjectorInlineStrategy(
-                                                         injectorStrategy, this) :
-                                                     new ElementInjectorDynamicStrategy(
-                                                         injectorStrategy, this);
-
-    this.hydrated = false;
-
-    this._buildQueries();
-    this._addParentQueries();
-  }
-
-  dehydrate(): void {
-    this.hydrated = false;
-    this._host = null;
-    this._preBuiltObjects = null;
-    this._strategy.callOnDestroy();
-    this._injector.internalStrategy.dehydrate();
-  }
-
-  onAllChangesDone(): void {
-    if (isPresent(this._query0) && this._query0.originator === this) {
-      this._query0.list.fireCallbacks();
-    }
-    if (isPresent(this._query1) && this._query1.originator === this) {
-      this._query1.list.fireCallbacks();
-    }
-    if (isPresent(this._query2) && this._query2.originator === this) {
-      this._query2.list.fireCallbacks();
-    }
-  }
-
-  hydrate(imperativelyCreatedInjector: Injector, host: ElementInjector,
-          preBuiltObjects: PreBuiltObjects): void {
-    this._host = host;
-    this._preBuiltObjects = preBuiltObjects;
-
-    this._hydrateInjector(imperativelyCreatedInjector, host);
-
-    this._addDirectivesToQueries();
-    this._addVarBindingsToQueries();
-
-    this.hydrated = true;
-  }
-
-  private _hydrateInjector(imperativelyCreatedInjector: Injector, host: ElementInjector): void {
-    if (isPresent(this._parent)) {
-      this._reattachInjector(this._injector, this._parent._injector, false);
-    } else {
-      // This injector is at the boundary.
-      //
-      // The injector tree we are assembling:
-      //
-      // host._injector (only if present)
-      //   |
-      //   |boundary
-      //   |
-      // imperativelyCreatedInjector (only if present)
-      //   |
-      //   |boundary
-      //   |
-      // this._injector
-      //
-
-      // host._injector (only if present)
-      //   |
-      //   |boundary
-      //   |
-      // imperativelyCreatedInjector (only if present)
-      if (isPresent(imperativelyCreatedInjector) && isPresent(host)) {
-        this._reattachInjector(imperativelyCreatedInjector, host._injector, true);
-      }
-
-      // host._injector OR imperativelyCreatedInjector OR null
-      //   |
-      //   |boundary
-      //   |
-      // this._injector
-      var parent = this._getParentInjector(imperativelyCreatedInjector, host);
-      this._reattachInjector(this._injector, parent, true);
-    }
-  }
-
-  private _getParentInjector(injector: Injector, host: ElementInjector): Injector {
-    if (isPresent(injector)) {
-      return injector;
-    } else if (isPresent(host)) {
-      return host._injector;
-    } else {
-      return null;
-    }
-  }
-
-  private _reattachInjector(injector: Injector, parentInjector: Injector, isBoundary: boolean) {
-    injector.internalStrategy.attach(parentInjector, isBoundary);
-    injector.internalStrategy.hydrate();
-  }
-
-  hasVariableBinding(name: string): boolean {
-    var vb = this._proto.directiveVariableBindings;
-    return isPresent(vb) && vb.has(name);
-  }
-
-  getVariableBinding(name: string): any {
-    var index = this._proto.directiveVariableBindings.get(name);
-    return isPresent(index) ? this.getDirectiveAtIndex(<number>index) : this.getElementRef();
-  }
-
-  get(token): any { return this._injector.get(token); }
-
-  hasDirective(type: Type): boolean { return isPresent(this._injector.getOptional(type)); }
-
-  getEventEmitterAccessors(): List<List<EventEmitterAccessor>> {
-    return this._proto.eventEmitterAccessors;
-  }
-
-  getHostActionAccessors(): List<List<HostActionAccessor>> {
-    return this._proto.hostActionAccessors;
-  }
-
-  getDirectiveVariableBindings(): Map<string, number> {
-    return this._proto.directiveVariableBindings;
-  }
-
-  getComponent(): any { return this._strategy.getComponent(); }
-
-  getElementRef(): ElementRef { return this._preBuiltObjects.view.elementRefs[this._proto.index]; }
-
-  getViewContainerRef(): ViewContainerRef {
-    return new ViewContainerRef(this._preBuiltObjects.viewManager, this.getElementRef());
-  }
-
-  directParent(): ElementInjector { return this._proto.distanceToParent < 2 ? this.parent : null; }
-
-  isComponentKey(key: Key): boolean { return this._strategy.isComponentKey(key); }
-
-  getDependency(dep: any): any {
-    var key: Key = dep.key;
-
-    if (!(dep instanceof DirectiveDependency)) return undefinedValue;
-
-    var dirDep = <DirectiveDependency>dep;
-    var staticKeys = StaticKeys.instance();
-
-
-    if (key.id === staticKeys.viewManagerId) return this._preBuiltObjects.viewManager;
-
-    if (isPresent(dirDep.attributeName)) return this._buildAttribute(dirDep);
-
-    if (isPresent(dirDep.queryDecorator)) return this._findQuery(dirDep.queryDecorator).list;
-
-    if (dirDep.key.id === StaticKeys.instance().changeDetectorRefId) {
-      var componentView = this._preBuiltObjects.view.componentChildViews[this._proto.index];
-      return componentView.changeDetector.ref;
-    }
-
-    if (dirDep.key.id === StaticKeys.instance().elementRefId) {
-      return this.getElementRef();
-    }
-
-    if (dirDep.key.id === StaticKeys.instance().viewContainerId) {
-      return this.getViewContainerRef();
-    }
-
-    if (dirDep.key.id === StaticKeys.instance().protoViewId) {
-      if (isBlank(this._preBuiltObjects.protoView)) {
-        if (dirDep.optional) {
-          return null;
-        }
-
-        throw new NoBindingError(dirDep.key);
-      }
-      return new ProtoViewRef(this._preBuiltObjects.protoView);
-    }
-
-    return undefinedValue;
-  }
-
-  private _buildAttribute(dep: DirectiveDependency): string {
-    var attributes = this._proto.attributes;
-    if (isPresent(attributes) && attributes.has(dep.attributeName)) {
-      return attributes.get(dep.attributeName);
-    } else {
-      return null;
-    }
-  }
-
-  _buildQueriesForDeps(deps: List<DirectiveDependency>): void {
-    for (var i = 0; i < deps.length; i++) {
-      var dep = deps[i];
-      if (isPresent(dep.queryDecorator)) {
-        this._createQueryRef(dep.queryDecorator);
-      }
-    }
-  }
-
-  private _addVarBindingsToQueries(): void {
-    this._addVarBindingsToQuery(this._query0);
-    this._addVarBindingsToQuery(this._query1);
-    this._addVarBindingsToQuery(this._query2);
-  }
-
-  private _addDirectivesToQueries(): void {
-    this._addDirectivesToQuery(this._query0);
-    this._addDirectivesToQuery(this._query1);
-    this._addDirectivesToQuery(this._query2);
-  }
-
-  private _addVarBindingsToQuery(queryRef: QueryRef): void {
-    if (isBlank(queryRef) || !queryRef.query.isVarBindingQuery) return;
-
-    var vb = queryRef.query.varBindings;
-    for (var i = 0; i < vb.length; ++i) {
-      if (this.hasVariableBinding(vb[i])) {
-        queryRef.list.add(this.getVariableBinding(vb[i]));
-      }
-    }
-  }
-
-  private _addDirectivesToQuery(queryRef: QueryRef): void {
-    if (isBlank(queryRef) || queryRef.query.isVarBindingQuery) return;
-
-    var matched = [];
-    this.addDirectivesMatchingQuery(queryRef.query, matched);
-    matched.forEach(s => queryRef.list.add(s));
-  }
-
-  private _createQueryRef(query: Query): void {
-    var queryList = new QueryList<any>();
-    if (isBlank(this._query0)) {
-      this._query0 = new QueryRef(query, queryList, this);
-    } else if (isBlank(this._query1)) {
-      this._query1 = new QueryRef(query, queryList, this);
-    } else if (isBlank(this._query2)) {
-      this._query2 = new QueryRef(query, queryList, this);
-    } else {
-      throw new QueryError();
-    }
-  }
-
-  addDirectivesMatchingQuery(query: Query, list: any[]): void {
-    this._strategy.addDirectivesMatchingQuery(query, list);
-  }
-
-  private _buildQueries(): void {
-    if (isPresent(this._proto)) {
-      this._strategy.buildQueries();
-    }
-  }
-
-  private _findQuery(query): QueryRef {
-    if (isPresent(this._query0) && this._query0.query === query) {
-      return this._query0;
-    }
-    if (isPresent(this._query1) && this._query1.query === query) {
-      return this._query1;
-    }
-    if (isPresent(this._query2) && this._query2.query === query) {
-      return this._query2;
-    }
-    throw new BaseException(`Cannot find query for directive ${query}.`);
-  }
-
-  _hasQuery(query: QueryRef): boolean {
-    return this._query0 == query || this._query1 == query || this._query2 == query;
-  }
-
-  link(parent: ElementInjector): void {
-    parent.addChild(this);
-    this._addParentQueries();
-  }
-
-  linkAfter(parent: ElementInjector, prevSibling: ElementInjector): void {
-    parent.addChildAfter(this, prevSibling);
-    this._addParentQueries();
-  }
-
-  private _addParentQueries(): void {
-    if (isBlank(this.parent)) return;
-    if (isPresent(this.parent._query0)) {
-      this._addQueryToTree(this.parent._query0);
-      if (this.hydrated) this.parent._query0.update();
-    }
-    if (isPresent(this.parent._query1)) {
-      this._addQueryToTree(this.parent._query1);
-      if (this.hydrated) this.parent._query1.update();
-    }
-    if (isPresent(this.parent._query2)) {
-      this._addQueryToTree(this.parent._query2);
-      if (this.hydrated) this.parent._query2.update();
-    }
-  }
-
-  unlink(): void {
-    var queriesToUpdate = [];
-    if (isPresent(this.parent._query0)) {
-      this._pruneQueryFromTree(this.parent._query0);
-      queriesToUpdate.push(this.parent._query0);
-    }
-    if (isPresent(this.parent._query1)) {
-      this._pruneQueryFromTree(this.parent._query1);
-      queriesToUpdate.push(this.parent._query1);
-    }
-    if (isPresent(this.parent._query2)) {
-      this._pruneQueryFromTree(this.parent._query2);
-      queriesToUpdate.push(this.parent._query2);
-    }
-
-    this.remove();
-
-    ListWrapper.forEach(queriesToUpdate, (q) => q.update());
-  }
-
-  private _pruneQueryFromTree(query: QueryRef): void {
-    this._removeQueryRef(query);
-
-    var child = this._head;
-    while (isPresent(child)) {
-      child._pruneQueryFromTree(query);
-      child = child._next;
-    }
-  }
-
-  private _addQueryToTree(queryRef: QueryRef): void {
-    if (queryRef.query.descendants == false) {
-      if (this == queryRef.originator) {
-        this._addQueryToTreeSelfAndRecurse(queryRef);
-        // TODO(rado): add check for distance to parent = 1 when issue #2707 is fixed.
-      } else if (this.parent == queryRef.originator) {
-        this._assignQueryRef(queryRef);
-      }
-    } else {
-      this._addQueryToTreeSelfAndRecurse(queryRef);
-    }
-  }
-
-  private _addQueryToTreeSelfAndRecurse(queryRef: QueryRef): void {
-    this._assignQueryRef(queryRef);
-
-    var child = this._head;
-    while (isPresent(child)) {
-      child._addQueryToTree(queryRef);
-      child = child._next;
-    }
-  }
-
-  private _assignQueryRef(query: QueryRef): void {
-    if (isBlank(this._query0)) {
-      this._query0 = query;
-      return;
-    } else if (isBlank(this._query1)) {
-      this._query1 = query;
-      return;
-    } else if (isBlank(this._query2)) {
-      this._query2 = query;
-      return;
-    }
-    throw new QueryError();
-  }
-
-  private _removeQueryRef(query: QueryRef): void {
-    if (this._query0 == query) this._query0 = null;
-    if (this._query1 == query) this._query1 = null;
-    if (this._query2 == query) this._query2 = null;
-  }
-
-  getDirectiveAtIndex(index: number): any { return this._injector.getAt(index); }
-
-  hasInstances(): boolean { return this._proto.hasBindings && this.hydrated; }
-
-  getHost(): ElementInjector { return this._host; }
-
-  getBoundElementIndex(): number { return this._proto.index; }
-}
-
-interface _ElementInjectorStrategy {
-  callOnDestroy(): void;
-  getComponent(): any;
-  isComponentKey(key: Key): boolean;
-  buildQueries(): void;
-  addDirectivesMatchingQuery(q: Query, res: any[]): void;
-  getComponentBinding(): DirectiveBinding;
-}
-
-/**
- * Strategy used by the `ElementInjector` when the number of bindings is 10 or less.
- * In such a case, inlining fields is benefitial for performances.
- */
-class ElementInjectorInlineStrategy implements _ElementInjectorStrategy {
-  constructor(public injectorStrategy: InjectorInlineStrategy, public _ei: ElementInjector) {}
-
-  callOnDestroy(): void {
-    var i = this.injectorStrategy;
-    var p = i.protoStrategy;
-
-    if (p.binding0 instanceof DirectiveBinding && (<DirectiveBinding>p.binding0).callOnDestroy) {
-      i.obj0.onDestroy();
-    }
-    if (p.binding1 instanceof DirectiveBinding && (<DirectiveBinding>p.binding1).callOnDestroy) {
-      i.obj1.onDestroy();
-    }
-    if (p.binding2 instanceof DirectiveBinding && (<DirectiveBinding>p.binding2).callOnDestroy) {
-      i.obj2.onDestroy();
-    }
-    if (p.binding3 instanceof DirectiveBinding && (<DirectiveBinding>p.binding3).callOnDestroy) {
-      i.obj3.onDestroy();
-    }
-    if (p.binding4 instanceof DirectiveBinding && (<DirectiveBinding>p.binding4).callOnDestroy) {
-      i.obj4.onDestroy();
-    }
-    if (p.binding5 instanceof DirectiveBinding && (<DirectiveBinding>p.binding5).callOnDestroy) {
-      i.obj5.onDestroy();
-    }
-    if (p.binding6 instanceof DirectiveBinding && (<DirectiveBinding>p.binding6).callOnDestroy) {
-      i.obj6.onDestroy();
-    }
-    if (p.binding7 instanceof DirectiveBinding && (<DirectiveBinding>p.binding7).callOnDestroy) {
-      i.obj7.onDestroy();
-    }
-    if (p.binding8 instanceof DirectiveBinding && (<DirectiveBinding>p.binding8).callOnDestroy) {
-      i.obj8.onDestroy();
-    }
-    if (p.binding9 instanceof DirectiveBinding && (<DirectiveBinding>p.binding9).callOnDestroy) {
-      i.obj9.onDestroy();
-    }
-  }
-
-  getComponent(): any { return this.injectorStrategy.obj0; }
-
-  isComponentKey(key: Key): boolean {
-    return this._ei._proto._firstBindingIsComponent && isPresent(key) &&
-           key.id === this.injectorStrategy.protoStrategy.keyId0;
-  }
-
-  buildQueries(): void {
-    var p = this.injectorStrategy.protoStrategy;
-
-    if (p.binding0 instanceof DirectiveBinding) {
-      this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.binding0.dependencies);
-    }
-    if (p.binding1 instanceof DirectiveBinding) {
-      this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.binding1.dependencies);
-    }
-    if (p.binding2 instanceof DirectiveBinding) {
-      this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.binding2.dependencies);
-    }
-    if (p.binding3 instanceof DirectiveBinding) {
-      this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.binding3.dependencies);
-    }
-    if (p.binding4 instanceof DirectiveBinding) {
-      this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.binding4.dependencies);
-    }
-    if (p.binding5 instanceof DirectiveBinding) {
-      this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.binding5.dependencies);
-    }
-    if (p.binding6 instanceof DirectiveBinding) {
-      this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.binding6.dependencies);
-    }
-    if (p.binding7 instanceof DirectiveBinding) {
-      this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.binding7.dependencies);
-    }
-    if (p.binding8 instanceof DirectiveBinding) {
-      this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.binding8.dependencies);
-    }
-    if (p.binding9 instanceof DirectiveBinding) {
-      this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.binding9.dependencies);
-    }
-  }
-
-  addDirectivesMatchingQuery(query: Query, list: any[]): void {
-    var i = this.injectorStrategy;
-    var p = i.protoStrategy;
-
-    if (isPresent(p.binding0) && p.binding0.key.token === query.selector) list.push(i.obj0);
-    if (isPresent(p.binding1) && p.binding1.key.token === query.selector) list.push(i.obj1);
-    if (isPresent(p.binding2) && p.binding2.key.token === query.selector) list.push(i.obj2);
-    if (isPresent(p.binding3) && p.binding3.key.token === query.selector) list.push(i.obj3);
-    if (isPresent(p.binding4) && p.binding4.key.token === query.selector) list.push(i.obj4);
-    if (isPresent(p.binding5) && p.binding5.key.token === query.selector) list.push(i.obj5);
-    if (isPresent(p.binding6) && p.binding6.key.token === query.selector) list.push(i.obj6);
-    if (isPresent(p.binding7) && p.binding7.key.token === query.selector) list.push(i.obj7);
-    if (isPresent(p.binding8) && p.binding8.key.token === query.selector) list.push(i.obj8);
-    if (isPresent(p.binding9) && p.binding9.key.token === query.selector) list.push(i.obj9);
-  }
-
-  getComponentBinding(): DirectiveBinding {
-    var p = this.injectorStrategy.protoStrategy;
-    return <DirectiveBinding>p.binding0;
-  }
-}
-
-/**
- * Strategy used by the `ElementInjector` when the number of bindings is 10 or less.
- * In such a case, inlining fields is benefitial for performances.
- */
-class ElementInjectorDynamicStrategy implements _ElementInjectorStrategy {
-  constructor(public injectorStrategy: InjectorDynamicStrategy, public _ei: ElementInjector) {}
-
-  callOnDestroy(): void {
-    var ist = this.injectorStrategy;
-    var p = ist.protoStrategy;
-
-    for (var i = 0; i < p.bindings.length; i++) {
-      if (p.bindings[i] instanceof DirectiveBinding &&
-                                       (<DirectiveBinding>p.bindings[i]).callOnDestroy) {
-        ist.objs[i].onDestroy();
-      }
-    }
-  }
-
-  getComponent(): any { return this.injectorStrategy.objs[0]; }
-
-  isComponentKey(key: Key): boolean {
-    var p = this.injectorStrategy.protoStrategy;
-    return this._ei._proto._firstBindingIsComponent && isPresent(key) && key.id === p.keyIds[0];
-  }
-
-  buildQueries(): void {
-    var p = this.injectorStrategy.protoStrategy;
-
-    for (var i = 0; i < p.bindings.length; i++) {
-      if (p.bindings[i] instanceof DirectiveBinding) {
-        this._ei._buildQueriesForDeps(<List<DirectiveDependency>>p.bindings[i].dependencies);
-      }
-    }
-  }
-
-  addDirectivesMatchingQuery(query: Query, list: any[]): void {
-    var ist = this.injectorStrategy;
-    var p = ist.protoStrategy;
-
-    for (var i = 0; i < p.bindings.length; i++) {
-      if (p.bindings[i].key.token === query.selector) list.push(ist.objs[i]);
-    }
-  }
-
-  getComponentBinding(): DirectiveBinding {
-    var p = this.injectorStrategy.protoStrategy;
-    return <DirectiveBinding>p.bindings[0];
-  }
-}
-
-export class QueryError extends BaseException {
-  message: string;
-  // TODO(rado): pass the names of the active directives.
-  constructor() {
-    super();
-    this.message = 'Only 3 queries can be concurrently active in a template.';
-  }
-
-  toString(): string { return this.message; }
-}
-
-export class QueryRef {
-  constructor(public query: Query, public list: QueryList<any>,
-              public originator: ElementInjector) {}
-
-  update(): void {
-    var aggregator = [];
-    this.visit(this.originator, aggregator);
-    this.list.reset(aggregator);
-  }
-
-  visit(inj: ElementInjector, aggregator: any[]): void {
-    if (isBlank(inj) || !inj._hasQuery(this)) return;
-
-    if (this.query.isVarBindingQuery) {
-      this._aggregateVariableBindings(inj, aggregator);
-    } else {
-      this._aggregateDirective(inj, aggregator);
-    }
-
-    var child = inj._head;
-    while (isPresent(child)) {
-      this.visit(child, aggregator);
-      child = child._next;
-    }
-  }
-
-  private _aggregateVariableBindings(inj: ElementInjector, aggregator: List<any>): void {
-    var vb = this.query.varBindings;
-    for (var i = 0; i < vb.length; ++i) {
-      if (inj.hasVariableBinding(vb[i])) {
-        aggregator.push(inj.getVariableBinding(vb[i]));
-      }
-    }
-  }
-
-  private _aggregateDirective(inj: ElementInjector, aggregator: List<any>): void {
-    inj.addDirectivesMatchingQuery(this.query, aggregator);
-  }
-}
diff --git a/modules/angular2/src/core/compiler/element_ref.ts b/modules/angular2/src/core/compiler/element_ref.ts
deleted file mode 100644
index d5aeeb7db300..000000000000
--- a/modules/angular2/src/core/compiler/element_ref.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {BaseException} from 'angular2/src/facade/lang';
-import {ViewRef} from './view_ref';
-import {RenderViewRef, RenderElementRef, Renderer} from 'angular2/src/render/api';
-
-/**
- * @exportedAs angular2/view
- */
-export class ElementRef implements RenderElementRef {
-  constructor(public parentView: ViewRef, public boundElementIndex: number,
-              private _renderer: Renderer) {}
-
-  get renderView(): RenderViewRef { return this.parentView.render; }
-  // TODO(tbosch): remove this once Typescript supports declaring interfaces
-  // that contain getters
-  set renderView(viewRef: RenderViewRef) { throw new BaseException('Abstract setter'); }
-
-  /**
-   * Exposes the underlying native element.
-   * Attention: This won't work in a webworker scenario!
-   */
-  get nativeElement(): any { return this._renderer.getNativeElementSync(this); }
-}
diff --git a/modules/angular2/src/core/compiler/interfaces.ts b/modules/angular2/src/core/compiler/interfaces.ts
deleted file mode 100644
index 35c8f874a829..000000000000
--- a/modules/angular2/src/core/compiler/interfaces.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import {StringMap} from 'angular2/src/facade/collection';
-import {global} from 'angular2/src/facade/lang';
-
-// This is here only so that after TS transpilation the file is not empty.
-// TODO(rado): find a better way to fix this, or remove if likely culprit
-// https://github.com/systemjs/systemjs/issues/487 gets closed.
-var __ignore_me = global;
-/**
- * Defines lifecycle method [onChange] called after all of component's bound
- * properties are updated.
- */
-export interface OnChange { onChange(changes: StringMap<string, any>): void; }
-
-/**
- * Defines lifecycle method [onDestroy] called when a directive is being destroyed.
- */
-export interface OnDestroy { onDestroy(): void; }
-
-/**
- * Defines lifecycle method [onCheck] called when a directive is being checked.
- */
-export interface OnCheck { onCheck(): void; }
-
-/**
- * Defines lifecycle method [onInit] called when a directive is being checked the first time.
- */
-export interface OnInit { onInit(): void; }
-
-/**
- * Defines lifecycle method [onAllChangesDone ] called when the bindings of all its children have
- * been changed.
- */
-export interface OnAllChangesDone { onAllChangesDone(): void; }
diff --git a/modules/angular2/src/core/compiler/proto_view_factory.ts b/modules/angular2/src/core/compiler/proto_view_factory.ts
deleted file mode 100644
index ae785e749906..000000000000
--- a/modules/angular2/src/core/compiler/proto_view_factory.ts
+++ /dev/null
@@ -1,460 +0,0 @@
-import {Injectable} from 'angular2/di';
-
-import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
-import {reflector} from 'angular2/src/reflection/reflection';
-
-import {
-  ChangeDetection,
-  DirectiveIndex,
-  BindingRecord,
-  DirectiveRecord,
-  ProtoChangeDetector,
-  DEFAULT,
-  ChangeDetectorDefinition
-} from 'angular2/change_detection';
-
-import * as renderApi from 'angular2/src/render/api';
-import {AppProtoView} from './view';
-import {ElementBinder} from './element_binder';
-import {ProtoElementInjector, DirectiveBinding} from './element_injector';
-
-class BindingRecordsCreator {
-  _directiveRecordsMap: Map<number, DirectiveRecord> = new Map();
-  _textNodeIndex: number = 0;
-
-  getBindingRecords(elementBinders: List<renderApi.ElementBinder>,
-                    allDirectiveMetadatas: List<renderApi.DirectiveMetadata>): List<BindingRecord> {
-    var bindings = [];
-
-    for (var boundElementIndex = 0; boundElementIndex < elementBinders.length;
-         boundElementIndex++) {
-      var renderElementBinder = elementBinders[boundElementIndex];
-      this._createTextNodeRecords(bindings, renderElementBinder);
-      this._createElementPropertyRecords(bindings, boundElementIndex, renderElementBinder);
-      this._createDirectiveRecords(bindings, boundElementIndex, renderElementBinder.directives,
-                                   allDirectiveMetadatas);
-    }
-
-    return bindings;
-  }
-
-  getDirectiveRecords(
-      elementBinders: List<renderApi.ElementBinder>,
-      allDirectiveMetadatas: List<renderApi.DirectiveMetadata>): List<DirectiveRecord> {
-    var directiveRecords = [];
-
-    for (var elementIndex = 0; elementIndex < elementBinders.length; ++elementIndex) {
-      var dirs = elementBinders[elementIndex].directives;
-      for (var dirIndex = 0; dirIndex < dirs.length; ++dirIndex) {
-        directiveRecords.push(this._getDirectiveRecord(
-            elementIndex, dirIndex, allDirectiveMetadatas[dirs[dirIndex].directiveIndex]));
-      }
-    }
-
-    return directiveRecords;
-  }
-
-  _createTextNodeRecords(bindings: List<BindingRecord>,
-                         renderElementBinder: renderApi.ElementBinder) {
-    if (isBlank(renderElementBinder.textBindings)) return;
-
-    ListWrapper.forEach(renderElementBinder.textBindings, (b) => {
-      bindings.push(BindingRecord.createForTextNode(b, this._textNodeIndex++));
-    });
-  }
-
-  _createElementPropertyRecords(bindings: List<BindingRecord>, boundElementIndex: number,
-                                renderElementBinder: renderApi.ElementBinder) {
-    ListWrapper.forEach(renderElementBinder.propertyBindings, (binding) => {
-      if (binding.type === renderApi.PropertyBindingType.PROPERTY) {
-        bindings.push(BindingRecord.createForElementProperty(binding.astWithSource,
-                                                             boundElementIndex, binding.property));
-      } else if (binding.type === renderApi.PropertyBindingType.ATTRIBUTE) {
-        bindings.push(BindingRecord.createForElementAttribute(binding.astWithSource,
-                                                              boundElementIndex, binding.property));
-      } else if (binding.type === renderApi.PropertyBindingType.CLASS) {
-        bindings.push(BindingRecord.createForElementClass(binding.astWithSource, boundElementIndex,
-                                                          binding.property));
-      } else if (binding.type === renderApi.PropertyBindingType.STYLE) {
-        bindings.push(BindingRecord.createForElementStyle(binding.astWithSource, boundElementIndex,
-                                                          binding.property, binding.unit));
-      }
-    });
-  }
-
-  _createDirectiveRecords(bindings: List<BindingRecord>, boundElementIndex: number,
-                          directiveBinders: List<renderApi.DirectiveBinder>,
-                          allDirectiveMetadatas: List<renderApi.DirectiveMetadata>) {
-    for (var i = 0; i < directiveBinders.length; i++) {
-      var directiveBinder = directiveBinders[i];
-      var directiveMetadata = allDirectiveMetadatas[directiveBinder.directiveIndex];
-      var directiveRecord = this._getDirectiveRecord(boundElementIndex, i, directiveMetadata);
-
-      // directive properties
-      MapWrapper.forEach(directiveBinder.propertyBindings, (astWithSource, propertyName) => {
-        // TODO: these setters should eventually be created by change detection, to make
-        // it monomorphic!
-        var setter = reflector.setter(propertyName);
-        bindings.push(
-            BindingRecord.createForDirective(astWithSource, propertyName, setter, directiveRecord));
-      });
-
-      if (directiveRecord.callOnChange) {
-        bindings.push(BindingRecord.createDirectiveOnChange(directiveRecord));
-      }
-      if (directiveRecord.callOnInit) {
-        bindings.push(BindingRecord.createDirectiveOnInit(directiveRecord));
-      }
-      if (directiveRecord.callOnCheck) {
-        bindings.push(BindingRecord.createDirectiveOnCheck(directiveRecord));
-      }
-    }
-
-    for (var i = 0; i < directiveBinders.length; i++) {
-      var directiveBinder = directiveBinders[i];
-      // host properties
-      ListWrapper.forEach(directiveBinder.hostPropertyBindings, (binding) => {
-        var dirIndex = new DirectiveIndex(boundElementIndex, i);
-        if (binding.type === renderApi.PropertyBindingType.PROPERTY) {
-          bindings.push(BindingRecord.createForHostProperty(dirIndex, binding.astWithSource,
-                                                            binding.property));
-        } else if (binding.type === renderApi.PropertyBindingType.ATTRIBUTE) {
-          bindings.push(BindingRecord.createForHostAttribute(dirIndex, binding.astWithSource,
-                                                             binding.property));
-        } else if (binding.type === renderApi.PropertyBindingType.CLASS) {
-          bindings.push(
-              BindingRecord.createForHostClass(dirIndex, binding.astWithSource, binding.property));
-        } else if (binding.type === renderApi.PropertyBindingType.STYLE) {
-          bindings.push(BindingRecord.createForHostStyle(dirIndex, binding.astWithSource,
-                                                         binding.property, binding.unit));
-        }
-      });
-    }
-  }
-
-  _getDirectiveRecord(boundElementIndex: number, directiveIndex: number,
-                      directiveMetadata: renderApi.DirectiveMetadata): DirectiveRecord {
-    var id = boundElementIndex * 100 + directiveIndex;
-
-    if (!this._directiveRecordsMap.has(id)) {
-      this._directiveRecordsMap.set(
-          id, new DirectiveRecord({
-            directiveIndex: new DirectiveIndex(boundElementIndex, directiveIndex),
-            callOnAllChangesDone: directiveMetadata.callOnAllChangesDone,
-            callOnChange: directiveMetadata.callOnChange,
-            callOnCheck: directiveMetadata.callOnCheck,
-            callOnInit: directiveMetadata.callOnInit,
-            changeDetection: directiveMetadata.changeDetection
-          }));
-    }
-
-    return this._directiveRecordsMap.get(id);
-  }
-}
-
-@Injectable()
-export class ProtoViewFactory {
-  constructor(public _changeDetection: ChangeDetection) {}
-
-  createAppProtoViews(hostComponentBinding: DirectiveBinding,
-                      rootRenderProtoView: renderApi.ProtoViewDto,
-                      allDirectives: List<DirectiveBinding>): List<AppProtoView> {
-    var allRenderDirectiveMetadata =
-        ListWrapper.map(allDirectives, directiveBinding => directiveBinding.metadata);
-    var nestedPvsWithIndex = _collectNestedProtoViews(rootRenderProtoView);
-    var nestedPvVariableBindings = _collectNestedProtoViewsVariableBindings(nestedPvsWithIndex);
-    var nestedPvVariableNames = _collectNestedProtoViewsVariableNames(nestedPvsWithIndex);
-
-    var changeDetectorDefs =
-        _getChangeDetectorDefinitions(hostComponentBinding.metadata, nestedPvsWithIndex,
-                                      nestedPvVariableNames, allRenderDirectiveMetadata);
-    var protoChangeDetectors = ListWrapper.map(
-        changeDetectorDefs,
-        changeDetectorDef => this._changeDetection.createProtoChangeDetector(changeDetectorDef));
-    var appProtoViews = ListWrapper.createFixedSize(nestedPvsWithIndex.length);
-    ListWrapper.forEach(nestedPvsWithIndex, (pvWithIndex) => {
-      var appProtoView =
-          _createAppProtoView(pvWithIndex.renderProtoView, protoChangeDetectors[pvWithIndex.index],
-                              nestedPvVariableBindings[pvWithIndex.index], allDirectives);
-      if (isPresent(pvWithIndex.parentIndex)) {
-        var parentView = appProtoViews[pvWithIndex.parentIndex];
-        parentView.elementBinders[pvWithIndex.boundElementIndex].nestedProtoView = appProtoView;
-      }
-      appProtoViews[pvWithIndex.index] = appProtoView;
-    });
-    return appProtoViews;
-  }
-}
-
-/**
- * Returns the data needed to create ChangeDetectors
- * for the given ProtoView and all nested ProtoViews.
- */
-export function getChangeDetectorDefinitions(
-    hostComponentMetadata: renderApi.DirectiveMetadata, rootRenderProtoView: renderApi.ProtoViewDto,
-    allRenderDirectiveMetadata: List<renderApi.DirectiveMetadata>): List<ChangeDetectorDefinition> {
-  var nestedPvsWithIndex = _collectNestedProtoViews(rootRenderProtoView);
-  var nestedPvVariableNames = _collectNestedProtoViewsVariableNames(nestedPvsWithIndex);
-  return _getChangeDetectorDefinitions(hostComponentMetadata, nestedPvsWithIndex,
-                                       nestedPvVariableNames, allRenderDirectiveMetadata);
-}
-
-function _collectNestedProtoViews(
-    renderProtoView: renderApi.ProtoViewDto, parentIndex: number = null, boundElementIndex = null,
-    result: List<RenderProtoViewWithIndex> = null): List<RenderProtoViewWithIndex> {
-  if (isBlank(result)) {
-    result = [];
-  }
-  result.push(
-      new RenderProtoViewWithIndex(renderProtoView, result.length, parentIndex, boundElementIndex));
-  var currentIndex = result.length - 1;
-  var childBoundElementIndex = 0;
-  ListWrapper.forEach(renderProtoView.elementBinders, (elementBinder) => {
-    if (isPresent(elementBinder.nestedProtoView)) {
-      _collectNestedProtoViews(elementBinder.nestedProtoView, currentIndex, childBoundElementIndex,
-                               result);
-    }
-    childBoundElementIndex++;
-  });
-  return result;
-}
-
-function _getChangeDetectorDefinitions(
-    hostComponentMetadata: renderApi.DirectiveMetadata,
-    nestedPvsWithIndex: List<RenderProtoViewWithIndex>, nestedPvVariableNames: List<List<string>>,
-    allRenderDirectiveMetadata: List<renderApi.DirectiveMetadata>): List<ChangeDetectorDefinition> {
-  return ListWrapper.map(nestedPvsWithIndex, (pvWithIndex) => {
-    var elementBinders = pvWithIndex.renderProtoView.elementBinders;
-    var bindingRecordsCreator = new BindingRecordsCreator();
-    var bindingRecords =
-        bindingRecordsCreator.getBindingRecords(elementBinders, allRenderDirectiveMetadata);
-    var directiveRecords =
-        bindingRecordsCreator.getDirectiveRecords(elementBinders, allRenderDirectiveMetadata);
-    var strategyName = DEFAULT;
-    var typeString;
-    if (pvWithIndex.renderProtoView.type === renderApi.ViewType.COMPONENT) {
-      strategyName = hostComponentMetadata.changeDetection;
-      typeString = 'comp';
-    } else if (pvWithIndex.renderProtoView.type === renderApi.ViewType.HOST) {
-      typeString = 'host';
-    } else {
-      typeString = 'embedded';
-    }
-    var id = `${hostComponentMetadata.id}_${typeString}_${pvWithIndex.index}`;
-    var variableNames = nestedPvVariableNames[pvWithIndex.index];
-    return new ChangeDetectorDefinition(id, strategyName, variableNames, bindingRecords,
-                                        directiveRecords);
-  });
-}
-
-function _createAppProtoView(
-    renderProtoView: renderApi.ProtoViewDto, protoChangeDetector: ProtoChangeDetector,
-    variableBindings: Map<string, string>, allDirectives: List<DirectiveBinding>): AppProtoView {
-  var elementBinders = renderProtoView.elementBinders;
-  var protoView = new AppProtoView(renderProtoView.render, protoChangeDetector, variableBindings,
-                                   createVariableLocations(elementBinders));
-  _createElementBinders(protoView, elementBinders, allDirectives);
-  _bindDirectiveEvents(protoView, elementBinders);
-
-  return protoView;
-}
-
-function _collectNestedProtoViewsVariableBindings(
-    nestedPvsWithIndex: List<RenderProtoViewWithIndex>): List<Map<string, string>> {
-  return ListWrapper.map(nestedPvsWithIndex, (pvWithIndex) => {
-    return _createVariableBindings(pvWithIndex.renderProtoView);
-  });
-}
-
-function _createVariableBindings(renderProtoView): Map<string, string> {
-  var variableBindings = new Map();
-  MapWrapper.forEach(renderProtoView.variableBindings,
-                     (mappedName, varName) => { variableBindings.set(varName, mappedName); });
-  return variableBindings;
-}
-
-function _collectNestedProtoViewsVariableNames(
-    nestedPvsWithIndex: List<RenderProtoViewWithIndex>): List<List<string>> {
-  var nestedPvVariableNames = ListWrapper.createFixedSize(nestedPvsWithIndex.length);
-  ListWrapper.forEach(nestedPvsWithIndex, (pvWithIndex) => {
-    var parentVariableNames =
-        isPresent(pvWithIndex.parentIndex) ? nestedPvVariableNames[pvWithIndex.parentIndex] : null;
-    nestedPvVariableNames[pvWithIndex.index] =
-        _createVariableNames(parentVariableNames, pvWithIndex.renderProtoView);
-  });
-  return nestedPvVariableNames;
-}
-
-function _createVariableNames(parentVariableNames: List<string>, renderProtoView): List<string> {
-  var res =
-      isBlank(parentVariableNames) ? <List<string>>[] : ListWrapper.clone(parentVariableNames);
-  MapWrapper.forEach(renderProtoView.variableBindings,
-                     (mappedName, varName) => { res.push(mappedName); });
-  ListWrapper.forEach(renderProtoView.elementBinders, binder => {
-    MapWrapper.forEach(binder.variableBindings,
-                       (mappedName: string, varName: string) => { res.push(mappedName); });
-  });
-  return res;
-}
-
-export function createVariableLocations(
-    elementBinders: List<renderApi.ElementBinder>): Map<string, number> {
-  var variableLocations = new Map();
-  for (var i = 0; i < elementBinders.length; i++) {
-    var binder = elementBinders[i];
-    MapWrapper.forEach(binder.variableBindings,
-                       (mappedName, varName) => { variableLocations.set(mappedName, i); });
-  }
-  return variableLocations;
-}
-
-function _createElementBinders(protoView, elementBinders, allDirectiveBindings) {
-  for (var i = 0; i < elementBinders.length; i++) {
-    var renderElementBinder = elementBinders[i];
-    var dirs = elementBinders[i].directives;
-
-    var parentPeiWithDistance =
-        _findParentProtoElementInjectorWithDistance(i, protoView.elementBinders, elementBinders);
-    var directiveBindings =
-        ListWrapper.map(dirs, (dir) => allDirectiveBindings[dir.directiveIndex]);
-    var componentDirectiveBinding = null;
-    if (directiveBindings.length > 0) {
-      if (directiveBindings[0].metadata.type === renderApi.DirectiveMetadata.COMPONENT_TYPE) {
-        componentDirectiveBinding = directiveBindings[0];
-      }
-    }
-    var protoElementInjector =
-        _createProtoElementInjector(i, parentPeiWithDistance, renderElementBinder,
-                                    componentDirectiveBinding, directiveBindings);
-
-    _createElementBinder(protoView, i, renderElementBinder, protoElementInjector,
-                         componentDirectiveBinding, directiveBindings);
-  }
-}
-
-function _findParentProtoElementInjectorWithDistance(
-    binderIndex, elementBinders, renderElementBinders): ParentProtoElementInjectorWithDistance {
-  var distance = 0;
-  do {
-    var renderElementBinder = renderElementBinders[binderIndex];
-    binderIndex = renderElementBinder.parentIndex;
-    if (binderIndex !== -1) {
-      distance += renderElementBinder.distanceToParent;
-      var elementBinder = elementBinders[binderIndex];
-      if (isPresent(elementBinder.protoElementInjector)) {
-        return new ParentProtoElementInjectorWithDistance(elementBinder.protoElementInjector,
-                                                          distance);
-      }
-    }
-  } while (binderIndex !== -1);
-  return new ParentProtoElementInjectorWithDistance(null, 0);
-}
-
-function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderElementBinder,
-                                     componentDirectiveBinding, directiveBindings) {
-  var protoElementInjector = null;
-  // Create a protoElementInjector for any element that either has bindings *or* has one
-  // or more var- defined. Elements with a var- defined need a their own element injector
-  // so that, when hydrating, $implicit can be set to the element.
-  var hasVariables = MapWrapper.size(renderElementBinder.variableBindings) > 0;
-  if (directiveBindings.length > 0 || hasVariables) {
-    var directiveVariableBindings =
-        createDirectiveVariableBindings(renderElementBinder, directiveBindings);
-
-    protoElementInjector =
-        ProtoElementInjector.create(parentPeiWithDistance.protoElementInjector, binderIndex,
-                                    directiveBindings, isPresent(componentDirectiveBinding),
-                                    parentPeiWithDistance.distance, directiveVariableBindings);
-    protoElementInjector.attributes = renderElementBinder.readAttributes;
-  }
-  return protoElementInjector;
-}
-
-function _createElementBinder(protoView: AppProtoView, boundElementIndex, renderElementBinder,
-                              protoElementInjector, componentDirectiveBinding,
-                              directiveBindings): ElementBinder {
-  var parent = null;
-  if (renderElementBinder.parentIndex !== -1) {
-    parent = protoView.elementBinders[renderElementBinder.parentIndex];
-  }
-  var elBinder = protoView.bindElement(parent, renderElementBinder.distanceToParent,
-                                       protoElementInjector, componentDirectiveBinding);
-  protoView.bindEvent(renderElementBinder.eventBindings, boundElementIndex, -1);
-  // variables
-  // The view's locals needs to have a full set of variable names at construction time
-  // in order to prevent new variables from being set later in the lifecycle. Since we don't want
-  // to actually create variable bindings for the $implicit bindings, add to the
-  // protoLocals manually.
-  MapWrapper.forEach(renderElementBinder.variableBindings,
-                     (mappedName, varName) => { protoView.protoLocals.set(mappedName, null); });
-  return elBinder;
-}
-
-export function createDirectiveVariableBindings(
-    renderElementBinder: renderApi.ElementBinder,
-    directiveBindings: List<DirectiveBinding>): Map<string, number> {
-  var directiveVariableBindings = new Map();
-  MapWrapper.forEach(renderElementBinder.variableBindings, (templateName, exportAs) => {
-    var dirIndex = _findDirectiveIndexByExportAs(renderElementBinder, directiveBindings, exportAs);
-    directiveVariableBindings.set(templateName, dirIndex);
-  });
-  return directiveVariableBindings;
-}
-
-function _findDirectiveIndexByExportAs(renderElementBinder, directiveBindings, exportAs) {
-  var matchedDirectiveIndex = null;
-  var matchedDirective;
-
-  for (var i = 0; i < directiveBindings.length; ++i) {
-    var directive = directiveBindings[i];
-
-    if (_directiveExportAs(directive) == exportAs) {
-      if (isPresent(matchedDirective)) {
-        throw new BaseException(
-            `More than one directive have exportAs = '${exportAs}'. Directives: [${matchedDirective.displayName}, ${directive.displayName}]`);
-      }
-
-      matchedDirectiveIndex = i;
-      matchedDirective = directive;
-    }
-  }
-
-  if (isBlank(matchedDirective) && exportAs !== "$implicit") {
-    throw new BaseException(`Cannot find directive with exportAs = '${exportAs}'`);
-  }
-
-  return matchedDirectiveIndex;
-}
-
-function _directiveExportAs(directive): string {
-  var directiveExportAs = directive.metadata.exportAs;
-  if (isBlank(directiveExportAs) &&
-      directive.metadata.type === renderApi.DirectiveMetadata.COMPONENT_TYPE) {
-    return "$implicit";
-  } else {
-    return directiveExportAs;
-  }
-}
-
-function _bindDirectiveEvents(protoView, elementBinders: List<renderApi.ElementBinder>) {
-  for (var boundElementIndex = 0; boundElementIndex < elementBinders.length; ++boundElementIndex) {
-    var dirs = elementBinders[boundElementIndex].directives;
-    for (var i = 0; i < dirs.length; i++) {
-      var directiveBinder = dirs[i];
-
-      // directive events
-      protoView.bindEvent(directiveBinder.eventBindings, boundElementIndex, i);
-    }
-  }
-}
-
-
-class RenderProtoViewWithIndex {
-  constructor(public renderProtoView: renderApi.ProtoViewDto, public index: number,
-              public parentIndex: number, public boundElementIndex: number) {}
-}
-
-class ParentProtoElementInjectorWithDistance {
-  constructor(public protoElementInjector: ProtoElementInjector, public distance: number) {}
-}
diff --git a/modules/angular2/src/core/compiler/query_list.ts b/modules/angular2/src/core/compiler/query_list.ts
deleted file mode 100644
index fe1b5b09b4f6..000000000000
--- a/modules/angular2/src/core/compiler/query_list.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import {BaseQueryList} from './base_query_list';
-
-/**
- * An iterable live list of components in the Light DOM.
- *
- * Injectable Objects that contains a live list of child directives in the light DOM of a directive.
- * The directives are kept in depth-first pre-order traversal of the DOM.
- *
- * The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop
- * as well as in
- * template with `*ng-for="of"` directive.
- *
- * NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain
- * list of observable
- * callbacks.
- *
- * # Example:
- *
- * Assume that `<tabs>` component would like to get a list its children which are `<pane>`
- * components as shown in this
- * example:
- *
- * ```html
- * <tabs>
- *   <pane title="Overview">...</pane>
- *   <pane *ng-for="#o of objects" [title]="o.title">{{o.text}}</pane>
- * </tabs>
- * ```
- *
- * In the above example the list of `<tabs>` elements needs to get a list of `<pane>` elements so
- * that it could render
- * tabs with the correct titles and in the correct order.
- *
- * A possible solution would be for a `<pane>` to inject `<tabs>` component and then register itself
- * with `<tabs>`
- * component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this
- * would only work
- * partialy since `*ng-for` could rearrange the list of `<pane>` components which would not be
- * reported to `<tabs>`
- * component and thus the list of `<pane>` components would be out of sync with respect to the list
- * of `<pane>` elements.
- *
- * A preferred solution is to inject a `QueryList` which is a live list of directives in the
- * component`s light DOM.
- *
- * ```javascript
- * @Component({
- *   selector: 'tabs'
- * })
- * @View({
- *  template: `
- *    <ul>
- *      <li *ng-for="#pane of panes">{{pane.title}}</li>
- *    </ul>
- *    <content></content>
- *  `
- * })
- * class Tabs {
- *   panes: QueryList<Pane>
- *
- *   constructor(@Query(Pane) panes:QueryList<Pane>) {
- *     this.panes = panes;
- *   }
- * }
- *
- * @Component({
- *   selector: 'pane',
- *   properties: ['title']
- * })
- * @View(...)
- * class Pane {
- *   title:string;
- * }
- * ```
- *
- * @exportedAs angular2/view
- */
-export class QueryList<T> extends BaseQueryList<T> {
-  /**
-   */
-  onChange(callback) { super.onChange(callback); }
-
-  /**
-   */
-  removeCallback(callback) { super.removeCallback(callback); }
-}
diff --git a/modules/angular2/src/core/compiler/view.ts b/modules/angular2/src/core/compiler/view.ts
deleted file mode 100644
index 0f5ce541b60d..000000000000
--- a/modules/angular2/src/core/compiler/view.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import {ListWrapper, MapWrapper, Map, StringMapWrapper, List} from 'angular2/src/facade/collection';
-import {
-  AST,
-  Locals,
-  ChangeDispatcher,
-  ProtoChangeDetector,
-  ChangeDetector,
-  BindingRecord,
-  DirectiveRecord,
-  DirectiveIndex,
-  ChangeDetectorRef
-} from 'angular2/change_detection';
-
-import {
-  ProtoElementInjector,
-  ElementInjector,
-  PreBuiltObjects,
-  DirectiveBinding
-} from './element_injector';
-import {ElementBinder} from './element_binder';
-import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
-import * as renderApi from 'angular2/src/render/api';
-import {EventDispatcher} from 'angular2/src/render/api';
-import {ViewRef} from './view_ref';
-import {ElementRef} from './element_ref';
-
-export class AppViewContainer {
-  // The order in this list matches the DOM order.
-  views: List<AppView> = [];
-}
-
-/**
- * Const of making objects: http://jsperf.com/instantiate-size-of-object
- *
- */
-export class AppView implements ChangeDispatcher, EventDispatcher {
-  render: renderApi.RenderViewRef = null;
-  /// This list matches the _nodes list. It is sparse, since only Elements have ElementInjector
-  rootElementInjectors: List<ElementInjector>;
-  elementInjectors: List<ElementInjector> = null;
-  changeDetector: ChangeDetector = null;
-  componentChildViews: List<AppView> = null;
-  viewContainers: List<AppViewContainer>;
-  preBuiltObjects: List<PreBuiltObjects> = null;
-  elementRefs: List<ElementRef>;
-  ref: ViewRef;
-
-  /**
-   * The context against which data-binding expressions in this view are evaluated against.
-   * This is always a component instance.
-   */
-
-  context: any = null;
-
-  /**
-   * Variables, local to this view, that can be used in binding expressions (in addition to the
-   * context). This is used for thing like `<video #player>` or
-   * `<li template="for #item of items">`, where "player" and "item" are locals, respectively.
-   */
-  locals: Locals;
-
-  constructor(public renderer: renderApi.Renderer, public proto: AppProtoView,
-              protoLocals: Map<string, any>) {
-    this.viewContainers = ListWrapper.createFixedSize(this.proto.elementBinders.length);
-    this.elementRefs = ListWrapper.createFixedSize(this.proto.elementBinders.length);
-    this.ref = new ViewRef(this);
-    for (var i = 0; i < this.elementRefs.length; i++) {
-      this.elementRefs[i] = new ElementRef(this.ref, i, renderer);
-    }
-    this.locals = new Locals(null, MapWrapper.clone(protoLocals));  // TODO optimize this
-  }
-
-  init(changeDetector: ChangeDetector, elementInjectors: List<ElementInjector>,
-       rootElementInjectors: List<ElementInjector>, preBuiltObjects: List<PreBuiltObjects>,
-       componentChildViews: List<AppView>) {
-    this.changeDetector = changeDetector;
-    this.elementInjectors = elementInjectors;
-    this.rootElementInjectors = rootElementInjectors;
-    this.preBuiltObjects = preBuiltObjects;
-    this.componentChildViews = componentChildViews;
-  }
-
-  setLocal(contextName: string, value): void {
-    if (!this.hydrated()) throw new BaseException('Cannot set locals on dehydrated view.');
-    if (!this.proto.variableBindings.has(contextName)) {
-      return;
-    }
-    var templateName = this.proto.variableBindings.get(contextName);
-    this.locals.set(templateName, value);
-  }
-
-  hydrated(): boolean { return isPresent(this.context); }
-
-  /**
-   * Triggers the event handlers for the element and the directives.
-   *
-   * This method is intended to be called from directive EventEmitters.
-   *
-   * @param {string} eventName
-   * @param {*} eventObj
-   * @param {int} binderIndex
-   */
-  triggerEventHandlers(eventName: string, eventObj, binderIndex: int): void {
-    var locals = new Map();
-    locals.set('$event', eventObj);
-    this.dispatchEvent(binderIndex, eventName, locals);
-  }
-
-  // dispatch to element injector or text nodes based on context
-  notifyOnBinding(b: BindingRecord, currentValue: any): void {
-    if (b.isElementProperty()) {
-      this.renderer.setElementProperty(this.elementRefs[b.elementIndex], b.propertyName,
-                                       currentValue);
-    } else if (b.isElementAttribute()) {
-      this.renderer.setElementAttribute(this.elementRefs[b.elementIndex], b.propertyName,
-                                        currentValue);
-    } else if (b.isElementClass()) {
-      this.renderer.setElementClass(this.elementRefs[b.elementIndex], b.propertyName, currentValue);
-    } else if (b.isElementStyle()) {
-      var unit = isPresent(b.propertyUnit) ? b.propertyUnit : '';
-      this.renderer.setElementStyle(this.elementRefs[b.elementIndex], b.propertyName,
-                                    `${currentValue}${unit}`);
-    } else if (b.isTextNode()) {
-      this.renderer.setText(this.render, b.elementIndex, currentValue);
-    } else {
-      throw new BaseException('Unsupported directive record');
-    }
-  }
-
-  notifyOnAllChangesDone(): void {
-    var ei = this.elementInjectors;
-    for (var i = ei.length - 1; i >= 0; i--) {
-      if (isPresent(ei[i])) ei[i].onAllChangesDone();
-    }
-  }
-
-  getDirectiveFor(directive: DirectiveIndex): any {
-    var elementInjector = this.elementInjectors[directive.elementIndex];
-    return elementInjector.getDirectiveAtIndex(directive.directiveIndex);
-  }
-
-  getDetectorFor(directive: DirectiveIndex): any {
-    var childView = this.componentChildViews[directive.elementIndex];
-    return isPresent(childView) ? childView.changeDetector : null;
-  }
-
-  invokeElementMethod(elementIndex: number, methodName: string, args: List<any>) {
-    this.renderer.invokeElementMethod(this.elementRefs[elementIndex], methodName, args);
-  }
-
-  // implementation of EventDispatcher#dispatchEvent
-  // returns false if preventDefault must be applied to the DOM event
-  dispatchEvent(elementIndex: number, eventName: string, locals: Map<string, any>): boolean {
-    // Most of the time the event will be fired only when the view is in the live document.
-    // However, in a rare circumstance the view might get dehydrated, in between the event
-    // queuing up and firing.
-    var allowDefaultBehavior = true;
-    if (this.hydrated()) {
-      var elBinder = this.proto.elementBinders[elementIndex];
-      if (isBlank(elBinder.hostListeners)) return allowDefaultBehavior;
-      var eventMap = elBinder.hostListeners[eventName];
-      if (isBlank(eventMap)) return allowDefaultBehavior;
-      MapWrapper.forEach(eventMap, (expr, directiveIndex) => {
-        var context;
-        if (directiveIndex === -1) {
-          context = this.context;
-        } else {
-          context = this.elementInjectors[elementIndex].getDirectiveAtIndex(directiveIndex);
-        }
-        var result = expr.eval(context, new Locals(this.locals, locals));
-        if (isPresent(result)) {
-          allowDefaultBehavior = allowDefaultBehavior && result == true;
-        }
-      });
-    }
-    return allowDefaultBehavior;
-  }
-}
-
-/**
- *
- */
-export class AppProtoView {
-  elementBinders: List<ElementBinder> = [];
-  protoLocals: Map<string, any> = new Map();
-
-  constructor(public render: renderApi.RenderProtoViewRef,
-              public protoChangeDetector: ProtoChangeDetector,
-              public variableBindings: Map<string, string>,
-              public variableLocations: Map<string, number>) {
-    if (isPresent(variableBindings)) {
-      MapWrapper.forEach(variableBindings,
-                         (templateName, _) => { this.protoLocals.set(templateName, null); });
-    }
-  }
-
-  bindElement(parent: ElementBinder, distanceToParent: int,
-              protoElementInjector: ProtoElementInjector,
-              componentDirective: DirectiveBinding = null): ElementBinder {
-    var elBinder = new ElementBinder(this.elementBinders.length, parent, distanceToParent,
-                                     protoElementInjector, componentDirective);
-
-    this.elementBinders.push(elBinder);
-    return elBinder;
-  }
-
-  /**
-   * Adds an event binding for the last created ElementBinder via bindElement.
-   *
-   * If the directive index is a positive integer, the event is evaluated in the context of
-   * the given directive.
-   *
-   * If the directive index is -1, the event is evaluated in the context of the enclosing view.
-   *
-   * @param {string} eventName
-   * @param {AST} expression
-   * @param {int} directiveIndex The directive index in the binder or -1 when the event is not bound
-   *                             to a directive
-   */
-  bindEvent(eventBindings: List<renderApi.EventBinding>, boundElementIndex: number,
-            directiveIndex: int = -1): void {
-    var elBinder = this.elementBinders[boundElementIndex];
-    var events = elBinder.hostListeners;
-    if (isBlank(events)) {
-      events = StringMapWrapper.create();
-      elBinder.hostListeners = events;
-    }
-    for (var i = 0; i < eventBindings.length; i++) {
-      var eventBinding = eventBindings[i];
-      var eventName = eventBinding.fullName;
-      var event = StringMapWrapper.get(events, eventName);
-      if (isBlank(event)) {
-        event = new Map();
-        StringMapWrapper.set(events, eventName, event);
-      }
-      event.set(directiveIndex, eventBinding.source);
-    }
-  }
-}
diff --git a/modules/angular2/src/core/compiler/view_container_ref.ts b/modules/angular2/src/core/compiler/view_container_ref.ts
deleted file mode 100644
index 9ccfcc18a6d5..000000000000
--- a/modules/angular2/src/core/compiler/view_container_ref.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import {ListWrapper, List} from 'angular2/src/facade/collection';
-import {ResolvedBinding} from 'angular2/di';
-import {isPresent, isBlank} from 'angular2/src/facade/lang';
-
-import * as avmModule from './view_manager';
-import * as viewModule from './view';
-
-import {ElementRef} from './element_ref';
-import {ViewRef, ProtoViewRef, internalView} from './view_ref';
-/**
- * @exportedAs angular2/core
- */
-export class ViewContainerRef {
-  constructor(public viewManager: avmModule.AppViewManager, public element: ElementRef) {}
-
-  private _getViews(): List<viewModule.AppView> {
-    var vc = internalView(this.element.parentView).viewContainers[this.element.boundElementIndex];
-    return isPresent(vc) ? vc.views : [];
-  }
-
-  clear(): void {
-    for (var i = this.length - 1; i >= 0; i--) {
-      this.remove(i);
-    }
-  }
-
-  get(index: number): ViewRef { return this._getViews()[index].ref; }
-
-  get length(): number { return this._getViews().length; }
-
-  // TODO(rado): profile and decide whether bounds checks should be added
-  // to the methods below.
-  create(protoViewRef: ProtoViewRef = null, atIndex: number = -1, context: ElementRef = null,
-         bindings: ResolvedBinding[] = null): ViewRef {
-    if (atIndex == -1) atIndex = this.length;
-    return this.viewManager.createViewInContainer(this.element, atIndex, protoViewRef, context,
-                                                  bindings);
-  }
-
-  insert(viewRef: ViewRef, atIndex: number = -1): ViewRef {
-    if (atIndex == -1) atIndex = this.length;
-    return this.viewManager.attachViewInContainer(this.element, atIndex, viewRef);
-  }
-
-  indexOf(viewRef: ViewRef): number {
-    return ListWrapper.indexOf(this._getViews(), internalView(viewRef));
-  }
-
-  remove(atIndex: number = -1): void {
-    if (atIndex == -1) atIndex = this.length - 1;
-    this.viewManager.destroyViewInContainer(this.element, atIndex);
-    // view is intentionally not returned to the client.
-  }
-
-  /**
-   * The method can be used together with insert to implement a view move, i.e.
-   * moving the dom nodes while the directives in the view stay intact.
-   */
-  detach(atIndex: number = -1): ViewRef {
-    if (atIndex == -1) atIndex = this.length - 1;
-    return this.viewManager.detachViewInContainer(this.element, atIndex);
-  }
-}
diff --git a/modules/angular2/src/core/compiler/view_listener.ts b/modules/angular2/src/core/compiler/view_listener.ts
deleted file mode 100644
index 360960203c00..000000000000
--- a/modules/angular2/src/core/compiler/view_listener.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Injectable} from 'angular2/di';
-import * as viewModule from './view';
-
-/**
- * Listener for view creation / destruction.
- */
-@Injectable()
-export class AppViewListener {
-  viewCreated(view: viewModule.AppView) {}
-  viewDestroyed(view: viewModule.AppView) {}
-}
diff --git a/modules/angular2/src/core/compiler/view_manager.ts b/modules/angular2/src/core/compiler/view_manager.ts
deleted file mode 100644
index 56fb7ff0dc4b..000000000000
--- a/modules/angular2/src/core/compiler/view_manager.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-import {Injector, Binding, Injectable, ResolvedBinding} from 'angular2/di';
-import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
-import * as viewModule from './view';
-import {ElementRef} from './element_ref';
-import {ProtoViewRef, ViewRef, internalView, internalProtoView} from './view_ref';
-import {ViewContainerRef} from './view_container_ref';
-import {Renderer, RenderViewRef} from 'angular2/src/render/api';
-import {AppViewManagerUtils} from './view_manager_utils';
-import {AppViewPool} from './view_pool';
-import {AppViewListener} from './view_listener';
-
-/**
- * Entry point for creating, moving views in the view hierarchy and destroying views.
- * This manager contains all recursion and delegates to helper methods
- * in AppViewManagerUtils and the Renderer, so unit tests get simpler.
- */
-@Injectable()
-export class AppViewManager {
-  constructor(public _viewPool: AppViewPool, public _viewListener: AppViewListener,
-              public _utils: AppViewManagerUtils, public _renderer: Renderer) {}
-
-  getComponentView(hostLocation: ElementRef): ViewRef {
-    var hostView = internalView(hostLocation.parentView);
-    var boundElementIndex = hostLocation.boundElementIndex;
-    return hostView.componentChildViews[boundElementIndex].ref;
-  }
-
-  getViewContainer(location: ElementRef): ViewContainerRef {
-    var hostView = internalView(location.parentView);
-    return hostView.elementInjectors[location.boundElementIndex].getViewContainerRef();
-  }
-
-  getHostElement(hostViewRef: ViewRef): ElementRef {
-    return internalView(hostViewRef).elementRefs[0];
-  }
-
-  /**
-   * Returns an ElementRef for the element with the given variable name
-   * in the component view of the component at the provided ElementRef.
-   */
-  getNamedElementInComponentView(hostLocation: ElementRef, variableName: string): ElementRef {
-    var hostView = internalView(hostLocation.parentView);
-    var boundElementIndex = hostLocation.boundElementIndex;
-    var componentView = hostView.componentChildViews[boundElementIndex];
-    if (isBlank(componentView)) {
-      throw new BaseException(`There is no component directive at element ${boundElementIndex}`);
-    }
-    var elementIndex = componentView.proto.variableLocations.get(variableName);
-    if (isBlank(elementIndex)) {
-      throw new BaseException(`Could not find variable ${variableName}`);
-    }
-    return componentView.elementRefs[elementIndex];
-  }
-
-  getComponent(hostLocation: ElementRef): any {
-    var hostView = internalView(hostLocation.parentView);
-    var boundElementIndex = hostLocation.boundElementIndex;
-    return this._utils.getComponentInstance(hostView, boundElementIndex);
-  }
-
-  createRootHostView(hostProtoViewRef: ProtoViewRef, overrideSelector: string,
-                     injector: Injector): ViewRef {
-    var hostProtoView = internalProtoView(hostProtoViewRef);
-    var hostElementSelector = overrideSelector;
-    if (isBlank(hostElementSelector)) {
-      hostElementSelector = hostProtoView.elementBinders[0].componentDirective.metadata.selector;
-    }
-    var renderView = this._renderer.createRootHostView(hostProtoView.render, hostElementSelector);
-    var hostView = this._utils.createView(hostProtoView, renderView, this, this._renderer);
-    this._renderer.setEventDispatcher(hostView.render, hostView);
-    this._createViewRecurse(hostView);
-    this._viewListener.viewCreated(hostView);
-
-    this._utils.hydrateRootHostView(hostView, injector);
-    this._viewHydrateRecurse(hostView);
-
-    return hostView.ref;
-  }
-
-  destroyRootHostView(hostViewRef: ViewRef) {
-    // Note: Don't detach the hostView as we want to leave the
-    // root element in place. Also don't put the hostView into the view pool
-    // as it is depending on the element for which it was created.
-    var hostView = internalView(hostViewRef);
-    // We do want to destroy the component view though.
-    this._viewDehydrateRecurse(hostView, true);
-    this._renderer.destroyView(hostView.render);
-    this._viewListener.viewDestroyed(hostView);
-  }
-
-  createViewInContainer(viewContainerLocation: ElementRef, atIndex: number,
-                        protoViewRef: ProtoViewRef, context: ElementRef = null,
-                        bindings: ResolvedBinding[] = null): ViewRef {
-    var protoView = internalProtoView(protoViewRef);
-    var parentView = internalView(viewContainerLocation.parentView);
-    var boundElementIndex = viewContainerLocation.boundElementIndex;
-    var contextView = null;
-    var contextBoundElementIndex = null;
-    if (isPresent(context)) {
-      contextView = internalView(context.parentView);
-      contextBoundElementIndex = context.boundElementIndex;
-    }
-
-    var view = this._createPooledView(protoView);
-
-    this._renderer.attachViewInContainer(viewContainerLocation, atIndex, view.render);
-    this._utils.attachViewInContainer(parentView, boundElementIndex, contextView,
-                                      contextBoundElementIndex, atIndex, view);
-    this._utils.hydrateViewInContainer(parentView, boundElementIndex, contextView,
-                                       contextBoundElementIndex, atIndex, bindings);
-    this._viewHydrateRecurse(view);
-    return view.ref;
-  }
-
-  destroyViewInContainer(viewContainerLocation: ElementRef, atIndex: number) {
-    var parentView = internalView(viewContainerLocation.parentView);
-    var boundElementIndex = viewContainerLocation.boundElementIndex;
-    this._destroyViewInContainer(parentView, boundElementIndex, atIndex);
-  }
-
-  attachViewInContainer(viewContainerLocation: ElementRef, atIndex: number,
-                        viewRef: ViewRef): ViewRef {
-    var view = internalView(viewRef);
-    var parentView = internalView(viewContainerLocation.parentView);
-    var boundElementIndex = viewContainerLocation.boundElementIndex;
-    // TODO(tbosch): the public methods attachViewInContainer/detachViewInContainer
-    // are used for moving elements without the same container.
-    // We will change this into an atomic `move` operation, which should preserve the
-    // previous parent injector (see https://github.com/angular/angular/issues/1377).
-    // Right now we are destroying any special
-    // context view that might have been used.
-    this._utils.attachViewInContainer(parentView, boundElementIndex, null, null, atIndex, view);
-    this._renderer.attachViewInContainer(viewContainerLocation, atIndex, view.render);
-    return viewRef;
-  }
-
-  detachViewInContainer(viewContainerLocation: ElementRef, atIndex: number): ViewRef {
-    var parentView = internalView(viewContainerLocation.parentView);
-    var boundElementIndex = viewContainerLocation.boundElementIndex;
-    var viewContainer = parentView.viewContainers[boundElementIndex];
-    var view = viewContainer.views[atIndex];
-    this._utils.detachViewInContainer(parentView, boundElementIndex, atIndex);
-    this._renderer.detachViewInContainer(viewContainerLocation, atIndex, view.render);
-    return view.ref;
-  }
-
-  _createPooledView(protoView: viewModule.AppProtoView): viewModule.AppView {
-    var view = this._viewPool.getView(protoView);
-    if (isBlank(view)) {
-      view = this._utils.createView(protoView, this._renderer.createView(protoView.render), this,
-                                    this._renderer);
-      this._renderer.setEventDispatcher(view.render, view);
-      this._createViewRecurse(view);
-      this._viewListener.viewCreated(view);
-    }
-    return view;
-  }
-
-  _createViewRecurse(view: viewModule.AppView) {
-    var binders = view.proto.elementBinders;
-    for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
-      var binder = binders[binderIdx];
-      if (binder.hasStaticComponent()) {
-        var childView = this._createPooledView(binder.nestedProtoView);
-        this._renderer.attachComponentView(view.elementRefs[binderIdx], childView.render);
-        this._utils.attachComponentView(view, binderIdx, childView);
-      }
-    }
-  }
-
-  _destroyPooledView(view: viewModule.AppView) {
-    var wasReturned = this._viewPool.returnView(view);
-    if (!wasReturned) {
-      this._renderer.destroyView(view.render);
-      this._viewListener.viewDestroyed(view);
-    }
-  }
-
-  _destroyViewInContainer(parentView, boundElementIndex, atIndex: number) {
-    var viewContainer = parentView.viewContainers[boundElementIndex];
-    var view = viewContainer.views[atIndex];
-    this._viewDehydrateRecurse(view, false);
-    this._utils.detachViewInContainer(parentView, boundElementIndex, atIndex);
-    this._renderer.detachViewInContainer(parentView.elementRefs[boundElementIndex], atIndex,
-                                         view.render);
-    this._destroyPooledView(view);
-  }
-
-  _destroyComponentView(hostView, boundElementIndex, componentView) {
-    this._viewDehydrateRecurse(componentView, false);
-    this._renderer.detachComponentView(hostView.elementRefs[boundElementIndex],
-                                       componentView.render);
-    this._utils.detachComponentView(hostView, boundElementIndex);
-    this._destroyPooledView(componentView);
-  }
-
-  _viewHydrateRecurse(view: viewModule.AppView) {
-    this._renderer.hydrateView(view.render);
-
-    var binders = view.proto.elementBinders;
-    for (var i = 0; i < binders.length; ++i) {
-      if (binders[i].hasStaticComponent()) {
-        this._utils.hydrateComponentView(view, i);
-        this._viewHydrateRecurse(view.componentChildViews[i]);
-      }
-    }
-  }
-
-  _viewDehydrateRecurse(view: viewModule.AppView, forceDestroyComponents) {
-    this._utils.dehydrateView(view);
-    this._renderer.dehydrateView(view.render);
-    var binders = view.proto.elementBinders;
-    for (var i = 0; i < binders.length; i++) {
-      var componentView = view.componentChildViews[i];
-      if (isPresent(componentView)) {
-        if (forceDestroyComponents) {
-          this._destroyComponentView(view, i, componentView);
-        } else {
-          this._viewDehydrateRecurse(componentView, false);
-        }
-      }
-      var vc = view.viewContainers[i];
-      if (isPresent(vc)) {
-        for (var j = vc.views.length - 1; j >= 0; j--) {
-          this._destroyViewInContainer(view, i, j);
-        }
-      }
-    }
-  }
-}
diff --git a/modules/angular2/src/core/compiler/view_manager_utils.ts b/modules/angular2/src/core/compiler/view_manager_utils.ts
deleted file mode 100644
index 464c51da2c05..000000000000
--- a/modules/angular2/src/core/compiler/view_manager_utils.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-import {Injector, Binding, Injectable, ResolvedBinding} from 'angular2/di';
-import {ListWrapper, MapWrapper, Map, StringMapWrapper, List} from 'angular2/src/facade/collection';
-import * as eli from './element_injector';
-import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
-import * as viewModule from './view';
-import * as avmModule from './view_manager';
-import {Renderer} from 'angular2/src/render/api';
-import {Locals} from 'angular2/change_detection';
-import {RenderViewRef} from 'angular2/src/render/api';
-
-@Injectable()
-export class AppViewManagerUtils {
-  constructor() {}
-
-  getComponentInstance(parentView: viewModule.AppView, boundElementIndex: number): any {
-    var eli = parentView.elementInjectors[boundElementIndex];
-    return eli.getComponent();
-  }
-
-  createView(protoView: viewModule.AppProtoView, renderView: RenderViewRef,
-             viewManager: avmModule.AppViewManager, renderer: Renderer): viewModule.AppView {
-    var view = new viewModule.AppView(renderer, protoView, protoView.protoLocals);
-    // TODO(tbosch): pass RenderViewRef as argument to AppView!
-    view.render = renderView;
-
-    var changeDetector = protoView.protoChangeDetector.instantiate(view);
-
-    var binders = protoView.elementBinders;
-    var elementInjectors = ListWrapper.createFixedSize(binders.length);
-    var rootElementInjectors = [];
-    var preBuiltObjects = ListWrapper.createFixedSize(binders.length);
-    var componentChildViews = ListWrapper.createFixedSize(binders.length);
-
-    for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
-      var binder = binders[binderIdx];
-      var elementInjector = null;
-
-      // elementInjectors and rootElementInjectors
-      var protoElementInjector = binder.protoElementInjector;
-      if (isPresent(protoElementInjector)) {
-        if (isPresent(protoElementInjector.parent)) {
-          var parentElementInjector = elementInjectors[protoElementInjector.parent.index];
-          elementInjector = protoElementInjector.instantiate(parentElementInjector);
-        } else {
-          elementInjector = protoElementInjector.instantiate(null);
-          rootElementInjectors.push(elementInjector);
-        }
-      }
-      elementInjectors[binderIdx] = elementInjector;
-
-      // preBuiltObjects
-      if (isPresent(elementInjector)) {
-        var embeddedProtoView = binder.hasEmbeddedProtoView() ? binder.nestedProtoView : null;
-        preBuiltObjects[binderIdx] = new eli.PreBuiltObjects(viewManager, view, embeddedProtoView);
-      }
-    }
-
-    view.init(changeDetector, elementInjectors, rootElementInjectors, preBuiltObjects,
-              componentChildViews);
-
-    return view;
-  }
-
-  attachComponentView(hostView: viewModule.AppView, boundElementIndex: number,
-                      componentView: viewModule.AppView) {
-    var childChangeDetector = componentView.changeDetector;
-    hostView.changeDetector.addShadowDomChild(childChangeDetector);
-    hostView.componentChildViews[boundElementIndex] = componentView;
-  }
-
-  detachComponentView(hostView: viewModule.AppView, boundElementIndex: number) {
-    var componentView = hostView.componentChildViews[boundElementIndex];
-    hostView.changeDetector.removeShadowDomChild(componentView.changeDetector);
-    hostView.componentChildViews[boundElementIndex] = null;
-  }
-
-  hydrateComponentView(hostView: viewModule.AppView, boundElementIndex: number) {
-    var elementInjector = hostView.elementInjectors[boundElementIndex];
-    var componentView = hostView.componentChildViews[boundElementIndex];
-    var component = this.getComponentInstance(hostView, boundElementIndex);
-    this._hydrateView(componentView, null, elementInjector, component, null);
-  }
-
-  hydrateRootHostView(hostView: viewModule.AppView, injector: Injector) {
-    this._hydrateView(hostView, injector, null, new Object(), null);
-  }
-
-  // Misnomer: this method is attaching next to the view container.
-  attachViewInContainer(parentView: viewModule.AppView, boundElementIndex: number,
-                        contextView: viewModule.AppView, contextBoundElementIndex: number,
-                        atIndex: number, view: viewModule.AppView) {
-    if (isBlank(contextView)) {
-      contextView = parentView;
-      contextBoundElementIndex = boundElementIndex;
-    }
-    parentView.changeDetector.addChild(view.changeDetector);
-    var viewContainer = this._getOrCreateViewContainer(parentView, boundElementIndex);
-    ListWrapper.insert(viewContainer.views, atIndex, view);
-    var sibling;
-    if (atIndex == 0) {
-      sibling = null;
-    } else {
-      sibling = ListWrapper.last(viewContainer.views[atIndex - 1].rootElementInjectors)
-    }
-    var elementInjector = contextView.elementInjectors[contextBoundElementIndex];
-    for (var i = view.rootElementInjectors.length - 1; i >= 0; i--) {
-      if (isPresent(elementInjector.parent)) {
-        view.rootElementInjectors[i].linkAfter(elementInjector.parent, sibling);
-      } else {
-        contextView.rootElementInjectors.push(view.rootElementInjectors[i]);
-      }
-    }
-  }
-
-  detachViewInContainer(parentView: viewModule.AppView, boundElementIndex: number,
-                        atIndex: number) {
-    var viewContainer = parentView.viewContainers[boundElementIndex];
-    var view = viewContainer.views[atIndex];
-    view.changeDetector.remove();
-    ListWrapper.removeAt(viewContainer.views, atIndex);
-    for (var i = 0; i < view.rootElementInjectors.length; ++i) {
-      var inj = view.rootElementInjectors[i];
-      if (isPresent(inj.parent)) {
-        inj.unlink();
-      } else {
-        var removeIdx = ListWrapper.indexOf(parentView.rootElementInjectors, inj);
-        ListWrapper.removeAt(parentView.rootElementInjectors, removeIdx);
-      }
-    }
-  }
-
-  hydrateViewInContainer(parentView: viewModule.AppView, boundElementIndex: number,
-                         contextView: viewModule.AppView, contextBoundElementIndex: number,
-                         atIndex: number, bindings: ResolvedBinding[]) {
-    if (isBlank(contextView)) {
-      contextView = parentView;
-      contextBoundElementIndex = boundElementIndex;
-    }
-    var viewContainer = parentView.viewContainers[boundElementIndex];
-    var view = viewContainer.views[atIndex];
-    var elementInjector = contextView.elementInjectors[contextBoundElementIndex];
-
-    var injector = isPresent(bindings) ? Injector.fromResolvedBindings(bindings) : null;
-
-    this._hydrateView(view, injector, elementInjector.getHost(), contextView.context,
-                      contextView.locals);
-  }
-
-  _hydrateView(view: viewModule.AppView, injector: Injector,
-               hostElementInjector: eli.ElementInjector, context: Object, parentLocals: Locals) {
-    view.context = context;
-    view.locals.parent = parentLocals;
-
-    var binders = view.proto.elementBinders;
-    for (var i = 0; i < binders.length; ++i) {
-      var elementInjector = view.elementInjectors[i];
-
-      if (isPresent(elementInjector)) {
-        elementInjector.hydrate(injector, hostElementInjector, view.preBuiltObjects[i]);
-        this._populateViewLocals(view, elementInjector);
-        this._setUpEventEmitters(view, elementInjector, i);
-        this._setUpHostActions(view, elementInjector, i);
-      }
-    }
-    view.changeDetector.hydrate(view.context, view.locals, view);
-  }
-
-  _populateViewLocals(view: viewModule.AppView, elementInjector: eli.ElementInjector): void {
-    if (isPresent(elementInjector.getDirectiveVariableBindings())) {
-      MapWrapper.forEach(elementInjector.getDirectiveVariableBindings(), (directiveIndex, name) => {
-        if (isBlank(directiveIndex)) {
-          view.locals.set(name, elementInjector.getElementRef().nativeElement);
-        } else {
-          view.locals.set(name, elementInjector.getDirectiveAtIndex(directiveIndex));
-        }
-      });
-    }
-  }
-
-  _getOrCreateViewContainer(parentView: viewModule.AppView, boundElementIndex: number) {
-    var viewContainer = parentView.viewContainers[boundElementIndex];
-    if (isBlank(viewContainer)) {
-      viewContainer = new viewModule.AppViewContainer();
-      parentView.viewContainers[boundElementIndex] = viewContainer;
-    }
-    return viewContainer;
-  }
-
-  _setUpEventEmitters(view: viewModule.AppView, elementInjector: eli.ElementInjector,
-                      boundElementIndex: number) {
-    var emitters = elementInjector.getEventEmitterAccessors();
-    for (var directiveIndex = 0; directiveIndex < emitters.length; ++directiveIndex) {
-      var directiveEmitters = emitters[directiveIndex];
-      var directive = elementInjector.getDirectiveAtIndex(directiveIndex);
-
-      for (var eventIndex = 0; eventIndex < directiveEmitters.length; ++eventIndex) {
-        var eventEmitterAccessor = directiveEmitters[eventIndex];
-        eventEmitterAccessor.subscribe(view, boundElementIndex, directive);
-      }
-    }
-  }
-
-  _setUpHostActions(view: viewModule.AppView, elementInjector: eli.ElementInjector,
-                    boundElementIndex: number) {
-    var hostActions = elementInjector.getHostActionAccessors();
-    for (var directiveIndex = 0; directiveIndex < hostActions.length; ++directiveIndex) {
-      var directiveHostActions = hostActions[directiveIndex];
-      var directive = elementInjector.getDirectiveAtIndex(directiveIndex);
-
-      for (var index = 0; index < directiveHostActions.length; ++index) {
-        var hostActionAccessor = directiveHostActions[index];
-        hostActionAccessor.subscribe(view, boundElementIndex, directive);
-      }
-    }
-  }
-
-  dehydrateView(view: viewModule.AppView) {
-    var binders = view.proto.elementBinders;
-    for (var i = 0; i < binders.length; ++i) {
-      var elementInjector = view.elementInjectors[i];
-      if (isPresent(elementInjector)) {
-        elementInjector.dehydrate();
-      }
-    }
-    if (isPresent(view.locals)) {
-      view.locals.clearValues();
-    }
-    view.context = null;
-    view.changeDetector.dehydrate();
-  }
-}
diff --git a/modules/angular2/src/core/compiler/view_pool.ts b/modules/angular2/src/core/compiler/view_pool.ts
deleted file mode 100644
index b1369f94ef93..000000000000
--- a/modules/angular2/src/core/compiler/view_pool.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {Inject, Injectable, OpaqueToken} from 'angular2/di';
-
-import {ListWrapper, MapWrapper, Map, List} from 'angular2/src/facade/collection';
-import {isPresent, isBlank, CONST_EXPR} from 'angular2/src/facade/lang';
-
-import * as viewModule from './view';
-
-export const APP_VIEW_POOL_CAPACITY = CONST_EXPR(new OpaqueToken('AppViewPool.viewPoolCapacity'));
-
-@Injectable()
-export class AppViewPool {
-  _poolCapacityPerProtoView: number;
-  _pooledViewsPerProtoView: Map<viewModule.AppProtoView, List<viewModule.AppView>> = new Map();
-
-  constructor(@Inject(APP_VIEW_POOL_CAPACITY) poolCapacityPerProtoView) {
-    this._poolCapacityPerProtoView = poolCapacityPerProtoView;
-  }
-
-  getView(protoView: viewModule.AppProtoView): viewModule.AppView {
-    var pooledViews = this._pooledViewsPerProtoView.get(protoView);
-    if (isPresent(pooledViews) && pooledViews.length > 0) {
-      return ListWrapper.removeLast(pooledViews);
-    }
-    return null;
-  }
-
-  returnView(view: viewModule.AppView): boolean {
-    var protoView = view.proto;
-    var pooledViews = this._pooledViewsPerProtoView.get(protoView);
-    if (isBlank(pooledViews)) {
-      pooledViews = [];
-      this._pooledViewsPerProtoView.set(protoView, pooledViews);
-    }
-    var haveRemainingCapacity = pooledViews.length < this._poolCapacityPerProtoView;
-    if (haveRemainingCapacity) {
-      pooledViews.push(view);
-    }
-    return haveRemainingCapacity;
-  }
-}
diff --git a/modules/angular2/src/core/compiler/view_ref.ts b/modules/angular2/src/core/compiler/view_ref.ts
deleted file mode 100644
index 19263e607aeb..000000000000
--- a/modules/angular2/src/core/compiler/view_ref.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {isPresent} from 'angular2/src/facade/lang';
-import * as viewModule from './view';
-import {RenderViewRef} from 'angular2/src/render/api';
-
-// This is a workaround for privacy in Dart as we don't have library parts
-export function internalView(viewRef: ViewRef): viewModule.AppView {
-  return viewRef._view;
-}
-
-// This is a workaround for privacy in Dart as we don't have library parts
-export function internalProtoView(protoViewRef: ProtoViewRef): viewModule.AppProtoView {
-  return isPresent(protoViewRef) ? protoViewRef._protoView : null;
-}
-
-/**
- * @exportedAs angular2/view
- */
-export class ViewRef {
-  constructor(public _view: viewModule.AppView) {}
-
-  get render(): RenderViewRef { return this._view.render; }
-
-  setLocal(contextName: string, value: any): void { this._view.setLocal(contextName, value); }
-}
-
-/**
- * @exportedAs angular2/view
- */
-export class ProtoViewRef {
-  constructor(public _protoView: viewModule.AppProtoView) {}
-}
diff --git a/modules/angular2/src/core/compiler/view_resolver.ts b/modules/angular2/src/core/compiler/view_resolver.ts
deleted file mode 100644
index fe85096698b3..000000000000
--- a/modules/angular2/src/core/compiler/view_resolver.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-import {Type, stringify, isBlank, BaseException} from 'angular2/src/facade/lang';
-import {Map, MapWrapper, List, ListWrapper} from 'angular2/src/facade/collection';
-
-import {reflector} from 'angular2/src/reflection/reflection';
-
-
-@Injectable()
-export class ViewResolver {
-  _cache: Map<Type, /*node*/ any> = new Map();
-
-  resolve(component: Type): View {
-    var view = this._cache.get(component);
-
-    if (isBlank(view)) {
-      view = this._resolve(component);
-      this._cache.set(component, view);
-    }
-
-    return view;
-  }
-
-  _resolve(component: Type): View {
-    var annotations = reflector.annotations(component);
-    for (var i = 0; i < annotations.length; i++) {
-      var annotation = annotations[i];
-      if (annotation instanceof View) {
-        return annotation;
-      }
-    }
-    throw new BaseException(`No View annotation found on component ${stringify(component)}`);
-  }
-}
diff --git a/modules/angular2/src/core/exception_handler.ts b/modules/angular2/src/core/exception_handler.ts
deleted file mode 100644
index a9cf25f5194d..000000000000
--- a/modules/angular2/src/core/exception_handler.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {isPresent, print} from 'angular2/src/facade/lang';
-import {ListWrapper, isListLikeIterable} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-/**
- * Provides a hook for centralized exception handling.
- *
- * The default implementation of `ExceptionHandler` prints error messages to the `Console`. To
- * intercept error handling,
- * write a custom exception handler that replaces this default as appropriate for your app.
- *
- * # Example
- *
- * ```javascript
- * @Component({
- *   selector: 'my-app',
- *   viewInjector: [
- *     bind(ExceptionHandler).toClass(MyExceptionHandler)
- *   ]
- * })
- * @View(...)
- * class MyApp { ... }
- *
- *
- * class MyExceptionHandler implements ExceptionHandler {
- *   call(error, stackTrace = null, reason = null) {
- *     // do something with the exception
- *   }
- * }
- *
- * ```
- *
- * @exportedAs angular2/core
- */
-@Injectable()
-export class ExceptionHandler {
-  call(error, stackTrace = null, reason = null) {
-    var longStackTrace =
-        isListLikeIterable(stackTrace) ? ListWrapper.join(stackTrace, "\n\n") : stackTrace;
-    var reasonStr = isPresent(reason) ? `\n${reason}` : '';
-    DOM.logError(`${error}${reasonStr}\nSTACKTRACE:\n${longStackTrace}`);
-  }
-}
diff --git a/modules/angular2/src/core/life_cycle/life_cycle.ts b/modules/angular2/src/core/life_cycle/life_cycle.ts
deleted file mode 100644
index 5a9e21836768..000000000000
--- a/modules/angular2/src/core/life_cycle/life_cycle.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {ChangeDetector} from 'angular2/change_detection';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
-import {ExceptionHandler} from 'angular2/src/core/exception_handler';
-import {isPresent, BaseException} from 'angular2/src/facade/lang';
-
-/**
- * Provides access to explicitly trigger change detection in an application.
- *
- * By default, `Zone` triggers change detection in Angular on each virtual machine (VM) turn. When
- * testing, or in some
- * limited application use cases, a developer can also trigger change detection with the
- * `lifecycle.tick()` method.
- *
- * Each Angular application has a single `LifeCycle` instance.
- *
- * # Example
- *
- * This is a contrived example, since the bootstrap automatically runs inside of the `Zone`, which
- * invokes
- * `lifecycle.tick()` on your behalf.
- *
- * ```javascript
- * bootstrap(MyApp).then((ref:ComponentRef) => {
- *   var lifeCycle = ref.injector.get(LifeCycle);
- *   var myApp = ref.instance;
- *
- *   ref.doSomething();
- *   lifecycle.tick();
- * });
- * ```
- * @exportedAs angular2/change_detection
- */
-@Injectable()
-export class LifeCycle {
-  _errorHandler;
-  _changeDetector: ChangeDetector;
-  _enforceNoNewChanges: boolean;
-  _runningTick: boolean = false;
-
-  constructor(exceptionHandler: ExceptionHandler, changeDetector: ChangeDetector = null,
-              enforceNoNewChanges: boolean = false) {
-    this._errorHandler = (exception, stackTrace) => {
-      exceptionHandler.call(exception, stackTrace);
-      throw exception;
-    };
-    this._changeDetector =
-        changeDetector;  // may be null when instantiated from application bootstrap
-    this._enforceNoNewChanges = enforceNoNewChanges;
-  }
-
-  /**
-   * @private
-   */
-  registerWith(zone: NgZone, changeDetector: ChangeDetector = null) {
-    if (isPresent(changeDetector)) {
-      this._changeDetector = changeDetector;
-    }
-
-    zone.initCallbacks({onErrorHandler: this._errorHandler, onTurnDone: () => this.tick()});
-  }
-
-  /**
-   *  Invoke this method to explicitly process change detection and its side-effects.
-   *
-   *  In development mode, `tick()` also performs a second change detection cycle to ensure that no
-   * further
-   *  changes are detected. If additional changes are picked up during this second cycle, bindings
-   * in
-   * the app have
-   *  side-effects that cannot be resolved in a single change detection pass. In this case, Angular
-   * throws an error,
-   *  since an Angular application can only have one change detection pass during which all change
-   * detection must
-   *  complete.
-   *
-   */
-  tick() {
-    if (this._runningTick) {
-      throw new BaseException("LifeCycle.tick is called recursively");
-    }
-
-    try {
-      this._runningTick = true;
-      this._changeDetector.detectChanges();
-      if (this._enforceNoNewChanges) {
-        this._changeDetector.checkNoChanges();
-      }
-    } finally {
-      this._runningTick = false;
-    }
-  }
-}
diff --git a/modules/angular2/src/core/testability/get_testability.dart b/modules/angular2/src/core/testability/get_testability.dart
deleted file mode 100644
index b94dd223b088..000000000000
--- a/modules/angular2/src/core/testability/get_testability.dart
+++ /dev/null
@@ -1,90 +0,0 @@
-library testability.get_testability;
-
-import './testability.dart';
-
-import 'dart:html';
-import 'dart:js' as js;
-
-// Work around http://dartbug.com/17752, copied from
-// https://github.com/angular/angular.dart/blob/master/lib/introspection.dart
-// Proxies a Dart function that accepts up to 10 parameters.
-js.JsFunction _jsFunction(Function fn) {
-  const Object X = __varargSentinel;
-  return new js.JsFunction.withThis((thisArg, [o1 = X, o2 = X, o3 = X, o4 = X,
-      o5 = X, o6 = X, o7 = X, o8 = X, o9 = X, o10 = X]) {
-    return __invokeFn(fn, o1, o2, o3, o4, o5, o6, o7, o8, o9, o10);
-  });
-}
-
-const Object __varargSentinel = const Object();
-
-__invokeFn(fn, o1, o2, o3, o4, o5, o6, o7, o8, o9, o10) {
-  var args = [o1, o2, o3, o4, o5, o6, o7, o8, o9, o10];
-  while (args.length > 0 && identical(args.last, __varargSentinel)) {
-    args.removeLast();
-  }
-  return _jsify(Function.apply(fn, args));
-}
-
-// Helper function to JSify a Dart object.  While this is *required* to JSify
-// the result of a scope.eval(), other uses are not required and are used to
-// work around http://dartbug.com/17752 in a convenient way (that bug affects
-// dart2js in checked mode.)
-_jsify(var obj) {
-  if (obj == null || obj is js.JsObject) {
-    return obj;
-  }
-  if (obj is _JsObjectProxyable) {
-    return obj._toJsObject();
-  }
-  if (obj is Function) {
-    return _jsFunction(obj);
-  }
-  if ((obj is Map) || (obj is Iterable)) {
-    var mappedObj = (obj is Map)
-        ? new Map.fromIterables(obj.keys, obj.values.map(_jsify))
-        : obj.map(_jsify);
-    if (obj is List) {
-      return new js.JsArray.from(mappedObj);
-    } else {
-      return new js.JsObject.jsify(mappedObj);
-    }
-  }
-  return obj;
-}
-
-abstract class _JsObjectProxyable {
-  js.JsObject _toJsObject();
-}
-
-class PublicTestability implements _JsObjectProxyable {
-  Testability _testability;
-  PublicTestability(Testability testability) {
-    this._testability = testability;
-  }
-
-  whenStable(Function callback) {
-    return this._testability.whenStable(callback);
-  }
-
-  findBindings(Element elem, String binding, bool exactMatch) {
-    return this._testability.findBindings(elem, binding, exactMatch);
-  }
-
-  js.JsObject _toJsObject() {
-    return _jsify({
-      'findBindings': (bindingString, [exactMatch, allowNonElementNodes]) =>
-          findBindings(bindingString, exactMatch, allowNonElementNodes),
-      'whenStable': (callback) => whenStable(() => callback.apply([])),
-    })..['_dart_'] = this;
-  }
-}
-
-class GetTestability {
-  static addToWindow(TestabilityRegistry registry) {
-    js.context['getAngularTestability'] = _jsify((Element elem) {
-      Testability testability = registry.findTestabilityInTree(elem);
-      return _jsify(new PublicTestability(testability));
-    });
-  }
-}
diff --git a/modules/angular2/src/core/testability/get_testability.ts b/modules/angular2/src/core/testability/get_testability.ts
deleted file mode 100644
index beded01be8b3..000000000000
--- a/modules/angular2/src/core/testability/get_testability.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {TestabilityRegistry, Testability} from 'angular2/src/core/testability/testability';
-import {global} from 'angular2/src/facade/lang';
-
-class PublicTestability {
-  _testability: Testability;
-
-  constructor(testability: Testability) { this._testability = testability; }
-
-  whenStable(callback: Function) { this._testability.whenStable(callback); }
-
-  findBindings(using, binding: string, exactMatch: boolean): List<any> {
-    return this._testability.findBindings(using, binding, exactMatch);
-  }
-}
-
-export class GetTestability {
-  static addToWindow(registry: TestabilityRegistry) {
-    global.getAngularTestability = function(elem): PublicTestability {
-      var testability = registry.findTestabilityInTree(elem);
-
-      if (testability == null) {
-        throw new Error('Could not find testability for element.');
-      }
-      return new PublicTestability(testability);
-    };
-  }
-}
diff --git a/modules/angular2/src/core/testability/testability.ts b/modules/angular2/src/core/testability/testability.ts
deleted file mode 100644
index 5e4921c8ded5..000000000000
--- a/modules/angular2/src/core/testability/testability.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Map, MapWrapper, List, ListWrapper} from 'angular2/src/facade/collection';
-import {StringWrapper, isBlank, BaseException} from 'angular2/src/facade/lang';
-import * as getTestabilityModule from './get_testability';
-
-
-/**
- * The Testability service provides testing hooks that can be accessed from
- * the browser and by services such as Protractor. Each bootstrapped Angular
- * application on the page will have an instance of Testability.
- */
-@Injectable()
-export class Testability {
-  _pendingCount: number;
-  _callbacks: List<Function>;
-
-  constructor() {
-    this._pendingCount = 0;
-    this._callbacks = [];
-  }
-
-  increaseCount(delta: number = 1): number {
-    this._pendingCount += delta;
-    if (this._pendingCount < 0) {
-      throw new BaseException('pending async requests below zero');
-    } else if (this._pendingCount == 0) {
-      this._runCallbacks();
-    }
-    return this._pendingCount;
-  }
-
-  _runCallbacks() {
-    while (this._callbacks.length !== 0) {
-      ListWrapper.removeLast(this._callbacks)();
-    }
-  }
-
-  whenStable(callback: Function) {
-    this._callbacks.push(callback);
-
-    if (this._pendingCount === 0) {
-      this._runCallbacks();
-    }
-    // TODO(juliemr) - hook into the zone api.
-  }
-
-  getPendingCount(): number { return this._pendingCount; }
-
-  findBindings(using, binding: string, exactMatch: boolean): List<any> {
-    // TODO(juliemr): implement.
-    return [];
-  }
-}
-
-@Injectable()
-export class TestabilityRegistry {
-  _applications: Map<any, Testability>;
-
-  constructor() {
-    this._applications = new Map();
-
-    getTestabilityModule.GetTestability.addToWindow(this);
-  }
-
-  registerApplication(token, testability: Testability) {
-    this._applications.set(token, testability);
-  }
-
-  findTestabilityInTree(elem): Testability {
-    if (elem == null) {
-      return null;
-    }
-    if (this._applications.has(elem)) {
-      return this._applications.get(elem);
-    }
-    if (DOM.isShadowRoot(elem)) {
-      return this.findTestabilityInTree(DOM.getHost(elem));
-    }
-    return this.findTestabilityInTree(DOM.parentElement(elem));
-  }
-}
diff --git a/modules/angular2/src/core/zone/ng_zone.dart b/modules/angular2/src/core/zone/ng_zone.dart
deleted file mode 100644
index 0d1045cf4b4c..000000000000
--- a/modules/angular2/src/core/zone/ng_zone.dart
+++ /dev/null
@@ -1,210 +0,0 @@
-library angular.zone;
-
-import 'dart:async';
-import 'package:stack_trace/stack_trace.dart' show Chain;
-
-/**
- * A `Zone` wrapper that lets you schedule tasks after its private microtask queue is exhausted but
- * before the next "VM turn", i.e. event loop iteration.
- *
- * This lets you freely schedule microtasks that prepare data, and set an {@link onTurnDone} handler that
- * will consume that data after it's ready but before the browser has a chance to re-render.
- *
- * A VM turn consist of a single macrotask followed 0 to many microtasks.
- *
- * The wrapper maintains an "inner" and "mount" `Zone`. The application code will executes
- * in the "inner" zone unless `runOutsideAngular` is explicitely called.
- *
- * A typical application will create a singleton `NgZone`. The mount zone is the `Zone` where the singleton has been
- * instantiated. The default `onTurnDone` runs the Angular change detection.
- */
-class NgZone {
-  Function _onTurnStart;
-  Function _onTurnDone;
-  Function _onErrorHandler;
-
-  // Code executed in _mountZone does not trigger the onTurnDone.
-  Zone _mountZone;
-  // _innerZone is the child of _mountZone. Any code executed in this zone will trigger the
-  // onTurnDone hook at the end of the current VM turn.
-  Zone _innerZone;
-
-  // Number of microtasks pending from _innerZone (& descendants)
-  int _pendingMicrotasks = 0;
-  // Whether some code has been executed in the _innerZone (& descendants) in the current turn
-  bool _hasExecutedCodeInInnerZone = false;
-  // _outerRun() call depth. 0 at the end of a macrotask
-  // zone.run(() => {         // top-level call
-  //   zone.run(() => {});    // nested call -> in-turn
-  // });                      // we should only check for the end of a turn once the top-level run ends
-  int _nestedRun = 0;
-
-  bool _inVmTurnDone = false;
-
-  /**
-   * Associates with this
-   *
-   * - a "mount" [Zone], which is a the one that instantiated this.
-   * - an "inner" [Zone], which is a child of the mount [Zone].
-   *
-   * @param {bool} enableLongStackTrace whether to enable long stack trace. They should only be
-   *               enabled in development mode as they significantly impact perf.
-   */
-  NgZone({bool enableLongStackTrace}) {
-    _mountZone = Zone.current;
-
-    if (enableLongStackTrace) {
-      _innerZone = Chain.capture(() => _createInnerZone(Zone.current),
-          onError: _onErrorWithLongStackTrace);
-    } else {
-      _innerZone = _createInnerZone(Zone.current,
-          handleUncaughtError: (Zone self, ZoneDelegate parent, Zone zone,
-              error,
-              StackTrace trace) => _onErrorWithoutLongStackTrace(error, trace));
-    }
-  }
-
-  /**
-   * Initializes the zone hooks.
-   *
-   * The given error handler should re-throw the passed exception. Otherwise, exceptions will not
-   * propagate outside of the [NgZone] and can alter the application execution flow.
-   * Not re-throwing could be used to help testing the code or advanced use cases.
-   *
-   * @param {Function} onTurnStart called before code executes in the inner zone for each VM turn
-   * @param {Function} onTurnDone called at the end of a VM turn if code has executed in the inner zone
-   * @param {Function} onErrorHandler called when an exception is thrown by a macro or micro task
-   */
-  void initCallbacks(
-      {Function onTurnStart, Function onTurnDone, Function onErrorHandler}) {
-    _onTurnStart = onTurnStart;
-    _onTurnDone = onTurnDone;
-    _onErrorHandler = onErrorHandler;
-  }
-
-  /**
-   * Runs `fn` in the inner zone and returns whatever it returns.
-   *
-   * In a typical app where the inner zone is the Angular zone, this allows one to make use of the
-   * Angular's auto digest mechanism.
-   *
-   * ```
-   * NgZone zone = <ref to the application zone>;
-   *
-   * void functionCalledFromJS() {
-   *   zone.run(() {
-   *     // auto-digest will run after this function is called from JS
-   *   });
-   * }
-   * ```
-   */
-  dynamic run(fn()) {
-    // Using runGuarded() is required when executing sync code with Dart otherwise handleUncaughtError()
-    // would not be called on exceptions.
-    // see https://code.google.com/p/dart/issues/detail?id=19566 for details.
-    return _innerZone.runGuarded(fn);
-  }
-
-  /**
-   * Runs `fn` in the mount zone and returns whatever it returns.
-   *
-   * In a typical app where the inner zone is the Angular zone, this allows one to escape Angular's
-   * auto-digest mechanism.
-   *
-   * ```
-   * void myFunction(NgZone zone, Element element) {
-   *   element.onClick.listen(() {
-   *     // auto-digest will run after element click.
-   *   });
-   *   zone.runOutsideAngular(() {
-   *     element.onMouseMove.listen(() {
-   *       // auto-digest will NOT run after mouse move
-   *     });
-   *   });
-   * }
-   * ```
-   */
-  dynamic runOutsideAngular(fn()) {
-    return _mountZone.run(fn);
-  }
-
-  void _maybeStartVmTurn(ZoneDelegate parent) {
-    if (!_hasExecutedCodeInInnerZone) {
-      _hasExecutedCodeInInnerZone = true;
-      if (_onTurnStart != null) {
-        parent.run(_innerZone, _onTurnStart);
-      }
-    }
-  }
-
-  dynamic _run(Zone self, ZoneDelegate parent, Zone zone, fn()) {
-    try {
-      _nestedRun++;
-      _maybeStartVmTurn(parent);
-      return parent.run(zone, fn);
-    } finally {
-      _nestedRun--;
-      // If there are no more pending microtasks and we are not in a recursive call, this is the end of a turn
-      if (_pendingMicrotasks == 0 && _nestedRun == 0 && !_inVmTurnDone) {
-        if (_onTurnDone != null && _hasExecutedCodeInInnerZone) {
-          // Trigger onTurnDone at the end of a turn if _innerZone has executed some code
-          try {
-            _inVmTurnDone = true;
-            parent.run(_innerZone, _onTurnDone);
-          } finally {
-            _inVmTurnDone = false;
-            _hasExecutedCodeInInnerZone = false;
-          }
-        }
-      }
-    }
-  }
-
-  dynamic _runUnary(Zone self, ZoneDelegate parent, Zone zone, fn(arg), arg) =>
-      _run(self, parent, zone, () => fn(arg));
-
-  dynamic _runBinary(Zone self, ZoneDelegate parent, Zone zone, fn(arg1, arg2),
-      arg1, arg2) => _run(self, parent, zone, () => fn(arg1, arg2));
-
-  void _scheduleMicrotask(Zone self, ZoneDelegate parent, Zone zone, fn) {
-    _pendingMicrotasks++;
-    var microtask = () {
-      try {
-        fn();
-      } finally {
-        _pendingMicrotasks--;
-      }
-    };
-    parent.scheduleMicrotask(zone, microtask);
-  }
-
-  // Called by Chain.capture() on errors when long stack traces are enabled
-  void _onErrorWithLongStackTrace(error, Chain chain) {
-    if (_onErrorHandler != null) {
-      final traces = chain.terse.traces.map((t) => t.toString()).toList();
-      _onErrorHandler(error, traces);
-    } else {
-      throw error;
-    }
-  }
-
-  // Outer zone handleUnchaughtError when long stack traces are not used
-  void _onErrorWithoutLongStackTrace(error, StackTrace trace) {
-    if (_onErrorHandler != null) {
-      _onErrorHandler(error, [trace.toString()]);
-    } else {
-      throw error;
-    }
-  }
-
-  Zone _createInnerZone(Zone zone, {handleUncaughtError}) {
-    return zone.fork(
-        specification: new ZoneSpecification(
-            scheduleMicrotask: _scheduleMicrotask,
-            run: _run,
-            runUnary: _runUnary,
-            runBinary: _runBinary,
-            handleUncaughtError: handleUncaughtError),
-        zoneValues: {'_innerZone': true});
-  }
-}
diff --git a/modules/angular2/src/core/zone/ng_zone.ts b/modules/angular2/src/core/zone/ng_zone.ts
deleted file mode 100644
index 304a7d7fb038..000000000000
--- a/modules/angular2/src/core/zone/ng_zone.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {normalizeBlank, isPresent, global} from 'angular2/src/facade/lang';
-
-export interface NgZoneZone extends Zone { _innerZone: boolean; }
-
-/**
- * A wrapper around zones that lets you schedule tasks after it has executed a task.
- *
- * The wrapper maintains an "inner" and an "mount" `Zone`. The application code will executes
- * in the "inner" zone unless `runOutsideAngular` is explicitely called.
- *
- * A typical application will create a singleton `NgZone`. The outer `Zone` is a fork of the root
- * `Zone`. The default `onTurnDone` runs the Angular change detection.
- *
- * @exportedAs angular2/core
- */
-export class NgZone {
-  // Code executed in _mountZone does not trigger the onTurnDone.
-  _mountZone;
-  // _innerZone is the child of _mountZone. Any code executed in this zone will trigger the
-  // onTurnDone hook at the end of the current VM turn.
-  _innerZone;
-
-  _onTurnStart: () => void;
-  _onTurnDone: () => void;
-  _onErrorHandler: (error, stack) => void;
-
-  // Number of microtasks pending from _innerZone (& descendants)
-  _pendingMicrotasks: number;
-  // Whether some code has been executed in the _innerZone (& descendants) in the current turn
-  _hasExecutedCodeInInnerZone: boolean;
-  // run() call depth in _mountZone. 0 at the end of a macrotask
-  // zone.run(() => {         // top-level call
-  //   zone.run(() => {});    // nested call -> in-turn
-  // });
-  _nestedRun: number;
-
-  // TODO(vicb): implement this class properly for node.js environment
-  // This disabled flag is only here to please cjs tests
-  _disabled: boolean;
-
-  _inVmTurnDone: boolean = false;
-
-  /**
-   * Associates with this
-   *
-   * - a "root" zone, which the one that instantiated this.
-   * - an "inner" zone, which is a child of the root zone.
-   *
-   * @param {bool} enableLongStackTrace whether to enable long stack trace. They should only be
-   *               enabled in development mode as they significantly impact perf.
-   */
-  constructor({enableLongStackTrace}) {
-    this._onTurnStart = null;
-    this._onTurnDone = null;
-    this._onErrorHandler = null;
-
-    this._pendingMicrotasks = 0;
-    this._hasExecutedCodeInInnerZone = false;
-    this._nestedRun = 0;
-
-    if (global.zone) {
-      this._disabled = false;
-      this._mountZone = global.zone;
-      this._innerZone = this._createInnerZone(this._mountZone, enableLongStackTrace)
-    } else {
-      this._disabled = true;
-      this._mountZone = null;
-    }
-  }
-
-  /**
-   * Initializes the zone hooks.
-   *
-   * @param {() => void} onTurnStart called before code executes in the inner zone for each VM turn
-   * @param {() => void} onTurnDone called at the end of a VM turn if code has executed in the inner
-   * zone
-   * @param {(error, stack) => void} onErrorHandler called when an exception is thrown by a macro or
-   * micro task
-   */
-  initCallbacks({onTurnStart, onTurnDone, onErrorHandler}: {
-    onTurnStart?: /*() => void*/ Function,
-    onTurnDone?: /*() => void*/ Function,
-    onErrorHandler?: /*(error, stack) => void*/ Function
-  } = {}) {
-    this._onTurnStart = normalizeBlank(onTurnStart);
-    this._onTurnDone = normalizeBlank(onTurnDone);
-    this._onErrorHandler = normalizeBlank(onErrorHandler);
-  }
-
-  /**
-   * Runs `fn` in the inner zone and returns whatever it returns.
-   *
-   * In a typical app where the inner zone is the Angular zone, this allows one to make use of the
-   * Angular's auto digest mechanism.
-   *
-   * ```
-   * var zone: NgZone = [ref to the application zone];
-   *
-   * zone.run(() => {
-   *   // the change detection will run after this function and the microtasks it enqueues have
-   * executed.
-   * });
-   * ```
-   */
-  run(fn): any {
-    if (this._disabled) {
-      return fn();
-    } else {
-      return this._innerZone.run(fn);
-    }
-  }
-
-  /**
-   * Runs `fn` in the outer zone and returns whatever it returns.
-   *
-   * In a typical app where the inner zone is the Angular zone, this allows one to escape Angular's
-   * auto-digest mechanism.
-   *
-   * ```
-   * var zone: NgZone = [ref to the application zone];
-   *
-   * zone.runOusideAngular(() => {
-   *   element.onClick(() => {
-   *     // Clicking on the element would not trigger the change detection
-   *   });
-   * });
-   * ```
-   */
-  runOutsideAngular(fn): any {
-    if (this._disabled) {
-      return fn();
-    } else {
-      return this._mountZone.run(fn);
-    }
-  }
-
-  _createInnerZone(zone, enableLongStackTrace) {
-    var ngZone = this;
-    var errorHandling;
-
-    if (enableLongStackTrace) {
-      errorHandling = StringMapWrapper.merge(Zone.longStackTraceZone,
-                                             {onError: function(e) { ngZone._onError(this, e) }});
-    } else {
-      errorHandling = {onError: function(e) { ngZone._onError(this, e) }};
-    }
-
-    return zone.fork(errorHandling)
-        .fork({
-          '$run': function(parentRun) {
-            return function() {
-              try {
-                ngZone._nestedRun++;
-                if (!ngZone._hasExecutedCodeInInnerZone) {
-                  ngZone._hasExecutedCodeInInnerZone = true;
-                  if (ngZone._onTurnStart) {
-                    parentRun.call(ngZone._innerZone, ngZone._onTurnStart);
-                  }
-                }
-                return parentRun.apply(this, arguments);
-              } finally {
-                ngZone._nestedRun--;
-                // If there are no more pending microtasks, we are at the end of a VM turn (or in
-                // onTurnStart)
-                // _nestedRun will be 0 at the end of a macrotasks (it could be > 0 when there are
-                // nested calls
-                // to run()).
-                if (ngZone._pendingMicrotasks == 0 && ngZone._nestedRun == 0 &&
-                    !this._inVmTurnDone) {
-                  if (ngZone._onTurnDone && ngZone._hasExecutedCodeInInnerZone) {
-                    try {
-                      this._inVmTurnDone = true;
-                      parentRun.call(ngZone._innerZone, ngZone._onTurnDone);
-                    } finally {
-                      this._inVmTurnDone = false;
-                      ngZone._hasExecutedCodeInInnerZone = false;
-                    }
-                  }
-                }
-              }
-            }
-          },
-          '$scheduleMicrotask': function(parentScheduleMicrotask) {
-            return function(fn) {
-              ngZone._pendingMicrotasks++;
-              var microtask = function() {
-                try {
-                  fn();
-                } finally {
-                  ngZone._pendingMicrotasks--;
-                }
-              };
-              parentScheduleMicrotask.call(this, microtask);
-            }
-          },
-          _innerZone: true
-        });
-  }
-
-  _onError(zone, e): void {
-    if (isPresent(this._onErrorHandler)) {
-      var trace = [normalizeBlank(e.stack)];
-
-      while (zone && zone.constructedAtException) {
-        trace.push(zone.constructedAtException.get());
-        zone = zone.parent;
-      }
-      this._onErrorHandler(e, trace);
-    } else {
-      console.log('## _onError ##');
-      console.log(e.stack);
-      throw e;
-    }
-  }
-}
diff --git a/modules/angular2/src/debug/debug_element.ts b/modules/angular2/src/debug/debug_element.ts
deleted file mode 100644
index f61d8e821905..000000000000
--- a/modules/angular2/src/debug/debug_element.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-import {Type, isPresent, BaseException, isBlank} from 'angular2/src/facade/lang';
-import {List, ListWrapper, MapWrapper, Predicate} from 'angular2/src/facade/collection';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {ElementInjector} from 'angular2/src/core/compiler/element_injector';
-import {AppView} from 'angular2/src/core/compiler/view';
-import {internalView} from 'angular2/src/core/compiler/view_ref';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-
-/**
- * @exportedAs angular2/test
- *
- * An DebugElement contains information from the Angular compiler about an
- * element and provides access to the corresponding ElementInjector and
- * underlying dom Element, as well as a way to query for children.
- */
-export class DebugElement {
-  _elementInjector: ElementInjector;
-
-  constructor(private _parentView: AppView, private _boundElementIndex: number) {
-    this._elementInjector = this._parentView.elementInjectors[this._boundElementIndex];
-  }
-
-  static create(elementRef: ElementRef): DebugElement {
-    return new DebugElement(internalView(elementRef.parentView), elementRef.boundElementIndex);
-  }
-
-  get componentInstance(): any {
-    if (!isPresent(this._elementInjector)) {
-      return null;
-    }
-    return this._elementInjector.getComponent();
-  }
-
-  get nativeElement(): any { return this.elementRef.nativeElement; }
-
-  get elementRef(): ElementRef { return this._parentView.elementRefs[this._boundElementIndex]; }
-
-  getDirectiveInstance(directiveIndex: number): any {
-    return this._elementInjector.getDirectiveAtIndex(directiveIndex);
-  }
-
-  /**
-   * Get child DebugElements from within the Light DOM.
-   *
-   * @return {List<DebugElement>}
-   */
-  get children(): List<DebugElement> {
-    var thisElementBinder = this._parentView.proto.elementBinders[this._boundElementIndex];
-
-    return this._getChildElements(this._parentView, thisElementBinder.index);
-  }
-
-  /**
-   * Get the root DebugElement children of a component. Returns an empty
-   * list if the current DebugElement is not a component root.
-   *
-   * @return {List<DebugElement>}
-   */
-  get componentViewChildren(): List<DebugElement> {
-    var shadowView = this._parentView.componentChildViews[this._boundElementIndex];
-
-    if (!isPresent(shadowView)) {
-      // The current element is not a component.
-      return [];
-    }
-
-    return this._getChildElements(shadowView, null);
-  }
-
-  triggerEventHandler(eventName, eventObj): void {
-    this._parentView.triggerEventHandlers(eventName, eventObj, this._boundElementIndex);
-  }
-
-  hasDirective(type: Type): boolean {
-    if (!isPresent(this._elementInjector)) {
-      return false;
-    }
-    return this._elementInjector.hasDirective(type);
-  }
-
-  inject(type: Type): any {
-    if (!isPresent(this._elementInjector)) {
-      return null;
-    }
-    return this._elementInjector.get(type);
-  }
-
-  getLocal(name: string): any { return this._parentView.locals.get(name); }
-
-  /**
-   * Return the first descendant TestElement matching the given predicate
-   * and scope.
-   *
-   * @param {Function: boolean} predicate
-   * @param {Scope} scope
-   *
-   * @return {DebugElement}
-   */
-  query(predicate: Predicate<DebugElement>, scope = Scope.all): DebugElement {
-    var results = this.queryAll(predicate, scope);
-    return results.length > 0 ? results[0] : null;
-  }
-
-  /**
-   * Return descendant TestElememts matching the given predicate
-   * and scope.
-   *
-   * @param {Function: boolean} predicate
-   * @param {Scope} scope
-   *
-   * @return {List<DebugElement>}
-   */
-  queryAll(predicate: Predicate<DebugElement>, scope = Scope.all): List<DebugElement> {
-    var elementsInScope = scope(this);
-
-    return ListWrapper.filter(elementsInScope, predicate);
-  }
-
-  _getChildElements(view: AppView, parentBoundElementIndex: number): List<DebugElement> {
-    var els = [];
-    var parentElementBinder = null;
-    if (isPresent(parentBoundElementIndex)) {
-      parentElementBinder = view.proto.elementBinders[parentBoundElementIndex];
-    }
-    for (var i = 0; i < view.proto.elementBinders.length; ++i) {
-      var binder = view.proto.elementBinders[i];
-      if (binder.parent == parentElementBinder) {
-        els.push(new DebugElement(view, i));
-
-        var views = view.viewContainers[i];
-        if (isPresent(views)) {
-          ListWrapper.forEach(views.views, (nextView) => {
-            els = ListWrapper.concat(els, this._getChildElements(nextView, null));
-          });
-        }
-      }
-    }
-    return els;
-  }
-}
-
-export function inspectElement(elementRef: ElementRef): DebugElement {
-  return DebugElement.create(elementRef);
-}
-
-export function asNativeElements(arr: List<DebugElement>): List<any> {
-  return arr.map((debugEl) => debugEl.nativeElement);
-}
-
-/**
- * @exportedAs angular2/test
- */
-export class Scope {
-  static all(debugElement): List<DebugElement> {
-    var scope = [];
-    scope.push(debugElement);
-
-    ListWrapper.forEach(debugElement.children,
-                        (child) => { scope = ListWrapper.concat(scope, Scope.all(child)); });
-
-    ListWrapper.forEach(debugElement.componentViewChildren,
-                        (child) => { scope = ListWrapper.concat(scope, Scope.all(child)); });
-
-    return scope;
-  }
-  static light(debugElement): List<DebugElement> {
-    var scope = [];
-    ListWrapper.forEach(debugElement.children, (child) => {
-      scope.push(child);
-      scope = ListWrapper.concat(scope, Scope.light(child));
-    });
-    return scope;
-  }
-
-  static view(debugElement): List<DebugElement> {
-    var scope = [];
-
-    ListWrapper.forEach(debugElement.componentViewChildren, (child) => {
-      scope.push(child);
-      scope = ListWrapper.concat(scope, Scope.light(child));
-    });
-    return scope;
-  }
-}
-
-/**
- * @exportedAs angular2/test
- */
-export class By {
-  static all(): Function { return (debugElement) => true; }
-
-  static css(selector: string): Predicate<DebugElement> {
-    return (debugElement) => { return DOM.elementMatches(debugElement.nativeElement, selector); };
-  }
-  static directive(type: Type): Predicate<DebugElement> {
-    return (debugElement) => { return debugElement.hasDirective(type); };
-  }
-}
diff --git a/modules/angular2/src/debug/debug_element_view_listener.ts b/modules/angular2/src/debug/debug_element_view_listener.ts
deleted file mode 100644
index 8b79afb3148f..000000000000
--- a/modules/angular2/src/debug/debug_element_view_listener.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import {
-  CONST_EXPR,
-  isPresent,
-  NumberWrapper,
-  StringWrapper,
-  RegExpWrapper
-} from 'angular2/src/facade/lang';
-import {MapWrapper, Map, ListWrapper, List} from 'angular2/src/facade/collection';
-import {Injectable, bind, Binding} from 'angular2/di';
-import {AppViewListener} from 'angular2/src/core/compiler/view_listener';
-import {AppView} from 'angular2/src/core/compiler/view';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Renderer} from 'angular2/src/render/api';
-import {DebugElement} from './debug_element';
-
-const NG_ID_PROPERTY = 'ngid';
-const INSPECT_GLOBAL_NAME = 'ngProbe';
-
-var NG_ID_SEPARATOR_RE = RegExpWrapper.create('#');
-var NG_ID_SEPARATOR = '#';
-
-// Need to keep the views in a global Map so that multiple angular apps are supported
-var _allIdsByView = new Map<AppView, number>();
-var _allViewsById = new Map<number, AppView>();
-
-var _nextId = 0;
-
-function _setElementId(element, indices: List<number>) {
-  if (isPresent(element)) {
-    DOM.setData(element, NG_ID_PROPERTY, ListWrapper.join(indices, NG_ID_SEPARATOR));
-  }
-}
-
-function _getElementId(element): List<number> {
-  var elId = DOM.getData(element, NG_ID_PROPERTY);
-  if (isPresent(elId)) {
-    return ListWrapper.map(StringWrapper.split(elId, NG_ID_SEPARATOR_RE),
-                           (partStr) => NumberWrapper.parseInt(partStr, 10));
-  } else {
-    return null;
-  }
-}
-
-export function inspectNativeElement(element): DebugElement {
-  var elId = _getElementId(element);
-  if (isPresent(elId)) {
-    var view = _allViewsById.get(elId[0]);
-    if (isPresent(view)) {
-      return new DebugElement(view, elId[1]);
-    }
-  }
-  return null;
-}
-
-@Injectable()
-export class DebugElementViewListener implements AppViewListener {
-  constructor(private _renderer: Renderer) {
-    DOM.setGlobalVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
-  }
-
-  viewCreated(view: AppView) {
-    var viewId = _nextId++;
-    _allViewsById.set(viewId, view);
-    _allIdsByView.set(view, viewId);
-    for (var i = 0; i < view.elementRefs.length; i++) {
-      _setElementId(this._renderer.getNativeElementSync(view.elementRefs[i]), [viewId, i]);
-    }
-  }
-
-  viewDestroyed(view: AppView) {
-    var viewId = _allIdsByView.get(view);
-    MapWrapper.delete(_allIdsByView, view);
-    MapWrapper.delete(_allViewsById, viewId);
-  }
-}
-
-export var ELEMENT_PROBE_CONFIG = [
-  DebugElementViewListener,
-  bind(AppViewListener).toAlias(DebugElementViewListener),
-];
diff --git a/modules/angular2/src/di/annotations.dart b/modules/angular2/src/di/annotations.dart
deleted file mode 100644
index b019ea5ff3a7..000000000000
--- a/modules/angular2/src/di/annotations.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library angular2.di.annotations;
-
-export './annotations_impl.dart';
diff --git a/modules/angular2/src/di/annotations.ts b/modules/angular2/src/di/annotations.ts
deleted file mode 100644
index 599122edb8f8..000000000000
--- a/modules/angular2/src/di/annotations.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * This indirection is needed to free up Component, etc symbols in the public API
- * to be used by the decorator versions of these annotations.
- */
-
-export {
-  Inject as InjectAnnotation,
-  Optional as OptionalAnnotation,
-  Injectable as InjectableAnnotation,
-  Visibility as VisibilityAnnotation,
-  Self as SelfAnnotation,
-  Parent as ParentAnnotation,
-  Ancestor as AncestorAnnotation,
-  Unbounded as UnboundedAnnotation,
-  DependencyAnnotation,  // abstract base class, does not need a decorator
-} from './annotations_impl';
diff --git a/modules/angular2/src/di/annotations_impl.ts b/modules/angular2/src/di/annotations_impl.ts
deleted file mode 100644
index 71392168fd05..000000000000
--- a/modules/angular2/src/di/annotations_impl.ts
+++ /dev/null
@@ -1,255 +0,0 @@
-import {CONST, CONST_EXPR, stringify, isBlank, isPresent} from "angular2/src/facade/lang";
-
-/**
- * A parameter annotation that specifies a dependency.
- *
- * ```
- * class AComponent {
- *   constructor(@Inject(MyService) aService:MyService) {}
- * }
- * ```
- *
- * @exportedAs angular2/di_annotations
- */
-
-@CONST()
-export class Inject {
-  constructor(public token) {}
-  toString(): string { return `@Inject(${stringify(this.token)})`; }
-}
-
-/**
- * A parameter annotation that marks a dependency as optional. {@link Injector} provides `null` if
- * the dependency is not found.
- *
- * ```
- * class AComponent {
- *   constructor(@Optional() aService:MyService) {
- *     this.aService = aService;
- *   }
- * }
- * ```
- *
- * @exportedAs angular2/di_annotations
- */
-@CONST()
-export class Optional {
-  toString(): string { return `@Optional()`; }
-}
-
-/**
- * `DependencyAnnotation` is used by the framework to extend DI.
- *
- * Only annotations implementing `DependencyAnnotation` are added to the list of dependency
- * properties.
- *
- * For example:
- *
- * ```
- * class Parent extends DependencyAnnotation {}
- * class NotDependencyProperty {}
- *
- * class AComponent {
- *   constructor(@Parent @NotDependencyProperty aService:AService) {}
- * }
- * ```
- *
- * will create the following dependency:
- *
- * ```
- * new Dependency(Key.get(AService), [new Parent()])
- * ```
- *
- * The framework can use `new Parent()` to handle the `aService` dependency
- * in a specific way.
- *
- * @exportedAs angular2/di_annotations
- */
-@CONST()
-export class DependencyAnnotation {
-  get token() { return null; }
-}
-
-/**
- * A marker annotation that marks a class as available to `Injector` for creation. Used by tooling
- * for generating constructor stubs.
- *
- * ```
- * class NeedsService {
- *   constructor(svc:UsefulService) {}
- * }
- *
- * @Injectable
- * class UsefulService {}
- * ```
- * @exportedAs angular2/di_annotations
- */
-@CONST()
-export class Injectable {
-  constructor(public visibility: Visibility = unbounded) {}
-}
-
-/**
- * Specifies how injector should resolve a dependency.
- *
- * See {@link Self}, {@link Parent}, {@link Ancestor}, {@link Unbounded}.
- *
- * @exportedAs angular2/di_annotations
- */
-@CONST()
-export class Visibility {
-  constructor(public depth: number, public crossBoundaries: boolean, public _includeSelf: boolean) {
-  }
-
-  get includeSelf(): boolean { return isBlank(this._includeSelf) ? false : this._includeSelf; }
-
-  toString(): string {
-    return `@Visibility(depth: ${this.depth}, crossBoundaries: ${this.crossBoundaries}, includeSelf: ${this.includeSelf}})`;
-  }
-}
-
-/**
- * Specifies that an injector should retrieve a dependency from itself.
- *
- * ## Example
- *
- * ```
- * class Dependency {
- * }
- *
- * class NeedsDependency {
- *   constructor(public @Self() dependency:Dependency) {}
- * }
- *
- * var inj = Injector.resolveAndCreate([Dependency, NeedsDependency]);
- * var nd = inj.get(NeedsDependency);
- * expect(nd.dependency).toBeAnInstanceOf(Dependency);
- * ```
- *
- * @exportedAs angular2/di
- */
-@CONST()
-export class Self extends Visibility {
-  constructor() { super(0, false, true); }
-  toString(): string { return `@Self()`; }
-}
-
-export const self = CONST_EXPR(new Self());
-
-/**
- * Specifies that an injector should retrieve a dependency from the direct parent.
- *
- * ## Example
- *
- * ```
- * class Dependency {
- * }
- *
- * class NeedsDependency {
- *   constructor(public @Parent() dependency:Dependency) {}
- * }
- *
- * var parent = Injector.resolveAndCreate([
- *   bind(Dependency).toClass(ParentDependency)
- * ]);
- * var child = parent.resolveAndCreateChild([NeedsDependency, Depedency]);
- * var nd = child.get(NeedsDependency);
- * expect(nd.dependency).toBeAnInstanceOf(ParentDependency);
- * ```
- *
- * You can make an injector to retrive a dependency either from itself or its direct parent by
- * setting self to true.
- *
- * ```
- * class NeedsDependency {
- *   constructor(public @Parent({self:true}) dependency:Dependency) {}
- * }
- * ```
- *
- * @exportedAs angular2/di
- */
-@CONST()
-export class Parent extends Visibility {
-  constructor({self}: {self?: boolean} = {}) { super(1, false, self); }
-  toString(): string { return `@Parent(self: ${this.includeSelf}})`; }
-}
-
-/**
- * Specifies that an injector should retrieve a dependency from any ancestor from the same boundary.
- *
- * ## Example
- *
- * ```
- * class Dependency {
- * }
- *
- * class NeedsDependency {
- *   constructor(public @Ancestor() dependency:Dependency) {}
- * }
- *
- * var parent = Injector.resolveAndCreate([
- *   bind(Dependency).toClass(AncestorDependency)
- * ]);
- * var child = parent.resolveAndCreateChild([]);
- * var grandChild = child.resolveAndCreateChild([NeedsDependency, Depedency]);
- * var nd = grandChild.get(NeedsDependency);
- * expect(nd.dependency).toBeAnInstanceOf(AncestorDependency);
- * ```
- *
- * You can make an injector to retrive a dependency either from itself or its ancestor by setting
- * self to true.
- *
- * ```
- * class NeedsDependency {
- *   constructor(public @Ancestor({self:true}) dependency:Dependency) {}
- * }
- * ```
- *
- * @exportedAs angular2/di
- */
-@CONST()
-export class Ancestor extends Visibility {
-  constructor({self}: {self?: boolean} = {}) { super(999999, false, self); }
-  toString(): string { return `@Ancestor(self: ${this.includeSelf}})`; }
-}
-
-/**
- * Specifies that an injector should retrieve a dependency from any ancestor, crossing boundaries.
- *
- * ## Example
- *
- * ```
- * class Dependency {
- * }
- *
- * class NeedsDependency {
- *   constructor(public @Ancestor() dependency:Dependency) {}
- * }
- *
- * var parent = Injector.resolveAndCreate([
- *   bind(Dependency).toClass(AncestorDependency)
- * ]);
- * var child = parent.resolveAndCreateChild([]);
- * var grandChild = child.resolveAndCreateChild([NeedsDependency, Depedency]);
- * var nd = grandChild.get(NeedsDependency);
- * expect(nd.dependency).toBeAnInstanceOf(AncestorDependency);
- * ```
- *
- * You can make an injector to retrive a dependency either from itself or its ancestor by setting
- * self to true.
- *
- * ```
- * class NeedsDependency {
- *   constructor(public @Ancestor({self:true}) dependency:Dependency) {}
- * }
- * ```
- *
- * @exportedAs angular2/di
- */
-@CONST()
-export class Unbounded extends Visibility {
-  constructor({self}: {self?: boolean} = {}) { super(999999, true, self); }
-  toString(): string { return `@Unbounded(self: ${this.includeSelf}})`; }
-}
-
-export const unbounded = CONST_EXPR(new Unbounded({self: true}));
\ No newline at end of file
diff --git a/modules/angular2/src/di/binding.ts b/modules/angular2/src/di/binding.ts
deleted file mode 100644
index dee1a9ca280f..000000000000
--- a/modules/angular2/src/di/binding.ts
+++ /dev/null
@@ -1,466 +0,0 @@
-import {
-  Type,
-  isBlank,
-  isPresent,
-  CONST,
-  CONST_EXPR,
-  BaseException,
-  stringify,
-  isArray
-} from 'angular2/src/facade/lang';
-import {List, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {Key} from './key';
-import {
-  Inject,
-  Injectable,
-  Visibility,
-  Optional,
-  unbounded,
-  DependencyAnnotation
-} from './annotations_impl';
-import {NoAnnotationError} from './exceptions';
-import {resolveForwardRef} from './forward_ref';
-
-/**
- * @private
- */
-export class Dependency {
-  constructor(public key: Key, public optional: boolean, public visibility: Visibility,
-              public properties: List<any>) {}
-
-  static fromKey(key: Key): Dependency {
-    return new Dependency(key, false, _defaulVisiblity(key.token), []);
-  }
-}
-
-const _EMPTY_LIST = CONST_EXPR([]);
-
-/**
- * Describes how the {@link Injector} should instantiate a given token.
- *
- * See {@link bind}.
- *
- * ## Example
- *
- * ```javascript
- * var injector = Injector.resolveAndCreate([
- *   new Binding(String, { toValue: 'Hello' })
- * ]);
- *
- * expect(injector.get(String)).toEqual('Hello');
- * ```
- *
- * @exportedAs angular2/di
- */
-@CONST()
-export class Binding {
-  /**
-   * Token used when retrieving this binding. Usually the `Type`.
-   */
-  token;
-
-  /**
-   * Binds an interface to an implementation / subclass.
-   *
-   * ## Example
-   *
-   * Becuse `toAlias` and `toClass` are often confused, the example contains both use cases for easy
-   * comparison.
-   *
-   * ```javascript
-   *
-   * class Vehicle {}
-   *
-   * class Car extends Vehicle {}
-   *
-   * var injectorClass = Injector.resolveAndCreate([
-   *   Car,
-   *   new Binding(Vehicle, { toClass: Car })
-   * ]);
-   * var injectorAlias = Injector.resolveAndCreate([
-   *   Car,
-   *   new Binding(Vehicle, { toAlias: Car })
-   * ]);
-   *
-   * expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
-   * expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
-   *
-   * expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
-   * expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
-   * ```
-   */
-  toClass: Type;
-
-  /**
-   * Binds a key to a value.
-   *
-   * ## Example
-   *
-   * ```javascript
-   * var injector = Injector.resolveAndCreate([
-   *   new Binding(String, { toValue: 'Hello' })
-   * ]);
-   *
-   * expect(injector.get(String)).toEqual('Hello');
-   * ```
-   */
-  toValue;
-
-  /**
-   * Binds a key to the alias for an existing key.
-   *
-   * An alias means that {@link Injector} returns the same instance as if the alias token was used.
-   * This is in contrast to `toClass` where a separate instance of `toClass` is returned.
-   *
-   * ## Example
-   *
-   * Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy
-   * comparison.
-   *
-   * ```javascript
-   *
-   * class Vehicle {}
-   *
-   * class Car extends Vehicle {}
-   *
-   * var injectorAlias = Injector.resolveAndCreate([
-   *   Car,
-   *   new Binding(Vehicle, { toAlias: Car })
-   * ]);
-   * var injectorClass = Injector.resolveAndCreate([
-   *   Car,
-   *   new Binding(Vehicle, { toClass: Car })
-   * ]);
-   *
-   * expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
-   * expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
-   *
-   * expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
-   * expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
-   * ```
-   */
-  toAlias;
-
-  /**
-   * Binds a key to a function which computes the value.
-   *
-   * ## Example
-   *
-   * ```javascript
-   * var injector = Injector.resolveAndCreate([
-   *   new Binding(Number, { toFactory: () => { return 1+2; }}),
-   *   new Binding(String, { toFactory: (value) => { return "Value: " + value; },
-   *                         dependencies: [Number] })
-   * ]);
-   *
-   * expect(injector.get(Number)).toEqual(3);
-   * expect(injector.get(String)).toEqual('Value: 3');
-   * ```
-   */
-  toFactory: Function;
-
-  /**
-   * Used in conjunction with `toFactory` and specifies a set of dependencies
-   * (as `token`s) which should be injected into the factory function.
-   *
-   * ## Example
-   *
-   * ```javascript
-   * var injector = Injector.resolveAndCreate([
-   *   new Binding(Number, { toFactory: () => { return 1+2; }}),
-   *   new Binding(String, { toFactory: (value) => { return "Value: " + value; },
-   *                         dependencies: [Number] })
-   * ]);
-   *
-   * expect(injector.get(Number)).toEqual(3);
-   * expect(injector.get(String)).toEqual('Value: 3');
-   * ```
-   */
-  dependencies: List<any>;
-
-  constructor(token, {toClass, toValue, toAlias, toFactory, deps}: {
-    toClass?: Type,
-    toValue?: any,
-    toAlias?: any,
-    toFactory?: Function,
-    deps?: List<any>
-  }) {
-    this.token = token;
-    this.toClass = toClass;
-    this.toValue = toValue;
-    this.toAlias = toAlias;
-    this.toFactory = toFactory;
-    this.dependencies = deps;
-  }
-
-  /**
-   * Converts the {@link Binding} into {@link ResolvedBinding}.
-   *
-   * {@link Injector} internally only uses {@link ResolvedBinding}, {@link Binding} contains
-   * convenience binding syntax.
-   */
-  resolve(): ResolvedBinding {
-    var factoryFn: Function;
-    var resolvedDeps;
-    if (isPresent(this.toClass)) {
-      var toClass = resolveForwardRef(this.toClass);
-      factoryFn = reflector.factory(toClass);
-      resolvedDeps = _dependenciesFor(toClass);
-    } else if (isPresent(this.toAlias)) {
-      factoryFn = (aliasInstance) => aliasInstance;
-      resolvedDeps = [Dependency.fromKey(Key.get(this.toAlias))];
-    } else if (isPresent(this.toFactory)) {
-      factoryFn = this.toFactory;
-      resolvedDeps = _constructDependencies(this.toFactory, this.dependencies);
-    } else {
-      factoryFn = () => this.toValue;
-      resolvedDeps = _EMPTY_LIST;
-    }
-
-    return new ResolvedBinding(Key.get(this.token), factoryFn, resolvedDeps);
-  }
-}
-
-/**
- * An internal resolved representation of a {@link Binding} used by the {@link Injector}.
- *
- * A {@link Binding} is resolved when it has a factory function. Binding to a class, alias, or
- * value, are just convenience methods, as {@link Injector} only operates on calling factory
- * functions.
- *
- * @exportedAs angular2/di
- */
-export class ResolvedBinding {
-  constructor(
-      /**
-       * A key, usually a `Type`.
-       */
-      public key: Key,
-
-      /**
-       * Factory function which can return an instance of an object represented by a key.
-       */
-      public factory: Function,
-
-      /**
-       * Arguments (dependencies) to the `factory` function.
-       */
-      public dependencies: List<Dependency>) {}
-}
-
-/**
- * Provides an API for imperatively constructing {@link Binding}s.
- *
- * This is only relevant for JavaScript. See {@link BindingBuilder}.
- *
- * ## Example
- *
- * ```javascript
- * bind(MyInterface).toClass(MyClass)
- *
- * ```
- *
- * @exportedAs angular2/di
- */
-export function bind(token): BindingBuilder {
-  return new BindingBuilder(token);
-}
-
-/**
- * Helper class for the {@link bind} function.
- *
- * @exportedAs angular2/di
- */
-export class BindingBuilder {
-  constructor(public token) {}
-
-  /**
-   * Binds an interface to an implementation / subclass.
-   *
-   * ## Example
-   *
-   * Because `toAlias` and `toClass` are often confused, the example contains both use cases for
-   * easy comparison.
-   *
-   * ```javascript
-   *
-   * class Vehicle {}
-   *
-   * class Car extends Vehicle {}
-   *
-   * var injectorClass = Injector.resolveAndCreate([
-   *   Car,
-   *   bind(Vehicle).toClass(Car)
-   * ]);
-   * var injectorAlias = Injector.resolveAndCreate([
-   *   Car,
-   *   bind(Vehicle).toAlias(Car)
-   * ]);
-   *
-   * expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
-   * expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
-   *
-   * expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
-   * expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
-   * ```
-   */
-  toClass(type: Type): Binding { return new Binding(this.token, {toClass: type}); }
-
-  /**
-   * Binds a key to a value.
-   *
-   * ## Example
-   *
-   * ```javascript
-   * var injector = Injector.resolveAndCreate([
-   *   bind(String).toValue('Hello')
-   * ]);
-   *
-   * expect(injector.get(String)).toEqual('Hello');
-   * ```
-   */
-  toValue(value): Binding { return new Binding(this.token, {toValue: value}); }
-
-  /**
-   * Binds a key to the alias for an existing key.
-   *
-   * An alias means that we will return the same instance as if the alias token was used. (This is
-   * in contrast to `toClass` where a separet instance of `toClass` will be returned.)
-   *
-   * ## Example
-   *
-   * Becuse `toAlias` and `toClass` are often confused, the example contains both use cases for easy
-   * comparison.
-   *
-   * ```javascript
-   *
-   * class Vehicle {}
-   *
-   * class Car extends Vehicle {}
-   *
-   * var injectorAlias = Injector.resolveAndCreate([
-   *   Car,
-   *   bind(Vehicle).toAlias(Car)
-   * ]);
-   * var injectorClass = Injector.resolveAndCreate([
-   *   Car,
-   *   bind(Vehicle).toClass(Car)
-   * ]);
-   *
-   * expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
-   * expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
-   *
-   * expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
-   * expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
-   * ```
-   */
-  toAlias(aliasToken): Binding {
-    if (isBlank(aliasToken)) {
-      throw new BaseException(`Can not alias ${stringify(this.token)} to a blank value!`);
-    }
-    return new Binding(this.token, {toAlias: aliasToken});
-  }
-
-  /**
-   * Binds a key to a function which computes the value.
-   *
-   * ## Example
-   *
-   * ```javascript
-   * var injector = Injector.resolveAndCreate([
-   *   bind(Number).toFactory(() => { return 1+2; }),
-   *   bind(String).toFactory((v) => { return "Value: " + v; }, [Number])
-   * ]);
-   *
-   * expect(injector.get(Number)).toEqual(3);
-   * expect(injector.get(String)).toEqual('Value: 3');
-   * ```
-   */
-  toFactory(factoryFunction: Function, dependencies?: List<any>): Binding {
-    return new Binding(this.token, {toFactory: factoryFunction, deps: dependencies});
-  }
-}
-
-function _constructDependencies(factoryFunction: Function,
-                                dependencies: List<any>): List<Dependency> {
-  if (isBlank(dependencies)) {
-    return _dependenciesFor(factoryFunction);
-  } else {
-    var params: List<List<any>> = ListWrapper.map(dependencies, (t) => [t]);
-    return ListWrapper.map(dependencies, (t) => _extractToken(factoryFunction, t, params));
-  }
-}
-
-function _dependenciesFor(typeOrFunc): List<Dependency> {
-  var params = reflector.parameters(typeOrFunc);
-  if (isBlank(params)) return [];
-  if (ListWrapper.any(params, (p) => isBlank(p))) {
-    throw new NoAnnotationError(typeOrFunc, params);
-  }
-  return ListWrapper.map(params, (p: List<any>) => _extractToken(typeOrFunc, p, params));
-}
-
-function _extractToken(typeOrFunc, annotations /*List<any> | any*/,
-                       params: List<List<any>>): Dependency {
-  var depProps = [];
-  var token = null;
-  var optional = false;
-
-  if (!isArray(annotations)) {
-    return _createDependency(annotations, optional, _defaulVisiblity(annotations), depProps);
-  }
-
-  var visibility = null;
-  var defaultVisibility = unbounded;
-
-  for (var i = 0; i < annotations.length; ++i) {
-    var paramAnnotation = annotations[i];
-
-    if (paramAnnotation instanceof Type) {
-      token = paramAnnotation;
-      defaultVisibility = _defaulVisiblity(token);
-
-    } else if (paramAnnotation instanceof Inject) {
-      token = paramAnnotation.token;
-
-    } else if (paramAnnotation instanceof Optional) {
-      optional = true;
-
-    } else if (paramAnnotation instanceof Visibility) {
-      visibility = paramAnnotation;
-
-    } else if (paramAnnotation instanceof DependencyAnnotation) {
-      if (isPresent(paramAnnotation.token)) {
-        token = paramAnnotation.token;
-      }
-      depProps.push(paramAnnotation);
-    }
-  }
-
-  if (isBlank(visibility)) {
-    visibility = defaultVisibility;
-  }
-
-  token = resolveForwardRef(token);
-
-  if (isPresent(token)) {
-    return _createDependency(token, optional, visibility, depProps);
-  } else {
-    throw new NoAnnotationError(typeOrFunc, params);
-  }
-}
-
-function _defaulVisiblity(typeOrFunc) {
-  try {
-    if (!(typeOrFunc instanceof Type)) return unbounded;
-    var f = ListWrapper.filter(reflector.annotations(typeOrFunc), s => s instanceof Injectable);
-    return f.length === 0 ? unbounded : f[0].visibility;
-  } catch (e) {
-    return unbounded;
-  }
-}
-
-function _createDependency(token, optional, visibility, depProps): Dependency {
-  return new Dependency(Key.get(token), optional, visibility, depProps);
-}
diff --git a/modules/angular2/src/di/decorators.dart b/modules/angular2/src/di/decorators.dart
deleted file mode 100644
index ef271560c2d5..000000000000
--- a/modules/angular2/src/di/decorators.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library angular2.di.decorators;
-
-/* This file is empty because, Dart does not have decorators. */
-
-export 'annotations.dart';
diff --git a/modules/angular2/src/di/decorators.ts b/modules/angular2/src/di/decorators.ts
deleted file mode 100644
index a15b5029d2ff..000000000000
--- a/modules/angular2/src/di/decorators.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {
-  InjectAnnotation,
-  OptionalAnnotation,
-  InjectableAnnotation,
-  VisibilityAnnotation,
-  SelfAnnotation,
-  ParentAnnotation,
-  AncestorAnnotation,
-  UnboundedAnnotation
-} from './annotations';
-import {makeDecorator, makeParamDecorator} from '../util/decorators';
-
-export var Inject = makeParamDecorator(InjectAnnotation);
-export var Optional = makeParamDecorator(OptionalAnnotation);
-export var Injectable = makeDecorator(InjectableAnnotation);
-export var Visibility = makeParamDecorator(VisibilityAnnotation);
-export var Self = makeParamDecorator(SelfAnnotation);
-export var Parent = makeParamDecorator(ParentAnnotation);
-export var Ancestor = makeParamDecorator(AncestorAnnotation);
-export var Unbounded = makeParamDecorator(UnboundedAnnotation);
\ No newline at end of file
diff --git a/modules/angular2/src/di/exceptions.ts b/modules/angular2/src/di/exceptions.ts
deleted file mode 100644
index acffbbb4fd25..000000000000
--- a/modules/angular2/src/di/exceptions.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-import {ListWrapper, List} from 'angular2/src/facade/collection';
-import {stringify, BaseException, isBlank} from 'angular2/src/facade/lang';
-
-function findFirstClosedCycle(keys: List<any>): List<any> {
-  var res = [];
-  for (var i = 0; i < keys.length; ++i) {
-    if (ListWrapper.contains(res, keys[i])) {
-      res.push(keys[i]);
-      return res;
-    } else {
-      res.push(keys[i]);
-    }
-  }
-  return res;
-}
-
-function constructResolvingPath(keys: List<any>): string {
-  if (keys.length > 1) {
-    var reversed = findFirstClosedCycle(ListWrapper.reversed(keys));
-    var tokenStrs = ListWrapper.map(reversed, (k) => stringify(k.token));
-    return " (" + tokenStrs.join(' -> ') + ")";
-  } else {
-    return "";
-  }
-}
-
-
-/**
- * Base class for all errors arising from misconfigured bindings.
- *
- * @exportedAs angular2/di_errors
- */
-export class AbstractBindingError extends BaseException {
-  name: string;
-  message: string;
-  keys: List<any>;
-  constructResolvingMessage: Function;
-  // TODO(tbosch): Can't do key:Key as this results in a circular dependency!
-  constructor(key, constructResolvingMessage: Function, originalException?, originalStack?) {
-    super(null, originalException, originalStack);
-    this.keys = [key];
-    this.constructResolvingMessage = constructResolvingMessage;
-    this.message = this.constructResolvingMessage(this.keys);
-  }
-
-  // TODO(tbosch): Can't do key:Key as this results in a circular dependency!
-  addKey(key): void {
-    this.keys.push(key);
-    this.message = this.constructResolvingMessage(this.keys);
-  }
-
-  toString(): string { return this.message; }
-}
-
-/**
- * Thrown when trying to retrieve a dependency by `Key` from {@link Injector}, but the
- * {@link Injector} does not have a {@link Binding} for {@link Key}.
- *
- * @exportedAs angular2/di_errors
- */
-export class NoBindingError extends AbstractBindingError {
-  // TODO(tbosch): Can't do key:Key as this results in a circular dependency!
-  constructor(key) {
-    super(key, function(keys: List<any>) {
-      var first = stringify(ListWrapper.first(keys).token);
-      return `No provider for ${first}!${constructResolvingPath(keys)}`;
-    });
-  }
-}
-
-/**
- * Thrown when trying to retrieve an async {@link Binding} using the sync API.
- *
- * ## Example
- *
- * ```javascript
- * var injector = Injector.resolveAndCreate([
- *   bind(Number).toAsyncFactory(() => {
- *     return new Promise((resolve) => resolve(1 + 2));
- *   }),
- *   bind(String).toFactory((v) => { return "Value: " + v; }, [String])
- * ]);
- *
- * injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
- * expect(() => {
- *   injector.get(String);
- * }).toThrowError(AsycBindingError);
- * ```
- *
- * The above example throws because `String` depends on `Number` which is async. If any binding in
- * the dependency graph is async then the graph can only be retrieved using the `asyncGet` API.
- *
- * @exportedAs angular2/di_errors
- */
-export class AsyncBindingError extends AbstractBindingError {
-  // TODO(tbosch): Can't do key:Key as this results in a circular dependency!
-  constructor(key) {
-    super(key, function(keys: List<any>) {
-      var first = stringify(ListWrapper.first(keys).token);
-      return `Cannot instantiate ${first} synchronously. It is provided as a promise!${constructResolvingPath(keys)}`;
-    });
-  }
-}
-
-/**
- * Thrown when dependencies form a cycle.
- *
- * ## Example:
- *
- * ```javascript
- * class A {
- *   constructor(b:B) {}
- * }
- * class B {
- *   constructor(a:A) {}
- * }
- * ```
- *
- * Retrieving `A` or `B` throws a `CyclicDependencyError` as the graph above cannot be constructed.
- *
- * @exportedAs angular2/di_errors
- */
-export class CyclicDependencyError extends AbstractBindingError {
-  // TODO(tbosch): Can't do key:Key as this results in a circular dependency!
-  constructor(key) {
-    super(key, function(keys: List<any>) {
-      return `Cannot instantiate cyclic dependency!${constructResolvingPath(keys)}`;
-    });
-  }
-}
-
-/**
- * Thrown when a constructing type returns with an Error.
- *
- * The `InstantiationError` class contains the original error plus the dependency graph which caused
- * this object to be instantiated.
- *
- * @exportedAs angular2/di_errors
- */
-export class InstantiationError extends AbstractBindingError {
-  causeKey;
-
-  // TODO(tbosch): Can't do key:Key as this results in a circular dependency!
-  constructor(originalException, originalStack, key) {
-    super(key, function(keys: List<any>) {
-      var first = stringify(ListWrapper.first(keys).token);
-      return `Error during instantiation of ${first}!${constructResolvingPath(keys)}.` +
-             ` ORIGINAL ERROR: ${originalException}` +
-             `\n\n ORIGINAL STACK: ${originalStack}`;
-    }, originalException, originalStack);
-
-    this.causeKey = key;
-  }
-}
-
-/**
- * Thrown when an object other then {@link Binding} (or `Type`) is passed to {@link Injector}
- * creation.
- *
- * @exportedAs angular2/di_errors
- */
-export class InvalidBindingError extends BaseException {
-  message: string;
-  constructor(binding) {
-    super();
-    this.message = "Invalid binding - only instances of Binding and Type are allowed, got: " +
-                   binding.toString();
-  }
-
-  toString(): string { return this.message; }
-}
-
-/**
- * Thrown when the class has no annotation information.
- *
- * Lack of annotation information prevents the {@link Injector} from determining which dependencies
- * need to be injected into the constructor.
- *
- * @exportedAs angular2/di_errors
- */
-export class NoAnnotationError extends BaseException {
-  name: string;
-  message: string;
-  constructor(typeOrFunc, params: List<List<any>>) {
-    super();
-    var signature = [];
-    for (var i = 0, ii = params.length; i < ii; i++) {
-      var parameter = params[i];
-      if (isBlank(parameter) || parameter.length == 0) {
-        signature.push('?');
-      } else {
-        signature.push(ListWrapper.map(parameter, stringify).join(' '));
-      }
-    }
-    this.message = "Cannot resolve all parameters for " + stringify(typeOrFunc) + "(" +
-                   signature.join(', ') + "). " +
-                   'Make sure they all have valid type or annotations.';
-  }
-
-  toString(): string { return this.message; }
-}
-
-/**
- * Thrown when getting an object by index.
- *
- * @exportedAs angular2/di_errors
- */
-export class OutOfBoundsError extends BaseException {
-  message: string;
-  constructor(index) {
-    super();
-    this.message = `Index ${index} is out-of-bounds.`;
-  }
-
-  toString(): string { return this.message; }
-}
diff --git a/modules/angular2/src/di/forward_ref.dart b/modules/angular2/src/di/forward_ref.dart
deleted file mode 100644
index bfdee9d9ba09..000000000000
--- a/modules/angular2/src/di/forward_ref.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-library angular2.di.forward_ref;
-
-typedef dynamic ForwardRefFn();
-
-/**
- * Dart does not have the forward ref problem, so this function is a noop.
- */
-forwardRef(ForwardRefFn forwardRefFn) => forwardRefFn();
-
-/**
- * Lazily retrieve the reference value.
- *
- * See: {@link forwardRef}
- *
- * @exportedAs angular2/di
- */
-resolveForwardRef(type) => type;
diff --git a/modules/angular2/src/di/forward_ref.ts b/modules/angular2/src/di/forward_ref.ts
deleted file mode 100644
index c3083f1b2dd4..000000000000
--- a/modules/angular2/src/di/forward_ref.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {Type, stringify, isFunction} from 'angular2/src/facade/lang';
-
-export interface ForwardRefFn { (): any; }
-
-/**
- * Allows to refer to references which are not yet defined.
- *
- * This situation arises when the key which we need te refer to for the purposes of DI is declared,
- * but not yet defined.
- *
- * ## Example:
- *
- * ```
- * class Door {
- *   // Incorrect way to refer to a reference which is defined later.
- *   // This fails because `Lock` is undefined at this point.
- *   constructor(lock:Lock) { }
- *
- *   // Correct way to refer to a reference which is defined later.
- *   // The reference needs to be captured in a closure.
- *   constructor(@Inject(forwardRef(() => Lock)) lock:Lock) { }
- * }
- *
- * // Only at this point the lock is defined.
- * class Lock {
- * }
- * ```
- *
- * @exportedAs angular2/di
- */
-export function forwardRef(forwardRefFn: ForwardRefFn): Type {
-  (<any>forwardRefFn).__forward_ref__ = forwardRef;
-  (<any>forwardRefFn).toString = function() { return stringify(this()); };
-  return (<Type><any>forwardRefFn);
-}
-
-/**
- * Lazily retrieve the reference value.
- *
- * See: {@link forwardRef}
- *
- * @exportedAs angular2/di
- */
-export function resolveForwardRef(type: any): any {
-  if (isFunction(type) && type.hasOwnProperty('__forward_ref__') &&
-      type.__forward_ref__ === forwardRef) {
-    return (<ForwardRefFn>type)();
-  } else {
-    return type;
-  }
-}
diff --git a/modules/angular2/src/di/injector.ts b/modules/angular2/src/di/injector.ts
deleted file mode 100644
index b20417278bff..000000000000
--- a/modules/angular2/src/di/injector.ts
+++ /dev/null
@@ -1,791 +0,0 @@
-/// <reference path="../../typings/es6-promise/es6-promise.d.ts" />
-
-import {Map, List, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {ResolvedBinding, Binding, Dependency, BindingBuilder, bind} from './binding';
-import {
-  AbstractBindingError,
-  NoBindingError,
-  AsyncBindingError,
-  CyclicDependencyError,
-  InstantiationError,
-  InvalidBindingError,
-  OutOfBoundsError
-} from './exceptions';
-import {FunctionWrapper, Type, isPresent, isBlank, CONST_EXPR} from 'angular2/src/facade/lang';
-import {Key} from './key';
-import {resolveForwardRef} from './forward_ref';
-import {Visibility, unbounded} from './annotations_impl';
-
-const _constructing = CONST_EXPR(new Object());
-const _notFound = CONST_EXPR(new Object());
-
-// Threshold for the dynamic version
-const _MAX_CONSTRUCTION_COUNTER = 10;
-
-export const undefinedValue = CONST_EXPR(new Object());
-
-export const PUBLIC = 1;
-export const PRIVATE = 2;
-export const PUBLIC_AND_PRIVATE = 3;
-
-export interface ProtoInjectorStrategy {
-  getBindingAtIndex(index: number): ResolvedBinding;
-  createInjectorStrategy(inj: Injector): InjectorStrategy;
-}
-
-export class ProtoInjectorInlineStrategy implements ProtoInjectorStrategy {
-  binding0: ResolvedBinding = null;
-  binding1: ResolvedBinding = null;
-  binding2: ResolvedBinding = null;
-  binding3: ResolvedBinding = null;
-  binding4: ResolvedBinding = null;
-  binding5: ResolvedBinding = null;
-  binding6: ResolvedBinding = null;
-  binding7: ResolvedBinding = null;
-  binding8: ResolvedBinding = null;
-  binding9: ResolvedBinding = null;
-
-  keyId0: number = null;
-  keyId1: number = null;
-  keyId2: number = null;
-  keyId3: number = null;
-  keyId4: number = null;
-  keyId5: number = null;
-  keyId6: number = null;
-  keyId7: number = null;
-  keyId8: number = null;
-  keyId9: number = null;
-
-  visibility0: number = null;
-  visibility1: number = null;
-  visibility2: number = null;
-  visibility3: number = null;
-  visibility4: number = null;
-  visibility5: number = null;
-  visibility6: number = null;
-  visibility7: number = null;
-  visibility8: number = null;
-  visibility9: number = null;
-
-  constructor(protoEI: ProtoInjector, bwv: BindingWithVisibility[]) {
-    var length = bwv.length;
-
-    if (length > 0) {
-      this.binding0 = bwv[0].binding;
-      this.keyId0 = bwv[0].getKeyId();
-      this.visibility0 = bwv[0].visibility;
-    }
-    if (length > 1) {
-      this.binding1 = bwv[1].binding;
-      this.keyId1 = bwv[1].getKeyId();
-      this.visibility1 = bwv[1].visibility;
-    }
-    if (length > 2) {
-      this.binding2 = bwv[2].binding;
-      this.keyId2 = bwv[2].getKeyId();
-      this.visibility2 = bwv[2].visibility;
-    }
-    if (length > 3) {
-      this.binding3 = bwv[3].binding;
-      this.keyId3 = bwv[3].getKeyId();
-      this.visibility3 = bwv[3].visibility;
-    }
-    if (length > 4) {
-      this.binding4 = bwv[4].binding;
-      this.keyId4 = bwv[4].getKeyId();
-      this.visibility4 = bwv[4].visibility;
-    }
-    if (length > 5) {
-      this.binding5 = bwv[5].binding;
-      this.keyId5 = bwv[5].getKeyId();
-      this.visibility5 = bwv[5].visibility;
-    }
-    if (length > 6) {
-      this.binding6 = bwv[6].binding;
-      this.keyId6 = bwv[6].getKeyId();
-      this.visibility6 = bwv[6].visibility;
-    }
-    if (length > 7) {
-      this.binding7 = bwv[7].binding;
-      this.keyId7 = bwv[7].getKeyId();
-      this.visibility7 = bwv[7].visibility;
-    }
-    if (length > 8) {
-      this.binding8 = bwv[8].binding;
-      this.keyId8 = bwv[8].getKeyId();
-      this.visibility8 = bwv[8].visibility;
-    }
-    if (length > 9) {
-      this.binding9 = bwv[9].binding;
-      this.keyId9 = bwv[9].getKeyId();
-      this.visibility9 = bwv[9].visibility;
-    }
-  }
-
-  getBindingAtIndex(index: number): any {
-    if (index == 0) return this.binding0;
-    if (index == 1) return this.binding1;
-    if (index == 2) return this.binding2;
-    if (index == 3) return this.binding3;
-    if (index == 4) return this.binding4;
-    if (index == 5) return this.binding5;
-    if (index == 6) return this.binding6;
-    if (index == 7) return this.binding7;
-    if (index == 8) return this.binding8;
-    if (index == 9) return this.binding9;
-    throw new OutOfBoundsError(index);
-  }
-
-  createInjectorStrategy(injector: Injector): InjectorStrategy {
-    return new InjectorInlineStrategy(injector, this);
-  }
-}
-
-export class ProtoInjectorDynamicStrategy implements ProtoInjectorStrategy {
-  bindings: ResolvedBinding[];
-  keyIds: number[];
-  visibilities: number[];
-
-  constructor(protoInj: ProtoInjector, bwv: BindingWithVisibility[]) {
-    var len = bwv.length;
-
-    this.bindings = ListWrapper.createFixedSize(len);
-    this.keyIds = ListWrapper.createFixedSize(len);
-    this.visibilities = ListWrapper.createFixedSize(len);
-
-    for (var i = 0; i < len; i++) {
-      this.bindings[i] = bwv[i].binding;
-      this.keyIds[i] = bwv[i].getKeyId();
-      this.visibilities[i] = bwv[i].visibility;
-    }
-  }
-
-  getBindingAtIndex(index: number): any {
-    if (index < 0 || index >= this.bindings.length) {
-      throw new OutOfBoundsError(index);
-    }
-    return this.bindings[index];
-  }
-
-  createInjectorStrategy(ei: Injector): InjectorStrategy {
-    return new InjectorDynamicStrategy(this, ei);
-  }
-}
-
-export class ProtoInjector {
-  _strategy: ProtoInjectorStrategy;
-
-  constructor(bwv: BindingWithVisibility[], public distanceToParent: number) {
-    this._strategy = bwv.length > _MAX_CONSTRUCTION_COUNTER ?
-                         new ProtoInjectorDynamicStrategy(this, bwv) :
-                         new ProtoInjectorInlineStrategy(this, bwv);
-  }
-
-  getBindingAtIndex(index: number): any { return this._strategy.getBindingAtIndex(index); }
-}
-
-
-
-export interface InjectorStrategy {
-  getObjByKeyId(keyId: number, visibility: number): any;
-  getObjAtIndex(index: number): any;
-  getMaxNumberOfObjects(): number;
-
-  attach(parent: Injector, isBoundary: boolean): void;
-  hydrate(): void;
-  dehydrate(): void;
-}
-
-export class InjectorInlineStrategy implements InjectorStrategy {
-  obj0: any = undefinedValue;
-  obj1: any = undefinedValue;
-  obj2: any = undefinedValue;
-  obj3: any = undefinedValue;
-  obj4: any = undefinedValue;
-  obj5: any = undefinedValue;
-  obj6: any = undefinedValue;
-  obj7: any = undefinedValue;
-  obj8: any = undefinedValue;
-  obj9: any = undefinedValue;
-
-  constructor(public injector: Injector, public protoStrategy: ProtoInjectorInlineStrategy) {}
-
-  hydrate(): void {
-    var p = this.protoStrategy;
-    var inj = this.injector;
-
-    inj._constructionCounter = 0;
-
-
-    if (isPresent(p.keyId0) && this.obj0 === undefinedValue)
-      this.obj0 = inj._new(p.binding0, p.visibility0);
-    if (isPresent(p.keyId1) && this.obj1 === undefinedValue)
-      this.obj1 = inj._new(p.binding1, p.visibility1);
-    if (isPresent(p.keyId2) && this.obj2 === undefinedValue)
-      this.obj2 = inj._new(p.binding2, p.visibility2);
-    if (isPresent(p.keyId3) && this.obj3 === undefinedValue)
-      this.obj3 = inj._new(p.binding3, p.visibility3);
-    if (isPresent(p.keyId4) && this.obj4 === undefinedValue)
-      this.obj4 = inj._new(p.binding4, p.visibility4);
-    if (isPresent(p.keyId5) && this.obj5 === undefinedValue)
-      this.obj5 = inj._new(p.binding5, p.visibility5);
-    if (isPresent(p.keyId6) && this.obj6 === undefinedValue)
-      this.obj6 = inj._new(p.binding6, p.visibility6);
-    if (isPresent(p.keyId7) && this.obj7 === undefinedValue)
-      this.obj7 = inj._new(p.binding7, p.visibility7);
-    if (isPresent(p.keyId8) && this.obj8 === undefinedValue)
-      this.obj8 = inj._new(p.binding8, p.visibility8);
-    if (isPresent(p.keyId9) && this.obj9 === undefinedValue)
-      this.obj9 = inj._new(p.binding9, p.visibility9);
-  }
-
-  attach(parent: Injector, isBoundary: boolean): void {
-    var inj = this.injector;
-    inj._parent = parent;
-    inj._isBoundary = isBoundary;
-  }
-
-  dehydrate() {
-    this.obj0 = undefinedValue;
-    this.obj1 = undefinedValue;
-    this.obj2 = undefinedValue;
-    this.obj3 = undefinedValue;
-    this.obj4 = undefinedValue;
-    this.obj5 = undefinedValue;
-    this.obj6 = undefinedValue;
-    this.obj7 = undefinedValue;
-    this.obj8 = undefinedValue;
-    this.obj9 = undefinedValue;
-  }
-
-  getObjByKeyId(keyId: number, visibility: number): any {
-    var p = this.protoStrategy;
-    var inj = this.injector;
-
-    if (p.keyId0 === keyId && (p.visibility0 & visibility) > 0) {
-      if (this.obj0 === undefinedValue) {
-        this.obj0 = inj._new(p.binding0, p.visibility0);
-      }
-      return this.obj0;
-    }
-    if (p.keyId1 === keyId && (p.visibility1 & visibility) > 0) {
-      if (this.obj1 === undefinedValue) {
-        this.obj1 = inj._new(p.binding1, p.visibility1);
-      }
-      return this.obj1;
-    }
-    if (p.keyId2 === keyId && (p.visibility2 & visibility) > 0) {
-      if (this.obj2 === undefinedValue) {
-        this.obj2 = inj._new(p.binding2, p.visibility2);
-      }
-      return this.obj2;
-    }
-    if (p.keyId3 === keyId && (p.visibility3 & visibility) > 0) {
-      if (this.obj3 === undefinedValue) {
-        this.obj3 = inj._new(p.binding3, p.visibility3);
-      }
-      return this.obj3;
-    }
-    if (p.keyId4 === keyId && (p.visibility4 & visibility) > 0) {
-      if (this.obj4 === undefinedValue) {
-        this.obj4 = inj._new(p.binding4, p.visibility4);
-      }
-      return this.obj4;
-    }
-    if (p.keyId5 === keyId && (p.visibility5 & visibility) > 0) {
-      if (this.obj5 === undefinedValue) {
-        this.obj5 = inj._new(p.binding5, p.visibility5);
-      }
-      return this.obj5;
-    }
-    if (p.keyId6 === keyId && (p.visibility6 & visibility) > 0) {
-      if (this.obj6 === undefinedValue) {
-        this.obj6 = inj._new(p.binding6, p.visibility6);
-      }
-      return this.obj6;
-    }
-    if (p.keyId7 === keyId && (p.visibility7 & visibility) > 0) {
-      if (this.obj7 === undefinedValue) {
-        this.obj7 = inj._new(p.binding7, p.visibility7);
-      }
-      return this.obj7;
-    }
-    if (p.keyId8 === keyId && (p.visibility8 & visibility) > 0) {
-      if (this.obj8 === undefinedValue) {
-        this.obj8 = inj._new(p.binding8, p.visibility8);
-      }
-      return this.obj8;
-    }
-    if (p.keyId9 === keyId && (p.visibility9 & visibility) > 0) {
-      if (this.obj9 === undefinedValue) {
-        this.obj9 = inj._new(p.binding9, p.visibility9);
-      }
-      return this.obj9;
-    }
-
-    return undefinedValue;
-  }
-
-  getObjAtIndex(index: number): any {
-    if (index == 0) return this.obj0;
-    if (index == 1) return this.obj1;
-    if (index == 2) return this.obj2;
-    if (index == 3) return this.obj3;
-    if (index == 4) return this.obj4;
-    if (index == 5) return this.obj5;
-    if (index == 6) return this.obj6;
-    if (index == 7) return this.obj7;
-    if (index == 8) return this.obj8;
-    if (index == 9) return this.obj9;
-    throw new OutOfBoundsError(index);
-  }
-
-  getMaxNumberOfObjects(): number { return _MAX_CONSTRUCTION_COUNTER; }
-}
-
-
-export class InjectorDynamicStrategy implements InjectorStrategy {
-  objs: any[];
-
-  constructor(public protoStrategy: ProtoInjectorDynamicStrategy, public injector: Injector) {
-    this.objs = ListWrapper.createFixedSize(protoStrategy.bindings.length);
-    ListWrapper.fill(this.objs, undefinedValue);
-  }
-
-  hydrate(): void {
-    var p = this.protoStrategy;
-    for (var i = 0; i < p.keyIds.length; i++) {
-      if (isPresent(p.keyIds[i]) && this.objs[i] === undefinedValue) {
-        this.objs[i] = this.injector._new(p.bindings[i], p.visibilities[i]);
-      }
-    }
-  }
-
-  attach(parent: Injector, isBoundary: boolean): void {
-    var inj = this.injector;
-    inj._parent = parent;
-    inj._isBoundary = isBoundary;
-  }
-
-  dehydrate(): void { ListWrapper.fill(this.objs, undefinedValue); }
-
-  getObjByKeyId(keyId: number, visibility: number): any {
-    var p = this.protoStrategy;
-
-    for (var i = 0; i < p.keyIds.length; i++) {
-      if (p.keyIds[i] === keyId && (p.visibilities[i] & visibility) > 0) {
-        if (this.objs[i] === undefinedValue) {
-          this.objs[i] = this.injector._new(p.bindings[i], p.visibilities[i]);
-        }
-
-        return this.objs[i];
-      }
-    }
-
-    return undefinedValue;
-  }
-
-  getObjAtIndex(index: number): any {
-    if (index < 0 || index >= this.objs.length) {
-      throw new OutOfBoundsError(index);
-    }
-
-    return this.objs[index];
-  }
-
-  getMaxNumberOfObjects(): number { return this.objs.length; }
-}
-
-export class BindingWithVisibility {
-  constructor(public binding: ResolvedBinding, public visibility: number){};
-
-  getKeyId(): number { return this.binding.key.id; }
-}
-
-/**
- * A dependency injection container used for resolving dependencies.
- *
- * An `Injector` is a replacement for a `new` operator, which can automatically resolve the
- * constructor dependencies.
- * In typical use, application code asks for the dependencies in the constructor and they are
- * resolved by the `Injector`.
- *
- * ## Example:
- *
- * Suppose that we want to inject an `Engine` into class `Car`, we would define it like this:
- *
- * ```javascript
- * class Engine {
- * }
- *
- * class Car {
- *   constructor(@Inject(Engine) engine) {
- *   }
- * }
- *
- * ```
- *
- * Next we need to write the code that creates and instantiates the `Injector`. We then ask for the
- * `root` object, `Car`, so that the `Injector` can recursively build all of that object's
- *dependencies.
- *
- * ```javascript
- * main() {
- *   var injector = Injector.resolveAndCreate([Car, Engine]);
- *
- *   // Get a reference to the `root` object, which will recursively instantiate the tree.
- *   var car = injector.get(Car);
- * }
- * ```
- * Notice that we don't use the `new` operator because we explicitly want to have the `Injector`
- * resolve all of the object's dependencies automatically.
- *
- * @exportedAs angular2/di
- */
-export class Injector {
-  /**
-   * Turns a list of binding definitions into an internal resolved list of resolved bindings.
-   *
-   * A resolution is a process of flattening multiple nested lists and converting individual
-   * bindings into a list of {@link ResolvedBinding}s. The resolution can be cached by `resolve`
-   * for the {@link Injector} for performance-sensitive code.
-   *
-   * @param `bindings` can be a list of `Type`, {@link Binding}, {@link ResolvedBinding}, or a
-   * recursive list of more bindings.
-   *
-   * The returned list is sparse, indexed by `id` for the {@link Key}. It is generally not useful to
-   *application code
-   * other than for passing it to {@link Injector} functions that require resolved binding lists,
-   *such as
-   * `fromResolvedBindings` and `createChildFromResolved`.
-   */
-  static resolve(bindings: List<Type | Binding | List<any>>): List<ResolvedBinding> {
-    var resolvedBindings = resolveBindings(bindings);
-    var flatten = _flattenBindings(resolvedBindings, new Map());
-    return _createListOfBindings(flatten);
-  }
-
-  /**
-   * Resolves bindings and creates an injector based on those bindings. This function is slower than
-   * the corresponding `fromResolvedBindings` because it needs to resolve bindings first. See
-   *`resolve`
-   * for the {@link Injector}.
-   *
-   * Prefer `fromResolvedBindings` in performance-critical code that creates lots of injectors.
-   *
-   * @param `bindings` can be a list of `Type`, {@link Binding}, {@link ResolvedBinding}, or a
-   *recursive list of more
-   * bindings.
-   */
-  static resolveAndCreate(bindings: List<Type | Binding | List<any>>): Injector {
-    var resolvedBindings = Injector.resolve(bindings);
-    return Injector.fromResolvedBindings(resolvedBindings);
-  }
-
-  /**
-   * Creates an injector from previously resolved bindings. This bypasses resolution and flattening.
-   * This API is the recommended way to construct injectors in performance-sensitive parts.
-   *
-   * @param `bindings` A sparse list of {@link ResolvedBinding}s. See `resolve` for the
-   * {@link Injector}.
-   */
-  static fromResolvedBindings(bindings: List<ResolvedBinding>): Injector {
-    var bd = bindings.map(b => new BindingWithVisibility(b, PUBLIC));
-    var proto = new ProtoInjector(bd, 0);
-    var inj = new Injector(proto);
-    return inj;
-  }
-
-  _strategy: InjectorStrategy;
-  _isBoundary: boolean = false;
-  _constructionCounter: number = 0;
-
-  // TODO vsavkin remove it after DI and EI are merged
-  ei: any;
-
-  constructor(public _proto: ProtoInjector, public _parent: Injector = null) {
-    this._strategy = _proto._strategy.createInjectorStrategy(this);
-  }
-
-  /**
-   * Retrieves an instance from the injector.
-   *
-   * @param `token`: usually the `Type` of an object. (Same as the token used while setting up a
-   *binding).
-   * @returns an instance represented by the token. Throws if not found.
-   */
-  get(token): any { return this._getByKey(Key.get(token), unbounded, false, PUBLIC_AND_PRIVATE); }
-
-  /**
-   * Retrieves an instance from the injector.
-   *
-   * @param `token`: usually a `Type`. (Same as the token used while setting up a binding).
-   * @returns an instance represented by the token. Returns `null` if not found.
-   */
-  getOptional(token): any {
-    return this._getByKey(Key.get(token), unbounded, true, PUBLIC_AND_PRIVATE);
-  }
-
-  /**
-   * Retrieves an instance from the injector.
-   *
-   * @param `index`: index of an instance.
-   * @returns an instance represented by the index. Throws if not found.
-   */
-  getAt(index: number): any { return this._strategy.getObjAtIndex(index); }
-
-  /**
-   * Direct parent of this injector.
-   */
-  get parent(): Injector { return this._parent; }
-
-  /**
-   * Internal. Do not use.
-   *
-   * We return `any` not to export the InjectorStrategy type.
-   */
-  get internalStrategy(): any { return this._strategy; }
-
-  /**
-  * Creates a child injector and loads a new set of bindings into it.
-  *
-  * A resolution is a process of flattening multiple nested lists and converting individual
-  * bindings into a list of {@link ResolvedBinding}s. The resolution can be cached by `resolve`
-  * for the {@link Injector} for performance-sensitive code.
-  *
-  * @param `bindings` can be a list of `Type`, {@link Binding}, {@link ResolvedBinding}, or a
-  * recursive list of more bindings.
-  *
-  */
-  resolveAndCreateChild(bindings: List<Type | Binding | List<any>>): Injector {
-    var resovledBindings = Injector.resolve(bindings);
-    return this.createChildFromResolved(resovledBindings);
-  }
-
-  /**
-   * Creates a child injector and loads a new set of {@link ResolvedBinding}s into it.
-   *
-   * @param `bindings`: A sparse list of {@link ResolvedBinding}s.
-   * See `resolve` for the {@link Injector}.
-   * @returns a new child {@link Injector}.
-   */
-  createChildFromResolved(bindings: List<ResolvedBinding>): Injector {
-    var bd = bindings.map(b => new BindingWithVisibility(b, PUBLIC));
-    var proto = new ProtoInjector(bd, 1);
-    var inj = new Injector(proto);
-    inj._parent = this;
-    return inj;
-  }
-
-  _new(binding: ResolvedBinding, visibility: number): any {
-    if (this._constructionCounter++ > this._strategy.getMaxNumberOfObjects()) {
-      throw new CyclicDependencyError(binding.key);
-    }
-
-    var factory = binding.factory;
-    var deps = binding.dependencies;
-    var length = deps.length;
-
-    var d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16, d17, d18, d19;
-    try {
-      d0 = length > 0 ? this._getByDependency(deps[0], visibility) : null;
-      d1 = length > 1 ? this._getByDependency(deps[1], visibility) : null;
-      d2 = length > 2 ? this._getByDependency(deps[2], visibility) : null;
-      d3 = length > 3 ? this._getByDependency(deps[3], visibility) : null;
-      d4 = length > 4 ? this._getByDependency(deps[4], visibility) : null;
-      d5 = length > 5 ? this._getByDependency(deps[5], visibility) : null;
-      d6 = length > 6 ? this._getByDependency(deps[6], visibility) : null;
-      d7 = length > 7 ? this._getByDependency(deps[7], visibility) : null;
-      d8 = length > 8 ? this._getByDependency(deps[8], visibility) : null;
-      d9 = length > 9 ? this._getByDependency(deps[9], visibility) : null;
-      d10 = length > 10 ? this._getByDependency(deps[10], visibility) : null;
-      d11 = length > 11 ? this._getByDependency(deps[11], visibility) : null;
-      d12 = length > 12 ? this._getByDependency(deps[12], visibility) : null;
-      d13 = length > 13 ? this._getByDependency(deps[13], visibility) : null;
-      d14 = length > 14 ? this._getByDependency(deps[14], visibility) : null;
-      d15 = length > 15 ? this._getByDependency(deps[15], visibility) : null;
-      d16 = length > 16 ? this._getByDependency(deps[16], visibility) : null;
-      d17 = length > 17 ? this._getByDependency(deps[17], visibility) : null;
-      d18 = length > 18 ? this._getByDependency(deps[18], visibility) : null;
-      d19 = length > 19 ? this._getByDependency(deps[19], visibility) : null;
-    } catch (e) {
-      if (e instanceof AbstractBindingError) e.addKey(binding.key);
-      throw e;
-    }
-
-    var obj;
-    try {
-      switch (length) {
-        case 0:
-          obj = factory();
-          break;
-        case 1:
-          obj = factory(d0);
-          break;
-        case 2:
-          obj = factory(d0, d1);
-          break;
-        case 3:
-          obj = factory(d0, d1, d2);
-          break;
-        case 4:
-          obj = factory(d0, d1, d2, d3);
-          break;
-        case 5:
-          obj = factory(d0, d1, d2, d3, d4);
-          break;
-        case 6:
-          obj = factory(d0, d1, d2, d3, d4, d5);
-          break;
-        case 7:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6);
-          break;
-        case 8:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7);
-          break;
-        case 9:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8);
-          break;
-        case 10:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9);
-          break;
-        case 11:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10);
-          break;
-        case 12:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11);
-          break;
-        case 13:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12);
-          break;
-        case 14:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13);
-          break;
-        case 15:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14);
-          break;
-        case 16:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15);
-          break;
-        case 17:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16);
-          break;
-        case 18:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16,
-                        d17);
-          break;
-        case 19:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16,
-                        d17, d18);
-          break;
-        case 20:
-          obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16,
-                        d17, d18, d19);
-          break;
-      }
-    } catch (e) {
-      throw new InstantiationError(e, e.stack, binding.key);
-    }
-    return obj;
-  }
-
-  private _getByDependency(dep: Dependency, bindingVisibility: number): any {
-    var special = isPresent(this.ei) ? this.ei.getDependency(dep) : undefinedValue;
-    if (special !== undefinedValue) {
-      return special;
-    } else {
-      return this._getByKey(dep.key, dep.visibility, dep.optional, bindingVisibility);
-    }
-  }
-
-  private _getByKey(key: Key, depVisibility: Visibility, optional: boolean,
-                    bindingVisibility: number): any {
-    if (key.token === Injector) {
-      return this;
-    }
-
-    var inj = this;
-    var lastInjector = false;
-    var depth = depVisibility.depth;
-
-    if (!depVisibility.includeSelf) {
-      depth -= inj._proto.distanceToParent;
-
-      if (inj._isBoundary) {
-        if (depVisibility.crossBoundaries) {
-          bindingVisibility = PUBLIC_AND_PRIVATE;
-        } else {
-          bindingVisibility = PRIVATE;
-          lastInjector = true;
-        }
-      }
-      inj = inj._parent;
-    }
-
-    while (inj != null && depth >= 0) {
-      var obj = inj._strategy.getObjByKeyId(key.id, bindingVisibility);
-      if (obj !== undefinedValue) return obj;
-
-      depth -= inj._proto.distanceToParent;
-
-      if (lastInjector) break;
-
-      if (inj._isBoundary) {
-        if (depVisibility.crossBoundaries) {
-          bindingVisibility = PUBLIC_AND_PRIVATE;
-        } else {
-          bindingVisibility = PRIVATE;
-          lastInjector = true;
-        }
-      }
-      inj = inj._parent;
-    }
-
-    if (optional) {
-      return null;
-    } else {
-      throw new NoBindingError(key);
-    }
-  }
-}
-
-
-export function resolveBindings(bindings: List<Type | Binding | List<any>>): List<ResolvedBinding> {
-  var resolvedList = ListWrapper.createFixedSize(bindings.length);
-  for (var i = 0; i < bindings.length; i++) {
-    var unresolved = resolveForwardRef(bindings[i]);
-    var resolved;
-    if (unresolved instanceof ResolvedBinding) {
-      resolved = unresolved;  // ha-ha! I'm easily amused
-    } else if (unresolved instanceof Type) {
-      resolved = bind(unresolved).toClass(unresolved).resolve();
-    } else if (unresolved instanceof Binding) {
-      resolved = unresolved.resolve();
-    } else if (unresolved instanceof List) {
-      resolved = resolveBindings(unresolved);
-    } else if (unresolved instanceof BindingBuilder) {
-      throw new InvalidBindingError(unresolved.token);
-    } else {
-      throw new InvalidBindingError(unresolved);
-    }
-    resolvedList[i] = resolved;
-  }
-  return resolvedList;
-}
-
-function _createListOfBindings(
-    flattenedBindings: Map<number, ResolvedBinding>): List<ResolvedBinding> {
-  return MapWrapper.values(flattenedBindings);
-}
-
-function _flattenBindings(bindings: List<ResolvedBinding | List<any>>,
-                          res: Map<number, ResolvedBinding>): Map<number, ResolvedBinding> {
-  ListWrapper.forEach(bindings, function(b) {
-    if (b instanceof ResolvedBinding) {
-      res.set(b.key.id, b);
-    } else if (b instanceof List) {
-      _flattenBindings(b, res);
-    }
-  });
-  return res;
-}
diff --git a/modules/angular2/src/di/key.ts b/modules/angular2/src/di/key.ts
deleted file mode 100644
index 66298e8cd105..000000000000
--- a/modules/angular2/src/di/key.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {MapWrapper} from 'angular2/src/facade/collection';
-import {stringify, CONST, Type, isBlank, BaseException} from 'angular2/src/facade/lang';
-import {TypeLiteral} from './type_literal';
-import {resolveForwardRef} from './forward_ref';
-
-export {TypeLiteral} from './type_literal';
-
-/**
- * A unique object used for retrieving items from the {@link Injector}.
- *
- * Keys have:
- * - a system-wide unique `id`.
- * - a `token`, usually the `Type` of the instance.
- *
- * Keys are used internally by the {@link Injector} because their system-wide unique `id`s allow the
- * injector to index in arrays rather than looking up items in maps.
- *
- * @exportedAs angular2/di
- */
-export class Key {
-  /**
-   * @private
-   */
-  constructor(public token: Object, public id: number) {
-    if (isBlank(token)) {
-      throw new BaseException('Token must be defined!');
-    }
-  }
-
-  get displayName(): string { return stringify(this.token); }
-
-  /**
-   * Retrieves a `Key` for a token.
-   */
-  static get(token): Key { return _globalKeyRegistry.get(resolveForwardRef(token)); }
-
-  /**
-   * @returns the number of keys registered in the system.
-   */
-  static get numberOfKeys(): number { return _globalKeyRegistry.numberOfKeys; }
-}
-
-/**
- * @private
- */
-export class KeyRegistry {
-  private _allKeys: Map<Object, Key> = new Map();
-
-  get(token: Object): Key {
-    if (token instanceof Key) return token;
-
-    // TODO: workaround for https://github.com/Microsoft/TypeScript/issues/3123
-    var theToken = token;
-    if (token instanceof TypeLiteral) {
-      theToken = token.type;
-    }
-    token = theToken;
-
-    if (this._allKeys.has(token)) {
-      return this._allKeys.get(token);
-    }
-
-    var newKey = new Key(token, Key.numberOfKeys);
-    this._allKeys.set(token, newKey);
-    return newKey;
-  }
-
-  get numberOfKeys(): number { return MapWrapper.size(this._allKeys); }
-}
-
-var _globalKeyRegistry = new KeyRegistry();
diff --git a/modules/angular2/src/di/opaque_token.ts b/modules/angular2/src/di/opaque_token.ts
deleted file mode 100644
index 2e0eb15759e6..000000000000
--- a/modules/angular2/src/di/opaque_token.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {CONST} from 'angular2/src/facade/lang';
-
-/**
- *
- *
- * @exportedAs angular2/di
- */
-
-@CONST()
-export class OpaqueToken {
-  _desc: string;
-
-  constructor(desc: string) { this._desc = 'Token(' + desc + ')'; }
-
-  toString(): string { return this._desc; }
-}
diff --git a/modules/angular2/src/di/type_info.dart b/modules/angular2/src/di/type_info.dart
deleted file mode 100644
index 10d02c4a2334..000000000000
--- a/modules/angular2/src/di/type_info.dart
+++ /dev/null
@@ -1,4 +0,0 @@
-library angular2.di.type_info;
-
-// In dart always return empty, as we can get the co
-argsLength(Type type) => 0;
diff --git a/modules/angular2/src/di/type_literal.dart b/modules/angular2/src/di/type_literal.dart
deleted file mode 100644
index b6159c1097af..000000000000
--- a/modules/angular2/src/di/type_literal.dart
+++ /dev/null
@@ -1,26 +0,0 @@
-library angular2.di.type_literal;
-
-/**
- * Use type literals as DI keys corresponding to generic types.
- *
- * Example:
- *
- * ```
- * Injector.resolveAndCreate([
- *   bind(new TypeLiteral<List<int>>()).toValue([1, 2, 3])
- * ]);
- *
- * class Foo {
- *   // Delend on `List<int>` normally.
- *   Foo(List<int> list) { ... }
- * }
- * ```
- *
- * This capability might be added to the language one day. See:
- *
- * https://code.google.com/p/dart/issues/detail?id=11923
- */
-class TypeLiteral<T> {
-  const TypeLiteral();
-  Type get type => T;
-}
diff --git a/modules/angular2/src/di/type_literal.ts b/modules/angular2/src/di/type_literal.ts
deleted file mode 100644
index 3f755c7a4fd0..000000000000
--- a/modules/angular2/src/di/type_literal.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Type literals is a Dart-only feature. This is here only so we can x-compile
- * to multiple languages.
- */
-export class TypeLiteral {
-  get type(): any { throw new Error("Type literals are only supported in Dart"); }
-}
diff --git a/modules/angular2/src/directives/class.ts b/modules/angular2/src/directives/class.ts
deleted file mode 100644
index 57b5242e90d8..000000000000
--- a/modules/angular2/src/directives/class.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {Directive, onCheck} from 'angular2/annotations';
-import {ElementRef} from 'angular2/core';
-import {PipeRegistry} from 'angular2/src/change_detection/pipes/pipe_registry';
-import {Pipe} from 'angular2/src/change_detection/pipes/pipe';
-import {Renderer} from 'angular2/src/render/api';
-import {KeyValueChanges} from 'angular2/src/change_detection/pipes/keyvalue_changes';
-import {IterableChanges} from 'angular2/src/change_detection/pipes/iterable_changes';
-import {isPresent, isString, StringWrapper} from 'angular2/src/facade/lang';
-import {ListWrapper, StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collection';
-
-@Directive({selector: '[class]', lifecycle: [onCheck], properties: ['rawClass: class']})
-export class CSSClass {
-  _pipe: Pipe;
-  _rawClass;
-
-  constructor(private _pipeRegistry: PipeRegistry, private _ngEl: ElementRef,
-              private _renderer: Renderer) {}
-
-  set rawClass(v) {
-    this._cleanupClasses(this._rawClass);
-
-    if (isString(v)) {
-      v = v.split(' ');
-    }
-
-    this._rawClass = v;
-    this._pipe = this._pipeRegistry.get(isListLikeIterable(v) ? 'iterableDiff' : 'keyValDiff', v);
-  }
-
-  onCheck(): void {
-    var diff = this._pipe.transform(this._rawClass, null);
-    if (isPresent(diff) && isPresent(diff.wrapped)) {
-      if (diff.wrapped instanceof IterableChanges) {
-        this._applyArrayChanges(diff.wrapped);
-      } else {
-        this._applyObjectChanges(diff.wrapped);
-      }
-    }
-  }
-
-  private _cleanupClasses(rawClassVal): void {
-    if (isPresent(rawClassVal)) {
-      if (isListLikeIterable(rawClassVal)) {
-        ListWrapper.forEach(rawClassVal, (className) => { this._toggleClass(className, false); });
-      } else {
-        StringMapWrapper.forEach(rawClassVal, (expVal, className) => {
-          if (expVal) this._toggleClass(className, false);
-        });
-      }
-    }
-  }
-
-  private _applyObjectChanges(diff: KeyValueChanges): void {
-    diff.forEachAddedItem((record) => { this._toggleClass(record.key, record.currentValue); });
-    diff.forEachChangedItem((record) => { this._toggleClass(record.key, record.currentValue); });
-    diff.forEachRemovedItem((record) => {
-      if (record.previousValue) {
-        this._toggleClass(record.key, false);
-      }
-    });
-  }
-
-  private _applyArrayChanges(diff: IterableChanges): void {
-    diff.forEachAddedItem((record) => { this._toggleClass(record.item, true); });
-    diff.forEachRemovedItem((record) => { this._toggleClass(record.item, false); });
-  }
-
-  private _toggleClass(className: string, enabled): void {
-    this._renderer.setElementClass(this._ngEl, className, enabled);
-  }
-}
diff --git a/modules/angular2/src/directives/ng_for.ts b/modules/angular2/src/directives/ng_for.ts
deleted file mode 100644
index f97fa7dd00cf..000000000000
--- a/modules/angular2/src/directives/ng_for.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import {Directive} from 'angular2/annotations';
-import {
-  ViewContainerRef,
-  ViewRef,
-  ProtoViewRef,
-  PipeRegistry,
-  onCheck,
-  Pipe
-} from 'angular2/angular2';
-import {isPresent, isBlank} from 'angular2/src/facade/lang';
-
-/**
- * The `NgFor` directive instantiates a template once per item from an iterable. The context for
- * each instantiated template inherits from the outer context with the given loop variable set
- * to the current item from the iterable.
- *
- * It is possible to alias the `index` to a local variable that will be set to the current loop
- * iteration in the template context.
- *
- * When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM:
- *
- * * When an item is added, a new instance of the template is added to the DOM.
- * * When an item is removed, its template instance is removed from the DOM.
- * * When items are reordered, their respective templates are reordered in the DOM.
- *
- * # Example
- *
- * ```
- * <ul>
- *   <li *ng-for="#error of errors; #i = index">
- *     Error {{i}} of {{errors.length}}: {{error.message}}
- *   </li>
- * </ul>
- * ```
- *
- * # Syntax
- *
- * - `<li *ng-for="#item of items; #i = index">...</li>`
- * - `<li template="ng-for #item of items; #i = index">...</li>`
- * - `<template ng-for #item [ng-for-of]="items" #i="index"><li>...</li></template>`
- *
- * @exportedAs angular2/directives
- */
-@Directive({selector: '[ng-for][ng-for-of]', properties: ['ngForOf'], lifecycle: [onCheck]})
-export class NgFor {
-  _ngForOf: any;
-  _pipe: Pipe;
-
-  constructor(private viewContainer: ViewContainerRef, private protoViewRef: ProtoViewRef,
-              private pipes: PipeRegistry) {}
-
-  set ngForOf(value: any) {
-    this._ngForOf = value;
-    this._pipe = this.pipes.get("iterableDiff", value, null, this._pipe);
-  }
-
-  onCheck() {
-    var diff = this._pipe.transform(this._ngForOf, null);
-    if (isPresent(diff)) this._applyChanges(diff.wrapped);
-  }
-
-  private _applyChanges(changes) {
-    if (isBlank(changes)) {
-      this.viewContainer.clear();
-      return;
-    }
-
-    // TODO(rado): check if change detection can produce a change record that is
-    // easier to consume than current.
-    var recordViewTuples = [];
-    changes.forEachRemovedItem((removedRecord) =>
-                                   recordViewTuples.push(new RecordViewTuple(removedRecord, null)));
-
-    changes.forEachMovedItem((movedRecord) =>
-                                 recordViewTuples.push(new RecordViewTuple(movedRecord, null)));
-
-    var insertTuples = NgFor.bulkRemove(recordViewTuples, this.viewContainer);
-
-    changes.forEachAddedItem((addedRecord) =>
-                                 insertTuples.push(new RecordViewTuple(addedRecord, null)));
-
-    NgFor.bulkInsert(insertTuples, this.viewContainer, this.protoViewRef);
-
-    for (var i = 0; i < insertTuples.length; i++) {
-      this._perViewChange(insertTuples[i].view, insertTuples[i].record);
-    }
-  }
-
-  private _perViewChange(view, record) {
-    view.setLocal('\$implicit', record.item);
-    view.setLocal('index', record.currentIndex);
-  }
-
-  static bulkRemove(tuples: List<RecordViewTuple>,
-                    viewContainer: ViewContainerRef): List<RecordViewTuple> {
-    tuples.sort((a, b) => a.record.previousIndex - b.record.previousIndex);
-    var movedTuples = [];
-    for (var i = tuples.length - 1; i >= 0; i--) {
-      var tuple = tuples[i];
-      // separate moved views from removed views.
-      if (isPresent(tuple.record.currentIndex)) {
-        tuple.view = viewContainer.detach(tuple.record.previousIndex);
-        movedTuples.push(tuple);
-      } else {
-        viewContainer.remove(tuple.record.previousIndex);
-      }
-    }
-    return movedTuples;
-  }
-
-  static bulkInsert(tuples: List<RecordViewTuple>, viewContainer: ViewContainerRef,
-                    protoViewRef: ProtoViewRef): List<RecordViewTuple> {
-    tuples.sort((a, b) => a.record.currentIndex - b.record.currentIndex);
-    for (var i = 0; i < tuples.length; i++) {
-      var tuple = tuples[i];
-      if (isPresent(tuple.view)) {
-        viewContainer.insert(tuple.view, tuple.record.currentIndex);
-      } else {
-        tuple.view = viewContainer.create(protoViewRef, tuple.record.currentIndex);
-      }
-    }
-    return tuples;
-  }
-}
-
-class RecordViewTuple {
-  view: ViewRef;
-  record: any;
-  constructor(record, view) {
-    this.record = record;
-    this.view = view;
-  }
-}
diff --git a/modules/angular2/src/directives/ng_if.ts b/modules/angular2/src/directives/ng_if.ts
deleted file mode 100644
index 6f62dad98243..000000000000
--- a/modules/angular2/src/directives/ng_if.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import {Directive} from 'angular2/annotations';
-import {ViewContainerRef, ProtoViewRef} from 'angular2/core';
-import {isBlank} from 'angular2/src/facade/lang';
-
-/**
- * Removes or recreates a portion of the DOM tree based on an {expression}.
- *
- * If the expression assigned to `ng-if` evaluates to a false value then the element
- * is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
- *
- * # Example:
- *
- * ```
- * <div *ng-if="errorCount > 0" class="error">
- *   <!-- Error message displayed when the errorCount property on the current context is greater
- * than 0. -->
- *   {{errorCount}} errors detected
- * </div>
- * ```
- *
- * # Syntax
- *
- * - `<div *ng-if="condition">...</div>`
- * - `<div template="ng-if condition">...</div>`
- * - `<template [ng-if]="condition"><div>...</div></template>`
- *
- * @exportedAs angular2/directives
- */
-@Directive({selector: '[ng-if]', properties: ['ngIf']})
-export class NgIf {
-  viewContainer: ViewContainerRef;
-  protoViewRef: ProtoViewRef;
-  prevCondition: boolean;
-
-  constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
-    this.viewContainer = viewContainer;
-    this.prevCondition = null;
-    this.protoViewRef = protoViewRef;
-  }
-
-  set ngIf(newCondition /* boolean */) {
-    if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
-      this.prevCondition = true;
-      this.viewContainer.create(this.protoViewRef);
-    } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
-      this.prevCondition = false;
-      this.viewContainer.clear();
-    }
-  }
-}
diff --git a/modules/angular2/src/directives/ng_non_bindable.ts b/modules/angular2/src/directives/ng_non_bindable.ts
deleted file mode 100644
index 718f1a3a21c1..000000000000
--- a/modules/angular2/src/directives/ng_non_bindable.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Directive} from 'angular2/annotations';
-
-/**
- * The `NgNonBindable` directive tells Angular not to compile or bind the contents of the current
- * DOM element. This is useful if the element contains what appears to be Angular directives and
- * bindings but which should be ignored by Angular. This could be the case if you have a site that
- * displays snippets of code, for instance.
- *
- * Example:
- *
- * ```
- * <div>Normal: {{1 + 2}}</div> // output "Normal: 3"
- * <div non-bindable>Ignored: {{1 + 2}}</div> // output "Ignored: {{1 + 2}}"
- * ```
- *
- * @exportedAs angular2/directives
- */
-@Directive({selector: '[ng-non-bindable]', compileChildren: false})
-export class NgNonBindable {
-}
diff --git a/modules/angular2/src/directives/ng_style.ts b/modules/angular2/src/directives/ng_style.ts
deleted file mode 100644
index 61be845d5f33..000000000000
--- a/modules/angular2/src/directives/ng_style.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import {Directive, onCheck} from 'angular2/annotations';
-import {ElementRef} from 'angular2/core';
-import {Pipe} from 'angular2/src/change_detection/pipes/pipe';
-import {PipeRegistry} from 'angular2/src/change_detection/pipes/pipe_registry';
-import {KeyValueChanges} from 'angular2/src/change_detection/pipes/keyvalue_changes';
-import {isPresent, print} from 'angular2/src/facade/lang';
-import {Renderer} from 'angular2/src/render/api';
-
-@Directive({selector: '[ng-style]', lifecycle: [onCheck], properties: ['rawStyle: ng-style']})
-export class NgStyle {
-  _pipe: Pipe;
-  _rawStyle;
-
-  constructor(private _pipeRegistry: PipeRegistry, private _ngEl: ElementRef,
-              private _renderer: Renderer) {}
-
-  set rawStyle(v) {
-    this._rawStyle = v;
-    this._pipe = this._pipeRegistry.get('keyValDiff', this._rawStyle);
-  }
-
-  onCheck() {
-    var diff = this._pipe.transform(this._rawStyle, null);
-    if (isPresent(diff) && isPresent(diff.wrapped)) {
-      this._applyChanges(diff.wrapped);
-    }
-  }
-
-  private _applyChanges(diff: KeyValueChanges): void {
-    diff.forEachAddedItem((record) => { this._setStyle(record.key, record.currentValue); });
-    diff.forEachChangedItem((record) => { this._setStyle(record.key, record.currentValue); });
-    diff.forEachRemovedItem((record) => { this._setStyle(record.key, null); });
-  }
-
-  private _setStyle(name: string, val: string): void {
-    this._renderer.setElementStyle(this._ngEl, name, val);
-  }
-}
diff --git a/modules/angular2/src/directives/ng_switch.ts b/modules/angular2/src/directives/ng_switch.ts
deleted file mode 100644
index 0445701b94a7..000000000000
--- a/modules/angular2/src/directives/ng_switch.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import {Directive} from 'angular2/annotations';
-import {Parent} from 'angular2/di';
-import {ViewContainerRef, ProtoViewRef} from 'angular2/core';
-import {isPresent, isBlank, normalizeBlank} from 'angular2/src/facade/lang';
-import {ListWrapper, List, MapWrapper, Map} from 'angular2/src/facade/collection';
-
-export class SwitchView {
-  _viewContainerRef: ViewContainerRef;
-  _protoViewRef: ProtoViewRef;
-
-  constructor(viewContainerRef: ViewContainerRef, protoViewRef: ProtoViewRef) {
-    this._protoViewRef = protoViewRef;
-    this._viewContainerRef = viewContainerRef;
-  }
-
-  create() { this._viewContainerRef.create(this._protoViewRef); }
-
-  destroy() { this._viewContainerRef.clear(); }
-}
-
-/**
- * The `NgSwitch` directive is used to conditionally swap DOM structure on your template based on a
- * scope expression.
- * Elements within `NgSwitch` but without `NgSwitchWhen` or `NgSwitchDefault` directives will be
- * preserved at the location as specified in the template.
- *
- * `NgSwitch` simply chooses nested elements and makes them visible based on which element matches
- * the value obtained from the evaluated expression. In other words, you define a container element
- * (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**),
- * define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per
- * element.
- * The when attribute is used to inform NgSwitch which element to display when the expression is
- * evaluated. If a matching expression is not found via a when attribute then an element with the
- * default attribute is displayed.
- *
- * # Example:
- *
- * ```
- * <ANY [ng-switch]="expression">
- *   <template [ng-switch-when]="whenExpression1">...</template>
- *   <template [ng-switch-when]="whenExpression1">...</template>
- *   <template ng-switch-default>...</template>
- * </ANY>
- * ```
- *
- * @exportedAs angular2/directives
- */
-@Directive({selector: '[ng-switch]', properties: ['ngSwitch']})
-export class NgSwitch {
-  _switchValue: any;
-  _useDefault: boolean;
-  _valueViews: Map<any, List<SwitchView>>;
-  _activeViews: List<SwitchView>;
-
-  constructor() {
-    this._valueViews = new Map();
-    this._activeViews = [];
-    this._useDefault = false;
-  }
-
-  set ngSwitch(value) {
-    // Empty the currently active ViewContainers
-    this._emptyAllActiveViews();
-
-    // Add the ViewContainers matching the value (with a fallback to default)
-    this._useDefault = false;
-    var views = this._valueViews.get(value);
-    if (isBlank(views)) {
-      this._useDefault = true;
-      views = normalizeBlank(this._valueViews.get(_whenDefault));
-    }
-    this._activateViews(views);
-
-    this._switchValue = value;
-  }
-
-  _onWhenValueChanged(oldWhen, newWhen, view: SwitchView): void {
-    this._deregisterView(oldWhen, view);
-    this._registerView(newWhen, view);
-
-    if (oldWhen === this._switchValue) {
-      view.destroy();
-      ListWrapper.remove(this._activeViews, view);
-    } else if (newWhen === this._switchValue) {
-      if (this._useDefault) {
-        this._useDefault = false;
-        this._emptyAllActiveViews();
-      }
-      view.create();
-      this._activeViews.push(view);
-    }
-
-    // Switch to default when there is no more active ViewContainers
-    if (this._activeViews.length === 0 && !this._useDefault) {
-      this._useDefault = true;
-      this._activateViews(this._valueViews.get(_whenDefault));
-    }
-  }
-
-  _emptyAllActiveViews(): void {
-    var activeContainers = this._activeViews;
-    for (var i = 0; i < activeContainers.length; i++) {
-      activeContainers[i].destroy();
-    }
-    this._activeViews = [];
-  }
-
-  _activateViews(views: List<SwitchView>): void {
-    // TODO(vicb): assert(this._activeViews.length === 0);
-    if (isPresent(views)) {
-      for (var i = 0; i < views.length; i++) {
-        views[i].create();
-      }
-      this._activeViews = views;
-    }
-  }
-
-  _registerView(value, view: SwitchView): void {
-    var views = this._valueViews.get(value);
-    if (isBlank(views)) {
-      views = [];
-      this._valueViews.set(value, views);
-    }
-    views.push(view);
-  }
-
-  _deregisterView(value, view: SwitchView): void {
-    // `_whenDefault` is used a marker for non-registered whens
-    if (value == _whenDefault) return;
-    var views = this._valueViews.get(value);
-    if (views.length == 1) {
-      MapWrapper.delete(this._valueViews, value);
-    } else {
-      ListWrapper.remove(views, view);
-    }
-  }
-}
-
-
-/**
- * Defines a case statement as an expression.
- *
- * If multiple `NgSwitchWhen` match the `NgSwitch` value, all of them are displayed.
- *
- * Example:
- *
- * ```
- * // match against a context variable
- * <template [ng-switch-when]="contextVariable">...</template>
- *
- * // match against a constant string
- * <template ng-switch-when="stringValue">...</template>
- * ```
- *
- * @exportedAs angular2/directives
- */
-@Directive({selector: '[ng-switch-when]', properties: ['ngSwitchWhen']})
-export class NgSwitchWhen {
-  _value: any;
-  _switch: NgSwitch;
-  _view: SwitchView;
-
-  constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef,
-              @Parent() sswitch: NgSwitch) {
-    // `_whenDefault` is used as a marker for a not yet initialized value
-    this._value = _whenDefault;
-    this._switch = sswitch;
-    this._view = new SwitchView(viewContainer, protoViewRef);
-  }
-
-  onDestroy() { this._switch }
-
-  set ngSwitchWhen(value) {
-    this._switch._onWhenValueChanged(this._value, value, this._view);
-    this._value = value;
-  }
-}
-
-
-/**
- * Defines a default case statement.
- *
- * Default case statements are displayed when no `NgSwitchWhen` match the `ng-switch` value.
- *
- * Example:
- *
- * ```
- * <template ng-switch-default>...</template>
- * ```
- *
- * @exportedAs angular2/directives
- */
-@Directive({selector: '[ng-switch-default]'})
-export class NgSwitchDefault {
-  constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef,
-              @Parent() sswitch: NgSwitch) {
-    sswitch._registerView(_whenDefault, new SwitchView(viewContainer, protoViewRef));
-  }
-}
-
-var _whenDefault = new Object();
diff --git a/modules/angular2/src/dom/browser_adapter.dart b/modules/angular2/src/dom/browser_adapter.dart
deleted file mode 100644
index 49293a2be30d..000000000000
--- a/modules/angular2/src/dom/browser_adapter.dart
+++ /dev/null
@@ -1,360 +0,0 @@
-library angular.core.facade.dom;
-
-import 'dart:html';
-import 'dom_adapter.dart' show setRootDomAdapter;
-import 'generic_browser_adapter.dart' show GenericBrowserDomAdapter;
-import '../facade/browser.dart';
-import 'dart:js' as js;
-
-// WARNING: Do not expose outside this class. Parsing HTML using this
-// sanitizer is a security risk.
-class _IdentitySanitizer implements NodeTreeSanitizer {
-  void sanitizeTree(Node node) {}
-}
-
-final _identitySanitizer = new _IdentitySanitizer();
-
-final _keyCodeToKeyMap = const {
-  8: 'Backspace',
-  9: 'Tab',
-  12: 'Clear',
-  13: 'Enter',
-  16: 'Shift',
-  17: 'Control',
-  18: 'Alt',
-  19: 'Pause',
-  20: 'CapsLock',
-  27: 'Escape',
-  32: ' ',
-  33: 'PageUp',
-  34: 'PageDown',
-  35: 'End',
-  36: 'Home',
-  37: 'ArrowLeft',
-  38: 'ArrowUp',
-  39: 'ArrowRight',
-  40: 'ArrowDown',
-  45: 'Insert',
-  46: 'Delete',
-  65: 'a',
-  66: 'b',
-  67: 'c',
-  68: 'd',
-  69: 'e',
-  70: 'f',
-  71: 'g',
-  72: 'h',
-  73: 'i',
-  74: 'j',
-  75: 'k',
-  76: 'l',
-  77: 'm',
-  78: 'n',
-  79: 'o',
-  80: 'p',
-  81: 'q',
-  82: 'r',
-  83: 's',
-  84: 't',
-  85: 'u',
-  86: 'v',
-  87: 'w',
-  88: 'x',
-  89: 'y',
-  90: 'z',
-  91: 'OS',
-  93: 'ContextMenu',
-  96: '0',
-  97: '1',
-  98: '2',
-  99: '3',
-  100: '4',
-  101: '5',
-  102: '6',
-  103: '7',
-  104: '8',
-  105: '9',
-  106: '*',
-  107: '+',
-  109: '-',
-  110: '.',
-  111: '/',
-  112: 'F1',
-  113: 'F2',
-  114: 'F3',
-  115: 'F4',
-  116: 'F5',
-  117: 'F6',
-  118: 'F7',
-  119: 'F8',
-  120: 'F9',
-  121: 'F10',
-  122: 'F11',
-  123: 'F12',
-  144: 'NumLock',
-  145: 'ScrollLock'
-};
-
-class BrowserDomAdapter extends GenericBrowserDomAdapter {
-  js.JsFunction _setProperty;
-  js.JsFunction _getProperty;
-  js.JsFunction _hasProperty;
-  BrowserDomAdapter() {
-    _setProperty = js.context.callMethod('eval', ['(function(el, prop, value) { el[prop] = value; })']);
-    _getProperty = js.context.callMethod('eval', ['(function(el, prop) { return el[prop]; })']);
-    _hasProperty = js.context.callMethod('eval', ['(function(el, prop) { return prop in el; })']);
-  }
-  static void makeCurrent() {
-    setRootDomAdapter(new BrowserDomAdapter());
-  }
-  bool hasProperty(Element element, String name) =>
-      _hasProperty.apply([element, name]);
-
-  void setProperty(Element element, String name, Object value) =>
-      _setProperty.apply([element, name, value]);
-
-  getProperty(Element element, String name) =>
-      _getProperty.apply([element, name]);
-
-  invoke(Element element, String methodName, List args) =>
-      this.getProperty(element, methodName).apply(args, thisArg: element);
-
-  // TODO(tbosch): move this into a separate environment class once we have it
-  logError(error) {
-    window.console.error(error);
-  }
-
-  @override
-  Map<String, String> get attrToPropMap => const <String, String>{
-    'innerHtml': 'innerHTML',
-    'readonly': 'readOnly',
-    'tabindex': 'tabIndex',
-  };
-
-  Element query(String selector) => document.querySelector(selector);
-
-  Element querySelector(el, String selector) => el.querySelector(selector);
-
-  ElementList querySelectorAll(el, String selector) =>
-      el.querySelectorAll(selector);
-
-  void on(EventTarget element, String event, callback(arg)) {
-    // due to https://code.google.com/p/dart/issues/detail?id=17406
-    // addEventListener misses zones so we use element.on.
-    element.on[event].listen(callback);
-  }
-  Function onAndCancel(EventTarget element, String event, callback(arg)) {
-    // due to https://code.google.com/p/dart/issues/detail?id=17406
-    // addEventListener misses zones so we use element.on.
-    var subscription = element.on[event].listen(callback);
-    return subscription.cancel;
-  }
-  void dispatchEvent(EventTarget el, Event evt) {
-    el.dispatchEvent(evt);
-  }
-  MouseEvent createMouseEvent(String eventType) =>
-      new MouseEvent(eventType, canBubble: true);
-  Event createEvent(String eventType) => new Event(eventType, canBubble: true);
-  void preventDefault(Event evt) {
-    evt.preventDefault();
-  }
-  String getInnerHTML(Element el) => el.innerHtml;
-  String getOuterHTML(Element el) => el.outerHtml;
-  void setInnerHTML(Element el, String value) {
-    el.innerHtml = value;
-  }
-  String nodeName(Node el) => el.nodeName;
-  String nodeValue(Node el) => el.nodeValue;
-  String type(InputElement el) => el.type;
-  Node content(TemplateElement el) => el.content;
-  Node firstChild(el) => el.firstChild;
-  Node nextSibling(Node el) => el.nextNode;
-  Element parentElement(Node el) => el.parent;
-  List<Node> childNodes(Node el) => el.childNodes;
-  List childNodesAsList(Node el) => childNodes(el).toList();
-  void clearNodes(Node el) {
-    el.nodes = const [];
-  }
-  void appendChild(Node el, Node node) {
-    el.append(node);
-  }
-  void removeChild(el, Node node) {
-    node.remove();
-  }
-  void replaceChild(Node el, Node newNode, Node oldNode) {
-    oldNode.replaceWith(newNode);
-  }
-  ChildNode remove(ChildNode el) {
-    return el..remove();
-  }
-  void insertBefore(Node el, node) {
-    el.parentNode.insertBefore(node, el);
-  }
-  void insertAllBefore(Node el, Iterable<Node> nodes) {
-    el.parentNode.insertAllBefore(nodes, el);
-  }
-  void insertAfter(Node el, Node node) {
-    el.parentNode.insertBefore(node, el.nextNode);
-  }
-  String getText(Node el) => el.text;
-  void setText(Node el, String value) {
-    el.text = value;
-  }
-  String getValue(el) => el.value;
-  void setValue(el, String value) {
-    el.value = value;
-  }
-  bool getChecked(InputElement el) => el.checked;
-  void setChecked(InputElement el, bool isChecked) {
-    el.checked = isChecked;
-  }
-  TemplateElement createTemplate(String html) {
-    var t = new TemplateElement();
-    // We do not sanitize because templates are part of the application code
-    // not user code.
-    t.setInnerHtml(html, treeSanitizer: _identitySanitizer);
-    return t;
-  }
-  Element createElement(String tagName, [HtmlDocument doc = null]) {
-    if (doc == null) doc = document;
-    return doc.createElement(tagName);
-  }
-  Text createTextNode(String text, [HtmlDocument doc = null]) {
-    return new Text(text);
-  }
-  createScriptTag(String attrName, String attrValue,
-      [HtmlDocument doc = null]) {
-    if (doc == null) doc = document;
-    var el = doc.createElement('SCRIPT');
-    el.setAttribute(attrName, attrValue);
-    return el;
-  }
-  StyleElement createStyleElement(String css, [HtmlDocument doc = null]) {
-    if (doc == null) doc = document;
-    var el = doc.createElement('STYLE');
-    el.text = css;
-    return el;
-  }
-  ShadowRoot createShadowRoot(Element el) => el.createShadowRoot();
-  ShadowRoot getShadowRoot(Element el) => el.shadowRoot;
-  Element getHost(Element el) => (el as ShadowRoot).host;
-  clone(Node node) => node.clone(true);
-  List<Node> getElementsByClassName(Element element, String name) =>
-      element.getElementsByClassName(name);
-  List<Node> getElementsByTagName(Element element, String name) =>
-      element.querySelectorAll(name);
-  List<String> classList(Element element) => element.classes.toList();
-  void addClass(Element element, String classname) {
-    element.classes.add(classname);
-  }
-  void removeClass(Element element, String classname) {
-    element.classes.remove(classname);
-  }
-  bool hasClass(Element element, String classname) =>
-      element.classes.contains(classname);
-
-  void setStyle(Element element, String stylename, String stylevalue) {
-    element.style.setProperty(stylename, stylevalue);
-  }
-  void removeStyle(Element element, String stylename) {
-    element.style.removeProperty(stylename);
-  }
-  String getStyle(Element element, String stylename) {
-    return element.style.getPropertyValue(stylename);
-  }
-
-  String tagName(Element element) => element.tagName;
-
-  Map<String, String> attributeMap(Element element) {
-    return new Map.from(element.attributes);
-  }
-
-  bool hasAttribute(Element element, String attribute) =>
-      element.attributes.containsKey(attribute);
-
-  String getAttribute(Element element, String attribute) =>
-      element.getAttribute(attribute);
-
-  void setAttribute(Element element, String name, String value) {
-    element.setAttribute(name, value);
-  }
-
-  void removeAttribute(Element element, String name) {
-    //there is no removeAttribute method as of now in Dart:
-    //https://code.google.com/p/dart/issues/detail?id=19934
-    element.attributes.remove(name);
-  }
-
-  Node templateAwareRoot(Element el) => el is TemplateElement ? el.content : el;
-
-  HtmlDocument createHtmlDocument() =>
-      document.implementation.createHtmlDocument('fakeTitle');
-
-  HtmlDocument defaultDoc() => document;
-  Rectangle getBoundingClientRect(el) => el.getBoundingClientRect();
-  String getTitle() => document.title;
-  void setTitle(String newTitle) {
-    document.title = newTitle;
-  }
-  bool elementMatches(n, String selector) =>
-      n is Element && n.matches(selector);
-  bool isTemplateElement(Element el) => el is TemplateElement;
-  bool isTextNode(Node node) => node.nodeType == Node.TEXT_NODE;
-  bool isCommentNode(Node node) => node.nodeType == Node.COMMENT_NODE;
-  bool isElementNode(Node node) => node.nodeType == Node.ELEMENT_NODE;
-  bool hasShadowRoot(Node node) {
-    return node is Element && node.shadowRoot != null;
-  }
-  bool isShadowRoot(Node node) {
-    return node is ShadowRoot;
-  }
-  Node importIntoDoc(Node node) {
-    return document.importNode(node, true);
-  }
-  bool isPageRule(CssRule rule) => rule is CssPageRule;
-  bool isStyleRule(CssRule rule) => rule is CssStyleRule;
-  bool isMediaRule(CssRule rule) => rule is CssMediaRule;
-  bool isKeyframesRule(CssRule rule) => rule is CssKeyframesRule;
-  String getHref(AnchorElement element) {
-    return element.href;
-  }
-  String getEventKey(KeyboardEvent event) {
-    int keyCode = event.keyCode;
-    return _keyCodeToKeyMap.containsKey(keyCode)
-        ? _keyCodeToKeyMap[keyCode]
-        : 'Unidentified';
-  }
-  getGlobalEventTarget(String target) {
-    if (target == "window") {
-      return window;
-    } else if (target == "document") {
-      return document;
-    } else if (target == "body") {
-      return document.body;
-    }
-  }
-  getHistory() {
-    return window.history;
-  }
-  getLocation() {
-    return window.location;
-  }
-  getBaseHref() {
-    var uri = document.baseUri;
-    var baseUri = Uri.parse(uri);
-    return baseUri.path;
-  }
-  String getUserAgent() {
-    return window.navigator.userAgent;
-  }
-  void setData(Element element, String name, String value) {
-    element.dataset[name] = value;
-  }
-  String getData(Element element, String name) {
-    return element.dataset[name];
-  }
-  // TODO(tbosch): move this into a separate environment class once we have it
-  setGlobalVar(String name, value) {
-    js.context[name] = value;
-  }
-}
diff --git a/modules/angular2/src/dom/browser_adapter.ts b/modules/angular2/src/dom/browser_adapter.ts
deleted file mode 100644
index e7ee492ffb1d..000000000000
--- a/modules/angular2/src/dom/browser_adapter.ts
+++ /dev/null
@@ -1,284 +0,0 @@
-import {List, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {isBlank, isPresent, global} from 'angular2/src/facade/lang';
-import {setRootDomAdapter} from './dom_adapter';
-import {GenericBrowserDomAdapter} from './generic_browser_adapter';
-
-var _attrToPropMap = {'innerHtml': 'innerHTML', 'readonly': 'readOnly', 'tabindex': 'tabIndex'};
-
-const DOM_KEY_LOCATION_NUMPAD = 3;
-
-// Map to convert some key or keyIdentifier values to what will be returned by getEventKey
-var _keyMap = {
-  // The following values are here for cross-browser compatibility and to match the W3C standard
-  // cf http://www.w3.org/TR/DOM-Level-3-Events-key/
-  '\b': 'Backspace',
-  '\t': 'Tab',
-  '\x7F': 'Delete',
-  '\x1B': 'Escape',
-  'Del': 'Delete',
-  'Esc': 'Escape',
-  'Left': 'ArrowLeft',
-  'Right': 'ArrowRight',
-  'Up': 'ArrowUp',
-  'Down': 'ArrowDown',
-  'Menu': 'ContextMenu',
-  'Scroll': 'ScrollLock',
-  'Win': 'OS'
-};
-
-// There is a bug in Chrome for numeric keypad keys:
-// https://code.google.com/p/chromium/issues/detail?id=155654
-// 1, 2, 3 ... are reported as A, B, C ...
-var _chromeNumKeyPadMap = {
-  'A': '1',
-  'B': '2',
-  'C': '3',
-  'D': '4',
-  'E': '5',
-  'F': '6',
-  'G': '7',
-  'H': '8',
-  'I': '9',
-  'J': '*',
-  'K': '+',
-  'M': '-',
-  'N': '.',
-  'O': '/',
-  '\x60': '0',
-  '\x90': 'NumLock'
-};
-
-export class BrowserDomAdapter extends GenericBrowserDomAdapter {
-  static makeCurrent() { setRootDomAdapter(new BrowserDomAdapter()); }
-  hasProperty(element, name: string): boolean { return name in element; }
-  setProperty(el: /*element*/ any, name: string, value: any) { el[name] = value; }
-  getProperty(el: /*element*/ any, name: string): any { return el[name]; }
-  invoke(el: /*element*/ any, methodName: string, args: List<any>): any {
-    el[methodName].apply(el, args);
-  }
-
-  // TODO(tbosch): move this into a separate environment class once we have it
-  logError(error) { window.console.error(error); }
-
-  get attrToPropMap(): any { return _attrToPropMap; }
-
-  query(selector: string): any { return document.querySelector(selector); }
-  querySelector(el, selector: string): Node { return el.querySelector(selector); }
-  querySelectorAll(el, selector: string): List<any> { return el.querySelectorAll(selector); }
-  on(el, evt, listener) { el.addEventListener(evt, listener, false); }
-  onAndCancel(el, evt, listener): Function {
-    el.addEventListener(evt, listener, false);
-    // Needed to follow Dart's subscription semantic, until fix of
-    // https://code.google.com/p/dart/issues/detail?id=17406
-    return () => { el.removeEventListener(evt, listener, false); };
-  }
-  dispatchEvent(el, evt) { el.dispatchEvent(evt); }
-  createMouseEvent(eventType: string): MouseEvent {
-    var evt: MouseEvent = document.createEvent('MouseEvent');
-    evt.initEvent(eventType, true, true);
-    return evt;
-  }
-  createEvent(eventType): Event {
-    var evt: Event = document.createEvent('Event');
-    evt.initEvent(eventType, true, true);
-    return evt;
-  }
-  preventDefault(evt: Event) {
-    evt.preventDefault();
-    evt.returnValue = false;
-  }
-  getInnerHTML(el): string { return el.innerHTML; }
-  getOuterHTML(el): string { return el.outerHTML; }
-  nodeName(node: Node): string { return node.nodeName; }
-  nodeValue(node: Node): string { return node.nodeValue; }
-  type(node: HTMLInputElement): string { return node.type; }
-  content(node: Node): Node {
-    if (this.hasProperty(node, "content")) {
-      return (<any>node).content;
-    } else {
-      return node;
-    }
-  }
-  firstChild(el): Node { return el.firstChild; }
-  nextSibling(el): Node { return el.nextSibling; }
-  parentElement(el): Node { return el.parentElement; }
-  childNodes(el): List<Node> { return el.childNodes; }
-  childNodesAsList(el): List<any> {
-    var childNodes = el.childNodes;
-    var res = ListWrapper.createFixedSize(childNodes.length);
-    for (var i = 0; i < childNodes.length; i++) {
-      res[i] = childNodes[i];
-    }
-    return res;
-  }
-  clearNodes(el) {
-    for (var i = 0; i < el.childNodes.length; i++) {
-      this.remove(el.childNodes[i]);
-    }
-  }
-  appendChild(el, node) { el.appendChild(node); }
-  removeChild(el, node) { el.removeChild(node); }
-  replaceChild(el: Node, newChild, oldChild) { el.replaceChild(newChild, oldChild); }
-  remove(el): Node {
-    var parent = el.parentNode;
-    parent.removeChild(el);
-    return el;
-  }
-  insertBefore(el, node) { el.parentNode.insertBefore(node, el); }
-  insertAllBefore(el, nodes) {
-    ListWrapper.forEach(nodes, (n) => { el.parentNode.insertBefore(n, el); });
-  }
-  insertAfter(el, node) { el.parentNode.insertBefore(node, el.nextSibling); }
-  setInnerHTML(el, value) { el.innerHTML = value; }
-  getText(el): string { return el.textContent; }
-  // TODO(vicb): removed Element type because it does not support StyleElement
-  setText(el, value: string) { el.textContent = value; }
-  getValue(el): string { return el.value; }
-  setValue(el, value: string) { el.value = value; }
-  getChecked(el): boolean { return el.checked; }
-  setChecked(el, value: boolean) { el.checked = value; }
-  createTemplate(html): HTMLElement {
-    var t = document.createElement('template');
-    t.innerHTML = html;
-    return t;
-  }
-  createElement(tagName, doc = document): HTMLElement { return doc.createElement(tagName); }
-  createTextNode(text: string, doc = document): Text { return doc.createTextNode(text); }
-  createScriptTag(attrName: string, attrValue: string, doc = document): HTMLScriptElement {
-    var el = <HTMLScriptElement>doc.createElement('SCRIPT');
-    el.setAttribute(attrName, attrValue);
-    return el;
-  }
-  createStyleElement(css: string, doc = document): HTMLStyleElement {
-    var style = <HTMLStyleElement>doc.createElement('style');
-    this.appendChild(style, this.createTextNode(css));
-    return style;
-  }
-  createShadowRoot(el: HTMLElement): DocumentFragment { return (<any>el).createShadowRoot(); }
-  getShadowRoot(el: HTMLElement): DocumentFragment { return (<any>el).shadowRoot; }
-  getHost(el: HTMLElement): HTMLElement { return (<any>el).host; }
-  clone(node: Node): Node { return node.cloneNode(true); }
-  getElementsByClassName(element, name: string): List<HTMLElement> {
-    return element.getElementsByClassName(name);
-  }
-  getElementsByTagName(element, name: string): List<HTMLElement> {
-    return element.getElementsByTagName(name);
-  }
-  classList(element): List<any> {
-    return <List<any>>Array.prototype.slice.call(element.classList, 0);
-  }
-  addClass(element, classname: string) { element.classList.add(classname); }
-  removeClass(element, classname: string) { element.classList.remove(classname); }
-  hasClass(element, classname: string): boolean { return element.classList.contains(classname); }
-  setStyle(element, stylename: string, stylevalue: string) {
-    element.style[stylename] = stylevalue;
-  }
-  removeStyle(element, stylename: string) { element.style[stylename] = null; }
-  getStyle(element, stylename: string): string { return element.style[stylename]; }
-  tagName(element): string { return element.tagName; }
-  attributeMap(element): Map<string, string> {
-    var res = new Map();
-    var elAttrs = element.attributes;
-    for (var i = 0; i < elAttrs.length; i++) {
-      var attrib = elAttrs[i];
-      res.set(attrib.name, attrib.value);
-    }
-    return res;
-  }
-  hasAttribute(element, attribute: string): boolean { return element.hasAttribute(attribute); }
-  getAttribute(element, attribute: string): string { return element.getAttribute(attribute); }
-  setAttribute(element, name: string, value: string) { element.setAttribute(name, value); }
-  removeAttribute(element, attribute: string) { element.removeAttribute(attribute); }
-  templateAwareRoot(el): any { return this.isTemplateElement(el) ? this.content(el) : el; }
-  createHtmlDocument(): HTMLDocument {
-    return document.implementation.createHTMLDocument('fakeTitle');
-  }
-  defaultDoc(): HTMLDocument { return document; }
-  getBoundingClientRect(el): any {
-    try {
-      return el.getBoundingClientRect();
-    } catch (e) {
-      return {top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0};
-    }
-  }
-  getTitle(): string { return document.title; }
-  setTitle(newTitle: string) { document.title = newTitle || ''; }
-  elementMatches(n, selector: string): boolean {
-    return n instanceof HTMLElement && n.matches ? n.matches(selector) :
-                                                   n.msMatchesSelector(selector);
-  }
-  isTemplateElement(el: any): boolean {
-    return el instanceof HTMLElement && el.nodeName == "TEMPLATE";
-  }
-  isTextNode(node: Node): boolean { return node.nodeType === Node.TEXT_NODE; }
-  isCommentNode(node: Node): boolean { return node.nodeType === Node.COMMENT_NODE; }
-  isElementNode(node: Node): boolean { return node.nodeType === Node.ELEMENT_NODE; }
-  hasShadowRoot(node): boolean { return node instanceof HTMLElement && isPresent(node.shadowRoot); }
-  isShadowRoot(node): boolean { return node instanceof DocumentFragment; }
-  importIntoDoc(node: Node): any {
-    var toImport = node;
-    if (this.isTemplateElement(node)) {
-      toImport = this.content(node);
-    }
-    return document.importNode(toImport, true);
-  }
-  isPageRule(rule): boolean { return rule.type === CSSRule.PAGE_RULE; }
-  isStyleRule(rule): boolean { return rule.type === CSSRule.STYLE_RULE; }
-  isMediaRule(rule): boolean { return rule.type === CSSRule.MEDIA_RULE; }
-  isKeyframesRule(rule): boolean { return rule.type === CSSRule.KEYFRAMES_RULE; }
-  getHref(el: Element): string { return (<any>el).href; }
-  getEventKey(event): string {
-    var key = event.key;
-    if (isBlank(key)) {
-      key = event.keyIdentifier;
-      // keyIdentifier is defined in the old draft of DOM Level 3 Events implemented by Chrome and
-      // Safari
-      // cf
-      // http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/events.html#Events-KeyboardEvents-Interfaces
-      if (isBlank(key)) {
-        return 'Unidentified';
-      }
-      if (key.startsWith('U+')) {
-        key = String.fromCharCode(parseInt(key.substring(2), 16));
-        if (event.location === DOM_KEY_LOCATION_NUMPAD && _chromeNumKeyPadMap.hasOwnProperty(key)) {
-          // There is a bug in Chrome for numeric keypad keys:
-          // https://code.google.com/p/chromium/issues/detail?id=155654
-          // 1, 2, 3 ... are reported as A, B, C ...
-          key = _chromeNumKeyPadMap[key];
-        }
-      }
-    }
-    if (_keyMap.hasOwnProperty(key)) {
-      key = _keyMap[key];
-    }
-    return key;
-  }
-  getGlobalEventTarget(target: string): EventTarget {
-    if (target == "window") {
-      return window;
-    } else if (target == "document") {
-      return document;
-    } else if (target == "body") {
-      return document.body;
-    }
-  }
-  getHistory(): History { return window.history; }
-  getLocation(): Location { return window.location; }
-  getBaseHref(): string { return relativePath(document.baseURI); }
-  getUserAgent(): string { return window.navigator.userAgent; }
-  setData(element, name: string, value: string) { element.dataset[name] = value; }
-  getData(element, name: string): string { return element.dataset[name]; }
-  // TODO(tbosch): move this into a separate environment class once we have it
-  setGlobalVar(name: string, value: any) { global[name] = value; }
-}
-
-// based on urlUtils.js in AngularJS 1
-var urlParsingNode = null;
-function relativePath(url): string {
-  if (isBlank(urlParsingNode)) {
-    urlParsingNode = document.createElement("a");
-  }
-  urlParsingNode.setAttribute('href', url);
-  return (urlParsingNode.pathname.charAt(0) === '/') ? urlParsingNode.pathname :
-                                                       '/' + urlParsingNode.pathname;
-}
diff --git a/modules/angular2/src/dom/dom_adapter.ts b/modules/angular2/src/dom/dom_adapter.ts
deleted file mode 100644
index 79f1e26c5845..000000000000
--- a/modules/angular2/src/dom/dom_adapter.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import {BaseException, isBlank} from 'angular2/src/facade/lang';
-
-export var DOM: DomAdapter;
-
-export function setRootDomAdapter(adapter: DomAdapter) {
-  if (isBlank(DOM)) {
-    DOM = adapter;
-  }
-}
-
-function _abstract() {
-  return new BaseException('This method is abstract');
-}
-
-/**
- * Provides DOM operations in an environment-agnostic way.
- */
-export class DomAdapter {
-  hasProperty(element, name: string): boolean { throw _abstract(); }
-  setProperty(el: Element, name: string, value: any) { throw _abstract(); }
-  getProperty(el: Element, name: string): any { throw _abstract(); }
-  invoke(el: Element, methodName: string, args: List<any>): any { throw _abstract(); }
-
-  logError(error) { throw _abstract(); }
-
-  /**
-   * Maps attribute names to their corresponding property names for cases
-   * where attribute name doesn't match property name.
-   */
-  get attrToPropMap(): StringMap<string, string> { throw _abstract(); }
-
-  parse(templateHtml: string) { throw _abstract(); }
-  query(selector: string): any { throw _abstract(); }
-  querySelector(el, selector: string) { throw _abstract(); }
-  querySelectorAll(el, selector: string): List<any> { throw _abstract(); }
-  on(el, evt, listener) { throw _abstract(); }
-  onAndCancel(el, evt, listener): Function { throw _abstract(); }
-  dispatchEvent(el, evt) { throw _abstract(); }
-  createMouseEvent(eventType): any { throw _abstract(); }
-  createEvent(eventType: string): any { throw _abstract(); }
-  preventDefault(evt) { throw _abstract(); }
-  getInnerHTML(el): string { throw _abstract(); }
-  getOuterHTML(el): string { throw _abstract(); }
-  nodeName(node): string { throw _abstract(); }
-  nodeValue(node): string { throw _abstract(); }
-  type(node): string { throw _abstract(); }
-  content(node): any { throw _abstract(); }
-  firstChild(el): Node { throw _abstract(); }
-  nextSibling(el): Node { throw _abstract(); }
-  parentElement(el): Node { throw _abstract(); }
-  childNodes(el): List<Node> { throw _abstract(); }
-  childNodesAsList(el): List<Node> { throw _abstract(); }
-  clearNodes(el) { throw _abstract(); }
-  appendChild(el, node) { throw _abstract(); }
-  removeChild(el, node) { throw _abstract(); }
-  replaceChild(el, newNode, oldNode) { throw _abstract(); }
-  remove(el): Node { throw _abstract(); }
-  insertBefore(el, node) { throw _abstract(); }
-  insertAllBefore(el, nodes) { throw _abstract(); }
-  insertAfter(el, node) { throw _abstract(); }
-  setInnerHTML(el, value) { throw _abstract(); }
-  getText(el): string { throw _abstract(); }
-  setText(el, value: string) { throw _abstract(); }
-  getValue(el): string { throw _abstract(); }
-  setValue(el, value: string) { throw _abstract(); }
-  getChecked(el): boolean { throw _abstract(); }
-  setChecked(el, value: boolean) { throw _abstract(); }
-  createTemplate(html): HTMLElement { throw _abstract(); }
-  createElement(tagName, doc = null): HTMLElement { throw _abstract(); }
-  createTextNode(text: string, doc = null): Text { throw _abstract(); }
-  createScriptTag(attrName: string, attrValue: string, doc = null): HTMLElement {
-    throw _abstract();
-  }
-  createStyleElement(css: string, doc = null): HTMLStyleElement { throw _abstract(); }
-  createShadowRoot(el): any { throw _abstract(); }
-  getShadowRoot(el): any { throw _abstract(); }
-  getHost(el): any { throw _abstract(); }
-  getDistributedNodes(el): List<Node> { throw _abstract(); }
-  clone(node: Node): Node { throw _abstract(); }
-  getElementsByClassName(element, name: string): List<HTMLElement> { throw _abstract(); }
-  getElementsByTagName(element, name: string): List<HTMLElement> { throw _abstract(); }
-  classList(element): List<any> { throw _abstract(); }
-  addClass(element, classname: string) { throw _abstract(); }
-  removeClass(element, classname: string) { throw _abstract(); }
-  hasClass(element, classname: string): boolean { throw _abstract(); }
-  setStyle(element, stylename: string, stylevalue: string) { throw _abstract(); }
-  removeStyle(element, stylename: string) { throw _abstract(); }
-  getStyle(element, stylename: string): string { throw _abstract(); }
-  tagName(element): string { throw _abstract(); }
-  attributeMap(element): Map<string, string> { throw _abstract(); }
-  hasAttribute(element, attribute: string): boolean { throw _abstract(); }
-  getAttribute(element, attribute: string): string { throw _abstract(); }
-  setAttribute(element, name: string, value: string) { throw _abstract(); }
-  removeAttribute(element, attribute: string) { throw _abstract(); }
-  templateAwareRoot(el) { throw _abstract(); }
-  createHtmlDocument(): HTMLDocument { throw _abstract(); }
-  defaultDoc(): HTMLDocument { throw _abstract(); }
-  getBoundingClientRect(el) { throw _abstract(); }
-  getTitle(): string { throw _abstract(); }
-  setTitle(newTitle: string) { throw _abstract(); }
-  elementMatches(n, selector: string): boolean { throw _abstract(); }
-  isTemplateElement(el: any): boolean { throw _abstract(); }
-  isTextNode(node): boolean { throw _abstract(); }
-  isCommentNode(node): boolean { throw _abstract(); }
-  isElementNode(node): boolean { throw _abstract(); }
-  hasShadowRoot(node): boolean { throw _abstract(); }
-  isShadowRoot(node): boolean { throw _abstract(); }
-  importIntoDoc(node) { throw _abstract(); }
-  isPageRule(rule): boolean { throw _abstract(); }
-  isStyleRule(rule): boolean { throw _abstract(); }
-  isMediaRule(rule): boolean { throw _abstract(); }
-  isKeyframesRule(rule): boolean { throw _abstract(); }
-  getHref(element): string { throw _abstract(); }
-  getEventKey(event): string { throw _abstract(); }
-  resolveAndSetHref(element, baseUrl: string, href: string) { throw _abstract(); }
-  cssToRules(css: string): List<any> { throw _abstract(); }
-  supportsDOMEvents(): boolean { throw _abstract(); }
-  supportsNativeShadowDOM(): boolean { throw _abstract(); }
-  getGlobalEventTarget(target: string): any { throw _abstract(); }
-  getHistory(): History { throw _abstract(); }
-  getLocation(): Location { throw _abstract(); }
-  getBaseHref(): string { throw _abstract(); }
-  getUserAgent(): string { throw _abstract(); }
-  setData(element, name: string, value: string) { throw _abstract(); }
-  getData(element, name: string): string { throw _abstract(); }
-  setGlobalVar(name: string, value: any) { throw _abstract(); }
-}
diff --git a/modules/angular2/src/dom/generic_browser_adapter.ts b/modules/angular2/src/dom/generic_browser_adapter.ts
deleted file mode 100644
index f7bc35c9fa33..000000000000
--- a/modules/angular2/src/dom/generic_browser_adapter.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {isPresent, isFunction} from 'angular2/src/facade/lang';
-import {DomAdapter} from './dom_adapter';
-
-/**
- * Provides DOM operations in any browser environment.
- */
-export class GenericBrowserDomAdapter extends DomAdapter {
-  getDistributedNodes(el): List<Node> { return el.getDistributedNodes(); }
-  resolveAndSetHref(el, baseUrl: string, href: string) {
-    el.href = href == null ? baseUrl : baseUrl + '/../' + href;
-  }
-  cssToRules(css: string): List<any> {
-    var style = this.createStyleElement(css);
-    this.appendChild(this.defaultDoc().head, style);
-    var rules = [];
-    if (isPresent(style.sheet)) {
-      // TODO(sorvell): Firefox throws when accessing the rules of a stylesheet
-      // with an @import
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=625013
-      try {
-        var rawRules = (<any>style.sheet).cssRules;
-        rules = ListWrapper.createFixedSize(rawRules.length);
-        for (var i = 0; i < rawRules.length; i++) {
-          rules[i] = rawRules[i];
-        }
-      } catch (e) {
-        //
-      }
-    } else {
-      // console.warn('sheet not found', style);
-    }
-    this.remove(style);
-    return rules;
-  }
-  supportsDOMEvents(): boolean { return true; }
-  supportsNativeShadowDOM(): boolean {
-    return isFunction((<any>this.defaultDoc().body).createShadowRoot);
-  }
-}
diff --git a/modules/angular2/src/dom/html_adapter.dart b/modules/angular2/src/dom/html_adapter.dart
deleted file mode 100644
index 28de7a17826c..000000000000
--- a/modules/angular2/src/dom/html_adapter.dart
+++ /dev/null
@@ -1,331 +0,0 @@
-library angular2.dom.htmlAdapter;
-
-import 'dom_adapter.dart';
-import 'package:html/parser.dart' as parser;
-import 'package:html/dom.dart';
-import 'dart:io';
-
-class Html5LibDomAdapter implements DomAdapter {
-  static void makeCurrent() {
-    setRootDomAdapter(new Html5LibDomAdapter());
-  }
-
-  hasProperty(element, String name) {
-    // This is needed for serverside compile to generate the right getters/setters...
-    return true;
-  }
-
-  void setProperty(Element element, String name, Object value) => throw 'not implemented';
-
-  getProperty(Element element, String name) => throw 'not implemented';
-
-  invoke(Element element, String methodName, List args) => throw 'not implemented';
-
-  logError(error) {
-    stderr.writeln('${error}');
-  }
-
-  @override
-  final attrToPropMap = const {
-    'innerHtml': 'innerHTML',
-    'readonly': 'readOnly',
-    'tabindex': 'tabIndex',
-  };
-
-  @override
-  getGlobalEventTarget(String target) {
-    throw 'not implemented';
-  }
-
-  @override
-  getTitle() {
-    throw 'not implemented';
-  }
-
-  @override
-  setTitle(String newTitle) {
-    throw 'not implemented';
-  }
-
-  @override
-  String getEventKey(event) {
-    throw 'not implemented';
-  }
-
-  @override
-  void replaceChild(el, newNode, oldNode) {
-    throw 'not implemented';
-  }
-
-  @override
-  dynamic getBoundingClientRect(el) {
-    throw 'not implemented';
-  }
-
-  Element parse(String templateHtml) => parser.parse(templateHtml).firstChild;
-  query(selector) {
-    throw 'not implemented';
-  }
-  querySelector(el, String selector) {
-    return el.querySelector(selector);
-  }
-  List querySelectorAll(el, String selector) {
-    return el.querySelectorAll(selector);
-  }
-  on(el, evt, listener) {
-    throw 'not implemented';
-  }
-  Function onAndCancel(el, evt, listener) {
-    throw 'not implemented';
-  }
-  dispatchEvent(el, evt) {
-    throw 'not implemented';
-  }
-  createMouseEvent(eventType) {
-    throw 'not implemented';
-  }
-  createEvent(eventType) {
-    throw 'not implemented';
-  }
-  preventDefault(evt) {
-    throw 'not implemented';
-  }
-  getInnerHTML(el) {
-    return el.innerHtml;
-  }
-  getOuterHTML(el) {
-    return el.outerHtml;
-  }
-  String nodeName(node) {
-    switch (node.nodeType) {
-      case Node.ELEMENT_NODE:
-        return (node as Element).localName;
-      case Node.TEXT_NODE:
-        return '#text';
-      default:
-        throw 'not implemented for type ${node.nodeType}. '
-            'See http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1950641247'
-            ' for node types definitions.';
-    }
-  }
-  String nodeValue(node) => node.data;
-  String type(node) {
-    throw 'not implemented';
-  }
-  content(node) {
-    return node;
-  }
-
-  firstChild(el) => el is NodeList ? el.first : el.firstChild;
-
-  nextSibling(el) {
-    final parentNode = el.parentNode;
-    if (parentNode == null) return null;
-    final siblings = parentNode.nodes;
-    final index = siblings.indexOf(el);
-    if (index < siblings.length - 1) {
-      return siblings[index + 1];
-    }
-    return null;
-  }
-
-  parentElement(el) {
-    return el.parent;
-  }
-  List childNodes(el) => el.nodes;
-  List childNodesAsList(el) => el.nodes;
-  clearNodes(el) {
-    el.nodes.forEach((e) => e.remove());
-  }
-  appendChild(el, node) => el.append(node.remove());
-  removeChild(el, node) {
-    throw 'not implemented';
-  }
-  remove(el) => el.remove();
-  insertBefore(el, node) {
-    if (el.parent == null) throw '$el must have a parent';
-    el.parent.insertBefore(node, el);
-  }
-  insertAllBefore(el, nodes) {
-    throw 'not implemented';
-  }
-  insertAfter(el, node) {
-    throw 'not implemented';
-  }
-  setInnerHTML(el, value) {
-    el.innerHtml = value;
-  }
-  getText(el) {
-    return el.text;
-  }
-  setText(el, String value) => el.text = value;
-
-  getValue(el) {
-    throw 'not implemented';
-  }
-  setValue(el, String value) {
-    throw 'not implemented';
-  }
-  getChecked(el) {
-    throw 'not implemented';
-  }
-  setChecked(el, bool value) {
-    throw 'not implemented';
-  }
-  createTemplate(String html) => createElement('template')..innerHtml = html;
-  createElement(tagName, [doc]) {
-    return new Element.tag(tagName);
-  }
-  createTextNode(String text, [doc]) {
-    throw 'not implemented';
-  }
-  createScriptTag(String attrName, String attrValue, [doc]) {
-    throw 'not implemented';
-  }
-  createStyleElement(String css, [doc]) {
-    throw 'not implemented';
-  }
-  createShadowRoot(el) {
-    throw 'not implemented';
-  }
-  getShadowRoot(el) {
-    throw 'not implemented';
-  }
-  getHost(el) {
-    throw 'not implemented';
-  }
-  clone(node) => node.clone(true);
-  getElementsByClassName(element, String name) {
-    throw 'not implemented';
-  }
-  getElementsByTagName(element, String name) {
-    throw 'not implemented';
-  }
-  List classList(element) => element.classes.toList();
-
-  addClass(element, String classname) {
-    element.classes.add(classname);
-  }
-  removeClass(element, String classname) {
-    throw 'not implemented';
-  }
-
-  hasClass(element, String classname) => element.classes.contains(classname);
-
-  setStyle(element, String stylename, String stylevalue) {
-    throw 'not implemented';
-  }
-  removeStyle(element, String stylename) {
-    throw 'not implemented';
-  }
-  getStyle(element, String stylename) {
-    throw 'not implemented';
-  }
-
-  String tagName(element) => element.localName;
-
-  attributeMap(element) {
-    // `attributes` keys can be {@link AttributeName}s.
-    var map = <String, String>{};
-    element.attributes.forEach((key, value) {
-      map['$key'] = value;
-    });
-    return map;
-  }
-  hasAttribute(element, String attribute) {
-    throw 'not implemented';
-  }
-  getAttribute(element, String attribute) {
-    throw 'not implemented';
-  }
-  setAttribute(element, String name, String value) {
-    element.attributes[name] = value;
-  }
-  removeAttribute(element, String attribute) {
-    element.attributes.remove(attribute);
-  }
-
-  templateAwareRoot(el) => el;
-
-  createHtmlDocument() {
-    throw 'not implemented';
-  }
-
-  defaultDoc() {
-    throw 'not implemented';
-  }
-
-  bool elementMatches(n, String selector) {
-    throw 'not implemented';
-  }
-
-  bool isTemplateElement(Element el) {
-    return el != null && el.localName.toLowerCase() == 'template';
-  }
-  bool isTextNode(node) => node.nodeType == Node.TEXT_NODE;
-  bool isCommentNode(node) => node.nodeType == Node.COMMENT_NODE;
-
-  bool isElementNode(node) => node.nodeType == Node.ELEMENT_NODE;
-
-  bool hasShadowRoot(node) {
-    throw 'not implemented';
-  }
-  bool isShadowRoot(node) {
-    throw 'not implemented';
-  }
-  importIntoDoc(node) {
-    throw 'not implemented';
-  }
-  bool isPageRule(rule) {
-    throw 'not implemented';
-  }
-  bool isStyleRule(rule) {
-    throw 'not implemented';
-  }
-  bool isMediaRule(rule) {
-    throw 'not implemented';
-  }
-  bool isKeyframesRule(rule) {
-    throw 'not implemented';
-  }
-  String getHref(element) {
-    throw 'not implemented';
-  }
-  void resolveAndSetHref(element, baseUrl, href) {
-    throw 'not implemented';
-  }
-  List cssToRules(String css) {
-    throw 'not implemented';
-  }
-  List getDistributedNodes(Node) {
-    throw 'not implemented';
-  }
-  bool supportsDOMEvents() {
-    throw 'not implemented';
-  }
-  bool supportsNativeShadowDOM() {
-    throw 'not implemented';
-  }
-  getHistory() {
-    throw 'not implemented';
-  }
-  getLocation() {
-    throw 'not implemented';
-  }
-  getBaseHref() {
-    throw 'not implemented';
-  }
-  String getUserAgent() {
-    throw 'not implemented';
-  }
-  void setData(Element element, String name, String value) {
-    this.setAttribute(element, 'data-${name}', value);
-  }
-  String getData(Element element, String name) {
-    return this.getAttribute(element, 'data-${name}');
-  }
-  // TODO(tbosch): move this into a separate environment class once we have it
-  setGlobalVar(String name, value) {
-    // noop on the server
-  }
-}
diff --git a/modules/angular2/src/dom/parse5_adapter.dart b/modules/angular2/src/dom/parse5_adapter.dart
deleted file mode 100644
index 615105394f68..000000000000
--- a/modules/angular2/src/dom/parse5_adapter.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library angular2.src.dom.parse5_adapter;
-
-// no dart implementation
diff --git a/modules/angular2/src/dom/parse5_adapter.ts b/modules/angular2/src/dom/parse5_adapter.ts
deleted file mode 100644
index 7fdc66578aa5..000000000000
--- a/modules/angular2/src/dom/parse5_adapter.ts
+++ /dev/null
@@ -1,683 +0,0 @@
-var parse5 = require('parse5');
-var parser = new parse5.Parser(parse5.TreeAdapters.htmlparser2);
-var serializer = new parse5.Serializer(parse5.TreeAdapters.htmlparser2);
-var treeAdapter = parser.treeAdapter;
-
-var cssParse = require('css').parse;
-
-var url = require('url');
-
-import {List, MapWrapper, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {DomAdapter, setRootDomAdapter} from './dom_adapter';
-import {BaseException, isPresent, isBlank, global} from 'angular2/src/facade/lang';
-import {SelectorMatcher, CssSelector} from 'angular2/src/render/dom/compiler/selector';
-
-var _attrToPropMap = {
-  'innerHtml': 'innerHTML',
-  'readonly': 'readOnly',
-  'tabindex': 'tabIndex',
-};
-var defDoc = null;
-
-function _notImplemented(methodName) {
-  return new BaseException('This method is not implemented in Parse5DomAdapter: ' + methodName);
-}
-
-export class Parse5DomAdapter extends DomAdapter {
-  static makeCurrent() { setRootDomAdapter(new Parse5DomAdapter()); }
-
-  hasProperty(element, name: string): boolean {
-    return _HTMLElementPropertyList.indexOf(name) > -1;
-  }
-  // 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...
-  setProperty(el: /*element*/ any, name: string, value: any) {
-    if (name === 'innerHTML') {
-      this.setInnerHTML(el, value);
-    } else {
-      el[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: /*element*/ any, name: string): any { return el[name]; }
-
-  logError(error) { console.error(error); }
-
-  get attrToPropMap() { return _attrToPropMap; }
-
-  query(selector) { throw _notImplemented('query'); }
-  querySelector(el, selector: string): any { return this.querySelectorAll(el, selector)[0]; }
-  querySelectorAll(el, selector: string): List<any> {
-    var res = [];
-    var _recursive = (result, node, selector, matcher) => {
-      var cNodes = node.childNodes;
-      if (cNodes && cNodes.length > 0) {
-        for (var i = 0; i < cNodes.length; i++) {
-          var childNode = cNodes[i];
-          if (this.elementMatches(childNode, selector, matcher)) {
-            result.push(childNode);
-          }
-          _recursive(result, childNode, selector, matcher);
-        }
-      }
-    };
-    var matcher = new SelectorMatcher();
-    matcher.addSelectables(CssSelector.parse(selector));
-    _recursive(res, el, selector, matcher);
-    return res;
-  }
-  elementMatches(node, selector: string, matcher = null): boolean {
-    var result = false;
-    if (selector && selector.charAt(0) == "#") {
-      result = this.getAttribute(node, 'id') == selector.substring(1);
-    } else if (selector) {
-      var result = false;
-      if (matcher == null) {
-        matcher = new SelectorMatcher();
-        matcher.addSelectables(CssSelector.parse(selector));
-      }
-
-      var cssSelector = new CssSelector();
-      cssSelector.setElement(this.tagName(node));
-      if (node.attribs) {
-        for (var attrName in node.attribs) {
-          cssSelector.addAttribute(attrName, node.attribs[attrName]);
-        }
-      }
-      var classList = this.classList(node);
-      for (var i = 0; i < classList.length; i++) {
-        cssSelector.addClassName(classList[i]);
-      }
-
-      matcher.match(cssSelector, function(selector, cb) { result = true; });
-    }
-    return result;
-  }
-  on(el, evt, listener) {
-    var listenersMap: StringMap<any, any> = el._eventListenersMap;
-    if (isBlank(listenersMap)) {
-      var listenersMap: StringMap<any, any> = StringMapWrapper.create();
-      el._eventListenersMap = listenersMap;
-    }
-    var listeners = StringMapWrapper.get(listenersMap, evt);
-    if (isBlank(listeners)) {
-      listeners = [];
-    }
-    listeners.push(listener);
-    StringMapWrapper.set(listenersMap, evt, listeners);
-  }
-  onAndCancel(el, evt, listener): Function {
-    this.on(el, evt, listener);
-    return () => {
-      ListWrapper.remove(StringMapWrapper.get(el._eventListenersMap, evt), listener);
-    };
-  }
-  dispatchEvent(el, evt) {
-    if (isBlank(evt.target)) {
-      evt.target = el;
-    }
-    if (isPresent(el._eventListenersMap)) {
-      var listeners: any = StringMapWrapper.get(el._eventListenersMap, evt.type);
-      if (isPresent(listeners)) {
-        for (var i = 0; i < listeners.length; i++) {
-          listeners[i](evt);
-        }
-      }
-    }
-    if (isPresent(el.parent)) {
-      this.dispatchEvent(el.parent, evt);
-    }
-    if (isPresent(el._window)) {
-      this.dispatchEvent(el._window, evt);
-    }
-  }
-  createMouseEvent(eventType): Event { return this.createEvent(eventType); }
-  createEvent(eventType: string): Event {
-    var evt = <Event>{
-      type: eventType,
-      defaultPrevented: false,
-      preventDefault: () => { evt.defaultPrevented = true; }
-    };
-    return evt;
-  }
-  preventDefault(evt) { evt.returnValue = false; }
-  getInnerHTML(el): string { return serializer.serialize(this.templateAwareRoot(el)); }
-  getOuterHTML(el): string {
-    serializer.html = '';
-    serializer._serializeElement(el);
-    return serializer.html;
-  }
-  nodeName(node): string { return node.tagName; }
-  nodeValue(node): string { return node.nodeValue; }
-  type(node: any): string { throw _notImplemented('type'); }
-  content(node): string { return node.childNodes[0]; }
-  firstChild(el): Node { return el.firstChild; }
-  nextSibling(el): Node { return el.nextSibling; }
-  parentElement(el): Node { return el.parent; }
-  childNodes(el): Node[] { return el.childNodes; }
-  childNodesAsList(el): List<any> {
-    var childNodes = el.childNodes;
-    var res = ListWrapper.createFixedSize(childNodes.length);
-    for (var i = 0; i < childNodes.length; i++) {
-      res[i] = childNodes[i];
-    }
-    return res;
-  }
-  clearNodes(el) {
-    while (el.childNodes.length > 0) {
-      this.remove(el.childNodes[0]);
-    }
-  }
-  appendChild(el, node) {
-    this.remove(node);
-    treeAdapter.appendChild(this.templateAwareRoot(el), node);
-  }
-  removeChild(el, node) {
-    if (ListWrapper.contains(el.childNodes, node)) {
-      this.remove(node);
-    }
-  }
-  remove(el): HTMLElement {
-    var parent = el.parent;
-    if (parent) {
-      var index = parent.childNodes.indexOf(el);
-      parent.childNodes.splice(index, 1);
-    }
-    var prev = el.previousSibling;
-    var next = el.nextSibling;
-    if (prev) {
-      prev.next = next;
-    }
-    if (next) {
-      next.prev = prev;
-    }
-    el.prev = null;
-    el.next = null;
-    el.parent = null;
-    return el;
-  }
-  insertBefore(el, node) {
-    this.remove(node);
-    treeAdapter.insertBefore(el.parent, node, el);
-  }
-  insertAllBefore(el, nodes) {
-    ListWrapper.forEach(nodes, (n) => { this.insertBefore(el, n); });
-  }
-  insertAfter(el, node) {
-    if (el.nextSibling) {
-      this.insertBefore(el.nextSibling, node);
-    } else {
-      this.appendChild(el.parent, node);
-    }
-  }
-  setInnerHTML(el, value) {
-    this.clearNodes(el);
-    var content = parser.parseFragment(value);
-    for (var i = 0; i < content.childNodes.length; i++) {
-      treeAdapter.appendChild(el, content.childNodes[i]);
-    }
-  }
-  getText(el): string {
-    if (this.isTextNode(el)) {
-      return el.data;
-    } else if (isBlank(el.childNodes) || el.childNodes.length == 0) {
-      return "";
-    } else {
-      var textContent = "";
-      for (var i = 0; i < el.childNodes.length; i++) {
-        textContent += this.getText(el.childNodes[i]);
-      }
-      return textContent;
-    }
-  }
-  setText(el, value: string) {
-    if (this.isTextNode(el)) {
-      el.data = value;
-    } else {
-      this.clearNodes(el);
-      if (value !== '') treeAdapter.insertText(el, value);
-    }
-  }
-  getValue(el): string { return el.value; }
-  setValue(el, value: string) { el.value = value; }
-  getChecked(el): boolean { return el.checked; }
-  setChecked(el, value: boolean) { el.checked = value; }
-  createTemplate(html): HTMLElement {
-    var template = treeAdapter.createElement("template", 'http://www.w3.org/1999/xhtml', []);
-    var content = parser.parseFragment(html);
-    treeAdapter.appendChild(template, content);
-    return template;
-  }
-  createElement(tagName): HTMLElement {
-    return treeAdapter.createElement(tagName, 'http://www.w3.org/1999/xhtml', []);
-  }
-  createTextNode(text: string): Text { throw _notImplemented('createTextNode'); }
-  createScriptTag(attrName: string, attrValue: string): HTMLElement {
-    return treeAdapter.createElement("script", 'http://www.w3.org/1999/xhtml',
-                                     [{name: attrName, value: attrValue}]);
-  }
-  createStyleElement(css: string): HTMLStyleElement {
-    var style = this.createElement('style');
-    this.setText(style, css);
-    return <HTMLStyleElement>style;
-  }
-  createShadowRoot(el): HTMLElement {
-    el.shadowRoot = treeAdapter.createDocumentFragment();
-    el.shadowRoot.parent = el;
-    return el.shadowRoot;
-  }
-  getShadowRoot(el): Element { return el.shadowRoot; }
-  getHost(el): string { return el.host; }
-  getDistributedNodes(el: any): List<Node> { throw _notImplemented('getDistributedNodes'); }
-  clone(node: Node): Node {
-    // e.g. document fragment
-    if ((<any>node).type === 'root') {
-      var serialized = serializer.serialize(node);
-      var newParser = new parse5.Parser(parse5.TreeAdapters.htmlparser2);
-      return newParser.parseFragment(serialized);
-    } else {
-      var temp = treeAdapter.createElement("template", null, []);
-      treeAdapter.appendChild(temp, node);
-      var serialized = serializer.serialize(temp);
-      var newParser = new parse5.Parser(parse5.TreeAdapters.htmlparser2);
-      return newParser.parseFragment(serialized).childNodes[0];
-    }
-  }
-  getElementsByClassName(element, name: string): List<HTMLElement> {
-    return this.querySelectorAll(element, "." + name);
-  }
-  getElementsByTagName(element: any, name: string): List<HTMLElement> {
-    throw _notImplemented('getElementsByTagName');
-  }
-  classList(element): List<string> {
-    var classAttrValue = null;
-    var attributes = element.attribs;
-    if (attributes && attributes.hasOwnProperty("class")) {
-      classAttrValue = attributes["class"];
-    }
-    return classAttrValue ? classAttrValue.trim().split(/\s+/g) : [];
-  }
-  addClass(element, classname: string) {
-    var classList = this.classList(element);
-    var index = classList.indexOf(classname);
-    if (index == -1) {
-      classList.push(classname);
-      element.attribs["class"] = element.className = ListWrapper.join(classList, " ");
-    }
-  }
-  removeClass(element, classname: string) {
-    var classList = this.classList(element);
-    var index = classList.indexOf(classname);
-    if (index > -1) {
-      classList.splice(index, 1);
-      element.attribs["class"] = element.className = ListWrapper.join(classList, " ");
-    }
-  }
-  hasClass(element, classname: string): boolean {
-    return ListWrapper.contains(this.classList(element), classname);
-  }
-  _readStyleAttribute(element) {
-    var styleMap = {};
-    var attributes = element.attribs;
-    if (attributes && attributes.hasOwnProperty("style")) {
-      var styleAttrValue = attributes["style"];
-      var styleList = styleAttrValue.split(/;+/g);
-      for (var i = 0; i < styleList.length; i++) {
-        if (styleList[i].length > 0) {
-          var elems = styleList[i].split(/:+/g);
-          styleMap[elems[0].trim()] = elems[1].trim();
-        }
-      }
-    }
-    return styleMap;
-  }
-  _writeStyleAttribute(element, styleMap) {
-    var styleAttrValue = "";
-    for (var key in styleMap) {
-      var newValue = styleMap[key];
-      if (newValue && newValue.length > 0) {
-        styleAttrValue += key + ":" + styleMap[key] + ";";
-      }
-    }
-    element.attribs["style"] = styleAttrValue;
-  }
-  setStyle(element, stylename: string, stylevalue: string) {
-    var styleMap = this._readStyleAttribute(element);
-    styleMap[stylename] = stylevalue;
-    this._writeStyleAttribute(element, styleMap);
-  }
-  removeStyle(element, stylename: string) { this.setStyle(element, stylename, null); }
-  getStyle(element, stylename: string): string {
-    var styleMap = this._readStyleAttribute(element);
-    return styleMap.hasOwnProperty(stylename) ? styleMap[stylename] : "";
-  }
-  tagName(element): string { return element.tagName == "style" ? "STYLE" : element.tagName; }
-  attributeMap(element): Map<string, string> {
-    var res = new Map();
-    var elAttrs = treeAdapter.getAttrList(element);
-    for (var i = 0; i < elAttrs.length; i++) {
-      var attrib = elAttrs[i];
-      res.set(attrib.name, attrib.value);
-    }
-    return res;
-  }
-  hasAttribute(element, attribute: string): boolean {
-    return element.attribs && element.attribs.hasOwnProperty(attribute);
-  }
-  getAttribute(element, attribute: string): string {
-    return element.attribs && element.attribs.hasOwnProperty(attribute) ?
-               element.attribs[attribute] :
-               null;
-  }
-  setAttribute(element, attribute: string, value: string) {
-    if (attribute) {
-      element.attribs[attribute] = value;
-    }
-  }
-  removeAttribute(element, attribute: string) {
-    if (attribute) {
-      StringMapWrapper.delete(element.attribs, attribute);
-    }
-  }
-  templateAwareRoot(el): any { return this.isTemplateElement(el) ? this.content(el) : el; }
-  createHtmlDocument(): Document {
-    var newDoc = treeAdapter.createDocument();
-    newDoc.title = "fake title";
-    var head = treeAdapter.createElement("head", null, []);
-    var body = treeAdapter.createElement("body", 'http://www.w3.org/1999/xhtml', []);
-    this.appendChild(newDoc, head);
-    this.appendChild(newDoc, body);
-    StringMapWrapper.set(newDoc, "head", head);
-    StringMapWrapper.set(newDoc, "body", body);
-    StringMapWrapper.set(newDoc, "_window", StringMapWrapper.create());
-    return newDoc;
-  }
-  defaultDoc(): Document {
-    if (defDoc === null) {
-      defDoc = this.createHtmlDocument();
-    }
-    return defDoc;
-  }
-  getBoundingClientRect(el): any { return {left: 0, top: 0, width: 0, height: 0}; }
-  getTitle(): string { return this.defaultDoc().title || ""; }
-  setTitle(newTitle: string) { this.defaultDoc().title = newTitle; }
-  isTemplateElement(el: any): boolean {
-    return this.isElementNode(el) && this.tagName(el) === "template";
-  }
-  isTextNode(node): boolean { return treeAdapter.isTextNode(node); }
-  isCommentNode(node): boolean { return treeAdapter.isCommentNode(node); }
-  isElementNode(node): boolean { return node ? treeAdapter.isElementNode(node) : false; }
-  hasShadowRoot(node): boolean { return isPresent(node.shadowRoot); }
-  isShadowRoot(node): boolean { return this.getShadowRoot(node) == node; }
-  importIntoDoc(node): any { return this.clone(node); }
-  isPageRule(rule): boolean {
-    return rule.type === 6;  // CSSRule.PAGE_RULE
-  }
-  isStyleRule(rule): boolean {
-    return rule.type === 1;  // CSSRule.MEDIA_RULE
-  }
-  isMediaRule(rule): boolean {
-    return rule.type === 4;  // CSSRule.MEDIA_RULE
-  }
-  isKeyframesRule(rule): boolean {
-    return rule.type === 7;  // CSSRule.KEYFRAMES_RULE
-  }
-  getHref(el): string { return el.href; }
-  resolveAndSetHref(el, baseUrl: string, href: string) {
-    if (href == null) {
-      el.href = baseUrl;
-    } else {
-      el.href = url.resolve(baseUrl, href);
-    }
-  }
-  _buildRules(parsedRules, css?) {
-    var rules = [];
-    for (var i = 0; i < parsedRules.length; i++) {
-      var parsedRule = parsedRules[i];
-      var rule: StringMap<string, any> = StringMapWrapper.create();
-      StringMapWrapper.set(rule, "cssText", css);
-      StringMapWrapper.set(rule, "style", {content: "", cssText: ""});
-      if (parsedRule.type == "rule") {
-        StringMapWrapper.set(rule, "type", 1);
-        StringMapWrapper.set(rule, "selectorText", parsedRule.selectors.join(", ")
-                                                       .replace(/\s{2,}/g, " ")
-                                                       .replace(/\s*~\s*/g, " ~ ")
-                                                       .replace(/\s*\+\s*/g, " + ")
-                                                       .replace(/\s*>\s*/g, " > ")
-                                                       .replace(/\[(\w+)=(\w+)\]/g, '[$1="$2"]'));
-        if (isBlank(parsedRule.declarations)) {
-          continue;
-        }
-        for (var j = 0; j < parsedRule.declarations.length; j++) {
-          var declaration = parsedRule.declarations[j];
-          StringMapWrapper.set(StringMapWrapper.get(rule, "style"), declaration.property,
-                               declaration.value);
-          StringMapWrapper.get(rule, "style").cssText +=
-              declaration.property + ": " + declaration.value + ";";
-        }
-      } else if (parsedRule.type == "media") {
-        StringMapWrapper.set(rule, "type", 4);
-        StringMapWrapper.set(rule, "media", {mediaText: parsedRule.media});
-        if (parsedRule.rules) {
-          StringMapWrapper.set(rule, "cssRules", this._buildRules(parsedRule.rules));
-        }
-      }
-      rules.push(rule);
-    }
-    return rules;
-  }
-  cssToRules(css: string): List<any> {
-    css = css.replace(/url\(\'(.+)\'\)/g, 'url($1)');
-    var rules = [];
-    var parsedCSS = cssParse(css, {silent: true});
-    if (parsedCSS.stylesheet && parsedCSS.stylesheet.rules) {
-      rules = this._buildRules(parsedCSS.stylesheet.rules, css);
-    }
-    return rules;
-  }
-  supportsDOMEvents(): boolean { return false; }
-  supportsNativeShadowDOM(): boolean { return false; }
-  getGlobalEventTarget(target: string): any {
-    if (target == "window") {
-      return (<any>this.defaultDoc())._window;
-    } else if (target == "document") {
-      return this.defaultDoc();
-    } else if (target == "body") {
-      return this.defaultDoc().body;
-    }
-  }
-  getHistory(): History { throw 'not implemented'; }
-  getLocation(): Location { throw 'not implemented'; }
-  getUserAgent(): string { return "Fake user agent"; }
-  getData(el, name: string): string { return this.getAttribute(el, 'data-' + name); }
-  setData(el, name: string, value: string) { this.setAttribute(el, 'data-' + name, value); }
-  // TODO(tbosch): move this into a separate environment class once we have it
-  setGlobalVar(name: string, value: any) { global[name] = value; }
-}
-
-// TODO: build a proper list, this one is all the keys of a HTMLInputElement
-var _HTMLElementPropertyList = [
-  "webkitEntries",
-  "incremental",
-  "webkitdirectory",
-  "selectionDirection",
-  "selectionEnd",
-  "selectionStart",
-  "labels",
-  "validationMessage",
-  "validity",
-  "willValidate",
-  "width",
-  "valueAsNumber",
-  "valueAsDate",
-  "value",
-  "useMap",
-  "defaultValue",
-  "type",
-  "step",
-  "src",
-  "size",
-  "required",
-  "readOnly",
-  "placeholder",
-  "pattern",
-  "name",
-  "multiple",
-  "min",
-  "minLength",
-  "maxLength",
-  "max",
-  "list",
-  "indeterminate",
-  "height",
-  "formTarget",
-  "formNoValidate",
-  "formMethod",
-  "formEnctype",
-  "formAction",
-  "files",
-  "form",
-  "disabled",
-  "dirName",
-  "checked",
-  "defaultChecked",
-  "autofocus",
-  "autocomplete",
-  "alt",
-  "align",
-  "accept",
-  "onautocompleteerror",
-  "onautocomplete",
-  "onwaiting",
-  "onvolumechange",
-  "ontoggle",
-  "ontimeupdate",
-  "onsuspend",
-  "onsubmit",
-  "onstalled",
-  "onshow",
-  "onselect",
-  "onseeking",
-  "onseeked",
-  "onscroll",
-  "onresize",
-  "onreset",
-  "onratechange",
-  "onprogress",
-  "onplaying",
-  "onplay",
-  "onpause",
-  "onmousewheel",
-  "onmouseup",
-  "onmouseover",
-  "onmouseout",
-  "onmousemove",
-  "onmouseleave",
-  "onmouseenter",
-  "onmousedown",
-  "onloadstart",
-  "onloadedmetadata",
-  "onloadeddata",
-  "onload",
-  "onkeyup",
-  "onkeypress",
-  "onkeydown",
-  "oninvalid",
-  "oninput",
-  "onfocus",
-  "onerror",
-  "onended",
-  "onemptied",
-  "ondurationchange",
-  "ondrop",
-  "ondragstart",
-  "ondragover",
-  "ondragleave",
-  "ondragenter",
-  "ondragend",
-  "ondrag",
-  "ondblclick",
-  "oncuechange",
-  "oncontextmenu",
-  "onclose",
-  "onclick",
-  "onchange",
-  "oncanplaythrough",
-  "oncanplay",
-  "oncancel",
-  "onblur",
-  "onabort",
-  "spellcheck",
-  "isContentEditable",
-  "contentEditable",
-  "outerText",
-  "innerText",
-  "accessKey",
-  "hidden",
-  "webkitdropzone",
-  "draggable",
-  "tabIndex",
-  "dir",
-  "translate",
-  "lang",
-  "title",
-  "childElementCount",
-  "lastElementChild",
-  "firstElementChild",
-  "children",
-  "onwebkitfullscreenerror",
-  "onwebkitfullscreenchange",
-  "nextElementSibling",
-  "previousElementSibling",
-  "onwheel",
-  "onselectstart",
-  "onsearch",
-  "onpaste",
-  "oncut",
-  "oncopy",
-  "onbeforepaste",
-  "onbeforecut",
-  "onbeforecopy",
-  "shadowRoot",
-  "dataset",
-  "classList",
-  "className",
-  "outerHTML",
-  "innerHTML",
-  "scrollHeight",
-  "scrollWidth",
-  "scrollTop",
-  "scrollLeft",
-  "clientHeight",
-  "clientWidth",
-  "clientTop",
-  "clientLeft",
-  "offsetParent",
-  "offsetHeight",
-  "offsetWidth",
-  "offsetTop",
-  "offsetLeft",
-  "localName",
-  "prefix",
-  "namespaceURI",
-  "id",
-  "style",
-  "attributes",
-  "tagName",
-  "parentElement",
-  "textContent",
-  "baseURI",
-  "ownerDocument",
-  "nextSibling",
-  "previousSibling",
-  "lastChild",
-  "firstChild",
-  "childNodes",
-  "parentNode",
-  "nodeType",
-  "nodeValue",
-  "nodeName",
-  "closure_lm_714617",
-  "__jsaction"
-];
diff --git a/modules/angular2/src/facade/async.dart b/modules/angular2/src/facade/async.dart
deleted file mode 100644
index a15fc66edda9..000000000000
--- a/modules/angular2/src/facade/async.dart
+++ /dev/null
@@ -1,124 +0,0 @@
-library angular.core.facade.async;
-
-import 'dart:async';
-export 'dart:async' show Future, Stream, StreamController, StreamSubscription;
-
-class PromiseWrapper {
-  static Future resolve(obj) => new Future.value(obj);
-
-  static Future reject(obj, stackTrace) => new Future.error(obj,
-      stackTrace != null ? stackTrace : obj is Error ? obj.stackTrace : null);
-
-  static Future<List> all(List<dynamic> promises) {
-    return Future
-        .wait(promises.map((p) => p is Future ? p : new Future.value(p)));
-  }
-
-  static Future then(Future promise, success(value), [Function onError]) {
-    if (success == null) return promise.catchError(onError);
-    return promise.then(success, onError: onError);
-  }
-
-  static Future wrap(Function fn) {
-    return new Future(fn);
-  }
-  
-  // Note: We can't rename this method to `catch`, as this is not a valid
-  // method name in Dart.
-  static Future catchError(Future promise, Function onError) {
-    return promise.catchError(onError);
-  }
-
-  static CompleterWrapper completer() => new CompleterWrapper(new Completer());
-}
-
-class TimerWrapper {
-  static Timer setTimeout(fn(), int millis) =>
-      new Timer(new Duration(milliseconds: millis), fn);
-  static void clearTimeout(Timer timer) {
-    timer.cancel();
-  }
-
-  static Timer setInterval(fn(), int millis) {
-    var interval = new Duration(milliseconds: millis);
-    return new Timer.periodic(interval, (Timer timer) {
-      fn();
-    });
-  }
-  static void clearInterval(Timer timer) {
-    timer.cancel();
-  }
-}
-
-class ObservableWrapper {
-  static StreamSubscription subscribe(Stream s, Function onNext,
-      [onError, onComplete]) {
-    return s.listen(onNext,
-        onError: onError, onDone: onComplete, cancelOnError: true);
-  }
-
-  static bool isObservable(obs) {
-    return obs is Stream;
-  }
-
-  static void dispose(StreamSubscription s) {
-    s.cancel();
-  }
-
-  static void callNext(EventEmitter emitter, value) {
-    emitter.add(value);
-  }
-
-  static void callThrow(EventEmitter emitter, error) {
-    emitter.addError(error);
-  }
-
-  static void callReturn(EventEmitter emitter) {
-    emitter.close();
-  }
-}
-
-class EventEmitter extends Stream {
-  StreamController<String> _controller;
-
-  EventEmitter() {
-    _controller = new StreamController.broadcast();
-  }
-
-  StreamSubscription listen(void onData(String line),
-      {void onError(Error error), void onDone(), bool cancelOnError}) {
-    return _controller.stream.listen(onData,
-        onError: onError, onDone: onDone, cancelOnError: cancelOnError);
-  }
-
-  void add(value) {
-    _controller.add(value);
-  }
-
-  void addError(error) {
-    _controller.addError(error);
-  }
-
-  void close() {
-    _controller.close();
-  }
-}
-
-class CompleterWrapper {
-  final Completer c;
-
-  CompleterWrapper(this.c);
-
-  Future get promise => c.future;
-
-  void resolve(v) {
-    c.complete(v);
-  }
-
-  void reject(error, stack) {
-    if (stack == null && error is Error) {
-      stack = error.stackTrace;
-    }
-    c.completeError(error, stack);
-  }
-}
diff --git a/modules/angular2/src/facade/async.ts b/modules/angular2/src/facade/async.ts
deleted file mode 100644
index cf2832973c50..000000000000
--- a/modules/angular2/src/facade/async.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/// <reference path="../../typings/es6-promise/es6-promise.d.ts" />
-/// <reference path="../../typings/rx/rx.d.ts" />
-
-import {global, isPresent} from 'angular2/src/facade/lang';
-import {List} from 'angular2/src/facade/collection';
-import * as Rx from 'rx';
-
-export var Promise = (<any>global).Promise;
-
-export interface PromiseCompleter<R> {
-  promise: Promise<R>;
-  resolve: (value?: R | Thenable<R>) => void;
-  reject: (error?: any, stackTrace?: string) => void;
-}
-
-export class PromiseWrapper {
-  static resolve(obj): Promise<any> { return Promise.resolve(obj); }
-
-  static reject(obj, _): Promise<any> { return Promise.reject(obj); }
-
-  // Note: We can't rename this method into `catch`, as this is not a valid
-  // method name in Dart.
-  static catchError<T>(promise: Promise<T>, onError: (error: any) => T | Thenable<T>): Promise<T> {
-    return promise.catch(onError);
-  }
-
-  static all(promises: List<any>): Promise<any> {
-    if (promises.length == 0) return Promise.resolve([]);
-    return Promise.all(promises);
-  }
-
-  static then<T>(promise: Promise<T>, success: (value: any) => T | Thenable<T>,
-                 rejection?: (error: any, stack?: any) => T | Thenable<T>): Promise<T> {
-    return promise.then(success, rejection);
-  }
-
-  static wrap<T>(computation: () => T): Promise<T> {
-    return new Promise((res, rej) => {
-      try {
-        res(computation());
-      } catch (e) {
-        rej(e);
-      }
-    });
-  }
-
-  static completer(): PromiseCompleter<any> {
-    var resolve;
-    var reject;
-
-    var p = new Promise(function(res, rej) {
-      resolve = res;
-      reject = rej;
-    });
-
-    return {promise: p, resolve: resolve, reject: reject};
-  }
-}
-
-export class TimerWrapper {
-  static setTimeout(fn: Function, millis: int): int { return global.setTimeout(fn, millis); }
-  static clearTimeout(id: int): void { global.clearTimeout(id); }
-
-  static setInterval(fn: Function, millis: int): int { return global.setInterval(fn, millis); }
-  static clearInterval(id: int): void { global.clearInterval(id); }
-}
-
-export class ObservableWrapper {
-  static subscribe(emitter: Observable, onNext, onThrow = null, onReturn = null): Object {
-    return emitter.observer({next: onNext, throw: onThrow, return: onReturn});
-  }
-
-  static isObservable(obs: any): boolean { return obs instanceof Observable; }
-
-  static dispose(subscription: any) { subscription.dispose(); }
-
-  static callNext(emitter: EventEmitter, value: any) { emitter.next(value); }
-
-  static callThrow(emitter: EventEmitter, error: any) { emitter.throw(error); }
-
-  static callReturn(emitter: EventEmitter) { emitter.return (null); }
-}
-
-// TODO: vsavkin change to interface
-export class Observable {
-  observer(generator: any): Object { return null; }
-}
-
-/**
- * Use Rx.Observable but provides an adapter to make it work as specified here:
- * https://github.com/jhusain/observable-spec
- *
- * Once a reference implementation of the spec is available, switch to it.
- */
-export class EventEmitter extends Observable {
-  _subject: Rx.Subject<any>;
-  _immediateScheduler;
-
-  constructor() {
-    super();
-
-    // System creates a different object for import * than Typescript es5 emit.
-    if (Rx.hasOwnProperty('default')) {
-      this._subject = new (<any>Rx).default.Rx.Subject();
-      this._immediateScheduler = (<any>Rx).default.Rx.Scheduler.immediate;
-    } else {
-      this._subject = new Rx.Subject<any>();
-      this._immediateScheduler = (<any>Rx.Scheduler).immediate;
-    }
-  }
-
-  observer(generator): Rx.IDisposable {
-    return this._subject.observeOn(this._immediateScheduler)
-        .subscribe((value) => { setTimeout(() => generator.next(value)); },
-                   (error) => generator.throw ? generator.throw(error) : null,
-                   () => generator.return ? generator.return () : null);
-  }
-
-  toRx(): Rx.Observable<any> { return this._subject; }
-
-  next(value) { this._subject.onNext(value); }
-
-  throw(error) { this._subject.onError(error); }
-
-  return (value?) { this._subject.onCompleted(); }
-}
diff --git a/modules/angular2/src/facade/browser.dart b/modules/angular2/src/facade/browser.dart
deleted file mode 100644
index 71931f9717bf..000000000000
--- a/modules/angular2/src/facade/browser.dart
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Dart version of browser APIs. This library depends on 'dart:html' and
- * therefore can only run in the browser.
- */
-library angular2.src.facade.browser;
-
-import 'dart:js' show context;
-
-export 'dart:html'
-    show
-        document,
-        location,
-        window,
-        Element,
-        Node,
-        MouseEvent,
-        KeyboardEvent,
-        Event,
-        EventTarget,
-        History,
-        Location,
-        EventListener;
-
-final _gc = context['gc'];
-
-void gc() {
-  if (_gc != null) {
-    _gc.apply(const []);
-  }
-}
diff --git a/modules/angular2/src/facade/browser.ts b/modules/angular2/src/facade/browser.ts
deleted file mode 100644
index 05e343676c58..000000000000
--- a/modules/angular2/src/facade/browser.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * JS version of browser APIs. This library can only run in the browser.
- */
-var win = window;
-
-export {win as window};
-export var document = window.document;
-export var location = window.location;
-export var gc = window['gc'] ? () => window['gc']() : () => null;
-export const Event = Event;
-export const MouseEvent = MouseEvent;
-export const KeyboardEvent = KeyboardEvent;
-export const EventTarget = EventTarget;
-export const History = History;
-export const Location = Location;
-export const EventListener = EventListener;
diff --git a/modules/angular2/src/facade/collection.dart b/modules/angular2/src/facade/collection.dart
deleted file mode 100644
index 9348664159bc..000000000000
--- a/modules/angular2/src/facade/collection.dart
+++ /dev/null
@@ -1,210 +0,0 @@
-library facade.collection;
-
-import 'dart:collection' show IterableBase, Iterator;
-import 'dart:convert' show JsonEncoder;
-export 'dart:core' show Map, List, Set;
-import 'dart:math' show max, min;
-
-var jsonEncoder = new JsonEncoder();
-
-class MapIterator extends Iterator<List> {
-  final Iterator _iterator;
-  final Map _map;
-
-  MapIterator(Map map)
-      : _map = map,
-        _iterator = map.keys.iterator;
-
-  bool moveNext() => _iterator.moveNext();
-
-  List get current {
-    return _iterator.current != null
-        ? [_iterator.current, _map[_iterator.current]]
-        : null;
-  }
-}
-
-class IterableMap extends IterableBase<List> {
-  final Map _map;
-
-  IterableMap(Map map) : _map = map;
-
-  Iterator<List> get iterator => new MapIterator(_map);
-}
-
-class MapWrapper {
-  static Map clone(Map m) => new Map.from(m);
-  static Map createFromStringMap(Map m) => m;
-  static Map createFromPairs(List pairs) => pairs.fold({}, (m, p) {
-    m[p[0]] = p[1];
-    return m;
-  });
-  static forEach(Map m, fn(v, k)) {
-    m.forEach((k, v) => fn(v, k));
-  }
-  static int size(Map m) => m.length;
-  static void delete(Map m, k) {
-    m.remove(k);
-  }
-  static void clearValues(Map m) {
-    for (var k in m.keys) {
-      m[k] = null;
-    }
-  }
-  static Iterable iterable(Map m) => new IterableMap(m);
-  static List keys(Map m) => m.keys.toList();
-  static List values(Map m) => m.values.toList();
-}
-
-class StringMapWrapper {
-  static Map create() => {};
-  static bool contains(Map map, key) => map.containsKey(key);
-  static get(Map map, key) => map[key];
-  static void set(Map map, key, value) {
-    map[key] = value;
-  }
-  static void delete(Map m, k) {
-    m.remove(k);
-  }
-  static void forEach(Map m, fn(v, k)) {
-    m.forEach((k, v) => fn(v, k));
-  }
-  static Map merge(Map a, Map b) {
-    var m = new Map.from(a);
-    if (b != null) {
-      b.forEach((k, v) => m[k] = v);
-    }
-    return m;
-  }
-  static List<String> keys(Map<String, dynamic> a) {
-    return a.keys.toList();
-  }
-  static bool isEmpty(Map m) => m.isEmpty;
-  static bool equals(Map m1, Map m2) {
-    if (m1.length != m2.length) {
-      return false;
-    }
-    for (var key in m1.keys) {
-      if (m1[key] != m2[key]) {
-        return false;
-      }
-    }
-    return true;
-  }
-}
-
-typedef bool Predicate<T>(T item);
-
-class ListWrapper {
-  static List clone(Iterable l) => new List.from(l);
-  static List createFixedSize(int size) => new List(size);
-  static List createGrowableSize(int size) =>
-      new List.generate(size, (_) => null, growable: true);
-  static get(List m, int k) => m[k];
-  static void set(List m, int k, v) {
-    m[k] = v;
-  }
-  static bool contains(List m, k) => m.contains(k);
-  static List map(list, fn(item)) => list.map(fn).toList();
-  static List filter(List list, bool fn(item)) => list.where(fn).toList();
-  static int indexOf(List list, value, [int startIndex = 0]) =>
-      list.indexOf(value, startIndex);
-  static int lastIndexOf(List list, value, [int startIndex = null]) =>
-      list.lastIndexOf(value, startIndex == null ? list.length : startIndex);
-  static find(List list, bool fn(item)) =>
-      list.firstWhere(fn, orElse: () => null);
-  static bool any(List list, bool fn(item)) => list.any(fn);
-  static void forEach(Iterable list, fn(item)) {
-    list.forEach(fn);
-  }
-  static reduce(List list, fn(a, b), init) {
-    return list.fold(init, fn);
-  }
-  static first(List list) => list.isEmpty ? null : list.first;
-  static last(List list) => list.isEmpty ? null : list.last;
-  static List reversed(List list) => list.reversed.toList();
-  static List concat(List a, List b) {
-    return new List()
-      ..length = a.length + b.length
-      ..setRange(0, a.length, a)
-      ..setRange(a.length, a.length + b.length, b);
-  }
-  static void insert(List l, int index, value) {
-    l.insert(index, value);
-  }
-  static removeAt(List l, int index) => l.removeAt(index);
-  static void removeAll(List list, List items) {
-    for (var i = 0; i < items.length; ++i) {
-      list.remove(items[i]);
-    }
-  }
-  static removeLast(List list) => list.removeLast();
-  static bool remove(List list, item) => list.remove(item);
-  static void clear(List l) {
-    l.clear();
-  }
-  static String join(List l, String s) => l.join(s);
-  static bool isEmpty(Iterable list) => list.isEmpty;
-  static void fill(List l, value, [int start = 0, int end]) {
-    l.fillRange(_startOffset(l, start), _endOffset(l, end), value);
-  }
-  static bool equals(List a, List b) {
-    if (a.length != b.length) return false;
-    for (var i = 0; i < a.length; ++i) {
-      if (a[i] != b[i]) return false;
-    }
-    return true;
-  }
-  static List slice(List l, [int from = 0, int to]) {
-    return l.sublist(_startOffset(l, from), _endOffset(l, to));
-  }
-  static List splice(List l, int from, int length) {
-    from = _startOffset(l, from);
-    var to = from + length;
-    var sub = l.sublist(from, to);
-    l.removeRange(from, to);
-    return sub;
-  }
-  static void sort(List l, [compareFn(a, b) = null]) {
-    if (compareFn == null) {
-      l.sort();
-    } else {
-      l.sort(compareFn);
-    }
-  }
-
-  static String toJSON(List l) {
-    return jsonEncoder.convert(l);
-  }
-
-  // JS splice, slice, fill functions can take start < 0 which indicates a position relative to
-  // the end of the list
-  static int _startOffset(List l, int start) {
-    int len = l.length;
-    return start = start < 0 ? max(len + start, 0) : min(start, len);
-  }
-
-  // JS splice, slice, fill functions can take end < 0 which indicates a position relative to
-  // the end of the list
-  static int _endOffset(List l, int end) {
-    int len = l.length;
-    if (end == null) return len;
-    return end < 0 ? max(len + end, 0) : min(end, len);
-  }
-}
-
-bool isListLikeIterable(obj) => obj is Iterable;
-
-List iterableToList(Iterable ii) => ii.toList();
-
-void iterateListLike(iter, fn(item)) {
-  assert(iter is Iterable);
-  for (var item in iter) {
-    fn(item);
-  }
-}
-
-class SetWrapper {
-  static Set createFromList(List l) => new Set.from(l);
-  static bool has(Set s, key) => s.contains(key);
-}
diff --git a/modules/angular2/src/facade/collection.ts b/modules/angular2/src/facade/collection.ts
deleted file mode 100644
index 891f1886ece0..000000000000
--- a/modules/angular2/src/facade/collection.ts
+++ /dev/null
@@ -1,293 +0,0 @@
-import {isJsObject, global, isPresent, isArray} from 'angular2/src/facade/lang';
-
-export var List = global.Array;
-export var Map = global.Map;
-export var Set = global.Set;
-export var StringMap = global.Object;
-
-// Safari and Internet Explorer do not support the iterable parameter to the
-// Map constructor.  We work around that by manually adding the items.
-var createMapFromPairs: {(pairs: List<any>): Map<any, any>} = (function() {
-  try {
-    if (new Map([1, 2]).size === 2) {
-      return function createMapFromPairs(pairs: List<any>): Map<any, any> {
-        return new Map(pairs);
-      };
-    }
-  } catch (e) {
-  }
-  return function createMapAndPopulateFromPairs(pairs: List<any>): Map<any, any> {
-    var map = new Map();
-    for (var i = 0; i < pairs.length; i++) {
-      var pair = pairs[i];
-      map.set(pair[0], pair[1]);
-    }
-    return map;
-  }
-})();
-var createMapFromMap: {(m: Map<any, any>): Map<any, any>} = (function() {
-  try {
-    if (new Map(new Map())) {
-      return function createMapFromMap(m: Map<any, any>): Map<any, any> { return new Map(m); };
-    }
-  } catch (e) {
-  }
-  return function createMapAndPopulateFromMap(m: Map<any, any>): Map<any, any> {
-    var map = new Map();
-    m.forEach((v, k) => { map.set(k, v); });
-    return map;
-  }
-})();
-var _clearValues: {(m: Map<any, any>)} = (function() {
-  if ((<any>(new Map()).keys()).next) {
-    return function _clearValues(m: Map<any, any>) {
-      var keyIterator = m.keys();
-      var k;
-      while (!((k = (<any>keyIterator).next()).done)) {
-        m.set(k.value, null);
-      }
-    };
-  } else {
-    return function _clearValuesWithForeEach(m: Map<any, any>) {
-      m.forEach((v, k) => { m.set(k, null); });
-    }
-  }
-})();
-
-export class MapWrapper {
-  static clone<K, V>(m: Map<K, V>): Map<K, V> { return createMapFromMap(m); }
-  static createFromStringMap(stringMap): Map<string, any> {
-    var result = new Map();
-    for (var prop in stringMap) {
-      result.set(prop, stringMap[prop]);
-    }
-    return result;
-  }
-  static createFromPairs(pairs: List<any>): Map<any, any> { return createMapFromPairs(pairs); }
-  static forEach<K, V>(m: Map<K, V>, fn: /*(V, K) => void*/ Function) { m.forEach(<any>fn); }
-  static size(m: Map<any, any>): number { return m.size; }
-  static delete<K>(m: Map<K, any>, k: K) { m.delete(k); }
-  static clearValues(m: Map<any, any>) { _clearValues(m); }
-  static iterable<T>(m: T): T { return m; }
-  static keys<K>(m: Map<K, any>): List<K> { return (<any>Array).from(m.keys()); }
-  static values<V>(m: Map<any, V>): List<V> { return (<any>Array).from(m.values()); }
-}
-
-/**
- * Wraps Javascript Objects
- */
-export class StringMapWrapper {
-  static create(): StringMap<any, any> {
-    // Note: We are not using Object.create(null) here due to
-    // performance!
-    // http://jsperf.com/ng2-object-create-null
-    return {};
-  }
-  static contains(map: StringMap<string, any>, key: string): boolean {
-    return map.hasOwnProperty(key);
-  }
-  static get<V>(map: StringMap<string, V>, key: string): V {
-    return map.hasOwnProperty(key) ? map[key] : undefined;
-  }
-  static set<V>(map: StringMap<string, V>, key: string, value: V) { map[key] = value; }
-  static keys(map: StringMap<string, any>): List<string> { return Object.keys(map); }
-  static isEmpty(map: StringMap<string, any>): boolean {
-    for (var prop in map) {
-      return false;
-    }
-    return true;
-  }
-  static delete (map: StringMap<string, any>, key: string) { delete map[key]; }
-  static forEach<K, V>(map: StringMap<string, V>, callback: /*(V, K) => void*/ Function) {
-    for (var prop in map) {
-      if (map.hasOwnProperty(prop)) {
-        callback(map[prop], prop);
-      }
-    }
-  }
-
-  static merge<V>(m1: StringMap<string, V>, m2: StringMap<string, V>): StringMap<string, V> {
-    var m = {};
-
-    for (var attr in m1) {
-      if (m1.hasOwnProperty(attr)) {
-        m[attr] = m1[attr];
-      }
-    }
-
-    for (var attr in m2) {
-      if (m2.hasOwnProperty(attr)) {
-        m[attr] = m2[attr];
-      }
-    }
-
-    return m;
-  }
-
-  static equals<V>(m1: StringMap<string, V>, m2: StringMap<string, V>): boolean {
-    var k1 = Object.keys(m1);
-    var k2 = Object.keys(m2);
-    if (k1.length != k2.length) {
-      return false;
-    }
-    var key;
-    for (var i = 0; i < k1.length; i++) {
-      key = k1[i];
-      if (m1[key] !== m2[key]) {
-        return false;
-      }
-    }
-    return true;
-  }
-}
-
-export interface Predicate<T> { (value: T, index?: number, array?: T[]): boolean; }
-
-export class ListWrapper {
-  // JS has no way to express a staticly fixed size list, but dart does so we
-  // keep both methods.
-  static createFixedSize(size): List<any> { return new List(size); }
-  static createGrowableSize(size): List<any> { return new List(size); }
-  static get(m, k): any { return m[k]; }
-  static set(m, k, v) { m[k] = v; }
-  static clone<T>(array: List<T>): T[] { return array.slice(0); }
-  static map(array, fn): any { return array.map(fn); }
-  static forEach(array: List<any>, fn: Function) {
-    for (var i = 0; i < array.length; i++) {
-      fn(array[i]);
-    }
-  }
-  static first<T>(array: List<T>): T {
-    if (!array) return null;
-    return array[0];
-  }
-  static last<T>(array: List<T>): T {
-    if (!array || array.length == 0) return null;
-    return array[array.length - 1];
-  }
-  static find<T>(list: List<T>, pred: Predicate<T>): T {
-    for (var i = 0; i < list.length; ++i) {
-      if (pred(list[i])) return list[i];
-    }
-    return null;
-  }
-  static indexOf(array: List<any>, value, startIndex = 0): number {
-    return array.indexOf(value, startIndex);
-  }
-  static reduce<T, E>(list: List<T>,
-                      fn: (accumValue: E, currentValue: T, currentIndex: number, array: T[]) => E,
-                      init: E): E {
-    return list.reduce(fn, init);
-  }
-  static filter<T>(array: List<T>, pred: Predicate<T>): T[] { return array.filter(pred); }
-  static any(list: List<any>, pred: Function): boolean {
-    for (var i = 0; i < list.length; ++i) {
-      if (pred(list[i])) return true;
-    }
-    return false;
-  }
-  static contains(list: List<any>, el): boolean { return list.indexOf(el) !== -1; }
-  static reversed<T>(array: List<T>): T[] {
-    var a = ListWrapper.clone(array);
-    return a.reverse();
-  }
-  static concat(a, b): List<any> { return a.concat(b); }
-  static insert(list, index: int, value) { list.splice(index, 0, value); }
-  static removeAt<T>(list: List<T>, index: int): T {
-    var res = list[index];
-    list.splice(index, 1);
-    return res;
-  }
-  static removeAll(list, items) {
-    for (var i = 0; i < items.length; ++i) {
-      var index = list.indexOf(items[i]);
-      list.splice(index, 1);
-    }
-  }
-  static removeLast<T>(list: List<T>): T { return list.pop(); }
-  static remove(list, el): boolean {
-    var index = list.indexOf(el);
-    if (index > -1) {
-      list.splice(index, 1);
-      return true;
-    }
-    return false;
-  }
-  static clear(list) { list.splice(0, list.length); }
-  static join(list, s: string): string { return list.join(s); }
-  static isEmpty(list): boolean { return list.length == 0; }
-  static fill(list: List<any>, value, start: int = 0, end: int = null) {
-    list.fill(value, start, end === null ? undefined : end);
-  }
-  static equals(a: List<any>, b: List<any>): boolean {
-    if (a.length != b.length) return false;
-    for (var i = 0; i < a.length; ++i) {
-      if (a[i] !== b[i]) return false;
-    }
-    return true;
-  }
-  static slice<T>(l: List<T>, from: int = 0, to: int = null): List<T> {
-    return l.slice(from, to === null ? undefined : to);
-  }
-  static splice<T>(l: List<T>, from: int, length: int): List<T> { return l.splice(from, length); }
-  static sort<T>(l: List<T>, compareFn?: (a: T, b: T) => number) {
-    if (isPresent(compareFn)) {
-      l.sort(compareFn);
-    } else {
-      l.sort();
-    }
-  }
-  static toString<T>(l: List<T>): string { return l.toString(); }
-  static toJSON<T>(l: List<T>): string { return JSON.stringify(l); }
-}
-
-export function isListLikeIterable(obj): boolean {
-  if (!isJsObject(obj)) return false;
-  return isArray(obj) ||
-         (!(obj instanceof Map) &&  // JS Map are iterables but return entries as [k, v]
-          Symbol.iterator in obj);  // JS Iterable have a Symbol.iterator prop
-}
-
-export function iterateListLike(obj, fn: Function) {
-  if (isArray(obj)) {
-    for (var i = 0; i < obj.length; i++) {
-      fn(obj[i]);
-    }
-  } else {
-    var iterator = obj[Symbol.iterator]();
-    var item;
-    while (!((item = iterator.next()).done)) {
-      fn(item.value);
-    }
-  }
-}
-export function iterableToList<T>(ii: any): List<T> {
-  var res = [];
-  for (var i of ii) {
-    res.push(i);
-  }
-  return res;
-}
-
-// Safari and Internet Explorer do not support the iterable parameter to the
-// Set constructor.  We work around that by manually adding the items.
-var createSetFromList: {(lst: List<any>): Set<any>} = (function() {
-  var test = new Set([1, 2, 3]);
-  if (test.size === 3) {
-    return function createSetFromList(lst: List<any>): Set<any> { return new Set(lst); };
-  } else {
-    return function createSetAndPopulateFromList(lst: List<any>): Set<any> {
-      var res = new Set(lst);
-      if (res.size !== lst.length) {
-        for (var i = 0; i < lst.length; i++) {
-          res.add(lst[i]);
-        }
-      }
-      return res;
-    };
-  }
-})();
-export class SetWrapper {
-  static createFromList<T>(lst: List<T>): Set<T> { return createSetFromList(lst); }
-  static has<T>(s: Set<T>, key: T): boolean { return s.has(key); }
-}
diff --git a/modules/angular2/src/facade/lang.dart b/modules/angular2/src/facade/lang.dart
deleted file mode 100644
index 5e244e57ee72..000000000000
--- a/modules/angular2/src/facade/lang.dart
+++ /dev/null
@@ -1,249 +0,0 @@
-library angular.core.facade.lang;
-
-export 'dart:core' show Type, RegExp, print, DateTime;
-import 'dart:math' as math;
-import 'dart:convert' as convert;
-import 'dart:async' show Future;
-
-class Math {
-  static final _random = new math.Random();
-  static int floor(num n) => n.floor();
-  static double random() => _random.nextDouble();
-}
-
-int ENUM_INDEX(value) => value.index;
-
-class CONST {
-  const CONST();
-}
-class ABSTRACT {
-  const ABSTRACT();
-}
-class IMPLEMENTS {
-  final interfaceClass;
-  const IMPLEMENTS(this.interfaceClass);
-}
-
-bool isPresent(obj) => obj != null;
-bool isBlank(obj) => obj == null;
-bool isString(obj) => obj is String;
-bool isFunction(obj) => obj is Function;
-bool isType(obj) => obj is Type;
-bool isStringMap(obj) => obj is Map;
-bool isArray(obj) => obj is List;
-bool isPromise(obj) => obj is Future;
-
-String stringify(obj) => obj.toString();
-
-class StringWrapper {
-  static String fromCharCode(int code) {
-    return new String.fromCharCode(code);
-  }
-
-  static int charCodeAt(String s, int index) {
-    return s.codeUnitAt(index);
-  }
-
-  static List<String> split(String s, RegExp regExp) {
-    var parts = <String>[];
-    var lastEnd = 0;
-    regExp.allMatches(s).forEach((match) {
-      parts.add(s.substring(lastEnd, match.start));
-      lastEnd = match.end;
-      for (var i = 0; i < match.groupCount; i++) {
-        parts.add(match.group(i + 1));
-      }
-    });
-    parts.add(s.substring(lastEnd));
-    return parts;
-  }
-
-  static bool equals(String s, String s2) {
-    return s == s2;
-  }
-
-  static String replace(String s, Pattern from, String replace) {
-    return s.replaceFirst(from, replace);
-  }
-
-  static String replaceAll(String s, RegExp from, String replace) {
-    return s.replaceAll(from, replace);
-  }
-
-  static String toUpperCase(String s) {
-    return s.toUpperCase();
-  }
-
-  static String toLowerCase(String s) {
-    return s.toLowerCase();
-  }
-
-  static startsWith(String s, String start) {
-    return s.startsWith(start);
-  }
-
-  static String substring(String s, int start, [int end]) {
-    return s.substring(start, end);
-  }
-
-  static String replaceAllMapped(String s, RegExp from, Function cb) {
-    return s.replaceAllMapped(from, cb);
-  }
-
-  static bool contains(String s, String substr) {
-    return s.contains(substr);
-  }
-}
-
-class StringJoiner {
-  final List<String> _parts = <String>[];
-
-  void add(String part) {
-    _parts.add(part);
-  }
-
-  String toString() => _parts.join("");
-}
-
-class NumberWrapper {
-  static String toFixed(num n, int fractionDigits) {
-    return n.toStringAsFixed(fractionDigits);
-  }
-
-  static bool equal(num a, num b) {
-    return a == b;
-  }
-
-  static int parseIntAutoRadix(String text) {
-    return int.parse(text);
-  }
-
-  static int parseInt(String text, int radix) {
-    return int.parse(text, radix: radix);
-  }
-
-  static double parseFloat(String text) {
-    return double.parse(text);
-  }
-
-  static double get NaN => double.NAN;
-
-  static bool isNaN(num value) => value.isNaN;
-
-  static bool isInteger(value) => value is int;
-}
-
-class RegExpWrapper {
-  static RegExp create(regExpStr, [String flags = '']) {
-    bool multiLine = flags.contains('m');
-    bool caseSensitive = !flags.contains('i');
-    return new RegExp(regExpStr,
-        multiLine: multiLine, caseSensitive: caseSensitive);
-  }
-  static Match firstMatch(RegExp regExp, String input) {
-    return regExp.firstMatch(input);
-  }
-  static bool test(RegExp regExp, String input) {
-    return regExp.hasMatch(input);
-  }
-  static Iterator<Match> matcher(RegExp regExp, String input) {
-    return regExp.allMatches(input).iterator;
-  }
-}
-
-class RegExpMatcherWrapper {
-  static _JSLikeMatch next(Iterator<Match> matcher) {
-    if (matcher.moveNext()) {
-      return new _JSLikeMatch(matcher.current);
-    }
-    return null;
-  }
-}
-
-class _JSLikeMatch {
-  Match _m;
-
-  _JSLikeMatch(this._m);
-
-  String operator [](index) => _m[index];
-  int get index => _m.start;
-  int get length => _m.groupCount + 1;
-}
-
-class FunctionWrapper {
-  static apply(Function fn, posArgs) {
-    return Function.apply(fn, posArgs);
-  }
-}
-
-class BaseException extends Error {
-  final String message;
-  final originalException;
-  final originalStack;
-
-  BaseException([this.message, this.originalException, this.originalStack]);
-
-  String toString() {
-    return this.message;
-  }
-}
-
-const _NAN_KEY = const Object();
-
-// Dart can have identical(str1, str2) == false while str1 == str2
-bool looseIdentical(a, b) =>
-    a is String && b is String ? a == b : identical(a, b);
-
-// Dart compare map keys by equality and we can have NaN != NaN
-dynamic getMapKey(value) {
-  if (value is! num) return value;
-  return value.isNaN ? _NAN_KEY : value;
-}
-
-dynamic normalizeBlank(obj) {
-  return isBlank(obj) ? null : obj;
-}
-
-bool normalizeBool(bool obj) {
-  return isBlank(obj) ? false : obj;
-}
-
-bool isJsObject(o) {
-  return false;
-}
-
-bool assertionsEnabled() {
-  try {
-    assert(false);
-    return false;
-  } catch (e) {
-    return true;
-  }
-}
-
-// Can't be all uppercase as our transpiler would think it is a special directive...
-class Json {
-  static parse(String s) => convert.JSON.decode(s);
-  static String stringify(data) {
-    var encoder = new convert.JsonEncoder.withIndent("  ");
-    return encoder.convert(data);
-  }
-}
-
-class DateWrapper {
-  static DateTime fromMillis(int ms) {
-    return new DateTime.fromMillisecondsSinceEpoch(ms);
-  }
-  static int toMillis(DateTime date) {
-    return date.millisecondsSinceEpoch;
-  }
-  static DateTime now() {
-    return new DateTime.now();
-  }
-  static toJson(DateTime date) {
-    return date.toUtc().toIso8601String();
-  }
-}
-
-// needed to match the exports from lang.js
-var global = null;
diff --git a/modules/angular2/src/facade/lang.ts b/modules/angular2/src/facade/lang.ts
deleted file mode 100644
index 38ecc369105a..000000000000
--- a/modules/angular2/src/facade/lang.ts
+++ /dev/null
@@ -1,285 +0,0 @@
-/// <reference path="../../globals.d.ts" />
-var _global: BrowserNodeGlobal = <any>(typeof window === 'undefined' ? global : window);
-export {_global as global};
-
-export var Type = Function;
-export type Type = new (...args: any[]) => any;
-
-export class BaseException extends Error {
-  stack;
-  constructor(public message?: string, public originalException?, public originalStack?) {
-    super(message);
-    this.stack = (<any>new Error(message)).stack;
-  }
-
-  toString(): string { return this.message; }
-}
-
-export var Math = _global.Math;
-export var Date = _global.Date;
-
-var assertionsEnabled_ = typeof _global['assert'] !== 'undefined';
-export function assertionsEnabled(): boolean {
-  return assertionsEnabled_;
-}
-
-// TODO: remove calls to assert in production environment
-// Note: Can't just export this and import in in other files
-// as `assert` is a reserved keyword in Dart
-_global.assert = function assert(condition) {
-  if (assertionsEnabled_) {
-    _global['assert'].call(condition);
-  }
-};
-
-export function ENUM_INDEX(value: int): int {
-  return value;
-}
-
-// This function is needed only to properly support Dart's const expressions
-// see https://github.com/angular/ts2dart/pull/151 for more info
-export function CONST_EXPR<T>(expr: T): T {
-  return expr;
-}
-
-export function CONST():<T>(target: T) => T {
-  return (target) => target;
-}
-
-export function ABSTRACT():<T>(target: T) => T {
-  return (t) => t;
-}
-
-// Note: This is only a marker annotation needed for ts2dart.
-// This is written so that is can be used as a Traceur annotation
-// or a Typescript decorator.
-export function IMPLEMENTS(_):<T>(target: T) => T {
-  return (t) => t;
-}
-
-export function isPresent(obj): boolean {
-  return obj !== undefined && obj !== null;
-}
-
-export function isBlank(obj): boolean {
-  return obj === undefined || obj === null;
-}
-
-export function isString(obj): boolean {
-  return typeof obj === "string";
-}
-
-export function isFunction(obj): boolean {
-  return typeof obj === "function";
-}
-
-export function isType(obj): boolean {
-  return isFunction(obj);
-}
-
-export function isStringMap(obj): boolean {
-  return typeof obj === 'object' && obj !== null;
-}
-
-export function isPromise(obj): boolean {
-  return obj instanceof (<any>_global).Promise;
-}
-
-export function isArray(obj): boolean {
-  return Array.isArray(obj);
-}
-
-export function stringify(token): string {
-  if (typeof token === 'string') {
-    return token;
-  }
-
-  if (token === undefined || token === null) {
-    return '' + token;
-  }
-
-  if (token.name) {
-    return token.name;
-  }
-
-  return token.toString();
-}
-
-export class StringWrapper {
-  static fromCharCode(code: int): string { return String.fromCharCode(code); }
-
-  static charCodeAt(s: string, index: int): number { return s.charCodeAt(index); }
-
-  static split(s: string, regExp): List<string> { return s.split(regExp); }
-
-  static equals(s: string, s2: string): boolean { return s === s2; }
-
-  static replace(s: string, from: string, replace: string): string {
-    return s.replace(from, replace);
-  }
-
-  static replaceAll(s: string, from: RegExp, replace: string): string {
-    return s.replace(from, replace);
-  }
-
-  static toUpperCase(s: string): string { return s.toUpperCase(); }
-
-  static toLowerCase(s: string): string { return s.toLowerCase(); }
-
-  static startsWith(s: string, start: string): boolean { return s.startsWith(start); }
-
-  static substring(s: string, start: int, end: int = null): string {
-    return s.substring(start, end === null ? undefined : end);
-  }
-
-  static replaceAllMapped(s: string, from: RegExp, cb: Function): string {
-    return s.replace(from, function(...matches) {
-      // Remove offset & string from the result array
-      matches.splice(-2, 2);
-      // The callback receives match, p1, ..., pn
-      return cb(matches);
-    });
-  }
-
-  static contains(s: string, substr: string): boolean { return s.indexOf(substr) != -1; }
-}
-
-export class StringJoiner {
-  constructor(public parts = []) {}
-
-  add(part: string): void { this.parts.push(part); }
-
-  toString(): string { return this.parts.join(""); }
-}
-
-export class NumberParseError extends BaseException {
-  name: string;
-
-  constructor(public message: string) { super(); }
-
-  toString(): string { return this.message; }
-}
-
-
-export class NumberWrapper {
-  static toFixed(n: number, fractionDigits: int): string { return n.toFixed(fractionDigits); }
-
-  static equal(a, b): boolean { return a === b; }
-
-  static parseIntAutoRadix(text: string): int {
-    var result: int = parseInt(text);
-    if (isNaN(result)) {
-      throw new NumberParseError("Invalid integer literal when parsing " + text);
-    }
-    return result;
-  }
-
-  static parseInt(text: string, radix: int): int {
-    if (radix == 10) {
-      if (/^(\-|\+)?[0-9]+$/.test(text)) {
-        return parseInt(text, radix);
-      }
-    } else if (radix == 16) {
-      if (/^(\-|\+)?[0-9ABCDEFabcdef]+$/.test(text)) {
-        return parseInt(text, radix);
-      }
-    } else {
-      var result: int = parseInt(text, radix);
-      if (!isNaN(result)) {
-        return result;
-      }
-    }
-    throw new NumberParseError("Invalid integer literal when parsing " + text + " in base " +
-                               radix);
-  }
-
-  // TODO: NaN is a valid literal but is returned by parseFloat to indicate an error.
-  static parseFloat(text: string): number { return parseFloat(text); }
-
-  static get NaN(): number { return NaN; }
-
-  static isNaN(value): boolean { return isNaN(value); }
-
-  static isInteger(value): boolean { return Number.isInteger(value); }
-}
-
-export var RegExp = _global.RegExp;
-
-export class RegExpWrapper {
-  static create(regExpStr, flags: string = ''): RegExp {
-    flags = flags.replace(/g/g, '');
-    return new _global.RegExp(regExpStr, flags + 'g');
-  }
-  static firstMatch(regExp: RegExp, input: string): List<string> {
-    // Reset multimatch regex state
-    regExp.lastIndex = 0;
-    return regExp.exec(input);
-  }
-  static test(regExp: RegExp, input: string): boolean { return regExp.test(input); }
-  static matcher(regExp, input): {
-    re: RegExp;
-    input: string
-  }
-  {
-    // Reset regex state for the case
-    // someone did not loop over all matches
-    // last time.
-    regExp.lastIndex = 0;
-    return {re: regExp, input: input};
-  }
-}
-
-export class RegExpMatcherWrapper {
-  static next(matcher): string { return matcher.re.exec(matcher.input); }
-}
-
-export class FunctionWrapper {
-  static apply(fn: Function, posArgs): any { return fn.apply(null, posArgs); }
-}
-
-// JS has NaN !== NaN
-export function looseIdentical(a, b): boolean {
-  return a === b || typeof a === "number" && typeof b === "number" && isNaN(a) && isNaN(b);
-}
-
-// JS considers NaN is the same as NaN for map Key (while NaN !== NaN otherwise)
-// see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
-export function getMapKey(value): any {
-  return value;
-}
-
-export function normalizeBlank(obj): any {
-  return isBlank(obj) ? null : obj;
-}
-
-export function normalizeBool(obj: boolean): boolean {
-  return isBlank(obj) ? false : obj;
-}
-
-export function isJsObject(o): boolean {
-  return o !== null && (typeof o === "function" || typeof o === "object");
-}
-
-export function print(obj) {
-  if (obj instanceof Error) {
-    console.log(obj.stack);
-  } else {
-    console.log(obj);
-  }
-}
-
-// Can't be all uppercase as our transpiler would think it is a special directive...
-export class Json {
-  static parse(s: string): Object { return _global.JSON.parse(s); }
-  static stringify(data): string {
-    // Dart doesn't take 3 arguments
-    return _global.JSON.stringify(data, null, 2);
-  }
-}
-
-export class DateWrapper {
-  static fromMillis(ms): Date { return new Date(ms); }
-  static toMillis(date: Date): number { return date.getTime(); }
-  static now(): Date { return new Date(); }
-  static toJson(date): string { return date.toJSON(); }
-}
diff --git a/modules/angular2/src/facade/math.dart b/modules/angular2/src/facade/math.dart
deleted file mode 100644
index 8e5cfa9d437f..000000000000
--- a/modules/angular2/src/facade/math.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library angular.core.facade.math;
-
-import 'dart:core' show double, num;
-import 'dart:math' as math;
-
-const NaN = double.NAN;
-
-class Math {
-  static num pow(num x, num exponent) {
-    return math.pow(x, exponent);
-  }
-
-  static num max(num a, num b) => math.max(a, b);
-
-  static num min(num a, num b) => math.min(a, b);
-
-  static num floor(num a) => a.floor();
-
-  static num ceil(num a) => a.ceil();
-
-  static num sqrt(num x) => math.sqrt(x);
-}
diff --git a/modules/angular2/src/facade/math.ts b/modules/angular2/src/facade/math.ts
deleted file mode 100644
index 2a6a9eab8e3e..000000000000
--- a/modules/angular2/src/facade/math.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import {global} from 'angular2/src/facade/lang';
-
-export var Math = global.Math;
-export var NaN = typeof NaN;
diff --git a/modules/angular2/src/forms/directives.ts b/modules/angular2/src/forms/directives.ts
deleted file mode 100644
index b32bd9da69f8..000000000000
--- a/modules/angular2/src/forms/directives.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {Type, CONST_EXPR} from 'angular2/src/facade/lang';
-import {NgControlName} from './directives/ng_control_name';
-import {NgFormControl} from './directives/ng_form_control';
-import {NgModel} from './directives/ng_model';
-import {NgControlGroup} from './directives/ng_control_group';
-import {NgFormModel} from './directives/ng_form_model';
-import {NgForm} from './directives/ng_form';
-import {DefaultValueAccessor} from './directives/default_value_accessor';
-import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
-import {
-  SelectControlValueAccessor,
-  NgSelectOption
-} from './directives/select_control_value_accessor';
-import {NgRequiredValidator} from './directives/validators';
-
-export {NgControlName} from './directives/ng_control_name';
-export {NgFormControl} from './directives/ng_form_control';
-export {NgModel} from './directives/ng_model';
-export {NgControl} from './directives/ng_control';
-export {NgControlGroup} from './directives/ng_control_group';
-export {NgFormModel} from './directives/ng_form_model';
-export {NgForm} from './directives/ng_form';
-export {ControlValueAccessor} from './directives/control_value_accessor';
-export {DefaultValueAccessor} from './directives/default_value_accessor';
-export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
-export {SelectControlValueAccessor} from './directives/select_control_value_accessor';
-export {NgValidator, NgRequiredValidator} from './directives/validators';
-
-/**
- *
- * A list of all the form directives used as part of a `@View` annotation.
- *
- *  This is a shorthand for importing them each individually.
- *
- * @exportedAs angular2/forms
- */
-export const formDirectives: List<Type> = CONST_EXPR([
-  NgControlName,
-  NgControlGroup,
-
-  NgFormControl,
-  NgModel,
-  NgFormModel,
-  NgForm,
-
-  NgSelectOption,
-  DefaultValueAccessor,
-  CheckboxControlValueAccessor,
-  SelectControlValueAccessor,
-
-  NgRequiredValidator
-]);
\ No newline at end of file
diff --git a/modules/angular2/src/forms/directives/checkbox_value_accessor.ts b/modules/angular2/src/forms/directives/checkbox_value_accessor.ts
deleted file mode 100644
index 871730bb9edf..000000000000
--- a/modules/angular2/src/forms/directives/checkbox_value_accessor.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {Directive, Renderer, ElementRef} from 'angular2/angular2';
-import {NgControl} from './ng_control';
-import {ControlValueAccessor} from './control_value_accessor';
-import {isPresent} from 'angular2/src/facade/lang';
-import {setProperty} from './shared';
-
-/**
- * The accessor for writing a value and listening to changes on a checkbox input element.
- *
- *  # Example
- *  ```
- *  <input type="checkbox" [ng-control]="rememberLogin">
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector:
-      'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
-  host: {
-    '(change)': 'onChange($event.target.checked)',
-    '(blur)': 'onTouched()',
-    '[checked]': 'checked',
-    '[class.ng-untouched]': 'ngClassUntouched',
-    '[class.ng-touched]': 'ngClassTouched',
-    '[class.ng-pristine]': 'ngClassPristine',
-    '[class.ng-dirty]': 'ngClassDirty',
-    '[class.ng-valid]': 'ngClassValid',
-    '[class.ng-invalid]': 'ngClassInvalid'
-  }
-})
-export class CheckboxControlValueAccessor implements ControlValueAccessor {
-  checked: boolean;
-  onChange = (_) => {};
-  onTouched = () => {};
-
-  constructor(private cd: NgControl, private renderer: Renderer, private elementRef: ElementRef) {
-    cd.valueAccessor = this;
-  }
-
-  writeValue(value) {
-    // both this.checked and setProperty are required at the moment
-    // remove when a proper imperative API is provided
-    this.checked = value;
-    setProperty(this.renderer, this.elementRef, "checked", value);
-  }
-
-  get ngClassUntouched(): boolean {
-    return isPresent(this.cd.control) ? this.cd.control.untouched : false;
-  }
-  get ngClassTouched(): boolean {
-    return isPresent(this.cd.control) ? this.cd.control.touched : false;
-  }
-  get ngClassPristine(): boolean {
-    return isPresent(this.cd.control) ? this.cd.control.pristine : false;
-  }
-  get ngClassDirty(): boolean { return isPresent(this.cd.control) ? this.cd.control.dirty : false; }
-  get ngClassValid(): boolean { return isPresent(this.cd.control) ? this.cd.control.valid : false; }
-  get ngClassInvalid(): boolean {
-    return isPresent(this.cd.control) ? !this.cd.control.valid : false;
-  }
-
-  registerOnChange(fn): void { this.onChange = fn; }
-  registerOnTouched(fn): void { this.onTouched = fn; }
-}
diff --git a/modules/angular2/src/forms/directives/control_container.ts b/modules/angular2/src/forms/directives/control_container.ts
deleted file mode 100644
index d5ff40b4ba0f..000000000000
--- a/modules/angular2/src/forms/directives/control_container.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Form} from './form_interface';
-import {List} from 'angular2/src/facade/collection';
-
-/**
- * A directive that contains a group of [NgControl].
- *
- * Only used by the forms module.
- */
-export class ControlContainer {
-  name: string;
-  get formDirective(): Form { return null; }
-  get path(): List<string> { return null; }
-}
diff --git a/modules/angular2/src/forms/directives/control_value_accessor.ts b/modules/angular2/src/forms/directives/control_value_accessor.ts
deleted file mode 100644
index df953dfc72a2..000000000000
--- a/modules/angular2/src/forms/directives/control_value_accessor.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * A bridge between a control and a native element.
- *
- * Please see {@link DefaultValueAccessor} for more information.
- */
-export interface ControlValueAccessor {
-  writeValue(obj: any): void;
-  registerOnChange(fn: any): void;
-  registerOnTouched(fn: any): void;
-}
\ No newline at end of file
diff --git a/modules/angular2/src/forms/directives/default_value_accessor.ts b/modules/angular2/src/forms/directives/default_value_accessor.ts
deleted file mode 100644
index f783d59ee55f..000000000000
--- a/modules/angular2/src/forms/directives/default_value_accessor.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import {Directive, Renderer, ElementRef} from 'angular2/angular2';
-import {NgControl} from './ng_control';
-import {ControlValueAccessor} from './control_value_accessor';
-import {isBlank, isPresent} from 'angular2/src/facade/lang';
-import {setProperty} from './shared';
-
-/**
- * The default accessor for writing a value and listening to changes that is used by the
- * {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
- *
- *  # Example
- *  ```
- *  <input type="text" [(ng-model)]="searchQuery">
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector:
-      'input:not([type=checkbox])[ng-control],textarea[ng-control],input:not([type=checkbox])[ng-form-control],textarea[ng-form-control],input:not([type=checkbox])[ng-model],textarea[ng-model]',
-  host: {
-    '(change)': 'onChange($event.target.value)',
-    '(input)': 'onChange($event.target.value)',
-    '(blur)': 'onTouched()',
-    '[value]': 'value',
-    '[class.ng-untouched]': 'ngClassUntouched',
-    '[class.ng-touched]': 'ngClassTouched',
-    '[class.ng-pristine]': 'ngClassPristine',
-    '[class.ng-dirty]': 'ngClassDirty',
-    '[class.ng-valid]': 'ngClassValid',
-    '[class.ng-invalid]': 'ngClassInvalid'
-  }
-})
-export class DefaultValueAccessor implements ControlValueAccessor {
-  value: string = null;
-
-  onChange = (_) => {};
-  onTouched = () => {};
-
-  constructor(private cd: NgControl, private renderer: Renderer, private elementRef: ElementRef) {
-    cd.valueAccessor = this;
-  }
-
-  writeValue(value) {
-    // both this.value and setProperty are required at the moment
-    // remove when a proper imperative API is provided
-    this.value = isBlank(value) ? '' : value;
-    setProperty(this.renderer, this.elementRef, 'value', this.value);
-  }
-
-  get ngClassUntouched(): boolean {
-    return isPresent(this.cd.control) ? this.cd.control.untouched : false;
-  }
-  get ngClassTouched(): boolean {
-    return isPresent(this.cd.control) ? this.cd.control.touched : false;
-  }
-  get ngClassPristine(): boolean {
-    return isPresent(this.cd.control) ? this.cd.control.pristine : false;
-  }
-  get ngClassDirty(): boolean { return isPresent(this.cd.control) ? this.cd.control.dirty : false; }
-  get ngClassValid(): boolean { return isPresent(this.cd.control) ? this.cd.control.valid : false; }
-  get ngClassInvalid(): boolean {
-    return isPresent(this.cd.control) ? !this.cd.control.valid : false;
-  }
-
-  registerOnChange(fn): void { this.onChange = fn; }
-
-  registerOnTouched(fn): void { this.onTouched = fn; }
-}
diff --git a/modules/angular2/src/forms/directives/form_interface.ts b/modules/angular2/src/forms/directives/form_interface.ts
deleted file mode 100644
index 6452d095e24f..000000000000
--- a/modules/angular2/src/forms/directives/form_interface.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {NgControl} from './ng_control';
-import {NgControlGroup} from './ng_control_group';
-import {Control} from '../model';
-
-/**
- * An interface that {@link NgFormModel} and {@link NgForm} implement.
- *
- * Only used by the forms module.
- */
-export interface Form {
-  addControl(dir: NgControl): void;
-  removeControl(dir: NgControl): void;
-  getControl(dir: NgControl): Control;
-  addControlGroup(dir: NgControlGroup): void;
-  removeControlGroup(dir: NgControlGroup): void;
-  updateModel(dir: NgControl, value: any): void;
-}
\ No newline at end of file
diff --git a/modules/angular2/src/forms/directives/ng_control.ts b/modules/angular2/src/forms/directives/ng_control.ts
deleted file mode 100644
index 9e6f405a7517..000000000000
--- a/modules/angular2/src/forms/directives/ng_control.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {ControlValueAccessor} from './control_value_accessor';
-import {Control} from '../model';
-
-/**
- * An abstract class that all control directive extend.
- *
- * It binds a {@link Control} object to a DOM element.
- *
- * @exportedAs angular2/forms
- */
-export class NgControl {
-  name: string = null;
-  valueAccessor: ControlValueAccessor = null;
-
-  get validator(): Function { return null; }
-  get path(): List<string> { return null; }
-  get control(): Control { return null; }
-
-  viewToModelUpdate(newValue: any): void {}
-}
diff --git a/modules/angular2/src/forms/directives/ng_control_group.ts b/modules/angular2/src/forms/directives/ng_control_group.ts
deleted file mode 100644
index c754902ca44c..000000000000
--- a/modules/angular2/src/forms/directives/ng_control_group.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import {Directive, onDestroy, onInit} from 'angular2/angular2';
-import {Inject, Ancestor, forwardRef, Binding} from 'angular2/di';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {CONST_EXPR} from 'angular2/src/facade/lang';
-
-import {ControlContainer} from './control_container';
-import {controlPath} from './shared';
-
-const controlGroupBinding =
-    CONST_EXPR(new Binding(ControlContainer, {toAlias: forwardRef(() => NgControlGroup)}));
-
-/**
- * Creates and binds a control group to a DOM element.
- *
- * This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
- *
- * # Example
- *
- * In this example, we create the credentials and personal control groups.
- * We can work with each group separately: check its validity, get its value, listen to its changes.
- *
- *  ```
- * @Component({selector: "signup-comp"})
- * @View({
- *      directives: [formDirectives],
- *      template: `
- *              <form #f="form" (submit)='onSignUp(f.value)'>
- *                <div ng-control-group='credentials' #credentials="form">
- *                  Login <input type='text' ng-control='login'>
- *                  Password <input type='password' ng-control='password'>
- *                </div>
- *                <div *ng-if="!credentials.valid">Credentials are invalid</div>
- *
- *                <div ng-control-group='personal'>
- *                  Name <input type='text' ng-control='name'>
- *                </div>
- *                <button type='submit'>Sign Up!</button>
- *              </form>
- *      `})
- * class SignupComp {
- *  onSignUp(value) {
- *    // value === {personal: {name: 'some name'},
- *    //  credentials: {login: 'some login', password: 'some password'}}
- *  }
- * }
- *
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector: '[ng-control-group]',
-  hostInjector: [controlGroupBinding],
-  properties: ['name: ng-control-group'],
-  lifecycle: [onInit, onDestroy],
-  exportAs: 'form'
-})
-export class NgControlGroup extends ControlContainer {
-  _parent: ControlContainer;
-  constructor(@Ancestor() _parent: ControlContainer) {
-    super();
-    this._parent = _parent;
-  }
-
-  onInit() { this.formDirective.addControlGroup(this); }
-
-  onDestroy() { this.formDirective.removeControlGroup(this); }
-
-  get path(): List<string> { return controlPath(this.name, this._parent); }
-
-  get formDirective(): any { return this._parent.formDirective; }
-}
\ No newline at end of file
diff --git a/modules/angular2/src/forms/directives/ng_control_name.ts b/modules/angular2/src/forms/directives/ng_control_name.ts
deleted file mode 100644
index de96be10dafc..000000000000
--- a/modules/angular2/src/forms/directives/ng_control_name.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import {CONST_EXPR} from 'angular2/src/facade/lang';
-import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-import {List, StringMapWrapper, StringMap} from 'angular2/src/facade/collection';
-
-import {Directive, onDestroy, onChange, Query, QueryList} from 'angular2/angular2';
-import {forwardRef, Ancestor, Binding, Inject} from 'angular2/di';
-
-import {ControlContainer} from './control_container';
-import {NgControl} from './ng_control';
-import {NgValidator} from './validators';
-import {controlPath, composeNgValidator} from './shared';
-import {Control} from '../model';
-
-const controlNameBinding =
-    CONST_EXPR(new Binding(NgControl, {toAlias: forwardRef(() => NgControlName)}));
-
-/**
- * Creates and binds a control with a specified name to a DOM element.
- *
- * This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
-
- * # Example
- *
- * In this example, we create the login and password controls.
- * We can work with each control separately: check its validity, get its value, listen to its
- changes.
- *
- *  ```
- * @Component({selector: "login-comp"})
- * @View({
- *      directives: [formDirectives],
- *      template: `
- *              <form #f="form" (submit)='onLogIn(f.value)'>
- *                Login <input type='text' ng-control='login' #l="form">
- *                <div *ng-if="!l.valid">Login is invalid</div>
- *
- *                Password <input type='password' ng-control='password'>
-
- *                <button type='submit'>Log in!</button>
- *              </form>
- *      `})
- * class LoginComp {
- *  onLogIn(value) {
- *    // value === {login: 'some login', password: 'some password'}
- *  }
- * }
- *  ```
- *
- * We can also use ng-model to bind a domain model to the form.
- *
- *  ```
- * @Component({selector: "login-comp"})
- * @View({
- *      directives: [formDirectives],
- *      template: `
- *              <form (submit)='onLogIn()'>
- *                Login <input type='text' ng-control='login' [(ng-model)]="credentials.login">
- *                Password <input type='password' ng-control='password'
- [(ng-model)]="credentials.password">
- *                <button type='submit'>Log in!</button>
- *              </form>
- *      `})
- * class LoginComp {
- *  credentials: {login:string, password:string};
- *
- *  onLogIn() {
- *    // this.credentials.login === "some login"
- *    // this.credentials.password === "some password"
- *  }
- * }
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector: '[ng-control]',
-  hostInjector: [controlNameBinding],
-  properties: ['name: ngControl', 'model: ngModel'],
-  events: ['update: ngModel'],
-  lifecycle: [onDestroy, onChange],
-  exportAs: 'form'
-})
-export class NgControlName extends NgControl {
-  _parent: ControlContainer;
-  update = new EventEmitter();
-  model: any;
-  ngValidators: QueryList<NgValidator>;
-  _added = false;
-
-  // Scope the query once https://github.com/angular/angular/issues/2603 is fixed
-  constructor(@Ancestor() parent: ControlContainer,
-              @Query(NgValidator) ngValidators: QueryList<NgValidator>) {
-    super();
-    this._parent = parent;
-    this.ngValidators = ngValidators;
-  }
-
-  onChange(c: StringMap<string, any>) {
-    if (!this._added) {
-      this.formDirective.addControl(this);
-      this._added = true;
-    }
-    if (StringMapWrapper.contains(c, "model")) {
-      this.formDirective.updateModel(this, this.model);
-    }
-  }
-
-  onDestroy() { this.formDirective.removeControl(this); }
-
-  viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.update, newValue); }
-
-  get path(): List<string> { return controlPath(this.name, this._parent); }
-
-  get formDirective(): any { return this._parent.formDirective; }
-
-  get control(): Control { return this.formDirective.getControl(this); }
-
-  get validator(): Function { return composeNgValidator(this.ngValidators); }
-}
\ No newline at end of file
diff --git a/modules/angular2/src/forms/directives/ng_form.ts b/modules/angular2/src/forms/directives/ng_form.ts
deleted file mode 100644
index bcda35118bd7..000000000000
--- a/modules/angular2/src/forms/directives/ng_form.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import {PromiseWrapper, ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
-import {StringMapWrapper, List, ListWrapper} from 'angular2/src/facade/collection';
-import {isPresent, isBlank, CONST_EXPR} from 'angular2/src/facade/lang';
-import {Directive} from 'angular2/src/core/annotations/decorators';
-import {forwardRef, Binding} from 'angular2/di';
-import {NgControl} from './ng_control';
-import {Form} from './form_interface';
-import {NgControlGroup} from './ng_control_group';
-import {ControlContainer} from './control_container';
-import {AbstractControl, ControlGroup, Control} from '../model';
-import {setUpControl} from './shared';
-
-const formDirectiveBinding =
-    CONST_EXPR(new Binding(ControlContainer, {toAlias: forwardRef(() => NgForm)}));
-
-/**
- * Creates and binds a form object to a DOM element.
- *
- * # Example
- *
- *  ```
- * @Component({selector: "signup-comp"})
- * @View({
- *      directives: [formDirectives],
- *      template: `
- *              <form #f="form" (submit)='onSignUp(f.value)'>
- *                <div ng-control-group='credentials' #credentials="form">
- *                  Login <input type='text' ng-control='login'>
- *                  Password <input type='password' ng-control='password'>
- *                </div>
- *                <div *ng-if="!credentials.valid">Credentials are invalid</div>
- *
- *                <div ng-control-group='personal'>
- *                  Name <input type='text' ng-control='name'>
- *                </div>
- *                <button type='submit'>Sign Up!</button>
- *              </form>
- *      `})
- * class SignupComp {
- *  onSignUp(value) {
- *    // value === {personal: {name: 'some name'},
- *    //  credentials: {login: 'some login', password: 'some password'}}
- *  }
- * }
- *
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]',
-  hostInjector: [formDirectiveBinding],
-  host: {
-    '(submit)': 'onSubmit()',
-  },
-  events: ['ngSubmit'],
-  exportAs: 'form'
-})
-export class NgForm extends ControlContainer implements Form {
-  form: ControlGroup;
-  ngSubmit = new EventEmitter();
-
-  constructor() {
-    super();
-    this.form = new ControlGroup({});
-  }
-
-  get formDirective(): Form { return this; }
-
-  get path(): List<string> { return []; }
-
-  get controls(): StringMap<string, AbstractControl> { return this.form.controls; }
-
-  get value(): any { return this.form.value; }
-
-  get errors(): any { return this.form.errors; }
-
-  addControl(dir: NgControl): void {
-    this._later(_ => {
-      var container = this._findContainer(dir.path);
-      var c = new Control("");
-      setUpControl(c, dir);
-      container.addControl(dir.name, c);
-      c.updateValidity();
-    });
-  }
-
-  getControl(dir: NgControl): Control { return <Control>this.form.find(dir.path); }
-
-  removeControl(dir: NgControl): void {
-    this._later(_ => {
-      var container = this._findContainer(dir.path);
-      if (isPresent(container)) {
-        container.removeControl(dir.name);
-        container.updateValidity();
-      }
-    });
-  }
-
-  addControlGroup(dir: NgControlGroup): void {
-    this._later(_ => {
-      var container = this._findContainer(dir.path);
-      var c = new ControlGroup({});
-      container.addControl(dir.name, c);
-      c.updateValidity();
-    });
-  }
-
-  removeControlGroup(dir: NgControlGroup): void {
-    this._later(_ => {
-      var container = this._findContainer(dir.path);
-      if (isPresent(container)) {
-        container.removeControl(dir.name);
-        container.updateValidity();
-      }
-    });
-  }
-
-  updateModel(dir: NgControl, value: any): void {
-    this._later(_ => {
-      var c = <Control>this.form.find(dir.path);
-      c.updateValue(value);
-    });
-  }
-
-  onSubmit(): boolean {
-    ObservableWrapper.callNext(this.ngSubmit, null);
-    return false;
-  }
-
-  _findContainer(path: List<string>): ControlGroup {
-    ListWrapper.removeLast(path);
-    return ListWrapper.isEmpty(path) ? this.form : <ControlGroup>this.form.find(path);
-  }
-
-  _later(fn) {
-    var c = PromiseWrapper.completer();
-    PromiseWrapper.then(c.promise, fn, (_) => {});
-    c.resolve(null);
-  }
-}
diff --git a/modules/angular2/src/forms/directives/ng_form_control.ts b/modules/angular2/src/forms/directives/ng_form_control.ts
deleted file mode 100644
index 78a9fdcfada1..000000000000
--- a/modules/angular2/src/forms/directives/ng_form_control.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import {CONST_EXPR} from 'angular2/src/facade/lang';
-import {StringMapWrapper} from 'angular2/src/facade/collection';
-import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-
-import {Directive, onChange, Query, QueryList} from 'angular2/angular2';
-import {forwardRef, Ancestor, Binding} from 'angular2/di';
-
-import {NgControl} from './ng_control';
-import {Control} from '../model';
-import {NgValidator} from './validators';
-import {setUpControl, composeNgValidator} from './shared';
-
-const formControlBinding =
-    CONST_EXPR(new Binding(NgControl, {toAlias: forwardRef(() => NgFormControl)}));
-
-/**
- * Binds an existing control to a DOM element.
- *
- * # Example
- *
- * In this example, we bind the control to an input element. When the value of the input element
- * changes, the value of
- * the control will reflect that change. Likewise, if the value of the control changes, the input
- * element reflects that
- * change.
- *
- *  ```
- * @Component({selector: "login-comp"})
- * @View({
- *      directives: [formDirectives],
- *      template: "<input type='text' [ng-form-control]='loginControl'>"
- *      })
- * class LoginComp {
- *  loginControl:Control;
- *
- *  constructor() {
- *    this.loginControl = new Control('');
- *  }
- * }
- *
- *  ```
- *
- * We can also use ng-model to bind a domain model to the form.
- *
- *  ```
- * @Component({selector: "login-comp"})
- * @View({
- *      directives: [formDirectives],
- *      template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
- *      })
- * class LoginComp {
- *  loginControl:Control;
- *  login:string;
- *
- *  constructor() {
- *    this.loginControl = new Control('');
- *  }
- * }
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector: '[ng-form-control]',
-  hostInjector: [formControlBinding],
-  properties: ['form: ngFormControl', 'model: ngModel'],
-  events: ['update: ngModel'],
-  lifecycle: [onChange],
-  exportAs: 'form'
-})
-export class NgFormControl extends NgControl {
-  form: Control;
-  update = new EventEmitter();
-  _added = false;
-  model: any;
-  ngValidators: QueryList<NgValidator>;
-
-  // Scope the query once https://github.com/angular/angular/issues/2603 is fixed
-  constructor(@Query(NgValidator) ngValidators: QueryList<NgValidator>) {
-    super();
-    this.ngValidators = ngValidators;
-  }
-
-  onChange(c) {
-    if (!this._added) {
-      setUpControl(this.form, this);
-      this.form.updateValidity();
-      this._added = true;
-    }
-    if (StringMapWrapper.contains(c, "model")) {
-      this.form.updateValue(this.model);
-    }
-  }
-
-  get path(): List<string> { return []; }
-
-  get control(): Control { return this.form; }
-
-  get validator(): Function { return composeNgValidator(this.ngValidators); }
-
-  viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.update, newValue); }
-}
diff --git a/modules/angular2/src/forms/directives/ng_form_model.ts b/modules/angular2/src/forms/directives/ng_form_model.ts
deleted file mode 100644
index 8b1e21f466b3..000000000000
--- a/modules/angular2/src/forms/directives/ng_form_model.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import {CONST_EXPR} from 'angular2/src/facade/lang';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
-
-import {Directive, onChange} from 'angular2/angular2';
-import {forwardRef, Binding} from 'angular2/di';
-import {NgControl} from './ng_control';
-import {NgControlGroup} from './ng_control_group';
-import {ControlContainer} from './control_container';
-import {Form} from './form_interface';
-import {Control, ControlGroup} from '../model';
-import {setUpControl} from './shared';
-
-const formDirectiveBinding =
-    CONST_EXPR(new Binding(ControlContainer, {toAlias: forwardRef(() => NgFormModel)}));
-
-/**
- * Binds an existing control group to a DOM element.
- *
- * # Example
- *
- * In this example, we bind the control group to the form element, and we bind the login and
- * password controls to the
- * login and password elements.
- *
- *  ```
- * @Component({selector: "login-comp"})
- * @View({
- *      directives: [formDirectives],
- *      template: "<form [ng-form-model]='loginForm'>" +
- *              "Login <input type='text' ng-control='login'>" +
- *              "Password <input type='password' ng-control='password'>" +
- *              "<button (click)="onLogin()">Login</button>" +
- *              "</form>"
- *      })
- * class LoginComp {
- *  loginForm:ControlGroup;
- *
- *  constructor() {
- *    this.loginForm = new ControlGroup({
- *      login: new Control(""),
- *      password: new Control("")
- *    });
- *  }
- *
- *  onLogin() {
- *    // this.loginForm.value
- *  }
- * }
- *
- *  ```
- *
- * We can also use ng-model to bind a domain model to the form.
- *
- *  ```
- * @Component({selector: "login-comp"})
- * @View({
- *      directives: [formDirectives],
- *      template: "<form [ng-form-model]='loginForm'>" +
- *              "Login <input type='text' ng-control='login' [(ng-model)]='login'>" +
- *              "Password <input type='password' ng-control='password' [(ng-model)]='password'>" +
- *              "<button (click)="onLogin()">Login</button>" +
- *              "</form>"
- *      })
- * class LoginComp {
- *  credentials:{login:string, password:string}
- *  loginForm:ControlGroup;
- *
- *  constructor() {
- *    this.loginForm = new ControlGroup({
- *      login: new Control(""),
- *      password: new Control("")
- *    });
- *  }
- *
- *  onLogin() {
- *    // this.credentials.login === 'some login'
- *    // this.credentials.password === 'some password'
- *  }
- * }
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector: '[ng-form-model]',
-  hostInjector: [formDirectiveBinding],
-  properties: ['form: ng-form-model'],
-  lifecycle: [onChange],
-  host: {
-    '(submit)': 'onSubmit()',
-  },
-  events: ['ngSubmit'],
-  exportAs: 'form'
-})
-export class NgFormModel extends ControlContainer implements Form {
-  form: ControlGroup = null;
-  directives: List<NgControl> = [];
-  ngSubmit = new EventEmitter();
-
-  onChange(_) { this._updateDomValue(); }
-
-  get formDirective(): Form { return this; }
-
-  get path(): List<string> { return []; }
-
-  addControl(dir: NgControl): void {
-    var c: any = this.form.find(dir.path);
-    setUpControl(c, dir);
-    c.updateValidity();
-    this.directives.push(dir);
-  }
-
-  getControl(dir: NgControl): Control { return <Control>this.form.find(dir.path); }
-
-  removeControl(dir: NgControl): void { ListWrapper.remove(this.directives, dir); }
-
-  addControlGroup(dir: NgControlGroup) {}
-
-  removeControlGroup(dir: NgControlGroup) {}
-
-  updateModel(dir: NgControl, value: any): void {
-    var c  = <Control>this.form.find(dir.path);
-    c.updateValue(value);
-  }
-
-  onSubmit(): boolean {
-    ObservableWrapper.callNext(this.ngSubmit, null);
-    return false;
-  }
-
-  _updateDomValue() {
-    ListWrapper.forEach(this.directives, dir => {
-      var c: any = this.form.find(dir.path);
-      dir.valueAccessor.writeValue(c.value);
-    });
-  }
-}
diff --git a/modules/angular2/src/forms/directives/ng_model.ts b/modules/angular2/src/forms/directives/ng_model.ts
deleted file mode 100644
index 81472a1bed96..000000000000
--- a/modules/angular2/src/forms/directives/ng_model.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import {CONST_EXPR} from 'angular2/src/facade/lang';
-import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-import {StringMapWrapper} from 'angular2/src/facade/collection';
-
-import {Directive, onChange, QueryList, Query} from 'angular2/angular2';
-import {forwardRef, Ancestor, Binding} from 'angular2/di';
-
-import {NgControl} from './ng_control';
-import {Control} from '../model';
-import {NgValidator} from './validators';
-import {setUpControl, composeNgValidator} from './shared';
-
-const formControlBinding = CONST_EXPR(new Binding(NgControl, {toAlias: forwardRef(() => NgModel)}));
-
-/**
- * Binds a domain model to the form.
- *
- * # Example
- *  ```
- * @Component({selector: "search-comp"})
- * @View({
- *      directives: [formDirectives],
- *      template: `
-              <input type='text' [(ng-model)]="searchQuery">
- *      `})
- * class SearchComp {
- *  searchQuery: string;
- * }
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector: '[ng-model]:not([ng-control]):not([ng-form-control])',
-  hostInjector: [formControlBinding],
-  properties: ['model: ngModel'],
-  events: ['update: ngModel'],
-  lifecycle: [onChange],
-  exportAs: 'form'
-})
-export class NgModel extends NgControl {
-  _control = new Control("");
-  _added = false;
-  update = new EventEmitter();
-  model: any;
-  ngValidators: QueryList<NgValidator>;
-
-  // Scope the query once https://github.com/angular/angular/issues/2603 is fixed
-  constructor(@Query(NgValidator) ngValidators: QueryList<NgValidator>) {
-    super();
-    this.ngValidators = ngValidators;
-  }
-
-  onChange(c) {
-    if (!this._added) {
-      setUpControl(this._control, this);
-      this._control.updateValidity();
-      this._added = true;
-    }
-
-    if (StringMapWrapper.contains(c, "model")) {
-      this._control.updateValue(this.model);
-    }
-  }
-
-  get control() { return this._control; }
-
-  get path(): List<string> { return []; }
-
-  get validator(): Function { return composeNgValidator(this.ngValidators); }
-
-  viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.update, newValue); }
-}
diff --git a/modules/angular2/src/forms/directives/select_control_value_accessor.ts b/modules/angular2/src/forms/directives/select_control_value_accessor.ts
deleted file mode 100644
index b7f5568cd4b3..000000000000
--- a/modules/angular2/src/forms/directives/select_control_value_accessor.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import {Directive, Query, QueryList, Renderer, ElementRef} from 'angular2/angular2';
-import {NgControl} from './ng_control';
-import {ControlValueAccessor} from './control_value_accessor';
-import {isPresent} from 'angular2/src/facade/lang';
-import {setProperty} from './shared';
-
-/**
- * Marks <option> as dynamic, so Angular can be notified when options change.
- *
- * #Example:
- * ```
- * <select ng-control="city">
- *   <option *ng-for="#c of cities" [value]="c"></option>
- * </select>
- * ``
- * @exportedAs angular2/forms
- */
-@Directive({selector: 'option'})
-export class NgSelectOption {
-}
-
-/**
- * The accessor for writing a value and listening to changes on a select element.
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector: 'select[ng-control],select[ng-form-control],select[ng-model]',
-  host: {
-    '(change)': 'onChange($event.target.value)',
-    '(input)': 'onChange($event.target.value)',
-    '(blur)': 'onTouched()',
-    '[value]': 'value',
-    '[class.ng-untouched]': 'ngClassUntouched',
-    '[class.ng-touched]': 'ngClassTouched',
-    '[class.ng-pristine]': 'ngClassPristine',
-    '[class.ng-dirty]': 'ngClassDirty',
-    '[class.ng-valid]': 'ngClassValid',
-    '[class.ng-invalid]': 'ngClassInvalid'
-  }
-})
-export class SelectControlValueAccessor implements ControlValueAccessor {
-  value = '';
-  onChange = (_) => {};
-  onTouched = () => {};
-
-  constructor(private cd: NgControl, private renderer: Renderer, private elementRef: ElementRef,
-              @Query(NgSelectOption, {descendants: true}) query: QueryList<NgSelectOption>) {
-    cd.valueAccessor = this;
-
-    this._updateValueWhenListOfOptionsChanges(query);
-  }
-
-  writeValue(value) {
-    // both this.value and setProperty are required at the moment
-    // remove when a proper imperative API is provided
-    this.value = value;
-    setProperty(this.renderer, this.elementRef, "value", value);
-  }
-
-  get ngClassUntouched(): boolean {
-    return isPresent(this.cd.control) ? this.cd.control.untouched : false;
-  }
-  get ngClassTouched(): boolean {
-    return isPresent(this.cd.control) ? this.cd.control.touched : false;
-  }
-  get ngClassPristine(): boolean {
-    return isPresent(this.cd.control) ? this.cd.control.pristine : false;
-  }
-  get ngClassDirty(): boolean { return isPresent(this.cd.control) ? this.cd.control.dirty : false; }
-  get ngClassValid(): boolean { return isPresent(this.cd.control) ? this.cd.control.valid : false; }
-  get ngClassInvalid(): boolean {
-    return isPresent(this.cd.control) ? !this.cd.control.valid : false;
-  }
-
-  registerOnChange(fn): void { this.onChange = fn; }
-  registerOnTouched(fn): void { this.onTouched = fn; }
-
-  private _updateValueWhenListOfOptionsChanges(query: QueryList<NgSelectOption>) {
-    query.onChange(() => this.writeValue(this.value));
-  }
-}
diff --git a/modules/angular2/src/forms/directives/shared.ts b/modules/angular2/src/forms/directives/shared.ts
deleted file mode 100644
index cf5f4932a54e..000000000000
--- a/modules/angular2/src/forms/directives/shared.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import {ListWrapper, iterableToList} from 'angular2/src/facade/collection';
-import {isBlank, BaseException} from 'angular2/src/facade/lang';
-
-import {ControlContainer} from './control_container';
-import {NgControl} from './ng_control';
-import {NgValidator} from './validators';
-import {Control} from '../model';
-import {Validators} from '../validators';
-import {Renderer, ElementRef, QueryList} from 'angular2/angular2';
-
-
-export function controlPath(name: string, parent: ControlContainer): string[] {
-  var p = ListWrapper.clone(parent.path);
-  p.push(name);
-  return p;
-}
-
-export function setUpControl(c: Control, dir: NgControl) {
-  if (isBlank(c)) _throwError(dir, "Cannot find control");
-  if (isBlank(dir.valueAccessor)) _throwError(dir, "No value accessor for");
-
-  c.validator = Validators.compose([c.validator, dir.validator]);
-  dir.valueAccessor.writeValue(c.value);
-
-  // view -> model
-  dir.valueAccessor.registerOnChange(newValue => {
-    dir.viewToModelUpdate(newValue);
-    c.updateValue(newValue);
-    c.markAsDirty();
-  });
-
-  // model -> view
-  c.registerOnChange(newValue => dir.valueAccessor.writeValue(newValue));
-
-  // touched
-  dir.valueAccessor.registerOnTouched(() => c.markAsTouched());
-}
-
-export function composeNgValidator(ngValidators: QueryList<NgValidator>): Function {
-  if (isBlank(ngValidators)) return Validators.nullValidator;
-  return Validators.compose(
-      (<List<NgValidator>>iterableToList(ngValidators)).map(v => v.validator));
-}
-
-function _throwError(dir: NgControl, message: string): void {
-  var path = ListWrapper.join(dir.path, " -> ");
-  throw new BaseException(`${message} '${path}'`);
-}
-
-export function setProperty(renderer: Renderer, elementRef: ElementRef, propName: string,
-                            propValue: any) {
-  renderer.setElementProperty(elementRef, propName, propValue);
-}
diff --git a/modules/angular2/src/forms/directives/validators.ts b/modules/angular2/src/forms/directives/validators.ts
deleted file mode 100644
index 6a96156f6aea..000000000000
--- a/modules/angular2/src/forms/directives/validators.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {forwardRef, Binding} from 'angular2/di';
-import {CONST_EXPR} from 'angular2/src/facade/lang';
-import {Directive} from '../../../angular2';
-import {Validators} from '../validators';
-
-export class NgValidator {
-  get validator(): Function { throw "Is not implemented"; }
-}
-
-const requiredValidatorBinding =
-    CONST_EXPR(new Binding(NgValidator, {toAlias: forwardRef(() => NgRequiredValidator)}));
-
-@Directive({
-  selector: '[required][ng-control],[required][ng-form-control],[required][ng-model]',
-  hostInjector: [requiredValidatorBinding]
-})
-export class NgRequiredValidator extends NgValidator {
-  get validator(): Function { return Validators.required; }
-}
diff --git a/modules/angular2/src/forms/form_builder.ts b/modules/angular2/src/forms/form_builder.ts
deleted file mode 100644
index 6d33c363eab9..000000000000
--- a/modules/angular2/src/forms/form_builder.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import {StringMapWrapper, ListWrapper, List} from 'angular2/src/facade/collection';
-import {isPresent, isArray} from 'angular2/src/facade/lang';
-import * as modelModule from './model';
-
-
-/**
- * Creates a form object from a user-specified configuration.
- *
- * # Example
- *
- * ```
- * import {Component, View, bootstrap} from 'angular2/angular2';
- * import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
- *
- * @Component({
- *   selector: 'login-comp',
- *   viewInjector: [
- *     FormBuilder
- *   ]
- * })
- * @View({
- *   template: `
- *     <form [control-group]="loginForm">
- *       Login <input control="login">
- *
- *       <div control-group="passwordRetry">
- *         Password <input type="password" control="password">
- *         Confirm password <input type="password" control="passwordConfirmation">
- *       </div>
- *     </form>
- *   `,
- *   directives: [
- *     formDirectives
- *   ]
- * })
- * class LoginComp {
- *   loginForm: ControlGroup;
- *
- *   constructor(builder: FormBuilder) {
- *     this.loginForm = builder.group({
- *       login: ["", Validators.required],
- *
- *       passwordRetry: builder.group({
- *         password: ["", Validators.required],
- *         passwordConfirmation: ["", Validators.required]
- *       })
- *     });
- *   }
- * }
- *
- * bootstrap(LoginComp)
- * ```
- *
- * This example creates a {@link ControlGroup} that consists of a `login` {@link Control}, and a
- * nested
- * {@link ControlGroup} that defines a `password` and a `passwordConfirmation` {@link Control}:
- *
- * ```
- *  var loginForm = builder.group({
- *    login: ["", Validators.required],
- *
- *    passwordRetry: builder.group({
- *      password: ["", Validators.required],
- *      passwordConfirmation: ["", Validators.required]
- *    })
- *  });
- *
- *  ```
- * @exportedAs angular2/forms
- */
-export class FormBuilder {
-  group(controlsConfig: StringMap<string, any>,
-        extra: StringMap<string, any> = null): modelModule.ControlGroup {
-    var controls = this._reduceControls(controlsConfig);
-    var optionals = isPresent(extra) ? StringMapWrapper.get(extra, "optionals") : null;
-    var validator = isPresent(extra) ? StringMapWrapper.get(extra, "validator") : null;
-
-    if (isPresent(validator)) {
-      return new modelModule.ControlGroup(controls, optionals, validator);
-    } else {
-      return new modelModule.ControlGroup(controls, optionals);
-    }
-  }
-
-  control(value: Object, validator: Function = null): modelModule.Control {
-    if (isPresent(validator)) {
-      return new modelModule.Control(value, validator);
-    } else {
-      return new modelModule.Control(value);
-    }
-  }
-
-  array(controlsConfig: List<any>, validator: Function = null): modelModule.ControlArray {
-    var controls = ListWrapper.map(controlsConfig, (c) => this._createControl(c));
-    if (isPresent(validator)) {
-      return new modelModule.ControlArray(controls, validator);
-    } else {
-      return new modelModule.ControlArray(controls);
-    }
-  }
-
-  _reduceControls(controlsConfig: any): StringMap<string, modelModule.AbstractControl> {
-    var controls = {};
-    StringMapWrapper.forEach(controlsConfig, (controlConfig, controlName) => {
-      controls[controlName] = this._createControl(controlConfig);
-    });
-    return controls;
-  }
-
-  _createControl(controlConfig: any): modelModule.AbstractControl {
-    if (controlConfig instanceof modelModule.Control || controlConfig instanceof
-                                     modelModule.ControlGroup || controlConfig instanceof
-                                         modelModule.ControlArray) {
-      return controlConfig;
-
-    } else if (isArray(controlConfig)) {
-      var value = ListWrapper.get(controlConfig, 0);
-      var validator = controlConfig.length > 1 ? controlConfig[1] : null;
-      return this.control(value, validator);
-
-    } else {
-      return this.control(controlConfig);
-    }
-  }
-}
diff --git a/modules/angular2/src/forms/model.ts b/modules/angular2/src/forms/model.ts
deleted file mode 100644
index 06a952a82f06..000000000000
--- a/modules/angular2/src/forms/model.ts
+++ /dev/null
@@ -1,313 +0,0 @@
-import {StringWrapper, isPresent, isBlank} from 'angular2/src/facade/lang';
-import {Observable, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-import {StringMap, StringMapWrapper, ListWrapper, List} from 'angular2/src/facade/collection';
-import {Validators} from './validators';
-
-/**
- * Indicates that a Control is valid, i.e. that no errors exist in the input value.
- *
- * @exportedAs angular2/forms
- */
-export const VALID = "VALID";
-
-/**
- * Indicates that a Control is invalid, i.e. that an error exists in the input value.
- *
- * @exportedAs angular2/forms
- */
-export const INVALID = "INVALID";
-
-export function isControl(c: Object): boolean {
-  return c instanceof AbstractControl;
-}
-
-function _find(c: AbstractControl, path: List<string | number>| string) {
-  if (isBlank(path)) return null;
-  if (!(path instanceof List)) {
-    path = StringWrapper.split(<string>path, new RegExp("/"));
-  }
-  if (ListWrapper.isEmpty(path)) return null;
-
-  return ListWrapper.reduce(<List<string | number>>path, (v, name) => {
-    if (v instanceof ControlGroup) {
-      return isPresent(v.controls[name]) ? v.controls[name] : null;
-    } else if (v instanceof ControlArray) {
-      var index = <number>name;
-      return isPresent(v.at(index)) ? v.at(index) : null;
-    } else {
-      return null;
-    }
-  }, c);
-}
-
-/**
- * Omitting from external API doc as this is really an abstract internal concept.
- */
-export class AbstractControl {
-  _value: any;
-  _status: string;
-  _errors: StringMap<string, any>;
-  _pristine: boolean;
-  _touched: boolean;
-  _parent: ControlGroup | ControlArray;
-  validator: Function;
-
-  _valueChanges: EventEmitter;
-
-  constructor(validator: Function) {
-    this.validator = validator;
-    this._pristine = true;
-    this._touched = false;
-  }
-
-  get value(): any { return this._value; }
-
-  get status(): string { return this._status; }
-
-  get valid(): boolean { return this._status === VALID; }
-
-  get errors(): StringMap<string, any> { return this._errors; }
-
-  get pristine(): boolean { return this._pristine; }
-
-  get dirty(): boolean { return !this.pristine; }
-
-  get touched(): boolean { return this._touched; }
-
-  get untouched(): boolean { return !this._touched; }
-
-  get valueChanges(): Observable { return this._valueChanges; }
-
-  markAsTouched(): void { this._touched = true; }
-
-  markAsDirty({onlySelf}: {onlySelf?: boolean} = {}): void {
-    onlySelf = isPresent(onlySelf) ? onlySelf : false;
-
-    this._pristine = false;
-    if (isPresent(this._parent) && !onlySelf) {
-      this._parent.markAsDirty({onlySelf: onlySelf});
-    }
-  }
-
-  setParent(parent) { this._parent = parent; }
-
-  updateValidity({onlySelf}: {onlySelf?: boolean} = {}): void {
-    onlySelf = isPresent(onlySelf) ? onlySelf : false;
-
-    this._errors = this.validator(this);
-    this._status = isPresent(this._errors) ? INVALID : VALID;
-
-    if (isPresent(this._parent) && !onlySelf) {
-      this._parent.updateValidity({onlySelf: onlySelf});
-    }
-  }
-
-  updateValueAndValidity({onlySelf, emitEvent}: {onlySelf?: boolean,
-                                                 emitEvent?: boolean} = {}): void {
-    onlySelf = isPresent(onlySelf) ? onlySelf : false;
-    emitEvent = isPresent(emitEvent) ? emitEvent : true;
-
-    this._updateValue();
-
-    if (emitEvent) {
-      ObservableWrapper.callNext(this._valueChanges, this._value);
-    }
-
-    this._errors = this.validator(this);
-    this._status = isPresent(this._errors) ? INVALID : VALID;
-    if (isPresent(this._parent) && !onlySelf) {
-      this._parent.updateValueAndValidity({onlySelf: onlySelf, emitEvent: emitEvent});
-    }
-  }
-
-  find(path: List<string | number>| string): AbstractControl { return _find(this, path); }
-
-  getError(errorCode: string, path: List<string> = null): any {
-    var c = isPresent(path) && !ListWrapper.isEmpty(path) ? this.find(path) : this;
-    if (isPresent(c) && isPresent(c._errors)) {
-      return StringMapWrapper.get(c._errors, errorCode);
-    } else {
-      return null;
-    }
-  }
-
-  hasError(errorCode: string, path: List<string> = null): boolean {
-    return isPresent(this.getError(errorCode, path));
-  }
-
-  _updateValue(): void {}
-}
-
-/**
- * Defines a part of a form that cannot be divided into other controls.
- *
- * `Control` is one of the three fundamental building blocks used to define forms in Angular, along
- * with
- * {@link ControlGroup} and {@link ControlArray}.
- *
- * @exportedAs angular2/forms
- */
-export class Control extends AbstractControl {
-  _onChange: Function;
-
-  constructor(value: any, validator: Function = Validators.nullValidator) {
-    super(validator);
-    this._value = value;
-    this.updateValidity({onlySelf: true});
-    this._valueChanges = new EventEmitter();
-  }
-
-  updateValue(value: any,
-              {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
-    this._value = value;
-    if (isPresent(this._onChange)) this._onChange(this._value);
-    this.updateValueAndValidity({onlySelf: onlySelf, emitEvent: emitEvent});
-  }
-
-  registerOnChange(fn: Function): void { this._onChange = fn; }
-}
-
-/**
- * Defines a part of a form, of fixed length, that can contain other controls.
- *
- * A ControlGroup aggregates the values and errors of each {@link Control} in the group. Thus, if
- * one of the controls
- * in a group is invalid, the entire group is invalid. Similarly, if a control changes its value,
- * the entire group
- * changes as well.
- *
- * `ControlGroup` is one of the three fundamental building blocks used to define forms in Angular,
- * along with
- * {@link Control} and {@link ControlArray}. {@link ControlArray} can also contain other controls,
- * but is of variable
- * length.
- *
- * @exportedAs angular2/forms
- */
-export class ControlGroup extends AbstractControl {
-  controls: StringMap<string, AbstractControl>;
-  _optionals: StringMap<string, boolean>;
-
-  constructor(controls: StringMap<String, AbstractControl>,
-              optionals: StringMap<String, boolean> = null,
-              validator: Function = Validators.group) {
-    super(validator);
-    this.controls = controls;
-    this._optionals = isPresent(optionals) ? optionals : {};
-
-    this._valueChanges = new EventEmitter();
-
-    this._setParentForControls();
-    this._value = this._reduceValue();
-    this.updateValidity({onlySelf: true});
-  }
-
-  addControl(name: string, c: AbstractControl) {
-    this.controls[name] = c;
-    c.setParent(this);
-  }
-
-  removeControl(name: string) { StringMapWrapper.delete(this.controls, name); }
-
-  include(controlName: string): void {
-    StringMapWrapper.set(this._optionals, controlName, true);
-    this.updateValueAndValidity();
-  }
-
-  exclude(controlName: string): void {
-    StringMapWrapper.set(this._optionals, controlName, false);
-    this.updateValueAndValidity();
-  }
-
-  contains(controlName: string): boolean {
-    var c = StringMapWrapper.contains(this.controls, controlName);
-    return c && this._included(controlName);
-  }
-
-  _setParentForControls() {
-    StringMapWrapper.forEach(this.controls, (control, name) => { control.setParent(this); });
-  }
-
-  _updateValue() { this._value = this._reduceValue(); }
-
-  _reduceValue() {
-    return this._reduceChildren({}, (acc, control, name) => {
-      acc[name] = control.value;
-      return acc;
-    });
-  }
-
-  _reduceChildren(initValue: any, fn: Function) {
-    var res = initValue;
-    StringMapWrapper.forEach(this.controls, (control, name) => {
-      if (this._included(name)) {
-        res = fn(res, control, name);
-      }
-    });
-    return res;
-  }
-
-  _included(controlName: string): boolean {
-    var isOptional = StringMapWrapper.contains(this._optionals, controlName);
-    return !isOptional || StringMapWrapper.get(this._optionals, controlName);
-  }
-}
-
-/**
- * Defines a part of a form, of variable length, that can contain other controls.
- *
- * A `ControlArray` aggregates the values and errors of each {@link Control} in the group. Thus, if
- * one of the controls
- * in a group is invalid, the entire group is invalid. Similarly, if a control changes its value,
- * the entire group
- * changes as well.
- *
- * `ControlArray` is one of the three fundamental building blocks used to define forms in Angular,
- * along with
- * {@link Control} and {@link ControlGroup}. {@link ControlGroup} can also contain other controls,
- * but is of fixed
- * length.
- *
- * @exportedAs angular2/forms
- */
-export class ControlArray extends AbstractControl {
-  controls: List<AbstractControl>;
-
-  constructor(controls: List<AbstractControl>, validator: Function = Validators.array) {
-    super(validator);
-    this.controls = controls;
-
-    this._valueChanges = new EventEmitter();
-
-    this._setParentForControls();
-    this._updateValue();
-    this.updateValidity({onlySelf: true});
-  }
-
-  at(index: number): AbstractControl { return this.controls[index]; }
-
-  push(control: AbstractControl): void {
-    this.controls.push(control);
-    control.setParent(this);
-    this.updateValueAndValidity();
-  }
-
-  insert(index: number, control: AbstractControl): void {
-    ListWrapper.insert(this.controls, index, control);
-    control.setParent(this);
-    this.updateValueAndValidity();
-  }
-
-  removeAt(index: number): void {
-    ListWrapper.removeAt(this.controls, index);
-    this.updateValueAndValidity();
-  }
-
-  get length(): number { return this.controls.length; }
-
-  _updateValue() { this._value = ListWrapper.map(this.controls, (c) => c.value); }
-
-  _setParentForControls() {
-    ListWrapper.forEach(this.controls, (control) => { control.setParent(this); });
-  }
-}
diff --git a/modules/angular2/src/forms/validators.ts b/modules/angular2/src/forms/validators.ts
deleted file mode 100644
index 87ccb9599e18..000000000000
--- a/modules/angular2/src/forms/validators.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import {isBlank, isPresent} from 'angular2/src/facade/lang';
-import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-
-import * as modelModule from './model';
-
-/**
- * Provides a set of validators used by form controls.
- *
- * # Example
- *
- * ```
- * var loginControl = new Control("", Validators.required)
- * ```
- *
- * @exportedAs angular2/forms
- */
-export class Validators {
-  static required(c: modelModule.Control): StringMap<string, boolean> {
-    return isBlank(c.value) || c.value == "" ? {"required": true} : null;
-  }
-
-  static nullValidator(c: any): StringMap<string, boolean> { return null; }
-
-  static compose(validators: List<Function>): Function {
-    return function(c: modelModule.Control) {
-      var res = ListWrapper.reduce(validators, (res, validator) => {
-        var errors = validator(c);
-        return isPresent(errors) ? StringMapWrapper.merge(res, errors) : res;
-      }, {});
-      return StringMapWrapper.isEmpty(res) ? null : res;
-    }
-  }
-
-  static group(c: modelModule.ControlGroup): StringMap<string, boolean> {
-    var res = {};
-    StringMapWrapper.forEach(c.controls, (control, name) => {
-      if (c.contains(name) && isPresent(control.errors)) {
-        Validators._mergeErrors(control, res);
-      }
-    });
-    return StringMapWrapper.isEmpty(res) ? null : res;
-  }
-
-  static array(c: modelModule.ControlArray): StringMap<string, boolean> {
-    var res = {};
-    ListWrapper.forEach(c.controls, (control) => {
-      if (isPresent(control.errors)) {
-        Validators._mergeErrors(control, res);
-      }
-    });
-    return StringMapWrapper.isEmpty(res) ? null : res;
-  }
-
-  static _mergeErrors(control: modelModule.AbstractControl, res: StringMap<string, any[]>): void {
-    StringMapWrapper.forEach(control.errors, (value, error) => {
-      if (!StringMapWrapper.contains(res, error)) {
-        res[error] = [];
-      }
-      var current: any[] = res[error];
-      current.push(control);
-    });
-  }
-}
diff --git a/modules/angular2/src/http/backends/browser_xhr.dart b/modules/angular2/src/http/backends/browser_xhr.dart
deleted file mode 100644
index 8f21b47d9498..000000000000
--- a/modules/angular2/src/http/backends/browser_xhr.dart
+++ /dev/null
@@ -1,11 +0,0 @@
-library angular2.src.http.backends.browser_xhr;
-
-import 'dart:html' show HttpRequest;
-import 'package:angular2/di.dart';
-
-@Injectable()
-class BrowserXhr {
-	HttpRequest build() {
-		return new HttpRequest();
-	}
-}
diff --git a/modules/angular2/src/http/backends/browser_xhr.ts b/modules/angular2/src/http/backends/browser_xhr.ts
deleted file mode 100644
index cb27b01a83e4..000000000000
--- a/modules/angular2/src/http/backends/browser_xhr.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {Injectable} from 'angular2/di';
-
-// Make sure not to evaluate this in a non-browser environment!
-@Injectable()
-export class BrowserXhr {
-  constructor() {}
-  build(): any { return <any>(new XMLHttpRequest()); }
-}
diff --git a/modules/angular2/src/http/backends/mock_backend.ts b/modules/angular2/src/http/backends/mock_backend.ts
deleted file mode 100644
index f74e021acb30..000000000000
--- a/modules/angular2/src/http/backends/mock_backend.ts
+++ /dev/null
@@ -1,226 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {Request} from 'angular2/src/http/static_request';
-import {Response} from 'angular2/src/http/static_response';
-import {ReadyStates} from 'angular2/src/http/enums';
-import {Connection, ConnectionBackend} from 'angular2/src/http/interfaces';
-import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
-import {isPresent} from 'angular2/src/facade/lang';
-import {IMPLEMENTS, BaseException} from 'angular2/src/facade/lang';
-
-/**
- *
- * Mock Connection to represent a {@link Connection} for tests.
- *
- **/
-@IMPLEMENTS(Connection)
-export class MockConnection {
-  // TODO Name `readyState` should change to be more generic, and states could be made to be more
-  // descriptive than XHR states.
-  /**
-   * Describes the state of the connection, based on `XMLHttpRequest.readyState`, but with
-   * additional states. For example, state 5 indicates an aborted connection.
-   */
-  readyState: ReadyStates;
-
-  /**
-   * {@link Request} instance used to create the connection.
-   */
-  request: Request;
-
-  /**
-   * {@link EventEmitter} of {@link Response}. Can be subscribed to in order to be notified when a
-   * response is available.
-   */
-  response: EventEmitter;
-
-  constructor(req: Request) {
-    this.response = new EventEmitter();
-    this.readyState = ReadyStates.OPEN;
-    this.request = req;
-  }
-
-  /**
-   * Changes the `readyState` of the connection to a custom state of 5 (cancelled).
-   */
-  dispose() {
-    if (this.readyState !== ReadyStates.DONE) {
-      this.readyState = ReadyStates.CANCELLED;
-    }
-  }
-
-  /**
-   * Sends a mock response to the connection. This response is the value that is emitted to the
-   * {@link EventEmitter} returned by {@link Http}.
-   *
-   * #Example
-   *
-   * ```
-   * var connection;
-   * backend.connections.subscribe(c => connection = c);
-   * http.request('data.json').subscribe(res => console.log(res.text()));
-   * connection.mockRespond(new Response('fake response')); //logs 'fake response'
-   * ```
-   *
-   */
-  mockRespond(res: Response) {
-    if (this.readyState === ReadyStates.DONE || this.readyState === ReadyStates.CANCELLED) {
-      throw new BaseException('Connection has already been resolved');
-    }
-    this.readyState = ReadyStates.DONE;
-    ObservableWrapper.callNext(this.response, res);
-    ObservableWrapper.callReturn(this.response);
-  }
-
-  /**
-   * Not yet implemented!
-   *
-   * Sends the provided {@link Response} to the `downloadObserver` of the `Request`
-   * associated with this connection.
-   */
-  mockDownload(res: Response) {
-    // this.request.downloadObserver.onNext(res);
-    // if (res.bytesLoaded === res.totalBytes) {
-    //   this.request.downloadObserver.onCompleted();
-    // }
-  }
-
-  // TODO(jeffbcross): consider using Response type
-  /**
-   * Emits the provided error object as an error to the {@link Response} {@link EventEmitter}
-   * returned
-   * from {@link Http}.
-   */
-  mockError(err?) {
-    // Matches XHR semantics
-    this.readyState = ReadyStates.DONE;
-    ObservableWrapper.callThrow(this.response, err);
-    ObservableWrapper.callReturn(this.response);
-  }
-}
-
-/**
- * A mock backend for testing the {@link Http} service.
- *
- * This class can be injected in tests, and should be used to override bindings
- * to other backends, such as {@link XHRBackend}.
- *
- * #Example
- *
- * ```
- * import {MockBackend, DefaultOptions, Http} from 'angular2/http';
- * it('should get some data', inject([AsyncTestCompleter], (async) => {
- *   var connection;
- *   var injector = Injector.resolveAndCreate([
- *     MockBackend,
- *     bind(Http).toFactory((backend, defaultOptions) => {
- *       return new Http(backend, defaultOptions)
- *     }, [MockBackend, DefaultOptions])]);
- *   var http = injector.get(Http);
- *   var backend = injector.get(MockBackend);
- *   //Assign any newly-created connection to local variable
- *   backend.connections.subscribe(c => connection = c);
- *   http.request('data.json').subscribe((res) => {
- *     expect(res.text()).toBe('awesome');
- *     async.done();
- *   });
- *   connection.mockRespond(new Response('awesome'));
- * }));
- * ```
- *
- * This method only exists in the mock implementation, not in real Backends.
- **/
-@Injectable()
-@IMPLEMENTS(ConnectionBackend)
-export class MockBackend {
-  /**
-   * {@link EventEmitter}
-   * of {@link MockConnection} instances that have been created by this backend. Can be subscribed
-   * to in order to respond to connections.
-   *
-   * #Example
-   *
-   * ```
-   * import {MockBackend, Http, BaseRequestOptions} from 'angular2/http';
-   * import {Injector} from 'angular2/di';
-   *
-   * it('should get a response', () => {
-   *   var connection; //this will be set when a new connection is emitted from the backend.
-   *   var text; //this will be set from mock response
-   *   var injector = Injector.resolveAndCreate([
-   *     MockBackend,
-   *     bind(Http).toFactory(backend, options) {
-   *       return new Http(backend, options);
-   *     }, [MockBackend, BaseRequestOptions]]);
-   *   var backend = injector.get(MockBackend);
-   *   var http = injector.get(Http);
-   *   backend.connections.subscribe(c => connection = c);
-   *   http.request('something.json').subscribe(res => {
-   *     text = res.text();
-   *   });
-   *   connection.mockRespond(new Response({body: 'Something'}));
-   *   expect(text).toBe('Something');
-   * });
-   * ```
-   *
-   * This property only exists in the mock implementation, not in real Backends.
-   */
-  connections: EventEmitter;  //<MockConnection>
-
-  /**
-   * An array representation of `connections`. This array will be updated with each connection that
-   * is created by this backend.
-   *
-   * This property only exists in the mock implementation, not in real Backends.
-   */
-  connectionsArray: Array<MockConnection>;
-  /**
-   * {@link EventEmitter} of {@link MockConnection} instances that haven't yet been resolved (i.e.
-   * with a `readyState`
-   * less than 4). Used internally to verify that no connections are pending via the
-   * `verifyNoPendingRequests` method.
-   *
-   * This property only exists in the mock implementation, not in real Backends.
-   */
-  pendingConnections: EventEmitter;  //<MockConnection>
-  constructor() {
-    this.connectionsArray = [];
-    this.connections = new EventEmitter();
-    ObservableWrapper.subscribe(this.connections,
-                                connection => this.connectionsArray.push(connection));
-    this.pendingConnections = new EventEmitter();
-  }
-
-  /**
-   * Checks all connections, and raises an exception if any connection has not received a response.
-   *
-   * This method only exists in the mock implementation, not in real Backends.
-   */
-  verifyNoPendingRequests() {
-    let pending = 0;
-    ObservableWrapper.subscribe(this.pendingConnections, c => pending++);
-    if (pending > 0) throw new BaseException(`${pending} pending connections to be resolved`);
-  }
-
-  /**
-   * Can be used in conjunction with `verifyNoPendingRequests` to resolve any not-yet-resolve
-   * connections, if it's expected that there are connections that have not yet received a response.
-   *
-   * This method only exists in the mock implementation, not in real Backends.
-   */
-  resolveAllConnections() { ObservableWrapper.subscribe(this.connections, c => c.readyState = 4); }
-
-  /**
-   * Creates a new {@link MockConnection}. This is equivalent to calling `new
-   * MockConnection()`, except that it also will emit the new `Connection` to the `connections`
-   * emitter of this `MockBackend` instance. This method will usually only be used by tests
-   * against the framework itself, not by end-users.
-   */
-  createConnection(req: Request): Connection {
-    if (!isPresent(req) || !(req instanceof Request)) {
-      throw new BaseException(`createConnection requires an instance of Request, got ${req}`);
-    }
-    let connection = new MockConnection(req);
-    ObservableWrapper.callNext(this.connections, connection);
-    return connection;
-  }
-}
diff --git a/modules/angular2/src/http/backends/xhr_backend.ts b/modules/angular2/src/http/backends/xhr_backend.ts
deleted file mode 100644
index b7cd90bbc34d..000000000000
--- a/modules/angular2/src/http/backends/xhr_backend.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import {ConnectionBackend, Connection} from '../interfaces';
-import {ReadyStates, RequestMethods, RequestMethodsMap} from '../enums';
-import {Request} from '../static_request';
-import {Response} from '../static_response';
-import {ResponseOptions, BaseResponseOptions} from '../base_response_options';
-import {Injectable} from 'angular2/di';
-import {BrowserXhr} from './browser_xhr';
-import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-import {isPresent, ENUM_INDEX} from 'angular2/src/facade/lang';
-
-/**
- * Creates connections using `XMLHttpRequest`. Given a fully-qualified
- * request, an `XHRConnection` will immediately create an `XMLHttpRequest` object and send the
- * request.
- *
- * This class would typically not be created or interacted with directly inside applications, though
- * the {@link MockConnection} may be interacted with in tests.
- */
-export class XHRConnection implements Connection {
-  request: Request;
-  /**
-   * Response {@link EventEmitter} which emits a single {@link Response} value on load event of
-   * `XMLHttpRequest`.
-   */
-  response: EventEmitter;  // TODO: Make generic of <Response>;
-  readyState: ReadyStates;
-  private _xhr;  // TODO: make type XMLHttpRequest, pending resolution of
-                 // https://github.com/angular/ts2dart/issues/230
-  constructor(req: Request, browserXHR: BrowserXhr, baseResponseOptions?: ResponseOptions) {
-    // TODO: get rid of this when enum lookups are available in ts2dart
-    // https://github.com/angular/ts2dart/issues/221
-    var requestMethodsMap = new RequestMethodsMap();
-    this.request = req;
-    this.response = new EventEmitter();
-    this._xhr = browserXHR.build();
-    // TODO(jeffbcross): implement error listening/propagation
-    this._xhr.open(requestMethodsMap.getMethod(ENUM_INDEX(req.method)), req.url);
-    this._xhr.addEventListener('load', (_) => {
-      var responseOptions = new ResponseOptions(
-          {body: isPresent(this._xhr.response) ? this._xhr.response : this._xhr.responseText});
-      if (isPresent(baseResponseOptions)) {
-        responseOptions = baseResponseOptions.merge(responseOptions);
-      }
-
-      ObservableWrapper.callNext(this.response, new Response(responseOptions))
-    });
-    // TODO(jeffbcross): make this more dynamic based on body type
-    this._xhr.send(this.request.text());
-  }
-
-  /**
-   * Calls abort on the underlying XMLHttpRequest.
-   */
-  dispose(): void { this._xhr.abort(); }
-}
-
-/**
- * Creates {@link XHRConnection} instances.
- *
- * This class would typically not be used by end users, but could be
- * overridden if a different backend implementation should be used,
- * such as in a node backend.
- *
- * #Example
- *
- * ```
- * import {Http, MyNodeBackend, httpInjectables, BaseRequestOptions} from 'angular2/http';
- * @Component({
- *   viewInjector: [
- *     httpInjectables,
- *     bind(Http).toFactory((backend, options) => {
- *       return new Http(backend, options);
- *     }, [MyNodeBackend, BaseRequestOptions])]
- * })
- * class MyComponent {
- *   constructor(http:Http) {
- *     http('people.json').subscribe(res => this.people = res.json());
- *   }
- * }
- * ```
- *
- **/
-@Injectable()
-export class XHRBackend implements ConnectionBackend {
-  constructor(private _browserXHR: BrowserXhr, private _baseResponseOptions: ResponseOptions) {}
-  createConnection(request: Request): XHRConnection {
-    return new XHRConnection(request, this._browserXHR, this._baseResponseOptions);
-  }
-}
diff --git a/modules/angular2/src/http/base_request_options.ts b/modules/angular2/src/http/base_request_options.ts
deleted file mode 100644
index 5583ce582a63..000000000000
--- a/modules/angular2/src/http/base_request_options.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import {CONST_EXPR, CONST, isPresent} from 'angular2/src/facade/lang';
-import {Headers} from './headers';
-import {RequestModesOpts, RequestMethods, RequestCacheOpts, RequestCredentialsOpts} from './enums';
-import {IRequestOptions} from './interfaces';
-import {Injectable} from 'angular2/di';
-
-/**
- * Creates a request options object similar to the `RequestInit` description
- * in the [Fetch
- * Spec](https://fetch.spec.whatwg.org/#requestinit) to be optionally provided when instantiating a
- * {@link Request}.
- *
- * All values are null by default.
- */
-export class RequestOptions implements IRequestOptions {
-  /**
-   * Http method with which to execute the request.
-   *
-   * Defaults to "GET".
-   */
-  method: RequestMethods;
-  /**
-   * Headers object based on the `Headers` class in the [Fetch
-   * Spec](https://fetch.spec.whatwg.org/#headers-class).
-   */
-  headers: Headers;
-  /**
-   * Body to be used when creating the request.
-   */
-  // TODO: support FormData, Blob, URLSearchParams
-  body: string;
-  mode: RequestModesOpts;
-  credentials: RequestCredentialsOpts;
-  cache: RequestCacheOpts;
-  url: string;
-  constructor({method, headers, body, mode, credentials, cache, url}: IRequestOptions = {}) {
-    this.method = isPresent(method) ? method : null;
-    this.headers = isPresent(headers) ? headers : null;
-    this.body = isPresent(body) ? body : null;
-    this.mode = isPresent(mode) ? mode : null;
-    this.credentials = isPresent(credentials) ? credentials : null;
-    this.cache = isPresent(cache) ? cache : null;
-    this.url = isPresent(url) ? url : null;
-  }
-
-  /**
-   * Creates a copy of the `RequestOptions` instance, using the optional input as values to override
-   * existing values.
-   */
-  merge(options?: IRequestOptions): RequestOptions {
-    return new RequestOptions({
-      method: isPresent(options) && isPresent(options.method) ? options.method : this.method,
-      headers: isPresent(options) && isPresent(options.headers) ? options.headers : this.headers,
-      body: isPresent(options) && isPresent(options.body) ? options.body : this.body,
-      mode: isPresent(options) && isPresent(options.mode) ? options.mode : this.mode,
-      credentials: isPresent(options) && isPresent(options.credentials) ? options.credentials :
-                                                                          this.credentials,
-      cache: isPresent(options) && isPresent(options.cache) ? options.cache : this.cache,
-      url: isPresent(options) && isPresent(options.url) ? options.url : this.url
-    });
-  }
-}
-
-/**
- * Injectable version of {@link RequestOptions}, with overridable default values.
- *
- * #Example
- *
- * ```
- * import {Http, BaseRequestOptions, Request} from 'angular2/http';
- * ...
- * class MyComponent {
- *   constructor(baseRequestOptions:BaseRequestOptions, http:Http) {
- *     var options = baseRequestOptions.merge({body: 'foobar', url: 'https://foo'});
- *     var request = new Request(options);
- *     http.request(request).subscribe(res => this.bars = res.json());
- *   }
- * }
- *
- * ```
- */
-@Injectable()
-export class BaseRequestOptions extends RequestOptions {
-  constructor() {
-    super({method: RequestMethods.GET, headers: new Headers(), mode: RequestModesOpts.Cors});
-  }
-}
diff --git a/modules/angular2/src/http/base_response_options.ts b/modules/angular2/src/http/base_response_options.ts
deleted file mode 100644
index 20352ee4050e..000000000000
--- a/modules/angular2/src/http/base_response_options.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {isPresent, isJsObject} from 'angular2/src/facade/lang';
-import {Headers} from './headers';
-import {ResponseTypes} from './enums';
-import {IResponseOptions} from './interfaces';
-
-/**
- * Creates a response options object similar to the
- * [ResponseInit](https://fetch.spec.whatwg.org/#responseinit) description
- * in the Fetch
- * Spec to be optionally provided when instantiating a
- * {@link Response}.
- *
- * All values are null by default.
- */
-export class ResponseOptions implements IResponseOptions {
-  // TODO: ArrayBuffer | FormData | Blob
-  body: string | Object;
-  status: number;
-  headers: Headers;
-  statusText: string;
-  type: ResponseTypes;
-  url: string;
-  constructor({body, status, headers, statusText, type, url}: IResponseOptions = {}) {
-    this.body = isPresent(body) ? body : null;
-    this.status = isPresent(status) ? status : null;
-    this.headers = isPresent(headers) ? headers : null;
-    this.statusText = isPresent(statusText) ? statusText : null;
-    this.type = isPresent(type) ? type : null;
-    this.url = isPresent(url) ? url : null;
-  }
-
-  merge(options?: IResponseOptions): ResponseOptions {
-    return new ResponseOptions({
-      body: isPresent(options) && isPresent(options.body) ? options.body : this.body,
-      status: isPresent(options) && isPresent(options.status) ? options.status : this.status,
-      headers: isPresent(options) && isPresent(options.headers) ? options.headers : this.headers,
-      statusText: isPresent(options) && isPresent(options.statusText) ? options.statusText :
-                                                                        this.statusText,
-      type: isPresent(options) && isPresent(options.type) ? options.type : this.type,
-      url: isPresent(options) && isPresent(options.url) ? options.url : this.url,
-    });
-  }
-}
-
-/**
- * Injectable version of {@link ResponseOptions}, with overridable default values.
- */
-@Injectable()
-export class BaseResponseOptions extends ResponseOptions {
-  // TODO: Object | ArrayBuffer | JSON | FormData | Blob
-  body: string | Object | ArrayBuffer | JSON | FormData | Blob;
-  status: number;
-  headers: Headers;
-  statusText: string;
-  type: ResponseTypes;
-  url: string;
-
-  constructor() {
-    super({status: 200, statusText: 'Ok', type: ResponseTypes.Default, headers: new Headers()});
-  }
-}
diff --git a/modules/angular2/src/http/enums.ts b/modules/angular2/src/http/enums.ts
deleted file mode 100644
index e2da8affba9f..000000000000
--- a/modules/angular2/src/http/enums.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import {StringMap, StringMapWrapper} from 'angular2/src/facade/collection';
-
-/**
- * Acceptable origin modes to be associated with a {@link Request}, based on
- * [RequestMode](https://fetch.spec.whatwg.org/#requestmode) from the Fetch spec.
- */
-export enum RequestModesOpts {
-  Cors,
-  NoCors,
-  SameOrigin
-}
-
-/**
- * Acceptable cache option to be associated with a {@link Request}, based on
- * [RequestCache](https://fetch.spec.whatwg.org/#requestcache) from the Fetch spec.
- */
-export enum RequestCacheOpts {
-  Default,
-  NoStore,
-  Reload,
-  NoCache,
-  ForceCache,
-  OnlyIfCached
-}
-
-/**
- * Acceptable credentials option to be associated with a {@link Request}, based on
- * [RequestCredentials](https://fetch.spec.whatwg.org/#requestcredentials) from the Fetch spec.
- */
-export enum RequestCredentialsOpts {
-  Omit,
-  SameOrigin,
-  Include
-}
-
-/**
- * Supported http methods.
- */
-export enum RequestMethods {
-  GET,
-  POST,
-  PUT,
-  DELETE,
-  OPTIONS,
-  HEAD,
-  PATCH
-}
-
-// TODO: Remove this when enum lookups are available in ts2dart
-// https://github.com/angular/ts2dart/issues/221
-export class RequestMethodsMap {
-  private _methods: List<string>;
-  constructor() { this._methods = ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD', 'PATCH']; }
-  getMethod(method: int): string { return this._methods[method]; }
-}
-/**
- * All possible states in which a connection can be, based on
- * [States](http://www.w3.org/TR/XMLHttpRequest/#states) from the `XMLHttpRequest` spec, but with an
- * additional "CANCELLED" state.
- */
-export enum ReadyStates {
-  UNSENT,
-  OPEN,
-  HEADERS_RECEIVED,
-  LOADING,
-  DONE,
-  CANCELLED
-}
-
-/**
- * Acceptable response types to be associated with a {@link Response}, based on
- * [ResponseType](https://fetch.spec.whatwg.org/#responsetype) from the Fetch spec.
- */
-export enum ResponseTypes {
-  Basic,
-  Cors,
-  Default,
-  Error,
-  Opaque
-}
diff --git a/modules/angular2/src/http/headers.ts b/modules/angular2/src/http/headers.ts
deleted file mode 100644
index ccab309d007e..000000000000
--- a/modules/angular2/src/http/headers.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import {
-  isPresent,
-  isBlank,
-  isJsObject,
-  isType,
-  StringWrapper,
-  BaseException
-} from 'angular2/src/facade/lang';
-import {
-  isListLikeIterable,
-  List,
-  Map,
-  MapWrapper,
-  ListWrapper,
-  StringMap
-} from 'angular2/src/facade/collection';
-
-/**
- * Polyfill for [Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers/Headers), as
- * specified in the [Fetch Spec](https://fetch.spec.whatwg.org/#headers-class). The only known
- * difference from the spec is the lack of an `entries` method.
- */
-export class Headers {
-  _headersMap: Map<string, List<string>>;
-  constructor(headers?: Headers | StringMap<string, any>) {
-    if (isBlank(headers)) {
-      this._headersMap = new Map();
-      return;
-    }
-
-    if (headers instanceof Headers) {
-      this._headersMap = (<Headers>headers)._headersMap;
-    } else if (headers instanceof StringMap) {
-      this._headersMap = MapWrapper.createFromStringMap(headers);
-      MapWrapper.forEach(this._headersMap, (v, k) => {
-        if (!isListLikeIterable(v)) {
-          var list = [];
-          list.push(v);
-          this._headersMap.set(k, list);
-        }
-      });
-    }
-  }
-
-  /**
-   * Appends a header to existing list of header values for a given header name.
-   */
-  append(name: string, value: string): void {
-    var mapName = this._headersMap.get(name);
-    var list = isListLikeIterable(mapName) ? mapName : [];
-    list.push(value);
-    this._headersMap.set(name, list);
-  }
-
-  /**
-   * Deletes all header values for the given name.
-   */
-  delete (name: string): void { MapWrapper.delete(this._headersMap, name); }
-
-  forEach(fn: Function) { MapWrapper.forEach(this._headersMap, fn); }
-
-  /**
-   * Returns first header that matches given name.
-   */
-  get(header: string): string { return ListWrapper.first(this._headersMap.get(header)); }
-
-  /**
-   * Check for existence of header by given name.
-   */
-  has(header: string): boolean { return this._headersMap.has(header); }
-
-  /**
-   * Provides names of set headers
-   */
-  keys(): List<string> { return MapWrapper.keys(this._headersMap); }
-
-  /**
-   * Sets or overrides header value for given name.
-   */
-  set(header: string, value: string | List<string>): void {
-    var list = [];
-
-    if (isListLikeIterable(value)) {
-      var pushValue = (<List<string>>value).join(',');
-      list.push(pushValue);
-    } else {
-      list.push(value);
-    }
-
-    this._headersMap.set(header, list);
-  }
-
-  /**
-   * Returns values of all headers.
-   */
-  values(): List<List<string>> { return MapWrapper.values(this._headersMap); }
-
-  /**
-   * Returns list of header values for a given name.
-   */
-  getAll(header: string): Array<string> {
-    var headers = this._headersMap.get(header);
-    return isListLikeIterable(headers) ? headers : [];
-  }
-
-  /**
-   * This method is not implemented.
-   */
-  entries() { throw new BaseException('"entries" method is not implemented on Headers class'); }
-}
diff --git a/modules/angular2/src/http/http.ts b/modules/angular2/src/http/http.ts
deleted file mode 100644
index f1508f80c3d5..000000000000
--- a/modules/angular2/src/http/http.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-import {isString, isPresent, isBlank} from 'angular2/src/facade/lang';
-import {Injectable} from 'angular2/src/di/decorators';
-import {IRequestOptions, Connection, ConnectionBackend} from './interfaces';
-import {Request} from './static_request';
-import {BaseRequestOptions, RequestOptions} from './base_request_options';
-import {RequestMethods} from './enums';
-import {EventEmitter} from 'angular2/src/facade/async';
-
-function httpRequest(backend: ConnectionBackend, request: Request): EventEmitter {
-  return backend.createConnection(request).response;
-}
-
-function mergeOptions(defaultOpts, providedOpts, method, url): RequestOptions {
-  var newOptions = defaultOpts;
-  if (isPresent(providedOpts)) {
-    // Hack so Dart can used named parameters
-    newOptions = newOptions.merge(new RequestOptions({
-      method: providedOpts.method,
-      url: providedOpts.url,
-      headers: providedOpts.headers,
-      body: providedOpts.body,
-      mode: providedOpts.mode,
-      credentials: providedOpts.credentials,
-      cache: providedOpts.cache
-    }));
-  }
-  if (isPresent(method)) {
-    return newOptions.merge(new RequestOptions({method: method, url: url}));
-  } else {
-    return newOptions.merge(new RequestOptions({url: url}));
-  }
-}
-
-/**
- * Performs http requests using `XMLHttpRequest` as the default backend.
- *
- * `Http` is available as an injectable class, with methods to perform http requests. Calling
- * `request` returns an {@link EventEmitter} which will emit a single {@link Response} when a
- * response is received.
- *
- *
- * ## Breaking Change
- *
- * Previously, methods of `Http` would return an RxJS Observable directly. For now,
- * the `toRx()` method of {@link EventEmitter} needs to be called in order to get the RxJS
- * Subject. `EventEmitter` does not provide combinators like `map`, and has different semantics for
- * subscribing/observing. This is temporary; the result of all `Http` method calls will be either an
- * Observable
- * or Dart Stream when [issue #2794](https://github.com/angular/angular/issues/2794) is resolved.
- *
- * #Example
- *
- * ```
- * import {Http, httpInjectables} from 'angular2/http';
- * @Component({selector: 'http-app', viewInjector: [httpInjectables]})
- * @View({templateUrl: 'people.html'})
- * class PeopleComponent {
- *   constructor(http: Http) {
- *     http.get('people.json')
- *       //Get the RxJS Subject
- *       .toRx()
- *       // Call map on the response observable to get the parsed people object
- *       .map(res => res.json())
- *       // Subscribe to the observable to get the parsed people object and attach it to the
- *       // component
- *       .subscribe(people => this.people = people);
- *   }
- * }
- * ```
- *
- * To use the {@link EventEmitter} returned by `Http`, simply pass a generator (See "interface
- *Generator" in the Async Generator spec: https://github.com/jhusain/asyncgenerator) to the
- *`observer` method of the returned emitter, with optional methods of `next`, `throw`, and `return`.
- *
- * #Example
- *
- * ```
- * http.get('people.json').observer({next: (value) => this.people = people});
- * ```
- *
- * The default construct used to perform requests, `XMLHttpRequest`, is abstracted as a "Backend" (
- * {@link XHRBackend} in this case), which could be mocked with dependency injection by replacing
- * the {@link XHRBackend} binding, as in the following example:
- *
- * #Example
- *
- * ```
- * import {MockBackend, BaseRequestOptions, Http} from 'angular2/http';
- * var injector = Injector.resolveAndCreate([
- *   BaseRequestOptions,
- *   MockBackend,
- *   bind(Http).toFactory(
- *       function(backend, defaultOptions) {
- *         return new Http(backend, defaultOptions);
- *       },
- *       [MockBackend, BaseRequestOptions])
- * ]);
- * var http = injector.get(Http);
- * http.get('request-from-mock-backend.json').toRx().subscribe((res:Response) => doSomething(res));
- * ```
- *
- **/
-@Injectable()
-export class Http {
-  constructor(private _backend: ConnectionBackend, private _defaultOptions: RequestOptions) {}
-
-  /**
-   * Performs any type of http request. First argument is required, and can either be a url or
-   * a {@link Request} instance. If the first argument is a url, an optional {@link RequestOptions}
-   * object can be provided as the 2nd argument. The options object will be merged with the values
-   * of {@link BaseRequestOptions} before performing the request.
-   */
-  request(url: string | Request, options?: IRequestOptions): EventEmitter {
-    var responseObservable: EventEmitter;
-    if (isString(url)) {
-      responseObservable = httpRequest(
-          this._backend,
-          new Request(mergeOptions(this._defaultOptions, options, RequestMethods.GET, url)));
-    } else if (url instanceof Request) {
-      responseObservable = httpRequest(this._backend, url);
-    }
-    return responseObservable;
-  }
-
-  /**
-   * Performs a request with `get` http method.
-   */
-  get(url: string, options?: IRequestOptions): EventEmitter {
-    return httpRequest(this._backend, new Request(mergeOptions(this._defaultOptions, options,
-                                                               RequestMethods.GET, url)));
-  }
-
-  /**
-   * Performs a request with `post` http method.
-   */
-  post(url: string, body: string, options?: IRequestOptions): EventEmitter {
-    return httpRequest(
-        this._backend,
-        new Request(mergeOptions(this._defaultOptions.merge(new RequestOptions({body: body})),
-                                 options, RequestMethods.POST, url)));
-  }
-
-  /**
-   * Performs a request with `put` http method.
-   */
-  put(url: string, body: string, options?: IRequestOptions): EventEmitter {
-    return httpRequest(
-        this._backend,
-        new Request(mergeOptions(this._defaultOptions.merge(new RequestOptions({body: body})),
-                                 options, RequestMethods.PUT, url)));
-  }
-
-  /**
-   * Performs a request with `delete` http method.
-   */
-  delete (url: string, options?: IRequestOptions): EventEmitter {
-    return httpRequest(this._backend, new Request(mergeOptions(this._defaultOptions, options,
-                                                               RequestMethods.DELETE, url)));
-  }
-
-  /**
-   * Performs a request with `patch` http method.
-   */
-  patch(url: string, body: string, options?: IRequestOptions): EventEmitter {
-    return httpRequest(
-        this._backend,
-        new Request(mergeOptions(this._defaultOptions.merge(new RequestOptions({body: body})),
-                                 options, RequestMethods.PATCH, url)));
-  }
-
-  /**
-   * Performs a request with `head` http method.
-   */
-  head(url: string, options?: IRequestOptions): EventEmitter {
-    return httpRequest(this._backend, new Request(mergeOptions(this._defaultOptions, options,
-                                                               RequestMethods.HEAD, url)));
-  }
-}
diff --git a/modules/angular2/src/http/interfaces.ts b/modules/angular2/src/http/interfaces.ts
deleted file mode 100644
index d79654238281..000000000000
--- a/modules/angular2/src/http/interfaces.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/// <reference path="../../typings/rx/rx.d.ts" />
-
-import {
-  ReadyStates,
-  RequestModesOpts,
-  RequestMethods,
-  RequestCacheOpts,
-  RequestCredentialsOpts,
-  ResponseTypes
-} from './enums';
-import {Headers} from './headers';
-import {BaseException} from 'angular2/src/facade/lang';
-import {EventEmitter} from 'angular2/src/facade/async';
-import {Request} from './static_request';
-
-/**
- * Abstract class from which real backends are derived.
- *
- * The primary purpose of a `ConnectionBackend` is to create new connections to fulfill a given
- * {@link Request}.
- */
-export class ConnectionBackend {
-  constructor() {}
-  createConnection(request: any): Connection { throw new BaseException('Abstract!'); }
-}
-
-/**
- * Abstract class from which real connections are derived.
- */
-export class Connection {
-  readyState: ReadyStates;
-  request: Request;
-  response: EventEmitter;  // TODO: generic of <Response>;
-  dispose(): void { throw new BaseException('Abstract!'); }
-}
-
-/**
- * Interface for options to construct a Request, based on
- * [RequestInit](https://fetch.spec.whatwg.org/#requestinit) from the Fetch spec.
- */
-export interface IRequestOptions {
-  url?: string;
-  method?: RequestMethods;
-  headers?: Headers;
-  // TODO: Support Blob, ArrayBuffer, JSON, URLSearchParams, FormData
-  body?: string;
-  mode?: RequestModesOpts;
-  credentials?: RequestCredentialsOpts;
-  cache?: RequestCacheOpts;
-}
-
-/**
- * Interface for options to construct a Response, based on
- * [ResponseInit](https://fetch.spec.whatwg.org/#responseinit) from the Fetch spec.
- */
-export interface IResponseOptions {
-  // TODO: Support Blob, ArrayBuffer, JSON
-  body?: string | Object | FormData;
-  status?: number;
-  statusText?: string;
-  headers?: Headers;
-  type?: ResponseTypes;
-  url?: string;
-}
diff --git a/modules/angular2/src/http/static_request.ts b/modules/angular2/src/http/static_request.ts
deleted file mode 100644
index e246a5ecb41f..000000000000
--- a/modules/angular2/src/http/static_request.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import {RequestMethods, RequestModesOpts, RequestCredentialsOpts, RequestCacheOpts} from './enums';
-import {RequestOptions} from './base_request_options';
-import {Headers} from './headers';
-import {
-  BaseException,
-  RegExpWrapper,
-  CONST_EXPR,
-  isPresent,
-  isJsObject
-} from 'angular2/src/facade/lang';
-
-// TODO(jeffbcross): properly implement body accessors
-/**
- * Creates `Request` instances from provided values.
- *
- * The Request's interface is inspired by the Request constructor defined in the [Fetch
- * Spec](https://fetch.spec.whatwg.org/#request-class),
- * but is considered a static value whose body can be accessed many times. There are other
- * differences in the implementation, but this is the most significant.
- */
-export class Request {
-  /**
-   * Http method with which to perform the request.
-   *
-   * Defaults to GET.
-   */
-  method: RequestMethods;
-  mode: RequestModesOpts;
-  credentials: RequestCredentialsOpts;
-  /**
-   * Headers object based on the `Headers` class in the [Fetch
-   * Spec](https://fetch.spec.whatwg.org/#headers-class). {@link Headers} class reference.
-   */
-  headers: Headers;
-  /** Url of the remote resource */
-  url: string;
-  // TODO: support URLSearchParams | FormData | Blob | ArrayBuffer
-  private _body: string;
-  cache: RequestCacheOpts;
-  constructor(requestOptions: RequestOptions) {
-    // TODO: assert that url is present
-    this.url = requestOptions.url;
-    this._body = requestOptions.body;
-    this.method = requestOptions.method;
-    // TODO(jeffbcross): implement behavior
-    this.mode = requestOptions.mode;
-    // Defaults to 'omit', consistent with browser
-    // TODO(jeffbcross): implement behavior
-    this.credentials = requestOptions.credentials;
-    this.headers = new Headers(requestOptions.headers);
-    this.cache = requestOptions.cache;
-  }
-
-
-  /**
-   * Returns the request's body as string, assuming that body exists. If body is undefined, return
-   * empty
-   * string.
-   */
-  text(): String { return isPresent(this._body) ? this._body.toString() : ''; }
-}
diff --git a/modules/angular2/src/http/static_response.ts b/modules/angular2/src/http/static_response.ts
deleted file mode 100644
index dc0516dc0453..000000000000
--- a/modules/angular2/src/http/static_response.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import {ResponseTypes} from './enums';
-import {
-  BaseException,
-  CONST_EXPR,
-  isJsObject,
-  isString,
-  isPresent,
-  Json
-} from 'angular2/src/facade/lang';
-import {Headers} from './headers';
-import {ResponseOptions} from './base_response_options';
-
-/**
- * Creates `Response` instances from provided values.
- *
- * Though this object isn't
- * usually instantiated by end-users, it is the primary object interacted with when it comes time to
- * add data to a view.
- *
- * #Example
- *
- * ```
- * http.request('my-friends.txt').subscribe(response => this.friends = response.text());
- * ```
- *
- * The Response's interface is inspired by the Response constructor defined in the [Fetch
- * Spec](https://fetch.spec.whatwg.org/#response-class), but is considered a static value whose body
- * can be accessed many times. There are other differences in the implementation, but this is the
- * most significant.
- */
-export class Response {
-  /**
-   * One of "basic", "cors", "default", "error, or "opaque".
-   *
-   * Defaults to "default".
-   */
-  type: ResponseTypes;
-  /**
-   * True if the response's status is within 200-299
-   */
-  ok: boolean;
-  /**
-   * URL of response.
-   *
-   * Defaults to empty string.
-   */
-  url: string;
-  /**
-   * Status code returned by server.
-   *
-   * Defaults to 200.
-   */
-  status: number;
-  /**
-   * Text representing the corresponding reason phrase to the `status`, as defined in [ietf rfc 2616
-   * section 6.1.1](https://tools.ietf.org/html/rfc2616#section-6.1.1)
-   *
-   * Defaults to "OK"
-   */
-  statusText: string;
-  /**
-   * Non-standard property
-   *
-   * Denotes how many of the response body's bytes have been loaded, for example if the response is
-   * the result of a progress event.
-   */
-  bytesLoaded: number;
-  /**
-   * Non-standard property
-   *
-   * Denotes how many bytes are expected in the final response body.
-   */
-  totalBytes: number;
-  /**
-   * Headers object based on the `Headers` class in the [Fetch
-   * Spec](https://fetch.spec.whatwg.org/#headers-class).
-   */
-  headers: Headers;
-  // TODO: Support ArrayBuffer, JSON, FormData, Blob
-  private _body: string | Object;
-  constructor(responseOptions: ResponseOptions) {
-    this._body = responseOptions.body;
-    this.status = responseOptions.status;
-    this.statusText = responseOptions.statusText;
-    this.headers = responseOptions.headers;
-    this.type = responseOptions.type;
-    this.url = responseOptions.url;
-  }
-
-  /**
-   * Not yet implemented
-   */
-  // TODO: Blob return type
-  blob(): any { throw new BaseException('"blob()" method not implemented on Response superclass'); }
-
-  /**
-   * Attempts to return body as parsed `JSON` object, or raises an exception.
-   */
-  json(): Object {
-    var jsonResponse;
-    if (isJsObject(this._body)) {
-      jsonResponse = this._body;
-    } else if (isString(this._body)) {
-      jsonResponse = Json.parse(<string>this._body);
-    }
-    return jsonResponse;
-  }
-
-  /**
-   * Returns the body as a string, presuming `toString()` can be called on the response body.
-   */
-  text(): string { return this._body.toString(); }
-
-  /**
-   * Not yet implemented
-   */
-  // TODO: ArrayBuffer return type
-  arrayBuffer(): any {
-    throw new BaseException('"arrayBuffer()" method not implemented on Response superclass');
-  }
-}
diff --git a/modules/angular2/src/http/url_search_params.ts b/modules/angular2/src/http/url_search_params.ts
deleted file mode 100644
index 1481a5c95893..000000000000
--- a/modules/angular2/src/http/url_search_params.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {isPresent, isBlank, StringWrapper} from 'angular2/src/facade/lang';
-import {
-  Map,
-  MapWrapper,
-  List,
-  ListWrapper,
-  isListLikeIterable
-} from 'angular2/src/facade/collection';
-
-function paramParser(rawParams: string): Map<string, List<string>> {
-  var map: Map<string, List<string>> = new Map();
-  var params: List<string> = StringWrapper.split(rawParams, new RegExp('&'));
-  ListWrapper.forEach(params, (param: string) => {
-    var split: List<string> = StringWrapper.split(param, new RegExp('='));
-    var key = ListWrapper.get(split, 0);
-    var val = ListWrapper.get(split, 1);
-    var list = isPresent(map.get(key)) ? map.get(key) : [];
-    list.push(val);
-    map.set(key, list);
-  });
-  return map;
-}
-
-/**
- * Map-like representation of url search parameters, based on
- * [URLSearchParams](https://url.spec.whatwg.org/#urlsearchparams) in the url living standard.
- *
- */
-export class URLSearchParams {
-  paramsMap: Map<string, List<string>>;
-  constructor(public rawParams: string) { this.paramsMap = paramParser(rawParams); }
-
-  has(param: string): boolean { return this.paramsMap.has(param); }
-
-  get(param: string): string {
-    var storedParam = this.paramsMap.get(param);
-    if (isListLikeIterable(storedParam)) {
-      return ListWrapper.first(storedParam);
-    } else {
-      return null;
-    }
-  }
-
-  getAll(param: string): List<string> {
-    var mapParam = this.paramsMap.get(param);
-    return isPresent(mapParam) ? mapParam : [];
-  }
-
-  append(param: string, val: string): void {
-    var mapParam = this.paramsMap.get(param);
-    var list = isPresent(mapParam) ? mapParam : [];
-    list.push(val);
-    this.paramsMap.set(param, list);
-  }
-
-  toString(): string {
-    var paramsList = [];
-    MapWrapper.forEach(this.paramsMap, (values, k) => {
-      ListWrapper.forEach(values, v => { paramsList.push(k + '=' + v); });
-    });
-    return ListWrapper.join(paramsList, '&');
-  }
-
-  delete (param): void { MapWrapper.delete(this.paramsMap, param); }
-}
diff --git a/modules/angular2/src/mock/location_mock.ts b/modules/angular2/src/mock/location_mock.ts
deleted file mode 100644
index 868c61f34943..000000000000
--- a/modules/angular2/src/mock/location_mock.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import {SpyObject, proxy} from 'angular2/test_lib';
-
-import {IMPLEMENTS} from 'angular2/src/facade/lang';
-import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {Location} from 'angular2/src/router/location';
-
-
-@proxy
-@IMPLEMENTS(Location)
-export class SpyLocation extends SpyObject {
-  urlChanges: List<string>;
-  _path: string;
-  _subject: EventEmitter;
-  _baseHref: string;
-
-  constructor() {
-    super();
-    this._path = '';
-    this.urlChanges = [];
-    this._subject = new EventEmitter();
-    this._baseHref = '';
-  }
-
-  setInitialPath(url: string) { this._path = url; }
-
-  setBaseHref(url: string) { this._baseHref = url; }
-
-  path(): string { return this._path; }
-
-  simulateUrlPop(pathname: string) { ObservableWrapper.callNext(this._subject, {'url': pathname}); }
-
-  normalizeAbsolutely(url): string { return this._baseHref + url; }
-
-  go(url: string) {
-    url = this.normalizeAbsolutely(url);
-    if (this._path == url) {
-      return;
-    }
-    this._path = url;
-    this.urlChanges.push(url);
-  }
-
-  forward() {
-    // TODO
-  }
-
-  back() {
-    // TODO
-  }
-
-  subscribe(onNext, onThrow = null, onReturn = null) {
-    ObservableWrapper.subscribe(this._subject, onNext, onThrow, onReturn);
-  }
-
-  noSuchMethod(m) { super.noSuchMethod(m); }
-}
diff --git a/modules/angular2/src/mock/mock_location_strategy.ts b/modules/angular2/src/mock/mock_location_strategy.ts
deleted file mode 100644
index 689e0434ecfd..000000000000
--- a/modules/angular2/src/mock/mock_location_strategy.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-import {List} from 'angular2/src/facade/collection';
-import {LocationStrategy} from 'angular2/src/router/location_strategy';
-
-
-export class MockLocationStrategy extends LocationStrategy {
-  internalBaseHref: string = '/';
-  internalPath: string = '/';
-  internalTitle: string = '';
-  urlChanges: List<string> = [];
-  _subject: EventEmitter = new EventEmitter();
-  constructor() { super(); }
-
-  simulatePopState(url): void {
-    this.internalPath = url;
-    ObservableWrapper.callNext(this._subject, null);
-  }
-
-  path(): string { return this.internalPath; }
-
-  simulateUrlPop(pathname: string): void {
-    ObservableWrapper.callNext(this._subject, {'url': pathname});
-  }
-
-  pushState(ctx: any, title: string, url: string): void {
-    this.internalTitle = title;
-    this.internalPath = url;
-    this.urlChanges.push(url);
-  }
-
-  onPopState(fn): void { ObservableWrapper.subscribe(this._subject, fn); }
-
-  getBaseHref(): string { return this.internalBaseHref; }
-}
diff --git a/modules/angular2/src/mock/ng_zone_mock.ts b/modules/angular2/src/mock/ng_zone_mock.ts
deleted file mode 100644
index 64b53a39d137..000000000000
--- a/modules/angular2/src/mock/ng_zone_mock.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
-
-export class MockNgZone extends NgZone {
-  constructor() { super({enableLongStackTrace: false}); }
-
-  run(fn): any { return fn(); }
-
-  runOutsideAngular(fn): any { return fn(); }
-}
diff --git a/modules/angular2/src/mock/view_resolver_mock.ts b/modules/angular2/src/mock/view_resolver_mock.ts
deleted file mode 100644
index 446e8f252db5..000000000000
--- a/modules/angular2/src/mock/view_resolver_mock.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import {Map, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {Type, isPresent, BaseException, stringify, isBlank} from 'angular2/src/facade/lang';
-
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {ViewResolver} from 'angular2/src/core/compiler/view_resolver';
-
-export class MockViewResolver extends ViewResolver {
-  _views: Map<Type, View> = new Map();
-  _inlineTemplates: Map<Type, string> = new Map();
-  _viewCache: Map<Type, View> = new Map();
-  _directiveOverrides: Map<Type, Map<Type, Type>> = new Map();
-
-  constructor() { super(); }
-
-  /**
-   * Overrides the {@link View} for a component.
-   *
-   * @param {Type} component
-   * @param {ViewDefinition} view
-   */
-  setView(component: Type, view: View): void {
-    this._checkOverrideable(component);
-    this._views.set(component, view);
-  }
-
-  /**
-   * Overrides the inline template for a component - other configuration remains unchanged.
-   *
-   * @param {Type} component
-   * @param {string} template
-   */
-  setInlineTemplate(component: Type, template: string): void {
-    this._checkOverrideable(component);
-    this._inlineTemplates.set(component, template);
-  }
-
-  /**
-   * Overrides a directive from the component {@link View}.
-   *
-   * @param {Type} component
-   * @param {Type} from
-   * @param {Type} to
-   */
-  overrideViewDirective(component: Type, from: Type, to: Type): void {
-    this._checkOverrideable(component);
-
-    var overrides = this._directiveOverrides.get(component);
-
-    if (isBlank(overrides)) {
-      overrides = new Map();
-      this._directiveOverrides.set(component, overrides);
-    }
-
-    overrides.set(from, to);
-  }
-
-  /**
-   * Returns the {@link View} for a component:
-   * - Set the {@link View} to the overridden view when it exists or fallback to the default
-   * `ViewResolver`,
-   *   see `setView`.
-   * - Override the directives, see `overrideViewDirective`.
-   * - Override the @View definition, see `setInlineTemplate`.
-   *
-   * @param component
-   * @returns {ViewDefinition}
-   */
-  resolve(component: Type): View {
-    var view = this._viewCache.get(component);
-    if (isPresent(view)) return view;
-
-    view = this._views.get(component);
-    if (isBlank(view)) {
-      view = super.resolve(component);
-    }
-
-    var directives = view.directives;
-    var overrides = this._directiveOverrides.get(component);
-
-    if (isPresent(overrides) && isPresent(directives)) {
-      directives = ListWrapper.clone(view.directives);
-      MapWrapper.forEach(overrides, (to, from) => {
-        var srcIndex = directives.indexOf(from);
-        if (srcIndex == -1) {
-          throw new BaseException(
-              `Overriden directive ${stringify(from)} not found in the template of ${stringify(component)}`);
-        }
-        directives[srcIndex] = to;
-      });
-      view = new View(
-          {template: view.template, templateUrl: view.templateUrl, directives: directives});
-    }
-
-    var inlineTemplate = this._inlineTemplates.get(component);
-    if (isPresent(inlineTemplate)) {
-      view = new View({template: inlineTemplate, templateUrl: null, directives: view.directives});
-    }
-
-    this._viewCache.set(component, view);
-    return view;
-  }
-
-  /**
-   * Once a component has been compiled, the AppProtoView is stored in the compiler cache.
-   *
-   * Then it should not be possible to override the component configuration after the component
-   * has been compiled.
-   *
-   * @param {Type} component
-   */
-  _checkOverrideable(component: Type): void {
-    var cached = this._viewCache.get(component);
-
-    if (isPresent(cached)) {
-      throw new BaseException(
-          `The component ${stringify(component)} has already been compiled, its configuration can not be changed`);
-    }
-  }
-}
diff --git a/modules/angular2/src/reflection/debug_reflection_capabilities.dart b/modules/angular2/src/reflection/debug_reflection_capabilities.dart
deleted file mode 100644
index d044444cbd4a..000000000000
--- a/modules/angular2/src/reflection/debug_reflection_capabilities.dart
+++ /dev/null
@@ -1,55 +0,0 @@
-library reflection.debug_reflection_capabilities;
-
-import 'package:logging/logging.dart';
-import 'package:stack_trace/stack_trace.dart';
-import 'types.dart';
-import 'reflection_capabilities.dart' as standard;
-
-class ReflectionCapabilities extends standard.ReflectionCapabilities {
-  final bool _verbose;
-  final Logger _log = new Logger('ReflectionCapabilities');
-
-  ReflectionCapabilities({bool verbose: false})
-      : _verbose = verbose,
-        super() {
-    Logger.root.level = _verbose ? Level.ALL : Level.INFO;
-    Logger.root.onRecord.listen((LogRecord rec) {
-      print('[${rec.loggerName}(${rec.level.name})]: ${rec.message}');
-    });
-  }
-
-  void _notify(String methodName, param) {
-    var trace = _verbose ? ' ${Trace.format(new Trace.current())}' : '';
-    _log.info('"$methodName" requested for "$param".$trace');
-  }
-
-  Function factory(Type type) {
-    _notify('factory', type);
-    return super.factory(type);
-  }
-
-  List<List> parameters(typeOrFunc) {
-    _notify('parameters', typeOrFunc);
-    return super.parameters(typeOrFunc);
-  }
-
-  List annotations(typeOrFunc) {
-    _notify('annotations', typeOrFunc);
-    return super.annotations(typeOrFunc);
-  }
-
-  GetterFn getter(String name) {
-    _notify('getter', name);
-    return super.getter(name);
-  }
-
-  SetterFn setter(String name) {
-    _notify('setter', name);
-    return super.setter(name);
-  }
-
-  MethodFn method(String name) {
-    _notify('method', name);
-    return super.method(name);
-  }
-}
diff --git a/modules/angular2/src/reflection/platform_reflection_capabilities.ts b/modules/angular2/src/reflection/platform_reflection_capabilities.ts
deleted file mode 100644
index 58830d5d8bfb..000000000000
--- a/modules/angular2/src/reflection/platform_reflection_capabilities.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Type} from 'angular2/src/facade/lang';
-import {GetterFn, SetterFn, MethodFn} from './types';
-import {List} from 'angular2/src/facade/collection';
-
-export interface PlatformReflectionCapabilities {
-  factory(type: Type): Function;
-  interfaces(type: Type): List<any>;
-  parameters(type: Type): List<List<any>>;
-  annotations(type: Type): List<any>;
-  getter(name: string): GetterFn;
-  setter(name: string): SetterFn;
-  method(name: string): MethodFn;
-}
diff --git a/modules/angular2/src/reflection/reflection.dart b/modules/angular2/src/reflection/reflection.dart
deleted file mode 100644
index 8c8849b34ecc..000000000000
--- a/modules/angular2/src/reflection/reflection.dart
+++ /dev/null
@@ -1,39 +0,0 @@
-library reflection.reflection;
-
-import 'reflector.dart';
-import 'types.dart';
-export 'reflector.dart';
-import 'platform_reflection_capabilities.dart';
-import 'package:angular2/src/facade/lang.dart';
-
-class NoReflectionCapabilities implements PlatformReflectionCapabilities {
-  Function factory(Type type) {
-    throw "Cannot find reflection information on ${stringify(type)}";
-  }
-
-  List interfaces(Type type) {
-    throw "Cannot find reflection information on ${stringify(type)}";
-  }
-
-  List parameters(Type type) {
-    throw "Cannot find reflection information on ${stringify(type)}";
-  }
-
-  List annotations(Type type) {
-    throw "Cannot find reflection information on ${stringify(type)}";
-  }
-
-  GetterFn getter(String name) {
-    throw "Cannot find getter ${name}";
-  }
-
-  SetterFn setter(String name) {
-    throw "Cannot find setter ${name}";
-  }
-
-  MethodFn method(String name) {
-    throw "Cannot find method ${name}";
-  }
-}
-
-final Reflector reflector = new Reflector(new NoReflectionCapabilities());
diff --git a/modules/angular2/src/reflection/reflection.ts b/modules/angular2/src/reflection/reflection.ts
deleted file mode 100644
index 1a6aa039211b..000000000000
--- a/modules/angular2/src/reflection/reflection.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {Type, isPresent} from 'angular2/src/facade/lang';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {Reflector} from './reflector';
-export {Reflector} from './reflector';
-import {ReflectionCapabilities} from './reflection_capabilities';
-
-export var reflector = new Reflector(new ReflectionCapabilities());
diff --git a/modules/angular2/src/reflection/reflection_capabilities.dart b/modules/angular2/src/reflection/reflection_capabilities.dart
deleted file mode 100644
index ab82be182f47..000000000000
--- a/modules/angular2/src/reflection/reflection_capabilities.dart
+++ /dev/null
@@ -1,150 +0,0 @@
-library reflection.reflection_capabilities;
-
-import 'package:angular2/src/facade/lang.dart';
-import 'types.dart';
-import 'dart:mirrors';
-import 'platform_reflection_capabilities.dart';
-
-class ReflectionCapabilities implements PlatformReflectionCapabilities {
-  ReflectionCapabilities([metadataReader]) {}
-
-  Function factory(Type type) {
-    ClassMirror classMirror = reflectType(type);
-    MethodMirror ctor = classMirror.declarations[classMirror.simpleName];
-    Function create = classMirror.newInstance;
-    Symbol name = ctor.constructorName;
-    int length = ctor.parameters.length;
-
-    switch (length) {
-      case 0:
-        return () => create(name, []).reflectee;
-      case 1:
-        return (a1) => create(name, [a1]).reflectee;
-      case 2:
-        return (a1, a2) => create(name, [a1, a2]).reflectee;
-      case 3:
-        return (a1, a2, a3) => create(name, [a1, a2, a3]).reflectee;
-      case 4:
-        return (a1, a2, a3, a4) => create(name, [a1, a2, a3, a4]).reflectee;
-      case 5:
-        return (a1, a2, a3, a4, a5) =>
-            create(name, [a1, a2, a3, a4, a5]).reflectee;
-      case 6:
-        return (a1, a2, a3, a4, a5, a6) =>
-            create(name, [a1, a2, a3, a4, a5, a6]).reflectee;
-      case 7:
-        return (a1, a2, a3, a4, a5, a6, a7) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7]).reflectee;
-      case 8:
-        return (a1, a2, a3, a4, a5, a6, a7, a8) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8]).reflectee;
-      case 9:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9]).reflectee;
-      case 10:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10]).reflectee;
-      case 11:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11]).reflectee;
-      case 12:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12]).reflectee;
-      case 13:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13]).reflectee;
-      case 14:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14]).reflectee;
-      case 15:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15]).reflectee;
-      case 16:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16]).reflectee;
-      case 17:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17]).reflectee;
-      case 18:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18]).reflectee;
-      case 19:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18, a19) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18, a19]).
-                reflectee;
-      case 20:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18, a19, a20) =>
-            create(name, [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18, a19, a20]).
-                reflectee;
-    }
-
-    throw "Cannot create a factory for '${stringify(type)}' because its constructor has more than 20 arguments";
-  }
-
-  List<List> parameters(typeOrFunc) {
-    final parameters = typeOrFunc is Type
-        ? _constructorParameters(typeOrFunc)
-        : _functionParameters(typeOrFunc);
-    return parameters.map(_convertParameter).toList();
-  }
-
-  List _convertParameter(ParameterMirror p) {
-    var t = p.type;
-    var res = (!t.hasReflectedType || t.reflectedType == dynamic)
-        ? []
-        : [t.reflectedType];
-    res.addAll(p.metadata.map((m) => m.reflectee));
-    return res;
-  }
-
-  List annotations(typeOrFunc) {
-    final meta = typeOrFunc is Type
-        ? _constructorMetadata(typeOrFunc)
-        : _functionMetadata(typeOrFunc);
-
-    return meta.map((m) => m.reflectee).toList();
-  }
-
-  List interfaces(type) {
-    ClassMirror classMirror = reflectType(type);
-    return classMirror.superinterfaces.map((si) => si.reflectedType).toList();
-  }
-
-  GetterFn getter(String name) {
-    var symbol = new Symbol(name);
-    return (receiver) => reflect(receiver).getField(symbol).reflectee;
-  }
-
-  SetterFn setter(String name) {
-    var symbol = new Symbol(name);
-    return (receiver, value) =>
-        reflect(receiver).setField(symbol, value).reflectee;
-  }
-
-  MethodFn method(String name) {
-    var symbol = new Symbol(name);
-    return (receiver, posArgs) =>
-        reflect(receiver).invoke(symbol, posArgs).reflectee;
-  }
-
-  List _functionParameters(Function func) {
-    var closureMirror = reflect(func);
-    return closureMirror.function.parameters;
-  }
-
-  List _constructorParameters(Type type) {
-    ClassMirror classMirror = reflectType(type);
-    MethodMirror ctor = classMirror.declarations[classMirror.simpleName];
-    return ctor.parameters;
-  }
-
-  List _functionMetadata(Function func) {
-    var closureMirror = reflect(func);
-    return closureMirror.function.metadata;
-  }
-
-  List _constructorMetadata(Type type) {
-    ClassMirror classMirror = reflectType(type);
-    return classMirror.metadata;
-  }
-}
diff --git a/modules/angular2/src/reflection/reflection_capabilities.ts b/modules/angular2/src/reflection/reflection_capabilities.ts
deleted file mode 100644
index a80b67a13b15..000000000000
--- a/modules/angular2/src/reflection/reflection_capabilities.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import {
-  Type,
-  isPresent,
-  isFunction,
-  global,
-  stringify,
-  BaseException
-} from 'angular2/src/facade/lang';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {GetterFn, SetterFn, MethodFn} from './types';
-import {PlatformReflectionCapabilities} from 'platform_reflection_capabilities';
-
-export class ReflectionCapabilities implements PlatformReflectionCapabilities {
-  private _reflect: any;
-
-  constructor(reflect?: any) { this._reflect = isPresent(reflect) ? reflect : global.Reflect; }
-
-  factory(t: Type): Function {
-    switch (t.length) {
-      case 0:
-        return () => new t();
-      case 1:
-        return (a1) => new t(a1);
-      case 2:
-        return (a1, a2) => new t(a1, a2);
-      case 3:
-        return (a1, a2, a3) => new t(a1, a2, a3);
-      case 4:
-        return (a1, a2, a3, a4) => new t(a1, a2, a3, a4);
-      case 5:
-        return (a1, a2, a3, a4, a5) => new t(a1, a2, a3, a4, a5);
-      case 6:
-        return (a1, a2, a3, a4, a5, a6) => new t(a1, a2, a3, a4, a5, a6);
-      case 7:
-        return (a1, a2, a3, a4, a5, a6, a7) => new t(a1, a2, a3, a4, a5, a6, a7);
-      case 8:
-        return (a1, a2, a3, a4, a5, a6, a7, a8) => new t(a1, a2, a3, a4, a5, a6, a7, a8);
-      case 9:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9) => new t(a1, a2, a3, a4, a5, a6, a7, a8, a9);
-      case 10:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10) =>
-                   new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10);
-      case 11:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11) =>
-                   new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11);
-      case 12:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12) =>
-                   new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12);
-      case 13:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13) =>
-                   new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13);
-      case 14:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14) =>
-                   new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14);
-      case 15:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15) =>
-                   new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15);
-      case 16:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16) =>
-                   new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16);
-      case 17:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17) =>
-                   new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16,
-                         a17);
-      case 18:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18) =>
-                   new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17,
-                         a18);
-      case 19:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18,
-                a19) => new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16,
-                              a17, a18, a19);
-      case 20:
-        return (a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18,
-                a19, a20) => new t(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15,
-                                   a16, a17, a18, a19, a20);
-    };
-
-    throw new Error(
-        `Cannot create a factory for '${stringify(t)}' because its constructor has more than 20 arguments`);
-  }
-
-  _zipTypesAndAnnotaions(paramTypes, paramAnnotations): List<List<any>> {
-    var result;
-
-    if (typeof paramTypes === 'undefined') {
-      result = ListWrapper.createFixedSize(paramAnnotations.length);
-    } else {
-      result = ListWrapper.createFixedSize(paramTypes.length);
-    }
-
-    for (var i = 0; i < result.length; i++) {
-      // TS outputs Object for parameters without types, while Traceur omits
-      // the annotations. For now we preserve the Traceur behavior to aid
-      // migration, but this can be revisited.
-      if (typeof paramTypes === 'undefined') {
-        result[i] = [];
-      } else if (paramTypes[i] != Object) {
-        result[i] = [paramTypes[i]];
-      } else {
-        result[i] = [];
-      }
-      if (isPresent(paramAnnotations) && isPresent(paramAnnotations[i])) {
-        result[i] = result[i].concat(paramAnnotations[i]);
-      }
-    }
-    return result;
-  }
-
-  parameters(typeOfFunc): List<List<any>> {
-    // Prefer the direct API.
-    if (isPresent(typeOfFunc.parameters)) {
-      return typeOfFunc.parameters;
-    }
-    if (isPresent(this._reflect) && isPresent(this._reflect.getMetadata)) {
-      var paramAnnotations = this._reflect.getMetadata('parameters', typeOfFunc);
-      var paramTypes = this._reflect.getMetadata('design:paramtypes', typeOfFunc);
-      if (isPresent(paramTypes) || isPresent(paramAnnotations)) {
-        return this._zipTypesAndAnnotaions(paramTypes, paramAnnotations);
-      }
-    }
-    return ListWrapper.createFixedSize(typeOfFunc.length);
-  }
-
-  annotations(typeOfFunc): List<any> {
-    // Prefer the direct API.
-    if (isPresent(typeOfFunc.annotations)) {
-      var annotations = typeOfFunc.annotations;
-      if (isFunction(annotations) && annotations.annotations) {
-        annotations = annotations.annotations;
-      }
-      return annotations;
-    }
-    if (isPresent(this._reflect) && isPresent(this._reflect.getMetadata)) {
-      var annotations = this._reflect.getMetadata('annotations', typeOfFunc);
-      if (isPresent(annotations)) return annotations;
-    }
-    return [];
-  }
-
-  interfaces(type): List<any> { throw new BaseException("JavaScript does not support interfaces"); }
-
-  getter(name: string): GetterFn { return <GetterFn>new Function('o', 'return o.' + name + ';'); }
-
-  setter(name: string): SetterFn {
-    return <SetterFn>new Function('o', 'v', 'return o.' + name + ' = v;');
-  }
-
-  method(name: string): MethodFn {
-    let functionBody = `if (!o.${name}) throw new Error('"${name}" is undefined');
-        return o.${name}.apply(o, args);`;
-    return <MethodFn>new Function('o', 'args', functionBody);
-  }
-}
diff --git a/modules/angular2/src/reflection/reflector.ts b/modules/angular2/src/reflection/reflector.ts
deleted file mode 100644
index b6f91829ccd9..000000000000
--- a/modules/angular2/src/reflection/reflector.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import {Type, isPresent, stringify, BaseException} from 'angular2/src/facade/lang';
-import {
-  List,
-  ListWrapper,
-  Map,
-  MapWrapper,
-  StringMap,
-  StringMapWrapper
-} from 'angular2/src/facade/collection';
-import {SetterFn, GetterFn, MethodFn} from './types';
-import {PlatformReflectionCapabilities} from './platform_reflection_capabilities';
-export {SetterFn, GetterFn, MethodFn} from './types';
-export {PlatformReflectionCapabilities} from './platform_reflection_capabilities';
-
-export class Reflector {
-  _typeInfo: Map<Type, any>;
-  _getters: Map<string, GetterFn>;
-  _setters: Map<string, SetterFn>;
-  _methods: Map<string, MethodFn>;
-  reflectionCapabilities: PlatformReflectionCapabilities;
-
-  constructor(reflectionCapabilities: PlatformReflectionCapabilities) {
-    this._typeInfo = new Map();
-    this._getters = new Map();
-    this._setters = new Map();
-    this._methods = new Map();
-    this.reflectionCapabilities = reflectionCapabilities;
-  }
-
-  registerType(type: Type, typeInfo: StringMap<string, any>): void {
-    this._typeInfo.set(type, typeInfo);
-  }
-
-  registerGetters(getters: StringMap<string, GetterFn>): void {
-    _mergeMaps(this._getters, getters);
-  }
-
-  registerSetters(setters: StringMap<string, SetterFn>): void {
-    _mergeMaps(this._setters, setters);
-  }
-
-  registerMethods(methods: StringMap<string, MethodFn>): void {
-    _mergeMaps(this._methods, methods);
-  }
-
-  factory(type: Type): Function {
-    if (this._containsTypeInfo(type)) {
-      return this._getTypeInfoField(type, "factory", null);
-    } else {
-      return this.reflectionCapabilities.factory(type);
-    }
-  }
-
-  parameters(typeOrFunc): List<any> {
-    if (this._typeInfo.has(typeOrFunc)) {
-      return this._getTypeInfoField(typeOrFunc, "parameters", []);
-    } else {
-      return this.reflectionCapabilities.parameters(typeOrFunc);
-    }
-  }
-
-  annotations(typeOrFunc): List<any> {
-    if (this._typeInfo.has(typeOrFunc)) {
-      return this._getTypeInfoField(typeOrFunc, "annotations", []);
-    } else {
-      return this.reflectionCapabilities.annotations(typeOrFunc);
-    }
-  }
-
-  interfaces(type): List<any> {
-    if (this._typeInfo.has(type)) {
-      return this._getTypeInfoField(type, "interfaces", []);
-    } else {
-      return this.reflectionCapabilities.interfaces(type);
-    }
-  }
-
-  getter(name: string): GetterFn {
-    if (this._getters.has(name)) {
-      return this._getters.get(name);
-    } else {
-      return this.reflectionCapabilities.getter(name);
-    }
-  }
-
-  setter(name: string): SetterFn {
-    if (this._setters.has(name)) {
-      return this._setters.get(name);
-    } else {
-      return this.reflectionCapabilities.setter(name);
-    }
-  }
-
-  method(name: string): MethodFn {
-    if (this._methods.has(name)) {
-      return this._methods.get(name);
-    } else {
-      return this.reflectionCapabilities.method(name);
-    }
-  }
-
-  _getTypeInfoField(typeOrFunc, key, defaultValue) {
-    var res = this._typeInfo.get(typeOrFunc)[key];
-    return isPresent(res) ? res : defaultValue;
-  }
-
-  _containsTypeInfo(typeOrFunc) { return this._typeInfo.has(typeOrFunc); }
-}
-
-function _mergeMaps(target: Map<any, any>, config: StringMap<string, Function>): void {
-  StringMapWrapper.forEach(config, (v, k) => target.set(k, v));
-}
diff --git a/modules/angular2/src/reflection/types.dart b/modules/angular2/src/reflection/types.dart
deleted file mode 100644
index d1bc7fc9a6c4..000000000000
--- a/modules/angular2/src/reflection/types.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library reflection.types;
-
-typedef SetterFn(Object obj, value);
-typedef GetterFn(Object obj);
-typedef MethodFn(Object obj, List args);
diff --git a/modules/angular2/src/reflection/types.ts b/modules/angular2/src/reflection/types.ts
deleted file mode 100644
index b94568f7a89b..000000000000
--- a/modules/angular2/src/reflection/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import {Type} from 'angular2/src/facade/lang';
-import {List} from 'angular2/src/facade/collection';
-
-export type SetterFn = (obj: any, value: any) => void;
-export type GetterFn = (obj: any) => any;
-export type MethodFn = (obj: any, args: List<any>) => any;
diff --git a/modules/angular2/src/render/api.ts b/modules/angular2/src/render/api.ts
deleted file mode 100644
index d72a81af9e8a..000000000000
--- a/modules/angular2/src/render/api.ts
+++ /dev/null
@@ -1,426 +0,0 @@
-import {isPresent, isBlank, RegExpWrapper} from 'angular2/src/facade/lang';
-import {Promise} from 'angular2/src/facade/async';
-import {List, Map, MapWrapper, StringMap, StringMapWrapper} from 'angular2/src/facade/collection';
-import {ASTWithSource} from 'angular2/change_detection';
-
-/**
- * General notes:
- *
- * The methods for creating / destroying views in this API are used in the AppViewHydrator
- * and RenderViewHydrator as well.
- *
- * We are already parsing expressions on the render side:
- * - this makes the ElementBinders more compact
- *   (e.g. no need to distinguish interpolations from regular expressions from literals)
- * - allows to retrieve which properties should be accessed from the event
- *   by looking at the expression
- * - we need the parse at least for the `template` attribute to match
- *   directives in it
- * - render compiler is not on the critical path as
- *   its output will be stored in precompiled templates.
- */
-
-export class EventBinding {
-  constructor(public fullName: string, public source: ASTWithSource) {}
-}
-
-export enum PropertyBindingType {
-  PROPERTY,
-  ATTRIBUTE,
-  CLASS,
-  STYLE
-}
-
-export class ElementPropertyBinding {
-  constructor(public type: PropertyBindingType, public astWithSource: ASTWithSource,
-              public property: string, public unit: string = null) {}
-}
-
-export class ElementBinder {
-  index: number;
-  parentIndex: number;
-  distanceToParent: number;
-  directives: List<DirectiveBinder>;
-  nestedProtoView: ProtoViewDto;
-  propertyBindings: List<ElementPropertyBinding>;
-  variableBindings: Map<string, string>;
-  // Note: this contains a preprocessed AST
-  // that replaced the values that should be extracted from the element
-  // with a local name
-  eventBindings: List<EventBinding>;
-  textBindings: List<ASTWithSource>;
-  readAttributes: Map<string, string>;
-
-  constructor({index, parentIndex, distanceToParent, directives, nestedProtoView, propertyBindings,
-               variableBindings, eventBindings, textBindings, readAttributes}: {
-    index?: number,
-    parentIndex?: number,
-    distanceToParent?: number,
-    directives?: List<DirectiveBinder>,
-    nestedProtoView?: ProtoViewDto,
-    propertyBindings?: List<ElementPropertyBinding>,
-    variableBindings?: Map<string, string>,
-    eventBindings?: List<EventBinding>,
-    textBindings?: List<ASTWithSource>,
-    readAttributes?: Map<string, string>
-  } = {}) {
-    this.index = index;
-    this.parentIndex = parentIndex;
-    this.distanceToParent = distanceToParent;
-    this.directives = directives;
-    this.nestedProtoView = nestedProtoView;
-    this.propertyBindings = propertyBindings;
-    this.variableBindings = variableBindings;
-    this.eventBindings = eventBindings;
-    this.textBindings = textBindings;
-    this.readAttributes = readAttributes;
-  }
-}
-
-export class DirectiveBinder {
-  // Index into the array of directives in the View instance
-  directiveIndex: number;
-  propertyBindings: Map<string, ASTWithSource>;
-  // Note: this contains a preprocessed AST
-  // that replaced the values that should be extracted from the element
-  // with a local name
-  eventBindings: List<EventBinding>;
-  hostPropertyBindings: List<ElementPropertyBinding>;
-  constructor({directiveIndex, propertyBindings, eventBindings, hostPropertyBindings}: {
-    directiveIndex?: number,
-    propertyBindings?: Map<string, ASTWithSource>,
-    eventBindings?: List<EventBinding>,
-    hostPropertyBindings?: List<ElementPropertyBinding>
-  }) {
-    this.directiveIndex = directiveIndex;
-    this.propertyBindings = propertyBindings;
-    this.eventBindings = eventBindings;
-    this.hostPropertyBindings = hostPropertyBindings;
-  }
-}
-
-export enum ViewType {
-  // A view that contains the host element with bound component directive.
-  // Contains a COMPONENT view
-  HOST,
-  // The view of the component
-  // Can contain 0 to n EMBEDDED views
-  COMPONENT,
-  // A view that is embedded into another View via a <template> element
-  // inside of a COMPONENT view
-  EMBEDDED
-}
-
-export class ProtoViewDto {
-  render: RenderProtoViewRef;
-  elementBinders: List<ElementBinder>;
-  variableBindings: Map<string, string>;
-  type: ViewType;
-
-  constructor({render, elementBinders, variableBindings, type}: {
-    render?: RenderProtoViewRef,
-    elementBinders?: List<ElementBinder>,
-    variableBindings?: Map<string, string>,
-    type?: ViewType
-  }) {
-    this.render = render;
-    this.elementBinders = elementBinders;
-    this.variableBindings = variableBindings;
-    this.type = type;
-  }
-}
-
-// group 1: property from "[property]"
-// group 2: event from "(event)"
-// group 3: action from "@action"
-var hostRegExp = RegExpWrapper.create('^(?:(?:\\[([^\\]]+)\\])|(?:\\(([^\\)]+)\\))|(?:@(.+)))$');
-
-export class DirectiveMetadata {
-  static get DIRECTIVE_TYPE() { return 0; }
-  static get COMPONENT_TYPE() { return 1; }
-  id: any;
-  selector: string;
-  compileChildren: boolean;
-  events: List<string>;
-  properties: List<string>;
-  readAttributes: List<string>;
-  type: number;
-  callOnDestroy: boolean;
-  callOnChange: boolean;
-  callOnCheck: boolean;
-  callOnInit: boolean;
-  callOnAllChangesDone: boolean;
-  changeDetection: string;
-  exportAs: string;
-  hostListeners: Map<string, string>;
-  hostProperties: Map<string, string>;
-  hostAttributes: Map<string, string>;
-  hostActions: Map<string, string>;
-
-  constructor({id, selector, compileChildren, events, hostListeners, hostProperties, hostAttributes,
-               hostActions, properties, readAttributes, type, callOnDestroy, callOnChange,
-               callOnCheck, callOnInit, callOnAllChangesDone, changeDetection, exportAs}: {
-    id?: string,
-    selector?: string,
-    compileChildren?: boolean,
-    events?: List<string>,
-    hostListeners?: Map<string, string>,
-    hostProperties?: Map<string, string>,
-    hostAttributes?: Map<string, string>,
-    hostActions?: Map<string, string>,
-    properties?: List<string>,
-    readAttributes?: List<string>,
-    type?: number,
-    callOnDestroy?: boolean,
-    callOnChange?: boolean,
-    callOnCheck?: boolean,
-    callOnInit?: boolean,
-    callOnAllChangesDone?: boolean,
-    changeDetection?: string,
-    exportAs?: string
-  }) {
-    this.id = id;
-    this.selector = selector;
-    this.compileChildren = isPresent(compileChildren) ? compileChildren : true;
-    this.events = events;
-    this.hostListeners = hostListeners;
-    this.hostAttributes = hostAttributes;
-    this.hostProperties = hostProperties;
-    this.hostActions = hostActions;
-    this.properties = properties;
-    this.readAttributes = readAttributes;
-    this.type = type;
-    this.callOnDestroy = callOnDestroy;
-    this.callOnChange = callOnChange;
-    this.callOnCheck = callOnCheck;
-    this.callOnInit = callOnInit;
-    this.callOnAllChangesDone = callOnAllChangesDone;
-    this.changeDetection = changeDetection;
-    this.exportAs = exportAs;
-  }
-
-  static create({id, selector, compileChildren, events, host, properties, readAttributes, type,
-                 callOnDestroy, callOnChange, callOnCheck, callOnInit, callOnAllChangesDone,
-                 changeDetection, exportAs}: {
-    id?: string,
-    selector?: string,
-    compileChildren?: boolean,
-    events?: List<string>,
-    host?: Map<string, string>,
-    properties?: List<string>,
-    readAttributes?: List<string>,
-    type?: number,
-    callOnDestroy?: boolean,
-    callOnChange?: boolean,
-    callOnCheck?: boolean,
-    callOnInit?: boolean,
-    callOnAllChangesDone?: boolean,
-    changeDetection?: string,
-    exportAs?: string
-  }): DirectiveMetadata {
-    let hostListeners = new Map();
-    let hostProperties = new Map();
-    let hostAttributes = new Map();
-    let hostActions = new Map();
-
-    if (isPresent(host)) {
-      MapWrapper.forEach(host, (value: string, key: string) => {
-        var matches = RegExpWrapper.firstMatch(hostRegExp, key);
-        if (isBlank(matches)) {
-          hostAttributes.set(key, value);
-        } else if (isPresent(matches[1])) {
-          hostProperties.set(matches[1], value);
-        } else if (isPresent(matches[2])) {
-          hostListeners.set(matches[2], value);
-        } else if (isPresent(matches[3])) {
-          hostActions.set(matches[3], value);
-        }
-      });
-    }
-
-    return new DirectiveMetadata({
-      id: id,
-      selector: selector,
-      compileChildren: compileChildren,
-      events: events,
-      hostListeners: hostListeners,
-      hostProperties: hostProperties,
-      hostAttributes: hostAttributes,
-      hostActions: hostActions,
-      properties: properties,
-      readAttributes: readAttributes,
-      type: type,
-      callOnDestroy: callOnDestroy,
-      callOnChange: callOnChange,
-      callOnCheck: callOnCheck,
-      callOnInit: callOnInit,
-      callOnAllChangesDone: callOnAllChangesDone,
-      changeDetection: changeDetection,
-      exportAs: exportAs
-    });
-  }
-}
-
-// An opaque reference to a DomProtoView
-export class RenderProtoViewRef {}
-
-// An opaque reference to a DomView
-export class RenderViewRef {}
-
-export class ViewDefinition {
-  componentId: string;
-  templateAbsUrl: string;
-  template: string;
-  directives: List<DirectiveMetadata>;
-  styleAbsUrls: List<string>;
-  styles: List<string>;
-
-  constructor({componentId, templateAbsUrl, template, styleAbsUrls, styles, directives}: {
-    componentId?: string,
-    templateAbsUrl?: string,
-    template?: string,
-    styleAbsUrls?: List<string>,
-    styles?: List<string>,
-    directives?: List<DirectiveMetadata>
-  }) {
-    this.componentId = componentId;
-    this.templateAbsUrl = templateAbsUrl;
-    this.template = template;
-    this.styleAbsUrls = styleAbsUrls;
-    this.styles = styles;
-    this.directives = directives;
-  }
-}
-
-export class RenderCompiler {
-  /**
-   * Creats a ProtoViewDto that contains a single nested component with the given componentId.
-   */
-  compileHost(directiveMetadata: DirectiveMetadata): Promise<ProtoViewDto> { return null; }
-
-  /**
-   * Compiles a single DomProtoView. Non recursive so that
-   * we don't need to serialize all possible components over the wire,
-   * but only the needed ones based on previous calls.
-   */
-  compile(view: ViewDefinition): Promise<ProtoViewDto> { return null; }
-}
-
-export interface RenderElementRef {
-  renderView: RenderViewRef;
-  boundElementIndex: number;
-}
-
-export class Renderer {
-  /**
-   * Creates a root host view that includes the given element.
-   * @param {RenderProtoViewRef} hostProtoViewRef a RenderProtoViewRef of type
-   * ProtoViewDto.HOST_VIEW_TYPE
-   * @param {any} hostElementSelector css selector for the host element (will be queried against the
-   * main document)
-   * @return {RenderViewRef} the created view
-   */
-  createRootHostView(hostProtoViewRef: RenderProtoViewRef,
-                     hostElementSelector: string): RenderViewRef {
-    return null;
-  }
-
-  /**
-   * Creates a regular view out of the given ProtoView
-   */
-  createView(protoViewRef: RenderProtoViewRef): RenderViewRef { return null; }
-
-  /**
-   * Destroys the given view after it has been dehydrated and detached
-   */
-  destroyView(viewRef: RenderViewRef) {}
-
-  /**
-   * Attaches a componentView into the given hostView at the given element
-   */
-  attachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef) {}
-
-  /**
-   * Detaches a componentView into the given hostView at the given element
-   */
-  detachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef) {}
-
-  /**
-   * Attaches a view into a ViewContainer (in the given parentView at the given element) at the
-   * given index.
-   */
-  attachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef) {}
-
-  /**
-   * Detaches a view into a ViewContainer (in the given parentView at the given element) at the
-   * given index.
-   */
-  // TODO(tbosch): this should return a promise as it can be animated!
-  detachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef) {}
-
-  /**
-   * Hydrates a view after it has been attached. Hydration/dehydration is used for reusing views
-   * inside of the view pool.
-   */
-  hydrateView(viewRef: RenderViewRef) {}
-
-  /**
-   * Dehydrates a view after it has been attached. Hydration/dehydration is used for reusing views
-   * inside of the view pool.
-   */
-  dehydrateView(viewRef: RenderViewRef) {}
-
-  /**
-   * Returns the native element at the given location.
-   * Attention: In a WebWorker scenario, this should always return null!
-   */
-  getNativeElementSync(location: RenderElementRef): any { return null; }
-
-  /**
-   * Sets a property on an element.
-   */
-  setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any) {}
-
-  /**
-   * Sets an attribute on an element.
-   */
-  setElementAttribute(location: RenderElementRef, attributeName: string, attributeValue: string) {}
-
-  /**
-   * Sets a class on an element.
-   */
-  setElementClass(location: RenderElementRef, className: string, isAdd: boolean) {}
-
-  /**
-   * Sets a style on an element.
-   */
-  setElementStyle(location: RenderElementRef, styleName: string, styleValue: string) {}
-
-  /**
-   * Calls a method on an element.
-   */
-  invokeElementMethod(location: RenderElementRef, methodName: string, args: List<any>) {}
-
-  /**
-   * Sets the value of a text node.
-   */
-  setText(viewRef: RenderViewRef, textNodeIndex: number, text: string) {}
-
-  /**
-   * Sets the dispatcher for all events of the given view
-   */
-  setEventDispatcher(viewRef: RenderViewRef, dispatcher: EventDispatcher) {}
-}
-
-
-/**
- * A dispatcher for all events happening in a view.
- */
-export interface EventDispatcher {
-  /**
-   * Called when an event was triggered for a on-* attribute on an element.
-   * @param {Map<string, any>} locals Locals to be used to evaluate the
-   *   event expressions
-   */
-  dispatchEvent(elementIndex: number, eventName: string, locals: Map<string, any>);
-}
diff --git a/modules/angular2/src/render/dom/compiler/compile_control.ts b/modules/angular2/src/render/dom/compiler/compile_control.ts
deleted file mode 100644
index ebb3e06b4e73..000000000000
--- a/modules/angular2/src/render/dom/compiler/compile_control.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {isBlank} from 'angular2/src/facade/lang';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {CompileElement} from './compile_element';
-import {CompileStep} from './compile_step';
-
-/**
- * Controls the processing order of elements.
- * Right now it only allows to add a parent element.
- */
-export class CompileControl {
-  _currentStepIndex: number = 0;
-  _parent: CompileElement = null;
-  _results: any[] = null;
-  _additionalChildren: CompileElement[] = null;
-  _ignoreCurrentElement: boolean;
-
-  constructor(public _steps: List<CompileStep>) {}
-
-  // only public so that it can be used by compile_pipeline
-  internalProcess(results: any[], startStepIndex, parent: CompileElement,
-                  current: CompileElement): CompileElement[] {
-    this._results = results;
-    var previousStepIndex = this._currentStepIndex;
-    var previousParent = this._parent;
-
-    this._ignoreCurrentElement = false;
-
-    for (var i = startStepIndex; i < this._steps.length && !this._ignoreCurrentElement; i++) {
-      var step = this._steps[i];
-      this._parent = parent;
-      this._currentStepIndex = i;
-      step.process(parent, current, this);
-      parent = this._parent;
-    }
-
-    if (!this._ignoreCurrentElement) {
-      results.push(current);
-    }
-
-    this._currentStepIndex = previousStepIndex;
-    this._parent = previousParent;
-
-    var localAdditionalChildren = this._additionalChildren;
-    this._additionalChildren = null;
-    return localAdditionalChildren;
-  }
-
-  addParent(newElement: CompileElement) {
-    this.internalProcess(this._results, this._currentStepIndex + 1, this._parent, newElement);
-    this._parent = newElement;
-  }
-
-  addChild(element: CompileElement) {
-    if (isBlank(this._additionalChildren)) {
-      this._additionalChildren = [];
-    }
-    this._additionalChildren.push(element);
-  }
-
-  /**
-   * Ignores the current element.
-   *
-   * When a step calls `ignoreCurrentElement`, no further steps are executed on the current
-   * element and no `CompileElement` is added to the result list.
-   */
-  ignoreCurrentElement() { this._ignoreCurrentElement = true; }
-}
diff --git a/modules/angular2/src/render/dom/compiler/compile_element.ts b/modules/angular2/src/render/dom/compiler/compile_element.ts
deleted file mode 100644
index 2333a8573475..000000000000
--- a/modules/angular2/src/render/dom/compiler/compile_element.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import {List, Map, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {isBlank, isPresent, Type, StringJoiner, assertionsEnabled} from 'angular2/src/facade/lang';
-
-import {ProtoViewBuilder, ElementBinderBuilder} from '../view/proto_view_builder';
-
-/**
- * Collects all data that is needed to process an element
- * in the compile process. Fields are filled
- * by the CompileSteps starting out with the pure HTMLElement.
- */
-export class CompileElement {
-  _attrs: Map<string, string> = null;
-  _classList: List<string> = null;
-  isViewRoot: boolean = false;
-  // inherited down to children if they don't have an own protoView
-  inheritedProtoView: ProtoViewBuilder = null;
-  distanceToInheritedBinder: number = 0;
-  // inherited down to children if they don't have an own elementBinder
-  inheritedElementBinder: ElementBinderBuilder = null;
-  compileChildren: boolean = true;
-  elementDescription: string;  // e.g. '<div [class]="foo">' : used to provide context in case of
-                               // error
-
-  constructor(public element, compilationUnit: string = '') {
-    // description is calculated here as compilation steps may change the element
-    var tplDesc = assertionsEnabled() ? getElementDescription(element) : null;
-    if (compilationUnit !== '') {
-      this.elementDescription = compilationUnit;
-      if (isPresent(tplDesc)) this.elementDescription += ": " + tplDesc;
-    } else {
-      this.elementDescription = tplDesc;
-    }
-  }
-
-  isBound(): boolean {
-    return isPresent(this.inheritedElementBinder) && this.distanceToInheritedBinder === 0;
-  }
-
-  bindElement(): ElementBinderBuilder {
-    if (!this.isBound()) {
-      var parentBinder = this.inheritedElementBinder;
-      this.inheritedElementBinder =
-          this.inheritedProtoView.bindElement(this.element, this.elementDescription);
-      if (isPresent(parentBinder)) {
-        this.inheritedElementBinder.setParent(parentBinder, this.distanceToInheritedBinder);
-      }
-      this.distanceToInheritedBinder = 0;
-    }
-    return this.inheritedElementBinder;
-  }
-
-  refreshAttrs() { this._attrs = null; }
-
-  attrs(): Map<string, string> {
-    if (isBlank(this._attrs)) {
-      this._attrs = DOM.attributeMap(this.element);
-    }
-    return this._attrs;
-  }
-
-  refreshClassList() { this._classList = null; }
-
-  classList(): List<string> {
-    if (isBlank(this._classList)) {
-      this._classList = [];
-      var elClassList = DOM.classList(this.element);
-      for (var i = 0; i < elClassList.length; i++) {
-        this._classList.push(elClassList[i]);
-      }
-    }
-    return this._classList;
-  }
-}
-
-// return an HTML representation of an element start tag - without its content
-// this is used to give contextual information in case of errors
-function getElementDescription(domElement): string {
-  var buf = new StringJoiner();
-  var atts = DOM.attributeMap(domElement);
-
-  buf.add("<");
-  buf.add(DOM.tagName(domElement).toLowerCase());
-
-  // show id and class first to ease element identification
-  addDescriptionAttribute(buf, "id", atts.get("id"));
-  addDescriptionAttribute(buf, "class", atts.get("class"));
-  MapWrapper.forEach(atts, (attValue, attName) => {
-    if (attName !== "id" && attName !== "class") {
-      addDescriptionAttribute(buf, attName, attValue);
-    }
-  });
-
-  buf.add(">");
-  return buf.toString();
-}
-
-
-function addDescriptionAttribute(buffer: StringJoiner, attName: string, attValue) {
-  if (isPresent(attValue)) {
-    if (attValue.length === 0) {
-      buffer.add(' ' + attName);
-    } else {
-      buffer.add(' ' + attName + '="' + attValue + '"');
-    }
-  }
-}
diff --git a/modules/angular2/src/render/dom/compiler/compile_pipeline.ts b/modules/angular2/src/render/dom/compiler/compile_pipeline.ts
deleted file mode 100644
index a39a370a88bb..000000000000
--- a/modules/angular2/src/render/dom/compiler/compile_pipeline.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {isPresent, isBlank} from 'angular2/src/facade/lang';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {CompileElement} from './compile_element';
-import {CompileControl} from './compile_control';
-import {CompileStep} from './compile_step';
-import {ProtoViewBuilder} from '../view/proto_view_builder';
-import {ProtoViewDto, ViewType} from '../../api';
-
-/**
- * CompilePipeline for executing CompileSteps recursively for
- * all elements in a template.
- */
-export class CompilePipeline {
-  _control: CompileControl;
-  constructor(steps: List<CompileStep>) { this._control = new CompileControl(steps); }
-
-  process(rootElement, protoViewType: ViewType = null,
-          compilationCtxtDescription: string = ''): List<CompileElement> {
-    if (isBlank(protoViewType)) {
-      protoViewType = ViewType.COMPONENT;
-    }
-    var results = [];
-    var rootCompileElement = new CompileElement(rootElement, compilationCtxtDescription);
-    rootCompileElement.inheritedProtoView = new ProtoViewBuilder(rootElement, protoViewType);
-    rootCompileElement.isViewRoot = true;
-    this._process(results, null, rootCompileElement, compilationCtxtDescription);
-    return results;
-  }
-
-  _process(results, parent: CompileElement, current: CompileElement,
-           compilationCtxtDescription: string = '') {
-    var additionalChildren = this._control.internalProcess(results, 0, parent, current);
-
-    if (current.compileChildren) {
-      var node = DOM.firstChild(DOM.templateAwareRoot(current.element));
-      while (isPresent(node)) {
-        // compiliation can potentially move the node, so we need to store the
-        // next sibling before recursing.
-        var nextNode = DOM.nextSibling(node);
-        if (DOM.isElementNode(node)) {
-          var childCompileElement = new CompileElement(node, compilationCtxtDescription);
-          childCompileElement.inheritedProtoView = current.inheritedProtoView;
-          childCompileElement.inheritedElementBinder = current.inheritedElementBinder;
-          childCompileElement.distanceToInheritedBinder = current.distanceToInheritedBinder + 1;
-          this._process(results, current, childCompileElement);
-        }
-        node = nextNode;
-      }
-    }
-
-    if (isPresent(additionalChildren)) {
-      for (var i = 0; i < additionalChildren.length; i++) {
-        this._process(results, current, additionalChildren[i]);
-      }
-    }
-  }
-}
diff --git a/modules/angular2/src/render/dom/compiler/compile_step.ts b/modules/angular2/src/render/dom/compiler/compile_step.ts
deleted file mode 100644
index 9084d690d09a..000000000000
--- a/modules/angular2/src/render/dom/compiler/compile_step.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {CompileElement} from './compile_element';
-import * as compileControlModule from './compile_control';
-
-/**
- * One part of the compile process.
- * Is guaranteed to be called in depth first order
- */
-export interface CompileStep {
-  process(parent: CompileElement, current: CompileElement,
-          control: compileControlModule.CompileControl): void;
-}
diff --git a/modules/angular2/src/render/dom/compiler/compile_step_factory.ts b/modules/angular2/src/render/dom/compiler/compile_step_factory.ts
deleted file mode 100644
index 5de2bb559fc2..000000000000
--- a/modules/angular2/src/render/dom/compiler/compile_step_factory.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {List} from 'angular2/src/facade/collection';
-import {Parser} from 'angular2/change_detection';
-import {ViewDefinition} from '../../api';
-import {CompileStep} from './compile_step';
-import {PropertyBindingParser} from './property_binding_parser';
-import {TextInterpolationParser} from './text_interpolation_parser';
-import {DirectiveParser} from './directive_parser';
-import {ViewSplitter} from './view_splitter';
-import {ShadowDomCompileStep} from '../shadow_dom/shadow_dom_compile_step';
-import {ShadowDomStrategy} from '../shadow_dom/shadow_dom_strategy';
-
-export class CompileStepFactory {
-  createSteps(view: ViewDefinition): List<CompileStep> { return null; }
-}
-
-export class DefaultStepFactory extends CompileStepFactory {
-  constructor(public _parser: Parser, public _shadowDomStrategy: ShadowDomStrategy) { super(); }
-
-  createSteps(view: ViewDefinition): List<CompileStep> {
-    return [
-      new ViewSplitter(this._parser),
-      new PropertyBindingParser(this._parser),
-      new DirectiveParser(this._parser, view.directives),
-      new TextInterpolationParser(this._parser),
-      new ShadowDomCompileStep(this._shadowDomStrategy, view)
-    ];
-  }
-}
diff --git a/modules/angular2/src/render/dom/compiler/compiler.ts b/modules/angular2/src/render/dom/compiler/compiler.ts
deleted file mode 100644
index c5a69e80252b..000000000000
--- a/modules/angular2/src/render/dom/compiler/compiler.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import {Injectable} from 'angular2/di';
-
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-import {BaseException, isPresent} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {
-  ViewDefinition,
-  ProtoViewDto,
-  ViewType,
-  DirectiveMetadata,
-  RenderCompiler,
-  RenderProtoViewRef
-} from '../../api';
-import {CompilePipeline} from './compile_pipeline';
-import {ViewLoader} from 'angular2/src/render/dom/compiler/view_loader';
-import {CompileStepFactory, DefaultStepFactory} from './compile_step_factory';
-import {Parser} from 'angular2/change_detection';
-import {ShadowDomStrategy} from '../shadow_dom/shadow_dom_strategy';
-
-/**
- * The compiler loads and translates the html templates of components into
- * nested ProtoViews. To decompose its functionality it uses
- * the CompilePipeline and the CompileSteps.
- */
-export class DomCompiler extends RenderCompiler {
-  constructor(public _stepFactory: CompileStepFactory, public _viewLoader: ViewLoader) { super(); }
-
-  compile(view: ViewDefinition): Promise<ProtoViewDto> {
-    var tplPromise = this._viewLoader.load(view);
-    return PromiseWrapper.then(
-        tplPromise, (el) => this._compileTemplate(view, el, ViewType.COMPONENT), (e) => {
-          throw new BaseException(`Failed to load the template for "${view.componentId}" : ${e}`);
-        });
-  }
-
-  compileHost(directiveMetadata: DirectiveMetadata): Promise<ProtoViewDto> {
-    var hostViewDef = new ViewDefinition({
-      componentId: directiveMetadata.id,
-      templateAbsUrl: null, template: null,
-      styles: null,
-      styleAbsUrls: null,
-      directives: [directiveMetadata]
-    });
-    var element = DOM.createElement(directiveMetadata.selector);
-    return this._compileTemplate(hostViewDef, element, ViewType.HOST);
-  }
-
-  _compileTemplate(viewDef: ViewDefinition, tplElement,
-                   protoViewType: ViewType): Promise<ProtoViewDto> {
-    var pipeline = new CompilePipeline(this._stepFactory.createSteps(viewDef));
-    var compileElements = pipeline.process(tplElement, protoViewType, viewDef.componentId);
-
-    return PromiseWrapper.resolve(compileElements[0].inheritedProtoView.build());
-  }
-}
-
-@Injectable()
-export class DefaultDomCompiler extends DomCompiler {
-  constructor(parser: Parser, shadowDomStrategy: ShadowDomStrategy, viewLoader: ViewLoader) {
-    super(new DefaultStepFactory(parser, shadowDomStrategy), viewLoader);
-  }
-}
diff --git a/modules/angular2/src/render/dom/compiler/directive_parser.ts b/modules/angular2/src/render/dom/compiler/directive_parser.ts
deleted file mode 100644
index 0371e43f269f..000000000000
--- a/modules/angular2/src/render/dom/compiler/directive_parser.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import {
-  isPresent,
-  isBlank,
-  BaseException,
-  assertionsEnabled,
-  RegExpWrapper,
-  StringWrapper
-} from 'angular2/src/facade/lang';
-import {List, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Parser} from 'angular2/change_detection';
-
-import {SelectorMatcher, CssSelector} from 'angular2/src/render/dom/compiler/selector';
-
-import {CompileStep} from './compile_step';
-import {CompileElement} from './compile_element';
-import {CompileControl} from './compile_control';
-
-import {DirectiveMetadata} from '../../api';
-import {dashCaseToCamelCase, camelCaseToDashCase, EVENT_TARGET_SEPARATOR} from '../util';
-import {DirectiveBuilder} from '../view/proto_view_builder';
-
-/**
- * Parses the directives on a single element. Assumes ViewSplitter has already created
- * <template> elements for template directives.
- */
-export class DirectiveParser implements CompileStep {
-  _selectorMatcher: SelectorMatcher = new SelectorMatcher();
-
-  constructor(public _parser: Parser, public _directives: List<DirectiveMetadata>) {
-    for (var i = 0; i < _directives.length; i++) {
-      var directive = _directives[i];
-      var selector = CssSelector.parse(directive.selector);
-      this._ensureComponentOnlyHasElementSelector(selector, directive);
-      this._selectorMatcher.addSelectables(selector, i);
-    }
-  }
-
-  _ensureComponentOnlyHasElementSelector(selector, directive) {
-    var isElementSelector = selector.length === 1 && selector[0].isElementSelector();
-    if (!isElementSelector && directive.type === DirectiveMetadata.COMPONENT_TYPE) {
-      throw new BaseException(
-          `Component '${directive.id}' can only have an element selector, but had '${directive.selector}'`);
-    }
-  }
-
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    var attrs = current.attrs();
-    var classList = current.classList();
-
-    var cssSelector = new CssSelector();
-    var nodeName = DOM.nodeName(current.element);
-    cssSelector.setElement(nodeName);
-    for (var i = 0; i < classList.length; i++) {
-      cssSelector.addClassName(classList[i]);
-    }
-
-    MapWrapper.forEach(attrs,
-                       (attrValue, attrName) => { cssSelector.addAttribute(attrName, attrValue); });
-
-    var componentDirective;
-    var foundDirectiveIndices = [];
-    var elementBinder = null;
-    this._selectorMatcher.match(cssSelector, (selector, directiveIndex) => {
-      elementBinder = current.bindElement();
-      var directive = this._directives[directiveIndex];
-      if (directive.type === DirectiveMetadata.COMPONENT_TYPE) {
-        // components need to go first, so it is easier to locate them in the result.
-        ListWrapper.insert(foundDirectiveIndices, 0, directiveIndex);
-        if (isPresent(componentDirective)) {
-          throw new BaseException(
-              `Only one component directive is allowed per element - check ${current.elementDescription}`);
-        }
-        componentDirective = directive;
-        elementBinder.setComponentId(directive.id);
-      } else {
-        foundDirectiveIndices.push(directiveIndex);
-      }
-    });
-    ListWrapper.forEach(foundDirectiveIndices, (directiveIndex) => {
-      var dirMetadata = this._directives[directiveIndex];
-      var directiveBinderBuilder = elementBinder.bindDirective(directiveIndex);
-      current.compileChildren = current.compileChildren && dirMetadata.compileChildren;
-      if (isPresent(dirMetadata.properties)) {
-        ListWrapper.forEach(dirMetadata.properties, (bindConfig) => {
-          this._bindDirectiveProperty(bindConfig, current, directiveBinderBuilder);
-        });
-      }
-      if (isPresent(dirMetadata.hostListeners)) {
-        MapWrapper.forEach(dirMetadata.hostListeners, (action, eventName) => {
-          this._bindDirectiveEvent(eventName, action, current, directiveBinderBuilder);
-        });
-      }
-      if (isPresent(dirMetadata.hostProperties)) {
-        MapWrapper.forEach(dirMetadata.hostProperties, (expression, hostPropertyName) => {
-          this._bindHostProperty(hostPropertyName, expression, current, directiveBinderBuilder);
-        });
-      }
-      if (isPresent(dirMetadata.hostAttributes)) {
-        MapWrapper.forEach(dirMetadata.hostAttributes, (hostAttrValue, hostAttrName) => {
-          this._addHostAttribute(hostAttrName, hostAttrValue, current);
-        });
-      }
-      if (isPresent(dirMetadata.readAttributes)) {
-        ListWrapper.forEach(dirMetadata.readAttributes,
-                            (attrName) => { elementBinder.readAttribute(attrName); });
-      }
-    });
-  }
-
-  _bindDirectiveProperty(bindConfig: string, compileElement: CompileElement,
-                         directiveBinderBuilder: DirectiveBuilder) {
-    // Name of the property on the directive
-    let dirProperty: string;
-    // Name of the property on the element
-    let elProp: string;
-    let pipes: List<string>;
-    let assignIndex: number = bindConfig.indexOf(':');
-
-    if (assignIndex > -1) {
-      // canonical syntax: `dirProp: elProp | pipe0 | ... | pipeN`
-      dirProperty = StringWrapper.substring(bindConfig, 0, assignIndex).trim();
-      pipes = this._splitBindConfig(StringWrapper.substring(bindConfig, assignIndex + 1));
-      elProp = ListWrapper.removeAt(pipes, 0);
-    } else {
-      // shorthand syntax when the name of the property on the directive and on the element is the
-      // same, ie `property`
-      dirProperty = bindConfig;
-      elProp = bindConfig;
-      pipes = [];
-    }
-    elProp = dashCaseToCamelCase(elProp);
-    var bindingAst = compileElement.bindElement().propertyBindings.get(elProp);
-    if (isBlank(bindingAst)) {
-      var attributeValue = compileElement.attrs().get(camelCaseToDashCase(elProp));
-      if (isPresent(attributeValue)) {
-        bindingAst =
-            this._parser.wrapLiteralPrimitive(attributeValue, compileElement.elementDescription);
-      }
-    }
-
-    // Bindings are optional, so this binding only needs to be set up if an expression is given.
-    if (isPresent(bindingAst)) {
-      directiveBinderBuilder.bindProperty(dirProperty, bindingAst, elProp);
-    }
-  }
-
-  _bindDirectiveEvent(eventName, action, compileElement, directiveBinderBuilder) {
-    var ast = this._parser.parseAction(action, compileElement.elementDescription);
-    if (StringWrapper.contains(eventName, EVENT_TARGET_SEPARATOR)) {
-      var parts = eventName.split(EVENT_TARGET_SEPARATOR);
-      directiveBinderBuilder.bindEvent(parts[1], ast, parts[0]);
-    } else {
-      directiveBinderBuilder.bindEvent(eventName, ast);
-    }
-  }
-
-  _bindHostProperty(hostPropertyName, expression, compileElement, directiveBinderBuilder) {
-    var ast = this._parser.parseSimpleBinding(
-        expression, `hostProperties of ${compileElement.elementDescription}`);
-    directiveBinderBuilder.bindHostProperty(hostPropertyName, ast);
-  }
-
-  _addHostAttribute(attrName, attrValue, compileElement) {
-    if (StringWrapper.equals(attrName, 'class')) {
-      ListWrapper.forEach(attrValue.split(' '),
-                          (className) => { DOM.addClass(compileElement.element, className); });
-    } else if (!DOM.hasAttribute(compileElement.element, attrName)) {
-      DOM.setAttribute(compileElement.element, attrName, attrValue);
-    }
-  }
-
-  _splitBindConfig(bindConfig: string) {
-    return ListWrapper.map(bindConfig.split('|'), (s) => s.trim());
-  }
-}
diff --git a/modules/angular2/src/render/dom/compiler/property_binding_parser.ts b/modules/angular2/src/render/dom/compiler/property_binding_parser.ts
deleted file mode 100644
index ddca68340405..000000000000
--- a/modules/angular2/src/render/dom/compiler/property_binding_parser.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import {isPresent, RegExpWrapper, StringWrapper} from 'angular2/src/facade/lang';
-import {MapWrapper} from 'angular2/src/facade/collection';
-
-import {Parser} from 'angular2/change_detection';
-
-import {CompileStep} from './compile_step';
-import {CompileElement} from './compile_element';
-import {CompileControl} from './compile_control';
-
-import {dashCaseToCamelCase} from '../util';
-
-// Group 1 = "bind-"
-// Group 2 = "var-" or "#"
-// Group 3 = "on-"
-// Group 4 = "bindon-"
-// Group 5 = the identifier after "bind-", "var-/#", or "on-"
-// Group 6 = idenitifer inside [()]
-// Group 7 = idenitifer inside []
-// Group 8 = identifier inside ()
-var BIND_NAME_REGEXP = RegExpWrapper.create(
-    '^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\\[\\(([^\\)]+)\\)\\]|\\[([^\\]]+)\\]|\\(([^\\)]+)\\))$');
-/**
- * Parses the property bindings on a single element.
- */
-export class PropertyBindingParser implements CompileStep {
-  constructor(private _parser: Parser) {}
-
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    var attrs = current.attrs();
-    var newAttrs = new Map();
-
-    MapWrapper.forEach(attrs, (attrValue, attrName) => {
-
-      attrName = this._normalizeAttributeName(attrName);
-
-      var bindParts = RegExpWrapper.firstMatch(BIND_NAME_REGEXP, attrName);
-      if (isPresent(bindParts)) {
-        if (isPresent(bindParts[1])) {  // match: bind-prop
-          this._bindProperty(bindParts[5], attrValue, current, newAttrs);
-
-        } else if (isPresent(
-                       bindParts[2])) {  // match: var-name / var-name="iden" / #name / #name="iden"
-          var identifier = bindParts[5];
-          var value = attrValue == '' ? '\$implicit' : attrValue;
-          this._bindVariable(identifier, value, current, newAttrs);
-
-        } else if (isPresent(bindParts[3])) {  // match: on-event
-          this._bindEvent(bindParts[5], attrValue, current, newAttrs);
-
-        } else if (isPresent(bindParts[4])) {  // match: bindon-prop
-          this._bindProperty(bindParts[5], attrValue, current, newAttrs);
-          this._bindAssignmentEvent(bindParts[5], attrValue, current, newAttrs);
-
-        } else if (isPresent(bindParts[6])) {  // match: [(expr)]
-          this._bindProperty(bindParts[6], attrValue, current, newAttrs);
-          this._bindAssignmentEvent(bindParts[6], attrValue, current, newAttrs);
-
-        } else if (isPresent(bindParts[7])) {  // match: [expr]
-          this._bindProperty(bindParts[7], attrValue, current, newAttrs);
-
-        } else if (isPresent(bindParts[8])) {  // match: (event)
-          this._bindEvent(bindParts[8], attrValue, current, newAttrs);
-        }
-      } else {
-        var expr = this._parser.parseInterpolation(attrValue, current.elementDescription);
-        if (isPresent(expr)) {
-          this._bindPropertyAst(attrName, expr, current, newAttrs);
-        }
-      }
-    });
-
-    MapWrapper.forEach(newAttrs, (attrValue, attrName) => { attrs.set(attrName, attrValue); });
-  }
-
-  _normalizeAttributeName(attrName: string): string {
-    return StringWrapper.startsWith(attrName, 'data-') ? StringWrapper.substring(attrName, 5) :
-                                                         attrName;
-  }
-
-  _bindVariable(identifier, value, current: CompileElement, newAttrs: Map<any, any>) {
-    current.bindElement().bindVariable(dashCaseToCamelCase(identifier), value);
-    newAttrs.set(identifier, value);
-  }
-
-  _bindProperty(name, expression, current: CompileElement, newAttrs) {
-    this._bindPropertyAst(name, this._parser.parseBinding(expression, current.elementDescription),
-                          current, newAttrs);
-  }
-
-  _bindPropertyAst(name, ast, current: CompileElement, newAttrs: Map<any, any>) {
-    var binder = current.bindElement();
-    binder.bindProperty(dashCaseToCamelCase(name), ast);
-    newAttrs.set(name, ast.source);
-  }
-
-  _bindAssignmentEvent(name, expression, current: CompileElement, newAttrs) {
-    this._bindEvent(name, `${expression}=$event`, current, newAttrs);
-  }
-
-  _bindEvent(name, expression, current: CompileElement, newAttrs) {
-    current.bindElement().bindEvent(
-        dashCaseToCamelCase(name),
-        this._parser.parseAction(expression, current.elementDescription));
-    // Don't detect directives for event names for now,
-    // so don't add the event name to the CompileElement.attrs
-  }
-}
diff --git a/modules/angular2/src/render/dom/compiler/selector.ts b/modules/angular2/src/render/dom/compiler/selector.ts
deleted file mode 100644
index de342039b8fc..000000000000
--- a/modules/angular2/src/render/dom/compiler/selector.ts
+++ /dev/null
@@ -1,372 +0,0 @@
-import {List, Map, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {
-  isPresent,
-  isBlank,
-  RegExpWrapper,
-  RegExpMatcherWrapper,
-  StringWrapper,
-  BaseException
-} from 'angular2/src/facade/lang';
-
-const _EMPTY_ATTR_VALUE = '';
-
-// TODO: Can't use `const` here as
-// in Dart this is not transpiled into `final` yet...
-var _SELECTOR_REGEXP = RegExpWrapper.create(
-    '(\\:not\\()|' +                          //":not("
-    '([-\\w]+)|' +                            // "tag"
-    '(?:\\.([-\\w]+))|' +                     // ".class"
-    '(?:\\[([-\\w*]+)(?:=([^\\]]*))?\\])|' +  // "[name]", "[name=value]" or "[name*=value]"
-    '(\\))|' +                                // ")"
-    '(\\s*,\\s*)');                           // ","
-
-/**
- * A css selector contains an element name,
- * css classes and attribute/value pairs with the purpose
- * of selecting subsets out of them.
- */
-export class CssSelector {
-  element: string = null;
-  classNames: List<string> = [];
-  attrs: List<string> = [];
-  notSelectors: List<CssSelector> = [];
-
-  static parse(selector: string): List<CssSelector> {
-    var results: CssSelector[] = [];
-    var _addResult = (res: CssSelector[], cssSel) => {
-      if (cssSel.notSelectors.length > 0 && isBlank(cssSel.element) &&
-          ListWrapper.isEmpty(cssSel.classNames) && ListWrapper.isEmpty(cssSel.attrs)) {
-        cssSel.element = "*";
-      }
-      res.push(cssSel);
-    };
-    var cssSelector = new CssSelector();
-    var matcher = RegExpWrapper.matcher(_SELECTOR_REGEXP, selector);
-    var match;
-    var current = cssSelector;
-    var inNot = false;
-    while (isPresent(match = RegExpMatcherWrapper.next(matcher))) {
-      if (isPresent(match[1])) {
-        if (inNot) {
-          throw new BaseException('Nesting :not is not allowed in a selector');
-        }
-        inNot = true;
-        current = new CssSelector();
-        cssSelector.notSelectors.push(current);
-      }
-      if (isPresent(match[2])) {
-        current.setElement(match[2]);
-      }
-      if (isPresent(match[3])) {
-        current.addClassName(match[3]);
-      }
-      if (isPresent(match[4])) {
-        current.addAttribute(match[4], match[5]);
-      }
-      if (isPresent(match[6])) {
-        inNot = false;
-        current = cssSelector;
-      }
-      if (isPresent(match[7])) {
-        if (inNot) {
-          throw new BaseException('Multiple selectors in :not are not supported');
-        }
-        _addResult(results, cssSelector);
-        cssSelector = current = new CssSelector();
-      }
-    }
-    _addResult(results, cssSelector);
-    return results;
-  }
-
-  isElementSelector(): boolean {
-    return isPresent(this.element) && ListWrapper.isEmpty(this.classNames) &&
-           ListWrapper.isEmpty(this.attrs) && this.notSelectors.length === 0;
-  }
-
-  setElement(element: string = null) {
-    if (isPresent(element)) {
-      element = element.toLowerCase();
-    }
-    this.element = element;
-  }
-
-  addAttribute(name: string, value: string = _EMPTY_ATTR_VALUE) {
-    this.attrs.push(name.toLowerCase());
-    if (isPresent(value)) {
-      value = value.toLowerCase();
-    } else {
-      value = _EMPTY_ATTR_VALUE;
-    }
-    this.attrs.push(value);
-  }
-
-  addClassName(name: string) { this.classNames.push(name.toLowerCase()); }
-
-  toString(): string {
-    var res = '';
-    if (isPresent(this.element)) {
-      res += this.element;
-    }
-    if (isPresent(this.classNames)) {
-      for (var i = 0; i < this.classNames.length; i++) {
-        res += '.' + this.classNames[i];
-      }
-    }
-    if (isPresent(this.attrs)) {
-      for (var i = 0; i < this.attrs.length;) {
-        var attrName = this.attrs[i++];
-        var attrValue = this.attrs[i++];
-        res += '[' + attrName;
-        if (attrValue.length > 0) {
-          res += '=' + attrValue;
-        }
-        res += ']';
-      }
-    }
-    ListWrapper.forEach(this.notSelectors,
-                        (notSelector) => { res += ":not(" + notSelector.toString() + ")"; });
-    return res;
-  }
-}
-
-/**
- * Reads a list of CssSelectors and allows to calculate which ones
- * are contained in a given CssSelector.
- */
-export class SelectorMatcher {
-  static createNotMatcher(notSelectors: List<CssSelector>): SelectorMatcher {
-    var notMatcher = new SelectorMatcher();
-    notMatcher.addSelectables(notSelectors, null);
-    return notMatcher;
-  }
-
-  private _elementMap: Map<string, List<SelectorContext>> = new Map();
-  private _elementPartialMap: Map<string, SelectorMatcher> = new Map();
-  private _classMap: Map<string, List<SelectorContext>> = new Map();
-  private _classPartialMap: Map<string, SelectorMatcher> = new Map();
-  private _attrValueMap: Map<string, Map<string, List<SelectorContext>>> = new Map();
-  private _attrValuePartialMap: Map<string, Map<string, SelectorMatcher>> = new Map();
-  private _listContexts: List<SelectorListContext> = [];
-
-  addSelectables(cssSelectors: List<CssSelector>, callbackCtxt?: any) {
-    var listContext = null;
-    if (cssSelectors.length > 1) {
-      listContext = new SelectorListContext(cssSelectors);
-      this._listContexts.push(listContext);
-    }
-    for (var i = 0; i < cssSelectors.length; i++) {
-      this._addSelectable(cssSelectors[i], callbackCtxt, listContext);
-    }
-  }
-
-  /**
-   * Add an object that can be found later on by calling `match`.
-   * @param cssSelector A css selector
-   * @param callbackCtxt An opaque object that will be given to the callback of the `match` function
-   */
-  private _addSelectable(cssSelector: CssSelector, callbackCtxt: any,
-                         listContext: SelectorListContext) {
-    var matcher = this;
-    var element = cssSelector.element;
-    var classNames = cssSelector.classNames;
-    var attrs = cssSelector.attrs;
-    var selectable = new SelectorContext(cssSelector, callbackCtxt, listContext);
-
-    if (isPresent(element)) {
-      var isTerminal = attrs.length === 0 && classNames.length === 0;
-      if (isTerminal) {
-        this._addTerminal(matcher._elementMap, element, selectable);
-      } else {
-        matcher = this._addPartial(matcher._elementPartialMap, element);
-      }
-    }
-
-    if (isPresent(classNames)) {
-      for (var index = 0; index < classNames.length; index++) {
-        var isTerminal = attrs.length === 0 && index === classNames.length - 1;
-        var className = classNames[index];
-        if (isTerminal) {
-          this._addTerminal(matcher._classMap, className, selectable);
-        } else {
-          matcher = this._addPartial(matcher._classPartialMap, className);
-        }
-      }
-    }
-
-    if (isPresent(attrs)) {
-      for (var index = 0; index < attrs.length;) {
-        var isTerminal = index === attrs.length - 2;
-        var attrName = attrs[index++];
-        var attrValue = attrs[index++];
-        if (isTerminal) {
-          var terminalMap = matcher._attrValueMap;
-          var terminalValuesMap = terminalMap.get(attrName);
-          if (isBlank(terminalValuesMap)) {
-            terminalValuesMap = new Map();
-            terminalMap.set(attrName, terminalValuesMap);
-          }
-          this._addTerminal(terminalValuesMap, attrValue, selectable);
-        } else {
-          var parttialMap = matcher._attrValuePartialMap;
-          var partialValuesMap = parttialMap.get(attrName);
-          if (isBlank(partialValuesMap)) {
-            partialValuesMap = new Map();
-            parttialMap.set(attrName, partialValuesMap);
-          }
-          matcher = this._addPartial(partialValuesMap, attrValue);
-        }
-      }
-    }
-  }
-
-  private _addTerminal(map: Map<string, List<SelectorContext>>, name: string,
-                       selectable: SelectorContext) {
-    var terminalList = map.get(name);
-    if (isBlank(terminalList)) {
-      terminalList = [];
-      map.set(name, terminalList);
-    }
-    terminalList.push(selectable);
-  }
-
-  private _addPartial(map: Map<string, SelectorMatcher>, name: string): SelectorMatcher {
-    var matcher = map.get(name);
-    if (isBlank(matcher)) {
-      matcher = new SelectorMatcher();
-      map.set(name, matcher);
-    }
-    return matcher;
-  }
-
-  /**
-   * Find the objects that have been added via `addSelectable`
-   * whose css selector is contained in the given css selector.
-   * @param cssSelector A css selector
-   * @param matchedCallback This callback will be called with the object handed into `addSelectable`
-   * @return boolean true if a match was found
-  */
-  match(cssSelector: CssSelector, matchedCallback /*: (CssSelector, any) => void*/): boolean {
-    var result = false;
-    var element = cssSelector.element;
-    var classNames = cssSelector.classNames;
-    var attrs = cssSelector.attrs;
-
-    for (var i = 0; i < this._listContexts.length; i++) {
-      this._listContexts[i].alreadyMatched = false;
-    }
-
-    result = this._matchTerminal(this._elementMap, element, cssSelector, matchedCallback) || result;
-    result = this._matchPartial(this._elementPartialMap, element, cssSelector, matchedCallback) ||
-             result;
-
-    if (isPresent(classNames)) {
-      for (var index = 0; index < classNames.length; index++) {
-        var className = classNames[index];
-        result =
-            this._matchTerminal(this._classMap, className, cssSelector, matchedCallback) || result;
-        result =
-            this._matchPartial(this._classPartialMap, className, cssSelector, matchedCallback) ||
-            result;
-      }
-    }
-
-    if (isPresent(attrs)) {
-      for (var index = 0; index < attrs.length;) {
-        var attrName = attrs[index++];
-        var attrValue = attrs[index++];
-
-        var terminalValuesMap = this._attrValueMap.get(attrName);
-        if (!StringWrapper.equals(attrValue, _EMPTY_ATTR_VALUE)) {
-          result = this._matchTerminal(terminalValuesMap, _EMPTY_ATTR_VALUE, cssSelector,
-                                       matchedCallback) ||
-                   result;
-        }
-        result = this._matchTerminal(terminalValuesMap, attrValue, cssSelector, matchedCallback) ||
-                 result;
-
-        var partialValuesMap = this._attrValuePartialMap.get(attrName);
-        if (!StringWrapper.equals(attrValue, _EMPTY_ATTR_VALUE)) {
-          result = this._matchPartial(partialValuesMap, _EMPTY_ATTR_VALUE, cssSelector,
-                                      matchedCallback) ||
-                   result;
-        }
-        result =
-            this._matchPartial(partialValuesMap, attrValue, cssSelector, matchedCallback) || result;
-      }
-    }
-    return result;
-  }
-
-  _matchTerminal(map: Map<string, List<SelectorContext>>, name, cssSelector: CssSelector,
-                 matchedCallback: (CssSelector, any) => void): boolean {
-    if (isBlank(map) || isBlank(name)) {
-      return false;
-    }
-
-    var selectables = map.get(name);
-    var starSelectables = map.get("*");
-    if (isPresent(starSelectables)) {
-      selectables = ListWrapper.concat(selectables, starSelectables);
-    }
-    if (isBlank(selectables)) {
-      return false;
-    }
-    var selectable;
-    var result = false;
-    for (var index = 0; index < selectables.length; index++) {
-      selectable = selectables[index];
-      result = selectable.finalize(cssSelector, matchedCallback) || result;
-    }
-    return result;
-  }
-
-  _matchPartial(map: Map<string, SelectorMatcher>, name, cssSelector: CssSelector,
-                matchedCallback /*: (CssSelector, any) => void*/): boolean {
-    if (isBlank(map) || isBlank(name)) {
-      return false;
-    }
-    var nestedSelector = map.get(name);
-    if (isBlank(nestedSelector)) {
-      return false;
-    }
-    // TODO(perf): get rid of recursion and measure again
-    // TODO(perf): don't pass the whole selector into the recursion,
-    // but only the not processed parts
-    return nestedSelector.match(cssSelector, matchedCallback);
-  }
-}
-
-
-class SelectorListContext {
-  alreadyMatched: boolean = false;
-
-  constructor(public selectors: List<CssSelector>) {}
-}
-
-// Store context to pass back selector and context when a selector is matched
-class SelectorContext {
-  notSelectors: List<CssSelector>;
-
-  constructor(public selector: CssSelector, public cbContext: any,
-              public listContext: SelectorListContext) {
-    this.notSelectors = selector.notSelectors;
-  }
-
-  finalize(cssSelector: CssSelector, callback /*: (CssSelector, any) => void*/): boolean {
-    var result = true;
-    if (this.notSelectors.length > 0 &&
-        (isBlank(this.listContext) || !this.listContext.alreadyMatched)) {
-      var notMatcher = SelectorMatcher.createNotMatcher(this.notSelectors);
-      result = !notMatcher.match(cssSelector, null);
-    }
-    if (result && isPresent(callback) &&
-        (isBlank(this.listContext) || !this.listContext.alreadyMatched)) {
-      if (isPresent(this.listContext)) {
-        this.listContext.alreadyMatched = true;
-      }
-      callback(this.selector, this.cbContext);
-    }
-    return result;
-  }
-}
diff --git a/modules/angular2/src/render/dom/compiler/style_inliner.ts b/modules/angular2/src/render/dom/compiler/style_inliner.ts
deleted file mode 100644
index c2bd7574634b..000000000000
--- a/modules/angular2/src/render/dom/compiler/style_inliner.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {XHR} from 'angular2/src/render/xhr';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {StyleUrlResolver} from './style_url_resolver';
-
-import {
-  isBlank,
-  isPresent,
-  RegExp,
-  RegExpWrapper,
-  StringWrapper,
-  normalizeBlank,
-  isPromise
-} from 'angular2/src/facade/lang';
-import {
-  Promise,
-  PromiseWrapper,
-} from 'angular2/src/facade/async';
-
-/**
- * Inline @import rules in the given CSS.
- *
- * When an @import rules is inlined, it's url are rewritten.
- */
-@Injectable()
-export class StyleInliner {
-  constructor(public _xhr: XHR, public _styleUrlResolver: StyleUrlResolver,
-              public _urlResolver: UrlResolver) {}
-
-  /**
-   * Inline the @imports rules in the given CSS text.
-   *
-   * The baseUrl is required to rewrite URLs in the inlined content.
-   *
-   * @param {string} cssText
-   * @param {string} baseUrl
-   * @returns {*} a Promise<string> when @import rules are present, a string otherwise
-   */
-  inlineImports(cssText: string, baseUrl: string): Promise<string>| string {
-    return this._inlineImports(cssText, baseUrl, []);
-  }
-
-  _inlineImports(cssText: string, baseUrl: string, inlinedUrls: List<string>): Promise<string>|
-      string {
-    var partIndex = 0;
-    var parts = StringWrapper.split(cssText, _importRe);
-
-    if (parts.length === 1) {
-      // no @import rule found, return the original css
-      return cssText;
-    }
-
-    var promises = [];
-
-    while (partIndex < parts.length - 1) {
-      // prefix is the content before the @import rule
-      var prefix = parts[partIndex];
-      // rule is the parameter of the @import rule
-      var rule = parts[partIndex + 1];
-      var url = _extractUrl(rule);
-      if (isPresent(url)) {
-        url = this._urlResolver.resolve(baseUrl, url);
-      }
-      var mediaQuery = _extractMediaQuery(rule);
-      var promise;
-
-      if (isBlank(url)) {
-        promise = PromiseWrapper.resolve(`/* Invalid import rule: "@import ${rule};" */`);
-      } else if (ListWrapper.contains(inlinedUrls, url)) {
-        // The current import rule has already been inlined, return the prefix only
-        // Importing again might cause a circular dependency
-        promise = PromiseWrapper.resolve(prefix);
-      } else {
-        inlinedUrls.push(url);
-        promise = PromiseWrapper.then(this._xhr.get(url), (rawCss) => {
-          // resolve nested @import rules
-          var inlinedCss = this._inlineImports(rawCss, url, inlinedUrls);
-          if (isPromise(inlinedCss)) {
-            // wait until nested @import are inlined
-            return (<Promise<string>>inlinedCss)
-                .then((css) => {return prefix + this._transformImportedCss(css, mediaQuery, url) +
-                                       '\n'});
-          } else {
-            // there are no nested @import, return the css
-            return prefix + this._transformImportedCss(<string>inlinedCss, mediaQuery, url) + '\n';
-          }
-        }, (error) => `/* failed to import ${url} */\n`);
-      }
-      promises.push(promise);
-      partIndex += 2;
-    }
-
-    return PromiseWrapper.all(promises).then(function(cssParts) {
-      var cssText = cssParts.join('');
-      if (partIndex < parts.length) {
-        // append then content located after the last @import rule
-        cssText += parts[partIndex];
-      }
-      return cssText;
-    });
-  }
-
-  _transformImportedCss(css: string, mediaQuery: string, url: string): string {
-    css = this._styleUrlResolver.resolveUrls(css, url);
-    return _wrapInMediaRule(css, mediaQuery);
-  }
-}
-
-// Extracts the url from an import rule, supported formats:
-// - 'url' / "url",
-// - url(url) / url('url') / url("url")
-function _extractUrl(importRule: string): string {
-  var match = RegExpWrapper.firstMatch(_urlRe, importRule);
-  if (isBlank(match)) return null;
-  return isPresent(match[1]) ? match[1] : match[2];
-}
-
-// Extracts the media query from an import rule.
-// Returns null when there is no media query.
-function _extractMediaQuery(importRule: string): string {
-  var match = RegExpWrapper.firstMatch(_mediaQueryRe, importRule);
-  if (isBlank(match)) return null;
-  var mediaQuery = match[1].trim();
-  return (mediaQuery.length > 0) ? mediaQuery : null;
-}
-
-// Wraps the css in a media rule when the media query is not null
-function _wrapInMediaRule(css: string, query: string): string {
-  return (isBlank(query)) ? css : `@media ${query} {\n${css}\n}`;
-}
-
-var _importRe = RegExpWrapper.create('@import\\s+([^;]+);');
-var _urlRe = RegExpWrapper.create(
-    'url\\(\\s*?[\'"]?([^\'")]+)[\'"]?|' +  // url(url) or url('url') or url("url")
-    '[\'"]([^\'")]+)[\'"]'                  // "url" or 'url'
-    );
-var _mediaQueryRe = RegExpWrapper.create('[\'"][^\'"]+[\'"]\\s*\\)?\\s*(.*)');
diff --git a/modules/angular2/src/render/dom/compiler/style_url_resolver.ts b/modules/angular2/src/render/dom/compiler/style_url_resolver.ts
deleted file mode 100644
index 27bf82d37a9c..000000000000
--- a/modules/angular2/src/render/dom/compiler/style_url_resolver.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// Some of the code comes from WebComponents.JS
-// https://github.com/webcomponents/webcomponentsjs/blob/master/src/HTMLImports/path.js
-
-import {Injectable} from 'angular2/di';
-import {RegExp, RegExpWrapper, StringWrapper} from 'angular2/src/facade/lang';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-
-/**
- * Rewrites URLs by resolving '@import' and 'url()' URLs from the given base URL.
- */
-@Injectable()
-export class StyleUrlResolver {
-  constructor(public _resolver: UrlResolver) {}
-
-  resolveUrls(cssText: string, baseUrl: string): string {
-    cssText = this._replaceUrls(cssText, _cssUrlRe, baseUrl);
-    cssText = this._replaceUrls(cssText, _cssImportRe, baseUrl);
-    return cssText;
-  }
-
-  _replaceUrls(cssText: string, re: RegExp, baseUrl: string) {
-    return StringWrapper.replaceAllMapped(cssText, re, (m) => {
-      var pre = m[1];
-      var url = StringWrapper.replaceAll(m[2], _quoteRe, '');
-      var post = m[3];
-
-      var resolvedUrl = this._resolver.resolve(baseUrl, url);
-
-      return pre + "'" + resolvedUrl + "'" + post;
-    });
-  }
-}
-
-var _cssUrlRe = RegExpWrapper.create('(url\\()([^)]*)(\\))');
-var _cssImportRe = RegExpWrapper.create('(@import[\\s]+(?!url\\())[\'"]([^\'"]*)[\'"](.*;)');
-var _quoteRe = RegExpWrapper.create('[\'"]');
diff --git a/modules/angular2/src/render/dom/compiler/text_interpolation_parser.ts b/modules/angular2/src/render/dom/compiler/text_interpolation_parser.ts
deleted file mode 100644
index 42f69e882bac..000000000000
--- a/modules/angular2/src/render/dom/compiler/text_interpolation_parser.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {RegExpWrapper, StringWrapper, isPresent} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {Parser} from 'angular2/change_detection';
-
-import {CompileStep} from './compile_step';
-import {CompileElement} from './compile_element';
-import {CompileControl} from './compile_control';
-
-/**
- * Parses interpolations in direct text child nodes of the current element.
- */
-export class TextInterpolationParser implements CompileStep {
-  constructor(public _parser: Parser) {}
-
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    if (!current.compileChildren) {
-      return;
-    }
-    var element = current.element;
-    var childNodes = DOM.childNodes(DOM.templateAwareRoot(element));
-    for (var i = 0; i < childNodes.length; i++) {
-      var node = childNodes[i];
-      if (DOM.isTextNode(node)) {
-        var text = DOM.nodeValue(node);
-        var expr = this._parser.parseInterpolation(text, current.elementDescription);
-        if (isPresent(expr)) {
-          DOM.setText(node, ' ');
-          current.bindElement().bindText(node, expr);
-        }
-      }
-    }
-  }
-}
diff --git a/modules/angular2/src/render/dom/compiler/view_loader.ts b/modules/angular2/src/render/dom/compiler/view_loader.ts
deleted file mode 100644
index f1a65d3e8edb..000000000000
--- a/modules/angular2/src/render/dom/compiler/view_loader.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {isBlank, isPresent, BaseException, stringify, isPromise} from 'angular2/src/facade/lang';
-import {Map, MapWrapper, ListWrapper, List} from 'angular2/src/facade/collection';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {XHR} from 'angular2/src/render/xhr';
-
-import {ViewDefinition} from '../../api';
-
-import {StyleInliner} from './style_inliner';
-import {StyleUrlResolver} from './style_url_resolver';
-
-/**
- * Strategy to load component views.
- * TODO: Make public API once we are more confident in this approach.
- */
-@Injectable()
-export class ViewLoader {
-  _cache: Map<string, Promise<string>> = new Map();
-
-  constructor(private _xhr: XHR, private _styleInliner: StyleInliner,
-              private _styleUrlResolver: StyleUrlResolver) {}
-
-  load(view: ViewDefinition): Promise</*element*/ any> {
-    let tplElAndStyles: List<string | Promise<string>> = [this._loadHtml(view)];
-
-    if (isPresent(view.styles)) {
-      view.styles.forEach((cssText: string) => {
-        let textOrPromise = this._resolveAndInlineCssText(cssText, view.templateAbsUrl);
-        tplElAndStyles.push(textOrPromise);
-      });
-    }
-
-    if (isPresent(view.styleAbsUrls)) {
-      view.styleAbsUrls.forEach(url => {
-        let promise = this._loadText(url).then(
-            cssText => this._resolveAndInlineCssText(cssText, view.templateAbsUrl));
-        tplElAndStyles.push(promise);
-      });
-    }
-
-    // Inline the styles from the @View annotation and return a template element
-    return PromiseWrapper.all(tplElAndStyles)
-        .then((res: List<string>) => {
-          let tplEl = res[0];
-          let cssTexts = ListWrapper.slice(res, 1);
-
-          _insertCssTexts(DOM.content(tplEl), cssTexts);
-
-          return tplEl;
-        });
-  }
-
-  private _loadText(url: string): Promise<string> {
-    var response = this._cache.get(url);
-
-    if (isBlank(response)) {
-      // TODO(vicb): change error when TS gets fixed
-      // https://github.com/angular/angular/issues/2280
-      // throw new BaseException(`Failed to fetch url "${url}"`);
-      response = PromiseWrapper.catchError(
-          this._xhr.get(url),
-          _ => PromiseWrapper.reject(new BaseException(`Failed to fetch url "${url}"`), null));
-
-      this._cache.set(url, response);
-    }
-
-    return response;
-  }
-
-  // Load the html and inline any style tags
-  private _loadHtml(view: ViewDefinition): Promise<any /* element */> {
-    let html;
-
-    // Load the HTML
-    if (isPresent(view.template)) {
-      html = PromiseWrapper.resolve(view.template);
-    } else if (isPresent(view.templateAbsUrl)) {
-      html = this._loadText(view.templateAbsUrl);
-    } else {
-      throw new BaseException('View should have either the templateUrl or template property set');
-    }
-
-    // Inline the style tags from the html
-    return html.then(html => {
-      var tplEl = DOM.createTemplate(html);
-      let styleEls = DOM.querySelectorAll(DOM.content(tplEl), 'STYLE');
-
-      let promises: List<Promise<string>> = [];
-      for (let i = 0; i < styleEls.length; i++) {
-        let promise = this._resolveAndInlineElement(styleEls[i], view.templateAbsUrl);
-        if (isPromise(promise)) {
-          promises.push(promise);
-        }
-      }
-
-      return promises.length > 0 ? PromiseWrapper.all(promises).then(_ => tplEl) : tplEl;
-    });
-  }
-
-  /**
-   * Inlines a style element.
-   *
-   * @param styleEl The style element
-   * @param baseUrl The base url
-   * @returns {Promise<any>} null when no @import rule exist in the css or a Promise
-   * @private
-   */
-  private _resolveAndInlineElement(styleEl, baseUrl: string): Promise<any> {
-    let textOrPromise = this._resolveAndInlineCssText(DOM.getText(styleEl), baseUrl);
-
-    if (isPromise(textOrPromise)) {
-      return (<Promise<string>>textOrPromise).then(css => { DOM.setText(styleEl, css); });
-    } else {
-      DOM.setText(styleEl, <string>textOrPromise);
-      return null;
-    }
-  }
-
-  private _resolveAndInlineCssText(cssText: string, baseUrl: string): string | Promise<string> {
-    cssText = this._styleUrlResolver.resolveUrls(cssText, baseUrl);
-    return this._styleInliner.inlineImports(cssText, baseUrl);
-  }
-}
-
-function _insertCssTexts(element, cssTexts: List<string>): void {
-  if (cssTexts.length == 0) return;
-
-  let insertBefore = DOM.firstChild(element);
-
-  for (let i = cssTexts.length - 1; i >= 0; i--) {
-    let styleEl = DOM.createStyleElement(cssTexts[i]);
-    if (isPresent(insertBefore)) {
-      DOM.insertBefore(insertBefore, styleEl);
-    } else {
-      DOM.appendChild(element, styleEl);
-    }
-    insertBefore = styleEl;
-  }
-}
diff --git a/modules/angular2/src/render/dom/compiler/view_splitter.ts b/modules/angular2/src/render/dom/compiler/view_splitter.ts
deleted file mode 100644
index 9329b9bfd00f..000000000000
--- a/modules/angular2/src/render/dom/compiler/view_splitter.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import {isBlank, isPresent, BaseException, StringWrapper} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {Parser} from 'angular2/change_detection';
-
-import {CompileStep} from './compile_step';
-import {CompileElement} from './compile_element';
-import {CompileControl} from './compile_control';
-
-import {dashCaseToCamelCase} from '../util';
-
-/**
- * Splits views at `<template>` elements or elements with `template` attribute:
- * For `<template>` elements:
- * - moves the content into a new and disconnected `<template>` element
- *   that is marked as view root.
- *
- * For elements with a `template` attribute:
- * - replaces the element with an empty `<template>` element,
- *   parses the content of the `template` attribute and adds the information to that
- *   `<template>` element. Marks the elements as view root.
- *
- * Note: In both cases the root of the nested view is disconnected from its parent element.
- * This is needed for browsers that don't support the `<template>` element
- * as we want to do locate elements with bindings using `getElementsByClassName` later on,
- * which should not descend into the nested view.
- */
-export class ViewSplitter implements CompileStep {
-  constructor(public _parser: Parser) {}
-
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    var attrs = current.attrs();
-    var templateBindings = attrs.get('template');
-    var hasTemplateBinding = isPresent(templateBindings);
-
-    // look for template shortcuts such as *ng-if="condition" and treat them as template="if
-    // condition"
-    MapWrapper.forEach(attrs, (attrValue, attrName) => {
-      if (StringWrapper.startsWith(attrName, '*')) {
-        var key = StringWrapper.substring(attrName, 1);  // remove the star
-        if (hasTemplateBinding) {
-          // 2nd template binding detected
-          throw new BaseException(`Only one template directive per element is allowed: ` +
-                                  `${templateBindings} and ${key} cannot be used simultaneously ` +
-                                  `in ${current.elementDescription}`);
-        } else {
-          templateBindings = (attrValue.length == 0) ? key : key + ' ' + attrValue;
-          hasTemplateBinding = true;
-        }
-      }
-    });
-
-    if (isPresent(parent)) {
-      if (DOM.isTemplateElement(current.element)) {
-        if (!current.isViewRoot) {
-          var viewRoot = new CompileElement(DOM.createTemplate(''));
-          viewRoot.inheritedProtoView = current.bindElement().bindNestedProtoView(viewRoot.element);
-          // viewRoot doesn't appear in the original template, so we associate
-          // the current element description to get a more meaningful message in case of error
-          viewRoot.elementDescription = current.elementDescription;
-          viewRoot.isViewRoot = true;
-
-          this._moveChildNodes(DOM.content(current.element), DOM.content(viewRoot.element));
-          control.addChild(viewRoot);
-        }
-      }
-      if (hasTemplateBinding) {
-        var newParent = new CompileElement(DOM.createTemplate(''));
-        newParent.inheritedProtoView = current.inheritedProtoView;
-        newParent.inheritedElementBinder = current.inheritedElementBinder;
-        newParent.distanceToInheritedBinder = current.distanceToInheritedBinder;
-        // newParent doesn't appear in the original template, so we associate
-        // the current element description to get a more meaningful message in case of error
-        newParent.elementDescription = current.elementDescription;
-
-        current.inheritedProtoView = newParent.bindElement().bindNestedProtoView(current.element);
-        current.inheritedElementBinder = null;
-        current.distanceToInheritedBinder = 0;
-        current.isViewRoot = true;
-        this._parseTemplateBindings(templateBindings, newParent);
-
-        this._addParentElement(current.element, newParent.element);
-        control.addParent(newParent);
-        DOM.remove(current.element);
-      }
-    }
-  }
-
-  _moveChildNodes(source, target) {
-    var next = DOM.firstChild(source);
-    while (isPresent(next)) {
-      DOM.appendChild(target, next);
-      next = DOM.firstChild(source);
-    }
-  }
-
-  _addParentElement(currentElement, newParentElement) {
-    DOM.insertBefore(currentElement, newParentElement);
-    DOM.appendChild(newParentElement, currentElement);
-  }
-
-  _parseTemplateBindings(templateBindings: string, compileElement: CompileElement) {
-    var bindings =
-        this._parser.parseTemplateBindings(templateBindings, compileElement.elementDescription);
-    for (var i = 0; i < bindings.length; i++) {
-      var binding = bindings[i];
-      if (binding.keyIsVar) {
-        compileElement.bindElement().bindVariable(dashCaseToCamelCase(binding.key), binding.name);
-        compileElement.attrs().set(binding.key, binding.name);
-      } else if (isPresent(binding.expression)) {
-        compileElement.bindElement().bindProperty(dashCaseToCamelCase(binding.key),
-                                                  binding.expression);
-        compileElement.attrs().set(binding.key, binding.expression.source);
-      } else {
-        DOM.setAttribute(compileElement.element, binding.key, '');
-      }
-    }
-  }
-}
diff --git a/modules/angular2/src/render/dom/convert.ts b/modules/angular2/src/render/dom/convert.ts
deleted file mode 100644
index 7259b9fdff6d..000000000000
--- a/modules/angular2/src/render/dom/convert.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {isPresent, isArray} from 'angular2/src/facade/lang';
-import {DirectiveMetadata} from 'angular2/src/render/api';
-
-/**
- * Converts a [DirectiveMetadata] to a map representation. This creates a copy,
- * that is, subsequent changes to `meta` will not be mirrored in the map.
- */
-export function directiveMetadataToMap(meta: DirectiveMetadata): Map<string, any> {
-  return MapWrapper.createFromPairs([
-    ['id', meta.id],
-    ['selector', meta.selector],
-    ['compileChildren', meta.compileChildren],
-    ['hostProperties', _cloneIfPresent(meta.hostProperties)],
-    ['hostListeners', _cloneIfPresent(meta.hostListeners)],
-    ['hostActions', _cloneIfPresent(meta.hostActions)],
-    ['hostAttributes', _cloneIfPresent(meta.hostAttributes)],
-    ['properties', _cloneIfPresent(meta.properties)],
-    ['readAttributes', _cloneIfPresent(meta.readAttributes)],
-    ['type', meta.type],
-    ['exportAs', meta.exportAs],
-    ['callOnDestroy', meta.callOnDestroy],
-    ['callOnCheck', meta.callOnCheck],
-    ['callOnInit', meta.callOnInit],
-    ['callOnChange', meta.callOnChange],
-    ['callOnAllChangesDone', meta.callOnAllChangesDone],
-    ['events', meta.events],
-    ['changeDetection', meta.changeDetection],
-    ['version', 1],
-  ]);
-}
-
-/**
- * Converts a map representation of [DirectiveMetadata] into a
- * [DirectiveMetadata] object. This creates a copy, that is, subsequent changes
- * to `map` will not be mirrored in the [DirectiveMetadata] object.
- */
-export function directiveMetadataFromMap(map: Map<string, any>): DirectiveMetadata {
-  return new DirectiveMetadata({
-    id:<string>map.get('id'),
-    selector:<string>map.get('selector'),
-    compileChildren:<boolean>map.get('compileChildren'),
-    hostProperties:<Map<string, string>>_cloneIfPresent(map.get('hostProperties')),
-    hostListeners:<Map<string, string>>_cloneIfPresent(map.get('hostListeners')),
-    hostActions:<Map<string, string>>_cloneIfPresent(map.get('hostActions')),
-    hostAttributes:<Map<string, string>>_cloneIfPresent(map.get('hostAttributes')),
-    properties:<List<string>>_cloneIfPresent(map.get('properties')),
-    readAttributes:<List<string>>_cloneIfPresent(map.get('readAttributes')),
-    type:<number>map.get('type'),
-    exportAs:<string>map.get('exportAs'),
-    callOnDestroy:<boolean>map.get('callOnDestroy'),
-    callOnCheck:<boolean>map.get('callOnCheck'),
-    callOnChange:<boolean>map.get('callOnChange'),
-    callOnInit:<boolean>map.get('callOnInit'),
-    callOnAllChangesDone:<boolean>map.get('callOnAllChangesDone'),
-    events:<List<string>>_cloneIfPresent(map.get('events')),
-    changeDetection:<string>map.get('changeDetection'),
-  });
-}
-
-/**
- * Clones the [List] or [Map] `o` if it is present.
- */
-function _cloneIfPresent(o): any {
-  if (!isPresent(o)) return null;
-  return isArray(o) ? ListWrapper.clone(o) : MapWrapper.clone(o);
-}
diff --git a/modules/angular2/src/render/dom/dom_renderer.ts b/modules/angular2/src/render/dom/dom_renderer.ts
deleted file mode 100644
index dd93bad85ffb..000000000000
--- a/modules/angular2/src/render/dom/dom_renderer.ts
+++ /dev/null
@@ -1,363 +0,0 @@
-import {Inject, Injectable, OpaqueToken} from 'angular2/di';
-import {
-  isPresent,
-  isBlank,
-  BaseException,
-  RegExpWrapper,
-  CONST_EXPR
-} from 'angular2/src/facade/lang';
-import {ListWrapper, MapWrapper, Map, StringMapWrapper, List} from 'angular2/src/facade/collection';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {Content} from './shadow_dom/content_tag';
-import {ShadowDomStrategy} from './shadow_dom/shadow_dom_strategy';
-import {EventManager} from './events/event_manager';
-
-import {DomProtoView, DomProtoViewRef, resolveInternalDomProtoView} from './view/proto_view';
-import {DomView, DomViewRef, resolveInternalDomView} from './view/view';
-import {DomElement} from './view/element';
-import {DomViewContainer} from './view/view_container';
-import {NG_BINDING_CLASS_SELECTOR, NG_BINDING_CLASS} from './util';
-
-import {Renderer, RenderProtoViewRef, RenderViewRef, RenderElementRef} from '../api';
-
-export const DOCUMENT_TOKEN = CONST_EXPR(new OpaqueToken('DocumentToken'));
-
-@Injectable()
-export class DomRenderer extends Renderer {
-  _document;
-
-  constructor(public _eventManager: EventManager, public _shadowDomStrategy: ShadowDomStrategy,
-              @Inject(DOCUMENT_TOKEN) document) {
-    super();
-    this._document = document;
-  }
-
-  createRootHostView(hostProtoViewRef: RenderProtoViewRef,
-                     hostElementSelector: string): RenderViewRef {
-    var hostProtoView = resolveInternalDomProtoView(hostProtoViewRef);
-    var element = DOM.querySelector(this._document, hostElementSelector);
-    if (isBlank(element)) {
-      throw new BaseException(`The selector "${hostElementSelector}" did not match any elements`);
-    }
-    return new DomViewRef(this._createView(hostProtoView, element));
-  }
-
-  createView(protoViewRef: RenderProtoViewRef): RenderViewRef {
-    var protoView = resolveInternalDomProtoView(protoViewRef);
-    return new DomViewRef(this._createView(protoView, null));
-  }
-
-  destroyView(view: RenderViewRef) {
-    // noop for now
-  }
-
-  getNativeElementSync(location: RenderElementRef): any {
-    return resolveInternalDomView(location.renderView)
-        .boundElements[location.boundElementIndex]
-        .element;
-  }
-
-  attachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef) {
-    var hostView = resolveInternalDomView(location.renderView);
-    var componentView = resolveInternalDomView(componentViewRef);
-    var element = hostView.boundElements[location.boundElementIndex].element;
-    var lightDom = hostView.boundElements[location.boundElementIndex].lightDom;
-    if (isPresent(lightDom)) {
-      lightDom.attachShadowDomView(componentView);
-    }
-    var shadowRoot = this._shadowDomStrategy.prepareShadowRoot(element);
-    this._moveViewNodesIntoParent(shadowRoot, componentView);
-    componentView.hostLightDom = lightDom;
-    componentView.shadowRoot = shadowRoot;
-  }
-
-  setComponentViewRootNodes(componentViewRef: RenderViewRef, rootNodes: List</*node*/ any>) {
-    var componentView = resolveInternalDomView(componentViewRef);
-    this._removeViewNodes(componentView);
-    componentView.rootNodes = rootNodes;
-    this._moveViewNodesIntoParent(componentView.shadowRoot, componentView);
-  }
-
-  getRootNodes(viewRef: RenderViewRef): List</*node*/ any> {
-    return resolveInternalDomView(viewRef).rootNodes;
-  }
-
-  detachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef) {
-    var hostView = resolveInternalDomView(location.renderView);
-    var componentView = resolveInternalDomView(componentViewRef);
-    this._removeViewNodes(componentView);
-    var lightDom = hostView.boundElements[location.boundElementIndex].lightDom;
-    if (isPresent(lightDom)) {
-      lightDom.detachShadowDomView();
-    }
-    componentView.hostLightDom = null;
-    componentView.shadowRoot = null;
-  }
-
-  attachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef) {
-    var parentView = resolveInternalDomView(location.renderView);
-    var view = resolveInternalDomView(viewRef);
-    var viewContainer = this._getOrCreateViewContainer(parentView, location.boundElementIndex);
-    ListWrapper.insert(viewContainer.views, atIndex, view);
-    view.hostLightDom = parentView.hostLightDom;
-
-    var directParentLightDom = this._directParentLightDom(parentView, location.boundElementIndex);
-    if (isBlank(directParentLightDom)) {
-      var siblingToInsertAfter;
-      if (atIndex == 0) {
-        siblingToInsertAfter = parentView.boundElements[location.boundElementIndex].element;
-      } else {
-        siblingToInsertAfter = ListWrapper.last(viewContainer.views[atIndex - 1].rootNodes);
-      }
-      this._moveViewNodesAfterSibling(siblingToInsertAfter, view);
-    } else {
-      directParentLightDom.redistribute();
-    }
-    // new content tags might have appeared, we need to redistribute.
-    if (isPresent(parentView.hostLightDom)) {
-      parentView.hostLightDom.redistribute();
-    }
-  }
-
-  detachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef) {
-    var parentView = resolveInternalDomView(location.renderView);
-    var view = resolveInternalDomView(viewRef);
-    var viewContainer = parentView.boundElements[location.boundElementIndex].viewContainer;
-    var detachedView = viewContainer.views[atIndex];
-    ListWrapper.removeAt(viewContainer.views, atIndex);
-    var directParentLightDom = this._directParentLightDom(parentView, location.boundElementIndex);
-    if (isBlank(directParentLightDom)) {
-      this._removeViewNodes(detachedView);
-    } else {
-      directParentLightDom.redistribute();
-    }
-    view.hostLightDom = null;
-    // content tags might have disappeared we need to do redistribution.
-    if (isPresent(parentView.hostLightDom)) {
-      parentView.hostLightDom.redistribute();
-    }
-  }
-
-  hydrateView(viewRef: RenderViewRef) {
-    var view = resolveInternalDomView(viewRef);
-    if (view.hydrated) throw new BaseException('The view is already hydrated.');
-    view.hydrated = true;
-
-    for (var i = 0; i < view.boundElements.length; ++i) {
-      var lightDom = view.boundElements[i].lightDom;
-      if (isPresent(lightDom)) {
-        lightDom.redistribute();
-      }
-    }
-
-    // add global events
-    view.eventHandlerRemovers = [];
-    var binders = view.proto.elementBinders;
-    for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
-      var binder = binders[binderIdx];
-      if (isPresent(binder.globalEvents)) {
-        for (var i = 0; i < binder.globalEvents.length; i++) {
-          var globalEvent = binder.globalEvents[i];
-          var remover = this._createGlobalEventListener(view, binderIdx, globalEvent.name,
-                                                        globalEvent.target, globalEvent.fullName);
-          view.eventHandlerRemovers.push(remover);
-        }
-      }
-    }
-    if (isPresent(view.hostLightDom)) {
-      view.hostLightDom.redistribute();
-    }
-  }
-
-  dehydrateView(viewRef: RenderViewRef) {
-    var view = resolveInternalDomView(viewRef);
-
-    // remove global events
-    for (var i = 0; i < view.eventHandlerRemovers.length; i++) {
-      view.eventHandlerRemovers[i]();
-    }
-
-    view.eventHandlerRemovers = null;
-    view.hydrated = false;
-  }
-
-  setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any): void {
-    var view = resolveInternalDomView(location.renderView);
-    view.setElementProperty(location.boundElementIndex, propertyName, propertyValue);
-  }
-
-  setElementAttribute(location: RenderElementRef, attributeName: string,
-                      attributeValue: string): void {
-    var view = resolveInternalDomView(location.renderView);
-    view.setElementAttribute(location.boundElementIndex, attributeName, attributeValue);
-  }
-
-  setElementClass(location: RenderElementRef, className: string, isAdd: boolean): void {
-    var view = resolveInternalDomView(location.renderView);
-    view.setElementClass(location.boundElementIndex, className, isAdd);
-  }
-
-  setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void {
-    var view = resolveInternalDomView(location.renderView);
-    view.setElementStyle(location.boundElementIndex, styleName, styleValue);
-  }
-
-  invokeElementMethod(location: RenderElementRef, methodName: string, args: List<any>): void {
-    var view = resolveInternalDomView(location.renderView);
-    view.invokeElementMethod(location.boundElementIndex, methodName, args);
-  }
-
-  setText(viewRef: RenderViewRef, textNodeIndex: number, text: string): void {
-    var view = resolveInternalDomView(viewRef);
-    DOM.setText(view.boundTextNodes[textNodeIndex], text);
-  }
-
-  setEventDispatcher(viewRef: RenderViewRef, dispatcher: any /*api.EventDispatcher*/): void {
-    var view = resolveInternalDomView(viewRef);
-    view.eventDispatcher = dispatcher;
-  }
-
-  _createView(protoView: DomProtoView, inplaceElement): DomView {
-    var rootElementClone;
-    var elementsWithBindingsDynamic;
-    var viewRootNodes;
-    if (isPresent(inplaceElement)) {
-      rootElementClone = inplaceElement;
-      elementsWithBindingsDynamic = [];
-      viewRootNodes = [inplaceElement];
-    } else if (protoView.isTemplateElement) {
-      rootElementClone = DOM.importIntoDoc(DOM.content(protoView.element));
-      elementsWithBindingsDynamic =
-          DOM.querySelectorAll(rootElementClone, NG_BINDING_CLASS_SELECTOR);
-      viewRootNodes = ListWrapper.createFixedSize(protoView.rootNodeCount);
-      // Note: An explicit loop is the fastest way to convert a DOM array into a JS array!
-      var childNode = DOM.firstChild(rootElementClone);
-      for (var i = 0; i < protoView.rootNodeCount; i++, childNode = DOM.nextSibling(childNode)) {
-        viewRootNodes[i] = childNode;
-      }
-    } else {
-      rootElementClone = DOM.importIntoDoc(protoView.element);
-      elementsWithBindingsDynamic = DOM.getElementsByClassName(rootElementClone, NG_BINDING_CLASS);
-      viewRootNodes = [rootElementClone];
-    }
-
-    var binders = protoView.elementBinders;
-    var boundTextNodes = ListWrapper.createFixedSize(protoView.boundTextNodeCount);
-    var boundElements = ListWrapper.createFixedSize(binders.length);
-    var boundTextNodeIdx = 0;
-
-    for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
-      var binder = binders[binderIdx];
-      var element;
-      var childNodes;
-      if (binderIdx === 0 && protoView.rootBindingOffset === 1) {
-        // Note: if the root element was a template,
-        // the rootElementClone is a document fragment,
-        // which will be empty as soon as the view gets appended
-        // to a parent. So we store null in the boundElements array.
-        element = protoView.isTemplateElement ? null : rootElementClone;
-        childNodes = DOM.childNodes(rootElementClone);
-      } else {
-        element = elementsWithBindingsDynamic[binderIdx - protoView.rootBindingOffset];
-        childNodes = DOM.childNodes(element);
-      }
-
-      // boundTextNodes
-      var textNodeIndices = binder.textNodeIndices;
-      for (var i = 0; i < textNodeIndices.length; i++) {
-        boundTextNodes[boundTextNodeIdx++] = childNodes[textNodeIndices[i]];
-      }
-
-      // contentTags
-      var contentTag = null;
-      if (isPresent(binder.contentTagSelector)) {
-        contentTag = new Content(element, binder.contentTagSelector);
-      }
-      boundElements[binderIdx] = new DomElement(binder, element, contentTag);
-    }
-
-    var view = new DomView(protoView, viewRootNodes, boundTextNodes, boundElements);
-
-    for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
-      var binder = binders[binderIdx];
-      var element = boundElements[binderIdx];
-      var domEl = element.element;
-
-      // lightDoms
-      var lightDom = null;
-      // Note: for the root element we can't use the binder.elementIsEmpty
-      // information as we don't use the element from the ProtoView
-      // but an element from the document.
-      if (isPresent(binder.componentId) && (!binder.elementIsEmpty || isPresent(inplaceElement))) {
-        lightDom = this._shadowDomStrategy.constructLightDom(view, domEl);
-      }
-      element.lightDom = lightDom;
-
-      // init contentTags
-      var contentTag = element.contentTag;
-      if (isPresent(contentTag)) {
-        var directParentLightDom = this._directParentLightDom(view, binderIdx);
-        contentTag.init(directParentLightDom);
-      }
-
-      // events
-      if (isPresent(binder.eventLocals) && isPresent(binder.localEvents)) {
-        for (var i = 0; i < binder.localEvents.length; i++) {
-          this._createEventListener(view, domEl, binderIdx, binder.localEvents[i].name,
-                                    binder.eventLocals);
-        }
-      }
-    }
-
-    return view;
-  }
-
-  _createEventListener(view, element, elementIndex, eventName, eventLocals) {
-    this._eventManager.addEventListener(
-        element, eventName, (event) => { view.dispatchEvent(elementIndex, eventName, event); });
-  }
-
-
-  _moveViewNodesAfterSibling(sibling, view) {
-    for (var i = view.rootNodes.length - 1; i >= 0; --i) {
-      DOM.insertAfter(sibling, view.rootNodes[i]);
-    }
-  }
-
-  _moveViewNodesIntoParent(parent, view) {
-    for (var i = 0; i < view.rootNodes.length; ++i) {
-      DOM.appendChild(parent, view.rootNodes[i]);
-    }
-  }
-
-  _removeViewNodes(view) {
-    var len = view.rootNodes.length;
-    if (len == 0) return;
-    var parent = view.rootNodes[0].parentNode;
-    for (var i = len - 1; i >= 0; --i) {
-      DOM.removeChild(parent, view.rootNodes[i]);
-    }
-  }
-
-  _getOrCreateViewContainer(parentView: DomView, boundElementIndex) {
-    var el = parentView.boundElements[boundElementIndex];
-    var vc = el.viewContainer;
-    if (isBlank(vc)) {
-      vc = new DomViewContainer();
-      el.viewContainer = vc;
-    }
-    return vc;
-  }
-
-  _directParentLightDom(view: DomView, boundElementIndex: number) {
-    var directParentEl = view.getDirectParentElement(boundElementIndex);
-    return isPresent(directParentEl) ? directParentEl.lightDom : null;
-  }
-
-  _createGlobalEventListener(view, elementIndex, eventName, eventTarget, fullName): Function {
-    return this._eventManager.addGlobalEventListener(
-        eventTarget, eventName, (event) => { view.dispatchEvent(elementIndex, fullName, event); });
-  }
-}
diff --git a/modules/angular2/src/render/dom/events/event_manager.ts b/modules/angular2/src/render/dom/events/event_manager.ts
deleted file mode 100644
index 39b4b1f12984..000000000000
--- a/modules/angular2/src/render/dom/events/event_manager.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import {isBlank, BaseException, isPresent, StringWrapper} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
-
-var BUBBLE_SYMBOL = '^';
-
-export class EventManager {
-  constructor(public _plugins: List<EventManagerPlugin>, public _zone: NgZone) {
-    for (var i = 0; i < _plugins.length; i++) {
-      _plugins[i].manager = this;
-    }
-  }
-
-  addEventListener(element, eventName: string, handler: Function) {
-    var withoutBubbleSymbol = this._removeBubbleSymbol(eventName);
-    var plugin = this._findPluginFor(withoutBubbleSymbol);
-    plugin.addEventListener(element, withoutBubbleSymbol, handler,
-                            withoutBubbleSymbol != eventName);
-  }
-
-  addGlobalEventListener(target: string, eventName: string, handler: Function): Function {
-    var withoutBubbleSymbol = this._removeBubbleSymbol(eventName);
-    var plugin = this._findPluginFor(withoutBubbleSymbol);
-    return plugin.addGlobalEventListener(target, withoutBubbleSymbol, handler,
-                                         withoutBubbleSymbol != eventName);
-  }
-
-  getZone(): NgZone { return this._zone; }
-
-  _findPluginFor(eventName: string): EventManagerPlugin {
-    var plugins = this._plugins;
-    for (var i = 0; i < plugins.length; i++) {
-      var plugin = plugins[i];
-      if (plugin.supports(eventName)) {
-        return plugin;
-      }
-    }
-    throw new BaseException(`No event manager plugin found for event ${eventName}`);
-  }
-
-  _removeBubbleSymbol(eventName: string): string {
-    return eventName[0] == BUBBLE_SYMBOL ? StringWrapper.substring(eventName, 1) : eventName;
-  }
-}
-
-export class EventManagerPlugin {
-  manager: EventManager;
-
-  // We are assuming here that all plugins support bubbled and non-bubbled events.
-  // That is equivalent to having supporting $event.target
-  // The bubbling flag (currently ^) is stripped before calling the supports and
-  // addEventListener methods.
-  supports(eventName: string): boolean { return false; }
-
-  addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
-    throw "not implemented";
-  }
-
-  addGlobalEventListener(element, eventName: string, handler: Function,
-                         shouldSupportBubble: boolean): Function {
-    throw "not implemented";
-  }
-}
-
-export class DomEventsPlugin extends EventManagerPlugin {
-  manager: EventManager;
-
-  // This plugin should come last in the list of plugins, because it accepts all
-  // events.
-  supports(eventName: string): boolean { return true; }
-
-  addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
-    var outsideHandler =
-        this._getOutsideHandler(shouldSupportBubble, element, handler, this.manager._zone);
-    this.manager._zone.runOutsideAngular(() => { DOM.on(element, eventName, outsideHandler); });
-  }
-
-  addGlobalEventListener(target: string, eventName: string, handler: Function,
-                         shouldSupportBubble: boolean): Function {
-    var element = DOM.getGlobalEventTarget(target);
-    var outsideHandler =
-        this._getOutsideHandler(shouldSupportBubble, element, handler, this.manager._zone);
-    return this.manager._zone.runOutsideAngular(
-        () => { return DOM.onAndCancel(element, eventName, outsideHandler); });
-  }
-
-  _getOutsideHandler(shouldSupportBubble: boolean, element, handler: Function, zone: NgZone) {
-    return shouldSupportBubble ? DomEventsPlugin.bubbleCallback(element, handler, zone) :
-                                 DomEventsPlugin.sameElementCallback(element, handler, zone);
-  }
-
-  static sameElementCallback(element, handler, zone): (event: Event) => void {
-    return (event) => {
-      if (event.target === element) {
-        zone.run(() => handler(event));
-      }
-    };
-  }
-
-  static bubbleCallback(element, handler, zone): (event: Event) => void {
-    return (event) => zone.run(() => handler(event));
-  }
-}
diff --git a/modules/angular2/src/render/dom/events/hammer_common.ts b/modules/angular2/src/render/dom/events/hammer_common.ts
deleted file mode 100644
index 6b8630e6b426..000000000000
--- a/modules/angular2/src/render/dom/events/hammer_common.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import {EventManagerPlugin} from './event_manager';
-import {StringMapWrapper} from 'angular2/src/facade/collection';
-
-var _eventNames = {
-  // pan
-  'pan': true,
-  'panstart': true,
-  'panmove': true,
-  'panend': true,
-  'pancancel': true,
-  'panleft': true,
-  'panright': true,
-  'panup': true,
-  'pandown': true,
-  // pinch
-  'pinch': true,
-  'pinchstart': true,
-  'pinchmove': true,
-  'pinchend': true,
-  'pinchcancel': true,
-  'pinchin': true,
-  'pinchout': true,
-  // press
-  'press': true,
-  'pressup': true,
-  // rotate
-  'rotate': true,
-  'rotatestart': true,
-  'rotatemove': true,
-  'rotateend': true,
-  'rotatecancel': true,
-  // swipe
-  'swipe': true,
-  'swipeleft': true,
-  'swiperight': true,
-  'swipeup': true,
-  'swipedown': true,
-  // tap
-  'tap': true,
-};
-
-
-export class HammerGesturesPluginCommon extends EventManagerPlugin {
-  constructor() { super(); }
-
-  supports(eventName: string): boolean {
-    eventName = eventName.toLowerCase();
-    return StringMapWrapper.contains(_eventNames, eventName);
-  }
-}
diff --git a/modules/angular2/src/render/dom/events/hammer_gestures.dart b/modules/angular2/src/render/dom/events/hammer_gestures.dart
deleted file mode 100644
index b66f7006060f..000000000000
--- a/modules/angular2/src/render/dom/events/hammer_gestures.dart
+++ /dev/null
@@ -1,89 +0,0 @@
-library angular.events;
-
-import 'dart:html';
-import './hammer_common.dart';
-import 'package:angular2/src/facade/lang.dart' show BaseException;
-
-import 'dart:js' as js;
-
-class HammerGesturesPlugin extends HammerGesturesPluginCommon {
-  bool supports(String eventName) {
-    if (!super.supports(eventName)) return false;
-
-    if (!js.context.hasProperty('Hammer')) {
-      throw new BaseException(
-          'Hammer.js is not loaded, can not bind ${eventName} event');
-    }
-
-    return true;
-  }
-
-  addEventListener(Element element, String eventName, Function handler,
-      bool shouldSupportBubble) {
-    if (shouldSupportBubble) throw new BaseException(
-        'Hammer.js plugin does not support bubbling gestures.');
-    var zone = this.manager.getZone();
-    eventName = eventName.toLowerCase();
-
-    zone.runOutsideAngular(() {
-      // Creating the manager bind events, must be done outside of angular
-      var mc = new js.JsObject(js.context['Hammer'], [element]);
-
-      var jsObj = mc.callMethod('get', ['pinch']);
-      jsObj.callMethod('set', [new js.JsObject.jsify({'enable': true})]);
-      jsObj = mc.callMethod('get', ['rotate']);
-      jsObj.callMethod('set', [new js.JsObject.jsify({'enable': true})]);
-
-      mc.callMethod('on', [
-        eventName,
-        (eventObj) {
-          zone.run(() {
-            var dartEvent = new HammerEvent._fromJsEvent(eventObj);
-            handler(dartEvent);
-          });
-        }
-      ]);
-    });
-  }
-}
-
-class HammerEvent {
-  num angle;
-  num centerX;
-  num centerY;
-  int deltaTime;
-  int deltaX;
-  int deltaY;
-  int direction;
-  int distance;
-  num rotation;
-  num scale;
-  Node target;
-  int timeStamp;
-  String type;
-  num velocity;
-  num velocityX;
-  num velocityY;
-  js.JsObject jsEvent;
-
-  HammerEvent._fromJsEvent(js.JsObject event) {
-    angle = event['angle'];
-    var center = event['center'];
-    centerX = center['x'];
-    centerY = center['y'];
-    deltaTime = event['deltaTime'];
-    deltaX = event['deltaX'];
-    deltaY = event['deltaY'];
-    direction = event['direction'];
-    distance = event['distance'];
-    rotation = event['rotation'];
-    scale = event['scale'];
-    target = event['target'];
-    timeStamp = event['timeStamp'];
-    type = event['type'];
-    velocity = event['velocity'];
-    velocityX = event['velocityX'];
-    velocityY = event['velocityY'];
-    jsEvent = event;
-  }
-}
diff --git a/modules/angular2/src/render/dom/events/hammer_gestures.ts b/modules/angular2/src/render/dom/events/hammer_gestures.ts
deleted file mode 100644
index 39c870d858f2..000000000000
--- a/modules/angular2/src/render/dom/events/hammer_gestures.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/// <reference path="../../../../typings/hammerjs/hammerjs.d.ts"/>
-
-import {HammerGesturesPluginCommon} from './hammer_common';
-import {isPresent, BaseException} from 'angular2/src/facade/lang';
-
-export class HammerGesturesPlugin extends HammerGesturesPluginCommon {
-  constructor() { super(); }
-
-  supports(eventName: string): boolean {
-    if (!super.supports(eventName)) return false;
-
-    if (!isPresent(window['Hammer'])) {
-      throw new BaseException(`Hammer.js is not loaded, can not bind ${eventName} event`);
-    }
-
-    return true;
-  }
-
-  addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
-    if (shouldSupportBubble)
-      throw new BaseException('Hammer.js plugin does not support bubbling gestures.');
-    var zone = this.manager.getZone();
-    eventName = eventName.toLowerCase();
-
-    zone.runOutsideAngular(function() {
-      // Creating the manager bind events, must be done outside of angular
-      var mc = new Hammer(element);
-      mc.get('pinch').set({enable: true});
-      mc.get('rotate').set({enable: true});
-
-      mc.on(eventName, function(eventObj) { zone.run(function() { handler(eventObj); }); });
-    });
-  }
-}
diff --git a/modules/angular2/src/render/dom/events/key_events.ts b/modules/angular2/src/render/dom/events/key_events.ts
deleted file mode 100644
index e1628e7f268a..000000000000
--- a/modules/angular2/src/render/dom/events/key_events.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {
-  isPresent,
-  isBlank,
-  StringWrapper,
-  RegExpWrapper,
-  BaseException,
-  NumberWrapper
-} from 'angular2/src/facade/lang';
-import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {EventManagerPlugin} from './event_manager';
-
-var modifierKeys = ['alt', 'control', 'meta', 'shift'];
-var modifierKeyGetters: StringMap<string, Function> = {
-  'alt': (event) => event.altKey,
-  'control': (event) => event.ctrlKey,
-  'meta': (event) => event.metaKey,
-  'shift': (event) => event.shiftKey
-};
-
-export class KeyEventsPlugin extends EventManagerPlugin {
-  constructor() { super(); }
-
-  supports(eventName: string): boolean {
-    return isPresent(KeyEventsPlugin.parseEventName(eventName));
-  }
-
-  addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
-    var parsedEvent = KeyEventsPlugin.parseEventName(eventName);
-
-    var outsideHandler = KeyEventsPlugin.eventCallback(element, shouldSupportBubble,
-                                                       StringMapWrapper.get(parsedEvent, 'fullKey'),
-                                                       handler, this.manager.getZone());
-
-    this.manager.getZone().runOutsideAngular(() => {
-      DOM.on(element, StringMapWrapper.get(parsedEvent, 'domEventName'), outsideHandler);
-    });
-  }
-
-  static parseEventName(eventName: string): StringMap<string, string> {
-    var parts = eventName.toLowerCase().split('.');
-
-    var domEventName = ListWrapper.removeAt(parts, 0);
-    if ((parts.length === 0) ||
-        !(StringWrapper.equals(domEventName, 'keydown') ||
-          StringWrapper.equals(domEventName, 'keyup'))) {
-      return null;
-    }
-
-    var key = KeyEventsPlugin._normalizeKey(ListWrapper.removeLast(parts));
-
-    var fullKey = '';
-    ListWrapper.forEach(modifierKeys, (modifierName) => {
-      if (ListWrapper.contains(parts, modifierName)) {
-        ListWrapper.remove(parts, modifierName);
-        fullKey += modifierName + '.';
-      }
-    });
-    fullKey += key;
-
-    if (parts.length != 0 || key.length === 0) {
-      // returning null instead of throwing to let another plugin process the event
-      return null;
-    }
-    var result = StringMapWrapper.create();
-    StringMapWrapper.set(result, 'domEventName', domEventName);
-    StringMapWrapper.set(result, 'fullKey', fullKey);
-    return result;
-  }
-
-  static getEventFullKey(event): string {
-    var fullKey = '';
-    var key = DOM.getEventKey(event);
-    key = key.toLowerCase();
-    if (StringWrapper.equals(key, ' ')) {
-      key = 'space';  // for readability
-    } else if (StringWrapper.equals(key, '.')) {
-      key = 'dot';  // because '.' is used as a separator in event names
-    }
-    ListWrapper.forEach(modifierKeys, (modifierName) => {
-      if (modifierName != key) {
-        var modifierGetter = StringMapWrapper.get(modifierKeyGetters, modifierName);
-        if (modifierGetter(event)) {
-          fullKey += modifierName + '.';
-        }
-      }
-    });
-    fullKey += key;
-    return fullKey;
-  }
-
-  static eventCallback(element, shouldSupportBubble, fullKey, handler,
-                       zone): (event: Event) => void {
-    return (event) => {
-      var correctElement = shouldSupportBubble || event.target === element;
-      if (correctElement && StringWrapper.equals(KeyEventsPlugin.getEventFullKey(event), fullKey)) {
-        zone.run(() => handler(event));
-      }
-    };
-  }
-
-  static _normalizeKey(keyName: string): string {
-    // TODO: switch to a StringMap if the mapping grows too much
-    switch (keyName) {
-      case 'esc':
-        return 'escape';
-      default:
-        return keyName;
-    }
-  }
-}
diff --git a/modules/angular2/src/render/dom/shadow_dom/content_tag.ts b/modules/angular2/src/render/dom/shadow_dom/content_tag.ts
deleted file mode 100644
index df2f616d5469..000000000000
--- a/modules/angular2/src/render/dom/shadow_dom/content_tag.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as ldModule from './light_dom';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {isPresent} from 'angular2/src/facade/lang';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-
-class ContentStrategy {
-  nodes: List</*node*/ any>;
-  insert(nodes: List</*node*/ any>) {}
-}
-
-/**
- * An implementation of the content tag that is used by transcluding components.
- * It is used when the content tag is not a direct child of another component,
- * and thus does not affect redistribution.
- */
-class RenderedContent extends ContentStrategy {
-  beginScript: any;
-  endScript;
-
-  constructor(contentEl) {
-    super();
-    this.beginScript = contentEl;
-    this.endScript = DOM.nextSibling(this.beginScript);
-    this.nodes = [];
-  }
-
-  // Inserts the nodes in between the start and end scripts.
-  // Previous content is removed.
-  insert(nodes: List</*node*/ any>) {
-    this.nodes = nodes;
-    DOM.insertAllBefore(this.endScript, nodes);
-    this._removeNodesUntil(ListWrapper.isEmpty(nodes) ? this.endScript : nodes[0]);
-  }
-
-  _removeNodesUntil(node) {
-    var p = DOM.parentElement(this.beginScript);
-    for (var next = DOM.nextSibling(this.beginScript); next !== node;
-         next = DOM.nextSibling(this.beginScript)) {
-      DOM.removeChild(p, next);
-    }
-  }
-}
-
-/**
- * An implementation of the content tag that is used by transcluding components.
- * It is used when the content tag is a direct child of another component,
- * and thus does not get rendered but only affect the distribution of its parent component.
- */
-class IntermediateContent extends ContentStrategy {
-  constructor(public destinationLightDom: ldModule.LightDom) {
-    super();
-    this.nodes = [];
-  }
-
-  insert(nodes: List</*node*/ any>) {
-    this.nodes = nodes;
-    this.destinationLightDom.redistribute();
-  }
-}
-
-
-export class Content {
-  private _strategy: ContentStrategy = null;
-
-  constructor(public contentStartElement, public select: string) {}
-
-  init(destinationLightDom: ldModule.LightDom) {
-    this._strategy = isPresent(destinationLightDom) ? new IntermediateContent(destinationLightDom) :
-                                                      new RenderedContent(this.contentStartElement);
-  }
-
-  nodes(): List</*node*/ any> { return this._strategy.nodes; }
-
-  insert(nodes: List</*node*/ any>) { this._strategy.insert(nodes); }
-}
diff --git a/modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts b/modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts
deleted file mode 100644
index 1fab2275a402..000000000000
--- a/modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import {isBlank, isPresent} from 'angular2/src/facade/lang';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {EmulatedUnscopedShadowDomStrategy} from './emulated_unscoped_shadow_dom_strategy';
-import {
-  getContentAttribute,
-  getHostAttribute,
-  getComponentId,
-  shimCssForComponent,
-  insertStyleElement
-} from './util';
-
-/**
- * This strategy emulates the Shadow DOM for the templates, styles **included**:
- * - components templates are added as children of their component element,
- * - both the template and the styles are modified so that styles are scoped to the component
- *   they belong to,
- * - styles are moved from the templates to the styleHost (i.e. the document head).
- *
- * Notes:
- * - styles are scoped to their component and will apply only to it,
- * - a common subset of shadow DOM selectors are supported,
- * - see `ShadowCss` for more information and limitations.
- */
-export class EmulatedScopedShadowDomStrategy extends EmulatedUnscopedShadowDomStrategy {
-  constructor(styleHost) { super(styleHost); }
-
-  processStyleElement(hostComponentId: string, templateUrl: string, styleEl): void {
-    let cssText = DOM.getText(styleEl);
-    cssText = shimCssForComponent(cssText, hostComponentId);
-    DOM.setText(styleEl, cssText);
-    this._moveToStyleHost(styleEl);
-  }
-
-  _moveToStyleHost(styleEl): void {
-    DOM.remove(styleEl);
-    insertStyleElement(this.styleHost, styleEl);
-  }
-
-  processElement(hostComponentId: string, elementComponentId: string, element): void {
-    // Shim the element as a child of the compiled component
-    if (isPresent(hostComponentId)) {
-      var contentAttribute = getContentAttribute(getComponentId(hostComponentId));
-      DOM.setAttribute(element, contentAttribute, '');
-    }
-    // If the current element is also a component, shim it as a host
-    if (isPresent(elementComponentId)) {
-      var hostAttribute = getHostAttribute(getComponentId(elementComponentId));
-      DOM.setAttribute(element, hostAttribute, '');
-    }
-  }
-}
diff --git a/modules/angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy.ts b/modules/angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy.ts
deleted file mode 100644
index 40c9df5ad357..000000000000
--- a/modules/angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import * as viewModule from '../view/view';
-
-import {LightDom} from './light_dom';
-import {ShadowDomStrategy} from './shadow_dom_strategy';
-import {insertSharedStyleText} from './util';
-
-/**
- * This strategy emulates the Shadow DOM for the templates, styles **excluded**:
- * - components templates are added as children of their component element,
- * - styles are moved from the templates to the styleHost (i.e. the document head).
- *
- * Notes:
- * - styles are **not** scoped to their component and will apply to the whole document,
- * - you can **not** use shadow DOM specific selectors in the styles
- */
-export class EmulatedUnscopedShadowDomStrategy extends ShadowDomStrategy {
-  constructor(public styleHost) { super(); }
-
-  hasNativeContentElement(): boolean { return false; }
-
-  prepareShadowRoot(el): Node { return el; }
-
-  constructLightDom(lightDomView: viewModule.DomView, el): LightDom {
-    return new LightDom(lightDomView, el);
-  }
-
-  processStyleElement(hostComponentId: string, templateUrl: string, styleEl): void {
-    var cssText = DOM.getText(styleEl);
-    insertSharedStyleText(cssText, this.styleHost, styleEl);
-  }
-}
diff --git a/modules/angular2/src/render/dom/shadow_dom/light_dom.ts b/modules/angular2/src/render/dom/shadow_dom/light_dom.ts
deleted file mode 100644
index 8074b69a4577..000000000000
--- a/modules/angular2/src/render/dom/shadow_dom/light_dom.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {isBlank, isPresent} from 'angular2/src/facade/lang';
-
-import * as viewModule from '../view/view';
-import * as elModule from '../view/element';
-import {Content} from './content_tag';
-
-export class DestinationLightDom {}
-
-class _Root {
-  constructor(public node, public boundElement: elModule.DomElement) {}
-}
-
-// TODO: LightDom should implement DestinationLightDom
-// once interfaces are supported
-export class LightDom {
-  // The light DOM of the element is enclosed inside the lightDomView
-  lightDomView: viewModule.DomView;
-  // The shadow DOM
-  shadowDomView: viewModule.DomView = null;
-  // The nodes of the light DOM
-  nodes: List</*node*/ any>;
-  private _roots: List<_Root> = null;
-
-  constructor(lightDomView: viewModule.DomView, element) {
-    this.lightDomView = lightDomView;
-    this.nodes = DOM.childNodesAsList(element);
-  }
-
-  attachShadowDomView(shadowDomView: viewModule.DomView) { this.shadowDomView = shadowDomView; }
-
-  detachShadowDomView() { this.shadowDomView = null; }
-
-  redistribute() { redistributeNodes(this.contentTags(), this.expandedDomNodes()); }
-
-  contentTags(): List<Content> {
-    if (isPresent(this.shadowDomView)) {
-      return this._collectAllContentTags(this.shadowDomView, []);
-    } else {
-      return [];
-    }
-  }
-
-  // Collects the Content directives from the view and all its child views
-  private _collectAllContentTags(view: viewModule.DomView, acc: List<Content>): List<Content> {
-    // Note: exiting early here is important as we call this function for every view
-    // that is added, so we have O(n^2) runtime.
-    // TODO(tbosch): fix the root problem, see
-    // https://github.com/angular/angular/issues/2298
-    if (view.proto.transitiveContentTagCount === 0) {
-      return acc;
-    }
-    var els = view.boundElements;
-    for (var i = 0; i < els.length; i++) {
-      var el = els[i];
-      if (isPresent(el.contentTag)) {
-        acc.push(el.contentTag);
-      }
-      if (isPresent(el.viewContainer)) {
-        ListWrapper.forEach(el.viewContainer.contentTagContainers(),
-                            (view) => { this._collectAllContentTags(view, acc); });
-      }
-    }
-    return acc;
-  }
-
-  // Collects the nodes of the light DOM by merging:
-  // - nodes from enclosed ViewContainers,
-  // - nodes from enclosed content tags,
-  // - plain DOM nodes
-  expandedDomNodes(): List</*node*/ any> {
-    var res = [];
-
-    var roots = this._findRoots();
-    for (var i = 0; i < roots.length; ++i) {
-      var root = roots[i];
-      if (isPresent(root.boundElement)) {
-        var vc = root.boundElement.viewContainer;
-        var content = root.boundElement.contentTag;
-        if (isPresent(vc)) {
-          res = ListWrapper.concat(res, vc.nodes());
-        } else if (isPresent(content)) {
-          res = ListWrapper.concat(res, content.nodes());
-        } else {
-          res.push(root.node);
-        }
-      } else {
-        res.push(root.node);
-      }
-    }
-    return res;
-  }
-
-  // Returns a list of Roots for all the nodes of the light DOM.
-  // The Root object contains the DOM node and its corresponding boundElement
-  private _findRoots() {
-    if (isPresent(this._roots)) return this._roots;
-
-    var boundElements = this.lightDomView.boundElements;
-
-    this._roots = ListWrapper.map(this.nodes, (n) => {
-      var boundElement = null;
-      for (var i = 0; i < boundElements.length; i++) {
-        var boundEl = boundElements[i];
-        if (isPresent(boundEl) && boundEl.element === n) {
-          boundElement = boundEl;
-          break;
-        }
-      }
-      return new _Root(n, boundElement);
-    });
-
-    return this._roots;
-  }
-}
-
-// Projects the light DOM into the shadow DOM
-function redistributeNodes(contents: List<Content>, nodes: List</*node*/ any>) {
-  for (var i = 0; i < contents.length; ++i) {
-    var content = contents[i];
-    var select = content.select;
-
-    // Empty selector is identical to <content/>
-    if (select.length === 0) {
-      content.insert(ListWrapper.clone(nodes));
-      ListWrapper.clear(nodes);
-    } else {
-      var matchSelector = (n) => DOM.elementMatches(n, select);
-      var matchingNodes = ListWrapper.filter(nodes, matchSelector);
-      content.insert(matchingNodes);
-      ListWrapper.removeAll(nodes, matchingNodes);
-    }
-  }
-  for (var i = 0; i < nodes.length; i++) {
-    var node = nodes[i];
-    if (isPresent(node.parentNode)) {
-      DOM.remove(nodes[i]);
-    }
-  }
-}
diff --git a/modules/angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy.ts b/modules/angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy.ts
deleted file mode 100644
index 22b955e47a58..000000000000
--- a/modules/angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {ShadowDomStrategy} from './shadow_dom_strategy';
-
-/**
- * This strategies uses the native Shadow DOM support.
- *
- * The templates for the component are inserted in a Shadow Root created on the component element.
- * Hence they are strictly isolated.
- */
-@Injectable()
-export class NativeShadowDomStrategy extends ShadowDomStrategy {
-  prepareShadowRoot(el): Node { return DOM.createShadowRoot(el); }
-}
diff --git a/modules/angular2/src/render/dom/shadow_dom/shadow_css.ts b/modules/angular2/src/render/dom/shadow_dom/shadow_css.ts
deleted file mode 100644
index 68ea0d20be69..000000000000
--- a/modules/angular2/src/render/dom/shadow_dom/shadow_css.ts
+++ /dev/null
@@ -1,529 +0,0 @@
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {
-  StringWrapper,
-  RegExp,
-  RegExpWrapper,
-  RegExpMatcherWrapper,
-  isPresent,
-  isBlank,
-  BaseException
-} from 'angular2/src/facade/lang';
-
-/**
- * This file is a port of shadowCSS from webcomponents.js to TypeScript.
- *
- * Please make sure to keep to edits in sync with the source file.
- *
- * Source:
- * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
- *
- * The original file level comment is reproduced below
- */
-
-/*
-  This is a limited shim for ShadowDOM css styling.
-  https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#styles
-
-  The intention here is to support only the styling features which can be
-  relatively simply implemented. The goal is to allow users to avoid the
-  most obvious pitfalls and do so without compromising performance significantly.
-  For ShadowDOM styling that's not covered here, a set of best practices
-  can be provided that should allow users to accomplish more complex styling.
-
-  The following is a list of specific ShadowDOM styling features and a brief
-  discussion of the approach used to shim.
-
-  Shimmed features:
-
-  * :host, :host-context: ShadowDOM allows styling of the shadowRoot's host
-  element using the :host rule. To shim this feature, the :host styles are
-  reformatted and prefixed with a given scope name and promoted to a
-  document level stylesheet.
-  For example, given a scope name of .foo, a rule like this:
-
-    :host {
-        background: red;
-      }
-    }
-
-  becomes:
-
-    .foo {
-      background: red;
-    }
-
-  * encapsultion: Styles defined within ShadowDOM, apply only to
-  dom inside the ShadowDOM. Polymer uses one of two techniques to imlement
-  this feature.
-
-  By default, rules are prefixed with the host element tag name
-  as a descendant selector. This ensures styling does not leak out of the 'top'
-  of the element's ShadowDOM. For example,
-
-  div {
-      font-weight: bold;
-    }
-
-  becomes:
-
-  x-foo div {
-      font-weight: bold;
-    }
-
-  becomes:
-
-
-  Alternatively, if WebComponents.ShadowCSS.strictStyling is set to true then
-  selectors are scoped by adding an attribute selector suffix to each
-  simple selector that contains the host element tag name. Each element
-  in the element's ShadowDOM template is also given the scope attribute.
-  Thus, these rules match only elements that have the scope attribute.
-  For example, given a scope name of x-foo, a rule like this:
-
-    div {
-      font-weight: bold;
-    }
-
-  becomes:
-
-    div[x-foo] {
-      font-weight: bold;
-    }
-
-  Note that elements that are dynamically added to a scope must have the scope
-  selector added to them manually.
-
-  * upper/lower bound encapsulation: Styles which are defined outside a
-  shadowRoot should not cross the ShadowDOM boundary and should not apply
-  inside a shadowRoot.
-
-  This styling behavior is not emulated. Some possible ways to do this that
-  were rejected due to complexity and/or performance concerns include: (1) reset
-  every possible property for every possible selector for a given scope name;
-  (2) re-implement css in javascript.
-
-  As an alternative, users should make sure to use selectors
-  specific to the scope in which they are working.
-
-  * ::distributed: This behavior is not emulated. It's often not necessary
-  to style the contents of a specific insertion point and instead, descendants
-  of the host element can be styled selectively. Users can also create an
-  extra node around an insertion point and style that node's contents
-  via descendent selectors. For example, with a shadowRoot like this:
-
-    <style>
-      ::content(div) {
-        background: red;
-      }
-    </style>
-    <content></content>
-
-  could become:
-
-    <style>
-      / *@polyfill .content-container div * /
-      ::content(div) {
-        background: red;
-      }
-    </style>
-    <div class="content-container">
-      <content></content>
-    </div>
-
-  Note the use of @polyfill in the comment above a ShadowDOM specific style
-  declaration. This is a directive to the styling shim to use the selector
-  in comments in lieu of the next selector when running under polyfill.
-*/
-
-export class ShadowCss {
-  strictStyling: boolean = true;
-
-  constructor() {}
-
-  /*
-  * Shim a style element with the given selector. Returns cssText that can
-  * be included in the document via WebComponents.ShadowCSS.addCssToDocument(css).
-  */
-  shimStyle(style, selector: string, hostSelector: string = ''): string {
-    var cssText = DOM.getText(style);
-    return this.shimCssText(cssText, selector, hostSelector);
-  }
-
-  /*
-  * Shim some cssText with the given selector. Returns cssText that can
-  * be included in the document via WebComponents.ShadowCSS.addCssToDocument(css).
-  *
-  * When strictStyling is true:
-  * - selector is the attribute added to all elements inside the host,
-  * - hostSelector is the attribute added to the host itself.
-  */
-  shimCssText(cssText: string, selector: string, hostSelector: string = ''): string {
-    cssText = this._insertDirectives(cssText);
-    return this._scopeCssText(cssText, selector, hostSelector);
-  }
-
-  _insertDirectives(cssText: string): string {
-    cssText = this._insertPolyfillDirectivesInCssText(cssText);
-    return this._insertPolyfillRulesInCssText(cssText);
-  }
-
-  /*
-   * Process styles to convert native ShadowDOM rules that will trip
-   * up the css parser; we rely on decorating the stylesheet with inert rules.
-   *
-   * For example, we convert this rule:
-   *
-   * polyfill-next-selector { content: ':host menu-item'; }
-   * ::content menu-item {
-   *
-   * to this:
-   *
-   * scopeName menu-item {
-   *
-  **/
-  _insertPolyfillDirectivesInCssText(cssText: string): string {
-    // Difference with webcomponents.js: does not handle comments
-    return StringWrapper.replaceAllMapped(cssText, _cssContentNextSelectorRe,
-                                          function(m) { return m[1] + '{'; });
-  }
-
-  /*
-   * Process styles to add rules which will only apply under the polyfill
-   *
-   * For example, we convert this rule:
-   *
-   * polyfill-rule {
-   *   content: ':host menu-item';
-   * ...
-   * }
-   *
-   * to this:
-   *
-   * scopeName menu-item {...}
-   *
-  **/
-  _insertPolyfillRulesInCssText(cssText: string): string {
-    // Difference with webcomponents.js: does not handle comments
-    return StringWrapper.replaceAllMapped(cssText, _cssContentRuleRe, function(m) {
-      var rule = m[0];
-      rule = StringWrapper.replace(rule, m[1], '');
-      rule = StringWrapper.replace(rule, m[2], '');
-      return m[3] + rule;
-    });
-  }
-
-  /* Ensure styles are scoped. Pseudo-scoping takes a rule like:
-   *
-   *  .foo {... }
-   *
-   *  and converts this to
-   *
-   *  scopeName .foo { ... }
-  */
-  _scopeCssText(cssText: string, scopeSelector: string, hostSelector: string): string {
-    var unscoped = this._extractUnscopedRulesFromCssText(cssText);
-    cssText = this._insertPolyfillHostInCssText(cssText);
-    cssText = this._convertColonHost(cssText);
-    cssText = this._convertColonHostContext(cssText);
-    cssText = this._convertShadowDOMSelectors(cssText);
-    if (isPresent(scopeSelector)) {
-      _withCssRules(cssText,
-                    (rules) => { cssText = this._scopeRules(rules, scopeSelector, hostSelector); });
-    }
-    cssText = cssText + '\n' + unscoped;
-    return cssText.trim();
-  }
-
-  /*
-   * Process styles to add rules which will only apply under the polyfill
-   * and do not process via CSSOM. (CSSOM is destructive to rules on rare
-   * occasions, e.g. -webkit-calc on Safari.)
-   * For example, we convert this rule:
-   *
-   * @polyfill-unscoped-rule {
-   *   content: 'menu-item';
-   * ... }
-   *
-   * to this:
-   *
-   * menu-item {...}
-   *
-  **/
-  _extractUnscopedRulesFromCssText(cssText: string): string {
-    // Difference with webcomponents.js: does not handle comments
-    var r = '', m;
-    var matcher = RegExpWrapper.matcher(_cssContentUnscopedRuleRe, cssText);
-    while (isPresent(m = RegExpMatcherWrapper.next(matcher))) {
-      var rule = m[0];
-      rule = StringWrapper.replace(rule, m[2], '');
-      rule = StringWrapper.replace(rule, m[1], m[3]);
-      r = rule + '\n\n';
-    }
-    return r;
-  }
-
-  /*
-   * convert a rule like :host(.foo) > .bar { }
-   *
-   * to
-   *
-   * scopeName.foo > .bar
-  */
-  _convertColonHost(cssText: string): string {
-    return this._convertColonRule(cssText, _cssColonHostRe, this._colonHostPartReplacer);
-  }
-
-  /*
-   * convert a rule like :host-context(.foo) > .bar { }
-   *
-   * to
-   *
-   * scopeName.foo > .bar, .foo scopeName > .bar { }
-   *
-   * and
-   *
-   * :host-context(.foo:host) .bar { ... }
-   *
-   * to
-   *
-   * scopeName.foo .bar { ... }
-  */
-  _convertColonHostContext(cssText: string): string {
-    return this._convertColonRule(cssText, _cssColonHostContextRe,
-                                  this._colonHostContextPartReplacer);
-  }
-
-  _convertColonRule(cssText: string, regExp: RegExp, partReplacer: Function): string {
-    // p1 = :host, p2 = contents of (), p3 rest of rule
-    return StringWrapper.replaceAllMapped(cssText, regExp, function(m) {
-      if (isPresent(m[2])) {
-        var parts = m[2].split(','), r = [];
-        for (var i = 0; i < parts.length; i++) {
-          var p = parts[i];
-          if (isBlank(p)) break;
-          p = p.trim();
-          r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
-        }
-        return r.join(',');
-      } else {
-        return _polyfillHostNoCombinator + m[3];
-      }
-    });
-  }
-
-  _colonHostContextPartReplacer(host: string, part: string, suffix: string): string {
-    if (StringWrapper.contains(part, _polyfillHost)) {
-      return this._colonHostPartReplacer(host, part, suffix);
-    } else {
-      return host + part + suffix + ', ' + part + ' ' + host + suffix;
-    }
-  }
-
-  _colonHostPartReplacer(host: string, part: string, suffix: string): string {
-    return host + StringWrapper.replace(part, _polyfillHost, '') + suffix;
-  }
-
-  /*
-   * Convert combinators like ::shadow and pseudo-elements like ::content
-   * by replacing with space.
-  */
-  _convertShadowDOMSelectors(cssText: string): string {
-    for (var i = 0; i < _shadowDOMSelectorsRe.length; i++) {
-      cssText = StringWrapper.replaceAll(cssText, _shadowDOMSelectorsRe[i], ' ');
-    }
-    return cssText;
-  }
-
-  // change a selector like 'div' to 'name div'
-  _scopeRules(cssRules, scopeSelector: string, hostSelector: string): string {
-    var cssText = '';
-    if (isPresent(cssRules)) {
-      for (var i = 0; i < cssRules.length; i++) {
-        var rule = cssRules[i];
-        if (DOM.isStyleRule(rule) || DOM.isPageRule(rule)) {
-          cssText += this._scopeSelector(rule.selectorText, scopeSelector, hostSelector,
-                                         this.strictStyling) +
-                     ' {\n';
-          cssText += this._propertiesFromRule(rule) + '\n}\n\n';
-        } else if (DOM.isMediaRule(rule)) {
-          cssText += '@media ' + rule.media.mediaText + ' {\n';
-          cssText += this._scopeRules(rule.cssRules, scopeSelector, hostSelector);
-          cssText += '\n}\n\n';
-        } else {
-          // KEYFRAMES_RULE in IE throws when we query cssText
-          // when it contains a -webkit- property.
-          // if this happens, we fallback to constructing the rule
-          // from the CSSRuleSet
-          // https://connect.microsoft.com/IE/feedbackdetail/view/955703/accessing-csstext-of-a-keyframe-rule-that-contains-a-webkit-property-via-cssom-generates-exception
-          try {
-            if (isPresent(rule.cssText)) {
-              cssText += rule.cssText + '\n\n';
-            }
-          } catch (x) {
-            if (DOM.isKeyframesRule(rule) && isPresent(rule.cssRules)) {
-              cssText += this._ieSafeCssTextFromKeyFrameRule(rule);
-            }
-          }
-        }
-      }
-    }
-    return cssText;
-  }
-
-  _ieSafeCssTextFromKeyFrameRule(rule): string {
-    var cssText = '@keyframes ' + rule.name + ' {';
-    for (var i = 0; i < rule.cssRules.length; i++) {
-      var r = rule.cssRules[i];
-      cssText += ' ' + r.keyText + ' {' + r.style.cssText + '}';
-    }
-    cssText += ' }';
-    return cssText;
-  }
-
-  _scopeSelector(selector: string, scopeSelector: string, hostSelector: string,
-                 strict: boolean): string {
-    var r = [], parts = selector.split(',');
-    for (var i = 0; i < parts.length; i++) {
-      var p = parts[i];
-      p = p.trim();
-      if (this._selectorNeedsScoping(p, scopeSelector)) {
-        p = strict && !StringWrapper.contains(p, _polyfillHostNoCombinator) ?
-                this._applyStrictSelectorScope(p, scopeSelector) :
-                this._applySelectorScope(p, scopeSelector, hostSelector);
-      }
-      r.push(p);
-    }
-    return r.join(', ');
-  }
-
-  _selectorNeedsScoping(selector: string, scopeSelector: string): boolean {
-    var re = this._makeScopeMatcher(scopeSelector);
-    return !isPresent(RegExpWrapper.firstMatch(re, selector));
-  }
-
-  _makeScopeMatcher(scopeSelector: string): RegExp {
-    var lre = RegExpWrapper.create('\\[');
-    var rre = RegExpWrapper.create('\\]');
-    scopeSelector = StringWrapper.replaceAll(scopeSelector, lre, '\\[');
-    scopeSelector = StringWrapper.replaceAll(scopeSelector, rre, '\\]');
-    return RegExpWrapper.create('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
-  }
-
-  _applySelectorScope(selector: string, scopeSelector: string, hostSelector: string): string {
-    // Difference from webcomponentsjs: scopeSelector could not be an array
-    return this._applySimpleSelectorScope(selector, scopeSelector, hostSelector);
-  }
-
-  // scope via name and [is=name]
-  _applySimpleSelectorScope(selector: string, scopeSelector: string, hostSelector: string): string {
-    if (isPresent(RegExpWrapper.firstMatch(_polyfillHostRe, selector))) {
-      var replaceBy = this.strictStyling ? `[${hostSelector}]` : scopeSelector;
-      selector = StringWrapper.replace(selector, _polyfillHostNoCombinator, replaceBy);
-      return StringWrapper.replaceAll(selector, _polyfillHostRe, replaceBy + ' ');
-    } else {
-      return scopeSelector + ' ' + selector;
-    }
-  }
-
-  // return a selector with [name] suffix on each simple selector
-  // e.g. .foo.bar > .zot becomes .foo[name].bar[name] > .zot[name]
-  _applyStrictSelectorScope(selector: string, scopeSelector: string): string {
-    var isRe = RegExpWrapper.create('\\[is=([^\\]]*)\\]');
-    scopeSelector = StringWrapper.replaceAllMapped(scopeSelector, isRe, (m) => m[1]);
-    var splits = [' ', '>', '+', '~'], scoped = selector, attrName = '[' + scopeSelector + ']';
-    for (var i = 0; i < splits.length; i++) {
-      var sep = splits[i];
-      var parts = scoped.split(sep);
-      scoped = ListWrapper.map(parts, function(p) {
-                            // remove :host since it should be unnecessary
-                            var t = StringWrapper.replaceAll(p.trim(), _polyfillHostRe, '');
-                            if (t.length > 0 && !ListWrapper.contains(splits, t) &&
-                                !StringWrapper.contains(t, attrName)) {
-                              var re = RegExpWrapper.create('([^:]*)(:*)(.*)');
-                              var m = RegExpWrapper.firstMatch(re, t);
-                              if (isPresent(m)) {
-                                p = m[1] + attrName + m[2] + m[3];
-                              }
-                            }
-                            return p;
-                          }).join(sep);
-    }
-    return scoped;
-  }
-
-  _insertPolyfillHostInCssText(selector: string): string {
-    selector = StringWrapper.replaceAll(selector, _colonHostContextRe, _polyfillHostContext);
-    selector = StringWrapper.replaceAll(selector, _colonHostRe, _polyfillHost);
-    return selector;
-  }
-
-  _propertiesFromRule(rule): string {
-    var cssText = rule.style.cssText;
-    // TODO(sorvell): Safari cssom incorrectly removes quotes from the content
-    // property. (https://bugs.webkit.org/show_bug.cgi?id=118045)
-    // don't replace attr rules
-    var attrRe = RegExpWrapper.create('[\'"]+|attr');
-    if (rule.style.content.length > 0 &&
-        !isPresent(RegExpWrapper.firstMatch(attrRe, rule.style.content))) {
-      var contentRe = RegExpWrapper.create('content:[^;]*;');
-      cssText =
-          StringWrapper.replaceAll(cssText, contentRe, 'content: \'' + rule.style.content + '\';');
-    }
-    // TODO(sorvell): we can workaround this issue here, but we need a list
-    // of troublesome properties to fix https://github.com/Polymer/platform/issues/53
-    //
-    // inherit rules can be omitted from cssText
-    // TODO(sorvell): remove when Blink bug is fixed:
-    // https://code.google.com/p/chromium/issues/detail?id=358273
-    // var style = rule.style;
-    // for (var i = 0; i < style.length; i++) {
-    //  var name = style.item(i);
-    //  var value = style.getPropertyValue(name);
-    //  if (value == 'initial') {
-    //    cssText += name + ': initial; ';
-    //  }
-    //}
-    return cssText;
-  }
-}
-
-var _cssContentNextSelectorRe = RegExpWrapper.create(
-    'polyfill-next-selector[^}]*content:[\\s]*?[\'"](.*?)[\'"][;\\s]*}([^{]*?){', 'im');
-var _cssContentRuleRe =
-    RegExpWrapper.create('(polyfill-rule)[^}]*(content:[\\s]*[\'"](.*?)[\'"])[;\\s]*[^}]*}', 'im');
-var _cssContentUnscopedRuleRe = RegExpWrapper.create(
-    '(polyfill-unscoped-rule)[^}]*(content:[\\s]*[\'"](.*?)[\'"])[;\\s]*[^}]*}', 'im');
-var _polyfillHost = '-shadowcsshost';
-// note: :host-context pre-processed to -shadowcsshostcontext.
-var _polyfillHostContext = '-shadowcsscontext';
-var _parenSuffix = ')(?:\\((' +
-                   '(?:\\([^)(]*\\)|[^)(]*)+?' +
-                   ')\\))?([^,{]*)';
-var _cssColonHostRe = RegExpWrapper.create('(' + _polyfillHost + _parenSuffix, 'im');
-var _cssColonHostContextRe = RegExpWrapper.create('(' + _polyfillHostContext + _parenSuffix, 'im');
-var _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
-var _shadowDOMSelectorsRe = [
-  RegExpWrapper.create('>>>'),
-  RegExpWrapper.create('::shadow'),
-  RegExpWrapper.create('::content'),
-  // Deprecated selectors
-  RegExpWrapper.create('/deep/'),         // former >>>
-  RegExpWrapper.create('/shadow-deep/'),  // former /deep/
-  RegExpWrapper.create('/shadow/'),       // former ::shadow
-];
-var _selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$';
-var _polyfillHostRe = RegExpWrapper.create(_polyfillHost, 'im');
-var _colonHostRe = RegExpWrapper.create(':host', 'im');
-var _colonHostContextRe = RegExpWrapper.create(':host-context', 'im');
-
-function _cssToRules(cssText: string) {
-  return DOM.cssToRules(cssText);
-}
-
-function _withCssRules(cssText: string, callback: Function) {
-  // Difference from webcomponentjs: remove the workaround for an old bug in Chrome
-  if (isBlank(callback)) return;
-  var rules = _cssToRules(cssText);
-  callback(rules);
-}
diff --git a/modules/angular2/src/render/dom/shadow_dom/shadow_dom_compile_step.ts b/modules/angular2/src/render/dom/shadow_dom/shadow_dom_compile_step.ts
deleted file mode 100644
index 3f439eca690e..000000000000
--- a/modules/angular2/src/render/dom/shadow_dom/shadow_dom_compile_step.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {isBlank, isPresent, assertionsEnabled, isPromise} from 'angular2/src/facade/lang';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {CompileStep} from '../compiler/compile_step';
-import {CompileElement} from '../compiler/compile_element';
-import {CompileControl} from '../compiler/compile_control';
-import {ViewDefinition} from '../../api';
-import {ShadowDomStrategy} from './shadow_dom_strategy';
-
-export class ShadowDomCompileStep implements CompileStep {
-  constructor(public _shadowDomStrategy: ShadowDomStrategy, public _view: ViewDefinition) {}
-
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    var tagName = DOM.tagName(current.element).toUpperCase();
-    if (tagName == 'STYLE') {
-      this._processStyleElement(current, control);
-    } else if (tagName == 'CONTENT') {
-      this._processContentElement(current);
-    } else {
-      var componentId = current.isBound() ? current.inheritedElementBinder.componentId : null;
-      this._shadowDomStrategy.processElement(this._view.componentId, componentId, current.element);
-    }
-  }
-
-  _processStyleElement(current: CompileElement, control: CompileControl) {
-    this._shadowDomStrategy.processStyleElement(this._view.componentId, this._view.templateAbsUrl,
-                                                current.element);
-
-    // Style elements should not be further processed by the compiler, as they can not contain
-    // bindings. Skipping further compiler steps allow speeding up the compilation process.
-    control.ignoreCurrentElement();
-  }
-
-  _processContentElement(current: CompileElement) {
-    if (this._shadowDomStrategy.hasNativeContentElement()) {
-      return;
-    }
-    var attrs = current.attrs();
-    var selector = attrs.get('select');
-    selector = isPresent(selector) ? selector : '';
-
-    var contentStart = DOM.createScriptTag('type', 'ng/contentStart');
-    if (assertionsEnabled()) {
-      DOM.setAttribute(contentStart, 'select', selector);
-    }
-    var contentEnd = DOM.createScriptTag('type', 'ng/contentEnd');
-    DOM.insertBefore(current.element, contentStart);
-    DOM.insertBefore(current.element, contentEnd);
-    DOM.remove(current.element);
-
-    current.element = contentStart;
-    current.bindElement().setContentTagSelector(selector);
-  }
-}
diff --git a/modules/angular2/src/render/dom/shadow_dom/shadow_dom_strategy.ts b/modules/angular2/src/render/dom/shadow_dom/shadow_dom_strategy.ts
deleted file mode 100644
index cdfdf9135217..000000000000
--- a/modules/angular2/src/render/dom/shadow_dom/shadow_dom_strategy.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {isBlank, isPresent} from 'angular2/src/facade/lang';
-
-import * as viewModule from '../view/view';
-import {LightDom} from './light_dom';
-
-export class ShadowDomStrategy {
-  // Whether the strategy understands the native <content> tag
-  hasNativeContentElement(): boolean { return true; }
-
-  // Prepares and returns the (emulated) shadow root for the given element.
-  prepareShadowRoot(el): any { return null; }
-
-  constructLightDom(lightDomView: viewModule.DomView, el): LightDom { return null; }
-
-  // An optional step that can modify the template style elements.
-  processStyleElement(hostComponentId: string, templateUrl: string, styleElement): void {}
-
-  // An optional step that can modify the template elements (style elements exlcuded).
-  processElement(hostComponentId: string, elementComponentId: string, element): void {}
-}
diff --git a/modules/angular2/src/render/dom/shadow_dom/util.ts b/modules/angular2/src/render/dom/shadow_dom/util.ts
deleted file mode 100644
index 98a18f6820fd..000000000000
--- a/modules/angular2/src/render/dom/shadow_dom/util.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {isBlank, isPresent} from 'angular2/src/facade/lang';
-import {MapWrapper, Map} from 'angular2/src/facade/collection';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {ShadowCss} from './shadow_css';
-
-var _componentUIDs: Map<string, int> = new Map();
-var _nextComponentUID: int = 0;
-var _sharedStyleTexts: Map<string, boolean> = new Map();
-var _lastInsertedStyleEl;
-
-export function getComponentId(componentStringId: string): number {
-  var id = _componentUIDs.get(componentStringId);
-  if (isBlank(id)) {
-    id = _nextComponentUID++;
-    _componentUIDs.set(componentStringId, id);
-  }
-  return id;
-}
-
-export function insertSharedStyleText(cssText, styleHost, styleEl) {
-  if (!_sharedStyleTexts.has(cssText)) {
-    // Styles are unscoped and shared across components, only append them to the head
-    // when there are not present yet
-    _sharedStyleTexts.set(cssText, true);
-    insertStyleElement(styleHost, styleEl);
-  }
-}
-
-export function insertStyleElement(host, styleEl) {
-  if (isBlank(_lastInsertedStyleEl)) {
-    var firstChild = DOM.firstChild(host);
-    if (isPresent(firstChild)) {
-      DOM.insertBefore(firstChild, styleEl);
-    } else {
-      DOM.appendChild(host, styleEl);
-    }
-  } else {
-    DOM.insertAfter(_lastInsertedStyleEl, styleEl);
-  }
-  _lastInsertedStyleEl = styleEl;
-}
-
-// Return the attribute to be added to the component
-export function getHostAttribute(id: int): string {
-  return `_nghost-${id}`;
-}
-
-// Returns the attribute to be added on every single element nodes in the component
-export function getContentAttribute(id: int): string {
-  return `_ngcontent-${id}`;
-}
-
-export function shimCssForComponent(cssText: string, componentId: string): string {
-  var id = getComponentId(componentId);
-  var shadowCss = new ShadowCss();
-  return shadowCss.shimCssText(cssText, getContentAttribute(id), getHostAttribute(id));
-}
-
-// Reset the caches - used for tests only
-export function resetShadowDomCache() {
-  _componentUIDs.clear();
-  _nextComponentUID = 0;
-  _sharedStyleTexts.clear();
-  _lastInsertedStyleEl = null;
-}
diff --git a/modules/angular2/src/render/dom/util.ts b/modules/angular2/src/render/dom/util.ts
deleted file mode 100644
index 2676d53eb46b..000000000000
--- a/modules/angular2/src/render/dom/util.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {StringWrapper, RegExpWrapper, isPresent} from 'angular2/src/facade/lang';
-
-export const NG_BINDING_CLASS_SELECTOR = '.ng-binding';
-export const NG_BINDING_CLASS = 'ng-binding';
-
-export const EVENT_TARGET_SEPARATOR = ':';
-
-var CAMEL_CASE_REGEXP = RegExpWrapper.create('([A-Z])');
-var DASH_CASE_REGEXP = RegExpWrapper.create('-([a-z])');
-
-export function camelCaseToDashCase(input: string): string {
-  return StringWrapper.replaceAllMapped(input, CAMEL_CASE_REGEXP,
-                                        (m) => { return '-' + m[1].toLowerCase(); });
-}
-
-export function dashCaseToCamelCase(input: string): string {
-  return StringWrapper.replaceAllMapped(input, DASH_CASE_REGEXP,
-                                        (m) => { return m[1].toUpperCase(); });
-}
diff --git a/modules/angular2/src/render/dom/view/element.ts b/modules/angular2/src/render/dom/view/element.ts
deleted file mode 100644
index dd237a3c5eef..000000000000
--- a/modules/angular2/src/render/dom/view/element.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {ElementBinder} from './element_binder';
-import {DomViewContainer} from './view_container';
-import {LightDom} from '../shadow_dom/light_dom';
-import {Content} from '../shadow_dom/content_tag';
-
-export class DomElement {
-  viewContainer: DomViewContainer;
-  lightDom: LightDom;
-  constructor(public proto: ElementBinder, public element: any /* element */,
-              public contentTag: Content) {}
-}
diff --git a/modules/angular2/src/render/dom/view/element_binder.ts b/modules/angular2/src/render/dom/view/element_binder.ts
deleted file mode 100644
index ba0df970fe17..000000000000
--- a/modules/angular2/src/render/dom/view/element_binder.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import {AST} from 'angular2/change_detection';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import * as protoViewModule from './proto_view';
-
-export class ElementBinder {
-  contentTagSelector: string;
-  textNodeIndices: List<number>;
-  nestedProtoView: protoViewModule.DomProtoView;
-  eventLocals: AST;
-  localEvents: List<Event>;
-  globalEvents: List<Event>;
-  componentId: string;
-  parentIndex: number;
-  distanceToParent: number;
-  elementIsEmpty: boolean;
-
-  constructor({textNodeIndices, contentTagSelector, nestedProtoView, componentId, eventLocals,
-               localEvents, globalEvents, parentIndex, distanceToParent, elementIsEmpty}: {
-    contentTagSelector?: string,
-    textNodeIndices?: List<number>,
-    nestedProtoView?: protoViewModule.DomProtoView,
-    eventLocals?: AST,
-    localEvents?: List<Event>,
-    globalEvents?: List<Event>,
-    componentId?: string,
-    parentIndex?: number,
-    distanceToParent?: number,
-    elementIsEmpty?: boolean
-  } = {}) {
-    this.textNodeIndices = textNodeIndices;
-    this.contentTagSelector = contentTagSelector;
-    this.nestedProtoView = nestedProtoView;
-    this.componentId = componentId;
-    this.eventLocals = eventLocals;
-    this.localEvents = localEvents;
-    this.globalEvents = globalEvents;
-    this.parentIndex = parentIndex;
-    this.distanceToParent = distanceToParent;
-    this.elementIsEmpty = elementIsEmpty;
-  }
-}
-
-export class Event {
-  constructor(public name: string, public target: string, public fullName: string) {}
-}
-
-export class HostAction {
-  constructor(public actionName: string, public actionExpression: string, public expression: AST) {}
-}
diff --git a/modules/angular2/src/render/dom/view/proto_view.ts b/modules/angular2/src/render/dom/view/proto_view.ts
deleted file mode 100644
index ae1a338426b9..000000000000
--- a/modules/angular2/src/render/dom/view/proto_view.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {isPresent} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-
-import {ElementBinder} from './element_binder';
-import {NG_BINDING_CLASS} from '../util';
-
-import {RenderProtoViewRef} from '../../api';
-
-export function resolveInternalDomProtoView(protoViewRef: RenderProtoViewRef): DomProtoView {
-  return (<DomProtoViewRef>protoViewRef)._protoView;
-}
-
-export class DomProtoViewRef extends RenderProtoViewRef {
-  constructor(public _protoView: DomProtoView) { super(); }
-}
-
-export class DomProtoView {
-  element;
-  elementBinders: List<ElementBinder>;
-  isTemplateElement: boolean;
-  rootBindingOffset: number;
-  // the number of content tags seen in this or any child proto view.
-  transitiveContentTagCount: number;
-  boundTextNodeCount: number;
-  rootNodeCount: number;
-
-  constructor({elementBinders, element, transitiveContentTagCount, boundTextNodeCount}) {
-    this.element = element;
-    this.elementBinders = elementBinders;
-    this.transitiveContentTagCount = transitiveContentTagCount;
-    this.isTemplateElement = DOM.isTemplateElement(this.element);
-    this.rootBindingOffset =
-        (isPresent(this.element) && DOM.hasClass(this.element, NG_BINDING_CLASS)) ? 1 : 0;
-    this.boundTextNodeCount = boundTextNodeCount;
-    this.rootNodeCount =
-        this.isTemplateElement ? DOM.childNodes(DOM.content(this.element)).length : 1;
-  }
-}
diff --git a/modules/angular2/src/render/dom/view/proto_view_builder.ts b/modules/angular2/src/render/dom/view/proto_view_builder.ts
deleted file mode 100644
index 04cc4d49123d..000000000000
--- a/modules/angular2/src/render/dom/view/proto_view_builder.ts
+++ /dev/null
@@ -1,397 +0,0 @@
-import {isPresent, isBlank, BaseException, StringWrapper} from 'angular2/src/facade/lang';
-import {
-  ListWrapper,
-  MapWrapper,
-  Set,
-  SetWrapper,
-  List,
-  StringMapWrapper
-} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {
-  ASTWithSource,
-  AST,
-  AstTransformer,
-  AccessMember,
-  LiteralArray,
-  ImplicitReceiver
-} from 'angular2/change_detection';
-
-import {DomProtoView, DomProtoViewRef, resolveInternalDomProtoView} from './proto_view';
-import {ElementBinder, Event, HostAction} from './element_binder';
-
-import * as api from '../../api';
-
-import {NG_BINDING_CLASS, EVENT_TARGET_SEPARATOR} from '../util';
-
-export class ProtoViewBuilder {
-  variableBindings: Map<string, string> = new Map();
-  elements: List<ElementBinderBuilder> = [];
-
-  constructor(public rootElement, public type: api.ViewType) {}
-
-  bindElement(element, description = null): ElementBinderBuilder {
-    var builder = new ElementBinderBuilder(this.elements.length, element, description);
-    this.elements.push(builder);
-    DOM.addClass(element, NG_BINDING_CLASS);
-
-    return builder;
-  }
-
-  bindVariable(name, value) {
-    // Store the variable map from value to variable, reflecting how it will be used later by
-    // DomView. When a local is set to the view, a lookup for the variable name will take place
-    // keyed
-    // by the "value", or exported identifier. For example, ng-for sets a view local of "index".
-    // When this occurs, a lookup keyed by "index" must occur to find if there is a var referencing
-    // it.
-    this.variableBindings.set(value, name);
-  }
-
-  build(): api.ProtoViewDto {
-    var renderElementBinders = [];
-
-    var apiElementBinders = [];
-    var transitiveContentTagCount = 0;
-    var boundTextNodeCount = 0;
-    ListWrapper.forEach(this.elements, (ebb: ElementBinderBuilder) => {
-      var directiveTemplatePropertyNames = new Set();
-      var apiDirectiveBinders = ListWrapper.map(ebb.directives, (dbb: DirectiveBuilder) => {
-        ebb.eventBuilder.merge(dbb.eventBuilder);
-        ListWrapper.forEach(dbb.templatePropertyNames,
-                            (name) => directiveTemplatePropertyNames.add(name));
-        return new api.DirectiveBinder({
-          directiveIndex: dbb.directiveIndex,
-          propertyBindings: dbb.propertyBindings,
-          eventBindings: dbb.eventBindings,
-          hostPropertyBindings:
-              buildElementPropertyBindings(ebb.element, isPresent(ebb.componentId),
-                                           dbb.hostPropertyBindings, directiveTemplatePropertyNames)
-        });
-      });
-      var nestedProtoView = isPresent(ebb.nestedProtoView) ? ebb.nestedProtoView.build() : null;
-      var nestedRenderProtoView =
-          isPresent(nestedProtoView) ? resolveInternalDomProtoView(nestedProtoView.render) : null;
-      if (isPresent(nestedRenderProtoView)) {
-        transitiveContentTagCount += nestedRenderProtoView.transitiveContentTagCount;
-      }
-      if (isPresent(ebb.contentTagSelector)) {
-        transitiveContentTagCount++;
-      }
-      var parentIndex = isPresent(ebb.parent) ? ebb.parent.index : -1;
-      apiElementBinders.push(new api.ElementBinder({
-        index: ebb.index,
-        parentIndex: parentIndex,
-        distanceToParent: ebb.distanceToParent,
-        directives: apiDirectiveBinders,
-        nestedProtoView: nestedProtoView,
-        propertyBindings:
-            buildElementPropertyBindings(ebb.element, isPresent(ebb.componentId),
-                                         ebb.propertyBindings, directiveTemplatePropertyNames),
-        variableBindings: ebb.variableBindings,
-        eventBindings: ebb.eventBindings,
-        textBindings: ebb.textBindings,
-        readAttributes: ebb.readAttributes
-      }));
-      var childNodeInfo = this._analyzeChildNodes(ebb.element, ebb.textBindingNodes);
-      boundTextNodeCount += ebb.textBindingNodes.length;
-      renderElementBinders.push(new ElementBinder({
-        textNodeIndices: childNodeInfo.boundTextNodeIndices,
-        contentTagSelector: ebb.contentTagSelector,
-        parentIndex: parentIndex,
-        distanceToParent: ebb.distanceToParent,
-        nestedProtoView:
-            isPresent(nestedProtoView) ? resolveInternalDomProtoView(nestedProtoView.render) : null,
-        componentId: ebb.componentId,
-        eventLocals: new LiteralArray(ebb.eventBuilder.buildEventLocals()),
-        localEvents: ebb.eventBuilder.buildLocalEvents(),
-        globalEvents: ebb.eventBuilder.buildGlobalEvents(),
-        elementIsEmpty: childNodeInfo.elementIsEmpty
-      }));
-    });
-    return new api.ProtoViewDto({
-      render: new DomProtoViewRef(new DomProtoView({
-        element: this.rootElement,
-        elementBinders: renderElementBinders,
-        transitiveContentTagCount: transitiveContentTagCount,
-        boundTextNodeCount: boundTextNodeCount
-      })),
-      type: this.type,
-      elementBinders: apiElementBinders,
-      variableBindings: this.variableBindings
-    });
-  }
-
-  // Note: We need to calculate the next node indices not until the compilation is complete,
-  // as the compiler might change the order of elements.
-  private _analyzeChildNodes(parentElement: /*element*/ any,
-                             boundTextNodes: List</*node*/ any>): _ChildNodesInfo {
-    var childNodes = DOM.childNodes(DOM.templateAwareRoot(parentElement));
-    var boundTextNodeIndices = [];
-    var indexInBoundTextNodes = 0;
-    var elementIsEmpty = true;
-    for (var i = 0; i < childNodes.length; i++) {
-      var node = childNodes[i];
-      if (indexInBoundTextNodes < boundTextNodes.length &&
-          node === boundTextNodes[indexInBoundTextNodes]) {
-        boundTextNodeIndices.push(i);
-        indexInBoundTextNodes++;
-        elementIsEmpty = false;
-      } else if ((DOM.isTextNode(node) && DOM.getText(node).trim().length > 0) ||
-                 (DOM.isElementNode(node))) {
-        elementIsEmpty = false;
-      }
-    }
-    return new _ChildNodesInfo(boundTextNodeIndices, elementIsEmpty);
-  }
-}
-
-class _ChildNodesInfo {
-  constructor(public boundTextNodeIndices: List<number>, public elementIsEmpty: boolean) {}
-}
-
-export class ElementBinderBuilder {
-  parent: ElementBinderBuilder = null;
-  distanceToParent: number = 0;
-  directives: List<DirectiveBuilder> = [];
-  nestedProtoView: ProtoViewBuilder = null;
-  propertyBindings: Map<string, ASTWithSource> = new Map();
-  variableBindings: Map<string, string> = new Map();
-  propertyBindingsToDirectives: Set<string> = new Set();
-  eventBindings: List<api.EventBinding> = [];
-  eventBuilder: EventBuilder = new EventBuilder();
-  textBindingNodes: List</*node*/ any> = [];
-  textBindings: List<ASTWithSource> = [];
-  contentTagSelector: string = null;
-  readAttributes: Map<string, string> = new Map();
-  componentId: string = null;
-
-  constructor(public index: number, public element, description: string) {}
-
-  setParent(parent: ElementBinderBuilder, distanceToParent): ElementBinderBuilder {
-    this.parent = parent;
-    if (isPresent(parent)) {
-      this.distanceToParent = distanceToParent;
-    }
-    return this;
-  }
-
-  readAttribute(attrName: string) {
-    if (isBlank(this.readAttributes.get(attrName))) {
-      this.readAttributes.set(attrName, DOM.getAttribute(this.element, attrName));
-    }
-  }
-
-  bindDirective(directiveIndex: number): DirectiveBuilder {
-    var directive = new DirectiveBuilder(directiveIndex);
-    this.directives.push(directive);
-    return directive;
-  }
-
-  bindNestedProtoView(rootElement): ProtoViewBuilder {
-    if (isPresent(this.nestedProtoView)) {
-      throw new BaseException('Only one nested view per element is allowed');
-    }
-    this.nestedProtoView = new ProtoViewBuilder(rootElement, api.ViewType.EMBEDDED);
-    return this.nestedProtoView;
-  }
-
-  bindProperty(name: string, expression: ASTWithSource) {
-    this.propertyBindings.set(name, expression);
-  }
-
-  bindPropertyToDirective(name: string) {
-    // we are filling in a set of property names that are bound to a property
-    // of at least one directive. This allows us to report "dangling" bindings.
-    this.propertyBindingsToDirectives.add(name);
-  }
-
-  bindVariable(name, value) {
-    // When current is a view root, the variable bindings are set to the *nested* proto view.
-    // The root view conceptually signifies a new "block scope" (the nested view), to which
-    // the variables are bound.
-    if (isPresent(this.nestedProtoView)) {
-      this.nestedProtoView.bindVariable(name, value);
-    } else {
-      // Store the variable map from value to variable, reflecting how it will be used later by
-      // DomView. When a local is set to the view, a lookup for the variable name will take place
-      // keyed
-      // by the "value", or exported identifier. For example, ng-for sets a view local of "index".
-      // When this occurs, a lookup keyed by "index" must occur to find if there is a var
-      // referencing
-      // it.
-      this.variableBindings.set(value, name);
-    }
-  }
-
-  bindEvent(name, expression, target = null) {
-    this.eventBindings.push(this.eventBuilder.add(name, expression, target));
-  }
-
-  bindText(textNode, expression) {
-    this.textBindingNodes.push(textNode);
-    this.textBindings.push(expression);
-  }
-
-  setContentTagSelector(value: string) { this.contentTagSelector = value; }
-
-  setComponentId(componentId: string) { this.componentId = componentId; }
-}
-
-export class DirectiveBuilder {
-  // mapping from directive property name to AST for that directive
-  propertyBindings: Map<string, ASTWithSource> = new Map();
-  // property names used in the template
-  templatePropertyNames: List<string> = [];
-  hostPropertyBindings: Map<string, ASTWithSource> = new Map();
-  eventBindings: List<api.EventBinding> = [];
-  eventBuilder: EventBuilder = new EventBuilder();
-
-  constructor(public directiveIndex: number) {}
-
-  bindProperty(name: string, expression: ASTWithSource, elProp: string) {
-    this.propertyBindings.set(name, expression);
-    if (isPresent(elProp)) {
-      // we are filling in a set of property names that are bound to a property
-      // of at least one directive. This allows us to report "dangling" bindings.
-      this.templatePropertyNames.push(elProp);
-    }
-  }
-
-  bindHostProperty(name: string, expression: ASTWithSource) {
-    this.hostPropertyBindings.set(name, expression);
-  }
-
-  bindEvent(name, expression, target = null) {
-    this.eventBindings.push(this.eventBuilder.add(name, expression, target));
-  }
-}
-
-export class EventBuilder extends AstTransformer {
-  locals: List<AST> = [];
-  localEvents: List<Event> = [];
-  globalEvents: List<Event> = [];
-  _implicitReceiver: AST = new ImplicitReceiver();
-
-  constructor() { super(); }
-
-  add(name: string, source: ASTWithSource, target: string): api.EventBinding {
-    // TODO(tbosch): reenable this when we are parsing element properties
-    // out of action expressions
-    // var adjustedAst = astWithSource.ast.visit(this);
-    var adjustedAst = source.ast;
-    var fullName = isPresent(target) ? target + EVENT_TARGET_SEPARATOR + name : name;
-    var result = new api.EventBinding(
-        fullName, new ASTWithSource(adjustedAst, source.source, source.location));
-    var event = new Event(name, target, fullName);
-    if (isBlank(target)) {
-      this.localEvents.push(event);
-    } else {
-      this.globalEvents.push(event);
-    }
-    return result;
-  }
-
-  visitAccessMember(ast: AccessMember): AccessMember {
-    var isEventAccess = false;
-    var current: AST = ast;
-    while (!isEventAccess && (current instanceof AccessMember)) {
-      var am = <AccessMember>current;
-      if (am.name == '$event') {
-        isEventAccess = true;
-      }
-      current = am.receiver;
-    }
-
-    if (isEventAccess) {
-      this.locals.push(ast);
-      var index = this.locals.length - 1;
-      return new AccessMember(this._implicitReceiver, `${index}`, (arr) => arr[index], null);
-    } else {
-      return ast;
-    }
-  }
-
-  buildEventLocals(): List<AST> { return this.locals; }
-
-  buildLocalEvents(): List<Event> { return this.localEvents; }
-
-  buildGlobalEvents(): List<Event> { return this.globalEvents; }
-
-  merge(eventBuilder: EventBuilder) {
-    this._merge(this.localEvents, eventBuilder.localEvents);
-    this._merge(this.globalEvents, eventBuilder.globalEvents);
-    ListWrapper.concat(this.locals, eventBuilder.locals);
-  }
-
-  _merge(host: List<Event>, tobeAdded: List<Event>) {
-    var names = [];
-    for (var i = 0; i < host.length; i++) {
-      names.push(host[i].fullName);
-    }
-    for (var j = 0; j < tobeAdded.length; j++) {
-      if (!ListWrapper.contains(names, tobeAdded[j].fullName)) {
-        host.push(tobeAdded[j]);
-      }
-    }
-  }
-}
-
-var PROPERTY_PARTS_SEPARATOR = new RegExp('\\.');
-const ATTRIBUTE_PREFIX = 'attr';
-const CLASS_PREFIX = 'class';
-const STYLE_PREFIX = 'style';
-
-function buildElementPropertyBindings(
-    protoElement: /*element*/ any, isNgComponent: boolean,
-    bindingsInTemplate: Map<string, ASTWithSource>,
-    directiveTempaltePropertyNames: Set<string>): List<api.ElementPropertyBinding> {
-  var propertyBindings = [];
-  MapWrapper.forEach(bindingsInTemplate, (ast, propertyNameInTemplate) => {
-    var propertyBinding = createElementPropertyBinding(ast, propertyNameInTemplate);
-    if (isValidElementPropertyBinding(protoElement, isNgComponent, propertyBinding)) {
-      propertyBindings.push(propertyBinding);
-    } else if (!SetWrapper.has(directiveTempaltePropertyNames, propertyNameInTemplate)) {
-      throw new BaseException(
-          `Can't bind to '${propertyNameInTemplate}' since it isn't a know property of the '${DOM.tagName(protoElement).toLowerCase()}' element and there are no matching directives with a corresponding property`);
-    }
-  });
-  return propertyBindings;
-}
-
-function isValidElementPropertyBinding(protoElement: /*element*/ any, isNgComponent: boolean,
-                                       binding: api.ElementPropertyBinding): boolean {
-  if (binding.type === api.PropertyBindingType.PROPERTY) {
-    var tagName = DOM.tagName(protoElement);
-    var possibleCustomElement = tagName.indexOf('-') !== -1;
-    if (possibleCustomElement && !isNgComponent) {
-      // can't tell now as we don't know which properties a custom element will get
-      // once it is instantiated
-      return true;
-    } else {
-      return DOM.hasProperty(protoElement, binding.property);
-    }
-  }
-  return true;
-}
-
-function createElementPropertyBinding(ast: ASTWithSource,
-                                      propertyNameInTemplate: string): api.ElementPropertyBinding {
-  var parts = StringWrapper.split(propertyNameInTemplate, PROPERTY_PARTS_SEPARATOR);
-  if (parts.length === 1) {
-    var propName = parts[0];
-    var mappedPropName = StringMapWrapper.get(DOM.attrToPropMap, propName);
-    propName = isPresent(mappedPropName) ? mappedPropName : propName;
-    return new api.ElementPropertyBinding(api.PropertyBindingType.PROPERTY, ast, propName);
-  } else if (parts[0] == ATTRIBUTE_PREFIX) {
-    return new api.ElementPropertyBinding(api.PropertyBindingType.ATTRIBUTE, ast, parts[1]);
-  } else if (parts[0] == CLASS_PREFIX) {
-    return new api.ElementPropertyBinding(api.PropertyBindingType.CLASS, ast, parts[1]);
-  } else if (parts[0] == STYLE_PREFIX) {
-    var unit = parts.length > 2 ? parts[2] : null;
-    return new api.ElementPropertyBinding(api.PropertyBindingType.STYLE, ast, parts[1], unit);
-  } else {
-    throw new BaseException(`Invalid property name ${propertyNameInTemplate}`);
-  }
-}
diff --git a/modules/angular2/src/render/dom/view/view.ts b/modules/angular2/src/render/dom/view/view.ts
deleted file mode 100644
index 2d86354f4099..000000000000
--- a/modules/angular2/src/render/dom/view/view.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {ListWrapper, MapWrapper, Map, StringMapWrapper, List} from 'angular2/src/facade/collection';
-import {isPresent, isBlank, BaseException, stringify} from 'angular2/src/facade/lang';
-
-import {DomProtoView} from './proto_view';
-import {LightDom} from '../shadow_dom/light_dom';
-import {DomElement} from './element';
-
-import {RenderViewRef, EventDispatcher} from '../../api';
-import {camelCaseToDashCase} from '../util';
-
-export function resolveInternalDomView(viewRef: RenderViewRef): DomView {
-  return (<DomViewRef>viewRef)._view;
-}
-
-export class DomViewRef extends RenderViewRef {
-  constructor(public _view: DomView) { super(); }
-}
-
-/**
- * Const of making objects: http://jsperf.com/instantiate-size-of-object
- */
-export class DomView {
-  hostLightDom: LightDom = null;
-  shadowRoot = null;
-  hydrated: boolean = false;
-  eventDispatcher: EventDispatcher = null;
-  eventHandlerRemovers: List<Function> = [];
-
-  constructor(public proto: DomProtoView, public rootNodes: List</*node*/ any>,
-              public boundTextNodes: List</*node*/ any>, public boundElements: List<DomElement>) {}
-
-  getDirectParentElement(boundElementIndex: number): DomElement {
-    var binder = this.proto.elementBinders[boundElementIndex];
-    var parent = null;
-    if (binder.parentIndex !== -1 && binder.distanceToParent === 1) {
-      parent = this.boundElements[binder.parentIndex];
-    }
-    return parent;
-  }
-
-  setElementProperty(elementIndex: number, propertyName: string, value: any) {
-    DOM.setProperty(this.boundElements[elementIndex].element, propertyName, value);
-  }
-
-  setElementAttribute(elementIndex: number, attributeName: string, value: string) {
-    var element = this.boundElements[elementIndex].element;
-    var dashCasedAttributeName = camelCaseToDashCase(attributeName);
-    if (isPresent(value)) {
-      DOM.setAttribute(element, dashCasedAttributeName, stringify(value));
-    } else {
-      DOM.removeAttribute(element, dashCasedAttributeName);
-    }
-  }
-
-  setElementClass(elementIndex: number, className: string, isAdd: boolean) {
-    var element = this.boundElements[elementIndex].element;
-    var dashCasedClassName = camelCaseToDashCase(className);
-    if (isAdd) {
-      DOM.addClass(element, dashCasedClassName);
-    } else {
-      DOM.removeClass(element, dashCasedClassName);
-    }
-  }
-
-  setElementStyle(elementIndex: number, styleName: string, value: string) {
-    var element = this.boundElements[elementIndex].element;
-    var dashCasedStyleName = camelCaseToDashCase(styleName);
-    if (isPresent(value)) {
-      DOM.setStyle(element, dashCasedStyleName, stringify(value));
-    } else {
-      DOM.removeStyle(element, dashCasedStyleName);
-    }
-  }
-
-  invokeElementMethod(elementIndex: number, methodName: string, args: List<any>) {
-    var element = this.boundElements[elementIndex].element;
-    DOM.invoke(element, methodName, args);
-  }
-
-  setText(textIndex: number, value: string) { DOM.setText(this.boundTextNodes[textIndex], value); }
-
-  dispatchEvent(elementIndex, eventName, event): boolean {
-    var allowDefaultBehavior = true;
-    if (isPresent(this.eventDispatcher)) {
-      var evalLocals = new Map();
-      evalLocals.set('$event', event);
-      // TODO(tbosch): reenable this when we are parsing element properties
-      // out of action expressions
-      // var localValues = this.proto.elementBinders[elementIndex].eventLocals.eval(null, new
-      // Locals(null, evalLocals));
-      // this.eventDispatcher.dispatchEvent(elementIndex, eventName, localValues);
-      allowDefaultBehavior =
-          this.eventDispatcher.dispatchEvent(elementIndex, eventName, evalLocals);
-      if (!allowDefaultBehavior) {
-        event.preventDefault();
-      }
-    }
-    return allowDefaultBehavior;
-  }
-}
diff --git a/modules/angular2/src/render/dom/view/view_container.ts b/modules/angular2/src/render/dom/view/view_container.ts
deleted file mode 100644
index c73c3d9ecd44..000000000000
--- a/modules/angular2/src/render/dom/view/view_container.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {ListWrapper, MapWrapper, List} from 'angular2/src/facade/collection';
-
-import * as viewModule from './view';
-
-export class DomViewContainer {
-  // The order in this list matches the DOM order.
-  views: List<viewModule.DomView> = [];
-
-  contentTagContainers(): List<viewModule.DomView> { return this.views; }
-
-  nodes(): List</*node*/ any> {
-    var r = [];
-    for (var i = 0; i < this.views.length; ++i) {
-      r = ListWrapper.concat(r, this.views[i].rootNodes);
-    }
-    return r;
-  }
-}
diff --git a/modules/angular2/src/render/xhr.ts b/modules/angular2/src/render/xhr.ts
deleted file mode 100644
index 4a31d5fa3200..000000000000
--- a/modules/angular2/src/render/xhr.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {Promise} from 'angular2/src/facade/async';
-
-export class XHR {
-  get(url: string): Promise<string> { return null; }
-}
diff --git a/modules/angular2/src/render/xhr_impl.dart b/modules/angular2/src/render/xhr_impl.dart
deleted file mode 100644
index bf22d6434571..000000000000
--- a/modules/angular2/src/render/xhr_impl.dart
+++ /dev/null
@@ -1,14 +0,0 @@
-library angular2.src.services.xhr_impl;
-
-import 'dart:async' show Future;
-import 'dart:html' show HttpRequest;
-import 'package:angular2/di.dart';
-import './xhr.dart' show XHR;
-
-@Injectable()
-class XHRImpl extends XHR {
-  Future<String> get(String url) {
-    return HttpRequest.request(url).then((HttpRequest req) => req.responseText,
-        onError: (_) => new Future.error('Failed to load $url'));
-  }
-}
diff --git a/modules/angular2/src/render/xhr_impl.ts b/modules/angular2/src/render/xhr_impl.ts
deleted file mode 100644
index 00c779162f6a..000000000000
--- a/modules/angular2/src/render/xhr_impl.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {XHR} from './xhr';
-
-@Injectable()
-export class XHRImpl extends XHR {
-  get(url: string): Promise<string> {
-    var completer = PromiseWrapper.completer();
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    xhr.responseType = 'text';
-
-    xhr.onload = function() {
-      // responseText is the old-school way of retrieving response (supported by IE8 & 9)
-      // response/responseType properties were introduced in XHR Level2 spec (supported by IE10)
-      var response = ('response' in xhr) ? xhr.response : xhr.responseText;
-
-      // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
-      var status = xhr.status === 1223 ? 204 : xhr.status;
-
-      // fix status code when it is 0 (0 status is undocumented).
-      // Occurs when accessing file resources or on Android 4.1 stock browser
-      // while retrieving files from application cache.
-      if (status === 0) {
-        status = response ? 200 : 0;
-      }
-
-      if (200 <= status && status <= 300) {
-        completer.resolve(response);
-      } else {
-        completer.reject(`Failed to load ${url}`, null);
-      }
-    };
-
-    xhr.onerror = function() { completer.reject(`Failed to load ${url}`, null); };
-
-    xhr.send();
-    return completer.promise;
-  }
-}
diff --git a/modules/angular2/src/render/xhr_mock.ts b/modules/angular2/src/render/xhr_mock.ts
deleted file mode 100644
index 4be22e7b0ab6..000000000000
--- a/modules/angular2/src/render/xhr_mock.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import {XHR} from 'angular2/src/render/xhr';
-import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
-import {isBlank, isPresent, normalizeBlank, BaseException} from 'angular2/src/facade/lang';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-
-export class MockXHR extends XHR {
-  private _expectations: List<_Expectation>;
-  private _definitions: Map<string, string>;
-  private _requests: List<_PendingRequest>;
-
-  constructor() {
-    super();
-    this._expectations = [];
-    this._definitions = new Map();
-    this._requests = [];
-  }
-
-  get(url: string): Promise<string> {
-    var request = new _PendingRequest(url);
-    this._requests.push(request);
-    return request.getPromise();
-  }
-
-  expect(url: string, response: string) {
-    var expectation = new _Expectation(url, response);
-    this._expectations.push(expectation);
-  }
-
-  when(url: string, response: string) { this._definitions.set(url, response); }
-
-  flush() {
-    if (this._requests.length === 0) {
-      throw new BaseException('No pending requests to flush');
-    }
-
-    do {
-      var request = ListWrapper.removeAt(this._requests, 0);
-      this._processRequest(request);
-    } while (this._requests.length > 0);
-
-    this.verifyNoOustandingExpectations();
-  }
-
-  verifyNoOustandingExpectations() {
-    if (this._expectations.length === 0) return;
-
-    var urls = [];
-    for (var i = 0; i < this._expectations.length; i++) {
-      var expectation = this._expectations[i];
-      urls.push(expectation.url);
-    }
-
-    throw new BaseException(`Unsatisfied requests: ${ListWrapper.join(urls, ', ')}`);
-  }
-
-  private _processRequest(request: _PendingRequest) {
-    var url = request.url;
-
-    if (this._expectations.length > 0) {
-      var expectation = this._expectations[0];
-      if (expectation.url == url) {
-        ListWrapper.remove(this._expectations, expectation);
-        request.complete(expectation.response);
-        return;
-      }
-    }
-
-    if (this._definitions.has(url)) {
-      var response = this._definitions.get(url);
-      request.complete(normalizeBlank(response));
-      return;
-    }
-
-    throw new BaseException(`Unexpected request ${url}`);
-  }
-}
-
-class _PendingRequest {
-  url: string;
-  completer;
-
-  constructor(url) {
-    this.url = url;
-    this.completer = PromiseWrapper.completer();
-  }
-
-  complete(response: string) {
-    if (isBlank(response)) {
-      this.completer.reject(`Failed to load ${this.url}`, null);
-    } else {
-      this.completer.resolve(response);
-    }
-  }
-
-  getPromise(): Promise<string> { return this.completer.promise; }
-}
-
-class _Expectation {
-  url: string;
-  response: string;
-  constructor(url: string, response: string) {
-    this.url = url;
-    this.response = response;
-  }
-}
diff --git a/modules/angular2/src/router/async_route_handler.ts b/modules/angular2/src/router/async_route_handler.ts
deleted file mode 100644
index dbc50390384d..000000000000
--- a/modules/angular2/src/router/async_route_handler.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {RouteHandler} from './route_handler';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {isPresent, Type} from 'angular2/src/facade/lang';
-
-export class AsyncRouteHandler implements RouteHandler {
-  _resolvedComponent: Promise<any> = null;
-  componentType: Type;
-
-  constructor(private _loader: Function) {}
-
-  resolveComponentType(): Promise<any> {
-    if (isPresent(this._resolvedComponent)) {
-      return this._resolvedComponent;
-    }
-
-    return this._resolvedComponent = this._loader().then((componentType) => {
-      this.componentType = componentType;
-      return componentType;
-    });
-  }
-}
diff --git a/modules/angular2/src/router/hash_location_strategy.ts b/modules/angular2/src/router/hash_location_strategy.ts
deleted file mode 100644
index 9d3540448bfd..000000000000
--- a/modules/angular2/src/router/hash_location_strategy.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Injectable} from 'angular2/di';
-import {LocationStrategy} from './location_strategy';
-import {EventListener, History, Location} from 'angular2/src/facade/browser';
-
-@Injectable()
-export class HashLocationStrategy extends LocationStrategy {
-  private _location: Location;
-  private _history: History;
-
-  constructor() {
-    super();
-    this._location = DOM.getLocation();
-    this._history = DOM.getHistory();
-  }
-
-  onPopState(fn: EventListener): void {
-    DOM.getGlobalEventTarget('window').addEventListener('popstate', fn, false);
-  }
-
-  getBaseHref(): string { return ''; }
-
-  path(): string { return this._location.hash; }
-
-  pushState(state: any, title: string, url: string) {
-    this._history.pushState(state, title, '#' + url);
-  }
-
-  forward(): void { this._history.forward(); }
-
-  back(): void { this._history.back(); }
-}
diff --git a/modules/angular2/src/router/html5_location_strategy.ts b/modules/angular2/src/router/html5_location_strategy.ts
deleted file mode 100644
index cedfc6e4cf51..000000000000
--- a/modules/angular2/src/router/html5_location_strategy.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Injectable} from 'angular2/di';
-import {EventListener, History, Location} from 'angular2/src/facade/browser';
-import {LocationStrategy} from './location_strategy';
-
-@Injectable()
-export class HTML5LocationStrategy extends LocationStrategy {
-  private _location: Location;
-  private _history: History;
-  private _baseHref: string;
-
-  constructor() {
-    super();
-    this._location = DOM.getLocation();
-    this._history = DOM.getHistory();
-    this._baseHref = DOM.getBaseHref();
-  }
-
-  onPopState(fn: EventListener): void {
-    DOM.getGlobalEventTarget('window').addEventListener('popstate', fn, false);
-  }
-
-  getBaseHref(): string { return this._baseHref; }
-
-  path(): string { return this._location.pathname; }
-
-  pushState(state: any, title: string, url: string) { this._history.pushState(state, title, url); }
-
-  forward(): void { this._history.forward(); }
-
-  back(): void { this._history.back(); }
-}
diff --git a/modules/angular2/src/router/instruction.ts b/modules/angular2/src/router/instruction.ts
deleted file mode 100644
index dc174744ecab..000000000000
--- a/modules/angular2/src/router/instruction.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
-  Map,
-  MapWrapper,
-  StringMap,
-  StringMapWrapper,
-  List,
-  ListWrapper
-} from 'angular2/src/facade/collection';
-import {isPresent, isBlank, normalizeBlank} from 'angular2/src/facade/lang';
-
-import {PathRecognizer} from './path_recognizer';
-
-export class RouteParams {
-  constructor(public params: StringMap<string, string>) {}
-
-  get(param: string): string { return normalizeBlank(StringMapWrapper.get(this.params, param)); }
-}
-
-
-/**
- * An `Instruction` represents the component hierarchy of the application based on a given route
- */
-export class Instruction {
-  // "capturedUrl" is the part of the URL captured by this instruction
-  // "accumulatedUrl" is the part of the URL captured by this instruction and all children
-  accumulatedUrl: string;
-
-  reuse: boolean = false;
-  specificity: number;
-
-  private _params: StringMap<string, string>;
-
-  constructor(public component: any, public capturedUrl: string,
-              private _recognizer: PathRecognizer, public child: Instruction = null) {
-    this.accumulatedUrl = capturedUrl;
-    this.specificity = _recognizer.specificity;
-    if (isPresent(child)) {
-      this.child = child;
-      this.specificity += child.specificity;
-      var childUrl = child.accumulatedUrl;
-      if (isPresent(childUrl)) {
-        this.accumulatedUrl += childUrl;
-      }
-    }
-  }
-
-  params(): StringMap<string, string> {
-    if (isBlank(this._params)) {
-      this._params = this._recognizer.parseParams(this.capturedUrl);
-    }
-    return this._params;
-  }
-
-  hasChild(): boolean { return isPresent(this.child); }
-
-  /**
-   * Takes a currently active instruction and sets a reuse flag on each of this instruction's
-   * children
-   */
-  reuseComponentsFrom(oldInstruction: Instruction): void {
-    var nextInstruction = this;
-    while (nextInstruction.reuse = shouldReuseComponent(nextInstruction, oldInstruction) &&
-                                   isPresent(oldInstruction = oldInstruction.child) &&
-                                   isPresent(nextInstruction = nextInstruction.child))
-      ;
-  }
-}
-
-function shouldReuseComponent(instr1: Instruction, instr2: Instruction): boolean {
-  return instr1.component == instr2.component &&
-         StringMapWrapper.equals(instr1.params(), instr2.params());
-}
diff --git a/modules/angular2/src/router/location.ts b/modules/angular2/src/router/location.ts
deleted file mode 100644
index 663881ab7aac..000000000000
--- a/modules/angular2/src/router/location.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {LocationStrategy} from './location_strategy';
-import {StringWrapper, isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
-import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-import {OpaqueToken, Injectable, Optional, Inject} from 'angular2/di';
-
-export const appBaseHrefToken: OpaqueToken = CONST_EXPR(new OpaqueToken('locationHrefToken'));
-
-/**
- * This is the service that an application developer will directly interact with.
- *
- * Responsible for normalizing the URL against the application's base href.
- * A normalized URL is absolute from the URL host, includes the application's base href, and has no
- * trailing slash:
- * - `/my/app/user/123` is normalized
- * - `my/app/user/123` **is not** normalized
- * - `/my/app/user/123/` **is not** normalized
- */
-@Injectable()
-export class Location {
-  private _subject: EventEmitter = new EventEmitter();
-  private _baseHref: string;
-
-  constructor(public _platformStrategy: LocationStrategy,
-              @Optional() @Inject(appBaseHrefToken) href?: string) {
-    this._baseHref = stripTrailingSlash(
-        stripIndexHtml(isPresent(href) ? href : this._platformStrategy.getBaseHref()));
-    this._platformStrategy.onPopState((_) => this._onPopState(_));
-  }
-
-  _onPopState(_): void { ObservableWrapper.callNext(this._subject, {'url': this.path()}); }
-
-  path(): string { return this.normalize(this._platformStrategy.path()); }
-
-  normalize(url: string): string {
-    return stripTrailingSlash(this._stripBaseHref(stripIndexHtml(url)));
-  }
-
-  normalizeAbsolutely(url: string): string {
-    if (!url.startsWith('/')) {
-      url = '/' + url;
-    }
-    return stripTrailingSlash(this._addBaseHref(url));
-  }
-
-  _stripBaseHref(url: string): string {
-    if (this._baseHref.length > 0 && url.startsWith(this._baseHref)) {
-      return url.substring(this._baseHref.length);
-    }
-    return url;
-  }
-
-  _addBaseHref(url: string): string {
-    if (!url.startsWith(this._baseHref)) {
-      return this._baseHref + url;
-    }
-    return url;
-  }
-
-  go(url: string): void {
-    var finalUrl = this.normalizeAbsolutely(url);
-    this._platformStrategy.pushState(null, '', finalUrl);
-  }
-
-  forward(): void { this._platformStrategy.forward(); }
-
-  back(): void { this._platformStrategy.back(); }
-
-  subscribe(onNext, onThrow = null, onReturn = null): void {
-    ObservableWrapper.subscribe(this._subject, onNext, onThrow, onReturn);
-  }
-}
-
-
-
-function stripIndexHtml(url: string): string {
-  if (/\/index.html$/g.test(url)) {
-    // '/index.html'.length == 11
-    return url.substring(0, url.length - 11);
-  }
-  return url;
-}
-
-function stripTrailingSlash(url: string): string {
-  if (/\/$/g.test(url)) {
-    url = url.substring(0, url.length - 1);
-  }
-  return url;
-}
diff --git a/modules/angular2/src/router/location_strategy.ts b/modules/angular2/src/router/location_strategy.ts
deleted file mode 100644
index 2b4a68667718..000000000000
--- a/modules/angular2/src/router/location_strategy.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {BaseException} from 'angular2/src/facade/lang';
-
-function _abstract() {
-  return new BaseException('This method is abstract');
-}
-
-export class LocationStrategy {
-  path(): string { throw _abstract(); }
-  pushState(ctx: any, title: string, url: string): void { throw _abstract(); }
-  forward(): void { throw _abstract(); }
-  back(): void { throw _abstract(); }
-  onPopState(fn): void { throw _abstract(); }
-  getBaseHref(): string { throw _abstract(); }
-}
diff --git a/modules/angular2/src/router/path_recognizer.ts b/modules/angular2/src/router/path_recognizer.ts
deleted file mode 100644
index 814014236c77..000000000000
--- a/modules/angular2/src/router/path_recognizer.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import {
-  RegExp,
-  RegExpWrapper,
-  RegExpMatcherWrapper,
-  StringWrapper,
-  isPresent,
-  isBlank,
-  BaseException,
-  normalizeBlank
-} from 'angular2/src/facade/lang';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {
-  Map,
-  MapWrapper,
-  StringMap,
-  StringMapWrapper,
-  List,
-  ListWrapper
-} from 'angular2/src/facade/collection';
-import {IMPLEMENTS} from 'angular2/src/facade/lang';
-
-import {escapeRegex} from './url';
-import {RouteHandler} from './route_handler';
-
-// TODO(jeffbcross): implement as interface when ts2dart adds support:
-// https://github.com/angular/ts2dart/issues/173
-export class Segment {
-  name: string;
-  regex: string;
-}
-
-class ContinuationSegment extends Segment {
-  generate(params): string { return ''; }
-}
-
-class StaticSegment extends Segment {
-  regex: string;
-  name: string = '';
-
-  constructor(public string: string) {
-    super();
-    this.regex = escapeRegex(string);
-  }
-
-  generate(params): string { return this.string; }
-}
-
-@IMPLEMENTS(Segment)
-class DynamicSegment {
-  regex: string = "([^/]+)";
-
-  constructor(public name: string) {}
-
-  generate(params: StringMap<string, string>): string {
-    if (!StringMapWrapper.contains(params, this.name)) {
-      throw new BaseException(
-          `Route generator for '${this.name}' was not included in parameters passed.`);
-    }
-    return normalizeBlank(StringMapWrapper.get(params, this.name));
-  }
-}
-
-
-class StarSegment {
-  regex: string = "(.+)";
-  constructor(public name: string) {}
-
-  generate(params: StringMap<string, string>): string {
-    return normalizeBlank(StringMapWrapper.get(params, this.name));
-  }
-}
-
-
-var paramMatcher = RegExpWrapper.create("^:([^\/]+)$");
-var wildcardMatcher = RegExpWrapper.create("^\\*([^\/]+)$");
-
-function parsePathString(route: string): StringMap<string, any> {
-  // normalize route as not starting with a "/". Recognition will
-  // also normalize.
-  if (StringWrapper.startsWith(route, "/")) {
-    route = StringWrapper.substring(route, 1);
-  }
-
-  var segments = splitBySlash(route);
-  var results = [];
-  var specificity = 0;
-
-  // The "specificity" of a path is used to determine which route is used when multiple routes match
-  // a URL.
-  // Static segments (like "/foo") are the most specific, followed by dynamic segments (like
-  // "/:id"). Star segments
-  // add no specificity. Segments at the start of the path are more specific than proceeding ones.
-  // The code below uses place values to combine the different types of segments into a single
-  // integer that we can
-  // sort later. Each static segment is worth hundreds of points of specificity (10000, 9900, ...,
-  // 200), and each
-  // dynamic segment is worth single points of specificity (100, 99, ... 2).
-  if (segments.length > 98) {
-    throw new BaseException(`'${route}' has more than the maximum supported number of segments.`);
-  }
-
-  var limit = segments.length - 1;
-  for (var i = 0; i <= limit; i++) {
-    var segment = segments[i], match;
-
-    if (isPresent(match = RegExpWrapper.firstMatch(paramMatcher, segment))) {
-      results.push(new DynamicSegment(match[1]));
-      specificity += (100 - i);
-    } else if (isPresent(match = RegExpWrapper.firstMatch(wildcardMatcher, segment))) {
-      results.push(new StarSegment(match[1]));
-    } else if (segment == '...') {
-      if (i < limit) {
-        // TODO (matsko): setup a proper error here `
-        throw new BaseException(`Unexpected "..." before the end of the path for "${route}".`);
-      }
-      results.push(new ContinuationSegment());
-    } else if (segment.length > 0) {
-      results.push(new StaticSegment(segment));
-      specificity += 100 * (100 - i);
-    }
-  }
-  var result = StringMapWrapper.create();
-  StringMapWrapper.set(result, 'segments', results);
-  StringMapWrapper.set(result, 'specificity', specificity);
-  return result;
-}
-
-function splitBySlash(url: string): List<string> {
-  return url.split('/');
-}
-
-
-// represents something like '/foo/:bar'
-export class PathRecognizer {
-  segments: List<Segment>;
-  regex: RegExp;
-  specificity: number;
-  terminal: boolean = true;
-
-  constructor(public path: string, public handler: RouteHandler) {
-    var parsed = parsePathString(path);
-    var specificity = parsed['specificity'];
-    var segments = parsed['segments'];
-    var regexString = '^';
-
-    ListWrapper.forEach(segments, (segment) => {
-      if (segment instanceof ContinuationSegment) {
-        this.terminal = false;
-      } else {
-        regexString += '/' + segment.regex;
-      }
-    });
-
-    if (this.terminal) {
-      regexString += '$';
-    }
-
-    this.regex = RegExpWrapper.create(regexString);
-    this.segments = segments;
-    this.specificity = specificity;
-  }
-
-  parseParams(url: string): StringMap<string, string> {
-    var params = StringMapWrapper.create();
-    var urlPart = url;
-    for (var i = 0; i < this.segments.length; i++) {
-      var segment = this.segments[i];
-      if (segment instanceof ContinuationSegment) {
-        continue;
-      }
-
-      var match = RegExpWrapper.firstMatch(RegExpWrapper.create('/' + segment.regex), urlPart);
-      urlPart = StringWrapper.substring(urlPart, match[0].length);
-      if (segment.name.length > 0) {
-        StringMapWrapper.set(params, segment.name, match[1]);
-      }
-    }
-
-    return params;
-  }
-
-  generate(params: StringMap<string, string>): string {
-    return ListWrapper.join(ListWrapper.map(this.segments, (segment) => segment.generate(params)),
-                            '/');
-  }
-
-  resolveComponentType(): Promise<any> { return this.handler.resolveComponentType(); }
-}
diff --git a/modules/angular2/src/router/pipeline.ts b/modules/angular2/src/router/pipeline.ts
deleted file mode 100644
index ec0579cc4e49..000000000000
--- a/modules/angular2/src/router/pipeline.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {Instruction} from './instruction';
-import {Injectable} from 'angular2/di';
-
-/**
- * Responsible for performing each step of navigation.
- * "Steps" are conceptually similar to "middleware"
- */
-@Injectable()
-export class Pipeline {
-  steps: List<Function>;
-
-  constructor() { this.steps = [instruction => instruction.router.activateOutlets(instruction)]; }
-
-  process(instruction: Instruction): Promise<any> {
-    var steps = this.steps, currentStep = 0;
-
-    function processOne(result: any = true): Promise<any> {
-      if (currentStep >= steps.length) {
-        return PromiseWrapper.resolve(result);
-      }
-      var step = steps[currentStep];
-      currentStep += 1;
-      return PromiseWrapper.resolve(step(instruction)).then(processOne);
-    }
-
-    return processOne();
-  }
-}
diff --git a/modules/angular2/src/router/route_config_decorator.dart b/modules/angular2/src/router/route_config_decorator.dart
deleted file mode 100644
index 6e64fe392d46..000000000000
--- a/modules/angular2/src/router/route_config_decorator.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library angular2.router.route_config_decorator;
-
-export './route_config_impl.dart';
diff --git a/modules/angular2/src/router/route_config_decorator.ts b/modules/angular2/src/router/route_config_decorator.ts
deleted file mode 100644
index c2b9db5d69a2..000000000000
--- a/modules/angular2/src/router/route_config_decorator.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import {RouteConfig as RouteConfigAnnotation} from './route_config_impl';
-import {makeDecorator} from 'angular2/src/util/decorators';
-
-export var RouteConfig = makeDecorator(RouteConfigAnnotation);
diff --git a/modules/angular2/src/router/route_config_impl.ts b/modules/angular2/src/router/route_config_impl.ts
deleted file mode 100644
index 1598576a986f..000000000000
--- a/modules/angular2/src/router/route_config_impl.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import {CONST} from 'angular2/src/facade/lang';
-import {List, Map} from 'angular2/src/facade/collection';
-
-/**
- * You use the RouteConfig annotation to add routes to a component.
- *
- * Supported keys:
- * - `path` (required)
- * - `component`,  `redirectTo` (requires exactly one of these)
- * - `as` (optional)
- */
-@CONST()
-export class RouteConfig {
-  constructor(public configs: List<Map<any, any>>) {}
-}
diff --git a/modules/angular2/src/router/route_handler.ts b/modules/angular2/src/router/route_handler.ts
deleted file mode 100644
index e0b7546df62a..000000000000
--- a/modules/angular2/src/router/route_handler.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {Type} from 'angular2/src/facade/lang';
-
-export interface RouteHandler {
-  componentType: Type;
-  resolveComponentType(): Promise<any>;
-}
diff --git a/modules/angular2/src/router/route_recognizer.ts b/modules/angular2/src/router/route_recognizer.ts
deleted file mode 100644
index 0dd55dbc41ea..000000000000
--- a/modules/angular2/src/router/route_recognizer.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import {
-  RegExp,
-  RegExpWrapper,
-  StringWrapper,
-  isBlank,
-  isPresent,
-  isType,
-  isStringMap,
-  BaseException
-} from 'angular2/src/facade/lang';
-import {
-  Map,
-  MapWrapper,
-  List,
-  ListWrapper,
-  StringMap,
-  StringMapWrapper
-} from 'angular2/src/facade/collection';
-
-import {PathRecognizer} from './path_recognizer';
-import {RouteHandler} from './route_handler';
-import {AsyncRouteHandler} from './async_route_handler';
-import {SyncRouteHandler} from './sync_route_handler';
-
-/**
- * `RouteRecognizer` is responsible for recognizing routes for a single component.
- * It is consumed by `RouteRegistry`, which knows how to recognize an entire hierarchy of
- * components.
- */
-export class RouteRecognizer {
-  names: Map<string, PathRecognizer> = new Map();
-  redirects: Map<string, string> = new Map();
-  matchers: Map<RegExp, PathRecognizer> = new Map();
-
-  addRedirect(path: string, target: string): void {
-    if (path == '/') {
-      path = '';
-    }
-    this.redirects.set(path, target);
-  }
-
-  addConfig(path: string, handlerObj: any, alias: string = null): boolean {
-    var handler = configObjToHandler(handlerObj['component']);
-    var recognizer = new PathRecognizer(path, handler);
-    MapWrapper.forEach(this.matchers, (matcher, _) => {
-      if (recognizer.regex.toString() == matcher.regex.toString()) {
-        throw new BaseException(
-            `Configuration '${path}' conflicts with existing route '${matcher.path}'`);
-      }
-    });
-    this.matchers.set(recognizer.regex, recognizer);
-    if (isPresent(alias)) {
-      this.names.set(alias, recognizer);
-    }
-    return recognizer.terminal;
-  }
-
-
-  /**
-   * Given a URL, returns a list of `RouteMatch`es, which are partial recognitions for some route.
-   *
-   */
-  recognize(url: string): List<RouteMatch> {
-    var solutions = [];
-    if (url.length > 0 && url[url.length - 1] == '/') {
-      url = url.substring(0, url.length - 1);
-    }
-
-    MapWrapper.forEach(this.redirects, (target, path) => {
-      // "/" redirect case
-      if (path == '/' || path == '') {
-        if (path == url) {
-          url = target;
-        }
-      } else if (url.startsWith(path)) {
-        url = target + url.substring(path.length);
-      }
-    });
-
-    MapWrapper.forEach(this.matchers, (pathRecognizer, regex) => {
-      var match;
-      if (isPresent(match = RegExpWrapper.firstMatch(regex, url))) {
-        var matchedUrl = '/';
-        var unmatchedUrl = '';
-        if (url != '/') {
-          matchedUrl = match[0];
-          unmatchedUrl = url.substring(match[0].length);
-        }
-        solutions.push(new RouteMatch(pathRecognizer, matchedUrl, unmatchedUrl));
-      }
-    });
-
-    return solutions;
-  }
-
-  hasRoute(name: string): boolean { return this.names.has(name); }
-
-  generate(name: string, params: any): StringMap<string, any> {
-    var pathRecognizer: PathRecognizer = this.names.get(name);
-    if (isBlank(pathRecognizer)) {
-      return null;
-    }
-    var url = pathRecognizer.generate(params);
-    return {url, 'nextComponent': pathRecognizer.handler.componentType};
-  }
-}
-
-export class RouteMatch {
-  constructor(public recognizer: PathRecognizer, public matchedUrl: string,
-              public unmatchedUrl: string) {}
-
-  params(): StringMap<string, string> { return this.recognizer.parseParams(this.matchedUrl); }
-}
-
-function configObjToHandler(config: any): RouteHandler {
-  if (isType(config)) {
-    return new SyncRouteHandler(config);
-  } else if (isStringMap(config)) {
-    if (isBlank(config['type'])) {
-      throw new BaseException(
-          `Component declaration when provided as a map should include a 'type' property`);
-    }
-    var componentType = config['type'];
-    if (componentType == 'constructor') {
-      return new SyncRouteHandler(config['constructor']);
-    } else if (componentType == 'loader') {
-      return new AsyncRouteHandler(config['loader']);
-    } else {
-      throw new BaseException(`oops`);
-    }
-  }
-  throw new BaseException(`Unexpected component "${config}".`);
-}
diff --git a/modules/angular2/src/router/route_registry.ts b/modules/angular2/src/router/route_registry.ts
deleted file mode 100644
index 757e75163147..000000000000
--- a/modules/angular2/src/router/route_registry.ts
+++ /dev/null
@@ -1,291 +0,0 @@
-import {RouteRecognizer, RouteMatch} from './route_recognizer';
-import {Instruction} from './instruction';
-import {
-  List,
-  ListWrapper,
-  Map,
-  MapWrapper,
-  StringMap,
-  StringMapWrapper
-} from 'angular2/src/facade/collection';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {
-  isPresent,
-  isBlank,
-  isType,
-  isString,
-  isStringMap,
-  isFunction,
-  StringWrapper,
-  BaseException
-} from 'angular2/src/facade/lang';
-import {RouteConfig} from './route_config_impl';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {Injectable} from 'angular2/di';
-
-/**
- * The RouteRegistry holds route configurations for each component in an Angular app.
- * It is responsible for creating Instructions from URLs, and generating URLs based on route and
- * parameters.
- */
-@Injectable()
-export class RouteRegistry {
-  private _rules: Map<any, RouteRecognizer> = new Map();
-
-  constructor(private _rootHostComponent: any) {}
-
-  /**
-   * Given a component and a configuration object, add the route to this registry
-   */
-  config(parentComponent, config: StringMap<string, any>): void {
-    assertValidConfig(config);
-
-    var recognizer: RouteRecognizer = this._rules.get(parentComponent);
-
-    if (isBlank(recognizer)) {
-      recognizer = new RouteRecognizer();
-      this._rules.set(parentComponent, recognizer);
-    }
-
-    if (StringMapWrapper.contains(config, 'redirectTo')) {
-      recognizer.addRedirect(config['path'], config['redirectTo']);
-      return;
-    }
-
-    config = StringMapWrapper.merge(
-        config, {'component': normalizeComponentDeclaration(config['component'])});
-
-    var component = config['component'];
-    var terminal = recognizer.addConfig(config['path'], config, config['as']);
-
-    if (component['type'] == 'constructor') {
-      if (terminal) {
-        assertTerminalComponent(component['constructor'], config['path']);
-      } else {
-        this.configFromComponent(component['constructor']);
-      }
-    }
-  }
-
-  /**
-   * Reads the annotations of a component and configures the registry based on them
-   */
-  configFromComponent(component): void {
-    if (!isType(component)) {
-      return;
-    }
-
-    // Don't read the annotations from a type more than once –
-    // this prevents an infinite loop if a component routes recursively.
-    if (this._rules.has(component)) {
-      return;
-    }
-    var annotations = reflector.annotations(component);
-    if (isPresent(annotations)) {
-      for (var i = 0; i < annotations.length; i++) {
-        var annotation = annotations[i];
-
-        if (annotation instanceof RouteConfig) {
-          ListWrapper.forEach(annotation.configs, (config) => this.config(component, config));
-        }
-      }
-    }
-  }
-
-
-  /**
-   * Given a URL and a parent component, return the most specific instruction for navigating
-   * the application into the state specified by the url
-   */
-  recognize(url: string, parentComponent): Promise<Instruction> {
-    var componentRecognizer = this._rules.get(parentComponent);
-    if (isBlank(componentRecognizer)) {
-      return PromiseWrapper.resolve(null);
-    }
-
-    // Matches some beginning part of the given URL
-    var possibleMatches = componentRecognizer.recognize(url);
-    var matchPromises =
-        ListWrapper.map(possibleMatches, (candidate) => this._completeRouteMatch(candidate));
-
-    return PromiseWrapper.all(matchPromises)
-        .then((solutions: List<Instruction>) => {
-          // remove nulls
-          var fullSolutions = ListWrapper.filter(solutions, (solution) => isPresent(solution));
-
-          if (fullSolutions.length > 0) {
-            return mostSpecific(fullSolutions);
-          }
-          return null;
-        });
-  }
-
-
-  _completeRouteMatch(partialMatch: RouteMatch): Promise<Instruction> {
-    var recognizer = partialMatch.recognizer;
-    var handler = recognizer.handler;
-    return handler.resolveComponentType().then((componentType) => {
-      this.configFromComponent(componentType);
-
-      if (partialMatch.unmatchedUrl.length == 0) {
-        return new Instruction(componentType, partialMatch.matchedUrl, recognizer);
-      }
-
-      return this.recognize(partialMatch.unmatchedUrl, componentType)
-          .then(childInstruction => {
-            if (isBlank(childInstruction)) {
-              return null;
-            } else {
-              return new Instruction(componentType, partialMatch.matchedUrl, recognizer,
-                                     childInstruction);
-            }
-          });
-    });
-  }
-
-  /**
-   * Given a list with component names and params like: `['./user', {id: 3 }]`
-   * generates a url with a leading slash relative to the provided `parentComponent`.
-   */
-  generate(linkParams: List<any>, parentComponent): string {
-    let normalizedLinkParams = splitAndFlattenLinkParams(linkParams);
-    let url = '/';
-
-    let componentCursor = parentComponent;
-
-    // The first segment should be either '.' (generate from parent) or '' (generate from root).
-    // When we normalize above, we strip all the slashes, './' becomes '.' and '/' becomes ''.
-    if (normalizedLinkParams[0] == '') {
-      componentCursor = this._rootHostComponent;
-    } else if (normalizedLinkParams[0] != '.') {
-      throw new BaseException(
-          `Link "${ListWrapper.toJSON(linkParams)}" must start with "/" or "./"`);
-    }
-
-    if (normalizedLinkParams[normalizedLinkParams.length - 1] == '') {
-      ListWrapper.removeLast(normalizedLinkParams);
-    }
-
-    if (normalizedLinkParams.length < 2) {
-      let msg = `Link "${ListWrapper.toJSON(linkParams)}" must include a route name.`;
-      throw new BaseException(msg);
-    }
-
-    for (let i = 1; i < normalizedLinkParams.length; i += 1) {
-      let segment = normalizedLinkParams[i];
-      if (!isString(segment)) {
-        throw new BaseException(`Unexpected segment "${segment}" in link DSL. Expected a string.`);
-      }
-      let params = null;
-      if (i + 1 < normalizedLinkParams.length) {
-        let nextSegment = normalizedLinkParams[i + 1];
-        if (isStringMap(nextSegment)) {
-          params = nextSegment;
-          i += 1;
-        }
-      }
-
-      var componentRecognizer = this._rules.get(componentCursor);
-      if (isBlank(componentRecognizer)) {
-        throw new BaseException(`Could not find route config for "${segment}".`);
-      }
-      var response = componentRecognizer.generate(segment, params);
-      url += response['url'];
-      componentCursor = response['nextComponent'];
-    }
-
-    return url;
-  }
-}
-
-
-/*
- * A config should have a "path" property, and exactly one of:
- * - `component`
- * - `redirectTo`
- */
-var ALLOWED_TARGETS = ['component', 'redirectTo'];
-function assertValidConfig(config: StringMap<string, any>): void {
-  if (!StringMapWrapper.contains(config, 'path')) {
-    throw new BaseException(`Route config should contain a "path" property`);
-  }
-  var targets = 0;
-  ListWrapper.forEach(ALLOWED_TARGETS, (target) => {
-    if (StringMapWrapper.contains(config, target)) {
-      targets += 1;
-    }
-  });
-  if (targets != 1) {
-    throw new BaseException(
-        `Route config should contain exactly one 'component', or 'redirectTo' property`);
-  }
-}
-
-/*
- * Returns a StringMap like: `{ 'constructor': SomeType, 'type': 'constructor' }`
- */
-var VALID_COMPONENT_TYPES = ['constructor', 'loader'];
-function normalizeComponentDeclaration(config: any): StringMap<string, any> {
-  if (isType(config)) {
-    return {'constructor': config, 'type': 'constructor'};
-  } else if (isStringMap(config)) {
-    if (isBlank(config['type'])) {
-      throw new BaseException(
-          `Component declaration when provided as a map should include a 'type' property`);
-    }
-    var componentType = config['type'];
-    if (!ListWrapper.contains(VALID_COMPONENT_TYPES, componentType)) {
-      throw new BaseException(`Invalid component type '${componentType}'`);
-    }
-    return config;
-  } else {
-    throw new BaseException(`Component declaration should be either a Map or a Type`);
-  }
-}
-
-/*
- * Given a list of instructions, returns the most specific instruction
- */
-function mostSpecific(instructions: List<Instruction>): Instruction {
-  var mostSpecificSolution = instructions[0];
-  for (var solutionIndex = 1; solutionIndex < instructions.length; solutionIndex++) {
-    var solution = instructions[solutionIndex];
-    if (solution.specificity > mostSpecificSolution.specificity) {
-      mostSpecificSolution = solution;
-    }
-  }
-  return mostSpecificSolution;
-}
-
-function assertTerminalComponent(component, path) {
-  if (!isType(component)) {
-    return;
-  }
-
-  var annotations = reflector.annotations(component);
-  if (isPresent(annotations)) {
-    for (var i = 0; i < annotations.length; i++) {
-      var annotation = annotations[i];
-
-      if (annotation instanceof RouteConfig) {
-        throw new BaseException(
-            `Child routes are not allowed for "${path}". Use "..." on the parent's route path.`);
-      }
-    }
-  }
-}
-
-/*
- * Given: ['/a/b', {c: 2}]
- * Returns: ['', 'a', 'b', {c: 2}]
- */
-var SLASH = new RegExp('/');
-function splitAndFlattenLinkParams(linkParams: List<any>): List<any> {
-  return ListWrapper.reduce(linkParams, (accumulation, item) => {
-    if (isString(item)) {
-      return ListWrapper.concat(accumulation, StringWrapper.split(item, SLASH));
-    }
-    accumulation.push(item);
-    return accumulation;
-  }, []);
-}
diff --git a/modules/angular2/src/router/router.ts b/modules/angular2/src/router/router.ts
deleted file mode 100644
index 6d8b31323193..000000000000
--- a/modules/angular2/src/router/router.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-import {Promise, PromiseWrapper, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-import {Map, MapWrapper, List, ListWrapper} from 'angular2/src/facade/collection';
-import {isBlank, isPresent, Type, isArray} from 'angular2/src/facade/lang';
-
-import {RouteRegistry} from './route_registry';
-import {Pipeline} from './pipeline';
-import {Instruction} from './instruction';
-import {RouterOutlet} from './router_outlet';
-import {Location} from './location';
-
-let _resolveToTrue = PromiseWrapper.resolve(true);
-let _resolveToFalse = PromiseWrapper.resolve(false);
-
-/**
- * # Router
- * The router is responsible for mapping URLs to components.
- *
- * You can see the state of the router by inspecting the read-only field `router.navigating`.
- * This may be useful for showing a spinner, for instance.
- *
- * ## Concepts
- * Routers and component instances have a 1:1 correspondence.
- *
- * The router holds reference to a number of "outlets." An outlet is a placeholder that the
- * router dynamically fills in depending on the current URL.
- *
- * When the router navigates from a URL, it must first recognizes it and serialize it into an
- * `Instruction`.
- * The router uses the `RouteRegistry` to get an `Instruction`.
- *
- * @exportedAs angular2/router
- */
-export class Router {
-  navigating: boolean = false;
-  lastNavigationAttempt: string;
-  previousUrl: string = null;
-
-  private _currentInstruction: Instruction = null;
-  private _currentNavigation: Promise<any> = _resolveToTrue;
-  private _outlet: RouterOutlet = null;
-  private _subject: EventEmitter = new EventEmitter();
-
-  // todo(jeffbcross): rename _registry to registry since it is accessed from subclasses
-  // todo(jeffbcross): rename _pipeline to pipeline since it is accessed from subclasses
-  constructor(public _registry: RouteRegistry, public _pipeline: Pipeline, public parent: Router,
-              public hostComponent: any) {}
-
-
-  /**
-   * Constructs a child router. You probably don't need to use this unless you're writing a reusable
-   * component.
-   */
-  childRouter(hostComponent: any): Router { return new ChildRouter(this, hostComponent); }
-
-
-  /**
-   * Register an object to notify of route changes. You probably don't need to use this unless
-   * you're writing a reusable component.
-   */
-  registerOutlet(outlet: RouterOutlet): Promise<boolean> {
-    // TODO: sibling routes
-    this._outlet = outlet;
-    if (isPresent(this._currentInstruction)) {
-      return outlet.activate(this._currentInstruction);
-    }
-    return _resolveToTrue;
-  }
-
-
-  /**
-   * Dynamically update the routing configuration and trigger a navigation.
-   *
-   * # Usage
-   *
-   * ```
-   * router.config({ 'path': '/', 'component': IndexCmp});
-   * ```
-   *
-   * Or:
-   *
-   * ```
-   * router.config([
-   *   { 'path': '/', 'component': IndexComp },
-   *   { 'path': '/user/:id', 'component': UserComp },
-   * ]);
-   * ```
-   */
-  config(config: StringMap<string, any>| List<StringMap<string, any>>): Promise<any> {
-    if (isArray(config)) {
-      (<List<any>>config)
-          .forEach((configObject) => { this._registry.config(this.hostComponent, configObject); });
-    } else {
-      this._registry.config(this.hostComponent, config);
-    }
-    return this.renavigate();
-  }
-
-
-  /**
-   * Navigate to a URL. Returns a promise that resolves when navigation is complete.
-   *
-   * If the given URL begins with a `/`, router will navigate absolutely.
-   * If the given URL does not begin with `/`, the router will navigate relative to this component.
-   */
-  navigate(url: string): Promise<any> {
-    if (this.navigating) {
-      return this._currentNavigation;
-    }
-    this.lastNavigationAttempt = url;
-    return this._currentNavigation = this.recognize(url).then((matchedInstruction) => {
-      if (isBlank(matchedInstruction)) {
-        return _resolveToFalse;
-      }
-
-      if (isPresent(this._currentInstruction)) {
-        matchedInstruction.reuseComponentsFrom(this._currentInstruction);
-      }
-
-      this._startNavigating();
-
-      var result =
-          this.commit(matchedInstruction)
-              .then((_) => {
-                this._finishNavigating();
-                ObservableWrapper.callNext(this._subject, matchedInstruction.accumulatedUrl);
-              });
-
-      return PromiseWrapper.catchError(result, (err) => {
-        this._finishNavigating();
-        throw err;
-      });
-    });
-  }
-
-  _startNavigating(): void { this.navigating = true; }
-
-  _finishNavigating(): void { this.navigating = false; }
-
-
-  /**
-   * Subscribe to URL updates from the router
-   */
-  subscribe(onNext): void { ObservableWrapper.subscribe(this._subject, onNext); }
-
-
-  /**
-   * Updates this router and all descendant routers according to the given instruction
-   */
-  commit(instruction: Instruction): Promise<any> {
-    this._currentInstruction = instruction;
-    if (isPresent(this._outlet)) {
-      return this._outlet.activate(instruction);
-    }
-    return _resolveToTrue;
-  }
-
-
-  /**
-   * Removes the contents of this router's outlet and all descendant outlets
-   */
-  deactivate(): Promise<any> {
-    if (isPresent(this._outlet)) {
-      return this._outlet.deactivate();
-    }
-    return _resolveToTrue;
-  }
-
-
-  /**
-   * Given a URL, returns an instruction representing the component graph
-   */
-  recognize(url: string): Promise<Instruction> {
-    return this._registry.recognize(url, this.hostComponent);
-  }
-
-
-  /**
-   * Navigates to either the last URL successfully navigated to, or the last URL requested if the
-   * router has yet to successfully navigate.
-   */
-  renavigate(): Promise<any> {
-    var destination = isBlank(this.previousUrl) ? this.lastNavigationAttempt : this.previousUrl;
-    if (isBlank(destination)) {
-      return this._currentNavigation;
-    }
-    return this.navigate(destination);
-  }
-
-
-  /**
-   * Generate a URL from a component name and optional map of parameters. The URL is relative to the
-   * app's base href.
-   */
-  generate(linkParams: List<any>): string {
-    return this._registry.generate(linkParams, this.hostComponent);
-  }
-}
-
-export class RootRouter extends Router {
-  _location: Location;
-
-  constructor(registry: RouteRegistry, pipeline: Pipeline, location: Location,
-              hostComponent: Type) {
-    super(registry, pipeline, null, hostComponent);
-    this._location = location;
-    this._location.subscribe((change) => this.navigate(change['url']));
-    this._registry.configFromComponent(hostComponent);
-    this.navigate(location.path());
-  }
-
-  commit(instruction): Promise<any> {
-    return super.commit(instruction)
-        .then((_) => { this._location.go(instruction.accumulatedUrl); });
-  }
-}
-
-class ChildRouter extends Router {
-  constructor(parent: Router, hostComponent) {
-    super(parent._registry, parent._pipeline, parent, hostComponent);
-    this.parent = parent;
-  }
-
-
-  navigate(url: string): Promise<any> {
-    // Delegate navigation to the root router
-    return this.parent.navigate(url);
-  }
-}
diff --git a/modules/angular2/src/router/router_link.ts b/modules/angular2/src/router/router_link.ts
deleted file mode 100644
index 82c20ac75013..000000000000
--- a/modules/angular2/src/router/router_link.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import {Directive} from 'angular2/src/core/annotations/decorators';
-import {List, StringMap, StringMapWrapper} from 'angular2/src/facade/collection';
-
-import {Router} from './router';
-import {Location} from './location';
-
-/**
- * The RouterLink directive lets you link to specific parts of your app.
- *
- * Consider the following route configuration:
-
- * ```
- * @RouteConfig({
- *   path: '/user', component: UserCmp, as: 'user'
- * });
- * class MyComp {}
- * ```
- *
- * When linking to this `user` route, you can write:
- *
- * ```
- * <a [router-link]="['./user']">link to user component</a>
- * ```
- *
- * RouterLink expects the value to be an array of route names, followed by the params
- * for that level of routing. For instance `['/team', {teamId: 1}, 'user', {userId: 2}]`
- * means that we want to generate a link for the `team` route with params `{teamId: 1}`,
- * and with a child route `user` with params `{userId: 2}`.
- *
- * The first route name should be prepended with either `./` or `/`.
- * If the route begins with `/`, the router will look up the route from the root of the app.
- * If the route begins with `./`, the router will instead look in the current component's
- * children for the route.
- *
- * @exportedAs angular2/router
- */
-@Directive({
-  selector: '[router-link]',
-  properties: ['routeParams: routerLink'],
-  host: {'(^click)': 'onClick()', '[attr.href]': 'visibleHref'}
-})
-export class RouterLink {
-  private _routeParams: List<any>;
-
-  // the url displayed on the anchor element.
-  visibleHref: string;
-  // the url passed to the router navigation.
-  _navigationHref: string;
-
-  constructor(private _router: Router, private _location: Location) {}
-
-  set routeParams(changes: List<any>) {
-    this._routeParams = changes;
-    this._navigationHref = this._router.generate(this._routeParams);
-    this.visibleHref = this._location.normalizeAbsolutely(this._navigationHref);
-  }
-
-  onClick(): boolean {
-    this._router.navigate(this._navigationHref);
-    return false;
-  }
-}
diff --git a/modules/angular2/src/router/router_outlet.ts b/modules/angular2/src/router/router_outlet.ts
deleted file mode 100644
index 0e51c3616cdd..000000000000
--- a/modules/angular2/src/router/router_outlet.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {isBlank, isPresent} from 'angular2/src/facade/lang';
-
-import {Directive, Attribute} from 'angular2/src/core/annotations/decorators';
-import {DynamicComponentLoader, ComponentRef, ElementRef} from 'angular2/core';
-import {Injector, bind, Dependency, undefinedValue} from 'angular2/di';
-
-import * as routerMod from './router';
-import {Instruction, RouteParams} from './instruction'
-
-
-/**
- * A router outlet is a placeholder that Angular dynamically fills based on the application's route.
- *
- * ## Use
- *
- * ```
- * <router-outlet></router-outlet>
- * ```
- */
-@Directive({
-  selector: 'router-outlet'
-})
-export class RouterOutlet {
-  private _childRouter: routerMod.Router = null;
-  private _componentRef: ComponentRef = null;
-  private _currentInstruction: Instruction = null;
-
-  constructor(private _elementRef: ElementRef, private _loader: DynamicComponentLoader,
-              private _parentRouter: routerMod.Router, @Attribute('name') nameAttr: string) {
-    // TODO: reintroduce with new // sibling routes
-    // if (isBlank(nameAttr)) {
-    //  nameAttr = 'default';
-    //}
-    this._parentRouter.registerOutlet(this);
-  }
-
-  /**
-   * Given an instruction, update the contents of this outlet.
-   */
-  activate(instruction: Instruction): Promise<any> {
-    // if we're able to reuse the component, we just have to pass along the instruction to the
-    // component's router
-    // so it can propagate changes to its children
-    if ((instruction == this._currentInstruction || instruction.reuse) &&
-        isPresent(this._childRouter)) {
-      return this._childRouter.commit(instruction.child);
-    }
-
-    this._currentInstruction = instruction;
-    this._childRouter = this._parentRouter.childRouter(instruction.component);
-    var params = new RouteParams(instruction.params());
-    var bindings = Injector.resolve(
-        [bind(RouteParams).toValue(params), bind(routerMod.Router).toValue(this._childRouter)]);
-
-    return this.deactivate()
-        .then((_) => this._loader.loadNextToLocation(instruction.component, this._elementRef,
-                                                     bindings))
-        .then((componentRef) => {
-          this._componentRef = componentRef;
-          return this._childRouter.commit(instruction.child);
-        });
-  }
-
-
-  deactivate(): Promise<any> {
-    return (isPresent(this._childRouter) ? this._childRouter.deactivate() :
-                                           PromiseWrapper.resolve(true))
-        .then((_) => {
-          if (isPresent(this._componentRef)) {
-            this._componentRef.dispose();
-            this._componentRef = null;
-          }
-        });
-  }
-
-  canDeactivate(instruction: Instruction): Promise<boolean> {
-    // TODO: how to get ahold of the component instance here?
-    return PromiseWrapper.resolve(true);
-  }
-}
diff --git a/modules/angular2/src/router/sync_route_handler.ts b/modules/angular2/src/router/sync_route_handler.ts
deleted file mode 100644
index 598601c75c09..000000000000
--- a/modules/angular2/src/router/sync_route_handler.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {RouteHandler} from './route_handler';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {Type} from 'angular2/src/facade/lang';
-
-export class SyncRouteHandler implements RouteHandler {
-  _resolvedComponent: Promise<any> = null;
-
-  constructor(public componentType: Type) {
-    this._resolvedComponent = PromiseWrapper.resolve(componentType);
-  }
-
-  resolveComponentType(): Promise<any> { return this._resolvedComponent; }
-}
diff --git a/modules/angular2/src/router/url.ts b/modules/angular2/src/router/url.ts
deleted file mode 100644
index 90136eed2e69..000000000000
--- a/modules/angular2/src/router/url.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {RegExpWrapper, StringWrapper} from 'angular2/src/facade/lang';
-
-var specialCharacters = ['/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\'];
-
-var escapeRe = RegExpWrapper.create('(\\' + specialCharacters.join('|\\') + ')', 'g');
-
-export function escapeRegex(string: string): string {
-  return StringWrapper.replaceAllMapped(string, escapeRe, (match) => { return "\\" + match; });
-}
diff --git a/modules/angular2/src/services/app_root_url.ts b/modules/angular2/src/services/app_root_url.ts
deleted file mode 100644
index 677e6d73332a..000000000000
--- a/modules/angular2/src/services/app_root_url.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {isBlank} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-@Injectable()
-export class AppRootUrl {
-  private _value: string;
-
-  get value() {
-    if (isBlank(this._value)) {
-      var a = DOM.createElement('a');
-      DOM.resolveAndSetHref(a, './', null);
-      this._value = DOM.getHref(a);
-    }
-
-    return this._value;
-  }
-}
diff --git a/modules/angular2/src/services/ruler.ts b/modules/angular2/src/services/ruler.ts
deleted file mode 100644
index 07b7b31b98db..000000000000
--- a/modules/angular2/src/services/ruler.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {DomAdapter} from 'angular2/src/dom/dom_adapter';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-
-export class Rectangle {
-  left;
-  right;
-  top;
-  bottom;
-  height;
-  width;
-  constructor(left, top, width, height) {
-    this.left = left;
-    this.right = left + width;
-    this.top = top;
-    this.bottom = top + height;
-    this.height = height;
-    this.width = width;
-  }
-}
-
-export class Ruler {
-  domAdapter: DomAdapter;
-  constructor(domAdapter: DomAdapter) { this.domAdapter = domAdapter; }
-
-  measure(el: ElementRef): Promise<Rectangle> {
-    var clntRect = <any>this.domAdapter.getBoundingClientRect(el.nativeElement);
-
-    // even if getBoundingClientRect is synchronous we use async API in preparation for further
-    // changes
-    return PromiseWrapper.resolve(
-        new Rectangle(clntRect.left, clntRect.top, clntRect.width, clntRect.height));
-  }
-}
diff --git a/modules/angular2/src/services/title.ts b/modules/angular2/src/services/title.ts
deleted file mode 100644
index 9b60c7c4c999..000000000000
--- a/modules/angular2/src/services/title.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-export class Title {
-  getTitle(): string { return DOM.getTitle(); }
-
-  setTitle(newTitle: string) { DOM.setTitle(newTitle); }
-}
diff --git a/modules/angular2/src/services/url_resolver.dart b/modules/angular2/src/services/url_resolver.dart
deleted file mode 100644
index 6c8cd64cc6a6..000000000000
--- a/modules/angular2/src/services/url_resolver.dart
+++ /dev/null
@@ -1,26 +0,0 @@
-library angular2.src.services.url_resolver;
-
-import 'package:angular2/di.dart' show Injectable;
-
-@Injectable()
-class UrlResolver {
-  /**
-   * Resolves the `url` given the `baseUrl`:
-   * - when the `url` is null, the `baseUrl` is returned,
-   * - if `url` is relative ('path/to/here', './path/to/here'), the resolved url is a combination of
-   * `baseUrl` and `url`,
-   * - if `url` is absolute (it has a scheme: 'http://', 'https://' or start with '/'), the `url` is
-   * returned as is (ignoring the `baseUrl`)
-   *
-   * @param {string} baseUrl
-   * @param {string} url
-   * @returns {string} the resolved URL
-   */
-  String resolve(String baseUrl, String url) {
-    Uri uri = Uri.parse(url);
-    if (uri.isAbsolute) return uri.toString();
-
-    Uri baseUri = Uri.parse(baseUrl);
-    return baseUri.resolveUri(uri).toString();
-  }
-}
diff --git a/modules/angular2/src/services/url_resolver.ts b/modules/angular2/src/services/url_resolver.ts
deleted file mode 100644
index d9636f5efdb9..000000000000
--- a/modules/angular2/src/services/url_resolver.ts
+++ /dev/null
@@ -1,293 +0,0 @@
-import {Injectable} from 'angular2/di';
-import {
-  isPresent,
-  isBlank,
-  RegExpWrapper,
-  BaseException,
-  normalizeBlank
-} from 'angular2/src/facade/lang';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-@Injectable()
-export class UrlResolver {
-  /**
-   * Resolves the `url` given the `baseUrl`:
-   * - when the `url` is null, the `baseUrl` is returned,
-   * - if `url` is relative ('path/to/here', './path/to/here'), the resolved url is a combination of
-   * `baseUrl` and `url`,
-   * - if `url` is absolute (it has a scheme: 'http://', 'https://' or start with '/'), the `url` is
-   * returned as is (ignoring the `baseUrl`)
-   *
-   * @param {string} baseUrl
-   * @param {string} url
-   * @returns {string} the resolved URL
-   */
-  resolve(baseUrl: string, url: string): string { return _resolveUrl(baseUrl, url); }
-}
-
-// The code below is adapted from Traceur:
-// https://github.com/google/traceur-compiler/blob/9511c1dafa972bf0de1202a8a863bad02f0f95a8/src/runtime/url.js
-
-/**
- * Builds a URI string from already-encoded parts.
- *
- * No encoding is performed.  Any component may be omitted as either null or
- * undefined.
- *
- * @param {?string=} opt_scheme The scheme such as 'http'.
- * @param {?string=} opt_userInfo The user name before the '@'.
- * @param {?string=} opt_domain The domain such as 'www.google.com', already
- *     URI-encoded.
- * @param {(string|null)=} opt_port The port number.
- * @param {?string=} opt_path The path, already URI-encoded.  If it is not
- *     empty, it must begin with a slash.
- * @param {?string=} opt_queryData The URI-encoded query data.
- * @param {?string=} opt_fragment The URI-encoded fragment identifier.
- * @return {string} The fully combined URI.
- */
-function _buildFromEncodedParts(opt_scheme?: string, opt_userInfo?: string, opt_domain?: string,
-                                opt_port?: string, opt_path?: string, opt_queryData?: string,
-                                opt_fragment?: string): string {
-  var out = [];
-
-  if (isPresent(opt_scheme)) {
-    out.push(opt_scheme + ':');
-  }
-
-  if (isPresent(opt_domain)) {
-    out.push('//');
-
-    if (isPresent(opt_userInfo)) {
-      out.push(opt_userInfo + '@');
-    }
-
-    out.push(opt_domain);
-
-    if (isPresent(opt_port)) {
-      out.push(':' + opt_port);
-    }
-  }
-
-  if (isPresent(opt_path)) {
-    out.push(opt_path);
-  }
-
-  if (isPresent(opt_queryData)) {
-    out.push('?' + opt_queryData);
-  }
-
-  if (isPresent(opt_fragment)) {
-    out.push('#' + opt_fragment);
-  }
-
-  return out.join('');
-}
-
-/**
- * A regular expression for breaking a URI into its component parts.
- *
- * {@link http://www.gbiv.com/protocols/uri/rfc/rfc3986.html#RFC2234} says
- * As the "first-match-wins" algorithm is identical to the "greedy"
- * disambiguation method used by POSIX regular expressions, it is natural and
- * commonplace to use a regular expression for parsing the potential five
- * components of a URI reference.
- *
- * The following line is the regular expression for breaking-down a
- * well-formed URI reference into its components.
- *
- * <pre>
- * ^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
- *  12            3  4          5       6  7        8 9
- * </pre>
- *
- * The numbers in the second line above are only to assist readability; they
- * indicate the reference points for each subexpression (i.e., each paired
- * parenthesis). We refer to the value matched for subexpression <n> as $<n>.
- * For example, matching the above expression to
- * <pre>
- *     http://www.ics.uci.edu/pub/ietf/uri/#Related
- * </pre>
- * results in the following subexpression matches:
- * <pre>
- *    $1 = http:
- *    $2 = http
- *    $3 = //www.ics.uci.edu
- *    $4 = www.ics.uci.edu
- *    $5 = /pub/ietf/uri/
- *    $6 = <undefined>
- *    $7 = <undefined>
- *    $8 = #Related
- *    $9 = Related
- * </pre>
- * where <undefined> indicates that the component is not present, as is the
- * case for the query component in the above example. Therefore, we can
- * determine the value of the five components as
- * <pre>
- *    scheme    = $2
- *    authority = $4
- *    path      = $5
- *    query     = $7
- *    fragment  = $9
- * </pre>
- *
- * The regular expression has been modified slightly to expose the
- * userInfo, domain, and port separately from the authority.
- * The modified version yields
- * <pre>
- *    $1 = http              scheme
- *    $2 = <undefined>       userInfo -\
- *    $3 = www.ics.uci.edu   domain     | authority
- *    $4 = <undefined>       port     -/
- *    $5 = /pub/ietf/uri/    path
- *    $6 = <undefined>       query without ?
- *    $7 = Related           fragment without #
- * </pre>
- * @type {!RegExp}
- * @private
- */
-var _splitRe =
-    RegExpWrapper.create('^' +
-                         '(?:' +
-                         '([^:/?#.]+)' +  // scheme - ignore special characters
-                                          // used by other URL parts such as :,
-                                          // ?, /, #, and .
-                         ':)?' +
-                         '(?://' +
-                         '(?:([^/?#]*)@)?' +                  // userInfo
-                         '([\\w\\d\\-\\u0100-\\uffff.%]*)' +  // domain - restrict to letters,
-                                                              // digits, dashes, dots, percent
-                                                              // escapes, and unicode characters.
-                         '(?::([0-9]+))?' +                   // port
-                         ')?' +
-                         '([^?#]+)?' +        // path
-                         '(?:\\?([^#]*))?' +  // query
-                         '(?:#(.*))?' +       // fragment
-                         '$');
-
-/**
- * The index of each URI component in the return value of goog.uri.utils.split.
- * @enum {number}
- */
-enum _ComponentIndex {
-  SCHEME = 1,
-  USER_INFO,
-  DOMAIN,
-  PORT,
-  PATH,
-  QUERY_DATA,
-  FRAGMENT
-}
-
-/**
- * Splits a URI into its component parts.
- *
- * Each component can be accessed via the component indices; for example:
- * <pre>
- * goog.uri.utils.split(someStr)[goog.uri.utils.CompontentIndex.QUERY_DATA];
- * </pre>
- *
- * @param {string} uri The URI string to examine.
- * @return {!Array.<string|undefined>} Each component still URI-encoded.
- *     Each component that is present will contain the encoded value, whereas
- *     components that are not present will be undefined or empty, depending
- *     on the browser's regular expression implementation.  Never null, since
- *     arbitrary strings may still look like path names.
- */
-function _split(uri: string): List<string | any> {
-  return RegExpWrapper.firstMatch(_splitRe, uri);
-}
-
-/**
-  * Removes dot segments in given path component, as described in
-  * RFC 3986, section 5.2.4.
-  *
-  * @param {string} path A non-empty path component.
-  * @return {string} Path component with removed dot segments.
-  */
-function _removeDotSegments(path: string): string {
-  if (path == '/') return '/';
-
-  var leadingSlash = path[0] == '/' ? '/' : '';
-  var trailingSlash = path[path.length - 1] === '/' ? '/' : '';
-  var segments = path.split('/');
-
-  var out = [];
-  var up = 0;
-  for (var pos = 0; pos < segments.length; pos++) {
-    var segment = segments[pos];
-    switch (segment) {
-      case '':
-      case '.':
-        break;
-      case '..':
-        if (out.length > 0) {
-          ListWrapper.removeAt(out, out.length - 1);
-        } else {
-          up++;
-        }
-        break;
-      default:
-        out.push(segment);
-    }
-  }
-
-  if (leadingSlash == '') {
-    while (up-- > 0) {
-      ListWrapper.insert(out, 0, '..');
-    }
-
-    if (out.length === 0) out.push('.');
-  }
-
-  return leadingSlash + out.join('/') + trailingSlash;
-}
-
-/**
- * Takes an array of the parts from split and canonicalizes the path part
- * and then joins all the parts.
- * @param {Array.<string?>} parts
- * @return {string}
- */
-function _joinAndCanonicalizePath(parts: List<any>): string {
-  var path = parts[_ComponentIndex.PATH];
-  path = isBlank(path) ? '' : _removeDotSegments(path);
-  parts[_ComponentIndex.PATH] = path;
-
-  return _buildFromEncodedParts(parts[_ComponentIndex.SCHEME], parts[_ComponentIndex.USER_INFO],
-                                parts[_ComponentIndex.DOMAIN], parts[_ComponentIndex.PORT], path,
-                                parts[_ComponentIndex.QUERY_DATA], parts[_ComponentIndex.FRAGMENT]);
-}
-
-/**
- * Resolves a URL.
- * @param {string} base The URL acting as the base URL.
- * @param {string} to The URL to resolve.
- * @return {string}
- */
-function _resolveUrl(base: string, url: string): string {
-  var parts = _split(url);
-  var baseParts = _split(base);
-
-  if (isPresent(parts[_ComponentIndex.SCHEME])) {
-    return _joinAndCanonicalizePath(parts);
-  } else {
-    parts[_ComponentIndex.SCHEME] = baseParts[_ComponentIndex.SCHEME];
-  }
-
-  for (var i = _ComponentIndex.SCHEME; i <= _ComponentIndex.PORT; i++) {
-    if (isBlank(parts[i])) {
-      parts[i] = baseParts[i];
-    }
-  }
-
-  if (parts[_ComponentIndex.PATH][0] == '/') {
-    return _joinAndCanonicalizePath(parts);
-  }
-
-  var path = baseParts[_ComponentIndex.PATH];
-  if (isBlank(path)) path = '/';
-  var index = path.lastIndexOf('/');
-  path = path.substring(0, index + 1) + parts[_ComponentIndex.PATH];
-  parts[_ComponentIndex.PATH] = path;
-  return _joinAndCanonicalizePath(parts);
-}
diff --git a/modules/angular2/src/test_lib/benchmark_util.ts b/modules/angular2/src/test_lib/benchmark_util.ts
deleted file mode 100644
index 80e6ff5648c5..000000000000
--- a/modules/angular2/src/test_lib/benchmark_util.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-import {document, window} from 'angular2/src/facade/browser';
-import {NumberWrapper, BaseException, isBlank} from 'angular2/src/facade/lang';
-
-var DOM = new BrowserDomAdapter();
-
-export function getIntParameter(name: string) {
-  return NumberWrapper.parseInt(getStringParameter(name), 10);
-}
-
-export function getStringParameter(name: string) {
-  var els = DOM.querySelectorAll(document, `input[name="${name}"]`);
-  var value;
-  var el;
-
-  for (var i = 0; i < els.length; i++) {
-    el = els[i];
-    var type = DOM.type(el);
-    if ((type != 'radio' && type != 'checkbox') || DOM.getChecked(el)) {
-      value = DOM.getValue(el);
-      break;
-    }
-  }
-
-  if (isBlank(value)) {
-    throw new BaseException(`Could not find and input field with name ${name}`);
-  }
-
-  return value;
-}
-
-export function bindAction(selector: string, callback: Function) {
-  var el = DOM.querySelector(document, selector);
-  DOM.on(el, 'click', function(_) { callback(); });
-}
-
-export function microBenchmark(name, iterationCount, callback) {
-  var durationName = `${name}/${iterationCount}`;
-  window.console.time(durationName);
-  callback();
-  window.console.timeEnd(durationName);
-}
-
-export function windowProfile(name: string): void {
-  (<any>window.console).profile(name);
-}
-
-export function windowProfileEnd(name: string): void {
-  (<any>window.console).profileEnd(name);
-}
diff --git a/modules/angular2/src/test_lib/e2e_util.dart b/modules/angular2/src/test_lib/e2e_util.dart
deleted file mode 100644
index 7e5c3da28226..000000000000
--- a/modules/angular2/src/test_lib/e2e_util.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library angular2.e2e_util;
-
-// empty as this file is node.js specific and should not be transpiled to dart
diff --git a/modules/angular2/src/test_lib/e2e_util.ts b/modules/angular2/src/test_lib/e2e_util.ts
deleted file mode 100644
index 4a5d56d8e2c7..000000000000
--- a/modules/angular2/src/test_lib/e2e_util.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/// <reference path="../../typings/node/node.d.ts" />
-/// <reference path="../../typings/angular-protractor/angular-protractor.d.ts" />
-/// <reference path="../../typings/jasmine/jasmine"/>
-
-import webdriver = require('selenium-webdriver');
-
-export var browser: protractor.IBrowser = global['browser'];
-export var $: cssSelectorHelper = global['$'];
-
-export function clickAll(buttonSelectors) {
-  buttonSelectors.forEach(function(selector) { $(selector).click(); });
-}
-
-export function verifyNoBrowserErrors() {
-  // TODO(tbosch): Bug in ChromeDriver: Need to execute at least one command
-  // so that the browser logs can be read out!
-  browser.executeScript('1+1');
-  browser.manage().logs().get('browser').then(function(browserLog) {
-    var filteredLog = browserLog.filter(function(logEntry) {
-      if (logEntry.level.value >= webdriver.logging.Level.INFO.value) {
-        console.log('>> ' + logEntry.message);
-      }
-      return logEntry.level.value > webdriver.logging.Level.WARNING.value;
-    });
-    expect(filteredLog.length).toEqual(0);
-  });
-}
diff --git a/modules/angular2/src/test_lib/fake_async.dart b/modules/angular2/src/test_lib/fake_async.dart
deleted file mode 100644
index c7b05e0650e8..000000000000
--- a/modules/angular2/src/test_lib/fake_async.dart
+++ /dev/null
@@ -1,96 +0,0 @@
-library test_lib.fake_async;
-
-import 'dart:async' show runZoned, ZoneSpecification;
-import 'package:quiver/testing/async.dart' as quiver;
-import 'package:angular2/src/facade/lang.dart' show BaseException;
-
-const _u = const Object();
-
-quiver.FakeAsync _fakeAsync = null;
-
-/**
- * Wraps the [fn] to be executed in the fakeAsync zone:
- * - microtasks are manually executed by calling [flushMicrotasks],
- * - timers are synchronous, [tick] simulates the asynchronous passage of time.
- *
- * If there are any pending timers at the end of the function, an exception
- * will be thrown.
- *
- * Returns a `Function` that wraps [fn].
- */
-Function fakeAsync(Function fn) {
-  if (_fakeAsync != null) {
-    throw 'fakeAsync() calls can not be nested';
-  }
-
-  return ([a0 = _u, a1 = _u, a2 = _u, a3 = _u, a4 = _u, a5 = _u, a6 = _u,
-      a7 = _u, a8 = _u, a9 = _u]) {
-    // runZoned() to install a custom exception handler that re-throws
-    return runZoned(() {
-      return new quiver.FakeAsync().run((quiver.FakeAsync async) {
-        try {
-          _fakeAsync = async;
-          List args = [
-            a0,
-            a1,
-            a2,
-            a3,
-            a4,
-            a5,
-            a6,
-            a7,
-            a8,
-            a9
-          ].takeWhile((a) => a != _u).toList();
-          var res = Function.apply(fn, args);
-          _fakeAsync.flushMicrotasks();
-
-          if (async.periodicTimerCount > 0) {
-            throw new BaseException('${async.periodicTimerCount} periodic '
-                'timer(s) still in the queue.');
-          }
-
-          if (async.nonPeriodicTimerCount > 0) {
-            throw new BaseException('${async.nonPeriodicTimerCount} timer(s) '
-                'still in the queue.');
-          }
-
-          return res;
-        } finally {
-          _fakeAsync = null;
-        }
-      });
-    },
-        zoneSpecification: new ZoneSpecification(
-            handleUncaughtError: (self, parent, zone, error, stackTrace) =>
-                throw error));
-  };
-}
-
-/**
- * Simulates the asynchronous passage of [millis] milliseconds for the timers
- * in the fakeAsync zone.
- *
- * The microtasks queue is drained at the very start of this function and after
- * any timer callback has been executed.
- */
-void tick([int millis = 0]) {
-  _assertInFakeAsyncZone();
-  var duration = new Duration(milliseconds: millis);
-  _fakeAsync.elapse(duration);
-}
-
-/**
- * Flush any pending microtasks.
- */
-void flushMicrotasks() {
-  _assertInFakeAsyncZone();
-  _fakeAsync.flushMicrotasks();
-}
-
-void _assertInFakeAsyncZone() {
-  if (_fakeAsync == null) {
-    throw new BaseException('The code should be running in the fakeAsync zone '
-        'to call this function');
-  }
-}
diff --git a/modules/angular2/src/test_lib/fake_async.ts b/modules/angular2/src/test_lib/fake_async.ts
deleted file mode 100644
index 8f24389f8368..000000000000
--- a/modules/angular2/src/test_lib/fake_async.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-/// <reference path="../../typings/jasmine/jasmine.d.ts"/>
-
-import {BaseException, global} from 'angular2/src/facade/lang';
-import {ListWrapper} from 'angular2/src/facade/collection';
-import {NgZoneZone} from 'angular2/src/core/zone/ng_zone';
-
-var _scheduler;
-var _microtasks: List<Function> = [];
-var _pendingPeriodicTimers: List<number> = [];
-var _pendingTimers: List<number> = [];
-var _error = null;
-
-interface FakeAsyncZone extends NgZoneZone {
-  _inFakeAsyncZone: boolean;
-}
-
-/**
- * Wraps a function to be executed in the fakeAsync zone:
- * - microtasks are manually executed by calling `flushMicrotasks()`,
- * - timers are synchronous, `tick()` simulates the asynchronous passage of time.
- *
- * If there are any pending timers at the end of the function, an exception will be thrown.
- *
- * @param fn
- * @returns {Function} The function wrapped to be executed in the fakeAsync zone
- */
-export function fakeAsync(fn: Function): Function {
-  if ((<FakeAsyncZone>global.zone)._inFakeAsyncZone) {
-    throw new Error('fakeAsync() calls can not be nested');
-  }
-
-  var fakeAsyncZone = <FakeAsyncZone>global.zone.fork({
-    setTimeout: _setTimeout,
-    clearTimeout: _clearTimeout,
-    setInterval: _setInterval,
-    clearInterval: _clearInterval,
-    scheduleMicrotask: _scheduleMicrotask,
-    _inFakeAsyncZone: true
-  });
-
-  return function(... args) {
-    // TODO(tbosch): This class should already be part of the jasmine typings but it is not...
-    _scheduler = new (<any>jasmine).DelayedFunctionScheduler();
-    ListWrapper.clear(_microtasks);
-    ListWrapper.clear(_pendingPeriodicTimers);
-    ListWrapper.clear(_pendingTimers);
-
-    let res = fakeAsyncZone.run(() => {
-      let res = fn(... args);
-      flushMicrotasks();
-      return res;
-    });
-
-    if (_pendingPeriodicTimers.length > 0) {
-      throw new BaseException(
-          `${_pendingPeriodicTimers.length} periodic timer(s) still in the queue.`);
-    }
-
-    if (_pendingTimers.length > 0) {
-      throw new BaseException(`${_pendingTimers.length} timer(s) still in the queue.`);
-    }
-
-    _scheduler = null;
-    ListWrapper.clear(_microtasks);
-
-    return res;
-  }
-}
-
-/**
- * Simulates the asynchronous passage of time for the timers in the fakeAsync zone.
- *
- * The microtasks queue is drained at the very start of this function and after any timer callback
- * has been executed.
- *
- * @param {number} millis Number of millisecond, defaults to 0
- */
-export function tick(millis: number = 0): void {
-  _assertInFakeAsyncZone();
-  flushMicrotasks();
-  _scheduler.tick(millis);
-}
-
-/**
- * Flush any pending microtasks.
- */
-export function flushMicrotasks(): void {
-  _assertInFakeAsyncZone();
-  while (_microtasks.length > 0) {
-    var microtask = ListWrapper.removeAt(_microtasks, 0);
-    microtask();
-  }
-}
-
-function _setTimeout(fn: Function, delay: number, ... args): number {
-  var cb = _fnAndFlush(fn);
-  var id = _scheduler.scheduleFunction(cb, delay, args);
-  _pendingTimers.push(id);
-  _scheduler.scheduleFunction(_dequeueTimer(id), delay);
-  return id;
-}
-
-function _clearTimeout(id: number) {
-  _dequeueTimer(id);
-  return _scheduler.removeFunctionWithId(id);
-}
-
-function _setInterval(fn: Function, interval: number, ... args) {
-  var cb = _fnAndFlush(fn);
-  var id = _scheduler.scheduleFunction(cb, interval, args, true);
-  _pendingPeriodicTimers.push(id);
-  return id;
-}
-
-function _clearInterval(id: number) {
-  ListWrapper.remove(_pendingPeriodicTimers, id);
-  return _scheduler.removeFunctionWithId(id);
-}
-
-function _fnAndFlush(fn: Function): Function {
-  return (... args) => { fn.apply(global, args);
-  flushMicrotasks();
-}
-}
-
-function _scheduleMicrotask(microtask: Function): void {
-  _microtasks.push(microtask);
-}
-
-function _dequeueTimer(id: number): Function {
-  return function() { ListWrapper.remove(_pendingTimers, id); }
-}
-
-function _assertInFakeAsyncZone(): void {
-  if (!global.zone || !(<FakeAsyncZone>global.zone)._inFakeAsyncZone) {
-    throw new Error('The code should be running in the fakeAsync zone to call this function');
-  }
-}
diff --git a/modules/angular2/src/test_lib/lang_utils.dart b/modules/angular2/src/test_lib/lang_utils.dart
deleted file mode 100644
index 81a830bf097e..000000000000
--- a/modules/angular2/src/test_lib/lang_utils.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library test_lib.lang_utils;
-
-import 'dart:mirrors';
-
-Type getTypeOf(instance) => instance.runtimeType;
-
-dynamic instantiateType(Type type, [List params = const []]) {
-  var cm = reflectClass(type);
-  return cm.newInstance(new Symbol(''), params).reflectee;
-}
diff --git a/modules/angular2/src/test_lib/lang_utils.ts b/modules/angular2/src/test_lib/lang_utils.ts
deleted file mode 100644
index cb4fbfa1ee06..000000000000
--- a/modules/angular2/src/test_lib/lang_utils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export function getTypeOf(instance) {
-  return instance.constructor;
-}
-
-export function instantiateType(type: Function, params: Array<any> = []) {
-  var instance = Object.create(type.prototype);
-  instance.constructor.apply(instance, params);
-  return instance;
-}
diff --git a/modules/angular2/src/test_lib/perf_util.dart b/modules/angular2/src/test_lib/perf_util.dart
deleted file mode 100644
index 80f7b422f023..000000000000
--- a/modules/angular2/src/test_lib/perf_util.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library angular2.test_lib.perf_util;
-
-// empty as this file is node.js specific and should not be transpiled to dart
diff --git a/modules/angular2/src/test_lib/perf_util.ts b/modules/angular2/src/test_lib/perf_util.ts
deleted file mode 100644
index 1433322d8a6d..000000000000
--- a/modules/angular2/src/test_lib/perf_util.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-export {verifyNoBrowserErrors} from './e2e_util';
-
-var benchpress = global['benchpress'];
-var bind = benchpress.bind;
-var Options = benchpress.Options;
-
-export function runClickBenchmark(config) {
-  var buttons = config.buttons.map(function(selector) { return $(selector); });
-  config.work = function() { buttons.forEach(function(button) { button.click(); }); };
-  return runBenchmark(config);
-}
-
-export function runBenchmark(config) {
-  return getScaleFactor(browser.params.benchmark.scaling)
-      .then(function(scaleFactor) {
-        var description = {};
-        var urlParams = [];
-        if (config.params) {
-          config.params.forEach(function(param) {
-            var name = param.name;
-            var value = applyScaleFactor(param.value, scaleFactor, param.scale);
-            urlParams.push(name + '=' + value);
-            description[name] = value;
-          });
-        }
-        var url = encodeURI(config.url + '?' + urlParams.join('&'));
-        return browser.get(url).then(function() {
-          return global['benchpressRunner'].sample({
-            id: config.id,
-            execute: config.work,
-            prepare: config.prepare,
-            microMetrics: config.microMetrics,
-            bindings: [bind(Options.SAMPLE_DESCRIPTION).toValue(description)]
-          });
-        });
-      });
-}
-
-function getScaleFactor(possibleScalings) {
-  return browser.executeScript('return navigator.userAgent')
-      .then(function(userAgent: string) {
-        var scaleFactor = 1;
-        possibleScalings.forEach(function(entry) {
-          if (userAgent.match(entry.userAgent)) {
-            scaleFactor = entry.value;
-          }
-        });
-        return scaleFactor;
-      });
-}
-
-function applyScaleFactor(value, scaleFactor, method) {
-  if (method === 'log2') {
-    return value + Math.log(scaleFactor) / Math.LN2;
-  } else if (method === 'sqrt') {
-    return value * Math.sqrt(scaleFactor);
-  } else if (method === 'linear') {
-    return value * scaleFactor;
-  } else {
-    return value;
-  }
-}
diff --git a/modules/angular2/src/test_lib/shims_for_IE.dart b/modules/angular2/src/test_lib/shims_for_IE.dart
deleted file mode 100644
index a70b4cf71845..000000000000
--- a/modules/angular2/src/test_lib/shims_for_IE.dart
+++ /dev/null
@@ -1 +0,0 @@
-library angular2.test_lib.shims_for_ie;
diff --git a/modules/angular2/src/test_lib/shims_for_IE.ts b/modules/angular2/src/test_lib/shims_for_IE.ts
deleted file mode 100644
index adb0720ecab3..000000000000
--- a/modules/angular2/src/test_lib/shims_for_IE.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// function.name
-/*! @source http://stackoverflow.com/questions/6903762/function-name-not-supported-in-ie*/
-if (!Object.hasOwnProperty('name')) {
-  Object.defineProperty(Function.prototype, 'name', {
-    get: function() {
-      var name = this.toString().match(/^\s*function\s*(\S*)\s*\(/)[1];
-      // For better performance only parse once, and then cache the
-      // result through a new accessor for repeated access.
-      Object.defineProperty(this, 'name', {value: name});
-      return name;
-    }
-  });
-}
diff --git a/modules/angular2/src/test_lib/spies.dart b/modules/angular2/src/test_lib/spies.dart
deleted file mode 100644
index c1723247ea87..000000000000
--- a/modules/angular2/src/test_lib/spies.dart
+++ /dev/null
@@ -1,24 +0,0 @@
-library test_lib.spies;
-
-import 'package:angular2/change_detection.dart';
-import './test_lib.dart';
-
-@proxy
-class SpyChangeDetector extends SpyObject implements ChangeDetector {
-  noSuchMethod(m) => super.noSuchMethod(m);
-}
-
-@proxy
-class SpyProtoChangeDetector extends SpyObject implements ProtoChangeDetector {
-  noSuchMethod(m) => super.noSuchMethod(m);
-}
-
-@proxy
-class SpyPipe extends SpyObject implements Pipe {
-  noSuchMethod(m) => super.noSuchMethod(m);
-}
-
-@proxy
-class SpyPipeFactory extends SpyObject implements PipeFactory {
-  noSuchMethod(m) => super.noSuchMethod(m);
-}
\ No newline at end of file
diff --git a/modules/angular2/src/test_lib/spies.ts b/modules/angular2/src/test_lib/spies.ts
deleted file mode 100644
index b707ad3c635b..000000000000
--- a/modules/angular2/src/test_lib/spies.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {
-  ChangeDetector,
-  ProtoChangeDetector,
-  DynamicChangeDetector
-} from 'angular2/change_detection';
-import {BasePipe} from 'angular2/src/change_detection/pipes/pipe';
-import {SpyObject, proxy} from './test_lib';
-
-export class SpyChangeDetector extends SpyObject {
-  constructor() { super(DynamicChangeDetector); }
-}
-
-export class SpyProtoChangeDetector extends SpyObject {
-  constructor() { super(DynamicChangeDetector); }
-}
-
-export class SpyPipe extends SpyObject {
-  constructor() { super(BasePipe); }
-}
-
-export class SpyPipeFactory extends SpyObject {}
\ No newline at end of file
diff --git a/modules/angular2/src/test_lib/test_component_builder.ts b/modules/angular2/src/test_lib/test_component_builder.ts
deleted file mode 100644
index 12df20258e7d..000000000000
--- a/modules/angular2/src/test_lib/test_component_builder.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import {Injector, bind, Injectable} from 'angular2/di';
-
-import {Type, isPresent, BaseException, isBlank} from 'angular2/src/facade/lang';
-import {Promise} from 'angular2/src/facade/async';
-import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-import {ViewResolver} from 'angular2/src/core/compiler/view_resolver';
-import {AppView} from 'angular2/src/core/compiler/view';
-import {internalView} from 'angular2/src/core/compiler/view_ref';
-import {
-  DynamicComponentLoader,
-  ComponentRef
-} from 'angular2/src/core/compiler/dynamic_component_loader';
-
-import {el} from './utils';
-
-import {DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {DebugElement} from 'angular2/src/debug/debug_element';
-
-/**
- * @exportedAs angular2/test
- */
-export class RootTestComponent extends DebugElement {
-  _componentRef: ComponentRef;
-  _componentParentView: AppView;
-
-  constructor(componentRef: ComponentRef) {
-    super(internalView(componentRef.hostView), 0);
-
-    this._componentParentView = internalView(componentRef.hostView);
-    this._componentRef = componentRef;
-  }
-
-  detectChanges(): void {
-    this._componentParentView.changeDetector.detectChanges();
-    this._componentParentView.changeDetector.checkNoChanges();
-  }
-
-  destroy(): void { this._componentRef.dispose(); }
-}
-
-var _nextRootElementId = 0;
-
-/**
- * @exportedAs angular2/test
- *
- * Builds a RootTestComponent for use in component level tests.
- */
-@Injectable()
-export class TestComponentBuilder {
-  _injector: Injector;
-  _viewOverrides: Map<Type, View>;
-  _directiveOverrides: Map<Type, Map<Type, Type>>;
-  _templateOverrides: Map<Type, string>;
-
-  constructor(injector: Injector) {
-    this._injector = injector;
-    this._viewOverrides = new Map();
-    this._directiveOverrides = new Map();
-    this._templateOverrides = new Map();
-  }
-
-  _clone(): TestComponentBuilder {
-    var clone = new TestComponentBuilder(this._injector);
-    clone._viewOverrides = MapWrapper.clone(this._viewOverrides);
-    clone._directiveOverrides = MapWrapper.clone(this._directiveOverrides);
-    clone._templateOverrides = MapWrapper.clone(this._templateOverrides);
-    return clone;
-  }
-
-  /**
-   * Overrides only the html of a {@link Component}.
-   * All the other properties of the component's {@link View} are preserved.
-   *
-   * @param {Type} component
-   * @param {string} html
-   *
-   * @return {TestComponentBuilder}
-   */
-  overrideTemplate(componentType: Type, template: string): TestComponentBuilder {
-    var clone = this._clone();
-    clone._templateOverrides.set(componentType, template);
-    return clone;
-  }
-
-  /**
-   * Overrides a component's {@link View}.
-   *
-   * @param {Type} component
-   * @param {view} View
-   *
-   * @return {TestComponentBuilder}
-   */
-  overrideView(componentType: Type, view: View): TestComponentBuilder {
-    var clone = this._clone();
-    clone._viewOverrides.set(componentType, view);
-    return clone;
-  }
-
-  /**
-   * Overrides the directives from the component {@link View}.
-   *
-   * @param {Type} component
-   * @param {Type} from
-   * @param {Type} to
-   *
-   * @return {TestComponentBuilder}
-   */
-  overrideDirective(componentType: Type, from: Type, to: Type): TestComponentBuilder {
-    var clone = this._clone();
-    var overridesForComponent = clone._directiveOverrides.get(componentType);
-    if (!isPresent(overridesForComponent)) {
-      clone._directiveOverrides.set(componentType, new Map());
-      overridesForComponent = clone._directiveOverrides.get(componentType);
-    }
-    overridesForComponent.set(from, to);
-    return clone;
-  }
-
-  /**
-   * Builds and returns a RootTestComponent.
-   *
-   * @return {Promise<RootTestComponent>}
-   */
-  createAsync(rootComponentType: Type): Promise<RootTestComponent> {
-    var mockViewResolver = this._injector.get(ViewResolver);
-    MapWrapper.forEach(this._viewOverrides,
-                       (view, type) => { mockViewResolver.setView(type, view); });
-    MapWrapper.forEach(this._templateOverrides,
-                       (template, type) => { mockViewResolver.setInlineTemplate(type, template); });
-    MapWrapper.forEach(this._directiveOverrides, (overrides, component) => {
-      MapWrapper.forEach(overrides, (to, from) => {
-        mockViewResolver.overrideViewDirective(component, from, to);
-      });
-    });
-
-    var rootElId = `root${_nextRootElementId++}`;
-    var rootEl = el(`<div id="${rootElId}"></div>`);
-    var doc = this._injector.get(DOCUMENT_TOKEN);
-
-    // TODO(juliemr): can/should this be optional?
-    DOM.appendChild(doc.body, rootEl);
-
-
-    return this._injector.get(DynamicComponentLoader)
-        .loadAsRoot(rootComponentType, `#${rootElId}`, this._injector)
-        .then((componentRef) => { return new RootTestComponent(componentRef); });
-  }
-}
diff --git a/modules/angular2/src/test_lib/test_injector.ts b/modules/angular2/src/test_lib/test_injector.ts
deleted file mode 100644
index f67036bb89c1..000000000000
--- a/modules/angular2/src/test_lib/test_injector.ts
+++ /dev/null
@@ -1,185 +0,0 @@
-import {bind, Binding} from 'angular2/di';
-
-import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
-import {Reflector, reflector} from 'angular2/src/reflection/reflection';
-import {
-  Parser,
-  Lexer,
-  ChangeDetection,
-  DynamicChangeDetection,
-  PipeRegistry,
-  defaultPipeRegistry
-} from 'angular2/change_detection';
-import {ExceptionHandler} from 'angular2/src/core/exception_handler';
-import {ViewLoader} from 'angular2/src/render/dom/compiler/view_loader';
-import {ViewResolver} from 'angular2/src/core/compiler/view_resolver';
-import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
-import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
-import {ShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/shadow_dom_strategy';
-import {
-  EmulatedUnscopedShadowDomStrategy
-} from 'angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
-import {XHR} from 'angular2/src/render/xhr';
-import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {AppRootUrl} from 'angular2/src/services/app_root_url';
-import {StyleUrlResolver} from 'angular2/src/render/dom/compiler/style_url_resolver';
-import {StyleInliner} from 'angular2/src/render/dom/compiler/style_inliner';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {EventManager, DomEventsPlugin} from 'angular2/src/render/dom/events/event_manager';
-
-import {MockViewResolver} from 'angular2/src/mock/view_resolver_mock';
-import {MockXHR} from 'angular2/src/render/xhr_mock';
-import {MockLocationStrategy} from 'angular2/src/mock/mock_location_strategy';
-import {LocationStrategy} from 'angular2/src/router/location_strategy';
-import {MockNgZone} from 'angular2/src/mock/ng_zone_mock';
-
-import {TestComponentBuilder} from './test_component_builder';
-
-import {Injector} from 'angular2/di';
-
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {FunctionWrapper, Type} from 'angular2/src/facade/lang';
-
-import {AppViewPool, APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
-import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
-import {ELEMENT_PROBE_CONFIG} from 'angular2/debug';
-import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
-import {RenderCompiler, Renderer} from 'angular2/src/render/api';
-import {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
-import {DefaultDomCompiler} from 'angular2/src/render/dom/compiler/compiler';
-
-/**
- * Returns the root injector bindings.
- *
- * This must be kept in sync with the _rootBindings in application.js
- *
- * @returns {any[]}
- */
-function _getRootBindings() {
-  return [
-    bind(Reflector)
-        .toValue(reflector),
-  ];
-}
-
-/**
- * Returns the application injector bindings.
- *
- * This must be kept in sync with _injectorBindings() in application.js
- *
- * @returns {any[]}
- */
-function _getAppBindings() {
-  var appDoc;
-
-  // The document is only available in browser environment
-  try {
-    appDoc = DOM.defaultDoc();
-  } catch (e) {
-    appDoc = null;
-  }
-  return [
-    bind(DOCUMENT_TOKEN)
-        .toValue(appDoc),
-    bind(ShadowDomStrategy)
-        .toFactory((doc) => new EmulatedUnscopedShadowDomStrategy(doc.head), [DOCUMENT_TOKEN]),
-    DomRenderer,
-    DefaultDomCompiler,
-    bind(Renderer).toAlias(DomRenderer),
-    bind(RenderCompiler).toAlias(DefaultDomCompiler),
-    ProtoViewFactory,
-    AppViewPool,
-    AppViewManager,
-    AppViewManagerUtils,
-    ELEMENT_PROBE_CONFIG,
-    bind(APP_VIEW_POOL_CAPACITY).toValue(500),
-    Compiler,
-    CompilerCache,
-    bind(ViewResolver).toClass(MockViewResolver),
-    bind(PipeRegistry).toValue(defaultPipeRegistry),
-    bind(ChangeDetection).toClass(DynamicChangeDetection),
-    ViewLoader,
-    DynamicComponentLoader,
-    DirectiveResolver,
-    Parser,
-    Lexer,
-    ExceptionHandler,
-    bind(LocationStrategy).toClass(MockLocationStrategy),
-    bind(XHR).toClass(MockXHR),
-    ComponentUrlMapper,
-    UrlResolver,
-    AppRootUrl,
-    StyleUrlResolver,
-    StyleInliner,
-    TestComponentBuilder,
-    bind(NgZone).toClass(MockNgZone),
-    bind(EventManager)
-        .toFactory(
-            (zone) => {
-              var plugins = [
-                new DomEventsPlugin(),
-              ];
-              return new EventManager(plugins, zone);
-            },
-            [NgZone]),
-  ];
-}
-
-export function createTestInjector(bindings: List<Type | Binding | List<any>>): Injector {
-  var rootInjector = Injector.resolveAndCreate(_getRootBindings());
-  return rootInjector.resolveAndCreateChild(ListWrapper.concat(_getAppBindings(), bindings));
-}
-
-/**
- * Allows injecting dependencies in `beforeEach()` and `it()`.
- *
- * Example:
- *
- * ```
- * beforeEach(inject([Dependency, AClass], (dep, object) => {
- *   // some code that uses `dep` and `object`
- *   // ...
- * }));
- *
- * it('...', inject([AClass, AsyncTestCompleter], (object, async) => {
- *   object.doSomething().then(() => {
- *     expect(...);
- *     async.done();
- *   });
- * })
- * ```
- *
- * Notes:
- * - injecting an `AsyncTestCompleter` allow completing async tests - this is the equivalent of
- *   adding a `done` parameter in Jasmine,
- * - inject is currently a function because of some Traceur limitation the syntax should eventually
- *   becomes `it('...', @Inject (object: AClass, async: AsyncTestCompleter) => { ... });`
- *
- * @param {Array} tokens
- * @param {Function} fn
- * @return {FunctionWithParamTokens}
- * @exportedAs angular2/test
- */
-export function inject(tokens: List<any>, fn: Function): FunctionWithParamTokens {
-  return new FunctionWithParamTokens(tokens, fn);
-}
-
-export class FunctionWithParamTokens {
-  _tokens: List<any>;
-  _fn: Function;
-
-  constructor(tokens: List<any>, fn: Function) {
-    this._tokens = tokens;
-    this._fn = fn;
-  }
-
-  execute(injector: Injector): void {
-    var params = ListWrapper.map(this._tokens, (t) => injector.get(t));
-    FunctionWrapper.apply(this._fn, params);
-  }
-}
diff --git a/modules/angular2/src/test_lib/test_lib.dart b/modules/angular2/src/test_lib/test_lib.dart
deleted file mode 100644
index 9ff6092f72fa..000000000000
--- a/modules/angular2/src/test_lib/test_lib.dart
+++ /dev/null
@@ -1,239 +0,0 @@
-library test_lib.test_lib;
-
-import 'package:guinness/guinness.dart' as gns;
-export 'package:guinness/guinness.dart'
-    hide
-        Expect,
-        expect,
-        NotExpect,
-        beforeEach,
-        it,
-        iit,
-        xit,
-        SpyObject,
-        SpyFunction;
-import 'package:unittest/unittest.dart' hide expect;
-
-import 'dart:async';
-
-import 'package:angular2/src/dom/dom_adapter.dart' show DOM;
-
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-
-import 'package:angular2/src/di/binding.dart' show bind;
-import 'package:angular2/src/di/injector.dart' show Injector;
-import 'package:angular2/src/facade/collection.dart' show StringMapWrapper;
-
-import './test_injector.dart';
-export './test_injector.dart' show inject;
-
-bool IS_DARTIUM = true;
-
-List _testBindings = [];
-Injector _injector;
-bool _isCurrentTestAsync;
-bool _inIt = false;
-
-class AsyncTestCompleter {
-  final _completer = new Completer();
-
-  void done() {
-    _completer.complete();
-  }
-
-  Future get future => _completer.future;
-}
-
-void testSetup() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  // beforeEach configuration:
-  // - Priority 3: clear the bindings before each test,
-  // - Priority 2: collect the bindings before each test, see beforeEachBindings(),
-  // - Priority 1: create the test injector to be used in beforeEach() and it()
-
-  gns.beforeEach(() {
-    _testBindings.clear();
-  }, priority: 3);
-
-  var completerBinding = bind(AsyncTestCompleter).toFactory(() {
-    // Mark the test as async when an AsyncTestCompleter is injected in an it(),
-    if (!_inIt) throw 'AsyncTestCompleter can only be injected in an "it()"';
-    _isCurrentTestAsync = true;
-    return new AsyncTestCompleter();
-  });
-
-  gns.beforeEach(() {
-    _isCurrentTestAsync = false;
-    _testBindings.add(completerBinding);
-    _injector = createTestInjector(_testBindings);
-  }, priority: 1);
-}
-
-Expect expect(actual, [matcher]) {
-  final expect = new Expect(actual);
-  if (matcher != null) expect.to(matcher);
-  return expect;
-}
-
-const _u = const Object();
-
-class Expect extends gns.Expect {
-  Expect(actual) : super(actual);
-
-  NotExpect get not => new NotExpect(actual);
-
-  void toEqual(expected) => toHaveSameProps(expected);
-  void toThrowError([message = ""]) => toThrowWith(message: message);
-  void toBePromise() => _expect(actual is Future, equals(true));
-  void toImplement(expected) => toBeA(expected);
-  void toBeNaN() => _expect(double.NAN.compareTo(actual) == 0, equals(true));
-  void toHaveText(expected) => _expect(elementText(actual), expected);
-  void toHaveBeenCalledWith([a = _u, b = _u, c = _u, d = _u, e = _u, f = _u]) =>
-      _expect(_argsMatch(actual, a, b, c, d, e, f), true,
-          reason: 'method invoked with correct arguments');
-  Function get _expect => gns.guinness.matchers.expect;
-
-  // TODO(tbosch): move this hack into Guinness
-  _argsMatch(spyFn, [a0 = _u, a1 = _u, a2 = _u, a3 = _u, a4 = _u, a5 = _u]) {
-    var calls = spyFn.calls;
-    final toMatch = _takeDefined([a0, a1, a2, a3, a4, a5]);
-    if (calls.isEmpty) {
-      return false;
-    } else {
-      gns.SamePropsMatcher matcher = new gns.SamePropsMatcher(toMatch);
-      for (var i = 0; i < calls.length; i++) {
-        var call = calls[i];
-        // TODO: create a better error message, not just 'Expected: <true> Actual: <false>'.
-        // For hacking this is good:
-        // print(call.positionalArguments);
-        if (matcher.matches(call.positionalArguments, null)) {
-          return true;
-        }
-      }
-      return false;
-    }
-  }
-
-  List _takeDefined(List iter) => iter.takeWhile((_) => _ != _u).toList();
-}
-
-class NotExpect extends gns.NotExpect {
-  NotExpect(actual) : super(actual);
-
-  void toEqual(expected) => toHaveSameProps(expected);
-  void toBePromise() => _expect(actual is Future, equals(false));
-  void toBeNull() => _expect(actual == null, equals(false));
-  Function get _expect => gns.guinness.matchers.expect;
-}
-
-void beforeEach(fn) {
-  if (fn is! FunctionWithParamTokens) fn = new FunctionWithParamTokens([], fn);
-  gns.beforeEach(() {
-    fn.execute(_injector);
-  });
-}
-
-/**
- * Allows overriding default bindings defined in test_injector.js.
- *
- * The given function must return a list of DI bindings.
- *
- * Example:
- *
- *   beforeEachBindings(() => [
- *     bind(Compiler).toClass(MockCompiler),
- *     bind(SomeToken).toValue(myValue),
- *   ]);
- */
-void beforeEachBindings(Function fn) {
-  gns.beforeEach(() {
-    var bindings = fn();
-    if (bindings != null) _testBindings.addAll(bindings);
-  }, priority: 2);
-}
-
-void _it(gnsFn, name, fn) {
-  if (fn is! FunctionWithParamTokens) fn = new FunctionWithParamTokens([], fn);
-  gnsFn(name, () {
-    _inIt = true;
-    fn.execute(_injector);
-    _inIt = false;
-    if (_isCurrentTestAsync) return _injector.get(AsyncTestCompleter).future;
-  });
-}
-
-void it(name, fn) {
-  _it(gns.it, name, fn);
-}
-
-void iit(name, fn) {
-  _it(gns.iit, name, fn);
-}
-
-void xit(name, fn) {
-  _it(gns.xit, name, fn);
-}
-
-class SpyFunction extends gns.SpyFunction {
-  SpyFunction(String name) : super(name);
-
-  // TODO: vsavkin move to guinness
-  andReturn(value) {
-    return andCallFake(([a0, a1, a2, a3, a4, a5]) => value);
-  }
-}
-
-class SpyObject extends gns.SpyObject {
-  final Map<String, SpyFunction> _spyFuncs = {};
-
-  SpyObject([arg]) {}
-
-  SpyFunction spy(String funcName) =>
-      _spyFuncs.putIfAbsent(funcName, () => new SpyFunction(funcName));
-
-  static stub([object = null, config = null, overrides = null]) {
-    if (object is! SpyObject) {
-      overrides = config;
-      config = object;
-      object = new SpyObject();
-    }
-
-    var m = StringMapWrapper.merge(config, overrides);
-    StringMapWrapper.forEach(m, (value, key) {
-      object.spy(key).andReturn(value);
-    });
-    return object;
-  }
-}
-
-String elementText(n) {
-  hasNodes(n) {
-    var children = DOM.childNodes(n);
-    return children != null && children.length > 0;
-  }
-
-  if (n is Iterable) {
-    return n.map((nn) => elementText(nn)).join("");
-  }
-
-  if (DOM.isCommentNode(n)) {
-    return '';
-  }
-
-  if (DOM.isElementNode(n) && DOM.tagName(n) == 'CONTENT') {
-    return elementText(DOM.getDistributedNodes(n));
-  }
-
-  if (DOM.hasShadowRoot(n)) {
-    return elementText(DOM.childNodesAsList(DOM.getShadowRoot(n)));
-  }
-
-  if (hasNodes(n)) {
-    return elementText(DOM.childNodesAsList(n));
-  }
-
-  return DOM.getText(n);
-}
-
-bool isInInnerZone() => Zone.current['_innerZone'] == true;
diff --git a/modules/angular2/src/test_lib/test_lib.ts b/modules/angular2/src/test_lib/test_lib.ts
deleted file mode 100644
index c5e597a8b06c..000000000000
--- a/modules/angular2/src/test_lib/test_lib.ts
+++ /dev/null
@@ -1,360 +0,0 @@
-/// <reference path="../../typings/jasmine/jasmine.d.ts"/>
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {StringMapWrapper} from 'angular2/src/facade/collection';
-import {global} from 'angular2/src/facade/lang';
-import {NgZoneZone} from 'angular2/src/core/zone/ng_zone';
-
-import {bind} from 'angular2/di';
-
-import {createTestInjector, FunctionWithParamTokens, inject} from './test_injector';
-
-export {inject} from './test_injector';
-
-export function proxy() {}
-
-var _global: jasmine.GlobalPolluter = <any>(typeof window === 'undefined' ? global : window);
-
-export var afterEach = _global.afterEach;
-
-export interface NgMatchers extends jasmine.Matchers {
-  toBe(expected: any): boolean;
-  toEqual(expected: any): boolean;
-  toBePromise(): boolean;
-  toBeAnInstanceOf(expected: any): boolean;
-  toHaveText(expected: any): boolean;
-  toImplement(expected: any): boolean;
-  not: NgMatchers;
-}
-
-export var expect: (actual: any) => NgMatchers = <any>_global.expect;
-
-export var IS_DARTIUM = false;
-
-export class AsyncTestCompleter {
-  _done: Function;
-
-  constructor(done: Function) { this._done = done; }
-
-  done() { this._done(); }
-}
-
-var jsmBeforeEach = _global.beforeEach;
-var jsmDescribe = _global.describe;
-var jsmDDescribe = _global.fdescribe;
-var jsmXDescribe = _global.xdescribe;
-var jsmIt = _global.it;
-var jsmIIt = _global.fit;
-var jsmXIt = _global.xit;
-
-var runnerStack = [];
-var inIt = false;
-
-var testBindings;
-
-class BeforeEachRunner {
-  _fns: List<FunctionWithParamTokens>;
-  _parent: BeforeEachRunner;
-  constructor(parent: BeforeEachRunner) {
-    this._fns = [];
-    this._parent = parent;
-  }
-
-  beforeEach(fn: FunctionWithParamTokens) { this._fns.push(fn); }
-
-  run(injector) {
-    if (this._parent) this._parent.run(injector);
-    this._fns.forEach((fn) => fn.execute(injector));
-  }
-}
-
-// Reset the test bindings before each test
-jsmBeforeEach(() => { testBindings = []; });
-
-function _describe(jsmFn, ...args) {
-  var parentRunner = runnerStack.length === 0 ? null : runnerStack[runnerStack.length - 1];
-  var runner = new BeforeEachRunner(parentRunner);
-  runnerStack.push(runner);
-  var suite = jsmFn(...args);
-  runnerStack.pop();
-  return suite;
-}
-
-export function describe(...args) {
-  return _describe(jsmDescribe, ...args);
-}
-
-export function ddescribe(...args) {
-  return _describe(jsmDDescribe, ...args);
-}
-
-export function xdescribe(...args) {
-  return _describe(jsmXDescribe, ...args);
-}
-
-export function beforeEach(fn) {
-  if (runnerStack.length > 0) {
-    // Inside a describe block, beforeEach() uses a BeforeEachRunner
-    var runner = runnerStack[runnerStack.length - 1];
-    if (!(fn instanceof FunctionWithParamTokens)) {
-      fn = inject([], fn);
-    }
-    runner.beforeEach(fn);
-  } else {
-    // Top level beforeEach() are delegated to jasmine
-    jsmBeforeEach(fn);
-  }
-}
-
-/**
- * Allows overriding default bindings defined in test_injector.js.
- *
- * The given function must return a list of DI bindings.
- *
- * Example:
- *
- *   beforeEachBindings(() => [
- *     bind(Compiler).toClass(MockCompiler),
- *     bind(SomeToken).toValue(myValue),
- *   ]);
- */
-export function beforeEachBindings(fn) {
-  jsmBeforeEach(() => {
-    var bindings = fn();
-    if (!bindings) return;
-    testBindings = [...testBindings, ...bindings];
-  });
-}
-
-function _it(jsmFn, name, fn) {
-  var runner = runnerStack[runnerStack.length - 1];
-
-  jsmFn(name, function(done) {
-    var async = false;
-
-    var completerBinding =
-        bind(AsyncTestCompleter)
-            .toFactory(() => {
-              // Mark the test as async when an AsyncTestCompleter is injected in an it()
-              if (!inIt) throw new Error('AsyncTestCompleter can only be injected in an "it()"');
-              async = true;
-              return new AsyncTestCompleter(done);
-            });
-
-    var injector = createTestInjector([...testBindings, completerBinding]);
-    runner.run(injector);
-
-    if (!(fn instanceof FunctionWithParamTokens)) {
-      fn = inject([], fn);
-    }
-
-    inIt = true;
-    fn.execute(injector);
-    inIt = false;
-
-    if (!async) done();
-  });
-}
-
-export function it(name, fn) {
-  return _it(jsmIt, name, fn);
-}
-
-export function xit(name, fn) {
-  return _it(jsmXIt, name, fn);
-}
-
-export function iit(name, fn) {
-  return _it(jsmIIt, name, fn);
-}
-
-// Some Map polyfills don't polyfill Map.toString correctly, which
-// gives us bad error messages in tests.
-// The only way to do this in Jasmine is to monkey patch a method
-// to the object :-(
-Map.prototype['jasmineToString'] = function() {
-  var m = this;
-  if (!m) {
-    return '' + m;
-  }
-  var res = [];
-  m.forEach((v, k) => { res.push(`${k}:${v}`); });
-  return `{ ${res.join(',')} }`;
-};
-
-_global.beforeEach(function() {
-  jasmine.addMatchers({
-    // Custom handler for Map as Jasmine does not support it yet
-    toEqual: function(util, customEqualityTesters) {
-      return {
-        compare: function(actual, expected) {
-          return {pass: util.equals(actual, expected, [compareMap])};
-        }
-      };
-
-      function compareMap(actual, expected) {
-        if (actual instanceof Map) {
-          var pass = actual.size === expected.size;
-          if (pass) {
-            actual.forEach((v, k) => { pass = pass && util.equals(v, expected.get(k)); });
-          }
-          return pass;
-        } else {
-          return undefined;
-        }
-      }
-    },
-
-    toBePromise: function() {
-      return {
-        compare: function(actual, expectedClass) {
-          var pass = typeof actual === 'object' && typeof actual.then === 'function';
-          return {pass: pass, get message() { return 'Expected ' + actual + ' to be a promise'; }};
-        }
-      };
-    },
-
-    toBeAnInstanceOf: function() {
-      return {
-        compare: function(actual, expectedClass) {
-          var pass = typeof actual === 'object' && actual instanceof expectedClass;
-          return {
-            pass: pass,
-            get message() {
-              return 'Expected ' + actual + ' to be an instance of ' + expectedClass;
-            }
-          };
-        }
-      };
-    },
-
-    toHaveText: function() {
-      return {
-        compare: function(actual, expectedText) {
-          var actualText = elementText(actual);
-          return {
-            pass: actualText == expectedText,
-            get message() { return 'Expected ' + actualText + ' to be equal to ' + expectedText; }
-          };
-        }
-      };
-    },
-
-    toImplement: function() {
-      return {
-        compare: function(actualObject, expectedInterface) {
-          var objProps = Object.keys(actualObject.constructor.prototype);
-          var intProps = Object.keys(expectedInterface.prototype);
-
-          var missedMethods = [];
-          intProps.forEach((k) => {
-            if (!actualObject.constructor.prototype[k]) missedMethods.push(k);
-          });
-
-          return {
-            pass: missedMethods.length == 0,
-            get message() {
-              return 'Expected ' + actualObject + ' to have the following methods: ' +
-                     missedMethods.join(", ");
-            }
-          };
-        }
-      };
-    }
-  });
-});
-
-export interface GuinessCompatibleSpy extends jasmine.Spy {
-  /** By chaining the spy with and.returnValue, all calls to the function will return a specific
-   * value. */
-  andReturn(val: any): void;
-  /** By chaining the spy with and.callFake, all calls to the spy will delegate to the supplied
-   * function. */
-  andCallFake(fn: Function): GuinessCompatibleSpy;
-}
-
-export class SpyObject {
-  constructor(type = null) {
-    if (type) {
-      for (var prop in type.prototype) {
-        var m = null;
-        try {
-          m = type.prototype[prop];
-        } catch (e) {
-          // As we are creating spys for abstract classes,
-          // these classes might have getters that throw when they are accessed.
-          // As we are only auto creating spys for methods, this
-          // should not matter.
-        }
-        if (typeof m === 'function') {
-          this.spy(prop);
-        }
-      }
-    }
-  }
-  // Noop so that SpyObject has the smae interface as in Dart
-  noSuchMethod(args) {}
-
-  spy(name) {
-    if (!this[name]) {
-      this[name] = this._createGuinnessCompatibleSpy(name);
-    }
-    return this[name];
-  }
-
-  static stub(object = null, config = null, overrides = null) {
-    if (!(object instanceof SpyObject)) {
-      overrides = config;
-      config = object;
-      object = new SpyObject();
-    }
-
-    var m = StringMapWrapper.merge(config, overrides);
-    StringMapWrapper.forEach(m, (value, key) => { object.spy(key).andReturn(value); });
-    return object;
-  }
-
-  rttsAssert(value) { return true; }
-
-  _createGuinnessCompatibleSpy(name): GuinessCompatibleSpy {
-    var newSpy: GuinessCompatibleSpy = <any>jasmine.createSpy(name);
-    newSpy.andCallFake = <any>newSpy.and.callFake;
-    newSpy.andReturn = <any>newSpy.and.returnValue;
-    // return null by default to satisfy our rtts asserts
-    newSpy.and.returnValue(null);
-    return newSpy;
-  }
-}
-
-function elementText(n) {
-  var hasNodes = (n) => {
-    var children = DOM.childNodes(n);
-    return children && children.length > 0;
-  };
-
-  if (n instanceof Array) {
-    return n.map((nn) => elementText(nn)).join("");
-  }
-
-  if (DOM.isCommentNode(n)) {
-    return '';
-  }
-
-  if (DOM.isElementNode(n) && DOM.tagName(n) == 'CONTENT') {
-    return elementText(Array.prototype.slice.apply(DOM.getDistributedNodes(n)));
-  }
-
-  if (DOM.hasShadowRoot(n)) {
-    return elementText(DOM.childNodesAsList(DOM.getShadowRoot(n)));
-  }
-
-  if (hasNodes(n)) {
-    return elementText(DOM.childNodesAsList(n));
-  }
-
-  return DOM.getText(n);
-}
-
-export function isInInnerZone(): boolean {
-  return (<NgZoneZone>global.zone)._innerZone === true;
-}
diff --git a/modules/angular2/src/test_lib/utils.ts b/modules/angular2/src/test_lib/utils.ts
deleted file mode 100644
index 371920ee9b31..000000000000
--- a/modules/angular2/src/test_lib/utils.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {isPresent, isString, RegExpWrapper, StringWrapper, RegExp} from 'angular2/src/facade/lang';
-import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
-
-export class Log {
-  _result: List<any>;
-
-  constructor() { this._result = []; }
-
-  add(value): void { this._result.push(value); }
-
-  fn(value) {
-    return (a1 = null, a2 = null, a3 = null, a4 = null, a5 = null) => { this._result.push(value); }
-  }
-
-  result(): string { return ListWrapper.join(this._result, "; "); }
-}
-
-export function viewRootNodes(view): List</*node*/ any> {
-  return resolveInternalDomView(view.render).rootNodes;
-}
-
-export function queryView(view, selector: string): any {
-  var rootNodes = viewRootNodes(view);
-  for (var i = 0; i < rootNodes.length; ++i) {
-    var res = DOM.querySelector(rootNodes[i], selector);
-    if (isPresent(res)) {
-      return res;
-    }
-  }
-  return null;
-}
-
-export function dispatchEvent(element, eventType) {
-  DOM.dispatchEvent(element, DOM.createEvent(eventType));
-}
-
-export function el(html: string) {
-  return DOM.firstChild(DOM.content(DOM.createTemplate(html)));
-}
-
-var _RE_SPECIAL_CHARS =
-    ['-', '[', ']', '/', '{', '}', '\\', '(', ')', '*', '+', '?', '.', '^', '$', '|'];
-var _ESCAPE_RE = RegExpWrapper.create(`[\\${_RE_SPECIAL_CHARS.join('\\')}]`);
-export function containsRegexp(input: string): RegExp {
-  return RegExpWrapper.create(
-      StringWrapper.replaceAllMapped(input, _ESCAPE_RE, (match) => `\\${match[0]}`));
-}
-
-export function normalizeCSS(css: string): string {
-  css = StringWrapper.replaceAll(css, RegExpWrapper.create('\\s+'), ' ');
-  css = StringWrapper.replaceAll(css, RegExpWrapper.create(':\\s'), ':');
-  css = StringWrapper.replaceAll(css, RegExpWrapper.create("\\'"), '"');
-  css = StringWrapper.replaceAllMapped(css, RegExpWrapper.create('url\\(\\"(.+)\\"\\)'),
-                                       (match) => `url(${match[1]})`);
-  css = StringWrapper.replaceAllMapped(css, RegExpWrapper.create('\\[(.+)=([^"\\]]+)\\]'),
-                                       (match) => `[${match[1]}="${match[2]}"]`);
-  return css;
-}
-
-var _singleTagWhitelist = ['br', 'hr', 'input'];
-export function stringifyElement(el): string {
-  var result = '';
-  if (DOM.isElementNode(el)) {
-    var tagName = StringWrapper.toLowerCase(DOM.tagName(el));
-
-    // Opening tag
-    result += `<${tagName}`;
-
-    // Attributes in an ordered way
-    var attributeMap = DOM.attributeMap(el);
-    var keys = [];
-    MapWrapper.forEach(attributeMap, (v, k) => { keys.push(k); });
-    ListWrapper.sort(keys);
-    for (let i = 0; i < keys.length; i++) {
-      var key = keys[i];
-      var attValue = attributeMap.get(key);
-      if (!isString(attValue)) {
-        result += ` ${key}`;
-      } else {
-        result += ` ${key}="${attValue}"`;
-      }
-    }
-    result += '>';
-
-    // Children
-    var children = DOM.childNodes(DOM.templateAwareRoot(el));
-    for (let j = 0; j < children.length; j++) {
-      result += stringifyElement(children[j]);
-    }
-
-    // Closing tag
-    if (!ListWrapper.contains(_singleTagWhitelist, tagName)) {
-      result += `</${tagName}>`;
-    }
-  } else {
-    result += DOM.getText(el);
-  }
-
-  return result;
-}
diff --git a/modules/angular2/src/transform/bind_generator/generator.dart b/modules/angular2/src/transform/bind_generator/generator.dart
deleted file mode 100644
index ebc134a2facf..000000000000
--- a/modules/angular2/src/transform/bind_generator/generator.dart
+++ /dev/null
@@ -1,114 +0,0 @@
-library angular2.transform.bind_generator.generator;
-
-import 'dart:async';
-
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/ng_deps.dart';
-import 'package:angular2/src/transform/common/property_utils.dart' as prop;
-import 'package:barback/barback.dart';
-
-import 'visitor.dart';
-
-Future<String> createNgSettersAndGetters(
-    AssetReader reader, AssetId entryPoint) async {
-  NgDeps ngDeps = await NgDeps.parse(reader, entryPoint);
-
-  String code = ngDeps.code;
-  var setters = _generateSetters(_createPropertiesMap(ngDeps));
-  var getters = _generateGetters(_createEventsMap(ngDeps));
-
-  if (setters.isEmpty && getters.isEmpty) return code;
-  var out = new StringBuffer();
-  var codeInjectIdx = ngDeps.registeredTypes.last.registerMethod.end;
-  out.write(code.substring(0, codeInjectIdx));
-  if (setters.isNotEmpty) {
-    out.write('..registerSetters({${setters.join(', ')}})');
-  }
-  if (getters.isNotEmpty) {
-    out.write('..registerGetters({${getters.join(', ')}})');
-  }
-  out.write(code.substring(codeInjectIdx));
-  return '$out';
-}
-
-// TODO(kegluneq): De-dupe from template_compiler/generator.dart.
-
-/// Consumes the map generated by {@link _createPropertiesMap} to codegen
-/// setters.
-List<String> _generateSetters(Map<String, String> bindMap) {
-  var setters = [];
-  // TODO(kegluneq): Include types for receivers. See #886.
-  bindMap.forEach((setterName, type) {
-    if (!prop.isValid(setterName)) {
-      // TODO(kegluenq): Eagerly throw here once #1295 is addressed.
-      setters.add(prop.lazyInvalidSetter(setterName));
-    } else {
-      setters.add(''' '${prop.sanitize(setterName)}': '''
-          ''' (o, v) => o.$setterName = v ''');
-    }
-  });
-  return setters;
-}
-
-/// Collapses all `properties` in {@link ngDeps} into a map where the keys are
-/// the bind properties and the values are either the one and only type
-/// binding to that property or the empty string.
-Map<String, String> _createPropertiesMap(NgDeps ngDeps) {
-  var visitor = new ExtractNamedExpressionVisitor('properties');
-  var bindMap = {};
-  ngDeps.registeredTypes.forEach((RegisteredType t) {
-    visitor.bindConfig.clear();
-    t.annotations.accept(visitor);
-    visitor.bindConfig.forEach((String config) {
-      // See comments for `Directive` in annotations_impl/annotations.ts for
-      // details on how `properties` is specified.
-      var prop;
-      var idx = config.indexOf(':');
-      if (idx > 0) {
-        prop = config.substring(0, idx).trim();
-      } else {
-        prop = config;
-      }
-      if (bindMap.containsKey(prop)) {
-        bindMap[prop] = '';
-      } else {
-        bindMap[prop] = '${t.typeName}';
-      }
-    });
-  });
-  return bindMap;
-}
-
-/// Consumes the map generated by {@link _createEventsMap} to codegen getters.
-List<String> _generateGetters(Map<String, String> bindMap) {
-  var getters = [];
-  // TODO(kegluneq): Include types for receivers. See #886.
-  bindMap.forEach((getterName, eventName) {
-    if (!prop.isValid(eventName)) {
-      // TODO(kegluenq): Eagerly throw here once #1295 is addressed.
-      getters.add(prop.lazyInvalidGetter(eventName));
-    } else {
-      getters.add(''' '${prop.sanitize(eventName)}': (o) => o.$getterName''');
-    }
-  });
-  return getters;
-}
-
-/// Collapses all `events` in {@link ngDeps} into a map where the keys are
-/// the property names for the event emitters and the values are the event name.
-Map<String, String> _createEventsMap(NgDeps ngDeps) {
-  var visitor = new ExtractNamedExpressionVisitor('events');
-  var bindMap = {};
-  ngDeps.registeredTypes.forEach((RegisteredType t) {
-    visitor.bindConfig.clear();
-    t.annotations.accept(visitor);
-    visitor.bindConfig.forEach((String config) {
-      // See comments for `Directive` in annotations_impl/annotations.ts for
-      // details on how `events` is specified.
-      var parts = config.split(':').map((p) => p.trim()).toList();
-      bindMap[parts[0]] = parts.length > 1 ? parts[1] : parts[0];
-    });
-  });
-  return bindMap;
-}
-
diff --git a/modules/angular2/src/transform/bind_generator/transformer.dart b/modules/angular2/src/transform/bind_generator/transformer.dart
deleted file mode 100644
index 37cb687a9dcf..000000000000
--- a/modules/angular2/src/transform/bind_generator/transformer.dart
+++ /dev/null
@@ -1,43 +0,0 @@
-library angular2.transform.bind_generator.transformer;
-
-import 'dart:async';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/formatter.dart';
-import 'package:angular2/src/transform/common/logging.dart' as log;
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:barback/barback.dart';
-
-import 'generator.dart';
-
-/// Transformer responsible for reading .ng_deps.dart files and generating
-/// setters from the "annotations" information in the generated
-/// `registerType` calls.
-///
-/// These setters are registered in the same `setupReflection` function with
-/// the `registerType` calls.
-class BindGenerator extends Transformer {
-  final TransformerOptions options;
-
-  BindGenerator(this.options);
-
-  @override
-  bool isPrimary(AssetId id) => id.path.endsWith(DEPS_EXTENSION);
-
-  @override
-  Future apply(Transform transform) async {
-    log.init(transform);
-
-    try {
-      var id = transform.primaryInput.id;
-      var reader = new AssetReader.fromTransform(transform);
-      var transformedCode = await createNgSettersAndGetters(reader, id);
-      transform.addOutput(new Asset.fromString(
-          id, formatter.format(transformedCode, uri: id.path)));
-    } catch (ex, stackTrace) {
-      log.logger.error('Creating ng setters/getters failed.\n'
-          'Exception: $ex\n'
-          'Stack Trace: $stackTrace');
-    }
-  }
-}
diff --git a/modules/angular2/src/transform/bind_generator/visitor.dart b/modules/angular2/src/transform/bind_generator/visitor.dart
deleted file mode 100644
index ce05d619a53b..000000000000
--- a/modules/angular2/src/transform/bind_generator/visitor.dart
+++ /dev/null
@@ -1,30 +0,0 @@
-library angular2.transform.bind_generator.visitor;
-
-import 'package:analyzer/analyzer.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-
-/// Visitor responsible for crawling the "annotations" value in a
-/// `registerType` call and pulling out the properties of any "bind"
-/// values found.
-class ExtractNamedExpressionVisitor extends Object with
-    RecursiveAstVisitor<Object> {
-  final ConstantEvaluator _evaluator = new ConstantEvaluator();
-  final List<String> bindConfig = [];
-  final String nameToExtract;
-
-  ExtractNamedExpressionVisitor(this.nameToExtract);
-
-  @override
-  Object visitNamedExpression(NamedExpression node) {
-    if ('${node.name.label}' == nameToExtract) {
-      var evaluated = node.expression.accept(_evaluator);
-      if (evaluated is List) {
-        bindConfig.addAll(evaluated);
-      } else {
-        logger.error('`$nameToExtract` currently only supports List values');
-      }
-      return null;
-    }
-    return super.visitNamedExpression(node);
-  }
-}
diff --git a/modules/angular2/src/transform/common/annotation_matcher.dart b/modules/angular2/src/transform/common/annotation_matcher.dart
deleted file mode 100644
index dd8b6b21328c..000000000000
--- a/modules/angular2/src/transform/common/annotation_matcher.dart
+++ /dev/null
@@ -1,161 +0,0 @@
-library angular2.transform.common.annotation_matcher;
-
-import 'package:analyzer/src/generated/ast.dart';
-import 'package:barback/barback.dart' show AssetId;
-import 'package:code_transformers/assets.dart';
-import 'package:path/path.dart' as path;
-import 'logging.dart' show logger;
-
-/// [AnnotationDescriptor]s for the default angular annotations that can appear
-/// on a class. These classes are re-exported in many places so this covers all
-/// the possible libraries which could provide them.
-const INJECTABLES = const [
-  const AnnotationDescriptor(
-      'Injectable', 'package:angular2/src/di/annotations.dart', null),
-  const AnnotationDescriptor(
-      'Injectable', 'package:angular2/src/di/annotations_impl.dart', null),
-  const AnnotationDescriptor(
-      'Injectable', 'package:angular2/src/di/decorators.dart', null),
-  const AnnotationDescriptor('Injectable', 'package:angular2/di.dart', null),
-  const AnnotationDescriptor(
-      'Injectable', 'package:angular2/angular2.dart', null),
-];
-
-const DIRECTIVES = const [
-  const AnnotationDescriptor('Directive',
-      'package:angular2/src/core/annotations/annotations.dart', 'Injectable'),
-  const AnnotationDescriptor('Directive',
-      'package:angular2/src/core/annotations/decorators.dart', 'Injectable'),
-  const AnnotationDescriptor('Directive',
-      'package:angular2/src/core/annotations_impl/annotations.dart',
-      'Injectable'),
-  const AnnotationDescriptor(
-      'Directive', 'package:angular2/annotations.dart', 'Injectable'),
-  const AnnotationDescriptor(
-      'Directive', 'package:angular2/angular2.dart', 'Injectable'),
-  const AnnotationDescriptor(
-      'Directive', 'package:angular2/core.dart', 'Injectable'),
-];
-
-const COMPONENTS = const [
-  const AnnotationDescriptor('Component',
-      'package:angular2/src/core/annotations/annotations.dart', 'Directive'),
-  const AnnotationDescriptor('Component',
-      'package:angular2/src/core/annotations/decorators.dart', 'Directive'),
-  const AnnotationDescriptor('Component',
-      'package:angular2/src/core/annotations_impl/annotations.dart',
-      'Directive'),
-  const AnnotationDescriptor(
-      'Component', 'package:angular2/annotations.dart', 'Directive'),
-  const AnnotationDescriptor(
-      'Component', 'package:angular2/angular2.dart', 'Directive'),
-  const AnnotationDescriptor(
-      'Component', 'package:angular2/core.dart', 'Directive'),
-];
-
-const VIEWS = const [
-  const AnnotationDescriptor('View', 'package:angular2/view.dart', null),
-  const AnnotationDescriptor('View', 'package:angular2/angular2.dart', null),
-  const AnnotationDescriptor('View', 'package:angular2/core.dart', null),
-  const AnnotationDescriptor(
-      'View', 'package:angular2/src/core/annotations/view.dart', null),
-  const AnnotationDescriptor(
-      'View', 'package:angular2/src/core/annotations_impl/view.dart', null),
-];
-
-/// Checks if a given [Annotation] matches any of the given
-/// [AnnotationDescriptors].
-class AnnotationMatcher {
-  /// Always start out with the default angular [AnnotationDescriptor]s.
-  final List<AnnotationDescriptor> _annotations = []
-    ..addAll(VIEWS)
-    ..addAll(COMPONENTS)
-    ..addAll(INJECTABLES)
-    ..addAll(DIRECTIVES);
-
-  AnnotationMatcher();
-
-  /// Adds a new [AnnotationDescriptor].
-  void add(AnnotationDescriptor annotation) => _annotations.add(annotation);
-
-  /// Adds a number of [AnnotationDescriptor]s.
-  void addAll(Iterable<AnnotationDescriptor> annotations) =>
-      _annotations.addAll(annotations);
-
-  /// Returns the first [AnnotationDescriptor] that matches the given
-  /// [Annotation] node which appears in `assetId`.
-  AnnotationDescriptor firstMatch(Annotation annotation, AssetId assetId) =>
-      _annotations.firstWhere((a) => _matchAnnotation(annotation, a, assetId),
-          orElse: () => null);
-
-  /// Checks whether an [Annotation] node matches any [AnnotationDescriptor].
-  bool hasMatch(Annotation annotation, AssetId assetId) =>
-      _annotations.any((a) => _matchAnnotation(annotation, a, assetId));
-
-  /// Checks if an [Annotation] node implements [Injectable].
-  bool isInjectable(Annotation annotation, AssetId assetId) =>
-      _implements(firstMatch(annotation, assetId), INJECTABLES);
-
-  /// Checks if an [Annotation] node implements [Directive].
-  bool isDirective(Annotation annotation, AssetId assetId) =>
-      _implements(firstMatch(annotation, assetId), DIRECTIVES);
-
-  /// Checks if an [Annotation] node implements [Component].
-  bool isComponent(Annotation annotation, AssetId assetId) =>
-      _implements(firstMatch(annotation, assetId), COMPONENTS);
-
-  /// Checks if an [Annotation] node implements [View].
-  bool isView(Annotation annotation, AssetId assetId) =>
-      _implements(firstMatch(annotation, assetId), VIEWS);
-
-  /// Checks if `descriptor` extends or is any of the supplied `interfaces`.
-  bool _implements(
-      AnnotationDescriptor descriptor, List<AnnotationDescriptor> interfaces) {
-    if (descriptor == null) return false;
-    if (interfaces.contains(descriptor)) return true;
-    if (descriptor.superClass == null) return false;
-    var superClass = _annotations.firstWhere(
-        (a) => a.name == descriptor.superClass, orElse: () => null);
-    if (superClass == null) {
-      logger.warning(
-          'Missing `custom_annotation` entry for `${descriptor.superClass}`.');
-      return false;
-    }
-    return _implements(superClass, interfaces);
-  }
-
-  // Checks if an [Annotation] matches an [AnnotationDescriptor].
-  static bool _matchAnnotation(
-      Annotation annotation, AnnotationDescriptor descriptor, AssetId assetId) {
-    if (annotation.name.name != descriptor.name) return false;
-    return (annotation.root as CompilationUnit).directives
-        .where((d) => d is ImportDirective)
-        .any((ImportDirective i) {
-      var uriString = i.uri.stringValue;
-      if (uriString == descriptor.import) return true;
-      if (uriString.startsWith('package:') || uriString.startsWith('dart:')) {
-        return false;
-      }
-      return descriptor.assetId ==
-          uriToAssetId(assetId, uriString, logger, null);
-    });
-  }
-}
-
-/// String based description of an annotation class and its location.
-class AnnotationDescriptor {
-  /// The name of the class.
-  final String name;
-  /// A `package:` style import path to the file where the class is defined.
-  final String import;
-  /// The class that this class extends or implements. This is the only optional
-  /// field.
-  final String superClass;
-
-  AssetId get assetId => new AssetId(package, packagePath);
-  String get package => path.split(import.replaceFirst('package:', '')).first;
-  String get packagePath => path.joinAll(['lib']
-    ..addAll(path.split(import.replaceFirst('package:', ''))..removeAt(0)));
-
-  const AnnotationDescriptor(this.name, this.import, this.superClass);
-}
diff --git a/modules/angular2/src/transform/common/asset_reader.dart b/modules/angular2/src/transform/common/asset_reader.dart
deleted file mode 100644
index d3ec874c47c8..000000000000
--- a/modules/angular2/src/transform/common/asset_reader.dart
+++ /dev/null
@@ -1,28 +0,0 @@
-library angular2.transform.common.asset_reader;
-
-import 'dart:async';
-import 'dart:convert';
-
-import 'package:barback/barback.dart';
-
-/// A class that allows fetching code using {@link AssetId}s without all the
-/// additional baggage of a {@link Transform}.
-abstract class AssetReader {
-  Future<String> readAsString(AssetId id, {Encoding encoding});
-  Future<bool> hasInput(AssetId id);
-
-  /// Creates an {@link AssetReader} using the `transform`, which should be a
-  /// {@link Transform} or {@link AggregateTransform}.
-  factory AssetReader.fromTransform(dynamic transform) =>
-      new _TransformAssetReader(transform);
-}
-
-class _TransformAssetReader implements AssetReader {
-  final dynamic t;
-  _TransformAssetReader(this.t);
-
-  Future<String> readAsString(AssetId id, {Encoding encoding}) =>
-      t.readInputAsString(id, encoding: encoding);
-
-  Future<bool> hasInput(AssetId id) => t.hasInput(id);
-}
diff --git a/modules/angular2/src/transform/common/async_string_writer.dart b/modules/angular2/src/transform/common/async_string_writer.dart
deleted file mode 100644
index 14d562de55f6..000000000000
--- a/modules/angular2/src/transform/common/async_string_writer.dart
+++ /dev/null
@@ -1,75 +0,0 @@
-library angular2.transform.common.async_string_writer;
-
-import 'dart:async';
-import 'package:analyzer/src/generated/java_core.dart';
-
-/// [PrintWriter] implementation that allows asynchronous printing via
-/// [asyncPrint] and [asyncToString]. See those methods for details.
-class AsyncStringWriter extends PrintWriter {
-  /// All [Future]s we are currently waiting on.
-  final List<Future<String>> _toAwait = <Future<String>>[];
-  final List<StringBuffer> _bufs;
-  StringBuffer _curr;
-  int _asyncCount = 0;
-
-  AsyncStringWriter._(StringBuffer curr)
-      : _curr = curr,
-        _bufs = <StringBuffer>[curr];
-
-  AsyncStringWriter() : this._(new StringBuffer());
-
-  void print(x) {
-    _curr.write(x);
-  }
-
-  /// Adds the result of `futureText` to the writer at the current position
-  /// in the string being built. If using this method, you must use
-  /// [asyncToString] instead of [toString] to get the value of the writer or
-  /// your string may not appear as expected.
-  Future<String> asyncPrint(Future<String> futureText) {
-    _semaphoreIncrement();
-    var myBuf = new StringBuffer();
-    _bufs.add(myBuf);
-    _curr = new StringBuffer();
-    _bufs.add(_curr);
-
-    var toAwait = futureText.then((val) {
-      myBuf.write(val);
-      return val;
-    });
-    _toAwait.add(toAwait);
-    return toAwait.whenComplete(() {
-      _semaphoreDecrementAndCleanup();
-      _toAwait.remove(toAwait);
-    });
-  }
-
-  /// Waits for any values added via [asyncPrint] and returns the fully
-  /// built string.
-  Future<String> asyncToString() {
-    _semaphoreIncrement();
-    var bufLen = _bufs.length;
-    return Future.wait(_toAwait).then((_) {
-      return _bufs.sublist(0, bufLen).join('');
-    }).whenComplete(_semaphoreDecrementAndCleanup);
-  }
-
-  String toString() => _bufs.map((buf) => '$buf').join('(async gap)');
-
-  void _semaphoreIncrement() {
-    ++_asyncCount;
-  }
-
-  void _semaphoreDecrementAndCleanup() {
-    assert(_asyncCount > 0);
-
-    --_asyncCount;
-    if (_asyncCount == 0) {
-      _curr = _bufs[0];
-      for (var i = 1; i < _bufs.length; ++i) {
-        _curr.write('${_bufs[i]}');
-      }
-      _bufs.removeRange(1, _bufs.length);
-    }
-  }
-}
diff --git a/modules/angular2/src/transform/common/directive_metadata_reader.dart b/modules/angular2/src/transform/common/directive_metadata_reader.dart
deleted file mode 100644
index 071168ade78e..000000000000
--- a/modules/angular2/src/transform/common/directive_metadata_reader.dart
+++ /dev/null
@@ -1,281 +0,0 @@
-library angular2.transform.common.directive_metadata_reader;
-
-import 'package:analyzer/analyzer.dart';
-import 'package:analyzer/src/generated/element.dart';
-import 'package:angular2/src/render/api.dart';
-
-/// Reads [DirectiveMetadata] from the `node`. `node` is expected to be an
-/// instance of [Annotation], [NodeList<Annotation>], ListLiteral, or
-/// [InstanceCreationExpression].
-DirectiveMetadata readDirectiveMetadata(dynamic node) {
-  assert(node is Annotation ||
-      node is NodeList ||
-      node is InstanceCreationExpression ||
-      node is ListLiteral);
-  var visitor = new _DirectiveMetadataVisitor();
-  node.accept(visitor);
-  return visitor.meta;
-}
-
-num _getDirectiveType(String annotationName, Element element) {
-  var byNameMatch = -1;
-  // TODO(kegluneq): Detect subtypes & implementations of `Directive`s.
-  switch (annotationName) {
-    case 'Directive':
-      byNameMatch = DirectiveMetadata.DIRECTIVE_TYPE;
-      break;
-    case 'Component':
-      byNameMatch = DirectiveMetadata.COMPONENT_TYPE;
-      break;
-    default:
-      return -1;
-  }
-  if (element != null) {
-    var byResolvedAst = -1;
-    var libName = element.library.name;
-    // If we have resolved, ensure the library is correct.
-    if (libName == 'angular2.src.core.annotations.annotations' ||
-        libName == 'angular2.src.core.annotations_impl.annotations') {
-      byResolvedAst = byNameMatch;
-    }
-    // TODO(kegluneq): @keertip, can we expose this as a warning?
-    assert(byNameMatch == byResolvedAst);
-  }
-  return byNameMatch;
-}
-
-/// Visitor responsible for processing the `annotations` property of a
-/// [RegisterType] object and pulling out [DirectiveMetadata].
-class _DirectiveMetadataVisitor extends Object
-    with RecursiveAstVisitor<Object> {
-  bool get _hasMeta => _type != null;
-
-  // Annotation fields
-  num _type;
-  String _selector;
-  bool _compileChildren;
-  List<String> _properties;
-  Map<String, String> _host;
-  List<String> _readAttributes;
-  String _exportAs;
-  bool _callOnDestroy;
-  bool _callOnChange;
-  bool _callOnCheck;
-  bool _callOnInit;
-  bool _callOnAllChangesDone;
-  String _changeDetection;
-  List<String> _events;
-
-  final ConstantEvaluator _evaluator = new ConstantEvaluator();
-
-  void _initializeMetadata(num directiveType) {
-    assert(directiveType >= 0);
-
-    _type = directiveType;
-    _selector = '';
-    _compileChildren = true;
-    _properties = [];
-    _host = {};
-    _readAttributes = [];
-    _exportAs = null;
-    _callOnDestroy = false;
-    _callOnChange = false;
-    _callOnCheck = false;
-    _callOnInit = false;
-    _callOnAllChangesDone = false;
-    _changeDetection = null;
-    _events = [];
-  }
-
-  DirectiveMetadata get meta => DirectiveMetadata.create(
-      type: _type,
-      selector: _selector,
-      compileChildren: _compileChildren,
-      properties: _properties,
-      host: _host,
-      readAttributes: _readAttributes,
-      exportAs: _exportAs,
-      callOnDestroy: _callOnDestroy,
-      callOnChange: _callOnChange,
-      callOnCheck: _callOnCheck,
-      callOnInit: _callOnInit,
-      callOnAllChangesDone: _callOnAllChangesDone,
-      changeDetection: _changeDetection,
-      events: _events);
-
-  @override
-  Object visitAnnotation(Annotation node) {
-    var directiveType = _getDirectiveType('${node.name}', node.element);
-    if (directiveType >= 0) {
-      if (_hasMeta) {
-        throw new FormatException('Only one Directive is allowed per class. '
-            'Found "$node" but already processed "$meta".',
-            '$node' /* source */);
-      }
-      _initializeMetadata(directiveType);
-      super.visitAnnotation(node);
-    }
-    // Annotation we do not recognize - no need to visit.
-    return null;
-  }
-
-  @override
-  Object visitInstanceCreationExpression(InstanceCreationExpression node) {
-    var directiveType = _getDirectiveType(
-        '${node.constructorName.type.name}', node.staticElement);
-    if (directiveType >= 0) {
-      if (_hasMeta) {
-        throw new FormatException('Only one Directive is allowed per class. '
-            'Found "$node" but already processed "$meta".',
-            '$node' /* source */);
-      }
-      _initializeMetadata(directiveType);
-      super.visitInstanceCreationExpression(node);
-    }
-    // Annotation we do not recognize - no need to visit.
-    return null;
-  }
-
-  @override
-  Object visitNamedExpression(NamedExpression node) {
-    // TODO(kegluneq): Remove this limitation.
-    if (node.name is! Label || node.name.label is! SimpleIdentifier) {
-      throw new FormatException(
-          'Angular 2 currently only supports simple identifiers in directives.',
-          '$node' /* source */);
-    }
-    var keyString = '${node.name.label}';
-    switch (keyString) {
-      case 'selector':
-        _populateSelector(node.expression);
-        break;
-      case 'compileChildren':
-        _populateCompileChildren(node.expression);
-        break;
-      case 'properties':
-        _populateProperties(node.expression);
-        break;
-      case 'host':
-        _populateHost(node.expression);
-        break;
-      case 'lifecycle':
-        _populateLifecycle(node.expression);
-        break;
-      case 'exportAs':
-        _populateExportAs(node.expression);
-        break;
-      case 'changeDetection':
-        _populateChangeDetection(node.expression);
-        break;
-      case 'events':
-        _populateEvents(node.expression);
-        break;
-    }
-    return null;
-  }
-
-  String _expressionToString(Expression node, String nodeDescription) {
-    var value = node.accept(_evaluator);
-    if (value is! String) {
-      throw new FormatException('Angular 2 could not understand the value '
-          'in $nodeDescription.', '$node' /* source */);
-    }
-    return value;
-  }
-
-  void _populateSelector(Expression selectorValue) {
-    _checkMeta();
-    _selector = _expressionToString(selectorValue, 'Directive#selector');
-  }
-
-  void _checkMeta() {
-    if (!_hasMeta) {
-      throw new ArgumentError(
-          'Incorrect value passed to readDirectiveMetadata. '
-          'Expected types are Annotation, InstanceCreationExpression, '
-          'NodeList or ListLiteral');
-    }
-  }
-
-  void _populateCompileChildren(Expression compileChildrenValue) {
-    _checkMeta();
-    var evaluated = compileChildrenValue.accept(_evaluator);
-    if (evaluated is! bool) {
-      throw new FormatException(
-          'Angular 2 expects a bool but could not understand the value for '
-          'Directive#compileChildren.', '$compileChildrenValue' /* source */);
-    }
-    _compileChildren = evaluated;
-  }
-
-  /// Evaluates the [Map] represented by `expression` and adds all `key`,
-  /// `value` pairs to `map`. If `expression` does not evaluate to a [Map],
-  /// throws a descriptive [FormatException].
-  void _populateMap(Expression expression, Map map, String propertyName) {
-    var evaluated = expression.accept(_evaluator);
-    if (evaluated is! Map) {
-      throw new FormatException(
-          'Angular 2 expects a Map but could not understand the value for '
-          '$propertyName.', '$expression' /* source */);
-    }
-    evaluated.forEach((key, value) {
-      if (value != null) {
-        map[key] = '$value';
-      }
-    });
-  }
-
-  /// Evaluates the [List] represented by `expression` and adds all values,
-  /// to `list`. If `expression` does not evaluate to a [List], throws a
-  /// descriptive [FormatException].
-  void _populateList(Expression expression, List list, String propertyName) {
-    var evaluated = expression.accept(_evaluator);
-    if (evaluated is! List) {
-      throw new FormatException(
-          'Angular 2 expects a List but could not understand the value for '
-          '$propertyName.', '$expression' /* source */);
-    }
-    list.addAll(evaluated);
-  }
-
-  void _populateProperties(Expression propertiesValue) {
-    _checkMeta();
-    _populateList(propertiesValue, _properties, 'Directive#properties');
-  }
-
-  void _populateHost(Expression hostValue) {
-    _checkMeta();
-    _populateMap(hostValue, _host, 'Directive#host');
-  }
-
-  void _populateExportAs(Expression exportAsValue) {
-    _checkMeta();
-    _exportAs = _expressionToString(exportAsValue, 'Directive#exportAs');
-  }
-
-  void _populateLifecycle(Expression lifecycleValue) {
-    _checkMeta();
-    if (lifecycleValue is! ListLiteral) {
-      throw new FormatException(
-          'Angular 2 expects a List but could not understand the value for lifecycle. '
-          '$lifecycleValue');
-    }
-    ListLiteral l = lifecycleValue;
-    var lifecycleEvents = l.elements.map((s) => s.toSource());
-    _callOnDestroy = lifecycleEvents.contains("onDestroy");
-    _callOnChange = lifecycleEvents.contains("onChange");
-    _callOnCheck = lifecycleEvents.contains("onCheck");
-    _callOnInit = lifecycleEvents.contains("onInit");
-    _callOnAllChangesDone = lifecycleEvents.contains("onAllChangesDone");
-  }
-
-  void _populateEvents(Expression eventsValue) {
-    _checkMeta();
-    _populateList(eventsValue, _events, 'Directive#events');
-  }
-
-  void _populateChangeDetection(Expression value) {
-    _checkMeta();
-    _changeDetection = _expressionToString(value, 'Directive#changeDetection');
-  }
-}
diff --git a/modules/angular2/src/transform/common/formatter.dart b/modules/angular2/src/transform/common/formatter.dart
deleted file mode 100644
index ad96b1418a63..000000000000
--- a/modules/angular2/src/transform/common/formatter.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library angular2.transform.common.formatter;
-
-import 'package:dart_style/dart_style.dart';
-
-import 'logging.dart';
-
-DartFormatter _formatter = null;
-
-void init(DartFormatter formatter) {
-  if (_formatter != null) {
-    logger.info('Formatter is being overwritten.');
-  }
-  _formatter = formatter;
-}
-
-DartFormatter get formatter {
-  if (_formatter == null) {
-    logger.info('Formatter never initialized, using default formatter.');
-    _formatter = new DartFormatter();
-  }
-  return _formatter;
-}
diff --git a/modules/angular2/src/transform/common/logging.dart b/modules/angular2/src/transform/common/logging.dart
deleted file mode 100644
index 27e439e61e14..000000000000
--- a/modules/angular2/src/transform/common/logging.dart
+++ /dev/null
@@ -1,61 +0,0 @@
-library angular2.transform.common.logging;
-
-import 'dart:async';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/messages/build_logger.dart';
-import 'package:source_span/source_span.dart';
-
-BuildLogger _logger;
-
-/// Prepares {@link logger} for use throughout the transformer.
-void init(Transform t) {
-  _logger = new BuildLogger(t);
-}
-
-/// Sets {@link logger} directly. Used for testing - in general use {@link init}.
-void setLogger(BuildLogger logger) {
-  _logger = logger;
-}
-
-/// The logger the transformer should use for messaging.
-BuildLogger get logger {
-  if (_logger == null) {
-    _logger = new PrintLogger();
-  }
-  return _logger;
-}
-
-class PrintLogger implements BuildLogger {
-  @override
-  final String detailsUri = '';
-  @override
-  final bool convertErrorsToWarnings = false;
-
-  void _printWithPrefix(prefix, msg) => print('$prefix: $msg');
-  void info(msg, {AssetId asset, SourceSpan span}) =>
-      _printWithPrefix('INFO', msg);
-  void fine(msg, {AssetId asset, SourceSpan span}) =>
-      _printWithPrefix('FINE', msg);
-  void warning(msg, {AssetId asset, SourceSpan span}) =>
-      _printWithPrefix('WARN', msg);
-  void error(msg, {AssetId asset, SourceSpan span}) {
-    throw new PrintLoggerError(msg, asset, span);
-  }
-  Future writeOutput() => null;
-  Future addLogFilesFromAsset(AssetId id, [int nextNumber = 1]) => null;
-}
-
-class PrintLoggerError extends Error {
-  final String message;
-  final AssetId asset;
-  final SourceSpan span;
-
-  PrintLoggerError(this.message, this.asset, this.span);
-
-  @override
-  String toString() {
-    return 'Message: ${Error.safeToString(message)}, '
-        'Asset: ${Error.safeToString(asset)}, '
-        'Span: ${Error.safeToString(span)}.';
-  }
-}
diff --git a/modules/angular2/src/transform/common/mirror_mode.dart b/modules/angular2/src/transform/common/mirror_mode.dart
deleted file mode 100644
index 8f2c16a6b539..000000000000
--- a/modules/angular2/src/transform/common/mirror_mode.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library angular2.transform.common.mirror_mode;
-
-/// Modes for mirror use.
-/// `none` is the default value and signifies that mirror use should be
-/// removed.
-/// `debug` allows the use of mirrors and logs a notice whenever they are
-/// accessed.
-/// `verbose` allows the use of mirrors and logs a stack trace whenever they
-/// are accessed.
-enum MirrorMode { debug, none, verbose }
diff --git a/modules/angular2/src/transform/common/names.dart b/modules/angular2/src/transform/common/names.dart
deleted file mode 100644
index ebd83ccfb21e..000000000000
--- a/modules/angular2/src/transform/common/names.dart
+++ /dev/null
@@ -1,35 +0,0 @@
-library angular2.transform.common.names;
-
-const SETUP_METHOD_NAME = 'initReflector';
-const REFLECTOR_VAR_NAME = 'reflector';
-const TRANSFORM_DYNAMIC_MODE = 'transform_dynamic';
-const DEPS_EXTENSION = '.ng_deps.dart';
-const META_EXTENSION = '.ng_meta.json';
-const REFLECTION_CAPABILITIES_NAME = 'ReflectionCapabilities';
-const REGISTER_TYPE_METHOD_NAME = 'registerType';
-const REGISTER_GETTERS_METHOD_NAME = 'registerGetters';
-const REGISTER_SETTERS_METHOD_NAME = 'registerSetters';
-const REGISTER_METHODS_METHOD_NAME = 'registerMethods';
-
-/// Returns `uri` with its extension updated to [META_EXTENSION].
-String toMetaExtension(String uri) =>
-    _toExtension(uri, const [DEPS_EXTENSION, '.dart'], META_EXTENSION);
-
-/// Returns `uri` with its extension updated to [DEPS_EXTENSION].
-String toDepsExtension(String uri) =>
-    _toExtension(uri, const [META_EXTENSION, '.dart'], DEPS_EXTENSION);
-
-/// Returns `uri` with its extension updated to `toExtension` if its
-/// extension is currently in `fromExtension`.
-String _toExtension(
-    String uri, Iterable<String> fromExtensions, String toExtension) {
-  if (uri == null) return null;
-  if (uri.endsWith(toExtension)) return uri;
-  for (var extension in fromExtensions) {
-    if (uri.endsWith(extension)) {
-      return '${uri.substring(0, uri.length-extension.length)}'
-          '$toExtension';
-    }
-  }
-  return uri;
-}
diff --git a/modules/angular2/src/transform/common/ng_deps.dart b/modules/angular2/src/transform/common/ng_deps.dart
deleted file mode 100644
index afbf3e476116..000000000000
--- a/modules/angular2/src/transform/common/ng_deps.dart
+++ /dev/null
@@ -1,76 +0,0 @@
-library angular2.transform.common.parser;
-
-import 'dart:async';
-
-import 'package:analyzer/analyzer.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:barback/barback.dart';
-
-import 'registered_type.dart';
-
-export 'registered_type.dart';
-
-/// The contents of a `.ng_deps.dart` file.
-class NgDeps {
-  final String code;
-  final List<ImportDirective> imports = [];
-  final List<ExportDirective> exports = [];
-  final List<RegisteredType> registeredTypes = [];
-  LibraryDirective lib = null;
-  FunctionDeclaration setupMethod = null;
-
-  static _ParseNgDepsVisitor _visitor = new _ParseNgDepsVisitor();
-
-  /// Parses only the `.ng_deps.dart` file represented by `id`.
-  static Future<NgDeps> parse(AssetReader reader, AssetId id) async {
-    if (!(await reader.hasInput(id))) return null;
-    var ngDeps = new NgDeps(await reader.readAsString(id));
-    _visitor.ngDeps = ngDeps;
-    parseCompilationUnit(ngDeps.code, name: id.path).accept(_visitor);
-    return ngDeps;
-  }
-
-  NgDeps(this.code);
-}
-
-class _ParseNgDepsVisitor extends Object with RecursiveAstVisitor<Object> {
-  NgDeps ngDeps = null;
-
-  @override
-  Object visitLibraryDirective(LibraryDirective node) {
-    ngDeps.lib = node;
-    return null;
-  }
-
-  @override
-  Object visitImportDirective(ImportDirective node) {
-    ngDeps.imports.add(node);
-    return super.visitImportDirective(node);
-  }
-
-  @override
-  Object visitExportDirective(ExportDirective node) {
-    ngDeps.exports.add(node);
-    return super.visitExportDirective(node);
-  }
-
-  @override
-  Object visitFunctionDeclaration(FunctionDeclaration node) {
-    if ('${node.name}' == SETUP_METHOD_NAME) {
-      ngDeps.setupMethod = node;
-    }
-    return super.visitFunctionDeclaration(node);
-  }
-
-  @override
-  Object visitMethodInvocation(MethodInvocation node) {
-    var isRegisterType = '${node.methodName}' == REGISTER_TYPE_METHOD_NAME;
-
-    if (isRegisterType) {
-      ngDeps.registeredTypes.add(new RegisteredType.fromMethodInvocation(node));
-    }
-
-    return super.visitMethodInvocation(node);
-  }
-}
diff --git a/modules/angular2/src/transform/common/options.dart b/modules/angular2/src/transform/common/options.dart
deleted file mode 100644
index 5dacca27d36c..000000000000
--- a/modules/angular2/src/transform/common/options.dart
+++ /dev/null
@@ -1,76 +0,0 @@
-library angular2.transform.common.options;
-
-import 'annotation_matcher.dart';
-import 'mirror_mode.dart';
-
-/// See `optimizationPhases` below for an explanation.
-const DEFAULT_OPTIMIZATION_PHASES = 5;
-
-const CUSTOM_ANNOTATIONS_PARAM = 'custom_annotations';
-const ENTRY_POINT_PARAM = 'entry_points';
-const GENERATE_CHANGE_DETECTORS_PARAM = 'generate_change_detectors';
-const INIT_REFLECTOR_PARAM = 'init_reflector';
-const INLINE_VIEWS_PARAM = 'inline_views';
-const MIRROR_MODE_PARAM = 'mirror_mode';
-const OPTIMIZATION_PHASES_PARAM = 'optimization_phases';
-const REFLECTION_ENTRY_POINT_PARAM = 'reflection_entry_points';
-
-/// Provides information necessary to transform an Angular2 app.
-class TransformerOptions {
-  /// The path to the files where the application's calls to `bootstrap` are.
-  final List<String> entryPoints;
-
-  /// The paths to the files where the application's {@link ReflectionCapabilities}
-  /// are set.
-  final List<String> reflectionEntryPoints;
-
-  /// The `BarbackMode#name` we are running in.
-  final String modeName;
-
-  /// The [MirrorMode] to use for the transformation.
-  final MirrorMode mirrorMode;
-
-  /// Whether to generate calls to our generated `initReflector` code
-  final bool initReflector;
-
-  /// Whether to inline html/css urls into the View directive
-  final bool inlineViews;
-
-  /// The [AnnotationMatcher] which is used to identify angular annotations.
-  final AnnotationMatcher annotationMatcher;
-
-  /// Whether to create change detector classes for discovered `@View`s.
-  final bool generateChangeDetectors;
-
-  /// The number of phases to spend optimizing output size.
-  /// Each additional phase adds time to the transformation but may decrease
-  /// final output size. There is a limit beyond which this will no longer
-  /// decrease size, that is, setting this to 20 may not decrease size any
-  /// more than setting it to 10, but you will still pay an additional
-  /// penalty in transformation time.
-  /// The "correct" number of phases varies with the structure of the app.
-  final int optimizationPhases;
-
-  TransformerOptions._internal(this.entryPoints, this.reflectionEntryPoints,
-      this.modeName, this.mirrorMode, this.initReflector,
-      this.annotationMatcher, this.optimizationPhases,
-      this.generateChangeDetectors, this.inlineViews);
-
-  factory TransformerOptions(List<String> entryPoints,
-      {List<String> reflectionEntryPoints, String modeName: 'release',
-      MirrorMode mirrorMode: MirrorMode.none, bool initReflector: true,
-      List<AnnotationDescriptor> customAnnotationDescriptors: const [],
-      int optimizationPhases: DEFAULT_OPTIMIZATION_PHASES,
-      bool inlineViews: true,
-      bool generateChangeDetectors: true}) {
-    if (reflectionEntryPoints == null || reflectionEntryPoints.isEmpty) {
-      reflectionEntryPoints = entryPoints;
-    }
-    var annotationMatcher = new AnnotationMatcher()
-      ..addAll(customAnnotationDescriptors);
-    optimizationPhases = optimizationPhases.isNegative ? 0 : optimizationPhases;
-    return new TransformerOptions._internal(entryPoints, reflectionEntryPoints,
-        modeName, mirrorMode, initReflector, annotationMatcher,
-        optimizationPhases, generateChangeDetectors, inlineViews);
-  }
-}
diff --git a/modules/angular2/src/transform/common/options_reader.dart b/modules/angular2/src/transform/common/options_reader.dart
deleted file mode 100644
index fea17511a1dd..000000000000
--- a/modules/angular2/src/transform/common/options_reader.dart
+++ /dev/null
@@ -1,128 +0,0 @@
-library angular2.transform.common.options_reader;
-
-import 'package:barback/barback.dart';
-import 'annotation_matcher.dart';
-import 'mirror_mode.dart';
-import 'options.dart';
-
-TransformerOptions parseBarbackSettings(BarbackSettings settings) {
-  var config = settings.configuration;
-  var entryPoints = _readFileList(config, ENTRY_POINT_PARAM);
-  var reflectionEntryPoints =
-      _readFileList(config, REFLECTION_ENTRY_POINT_PARAM);
-  var initReflector =
-      _readBool(config, INIT_REFLECTOR_PARAM, defaultValue: true);
-  var inlineViews = _readBool(config, INLINE_VIEWS_PARAM, defaultValue: true);
-  var generateChangeDetectors =
-      _readBool(config, GENERATE_CHANGE_DETECTORS_PARAM, defaultValue: true);
-  String mirrorModeVal =
-      config.containsKey(MIRROR_MODE_PARAM) ? config[MIRROR_MODE_PARAM] : '';
-  var mirrorMode = MirrorMode.none;
-  switch (mirrorModeVal) {
-    case 'debug':
-      mirrorMode = MirrorMode.debug;
-      break;
-    case 'verbose':
-      mirrorMode = MirrorMode.verbose;
-      break;
-    default:
-      mirrorMode = MirrorMode.none;
-      break;
-  }
-  var optimizationPhases = _readInt(config, OPTIMIZATION_PHASES_PARAM,
-      defaultValue: DEFAULT_OPTIMIZATION_PHASES);
-  return new TransformerOptions(entryPoints,
-      reflectionEntryPoints: reflectionEntryPoints,
-      modeName: settings.mode.name,
-      mirrorMode: mirrorMode,
-      initReflector: initReflector,
-      inlineViews: inlineViews,
-      customAnnotationDescriptors: _readCustomAnnotations(config),
-      optimizationPhases: optimizationPhases,
-      generateChangeDetectors: generateChangeDetectors);
-}
-
-bool _readBool(Map config, String paramName, {bool defaultValue}) {
-  return config.containsKey(paramName)
-      ? config[paramName] != false
-      : defaultValue;
-}
-
-/// Cribbed from the polymer project.
-/// {@link https://github.com/dart-lang/polymer-dart}
-List<String> _readFileList(Map config, String paramName) {
-  var value = config[paramName];
-  if (value == null) return null;
-  var files = [];
-  bool error = false;
-  if (value is List) {
-    files = value;
-    error = value.any((e) => e is! String);
-  } else if (value is String) {
-    files = [value];
-    error = false;
-  } else {
-    error = true;
-  }
-  if (error) {
-    print('Invalid value for "$paramName" in the Angular 2 transformer.');
-  }
-  return files;
-}
-
-int _readInt(Map config, String paramName, {int defaultValue: null}) {
-  if (!config.containsKey(paramName)) return defaultValue;
-  var value = config[paramName];
-  if (value is String) {
-    value = int.parse(value);
-  }
-  if (value is! int) {
-    throw new ArgumentError.value(value, paramName, 'Expected an integer');
-  }
-  return value;
-}
-
-/// Parse the [CUSTOM_ANNOTATIONS_PARAM] options out of the transformer into
-/// [AnnotationDescriptor]s.
-List<AnnotationDescriptor> _readCustomAnnotations(Map config) {
-  var descriptors = [];
-  var customAnnotations = config[CUSTOM_ANNOTATIONS_PARAM];
-  if (customAnnotations == null) return descriptors;
-  var error = false;
-  if (customAnnotations is! List) {
-    error = true;
-  } else {
-    for (var description in customAnnotations) {
-      if (description is! Map) {
-        error = true;
-        continue;
-      }
-      var name = description['name'];
-      var import = description['import'];
-      var superClass = description['superClass'];
-      if (name == null || import == null || superClass == null) {
-        error = true;
-        continue;
-      }
-      descriptors.add(new AnnotationDescriptor(name, import, superClass));
-    }
-  }
-  if (error) {
-    print(CUSTOM_ANNOTATIONS_ERROR);
-  }
-  return descriptors;
-}
-
-const CUSTOM_ANNOTATIONS_ERROR = '''
-  Invalid value for $CUSTOM_ANNOTATIONS_PARAM in the Angular2 transformer.
-  Expected something that looks like the following:
-
-  transformers:
-  - angular2:
-      custom_annotations:
-        - name: MyAnnotation
-          import: 'package:my_package/my_annotation.dart'
-          superClass: Component
-        - name: ...
-          import: ...
-          superClass: ...''';
diff --git a/modules/angular2/src/transform/common/property_utils.dart b/modules/angular2/src/transform/common/property_utils.dart
deleted file mode 100644
index ce5f44998a42..000000000000
--- a/modules/angular2/src/transform/common/property_utils.dart
+++ /dev/null
@@ -1,33 +0,0 @@
-library angular2.transform.common.property_utils;
-
-import 'package:analyzer/src/generated/scanner.dart' show Keyword;
-
-/// Whether `name` is a valid property name.
-bool isValid(String name) => !Keyword.keywords.containsKey(name);
-
-/// Prepares `name` to be emitted inside a string.
-String sanitize(String name) => name.replaceAll('\$', '\\\$');
-
-/// Get a string usable as a lazy invalid setter, that is, one which will
-/// `throw` immediately upon use.
-String lazyInvalidSetter(String setterName) {
-  var sName = sanitize(setterName);
-  return ''' '$sName': (o, v) => '''
-      ''' throw 'Invalid setter name "$sName" is a Dart keyword.' ''';
-}
-
-/// Get a string usable as a lazy invalid getter, that is, one which will
-/// `throw` immediately upon use.
-String lazyInvalidGetter(String getterName) {
-  var sName = sanitize(getterName);
-  return ''' '$sName': (o) => '''
-      ''' throw 'Invalid getter name "$sName" is a Dart keyword.' ''';
-}
-
-/// Get a string usable as a lazy invalid method, that is, one which will
-/// `throw` immediately upon use.
-String lazyInvalidMethod(String methodName) {
-  var sName = sanitize(methodName);
-  return ''' '$sName': (o, args) => '''
-      ''' throw 'Invalid method name "$sName" is a Dart keyword.' ''';
-}
diff --git a/modules/angular2/src/transform/common/registered_type.dart b/modules/angular2/src/transform/common/registered_type.dart
deleted file mode 100644
index f401c214958d..000000000000
--- a/modules/angular2/src/transform/common/registered_type.dart
+++ /dev/null
@@ -1,88 +0,0 @@
-library angular2.transform.common.registered_type;
-
-import 'package:analyzer/analyzer.dart';
-import 'package:angular2/src/render/api.dart';
-import 'package:angular2/src/transform/common/directive_metadata_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-import 'package:angular2/src/transform/common/names.dart';
-
-/// A call to `Reflector#registerType` generated by `DirectiveProcessor`.
-class RegisteredType {
-  /// The type registered by this call.
-  final Identifier typeName;
-  /// The actual call to `Reflector#registerType`.
-  final MethodInvocation registerMethod;
-  /// The factory method registered.
-  final Expression factoryFn;
-  /// The parameters registered.
-  final Expression parameters;
-  /// The annotations registered.
-  final Expression annotations;
-
-  DirectiveMetadata _directiveMetadata = null;
-
-  RegisteredType._(this.typeName, this.registerMethod, this.factoryFn,
-      this.parameters, this.annotations);
-
-  /// Creates a {@link RegisteredType} given a {@link MethodInvocation} node representing
-  /// a call to `registerType`.
-  factory RegisteredType.fromMethodInvocation(MethodInvocation registerMethod) {
-    var visitor = new _ParseRegisterTypeVisitor();
-    registerMethod.accept(visitor);
-    return new RegisteredType._(visitor.typeName, registerMethod,
-        visitor.factoryFn, visitor.parameters, visitor.annotations);
-  }
-
-  DirectiveMetadata get directiveMetadata {
-    if (_directiveMetadata == null) {
-      try {
-        _directiveMetadata = readDirectiveMetadata(annotations);
-        if (_directiveMetadata != null) {
-          _directiveMetadata.id = '$typeName';
-        }
-      } on FormatException catch (ex) {
-        logger.error(ex.message);
-      }
-    }
-    return _directiveMetadata;
-  }
-}
-
-class _ParseRegisterTypeVisitor extends Object
-    with RecursiveAstVisitor<Object> {
-  Identifier typeName;
-  Expression factoryFn;
-  Expression parameters;
-  Expression annotations;
-
-  @override
-  Object visitMethodInvocation(MethodInvocation node) {
-    assert('${node.methodName}' == REGISTER_TYPE_METHOD_NAME);
-
-    // The first argument to a `registerType` call is the type.
-    typeName = node.argumentList.arguments[0] is Identifier
-        ? node.argumentList.arguments[0]
-        : null;
-    return super.visitMethodInvocation(node);
-  }
-
-  @override
-  Object visitMapLiteralEntry(MapLiteralEntry node) {
-    if (node.key is StringLiteral) {
-      var key = stringLiteralToString(node.key);
-      switch (key) {
-        case 'annotations':
-          annotations = node.value;
-          break;
-        case 'factory':
-          factoryFn = node.value;
-          break;
-        case 'parameters':
-          parameters = node.value;
-          break;
-      }
-    }
-    // Do not need to descend any further.
-    return null;
-  }
-}
diff --git a/modules/angular2/src/transform/common/xhr_impl.dart b/modules/angular2/src/transform/common/xhr_impl.dart
deleted file mode 100644
index a930181aa011..000000000000
--- a/modules/angular2/src/transform/common/xhr_impl.dart
+++ /dev/null
@@ -1,31 +0,0 @@
-library angular2.transform.template_compiler.xhr_impl;
-
-import 'dart:async';
-import 'package:angular2/src/render/xhr.dart' show XHR;
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/assets.dart';
-
-class XhrImpl implements XHR {
-  final AssetReader _reader;
-  final AssetId _entryPoint;
-
-  XhrImpl(this._reader, this._entryPoint);
-
-  Future<String> get(String url) async {
-    var assetId = uriToAssetId(_entryPoint, url, logger, null /* span */,
-        errorOnAbsolute: false);
-    if (assetId == null) {
-      logger.error(
-          'Uri $url not supported from $_entryPoint, could not build AssetId');
-      return null;
-    }
-    var templateExists = await _reader.hasInput(assetId);
-    if (!templateExists) {
-      logger.error('Could not read asset at uri $url from $_entryPoint');
-      return null;
-    }
-    return await _reader.readAsString(assetId);
-  }
-}
diff --git a/modules/angular2/src/transform/di_transformer.dart b/modules/angular2/src/transform/di_transformer.dart
deleted file mode 100644
index ae432c5bd378..000000000000
--- a/modules/angular2/src/transform/di_transformer.dart
+++ /dev/null
@@ -1,36 +0,0 @@
-library angular2.src.transform.di_transformer;
-
-import 'package:barback/barback.dart';
-import 'package:dart_style/dart_style.dart';
-
-import 'directive_linker/transformer.dart';
-import 'directive_processor/transformer.dart';
-import 'reflection_remover/transformer.dart';
-import 'common/formatter.dart' as formatter;
-import 'common/options.dart';
-import 'common/options_reader.dart';
-
-export 'common/options.dart';
-
-/// Removes the mirror-based initialization logic and replaces it with static
-/// logic.
-class DiTransformerGroup extends TransformerGroup {
-  DiTransformerGroup._(phases) : super(phases) {
-    formatter.init(new DartFormatter());
-  }
-
-  factory DiTransformerGroup(TransformerOptions options) {
-    var phases = [
-      [new ReflectionRemover(options)],
-      [new DirectiveProcessor(null)]
-    ];
-    phases.addAll(new List.generate(
-        options.optimizationPhases, (_) => [new EmptyNgDepsRemover()]));
-    phases.add([new DirectiveLinker()]);
-    return new DiTransformerGroup._(phases);
-  }
-
-  factory DiTransformerGroup.asPlugin(BarbackSettings settings) {
-    return new DiTransformerGroup(parseBarbackSettings(settings));
-  }
-}
diff --git a/modules/angular2/src/transform/directive_linker/linker.dart b/modules/angular2/src/transform/directive_linker/linker.dart
deleted file mode 100644
index e5341e1a0499..000000000000
--- a/modules/angular2/src/transform/directive_linker/linker.dart
+++ /dev/null
@@ -1,125 +0,0 @@
-library angular2.transform.directive_linker.linker;
-
-import 'dart:async';
-
-import 'package:analyzer/analyzer.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:angular2/src/transform/common/ng_deps.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/assets.dart';
-import 'package:path/path.dart' as path;
-
-/// Checks the `.ng_deps.dart` file represented by `entryPoint` and
-/// determines whether it is necessary to the functioning of the Angular 2
-/// Dart app.
-///
-/// An `.ng_deps.dart` file is not necessary if:
-/// 1. It does not register any `@Injectable` types with the system.
-/// 2. It does not import any libraries whose `.ng_deps.dart` files register
-///    any `@Injectable` types with the system.
-///
-/// Since `@Directive` and `@Component` inherit from `@Injectable`, we know
-/// we will not miss processing any classes annotated with those tags.
-Future<bool> isNecessary(AssetReader reader, AssetId entryPoint) async {
-  NgDeps ngDeps = await NgDeps.parse(reader, entryPoint);
-
-  if (ngDeps.registeredTypes.isNotEmpty) return true;
-
-  // We do not register any @Injectables, do we call any dependencies?
-  var linkedDepsMap =
-      await _processNgImports(reader, entryPoint, _getSortedDeps(ngDeps));
-  return linkedDepsMap.isNotEmpty;
-}
-
-/// Modifies the `.ng_deps.dart` file represented by `entryPoint` to call its
-/// dependencies associated `initReflector` methods.
-///
-/// For example, if entry_point.ng_deps.dart imports dependency.dart, this
-/// will check if dependency.ng_deps.dart exists. If it does, we add:
-///
-/// ```
-/// import 'dependency.ng_deps.dart' as i0;
-/// ...
-/// void setupReflection(reflector) {
-///   ...
-///   i0.initReflector(reflector);
-/// }
-/// ```
-Future<String> linkNgDeps(AssetReader reader, AssetId entryPoint) async {
-  NgDeps ngDeps = await NgDeps.parse(reader, entryPoint);
-
-  if (ngDeps == null) return null;
-
-  var allDeps = _getSortedDeps(ngDeps);
-  var linkedDepsMap = await _processNgImports(reader, entryPoint, allDeps);
-
-  if (linkedDepsMap.isEmpty) {
-    // We are not calling `initReflector` on any other libraries.
-    return ngDeps.code;
-  }
-
-  var importBuf = new StringBuffer();
-  var declarationBuf = new StringBuffer();
-  var code = ngDeps.code;
-  var codeIdx = 0;
-  // Generate import statements for linked deps where necessary.
-  for (var i = 0, it = allDeps.iterator; it.moveNext();) {
-    if (linkedDepsMap.containsKey(it.current)) {
-      importBuf.write(code.substring(codeIdx, it.current.end));
-      codeIdx = it.current.end;
-      importBuf.write('''
-        import '${linkedDepsMap[it.current]}' as i${i};
-      ''');
-      declarationBuf
-          .write('i${i}.${SETUP_METHOD_NAME}(${REFLECTOR_VAR_NAME});');
-      ++i;
-    }
-  }
-
-  var declarationSeamIdx = ngDeps.setupMethod.end - 1;
-  return '$importBuf'
-      '${code.substring(codeIdx, declarationSeamIdx)}'
-      '$declarationBuf'
-      '${code.substring(declarationSeamIdx)}';
-}
-
-/// All `import`s and `export`s in `ngDeps` sorted by order of appearance in
-/// the file.
-List<UriBasedDirective> _getSortedDeps(NgDeps ngDeps) {
-  return <UriBasedDirective>[]
-    ..addAll(ngDeps.imports)
-    ..addAll(ngDeps.exports)
-    ..sort((a, b) => a.end.compareTo(b.end));
-}
-
-String _toDepsUri(String importUri) =>
-    '${path.withoutExtension(importUri)}${DEPS_EXTENSION}';
-
-bool _isNotDartDirective(UriBasedDirective directive) {
-  return !stringLiteralToString(directive.uri).startsWith('dart:');
-}
-
-/// Maps each input {@link UriBasedDirective} to its associated `.ng_deps.dart`
-/// file, if it exists.
-Future<Map<UriBasedDirective, String>> _processNgImports(AssetReader reader,
-    AssetId entryPoint, Iterable<UriBasedDirective> directives) {
-  final nullFuture = new Future.value(null);
-  final retVal = <UriBasedDirective, String>{};
-  return Future
-      .wait(directives
-          .where(_isNotDartDirective)
-          .map((UriBasedDirective directive) {
-    var ngDepsUri = _toDepsUri(stringLiteralToString(directive.uri));
-    var spanArg = null;
-    var ngDepsAsset = uriToAssetId(entryPoint, ngDepsUri, logger, spanArg,
-        errorOnAbsolute: false);
-    if (ngDepsAsset == entryPoint) return nullFuture;
-    return reader.hasInput(ngDepsAsset).then((hasInput) {
-      if (hasInput) {
-        retVal[directive] = ngDepsUri;
-      }
-    }, onError: (_) => null);
-  })).then((_) => retVal);
-}
diff --git a/modules/angular2/src/transform/directive_linker/transformer.dart b/modules/angular2/src/transform/directive_linker/transformer.dart
deleted file mode 100644
index 3c7bf9a7ab5c..000000000000
--- a/modules/angular2/src/transform/directive_linker/transformer.dart
+++ /dev/null
@@ -1,69 +0,0 @@
-library angular2.transform.directive_linker.transformer;
-
-import 'dart:async';
-
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/formatter.dart';
-import 'package:angular2/src/transform/common/logging.dart' as log;
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:barback/barback.dart';
-
-import 'linker.dart';
-
-/// Transformer responsible for processing .ng_deps.dart files created by
-/// {@link DirectiveProcessor} and ensuring that the generated calls to
-/// `setupReflection` call the necessary `setupReflection` method in all
-/// dependencies.
-class DirectiveLinker extends Transformer {
-  DirectiveLinker();
-
-  @override
-  bool isPrimary(AssetId id) => id.path.endsWith(DEPS_EXTENSION);
-
-  @override
-  Future apply(Transform transform) async {
-    log.init(transform);
-
-    try {
-      var reader = new AssetReader.fromTransform(transform);
-      var assetId = transform.primaryInput.id;
-      var assetPath = assetId.path;
-      var transformedCode = await linkNgDeps(reader, assetId);
-      if (transformedCode != null) {
-        var formattedCode = formatter.format(transformedCode, uri: assetPath);
-        transform.addOutput(new Asset.fromString(assetId, formattedCode));
-      }
-    } catch (ex, stackTrace) {
-      log.logger.error('Linking ng directives failed.\n'
-          'Exception: $ex\n'
-          'Stack Trace: $stackTrace');
-    }
-    return null;
-  }
-}
-
-/// Transformer responsible for removing unnecessary `.ng_deps.dart` files
-/// created by {@link DirectiveProcessor}.
-class EmptyNgDepsRemover extends Transformer {
-  EmptyNgDepsRemover();
-
-  @override
-  bool isPrimary(AssetId id) => id.path.endsWith(DEPS_EXTENSION);
-
-  @override
-  Future apply(Transform transform) async {
-    log.init(transform);
-
-    try {
-      var reader = new AssetReader.fromTransform(transform);
-      if (!(await isNecessary(reader, transform.primaryInput.id))) {
-        transform.consumePrimary();
-      }
-    } catch (ex, stackTrace) {
-      log.logger.error('Removing unnecessary ng deps failed.\n'
-          'Exception: $ex\n'
-          'Stack Trace: $stackTrace');
-    }
-    return null;
-  }
-}
diff --git a/modules/angular2/src/transform/directive_metadata_extractor/extractor.dart b/modules/angular2/src/transform/directive_metadata_extractor/extractor.dart
deleted file mode 100644
index 67803e9bdb83..000000000000
--- a/modules/angular2/src/transform/directive_metadata_extractor/extractor.dart
+++ /dev/null
@@ -1,65 +0,0 @@
-library angular2.transform.directive_metadata_extractor.extractor;
-
-import 'dart:async';
-
-import 'package:analyzer/analyzer.dart';
-import 'package:angular2/src/render/api.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:angular2/src/transform/common/ng_deps.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/assets.dart';
-
-/// Returns a map from a class name (that is, its `Identifier` stringified)
-/// to [DirectiveMetadata] for all `Directive`-annotated classes  visible
-/// in a file importing `entryPoint`. That is, this includes all
-/// `Directive` annotated classes in `entryPoint` and any assets which it
-/// `export`s.
-/// Returns `null` if there are no `Directive`-annotated classes in
-/// `entryPoint`.
-Future<Map<String, DirectiveMetadata>> extractDirectiveMetadata(
-    AssetReader reader, AssetId entryPoint) async {
-  return _extractDirectiveMetadataRecursive(reader, entryPoint);
-}
-
-var _nullFuture = new Future.value(null);
-
-Future<Map<String, DirectiveMetadata>> _extractDirectiveMetadataRecursive(
-    AssetReader reader, AssetId entryPoint) async {
-  if (!(await reader.hasInput(entryPoint))) return null;
-
-  var ngDeps = await NgDeps.parse(reader, entryPoint);
-  var baseMap = _metadataMapFromNgDeps(ngDeps);
-
-  return Future.wait(ngDeps.exports.map((export) {
-    var uri = stringLiteralToString(export.uri);
-    if (uri.startsWith('dart:')) return _nullFuture;
-
-    uri = toDepsExtension(uri);
-    var assetId = uriToAssetId(entryPoint, uri, logger, null /* span */,
-        errorOnAbsolute: false);
-    if (assetId == entryPoint) return _nullFuture;
-    return _extractDirectiveMetadataRecursive(reader, assetId)
-        .then((exportMap) {
-      if (exportMap != null) {
-        if (baseMap == null) {
-          baseMap = exportMap;
-        } else {
-          baseMap.addAll(exportMap);
-        }
-      }
-    });
-  })).then((_) => baseMap);
-}
-
-Map<String, DirectiveMetadata> _metadataMapFromNgDeps(NgDeps ngDeps) {
-  if (ngDeps == null || ngDeps.registeredTypes.isEmpty) return null;
-  var retVal = <String, DirectiveMetadata>{};
-  ngDeps.registeredTypes.forEach((rType) {
-    if (rType.directiveMetadata != null) {
-      retVal['${rType.typeName}'] = rType.directiveMetadata;
-    }
-  });
-  return retVal;
-}
diff --git a/modules/angular2/src/transform/directive_metadata_extractor/transformer.dart b/modules/angular2/src/transform/directive_metadata_extractor/transformer.dart
deleted file mode 100644
index 7271c03b74c4..000000000000
--- a/modules/angular2/src/transform/directive_metadata_extractor/transformer.dart
+++ /dev/null
@@ -1,55 +0,0 @@
-library angular2.transform.directive_metadata_extractor.transformer;
-
-import 'dart:async';
-import 'dart:convert';
-
-import 'package:angular2/src/render/dom/convert.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart' as log;
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:barback/barback.dart';
-
-import 'extractor.dart';
-
-/// Transformer responsible for processing .ng_deps.dart files created by
-/// {@link DirectiveProcessor} and creating associated `.ng_meta.dart` files.
-/// These files contain commented Json-formatted representations of all
-/// `Directive`s in the associated file.
-class DirectiveMetadataExtractor extends Transformer {
-  final _encoder = const JsonEncoder.withIndent('  ');
-
-  DirectiveMetadataExtractor();
-
-  @override
-  bool isPrimary(AssetId id) => id.path.endsWith(DEPS_EXTENSION);
-
-  @override
-  Future apply(Transform transform) async {
-    log.init(transform);
-
-    try {
-      var reader = new AssetReader.fromTransform(transform);
-      var fromAssetId = transform.primaryInput.id;
-
-      var metadataMap = await extractDirectiveMetadata(reader, fromAssetId);
-      if (metadataMap != null) {
-        var jsonMap = <String, Map>{};
-        metadataMap.forEach((k, v) {
-          jsonMap[k] = directiveMetadataToMap(v);
-        });
-        transform.addOutput(new Asset.fromString(
-            _outputAssetId(fromAssetId), _encoder.convert(jsonMap)));
-      }
-    } catch (ex, stackTrace) {
-      log.logger.error('Extracting ng metadata failed.\n'
-          'Exception: $ex\n'
-          'Stack Trace: $stackTrace');
-    }
-    return null;
-  }
-}
-
-AssetId _outputAssetId(AssetId inputAssetId) {
-  assert(inputAssetId.path.endsWith(DEPS_EXTENSION));
-  return new AssetId(inputAssetId.package, toMetaExtension(inputAssetId.path));
-}
diff --git a/modules/angular2/src/transform/directive_processor/rewriter.dart b/modules/angular2/src/transform/directive_processor/rewriter.dart
deleted file mode 100644
index 4f47004ab8ee..000000000000
--- a/modules/angular2/src/transform/directive_processor/rewriter.dart
+++ /dev/null
@@ -1,239 +0,0 @@
-library angular2.transform.directive_processor.rewriter;
-
-import 'dart:async';
-
-import 'package:analyzer/analyzer.dart';
-import 'package:angular2/src/render/xhr.dart' show XHR;
-import 'package:angular2/src/transform/common/annotation_matcher.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/async_string_writer.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:angular2/src/transform/common/xhr_impl.dart';
-import 'package:barback/barback.dart' show AssetId;
-import 'package:path/path.dart' as path;
-
-import 'visitors.dart';
-
-/// Generates a file registering all Angular 2 `Directive`s found in `code` in
-/// ngDeps format [TODO(kegluneq): documentation reference needed]. `assetId` is
-/// the id of the asset containing `code`.
-///
-/// If no Angular 2 `Directive`s are found in `code`, returns the empty
-/// string unless `forceGenerate` is true, in which case an empty ngDeps
-/// file is created.
-Future<String> createNgDeps(AssetReader reader, AssetId assetId,
-    AnnotationMatcher annotationMatcher, bool inlineViews) async {
-  // TODO(kegluneq): Shortcut if we can determine that there are no
-  // [Directive]s present, taking into account `export`s.
-  var writer = new AsyncStringWriter();
-  var visitor = new CreateNgDepsVisitor(writer, assetId,
-      new XhrImpl(reader, assetId), annotationMatcher, inlineViews);
-  var code = await reader.readAsString(assetId);
-  parseCompilationUnit(code, name: assetId.path).accept(visitor);
-
-  // If this library does not define an `@Injectable` and it does not import
-  // any libaries that could, then we do not need to generate a `.ng_deps
-  // .dart` file for it.
-  if (!visitor._foundNgInjectable && !visitor._usesNonLangLibs) return null;
-
-  return await writer.asyncToString();
-}
-
-/// Visitor responsible for processing [CompilationUnit] and creating an
-/// associated .ng_deps.dart file.
-class CreateNgDepsVisitor extends Object with SimpleAstVisitor<Object> {
-  final AsyncStringWriter writer;
-  /// Whether an Angular 2 `Injectable` has been found.
-  bool _foundNgInjectable = false;
-  /// Whether this library `imports` or `exports` any non-'dart:' libraries.
-  bool _usesNonLangLibs = false;
-  /// Whether we have written an import of base file
-  /// (the file we are processing).
-  bool _wroteBaseLibImport = false;
-  final ToSourceVisitor _copyVisitor;
-  final FactoryTransformVisitor _factoryVisitor;
-  final ParameterTransformVisitor _paramsVisitor;
-  final AnnotationsTransformVisitor _metaVisitor;
-  final AnnotationMatcher _annotationMatcher;
-
-  /// The assetId for the file which we are parsing.
-  final AssetId assetId;
-
-  CreateNgDepsVisitor(AsyncStringWriter writer, this.assetId, XHR xhr,
-      this._annotationMatcher, inlineViews)
-      : writer = writer,
-        _copyVisitor = new ToSourceVisitor(writer),
-        _factoryVisitor = new FactoryTransformVisitor(writer),
-        _paramsVisitor = new ParameterTransformVisitor(writer),
-        _metaVisitor = new AnnotationsTransformVisitor(
-            writer, xhr, inlineViews);
-
-  void _visitNodeListWithSeparator(NodeList<AstNode> list, String separator) {
-    if (list == null) return;
-    for (var i = 0, iLen = list.length; i < iLen; ++i) {
-      if (i != 0) {
-        writer.print(separator);
-      }
-      list[i].accept(this);
-    }
-  }
-
-  @override
-  Object visitCompilationUnit(CompilationUnit node) {
-    _visitNodeListWithSeparator(node.directives, " ");
-    _openFunctionWrapper();
-    _visitNodeListWithSeparator(node.declarations, " ");
-    _closeFunctionWrapper();
-    return null;
-  }
-
-  /// Write the import to the file the .ng_deps.dart file is based on if it
-  /// has not yet been written.
-  void _maybeWriteImport() {
-    if (_wroteBaseLibImport) return;
-    _wroteBaseLibImport = true;
-    writer.print('''import '${path.basename(assetId.path)}';''');
-  }
-
-  void _updateUsesNonLangLibs(UriBasedDirective directive) {
-    _usesNonLangLibs = _usesNonLangLibs ||
-        !stringLiteralToString(directive.uri).startsWith('dart:');
-  }
-
-  @override
-  Object visitImportDirective(ImportDirective node) {
-    _maybeWriteImport();
-    _updateUsesNonLangLibs(node);
-    return node.accept(_copyVisitor);
-  }
-
-  @override
-  Object visitExportDirective(ExportDirective node) {
-    _maybeWriteImport();
-    _updateUsesNonLangLibs(node);
-    return node.accept(_copyVisitor);
-  }
-
-  void _openFunctionWrapper() {
-    _maybeWriteImport();
-    writer.print('var _visited = false;'
-        'void ${SETUP_METHOD_NAME}(${REFLECTOR_VAR_NAME}) {'
-        'if (_visited) return; _visited = true;');
-  }
-
-  void _closeFunctionWrapper() {
-    if (_foundNgInjectable) {
-      writer.print(';');
-    }
-    writer.print('}');
-  }
-
-  ConstructorDeclaration _getCtor(ClassDeclaration node) {
-    int numCtorsFound = 0;
-    var ctor = null;
-
-    for (ClassMember classMember in node.members) {
-      if (classMember is ConstructorDeclaration) {
-        numCtorsFound++;
-        ConstructorDeclaration constructor = classMember;
-
-        // Use the unnnamed constructor if it is present.
-        // Otherwise, use the first encountered.
-        if (ctor == null) {
-          ctor = constructor;
-        } else if (constructor.name == null) {
-          ctor = constructor;
-        }
-      }
-    }
-    if (numCtorsFound > 1) {
-      var ctorName = ctor.name;
-      ctorName = ctorName == null
-          ? 'the unnamed constructor'
-          : 'constructor "${ctorName}"';
-      logger.warning('Found ${numCtorsFound} ctors for class ${node.name},'
-          'Using ${ctorName}.');
-    }
-    return ctor;
-  }
-
-  void _generateEmptyFactory(String typeName) {
-    writer.print('() => new ${typeName}()');
-  }
-
-  void _generateEmptyParams() => writer.print('const []');
-
-  @override
-  Object visitClassDeclaration(ClassDeclaration node) {
-    if (!node.metadata.any((a) => _annotationMatcher.hasMatch(a, assetId))) {
-      return null;
-    }
-
-    var ctor = _getCtor(node);
-
-    if (!_foundNgInjectable) {
-      // The receiver for cascaded calls.
-      writer.print(REFLECTOR_VAR_NAME);
-      _foundNgInjectable = true;
-    }
-    writer.print('..registerType(');
-    node.name.accept(this);
-    writer.print(''', {'factory': ''');
-    if (ctor == null) {
-      _generateEmptyFactory(node.name.toString());
-    } else {
-      ctor.accept(_factoryVisitor);
-    }
-    writer.print(''', 'parameters': ''');
-    if (ctor == null) {
-      _generateEmptyParams();
-    } else {
-      ctor.accept(_paramsVisitor);
-    }
-    writer.print(''', 'annotations': ''');
-    node.accept(_metaVisitor);
-    if (node.implementsClause != null &&
-        node.implementsClause.interfaces != null &&
-        node.implementsClause.interfaces.isNotEmpty) {
-      writer.print(''', 'interfaces': const [''');
-      node.implementsClause.interfaces.forEach((interface) {
-        writer.print('${interface.name}');
-      });
-      writer.print(']');
-    }
-    writer.print('})');
-    return null;
-  }
-
-  Object _nodeToSource(AstNode node) {
-    if (node == null) return null;
-    return node.accept(_copyVisitor);
-  }
-
-  @override
-  Object visitLibraryDirective(LibraryDirective node) {
-    if (node != null && node.name != null) {
-      writer.print('library ');
-      _nodeToSource(node.name);
-      writer.print('$DEPS_EXTENSION;');
-    }
-    return null;
-  }
-
-  @override
-  Object visitPartOfDirective(PartOfDirective node) {
-    // TODO(kegluneq): Consider importing [node.libraryName].
-    logger.warning('[${assetId}]: '
-        'Found `part of` directive while generating ${DEPS_EXTENSION} file, '
-        'Transform may fail due to missing imports in generated file.');
-    return null;
-  }
-
-  @override
-  Object visitPrefixedIdentifier(PrefixedIdentifier node) =>
-      _nodeToSource(node);
-
-  @override
-  Object visitSimpleIdentifier(SimpleIdentifier node) => _nodeToSource(node);
-}
diff --git a/modules/angular2/src/transform/directive_processor/transformer.dart b/modules/angular2/src/transform/directive_processor/transformer.dart
deleted file mode 100644
index e26f05e366cf..000000000000
--- a/modules/angular2/src/transform/directive_processor/transformer.dart
+++ /dev/null
@@ -1,54 +0,0 @@
-library angular2.transform.directive_processor.transformer;
-
-import 'dart:async';
-
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart' as log;
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:barback/barback.dart';
-
-import 'rewriter.dart';
-
-/// Transformer responsible for processing all .dart assets and creating
-/// .ng_deps.dart files which register @Injectable annotated classes with the
-/// reflector.
-///
-/// This will also create .ng_deps.dart files for classes annotated
-/// with @Component, @View, @Directive, etc.
-///
-/// This transformer is the first phase in a two-phase transform. It should
-/// be followed by {@link DirectiveLinker}.
-class DirectiveProcessor extends Transformer {
-  final TransformerOptions options;
-
-  DirectiveProcessor(this.options);
-
-  @override
-  bool isPrimary(AssetId id) => id.extension.endsWith('dart');
-
-  @override
-  Future apply(Transform transform) async {
-    log.init(transform);
-
-    try {
-      var asset = transform.primaryInput;
-      var reader = new AssetReader.fromTransform(transform);
-      var ngDepsSrc = await createNgDeps(
-          reader, asset.id, options.annotationMatcher, options.inlineViews);
-      if (ngDepsSrc != null && ngDepsSrc.isNotEmpty) {
-        var ngDepsAssetId =
-            transform.primaryInput.id.changeExtension(DEPS_EXTENSION);
-        if (await transform.hasInput(ngDepsAssetId)) {
-          log.logger.error('Clobbering ${ngDepsAssetId}. '
-              'This probably will not end well');
-        }
-        transform.addOutput(new Asset.fromString(ngDepsAssetId, ngDepsSrc));
-      }
-    } catch (ex, stackTrace) {
-      log.logger.warning('Processing ng directives failed.\n'
-          'Exception: $ex\n'
-          'Stack Trace: $stackTrace');
-    }
-  }
-}
diff --git a/modules/angular2/src/transform/directive_processor/visitors.dart b/modules/angular2/src/transform/directive_processor/visitors.dart
deleted file mode 100644
index 6108ac8fdcce..000000000000
--- a/modules/angular2/src/transform/directive_processor/visitors.dart
+++ /dev/null
@@ -1,305 +0,0 @@
-library angular2.transform.directive_processor.visitors;
-
-import 'dart:async';
-import 'package:analyzer/analyzer.dart';
-import 'package:analyzer/src/generated/java_core.dart';
-import 'package:angular2/src/render/xhr.dart' show XHR;
-import 'package:angular2/src/transform/common/async_string_writer.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-
-/// `ToSourceVisitor` designed to accept {@link ConstructorDeclaration} nodes.
-class _CtorTransformVisitor extends ToSourceVisitor {
-  bool _withParameterAnnotations = true;
-  bool _withParameterTypes = true;
-  bool _withParameterNames = true;
-  final PrintWriter writer;
-
-  /// Maps field names to their declared types. This is populated whenever
-  /// the listener visits a {@link ConstructorDeclaration} node.
-  final Map<String, TypeName> _fieldNameToType = {};
-
-  _CtorTransformVisitor(PrintWriter writer)
-      : this.writer = writer,
-        super(writer);
-
-  void _visitNodeWithPrefix(String prefix, AstNode node) {
-    if (node != null) {
-      writer.print(prefix);
-      node.accept(this);
-    }
-  }
-
-  void _visitNodeWithSuffix(AstNode node, String suffix) {
-    if (node != null) {
-      node.accept(this);
-      writer.print(suffix);
-    }
-  }
-
-  void _visitNode(AstNode node) {
-    if (node != null) {
-      node.accept(this);
-    }
-  }
-
-  /// If `_withParameterTypes` is true, this method outputs `node`'s type. If
-  /// `_withParameterNames` is true, this method outputs `node`'s identifier.
-  Object _visitNormalFormalParameter(
-      NodeList<Annotation> metadata, TypeName type, SimpleIdentifier name) {
-    if (_withParameterAnnotations && metadata != null) {
-      assert(_withParameterTypes);
-      for (var i = 0, iLen = metadata.length; i < iLen; ++i) {
-        if (i != 0) {
-          writer.print(', ');
-        }
-        metadata[i].accept(this);
-      }
-      writer.print(type != null && metadata.isNotEmpty ? ', ' : '');
-    }
-    var needCompileTimeConstants = !_withParameterNames;
-    if (_withParameterTypes && type != null) {
-      _visitNodeWithSuffix(type.name, ' ');
-      if (!needCompileTimeConstants) {
-        // Types with arguments are not compile-time constants.
-        _visitNodeWithSuffix(type.typeArguments, ' ');
-      }
-    }
-    if (_withParameterNames) {
-      _visitNode(name);
-    }
-    return null;
-  }
-
-  void _buildFieldMap(ConstructorDeclaration node) {
-    ClassDeclaration clazz =
-        node.getAncestor((node) => node is ClassDeclaration);
-    _fieldNameToType.clear();
-    clazz.members
-        .where((member) => member is FieldDeclaration)
-        .forEach((FieldDeclaration field) {
-      var type = field.fields.type;
-      if (type != null) {
-        field.fields.variables.forEach((VariableDeclaration decl) {
-          _fieldNameToType[decl.name.toString()] = type;
-        });
-      }
-    });
-  }
-
-  @override
-  Object visitSimpleFormalParameter(SimpleFormalParameter node) {
-    return _visitNormalFormalParameter(
-        node.metadata, node.type, node.identifier);
-  }
-
-  @override
-  Object visitFieldFormalParameter(FieldFormalParameter node) {
-    if (node.parameters != null) {
-      logger.error('Parameters in ctor not supported '
-          '(${node.toSource()})');
-    }
-    var type = node.type;
-    if (type == null) {
-      type = _fieldNameToType[node.identifier.toString()];
-    }
-    return _visitNormalFormalParameter(node.metadata, type, node.identifier);
-  }
-
-  @override
-  Object visitFunctionTypedFormalParameter(FunctionTypedFormalParameter node) {
-    logger.error('Function typed formal parameters not supported '
-        '(${node.toSource()})');
-    return _visitNormalFormalParameter(node.metadata, null, node.identifier);
-  }
-
-  @override
-  Object visitDefaultFormalParameter(DefaultFormalParameter node) {
-    _visitNode(node.parameter);
-    // Ignore the declared default value.
-    return null;
-  }
-
-  @override
-  /// Overridden to avoid outputting grouping operators for default parameters.
-  Object visitFormalParameterList(FormalParameterList node) {
-    writer.print('(');
-    NodeList<FormalParameter> parameters = node.parameters;
-    int size = parameters.length;
-    for (int i = 0; i < size; i++) {
-      if (i > 0) {
-        writer.print(', ');
-      }
-      parameters[i].accept(this);
-    }
-    writer.print(')');
-    return null;
-  }
-
-  @override
-  Object visitAnnotation(Annotation node) {
-    var prefix =
-        node.arguments != null && node.arguments.length > 0 ? 'const ' : '';
-    _visitNodeWithPrefix(prefix, node.name);
-    _visitNodeWithPrefix(".", node.constructorName);
-    _visitNode(node.arguments);
-    return null;
-  }
-}
-
-/// ToSourceVisitor designed to print 'parameters' values for Angular2's
-/// `registerType` calls.
-class ParameterTransformVisitor extends _CtorTransformVisitor {
-  ParameterTransformVisitor(PrintWriter writer) : super(writer) {
-    _withParameterNames = false;
-    _withParameterTypes = true;
-    _withParameterAnnotations = true;
-  }
-
-  @override
-  Object visitConstructorDeclaration(ConstructorDeclaration node) {
-    _buildFieldMap(node);
-    writer.print('const [');
-    _visitNode(node.parameters);
-    writer.print(']');
-    return null;
-  }
-
-  @override
-  Object visitFormalParameterList(FormalParameterList node) {
-    NodeList<FormalParameter> parameters = node.parameters;
-    for (int i = 0, iLen = parameters.length; i < iLen; i++) {
-      if (i > 0) {
-        writer.print(', ');
-      }
-      // TODO(kegluneq): Include annotations on parameters.
-      writer.print('const [');
-      parameters[i].accept(this);
-      writer.print(']');
-    }
-    return null;
-  }
-}
-
-/// ToSourceVisitor designed to print 'factory' values for Angular2's
-/// `registerType` calls.
-class FactoryTransformVisitor extends _CtorTransformVisitor {
-  FactoryTransformVisitor(PrintWriter writer) : super(writer) {
-    _withParameterAnnotations = false;
-  }
-
-  @override
-  Object visitConstructorDeclaration(ConstructorDeclaration node) {
-    _buildFieldMap(node);
-    _withParameterNames = true;
-    _withParameterTypes = true;
-    _visitNode(node.parameters);
-    writer.print(' => new ');
-    _visitNode(node.returnType);
-    _visitNodeWithPrefix(".", node.name);
-
-    _withParameterTypes = false;
-    _visitNode(node.parameters);
-    return null;
-  }
-}
-
-// TODO(kegluenq): Use pull #1772 to detect when available.
-bool _isViewAnnotation(Annotation node) => '${node.name}' == 'View';
-
-/// ToSourceVisitor designed to print a `ClassDeclaration` node as a
-/// 'annotations' value for Angular2's `registerType` calls.
-class AnnotationsTransformVisitor extends ToSourceVisitor {
-  final AsyncStringWriter writer;
-  final XHR _xhr;
-  final bool _inlineViews;
-  final ConstantEvaluator _evaluator = new ConstantEvaluator();
-  bool _processingView = false;
-
-  AnnotationsTransformVisitor(
-      AsyncStringWriter writer, this._xhr, this._inlineViews)
-      : this.writer = writer,
-        super(writer);
-
-  @override
-  Object visitClassDeclaration(ClassDeclaration node) {
-    writer.print('const [');
-    var size = node.metadata.length;
-    for (var i = 0; i < size; ++i) {
-      if (i > 0) {
-        writer.print(', ');
-      }
-      node.metadata[i].accept(this);
-    }
-    writer.print(']');
-    return null;
-  }
-
-  @override
-  Object visitAnnotation(Annotation node) {
-    writer.print('const ');
-    if (node.name != null) {
-      _processingView = _isViewAnnotation(node);
-      node.name.accept(this);
-    }
-    if (node.constructorName != null) {
-      writer.print('.');
-      node.constructorName.accept(this);
-    }
-    if (node.arguments != null) {
-      node.arguments.accept(this);
-    }
-    return null;
-  }
-
-  /// These correspond to the annotation parameters.
-  @override
-  Object visitNamedExpression(NamedExpression node) {
-    // TODO(kegluneq): Remove this limitation.
-    if (!_processingView ||
-        node.name is! Label ||
-        node.name.label is! SimpleIdentifier) {
-      return super.visitNamedExpression(node);
-    }
-    var keyString = '${node.name.label}';
-    if (_inlineViews) {
-      if (keyString == 'templateUrl') {
-        // Inline the templateUrl
-        var url = node.expression.accept(_evaluator);
-        if (url is String) {
-          writer.print("template: r'''");
-          writer.asyncPrint(_readOrEmptyString(url));
-          writer.print("'''");
-          return null;
-        } else {
-          logger.warning('template url is not a String $url');
-        }
-      } else if (keyString == 'styleUrls') {
-        // Inline the styleUrls
-        var urls = node.expression.accept(_evaluator);
-        writer.print('styles: const [');
-        for (var url in urls) {
-          if (url is String) {
-            writer.print("r'''");
-            writer.asyncPrint(_readOrEmptyString(url));
-            writer.print("''', ");
-          } else {
-            logger.warning('style url is not a String ${url}');
-          }
-        }
-        writer.print(']');
-        return null;
-      }
-    }
-    return super.visitNamedExpression(node);
-  }
-
-  /// Attempts to read the content from {@link url}, if it returns null then
-  /// just return the empty string.
-  Future<String> _readOrEmptyString(String url) async {
-    var content = await _xhr.get(url);
-    if (content == null) {
-      content = '';
-    }
-    return content;
-  }
-}
diff --git a/modules/angular2/src/transform/reflection_remover/ast_tester.dart b/modules/angular2/src/transform/reflection_remover/ast_tester.dart
deleted file mode 100644
index 7c274f1e8b88..000000000000
--- a/modules/angular2/src/transform/reflection_remover/ast_tester.dart
+++ /dev/null
@@ -1,35 +0,0 @@
-library angular2.transform.reflection_remover.ast_tester;
-
-import 'package:analyzer/src/generated/ast.dart';
-import 'package:analyzer/src/generated/element.dart';
-import 'package:angular2/src/transform/common/names.dart';
-
-/// An object that checks for {@link ReflectionCapabilities} syntactically, that is,
-/// without resolution information.
-class AstTester {
-  const AstTester();
-
-  bool isNewReflectionCapabilities(InstanceCreationExpression node) =>
-      '${node.constructorName.type.name}' == REFLECTION_CAPABILITIES_NAME;
-
-  bool isReflectionCapabilitiesImport(ImportDirective node) {
-    return node.uri.stringValue.endsWith("reflection_capabilities.dart");
-  }
-}
-
-/// An object that checks for {@link ReflectionCapabilities} using a fully resolved
-/// Ast.
-class ResolvedTester implements AstTester {
-  final ClassElement _forbiddenClass;
-
-  ResolvedTester(this._forbiddenClass);
-
-  bool isNewReflectionCapabilities(InstanceCreationExpression node) {
-    var typeElement = node.constructorName.type.name.bestElement;
-    return typeElement != null && typeElement == _forbiddenClass;
-  }
-
-  bool isReflectionCapabilitiesImport(ImportDirective node) {
-    return node.uriElement == _forbiddenClass.library;
-  }
-}
diff --git a/modules/angular2/src/transform/reflection_remover/codegen.dart b/modules/angular2/src/transform/reflection_remover/codegen.dart
deleted file mode 100644
index 00d53060e55c..000000000000
--- a/modules/angular2/src/transform/reflection_remover/codegen.dart
+++ /dev/null
@@ -1,80 +0,0 @@
-library angular2.transform.reflection_remover.codegen;
-
-import 'package:analyzer/src/generated/ast.dart';
-import 'package:path/path.dart' as path;
-
-import 'package:angular2/src/transform/common/names.dart';
-
-class Codegen {
-  static const _PREFIX_BASE = 'ngStaticInit';
-
-  /// The prefix used to import our generated file.
-  final String prefix;
-  /// The import uris
-  final Iterable<String> importUris;
-
-  Codegen(String reflectionEntryPointPath, Iterable<String> newEntryPointPaths,
-      {String prefix})
-      : this.prefix = prefix == null ? _PREFIX_BASE : prefix,
-        importUris = newEntryPointPaths.map((p) =>
-            path.relative(p, from: path.dirname(reflectionEntryPointPath)).replaceAll('\\', '/')) {
-    if (this.prefix.isEmpty) throw new ArgumentError.value('(empty)', 'prefix');
-  }
-
-  /// Generates code to import the library containing the method which sets up
-  /// Angular2 reflection statically.
-  ///
-  /// The code generated here should follow the example of code generated for
-  /// an {@link ImportDirective} node.
-  String codegenImport() {
-    var count = 0;
-    return importUris
-        .map((importUri) => 'import \'${importUri}\' as ${prefix}${count++};')
-        .join('');
-  }
-
-  /// Generates code to call the method which sets up Angular2 reflection
-  /// statically.
-  ///
-  /// If `reflectorAssignment` is provided, it is expected to be the node
-  /// representing the {@link ReflectionCapabilities} assignment, and we will
-  /// attempt to parse the access of `reflector` from it so that `reflector` is
-  /// properly prefixed if necessary.
-  String codegenSetupReflectionCall(
-      {AssignmentExpression reflectorAssignment}) {
-    var reflectorExpression = null;
-    if (reflectorAssignment != null) {
-      reflectorExpression = reflectorAssignment.accept(new _ReflectorVisitor());
-    }
-    if (reflectorExpression == null) {
-      reflectorExpression = 'reflector';
-    }
-
-    var count = 0;
-    return importUris
-        .map((_) =>
-            '${prefix}${count++}.${SETUP_METHOD_NAME}(${reflectorExpression});')
-        .join('');
-  }
-}
-
-/// A visitor whose job it is to find the access of `reflector`.
-class _ReflectorVisitor extends Object with SimpleAstVisitor<Expression> {
-  @override
-  Expression visitAssignmentExpression(AssignmentExpression node) {
-    if (node == null || node.leftHandSide == null) return null;
-    return node.leftHandSide.accept(this);
-  }
-
-  @override
-  Expression visitPropertyAccess(PropertyAccess node) {
-    if (node == null || node.target == null) return null;
-    return node.target;
-  }
-
-  @override
-  Expression visitPrefixedIdentifier(PrefixedIdentifier node) {
-    if (node == null || node.prefix == null) return null;
-    return node.prefix;
-  }
-}
diff --git a/modules/angular2/src/transform/reflection_remover/remove_reflection_capabilities.dart b/modules/angular2/src/transform/reflection_remover/remove_reflection_capabilities.dart
deleted file mode 100644
index da673bba0e3c..000000000000
--- a/modules/angular2/src/transform/reflection_remover/remove_reflection_capabilities.dart
+++ /dev/null
@@ -1,30 +0,0 @@
-library angular2.transform.reflection_remover.remove_reflection_capabilities;
-
-import 'dart:async';
-import 'package:analyzer/analyzer.dart';
-import 'package:barback/barback.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/mirror_mode.dart';
-
-import 'codegen.dart';
-import 'rewriter.dart';
-
-/// Finds the call to the Angular2 `ReflectionCapabilities` constructor
-/// in `reflectionEntryPoint` and replaces it with a call to
-/// `setupReflection` in `newEntryPoint`.
-///
-/// This only searches the code in `reflectionEntryPoint`, not `part`s,
-/// `import`s, `export`s, etc.
-Future<String> removeReflectionCapabilities(AssetReader reader,
-    AssetId reflectionEntryPoint, Iterable<AssetId> newEntryPoints,
-    {MirrorMode mirrorMode: MirrorMode.none,
-    bool writeStaticInit: true}) async {
-  var code = await reader.readAsString(reflectionEntryPoint);
-  var reflectionEntryPointPath = reflectionEntryPoint.path;
-  var newEntryPointPaths = newEntryPoints.map((id) => id.path);
-
-  var codegen = new Codegen(reflectionEntryPointPath, newEntryPointPaths);
-  return new Rewriter(code, codegen,
-          mirrorMode: mirrorMode, writeStaticInit: writeStaticInit)
-      .rewrite(parseCompilationUnit(code, name: reflectionEntryPointPath));
-}
diff --git a/modules/angular2/src/transform/reflection_remover/rewriter.dart b/modules/angular2/src/transform/reflection_remover/rewriter.dart
deleted file mode 100644
index 0d7607e3eb09..000000000000
--- a/modules/angular2/src/transform/reflection_remover/rewriter.dart
+++ /dev/null
@@ -1,165 +0,0 @@
-library angular2.transform.reflection_remover.rewriter;
-
-import 'package:analyzer/src/generated/ast.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-import 'package:angular2/src/transform/common/mirror_mode.dart';
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:path/path.dart' as path;
-
-import 'ast_tester.dart';
-import 'codegen.dart';
-
-class Rewriter {
-  final String _code;
-  final Codegen _codegen;
-  final AstTester _tester;
-  final MirrorMode _mirrorMode;
-  final bool _writeStaticInit;
-
-  Rewriter(this._code, this._codegen, {AstTester tester,
-      MirrorMode mirrorMode: MirrorMode.none, bool writeStaticInit: true})
-      : _mirrorMode = mirrorMode,
-        _writeStaticInit = writeStaticInit,
-        _tester = tester == null ? const AstTester() : tester;
-
-  /// Rewrites the provided code removing imports of the
-  /// {@link ReflectionCapabilities} library and instantiations of
-  /// {@link ReflectionCapabilities}, as detected by the (potentially) provided
-  /// {@link AstTester}.
-  ///
-  /// To the extent possible, this method does not change line numbers or
-  /// offsets in the provided code to facilitate debugging via source maps.
-  String rewrite(CompilationUnit node) {
-    if (node == null) throw new ArgumentError.notNull('node');
-
-    var visitor = new _FindReflectionCapabilitiesVisitor(_tester);
-    node.accept(visitor);
-    if (visitor.reflectionCapabilityImports.isEmpty) {
-      logger.error('Failed to find ${REFLECTION_CAPABILITIES_NAME} import.');
-      return _code;
-    }
-    if (visitor.reflectionCapabilityAssignments.isEmpty) {
-      logger.error('Failed to find ${REFLECTION_CAPABILITIES_NAME} '
-          'instantiation.');
-      return _code;
-    }
-
-    var compare = (AstNode a, AstNode b) => b.offset - a.offset;
-    visitor.reflectionCapabilityImports.sort(compare);
-    visitor.reflectionCapabilityAssignments.sort(compare);
-
-    var importAdded = false;
-    var buf = new StringBuffer();
-    var idx = visitor.reflectionCapabilityImports.fold(0,
-        (int lastIdx, ImportDirective node) {
-      buf.write(_code.substring(lastIdx, node.offset));
-      if ('${node.prefix}' == _codegen.prefix) {
-        logger.warning(
-            'Found import prefix "${_codegen.prefix}" in source file.'
-            ' Transform may not succeed.');
-      }
-      if (_mirrorMode != MirrorMode.none) {
-        buf.write(_importDebugReflectionCapabilities(node));
-      } else {
-        buf.write(_commentedNode(node));
-      }
-      if (!importAdded && _writeStaticInit) {
-        buf.write(_codegen.codegenImport());
-        importAdded = true;
-      }
-      return node.end;
-    });
-
-    var setupAdded = false;
-    idx = visitor.reflectionCapabilityAssignments.fold(idx,
-        (int lastIdx, AssignmentExpression assignNode) {
-      var node = assignNode;
-      while (node.parent is ExpressionStatement) {
-        node = node.parent;
-      }
-      buf.write(_code.substring(lastIdx, node.offset));
-      switch (_mirrorMode) {
-        case MirrorMode.debug:
-          buf.write(node);
-          break;
-        case MirrorMode.verbose:
-          buf.write(_instantiateVerboseReflectionCapabilities(assignNode));
-          break;
-        case MirrorMode.none:
-        default:
-          buf.write(_commentedNode(node));
-          break;
-      }
-      if (!setupAdded && _writeStaticInit) {
-        buf.write(_codegen.codegenSetupReflectionCall(
-            reflectorAssignment: assignNode));
-        setupAdded = true;
-      }
-      return node.end;
-    });
-    if (idx < _code.length) buf.write(_code.substring(idx));
-    return buf.toString();
-  }
-
-  String _instantiateVerboseReflectionCapabilities(
-      AssignmentExpression assignNode) {
-    if (assignNode.rightHandSide is! InstanceCreationExpression) {
-      return '$assignNode;';
-    }
-    var rhs = (assignNode.rightHandSide as InstanceCreationExpression);
-    return '${assignNode.leftHandSide} ${assignNode.operator} '
-        'new ${rhs.constructorName}(verbose: true);';
-  }
-
-  String _importDebugReflectionCapabilities(ImportDirective node) {
-    var uri = '${node.uri}';
-    uri = path.join(path.dirname(uri), 'debug_${path.basename(uri)}').replaceAll('\\', '/');
-    var asClause = node.prefix != null ? ' as ${node.prefix}' : '';
-    return 'import $uri$asClause;';
-  }
-
-  String _commentedNode(AstNode node) {
-    return '/*${_code.substring(node.offset, node.end)}*/';
-  }
-}
-
-/// Visitor responsible for rewriting the Angular 2 code which instantiates
-/// {@link ReflectionCapabilities} and removing its associated import.
-///
-/// This breaks our dependency on dart:mirrors, which enables smaller code
-/// size and better performance.
-class _FindReflectionCapabilitiesVisitor extends Object
-    with RecursiveAstVisitor<Object> {
-  final reflectionCapabilityImports = new List<ImportDirective>();
-  final reflectionCapabilityAssignments = new List<AssignmentExpression>();
-  final AstTester _tester;
-
-  _FindReflectionCapabilitiesVisitor(this._tester);
-
-  @override
-  Object visitImportDirective(ImportDirective node) {
-    if (_tester.isReflectionCapabilitiesImport(node)) {
-      reflectionCapabilityImports.add(node);
-    }
-    return null;
-  }
-
-  @override
-  Object visitAssignmentExpression(AssignmentExpression node) {
-    if (node.rightHandSide is InstanceCreationExpression &&
-        _tester.isNewReflectionCapabilities(node.rightHandSide)) {
-      reflectionCapabilityAssignments.add(node);
-    }
-    return super.visitAssignmentExpression(node);
-  }
-
-  @override
-  Object visitInstanceCreationExpression(InstanceCreationExpression node) {
-    if (_tester.isNewReflectionCapabilities(node) &&
-        !reflectionCapabilityAssignments.contains(node.parent)) {
-      logger.error('Unexpected format in creation of '
-          '${REFLECTION_CAPABILITIES_NAME}');
-    }
-    return super.visitInstanceCreationExpression(node);
-  }
-}
diff --git a/modules/angular2/src/transform/reflection_remover/transformer.dart b/modules/angular2/src/transform/reflection_remover/transformer.dart
deleted file mode 100644
index 0f1864da3b23..000000000000
--- a/modules/angular2/src/transform/reflection_remover/transformer.dart
+++ /dev/null
@@ -1,63 +0,0 @@
-library angular2.transform.reflection_remover.transformer;
-
-import 'dart:async';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart' as log;
-import 'package:angular2/src/transform/common/mirror_mode.dart';
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:barback/barback.dart';
-
-import 'remove_reflection_capabilities.dart';
-
-/// Transformer responsible for removing the import and instantiation of
-/// {@link ReflectionCapabilities}.
-///
-/// The goal of this is to break the app's dependency on dart:mirrors.
-///
-/// This transformer assumes that {@link DirectiveProcessor} and {@link DirectiveLinker}
-/// have already been run and that a .ng_deps.dart file has been generated for
-/// {@link options.entryPoint}. The instantiation of {@link ReflectionCapabilities} is
-/// replaced by calling `setupReflection` in that .ng_deps.dart file.
-class ReflectionRemover extends Transformer {
-  final TransformerOptions options;
-
-  ReflectionRemover(this.options);
-
-  @override
-  bool isPrimary(AssetId id) => options.reflectionEntryPoints != null &&
-      options.reflectionEntryPoints.contains(id.path);
-
-  @override
-  Future apply(Transform transform) async {
-    log.init(transform);
-
-    try {
-      var newEntryPoints = options.entryPoints.map((entryPoint) {
-        return new AssetId(transform.primaryInput.id.package, entryPoint)
-            .changeExtension(DEPS_EXTENSION);
-      });
-      var reader = new AssetReader.fromTransform(transform);
-
-      var mirrorMode = options.mirrorMode;
-      var writeStaticInit = options.initReflector;
-      if (options.modeName == TRANSFORM_DYNAMIC_MODE) {
-        mirrorMode = MirrorMode.debug;
-        writeStaticInit = false;
-        log.logger.info('Running in "${options.modeName}", '
-            'mirrorMode: ${mirrorMode}, '
-            'writeStaticInit: ${writeStaticInit}.');
-      }
-
-      var transformedCode = await removeReflectionCapabilities(
-          reader, transform.primaryInput.id, newEntryPoints,
-          mirrorMode: mirrorMode, writeStaticInit: writeStaticInit);
-      transform.addOutput(
-          new Asset.fromString(transform.primaryInput.id, transformedCode));
-    } catch (ex, stackTrace) {
-      log.logger.error('Removing reflection failed.\n'
-          'Exception: $ex\n'
-          'Stack Trace: $stackTrace');
-    }
-  }
-}
diff --git a/modules/angular2/src/transform/template_compiler/change_detector_codegen.dart b/modules/angular2/src/transform/template_compiler/change_detector_codegen.dart
deleted file mode 100644
index bca0194b551a..000000000000
--- a/modules/angular2/src/transform/template_compiler/change_detector_codegen.dart
+++ /dev/null
@@ -1,536 +0,0 @@
-library angular2.transform.template_compiler.change_detector_codegen;
-
-import 'dart:convert' show JSON;
-import 'package:angular2/src/change_detection/change_detection_util.dart';
-import 'package:angular2/src/change_detection/coalesce.dart';
-import 'package:angular2/src/change_detection/directive_record.dart';
-import 'package:angular2/src/change_detection/interfaces.dart';
-import 'package:angular2/src/change_detection/proto_change_detector.dart';
-import 'package:angular2/src/change_detection/proto_record.dart';
-import 'package:angular2/src/facade/lang.dart' show BaseException;
-
-/// Responsible for generating change detector classes for Angular 2.
-///
-/// This code should be kept in sync with the `ChangeDetectorJITGenerator`
-/// class. If you make updates here, please make equivalent changes there.
-class Codegen {
-  /// Stores the generated class definitions.
-  final StringBuffer _buf = new StringBuffer();
-  /// Stores all generated initialization code.
-  final StringBuffer _initBuf = new StringBuffer();
-  /// The names of already generated classes.
-  final Set<String> _names = new Set<String>();
-
-  /// Generates a change detector class with name `changeDetectorTypeName`,
-  /// which must not conflict with other generated classes in the same
-  /// `.ng_deps.dart` file.  The change detector is used to detect changes in
-  /// Objects of type `typeName`.
-  void generate(String typeName, String changeDetectorTypeName,
-      ChangeDetectorDefinition def) {
-    if (_names.contains(changeDetectorTypeName)) {
-      throw new BaseException(
-          'Change detector named "${changeDetectorTypeName}" for ${typeName} '
-          'conflicts with an earlier generated change detector class.');
-    }
-    _names.add(changeDetectorTypeName);
-    new _CodegenState(typeName, changeDetectorTypeName, def)
-      .._writeToBuf(_buf)
-      .._writeInitToBuf(_initBuf);
-  }
-
-  /// Gets all imports necessary for the generated code.
-  String get imports {
-    return _buf.isEmpty
-        ? ''
-        : '''import '$_PREGEN_PROTO_CHANGE_DETECTOR_IMPORT' as $_GEN_PREFIX;''';
-  }
-
-  bool get isEmpty => _buf.isEmpty;
-
-  /// Gets the initilization code that registers the generated classes with
-  /// the Angular 2 change detection system.
-  String get initialize => '$_initBuf';
-
-  @override
-  String toString() => '$_buf';
-}
-
-/// The state needed to generate a change detector for a single `Component`.
-class _CodegenState {
-  /// The `id` of the `ChangeDetectorDefinition` we are generating this class
-  /// for.
-  final String _changeDetectorDefId;
-
-  /// The name of the `Type` this change detector is generated for. For example,
-  /// this is `MyComponent` if the generated class will detect changes in
-  /// `MyComponent` objects.
-  final String _contextTypeName;
-
-  /// The name of the generated change detector class. This is an implementation
-  /// detail and should not be visible to users.
-  final String _changeDetectorTypeName;
-  final String _changeDetectionMode;
-  final List<ProtoRecord> _records;
-  final List<DirectiveRecord> _directiveRecords;
-  final List<String> _localNames;
-  final List<String> _changeNames;
-  final List<String> _fieldNames;
-  final List<String> _pipeNames;
-
-  _CodegenState._(this._changeDetectorDefId, this._contextTypeName,
-      this._changeDetectorTypeName, String changeDetectionStrategy,
-      this._records, this._directiveRecords, List<String> localNames)
-      : this._localNames = localNames,
-        _changeNames = _getChangeNames(localNames),
-        _fieldNames = _getFieldNames(localNames),
-        _pipeNames = _getPipeNames(localNames),
-        _changeDetectionMode = ChangeDetectionUtil
-            .changeDetectionMode(changeDetectionStrategy);
-
-  factory _CodegenState(String typeName, String changeDetectorTypeName,
-      ChangeDetectorDefinition def) {
-    var protoRecords = new ProtoRecordBuilder();
-    def.bindingRecords
-        .forEach((rec) => protoRecords.add(rec, def.variableNames));
-    var records = coalesce(protoRecords.records);
-    return new _CodegenState._(def.id, typeName, changeDetectorTypeName,
-        def.strategy, records, def.directiveRecords, _getLocalNames(records));
-  }
-
-  /// Generates sanitized names for use as local variables.
-  static List<String> _getLocalNames(List<ProtoRecord> records) {
-    var whitespacePattern = new RegExp(r'\W');
-    var localNames = new List<String>(records.length + 1);
-    localNames[0] = 'context';
-    for (var i = 0; i < records.length; ++i) {
-      var sanitizedName = records[i].name.replaceAll(whitespacePattern, '');
-      localNames[i + 1] = '$sanitizedName$i';
-    }
-    return localNames;
-  }
-
-  /// Generates names for use as local change variables.
-  static List<String> _getChangeNames(List<String> localNames) =>
-      localNames.map((name) => 'change_$name').toList();
-
-  /// Generates names for use as private fields.
-  static List<String> _getFieldNames(List<String> localNames) =>
-      localNames.map((name) => '_$name').toList();
-
-  /// Generates names for use as private pipe variables.
-  static List<String> _getPipeNames(List<String> localNames) =>
-      localNames.map((name) => '_${name}_pipe').toList();
-
-  void _writeToBuf(StringBuffer buf) {
-    buf.write('''
-      class $_changeDetectorTypeName extends $_BASE_CLASS {
-        final dynamic $_DISPATCHER_ACCESSOR;
-        final $_GEN_PREFIX.PipeRegistry $_PIPE_REGISTRY_ACCESSOR;
-        final $_GEN_PREFIX.List<$_GEN_PREFIX.ProtoRecord> $_PROTOS_ACCESSOR;
-        final $_GEN_PREFIX.List<$_GEN_PREFIX.DirectiveRecord>
-            $_DIRECTIVES_ACCESSOR;
-        dynamic $_LOCALS_ACCESSOR = null;
-        dynamic $_ALREADY_CHECKED_ACCESSOR = false;
-        ${_allFields().map((f) {
-          if (f == _CONTEXT_ACCESSOR) {
-            return '$_contextTypeName $f = null;';
-          }
-          return 'dynamic $f = $_UTIL.uninitialized();';
-        }).join('')}
-
-        $_changeDetectorTypeName(
-            this.$_DISPATCHER_ACCESSOR,
-            this.$_PIPE_REGISTRY_ACCESSOR,
-            this.$_PROTOS_ACCESSOR,
-            this.$_DIRECTIVES_ACCESSOR) : super(${JSON.encode(_changeDetectorDefId)});
-
-        void detectChangesInRecords(throwOnChange) {
-          if (!hydrated()) {
-            $_UTIL.throwDehydrated();
-          }
-          ${_genLocalDefinitions()}
-          ${_genChangeDefinitons()}
-          var $_IS_CHANGED_LOCAL = false;
-          var $_CURRENT_PROTO;
-          var $_CHANGES_LOCAL = null;
-
-          context = $_CONTEXT_ACCESSOR;
-          ${_records.map(_genRecord).join('')}
-
-          $_ALREADY_CHECKED_ACCESSOR = true;
-        }
-
-        void callOnAllChangesDone() {
-          ${_getCallOnAllChangesDoneBody()}
-        }
-
-        void hydrate($_contextTypeName context, locals, directives) {
-          $_MODE_ACCESSOR = '$_changeDetectionMode';
-          $_CONTEXT_ACCESSOR = context;
-          $_LOCALS_ACCESSOR = locals;
-          ${_genHydrateDirectives()}
-          ${_genHydrateDetectors()}
-          $_ALREADY_CHECKED_ACCESSOR = false;
-        }
-
-        void dehydrate() {
-          ${_genPipeOnDestroy()}
-          ${_allFields().map((f) {
-            return f == _CONTEXT_ACCESSOR
-              ? '$f = null;'
-              : '$f = $_UTIL.uninitialized();';
-          }).join('')}
-          $_LOCALS_ACCESSOR = null;
-        }
-
-        hydrated() => $_CONTEXT_ACCESSOR != null;
-
-        static $_GEN_PREFIX.ProtoChangeDetector
-            $PROTO_CHANGE_DETECTOR_FACTORY_METHOD(
-            $_GEN_PREFIX.PipeRegistry registry,
-            $_GEN_PREFIX.ChangeDetectorDefinition def) {
-          return new $_GEN_PREFIX.PregenProtoChangeDetector(
-              (a, b, c, d) => new $_changeDetectorTypeName(a, b, c, d),
-              registry, def);
-        }
-      }
-    ''');
-  }
-
-  void _writeInitToBuf(StringBuffer buf) {
-    buf.write('''
-      $_GEN_PREFIX.preGeneratedProtoDetectors['$_changeDetectorDefId'] =
-          $_changeDetectorTypeName.newProtoChangeDetector;
-    ''');
-  }
-
-  List<String> _genGetDirectiveFieldNames() {
-    return _directiveRecords
-        .map((d) => _genGetDirective(d.directiveIndex))
-        .toList();
-  }
-
-  List<String> _genGetDetectorFieldNames() {
-    return _directiveRecords
-        .where((d) => d.isOnPushChangeDetection())
-        .map((d) => _genGetDetector(d.directiveIndex))
-        .toList();
-  }
-
-  String _genGetDirective(DirectiveIndex d) => '_directive_${d.name}';
-  String _genGetDetector(DirectiveIndex d) => '_detector_${d.name}';
-
-  List<String> _getNonNullPipeNames() {
-    return _records
-        .where((r) => r.mode == RecordType.PIPE)
-        .map((r) => _pipeNames[r.selfIndex])
-        .toList();
-  }
-
-  List<String> _allFields() {
-    return new List.from(_fieldNames)
-      ..addAll(_getNonNullPipeNames())
-      ..addAll(_genGetDirectiveFieldNames())
-      ..addAll(_genGetDetectorFieldNames());
-  }
-
-  String _genHydrateDirectives() {
-    var buf = new StringBuffer();
-    var directiveFieldNames = _genGetDirectiveFieldNames();
-    for (var i = 0; i < directiveFieldNames.length; ++i) {
-      buf.writeln('${directiveFieldNames[i]} = directives.getDirectiveFor('
-          '$_DIRECTIVES_ACCESSOR[$i].directiveIndex);');
-    }
-    return '$buf';
-  }
-
-  String _genHydrateDetectors() {
-    var buf = new StringBuffer();
-    var detectorFieldNames = _genGetDetectorFieldNames();
-    for (var i = 0; i < detectorFieldNames.length; ++i) {
-      buf.writeln('${detectorFieldNames[i]} = directives.getDetectorFor('
-          '$_DIRECTIVES_ACCESSOR[$i].directiveIndex);');
-    }
-    return '$buf';
-  }
-
-  String _genPipeOnDestroy() =>
-      _getNonNullPipeNames().map((p) => '$p.onDestroy();').join('');
-
-  /// Generates calls to `onAllChangesDone` for all `Directive`s that request
-  /// them.
-  String _getCallOnAllChangesDoneBody() {
-    // NOTE(kegluneq): Order is important!
-    var directiveNotifications = _directiveRecords.reversed
-        .where((rec) => rec.callOnAllChangesDone)
-        .map((rec) =>
-            '${_genGetDirective(rec.directiveIndex)}.onAllChangesDone();')
-        .join('');
-    return '''
-      _dispatcher.notifyOnAllChangesDone();
-      ${directiveNotifications}
-    ''';
-  }
-
-  String _genLocalDefinitions() =>
-      _localNames.map((name) => 'var $name = null;').join('');
-
-  String _genChangeDefinitons() =>
-      _changeNames.map((name) => 'var $name = false;').join('');
-
-  String _genRecord(ProtoRecord r) {
-    var rec = null;
-    if (r.isLifeCycleRecord()) {
-      rec = _genDirectiveLifecycle(r);
-    } else if (r.isPipeRecord()) {
-      rec = _genPipeCheck(r);
-    } else {
-      rec = _genReferenceCheck(r);
-    }
-    return '$rec${_maybeGenLastInDirective(r)}';
-  }
-
-  String _genDirectiveLifecycle(ProtoRecord r) {
-    if (r.name == 'onCheck') {
-      return _genOnCheck(r);
-    } else if (r.name == 'onInit') {
-      return _genOnInit(r);
-    } else if (r.name == 'onChange') {
-      return _genOnChange(r);
-    } else {
-      throw new BaseException("Unknown lifecycle event '${r.name}'");
-    }
-  }
-
-  String _genPipeCheck(ProtoRecord r) {
-    var context = _localNames[r.contextIndex];
-    var argString = r.args.map((arg) => this._localNames[arg]).join(", ");
-
-    var oldValue = _fieldNames[r.selfIndex];
-    var newValue = _localNames[r.selfIndex];
-    var change = _changeNames[r.selfIndex];
-
-    var pipe = _pipeNames[r.selfIndex];
-    var cdRef = 'this.ref';
-
-    var protoIndex = r.selfIndex - 1;
-    var pipeType = r.name;
-    return '''
-      $_CURRENT_PROTO = $_PROTOS_ACCESSOR[$protoIndex];
-      if ($_IDENTICAL_CHECK_FN($pipe, $_UTIL.uninitialized())) {
-        $pipe = $_PIPE_REGISTRY_ACCESSOR.get('$pipeType', $context, $cdRef);
-      } else if (!$pipe.supports($context)) {
-        $pipe.onDestroy();
-        $pipe = $_PIPE_REGISTRY_ACCESSOR.get('$pipeType', $context, $cdRef);
-      }
-
-      $newValue = $pipe.transform($context, [$argString]);
-      if (!$_IDENTICAL_CHECK_FN($oldValue, $newValue)) {
-        $newValue = $_UTIL.unwrapValue($newValue);
-        $change = true;
-        ${_genUpdateDirectiveOrElement(r)}
-        ${_genAddToChanges(r)}
-        $oldValue = $newValue;
-      }
-    ''';
-  }
-
-  String _genReferenceCheck(ProtoRecord r) {
-    var oldValue = _fieldNames[r.selfIndex];
-    var newValue = _localNames[r.selfIndex];
-
-    var protoIndex = r.selfIndex - 1;
-    var check = '''
-      $_CURRENT_PROTO = $_PROTOS_ACCESSOR[$protoIndex];
-      ${_genUpdateCurrentValue(r)}
-      if (!$_IDENTICAL_CHECK_FN($newValue, $oldValue)) {
-        ${_changeNames[r.selfIndex]} = true;
-        ${_genUpdateDirectiveOrElement(r)}
-        ${_genAddToChanges(r)}
-        $oldValue = $newValue;
-      }
-    ''';
-    if (r.isPureFunction()) {
-      // Add an "if changed guard"
-      var condition = r.args.map((a) => _changeNames[a]).join(' || ');
-      return 'if ($condition) { $check } else { $newValue = $oldValue; }';
-    } else {
-      return check;
-    }
-  }
-
-  String _genUpdateCurrentValue(ProtoRecord r) {
-    var context = r.contextIndex == -1
-        ? _genGetDirective(r.directiveIndex)
-        : _localNames[r.contextIndex];
-
-    var newValue = _localNames[r.selfIndex];
-    var argString = r.args.map((arg) => _localNames[arg]).join(', ');
-
-    var rhs;
-    switch (r.mode) {
-      case RecordType.SELF:
-        rhs = context;
-        break;
-
-      case RecordType.CONST:
-        rhs = JSON.encode(r.funcOrValue);
-        break;
-
-      case RecordType.PROPERTY:
-        rhs = '$context.${r.name}';
-        break;
-
-      case RecordType.SAFE_PROPERTY:
-        rhs = '${_UTIL}.isValueBlank(${context}) ? null : ${context}.${r.name}';
-        break;
-
-      case RecordType.LOCAL:
-        rhs = '$_LOCALS_ACCESSOR.get("${r.name}")';
-        break;
-
-      case RecordType.INVOKE_METHOD:
-        rhs = '$context.${r.name}($argString)';
-        break;
-
-      case RecordType.SAFE_INVOKE_METHOD:
-        rhs = '${_UTIL}.isValueBlank(${context}) '
-            '? null : ${context}.${r.name}(${argString})';
-        break;
-
-      case RecordType.INVOKE_CLOSURE:
-        rhs = '$context($argString)';
-        break;
-
-      case RecordType.PRIMITIVE_OP:
-        rhs = '$_UTIL.${r.name}($argString)';
-        break;
-
-      case RecordType.INTERPOLATE:
-        rhs = _genInterpolation(r);
-        break;
-
-      case RecordType.KEYED_ACCESS:
-        rhs = '$context[${_localNames[r.args[0]]}]';
-        break;
-
-      default:
-        throw new FormatException(
-            'Unknown operation ${r.mode}', r.expressionAsString);
-    }
-    return '$newValue = $rhs;';
-  }
-
-  String _genInterpolation(ProtoRecord r) {
-    var res = new StringBuffer();
-    for (var i = 0; i < r.args.length; ++i) {
-      res.write('${JSON.encode(r.fixedArgs[i])} + ${_localNames[r.args[i]]} +');
-    }
-    res.write(JSON.encode(r.fixedArgs[r.args.length]));
-    return '$res';
-  }
-
-  String _genUpdateDirectiveOrElement(ProtoRecord r) {
-    if (!r.lastInBinding) return '';
-
-    var newValue = _localNames[r.selfIndex];
-    var oldValue = _fieldNames[r.selfIndex];
-
-    var br = r.bindingRecord;
-    if (br.isDirective()) {
-      var directiveProperty =
-          '${_genGetDirective(br.directiveRecord.directiveIndex)}.${br.propertyName}';
-      return '''
-      ${_genThrowOnChangeCheck(oldValue, newValue)}
-      $directiveProperty = $newValue;
-      $_IS_CHANGED_LOCAL = true;
-    ''';
-    } else {
-      return '''
-      ${_genThrowOnChangeCheck(oldValue, newValue)}
-      $_DISPATCHER_ACCESSOR.notifyOnBinding(
-          $_CURRENT_PROTO.bindingRecord, ${newValue});
-    ''';
-    }
-  }
-
-  String _genThrowOnChangeCheck(String oldValue, String newValue) {
-    return '''
-      if(throwOnChange) {
-        $_UTIL.throwOnChange(
-            $_CURRENT_PROTO, $_UTIL.simpleChange(${oldValue}, ${newValue}));
-      }
-    ''';
-  }
-
-  String _genAddToChanges(ProtoRecord r) {
-    var newValue = _localNames[r.selfIndex];
-    var oldValue = _fieldNames[r.selfIndex];
-    if (!r.bindingRecord.callOnChange()) return '';
-    return '''
-      $_CHANGES_LOCAL = $_UTIL.addChange(
-          $_CHANGES_LOCAL,
-          $_CURRENT_PROTO.bindingRecord.propertyName,
-          $_UTIL.simpleChange($oldValue, $newValue));
-    ''';
-  }
-
-  String _maybeGenLastInDirective(ProtoRecord r) {
-    if (!r.lastInDirective) return '';
-    return '''
-      $_CHANGES_LOCAL = null;
-      ${_genNotifyOnPushDetectors(r)}
-      $_IS_CHANGED_LOCAL = false;
-    ''';
-  }
-
-  String _genOnCheck(ProtoRecord r) {
-    var br = r.bindingRecord;
-    return 'if (!throwOnChange) '
-        '${_genGetDirective(br.directiveRecord.directiveIndex)}.onCheck();';
-  }
-
-  String _genOnInit(ProtoRecord r) {
-    var br = r.bindingRecord;
-    return 'if (!throwOnChange && !$_ALREADY_CHECKED_ACCESSOR) '
-        '${_genGetDirective(br.directiveRecord.directiveIndex)}.onInit();';
-  }
-
-  String _genOnChange(ProtoRecord r) {
-    var br = r.bindingRecord;
-    return 'if (!throwOnChange && $_CHANGES_LOCAL != null) '
-        '${_genGetDirective(br.directiveRecord.directiveIndex)}'
-        '.onChange($_CHANGES_LOCAL);';
-  }
-
-  String _genNotifyOnPushDetectors(ProtoRecord r) {
-    var br = r.bindingRecord;
-    if (!r.lastInDirective || !br.isOnPushChangeDetection()) return '';
-    return '''
-      if($_IS_CHANGED_LOCAL) {
-        ${_genGetDetector(br.directiveRecord.directiveIndex)}.markAsCheckOnce();
-      }
-    ''';
-  }
-}
-
-const PROTO_CHANGE_DETECTOR_FACTORY_METHOD = 'newProtoChangeDetector';
-
-const _ALREADY_CHECKED_ACCESSOR = '_alreadyChecked';
-const _BASE_CLASS = '$_GEN_PREFIX.AbstractChangeDetector';
-const _CHANGES_LOCAL = 'changes';
-const _CONTEXT_ACCESSOR = '_context';
-const _CURRENT_PROTO = 'currentProto';
-const _DIRECTIVES_ACCESSOR = '_directiveRecords';
-const _DISPATCHER_ACCESSOR = '_dispatcher';
-const _GEN_PREFIX = '_gen';
-const _GEN_RECORDS_METHOD_NAME = '_createRecords';
-const _IDENTICAL_CHECK_FN = '$_GEN_PREFIX.looseIdentical';
-const _IS_CHANGED_LOCAL = 'isChanged';
-const _LOCALS_ACCESSOR = '_locals';
-const _MODE_ACCESSOR = 'mode';
-const _PREGEN_PROTO_CHANGE_DETECTOR_IMPORT =
-    'package:angular2/src/change_detection/pregen_proto_change_detector.dart';
-const _PIPE_REGISTRY_ACCESSOR = '_pipeRegistry';
-const _PROTOS_ACCESSOR = '_protos';
-const _UTIL = '$_GEN_PREFIX.ChangeDetectionUtil';
diff --git a/modules/angular2/src/transform/template_compiler/compile_step_factory.dart b/modules/angular2/src/transform/template_compiler/compile_step_factory.dart
deleted file mode 100644
index c665cbdcd5fc..000000000000
--- a/modules/angular2/src/transform/template_compiler/compile_step_factory.dart
+++ /dev/null
@@ -1,25 +0,0 @@
-library angular2.transform.template_compiler.compile_step_factory;
-
-import 'package:angular2/src/change_detection/parser/parser.dart' as ng;
-import 'package:angular2/src/render/api.dart';
-import 'package:angular2/src/render/dom/compiler/compile_step.dart';
-import 'package:angular2/src/render/dom/compiler/compile_step_factory.dart'
-    as base;
-import 'package:angular2/src/render/dom/compiler/directive_parser.dart';
-import 'package:angular2/src/render/dom/compiler/property_binding_parser.dart';
-import 'package:angular2/src/render/dom/compiler/text_interpolation_parser.dart';
-import 'package:angular2/src/render/dom/compiler/view_splitter.dart';
-
-class CompileStepFactory implements base.CompileStepFactory {
-  final ng.Parser _parser;
-  CompileStepFactory(this._parser);
-
-  List<CompileStep> createSteps(ViewDefinition template) {
-    return [
-      new ViewSplitter(_parser),
-      new PropertyBindingParser(_parser),
-      new DirectiveParser(_parser, template.directives),
-      new TextInterpolationParser(_parser)
-    ];
-  }
-}
diff --git a/modules/angular2/src/transform/template_compiler/generator.dart b/modules/angular2/src/transform/template_compiler/generator.dart
deleted file mode 100644
index 07edd8596f39..000000000000
--- a/modules/angular2/src/transform/template_compiler/generator.dart
+++ /dev/null
@@ -1,125 +0,0 @@
-library angular2.transform.template_compiler.generator;
-
-import 'dart:async';
-
-import 'package:angular2/src/change_detection/parser/lexer.dart' as ng;
-import 'package:angular2/src/change_detection/parser/parser.dart' as ng;
-import 'package:angular2/src/core/compiler/proto_view_factory.dart';
-import 'package:angular2/src/render/api.dart';
-import 'package:angular2/src/render/dom/compiler/compile_pipeline.dart';
-import 'package:angular2/src/render/dom/compiler/style_inliner.dart';
-import 'package:angular2/src/render/dom/compiler/style_url_resolver.dart';
-import 'package:angular2/src/render/dom/compiler/view_loader.dart';
-import 'package:angular2/src/render/xhr.dart' show XHR;
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/services/url_resolver.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/xhr_impl.dart';
-import 'package:barback/barback.dart';
-
-import 'change_detector_codegen.dart' as change;
-import 'compile_step_factory.dart';
-import 'reflection_capabilities.dart';
-import 'reflector_register_codegen.dart' as reg;
-import 'view_definition_creator.dart';
-
-/// Reads the `.ng_deps.dart` file represented by `entryPoint` and parses any
-/// Angular 2 `View` annotations it declares to generate `getter`s,
-/// `setter`s, and `method`s that would otherwise be reflectively accessed.
-///
-/// This method assumes a {@link DomAdapter} has been registered.
-Future<String> processTemplates(AssetReader reader, AssetId entryPoint,
-    {bool generateRegistrations: true,
-    bool generateChangeDetectors: true}) async {
-  var viewDefResults = await createViewDefinitions(reader, entryPoint);
-  var extractor = new _TemplateExtractor(new XhrImpl(reader, entryPoint));
-
-  var registrations = new reg.Codegen();
-  var changeDetectorClasses = new change.Codegen();
-  for (var rType in viewDefResults.viewDefinitions.keys) {
-    var viewDefEntry = viewDefResults.viewDefinitions[rType];
-    var result = await extractor.extractTemplates(viewDefEntry.viewDef);
-    if (result == null) continue;
-
-    if (generateRegistrations) {
-      // TODO(kegluneq): Generate these getters & setters based on the
-      // `ProtoViewDto` rather than querying the `ReflectionCapabilities`.
-      registrations.generate(result.recording);
-    }
-    if (result.protoView != null && generateChangeDetectors) {
-      var saved = reflector.reflectionCapabilities;
-      reflector.reflectionCapabilities = const NullReflectionCapabilities();
-      var defs = getChangeDetectorDefinitions(viewDefEntry.hostMetadata,
-          result.protoView, viewDefEntry.viewDef.directives);
-      for (var i = 0; i < defs.length; ++i) {
-        changeDetectorClasses.generate('${rType.typeName}',
-            '_${rType.typeName}_ChangeDetector$i', defs[i]);
-      }
-      reflector.reflectionCapabilities = saved;
-    }
-  }
-
-  var code = viewDefResults.ngDeps.code;
-  if (registrations.isEmpty && changeDetectorClasses.isEmpty) return code;
-  var importInjectIdx =
-      viewDefResults.ngDeps.lib != null ? viewDefResults.ngDeps.lib.end : 0;
-  var codeInjectIdx =
-      viewDefResults.ngDeps.registeredTypes.last.registerMethod.end;
-  var initInjectIdx = viewDefResults.ngDeps.setupMethod.end - 1;
-  return '${code.substring(0, importInjectIdx)}'
-      '${changeDetectorClasses.imports}'
-      '${code.substring(importInjectIdx, codeInjectIdx)}'
-      '${registrations}'
-      '${code.substring(codeInjectIdx, initInjectIdx)}'
-      '${changeDetectorClasses.initialize}'
-      '${code.substring(initInjectIdx)}'
-      '$changeDetectorClasses';
-}
-
-/// Extracts `template` and `url` values from `View` annotations, reads
-/// template code if necessary, and determines what values will be
-/// reflectively accessed from that template.
-class _TemplateExtractor {
-  final CompileStepFactory _factory;
-  ViewLoader _loader;
-
-  _TemplateExtractor(XHR xhr)
-      : _factory = new CompileStepFactory(new ng.Parser(new ng.Lexer())) {
-    var urlResolver = new UrlResolver();
-    var styleUrlResolver = new StyleUrlResolver(urlResolver);
-    var styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
-
-    _loader = new ViewLoader(xhr, styleInliner, styleUrlResolver);
-  }
-
-  Future<_ExtractResult> extractTemplates(ViewDefinition viewDef) async {
-    // Check for "imperative views".
-    if (viewDef.template == null && viewDef.templateAbsUrl == null) return null;
-
-    var templateEl = await _loader.load(viewDef);
-
-    // NOTE(kegluneq): Since this is a global, we must not have any async
-    // operations between saving and restoring it, otherwise we can get into
-    // a bad state. See issue #2359 for additional context.
-    var savedReflectionCapabilities = reflector.reflectionCapabilities;
-    var recordingCapabilities = new RecordingReflectionCapabilities();
-    reflector.reflectionCapabilities = recordingCapabilities;
-
-    var pipeline = new CompilePipeline(_factory.createSteps(viewDef));
-
-    var compileElements =
-        pipeline.process(templateEl, ViewType.COMPONENT, viewDef.componentId);
-    var protoViewDto = compileElements[0].inheritedProtoView.build();
-
-    reflector.reflectionCapabilities = savedReflectionCapabilities;
-
-    return new _ExtractResult(recordingCapabilities, protoViewDto);
-  }
-}
-
-class _ExtractResult {
-  final RecordingReflectionCapabilities recording;
-  final ProtoViewDto protoView;
-
-  _ExtractResult(this.recording, this.protoView);
-}
diff --git a/modules/angular2/src/transform/template_compiler/reflection_capabilities.dart b/modules/angular2/src/transform/template_compiler/reflection_capabilities.dart
deleted file mode 100644
index 90e91cc5636d..000000000000
--- a/modules/angular2/src/transform/template_compiler/reflection_capabilities.dart
+++ /dev/null
@@ -1,57 +0,0 @@
-library angular2.transform.template_compiler.reflection_capabilities;
-
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'package:angular2/src/reflection/types.dart';
-
-/// ReflectionCapabilities object that responds to all requests for `getter`s,
-/// `setter`s, and `method`s with `null`.
-class NullReflectionCapabilities implements ReflectionCapabilities {
-  const NullReflectionCapabilities();
-
-  _notImplemented(String name) => throw 'Not implemented: $name';
-
-  Function factory(Type type) => _notImplemented('factory');
-
-  List<List> parameters(typeOrFunc) => _notImplemented('parameters');
-
-  List<List> interfaces(typeOrFunc) => _notImplemented('interfaces');
-
-  List annotations(typeOrFunc) => _notImplemented('annotations');
-
-  GetterFn getter(String name) => _nullGetter;
-
-  SetterFn setter(String name) => _nullSetter;
-
-  MethodFn method(String name) => _nullMethod;
-}
-
-_nullGetter(Object p) => null;
-_nullSetter(Object p, v) => null;
-_nullMethod(Object p, List a) => null;
-
-/// ReflectionCapabilities object that records requests for `getter`s,
-/// `setter`s, and `method`s so these can be code generated rather than
-/// reflectively accessed at runtime.
-class RecordingReflectionCapabilities extends NullReflectionCapabilities {
-  /// The names of all requested `getter`s.
-  final Set<String> getterNames = new Set<String>();
-  /// The names of all requested `setter`s.
-  final Set<String> setterNames = new Set<String>();
-  /// The names of all requested `method`s.
-  final Set<String> methodNames = new Set<String>();
-
-  GetterFn getter(String name) {
-    getterNames.add(name);
-    return super.getter(name);
-  }
-
-  SetterFn setter(String name) {
-    setterNames.add(name);
-    return super.setter(name);
-  }
-
-  MethodFn method(String name) {
-    methodNames.add(name);
-    return super.method(name);
-  }
-}
diff --git a/modules/angular2/src/transform/template_compiler/reflector_register_codegen.dart b/modules/angular2/src/transform/template_compiler/reflector_register_codegen.dart
deleted file mode 100644
index 90225bfebdb9..000000000000
--- a/modules/angular2/src/transform/template_compiler/reflector_register_codegen.dart
+++ /dev/null
@@ -1,69 +0,0 @@
-library angular2.transform.template_compiler.reflector_register_codegen;
-
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:angular2/src/transform/common/property_utils.dart' as prop;
-import 'reflection_capabilities.dart';
-
-class Codegen {
-  final StringBuffer _buf = new StringBuffer();
-
-  void generate(RecordingReflectionCapabilities recording) {
-    if (recording != null) {
-      var calls = _generateGetters(recording.getterNames);
-      if (calls.isNotEmpty) {
-        _buf.write('..${REGISTER_GETTERS_METHOD_NAME}'
-            '({${calls.join(', ')}})');
-      }
-      calls = _generateSetters(recording.setterNames);
-      if (calls.isNotEmpty) {
-        _buf.write('..${REGISTER_SETTERS_METHOD_NAME}'
-            '({${calls.join(', ')}})');
-      }
-      calls = _generateMethods(recording.methodNames);
-      if (calls.isNotEmpty) {
-        _buf.write('..${REGISTER_METHODS_METHOD_NAME}'
-            '({${calls.join(', ')}})');
-      }
-    }
-  }
-
-  bool get isEmpty => _buf.isEmpty;
-
-  @override
-  String toString() => '$_buf';
-}
-
-Iterable<String> _generateGetters(Iterable<String> getterNames) {
-  return getterNames.map((getterName) {
-    if (!prop.isValid(getterName)) {
-      // TODO(kegluenq): Eagerly throw here once #1295 is addressed.
-      return prop.lazyInvalidGetter(getterName);
-    } else {
-      return ''' '${prop.sanitize(getterName)}': (o) => o.$getterName''';
-    }
-  });
-}
-
-Iterable<String> _generateSetters(Iterable<String> setterName) {
-  return setterName.map((setterName) {
-    if (!prop.isValid(setterName)) {
-      // TODO(kegluenq): Eagerly throw here once #1295 is addressed.
-      return prop.lazyInvalidSetter(setterName);
-    } else {
-      return ''' '${prop.sanitize(setterName)}': '''
-          ''' (o, v) => o.$setterName = v ''';
-    }
-  });
-}
-
-Iterable<String> _generateMethods(Iterable<String> methodNames) {
-  return methodNames.map((methodName) {
-    if (!prop.isValid(methodName)) {
-      // TODO(kegluenq): Eagerly throw here once #1295 is addressed.
-      return prop.lazyInvalidMethod(methodName);
-    } else {
-      return ''' '${prop.sanitize(methodName)}': '''
-          '(o, List args) => Function.apply(o.$methodName, args) ';
-    }
-  });
-}
diff --git a/modules/angular2/src/transform/template_compiler/transformer.dart b/modules/angular2/src/transform/template_compiler/transformer.dart
deleted file mode 100644
index 575a89d2e1e5..000000000000
--- a/modules/angular2/src/transform/template_compiler/transformer.dart
+++ /dev/null
@@ -1,46 +0,0 @@
-library angular2.transform.template_compiler.transformer;
-
-import 'dart:async';
-
-import 'package:angular2/src/dom/html_adapter.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/formatter.dart';
-import 'package:angular2/src/transform/common/logging.dart' as log;
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:barback/barback.dart';
-
-import 'generator.dart';
-
-/// {@link Transformer} responsible for detecting and processing Angular 2 templates.
-///
-/// {@link TemplateCompiler} uses the Angular 2 `Compiler` to process the templates,
-/// extracting information about what reflection is necessary to render and
-/// use that template. It then generates code in place of those reflective
-/// accesses.
-class TemplateCompiler extends Transformer {
-  final TransformerOptions options;
-
-  TemplateCompiler(this.options);
-
-  @override
-  bool isPrimary(AssetId id) => id.path.endsWith(DEPS_EXTENSION);
-
-  @override
-  Future apply(Transform transform) async {
-    log.init(transform);
-
-    try {
-      Html5LibDomAdapter.makeCurrent();
-      var id = transform.primaryInput.id;
-      var reader = new AssetReader.fromTransform(transform);
-      var transformedCode = formatter.format(await processTemplates(reader, id,
-          generateChangeDetectors: options.generateChangeDetectors));
-      transform.addOutput(new Asset.fromString(id, transformedCode));
-    } catch (ex, stackTrace) {
-      log.logger.error('Parsing ng templates failed.\n'
-          'Exception: $ex\n'
-          'Stack Trace: $stackTrace');
-    }
-  }
-}
diff --git a/modules/angular2/src/transform/template_compiler/view_definition_creator.dart b/modules/angular2/src/transform/template_compiler/view_definition_creator.dart
deleted file mode 100644
index 701dd06d754e..000000000000
--- a/modules/angular2/src/transform/template_compiler/view_definition_creator.dart
+++ /dev/null
@@ -1,256 +0,0 @@
-library angular2.transform.template_compiler.view_definition_creator;
-
-import 'dart:async';
-import 'dart:convert';
-
-import 'package:analyzer/analyzer.dart';
-import 'package:angular2/src/render/api.dart';
-import 'package:angular2/src/render/dom/convert.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-import 'package:angular2/src/transform/common/names.dart';
-import 'package:angular2/src/transform/common/ng_deps.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/assets.dart';
-
-/// Creates [ViewDefinition] objects for all `View` `Directive`s defined in
-/// `entryPoint`.
-Future<ViewDefinitionResults> createViewDefinitions(
-    AssetReader reader, AssetId entryPoint) async {
-  return await new _ViewDefinitionCreator(reader, entryPoint).createViewDefs();
-}
-
-class ViewDefinitionResults {
-  final NgDeps ngDeps;
-  final Map<RegisteredType, ViewDefinitionEntry> viewDefinitions;
-  ViewDefinitionResults._(this.ngDeps, this.viewDefinitions);
-}
-
-class ViewDefinitionEntry {
-  final DirectiveMetadata hostMetadata;
-  final ViewDefinition viewDef;
-
-  ViewDefinitionEntry._(this.hostMetadata, this.viewDef);
-}
-
-String _getComponentId(AssetId assetId, String className) => '$className';
-
-// TODO(kegluenq): Improve this test.
-bool _isViewAnnotation(InstanceCreationExpression node) =>
-    '${node.constructorName.type}' == 'View';
-
-/// Creates [ViewDefinition] objects for all `View` `Directive`s defined in
-/// `entryPoint`.
-class _ViewDefinitionCreator {
-  final AssetReader reader;
-  final AssetId entryPoint;
-  final Future<NgDeps> ngDepsFuture;
-
-  _ViewDefinitionCreator(AssetReader reader, AssetId entryPoint)
-      : this.reader = reader,
-        this.entryPoint = entryPoint,
-        ngDepsFuture = NgDeps.parse(reader, entryPoint);
-
-  Future<ViewDefinitionResults> createViewDefs() async {
-    var ngDeps = await ngDepsFuture;
-
-    var retVal = <RegisteredType, ViewDefinitionEntry>{};
-    var visitor = new _TemplateExtractVisitor(await _createMetadataMap());
-    ngDeps.registeredTypes.forEach((rType) {
-      visitor.reset();
-      rType.annotations.accept(visitor);
-      if (visitor.viewDef != null) {
-        var typeName = '${rType.typeName}';
-        var hostMetadata = null;
-        if (visitor._metadataMap.containsKey(typeName)) {
-          hostMetadata = visitor._metadataMap[typeName];
-          visitor.viewDef.componentId = hostMetadata.id;
-        } else {
-          logger.error('Missing component "$typeName" in metadata map',
-              asset: entryPoint);
-          visitor.viewDef.componentId = _getComponentId(entryPoint, typeName);
-        }
-        retVal[rType] =
-            new ViewDefinitionEntry._(hostMetadata, visitor.viewDef);
-      }
-    });
-    return new ViewDefinitionResults._(ngDeps, retVal);
-  }
-
-  /// Creates a map from [AssetId] to import prefix for `.dart` libraries
-  /// imported by `entryPoint`, excluding any `.ng_deps.dart` files it imports.
-  /// Unprefixed imports have `null` as their value. `entryPoint` is included
-  /// in the map with no prefix.
-  Future<Map<AssetId, String>> _createImportAssetToPrefixMap() async {
-    // TODO(kegluneq): Support `part` directives.
-    var ngDeps = await ngDepsFuture;
-
-    var importAssetToPrefix = <AssetId, String>{};
-    // Include the `.ng_meta.dart` file associated with `entryPoint`.
-    importAssetToPrefix[new AssetId(
-        entryPoint.package, toMetaExtension(entryPoint.path))] = null;
-
-    for (ImportDirective node in ngDeps.imports) {
-      var uri = stringLiteralToString(node.uri);
-      if (uri.endsWith('.dart') && !uri.endsWith(DEPS_EXTENSION)) {
-        var prefix = node.prefix != null && node.prefix.name != null
-            ? '${node.prefix.name}'
-            : null;
-        importAssetToPrefix[uriToAssetId(
-            entryPoint, uri, logger, null /* span */,
-            errorOnAbsolute: false)] = prefix;
-      }
-    }
-    return importAssetToPrefix;
-  }
-
-  /// Reads the `.ng_meta.json` files associated with all of `entryPoint`'s
-  /// imports and creates a map `Type` name, prefixed if appropriate to the
-  /// associated [DirectiveMetadata].
-  ///
-  /// For example, if in `entryPoint` we have:
-  ///
-  /// ```
-  /// import 'component.dart' as prefix;
-  /// ```
-  ///
-  /// and in 'component.dart' we have:
-  ///
-  /// ```
-  /// @Component(...)
-  /// class MyComponent {...}
-  /// ```
-  ///
-  /// This method will look for `component.ng_meta.json`to contain the
-  /// serialized [DirectiveMetadata] for `MyComponent` and any other
-  /// `Directive`s declared in `component.dart`. We use this information to
-  /// build a map:
-  ///
-  /// ```
-  /// {
-  ///   "prefix.MyComponent": [DirectiveMetadata for MyComponent],
-  ///   ...<any other entries>...
-  /// }
-  /// ```
-  Future<Map<String, DirectiveMetadata>> _createMetadataMap() async {
-    var importAssetToPrefix = await _createImportAssetToPrefixMap();
-
-    var retVal = <String, DirectiveMetadata>{};
-    for (var importAssetId in importAssetToPrefix.keys) {
-      var metaAssetId = new AssetId(
-          importAssetId.package, toMetaExtension(importAssetId.path));
-      if (await reader.hasInput(metaAssetId)) {
-        try {
-          var json = await reader.readAsString(metaAssetId);
-          var jsonMap = JSON.decode(json);
-          jsonMap.forEach((className, metaDataMap) {
-            var prefixStr = importAssetToPrefix[importAssetId];
-            var key = prefixStr != null ? '$prefixStr.$className' : className;
-            var value = directiveMetadataFromMap(metaDataMap)
-              ..id = _getComponentId(importAssetId, className);
-            retVal[key] = value;
-          });
-        } catch (ex, stackTrace) {
-          logger.warning('Failed to decode: $ex, $stackTrace',
-              asset: metaAssetId);
-        }
-      }
-    }
-    return retVal;
-  }
-}
-
-/// Visitor responsible for processing the `annotations` property of a
-/// [RegisterType] object and pulling out [ViewDefinition] information.
-class _TemplateExtractVisitor extends Object with RecursiveAstVisitor<Object> {
-  ViewDefinition viewDef = null;
-  final Map<String, DirectiveMetadata> _metadataMap;
-  final ConstantEvaluator _evaluator = new ConstantEvaluator();
-
-  _TemplateExtractVisitor(this._metadataMap);
-
-  void reset() {
-    viewDef = null;
-  }
-
-  /// These correspond to the annotations themselves.
-  @override
-  Object visitInstanceCreationExpression(InstanceCreationExpression node) {
-    if (_isViewAnnotation(node)) {
-      viewDef = new ViewDefinition(directives: <DirectiveMetadata>[]);
-      node.visitChildren(this);
-    }
-    return null;
-  }
-
-  /// These correspond to the annotation parameters.
-  @override
-  Object visitNamedExpression(NamedExpression node) {
-    // TODO(kegluneq): Remove this limitation.
-    if (node.name is! Label || node.name.label is! SimpleIdentifier) {
-      logger.error(
-          'Angular 2 currently only supports simple identifiers in directives.'
-          ' Source: ${node}');
-      return null;
-    }
-    var keyString = '${node.name.label}';
-    if (keyString == 'directives') {
-      _readDirectives(node.expression);
-    }
-    if (keyString == 'template' || keyString == 'templateUrl') {
-      // This could happen in a non-View annotation with a `template` or
-      // `templateUrl` property.
-      if (viewDef == null) return null;
-
-      var valueString = node.expression.accept(_evaluator);
-      if (valueString is! String) {
-        logger.error(
-            'Angular 2 currently only supports string literals in directives.'
-            ' Source: ${node}');
-        return null;
-      }
-      if (keyString == 'templateUrl') {
-        if (viewDef.templateAbsUrl != null) {
-          logger.error(
-              'Found multiple values for "templateUrl". Source: ${node}');
-        }
-        viewDef.templateAbsUrl = valueString;
-      } else {
-        // keyString == 'template'
-        if (viewDef.template != null) {
-          logger.error('Found multiple values for "template". Source: ${node}');
-        }
-        viewDef.template = valueString;
-      }
-    }
-    return null;
-  }
-
-  void _readDirectives(Expression node) {
-    // This could happen in a non-View annotation with a `directives`
-    // parameter.
-    if (viewDef == null) return;
-
-    if (node is! ListLiteral) {
-      logger.error(
-          'Angular 2 currently only supports list literals as values for'
-          ' "directives". Source: $node');
-      return;
-    }
-    var directiveList = (node as ListLiteral);
-    for (var node in directiveList.elements) {
-      if (node is! SimpleIdentifier && node is! PrefixedIdentifier) {
-        logger.error(
-            'Angular 2 currently only supports simple and prefixed identifiers '
-            'as values for "directives". Source: $node');
-        return;
-      }
-      var name = '$node';
-      if (_metadataMap.containsKey(name)) {
-        viewDef.directives.add(_metadataMap[name]);
-      } else {
-        logger.warning('Could not find Directive entry for $name');
-      }
-    }
-  }
-}
diff --git a/modules/angular2/src/transform/transformer.dart b/modules/angular2/src/transform/transformer.dart
deleted file mode 100644
index 270444ffc1cf..000000000000
--- a/modules/angular2/src/transform/transformer.dart
+++ /dev/null
@@ -1,42 +0,0 @@
-library angular2.transform;
-
-import 'package:barback/barback.dart';
-import 'package:dart_style/dart_style.dart';
-
-import 'directive_linker/transformer.dart';
-import 'directive_metadata_extractor/transformer.dart';
-import 'directive_processor/transformer.dart';
-import 'bind_generator/transformer.dart';
-import 'reflection_remover/transformer.dart';
-import 'template_compiler/transformer.dart';
-import 'common/formatter.dart' as formatter;
-import 'common/options.dart';
-import 'common/options_reader.dart';
-
-export 'common/options.dart';
-
-/// Replaces Angular 2 mirror use with generated code.
-class AngularTransformerGroup extends TransformerGroup {
-  AngularTransformerGroup._(phases) : super(phases) {
-    formatter.init(new DartFormatter());
-  }
-
-  factory AngularTransformerGroup(TransformerOptions options) {
-    var phases = [
-      [new ReflectionRemover(options)],
-      [new DirectiveProcessor(options)]
-    ];
-    phases.addAll(new List.generate(
-        options.optimizationPhases, (_) => [new EmptyNgDepsRemover()]));
-    phases.addAll([
-      [new DirectiveLinker(), new DirectiveMetadataExtractor()],
-      [new BindGenerator(options)],
-      [new TemplateCompiler(options)]
-    ]);
-    return new AngularTransformerGroup._(phases);
-  }
-
-  factory AngularTransformerGroup.asPlugin(BarbackSettings settings) {
-    return new AngularTransformerGroup(parseBarbackSettings(settings));
-  }
-}
diff --git a/modules/angular2/src/util/decorators.dart b/modules/angular2/src/util/decorators.dart
deleted file mode 100644
index e26022dc050e..000000000000
--- a/modules/angular2/src/util/decorators.dart
+++ /dev/null
@@ -1 +0,0 @@
-library util_decorators;
diff --git a/modules/angular2/src/util/decorators.ts b/modules/angular2/src/util/decorators.ts
deleted file mode 100644
index 577fc5ff05ce..000000000000
--- a/modules/angular2/src/util/decorators.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import {global, Type, isFunction, stringify} from 'angular2/src/facade/lang';
-
-export interface ClassDefinition {
-  extends?: Type;
-  constructor: (Function | Array<any>);
-}
-
-export interface TypeDecorator {
-  (cls: any): any;
-  annotations: Array<any>;
-  Class(obj: ClassDefinition): Type;
-}
-
-function extractAnnotation(annotation: any): any {
-  if (isFunction(annotation) && annotation.hasOwnProperty('annotation')) {
-    // it is a decorator, extract annotation
-    annotation = annotation.annotation;
-  }
-  return annotation;
-}
-
-function applyParams(fnOrArray: (Function | Array<any>), key: string): Function {
-  if (fnOrArray === Object || fnOrArray === String || fnOrArray === Function ||
-      fnOrArray === Number || fnOrArray === Array) {
-    throw new Error(`Can not use native ${stringify(fnOrArray)} as constructor`);
-  }
-  if (isFunction(fnOrArray)) {
-    return <Function>fnOrArray;
-  } else if (fnOrArray instanceof Array) {
-    var annotations: Array<any> = fnOrArray;
-    var fn: Function = fnOrArray[fnOrArray.length - 1];
-    if (!isFunction(fn)) {
-      throw new Error(
-          `Last position of Class method array must be Function in key ${key} was '${stringify(fn)}'`);
-    }
-    var annoLength = annotations.length - 1;
-    if (annoLength != fn.length) {
-      throw new Error(
-          `Number of annotations (${annoLength}) does not match number of arguments (${fn.length}) in the function: ${stringify(fn)}`);
-    }
-    var paramsAnnotations: Array<Array<any>> = [];
-    for (var i = 0, ii = annotations.length - 1; i < ii; i++) {
-      var paramAnnotations: Array<any> = [];
-      paramsAnnotations.push(paramAnnotations);
-      var annotation = annotations[i];
-      if (annotation instanceof Array) {
-        for (var j = 0; j < annotation.length; j++) {
-          paramAnnotations.push(extractAnnotation(annotation[j]));
-        }
-      } else if (isFunction(annotation)) {
-        paramAnnotations.push(extractAnnotation(annotation));
-      } else {
-        paramAnnotations.push(annotation);
-      }
-    }
-    Reflect.defineMetadata('parameters', paramsAnnotations, fn);
-    return fn;
-  } else {
-    throw new Error(
-        `Only Function or Array is supported in Class definition for key '${key}' is '${stringify(fnOrArray)}'`);
-  }
-}
-
-export function Class(clsDef: ClassDefinition): Type {
-  var constructor = applyParams(
-      clsDef.hasOwnProperty('constructor') ? clsDef.constructor : undefined, 'constructor');
-  var proto = constructor.prototype;
-  if (clsDef.hasOwnProperty('extends')) {
-    if (isFunction(clsDef.extends)) {
-      (<Function>constructor).prototype = proto =
-          Object.create((<Function>clsDef.extends).prototype);
-    } else {
-      throw new Error(
-          `Class definition 'extends' property must be a constructor function was: ${stringify(clsDef.extends)}`);
-    }
-  }
-  for (var key in clsDef) {
-    if (key != 'extends' && key != 'prototype' && clsDef.hasOwnProperty(key)) {
-      proto[key] = applyParams(clsDef[key], key);
-    }
-  }
-
-  if (this && this.annotations instanceof Array) {
-    Reflect.defineMetadata('annotations', this.annotations, constructor);
-  }
-
-  return <Type>constructor;
-}
-
-var Reflect = global.Reflect;
-if (!(Reflect && Reflect.getMetadata)) {
-  throw 'reflect-metadata shim is required when using class decorators';
-}
-
-export function makeDecorator(annotationCls, chainFn: (fn: Function) => void = null): (...args) =>
-    (cls: any) => any {
-  function DecoratorFactory(objOrType): (cls: any) => any {
-    var annotationInstance = new (<any>annotationCls)(objOrType);
-    if (this instanceof annotationCls) {
-      return annotationInstance;
-    } else {
-      var chainAnnotation = isFunction(this) && this.annotations instanceof Array ?
-                                                                                this.annotations :
-                                                                                [];
-      chainAnnotation.push(annotationInstance);
-      var TypeDecorator: TypeDecorator = <TypeDecorator>function TypeDecorator(cls) {
-        var annotations = Reflect.getMetadata('annotations', cls);
-        annotations = annotations || [];
-        annotations.push(annotationInstance);
-        Reflect.defineMetadata('annotations', annotations, cls);
-        return cls;
-      };
-      TypeDecorator.annotations = chainAnnotation;
-      TypeDecorator.Class = Class;
-      if (chainFn) chainFn(TypeDecorator);
-      return TypeDecorator;
-    }
-  }
-  DecoratorFactory.prototype = Object.create(annotationCls.prototype);
-  return DecoratorFactory;
-}
-
-export function makeParamDecorator(annotationCls): any {
-  function ParamDecoratorFactory(...args): any {
-    var annotationInstance = Object.create(annotationCls.prototype);
-    annotationCls.apply(annotationInstance, args);
-    if (this instanceof annotationCls) {
-      return annotationInstance;
-    } else {
-      (<any>ParamDecorator).annotation = annotationInstance;
-      return ParamDecorator;
-    }
-
-    function ParamDecorator(cls, unusedKey, index): any {
-      var parameters: Array<Array<any>> = Reflect.getMetadata('parameters', cls);
-      parameters = parameters || [];
-
-      // there might be gaps if some in between parameters do not have annotations.
-      // we pad with nulls.
-      while (parameters.length <= index) {
-        parameters.push(null);
-      }
-
-      parameters[index] = parameters[index] || [];
-      var annotationsForParam: Array<any> = parameters[index];
-      annotationsForParam.push(annotationInstance);
-
-      Reflect.defineMetadata('parameters', parameters, cls);
-      return cls;
-    }
-  }
-  ParamDecoratorFactory.prototype = Object.create(annotationCls.prototype);
-  return ParamDecoratorFactory;
-}
diff --git a/modules/angular2/test.ts b/modules/angular2/test.ts
deleted file mode 100644
index 9f2b5bef9a82..000000000000
--- a/modules/angular2/test.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * This module is used for writing tests for applications written in Angular.
- *
- * This module is not included in the `angular2` module; you must import the test module explicitly.
- *
- */
-export * from './src/test_lib/test_component_builder';
-export * from './src/test_lib/test_injector';
diff --git a/modules/angular2/test/benchmark/transform/benchmark.transform.server.spec.dart b/modules/angular2/test/benchmark/transform/benchmark.transform.server.spec.dart
deleted file mode 100644
index 424200d4f6d9..000000000000
--- a/modules/angular2/test/benchmark/transform/benchmark.transform.server.spec.dart
+++ /dev/null
@@ -1,27 +0,0 @@
-library angular2.test.benchmark.transform;
-
-import 'package:angular2/src/transform/common/formatter.dart' as formatter;
-import 'package:dart_style/dart_style.dart';
-import 'package:guinness/guinness.dart';
-import 'package:unittest/vm_config.dart';
-
-import 'bind_generator/simple.dart' as bindGenerator;
-import 'directive_linker/simple.dart' as directiveLinker;
-import 'directive_processor/simple.dart' as directiveProcessor;
-import 'integration/hello_world.dart' as helloWorld;
-import 'reflection_remover/simple.dart' as reflectionRemover;
-import 'template_compiler/inline.dart' as inlineTemplateCompiler;
-import 'template_compiler/url.dart' as urlTemplateCompiler;
-
-main() {
-  useVMConfiguration();
-  formatter.init(new DartFormatter());
-  describe('Bind Generator Benchmark', bindGenerator.allTests);
-  describe('Directive Linker Benchmark', directiveLinker.allTests);
-  describe('Directive Processor Benchmark', directiveProcessor.allTests);
-  describe('Hello World Transformer Benchmark', helloWorld.allTests);
-  describe('Reflection Remover Benchmark', reflectionRemover.allTests);
-  describe(
-      'Inline Template Compiler Benchmark', inlineTemplateCompiler.allTests);
-  describe('Url Template Compiler Benchmark', urlTemplateCompiler.allTests);
-}
diff --git a/modules/angular2/test/benchmark/transform/bind_generator/simple.dart b/modules/angular2/test/benchmark/transform/bind_generator/simple.dart
deleted file mode 100644
index 97777c584676..000000000000
--- a/modules/angular2/test/benchmark/transform/bind_generator/simple.dart
+++ /dev/null
@@ -1,42 +0,0 @@
-library angular2.benchmark.transform.bind_generator.simple;
-
-import 'dart:async';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:angular2/src/transform/bind_generator/transformer.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/benchmarks.dart';
-import 'package:unittest/unittest.dart';
-
-Future main() => runBenchmark();
-
-allTests() {
-  test('Bind Generator Benchmark Runs', runBenchmark);
-}
-
-Future<double> runBenchmark() async {
-  var options = new TransformerOptions(['this_is_ignored.dart']);
-  var files = {new AssetId('a', 'a.ng_deps.dart'): aContents};
-  return new TransformerBenchmark([[new BindGenerator(options)]], files)
-      .measure();
-}
-
-const aContents = '''
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-bool _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(ToolTip, {
-      'factory': () => new ToolTip(),
-      'parameters': const [],
-      'annotations': const [
-        const Decorator(
-            selector: '[tool-tip]', bind: const {'text': 'tool-tip'})
-      ]
-    });
-}''';
diff --git a/modules/angular2/test/benchmark/transform/directive_linker/simple.dart b/modules/angular2/test/benchmark/transform/directive_linker/simple.dart
deleted file mode 100644
index 46db976e8c4a..000000000000
--- a/modules/angular2/test/benchmark/transform/directive_linker/simple.dart
+++ /dev/null
@@ -1,77 +0,0 @@
-library angular2.benchmark.transform.directive_linker.simple;
-
-import 'dart:async';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:angular2/src/transform/directive_linker/transformer.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/benchmarks.dart';
-import 'package:unittest/unittest.dart';
-
-Future main() => runBenchmark();
-
-allTests() {
-  test('Directive Linker Benchmark Runs', runBenchmark);
-}
-
-Future<double> runBenchmark() async {
-  var files = {
-    new AssetId('a', 'a.ng_deps.dart'): aContents,
-    new AssetId('a', 'b.ng_deps.dart'): bContents,
-    new AssetId('a', 'c.ng_deps.dart'): cContents,
-  };
-  return new TransformerBenchmark([[new DirectiveLinker()]], files).measure();
-}
-
-const aContents = '''
-library a.ng_deps.dart;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'b.dart';
-
-bool _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-}''';
-
-const bContents = '''
-library b.ng_deps.dart;
-
-import 'b.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-bool _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(DependencyComponent, {
-      'factory': () => new DependencyComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[salad]')]
-    });
-}
-''';
-
-const cContents = '''
-library c.ng_deps.dart;
-
-import 'c.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-import 'b.dart' as dep;
-
-bool _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(MyComponent, {
-      'factory': () => new MyComponent(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(
-            selector: '[soup]', services: const [dep.DependencyComponent])
-      ]
-    });
-}''';
diff --git a/modules/angular2/test/benchmark/transform/directive_processor/simple.dart b/modules/angular2/test/benchmark/transform/directive_processor/simple.dart
deleted file mode 100644
index 5b5ad5125e67..000000000000
--- a/modules/angular2/test/benchmark/transform/directive_processor/simple.dart
+++ /dev/null
@@ -1,32 +0,0 @@
-library angular2.benchmark.transform.directive_processor.simple;
-
-import 'dart:async';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:angular2/src/transform/directive_processor/transformer.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/benchmarks.dart';
-import 'package:unittest/unittest.dart';
-
-Future main() => runBenchmark();
-
-allTests() {
-  test('Directive Processor Benchmark Runs', runBenchmark);
-}
-
-Future runBenchmark() async {
-  var options = new TransformerOptions(['this_is_ignored.dart']);
-  var files = {new AssetId('a', 'a.dart'): aContents,};
-  return new TransformerBenchmark([[new DirectiveProcessor(options)]], files)
-      .measure();
-}
-
-const aContents = '''
-library dinner.soup;
-
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-@Component(selector: '[soup]')
-class SoupComponent {
-  SoupComponent(@Tasty String description, @Inject(Salt) salt);
-}
-''';
diff --git a/modules/angular2/test/benchmark/transform/integration/hello_world.dart b/modules/angular2/test/benchmark/transform/integration/hello_world.dart
deleted file mode 100644
index cd2c3d40e97a..000000000000
--- a/modules/angular2/test/benchmark/transform/integration/hello_world.dart
+++ /dev/null
@@ -1,81 +0,0 @@
-library angular2.benchmark.transform.integration.hello_world;
-
-import 'dart:async';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:angular2/src/transform/transformer.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/benchmarks.dart';
-import 'package:unittest/unittest.dart';
-
-Future main() => runBenchmark();
-
-allTests() {
-  test('Hello World Benchmark Runs', runBenchmark);
-}
-
-Future runBenchmark() async {
-  var options = new TransformerOptions(['index.dart']);
-  var files = {
-    new AssetId('a', 'web/index.dart'): indexContents,
-    new AssetId('a', 'web/index_common.dart'): indexCommonContents,
-  };
-  return new TransformerBenchmark(
-      new AngularTransformerGroup(options).phases, files).measure();
-}
-
-const indexContents = '''
-library examples.src.hello_world.index;
-
-import "index_common.dart" as app;
-import "package:angular2/src/reflection/reflection.dart" show reflector;
-import "package:angular2/src/reflection/reflection_capabilities.dart"
-    show ReflectionCapabilities;
-
-main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  app.main();
-}
-''';
-
-const indexCommonContents = '''
-library examples.src.hello_world.index_common;
-
-import "package:angular2/angular2.dart"
-    show bootstrap, Component, Decorator, Template, NgElement;
-import "package:angular2/di.dart" show Injectable;
-
-@Component(selector: "hello-app", services: const [GreetingService])
-@Template(
-    inline: '<div class="greeting">{{greeting}} <span red>world</span>!</div>'
-        '<button class="changeButton" (click)="changeGreeting()">'
-        'change greeting</button><content></content>',
-    directives: const [RedDec])
-class HelloCmp {
-  String greeting;
-  HelloCmp(GreetingService service) {
-    this.greeting = service.greeting;
-  }
-  changeGreeting() {
-    this.greeting = "howdy";
-  }
-}
-
-@Decorator(selector: "[red]")
-class RedDec {
-  RedDec(NgElement el) {
-    el.domElement.style.color = "red";
-  }
-}
-
-@Injectable()
-class GreetingService {
-  String greeting;
-  GreetingService() {
-    this.greeting = "hello";
-  }
-}
-
-main() {
-  bootstrap(HelloCmp);
-}
-''';
diff --git a/modules/angular2/test/benchmark/transform/reflection_remover/simple.dart b/modules/angular2/test/benchmark/transform/reflection_remover/simple.dart
deleted file mode 100644
index 661bce5ad74a..000000000000
--- a/modules/angular2/test/benchmark/transform/reflection_remover/simple.dart
+++ /dev/null
@@ -1,33 +0,0 @@
-library angular2.benchmark.transform.reflection_remover.simple;
-
-import 'dart:async';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:angular2/src/transform/reflection_remover/transformer.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/benchmarks.dart';
-import 'package:unittest/unittest.dart';
-
-Future main() => runBenchmark();
-
-allTests() {
-  test('Reflection Remover Benchmark Runs', runBenchmark);
-}
-
-Future runBenchmark() async {
-  var options = new TransformerOptions(['web/index.dart']);
-  var files = {new AssetId('a', 'web/index.dart'): indexContents,};
-  return new TransformerBenchmark([[new ReflectionRemover(options)]], files)
-      .measure();
-}
-
-const indexContents = '''
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}''';
diff --git a/modules/angular2/test/benchmark/transform/run_all.dart b/modules/angular2/test/benchmark/transform/run_all.dart
deleted file mode 100644
index 1b3e7b4a0216..000000000000
--- a/modules/angular2/test/benchmark/transform/run_all.dart
+++ /dev/null
@@ -1,27 +0,0 @@
-library angular2.test.benchmark.transform.run_all;
-
-import 'package:angular2/src/transform/common/formatter.dart' as formatter;
-import 'package:dart_style/dart_style.dart';
-
-import 'bind_generator/simple.dart' as bindGenerator;
-import 'directive_linker/simple.dart' as directiveLinker;
-import 'directive_processor/simple.dart' as directiveProcessor;
-import 'integration/hello_world.dart' as helloWorld;
-import 'reflection_remover/simple.dart' as reflectionRemover;
-import 'template_compiler/inline.dart' as inlineTemplateCompiler;
-import 'template_compiler/url.dart' as urlTemplateCompiler;
-
-main() async {
-  formatter.init(new DartFormatter());
-  printResult('BindGenerator', await bindGenerator.runBenchmark());
-  printResult('DirectiveLinker', await directiveLinker.runBenchmark());
-  printResult('HelloWorld', await helloWorld.runBenchmark());
-  printResult('ReflectionRemover', await reflectionRemover.runBenchmark());
-  printResult(
-      'InlineTemplateCompiler', await inlineTemplateCompiler.runBenchmark());
-  printResult('UrlTemplateCompiler', await urlTemplateCompiler.runBenchmark());
-}
-
-void printResult(String name, double result) {
-  print('ng2.transform.$name(RunTime): $result us.');
-}
diff --git a/modules/angular2/test/benchmark/transform/template_compiler/inline.dart b/modules/angular2/test/benchmark/transform/template_compiler/inline.dart
deleted file mode 100644
index da991945130e..000000000000
--- a/modules/angular2/test/benchmark/transform/template_compiler/inline.dart
+++ /dev/null
@@ -1,45 +0,0 @@
-library angular2.benchmark.transform.template_compiler.inline;
-
-import 'dart:async';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:angular2/src/transform/template_compiler/transformer.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/benchmarks.dart';
-import 'package:unittest/unittest.dart';
-
-Future main() => runBenchmark();
-
-allTests() {
-  test('Inline Template Compiler Benchmark Runs', runBenchmark);
-}
-
-Future runBenchmark() async {
-  var options = new TransformerOptions(['index.dart']);
-  var files = {new AssetId('a', 'web/a.ng_deps.dart'): aContents,};
-  return new TransformerBenchmark([[new TemplateCompiler(options)]], files)
-      .measure();
-}
-
-const aContents = '''
-library examples.src.hello_world.index_common_dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Decorator, Template, NgElement;
-
-bool _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const Template(
-            inline: '<button (click)="action()">go</button>{{greeting}}')
-      ]
-    });
-}
-''';
diff --git a/modules/angular2/test/benchmark/transform/template_compiler/url.dart b/modules/angular2/test/benchmark/transform/template_compiler/url.dart
deleted file mode 100644
index 681f57ab5ade..000000000000
--- a/modules/angular2/test/benchmark/transform/template_compiler/url.dart
+++ /dev/null
@@ -1,52 +0,0 @@
-library angular2.benchmark.transform.template_compiler.url;
-
-import 'dart:async';
-import 'package:angular2/src/transform/common/options.dart';
-import 'package:angular2/src/transform/template_compiler/transformer.dart';
-import 'package:barback/barback.dart';
-import 'package:code_transformers/benchmarks.dart';
-import 'package:unittest/unittest.dart';
-
-Future main() => runBenchmark();
-
-allTests() {
-  test('Url Template Compiler Benchmark Runs', runBenchmark);
-}
-
-Future runBenchmark() async {
-  var options = new TransformerOptions(['index.dart']);
-  var files = {
-    new AssetId('a', 'web/a.ng_deps.dart'): aContents,
-    new AssetId('a', 'web/template.html'): templateContents,
-  };
-  return new TransformerBenchmark([[new TemplateCompiler(options)]], files)
-      .measure();
-}
-
-const aContents = '''
-library examples.src.hello_world.index_common_dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Decorator, Template, NgElement;
-
-bool _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const Template(url: 'template.html')
-      ]
-    });
-}
-''';
-
-const templateContents = '''
-<button (click)="action()">go</button>
-{{greeting}}
-''';
diff --git a/modules/angular2/test/change_detection/change_detection_spec.ts b/modules/angular2/test/change_detection/change_detection_spec.ts
deleted file mode 100644
index 809a70088113..000000000000
--- a/modules/angular2/test/change_detection/change_detection_spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  SpyProtoChangeDetector
-} from 'angular2/test_lib';
-
-import {
-  PreGeneratedChangeDetection,
-  ChangeDetectorDefinition,
-  DynamicProtoChangeDetector
-} from 'angular2/change_detection';
-
-export function main() {
-  describe("PreGeneratedChangeDetection", () => {
-    var proto;
-    var def;
-
-    beforeEach(() => {
-      proto = new SpyProtoChangeDetector();
-      def = new ChangeDetectorDefinition('id', null, [], [], []);
-    });
-
-    it("should return a proto change detector when one is available", () => {
-      var map = {'id': (registry, def) => proto};
-      var cd = new PreGeneratedChangeDetection(null, map);
-
-      expect(cd.createProtoChangeDetector(def)).toBe(proto)
-    });
-
-    it("should delegate to dynamic change detection otherwise", () => {
-      var cd = new PreGeneratedChangeDetection(null, {});
-      expect(cd.createProtoChangeDetector(def)).toBeAnInstanceOf(DynamicProtoChangeDetector);
-    });
-  });
-}
diff --git a/modules/angular2/test/change_detection/change_detector_config.ts b/modules/angular2/test/change_detection/change_detector_config.ts
deleted file mode 100644
index 44bcb83af65d..000000000000
--- a/modules/angular2/test/change_detection/change_detector_config.ts
+++ /dev/null
@@ -1,313 +0,0 @@
-import {ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {isBlank, isPresent} from 'angular2/src/facade/lang';
-import {
-  DEFAULT,
-  ON_PUSH,
-  BindingRecord,
-  ChangeDetectorDefinition,
-  DirectiveIndex,
-  DirectiveRecord,
-  Lexer,
-  Locals,
-  Parser
-} from 'angular2/change_detection';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-/*
- * This file defines `ChangeDetectorDefinition` objects which are used in the tests defined in
- * the change_detector_spec library. Please see that library for more information.
- */
-
-var _parser = new Parser(new Lexer());
-
-function _getParser() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  return _parser;
-}
-
-function _createBindingRecords(expression: string): List<BindingRecord> {
-  var ast = _getParser().parseBinding(expression, 'location');
-  return [BindingRecord.createForElementProperty(ast, 0, PROP_NAME)];
-}
-
-function _convertLocalsToVariableBindings(locals: Locals): List<any> {
-  var variableBindings = [];
-  var loc = locals;
-  while (isPresent(loc) && isPresent(loc.current)) {
-    MapWrapper.forEach(loc.current, (v, k) => variableBindings.push(k));
-    loc = loc.parent;
-  }
-  return variableBindings;
-}
-
-export var PROP_NAME = 'propName';
-
-/**
- * In this case, we expect `id` and `expression` to be the same string.
- */
-export function getDefinition(id: string): TestDefinition {
-  var testDef = null;
-  if (StringMapWrapper.contains(_ExpressionWithLocals.availableDefinitions, id)) {
-    let val = StringMapWrapper.get(_ExpressionWithLocals.availableDefinitions, id);
-    let cdDef = val.createChangeDetectorDefinition();
-    cdDef.id = id;
-    testDef = new TestDefinition(id, cdDef, val.locals);
-  } else if (StringMapWrapper.contains(_ExpressionWithMode.availableDefinitions, id)) {
-    let val = StringMapWrapper.get(_ExpressionWithMode.availableDefinitions, id);
-    let cdDef = val.createChangeDetectorDefinition();
-    cdDef.id = id;
-    testDef = new TestDefinition(id, cdDef, null);
-  } else if (StringMapWrapper.contains(_DirectiveUpdating.availableDefinitions, id)) {
-    let val = StringMapWrapper.get(_DirectiveUpdating.availableDefinitions, id);
-    let cdDef = val.createChangeDetectorDefinition();
-    cdDef.id = id;
-    testDef = new TestDefinition(id, cdDef, null);
-  } else if (ListWrapper.indexOf(_availableDefinitions, id) >= 0) {
-    var strategy = null;
-    var variableBindings = [];
-    var bindingRecords = _createBindingRecords(id);
-    var directiveRecords = [];
-    let cdDef = new ChangeDetectorDefinition(id, strategy, variableBindings, bindingRecords,
-                                             directiveRecords);
-    testDef = new TestDefinition(id, cdDef, null);
-  }
-  if (isBlank(testDef)) {
-    throw `No ChangeDetectorDefinition for ${id} available. Please modify this file if necessary.`;
-  }
-
-  return testDef;
-}
-
-export class TestDefinition {
-  constructor(public id: string, public cdDef: ChangeDetectorDefinition, public locals: Locals) {}
-}
-
-/**
- * Get all available ChangeDetectorDefinition objects. Used to pre-generate Dart
- * `ChangeDetector` classes.
- */
-export function getAllDefinitions(): List<TestDefinition> {
-  var allDefs = _availableDefinitions;
-  allDefs = ListWrapper.concat(allDefs,
-                               StringMapWrapper.keys(_ExpressionWithLocals.availableDefinitions));
-  allDefs =
-      ListWrapper.concat(allDefs, StringMapWrapper.keys(_ExpressionWithMode.availableDefinitions));
-  allDefs =
-      ListWrapper.concat(allDefs, StringMapWrapper.keys(_DirectiveUpdating.availableDefinitions));
-  return ListWrapper.map(allDefs, (id) => getDefinition(id));
-}
-
-class _ExpressionWithLocals {
-  constructor(private _expression: string, public locals: Locals) {}
-
-  createChangeDetectorDefinition(): ChangeDetectorDefinition {
-    var strategy = null;
-    var variableBindings = _convertLocalsToVariableBindings(this.locals);
-    var bindingRecords = _createBindingRecords(this._expression);
-    var directiveRecords = [];
-    return new ChangeDetectorDefinition('(empty id)', strategy, variableBindings, bindingRecords,
-                                        directiveRecords);
-  }
-
-  /**
-   * Map from test id to _ExpressionWithLocals.
-   * Tests in this map define an expression and local values which those expressions refer to.
-   */
-  static availableDefinitions: StringMap<string, _ExpressionWithLocals> = {
-    'valueFromLocals': new _ExpressionWithLocals(
-        'key', new Locals(null, MapWrapper.createFromPairs([['key', 'value']]))),
-    'functionFromLocals': new _ExpressionWithLocals(
-        'key()', new Locals(null, MapWrapper.createFromPairs([['key', () => 'value']]))),
-    'nestedLocals': new _ExpressionWithLocals(
-        'key',
-        new Locals(new Locals(null, MapWrapper.createFromPairs([['key', 'value']])), new Map())),
-    'fallbackLocals': new _ExpressionWithLocals(
-        'name', new Locals(null, MapWrapper.createFromPairs([['key', 'value']]))),
-    'contextNestedPropertyWithLocals': new _ExpressionWithLocals(
-        'address.city', new Locals(null, MapWrapper.createFromPairs([['city', 'MTV']]))),
-    'localPropertyWithSimilarContext': new _ExpressionWithLocals(
-        'city', new Locals(null, MapWrapper.createFromPairs([['city', 'MTV']])))
-  };
-}
-
-class _ExpressionWithMode {
-  constructor(private _strategy: string, private _withRecords: boolean) {}
-
-  createChangeDetectorDefinition(): ChangeDetectorDefinition {
-    var variableBindings = [];
-    var bindingRecords = null;
-    var directiveRecords = null;
-    if (this._withRecords) {
-      var dirRecordWithOnPush =
-          new DirectiveRecord({directiveIndex: new DirectiveIndex(0, 0), changeDetection: ON_PUSH});
-      var updateDirWithOnPushRecord =
-          BindingRecord.createForDirective(_getParser().parseBinding('42', 'location'), 'a',
-                                           (o, v) => (<any>o).a = v, dirRecordWithOnPush);
-      bindingRecords = [updateDirWithOnPushRecord];
-      directiveRecords = [dirRecordWithOnPush];
-    } else {
-      bindingRecords = [];
-      directiveRecords = [];
-    }
-    return new ChangeDetectorDefinition('(empty id)', this._strategy, variableBindings,
-                                        bindingRecords, directiveRecords);
-  }
-
-  /**
-   * Map from test id to _ExpressionWithMode.
-   * Definitions in this map define conditions which allow testing various change detector modes.
-   */
-  static availableDefinitions: StringMap<string, _ExpressionWithMode> = {
-    'emptyUsingDefaultStrategy': new _ExpressionWithMode(DEFAULT, false),
-    'emptyUsingOnPushStrategy': new _ExpressionWithMode(ON_PUSH, false),
-    'onPushRecordsUsingDefaultStrategy': new _ExpressionWithMode(DEFAULT, true)
-  };
-}
-
-class _DirectiveUpdating {
-  constructor(private _bindingRecords: List<BindingRecord>,
-              private _directiveRecords: List<DirectiveRecord>) {}
-
-  createChangeDetectorDefinition(): ChangeDetectorDefinition {
-    var strategy = null;
-    var variableBindings = [];
-
-    return new ChangeDetectorDefinition('(empty id)', strategy, variableBindings,
-                                        this._bindingRecords, this._directiveRecords);
-  }
-
-  static updateA(expression: string, dirRecord): BindingRecord {
-    return BindingRecord.createForDirective(_getParser().parseBinding(expression, 'location'), 'a',
-                                            (o, v) => (<any>o).a = v, dirRecord);
-  }
-
-  static updateB(expression: string, dirRecord): BindingRecord {
-    return BindingRecord.createForDirective(_getParser().parseBinding(expression, 'location'), 'b',
-                                            (o, v) => (<any>o).b = v, dirRecord);
-  }
-
-  static basicRecords: List<DirectiveRecord> = [
-    new DirectiveRecord({
-      directiveIndex: new DirectiveIndex(0, 0),
-      callOnChange: true,
-      callOnCheck: true,
-      callOnAllChangesDone: true
-    }),
-    new DirectiveRecord({
-      directiveIndex: new DirectiveIndex(0, 1),
-      callOnChange: true,
-      callOnCheck: true,
-      callOnAllChangesDone: true
-    })
-  ];
-
-  static recordNoCallbacks = new DirectiveRecord({
-    directiveIndex: new DirectiveIndex(0, 0),
-    callOnChange: false,
-    callOnCheck: false,
-    callOnAllChangesDone: false
-  });
-
-  /**
-   * Map from test id to _DirectiveUpdating.
-   * Definitions in this map define definitions which allow testing directive updating.
-   */
-  static availableDefinitions: StringMap<string, _DirectiveUpdating> = {
-    'directNoDispatcher': new _DirectiveUpdating(
-        [_DirectiveUpdating.updateA('42', _DirectiveUpdating.basicRecords[0])],
-        [_DirectiveUpdating.basicRecords[0]]),
-    'groupChanges': new _DirectiveUpdating(
-        [
-          _DirectiveUpdating.updateA('1', _DirectiveUpdating.basicRecords[0]),
-          _DirectiveUpdating.updateB('2', _DirectiveUpdating.basicRecords[0]),
-          BindingRecord.createDirectiveOnChange(_DirectiveUpdating.basicRecords[0]),
-          _DirectiveUpdating.updateA('3', _DirectiveUpdating.basicRecords[1]),
-          BindingRecord.createDirectiveOnChange(_DirectiveUpdating.basicRecords[1])
-        ],
-        [_DirectiveUpdating.basicRecords[0], _DirectiveUpdating.basicRecords[1]]),
-    'directiveOnCheck': new _DirectiveUpdating(
-        [BindingRecord.createDirectiveOnCheck(_DirectiveUpdating.basicRecords[0])],
-        [_DirectiveUpdating.basicRecords[0]]),
-    'directiveOnInit': new _DirectiveUpdating(
-        [BindingRecord.createDirectiveOnInit(_DirectiveUpdating.basicRecords[0])],
-        [_DirectiveUpdating.basicRecords[0]]),
-    'emptyWithDirectiveRecords': new _DirectiveUpdating(
-        [], [_DirectiveUpdating.basicRecords[0], _DirectiveUpdating.basicRecords[1]]),
-    'noCallbacks': new _DirectiveUpdating(
-        [_DirectiveUpdating.updateA('1', _DirectiveUpdating.recordNoCallbacks)],
-        [_DirectiveUpdating.recordNoCallbacks]),
-    'readingDirectives':
-        new _DirectiveUpdating(
-            [
-              BindingRecord.createForHostProperty(
-                  new DirectiveIndex(0, 0), _getParser().parseBinding('a', 'location'), PROP_NAME)
-            ],
-            [_DirectiveUpdating.basicRecords[0]]),
-    'interpolation':
-        new _DirectiveUpdating(
-            [
-              BindingRecord.createForElementProperty(
-                  _getParser().parseInterpolation('B{{a}}A', 'location'), 0, PROP_NAME)
-            ],
-            [])
-  };
-}
-
-/**
- * The list of all test definitions this config supplies.
- * Items in this list that do not appear in other structures define tests with expressions
- * equivalent to their ids.
- */
-var _availableDefinitions = [
-  '10',
-  '"str"',
-  '"a\n\nb"',
-  '10 + 2',
-  '10 - 2',
-  '10 * 2',
-  '10 / 2',
-  '11 % 2',
-  '1 == 1',
-  '1 != 1',
-  '1 == true',
-  '1 === 1',
-  '1 !== 1',
-  '1 === true',
-  '1 < 2',
-  '2 < 1',
-  '1 > 2',
-  '2 > 1',
-  '1 <= 2',
-  '2 <= 2',
-  '2 <= 1',
-  '2 >= 1',
-  '2 >= 2',
-  '1 >= 2',
-  'true && true',
-  'true && false',
-  'true || false',
-  'false || false',
-  '!true',
-  '!!true',
-  '1 < 2 ? 1 : 2',
-  '1 > 2 ? 1 : 2',
-  '["foo", "bar"][0]',
-  '{"foo": "bar"}["foo"]',
-  'name',
-  '[1, 2]',
-  '[1, a]',
-  '{z: 1}',
-  '{z: a}',
-  'name | pipe',
-  "name | pipe:'one':address.city",
-  'value',
-  'a',
-  'address.city',
-  'address?.city',
-  'address?.toString()',
-  'sayHi("Jim")',
-  'a()(99)',
-  'a.sayHi("Jim")',
-  'passThrough([12])'
-];
diff --git a/modules/angular2/test/change_detection/change_detector_spec.ts b/modules/angular2/test/change_detection/change_detector_spec.ts
deleted file mode 100644
index 20ca3a550db0..000000000000
--- a/modules/angular2/test/change_detection/change_detector_spec.ts
+++ /dev/null
@@ -1,1038 +0,0 @@
-///<reference path="../../src/change_detection/pipes/pipe.ts"/>
-import {
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  IS_DARTIUM
-} from 'angular2/test_lib';
-
-import {
-  CONST_EXPR,
-  isPresent,
-  isBlank,
-  isJsObject,
-  BaseException,
-  FunctionWrapper
-} from 'angular2/src/facade/lang';
-import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-
-import {
-  ChangeDispatcher,
-  DehydratedException,
-  DynamicChangeDetector,
-  ChangeDetectionError,
-  BindingRecord,
-  DirectiveRecord,
-  DirectiveIndex,
-  PipeRegistry,
-  Pipe,
-  CHECK_ALWAYS,
-  CHECK_ONCE,
-  CHECKED,
-  DETACHED,
-  ON_PUSH,
-  DEFAULT,
-  WrappedValue,
-  DynamicProtoChangeDetector,
-  ChangeDetectorDefinition,
-  Lexer,
-  Parser,
-  Locals,
-  ProtoChangeDetector
-} from 'angular2/change_detection';
-import {JitProtoChangeDetector} from 'angular2/src/change_detection/jit_proto_change_detector';
-
-import {getDefinition} from './change_detector_config';
-import {getFactoryById} from './generated/change_detector_classes';
-
-const _DEFAULT_CONTEXT = CONST_EXPR(new Object());
-
-/**
- * Tests in this spec run against three different implementations of `AbstractChangeDetector`,
- * `dynamic` (which use reflection to inspect objects), `JIT` (which are generated only for
- * Javascript at runtime using `eval`) and `Pregen` (which are generated only for Dart prior
- * to app deploy to avoid the need for reflection).
- *
- * Pre-generated classes require knowledge of the shape of the change detector at the time of Dart
- * transformation, so in these tests we abstract a `ChangeDetectorDefinition` out into the
- * change_detector_config library and define a build step which pre-generates the necessary change
- * detectors to execute these tests. Once that built step has run, those generated change detectors
- * can be found in the generated/change_detector_classes library.
- */
-export function main() {
-  ListWrapper.forEach(['dynamic', 'JIT', 'Pregen'], (cdType) => {
-
-    if (cdType == "JIT" && IS_DARTIUM) return;
-    if (cdType == "Pregen" && !IS_DARTIUM) return;
-
-    describe(`${cdType} Change Detector`, () => {
-
-      function _getProtoChangeDetector(def: ChangeDetectorDefinition, registry = null) {
-        switch (cdType) {
-          case 'dynamic':
-            return new DynamicProtoChangeDetector(registry, def);
-          case 'JIT':
-            return new JitProtoChangeDetector(registry, def);
-          case 'Pregen':
-            return getFactoryById(def.id)(registry, def);
-          default:
-            return null;
-        }
-      }
-
-      function _createWithoutHydrate(expression: string) {
-        var dispatcher = new TestDispatcher();
-        var registry = null;
-        var cd = _getProtoChangeDetector(getDefinition(expression).cdDef, registry)
-                     .instantiate(dispatcher);
-        return new _ChangeDetectorAndDispatcher(cd, dispatcher);
-      }
-
-
-      function _createChangeDetector(expression: string, context = _DEFAULT_CONTEXT,
-                                     registry = null) {
-        var dispatcher = new TestDispatcher();
-        var testDef = getDefinition(expression);
-        var protoCd = _getProtoChangeDetector(testDef.cdDef, registry);
-        var cd = protoCd.instantiate(dispatcher);
-        cd.hydrate(context, testDef.locals, null);
-        return new _ChangeDetectorAndDispatcher(cd, dispatcher);
-      }
-
-      function _bindSimpleValue(expression: string, context = _DEFAULT_CONTEXT) {
-        var val = _createChangeDetector(expression, context);
-        val.changeDetector.detectChanges();
-        return val.dispatcher.log;
-      }
-
-      it('should support literals',
-         () => { expect(_bindSimpleValue('10')).toEqual(['propName=10']); });
-
-      it('should strip quotes from literals',
-         () => { expect(_bindSimpleValue('"str"')).toEqual(['propName=str']); });
-
-      it('should support newlines in literals',
-         () => { expect(_bindSimpleValue('"a\n\nb"')).toEqual(['propName=a\n\nb']); });
-
-      it('should support + operations',
-         () => { expect(_bindSimpleValue('10 + 2')).toEqual(['propName=12']); });
-
-      it('should support - operations',
-         () => { expect(_bindSimpleValue('10 - 2')).toEqual(['propName=8']); });
-
-      it('should support * operations',
-         () => { expect(_bindSimpleValue('10 * 2')).toEqual(['propName=20']); });
-
-      it('should support / operations', () => {
-        expect(_bindSimpleValue('10 / 2')).toEqual([`propName=${5.0}`]);
-      });  // dart exp=5.0, js exp=5
-
-      it('should support % operations',
-         () => { expect(_bindSimpleValue('11 % 2')).toEqual(['propName=1']); });
-
-      it('should support == operations on identical',
-         () => { expect(_bindSimpleValue('1 == 1')).toEqual(['propName=true']); });
-
-      it('should support != operations',
-         () => { expect(_bindSimpleValue('1 != 1')).toEqual(['propName=false']); });
-
-      it('should support == operations on coerceible', () => {
-        var expectedValue = IS_DARTIUM ? 'false' : 'true';
-        expect(_bindSimpleValue('1 == true')).toEqual([`propName=${expectedValue}`]);
-      });
-
-      it('should support === operations on identical',
-         () => { expect(_bindSimpleValue('1 === 1')).toEqual(['propName=true']); });
-
-      it('should support !== operations',
-         () => { expect(_bindSimpleValue('1 !== 1')).toEqual(['propName=false']); });
-
-      it('should support === operations on coerceible',
-         () => { expect(_bindSimpleValue('1 === true')).toEqual(['propName=false']); });
-
-      it('should support true < operations',
-         () => { expect(_bindSimpleValue('1 < 2')).toEqual(['propName=true']); });
-
-      it('should support false < operations',
-         () => { expect(_bindSimpleValue('2 < 1')).toEqual(['propName=false']); });
-
-      it('should support false > operations',
-         () => { expect(_bindSimpleValue('1 > 2')).toEqual(['propName=false']); });
-
-      it('should support true > operations',
-         () => { expect(_bindSimpleValue('2 > 1')).toEqual(['propName=true']); });
-
-      it('should support true <= operations',
-         () => { expect(_bindSimpleValue('1 <= 2')).toEqual(['propName=true']); });
-
-      it('should support equal <= operations',
-         () => { expect(_bindSimpleValue('2 <= 2')).toEqual(['propName=true']); });
-
-      it('should support false <= operations',
-         () => { expect(_bindSimpleValue('2 <= 1')).toEqual(['propName=false']); });
-
-      it('should support true >= operations',
-         () => { expect(_bindSimpleValue('2 >= 1')).toEqual(['propName=true']); });
-
-      it('should support equal >= operations',
-         () => { expect(_bindSimpleValue('2 >= 2')).toEqual(['propName=true']); });
-
-      it('should support false >= operations',
-         () => { expect(_bindSimpleValue('1 >= 2')).toEqual(['propName=false']); });
-
-      it('should support true && operations',
-         () => { expect(_bindSimpleValue('true && true')).toEqual(['propName=true']); });
-
-      it('should support false && operations',
-         () => { expect(_bindSimpleValue('true && false')).toEqual(['propName=false']); });
-
-      it('should support true || operations',
-         () => { expect(_bindSimpleValue('true || false')).toEqual(['propName=true']); });
-
-      it('should support false || operations',
-         () => { expect(_bindSimpleValue('false || false')).toEqual(['propName=false']); });
-
-      it('should support negate',
-         () => { expect(_bindSimpleValue('!true')).toEqual(['propName=false']); });
-
-      it('should support double negate',
-         () => { expect(_bindSimpleValue('!!true')).toEqual(['propName=true']); });
-
-      it('should support true conditionals',
-         () => { expect(_bindSimpleValue('1 < 2 ? 1 : 2')).toEqual(['propName=1']); });
-
-      it('should support false conditionals',
-         () => { expect(_bindSimpleValue('1 > 2 ? 1 : 2')).toEqual(['propName=2']); });
-
-      it('should support keyed access to a list item',
-         () => { expect(_bindSimpleValue('["foo", "bar"][0]')).toEqual(['propName=foo']); });
-
-      it('should support keyed access to a map item',
-         () => { expect(_bindSimpleValue('{"foo": "bar"}["foo"]')).toEqual(['propName=bar']); });
-
-      it('should report all changes on the first run including uninitialized values', () => {
-        expect(_bindSimpleValue('value', new Uninitialized())).toEqual(['propName=null']);
-      });
-
-      it('should report all changes on the first run including null values', () => {
-        var td = new TestData(null);
-        expect(_bindSimpleValue('a', td)).toEqual(['propName=null']);
-      });
-
-      it('should support simple chained property access', () => {
-        var address = new Address('Grenoble');
-        var person = new Person('Victor', address);
-
-        expect(_bindSimpleValue('address.city', person)).toEqual(['propName=Grenoble']);
-      });
-
-      it('should support the safe navigation operator', () => {
-        var person = new Person('Victor', null);
-
-        expect(_bindSimpleValue('address?.city', person)).toEqual(['propName=null']);
-        expect(_bindSimpleValue('address?.toString()', person)).toEqual(['propName=null']);
-
-        person.address = new Address('MTV');
-
-        expect(_bindSimpleValue('address?.city', person)).toEqual(['propName=MTV']);
-        expect(_bindSimpleValue('address?.toString()', person)).toEqual(['propName=MTV']);
-      });
-
-      it('should support method calls', () => {
-        var person = new Person('Victor');
-        expect(_bindSimpleValue('sayHi("Jim")', person)).toEqual(['propName=Hi, Jim']);
-      });
-
-      it('should support function calls', () => {
-        var td = new TestData(() => (a) => a);
-        expect(_bindSimpleValue('a()(99)', td)).toEqual(['propName=99']);
-      });
-
-      it('should support chained method calls', () => {
-        var person = new Person('Victor');
-        var td = new TestData(person);
-        expect(_bindSimpleValue('a.sayHi("Jim")', td)).toEqual(['propName=Hi, Jim']);
-      });
-
-      it('should do simple watching', () => {
-        var person = new Person('misko');
-        var val = _createChangeDetector('name', person);
-
-        val.changeDetector.detectChanges();
-        expect(val.dispatcher.log).toEqual(['propName=misko']);
-        val.dispatcher.clear();
-
-        val.changeDetector.detectChanges();
-        expect(val.dispatcher.log).toEqual([]);
-        val.dispatcher.clear();
-
-        person.name = 'Misko';
-        val.changeDetector.detectChanges();
-        expect(val.dispatcher.log).toEqual(['propName=Misko']);
-      });
-
-      it('should support literal array', () => {
-        var val = _createChangeDetector('[1, 2]');
-        val.changeDetector.detectChanges();
-        expect(val.dispatcher.loggedValues).toEqual([[1, 2]]);
-
-        val = _createChangeDetector('[1, a]', new TestData(2));
-        val.changeDetector.detectChanges();
-        expect(val.dispatcher.loggedValues).toEqual([[1, 2]]);
-      });
-
-      it('should support literal maps', () => {
-        var val = _createChangeDetector('{z: 1}');
-        val.changeDetector.detectChanges();
-        expect(val.dispatcher.loggedValues[0]['z']).toEqual(1);
-
-        val = _createChangeDetector('{z: a}', new TestData(1));
-        val.changeDetector.detectChanges();
-        expect(val.dispatcher.loggedValues[0]['z']).toEqual(1);
-      });
-
-      it('should support interpolation', () => {
-        var val = _createChangeDetector('interpolation', new TestData('value'));
-        val.changeDetector.hydrate(new TestData('value'), null, null);
-
-        val.changeDetector.detectChanges();
-
-        expect(val.dispatcher.log).toEqual(['propName=BvalueA']);
-      });
-
-      describe('pure functions', () => {
-        it('should preserve memoized result', () => {
-          var person = new Person('bob');
-          var val = _createChangeDetector('passThrough([12])', person);
-          val.changeDetector.detectChanges();
-          val.changeDetector.detectChanges();
-          expect(val.dispatcher.loggedValues).toEqual([[12]]);
-        });
-      });
-
-      describe('change notification', () => {
-        describe('simple checks', () => {
-          it('should pass a change record to the dispatcher', () => {
-            var person = new Person('bob');
-            var val = _createChangeDetector('name', person);
-            val.changeDetector.detectChanges();
-            expect(val.dispatcher.loggedValues).toEqual(['bob']);
-          });
-        });
-
-        describe('pipes', () => {
-          it('should pass a change record to the dispatcher', () => {
-            var registry = new FakePipeRegistry('pipe', () => new CountingPipe());
-            var person = new Person('bob');
-            var val = _createChangeDetector('name | pipe', person, registry);
-            val.changeDetector.detectChanges();
-            expect(val.dispatcher.loggedValues).toEqual(['bob state:0']);
-          });
-
-          it('should support arguments in pipes', () => {
-            var registry = new FakePipeRegistry('pipe', () => new MultiArgPipe());
-            var address = new Address('two');
-            var person = new Person('value', address);
-            var val = _createChangeDetector("name | pipe:'one':address.city", person, registry);
-            val.changeDetector.detectChanges();
-            expect(val.dispatcher.loggedValues).toEqual(['value one two default']);
-          });
-        });
-
-        it('should notify the dispatcher on all changes done', () => {
-          var val = _createChangeDetector('name', new Person('bob'));
-          val.changeDetector.detectChanges();
-          expect(val.dispatcher.onAllChangesDoneCalled).toEqual(true);
-        });
-
-        describe('updating directives', () => {
-          var directive1;
-          var directive2;
-
-          beforeEach(() => {
-            directive1 = new TestDirective();
-            directive2 = new TestDirective();
-          });
-
-          it('should happen directly, without invoking the dispatcher', () => {
-            var val = _createWithoutHydrate('directNoDispatcher');
-            val.changeDetector.hydrate(_DEFAULT_CONTEXT, null,
-                                       new FakeDirectives([directive1], []));
-            val.changeDetector.detectChanges();
-            expect(val.dispatcher.loggedValues).toEqual([]);
-            expect(directive1.a).toEqual(42);
-          });
-
-          describe('onChange', () => {
-            it('should notify the directive when a group of records changes', () => {
-              var cd = _createWithoutHydrate('groupChanges').changeDetector;
-              cd.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([directive1, directive2], []));
-              cd.detectChanges();
-              expect(directive1.changes).toEqual({'a': 1, 'b': 2});
-              expect(directive2.changes).toEqual({'a': 3});
-            });
-          });
-
-          describe('onCheck', () => {
-            it('should notify the directive when it is checked', () => {
-              var cd = _createWithoutHydrate('directiveOnCheck').changeDetector;
-
-              cd.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([directive1], []));
-              cd.detectChanges();
-
-              expect(directive1.onCheckCalled).toBe(true);
-              directive1.onCheckCalled = false;
-
-              cd.detectChanges();
-              expect(directive1.onCheckCalled).toBe(true);
-            });
-
-            it('should not call onCheck in detectNoChanges', () => {
-              var cd = _createWithoutHydrate('directiveOnCheck').changeDetector;
-
-              cd.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([directive1], []));
-
-              cd.checkNoChanges();
-
-              expect(directive1.onCheckCalled).toBe(false);
-            });
-          });
-
-          describe('onInit', () => {
-            it('should notify the directive after it has been checked the first time', () => {
-              var cd = _createWithoutHydrate('directiveOnInit').changeDetector;
-
-              cd.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([directive1], []));
-
-              cd.detectChanges();
-
-              expect(directive1.onInitCalled).toBe(true);
-
-              directive1.onInitCalled = false;
-
-              cd.detectChanges();
-
-              expect(directive1.onInitCalled).toBe(false);
-            });
-
-            it('should not call onInit in detectNoChanges', () => {
-              var cd = _createWithoutHydrate('directiveOnInit').changeDetector;
-
-              cd.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([directive1], []));
-
-              cd.checkNoChanges();
-
-              expect(directive1.onInitCalled).toBe(false);
-            });
-          });
-
-          describe('onAllChangesDone', () => {
-            it('should be called after processing all the children', () => {
-              var cd = _createWithoutHydrate('emptyWithDirectiveRecords').changeDetector;
-              cd.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([directive1, directive2], []));
-
-              cd.detectChanges();
-
-              expect(directive1.onChangesDoneCalled).toBe(true);
-              expect(directive2.onChangesDoneCalled).toBe(true);
-
-              // reset directives
-              directive1.onChangesDoneCalled = false;
-              directive2.onChangesDoneCalled = false;
-
-              // Verify that checking should not call them.
-              cd.checkNoChanges();
-
-              expect(directive1.onChangesDoneCalled).toBe(false);
-              expect(directive2.onChangesDoneCalled).toBe(false);
-
-              // re-verify that changes are still detected
-              cd.detectChanges();
-
-              expect(directive1.onChangesDoneCalled).toBe(true);
-              expect(directive2.onChangesDoneCalled).toBe(true);
-            });
-
-
-            it('should not be called when onAllChangesDone is false', () => {
-              var cd = _createWithoutHydrate('noCallbacks').changeDetector;
-
-              cd.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([directive1], []));
-
-              cd.detectChanges();
-
-              expect(directive1.onChangesDoneCalled).toEqual(false);
-            });
-
-            it('should be called in reverse order so the child is always notified before the parent',
-               () => {
-                 var cd = _createWithoutHydrate('emptyWithDirectiveRecords').changeDetector;
-
-                 var onChangesDoneCalls = [];
-                 var td1;
-                 td1 = new TestDirective(() => onChangesDoneCalls.push(td1));
-                 var td2;
-                 td2 = new TestDirective(() => onChangesDoneCalls.push(td2));
-                 cd.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([td1, td2], []));
-
-                 cd.detectChanges();
-
-                 expect(onChangesDoneCalls).toEqual([td2, td1]);
-               });
-
-            it('should be called before processing shadow dom children', () => {
-              var parent = _createWithoutHydrate('directNoDispatcher').changeDetector;
-              var child = _createWithoutHydrate('directNoDispatcher').changeDetector;
-              parent.addShadowDomChild(child);
-
-              var orderOfOperations = [];
-
-              var directiveInShadowDom = null;
-              directiveInShadowDom =
-                  new TestDirective(() => { orderOfOperations.push(directiveInShadowDom); });
-              var parentDirective = null;
-              parentDirective =
-                  new TestDirective(() => { orderOfOperations.push(parentDirective); });
-
-              parent.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([parentDirective], []));
-              child.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([directiveInShadowDom], []));
-
-              parent.detectChanges();
-              expect(orderOfOperations).toEqual([parentDirective, directiveInShadowDom]);
-            });
-          });
-        });
-      });
-
-      describe('reading directives', () => {
-        it('should read directive properties', () => {
-          var directive = new TestDirective();
-          directive.a = 'aaa';
-
-          var val = _createWithoutHydrate('readingDirectives');
-          val.changeDetector.hydrate(_DEFAULT_CONTEXT, null, new FakeDirectives([directive], []));
-
-          val.changeDetector.detectChanges();
-
-          expect(val.dispatcher.loggedValues).toEqual(['aaa']);
-        });
-      });
-
-      describe('enforce no new changes', () => {
-        it('should throw when a record gets changed after it has been checked', () => {
-          var val = _createChangeDetector('a', new TestData('value'));
-          expect(() => { val.changeDetector.checkNoChanges(); })
-              .toThrowError(new RegExp(
-                  'Expression [\'"]a in location[\'"] has changed after it was checked'));
-        });
-
-        it('should not break the next run', () => {
-          var val = _createChangeDetector('a', new TestData('value'));
-          expect(() => val.changeDetector.checkNoChanges())
-              .toThrowError(new RegExp(
-                  'Expression [\'"]a in location[\'"] has changed after it was checked.'));
-
-          val.changeDetector.detectChanges();
-          expect(val.dispatcher.loggedValues).toEqual(['value']);
-        });
-      });
-
-      // TODO vsavkin: implement it
-      describe('error handling', () => {
-        xit('should wrap exceptions into ChangeDetectionError', () => {
-          var val = _createChangeDetector('invalidProp');
-          try {
-            val.changeDetector.detectChanges();
-            throw new BaseException('fail');
-          } catch (e) {
-            expect(e).toBeAnInstanceOf(ChangeDetectionError);
-            expect(e.location).toEqual('invalidProp in someComponent');
-          }
-        });
-      });
-
-      describe('Locals', () => {
-        it('should read a value from locals',
-           () => { expect(_bindSimpleValue('valueFromLocals')).toEqual(['propName=value']); });
-
-        it('should invoke a function from local',
-           () => { expect(_bindSimpleValue('functionFromLocals')).toEqual(['propName=value']); });
-
-        it('should handle nested locals',
-           () => { expect(_bindSimpleValue('nestedLocals')).toEqual(['propName=value']); });
-
-        it('should fall back to a regular field read when the locals map' +
-               'does not have the requested field',
-           () => {
-             expect(_bindSimpleValue('fallbackLocals', new Person('Jim')))
-                 .toEqual(['propName=Jim']);
-           });
-
-        it('should correctly handle nested properties', () => {
-          var address = new Address('Grenoble');
-          var person = new Person('Victor', address);
-
-          expect(_bindSimpleValue('contextNestedPropertyWithLocals', person))
-              .toEqual(['propName=Grenoble']);
-          expect(_bindSimpleValue('localPropertyWithSimilarContext', person))
-              .toEqual(['propName=MTV']);
-        });
-      });
-
-      describe('handle children', () => {
-        var parent, child;
-
-        beforeEach(() => {
-          parent = _createChangeDetector('10').changeDetector;
-          child = _createChangeDetector('"str"').changeDetector;
-        });
-
-        it('should add light dom children', () => {
-          parent.addChild(child);
-
-          expect(parent.lightDomChildren.length).toEqual(1);
-          expect(parent.lightDomChildren[0]).toBe(child);
-        });
-
-        it('should add shadow dom children', () => {
-          parent.addShadowDomChild(child);
-
-          expect(parent.shadowDomChildren.length).toEqual(1);
-          expect(parent.shadowDomChildren[0]).toBe(child);
-        });
-
-        it('should remove light dom children', () => {
-          parent.addChild(child);
-          parent.removeChild(child);
-
-          expect(parent.lightDomChildren).toEqual([]);
-        });
-
-        it('should remove shadow dom children', () => {
-          parent.addShadowDomChild(child);
-          parent.removeShadowDomChild(child);
-
-          expect(parent.shadowDomChildren.length).toEqual(0);
-        });
-      });
-
-      describe('mode', () => {
-        it('should set the mode to CHECK_ALWAYS when the default change detection is used', () => {
-          var cd = _createWithoutHydrate('emptyUsingDefaultStrategy').changeDetector;
-          expect(cd.mode).toEqual(null);
-
-          cd.hydrate(_DEFAULT_CONTEXT, null, null);
-          expect(cd.mode).toEqual(CHECK_ALWAYS);
-        });
-
-        it('should set the mode to CHECK_ONCE when the push change detection is used', () => {
-          var cd = _createWithoutHydrate('emptyUsingOnPushStrategy').changeDetector;
-          cd.hydrate(_DEFAULT_CONTEXT, null, null);
-
-          expect(cd.mode).toEqual(CHECK_ONCE);
-        });
-
-        it('should not check a detached change detector', () => {
-          var val = _createChangeDetector('a', new TestData('value'));
-
-          val.changeDetector.hydrate(_DEFAULT_CONTEXT, null, null);
-          val.changeDetector.mode = DETACHED;
-          val.changeDetector.detectChanges();
-
-          expect(val.dispatcher.log).toEqual([]);
-        });
-
-        it('should not check a checked change detector', () => {
-          var val = _createChangeDetector('a', new TestData('value'));
-
-          val.changeDetector.hydrate(_DEFAULT_CONTEXT, null, null);
-          val.changeDetector.mode = CHECKED;
-          val.changeDetector.detectChanges();
-
-          expect(val.dispatcher.log).toEqual([]);
-        });
-
-        it('should change CHECK_ONCE to CHECKED', () => {
-          var cd = _createChangeDetector('10').changeDetector;
-          cd.hydrate(_DEFAULT_CONTEXT, null, null);
-          cd.mode = CHECK_ONCE;
-
-          cd.detectChanges();
-
-          expect(cd.mode).toEqual(CHECKED);
-        });
-
-        it('should not change the CHECK_ALWAYS', () => {
-          var cd = _createChangeDetector('10').changeDetector;
-          cd.hydrate(_DEFAULT_CONTEXT, null, null);
-          cd.mode = CHECK_ALWAYS;
-
-          cd.detectChanges();
-
-          expect(cd.mode).toEqual(CHECK_ALWAYS);
-        });
-
-        describe('marking ON_PUSH detectors as CHECK_ONCE after an update', () => {
-          var checkedDetector;
-          var directives;
-
-          beforeEach(() => {
-            checkedDetector = _createWithoutHydrate('emptyUsingOnPushStrategy').changeDetector;
-            checkedDetector.hydrate(_DEFAULT_CONTEXT, null, null);
-            checkedDetector.mode = CHECKED;
-
-            var targetDirective = new TestData(null);
-            directives = new FakeDirectives([targetDirective], [checkedDetector]);
-          });
-
-          it('should set the mode to CHECK_ONCE when a binding is updated', () => {
-            var cd = _createWithoutHydrate('onPushRecordsUsingDefaultStrategy').changeDetector;
-            cd.hydrate(_DEFAULT_CONTEXT, null, directives);
-
-            expect(checkedDetector.mode).toEqual(CHECKED);
-
-            // evaluate the record, update the targetDirective, and mark its detector as
-            // CHECK_ONCE
-            cd.detectChanges();
-
-            expect(checkedDetector.mode).toEqual(CHECK_ONCE);
-          });
-        });
-      });
-
-      describe('markPathToRootAsCheckOnce', () => {
-        function changeDetector(mode, parent) {
-          var val = _createChangeDetector('10');
-          val.changeDetector.mode = mode;
-          if (isPresent(parent)) parent.addChild(val.changeDetector);
-          return val.changeDetector;
-        }
-
-        it('should mark all checked detectors as CHECK_ONCE until reaching a detached one', () => {
-          var root = changeDetector(CHECK_ALWAYS, null);
-          var disabled = changeDetector(DETACHED, root);
-          var parent = changeDetector(CHECKED, disabled);
-          var checkAlwaysChild = changeDetector(CHECK_ALWAYS, parent);
-          var checkOnceChild = changeDetector(CHECK_ONCE, checkAlwaysChild);
-          var checkedChild = changeDetector(CHECKED, checkOnceChild);
-
-          checkedChild.markPathToRootAsCheckOnce();
-
-          expect(root.mode).toEqual(CHECK_ALWAYS);
-          expect(disabled.mode).toEqual(DETACHED);
-          expect(parent.mode).toEqual(CHECK_ONCE);
-          expect(checkAlwaysChild.mode).toEqual(CHECK_ALWAYS);
-          expect(checkOnceChild.mode).toEqual(CHECK_ONCE);
-          expect(checkedChild.mode).toEqual(CHECK_ONCE);
-        });
-      });
-
-      describe('hydration', () => {
-        it('should be able to rehydrate a change detector', () => {
-          var cd = _createChangeDetector('name').changeDetector;
-
-          cd.hydrate('some context', null, null);
-          expect(cd.hydrated()).toBe(true);
-
-          cd.dehydrate();
-          expect(cd.hydrated()).toBe(false);
-
-          cd.hydrate('other context', null, null);
-          expect(cd.hydrated()).toBe(true);
-        });
-
-        it('should destroy all active pipes during dehyration', () => {
-          var pipe = new OncePipe();
-          var registry = new FakePipeRegistry('pipe', () => pipe);
-          var cd = _createChangeDetector('name | pipe', new Person('bob'), registry).changeDetector;
-
-          cd.detectChanges();
-          cd.dehydrate();
-
-          expect(pipe.destroyCalled).toBe(true);
-        });
-
-        it('should throw when detectChanges is called on a dehydrated detector', () => {
-          var context = new Person('Bob');
-          var val = _createChangeDetector('name', context);
-
-          val.changeDetector.detectChanges();
-          expect(val.dispatcher.log).toEqual(['propName=Bob']);
-
-          val.changeDetector.dehydrate();
-          var dehydratedException = new DehydratedException();
-          expect(() => {val.changeDetector.detectChanges()})
-              .toThrowError(dehydratedException.toString());
-          expect(val.dispatcher.log).toEqual(['propName=Bob']);
-        });
-      });
-
-      describe('pipes', () => {
-        it('should support pipes', () => {
-          var registry = new FakePipeRegistry('pipe', () => new CountingPipe());
-          var ctx = new Person('Megatron');
-
-          var val = _createChangeDetector('name | pipe', ctx, registry);
-
-          val.changeDetector.detectChanges();
-
-          expect(val.dispatcher.log).toEqual(['propName=Megatron state:0']);
-
-          val.dispatcher.clear();
-          val.changeDetector.detectChanges();
-
-          expect(val.dispatcher.log).toEqual(['propName=Megatron state:1']);
-        });
-
-        it('should lookup pipes in the registry when the context is not supported', () => {
-          var registry = new FakePipeRegistry('pipe', () => new OncePipe());
-          var ctx = new Person('Megatron');
-
-          var cd = _createChangeDetector('name | pipe', ctx, registry).changeDetector;
-
-          cd.detectChanges();
-
-          expect(registry.numberOfLookups).toEqual(1);
-
-          ctx.name = 'Optimus Prime';
-          cd.detectChanges();
-
-          expect(registry.numberOfLookups).toEqual(2);
-        });
-
-        it('should invoke onDestroy on a pipe before switching to another one', () => {
-          var pipe = new OncePipe();
-          var registry = new FakePipeRegistry('pipe', () => pipe);
-          var ctx = new Person('Megatron');
-
-          var cd = _createChangeDetector('name | pipe', ctx, registry).changeDetector;
-
-          cd.detectChanges();
-          ctx.name = 'Optimus Prime';
-          cd.detectChanges();
-
-          expect(pipe.destroyCalled).toEqual(true);
-        });
-
-        it('should inject the ChangeDetectorRef ' +
-               'of the encompassing component into a pipe',
-           () => {
-
-             var registry = new FakePipeRegistry('pipe', () => new IdentityPipe());
-             var cd =
-                 _createChangeDetector('name | pipe', new Person('bob'), registry).changeDetector;
-
-             cd.detectChanges();
-
-             expect(registry.cdRef).toBe(cd.ref);
-           });
-      });
-
-      it('should do nothing when no change', () => {
-        var registry = new FakePipeRegistry('pipe', () => new IdentityPipe());
-        var ctx = new Person('Megatron');
-
-        var val = _createChangeDetector('name | pipe', ctx, registry);
-
-        val.changeDetector.detectChanges();
-
-        expect(val.dispatcher.log).toEqual(['propName=Megatron']);
-
-        val.dispatcher.clear();
-        val.changeDetector.detectChanges();
-
-        expect(val.dispatcher.log).toEqual([]);
-      });
-
-      it('should unwrap the wrapped value', () => {
-        var registry = new FakePipeRegistry('pipe', () => new WrappedPipe());
-        var ctx = new Person('Megatron');
-
-        var val = _createChangeDetector('name | pipe', ctx, registry);
-
-        val.changeDetector.detectChanges();
-
-        expect(val.dispatcher.log).toEqual(['propName=Megatron']);
-      });
-    });
-  });
-}
-
-class CountingPipe implements Pipe {
-  state: number = 0;
-
-  onDestroy() {}
-
-  supports(newValue) { return true; }
-
-  transform(value, args = null) { return `${value} state:${this.state ++}`; }
-}
-
-class OncePipe implements Pipe {
-  called: boolean = false;
-  destroyCalled: boolean = false;
-
-  supports(newValue) { return !this.called; }
-
-  onDestroy() { this.destroyCalled = true; }
-
-  transform(value, args = null) {
-    this.called = true;
-    return value;
-  }
-}
-
-class IdentityPipe implements Pipe {
-  supports(obj): boolean { return true; }
-
-  onDestroy() {}
-
-  transform(value, args = null) { return value; }
-}
-
-class WrappedPipe implements Pipe {
-  supports(obj): boolean { return true; }
-
-  onDestroy() {}
-
-  transform(value, args = null) { return WrappedValue.wrap(value); }
-}
-
-class MultiArgPipe implements Pipe {
-  transform(value, args = null) {
-    var arg1 = args[0];
-    var arg2 = args[1];
-    var arg3 = args.length > 2 ? args[2] : 'default';
-    return `${value} ${arg1} ${arg2} ${arg3}`;
-  }
-  supports(obj): boolean { return true; }
-  onDestroy(): void {}
-}
-
-class FakePipeRegistry extends PipeRegistry {
-  numberOfLookups: number;
-  pipeType: string;
-  factory: Function;
-  cdRef: any;
-
-  constructor(pipeType, factory) {
-    super({});
-    this.pipeType = pipeType;
-    this.factory = factory;
-    this.numberOfLookups = 0;
-  }
-
-  get(type: string, obj, cdRef?, existingPipe?) {
-    if (type != this.pipeType) return null;
-    this.numberOfLookups++;
-    this.cdRef = cdRef;
-    return this.factory();
-  }
-}
-
-class TestDirective {
-  a;
-  b;
-  changes;
-  onChangesDoneCalled;
-  onChangesDoneSpy;
-  onCheckCalled;
-  onInitCalled;
-
-  constructor(onChangesDoneSpy = null) {
-    this.onChangesDoneCalled = false;
-    this.onCheckCalled = false;
-    this.onInitCalled = false;
-    this.onChangesDoneSpy = onChangesDoneSpy;
-    this.a = null;
-    this.b = null;
-    this.changes = null;
-  }
-
-  onCheck() { this.onCheckCalled = true; }
-
-  onInit() { this.onInitCalled = true; }
-
-  onChange(changes) {
-    var r = {};
-    StringMapWrapper.forEach(changes, (c, key) => r[key] = c.currentValue);
-    this.changes = r;
-  }
-
-  onAllChangesDone() {
-    this.onChangesDoneCalled = true;
-    if (isPresent(this.onChangesDoneSpy)) {
-      this.onChangesDoneSpy();
-    }
-  }
-}
-
-class Person {
-  age: number;
-  constructor(public name: string, public address: Address = null) {}
-
-  sayHi(m) { return `Hi, ${m}`; }
-
-  passThrough(val) { return val; }
-
-  toString(): string {
-    var address = this.address == null ? '' : ' address=' + this.address.toString();
-
-    return 'name=' + this.name + address;
-  }
-}
-
-class Address {
-  constructor(public city: string) {}
-
-  toString(): string { return isBlank(this.city) ? '-' : this.city }
-}
-
-class Uninitialized {
-  value: any;
-}
-
-class TestData {
-  constructor(public a: any) {}
-}
-
-class FakeDirectives {
-  constructor(public directives: List<TestData | TestDirective>,
-              public detectors: List<ProtoChangeDetector>) {}
-
-  getDirectiveFor(di: DirectiveIndex) { return this.directives[di.directiveIndex]; }
-
-  getDetectorFor(di: DirectiveIndex) { return this.detectors[di.directiveIndex]; }
-}
-
-class TestDispatcher implements ChangeDispatcher {
-  log: List<string>;
-  loggedValues: List<any>;
-  onAllChangesDoneCalled: boolean = false;
-
-  constructor() { this.clear(); }
-
-  clear() {
-    this.log = [];
-    this.loggedValues = [];
-    this.onAllChangesDoneCalled = true;
-  }
-
-  notifyOnBinding(binding, value) {
-    this.log.push(`${binding.propertyName}=${this._asString(value)}`);
-    this.loggedValues.push(value);
-  }
-
-  notifyOnAllChangesDone() { this.onAllChangesDoneCalled = true; }
-
-  _asString(value) { return (isBlank(value) ? 'null' : value.toString()); }
-}
-
-class _ChangeDetectorAndDispatcher {
-  constructor(public changeDetector: any, public dispatcher: TestDispatcher) {}
-}
diff --git a/modules/angular2/test/change_detection/coalesce_spec.ts b/modules/angular2/test/change_detection/coalesce_spec.ts
deleted file mode 100644
index 310256a7020b..000000000000
--- a/modules/angular2/test/change_detection/coalesce_spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-
-import {coalesce} from 'angular2/src/change_detection/coalesce';
-import {RecordType, ProtoRecord} from 'angular2/src/change_detection/proto_record';
-
-export function main() {
-  function r(funcOrValue, args, contextIndex, selfIndex, lastInBinding = false,
-             mode = RecordType.PROPERTY, name = "name") {
-    return new ProtoRecord(mode, name, funcOrValue, args, null, contextIndex, null, selfIndex, null,
-                           null, lastInBinding, false);
-  }
-
-  describe("change detection - coalesce", () => {
-    it("should work with an empty list", () => { expect(coalesce([])).toEqual([]); });
-
-    it("should remove non-terminal duplicate records" +
-           " and update the context indices referencing them",
-       () => {
-         var rs = coalesce(
-             [r("user", [], 0, 1), r("first", [], 1, 2), r("user", [], 0, 3), r("last", [], 3, 4)]);
-
-         expect(rs).toEqual([r("user", [], 0, 1), r("first", [], 1, 2), r("last", [], 1, 3)]);
-       });
-
-    it("should update indices of other records", () => {
-      var rs = coalesce(
-          [r("dup", [], 0, 1), r("dup", [], 0, 2), r("user", [], 0, 3), r("first", [3], 3, 4)]);
-
-      expect(rs).toEqual([r("dup", [], 0, 1), r("user", [], 0, 2), r("first", [2], 2, 3)]);
-    });
-
-    it("should remove non-terminal duplicate records" +
-           " and update the args indices referencing them",
-       () => {
-         var rs = coalesce([
-           r("user1", [], 0, 1),
-           r("user2", [], 0, 2),
-           r("hi", [1], 0, 3),
-           r("hi", [1], 0, 4),
-           r("hi", [2], 0, 5)
-         ]);
-
-         expect(rs).toEqual(
-             [r("user1", [], 0, 1), r("user2", [], 0, 2), r("hi", [1], 0, 3), r("hi", [2], 0, 4)]);
-       });
-
-    it("should replace duplicate terminal records with" + " self records", () => {
-
-      var rs = coalesce([r("user", [], 0, 1, true), r("user", [], 0, 2, true)]);
-
-      expect(rs[1]).toEqual(new ProtoRecord(RecordType.SELF, "self", null, [], null, 1, null, 2,
-                                            null, null, true, false));
-    });
-
-    it("should not coalesce directive lifecycle records", () => {
-      var rs = coalesce([
-        r("onCheck", [], 0, 1, true, RecordType.DIRECTIVE_LIFECYCLE),
-        r("onCheck", [], 0, 1, true, RecordType.DIRECTIVE_LIFECYCLE)
-      ]);
-
-      expect(rs.length).toEqual(2);
-    });
-
-    it("should not coalesce protos with different names but same value", () => {
-      var nullFunc = () => {};
-      var rs = coalesce([
-        r(nullFunc, [], 0, 1, false, RecordType.PROPERTY, "foo"),
-        r(nullFunc, [], 0, 1, false, RecordType.PROPERTY, "bar"),
-      ]);
-      expect(rs.length).toEqual(2);
-    });
-  });
-}
diff --git a/modules/angular2/test/change_detection/generated/change_detector_classes.ts b/modules/angular2/test/change_detection/generated/change_detector_classes.ts
deleted file mode 100644
index cc5dd3e5f16f..000000000000
--- a/modules/angular2/test/change_detection/generated/change_detector_classes.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// Ignore me, needed to support Angular 2 Dart.
-// See ../change_detector_spec for more details.
-
-export function getFactoryById(id: string) {
-  return null;
-}
diff --git a/modules/angular2/test/change_detection/generator/gen_change_detectors.dart b/modules/angular2/test/change_detection/generator/gen_change_detectors.dart
deleted file mode 100644
index ae88f9f8d36f..000000000000
--- a/modules/angular2/test/change_detection/generator/gen_change_detectors.dart
+++ /dev/null
@@ -1,40 +0,0 @@
-library angular2.src.transform.di_transformer;
-
-import 'dart:convert';
-import 'dart:io';
-
-import 'package:dart_style/dart_style.dart';
-import 'package:angular2/src/transform/template_compiler/change_detector_codegen.dart';
-import '../change_detector_config.dart';
-
-/// This tool consumes pre-defined `ChangeDetectorDefinition` objects and
-/// outputs code defining `AbstractChangeDetector` implementations corresponding
-/// to those definitions. These are used by the tests in
-/// ../change_detector_spec. Please see that library for more details.
-void main(List<String> args) {
-  var buf = new StringBuffer('var $_MAP_NAME = {');
-  var codegen = new Codegen();
-  var allDefs = getAllDefinitions();
-  for (var i = 0; i < allDefs.length; ++i) {
-    var className = 'ChangeDetector${i}';
-    codegen.generate('dynamic', className, allDefs[i].cdDef);
-    if (i > 0) {
-      buf.write(',');
-    }
-    buf.write(" '''${allDefs[i].cdDef.id}''': "
-        "$className.$PROTO_CHANGE_DETECTOR_FACTORY_METHOD");
-  }
-  buf.write('};');
-  print(new DartFormatter().format('''
-    library dart_gen_change_detectors;
-
-    ${codegen.imports}
-
-    $codegen
-    $buf
-
-    getFactoryById(String id) => $_MAP_NAME[id];
-  '''));
-}
-
-const _MAP_NAME = '_idToProtoMap';
diff --git a/modules/angular2/test/change_detection/iterable.dart b/modules/angular2/test/change_detection/iterable.dart
deleted file mode 100644
index f4dfaad368c2..000000000000
--- a/modules/angular2/test/change_detection/iterable.dart
+++ /dev/null
@@ -1,6 +0,0 @@
-import 'dart:collection';
-
-class TestIterable extends IterableBase<int> {
-  List<int> list = [];
-  Iterator<int> get iterator => list.iterator;
-}
diff --git a/modules/angular2/test/change_detection/iterable.ts b/modules/angular2/test/change_detection/iterable.ts
deleted file mode 100644
index a322db6e66a7..000000000000
--- a/modules/angular2/test/change_detection/iterable.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {List} from 'angular2/src/facade/collection';
-
-export class TestIterable {
-  list: List<int>;
-  constructor() { this.list = []; }
-
-  [Symbol.iterator]() { return this.list[Symbol.iterator](); }
-}
diff --git a/modules/angular2/test/change_detection/parser/lexer_spec.ts b/modules/angular2/test/change_detection/parser/lexer_spec.ts
deleted file mode 100644
index db3805681c8b..000000000000
--- a/modules/angular2/test/change_detection/parser/lexer_spec.ts
+++ /dev/null
@@ -1,250 +0,0 @@
-import {ddescribe, describe, it, expect} from 'angular2/test_lib';
-
-import {Lexer, Token} from 'angular2/src/change_detection/parser/lexer';
-
-import {List, ListWrapper} from "angular2/src/facade/collection";
-import {StringWrapper} from "angular2/src/facade/lang";
-
-function lex(text: string): List<any> {
-  return new Lexer().tokenize(text);
-}
-
-function expectToken(token, index) {
-  expect(token instanceof Token).toBe(true);
-  expect(token.index).toEqual(index);
-}
-
-function expectCharacterToken(token, index, character) {
-  expect(character.length).toBe(1);
-  expectToken(token, index);
-  expect(token.isCharacter(StringWrapper.charCodeAt(character, 0))).toBe(true);
-}
-
-function expectOperatorToken(token, index, operator) {
-  expectToken(token, index);
-  expect(token.isOperator(operator)).toBe(true);
-}
-
-function expectNumberToken(token, index, n) {
-  expectToken(token, index);
-  expect(token.isNumber()).toBe(true);
-  expect(token.toNumber()).toEqual(n);
-}
-
-function expectStringToken(token, index, str) {
-  expectToken(token, index);
-  expect(token.isString()).toBe(true);
-  expect(token.toString()).toEqual(str);
-}
-
-function expectIdentifierToken(token, index, identifier) {
-  expectToken(token, index);
-  expect(token.isIdentifier()).toBe(true);
-  expect(token.toString()).toEqual(identifier);
-}
-
-function expectKeywordToken(token, index, keyword) {
-  expectToken(token, index);
-  expect(token.isKeyword()).toBe(true);
-  expect(token.toString()).toEqual(keyword);
-}
-
-export function main() {
-  describe('lexer', function() {
-    describe('token', function() {
-      it('should tokenize a simple identifier', function() {
-        var tokens: List<int> = lex("j");
-        expect(tokens.length).toEqual(1);
-        expectIdentifierToken(tokens[0], 0, 'j');
-      });
-
-      it('should tokenize a dotted identifier', function() {
-        var tokens: List<int> = lex("j.k");
-        expect(tokens.length).toEqual(3);
-        expectIdentifierToken(tokens[0], 0, 'j');
-        expectCharacterToken(tokens[1], 1, '.');
-        expectIdentifierToken(tokens[2], 2, 'k');
-      });
-
-      it('should tokenize an operator', function() {
-        var tokens: List<int> = lex("j-k");
-        expect(tokens.length).toEqual(3);
-        expectOperatorToken(tokens[1], 1, '-');
-      });
-
-      it('should tokenize an indexed operator', function() {
-        var tokens: List<int> = lex("j[k]");
-        expect(tokens.length).toEqual(4);
-        expectCharacterToken(tokens[1], 1, "[");
-        expectCharacterToken(tokens[3], 3, "]");
-      });
-
-      it('should tokenize numbers', function() {
-        var tokens: List<int> = lex("88");
-        expect(tokens.length).toEqual(1);
-        expectNumberToken(tokens[0], 0, 88);
-      });
-
-      it('should tokenize numbers within index ops',
-         function() { expectNumberToken(lex("a[22]")[2], 2, 22); });
-
-      it('should tokenize simple quoted strings',
-         function() { expectStringToken(lex('"a"')[0], 0, "a"); });
-
-      it('should tokenize quoted strings with escaped quotes',
-         function() { expectStringToken(lex('"a\\""')[0], 0, 'a"'); });
-
-      it('should tokenize a string', function() {
-        var tokens: List<Token> = lex("j-a.bc[22]+1.3|f:'a\\\'c':\"d\\\"e\"");
-        expectIdentifierToken(tokens[0], 0, 'j');
-        expectOperatorToken(tokens[1], 1, '-');
-        expectIdentifierToken(tokens[2], 2, 'a');
-        expectCharacterToken(tokens[3], 3, '.');
-        expectIdentifierToken(tokens[4], 4, 'bc');
-        expectCharacterToken(tokens[5], 6, '[');
-        expectNumberToken(tokens[6], 7, 22);
-        expectCharacterToken(tokens[7], 9, ']');
-        expectOperatorToken(tokens[8], 10, '+');
-        expectNumberToken(tokens[9], 11, 1.3);
-        expectOperatorToken(tokens[10], 14, '|');
-        expectIdentifierToken(tokens[11], 15, 'f');
-        expectCharacterToken(tokens[12], 16, ':');
-        expectStringToken(tokens[13], 17, "a'c");
-        expectCharacterToken(tokens[14], 23, ':');
-        expectStringToken(tokens[15], 24, 'd"e');
-      });
-
-      it('should tokenize undefined', function() {
-        var tokens: List<Token> = lex("undefined");
-        expectKeywordToken(tokens[0], 0, "undefined");
-        expect(tokens[0].isKeywordUndefined()).toBe(true);
-      });
-
-      it('should ignore whitespace', function() {
-        var tokens: List<Token> = lex("a \t \n \r b");
-        expectIdentifierToken(tokens[0], 0, 'a');
-        expectIdentifierToken(tokens[1], 8, 'b');
-      });
-
-      it('should tokenize quoted string', () => {
-        var str = "['\\'', \"\\\"\"]";
-        var tokens: List<Token> = lex(str);
-        expectStringToken(tokens[1], 1, "'");
-        expectStringToken(tokens[3], 7, '"');
-      });
-
-      it('should tokenize escaped quoted string', () => {
-        var str = '"\\"\\n\\f\\r\\t\\v\\u00A0"';
-        var tokens: List<Token> = lex(str);
-        expect(tokens.length).toEqual(1);
-        expect(tokens[0].toString()).toEqual('"\n\f\r\t\v\u00A0');
-      });
-
-      it('should tokenize unicode', function() {
-        var tokens: List<Token> = lex('"\\u00A0"');
-        expect(tokens.length).toEqual(1);
-        expect(tokens[0].toString()).toEqual('\u00a0');
-      });
-
-      it('should tokenize relation', function() {
-        var tokens: List<Token> = lex("! == != < > <= >= === !==");
-        expectOperatorToken(tokens[0], 0, '!');
-        expectOperatorToken(tokens[1], 2, '==');
-        expectOperatorToken(tokens[2], 5, '!=');
-        expectOperatorToken(tokens[3], 8, '<');
-        expectOperatorToken(tokens[4], 10, '>');
-        expectOperatorToken(tokens[5], 12, '<=');
-        expectOperatorToken(tokens[6], 15, '>=');
-        expectOperatorToken(tokens[7], 18, '===');
-        expectOperatorToken(tokens[8], 22, '!==');
-      });
-
-      it('should tokenize statements', function() {
-        var tokens: List<Token> = lex("a;b;");
-        expectIdentifierToken(tokens[0], 0, 'a');
-        expectCharacterToken(tokens[1], 1, ';');
-        expectIdentifierToken(tokens[2], 2, 'b');
-        expectCharacterToken(tokens[3], 3, ';');
-      });
-
-      it('should tokenize function invocation', function() {
-        var tokens: List<Token> = lex("a()");
-        expectIdentifierToken(tokens[0], 0, 'a');
-        expectCharacterToken(tokens[1], 1, '(');
-        expectCharacterToken(tokens[2], 2, ')');
-      });
-
-      it('should tokenize simple method invocations', function() {
-        var tokens: List<Token> = lex("a.method()");
-        expectIdentifierToken(tokens[2], 2, 'method');
-      });
-
-      it('should tokenize method invocation', function() {
-        var tokens: List<Token> = lex("a.b.c (d) - e.f()");
-        expectIdentifierToken(tokens[0], 0, 'a');
-        expectCharacterToken(tokens[1], 1, '.');
-        expectIdentifierToken(tokens[2], 2, 'b');
-        expectCharacterToken(tokens[3], 3, '.');
-        expectIdentifierToken(tokens[4], 4, 'c');
-        expectCharacterToken(tokens[5], 6, '(');
-        expectIdentifierToken(tokens[6], 7, 'd');
-        expectCharacterToken(tokens[7], 8, ')');
-        expectOperatorToken(tokens[8], 10, '-');
-        expectIdentifierToken(tokens[9], 12, 'e');
-        expectCharacterToken(tokens[10], 13, '.');
-        expectIdentifierToken(tokens[11], 14, 'f');
-        expectCharacterToken(tokens[12], 15, '(');
-        expectCharacterToken(tokens[13], 16, ')');
-      });
-
-      it('should tokenize number', function() {
-        var tokens: List<Token> = lex("0.5");
-        expectNumberToken(tokens[0], 0, 0.5);
-      });
-
-      // NOTE(deboer): NOT A LEXER TEST
-      //    it('should tokenize negative number', () => {
-      //      var tokens:List<Token> = lex("-0.5");
-      //      expectNumberToken(tokens[0], 0, -0.5);
-      //    });
-
-      it('should tokenize number with exponent', function() {
-        var tokens: List<Token> = lex("0.5E-10");
-        expect(tokens.length).toEqual(1);
-        expectNumberToken(tokens[0], 0, 0.5E-10);
-        tokens = lex("0.5E+10");
-        expectNumberToken(tokens[0], 0, 0.5E+10);
-      });
-
-      it('should throws exception for invalid exponent', function() {
-        expect(function() { lex("0.5E-"); })
-            .toThrowError('Lexer Error: Invalid exponent at column 4 in expression [0.5E-]');
-
-        expect(function() { lex("0.5E-A"); })
-            .toThrowError('Lexer Error: Invalid exponent at column 4 in expression [0.5E-A]');
-      });
-
-      it('should tokenize number starting with a dot', function() {
-        var tokens: List<Token> = lex(".5");
-        expectNumberToken(tokens[0], 0, 0.5);
-      });
-
-      it('should throw error on invalid unicode', function() {
-        expect(function() { lex("'\\u1''bla'"); })
-            .toThrowError(
-                "Lexer Error: Invalid unicode escape [\\u1''b] at column 2 in expression ['\\u1''bla']");
-      });
-
-      it('should tokenize hash as operator', function() {
-        var tokens: List<Token> = lex("#");
-        expectOperatorToken(tokens[0], 0, '#');
-      });
-
-      it('should tokenize ?. as operator', () => {
-        var tokens: List<Token> = lex('?.');
-        expectOperatorToken(tokens[0], 0, '?.');
-      });
-
-    });
-  });
-}
diff --git a/modules/angular2/test/change_detection/parser/locals_spec.ts b/modules/angular2/test/change_detection/parser/locals_spec.ts
deleted file mode 100644
index b1c796f477ba..000000000000
--- a/modules/angular2/test/change_detection/parser/locals_spec.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import {ddescribe, describe, it, xit, iit, expect, beforeEach} from 'angular2/test_lib';
-
-import {Locals} from 'angular2/src/change_detection/parser/locals';
-
-import {MapWrapper} from 'angular2/src/facade/collection';
-
-export function main() {
-  describe('Locals', () => {
-    var locals: Locals;
-    beforeEach(() => {
-      locals = new Locals(null, MapWrapper.createFromPairs([['key', 'value'], ['nullKey', null]]));
-    });
-
-    it('should support getting values', () => {
-      expect(locals.get('key')).toBe('value');
-      expect(() => locals.get('notPresent')).toThrowError(new RegExp("Cannot find"));
-    });
-
-    it('should support checking if key is present', () => {
-      expect(locals.contains('key')).toBe(true);
-      expect(locals.contains('nullKey')).toBe(true);
-      expect(locals.contains('notPresent')).toBe(false);
-    });
-
-    it('should support setting keys', () => {
-      locals.set('key', 'bar');
-      expect(locals.get('key')).toBe('bar');
-    });
-
-    it('should not support setting keys that are not present already',
-       () => { expect(() => locals.set('notPresent', 'bar')).toThrowError(); });
-
-    it('should clearValues', () => {
-      locals.clearValues();
-      expect(locals.get('key')).toBe(null);
-    });
-  })
-}
diff --git a/modules/angular2/test/change_detection/parser/parser_spec.ts b/modules/angular2/test/change_detection/parser/parser_spec.ts
deleted file mode 100644
index 13012d64fe3b..000000000000
--- a/modules/angular2/test/change_detection/parser/parser_spec.ts
+++ /dev/null
@@ -1,654 +0,0 @@
-import {ddescribe, describe, it, xit, iit, expect, beforeEach, IS_DARTIUM} from 'angular2/test_lib';
-import {BaseException, isBlank, isPresent} from 'angular2/src/facade/lang';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {Parser} from 'angular2/src/change_detection/parser/parser';
-import {Unparser} from './unparser';
-import {Lexer} from 'angular2/src/change_detection/parser/lexer';
-import {Locals} from 'angular2/src/change_detection/parser/locals';
-import {BindingPipe, LiteralPrimitive, AST} from 'angular2/src/change_detection/parser/ast';
-
-class TestData {
-  constructor(public a?: any, public b?: any, public fnReturnValue?: any) {}
-
-  fn() { return this.fnReturnValue; }
-
-  add(a, b) { return a + b; }
-}
-
-export function main() {
-  function td(a: any = 0, b: any = 0, fnReturnValue: any = "constant") {
-    return new TestData(a, b, fnReturnValue);
-  }
-
-  function createParser() { return new Parser(new Lexer(), reflector); }
-
-  function parseAction(text, location = null): any {
-    return createParser().parseAction(text, location);
-  }
-
-  function parseBinding(text, location = null): any {
-    return createParser().parseBinding(text, location);
-  }
-
-  function parseTemplateBindings(text, location = null): any {
-    return createParser().parseTemplateBindings(text, location);
-  }
-
-  function parseInterpolation(text, location = null): any {
-    return createParser().parseInterpolation(text, location);
-  }
-
-  function parseSimpleBinding(text, location = null): any {
-    return createParser().parseSimpleBinding(text, location);
-  }
-
-  function unparse(ast: AST): string { return new Unparser().unparse(ast); }
-
-  function emptyLocals() { return new Locals(null, new Map()); }
-
-  function evalAction(text, passedInContext = null, passedInLocals = null) {
-    var c = isBlank(passedInContext) ? td() : passedInContext;
-    var l = isBlank(passedInLocals) ? emptyLocals() : passedInLocals;
-    return parseAction(text).eval(c, l);
-  }
-
-  function expectEval(text, passedInContext = null, passedInLocals = null) {
-    return expect(evalAction(text, passedInContext, passedInLocals));
-  }
-
-  function expectEvalError(text, passedInContext = null, passedInLocals = null) {
-    var c = isBlank(passedInContext) ? td() : passedInContext;
-    var l = isBlank(passedInLocals) ? emptyLocals() : passedInLocals;
-    return expect(() => parseAction(text).eval(c, l));
-  }
-
-  function evalAsts(asts, passedInContext = null) {
-    var c = isBlank(passedInContext) ? td() : passedInContext;
-    var res = [];
-    for (var i = 0; i < asts.length; i++) {
-      res.push(asts[i].eval(c, emptyLocals()));
-    }
-    return res;
-  }
-
-  describe("parser", () => {
-    describe("parseAction", () => {
-      describe("basic expressions", () => {
-        it('should parse numerical expressions', () => { expectEval("1").toEqual(1); });
-
-        it('should parse strings', () => {
-          expectEval("'1'").toEqual('1');
-          expectEval('"1"').toEqual('1');
-        });
-
-        it('should parse null', () => { expectEval("null").toBe(null); });
-
-        it('should parse unary - expressions', () => {
-          expectEval("-1").toEqual(-1);
-          expectEval("+1").toEqual(1);
-        });
-
-        it('should parse unary ! expressions', () => {
-          expectEval("!true").toEqual(!true);
-          expectEval("!!true").toEqual(!!true);
-          expectEval("!!!true").toEqual(!!!true);
-        });
-
-        it('should parse multiplicative expressions',
-           () => { expectEval("3*4/2%5").toEqual(3 * 4 / 2 % 5); });
-
-        it('should parse additive expressions', () => { expectEval("3+6-2").toEqual(3 + 6 - 2); });
-
-        it('should parse relational expressions', () => {
-          expectEval("2<3").toEqual(2 < 3);
-          expectEval("2>3").toEqual(2 > 3);
-          expectEval("2<=2").toEqual(2 <= 2);
-          expectEval("2>=2").toEqual(2 >= 2);
-        });
-
-        it('should parse equality expressions', () => {
-          expectEval("2==3").toEqual(2 == 3);
-          expectEval("2=='2'").toEqual(2 == <any>'2');
-          expectEval("2=='3'").toEqual(2 == <any>'3');
-          expectEval("2!=3").toEqual(2 != 3);
-          expectEval("2!='3'").toEqual(2 != <any>'3');
-          expectEval("2!='2'").toEqual(2 != <any>'2');
-          expectEval("2!=!false").toEqual(2 != <any>!false);
-        });
-
-        it('should parse strict equality expressions', () => {
-          expectEval("2===3").toEqual(2 === 3);
-          expectEval("2==='3'").toEqual(2 === <any>'3');
-          expectEval("2==='2'").toEqual(2 === <any>'2');
-          expectEval("2!==3").toEqual(2 !== 3);
-          expectEval("2!=='3'").toEqual(2 !== <any>'3');
-          expectEval("2!=='2'").toEqual(2 !== <any>'2');
-          expectEval("false===!true").toEqual(false === !true);
-          expectEval("false!==!!true").toEqual(false !== !!true);
-        });
-
-        it('should parse logicalAND expressions', () => {
-          expectEval("true&&true").toEqual(true && true);
-          expectEval("true&&false").toEqual(true && false);
-        });
-
-        it('should parse logicalOR expressions', () => {
-          expectEval("false||true").toEqual(false || true);
-          expectEval("false||false").toEqual(false || false);
-        });
-
-        it('should short-circuit AND operator',
-           () => { expectEval('false && a()', td(() => {throw "BOOM"})).toBe(false); });
-
-        it('should short-circuit OR operator',
-           () => { expectEval('true || a()', td(() => {throw "BOOM"})).toBe(true); });
-
-        it('should evaluate grouped expressions',
-           () => { expectEval("(1+2)*3").toEqual((1 + 2) * 3); });
-
-        it('should parse an empty string', () => { expectEval('').toBeNull(); });
-      });
-
-      describe("literals", () => {
-        it('should evaluate array', () => {
-          expectEval("[1][0]").toEqual(1);
-          expectEval("[[1]][0][0]").toEqual(1);
-          expectEval("[]").toEqual([]);
-          expectEval("[].length").toEqual(0);
-          expectEval("[1, 2].length").toEqual(2);
-        });
-
-        it('should evaluate map', () => {
-          expectEval("{}").toEqual({});
-          expectEval("{a:'b'}['a']").toEqual('b');
-          expectEval("{'a':'b'}['a']").toEqual('b');
-          expectEval("{\"a\":'b'}['a']").toEqual('b');
-          expectEval("{\"a\":'b'}['a']").toEqual("b");
-          expectEval("{}['a']").not.toBeDefined();
-          expectEval("{\"a\":'b'}['invalid']").not.toBeDefined();
-        });
-
-        it('should only allow identifier, string, or keyword as map key', () => {
-          expectEvalError('{(:0}')
-              .toThrowError(new RegExp('expected identifier, keyword, or string'));
-          expectEvalError('{1234:0}')
-              .toThrowError(new RegExp('expected identifier, keyword, or string'));
-        });
-      });
-
-      describe("member access", () => {
-        it("should parse field access", () => {
-          expectEval("a", td(999)).toEqual(999);
-          expectEval("a.a", td(td(999))).toEqual(999);
-        });
-
-        it('should throw when accessing a field on null',
-           () => { expectEvalError("a.a.a").toThrowError(); });
-
-        it('should only allow identifier or keyword as member names', () => {
-          expectEvalError('x.(').toThrowError(new RegExp('identifier or keyword'));
-          expectEvalError('x. 1234').toThrowError(new RegExp('identifier or keyword'));
-          expectEvalError('x."foo"').toThrowError(new RegExp('identifier or keyword'));
-        });
-
-        it("should read a field from Locals", () => {
-          var locals = new Locals(null, MapWrapper.createFromPairs([["key", "value"]]));
-          expectEval("key", null, locals).toEqual("value");
-        });
-
-        it("should handle nested Locals", () => {
-          var nested = new Locals(null, MapWrapper.createFromPairs([["key", "value"]]));
-          var locals = new Locals(nested, new Map());
-          expectEval("key", null, locals).toEqual("value");
-        });
-
-        it("should fall back to a regular field read when Locals " +
-               "does not have the requested field",
-           () => {
-             var locals = new Locals(null, new Map());
-             expectEval("a", td(999), locals).toEqual(999);
-           });
-      });
-
-      describe('safe navigation operator', () => {
-        it('should parse field access', () => {
-          expectEval('a?.a', td(td(999))).toEqual(999);
-          expectEval('a.a?.a', td(td(td(999)))).toEqual(999);
-        });
-
-        it('should return null when accessing a field on null',
-           () => { expect(() => { expectEval('null?.a', td()).toEqual(null); }).not.toThrow(); });
-
-        it('should have the same priority as .', () => {
-          expect(() => { expectEval('null?.a.a', td()).toEqual(null); }).toThrowError();
-        });
-
-        if (!IS_DARTIUM) {
-          it('should return null when accessing a field on undefined', () => {
-            expect(() => { expectEval('_undefined?.a', td()).toEqual(null); }).not.toThrow();
-          });
-        }
-
-        it('should evaluate method calls',
-           () => { expectEval('a?.add(1,2)', td(td())).toEqual(3); });
-
-        it('should return null when accessing a method on null', () => {
-          expect(() => { expectEval('null?.add(1, 2)', td()).toEqual(null); }).not.toThrow();
-        });
-      });
-
-      describe("method calls", () => {
-        it("should evaluate method calls", () => {
-          expectEval("fn()", td(0, 0, "constant")).toEqual("constant");
-          expectEval("add(1,2)").toEqual(3);
-          expectEval("a.add(1,2)", td(td())).toEqual(3);
-          expectEval("fn().add(1,2)", td(0, 0, td())).toEqual(3);
-        });
-
-        it('should throw when more than 10 arguments', () => {
-          expectEvalError("fn(1,2,3,4,5,6,7,8,9,10,11)").toThrowError(new RegExp('more than'));
-        });
-
-        it('should throw when no method', () => { expectEvalError("blah()").toThrowError(); });
-
-        it('should evaluate a method from Locals', () => {
-          var locals = new Locals(null, MapWrapper.createFromPairs([['fn', () => 'child']]));
-          expectEval("fn()", td(0, 0, 'parent'), locals).toEqual('child');
-        });
-
-        it('should fall back to the parent context when Locals does not ' +
-               'have the requested method',
-           () => {
-             var locals = new Locals(null, new Map());
-             expectEval("fn()", td(0, 0, 'parent'), locals).toEqual('parent');
-           });
-      });
-
-      describe("functional calls", () => {
-        it("should evaluate function calls",
-           () => { expectEval("fn()(1,2)", td(0, 0, (a, b) => a + b)).toEqual(3); });
-
-        it('should throw on non-function function calls',
-           () => { expectEvalError("4()").toThrowError(new RegExp('4 is not a function')); });
-
-        it('should parse functions for object indices',
-           () => { expectEval('a[b()]()', td([() => 6], () => 0)).toEqual(6); });
-      });
-
-      describe("conditional", () => {
-        it('should parse ternary/conditional expressions', () => {
-          expectEval("7==3+4?10:20").toEqual(10);
-          expectEval("false?10:20").toEqual(20);
-        });
-
-        it('should throw on incorrect ternary operator syntax', () => {
-          expectEvalError("true?1").toThrowError(new RegExp(
-              'Parser Error: Conditional expression true\\?1 requires all 3 expressions'));
-        });
-      });
-
-      describe("if", () => {
-        it('should parse if statements', () => {
-
-          var fixtures = [
-            ['if (true) a = 0', 0, null],
-            ['if (false) a = 0', null, null],
-            ['if (a == null) b = 0', null, 0],
-            ['if (true) { a = 0; b = 0 }', 0, 0],
-            ['if (true) { a = 0; b = 0 } else { a = 1; b = 1; }', 0, 0],
-            ['if (false) { a = 0; b = 0 } else { a = 1; b = 1; }', 1, 1],
-            ['if (false) { } else { a = 1; b = 1; }', 1, 1],
-          ];
-
-          fixtures.forEach(fix => {
-            var testData = td(null, null);
-            evalAction(fix[0], testData);
-            expect(testData.a).toEqual(fix[1]);
-            expect(testData.b).toEqual(fix[2]);
-          });
-        });
-      });
-
-      describe("assignment", () => {
-        it("should support field assignments", () => {
-          var context = td();
-          expectEval("a=12", context).toEqual(12);
-          expect(context.a).toEqual(12);
-        });
-
-        it("should support nested field assignments", () => {
-          var context = td(td(td()));
-          expectEval("a.a.a=123;", context).toEqual(123);
-          expect(context.a.a.a).toEqual(123);
-        });
-
-        it("should support multiple assignments", () => {
-          var context = td();
-          expectEval("a=123; b=234", context).toEqual(234);
-          expect(context.a).toEqual(123);
-          expect(context.b).toEqual(234);
-        });
-
-        it("should support array updates", () => {
-          var context = td([100]);
-          expectEval('a[0] = 200', context).toEqual(200);
-          expect(context.a[0]).toEqual(200);
-        });
-
-        it("should support map updates", () => {
-          var context = td({"key": 100});
-          expectEval('a["key"] = 200', context).toEqual(200);
-          expect(context.a["key"]).toEqual(200);
-        });
-
-        it("should support array/map updates", () => {
-          var context = td([{"key": 100}]);
-          expectEval('a[0]["key"] = 200', context).toEqual(200);
-          expect(context.a[0]["key"]).toEqual(200);
-        });
-
-        it('should allow assignment after array dereference', () => {
-          var context = td([td()]);
-          expectEval('a[0].a = 200', context).toEqual(200);
-          expect(context.a[0].a).toEqual(200);
-        });
-
-        it('should throw on bad assignment', () => {
-          expectEvalError("5=4").toThrowError(new RegExp("Expression 5 is not assignable"));
-        });
-
-        it('should reassign when no variable binding with the given name', () => {
-          var context = td();
-          var locals = new Locals(null, new Map());
-          expectEval('a = 200', context, locals).toEqual(200);
-          expect(context.a).toEqual(200);
-        });
-
-        it('should throw when reassigning a variable binding', () => {
-          var locals = new Locals(null, MapWrapper.createFromPairs([["key", "value"]]));
-          expectEvalError('key = 200', null, locals)
-              .toThrowError(new RegExp("Cannot reassign a variable binding"));
-        });
-      });
-
-      describe("general error handling", () => {
-        it("should throw on an unexpected token", () => {
-          expectEvalError("[1,2] trac").toThrowError(new RegExp('Unexpected token \'trac\''));
-        });
-
-        it('should throw a reasonable error for unconsumed tokens', () => {
-          expectEvalError(")")
-              .toThrowError(new RegExp("Unexpected token \\) at column 1 in \\[\\)\\]"));
-        });
-
-        it('should throw on missing expected token', () => {
-          expectEvalError("a(b").toThrowError(
-              new RegExp("Missing expected \\) at the end of the expression \\[a\\(b\\]"));
-        });
-      });
-
-      it("should error when using pipes",
-         () => { expectEvalError('x|blah').toThrowError(new RegExp('Cannot have a pipe')); });
-
-      it('should pass exceptions', () => {
-        expect(() => {
-          parseAction('a()').eval(td(() => {throw new BaseException("boo to you")}), emptyLocals());
-        }).toThrowError('boo to you');
-      });
-
-      describe("multiple statements", () => {
-        it("should return the last non-blank value", () => {
-          expectEval("a=1;b=3;a+b").toEqual(4);
-          expectEval("1;;").toEqual(1);
-        });
-      });
-
-      it('should store the source in the result',
-         () => { expect(parseAction('someExpr').source).toBe('someExpr'); });
-
-      it('should store the passed-in location',
-         () => { expect(parseAction('someExpr', 'location').location).toBe('location'); });
-    });
-
-    describe("parseBinding", () => {
-      describe("pipes", () => {
-        it("should parse pipes", () => {
-          var originalExp = '"Foo" | uppercase';
-          var ast = parseBinding(originalExp).ast;
-          expect(ast).toBeAnInstanceOf(BindingPipe);
-          expect(new Unparser().unparse(ast)).toEqual(`(${originalExp})`);
-        });
-
-        it("should parse pipes in the middle of a binding", () => {
-          var ast = parseBinding('(user | a | b).name').ast;
-          expect(new Unparser().unparse(ast)).toEqual('((user | a) | b).name');
-        });
-
-        it("should parse pipes with args", () => {
-          var ast = parseBinding("(1|a:2)|b:3").ast;
-          expect(new Unparser().unparse(ast)).toEqual('((1 | a:2) | b:3)');
-        });
-
-        it('should only allow identifier or keyword as formatter names', () => {
-          expect(() => parseBinding('"Foo"|(')).toThrowError(new RegExp('identifier or keyword'));
-          expect(() => parseBinding('"Foo"|1234'))
-              .toThrowError(new RegExp('identifier or keyword'));
-          expect(() => parseBinding('"Foo"|"uppercase"'))
-              .toThrowError(new RegExp('identifier or keyword'));
-        });
-
-        it('should parse pipes', () => {
-          let unparser = new Unparser();
-          let exps = [
-            ['a(b | c)', 'a((b | c))'],
-            ['a.b(c.d(e) | f)', 'a.b((c.d(e) | f))'],
-            ['[1, 2, 3] | a', '([1, 2, 3] | a)'],
-            ['{a: 1} | b', '({a: 1} | b)'],
-            ['a[b] | c', '(a[b] | c)'],
-            ['a?.b | c', '(a?.b | c)'],
-            ['true | a', '(true | a)'],
-            ['a | b:c | d', '(a | b:(c | d))'],
-            ['(a | b:c) | d', '((a | b:c) | d)']
-          ];
-
-          ListWrapper.forEach(exps, e => {
-            var ast = parseBinding(e[0]).ast;
-            expect(unparser.unparse(ast)).toEqual(e[1]);
-          });
-        });
-      });
-
-      it('should store the source in the result',
-         () => { expect(parseBinding('someExpr').source).toBe('someExpr'); });
-
-      it('should store the passed-in location',
-         () => { expect(parseBinding('someExpr', 'location').location).toBe('location'); });
-
-      it('should throw on chain expressions', () => {
-        expect(() => parseBinding("1;2")).toThrowError(new RegExp("contain chained expression"));
-      });
-
-      it('should throw on assignment', () => {
-        expect(() => parseBinding("1;2")).toThrowError(new RegExp("contain chained expression"));
-      });
-    });
-
-    describe('parseTemplateBindings', () => {
-
-      function keys(templateBindings) {
-        return ListWrapper.map(templateBindings, (binding) => binding.key);
-      }
-
-      function keyValues(templateBindings) {
-        return ListWrapper.map(templateBindings, (binding) => {
-          if (binding.keyIsVar) {
-            return '#' + binding.key + (isBlank(binding.name) ? '=null' : '=' + binding.name);
-          } else {
-            return binding.key + (isBlank(binding.expression) ? '' : `=${binding.expression}`)
-          }
-        });
-      }
-
-      function exprSources(templateBindings) {
-        return ListWrapper.map(templateBindings, (binding) => isPresent(binding.expression) ?
-                                                                  binding.expression.source :
-                                                                  null);
-      }
-
-      function exprAsts(templateBindings) {
-        return ListWrapper.map(templateBindings, (binding) => isPresent(binding.expression) ?
-                                                                  binding.expression :
-                                                                  null);
-      }
-
-      it('should parse an empty string', () => {
-        var bindings = parseTemplateBindings('');
-        expect(bindings).toEqual([]);
-      });
-
-      it('should parse a string without a value', () => {
-        var bindings = parseTemplateBindings('a');
-        expect(keys(bindings)).toEqual(['a']);
-      });
-
-      it('should only allow identifier, string, or keyword including dashes as keys', () => {
-        var bindings = parseTemplateBindings("a:'b'");
-        expect(keys(bindings)).toEqual(['a']);
-
-        bindings = parseTemplateBindings("'a':'b'");
-        expect(keys(bindings)).toEqual(['a']);
-
-        bindings = parseTemplateBindings("\"a\":'b'");
-        expect(keys(bindings)).toEqual(['a']);
-
-        bindings = parseTemplateBindings("a-b:'c'");
-        expect(keys(bindings)).toEqual(['a-b']);
-
-        expect(() => { parseTemplateBindings('(:0'); })
-            .toThrowError(new RegExp('expected identifier, keyword, or string'));
-
-        expect(() => { parseTemplateBindings('1234:0'); })
-            .toThrowError(new RegExp('expected identifier, keyword, or string'));
-      });
-
-      it('should detect expressions as value', () => {
-        var bindings = parseTemplateBindings("a:b");
-        expect(exprSources(bindings)).toEqual(['b']);
-        expect(evalAsts(exprAsts(bindings), td(0, 23))).toEqual([23]);
-
-        bindings = parseTemplateBindings("a:1+1");
-        expect(exprSources(bindings)).toEqual(['1+1']);
-        expect(evalAsts(exprAsts(bindings))).toEqual([2]);
-      });
-
-      it('should detect names as value', () => {
-        var bindings = parseTemplateBindings("a:#b");
-        expect(keyValues(bindings)).toEqual(['a', '#b=\$implicit']);
-      });
-
-      it('should allow space and colon as separators', () => {
-        var bindings = parseTemplateBindings("a:b");
-        expect(keys(bindings)).toEqual(['a']);
-        expect(exprSources(bindings)).toEqual(['b']);
-
-        bindings = parseTemplateBindings("a b");
-        expect(keys(bindings)).toEqual(['a']);
-        expect(exprSources(bindings)).toEqual(['b']);
-      });
-
-      it('should allow multiple pairs', () => {
-        var bindings = parseTemplateBindings("a 1 b 2");
-        expect(keys(bindings)).toEqual(['a', 'a-b']);
-        expect(exprSources(bindings)).toEqual(['1 ', '2']);
-      });
-
-      it('should store the sources in the result', () => {
-        var bindings = parseTemplateBindings("a 1,b 2");
-        expect(bindings[0].expression.source).toEqual('1');
-        expect(bindings[1].expression.source).toEqual('2');
-      });
-
-      it('should store the passed-in location', () => {
-        var bindings = parseTemplateBindings("a 1,b 2", 'location');
-        expect(bindings[0].expression.location).toEqual('location');
-      });
-
-      it('should support var/# notation', () => {
-        var bindings = parseTemplateBindings("var i");
-        expect(keyValues(bindings)).toEqual(['#i=\$implicit']);
-
-        bindings = parseTemplateBindings("#i");
-        expect(keyValues(bindings)).toEqual(['#i=\$implicit']);
-
-        bindings = parseTemplateBindings("var a; var b");
-        expect(keyValues(bindings)).toEqual(['#a=\$implicit', '#b=\$implicit']);
-
-        bindings = parseTemplateBindings("#a; #b;");
-        expect(keyValues(bindings)).toEqual(['#a=\$implicit', '#b=\$implicit']);
-
-        bindings = parseTemplateBindings("var i-a = k-a");
-        expect(keyValues(bindings)).toEqual(['#i-a=k-a']);
-
-        bindings = parseTemplateBindings("keyword var item; var i = k");
-        expect(keyValues(bindings)).toEqual(['keyword', '#item=\$implicit', '#i=k']);
-
-        bindings = parseTemplateBindings("keyword: #item; #i = k");
-        expect(keyValues(bindings)).toEqual(['keyword', '#item=\$implicit', '#i=k']);
-
-        bindings = parseTemplateBindings("directive: var item in expr; var a = b", 'location');
-        expect(keyValues(bindings))
-            .toEqual(['directive', '#item=\$implicit', 'directive-in=expr in location', '#a=b']);
-      });
-
-      it('should parse pipes', () => {
-        var bindings = parseTemplateBindings('key value|pipe');
-        var ast = bindings[0].expression.ast;
-        expect(ast).toBeAnInstanceOf(BindingPipe);
-      });
-    });
-
-    describe('parseInterpolation', () => {
-      it('should return null if no interpolation',
-         () => { expect(parseInterpolation('nothing')).toBe(null); });
-
-      it('should parse no prefix/suffix interpolation', () => {
-        var ast = parseInterpolation('{{a}}').ast;
-        expect(ast.strings).toEqual(['', '']);
-        expect(ast.expressions.length).toEqual(1);
-        expect(ast.expressions[0].name).toEqual('a');
-      });
-
-      it('should parse prefix/suffix with multiple interpolation', () => {
-        var originalExp = 'before {{ a }} middle {{ b }} after';
-        var ast = parseInterpolation(originalExp).ast;
-        expect(new Unparser().unparse(ast)).toEqual(originalExp);
-      });
-    });
-
-    describe("parseSimpleBinding", () => {
-      it("should parse a field access", () => {
-        var p = parseSimpleBinding("name");
-        expect(unparse(p)).toEqual("name");
-      });
-
-      it("should parse a constant", () => {
-        var p = parseSimpleBinding("[1, 2]");
-        expect(unparse(p)).toEqual("[1, 2]");
-      });
-
-      it("should throw when the given expression is not just a field name", () => {
-        expect(() => parseSimpleBinding("name + 1"))
-            .toThrowError(new RegExp(
-                'Simple binding expression can only contain field access and constants'));
-      });
-    });
-
-    describe('wrapLiteralPrimitive', () => {
-      it('should wrap a literal primitive', () => {
-        expect(createParser().wrapLiteralPrimitive("foo", null).eval(null, emptyLocals()))
-            .toEqual("foo");
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/change_detection/parser/unparser.ts b/modules/angular2/test/change_detection/parser/unparser.ts
deleted file mode 100644
index 47ef2e52e70c..000000000000
--- a/modules/angular2/test/change_detection/parser/unparser.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-import {
-  AST,
-  AstVisitor,
-  AccessMember,
-  Assignment,
-  Binary,
-  Chain,
-  Conditional,
-  EmptyExpr,
-  If,
-  BindingPipe,
-  FunctionCall,
-  ImplicitReceiver,
-  Interpolation,
-  KeyedAccess,
-  LiteralArray,
-  LiteralMap,
-  LiteralPrimitive,
-  MethodCall,
-  PrefixNot,
-  SafeAccessMember,
-  SafeMethodCall
-} from 'angular2/src/change_detection/parser/ast';
-
-
-import {StringWrapper, RegExpWrapper, isPresent, isString} from 'angular2/src/facade/lang';
-
-var quoteRegExp = RegExpWrapper.create('"');
-
-export class Unparser implements AstVisitor {
-  private _expression: string;
-
-  unparse(ast: AST) {
-    this._expression = '';
-    this._visit(ast);
-    return this._expression;
-  }
-
-  visitAccessMember(ast: AccessMember) {
-    this._visit(ast.receiver);
-
-    this._expression += ast.receiver instanceof ImplicitReceiver ? `${ast.name}` : `.${ast.name}`;
-  }
-
-  visitAssignment(ast: Assignment) {
-    this._visit(ast.target);
-    this._expression += ' = ';
-    this._visit(ast.value);
-  }
-
-  visitBinary(ast: Binary) {
-    this._visit(ast.left);
-    this._expression += ` ${ast.operation} `;
-    this._visit(ast.right);
-  }
-
-  visitChain(ast: Chain) {
-    var len = ast.expressions.length;
-    for (let i = 0; i < len; i++) {
-      this._visit(ast.expressions[i]);
-      this._expression += i == len - 1 ? ';' : '; ';
-    }
-  }
-
-  visitConditional(ast: Conditional) {
-    this._visit(ast.condition);
-    this._expression += ' ? ';
-    this._visit(ast.trueExp);
-    this._expression += ' : ';
-    this._visit(ast.falseExp);
-  }
-
-  visitIf(ast: If) {
-    this._expression += 'if (';
-    this._visit(ast.condition);
-    this._expression += ') ';
-    this._visitExpOrBlock(ast.trueExp);
-    if (isPresent(ast.falseExp)) {
-      this._expression += ' else ';
-      this._visitExpOrBlock(ast.falseExp);
-    }
-  }
-
-  visitPipe(ast: BindingPipe) {
-    this._expression += '(';
-    this._visit(ast.exp);
-    this._expression += ` | ${ast.name}`;
-    ast.args.forEach(arg => {
-      this._expression += ':';
-      this._visit(arg);
-    });
-    this._expression += ')';
-  }
-
-  visitFunctionCall(ast: FunctionCall) {
-    this._visit(ast.target);
-    this._expression += '(';
-    var isFirst = true;
-    ast.args.forEach(arg => {
-      if (!isFirst) this._expression += ', ';
-      isFirst = false;
-      this._visit(arg);
-    });
-    this._expression += ')';
-  }
-
-  visitImplicitReceiver(ast: ImplicitReceiver) {}
-
-  visitInterpolation(ast: Interpolation) {
-    for (let i = 0; i < ast.strings.length; i++) {
-      this._expression += ast.strings[i];
-      if (i < ast.expressions.length) {
-        this._expression += '{{ ';
-        this._visit(ast.expressions[i]);
-        this._expression += ' }}';
-      }
-    }
-  }
-
-  visitKeyedAccess(ast: KeyedAccess) {
-    this._visit(ast.obj);
-    this._expression += '[';
-    this._visit(ast.key);
-    this._expression += ']';
-  }
-
-  visitLiteralArray(ast: LiteralArray) {
-    this._expression += '[';
-    var isFirst = true;
-    ast.expressions.forEach(expression => {
-      if (!isFirst) this._expression += ', ';
-      isFirst = false;
-      this._visit(expression);
-    });
-
-    this._expression += ']';
-  }
-
-  visitLiteralMap(ast: LiteralMap) {
-    this._expression += '{';
-    var isFirst = true;
-    for (let i = 0; i < ast.keys.length; i++) {
-      if (!isFirst) this._expression += ', ';
-      isFirst = false;
-      this._expression += `${ast.keys[i]}: `;
-      this._visit(ast.values[i]);
-    }
-
-    this._expression += '}';
-  }
-
-  visitLiteralPrimitive(ast: LiteralPrimitive) {
-    if (isString(ast.value)) {
-      this._expression += `"${StringWrapper.replaceAll(ast.value, quoteRegExp, '\"')}"`;
-    } else {
-      this._expression += `${ast.value}`;
-    }
-  }
-
-  visitMethodCall(ast: MethodCall) {
-    this._visit(ast.receiver);
-    this._expression += ast.receiver instanceof ImplicitReceiver ? `${ast.name}(` :
-                                                                   `.${ast.name}(`;
-    var isFirst = true;
-    ast.args.forEach(arg => {
-      if (!isFirst) this._expression += ', ';
-      isFirst = false;
-      this._visit(arg);
-    });
-    this._expression += ')';
-  }
-
-  visitPrefixNot(ast: PrefixNot) {
-    this._expression += '!';
-    this._visit(ast.expression);
-  }
-
-  visitSafeAccessMember(ast: SafeAccessMember) {
-    this._visit(ast.receiver);
-    this._expression += `?.${ast.name}`;
-  }
-
-  visitSafeMethodCall(ast: SafeMethodCall) {
-    this._visit(ast.receiver);
-    this._expression += `?.${ast.name}(`;
-    var isFirst = true;
-    ast.args.forEach(arg => {
-      if (!isFirst) this._expression += ', ';
-      isFirst = false;
-      this._visit(arg);
-    });
-    this._expression += ')';
-  }
-
-  private _visit(ast: AST) { ast.visit(this); }
-
-  private _visitExpOrBlock(ast: AST) {
-    var isBlock = ast instanceof Chain || ast instanceof EmptyExpr;
-    if (isBlock) this._expression += '{ ';
-    this._visit(ast);
-    if (isBlock) this._expression += ' }';
-  }
-}
diff --git a/modules/angular2/test/change_detection/parser/unparser_spec.ts b/modules/angular2/test/change_detection/parser/unparser_spec.ts
deleted file mode 100644
index d10970ff074b..000000000000
--- a/modules/angular2/test/change_detection/parser/unparser_spec.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import {ddescribe, describe, it, xit, iit, expect, beforeEach} from 'angular2/test_lib';
-
-import {
-  AST,
-  ASTWithSource,
-  AccessMember,
-  Assignment,
-  Binary,
-  Chain,
-  Conditional,
-  EmptyExpr,
-  If,
-  BindingPipe,
-  ImplicitReceiver,
-  Interpolation,
-  KeyedAccess,
-  LiteralArray,
-  LiteralMap,
-  LiteralPrimitive,
-  MethodCall,
-  PrefixNot,
-  SafeAccessMember,
-  SafeMethodCall
-} from 'angular2/src/change_detection/parser/ast';
-
-import {Parser} from 'angular2/src/change_detection/parser/parser';
-import {Lexer} from 'angular2/src/change_detection/parser/lexer';
-import {Unparser} from './unparser';
-
-import {reflector} from 'angular2/src/reflection/reflection';
-
-import {isPresent, Type} from 'angular2/src/facade/lang';
-
-export function main() {
-  let parser: Parser = new Parser(new Lexer(), reflector);
-  let unparser: Unparser = new Unparser();
-
-  function parseAction(text, location = null): ASTWithSource {
-    return parser.parseAction(text, location);
-  }
-
-  function parseBinding(text, location = null): ASTWithSource {
-    return parser.parseBinding(text, location);
-  }
-
-  function check(expression: string, type: Type): void {
-    var ast = parseAction(expression).ast;
-    if (isPresent(type)) {
-      expect(ast).toBeAnInstanceOf(type);
-    }
-    expect(unparser.unparse(ast)).toEqual(expression);
-  }
-
-  describe('Unparser', () => {
-    it('should support AccessMember', () => {
-      check('a', AccessMember);
-      check('a.b', AccessMember);
-    });
-
-    it('should support Assignment', () => { check('a = b', Assignment); });
-
-    it('should support Binary', () => { check('a && b', Binary); });
-
-    it('should support Chain', () => { check('a; b;', Chain); });
-
-    it('should support Conditional', () => { check('a ? b : c', Conditional); });
-
-    it('should support Pipe', () => {
-      var originalExp = '(a | b)';
-      var ast = parseBinding(originalExp).ast;
-      expect(ast).toBeAnInstanceOf(BindingPipe);
-      expect(unparser.unparse(ast)).toEqual(originalExp);
-    });
-
-    it('should support KeyedAccess', () => { check('a[b]', KeyedAccess); });
-
-    it('should support LiteralArray', () => { check('[a, b]', LiteralArray); });
-
-    it('should support LiteralMap', () => { check('{a: b, c: d}', LiteralMap); });
-
-    it('should support LiteralPrimitive', () => {
-      check('true', LiteralPrimitive);
-      check('"a"', LiteralPrimitive);
-      check('1.234', LiteralPrimitive);
-    });
-
-    it('should support MethodCall', () => {
-      check('a(b, c)', MethodCall);
-      check('a.b(c, d)', MethodCall);
-    });
-
-    it('should support PrefixNot', () => { check('!a', PrefixNot); });
-
-    it('should support SafeAccessMember', () => { check('a?.b', SafeAccessMember); });
-
-    it('should support SafeMethodCall', () => { check('a?.b(c, d)', SafeMethodCall); });
-
-    it('should support if statements', () => {
-      var ifs = [
-        'if (true) a()',
-        'if (true) a() else b()',
-        'if (a()) { b = 1; c = 2; }',
-        'if (a()) b = 1 else { c = 2; d = e(); }'
-      ];
-
-      ifs.forEach(ifStmt => check(ifStmt, If));
-    });
-
-    it('should support complex expression', () => {
-      var originalExp = 'a + 3 * fn([(c + d | e).f], {a: 3})[g].h && i';
-      var ast = parseBinding(originalExp).ast;
-      expect(unparser.unparse(ast)).toEqual(originalExp);
-    });
-
-    it('should support Interpolation', () => {
-      var ast = parser.parseInterpolation('a {{ b }}', null).ast;
-      expect(ast).toBeAnInstanceOf(Interpolation);
-      expect(unparser.unparse(ast)).toEqual('a {{ b }}');
-
-      ast = parser.parseInterpolation('a {{ b }} c', null).ast;
-      expect(ast).toBeAnInstanceOf(Interpolation);
-      expect(unparser.unparse(ast)).toEqual('a {{ b }} c');
-    });
-
-    it('should support EmptyExpr', () => {
-      var ast = parser.parseAction('if (true) { }', null).ast;
-      expect(ast).toBeAnInstanceOf(If);
-      expect((<If>ast).trueExp).toBeAnInstanceOf(EmptyExpr);
-      expect(unparser.unparse(ast)).toEqual('if (true) {  }');
-    });
-  });
-}
diff --git a/modules/angular2/test/change_detection/pipes/iterable_changes_spec.ts b/modules/angular2/test/change_detection/pipes/iterable_changes_spec.ts
deleted file mode 100644
index 2691b3679630..000000000000
--- a/modules/angular2/test/change_detection/pipes/iterable_changes_spec.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import {describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-import {IterableChanges} from 'angular2/src/change_detection/pipes/iterable_changes';
-
-import {NumberWrapper} from 'angular2/src/facade/lang';
-import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-
-import {TestIterable} from '../iterable';
-import {iterableChangesAsString} from '../util';
-
-// todo(vicb): UnmodifiableListView / frozen object when implemented
-export function main() {
-  describe('collection_changes', function() {
-    describe('CollectionChanges', function() {
-      var changes;
-
-      beforeEach(() => { changes = new IterableChanges(); });
-
-      afterEach(() => { changes = null; });
-
-      it('should support list and iterables', () => {
-        expect(IterableChanges.supportsObj([])).toBeTruthy();
-        expect(IterableChanges.supportsObj(new TestIterable())).toBeTruthy();
-        expect(IterableChanges.supportsObj(new Map())).toBeFalsy();
-        expect(IterableChanges.supportsObj(null)).toBeFalsy();
-      });
-
-      it('should support iterables', () => {
-        let l = new TestIterable();
-
-        changes.check(l);
-        expect(changes.toString()).toEqual(iterableChangesAsString({collection: []}));
-
-        l.list = [1];
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(
-                iterableChangesAsString({collection: ['1[null->0]'], additions: ['1[null->0]']}));
-
-        l.list = [2, 1];
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['2[null->0]', '1[0->1]'],
-              previous: ['1[0->1]'],
-              additions: ['2[null->0]'],
-              moves: ['1[0->1]']
-            }));
-      });
-
-      it('should detect additions', () => {
-        let l = [];
-        changes.check(l);
-        expect(changes.toString()).toEqual(iterableChangesAsString({collection: []}));
-
-        l.push('a');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(
-                iterableChangesAsString({collection: ['a[null->0]'], additions: ['a[null->0]']}));
-
-        l.push('b');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString(
-                {collection: ['a', 'b[null->1]'], previous: ['a'], additions: ['b[null->1]']}));
-      });
-
-      it('should support changing the reference', () => {
-        let l = [0];
-        changes.check(l);
-
-        l = [1, 0];
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['1[null->0]', '0[0->1]'],
-              previous: ['0[0->1]'],
-              additions: ['1[null->0]'],
-              moves: ['0[0->1]']
-            }));
-
-        l = [2, 1, 0];
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['2[null->0]', '1[0->1]', '0[1->2]'],
-              previous: ['1[0->1]', '0[1->2]'],
-              additions: ['2[null->0]'],
-              moves: ['1[0->1]', '0[1->2]']
-            }));
-      });
-
-      it('should handle swapping element', () => {
-        let l = [1, 2];
-        changes.check(l);
-
-        ListWrapper.clear(l);
-        l.push(2);
-        l.push(1);
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['2[1->0]', '1[0->1]'],
-              previous: ['1[0->1]', '2[1->0]'],
-              moves: ['2[1->0]', '1[0->1]']
-            }));
-      });
-
-      it('should handle swapping element', () => {
-        let l = ['a', 'b', 'c'];
-        changes.check(l);
-
-        ListWrapper.removeAt(l, 1);
-        ListWrapper.insert(l, 0, 'b');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['b[1->0]', 'a[0->1]', 'c'],
-              previous: ['a[0->1]', 'b[1->0]', 'c'],
-              moves: ['b[1->0]', 'a[0->1]']
-            }));
-
-        ListWrapper.removeAt(l, 1);
-        l.push('a');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['b', 'c[2->1]', 'a[1->2]'],
-              previous: ['b', 'a[1->2]', 'c[2->1]'],
-              moves: ['c[2->1]', 'a[1->2]']
-            }));
-      });
-
-      it('should detect changes in list', () => {
-        let l = [];
-        changes.check(l);
-
-        l.push('a');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(
-                iterableChangesAsString({collection: ['a[null->0]'], additions: ['a[null->0]']}));
-
-        l.push('b');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString(
-                {collection: ['a', 'b[null->1]'], previous: ['a'], additions: ['b[null->1]']}));
-
-        l.push('c');
-        l.push('d');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['a', 'b', 'c[null->2]', 'd[null->3]'],
-              previous: ['a', 'b'],
-              additions: ['c[null->2]', 'd[null->3]']
-            }));
-
-        ListWrapper.removeAt(l, 2);
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['a', 'b', 'd[3->2]'],
-              previous: ['a', 'b', 'c[2->null]', 'd[3->2]'],
-              moves: ['d[3->2]'],
-              removals: ['c[2->null]']
-            }));
-
-        ListWrapper.clear(l);
-        l.push('d');
-        l.push('c');
-        l.push('b');
-        l.push('a');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['d[2->0]', 'c[null->1]', 'b[1->2]', 'a[0->3]'],
-              previous: ['a[0->3]', 'b[1->2]', 'd[2->0]'],
-              additions: ['c[null->1]'],
-              moves: ['d[2->0]', 'b[1->2]', 'a[0->3]']
-            }));
-      });
-
-      it('should test string by value rather than by reference (Dart)', () => {
-        let l = ['a', 'boo'];
-        changes.check(l);
-
-        var b = 'b';
-        var oo = 'oo';
-        ListWrapper.set(l, 1, b + oo);
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({collection: ['a', 'boo'], previous: ['a', 'boo']}));
-      });
-
-      it('should ignore [NaN] != [NaN] (JS)', () => {
-        let l = [NumberWrapper.NaN];
-        changes.check(l);
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString(
-                {collection: [NumberWrapper.NaN], previous: [NumberWrapper.NaN]}));
-      });
-
-      it('should detect [NaN] moves', () => {
-        let l = [NumberWrapper.NaN, NumberWrapper.NaN];
-        changes.check(l);
-
-        ListWrapper.insert(l, 0, 'foo');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['foo[null->0]', 'NaN[0->1]', 'NaN[1->2]'],
-              previous: ['NaN[0->1]', 'NaN[1->2]'],
-              additions: ['foo[null->0]'],
-              moves: ['NaN[0->1]', 'NaN[1->2]']
-            }));
-      });
-
-      it('should remove and add same item', () => {
-        let l = ['a', 'b', 'c'];
-        changes.check(l);
-
-        ListWrapper.removeAt(l, 1);
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['a', 'c[2->1]'],
-              previous: ['a', 'b[1->null]', 'c[2->1]'],
-              moves: ['c[2->1]'],
-              removals: ['b[1->null]']
-            }));
-
-        ListWrapper.insert(l, 1, 'b');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['a', 'b[null->1]', 'c[1->2]'],
-              previous: ['a', 'c[1->2]'],
-              additions: ['b[null->1]'],
-              moves: ['c[1->2]']
-            }));
-      });
-
-      it('should support duplicates', () => {
-        let l = ['a', 'a', 'a', 'b', 'b'];
-        changes.check(l);
-
-        ListWrapper.removeAt(l, 0);
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['a', 'a', 'b[3->2]', 'b[4->3]'],
-              previous: ['a', 'a', 'a[2->null]', 'b[3->2]', 'b[4->3]'],
-              moves: ['b[3->2]', 'b[4->3]'],
-              removals: ['a[2->null]']
-            }));
-      });
-
-      it('should support insertions/moves', () => {
-        let l = ['a', 'a', 'b', 'b'];
-        changes.check(l);
-
-        ListWrapper.insert(l, 0, 'b');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['b[2->0]', 'a[0->1]', 'a[1->2]', 'b', 'b[null->4]'],
-              previous: ['a[0->1]', 'a[1->2]', 'b[2->0]', 'b'],
-              additions: ['b[null->4]'],
-              moves: ['b[2->0]', 'a[0->1]', 'a[1->2]']
-            }));
-      });
-
-      it('should not report unnecessary moves', () => {
-        let l = ['a', 'b', 'c'];
-        changes.check(l);
-
-        ListWrapper.clear(l);
-        l.push('b');
-        l.push('a');
-        l.push('c');
-        changes.check(l);
-        expect(changes.toString())
-            .toEqual(iterableChangesAsString({
-              collection: ['b[1->0]', 'a[0->1]', 'c'],
-              previous: ['a[0->1]', 'b[1->0]', 'c'],
-              moves: ['b[1->0]', 'a[0->1]']
-            }));
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/change_detection/pipes/json_pipe_spec.ts b/modules/angular2/test/change_detection/pipes/json_pipe_spec.ts
deleted file mode 100644
index 512f876ff91d..000000000000
--- a/modules/angular2/test/change_detection/pipes/json_pipe_spec.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import {
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  AsyncTestCompleter,
-  inject,
-  proxy,
-  SpyObject,
-  IS_DARTIUM
-} from 'angular2/test_lib';
-import {Json, RegExp, NumberWrapper, StringWrapper} from 'angular2/src/facade/lang';
-
-import {JsonPipe} from 'angular2/src/change_detection/pipes/json_pipe';
-
-export function main() {
-  describe("JsonPipe", () => {
-    var regNewLine = '\n';
-    var canHasUndefined;  // because Dart doesn't like undefined;
-    var inceptionObj;
-    var inceptionObjString;
-    var catString;
-    var pipe;
-    var collection: number[];
-
-    function normalize(obj: string): string { return StringWrapper.replace(obj, regNewLine, ''); }
-
-    beforeEach(() => {
-      inceptionObj = {dream: {dream: {dream: 'Limbo'}}};
-      inceptionObjString = "{\n" + "  \"dream\": {\n" + "    \"dream\": {\n" +
-                           "      \"dream\": \"Limbo\"\n" + "    }\n" + "  }\n" + "}";
-
-
-      catString = 'Inception Cat';
-      pipe = new JsonPipe();
-      collection = [];
-    });
-
-    describe("supports", () => {
-      it("should support objects", () => { expect(pipe.supports(inceptionObj)).toBe(true); });
-
-      it("should support strings", () => { expect(pipe.supports(catString)).toBe(true); });
-
-      it("should support null", () => { expect(pipe.supports(null)).toBe(true); });
-
-      it("should support NaN", () => { expect(pipe.supports(NumberWrapper.NaN)).toBe(true); });
-
-      if (!IS_DARTIUM) {
-        it("should support undefined",
-           () => { expect(pipe.supports(canHasUndefined)).toBe(true); });
-      }
-
-    });
-
-    describe("transform", () => {
-      it("should return JSON-formatted string",
-         () => { expect(pipe.transform(inceptionObj)).toEqual(inceptionObjString); });
-
-      it("should return JSON-formatted string even when normalized", () => {
-        var dream1 = normalize(pipe.transform(inceptionObj));
-        var dream2 = normalize(inceptionObjString);
-        expect(dream1).toEqual(dream2);
-      });
-
-      it("should return JSON-formatted string similar to Json.stringify", () => {
-        var dream1 = normalize(pipe.transform(inceptionObj));
-        var dream2 = normalize(Json.stringify(inceptionObj));
-        expect(dream1).toEqual(dream2);
-      });
-
-      it("should return same ref when nothing has changed since the last call", () => {
-        expect(pipe.transform(inceptionObj)).toEqual(inceptionObjString);
-        expect(pipe.transform(inceptionObj)).toEqual(inceptionObjString);
-      });
-
-
-      it("should return a new value when something changed but the ref hasn't", () => {
-        var stringCollection = '[]';
-        var stringCollectionWith1 = '[\n' +
-                                    '  1' +
-                                    '\n]';
-
-        expect(pipe.transform(collection)).toEqual(stringCollection);
-
-        collection.push(1);
-
-        expect(pipe.transform(collection)).toEqual(stringCollectionWith1);
-      });
-
-    });
-
-    describe("onDestroy", () => {
-      it("should do nothing when no latest value",
-         () => { expect(() => pipe.onDestroy()).not.toThrow(); });
-    });
-
-  });
-}
diff --git a/modules/angular2/test/change_detection/pipes/keyvalue_changes_spec.ts b/modules/angular2/test/change_detection/pipes/keyvalue_changes_spec.ts
deleted file mode 100644
index 6edf7d1b6092..000000000000
--- a/modules/angular2/test/change_detection/pipes/keyvalue_changes_spec.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-import {describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-import {KeyValueChanges} from 'angular2/src/change_detection/pipes/keyvalue_changes';
-import {NumberWrapper, isJsObject} from 'angular2/src/facade/lang';
-import {MapWrapper} from 'angular2/src/facade/collection';
-import {kvChangesAsString} from '../util';
-
-// todo(vicb): Update the code & tests for object equality
-export function main() {
-  describe('keyvalue_changes', function() {
-    describe('KeyValueChanges', function() {
-      var changes;
-      var m: Map<any, any>;
-
-      beforeEach(() => {
-        changes = new KeyValueChanges();
-        m = new Map();
-      });
-
-      afterEach(() => { changes = null; });
-
-      it('should detect additions', () => {
-        changes.check(m);
-
-        m.set('a', 1);
-        changes.check(m);
-        expect(changes.toString())
-            .toEqual(kvChangesAsString({map: ['a[null->1]'], additions: ['a[null->1]']}));
-
-        m.set('b', 2);
-        changes.check(m);
-        expect(changes.toString())
-            .toEqual(kvChangesAsString(
-                {map: ['a', 'b[null->2]'], previous: ['a'], additions: ['b[null->2]']}));
-      });
-
-      it('should handle changing key/values correctly', () => {
-        m.set(1, 10);
-        m.set(2, 20);
-        changes.check(m);
-
-        m.set(2, 10);
-        m.set(1, 20);
-        changes.check(m);
-        expect(changes.toString())
-            .toEqual(kvChangesAsString({
-              map: ['1[10->20]', '2[20->10]'],
-              previous: ['1[10->20]', '2[20->10]'],
-              changes: ['1[10->20]', '2[20->10]']
-            }));
-      });
-
-      it('should expose previous and current value', () => {
-        var previous, current;
-
-        m.set(1, 10);
-        changes.check(m);
-
-        m.set(1, 20);
-        changes.check(m);
-
-        changes.forEachChangedItem((record) => {
-          previous = record.previousValue;
-          current = record.currentValue;
-        });
-
-        expect(previous).toEqual(10);
-        expect(current).toEqual(20);
-      });
-
-      it('should do basic map watching', () => {
-        changes.check(m);
-
-        m.set('a', 'A');
-        changes.check(m);
-        expect(changes.toString())
-            .toEqual(kvChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}));
-
-        m.set('b', 'B');
-        changes.check(m);
-        expect(changes.toString())
-            .toEqual(kvChangesAsString(
-                {map: ['a', 'b[null->B]'], previous: ['a'], additions: ['b[null->B]']}));
-
-        m.set('b', 'BB');
-        m.set('d', 'D');
-        changes.check(m);
-        expect(changes.toString())
-            .toEqual(kvChangesAsString({
-              map: ['a', 'b[B->BB]', 'd[null->D]'],
-              previous: ['a', 'b[B->BB]'],
-              additions: ['d[null->D]'],
-              changes: ['b[B->BB]']
-            }));
-
-        MapWrapper.delete(m, 'b');
-        changes.check(m);
-        expect(changes.toString())
-            .toEqual(kvChangesAsString(
-                {map: ['a', 'd'], previous: ['a', 'b[BB->null]', 'd'], removals: ['b[BB->null]']}));
-
-        m.clear();
-        changes.check(m);
-        expect(changes.toString())
-            .toEqual(kvChangesAsString(
-                {previous: ['a[A->null]', 'd[D->null]'], removals: ['a[A->null]', 'd[D->null]']}));
-      });
-
-      it('should test string by value rather than by reference (DART)', () => {
-        m.set('foo', 'bar');
-        changes.check(m);
-
-        var f = 'f';
-        var oo = 'oo';
-        var b = 'b';
-        var ar = 'ar';
-
-        m.set(f + oo, b + ar);
-        changes.check(m);
-
-        expect(changes.toString()).toEqual(kvChangesAsString({map: ['foo'], previous: ['foo']}));
-      });
-
-      it('should not see a NaN value as a change (JS)', () => {
-        m.set('foo', NumberWrapper.NaN);
-        changes.check(m);
-
-        changes.check(m);
-        expect(changes.toString()).toEqual(kvChangesAsString({map: ['foo'], previous: ['foo']}));
-      });
-
-      // JS specific tests (JS Objects)
-      if (isJsObject({})) {
-        describe('JsObject changes', () => {
-          it('should support JS Object', () => {
-            expect(KeyValueChanges.supportsObj({})).toBeTruthy();
-            expect(KeyValueChanges.supportsObj("not supported")).toBeFalsy();
-            expect(KeyValueChanges.supportsObj(0)).toBeFalsy();
-            expect(KeyValueChanges.supportsObj(null)).toBeFalsy();
-          });
-
-          it('should do basic object watching', () => {
-            let m = {};
-            changes.check(m);
-
-            m['a'] = 'A';
-            changes.check(m);
-            expect(changes.toString())
-                .toEqual(kvChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}));
-
-            m['b'] = 'B';
-            changes.check(m);
-            expect(changes.toString())
-                .toEqual(kvChangesAsString(
-                    {map: ['a', 'b[null->B]'], previous: ['a'], additions: ['b[null->B]']}));
-
-            m['b'] = 'BB';
-            m['d'] = 'D';
-            changes.check(m);
-            expect(changes.toString())
-                .toEqual(kvChangesAsString({
-                  map: ['a', 'b[B->BB]', 'd[null->D]'],
-                  previous: ['a', 'b[B->BB]'],
-                  additions: ['d[null->D]'],
-                  changes: ['b[B->BB]']
-                }));
-
-            m = {};
-            m['a'] = 'A';
-            m['d'] = 'D';
-            changes.check(m);
-            expect(changes.toString())
-                .toEqual(kvChangesAsString({
-                  map: ['a', 'd'],
-                  previous: ['a', 'b[BB->null]', 'd'],
-                  removals: ['b[BB->null]']
-                }));
-
-            m = {};
-            changes.check(m);
-            expect(changes.toString())
-                .toEqual(kvChangesAsString({
-                  previous: ['a[A->null]', 'd[D->null]'],
-                  removals: ['a[A->null]', 'd[D->null]']
-                }));
-          });
-        });
-      }
-    });
-  });
-}
diff --git a/modules/angular2/test/change_detection/pipes/limit_to_pipe_spec.ts b/modules/angular2/test/change_detection/pipes/limit_to_pipe_spec.ts
deleted file mode 100644
index c4a7870cd876..000000000000
--- a/modules/angular2/test/change_detection/pipes/limit_to_pipe_spec.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-
-import {LimitToPipe} from 'angular2/src/change_detection/pipes/limit_to_pipe';
-
-export function main() {
-  describe("LimitToPipe", () => {
-    var list;
-    var str;
-    var pipe;
-
-    beforeEach(() => {
-      list = [1, 2, 3, 4, 5];
-      str = 'tuvwxyz';
-      pipe = new LimitToPipe();
-    });
-
-    describe("supports", () => {
-      it("should support strings", () => { expect(pipe.supports(str)).toBe(true); });
-      it("should support lists", () => { expect(pipe.supports(list)).toBe(true); });
-
-      it("should not support other objects", () => {
-        expect(pipe.supports(new Object())).toBe(false);
-        expect(pipe.supports(null)).toBe(false);
-      });
-    });
-
-    describe("transform", () => {
-
-      it('should return the first X items when X is positive', () => {
-        expect(pipe.transform(list, [3])).toEqual([1, 2, 3]);
-        expect(pipe.transform(str, [3])).toEqual('tuv');
-      });
-
-      it('should return the last X items when X is negative', () => {
-        expect(pipe.transform(list, [-3])).toEqual([3, 4, 5]);
-        expect(pipe.transform(str, [-3])).toEqual('xyz');
-      });
-
-      it('should return a copy of input array if X is exceeds array length', () => {
-        expect(pipe.transform(list, [20])).toEqual(list);
-        expect(pipe.transform(list, [-20])).toEqual(list);
-      });
-
-      it('should return the entire string if X exceeds input length', () => {
-        expect(pipe.transform(str, [20])).toEqual(str);
-        expect(pipe.transform(str, [-20])).toEqual(str);
-      });
-
-      it('should not modify the input list', () => {
-        expect(pipe.transform(list, [3])).toEqual([1, 2, 3]);
-        expect(list).toEqual([1, 2, 3, 4, 5]);
-      });
-
-    });
-
-  });
-}
diff --git a/modules/angular2/test/change_detection/pipes/lowercase_pipe_spec.ts b/modules/angular2/test/change_detection/pipes/lowercase_pipe_spec.ts
deleted file mode 100644
index 52637fa38338..000000000000
--- a/modules/angular2/test/change_detection/pipes/lowercase_pipe_spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-
-import {LowerCasePipe} from 'angular2/src/change_detection/pipes/lowercase_pipe';
-
-export function main() {
-  describe("LowerCasePipe", () => {
-    var str;
-    var upper;
-    var lower;
-    var pipe;
-
-    beforeEach(() => {
-      str = 'something';
-      lower = 'something';
-      upper = 'SOMETHING';
-      pipe = new LowerCasePipe();
-    });
-
-    describe("supports", () => {
-      it("should support strings", () => { expect(pipe.supports(str)).toBe(true); });
-
-      it("should not support other objects", () => {
-        expect(pipe.supports(new Object())).toBe(false);
-        expect(pipe.supports(null)).toBe(false);
-      });
-    });
-
-    describe("transform", () => {
-
-      it("should return lowercase", () => {
-        var val = pipe.transform(upper);
-        expect(val).toEqual(lower);
-      });
-
-      it("should lowercase when there is a new value", () => {
-        var val = pipe.transform(upper);
-        expect(val).toEqual(lower);
-        var val2 = pipe.transform('WAT');
-        expect(val2).toEqual('wat');
-      });
-
-    });
-
-  });
-}
diff --git a/modules/angular2/test/change_detection/pipes/observable_pipe_spec.ts b/modules/angular2/test/change_detection/pipes/observable_pipe_spec.ts
deleted file mode 100644
index cc32b55930a6..000000000000
--- a/modules/angular2/test/change_detection/pipes/observable_pipe_spec.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import {
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  AsyncTestCompleter,
-  inject,
-  proxy,
-  SpyObject
-} from 'angular2/test_lib';
-
-import {IMPLEMENTS} from 'angular2/src/facade/lang';
-import {WrappedValue} from 'angular2/src/change_detection/pipes/pipe';
-import {ObservablePipe} from 'angular2/src/change_detection/pipes/observable_pipe';
-import {ChangeDetectorRef} from 'angular2/src/change_detection/change_detector_ref';
-import {EventEmitter, ObservableWrapper, TimerWrapper} from 'angular2/src/facade/async';
-
-export function main() {
-  describe("ObservablePipe", () => {
-    var emitter;
-    var pipe;
-    var ref;
-    var message = new Object();
-
-    beforeEach(() => {
-      emitter = new EventEmitter();
-      ref = new SpyChangeDetectorRef();
-      pipe = new ObservablePipe(ref);
-    });
-
-    describe("supports", () => {
-      it("should support observables", () => { expect(pipe.supports(emitter)).toBe(true); });
-
-      it("should not support other objects", () => {
-        expect(pipe.supports("string")).toBe(false);
-        expect(pipe.supports(null)).toBe(false);
-      });
-    });
-
-    describe("transform", () => {
-      it("should return null when subscribing to an observable",
-         () => { expect(pipe.transform(emitter)).toBe(null); });
-
-      it("should return the latest available value wrapped",
-         inject([AsyncTestCompleter], (async) => {
-           pipe.transform(emitter);
-
-           ObservableWrapper.callNext(emitter, message);
-
-           TimerWrapper.setTimeout(() => {
-             expect(pipe.transform(emitter)).toEqual(new WrappedValue(message));
-             async.done();
-           }, 0)
-         }));
-
-
-      it("should return same value when nothing has changed since the last call",
-         inject([AsyncTestCompleter], (async) => {
-           pipe.transform(emitter);
-           ObservableWrapper.callNext(emitter, message);
-
-           TimerWrapper.setTimeout(() => {
-             pipe.transform(emitter);
-             expect(pipe.transform(emitter)).toBe(message);
-             async.done();
-           }, 0)
-         }));
-
-      it("should dispose of the existing subscription when subscribing to a new observable",
-         inject([AsyncTestCompleter], (async) => {
-           pipe.transform(emitter);
-
-           var newEmitter = new EventEmitter();
-           expect(pipe.transform(newEmitter)).toBe(null);
-
-           // this should not affect the pipe
-           ObservableWrapper.callNext(emitter, message);
-
-           TimerWrapper.setTimeout(() => {
-             expect(pipe.transform(newEmitter)).toBe(null);
-             async.done();
-           }, 0)
-         }));
-
-      it("should request a change detection check upon receiving a new value",
-         inject([AsyncTestCompleter], (async) => {
-           pipe.transform(emitter);
-           ObservableWrapper.callNext(emitter, message);
-
-           TimerWrapper.setTimeout(() => {
-             expect(ref.spy('requestCheck')).toHaveBeenCalled();
-             async.done();
-           }, 0)
-         }));
-    });
-
-    describe("onDestroy", () => {
-      it("should do nothing when no subscription",
-         () => { expect(() => pipe.onDestroy()).not.toThrow(); });
-
-      it("should dispose of the existing subscription", inject([AsyncTestCompleter], (async) => {
-           pipe.transform(emitter);
-           pipe.onDestroy();
-
-           ObservableWrapper.callNext(emitter, message);
-
-           TimerWrapper.setTimeout(() => {
-             expect(pipe.transform(emitter)).toBe(null);
-             async.done();
-           }, 0)
-         }));
-    });
-  });
-}
-
-@proxy
-@IMPLEMENTS(ChangeDetectorRef)
-class SpyChangeDetectorRef extends SpyObject {
-  constructor() { super(ChangeDetectorRef); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
diff --git a/modules/angular2/test/change_detection/pipes/pipe_registry_spec.ts b/modules/angular2/test/change_detection/pipes/pipe_registry_spec.ts
deleted file mode 100644
index f505de9987fb..000000000000
--- a/modules/angular2/test/change_detection/pipes/pipe_registry_spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  SpyPipe,
-  SpyPipeFactory
-} from 'angular2/test_lib';
-
-import {PipeRegistry} from 'angular2/src/change_detection/pipes/pipe_registry';
-
-export function main() {
-  describe("pipe registry", () => {
-    var firstPipe;
-    var secondPipe;
-
-    var firstPipeFactory;
-    var secondPipeFactory;
-
-    beforeEach(() => {
-      firstPipe = <any>new SpyPipe();
-      secondPipe = <any>new SpyPipe();
-
-      firstPipeFactory = <any>new SpyPipeFactory();
-      secondPipeFactory = <any>new SpyPipeFactory();
-    });
-
-    it("should return an existing pipe if it can support the passed in object", () => {
-      var r = new PipeRegistry({"type": []});
-
-      firstPipe.spy("supports").andReturn(true);
-
-      expect(r.get("type", "some object", null, firstPipe)).toEqual(firstPipe);
-    });
-
-    it("should call onDestroy on the provided pipe if it cannot support the provided object",
-       () => {
-         firstPipe.spy("supports").andReturn(false);
-         firstPipeFactory.spy("supports").andReturn(true);
-         firstPipeFactory.spy("create").andReturn(secondPipe);
-
-         var r = new PipeRegistry({"type": [firstPipeFactory]});
-
-         expect(r.get("type", "some object", null, firstPipe)).toEqual(secondPipe);
-         expect(firstPipe.spy("onDestroy")).toHaveBeenCalled();
-       });
-
-    it("should return the first pipe supporting the data type", () => {
-      firstPipeFactory.spy("supports").andReturn(false);
-      firstPipeFactory.spy("create").andReturn(firstPipe);
-
-      secondPipeFactory.spy("supports").andReturn(true);
-      secondPipeFactory.spy("create").andReturn(secondPipe);
-
-      var r = new PipeRegistry({"type": [firstPipeFactory, secondPipeFactory]});
-
-      expect(r.get("type", "some object")).toBe(secondPipe);
-    });
-
-    it("should throw when no matching type", () => {
-      var r = new PipeRegistry({});
-      expect(() => r.get("unknown", "some object"))
-          .toThrowError(`Cannot find 'unknown' pipe supporting object 'some object'`);
-    });
-
-    it("should throw when no matching pipe", () => {
-      var r = new PipeRegistry({"type": []});
-
-      expect(() => r.get("type", "some object"))
-          .toThrowError(`Cannot find 'type' pipe supporting object 'some object'`);
-    });
-  });
-}
\ No newline at end of file
diff --git a/modules/angular2/test/change_detection/pipes/promise_pipe_spec.ts b/modules/angular2/test/change_detection/pipes/promise_pipe_spec.ts
deleted file mode 100644
index db9b00c8a25e..000000000000
--- a/modules/angular2/test/change_detection/pipes/promise_pipe_spec.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import {
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  AsyncTestCompleter,
-  inject,
-  proxy,
-  SpyObject
-} from 'angular2/test_lib';
-import {IMPLEMENTS, isBlank} from 'angular2/src/facade/lang';
-import {PromisePipe} from 'angular2/src/change_detection/pipes/promise_pipe';
-import {WrappedValue} from 'angular2/src/change_detection/pipes/pipe';
-import {ChangeDetectorRef} from 'angular2/src/change_detection/change_detector_ref';
-import {PromiseWrapper, TimerWrapper} from 'angular2/src/facade/async';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-export function main() {
-  describe("PromisePipe", () => {
-    var message = new Object();
-    var pipe;
-    var completer;
-    var ref;
-    // adds longer timers for passing tests in IE
-    var timer = (!isBlank(DOM) && DOM.getUserAgent().indexOf("Trident") > -1) ? 50 : 0;
-
-    beforeEach(() => {
-      completer = PromiseWrapper.completer();
-      ref = new SpyChangeDetectorRef();
-      pipe = new PromisePipe(ref);
-    });
-
-    describe("supports", () => {
-      it("should support promises", () => { expect(pipe.supports(completer.promise)).toBe(true); });
-
-      it("should not support other objects", () => {
-        expect(pipe.supports("string")).toBe(false);
-        expect(pipe.supports(null)).toBe(false);
-      });
-    });
-
-    describe("transform", () => {
-      it("should return null when subscribing to a promise",
-         () => { expect(pipe.transform(completer.promise)).toBe(null); });
-
-      it("should return the latest available value", inject([AsyncTestCompleter], (async) => {
-           pipe.transform(completer.promise);
-
-           completer.resolve(message);
-
-           TimerWrapper.setTimeout(() => {
-             expect(pipe.transform(completer.promise)).toEqual(new WrappedValue(message));
-             async.done();
-           }, timer)
-         }));
-
-      it("should return unwrapped value when nothing has changed since the last call",
-         inject([AsyncTestCompleter], (async) => {
-           pipe.transform(completer.promise);
-           completer.resolve(message);
-
-           TimerWrapper.setTimeout(() => {
-             pipe.transform(completer.promise);
-             expect(pipe.transform(completer.promise)).toBe(message);
-             async.done();
-           }, timer)
-         }));
-
-      it("should dispose of the existing subscription when subscribing to a new promise",
-         inject([AsyncTestCompleter], (async) => {
-           pipe.transform(completer.promise);
-
-           var newCompleter = PromiseWrapper.completer();
-           expect(pipe.transform(newCompleter.promise)).toBe(null);
-
-           // this should not affect the pipe, so it should return WrappedValue
-           completer.resolve(message);
-
-           TimerWrapper.setTimeout(() => {
-             expect(pipe.transform(newCompleter.promise)).toBe(null);
-             async.done();
-           }, timer)
-         }));
-
-      it("should request a change detection check upon receiving a new value",
-         inject([AsyncTestCompleter], (async) => {
-           pipe.transform(completer.promise);
-           completer.resolve(message);
-
-           TimerWrapper.setTimeout(() => {
-             expect(ref.spy('requestCheck')).toHaveBeenCalled();
-             async.done();
-           }, timer)
-         }));
-
-      describe("onDestroy", () => {
-        it("should do nothing when no source",
-           () => { expect(() => pipe.onDestroy()).not.toThrow(); });
-
-        it("should dispose of the existing source", inject([AsyncTestCompleter], (async) => {
-             pipe.transform(completer.promise);
-             expect(pipe.transform(completer.promise)).toBe(null);
-             completer.resolve(message)
-
-
-                 TimerWrapper.setTimeout(() => {
-                   expect(pipe.transform(completer.promise)).toEqual(new WrappedValue(message));
-                   pipe.onDestroy();
-                   expect(pipe.transform(completer.promise)).toBe(null);
-                   async.done();
-                 }, timer);
-           }));
-      });
-    });
-  });
-}
-
-@proxy
-@IMPLEMENTS(ChangeDetectorRef)
-class SpyChangeDetectorRef extends SpyObject {
-  constructor() { super(ChangeDetectorRef); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
diff --git a/modules/angular2/test/change_detection/pipes/uppercase_pipe_spec.ts b/modules/angular2/test/change_detection/pipes/uppercase_pipe_spec.ts
deleted file mode 100644
index 813e39eb2603..000000000000
--- a/modules/angular2/test/change_detection/pipes/uppercase_pipe_spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-
-import {UpperCasePipe} from 'angular2/src/change_detection/pipes/uppercase_pipe';
-
-export function main() {
-  describe("UpperCasePipe", () => {
-    var str;
-    var upper;
-    var lower;
-    var pipe;
-
-    beforeEach(() => {
-      str = 'something';
-      lower = 'something';
-      upper = 'SOMETHING';
-      pipe = new UpperCasePipe();
-    });
-
-    describe("supports", () => {
-      it("should support strings", () => { expect(pipe.supports(str)).toBe(true); });
-
-      it("should not support other objects", () => {
-        expect(pipe.supports(new Object())).toBe(false);
-        expect(pipe.supports(null)).toBe(false);
-      });
-    });
-
-    describe("transform", () => {
-
-      it("should return uppercase", () => {
-        var val = pipe.transform(lower);
-        expect(val).toEqual(upper);
-      });
-
-      it("should uppercase when there is a new value", () => {
-        var val = pipe.transform(lower);
-        expect(val).toEqual(upper);
-        var val2 = pipe.transform('wat');
-        expect(val2).toEqual('WAT');
-      });
-
-    });
-
-  });
-}
diff --git a/modules/angular2/test/change_detection/util.ts b/modules/angular2/test/change_detection/util.ts
deleted file mode 100644
index e2c62453e12c..000000000000
--- a/modules/angular2/test/change_detection/util.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {isBlank, CONST_EXPR} from 'angular2/src/facade/lang';
-
-export function iterableChangesAsString({collection = CONST_EXPR([]), previous = CONST_EXPR([]),
-                                         additions = CONST_EXPR([]), moves = CONST_EXPR([]),
-                                         removals = CONST_EXPR([])}) {
-  return "collection: " + collection.join(', ') + "\n" + "previous: " + previous.join(', ') + "\n" +
-         "additions: " + additions.join(', ') + "\n" + "moves: " + moves.join(', ') + "\n" +
-         "removals: " + removals.join(', ') + "\n";
-}
-
-export function kvChangesAsString({map, previous, additions, changes, removals}: {
-  map?: List<any>,
-  previous?: List<any>,
-  additions?: List<any>,
-  changes?: List<any>,
-  removals?: List<any>
-}): string {
-  if (isBlank(map)) map = [];
-  if (isBlank(previous)) previous = [];
-  if (isBlank(additions)) additions = [];
-  if (isBlank(changes)) changes = [];
-  if (isBlank(removals)) removals = [];
-
-  return "map: " + map.join(', ') + "\n" + "previous: " + previous.join(', ') + "\n" +
-         "additions: " + additions.join(', ') + "\n" + "changes: " + changes.join(', ') + "\n" +
-         "removals: " + removals.join(', ') + "\n";
-}
diff --git a/modules/angular2/test/core/annotations/decorators_spec.dart b/modules/angular2/test/core/annotations/decorators_spec.dart
deleted file mode 100644
index 29fa75dd2e1a..000000000000
--- a/modules/angular2/test/core/annotations/decorators_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library angular2.test.core.annotations.decorators_dart_spec;
-
-main() {
-  // not relavant for dart.
-}
diff --git a/modules/angular2/test/core/annotations/decorators_spec.ts b/modules/angular2/test/core/annotations/decorators_spec.ts
deleted file mode 100644
index 888567a513a5..000000000000
--- a/modules/angular2/test/core/annotations/decorators_spec.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {Component, View, Directive} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-
-export function main() {
-  describe('es5 decorators', () => {
-    it('should declare directive class', () => {
-      var MyDirective = Directive({}).Class({constructor: function() { this.works = true; }});
-      expect(new MyDirective().works).toEqual(true);
-    });
-
-    it('should declare Component class', () => {
-      var MyComponent =
-          Component({}).View({}).View({}).Class({constructor: function() { this.works = true; }});
-      expect(new MyComponent().works).toEqual(true);
-    });
-
-    it('should create type in ES5', () => {
-      function MyComponent(){};
-      var as;
-      (<any>MyComponent).annotations = as = Component({}).View({});
-      expect(reflector.annotations(MyComponent)).toEqual(as.annotations);
-    });
-  });
-}
diff --git a/modules/angular2/test/core/application_spec.ts b/modules/angular2/test/core/application_spec.ts
deleted file mode 100644
index c0af8162626f..000000000000
--- a/modules/angular2/test/core/application_spec.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xdescribe,
-  xit,
-  IS_DARTIUM
-} from 'angular2/test_lib';
-import {isPresent, stringify} from 'angular2/src/facade/lang';
-import {bootstrap, ApplicationRef} from 'angular2/src/core/application';
-import {Component, Directive, View} from 'angular2/annotations';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {PromiseWrapper} from 'angular2/src/facade/async';
-import {bind, Inject, Injector} from 'angular2/di';
-import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
-import {Testability, TestabilityRegistry} from 'angular2/src/core/testability/testability';
-import {DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
-
-@Component({selector: 'hello-app'})
-@View({template: '{{greeting}} world!'})
-class HelloRootCmp {
-  greeting: string;
-  constructor() { this.greeting = 'hello'; }
-}
-
-@Component({selector: 'hello-app'})
-@View({template: 'before: <content></content> after: done'})
-class HelloRootCmpContent {
-  constructor() {}
-}
-
-@Component({selector: 'hello-app-2'})
-@View({template: '{{greeting}} world, again!'})
-class HelloRootCmp2 {
-  greeting: string;
-  constructor() { this.greeting = 'hello'; }
-}
-
-@Component({selector: 'hello-app'})
-@View({template: ''})
-class HelloRootCmp3 {
-  appBinding;
-
-  constructor(@Inject("appBinding") appBinding) { this.appBinding = appBinding; }
-}
-
-@Component({selector: 'hello-app'})
-@View({template: ''})
-class HelloRootCmp4 {
-  lc;
-
-  constructor(@Inject(LifeCycle) lc) { this.lc = lc; }
-}
-
-@Component({selector: 'hello-app'})
-class HelloRootMissingTemplate {
-}
-
-@Directive({selector: 'hello-app'})
-class HelloRootDirectiveIsNotCmp {
-}
-
-export function main() {
-  var fakeDoc, el, el2, testBindings, lightDom;
-
-  beforeEach(() => {
-    fakeDoc = DOM.createHtmlDocument();
-    el = DOM.createElement('hello-app', fakeDoc);
-    el2 = DOM.createElement('hello-app-2', fakeDoc);
-    lightDom = DOM.createElement('light-dom-el', fakeDoc);
-    DOM.appendChild(fakeDoc.body, el);
-    DOM.appendChild(fakeDoc.body, el2);
-    DOM.appendChild(el, lightDom);
-    DOM.setText(lightDom, 'loading');
-    testBindings = [bind(DOCUMENT_TOKEN).toValue(fakeDoc)];
-  });
-
-  describe('bootstrap factory method', () => {
-    it('should throw if bootstrapped Directive is not a Component',
-       inject([AsyncTestCompleter], (async) => {
-         var refPromise =
-             bootstrap(HelloRootDirectiveIsNotCmp, testBindings, (e, t) => { throw e; });
-
-         PromiseWrapper.then(refPromise, null, (reason) => {
-           expect(reason.message)
-               .toContain(
-                   `Could not load '${stringify(HelloRootDirectiveIsNotCmp)}' because it is not a component.`);
-           async.done();
-           return null;
-         });
-       }));
-
-    it('should throw if no element is found', inject([AsyncTestCompleter], (async) => {
-         var refPromise = bootstrap(HelloRootCmp, [], (e, t) => { throw e; });
-         PromiseWrapper.then(refPromise, null, (reason) => {
-           expect(reason.message).toContain('The selector "hello-app" did not match any elements');
-           async.done();
-           return null;
-         });
-       }));
-
-    it('should create an injector promise', () => {
-      var refPromise = bootstrap(HelloRootCmp, testBindings);
-      expect(refPromise).not.toBe(null);
-    });
-
-    it('should display hello world', inject([AsyncTestCompleter], (async) => {
-         var refPromise = bootstrap(HelloRootCmp, testBindings);
-         refPromise.then((ref) => {
-           expect(el).toHaveText('hello world!');
-           async.done();
-         });
-       }));
-
-    it('should support multiple calls to bootstrap', inject([AsyncTestCompleter], (async) => {
-         var refPromise1 = bootstrap(HelloRootCmp, testBindings);
-         var refPromise2 = bootstrap(HelloRootCmp2, testBindings);
-         PromiseWrapper.all([refPromise1, refPromise2])
-             .then((refs) => {
-               expect(el).toHaveText('hello world!');
-               expect(el2).toHaveText('hello world, again!');
-               async.done();
-             });
-       }));
-
-    it("should make the provided bindings available to the application component",
-       inject([AsyncTestCompleter], (async) => {
-         var refPromise =
-             bootstrap(HelloRootCmp3, [testBindings, bind("appBinding").toValue("BoundValue")]);
-
-         refPromise.then((ref) => {
-           expect(ref.hostComponent.appBinding).toEqual("BoundValue");
-           async.done();
-         });
-       }));
-
-    it("should avoid cyclic dependencies when root component requires Lifecycle through DI",
-       inject([AsyncTestCompleter], (async) => {
-         var refPromise = bootstrap(HelloRootCmp4, testBindings);
-
-         refPromise.then((ref) => {
-           expect(ref.hostComponent.lc).toBe(ref.injector.get(LifeCycle));
-           async.done();
-         });
-       }));
-
-    it("should support shadow dom content tag", inject([AsyncTestCompleter], (async) => {
-         var refPromise = bootstrap(HelloRootCmpContent, testBindings);
-         refPromise.then((ref) => {
-           expect(el).toHaveText('before: loading after: done');
-           async.done();
-         });
-       }));
-
-    it('should register each application with the testability registry',
-       inject([AsyncTestCompleter], (async) => {
-         var refPromise1 = bootstrap(HelloRootCmp, testBindings);
-         var refPromise2 = bootstrap(HelloRootCmp2, testBindings);
-
-         PromiseWrapper.all([refPromise1, refPromise2])
-             .then((refs: ApplicationRef[]) => {
-               var registry = refs[0].injector.get(TestabilityRegistry);
-               var testabilities =
-                   [refs[0].injector.get(Testability), refs[1].injector.get(Testability)];
-               PromiseWrapper.all(testabilities)
-                   .then((testabilities: Testability[]) => {
-                     expect(registry.findTestabilityInTree(el)).toEqual(testabilities[0]);
-                     expect(registry.findTestabilityInTree(el2)).toEqual(testabilities[1]);
-                     async.done();
-                   });
-             });
-       }));
-  });
-}
diff --git a/modules/angular2/test/core/compiler/compiler_spec.ts b/modules/angular2/test/core/compiler/compiler_spec.ts
deleted file mode 100644
index 629a7688b34a..000000000000
--- a/modules/angular2/test/core/compiler/compiler_spec.ts
+++ /dev/null
@@ -1,624 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  xdescribe,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  it,
-  SpyObject,
-  proxy
-} from 'angular2/test_lib';
-
-import {List, ListWrapper, Map, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {IMPLEMENTS, Type, isBlank, stringify, isPresent} from 'angular2/src/facade/lang';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-
-import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
-import {AppProtoView} from 'angular2/src/core/compiler/view';
-import {ElementBinder} from 'angular2/src/core/compiler/element_binder';
-import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
-import {Attribute, View, Component, Directive} from 'angular2/annotations';
-import * as viewAnn from 'angular2/src/core/annotations_impl/view';
-import {internalProtoView} from 'angular2/src/core/compiler/view_ref';
-import {DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
-import {ViewResolver} from 'angular2/src/core/compiler/view_resolver';
-import {
-  ComponentUrlMapper,
-  RuntimeComponentUrlMapper
-} from 'angular2/src/core/compiler/component_url_mapper';
-import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
-
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {AppRootUrl} from 'angular2/src/services/app_root_url';
-import * as renderApi from 'angular2/src/render/api';
-// TODO(tbosch): Spys don't support named modules...
-import {RenderCompiler} from 'angular2/src/render/api';
-
-export function main() {
-  describe('compiler', function() {
-    var directiveResolver, tplResolver, renderCompiler, protoViewFactory, cmpUrlMapper,
-        rootProtoView;
-    var renderCompileRequests: any[];
-
-    beforeEach(() => {
-      directiveResolver = new DirectiveResolver();
-      tplResolver = new FakeViewResolver();
-      cmpUrlMapper = new RuntimeComponentUrlMapper();
-      renderCompiler = new SpyRenderCompiler();
-      renderCompiler.spy('compileHost')
-          .andCallFake((componentId) => {
-            return PromiseWrapper.resolve(createRenderProtoView(
-                [createRenderComponentElementBinder(0)], renderApi.ViewType.HOST));
-          });
-      rootProtoView = createRootProtoView(directiveResolver, MainComponent);
-    });
-
-    function createCompiler(
-        renderCompileResults: List<renderApi.ProtoViewDto | Promise<renderApi.ProtoViewDto>>,
-        protoViewFactoryResults: List<List<AppProtoView>>) {
-      var urlResolver = new UrlResolver();
-      renderCompileRequests = [];
-      renderCompiler.spy('compile').andCallFake((view) => {
-        renderCompileRequests.push(view);
-        return PromiseWrapper.resolve(ListWrapper.removeAt(renderCompileResults, 0));
-      });
-
-      protoViewFactory = new FakeProtoViewFactory(protoViewFactoryResults);
-      return new Compiler(directiveResolver, new CompilerCache(), tplResolver, cmpUrlMapper,
-                          urlResolver, renderCompiler, protoViewFactory, new FakeAppRootUrl());
-    }
-
-    describe('serialize template', () => {
-
-      function captureTemplate(template: viewAnn.View): Promise<renderApi.ViewDefinition> {
-        tplResolver.setView(MainComponent, template);
-        var compiler =
-            createCompiler([createRenderProtoView()], [[rootProtoView], [createProtoView()]]);
-        return compiler.compileInHost(MainComponent)
-            .then((_) => {
-              expect(renderCompileRequests.length).toBe(1);
-              return renderCompileRequests[0];
-            });
-      }
-
-      function captureDirective(directive): Promise<renderApi.DirectiveMetadata> {
-        return captureTemplate(new viewAnn.View({template: '<div></div>', directives: [directive]}))
-            .then((renderTpl) => {
-              expect(renderTpl.directives.length).toBe(1);
-              return renderTpl.directives[0];
-            });
-      }
-
-      it('should fill the componentId', inject([AsyncTestCompleter], (async) => {
-           captureTemplate(new viewAnn.View({template: '<div></div>'}))
-               .then((renderTpl) => {
-                 expect(renderTpl.componentId).toEqual(stringify(MainComponent));
-                 async.done();
-               });
-         }));
-
-      it('should fill inline template', inject([AsyncTestCompleter], (async) => {
-           captureTemplate(new viewAnn.View({template: '<div></div>'}))
-               .then((renderTpl) => {
-                 expect(renderTpl.template).toEqual('<div></div>');
-                 async.done();
-               });
-         }));
-
-      it('should fill templateAbsUrl given inline templates',
-         inject([AsyncTestCompleter], (async) => {
-           cmpUrlMapper.setComponentUrl(MainComponent, '/cmp/main.js');
-           captureTemplate(new viewAnn.View({template: '<div></div>'}))
-               .then((renderTpl) => {
-                 expect(renderTpl.templateAbsUrl).toEqual('http://www.app.com/cmp/main.js');
-                 async.done();
-               });
-         }));
-
-      it('should not fill templateAbsUrl given no inline template or template url',
-         inject([AsyncTestCompleter], (async) => {
-           cmpUrlMapper.setComponentUrl(MainComponent, '/cmp/main.js');
-           captureTemplate(new viewAnn.View({template: null, templateUrl: null}))
-               .then((renderTpl) => {
-                 expect(renderTpl.templateAbsUrl).toBe(null);
-                 async.done();
-               });
-         }));
-
-      it('should fill templateAbsUrl given url template', inject([AsyncTestCompleter], (async) => {
-           cmpUrlMapper.setComponentUrl(MainComponent, '/cmp/main.js');
-           captureTemplate(new viewAnn.View({templateUrl: 'tpl/main.html'}))
-               .then((renderTpl) => {
-                 expect(renderTpl.templateAbsUrl).toEqual('http://www.app.com/cmp/tpl/main.html');
-                 async.done();
-               });
-         }));
-
-      it('should fill styleAbsUrls given styleUrls', inject([AsyncTestCompleter], (async) => {
-           cmpUrlMapper.setComponentUrl(MainComponent, '/cmp/main.js');
-           captureTemplate(new viewAnn.View({styleUrls: ['css/1.css', 'css/2.css']}))
-               .then((renderTpl) => {
-                 expect(renderTpl.styleAbsUrls)
-                     .toEqual(
-                         ['http://www.app.com/cmp/css/1.css', 'http://www.app.com/cmp/css/2.css']);
-                 async.done();
-               });
-         }));
-
-      it('should fill directive.id', inject([AsyncTestCompleter], (async) => {
-           captureDirective(MainComponent)
-               .then((renderDir) => {
-                 expect(renderDir.id).toEqual(stringify(MainComponent));
-                 async.done();
-               });
-         }));
-
-      it('should fill directive.selector', inject([AsyncTestCompleter], (async) => {
-           captureDirective(MainComponent)
-               .then((renderDir) => {
-                 expect(renderDir.selector).toEqual('main-comp');
-                 async.done();
-               });
-         }));
-
-      it('should fill directive.type for components', inject([AsyncTestCompleter], (async) => {
-           captureDirective(MainComponent)
-               .then((renderDir) => {
-                 expect(renderDir.type).toEqual(renderApi.DirectiveMetadata.COMPONENT_TYPE);
-                 async.done();
-               });
-         }));
-
-      it('should fill directive.type for dynamic components',
-         inject([AsyncTestCompleter], (async) => {
-           captureDirective(SomeDynamicComponentDirective)
-               .then((renderDir) => {
-                 expect(renderDir.type).toEqual(renderApi.DirectiveMetadata.COMPONENT_TYPE);
-                 async.done();
-               });
-         }));
-
-      it('should fill directive.type for decorator directives',
-         inject([AsyncTestCompleter], (async) => {
-           captureDirective(SomeDirective)
-               .then((renderDir) => {
-                 expect(renderDir.type).toEqual(renderApi.DirectiveMetadata.DIRECTIVE_TYPE);
-                 async.done();
-               });
-         }));
-
-      it('should set directive.compileChildren to false for other directives',
-         inject([AsyncTestCompleter], (async) => {
-           captureDirective(MainComponent)
-               .then((renderDir) => {
-                 expect(renderDir.compileChildren).toEqual(true);
-                 async.done();
-               });
-         }));
-
-      it('should set directive.compileChildren to true for decorator directives',
-         inject([AsyncTestCompleter], (async) => {
-           captureDirective(SomeDirective)
-               .then((renderDir) => {
-                 expect(renderDir.compileChildren).toEqual(true);
-                 async.done();
-               });
-         }));
-
-      it('should set directive.compileChildren to false for decorator directives',
-         inject([AsyncTestCompleter], (async) => {
-           captureDirective(IgnoreChildrenDirective)
-               .then((renderDir) => {
-                 expect(renderDir.compileChildren).toEqual(false);
-                 async.done();
-               });
-         }));
-
-      it('should set directive.hostListeners', inject([AsyncTestCompleter], (async) => {
-           captureDirective(DirectiveWithEvents)
-               .then((renderDir) => {
-                 expect(renderDir.hostListeners)
-                     .toEqual(MapWrapper.createFromStringMap({'someEvent': 'someAction'}));
-                 async.done();
-               });
-         }));
-
-      it('should set directive.hostProperties', inject([AsyncTestCompleter], (async) => {
-           captureDirective(DirectiveWithProperties)
-               .then((renderDir) => {
-                 expect(renderDir.hostProperties)
-                     .toEqual(MapWrapper.createFromStringMap({'someProp': 'someExp'}));
-                 async.done();
-               });
-         }));
-
-      it('should set directive.bind', inject([AsyncTestCompleter], (async) => {
-           captureDirective(DirectiveWithBind)
-               .then((renderDir) => {
-                 expect(renderDir.properties).toEqual(['a: b']);
-                 async.done();
-               });
-         }));
-
-      it('should read @Attribute', inject([AsyncTestCompleter], (async) => {
-           captureDirective(DirectiveWithAttributes)
-               .then((renderDir) => {
-                 expect(renderDir.readAttributes).toEqual(['someAttr']);
-                 async.done();
-               });
-         }));
-    });
-
-    describe('call ProtoViewFactory', () => {
-
-      it('should pass the ProtoViewDto', inject([AsyncTestCompleter], (async) => {
-           tplResolver.setView(MainComponent, new viewAnn.View({template: '<div></div>'}));
-           var renderProtoView = createRenderProtoView();
-           var expectedProtoView = createProtoView();
-           var compiler = createCompiler([renderProtoView], [[rootProtoView], [expectedProtoView]]);
-           compiler.compileInHost(MainComponent)
-               .then((_) => {
-                 var request = protoViewFactory.requests[1];
-                 expect(request[1]).toBe(renderProtoView);
-                 async.done();
-               });
-         }));
-
-      it('should pass the component binding', inject([AsyncTestCompleter], (async) => {
-           tplResolver.setView(MainComponent, new viewAnn.View({template: '<div></div>'}));
-           var compiler =
-               createCompiler([createRenderProtoView()], [[rootProtoView], [createProtoView()]]);
-           compiler.compileInHost(MainComponent)
-               .then((_) => {
-                 var request = protoViewFactory.requests[1];
-                 expect(request[0].key.token).toBe(MainComponent);
-                 async.done();
-               });
-         }));
-
-      it('should pass the directive bindings', inject([AsyncTestCompleter], (async) => {
-           tplResolver.setView(
-               MainComponent,
-               new viewAnn.View({template: '<div></div>', directives: [SomeDirective]}));
-           var compiler =
-               createCompiler([createRenderProtoView()], [[rootProtoView], [createProtoView()]]);
-           compiler.compileInHost(MainComponent)
-               .then((_) => {
-                 var request = protoViewFactory.requests[1];
-                 var binding = request[2][0];
-                 expect(binding.key.token).toBe(SomeDirective);
-                 async.done();
-               });
-         }));
-
-      it('should use the protoView of the ProtoViewFactory',
-         inject([AsyncTestCompleter], (async) => {
-           tplResolver.setView(MainComponent, new viewAnn.View({template: '<div></div>'}));
-           var compiler =
-               createCompiler([createRenderProtoView()], [[rootProtoView], [createProtoView()]]);
-           compiler.compileInHost(MainComponent)
-               .then((protoViewRef) => {
-                 expect(internalProtoView(protoViewRef)).toBe(rootProtoView);
-                 async.done();
-               });
-         }));
-
-    });
-
-    it('should load nested components', inject([AsyncTestCompleter], (async) => {
-         tplResolver.setView(MainComponent, new viewAnn.View({template: '<div></div>'}));
-         tplResolver.setView(NestedComponent, new viewAnn.View({template: '<div></div>'}));
-         var mainProtoView =
-             createProtoView([createComponentElementBinder(directiveResolver, NestedComponent)]);
-         var nestedProtoView = createProtoView();
-         var compiler = createCompiler(
-             [
-               createRenderProtoView([createRenderComponentElementBinder(0)]),
-               createRenderProtoView()
-             ],
-             [[rootProtoView], [mainProtoView], [nestedProtoView]]);
-         compiler.compileInHost(MainComponent)
-             .then((protoViewRef) => {
-               expect(internalProtoView(protoViewRef).elementBinders[0].nestedProtoView)
-                   .toBe(mainProtoView);
-               expect(mainProtoView.elementBinders[0].nestedProtoView).toBe(nestedProtoView);
-               async.done();
-             });
-       }));
-
-    it('should load nested components in viewcontainers', inject([AsyncTestCompleter], (async) => {
-         tplResolver.setView(MainComponent, new viewAnn.View({template: '<div></div>'}));
-         tplResolver.setView(NestedComponent, new viewAnn.View({template: '<div></div>'}));
-         var mainProtoView = createProtoView([createViewportElementBinder(null)]);
-         var viewportProtoView =
-             createProtoView([createComponentElementBinder(directiveResolver, NestedComponent)]);
-         var nestedProtoView = createProtoView();
-         var compiler = createCompiler(
-             [
-               createRenderProtoView([
-                 createRenderViewportElementBinder(createRenderProtoView(
-                     [createRenderComponentElementBinder(0)], renderApi.ViewType.EMBEDDED))
-               ]),
-               createRenderProtoView()
-             ],
-             [[rootProtoView], [mainProtoView, viewportProtoView], [nestedProtoView]]);
-         compiler.compileInHost(MainComponent)
-             .then((protoViewRef) => {
-               expect(internalProtoView(protoViewRef).elementBinders[0].nestedProtoView)
-                   .toBe(mainProtoView);
-               expect(viewportProtoView.elementBinders[0].nestedProtoView).toBe(nestedProtoView);
-
-               async.done();
-             });
-       }));
-
-    it('should cache compiled host components', inject([AsyncTestCompleter], (async) => {
-         tplResolver.setView(MainComponent, new viewAnn.View({template: '<div></div>'}));
-         var mainPv = createProtoView();
-         var compiler = createCompiler([createRenderProtoView()], [[rootProtoView], [mainPv]]);
-         compiler.compileInHost(MainComponent)
-             .then((protoViewRef) => {
-               expect(internalProtoView(protoViewRef).elementBinders[0].nestedProtoView)
-                   .toBe(mainPv);
-               return compiler.compileInHost(MainComponent);
-             })
-             .then((protoViewRef) => {
-               expect(internalProtoView(protoViewRef).elementBinders[0].nestedProtoView)
-                   .toBe(mainPv);
-               async.done();
-             });
-       }));
-
-    it('should not bind directives for cached components', inject([AsyncTestCompleter], (async) => {
-         // set up the cache with the test proto view
-         var mainPv: AppProtoView = createProtoView();
-         var cache: CompilerCache = new CompilerCache();
-         cache.setHost(MainComponent, mainPv);
-
-         // create the spy resolver
-         var reader: any = new SpyDirectiveResolver();
-
-         // create the compiler
-         var compiler = new Compiler(reader, cache, tplResolver, cmpUrlMapper, new UrlResolver(),
-                                     renderCompiler, protoViewFactory, new FakeAppRootUrl());
-         compiler.compileInHost(MainComponent)
-             .then((protoViewRef) => {
-               // the test should have failed if the resolver was called, so we're good
-               async.done();
-             });
-       }));
-
-
-    it('should cache compiled nested components', inject([AsyncTestCompleter], (async) => {
-         tplResolver.setView(MainComponent, new viewAnn.View({template: '<div></div>'}));
-         tplResolver.setView(MainComponent2, new viewAnn.View({template: '<div></div>'}));
-         tplResolver.setView(NestedComponent, new viewAnn.View({template: '<div></div>'}));
-         var rootProtoView2 = createRootProtoView(directiveResolver, MainComponent2);
-         var mainPv =
-             createProtoView([createComponentElementBinder(directiveResolver, NestedComponent)]);
-         var nestedPv = createProtoView([]);
-         var compiler = createCompiler(
-             [createRenderProtoView(), createRenderProtoView(), createRenderProtoView()],
-             [[rootProtoView], [mainPv], [nestedPv], [rootProtoView2], [mainPv]]);
-         compiler.compileInHost(MainComponent)
-             .then((protoViewRef) => {
-               expect(internalProtoView(protoViewRef)
-                          .elementBinders[0]
-                          .nestedProtoView.elementBinders[0]
-                          .nestedProtoView)
-                   .toBe(nestedPv);
-               return compiler.compileInHost(MainComponent2);
-             })
-             .then((protoViewRef) => {
-               expect(internalProtoView(protoViewRef)
-                          .elementBinders[0]
-                          .nestedProtoView.elementBinders[0]
-                          .nestedProtoView)
-                   .toBe(nestedPv);
-               async.done();
-             });
-       }));
-
-    it('should re-use components being compiled', inject([AsyncTestCompleter], (async) => {
-         tplResolver.setView(MainComponent, new viewAnn.View({template: '<div></div>'}));
-         var renderProtoViewCompleter = PromiseWrapper.completer();
-         var expectedProtoView = createProtoView();
-         var compiler = createCompiler([renderProtoViewCompleter.promise],
-                                       [[rootProtoView], [rootProtoView], [expectedProtoView]]);
-         var result = PromiseWrapper.all([
-           compiler.compileInHost(MainComponent),
-           compiler.compileInHost(MainComponent),
-           renderProtoViewCompleter.promise
-         ]);
-         renderProtoViewCompleter.resolve(createRenderProtoView());
-         result.then((protoViewRefs) => {
-           expect(internalProtoView(protoViewRefs[0]).elementBinders[0].nestedProtoView)
-               .toBe(expectedProtoView);
-           expect(internalProtoView(protoViewRefs[1]).elementBinders[0].nestedProtoView)
-               .toBe(expectedProtoView);
-           async.done();
-         });
-       }));
-
-    it('should allow recursive components', inject([AsyncTestCompleter], (async) => {
-         tplResolver.setView(MainComponent, new viewAnn.View({template: '<div></div>'}));
-         var mainProtoView =
-             createProtoView([createComponentElementBinder(directiveResolver, MainComponent)]);
-         var compiler =
-             createCompiler([createRenderProtoView([createRenderComponentElementBinder(0)])],
-                            [[rootProtoView], [mainProtoView]]);
-         compiler.compileInHost(MainComponent)
-             .then((protoViewRef) => {
-               expect(internalProtoView(protoViewRef).elementBinders[0].nestedProtoView)
-                   .toBe(mainProtoView);
-               expect(mainProtoView.elementBinders[0].nestedProtoView).toBe(mainProtoView);
-               async.done();
-             });
-       }));
-
-    it('should create host proto views', inject([AsyncTestCompleter], (async) => {
-         tplResolver.setView(MainComponent, new viewAnn.View({template: '<div></div>'}));
-         var rootProtoView =
-             createProtoView([createComponentElementBinder(directiveResolver, MainComponent)]);
-         var mainProtoView = createProtoView();
-         var compiler =
-             createCompiler([createRenderProtoView()], [[rootProtoView], [mainProtoView]]);
-         compiler.compileInHost(MainComponent)
-             .then((protoViewRef) => {
-               expect(internalProtoView(protoViewRef)).toBe(rootProtoView);
-               expect(rootProtoView.elementBinders[0].nestedProtoView).toBe(mainProtoView);
-               async.done();
-             });
-       }));
-
-    it('should throw for non component types', () => {
-      var compiler = createCompiler([], []);
-      expect(() => compiler.compileInHost(SomeDirective))
-          .toThrowError(
-              `Could not load '${stringify(SomeDirective)}' because it is not a component.`);
-    });
-  });
-}
-
-function createDirectiveBinding(directiveResolver, type): DirectiveBinding {
-  var annotation = directiveResolver.resolve(type);
-  return DirectiveBinding.createFromType(type, annotation);
-}
-
-function createProtoView(elementBinders = null): AppProtoView {
-  var pv = new AppProtoView(null, null, new Map(), null);
-  if (isBlank(elementBinders)) {
-    elementBinders = [];
-  }
-  pv.elementBinders = elementBinders;
-  return pv;
-}
-
-function createComponentElementBinder(directiveResolver, type): ElementBinder {
-  var binding = createDirectiveBinding(directiveResolver, type);
-  return new ElementBinder(0, null, 0, null, binding);
-}
-
-function createViewportElementBinder(nestedProtoView): ElementBinder {
-  var elBinder = new ElementBinder(0, null, 0, null, null);
-  elBinder.nestedProtoView = nestedProtoView;
-  return elBinder;
-}
-
-function createRenderProtoView(elementBinders = null,
-                               type: renderApi.ViewType = null): renderApi.ProtoViewDto {
-  if (isBlank(type)) {
-    type = renderApi.ViewType.COMPONENT;
-  }
-  if (isBlank(elementBinders)) {
-    elementBinders = [];
-  }
-  return new renderApi.ProtoViewDto({elementBinders: elementBinders, type: type});
-}
-
-function createRenderComponentElementBinder(directiveIndex): renderApi.ElementBinder {
-  return new renderApi.ElementBinder(
-      {directives: [new renderApi.DirectiveBinder({directiveIndex: directiveIndex})]});
-}
-
-function createRenderViewportElementBinder(nestedProtoView): renderApi.ElementBinder {
-  return new renderApi.ElementBinder({nestedProtoView: nestedProtoView});
-}
-
-function createRootProtoView(directiveResolver, type): AppProtoView {
-  return createProtoView([createComponentElementBinder(directiveResolver, type)]);
-}
-
-@Component({selector: 'main-comp'})
-class MainComponent {
-}
-
-@Component({selector: 'main-comp2'})
-class MainComponent2 {
-}
-
-@Component({selector: 'nested'})
-class NestedComponent {
-}
-
-class RecursiveComponent {}
-
-@Component({selector: 'some-dynamic'})
-class SomeDynamicComponentDirective {
-}
-
-@Directive({selector: 'some'})
-class SomeDirective {
-}
-
-@Directive({compileChildren: false})
-class IgnoreChildrenDirective {
-}
-
-@Directive({host: {'(someEvent)': 'someAction'}})
-class DirectiveWithEvents {
-}
-
-@Directive({host: {'[someProp]': 'someExp'}})
-class DirectiveWithProperties {
-}
-
-@Directive({properties: ['a: b']})
-class DirectiveWithBind {
-}
-
-@Directive({selector: 'directive-with-accts'})
-class DirectiveWithAttributes {
-  constructor(@Attribute('someAttr') someAttr: String) {}
-}
-
-@proxy
-@IMPLEMENTS(RenderCompiler)
-class SpyRenderCompiler extends SpyObject {
-  constructor() { super(RenderCompiler); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-@proxy
-@IMPLEMENTS(DirectiveResolver)
-class SpyDirectiveResolver extends SpyObject {
-  constructor() { super(DirectiveResolver); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-class FakeAppRootUrl extends AppRootUrl {
-  get value() { return 'http://www.app.com'; }
-}
-
-class FakeViewResolver extends ViewResolver {
-  _cmpViews: Map<Type, viewAnn.View> = new Map();
-
-  constructor() { super(); }
-
-  resolve(component: Type): viewAnn.View {
-    // returns null for dynamic components
-    return this._cmpViews.has(component) ? this._cmpViews.get(component) : null;
-  }
-
-  setView(component: Type, view: viewAnn.View): void { this._cmpViews.set(component, view); }
-}
-
-class FakeProtoViewFactory extends ProtoViewFactory {
-  requests: List<List<any>>;
-
-  constructor(public results: List<List<AppProtoView>>) {
-    super(null);
-    this.requests = [];
-  }
-
-  createAppProtoViews(componentBinding: DirectiveBinding, renderProtoView: renderApi.ProtoViewDto,
-                      directives: List<DirectiveBinding>): List<AppProtoView> {
-    this.requests.push([componentBinding, renderProtoView, directives]);
-    return ListWrapper.removeAt(this.results, 0);
-  }
-}
diff --git a/modules/angular2/test/core/compiler/component_url_mapper_spec.ts b/modules/angular2/test/core/compiler/component_url_mapper_spec.ts
deleted file mode 100644
index 47a32e53df8d..000000000000
--- a/modules/angular2/test/core/compiler/component_url_mapper_spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {describe, it, expect, beforeEach, ddescribe, iit, xit, el} from 'angular2/test_lib';
-
-import {
-  ComponentUrlMapper,
-  RuntimeComponentUrlMapper
-} from 'angular2/src/core/compiler/component_url_mapper';
-
-export function main() {
-  describe('RuntimeComponentUrlMapper', () => {
-    it('should return the registered URL', () => {
-      var url = 'http://path/to/component';
-      var mapper = new RuntimeComponentUrlMapper();
-      mapper.setComponentUrl(SomeComponent, url);
-      expect(mapper.getUrl(SomeComponent)).toEqual(url);
-    });
-
-    it('should fallback to ComponentUrlMapper', () => {
-      var mapper = new ComponentUrlMapper();
-      var runtimeMapper = new RuntimeComponentUrlMapper();
-      expect(runtimeMapper.getUrl(SomeComponent)).toEqual(mapper.getUrl(SomeComponent));
-    });
-  });
-}
-
-class SomeComponent {}
diff --git a/modules/angular2/test/core/compiler/directive_lifecycle_spec.dart b/modules/angular2/test/core/compiler/directive_lifecycle_spec.dart
deleted file mode 100644
index 29219250f715..000000000000
--- a/modules/angular2/test/core/compiler/directive_lifecycle_spec.dart
+++ /dev/null
@@ -1,130 +0,0 @@
-library angular2.test.core.compiler.directive_lifecycle_spec;
-
-import 'package:angular2/test_lib.dart';
-import 'package:angular2/angular2.dart';
-import 'package:angular2/src/core/compiler/element_injector.dart';
-
-main() {
-  describe('Create DirectiveMetadata', () {
-    describe('lifecycle', () {
-      metadata(type, annotation) =>
-          DirectiveBinding.createFromType(type, annotation).metadata;
-
-      describe("onChange", () {
-        it("should be true when the directive implements OnChange", () {
-          expect(metadata(
-                  DirectiveImplementingOnChange, new Directive()).callOnChange)
-              .toBe(true);
-        });
-
-        it("should be true when the lifecycle includes onChange", () {
-          expect(metadata(DirectiveNoHooks,
-              new Directive(lifecycle: [onChange])).callOnChange).toBe(true);
-        });
-
-        it("should be false otherwise", () {
-          expect(metadata(DirectiveNoHooks, new Directive()).callOnChange)
-              .toBe(false);
-        });
-
-        it("should be false when empty lifecycle", () {
-          expect(metadata(DirectiveImplementingOnChange,
-              new Directive(lifecycle: [])).callOnChange).toBe(false);
-        });
-      });
-
-      describe("onDestroy", () {
-        it("should be true when the directive implements OnDestroy", () {
-          expect(metadata(DirectiveImplementingOnDestroy,
-              new Directive()).callOnDestroy).toBe(true);
-        });
-
-        it("should be true when the lifecycle includes onDestroy", () {
-          expect(metadata(DirectiveNoHooks,
-              new Directive(lifecycle: [onDestroy])).callOnDestroy).toBe(true);
-        });
-
-        it("should be false otherwise", () {
-          expect(metadata(DirectiveNoHooks, new Directive()).callOnDestroy)
-              .toBe(false);
-        });
-      });
-
-      describe("onCheck", () {
-        it("should be true when the directive implements OnCheck", () {
-          expect(metadata(
-                  DirectiveImplementingOnCheck, new Directive()).callOnCheck)
-              .toBe(true);
-        });
-
-        it("should be true when the lifecycle includes onCheck", () {
-          expect(metadata(DirectiveNoHooks,
-              new Directive(lifecycle: [onCheck])).callOnCheck).toBe(true);
-        });
-
-        it("should be false otherwise", () {
-          expect(metadata(DirectiveNoHooks, new Directive()).callOnCheck)
-              .toBe(false);
-        });
-      });
-
-      describe("onInit", () {
-        it("should be true when the directive implements OnInit", () {
-          expect(metadata(
-                  DirectiveImplementingOnInit, new Directive()).callOnInit)
-              .toBe(true);
-        });
-
-        it("should be true when the lifecycle includes onInit", () {
-          expect(metadata(DirectiveNoHooks,
-              new Directive(lifecycle: [onInit])).callOnInit).toBe(true);
-        });
-
-        it("should be false otherwise", () {
-          expect(metadata(DirectiveNoHooks, new Directive()).callOnInit)
-              .toBe(false);
-        });
-      });
-
-      describe("onAllChangesDone", () {
-        it("should be true when the directive implements OnAllChangesDone", () {
-          expect(metadata(DirectiveImplementingOnAllChangesDone,
-              new Directive()).callOnAllChangesDone).toBe(true);
-        });
-
-        it("should be true when the lifecycle includes onAllChangesDone", () {
-          expect(metadata(DirectiveNoHooks, new Directive(
-              lifecycle: [onAllChangesDone])).callOnAllChangesDone).toBe(true);
-        });
-
-        it("should be false otherwise", () {
-          expect(metadata(
-                  DirectiveNoHooks, new Directive()).callOnAllChangesDone)
-              .toBe(false);
-        });
-      });
-    });
-  });
-}
-
-class DirectiveNoHooks {}
-
-class DirectiveImplementingOnChange implements OnChange {
-  onChange(_) {}
-}
-
-class DirectiveImplementingOnCheck implements OnCheck {
-  onCheck() {}
-}
-
-class DirectiveImplementingOnInit implements OnInit {
-  onInit() {}
-}
-
-class DirectiveImplementingOnDestroy implements OnDestroy {
-  onDestroy() {}
-}
-
-class DirectiveImplementingOnAllChangesDone implements OnAllChangesDone {
-  onAllChangesDone() {}
-}
diff --git a/modules/angular2/test/core/compiler/directive_lifecycle_spec.ts b/modules/angular2/test/core/compiler/directive_lifecycle_spec.ts
deleted file mode 100644
index 8e5bc5f73974..000000000000
--- a/modules/angular2/test/core/compiler/directive_lifecycle_spec.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  xdescribe,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  it,
-  SpyObject,
-  proxy
-} from 'angular2/test_lib';
-
-import {
-  Directive,
-  onChange,
-  onDestroy,
-  onCheck,
-  onInit,
-  onAllChangesDone
-} from 'angular2/src/core/annotations_impl/annotations';
-import {DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
-
-export function main() {
-  describe('Create DirectiveMetadata', () => {
-    describe('lifecycle', () => {
-      function metadata(type, annotation) {
-        return DirectiveBinding.createFromType(type, annotation).metadata;
-      }
-
-      describe("onChange", () => {
-        it("should be true when the directive has the onChange method", () => {
-          expect(metadata(DirectiveWithOnChangeMethod, new Directive({})).callOnChange).toBe(true);
-        });
-
-        it("should be true when the lifecycle includes onChange", () => {
-          expect(metadata(DirectiveNoHooks, new Directive({lifecycle: [onChange]})).callOnChange)
-              .toBe(true);
-        });
-
-        it("should be false otherwise",
-           () => { expect(metadata(DirectiveNoHooks, new Directive()).callOnChange).toBe(false); });
-
-        it("should be false when empty lifecycle", () => {
-          expect(metadata(DirectiveWithOnChangeMethod, new Directive({lifecycle: []})).callOnChange)
-              .toBe(false);
-        });
-      });
-
-      describe("onDestroy", () => {
-        it("should be true when the directive has the onDestroy method", () => {
-          expect(metadata(DirectiveWithOnDestroyMethod, new Directive({})).callOnDestroy)
-              .toBe(true);
-        });
-
-        it("should be true when the lifecycle includes onDestroy", () => {
-          expect(metadata(DirectiveNoHooks, new Directive({lifecycle: [onDestroy]})).callOnDestroy)
-              .toBe(true);
-        });
-
-        it("should be false otherwise", () => {
-          expect(metadata(DirectiveNoHooks, new Directive()).callOnDestroy).toBe(false);
-        });
-      });
-
-      describe("onInit", () => {
-        it("should be true when the directive has the onInit method", () => {
-          expect(metadata(DirectiveWithOnInitMethod, new Directive({})).callOnInit).toBe(true);
-        });
-
-        it("should be true when the lifecycle includes onDestroy", () => {
-          expect(metadata(DirectiveNoHooks, new Directive({lifecycle: [onInit]})).callOnInit)
-              .toBe(true);
-        });
-
-        it("should be false otherwise",
-           () => { expect(metadata(DirectiveNoHooks, new Directive()).callOnInit).toBe(false); });
-      });
-
-      describe("onCheck", () => {
-        it("should be true when the directive has the onCheck method", () => {
-          expect(metadata(DirectiveWithOnCheckMethod, new Directive({})).callOnCheck).toBe(true);
-        });
-
-        it("should be true when the lifecycle includes onCheck", () => {
-          expect(metadata(DirectiveNoHooks, new Directive({lifecycle: [onCheck]})).callOnCheck)
-              .toBe(true);
-        });
-
-        it("should be false otherwise",
-           () => { expect(metadata(DirectiveNoHooks, new Directive()).callOnCheck).toBe(false); });
-      });
-
-      describe("onAllChangesDone", () => {
-        it("should be true when the directive has the onAllChangesDone method", () => {
-          expect(
-              metadata(DirectiveWithOnAllChangesDoneMethod, new Directive({})).callOnAllChangesDone)
-              .toBe(true);
-        });
-
-        it("should be true when the lifecycle includes onAllChangesDone", () => {
-          expect(metadata(DirectiveNoHooks, new Directive({lifecycle: [onAllChangesDone]}))
-                     .callOnAllChangesDone)
-              .toBe(true);
-        });
-
-        it("should be false otherwise", () => {
-          expect(metadata(DirectiveNoHooks, new Directive()).callOnAllChangesDone).toBe(false);
-        });
-      });
-    });
-  });
-}
-
-class DirectiveNoHooks {}
-
-class DirectiveWithOnChangeMethod {
-  onChange(_) {}
-}
-
-class DirectiveWithOnInitMethod {
-  onInit() {}
-}
-
-class DirectiveWithOnCheckMethod {
-  onCheck() {}
-}
-
-class DirectiveWithOnDestroyMethod {
-  onDestroy(_) {}
-}
-
-class DirectiveWithOnAllChangesDoneMethod {
-  onAllChangesDone() {}
-}
\ No newline at end of file
diff --git a/modules/angular2/test/core/compiler/directive_metadata_reader_spec.ts b/modules/angular2/test/core/compiler/directive_metadata_reader_spec.ts
deleted file mode 100644
index 019174c3d6ee..000000000000
--- a/modules/angular2/test/core/compiler/directive_metadata_reader_spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {ddescribe, describe, it, iit, expect, beforeEach} from 'angular2/test_lib';
-import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
-import {Directive} from 'angular2/annotations';
-import * as dirAnn from 'angular2/src/core/annotations_impl/annotations';
-
-@Directive({selector: 'someDirective'})
-class SomeDirective {
-}
-
-class SomeDirectiveWithoutAnnotation {}
-
-export function main() {
-  describe("DirectiveResolver", () => {
-    var reader;
-
-    beforeEach(() => { reader = new DirectiveResolver(); });
-
-    it('should read out the Directive annotation', () => {
-      var directiveMetadata = reader.resolve(SomeDirective);
-      expect(directiveMetadata).toEqual(new dirAnn.Directive({selector: 'someDirective'}));
-    });
-
-    it('should throw if not matching annotation is found', () => {
-      expect(() => { reader.resolve(SomeDirectiveWithoutAnnotation); })
-          .toThrowError('No Directive annotation found on SomeDirectiveWithoutAnnotation');
-    });
-  });
-}
diff --git a/modules/angular2/test/core/compiler/dynamic_component_loader_spec.ts b/modules/angular2/test/core/compiler/dynamic_component_loader_spec.ts
deleted file mode 100644
index 038e717fbbc2..000000000000
--- a/modules/angular2/test/core/compiler/dynamic_component_loader_spec.ts
+++ /dev/null
@@ -1,318 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  beforeEachBindings,
-  it,
-  xit,
-  viewRootNodes,
-  TestComponentBuilder,
-  RootTestComponent,
-  inspectElement,
-  By
-} from 'angular2/test_lib';
-
-import {Injector} from 'angular2/di';
-import {NgIf} from 'angular2/directives';
-import {Component, View, onDestroy} from 'angular2/annotations';
-import * as viewAnn from 'angular2/src/core/annotations_impl/view';
-import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-import {DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-export function main() {
-  describe('DynamicComponentLoader', function() {
-    describe("loading into a location", () => {
-      it('should work',
-         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-                (loader, tcb: TestComponentBuilder, async) => {
-                  tcb.overrideView(
-                         MyComp,
-                         new viewAnn.View(
-                             {template: '<location #loc></location>', directives: [Location]}))
-                      .createAsync(MyComp)
-                      .then((tc) => {
-
-                        loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
-                            .then(ref => {
-                              expect(tc.nativeElement).toHaveText("Location;DynamicallyLoaded;");
-                              async.done();
-                            });
-                      });
-                }));
-
-      it('should return a disposable component ref',
-         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-                (loader, tcb: TestComponentBuilder, async) => {
-                  tcb.overrideView(
-                         MyComp,
-                         new viewAnn.View(
-                             {template: '<location #loc></location>', directives: [Location]}))
-                      .createAsync(MyComp)
-                      .then((tc) => {
-
-                        loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
-                            .then(ref => {
-                              ref.dispose();
-                              expect(tc.nativeElement).toHaveText("Location;");
-                              async.done();
-                            });
-                      });
-                }));
-
-      it('should allow to dispose even if the location has been removed',
-         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-                (loader, tcb: TestComponentBuilder, async) => {
-                  tcb.overrideView(MyComp, new viewAnn.View({
-                       template: '<child-cmp *ng-if="ctxBoolProp"></child-cmp>',
-                       directives: [NgIf, ChildComp]
-                     }))
-                      .overrideView(
-                          ChildComp,
-                          new viewAnn.View(
-                              {template: '<location #loc></location>', directives: [Location]}))
-                      .createAsync(MyComp)
-                      .then((tc) => {
-                        tc.componentInstance.ctxBoolProp = true;
-                        tc.detectChanges();
-                        var childCompEl = tc.query(By.css('child-cmp'));
-                        loader.loadIntoLocation(DynamicallyLoaded, childCompEl.elementRef, 'loc')
-                            .then(ref => {
-                              expect(tc.nativeElement).toHaveText("Location;DynamicallyLoaded;");
-
-                              tc.componentInstance.ctxBoolProp = false;
-                              tc.detectChanges();
-                              expect(tc.nativeElement).toHaveText("");
-
-                              ref.dispose();
-                              expect(tc.nativeElement).toHaveText("");
-                              async.done();
-                            });
-                      });
-                }));
-
-      it('should update host properties',
-         inject(
-             [DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-             (loader, tcb: TestComponentBuilder, async) => {
-               tcb.overrideView(
-                      MyComp, new viewAnn.View(
-                                  {template: '<location #loc></location>', directives: [Location]}))
-                   .createAsync(MyComp)
-                   .then((tc) => {
-                     loader.loadIntoLocation(DynamicallyLoadedWithHostProps, tc.elementRef, 'loc')
-                         .then(ref => {
-                           ref.instance.id = "new value";
-
-                           tc.detectChanges();
-
-                           var newlyInsertedElement = DOM.childNodes(tc.nativeElement)[1];
-                           expect((<HTMLElement>newlyInsertedElement).id).toEqual("new value");
-                           async.done();
-                         });
-                   });
-             }));
-
-      it('should throw if the variable does not exist',
-         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-                (loader, tcb: TestComponentBuilder, async) => {
-                  tcb.overrideView(
-                         MyComp,
-                         new viewAnn.View(
-                             {template: '<location #loc></location>', directives: [Location]}))
-                      .createAsync(MyComp)
-                      .then((tc) => {
-                        expect(() => loader.loadIntoLocation(DynamicallyLoadedWithHostProps,
-                                                             tc.elementRef, 'someUnknownVariable'))
-                            .toThrowError('Could not find variable someUnknownVariable');
-                        async.done();
-                      });
-                }));
-    });
-
-    describe("loading next to a location", () => {
-      it('should work', inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-                               (loader, tcb: TestComponentBuilder, async) => {
-                                 tcb.overrideView(MyComp, new viewAnn.View({
-                                      template: '<div><location #loc></location></div>',
-                                      directives: [Location]
-                                    }))
-                                     .createAsync(MyComp)
-                                     .then((tc) => {
-                                       loader.loadNextToLocation(DynamicallyLoaded, tc.elementRef)
-                                           .then(ref => {
-                                             expect(tc.nativeElement).toHaveText("Location;");
-                                             expect(DOM.nextSibling(tc.nativeElement))
-                                                 .toHaveText('DynamicallyLoaded;');
-
-                                             async.done();
-                                           });
-                                     });
-                               }));
-
-      it('should return a disposable component ref',
-         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-                (loader, tcb: TestComponentBuilder, async) => {
-                  tcb.overrideView(MyComp, new viewAnn.View({
-                       template: '<div><location #loc></location></div>',
-                       directives: [Location]
-                     }))
-                      .
-
-                      createAsync(MyComp)
-                      .then((tc) => {
-                        loader.loadNextToLocation(DynamicallyLoaded, tc.elementRef)
-                            .then(ref => {
-                              loader.loadNextToLocation(DynamicallyLoaded2, tc.elementRef)
-                                  .then(ref2 => {
-                                    var firstSibling = DOM.nextSibling(tc.nativeElement);
-                                    var secondSibling = DOM.nextSibling(firstSibling);
-                                    expect(tc.nativeElement).toHaveText("Location;");
-                                    expect(firstSibling).toHaveText("DynamicallyLoaded;");
-                                    expect(secondSibling).toHaveText("DynamicallyLoaded2;");
-
-                                    ref2.dispose();
-
-                                    firstSibling = DOM.nextSibling(tc.nativeElement);
-                                    secondSibling = DOM.nextSibling(firstSibling);
-                                    expect(secondSibling).toBeNull();
-
-                                    async.done();
-                                  });
-                            });
-                      });
-                }));
-
-      it('should update host properties',
-         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-                (loader, tcb: TestComponentBuilder, async) => {
-                  tcb.overrideView(MyComp, new viewAnn.View({
-                       template: '<div><location #loc></location></div>',
-                       directives: [Location]
-                     }))
-
-                      .createAsync(MyComp)
-                      .then((tc) => {
-
-                        loader.loadNextToLocation(DynamicallyLoadedWithHostProps, tc.elementRef)
-                            .then(ref => {
-                              ref.instance.id = "new value";
-
-                              tc.detectChanges();
-
-                              var newlyInsertedElement = DOM.nextSibling(tc.nativeElement);
-                              expect((<HTMLElement>newlyInsertedElement).id).toEqual("new value");
-
-                              async.done();
-                            });
-                      });
-                }));
-    });
-
-    describe('loadAsRoot', () => {
-      it('should allow to create, update and destroy components',
-         inject([AsyncTestCompleter, DynamicComponentLoader, DOCUMENT_TOKEN, Injector],
-                (async, loader, doc, injector) => {
-                  var rootEl = el('<child-cmp></child-cmp>');
-                  DOM.appendChild(doc.body, rootEl);
-                  loader.loadAsRoot(ChildComp, null, injector)
-                      .then((componentRef) => {
-                        var el = new RootTestComponent(componentRef);
-                        expect(rootEl.parentNode).toBe(doc.body);
-
-                        el.detectChanges();
-
-                        expect(rootEl).toHaveText('hello');
-
-                        componentRef.instance.ctxProp = 'new';
-
-                        el.detectChanges();
-
-                        expect(rootEl).toHaveText('new');
-
-                        componentRef.dispose();
-
-                        expect(rootEl).toHaveText('');
-                        expect(rootEl.parentNode).toBe(doc.body);
-
-                        async.done();
-                      });
-                }));
-
-    });
-
-  });
-}
-
-@Component({
-  selector: 'child-cmp',
-})
-@View({template: '{{ctxProp}}'})
-class ChildComp {
-  ctxProp: string;
-  constructor() { this.ctxProp = 'hello'; }
-}
-
-
-class DynamicallyCreatedComponentService {}
-
-@Component({
-  selector: 'hello-cmp',
-  viewInjector: [DynamicallyCreatedComponentService],
-  lifecycle: [onDestroy]
-})
-@View({template: "{{greeting}}"})
-class DynamicallyCreatedCmp {
-  greeting: string;
-  dynamicallyCreatedComponentService: DynamicallyCreatedComponentService;
-  destroyed: boolean = false;
-
-  constructor(a: DynamicallyCreatedComponentService) {
-    this.greeting = "hello";
-    this.dynamicallyCreatedComponentService = a;
-  }
-
-  onDestroy() { this.destroyed = true; }
-}
-
-@Component({selector: 'dummy'})
-@View({template: "DynamicallyLoaded;"})
-class DynamicallyLoaded {
-}
-
-@Component({selector: 'dummy'})
-@View({template: "DynamicallyLoaded2;"})
-class DynamicallyLoaded2 {
-}
-
-@Component({selector: 'dummy', host: {'[id]': 'id'}})
-@View({template: "DynamicallyLoadedWithHostProps;"})
-class DynamicallyLoadedWithHostProps {
-  id: string;
-
-  constructor() { this.id = "default"; }
-}
-
-@Component({selector: 'location'})
-@View({template: "Location;"})
-class Location {
-  elementRef: ElementRef;
-
-  constructor(elementRef: ElementRef) { this.elementRef = elementRef; }
-}
-
-@Component({selector: 'my-comp'})
-@View({directives: []})
-class MyComp {
-  ctxBoolProp: boolean;
-
-  constructor() { this.ctxBoolProp = false; }
-}
diff --git a/modules/angular2/test/core/compiler/element_injector_spec.ts b/modules/angular2/test/core/compiler/element_injector_spec.ts
deleted file mode 100644
index 27435b42e6aa..000000000000
--- a/modules/angular2/test/core/compiler/element_injector_spec.ts
+++ /dev/null
@@ -1,1143 +0,0 @@
-// TODO(tbosch): clang-format screws this up, see https://github.com/angular/clang-format/issues/11.
-// Enable clang-format here again when this is fixed.
-// clang-format off
-import {
-  describe,
-  ddescribe,
-  it,
-  iit,
-  xit,
-  xdescribe,
-  expect,
-  beforeEach,
-  SpyObject,
-  proxy,
-  inject,
-  AsyncTestCompleter,
-  el,
-  containsRegexp
-} from 'angular2/test_lib';
-import {isBlank, isPresent, IMPLEMENTS, stringify} from 'angular2/src/facade/lang';
-import {
-  ListWrapper,
-  MapWrapper,
-  List,
-  StringMapWrapper,
-  iterateListLike
-} from 'angular2/src/facade/collection';
-import {
-  ProtoElementInjector,
-  ElementInjector,
-  PreBuiltObjects,
-  DirectiveBinding,
-  TreeNode
-} from 'angular2/src/core/compiler/element_injector';
-import * as dirAnn from 'angular2/src/core/annotations_impl/annotations';
-import {
-  Attribute,
-  Query,
-  Component,
-  Directive,
-  onDestroy
-} from 'angular2/annotations';
-import {bind, Injector, Binding, resolveBindings, Optional, Inject, Injectable, Self, Parent, Ancestor, Unbounded, self} from 'angular2/di';
-import * as diAnn from 'angular2/src/di/annotations_impl';
-import {AppProtoView, AppView} from 'angular2/src/core/compiler/view';
-import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
-import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-import {DynamicChangeDetector, ChangeDetectorRef, Parser, Lexer} from 'angular2/change_detection';
-import {QueryList} from 'angular2/src/core/compiler/query_list';
-
-@proxy
-@IMPLEMENTS(AppView)
-class DummyView extends SpyObject {
-  componentChildViews;
-  changeDetector;
-  elementRefs;
-  constructor(elementCount = 0) {
-    super(AppView);
-    this.componentChildViews = [];
-    this.changeDetector = null;
-    this.elementRefs = ListWrapper.createFixedSize(elementCount);
-    for (var i=0; i<elementCount; i++) {
-      this.elementRefs[i] = new DummyElementRef();
-    }
-  }
-  noSuchMethod(m) { return super.noSuchMethod(m); }
-}
-
-@proxy
-@IMPLEMENTS(ElementRef)
-class DummyElementRef extends SpyObject {
-  constructor() { super(ElementRef); }
-  noSuchMethod(m) { return super.noSuchMethod(m); }
-}
-
-@Injectable(self)
-class SimpleDirective {}
-
-class SimpleService {}
-
-@Injectable(self)
-class SomeOtherDirective {}
-
-var _constructionCount = 0;
-@Injectable(self)
-class CountingDirective {
-  count;
-  constructor() {
-    this.count = _constructionCount;
-    _constructionCount += 1;
-  }
-}
-
-@Injectable(self)
-class FancyCountingDirective extends CountingDirective {
-  constructor() { super(); }
-}
-
-@Injectable()
-class NeedsDirective {
-  dependency: SimpleDirective;
-  constructor(dependency: SimpleDirective) { this.dependency = dependency; }
-}
-
-@Injectable()
-class OptionallyNeedsDirective {
-  dependency: SimpleDirective;
-  constructor(@Optional() dependency: SimpleDirective) { this.dependency = dependency; }
-}
-
-@Injectable()
-class NeedsDirectiveFromParent {
-  dependency: SimpleDirective;
-  constructor(@Parent() dependency: SimpleDirective) { this.dependency = dependency; }
-}
-
-@Injectable()
-class NeedsDirectiveFromParentOrSelf {
-  dependency: SimpleDirective;
-  constructor(@Parent({self: true}) dependency: SimpleDirective) { this.dependency = dependency; }
-}
-
-@Injectable()
-class NeedsDirectiveFromAncestor {
-  dependency: SimpleDirective;
-  constructor(@Ancestor() dependency: SimpleDirective) { this.dependency = dependency; }
-}
-
-@Injectable()
-class NeedsDirectiveFromAnAncestorShadowDom {
-  dependency: SimpleDirective;
-  constructor(@Unbounded() dependency: SimpleDirective) { this.dependency = dependency; }
-}
-
-@Injectable()
-class NeedsService {
-  service: any;
-  constructor(@Inject("service") service) { this.service = service; }
-}
-
-@Injectable()
-class NeedsAncestorService {
-  service: any;
-  constructor(@Ancestor() @Inject("service") service) { this.service = service; }
-}
-
-class HasEventEmitter {
-  emitter;
-  constructor() { this.emitter = "emitter"; }
-}
-
-class HasHostAction {
-  hostActionName;
-  constructor() { this.hostActionName = "hostAction"; }
-}
-
-class NeedsAttribute {
-  typeAttribute;
-  titleAttribute;
-  fooAttribute;
-  constructor(@Attribute('type') typeAttribute: String, @Attribute('title') titleAttribute: String,
-              @Attribute('foo') fooAttribute: String) {
-    this.typeAttribute = typeAttribute;
-    this.titleAttribute = titleAttribute;
-    this.fooAttribute = fooAttribute;
-  }
-}
-
-@Injectable()
-class NeedsAttributeNoType {
-  fooAttribute;
-  constructor(@Attribute('foo') fooAttribute) { this.fooAttribute = fooAttribute; }
-}
-
-@Injectable()
-class NeedsQuery {
-  query: QueryList<CountingDirective>;
-  constructor(@Query(CountingDirective) query: QueryList<CountingDirective>) { this.query = query; }
-}
-
-@Injectable()
-class NeedsQueryByVarBindings {
-  query: QueryList<any>;
-  constructor(@Query("one,two") query: QueryList<any>) { this.query = query; }
-}
-
-@Injectable()
-class NeedsElementRef {
-  elementRef;
-  constructor(ref: ElementRef) { this.elementRef = ref; }
-}
-
-@Injectable()
-class NeedsViewContainer {
-  viewContainer;
-  constructor(vc: ViewContainerRef) { this.viewContainer = vc; }
-}
-
-@Injectable()
-class NeedsProtoViewRef {
-  protoViewRef;
-  constructor(ref: ProtoViewRef) { this.protoViewRef = ref; }
-}
-
-@Injectable()
-class OptionallyInjectsProtoViewRef {
-  protoViewRef;
-  constructor(@Optional() ref: ProtoViewRef) { this.protoViewRef = ref; }
-}
-
-@Injectable()
-class NeedsChangeDetectorRef {
-  changeDetectorRef;
-  constructor(cdr: ChangeDetectorRef) { this.changeDetectorRef = cdr; }
-}
-
-class A_Needs_B {
-  constructor(dep) {}
-}
-
-class B_Needs_A {
-  constructor(dep) {}
-}
-
-class DirectiveWithDestroy {
-  onDestroyCounter: number;
-
-  constructor() { this.onDestroyCounter = 0; }
-
-  onDestroy() { this.onDestroyCounter++; }
-}
-
-class TestNode extends TreeNode<TestNode> {
-  message: string;
-  constructor(parent: TestNode, message) {
-    super(parent);
-    this.message = message;
-  }
-  toString() { return this.message; }
-}
-
-export function main() {
-  var defaultPreBuiltObjects = new PreBuiltObjects(null, <any>new DummyView(1), null);
-  
-  // An injector with more than 10 bindings will switch to the dynamic strategy
-  var dynamicBindings = [];
-
-  for (var i = 0; i < 20; i++) {
-    dynamicBindings.push(bind(i).toValue(i));
-  }
-
-  function createPei(parent, index, bindings, distance = 1, hasShadowRoot = false, dirVariableBindings = null) {
-    var directiveBinding = ListWrapper.map(bindings, b => {
-      if (b instanceof DirectiveBinding) return b;
-      if (b instanceof Binding) return DirectiveBinding.createFromBinding(b, null);
-      return DirectiveBinding.createFromType(b, null);
-    });
-    return ProtoElementInjector.create(parent, index, directiveBinding, hasShadowRoot, distance, dirVariableBindings);
-  }
-
-  function humanize(tree: TreeNode<any>, names: List<List<any>>) {
-    var lookupName = (item) =>
-        ListWrapper.last(ListWrapper.find(names, (pair) => pair[0] === item));
-
-    if (tree.children.length == 0) return lookupName(tree);
-    var children = tree.children.map(m => humanize(m, names));
-    return [lookupName(tree), children];
-  }
-
-  function injector(bindings, imperativelyCreatedInjector = null, isComponent: boolean = false,
-                    preBuiltObjects = null, attributes = null, dirVariableBindings = null) {
-    var proto = createPei(null, 0, bindings, 0, isComponent, dirVariableBindings);
-    proto.attributes = attributes;
-
-    var inj = proto.instantiate(null);
-    var preBuilt = isPresent(preBuiltObjects) ? preBuiltObjects : defaultPreBuiltObjects;
-    inj.hydrate(imperativelyCreatedInjector, null, preBuilt);
-    return inj;
-  }
-
-  function parentChildInjectors(parentBindings, childBindings, parentPreBuildObjects = null) {
-    if (isBlank(parentPreBuildObjects)) parentPreBuildObjects = defaultPreBuiltObjects;
-
-    var protoParent = createPei(null, 0, parentBindings);
-    var parent = protoParent.instantiate(null);
-
-    parent.hydrate(null, null, parentPreBuildObjects);
-
-    var protoChild = createPei(protoParent, 1, childBindings, 1, false);
-    var child = protoChild.instantiate(parent);
-    child.hydrate(null, null, defaultPreBuiltObjects);
-
-    return child;
-  }
-
-  function hostShadowInjectors(hostBindings: List<any>,
-                               shadowBindings: List<any>): ElementInjector {
-    var protoHost = createPei(null, 0, hostBindings, 0, true);
-    var host = protoHost.instantiate(null);
-    host.hydrate(null, null, defaultPreBuiltObjects);
-
-    var protoShadow = createPei(null, 0, shadowBindings, 0, false);
-    var shadow = protoShadow.instantiate(null);
-    shadow.hydrate(null, host, null);
-
-    return shadow;
-  }
-
-  describe('TreeNodes', () => {
-    var root, firstParent, lastParent, node;
-
-    /*
-     Build a tree of the following shape:
-     root
-      - p1
-         - c1
-         - c2
-      - p2
-        - c3
-     */
-    beforeEach(() => {
-      root = new TestNode(null, 'root');
-      var p1 = firstParent = new TestNode(root, 'p1');
-      var p2 = lastParent = new TestNode(root, 'p2');
-      node = new TestNode(p1, 'c1');
-      new TestNode(p1, 'c2');
-      new TestNode(p2, 'c3');
-    });
-
-    // depth-first pre-order.
-    function walk(node, f) {
-      if (isBlank(node)) return f;
-      f(node);
-      ListWrapper.forEach(node.children, (n) => walk(n, f));
-    }
-
-    function logWalk(node) {
-      var log = '';
-      walk(node, (n) => { log += (log.length != 0 ? ', ' : '') + n.toString(); });
-      return log;
-    }
-
-    it('should support listing children',
-       () => { expect(logWalk(root)).toEqual('root, p1, c1, c2, p2, c3'); });
-
-    it('should support removing the first child node', () => {
-      firstParent.remove();
-
-      expect(firstParent.parent).toEqual(null);
-      expect(logWalk(root)).toEqual('root, p2, c3');
-    });
-
-    it('should support removing the last child node', () => {
-      lastParent.remove();
-
-      expect(logWalk(root)).toEqual('root, p1, c1, c2');
-    });
-
-    it('should support moving a node at the end of children', () => {
-      node.remove();
-      root.addChild(node);
-
-      expect(logWalk(root)).toEqual('root, p1, c2, p2, c3, c1');
-    });
-
-    it('should support moving a node in the beginning of children', () => {
-      node.remove();
-      lastParent.addChildAfter(node, null);
-
-      expect(logWalk(root)).toEqual('root, p1, c2, p2, c1, c3');
-    });
-
-    it('should support moving a node in the middle of children', () => {
-      node.remove();
-      lastParent.addChildAfter(node, firstParent);
-
-      expect(logWalk(root)).toEqual('root, p1, c2, c1, p2, c3');
-    });
-  });
-
-  describe("ProtoElementInjector", () => {
-    describe("direct parent", () => {
-      it("should return parent proto injector when distance is 1", () => {
-        var distance = 1;
-        var protoParent = createPei(null, 0, []);
-        var protoChild = createPei(protoParent, 0, [], distance, false);
-
-        expect(protoChild.directParent()).toEqual(protoParent);
-      });
-
-      it("should return null otherwise", () => {
-        var distance = 2;
-        var protoParent = createPei(null, 0, []);
-        var protoChild = createPei(protoParent, 0, [], distance, false);
-
-        expect(protoChild.directParent()).toEqual(null);
-      });
-
-    });
-
-    describe('inline strategy', () => {
-      it("should allow for direct access using getBindingAtIndex", () => {
-        var proto = createPei(null, 0, [bind(SimpleDirective).toClass(SimpleDirective)]);
-
-        expect(proto.getBindingAtIndex(0)).toBeAnInstanceOf(DirectiveBinding);
-        expect(() => proto.getBindingAtIndex(-1)).toThrowError('Index -1 is out-of-bounds.');
-        expect(() => proto.getBindingAtIndex(10)).toThrowError('Index 10 is out-of-bounds.');
-      });
-    });
-
-    describe('dynamic strategy', () => {
-      it("should allow for direct access using getBindingAtIndex", () => {
-        var proto = createPei(null, 0, dynamicBindings);
-
-        expect(proto.getBindingAtIndex(0)).toBeAnInstanceOf(DirectiveBinding);
-        expect(() => proto.getBindingAtIndex(-1)).toThrowError('Index -1 is out-of-bounds.');
-        expect(() => proto.getBindingAtIndex(dynamicBindings.length - 1)).not.toThrow();
-        expect(() => proto.getBindingAtIndex(dynamicBindings.length))
-            .toThrowError(`Index ${dynamicBindings.length} is out-of-bounds.`);
-      });
-    });
-
-    describe('event emitters', () => {
-      it('should return a list of event accessors', () => {
-        var binding = DirectiveBinding.createFromType(HasEventEmitter,
-                                                      new dirAnn.Directive({events: ['emitter']}));
-
-        var inj = createPei(null, 0, [binding]);
-        expect(inj.eventEmitterAccessors.length).toEqual(1);
-
-        var accessor = inj.eventEmitterAccessors[0][0];
-        expect(accessor.eventName).toEqual('emitter');
-        expect(accessor.getter(new HasEventEmitter())).toEqual('emitter');
-      });
-
-      it('should allow a different event vs field name', () => {
-        var binding = DirectiveBinding.createFromType(HasEventEmitter,
-            new dirAnn.Directive({events: ['emitter: publicEmitter']}));
-
-        var inj = createPei(null, 0, [binding]);
-        expect(inj.eventEmitterAccessors.length).toEqual(1);
-
-        var accessor = inj.eventEmitterAccessors[0][0];
-        expect(accessor.eventName).toEqual('publicEmitter');
-        expect(accessor.getter(new HasEventEmitter())).toEqual('emitter');
-      });
-
-      it('should return a list of hostAction accessors', () => {
-        var binding = DirectiveBinding.createFromType(
-            HasEventEmitter, new dirAnn.Directive({host: {'@hostActionName': 'onAction'}}));
-
-        var inj = createPei(null, 0, [binding]);
-        expect(inj.hostActionAccessors.length).toEqual(1);
-
-        var accessor = inj.hostActionAccessors[0][0];
-        expect(accessor.methodName).toEqual('onAction');
-        expect(accessor.getter(new HasHostAction())).toEqual('hostAction');
-      });
-    });
-
-    describe(".create", () => {
-      it("should collect hostInjector injectables from all directives", () => {
-        var pei = createPei(null, 0, [
-          DirectiveBinding.createFromType(
-              SimpleDirective,
-              new dirAnn.Component({hostInjector: [bind('injectable1').toValue('injectable1')]})),
-          DirectiveBinding.createFromType(SomeOtherDirective, new dirAnn.Component({
-            hostInjector: [bind('injectable2').toValue('injectable2')]
-          }))
-        ]);
-
-        expect(pei.getBindingAtIndex(0).key.token).toBe(SimpleDirective);
-        expect(pei.getBindingAtIndex(1).key.token).toBe(SomeOtherDirective);
-        expect(pei.getBindingAtIndex(2).key.token).toEqual("injectable1");
-        expect(pei.getBindingAtIndex(3).key.token).toEqual("injectable2");
-      });
-
-      it("should collect viewInjector injectables from the component", () => {
-        var pei = createPei(null, 0,
-                            [DirectiveBinding.createFromType(SimpleDirective, new dirAnn.Component({
-                              viewInjector: [bind('injectable1').toValue('injectable1')]
-                            }))],
-                            0, true);
-
-        expect(pei.getBindingAtIndex(0).key.token).toBe(SimpleDirective);
-        expect(pei.getBindingAtIndex(1).key.token).toEqual("injectable1");
-      });
-
-      it('should support an arbitrary number of bindings', () => {
-        var pei = createPei(null, 0, dynamicBindings);
-
-        for (var i = 0; i < dynamicBindings.length; i++) {
-          expect(pei.getBindingAtIndex(i).key.token).toBe(i);
-        }
-      });
-    });
-  });
-
-  describe("ElementInjector", () => {
-    describe("instantiate", () => {
-      it("should create an element injector", () => {
-        var protoParent = createPei(null, 0, []);
-        var protoChild1 = createPei(protoParent, 1, []);
-        var protoChild2 = createPei(protoParent, 2, []);
-
-        var p = protoParent.instantiate(null);
-        var c1 = protoChild1.instantiate(p);
-        var c2 = protoChild2.instantiate(p);
-
-        expect(humanize(p, [[p, 'parent'], [c1, 'child1'], [c2, 'child2']]))
-            .toEqual(["parent", ["child1", "child2"]]);
-      });
-
-      describe("direct parent", () => {
-        it("should return parent injector when distance is 1", () => {
-          var distance = 1;
-          var protoParent = createPei(null, 0, []);
-          var protoChild = createPei(protoParent, 1, [], distance);
-
-          var p = protoParent.instantiate(null);
-          var c = protoChild.instantiate(p);
-
-          expect(c.directParent()).toEqual(p);
-        });
-
-        it("should return null otherwise", () => {
-          var distance = 2;
-          var protoParent = createPei(null, 0, []);
-          var protoChild = createPei(protoParent, 1, [], distance);
-
-          var p = protoParent.instantiate(null);
-          var c = protoChild.instantiate(p);
-
-          expect(c.directParent()).toEqual(null);
-        });
-      });
-    });
-
-    describe("hasBindings", () => {
-      it("should be true when there are bindings", () => {
-        var p = createPei(null, 0, [SimpleDirective]);
-        expect(p.hasBindings).toBeTruthy();
-      });
-
-      it("should be false otherwise", () => {
-        var p = createPei(null, 0, []);
-        expect(p.hasBindings).toBeFalsy();
-      });
-    });
-
-    describe("hasInstances", () => {
-      it("should be false when no directives are instantiated",
-         () => { expect(injector([]).hasInstances()).toBe(false); });
-
-      it("should be true when directives are instantiated",
-         () => { expect(injector([SimpleDirective]).hasInstances()).toBe(true); });
-    });
-
-    [{ strategy: 'inline', bindings: [] }, { strategy: 'dynamic',
-      bindings: dynamicBindings }].forEach((context) => {
-
-      var extraBindings = context['bindings'];
-      describe(`${context['strategy']} strategy`, () => {
-        
-        describe("hydrate", () => {
-          it("should instantiate directives that have no dependencies", () => {
-            var bindings = ListWrapper.concat([SimpleDirective], extraBindings);
-            var inj = injector(bindings);
-            expect(inj.get(SimpleDirective)).toBeAnInstanceOf(SimpleDirective);
-          });
-
-          it("should instantiate directives that depend on an arbitrary number of directives", () => {
-            var bindings = ListWrapper.concat([SimpleDirective, NeedsDirective], extraBindings);
-            var inj = injector(bindings);
-
-            var d = inj.get(NeedsDirective);
-
-            expect(d).toBeAnInstanceOf(NeedsDirective);
-            expect(d.dependency).toBeAnInstanceOf(SimpleDirective);
-          });
-
-          it("should instantiate hostInjector injectables that have dependencies with set visibility",
-             function() {
-               var childInj = parentChildInjectors(
-                   ListWrapper.concat(
-                       [DirectiveBinding.createFromType(SimpleDirective, new dirAnn.Component({
-                         hostInjector: [bind('injectable1').toValue('injectable1')]
-                       }))],
-                       extraBindings),
-                   [DirectiveBinding.createFromType(SimpleDirective, new dirAnn.Component({
-                     hostInjector: [
-                       bind('injectable1')
-                           .toValue('new-injectable1'),
-                       bind('injectable2')
-                           .toFactory(
-                               (val) => `${val}-injectable2`,
-                               [[new diAnn.Inject('injectable1'), new diAnn.Parent()]])
-                     ]
-                   }))]);
-               expect(childInj.get('injectable2')).toEqual('injectable1-injectable2');
-             });
-
-          it("should instantiate hostInjector injectables that have dependencies", () => {
-            var hostInjector = [
-                    bind('injectable1')
-                        .toValue('injectable1'),
-                    bind('injectable2')
-                        .toFactory(
-                            (val) => `${val}-injectable2`,
-                            ['injectable1'])
-                  ];
-            
-            var inj = injector(ListWrapper.concat(
-                [DirectiveBinding.createFromType(SimpleDirective, 
-                  new dirAnn.Directive({hostInjector: hostInjector}))],
-                extraBindings));
-                
-            expect(inj.get('injectable2')).toEqual('injectable1-injectable2');
-          });
-          
-          it("should instantiate viewInjector injectables that have dependencies", () => {
-            var viewInjector = [
-                    bind('injectable1')
-                        .toValue('injectable1'),
-                    bind('injectable2')
-                        .toFactory(
-                            (val) => `${val}-injectable2`,
-                            ['injectable1'])
-                  ];
-            
-            
-            var inj = injector(ListWrapper.concat(
-                [DirectiveBinding.createFromType(SimpleDirective, new dirAnn.Component({
-                  viewInjector: viewInjector}))], extraBindings), 
-                null, true);
-            expect(inj.get('injectable2')).toEqual('injectable1-injectable2');
-          });
-          
-          it("should instantiate components that depend on viewInjector bindings", () => {
-            var inj = injector(
-                ListWrapper.concat([DirectiveBinding.createFromType(NeedsService, new dirAnn.Component({
-                                     viewInjector: [bind('service').toValue('service')]
-                                   }))],
-                                   extraBindings),
-                null, true);
-            expect(inj.get(NeedsService).service).toEqual('service');
-          });
-
-            it("should not instantiate other directives that depend on viewInjector bindings",
-               () => {
-                 var directiveAnnotation = new dirAnn.Component({
-                   viewInjector: ListWrapper.concat([bind("service").toValue("service")], extraBindings)
-                 });
-                 var componentDirective =
-                     DirectiveBinding.createFromType(SimpleDirective, directiveAnnotation);
-                 expect(() => { injector([componentDirective, NeedsService], null); })
-                     .toThrowError(containsRegexp(
-                         `No provider for service! (${stringify(NeedsService) } -> service)`));
-               });
-               
-          it("should instantiate directives that depend on hostInjector bindings of other directives", () => {
-            var shadowInj = hostShadowInjectors(
-                ListWrapper.concat([DirectiveBinding.createFromType(SimpleDirective, new dirAnn.Component({
-                      hostInjector: [bind('service').toValue('hostService')]})
-                    )], extraBindings),
-                ListWrapper.concat([NeedsService], extraBindings)
-            );
-            expect(shadowInj.get(NeedsService).service).toEqual('hostService');
-          });
-          
-          it("should instantiate directives that depend on imperativley created injector bindings", () => {
-            var imperativelyCreatedInjector = Injector.resolveAndCreate([
-              bind("service").toValue('appService')
-            ]);
-            var inj = injector([NeedsService], imperativelyCreatedInjector);
-            expect(inj.get(NeedsService).service).toEqual('appService');
-          });
-
-          it("should prioritize viewInjector over hostInjector for the same binding", () => {
-            var inj = injector(
-                ListWrapper.concat([DirectiveBinding.createFromType(NeedsService, new dirAnn.Component({
-                      hostInjector: [bind('service').toValue('hostService')],
-                      viewInjector: [bind('service').toValue('viewService')]})
-                    )], extraBindings), null, true);
-            expect(inj.get(NeedsService).service).toEqual('viewService');
-          });
-
-          it("should not instantiate a directive in a view that has an ancestor dependency on hostInjector"+
-            " bindings of a decorator directive", () => {
-            expect(() => {
-              hostShadowInjectors(
-                ListWrapper.concat([
-                  SimpleDirective,
-                  DirectiveBinding.createFromType(SomeOtherDirective, new dirAnn.Directive({
-                      hostInjector: [bind('service').toValue('hostService')]})
-                  )], extraBindings),
-
-                ListWrapper.concat([NeedsAncestorService], extraBindings)
-              );
-            }).toThrowError(new RegExp("No provider for service!"));
-          });
-
-          it("should instantiate directives that depend on pre built objects", () => {
-            var protoView = new AppProtoView(null, null, null, null);
-            var bindings = ListWrapper.concat([NeedsProtoViewRef], extraBindings);
-            var inj = injector(bindings, null, false, new PreBuiltObjects(null, null, protoView));
-
-            expect(inj.get(NeedsProtoViewRef).protoViewRef).toEqual(new ProtoViewRef(protoView));
-          });
-
-          it("should get directives from parent", () => {
-            var child = parentChildInjectors(ListWrapper.concat([SimpleDirective], extraBindings),
-                                             [NeedsDirectiveFromParent]);
-
-            var d = child.get(NeedsDirectiveFromParent);
-
-            expect(d).toBeAnInstanceOf(NeedsDirectiveFromParent);
-            expect(d.dependency).toBeAnInstanceOf(SimpleDirective);
-          });
-
-          it("should not return parent's directives on self by default", () => {
-            expect(() => {
-              injector(ListWrapper.concat([SimpleDirective, NeedsDirectiveFromParent], extraBindings));
-            }).toThrowError(containsRegexp(`No provider for ${stringify(SimpleDirective) }`));
-          });
-
-          it("should return parent's directives on self when explicitly specified", () => {
-            var inj = injector(ListWrapper.concat([SimpleDirective, NeedsDirectiveFromParentOrSelf], extraBindings));
-
-            var d = inj.get(NeedsDirectiveFromParentOrSelf);
-
-            expect(d).toBeAnInstanceOf(NeedsDirectiveFromParentOrSelf);
-            expect(d.dependency).toBeAnInstanceOf(SimpleDirective);
-          });
-
-          it("should get directives from ancestor", () => {
-            var child = parentChildInjectors(ListWrapper.concat([SimpleDirective], extraBindings),
-                                             [NeedsDirectiveFromAncestor]);
-
-            var d = child.get(NeedsDirectiveFromAncestor);
-
-            expect(d).toBeAnInstanceOf(NeedsDirectiveFromAncestor);
-            expect(d.dependency).toBeAnInstanceOf(SimpleDirective);
-          });
-
-          it("should get directives crossing the boundaries", () => {
-            var child = hostShadowInjectors(
-                ListWrapper.concat([SomeOtherDirective, SimpleDirective], extraBindings),
-                [NeedsDirectiveFromAnAncestorShadowDom]);
-
-            var d = child.get(NeedsDirectiveFromAnAncestorShadowDom);
-
-            expect(d).toBeAnInstanceOf(NeedsDirectiveFromAnAncestorShadowDom);
-            expect(d.dependency).toBeAnInstanceOf(SimpleDirective);
-          });
-
-          it("should throw when a dependency cannot be resolved", () => {
-            expect(() => injector(ListWrapper.concat([NeedsDirectiveFromParent], extraBindings)))
-                .toThrowError(containsRegexp(
-                    `No provider for ${stringify(SimpleDirective) }! (${stringify(NeedsDirectiveFromParent) } -> ${stringify(SimpleDirective) })`));
-          });
-
-          it("should inject null when an optional dependency cannot be resolved", () => {
-            var inj = injector(ListWrapper.concat([OptionallyNeedsDirective], extraBindings));
-            var d = inj.get(OptionallyNeedsDirective);
-            expect(d.dependency).toEqual(null);
-          });
-
-          it("should accept bindings instead of types", () => {
-            var inj = injector(
-                ListWrapper.concat([bind(SimpleDirective).toClass(SimpleDirective)], extraBindings));
-            expect(inj.get(SimpleDirective)).toBeAnInstanceOf(SimpleDirective);
-          });
-
-          it("should allow for direct access using getDirectiveAtIndex", () => {
-            var bindings =
-                ListWrapper.concat([bind(SimpleDirective).toClass(SimpleDirective)], extraBindings);
-
-            var inj = injector(bindings);
-
-            var firsIndexOut = bindings.length > 10 ? bindings.length : 10;
-
-            expect(inj.getDirectiveAtIndex(0)).toBeAnInstanceOf(SimpleDirective);
-            expect(() => inj.getDirectiveAtIndex(-1)).toThrowError('Index -1 is out-of-bounds.');
-            expect(() => inj.getDirectiveAtIndex(firsIndexOut))
-                .toThrowError(`Index ${firsIndexOut} is out-of-bounds.`);
-          });
-
-            it("should instantiate directives that depend on the containing component", () => {
-              var directiveBinding =
-                  DirectiveBinding.createFromType(SimpleDirective, new dirAnn.Component());
-              var shadow = hostShadowInjectors(ListWrapper.concat([directiveBinding], extraBindings),
-                                               [NeedsDirective]);
-
-              var d = shadow.get(NeedsDirective);
-              expect(d).toBeAnInstanceOf(NeedsDirective);
-              expect(d.dependency).toBeAnInstanceOf(SimpleDirective);
-            });
-
-            it("should not instantiate directives that depend on other directives in the containing component's ElementInjector",
-               () => {
-                 var directiveBinding =
-                     DirectiveBinding.createFromType(SomeOtherDirective, new dirAnn.Component());
-                 expect(() =>
-                        {
-                          hostShadowInjectors(
-                              ListWrapper.concat([directiveBinding, SimpleDirective], extraBindings),
-                              [NeedsDirective]);
-                        })
-                     .toThrowError(containsRegexp(
-                         `No provider for ${stringify(SimpleDirective) }! (${stringify(NeedsDirective) } -> ${stringify(SimpleDirective) })`));
-               });
-        });
-
-        describe("lifecycle", () => {
-          it("should call onDestroy on directives subscribed to this event", () => {
-            var inj = injector(ListWrapper.concat(
-                [DirectiveBinding.createFromType(DirectiveWithDestroy,
-                                                 new dirAnn.Directive({lifecycle: [onDestroy]}))],
-                extraBindings));
-            var destroy = inj.get(DirectiveWithDestroy);
-            inj.dehydrate();
-            expect(destroy.onDestroyCounter).toBe(1);
-          });
-
-          it("should work with services", () => {
-            var inj = injector(ListWrapper.concat(
-                [DirectiveBinding.createFromType(
-                    SimpleDirective, new dirAnn.Directive({hostInjector: [SimpleService]}))],
-                extraBindings));
-            inj.dehydrate();
-          });
-
-          it("should notify queries", inject([AsyncTestCompleter], (async) => {
-            var inj = injector(ListWrapper.concat([NeedsQuery], extraBindings));
-            var query = inj.get(NeedsQuery).query;
-            query.add(new CountingDirective()); // this marks the query as dirty
-
-            query.onChange(() => async.done());
-
-            inj.onAllChangesDone();
-          }));
-
-          it("should not notify inherited queries", inject([AsyncTestCompleter], (async) => {
-            var child = parentChildInjectors(ListWrapper.concat([NeedsQuery], extraBindings), []);
-
-            var query = child.parent.get(NeedsQuery).query;
-
-            var calledOnChange = false;
-            query.onChange(() => {
-              // make sure the callback is called only once
-              expect(calledOnChange).toEqual(false);
-              expect(query.length).toEqual(2);
-
-              calledOnChange = true;
-              async.done()
-            });
-
-            query.add(new CountingDirective());
-            child.onAllChangesDone(); // this does not notify the query
-
-            query.add(new CountingDirective());
-            child.parent.onAllChangesDone();
-          }));
-        });
-
-        describe('static attributes', () => {
-          it('should be injectable', () => {
-            var attributes = new Map();
-            attributes.set( 'type', 'text');
-            attributes.set( 'title', '');
-
-            var inj = injector(ListWrapper.concat([NeedsAttribute], extraBindings), null, false, null,
-                               attributes);
-            var needsAttribute = inj.get(NeedsAttribute);
-
-            expect(needsAttribute.typeAttribute).toEqual('text');
-            expect(needsAttribute.titleAttribute).toEqual('');
-            expect(needsAttribute.fooAttribute).toEqual(null);
-          });
-
-          it('should be injectable without type annotation', () => {
-            var attributes = new Map();
-            attributes.set( 'foo', 'bar');
-
-            var inj = injector(ListWrapper.concat([NeedsAttributeNoType], extraBindings), null, false,
-                               null, attributes);
-            var needsAttribute = inj.get(NeedsAttributeNoType);
-
-            expect(needsAttribute.fooAttribute).toEqual('bar');
-          });
-        });
-
-        describe("refs", () => {
-          it("should inject ElementRef", () => {
-            var inj = injector(ListWrapper.concat([NeedsElementRef], extraBindings));
-            expect(inj.get(NeedsElementRef).elementRef).toBe(defaultPreBuiltObjects.view.elementRefs[0]);
-          });
-
-          it('should inject ChangeDetectorRef', () => {
-            var cd = new DynamicChangeDetector(null, null, null, null, [], []);
-            var view = <any>new DummyView();
-            var childView = new DummyView();
-            childView.changeDetector = cd;
-            view.componentChildViews = [childView];
-            var inj = injector(ListWrapper.concat([NeedsChangeDetectorRef], extraBindings), null, false,
-                               new PreBuiltObjects(null, view, null));
-
-            expect(inj.get(NeedsChangeDetectorRef).changeDetectorRef).toBe(cd.ref);
-          });
-
-          it('should inject ViewContainerRef', () => {
-            var inj = injector(ListWrapper.concat([NeedsViewContainer], extraBindings));
-            expect(inj.get(NeedsViewContainer).viewContainer).toBeAnInstanceOf(ViewContainerRef);
-          });
-
-          it("should inject ProtoViewRef", () => {
-            var protoView = new AppProtoView(null, null, null, null);
-            var inj = injector(ListWrapper.concat([NeedsProtoViewRef], extraBindings), null, false,
-                               new PreBuiltObjects(null, null, protoView));
-
-            expect(inj.get(NeedsProtoViewRef).protoViewRef).toEqual(new ProtoViewRef(protoView));
-          });
-
-          it("should throw if there is no ProtoViewRef", () => {
-            expect(() => injector(ListWrapper.concat([NeedsProtoViewRef], extraBindings)))
-                .toThrowError(
-                    `No provider for ProtoViewRef! (${stringify(NeedsProtoViewRef) } -> ProtoViewRef)`);
-          });
-
-          it('should inject null if there is no ProtoViewRef when the dependency is optional', () => {
-            var inj = injector(ListWrapper.concat([OptionallyInjectsProtoViewRef], extraBindings));
-            var instance = inj.get(OptionallyInjectsProtoViewRef);
-            expect(instance.protoViewRef).toBeNull();
-          });
-        });
-
-        describe('queries', () => {
-          var preBuildObjects = defaultPreBuiltObjects;
-          beforeEach(() => { _constructionCount = 0; });
-
-          function expectDirectives(query, type, expectedIndex) {
-            var currentCount = 0;
-            iterateListLike(query, (i) => {
-              expect(i).toBeAnInstanceOf(type);
-              expect(i.count).toBe(expectedIndex[currentCount]);
-              currentCount += 1;
-            });
-          }
-
-          it('should be injectable', () => {
-            var inj =
-                injector(ListWrapper.concat([NeedsQuery], extraBindings), null, false, preBuildObjects);
-            expect(inj.get(NeedsQuery).query).toBeAnInstanceOf(QueryList);
-          });
-
-          it('should contain directives on the same injector', () => {
-            var inj = injector(ListWrapper.concat([
-                NeedsQuery,
-                CountingDirective
-              ], extraBindings), null,
-              false, preBuildObjects);
-
-            expectDirectives(inj.get(NeedsQuery).query, CountingDirective, [0]);
-          })
-
-          it('should contain multiple directives from the same injector', () => {
-            var inj = injector(ListWrapper.concat([
-                NeedsQuery,
-                CountingDirective,
-                FancyCountingDirective,
-                bind(CountingDirective).toAlias(FancyCountingDirective)
-              ], extraBindings), null,
-              false, preBuildObjects);
-
-            expect(inj.get(NeedsQuery).query.length).toEqual(2);
-            expect(inj.get(NeedsQuery).query.first).toBeAnInstanceOf(CountingDirective);
-            expect(inj.get(NeedsQuery).query.last).toBeAnInstanceOf(FancyCountingDirective);
-          })
-
-          it('should contain multiple directives from the same injector after linking', () => {
-            var inj = parentChildInjectors([], ListWrapper.concat([
-                NeedsQuery,
-                CountingDirective,
-                FancyCountingDirective,
-                bind(CountingDirective).toAlias(FancyCountingDirective)
-              ], extraBindings));
-
-            var parent = inj.parent;
-
-            inj.unlink();
-            inj.link(parent);
-
-            expect(inj.get(NeedsQuery).query.length).toEqual(2);
-            expect(inj.get(NeedsQuery).query.first).toBeAnInstanceOf(CountingDirective);
-            expect(inj.get(NeedsQuery).query.last).toBeAnInstanceOf(FancyCountingDirective);
-          })
-
-          it('should contain the element when no directives are bound to the var binding', () => {
-            var dirs = [NeedsQueryByVarBindings];
-
-            var dirVariableBindings = MapWrapper.createFromStringMap({
-              "one": null // element
-            });
-
-            var inj = injector(ListWrapper.concat(dirs, extraBindings), null,
-                               false, preBuildObjects, null, dirVariableBindings);
-
-            expect(inj.get(NeedsQueryByVarBindings).query.first).toBe(defaultPreBuiltObjects.view.elementRefs[0]);
-          });
-
-          it('should contain directives on the same injector when querying by variable bindings' +
-            'in the order of var bindings specified in the query', () => {
-            var dirs = [NeedsQueryByVarBindings, NeedsDirective, SimpleDirective];
-
-            var dirVariableBindings = MapWrapper.createFromStringMap({
-              "one": 2, // 2 is the index of SimpleDirective
-              "two": 1 // 1 is the index of NeedsDirective
-            });
-
-            var inj = injector(ListWrapper.concat(dirs, extraBindings), null,
-                               false, preBuildObjects, null, dirVariableBindings);
-
-            // NeedsQueryByVarBindings queries "one,two", so SimpleDirective should be before NeedsDirective
-            expect(inj.get(NeedsQueryByVarBindings).query.first).toBeAnInstanceOf(SimpleDirective);
-            expect(inj.get(NeedsQueryByVarBindings).query.last).toBeAnInstanceOf(NeedsDirective);
-          });
-
-          // Dart's restriction on static types in (a is A) makes this feature hard to implement.
-          // Current proposal is to add second parameter the Query constructor to take a
-          // comparison function to support user-defined definition of matching.
-
-          //it('should support super class directives', () => {
-          //  var inj = injector([NeedsQuery, FancyCountingDirective], null, null, preBuildObjects);
-          //
-          //  expectDirectives(inj.get(NeedsQuery).query, FancyCountingDirective, [0]);
-          //});
-
-          it('should contain directives on the same and a child injector in construction order', () => {
-            var protoParent = createPei(null, 0, [NeedsQuery, CountingDirective]);
-            var protoChild =
-                createPei(protoParent, 1, ListWrapper.concat([CountingDirective], extraBindings));
-
-            var parent = protoParent.instantiate(null);
-            var child = protoChild.instantiate(parent);
-            parent.hydrate(null, null, preBuildObjects);
-            child.hydrate(null, null, preBuildObjects);
-
-            expectDirectives(parent.get(NeedsQuery).query, CountingDirective, [0, 1]);
-          });
-
-          it('should reflect unlinking an injector', () => {
-            var protoParent = createPei(null, 0, [NeedsQuery, CountingDirective]);
-            var protoChild =
-                createPei(protoParent, 1, ListWrapper.concat([CountingDirective], extraBindings));
-
-            var parent = protoParent.instantiate(null);
-            var child = protoChild.instantiate(parent);
-            parent.hydrate(null, null, preBuildObjects);
-            child.hydrate(null, null, preBuildObjects);
-
-            child.unlink();
-
-            expectDirectives(parent.get(NeedsQuery).query, CountingDirective, [0]);
-          });
-
-          it('should reflect moving an injector as a last child', () => {
-            var protoParent = createPei(null, 0, [NeedsQuery, CountingDirective]);
-            var protoChild1 = createPei(protoParent, 1, [CountingDirective]);
-            var protoChild2 =
-                createPei(protoParent, 1, ListWrapper.concat([CountingDirective], extraBindings));
-
-            var parent = protoParent.instantiate(null);
-            var child1 = protoChild1.instantiate(parent);
-            var child2 = protoChild2.instantiate(parent);
-
-            parent.hydrate(null, null, preBuildObjects);
-            child1.hydrate(null,  null, preBuildObjects);
-            child2.hydrate(null, null, preBuildObjects);
-
-            child1.unlink();
-            child1.link(parent);
-
-            var queryList = parent.get(NeedsQuery).query;
-            expectDirectives(queryList, CountingDirective, [0, 2, 1]);
-          });
-
-          it('should reflect moving an injector as a first child', () => {
-            var protoParent = createPei(null, 0, [NeedsQuery, CountingDirective]);
-            var protoChild1 = createPei(protoParent, 1, [CountingDirective]);
-            var protoChild2 =
-                createPei(protoParent, 1, ListWrapper.concat([CountingDirective], extraBindings));
-
-            var parent = protoParent.instantiate(null);
-            var child1 = protoChild1.instantiate(parent);
-            var child2 = protoChild2.instantiate(parent);
-
-            parent.hydrate(null, null, preBuildObjects);
-            child1.hydrate(null, null, preBuildObjects);
-            child2.hydrate(null, null, preBuildObjects);
-
-            child2.unlink();
-            child2.linkAfter(parent, null);
-
-            var queryList = parent.get(NeedsQuery).query;
-            expectDirectives(queryList, CountingDirective, [0, 2, 1]);
-          });
-
-          it('should support two concurrent queries for the same directive', () => {
-            var protoGrandParent = createPei(null, 0, [NeedsQuery]);
-            var protoParent = createPei(null, 0, [NeedsQuery]);
-            var protoChild =
-                createPei(protoParent, 1, ListWrapper.concat([CountingDirective], extraBindings));
-
-            var grandParent = protoGrandParent.instantiate(null);
-            var parent = protoParent.instantiate(grandParent);
-            var child = protoChild.instantiate(parent);
-
-            grandParent.hydrate(null,  null, preBuildObjects);
-            parent.hydrate(null, null, preBuildObjects);
-            child.hydrate(null, null, preBuildObjects);
-
-            var queryList1 = grandParent.get(NeedsQuery).query;
-            var queryList2 = parent.get(NeedsQuery).query;
-
-            expectDirectives(queryList1, CountingDirective, [0]);
-            expectDirectives(queryList2, CountingDirective, [0]);
-
-            child.unlink();
-            expectDirectives(queryList1, CountingDirective, []);
-            expectDirectives(queryList2, CountingDirective, []);
-          });
-        });
-      });
-    });
-  });
-}
-
-class ContextWithHandler {
-  handler;
-  constructor(handler) { this.handler = handler; }
-}
diff --git a/modules/angular2/test/core/compiler/integration_dart_spec.dart b/modules/angular2/test/core/compiler/integration_dart_spec.dart
deleted file mode 100644
index 068a9186eb64..000000000000
--- a/modules/angular2/test/core/compiler/integration_dart_spec.dart
+++ /dev/null
@@ -1,208 +0,0 @@
-/// This file contains tests that make sense only in Dart
-library angular2.test.di.integration_dart_spec;
-
-import 'package:angular2/angular2.dart';
-import 'package:angular2/di.dart';
-import 'package:angular2/test_lib.dart';
-
-class MockException implements Error {
-  var message;
-  var stackTrace;
-}
-class NonError {
-  var message;
-}
-
-void functionThatThrows() {
-  try {
-    throw new MockException();
-  } catch (e, stack) {
-    // If we lose the stack trace the message will no longer match
-    // the first line in the stack
-    e.message = stack.toString().split('\n')[0];
-    e.stackTrace = stack;
-    rethrow;
-  }
-}
-
-void functionThatThrowsNonError() {
-  try {
-    throw new NonError();
-  } catch (e, stack) {
-    // If we lose the stack trace the message will no longer match
-    // the first line in the stack
-    e.message = stack.toString().split('\n')[0];
-    rethrow;
-  }
-}
-
-main() {
-  describe('TypeLiteral', () {
-    it('should publish via viewInjector', inject([
-      TestComponentBuilder,
-      AsyncTestCompleter
-    ], (tb, async) {
-      tb.overrideView(Dummy, new View(
-          template: '<type-literal-component></type-literal-component>',
-          directives: [TypeLiteralComponent]))
-
-      .createAsync(Dummy).then((tc) {
-        tc.detectChanges();
-        expect(asNativeElements(tc.componentViewChildren)).toHaveText('[Hello, World]');
-        async.done();
-      });
-    }));
-  });
-
-  describe('Error handling', () {
-    it('should preserve Error stack traces thrown from components', inject([
-      TestComponentBuilder,
-      AsyncTestCompleter
-    ], (tb, async) {
-      tb.overrideView(Dummy, new View(
-          template: '<throwing-component></throwing-component>',
-          directives: [ThrowingComponent]))
-
-      .createAsync(Dummy).catchError((e, stack) {
-        expect(e.message).toContain("MockException");
-        expect(e.message).toContain("functionThatThrows");
-        async.done();
-      });
-    }));
-
-    it('should preserve non-Error stack traces thrown from components', inject([
-      TestComponentBuilder,
-      AsyncTestCompleter
-    ], (tb, async) {
-      tb.overrideView(Dummy, new View(
-          template: '<throwing-component2></throwing-component2>',
-          directives: [ThrowingComponent2]))
-
-      .createAsync(Dummy).catchError((e, stack) {
-        expect(e.message).toContain("NonError");
-        expect(e.message).toContain("functionThatThrows");
-        async.done();
-      });
-    }));
-  });
-
-  describe('Property access', () {
-    it('should distinguish between map and property access', inject([
-      TestComponentBuilder,
-      AsyncTestCompleter
-    ], (tb, async) {
-      tb.overrideView(Dummy, new View(
-          template: '<property-access></property-access>',
-          directives: [PropertyAccess]))
-
-      .createAsync(Dummy).then((tc) {
-        tc.detectChanges();
-        expect(asNativeElements(tc.componentViewChildren)).toHaveText('prop:foo-prop;map:foo-map');
-        async.done();
-      });
-    }));
-
-    it('should not fallback on map access if property missing', inject([
-      TestComponentBuilder,
-      AsyncTestCompleter
-    ], (tb, async) {
-      tb.overrideView(Dummy, new View(
-          template: '<no-property-access></no-property-access>',
-          directives: [NoPropertyAccess]))
-
-      .createAsync(Dummy).then((tc) {
-        expect(() => tc.detectChanges())
-            .toThrowError(new RegExp('property not found'));
-        async.done();
-      });
-    }));
-  });
-
-  describe('OnChange', () {
-    it('should be notified of changes', inject([
-      TestComponentBuilder,
-      AsyncTestCompleter
-    ], (tb, async) {
-      tb.overrideView(Dummy, new View(
-          template: '''<on-change [prop]="'hello'"></on-change>''',
-          directives: [OnChangeComponent]))
-
-      .createAsync(Dummy).then((tc) {
-        tc.detectChanges();
-        var cmp = tc.componentViewChildren[0].inject(OnChangeComponent);
-        expect(cmp.prop).toEqual('hello');
-        expect(cmp.changes.containsKey('prop')).toEqual(true);
-        async.done();
-      });
-    }));
-  });
-}
-
-@Component(selector: 'dummy')
-class Dummy {}
-
-@Component(
-    selector: 'type-literal-component',
-    viewInjector: const [
-  const Binding(const TypeLiteral<List<String>>(),
-      toValue: const <String>['Hello', 'World'])
-])
-@View(template: '{{list}}')
-class TypeLiteralComponent {
-  final List<String> list;
-
-  TypeLiteralComponent(this.list);
-}
-
-@Component(selector: 'throwing-component')
-@View(template: '')
-class ThrowingComponent {
-  ThrowingComponent() {
-    functionThatThrows();
-  }
-}
-
-@Component(selector: 'throwing-component2')
-@View(template: '')
-class ThrowingComponent2 {
-  ThrowingComponent2() {
-    functionThatThrowsNonError();
-  }
-}
-
-@proxy
-class PropModel implements Map {
-  final String foo = 'foo-prop';
-
-  operator [](_) => 'foo-map';
-
-  noSuchMethod(_) {
-    throw 'property not found';
-  }
-}
-
-@Component(selector: 'property-access')
-@View(template: '''prop:{{model.foo}};map:{{model['foo']}}''')
-class PropertyAccess {
-  final model = new PropModel();
-}
-
-@Component(selector: 'no-property-access')
-@View(template: '''{{model.doesNotExist}}''')
-class NoPropertyAccess {
-  final model = new PropModel();
-}
-
-@Component(selector: 'on-change',
-    // TODO: needed because of https://github.com/angular/angular/issues/2120
-    lifecycle: const [onChange], properties: const ['prop'])
-@View(template: '')
-class OnChangeComponent implements OnChange {
-  Map changes;
-  String prop;
-
-  @override
-  void onChange(Map changes) {
-    this.changes = changes;
-  }
-}
diff --git a/modules/angular2/test/core/compiler/integration_spec.ts b/modules/angular2/test/core/compiler/integration_spec.ts
deleted file mode 100644
index 5638fd709804..000000000000
--- a/modules/angular2/test/core/compiler/integration_spec.ts
+++ /dev/null
@@ -1,1855 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  beforeEachBindings,
-  it,
-  xit,
-  containsRegexp,
-  stringifyElement,
-  TestComponentBuilder
-} from 'angular2/test_lib';
-
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {
-  Type,
-  isPresent,
-  BaseException,
-  assertionsEnabled,
-  isJsObject,
-  global,
-  stringify,
-  CONST,
-  CONST_EXPR
-} from 'angular2/src/facade/lang';
-import {PromiseWrapper, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-
-import {
-  Injector,
-  bind,
-  Injectable,
-  Binding,
-  forwardRef,
-  OpaqueToken,
-  Inject,
-  Parent,
-  Ancestor,
-  Unbounded
-} from 'angular2/di';
-import {
-  PipeFactory,
-  PipeRegistry,
-  defaultPipeRegistry,
-  ChangeDetection,
-  DynamicChangeDetection,
-  Pipe,
-  ChangeDetectorRef,
-  ON_PUSH
-} from 'angular2/change_detection';
-
-import {Directive, Component, View, Attribute, Query} from 'angular2/annotations';
-import * as viewAnn from 'angular2/src/core/annotations_impl/view';
-import * as visAnn from 'angular2/src/di/annotations_impl';
-
-import {QueryList} from 'angular2/src/core/compiler/query_list';
-
-import {NgIf} from 'angular2/src/directives/ng_if';
-import {NgFor} from 'angular2/src/directives/ng_for';
-
-import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
-import {ProtoViewRef, ViewRef} from 'angular2/src/core/compiler/view_ref';
-import {Compiler} from 'angular2/src/core/compiler/compiler';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-
-import {DomRenderer} from 'angular2/src/render/dom/dom_renderer';
-import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-
-const ANCHOR_ELEMENT = CONST_EXPR(new OpaqueToken('AnchorElement'));
-
-export function main() {
-  describe('integration tests', function() {
-
-    beforeEachBindings(() => [bind(ANCHOR_ELEMENT).toValue(el('<div></div>'))]);
-
-    describe('react to record changes', function() {
-      it('should consume text node changes',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({template: '<div>{{ctxProp}}</div>'}))
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 rootTC.componentInstance.ctxProp = 'Hello World!';
-
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('Hello World!');
-                 async.done();
-               });
-         }));
-
-      it('should consume element binding changes',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({template: '<div [id]="ctxProp"></div>'}))
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 rootTC.componentInstance.ctxProp = 'Hello World!';
-                 rootTC.detectChanges();
-
-                 expect(rootTC.componentViewChildren[0].nativeElement.id).toEqual('Hello World!');
-                 async.done();
-               });
-         }));
-
-      it('should consume binding to aria-* attributes',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp,
-                            new viewAnn.View({template: '<div [attr.aria-label]="ctxProp"></div>'}))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 rootTC.componentInstance.ctxProp = 'Initial aria label';
-                 rootTC.detectChanges();
-                 expect(
-                     DOM.getAttribute(rootTC.componentViewChildren[0].nativeElement, 'aria-label'))
-                     .toEqual('Initial aria label');
-
-                 rootTC.componentInstance.ctxProp = 'Changed aria label';
-                 rootTC.detectChanges();
-                 expect(
-                     DOM.getAttribute(rootTC.componentViewChildren[0].nativeElement, 'aria-label'))
-                     .toEqual('Changed aria label');
-
-                 async.done();
-               });
-         }));
-
-      it('should consume binding to property names where attr name and property name do not match',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp,
-                            new viewAnn.View({template: '<div [tabindex]="ctxNumProp"></div>'}))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.tabIndex).toEqual(0);
-
-                 rootTC.componentInstance.ctxNumProp = 5;
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.tabIndex).toEqual(5);
-
-                 async.done();
-               });
-         }));
-
-      it('should consume binding to camel-cased properties using dash-cased syntax in templates',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp,
-                            new viewAnn.View({template: '<input [read-only]="ctxBoolProp">'}))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.readOnly).toBeFalsy();
-
-                 rootTC.componentInstance.ctxBoolProp = true;
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.readOnly).toBeTruthy();
-
-                 async.done();
-               });
-         }));
-
-      it('should consume binding to inner-html',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp,
-                            new viewAnn.View({template: '<div inner-html="{{ctxProp}}"></div>'}))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 rootTC.componentInstance.ctxProp = 'Some <span>HTML</span>';
-                 rootTC.detectChanges();
-                 expect(DOM.getInnerHTML(rootTC.componentViewChildren[0].nativeElement))
-                     .toEqual('Some <span>HTML</span>');
-
-                 rootTC.componentInstance.ctxProp = 'Some other <div>HTML</div>';
-                 rootTC.detectChanges();
-                 expect(DOM.getInnerHTML(rootTC.componentViewChildren[0].nativeElement))
-                     .toEqual('Some other <div>HTML</div>');
-
-                 async.done();
-               });
-         }));
-
-      it('should consume directive watch expression change.',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var tpl = '<div>' +
-                     '<div my-dir [elprop]="ctxProp"></div>' +
-                     '<div my-dir elprop="Hi there!"></div>' +
-                     '<div my-dir elprop="Hi {{\'there!\'}}"></div>' +
-                     '<div my-dir elprop="One more {{ctxProp}}"></div>' +
-                     '</div>';
-           tcb.overrideView(MyComp, new viewAnn.View({template: tpl, directives: [MyDir]}))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 rootTC.componentInstance.ctxProp = 'Hello World!';
-                 rootTC.detectChanges();
-
-                 expect(rootTC.componentViewChildren[0].inject(MyDir).dirProp)
-                     .toEqual('Hello World!');
-                 expect(rootTC.componentViewChildren[1].inject(MyDir).dirProp).toEqual('Hi there!');
-                 expect(rootTC.componentViewChildren[2].inject(MyDir).dirProp).toEqual('Hi there!');
-                 expect(rootTC.componentViewChildren[3].inject(MyDir).dirProp)
-                     .toEqual('One more Hello World!');
-                 async.done();
-               });
-         }));
-
-      describe('pipes', () => {
-        beforeEachBindings(() => {
-          return [
-            bind(ChangeDetection)
-                .toFactory(() => new DynamicChangeDetection(
-                               new PipeRegistry({"double": [new DoublePipeFactory()]})),
-                           [])
-          ];
-        });
-
-        it("should support pipes in bindings",
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-                    tcb.overrideView(MyComp, new viewAnn.View({
-                         template: '<div my-dir #dir="mydir" [elprop]="ctxProp | double"></div>',
-                         directives: [MyDir]
-                       }))
-
-                        .createAsync(MyComp)
-                        .then((rootTC) => {
-                          rootTC.componentInstance.ctxProp = 'a';
-                          rootTC.detectChanges();
-
-                          var dir = rootTC.componentViewChildren[0].getLocal('dir');
-                          expect(dir.dirProp).toEqual('aa');
-                          async.done();
-                        });
-                  }));
-      });
-
-      it('should support nested components.',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(
-                  MyComp,
-                  new viewAnn.View({template: '<child-cmp></child-cmp>', directives: [ChildComp]}))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 rootTC.detectChanges();
-
-                 expect(rootTC.nativeElement).toHaveText('hello');
-                 async.done();
-               });
-         }));
-
-      // GH issue 328 - https://github.com/angular/angular/issues/328
-      it('should support different directive types on a single node',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: '<child-cmp my-dir [elprop]="ctxProp"></child-cmp>',
-                directives: [MyDir, ChildComp]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 rootTC.componentInstance.ctxProp = 'Hello World!';
-                 rootTC.detectChanges();
-
-                 var tc = rootTC.componentViewChildren[0];
-
-                 expect(tc.inject(MyDir).dirProp).toEqual('Hello World!');
-                 expect(tc.inject(ChildComp).dirProp).toEqual(null);
-
-                 async.done();
-               });
-         }));
-
-      it('should support directives where a binding attribute is not given',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                // No attribute "el-prop" specified.
-                template: '<p my-dir></p>',
-                directives: [MyDir]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => { async.done(); });
-         }));
-
-      it('should execute a given directive once, even if specified multiple times',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: '<p no-duplicate></p>',
-                directives: [
-                  DuplicateDir,
-                  DuplicateDir,
-                  [DuplicateDir, [DuplicateDir, bind(DuplicateDir).toClass(DuplicateDir)]]
-                ]
-              }))
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 expect(rootTC.nativeElement).toHaveText('noduplicate');
-                 async.done();
-               });
-         }));
-
-      it('should use the last directive binding per directive',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: '<p no-duplicate></p>',
-                directives: [
-                  bind(DuplicateDir)
-                      .toClass(DuplicateDir),
-                  bind(DuplicateDir).toClass(OtherDuplicateDir)
-                ]
-              }))
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 expect(rootTC.nativeElement).toHaveText('othernoduplicate');
-                 async.done();
-               });
-         }));
-
-      it('should support directives where a selector matches property binding',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View(
-                                        {template: '<p [id]="ctxProp"></p>', directives: [IdDir]}))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 var tc = rootTC.componentViewChildren[0];
-                 var idDir = tc.inject(IdDir);
-
-                 rootTC.componentInstance.ctxProp = 'some_id';
-                 rootTC.detectChanges();
-                 expect(idDir.id).toEqual('some_id');
-
-                 rootTC.componentInstance.ctxProp = 'other_id';
-                 rootTC.detectChanges();
-                 expect(idDir.id).toEqual('other_id');
-
-                 async.done();
-               });
-         }));
-
-      it('should allow specifying directives as bindings',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: '<child-cmp></child-cmp>',
-                directives: [bind(ChildComp).toClass(ChildComp)]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-
-                 expect(rootTC.nativeElement).toHaveText('hello');
-                 async.done();
-               });
-         }));
-
-      it('should read directives metadata from their binding token',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: '<div public-api><div needs-public-api></div></div>',
-                directives: [bind(PublicApi).toClass(PrivateImpl), NeedsPublicApi]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => { async.done(); });
-         }));
-
-      it('should support template directives via `<template>` elements.',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template:
-                    '<div><template some-viewport var-greeting="some-tmpl"><copy-me>{{greeting}}</copy-me></template></div>',
-                directives: [SomeViewport]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 rootTC.detectChanges();
-
-                 var childNodesOfWrapper = rootTC.componentViewChildren;
-                 // 1 template + 2 copies.
-                 expect(childNodesOfWrapper.length).toBe(3);
-                 expect(childNodesOfWrapper[1].nativeElement).toHaveText('hello');
-                 expect(childNodesOfWrapper[2].nativeElement).toHaveText('again');
-                 async.done();
-               });
-         }));
-
-      it('should support template directives via `template` attribute.',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template:
-                    '<div><copy-me template="some-viewport: var greeting=some-tmpl">{{greeting}}</copy-me></div>',
-                directives: [SomeViewport]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-
-                 var childNodesOfWrapper = rootTC.componentViewChildren;
-                 // 1 template + 2 copies.
-                 expect(childNodesOfWrapper.length).toBe(3);
-                 expect(childNodesOfWrapper[1].nativeElement).toHaveText('hello');
-                 expect(childNodesOfWrapper[2].nativeElement).toHaveText('again');
-                 async.done();
-               });
-         }));
-
-      it('should allow to transplant embedded ProtoViews into other ViewContainers',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template:
-                    '<some-directive><toolbar><template toolbarpart var-toolbar-prop="toolbarProp">{{ctxProp}},{{toolbarProp}},<cmp-with-parent></cmp-with-parent></template></toolbar></some-directive>',
-                directives: [SomeDirective, CompWithParent, ToolbarComponent, ToolbarPart]
-              }))
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 rootTC.componentInstance.ctxProp = 'From myComp';
-                 rootTC.detectChanges();
-
-                 expect(rootTC.nativeElement)
-                     .toHaveText(
-                         'TOOLBAR(From myComp,From toolbar,Component with an injected parent)');
-
-                 async.done();
-               });
-         }));
-
-      describe("variable bindings", () => {
-        it('should assign a component to a var-',
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder,
-                   async) => {tcb.overrideView(MyComp, new viewAnn.View({
-                                   template: '<p><child-cmp var-alice></child-cmp></p>',
-                                   directives: [ChildComp]
-                                 }))
-
-                                  .createAsync(MyComp)
-                                  .then((rootTC) => {
-                                    expect(rootTC.componentViewChildren[0].getLocal('alice'))
-                                        .toBeAnInstanceOf(ChildComp);
-
-                                    async.done();
-                                  })}));
-
-        it('should assign a directive to a var-',
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-                    tcb.overrideView(MyComp, new viewAnn.View({
-                         template: '<p><div export-dir #localdir="dir"></div></p>',
-                         directives: [ExportDir]
-                       }))
-
-                        .createAsync(MyComp)
-                        .then((rootTC) => {
-                          expect(rootTC.componentViewChildren[0].getLocal('localdir'))
-                              .toBeAnInstanceOf(ExportDir);
-
-                          async.done();
-                        });
-                  }));
-
-        it('should make the assigned component accessible in property bindings',
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-                      tcb.overrideView(MyComp, new viewAnn.View({
-                           template: '<p><child-cmp var-alice></child-cmp>{{alice.ctxProp}}</p>',
-                           directives: [ChildComp]
-                         }))
-
-                          .createAsync(MyComp)
-                          .then((rootTC) => {
-                            rootTC.detectChanges();
-
-                            expect(rootTC.nativeElement)
-                                .toHaveText('hellohello');  // this first one is the
-                                                            // component, the second one is
-                                                            // the text binding
-                            async.done();
-                          })}));
-
-        it('should assign two component instances each with a var-',
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-                      tcb.overrideView(MyComp, new viewAnn.View({
-                           template: '<p><child-cmp var-alice></child-cmp><child-cmp var-bob></p>',
-                           directives: [ChildComp]
-                         }))
-
-                          .createAsync(MyComp)
-                          .then((rootTC) => {
-
-                            expect(rootTC.componentViewChildren[0].getLocal('alice'))
-                                .toBeAnInstanceOf(ChildComp);
-                            expect(rootTC.componentViewChildren[0].getLocal('bob'))
-                                .toBeAnInstanceOf(ChildComp);
-                            expect(rootTC.componentViewChildren[0].getLocal('alice'))
-                                .not.toBe(rootTC.componentViewChildren[0].getLocal('bob'));
-
-                            async.done();
-                          })}));
-
-        it('should assign the component instance to a var- with shorthand syntax',
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder,
-                   async) => {tcb.overrideView(MyComp, new viewAnn.View({
-                                   template: '<child-cmp #alice></child-cmp>',
-                                   directives: [ChildComp]
-                                 }))
-
-                                  .createAsync(MyComp)
-                                  .then((rootTC) => {
-
-                                    expect(rootTC.componentViewChildren[0].getLocal('alice'))
-                                        .toBeAnInstanceOf(ChildComp);
-
-                                    async.done();
-                                  })}));
-
-        it('should assign the element instance to a user-defined variable',
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-                      tcb.overrideView(MyComp,
-                                       new viewAnn.View(
-                                           {template: '<p><div var-alice><i>Hello</i></div></p>'}))
-
-                          .createAsync(MyComp)
-                          .then((rootTC) => {
-
-                            var value = rootTC.componentViewChildren[0].getLocal('alice');
-                            expect(value).not.toBe(null);
-                            expect(value.tagName.toLowerCase()).toEqual('div');
-
-                            async.done();
-                          })}));
-
-        it('should change dash-case to camel-case',
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-                    tcb.overrideView(MyComp, new viewAnn.View({
-                         template: '<p><child-cmp var-super-alice></child-cmp></p>',
-                         directives: [ChildComp]
-                       }))
-
-                        .createAsync(MyComp)
-                        .then((rootTC) => {
-                          expect(rootTC.componentViewChildren[0].getLocal('superAlice'))
-                              .toBeAnInstanceOf(ChildComp);
-
-                          async.done();
-                        });
-                  }));
-
-        it('should allow to use variables in a for loop',
-           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
-                                                               async) => {
-             tcb.overrideView(MyComp, new viewAnn.View({
-                  template:
-                      '<div><div *ng-for="var i of [1]"><child-cmp-no-template #cmp></child-cmp-no-template>{{i}}-{{cmp.ctxProp}}</div></div>',
-                  directives: [ChildCompNoTemplate, NgFor]
-                }))
-
-                 .createAsync(MyComp)
-                 .then((rootTC) => {
-                   rootTC.detectChanges();
-
-                   // Get the element at index 1, since index 0 is the <template>.
-                   expect(rootTC.componentViewChildren[1].nativeElement).toHaveText("1-hello");
-
-                   async.done();
-                 });
-           }));
-      });
-
-      describe("ON_PUSH components", () => {
-        it("should use ChangeDetectorRef to manually request a check",
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-
-                      tcb.overrideView(MyComp, new viewAnn.View({
-                           template: '<push-cmp-with-ref #cmp></push-cmp-with-ref>',
-                           directives: [[[PushCmpWithRef]]]
-                         }))
-
-                          .createAsync(MyComp)
-                          .then((rootTC) => {
-
-                            var cmp = rootTC.componentViewChildren[0].getLocal('cmp');
-
-                            rootTC.detectChanges();
-                            expect(cmp.numberOfChecks).toEqual(1);
-
-                            rootTC.detectChanges();
-                            expect(cmp.numberOfChecks).toEqual(1);
-
-                            cmp.propagate();
-
-                            rootTC.detectChanges();
-                            expect(cmp.numberOfChecks).toEqual(2);
-                            async.done();
-                          })}));
-
-        it("should be checked when its bindings got updated",
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-
-                      tcb.overrideView(MyComp, new viewAnn.View({
-                           template: '<push-cmp [prop]="ctxProp" #cmp></push-cmp>',
-                           directives: [[[PushCmp]]]
-                         }))
-
-                          .createAsync(MyComp)
-                          .then((rootTC) => {
-                            var cmp = rootTC.componentViewChildren[0].getLocal('cmp');
-
-                            rootTC.componentInstance.ctxProp = "one";
-                            rootTC.detectChanges();
-                            expect(cmp.numberOfChecks).toEqual(1);
-
-                            rootTC.componentInstance.ctxProp = "two";
-                            rootTC.detectChanges();
-                            expect(cmp.numberOfChecks).toEqual(2);
-
-                            async.done();
-                          })}));
-
-        it('should not affect updating properties on the component',
-           inject(
-               [TestComponentBuilder, AsyncTestCompleter],
-               (tcb: TestComponentBuilder, async) => {
-                   tcb.overrideView(MyComp, new viewAnn.View({
-                        template: '<push-cmp-with-ref [prop]="ctxProp" #cmp></push-cmp-with-ref>',
-                        directives: [[[PushCmpWithRef]]]
-                      }))
-
-                       .createAsync(MyComp)
-                       .then((rootTC) => {
-
-                         var cmp = rootTC.componentViewChildren[0].getLocal('cmp');
-
-                         rootTC.componentInstance.ctxProp = "one";
-                         rootTC.detectChanges();
-                         expect(cmp.prop).toEqual("one");
-
-                         rootTC.componentInstance.ctxProp = "two";
-                         rootTC.detectChanges();
-                         expect(cmp.prop).toEqual("two");
-
-                         async.done();
-                       })}));
-      });
-
-      it('should create a component that injects a @Parent',
-         inject(
-             [TestComponentBuilder, AsyncTestCompleter],
-             (tcb: TestComponentBuilder, async) => {
-                 tcb.overrideView(MyComp, new viewAnn.View({
-                      template:
-                          '<some-directive><cmp-with-parent #child></cmp-with-parent></some-directive>',
-                      directives: [SomeDirective, CompWithParent]
-                    }))
-
-                     .createAsync(MyComp)
-                     .then((rootTC) => {
-
-                       var childComponent = rootTC.componentViewChildren[0].getLocal('child');
-                       expect(childComponent.myParent).toBeAnInstanceOf(SomeDirective);
-
-                       async.done();
-                     })}));
-
-      it('should create a component that injects an @Ancestor',
-         inject([TestComponentBuilder, AsyncTestCompleter],
-                (tcb: TestComponentBuilder, async) => {
-                    tcb.overrideView(MyComp, new viewAnn.View({
-                         template: `
-            <some-directive>
-              <p>
-                <cmp-with-ancestor #child></cmp-with-ancestor>
-              </p>
-            </some-directive>`,
-                         directives: [SomeDirective, CompWithAncestor]
-                       }))
-
-                        .createAsync(MyComp)
-                        .then((rootTC) => {
-
-                          var childComponent = rootTC.componentViewChildren[0].getLocal('child');
-                          expect(childComponent.myAncestor).toBeAnInstanceOf(SomeDirective);
-
-                          async.done();
-                        })}));
-
-      it('should create a component that injects an @Ancestor through viewcontainer directive',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: `
-            <some-directive>
-              <p *ng-if="true">
-                <cmp-with-ancestor #child></cmp-with-ancestor>
-              </p>
-            </some-directive>`,
-                directives: [SomeDirective, CompWithAncestor, NgIf]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-
-                 var tc = rootTC.componentViewChildren[0].children[1];
-
-                 var childComponent = tc.getLocal('child');
-                 expect(childComponent.myAncestor).toBeAnInstanceOf(SomeDirective);
-
-                 async.done();
-               });
-         }));
-
-      it('should support events via EventEmitter',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: '<div emitter listener></div>',
-                directives: [DirectiveEmitingEvent, DirectiveListeningEvent]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 var tc = rootTC.componentViewChildren[0];
-                 var emitter = tc.inject(DirectiveEmitingEvent);
-                 var listener = tc.inject(DirectiveListeningEvent);
-
-                 expect(listener.msg).toEqual('');
-
-                 ObservableWrapper.subscribe(emitter.event, (_) => {
-                   expect(listener.msg).toEqual('fired !');
-                   async.done();
-                 });
-
-                 emitter.fireEvent('fired !');
-               });
-         }));
-
-      it('should support [()] syntax',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: '<div [(control)]="ctxProp" two-way></div>',
-                directives: [DirectiveWithTwoWayBinding]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 var tc = rootTC.componentViewChildren[0];
-                 var dir = tc.inject(DirectiveWithTwoWayBinding);
-
-                 rootTC.componentInstance.ctxProp = 'one';
-                 rootTC.detectChanges();
-
-                 expect(dir.value).toEqual('one');
-
-                 ObservableWrapper.subscribe(dir.control, (_) => {
-                   expect(rootTC.componentInstance.ctxProp).toEqual('two');
-                   async.done();
-                 });
-
-                 dir.triggerChange('two');
-               });
-         }));
-
-      if (DOM.supportsDOMEvents()) {
-        it("should support invoking methods on the host element via hostActions",
-           inject(
-               [TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-                 tcb.overrideView(MyComp, new viewAnn.View({
-                      template: '<div update-host-actions></div>',
-                      directives: [DirectiveUpdatingHostActions]
-                    }))
-
-                     .createAsync(MyComp)
-                     .then((rootTC) => {
-                       var tc = rootTC.componentViewChildren[0];
-                       var nativeElement = tc.nativeElement;
-                       var updateHost = tc.inject(DirectiveUpdatingHostActions);
-
-                       ObservableWrapper.subscribe(updateHost.setAttr, (_) => {
-                         expect(DOM.hasAttribute(nativeElement, 'update-host-actions')).toBe(true);
-                         async.done();
-                       });
-
-                       updateHost.triggerSetAttr('value');
-                     });
-               }));
-      }
-
-      it('should support render events',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(
-                  MyComp,
-                  new viewAnn.View(
-                      {template: '<div listener></div>', directives: [DirectiveListeningDomEvent]}))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-
-                 var tc = rootTC.componentViewChildren[0];
-                 var listener = tc.inject(DirectiveListeningDomEvent);
-
-                 dispatchEvent(tc.nativeElement, 'domEvent');
-
-                 expect(listener.eventType).toEqual('domEvent');
-
-                 async.done();
-               });
-         }));
-
-      it('should support render global events',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(
-                  MyComp,
-                  new viewAnn.View(
-                      {template: '<div listener></div>', directives: [DirectiveListeningDomEvent]}))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 var tc = rootTC.componentViewChildren[0];
-                 var listener = tc.inject(DirectiveListeningDomEvent);
-                 dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
-                 expect(listener.eventType).toEqual('window_domEvent');
-
-                 listener = tc.inject(DirectiveListeningDomEvent);
-                 dispatchEvent(DOM.getGlobalEventTarget("document"), 'domEvent');
-                 expect(listener.eventType).toEqual('document_domEvent');
-
-                 rootTC.destroy();
-                 listener = tc.inject(DirectiveListeningDomEvent);
-                 dispatchEvent(DOM.getGlobalEventTarget("body"), 'domEvent');
-                 expect(listener.eventType).toEqual('');
-
-                 async.done();
-               });
-         }));
-
-      it('should support updating host element via hostAttributes',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: '<div update-host-attributes></div>',
-                directives: [DirectiveUpdatingHostAttributes]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-
-                 expect(DOM.getAttribute(rootTC.componentViewChildren[0].nativeElement, "role"))
-                     .toEqual("button");
-
-                 async.done();
-               });
-         }));
-
-      it('should support updating host element via hostProperties',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: '<div update-host-properties></div>',
-                directives: [DirectiveUpdatingHostProperties]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 var tc = rootTC.componentViewChildren[0];
-                 var updateHost = tc.inject(DirectiveUpdatingHostProperties);
-
-                 updateHost.id = "newId";
-
-                 rootTC.detectChanges();
-
-                 expect(tc.nativeElement.id).toEqual("newId");
-
-                 async.done();
-               });
-         }));
-
-
-      if (DOM.supportsDOMEvents()) {
-        it('should support preventing default on render events',
-           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
-                                                               async) => {
-             tcb.overrideView(MyComp, new viewAnn.View({
-                  template:
-                      '<input type="checkbox" listenerprevent></input><input type="checkbox" listenernoprevent></input>',
-                  directives:
-                      [DirectiveListeningDomEventPrevent, DirectiveListeningDomEventNoPrevent]
-                }))
-
-                 .createAsync(MyComp)
-                 .then((rootTC) => {
-                   expect(DOM.getChecked(rootTC.componentViewChildren[0].nativeElement))
-                       .toBeFalsy();
-                   expect(DOM.getChecked(rootTC.componentViewChildren[1].nativeElement))
-                       .toBeFalsy();
-                   DOM.dispatchEvent(rootTC.componentViewChildren[0].nativeElement,
-                                     DOM.createMouseEvent('click'));
-                   DOM.dispatchEvent(rootTC.componentViewChildren[1].nativeElement,
-                                     DOM.createMouseEvent('click'));
-                   expect(DOM.getChecked(rootTC.componentViewChildren[0].nativeElement))
-                       .toBeFalsy();
-                   expect(DOM.getChecked(rootTC.componentViewChildren[1].nativeElement))
-                       .toBeTruthy();
-                   async.done();
-                 });
-           }));
-      }
-
-      it('should support render global events from multiple directives',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: '<div *ng-if="ctxBoolProp" listener listenerother></div>',
-                directives: [NgIf, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
-              }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 globalCounter = 0;
-                 rootTC.componentInstance.ctxBoolProp = true;
-                 rootTC.detectChanges();
-
-                 var tc = rootTC.componentViewChildren[1];
-
-                 var listener = tc.inject(DirectiveListeningDomEvent);
-                 var listenerother = tc.inject(DirectiveListeningDomEventOther);
-                 dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
-                 expect(listener.eventType).toEqual('window_domEvent');
-                 expect(listenerother.eventType).toEqual('other_domEvent');
-                 expect(globalCounter).toEqual(1);
-
-
-                 rootTC.componentInstance.ctxBoolProp = false;
-                 rootTC.detectChanges();
-                 dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
-                 expect(globalCounter).toEqual(1);
-
-                 rootTC.componentInstance.ctxBoolProp = true;
-                 rootTC.detectChanges();
-                 dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
-                 expect(globalCounter).toEqual(2);
-
-                 async.done();
-               });
-         }));
-
-      describe('dynamic ViewContainers', () => {
-
-        it('should allow to create a ViewContainerRef at any bound location',
-           inject([TestComponentBuilder, AsyncTestCompleter, Compiler],
-                  (tcb: TestComponentBuilder, async, compiler) => {
-                    tcb.overrideView(MyComp, new viewAnn.View({
-                         template: '<div><dynamic-vp #dynamic></dynamic-vp></div>',
-                         directives: [DynamicViewport]
-                       }))
-
-                        .createAsync(MyComp)
-                        .then((rootTC) => {
-                          var tc = rootTC.componentViewChildren[0];
-                          var dynamicVp = tc.inject(DynamicViewport);
-                          dynamicVp.done.then((_) => {
-                            rootTC.detectChanges();
-                            expect(rootTC.componentViewChildren[1].nativeElement)
-                                .toHaveText('dynamic greet');
-                            async.done();
-                          });
-                        });
-                  }));
-
-      });
-
-      it('should support static attributes',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(
-                  MyComp,
-                  new viewAnn.View(
-                      {template: '<input static type="text" title>', directives: [NeedsAttribute]}))
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 var tc = rootTC.componentViewChildren[0];
-                 var needsAttribute = tc.inject(NeedsAttribute);
-                 expect(needsAttribute.typeAttribute).toEqual('text');
-                 expect(needsAttribute.titleAttribute).toEqual('');
-                 expect(needsAttribute.fooAttribute).toEqual(null);
-
-                 async.done();
-               });
-         }));
-    });
-
-    describe("dependency injection", () => {
-      it("should support hostInjector",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: `
-            <directive-providing-injectable>
-              <directive-consuming-injectable #consuming>
-              </directive-consuming-injectable>
-            </directive-providing-injectable>
-          `,
-                directives: [DirectiveProvidingInjectable, DirectiveConsumingInjectable]
-              }))
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 var comp = rootTC.componentViewChildren[0].getLocal("consuming");
-                 expect(comp.injectable).toBeAnInstanceOf(InjectableService);
-
-                 async.done();
-               });
-         }));
-
-      it("should support viewInjector",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(DirectiveProvidingInjectableInView, new viewAnn.View({
-                template: `
-              <directive-consuming-injectable #consuming>
-              </directive-consuming-injectable>
-          `,
-                directives: [DirectiveConsumingInjectable]
-              }))
-               .createAsync(DirectiveProvidingInjectableInView)
-               .then((rootTC) => {
-                 var comp = rootTC.componentViewChildren[0].getLocal("consuming");
-                 expect(comp.injectable).toBeAnInstanceOf(InjectableService);
-
-                 async.done();
-               });
-         }));
-
-      it("should support unbounded lookup",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: `
-            <directive-providing-injectable>
-              <directive-containing-directive-consuming-an-injectable #dir>
-              </directive-containing-directive-consuming-an-injectable>
-            </directive-providing-injectable>
-          `,
-                directives: [
-                  DirectiveProvidingInjectable,
-                  DirectiveContainingDirectiveConsumingAnInjectable
-                ]
-              }))
-               .overrideView(DirectiveContainingDirectiveConsumingAnInjectable, new viewAnn.View({
-                 template: `
-            <directive-consuming-injectable-unbounded></directive-consuming-injectable-unbounded>
-          `,
-                 directives: [DirectiveConsumingInjectableUnbounded]
-               }))
-
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 var comp = rootTC.componentViewChildren[0].getLocal("dir");
-                 expect(comp.directive.injectable).toBeAnInstanceOf(InjectableService);
-
-                 async.done();
-               });
-         }));
-
-      it("should support the event-bus scenario",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new viewAnn.View({
-                template: `
-            <grand-parent-providing-event-bus>
-              <parent-providing-event-bus>
-                <child-consuming-event-bus>
-                </child-consuming-event-bus>
-              </parent-providing-event-bus>
-            </grand-parent-providing-event-bus>
-          `,
-                directives: [
-                  GrandParentProvidingEventBus,
-                  ParentProvidingEventBus,
-                  ChildConsumingEventBus
-                ]
-              }))
-               .createAsync(MyComp)
-               .then((rootTC) => {
-                 var gpComp = rootTC.componentViewChildren[0];
-                 var parentComp = gpComp.children[0];
-                 var childComp = parentComp.children[0];
-
-                 var grandParent = gpComp.inject(GrandParentProvidingEventBus);
-                 var parent = parentComp.inject(ParentProvidingEventBus);
-                 var child = childComp.inject(ChildConsumingEventBus);
-
-                 expect(grandParent.bus.name).toEqual("grandparent");
-                 expect(parent.bus.name).toEqual("parent");
-                 expect(parent.grandParentBus).toBe(grandParent.bus);
-                 expect(child.bus).toBe(parent.bus);
-
-                 async.done();
-               });
-         }));
-    });
-
-    describe("error handling", () => {
-      it('should report a meaningful error when a directive is missing annotation',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb = tcb.overrideView(MyComp,
-                                  new viewAnn.View({directives: [SomeDirectiveMissingAnnotation]}));
-
-           PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
-             expect(e.message).toEqual(
-                 `No Directive annotation found on ${stringify(SomeDirectiveMissingAnnotation)}`);
-             async.done();
-             return null;
-           });
-         }));
-
-      it('should report a meaningful error when a component is missing view annotation',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           PromiseWrapper.catchError(tcb.createAsync(ComponentWithoutView), (e) => {
-             expect(e.message).toEqual(
-                 `No View annotation found on component ${stringify(ComponentWithoutView)}`);
-             async.done();
-             return null;
-           });
-         }));
-
-      it('should report a meaningful error when a directive is null',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-
-           tcb = tcb.overrideView(MyComp, new viewAnn.View({directives: [[null]]}));
-
-           PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
-             expect(e.message).toEqual(
-                 `Unexpected directive value 'null' on the View of component '${stringify(MyComp)}'`);
-             async.done();
-             return null;
-           });
-         }));
-
-      if (!IS_DARTIUM) {
-        it('should report a meaningful error when a directive is undefined',
-           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
-                                                               async) => {
-
-             var undefinedValue;
-
-             tcb = tcb.overrideView(MyComp, new viewAnn.View({directives: [undefinedValue]}));
-
-             PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
-               expect(e.message).toEqual(
-                   `Unexpected directive value 'undefined' on the View of component '${stringify(MyComp)}'`);
-               async.done();
-               return null;
-             });
-           }));
-      }
-
-      it('should specify a location of an error that happened during change detection (text)',
-         inject([TestComponentBuilder, AsyncTestCompleter],
-                (tcb: TestComponentBuilder, async) => {
-
-                    tcb.overrideView(MyComp, new viewAnn.View({template: '{{a.b}}'}))
-
-                        .createAsync(MyComp)
-                        .then((rootTC) => {
-                          expect(() => rootTC.detectChanges())
-                              .toThrowError(containsRegexp(`{{a.b}} in ${stringify(MyComp)}`));
-                          async.done();
-                        })}));
-
-      it('should specify a location of an error that happened during change detection (element property)',
-         inject(
-             [TestComponentBuilder, AsyncTestCompleter],
-             (tcb: TestComponentBuilder, async) => {
-
-                 tcb.overrideView(MyComp, new viewAnn.View({template: '<div [title]="a.b"></div>'}))
-
-                     .createAsync(MyComp)
-                     .then((rootTC) => {
-                       expect(() => rootTC.detectChanges())
-                           .toThrowError(containsRegexp(`a.b in ${stringify(MyComp)}`));
-                       async.done();
-                     })}));
-
-      it('should specify a location of an error that happened during change detection (directive property)',
-         inject([TestComponentBuilder, AsyncTestCompleter],
-                (tcb: TestComponentBuilder, async) => {
-
-                    tcb.overrideView(MyComp, new viewAnn.View({
-                         template: '<child-cmp [title]="a.b"></child-cmp>',
-                         directives: [ChildComp]
-                       }))
-
-                        .createAsync(MyComp)
-                        .then((rootTC) => {
-                          expect(() => rootTC.detectChanges())
-                              .toThrowError(containsRegexp(`a.b in ${stringify(MyComp)}`));
-                          async.done();
-                        })}));
-    });
-
-    it('should support imperative views',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideView(MyComp, new viewAnn.View({
-              template: '<simple-imp-cmp></simple-imp-cmp>',
-              directives: [SimpleImperativeViewComponent]
-            }))
-             .createAsync(MyComp)
-             .then((rootTC) => {
-               expect(rootTC.nativeElement).toHaveText('hello imp view');
-               async.done();
-             });
-       }));
-
-    it('should support moving embedded views around',
-       inject([TestComponentBuilder, AsyncTestCompleter, ANCHOR_ELEMENT],
-              (tcb, async, anchorElement) => {
-                tcb.overrideView(MyComp, new viewAnn.View({
-                     template: '<div><div *some-impvp="ctxBoolProp">hello</div></div>',
-                     directives: [SomeImperativeViewport]
-                   }))
-                    .createAsync(MyComp)
-                    .then((rootTC) => {
-                      rootTC.detectChanges();
-                      expect(anchorElement).toHaveText('');
-
-                      rootTC.componentInstance.ctxBoolProp = true;
-                      rootTC.detectChanges();
-
-                      expect(anchorElement).toHaveText('hello');
-
-                      rootTC.componentInstance.ctxBoolProp = false;
-                      rootTC.detectChanges();
-                      expect(rootTC.nativeElement).toHaveText('');
-
-                      async.done();
-                    });
-              }));
-
-    describe('Missing property bindings', () => {
-      it('should throw on bindings to unknown properties',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb =
-               tcb.overrideView(MyComp,
-                                new viewAnn.View({template: '<div unknown="{{ctxProp}}"></div>'}))
-
-                   PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
-                     expect(e.message).toEqual(
-                         `Can't bind to 'unknown' since it isn't a know property of the 'div' element and there are no matching directives with a corresponding property`);
-                     async.done();
-                     return null;
-                   });
-         }));
-
-      it('should not throw for property binding to a non-existing property when there is a matching directive property',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(
-                  MyComp,
-                  new viewAnn.View(
-                      {template: '<div my-dir [elprop]="ctxProp"></div>', directives: [MyDir]}))
-               .createAsync(MyComp)
-               .then((val) => { async.done(); });
-         }));
-    });
-
-    // Disabled until a solution is found, refs:
-    // - https://github.com/angular/angular/issues/776
-    // - https://github.com/angular/angular/commit/81f3f32
-    xdescribe('Missing directive checks', () => {
-      function expectCompileError(tcb, inlineTpl, errMessage, done) {
-        tcb = tcb.overrideView(MyComp, new viewAnn.View({template: inlineTpl}));
-        PromiseWrapper.then(
-            tcb.createAsync(MyComp),
-            (value) => {
-              throw new BaseException(
-                  "Test failure: should not have come here as an exception was expected");
-            },
-            (err) => {
-              expect(err.message).toEqual(errMessage);
-              done();
-            });
-      }
-
-      if (assertionsEnabled()) {
-        it('should raise an error if no directive is registered for a template with template bindings',
-           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
-                                                               async) => {
-             expectCompileError(tcb, '<div><div template="if: foo"></div></div>',
-                                'Missing directive to handle \'if\' in <div template="if: foo">',
-                                () => async.done());
-           }));
-
-        it('should raise an error for missing template directive (1)',
-           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
-                                                               async) => {
-             expectCompileError(tcb, '<div><template foo></template></div>',
-                                'Missing directive to handle: <template foo>', () => async.done());
-           }));
-
-        it('should raise an error for missing template directive (2)',
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-                    expectCompileError(tcb, '<div><template *ng-if="condition"></template></div>',
-                                       'Missing directive to handle: <template *ng-if="condition">',
-                                       () => async.done());
-                  }));
-
-        it('should raise an error for missing template directive (3)',
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-                    expectCompileError(
-                        tcb, '<div *ng-if="condition"></div>',
-                        'Missing directive to handle \'if\' in MyComp: <div *ng-if="condition">',
-                        () => async.done());
-                  }));
-      }
-    });
-  });
-}
-
-@Injectable()
-class MyService {
-  greeting: string;
-  constructor() { this.greeting = 'hello'; }
-}
-
-@Component({selector: 'simple-imp-cmp'})
-@View({renderer: 'simple-imp-cmp-renderer', template: ''})
-@Injectable()
-class SimpleImperativeViewComponent {
-  done;
-
-  constructor(self: ElementRef, viewManager: AppViewManager, renderer: DomRenderer) {
-    var shadowViewRef = viewManager.getComponentView(self);
-    renderer.setComponentViewRootNodes(shadowViewRef.render, [el('hello imp view')]);
-  }
-}
-
-@Directive({selector: 'dynamic-vp'})
-@Injectable()
-class DynamicViewport {
-  done;
-  constructor(vc: ViewContainerRef, compiler: Compiler) {
-    var myService = new MyService();
-    myService.greeting = 'dynamic greet';
-
-    var bindings = Injector.resolve([bind(MyService).toValue(myService)]);
-    this.done = compiler.compileInHost(ChildCompUsingService)
-                    .then((hostPv) => {vc.create(hostPv, 0, null, bindings)});
-  }
-}
-
-@Directive({selector: '[my-dir]', properties: ['dirProp: elprop'], exportAs: 'mydir'})
-@Injectable()
-class MyDir {
-  dirProp: string;
-  constructor() { this.dirProp = ''; }
-}
-
-@Component({selector: 'push-cmp', properties: ['prop'], changeDetection: ON_PUSH})
-@View({template: '{{field}}'})
-@Injectable()
-class PushCmp {
-  numberOfChecks: number;
-  prop;
-
-  constructor() { this.numberOfChecks = 0; }
-
-  get field() {
-    this.numberOfChecks++;
-    return "fixed";
-  }
-}
-
-@Component({selector: 'push-cmp-with-ref', properties: ['prop'], changeDetection: ON_PUSH})
-@View({template: '{{field}}'})
-@Injectable()
-class PushCmpWithRef {
-  numberOfChecks: number;
-  ref: ChangeDetectorRef;
-  prop;
-
-  constructor(ref: ChangeDetectorRef) {
-    this.numberOfChecks = 0;
-    this.ref = ref;
-  }
-
-  get field() {
-    this.numberOfChecks++;
-    return "fixed";
-  }
-
-  propagate() { this.ref.requestCheck(); }
-}
-
-@Component({selector: 'my-comp'})
-@View({directives: []})
-@Injectable()
-class MyComp {
-  ctxProp: string;
-  ctxNumProp;
-  ctxBoolProp;
-  constructor() {
-    this.ctxProp = 'initial value';
-    this.ctxNumProp = 0;
-    this.ctxBoolProp = false;
-  }
-}
-
-@Component({selector: 'component-with-pipes', properties: ["prop"]})
-@View({template: ''})
-@Injectable()
-class ComponentWithPipes {
-  prop: string;
-}
-
-@Component({selector: 'child-cmp', properties: ['dirProp'], viewInjector: [MyService]})
-@View({directives: [MyDir], template: '{{ctxProp}}'})
-@Injectable()
-class ChildComp {
-  ctxProp: string;
-  dirProp: string;
-  constructor(service: MyService) {
-    this.ctxProp = service.greeting;
-    this.dirProp = null;
-  }
-}
-
-@Component({selector: 'child-cmp-no-template'})
-@View({directives: [], template: ''})
-@Injectable()
-class ChildCompNoTemplate {
-  ctxProp: string = 'hello';
-}
-
-@Component({selector: 'child-cmp-svc'})
-@View({template: '{{ctxProp}}'})
-@Injectable()
-class ChildCompUsingService {
-  ctxProp: string;
-  constructor(service: MyService) { this.ctxProp = service.greeting; }
-}
-
-@Directive({selector: 'some-directive'})
-@Injectable()
-class SomeDirective {
-}
-
-class SomeDirectiveMissingAnnotation {}
-
-@Component({selector: 'cmp-with-parent'})
-@View({template: '<p>Component with an injected parent</p>', directives: [SomeDirective]})
-@Injectable()
-class CompWithParent {
-  myParent: SomeDirective;
-  constructor(@Parent() someComp: SomeDirective) { this.myParent = someComp; }
-}
-
-@Component({selector: 'cmp-with-ancestor'})
-@View({template: '<p>Component with an injected ancestor</p>', directives: [SomeDirective]})
-@Injectable()
-class CompWithAncestor {
-  myAncestor: SomeDirective;
-  constructor(@Ancestor() someComp: SomeDirective) { this.myAncestor = someComp; }
-}
-
-@Component({selector: '[child-cmp2]', viewInjector: [MyService]})
-@Injectable()
-class ChildComp2 {
-  ctxProp: string;
-  dirProp: string;
-  constructor(service: MyService) {
-    this.ctxProp = service.greeting;
-    this.dirProp = null;
-  }
-}
-
-@Directive({selector: '[some-viewport]'})
-@Injectable()
-class SomeViewport {
-  constructor(container: ViewContainerRef, protoView: ProtoViewRef) {
-    container.create(protoView).setLocal('some-tmpl', 'hello');
-    container.create(protoView).setLocal('some-tmpl', 'again');
-  }
-}
-
-@Injectable()
-class DoublePipe implements Pipe {
-  onDestroy() {}
-
-  supports(obj) { return true; }
-
-  transform(value, args = null) { return `${value}${value}`; }
-}
-
-@Injectable()
-class DoublePipeFactory implements PipeFactory {
-  supports(obj) { return true; }
-
-  create(cdRef) { return new DoublePipe(); }
-}
-
-@Directive({selector: '[emitter]', events: ['event']})
-@Injectable()
-class DirectiveEmitingEvent {
-  msg: string;
-  event: EventEmitter;
-
-  constructor() {
-    this.msg = '';
-    this.event = new EventEmitter();
-  }
-
-  fireEvent(msg: string) { ObservableWrapper.callNext(this.event, msg); }
-}
-
-@Directive({selector: '[update-host-attributes]', host: {'role': 'button'}})
-@Injectable()
-class DirectiveUpdatingHostAttributes {
-}
-
-@Directive({selector: '[update-host-properties]', host: {'[id]': 'id'}})
-@Injectable()
-class DirectiveUpdatingHostProperties {
-  id: string;
-
-  constructor() { this.id = "one"; }
-}
-
-@Directive({selector: '[update-host-actions]', host: {'@setAttr': 'setAttribute'}})
-@Injectable()
-class DirectiveUpdatingHostActions {
-  setAttr: EventEmitter;
-
-  constructor() { this.setAttr = new EventEmitter(); }
-
-  triggerSetAttr(attrValue) { ObservableWrapper.callNext(this.setAttr, ["key", attrValue]); }
-}
-
-@Directive({selector: '[listener]', host: {'(event)': 'onEvent($event)'}})
-@Injectable()
-class DirectiveListeningEvent {
-  msg: string;
-
-  constructor() { this.msg = ''; }
-
-  onEvent(msg: string) { this.msg = msg; }
-}
-
-@Directive({
-  selector: '[listener]',
-  host: {
-    '(domEvent)': 'onEvent($event.type)',
-    '(window:domEvent)': 'onWindowEvent($event.type)',
-    '(document:domEvent)': 'onDocumentEvent($event.type)',
-    '(body:domEvent)': 'onBodyEvent($event.type)'
-  }
-})
-@Injectable()
-class DirectiveListeningDomEvent {
-  eventType: string;
-  constructor() { this.eventType = ''; }
-  onEvent(eventType: string) { this.eventType = eventType; }
-  onWindowEvent(eventType: string) { this.eventType = "window_" + eventType; }
-  onDocumentEvent(eventType: string) { this.eventType = "document_" + eventType; }
-  onBodyEvent(eventType: string) { this.eventType = "body_" + eventType; }
-}
-
-var globalCounter = 0;
-@Directive({selector: '[listenerother]', host: {'(window:domEvent)': 'onEvent($event.type)'}})
-@Injectable()
-class DirectiveListeningDomEventOther {
-  eventType: string;
-  counter: int;
-  constructor() { this.eventType = ''; }
-  onEvent(eventType: string) {
-    globalCounter++;
-    this.eventType = "other_" + eventType;
-  }
-}
-
-@Directive({selector: '[listenerprevent]', host: {'(click)': 'onEvent($event)'}})
-@Injectable()
-class DirectiveListeningDomEventPrevent {
-  onEvent(event) { return false; }
-}
-
-@Directive({selector: '[listenernoprevent]', host: {'(click)': 'onEvent($event)'}})
-@Injectable()
-class DirectiveListeningDomEventNoPrevent {
-  onEvent(event) { return true; }
-}
-
-@Directive({selector: '[id]', properties: ['id']})
-@Injectable()
-class IdDir {
-  id: string;
-}
-
-@Directive({selector: '[static]'})
-@Injectable()
-class NeedsAttribute {
-  typeAttribute;
-  titleAttribute;
-  fooAttribute;
-  constructor(@Attribute('type') typeAttribute: String, @Attribute('title') titleAttribute: String,
-              @Attribute('foo') fooAttribute: String) {
-    this.typeAttribute = typeAttribute;
-    this.titleAttribute = titleAttribute;
-    this.fooAttribute = fooAttribute;
-  }
-}
-
-@Directive({selector: '[public-api]'})
-@Injectable()
-class PublicApi {
-}
-
-@Directive({selector: '[private-impl]'})
-@Injectable()
-class PrivateImpl extends PublicApi {
-}
-
-@Directive({selector: '[needs-public-api]'})
-@Injectable()
-class NeedsPublicApi {
-  constructor(@Parent() api: PublicApi) { expect(api instanceof PrivateImpl).toBe(true); }
-}
-
-@Directive({selector: '[toolbarpart]'})
-@Injectable()
-class ToolbarPart {
-  protoViewRef: ProtoViewRef;
-  elementRef: ElementRef;
-  constructor(protoViewRef: ProtoViewRef, elementRef: ElementRef) {
-    this.elementRef = elementRef;
-    this.protoViewRef = protoViewRef;
-  }
-}
-
-@Directive({selector: '[toolbar-vc]', properties: ['toolbarVc']})
-@Injectable()
-class ToolbarViewContainer {
-  vc: ViewContainerRef;
-  constructor(vc: ViewContainerRef) { this.vc = vc; }
-
-  set toolbarVc(part: ToolbarPart) {
-    var view = this.vc.create(part.protoViewRef, 0, part.elementRef);
-    view.setLocal('toolbarProp', 'From toolbar');
-  }
-}
-
-@Component({selector: 'toolbar'})
-@View({
-  template: 'TOOLBAR(<div *ng-for="var part of query" [toolbar-vc]="part"></div>)',
-  directives: [ToolbarViewContainer, NgFor]
-})
-@Injectable()
-class ToolbarComponent {
-  query: QueryList<ToolbarPart>;
-  ctxProp: string;
-
-  constructor(@Query(ToolbarPart) query: QueryList<ToolbarPart>) {
-    this.ctxProp = 'hello world';
-    this.query = query;
-  }
-}
-
-@Directive({selector: '[two-way]', properties: ['value: control'], events: ['control']})
-@Injectable()
-class DirectiveWithTwoWayBinding {
-  control: EventEmitter;
-  value: any;
-
-  constructor() { this.control = new EventEmitter(); }
-
-  triggerChange(value) { ObservableWrapper.callNext(this.control, value); }
-}
-
-@Injectable()
-class InjectableService {
-}
-
-@Directive({selector: 'directive-providing-injectable', hostInjector: [InjectableService]})
-@Injectable()
-class DirectiveProvidingInjectable {
-}
-
-@Component({selector: 'directive-providing-injectable', viewInjector: [InjectableService]})
-@View({template: ''})
-@Injectable()
-class DirectiveProvidingInjectableInView {
-}
-
-@Component({
-  selector: 'directive-providing-injectable',
-  hostInjector: [new Binding(InjectableService, {toValue: 'host'})],
-  viewInjector: [new Binding(InjectableService, {toValue: 'view'})]
-})
-@View({template: ''})
-@Injectable()
-class DirectiveProvidingInjectableInHostAndView {
-}
-
-
-@Component({selector: 'directive-consuming-injectable'})
-@View({template: ''})
-@Injectable()
-class DirectiveConsumingInjectable {
-  injectable;
-
-  constructor(@Ancestor() @Inject(InjectableService) injectable) { this.injectable = injectable; }
-}
-
-
-
-@Component({selector: 'directive-containing-directive-consuming-an-injectable'})
-@Injectable()
-class DirectiveContainingDirectiveConsumingAnInjectable {
-  directive;
-}
-
-@Component({selector: 'directive-consuming-injectable-unbounded'})
-@View({template: ''})
-@Injectable()
-class DirectiveConsumingInjectableUnbounded {
-  injectable;
-
-  constructor(@Unbounded() injectable: InjectableService,
-              @Ancestor() parent: DirectiveContainingDirectiveConsumingAnInjectable) {
-    this.injectable = injectable;
-    parent.directive = this;
-  }
-}
-
-
-@CONST()
-class EventBus {
-  parentEventBus: EventBus;
-  name: string;
-
-  constructor(parentEventBus: EventBus, name: string) {
-    this.parentEventBus = parentEventBus;
-    this.name = name;
-  }
-}
-
-@Directive({
-  selector: 'grand-parent-providing-event-bus',
-  hostInjector: [new Binding(EventBus, {toValue: new EventBus(null, "grandparent")})]
-})
-class GrandParentProvidingEventBus {
-  bus: EventBus;
-
-  constructor(bus: EventBus) { this.bus = bus; }
-}
-
-function createParentBus(peb) {
-  return new EventBus(peb, "parent");
-}
-
-@Component({
-  selector: 'parent-providing-event-bus',
-  hostInjector: [
-    new Binding(EventBus,
-                {toFactory: createParentBus, deps: [[EventBus, new visAnn.Unbounded()]]})
-  ]
-})
-@View({
-  directives: [forwardRef(() => ChildConsumingEventBus)],
-  template: `
-    <child-consuming-event-bus></child-consuming-event-bus>
-  `
-})
-class ParentProvidingEventBus {
-  bus: EventBus;
-  grandParentBus: EventBus;
-
-  constructor(bus: EventBus, @Unbounded() grandParentBus: EventBus) {
-    this.bus = bus;
-    this.grandParentBus = grandParentBus;
-  }
-}
-
-@Directive({selector: 'child-consuming-event-bus'})
-class ChildConsumingEventBus {
-  bus: EventBus;
-
-  constructor(@Unbounded() bus: EventBus) { this.bus = bus; }
-}
-
-@Directive({selector: '[some-impvp]', properties: ['someImpvp']})
-@Injectable()
-class SomeImperativeViewport {
-  view: ViewRef;
-  anchor;
-  constructor(public vc: ViewContainerRef, public protoView: ProtoViewRef,
-              public renderer: DomRenderer, @Inject(ANCHOR_ELEMENT) anchor) {
-    this.view = null;
-    this.anchor = anchor;
-  }
-
-  set someImpvp(value: boolean) {
-    if (isPresent(this.view)) {
-      this.vc.clear();
-      this.view = null;
-    }
-    if (value) {
-      this.view = this.vc.create(this.protoView);
-      var nodes = this.renderer.getRootNodes(this.view.render);
-      for (var i = 0; i < nodes.length; i++) {
-        DOM.appendChild(this.anchor, nodes[i]);
-      }
-    }
-  }
-}
-
-@Directive({selector: '[export-dir]', exportAs: 'dir'})
-class ExportDir {
-}
-
-@Component({selector: 'comp'})
-class ComponentWithoutView {
-}
-
-@Directive({selector: '[no-duplicate]'})
-class DuplicateDir {
-  constructor(renderer: DomRenderer, private elRef: ElementRef) {
-    DOM.setText(elRef.nativeElement, DOM.getText(elRef.nativeElement) + 'noduplicate');
-  }
-}
-
-@Directive({selector: '[no-duplicate]'})
-class OtherDuplicateDir {
-  constructor(renderer: DomRenderer, private elRef: ElementRef) {
-    DOM.setText(elRef.nativeElement, DOM.getText(elRef.nativeElement) + 'othernoduplicate');
-  }
-}
diff --git a/modules/angular2/test/core/compiler/proto_view_factory_spec.ts b/modules/angular2/test/core/compiler/proto_view_factory_spec.ts
deleted file mode 100644
index ea5141c03ff6..000000000000
--- a/modules/angular2/test/core/compiler/proto_view_factory_spec.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  xdescribe,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  it,
-  SpyObject,
-  proxy
-} from 'angular2/test_lib';
-
-import {isBlank, IMPLEMENTS, stringify} from 'angular2/src/facade/lang';
-import {MapWrapper} from 'angular2/src/facade/collection';
-
-import {ChangeDetection, ChangeDetectorDefinition} from 'angular2/change_detection';
-import {
-  ProtoViewFactory,
-  getChangeDetectorDefinitions,
-  createDirectiveVariableBindings,
-  createVariableLocations
-} from 'angular2/src/core/compiler/proto_view_factory';
-import {Component, Directive} from 'angular2/annotations';
-import {Key} from 'angular2/di';
-import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
-import {DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
-import * as renderApi from 'angular2/src/render/api';
-
-export function main() {
-  // TODO(tbosch): add missing tests
-
-  describe('ProtoViewFactory', () => {
-    var changeDetection;
-    var protoViewFactory;
-    var directiveResolver;
-
-    beforeEach(() => {
-      directiveResolver = new DirectiveResolver();
-      changeDetection = new ChangeDetectionSpy();
-      protoViewFactory = new ProtoViewFactory(changeDetection);
-    });
-
-    function bindDirective(type) {
-      return DirectiveBinding.createFromType(type, directiveResolver.resolve(type));
-    }
-
-    describe('getChangeDetectorDefinitions', () => {
-
-      it('should create a ChangeDetectorDefinition for the root render proto view', () => {
-        var renderPv = createRenderProtoView();
-        var defs =
-            getChangeDetectorDefinitions(bindDirective(MainComponent).metadata, renderPv, []);
-        expect(defs.length).toBe(1);
-        expect(defs[0].id).toEqual(`${stringify(MainComponent)}_comp_0`);
-      });
-
-    });
-
-    describe('createAppProtoViews', () => {
-
-      it('should create an AppProtoView for the root render proto view', () => {
-        var renderPv = createRenderProtoView();
-        var pvs = protoViewFactory.createAppProtoViews(bindDirective(MainComponent), renderPv, []);
-        expect(pvs.length).toBe(1);
-        expect(pvs[0].render).toBe(renderPv.render);
-      });
-    });
-
-    describe("createDirectiveVariableBindings", () => {
-      it("should calculate directive variable bindings", () => {
-        var dvbs = createDirectiveVariableBindings(
-            new renderApi.ElementBinder(
-                {variableBindings: MapWrapper.createFromStringMap({"exportName": "templateName"})}),
-            [
-              directiveBinding(
-                  {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}),
-              directiveBinding(
-                  {metadata: renderApi.DirectiveMetadata.create({exportAs: 'otherName'})})
-            ]);
-
-        expect(dvbs).toEqual(MapWrapper.createFromStringMap({"templateName": 0}));
-      });
-
-      it("should set exportAs to $implicit for component with exportAs = null", () => {
-        var dvbs = createDirectiveVariableBindings(
-            new renderApi.ElementBinder(
-                {variableBindings: MapWrapper.createFromStringMap({"$implicit": "templateName"})}),
-            [
-              directiveBinding({
-                metadata: renderApi.DirectiveMetadata.create(
-                    {exportAs: null, type: renderApi.DirectiveMetadata.COMPONENT_TYPE})
-              })
-            ]);
-
-        expect(dvbs).toEqual(MapWrapper.createFromStringMap({"templateName": 0}));
-      });
-
-      it("should throw we no directive exported with this name", () => {
-        expect(() => {
-          createDirectiveVariableBindings(
-              new renderApi.ElementBinder({
-                variableBindings:
-                    MapWrapper.createFromStringMap({"someInvalidName": "templateName"})
-              }),
-              [
-                directiveBinding(
-                    {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})})
-              ]);
-        }).toThrowError(new RegExp("Cannot find directive with exportAs = 'someInvalidName'"));
-      });
-
-      it("should throw when binding to a name exported by two directives", () => {
-        expect(() => {
-          createDirectiveVariableBindings(
-              new renderApi.ElementBinder({
-                variableBindings: MapWrapper.createFromStringMap({"exportName": "templateName"})
-              }),
-              [
-                directiveBinding(
-                    {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}),
-                directiveBinding(
-                    {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})})
-              ]);
-        }).toThrowError(new RegExp("More than one directive have exportAs = 'exportName'"));
-      });
-
-      it("should not throw when not binding to a name exported by two directives", () => {
-        expect(() => {
-          createDirectiveVariableBindings(
-              new renderApi.ElementBinder({variableBindings: new Map()}), [
-                directiveBinding(
-                    {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}),
-                directiveBinding(
-                    {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})})
-              ]);
-        }).not.toThrow();
-      });
-    });
-
-    describe('createVariableLocations', () => {
-      it('should merge the names in the template for all ElementBinders', () => {
-        expect(createVariableLocations([
-          new renderApi.ElementBinder(
-              {variableBindings: MapWrapper.createFromStringMap({"x": "a"})}),
-          new renderApi.ElementBinder(
-              {variableBindings: MapWrapper.createFromStringMap({"y": "b"})})
-
-        ])).toEqual(MapWrapper.createFromStringMap({'a': 0, 'b': 1}));
-      });
-    });
-  });
-}
-
-function directiveBinding({metadata}: {metadata?: any} = {}) {
-  return new DirectiveBinding(Key.get("dummy"), null, [], [], [], metadata);
-}
-
-function createRenderProtoView(elementBinders = null, type: renderApi.ViewType = null) {
-  if (isBlank(type)) {
-    type = renderApi.ViewType.COMPONENT;
-  }
-  if (isBlank(elementBinders)) {
-    elementBinders = [];
-  }
-  return new renderApi.ProtoViewDto(
-      {elementBinders: elementBinders, type: type, variableBindings: new Map()});
-}
-
-function createRenderComponentElementBinder(directiveIndex) {
-  return new renderApi.ElementBinder(
-      {directives: [new renderApi.DirectiveBinder({directiveIndex: directiveIndex})]});
-}
-
-function createRenderViewportElementBinder(nestedProtoView) {
-  return new renderApi.ElementBinder({nestedProtoView: nestedProtoView});
-}
-
-@proxy
-@IMPLEMENTS(ChangeDetection)
-class ChangeDetectionSpy extends SpyObject {
-  constructor() { super(ChangeDetection); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-@Component({selector: 'main-comp'})
-class MainComponent {
-}
diff --git a/modules/angular2/test/core/compiler/query_integration_spec.ts b/modules/angular2/test/core/compiler/query_integration_spec.ts
deleted file mode 100644
index f11598b61481..000000000000
--- a/modules/angular2/test/core/compiler/query_integration_spec.ts
+++ /dev/null
@@ -1,344 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-  TestComponentBuilder,
-  asNativeElements
-} from 'angular2/test_lib';
-
-
-import {Injectable, Optional} from 'angular2/di';
-import {QueryList} from 'angular2/core';
-import {Query, Component, Directive, View} from 'angular2/annotations';
-
-import {NgIf, NgFor} from 'angular2/angular2';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-
-export function main() {
-  BrowserDomAdapter.makeCurrent();
-  describe('Query API', () => {
-
-    describe("querying by directive type", () => {
-      it('should contain all direct child directives in the light dom',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div text="1"></div>' +
-                          '<needs-query text="2"><div text="3">' +
-                          '<div text="too-deep"></div>' +
-                          '</div></needs-query>' +
-                          '<div text="4"></div>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-                 view.detectChanges();
-
-                 expect(asNativeElements(view.componentViewChildren)).toHaveText('2|3|');
-
-                 async.done();
-               });
-         }));
-
-      it('should contain all directives in the light dom when descendants flag is used',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div text="1"></div>' +
-                          '<needs-query-desc text="2"><div text="3">' +
-                          '<div text="4"></div>' +
-                          '</div></needs-query-desc>' +
-                          '<div text="5"></div>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-                 view.detectChanges();
-                 expect(asNativeElements(view.componentViewChildren)).toHaveText('2|3|4|');
-
-                 async.done();
-               });
-         }));
-
-      it('should contain all directives in the light dom',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div text="1"></div>' +
-                          '<needs-query text="2"><div text="3"></div></needs-query>' +
-                          '<div text="4"></div>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-                 view.detectChanges();
-                 expect(asNativeElements(view.componentViewChildren)).toHaveText('2|3|');
-
-                 async.done();
-               });
-         }));
-
-      it('should reflect dynamically inserted directives',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template =
-               '<div text="1"></div>' +
-               '<needs-query text="2"><div *ng-if="shouldShow" [text]="\'3\'"></div></needs-query>' +
-               '<div text="4"></div>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-
-                 view.detectChanges();
-                 expect(asNativeElements(view.componentViewChildren)).toHaveText('2|');
-
-                 view.componentInstance.shouldShow = true;
-                 view.detectChanges();
-                 expect(asNativeElements(view.componentViewChildren)).toHaveText('2|3|');
-
-                 async.done();
-               });
-         }));
-
-      it('should reflect moved directives',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template =
-               '<div text="1"></div>' +
-               '<needs-query text="2"><div *ng-for="var i of list" [text]="i"></div></needs-query>' +
-               '<div text="4"></div>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-                 view.detectChanges();
-
-                 expect(asNativeElements(view.componentViewChildren)).toHaveText('2|1d|2d|3d|');
-
-                 view.componentInstance.list = ['3d', '2d'];
-                 view.detectChanges();
-                 view.detectChanges();
-                 expect(asNativeElements(view.componentViewChildren)).toHaveText('2|3d|2d|');
-
-                 async.done();
-               });
-         }));
-    });
-
-    describe("onChange", () => {
-      it('should notify query on change',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<needs-query #q>' +
-                          '<div text="1"></div>' +
-                          '<div *ng-if="shouldShow" text="2"></div>' +
-                          '</needs-query>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-                 var q = view.componentViewChildren[0].getLocal("q");
-                 view.detectChanges();
-
-                 q.query.onChange(() => {
-                   expect(q.query.first.text).toEqual("1");
-                   expect(q.query.last.text).toEqual("2");
-                   async.done();
-                 });
-
-                 view.componentInstance.shouldShow = true;
-                 view.detectChanges();
-               });
-         }));
-
-      it("should notify child's query before notifying parent's query",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<needs-query-desc #q1>' +
-                          '<needs-query-desc #q2>' +
-                          '<div text="1"></div>' +
-                          '</needs-query-desc>' +
-                          '</needs-query-desc>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-                 var q1 = view.componentViewChildren[0].getLocal("q1");
-                 var q2 = view.componentViewChildren[0].getLocal("q2");
-
-                 var firedQ2 = false;
-
-                 q2.query.onChange(() => { firedQ2 = true; });
-                 q1.query.onChange(() => {
-                   expect(firedQ2).toBe(true);
-                   async.done();
-                 });
-
-                 view.detectChanges();
-               });
-         }));
-    });
-
-    describe("querying by var binding", () => {
-      it('should contain all the child directives in the light dom with the given var binding',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template =
-               '<needs-query-by-var-binding #q>' +
-               '<div *ng-for="#item of list" [text]="item" #text-label="textDir"></div>' +
-               '</needs-query-by-var-binding>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-                 var q = view.componentViewChildren[0].getLocal("q");
-
-                 view.componentInstance.list = ['1d', '2d'];
-
-                 view.detectChanges();
-
-                 expect(q.query.first.text).toEqual("1d");
-                 expect(q.query.last.text).toEqual("2d");
-
-                 async.done();
-               });
-         }));
-
-      it('should support querying by multiple var bindings',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<needs-query-by-var-bindings #q>' +
-                          '<div text="one" #text-label1="textDir"></div>' +
-                          '<div text="two" #text-label2="textDir"></div>' +
-                          '</needs-query-by-var-bindings>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-                 var q = view.componentViewChildren[0].getLocal("q");
-                 view.detectChanges();
-
-                 expect(q.query.first.text).toEqual("one");
-                 expect(q.query.last.text).toEqual("two");
-
-                 async.done();
-               });
-         }));
-
-      it('should reflect dynamically inserted directives',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template =
-               '<needs-query-by-var-binding #q>' +
-               '<div *ng-for="#item of list" [text]="item" #text-label="textDir"></div>' +
-               '</needs-query-by-var-binding>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-                 var q = view.componentViewChildren[0].getLocal("q");
-
-                 view.componentInstance.list = ['1d', '2d'];
-
-                 view.detectChanges();
-
-                 view.componentInstance.list = ['2d', '1d'];
-
-                 view.detectChanges();
-
-                 expect(q.query.last.text).toEqual("1d");
-
-                 async.done();
-               });
-         }));
-
-      it('should contain all the elements in the light dom with the given var binding',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<needs-query-by-var-binding #q>' +
-                          '<div template="ng-for: #item of list">' +
-                          '<div #text-label>{{item}}</div>' +
-                          '</div>' +
-                          '</needs-query-by-var-binding>';
-
-           tcb.overrideTemplate(MyComp, template)
-               .createAsync(MyComp)
-               .then((view) => {
-                 var q = view.componentViewChildren[0].getLocal("q");
-
-                 view.componentInstance.list = ['1d', '2d'];
-
-                 view.detectChanges();
-
-                 expect(q.query.first.nativeElement).toHaveText("1d");
-                 expect(q.query.last.nativeElement).toHaveText("2d");
-
-                 async.done();
-               });
-         }));
-    });
-  });
-}
-
-@Directive({selector: '[text]', properties: ['text'], exportAs: 'textDir'})
-@Injectable()
-class TextDirective {
-  text: string;
-  constructor() {}
-}
-
-@Component({selector: 'needs-query'})
-@View({directives: [NgFor], template: '<div *ng-for="var dir of query">{{dir.text}}|</div>'})
-@Injectable()
-class NeedsQuery {
-  query: QueryList<TextDirective>;
-  constructor(@Query(TextDirective) query: QueryList<TextDirective>) { this.query = query; }
-}
-
-@Component({selector: 'needs-query-desc'})
-@View({directives: [NgFor], template: '<div *ng-for="var dir of query">{{dir.text}}|</div>'})
-@Injectable()
-class NeedsQueryDesc {
-  query: QueryList<TextDirective>;
-  constructor(@Query(TextDirective, {descendants: true}) query: QueryList<TextDirective>) {
-    this.query = query;
-  }
-}
-
-@Component({selector: 'needs-query-by-var-binding'})
-@View({directives: [], template: '<content>'})
-@Injectable()
-class NeedsQueryByLabel {
-  query: QueryList<any>;
-  constructor(@Query("textLabel", {descendants: true}) query: QueryList<any>) {
-    this.query = query;
-  }
-}
-
-@Component({selector: 'needs-query-by-var-bindings'})
-@View({directives: [], template: '<content>'})
-@Injectable()
-class NeedsQueryByTwoLabels {
-  query: QueryList<any>;
-  constructor(@Query("textLabel1,textLabel2", {descendants: true}) query: QueryList<any>) {
-    this.query = query;
-  }
-}
-
-@Component({selector: 'my-comp'})
-@View({
-  directives: [
-    NeedsQuery,
-    NeedsQueryDesc,
-    NeedsQueryByLabel,
-    NeedsQueryByTwoLabels,
-    TextDirective,
-    NgIf,
-    NgFor
-  ]
-})
-@Injectable()
-class MyComp {
-  shouldShow: boolean;
-  list;
-  constructor() {
-    this.shouldShow = false;
-    this.list = ['1d', '2d', '3d'];
-  }
-}
diff --git a/modules/angular2/test/core/compiler/query_list_spec.ts b/modules/angular2/test/core/compiler/query_list_spec.ts
deleted file mode 100644
index 2d26b2126a8a..000000000000
--- a/modules/angular2/test/core/compiler/query_list_spec.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import {describe, it, expect, beforeEach, ddescribe, iit, xit, el} from 'angular2/test_lib';
-
-import {List, MapWrapper, ListWrapper, iterateListLike} from 'angular2/src/facade/collection';
-import {QueryList} from 'angular2/src/core/compiler/query_list';
-
-
-export function main() {
-  describe('QueryList', () => {
-    var queryList, log;
-    beforeEach(() => {
-      queryList = new QueryList();
-      log = '';
-    });
-
-    function logAppend(item) { log += (log.length == 0 ? '' : ', ') + item; }
-
-    it('should support adding objects and iterating over them', () => {
-      queryList.add('one');
-      queryList.add('two');
-      iterateListLike(queryList, logAppend);
-      expect(log).toEqual('one, two');
-    });
-
-    it('should support resetting and iterating over the new objects', () => {
-      queryList.add('one');
-      queryList.add('two');
-      queryList.reset(['one again']);
-      queryList.add('two again');
-      iterateListLike(queryList, logAppend);
-      expect(log).toEqual('one again, two again');
-    });
-
-    it('should support length', () => {
-      queryList.add('one');
-      queryList.add('two');
-      expect(queryList.length).toEqual(2);
-    });
-
-    it('should support first and last', () => {
-      queryList.add('one');
-      queryList.add('two');
-      queryList.add('three');
-      expect(queryList.first).toEqual('one');
-      expect(queryList.last).toEqual('three');
-    });
-
-    describe('simple observable interface', () => {
-      it('should fire callbacks on change', () => {
-        var fires = 0;
-        queryList.onChange(() => { fires += 1; });
-
-        queryList.fireCallbacks();
-        expect(fires).toEqual(0);
-
-        queryList.add('one');
-
-        queryList.fireCallbacks();
-        expect(fires).toEqual(1);
-
-        queryList.fireCallbacks();
-        expect(fires).toEqual(1);
-      });
-
-      it('should support removing callbacks', () => {
-        var fires = 0;
-        var callback = () => fires += 1;
-        queryList.onChange(callback);
-
-        queryList.add('one');
-        queryList.fireCallbacks();
-        expect(fires).toEqual(1);
-
-        queryList.removeCallback(callback);
-
-        queryList.add('two');
-        queryList.fireCallbacks();
-        expect(fires).toEqual(1);
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/core/compiler/view_container_ref_spec.ts b/modules/angular2/test/core/compiler/view_container_ref_spec.ts
deleted file mode 100644
index 4ac6c95fb06d..000000000000
--- a/modules/angular2/test/core/compiler/view_container_ref_spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  beforeEachBindings,
-  it,
-  xit,
-  SpyObject,
-  proxy
-} from 'angular2/test_lib';
-
-import {IMPLEMENTS} from 'angular2/src/facade/lang';
-
-import {AppView, AppProtoView, AppViewContainer} from 'angular2/src/core/compiler/view';
-import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
-import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {ElementBinder} from 'angular2/src/core/compiler/element_binder';
-
-export function main() {
-  // TODO(tbosch): add missing tests
-
-  describe('ViewContainerRef', () => {
-    var location;
-    var view;
-    var viewManager;
-
-    function createProtoView() {
-      var pv = new AppProtoView(null, null, null, null);
-      pv.elementBinders = [new ElementBinder(0, null, 0, null, null)];
-      return pv;
-    }
-
-    function createView() { return new AppView(null, createProtoView(), new Map()); }
-
-    function createViewContainer() { return new ViewContainerRef(viewManager, location); }
-
-    beforeEach(() => {
-      viewManager = new AppViewManagerSpy();
-      view = createView();
-      view.viewContainers = [null];
-      location = view.elementRefs[0];
-    });
-
-    describe('length', () => {
-
-      it('should return a 0 length if there is no underlying ViewContainerRef', () => {
-        var vc = createViewContainer();
-        expect(vc.length).toBe(0);
-      });
-
-      it('should return the size of the underlying ViewContainerRef', () => {
-        var vc = createViewContainer();
-        view.viewContainers = [new AppViewContainer()];
-        view.viewContainers[0].views = [createView()];
-        expect(vc.length).toBe(1);
-      });
-
-    });
-
-    // TODO: add missing tests here!
-
-  });
-}
-
-@proxy
-@IMPLEMENTS(AppViewManager)
-class AppViewManagerSpy extends SpyObject {
-  constructor() { super(AppViewManager); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
diff --git a/modules/angular2/test/core/compiler/view_manager_spec.ts b/modules/angular2/test/core/compiler/view_manager_spec.ts
deleted file mode 100644
index 014d53149649..000000000000
--- a/modules/angular2/test/core/compiler/view_manager_spec.ts
+++ /dev/null
@@ -1,450 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  beforeEachBindings,
-  it,
-  xit,
-  SpyObject,
-  proxy
-} from 'angular2/test_lib';
-import {Injector, bind} from 'angular2/di';
-import {IMPLEMENTS, isBlank, isPresent} from 'angular2/src/facade/lang';
-import {MapWrapper, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-
-import {AppProtoView, AppView, AppViewContainer} from 'angular2/src/core/compiler/view';
-import {ProtoViewRef, ViewRef, internalView} from 'angular2/src/core/compiler/view_ref';
-import {Renderer, RenderViewRef, RenderProtoViewRef} from 'angular2/src/render/api';
-import {ElementBinder} from 'angular2/src/core/compiler/element_binder';
-import {DirectiveBinding, ElementInjector} from 'angular2/src/core/compiler/element_injector';
-import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
-import {Component} from 'angular2/annotations';
-import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
-import {AppViewListener} from 'angular2/src/core/compiler/view_listener';
-import {AppViewPool} from 'angular2/src/core/compiler/view_pool';
-
-export function main() {
-  // TODO(tbosch): add missing tests
-
-  describe('AppViewManager', () => {
-    var renderer;
-    var utils;
-    var viewListener;
-    var viewPool;
-    var manager;
-    var directiveResolver;
-    var createdViews: any[];
-    var createdRenderViews: any[];
-
-    function wrapPv(protoView: AppProtoView): ProtoViewRef { return new ProtoViewRef(protoView); }
-
-    function wrapView(view: AppView): ViewRef { return new ViewRef(view); }
-
-    function elementRef(parentView, boundElementIndex) {
-      return parentView.elementRefs[boundElementIndex];
-    }
-
-    function createDirectiveBinding(type) {
-      var annotation = directiveResolver.resolve(type);
-      return DirectiveBinding.createFromType(type, annotation);
-    }
-
-    function createEmptyElBinder() { return new ElementBinder(0, null, 0, null, null); }
-
-    function createComponentElBinder(nestedProtoView = null) {
-      var binding = createDirectiveBinding(SomeComponent);
-      var binder = new ElementBinder(0, null, 0, null, binding);
-      binder.nestedProtoView = nestedProtoView;
-      return binder;
-    }
-
-    function createProtoView(binders = null) {
-      if (isBlank(binders)) {
-        binders = [];
-      }
-      var staticChildComponentCount = 0;
-      for (var i = 0; i < binders.length; i++) {
-        if (binders[i].hasStaticComponent()) {
-          staticChildComponentCount++;
-        }
-      }
-      var res = new AppProtoView(new MockProtoViewRef(staticChildComponentCount), null, null, null);
-      res.elementBinders = binders;
-      return res;
-    }
-
-    function createElementInjector() {
-      return SpyObject.stub(new SpyElementInjector(),
-                            {
-                              'isExportingComponent': false,
-                              'isExportingElement': false,
-                              'getEventEmitterAccessors': [],
-                              'getComponent': null
-                            },
-                            {});
-    }
-
-    function createView(pv = null, renderViewRef = null) {
-      if (isBlank(pv)) {
-        pv = createProtoView();
-      }
-      if (isBlank(renderViewRef)) {
-        renderViewRef = new RenderViewRef();
-      }
-      var view = new AppView(renderer, pv, new Map());
-      view.render = renderViewRef;
-      var elementInjectors = ListWrapper.createFixedSize(pv.elementBinders.length);
-      for (var i = 0; i < pv.elementBinders.length; i++) {
-        elementInjectors[i] = createElementInjector();
-      }
-      view.init(null, elementInjectors, [], ListWrapper.createFixedSize(pv.elementBinders.length),
-                ListWrapper.createFixedSize(pv.elementBinders.length));
-      return view;
-    }
-
-    beforeEach(() => {
-      directiveResolver = new DirectiveResolver();
-      renderer = new SpyRenderer();
-      utils = new SpyAppViewManagerUtils();
-      viewListener = new SpyAppViewListener();
-      viewPool = new SpyAppViewPool();
-      manager = new AppViewManager(viewPool, viewListener, utils, renderer);
-      createdViews = [];
-      createdRenderViews = [];
-
-      utils.spy('createView')
-          .andCallFake((proto, renderViewRef, _a, _b) => {
-            var view = createView(proto, renderViewRef);
-            createdViews.push(view);
-            return view;
-          });
-      utils.spy('attachComponentView')
-          .andCallFake((hostView, elementIndex, childView) => {
-            hostView.componentChildViews[elementIndex] = childView;
-          });
-      utils.spy('attachViewInContainer')
-          .andCallFake((parentView, elementIndex, _a, _b, atIndex, childView) => {
-            var viewContainer = parentView.viewContainers[elementIndex];
-            if (isBlank(viewContainer)) {
-              viewContainer = new AppViewContainer();
-              parentView.viewContainers[elementIndex] = viewContainer;
-            }
-            ListWrapper.insert(viewContainer.views, atIndex, childView);
-          });
-      renderer.spy('createRootHostView')
-          .andCallFake((_b, _c) => {
-            var rv = new RenderViewRef();
-            createdRenderViews.push(rv);
-            return rv;
-          });
-      renderer.spy('createView')
-          .andCallFake((_a) => {
-            var rv = new RenderViewRef();
-            createdRenderViews.push(rv);
-            return rv;
-          });
-      viewPool.spy('returnView').andReturn(true);
-    });
-
-    describe('static child components', () => {
-
-      describe('recursively create when not cached', () => {
-        var rootProtoView, hostProtoView, componentProtoView, hostView, componentView;
-        beforeEach(() => {
-          componentProtoView = createProtoView();
-          hostProtoView = createProtoView([createComponentElBinder(componentProtoView)]);
-          rootProtoView = createProtoView([createComponentElBinder(hostProtoView)]);
-          manager.createRootHostView(wrapPv(rootProtoView), null, null);
-          hostView = createdViews[1];
-          componentView = createdViews[2];
-        });
-
-        it('should create the view', () => {
-          expect(hostView.proto).toBe(hostProtoView);
-          expect(componentView.proto).toBe(componentProtoView);
-        });
-
-        it('should hydrate the view', () => {
-          expect(utils.spy('hydrateComponentView')).toHaveBeenCalledWith(hostView, 0);
-          expect(renderer.spy('hydrateView')).toHaveBeenCalledWith(componentView.render);
-        });
-
-        it('should set the render view',
-           () => {expect(componentView.render).toBe(createdRenderViews[2])});
-
-        it('should set the event dispatcher', () => {
-          expect(renderer.spy('setEventDispatcher'))
-              .toHaveBeenCalledWith(componentView.render, componentView);
-        });
-      });
-
-      describe('recursively hydrate when getting from from the cache',
-               () => {
-                   // TODO(tbosch): implement this
-               });
-
-      describe('recursively dehydrate', () => {
-                                            // TODO(tbosch): implement this
-                                        });
-
-    });
-
-    describe('createRootHostView', () => {
-
-      var hostProtoView;
-      beforeEach(() => { hostProtoView = createProtoView([createComponentElBinder(null)]); });
-
-      it('should create the view', () => {
-        expect(internalView(manager.createRootHostView(wrapPv(hostProtoView), null, null)))
-            .toBe(createdViews[0]);
-        expect(createdViews[0].proto).toBe(hostProtoView);
-        expect(viewListener.spy('viewCreated')).toHaveBeenCalledWith(createdViews[0]);
-      });
-
-      it('should hydrate the view', () => {
-        var injector = Injector.resolveAndCreate([]);
-        manager.createRootHostView(wrapPv(hostProtoView), null, injector);
-        expect(utils.spy('hydrateRootHostView')).toHaveBeenCalledWith(createdViews[0], injector);
-        expect(renderer.spy('hydrateView')).toHaveBeenCalledWith(createdViews[0].render);
-      });
-
-      it('should create and set the render view using the component selector', () => {
-        manager.createRootHostView(wrapPv(hostProtoView), null, null)
-            expect(renderer.spy('createRootHostView'))
-                .toHaveBeenCalledWith(hostProtoView.render, 'someComponent');
-        expect(createdViews[0].render).toBe(createdRenderViews[0]);
-      });
-
-      it('should allow to override the selector', () => {
-        var selector = 'someOtherSelector';
-        manager.createRootHostView(wrapPv(hostProtoView), selector, null)
-            expect(renderer.spy('createRootHostView'))
-                .toHaveBeenCalledWith(hostProtoView.render, selector);
-      });
-
-      it('should set the event dispatcher', () => {
-        manager.createRootHostView(wrapPv(hostProtoView), null, null);
-        var cmpView = createdViews[0];
-        expect(renderer.spy('setEventDispatcher')).toHaveBeenCalledWith(cmpView.render, cmpView);
-      });
-
-    });
-
-
-    describe('destroyRootHostView', () => {
-      var hostProtoView, hostView, hostRenderViewRef;
-      beforeEach(() => {
-        hostProtoView = createProtoView([createComponentElBinder(null)]);
-        hostView = internalView(manager.createRootHostView(wrapPv(hostProtoView), null, null));
-        hostRenderViewRef = hostView.render;
-      });
-
-      it('should dehydrate', () => {
-        manager.destroyRootHostView(wrapView(hostView));
-        expect(utils.spy('dehydrateView')).toHaveBeenCalledWith(hostView);
-        expect(renderer.spy('dehydrateView')).toHaveBeenCalledWith(hostView.render);
-      });
-
-      it('should destroy the render view', () => {
-        manager.destroyRootHostView(wrapView(hostView));
-        expect(renderer.spy('destroyView')).toHaveBeenCalledWith(hostRenderViewRef);
-        expect(viewListener.spy('viewDestroyed')).toHaveBeenCalledWith(hostView);
-      });
-
-      it('should not return the view to the pool', () => {
-        manager.destroyRootHostView(wrapView(hostView));
-        expect(viewPool.spy('returnView')).not.toHaveBeenCalled();
-      });
-
-    });
-
-    describe('createViewInContainer', () => {
-
-      describe('basic functionality', () => {
-        var parentView, childProtoView;
-        beforeEach(() => {
-          parentView = createView(createProtoView([createEmptyElBinder()]));
-          childProtoView = createProtoView();
-        });
-
-        it('should create a ViewContainerRef if not yet existing', () => {
-          manager.createViewInContainer(elementRef(parentView, 0), 0, wrapPv(childProtoView), null);
-          expect(parentView.viewContainers[0]).toBeTruthy();
-        });
-
-        it('should create the view', () => {
-          expect(internalView(manager.createViewInContainer(elementRef(parentView, 0), 0,
-                                                            wrapPv(childProtoView), null)))
-              .toBe(createdViews[0]);
-          expect(createdViews[0].proto).toBe(childProtoView);
-          expect(viewListener.spy('viewCreated')).toHaveBeenCalledWith(createdViews[0]);
-        });
-
-        it('should attach the view', () => {
-          var contextView =
-              createView(createProtoView([createEmptyElBinder(), createEmptyElBinder()]));
-          var elRef = elementRef(parentView, 0);
-          manager.createViewInContainer(elRef, 0, wrapPv(childProtoView),
-                                        elementRef(contextView, 1), null);
-          expect(utils.spy('attachViewInContainer'))
-              .toHaveBeenCalledWith(parentView, 0, contextView, 1, 0, createdViews[0]);
-          expect(renderer.spy('attachViewInContainer'))
-              .toHaveBeenCalledWith(elRef, 0, createdViews[0].render);
-        });
-
-        it('should hydrate the view', () => {
-          var contextView =
-              createView(createProtoView([createEmptyElBinder(), createEmptyElBinder()]));
-          manager.createViewInContainer(elementRef(parentView, 0), 0, wrapPv(childProtoView),
-                                        elementRef(contextView, 1), []);
-          expect(utils.spy('hydrateViewInContainer'))
-              .toHaveBeenCalledWith(parentView, 0, contextView, 1, 0, []);
-          expect(renderer.spy('hydrateView')).toHaveBeenCalledWith(createdViews[0].render);
-        });
-
-        it('should create and set the render view', () => {
-          manager.createViewInContainer(elementRef(parentView, 0), 0, wrapPv(childProtoView), null,
-                                        null);
-          expect(renderer.spy('createView')).toHaveBeenCalledWith(childProtoView.render);
-          expect(createdViews[0].render).toBe(createdRenderViews[0]);
-        });
-
-        it('should set the event dispatcher', () => {
-          manager.createViewInContainer(elementRef(parentView, 0), 0, wrapPv(childProtoView), null,
-                                        null);
-          var childView = createdViews[0];
-          expect(renderer.spy('setEventDispatcher'))
-              .toHaveBeenCalledWith(childView.render, childView);
-        });
-
-      });
-    });
-
-    describe('destroyViewInContainer', () => {
-
-      describe('basic functionality', () => {
-        var parentView, childProtoView, childView;
-        beforeEach(() => {
-          parentView = createView(createProtoView([createEmptyElBinder()]));
-          childProtoView = createProtoView();
-          childView = internalView(manager.createViewInContainer(elementRef(parentView, 0), 0,
-                                                                 wrapPv(childProtoView), null));
-        });
-
-        it('should dehydrate', () => {
-          manager.destroyViewInContainer(elementRef(parentView, 0), 0);
-          expect(utils.spy('dehydrateView'))
-              .toHaveBeenCalledWith(parentView.viewContainers[0].views[0]);
-          expect(renderer.spy('dehydrateView')).toHaveBeenCalledWith(childView.render);
-        });
-
-        it('should detach', () => {
-          var elRef = elementRef(parentView, 0);
-          manager.destroyViewInContainer(elRef, 0);
-          expect(utils.spy('detachViewInContainer')).toHaveBeenCalledWith(parentView, 0, 0);
-          expect(renderer.spy('detachViewInContainer'))
-              .toHaveBeenCalledWith(elRef, 0, childView.render);
-        });
-
-        it('should return the view to the pool', () => {
-          manager.destroyViewInContainer(elementRef(parentView, 0), 0);
-          expect(viewPool.spy('returnView')).toHaveBeenCalledWith(childView);
-        });
-      });
-
-      describe('recursively destroy views in ViewContainers', () => {
-        var parentView, childProtoView, childView;
-        beforeEach(() => {
-          parentView = createView(createProtoView([createEmptyElBinder()]));
-          childProtoView = createProtoView();
-          childView = internalView(manager.createViewInContainer(elementRef(parentView, 0), 0,
-                                                                 wrapPv(childProtoView), null));
-        });
-
-        it('should dehydrate', () => {
-          manager.destroyRootHostView(wrapView(parentView));
-          expect(utils.spy('dehydrateView'))
-              .toHaveBeenCalledWith(parentView.viewContainers[0].views[0]);
-          expect(renderer.spy('dehydrateView')).toHaveBeenCalledWith(childView.render);
-        });
-
-        it('should detach', () => {
-          manager.destroyRootHostView(wrapView(parentView));
-          expect(utils.spy('detachViewInContainer')).toHaveBeenCalledWith(parentView, 0, 0);
-          expect(renderer.spy('detachViewInContainer'))
-              .toHaveBeenCalledWith(parentView.elementRefs[0], 0, childView.render);
-        });
-
-        it('should return the view to the pool', () => {
-          manager.destroyRootHostView(wrapView(parentView));
-          expect(viewPool.spy('returnView')).toHaveBeenCalledWith(childView);
-        });
-
-      });
-
-    });
-
-    describe('attachViewInContainer', () => {
-
-                                      });
-
-    describe('detachViewInContainer', () => {
-
-                                      });
-  });
-}
-
-class MockProtoViewRef extends RenderProtoViewRef {
-  nestedComponentCount: number;
-  constructor(nestedComponentCount: number) {
-    super();
-    this.nestedComponentCount = nestedComponentCount;
-  }
-}
-
-@Component({selector: 'someComponent'})
-class SomeComponent {
-}
-
-@proxy
-@IMPLEMENTS(Renderer)
-class SpyRenderer extends SpyObject {
-  constructor() { super(Renderer); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-@proxy
-@IMPLEMENTS(AppViewPool)
-class SpyAppViewPool extends SpyObject {
-  constructor() { super(AppViewPool); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-@proxy
-@IMPLEMENTS(AppViewManagerUtils)
-class SpyAppViewManagerUtils extends SpyObject {
-  constructor() { super(AppViewManagerUtils); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-@proxy
-@IMPLEMENTS(AppViewListener)
-class SpyAppViewListener extends SpyObject {
-  constructor() { super(AppViewListener); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-@proxy
-@IMPLEMENTS(ElementInjector)
-class SpyElementInjector extends SpyObject {
-  constructor() { super(ElementInjector); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
diff --git a/modules/angular2/test/core/compiler/view_manager_utils_spec.ts b/modules/angular2/test/core/compiler/view_manager_utils_spec.ts
deleted file mode 100644
index abff81ccbba1..000000000000
--- a/modules/angular2/test/core/compiler/view_manager_utils_spec.ts
+++ /dev/null
@@ -1,305 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  beforeEachBindings,
-  it,
-  xit,
-  SpyObject,
-  SpyChangeDetector,
-  proxy,
-  Log
-} from 'angular2/test_lib';
-
-import {Injector, bind} from 'angular2/di';
-import {IMPLEMENTS, isBlank, isPresent} from 'angular2/src/facade/lang';
-import {MapWrapper, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-
-import {AppProtoView, AppView} from 'angular2/src/core/compiler/view';
-import {ElementBinder} from 'angular2/src/core/compiler/element_binder';
-import {
-  DirectiveBinding,
-  ElementInjector,
-  PreBuiltObjects,
-  ProtoElementInjector
-} from 'angular2/src/core/compiler/element_injector';
-import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
-import {Component} from 'angular2/annotations';
-import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
-
-export function main() {
-  // TODO(tbosch): add more tests here!
-
-  describe('AppViewManagerUtils', () => {
-
-    var directiveResolver;
-    var utils;
-
-    function createInjector() { return Injector.resolveAndCreate([]); }
-
-    function createDirectiveBinding(type) {
-      var annotation = directiveResolver.resolve(type);
-      return DirectiveBinding.createFromType(type, annotation);
-    }
-
-    function createEmptyElBinder() { return new ElementBinder(0, null, 0, null, null); }
-
-    function createComponentElBinder(nestedProtoView = null) {
-      var binding = createDirectiveBinding(SomeComponent);
-      var binder = new ElementBinder(0, null, 0, null, binding);
-      binder.nestedProtoView = nestedProtoView;
-      return binder;
-    }
-
-    function createProtoView(binders = null) {
-      if (isBlank(binders)) {
-        binders = [];
-      }
-      var res = new AppProtoView(null, null, null, null);
-      res.elementBinders = binders;
-      return res;
-    }
-
-    function createElementInjector(parent = null) {
-      var host = new SpyElementInjector();
-      var elementInjector =
-          isPresent(parent) ? new SpyElementInjectorWithParent(parent) : new SpyElementInjector();
-      return SpyObject.stub(elementInjector,
-                            {
-                              'isExportingComponent': false,
-                              'isExportingElement': false,
-                              'getEventEmitterAccessors': [],
-                              'getHostActionAccessors': [],
-                              'getComponent': null,
-                              'getHost': host
-                            },
-                            {});
-    }
-
-    function createView(pv = null, nestedInjectors = false) {
-      if (isBlank(pv)) {
-        pv = createProtoView();
-      }
-      var view = new AppView(null, pv, new Map());
-      var elementInjectors = ListWrapper.createGrowableSize(pv.elementBinders.length);
-      var preBuiltObjects = ListWrapper.createFixedSize(pv.elementBinders.length);
-      for (var i = 0; i < pv.elementBinders.length; i++) {
-        if (nestedInjectors && i > 0) {
-          elementInjectors[i] = createElementInjector(elementInjectors[i - 1]);
-        } else {
-          elementInjectors[i] = createElementInjector();
-        }
-        preBuiltObjects[i] = new SpyPreBuiltObjects();
-      }
-      view.init(<any>new SpyChangeDetector(), elementInjectors, elementInjectors, preBuiltObjects,
-                ListWrapper.createFixedSize(pv.elementBinders.length));
-      return view;
-    }
-
-    beforeEach(() => {
-      directiveResolver = new DirectiveResolver();
-      utils = new AppViewManagerUtils();
-    });
-
-    describe("hydrateComponentView", () => {
-
-      it("should hydrate the change detector after hydrating element injectors", () => {
-        var log = new Log();
-
-        var componentView = createView(createProtoView([createEmptyElBinder()]));
-        var hostView = createView(createProtoView([createComponentElBinder(createProtoView())]));
-        hostView.componentChildViews = [componentView];
-
-        var spyEi = <any>componentView.elementInjectors[0];
-        spyEi.spy('hydrate').andCallFake(log.fn('hydrate'));
-
-        var spyCd = <any>componentView.changeDetector;
-        spyCd.spy('hydrate').andCallFake(log.fn('hydrateCD'));
-
-        utils.hydrateComponentView(hostView, 0);
-
-        expect(log.result()).toEqual('hydrate; hydrateCD');
-      });
-
-    });
-
-    describe('shared hydrate functionality', () => {
-
-      it("should set up event listeners", () => {
-        var dir = new Object();
-
-        var hostPv = createProtoView([createComponentElBinder(null), createEmptyElBinder()]);
-        var hostView = createView(hostPv);
-        var spyEventAccessor1 = SpyObject.stub({"subscribe": null});
-        SpyObject.stub(hostView.elementInjectors[0], {
-          'getHostActionAccessors': [],
-          'getEventEmitterAccessors': [[spyEventAccessor1]],
-          'getDirectiveAtIndex': dir
-        });
-        var spyEventAccessor2 = SpyObject.stub({"subscribe": null});
-        SpyObject.stub(hostView.elementInjectors[1], {
-          'getHostActionAccessors': [],
-          'getEventEmitterAccessors': [[spyEventAccessor2]],
-          'getDirectiveAtIndex': dir
-        });
-
-        var shadowView = createView();
-        utils.attachComponentView(hostView, 0, shadowView);
-
-        utils.hydrateRootHostView(hostView, createInjector());
-
-        expect(spyEventAccessor1.spy('subscribe')).toHaveBeenCalledWith(hostView, 0, dir);
-        expect(spyEventAccessor2.spy('subscribe')).toHaveBeenCalledWith(hostView, 1, dir);
-      });
-
-      it("should set up host action listeners", () => {
-        var dir = new Object();
-
-        var hostPv = createProtoView([createComponentElBinder(null), createEmptyElBinder()]);
-        var hostView = createView(hostPv);
-        var spyActionAccessor1 = SpyObject.stub({"subscribe": null});
-        SpyObject.stub(hostView.elementInjectors[0], {
-          'getHostActionAccessors': [[spyActionAccessor1]],
-          'getEventEmitterAccessors': [],
-          'getDirectiveAtIndex': dir
-        });
-        var spyActionAccessor2 = SpyObject.stub({"subscribe": null});
-        SpyObject.stub(hostView.elementInjectors[1], {
-          'getHostActionAccessors': [[spyActionAccessor2]],
-          'getEventEmitterAccessors': [],
-          'getDirectiveAtIndex': dir
-        });
-
-        var shadowView = createView();
-        utils.attachComponentView(hostView, 0, shadowView);
-
-        utils.hydrateRootHostView(hostView, createInjector());
-
-        expect(spyActionAccessor1.spy('subscribe')).toHaveBeenCalledWith(hostView, 0, dir);
-        expect(spyActionAccessor2.spy('subscribe')).toHaveBeenCalledWith(hostView, 1, dir);
-      });
-
-    });
-
-    describe('attachViewInContainer', () => {
-      var parentView, contextView, childView;
-
-      function createViews(numInj = 1) {
-        var parentPv = createProtoView([createEmptyElBinder()]);
-        parentView = createView(parentPv);
-
-        var binders = [];
-        for (var i = 0; i < numInj; i++) binders.push(createEmptyElBinder());
-        var contextPv = createProtoView(binders);
-        contextView = createView(contextPv, true);
-
-        var childPv = createProtoView([createEmptyElBinder()]);
-        childView = createView(childPv);
-      }
-
-      it('should link the views rootElementInjectors at the given context', () => {
-        createViews();
-        utils.attachViewInContainer(parentView, 0, contextView, 0, 0, childView);
-        expect(contextView.elementInjectors.length).toEqual(2);
-      });
-
-      it('should link the views rootElementInjectors after the elementInjector at the given context',
-         () => {
-           createViews(2);
-           utils.attachViewInContainer(parentView, 0, contextView, 1, 0, childView);
-           expect(childView.rootElementInjectors[0].spy('linkAfter'))
-               .toHaveBeenCalledWith(contextView.elementInjectors[0], null);
-         });
-    });
-
-    describe('hydrateViewInContainer', () => {
-      var parentView, contextView, childView;
-
-      function createViews() {
-        var parentPv = createProtoView([createEmptyElBinder()]);
-        parentView = createView(parentPv);
-
-        var contextPv = createProtoView([createEmptyElBinder()]);
-        contextView = createView(contextPv);
-
-        var childPv = createProtoView([createEmptyElBinder()]);
-        childView = createView(childPv);
-        utils.attachViewInContainer(parentView, 0, contextView, 0, 0, childView);
-      }
-
-      it("should instantiate the elementInjectors with the host of the context's elementInjector",
-         () => {
-           createViews();
-
-           utils.hydrateViewInContainer(parentView, 0, contextView, 0, 0, null);
-           expect(childView.rootElementInjectors[0].spy('hydrate'))
-               .toHaveBeenCalledWith(null, contextView.elementInjectors[0].getHost(),
-                                     childView.preBuiltObjects[0]);
-         });
-    });
-
-    describe('hydrateRootHostView', () => {
-      var hostView;
-
-      function createViews() {
-        var hostPv = createProtoView([createComponentElBinder()]);
-        hostView = createView(hostPv);
-      }
-
-      it("should instantiate the elementInjectors with the given injector and an empty host element injector",
-         () => {
-           var injector = createInjector();
-           createViews();
-
-           utils.hydrateRootHostView(hostView, injector);
-           expect(hostView.rootElementInjectors[0].spy('hydrate'))
-               .toHaveBeenCalledWith(injector, null, hostView.preBuiltObjects[0]);
-         });
-
-    });
-
-  });
-}
-
-@Component({selector: 'someComponent'})
-class SomeComponent {
-}
-
-@proxy
-@IMPLEMENTS(ElementInjector)
-class SpyElementInjector extends SpyObject {
-  constructor() { super(ElementInjector); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-@proxy
-@IMPLEMENTS(ElementInjector)
-class SpyElementInjectorWithParent extends SpyObject {
-  parent: ElementInjector;
-  constructor(parent) {
-    super(ElementInjector);
-    this.parent = parent;
-  }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-@proxy
-@IMPLEMENTS(PreBuiltObjects)
-class SpyPreBuiltObjects extends SpyObject {
-  constructor() { super(PreBuiltObjects); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-@proxy
-@IMPLEMENTS(Injector)
-class SpyInjector extends SpyObject {
-  constructor() { super(Injector); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
diff --git a/modules/angular2/test/core/compiler/view_pool_spec.ts b/modules/angular2/test/core/compiler/view_pool_spec.ts
deleted file mode 100644
index abfbb61c7876..000000000000
--- a/modules/angular2/test/core/compiler/view_pool_spec.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  beforeEachBindings,
-  it,
-  xit,
-  SpyObject,
-  proxy
-} from 'angular2/test_lib';
-import {AppViewPool} from 'angular2/src/core/compiler/view_pool';
-import {AppProtoView, AppView} from 'angular2/src/core/compiler/view';
-import {MapWrapper, Map} from 'angular2/src/facade/collection';
-
-export function main() {
-  describe('AppViewPool', () => {
-
-    function createViewPool({capacity}): AppViewPool { return new AppViewPool(capacity); }
-
-    function createProtoView() { return new AppProtoView(null, null, null, null); }
-
-    function createView(pv) { return new AppView(null, pv, new Map()); }
-
-    it('should support multiple AppProtoViews', () => {
-      var vf = createViewPool({capacity: 2});
-      var pv1 = createProtoView();
-      var pv2 = createProtoView();
-      var view1 = createView(pv1);
-      var view2 = createView(pv2);
-      vf.returnView(view1);
-      vf.returnView(view2);
-
-      expect(vf.getView(pv1)).toBe(view1);
-      expect(vf.getView(pv2)).toBe(view2);
-    });
-
-    it('should reuse the newest view that has been returned', () => {
-      var pv = createProtoView();
-      var vf = createViewPool({capacity: 2});
-      var view1 = createView(pv);
-      var view2 = createView(pv);
-      vf.returnView(view1);
-      vf.returnView(view2);
-
-      expect(vf.getView(pv)).toBe(view2);
-    });
-
-    it('should not add views when the capacity has been reached', () => {
-      var pv = createProtoView();
-      var vf = createViewPool({capacity: 2});
-      var view1 = createView(pv);
-      var view2 = createView(pv);
-      var view3 = createView(pv);
-      expect(vf.returnView(view1)).toBe(true);
-      expect(vf.returnView(view2)).toBe(true);
-      expect(vf.returnView(view3)).toBe(false);
-
-      expect(vf.getView(pv)).toBe(view2);
-      expect(vf.getView(pv)).toBe(view1);
-    });
-
-  });
-}
diff --git a/modules/angular2/test/core/directive_lifecycle_integration_spec.ts b/modules/angular2/test/core/directive_lifecycle_integration_spec.ts
deleted file mode 100644
index 252ab5bc0ac2..000000000000
--- a/modules/angular2/test/core/directive_lifecycle_integration_spec.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xdescribe,
-  xit,
-  TestComponentBuilder,
-  IS_DARTIUM
-} from 'angular2/test_lib';
-
-import {ListWrapper} from 'angular2/src/facade/collection';
-import {
-  Directive,
-  Component,
-  View,
-  onCheck,
-  onInit,
-  onChange,
-  onAllChangesDone
-} from 'angular2/angular2';
-import * as viewAnn from 'angular2/src/core/annotations_impl/view';
-
-export function main() {
-  describe('directive lifecycle integration spec', () => {
-
-    it('should invoke lifecycle methods onChange > onInit > onCheck > onAllChangesDone',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideView(
-                MyComp,
-                new viewAnn.View(
-                    {template: '<div [field]="123" lifecycle></div>', directives: [LifecycleDir]}))
-             .createAsync(MyComp)
-             .then((tc) => {
-               var dir = tc.componentViewChildren[0].inject(LifecycleDir);
-               tc.detectChanges();
-
-               expect(dir.log).toEqual(["onChange", "onInit", "onCheck", "onAllChangesDone"]);
-
-               tc.detectChanges();
-
-               expect(dir.log).toEqual([
-                 "onChange",
-                 "onInit",
-                 "onCheck",
-                 "onAllChangesDone",
-                 "onCheck",
-                 "onAllChangesDone"
-               ]);
-
-               async.done();
-             });
-       }));
-  });
-}
-
-
-@Directive({
-  selector: "[lifecycle]",
-  properties: ['field'],
-  lifecycle: [onChange, onCheck, onInit, onAllChangesDone]
-})
-class LifecycleDir {
-  field;
-  log: List<string>;
-
-  constructor() { this.log = []; }
-
-  onChange(_) { this.log.push("onChange"); }
-
-  onInit() { this.log.push("onInit"); }
-
-  onCheck() { this.log.push("onCheck"); }
-
-  onAllChangesDone() { this.log.push("onAllChangesDone"); }
-}
-
-@Component({selector: 'my-comp'})
-@View({directives: []})
-class MyComp {
-}
diff --git a/modules/angular2/test/core/forward_ref_integration_spec.dart b/modules/angular2/test/core/forward_ref_integration_spec.dart
deleted file mode 100644
index d7e9e0c673d8..000000000000
--- a/modules/angular2/test/core/forward_ref_integration_spec.dart
+++ /dev/null
@@ -1,6 +0,0 @@
-/// This file contains tests that make sense only in Dart
-library angular2.test.core.forward_ref_integration_spec;
-
-main() {
-  // Don't run in Dart as it is not relevant, and Dart const rules prevent us from expressing it.
-}
diff --git a/modules/angular2/test/core/forward_ref_integration_spec.ts b/modules/angular2/test/core/forward_ref_integration_spec.ts
deleted file mode 100644
index e34cef3a418e..000000000000
--- a/modules/angular2/test/core/forward_ref_integration_spec.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import {
-  AsyncTestCompleter,
-  TestComponentBuilder,
-  asNativeElements,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit
-} from 'angular2/test_lib';
-import {Directive, Component, Query, View} from 'angular2/annotations';
-import {QueryList, NgFor} from 'angular2/angular2';
-import {forwardRef, resolveForwardRef, bind, Inject} from 'angular2/di';
-import {Type} from 'angular2/src/facade/lang';
-
-export function main() {
-  describe("forwardRef integration", function() {
-    it('should instantiate components which are declared using forwardRef',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.createAsync(App).then((tc) => {
-           tc.detectChanges();
-           expect(asNativeElements(tc.componentViewChildren)).toHaveText('frame(lock)');
-           async.done();
-         });
-       }));
-  });
-}
-
-@Component({selector: 'app', viewInjector: [forwardRef(() => Frame)]})
-@View({
-  template: `<door><lock></lock></door>`,
-  directives: [
-    bind(forwardRef(() => Door))
-        .toClass(forwardRef(() => Door)),
-    bind(forwardRef(() => Lock)).toClass(forwardRef(() => Lock))
-  ]
-})
-class App {
-}
-
-@Component({selector: 'Lock'})
-@View({
-  directives: [NgFor],
-  template: `{{frame.name}}(<span *ng-for="var lock of locks">{{lock.name}}</span>)`
-})
-class Door {
-  locks: QueryList<Lock>;
-  frame: Frame;
-
-  constructor(@Query(forwardRef(() => Lock)) locks: QueryList<Lock>,
-              @Inject(forwardRef(() => Frame)) frame: Frame) {
-    this.frame = frame;
-    this.locks = locks;
-  }
-}
-
-class Frame {
-  name: string;
-  constructor() { this.name = 'frame'; }
-}
-
-@Directive({selector: 'lock'})
-class Lock {
-  name: string;
-  constructor() { this.name = 'lock'; }
-}
diff --git a/modules/angular2/test/core/life_cycle/life_cycle_spec.ts b/modules/angular2/test/core/life_cycle/life_cycle_spec.ts
deleted file mode 100644
index 4774371b5d8a..000000000000
--- a/modules/angular2/test/core/life_cycle/life_cycle_spec.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  el,
-  AsyncTestCompleter,
-  fakeAsync,
-  tick,
-  inject,
-  SpyChangeDetector,
-} from 'angular2/test_lib';
-import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
-import {IMPLEMENTS} from 'angular2/src/facade/lang';
-
-export function main() {
-  describe("LifeCycle", () => {
-    it("should throw when reentering tick", () => {
-      var cd = <any>new SpyChangeDetector();
-      var lc = new LifeCycle(null, cd, false);
-
-      cd.spy("detectChanges").andCallFake(() => lc.tick());
-      expect(() => lc.tick()).toThrowError("LifeCycle.tick is called recursively");
-    });
-  });
-}
diff --git a/modules/angular2/test/core/testability/testability_spec.ts b/modules/angular2/test/core/testability/testability_spec.ts
deleted file mode 100644
index 6d18a7a4da6c..000000000000
--- a/modules/angular2/test/core/testability/testability_spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {describe, ddescribe, it, iit, xit, xdescribe, expect, beforeEach} from 'angular2/test_lib';
-import {Testability} from 'angular2/src/core/testability/testability';
-
-
-export function main() {
-  describe('Testability', () => {
-    var testability, executed;
-
-    beforeEach(() => {
-      testability = new Testability();
-      executed = false;
-    });
-
-    it('should start with a pending count of 0',
-       () => { expect(testability.getPendingCount()).toEqual(0); });
-
-    it('should fire whenstable callbacks if pending count is 0', () => {
-      testability.whenStable(() => executed = true);
-      expect(executed).toBe(true);
-    });
-
-    it('should not call whenstable callbacks when there are pending counts', () => {
-      testability.increaseCount(2);
-      testability.whenStable(() => executed = true);
-
-      expect(executed).toBe(false);
-      testability.increaseCount(-1);
-      expect(executed).toBe(false);
-    });
-
-    it('should fire whenstable callbacks when pending drops to 0', () => {
-      testability.increaseCount(2);
-      testability.whenStable(() => executed = true);
-
-      expect(executed).toBe(false);
-
-      testability.increaseCount(-2);
-      expect(executed).toBe(true);
-    });
-  });
-}
diff --git a/modules/angular2/test/core/zone/ng_zone_spec.ts b/modules/angular2/test/core/zone/ng_zone_spec.ts
deleted file mode 100644
index d581e37f3acb..000000000000
--- a/modules/angular2/test/core/zone/ng_zone_spec.ts
+++ /dev/null
@@ -1,569 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xdescribe,
-  xit,
-  Log,
-  isInInnerZone
-} from 'angular2/test_lib';
-
-import {PromiseWrapper, TimerWrapper} from 'angular2/src/facade/async';
-import {BaseException} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
-
-var isIE = DOM.getUserAgent().indexOf("Trident") > -1;
-// Schedules a macrotask (using a timer)
-function macroTask(fn: Function, timer = 1): void {
-  // adds longer timers for passing tests in IE
-  _zone.runOutsideAngular(() => TimerWrapper.setTimeout(fn, isIE ? timer : 1));
-}
-
-// Schedules a microtasks (using a resolved promise .then())
-function microTask(fn: Function): void {
-  PromiseWrapper.resolve(null).then((_) => { fn(); });
-}
-
-var _log;
-var _errors: any[];
-var _traces: any[];
-var _zone;
-
-function logError(error, stackTrace) {
-  _errors.push(error);
-  _traces.push(stackTrace);
-}
-
-export function main() {
-  describe("NgZone", () => {
-
-    function createZone(enableLongStackTrace) {
-      var zone = new NgZone({enableLongStackTrace: enableLongStackTrace});
-      zone.initCallbacks({onTurnStart: _log.fn('onTurnStart'), onTurnDone: _log.fn('onTurnDone')});
-      return zone;
-    }
-
-    beforeEach(() => {
-      _log = new Log();
-      _errors = [];
-      _traces = [];
-    });
-
-    describe('long stack trace', () => {
-      beforeEach(() => { _zone = createZone(true); });
-
-      commonTests();
-
-      it('should produce long stack traces', inject([AsyncTestCompleter], (async) => {
-           macroTask(() => {
-             _zone.initCallbacks({onErrorHandler: logError});
-             var c = PromiseWrapper.completer();
-
-             _zone.run(() => {
-               TimerWrapper.setTimeout(() => {
-                 TimerWrapper.setTimeout(() => {
-                   c.resolve(null);
-                   throw new BaseException('ccc');
-                 }, 0);
-               }, 0);
-             });
-
-             c.promise.then((_) => {
-               expect(_traces.length).toBe(1);
-               expect(_traces[0].length).toBeGreaterThan(1);
-               async.done();
-             });
-           });
-         }));
-
-      it('should produce long stack traces (when using microtasks)',
-         inject([AsyncTestCompleter], (async) => {
-           macroTask(() => {
-             _zone.initCallbacks({onErrorHandler: logError});
-             var c = PromiseWrapper.completer();
-
-             _zone.run(() => {
-               microTask(() => {
-                 microTask(() => {
-                   c.resolve(null);
-                   throw new BaseException("ddd");
-                 });
-               });
-             });
-
-             c.promise.then((_) => {
-               expect(_traces.length).toBe(1);
-               expect(_traces[0].length).toBeGreaterThan(1);
-               async.done();
-             });
-           });
-         }));
-    });
-
-    describe('short stack trace', () => {
-      beforeEach(() => { _zone = createZone(false); });
-
-      commonTests();
-
-      it('should disable long stack traces', inject([AsyncTestCompleter], (async) => {
-           macroTask(() => {
-             _zone.initCallbacks({onErrorHandler: logError});
-             var c = PromiseWrapper.completer();
-
-             _zone.run(() => {
-               TimerWrapper.setTimeout(() => {
-                 TimerWrapper.setTimeout(() => {
-                   c.resolve(null);
-                   throw new BaseException('ccc');
-                 }, 0);
-               }, 0);
-             });
-
-             c.promise.then((_) => {
-               expect(_traces.length).toBe(1);
-               expect(_traces[0].length).toEqual(1);
-               async.done();
-             });
-           });
-         }));
-    });
-  });
-}
-
-function commonTests() {
-  describe('isInInnerZone',
-           () => {it('should return whether the code executes in the inner zone', () => {
-             expect(isInInnerZone()).toEqual(false);
-             _zone.run(() => { expect(isInInnerZone()).toEqual(true); });
-           })});
-
-  describe('run', () => {
-    it('should return the body return value from run', inject([AsyncTestCompleter], (async) => {
-         macroTask(() => { expect(_zone.run(() => { return 6; })).toEqual(6); });
-
-         macroTask(() => { async.done(); });
-       }));
-
-    it('should call onTurnStart and onTurnDone', inject([AsyncTestCompleter], (async) => {
-         macroTask(() => { _zone.run(_log.fn('run')); });
-
-         macroTask(() => {
-           expect(_log.result()).toEqual('onTurnStart; run; onTurnDone');
-           async.done();
-         });
-       }));
-
-    it('should call onTurnStart once before a turn and onTurnDone once after the turn',
-       inject([AsyncTestCompleter], (async) => {
-
-         macroTask(() => {
-           _zone.run(() => {
-             _log.add('run start');
-             microTask(_log.fn('async'));
-             _log.add('run end');
-           });
-         });
-
-         macroTask(() => {
-           // The microtask (async) is executed after the macrotask (run)
-           expect(_log.result()).toEqual('onTurnStart; run start; run end; async; onTurnDone');
-           async.done();
-         }, 50);
-       }));
-
-    it('should not run onTurnStart and onTurnDone for nested Zone.run',
-       inject([AsyncTestCompleter], (async) => {
-         macroTask(() => {
-           _zone.run(() => {
-             _log.add('start run');
-             _zone.run(() => {
-               _log.add('nested run');
-               microTask(_log.fn('nested run microtask'));
-             });
-             _log.add('end run');
-           });
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   'onTurnStart; start run; nested run; end run; nested run microtask; onTurnDone');
-           async.done();
-         }, 50);
-       }));
-
-    it('should not run onTurnStart and onTurnDone for nested Zone.run invoked from onTurnDone',
-       inject([AsyncTestCompleter], (async) => {
-         _zone.initCallbacks({
-           onTurnDone: () => {
-             _log.add('onTurnDone:started');
-             _zone.run(() => _log.add('nested run'));
-             _log.add('onTurnDone:finished');
-           }
-         });
-
-         macroTask(() => { _zone.run(() => { _log.add('start run'); }); });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual('start run; onTurnDone:started; nested run; onTurnDone:finished');
-           async.done();
-         }, 50);
-       }));
-
-    it('should call onTurnStart and onTurnDone before and after each top-level run',
-       inject([AsyncTestCompleter], (async) => {
-         macroTask(() => { _zone.run(_log.fn('run1')); });
-
-         macroTask(() => { _zone.run(_log.fn('run2')); });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual('onTurnStart; run1; onTurnDone; onTurnStart; run2; onTurnDone');
-           async.done();
-         });
-       }));
-
-    it('should call onTurnStart and onTurnDone before and after each turn',
-       inject([AsyncTestCompleter], (async) => {
-         var a;
-         var b;
-
-         macroTask(() => {
-           _zone.run(() => {
-             a = PromiseWrapper.completer();
-             b = PromiseWrapper.completer();
-
-             _log.add('run start');
-             a.promise.then(_log.fn('a then'));
-             b.promise.then(_log.fn('b then'));
-           });
-         });
-
-         macroTask(() => {
-           _zone.run(() => {
-             a.resolve('a');
-             b.resolve('b');
-           });
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   'onTurnStart; run start; onTurnDone; onTurnStart; a then; b then; onTurnDone');
-           async.done();
-         }, 50);
-       }));
-
-    it('should run a function outside of the angular zone',
-       inject([AsyncTestCompleter], (async) => {
-         macroTask(() => { _zone.runOutsideAngular(_log.fn('run')); });
-
-         macroTask(() => {
-           expect(_log.result()).toEqual('run');
-           async.done()
-         });
-       }));
-
-    it('should call onTurnStart and onTurnDone when an inner microtask is scheduled from outside angular',
-       inject([AsyncTestCompleter], (async) => {
-         var completer;
-
-         macroTask(
-             () => { _zone.runOutsideAngular(() => { completer = PromiseWrapper.completer(); }); });
-
-         macroTask(
-             () => { _zone.run(() => { completer.promise.then(_log.fn('executedMicrotask')); }); });
-
-         macroTask(() => {
-           _zone.runOutsideAngular(() => {
-             _log.add('scheduling a microtask');
-             completer.resolve(null);
-           });
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   // First VM turn => setup Promise then
-                   'onTurnStart; onTurnDone; ' +
-                   // Second VM turn (outside of anguler)
-                   'scheduling a microtask; ' +
-                   // Third VM Turn => execute the microtask (inside angular)
-                   'onTurnStart; executedMicrotask; onTurnDone');
-           async.done();
-         }, 50);
-       }));
-
-    it('should call onTurnStart before executing a microtask scheduled in onTurnDone as well as ' +
-           'onTurnDone after executing the task',
-       inject([AsyncTestCompleter], (async) => {
-         var ran = false;
-         _zone.initCallbacks({
-           onTurnStart: _log.fn('onTurnStart'),
-           onTurnDone: () => {
-             _log.add('onTurnDone(begin)');
-             if (!ran) {
-               microTask(() => {
-                 ran = true;
-                 _log.add('executedMicrotask');
-               });
-             }
-
-             _log.add('onTurnDone(end)');
-           }
-         });
-
-         macroTask(() => { _zone.run(_log.fn('run')); });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   // First VM turn => 'run' macrotask
-                   'onTurnStart; run; onTurnDone(begin); onTurnDone(end); ' +
-                   // Second VM Turn => microtask enqueued from onTurnDone
-                   'onTurnStart; executedMicrotask; onTurnDone(begin); onTurnDone(end)');
-           async.done();
-         }, 50);
-       }));
-
-    it('should call onTurnStart and onTurnDone for a scheduleMicrotask in onTurnDone triggered by ' +
-           'a scheduleMicrotask in run',
-       inject([AsyncTestCompleter], (async) => {
-         var ran = false;
-         _zone.initCallbacks({
-           onTurnStart: _log.fn('onTurnStart'),
-           onTurnDone: () => {
-             _log.add('onTurnDone(begin)');
-             if (!ran) {
-               _log.add('onTurnDone(scheduleMicrotask)');
-               microTask(() => {
-                 ran = true;
-                 _log.add('onTurnDone(executeMicrotask)');
-               });
-             }
-             _log.add('onTurnDone(end)');
-           }
-         });
-
-         macroTask(() => {
-           _zone.run(() => {
-             _log.add('scheduleMicrotask');
-             microTask(_log.fn('run(executeMicrotask)'));
-           });
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   // First VM Turn => a macrotask + the microtask it enqueues
-                   'onTurnStart; scheduleMicrotask; run(executeMicrotask); onTurnDone(begin); onTurnDone(scheduleMicrotask); onTurnDone(end); ' +
-                   // Second VM Turn => the microtask enqueued from onTurnDone
-                   'onTurnStart; onTurnDone(executeMicrotask); onTurnDone(begin); onTurnDone(end)');
-           async.done();
-         }, 50);
-       }));
-
-    it('should execute promises scheduled in onTurnStart before promises scheduled in run',
-       inject([AsyncTestCompleter], (async) => {
-         var donePromiseRan = false;
-         var startPromiseRan = false;
-
-         _zone.initCallbacks({
-           onTurnStart: () => {
-             _log.add('onTurnStart(begin)');
-             if (!startPromiseRan) {
-               _log.add('onTurnStart(schedulePromise)');
-               microTask(_log.fn('onTurnStart(executePromise)'));
-               startPromiseRan = true;
-             }
-             _log.add('onTurnStart(end)');
-           },
-           onTurnDone: () => {
-             _log.add('onTurnDone(begin)');
-             if (!donePromiseRan) {
-               _log.add('onTurnDone(schedulePromise)');
-               microTask(_log.fn('onTurnDone(executePromise)'));
-               donePromiseRan = true;
-             }
-             _log.add('onTurnDone(end)');
-           }
-         });
-
-         macroTask(() => {
-           _zone.run(() => {
-             _log.add('run start');
-             PromiseWrapper.resolve(null)
-                 .then((_) => {
-                   _log.add('promise then');
-                   PromiseWrapper.resolve(null).then(_log.fn('promise foo'));
-                   return PromiseWrapper.resolve(null);
-                 })
-                 .then(_log.fn('promise bar'));
-             _log.add('run end');
-           });
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   // First VM turn: enqueue a microtask in onTurnStart
-                   'onTurnStart(begin); onTurnStart(schedulePromise); onTurnStart(end); ' +
-                   // First VM turn: execute the macrotask which enqueues microtasks
-                   'run start; run end; ' +
-                   // First VM turn: execute enqueued microtasks
-                   'onTurnStart(executePromise); promise then; promise foo; promise bar; ' +
-                   // First VM turn: onTurnEnd, enqueue a microtask
-                   'onTurnDone(begin); onTurnDone(schedulePromise); onTurnDone(end); ' +
-                   // Second VM turn: execute the microtask from onTurnEnd
-                   'onTurnStart(begin); onTurnStart(end); onTurnDone(executePromise); onTurnDone(begin); onTurnDone(end)');
-           async.done();
-         }, 50);
-       }));
-
-    it('should call onTurnStart and onTurnDone before and after each turn, respectively',
-       inject([AsyncTestCompleter], (async) => {
-         var completerA, completerB;
-
-         macroTask(() => {
-           _zone.run(() => {
-             completerA = PromiseWrapper.completer();
-             completerB = PromiseWrapper.completer();
-             completerA.promise.then(_log.fn('a then'));
-             completerB.promise.then(_log.fn('b then'));
-             _log.add('run start');
-           });
-         });
-
-         macroTask(() => { _zone.run(() => { completerA.resolve(null); }); }, 10);
-
-
-         macroTask(() => { _zone.run(() => { completerB.resolve(null); }); }, 30);
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual(
-                   // First VM turn
-                   'onTurnStart; run start; onTurnDone; ' +
-                   // Second VM turn
-                   'onTurnStart; a then; onTurnDone; ' +
-                   // Third VM turn
-                   'onTurnStart; b then; onTurnDone');
-           async.done();
-         }, 60);
-       }));
-
-    it('should call onTurnStart and onTurnDone before and after (respectively) all turns in a chain',
-       inject([AsyncTestCompleter], (async) => {
-         macroTask(() => {
-           _zone.run(() => {
-             _log.add('run start');
-             microTask(() => {
-               _log.add('async1');
-               microTask(_log.fn('async2'));
-             });
-             _log.add('run end');
-           });
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual('onTurnStart; run start; run end; async1; async2; onTurnDone');
-           async.done();
-         }, 50);
-       }));
-
-    it('should call onTurnStart and onTurnDone for promises created outside of run body',
-       inject([AsyncTestCompleter], (async) => {
-         var promise;
-
-         macroTask(() => {
-           _zone.runOutsideAngular(() => {
-             promise = PromiseWrapper.resolve(4).then((x) => PromiseWrapper.resolve(x));
-           });
-
-           _zone.run(() => {
-             promise.then(_log.fn('promise then'));
-             _log.add('zone run');
-           });
-         });
-
-         macroTask(() => {
-           expect(_log.result())
-               .toEqual('onTurnStart; zone run; onTurnDone; onTurnStart; promise then; onTurnDone');
-           async.done();
-         }, 50);
-       }));
-  });
-
-  describe('exceptions', () => {
-    it('should call the on error callback when it is defined',
-       inject([AsyncTestCompleter], (async) => {
-         macroTask(() => {
-           _zone.initCallbacks({onErrorHandler: logError});
-
-           var exception = new BaseException('sync');
-
-           _zone.run(() => { throw exception; });
-
-           expect(_errors.length).toBe(1);
-           expect(_errors[0]).toBe(exception);
-           async.done();
-         });
-       }));
-
-    it('should call onError for errors from microtasks', inject([AsyncTestCompleter], (async) => {
-         _zone.initCallbacks({onErrorHandler: logError});
-
-         var exception = new BaseException('async');
-
-         macroTask(() => { _zone.run(() => { microTask(() => { throw exception; }); }); });
-
-         macroTask(() => {
-           expect(_errors.length).toBe(1);
-           expect(_errors[0]).toEqual(exception);
-           async.done();
-         }, 50);
-       }));
-
-    it('should call onError when onTurnDone throws and the zone is sync',
-       inject([AsyncTestCompleter], (async) => {
-         var exception = new BaseException('fromOnTurnDone');
-
-         _zone.initCallbacks({onErrorHandler: logError, onTurnDone: () => { throw exception; }});
-
-         macroTask(() => { _zone.run(() => {}); });
-
-         macroTask(() => {
-           expect(_errors.length).toBe(1);
-           expect(_errors[0]).toEqual(exception);
-           async.done();
-         }, 50);
-       }));
-
-    it('should call onError when onTurnDone throws and the zone is async',
-       inject([AsyncTestCompleter], (async) => {
-         var asyncRan = false;
-
-         var exception = new BaseException('fromOnTurnDone');
-
-         _zone.initCallbacks({onErrorHandler: logError, onTurnDone: () => { throw exception; }});
-
-         macroTask(() => { _zone.run(() => { microTask(() => { asyncRan = true; }); }); });
-
-         macroTask(() => {
-           expect(asyncRan).toBe(true);
-           expect(_errors.length).toBe(1);
-           expect(_errors[0]).toEqual(exception);
-           async.done();
-         }, 50);
-       }));
-  });
-}
diff --git a/modules/angular2/test/debug/debug_element_spec.ts b/modules/angular2/test/debug/debug_element_spec.ts
deleted file mode 100644
index 9a2078339cc9..000000000000
--- a/modules/angular2/test/debug/debug_element_spec.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  beforeEachBindings,
-  it,
-  xit,
-  TestComponentBuilder,
-  By,
-  Scope
-} from 'angular2/test_lib';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {PromiseWrapper, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-
-import {Injectable} from 'angular2/di';
-
-import {
-  Directive,
-  Component,
-  View,
-} from 'angular2/annotations';
-
-import {NgFor} from 'angular2/src/directives/ng_for';
-
-@Injectable()
-class Logger {
-  log: List<string>;
-
-  constructor() { this.log = []; }
-
-  add(thing: string) { this.log.push(thing); }
-}
-
-@Directive({selector: '[message]', properties: ['message']})
-@Injectable()
-class MessageDir {
-  logger: Logger;
-
-  constructor(logger: Logger) { this.logger = logger; }
-
-  set message(newMessage) { this.logger.add(newMessage); }
-}
-
-@Component({selector: 'child-comp'})
-@View({
-  template: `<div class="child" message="child">
-               <span class="childnested" message="nestedchild">Child</span>
-             </div>
-             <span class="child">{{childBinding}}</span>`,
-  directives: [MessageDir]
-})
-@Injectable()
-class ChildComp {
-  childBinding: string;
-
-  constructor() { this.childBinding = 'Original'; }
-}
-
-@Component({selector: 'parent-comp', viewInjector: [Logger]})
-@View({
-  template: `<div class="parent" message="parent">
-               <span class="parentnested" message="nestedparent">Parent</span>
-             </div>
-             <span class="parent">{{parentBinding}}</span>
-             <child-comp class="child-comp-class"></child-comp>`,
-  directives: [ChildComp, MessageDir]
-})
-@Injectable()
-class ParentComp {
-  parentBinding: string;
-  constructor() { this.parentBinding = 'OriginalParent'; }
-}
-
-@Directive({selector: 'custom-emitter', events: ['myevent']})
-@Injectable()
-class CustomEmitter {
-  myevent: EventEmitter;
-
-  constructor() { this.myevent = new EventEmitter(); }
-}
-
-@Component({selector: 'events-comp'})
-@View({
-  template: `<button (click)="handleClick()"></button>
-             <custom-emitter (myevent)="handleCustom()"></custom-emitter>`,
-  directives: [CustomEmitter]
-})
-@Injectable()
-class EventsComp {
-  clicked: boolean;
-  customed: boolean;
-
-  constructor() {
-    this.clicked = false;
-    this.customed = false;
-  }
-
-  handleClick() { this.clicked = true; }
-
-  handleCustom() { this.customed = true; }
-}
-
-@Component({selector: 'using-for', viewInjector: [Logger]})
-@View({
-  template: `<span *ng-for="#thing of stuff">{{thing}}</span>
-            <ul message="list">
-              <li *ng-for="#item of stuff">{{item}}</li>
-            </ul>`,
-  directives: [NgFor, MessageDir]
-})
-@Injectable()
-class UsingFor {
-  stuff: List<string>;
-
-  constructor() { this.stuff = ['one', 'two', 'three']; }
-}
-
-export function main() {
-  describe('debug element', function() {
-
-    it('should list component child elements',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               var childEls = rootTestComponent.children;
-               // The root is a lone component, and has no children in the light dom.
-               expect(childEls.length).toEqual(0);
-
-               var rootCompChildren = rootTestComponent.componentViewChildren;
-               // The root component has 3 elements in its shadow view.
-               expect(rootCompChildren.length).toEqual(3);
-               expect(DOM.hasClass(rootCompChildren[0].nativeElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(rootCompChildren[1].nativeElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(rootCompChildren[2].nativeElement, 'child-comp-class'))
-                   .toBe(true);
-
-               var nested = rootCompChildren[0].children;
-               expect(nested.length).toEqual(1);
-               expect(DOM.hasClass(nested[0].nativeElement, 'parentnested')).toBe(true);
-
-               var childComponent = rootCompChildren[2];
-               expect(childComponent.children.length).toEqual(0);
-
-               var childCompChildren = childComponent.componentViewChildren;
-               expect(childCompChildren.length).toEqual(2);
-               expect(DOM.hasClass(childCompChildren[0].nativeElement, 'child')).toBe(true);
-               expect(DOM.hasClass(childCompChildren[1].nativeElement, 'child')).toBe(true);
-
-               var childNested = childCompChildren[0].children;
-               expect(childNested.length).toEqual(1);
-               expect(DOM.hasClass(childNested[0].nativeElement, 'childnested')).toBe(true);
-
-               async.done();
-             });
-       }));
-
-    it('should list child elements within viewports',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(UsingFor).then((rootTestComponent) => {
-           rootTestComponent.detectChanges();
-
-           var childEls = rootTestComponent.componentViewChildren;
-           // TODO should this count include the <template> element?
-           expect(childEls.length).toEqual(5);
-
-           var list = childEls[4];
-           expect(list.children.length).toEqual(4);
-
-           async.done();
-         });
-       }));
-
-    it('should query child elements',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               var childTestEls = rootTestComponent.queryAll(By.directive(MessageDir));
-
-               expect(childTestEls.length).toBe(4);
-               expect(DOM.hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
-               expect(DOM.hasClass(childTestEls[2].nativeElement, 'child')).toBe(true);
-               expect(DOM.hasClass(childTestEls[3].nativeElement, 'childnested')).toBe(true);
-               async.done();
-             });
-       }));
-
-    it('should query child elements in the light DOM',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               var parentEl = rootTestComponent.componentViewChildren[0];
-
-               var childTestEls = parentEl.queryAll(By.directive(MessageDir), Scope.light);
-
-               expect(childTestEls.length).toBe(1);
-               expect(DOM.hasClass(childTestEls[0].nativeElement, 'parentnested')).toBe(true);
-
-               async.done();
-             });
-       }));
-
-    it('should query child elements in the current component view DOM',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               var childTestEls = rootTestComponent.queryAll(By.directive(MessageDir), Scope.view);
-
-               expect(childTestEls.length).toBe(2);
-               expect(DOM.hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
-
-               async.done();
-             });
-       }));
-
-    it('should allow injecting from the element injector',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               expect(rootTestComponent.componentViewChildren[0].inject(Logger).log)
-                   .toEqual(['parent', 'nestedparent', 'child', 'nestedchild']);
-
-               async.done();
-             });
-       }));
-
-    it('should trigger event handlers',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(EventsComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               expect(rootTestComponent.componentInstance.clicked).toBe(false);
-               expect(rootTestComponent.componentInstance.customed).toBe(false);
-
-               rootTestComponent.componentViewChildren[0].triggerEventHandler('click', {});
-               expect(rootTestComponent.componentInstance.clicked).toBe(true);
-
-               rootTestComponent.componentViewChildren[1].triggerEventHandler('myevent', {});
-               expect(rootTestComponent.componentInstance.customed).toBe(true);
-
-               async.done();
-             });
-       }));
-  });
-}
diff --git a/modules/angular2/test/debug/debug_element_view_listener_spec.ts b/modules/angular2/test/debug/debug_element_view_listener_spec.ts
deleted file mode 100644
index 3edd874da66b..000000000000
--- a/modules/angular2/test/debug/debug_element_view_listener_spec.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  beforeEachBindings,
-  it,
-  xit,
-  TestComponentBuilder,
-  By,
-  Scope,
-  inspectNativeElement
-} from 'angular2/test_lib';
-
-import {global} from 'angular2/src/facade/lang';
-import {APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
-
-import {Injectable, bind} from 'angular2/di';
-
-import {
-  Directive,
-  Component,
-  View,
-} from 'angular2/annotations';
-
-@Component({selector: 'my-comp'})
-@View({directives: []})
-@Injectable()
-class MyComp {
-  ctxProp: string;
-}
-
-export function main() {
-  describe('element probe', function() {
-    beforeEachBindings(() => [bind(APP_VIEW_POOL_CAPACITY).toValue(0)]);
-
-    it('should return a TestElement from a dom element',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-         tcb.overrideTemplate(MyComp, '<div some-dir></div>')
-             .createAsync(MyComp)
-             .then((rootTestComponent) => {
-               expect(inspectNativeElement(rootTestComponent.nativeElement).componentInstance)
-                   .toBeAnInstanceOf(MyComp);
-
-               async.done();
-             });
-       }));
-
-    it('should clean up whent the view is destroyed',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-         tcb.overrideTemplate(MyComp, '')
-             .createAsync(MyComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.destroy();
-               expect(inspectNativeElement(rootTestComponent.nativeElement)).toBe(null);
-
-               async.done();
-             });
-
-       }));
-
-    if (!IS_DARTIUM) {
-      it('should provide a global function to inspect elements',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-           tcb.overrideTemplate(MyComp, '')
-               .createAsync(MyComp)
-               .then((rootTestComponent) => {
-                 expect(global['ngProbe'](rootTestComponent.nativeElement).componentInstance)
-                     .toBeAnInstanceOf(MyComp);
-
-                 async.done();
-               });
-         }));
-    }
-  });
-}
diff --git a/modules/angular2/test/di/binding_dart_spec.dart b/modules/angular2/test/di/binding_dart_spec.dart
deleted file mode 100644
index 79df12b815ff..000000000000
--- a/modules/angular2/test/di/binding_dart_spec.dart
+++ /dev/null
@@ -1,58 +0,0 @@
-/// This file contains tests that make sense only in Dart world, such as
-/// verifying that things are valid constants.
-library angular2.test.di.binding_dart_spec;
-
-import 'dart:mirrors';
-import 'package:angular2/test_lib.dart';
-import 'package:angular2/di.dart';
-
-main() {
-  describe('Binding', () {
-    it('can create constant from token', () {
-      expect(const Binding(Foo).token).toBe(Foo);
-    });
-
-    it('can create constant from class', () {
-      expect(const Binding(Foo, toClass: Bar).toClass).toBe(Bar);
-    });
-
-    it('can create constant from value', () {
-      expect(const Binding(Foo, toValue: 5).toValue).toBe(5);
-    });
-
-    it('can create constant from alias', () {
-      expect(const Binding(Foo, toAlias: Bar).toAlias).toBe(Bar);
-    });
-
-    it('can create constant from factory', () {
-      expect(const Binding(Foo, toFactory: fn).toFactory).toBe(fn);
-    });
-
-    it('can be used in annotation', () {
-      ClassMirror mirror = reflectType(Annotated);
-      var bindings = mirror.metadata[0].reflectee.bindings;
-      expect(bindings.length).toBe(5);
-      bindings.forEach((b) {
-        expect(b).toBeA(Binding);
-      });
-    });
-  });
-}
-
-class Foo {}
-class Bar extends Foo {}
-fn() => null;
-
-class Annotation {
-  final List bindings;
-  const Annotation(this.bindings);
-}
-
-@Annotation(const [
-  const Binding(Foo),
-  const Binding(Foo, toClass: Bar),
-  const Binding(Foo, toValue: 5),
-  const Binding(Foo, toAlias: Bar),
-  const Binding(Foo, toFactory: fn)
-])
-class Annotated {}
diff --git a/modules/angular2/test/di/forward_ref_spec.ts b/modules/angular2/test/di/forward_ref_spec.ts
deleted file mode 100644
index 779ecf8a3dd7..000000000000
--- a/modules/angular2/test/di/forward_ref_spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-import {forwardRef, resolveForwardRef} from 'angular2/di';
-import {Type} from 'angular2/src/facade/lang';
-
-export function main() {
-  describe("forwardRef", function() {
-    it('should wrap and unwrap the reference', () => {
-      var ref = forwardRef(() => String);
-      expect(ref instanceof Type).toBe(true);
-      expect(resolveForwardRef(ref)).toBe(String);
-    });
-  });
-}
diff --git a/modules/angular2/test/di/injector_dart_spec.dart b/modules/angular2/test/di/injector_dart_spec.dart
deleted file mode 100644
index e90c6299c768..000000000000
--- a/modules/angular2/test/di/injector_dart_spec.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-/// This file contains tests that make sense only in Dart
-library angular2.test.di.injector_dart_spec;
-
-import 'package:angular2/test_lib.dart';
-import 'package:angular2/di.dart';
-
-main() {
-  describe('Injector', () {
-    it('should support TypeLiteral', () {
-      var i = Injector.resolveAndCreate(
-          [bind(new TypeLiteral<List<int>>()).toValue([1, 2, 3]), Foo,]);
-      expect(i.get(Foo).value).toEqual([1, 2, 3]);
-    });
-  });
-}
-
-class Foo {
-  final List<int> value;
-  Foo(this.value);
-}
diff --git a/modules/angular2/test/di/injector_spec.ts b/modules/angular2/test/di/injector_spec.ts
deleted file mode 100644
index 0035e157308b..000000000000
--- a/modules/angular2/test/di/injector_spec.ts
+++ /dev/null
@@ -1,411 +0,0 @@
-import {isBlank, BaseException, stringify} from 'angular2/src/facade/lang';
-import {describe, ddescribe, it, iit, expect, beforeEach} from 'angular2/test_lib';
-import {
-  Injector,
-  bind,
-  ResolvedBinding,
-  Key,
-  forwardRef,
-  DependencyAnnotation,
-  Injectable
-} from 'angular2/di';
-
-import {InjectorInlineStrategy, InjectorDynamicStrategy} from 'angular2/src/di/injector';
-
-import {Optional, Inject} from 'angular2/src/di/decorators';
-import * as ann from 'angular2/src/di/annotations_impl';
-
-class CustomDependencyAnnotation extends DependencyAnnotation {}
-
-class Engine {}
-
-@Injectable(ann.self)
-class EngineWithSetVisibility {
-}
-
-@Injectable()
-class CarNeedsEngineWithSetVisibility {
-  constructor(engine: EngineWithSetVisibility) {}
-}
-
-class BrokenEngine {
-  constructor() { throw new BaseException("Broken Engine"); }
-}
-
-class DashboardSoftware {}
-
-@Injectable()
-class Dashboard {
-  constructor(software: DashboardSoftware) {}
-}
-
-class TurboEngine extends Engine {}
-
-@Injectable()
-class Car {
-  engine: Engine;
-  constructor(engine: Engine) { this.engine = engine; }
-}
-
-@Injectable()
-class CarWithOptionalEngine {
-  engine;
-  constructor(@Optional() engine: Engine) { this.engine = engine; }
-}
-
-@Injectable()
-class CarWithDashboard {
-  engine: Engine;
-  dashboard: Dashboard;
-  constructor(engine: Engine, dashboard: Dashboard) {
-    this.engine = engine;
-    this.dashboard = dashboard;
-  }
-}
-
-@Injectable()
-class SportsCar extends Car {
-  engine: Engine;
-  constructor(engine: Engine) { super(engine); }
-}
-
-@Injectable()
-class CarWithInject {
-  engine: Engine;
-  constructor(@Inject(TurboEngine) engine: Engine) { this.engine = engine; }
-}
-
-@Injectable()
-class CyclicEngine {
-  constructor(car: Car) {}
-}
-
-class NoAnnotations {
-  constructor(secretDependency) {}
-}
-
-export function main() {
-  var dynamicBindings = [
-    bind('binding0')
-        .toValue(1),
-    bind('binding1').toValue(1),
-    bind('binding2').toValue(1),
-    bind('binding3').toValue(1),
-    bind('binding4').toValue(1),
-    bind('binding5').toValue(1),
-    bind('binding6').toValue(1),
-    bind('binding7').toValue(1),
-    bind('binding8').toValue(1),
-    bind('binding9').toValue(1),
-    bind('binding10').toValue(1)
-  ];
-
-  [{strategy: 'inline', bindings: [], strategyClass: InjectorInlineStrategy},
-   {
-     strategy: 'dynamic',
-     bindings: dynamicBindings,
-     strategyClass: InjectorDynamicStrategy
-   }].forEach((context) => {
-
-    function createInjector(bindings: any[]) {
-      return Injector.resolveAndCreate(bindings.concat(context['bindings']));
-    }
-
-    describe(`injector ${context['strategy']}`, () => {
-      it("should use the right strategy", () => {
-        var injector = createInjector([]);
-        expect(injector.internalStrategy).toBeAnInstanceOf(context['strategyClass']);
-      });
-
-      it('should instantiate a class without dependencies', () => {
-        var injector = createInjector([Engine]);
-        var engine = injector.get(Engine);
-
-        expect(engine).toBeAnInstanceOf(Engine);
-      });
-
-      it('should resolve dependencies based on type information', () => {
-        var injector = createInjector([Engine, Car]);
-        var car = injector.get(Car);
-
-        expect(car).toBeAnInstanceOf(Car);
-        expect(car.engine).toBeAnInstanceOf(Engine);
-      });
-
-      it('should resolve dependencies based on @Inject annotation', () => {
-        var injector = createInjector([TurboEngine, Engine, CarWithInject]);
-        var car = injector.get(CarWithInject);
-
-        expect(car).toBeAnInstanceOf(CarWithInject);
-        expect(car.engine).toBeAnInstanceOf(TurboEngine);
-      });
-
-      it('should throw when no type and not @Inject', () => {
-        expect(() => createInjector([NoAnnotations]))
-            .toThrowError('Cannot resolve all parameters for NoAnnotations(?). ' +
-                          'Make sure they all have valid type or annotations.');
-      });
-
-      it('should cache instances', () => {
-        var injector = createInjector([Engine]);
-
-        var e1 = injector.get(Engine);
-        var e2 = injector.get(Engine);
-
-        expect(e1).toBe(e2);
-      });
-
-      it('should bind to a value', () => {
-        var injector = createInjector([bind(Engine).toValue("fake engine")]);
-
-        var engine = injector.get(Engine);
-        expect(engine).toEqual("fake engine");
-      });
-
-      it('should bind to a factory', () => {
-        function sportsCarFactory(e) { return new SportsCar(e); }
-
-        var injector = createInjector([Engine, bind(Car).toFactory(sportsCarFactory, [Engine])]);
-
-        var car = injector.get(Car);
-        expect(car).toBeAnInstanceOf(SportsCar);
-        expect(car.engine).toBeAnInstanceOf(Engine);
-      });
-
-      it('should supporting binding to null', () => {
-        var injector = createInjector([bind(Engine).toValue(null)]);
-
-        for (var i = 0; i < 20; ++i) {
-          injector.get(Engine);
-        }
-
-        var engine = injector.get(Engine);
-        expect(engine).toBeNull();
-      });
-
-      it('should bind to an alias', () => {
-        var injector = createInjector(
-            [Engine, bind(SportsCar).toClass(SportsCar), bind(Car).toAlias(SportsCar)]);
-
-        var car = injector.get(Car);
-        var sportsCar = injector.get(SportsCar);
-        expect(car).toBeAnInstanceOf(SportsCar);
-        expect(car).toBe(sportsCar);
-      });
-
-      it('should throw when the aliased binding does not exist', () => {
-        var injector = createInjector([bind('car').toAlias(SportsCar)]);
-        var e = `No provider for ${stringify(SportsCar)}! (car -> ${stringify(SportsCar)})`;
-        expect(() => injector.get('car')).toThrowError(e);
-      });
-
-      it('should throw with a meaningful message when the aliased binding is blank', () => {
-        expect(() => bind('car').toAlias(null)).toThrowError('Can not alias car to a blank value!');
-      });
-
-      it('should handle forwardRef in toAlias', () => {
-        var injector = createInjector([
-          bind('originalEngine')
-              .toClass(forwardRef(() => Engine)),
-          bind('aliasedEngine').toAlias(forwardRef(() => 'originalEngine'))
-        ]);
-        expect(injector.get('aliasedEngine')).toBeAnInstanceOf(Engine);
-      });
-
-      it('should support overriding factory dependencies', () => {
-        var injector =
-            createInjector([Engine, bind(Car).toFactory((e) => new SportsCar(e), [Engine])]);
-
-        var car = injector.get(Car);
-        expect(car).toBeAnInstanceOf(SportsCar);
-        expect(car.engine).toBeAnInstanceOf(Engine);
-      });
-
-      it('should support optional dependencies', () => {
-        var injector = createInjector([CarWithOptionalEngine]);
-
-        var car = injector.get(CarWithOptionalEngine);
-        expect(car.engine).toEqual(null);
-      });
-
-      it("should flatten passed-in bindings", () => {
-        var injector = createInjector([[[Engine, Car]]]);
-
-        var car = injector.get(Car);
-        expect(car).toBeAnInstanceOf(Car);
-      });
-
-      it("should use the last binding when there are multiple bindings for same token", () => {
-        var injector =
-            createInjector([bind(Engine).toClass(Engine), bind(Engine).toClass(TurboEngine)]);
-
-        expect(injector.get(Engine)).toBeAnInstanceOf(TurboEngine);
-      });
-
-      it('should use non-type tokens', () => {
-        var injector = createInjector([bind('token').toValue('value')]);
-
-        expect(injector.get('token')).toEqual('value');
-      });
-
-      it('should throw when given invalid bindings', () => {
-        expect(() => createInjector(<any>["blah"]))
-            .toThrowError(
-                'Invalid binding - only instances of Binding and Type are allowed, got: blah');
-        expect(() => createInjector(<any>[bind("blah")]))
-            .toThrowError('Invalid binding - only instances of Binding and Type are allowed, ' +
-                          'got: blah');
-      });
-
-      it('should provide itself', () => {
-        var parent = createInjector([]);
-        var child = parent.resolveAndCreateChild([]);
-
-        expect(child.get(Injector)).toBe(child);
-      });
-
-      it('should throw when no provider defined', () => {
-        var injector = createInjector([]);
-        expect(() => injector.get('NonExisting')).toThrowError('No provider for NonExisting!');
-      });
-
-      it('should show the full path when no provider', () => {
-        var injector = createInjector([CarWithDashboard, Engine, Dashboard]);
-        expect(() => injector.get(CarWithDashboard))
-            .toThrowError(
-                `No provider for DashboardSoftware! (${stringify(CarWithDashboard)} -> ${stringify(Dashboard)} -> DashboardSoftware)`);
-      });
-
-      it('should throw when trying to instantiate a cyclic dependency', () => {
-        var injector = createInjector([Car, bind(Engine).toClass(CyclicEngine)]);
-
-        expect(() => injector.get(Car))
-            .toThrowError(
-                `Cannot instantiate cyclic dependency! (${stringify(Car)} -> ${stringify(Engine)} -> ${stringify(Car)})`);
-      });
-
-      it('should show the full path when error happens in a constructor', () => {
-        var injector = createInjector([Car, bind(Engine).toClass(BrokenEngine)]);
-
-        try {
-          injector.get(Car);
-          throw "Must throw";
-        } catch (e) {
-          expect(e.message)
-              .toContain(`Error during instantiation of Engine! (${stringify(Car)} -> Engine)`);
-          expect(e.originalException instanceof BaseException).toBeTruthy();
-          expect(e.causeKey.token).toEqual(Engine);
-        }
-      });
-
-      it('should instantiate an object after a failed attempt', () => {
-        var isBroken = true;
-
-        var injector = createInjector(
-            [Car, bind(Engine).toFactory(() => isBroken ? new BrokenEngine() : new Engine())]);
-
-        expect(() => injector.get(Car)).toThrowError(new RegExp("Error"));
-
-        isBroken = false;
-
-        expect(injector.get(Car)).toBeAnInstanceOf(Car);
-      });
-
-      it('should support null values', () => {
-        var injector = createInjector([bind('null').toValue(null)]);
-        expect(injector.get('null')).toBe(null);
-      });
-    });
-
-
-    describe("child", () => {
-      it('should load instances from parent injector', () => {
-        var parent = Injector.resolveAndCreate([Engine]);
-        var child = parent.resolveAndCreateChild([]);
-
-        var engineFromParent = parent.get(Engine);
-        var engineFromChild = child.get(Engine);
-
-        expect(engineFromChild).toBe(engineFromParent);
-      });
-
-      it("should not use the child bindings when resolving the dependencies of a parent binding",
-         () => {
-           var parent = Injector.resolveAndCreate([Car, Engine]);
-           var child = parent.resolveAndCreateChild([bind(Engine).toClass(TurboEngine)]);
-
-           var carFromChild = child.get(Car);
-           expect(carFromChild.engine).toBeAnInstanceOf(Engine);
-         });
-
-      it('should create new instance in a child injector', () => {
-        var parent = Injector.resolveAndCreate([Engine]);
-        var child = parent.resolveAndCreateChild([bind(Engine).toClass(TurboEngine)]);
-
-        var engineFromParent = parent.get(Engine);
-        var engineFromChild = child.get(Engine);
-
-        expect(engineFromParent).not.toBe(engineFromChild);
-        expect(engineFromChild).toBeAnInstanceOf(TurboEngine);
-      });
-
-      it("should give access to direct parent", () => {
-        var parent = Injector.resolveAndCreate([]);
-        var child = parent.resolveAndCreateChild([]);
-        expect(child.parent).toBe(parent);
-      });
-    });
-
-    describe('resolve', () => {
-      it('should resolve and flatten', () => {
-        var bindings = Injector.resolve([Engine, [BrokenEngine]]);
-        bindings.forEach(function(b) {
-          if (isBlank(b)) return;  // the result is a sparse array
-          expect(b instanceof ResolvedBinding).toBe(true);
-        });
-      });
-
-      it('should resolve forward references', () => {
-        var bindings = Injector.resolve([
-          forwardRef(() => Engine),
-          [bind(forwardRef(() => BrokenEngine)).toClass(forwardRef(() => Engine))],
-          bind(forwardRef(() => String)).toFactory(() => 'OK', [forwardRef(() => Engine)])
-        ]);
-
-        var engineBinding = bindings[0];
-        var brokenEngineBinding = bindings[1];
-        var stringBinding = bindings[2];
-
-        expect(engineBinding.factory() instanceof Engine).toBe(true);
-        expect(brokenEngineBinding.factory() instanceof Engine).toBe(true);
-        expect(stringBinding.dependencies[0].key).toEqual(Key.get(Engine));
-      });
-
-      it('should support overriding factory dependencies with dependency annotations', () => {
-        var bindings = Injector.resolve([
-          bind("token")
-              .toFactory((e) => "result",
-                         [[new ann.Inject("dep"), new CustomDependencyAnnotation()]])
-        ]);
-        var binding = bindings[0];
-
-        expect(binding.dependencies[0].key.token).toEqual("dep");
-        expect(binding.dependencies[0].properties).toEqual([new CustomDependencyAnnotation()]);
-      });
-    });
-
-    describe("default visibility", () => {
-      it("should use the provided visibility", () => {
-        var bindings = Injector.resolve([CarNeedsEngineWithSetVisibility, EngineWithSetVisibility]);
-        var carBinding = bindings[0];
-        expect(carBinding.dependencies[0].visibility).toEqual(ann.self);
-      });
-
-      it("should set the default visibility to unbounded", () => {
-        var bindings = Injector.resolve([Car, Engine]);
-        var carBinding = bindings[0];
-        expect(carBinding.dependencies[0].visibility).toEqual(ann.unbounded);
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/di/key_dart_spec.dart b/modules/angular2/test/di/key_dart_spec.dart
deleted file mode 100644
index 47ae22cd723e..000000000000
--- a/modules/angular2/test/di/key_dart_spec.dart
+++ /dev/null
@@ -1,39 +0,0 @@
-/// This file contains tests that make sense only in Dart
-library angular2.test.di.key_dart_spec;
-
-import 'package:angular2/test_lib.dart';
-import 'package:angular2/di.dart';
-
-main() {
-  describe('TypeLiteral', () {
-    it('contains type', () {
-      var t = new TypeLiteral<List<int>>();
-      expect('${t.type}').toEqual('List<int>');
-    });
-
-    it('can be a constant', () {
-      var a = const TypeLiteral<List<int>>();
-      var b = const TypeLiteral<List<int>>();
-      expect(identical(a, b)).toBe(true);
-    });
-
-    it('can be unique', () {
-      var a = const TypeLiteral<List<String>>();
-      var b = const TypeLiteral<List<int>>();
-      expect(identical(a, b)).toBe(false);
-    });
-  });
-
-  describe('Key', () {
-    KeyRegistry registry;
-
-    beforeEach(() {
-      registry = new KeyRegistry();
-    });
-
-    it('understands TypeLiteral', () {
-      var k = registry.get(const TypeLiteral<List<int>>());
-      expect('${k.token}').toEqual('List<int>');
-    });
-  });
-}
diff --git a/modules/angular2/test/di/key_spec.ts b/modules/angular2/test/di/key_spec.ts
deleted file mode 100644
index 5f36b9231d07..000000000000
--- a/modules/angular2/test/di/key_spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {describe, iit, it, expect, beforeEach} from 'angular2/test_lib';
-import {Key, KeyRegistry} from 'angular2/di';
-
-export function main() {
-  describe("key", function() {
-    var registry: KeyRegistry;
-
-    beforeEach(function() { registry = new KeyRegistry(); });
-
-    it('should be equal to another key if type is the same',
-       function() { expect(registry.get('car')).toBe(registry.get('car')); });
-
-    it('should not be equal to another key if types are different',
-       function() { expect(registry.get('car')).not.toBe(registry.get('porsche')); });
-
-    it('should return the passed in key',
-       function() { expect(registry.get(registry.get('car'))).toBe(registry.get('car')); });
-
-  });
-}
\ No newline at end of file
diff --git a/modules/angular2/test/directives/class_spec.ts b/modules/angular2/test/directives/class_spec.ts
deleted file mode 100644
index 9cb281d676b8..000000000000
--- a/modules/angular2/test/directives/class_spec.ts
+++ /dev/null
@@ -1,332 +0,0 @@
-import {
-  AsyncTestCompleter,
-  TestComponentBuilder,
-  beforeEach,
-  beforeEachBindings,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {Component, View} from 'angular2/angular2';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {CSSClass} from 'angular2/src/directives/class';
-
-export function main() {
-  describe('binding to CSS class list', () => {
-
-    describe('expressions evaluating to objects', () => {
-
-      it('should add classes specified in an object literal',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [class]="{foo: true, bar: false}"></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo');
-
-                 async.done();
-               });
-         }));
-
-      it('should add and remove classes based on changes in object literal values',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [class]="{foo: condition, bar: !condition}"></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo');
-
-                 rootTC.componentInstance.condition = false;
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding bar');
-
-                 async.done();
-               });
-         }));
-
-      it('should add and remove classes based on changes to the expression object',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [class]="objExpr"></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo');
-
-                 StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo bar');
-
-                 StringMapWrapper.set(rootTC.componentInstance.objExpr, 'baz', true);
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo bar baz');
-
-                 StringMapWrapper.delete(rootTC.componentInstance.objExpr, 'bar');
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo baz');
-
-                 async.done();
-               });
-         }));
-
-      it('should add and remove classes based on reference changes to the expression object',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [class]="objExpr"></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo');
-
-                 rootTC.componentInstance.objExpr = {foo: true, bar: true};
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo bar');
-
-                 rootTC.componentInstance.objExpr = {baz: true};
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding baz');
-
-                 async.done();
-               });
-         }));
-    });
-
-    describe('expressions evaluating to lists', () => {
-
-      it('should add classes specified in a list literal',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = `<div [class]="['foo', 'bar']"></div>`;
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo bar');
-
-                 async.done();
-               });
-         }));
-
-      it('should add and remove classes based on changes to the expression',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [class]="arrExpr"></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-
-                 var arrExpr: List<string> = rootTC.componentInstance.arrExpr;
-
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo');
-
-                 arrExpr.push('bar');
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo bar');
-
-                 arrExpr[1] = 'baz';
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo baz');
-
-                 ListWrapper.remove(rootTC.componentInstance.arrExpr, 'baz');
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo');
-
-                 async.done();
-               });
-         }));
-
-      it('should add and remove classes when a reference changes',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [class]="arrExpr"></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo');
-
-                 rootTC.componentInstance.arrExpr = ['bar'];
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding bar');
-
-                 async.done();
-               });
-         }));
-    });
-
-    describe('expressions evaluating to string', () => {
-
-      it('should add classes specified in a string literal',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = `<div [class]="'foo bar'"></div>`;
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo bar');
-
-                 async.done();
-               });
-         }));
-
-      it('should add and remove classes based on changes to the expression',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [class]="strExpr"></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo');
-
-                 rootTC.componentInstance.strExpr = 'foo bar';
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding foo bar');
-
-                 rootTC.componentInstance.strExpr = 'baz';
-                 rootTC.detectChanges();
-                 expect(rootTC.componentViewChildren[0].nativeElement.className)
-                     .toEqual('ng-binding baz');
-
-                 async.done();
-               });
-         }));
-    });
-
-    it('should remove active classes when expression evaluates to null',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div [class]="objExpr"></div>';
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(rootTC.componentViewChildren[0].nativeElement.className)
-                   .toEqual('ng-binding foo');
-
-               rootTC.componentInstance.objExpr = null;
-               rootTC.detectChanges();
-               expect(rootTC.componentViewChildren[0].nativeElement.className)
-                   .toEqual('ng-binding');
-
-               rootTC.componentInstance.objExpr = {'foo': false, 'bar': true};
-               rootTC.detectChanges();
-               expect(rootTC.componentViewChildren[0].nativeElement.className)
-                   .toEqual('ng-binding bar');
-
-               async.done();
-             });
-       }));
-
-    it('should have no effect when activated by a static class attribute',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div class="init foo"></div>';
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               // TODO(pk): in CJS className isn't initialized properly if we don't mutate classes
-               expect(ListWrapper.join(DOM.classList(rootTC.componentViewChildren[0].nativeElement),
-                                       ' '))
-                   .toEqual('init foo ng-binding');
-               async.done();
-             });
-       }));
-
-    it('should co-operate with the class attribute',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div [class]="objExpr" class="init foo"></div>';
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
-               rootTC.detectChanges();
-               expect(rootTC.componentViewChildren[0].nativeElement.className)
-                   .toEqual('init foo ng-binding bar');
-
-               StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
-               rootTC.detectChanges();
-               expect(rootTC.componentViewChildren[0].nativeElement.className)
-                   .toEqual('init ng-binding bar');
-
-               async.done();
-             });
-       }));
-
-    it('should co-operate with the class attribute and class.name binding',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div class="init foo" [class]="objExpr" [class.baz]="condition"></div>';
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(rootTC.componentViewChildren[0].nativeElement.className)
-                   .toEqual('init foo ng-binding baz');
-
-               StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
-               rootTC.detectChanges();
-               expect(rootTC.componentViewChildren[0].nativeElement.className)
-                   .toEqual('init foo ng-binding baz bar');
-
-               StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
-               rootTC.detectChanges();
-               expect(rootTC.componentViewChildren[0].nativeElement.className)
-                   .toEqual('init ng-binding baz bar');
-
-               rootTC.componentInstance.condition = false;
-               rootTC.detectChanges();
-               expect(rootTC.componentViewChildren[0].nativeElement.className)
-                   .toEqual('init ng-binding bar');
-
-               async.done();
-             });
-       }));
-  })
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [CSSClass]})
-class TestComponent {
-  condition: boolean = true;
-  arrExpr: List<string> = ['foo'];
-  objExpr = {'foo': true, 'bar': false};
-  strExpr = 'foo';
-}
diff --git a/modules/angular2/test/directives/ng_for_spec.ts b/modules/angular2/test/directives/ng_for_spec.ts
deleted file mode 100644
index f0981b474d3d..000000000000
--- a/modules/angular2/test/directives/ng_for_spec.ts
+++ /dev/null
@@ -1,267 +0,0 @@
-import {
-  AsyncTestCompleter,
-  TestComponentBuilder,
-  beforeEach,
-  beforeEachBindings,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {Component, View} from 'angular2/angular2';
-
-import {NgFor} from 'angular2/src/directives/ng_for';
-
-
-export function main() {
-  describe('ng-for', () => {
-    var TEMPLATE =
-        '<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>';
-
-    it('should reflect initial elements',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(TestComponent, TEMPLATE)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('1;2;');
-               async.done();
-             });
-       }));
-
-    it('should reflect added elements',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(TestComponent, TEMPLATE)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-
-               (<number[]>rootTC.componentInstance.items).push(3);
-               rootTC.detectChanges();
-
-               expect(rootTC.nativeElement).toHaveText('1;2;3;');
-               async.done();
-             });
-       }));
-
-    it('should reflect removed elements',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(TestComponent, TEMPLATE)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-
-               ListWrapper.removeAt(rootTC.componentInstance.items, 1);
-               rootTC.detectChanges();
-
-               expect(rootTC.nativeElement).toHaveText('1;');
-               async.done();
-             });
-       }));
-
-    it('should reflect moved elements',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(TestComponent, TEMPLATE)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-
-               ListWrapper.removeAt(rootTC.componentInstance.items, 0);
-               (<number[]>rootTC.componentInstance.items).push(1);
-               rootTC.detectChanges();
-
-               expect(rootTC.nativeElement).toHaveText('2;1;');
-               async.done();
-             });
-       }));
-
-    it('should reflect a mix of all changes (additions/removals/moves)',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(TestComponent, TEMPLATE)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.componentInstance.items = [0, 1, 2, 3, 4, 5];
-               rootTC.detectChanges();
-
-               rootTC.componentInstance.items = [6, 2, 7, 0, 4, 8];
-               rootTC.detectChanges();
-
-               expect(rootTC.nativeElement).toHaveText('6;2;7;0;4;8;');
-               async.done();
-             });
-       }));
-
-    it('should iterate over an array of objects',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>';
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-
-               // INIT
-               rootTC.componentInstance.items = [{'name': 'misko'}, {'name': 'shyam'}];
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('misko;shyam;');
-
-               // GROW
-               (<any[]>rootTC.componentInstance.items).push({'name': 'adam'});
-               rootTC.detectChanges();
-
-               expect(rootTC.nativeElement).toHaveText('misko;shyam;adam;');
-
-               // SHRINK
-               ListWrapper.removeAt(rootTC.componentInstance.items, 2);
-               ListWrapper.removeAt(rootTC.componentInstance.items, 0);
-               rootTC.detectChanges();
-
-               expect(rootTC.nativeElement).toHaveText('shyam;');
-               async.done();
-             });
-       }));
-
-    it('should gracefully handle nulls',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<ul><li template="ng-for #item of null">{{item}};</li></ul>';
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('');
-               async.done();
-             });
-       }));
-
-    it('should gracefully handle ref changing to null and back',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(TestComponent, TEMPLATE)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('1;2;');
-
-               rootTC.componentInstance.items = null;
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('');
-
-               rootTC.componentInstance.items = [1, 2, 3];
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('1;2;3;');
-               async.done();
-             });
-       }));
-
-    it('should throw on ref changing to string',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(TestComponent, TEMPLATE)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('1;2;');
-
-               rootTC.componentInstance.items = 'whaaa';
-               expect(() => rootTC.detectChanges()).toThrowError();
-               async.done();
-             });
-       }));
-
-    it('should works with duplicates',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(TestComponent, TEMPLATE)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               var a = new Foo();
-               rootTC.componentInstance.items = [a, a];
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('foo;foo;');
-               async.done();
-             });
-       }));
-
-    it('should repeat over nested arrays',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div>' +
-                        '<div template="ng-for #item of items">' +
-                        '<div template="ng-for #subitem of item">' +
-                        '{{subitem}}-{{item.length}};' +
-                        '</div>|' +
-                        '</div>' +
-                        '</div>';
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.componentInstance.items = [['a', 'b'], ['c']];
-               rootTC.detectChanges();
-               rootTC.detectChanges();
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('a-2;b-2;|c-1;|');
-
-               rootTC.componentInstance.items = [['e'], ['f', 'g']];
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('e-1;|f-2;g-2;|');
-
-               async.done();
-             });
-       }));
-
-    it('should repeat over nested arrays with no intermediate element',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div><template ng-for #item [ng-for-of]="items">' +
-                        '<div template="ng-for #subitem of item">' +
-                        '{{subitem}}-{{item.length}};' +
-                        '</div></template></div>';
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.componentInstance.items = [['a', 'b'], ['c']];
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('a-2;b-2;c-1;');
-
-               rootTC.componentInstance.items = [['e'], ['f', 'g']];
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('e-1;f-2;g-2;');
-               async.done();
-             });
-       }));
-
-    it('should display indices correctly',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template =
-             '<div><copy-me template="ng-for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.componentInstance.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('0123456789');
-
-               rootTC.componentInstance.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('0123456789');
-               async.done();
-             });
-       }));
-
-  });
-}
-
-class Foo {
-  toString() { return 'foo'; }
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [NgFor]})
-class TestComponent {
-  items: any;
-  constructor() { this.items = [1, 2]; }
-}
diff --git a/modules/angular2/test/directives/ng_if_spec.ts b/modules/angular2/test/directives/ng_if_spec.ts
deleted file mode 100644
index 7266ea8115b6..000000000000
--- a/modules/angular2/test/directives/ng_if_spec.ts
+++ /dev/null
@@ -1,224 +0,0 @@
-import {
-  AsyncTestCompleter,
-  TestComponentBuilder,
-  By,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {Component, View} from 'angular2/angular2';
-
-import {NgIf} from 'angular2/src/directives/ng_if';
-
-export function main() {
-  describe('ng-if directive', () => {
-    it('should work in a template attribute',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
-
-         tcb.overrideTemplate(TestComponent, html)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
-               expect(rootTC.nativeElement).toHaveText('hello');
-               async.done();
-             });
-       }));
-
-    it('should work in a template element',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var html =
-             '<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
-
-         tcb.overrideTemplate(TestComponent, html)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
-               expect(rootTC.nativeElement).toHaveText('hello2');
-               async.done();
-             });
-       }));
-
-    it('should toggle node when condition changes',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
-
-         tcb.overrideTemplate(TestComponent, html)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.componentInstance.booleanCondition = false;
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
-               expect(rootTC.nativeElement).toHaveText('');
-
-               rootTC.componentInstance.booleanCondition = true;
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
-               expect(rootTC.nativeElement).toHaveText('hello');
-
-               rootTC.componentInstance.booleanCondition = false;
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
-               expect(rootTC.nativeElement).toHaveText('');
-
-               async.done();
-             });
-       }));
-
-    it('should handle nested if correctly',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var html =
-             '<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>';
-
-         tcb.overrideTemplate(TestComponent, html)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.componentInstance.booleanCondition = false;
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
-               expect(rootTC.nativeElement).toHaveText('');
-
-               rootTC.componentInstance.booleanCondition = true;
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
-               expect(rootTC.nativeElement).toHaveText('hello');
-
-               rootTC.componentInstance.nestedBooleanCondition = false;
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
-               expect(rootTC.nativeElement).toHaveText('');
-
-               rootTC.componentInstance.nestedBooleanCondition = true;
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
-               expect(rootTC.nativeElement).toHaveText('hello');
-
-               rootTC.componentInstance.booleanCondition = false;
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
-               expect(rootTC.nativeElement).toHaveText('');
-
-               async.done();
-             });
-       }));
-
-    it('should update several nodes with if',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var html =
-             '<div>' +
-             '<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
-             '<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
-             '<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
-             '</div>';
-
-         tcb.overrideTemplate(TestComponent, html)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(3);
-               expect(DOM.getText(rootTC.nativeElement))
-                   .toEqual('helloNumberhelloStringhelloFunction');
-
-               rootTC.componentInstance.numberCondition = 0;
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
-               expect(rootTC.nativeElement).toHaveText('helloString');
-
-               rootTC.componentInstance.numberCondition = 1;
-               rootTC.componentInstance.stringCondition = "bar";
-               rootTC.detectChanges();
-               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
-               expect(rootTC.nativeElement).toHaveText('helloNumber');
-               async.done();
-             });
-       }));
-
-
-    if (!IS_DARTIUM) {
-      it('should not add the element twice if the condition goes from true to true (JS)',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
-
-           tcb.overrideTemplate(TestComponent, html)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
-                 expect(rootTC.nativeElement).toHaveText('hello');
-
-                 rootTC.componentInstance.numberCondition = 2;
-                 rootTC.detectChanges();
-                 expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
-                 expect(rootTC.nativeElement).toHaveText('hello');
-
-                 async.done();
-               });
-         }));
-
-      it('should not recreate the element if the condition goes from true to true (JS)',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
-
-           tcb.overrideTemplate(TestComponent, html)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 DOM.addClass(DOM.querySelector(rootTC.nativeElement, 'copy-me'), "foo");
-
-                 rootTC.componentInstance.numberCondition = 2;
-                 rootTC.detectChanges();
-                 expect(DOM.hasClass(DOM.querySelector(rootTC.nativeElement, 'copy-me'), "foo"))
-                     .toBe(true);
-
-                 async.done();
-               });
-         }));
-    }
-
-    if (IS_DARTIUM) {
-      it('should not create the element if the condition is not a boolean (DART)',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
-
-           tcb.overrideTemplate(TestComponent, html)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 expect(() => rootTC.detectChanges()).toThrowError();
-                 expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
-                 expect(rootTC.nativeElement).toHaveText('');
-                 async.done();
-               });
-         }));
-    }
-
-  });
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [NgIf]})
-class TestComponent {
-  booleanCondition: boolean;
-  nestedBooleanCondition: boolean;
-  numberCondition: number;
-  stringCondition: string;
-  functionCondition: Function;
-  constructor() {
-    this.booleanCondition = true;
-    this.nestedBooleanCondition = true;
-    this.numberCondition = 1;
-    this.stringCondition = "foo";
-    this.functionCondition = function(s, n) { return s == "foo" && n == 1; };
-  }
-}
diff --git a/modules/angular2/test/directives/ng_style_spec.ts b/modules/angular2/test/directives/ng_style_spec.ts
deleted file mode 100644
index 201f54d503d3..000000000000
--- a/modules/angular2/test/directives/ng_style_spec.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import {
-  AsyncTestCompleter,
-  TestComponentBuilder,
-  beforeEach,
-  beforeEachBindings,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {StringMapWrapper} from 'angular2/src/facade/collection';
-
-import {Component, View} from 'angular2/angular2';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {NgStyle} from 'angular2/src/directives/ng_style';
-
-export function main() {
-  describe('binding to CSS styles', () => {
-
-    it('should add styles specified in an object literal',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = `<div [ng-style]="{'text-align': 'right'}"></div>`;
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
-                   .toEqual('right');
-
-               async.done();
-             });
-       }));
-
-    it('should add and change styles specified in an object expression',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = `<div [ng-style]="expr"></div>`;
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               var expr: Map<string, any>;
-
-               rootTC.componentInstance.expr = {'text-align': 'right'};
-               rootTC.detectChanges();
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
-                   .toEqual('right');
-
-               expr = rootTC.componentInstance.expr;
-               expr['text-align'] = 'left';
-               rootTC.detectChanges();
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
-                   .toEqual('left');
-
-               async.done();
-             });
-       }));
-
-    it('should remove styles when deleting a key in an object expression',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = `<div [ng-style]="expr"></div>`;
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.componentInstance.expr = {'text-align': 'right'};
-               rootTC.detectChanges();
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
-                   .toEqual('right');
-
-               StringMapWrapper.delete(rootTC.componentInstance.expr, 'text-align');
-               rootTC.detectChanges();
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
-                   .toEqual('');
-
-               async.done();
-             });
-       }));
-
-    it('should co-operate with the style attribute',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = `<div style="font-size: 12px" [ng-style]="expr"></div>`;
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.componentInstance.expr = {'text-align': 'right'};
-               rootTC.detectChanges();
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
-                   .toEqual('right');
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
-                   .toEqual('12px');
-
-               StringMapWrapper.delete(rootTC.componentInstance.expr, 'text-align');
-               rootTC.detectChanges();
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
-                   .toEqual('');
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
-                   .toEqual('12px');
-
-               async.done();
-             });
-       }));
-
-    it('should co-operate with the style.[styleName]="expr" special-case in the compiler',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = `<div [style.font-size.px]="12" [ng-style]="expr"></div>`;
-
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.componentInstance.expr = {'text-align': 'right'};
-               rootTC.detectChanges();
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
-                   .toEqual('right');
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
-                   .toEqual('12px');
-
-               StringMapWrapper.delete(rootTC.componentInstance.expr, 'text-align');
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
-                   .toEqual('12px');
-
-               rootTC.detectChanges();
-               expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
-                   .toEqual('');
-
-               async.done();
-             });
-       }));
-  })
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [NgStyle]})
-class TestComponent {
-  expr;
-}
diff --git a/modules/angular2/test/directives/ng_switch_spec.ts b/modules/angular2/test/directives/ng_switch_spec.ts
deleted file mode 100644
index 1cb291ff5b25..000000000000
--- a/modules/angular2/test/directives/ng_switch_spec.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-import {
-  AsyncTestCompleter,
-  TestComponentBuilder,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {Component, View} from 'angular2/angular2';
-
-import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/src/directives/ng_switch';
-
-export function main() {
-  describe('switch', () => {
-    describe('switch value changes', () => {
-      it('should switch amongst when values',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div>' +
-                          '<ul [ng-switch]="switchValue">' +
-                          '<template ng-switch-when="a"><li>when a</li></template>' +
-                          '<template ng-switch-when="b"><li>when b</li></template>' +
-                          '</ul></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('');
-
-                 rootTC.componentInstance.switchValue = 'a';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when a');
-
-                 rootTC.componentInstance.switchValue = 'b';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when b');
-
-                 async.done();
-               });
-         }));
-
-      it('should switch amongst when values with fallback to default',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div>' +
-                          '<ul [ng-switch]="switchValue">' +
-                          '<li template="ng-switch-when \'a\'">when a</li>' +
-                          '<li template="ng-switch-default">when default</li>' +
-                          '</ul></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when default');
-
-                 rootTC.componentInstance.switchValue = 'a';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when a');
-
-                 rootTC.componentInstance.switchValue = 'b';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when default');
-
-                 async.done();
-               });
-         }));
-
-      it('should support multiple whens with the same value',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div>' +
-                          '<ul [ng-switch]="switchValue">' +
-                          '<template ng-switch-when="a"><li>when a1;</li></template>' +
-                          '<template ng-switch-when="b"><li>when b1;</li></template>' +
-                          '<template ng-switch-when="a"><li>when a2;</li></template>' +
-                          '<template ng-switch-when="b"><li>when b2;</li></template>' +
-                          '<template ng-switch-default><li>when default1;</li></template>' +
-                          '<template ng-switch-default><li>when default2;</li></template>' +
-                          '</ul></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when default1;when default2;');
-
-                 rootTC.componentInstance.switchValue = 'a';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when a1;when a2;');
-
-                 rootTC.componentInstance.switchValue = 'b';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when b1;when b2;');
-
-                 async.done();
-               });
-         }));
-    });
-
-    describe('when values changes', () => {
-      it('should switch amongst when values',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div>' +
-                          '<ul [ng-switch]="switchValue">' +
-                          '<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
-                          '<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
-                          '<template ng-switch-default><li>when default;</li></template>' +
-                          '</ul></div>';
-
-           tcb.overrideTemplate(TestComponent, template)
-               .createAsync(TestComponent)
-               .then((rootTC) => {
-                 rootTC.componentInstance.when1 = 'a';
-                 rootTC.componentInstance.when2 = 'b';
-                 rootTC.componentInstance.switchValue = 'a';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when 1;');
-
-                 rootTC.componentInstance.switchValue = 'b';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when 2;');
-
-                 rootTC.componentInstance.switchValue = 'c';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when default;');
-
-                 rootTC.componentInstance.when1 = 'c';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when 1;');
-
-                 rootTC.componentInstance.when1 = 'd';
-                 rootTC.detectChanges();
-                 expect(rootTC.nativeElement).toHaveText('when default;');
-
-                 async.done();
-               });
-         }));
-    });
-  });
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]})
-class TestComponent {
-  switchValue: any;
-  when1: any;
-  when2: any;
-
-  constructor() {
-    this.switchValue = null;
-    this.when1 = null;
-    this.when2 = null;
-  }
-}
diff --git a/modules/angular2/test/directives/non_bindable_spec.ts b/modules/angular2/test/directives/non_bindable_spec.ts
deleted file mode 100644
index 1557c1729e71..000000000000
--- a/modules/angular2/test/directives/non_bindable_spec.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  AsyncTestCompleter,
-  TestComponentBuilder,
-  By,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {Component, Directive, View} from 'angular2/angular2';
-
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-
-import {NgNonBindable} from 'angular2/src/directives/ng_non_bindable';
-
-export function main() {
-  describe('non-bindable', () => {
-    it('should not interpolate children',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>';
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('foo{{text}}');
-               async.done();
-             });
-       }));
-
-    it('should ignore directives on child nodes',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>';
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-
-               // We must use DOM.querySelector instead of rootTC.query here
-               // since the elements inside are not compiled.
-               var span = DOM.querySelector(rootTC.nativeElement, '#child');
-               expect(DOM.hasClass(span, 'compiled')).toBeFalsy();
-               async.done();
-             });
-       }));
-
-    it('should trigger directives on the same node',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>';
-         tcb.overrideTemplate(TestComponent, template)
-             .createAsync(TestComponent)
-             .then((rootTC) => {
-               rootTC.detectChanges();
-               var span = DOM.querySelector(rootTC.nativeElement, '#child');
-               expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
-               async.done();
-             });
-       }));
-  })
-}
-
-@Directive({selector: '[test-dec]'})
-class TestDirective {
-  constructor(el: ElementRef) { DOM.addClass(el.nativeElement, 'compiled'); }
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [NgNonBindable, TestDirective]})
-class TestComponent {
-  text: string;
-  constructor() { this.text = 'foo'; }
-}
diff --git a/modules/angular2/test/dom/html5lib_adapter.server.spec.dart b/modules/angular2/test/dom/html5lib_adapter.server.spec.dart
deleted file mode 100644
index 7dd357290076..000000000000
--- a/modules/angular2/test/dom/html5lib_adapter.server.spec.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library angular2.dom.html5lib_adapter.test;
-
-import 'package:guinness/guinness.dart';
-import 'package:unittest/unittest.dart' hide expect;
-import 'package:angular2/src/dom/html_adapter.dart';
-
-// A smoke-test of the adapter. It is primarily tested by the compiler.
-main() {
-  describe('Html5Lib DOM Adapter', () {
-    Html5LibDomAdapter subject;
-
-    beforeEach(() {
-      subject = new Html5LibDomAdapter();
-    });
-
-    it('should parse HTML', () {
-      expect(subject.parse('<div>hi</div>'), isNotNull);
-    });
-  });
-}
diff --git a/modules/angular2/test/facade/async_dart_spec.dart b/modules/angular2/test/facade/async_dart_spec.dart
deleted file mode 100644
index aa6541ff2282..000000000000
--- a/modules/angular2/test/facade/async_dart_spec.dart
+++ /dev/null
@@ -1,100 +0,0 @@
-/// This file contains tests that make sense only in Dart
-library angular2.test.facade.async_dart_spec;
-
-import 'package:angular2/test_lib.dart';
-import 'package:angular2/src/facade/async.dart';
-
-class MockException implements Error {
-  var message;
-  var stackTrace;
-}
-class NonError {
-  var message;
-}
-
-void functionThatThrows() {
-  try {
-    throw new MockException();
-  } catch (e, stack) {
-    // If we lose the stack trace the message will no longer match
-    // the first line in the stack
-    e.message = stack.toString().split('\n')[0];
-    e.stackTrace = stack;
-    rethrow;
-  }
-}
-
-void functionThatThrowsNonError() {
-  try {
-    throw new NonError();
-  } catch (e, stack) {
-    // If we lose the stack trace the message will no longer match
-    // the first line in the stack
-    e.message = stack.toString().split('\n')[0];
-    rethrow;
-  }
-}
-
-void expectFunctionThatThrowsWithStackTrace(
-    Future future, AsyncTestCompleter async) {
-  PromiseWrapper.catchError(future, (err, StackTrace stack) {
-    expect(stack.toString().split('\n')[0]).toEqual(err.message);
-    async.done();
-  });
-}
-
-main() {
-  describe('async facade', () {
-    describe('Completer', () {
-      it('should preserve Error stack traces', inject([AsyncTestCompleter],
-          (async) {
-        var c = PromiseWrapper.completer();
-
-        expectFunctionThatThrowsWithStackTrace(c.promise, async);
-
-        try {
-          functionThatThrows();
-        } catch (e) {
-          c.reject(e, null);
-        }
-      }));
-
-      it('should preserve error stack traces for non-Errors', inject(
-          [AsyncTestCompleter], (async) {
-        var c = PromiseWrapper.completer();
-
-        expectFunctionThatThrowsWithStackTrace(c.promise, async);
-
-        try {
-          functionThatThrowsNonError();
-        } catch (e, s) {
-          c.reject(e, s);
-        }
-      }));
-    });
-
-    describe('PromiseWrapper', () {
-      describe('reject', () {
-        it('should preserve Error stack traces', inject([AsyncTestCompleter],
-            (async) {
-          try {
-            functionThatThrows();
-          } catch (e) {
-            var rejectedFuture = PromiseWrapper.reject(e, null);
-            expectFunctionThatThrowsWithStackTrace(rejectedFuture, async);
-          }
-        }));
-
-        it('should preserve stack traces for non-Errors', inject(
-            [AsyncTestCompleter], (async) {
-          try {
-            functionThatThrowsNonError();
-          } catch (e, s) {
-            var rejectedFuture = PromiseWrapper.reject(e, s);
-            expectFunctionThatThrowsWithStackTrace(rejectedFuture, async);
-          }
-        }));
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/facade/async_spec.ts b/modules/angular2/test/facade/async_spec.ts
deleted file mode 100644
index 253384619e17..000000000000
--- a/modules/angular2/test/facade/async_spec.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import {
-  describe,
-  it,
-  expect,
-  beforeEach,
-  ddescribe,
-  iit,
-  xit,
-  el,
-  SpyObject,
-  AsyncTestCompleter,
-  inject,
-  IS_DARTIUM
-} from 'angular2/test_lib';
-
-import {ObservableWrapper, EventEmitter, PromiseWrapper} from 'angular2/src/facade/async';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-export function main() {
-  describe('EventEmitter', () => {
-    var emitter: EventEmitter;
-
-    beforeEach(() => { emitter = new EventEmitter(); });
-
-    it("should call the next callback", inject([AsyncTestCompleter], (async) => {
-         ObservableWrapper.subscribe(emitter, (value) => {
-           expect(value).toEqual(99);
-           async.done();
-         });
-
-         ObservableWrapper.callNext(emitter, 99);
-       }));
-
-    it("should call the throw callback", inject([AsyncTestCompleter], (async) => {
-         ObservableWrapper.subscribe(emitter, (_) => {}, (error) => {
-           expect(error).toEqual("Boom");
-           async.done();
-         });
-         ObservableWrapper.callThrow(emitter, "Boom");
-       }));
-
-    it("should work when no throw callback is provided", inject([AsyncTestCompleter], (async) => {
-         ObservableWrapper.subscribe(emitter, (_) => {}, (_) => { async.done(); });
-         ObservableWrapper.callThrow(emitter, "Boom");
-       }));
-
-    it("should call the return callback", inject([AsyncTestCompleter], (async) => {
-         ObservableWrapper.subscribe(emitter, (_) => {}, (_) => {}, () => { async.done(); });
-
-         ObservableWrapper.callReturn(emitter);
-       }));
-
-    it("should subscribe to the wrapper asynchronously", () => {
-      var called = false;
-      ObservableWrapper.subscribe(emitter, (value) => { called = true; });
-
-      ObservableWrapper.callNext(emitter, 99);
-      expect(called).toBe(false);
-    });
-
-    // TODO: vsavkin: add tests cases
-    // should call dispose on the subscription if generator returns {done:true}
-    // should call dispose on the subscription on throw
-    // should call dispose on the subscription on return
-  });
-
-  // See ECMAScript 6 Spec 25.4.4.1
-  describe("PromiseWrapper", () => {
-    describe("#all", () => {
-      it("should combine lists of Promises", inject([AsyncTestCompleter], (async) => {
-           var one = PromiseWrapper.completer();
-           var two = PromiseWrapper.completer();
-
-           var all = PromiseWrapper.all([one.promise, two.promise]);
-           var allCalled = false;
-
-           PromiseWrapper.then(one.promise, (_) => {
-             expect(allCalled).toBe(false);
-             two.resolve('two');
-           });
-
-           PromiseWrapper.then(all, (_) => {
-             allCalled = true;
-             async.done();
-           });
-
-           one.resolve('one');
-         }));
-
-      ListWrapper.forEach([null, true, false, 10, 'thing', {}, []], (abruptCompletion) => {
-        it(`should treat "${abruptCompletion}" as an "abrupt completion"`,
-           inject([AsyncTestCompleter], (async) => {
-             var one = PromiseWrapper.completer();
-
-             var all = PromiseWrapper.all([one.promise, abruptCompletion]);
-
-             PromiseWrapper.then(all, (val) => {
-               expect(val[1]).toEqual(abruptCompletion);
-               async.done();
-             });
-
-             one.resolve('one');
-           }));
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/facade/collection_spec.ts b/modules/angular2/test/facade/collection_spec.ts
deleted file mode 100644
index 7795d45b76ab..000000000000
--- a/modules/angular2/test/facade/collection_spec.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import {describe, it, expect, beforeEach, ddescribe, iit, xit} from 'angular2/test_lib';
-
-import {
-  List,
-  ListWrapper,
-  StringMap,
-  StringMapWrapper,
-  MapWrapper
-} from 'angular2/src/facade/collection';
-
-export function main() {
-  describe('ListWrapper', () => {
-    var l: List<int>;
-
-    describe('splice', () => {
-      it('should remove sublist of given length and return it', () => {
-        var list = [1, 2, 3, 4, 5, 6];
-        expect(ListWrapper.splice(list, 1, 3)).toEqual([2, 3, 4]);
-        expect(list).toEqual([1, 5, 6]);
-      });
-
-      it('should support negative start', () => {
-        var list = [1, 2, 3, 4, 5, 6];
-        expect(ListWrapper.splice(list, -5, 3)).toEqual([2, 3, 4]);
-        expect(list).toEqual([1, 5, 6]);
-      });
-    });
-
-    describe('fill', () => {
-      beforeEach(() => { l = [1, 2, 3, 4]; });
-
-      it('should fill the whole list if neither start nor end are specified', () => {
-        ListWrapper.fill(l, 9);
-        expect(l).toEqual([9, 9, 9, 9]);
-      });
-
-      it('should fill up to the end if end is not specified', () => {
-        ListWrapper.fill(l, 9, 1);
-        expect(l).toEqual([1, 9, 9, 9]);
-      });
-
-      it('should support negative start', () => {
-        ListWrapper.fill(l, 9, -1);
-        expect(l).toEqual([1, 2, 3, 9]);
-      });
-
-      it('should support negative end', () => {
-        ListWrapper.fill(l, 9, -2, -1);
-        expect(l).toEqual([1, 2, 9, 4]);
-      });
-    });
-
-    describe('slice', () => {
-      beforeEach(() => { l = [1, 2, 3, 4]; });
-
-      it('should return the whole list if neither start nor end are specified',
-         () => { expect(ListWrapper.slice(l)).toEqual([1, 2, 3, 4]); });
-
-      it('should return up to the end if end is not specified',
-         () => { expect(ListWrapper.slice(l, 1)).toEqual([2, 3, 4]); });
-
-      it('should support negative start', () => { expect(ListWrapper.slice(l, -1)).toEqual([4]); });
-
-      it('should support negative end',
-         () => { expect(ListWrapper.slice(l, -3, -1)).toEqual([2, 3]); });
-    });
-
-    describe('indexOf', () => {
-      beforeEach(() => { l = [1, 2, 3, 4]; });
-
-      it('should find values that exist', () => { expect(ListWrapper.indexOf(l, 1)).toEqual(0); });
-
-      it('should not find values that do not exist',
-         () => { expect(ListWrapper.indexOf(l, 9)).toEqual(-1); });
-
-      it('should respect the startIndex parameter',
-         () => { expect(ListWrapper.indexOf(l, 1, 1)).toEqual(-1); });
-    });
-  });
-
-  describe('StringMapWrapper', () => {
-    describe('equals', () => {
-      it('should return true when comparing empty maps',
-         () => { expect(StringMapWrapper.equals({}, {})).toBe(true); });
-
-      it('should return true when comparing the same map', () => {
-        var m1 = {'a': 1, 'b': 2, 'c': 3};
-        expect(StringMapWrapper.equals(m1, m1)).toBe(true);
-      });
-
-      it('should return true when comparing different maps with the same keys and values', () => {
-        var m1 = {'a': 1, 'b': 2, 'c': 3};
-        var m2 = {'a': 1, 'b': 2, 'c': 3};
-        expect(StringMapWrapper.equals(m1, m2)).toBe(true);
-      });
-
-      it('should return false when comparing maps with different numbers of keys', () => {
-        var m1 = {'a': 1, 'b': 2, 'c': 3};
-        var m2 = {'a': 1, 'b': 2, 'c': 3, 'd': 4};
-        expect(StringMapWrapper.equals(m1, m2)).toBe(false);
-        expect(StringMapWrapper.equals(m2, m1)).toBe(false);
-      });
-
-      it('should return false when comparing maps with different keys', () => {
-        var m1 = {'a': 1, 'b': 2, 'c': 3};
-        var m2 = {'a': 1, 'b': 2, 'CC': 3};
-        expect(StringMapWrapper.equals(m1, m2)).toBe(false);
-        expect(StringMapWrapper.equals(m2, m1)).toBe(false);
-      });
-
-      it('should return false when comparing maps with different values', () => {
-        var m1 = {'a': 1, 'b': 2, 'c': 3};
-        var m2 = {'a': 1, 'b': 20, 'c': 3};
-        expect(StringMapWrapper.equals(m1, m2)).toBe(false);
-        expect(StringMapWrapper.equals(m2, m1)).toBe(false);
-      });
-    });
-
-    describe('MapWrapper', () => {
-      it('should return a list of keys values', () => {
-        var m = new Map();
-        m.set('a', 'b');
-        expect(MapWrapper.keys(m)).toEqual(['a']);
-        expect(MapWrapper.values(m)).toEqual(['b']);
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/facade/lang_spec.ts b/modules/angular2/test/facade/lang_spec.ts
deleted file mode 100644
index 097358dd7515..000000000000
--- a/modules/angular2/test/facade/lang_spec.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import {describe, it, expect, beforeEach, ddescribe, iit, xit, el} from 'angular2/test_lib';
-import {
-  isPresent,
-  RegExpWrapper,
-  RegExpMatcherWrapper,
-  StringWrapper,
-  CONST_EXPR
-} from 'angular2/src/facade/lang';
-
-export function main() {
-  describe('RegExp', () => {
-    it('should expose the index for each match', () => {
-      var re = RegExpWrapper.create('(!)');
-      var matcher = RegExpWrapper.matcher(re, '0!23!567!!');
-      var indexes = [];
-      var m;
-
-      while (isPresent(m = RegExpMatcherWrapper.next(matcher))) {
-        indexes.push(m.index);
-        expect(m[0]).toEqual('!');
-        expect(m[1]).toEqual('!');
-        expect(m.length).toBe(2);
-      }
-
-      expect(indexes).toEqual([1, 4, 8, 9]);
-    });
-  });
-
-  describe('const', () => {
-    it('should support const expressions both in TS and Dart', () => {
-      const numbers = CONST_EXPR([1, 2, 3]);
-      expect(numbers).toEqual([1, 2, 3]);
-    });
-  });
-
-  describe('String', () => {
-    var upper, lower;
-
-    beforeEach(() => {
-      upper = 'SOMETHING';
-      lower = 'something';
-    });
-
-    it('should upper case a string', () => {
-      var str = StringWrapper.toUpperCase(lower);
-
-      expect(str).toEqual(upper);
-    });
-
-    it('should lower case a string', () => {
-      var str = StringWrapper.toLowerCase(upper);
-
-      expect(str).toEqual(lower);
-    });
-  });
-}
diff --git a/modules/angular2/test/forms/directives_spec.ts b/modules/angular2/test/forms/directives_spec.ts
deleted file mode 100644
index 60338a5a3ae9..000000000000
--- a/modules/angular2/test/forms/directives_spec.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-import {
-  ddescribe,
-  describe,
-  fakeAsync,
-  flushMicrotasks,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  el,
-  AsyncTestCompleter,
-  inject
-} from 'angular2/test_lib';
-
-import {QueryList} from 'angular2/angular2';
-
-import {
-  ControlGroup,
-  Control,
-  NgControlName,
-  NgControlGroup,
-  NgFormModel,
-  ControlValueAccessor,
-  Validators,
-  NgForm,
-  NgModel,
-  NgFormControl,
-  NgRequiredValidator
-} from 'angular2/forms';
-
-class DummyControlValueAccessor implements ControlValueAccessor {
-  writtenValue;
-
-  registerOnChange(fn) {}
-  registerOnTouched(fn) {}
-
-  writeValue(obj: any): void { this.writtenValue = obj; }
-}
-
-export function main() {
-  describe("Form Directives", () => {
-    describe("NgFormModel", () => {
-      var form;
-      var formModel;
-      var loginControlDir;
-
-      beforeEach(() => {
-        form = new NgFormModel();
-        formModel = new ControlGroup({"login": new Control(null)});
-        form.form = formModel;
-
-        loginControlDir = new NgControlName(form, new QueryList<any>());
-        loginControlDir.name = "login";
-        loginControlDir.valueAccessor = new DummyControlValueAccessor();
-      });
-
-      describe("addControl", () => {
-        it("should throw when no control found", () => {
-          var dir = new NgControlName(form, null);
-          dir.name = "invalidName";
-
-          expect(() => form.addControl(dir))
-              .toThrowError(new RegExp("Cannot find control 'invalidName'"));
-        });
-
-        it("should throw when no value accessor", () => {
-          var dir = new NgControlName(form, null);
-          dir.name = "login";
-
-          expect(() => form.addControl(dir))
-              .toThrowError(new RegExp("No value accessor for 'login'"));
-        });
-
-        it("should set up validator", () => {
-          loginControlDir.ngValidators.reset([new NgRequiredValidator()]);
-
-          expect(formModel.find(["login"]).valid).toBe(true);
-
-          // this will add the required validator and recalculate the validity
-          form.addControl(loginControlDir);
-
-          expect(formModel.find(["login"]).valid).toBe(false);
-        });
-
-        it("should write value to the DOM", () => {
-          formModel.find(["login"]).updateValue("initValue");
-
-          form.addControl(loginControlDir);
-
-          expect((<any>loginControlDir.valueAccessor).writtenValue).toEqual("initValue");
-        });
-
-        it("should add the directive to the list of directives included in the form", () => {
-          form.addControl(loginControlDir);
-          expect(form.directives).toEqual([loginControlDir]);
-        });
-      });
-
-      describe("removeControl", () => {
-        it("should remove the directive to the list of directives included in the form", () => {
-          form.addControl(loginControlDir);
-          form.removeControl(loginControlDir);
-          expect(form.directives).toEqual([]);
-        });
-      });
-
-      describe("onChange", () => {
-        it("should update dom values of all the directives", () => {
-          form.addControl(loginControlDir);
-
-          formModel.find(["login"]).updateValue("new value");
-
-          form.onChange(null);
-
-          expect((<any>loginControlDir.valueAccessor).writtenValue).toEqual("new value");
-        });
-      });
-    });
-
-    describe("NgForm", () => {
-      var form;
-      var formModel;
-      var loginControlDir;
-      var personControlGroupDir;
-
-      beforeEach(() => {
-        form = new NgForm();
-        formModel = form.form;
-
-        personControlGroupDir = new NgControlGroup(form);
-        personControlGroupDir.name = "person";
-
-        loginControlDir = new NgControlName(personControlGroupDir, null);
-        loginControlDir.name = "login";
-        loginControlDir.valueAccessor = new DummyControlValueAccessor();
-      });
-
-      describe("addControl & addControlGroup", () => {
-        it("should create a control with the given name", fakeAsync(() => {
-             form.addControlGroup(personControlGroupDir);
-             form.addControl(loginControlDir);
-
-             flushMicrotasks();
-
-             expect(formModel.find(["person", "login"])).not.toBeNull;
-           }));
-
-        // should update the form's value and validity
-      });
-
-      describe("removeControl & removeControlGroup", () => {
-        it("should remove control", fakeAsync(() => {
-             form.addControlGroup(personControlGroupDir);
-             form.addControl(loginControlDir);
-
-             form.removeControlGroup(personControlGroupDir);
-             form.removeControl(loginControlDir);
-
-             flushMicrotasks();
-
-             expect(formModel.find(["person"])).toBeNull();
-             expect(formModel.find(["person", "login"])).toBeNull();
-           }));
-
-        // should update the form's value and validity
-      });
-    });
-
-    describe("NgFormControl", () => {
-      var controlDir;
-      var control;
-
-      beforeEach(() => {
-        controlDir = new NgFormControl(new QueryList<any>());
-        controlDir.valueAccessor = new DummyControlValueAccessor();
-
-        control = new Control(null);
-        controlDir.form = control;
-      });
-
-      it("should set up validator", () => {
-        controlDir.ngValidators.reset([new NgRequiredValidator()]);
-
-        expect(control.valid).toBe(true);
-
-        // this will add the required validator and recalculate the validity
-        controlDir.onChange({});
-
-        expect(control.valid).toBe(false);
-      });
-    });
-
-    describe("NgModel", () => {
-      var ngModel;
-
-      beforeEach(() => {
-        ngModel = new NgModel(new QueryList<any>());
-        ngModel.valueAccessor = new DummyControlValueAccessor();
-      });
-
-      it("should set up validator", () => {
-        ngModel.ngValidators.reset([new NgRequiredValidator()]);
-
-        expect(ngModel.control.valid).toBe(true);
-
-        // this will add the required validator and recalculate the validity
-        ngModel.onChange({});
-
-        expect(ngModel.control.valid).toBe(false);
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/forms/form_builder_spec.ts b/modules/angular2/test/forms/form_builder_spec.ts
deleted file mode 100644
index 02e33fbce8b9..000000000000
--- a/modules/angular2/test/forms/form_builder_spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  el
-} from 'angular2/test_lib';
-import {Control, FormBuilder, Validators} from 'angular2/forms';
-
-export function main() {
-  describe("Form Builder", () => {
-    var b;
-
-    beforeEach(() => { b = new FormBuilder(); });
-
-    it("should create controls from a value", () => {
-      var g = b.group({"login": "some value"});
-
-      expect(g.controls["login"].value).toEqual("some value");
-    });
-
-    it("should create controls from an array", () => {
-      var g = b.group({"login": ["some value"], "password": ["some value", Validators.required]});
-
-      expect(g.controls["login"].value).toEqual("some value");
-      expect(g.controls["password"].value).toEqual("some value");
-      expect(g.controls["password"].validator).toEqual(Validators.required);
-    });
-
-    it("should use controls", () => {
-      var g = b.group({"login": b.control("some value", Validators.required)});
-
-      expect(g.controls["login"].value).toEqual("some value");
-      expect(g.controls["login"].validator).toBe(Validators.required);
-    });
-
-    it("should create groups with optional controls", () => {
-      var g = b.group({"login": "some value"}, {"optionals": {"login": false}});
-
-      expect(g.contains("login")).toEqual(false);
-    });
-
-    it("should create groups with a custom validator", () => {
-      var g = b.group({"login": "some value"}, {"validator": Validators.nullValidator});
-
-      expect(g.validator).toBe(Validators.nullValidator);
-    });
-
-    it("should use default validators when no validators are provided", () => {
-      var g = b.group({"login": "some value"});
-      expect(g.controls["login"].validator).toBe(Validators.nullValidator);
-      expect(g.validator).toBe(Validators.group);
-    });
-
-    it("should create control arrays", () => {
-      var c = b.control("three");
-      var a = b.array(["one", ["two", Validators.required], c, b.array(['four'])]);
-
-      expect(a.value).toEqual(['one', 'two', 'three', ['four']]);
-    });
-  });
-}
diff --git a/modules/angular2/test/forms/integration_spec.ts b/modules/angular2/test/forms/integration_spec.ts
deleted file mode 100644
index d97d1c33b39a..000000000000
--- a/modules/angular2/test/forms/integration_spec.ts
+++ /dev/null
@@ -1,751 +0,0 @@
-import {Component, Directive, View} from 'angular2/angular2';
-import {
-  afterEach,
-  AsyncTestCompleter,
-  TestComponentBuilder,
-  By,
-  beforeEach,
-  ddescribe,
-  describe,
-  dispatchEvent,
-  fakeAsync,
-  tick,
-  expect,
-  it,
-  inject,
-  iit,
-  xit
-} from 'angular2/test_lib';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {NgIf, NgFor} from 'angular2/directives';
-
-import {
-  Control,
-  ControlGroup,
-  NgForm,
-  formDirectives,
-  Validators,
-  NgControl,
-  ControlValueAccessor
-} from 'angular2/forms';
-
-export function main() {
-  describe("integration tests", () => {
-    it("should initialize DOM elements with the given form object",
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
-               </div>`;
-
-         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-           rootTC.componentInstance.form = new ControlGroup({"login": new Control("loginValue")});
-           rootTC.detectChanges();
-
-           var input = rootTC.query(By.css("input"));
-           expect(input.nativeElement.value).toEqual("loginValue");
-           async.done();
-         });
-       }));
-
-    it("should update the control group values on DOM change",
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var form = new ControlGroup({"login": new Control("oldValue")});
-
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
-              </div>`;
-
-         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-           rootTC.componentInstance.form = form;
-           rootTC.detectChanges();
-           var input = rootTC.query(By.css("input"));
-
-           input.nativeElement.value = "updatedValue";
-           dispatchEvent(input.nativeElement, "change");
-
-           expect(form.value).toEqual({"login": "updatedValue"});
-           async.done();
-         });
-       }));
-
-    it("should emit ng-submit event on submit",
-       inject(
-           [TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-             var t =
-                 `<div><form [ng-form-model]="form" (ng-submit)="name='updated'"></form><span>{{name}}</span></div>`;
-
-             var rootTC;
-
-             tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((root) => { rootTC = root; });
-             tick();
-             rootTC.componentInstance.form = new ControlGroup({});
-             rootTC.componentInstance.name = 'old';
-
-             tick();
-
-             var form = rootTC.query(By.css("form"));
-             dispatchEvent(form.nativeElement, "submit");
-
-             tick();
-             expect(rootTC.componentInstance.name).toEqual('updated');
-           })));
-
-    it("should work with single controls",
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var control = new Control("loginValue");
-
-         var t = `<div><input type="text" [ng-form-control]="form"></div>`;
-
-         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-           rootTC.componentInstance.form = control;
-           rootTC.detectChanges();
-
-           var input = rootTC.query(By.css("input"));
-           expect(input.nativeElement.value).toEqual("loginValue");
-
-           input.nativeElement.value = "updatedValue";
-           dispatchEvent(input.nativeElement, "change");
-
-           expect(control.value).toEqual("updatedValue");
-           async.done();
-         });
-       }));
-
-    it("should update DOM elements when rebinding the control group",
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
-               </div>`;
-
-         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-           rootTC.componentInstance.form = new ControlGroup({"login": new Control("oldValue")});
-           rootTC.detectChanges();
-
-           rootTC.componentInstance.form = new ControlGroup({"login": new Control("newValue")});
-           rootTC.detectChanges();
-
-           var input = rootTC.query(By.css("input"));
-           expect(input.nativeElement.value).toEqual("newValue");
-           async.done();
-         });
-       }));
-
-    it("should update DOM elements when updating the value of a control",
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var login = new Control("oldValue");
-         var form = new ControlGroup({"login": login});
-
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
-               </div>`;
-
-         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-           rootTC.componentInstance.form = form;
-           rootTC.detectChanges();
-
-           login.updateValue("newValue");
-
-           rootTC.detectChanges();
-
-           var input = rootTC.query(By.css("input"));
-           expect(input.nativeElement.value).toEqual("newValue");
-           async.done();
-         });
-       }));
-
-    it("should mark controls as touched after interacting with the DOM control",
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var login = new Control("oldValue");
-         var form = new ControlGroup({"login": login});
-
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
-               </div>`;
-
-         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-           rootTC.componentInstance.form = form;
-           rootTC.detectChanges();
-
-           var loginEl = rootTC.query(By.css("input"));
-           expect(login.touched).toBe(false);
-
-           dispatchEvent(loginEl.nativeElement, "blur");
-
-           expect(login.touched).toBe(true);
-
-           async.done();
-         });
-       }));
-
-    describe("different control types", () => {
-      it("should support <input type=text>",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <input type="text" ng-control="text">
-                </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = new ControlGroup({"text": new Control("old")});
-             rootTC.detectChanges();
-
-             var input = rootTC.query(By.css("input"));
-             expect(input.nativeElement.value).toEqual("old");
-
-             input.nativeElement.value = "new";
-             dispatchEvent(input.nativeElement, "input");
-
-             expect(rootTC.componentInstance.form.value).toEqual({"text": "new"});
-             async.done();
-           });
-         }));
-
-      it("should support <input> without type",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <input ng-control="text">
-                </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = new ControlGroup({"text": new Control("old")});
-             rootTC.detectChanges();
-             var input = rootTC.query(By.css("input"));
-             expect(input.nativeElement.value).toEqual("old");
-
-             input.nativeElement.value = "new";
-             dispatchEvent(input.nativeElement, "input");
-
-             expect(rootTC.componentInstance.form.value).toEqual({"text": "new"});
-             async.done();
-           });
-         }));
-
-      it("should support <textarea>",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <textarea ng-control="text"></textarea>
-                </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = new ControlGroup({"text": new Control('old')});
-             rootTC.detectChanges();
-
-             var textarea = rootTC.query(By.css("textarea"));
-             expect(textarea.nativeElement.value).toEqual("old");
-
-             textarea.nativeElement.value = "new";
-             dispatchEvent(textarea.nativeElement, "input");
-
-             expect(rootTC.componentInstance.form.value).toEqual({"text": 'new'});
-             async.done();
-           });
-         }));
-
-      it("should support <type=checkbox>",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <input type="checkbox" ng-control="checkbox">
-                </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = new ControlGroup({"checkbox": new Control(true)});
-             rootTC.detectChanges();
-
-             var input = rootTC.query(By.css("input"));
-             expect(input.nativeElement.checked).toBe(true);
-
-             input.nativeElement.checked = false;
-             dispatchEvent(input.nativeElement, "change");
-
-             expect(rootTC.componentInstance.form.value).toEqual({"checkbox": false});
-             async.done();
-           });
-         }));
-
-      it("should support <select>",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                    <select ng-control="city">
-                      <option value="SF"></option>
-                      <option value="NYC"></option>
-                    </select>
-                  </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = new ControlGroup({"city": new Control("SF")});
-             rootTC.detectChanges();
-
-             var select = rootTC.query(By.css("select"));
-             var sfOption = rootTC.query(By.css("option"));
-             expect(select.nativeElement.value).toEqual('SF');
-             expect(sfOption.nativeElement.selected).toBe(true);
-
-             select.nativeElement.value = 'NYC';
-             dispatchEvent(select.nativeElement, "change");
-
-             expect(rootTC.componentInstance.form.value).toEqual({"city": 'NYC'});
-             expect(sfOption.nativeElement.selected).toBe(false);
-             async.done();
-           });
-         }));
-
-      it("should support <select> with a dynamic list of options",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                      <select ng-control="city">
-                        <option *ng-for="#c of data" [value]="c"></option>
-                      </select>
-                  </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = new ControlGroup({"city": new Control("NYC")});
-             rootTC.componentInstance.data = ['SF', 'NYC'];
-             rootTC.detectChanges();
-
-             var select = rootTC.query(By.css('select'));
-             expect(select.nativeElement.value).toEqual('NYC');
-             async.done();
-           });
-         }));
-
-      it("should support custom value accessors",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <input type="text" ng-control="name" wrapped-value>
-                </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = new ControlGroup({"name": new Control("aa")});
-             rootTC.detectChanges();
-             var input = rootTC.query(By.css("input"));
-             expect(input.nativeElement.value).toEqual("!aa!");
-
-             input.nativeElement.value = "!bb!";
-             dispatchEvent(input.nativeElement, "change");
-
-             expect(rootTC.componentInstance.form.value).toEqual({"name": "bb"});
-             async.done();
-           });
-         }));
-    });
-
-    describe("validations", () => {
-      it("should use validators defined in html",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var form = new ControlGroup({"login": new Control("aa")});
-
-           var t = `<div [ng-form-model]="form">
-                  <input type="text" ng-control="login" required>
-                 </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = form;
-             rootTC.detectChanges();
-             expect(form.valid).toEqual(true);
-
-             var input = rootTC.query(By.css("input"));
-
-             input.nativeElement.value = "";
-             dispatchEvent(input.nativeElement, "change");
-
-             expect(form.valid).toEqual(false);
-             async.done();
-           });
-         }));
-
-      it("should use validators defined in the model",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var form = new ControlGroup({"login": new Control("aa", Validators.required)});
-
-           var t = `<div [ng-form-model]="form">
-                  <input type="text" ng-control="login">
-                 </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = form;
-             rootTC.detectChanges();
-             expect(form.valid).toEqual(true);
-
-             var input = rootTC.query(By.css("input"));
-
-             input.nativeElement.value = "";
-             dispatchEvent(input.nativeElement, "change");
-
-             expect(form.valid).toEqual(false);
-             async.done();
-           });
-         }));
-    });
-
-    describe("nested forms", () => {
-      it("should init DOM with the given form object",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var form =
-               new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});
-
-           var t = `<div [ng-form-model]="form">
-                  <div ng-control-group="nested">
-                    <input type="text" ng-control="login">
-                  </div>
-              </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = form;
-             rootTC.detectChanges();
-
-             var input = rootTC.query(By.css("input"));
-             expect(input.nativeElement.value).toEqual("value");
-             async.done();
-           });
-         }));
-
-      it("should update the control group values on DOM change",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var form =
-               new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});
-
-           var t = `<div [ng-form-model]="form">
-                    <div ng-control-group="nested">
-                      <input type="text" ng-control="login">
-                    </div>
-                </div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = form;
-             rootTC.detectChanges();
-             var input = rootTC.query(By.css("input"));
-
-             input.nativeElement.value = "updatedValue";
-             dispatchEvent(input.nativeElement, "change");
-
-             expect(form.value).toEqual({"nested": {"login": "updatedValue"}});
-             async.done();
-           });
-         }));
-    });
-
-    it("should support ng-model for complex forms",
-       inject(
-           [TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-             var form = new ControlGroup({"name": new Control("")});
-
-             var t =
-                 `<div [ng-form-model]="form"><input type="text" ng-control="name" [(ng-model)]="name"></div>`;
-
-             var rootTC;
-             tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((root) => { rootTC = root; });
-             tick();
-
-             rootTC.componentInstance.name = 'oldValue';
-             rootTC.componentInstance.form = form;
-             rootTC.detectChanges();
-
-             var input = rootTC.query(By.css("input")).nativeElement;
-             expect(input.value).toEqual("oldValue");
-
-             input.value = "updatedValue";
-             dispatchEvent(input, "change");
-
-             tick();
-             expect(rootTC.componentInstance.name).toEqual("updatedValue");
-           })));
-
-    it("should support ng-model for single fields",
-       inject(
-           [TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-             var form = new Control("");
-
-             var t = `<div><input type="text" [ng-form-control]="form" [(ng-model)]="name"></div>`;
-
-             var rootTC;
-             tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((root) => { rootTC = root; });
-             tick();
-             rootTC.componentInstance.form = form;
-             rootTC.componentInstance.name = "oldValue";
-             rootTC.detectChanges();
-
-             var input = rootTC.query(By.css("input")).nativeElement;
-             expect(input.value).toEqual("oldValue");
-
-             input.value = "updatedValue";
-             dispatchEvent(input, "change");
-             tick();
-
-             expect(rootTC.componentInstance.name).toEqual("updatedValue");
-           })));
-
-    describe("template-driven forms", () => {
-      it("should add new controls and control groups",
-         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                  var t = `<form>
-                     <div ng-control-group="user">
-                      <input type="text" ng-control="login">
-                     </div>
-               </form>`;
-
-                  var rootTC;
-                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
-                      (root) => { rootTC = root; });
-                  tick();
-                  rootTC.componentInstance.name = null;
-                  rootTC.detectChanges();
-
-                  var form = rootTC.componentViewChildren[0].inject(NgForm);
-                  expect(form.controls['user']).not.toBeDefined();
-
-                  tick();
-
-                  expect(form.controls['user']).toBeDefined();
-                  expect(form.controls['user'].controls['login']).toBeDefined();
-                })));
-
-      it("should emit ng-submit event on submit",
-         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                  var t = `<div><form (ng-submit)="name='updated'"></form></div>`;
-
-                  var rootTC;
-                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
-                      (root) => { rootTC = root; });
-                  tick();
-                  rootTC.componentInstance.name = 'old';
-                  var form = rootTC.query(By.css("form"));
-
-                  dispatchEvent(form.nativeElement, "submit");
-                  tick();
-
-                  expect(rootTC.componentInstance.name).toEqual("updated");
-                })));
-
-      it("should not create a template-driven form when ng-no-form is used",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<form ng-no-form>
-               </form>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.name = null;
-             rootTC.detectChanges();
-
-             expect(rootTC.componentViewChildren.length).toEqual(0);
-             async.done();
-           });
-         }));
-
-      it("should remove controls",
-         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                  var t = `<form>
-                    <div *ng-if="name == 'show'">
-                      <input type="text" ng-control="login">
-                    </div>
-                  </form>`;
-
-                  var rootTC;
-                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
-                      (root) => { rootTC = root; });
-                  tick();
-                  rootTC.componentInstance.name = 'show';
-                  rootTC.detectChanges();
-                  tick();
-                  var form = rootTC.componentViewChildren[0].inject(NgForm);
-
-
-                  expect(form.controls['login']).toBeDefined();
-
-                  rootTC.componentInstance.name = 'hide';
-                  rootTC.detectChanges();
-                  tick();
-
-                  expect(form.controls['login']).not.toBeDefined();
-                })));
-
-      it("should remove control groups",
-         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                  var t = `<form>
-                     <div *ng-if="name=='show'" ng-control-group="user">
-                      <input type="text" ng-control="login">
-                     </div>
-               </form>`;
-
-
-                  var rootTC;
-                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
-                      (root) => { rootTC = root; });
-                  tick();
-                  rootTC.componentInstance.name = 'show';
-                  rootTC.detectChanges();
-                  tick();
-                  var form = rootTC.componentViewChildren[0].inject(NgForm);
-
-                  expect(form.controls['user']).toBeDefined();
-
-                  rootTC.componentInstance.name = 'hide';
-                  rootTC.detectChanges();
-                  tick();
-
-                  expect(form.controls['user']).not.toBeDefined();
-                })));
-
-      it("should support ng-model for complex forms",
-         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                  var t = `<form>
-                      <input type="text" ng-control="name" [(ng-model)]="name">
-               </form>`;
-
-                  var rootTC;
-                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
-                      (root) => { rootTC = root; });
-                  tick();
-                  rootTC.componentInstance.name = "oldValue";
-                  rootTC.detectChanges();
-                  tick();
-
-                  var input = rootTC.query(By.css("input")).nativeElement;
-                  expect(input.value).toEqual("oldValue");
-
-                  input.value = "updatedValue";
-                  dispatchEvent(input, "change");
-                  tick();
-
-                  expect(rootTC.componentInstance.name).toEqual("updatedValue");
-                })));
-
-
-      it("should support ng-model for single fields",
-         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                  var t = `<div><input type="text" [(ng-model)]="name"></div>`;
-
-                  var rootTC;
-                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
-                      (root) => { rootTC = root; });
-                  tick();
-                  rootTC.componentInstance.name = "oldValue";
-                  rootTC.detectChanges();
-
-                  var input = rootTC.query(By.css("input")).nativeElement;
-                  expect(input.value).toEqual("oldValue");
-
-                  input.value = "updatedValue";
-                  dispatchEvent(input, "change");
-                  tick();
-
-                  expect(rootTC.componentInstance.name).toEqual("updatedValue");
-                })));
-    });
-
-
-    describe("setting status classes", () => {
-      it("should work with single fields",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var form = new Control("", Validators.required);
-
-           var t = `<div><input type="text" [ng-form-control]="form"></div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = form;
-             rootTC.detectChanges();
-
-             var input = rootTC.query(By.css("input")).nativeElement;
-             expect(DOM.classList(input))
-                 .toEqual(['ng-binding', 'ng-untouched', 'ng-pristine', 'ng-invalid']);
-
-             dispatchEvent(input, "blur");
-             rootTC.detectChanges();
-
-             expect(DOM.classList(input))
-                 .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);
-
-             input.value = "updatedValue";
-             dispatchEvent(input, "change");
-             rootTC.detectChanges();
-
-             expect(DOM.classList(input))
-                 .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
-             async.done();
-           });
-         }));
-
-      it("should work with complex model-driven forms",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var form = new ControlGroup({"name": new Control("", Validators.required)});
-
-           var t = `<form [ng-form-model]="form"><input type="text" ng-control="name"></form>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.form = form;
-             rootTC.detectChanges();
-
-             var input = rootTC.query(By.css("input")).nativeElement;
-             expect(DOM.classList(input))
-                 .toEqual(["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]);
-
-             dispatchEvent(input, "blur");
-             rootTC.detectChanges();
-
-             expect(DOM.classList(input))
-                 .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);
-
-             input.value = "updatedValue";
-             dispatchEvent(input, "change");
-             rootTC.detectChanges();
-
-             expect(DOM.classList(input))
-                 .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
-             async.done();
-           });
-         }));
-
-      it("should work with ng-model",
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div><input [(ng-model)]="name" required></div>`;
-
-           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
-             rootTC.componentInstance.name = "";
-             rootTC.detectChanges();
-
-             var input = rootTC.query(By.css("input")).nativeElement;
-             expect(DOM.classList(input))
-                 .toEqual(["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]);
-
-             dispatchEvent(input, "blur");
-             rootTC.detectChanges();
-
-             expect(DOM.classList(input))
-                 .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);
-
-             input.value = "updatedValue";
-             dispatchEvent(input, "change");
-             rootTC.detectChanges();
-
-             expect(DOM.classList(input))
-                 .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
-             async.done();
-           });
-         }));
-    });
-  });
-}
-
-@Directive({
-  selector: '[wrapped-value]',
-  host: {'(change)': 'handleOnChange($event.target.value)', '[value]': 'value'}
-})
-class WrappedValue implements ControlValueAccessor {
-  value;
-  onChange: Function;
-
-  constructor(cd: NgControl) { cd.valueAccessor = this; }
-
-  writeValue(value) { this.value = `!${value}!`; }
-
-  registerOnChange(fn) { this.onChange = fn; }
-  registerOnTouched(fn) {}
-
-  handleOnChange(value) { this.onChange(value.substring(1, value.length - 1)); }
-}
-
-@Component({selector: "my-comp"})
-@View({directives: [formDirectives, WrappedValue, NgIf, NgFor]})
-class MyComp {
-  form: any;
-  name: string;
-  data: any;
-}
diff --git a/modules/angular2/test/forms/model_spec.ts b/modules/angular2/test/forms/model_spec.ts
deleted file mode 100644
index a8740183b1a1..000000000000
--- a/modules/angular2/test/forms/model_spec.ts
+++ /dev/null
@@ -1,544 +0,0 @@
-import {
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  el,
-  AsyncTestCompleter,
-  fakeAsync,
-  tick,
-  inject
-} from 'angular2/test_lib';
-import {ControlGroup, Control, ControlArray, Validators} from 'angular2/forms';
-import {ObservableWrapper} from 'angular2/src/facade/async';
-
-export function main() {
-  describe("Form Model", () => {
-    describe("Control", () => {
-      describe("validator", () => {
-        it("should run validator with the initial value", () => {
-          var c = new Control("value", Validators.required);
-          expect(c.valid).toEqual(true);
-        });
-
-        it("should rerun the validator when the value changes", () => {
-          var c = new Control("value", Validators.required);
-          c.updateValue(null);
-          expect(c.valid).toEqual(false);
-        });
-
-        it("should return errors", () => {
-          var c = new Control(null, Validators.required);
-          expect(c.errors).toEqual({"required": true});
-        });
-      });
-
-      describe("dirty", () => {
-        it("should be false after creating a control", () => {
-          var c = new Control("value");
-          expect(c.dirty).toEqual(false);
-        });
-
-        it("should be true after changing the value of the control", () => {
-          var c = new Control("value");
-          c.markAsDirty();
-          expect(c.dirty).toEqual(true);
-        });
-      });
-
-      describe("updateValue", () => {
-        var g, c;
-        beforeEach(() => {
-          c = new Control("oldValue");
-          g = new ControlGroup({"one": c});
-        });
-
-        it("should update the value of the control", () => {
-          c.updateValue("newValue");
-          expect(c.value).toEqual("newValue");
-        });
-
-        it("should invoke onChange if it is present", () => {
-          var onChange;
-          c.registerOnChange((v) => onChange = ["invoked", v]);
-
-          c.updateValue("newValue");
-
-          expect(onChange).toEqual(["invoked", "newValue"]);
-        });
-
-        it("should update the parent", () => {
-          c.updateValue("newValue");
-          expect(g.value).toEqual({"one": "newValue"});
-        });
-
-        it("should not update the parent when explicitly specified", () => {
-          c.updateValue("newValue", {onlySelf: true});
-          expect(g.value).toEqual({"one": "oldValue"});
-        });
-
-        it("should fire an event", fakeAsync(() => {
-             ObservableWrapper.subscribe(c.valueChanges,
-                                         (value) => { expect(value).toEqual("newValue"); });
-
-             c.updateValue("newValue");
-             tick();
-           }));
-
-        it("should not fire an event when explicitly specified", fakeAsync(() => {
-             ObservableWrapper.subscribe(c.valueChanges, (value) => { throw "Should not happen"; });
-
-             c.updateValue("newValue", {emitEvent: false});
-
-             tick();
-           }));
-      });
-
-      describe("valueChanges", () => {
-        var c;
-
-        beforeEach(() => { c = new Control("old"); });
-
-        it("should fire an event after the value has been updated",
-           inject([AsyncTestCompleter], (async) => {
-             ObservableWrapper.subscribe(c.valueChanges, (value) => {
-               expect(c.value).toEqual('new');
-               expect(value).toEqual('new');
-               async.done();
-             });
-             c.updateValue("new");
-           }));
-
-        it("should return a cold observable", inject([AsyncTestCompleter], (async) => {
-             c.updateValue("will be ignored");
-             ObservableWrapper.subscribe(c.valueChanges, (value) => {
-               expect(value).toEqual('new');
-               async.done();
-             });
-             c.updateValue("new");
-           }));
-      });
-    });
-
-    describe("ControlGroup", () => {
-      describe("value", () => {
-        it("should be the reduced value of the child controls", () => {
-          var g = new ControlGroup({"one": new Control("111"), "two": new Control("222")});
-          expect(g.value).toEqual({"one": "111", "two": "222"});
-        });
-
-        it("should be empty when there are no child controls", () => {
-          var g = new ControlGroup({});
-          expect(g.value).toEqual({});
-        });
-
-        it("should support nested groups", () => {
-          var g = new ControlGroup(
-              {"one": new Control("111"), "nested": new ControlGroup({"two": new Control("222")})});
-          expect(g.value).toEqual({"one": "111", "nested": {"two": "222"}});
-
-          g.controls["nested"].controls["two"].updateValue("333");
-
-          expect(g.value).toEqual({"one": "111", "nested": {"two": "333"}});
-        });
-      });
-
-
-      describe("validator", () => {
-        it("should run the validator with the initial value (valid)", () => {
-          var g = new ControlGroup({"one": new Control('value', Validators.required)});
-
-          expect(g.valid).toEqual(true);
-
-          expect(g.errors).toEqual(null);
-        });
-
-        it("should run the validator with the initial value (invalid)", () => {
-          var one = new Control(null, Validators.required);
-          var g = new ControlGroup({"one": one});
-
-          expect(g.valid).toEqual(false);
-
-          expect(g.errors).toEqual({"required": [one]});
-        });
-
-        it("should run the validator with the value changes", () => {
-          var c = new Control(null, Validators.required);
-          var g = new ControlGroup({"one": c});
-
-          c.updateValue("some value");
-
-          expect(g.valid).toEqual(true);
-          expect(g.errors).toEqual(null);
-        });
-      });
-
-      describe("dirty", () => {
-        var c, g;
-
-        beforeEach(() => {
-          c = new Control('value');
-          g = new ControlGroup({"one": c});
-        });
-
-        it("should be false after creating a control", () => { expect(g.dirty).toEqual(false); });
-
-        it("should be false after changing the value of the control", () => {
-          c.markAsDirty();
-
-          expect(g.dirty).toEqual(true);
-        });
-      });
-
-      describe("optional components", () => {
-        describe("contains", () => {
-          var group;
-
-          beforeEach(() => {
-            group = new ControlGroup(
-                {
-                  "required": new Control("requiredValue"),
-                  "optional": new Control("optionalValue")
-                },
-                {"optional": false});
-          });
-
-          // rename contains into has
-          it("should return false when the component is not included",
-             () => { expect(group.contains("optional")).toEqual(false); })
-
-              it("should return false when there is no component with the given name",
-                 () => { expect(group.contains("something else")).toEqual(false); });
-
-          it("should return true when the component is included", () => {
-            expect(group.contains("required")).toEqual(true);
-
-            group.include("optional");
-
-            expect(group.contains("optional")).toEqual(true);
-          });
-        });
-
-        it("should not include an inactive component into the group value", () => {
-          var group = new ControlGroup(
-              {"required": new Control("requiredValue"), "optional": new Control("optionalValue")},
-              {"optional": false});
-
-          expect(group.value).toEqual({"required": "requiredValue"});
-
-          group.include("optional");
-
-          expect(group.value).toEqual({"required": "requiredValue", "optional": "optionalValue"});
-        });
-
-        it("should not run Validators on an inactive component", () => {
-          var group = new ControlGroup(
-              {
-                "required": new Control("requiredValue", Validators.required),
-                "optional": new Control("", Validators.required)
-              },
-              {"optional": false});
-
-          expect(group.valid).toEqual(true);
-
-          group.include("optional");
-
-          expect(group.valid).toEqual(false);
-        });
-
-        describe("valueChanges", () => {
-          var g, c1, c2;
-
-          beforeEach(() => {
-            c1 = new Control("old1");
-            c2 = new Control("old2");
-            g = new ControlGroup({"one": c1, "two": c2}, {"two": true});
-          });
-
-          it("should fire an event after the value has been updated",
-             inject([AsyncTestCompleter], (async) => {
-               ObservableWrapper.subscribe(g.valueChanges, (value) => {
-                 expect(g.value).toEqual({'one': 'new1', 'two': 'old2'});
-                 expect(value).toEqual({'one': 'new1', 'two': 'old2'});
-                 async.done();
-               });
-               c1.updateValue("new1");
-             }));
-
-          it("should fire an event after the control's observable fired an event",
-             inject([AsyncTestCompleter], (async) => {
-               var controlCallbackIsCalled = false;
-
-               ObservableWrapper.subscribe(c1.valueChanges,
-                                           (value) => { controlCallbackIsCalled = true; });
-
-               ObservableWrapper.subscribe(g.valueChanges, (value) => {
-                 expect(controlCallbackIsCalled).toBe(true);
-                 async.done();
-               });
-
-               c1.updateValue("new1");
-             }));
-
-          it("should fire an event when a control is excluded",
-             inject([AsyncTestCompleter], (async) => {
-               ObservableWrapper.subscribe(g.valueChanges, (value) => {
-                 expect(value).toEqual({'one': 'old1'});
-                 async.done();
-               });
-
-               g.exclude("two");
-             }));
-
-          it("should fire an event when a control is included",
-             inject([AsyncTestCompleter], (async) => {
-               g.exclude("two");
-
-               ObservableWrapper.subscribe(g.valueChanges, (value) => {
-                 expect(value).toEqual({'one': 'old1', 'two': 'old2'});
-                 async.done();
-               });
-
-               g.include("two");
-             }));
-
-          it("should fire an event every time a control is updated",
-             inject([AsyncTestCompleter], (async) => {
-               var loggedValues = [];
-
-               ObservableWrapper.subscribe(g.valueChanges, (value) => {
-                 loggedValues.push(value);
-
-                 if (loggedValues.length == 2) {
-                   expect(loggedValues)
-                       .toEqual([{"one": "new1", "two": "old2"}, {"one": "new1", "two": "new2"}]);
-                   async.done();
-                 }
-               });
-
-               c1.updateValue("new1");
-               c2.updateValue("new2");
-             }));
-
-          xit("should not fire an event when an excluded control is updated",
-              inject([AsyncTestCompleter], (async) => {
-                                               // hard to test without hacking zones
-                                           }));
-        });
-
-        describe("getError", () => {
-          it("should return the error when it is present", () => {
-            var c = new Control("", Validators.required);
-            var g = new ControlGroup({"one": c});
-            expect(c.getError("required")).toEqual(true);
-            expect(g.getError("required", ["one"])).toEqual(true);
-          });
-
-          it("should return null otherwise", () => {
-            var c = new Control("not empty", Validators.required);
-            var g = new ControlGroup({"one": c});
-            expect(c.getError("invalid")).toEqual(null);
-            expect(g.getError("required", ["one"])).toEqual(null);
-            expect(g.getError("required", ["invalid"])).toEqual(null);
-          });
-        });
-      });
-    });
-
-    describe("ControlArray", () => {
-      describe("adding/removing", () => {
-        var a: ControlArray;
-        var c1, c2, c3;
-
-        beforeEach(() => {
-          a = new ControlArray([]);
-          c1 = new Control(1);
-          c2 = new Control(2);
-          c3 = new Control(3);
-        });
-
-        it("should support pushing", () => {
-          a.push(c1);
-          expect(a.length).toEqual(1);
-          expect(a.controls).toEqual([c1]);
-        });
-
-        it("should support removing", () => {
-          a.push(c1);
-          a.push(c2);
-          a.push(c3);
-
-          a.removeAt(1);
-
-          expect(a.controls).toEqual([c1, c3]);
-        });
-
-        it("should support inserting", () => {
-          a.push(c1);
-          a.push(c3);
-
-          a.insert(1, c2);
-
-          expect(a.controls).toEqual([c1, c2, c3]);
-        });
-      });
-
-      describe("value", () => {
-        it("should be the reduced value of the child controls", () => {
-          var a = new ControlArray([new Control(1), new Control(2)]);
-          expect(a.value).toEqual([1, 2]);
-        });
-
-        it("should be an empty array when there are no child controls", () => {
-          var a = new ControlArray([]);
-          expect(a.value).toEqual([]);
-        });
-      });
-
-      describe("validator", () => {
-        it("should run the validator with the initial value (valid)", () => {
-          var a = new ControlArray(
-              [new Control(1, Validators.required), new Control(2, Validators.required)]);
-
-          expect(a.valid).toBe(true);
-          expect(a.errors).toBe(null);
-        });
-
-        it("should run the validator with the initial value (invalid)", () => {
-          var a = new ControlArray([
-            new Control(1, Validators.required),
-            new Control(null, Validators.required),
-            new Control(2, Validators.required)
-          ]);
-
-          expect(a.valid).toBe(false);
-          expect(a.errors).toEqual({"required": [a.controls[1]]});
-        });
-
-        it("should run the validator when the value changes", () => {
-          var a = new ControlArray([]);
-          var c = new Control(null, Validators.required);
-          a.push(c);
-          expect(a.valid).toBe(false);
-
-          c.updateValue("some value");
-
-          expect(a.valid).toBe(true);
-          expect(a.errors).toBe(null);
-        });
-      });
-
-      describe("dirty", () => {
-        var c: Control;
-        var a: ControlArray;
-
-        beforeEach(() => {
-          c = new Control('value');
-          a = new ControlArray([c]);
-        });
-
-        it("should be false after creating a control", () => { expect(a.dirty).toEqual(false); });
-
-        it("should be false after changing the value of the control", () => {
-          c.markAsDirty();
-
-          expect(a.dirty).toEqual(true);
-        });
-      });
-
-      describe("valueChanges", () => {
-        var a: ControlArray;
-        var c1, c2;
-
-        beforeEach(() => {
-          c1 = new Control("old1");
-          c2 = new Control("old2");
-          a = new ControlArray([c1, c2]);
-        });
-
-        it("should fire an event after the value has been updated",
-           inject([AsyncTestCompleter], (async) => {
-             ObservableWrapper.subscribe(a.valueChanges, (value) => {
-               expect(a.value).toEqual(['new1', 'old2']);
-               expect(value).toEqual(['new1', 'old2']);
-               async.done();
-             });
-             c1.updateValue("new1");
-           }));
-
-        it("should fire an event after the control's observable fired an event",
-           inject([AsyncTestCompleter], (async) => {
-             var controlCallbackIsCalled = false;
-
-             ObservableWrapper.subscribe(c1.valueChanges,
-                                         (value) => { controlCallbackIsCalled = true; });
-
-             ObservableWrapper.subscribe(a.valueChanges, (value) => {
-               expect(controlCallbackIsCalled).toBe(true);
-               async.done();
-             });
-
-             c1.updateValue("new1");
-           }));
-
-        it("should fire an event when a control is removed",
-           inject([AsyncTestCompleter], (async) => {
-             ObservableWrapper.subscribe(a.valueChanges, (value) => {
-               expect(value).toEqual(['old1']);
-               async.done();
-             });
-
-             a.removeAt(1);
-           }));
-
-        it("should fire an event when a control is added", inject([AsyncTestCompleter], (async) => {
-             a.removeAt(1);
-
-             ObservableWrapper.subscribe(a.valueChanges, (value) => {
-               expect(value).toEqual(['old1', 'old2']);
-               async.done();
-             });
-
-             a.push(c2);
-           }));
-      });
-    });
-
-    describe("find", () => {
-      it("should return null when path is null", () => {
-        var g = new ControlGroup({});
-        expect(g.find(null)).toEqual(null);
-      });
-
-      it("should return null when path is empty", () => {
-        var g = new ControlGroup({});
-        expect(g.find([])).toEqual(null);
-      });
-
-      it("should return null when path is invalid", () => {
-        var g = new ControlGroup({});
-        expect(g.find(["one", "two"])).toEqual(null);
-      });
-
-      it("should return a child of a control group", () => {
-        var g = new ControlGroup(
-            {"one": new Control("111"), "nested": new ControlGroup({"two": new Control("222")})});
-
-        expect(g.find(["nested", "two"]).value).toEqual("222");
-        expect(g.find(["one"]).value).toEqual("111");
-        expect(g.find("nested/two").value).toEqual("222");
-        expect(g.find("one").value).toEqual("111");
-      });
-
-      it("should return an element of an array", () => {
-        var g = new ControlGroup({"array": new ControlArray([new Control("111")])});
-
-        expect(g.find(["array", 0]).value).toEqual("111");
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/forms/validators_spec.ts b/modules/angular2/test/forms/validators_spec.ts
deleted file mode 100644
index 8fbb80769124..000000000000
--- a/modules/angular2/test/forms/validators_spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import {
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  beforeEach,
-  afterEach,
-  el
-} from 'angular2/test_lib';
-import {ControlGroup, Control, Validators} from 'angular2/forms';
-
-export function main() {
-  function validator(key: string, error: any) {
-    return function(c: Control) {
-      var r = {};
-      r[key] = error;
-      return r;
-    }
-  }
-
-  describe("Validators", () => {
-    describe("required", () => {
-      it("should error on an empty string",
-         () => { expect(Validators.required(new Control(""))).toEqual({"required": true}); });
-
-      it("should error on null",
-         () => { expect(Validators.required(new Control(null))).toEqual({"required": true}); });
-
-      it("should not error on a non-empty string",
-         () => { expect(Validators.required(new Control("not empty"))).toEqual(null); });
-    });
-
-    describe("compose", () => {
-      it("should collect errors from all the validators", () => {
-        var c = Validators.compose([validator("a", true), validator("b", true)]);
-        expect(c(new Control(""))).toEqual({"a": true, "b": true});
-      });
-
-      it("should run validators left to right", () => {
-        var c = Validators.compose([validator("a", 1), validator("a", 2)]);
-        expect(c(new Control(""))).toEqual({"a": 2});
-      });
-
-      it("should return null when no errors", () => {
-        var c = Validators.compose([Validators.nullValidator, Validators.nullValidator]);
-        expect(c(new Control(""))).toEqual(null);
-      });
-    });
-
-    describe("controlGroupValidator", () => {
-      it("should collect errors from the child controls", () => {
-        var one = new Control("one", validator("a", true));
-        var two = new Control("one", validator("b", true));
-        var g = new ControlGroup({"one": one, "two": two});
-
-        expect(Validators.group(g)).toEqual({"a": [one], "b": [two]});
-      });
-
-      it("should not include controls that have no errors", () => {
-        var one = new Control("one", validator("a", true));
-        var two = new Control("two");
-        var g = new ControlGroup({"one": one, "two": two});
-
-        expect(Validators.group(g)).toEqual({"a": [one]});
-      });
-
-      it("should return null when no errors", () => {
-        var g = new ControlGroup({"one": new Control("one")});
-
-        expect(Validators.group(g)).toEqual(null);
-      });
-    });
-  });
-}
\ No newline at end of file
diff --git a/modules/angular2/test/http/backends/xhr_backend_spec.ts b/modules/angular2/test/http/backends/xhr_backend_spec.ts
deleted file mode 100644
index 43fce548f06a..000000000000
--- a/modules/angular2/test/http/backends/xhr_backend_spec.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import {
-  AsyncTestCompleter,
-  afterEach,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-  SpyObject
-} from 'angular2/test_lib';
-import {ObservableWrapper} from 'angular2/src/facade/async';
-import {BrowserXhr} from 'angular2/src/http/backends/browser_xhr';
-import {XHRConnection, XHRBackend} from 'angular2/src/http/backends/xhr_backend';
-import {bind, Injector} from 'angular2/di';
-import {Request} from 'angular2/src/http/static_request';
-import {Map} from 'angular2/src/facade/collection';
-import {RequestOptions, BaseRequestOptions} from 'angular2/src/http/base_request_options';
-import {BaseResponseOptions, ResponseOptions} from 'angular2/src/http/base_response_options';
-import {ResponseTypes} from 'angular2/src/http/enums';
-
-var abortSpy;
-var sendSpy;
-var openSpy;
-var addEventListenerSpy;
-var existingXHRs = [];
-
-class MockBrowserXHR extends BrowserXhr {
-  abort: any;
-  send: any;
-  open: any;
-  response: any;
-  responseText: string;
-  callbacks: Map<string, Function>;
-  constructor() {
-    super();
-    var spy = new SpyObject();
-    this.abort = abortSpy = spy.spy('abort');
-    this.send = sendSpy = spy.spy('send');
-    this.open = openSpy = spy.spy('open');
-    this.callbacks = new Map();
-  }
-
-  addEventListener(type: string, cb: Function) { this.callbacks.set(type, cb); }
-
-  dispatchEvent(type: string) { this.callbacks.get(type)({}); }
-
-  build() {
-    var xhr = new MockBrowserXHR();
-    existingXHRs.push(xhr);
-    return xhr;
-  }
-}
-
-export function main() {
-  describe('XHRBackend', () => {
-    var backend;
-    var sampleRequest;
-
-    beforeEach(() => {
-      var injector = Injector.resolveAndCreate([
-        bind(ResponseOptions)
-            .toClass(BaseResponseOptions),
-        bind(BrowserXhr).toClass(MockBrowserXHR),
-        XHRBackend
-      ]);
-      backend = injector.get(XHRBackend);
-      var base = new BaseRequestOptions();
-      sampleRequest = new Request(base.merge(new RequestOptions({url: 'https://google.com'})));
-    });
-
-    afterEach(() => { existingXHRs = []; });
-
-    it('should create a connection',
-       () => { expect(() => backend.createConnection(sampleRequest)).not.toThrow(); });
-
-
-    describe('XHRConnection', () => {
-      it('should use the injected BaseResponseOptions to create the response',
-         inject([AsyncTestCompleter], async => {
-           var connection = new XHRConnection(sampleRequest, new MockBrowserXHR(),
-                                              new ResponseOptions({type: ResponseTypes.Error}));
-           ObservableWrapper.subscribe(connection.response, res => {
-             expect(res.type).toBe(ResponseTypes.Error);
-             async.done();
-           });
-           existingXHRs[0].dispatchEvent('load');
-         }));
-
-      it('should call abort when disposed', () => {
-        var connection = new XHRConnection(sampleRequest, new MockBrowserXHR());
-        connection.dispose();
-        expect(abortSpy).toHaveBeenCalled();
-      });
-
-
-      it('should automatically call open with method and url', () => {
-        new XHRConnection(sampleRequest, new MockBrowserXHR());
-        expect(openSpy).toHaveBeenCalledWith('GET', sampleRequest.url);
-      });
-
-
-      it('should automatically call send on the backend with request body', () => {
-        var body = 'Some body to love';
-        var base = new BaseRequestOptions();
-        new XHRConnection(new Request(base.merge(new RequestOptions({body: body}))),
-                          new MockBrowserXHR());
-        expect(sendSpy).toHaveBeenCalledWith(body);
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/http/base_request_options_spec.ts b/modules/angular2/test/http/base_request_options_spec.ts
deleted file mode 100644
index 5ef109579f6a..000000000000
--- a/modules/angular2/test/http/base_request_options_spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit
-} from 'angular2/test_lib';
-import {BaseRequestOptions, RequestOptions} from 'angular2/src/http/base_request_options';
-import {RequestMethods, RequestModesOpts} from 'angular2/src/http/enums';
-
-export function main() {
-  describe('BaseRequestOptions', () => {
-    it('should create a new object when calling merge', () => {
-      var options1 = new BaseRequestOptions();
-      var options2 = options1.merge(new RequestOptions({method: RequestMethods.DELETE}));
-      expect(options2).not.toBe(options1);
-      expect(options2.method).toBe(RequestMethods.DELETE);
-    });
-
-    it('should retain previously merged values when merging again', () => {
-      var options1 = new BaseRequestOptions();
-      var options2 = options1.merge(new RequestOptions({method: RequestMethods.DELETE}));
-      var options3 = options2.merge(new RequestOptions({mode: RequestModesOpts.NoCors}));
-      expect(options3.mode).toBe(RequestModesOpts.NoCors);
-      expect(options3.method).toBe(RequestMethods.DELETE);
-    });
-  });
-}
diff --git a/modules/angular2/test/http/headers_spec.ts b/modules/angular2/test/http/headers_spec.ts
deleted file mode 100644
index e0a8ecec1bed..000000000000
--- a/modules/angular2/test/http/headers_spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import {Headers} from 'angular2/src/http/headers';
-import {Map, StringMapWrapper} from 'angular2/src/facade/collection';
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit
-} from 'angular2/test_lib';
-
-export function main() {
-  describe('Headers', () => {
-    it('should conform to spec', () => {
-      // Examples borrowed from https://developer.mozilla.org/en-US/docs/Web/API/Headers/Headers
-      // Spec at https://fetch.spec.whatwg.org/#dom-headers
-      var firstHeaders = new Headers();  // Currently empty
-      firstHeaders.append('Content-Type', 'image/jpeg');
-      expect(firstHeaders.get('Content-Type')).toBe('image/jpeg');
-      var httpHeaders = StringMapWrapper.create();
-      StringMapWrapper.set(httpHeaders, 'Content-Type', 'image/jpeg');
-      StringMapWrapper.set(httpHeaders, 'Accept-Charset', 'utf-8');
-      StringMapWrapper.set(httpHeaders, 'X-My-Custom-Header', 'Zeke are cool');
-      var secondHeaders = new Headers(httpHeaders);
-      var secondHeadersObj = new Headers(secondHeaders);
-      expect(secondHeadersObj.get('Content-Type')).toBe('image/jpeg');
-    });
-
-
-    describe('initialization', () => {
-      it('should merge values in provided dictionary', () => {
-        var map = StringMapWrapper.create();
-        StringMapWrapper.set(map, 'foo', 'bar');
-        var headers = new Headers(map);
-        expect(headers.get('foo')).toBe('bar');
-        expect(headers.getAll('foo')).toEqual(['bar']);
-      });
-    });
-
-
-    describe('.set()', () => {
-      it('should clear all values and re-set for the provided key', () => {
-        var map = StringMapWrapper.create();
-        StringMapWrapper.set(map, 'foo', 'bar');
-        var headers = new Headers(map);
-        expect(headers.get('foo')).toBe('bar');
-        expect(headers.getAll('foo')).toEqual(['bar']);
-        headers.set('foo', 'baz');
-        expect(headers.get('foo')).toBe('baz');
-        expect(headers.getAll('foo')).toEqual(['baz']);
-      });
-
-
-      it('should convert input array to string', () => {
-        var headers = new Headers();
-        var inputArr = ['bar', 'baz'];
-        headers.set('foo', inputArr);
-        expect(/bar, ?baz/g.test(headers.get('foo'))).toBe(true);
-        expect(/bar, ?baz/g.test(headers.getAll('foo')[0])).toBe(true);
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/http/http_spec.ts b/modules/angular2/test/http/http_spec.ts
deleted file mode 100644
index ccadc4e417a0..000000000000
--- a/modules/angular2/test/http/http_spec.ts
+++ /dev/null
@@ -1,206 +0,0 @@
-import {
-  AsyncTestCompleter,
-  afterEach,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-  SpyObject
-} from 'angular2/test_lib';
-import {Http} from 'angular2/src/http/http';
-import {Injector, bind} from 'angular2/di';
-import {MockBackend} from 'angular2/src/http/backends/mock_backend';
-import {Response} from 'angular2/src/http/static_response';
-import {RequestMethods} from 'angular2/src/http/enums';
-import {BaseRequestOptions, RequestOptions} from 'angular2/src/http/base_request_options';
-import {ResponseOptions} from 'angular2/src/http/base_response_options';
-import {Request} from 'angular2/src/http/static_request';
-import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-import {ConnectionBackend} from 'angular2/src/http/interfaces';
-
-class SpyObserver extends SpyObject {
-  onNext: Function;
-  onError: Function;
-  onCompleted: Function;
-  constructor() {
-    super();
-    this.onNext = this.spy('onNext');
-    this.onError = this.spy('onError');
-    this.onCompleted = this.spy('onCompleted');
-  }
-}
-
-export function main() {
-  describe('http', () => {
-    var url = 'http://foo.bar';
-    var http: Http;
-    var injector: Injector;
-    var backend: MockBackend;
-    var baseResponse;
-    beforeEach(() => {
-      injector = Injector.resolveAndCreate([
-        BaseRequestOptions,
-        MockBackend,
-        bind(Http).toFactory(
-            function(backend: ConnectionBackend, defaultOptions: BaseRequestOptions) {
-              return new Http(backend, defaultOptions);
-            },
-            [MockBackend, BaseRequestOptions])
-      ]);
-      http = injector.get(Http);
-      backend = injector.get(MockBackend);
-      baseResponse = new Response(new ResponseOptions({body: 'base response'}));
-    });
-
-    afterEach(() => backend.verifyNoPendingRequests());
-
-    describe('Http', () => {
-      describe('.request()', () => {
-        it('should return an Observable',
-           () => { expect(ObservableWrapper.isObservable(http.request(url))).toBe(true); });
-
-
-        it('should accept a fully-qualified request as its only parameter',
-           inject([AsyncTestCompleter], (async) => {
-             ObservableWrapper.subscribe(backend.connections, c => {
-               expect(c.request.url).toBe('https://google.com');
-               c.mockRespond(new Response(new ResponseOptions({body: 'Thank you'})));
-               async.done();
-             });
-             ObservableWrapper.subscribe(
-                 http.request(new Request(new RequestOptions({url: 'https://google.com'}))),
-                 (res) => {});
-           }));
-
-
-        it('should perform a get request for given url if only passed a string',
-           inject([AsyncTestCompleter], (async) => {
-             ObservableWrapper.subscribe(backend.connections, c => c.mockRespond(baseResponse));
-             ObservableWrapper.subscribe(http.request('http://basic.connection'), res => {
-               expect(res.text()).toBe('base response');
-               async.done();
-             });
-           }));
-
-        // TODO: make dart not complain about "argument type 'Map' cannot be assigned to the
-        // parameter type 'IRequestOptions'"
-        // xit('should perform a get request for given url if passed a dictionary',
-        //     inject([AsyncTestCompleter], async => {
-        //       ObservableWrapper.subscribe(backend.connections, c => c.mockRespond(baseResponse));
-        //       ObservableWrapper.subscribe(http.request(url, {method: RequestMethods.GET}), res =>
-        //       {
-        //         expect(res.text()).toBe('base response');
-        //         async.done();
-        //       });
-        //     }));
-      });
-
-
-      describe('.get()', () => {
-        it('should perform a get request for given url', inject([AsyncTestCompleter], async => {
-             ObservableWrapper.subscribe(backend.connections, c => {
-               expect(c.request.method).toBe(RequestMethods.GET);
-               backend.resolveAllConnections();
-               async.done();
-             });
-             ObservableWrapper.subscribe(http.get(url), res => {});
-           }));
-      });
-
-
-      describe('.post()', () => {
-        it('should perform a post request for given url', inject([AsyncTestCompleter], async => {
-             ObservableWrapper.subscribe(backend.connections, c => {
-               expect(c.request.method).toBe(RequestMethods.POST);
-               backend.resolveAllConnections();
-               async.done();
-             });
-             ObservableWrapper.subscribe(http.post(url, 'post me'), res => {});
-           }));
-
-
-        it('should attach the provided body to the request', inject([AsyncTestCompleter], async => {
-             var body = 'this is my post body';
-             ObservableWrapper.subscribe(backend.connections, c => {
-               expect(c.request.text()).toBe(body);
-               backend.resolveAllConnections();
-               async.done();
-             });
-             ObservableWrapper.subscribe(http.post(url, body), res => {});
-           }));
-      });
-
-
-      describe('.put()', () => {
-        it('should perform a put request for given url', inject([AsyncTestCompleter], async => {
-             ObservableWrapper.subscribe(backend.connections, c => {
-               expect(c.request.method).toBe(RequestMethods.PUT);
-               backend.resolveAllConnections();
-               async.done();
-             });
-             ObservableWrapper.subscribe(http.put(url, 'put me'), res => {});
-           }));
-
-        it('should attach the provided body to the request', inject([AsyncTestCompleter], async => {
-             var body = 'this is my put body';
-             ObservableWrapper.subscribe(backend.connections, c => {
-               expect(c.request.text()).toBe(body);
-               backend.resolveAllConnections();
-               async.done();
-             });
-             ObservableWrapper.subscribe(http.put(url, body), res => {});
-           }));
-      });
-
-
-      describe('.delete()', () => {
-        it('should perform a delete request for given url', inject([AsyncTestCompleter], async => {
-             ObservableWrapper.subscribe(backend.connections, c => {
-               expect(c.request.method).toBe(RequestMethods.DELETE);
-               backend.resolveAllConnections();
-               async.done();
-             });
-             ObservableWrapper.subscribe(http.delete(url), res => {});
-           }));
-      });
-
-
-      describe('.patch()', () => {
-        it('should perform a patch request for given url', inject([AsyncTestCompleter], async => {
-             ObservableWrapper.subscribe(backend.connections, c => {
-               expect(c.request.method).toBe(RequestMethods.PATCH);
-               backend.resolveAllConnections();
-               async.done();
-             });
-             ObservableWrapper.subscribe(http.patch(url, 'this is my patch body'), res => {});
-           }));
-
-        it('should attach the provided body to the request', inject([AsyncTestCompleter], async => {
-             var body = 'this is my patch body';
-             ObservableWrapper.subscribe(backend.connections, c => {
-               expect(c.request.text()).toBe(body);
-               backend.resolveAllConnections();
-               async.done();
-             });
-             ObservableWrapper.subscribe(http.patch(url, body), res => {});
-           }));
-      });
-
-
-      describe('.head()', () => {
-        it('should perform a head request for given url', inject([AsyncTestCompleter], async => {
-             ObservableWrapper.subscribe(backend.connections, c => {
-               expect(c.request.method).toBe(RequestMethods.HEAD);
-               backend.resolveAllConnections();
-               async.done();
-             });
-             ObservableWrapper.subscribe(http.head(url), res => {});
-           }));
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/http/url_search_params_spec.ts b/modules/angular2/test/http/url_search_params_spec.ts
deleted file mode 100644
index 17093e9ce61a..000000000000
--- a/modules/angular2/test/http/url_search_params_spec.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit
-} from 'angular2/test_lib';
-import {URLSearchParams} from 'angular2/src/http/url_search_params';
-
-export function main() {
-  describe('URLSearchParams', () => {
-    it('should conform to spec', () => {
-      var paramsString = "q=URLUtils.searchParams&topic=api";
-      var searchParams = new URLSearchParams(paramsString);
-
-      // Tests borrowed from example at
-      // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
-      // Compliant with spec described at https://url.spec.whatwg.org/#urlsearchparams
-      expect(searchParams.has("topic")).toBe(true);
-      expect(searchParams.has("foo")).toBe(false);
-      expect(searchParams.get("topic")).toEqual("api");
-      expect(searchParams.getAll("topic")).toEqual(["api"]);
-      expect(searchParams.get("foo")).toBe(null);
-      searchParams.append("topic", "webdev");
-      expect(searchParams.getAll("topic")).toEqual(["api", "webdev"]);
-      expect(searchParams.toString()).toEqual("q=URLUtils.searchParams&topic=api&topic=webdev");
-      searchParams.delete("topic");
-      expect(searchParams.toString()).toEqual("q=URLUtils.searchParams");
-    });
-  });
-}
diff --git a/modules/angular2/test/mock/view_resolver_mock_spec.ts b/modules/angular2/test/mock/view_resolver_mock_spec.ts
deleted file mode 100644
index 909881fdb21b..000000000000
--- a/modules/angular2/test/mock/view_resolver_mock_spec.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import {
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  it,
-} from 'angular2/test_lib';
-
-import {stringify} from 'angular2/src/facade/lang';
-
-import {MockViewResolver} from 'angular2/src/mock/view_resolver_mock';
-
-import {Component, View} from 'angular2/angular2';
-
-import {isBlank} from 'angular2/src/facade/lang';
-
-import * as viewImpl from 'angular2/src/core/annotations_impl/view';
-
-export function main() {
-  describe('MockViewResolver', () => {
-    var viewResolver;
-
-    beforeEach(() => { viewResolver = new MockViewResolver(); });
-
-    describe('View overriding', () => {
-      it('should fallback to the default ViewResolver when templates are not overridden', () => {
-        var view = viewResolver.resolve(SomeComponent);
-        expect(view.template).toEqual('template');
-        expect(view.directives).toEqual([SomeDirective]);
-      });
-
-      it('should allow overriding the @View', () => {
-        viewResolver.setView(SomeComponent, new viewImpl.View({template: 'overridden template'}));
-        var view = viewResolver.resolve(SomeComponent);
-        expect(view.template).toEqual('overridden template');
-        expect(isBlank(view.directives)).toBe(true);
-
-      });
-
-      it('should not allow overriding a view after it has been resolved', () => {
-        viewResolver.resolve(SomeComponent);
-        expect(() => {
-          viewResolver.setView(SomeComponent, new viewImpl.View({template: 'overridden template'}));
-        })
-            .toThrowError(
-                `The component ${stringify(SomeComponent)} has already been compiled, its configuration can not be changed`);
-      });
-    });
-
-    describe('inline template definition overriding', () => {
-      it('should allow overriding the default template', () => {
-        viewResolver.setInlineTemplate(SomeComponent, 'overridden template');
-        var view = viewResolver.resolve(SomeComponent);
-        expect(view.template).toEqual('overridden template');
-        expect(view.directives).toEqual([SomeDirective]);
-      });
-
-      it('should allow overriding an overriden @View', () => {
-        viewResolver.setView(SomeComponent, new viewImpl.View({template: 'overridden template'}));
-        viewResolver.setInlineTemplate(SomeComponent, 'overridden template x 2');
-        var view = viewResolver.resolve(SomeComponent);
-        expect(view.template).toEqual('overridden template x 2');
-      });
-
-      it('should not allow overriding a view after it has been resolved', () => {
-        viewResolver.resolve(SomeComponent);
-        expect(() => { viewResolver.setInlineTemplate(SomeComponent, 'overridden template'); })
-            .toThrowError(
-                `The component ${stringify(SomeComponent)} has already been compiled, its configuration can not be changed`);
-      });
-    });
-
-
-    describe('Directive overriding', () => {
-      it('should allow overriding a directive from the default view', () => {
-        viewResolver.overrideViewDirective(SomeComponent, SomeDirective, SomeOtherDirective);
-        var view = viewResolver.resolve(SomeComponent);
-        expect(view.directives.length).toEqual(1);
-        expect(view.directives[0]).toBe(SomeOtherDirective);
-      });
-
-      it('should allow overriding a directive from an overriden @View', () => {
-        viewResolver.setView(SomeComponent, new viewImpl.View({directives: [SomeOtherDirective]}));
-        viewResolver.overrideViewDirective(SomeComponent, SomeOtherDirective, SomeComponent);
-        var view = viewResolver.resolve(SomeComponent);
-        expect(view.directives.length).toEqual(1);
-        expect(view.directives[0]).toBe(SomeComponent);
-      });
-
-      it('should throw when the overridden directive is not present', () => {
-        viewResolver.overrideViewDirective(SomeComponent, SomeOtherDirective, SomeDirective);
-        expect(() => { viewResolver.resolve(SomeComponent); })
-            .toThrowError(
-                `Overriden directive ${stringify(SomeOtherDirective)} not found in the template of ${stringify(SomeComponent)}`);
-      });
-
-      it('should not allow overriding a directive after its view has been resolved', () => {
-        viewResolver.resolve(SomeComponent);
-        expect(() => {
-          viewResolver.overrideViewDirective(SomeComponent, SomeDirective, SomeOtherDirective);
-        })
-            .toThrowError(
-                `The component ${stringify(SomeComponent)} has already been compiled, its configuration can not be changed`);
-      });
-    });
-  });
-}
-
-class SomeDirective {}
-
-@Component({selector: 'cmp'})
-@View({
-  template: 'template',
-  directives: [SomeDirective],
-})
-class SomeComponent {
-}
-
-class SomeOtherDirective {}
diff --git a/modules/angular2/test/reflection/reflector_common.dart b/modules/angular2/test/reflection/reflector_common.dart
deleted file mode 100644
index 8fe8321d5f92..000000000000
--- a/modules/angular2/test/reflection/reflector_common.dart
+++ /dev/null
@@ -1,19 +0,0 @@
-class ClassDecorator {
-  final dynamic value;
-
-  const ClassDecorator(this.value);
-}
-
-class ParamDecorator {
-  final dynamic value;
-
-  const ParamDecorator(this.value);
-}
-
-ClassDecorator classDecorator(value) {
-  return new ClassDecorator(value);
-}
-
-ParamDecorator paramDecorator(value) {
-  return new ParamDecorator(value);
-}
diff --git a/modules/angular2/test/reflection/reflector_common.ts b/modules/angular2/test/reflection/reflector_common.ts
deleted file mode 100644
index ea6d16b69796..000000000000
--- a/modules/angular2/test/reflection/reflector_common.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {makeDecorator, makeParamDecorator} from 'angular2/src/util/decorators';
-
-export class ClassDecoratorImpl {
-  value;
-
-  constructor(value) { this.value = value; }
-}
-
-export class ParamDecoratorImpl {
-  value;
-
-  constructor(value) { this.value = value; }
-}
-
-export function classDecorator(value) {
-  return new ClassDecoratorImpl(value);
-}
-
-export function paramDecorator(value) {
-  return new ParamDecoratorImpl(value);
-}
-
-export var ClassDecorator = makeDecorator(ClassDecoratorImpl);
-export var ParamDecorator = makeParamDecorator(ParamDecoratorImpl);
diff --git a/modules/angular2/test/reflection/reflector_spec.ts b/modules/angular2/test/reflection/reflector_spec.ts
deleted file mode 100644
index 227ee4f3661f..000000000000
--- a/modules/angular2/test/reflection/reflector_spec.ts
+++ /dev/null
@@ -1,355 +0,0 @@
-import {describe, it, iit, ddescribe, expect, beforeEach, IS_DARTIUM} from 'angular2/test_lib';
-import {Reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {ClassDecorator, ParamDecorator, classDecorator, paramDecorator} from './reflector_common';
-import {List} from 'angular2/src/facade/collection';
-
-class AType {
-  value;
-
-  constructor(value) { this.value = value; }
-}
-
-@ClassDecorator('class')
-class ClassWithDecorators {
-  a;
-  b;
-
-  constructor(@ParamDecorator("a") a: AType, @ParamDecorator("b") b: AType) {
-    this.a = a;
-    this.b = b;
-  }
-}
-
-class ClassWithoutDecorators {
-  constructor(a, b) {}
-}
-
-class TestObj {
-  a;
-  b;
-
-  constructor(a, b) {
-    this.a = a;
-    this.b = b;
-  }
-
-  identity(arg) { return arg; }
-}
-
-class Interface {}
-
-class ClassImplementingInterface implements Interface {}
-
-export function main() {
-  describe('Reflector', () => {
-    var reflector;
-
-    beforeEach(() => { reflector = new Reflector(new ReflectionCapabilities()); });
-
-    describe("factory", () => {
-      it("should create a factory for the given type", () => {
-        var obj = reflector.factory(TestObj)(1, 2);
-
-        expect(obj.a).toEqual(1);
-        expect(obj.b).toEqual(2);
-      });
-
-      it("should check args from no to max", () => {
-        var f = t => reflector.factory(t);
-        var checkArgs = (obj, args) => expect(obj.args).toEqual(args);
-
-        // clang-format off
-        checkArgs(f(TestObjWith00Args)(), []);
-        checkArgs(f(TestObjWith01Args)(1), [1]);
-        checkArgs(f(TestObjWith02Args)(1, 2), [1, 2]);
-        checkArgs(f(TestObjWith03Args)(1, 2, 3), [1, 2, 3]);
-        checkArgs(f(TestObjWith04Args)(1, 2, 3, 4), [1, 2, 3, 4]);
-        checkArgs(f(TestObjWith05Args)(1, 2, 3, 4, 5), [1, 2, 3, 4, 5]);
-        checkArgs(f(TestObjWith06Args)(1, 2, 3, 4, 5, 6), [1, 2, 3, 4, 5, 6]);
-        checkArgs(f(TestObjWith07Args)(1, 2, 3, 4, 5, 6, 7), [1, 2, 3, 4, 5, 6, 7]);
-        checkArgs(f(TestObjWith08Args)(1, 2, 3, 4, 5, 6, 7, 8), [1, 2, 3, 4, 5, 6, 7, 8]);
-        checkArgs(f(TestObjWith09Args)(1, 2, 3, 4, 5, 6, 7, 8, 9), [1, 2, 3, 4, 5, 6, 7, 8, 9]);
-        checkArgs(f(TestObjWith10Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
-        checkArgs(f(TestObjWith11Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
-        checkArgs(f(TestObjWith12Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
-        checkArgs(f(TestObjWith13Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]);
-        checkArgs(f(TestObjWith14Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]);
-        checkArgs(f(TestObjWith15Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
-        checkArgs(f(TestObjWith16Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
-        checkArgs(f(TestObjWith17Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]);
-        checkArgs(f(TestObjWith18Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]);
-        checkArgs(f(TestObjWith19Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]);
-        checkArgs(f(TestObjWith20Args)(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
-        // clang-format on
-      });
-
-      it("should throw when more than 20 arguments",
-         () => { expect(() => reflector.factory(TestObjWith21Args)).toThrowError(); });
-
-      it("should return a registered factory if available", () => {
-        reflector.registerType(TestObj, {"factory": () => "fake"});
-        expect(reflector.factory(TestObj)()).toEqual("fake");
-      });
-    });
-
-    describe("parameters", () => {
-      it("should return an array of parameters for a type", () => {
-        var p = reflector.parameters(ClassWithDecorators);
-        expect(p).toEqual([[AType, paramDecorator('a')], [AType, paramDecorator('b')]]);
-      });
-
-      it("should work for a class without annotations", () => {
-        var p = reflector.parameters(ClassWithoutDecorators);
-        expect(p.length).toEqual(2);
-      });
-
-      it("should return registered parameters if available", () => {
-        reflector.registerType(TestObj, {"parameters": [1, 2]});
-        expect(reflector.parameters(TestObj)).toEqual([1, 2]);
-      });
-
-      it("should return an empty list when no paramters field in the stored type info", () => {
-        reflector.registerType(TestObj, {});
-        expect(reflector.parameters(TestObj)).toEqual([]);
-      });
-    });
-
-    describe("annotations", () => {
-      it("should return an array of annotations for a type", () => {
-        var p = reflector.annotations(ClassWithDecorators);
-        expect(p).toEqual([classDecorator('class')]);
-      });
-
-      it("should return registered annotations if available", () => {
-        reflector.registerType(TestObj, {"annotations": [1, 2]});
-        expect(reflector.annotations(TestObj)).toEqual([1, 2]);
-      });
-
-      it("should work for a class without annotations", () => {
-        var p = reflector.annotations(ClassWithoutDecorators);
-        expect(p).toEqual([]);
-      });
-    });
-
-    if (IS_DARTIUM) {
-      describe("interfaces", () => {
-        it("should return an array of interfaces for a type", () => {
-          var p = reflector.interfaces(ClassImplementingInterface);
-          expect(p).toEqual([Interface]);
-        });
-
-        it("should return an empty array otherwise", () => {
-          var p = reflector.interfaces(ClassWithDecorators);
-          expect(p).toEqual([]);
-        });
-      });
-    }
-
-    describe("getter", () => {
-      it("returns a function reading a property", () => {
-        var getA = reflector.getter('a');
-        expect(getA(new TestObj(1, 2))).toEqual(1);
-      });
-
-      it("should return a registered getter if available", () => {
-        reflector.registerGetters({"abc": (obj) => "fake"});
-        expect(reflector.getter("abc")("anything")).toEqual("fake");
-      });
-    });
-
-    describe("setter", () => {
-      it("returns a function setting a property", () => {
-        var setA = reflector.setter('a');
-        var obj = new TestObj(1, 2);
-        setA(obj, 100);
-        expect(obj.a).toEqual(100);
-      });
-
-      it("should return a registered setter if available", () => {
-        var updateMe;
-        reflector.registerSetters({"abc": (obj, value) => { updateMe = value; }});
-        reflector.setter("abc")("anything", "fake");
-
-        expect(updateMe).toEqual("fake");
-      });
-    });
-
-    describe("method", () => {
-      it("returns a function invoking a method", () => {
-        var func = reflector.method('identity');
-        var obj = new TestObj(1, 2);
-        expect(func(obj, ['value'])).toEqual('value');
-      });
-
-      it("should return a registered method if available", () => {
-        reflector.registerMethods({"abc": (obj, args) => args});
-        expect(reflector.method("abc")("anything", ["fake"])).toEqual(['fake']);
-      });
-    });
-  });
-}
-
-
-class TestObjWith00Args {
-  args: List<any>;
-  constructor() { this.args = []; }
-}
-
-class TestObjWith01Args {
-  args: List<any>;
-  constructor(a1) { this.args = [a1]; }
-}
-
-class TestObjWith02Args {
-  args: List<any>;
-  constructor(a1, a2) { this.args = [a1, a2]; }
-}
-
-class TestObjWith03Args {
-  args: List<any>;
-  constructor(a1, a2, a3) { this.args = [a1, a2, a3]; }
-}
-
-class TestObjWith04Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4) { this.args = [a1, a2, a3, a4]; }
-}
-
-class TestObjWith05Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5) { this.args = [a1, a2, a3, a4, a5]; }
-}
-
-class TestObjWith06Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6) { this.args = [a1, a2, a3, a4, a5, a6]; }
-}
-
-class TestObjWith07Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7) { this.args = [a1, a2, a3, a4, a5, a6, a7]; }
-}
-
-class TestObjWith08Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8) { this.args = [a1, a2, a3, a4, a5, a6, a7, a8]; }
-}
-
-class TestObjWith09Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9) {
-    this.args = [a1, a2, a3, a4, a5, a6, a7, a8, a9];
-  }
-}
-
-class TestObjWith10Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10) {
-    this.args = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10];
-  }
-}
-
-class TestObjWith11Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11) {
-    this.args = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11];
-  }
-}
-
-class TestObjWith12Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12) {
-    this.args = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12];
-  }
-}
-
-class TestObjWith13Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13) {
-    this.args = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13];
-  }
-}
-
-class TestObjWith14Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14) {
-    this.args = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14];
-  }
-}
-
-class TestObjWith15Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15) {
-    this.args = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15];
-  }
-}
-
-class TestObjWith16Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16) {
-    this.args = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16];
-  }
-}
-
-class TestObjWith17Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17) {
-    this.args = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17];
-  }
-}
-
-class TestObjWith18Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18) {
-    this.args = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18];
-  }
-}
-
-class TestObjWith19Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18,
-              a19) {
-    this.args =
-        [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18, a19];
-  }
-}
-
-class TestObjWith20Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18, a19,
-              a20) {
-    this.args =
-        [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18, a19, a20];
-  }
-}
-
-class TestObjWith21Args {
-  args: List<any>;
-  constructor(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a16, a17, a18, a19,
-              a20, a21) {
-    this.args = [
-      a1,
-      a2,
-      a3,
-      a4,
-      a5,
-      a6,
-      a7,
-      a8,
-      a9,
-      a10,
-      a11,
-      a12,
-      a13,
-      a14,
-      a15,
-      a16,
-      a17,
-      a18,
-      a19,
-      a20,
-      a21
-    ];
-  }
-}
diff --git a/modules/angular2/test/render/api_spec.ts b/modules/angular2/test/render/api_spec.ts
deleted file mode 100644
index 44774ee08d15..000000000000
--- a/modules/angular2/test/render/api_spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {DirectiveMetadata} from 'angular2/src/render/api';
-
-import {MapWrapper} from 'angular2/src/facade/collection';
-import {ddescribe, describe, expect, it} from 'angular2/test_lib';
-
-export function main() {
-  describe('Metadata', () => {
-    describe('host', () => {
-      it('should parse host configuration', () => {
-        var md = DirectiveMetadata.create({
-          host: MapWrapper.createFromPairs([
-            ['(event)', 'eventVal'],
-            ['[prop]', 'propVal'],
-            ['@action', 'actionVal'],
-            ['attr', 'attrVal']
-          ])
-        });
-
-        expect(md.hostListeners).toEqual(MapWrapper.createFromPairs([['event', 'eventVal']]));
-        expect(md.hostProperties).toEqual(MapWrapper.createFromPairs([['prop', 'propVal']]));
-        expect(md.hostActions).toEqual(MapWrapper.createFromPairs([['action', 'actionVal']]));
-        expect(md.hostAttributes).toEqual(MapWrapper.createFromPairs([['attr', 'attrVal']]));
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/render/dom/compiler/compiler_browser_spec.ts b/modules/angular2/test/render/dom/compiler/compiler_browser_spec.ts
deleted file mode 100644
index b8c35ff7dc2a..000000000000
--- a/modules/angular2/test/render/dom/compiler/compiler_browser_spec.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
-* Runs compiler tests using in-browser DOM adapter.
-*/
-
-import {runCompilerCommonTests} from './compiler_common_tests';
-
-export function main() {
-  runCompilerCommonTests();
-}
diff --git a/modules/angular2/test/render/dom/compiler/compiler_common_tests.ts b/modules/angular2/test/render/dom/compiler/compiler_common_tests.ts
deleted file mode 100644
index fc4808d2cf74..000000000000
--- a/modules/angular2/test/render/dom/compiler/compiler_common_tests.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  it,
-} from 'angular2/test_lib';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {List, ListWrapper, Map, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {Type, isBlank, stringify, isPresent, BaseException} from 'angular2/src/facade/lang';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-
-import {DomCompiler} from 'angular2/src/render/dom/compiler/compiler';
-import {ProtoViewDto, ViewDefinition, DirectiveMetadata, ViewType} from 'angular2/src/render/api';
-import {CompileElement} from 'angular2/src/render/dom/compiler/compile_element';
-import {CompileStep} from 'angular2/src/render/dom/compiler/compile_step';
-import {CompileStepFactory} from 'angular2/src/render/dom/compiler/compile_step_factory';
-import {CompileControl} from 'angular2/src/render/dom/compiler/compile_control';
-import {ViewLoader} from 'angular2/src/render/dom/compiler/view_loader';
-
-import {resolveInternalDomProtoView} from 'angular2/src/render/dom/view/proto_view';
-
-export function runCompilerCommonTests() {
-  describe('DomCompiler', function() {
-    var mockStepFactory: MockStepFactory;
-
-    function createCompiler(processClosure, urlData = null) {
-      if (isBlank(urlData)) {
-        urlData = new Map();
-      }
-      var tplLoader = new FakeViewLoader(urlData);
-      mockStepFactory = new MockStepFactory([new MockStep(processClosure)]);
-      return new DomCompiler(mockStepFactory, tplLoader);
-    }
-
-    describe('compile', () => {
-
-      it('should run the steps and build the AppProtoView of the root element',
-         inject([AsyncTestCompleter], (async) => {
-           var compiler = createCompiler((parent, current, control) => {
-             current.inheritedProtoView.bindVariable('b', 'a');
-           });
-           compiler.compile(
-                       new ViewDefinition({componentId: 'someComponent', template: '<div></div>'}))
-               .then((protoView) => {
-                 expect(protoView.variableBindings)
-                     .toEqual(MapWrapper.createFromStringMap({'a': 'b'}));
-                 async.done();
-               });
-         }));
-
-      it('should run the steps and build the proto view', inject([AsyncTestCompleter], (async) => {
-           var compiler = createCompiler((parent, current, control) => {
-             current.inheritedProtoView.bindVariable('b', 'a');
-           });
-
-           var dirMetadata = DirectiveMetadata.create(
-               {id: 'id', selector: 'CUSTOM', type: DirectiveMetadata.COMPONENT_TYPE});
-           compiler.compileHost(dirMetadata)
-               .then((protoView) => {
-                 expect(DOM.tagName(resolveInternalDomProtoView(protoView.render).element))
-                     .toEqual('CUSTOM');
-                 expect(mockStepFactory.viewDef.directives).toEqual([dirMetadata]);
-                 expect(protoView.variableBindings)
-                     .toEqual(MapWrapper.createFromStringMap({'a': 'b'}));
-                 async.done();
-               });
-         }));
-
-      it('should use the inline template and compile in sync',
-         inject([AsyncTestCompleter], (async) => {
-           var compiler = createCompiler(EMPTY_STEP);
-           compiler.compile(
-                       new ViewDefinition({componentId: 'someId', template: 'inline component'}))
-               .then((protoView) => {
-                 expect(DOM.getInnerHTML(resolveInternalDomProtoView(protoView.render).element))
-                     .toEqual('inline component');
-                 async.done();
-               });
-         }));
-
-      it('should load url templates', inject([AsyncTestCompleter], (async) => {
-           var urlData = MapWrapper.createFromStringMap({'someUrl': 'url component'});
-           var compiler = createCompiler(EMPTY_STEP, urlData);
-           compiler.compile(new ViewDefinition({componentId: 'someId', templateAbsUrl: 'someUrl'}))
-               .then((protoView) => {
-                 expect(DOM.getInnerHTML(resolveInternalDomProtoView(protoView.render).element))
-                     .toEqual('url component');
-                 async.done();
-               });
-         }));
-
-      it('should report loading errors', inject([AsyncTestCompleter], (async) => {
-           var compiler = createCompiler(EMPTY_STEP, new Map());
-           PromiseWrapper.catchError(
-               compiler.compile(
-                   new ViewDefinition({componentId: 'someId', templateAbsUrl: 'someUrl'})),
-               (e) => {
-                 expect(e.message).toEqual(
-                     'Failed to load the template for "someId" : Failed to fetch url "someUrl"');
-                 async.done();
-                 return null;
-               });
-         }));
-
-      it('should return ProtoViews of type COMPONENT_VIEW_TYPE',
-         inject([AsyncTestCompleter], (async) => {
-           var compiler = createCompiler(EMPTY_STEP);
-           compiler.compile(
-                       new ViewDefinition({componentId: 'someId', template: 'inline component'}))
-               .then((protoView) => {
-                 expect(protoView.type).toEqual(ViewType.COMPONENT);
-                 async.done();
-               });
-         }));
-
-    });
-
-    describe('compileHost', () => {
-
-      it('should return ProtoViews of type HOST_VIEW_TYPE',
-         inject([AsyncTestCompleter], (async) => {
-           var compiler = createCompiler(EMPTY_STEP);
-           compiler.compileHost(someComponent)
-               .then((protoView) => {
-                 expect(protoView.type).toEqual(ViewType.HOST);
-                 async.done();
-               });
-         }));
-
-    });
-
-  });
-}
-
-class MockStepFactory extends CompileStepFactory {
-  steps: List<CompileStep>;
-  subTaskPromises: List<Promise<any>>;
-  viewDef: ViewDefinition;
-
-  constructor(steps) {
-    super();
-    this.steps = steps;
-  }
-  createSteps(viewDef): List<CompileStep> {
-    this.viewDef = viewDef;
-    return this.steps;
-  }
-}
-
-class MockStep implements CompileStep {
-  processClosure: Function;
-  constructor(process) { this.processClosure = process; }
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    this.processClosure(parent, current, control);
-  }
-}
-
-var EMPTY_STEP = (parent, current, control) => {
-  if (isPresent(parent)) {
-    current.inheritedProtoView = parent.inheritedProtoView;
-  }
-};
-
-class FakeViewLoader extends ViewLoader {
-  _urlData: Map<string, string>;
-  constructor(urlData) {
-    super(null, null, null);
-    this._urlData = urlData;
-  }
-
-  load(view: ViewDefinition): Promise<any> {
-    if (isPresent(view.template)) {
-      return PromiseWrapper.resolve(DOM.createTemplate(view.template));
-    }
-
-    if (isPresent(view.templateAbsUrl)) {
-      var content = this._urlData.get(view.templateAbsUrl);
-      return isPresent(content) ?
-                 PromiseWrapper.resolve(DOM.createTemplate(content)) :
-                 PromiseWrapper.reject(`Failed to fetch url "${view.templateAbsUrl}"`, null);
-    }
-
-    throw new BaseException('View should have either the templateUrl or template property set');
-  }
-}
-
-var someComponent = DirectiveMetadata.create(
-    {selector: 'some-comp', id: 'someComponent', type: DirectiveMetadata.COMPONENT_TYPE});
diff --git a/modules/angular2/test/render/dom/compiler/compiler_html5lib.server.spec.dart b/modules/angular2/test/render/dom/compiler/compiler_html5lib.server.spec.dart
deleted file mode 100644
index 0a2f98865baf..000000000000
--- a/modules/angular2/test/render/dom/compiler/compiler_html5lib.server.spec.dart
+++ /dev/null
@@ -1,11 +0,0 @@
-library angular2.compiler.html5lib_dom_adapter.test;
-
-import 'package:angular2/src/dom/html_adapter.dart';
-import 'package:angular2/src/test_lib/test_lib.dart' show testSetup;
-import 'compiler_common_tests.dart';
-
-void main() {
-  Html5LibDomAdapter.makeCurrent();
-  testSetup();
-  runCompilerCommonTests();
-}
diff --git a/modules/angular2/test/render/dom/compiler/directive_parser_spec.ts b/modules/angular2/test/render/dom/compiler/directive_parser_spec.ts
deleted file mode 100644
index b390481d8d06..000000000000
--- a/modules/angular2/test/render/dom/compiler/directive_parser_spec.ts
+++ /dev/null
@@ -1,260 +0,0 @@
-import {describe, beforeEach, it, xit, expect, iit, ddescribe, el} from 'angular2/test_lib';
-import {isPresent, isBlank, assertionsEnabled, IMPLEMENTS} from 'angular2/src/facade/lang';
-import {ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {DirectiveParser} from 'angular2/src/render/dom/compiler/directive_parser';
-import {CompilePipeline} from 'angular2/src/render/dom/compiler/compile_pipeline';
-import {CompileStep} from 'angular2/src/render/dom/compiler/compile_step';
-import {CompileElement} from 'angular2/src/render/dom/compiler/compile_element';
-import {CompileControl} from 'angular2/src/render/dom/compiler/compile_control';
-import {ViewDefinition, DirectiveMetadata} from 'angular2/src/render/api';
-import {Lexer, Parser} from 'angular2/change_detection';
-import {ElementBinderBuilder} from 'angular2/src/render/dom/view/proto_view_builder';
-
-export function main() {
-  describe('DirectiveParser', () => {
-    var parser, annotatedDirectives;
-
-    beforeEach(() => {
-      annotatedDirectives = [
-        someComponent,
-        someComponent2,
-        someDirective,
-        someDirectiveIgnoringChildren,
-        decoratorWithMultipleAttrs,
-        someDirectiveWithProps,
-        someDirectiveWithHostProperties,
-        someDirectiveWithInvalidHostProperties,
-        someDirectiveWithHostAttributes,
-        someDirectiveWithEvents,
-        someDirectiveWithGlobalEvents
-      ];
-      parser = new Parser(new Lexer());
-    });
-
-    function createPipeline(propertyBindings = null, directives = null) {
-      if (isBlank(directives)) directives = annotatedDirectives;
-
-      return new CompilePipeline([
-        new MockStep((parent, current, control) => {
-          if (isPresent(propertyBindings)) {
-            StringMapWrapper.forEach(propertyBindings, (ast, name) => {
-              current.bindElement().bindProperty(name, ast);
-            });
-          }
-        }),
-        new DirectiveParser(parser, directives)
-      ]);
-    }
-
-    function process(el, propertyBindings = null, directives = null): List<ElementBinderBuilder> {
-      var pipeline = createPipeline(propertyBindings, directives);
-      return ListWrapper.map(pipeline.process(el), (ce) => ce.inheritedElementBinder);
-    }
-
-    it('should not add directives if they are not used', () => {
-      var results = process(el('<div></div>'));
-      expect(results[0]).toBe(null);
-    });
-
-    it('should detect directives in attributes', () => {
-      var results = process(el('<div some-decor></div>'));
-      expect(results[0].directives[0].directiveIndex)
-          .toBe(annotatedDirectives.indexOf(someDirective));
-    });
-
-    it('should detect directives with multiple attributes', () => {
-      var results = process(el('<input type=text control=one></input>'));
-      expect(results[0].directives[0].directiveIndex)
-          .toBe(annotatedDirectives.indexOf(decoratorWithMultipleAttrs));
-    });
-
-    it('should compile children by default', () => {
-      var results = createPipeline().process(el('<div some-decor></div>'));
-      expect(results[0].compileChildren).toEqual(true);
-    });
-
-    it('should stop compiling children when specified in the directive config', () => {
-      var results = createPipeline().process(el('<div some-decor-ignoring-children></div>'));
-      expect(results[0].compileChildren).toEqual(false);
-    });
-
-    it('should bind directive properties from bound properties', () => {
-      var results = process(el('<div some-decor-props></div>'),
-                            {'elProp': parser.parseBinding('someExpr', '')});
-      var directiveBinding = results[0].directives[0];
-      expect(directiveBinding.propertyBindings.get('dirProp').source).toEqual('someExpr');
-    });
-
-    it('should bind directive properties from attribute values', () => {
-      var results = process(el('<div some-decor-props el-prop="someValue"></div>'));
-      var directiveBinding = results[0].directives[0];
-      var simpleProp = directiveBinding.propertyBindings.get('dirProp');
-      expect(simpleProp.source).toEqual('someValue');
-    });
-
-    it('should bind host directive properties', () => {
-      var element = el('<input some-decor-with-host-props>');
-      var results = process(element);
-
-      var directiveBinding = results[0].directives[0];
-
-      var ast = directiveBinding.hostPropertyBindings.get('hostProp');
-      expect(ast.source).toEqual('dirProp');
-    });
-
-    it('should throw when parsing invalid host properties', () => {
-      expect(() => process(el('<input some-decor-with-invalid-host-props>')))
-          .toThrowError(
-              new RegExp('Simple binding expression can only contain field access and constants'));
-    });
-
-    it('should set host element attributes', () => {
-      var element = el('<input some-decor-with-host-attrs>');
-      var results = process(element);
-
-      expect(DOM.getAttribute(results[0].element, 'attr_name')).toEqual('attr_val');
-    });
-
-    it('should not set host element attribute if an attribute already exists', () => {
-      var element = el('<input attr_name="initial" some-decor-with-host-attrs>');
-      var results = process(element);
-
-      expect(DOM.getAttribute(results[0].element, 'attr_name')).toEqual('initial');
-
-      DOM.removeAttribute(element, 'attr_name');
-      results = process(element);
-      expect(DOM.getAttribute(results[0].element, 'attr_name')).toEqual('attr_val');
-    });
-
-    it('should add CSS classes if "class" specified in host element attributes', () => {
-      var element = el('<input class="foo baz" some-decor-with-host-attrs>');
-      var results = process(element);
-
-      expect(DOM.hasClass(results[0].element, 'foo')).toBeTruthy();
-      expect(DOM.hasClass(results[0].element, 'bar')).toBeTruthy();
-      expect(DOM.hasClass(results[0].element, 'baz')).toBeTruthy();
-    });
-
-    it('should read attribute values', () => {
-      var element = el('<input some-decor-props some-attr="someValue">');
-      var results = process(element);
-      expect(results[0].readAttributes.get('some-attr')).toEqual('someValue');
-    });
-
-    it('should bind directive events', () => {
-      var results = process(el('<div some-decor-events></div>'));
-      var directiveBinding = results[0].directives[0];
-      expect(directiveBinding.eventBindings.length).toEqual(1);
-      var eventBinding = directiveBinding.eventBindings[0];
-      expect(eventBinding.fullName).toEqual('click');
-      expect(eventBinding.source.source).toEqual('doIt()');
-    });
-
-    it('should bind directive global events', () => {
-      var results = process(el('<div some-decor-globalevents></div>'));
-      var directiveBinding = results[0].directives[0];
-      expect(directiveBinding.eventBindings.length).toEqual(1);
-      var eventBinding = directiveBinding.eventBindings[0];
-      expect(eventBinding.fullName).toEqual('window:resize');
-      expect(eventBinding.source.source).toEqual('doItGlobal()');
-    });
-
-    // TODO: assertions should be enabled when running tests:
-    // https://github.com/angular/angular/issues/1340
-    describe('component directives', () => {
-      it('should save the component id', () => {
-        var results = process(el('<some-comp></some-comp>'));
-        expect(results[0].componentId).toEqual('someComponent');
-      });
-
-      it('should throw when the provided selector is not an element selector', () => {
-        expect(() => { createPipeline(null, [componentWithNonElementSelector]); })
-            .toThrowError(
-                `Component 'componentWithNonElementSelector' can only have an element selector, but had '[attr]'`);
-      });
-
-      it('should not allow multiple component directives on the same element', () => {
-        expect(() => {
-          process(el('<some-comp></some-comp>'), null, [someComponent, someComponentDup]);
-        }).toThrowError(new RegExp('Only one component directive is allowed per element'));
-      });
-
-      it('should sort the directives and store the component as the first directive', () => {
-        var results = process(el('<some-comp some-decor></some-comp>'));
-        expect(annotatedDirectives[results[0].directives[0].directiveIndex].id)
-            .toEqual('someComponent');
-        expect(annotatedDirectives[results[0].directives[1].directiveIndex].id)
-            .toEqual('someDirective');
-      });
-    });
-  });
-}
-
-class MockStep implements CompileStep {
-  processClosure: Function;
-  constructor(process) { this.processClosure = process; }
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    this.processClosure(parent, current, control);
-  }
-}
-
-var someComponent = DirectiveMetadata.create(
-    {selector: 'some-comp', id: 'someComponent', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var someComponentDup = DirectiveMetadata.create(
-    {selector: 'some-comp', id: 'someComponentDup', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var someComponent2 = DirectiveMetadata.create(
-    {selector: 'some-comp2', id: 'someComponent2', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var someDirective = DirectiveMetadata.create(
-    {selector: '[some-decor]', id: 'someDirective', type: DirectiveMetadata.DIRECTIVE_TYPE});
-
-var someDirectiveIgnoringChildren = DirectiveMetadata.create({
-  selector: '[some-decor-ignoring-children]',
-  compileChildren: false,
-  type: DirectiveMetadata.DIRECTIVE_TYPE
-
-});
-
-var decoratorWithMultipleAttrs = DirectiveMetadata.create({
-  selector: 'input[type=text][control]',
-  id: 'decoratorWithMultipleAttrs',
-  type: DirectiveMetadata.DIRECTIVE_TYPE
-});
-
-var someDirectiveWithProps = DirectiveMetadata.create({
-  selector: '[some-decor-props]',
-  properties: ['dirProp: elProp'],
-  readAttributes: ['some-attr']
-});
-
-var someDirectiveWithHostProperties = DirectiveMetadata.create({
-  selector: '[some-decor-with-host-props]',
-  host: MapWrapper.createFromStringMap({'[hostProp]': 'dirProp'})
-});
-
-var someDirectiveWithInvalidHostProperties = DirectiveMetadata.create({
-  selector: '[some-decor-with-invalid-host-props]',
-  host: MapWrapper.createFromStringMap({'[hostProp]': 'dirProp + dirProp2'})
-});
-
-var someDirectiveWithHostAttributes = DirectiveMetadata.create({
-  selector: '[some-decor-with-host-attrs]',
-  host: MapWrapper.createFromStringMap({'attr_name': 'attr_val', 'class': 'foo bar'})
-});
-
-var someDirectiveWithEvents = DirectiveMetadata.create(
-    {selector: '[some-decor-events]', host: MapWrapper.createFromStringMap({'(click)': 'doIt()'})});
-
-var someDirectiveWithGlobalEvents = DirectiveMetadata.create({
-  selector: '[some-decor-globalevents]',
-  host: MapWrapper.createFromStringMap({'(window:resize)': 'doItGlobal()'})
-});
-
-var componentWithNonElementSelector = DirectiveMetadata.create({
-  id: 'componentWithNonElementSelector',
-  selector: '[attr]',
-  type: DirectiveMetadata.COMPONENT_TYPE
-});
diff --git a/modules/angular2/test/render/dom/compiler/pipeline_spec.ts b/modules/angular2/test/render/dom/compiler/pipeline_spec.ts
deleted file mode 100644
index fa2197f4be3a..000000000000
--- a/modules/angular2/test/render/dom/compiler/pipeline_spec.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-import {describe, beforeEach, it, expect, iit, ddescribe, el} from 'angular2/test_lib';
-import {ListWrapper, List, MapWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {isPresent, NumberWrapper, StringWrapper, IMPLEMENTS} from 'angular2/src/facade/lang';
-
-import {CompilePipeline} from 'angular2/src/render/dom/compiler/compile_pipeline';
-import {CompileElement} from 'angular2/src/render/dom/compiler/compile_element';
-import {CompileStep} from 'angular2/src/render/dom/compiler/compile_step';
-import {CompileControl} from 'angular2/src/render/dom/compiler/compile_control';
-
-import {ProtoViewBuilder} from 'angular2/src/render/dom/view/proto_view_builder';
-import {ProtoViewDto, ViewType} from 'angular2/src/render/api';
-
-export function main() {
-  describe('compile_pipeline', () => {
-    describe('children compilation', () => {
-      it('should walk the tree in depth first order including template contents', () => {
-        var element = el('<div id="1"><template id="2"><span id="3"></span></template></div>');
-
-        var step0Log = [];
-        var results = new CompilePipeline([createLoggerStep(step0Log)]).process(element);
-
-        expect(step0Log).toEqual(['1', '1<2', '2<3']);
-        expect(resultIdLog(results)).toEqual(['1', '2', '3']);
-      });
-
-      it('should stop walking the tree when compileChildren is false', () => {
-        var element = el(
-            '<div id="1"><template id="2" ignore-children><span id="3"></span></template></div>');
-
-        var step0Log = [];
-        var pipeline = new CompilePipeline([new IgnoreChildrenStep(), createLoggerStep(step0Log)]);
-        var results = pipeline.process(element);
-
-        expect(step0Log).toEqual(['1', '1<2']);
-        expect(resultIdLog(results)).toEqual(['1', '2']);
-      });
-    });
-
-    it('should inherit protoViewBuilders to children', () => {
-      var element = el('<div><div><span viewroot><span></span></span></div></div>');
-      var pipeline = new CompilePipeline([
-        new MockStep((parent, current, control) => {
-          if (isPresent(DOM.getAttribute(current.element, 'viewroot'))) {
-            current.inheritedProtoView = new ProtoViewBuilder(current.element, ViewType.EMBEDDED);
-          }
-        })
-      ]);
-      var results = pipeline.process(element);
-      expect(results[0].inheritedProtoView).toBe(results[1].inheritedProtoView);
-      expect(results[2].inheritedProtoView).toBe(results[3].inheritedProtoView);
-    });
-
-    it('should inherit elementBinderBuilders to children', () => {
-      var element = el('<div bind><div><span bind><span></span></span></div></div>');
-      var pipeline = new CompilePipeline([
-        new MockStep((parent, current, control) => {
-          if (isPresent(DOM.getAttribute(current.element, 'bind'))) {
-            current.bindElement();
-          }
-        })
-      ]);
-      var results = pipeline.process(element);
-      expect(results[0].inheritedElementBinder).toBe(results[1].inheritedElementBinder);
-      expect(results[2].inheritedElementBinder).toBe(results[3].inheritedElementBinder);
-    });
-
-    it('should mark root elements as viewRoot', () => {
-      var rootElement = el('<div></div>');
-      var results = new CompilePipeline([]).process(rootElement);
-      expect(results[0].isViewRoot).toBe(true);
-    });
-
-    it('should calculate distanceToParent / parent correctly', () => {
-      var element = el('<div bind><div bind></div><div><div bind></div></div></div>');
-      var pipeline = new CompilePipeline([
-        new MockStep((parent, current, control) => {
-          if (isPresent(DOM.getAttribute(current.element, 'bind'))) {
-            current.bindElement();
-          }
-        })
-      ]);
-      var results = pipeline.process(element);
-      expect(results[0].inheritedElementBinder.distanceToParent).toBe(0);
-      expect(results[1].inheritedElementBinder.distanceToParent).toBe(1);
-      expect(results[3].inheritedElementBinder.distanceToParent).toBe(2);
-      expect(results[1].inheritedElementBinder.parent).toBe(results[0].inheritedElementBinder);
-      expect(results[3].inheritedElementBinder.parent).toBe(results[0].inheritedElementBinder);
-    });
-
-    it('should not execute further steps when ignoreCurrentElement has been called', () => {
-      var element = el('<div id="1"><span id="2" ignore-current></span><span id="3"></span></div>');
-      var logs = [];
-      var pipeline = new CompilePipeline([
-        new IgnoreCurrentElementStep(),
-        createLoggerStep(logs),
-      ]);
-      var results = pipeline.process(element);
-
-      expect(results.length).toBe(2);
-      expect(logs).toEqual(['1', '1<3'])
-    });
-
-    describe('control.addParent', () => {
-      it('should report the new parent to the following processor and the result', () => {
-        var element = el('<div id="1"><span wrap0="1" id="2"><b id="3"></b></span></div>');
-        var step0Log = [];
-        var step1Log = [];
-        var pipeline =
-            new CompilePipeline([createWrapperStep('wrap0', step0Log), createLoggerStep(step1Log)]);
-        var result = pipeline.process(element);
-        expect(step0Log).toEqual(['1', '1<2', '2<3']);
-        expect(step1Log).toEqual(['1', '1<wrap0#0', 'wrap0#0<2', '2<3']);
-        expect(resultIdLog(result)).toEqual(['1', 'wrap0#0', '2', '3']);
-      });
-
-      it('should allow to add a parent by multiple processors to the same element', () => {
-        var element =
-            el('<div id="1"><span wrap0="1" wrap1="1" id="2"><b id="3"></b></span></div>');
-        var step0Log = [];
-        var step1Log = [];
-        var step2Log = [];
-        var pipeline = new CompilePipeline([
-          createWrapperStep('wrap0', step0Log),
-          createWrapperStep('wrap1', step1Log),
-          createLoggerStep(step2Log)
-        ]);
-        var result = pipeline.process(element);
-        expect(step0Log).toEqual(['1', '1<2', '2<3']);
-        expect(step1Log).toEqual(['1', '1<wrap0#0', 'wrap0#0<2', '2<3']);
-        expect(step2Log).toEqual(['1', '1<wrap0#0', 'wrap0#0<wrap1#0', 'wrap1#0<2', '2<3']);
-        expect(resultIdLog(result)).toEqual(['1', 'wrap0#0', 'wrap1#0', '2', '3']);
-      });
-
-      it('should allow to add a parent by multiple processors to different elements', () => {
-        var element =
-            el('<div id="1"><span wrap0="1" id="2"><b id="3" wrap1="1"></b></span></div>');
-        var step0Log = [];
-        var step1Log = [];
-        var step2Log = [];
-        var pipeline = new CompilePipeline([
-          createWrapperStep('wrap0', step0Log),
-          createWrapperStep('wrap1', step1Log),
-          createLoggerStep(step2Log)
-        ]);
-        var result = pipeline.process(element);
-        expect(step0Log).toEqual(['1', '1<2', '2<3']);
-        expect(step1Log).toEqual(['1', '1<wrap0#0', 'wrap0#0<2', '2<3']);
-        expect(step2Log).toEqual(['1', '1<wrap0#0', 'wrap0#0<2', '2<wrap1#0', 'wrap1#0<3']);
-        expect(resultIdLog(result)).toEqual(['1', 'wrap0#0', '2', 'wrap1#0', '3']);
-      });
-
-      it('should allow to add multiple parents by the same processor', () => {
-        var element = el('<div id="1"><span wrap0="2" id="2"><b id="3"></b></span></div>');
-        var step0Log = [];
-        var step1Log = [];
-        var pipeline =
-            new CompilePipeline([createWrapperStep('wrap0', step0Log), createLoggerStep(step1Log)]);
-        var result = pipeline.process(element);
-        expect(step0Log).toEqual(['1', '1<2', '2<3']);
-        expect(step1Log).toEqual(['1', '1<wrap0#0', 'wrap0#0<wrap0#1', 'wrap0#1<2', '2<3']);
-        expect(resultIdLog(result)).toEqual(['1', 'wrap0#0', 'wrap0#1', '2', '3']);
-      });
-
-    });
-
-    describe('control.addChild', () => {
-      it('should report the new child to all processors and the result', () => {
-        var element = el('<div id="1"><div id="2"></div></div>');
-        var resultLog = [];
-        var newChild = new CompileElement(el('<div id="3"></div>'));
-        var pipeline = new CompilePipeline([
-          new MockStep((parent, current, control) => {
-            if (StringWrapper.equals(DOM.getAttribute(current.element, 'id'), '1')) {
-              control.addChild(newChild);
-            }
-          }),
-          createLoggerStep(resultLog)
-        ]);
-        var result = pipeline.process(element);
-        expect(result[2]).toBe(newChild);
-        expect(resultLog).toEqual(['1', '1<2', '1<3']);
-        expect(resultIdLog(result)).toEqual(['1', '2', '3']);
-      });
-    });
-
-  });
-}
-
-class MockStep implements CompileStep {
-  processClosure: Function;
-  constructor(process) { this.processClosure = process; }
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    this.processClosure(parent, current, control);
-  }
-}
-
-export class IgnoreChildrenStep implements CompileStep {
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    var attributeMap = DOM.attributeMap(current.element);
-    if (attributeMap.has('ignore-children')) {
-      current.compileChildren = false;
-    }
-  }
-}
-
-class IgnoreCurrentElementStep implements CompileStep {
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    var attributeMap = DOM.attributeMap(current.element);
-    if (attributeMap.has('ignore-current')) {
-      control.ignoreCurrentElement();
-    }
-  }
-}
-
-function logEntry(log: string[], parent, current) {
-  var parentId = '';
-  if (isPresent(parent)) {
-    parentId = DOM.getAttribute(parent.element, 'id') + '<';
-  }
-  log.push(parentId + DOM.getAttribute(current.element, 'id'));
-}
-
-function createLoggerStep(log: string[]) {
-  return new MockStep((parent, current, control) => { logEntry(log, parent, current); });
-}
-
-function createWrapperStep(wrapperId, log) {
-  var nextElementId = 0;
-  return new MockStep((parent, current, control) => {
-    var parentCountStr = DOM.getAttribute(current.element, wrapperId);
-    if (isPresent(parentCountStr)) {
-      var parentCount = NumberWrapper.parseInt(parentCountStr, 10);
-      while (parentCount > 0) {
-        control.addParent(new CompileElement(el(`<a id="${wrapperId}#${nextElementId++}"></a>`)));
-        parentCount--;
-      }
-    }
-    logEntry(log, parent, current);
-  });
-}
-
-function resultIdLog(result) {
-  var idLog = [];
-  ListWrapper.forEach(result, (current) => { logEntry(idLog, null, current); });
-  return idLog;
-}
diff --git a/modules/angular2/test/render/dom/compiler/property_binding_parser_spec.ts b/modules/angular2/test/render/dom/compiler/property_binding_parser_spec.ts
deleted file mode 100644
index 2e49fbd80574..000000000000
--- a/modules/angular2/test/render/dom/compiler/property_binding_parser_spec.ts
+++ /dev/null
@@ -1,220 +0,0 @@
-import {describe, beforeEach, it, expect, iit, ddescribe, el} from 'angular2/test_lib';
-import {IMPLEMENTS} from 'angular2/src/facade/lang';
-import {PropertyBindingParser} from 'angular2/src/render/dom/compiler/property_binding_parser';
-import {CompilePipeline} from 'angular2/src/render/dom/compiler/compile_pipeline';
-import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {CompileElement} from 'angular2/src/render/dom/compiler/compile_element';
-import {CompileStep} from 'angular2/src/render/dom/compiler/compile_step';
-import {CompileControl} from 'angular2/src/render/dom/compiler/compile_control';
-import {Lexer, Parser} from 'angular2/change_detection';
-import {ElementBinderBuilder} from 'angular2/src/render/dom/view/proto_view_builder';
-
-var EMPTY_MAP = new Map();
-
-export function main() {
-  describe('PropertyBindingParser', () => {
-    function createPipeline(hasNestedProtoView = false) {
-      return new CompilePipeline([
-        new MockStep((parent, current, control) => {
-          if (hasNestedProtoView) {
-            current.bindElement().bindNestedProtoView(el('<template></template>'));
-          }
-        }),
-        new PropertyBindingParser(new Parser(new Lexer()))
-      ]);
-    }
-
-    function process(element, hasNestedProtoView = false): List<ElementBinderBuilder> {
-      return ListWrapper.map(createPipeline(hasNestedProtoView).process(element),
-                             (compileElement) => compileElement.inheritedElementBinder);
-    }
-
-    it('should detect [] syntax', () => {
-      var results = process(el('<div [a]="b"></div>'));
-      expect(results[0].propertyBindings.get('a').source).toEqual('b');
-    });
-
-    it('should detect [] syntax with data- prefix', () => {
-      var results = process(el('<div data-[a]="b"></div>'));
-      expect(results[0].propertyBindings.get('a').source).toEqual('b');
-    });
-
-    it('should detect [] syntax only if an attribute name starts and ends with []', () => {
-      expect(process(el('<div z[a]="b"></div>'))[0]).toBe(null);
-      expect(process(el('<div [a]v="b"></div>'))[0]).toBe(null);
-    });
-
-    it('should detect bind- syntax', () => {
-      var results = process(el('<div bind-a="b"></div>'));
-      expect(results[0].propertyBindings.get('a').source).toEqual('b');
-    });
-
-    it('should detect bind- syntax with data- prefix', () => {
-      var results = process(el('<div data-bind-a="b"></div>'));
-      expect(results[0].propertyBindings.get('a').source).toEqual('b');
-    });
-
-    it('should detect bind- syntax only if an attribute name starts with bind',
-       () => { expect(process(el('<div _bind-a="b"></div>'))[0]).toEqual(null); });
-
-    it('should detect interpolation syntax', () => {
-      var results = process(el('<div a="{{b}}"></div>'));
-      expect(results[0].propertyBindings.get('a').source).toEqual('{{b}}');
-    });
-
-    it('should detect interpolation syntax with data- prefix', () => {
-      var results = process(el('<div data-a="{{b}}"></div>'));
-      expect(results[0].propertyBindings.get('a').source).toEqual('{{b}}');
-    });
-
-    it('should store property setters as camel case', () => {
-      var element = el('<div bind-some-prop="1">');
-      var results = process(element);
-      expect(results[0].propertyBindings.get('someProp')).toBeTruthy();
-    });
-
-    it('should detect var- syntax', () => {
-      var results = process(el('<template var-a="b"></template>'));
-      expect(results[0].variableBindings.get('b')).toEqual('a');
-    });
-
-    it('should detect var- syntax with data- prefix', () => {
-      var results = process(el('<template data-var-a="b"></template>'));
-      expect(results[0].variableBindings.get('b')).toEqual('a');
-    });
-
-    it('should store variable binding for a template element on the nestedProtoView', () => {
-      var results = process(el('<template var-george="washington"></p>'), true);
-      expect(results[0].variableBindings).toEqual(EMPTY_MAP);
-      expect(results[0].nestedProtoView.variableBindings.get('washington')).toEqual('george');
-    });
-
-    it('should store variable binding for a non-template element using shorthand syntax on the nestedProtoView',
-       () => {
-         var results = process(el('<template #george="washington"></template>'), true);
-         expect(results[0].variableBindings).toEqual(EMPTY_MAP);
-         expect(results[0].nestedProtoView.variableBindings.get('washington')).toEqual('george');
-       });
-
-    it('should store variable binding for a non-template element', () => {
-      var results = process(el('<p var-george="washington"></p>'));
-      expect(results[0].variableBindings.get('washington')).toEqual('george');
-    });
-
-    it('should store variable binding for a non-template element using shorthand syntax', () => {
-      var results = process(el('<p #george="washington"></p>'));
-      expect(results[0].variableBindings.get('washington')).toEqual('george');
-    });
-
-    it('should store a variable binding with an implicit value', () => {
-      var results = process(el('<p var-george></p>'));
-      expect(results[0].variableBindings.get('\$implicit')).toEqual('george');
-    });
-
-    it('should store a variable binding with an implicit value using shorthand syntax', () => {
-      var results = process(el('<p #george></p>'));
-      expect(results[0].variableBindings.get('\$implicit')).toEqual('george');
-    });
-
-    it('should detect variable bindings only if an attribute name starts with #', () => {
-      var results = process(el('<p b#george></p>'));
-      expect(results[0]).toEqual(null);
-    });
-
-    it('should detect () syntax', () => {
-      var results = process(el('<div (click)="b()"></div>'));
-      var eventBinding = results[0].eventBindings[0];
-      expect(eventBinding.source.source).toEqual('b()');
-      expect(eventBinding.fullName).toEqual('click');
-      // "(click[])" is not an expected syntax and is only used to validate the regexp
-      results = process(el('<div (click[])="b()"></div>'));
-      eventBinding = results[0].eventBindings[0];
-      expect(eventBinding.source.source).toEqual('b()');
-      expect(eventBinding.fullName).toEqual('click[]');
-    });
-
-    it('should detect () syntax with data- prefix', () => {
-      var results = process(el('<div data-(click)="b()"></div>'));
-      var eventBinding = results[0].eventBindings[0];
-      expect(eventBinding.source.source).toEqual('b()');
-      expect(eventBinding.fullName).toEqual('click');
-    });
-
-    it('should detect () syntax only if an attribute name starts and ends with ()', () => {
-      expect(process(el('<div z(a)="b()"></div>'))[0]).toEqual(null);
-      expect(process(el('<div (a)v="b()"></div>'))[0]).toEqual(null);
-    });
-
-    it('should parse event handlers using () syntax as actions', () => {
-      var results = process(el('<div (click)="foo=bar"></div>'));
-      var eventBinding = results[0].eventBindings[0];
-      expect(eventBinding.source.source).toEqual('foo=bar');
-      expect(eventBinding.fullName).toEqual('click');
-    });
-
-    it('should detect on- syntax', () => {
-      var results = process(el('<div on-click="b()"></div>'));
-      var eventBinding = results[0].eventBindings[0];
-      expect(eventBinding.source.source).toEqual('b()');
-      expect(eventBinding.fullName).toEqual('click');
-    });
-
-    it('should detect on- syntax with data- prefix', () => {
-      var results = process(el('<div data-on-click="b()"></div>'));
-      var eventBinding = results[0].eventBindings[0];
-      expect(eventBinding.source.source).toEqual('b()');
-      expect(eventBinding.fullName).toEqual('click');
-    });
-
-    it('should parse event handlers using on- syntax as actions', () => {
-      var results = process(el('<div on-click="foo=bar"></div>'));
-      var eventBinding = results[0].eventBindings[0];
-      expect(eventBinding.source.source).toEqual('foo=bar');
-      expect(eventBinding.fullName).toEqual('click');
-    });
-
-    it('should store bound properties as temporal attributes', () => {
-      var results = createPipeline().process(el('<div bind-a="b" [c]="d"></div>'));
-      expect(results[0].attrs().get('a')).toEqual('b');
-      expect(results[0].attrs().get('c')).toEqual('d');
-    });
-
-    it('should store variables as temporal attributes', () => {
-      var results = createPipeline().process(el('<div var-a="b" #c="d"></div>'));
-      expect(results[0].attrs().get('a')).toEqual('b');
-      expect(results[0].attrs().get('c')).toEqual('d');
-    });
-
-    it('should detect [()] syntax', () => {
-      var results = process(el('<div [(a)]="b"></div>'));
-      expect(results[0].propertyBindings.get('a').source).toEqual('b');
-      expect(results[0].eventBindings[0].source.source).toEqual('b=$event');
-    });
-
-    it('should detect [()] syntax with data- prefix', () => {
-      var results = process(el('<div data-[(a)]="b"></div>'));
-      expect(results[0].propertyBindings.get('a').source).toEqual('b');
-      expect(results[0].eventBindings[0].source.source).toEqual('b=$event');
-    });
-
-    it('should detect bindon- syntax', () => {
-      var results = process(el('<div bindon-a="b"></div>'));
-      expect(results[0].propertyBindings.get('a').source).toEqual('b');
-      expect(results[0].eventBindings[0].source.source).toEqual('b=$event');
-    });
-
-    it('should detect bindon- syntax with data- prefix', () => {
-      var results = process(el('<div data-bindon-a="b"></div>'));
-      expect(results[0].propertyBindings.get('a').source).toEqual('b');
-      expect(results[0].eventBindings[0].source.source).toEqual('b=$event');
-    });
-  });
-}
-
-class MockStep implements CompileStep {
-  processClosure: Function;
-  constructor(process) { this.processClosure = process; }
-  process(parent: CompileElement, current: CompileElement, control: CompileControl) {
-    this.processClosure(parent, current, control);
-  }
-}
diff --git a/modules/angular2/test/render/dom/compiler/selector_spec.ts b/modules/angular2/test/render/dom/compiler/selector_spec.ts
deleted file mode 100644
index bbe15d29d2b4..000000000000
--- a/modules/angular2/test/render/dom/compiler/selector_spec.ts
+++ /dev/null
@@ -1,338 +0,0 @@
-import {describe, it, expect, beforeEach, ddescribe, iit, xit, el} from 'angular2/test_lib';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {SelectorMatcher} from 'angular2/src/render/dom/compiler/selector';
-import {CssSelector} from 'angular2/src/render/dom/compiler/selector';
-import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-
-export function main() {
-  describe('SelectorMatcher', () => {
-    var matcher, selectableCollector, s1, s2, s3, s4;
-    var matched: any[];
-
-    function reset() { matched = []; }
-
-    beforeEach(() => {
-      reset();
-      s1 = s2 = s3 = s4 = null;
-      selectableCollector = (selector, context) => {
-        matched.push(selector);
-        matched.push(context);
-      };
-      matcher = new SelectorMatcher();
-    });
-
-    it('should select by element name case insensitive', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('someTag'), 1);
-
-      expect(matcher.match(CssSelector.parse('SOMEOTHERTAG')[0], selectableCollector))
-          .toEqual(false);
-      expect(matched).toEqual([]);
-
-      expect(matcher.match(CssSelector.parse('SOMETAG')[0], selectableCollector)).toEqual(true);
-      expect(matched).toEqual([s1[0], 1]);
-    });
-
-    it('should select by class name case insensitive', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('.someClass'), 1);
-      matcher.addSelectables(s2 = CssSelector.parse('.someClass.class2'), 2);
-
-      expect(matcher.match(CssSelector.parse('.SOMEOTHERCLASS')[0], selectableCollector))
-          .toEqual(false);
-      expect(matched).toEqual([]);
-
-      expect(matcher.match(CssSelector.parse('.SOMECLASS')[0], selectableCollector)).toEqual(true);
-      expect(matched).toEqual([s1[0], 1]);
-
-      reset();
-      expect(matcher.match(CssSelector.parse('.someClass.class2')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
-    });
-
-    it('should select by attr name case insensitive independent of the value', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('[someAttr]'), 1);
-      matcher.addSelectables(s2 = CssSelector.parse('[someAttr][someAttr2]'), 2);
-
-      expect(matcher.match(CssSelector.parse('[SOMEOTHERATTR]')[0], selectableCollector))
-          .toEqual(false);
-      expect(matched).toEqual([]);
-
-      expect(matcher.match(CssSelector.parse('[SOMEATTR]')[0], selectableCollector)).toEqual(true);
-      expect(matched).toEqual([s1[0], 1]);
-
-      reset();
-      expect(matcher.match(CssSelector.parse('[SOMEATTR=someValue]')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1]);
-
-      reset();
-      expect(matcher.match(CssSelector.parse('[someAttr][someAttr2]')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
-
-      reset();
-      expect(matcher.match(CssSelector.parse('[someAttr=someValue][someAttr2]')[0],
-                           selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
-
-      reset();
-      expect(matcher.match(CssSelector.parse('[someAttr2][someAttr=someValue]')[0],
-                           selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
-
-      reset();
-      expect(matcher.match(CssSelector.parse('[someAttr2=someValue][someAttr]')[0],
-                           selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
-    });
-
-    it('should select by attr name only once if the value is from the DOM', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('[some-decor]'), 1);
-
-      var elementSelector = new CssSelector();
-      var element = el('<div attr></div>');
-      var empty = DOM.getAttribute(element, 'attr');
-      elementSelector.addAttribute('some-decor', empty);
-      matcher.match(elementSelector, selectableCollector);
-      expect(matched).toEqual([s1[0], 1]);
-    });
-
-    it('should select by attr name and value case insensitive', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('[someAttr=someValue]'), 1);
-
-      expect(matcher.match(CssSelector.parse('[SOMEATTR=SOMEOTHERATTR]')[0], selectableCollector))
-          .toEqual(false);
-      expect(matched).toEqual([]);
-
-      expect(matcher.match(CssSelector.parse('[SOMEATTR=SOMEVALUE]')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1]);
-    });
-
-    it('should select by element name, class name and attribute name with value', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('someTag.someClass[someAttr=someValue]'), 1);
-
-      expect(matcher.match(CssSelector.parse('someOtherTag.someOtherClass[someOtherAttr]')[0],
-                           selectableCollector))
-          .toEqual(false);
-      expect(matched).toEqual([]);
-
-      expect(matcher.match(CssSelector.parse('someTag.someOtherClass[someOtherAttr]')[0],
-                           selectableCollector))
-          .toEqual(false);
-      expect(matched).toEqual([]);
-
-      expect(matcher.match(CssSelector.parse('someTag.someClass[someOtherAttr]')[0],
-                           selectableCollector))
-          .toEqual(false);
-      expect(matched).toEqual([]);
-
-      expect(
-          matcher.match(CssSelector.parse('someTag.someClass[someAttr]')[0], selectableCollector))
-          .toEqual(false);
-      expect(matched).toEqual([]);
-
-      expect(matcher.match(CssSelector.parse('someTag.someClass[someAttr=someValue]')[0],
-                           selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1]);
-    });
-
-    it('should select by many attributes and independent of the value', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('input[type=text][control]'), 1);
-
-      var cssSelector = new CssSelector();
-      cssSelector.setElement('input');
-      cssSelector.addAttribute('type', 'text');
-      cssSelector.addAttribute('control', 'one');
-
-      expect(matcher.match(cssSelector, selectableCollector)).toEqual(true);
-      expect(matched).toEqual([s1[0], 1]);
-    });
-
-    it('should select independent of the order in the css selector', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('[someAttr].someClass'), 1);
-      matcher.addSelectables(s2 = CssSelector.parse('.someClass[someAttr]'), 2);
-      matcher.addSelectables(s3 = CssSelector.parse('.class1.class2'), 3);
-      matcher.addSelectables(s4 = CssSelector.parse('.class2.class1'), 4);
-
-      expect(matcher.match(CssSelector.parse('[someAttr].someClass')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
-
-      reset();
-      expect(matcher.match(CssSelector.parse('.someClass[someAttr]')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
-
-      reset();
-      expect(matcher.match(CssSelector.parse('.class1.class2')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s3[0], 3, s4[0], 4]);
-
-      reset();
-      expect(matcher.match(CssSelector.parse('.class2.class1')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s4[0], 4, s3[0], 3]);
-    });
-
-    it('should not select with a matching :not selector', () => {
-      matcher.addSelectables(CssSelector.parse('p:not(.someClass)'), 1);
-      matcher.addSelectables(CssSelector.parse('p:not([someAttr])'), 2);
-      matcher.addSelectables(CssSelector.parse(':not(.someClass)'), 3);
-      matcher.addSelectables(CssSelector.parse(':not(p)'), 4);
-      matcher.addSelectables(CssSelector.parse(':not(p[someAttr])'), 5);
-
-      expect(matcher.match(CssSelector.parse('p.someClass[someAttr]')[0], selectableCollector))
-          .toEqual(false);
-      expect(matched).toEqual([]);
-    });
-
-    it('should select with a non matching :not selector', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('p:not(.someClass)'), 1);
-      matcher.addSelectables(s2 = CssSelector.parse('p:not(.someOtherClass[someAttr])'), 2);
-      matcher.addSelectables(s3 = CssSelector.parse(':not(.someClass)'), 3);
-      matcher.addSelectables(s4 = CssSelector.parse(':not(.someOtherClass[someAttr])'), 4);
-
-      expect(matcher.match(CssSelector.parse('p[someOtherAttr].someOtherClass')[0],
-                           selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1, s2[0], 2, s3[0], 3, s4[0], 4]);
-    });
-
-    it('should match with multiple :not selectors', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('div:not([a]):not([b])'), 1);
-      expect(matcher.match(CssSelector.parse('div[a]')[0], selectableCollector)).toBe(false);
-      expect(matcher.match(CssSelector.parse('div[b]')[0], selectableCollector)).toBe(false);
-      expect(matcher.match(CssSelector.parse('div[c]')[0], selectableCollector)).toBe(true);
-    });
-
-    it('should select with one match in a list', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('input[type=text], textbox'), 1);
-
-      expect(matcher.match(CssSelector.parse('textbox')[0], selectableCollector)).toEqual(true);
-      expect(matched).toEqual([s1[1], 1]);
-
-      reset();
-      expect(matcher.match(CssSelector.parse('input[type=text]')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1]);
-    });
-
-    it('should not select twice with two matches in a list', () => {
-      matcher.addSelectables(s1 = CssSelector.parse('input, .someClass'), 1);
-
-      expect(matcher.match(CssSelector.parse('input.someclass')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched.length).toEqual(2);
-      expect(matched).toEqual([s1[0], 1]);
-    });
-  });
-
-  describe('CssSelector.parse', () => {
-    it('should detect element names', () => {
-      var cssSelector = CssSelector.parse('sometag')[0];
-      expect(cssSelector.element).toEqual('sometag');
-      expect(cssSelector.toString()).toEqual('sometag');
-    });
-
-    it('should detect class names', () => {
-      var cssSelector = CssSelector.parse('.someClass')[0];
-      expect(cssSelector.classNames).toEqual(['someclass']);
-
-      expect(cssSelector.toString()).toEqual('.someclass');
-    });
-
-    it('should detect attr names', () => {
-      var cssSelector = CssSelector.parse('[attrname]')[0];
-      expect(cssSelector.attrs).toEqual(['attrname', '']);
-
-      expect(cssSelector.toString()).toEqual('[attrname]');
-    });
-
-    it('should detect attr values', () => {
-      var cssSelector = CssSelector.parse('[attrname=attrvalue]')[0];
-      expect(cssSelector.attrs).toEqual(['attrname', 'attrvalue']);
-      expect(cssSelector.toString()).toEqual('[attrname=attrvalue]');
-    });
-
-    it('should detect multiple parts', () => {
-      var cssSelector = CssSelector.parse('sometag[attrname=attrvalue].someclass')[0];
-      expect(cssSelector.element).toEqual('sometag');
-      expect(cssSelector.attrs).toEqual(['attrname', 'attrvalue']);
-      expect(cssSelector.classNames).toEqual(['someclass']);
-
-      expect(cssSelector.toString()).toEqual('sometag.someclass[attrname=attrvalue]');
-    });
-
-    it('should detect multiple attributes', () => {
-      var cssSelector = CssSelector.parse('input[type=text][control]')[0];
-      expect(cssSelector.element).toEqual('input');
-      expect(cssSelector.attrs).toEqual(['type', 'text', 'control', '']);
-
-      expect(cssSelector.toString()).toEqual('input[type=text][control]');
-    });
-
-    it('should detect :not', () => {
-      var cssSelector = CssSelector.parse('sometag:not([attrname=attrvalue].someclass)')[0];
-      expect(cssSelector.element).toEqual('sometag');
-      expect(cssSelector.attrs.length).toEqual(0);
-      expect(cssSelector.classNames.length).toEqual(0);
-
-      var notSelector = cssSelector.notSelectors[0];
-      expect(notSelector.element).toEqual(null);
-      expect(notSelector.attrs).toEqual(['attrname', 'attrvalue']);
-      expect(notSelector.classNames).toEqual(['someclass']);
-
-      expect(cssSelector.toString()).toEqual('sometag:not(.someclass[attrname=attrvalue])');
-    });
-
-    it('should detect :not without truthy', () => {
-      var cssSelector = CssSelector.parse(':not([attrname=attrvalue].someclass)')[0];
-      expect(cssSelector.element).toEqual("*");
-
-      var notSelector = cssSelector.notSelectors[0];
-      expect(notSelector.attrs).toEqual(['attrname', 'attrvalue']);
-      expect(notSelector.classNames).toEqual(['someclass']);
-
-      expect(cssSelector.toString()).toEqual('*:not(.someclass[attrname=attrvalue])');
-    });
-
-    it('should throw when nested :not', () => {
-      expect(() => { CssSelector.parse('sometag:not(:not([attrname=attrvalue].someclass))')[0]; })
-          .toThrowError('Nesting :not is not allowed in a selector');
-    });
-
-    it('should throw when multiple selectors in :not', () => {
-      expect(() => { CssSelector.parse('sometag:not(a,b)'); })
-          .toThrowError('Multiple selectors in :not are not supported');
-    });
-
-    it('should detect lists of selectors', () => {
-      var cssSelectors = CssSelector.parse('.someclass,[attrname=attrvalue], sometag');
-      expect(cssSelectors.length).toEqual(3);
-
-      expect(cssSelectors[0].classNames).toEqual(['someclass']);
-      expect(cssSelectors[1].attrs).toEqual(['attrname', 'attrvalue']);
-      expect(cssSelectors[2].element).toEqual('sometag');
-    });
-
-    it('should detect lists of selectors with :not', () => {
-      var cssSelectors =
-          CssSelector.parse('input[type=text], :not(textarea), textbox:not(.special)');
-      expect(cssSelectors.length).toEqual(3);
-
-      expect(cssSelectors[0].element).toEqual('input');
-      expect(cssSelectors[0].attrs).toEqual(['type', 'text']);
-
-      expect(cssSelectors[1].element).toEqual('*');
-      expect(cssSelectors[1].notSelectors[0].element).toEqual('textarea');
-
-      expect(cssSelectors[2].element).toEqual('textbox');
-      expect(cssSelectors[2].notSelectors[0].classNames).toEqual(['special']);
-    });
-  });
-}
diff --git a/modules/angular2/test/render/dom/compiler/style_inliner_spec.ts b/modules/angular2/test/render/dom/compiler/style_inliner_spec.ts
deleted file mode 100644
index 0f8b81eac0a2..000000000000
--- a/modules/angular2/test/render/dom/compiler/style_inliner_spec.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  beforeEachBindings,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-import {StyleInliner} from 'angular2/src/render/dom/compiler/style_inliner';
-
-import {isBlank} from 'angular2/src/facade/lang';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {Map, MapWrapper} from 'angular2/src/facade/collection';
-
-import {XHR} from 'angular2/src/render/xhr';
-
-import {bind} from 'angular2/di';
-
-export function main() {
-  describe('StyleInliner', () => {
-    beforeEachBindings(() => [
-      bind(XHR)
-          .toClass(FakeXHR),
-    ]);
-
-    describe('loading', () => {
-
-      it('should return a string when there is no import statement',
-         inject([StyleInliner], (inliner) => {
-           var css = '.main {}';
-           var loadedCss = inliner.inlineImports(css, 'http://base');
-           expect(loadedCss).toEqual(css);
-         }));
-
-      it('should inline @import rules',
-         inject([XHR, StyleInliner, AsyncTestCompleter], (xhr, inliner, async) => {
-           xhr.reply('http://base/one.css', '.one {}');
-           var css = '@import url("one.css");.main {}';
-           var loadedCss = inliner.inlineImports(css, 'http://base');
-           expect(loadedCss).toBePromise();
-           PromiseWrapper.then(loadedCss,
-                               function(css) {
-                                 expect(css).toEqual('.one {}\n.main {}');
-                                 async.done();
-                               },
-                               function(e) { throw 'fail;' });
-         }));
-
-      it('should support url([unquoted url]) in @import rules',
-         inject([XHR, StyleInliner, AsyncTestCompleter], (xhr, inliner, async) => {
-           xhr.reply('http://base/one.css', '.one {}');
-           var css = '@import url(one.css);.main {}';
-           var loadedCss = inliner.inlineImports(css, 'http://base');
-           expect(loadedCss).toBePromise();
-           PromiseWrapper.then(loadedCss,
-                               function(css) {
-                                 expect(css).toEqual('.one {}\n.main {}');
-                                 async.done();
-                               },
-                               function(e) { throw 'fail;' });
-         }));
-
-      it('should handle @import error gracefuly',
-         inject([StyleInliner, AsyncTestCompleter], (inliner, async) => {
-           var css = '@import "one.css";.main {}';
-           var loadedCss = inliner.inlineImports(css, 'http://base');
-           expect(loadedCss).toBePromise();
-           PromiseWrapper.then(
-               loadedCss,
-               function(css) {
-                 expect(css).toEqual('/* failed to import http://base/one.css */\n.main {}');
-                 async.done();
-               },
-               function(e) { throw 'fail;' });
-         }));
-
-      it('should inline multiple @import rules',
-         inject([XHR, StyleInliner, AsyncTestCompleter], (xhr, inliner, async) => {
-           xhr.reply('http://base/one.css', '.one {}');
-           xhr.reply('http://base/two.css', '.two {}');
-           var css = '@import "one.css";@import "two.css";.main {}';
-           var loadedCss = inliner.inlineImports(css, 'http://base');
-           expect(loadedCss).toBePromise();
-           PromiseWrapper.then(loadedCss,
-                               function(css) {
-                                 expect(css).toEqual('.one {}\n.two {}\n.main {}');
-                                 async.done();
-                               },
-                               function(e) { throw 'fail;' });
-         }));
-
-      it('should inline nested @import rules',
-         inject([XHR, StyleInliner, AsyncTestCompleter], (xhr, inliner, async) => {
-           xhr.reply('http://base/one.css', '@import "two.css";.one {}');
-           xhr.reply('http://base/two.css', '.two {}');
-           var css = '@import "one.css";.main {}';
-           var loadedCss = inliner.inlineImports(css, 'http://base/');
-           expect(loadedCss).toBePromise();
-           PromiseWrapper.then(loadedCss,
-                               function(css) {
-                                 expect(css).toEqual('.two {}\n.one {}\n.main {}');
-                                 async.done();
-                               },
-                               function(e) { throw 'fail;' });
-         }));
-
-      it('should handle circular dependencies gracefuly',
-         inject([XHR, StyleInliner, AsyncTestCompleter], (xhr, inliner, async) => {
-           xhr.reply('http://base/one.css', '@import "two.css";.one {}');
-           xhr.reply('http://base/two.css', '@import "one.css";.two {}');
-           var css = '@import "one.css";.main {}';
-           var loadedCss = inliner.inlineImports(css, 'http://base/');
-           expect(loadedCss).toBePromise();
-           PromiseWrapper.then(loadedCss,
-                               function(css) {
-                                 expect(css).toEqual('.two {}\n.one {}\n.main {}');
-                                 async.done();
-                               },
-                               function(e) { throw 'fail;' });
-         }));
-
-      it('should handle invalid @import fracefuly',
-         inject([StyleInliner, AsyncTestCompleter], (inliner, async) => {
-           // Invalid rule: the url is not quoted
-           var css = '@import one.css;.main {}';
-           var loadedCss = inliner.inlineImports(css, 'http://base/');
-           expect(loadedCss).toBePromise();
-           PromiseWrapper.then(
-               loadedCss,
-               function(css) {
-                 expect(css).toEqual('/* Invalid import rule: "@import one.css;" */.main {}');
-                 async.done();
-               },
-               function(e) { throw 'fail;' });
-         }));
-    });
-
-    describe('media query', () => {
-      it('should wrap inlined content in media query',
-         inject([XHR, StyleInliner, AsyncTestCompleter], (xhr, inliner, async) => {
-           xhr.reply('http://base/one.css', '.one {}');
-           var css = '@import "one.css" (min-width: 700px) and (orientation: landscape);';
-           var loadedCss = inliner.inlineImports(css, 'http://base/');
-           expect(loadedCss).toBePromise();
-           PromiseWrapper.then(
-               loadedCss,
-               function(css) {
-                 expect(css).toEqual(
-                     '@media (min-width: 700px) and (orientation: landscape) {\n.one {}\n}\n');
-                 async.done();
-               },
-               function(e) { throw 'fail;' });
-         }));
-    });
-
-    describe('url rewritting', () => {
-      it('should rewrite url in inlined content',
-         inject([XHR, StyleInliner, AsyncTestCompleter], (xhr, inliner, async) => {
-           // it should rewrite both '@import' and 'url()'
-           xhr.reply('http://base/one.css',
-                     '@import "./nested/two.css";.one {background-image: url("one.jpg");}');
-           xhr.reply('http://base/nested/two.css',
-                     '.two {background-image: url("../img/two.jpg");}');
-           var css = '@import "one.css";';
-           var loadedCss = inliner.inlineImports(css, 'http://base/');
-           expect(loadedCss).toBePromise();
-           PromiseWrapper.then(
-               loadedCss,
-               function(css) {
-                 expect(css).toEqual(".two {background-image: url('http://base/img/two.jpg');}\n" +
-                                     ".one {background-image: url('http://base/one.jpg');}\n");
-                 async.done();
-               },
-               function(e) { throw 'fail;' });
-         }));
-    });
-  });
-}
-
-class FakeXHR extends XHR {
-  _responses: Map<string, string>;
-
-  constructor() {
-    super();
-    this._responses = new Map();
-  }
-
-  get(url: string): Promise<string> {
-    var response = this._responses.get(url);
-    if (isBlank(response)) {
-      return PromiseWrapper.reject('xhr error', null);
-    }
-
-    return PromiseWrapper.resolve(response);
-  }
-
-  reply(url: string, response: string) { this._responses.set(url, response); }
-}
diff --git a/modules/angular2/test/render/dom/compiler/style_url_resolver_spec.ts b/modules/angular2/test/render/dom/compiler/style_url_resolver_spec.ts
deleted file mode 100644
index 1bfcdd5d61d7..000000000000
--- a/modules/angular2/test/render/dom/compiler/style_url_resolver_spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import {describe, it, expect, beforeEach, ddescribe, iit, xit, el} from 'angular2/test_lib';
-import {StyleUrlResolver} from 'angular2/src/render/dom/compiler/style_url_resolver';
-
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-
-export function main() {
-  describe('StyleUrlResolver', () => {
-    let styleUrlResolver;
-
-    beforeEach(() => { styleUrlResolver = new StyleUrlResolver(new UrlResolver()); });
-
-    it('should resolve "url()" urls', () => {
-      var css = `
-      .foo {
-        background-image: url("double.jpg");
-        background-image: url('simple.jpg');
-        background-image: url(noquote.jpg);
-      }`;
-      var expectedCss = `
-      .foo {
-        background-image: url('http://ng.io/double.jpg');
-        background-image: url('http://ng.io/simple.jpg');
-        background-image: url('http://ng.io/noquote.jpg');
-      }`;
-
-      var resolvedCss = styleUrlResolver.resolveUrls(css, 'http://ng.io');
-      expect(resolvedCss).toEqual(expectedCss);
-    });
-
-    it('should resolve "@import" urls', () => {
-      var css = `
-      @import '1.css';
-      @import "2.css";
-      `;
-      var expectedCss = `
-      @import 'http://ng.io/1.css';
-      @import 'http://ng.io/2.css';
-      `;
-
-      var resolvedCss = styleUrlResolver.resolveUrls(css, 'http://ng.io');
-      expect(resolvedCss).toEqual(expectedCss);
-    });
-
-    it('should resolve "@import url()" urls', () => {
-      var css = `
-      @import url('3.css');
-      @import url("4.css");
-      @import url(5.css);
-      `;
-      var expectedCss = `
-      @import url('http://ng.io/3.css');
-      @import url('http://ng.io/4.css');
-      @import url('http://ng.io/5.css');
-      `;
-
-      var resolvedCss = styleUrlResolver.resolveUrls(css, 'http://ng.io');
-      expect(resolvedCss).toEqual(expectedCss);
-    });
-
-    it('should support media query in "@import"', () => {
-      var css = `
-      @import 'print.css' print;
-      @import url(print.css) print;
-      `;
-      var expectedCss = `
-      @import 'http://ng.io/print.css' print;
-      @import url('http://ng.io/print.css') print;
-      `;
-
-      var resolvedCss = styleUrlResolver.resolveUrls(css, 'http://ng.io');
-      expect(resolvedCss).toEqual(expectedCss);
-    });
-  });
-}
diff --git a/modules/angular2/test/render/dom/compiler/text_interpolation_parser_spec.ts b/modules/angular2/test/render/dom/compiler/text_interpolation_parser_spec.ts
deleted file mode 100644
index d83e17bae004..000000000000
--- a/modules/angular2/test/render/dom/compiler/text_interpolation_parser_spec.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import {describe, beforeEach, expect, it, iit, ddescribe, el} from 'angular2/test_lib';
-import {TextInterpolationParser} from 'angular2/src/render/dom/compiler/text_interpolation_parser';
-import {CompilePipeline} from 'angular2/src/render/dom/compiler/compile_pipeline';
-import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {Lexer, Parser} from 'angular2/change_detection';
-import {IgnoreChildrenStep} from './pipeline_spec';
-import {ElementBinderBuilder} from 'angular2/src/render/dom/view/proto_view_builder';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-export function main() {
-  describe('TextInterpolationParser', () => {
-    function createPipeline() {
-      return new CompilePipeline(
-          [new IgnoreChildrenStep(), new TextInterpolationParser(new Parser(new Lexer()))]);
-    }
-
-    function process(element): List<ElementBinderBuilder> {
-      return ListWrapper.map(createPipeline().process(element),
-                             (compileElement) => compileElement.inheritedElementBinder);
-    }
-
-    function assertTextBinding(elementBinder, bindingIndex, nodeIndex, expression) {
-      expect(elementBinder.textBindings[bindingIndex].source).toEqual(expression);
-      expect(elementBinder.textBindingNodes[bindingIndex])
-          .toEqual(DOM.childNodes(DOM.templateAwareRoot(elementBinder.element))[nodeIndex]);
-    }
-
-    it('should find text interpolation in normal elements', () => {
-      var result = process(el('<div>{{expr1}}<span></span>{{expr2}}</div>'))[0];
-      assertTextBinding(result, 0, 0, "{{expr1}}");
-      assertTextBinding(result, 1, 2, "{{expr2}}");
-    });
-
-    it('should find text interpolation in template elements', () => {
-      var result = process(el('<template>{{expr1}}<span></span>{{expr2}}</template>'))[0];
-      assertTextBinding(result, 0, 0, "{{expr1}}");
-      assertTextBinding(result, 1, 2, "{{expr2}}");
-    });
-
-    it('should allow multiple expressions', () => {
-      var result = process(el('<div>{{expr1}}{{expr2}}</div>'))[0];
-      assertTextBinding(result, 0, 0, "{{expr1}}{{expr2}}");
-    });
-
-    it('should not interpolate when compileChildren is false', () => {
-      var results = process(el('<div>{{included}}<span ignore-children>{{excluded}}</span></div>'));
-      assertTextBinding(results[0], 0, 0, "{{included}}");
-      expect(results[1]).toBe(results[0]);
-    });
-
-    it('should allow fixed text before, in between and after expressions', () => {
-      var result = process(el('<div>a{{expr1}}b{{expr2}}c</div>'))[0];
-      assertTextBinding(result, 0, 0, "a{{expr1}}b{{expr2}}c");
-    });
-
-    it('should escape quotes in fixed parts', () => {
-      var result = process(el("<div>'\"a{{expr1}}</div>"))[0];
-      assertTextBinding(result, 0, 0, "'\"a{{expr1}}");
-    });
-  });
-}
diff --git a/modules/angular2/test/render/dom/compiler/view_loader_spec.ts b/modules/angular2/test/render/dom/compiler/view_loader_spec.ts
deleted file mode 100644
index eb059d135e3d..000000000000
--- a/modules/angular2/test/render/dom/compiler/view_loader_spec.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {ViewLoader} from 'angular2/src/render/dom/compiler/view_loader';
-import {StyleInliner} from 'angular2/src/render/dom/compiler/style_inliner';
-import {StyleUrlResolver} from 'angular2/src/render/dom/compiler/style_url_resolver';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-
-import {ViewDefinition} from 'angular2/src/render/api';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {XHR} from 'angular2/src/render/xhr';
-import {MockXHR} from 'angular2/src/render/xhr_mock';
-
-export function main() {
-  describe('ViewLoader', () => {
-    var loader, xhr, styleUrlResolver, urlResolver;
-
-    beforeEach(() => {
-      xhr = new MockXHR();
-      urlResolver = new UrlResolver();
-      styleUrlResolver = new StyleUrlResolver(urlResolver);
-      let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
-      loader = new ViewLoader(xhr, styleInliner, styleUrlResolver);
-    });
-
-    describe('html', () => {
-      it('should load inline templates', inject([AsyncTestCompleter], (async) => {
-           var view = new ViewDefinition({template: 'template template'});
-           loader.load(view).then((el) => {
-             expect(DOM.content(el)).toHaveText('template template');
-             async.done();
-           });
-         }));
-
-      it('should load templates through XHR', inject([AsyncTestCompleter], (async) => {
-           xhr.expect('http://ng.io/foo.html', 'xhr template');
-           var view = new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'});
-           loader.load(view).then((el) => {
-             expect(DOM.content(el)).toHaveText('xhr template');
-             async.done();
-           });
-           xhr.flush();
-         }));
-
-      it('should resolve urls in styles', inject([AsyncTestCompleter], (async) => {
-           xhr.expect('http://ng.io/foo.html',
-                      '<style>.foo { background-image: url("double.jpg"); }</style>');
-           var view = new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'});
-           loader.load(view).then((el) => {
-             expect(DOM.content(el))
-                 .toHaveText(".foo { background-image: url('http://ng.io/double.jpg'); }");
-             async.done();
-           });
-           xhr.flush();
-         }));
-
-      it('should inline styles', inject([AsyncTestCompleter], (async) => {
-           let xhr = new FakeXHR();
-           xhr.reply('http://ng.io/foo.html', '<style>@import "foo.css";</style>');
-           xhr.reply('http://ng.io/foo.css', '/* foo.css */');
-
-           let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
-           let loader = new ViewLoader(xhr, styleInliner, styleUrlResolver);
-
-           var view = new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'});
-           loader.load(view).then((el) => {
-             expect(DOM.getInnerHTML(el)).toEqual("<style>/* foo.css */\n</style>");
-             async.done();
-           });
-         }));
-
-      it('should return a new template element on each call',
-         inject([AsyncTestCompleter], (async) => {
-           var firstEl;
-           // we have only one xhr.expect, so there can only be one xhr call!
-           xhr.expect('http://ng.io/foo.html', 'xhr template');
-           var view = new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'});
-           loader.load(view)
-               .then((el) => {
-                 expect(DOM.content(el)).toHaveText('xhr template');
-                 firstEl = el;
-                 return loader.load(view);
-               })
-               .then((el) => {
-                 expect(el).not.toBe(firstEl);
-                 expect(DOM.content(el)).toHaveText('xhr template');
-                 async.done();
-               });
-           xhr.flush();
-         }));
-
-      it('should throw when no template is defined', () => {
-        var view = new ViewDefinition({template: null, templateAbsUrl: null});
-        expect(() => loader.load(view))
-            .toThrowError('View should have either the templateUrl or template property set');
-      });
-
-      it('should return a rejected Promise when XHR loading fails',
-         inject([AsyncTestCompleter], (async) => {
-           xhr.expect('http://ng.io/foo.html', null);
-           var view = new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'});
-           PromiseWrapper.then(loader.load(view), function(_) { throw 'Unexpected response'; },
-                               function(error) {
-                                 expect(error.message)
-                                     .toEqual('Failed to fetch url "http://ng.io/foo.html"');
-                                 async.done();
-                               });
-           xhr.flush();
-         }));
-    });
-
-    describe('css', () => {
-      it('should load inline styles', inject([AsyncTestCompleter], (async) => {
-           var view = new ViewDefinition({template: 'html', styles: ['style 1', 'style 2']});
-           loader.load(view).then((el) => {
-             expect(DOM.getInnerHTML(el))
-                 .toEqual('<style>style 1</style><style>style 2</style>html');
-             async.done();
-           });
-         }));
-
-      it('should resolve urls in inline styles', inject([AsyncTestCompleter], (async) => {
-           xhr.expect('http://ng.io/foo.html', 'html');
-           var view = new ViewDefinition({
-             templateAbsUrl: 'http://ng.io/foo.html',
-             styles: ['.foo { background-image: url("double.jpg"); }']
-           });
-           loader.load(view).then((el) => {
-             expect(DOM.getInnerHTML(el))
-                 .toEqual(
-                     "<style>.foo { background-image: url('http://ng.io/double.jpg'); }</style>html");
-             async.done();
-           });
-           xhr.flush();
-         }));
-
-      it('should load templates through XHR', inject([AsyncTestCompleter], (async) => {
-           xhr.expect('http://ng.io/foo.html', 'xhr template');
-           xhr.expect('http://ng.io/foo-1.css', '1');
-           xhr.expect('http://ng.io/foo-2.css', '2');
-           var view = new ViewDefinition({
-             templateAbsUrl: 'http://ng.io/foo.html',
-             styles: ['i1'],
-             styleAbsUrls: ['http://ng.io/foo-1.css', 'http://ng.io/foo-2.css']
-           });
-           loader.load(view).then((el) => {
-             expect(DOM.getInnerHTML(el))
-                 .toEqual('<style>i1</style><style>1</style><style>2</style>xhr template');
-             async.done();
-           });
-           xhr.flush();
-         }));
-
-      it('should inline styles', inject([AsyncTestCompleter], (async) => {
-           let xhr = new FakeXHR();
-           xhr.reply('http://ng.io/foo.html', '<p>template</p>');
-           xhr.reply('http://ng.io/foo.css', '/* foo.css */');
-
-           let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
-           let loader = new ViewLoader(xhr, styleInliner, styleUrlResolver);
-
-           var view = new ViewDefinition(
-               {templateAbsUrl: 'http://ng.io/foo.html', styles: ['@import "foo.css";']});
-           loader.load(view).then((el) => {
-             expect(DOM.getInnerHTML(el)).toEqual("<style>/* foo.css */\n</style><p>template</p>");
-             async.done();
-           });
-         }));
-
-
-      it('should return a rejected Promise when XHR loading fails',
-         inject([AsyncTestCompleter], (async) => {
-           xhr.expect('http://ng.io/foo.css', null);
-           var view = new ViewDefinition({template: '', styleAbsUrls: ['http://ng.io/foo.css']});
-           PromiseWrapper.then(loader.load(view), function(_) { throw 'Unexpected response'; },
-                               function(error) {
-                                 expect(error.message)
-                                     .toEqual('Failed to fetch url "http://ng.io/foo.css"');
-                                 async.done();
-                               });
-           xhr.flush();
-         }));
-    });
-  });
-}
-
-class SomeComponent {}
-
-class FakeXHR extends XHR {
-  _responses: Map<string, string> = new Map();
-
-  constructor() { super(); }
-
-  get(url: string): Promise<string> {
-    return this._responses.has(url) ? PromiseWrapper.resolve(this._responses.get(url)) :
-                                      PromiseWrapper.reject('xhr error', null);
-  }
-
-  reply(url: string, response: string): void { this._responses.set(url, response); }
-}
diff --git a/modules/angular2/test/render/dom/compiler/view_splitter_spec.ts b/modules/angular2/test/render/dom/compiler/view_splitter_spec.ts
deleted file mode 100644
index 44cecd1d43ca..000000000000
--- a/modules/angular2/test/render/dom/compiler/view_splitter_spec.ts
+++ /dev/null
@@ -1,251 +0,0 @@
-import {
-  describe,
-  beforeEach,
-  it,
-  expect,
-  iit,
-  ddescribe,
-  el,
-  stringifyElement
-} from 'angular2/test_lib';
-import {MapWrapper} from 'angular2/src/facade/collection';
-
-import {ViewSplitter} from 'angular2/src/render/dom/compiler/view_splitter';
-import {CompilePipeline} from 'angular2/src/render/dom/compiler/compile_pipeline';
-import {ProtoViewDto, ViewType} from 'angular2/src/render/api';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {Lexer, Parser} from 'angular2/change_detection';
-
-export function main() {
-  describe('ViewSplitter', () => {
-
-    function createPipeline() {
-      return new CompilePipeline([new ViewSplitter(new Parser(new Lexer()))]);
-    }
-
-    describe('<template> elements', () => {
-
-      it('should move the content into a new <template> element and mark that as viewRoot', () => {
-        var rootElement = el('<div><template if="true">a</template></div>');
-        var results = createPipeline().process(rootElement);
-
-        expect(stringifyElement(results[1].element))
-            .toEqual('<template class="ng-binding" if="true"></template>');
-        expect(results[1].isViewRoot).toBe(false);
-        expect(stringifyElement(results[2].element)).toEqual('<template>a</template>');
-        expect(results[2].isViewRoot).toBe(true);
-      });
-
-      it('should mark the new <template> element as viewRoot', () => {
-        var rootElement = el('<div><template if="true">a</template></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].isViewRoot).toBe(true);
-      });
-
-      it('should not wrap the root element', () => {
-        var rootElement = el('<div></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results.length).toBe(1);
-        expect(stringifyElement(rootElement)).toEqual('<div></div>');
-      });
-
-      it('should copy over the elementDescription', () => {
-        var rootElement = el('<div><template if="true">a</template></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].elementDescription).toBe(results[1].elementDescription);
-      });
-
-      it('should clean out the inheritedElementBinder', () => {
-        var rootElement = el('<div><template if="true">a</template></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].inheritedElementBinder).toBe(null);
-      });
-
-      it('should create a nestedProtoView', () => {
-        var rootElement = el('<div><template if="true">a</template></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].inheritedProtoView).not.toBe(null);
-        expect(results[2].inheritedProtoView)
-            .toBe(results[1].inheritedElementBinder.nestedProtoView);
-        expect(results[2].inheritedProtoView.type).toBe(ViewType.EMBEDDED);
-        expect(stringifyElement(results[2].inheritedProtoView.rootElement))
-            .toEqual('<template>a</template>');
-      });
-
-    });
-
-    describe('elements with template attribute', () => {
-
-      it('should replace the element with an empty <template> element', () => {
-        var rootElement = el('<div><span template=""></span></div>');
-        var originalChild = rootElement.childNodes[0];
-        var results = createPipeline().process(rootElement);
-        expect(results[0].element).toBe(rootElement);
-        expect(stringifyElement(results[0].element))
-            .toEqual('<div><template class="ng-binding"></template></div>');
-        expect(stringifyElement(results[2].element)).toEqual('<span template=""></span>');
-        expect(results[2].element).toBe(originalChild);
-      });
-
-      it('should work with top-level template node', () => {
-        var rootElement = el('<template><div template>x</div></template>');
-        var originalChild = DOM.content(rootElement).childNodes[0];
-        var results = createPipeline().process(rootElement);
-
-        expect(results[0].element).toBe(rootElement);
-        expect(results[0].isViewRoot).toBe(true);
-        expect(results[2].isViewRoot).toBe(true);
-        expect(stringifyElement(results[0].element))
-            .toEqual('<template><template class="ng-binding"></template></template>');
-        expect(results[2].element).toBe(originalChild);
-      });
-
-      it('should mark the element as viewRoot', () => {
-        var rootElement = el('<div><div template></div></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].isViewRoot).toBe(true);
-      });
-
-      it('should add property bindings from the template attribute', () => {
-        var rootElement = el('<div><div template="some-prop:expr"></div></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[1].inheritedElementBinder.propertyBindings.get('someProp').source)
-            .toEqual('expr');
-        expect(results[1].attrs().get('some-prop')).toEqual('expr');
-      });
-
-      it('should add variable mappings from the template attribute to the nestedProtoView', () => {
-        var rootElement = el('<div><div template="var var-name=mapName"></div></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].inheritedProtoView.variableBindings)
-            .toEqual(MapWrapper.createFromStringMap({'mapName': 'varName'}));
-      });
-
-      it('should add entries without value as attributes to the element', () => {
-        var rootElement = el('<div><div template="varname"></div></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[1].attrs().get('varname')).toEqual('');
-        expect(results[1].inheritedElementBinder.propertyBindings).toEqual(new Map());
-        expect(results[1].inheritedElementBinder.variableBindings).toEqual(new Map());
-      });
-
-      it('should iterate properly after a template dom modification', () => {
-        var rootElement = el('<div><div template></div><after></after></div>');
-        var results = createPipeline().process(rootElement);
-        // 1 root + 2 initial + 1 generated template elements
-        expect(results.length).toEqual(4);
-      });
-
-      it('should copy over the elementDescription', () => {
-        var rootElement = el('<div><span template=""></span></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].elementDescription).toBe(results[1].elementDescription);
-      });
-
-      it('should clean out the inheritedElementBinder', () => {
-        var rootElement = el('<div><span template=""></span></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].inheritedElementBinder).toBe(null);
-      });
-
-      it('should create a nestedProtoView', () => {
-        var rootElement = el('<div><span template=""></span></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].inheritedProtoView).not.toBe(null);
-        expect(results[2].inheritedProtoView)
-            .toBe(results[1].inheritedElementBinder.nestedProtoView);
-        expect(stringifyElement(results[2].inheritedProtoView.rootElement))
-            .toEqual('<span template=""></span>');
-      });
-
-    });
-
-    describe('elements with *directive_name attribute', () => {
-
-      it('should replace the element with an empty <template> element', () => {
-        var rootElement = el('<div><span *ng-if></span></div>');
-        var originalChild = rootElement.childNodes[0];
-        var results = createPipeline().process(rootElement);
-        expect(results[0].element).toBe(rootElement);
-        expect(stringifyElement(results[0].element))
-            .toEqual('<div><template class="ng-binding" ng-if=""></template></div>');
-        expect(stringifyElement(results[2].element)).toEqual('<span *ng-if=""></span>');
-        expect(results[2].element).toBe(originalChild);
-      });
-
-      it('should mark the element as viewRoot', () => {
-        var rootElement = el('<div><div *foo="bar"></div></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].isViewRoot).toBe(true);
-      });
-
-      it('should work with top-level template node', () => {
-        var rootElement = el('<template><div *foo>x</div></template>');
-        var originalChild = DOM.content(rootElement).childNodes[0];
-        var results = createPipeline().process(rootElement);
-
-        expect(results[0].element).toBe(rootElement);
-        expect(results[0].isViewRoot).toBe(true);
-        expect(results[2].isViewRoot).toBe(true);
-        expect(stringifyElement(results[0].element))
-            .toEqual('<template><template class="ng-binding" foo=""></template></template>');
-        expect(results[2].element).toBe(originalChild);
-      });
-
-      it('should add property bindings from the template attribute', () => {
-        var rootElement = el('<div><div *prop="expr"></div></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[1].inheritedElementBinder.propertyBindings.get('prop').source)
-            .toEqual('expr');
-        expect(results[1].attrs().get('prop')).toEqual('expr');
-      });
-
-      it('should add variable mappings from the template attribute to the nestedProtoView', () => {
-        var rootElement = el('<div><div *foreach="var varName=mapName"></div></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].inheritedProtoView.variableBindings)
-            .toEqual(MapWrapper.createFromStringMap({'mapName': 'varName'}));
-      });
-
-      it('should add entries without value as attribute to the element', () => {
-        var rootElement = el('<div><div *varname></div></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[1].attrs().get('varname')).toEqual('');
-        expect(results[1].inheritedElementBinder.propertyBindings).toEqual(new Map());
-        expect(results[1].inheritedElementBinder.variableBindings).toEqual(new Map());
-      });
-
-      it('should iterate properly after a template dom modification', () => {
-        var rootElement = el('<div><div *foo></div><after></after></div>');
-        var results = createPipeline().process(rootElement);
-        // 1 root + 2 initial + 1 generated template elements
-        expect(results.length).toEqual(4);
-      });
-
-      it('should copy over the elementDescription', () => {
-        var rootElement = el('<div><span *foo></span></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].elementDescription).toBe(results[1].elementDescription);
-      });
-
-      it('should clean out the inheritedElementBinder', () => {
-        var rootElement = el('<div><span *foo></span></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].inheritedElementBinder).toBe(null);
-      });
-
-      it('should create a nestedProtoView', () => {
-        var rootElement = el('<div><span *foo></span></div>');
-        var results = createPipeline().process(rootElement);
-        expect(results[2].inheritedProtoView).not.toBe(null);
-        expect(results[2].inheritedProtoView)
-            .toBe(results[1].inheritedElementBinder.nestedProtoView);
-        expect(stringifyElement(results[2].inheritedProtoView.rootElement))
-            .toEqual('<span *foo=""></span>');
-      });
-
-    });
-
-  });
-}
diff --git a/modules/angular2/test/render/dom/convert_spec.ts b/modules/angular2/test/render/dom/convert_spec.ts
deleted file mode 100644
index 140e868c9427..000000000000
--- a/modules/angular2/test/render/dom/convert_spec.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import {MapWrapper} from 'angular2/src/facade/collection';
-import {DirectiveMetadata} from 'angular2/src/render/api';
-import {directiveMetadataFromMap, directiveMetadataToMap} from 'angular2/src/render/dom/convert';
-import {ddescribe, describe, expect, it} from 'angular2/test_lib';
-
-export function main() {
-  describe('convert', () => {
-    it('directiveMetadataToMap', () => {
-      var someComponent = new DirectiveMetadata({
-        compileChildren: false,
-        hostListeners: MapWrapper.createFromPairs([['LKey', 'LVal']]),
-        hostProperties: MapWrapper.createFromPairs([['PKey', 'PVal']]),
-        hostActions: MapWrapper.createFromPairs([['AcKey', 'AcVal']]),
-        hostAttributes: MapWrapper.createFromPairs([['AtKey', 'AtVal']]),
-        id: 'someComponent',
-        properties: ['propKey: propVal'],
-        readAttributes: ['read1', 'read2'],
-        selector: 'some-comp',
-        type: DirectiveMetadata.COMPONENT_TYPE,
-        exportAs: 'aaa',
-        callOnDestroy: true,
-        callOnChange: true,
-        callOnCheck: true,
-        callOnInit: true,
-        callOnAllChangesDone: true,
-        events: ['onFoo', 'onBar'],
-        changeDetection: 'CHECK_ONCE'
-      });
-      var map = directiveMetadataToMap(someComponent);
-      expect(map.get('compileChildren')).toEqual(false);
-      expect(map.get('hostListeners')).toEqual(MapWrapper.createFromPairs([['LKey', 'LVal']]));
-      expect(map.get('hostProperties')).toEqual(MapWrapper.createFromPairs([['PKey', 'PVal']]));
-      expect(map.get('hostActions')).toEqual(MapWrapper.createFromPairs([['AcKey', 'AcVal']]));
-      expect(map.get('hostAttributes')).toEqual(MapWrapper.createFromPairs([['AtKey', 'AtVal']]));
-      expect(map.get('id')).toEqual('someComponent');
-      expect(map.get('properties')).toEqual(['propKey: propVal']);
-      expect(map.get('readAttributes')).toEqual(['read1', 'read2']);
-      expect(map.get('selector')).toEqual('some-comp');
-      expect(map.get('type')).toEqual(DirectiveMetadata.COMPONENT_TYPE);
-      expect(map.get('callOnDestroy')).toEqual(true);
-      expect(map.get('callOnCheck')).toEqual(true);
-      expect(map.get('callOnChange')).toEqual(true);
-      expect(map.get('callOnInit')).toEqual(true);
-      expect(map.get('callOnAllChangesDone')).toEqual(true);
-      expect(map.get('exportAs')).toEqual('aaa');
-      expect(map.get('events')).toEqual(['onFoo', 'onBar']);
-      expect(map.get('changeDetection')).toEqual('CHECK_ONCE');
-    });
-
-    it('mapToDirectiveMetadata', () => {
-      var map = MapWrapper.createFromPairs([
-        ['compileChildren', false],
-        ['hostProperties', MapWrapper.createFromPairs([['PKey', 'testVal']])],
-        ['hostListeners', MapWrapper.createFromPairs([['LKey', 'testVal']])],
-        ['hostActions', MapWrapper.createFromPairs([['AcKey', 'testVal']])],
-        ['hostAttributes', MapWrapper.createFromPairs([['AtKey', 'testVal']])],
-        ['id', 'testId'],
-        ['properties', ['propKey: propVal']],
-        ['readAttributes', ['readTest1', 'readTest2']],
-        ['selector', 'testSelector'],
-        ['type', DirectiveMetadata.DIRECTIVE_TYPE],
-        ['exportAs', 'aaa'],
-        ['callOnDestroy', true],
-        ['callOnCheck', true],
-        ['callOnInit', true],
-        ['callOnChange', true],
-        ['callOnAllChangesDone', true],
-        ['events', ['onFoo', 'onBar']],
-        ['changeDetection', 'CHECK_ONCE']
-      ]);
-      var meta = directiveMetadataFromMap(map);
-      expect(meta.compileChildren).toEqual(false);
-      expect(meta.hostProperties).toEqual(MapWrapper.createFromPairs([['PKey', 'testVal']]));
-      expect(meta.hostListeners).toEqual(MapWrapper.createFromPairs([['LKey', 'testVal']]));
-      expect(meta.hostActions).toEqual(MapWrapper.createFromPairs([['AcKey', 'testVal']]));
-      expect(meta.hostAttributes).toEqual(MapWrapper.createFromPairs([['AtKey', 'testVal']]));
-      expect(meta.id).toEqual('testId');
-      expect(meta.properties).toEqual(['propKey: propVal']);
-      expect(meta.readAttributes).toEqual(['readTest1', 'readTest2']);
-      expect(meta.selector).toEqual('testSelector');
-      expect(meta.type).toEqual(DirectiveMetadata.DIRECTIVE_TYPE);
-      expect(meta.exportAs).toEqual('aaa');
-      expect(meta.callOnDestroy).toEqual(true);
-      expect(meta.callOnCheck).toEqual(true);
-      expect(meta.callOnInit).toEqual(true);
-      expect(meta.callOnChange).toEqual(true);
-      expect(meta.callOnAllChangesDone).toEqual(true);
-      expect(meta.events).toEqual(['onFoo', 'onBar']);
-      expect(meta.changeDetection).toEqual('CHECK_ONCE');
-    });
-  });
-}
diff --git a/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts b/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts
deleted file mode 100644
index 0b2ed4fb7e9e..000000000000
--- a/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts
+++ /dev/null
@@ -1,208 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-  beforeEachBindings,
-  SpyObject,
-} from 'angular2/test_lib';
-
-import {MapWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {DomTestbed, TestView, elRef} from './dom_testbed';
-
-import {ViewDefinition, DirectiveMetadata, RenderViewRef} from 'angular2/src/render/api';
-
-export function main() {
-  describe('DomRenderer integration', () => {
-    beforeEachBindings(() => [DomTestbed]);
-
-    it('should create and destroy root host views while using the given elements in place',
-       inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-         tb.compiler.compileHost(someComponent)
-             .then((hostProtoViewDto) => {
-               var view =
-                   new TestView(tb.renderer.createRootHostView(hostProtoViewDto.render, '#root'));
-               expect(view.rawView.rootNodes[0]).toEqual(tb.rootEl);
-
-               tb.renderer.destroyView(view.viewRef);
-               // destroying a root view should not disconnect it!
-               expect(tb.rootEl.parentNode).toBeTruthy();
-
-               async.done();
-             });
-       }));
-
-    it('should attach and detach component views',
-       inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-         tb.compileAll([
-             someComponent,
-             new ViewDefinition({componentId: 'someComponent', template: 'hello', directives: []})
-           ])
-             .then((protoViewDtos) => {
-               var rootView = tb.createRootView(protoViewDtos[0]);
-               var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
-               expect(tb.rootEl).toHaveText('hello');
-               tb.destroyComponentView(rootView.viewRef, 0, cmpView.viewRef);
-               expect(tb.rootEl).toHaveText('');
-               async.done();
-             });
-       }));
-
-    it('should not create LightDom instances if the host element is empty',
-       inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-         tb.compileAll([
-             someComponent,
-             new ViewDefinition({
-               componentId: 'someComponent',
-               template: '<some-comp>  <!-- comment -->\n </some-comp>',
-               directives: [someComponent]
-             })
-           ])
-             .then((protoViewDtos) => {
-               var rootView = tb.createRootView(protoViewDtos[0]);
-               var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
-               expect(cmpView.rawView.proto.elementBinders[0].componentId).toBe('someComponent');
-               expect(cmpView.rawView.boundElements[0].lightDom).toBe(null);
-
-               async.done();
-             });
-       }));
-
-    it('should update text nodes', inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-         tb.compileAll([
-             someComponent,
-             new ViewDefinition({componentId: 'someComponent', template: '{{a}}', directives: []})
-           ])
-             .then((protoViewDtos) => {
-               var rootView = tb.createRootView(protoViewDtos[0]);
-               var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
-
-               tb.renderer.setText(cmpView.viewRef, 0, 'hello');
-               expect(tb.rootEl).toHaveText('hello');
-               async.done();
-             });
-       }));
-
-    it('should update any element property/attributes/class/style independent of the compilation',
-       inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-         tb.compileAll([
-             someComponent,
-             new ViewDefinition({
-               componentId: 'someComponent',
-               template: '<input [title]="y" style="position:absolute">',
-               directives: []
-             })
-           ])
-             .then((protoViewDtos) => {
-               var rootView = tb.createRootView(protoViewDtos[0]);
-               var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
-
-               var el = DOM.childNodes(tb.rootEl)[0];
-               tb.renderer.setElementProperty(elRef(cmpView.viewRef, 0), 'value', 'hello');
-               expect((<HTMLInputElement>el).value).toEqual('hello');
-
-               tb.renderer.setElementClass(elRef(cmpView.viewRef, 0), 'a', true);
-               expect((<HTMLInputElement>DOM.childNodes(tb.rootEl)[0]).value).toEqual('hello');
-               tb.renderer.setElementClass(elRef(cmpView.viewRef, 0), 'a', false);
-               expect(DOM.hasClass(el, 'a')).toBe(false);
-
-               tb.renderer.setElementStyle(elRef(cmpView.viewRef, 0), 'width', '10px');
-               expect(DOM.getStyle(el, 'width')).toEqual('10px');
-               tb.renderer.setElementStyle(elRef(cmpView.viewRef, 0), 'width', null);
-               expect(DOM.getStyle(el, 'width')).toEqual('');
-
-               tb.renderer.setElementAttribute(elRef(cmpView.viewRef, 0), 'someAttr', 'someValue');
-               expect(DOM.getAttribute(el, 'some-attr')).toEqual('someValue');
-
-               async.done();
-             });
-       }));
-
-    if (DOM.supportsDOMEvents()) {
-      it('should call actions on the element independent of the compilation',
-         inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-           tb.compileAll([
-               someComponent,
-               new ViewDefinition({
-                 componentId: 'someComponent',
-                 template: '<input [title]="y"></input>',
-                 directives: []
-               })
-             ])
-               .then((protoViewDtos) => {
-                 var views = tb.createRootViews(protoViewDtos);
-                 var componentView = views[1];
-
-                 tb.renderer.invokeElementMethod(elRef(componentView.viewRef, 0), 'setAttribute',
-                                                 ['a', 'b']);
-
-                 expect(DOM.getAttribute(DOM.childNodes(tb.rootEl)[0], 'a')).toEqual('b');
-                 async.done();
-               });
-         }));
-    }
-
-    it('should add and remove views to and from containers',
-       inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-         tb.compileAll([
-             someComponent,
-             new ViewDefinition({
-               componentId: 'someComponent',
-               template: '<template>hello</template>',
-               directives: []
-             })
-           ])
-             .then((protoViewDtos) => {
-               var rootView = tb.createRootView(protoViewDtos[0]);
-               var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
-
-               var childProto = protoViewDtos[1].elementBinders[0].nestedProtoView;
-               expect(tb.rootEl).toHaveText('');
-               var childView = tb.createViewInContainer(cmpView.viewRef, 0, 0, childProto);
-               expect(tb.rootEl).toHaveText('hello');
-               tb.destroyViewInContainer(cmpView.viewRef, 0, 0, childView.viewRef);
-               expect(tb.rootEl).toHaveText('');
-
-               async.done();
-             });
-       }));
-
-    it('should handle events', inject([AsyncTestCompleter, DomTestbed], (async, tb: DomTestbed) => {
-         tb.compileAll([
-             someComponent,
-             new ViewDefinition({
-               componentId: 'someComponent',
-               template: '<input (change)="doSomething()">',
-               directives: []
-             })
-           ])
-             .then((protoViewDtos) => {
-               var rootView = tb.createRootView(protoViewDtos[0]);
-               var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
-
-               tb.triggerEvent(cmpView.viewRef, 0, 'change');
-               var eventEntry = cmpView.events[0];
-               // bound element index
-               expect(eventEntry[0]).toEqual(0);
-               // event type
-               expect(eventEntry[1]).toEqual('change');
-               // actual event
-               expect((<Map<any, any>>eventEntry[2]).get('$event').type).toEqual('change');
-               async.done();
-             });
-
-       }));
-
-  });
-}
-
-var someComponent = DirectiveMetadata.create(
-    {id: 'someComponent', type: DirectiveMetadata.COMPONENT_TYPE, selector: 'some-comp'});
diff --git a/modules/angular2/test/render/dom/dom_testbed.ts b/modules/angular2/test/render/dom/dom_testbed.ts
deleted file mode 100644
index e5ba5c1a9a98..000000000000
--- a/modules/angular2/test/render/dom/dom_testbed.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import {Inject, Injectable} from 'angular2/di';
-import {MapWrapper, ListWrapper, List, Map} from 'angular2/src/facade/collection';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
-import {DefaultDomCompiler} from 'angular2/src/render/dom/compiler/compiler';
-import {DomView} from 'angular2/src/render/dom/view/view';
-import {
-  RenderViewRef,
-  ProtoViewDto,
-  ViewDefinition,
-  EventDispatcher,
-  DirectiveMetadata,
-  RenderElementRef
-} from 'angular2/src/render/api';
-import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
-import {el, dispatchEvent} from 'angular2/test_lib';
-
-export class TestView {
-  rawView: DomView;
-  viewRef: RenderViewRef;
-  events: List<List<any>>;
-
-  constructor(viewRef: RenderViewRef) {
-    this.viewRef = viewRef;
-    this.rawView = resolveInternalDomView(viewRef);
-    this.events = [];
-  }
-}
-
-export function elRef(renderView: RenderViewRef, boundElementIndex: number) {
-  return new TestRenderElementRef(renderView, boundElementIndex);
-}
-
-class TestRenderElementRef implements RenderElementRef {
-  constructor(public renderView: RenderViewRef, public boundElementIndex: number) {}
-}
-
-class LoggingEventDispatcher implements EventDispatcher {
-  log: List<List<any>>;
-
-  constructor(log: List<List<any>>) { this.log = log; }
-
-  dispatchEvent(elementIndex: number, eventName: string, locals: Map<string, any>) {
-    this.log.push([elementIndex, eventName, locals]);
-    return true;
-  }
-}
-
-
-@Injectable()
-export class DomTestbed {
-  renderer: DomRenderer;
-  compiler: DefaultDomCompiler;
-  rootEl;
-
-  constructor(renderer: DomRenderer, compiler: DefaultDomCompiler,
-              @Inject(DOCUMENT_TOKEN) document) {
-    this.renderer = renderer;
-    this.compiler = compiler;
-    this.rootEl = el('<div id="root"></div>');
-    var oldRoots = DOM.querySelectorAll(document, '#root');
-    for (var i = 0; i < oldRoots.length; i++) {
-      DOM.remove(oldRoots[i]);
-    }
-    DOM.appendChild(DOM.querySelector(document, 'body'), this.rootEl);
-  }
-
-  compileAll(directivesOrViewDefinitions: List<DirectiveMetadata |
-                                               ViewDefinition>): Promise<List<ProtoViewDto>> {
-    return PromiseWrapper.all(ListWrapper.map(directivesOrViewDefinitions, (entry) => {
-      if (entry instanceof DirectiveMetadata) {
-        return this.compiler.compileHost(entry);
-      } else {
-        return this.compiler.compile(entry);
-      }
-    }));
-  }
-
-  _createTestView(viewRef: RenderViewRef) {
-    var testView = new TestView(viewRef);
-    this.renderer.setEventDispatcher(viewRef, new LoggingEventDispatcher(testView.events));
-    return testView;
-  }
-
-  createRootView(rootProtoView: ProtoViewDto): TestView {
-    var viewRef = this.renderer.createRootHostView(rootProtoView.render, '#root');
-    this.renderer.hydrateView(viewRef);
-    return this._createTestView(viewRef);
-  }
-
-  createComponentView(parentViewRef: RenderViewRef, boundElementIndex: number,
-                      componentProtoView: ProtoViewDto): TestView {
-    var componentViewRef = this.renderer.createView(componentProtoView.render);
-    this.renderer.attachComponentView(elRef(parentViewRef, boundElementIndex), componentViewRef);
-    this.renderer.hydrateView(componentViewRef);
-    return this._createTestView(componentViewRef);
-  }
-
-  createRootViews(protoViews: List<ProtoViewDto>): List<TestView> {
-    var views = [];
-    var lastView = this.createRootView(protoViews[0]);
-    views.push(lastView);
-    for (var i = 1; i < protoViews.length; i++) {
-      lastView = this.createComponentView(lastView.viewRef, 0, protoViews[i]);
-      views.push(lastView);
-    }
-    return views;
-  }
-
-  destroyComponentView(parentViewRef: RenderViewRef, boundElementIndex: number,
-                       componentView: RenderViewRef) {
-    this.renderer.dehydrateView(componentView);
-    this.renderer.detachComponentView(elRef(parentViewRef, boundElementIndex), componentView);
-  }
-
-  createViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
-                        protoView: ProtoViewDto): TestView {
-    var viewRef = this.renderer.createView(protoView.render);
-    this.renderer.attachViewInContainer(elRef(parentViewRef, boundElementIndex), atIndex, viewRef);
-    this.renderer.hydrateView(viewRef);
-    return this._createTestView(viewRef);
-  }
-
-  destroyViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
-                         viewRef: RenderViewRef) {
-    this.renderer.dehydrateView(viewRef);
-    this.renderer.detachViewInContainer(elRef(parentViewRef, boundElementIndex), atIndex, viewRef);
-    this.renderer.destroyView(viewRef);
-  }
-
-  triggerEvent(viewRef: RenderViewRef, boundElementIndex: number, eventName: string) {
-    var element = resolveInternalDomView(viewRef).boundElements[boundElementIndex].element;
-    dispatchEvent(element, eventName);
-  }
-}
diff --git a/modules/angular2/test/render/dom/events/event_manager_spec.ts b/modules/angular2/test/render/dom/events/event_manager_spec.ts
deleted file mode 100644
index 35a49f988943..000000000000
--- a/modules/angular2/test/render/dom/events/event_manager_spec.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import {
-  describe,
-  ddescribe,
-  it,
-  iit,
-  xit,
-  xdescribe,
-  expect,
-  beforeEach,
-  el
-} from 'angular2/test_lib';
-import {
-  EventManager,
-  EventManagerPlugin,
-  DomEventsPlugin
-} from 'angular2/src/render/dom/events/event_manager';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
-import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-export function main() {
-  var domEventPlugin;
-
-  beforeEach(() => { domEventPlugin = new DomEventsPlugin(); });
-
-  describe('EventManager', () => {
-
-    it('should delegate event bindings to plugins', () => {
-      var element = el('<div></div>');
-      var handler = (e) => e;
-      var plugin = new FakeEventManagerPlugin(['click']);
-      var manager = new EventManager([plugin, domEventPlugin], new FakeNgZone());
-      manager.addEventListener(element, 'click', handler);
-      expect(plugin._nonBubbleEventHandlers.get('click')).toBe(handler);
-    });
-
-    it('should delegate bubbling events to plugins', () => {
-      var element = el('<div></div>');
-      var handler = (e) => e;
-      var plugin = new FakeEventManagerPlugin(['click']);
-      var manager = new EventManager([plugin, domEventPlugin], new FakeNgZone());
-      manager.addEventListener(element, '^click', handler);
-      expect(plugin._bubbleEventHandlers.get('click')).toBe(handler);
-    });
-
-    it('should delegate event bindings to the first plugin supporting the event', () => {
-      var element = el('<div></div>');
-      var clickHandler = (e) => e;
-      var dblClickHandler = (e) => e;
-      var plugin1 = new FakeEventManagerPlugin(['dblclick']);
-      var plugin2 = new FakeEventManagerPlugin(['click', 'dblclick']);
-      var manager = new EventManager([plugin1, plugin2], new FakeNgZone());
-      manager.addEventListener(element, 'click', clickHandler);
-      manager.addEventListener(element, 'dblclick', dblClickHandler);
-      expect(plugin1._nonBubbleEventHandlers.has('click')).toBe(false);
-      expect(plugin2._nonBubbleEventHandlers.get('click')).toBe(clickHandler);
-      expect(plugin2._nonBubbleEventHandlers.has('dblclick')).toBe(false);
-      expect(plugin1._nonBubbleEventHandlers.get('dblclick')).toBe(dblClickHandler);
-    });
-
-    it('should throw when no plugin can handle the event', () => {
-      var element = el('<div></div>');
-      var plugin = new FakeEventManagerPlugin(['dblclick']);
-      var manager = new EventManager([plugin], new FakeNgZone());
-      expect(() => manager.addEventListener(element, 'click', null))
-          .toThrowError('No event manager plugin found for event click');
-    });
-
-    it('by default events are only caught on same element', () => {
-      var element = el('<div><div></div></div>');
-      var child = DOM.firstChild(element);
-      var dispatchedEvent = DOM.createMouseEvent('click');
-      var receivedEvent = null;
-      var handler = (e) => { receivedEvent = e; };
-      var manager = new EventManager([domEventPlugin], new FakeNgZone());
-      manager.addEventListener(element, 'click', handler);
-      DOM.dispatchEvent(child, dispatchedEvent);
-
-      expect(receivedEvent).toBe(null);
-    });
-
-    it('bubbled events are caught when fired from a child', () => {
-      var element = el('<div><div></div></div>');
-      // Workaround for https://bugs.webkit.org/show_bug.cgi?id=122755
-      DOM.appendChild(DOM.defaultDoc().body, element);
-
-      var child = DOM.firstChild(element);
-      var dispatchedEvent = DOM.createMouseEvent('click');
-      var receivedEvent = null;
-      var handler = (e) => { receivedEvent = e; };
-      var manager = new EventManager([domEventPlugin], new FakeNgZone());
-      manager.addEventListener(element, '^click', handler);
-      DOM.dispatchEvent(child, dispatchedEvent);
-
-      expect(receivedEvent).toBe(dispatchedEvent);
-    });
-
-    it('should add and remove global event listeners with correct bubbling', () => {
-      var element = el('<div><div></div></div>');
-      DOM.appendChild(DOM.defaultDoc().body, element);
-      var dispatchedEvent = DOM.createMouseEvent('click');
-      var receivedEvent = null;
-      var handler = (e) => { receivedEvent = e; };
-      var manager = new EventManager([domEventPlugin], new FakeNgZone());
-
-      var remover = manager.addGlobalEventListener("document", '^click', handler);
-      DOM.dispatchEvent(element, dispatchedEvent);
-      expect(receivedEvent).toBe(dispatchedEvent);
-
-      receivedEvent = null;
-      remover();
-      DOM.dispatchEvent(element, dispatchedEvent);
-      expect(receivedEvent).toBe(null);
-
-      remover = manager.addGlobalEventListener("document", 'click', handler);
-      DOM.dispatchEvent(element, dispatchedEvent);
-      expect(receivedEvent).toBe(null);
-    });
-  });
-}
-
-class FakeEventManagerPlugin extends EventManagerPlugin {
-  _supports: List<string>;
-  _nonBubbleEventHandlers: Map<string, Function>;
-  _bubbleEventHandlers: Map<string, Function>;
-  constructor(supports: List<string>) {
-    super();
-    this._supports = supports;
-    this._nonBubbleEventHandlers = new Map();
-    this._bubbleEventHandlers = new Map();
-  }
-
-  supports(eventName: string): boolean { return ListWrapper.contains(this._supports, eventName); }
-
-  addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
-    if (shouldSupportBubble) {
-      this._bubbleEventHandlers.set(eventName, handler);
-    } else {
-      this._nonBubbleEventHandlers.set(eventName, handler);
-    }
-    return () => {
-      MapWrapper.delete(
-          shouldSupportBubble ? this._bubbleEventHandlers : this._nonBubbleEventHandlers, eventName)
-    };
-  }
-}
-
-class FakeNgZone extends NgZone {
-  constructor() { super({enableLongStackTrace: false}); }
-
-  run(fn) { fn(); }
-
-  runOutsideAngular(fn) { return fn(); }
-}
diff --git a/modules/angular2/test/render/dom/events/key_events_spec.ts b/modules/angular2/test/render/dom/events/key_events_spec.ts
deleted file mode 100644
index d3fafe17d7f7..000000000000
--- a/modules/angular2/test/render/dom/events/key_events_spec.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
-  describe,
-  ddescribe,
-  it,
-  iit,
-  xit,
-  xdescribe,
-  expect,
-  beforeEach,
-  el
-} from 'angular2/test_lib';
-import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
-
-export function main() {
-  describe('KeyEvents', () => {
-
-    it('should ignore unrecognized events', () => {
-      expect(KeyEventsPlugin.parseEventName('keydown')).toEqual(null);
-      expect(KeyEventsPlugin.parseEventName('keyup')).toEqual(null);
-      expect(KeyEventsPlugin.parseEventName('keydown.unknownmodifier.enter')).toEqual(null);
-      expect(KeyEventsPlugin.parseEventName('keyup.unknownmodifier.enter')).toEqual(null);
-      expect(KeyEventsPlugin.parseEventName('unknownevent.control.shift.enter')).toEqual(null);
-      expect(KeyEventsPlugin.parseEventName('unknownevent.enter')).toEqual(null);
-    });
-
-    it('should correctly parse event names', () => {
-      // key with no modifier
-      expect(KeyEventsPlugin.parseEventName('keydown.enter'))
-          .toEqual({'domEventName': 'keydown', 'fullKey': 'enter'});
-      expect(KeyEventsPlugin.parseEventName('keyup.enter'))
-          .toEqual({'domEventName': 'keyup', 'fullKey': 'enter'});
-
-      // key with modifiers:
-      expect(KeyEventsPlugin.parseEventName('keydown.control.shift.enter'))
-          .toEqual({'domEventName': 'keydown', 'fullKey': 'control.shift.enter'});
-      expect(KeyEventsPlugin.parseEventName('keyup.control.shift.enter'))
-          .toEqual({'domEventName': 'keyup', 'fullKey': 'control.shift.enter'});
-
-      // key with modifiers in a different order:
-      expect(KeyEventsPlugin.parseEventName('keydown.shift.control.enter'))
-          .toEqual({'domEventName': 'keydown', 'fullKey': 'control.shift.enter'});
-      expect(KeyEventsPlugin.parseEventName('keyup.shift.control.enter'))
-          .toEqual({'domEventName': 'keyup', 'fullKey': 'control.shift.enter'});
-
-      // key that is also a modifier:
-      expect(KeyEventsPlugin.parseEventName('keydown.shift.control'))
-          .toEqual({'domEventName': 'keydown', 'fullKey': 'shift.control'});
-      expect(KeyEventsPlugin.parseEventName('keyup.shift.control'))
-          .toEqual({'domEventName': 'keyup', 'fullKey': 'shift.control'});
-
-      expect(KeyEventsPlugin.parseEventName('keydown.control.shift'))
-          .toEqual({'domEventName': 'keydown', 'fullKey': 'control.shift'});
-      expect(KeyEventsPlugin.parseEventName('keyup.control.shift'))
-          .toEqual({'domEventName': 'keyup', 'fullKey': 'control.shift'});
-
-    });
-
-    it('should alias esc to escape', () => {
-      expect(KeyEventsPlugin.parseEventName('keyup.control.esc'))
-          .toEqual(KeyEventsPlugin.parseEventName('keyup.control.escape'));
-    });
-
-  });
-}
diff --git a/modules/angular2/test/render/dom/shadow_dom/content_tag_spec.ts b/modules/angular2/test/render/dom/shadow_dom/content_tag_spec.ts
deleted file mode 100644
index a8b332f27573..000000000000
--- a/modules/angular2/test/render/dom/shadow_dom/content_tag_spec.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-  describe,
-  beforeEach,
-  it,
-  expect,
-  ddescribe,
-  iit,
-  SpyObject,
-  el,
-  proxy
-} from 'angular2/test_lib';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Content} from 'angular2/src/render/dom/shadow_dom/content_tag';
-
-var _scriptStart = `<script start=""></script>`;
-var _scriptEnd = `<script end=""></script>`;
-
-export function main() {
-  describe('Content', function() {
-    var parent;
-    var content;
-
-    beforeEach(() => {
-      parent = el(`<div>${_scriptStart}${_scriptEnd}`);
-      content = DOM.firstChild(parent);
-    });
-
-    it("should insert the nodes", () => {
-      var c = new Content(content, '');
-      c.init(null);
-      c.insert([el("<a></a>"), el("<b></b>")])
-
-          expect(DOM.getInnerHTML(parent))
-              .toEqual(`${_scriptStart}<a></a><b></b>${_scriptEnd}`);
-    });
-
-    it("should remove the nodes from the previous insertion", () => {
-      var c = new Content(content, '');
-      c.init(null);
-      c.insert([el("<a></a>")]);
-      c.insert([el("<b></b>")]);
-
-      expect(DOM.getInnerHTML(parent)).toEqual(`${_scriptStart}<b></b>${_scriptEnd}`);
-    });
-
-    it("should insert empty list", () => {
-      var c = new Content(content, '');
-      c.init(null);
-      c.insert([el("<a></a>")]);
-      c.insert([]);
-
-      expect(DOM.getInnerHTML(parent)).toEqual(`${_scriptStart}${_scriptEnd}`);
-    });
-  });
-}
diff --git a/modules/angular2/test/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy_spec.ts b/modules/angular2/test/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy_spec.ts
deleted file mode 100644
index e975d2120f45..000000000000
--- a/modules/angular2/test/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy_spec.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-  SpyObject,
-  normalizeCSS
-} from 'angular2/test_lib';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {
-  EmulatedScopedShadowDomStrategy,
-} from 'angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy';
-import {
-  resetShadowDomCache,
-} from 'angular2/src/render/dom/shadow_dom/util';
-
-export function main() {
-  describe('EmulatedScopedShadowDomStrategy', () => {
-    var styleHost, strategy;
-
-    beforeEach(() => {
-      styleHost = el('<div></div>');
-      strategy = new EmulatedScopedShadowDomStrategy(styleHost);
-      resetShadowDomCache();
-    });
-
-    it('should use the host element as shadow root', () => {
-      var host = el('<div><span>original content</span></div>');
-      expect(strategy.prepareShadowRoot(host)).toBe(host);
-    });
-
-    it('should scope styles', () => {
-      var styleElement = el('<style>.foo {} :host {}</style>');
-      strategy.processStyleElement('someComponent', 'http://base', styleElement);
-      expect(styleElement).toHaveText(".foo[_ngcontent-0] {\n\n}\n\n[_nghost-0] {\n\n}");
-    });
-
-    it('should return the same style given the same component', () => {
-      var styleElement = el('<style>.foo {} :host {}</style>');
-      strategy.processStyleElement('someComponent', 'http://base', styleElement);
-
-      var styleElement2 = el('<style>.foo {} :host {}</style>');
-      strategy.processStyleElement('someComponent', 'http://base', styleElement2);
-
-      expect(DOM.getText(styleElement)).toEqual(DOM.getText(styleElement2));
-    });
-
-    it('should return different styles given different components', () => {
-      var styleElement = el('<style>.foo {} :host {}</style>');
-      strategy.processStyleElement('someComponent1', 'http://base', styleElement);
-
-      var styleElement2 = el('<style>.foo {} :host {}</style>');
-      strategy.processStyleElement('someComponent2', 'http://base', styleElement2);
-
-      expect(DOM.getText(styleElement)).not.toEqual(DOM.getText(styleElement2));
-    });
-
-    it('should move the style element to the style host', () => {
-      var compileElement = el('<div><style>.one {}</style></div>');
-      var styleElement = DOM.firstChild(compileElement);
-      strategy.processStyleElement('someComponent', 'http://base', styleElement);
-
-      expect(compileElement).toHaveText('');
-      expect(styleHost).toHaveText('.one[_ngcontent-0] {\n\n}');
-    });
-
-    it('should add an attribute to component elements', () => {
-      var element = el('<div></div>');
-      strategy.processElement(null, 'elComponent', element);
-      expect(DOM.getAttribute(element, '_nghost-0')).toEqual('');
-    });
-
-    it('should add an attribute to the content elements', () => {
-      var element = el('<div></div>');
-      strategy.processElement('hostComponent', null, element);
-      expect(DOM.getAttribute(element, '_ngcontent-0')).toEqual('');
-    });
-
-  });
-}
diff --git a/modules/angular2/test/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy_spec.ts b/modules/angular2/test/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy_spec.ts
deleted file mode 100644
index ccb98419c67b..000000000000
--- a/modules/angular2/test/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy_spec.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-  SpyObject,
-} from 'angular2/test_lib';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {
-  EmulatedUnscopedShadowDomStrategy,
-} from 'angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
-import {
-  resetShadowDomCache,
-} from 'angular2/src/render/dom/shadow_dom/util';
-
-export function main() {
-  var strategy;
-
-  describe('EmulatedUnscopedShadowDomStrategy', () => {
-    var styleHost;
-
-    beforeEach(() => {
-      styleHost = el('<div></div>');
-      strategy = new EmulatedUnscopedShadowDomStrategy(styleHost);
-      resetShadowDomCache();
-    });
-
-    it('should use the host element as shadow root', () => {
-      var host = el('<div><span>original content</span></div>');
-      expect(strategy.prepareShadowRoot(host)).toBe(host);
-    });
-
-    it('should move the style element to the style host', () => {
-      var compileElement = el('<div><style>.one {}</style></div>');
-      var styleElement = DOM.firstChild(compileElement);
-      strategy.processStyleElement('someComponent', 'http://base', styleElement);
-
-      expect(compileElement).toHaveText('');
-      expect(styleHost).toHaveText('.one {}');
-    });
-
-    it('should insert the same style only once in the style host', () => {
-      var styleEls = [
-        el('<style>/*css1*/</style>'),
-        el('<style>/*css2*/</style>'),
-        el('<style>/*css1*/</style>')
-      ];
-      ListWrapper.forEach(styleEls, (styleEl) => {
-        strategy.processStyleElement('someComponent', 'http://base', styleEl);
-      });
-
-      expect(styleHost).toHaveText("/*css1*//*css2*/");
-    });
-
-  });
-}
diff --git a/modules/angular2/test/render/dom/shadow_dom/light_dom_spec.ts b/modules/angular2/test/render/dom/shadow_dom/light_dom_spec.ts
deleted file mode 100644
index b9a80c1ffc76..000000000000
--- a/modules/angular2/test/render/dom/shadow_dom/light_dom_spec.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-import {
-  describe,
-  beforeEach,
-  it,
-  expect,
-  ddescribe,
-  iit,
-  SpyObject,
-  el,
-  proxy,
-  stringifyElement
-} from 'angular2/test_lib';
-import {IMPLEMENTS, isBlank, isPresent} from 'angular2/src/facade/lang';
-import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Content} from 'angular2/src/render/dom/shadow_dom/content_tag';
-import {LightDom} from 'angular2/src/render/dom/shadow_dom/light_dom';
-import {DomView} from 'angular2/src/render/dom/view/view';
-import {DomProtoView} from 'angular2/src/render/dom/view/proto_view';
-import {DomViewContainer} from 'angular2/src/render/dom/view/view_container';
-import {DomElement} from 'angular2/src/render/dom/view/element';
-
-@proxy
-@IMPLEMENTS(DomProtoView)
-class FakeProtoView extends SpyObject {
-  constructor(public transitiveContentTagCount: number) { super(DomProtoView); }
-
-  noSuchMethod(i) { super.noSuchMethod(i); }
-}
-
-@proxy
-@IMPLEMENTS(DomView)
-class FakeView extends SpyObject {
-  boundElements: any[];
-  proto;
-
-  constructor(containers = null, transitiveContentTagCount: number = 1) {
-    super(DomView);
-    this.proto = new FakeProtoView(transitiveContentTagCount);
-    this.boundElements = [];
-    if (isPresent(containers)) {
-      ListWrapper.forEach(containers, (c) => {
-        var element = null;
-        var contentTag = null;
-        var vc = null;
-        if (c instanceof FakeContentTag) {
-          contentTag = c;
-          element = c.contentStartElement;
-        }
-        if (c instanceof FakeViewContainer) {
-          vc = c;
-          element = c.templateElement;
-        }
-        var boundElement = new DomElement(null, element, contentTag);
-        boundElement.viewContainer = vc;
-        this.boundElements.push(boundElement);
-      });
-    }
-  }
-
-  noSuchMethod(i) { super.noSuchMethod(i); }
-}
-
-@proxy
-@IMPLEMENTS(DomViewContainer)
-class FakeViewContainer extends SpyObject {
-  _nodes;
-  _contentTagContainers;
-  templateElement;
-
-  constructor(templateEl, nodes = null, views = null) {
-    super(DomViewContainer);
-    this.templateElement = templateEl;
-    this._nodes = nodes;
-    this._contentTagContainers = views;
-  }
-
-  nodes() { return this._nodes; }
-
-  contentTagContainers() { return this._contentTagContainers; }
-
-  noSuchMethod(i) { super.noSuchMethod(i); }
-}
-
-
-@proxy
-@IMPLEMENTS(Content)
-class FakeContentTag extends SpyObject {
-  select;
-  _nodes;
-  contentStartElement;
-
-  constructor(contentEl, select = '', nodes = null) {
-    super(Content);
-    this.contentStartElement = contentEl;
-    this.select = select;
-    this._nodes = nodes;
-  }
-
-  insert(nodes) { this._nodes = nodes; }
-
-  nodes() { return this._nodes; }
-
-  noSuchMethod(i) { super.noSuchMethod(i); }
-}
-
-function createLightDom(hostView, shadowView, el) {
-  var lightDom = new LightDom(hostView, el);
-  lightDom.attachShadowDomView(shadowView);
-  return lightDom;
-}
-
-export function main() {
-  describe('LightDom', function() {
-    var lightDomView;
-
-    beforeEach(() => { lightDomView = new FakeView(); });
-
-    describe("contentTags", () => {
-      it("should collect unconditional content tags", () => {
-        var tag = new FakeContentTag(el('<script></script>'));
-        var shadowDomView = new FakeView([tag]);
-
-        var lightDom = createLightDom(lightDomView, shadowDomView, el("<div></div>"));
-
-        expect(lightDom.contentTags()).toEqual([tag]);
-      });
-
-      it("should collect content tags from ViewContainers", () => {
-        var tag = new FakeContentTag(el('<script></script>'));
-        var vc = new FakeViewContainer(null, null, [new FakeView([tag])]);
-        var shadowDomView = new FakeView([vc]);
-        var lightDom = createLightDom(lightDomView, shadowDomView, el("<div></div>"));
-
-        expect(lightDom.contentTags()).toEqual([tag]);
-      });
-
-      it("should not walk views that can't have content tags", () => {
-        var tag = new FakeContentTag(el('<script></script>'));
-        var shadowDomView = new FakeView([tag], 0);
-
-        var lightDom = createLightDom(lightDomView, shadowDomView, el("<div></div>"));
-
-        expect(lightDom.contentTags()).toEqual([]);
-      });
-    });
-
-    describe("expandedDomNodes", () => {
-      it("should contain root nodes", () => {
-        var lightDomEl = el("<div><a></a></div>");
-        var lightDom = createLightDom(lightDomView, new FakeView(), lightDomEl);
-        expect(toHtml(lightDom.expandedDomNodes())).toEqual(["<a></a>"]);
-      });
-
-      it("should include view container nodes", () => {
-        var lightDomEl = el("<div><template></template></div>");
-        var lightDom = createLightDom(
-            new FakeView([
-              new FakeViewContainer(DOM.firstChild(lightDomEl),  // template element
-                                    [el('<a></a>')]  // light DOM nodes of view container
-                                    )
-            ]),
-            null, lightDomEl);
-
-        expect(toHtml(lightDom.expandedDomNodes())).toEqual(["<a></a>"]);
-      });
-
-      it("should include content nodes", () => {
-        var lightDomEl = el("<div><content></content></div>");
-        var lightDom =
-            createLightDom(new FakeView([
-                             new FakeContentTag(DOM.firstChild(lightDomEl),  // content element
-                                                '',                          // selector
-                                                [el('<a></a>')]  // light DOM nodes of content tag
-                                                )
-                           ]),
-                           null, lightDomEl);
-
-        expect(toHtml(lightDom.expandedDomNodes())).toEqual(["<a></a>"]);
-      });
-
-      it("should work when the element injector array contains nulls", () => {
-        var lightDomEl = el("<div><a></a></div>")
-
-            var lightDomView = new FakeView();
-
-        var lightDom = createLightDom(lightDomView, new FakeView(), lightDomEl);
-
-        expect(toHtml(lightDom.expandedDomNodes())).toEqual(["<a></a>"]);
-      });
-    });
-
-    describe("redistribute", () => {
-      it("should redistribute nodes between content tags with select property set", () => {
-        var contentA = new FakeContentTag(null, "a");
-        var contentB = new FakeContentTag(null, "b");
-
-        var lightDomEl = el("<div><a>1</a><b>2</b><a>3</a></div>")
-
-            var lightDom =
-                createLightDom(lightDomView, new FakeView([contentA, contentB]), lightDomEl);
-
-        lightDom.redistribute();
-
-        expect(toHtml(contentA.nodes())).toEqual(["<a>1</a>", "<a>3</a>"]);
-        expect(toHtml(contentB.nodes())).toEqual(["<b>2</b>"]);
-      });
-
-      it("should support wildcard content tags", () => {
-        var wildcard = new FakeContentTag(null, '');
-        var contentB = new FakeContentTag(null, "b");
-
-        var lightDomEl = el("<div><a>1</a><b>2</b><a>3</a></div>")
-
-            var lightDom =
-                createLightDom(lightDomView, new FakeView([wildcard, contentB]), lightDomEl);
-
-        lightDom.redistribute();
-
-        expect(toHtml(wildcard.nodes())).toEqual(["<a>1</a>", "<b>2</b>", "<a>3</a>"]);
-        expect(toHtml(contentB.nodes())).toEqual([]);
-      });
-
-      it("should remove all nodes if there are no content tags", () => {
-        var lightDomEl = el("<div><a>1</a><b>2</b><a>3</a></div>")
-
-            var lightDom = createLightDom(lightDomView, new FakeView([]), lightDomEl);
-
-        lightDom.redistribute();
-
-        expect(DOM.childNodes(lightDomEl).length).toBe(0);
-      });
-
-      it("should remove all not projected nodes", () => {
-        var lightDomEl = el("<div><a>1</a><b>2</b><a>3</a></div>");
-        var bNode = DOM.childNodes(lightDomEl)[1];
-
-        var lightDom =
-            createLightDom(lightDomView, new FakeView([new FakeContentTag(null, "a")]), lightDomEl);
-
-        lightDom.redistribute();
-
-        expect(bNode.parentNode).toBe(null);
-      });
-
-    });
-  });
-}
-
-function toHtml(nodes) {
-  if (isBlank(nodes)) return [];
-  return ListWrapper.map(nodes, stringifyElement);
-}
diff --git a/modules/angular2/test/render/dom/shadow_dom/native_shadow_dom_strategy_spec.ts b/modules/angular2/test/render/dom/shadow_dom/native_shadow_dom_strategy_spec.ts
deleted file mode 100644
index 48b025665684..000000000000
--- a/modules/angular2/test/render/dom/shadow_dom/native_shadow_dom_strategy_spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-  SpyObject,
-} from 'angular2/test_lib';
-
-import {
-  NativeShadowDomStrategy
-} from 'angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-export function main() {
-  var strategy;
-
-  describe('NativeShadowDomStrategy', () => {
-    beforeEach(() => { strategy = new NativeShadowDomStrategy(); });
-
-    if (DOM.supportsNativeShadowDOM()) {
-      it('should use the native shadow root', () => {
-        var host = el('<div><span>original content</span></div>');
-        expect(strategy.prepareShadowRoot(host)).toBe(DOM.getShadowRoot(host));
-      });
-    }
-  });
-}
diff --git a/modules/angular2/test/render/dom/shadow_dom/shadow_css_spec.ts b/modules/angular2/test/render/dom/shadow_dom/shadow_css_spec.ts
deleted file mode 100644
index 2673ab373d2f..000000000000
--- a/modules/angular2/test/render/dom/shadow_dom/shadow_css_spec.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import {
-  describe,
-  beforeEach,
-  it,
-  expect,
-  ddescribe,
-  iit,
-  SpyObject,
-  el,
-  normalizeCSS
-} from 'angular2/test_lib';
-import {ShadowCss} from 'angular2/src/render/dom/shadow_dom/shadow_css';
-
-import {RegExpWrapper, StringWrapper, isPresent} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-export function main() {
-  describe('ShadowCss', function() {
-
-    function s(css: string, contentAttr: string, hostAttr: string = '') {
-      var shadowCss = new ShadowCss();
-      var shim = shadowCss.shimCssText(css, contentAttr, hostAttr);
-      var nlRegexp = RegExpWrapper.create('\\n');
-      return normalizeCSS(StringWrapper.replaceAll(shim, nlRegexp, ''));
-    }
-
-    it('should handle empty string', () => { expect(s('', 'a')).toEqual(''); });
-
-    it('should add an attribute to every rule', () => {
-      var css = 'one {color: red;}two {color: red;}';
-      var expected = 'one[a] {color:red;}two[a] {color:red;}';
-      expect(s(css, 'a')).toEqual(expected);
-    });
-
-    it('should hanlde invalid css', () => {
-      var css = 'one {color: red;}garbage';
-      var expected = 'one[a] {color:red;}';
-      expect(s(css, 'a')).toEqual(expected);
-    });
-
-    it('should add an attribute to every selector', () => {
-      var css = 'one, two {color: red;}';
-      var expected = 'one[a], two[a] {color:red;}';
-      expect(s(css, 'a')).toEqual(expected);
-    });
-
-    it('should handle media rules', () => {
-      var css = '@media screen and (max-width:800px) {div {font-size:50px;}}';
-      var expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}}';
-      expect(s(css, 'a')).toEqual(expected);
-    });
-
-    it('should handle media rules with simple rules', () => {
-      var css = '@media screen and (max-width: 800px) {div {font-size: 50px;}} div {}';
-      var expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}}div[a] {}';
-      expect(s(css, 'a')).toEqual(expected);
-    });
-
-    // Check that the browser supports unprefixed CSS animation
-    if (isPresent(DOM.defaultDoc().body.style) &&
-        isPresent(DOM.defaultDoc().body.style.animationName)) {
-      it('should handle keyframes rules', () => {
-        var css = '@keyframes foo {0% {transform: translate(-50%) scaleX(0);}}';
-        var passRe = RegExpWrapper.create(
-            '@keyframes foo {\\s*0% {\\s*transform:translate\\(-50%\\) scaleX\\(0\\);\\s*}\\s*}');
-        expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true);
-      });
-    }
-
-    if (DOM.getUserAgent().indexOf('AppleWebKit') > -1) {
-      it('should handle -webkit-keyframes rules', () => {
-        var css = '@-webkit-keyframes foo {0% {-webkit-transform: translate(-50%) scaleX(0);}}';
-        var passRe = RegExpWrapper.create(
-            '@-webkit-keyframes foo {\\s*0% {\\s*(-webkit-)*transform:translate\\(-50%\\) scaleX\\(0\\);\\s*}}');
-        expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true);
-      });
-    }
-
-    it('should handle complicated selectors', () => {
-      expect(s('one::before {}', 'a')).toEqual('one[a]::before {}');
-      expect(s('one two {}', 'a')).toEqual('one[a] two[a] {}');
-      expect(s('one>two {}', 'a')).toEqual('one[a] > two[a] {}');
-      expect(s('one+two {}', 'a')).toEqual('one[a] + two[a] {}');
-      expect(s('one~two {}', 'a')).toEqual('one[a] ~ two[a] {}');
-      var res = s('.one.two > three {}', 'a');  // IE swap classes
-      expect(res == '.one.two[a] > three[a] {}' || res == '.two.one[a] > three[a] {}')
-          .toEqual(true);
-      expect(s('one[attr="value"] {}', 'a')).toEqual('one[attr="value"][a] {}');
-      expect(s('one[attr=value] {}', 'a')).toEqual('one[attr="value"][a] {}');
-      expect(s('one[attr^="value"] {}', 'a')).toEqual('one[attr^="value"][a] {}');
-      expect(s('one[attr$="value"] {}', 'a')).toEqual('one[attr$="value"][a] {}');
-      expect(s('one[attr*="value"] {}', 'a')).toEqual('one[attr*="value"][a] {}');
-      expect(s('one[attr|="value"] {}', 'a')).toEqual('one[attr|="value"][a] {}');
-      expect(s('one[attr] {}', 'a')).toEqual('one[attr][a] {}');
-      expect(s('[is="one"] {}', 'a')).toEqual('[is="one"][a] {}');
-    });
-
-    it('should handle :host', () => {
-      expect(s(':host {}', 'a', 'a-host')).toEqual('[a-host] {}');
-      expect(s(':host(.x,.y) {}', 'a', 'a-host')).toEqual('[a-host].x, [a-host].y {}');
-      expect(s(':host(.x,.y) > .z {}', 'a', 'a-host'))
-          .toEqual('[a-host].x > .z, [a-host].y > .z {}');
-    });
-
-    it('should handle :host-context', () => {
-      expect(s(':host-context(.x) {}', 'a', 'a-host')).toEqual('[a-host].x, .x [a-host] {}');
-      expect(s(':host-context(.x) > .y {}', 'a', 'a-host'))
-          .toEqual('[a-host].x > .y, .x [a-host] > .y {}');
-    });
-
-    it('should support polyfill-next-selector', () => {
-      var css = s("polyfill-next-selector {content: 'x > y'} z {}", 'a');
-      expect(css).toEqual('x[a] > y[a] {}');
-
-      css = s('polyfill-next-selector {content: "x > y"} z {}', 'a');
-      expect(css).toEqual('x[a] > y[a] {}');
-    });
-
-    it('should support polyfill-unscoped-rule', () => {
-      var css = s("polyfill-unscoped-rule {content: '#menu > .bar';color: blue;}", 'a');
-      expect(StringWrapper.contains(css, '#menu > .bar {;color:blue;}')).toBeTruthy();
-
-      css = s('polyfill-unscoped-rule {content: "#menu > .bar";color: blue;}', 'a');
-      expect(StringWrapper.contains(css, '#menu > .bar {;color:blue;}')).toBeTruthy();
-    });
-
-    it('should support polyfill-rule', () => {
-      var css = s("polyfill-rule {content: ':host.foo .bar';color: blue;}", 'a', 'a-host');
-      expect(css).toEqual('[a-host].foo .bar {color:blue;}');
-
-      css = s('polyfill-rule {content: ":host.foo .bar";color:blue;}', 'a', 'a-host');
-      expect(css).toEqual('[a-host].foo .bar {color:blue;}');
-    });
-
-    it('should handle ::shadow', () => {
-      var css = s('x::shadow > y {}', 'a');
-      expect(css).toEqual('x[a] > y[a] {}');
-    });
-
-    it('should handle /deep/', () => {
-      var css = s('x /deep/ y {}', 'a');
-      expect(css).toEqual('x[a] y[a] {}');
-    });
-
-    it('should handle >>>', () => {
-      var css = s('x >>> y {}', 'a');
-      expect(css).toEqual('x[a] y[a] {}');
-    });
-  });
-}
diff --git a/modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.ts b/modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.ts
deleted file mode 100644
index 9c2c12743b45..000000000000
--- a/modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.ts
+++ /dev/null
@@ -1,555 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-  beforeEachBindings,
-  SpyObject,
-} from 'angular2/test_lib';
-
-import {bind} from 'angular2/di';
-import {MapWrapper, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {ViewDefinition, DirectiveMetadata} from 'angular2/src/render/api';
-
-import {ShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/shadow_dom_strategy';
-import {
-  EmulatedScopedShadowDomStrategy
-} from 'angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy';
-import {
-  EmulatedUnscopedShadowDomStrategy
-} from 'angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
-import {
-  NativeShadowDomStrategy
-} from 'angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy';
-
-import {DomTestbed, elRef} from './dom_testbed';
-
-export function main() {
-  describe('ShadowDom integration tests', function() {
-    var styleHost = DOM.createElement('div');
-
-    var strategies = {
-      "scoped": bind(ShadowDomStrategy).toValue(new EmulatedScopedShadowDomStrategy(styleHost)),
-      "unscoped": bind(ShadowDomStrategy).toValue(new EmulatedUnscopedShadowDomStrategy(styleHost))
-    };
-    if (DOM.supportsNativeShadowDOM()) {
-      StringMapWrapper.set(strategies, "native",
-                           bind(ShadowDomStrategy).toValue(new NativeShadowDomStrategy()));
-    }
-
-    StringMapWrapper.forEach(strategies, (strategyBinding, name) => {
-      describe(`${name} shadow dom strategy`, () => {
-        beforeEachBindings(() => { return [strategyBinding, DomTestbed]; });
-
-        // GH-2095 - https://github.com/angular/angular/issues/2095
-        // important as we are adding a content end element during compilation,
-        // which could skrew up text node indices.
-        it('should support text nodes after content tags',
-           inject([DomTestbed, AsyncTestCompleter], (tb, async) => {
-             tb.compileAll([
-                 simple,
-                 new ViewDefinition({
-                   componentId: 'simple',
-                   template: '<content></content><p>P,</p>{{a}}',
-                   directives: []
-                 })
-               ])
-                 .then((protoViewDtos) => {
-                   var rootView = tb.createRootView(protoViewDtos[0]);
-                   var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
-
-                   tb.renderer.setText(cmpView.viewRef, 0, 'text');
-                   expect(tb.rootEl).toHaveText('P,text');
-                   async.done();
-                 });
-           }));
-
-        // important as we are moving style tags around during compilation,
-        // which could skrew up text node indices.
-        it('should support text nodes after style tags',
-           inject([DomTestbed, AsyncTestCompleter], (tb, async) => {
-             tb.compileAll([
-                 simple,
-                 new ViewDefinition({
-                   componentId: 'simple',
-                   template: '<style></style><p>P,</p>{{a}}',
-                   directives: []
-                 })
-               ])
-                 .then((protoViewDtos) => {
-                   var rootView = tb.createRootView(protoViewDtos[0]);
-                   var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
-
-                   tb.renderer.setText(cmpView.viewRef, 0, 'text');
-                   expect(tb.rootEl).toHaveText('P,text');
-                   async.done();
-                 });
-           }));
-
-        it('should support simple components',
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<simple>' +
-                                 '<div>A</div>' +
-                                 '</simple>',
-                   directives: [simple]
-                 }),
-                 simpleTemplate
-               ])
-                 .then((protoViews) => {
-                   tb.createRootViews(protoViews);
-
-                   expect(tb.rootEl).toHaveText('SIMPLE(A)');
-
-                   async.done();
-                 });
-           }));
-
-        it('should support simple components with text interpolation as direct children',
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<simple>' +
-                                 '{{text}}' +
-                                 '</simple>',
-                   directives: [simple]
-                 }),
-                 simpleTemplate
-               ])
-                 .then((protoViews) => {
-                   var cmpView = tb.createRootViews(protoViews)[1];
-                   tb.renderer.setText(cmpView.viewRef, 0, 'A');
-
-                   expect(tb.rootEl).toHaveText('SIMPLE(A)');
-
-                   async.done();
-                 });
-           }));
-
-        it('should not show the light dom even if there is not content tag',
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<empty>' +
-                                 '<div>A</div>' +
-                                 '</empty>',
-                   directives: [empty]
-                 }),
-                 emptyTemplate
-               ])
-                 .then((protoViews) => {
-                   tb.createRootViews(protoViews);
-
-                   expect(tb.rootEl).toHaveText('');
-
-                   async.done();
-                 });
-           }));
-
-        it('should support dynamic components',
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<dynamic>' +
-                                 '<div>A</div>' +
-                                 '</dynamic>',
-                   directives: [dynamicComponent]
-                 }),
-                 simpleTemplate
-               ])
-                 .then((protoViews) => {
-                   var views = tb.createRootViews(ListWrapper.slice(protoViews, 0, 2));
-                   tb.createComponentView(views[1].viewRef, 0, protoViews[2]);
-
-                   expect(tb.rootEl).toHaveText('SIMPLE(A)');
-
-                   async.done();
-                 });
-           }));
-
-        it('should support multiple content tags',
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<multiple-content-tags>' +
-                                 '<div>B</div>' +
-                                 '<div>C</div>' +
-                                 '<div class="left">A</div>' +
-                                 '</multiple-content-tags>',
-                   directives: [multipleContentTagsComponent]
-                 }),
-                 multipleContentTagsTemplate
-               ])
-                 .then((protoViews) => {
-                   tb.createRootViews(protoViews);
-
-                   expect(tb.rootEl).toHaveText('(A, BC)');
-
-                   async.done();
-                 });
-           }));
-
-        it('should redistribute only direct children',
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<multiple-content-tags>' +
-                                 '<div>B<div class="left">A</div></div>' +
-                                 '<div>C</div>' +
-                                 '</multiple-content-tags>',
-                   directives: [multipleContentTagsComponent]
-                 }),
-                 multipleContentTagsTemplate
-               ])
-                 .then((protoViews) => {
-                   tb.createRootViews(protoViews);
-
-                   expect(tb.rootEl).toHaveText('(, BAC)');
-
-                   async.done();
-                 });
-           }));
-
-        it("should redistribute direct child viewcontainers when the light dom changes",
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<multiple-content-tags>' +
-                                 '<div><div template="manual" class="left">A</div></div>' +
-                                 '<div>B</div>' +
-                                 '</multiple-content-tags>',
-                   directives: [multipleContentTagsComponent, manualViewportDirective]
-                 }),
-                 multipleContentTagsTemplate
-               ])
-                 .then((protoViews) => {
-                   var views = tb.createRootViews(protoViews);
-                   var childProtoView = protoViews[1].elementBinders[1].nestedProtoView;
-                   expect(tb.rootEl).toHaveText('(, B)');
-
-                   var childView = tb.createViewInContainer(views[1].viewRef, 1, 0, childProtoView);
-
-                   expect(tb.rootEl).toHaveText('(, AB)');
-
-                   tb.destroyViewInContainer(views[1].viewRef, 1, 0, childView.viewRef);
-
-                   expect(tb.rootEl).toHaveText('(, B)');
-
-                   async.done();
-                 });
-           }));
-
-        it("should redistribute when the light dom changes",
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<multiple-content-tags>' +
-                                 '<div template="manual" class="left">A</div>' +
-                                 '<div>B</div>' +
-                                 '</multiple-content-tags>',
-                   directives: [multipleContentTagsComponent, manualViewportDirective]
-                 }),
-                 multipleContentTagsTemplate
-               ])
-                 .then((protoViews) => {
-                   var views = tb.createRootViews(protoViews);
-                   var childProtoView = protoViews[1].elementBinders[1].nestedProtoView;
-
-                   expect(tb.rootEl).toHaveText('(, B)');
-
-                   var childView = tb.createViewInContainer(views[1].viewRef, 1, 0, childProtoView);
-
-                   expect(tb.rootEl).toHaveText('(A, B)');
-
-                   tb.destroyViewInContainer(views[1].viewRef, 1, 0, childView.viewRef);
-
-                   expect(tb.rootEl).toHaveText('(, B)');
-
-                   async.done();
-                 });
-           }));
-
-        it("should support nested components",
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<outer-with-indirect-nested>' +
-                                 '<div>A</div>' +
-                                 '<div>B</div>' +
-                                 '</outer-with-indirect-nested>',
-                   directives: [outerWithIndirectNestedComponent]
-                 }),
-                 outerWithIndirectNestedTemplate,
-                 simpleTemplate
-               ])
-                 .then((protoViews) => {
-                   tb.createRootViews(protoViews);
-
-                   expect(tb.rootEl).toHaveText('OUTER(SIMPLE(AB))');
-
-                   async.done();
-                 });
-           }));
-
-        it("should support nesting with content being direct child of a nested component",
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<outer>' +
-                                 '<div template="manual" class="left">A</div>' +
-                                 '<div>B</div>' +
-                                 '<div>C</div>' +
-                                 '</outer>',
-                   directives: [outerComponent, manualViewportDirective]
-                 }),
-                 outerTemplate,
-                 innerTemplate,
-                 innerInnerTemplate
-               ])
-                 .then((protoViews) => {
-                   var views = tb.createRootViews(protoViews);
-                   var childProtoView = protoViews[1].elementBinders[1].nestedProtoView;
-
-                   expect(tb.rootEl).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
-
-                   tb.createViewInContainer(views[1].viewRef, 1, 0, childProtoView);
-
-                   expect(tb.rootEl).toHaveText('OUTER(INNER(INNERINNER(A,BC)))');
-                   async.done();
-                 });
-           }));
-
-        it('should redistribute when the shadow dom changes',
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '<conditional-content>' +
-                                 '<div class="left">A</div>' +
-                                 '<div>B</div>' +
-                                 '<div>C</div>' +
-                                 '</conditional-content>',
-                   directives: [conditionalContentComponent]
-                 }),
-                 conditionalContentTemplate
-               ])
-                 .then((protoViews) => {
-                   var views = tb.createRootViews(protoViews);
-                   var childProtoView = protoViews[2].elementBinders[0].nestedProtoView;
-
-                   expect(tb.rootEl).toHaveText('(, ABC)');
-
-                   var childView = tb.createViewInContainer(views[2].viewRef, 0, 0, childProtoView);
-
-                   expect(tb.rootEl).toHaveText('(A, BC)');
-
-                   tb.destroyViewInContainer(views[2].viewRef, 0, 0, childView.viewRef);
-
-                   expect(tb.rootEl).toHaveText('(, ABC)');
-
-                   async.done();
-                 });
-           }));
-
-        it("should support tabs with view caching",
-           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
-             tb.compileAll([
-                 mainDir,
-                 new ViewDefinition({
-                   componentId: 'main',
-                   template: '(<tab><span>0</span></tab>' +
-                                 '<tab><span>1</span></tab>' +
-                                 '<tab><span>2</span></tab>)',
-                   directives: [tabComponent]
-                 }),
-                 tabTemplate
-               ])
-                 .then((protoViews) => {
-                   var views = tb.createRootViews(ListWrapper.slice(protoViews, 0, 2));
-                   var tabProtoView = protoViews[2];
-                   var tabChildProtoView = tabProtoView.elementBinders[0].nestedProtoView;
-
-                   var tab1View = tb.createComponentView(views[1].viewRef, 0, tabProtoView);
-                   var tab2View = tb.createComponentView(views[1].viewRef, 1, tabProtoView);
-                   var tab3View = tb.createComponentView(views[1].viewRef, 2, tabProtoView);
-
-                   expect(tb.rootEl).toHaveText('()');
-
-                   var tabChildView =
-                       tb.createViewInContainer(tab1View.viewRef, 0, 0, tabChildProtoView);
-
-                   expect(tb.rootEl).toHaveText('(TAB(0))');
-
-                   tb.renderer.dehydrateView(tabChildView.viewRef);
-                   tb.renderer.detachViewInContainer(elRef(tab1View.viewRef, 0), 0,
-                                                     tabChildView.viewRef);
-
-                   tb.renderer.attachViewInContainer(elRef(tab2View.viewRef, 0), 0,
-                                                     tabChildView.viewRef);
-                   tb.renderer.hydrateView(tabChildView.viewRef);
-
-                   expect(tb.rootEl).toHaveText('(TAB(1))');
-
-                   tb.renderer.dehydrateView(tabChildView.viewRef);
-                   tb.renderer.detachViewInContainer(elRef(tab2View.viewRef, 0), 0,
-                                                     tabChildView.viewRef);
-
-                   tb.renderer.attachViewInContainer(elRef(tab3View.viewRef, 0), 0,
-                                                     tabChildView.viewRef);
-                   tb.renderer.hydrateView(tabChildView.viewRef);
-
-                   expect(tb.rootEl).toHaveText('(TAB(2))');
-
-                   async.done();
-                 });
-           }));
-
-        // Implement once ElementRef support changing a class
-        // it("should redistribute when a class has been added or removed");
-        // it('should not lose focus', () => {
-        //  var temp = `<simple>aaa<input type="text" id="focused-input" ng-class="{'aClass' :
-        //  showClass}"> bbb</simple>`;
-        //
-        //  compile(temp, (view, lc) => {
-        //    var input = view.rootNodes[1];
-        //    input.focus();
-        //
-        //    expect(document.activeElement.id).toEqual("focused-input");
-        //
-        //    // update class of input
-        //
-        //    expect(document.activeElement.id).toEqual("focused-input");
-        //  });
-        //});
-      });
-    });
-
-  });
-}
-
-
-var mainDir = DirectiveMetadata.create(
-    {selector: 'main', id: 'main', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var simple = DirectiveMetadata.create(
-    {selector: 'simple', id: 'simple', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var empty = DirectiveMetadata.create(
-    {selector: 'empty', id: 'empty', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var dynamicComponent = DirectiveMetadata.create(
-    {selector: 'dynamic', id: 'dynamic', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var multipleContentTagsComponent = DirectiveMetadata.create({
-  selector: 'multiple-content-tags',
-  id: 'multiple-content-tags',
-  type: DirectiveMetadata.COMPONENT_TYPE
-});
-
-var manualViewportDirective = DirectiveMetadata.create(
-    {selector: '[manual]', id: 'manual', type: DirectiveMetadata.DIRECTIVE_TYPE});
-
-var outerWithIndirectNestedComponent = DirectiveMetadata.create({
-  selector: 'outer-with-indirect-nested',
-  id: 'outer-with-indirect-nested',
-  type: DirectiveMetadata.COMPONENT_TYPE
-});
-
-var outerComponent = DirectiveMetadata.create(
-    {selector: 'outer', id: 'outer', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var innerComponent = DirectiveMetadata.create(
-    {selector: 'inner', id: 'inner', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var innerInnerComponent = DirectiveMetadata.create(
-    {selector: 'innerinner', id: 'innerinner', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var conditionalContentComponent = DirectiveMetadata.create({
-  selector: 'conditional-content',
-  id: 'conditional-content',
-  type: DirectiveMetadata.COMPONENT_TYPE
-});
-
-var autoViewportDirective = DirectiveMetadata.create(
-    {selector: '[auto]', id: 'auto', properties: ['auto'], type: DirectiveMetadata.DIRECTIVE_TYPE});
-
-var tabComponent =
-    DirectiveMetadata.create({selector: 'tab', id: 'tab', type: DirectiveMetadata.COMPONENT_TYPE});
-
-var simpleTemplate = new ViewDefinition(
-    {componentId: 'simple', template: 'SIMPLE(<content></content>)', directives: []});
-
-var emptyTemplate = new ViewDefinition({componentId: 'empty', template: '', directives: []});
-
-var multipleContentTagsTemplate = new ViewDefinition({
-  componentId: 'multiple-content-tags',
-  template: '(<content select=".left"></content>, <content></content>)',
-  directives: []
-});
-
-var outerWithIndirectNestedTemplate = new ViewDefinition({
-  componentId: 'outer-with-indirect-nested',
-  template: 'OUTER(<simple><div><content></content></div></simple>)',
-  directives: [simple]
-});
-
-var outerTemplate = new ViewDefinition({
-  componentId: 'outer',
-  template: 'OUTER(<inner><content></content></inner>)',
-  directives: [innerComponent]
-});
-
-var innerTemplate = new ViewDefinition({
-  componentId: 'inner',
-  template: 'INNER(<innerinner><content></content></innerinner>)',
-  directives: [innerInnerComponent]
-});
-
-var innerInnerTemplate = new ViewDefinition({
-  componentId: 'innerinner',
-  template: 'INNERINNER(<content select=".left"></content>,<content></content>)',
-  directives: []
-});
-
-var conditionalContentTemplate = new ViewDefinition({
-  componentId: 'conditional-content',
-  template:
-      '<div>(<div *auto="cond"><content select=".left"></content></div>, <content></content>)</div>',
-  directives: [autoViewportDirective]
-});
-
-var tabTemplate = new ViewDefinition({
-  componentId: 'tab',
-  template: '<div><div *auto="cond">TAB(<content></content>)</div></div>',
-  directives: [autoViewportDirective]
-});
diff --git a/modules/angular2/test/render/dom/view/proto_view_builder_spec.ts b/modules/angular2/test/render/dom/view/proto_view_builder_spec.ts
deleted file mode 100644
index 81b359656739..000000000000
--- a/modules/angular2/test/render/dom/view/proto_view_builder_spec.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
-  describe,
-  ddescribe,
-  it,
-  iit,
-  xit,
-  xdescribe,
-  expect,
-  beforeEach,
-  el,
-  IS_DARTIUM
-} from 'angular2/test_lib';
-
-import {ProtoViewBuilder} from 'angular2/src/render/dom/view/proto_view_builder';
-import {ASTWithSource, AST} from 'angular2/change_detection';
-import {PropertyBindingType, ViewType} from 'angular2/src/render/api';
-
-export function main() {
-  function emptyExpr() { return new ASTWithSource(new AST(), 'empty', 'empty'); }
-
-  describe('ProtoViewBuilder', () => {
-    var builder;
-    beforeEach(() => { builder = new ProtoViewBuilder(el('<div/>'), ViewType.EMBEDDED); });
-
-    describe('verification of properties', () => {
-
-      it('should throw for unknown properties', () => {
-        builder.bindElement(el('<div/>')).bindProperty('unknownProperty', emptyExpr());
-        expect(() => builder.build())
-            .toThrowError(
-                `Can't bind to 'unknownProperty' since it isn't a know property of the 'div' element and there are no matching directives with a corresponding property`);
-      });
-
-      it('should should allow unknown properties if a directive uses it', () => {
-        builder.bindElement(el('<div/>')).bindProperty('unknownProperty', emptyExpr());
-        expect(() => builder.build())
-            .toThrowError(
-                `Can't bind to 'unknownProperty' since it isn't a know property of the 'div' element and there are no matching directives with a corresponding property`);
-      });
-
-      it('should allow unknown properties on custom elements', () => {
-        var binder = builder.bindElement(el('<some-custom/>'));
-        binder.bindProperty('unknownProperty', emptyExpr());
-        binder.bindDirective(0).bindProperty('someDirProperty', emptyExpr(), 'unknownProperty');
-        expect(() => builder.build()).not.toThrow();
-      });
-
-      it('should throw for unkown properties on custom elements if there is an ng component', () => {
-        var binder = builder.bindElement(el('<some-custom/>'));
-        binder.bindProperty('unknownProperty', emptyExpr());
-        binder.setComponentId('someComponent');
-        expect(() => builder.build())
-            .toThrowError(
-                `Can't bind to 'unknownProperty' since it isn't a know property of the 'some-custom' element and there are no matching directives with a corresponding property`);
-      });
-
-    });
-
-    describe('property normalization', () => {
-      it('should normalize "innerHtml" to "innerHTML"', () => {
-        builder.bindElement(el('<div/>')).bindProperty('innerHtml', emptyExpr());
-        var pv = builder.build();
-        expect(pv.elementBinders[0].propertyBindings[0].property).toEqual('innerHTML');
-      });
-
-      it('should normalize "tabindex" to "tabIndex"', () => {
-        builder.bindElement(el('<div/>')).bindProperty('tabindex', emptyExpr());
-        var pv = builder.build();
-        expect(pv.elementBinders[0].propertyBindings[0].property).toEqual('tabIndex');
-      });
-
-      it('should normalize "readonly" to "readOnly"', () => {
-        builder.bindElement(el('<input/>')).bindProperty('readonly', emptyExpr());
-        var pv = builder.build();
-        expect(pv.elementBinders[0].propertyBindings[0].property).toEqual('readOnly');
-      });
-
-    });
-
-    describe('property binding types', () => {
-      it('should detect property names', () => {
-        builder.bindElement(el('<div/>')).bindProperty('tabindex', emptyExpr());
-        var pv = builder.build();
-        expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.PROPERTY);
-      });
-
-      it('should detect attribute names', () => {
-        builder.bindElement(el('<div/>')).bindProperty('attr.someName', emptyExpr());
-        var pv = builder.build();
-        expect(pv.elementBinders[0].propertyBindings[0].type)
-            .toEqual(PropertyBindingType.ATTRIBUTE);
-      });
-
-      it('should detect class names', () => {
-        builder.bindElement(el('<div/>')).bindProperty('class.someName', emptyExpr());
-        var pv = builder.build();
-        expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.CLASS);
-      });
-
-      it('should detect style names', () => {
-        builder.bindElement(el('<div/>')).bindProperty('style.someName', emptyExpr());
-        var pv = builder.build();
-        expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.STYLE);
-      });
-
-      it('should detect style units', () => {
-        builder.bindElement(el('<div/>')).bindProperty('style.someName.someUnit', emptyExpr());
-        var pv = builder.build();
-        expect(pv.elementBinders[0].propertyBindings[0].unit).toEqual('someUnit');
-      });
-    });
-
-
-  });
-}
diff --git a/modules/angular2/test/render/dom/view/view_spec.ts b/modules/angular2/test/render/dom/view/view_spec.ts
deleted file mode 100644
index b13692364bbb..000000000000
--- a/modules/angular2/test/render/dom/view/view_spec.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  beforeEachBindings,
-  it,
-  xit,
-  SpyObject,
-  proxy
-} from 'angular2/test_lib';
-import {isBlank} from 'angular2/src/facade/lang';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {DomProtoView} from 'angular2/src/render/dom/view/proto_view';
-import {ElementBinder} from 'angular2/src/render/dom/view/element_binder';
-import {DomView} from 'angular2/src/render/dom/view/view';
-import {DomElement} from 'angular2/src/render/dom/view/element';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-export function main() {
-  describe('DomView', () => {
-    function createProtoView(binders = null) {
-      if (isBlank(binders)) {
-        binders = [];
-      }
-      var rootEl = el('<div></div>');
-      return new DomProtoView({
-        element: rootEl,
-        elementBinders: binders,
-        transitiveContentTagCount: 0,
-        boundTextNodeCount: 0
-      });
-    }
-
-    function createView(pv = null, boundElementCount = 0) {
-      if (isBlank(pv)) {
-        pv = createProtoView(ListWrapper.createFixedSize(boundElementCount));
-      }
-      var root = el('<div><div></div></div>');
-      var boundElements = [];
-      for (var i = 0; i < boundElementCount; i++) {
-        boundElements.push(new DomElement(pv.elementBinders[i], el('<span></span'), null));
-      }
-      return new DomView(pv, [DOM.childNodes(root)[0]], [], boundElements);
-    }
-
-    function createElementBinder(parentIndex: number = 0, distanceToParent: number = 1) {
-      return new ElementBinder(
-          {parentIndex: parentIndex, distanceToParent: distanceToParent, textNodeIndices: []});
-    }
-
-    describe('getDirectParentElement', () => {
-
-      it('should return the DomElement of the direct parent', () => {
-        var pv = createProtoView([createElementBinder(), createElementBinder(0, 1)]);
-        var view = createView(pv, 2);
-        expect(view.getDirectParentElement(1)).toBe(view.boundElements[0]);
-      });
-
-      it('should return null if the direct parent is not bound', () => {
-        var pv = createProtoView(
-            [createElementBinder(), createElementBinder(), createElementBinder(0, 2)]);
-        var view = createView(pv, 3);
-        expect(view.getDirectParentElement(2)).toBe(null);
-      });
-
-    });
-
-    describe('setElementProperty', () => {
-      var el, view;
-      beforeEach(() => {
-        view = createView(null, 1);
-        el = view.boundElements[0].element;
-      });
-
-      it('should update the property value', () => {
-        view.setElementProperty(0, 'title', 'Hello');
-        expect(el.title).toEqual('Hello');
-      });
-
-    });
-
-    describe('setElementAttribute', () => {
-      var el, view;
-      beforeEach(() => {
-        view = createView(null, 1);
-        el = view.boundElements[0].element;
-      });
-
-      it('should update and remove an attribute', () => {
-        view.setElementAttribute(0, 'role', 'button');
-        expect(DOM.getAttribute(el, 'role')).toEqual('button');
-        view.setElementAttribute(0, 'role', null);
-        expect(DOM.getAttribute(el, 'role')).toEqual(null);
-      });
-
-      it('should de-normalize attribute names', () => {
-        view.setElementAttribute(0, 'ariaLabel', 'fancy button');
-        expect(DOM.getAttribute(el, 'aria-label')).toEqual('fancy button');
-      });
-    });
-
-    describe('setElementClass', () => {
-      var el, view;
-      beforeEach(() => {
-        view = createView(null, 1);
-        el = view.boundElements[0].element;
-      });
-
-      it('should set and remove a class', () => {
-        view.setElementClass(0, 'active', true);
-        expect(DOM.hasClass(el, 'active')).toEqual(true);
-
-        view.setElementClass(0, 'active', false);
-        expect(DOM.hasClass(el, 'active')).toEqual(false);
-      });
-
-      it('should de-normalize class names', () => {
-        view.setElementClass(0, 'veryActive', true);
-        expect(DOM.hasClass(el, 'very-active')).toEqual(true);
-
-        view.setElementClass(0, 'veryActive', false);
-        expect(DOM.hasClass(el, 'very-active')).toEqual(false);
-      });
-    });
-
-    describe('setElementStyle', () => {
-      var el, view;
-      beforeEach(() => {
-        view = createView(null, 1);
-        el = view.boundElements[0].element;
-      });
-
-      it('should set and remove styles', () => {
-        view.setElementStyle(0, 'width', '40px');
-        expect(DOM.getStyle(el, 'width')).toEqual('40px');
-
-        view.setElementStyle(0, 'width', null);
-        expect(DOM.getStyle(el, 'width')).toEqual('');
-      });
-
-      it('should de-normalize style names', () => {
-        view.setElementStyle(0, 'textAlign', 'right');
-        expect(DOM.getStyle(el, 'text-align')).toEqual('right');
-        view.setElementStyle(0, 'textAlign', null);
-        expect(DOM.getStyle(el, 'text-align')).toEqual('');
-      });
-
-    });
-
-  });
-}
diff --git a/modules/angular2/test/render/xhr_impl_spec.ts b/modules/angular2/test/render/xhr_impl_spec.ts
deleted file mode 100644
index 90d6840ad4fb..000000000000
--- a/modules/angular2/test/render/xhr_impl_spec.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit
-} from 'angular2/test_lib';
-
-import {XHRImpl} from 'angular2/src/render/xhr_impl';
-import {PromiseWrapper} from 'angular2/src/facade/async';
-
-export function main() {
-  describe('XHRImpl', () => {
-    var xhr: XHRImpl;
-    var url200 = '/base/modules/angular2/test/services/static_assets/200.html';
-    var url404 = '/base/modules/angular2/test/services/static_assets/404.html';
-
-    beforeEach(() => { xhr = new XHRImpl(); });
-
-    it('should resolve the Promise with the file content on success',
-       inject([AsyncTestCompleter], (async) => {
-         xhr.get(url200).then((text) => {
-           expect(text.trim()).toEqual('<p>hey</p>');
-           async.done();
-         });
-       }));
-
-    it('should reject the Promise on failure', inject([AsyncTestCompleter], (async) => {
-         PromiseWrapper.catchError(xhr.get(url404), (e) => {
-           expect(e).toEqual(`Failed to load ${url404}`);
-           async.done();
-           return null;
-         });
-       }));
-  });
-}
diff --git a/modules/angular2/test/render/xhr_mock_spec.ts b/modules/angular2/test/render/xhr_mock_spec.ts
deleted file mode 100644
index 2eed4482faf0..000000000000
--- a/modules/angular2/test/render/xhr_mock_spec.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  it,
-} from 'angular2/test_lib';
-import {MockXHR} from 'angular2/src/render/xhr_mock';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-import {isPresent} from 'angular2/src/facade/lang';
-
-export function main() {
-  describe('MockXHR', () => {
-    var xhr: MockXHR;
-
-    beforeEach(() => { xhr = new MockXHR(); });
-
-    function expectResponse(request: Promise<string>, url: string, response: string, done = null) {
-      function onResponse(text: string): string {
-        if (response === null) {
-          throw `Unexpected response ${url} -> ${text}`;
-        } else {
-          expect(text).toEqual(response);
-          if (isPresent(done)) done();
-        }
-        return text;
-      }
-
-      function onError(error: string): string {
-        if (response !== null) {
-          throw `Unexpected error ${url}`;
-        } else {
-          expect(error).toEqual(`Failed to load ${url}`);
-          if (isPresent(done)) done();
-        }
-        return error;
-      }
-
-      PromiseWrapper.then(request, onResponse, onError);
-    }
-
-    it('should return a response from the definitions', inject([AsyncTestCompleter], (async) => {
-         var url = '/foo';
-         var response = 'bar';
-         xhr.when(url, response);
-         expectResponse(xhr.get(url), url, response, () => async.done());
-         xhr.flush();
-       }));
-
-    it('should return an error from the definitions', inject([AsyncTestCompleter], (async) => {
-         var url = '/foo';
-         var response = null;
-         xhr.when(url, response);
-         expectResponse(xhr.get(url), url, response, () => async.done());
-         xhr.flush();
-       }));
-
-    it('should return a response from the expectations', inject([AsyncTestCompleter], (async) => {
-         var url = '/foo';
-         var response = 'bar';
-         xhr.expect(url, response);
-         expectResponse(xhr.get(url), url, response, () => async.done());
-         xhr.flush();
-       }));
-
-    it('should return an error from the expectations', inject([AsyncTestCompleter], (async) => {
-         var url = '/foo';
-         var response = null;
-         xhr.expect(url, response);
-         expectResponse(xhr.get(url), url, response, () => async.done());
-         xhr.flush();
-       }));
-
-    it('should not reuse expectations', () => {
-      var url = '/foo';
-      var response = 'bar';
-      xhr.expect(url, response);
-      xhr.get(url);
-      xhr.get(url);
-      expect(() => { xhr.flush(); }).toThrowError('Unexpected request /foo');
-    });
-
-    it('should return expectations before definitions', inject([AsyncTestCompleter], (async) => {
-         var url = '/foo';
-         xhr.when(url, 'when');
-         xhr.expect(url, 'expect');
-         expectResponse(xhr.get(url), url, 'expect');
-         expectResponse(xhr.get(url), url, 'when', () => async.done());
-         xhr.flush();
-       }));
-
-    it('should throw when there is no definitions or expectations', () => {
-      xhr.get('/foo');
-      expect(() => { xhr.flush(); }).toThrowError('Unexpected request /foo');
-    });
-
-    it('should throw when flush is called without any pending requests',
-       () => { expect(() => { xhr.flush(); }).toThrowError('No pending requests to flush'); });
-
-    it('should throw on unstatisfied expectations', () => {
-      xhr.expect('/foo', 'bar');
-      xhr.when('/bar', 'foo');
-      xhr.get('/bar');
-      expect(() => { xhr.flush(); }).toThrowError('Unsatisfied requests: /foo');
-    });
-  });
-}
diff --git a/modules/angular2/test/router/location_spec.ts b/modules/angular2/test/router/location_spec.ts
deleted file mode 100644
index f92e6f2d236e..000000000000
--- a/modules/angular2/test/router/location_spec.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import {
-  AsyncTestCompleter,
-  describe,
-  proxy,
-  it,
-  iit,
-  ddescribe,
-  expect,
-  inject,
-  beforeEach,
-  beforeEachBindings,
-  SpyObject
-} from 'angular2/test_lib';
-
-import {Injector, bind} from 'angular2/di';
-import {CONST_EXPR} from 'angular2/src/facade/lang';
-import {Location, appBaseHrefToken} from 'angular2/src/router/location';
-import {LocationStrategy} from 'angular2/src/router/location_strategy';
-import {MockLocationStrategy} from 'angular2/src/mock/mock_location_strategy';
-
-export function main() {
-  describe('Location', () => {
-
-    var locationStrategy, location;
-
-    function makeLocation(baseHref: string = '/my/app', binding: any = CONST_EXPR([])): Location {
-      locationStrategy = new MockLocationStrategy();
-      locationStrategy.internalBaseHref = baseHref;
-      let injector = Injector.resolveAndCreate(
-          [Location, bind(LocationStrategy).toValue(locationStrategy), binding]);
-      return location = injector.get(Location);
-    }
-
-    beforeEach(makeLocation);
-
-    it('should normalize relative urls on navigate', () => {
-      location.go('user/btford');
-      expect(locationStrategy.path()).toEqual('/my/app/user/btford');
-    });
-
-    it('should not prepend urls with starting slash when an empty URL is provided',
-       () => { expect(location.normalizeAbsolutely('')).toEqual(locationStrategy.getBaseHref()); });
-
-    it('should not prepend path with an extra slash when a baseHref has a trailing slash', () => {
-      let location = makeLocation('/my/slashed/app/');
-      expect(location.normalizeAbsolutely('/page')).toEqual('/my/slashed/app/page');
-    });
-
-    it('should not append urls with leading slash on navigate', () => {
-      location.go('/my/app/user/btford');
-      expect(locationStrategy.path()).toEqual('/my/app/user/btford');
-    });
-
-    it('should remove index.html from base href', () => {
-      let location = makeLocation('/my/app/index.html');
-      location.go('user/btford');
-      expect(locationStrategy.path()).toEqual('/my/app/user/btford');
-    });
-
-    it('should normalize urls on popstate', inject([AsyncTestCompleter], (async) => {
-         locationStrategy.simulatePopState('/my/app/user/btford');
-         location.subscribe((ev) => {
-           expect(ev['url']).toEqual('/user/btford');
-           async.done();
-         })
-       }));
-
-    it('should normalize location path', () => {
-      locationStrategy.internalPath = '/my/app/user/btford';
-      expect(location.path()).toEqual('/user/btford');
-    });
-
-    it('should use optional base href param', () => {
-      let location = makeLocation('/', bind(appBaseHrefToken).toValue('/my/custom/href'));
-      location.go('user/btford');
-      expect(locationStrategy.path()).toEqual('/my/custom/href/user/btford');
-    });
-  });
-}
diff --git a/modules/angular2/test/router/outlet_spec.ts b/modules/angular2/test/router/outlet_spec.ts
deleted file mode 100644
index 207febb72adb..000000000000
--- a/modules/angular2/test/router/outlet_spec.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-import {
-  AsyncTestCompleter,
-  TestComponentBuilder,
-  asNativeElements,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  beforeEachBindings,
-  it,
-  xit
-} from 'angular2/test_lib';
-
-import {Injector, bind} from 'angular2/di';
-import {Component, View} from 'angular2/src/core/annotations/decorators';
-import * as annotations from 'angular2/src/core/annotations_impl/view';
-import {CONST} from 'angular2/src/facade/lang';
-
-import {RootRouter} from 'angular2/src/router/router';
-import {Pipeline} from 'angular2/src/router/pipeline';
-import {Router, RouterOutlet, RouterLink, RouteParams} from 'angular2/router';
-import {RouteConfig} from 'angular2/src/router/route_config_decorator';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {SpyLocation} from 'angular2/src/mock/location_mock';
-import {Location} from 'angular2/src/router/location';
-import {RouteRegistry} from 'angular2/src/router/route_registry';
-import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
-
-var teamCmpCount;
-
-export function main() {
-  describe('Outlet Directive', () => {
-
-    var tcb: TestComponentBuilder;
-    var rootTC, rtr, location;
-
-    beforeEachBindings(() => [
-      Pipeline,
-      bind(RouteRegistry).toFactory(() => new RouteRegistry(MyComp)),
-      DirectiveResolver,
-      bind(Location).toClass(SpyLocation),
-      bind(Router)
-          .toFactory((registry, pipeline,
-                      location) => { return new RootRouter(registry, pipeline, location, MyComp); },
-                     [RouteRegistry, Pipeline, Location])
-    ]);
-
-    beforeEach(inject([TestComponentBuilder, Router, Location], (tcBuilder, router, loc) => {
-      tcb = tcBuilder;
-      rtr = router;
-      location = loc;
-      teamCmpCount = 0;
-    }));
-
-    function compile(template: string = "<router-outlet></router-outlet>") {
-      return tcb.overrideView(MyComp, new annotations.View({
-                  template: ('<div>' + template + '</div>'),
-                  directives: [RouterOutlet, RouterLink]
-                }))
-          .createAsync(MyComp)
-          .then((tc) => { rootTC = tc; });
-    }
-
-    it('should work in a simple case', inject([AsyncTestCompleter], (async) => {
-         compile()
-             .then((_) => rtr.config({'path': '/test', 'component': HelloCmp}))
-             .then((_) => rtr.navigate('/test'))
-             .then((_) => {
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('hello');
-               async.done();
-             });
-       }));
-
-
-    it('should navigate between components with different parameters',
-       inject([AsyncTestCompleter], (async) => {
-         compile()
-             .then((_) => rtr.config({'path': '/user/:name', 'component': UserCmp}))
-             .then((_) => rtr.navigate('/user/brian'))
-             .then((_) => {
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('hello brian');
-             })
-             .then((_) => rtr.navigate('/user/igor'))
-             .then((_) => {
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('hello igor');
-               async.done();
-             });
-       }));
-
-
-    it('should work with child routers', inject([AsyncTestCompleter], (async) => {
-         compile('outer { <router-outlet></router-outlet> }')
-             .then((_) => rtr.config({'path': '/a/...', 'component': ParentCmp}))
-             .then((_) => rtr.navigate('/a/b'))
-             .then((_) => {
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('outer { inner { hello } }');
-               async.done();
-             });
-       }));
-
-
-    it('should work with redirects', inject([AsyncTestCompleter, Location], (async, location) => {
-         compile()
-             .then((_) => rtr.config({'path': '/original', 'redirectTo': '/redirected'}))
-             .then((_) => rtr.config({'path': '/redirected', 'component': A}))
-             .then((_) => rtr.navigate('/original'))
-             .then((_) => {
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('A');
-               expect(location.urlChanges).toEqual(['/redirected']);
-               async.done();
-             });
-       }));
-
-    function getHref(tc) {
-      return DOM.getAttribute(tc.componentViewChildren[0].nativeElement, 'href');
-    }
-
-    it('should generate absolute hrefs that include the base href',
-       inject([AsyncTestCompleter], (async) => {
-         location.setBaseHref('/my/base');
-         compile('<a href="hello" [router-link]="[\'./user\']"></a>')
-             .then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'}))
-             .then((_) => rtr.navigate('/a/b'))
-             .then((_) => {
-               rootTC.detectChanges();
-               expect(getHref(rootTC)).toEqual('/my/base/user');
-               async.done();
-             });
-       }));
-
-
-    it('should generate link hrefs without params', inject([AsyncTestCompleter], (async) => {
-         compile('<a href="hello" [router-link]="[\'./user\']"></a>')
-             .then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'}))
-             .then((_) => rtr.navigate('/a/b'))
-             .then((_) => {
-               rootTC.detectChanges();
-               expect(getHref(rootTC)).toEqual('/user');
-               async.done();
-             });
-       }));
-
-
-    it('should reuse common parent components', inject([AsyncTestCompleter], (async) => {
-         compile()
-             .then((_) => rtr.config({'path': '/team/:id/...', 'component': TeamCmp}))
-             .then((_) => rtr.navigate('/team/angular/user/rado'))
-             .then((_) => {
-               rootTC.detectChanges();
-               expect(teamCmpCount).toBe(1);
-               expect(rootTC.nativeElement).toHaveText('team angular { hello rado }');
-             })
-             .then((_) => rtr.navigate('/team/angular/user/victor'))
-             .then((_) => {
-               rootTC.detectChanges();
-               expect(teamCmpCount).toBe(1);
-               expect(rootTC.nativeElement).toHaveText('team angular { hello victor }');
-               async.done();
-             });
-       }));
-
-
-    it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => {
-         compile('<a href="hello" [router-link]="[\'./user\', {name: name}]">{{name}}</a>')
-             .then((_) => rtr.config({'path': '/user/:name', 'component': UserCmp, 'as': 'user'}))
-             .then((_) => rtr.navigate('/a/b'))
-             .then((_) => {
-               rootTC.componentInstance.name = 'brian';
-               rootTC.detectChanges();
-               expect(rootTC.nativeElement).toHaveText('brian');
-               expect(DOM.getAttribute(rootTC.componentViewChildren[0].nativeElement, 'href'))
-                   .toEqual('/user/brian');
-               async.done();
-             });
-       }));
-
-    describe('when clicked', () => {
-
-      var clickOnElement = function(view) {
-        var anchorEl = rootTC.componentViewChildren[0].nativeElement;
-        var dispatchedEvent = DOM.createMouseEvent('click');
-        DOM.dispatchEvent(anchorEl, dispatchedEvent);
-        return dispatchedEvent;
-      };
-
-      it('should navigate to link hrefs without params', inject([AsyncTestCompleter], (async) => {
-           compile('<a href="hello" [router-link]="[\'./user\']"></a>')
-               .then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'}))
-               .then((_) => rtr.navigate('/a/b'))
-               .then((_) => {
-                 rootTC.detectChanges();
-
-                 var dispatchedEvent = clickOnElement(rootTC);
-                 expect(dispatchedEvent.defaultPrevented || !dispatchedEvent.returnValue)
-                     .toBe(true);
-
-                 // router navigation is async.
-                 rtr.subscribe((_) => {
-                   expect(location.urlChanges).toEqual(['/user']);
-                   async.done();
-                 });
-               });
-         }));
-
-      it('should navigate to link hrefs in presence of base href',
-         inject([AsyncTestCompleter], (async) => {
-           location.setBaseHref('/base');
-           compile('<a href="hello" [router-link]="[\'./user\']"></a>')
-               .then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'}))
-               .then((_) => rtr.navigate('/a/b'))
-               .then((_) => {
-                 rootTC.detectChanges();
-
-                 var dispatchedEvent = clickOnElement(rootTC);
-                 expect(dispatchedEvent.defaultPrevented || !dispatchedEvent.returnValue)
-                     .toBe(true);
-
-                 // router navigation is async.
-                 rtr.subscribe((_) => {
-                   expect(location.urlChanges).toEqual(['/base/user']);
-                   async.done();
-                 });
-               });
-         }));
-    });
-  });
-}
-
-
-@Component({selector: 'hello-cmp'})
-@View({template: "{{greeting}}"})
-class HelloCmp {
-  greeting: string;
-  constructor() { this.greeting = "hello"; }
-}
-
-
-@Component({selector: 'a-cmp'})
-@View({template: "A"})
-class A {
-}
-
-
-@Component({selector: 'b-cmp'})
-@View({template: "B"})
-class B {
-}
-
-
-@Component({selector: 'user-cmp'})
-@View({template: "hello {{user}}"})
-class UserCmp {
-  user: string;
-  constructor(params: RouteParams) { this.user = params.get('name'); }
-}
-
-
-@Component({selector: 'parent-cmp'})
-@View({template: "inner { <router-outlet></router-outlet> }", directives: [RouterOutlet]})
-@RouteConfig([{path: '/b', component: HelloCmp}])
-class ParentCmp {
-  constructor() {}
-}
-
-
-@Component({selector: 'team-cmp'})
-@View({template: "team {{id}} { <router-outlet></router-outlet> }", directives: [RouterOutlet]})
-@RouteConfig([{path: '/user/:name', component: UserCmp}])
-class TeamCmp {
-  id: string;
-  constructor(params: RouteParams) {
-    this.id = params.get('id');
-    teamCmpCount += 1;
-  }
-}
-
-
-@Component({selector: 'my-comp'})
-class MyComp {
-  name;
-}
diff --git a/modules/angular2/test/router/route_recognizer_spec.ts b/modules/angular2/test/router/route_recognizer_spec.ts
deleted file mode 100644
index be5399a6c6ed..000000000000
--- a/modules/angular2/test/router/route_recognizer_spec.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import {
-  AsyncTestCompleter,
-  describe,
-  it,
-  iit,
-  ddescribe,
-  expect,
-  inject,
-  beforeEach,
-  SpyObject
-} from 'angular2/test_lib';
-
-import {RouteRecognizer, RouteMatch} from 'angular2/src/router/route_recognizer';
-
-export function main() {
-  describe('RouteRecognizer', () => {
-    var recognizer;
-    var handler = {'component': DummyCmpA};
-    var handler2 = {'component': DummyCmpB};
-
-    beforeEach(() => { recognizer = new RouteRecognizer(); });
-
-
-    it('should recognize a static segment', () => {
-      recognizer.addConfig('/test', handler);
-      var solution = recognizer.recognize('/test')[0];
-      expect(getComponentType(solution)).toEqual(handler['component']);
-    });
-
-
-    it('should recognize a single slash', () => {
-      recognizer.addConfig('/', handler);
-      var solution = recognizer.recognize('/')[0];
-      expect(getComponentType(solution)).toEqual(handler['component']);
-    });
-
-
-    it('should recognize a dynamic segment', () => {
-      recognizer.addConfig('/user/:name', handler);
-      var solution = recognizer.recognize('/user/brian')[0];
-      expect(getComponentType(solution)).toEqual(handler['component']);
-      expect(solution.params()).toEqual({'name': 'brian'});
-    });
-
-
-    it('should recognize a star segment', () => {
-      recognizer.addConfig('/first/*rest', handler);
-      var solution = recognizer.recognize('/first/second/third')[0];
-      expect(getComponentType(solution)).toEqual(handler['component']);
-      expect(solution.params()).toEqual({'rest': 'second/third'});
-    });
-
-
-    it('should throw when given two routes that start with the same static segment', () => {
-      recognizer.addConfig('/hello', handler);
-      expect(() => recognizer.addConfig('/hello', handler2))
-          .toThrowError('Configuration \'/hello\' conflicts with existing route \'/hello\'');
-    });
-
-
-    it('should throw when given two routes that have dynamic segments in the same order', () => {
-      recognizer.addConfig('/hello/:person/how/:doyoudou', handler);
-      expect(() => recognizer.addConfig('/hello/:friend/how/:areyou', handler2))
-          .toThrowError(
-              'Configuration \'/hello/:friend/how/:areyou\' conflicts with existing route \'/hello/:person/how/:doyoudou\'');
-    });
-
-
-    it('should recognize redirects', () => {
-      recognizer.addRedirect('/a', '/b');
-      recognizer.addConfig('/b', handler);
-      var solutions = recognizer.recognize('/a');
-      expect(solutions.length).toBe(1);
-
-      var solution = solutions[0];
-      expect(getComponentType(solution)).toEqual(handler['component']);
-      expect(solution.matchedUrl).toEqual('/b');
-    });
-
-    it('should not perform root URL redirect on a non-root route', () => {
-      recognizer.addRedirect('/', '/foo');
-      recognizer.addConfig('/bar', handler);
-      var solutions = recognizer.recognize('/bar');
-      expect(solutions.length).toBe(1);
-
-      var solution = solutions[0];
-      expect(getComponentType(solution)).toEqual(handler['component']);
-      expect(solution.matchedUrl).toEqual('/bar');
-    });
-
-    it('should perform a root URL redirect when only a slash or an empty string is being processed',
-       () => {
-         recognizer.addRedirect('/', '/matias');
-         recognizer.addConfig('/matias', handler);
-
-         recognizer.addConfig('/fatias', handler);
-
-         var solutions;
-
-         solutions = recognizer.recognize('/');
-         expect(solutions[0].matchedUrl).toBe('/matias');
-
-         solutions = recognizer.recognize('/fatias');
-         expect(solutions[0].matchedUrl).toBe('/fatias');
-
-         solutions = recognizer.recognize('');
-         expect(solutions[0].matchedUrl).toBe('/matias');
-       });
-
-    it('should generate URLs with params', () => {
-      recognizer.addConfig('/app/user/:name', handler, 'user');
-      expect(recognizer.generate('user', {'name': 'misko'})['url']).toEqual('app/user/misko');
-    });
-
-
-    it('should throw in the absence of required params URLs', () => {
-      recognizer.addConfig('app/user/:name', handler, 'user');
-      expect(() => recognizer.generate('user', {})['url'])
-          .toThrowError('Route generator for \'name\' was not included in parameters passed.');
-    });
-  });
-}
-
-function getComponentType(routeMatch: RouteMatch): any {
-  return routeMatch.recognizer.handler.componentType;
-}
-
-class DummyCmpA {}
-class DummyCmpB {}
diff --git a/modules/angular2/test/router/route_registry_spec.ts b/modules/angular2/test/router/route_registry_spec.ts
deleted file mode 100644
index 05cb22d667eb..000000000000
--- a/modules/angular2/test/router/route_registry_spec.ts
+++ /dev/null
@@ -1,245 +0,0 @@
-import {
-  AsyncTestCompleter,
-  describe,
-  it,
-  iit,
-  ddescribe,
-  expect,
-  inject,
-  beforeEach,
-  SpyObject
-} from 'angular2/test_lib';
-
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {RouteRegistry} from 'angular2/src/router/route_registry';
-import {RouteConfig} from 'angular2/src/router/route_config_decorator';
-
-export function main() {
-  describe('RouteRegistry', () => {
-    var registry, rootHostComponent = new Object();
-
-    beforeEach(() => { registry = new RouteRegistry(rootHostComponent); });
-
-    it('should match the full URL', inject([AsyncTestCompleter], (async) => {
-         registry.config(rootHostComponent, {'path': '/', 'component': DummyCompA});
-         registry.config(rootHostComponent, {'path': '/test', 'component': DummyCompB});
-
-         registry.recognize('/test', rootHostComponent)
-             .then((instruction) => {
-               expect(instruction.component).toBe(DummyCompB);
-               async.done();
-             });
-       }));
-
-    it('should generate URLs starting at the given component', () => {
-      registry.config(rootHostComponent,
-                      {'path': '/first/...', 'component': DummyParentComp, 'as': 'firstCmp'});
-
-      expect(registry.generate(['./firstCmp/secondCmp'], rootHostComponent))
-          .toEqual('/first/second');
-      expect(registry.generate(['./secondCmp'], DummyParentComp)).toEqual('/second');
-    });
-
-    it('should generate URLs with params', () => {
-      registry.config(
-          rootHostComponent,
-          {'path': '/first/:param/...', 'component': DummyParentParamComp, 'as': 'firstCmp'});
-
-      var url = registry.generate(['./firstCmp', {param: 'one'}, 'secondCmp', {param: 'two'}],
-                                  rootHostComponent);
-      expect(url).toEqual('/first/one/second/two');
-    });
-
-    it('should generate URLs from the root component when the path starts with /', () => {
-      registry.config(rootHostComponent,
-                      {'path': '/first/...', 'component': DummyParentComp, 'as': 'firstCmp'});
-
-      expect(registry.generate(['/firstCmp', 'secondCmp'], rootHostComponent))
-          .toEqual('/first/second');
-      expect(registry.generate(['/firstCmp', 'secondCmp'], DummyParentComp))
-          .toEqual('/first/second');
-      expect(registry.generate(['/firstCmp/secondCmp'], DummyParentComp)).toEqual('/first/second');
-    });
-
-    it('should generate URLs of loaded components after they are loaded',
-       inject([AsyncTestCompleter], (async) => {
-         registry.config(rootHostComponent, {
-           'path': '/first/...',
-           'component': {'type': 'loader', 'loader': AsyncParentLoader},
-           'as': 'firstCmp'
-         });
-
-         expect(() => registry.generate(['/firstCmp/secondCmp'], rootHostComponent))
-             .toThrowError('Could not find route config for "secondCmp".');
-
-         registry.recognize('/first/second', rootHostComponent)
-             .then((_) => {
-               expect(registry.generate(['/firstCmp/secondCmp'], rootHostComponent))
-                   .toEqual('/first/second');
-               async.done();
-             });
-       }));
-
-    it('should throw when linkParams does not start with a "/" or "./"', () => {
-      expect(() => registry.generate(['firstCmp', 'secondCmp'], rootHostComponent))
-          .toThrowError(
-              `Link "${ListWrapper.toJSON(['firstCmp', 'secondCmp'])}" must start with "/" or "./"`);
-    });
-
-    it('should throw when linkParams does not include a route name', () => {
-      expect(() => registry.generate(['./'], rootHostComponent))
-          .toThrowError(`Link "${ListWrapper.toJSON(['./'])}" must include a route name.`);
-      expect(() => registry.generate(['/'], rootHostComponent))
-          .toThrowError(`Link "${ListWrapper.toJSON(['/'])}" must include a route name.`);
-    });
-
-    it('should prefer static segments to dynamic', inject([AsyncTestCompleter], (async) => {
-         registry.config(rootHostComponent, {'path': '/:site', 'component': DummyCompB});
-         registry.config(rootHostComponent, {'path': '/home', 'component': DummyCompA});
-
-         registry.recognize('/home', rootHostComponent)
-             .then((instruction) => {
-               expect(instruction.component).toBe(DummyCompA);
-               async.done();
-             });
-       }));
-
-    it('should prefer dynamic segments to star', inject([AsyncTestCompleter], (async) => {
-         registry.config(rootHostComponent, {'path': '/:site', 'component': DummyCompA});
-         registry.config(rootHostComponent, {'path': '/*site', 'component': DummyCompB});
-
-         registry.recognize('/home', rootHostComponent)
-             .then((instruction) => {
-               expect(instruction.component).toBe(DummyCompA);
-               async.done();
-             });
-       }));
-
-    it('should prefer routes with more dynamic segments', inject([AsyncTestCompleter], (async) => {
-         registry.config(rootHostComponent, {'path': '/:first/*rest', 'component': DummyCompA});
-         registry.config(rootHostComponent, {'path': '/*all', 'component': DummyCompB});
-
-         registry.recognize('/some/path', rootHostComponent)
-             .then((instruction) => {
-               expect(instruction.component).toBe(DummyCompA);
-               async.done();
-             });
-       }));
-
-    it('should prefer routes with more static segments', inject([AsyncTestCompleter], (async) => {
-         registry.config(rootHostComponent, {'path': '/first/:second', 'component': DummyCompA});
-         registry.config(rootHostComponent, {'path': '/:first/:second', 'component': DummyCompB});
-
-         registry.recognize('/first/second', rootHostComponent)
-             .then((instruction) => {
-               expect(instruction.component).toBe(DummyCompA);
-               async.done();
-             });
-       }));
-
-    it('should prefer routes with static segments before dynamic segments',
-       inject([AsyncTestCompleter], (async) => {
-         registry.config(rootHostComponent,
-                         {'path': '/first/second/:third', 'component': DummyCompB});
-         registry.config(rootHostComponent,
-                         {'path': '/first/:second/third', 'component': DummyCompA});
-
-         registry.recognize('/first/second/third', rootHostComponent)
-             .then((instruction) => {
-               expect(instruction.component).toBe(DummyCompB);
-               async.done();
-             });
-       }));
-
-    it('should match the full URL using child components', inject([AsyncTestCompleter], (async) => {
-         registry.config(rootHostComponent, {'path': '/first/...', 'component': DummyParentComp});
-
-         registry.recognize('/first/second', rootHostComponent)
-             .then((instruction) => {
-               expect(instruction.component).toBe(DummyParentComp);
-               expect(instruction.child.component).toBe(DummyCompB);
-               async.done();
-             });
-       }));
-
-    it('should match the URL using async child components',
-       inject([AsyncTestCompleter], (async) => {
-         registry.config(rootHostComponent, {'path': '/first/...', 'component': DummyAsyncComp});
-
-         registry.recognize('/first/second', rootHostComponent)
-             .then((instruction) => {
-               expect(instruction.component).toBe(DummyAsyncComp);
-               expect(instruction.child.component).toBe(DummyCompB);
-               async.done();
-             });
-       }));
-
-    it('should match the URL using an async parent component',
-       inject([AsyncTestCompleter], (async) => {
-         registry.config(
-             rootHostComponent,
-             {'path': '/first/...', 'component': {'loader': AsyncParentLoader, 'type': 'loader'}});
-
-         registry.recognize('/first/second', rootHostComponent)
-             .then((instruction) => {
-               expect(instruction.component).toBe(DummyParentComp);
-               expect(instruction.child.component).toBe(DummyCompB);
-               async.done();
-             });
-       }));
-
-    it('should throw when a config does not have a component or redirectTo property', () => {
-      expect(() => registry.config(rootHostComponent, {'path': '/some/path'}))
-          .toThrowError(
-              'Route config should contain exactly one \'component\', or \'redirectTo\' property');
-    });
-
-    it('should throw when a config has an invalid component type', () => {
-      expect(() => registry.config(
-                 rootHostComponent,
-                 {'path': '/some/path', 'component': {'type': 'intentionallyWrongComponentType'}}))
-          .toThrowError('Invalid component type \'intentionallyWrongComponentType\'');
-    });
-
-    it('should throw when a parent config is missing the `...` suffix any of its children add routes',
-       () => {
-         expect(() =>
-                    registry.config(rootHostComponent, {'path': '/', 'component': DummyParentComp}))
-             .toThrowError(
-                 'Child routes are not allowed for "/". Use "..." on the parent\'s route path.');
-       });
-
-    it('should throw when a parent config is missing the `...` suffix any of its children add routes',
-       () => {
-         expect(() => registry.config(rootHostComponent,
-                                      {'path': '/home/.../fun/', 'component': DummyParentComp}))
-             .toThrowError('Unexpected "..." before the end of the path for "home/.../fun/".');
-       });
-  });
-}
-
-function AsyncParentLoader() {
-  return PromiseWrapper.resolve(DummyParentComp);
-}
-
-function AsyncChildLoader() {
-  return PromiseWrapper.resolve(DummyCompB);
-}
-
-@RouteConfig([{'path': '/second', 'component': {'loader': AsyncChildLoader, 'type': 'loader'}}])
-class DummyAsyncComp {
-}
-
-class DummyCompA {}
-class DummyCompB {}
-
-@RouteConfig([{'path': '/second', 'component': DummyCompB, 'as': 'secondCmp'}])
-class DummyParentComp {
-}
-
-
-@RouteConfig([{'path': '/second/:param', 'component': DummyCompB, 'as': 'secondCmp'}])
-class DummyParentParamComp {
-}
diff --git a/modules/angular2/test/router/router_integration_spec.ts b/modules/angular2/test/router/router_integration_spec.ts
deleted file mode 100644
index 8fa5d101be48..000000000000
--- a/modules/angular2/test/router/router_integration_spec.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xdescribe,
-  xit,
-} from 'angular2/test_lib';
-
-import {bootstrap} from 'angular2/src/core/application';
-import {Component, Directive, View} from 'angular2/src/core/annotations/decorators';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {bind} from 'angular2/di';
-import {DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
-import {RouteConfig} from 'angular2/src/router/route_config_decorator';
-import {PromiseWrapper} from 'angular2/src/facade/async';
-import {BaseException} from 'angular2/src/facade/lang';
-import {routerInjectables, Router, appBaseHrefToken, routerDirectives} from 'angular2/router';
-import {LocationStrategy} from 'angular2/src/router/location_strategy';
-import {MockLocationStrategy} from 'angular2/src/mock/mock_location_strategy';
-
-export function main() {
-  describe('router injectables', () => {
-    var fakeDoc, el, testBindings;
-    beforeEach(() => {
-      fakeDoc = DOM.createHtmlDocument();
-      el = DOM.createElement('app-cmp', fakeDoc);
-      DOM.appendChild(fakeDoc.body, el);
-      testBindings = [
-        routerInjectables,
-        bind(LocationStrategy).toClass(MockLocationStrategy),
-        bind(DOCUMENT_TOKEN).toValue(fakeDoc)
-      ];
-    });
-
-    it('should bootstrap a simple app', inject([AsyncTestCompleter], (async) => {
-         bootstrap(AppCmp, testBindings)
-             .then((applicationRef) => {
-               var router = applicationRef.hostComponent.router;
-               router.subscribe((_) => {
-                 expect(el).toHaveText('outer { hello }');
-                 expect(applicationRef.hostComponent.location.path()).toEqual('');
-                 async.done();
-               });
-             });
-       }));
-
-    it('should rethrow exceptions from component constructors',
-       inject([AsyncTestCompleter], (async) => {
-         bootstrap(BrokenAppCmp, testBindings)
-             .then((applicationRef) => {
-               var router = applicationRef.hostComponent.router;
-               PromiseWrapper.catchError(router.navigate('/cause-error'), (error) => {
-                 expect(el).toHaveText('outer { oh no }');
-                 expect(error.message).toContain('oops!');
-                 async.done();
-               });
-             });
-       }));
-
-    it('should bootstrap an app with a hierarchy', inject([AsyncTestCompleter], (async) => {
-         bootstrap(HierarchyAppCmp, testBindings)
-             .then((applicationRef) => {
-               var router = applicationRef.hostComponent.router;
-               router.subscribe((_) => {
-                 expect(el).toHaveText('root { parent { hello } }');
-                 expect(applicationRef.hostComponent.location.path()).toEqual('/parent/child');
-                 async.done();
-               });
-               router.navigate('/parent/child');
-             });
-       }));
-
-    it('should bootstrap an app with a custom app base href',
-       inject([AsyncTestCompleter], (async) => {
-         bootstrap(HierarchyAppCmp, [testBindings, bind(appBaseHrefToken).toValue('/my/app')])
-             .then((applicationRef) => {
-               var router = applicationRef.hostComponent.router;
-               router.subscribe((_) => {
-                 expect(el).toHaveText('root { parent { hello } }');
-                 expect(applicationRef.hostComponent.location.path())
-                     .toEqual('/my/app/parent/child');
-                 async.done();
-               });
-               router.navigate('/parent/child');
-             });
-       }));
-    // TODO: add a test in which the child component has bindings
-  });
-}
-
-
-@Component({selector: 'hello-cmp'})
-@View({template: 'hello'})
-class HelloCmp {
-}
-
-@Component({selector: 'app-cmp'})
-@View({template: "outer { <router-outlet></router-outlet> }", directives: routerDirectives})
-@RouteConfig([{path: '/', component: HelloCmp}])
-class AppCmp {
-  constructor(public router: Router, public location: LocationStrategy) {}
-}
-
-@Component({selector: 'parent-cmp'})
-@View({template: `parent { <router-outlet></router-outlet> }`, directives: routerDirectives})
-@RouteConfig([{path: '/child', component: HelloCmp}])
-class ParentCmp {
-}
-
-@Component({selector: 'app-cmp'})
-@View({template: `root { <router-outlet></router-outlet> }`, directives: routerDirectives})
-@RouteConfig([{path: '/parent/...', component: ParentCmp}])
-class HierarchyAppCmp {
-  constructor(public router: Router, public location: LocationStrategy) {}
-}
-
-@Component({selector: 'oops-cmp'})
-@View({template: "oh no"})
-class BrokenCmp {
-  constructor() { throw new BaseException('oops!'); }
-}
-
-@Component({selector: 'app-cmp'})
-@View({template: "outer { <router-outlet></router-outlet> }", directives: routerDirectives})
-@RouteConfig([{path: '/cause-error', component: BrokenCmp}])
-class BrokenAppCmp {
-  constructor(public router: Router, public location: LocationStrategy) {}
-}
diff --git a/modules/angular2/test/router/router_link_spec.ts b/modules/angular2/test/router/router_link_spec.ts
deleted file mode 100644
index 7a215df68b7a..000000000000
--- a/modules/angular2/test/router/router_link_spec.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  beforeEachBindings,
-  it,
-  xit,
-  TestComponentBuilder,
-  proxy,
-  SpyObject,
-  By
-} from 'angular2/test_lib';
-
-import {IMPLEMENTS, print} from 'angular2/src/facade/lang';
-
-import {bind, Component, View} from 'angular2/angular2';
-
-import {Location, Router, RouterLink} from 'angular2/router';
-
-import {
-  DOM
-} from 'angular2/src/dom/dom_adapter'
-
-
-    export function
-    main() {
-  describe('router-link directive', function() {
-
-    beforeEachBindings(
-        () =>
-            [bind(Location).toValue(makeDummyLocation()), bind(Router).toValue(makeDummyRouter())]);
-
-
-    it('should update a[href] attribute',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(TestComponent)
-             .then((testComponent) => {
-               testComponent.detectChanges();
-               let anchorElement = testComponent.query(By.css('a')).nativeElement;
-               expect(DOM.getAttribute(anchorElement, 'href')).toEqual('/detail');
-               async.done();
-             });
-       }));
-
-
-    it('should call router.navigate when a link is clicked',
-       inject([TestComponentBuilder, AsyncTestCompleter, Router], (tcb, async, router) => {
-
-         tcb.createAsync(TestComponent)
-             .then((testComponent) => {
-               testComponent.detectChanges();
-               // TODO: shouldn't this be just 'click' rather than '^click'?
-               testComponent.query(By.css('a')).triggerEventHandler('^click', {});
-               expect(router.spy("navigate")).toHaveBeenCalledWith('/detail');
-               async.done();
-             });
-       }));
-  });
-}
-
-
-@Component({selector: 'test-component'})
-@View({
-  template: `
-    <div>
-      <a [router-link]="['/detail']">detail view</a>
-    </div>`,
-  directives: [RouterLink]
-})
-class TestComponent {
-}
-
-
-@proxy
-@IMPLEMENTS(Location)
-class DummyLocation extends SpyObject {
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-function makeDummyLocation() {
-  var dl = new DummyLocation();
-  dl.spy('normalizeAbsolutely').andCallFake((url) => url);
-  return dl;
-}
-
-
-@proxy
-@IMPLEMENTS(Router)
-class DummyRouter extends SpyObject {
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-function makeDummyRouter() {
-  var dr = new DummyRouter();
-  dr.spy('generate').andCallFake((routeParams) => routeParams.join('='));
-  dr.spy('navigate');
-  return dr;
-}
diff --git a/modules/angular2/test/router/router_spec.ts b/modules/angular2/test/router/router_spec.ts
deleted file mode 100644
index 21fb351e52d8..000000000000
--- a/modules/angular2/test/router/router_spec.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import {
-  AsyncTestCompleter,
-  describe,
-  proxy,
-  it,
-  iit,
-  ddescribe,
-  expect,
-  inject,
-  beforeEach,
-  beforeEachBindings,
-  SpyObject
-} from 'angular2/test_lib';
-import {IMPLEMENTS} from 'angular2/src/facade/lang';
-
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {Router, RootRouter} from 'angular2/src/router/router';
-import {Pipeline} from 'angular2/src/router/pipeline';
-import {RouterOutlet} from 'angular2/src/router/router_outlet';
-import {SpyLocation} from 'angular2/src/mock/location_mock';
-import {Location} from 'angular2/src/router/location';
-
-import {RouteRegistry} from 'angular2/src/router/route_registry';
-import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
-
-import {bind} from 'angular2/di';
-
-export function main() {
-  describe('Router', () => {
-    var router, location;
-
-    beforeEachBindings(() => [
-      Pipeline,
-      bind(RouteRegistry).toFactory(() => new RouteRegistry(AppCmp)),
-      DirectiveResolver,
-      bind(Location).toClass(SpyLocation),
-      bind(Router)
-          .toFactory((registry, pipeline,
-                      location) => { return new RootRouter(registry, pipeline, location, AppCmp); },
-                     [RouteRegistry, Pipeline, Location])
-    ]);
-
-
-    beforeEach(inject([Router, Location], (rtr, loc) => {
-      router = rtr;
-      location = loc;
-    }));
-
-
-    it('should navigate based on the initial URL state', inject([AsyncTestCompleter], (async) => {
-         var outlet = makeDummyOutlet();
-
-         router.config({'path': '/', 'component': DummyComponent})
-             .then((_) => router.registerOutlet(outlet))
-             .then((_) => {
-               expect(outlet.spy('activate')).toHaveBeenCalled();
-               expect(location.urlChanges).toEqual([]);
-               async.done();
-             });
-       }));
-
-
-    it('should activate viewports and update URL on navigate',
-       inject([AsyncTestCompleter], (async) => {
-         var outlet = makeDummyOutlet();
-
-         router.registerOutlet(outlet)
-             .then((_) => router.config({'path': '/a', 'component': DummyComponent}))
-             .then((_) => router.navigate('/a'))
-             .then((_) => {
-               expect(outlet.spy('activate')).toHaveBeenCalled();
-               expect(location.urlChanges).toEqual(['/a']);
-               async.done();
-             });
-       }));
-
-    it('should navigate after being configured', inject([AsyncTestCompleter], (async) => {
-         var outlet = makeDummyOutlet();
-
-         router.registerOutlet(outlet)
-             .then((_) => router.navigate('/a'))
-             .then((_) => {
-               expect(outlet.spy('activate')).not.toHaveBeenCalled();
-               return router.config({'path': '/a', 'component': DummyComponent});
-             })
-             .then((_) => {
-               expect(outlet.spy('activate')).toHaveBeenCalled();
-               async.done();
-             });
-       }));
-  });
-}
-
-@proxy
-@IMPLEMENTS(RouterOutlet)
-class DummyOutlet extends SpyObject {
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-class DummyComponent {}
-
-function makeDummyOutlet() {
-  var ref = new DummyOutlet();
-  ref.spy('activate').andCallFake((_) => PromiseWrapper.resolve(true));
-  ref.spy('canActivate').andCallFake((_) => PromiseWrapper.resolve(true));
-  ref.spy('canDeactivate').andCallFake((_) => PromiseWrapper.resolve(true));
-  ref.spy('deactivate').andCallFake((_) => PromiseWrapper.resolve(true));
-  return ref;
-}
-
-class AppCmp {}
diff --git a/modules/angular2/test/services/rectangle_mock.dart b/modules/angular2/test/services/rectangle_mock.dart
deleted file mode 100644
index 62356a364ba3..000000000000
--- a/modules/angular2/test/services/rectangle_mock.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-import 'dart:html';
-
-Rectangle createRectangle(left, top, width, height) {
-  return new Rectangle(left, top, width, height);
-}
diff --git a/modules/angular2/test/services/rectangle_mock.ts b/modules/angular2/test/services/rectangle_mock.ts
deleted file mode 100644
index c8a8a3140a77..000000000000
--- a/modules/angular2/test/services/rectangle_mock.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function createRectangle(left, top, width, height) {
-  return {left, top, width, height};
-}
diff --git a/modules/angular2/test/services/ruler_spec.ts b/modules/angular2/test/services/ruler_spec.ts
deleted file mode 100644
index 2f805331e7b0..000000000000
--- a/modules/angular2/test/services/ruler_spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import {
-  AsyncTestCompleter,
-  inject,
-  ddescribe,
-  describe,
-  it,
-  iit,
-  xit,
-  expect,
-  SpyObject,
-  proxy
-} from 'angular2/test_lib';
-
-import {DOM, DomAdapter} from 'angular2/src/dom/dom_adapter';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-
-import {Ruler, Rectangle} from 'angular2/src/services/ruler';
-import {createRectangle} from './rectangle_mock';
-import {IMPLEMENTS} from 'angular2/src/facade/lang';
-
-function assertDimensions(rect: Rectangle, left, right, top, bottom, width, height) {
-  expect(rect.left).toEqual(left);
-  expect(rect.right).toEqual(right);
-  expect(rect.top).toEqual(top);
-  expect(rect.bottom).toEqual(bottom);
-  expect(rect.width).toEqual(width);
-  expect(rect.height).toEqual(height);
-}
-
-export function main() {
-  describe('ruler service', () => {
-
-    it('should allow measuring ElementRefs', inject([AsyncTestCompleter], (async) => {
-         var ruler = new Ruler(SpyObject.stub(
-             new SpyDomAdapter(), {'getBoundingClientRect': createRectangle(10, 20, 200, 100)}));
-
-         var elRef = <any>new SpyElementRef();
-         ruler.measure(elRef).then((rect) => {
-           assertDimensions(rect, 10, 210, 20, 120, 200, 100);
-           async.done();
-         });
-       }));
-
-
-    it('should return 0 for all rectangle values while measuring elements in a document fragment',
-       inject([AsyncTestCompleter], (async) => {
-         var ruler = new Ruler(DOM);
-         var elRef = <any>new SpyElementRef();
-         elRef.nativeElement = DOM.createElement('div');
-         ruler.measure(elRef).then((rect) => {
-           // here we are using an element created in a doc fragment so all the measures will come
-           // back as 0
-           assertDimensions(rect, 0, 0, 0, 0, 0, 0);
-           async.done();
-         });
-       }));
-
-  });
-}
-
-@proxy
-@IMPLEMENTS(ElementRef)
-class SpyElementRef extends SpyObject {
-  nativeElement;
-  constructor() { super(ElementRef); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-@proxy
-@IMPLEMENTS(DomAdapter)
-class SpyDomAdapter extends SpyObject {
-  constructor() { super(DomAdapter); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
diff --git a/modules/angular2/test/services/title_spec.ts b/modules/angular2/test/services/title_spec.ts
deleted file mode 100644
index 0d5b84a01733..000000000000
--- a/modules/angular2/test/services/title_spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {ddescribe, describe, it, iit, xit, expect, afterEach} from 'angular2/test_lib';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {Title} from 'angular2/src/services/title';
-
-export function main() {
-  describe('title service', () => {
-    var initialTitle = DOM.getTitle();
-    var titleService = new Title();
-
-    afterEach(() => { DOM.setTitle(initialTitle); });
-
-    it('should allow reading initial title',
-       () => { expect(titleService.getTitle()).toEqual(initialTitle); });
-
-    it('should set a title on the injected document', () => {
-      titleService.setTitle('test title');
-      expect(DOM.getTitle()).toEqual('test title');
-      expect(titleService.getTitle()).toEqual('test title');
-    });
-
-    it('should reset title to empty string if title not provided', () => {
-      titleService.setTitle(null);
-      expect(DOM.getTitle()).toEqual('');
-    });
-
-  });
-}
diff --git a/modules/angular2/test/services/url_resolver_spec.ts b/modules/angular2/test/services/url_resolver_spec.ts
deleted file mode 100644
index 830205a69481..000000000000
--- a/modules/angular2/test/services/url_resolver_spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import {describe, it, expect, beforeEach, ddescribe, iit, xit, el} from 'angular2/test_lib';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-
-export function main() {
-  describe('UrlResolver', () => {
-    var resolver = new UrlResolver();
-
-    describe('absolute base url', () => {
-      it('should add a relative path to the base url', () => {
-        expect(resolver.resolve('http://www.foo.com', 'bar')).toEqual('http://www.foo.com/bar');
-        expect(resolver.resolve('http://www.foo.com/', 'bar')).toEqual('http://www.foo.com/bar');
-        expect(resolver.resolve('http://www.foo.com', './bar')).toEqual('http://www.foo.com/bar');
-        expect(resolver.resolve('http://www.foo.com/', './bar')).toEqual('http://www.foo.com/bar');
-      });
-
-      it('should replace the base path', () => {
-        expect(resolver.resolve('http://www.foo.com/baz', 'bar')).toEqual('http://www.foo.com/bar');
-        expect(resolver.resolve('http://www.foo.com/baz', './bar'))
-            .toEqual('http://www.foo.com/bar');
-      });
-
-      it('should append to the base path', () => {
-        expect(resolver.resolve('http://www.foo.com/baz/', 'bar'))
-            .toEqual('http://www.foo.com/baz/bar');
-        expect(resolver.resolve('http://www.foo.com/baz/', './bar'))
-            .toEqual('http://www.foo.com/baz/bar');
-      });
-
-      it('should support ".." in the path', () => {
-        expect(resolver.resolve('http://www.foo.com/baz/', '../bar'))
-            .toEqual('http://www.foo.com/bar');
-        expect(resolver.resolve('http://www.foo.com/1/2/3/', '../../bar'))
-            .toEqual('http://www.foo.com/1/bar');
-        expect(resolver.resolve('http://www.foo.com/1/2/3/', '../biz/bar'))
-            .toEqual('http://www.foo.com/1/2/biz/bar');
-        expect(resolver.resolve('http://www.foo.com/1/2/baz', '../../bar'))
-            .toEqual('http://www.foo.com/bar');
-      });
-
-      it('should ignore the base path when the url has a scheme', () => {
-        expect(resolver.resolve('http://www.foo.com', 'http://www.bar.com'))
-            .toEqual('http://www.bar.com');
-      });
-
-      it('should support absolute urls', () => {
-        expect(resolver.resolve('http://www.foo.com', '/bar')).toEqual('http://www.foo.com/bar');
-        expect(resolver.resolve('http://www.foo.com/', '/bar')).toEqual('http://www.foo.com/bar');
-        expect(resolver.resolve('http://www.foo.com/baz', '/bar'))
-            .toEqual('http://www.foo.com/bar');
-        expect(resolver.resolve('http://www.foo.com/baz/', '/bar'))
-            .toEqual('http://www.foo.com/bar');
-      });
-    });
-
-    describe('relative base url', () => {
-      it('should add a relative path to the base url', () => {
-        expect(resolver.resolve('foo/', './bar')).toEqual('foo/bar');
-        expect(resolver.resolve('foo/baz', './bar')).toEqual('foo/bar');
-        expect(resolver.resolve('foo/baz', 'bar')).toEqual('foo/bar');
-
-      });
-
-      it('should support ".." in the path', () => {
-        expect(resolver.resolve('foo/baz', '../bar')).toEqual('bar');
-        expect(resolver.resolve('foo/baz', '../biz/bar')).toEqual('biz/bar');
-      });
-
-      it('should support absolute urls', () => {
-        expect(resolver.resolve('foo/baz', '/bar')).toEqual('/bar');
-        expect(resolver.resolve('foo/baz/', '/bar')).toEqual('/bar');
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test/test_lib/fake_async_spec.ts b/modules/angular2/test/test_lib/fake_async_spec.ts
deleted file mode 100644
index a9d34ab430a0..000000000000
--- a/modules/angular2/test/test_lib/fake_async_spec.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  fakeAsync,
-  flushMicrotasks,
-  iit,
-  inject,
-  IS_DARTIUM,
-  it,
-  Log,
-  tick,
-  xit
-} from 'angular2/test_lib';
-import {TimerWrapper, PromiseWrapper} from 'angular2/src/facade/async';
-import {BaseException, global} from 'angular2/src/facade/lang';
-import {Parser} from 'angular2/change_detection';
-
-export function main() {
-  describe('fake async', () => {
-    it('should run synchronous code', () => {
-      var ran = false;
-      fakeAsync(() => { ran = true; })();
-
-      expect(ran).toEqual(true);
-    });
-
-    it('should pass arguments to the wrapped function', () => {
-      fakeAsync((foo, bar) => {
-        expect(foo).toEqual('foo');
-        expect(bar).toEqual('bar');
-      })('foo', 'bar');
-    });
-
-    it('should work with inject()',
-       inject([Parser], fakeAsync((parser) => { expect(parser).toBeAnInstanceOf(Parser); })));
-
-    it('should throw on nested calls', () => {
-      expect(() => { fakeAsync(() => { fakeAsync(() => null)(); })(); })
-          .toThrowError('fakeAsync() calls can not be nested');
-    });
-
-    it('should flush microtasks before returning', () => {
-      var thenRan = false;
-
-      fakeAsync(() => { PromiseWrapper.resolve(null).then(_ => { thenRan = true; }); })();
-
-      expect(thenRan).toEqual(true);
-    });
-
-
-    it('should propagate the return value',
-       () => { expect(fakeAsync(() => 'foo')()).toEqual('foo'); });
-
-    describe('Promise', () => {
-      it('should run asynchronous code', fakeAsync(() => {
-           var thenRan = false;
-           PromiseWrapper.resolve(null).then((_) => { thenRan = true; });
-
-           expect(thenRan).toEqual(false);
-
-           flushMicrotasks();
-           expect(thenRan).toEqual(true);
-         }));
-
-      it('should run chained thens', fakeAsync(() => {
-           var log = new Log();
-
-           PromiseWrapper.resolve(null).then((_) => log.add(1)).then((_) => log.add(2));
-
-           expect(log.result()).toEqual('');
-
-           flushMicrotasks();
-           expect(log.result()).toEqual('1; 2');
-         }));
-
-      it('should run Promise created in Promise', fakeAsync(() => {
-           var log = new Log();
-
-           PromiseWrapper.resolve(null).then((_) => {
-             log.add(1);
-             PromiseWrapper.resolve(null).then((_) => log.add(2));
-           });
-
-           expect(log.result()).toEqual('');
-
-           flushMicrotasks();
-           expect(log.result()).toEqual('1; 2');
-         }));
-
-      // TODO(vicb): check why this doesn't work in JS - linked to open issues on GH ?
-      xit('should complain if the test throws an exception during async calls', () => {
-        expect(() => {
-          fakeAsync(() => {
-            PromiseWrapper.resolve(null).then((_) => { throw new BaseException('async'); });
-            flushMicrotasks();
-          })();
-        }).toThrowError('async');
-      });
-
-      it('should complain if a test throws an exception', () => {
-        expect(() => { fakeAsync(() => { throw new BaseException('sync'); })(); })
-            .toThrowError('sync');
-      });
-
-    });
-
-    describe('timers', () => {
-      it('should run queued zero duration timer on zero tick', fakeAsync(() => {
-           var ran = false;
-           TimerWrapper.setTimeout(() => {ran = true}, 0);
-
-           expect(ran).toEqual(false);
-
-           tick();
-           expect(ran).toEqual(true);
-         }));
-
-
-      it('should run queued timer after sufficient clock ticks', fakeAsync(() => {
-           var ran = false;
-           TimerWrapper.setTimeout(() => { ran = true; }, 10);
-
-           tick(6);
-           expect(ran).toEqual(false);
-
-           tick(6);
-           expect(ran).toEqual(true);
-         }));
-
-      it('should run queued timer only once', fakeAsync(() => {
-           var cycles = 0;
-           TimerWrapper.setTimeout(() => { cycles++; }, 10);
-
-           tick(10);
-           expect(cycles).toEqual(1);
-
-           tick(10);
-           expect(cycles).toEqual(1);
-
-           tick(10);
-           expect(cycles).toEqual(1);
-         }));
-
-      it('should not run cancelled timer', fakeAsync(() => {
-           var ran = false;
-           var id = TimerWrapper.setTimeout(() => { ran = true; }, 10);
-           TimerWrapper.clearTimeout(id);
-
-           tick(10);
-           expect(ran).toEqual(false);
-         }));
-
-      it('should throw an error on dangling timers', () => {
-        expect(() => { fakeAsync(() => { TimerWrapper.setTimeout(() => {}, 10); })(); })
-            .toThrowError('1 timer(s) still in the queue.');
-      });
-
-      it('should throw an error on dangling periodic timers', () => {
-        expect(() => { fakeAsync(() => { TimerWrapper.setInterval(() => {}, 10); })(); })
-            .toThrowError('1 periodic timer(s) still in the queue.');
-      });
-
-      it('should run periodic timers', fakeAsync(() => {
-           var cycles = 0;
-           var id = TimerWrapper.setInterval(() => { cycles++; }, 10);
-
-           tick(10);
-           expect(cycles).toEqual(1);
-
-           tick(10);
-           expect(cycles).toEqual(2);
-
-           tick(10);
-           expect(cycles).toEqual(3);
-
-           TimerWrapper.clearInterval(id);
-         }));
-
-      it('should not run cancelled periodic timer', fakeAsync(() => {
-           var ran = false;
-           var id = TimerWrapper.setInterval(() => { ran = true; }, 10);
-           TimerWrapper.clearInterval(id);
-
-           tick(10);
-           expect(ran).toEqual(false);
-         }));
-
-      it('should be able to cancel periodic timers from a callback', fakeAsync(() => {
-           var cycles = 0;
-           var id;
-
-           id = TimerWrapper.setInterval(() => {
-             cycles++;
-             TimerWrapper.clearInterval(id);
-           }, 10);
-
-           tick(10);
-           expect(cycles).toEqual(1);
-
-           tick(10);
-           expect(cycles).toEqual(1);
-         }));
-
-      it('should process microtasks before timers', fakeAsync(() => {
-           var log = new Log();
-
-           PromiseWrapper.resolve(null).then((_) => log.add('microtask'));
-
-           TimerWrapper.setTimeout(() => log.add('timer'), 9);
-
-           var id = TimerWrapper.setInterval(() => log.add('periodic timer'), 10);
-
-           expect(log.result()).toEqual('');
-
-           tick(10);
-           expect(log.result()).toEqual('microtask; timer; periodic timer');
-
-           TimerWrapper.clearInterval(id);
-         }));
-
-      it('should process micro-tasks created in timers before next timers', fakeAsync(() => {
-           var log = new Log();
-
-           PromiseWrapper.resolve(null).then((_) => log.add('microtask'));
-
-           TimerWrapper.setTimeout(() => {
-             log.add('timer');
-             PromiseWrapper.resolve(null).then((_) => log.add('t microtask'));
-           }, 9);
-
-           var id = TimerWrapper.setInterval(() => {
-             log.add('periodic timer');
-             PromiseWrapper.resolve(null).then((_) => log.add('pt microtask'));
-           }, 10);
-
-           tick(10);
-           expect(log.result())
-               .toEqual('microtask; timer; t microtask; periodic timer; pt microtask');
-
-           tick(10);
-           expect(log.result())
-               .toEqual(
-                   'microtask; timer; t microtask; periodic timer; pt microtask; periodic timer; pt microtask');
-
-           TimerWrapper.clearInterval(id);
-         }));
-    });
-
-    describe('outside of the fakeAsync zone', () => {
-      it('calling flushMicrotasks should throw', () => {
-        expect(() => { flushMicrotasks(); })
-            .toThrowError('The code should be running in the fakeAsync zone to call this function');
-      });
-
-      it('calling tick should throw', () => {
-        expect(() => { tick(); })
-            .toThrowError('The code should be running in the fakeAsync zone to call this function');
-      });
-    });
-
-  });
-}
diff --git a/modules/angular2/test/test_lib/test_component_builder_spec.ts b/modules/angular2/test/test_lib/test_component_builder_spec.ts
deleted file mode 100644
index 5a15f1216fe6..000000000000
--- a/modules/angular2/test/test_lib/test_component_builder_spec.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  beforeEachBindings,
-  it,
-  xit,
-  TestComponentBuilder
-} from 'angular2/test_lib';
-
-import {Injectable} from 'angular2/di';
-
-import {
-  Directive,
-  Component,
-  View,
-} from 'angular2/annotations';
-
-import * as viewAnn from 'angular2/src/core/annotations_impl/view';
-
-import {NgIf} from 'angular2/src/directives/ng_if';
-
-@Component({selector: 'child-comp'})
-@View({template: `<span>Original {{childBinding}}</span>`, directives: []})
-@Injectable()
-class ChildComp {
-  childBinding: string;
-  constructor() { this.childBinding = 'Child'; }
-}
-
-@Component({selector: 'child-comp'})
-@View({template: `<span>Mock</span>`})
-@Injectable()
-class MockChildComp {
-}
-
-@Component({selector: 'parent-comp'})
-@View({template: `Parent(<child-comp></child-comp>)`, directives: [ChildComp]})
-@Injectable()
-class ParentComp {
-}
-
-@Component({selector: 'my-if-comp'})
-@View({template: `MyIf(<span *ng-if="showMore">More</span>)`, directives: [NgIf]})
-@Injectable()
-class MyIfComp {
-  showMore: boolean = false;
-}
-
-export function main() {
-  describe('test component builder', function() {
-    it('should instantiate a component with valid DOM',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ChildComp).then((rootTestComponent) => {
-           rootTestComponent.detectChanges();
-
-           expect(rootTestComponent.nativeElement).toHaveText('Original Child');
-           async.done();
-         });
-       }));
-
-    it('should allow changing members of the component',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(MyIfComp).then((rootTestComponent) => {
-           rootTestComponent.detectChanges();
-           expect(rootTestComponent.nativeElement).toHaveText('MyIf()');
-
-           rootTestComponent.componentInstance.showMore = true;
-           rootTestComponent.detectChanges();
-           expect(rootTestComponent.nativeElement).toHaveText('MyIf(More)');
-
-           async.done();
-         });
-       }));
-
-    it('should override a template',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.overrideTemplate(MockChildComp, '<span>Mock</span>')
-             .createAsync(MockChildComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-               expect(rootTestComponent.nativeElement).toHaveText('Mock');
-
-               async.done();
-             });
-       }));
-
-    it('should override a view',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.overrideView(ChildComp,
-                          new viewAnn.View({template: '<span>Modified {{childBinding}}</span>'}))
-             .createAsync(ChildComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-               expect(rootTestComponent.nativeElement).toHaveText('Modified Child');
-
-               async.done();
-             });
-       }));
-
-    it('should override component dependencies',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.overrideDirective(ParentComp, ChildComp, MockChildComp)
-             .createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-               expect(rootTestComponent.nativeElement).toHaveText('Parent(Mock)');
-
-               async.done();
-             });
-       }));
-  });
-}
diff --git a/modules/angular2/test/test_lib/test_lib_spec.ts b/modules/angular2/test/test_lib/test_lib_spec.ts
deleted file mode 100644
index be71ce3496d8..000000000000
--- a/modules/angular2/test/test_lib/test_lib_spec.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import {
-  describe,
-  it,
-  iit,
-  ddescribe,
-  expect,
-  tick,
-  SpyObject,
-  beforeEach,
-  proxy,
-  containsRegexp
-} from 'angular2/test_lib';
-
-import {MapWrapper} from 'angular2/src/facade/collection';
-import {IMPLEMENTS, RegExpWrapper} from 'angular2/src/facade/lang';
-
-class TestObj {
-  prop;
-  constructor(prop) { this.prop = prop; }
-  someFunc(): number { return -1; }
-  someComplexFunc(a) { return a; }
-}
-
-@proxy
-@IMPLEMENTS(TestObj)
-class SpyTestObj extends SpyObject {
-  constructor() { super(TestObj); }
-  noSuchMethod(m) { return super.noSuchMethod(m) }
-}
-
-
-export function main() {
-  describe('test_lib', () => {
-    describe('equality', () => {
-      it('should structurally compare objects', () => {
-        var expected = new TestObj(new TestObj({'one': [1, 2]}));
-        var actual = new TestObj(new TestObj({'one': [1, 2]}));
-        var falseActual = new TestObj(new TestObj({'one': [1, 3]}));
-
-        expect(actual).toEqual(expected);
-        expect(falseActual).not.toEqual(expected);
-      });
-    });
-
-    describe('toEqual for Maps', () => {
-      it('should detect equality for same reference', () => {
-        var m1 = MapWrapper.createFromStringMap({'a': 1});
-        expect(m1).toEqual(m1);
-      });
-
-      it('should detect equality for same content', () => {
-        expect(MapWrapper.createFromStringMap({'a': 1}))
-            .toEqual(MapWrapper.createFromStringMap({'a': 1}));
-      });
-
-      it('should detect missing entries', () => {
-        expect(MapWrapper.createFromStringMap({'a': 1}))
-            .not.toEqual(MapWrapper.createFromStringMap({}));
-      });
-
-      it('should detect different values', () => {
-        expect(MapWrapper.createFromStringMap({'a': 1}))
-            .not.toEqual(MapWrapper.createFromStringMap({'a': 2}));
-      });
-
-      it('should detect additional entries', () => {
-        expect(MapWrapper.createFromStringMap({'a': 1}))
-            .not.toEqual(MapWrapper.createFromStringMap({'a': 1, 'b': 1}));
-      });
-    });
-
-    describe("spy objects", () => {
-      var spyObj;
-
-      beforeEach(() => { spyObj = <any>new SpyTestObj(); });
-
-      it("should pass the runtime check", () => {
-        var t: TestObj = spyObj;
-        expect(t).toBeDefined();
-      });
-
-      it("should return a new spy func with no calls",
-         () => { expect(spyObj.spy("someFunc")).not.toHaveBeenCalled(); });
-
-      it("should record function calls", () => {
-        spyObj.spy("someFunc").andCallFake((a, b) => {return a + b});
-
-        expect(spyObj.someFunc(1, 2)).toEqual(3);
-        expect(spyObj.spy("someFunc")).toHaveBeenCalledWith(1, 2);
-      });
-
-      it("should match multiple function calls", () => {
-        spyObj.someFunc(1, 2);
-        spyObj.someFunc(3, 4);
-        expect(spyObj.spy("someFunc")).toHaveBeenCalledWith(1, 2);
-        expect(spyObj.spy("someFunc")).toHaveBeenCalledWith(3, 4);
-      });
-
-      it("should match null arguments", () => {
-        spyObj.someFunc(null, "hello");
-        expect(spyObj.spy("someFunc")).toHaveBeenCalledWith(null, "hello");
-      });
-
-      it("should match using deep equality", () => {
-        spyObj.someComplexFunc([1]);
-        expect(spyObj.spy("someComplexFunc")).toHaveBeenCalledWith([1]);
-      });
-
-      it("should support stubs", () => {
-        var s = SpyObject.stub({"a": 1}, {"b": 2});
-
-        expect(s.a()).toEqual(1);
-        expect(s.b()).toEqual(2);
-      });
-
-      it('should create spys for all methods',
-         () => { expect(() => spyObj.someFunc()).not.toThrow(); });
-
-      it('should create a default spy that does not fail for numbers', () => {
-        // Need to return null instead of undefined so that rtts assert does
-        // not fail...
-        expect(spyObj.someFunc()).toBe(null);
-      });
-    });
-
-    describe('containsRegexp', () => {
-
-      it('should allow any prefix and suffix', () => {
-        expect(RegExpWrapper.firstMatch(containsRegexp('b'), 'abc')).toBeTruthy();
-        expect(RegExpWrapper.firstMatch(containsRegexp('b'), 'adc')).toBeFalsy();
-      });
-
-      it('should match various special characters', () => {
-        expect(RegExpWrapper.firstMatch(containsRegexp('a.b'), 'a.b')).toBeTruthy();
-        expect(RegExpWrapper.firstMatch(containsRegexp('axb'), 'a.b')).toBeFalsy();
-      });
-
-    });
-  });
-}
diff --git a/modules/angular2/test/transform/bind_generator/all_tests.dart b/modules/angular2/test/transform/bind_generator/all_tests.dart
deleted file mode 100644
index 119ab858cd33..000000000000
--- a/modules/angular2/test/transform/bind_generator/all_tests.dart
+++ /dev/null
@@ -1,50 +0,0 @@
-library angular2.test.transform.bind_generator.all_tests;
-
-import 'package:barback/barback.dart';
-import 'package:angular2/src/transform/bind_generator/generator.dart';
-import 'package:dart_style/dart_style.dart';
-import 'package:guinness/guinness.dart';
-
-import '../common/read_file.dart';
-
-var formatter = new DartFormatter();
-
-main() => allTests();
-
-void allTests() {
-  var reader = new TestAssetReader();
-
-  it('should generate a setter for a `properties` property in an annotation.',
-      () async {
-    var inputPath = 'bind_generator/basic_bind_files/bar.ng_deps.dart';
-    var expected = formatter.format(
-        readFile('bind_generator/basic_bind_files/expected/bar.ng_deps.dart'));
-
-    var output = formatter.format(
-        await createNgSettersAndGetters(reader, new AssetId('a', inputPath)));
-    expect(output).toEqual(expected);
-  });
-
-  it('should generate a single setter when multiple annotations bind to the '
-      'same property.', () async {
-    var inputPath =
-        'bind_generator/duplicate_bind_name_files/soup.ng_deps.dart';
-    var expected = formatter.format(readFile(
-        'bind_generator/duplicate_bind_name_files/expected/soup.ng_deps.dart'));
-
-    var output = formatter.format(
-        await createNgSettersAndGetters(reader, new AssetId('a', inputPath)));
-    expect(output).toEqual(expected);
-  });
-
-  it('should generate a getter for a `events` property in an annotation.',
-      () async {
-    var inputPath = 'bind_generator/events_files/bar.ng_deps.dart';
-    var expected = formatter.format(
-      readFile('bind_generator/events_files/expected/bar.ng_deps.dart'));
-
-    var output = formatter.format(
-      await createNgSettersAndGetters(reader, new AssetId('a', inputPath)));
-    expect(output).toEqual(expected);
-  });
-}
diff --git a/modules/angular2/test/transform/bind_generator/basic_bind_files/bar.ng_deps.dart b/modules/angular2/test/transform/bind_generator/basic_bind_files/bar.ng_deps.dart
deleted file mode 100644
index 17b1ad336019..000000000000
--- a/modules/angular2/test/transform/bind_generator/basic_bind_files/bar.ng_deps.dart
+++ /dev/null
@@ -1,19 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(ToolTip, {
-      'factory': () => new ToolTip(),
-      'parameters': const [],
-      'annotations': const [
-        const Directive(
-            selector: '[tool-tip]', properties: const ['text: tool-tip'])
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/bind_generator/basic_bind_files/expected/bar.ng_deps.dart b/modules/angular2/test/transform/bind_generator/basic_bind_files/expected/bar.ng_deps.dart
deleted file mode 100644
index cc367602663c..000000000000
--- a/modules/angular2/test/transform/bind_generator/basic_bind_files/expected/bar.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(ToolTip, {
-      'factory': () => new ToolTip(),
-      'parameters': const [],
-      'annotations': const [
-        const Directive(
-            selector: '[tool-tip]', properties: const ['text: tool-tip'])
-      ]
-    })
-    ..registerSetters({'text': (o, v) => o.text = v});
-}
diff --git a/modules/angular2/test/transform/bind_generator/duplicate_bind_name_files/expected/soup.ng_deps.dart b/modules/angular2/test/transform/bind_generator/duplicate_bind_name_files/expected/soup.ng_deps.dart
deleted file mode 100644
index ad00f2e2fb91..000000000000
--- a/modules/angular2/test/transform/bind_generator/duplicate_bind_name_files/expected/soup.ng_deps.dart
+++ /dev/null
@@ -1,26 +0,0 @@
-library dinner.soup.ng_deps.dart;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'soup.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(SoupComponent, {
-      'factory': () => new SoupComponent(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(
-            componentServices: const [SaladComponent],
-            properties: const ['menu'])
-      ]
-    })
-    ..registerType(SaladComponent, {
-      'factory': () => new SaladComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(properties: const ['menu'])]
-    })
-    ..registerSetters({'menu': (o, v) => o.menu = v});
-}
diff --git a/modules/angular2/test/transform/bind_generator/duplicate_bind_name_files/soup.ng_deps.dart b/modules/angular2/test/transform/bind_generator/duplicate_bind_name_files/soup.ng_deps.dart
deleted file mode 100644
index 76f45bc9919f..000000000000
--- a/modules/angular2/test/transform/bind_generator/duplicate_bind_name_files/soup.ng_deps.dart
+++ /dev/null
@@ -1,25 +0,0 @@
-library dinner.soup.ng_deps.dart;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'soup.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(SoupComponent, {
-      'factory': () => new SoupComponent(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(
-            componentServices: const [SaladComponent],
-            properties: const ['menu'])
-      ]
-    })
-    ..registerType(SaladComponent, {
-      'factory': () => new SaladComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(properties: const ['menu'])]
-    });
-}
diff --git a/modules/angular2/test/transform/bind_generator/events_files/bar.ng_deps.dart b/modules/angular2/test/transform/bind_generator/events_files/bar.ng_deps.dart
deleted file mode 100644
index 53018d38a205..000000000000
--- a/modules/angular2/test/transform/bind_generator/events_files/bar.ng_deps.dart
+++ /dev/null
@@ -1,19 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(ToolTip, {
-      'factory': () => new ToolTip(),
-      'parameters': const [],
-      'annotations': const [
-        const Directive(
-            selector: '[tool-tip]',  events: ['onOpen', 'close: onClose'])
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/bind_generator/events_files/expected/bar.ng_deps.dart b/modules/angular2/test/transform/bind_generator/events_files/expected/bar.ng_deps.dart
deleted file mode 100644
index 1eb72606956a..000000000000
--- a/modules/angular2/test/transform/bind_generator/events_files/expected/bar.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(ToolTip, {
-      'factory': () => new ToolTip(),
-      'parameters': const [],
-      'annotations': const [
-        const Directive(
-            selector: '[tool-tip]', events: ['onOpen', 'close: onClose'])
-      ]
-    })
-    ..registerGetters({'onOpen': (o) => o.onOpen, 'onClose': (o) => o.close});
-}
diff --git a/modules/angular2/test/transform/common/application.dart b/modules/angular2/test/transform/common/application.dart
deleted file mode 100644
index 39e48857f5e5..000000000000
--- a/modules/angular2/test/transform/common/application.dart
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
-// for details. All rights reserved. Use of this source code is governed by a
-// BSD-style license that can be found in the LICENSE file.
-library angular2.test.transform;
-
-import 'dart:async';
-
-/// Mocked out version of `bootstrap`, defined in application.dart. Importing
-/// the actual file in tests causes issues with resolution due to its
-/// transitive dependencies.
-Future bootstrap(Type appComponentType,
-    [List bindings = null, Function givenBootstrapErrorReporter = null]) {
-  return null;
-}
diff --git a/modules/angular2/test/transform/common/async_string_writer_tests.dart b/modules/angular2/test/transform/common/async_string_writer_tests.dart
deleted file mode 100644
index 933219b195ab..000000000000
--- a/modules/angular2/test/transform/common/async_string_writer_tests.dart
+++ /dev/null
@@ -1,106 +0,0 @@
-library angular2.test.transform.common.async_string_writer;
-
-import 'dart:async';
-import 'package:angular2/src/transform/common/async_string_writer.dart';
-import 'package:guinness/guinness.dart';
-
-void allTests() {
-  it('should function as a basic Writer without async calls.', () {
-    var writer = new AsyncStringWriter();
-    writer.print('hello');
-    expect('$writer').toEqual('hello');
-    writer.println(', world');
-    expect('$writer').toEqual('hello, world\n');
-  });
-
-  it('should concatenate futures added with `asyncPrint`.', () async {
-    var writer = new AsyncStringWriter();
-    writer.print('hello');
-    expect('$writer').toEqual('hello');
-    writer.asyncPrint(new Future.value(', world.'));
-    writer.print(' It is a beautiful day.');
-    expect(await writer.asyncToString())
-        .toEqual('hello, world. It is a beautiful day.');
-  });
-
-  it('should concatenate multiple futures regardless of order.', () async {
-    var completer1 = new Completer<String>();
-    var completer2 = new Completer<String>();
-
-    var writer = new AsyncStringWriter();
-    writer.print('hello');
-    expect('$writer').toEqual('hello');
-    writer.asyncPrint(completer1.future);
-    writer.asyncPrint(completer2.future);
-
-    completer2.complete(' It is a beautiful day.');
-    completer1.complete(', world.');
-
-    expect(await writer.asyncToString())
-        .toEqual('hello, world. It is a beautiful day.');
-  });
-
-  it('should allow multiple "rounds" of `asyncPrint`.', () async {
-    var writer = new AsyncStringWriter();
-    writer.print('hello');
-    expect('$writer').toEqual('hello');
-    writer.asyncPrint(new Future.value(', world.'));
-    expect(await writer.asyncToString()).toEqual('hello, world.');
-
-    writer.asyncPrint(new Future.value(' It is '));
-    writer.asyncPrint(new Future.value('a beautiful '));
-    writer.asyncPrint(new Future.value('day.'));
-
-    expect(await writer.asyncToString())
-        .toEqual('hello, world. It is a beautiful day.');
-  });
-
-  it('should handle calls to async methods while waiting.', () {
-    var completer1 = new Completer<String>();
-    var completer2 = new Completer<String>();
-
-    var writer = new AsyncStringWriter();
-    writer.print('hello');
-    expect('$writer').toEqual('hello');
-
-    writer.asyncPrint(completer1.future);
-    var f1 = writer.asyncToString().then((result) {
-      expect(result).toEqual('hello, world.');
-    });
-
-    writer.asyncPrint(completer2.future);
-    var f2 = writer.asyncToString().then((result) {
-      expect(result).toEqual('hello, world. It is a beautiful day.');
-    });
-
-    completer1.complete(', world.');
-    completer2.complete(' It is a beautiful day.');
-
-    return Future.wait([f1, f2]);
-  });
-
-  it('should handle calls to async methods that complete in reverse '
-      'order while waiting.', () {
-    var completer1 = new Completer<String>();
-    var completer2 = new Completer<String>();
-
-    var writer = new AsyncStringWriter();
-    writer.print('hello');
-    expect('$writer').toEqual('hello');
-
-    writer.asyncPrint(completer1.future);
-    var f1 = writer.asyncToString().then((result) {
-      expect(result).toEqual('hello, world.');
-    });
-
-    writer.asyncPrint(completer2.future);
-    var f2 = writer.asyncToString().then((result) {
-      expect(result).toEqual('hello, world. It is a beautiful day.');
-    });
-
-    completer2.complete(' It is a beautiful day.');
-    completer1.complete(', world.');
-
-    return Future.wait([f1, f2]);
-  });
-}
diff --git a/modules/angular2/test/transform/common/read_file.dart b/modules/angular2/test/transform/common/read_file.dart
deleted file mode 100644
index 257835881a9d..000000000000
--- a/modules/angular2/test/transform/common/read_file.dart
+++ /dev/null
@@ -1,47 +0,0 @@
-library angular2.test.transform.common.read_file;
-
-import 'dart:async';
-import 'dart:convert';
-import 'dart:io';
-
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:barback/barback.dart';
-
-/// Smooths over differences in CWD between IDEs and running tests in Travis.
-String readFile(String path) {
-  for (var myPath in [path, 'test/transform/${path}']) {
-    var file = new File(myPath);
-    if (file.existsSync()) {
-      return file.readAsStringSync();
-    }
-  }
-  return null;
-}
-
-class TestAssetReader implements AssetReader {
-  /// This allows "faking"
-  final Map<AssetId, String> _overrideAssets = <AssetId, String>{};
-
-  Future<String> readAsString(AssetId id, {Encoding encoding}) {
-    if (_overrideAssets.containsKey(id)) {
-      return new Future.value(_overrideAssets[id]);
-    } else {
-      return new Future.value(readFile(id.path));
-    }
-  }
-
-  Future<bool> hasInput(AssetId id) {
-    var exists = _overrideAssets.containsKey(id);
-    if (exists) return new Future.value(true);
-
-    for (var myPath in [id.path, 'test/transform/${id.path}']) {
-      var file = new File(myPath);
-      exists = exists || file.existsSync();
-    }
-    return new Future.value(exists);
-  }
-
-  void addAsset(AssetId id, String contents) {
-    _overrideAssets[id] = contents;
-  }
-}
diff --git a/modules/angular2/test/transform/common/reflection_capabilities.dart b/modules/angular2/test/transform/common/reflection_capabilities.dart
deleted file mode 100644
index f54f6457b54e..000000000000
--- a/modules/angular2/test/transform/common/reflection_capabilities.dart
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
-// for details. All rights reserved. Use of this source code is governed by a
-// BSD-style license that can be found in the LICENSE file.
-library angular2.test.transform;
-
-/// Mocked out version of {@link ReflectionCapabilities}, defined in
-/// src/reflection/reflection_capabilities.dart. Importing the actual file in
-/// tests causes issues with resolution due to transitive dependencies.
-class ReflectionCapabilities {}
diff --git a/modules/angular2/test/transform/directive_linker/all_tests.dart b/modules/angular2/test/transform/directive_linker/all_tests.dart
deleted file mode 100644
index e8c3e60b1e70..000000000000
--- a/modules/angular2/test/transform/directive_linker/all_tests.dart
+++ /dev/null
@@ -1,45 +0,0 @@
-library angular2.test.transform.directive_linker.all_tests;
-
-import 'package:barback/barback.dart';
-import 'package:angular2/src/transform/directive_linker/linker.dart';
-import 'package:dart_style/dart_style.dart';
-import 'package:guinness/guinness.dart';
-
-import '../common/read_file.dart';
-
-var formatter = new DartFormatter();
-
-void allTests() {
-  var reader = new TestAssetReader();
-
-  it('should ensure that dependencies are property chained.', () async {
-    for (var inputPath in [
-      'bar.ng_deps.dart',
-      'foo.ng_deps.dart',
-      'index.ng_deps.dart'
-    ]) {
-      var expected =
-          readFile('directive_linker/simple_files/expected/$inputPath');
-      inputPath = 'directive_linker/simple_files/$inputPath';
-      var actual = formatter
-          .format(await linkNgDeps(reader, new AssetId('a', inputPath)));
-      expect(actual).toEqual(expected);
-    }
-  });
-
-  it('should ensure that exported dependencies are property chained.',
-      () async {
-    for (var inputPath in [
-      'bar.ng_deps.dart',
-      'foo.ng_deps.dart',
-      'index.ng_deps.dart'
-    ]) {
-      var expected =
-          readFile('directive_linker/simple_export_files/expected/$inputPath');
-      inputPath = 'directive_linker/simple_export_files/$inputPath';
-      var actual = formatter
-          .format(await linkNgDeps(reader, new AssetId('a', inputPath)));
-      expect(actual).toEqual(expected);
-    }
-  });
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_export_files/bar.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_export_files/bar.ng_deps.dart
deleted file mode 100644
index 83e8c0bc9257..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_export_files/bar.ng_deps.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-export 'foo.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(MyComponent, {
-      'factory': () => new MyComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[soup]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_export_files/expected/bar.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_export_files/expected/bar.ng_deps.dart
deleted file mode 100644
index 02d89317f665..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_export_files/expected/bar.ng_deps.dart
+++ /dev/null
@@ -1,19 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-export 'foo.dart';
-import 'foo.ng_deps.dart' as i0;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(MyComponent, {
-      'factory': () => new MyComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[soup]')]
-    });
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_export_files/expected/foo.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_export_files/expected/foo.ng_deps.dart
deleted file mode 100644
index 0b7e7e7c4028..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_export_files/expected/foo.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'foo.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(DependencyComponent, {
-      'factory': () => new DependencyComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[salad]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_export_files/expected/index.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_export_files/expected/index.ng_deps.dart
deleted file mode 100644
index 978e6da400e1..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_export_files/expected/index.ng_deps.dart
+++ /dev/null
@@ -1,13 +0,0 @@
-library web_foo.ng_deps.dart;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'bar.dart';
-import 'bar.ng_deps.dart' as i0;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_export_files/foo.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_export_files/foo.ng_deps.dart
deleted file mode 100644
index 0b7e7e7c4028..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_export_files/foo.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'foo.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(DependencyComponent, {
-      'factory': () => new DependencyComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[salad]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_export_files/index.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_export_files/index.ng_deps.dart
deleted file mode 100644
index b50e664e5927..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_export_files/index.ng_deps.dart
+++ /dev/null
@@ -1,11 +0,0 @@
-library web_foo.ng_deps.dart;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'bar.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_files/bar.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_files/bar.ng_deps.dart
deleted file mode 100644
index 2cf2b550dd0a..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_files/bar.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'foo.dart' as dep;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(MyComponent, {
-      'factory': () => new MyComponent(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(
-            selector: '[soup]', viewInjector: const [dep.DependencyComponent])
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_files/expected/bar.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_files/expected/bar.ng_deps.dart
deleted file mode 100644
index b713fd1aa035..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_files/expected/bar.ng_deps.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'foo.dart' as dep;
-import 'foo.ng_deps.dart' as i0;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(MyComponent, {
-      'factory': () => new MyComponent(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(
-            selector: '[soup]', viewInjector: const [dep.DependencyComponent])
-      ]
-    });
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_files/expected/foo.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_files/expected/foo.ng_deps.dart
deleted file mode 100644
index 0b7e7e7c4028..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_files/expected/foo.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'foo.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(DependencyComponent, {
-      'factory': () => new DependencyComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[salad]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_files/expected/index.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_files/expected/index.ng_deps.dart
deleted file mode 100644
index 978e6da400e1..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_files/expected/index.ng_deps.dart
+++ /dev/null
@@ -1,13 +0,0 @@
-library web_foo.ng_deps.dart;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'bar.dart';
-import 'bar.ng_deps.dart' as i0;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_files/foo.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_files/foo.ng_deps.dart
deleted file mode 100644
index 0b7e7e7c4028..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_files/foo.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'foo.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(DependencyComponent, {
-      'factory': () => new DependencyComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[salad]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_linker/simple_files/index.ng_deps.dart b/modules/angular2/test/transform/directive_linker/simple_files/index.ng_deps.dart
deleted file mode 100644
index b50e664e5927..000000000000
--- a/modules/angular2/test/transform/directive_linker/simple_files/index.ng_deps.dart
+++ /dev/null
@@ -1,11 +0,0 @@
-library web_foo.ng_deps.dart;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'bar.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/absolute_export_files/bar.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/absolute_export_files/bar.ng_deps.dart
deleted file mode 100644
index 381592661d02..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/absolute_export_files/bar.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(BarComponent, {
-      'factory': () => new BarComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[bar]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/absolute_export_files/foo.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/absolute_export_files/foo.ng_deps.dart
deleted file mode 100644
index 17cba130ac8c..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/absolute_export_files/foo.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'foo.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-export 'package:bar/bar.dart';
-import 'package:bar/bar.ng_deps.dart' as i0;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(FooComponent, {
-      'factory': () => new FooComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[foo]')]
-    });
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/adjacent_strings_files/foo.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/adjacent_strings_files/foo.ng_deps.dart
deleted file mode 100644
index 3a1505dc411a..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/adjacent_strings_files/foo.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'foo.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(FooComponent, {
-      'factory': () => new FooComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[fo' 'o]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/all_tests.dart b/modules/angular2/test/transform/directive_metadata_extractor/all_tests.dart
deleted file mode 100644
index 9f90a0b87490..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/all_tests.dart
+++ /dev/null
@@ -1,193 +0,0 @@
-library angular2.test.transform.directive_metadata_extractor.all_tests;
-
-import 'dart:async';
-import 'package:angular2/src/render/api.dart';
-import 'package:angular2/src/render/dom/convert.dart';
-import 'package:angular2/src/transform/common/directive_metadata_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-import 'package:angular2/src/transform/common/ng_deps.dart';
-import 'package:angular2/src/transform/directive_metadata_extractor/'
-    'extractor.dart';
-import 'package:barback/barback.dart';
-import 'package:dart_style/dart_style.dart';
-import 'package:guinness/guinness.dart';
-
-import '../common/read_file.dart';
-
-var formatter = new DartFormatter();
-
-void allTests() {
-  TestAssetReader reader = null;
-
-  beforeEach(() {
-    setLogger(new PrintLogger());
-    reader = new TestAssetReader();
-  });
-
-  Future<DirectiveMetadata> readMetadata(inputPath) async {
-    var ngDeps = await NgDeps.parse(reader, new AssetId('a', inputPath));
-    return ngDeps.registeredTypes.first.directiveMetadata;
-  }
-
-  describe('readMetadata', () {
-    it('should parse selectors', () async {
-      var metadata = await readMetadata(
-          'directive_metadata_extractor/directive_metadata_files/'
-          'selector.ng_deps.dart');
-      expect(metadata.selector).toEqual('hello-app');
-    });
-
-    it('should parse compile children values', () async {
-      var ngDeps = await NgDeps.parse(reader, new AssetId('a',
-          'directive_metadata_extractor/'
-          'directive_metadata_files/compile_children.ng_deps.dart'));
-      var it = ngDeps.registeredTypes.iterator;
-
-      // Unset value defaults to `true`.
-      it.moveNext();
-      expect('${it.current.typeName}').toEqual('UnsetComp');
-      var unsetComp = it.current.directiveMetadata;
-      expect(unsetComp.compileChildren).toBeTrue();
-
-      it.moveNext();
-      expect('${it.current.typeName}').toEqual('FalseComp');
-      var falseComp = it.current.directiveMetadata;
-      expect(falseComp.compileChildren).toBeFalse();
-
-      it.moveNext();
-      expect('${it.current.typeName}').toEqual('TrueComp');
-      var trueComp = it.current.directiveMetadata;
-      expect(trueComp.compileChildren).toBeTrue();
-    });
-
-    it('should parse properties.', () async {
-      var metadata = await readMetadata('directive_metadata_extractor/'
-          'directive_metadata_files/properties.ng_deps.dart');
-      expect(metadata.properties).toBeNotNull();
-      expect(metadata.properties.length).toBe(2);
-      expect(metadata.properties).toContain('key1: val1');
-      expect(metadata.properties).toContain('key2: val2');
-    });
-
-    it('should parse exportAs.', () async {
-      var metadata = await readMetadata('directive_metadata_extractor/'
-          'directive_metadata_files/directive_export_as.ng_deps.dart');
-      expect(metadata.exportAs).toEqual('exportAsName');
-    });
-
-    it('should parse host.', () async {
-      var metadata = await readMetadata('directive_metadata_extractor/'
-          'directive_metadata_files/host_listeners.ng_deps.dart');
-      expect(metadata.hostListeners).toBeNotNull();
-      expect(metadata.hostListeners.length).toBe(1);
-      expect(metadata.hostListeners).toContain('change');
-      expect(metadata.hostListeners['change']).toEqual('onChange(\$event)');
-
-      expect(metadata.hostProperties).toBeNotNull();
-      expect(metadata.hostProperties.length).toBe(1);
-      expect(metadata.hostProperties).toContain('value');
-      expect(metadata.hostProperties['value']).toEqual('value');
-
-      expect(metadata.hostAttributes).toBeNotNull();
-      expect(metadata.hostAttributes.length).toBe(1);
-      expect(metadata.hostAttributes).toContain('attName');
-      expect(metadata.hostAttributes['attName']).toEqual('attValue');
-
-      expect(metadata.hostActions).toBeNotNull();
-      expect(metadata.hostActions.length).toBe(1);
-      expect(metadata.hostActions).toContain('actionName');
-      expect(metadata.hostActions['actionName']).toEqual('actionValue');
-    });
-
-    it('should parse lifecycle events.', () async {
-      var metadata = await readMetadata('directive_metadata_extractor/'
-          'directive_metadata_files/lifecycle.ng_deps.dart');
-      expect(metadata.callOnDestroy).toBe(true);
-      expect(metadata.callOnChange).toBe(true);
-      expect(metadata.callOnCheck).toBe(true);
-      expect(metadata.callOnInit).toBe(true);
-      expect(metadata.callOnAllChangesDone).toBe(true);
-    });
-
-    it('should parse events.', () async {
-      var metadata = await readMetadata('directive_metadata_extractor/'
-          'directive_metadata_files/events.ng_deps.dart');
-      expect(metadata.events).toEqual(['onFoo', 'onBar']);
-    });
-
-    it('should parse changeDetection.', () async {
-      var metadata = await readMetadata('directive_metadata_extractor/'
-          'directive_metadata_files/changeDetection.ng_deps.dart');
-      expect(metadata.changeDetection).toEqual('CHECK_ONCE');
-    });
-
-    it('should fail when a class is annotated with multiple Directives.',
-        () async {
-      var ngDeps = await NgDeps.parse(reader, new AssetId('a',
-          'directive_metadata_extractor/'
-          'directive_metadata_files/too_many_directives.ng_deps.dart'));
-      expect(() => ngDeps.registeredTypes.first.directiveMetadata).toThrowWith(
-          anInstanceOf: PrintLoggerError);
-    });
-  });
-
-  describe('extractMetadata', () {
-    it('should generate `DirectiveMetadata` from .ng_deps.dart files.',
-        () async {
-      var extracted = await extractDirectiveMetadata(reader, new AssetId(
-          'a', 'directive_metadata_extractor/simple_files/foo.ng_deps.dart'));
-      expect(extracted).toContain('FooComponent');
-
-      var extractedMeta = extracted['FooComponent'];
-      expect(extractedMeta.selector).toEqual('[foo]');
-    });
-
-    it('should generate `DirectiveMetadata` from .ng_deps.dart files that use '
-        'automatic adjacent string concatenation.', () async {
-      var extracted = await extractDirectiveMetadata(reader, new AssetId('a',
-          'directive_metadata_extractor/adjacent_strings_files/'
-          'foo.ng_deps.dart'));
-      expect(extracted).toContain('FooComponent');
-
-      var extractedMeta = extracted['FooComponent'];
-      expect(extractedMeta.selector).toEqual('[foo]');
-    });
-
-    it('should include `DirectiveMetadata` from exported files.', () async {
-      var extracted = await extractDirectiveMetadata(reader, new AssetId(
-          'a', 'directive_metadata_extractor/export_files/foo.ng_deps.dart'));
-      expect(extracted).toContain('FooComponent');
-      expect(extracted).toContain('BarComponent');
-
-      expect(extracted['FooComponent'].selector).toEqual('[foo]');
-      expect(extracted['BarComponent'].selector).toEqual('[bar]');
-    });
-
-    it('should include `DirectiveMetadata` recursively from exported files.',
-        () async {
-      var extracted = await extractDirectiveMetadata(reader, new AssetId('a',
-          'directive_metadata_extractor/recursive_export_files/foo.ng_deps.dart'));
-      expect(extracted).toContain('FooComponent');
-      expect(extracted).toContain('BarComponent');
-      expect(extracted).toContain('BazComponent');
-
-      expect(extracted['FooComponent'].selector).toEqual('[foo]');
-      expect(extracted['BarComponent'].selector).toEqual('[bar]');
-      expect(extracted['BazComponent'].selector).toEqual('[baz]');
-    });
-
-    it('should include `DirectiveMetadata` from exported files '
-        'expressed as absolute uris', () async {
-      reader.addAsset(new AssetId('bar', 'lib/bar.ng_deps.dart'), readFile(
-          'directive_metadata_extractor/absolute_export_files/bar.ng_deps.dart'));
-
-      var extracted = await extractDirectiveMetadata(reader, new AssetId('a',
-          'directive_metadata_extractor/absolute_export_files/foo.ng_deps.dart'));
-      expect(extracted).toContain('FooComponent');
-      expect(extracted).toContain('BarComponent');
-
-      expect(extracted['FooComponent'].selector).toEqual('[foo]');
-      expect(extracted['BarComponent'].selector).toEqual('[bar]');
-    });
-  });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/changeDetection.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/changeDetection.ng_deps.dart
deleted file mode 100644
index fca8e31f2321..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/changeDetection.ng_deps.dart
+++ /dev/null
@@ -1,27 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show
-        bootstrap,
-        Component,
-        Directive,
-        View,
-        NgElement,
-        onChange,
-        onDestroy,
-        onInit,
-        onCheck,
-        onAllChangesDone;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [const Component(changeDetection: 'CHECK_ONCE')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/compile_children.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/compile_children.ng_deps.dart
deleted file mode 100644
index 91502ba4ad6c..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/compile_children.ng_deps.dart
+++ /dev/null
@@ -1,26 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(UnsetComp, {
-      'factory': () => new UnsetComp(),
-      'parameters': const [const []],
-      'annotations': const [const Directive()]
-    })
-    ..registerType(FalseComp, {
-      'factory': () => new FalseComp(),
-      'parameters': const [const []],
-      'annotations': const [const Directive(compileChildren: false)]
-    })
-    ..registerType(TrueComp, {
-      'factory': () => new TrueComp(),
-      'parameters': const [const []],
-      'annotations': const [const Directive(compileChildren: true)]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/directive_export_as.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/directive_export_as.ng_deps.dart
deleted file mode 100644
index 8c414c9998f6..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/directive_export_as.ng_deps.dart
+++ /dev/null
@@ -1,27 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show
-        bootstrap,
-        Component,
-        Directive,
-        View,
-        NgElement,
-        onChange,
-        onDestroy,
-        onInit,
-        onCheck,
-        onAllChangesDone;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [const Directive(exportAs: 'exportAsName')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/events.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/events.ng_deps.dart
deleted file mode 100644
index 9227814796fc..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/events.ng_deps.dart
+++ /dev/null
@@ -1,27 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show
-        bootstrap,
-        Component,
-        Directive,
-        View,
-        NgElement,
-        onChange,
-        onDestroy,
-        onInit,
-        onCheck,
-        onAllChangesDone;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [const Component(events: ['onFoo', 'onBar'])]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/host_listeners.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/host_listeners.ng_deps.dart
deleted file mode 100644
index 6f86384db090..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/host_listeners.ng_deps.dart
+++ /dev/null
@@ -1,25 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(
-            host: const {
-          '(change)': 'onChange(\$event)',
-          '[value]': 'value',
-          '@actionName': 'actionValue',
-          'attName': 'attValue'
-        })
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/lifecycle.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/lifecycle.ng_deps.dart
deleted file mode 100644
index 1c38c2774d52..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/lifecycle.ng_deps.dart
+++ /dev/null
@@ -1,30 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show
-        bootstrap,
-        Component,
-        Directive,
-        View,
-        NgElement,
-        onChange,
-        onDestroy,
-        onInit,
-        onCheck,
-        onAllChangesDone;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(
-            lifecycle: [onChange, onDestroy, onInit, onCheck, onAllChangesDone])
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/properties.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/properties.ng_deps.dart
deleted file mode 100644
index 1d552bd94d10..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/properties.ng_deps.dart
+++ /dev/null
@@ -1,19 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(properties: const ['key1: val1', 'key2: val2'])
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/selector.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/selector.ng_deps.dart
deleted file mode 100644
index a47d5e397191..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/selector.ng_deps.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [const Component(selector: 'hello-app')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/too_many_directives.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/too_many_directives.ng_deps.dart
deleted file mode 100644
index 48df7a89854d..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/directive_metadata_files/too_many_directives.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const Component(selector: 'goodbye-app')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/export_files/bar.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/export_files/bar.ng_deps.dart
deleted file mode 100644
index 381592661d02..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/export_files/bar.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(BarComponent, {
-      'factory': () => new BarComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[bar]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/export_files/foo.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/export_files/foo.ng_deps.dart
deleted file mode 100644
index 57e2c54e7918..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/export_files/foo.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'foo.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-export 'bar.dart';
-import 'bar.ng_deps.dart' as i0;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(FooComponent, {
-      'factory': () => new FooComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[foo]')]
-    });
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/recursive_export_files/bar.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/recursive_export_files/bar.ng_deps.dart
deleted file mode 100644
index 6a1aade971f9..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/recursive_export_files/bar.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-export 'baz.dart';
-import 'baz.ng_deps.dart' as i0;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(BarComponent, {
-      'factory': () => new BarComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[bar]')]
-    });
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/recursive_export_files/baz.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/recursive_export_files/baz.ng_deps.dart
deleted file mode 100644
index 476e668ee587..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/recursive_export_files/baz.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'baz.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(BazComponent, {
-      'factory': () => new BazComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[baz]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/recursive_export_files/foo.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/recursive_export_files/foo.ng_deps.dart
deleted file mode 100644
index 57e2c54e7918..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/recursive_export_files/foo.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library foo.ng_deps.dart;
-
-import 'foo.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-export 'bar.dart';
-import 'bar.ng_deps.dart' as i0;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(FooComponent, {
-      'factory': () => new FooComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[foo]')]
-    });
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/directive_metadata_extractor/simple_files/foo.ng_deps.dart b/modules/angular2/test/transform/directive_metadata_extractor/simple_files/foo.ng_deps.dart
deleted file mode 100644
index a0fcd9b1b26f..000000000000
--- a/modules/angular2/test/transform/directive_metadata_extractor/simple_files/foo.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'foo.dart';
-import 'package:angular2/src/core/annotations/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(FooComponent, {
-      'factory': () => new FooComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[foo]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/expected/hello.ng_deps.dart
deleted file mode 100644
index abe87351b79b..000000000000
--- a/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library examples.src.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(
-            template: r'''{{greeting}}''',
-            styles: const [r'''.greeting { .color: blue; }''',])
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/hello.dart b/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/hello.dart
deleted file mode 100644
index 6980e925c3e9..000000000000
--- a/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/hello.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library examples.src.hello_world.index_common_dart;
-
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-@Component(selector: 'hello-app')
-@View(
-    templateUrl: 'package:other_package/template.html',
-    styleUrls: const ['package:other_package/template.css'])
-class HelloCmp {}
diff --git a/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/template.css b/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/template.css
deleted file mode 100644
index c48477652eba..000000000000
--- a/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/template.css
+++ /dev/null
@@ -1 +0,0 @@
-.greeting { .color: blue; }
\ No newline at end of file
diff --git a/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/template.html b/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/template.html
deleted file mode 100644
index d75013393f21..000000000000
--- a/modules/angular2/test/transform/directive_processor/absolute_url_expression_files/template.html
+++ /dev/null
@@ -1 +0,0 @@
-{{greeting}}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/directive_processor/all_tests.dart b/modules/angular2/test/transform/directive_processor/all_tests.dart
deleted file mode 100644
index 953c9fdd02b3..000000000000
--- a/modules/angular2/test/transform/directive_processor/all_tests.dart
+++ /dev/null
@@ -1,158 +0,0 @@
-library angular2.test.transform.directive_processor.all_tests;
-
-import 'package:barback/barback.dart';
-import 'package:angular2/src/transform/directive_processor/rewriter.dart';
-import 'package:angular2/src/transform/common/annotation_matcher.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart' as log;
-import 'package:code_transformers/messages/build_logger.dart';
-import 'package:dart_style/dart_style.dart';
-import 'package:guinness/guinness.dart';
-import 'package:path/path.dart' as path;
-import '../common/read_file.dart';
-
-var formatter = new DartFormatter();
-
-main() {
-  allTests();
-}
-
-void allTests() {
-  _testNgDeps('should preserve parameter annotations as const instances.',
-      'parameter_metadata/soup.dart');
-
-  _testNgDeps('should recognize custom annotations with package: imports',
-      'custom_metadata/package_soup.dart',
-      customDescriptors: [
-    const AnnotationDescriptor('Soup', 'package:soup/soup.dart', 'Component'),
-  ]);
-
-  _testNgDeps('should recognize custom annotations with relative imports',
-      'custom_metadata/relative_soup.dart',
-      assetId: new AssetId('soup', 'lib/relative_soup.dart'),
-      customDescriptors: [
-    const AnnotationDescriptor(
-        'Soup', 'package:soup/annotations/soup.dart', 'Component'),
-  ]);
-
-  _testNgDeps('Requires the specified import.', 'custom_metadata/bad_soup.dart',
-      customDescriptors: [
-    const AnnotationDescriptor('Soup', 'package:soup/soup.dart', 'Component'),
-  ]);
-
-  _testNgDeps(
-      'should inline `templateUrl` values.', 'url_expression_files/hello.dart');
-
-  var absoluteReader = new TestAssetReader();
-  absoluteReader.addAsset(new AssetId('other_package', 'lib/template.html'),
-      readFile(
-          'directive_processor/absolute_url_expression_files/template.html'));
-  absoluteReader.addAsset(new AssetId('other_package', 'lib/template.css'),
-      readFile(
-          'directive_processor/absolute_url_expression_files/template.css'));
-  _testNgDeps('should inline `templateUrl` and `styleUrls` values expressed as'
-      ' absolute urls.', 'absolute_url_expression_files/hello.dart',
-      reader: absoluteReader);
-
-  _testNgDeps(
-      'should inline multiple `styleUrls` values expressed as absolute urls.',
-      'multiple_style_urls_files/hello.dart');
-
-  absoluteReader.addAsset(new AssetId('a', 'lib/template.html'),
-      readFile('directive_processor/multiple_style_urls_files/template.html'));
-  absoluteReader.addAsset(new AssetId('a', 'lib/template.css'),
-      readFile('directive_processor/multiple_style_urls_files/template.css'));
-  absoluteReader.addAsset(new AssetId('a', 'lib/template_other.css'), readFile(
-      'directive_processor/multiple_style_urls_files/template_other.css'));
-  _testNgDeps(
-      'shouldn\'t inline multiple `styleUrls` values expressed as absolute '
-      'urls.', 'multiple_style_urls_not_inlined_files/hello.dart',
-      inlineViews: false, reader: absoluteReader);
-
-  _testNgDeps('should inline `templateUrl`s expressed as adjacent strings.',
-      'split_url_expression_files/hello.dart');
-
-  _testNgDeps('should report implemented types as `interfaces`.',
-      'interfaces_files/soup.dart');
-
-  _testNgDeps('should not include transitively implemented types.',
-      'interface_chain_files/soup.dart');
-
-  _testNgDeps('should not include superclasses in `interfaces`.',
-      'superclass_files/soup.dart');
-
-  _testNgDeps(
-      'should not throw/hang on invalid urls', 'invalid_url_files/hello.dart',
-      expectedLogs: [
-    'ERROR: Uri /bad/absolute/url.html not supported from angular2|test/'
-        'transform/directive_processor/invalid_url_files/hello.dart, could not '
-        'build AssetId',
-    'ERROR: Could not read asset at uri package:invalid/package.css from '
-        'angular2|test/transform/directive_processor/invalid_url_files/'
-        'hello.dart',
-    'ERROR: Could not read asset at uri bad_relative_url.css from angular2|'
-        'test/transform/directive_processor/invalid_url_files/hello.dart'
-  ]);
-}
-
-void _testNgDeps(String name, String inputPath,
-    {List<AnnotationDescriptor> customDescriptors: const [], AssetId assetId,
-    AssetReader reader, List<String> expectedLogs, bool inlineViews: true}) {
-  it(name, () async {
-    if (expectedLogs != null) {
-      log.setLogger(new RecordingLogger());
-    }
-
-    var inputId = _assetIdForPath(inputPath);
-    if (reader == null) {
-      reader = new TestAssetReader();
-    }
-    if (assetId != null) {
-      reader.addAsset(assetId, await reader.readAsString(inputId));
-      inputId = assetId;
-    }
-    var expectedPath = path.join(path.dirname(inputPath), 'expected',
-        path.basename(inputPath).replaceFirst('.dart', '.ng_deps.dart'));
-    var expectedId = _assetIdForPath(expectedPath);
-
-    var annotationMatcher = new AnnotationMatcher()..addAll(customDescriptors);
-    var output =
-        await createNgDeps(reader, inputId, annotationMatcher, inlineViews);
-    if (output == null) {
-      expect(await reader.hasInput(expectedId)).toBeFalse();
-    } else {
-      expect(formatter.format(output))
-          .toEqual((await reader.readAsString(expectedId)).replaceAll('\r\n', '\n'));
-    }
-
-    if (expectedLogs != null) {
-      expect((log.logger as RecordingLogger).logs, expectedLogs);
-    }
-  });
-}
-
-AssetId _assetIdForPath(String path) =>
-    new AssetId('angular2', 'test/transform/directive_processor/$path');
-
-class RecordingLogger implements BuildLogger {
-  @override
-  final String detailsUri = '';
-  @override
-  final bool convertErrorsToWarnings = false;
-
-  List<String> logs = [];
-
-  void _record(prefix, msg) => logs.add('$prefix: $msg');
-
-  void info(msg, {AssetId asset, SourceSpan span}) => _record('INFO', msg);
-
-  void fine(msg, {AssetId asset, SourceSpan span}) => _record('FINE', msg);
-
-  void warning(msg, {AssetId asset, SourceSpan span}) => _record('WARN', msg);
-
-  void error(msg, {AssetId asset, SourceSpan span}) => _record('ERROR', msg);
-
-  Future writeOutput() => throw new UnimplementedError();
-  Future addLogFilesFromAsset(AssetId id, [int nextNumber = 1]) =>
-      throw new UnimplementedError();
-}
diff --git a/modules/angular2/test/transform/directive_processor/custom_metadata/bad_soup.dart b/modules/angular2/test/transform/directive_processor/custom_metadata/bad_soup.dart
deleted file mode 100644
index e6caa22a8c7a..000000000000
--- a/modules/angular2/test/transform/directive_processor/custom_metadata/bad_soup.dart
+++ /dev/null
@@ -1,8 +0,0 @@
-library dinner.bad_soup;
-
-// No recognized import for [Soup]
-
-@Soup()
-class BadSoup {
-  BadSoup();
-}
diff --git a/modules/angular2/test/transform/directive_processor/custom_metadata/expected/package_soup.ng_deps.dart b/modules/angular2/test/transform/directive_processor/custom_metadata/expected/package_soup.ng_deps.dart
deleted file mode 100644
index fdcd3e209262..000000000000
--- a/modules/angular2/test/transform/directive_processor/custom_metadata/expected/package_soup.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library dinner.package_soup.ng_deps.dart;
-
-import 'package_soup.dart';
-import 'package:soup/soup.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(PackageSoup, {
-      'factory': () => new PackageSoup(),
-      'parameters': const [],
-      'annotations': const [const Soup()]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/custom_metadata/expected/relative_soup.ng_deps.dart b/modules/angular2/test/transform/directive_processor/custom_metadata/expected/relative_soup.ng_deps.dart
deleted file mode 100644
index 56715719979b..000000000000
--- a/modules/angular2/test/transform/directive_processor/custom_metadata/expected/relative_soup.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library dinner.relative_soup.ng_deps.dart;
-
-import 'relative_soup.dart';
-import 'annotations/soup.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(RelativeSoup, {
-      'factory': () => new RelativeSoup(),
-      'parameters': const [],
-      'annotations': const [const Soup()]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/custom_metadata/package_soup.dart b/modules/angular2/test/transform/directive_processor/custom_metadata/package_soup.dart
deleted file mode 100644
index 3958e1d5c36d..000000000000
--- a/modules/angular2/test/transform/directive_processor/custom_metadata/package_soup.dart
+++ /dev/null
@@ -1,8 +0,0 @@
-library dinner.package_soup;
-
-import 'package:soup/soup.dart';
-
-@Soup()
-class PackageSoup {
-  PackageSoup();
-}
diff --git a/modules/angular2/test/transform/directive_processor/custom_metadata/relative_soup.dart b/modules/angular2/test/transform/directive_processor/custom_metadata/relative_soup.dart
deleted file mode 100644
index 39ef5553bb0b..000000000000
--- a/modules/angular2/test/transform/directive_processor/custom_metadata/relative_soup.dart
+++ /dev/null
@@ -1,8 +0,0 @@
-library dinner.relative_soup;
-
-import 'annotations/soup.dart';
-
-@Soup()
-class RelativeSoup {
-  RelativeSoup();
-}
diff --git a/modules/angular2/test/transform/directive_processor/expected/hello.ng_deps.dart b/modules/angular2/test/transform/directive_processor/expected/hello.ng_deps.dart
deleted file mode 100644
index 52e10e3aff64..000000000000
--- a/modules/angular2/test/transform/directive_processor/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,25 +0,0 @@
-library examples.src.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(
-            template: r'''{{greeting}}''',
-            styles: const [
-          r'''.greeting { .color: blue; }''',
-          r'''.hello { .color: red; }''',
-        ])
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/interface_chain_files/expected/soup.ng_deps.dart b/modules/angular2/test/transform/directive_processor/interface_chain_files/expected/soup.ng_deps.dart
deleted file mode 100644
index b6247f47579d..000000000000
--- a/modules/angular2/test/transform/directive_processor/interface_chain_files/expected/soup.ng_deps.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-library dinner.soup.ng_deps.dart;
-
-import 'soup.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(ChangingSoupComponent, {
-      'factory': () => new ChangingSoupComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[soup]')],
-      'interfaces': const [PrimaryInterface]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/interface_chain_files/soup.dart b/modules/angular2/test/transform/directive_processor/interface_chain_files/soup.dart
deleted file mode 100644
index 55de1a4cd426..000000000000
--- a/modules/angular2/test/transform/directive_processor/interface_chain_files/soup.dart
+++ /dev/null
@@ -1,12 +0,0 @@
-library dinner.soup;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-@Component(selector: '[soup]')
-class ChangingSoupComponent implements PrimaryInterface {}
-
-class TernaryInterface {}
-
-class SecondaryInterface implements TernaryInterface {}
-
-class PrimaryInterface implements SecondaryInterface {}
diff --git a/modules/angular2/test/transform/directive_processor/interfaces_files/expected/soup.ng_deps.dart b/modules/angular2/test/transform/directive_processor/interfaces_files/expected/soup.ng_deps.dart
deleted file mode 100644
index 3e8cd950921b..000000000000
--- a/modules/angular2/test/transform/directive_processor/interfaces_files/expected/soup.ng_deps.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-library dinner.soup.ng_deps.dart;
-
-import 'soup.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(ChangingSoupComponent, {
-      'factory': () => new ChangingSoupComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[soup]')],
-      'interfaces': const [OnChange]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/interfaces_files/soup.dart b/modules/angular2/test/transform/directive_processor/interfaces_files/soup.dart
deleted file mode 100644
index 0365174837c2..000000000000
--- a/modules/angular2/test/transform/directive_processor/interfaces_files/soup.dart
+++ /dev/null
@@ -1,6 +0,0 @@
-library dinner.soup;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-@Component(selector: '[soup]')
-class ChangingSoupComponent implements OnChange {}
diff --git a/modules/angular2/test/transform/directive_processor/invalid_url_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/directive_processor/invalid_url_files/expected/hello.ng_deps.dart
deleted file mode 100644
index fd43b3db002f..000000000000
--- a/modules/angular2/test/transform/directive_processor/invalid_url_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library test.transform.directive_processor.url_expression_files.hello.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: r'''''', styles: const [r'''''', r'''''',])
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/invalid_url_files/hello.dart b/modules/angular2/test/transform/directive_processor/invalid_url_files/hello.dart
deleted file mode 100644
index 3a0b965ef3c0..000000000000
--- a/modules/angular2/test/transform/directive_processor/invalid_url_files/hello.dart
+++ /dev/null
@@ -1,13 +0,0 @@
-library test.transform.directive_processor.url_expression_files.hello;
-
-import 'package:angular2/angular2.dart'
-show bootstrap, Component, Directive, View, NgElement;
-
-@Component(selector: 'hello-app')
-@View(
-    templateUrl: '/bad/absolute/url.html',
-    styleUrls: const [
-      'package:invalid/package.css',
-      'bad_relative_url.css'
-    ])
-class HelloCmp {}
diff --git a/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/expected/hello.ng_deps.dart
deleted file mode 100644
index 52e10e3aff64..000000000000
--- a/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,25 +0,0 @@
-library examples.src.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(
-            template: r'''{{greeting}}''',
-            styles: const [
-          r'''.greeting { .color: blue; }''',
-          r'''.hello { .color: red; }''',
-        ])
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/hello.dart b/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/hello.dart
deleted file mode 100644
index 74896ce269b9..000000000000
--- a/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/hello.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library examples.src.hello_world.index_common_dart;
-
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-@Component(selector: 'hello-app')
-@View(
-    templateUrl: 'template.html',
-    styleUrls: const ['template.css', 'template_other.css'])
-class HelloCmp {}
diff --git a/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/template.css b/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/template.css
deleted file mode 100644
index c48477652eba..000000000000
--- a/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/template.css
+++ /dev/null
@@ -1 +0,0 @@
-.greeting { .color: blue; }
\ No newline at end of file
diff --git a/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/template.html b/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/template.html
deleted file mode 100644
index d75013393f21..000000000000
--- a/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/template.html
+++ /dev/null
@@ -1 +0,0 @@
-{{greeting}}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/template_other.css b/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/template_other.css
deleted file mode 100644
index e461b8ddde06..000000000000
--- a/modules/angular2/test/transform/directive_processor/multiple_style_urls_files/template_other.css
+++ /dev/null
@@ -1 +0,0 @@
-.hello { .color: red; }
\ No newline at end of file
diff --git a/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/expected/hello.ng_deps.dart
deleted file mode 100644
index d54d5c3ebf72..000000000000
--- a/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,25 +0,0 @@
-library examples.src.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(
-            templateUrl: 'package:a/template.html',
-            styleUrls: const [
-          'package:a/template.css',
-          'package:a/template_other.css'
-        ])
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/hello.dart b/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/hello.dart
deleted file mode 100644
index 9fff519f4940..000000000000
--- a/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/hello.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library examples.src.hello_world.index_common_dart;
-
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-@Component(selector: 'hello-app')
-@View(
-    templateUrl: 'package:a/template.html',
-    styleUrls: const ['package:a/template.css', 'package:a/template_other.css'])
-class HelloCmp {}
diff --git a/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/template.css b/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/template.css
deleted file mode 100644
index c48477652eba..000000000000
--- a/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/template.css
+++ /dev/null
@@ -1 +0,0 @@
-.greeting { .color: blue; }
\ No newline at end of file
diff --git a/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/template.html b/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/template.html
deleted file mode 100644
index d75013393f21..000000000000
--- a/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/template.html
+++ /dev/null
@@ -1 +0,0 @@
-{{greeting}}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/template_other.css b/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/template_other.css
deleted file mode 100644
index e461b8ddde06..000000000000
--- a/modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/template_other.css
+++ /dev/null
@@ -1 +0,0 @@
-.hello { .color: red; }
\ No newline at end of file
diff --git a/modules/angular2/test/transform/directive_processor/parameter_metadata/expected/soup.ng_deps.dart b/modules/angular2/test/transform/directive_processor/parameter_metadata/expected/soup.ng_deps.dart
deleted file mode 100644
index d2a2ba6495fa..000000000000
--- a/modules/angular2/test/transform/directive_processor/parameter_metadata/expected/soup.ng_deps.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-library dinner.soup.ng_deps.dart;
-
-import 'soup.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(SoupComponent, {
-      'factory':
-          (String description, salt) => new SoupComponent(description, salt),
-      'parameters': const [const [Tasty, String], const [const Inject(Salt)]],
-      'annotations': const [const Component(selector: '[soup]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/parameter_metadata/soup.dart b/modules/angular2/test/transform/directive_processor/parameter_metadata/soup.dart
deleted file mode 100644
index 3024a40ea3e3..000000000000
--- a/modules/angular2/test/transform/directive_processor/parameter_metadata/soup.dart
+++ /dev/null
@@ -1,8 +0,0 @@
-library dinner.soup;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-@Component(selector: '[soup]')
-class SoupComponent {
-  SoupComponent(@Tasty String description, @Inject(Salt) salt);
-}
diff --git a/modules/angular2/test/transform/directive_processor/split_url_expression_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/directive_processor/split_url_expression_files/expected/hello.ng_deps.dart
deleted file mode 100644
index b877935fb031..000000000000
--- a/modules/angular2/test/transform/directive_processor/split_url_expression_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library examples.src.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: r'''{{greeting}}''')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/split_url_expression_files/hello.dart b/modules/angular2/test/transform/directive_processor/split_url_expression_files/hello.dart
deleted file mode 100644
index 14790703b25b..000000000000
--- a/modules/angular2/test/transform/directive_processor/split_url_expression_files/hello.dart
+++ /dev/null
@@ -1,8 +0,0 @@
-library examples.src.hello_world.index_common_dart;
-
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-@Component(selector: 'hello-app')
-@View(templateUrl: 'templ' 'ate.html')
-class HelloCmp {}
diff --git a/modules/angular2/test/transform/directive_processor/split_url_expression_files/template.html b/modules/angular2/test/transform/directive_processor/split_url_expression_files/template.html
deleted file mode 100644
index d75013393f21..000000000000
--- a/modules/angular2/test/transform/directive_processor/split_url_expression_files/template.html
+++ /dev/null
@@ -1 +0,0 @@
-{{greeting}}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/directive_processor/superclass_files/expected/soup.ng_deps.dart b/modules/angular2/test/transform/directive_processor/superclass_files/expected/soup.ng_deps.dart
deleted file mode 100644
index 377813bb16e8..000000000000
--- a/modules/angular2/test/transform/directive_processor/superclass_files/expected/soup.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library dinner.soup.ng_deps.dart;
-
-import 'soup.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(ChangingSoupComponent, {
-      'factory': () => new ChangingSoupComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[soup]')]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/superclass_files/soup.dart b/modules/angular2/test/transform/directive_processor/superclass_files/soup.dart
deleted file mode 100644
index ff4a921e125c..000000000000
--- a/modules/angular2/test/transform/directive_processor/superclass_files/soup.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library dinner.soup;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-@Component(selector: '[soup]')
-class ChangingSoupComponent extends Super {}
-
-class Iface {}
-
-class Super implements Iface {}
diff --git a/modules/angular2/test/transform/directive_processor/url_expression_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/directive_processor/url_expression_files/expected/hello.ng_deps.dart
deleted file mode 100644
index b877935fb031..000000000000
--- a/modules/angular2/test/transform/directive_processor/url_expression_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library examples.src.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: r'''{{greeting}}''')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/directive_processor/url_expression_files/hello.dart b/modules/angular2/test/transform/directive_processor/url_expression_files/hello.dart
deleted file mode 100644
index 5471f1eb1b3e..000000000000
--- a/modules/angular2/test/transform/directive_processor/url_expression_files/hello.dart
+++ /dev/null
@@ -1,8 +0,0 @@
-library examples.src.hello_world.index_common_dart;
-
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-@Component(selector: 'hello-app')
-@View(templateUrl: 'template.html')
-class HelloCmp {}
diff --git a/modules/angular2/test/transform/directive_processor/url_expression_files/template.html b/modules/angular2/test/transform/directive_processor/url_expression_files/template.html
deleted file mode 100644
index d75013393f21..000000000000
--- a/modules/angular2/test/transform/directive_processor/url_expression_files/template.html
+++ /dev/null
@@ -1 +0,0 @@
-{{greeting}}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/integration/all_tests.dart b/modules/angular2/test/transform/integration/all_tests.dart
deleted file mode 100644
index f32aa8c9397b..000000000000
--- a/modules/angular2/test/transform/integration/all_tests.dart
+++ /dev/null
@@ -1,131 +0,0 @@
-library angular2.test.transform.integration;
-
-import 'package:angular2/src/dom/html_adapter.dart';
-import 'package:angular2/transformer.dart';
-import 'package:code_transformers/tests.dart';
-import 'package:dart_style/dart_style.dart';
-
-import '../common/read_file.dart';
-
-main() {
-  allTests();
-}
-
-var formatter = new DartFormatter();
-var transform = new AngularTransformerGroup(new TransformerOptions(
-    ['web/index.dart'], reflectionEntryPoints: ['web/index.dart']));
-
-class IntegrationTestConfig {
-  final String name;
-  final Map<String, String> assetPathToInputPath;
-  final Map<String, String> assetPathToExpectedOutputPath;
-
-  IntegrationTestConfig(this.name,
-      {Map<String, String> inputs, Map<String, String> outputs})
-      : this.assetPathToInputPath = inputs,
-        this.assetPathToExpectedOutputPath = outputs;
-}
-
-void allTests() {
-  Html5LibDomAdapter.makeCurrent();
-
-  /*
-   * Each test has its own directory for inputs & an `expected` directory for
-   * expected outputs.
-   *
-   * In addition to these declared inputs, we inject a set of common inputs for
-   * every test.
-   */
-  var commonInputs = {
-    'angular2|lib/src/core/annotations_impl/annotations.dart':
-        '../../../lib/src/core/annotations_impl/annotations.dart',
-    'angular2|lib/src/core/application.dart': '../common/application.dart',
-    'angular2|lib/src/reflection/reflection_capabilities.dart':
-        '../common/reflection_capabilities.dart',
-    'angular2|lib/di.dart': '../../../lib/di.dart',
-    'angular2|lib/src/di/annotations_impl.dart':
-        '../../../lib/src/di/annotations_impl.dart',
-  };
-
-  var tests = [
-    new IntegrationTestConfig(
-        'should generate proper code for a Component defining only a selector.',
-        inputs: {
-      'a|web/index.dart': 'simple_annotation_files/index.dart',
-      'a|web/bar.dart': 'simple_annotation_files/bar.dart'
-    },
-        outputs: {
-      'a|web/bar.ng_deps.dart':
-          'simple_annotation_files/expected/bar.ng_deps.dart',
-      'a|web/bar.ng_meta.json':
-          'simple_annotation_files/expected/bar.ng_meta.json',
-      'a|web/index.ng_deps.dart':
-          'simple_annotation_files/expected/index.ng_deps.dart'
-    }),
-    new IntegrationTestConfig(
-        'should generate proper code for a Component with multiple deps.',
-        inputs: {
-      'a|web/index.dart': 'two_deps_files/index.dart',
-      'a|web/foo.dart': 'two_deps_files/foo.dart',
-      'a|web/bar.dart': 'two_deps_files/bar.dart'
-    },
-        outputs: {
-      'a|web/bar.ng_deps.dart': 'two_deps_files/expected/bar.ng_deps.dart'
-    }),
-    new IntegrationTestConfig(
-        'should generate proper code for a Component declaring a '
-        'componentService defined in another file.',
-        inputs: {
-      'a|web/index.dart': 'list_of_types_files/index.dart',
-      'a|web/foo.dart': 'list_of_types_files/foo.dart',
-      'a|web/bar.dart': 'list_of_types_files/bar.dart'
-    },
-        outputs: {
-      'a|web/bar.ng_deps.dart': 'list_of_types_files/expected/bar.ng_deps.dart'
-    }),
-    new IntegrationTestConfig(
-        'should generate a factory for a class with no declared ctor.',
-        inputs: {
-      'a|web/index.dart': 'synthetic_ctor_files/index.dart',
-      'a|web/bar.dart': 'synthetic_ctor_files/bar.dart'
-    },
-        outputs: {
-      'a|web/bar.ng_deps.dart': 'synthetic_ctor_files/expected/bar.ng_deps.dart'
-    }),
-    new IntegrationTestConfig('should preserve multiple annotations.',
-        inputs: {
-      'a|web/index.dart': 'two_annotations_files/index.dart',
-      'a|web/bar.dart': 'two_annotations_files/bar.dart',
-      'angular2|lib/src/core/annotations_impl/view.dart':
-          '../../../lib/src/core/annotations_impl/view.dart'
-    },
-        outputs: {
-      'a|web/bar.ng_deps.dart':
-          'two_annotations_files/expected/bar.ng_deps.dart'
-    })
-  ];
-
-  var cache = {};
-
-  for (var config in tests) {
-
-    // Read in input & output files.
-    config.assetPathToInputPath
-      ..addAll(commonInputs)
-      ..forEach((key, value) {
-        config.assetPathToInputPath[key] =
-            cache.putIfAbsent(value, () => _readFile(value));
-      });
-    config.assetPathToExpectedOutputPath.forEach((key, value) {
-      config.assetPathToExpectedOutputPath[key] = cache.putIfAbsent(value, () {
-        var code = _readFile(value);
-        return value.endsWith('dart') ? formatter.format(code) : code;
-      });
-    });
-    testPhases(config.name, [[transform]], config.assetPathToInputPath,
-        config.assetPathToExpectedOutputPath, []);
-  }
-}
-
-/// Smooths over differences in CWD between IDEs and running tests in Travis.
-String _readFile(String path) => readFile('integration/$path');
diff --git a/modules/angular2/test/transform/integration/list_of_types_files/bar.dart b/modules/angular2/test/transform/integration/list_of_types_files/bar.dart
deleted file mode 100644
index 63c7c364a574..000000000000
--- a/modules/angular2/test/transform/integration/list_of_types_files/bar.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library bar;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'foo.dart';
-
-@Component(componentServices: const [MyContext])
-class MyComponent {
-  final MyContext c;
-  MyComponent(this.c);
-}
diff --git a/modules/angular2/test/transform/integration/list_of_types_files/expected/bar.ng_deps.dart b/modules/angular2/test/transform/integration/list_of_types_files/expected/bar.ng_deps.dart
deleted file mode 100644
index ea5db8c8ae0d..000000000000
--- a/modules/angular2/test/transform/integration/list_of_types_files/expected/bar.ng_deps.dart
+++ /dev/null
@@ -1,18 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'foo.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(MyComponent, {
-      'factory': (MyContext c) => new MyComponent(c),
-      'parameters': const [const [MyContext]],
-      'annotations':
-          const [const Component(componentServices: const [MyContext])]
-    });
-}
diff --git a/modules/angular2/test/transform/integration/list_of_types_files/foo.dart b/modules/angular2/test/transform/integration/list_of_types_files/foo.dart
deleted file mode 100644
index 5579612e440a..000000000000
--- a/modules/angular2/test/transform/integration/list_of_types_files/foo.dart
+++ /dev/null
@@ -1,6 +0,0 @@
-library foo;
-
-class MyContext {
-  final String s;
-  const MyContext(this.s);
-}
diff --git a/modules/angular2/test/transform/integration/list_of_types_files/index.dart b/modules/angular2/test/transform/integration/list_of_types_files/index.dart
deleted file mode 100644
index 505e371e0ecb..000000000000
--- a/modules/angular2/test/transform/integration/list_of_types_files/index.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'bar.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}
diff --git a/modules/angular2/test/transform/integration/simple_annotation_files/bar.dart b/modules/angular2/test/transform/integration/simple_annotation_files/bar.dart
deleted file mode 100644
index c999b68a98e7..000000000000
--- a/modules/angular2/test/transform/integration/simple_annotation_files/bar.dart
+++ /dev/null
@@ -1,8 +0,0 @@
-library bar;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-@Component(selector: '[soup]')
-class MyComponent {
-  MyComponent();
-}
diff --git a/modules/angular2/test/transform/integration/simple_annotation_files/expected/bar.ng_deps.dart b/modules/angular2/test/transform/integration/simple_annotation_files/expected/bar.ng_deps.dart
deleted file mode 100644
index d9644279d049..000000000000
--- a/modules/angular2/test/transform/integration/simple_annotation_files/expected/bar.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(MyComponent, {
-      'factory': () => new MyComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[soup]')]
-    });
-}
diff --git a/modules/angular2/test/transform/integration/simple_annotation_files/expected/bar.ng_meta.json b/modules/angular2/test/transform/integration/simple_annotation_files/expected/bar.ng_meta.json
deleted file mode 100644
index 775a7253b0c0..000000000000
--- a/modules/angular2/test/transform/integration/simple_annotation_files/expected/bar.ng_meta.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "MyComponent": {
-    "id": "MyComponent",
-    "selector": "[soup]",
-    "compileChildren": true,
-    "hostProperties": {},
-    "hostListeners": {},
-    "hostActions": {},
-    "hostAttributes": {},
-    "properties": [],
-    "readAttributes": [],
-    "type": 1,
-    "exportAs": null,
-    "callOnDestroy": false,
-    "callOnCheck": false,
-    "callOnInit": false,
-    "callOnChange": false,
-    "callOnAllChangesDone": false,
-    "events": [],
-    "changeDetection": null,
-    "version": 1
-  }
-}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/integration/simple_annotation_files/expected/index.ng_deps.dart b/modules/angular2/test/transform/integration/simple_annotation_files/expected/index.ng_deps.dart
deleted file mode 100644
index 69c78201a215..000000000000
--- a/modules/angular2/test/transform/integration/simple_annotation_files/expected/index.ng_deps.dart
+++ /dev/null
@@ -1,15 +0,0 @@
-library web_foo.ng_deps.dart;
-
-import 'index.dart';
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'index.ng_deps.dart' as ngStaticInit0;
-import 'bar.dart';
-import 'bar.ng_deps.dart' as i0;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/integration/simple_annotation_files/index.dart b/modules/angular2/test/transform/integration/simple_annotation_files/index.dart
deleted file mode 100644
index 9a72bcf857a2..000000000000
--- a/modules/angular2/test/transform/integration/simple_annotation_files/index.dart
+++ /dev/null
@@ -1,11 +0,0 @@
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'bar.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}
diff --git a/modules/angular2/test/transform/integration/synthetic_ctor_files/bar.dart b/modules/angular2/test/transform/integration/synthetic_ctor_files/bar.dart
deleted file mode 100644
index 1efe10f6adca..000000000000
--- a/modules/angular2/test/transform/integration/synthetic_ctor_files/bar.dart
+++ /dev/null
@@ -1,6 +0,0 @@
-library bar;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-@Component(selector: '[soup]')
-class MyComponent {}
diff --git a/modules/angular2/test/transform/integration/synthetic_ctor_files/expected/bar.ng_deps.dart b/modules/angular2/test/transform/integration/synthetic_ctor_files/expected/bar.ng_deps.dart
deleted file mode 100644
index d9644279d049..000000000000
--- a/modules/angular2/test/transform/integration/synthetic_ctor_files/expected/bar.ng_deps.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(MyComponent, {
-      'factory': () => new MyComponent(),
-      'parameters': const [],
-      'annotations': const [const Component(selector: '[soup]')]
-    });
-}
diff --git a/modules/angular2/test/transform/integration/synthetic_ctor_files/index.dart b/modules/angular2/test/transform/integration/synthetic_ctor_files/index.dart
deleted file mode 100644
index 505e371e0ecb..000000000000
--- a/modules/angular2/test/transform/integration/synthetic_ctor_files/index.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'bar.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}
diff --git a/modules/angular2/test/transform/integration/two_annotations_files/bar.dart b/modules/angular2/test/transform/integration/two_annotations_files/bar.dart
deleted file mode 100644
index 0b15af67586b..000000000000
--- a/modules/angular2/test/transform/integration/two_annotations_files/bar.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library bar;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'package:angular2/src/core/annotations_impl/view.dart';
-
-@Component(selector: '[soup]')
-@View(template: 'Salad')
-class MyComponent {
-  MyComponent();
-}
diff --git a/modules/angular2/test/transform/integration/two_annotations_files/expected/bar.ng_deps.dart b/modules/angular2/test/transform/integration/two_annotations_files/expected/bar.ng_deps.dart
deleted file mode 100644
index 6682e577f3a6..000000000000
--- a/modules/angular2/test/transform/integration/two_annotations_files/expected/bar.ng_deps.dart
+++ /dev/null
@@ -1,79 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'package:angular2/src/change_detection/pregen_proto_change_detector.dart'
-    as _gen;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'package:angular2/src/core/annotations_impl/view.dart';
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(MyComponent, {
-      'factory': () => new MyComponent(),
-      'parameters': const [],
-      'annotations': const [
-        const Component(selector: '[soup]'),
-        const View(template: 'Salad')
-      ]
-    });
-  _gen.preGeneratedProtoDetectors['MyComponent_comp_0'] =
-      _MyComponent_ChangeDetector0.newProtoChangeDetector;
-}
-class _MyComponent_ChangeDetector0 extends _gen.AbstractChangeDetector {
-  final dynamic _dispatcher;
-  final _gen.PipeRegistry _pipeRegistry;
-  final _gen.List<_gen.ProtoRecord> _protos;
-  final _gen.List<_gen.DirectiveRecord> _directiveRecords;
-  dynamic _locals = null;
-  dynamic _alreadyChecked = false;
-  MyComponent _context = null;
-
-  _MyComponent_ChangeDetector0(this._dispatcher, this._pipeRegistry,
-      this._protos, this._directiveRecords)
-      : super("MyComponent_comp_0");
-
-  void detectChangesInRecords(throwOnChange) {
-    if (!hydrated()) {
-      _gen.ChangeDetectionUtil.throwDehydrated();
-    }
-    var context = null;
-    var change_context = false;
-    var isChanged = false;
-    var currentProto;
-    var changes = null;
-
-    context = _context;
-
-    _alreadyChecked = true;
-  }
-
-  void callOnAllChangesDone() {
-    _dispatcher.notifyOnAllChangesDone();
-  }
-
-  void hydrate(MyComponent context, locals, directives) {
-    mode = 'ALWAYS_CHECK';
-    _context = context;
-    _locals = locals;
-
-    _alreadyChecked = false;
-  }
-
-  void dehydrate() {
-    _context = null;
-    _locals = null;
-  }
-
-  hydrated() => _context != null;
-
-  static _gen.ProtoChangeDetector newProtoChangeDetector(
-      _gen.PipeRegistry registry, _gen.ChangeDetectorDefinition def) {
-    return new _gen.PregenProtoChangeDetector(
-        (a, b, c, d) => new _MyComponent_ChangeDetector0(a, b, c, d), registry,
-        def);
-  }
-}
diff --git a/modules/angular2/test/transform/integration/two_annotations_files/index.dart b/modules/angular2/test/transform/integration/two_annotations_files/index.dart
deleted file mode 100644
index 505e371e0ecb..000000000000
--- a/modules/angular2/test/transform/integration/two_annotations_files/index.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'bar.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}
diff --git a/modules/angular2/test/transform/integration/two_deps_files/bar.dart b/modules/angular2/test/transform/integration/two_deps_files/bar.dart
deleted file mode 100644
index bfbf1cc444d8..000000000000
--- a/modules/angular2/test/transform/integration/two_deps_files/bar.dart
+++ /dev/null
@@ -1,13 +0,0 @@
-library bar;
-
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'foo.dart' as prefix;
-
-@Component(selector: 'soup')
-class MyComponent {
-  final prefix.MyContext c;
-  final String generatedValue;
-  MyComponent(this.c, String inValue) {
-    generatedValue = 'generated ' + inValue;
-  }
-}
diff --git a/modules/angular2/test/transform/integration/two_deps_files/expected/bar.ng_deps.dart b/modules/angular2/test/transform/integration/two_deps_files/expected/bar.ng_deps.dart
deleted file mode 100644
index 33d29a8dac05..000000000000
--- a/modules/angular2/test/transform/integration/two_deps_files/expected/bar.ng_deps.dart
+++ /dev/null
@@ -1,18 +0,0 @@
-library bar.ng_deps.dart;
-
-import 'bar.dart';
-import 'package:angular2/src/core/annotations_impl/annotations.dart';
-import 'foo.dart' as prefix;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(MyComponent, {
-      'factory':
-          (prefix.MyContext c, String inValue) => new MyComponent(c, inValue),
-      'parameters': const [const [prefix.MyContext], const [String]],
-      'annotations': const [const Component(selector: 'soup')]
-    });
-}
diff --git a/modules/angular2/test/transform/integration/two_deps_files/foo.dart b/modules/angular2/test/transform/integration/two_deps_files/foo.dart
deleted file mode 100644
index e2ccc6af6621..000000000000
--- a/modules/angular2/test/transform/integration/two_deps_files/foo.dart
+++ /dev/null
@@ -1,6 +0,0 @@
-library foo;
-
-class MyContext {
-  final String selector;
-  const MyContext(this.selector);
-}
diff --git a/modules/angular2/test/transform/integration/two_deps_files/index.dart b/modules/angular2/test/transform/integration/two_deps_files/index.dart
deleted file mode 100644
index 505e371e0ecb..000000000000
--- a/modules/angular2/test/transform/integration/two_deps_files/index.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-import 'bar.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}
diff --git a/modules/angular2/test/transform/reflection_remover/all_tests.dart b/modules/angular2/test/transform/reflection_remover/all_tests.dart
deleted file mode 100644
index 8934cd0df81c..000000000000
--- a/modules/angular2/test/transform/reflection_remover/all_tests.dart
+++ /dev/null
@@ -1,46 +0,0 @@
-library angular2.test.transform.reflection_remover;
-
-import 'package:analyzer/analyzer.dart';
-import 'package:angular2/src/transform/common/mirror_mode.dart';
-import 'package:angular2/src/transform/reflection_remover/codegen.dart';
-import 'package:angular2/src/transform/reflection_remover/rewriter.dart';
-import 'package:guinness/guinness.dart';
-
-import 'reflection_remover_files/expected/index.dart' as expected;
-import 'debug_mirrors_files/expected/index.dart' as debug_mirrors;
-import 'log_mirrors_files/expected/index.dart' as log_mirrors;
-import 'verbose_files/expected/index.dart' as verbose_mirrors;
-import '../common/read_file.dart';
-
-void allTests() {
-  var codegen = new Codegen('web/index.dart', ['web/index.ng_deps.dart']);
-  var code = readFile('reflection_remover/index.dart').replaceAll('\r\n', '\n');
-
-  it('should remove uses of mirrors & '
-      'insert calls to generated code by default.', () {
-    var output =
-        new Rewriter(code, codegen).rewrite(parseCompilationUnit(code));
-    expect(output).toEqual(expected.code);
-  });
-
-  it('should replace uses of mirrors with the debug implementation & '
-      'insert calls to generated code in `MirrorMode.debug`.', () {
-    var output = new Rewriter(code, codegen, mirrorMode: MirrorMode.debug)
-        .rewrite(parseCompilationUnit(code));
-    expect(output).toEqual(debug_mirrors.code);
-  });
-
-  it('should replace uses of mirrors with the verbose implementation '
-      'in `MirrorMode.verbose`.', () {
-    var output = new Rewriter(code, codegen, mirrorMode: MirrorMode.verbose)
-        .rewrite(parseCompilationUnit(code));
-    expect(output).toEqual(verbose_mirrors.code);
-  });
-
-  it('should not initialize the reflector when `writeStaticInit` is `false`.',
-      () {
-    var output = new Rewriter(code, codegen, writeStaticInit: false)
-        .rewrite(parseCompilationUnit(code));
-    expect(output).toEqual(log_mirrors.code);
-  });
-}
diff --git a/modules/angular2/test/transform/reflection_remover/debug_files/README.md b/modules/angular2/test/transform/reflection_remover/debug_files/README.md
deleted file mode 100644
index db2313dfb0bc..000000000000
--- a/modules/angular2/test/transform/reflection_remover/debug_files/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-Tests that the reflection removal step:
- 1. Comments out the import of reflection_capabilities.dart
- 2. Comments out the instantiation of `ReflectionCapabilities`
- 3. Adds the appropriate import.
- 4. Adds the call to `initReflector`
- 5. Does not change line numbers in the source.
- 6. Makes minimal changes to source offsets.
\ No newline at end of file
diff --git a/modules/angular2/test/transform/reflection_remover/debug_files/expected/index.dart b/modules/angular2/test/transform/reflection_remover/debug_files/expected/index.dart
deleted file mode 100644
index f81f56e599fa..000000000000
--- a/modules/angular2/test/transform/reflection_remover/debug_files/expected/index.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library angular2.test.transform.debug_reflection_remover_files;
-
-// This file is intentionally formatted as a string to avoid having the
-// automatic transformer prettify it.
-//
-// This file represents transformed user code. Because this code will be
-// linked to output by a source map, we cannot change line numbers from the
-// original code and we therefore add our generated code on the same line as
-// those we are removing.
-
-var code = """
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/debug_reflection_capabilities.dart';import 'index.ng_deps.dart' as ngStaticInit0;
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();ngStaticInit0.initReflector(reflector);
-  bootstrap(MyComponent);
-}
-""";
diff --git a/modules/angular2/test/transform/reflection_remover/debug_files/index.dart b/modules/angular2/test/transform/reflection_remover/debug_files/index.dart
deleted file mode 100644
index 45363b8a194e..000000000000
--- a/modules/angular2/test/transform/reflection_remover/debug_files/index.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}
diff --git a/modules/angular2/test/transform/reflection_remover/debug_mirrors_files/README.md b/modules/angular2/test/transform/reflection_remover/debug_mirrors_files/README.md
deleted file mode 100644
index db2313dfb0bc..000000000000
--- a/modules/angular2/test/transform/reflection_remover/debug_mirrors_files/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-Tests that the reflection removal step:
- 1. Comments out the import of reflection_capabilities.dart
- 2. Comments out the instantiation of `ReflectionCapabilities`
- 3. Adds the appropriate import.
- 4. Adds the call to `initReflector`
- 5. Does not change line numbers in the source.
- 6. Makes minimal changes to source offsets.
\ No newline at end of file
diff --git a/modules/angular2/test/transform/reflection_remover/debug_mirrors_files/expected/index.dart b/modules/angular2/test/transform/reflection_remover/debug_mirrors_files/expected/index.dart
deleted file mode 100644
index 9576d93c8e81..000000000000
--- a/modules/angular2/test/transform/reflection_remover/debug_mirrors_files/expected/index.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library angular2.test.transform.reflection_remover.debug_mirrors_files.expected;
-
-// This file is intentionally formatted as a string to avoid having the
-// automatic transformer prettify it.
-//
-// This file represents transformed user code. Because this code will be
-// linked to output by a source map, we cannot change line numbers from the
-// original code and we therefore add our generated code on the same line as
-// those we are removing.
-
-var code = """
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/debug_reflection_capabilities.dart';import 'index.ng_deps.dart' as ngStaticInit0;
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();ngStaticInit0.initReflector(reflector);
-  bootstrap(MyComponent);
-}
-""";
diff --git a/modules/angular2/test/transform/reflection_remover/debug_mirrors_files/index.dart b/modules/angular2/test/transform/reflection_remover/debug_mirrors_files/index.dart
deleted file mode 100644
index 45363b8a194e..000000000000
--- a/modules/angular2/test/transform/reflection_remover/debug_mirrors_files/index.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}
diff --git a/modules/angular2/test/transform/reflection_remover/index.dart b/modules/angular2/test/transform/reflection_remover/index.dart
deleted file mode 100644
index 45363b8a194e..000000000000
--- a/modules/angular2/test/transform/reflection_remover/index.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}
diff --git a/modules/angular2/test/transform/reflection_remover/log_mirrors_files/README.md b/modules/angular2/test/transform/reflection_remover/log_mirrors_files/README.md
deleted file mode 100644
index db2313dfb0bc..000000000000
--- a/modules/angular2/test/transform/reflection_remover/log_mirrors_files/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-Tests that the reflection removal step:
- 1. Comments out the import of reflection_capabilities.dart
- 2. Comments out the instantiation of `ReflectionCapabilities`
- 3. Adds the appropriate import.
- 4. Adds the call to `initReflector`
- 5. Does not change line numbers in the source.
- 6. Makes minimal changes to source offsets.
\ No newline at end of file
diff --git a/modules/angular2/test/transform/reflection_remover/log_mirrors_files/expected/index.dart b/modules/angular2/test/transform/reflection_remover/log_mirrors_files/expected/index.dart
deleted file mode 100644
index fc19f1c9f608..000000000000
--- a/modules/angular2/test/transform/reflection_remover/log_mirrors_files/expected/index.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library angular2.test.transform.log_mirrors_files.expected;
-
-// This file is intentionally formatted as a string to avoid having the
-// automatic transformer prettify it.
-//
-// This file represents transformed user code. Because this code will be
-// linked to output by a source map, we cannot change line numbers from the
-// original code and we therefore add our generated code on the same line as
-// those we are removing.
-
-var code = """
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-/*import 'package:angular2/src/reflection/reflection_capabilities.dart';*/
-
-void main() {
-  /*reflector.reflectionCapabilities = new ReflectionCapabilities();*/
-  bootstrap(MyComponent);
-}
-""";
diff --git a/modules/angular2/test/transform/reflection_remover/log_mirrors_files/index.dart b/modules/angular2/test/transform/reflection_remover/log_mirrors_files/index.dart
deleted file mode 100644
index 45363b8a194e..000000000000
--- a/modules/angular2/test/transform/reflection_remover/log_mirrors_files/index.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}
diff --git a/modules/angular2/test/transform/reflection_remover/reflection_remover_files/README.md b/modules/angular2/test/transform/reflection_remover/reflection_remover_files/README.md
deleted file mode 100644
index db2313dfb0bc..000000000000
--- a/modules/angular2/test/transform/reflection_remover/reflection_remover_files/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-Tests that the reflection removal step:
- 1. Comments out the import of reflection_capabilities.dart
- 2. Comments out the instantiation of `ReflectionCapabilities`
- 3. Adds the appropriate import.
- 4. Adds the call to `initReflector`
- 5. Does not change line numbers in the source.
- 6. Makes minimal changes to source offsets.
\ No newline at end of file
diff --git a/modules/angular2/test/transform/reflection_remover/reflection_remover_files/expected/index.dart b/modules/angular2/test/transform/reflection_remover/reflection_remover_files/expected/index.dart
deleted file mode 100644
index d8b7d4b9faf2..000000000000
--- a/modules/angular2/test/transform/reflection_remover/reflection_remover_files/expected/index.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library angular2.test.transform.reflection_remover.reflection_remover_files;
-
-// This file is intentionally formatted as a string to avoid having the
-// automatic transformer prettify it.
-//
-// This file represents transformed user code. Because this code will be
-// linked to output by a source map, we cannot change line numbers from the
-// original code and we therefore add our generated code on the same line as
-// those we are removing.
-
-var code = """
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-/*import 'package:angular2/src/reflection/reflection_capabilities.dart';*/import 'index.ng_deps.dart' as ngStaticInit0;
-
-void main() {
-  /*reflector.reflectionCapabilities = new ReflectionCapabilities();*/ngStaticInit0.initReflector(reflector);
-  bootstrap(MyComponent);
-}
-""";
diff --git a/modules/angular2/test/transform/reflection_remover/reflection_remover_files/index.dart b/modules/angular2/test/transform/reflection_remover/reflection_remover_files/index.dart
deleted file mode 100644
index 45363b8a194e..000000000000
--- a/modules/angular2/test/transform/reflection_remover/reflection_remover_files/index.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/reflection_capabilities.dart';
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(MyComponent);
-}
diff --git a/modules/angular2/test/transform/reflection_remover/verbose_files/expected/index.dart b/modules/angular2/test/transform/reflection_remover/verbose_files/expected/index.dart
deleted file mode 100644
index 65884c6cb802..000000000000
--- a/modules/angular2/test/transform/reflection_remover/verbose_files/expected/index.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library angular2.test.transform.reflection_remover.verbose_files.expected;
-
-// This file is intentionally formatted as a string to avoid having the
-// automatic transformer prettify it.
-//
-// This file represents transformed user code. Because this code will be
-// linked to output by a source map, we cannot change line numbers from the
-// original code and we therefore add our generated code on the same line as
-// those we are removing.
-
-var code = """
-library web_foo;
-
-import 'package:angular2/src/core/application.dart';
-import 'package:angular2/src/reflection/reflection.dart';
-import 'package:angular2/src/reflection/debug_reflection_capabilities.dart';import 'index.ng_deps.dart' as ngStaticInit0;
-
-void main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities(verbose: true);ngStaticInit0.initReflector(reflector);
-  bootstrap(MyComponent);
-}
-""";
diff --git a/modules/angular2/test/transform/template_compiler/all_tests.dart b/modules/angular2/test/transform/template_compiler/all_tests.dart
deleted file mode 100644
index 95162225168f..000000000000
--- a/modules/angular2/test/transform/template_compiler/all_tests.dart
+++ /dev/null
@@ -1,111 +0,0 @@
-library angular2.test.transform.template_compiler.all_tests;
-
-import 'dart:async';
-import 'package:barback/barback.dart';
-import 'package:angular2/src/dom/html_adapter.dart';
-import 'package:angular2/src/transform/common/asset_reader.dart';
-import 'package:angular2/src/transform/common/logging.dart';
-import 'package:angular2/src/transform/template_compiler/generator.dart';
-import 'package:dart_style/dart_style.dart';
-import 'package:guinness/guinness.dart';
-
-import '../common/read_file.dart';
-
-var formatter = new DartFormatter();
-
-void allTests() {
-  Html5LibDomAdapter.makeCurrent();
-  AssetReader reader = new TestAssetReader();
-
-  beforeEach(() => setLogger(new PrintLogger()));
-
-  describe('registrations', () {
-    Future<String> process(AssetId assetId) =>
-        processTemplates(reader, assetId, generateChangeDetectors: false);
-
-    it('should parse simple expressions in inline templates.', () async {
-      var inputPath =
-          'template_compiler/inline_expression_files/hello.ng_deps.dart';
-      var expected = readFile(
-          'template_compiler/inline_expression_files/expected/hello.ng_deps.dart');
-      var output = await process(new AssetId('a', inputPath));
-      _formatThenExpectEquals(output, expected);
-    });
-
-    it('should parse simple methods in inline templates.', () async {
-      var inputPath =
-          'template_compiler/inline_method_files/hello.ng_deps.dart';
-      var expected = readFile(
-          'template_compiler/inline_method_files/expected/hello.ng_deps.dart');
-      var output = await process(new AssetId('a', inputPath));
-      _formatThenExpectEquals(output, expected);
-    });
-
-    it('should parse simple expressions in linked templates.', () async {
-      var inputPath =
-          'template_compiler/url_expression_files/hello.ng_deps.dart';
-      var expected = readFile(
-          'template_compiler/url_expression_files/expected/hello.ng_deps.dart');
-      var output = await process(new AssetId('a', inputPath));
-      _formatThenExpectEquals(output, expected);
-    });
-
-    it('should parse simple methods in linked templates.', () async {
-      var inputPath = 'template_compiler/url_method_files/hello.ng_deps.dart';
-      var expected = readFile(
-          'template_compiler/url_method_files/expected/hello.ng_deps.dart');
-      var output = await process(new AssetId('a', inputPath));
-      _formatThenExpectEquals(output, expected);
-    });
-
-    it('should not generated duplicate getters/setters', () async {
-      var inputPath = 'template_compiler/duplicate_files/hello.ng_deps.dart';
-      var expected = readFile(
-          'template_compiler/duplicate_files/expected/hello.ng_deps.dart');
-      var output = await process(new AssetId('a', inputPath));
-      _formatThenExpectEquals(output, expected);
-    });
-
-    it('should parse `View` directives with a single dependency.', () async {
-      var inputPath =
-          'template_compiler/one_directive_files/hello.ng_deps.dart';
-      var expected = readFile(
-          'template_compiler/one_directive_files/expected/hello.ng_deps.dart');
-
-      var output = await process(new AssetId('a', inputPath));
-      _formatThenExpectEquals(output, expected);
-    });
-
-    it('should parse `View` directives with a single prefixed dependency.',
-        () async {
-      var inputPath = 'template_compiler/with_prefix_files/hello.ng_deps.dart';
-      var expected = readFile(
-          'template_compiler/with_prefix_files/expected/hello.ng_deps.dart');
-
-      var output = await process(new AssetId('a', inputPath));
-      _formatThenExpectEquals(output, expected);
-
-      inputPath = 'template_compiler/with_prefix_files/goodbye.ng_deps.dart';
-      expected = readFile(
-          'template_compiler/with_prefix_files/expected/goodbye.ng_deps.dart');
-
-      output = await process(new AssetId('a', inputPath));
-      _formatThenExpectEquals(output, expected);
-    });
-
-    it('should create the same output for multiple calls.', () async {
-      var inputPath =
-          'template_compiler/inline_expression_files/hello.ng_deps.dart';
-      var expected = readFile(
-          'template_compiler/inline_expression_files/expected/hello.ng_deps.dart');
-      var output = await process(new AssetId('a', inputPath));
-      _formatThenExpectEquals(output, expected);
-      output = await process(new AssetId('a', inputPath));
-      _formatThenExpectEquals(output, expected);
-    });
-  });
-}
-
-void _formatThenExpectEquals(String actual, String expected) {
-  expect(formatter.format(actual)).toEqual(formatter.format(expected));
-}
diff --git a/modules/angular2/test/transform/template_compiler/duplicate_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/duplicate_files/expected/hello.ng_deps.dart
deleted file mode 100644
index 30c08f898353..000000000000
--- a/modules/angular2/test/transform/template_compiler/duplicate_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: '{{greeting}}, {{greeting}}')
-      ]
-    })
-    ..registerGetters({'greeting': (o) => o.greeting})
-    ..registerSetters({'greeting': (o, v) => o.greeting = v});
-}
diff --git a/modules/angular2/test/transform/template_compiler/duplicate_files/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/duplicate_files/hello.ng_deps.dart
deleted file mode 100644
index 8afdf99b9ea3..000000000000
--- a/modules/angular2/test/transform/template_compiler/duplicate_files/hello.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: '{{greeting}}, {{greeting}}')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/template_compiler/duplicate_files/hello.ng_meta.json b/modules/angular2/test/transform/template_compiler/duplicate_files/hello.ng_meta.json
deleted file mode 100644
index eab28548e90f..000000000000
--- a/modules/angular2/test/transform/template_compiler/duplicate_files/hello.ng_meta.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "HelloCmp":
-  {
-    "id":"HelloCmp",
-    "selector":"hello-app",
-    "compileChildren":true,
-    "host":{},
-    "properties":[],
-    "readAttributes":[],
-    "type":1,
-    "version":1
-  }
-}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/template_compiler/inline_expression_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/inline_expression_files/expected/hello.ng_deps.dart
deleted file mode 100644
index 1fc79e64aa8c..000000000000
--- a/modules/angular2/test/transform/template_compiler/inline_expression_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,23 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: '<div [a]="b">{{greeting}}</div>')
-      ]
-    })
-    ..registerGetters({'b': (o) => o.b, 'greeting': (o) => o.greeting})
-    ..registerSetters(
-        {'b': (o, v) => o.b = v, 'greeting': (o, v) => o.greeting = v});
-}
diff --git a/modules/angular2/test/transform/template_compiler/inline_expression_files/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/inline_expression_files/hello.ng_deps.dart
deleted file mode 100644
index d87b0ac7dbae..000000000000
--- a/modules/angular2/test/transform/template_compiler/inline_expression_files/hello.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: '<div [a]="b">{{greeting}}</div>')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/template_compiler/inline_expression_files/hello.ng_meta.json b/modules/angular2/test/transform/template_compiler/inline_expression_files/hello.ng_meta.json
deleted file mode 100644
index eab28548e90f..000000000000
--- a/modules/angular2/test/transform/template_compiler/inline_expression_files/hello.ng_meta.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "HelloCmp":
-  {
-    "id":"HelloCmp",
-    "selector":"hello-app",
-    "compileChildren":true,
-    "host":{},
-    "properties":[],
-    "readAttributes":[],
-    "type":1,
-    "version":1
-  }
-}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/template_compiler/inline_method_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/inline_method_files/expected/hello.ng_deps.dart
deleted file mode 100644
index cd24c02b0378..000000000000
--- a/modules/angular2/test/transform/template_compiler/inline_method_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: '<button (click)=\"action()\">go</button>')
-      ]
-    })
-    ..registerMethods(
-        {'action': (o, List args) => Function.apply(o.action, args)});
-}
diff --git a/modules/angular2/test/transform/template_compiler/inline_method_files/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/inline_method_files/hello.ng_deps.dart
deleted file mode 100644
index 947b517b03b9..000000000000
--- a/modules/angular2/test/transform/template_compiler/inline_method_files/hello.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: '<button (click)=\"action()\">go</button>')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/template_compiler/inline_method_files/hello.ng_meta.json b/modules/angular2/test/transform/template_compiler/inline_method_files/hello.ng_meta.json
deleted file mode 100644
index eab28548e90f..000000000000
--- a/modules/angular2/test/transform/template_compiler/inline_method_files/hello.ng_meta.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "HelloCmp":
-  {
-    "id":"HelloCmp",
-    "selector":"hello-app",
-    "compileChildren":true,
-    "host":{},
-    "properties":[],
-    "readAttributes":[],
-    "type":1,
-    "version":1
-  }
-}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/template_compiler/one_directive_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/one_directive_files/expected/hello.ng_deps.dart
deleted file mode 100644
index 4b53eab40b95..000000000000
--- a/modules/angular2/test/transform/template_compiler/one_directive_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,28 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: 'goodbye-app', directives: const [GoodbyeCmp])
-      ]
-    })
-    ..registerType(GoodbyeCmp, {
-      'factory': () => new GoodbyeCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'goodbye-app'),
-        const View(template: 'Goodbye')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/template_compiler/one_directive_files/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/one_directive_files/hello.ng_deps.dart
deleted file mode 100644
index 4b53eab40b95..000000000000
--- a/modules/angular2/test/transform/template_compiler/one_directive_files/hello.ng_deps.dart
+++ /dev/null
@@ -1,28 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(template: 'goodbye-app', directives: const [GoodbyeCmp])
-      ]
-    })
-    ..registerType(GoodbyeCmp, {
-      'factory': () => new GoodbyeCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'goodbye-app'),
-        const View(template: 'Goodbye')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/template_compiler/one_directive_files/hello.ng_meta.json b/modules/angular2/test/transform/template_compiler/one_directive_files/hello.ng_meta.json
deleted file mode 100644
index 6bb779796b47..000000000000
--- a/modules/angular2/test/transform/template_compiler/one_directive_files/hello.ng_meta.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "HelloCmp":
-  {
-    "id":"HelloCmp",
-    "selector":"hello-app",
-    "compileChildren":true,
-    "host":{},
-    "properties":[],
-    "readAttributes":[],
-    "type":1,
-    "version":1
-  },
-  "GoodbyeCmp":{
-    "id":"GoodbyeCmp",
-    "selector":"goodbye-app",
-    "compileChildren":true,
-    "host":{},
-    "properties":[],
-    "readAttributes":[],
-    "type":1,
-    "version":1
-  }
-}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/template_compiler/url_expression_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/url_expression_files/expected/hello.ng_deps.dart
deleted file mode 100644
index 8fd3e9125cfb..000000000000
--- a/modules/angular2/test/transform/template_compiler/url_expression_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library examples.src.hello_world.index_common_dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(templateUrl: 'template.html')
-      ]
-    })
-    ..registerGetters({'greeting': (o) => o.greeting})
-    ..registerSetters({'greeting': (o, v) => o.greeting = v});
-}
diff --git a/modules/angular2/test/transform/template_compiler/url_expression_files/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/url_expression_files/hello.ng_deps.dart
deleted file mode 100644
index 82fc706104e8..000000000000
--- a/modules/angular2/test/transform/template_compiler/url_expression_files/hello.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library examples.src.hello_world.index_common_dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(templateUrl: 'template.html')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/template_compiler/url_expression_files/hello.ng_meta.json b/modules/angular2/test/transform/template_compiler/url_expression_files/hello.ng_meta.json
deleted file mode 100644
index eab28548e90f..000000000000
--- a/modules/angular2/test/transform/template_compiler/url_expression_files/hello.ng_meta.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "HelloCmp":
-  {
-    "id":"HelloCmp",
-    "selector":"hello-app",
-    "compileChildren":true,
-    "host":{},
-    "properties":[],
-    "readAttributes":[],
-    "type":1,
-    "version":1
-  }
-}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/template_compiler/url_expression_files/template.html b/modules/angular2/test/transform/template_compiler/url_expression_files/template.html
deleted file mode 100644
index d75013393f21..000000000000
--- a/modules/angular2/test/transform/template_compiler/url_expression_files/template.html
+++ /dev/null
@@ -1 +0,0 @@
-{{greeting}}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/template_compiler/url_method_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/url_method_files/expected/hello.ng_deps.dart
deleted file mode 100644
index e9a6cc2fa186..000000000000
--- a/modules/angular2/test/transform/template_compiler/url_method_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library examples.src.hello_world.index_common_dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(templateUrl: 'template.html')
-      ]
-    })
-    ..registerMethods(
-        {'action': (o, List args) => Function.apply(o.action, args)});
-}
diff --git a/modules/angular2/test/transform/template_compiler/url_method_files/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/url_method_files/hello.ng_deps.dart
deleted file mode 100644
index 82fc706104e8..000000000000
--- a/modules/angular2/test/transform/template_compiler/url_method_files/hello.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library examples.src.hello_world.index_common_dart;
-
-import 'hello.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(templateUrl: 'template.html')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/template_compiler/url_method_files/hello.ng_meta.json b/modules/angular2/test/transform/template_compiler/url_method_files/hello.ng_meta.json
deleted file mode 100644
index eab28548e90f..000000000000
--- a/modules/angular2/test/transform/template_compiler/url_method_files/hello.ng_meta.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "HelloCmp":
-  {
-    "id":"HelloCmp",
-    "selector":"hello-app",
-    "compileChildren":true,
-    "host":{},
-    "properties":[],
-    "readAttributes":[],
-    "type":1,
-    "version":1
-  }
-}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/template_compiler/url_method_files/template.html b/modules/angular2/test/transform/template_compiler/url_method_files/template.html
deleted file mode 100644
index f985e49978bc..000000000000
--- a/modules/angular2/test/transform/template_compiler/url_method_files/template.html
+++ /dev/null
@@ -1 +0,0 @@
-<button (click)="action()">go</button>
\ No newline at end of file
diff --git a/modules/angular2/test/transform/template_compiler/with_prefix_files/expected/goodbye.ng_deps.dart b/modules/angular2/test/transform/template_compiler/with_prefix_files/expected/goodbye.ng_deps.dart
deleted file mode 100644
index 297b26e0c53c..000000000000
--- a/modules/angular2/test/transform/template_compiler/with_prefix_files/expected/goodbye.ng_deps.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'goodbye.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(GoodbyeCmp, {
-      'factory': () => new GoodbyeCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'goodbye-app'),
-        const View(template: 'Goodbye {{name}}')
-      ]
-    })
-    ..registerGetters({'name': (o) => o.name})
-    ..registerSetters({'name': (o, v) => o.name = v});
-}
diff --git a/modules/angular2/test/transform/template_compiler/with_prefix_files/expected/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/with_prefix_files/expected/hello.ng_deps.dart
deleted file mode 100644
index 6dd69eb21c7d..000000000000
--- a/modules/angular2/test/transform/template_compiler/with_prefix_files/expected/hello.ng_deps.dart
+++ /dev/null
@@ -1,24 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'goodbye.dart' as prefix;
-import 'goodbye.ng_deps.dart' as i0;
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(
-            template: 'goodbye-app', directives: const [prefix.GoodbyeCmp])
-      ]
-    });
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/template_compiler/with_prefix_files/goodbye.ng_deps.dart b/modules/angular2/test/transform/template_compiler/with_prefix_files/goodbye.ng_deps.dart
deleted file mode 100644
index 4e17a6d0623e..000000000000
--- a/modules/angular2/test/transform/template_compiler/with_prefix_files/goodbye.ng_deps.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'goodbye.dart';
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(GoodbyeCmp, {
-      'factory': () => new GoodbyeCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'goodbye-app'),
-        const View(template: 'Goodbye {{name}}')
-      ]
-    });
-}
diff --git a/modules/angular2/test/transform/template_compiler/with_prefix_files/goodbye.ng_meta.json b/modules/angular2/test/transform/template_compiler/with_prefix_files/goodbye.ng_meta.json
deleted file mode 100644
index 56cf16b9e34c..000000000000
--- a/modules/angular2/test/transform/template_compiler/with_prefix_files/goodbye.ng_meta.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "GoodbyeCmp":{
-    "id":"GoodbyeCmp",
-    "selector":"goodbye-app",
-    "compileChildren":true,
-    "host":{},
-    "properties":[],
-    "readAttributes":[],
-    "type":1,
-    "version":1
-  }
-}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/template_compiler/with_prefix_files/hello.ng_deps.dart b/modules/angular2/test/transform/template_compiler/with_prefix_files/hello.ng_deps.dart
deleted file mode 100644
index 6dd69eb21c7d..000000000000
--- a/modules/angular2/test/transform/template_compiler/with_prefix_files/hello.ng_deps.dart
+++ /dev/null
@@ -1,24 +0,0 @@
-library examples.hello_world.index_common_dart.ng_deps.dart;
-
-import 'hello.dart';
-import 'goodbye.dart' as prefix;
-import 'goodbye.ng_deps.dart' as i0;
-import 'package:angular2/angular2.dart'
-    show bootstrap, Component, Directive, View, NgElement;
-
-var _visited = false;
-void initReflector(reflector) {
-  if (_visited) return;
-  _visited = true;
-  reflector
-    ..registerType(HelloCmp, {
-      'factory': () => new HelloCmp(),
-      'parameters': const [const []],
-      'annotations': const [
-        const Component(selector: 'hello-app'),
-        const View(
-            template: 'goodbye-app', directives: const [prefix.GoodbyeCmp])
-      ]
-    });
-  i0.initReflector(reflector);
-}
diff --git a/modules/angular2/test/transform/template_compiler/with_prefix_files/hello.ng_meta.json b/modules/angular2/test/transform/template_compiler/with_prefix_files/hello.ng_meta.json
deleted file mode 100644
index eab28548e90f..000000000000
--- a/modules/angular2/test/transform/template_compiler/with_prefix_files/hello.ng_meta.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "HelloCmp":
-  {
-    "id":"HelloCmp",
-    "selector":"hello-app",
-    "compileChildren":true,
-    "host":{},
-    "properties":[],
-    "readAttributes":[],
-    "type":1,
-    "version":1
-  }
-}
\ No newline at end of file
diff --git a/modules/angular2/test/transform/transform.server.spec.dart b/modules/angular2/test/transform/transform.server.spec.dart
deleted file mode 100644
index 8ed7b90e3725..000000000000
--- a/modules/angular2/test/transform/transform.server.spec.dart
+++ /dev/null
@@ -1,28 +0,0 @@
-library angular2.test.transform;
-
-import 'package:guinness/guinness.dart';
-import 'package:unittest/unittest.dart' hide expect;
-import 'package:unittest/vm_config.dart';
-
-import 'common/async_string_writer_tests.dart' as asyncStringWriter;
-import 'bind_generator/all_tests.dart' as bindGenerator;
-import 'directive_linker/all_tests.dart' as directiveLinker;
-import 'directive_metadata_extractor/all_tests.dart' as directiveMeta;
-import 'directive_processor/all_tests.dart' as directiveProcessor;
-import 'integration/all_tests.dart' as integration;
-import 'reflection_remover/all_tests.dart' as reflectionRemover;
-import 'template_compiler/all_tests.dart' as templateCompiler;
-
-main() {
-  useVMConfiguration();
-  describe('AsyncStringWriter', asyncStringWriter.allTests);
-  describe('Bind Generator', bindGenerator.allTests);
-  describe('Directive Linker', directiveLinker.allTests);
-  describe('Directive Metadata Extractor', directiveMeta.allTests);
-  describe('Directive Processor', directiveProcessor.allTests);
-  describe('Reflection Remover', reflectionRemover.allTests);
-  describe('Template Compiler', templateCompiler.allTests);
-  // NOTE(kegluneq): These use `code_transformers#testPhases`, which is not
-  // designed to work with `guinness`.
-  group('Transformer Pipeline', integration.allTests);
-}
diff --git a/modules/angular2/test/util/decorators_spec.dart b/modules/angular2/test/util/decorators_spec.dart
deleted file mode 100644
index 3ac4e3704849..000000000000
--- a/modules/angular2/test/util/decorators_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library angular2.test.util.decorators_dart_spec;
-
-main() {
-  // not relavant for dart.
-}
diff --git a/modules/angular2/test/util/decorators_spec.ts b/modules/angular2/test/util/decorators_spec.ts
deleted file mode 100644
index 1ef66461c2aa..000000000000
--- a/modules/angular2/test/util/decorators_spec.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {makeDecorator, makeParamDecorator, Class} from 'angular2/src/util/decorators';
-import {global} from 'angular2/src/facade/lang';
-import {Inject} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-
-class TestAnnotation {
-  constructor(public arg: any) {}
-}
-
-class TerminalAnnotation {
-  terminal = true;
-}
-
-export function main() {
-  var Reflect = global.Reflect;
-
-  var TerminalDecorator = makeDecorator(TerminalAnnotation);
-  var TestDecorator = makeDecorator(TestAnnotation, (fn: any) => fn.Terminal = TerminalDecorator);
-  var TestParamDecorator = makeParamDecorator(TestAnnotation);
-
-  describe('decorators', () => {
-    it('shoulld invoke as decorator', () => {
-      function Type(){};
-      TestDecorator({marker: 'WORKS'})(Type);
-      var annotations = Reflect.getMetadata('annotations', Type);
-      expect(annotations[0].arg.marker).toEqual('WORKS');
-    });
-
-    it('should invoke as new', () => {
-      var annotation = new (<any>TestDecorator)({marker: 'WORKS'});
-      expect(annotation instanceof TestAnnotation).toEqual(true);
-      expect(annotation.arg.marker).toEqual('WORKS');
-    });
-
-    it('should invoke as chain', () => {
-      var chain: any = TestDecorator({marker: 'WORKS'});
-      expect(typeof chain.Terminal).toEqual('function');
-      chain = chain.Terminal();
-      expect(chain.annotations[0] instanceof TestAnnotation).toEqual(true);
-      expect(chain.annotations[0].arg.marker).toEqual('WORKS');
-      expect(chain.annotations[1] instanceof TerminalAnnotation).toEqual(true);
-    });
-
-    describe('Class', () => {
-      it('should create a class', () => {
-        var i0, i1;
-        var MyClass =
-            (<any>TestDecorator('test-works'))
-                .Class({
-                  extends: Class({
-                    constructor: function() {},
-                    extendWorks: function() { return 'extend ' + this.arg; }
-                  }),
-                  constructor: [String, function(arg) { this.arg = arg; }],
-                  methodA:
-                      [i0 = new Inject(String), [i1 = Inject(String), Number], function(a, b) {}],
-                  works: function() { return this.arg; },
-                  prototype: 'IGNORE'
-                });
-        var obj: any = new MyClass('WORKS');
-        expect(obj.arg).toEqual('WORKS');
-        expect(obj.works()).toEqual('WORKS');
-        expect(obj.extendWorks()).toEqual('extend WORKS');
-        expect(reflector.parameters(MyClass)).toEqual([[String]]);
-        expect(reflector.parameters(obj.methodA)).toEqual([[i0], [i1.annotation, Number]]);
-
-        var proto = (<Function>MyClass).prototype;
-        expect(proto.extends).toEqual(undefined);
-        expect(proto.prototype).toEqual(undefined);
-
-        expect(reflector.annotations(MyClass)[0].arg).toEqual('test-works')
-      });
-
-      describe('errors', () => {
-        it('should ensure that last constructor is required', () => {
-          expect(() => { (<Function>Class)({}); })
-              .toThrowError(
-                  "Only Function or Array is supported in Class definition for key 'constructor' is 'undefined'");
-        });
-
-
-        it('should ensure that we dont accidently patch native objects', () => {
-          expect(() => { (<Function>Class)({constructor: Object}); })
-              .toThrowError("Can not use native Object as constructor");
-        });
-
-
-        it('should ensure that last possition is function', () => {
-          expect(() => {Class({constructor: []})})
-              .toThrowError(
-                  "Last position of Class method array must be Function in key constructor was 'undefined'");
-        });
-
-        it('should ensure that annotation count matches paramaters count', () => {
-          expect(() => {Class({constructor: [String, function MyType() {}]})})
-              .toThrowError(
-                  "Number of annotations (1) does not match number of arguments (0) in the function: MyType");
-        });
-
-        it('should ensure that only Function|Arrays are supported', () => {
-          expect(() => { Class({constructor: function() {}, method: 'non_function'}); })
-              .toThrowError(
-                  "Only Function or Array is supported in Class definition for key 'method' is 'non_function'");
-        });
-
-        it('should ensure that extends is a Function', () => {
-          expect(() => {(<Function>Class)({extends: 'non_type', constructor: function() {}})})
-              .toThrowError(
-                  "Class definition 'extends' property must be a constructor function was: non_type");
-        });
-      });
-    });
-  });
-}
diff --git a/modules/angular2/test_lib.ts b/modules/angular2/test_lib.ts
deleted file mode 100644
index ffc3f5251ab9..000000000000
--- a/modules/angular2/test_lib.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './src/test_lib/test_lib';
-export * from './src/test_lib/spies';
-export * from './src/test_lib/utils';
-export * from './src/test_lib/fake_async';
-export * from './src/test_lib/test_component_builder';
-export * from './debug';
diff --git a/modules/angular2/traceur-runtime.d.ts b/modules/angular2/traceur-runtime.d.ts
deleted file mode 100644
index 9ccbc4aed7fb..000000000000
--- a/modules/angular2/traceur-runtime.d.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-// Extend the ES5 standard library with some ES6 features we polyfill at runtime
-// by loading traceur-runtime.js
-
-// These are mostly copied from lib.es6.d.ts
-
-interface String {
-  /**
-   * Returns true if the sequence of elements of searchString converted to a String is the
-   * same as the corresponding elements of this object (converted to a String) starting at
-   * position. Otherwise returns false.
-   */
-  startsWith(searchString: string, position?: number): boolean;
-}
-
-interface NumberConstructor {
-  /**
-   * Returns true if the value passed is an integer, false otherwise.
-   * @param number A numeric value.
-   */
-  isInteger(number: number): boolean;
-}
-
-interface Array<T> {
-  /**
-   * Returns the this object after filling the section identified by start and end with value
-   * @param value value to fill array section with
-   * @param start index to start filling the array at. If start is negative, it is treated as
-   * length+start where length is the length of the array.
-   * @param end index to stop filling the array at. If end is negative, it is treated as
-   * length+end.
-   */
-  fill(value: T, start?: number, end?: number): T[];
-}
-
-// Copied from lib.dom.d.ts and modified
-interface Map<K, V> {
-  clear(): void;
-  delete (key: K): boolean;
-  forEach(callbackfn: (value: V, index: K, map: Map<K, V>) => void, thisArg?: any): void;
-  keys(): List<K>;
-  values(): List<V>;
-  get(key: K): V;
-  has(key: K): boolean;
-  set(key: K, value: V): Map<K, V>;
-  size: number;
-}
-declare var Map: {
-  new (): Map<any, any>;
-  new<K, V>(): Map<K, V>;
-  // alexeagle: PATCHED
-  new<K, V>(m: Map<K, V>): Map<any, any>;
-  new<K, V>(l: List<any>): Map<any, any>;
-  prototype: Map<any, any>;
-};
-
-interface Set<T> {
-  add(value: T): Set<T>;
-  clear(): void;
-  delete (value: T): boolean;
-  forEach(callbackfn: (value: T, index: T, set: Set<T>) => void, thisArg?: any): void;
-  has(value: T): boolean;
-  size: number;
-}
-declare var Set: {
-  new (): Set<any>;
-  new<T>(): Set<T>;
-  // alexeagle PATCHED
-  new<T>(s: Set<T>): Set<T>;
-  new<T>(l: List<T>): Set<T>;
-  prototype: Set<any>;
-};
-
-interface SymbolConstructor {
-  /**
-   * A method that returns the default iterator for an object.Called by the semantics of the
-   * for-of statement.
-   */
-  iterator: symbol;
-}
-declare var Symbol: SymbolConstructor;
diff --git a/modules/angular2/transformer.dart b/modules/angular2/transformer.dart
deleted file mode 100644
index fdcc8187c568..000000000000
--- a/modules/angular2/transformer.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library angular2.transformer_dart;
-
-export 'src/transform/transformer.dart';
diff --git a/modules/angular2/tsconfig.json b/modules/angular2/tsconfig.json
deleted file mode 100644
index 13249a24e705..000000000000
--- a/modules/angular2/tsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-    "compilerOptions": {
-        "emitDecoratorMetadata": true,
-        "declaration": true,
-        "module": "commonjs",
-        "rootDir": ".",
-        "sourceMap": true,
-        "sourceRoot": ".",
-        "target": "ES5",
-        "outDir": "../../dist/js/cjs"
-    }
-}
diff --git a/modules/angular2/tsd.json b/modules/angular2/tsd.json
deleted file mode 100644
index 46b416eb8ed4..000000000000
--- a/modules/angular2/tsd.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "version": "v4",
-  "repo": "angular/DefinitelyTyped",
-  "ref": "master",
-  "path": "typings",
-  "bundle": "typings/tsd.d.ts",
-  "installed": {
-    "es6-promise/es6-promise.d.ts": {
-      "commit": "be0b6b394f77a59e192ad7cfec18078706e44db5"
-    },
-    "hammerjs/hammerjs.d.ts": {
-      "commit": "22c44d95912a07f81c103a694330b15b92f7cb40"
-    },
-    "jasmine/jasmine.d.ts": {
-      "commit": "055b3172e8eb374a75826710c4d08677872620d3"
-    },
-    "node/node.d.ts": {
-      "commit": "d5f92f93bdb49f332fa662ff1d0cc8700f02e4dc"
-    },
-    "rx/rx.d.ts": {
-      "commit": "3882d337bb0808cde9fe4c08012508a48c135482"
-    },
-
-    "rx/rx-lite.d.ts": {
-      "commit": "3882d337bb0808cde9fe4c08012508a48c135482"
-    },
-
-
-    "selenium-webdriver/selenium-webdriver.d.ts": {
-      "commit": "be0b6b394f77a59e192ad7cfec18078706e44db5"
-    },
-    "zone/zone.d.ts": {
-      "commit": "055b3172e8eb374a75826710c4d08677872620d3"
-    },
-    "angular-protractor/angular-protractor.d.ts": {
-      "commit": "4207593c012565a7ea800ed861ffbe5011e7a501"
-    }
-  }
-}
diff --git a/modules/angular2/view.ts b/modules/angular2/view.ts
deleted file mode 100644
index 09bad24141c9..000000000000
--- a/modules/angular2/view.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * @module
- * @public
- * @description
- * Provides API for working with Angular views.
- */
diff --git a/modules/angular2_material/.clang-format b/modules/angular2_material/.clang-format
deleted file mode 100644
index e60fec73575e..000000000000
--- a/modules/angular2_material/.clang-format
+++ /dev/null
@@ -1,12 +0,0 @@
-Language:        JavaScript
-BasedOnStyle:    Google
-ColumnLimit:     100
-
-TabWidth:                2
-ContinuationIndentWidth: 4
-MaxEmptyLinesToKeep    : 2
-
-AllowShortBlocksOnASingleLine:              false
-AllowShortIfStatementsOnASingleLine:        false
-AllowShortLoopsOnASingleLine:               false
-AllowShortFunctionsOnASingleLine:           Empty
diff --git a/modules/angular2_material/README.md b/modules/angular2_material/README.md
deleted file mode 100644
index 0e0d3515a39a..000000000000
--- a/modules/angular2_material/README.md
+++ /dev/null
@@ -1 +0,0 @@
-Temporary home of Material Design components for Angular 2.
\ No newline at end of file
diff --git a/modules/angular2_material/package.json b/modules/angular2_material/package.json
deleted file mode 100644
index e2e0f1366ece..000000000000
--- a/modules/angular2_material/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "angular2_material",
-  "version": "<%= packageJson.version %>",
-  "description": "Google material design components for Angular 2",
-  "homepage": "<%= packageJson.homepage %>",
-  "bugs": "<%= packageJson.bugs %>",
-  "contributors": <%= JSON.stringify(packageJson.contributors) %>,
-  "license": "<%= packageJson.license %>",
-  "dependencies": {
-    "angular2": "<%= packageJson.version %>",
-    "traceur": "<%= packageJson.dependencies.traceur %>",
-    "rtts_assert": "<%= packageJson.version %>",
-    "rx": "<%= packageJson.dependencies['rx'] %>",
-    "zone.js": "<%= packageJson.dependencies['zone.js'] %>"
-  },
-  "devDependencies": <%= JSON.stringify(packageJson.defaultDevDependencies) %>
-}
diff --git a/modules/angular2_material/pubspec.yaml b/modules/angular2_material/pubspec.yaml
deleted file mode 100644
index 99729a80d846..000000000000
--- a/modules/angular2_material/pubspec.yaml
+++ /dev/null
@@ -1,16 +0,0 @@
-name: angular2_material
-version: <%= packageJson.version %>
-authors:
-<%= Object.keys(packageJson.contributors).map(function(name) {
-  return '- '+name+' <'+packageJson.contributors[name]+'>';
-}).join('\n') %>
-description: Google material design components for Angular 2
-homepage: <%= packageJson.homepage %>
-environment:
-  sdk: '>=1.10.0-dev.1.10 <2.0.0'
-dependencies:
-  angular2: '^<%= packageJson.version %>'
-  browser: '^0.10.0'
-dependency_overrides:
-  angular2:
-    path: ../angular2
diff --git a/modules/angular2_material/src/components/button/button.html b/modules/angular2_material/src/components/button/button.html
deleted file mode 100644
index 1b07d41899f0..000000000000
--- a/modules/angular2_material/src/components/button/button.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<style>@import "angular2_material/src/components/button/button.css";</style>
-<span class="md-button-wrapper"><content></content></span>
diff --git a/modules/angular2_material/src/components/button/button.scss b/modules/angular2_material/src/components/button/button.scss
deleted file mode 100644
index aa73c6d3a691..000000000000
--- a/modules/angular2_material/src/components/button/button.scss
+++ /dev/null
@@ -1,349 +0,0 @@
-@import "../../core/style/variables";
-@import "../../core/style/shadows";
-
-// TODO(jelbourn): This goes away.
-@import "../../core/style/default-theme";
-
-$button-line-height: 25px !default;
-$button-padding: 2px 6px 3px !default;
-
-// Fab buttons
-$button-fab-width: 56px !default;
-$button-fab-height: 56px !default;
-$button-fab-padding: 16px !default;
-$button-fab-mini-width: 40px !default;
-$button-fab-mini-height: 40px !default;
-
-$button-fab-toast-offset: $button-fab-height * 0.75;
-
-/**
- * Mixin to create distinct classes for fab positions, e.g. ".md-fab-bottom-right".
- */
-@mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
-  &.md-fab-#{$spot} {
-    top: $top;
-    right: $right;
-    bottom: $bottom;
-    left: $left;
-    position: absolute;
-  }
-}
-
-[md-button] {
-  user-select: none;
-
-  // TODO(jelbourn): What canvas?
-  position: relative; //for child absolute-positioned <canvas>
-
-  outline: none;
-  border: 0;
-  padding: 6px;
-  margin: 0;
-  background: transparent;
-  white-space: nowrap;
-
-  text-align: center;
-
-  // TODO(jelbourn): wat?
-  font-weight: 500;
-  font-style: inherit;
-  font-variant: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-  text-decoration: none;
-
-  cursor: pointer;
-  overflow: hidden; // for ink containment
-
-  transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
-  background-color $swift-ease-out-duration $swift-ease-out-timing-function,
-  transform $swift-ease-out-duration $swift-ease-out-timing-function;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &.md-cornered {
-    border-radius: 0;
-  }
-
-  &.md-icon {
-    padding: 0;
-    background: none;
-  }
-
-  &.md-raised {
-    transform: translate3d(0, 0, 0);
-
-
-    &:not([disabled]) {
-      @extend .md-shadow-bottom-z-1;
-    }
-  }
-
-  &.md-fab {
-    // .md-fab-bottom-right
-    @include fab-position(
-        bottom-right,
-        auto,
-        ($button-fab-width - $button-fab-padding) / 2,
-        ($button-fab-height - $button-fab-padding) / 2,
-        auto);
-
-    // .md-fab-bottom-left
-    @include fab-position(
-        bottom-left,
-        auto,
-        auto,
-        ($button-fab-height - $button-fab-padding) / 2,
-        ($button-fab-width - $button-fab-padding) / 2);
-
-    // .md-fab-top-right
-    @include fab-position(
-        top-right,
-        ($button-fab-height - $button-fab-padding) / 2,
-        ($button-fab-width - $button-fab-padding) / 2,
-        auto,
-        auto);
-
-    // .md-fab-top-left
-    @include fab-position(
-        top-left,
-        ($button-fab-height - $button-fab-padding) / 2,
-        auto,
-        auto,
-        ($button-fab-width - $button-fab-padding) / 2);
-
-
-    z-index: $z-index-fab;
-
-    width: $button-fab-width;
-    height: $button-fab-height;
-
-    border-radius: 50%;
-
-    @extend .md-shadow-bottom-z-1;
-    overflow: hidden;
-
-    transform: translate3d(0, 0, 0);
-
-    transition: 0.2s linear;
-    transition-property: transform, box-shadow;
-
-
-    // When there is an md-icon inside of an [md-button].
-    & md-icon {
-      line-height: $button-fab-height;
-      margin-top: 0;
-    }
-
-    &.md-mini {
-      width: $button-fab-mini-width;
-      height: $button-fab-mini-height;
-      md-icon {
-        line-height: $button-fab-mini-height;
-      }
-    }
-
-  }
-
-  &:not([disabled]) {
-    &.md-raised,
-    &.md-fab {
-      &:focus,
-      &:hover {
-        transform: translate3d(0, -1px, 0);
-        @extend .md-shadow-bottom-z-2;
-      }
-    }
-  }
-}
-
-// TODO
-.md-toast-open-top {
-  [md-button].md-fab-top-left,
-  [md-button].md-fab-top-right {
-    transform: translate3d(0, $button-fab-toast-offset, 0);
-    &:not([disabled]) {
-      &:focus,
-      &:hover {
-        transform: translate3d(0, $button-fab-toast-offset - 1, 0);
-      }
-    }
-  }
-}
-
-// TODO
-.md-toast-open-bottom {
-  [md-button].md-fab-bottom-left,
-  [md-button].md-fab-bottom-right {
-    transform: translate3d(0, -$button-fab-toast-offset, 0);
-    &:not([disabled]) {
-      &:focus,
-      &:hover {
-        transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
-      }
-    }
-  }
-}
-
-// TODO
-.md-button-group {
-  display: flex;
-  flex: 1;
-  width: 100%;
-}
-
-// TODO
-.md-button-group > [md-button] {
-  flex: 1;
-
-  display: block;
-
-  overflow: hidden;
-
-  width: 0;
-
-  border-width: 1px 0 1px 1px;
-  border-radius: 0;
-
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &:first-child {
-    border-radius: 2px 0 0 2px;
-  }
-  &:last-child {
-    border-right-width: 1px;
-    border-radius: 0 2px 2px 0;
-  }
-}
-
-
-// ------------------------ Button theme ----------------------------------------------------------
-
-$button-border-radius: 3px !default;
-$button-fab-border-radius: 50% !default;
-
-// The ELEMENT '[md-button]' is the host.
-// The CLASS '[md-button]' is the shadow root.
-
-md-toolbar [md-button].md-fab {
-  background-color: white;
-}
-
-
-// Because of Shadow DOM emulation, the modifier classes are applied to the [md-button]
-// element (host), but the style needs to be changed for the shadow content (.[md-button]).
-[md-button] {
-  border-radius: $button-border-radius;
-
-  // When the user explictly applies the primary color.
-  &.md-primary {
-    color: md-color($md-primary);
-  }
-
-  &.md-primary.md-fab,
-  &.md-primary.md-raised {
-    color: md-color($md-primary, default-contrast);
-    background-color: md-color($md-primary);
-  }
-
-  // When the user explictly applies the accent color.
-  &.md-accent {
-    color: md-color($md-accent);
-  }
-
-  &.md-accent.md-fab,
-  &.md-accent.md-raised {
-    color: md-color($md-accent, default-contrast);
-    background-color: md-color($md-accent);
-  }
-
-  // When the user explictly applies the warn color.
-  &.md-warn {
-    color: md-color($md-warn);
-  }
-
-  &.md-warn.md-fab,
-  &.md-warn.md-raised {
-    color: md-color($md-warn, default-contrast);
-    background-color: md-color($md-warn);
-  }
-
-  // When the button is a fab without an explicit color applied.
-  &.md-fab {
-    border-radius: $button-fab-border-radius;
-    background-color: md-color($md-accent);
-    color: md-color($md-accent, default-contrast);
-  }
-
-  // When the button is raised without an explicit color applied.
-  &.md-raised {
-    color: md-color($md-background, default-contrast);
-    background-color: md-color($md-background, 50);
-  }
-}
-
-// Hover and focus styles (only applied when the button is not disabled).
-// The modifiers for :focus and :hover actually apply to the element in the
-// shadow DOM (the .[md-button]).
-[md-button]:not([disabled])  {
-  // Default hover/focus background.
-  &:focus,
-  &:hover {
-    background-color: md-color($md-background, 500, 0.2);
-  }
-
-  &.md-primary.md-fab,
-  &.md-primary.md-raised {
-    &:hover,
-    &:focus {
-      background-color: md-color($md-primary, 600);
-    }
-  }
-
-  &.md-accent.md-fab,
-  &.md-accent.md-raised {
-    &:hover,
-    &:focus {
-      background-color: md-color($md-accent, 700);
-    }
-  }
-
-  &.md-warn.md-fab,
-  &.md-warn.md-raised {
-    &:hover,
-    &:focus {
-      background-color: md-color($md-warn, 700);
-    }
-  }
-
-  &.md-fab {
-    &:hover,
-    &:focus {
-      background-color: md-color($md-accent, A700);
-    }
-  }
-
-  &.md-raised {
-    &:hover,
-    &:focus {
-      background-color: md-color($md-background, 200);
-    }
-  }
-}
-
-[md-button][disabled],
-[md-button][disabled].md-fab,
-[md-button][disabled].md-raised, {
-  color: md-color($md-foreground, disabled);
-  background-color: transparent;
-  cursor: not-allowed;
-}
diff --git a/modules/angular2_material/src/components/button/button.ts b/modules/angular2_material/src/components/button/button.ts
deleted file mode 100644
index e86cbe18bdf3..000000000000
--- a/modules/angular2_material/src/components/button/button.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {Component, View, onChange} from 'angular2/angular2';
-import {isPresent} from 'angular2/src/facade/lang';
-
-
-@Component({selector: '[md-button]:not([href])'})
-@View({templateUrl: 'angular2_material/src/components/button/button.html'})
-export class MdButton {
-  // TODO(jelbourn): Ink ripples.
-}
-
-
-@Component({
-  selector: '[md-button][href]',
-  properties: ['disabled'],
-  host: {'(click)': 'onClick($event)', '[tabIndex]': 'tabIndex'},
-  lifecycle: [onChange]
-})
-@View({templateUrl: 'angular2_material/src/components/button/button.html'})
-export class MdAnchor {
-  tabIndex: number;
-
-  /** Whether the component is disabled. */
-  disabled: boolean;
-
-  onClick(event) {
-    // A disabled anchor shouldn't navigate anywhere.
-    if (isPresent(this.disabled) && this.disabled !== false) {
-      event.preventDefault();
-    }
-  }
-
-  /** Invoked when a change is detected. */
-  onChange(_) {
-    // A disabled anchor should not be in the tab flow.
-    this.tabIndex = this.disabled ? -1 : 0;
-  }
-}
diff --git a/modules/angular2_material/src/components/checkbox/checkbox.html b/modules/angular2_material/src/components/checkbox/checkbox.html
deleted file mode 100644
index 91e01a488b01..000000000000
--- a/modules/angular2_material/src/components/checkbox/checkbox.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<style>@import "angular2_material/src/components/checkbox/checkbox.css";</style>
-
-<div (^click)="toggle($event)">
-  <div class="md-checkbox-container">
-    <div class="md-checkbox-icon"></div>
-  </div>
-  <div class="md-checkbox-label"><content></content></div>
-</div>
diff --git a/modules/angular2_material/src/components/checkbox/checkbox.scss b/modules/angular2_material/src/components/checkbox/checkbox.scss
deleted file mode 100644
index 7764f5bf0d63..000000000000
--- a/modules/angular2_material/src/components/checkbox/checkbox.scss
+++ /dev/null
@@ -1,176 +0,0 @@
-@import "../../core/style/variables";
-@import "../../core/style/shadows";
-
-// TODO(jelbourn): This goes away.
-@import "../../core/style/default-theme";
-
-$checkbox-width: 18px !default;
-$checkbox-height: $checkbox-width !default;
-
-md-checkbox {
-  box-sizing: border-box;
-  display: block;
-  margin: 15px;
-  white-space: nowrap;
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-
-  *, *:after {
-    box-sizing: border-box;
-  }
-
-  &[aria-checked="true"] .md-checkbox-icon {
-    border: none;
-  }
-
-  // Checkbox is disabled.
-  &[disabled] {
-    cursor: no-drop;
-  }
-
-  // Checkbox is focused.
-  &:focus .md-checkbox-label:not(:empty) {
-    border-color: black;
-  }
-
-  // Checkbox is checked.
-  &[aria-checked="true"] .md-checkbox-icon:after {
-    transform: rotate(45deg);
-    position: absolute;
-    left: 6px;
-    top: 2px;
-    display: table;
-    width: 6px;
-    height: 12px;
-    border: 2px solid;
-    border-top: 0;
-    border-left: 0;
-    content: ' ';
-  }
-}
-
-.md-checkbox-container {
-  position: relative;
-  top: 4px;
-  display: inline-block;
-  width: $checkbox-width;
-  height: $checkbox-height;
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: -10px;
-    right: -10px;
-    bottom: -10px;
-    left: -10px;
-  }
-
-  .md-ripple-container {
-    position: absolute;
-    display: block;
-    width: auto;
-    height: auto;
-    left: -15px;
-    top: -15px;
-    right: -15px;
-    bottom: -15px;
-  }
-}
-
-// Checkbox is not checked.
-.md-checkbox-icon {
-  transition: 240ms;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: $checkbox-width;
-  height: $checkbox-height;
-  border: 2px solid;
-  border-radius: 2px;
-}
-
-.md-checkbox-label {
-  border: 1px dotted transparent;
-  position: relative;
-  display: inline-block;
-  margin-left: 10px;
-  vertical-align: middle;
-  white-space: normal;
-  pointer-events: none;
-  user-select: text;
-}
-
-// THEME
-// TODO(jelbourn): ripple
-
-md-checkbox {
-
-  .md-ripple {
-    color: md-color($md-accent, 600);
-  }
-  &[aria-checked="true"] .md-ripple {
-    color: md-color($md-background, 600);
-  }
-
-  .md-checkbox-icon {
-    border-color: md-color($md-foreground, icon);
-  }
-  &[aria-checked="true"] .md-checkbox-icon {
-    background-color: md-color($md-accent, 0.87);
-  }
-
-  &[aria-checked="true"] .md-checkbox-icon:after {
-    border-color: md-color($md-background, 200);
-  }
-
-  &:not([disabled]) {
-    &.md-primary {
-      .md-ripple {
-        color: md-color($md-primary, 600);
-      }
-      &[aria-checked="true"] .md-ripple {
-        color: md-color($md-background, 600);
-      }
-
-      .md-checkbox-icon {
-        border-color: md-color($md-foreground, icon);
-      }
-      &[aria-checked="true"] .md-checkbox-icon {
-        background-color: md-color($md-primary, 0.87);
-      }
-
-      &[aria-checked="true"] .md-checkbox-icon:after {
-        border-color: md-color($md-background, 200);
-      }
-    }
-
-    &.md-warn {
-      .md-ripple {
-        color: md-color($md-warn, 600);
-      }
-
-      .md-checkbox-icon {
-        border-color: md-color($md-foreground, icon);
-      }
-      &[aria-checked="true"] .md-checkbox-icon {
-        background-color: md-color($md-warn, 0.87);
-      }
-
-      &[aria-checked="true"] .md-checkbox-icon:after {
-        border-color: md-color($md-background, 200);
-      }
-    }
-  }
-
-  &[disabled] {
-    .md-checkbox-icon {
-      border-color: md-color($md-foreground, disabled);
-    }
-
-    &[aria-checked="true"] .md-checkbox-icon {
-      background-color: md-color($md-foreground, disabled);
-    }
-  }
-
-}
diff --git a/modules/angular2_material/src/components/checkbox/checkbox.ts b/modules/angular2_material/src/components/checkbox/checkbox.ts
deleted file mode 100644
index c5bbb3a6b1ac..000000000000
--- a/modules/angular2_material/src/components/checkbox/checkbox.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {Component, View, Attribute} from 'angular2/angular2';
-import {isPresent} from 'angular2/src/facade/lang';
-import {KEY_SPACE} from 'angular2_material/src/core/constants';
-import {KeyboardEvent} from 'angular2/src/facade/browser';
-import {NumberWrapper} from 'angular2/src/facade/lang';
-
-@Component({
-  selector: 'md-checkbox',
-  properties: ['checked', 'disabled'],
-  host: {
-    '(keydown)': 'onKeydown($event)',
-    '[tabindex]': 'tabindex',
-    '[attr.role]': '"checkbox"',
-    '[attr.aria-checked]': 'checked',
-    '[attr.aria-disabled]': 'disabled'
-  }
-})
-@View({templateUrl: 'angular2_material/src/components/checkbox/checkbox.html', directives: []})
-export class MdCheckbox {
-  /** Whether this checkbox is checked. */
-  checked: boolean;
-
-  /** Whether this checkbox is disabled. */
-  _disabled: boolean;
-
-  /** Setter for tabindex */
-  tabindex: number;
-
-  constructor(@Attribute('tabindex') tabindex: string) {
-    this.checked = false;
-    this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
-    this._disabled = false;
-  }
-
-  get disabled() {
-    return this._disabled;
-  }
-
-  set disabled(value) {
-    this._disabled = isPresent(value) && value !== false;
-  }
-
-  onKeydown(event: KeyboardEvent) {
-    if (event.keyCode == KEY_SPACE) {
-      event.preventDefault();
-      this.toggle(event);
-    }
-  }
-
-  toggle(event) {
-    if (this.disabled) {
-      event.stopPropagation();
-      return;
-    }
-
-    this.checked = !this.checked;
-  }
-}
diff --git a/modules/angular2_material/src/components/dialog/dialog.html b/modules/angular2_material/src/components/dialog/dialog.html
deleted file mode 100644
index d291f7a3e56c..000000000000
--- a/modules/angular2_material/src/components/dialog/dialog.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<style>
-  .md-dialog {
-    position: absolute;
-    z-index: 80;
-
-    /** Center the dialog. */
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    width: 300px;
-    height: 300px;
-
-    background-color: white;
-    border: 1px solid black;
-    box-shadow: 0 4px 4px;;
-
-    padding: 20px;
-  }
-
-  .md-backdrop {
-    position: absolute;
-    top:0 ;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.12);
-  }
-</style>
-
-<md-dialog-content></md-dialog-content>
-<div tabindex="0" (focus)="wrapFocus()"></div>
-
diff --git a/modules/angular2_material/src/components/dialog/dialog.ts b/modules/angular2_material/src/components/dialog/dialog.ts
deleted file mode 100644
index 10fe1c6a452d..000000000000
--- a/modules/angular2_material/src/components/dialog/dialog.ts
+++ /dev/null
@@ -1,269 +0,0 @@
-import {
-  Component,
-  Directive,
-  View,
-  Parent,
-  ElementRef,
-  DynamicComponentLoader,
-  ComponentRef,
-  DomRenderer
-} from 'angular2/angular2';
-import {bind, Injectable, forwardRef, ResolvedBinding, Injector} from 'angular2/di';
-
-import {ObservableWrapper, Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {isPresent, Type} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {MouseEvent, KeyboardEvent} from 'angular2/src/facade/browser';
-import {KEY_ESC} from 'angular2_material/src/core/constants';
-
-// TODO(jelbourn): Opener of dialog can control where it is rendered.
-// TODO(jelbourn): body scrolling is disabled while dialog is open.
-// TODO(jelbourn): Don't manually construct and configure a DOM element. See #1402
-// TODO(jelbourn): Wrap focus from end of dialog back to the start. Blocked on #1251
-// TODO(jelbourn): Focus the dialog element when it is opened.
-// TODO(jelbourn): Real dialog styles.
-// TODO(jelbourn): Pre-built `alert` and `confirm` dialogs.
-// TODO(jelbourn): Animate dialog out of / into opening element.
-
-/**
- * Service for opening modal dialogs.
- */
-@Injectable()
-export class MdDialog {
-  componentLoader: DynamicComponentLoader;
-  domRenderer: DomRenderer;
-
-  constructor(loader: DynamicComponentLoader, domRenderer: DomRenderer) {
-    this.componentLoader = loader;
-    this.domRenderer = domRenderer;
-  }
-
-  /**
-   * Opens a modal dialog.
-   * @param type The component to open.
-   * @param elementRef The logical location into which the component will be opened.
-   * @param parentInjector
-   * @param options
-   * @returns Promise for a reference to the dialog.
-   */
-  open(type: Type, elementRef: ElementRef, options: MdDialogConfig = null): Promise<MdDialogRef> {
-    var config = isPresent(options) ? options : new MdDialogConfig();
-
-    // Create the dialogRef here so that it can be injected into the content component.
-    var dialogRef = new MdDialogRef();
-
-    var bindings = Injector.resolve([bind(MdDialogRef).toValue(dialogRef)]);
-
-    var backdropRefPromise = this._openBackdrop(elementRef, bindings);
-
-    // First, load the MdDialogContainer, into which the given component will be loaded.
-    return this.componentLoader.loadNextToLocation(MdDialogContainer, elementRef)
-        .then(containerRef => {
-          // TODO(tbosch): clean this up when we have custom renderers
-          // (https://github.com/angular/angular/issues/1807)
-          // TODO(jelbourn): Don't use direct DOM access. Need abstraction to create an element
-          // directly on the document body (also needed for web workers stuff).
-          // Create a DOM node to serve as a physical host element for the dialog.
-          var dialogElement = this.domRenderer.getRootNodes(containerRef.hostView.render)[0];
-          DOM.appendChild(DOM.query('body'), dialogElement);
-
-          // TODO(jelbourn): Use hostProperties binding to set these once #1539 is fixed.
-          // Configure properties on the host element.
-          DOM.addClass(dialogElement, 'md-dialog');
-          DOM.setAttribute(dialogElement, 'tabindex', '0');
-
-          // TODO(jelbourn): Do this with hostProperties (or another rendering abstraction) once
-          // ready.
-          if (isPresent(config.width)) {
-            DOM.setStyle(dialogElement, 'width', config.width);
-          }
-          if (isPresent(config.height)) {
-            DOM.setStyle(dialogElement, 'height', config.height);
-          }
-
-          dialogRef.containerRef = containerRef;
-
-          // Now load the given component into the MdDialogContainer.
-          return this.componentLoader.loadNextToLocation(type, containerRef.instance.contentRef,
-                                                         bindings)
-              .then(contentRef => {
-
-                // Wrap both component refs for the container and the content so that we can return
-                // the `instance` of the content but the dispose method of the container back to the
-                // opener.
-                dialogRef.contentRef = contentRef;
-                containerRef.instance.dialogRef = dialogRef;
-
-                backdropRefPromise.then(backdropRef => {
-                  dialogRef.whenClosed.then((_) => { backdropRef.dispose(); });
-                });
-
-                return dialogRef;
-              });
-        });
-  }
-
-  /** Loads the dialog backdrop (transparent overlay over the rest of the page). */
-  _openBackdrop(elementRef: ElementRef, bindings: ResolvedBinding[]): Promise<ComponentRef> {
-    return this.componentLoader.loadNextToLocation(MdBackdrop, elementRef, bindings)
-        .then((componentRef) => {
-          // TODO(tbosch): clean this up when we have custom renderers
-          // (https://github.com/angular/angular/issues/1807)
-          var backdropElement = this.domRenderer.getRootNodes(componentRef.hostView.render)[0];
-          DOM.addClass(backdropElement, 'md-backdrop');
-          DOM.appendChild(DOM.query('body'), backdropElement);
-          return componentRef;
-        });
-  }
-
-  alert(message: string, okMessage: string): Promise<any> {
-    throw "Not implemented";
-  }
-
-  confirm(message: string, okMessage: string, cancelMessage: string): Promise<any> {
-    throw "Not implemented";
-  }
-}
-
-
-/**
- * Reference to an opened dialog.
- */
-export class MdDialogRef {
-  // Reference to the MdDialogContainer component.
-  containerRef: ComponentRef;
-
-  // Reference to the Component loaded as the dialog content.
-  _contentRef: ComponentRef;
-
-  // Whether the dialog is closed.
-  isClosed: boolean;
-
-  // Deferred resolved when the dialog is closed. The promise for this deferred is publicly exposed.
-  whenClosedDeferred: any;
-
-  // Deferred resolved when the content ComponentRef is set. Only used internally.
-  contentRefDeferred: any;
-
-  constructor() {
-    this._contentRef = null;
-    this.containerRef = null;
-    this.isClosed = false;
-
-    this.contentRefDeferred = PromiseWrapper.completer();
-    this.whenClosedDeferred = PromiseWrapper.completer();
-  }
-
-  set contentRef(value: ComponentRef) {
-    this._contentRef = value;
-    this.contentRefDeferred.resolve(value);
-  }
-
-  /** Gets the component instance for the content of the dialog. */
-  get instance() {
-    if (isPresent(this._contentRef)) {
-      return this._contentRef.instance;
-    }
-
-    // The only time one could attempt to access this property before the value is set is if an
-    // access occurs during
-    // the constructor of the very instance they are trying to get (which is much more easily
-    // accessed as `this`).
-    throw "Cannot access dialog component instance *from* that component's constructor.";
-  }
-
-
-  /** Gets a promise that is resolved when the dialog is closed. */
-  get whenClosed(): Promise<any> {
-    return this.whenClosedDeferred.promise;
-  }
-
-  /** Closes the dialog. This operation is asynchronous. */
-  close(result: any = null) {
-    this.contentRefDeferred.promise.then((_) => {
-      if (!this.isClosed) {
-        this.isClosed = true;
-        this.containerRef.dispose();
-        this.whenClosedDeferred.resolve(result);
-      }
-    });
-  }
-}
-
-/** Confiuration for a dialog to be opened. */
-export class MdDialogConfig {
-  width: string;
-  height: string;
-
-  constructor() {
-    // Default configuration.
-    this.width = null;
-    this.height = null;
-  }
-}
-
-/**
- * Container for user-provided dialog content.
- */
-@Component({
-  selector: 'md-dialog-container',
-  host: {'(body:^keydown)': 'documentKeypress($event)'},
-})
-@View({
-  templateUrl: 'angular2_material/src/components/dialog/dialog.html',
-  directives: [forwardRef(() => MdDialogContent)]
-})
-class MdDialogContainer {
-  // Ref to the dialog content. Used by the DynamicComponentLoader to load the dialog content.
-  contentRef: ElementRef;
-
-  // Ref to the open dialog. Used to close the dialog based on certain events.
-  dialogRef: MdDialogRef;
-
-  constructor() {
-    this.contentRef = null;
-    this.dialogRef = null;
-  }
-
-  wrapFocus() {
-    // Return the focus to the host element. Blocked on #1251.
-  }
-
-  documentKeypress(event: KeyboardEvent) {
-    if (event.keyCode == KEY_ESC) {
-      this.dialogRef.close();
-    }
-  }
-}
-
-/**
- * Simple decorator used only to communicate an ElementRef to the parent MdDialogContainer as the
- * location
- * for where the dialog content will be loaded.
- */
-@Directive({selector: 'md-dialog-content'})
-class MdDialogContent {
-  constructor(@Parent() dialogContainer: MdDialogContainer, elementRef: ElementRef) {
-    dialogContainer.contentRef = elementRef;
-  }
-}
-
-/** Component for the dialog "backdrop", a transparent overlay over the rest of the page. */
-@Component({
-  selector: 'md-backdrop',
-  host: {'(click)': 'onClick()'},
-})
-@View({template: ''})
-class MdBackdrop {
-  dialogRef: MdDialogRef;
-
-  constructor(dialogRef: MdDialogRef) {
-    this.dialogRef = dialogRef;
-  }
-
-  onClick() {
-    // TODO(jelbourn): Use MdDialogConfig to capture option for whether dialog should close on
-    // clicking outside.
-    this.dialogRef.close();
-  }
-}
diff --git a/modules/angular2_material/src/components/grid_list/grid-list.scss b/modules/angular2_material/src/components/grid_list/grid-list.scss
deleted file mode 100644
index fb8d0acf7a6b..000000000000
--- a/modules/angular2_material/src/components/grid_list/grid-list.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-md-grid-list {
-  display: block;
-  position: relative;
-}
-
-md-grid-tile {
-  display: block;
-  position: absolute;
-
-  figure {
-    display: flex;
-    position: absolute;
-
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    padding: 0;
-    margin: 0;
-  }
-
-  // Headers & footers
-  md-grid-tile-header,
-  md-grid-tile-footer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 48px;
-    color: #fff;
-    background: rgba(0, 0, 0, 0.18);
-    overflow: hidden;
-
-    // Positioning
-    position: absolute;
-    left: 0;
-    right: 0;
-
-    h3,
-    h4 {
-      font-weight: 400;
-      margin: 0 0 0 16px;
-    }
-
-    h3 {
-      font-size: 14px;
-    }
-
-    h4 {
-      font-size: 12px;
-    }
-  }
-
-  md-grid-tile-header {
-    top: 0;
-  }
-
-  md-grid-tile-footer {
-    bottom: 0;
-  }
-}
-
-
-
diff --git a/modules/angular2_material/src/components/grid_list/grid_list.html b/modules/angular2_material/src/components/grid_list/grid_list.html
deleted file mode 100644
index 7ec47f33a269..000000000000
--- a/modules/angular2_material/src/components/grid_list/grid_list.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<style>
-  md-grid-tile {
-    background: lightblue;
-  }
-</style>
-
-<div class="md-grid-list">
-  <content></content>
-</div>
diff --git a/modules/angular2_material/src/components/grid_list/grid_list.ts b/modules/angular2_material/src/components/grid_list/grid_list.ts
deleted file mode 100644
index e1cfc51b9467..000000000000
--- a/modules/angular2_material/src/components/grid_list/grid_list.ts
+++ /dev/null
@@ -1,433 +0,0 @@
-import {Component, View, Parent, onDestroy, onChange, onAllChangesDone} from 'angular2/angular2';
-
-import {ListWrapper} from 'angular2/src/facade/collection';
-import {
-  StringWrapper,
-  isPresent,
-  isString,
-  NumberWrapper,
-  RegExpWrapper
-} from 'angular2/src/facade/lang';
-import {Math} from 'angular2/src/facade/math';
-
-// TODO(jelbourn): Set appropriate aria attributes for grid list elements.
-// TODO(jelbourn): Animations.
-// TODO(jelbourn): Conditional (responsive) column count / row size.
-// TODO(jelbourn): Re-layout on window resize / media change (debounced).
-// TODO(jelbourn): gridTileHeader and gridTileFooter.
-// TODO(jelbourn): rowHeightMode enum (after TS conversion).
-
-@Component({
-  selector: 'md-grid-list',
-  properties: ['cols', 'rowHeight', 'gutterSize'],
-  lifecycle: [onAllChangesDone]
-})
-@View({templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'})
-export class MdGridList {
-  /** List of tiles that are being rendered. */
-  tiles: List<MdGridTile>;
-
-  /** Number of columns being rendered. */
-  _cols: number;
-
-  /** Number of rows being rendered (computed). */
-  rows: number;
-
-  /** Mode used to determine row heights. See RowHeightMode. */
-  rowHeightMode: string;
-
-  /** Fixed row height, as given by the user. Only used for 'fixed' mode. */
-  fixedRowHeight: string;
-
-  /** Ratio width:height given by user to determine row height. Only used for 'ratio' mode.*/
-  rowHeightRatio: number;
-
-  /** The amount of space between tiles. This will be something like '5px' or '2em'. */
-  gutterSize: string;
-
-  constructor() {
-    this.tiles = [];
-    this.rows = 0;
-  }
-
-  set cols(value: any) {
-    this._cols = isString(value) ? NumberWrapper.parseInt(value, 10) : <number>value;
-  }
-
-  get cols() {
-    return this._cols;
-  }
-
-  /** Set internal representation of row height from the user-provided value. */
-  set rowHeight(value) {
-    if (value === 'fit') {
-      this.rowHeightMode = 'fit';
-    } else if (StringWrapper.contains(value, ':')) {
-      var ratioParts = StringWrapper.split(value, RegExpWrapper.create(':'));
-      if (ratioParts.length !== 2) {
-        throw `md-grid-list: invalid ratio given for row-height: "${value}"`;
-      }
-
-      this.rowHeightMode = 'ratio';
-      this.rowHeightRatio =
-          NumberWrapper.parseFloat(ratioParts[0]) / NumberWrapper.parseFloat(ratioParts[1]);
-    } else {
-      this.rowHeightMode = 'fixed';
-      this.fixedRowHeight = value;
-    }
-  }
-
-  onAllChangesDone() {
-    this.layoutTiles();
-  }
-
-  /** Computes and applies the size and position for all children grid tiles. */
-  layoutTiles() {
-    var tracker = new TileCoordinator(this.cols, this.tiles);
-    this.rows = tracker.rowCount;
-
-    for (var i = 0; i < this.tiles.length; i++) {
-      var pos = tracker.positions[i];
-      var tile = this.tiles[i];
-      var style = this.getTileStyle(tile, pos.row, pos.col);
-
-      tile.styleWidth = style.width;
-      tile.styleHeight = style.height;
-      tile.styleTop = style.top;
-      tile.styleLeft = style.left;
-      tile.styleMarginTop = style.marginTop;
-      tile.stylePaddingTop = style.paddingTop;
-    }
-  }
-
-  /**
-   * Adds a tile to the grid-list.
-   * @param tile
-   */
-  addTile(tile: MdGridTile) {
-    this.tiles.push(tile);
-  }
-
-  /**
-   * Removes a tile from the grid-list.
-   * @param tile
-   */
-  removeTile(tile: MdGridTile) {
-    ListWrapper.remove(this.tiles, tile);
-  }
-
-  /**
-   * Computes the amount of space a single 1x1 tile would take up (width or height).
-   * Used as a basis for other calculations.
-   * @param sizePercent Percent of the total grid-list space that one 1x1 tile would take up.
-   * @param gutterFraction Fraction of the gutter size taken up by one 1x1 tile.
-   * @return The size of a 1x1 tile as an expression that can be evaluated via CSS calc().
-   */
-  getBaseTileSize(sizePercent: number, gutterFraction: number): string {
-    // Take the base size percent (as would be if evenly dividing the size between cells),
-    // and then subtracting the size of one gutter. However, since there are no gutters on the
-    // edges, each tile only uses a fration (gutterShare = numGutters / numCells) of the gutter
-    // size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the
-    // edge evenly among the cells).
-    return `(${sizePercent}% - ( ${this.gutterSize} * ${gutterFraction} ))`;
-  }
-
-
-  /**
-   * Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
-   * @param offset Number of tiles that have already been rendered in the row/column.
-   * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
-   * @return Position of the tile as a CSS calc() expression.
-   */
-  getTilePosition(baseSize: string, offset: number): string {
-    // The position comes the size of a 1x1 tile plus gutter for each previous tile in the
-    // row/column (offset).
-    return `calc( (${baseSize} + ${this.gutterSize}) * ${offset} )`;
-  }
-
-
-  /**
-   * Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account.
-   * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
-   * @param span The tile's rowspan or colspan.
-   * @return Size of the tile as a CSS calc() expression.
-   */
-  getTileSize(baseSize: string, span: number): string {
-    return `calc( (${baseSize} * ${span}) + (${span - 1} * ${this.gutterSize}) )`;
-  }
-
-
-  /** Gets the style properties to be applied to a tile for the given row and column index. */
-  getTileStyle(tile: MdGridTile, rowIndex: number, colIndex: number): TileStyle {
-    // Percent of the available horizontal space that one column takes up.
-    var percentWidthPerTile = 100 / this.cols;
-
-    // Fraction of the vertical gutter size that each column takes up.
-    // For example, if there are 5 columns, each column uses 4/5 = 0.8 times the gutter width.
-    var gutterWidthFractionPerTile = (this.cols - 1) / this.cols;
-
-    // Base horizontal size of a column.
-    var baseTileWidth = this.getBaseTileSize(percentWidthPerTile, gutterWidthFractionPerTile);
-
-    // The width and horizontal position of each tile is always calculated the same way, but the
-    // height and vertical position depends on the rowMode.
-    var tileStyle = new TileStyle();
-    tileStyle.left = this.getTilePosition(baseTileWidth, colIndex);
-    tileStyle.width = this.getTileSize(baseTileWidth, tile.colspan);
-
-    // TODO: make cases enums when we support enums
-    switch (this.rowHeightMode) {
-      case 'fixed':
-        // In fixed mode, simply use the given row height.
-        tileStyle.top = this.getTilePosition(this.fixedRowHeight, rowIndex);
-        tileStyle.height = this.getTileSize(this.fixedRowHeight, tile.rowspan);
-        break;
-
-      case 'ratio':
-        var percentHeightPerTile = percentWidthPerTile / this.rowHeightRatio;
-        var baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidthFractionPerTile);
-
-        // Use paddingTop and marginTop to maintain the given aspect ratio, as
-        // a percentage-based value for these properties is applied versus the *width* of the
-        // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
-        tileStyle.marginTop = this.getTilePosition(baseTileHeight, rowIndex);
-        tileStyle.paddingTop = this.getTileSize(baseTileHeight, tile.rowspan);
-        break;
-
-      case 'fit':
-        // Percent of the available vertical space that one row takes up.
-        var percentHeightPerTile = 100 / this.cols;
-
-        // Fraction of the horizontal gutter size that each column takes up.
-        var gutterHeightFractionPerTile = (this.rows - 1) / this.rows;
-
-        // Base vertical size of a column.
-        var baseTileHeight =
-            this.getBaseTileSize(percentHeightPerTile, gutterHeightFractionPerTile);
-
-        tileStyle.top = this.getTilePosition(baseTileHeight, rowIndex);
-        tileStyle.height = this.getTileSize(baseTileHeight, tile.rowspan);
-
-        break;
-    }
-
-    return tileStyle;
-  }
-}
-
-@Component({
-  selector: 'md-grid-tile',
-  properties: ['rowspan', 'colspan'],
-  host: {
-    '[style.height]': 'styleHeight',
-    '[style.width]': 'styleWidth',
-    '[style.top]': 'styleTop',
-    '[style.left]': 'styleLeft',
-    '[style.marginTop]': 'styleMarginTop',
-    '[style.paddingTop]': 'stylePaddingTop',
-    '[attr.role]': '"listitem"'
-  },
-  lifecycle: [onDestroy, onChange]
-})
-@View({templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'})
-export class MdGridTile {
-  gridList: MdGridList;
-  _rowspan: number;
-  _colspan: number;
-
-  styleHeight: string;
-  styleWidth: string;
-  styleTop: string;
-  styleLeft: string;
-  styleMarginTop: string;
-  stylePaddingTop: string;
-
-  isRegisteredWithGridList: boolean;
-
-  constructor(@Parent() gridList: MdGridList) {
-    this.gridList = gridList;
-
-    // Tiles default to 1x1, but rowspan and colspan can be changed via binding.
-    this.rowspan = 1;
-    this.colspan = 1;
-  }
-
-  set rowspan(value) {
-    this._rowspan = isString(value) ? NumberWrapper.parseInt(value, 10) : <number>value;
-  }
-
-  get rowspan() {
-    return this._rowspan;
-  }
-
-  set colspan(value) {
-    this._colspan = isString(value) ? NumberWrapper.parseInt(value, 10) : <number>value;
-  }
-
-  get colspan() {
-    return this._colspan;
-  }
-
-  /**
-   * Change handler invoked when bindings are resolved or when bindings have changed.
-   * Notifies grid-list that a re-layout is required.
-   */
-  onChange(_) {
-    if (!this.isRegisteredWithGridList) {
-      this.gridList.addTile(this);
-      this.isRegisteredWithGridList = true;
-    }
-  }
-
-  /**
-   * Destructor function. Deregisters this tile from the containing grid-list.
-   */
-  onDestroy() {
-    this.gridList.removeTile(this);
-  }
-}
-
-
-/**
- * Class for determining, from a list of tiles, the (row, col) position of each of those tiles
- * in the grid. This is necessary (rather than just rendering the tiles in normal document flow)
- * because the tiles can have a rowspan.
- *
- * The positioning algorithm greedily places each tile as soon as it encounters a gap in the grid
- * large enough to accomodate it so that the tiles still render in the same order in which they
- * are given.
- *
- * The basis of the algorithm is the use of an array to track the already placed tiles. Each
- * element of the array corresponds to a column, and the value indicates how many cells in that
- * column are already occupied; zero indicates an empty cell. Moving "down" to the next row
- * decrements each value in the tracking array (indicating that the column is one cell closer to
- * being free).
- */
-class TileCoordinator {
-  // Tracking array (see class description).
-  tracker: List<int>;
-
-  // Index at which the search for the next gap will start.
-  columnIndex: int;
-
-  // The current row index.
-  rowIndex: int;
-
-  // The computed (row, col) position of each tile (the output).
-  positions: List<Position>;
-
-  constructor(numColumns: number, tiles: List<MdGridTile>) {
-    this.columnIndex = 0;
-    this.rowIndex = 0;
-
-    this.tracker = ListWrapper.createFixedSize(numColumns);
-    ListWrapper.fill(this.tracker, 0);
-
-    this.positions = ListWrapper.map(tiles, tile => this._trackTile(tile));
-  }
-
-  /** Gets the number of rows occupied by tiles. */
-  get rowCount() {
-    return this.rowIndex + 1;
-  }
-
-  _trackTile(tile: MdGridTile): Position {
-    if (tile.colspan > this.tracker.length) {
-      throw `Tile with colspan ${tile.colspan} is wider
-          than grid with cols="${this.tracker.length}".`
-    }
-
-    // Start index is inclusive, end index is exclusive.
-    var gapStartIndex = -1;
-    var gapEndIndex = -1;
-
-    // Look for a gap large enough to fit the given tile. Empty spaces are marked with a zero.
-    do {
-      // If we've reached the end of the row, go to the next row
-      if (this.columnIndex + tile.colspan > this.tracker.length) {
-        this._nextRow();
-        continue;
-      }
-
-      gapStartIndex = ListWrapper.indexOf(this.tracker, 0, this.columnIndex);
-
-      // If there are no more empty spaces in this row at all, move on to the next row.
-      if (gapStartIndex == -1) {
-        this._nextRow();
-        continue;
-      }
-
-      gapEndIndex = this._findGapEndIndex(gapStartIndex);
-
-      // If a gap large enough isn't found, we want to start looking immediately after the current
-      // gap on the next iteration.
-      this.columnIndex = gapStartIndex + 1;
-
-      // Continue iterating until we find a gap wide enough for this tile.
-    } while (gapEndIndex - gapStartIndex < tile.colspan);
-
-    // We now have a space big enough for this tile, so place it.
-    this._markTilePosition(gapStartIndex, tile);
-
-    // The next time we look for a gap, the search will start at columnIndex, which should be
-    // immediately after the tile that has just been placed.
-    this.columnIndex = gapStartIndex + tile.colspan;
-
-    return new Position(this.rowIndex, gapStartIndex);
-  }
-
-  /** Move "down" to the next row. */
-  _nextRow() {
-    this.columnIndex = 0;
-    this.rowIndex++;
-
-    // Decrement all spaces by one to reflect moving down one row.
-    for (var i = 0; i < this.tracker.length; i++) {
-      this.tracker[i] = Math.max(0, this.tracker[i] - 1);
-    }
-  }
-
-  /**
-   * Finds the end index (exclusive) of a gap given the index from which to start looking.
-   * The gap ends when a non-zero value is found.
-   */
-  _findGapEndIndex(gapStartIndex: number): number {
-    for (var i = gapStartIndex + 1; i < this.tracker.length; i++) {
-      if (this.tracker[i] != 0) {
-        return i;
-      }
-    }
-
-    // The gap ends with the end of the row.
-    return this.tracker.length;
-  }
-
-  /** Update the tile tracker to account for the given tile in the given space. */
-  _markTilePosition(start, tile) {
-    for (var i = 0; i < tile.colspan; i++) {
-      this.tracker[start + i] = tile.rowspan;
-    }
-  }
-}
-
-/** Simple data structure for tile position (row, col). */
-class Position {
-  row: number;
-  col: number;
-
-  constructor(row: number, col: number) {
-    this.row = row;
-    this.col = col;
-  }
-}
-
-
-/** Simple data structure for style values to be applied to a tile. */
-class TileStyle {
-  height: string;
-  width: string;
-  top: string;
-  left: string;
-  marginTop: string;
-  paddingTop: string;
-}
diff --git a/modules/angular2_material/src/components/grid_list/grid_tile.html b/modules/angular2_material/src/components/grid_list/grid_tile.html
deleted file mode 100644
index 73574f4e8964..000000000000
--- a/modules/angular2_material/src/components/grid_list/grid_tile.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<style>@import "angular2_material/src/components/grid_list/grid-list.css";</style>
-
-<figure>
-  <content></content>
-</figure>
diff --git a/modules/angular2_material/src/components/input/input.scss b/modules/angular2_material/src/components/input/input.scss
deleted file mode 100644
index a78e5be53a23..000000000000
--- a/modules/angular2_material/src/components/input/input.scss
+++ /dev/null
@@ -1,257 +0,0 @@
-@import "../../core/style/variables";
-
-// TODO(jelbourn): This goes away.
-@import "../../core/style/default-theme";
-
-@mixin input-placeholder-color($color) {
-  &::-webkit-input-placeholder,
-  &::-moz-placeholder, /* Firefox 19+ */
-  &:-moz-placeholder, /* Firefox 18- */
-  &:-ms-input-placeholder {
-    color: $color;
-  }
-}
-
-$input-container-padding: 2px !default;
-
-$input-label-default-offset: 24px !default;
-$input-label-default-scale: 1.0 !default;
-$input-label-float-offset: 4px !default;
-$input-label-float-scale: 0.75 !default;
-
-$input-placeholder-offset: $input-label-default-offset !default;
-
-$input-border-width-default: 1px !default;
-$input-border-width-focused: 2px !default;
-$input-line-height: 26px !default;
-$input-padding-top: 2px !default;
-
-$input-error-font-size: 12px !default;
-$input-error-height: 24px !default;
-
-md-input-container {
-  box-sizing: border-box;
-  display: flex;
-  position: relative;
-  flex-direction: column;
-
-  overflow-x: hidden;
-  padding: $input-container-padding;
-  padding-bottom: $input-container-padding + $input-error-height;
-
-  > md-icon {
-    position: absolute;
-    top: 5px;
-    left: 2px;
-    + input {
-      margin-left: 28px * 2;
-    }
-  }
-
-  textarea,
-  input[type="text"],
-  input[type="password"],
-  input[type="datetime"],
-  input[type="datetime-local"],
-  input[type="date"],
-  input[type="month"],
-  input[type="time"],
-  input[type="week"],
-  input[type="number"],
-  input[type="email"],
-  input[type="url"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="color"] {
-    // Remove default appearance from all input / textarea.
-    // `appearance` is not supported in IE, but does IE apply any txt input styling?
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  textarea {
-    resize: none;
-    overflow: hidden;
-  }
-
-  textarea.md-input {
-    min-height: 2 * $input-line-height + $input-border-width-focused + $input-padding-top;
-    -ms-flex-preferred-size: auto; // IE10
-  }
-
-  label:not(.md-no-float),
-  .md-placeholder:not(.md-select-label) {
-    order: 1;
-    pointer-events: none;
-    -webkit-font-smoothing: antialiased;
-    padding-left: $input-container-padding;
-    z-index: 1;
-    transform: translate3d(0, $input-label-default-offset, 0) scale($input-label-default-scale);
-    transform-origin: left top;
-    transition: transform $swift-ease-out-timing-function 0.25s;
-  }
-
-  .md-placeholder:not(.md-select-label) {
-    position: absolute;
-    top: 0;
-    opacity: 0;
-    transition-property: opacity, transform;
-    transform: translate3d(0, $input-placeholder-offset + $baseline-grid * 0.75, 0);
-  }
-  &.md-input-focused .md-placeholder {
-    opacity: 1;
-    transform: translate3d(0, $input-placeholder-offset, 0);
-  }
-  // Placeholder should immediately disappear when the user starts typing
-  &.md-input-has-value .md-placeholder {
-    transition: none;
-    opacity: 0;
-  }
-
-  &:not( .md-input-has-value ) input:not( :focus ) {
-    color: transparent;
-  }
-
-
-  /*
-   * The .md-input class is added to the input/textarea
-   */
-  .md-input {
-    flex: 1 1 auto;
-    order: 2;
-    display: block;
-
-    background: none;
-    padding: $input-padding-top 2px $input-border-width-focused - $input-border-width-default;
-    border-width: 0 0 $input-border-width-default 0;
-    line-height: $input-line-height;
-    -ms-flex-preferred-size: $input-line-height; // IE10
-    border-radius: 0;
-
-    &:focus {
-      outline: none;
-    }
-    &:invalid {
-      outline: none;
-      box-shadow: none;
-    }
-  }
-
-  .md-char-counter {
-    -webkit-font-smoothing: antialiased;
-    position: absolute;
-    font-size: $input-error-font-size;
-    line-height: $input-error-height;
-    bottom: $input-container-padding;
-    right: $input-container-padding;
-
-    // TODO(jelbourn): animations here.
-  }
-
-  &.md-input-focused,
-  &.md-input-has-value {
-    label:not(.md-no-float) {
-      transform: translate3d(0,$input-label-float-offset,0) scale($input-label-float-scale);
-    }
-  }
-
-  // Use wide border in error state or in focused state
-  &.md-input-focused .md-input {
-    padding-bottom: 0; // Increase border width by 1px, decrease padding by 1
-    border-width: 0 0 $input-border-width-focused 0;
-  }
-
-  .md-input {
-    &[disabled],
-    [disabled] & {
-      background-position: 0 bottom;
-      // This background-size is coordinated with a linear-gradient set in input-theme.scss
-      // to create a dotted line under the input.
-      background-size: 3px 1px;
-      background-repeat: repeat-x;
-    }
-  }
-}
-
-
-// THEME
-
-md-input-container {
-  .md-input {
-    @include input-placeholder-color(md-color($md-foreground, hint-text));
-    color: md-color($md-foreground, text);
-    border-color: md-color($md-foreground, divider);
-    // text-shadow: md-color($md-foreground, shadow); // what is this?
-  }
-
-  > md-icon {
-    color: md-color($md-foreground, text);
-  }
-
-  label,
-  .md-placeholder {
-    // text-shadow: md-color($md-foreground, shadow); // what is this?
-    color: md-color($md-foreground, hint-text);
-  }
-
-  div[ng-messages] {
-    color: md-color($md-warn, 500)
-  }
-
-
-  &:not(.md-input-invalid) {
-    &.md-input-has-value {
-      label {
-        color: md-color($md-foreground, secondary-text);
-      }
-    }
-    &.md-input-focused {
-      .md-input {
-        border-color: md-color($md-primary, 500);
-      }
-      label {
-        color: md-color($md-primary, 500);
-      }
-      md-icon {
-        color: md-color($md-primary, 500);
-      }
-      &.md-accent {
-        .md-input {
-          border-color: md-color($md-accent, 500);
-        }
-        label {
-          color: md-color($md-accent, 500);
-        }
-      }
-      &.md-warn {
-        .md-input {
-          border-color: md-color($md-warn, 500);
-        }
-        label {
-          color: md-color($md-warn, 500);
-        }
-      }
-    }
-  }
-  &.md-input-invalid {
-    .md-input {
-      border-color: md-color($md-warn, 500);
-    }
-    label {
-      color: md-color($md-warn, 500);
-    }
-    .md-char-counter {
-      color: md-color($md-warn, 500);
-    }
-  }
-  .md-input {
-    &[disabled],
-    [disabled] & {
-      border-bottom-color: transparent;
-      color: md-color($md-foreground, disabled-text);
-      background-image: linear-gradient(to right, md-color($md-foreground, divider) 0%, md-color($md-foreground, divider) 33%, transparent 0%);
-      background-image: -ms-linear-gradient(left, transparent 0%, md-color($md-foreground, divider) 100%);
-    }
-  }
-}
diff --git a/modules/angular2_material/src/components/input/input.ts b/modules/angular2_material/src/components/input/input.ts
deleted file mode 100644
index 9e33c8a2a51e..000000000000
--- a/modules/angular2_material/src/components/input/input.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import {Directive, onAllChangesDone, Attribute, Parent} from 'angular2/angular2';
-
-import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
-
-// TODO(jelbourn): validation (will depend on Forms API).
-// TODO(jelbourn): textarea resizing
-// TODO(jelbourn): max-length counter
-// TODO(jelbourn): placeholder property
-
-@Directive({
-  selector: 'md-input-container',
-  lifecycle: [onAllChangesDone],
-  host:
-      {'[class.md-input-has-value]': 'inputHasValue', '[class.md-input-focused]': 'inputHasFocus'}
-})
-export class MdInputContainer {
-  // The MdInput or MdTextarea inside of this container.
-  _input: MdInput;
-
-  // Whether the input inside of this container has a non-empty value.
-  inputHasValue: boolean;
-
-  // Whether the input inside of this container has focus.
-  inputHasFocus: boolean;
-
-  constructor(@Attribute('id') id: string) {
-    this._input = null;
-    this.inputHasValue = false;
-    this.inputHasFocus = false;
-  }
-
-  onAllChangesDone() {
-    // Enforce that this directive actually contains a text input.
-    if (this._input == null) {
-      throw 'No <input> or <textarea> found inside of <md-input-container>';
-    }
-  }
-
-  /** Registers the child MdInput or MdTextarea. */
-  registerInput(input) {
-    if (this._input != null) {
-      throw 'Only one text input is allowed per <md-input-container>.';
-    }
-
-    this._input = input;
-    this.inputHasValue = input.value != '';
-
-    // Listen to input changes and focus events so that we can apply the appropriate CSS
-    // classes based on the input state.
-    ObservableWrapper.subscribe(input.mdChange, value => { this.inputHasValue = value != ''; });
-
-    ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {this.inputHasFocus = hasFocus});
-  }
-}
-
-
-@Directive({
-  selector: 'md-input-container input',
-  events: ['mdChange', 'mdFocusChange'],
-  host: {
-    '[class.md-input]': 'yes',
-    '(input)': 'updateValue($event)',
-    '(focus)': 'setHasFocus(true)',
-    '(blur)': 'setHasFocus(false)'
-  }
-})
-export class MdInput {
-  value: string;
-  yes: boolean;
-
-  // Events emitted by this directive. We use these special 'md-' events to communicate
-  // to the parent MdInputContainer.
-  mdChange: EventEmitter;
-  mdFocusChange: EventEmitter;
-
-  constructor(@Attribute('value') value: string, @Parent() container: MdInputContainer,
-              @Attribute('id') id: string) {
-    // TODO(jelbourn): Remove this when #1402 is done.
-    this.yes = true;
-
-    this.value = value == null ? '' : value;
-    this.mdChange = new EventEmitter();
-    this.mdFocusChange = new EventEmitter();
-
-    container.registerInput(this);
-  }
-
-  updateValue(event) {
-    this.value = event.target.value;
-    ObservableWrapper.callNext(this.mdChange, this.value);
-  }
-
-  setHasFocus(hasFocus: boolean) {
-    ObservableWrapper.callNext(this.mdFocusChange, hasFocus);
-  }
-}
-
-/*
-@Directive({
-  selector: 'md-input-container textarea',
-  events: ['mdChange', 'mdFocusChange'],
-  hostProperties: {
-    'yes': 'class.md-input'
-  },
-  hostListeners: {
-    'input': 'updateValue($event)',
-    'focus': 'setHasFocus(true)',
-    'blur': 'setHasFocus(false)'
-  }
-})
-export class MdTextarea extends MdInput {
-  constructor(
-      @Attribute('value') value: string,
-      @Parent() container: MdInputContainer,
-      @Attribute('id') id: string) {
-    super(value, container, id);
-  }
-}
-*/
diff --git a/modules/angular2_material/src/components/progress-circular/progress_circular.html b/modules/angular2_material/src/components/progress-circular/progress_circular.html
deleted file mode 100644
index 162cb601e68f..000000000000
--- a/modules/angular2_material/src/components/progress-circular/progress_circular.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="md-spinner-wrapper">
-  <div class="md-inner">
-    <div class="md-gap"></div>
-    <div class="md-left">
-      <div class="md-half-circle"></div>
-    </div>
-    <div class="md-right">
-      <div class="md-half-circle"></div>
-    </div>
-  </div>
-</div>
diff --git a/modules/angular2_material/src/components/progress-circular/progress_circular.ts b/modules/angular2_material/src/components/progress-circular/progress_circular.ts
deleted file mode 100644
index 8a5177fcf7a9..000000000000
--- a/modules/angular2_material/src/components/progress-circular/progress_circular.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {Component, View} from 'angular2/angular2';
-
-@Component({selector: 'md-progress-circular'})
-@View({templateUrl: 'angular2_material/src/components/progress-circular/progress_circular.html'})
-export class MdProgressCircular {
-  constructor() {}
-}
diff --git a/modules/angular2_material/src/components/progress-linear/progress_linear.html b/modules/angular2_material/src/components/progress-linear/progress_linear.html
deleted file mode 100644
index e5034ef7973c..000000000000
--- a/modules/angular2_material/src/components/progress-linear/progress_linear.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<style>@import "angular2_material/src/components/progress-linear/progress_linear.css";</style>
-
-<div class="md-progress-linear-container md-ready">
-  <div class="md-progress-linear-dashed"></div>
-  <div class="md-progress-linear-bar md-progress-linear-bar1"
-      [style.transform]="secondaryBarTransform"></div>
-  <div class="md-progress-linear-bar md-progress-linear-bar2"
-      [style.transform]="primaryBarTransform"></div>
-</div>
diff --git a/modules/angular2_material/src/components/progress-linear/progress_linear.scss b/modules/angular2_material/src/components/progress-linear/progress_linear.scss
deleted file mode 100644
index b332181d3858..000000000000
--- a/modules/angular2_material/src/components/progress-linear/progress_linear.scss
+++ /dev/null
@@ -1,266 +0,0 @@
-@import "../../core/style/variables";
-
-// TODO(jelbourn): This goes away.
-@import "../../core/style/default-theme";
-
-$progress-linear-bar-height: 5px !default;
-
-md-progress-linear {
-  display: block;
-  width: 100%;
-  height: $progress-linear-bar-height;
-
-  *, *:before {
-    box-sizing: border-box;
-  }
-
-  .md-progress-linear-container {
-    overflow: hidden;
-    position: relative;
-    height: $progress-linear-bar-height;
-    top: $progress-linear-bar-height;
-    transform: translate(0, 5px) scale(1, 0);
-    transition: all .3s linear;
-  }
-
-  .md-progress-linear-container.md-ready {
-    transform: translate(0, 0) scale(1, 1);
-  }
-
-  .md-progress-linear-bar {
-    height: $progress-linear-bar-height;
-    position: absolute;
-    width: 100%;
-  }
-
-  .md-progress-linear-bar1, .md-progress-linear-bar2 {
-    transition: all 0.2s linear;
-  }
-
-  &[md-mode="determinate"] {
-    .md-progress-linear-bar1 {
-      display: none;
-    }
-  }
-
-  &[md-mode="indeterminate"] {
-    .md-progress-linear-bar1 {
-      animation: indeterminate1 4s infinite linear;
-    }
-
-    .md-progress-linear-bar2 {
-      animation: indeterminate2 4s infinite linear;
-    }
-  }
-
-  &[md-mode="buffer"] {
-    .md-progress-linear-container {
-      background-color: transparent !important;
-    }
-
-    .md-progress-linear-dashed:before {
-      content: "";
-      display: block;
-      height: $progress-linear-bar-height;
-      width: 100%;
-      margin-top: 0px;
-      position: absolute;
-      background-color: transparent;
-      background-size: 10px 10px !important;
-      background-position: 0px -23px;
-      animation: buffer 3s infinite linear;
-    }
-  }
-
-  &[md-mode="query"] {
-    .md-progress-linear-bar2 {
-      animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
-    }
-  }
-}
-
-@keyframes indeterminate1 {
-  0% {
-    transform: translateX(-25%) scale(.5, 1);
-  }
-  10% {
-    transform: translateX(25%) scale(.5, 1);
-  }
-  19.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  20% {
-    transform: translateX(-37.5%) scale(.25, 1);
-  }
-  30% {
-    transform: translateX(37.5%) scale(.25, 1);
-  }
-  34.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  36.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  37% {
-    transform: translateX(-37.5%) scale(.25, 1);
-  }
-  47% {
-    transform: translateX(20%) scale(.25, 1);
-  }
-  52% {
-    transform: translateX(35%) scale(.05, 1);
-  }
-  55% {
-    transform: translateX(35%) scale(.1, 1);
-  }
-  58% {
-    transform: translateX(50%) scale(.1, 1);
-  }
-  61.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  69.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  70% {
-    transform: translateX(-37.5%) scale(.25, 1);
-  }
-  80% {
-    transform: translateX(20%) scale(.25, 1);
-  }
-  85% {
-    transform: translateX(35%) scale(.05, 1);
-  }
-  88% {
-    transform: translateX(35%) scale(.1, 1);
-  }
-  91% {
-    transform: translateX(50%) scale(.1, 1);
-  }
-  92.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  93% {
-    transform: translateX(-50%) scale(0, 1);
-  }
-  100% {
-    transform: translateX(-25%) scale(.5, 1);
-  }
-}
-
-@keyframes indeterminate2 {
-  0% {
-    transform: translateX(-50%) scale(0, 1);
-  }
-  25.99%{
-    transform: translateX(-50%) scale(0, 1);
-  }
-  28% {
-    transform: translateX(-37.5%) scale(.25, 1);
-  }
-  38% {
-    transform: translateX(37.5%) scale(.25, 1);
-  }
-  42.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  46.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  49.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  50% {
-    transform: translateX(-50%) scale(0, 1);
-  }
-  60% {
-    transform: translateX(-25%) scale(.5, 1);
-  }
-  70% {
-    transform: translateX(25%) scale(.5, 1);
-  }
-  79.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-}
-
-@keyframes query {
-  0% {
-    opacity: 1;
-    transform: translateX(35%) scale(.3, 1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0, 1);
-  }
-}
-
-@keyframes buffer {
-  0% {
-    opacity: 1;
-    background-position: 0px -23px;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-    background-position: -200px -23px;
-  }
-}
-
-
-// THEME
-
-md-progress-linear {
-  .md-progress-linear-container {
-    background-color: md-color($md-primary, 100);
-  }
-
-  .md-progress-linear-bar {
-    background-color: md-color($md-primary);
-  }
-
-  &.md-warn .md-progress-linear-container {
-    background-color: md-color($md-warn, 100);
-  }
-
-  &.md-warn .md-progress-linear-bar {
-    background-color: md-color($md-warn);
-  }
-
-  &.md-accent .md-progress-linear-container {
-    background-color: md-color($md-accent, 100);
-  }
-
-  &.md-accent .md-progress-linear-bar {
-    background-color: md-color($md-accent);
-  }
-
-  &[md-mode=buffer] {
-    &.md-primary {
-      .md-progress-linear-bar1 {
-        background-color: md-color($md-primary, 100);
-      }
-      .md-progress-linear-dashed:before {
-        background: radial-gradient(md-color($md-primary, 100) 0%, md-color($md-primary, 100) 16%, transparent 42%);
-      }
-    }
-    &.md-warn {
-      .md-progress-linear-bar1 {
-        background-color: md-color($md-warn, 100);
-      }
-      .md-progress-linear-dashed:before {
-        background: radial-gradient(md-color($md-warn, 100) 0%, md-color($md-warn, 100) 16%, transparent 42%);
-      }
-    }
-    &.md-accent {
-      .md-progress-linear-bar1 {
-        background-color: md-color($md-accent, 100);
-      }
-      .md-progress-linear-dashed:before {
-        background: radial-gradient(md-color($md-accent, 100) 0%, md-color($md-accent, 100) 16%, transparent 42%);
-      }
-    }
-  }
-}
diff --git a/modules/angular2_material/src/components/progress-linear/progress_linear.ts b/modules/angular2_material/src/components/progress-linear/progress_linear.ts
deleted file mode 100644
index 8b7589387277..000000000000
--- a/modules/angular2_material/src/components/progress-linear/progress_linear.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {Component, onChange, View, Attribute} from 'angular2/angular2';
-
-import {isPresent, isBlank} from 'angular2/src/facade/lang';
-import {Math} from 'angular2/src/facade/math';
-
-@Component({
-  selector: 'md-progress-linear',
-  lifecycle: [onChange],
-  properties: ['value', 'bufferValue'],
-  host: {
-    '[attr.role]': '"progressbar"',
-    '[attr.aria-valuemin]': '"0"',
-    '[attr.aria-valuemax]': '"100"',
-    '[attr.aria-valuenow]': 'value'
-  }
-})
-@View({
-  templateUrl: 'angular2_material/src/components/progress-linear/progress_linear.html',
-  directives: []
-})
-export class MdProgressLinear {
-  /** Value for the primary bar. */
-  value_: number;
-
-  /** Value for the secondary bar. */
-  bufferValue: number;
-
-  /** The render mode for the progress bar. */
-  mode: string;
-
-  /** CSS `transform` property applied to the primary bar. */
-  primaryBarTransform: string;
-
-  /** CSS `transform` property applied to the secondary bar. */
-  secondaryBarTransform: string;
-
-  constructor(@Attribute('md-mode') mode: string) {
-    this.primaryBarTransform = '';
-    this.secondaryBarTransform = '';
-
-    this.mode = isPresent(mode) ? mode : Mode.DETERMINATE;
-  }
-
-  get value() {
-    return this.value_;
-  }
-
-  set value(v) {
-    if (isPresent(v)) {
-      this.value_ = MdProgressLinear.clamp(v);
-    }
-  }
-
-  onChange(_) {
-    // If the mode does not use a value, or if there is no value, do nothing.
-    if (this.mode == Mode['QUERY'] || this.mode == Mode['INDETERMINATE'] || isBlank(this.value)) {
-      return;
-    }
-
-    this.primaryBarTransform = this.transformForValue(this.value);
-
-    // The bufferValue is only used in buffer mode.
-    if (this.mode == Mode['BUFFER']) {
-      this.secondaryBarTransform = this.transformForValue(this.bufferValue);
-    }
-  }
-
-  /** Gets the CSS `transform` property for a progress bar based on the given value (0 - 100). */
-  transformForValue(value) {
-    // TODO(jelbourn): test perf gain of caching these, since there are only 101 values.
-    var scale = value / 100;
-    var translateX = (value - 100) / 2;
-    return `translateX(${translateX}%) scale(${scale}, 1)`;
-  }
-
-  /** Clamps a value to be between 0 and 100. */
-  static clamp(v) {
-    return Math.max(0, Math.min(100, v));
-  }
-}
-
-/** @enum {string} Progress-linear modes. */
-var Mode = {
-  'DETERMINATE': 'determinate',
-  'INDETERMINATE': 'indeterminate',
-  'BUFFER': 'buffer',
-  'QUERY': 'query'
-};
diff --git a/modules/angular2_material/src/components/radio/radio-button.scss b/modules/angular2_material/src/components/radio/radio-button.scss
deleted file mode 100644
index c9700c28d054..000000000000
--- a/modules/angular2_material/src/components/radio/radio-button.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-@import "../../core/style/variables";
-@import "../../core/style/shadows";
-
-// TODO(jelbourn): This goes away.
-@import "../../core/style/default-theme";
-
-$radio-width: 16px !default;
-$radio-height: $radio-width !default;
-
-md-radio-button {
-  display: block;
-  margin: 15px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-md-radio-group {
-  border: 1px dotted transparent;
-  display: inline-block;
-  outline: none;
-}
-
-.md-radio-container {
-  box-sizing: border-box;
-  position: relative;
-  top: 4px;
-  display: inline-block;
-  width: $radio-width;
-  height: $radio-width;
-  cursor: pointer;
-}
-
-.md-radio-off {
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: $radio-width;
-  height: $radio-width;
-  border: solid 2px;
-  border-radius: 50%;
-  transition: border-color ease 0.28s;
-}
-
-.md-radio-on {
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: $radio-width;
-  height: $radio-width;
-  border-radius: 50%;
-  transition: transform ease 0.28s;
-  transform: scale(0);
-
-  .md-radio-checked & {
-    transform: scale(0.55);
-  }
-}
-
-// This is the style applied to the content (included via <content>). If we could rely on shadow
-// DOM always being present, this would use the ::content psuedo-class.
-.md-radio-label {
-  position: relative;
-  display: inline-block;
-  margin-left: 10px;
-  margin-right: 10px;
-  vertical-align: middle;
-  white-space: normal;
-  //  pointer-events: none;  ???
-  width: auto;
-}
-
-.md-radio-root {
-  display: block;
-  cursor: pointer;
-}
-
-
-// THEME
-
-.md-radio-off {
-  border-color: md-color($md-foreground, icon);
-}
-
-.md-radio-on {
-  background-color: md-color($md-accent, 0.87);
-}
-
-.md-radio-checked .md-radio-off {
-  border-color: md-color($md-accent, 0.87);
-}
-
-// TODO
-.md-radio-checked .md-ink-ripple { }
-.md-radio-container .md-ripple { }
-p
-
-md-radio-group:not([disabled]) md-radio:not([disabled]) {
-
-  &.md-primary {
-    .md-radio-on {
-      background-color: md-color($md-primary, 0.87);
-    }
-
-    &.md-radio-checked .md-radio-off {
-      border-color: md-color($md-primary, 0.87);
-    }
-
-    &.md-radio-checked .md-ink-ripple {
-      color: md-color($md-primary, 0.87);
-    }
-
-    .md-radio-container .md-ripple {
-      color: md-color($md-primary, 600);
-    }
-  }
-
-  &.md-warn {
-    .md-radio-on {
-      background-color: md-color($md-warn, 0.87);
-    }
-    &.md-radio-checked .md-radio-off {
-      border-color: md-color($md-warn, 0.87);
-    }
-    &.md-radio-checked .md-ink-ripple {
-      color: md-color($md-warn, 0.87);
-    }
-    .md-radio-container .md-ripple {
-      color: md-color($md-warn, 600);
-    }
-  }
-}
-
-md-radio-button[disabled],
-md-radio-group[disabled] md-radio-button {
-  .md-radio-container .md-radio-off,
-  .md-radio-container .md-radio-on {
-    border-color: md-color($md-foreground, disabled);
-  }
-}
diff --git a/modules/angular2_material/src/components/radio/radio-group.scss b/modules/angular2_material/src/components/radio/radio-group.scss
deleted file mode 100644
index 9740f0f07098..000000000000
--- a/modules/angular2_material/src/components/radio/radio-group.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-md-radio-group {
-  border: 1px dotted transparent;
-  display: block;
-  outline: none;
-}
diff --git a/modules/angular2_material/src/components/radio/radio_button.html b/modules/angular2_material/src/components/radio/radio_button.html
deleted file mode 100644
index f1f4ec488bfd..000000000000
--- a/modules/angular2_material/src/components/radio/radio_button.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<style>@import "angular2_material/src/components/radio/radio-button.css";</style>
-
-<!-- TODO(jelbourn): render the radio on either side of the content -->
-
-<label role="radio" class="md-radio-root"
-    [class.md-radio-checked]="checked"
-    (^click)="select($event)">
-  <!-- The actual `radio` part of the control. -->
-  <div class="md-radio-container">
-    <div class="md-radio-off"></div>
-    <div class="md-radio-on"></div>
-  </div>
-
-  <!-- The label for radio control. -->
-  <div class="md-radio-label">
-      <content></content>
-  </div>
-</label>
diff --git a/modules/angular2_material/src/components/radio/radio_button.ts b/modules/angular2_material/src/components/radio/radio_button.ts
deleted file mode 100644
index cc7646269d67..000000000000
--- a/modules/angular2_material/src/components/radio/radio_button.ts
+++ /dev/null
@@ -1,303 +0,0 @@
-import {Component, View, onChange, Parent, Ancestor, Attribute, Optional} from 'angular2/angular2';
-
-import {isPresent, StringWrapper, NumberWrapper} from 'angular2/src/facade/lang';
-import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
-import {ListWrapper} from 'angular2/src/facade/collection';
-import {Event, KeyboardEvent} from 'angular2/src/facade/browser';
-
-import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher';
-import {KEY_UP, KEY_DOWN, KEY_SPACE} from 'angular2_material/src/core/constants';
-
-// TODO(jelbourn): Behaviors to test
-// Disabled radio don't select
-// Disabled radios don't propagate click event
-// Radios are disabled by parent group
-// Radios set default tab index iff not in parent group
-// Radios are unique-select
-// Radio updates parent group's value
-// Change to parent group's value updates the selected child radio
-// Radio name is pulled on parent group
-// Radio group changes on arrow keys
-// Radio group skips disabled radios on arrow keys
-
-var _uniqueIdCounter: number = 0;
-
-@Component({
-  selector: 'md-radio-group',
-  lifecycle: [onChange],
-  events: ['change'],
-  properties: ['disabled', 'value'],
-  host: {
-    // TODO(jelbourn): Remove ^ when event retargeting is fixed.
-    '(^keydown)': 'onKeydown($event)',
-    '[tabindex]': 'tabindex',
-    '[attr.role]': '"radiogroup"',
-    '[attr.aria-disabled]': 'disabled',
-    '[attr.aria-activedescendant]': 'activedescendant'
-  }
-})
-@View({templateUrl: 'angular2_material/src/components/radio/radio_group.html'})
-export class MdRadioGroup {
-  /** The selected value for the radio group. The value comes from the options. */
-  value: any;
-
-  /** The HTML name attribute applied to radio buttons in this group. */
-  name_: string;
-
-  /** Dispatcher for coordinating radio unique-selection by name. */
-  radioDispatcher: MdRadioDispatcher;
-
-  /** List of child radio buttons. */
-  radios_: List<MdRadioButton>;
-
-  activedescendant: any;
-
-  disabled_: boolean;
-
-  /** The ID of the selected radio button. */
-  selectedRadioId: string;
-
-  change: EventEmitter;
-
-  tabindex: number;
-
-  constructor(@Attribute('tabindex') tabindex: string, @Attribute('disabled') disabled: string,
-              radioDispatcher: MdRadioDispatcher) {
-    this.name_ = `md-radio-group-${_uniqueIdCounter++}`;
-    this.radios_ = [];
-    this.change = new EventEmitter();
-    this.radioDispatcher = radioDispatcher;
-    this.selectedRadioId = '';
-    this.disabled_ = false;
-
-    // The simple presence of the `disabled` attribute dictates disabled state.
-    this.disabled = isPresent(disabled);
-
-    // If the user has not set a tabindex, default to zero (in the normal document flow).
-    this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
-  }
-
-  /** Gets the name of this group, as to be applied in the HTML 'name' attribute. */
-  getName(): string {
-    return this.name_;
-  }
-
-  get disabled() {
-    return this.disabled_;
-  }
-
-  set disabled(value) {
-    this.disabled_ = isPresent(value) && value !== false;
-  }
-
-  /** Change handler invoked when bindings are resolved or when bindings have changed. */
-  onChange(_) {
-    // If the component has a disabled attribute with no value, it will set disabled = ''.
-    this.disabled = isPresent(this.disabled) && this.disabled !== false;
-
-    // If the value of this radio-group has been set or changed, we have to look through the
-    // child radio buttons and select the one that has a corresponding value (if any).
-    if (isPresent(this.value) && this.value != '') {
-      this.radioDispatcher.notify(this.name_);
-      ListWrapper.forEach(this.radios_, (radio) => {
-        if (radio.value == this.value) {
-          radio.checked = true;
-          this.selectedRadioId = radio.id;
-          this.activedescendant = radio.id;
-        }
-      });
-    }
-  }
-
-  /** Update the value of this radio group from a child md-radio being selected. */
-  updateValue(value: any, id: string) {
-    this.value = value;
-    this.selectedRadioId = id;
-    this.activedescendant = id;
-    ObservableWrapper.callNext(this.change, null);
-  }
-
-  /** Registers a child radio button with this group. */
-  register(radio: MdRadioButton) {
-    this.radios_.push(radio);
-  }
-
-  /** Handles up and down arrow key presses to change the selected child radio. */
-  onKeydown(event: KeyboardEvent) {
-    if (this.disabled) {
-      return;
-    }
-
-    switch (event.keyCode) {
-      case KEY_UP:
-        this.stepSelectedRadio(-1);
-        event.preventDefault();
-        break;
-      case KEY_DOWN:
-        this.stepSelectedRadio(1);
-        event.preventDefault();
-        break;
-    }
-  }
-
-  // TODO(jelbourn): Replace this with a findIndex method in the collections facade.
-  getSelectedRadioIndex(): number {
-    for (var i = 0; i < this.radios_.length; i++) {
-      if (this.radios_[i].id == this.selectedRadioId) {
-        return i;
-      }
-    }
-
-    return -1;
-  }
-
-  /** Steps the selected radio based on the given step value (usually either +1 or -1). */
-  stepSelectedRadio(step) {
-    var index = this.getSelectedRadioIndex() + step;
-    if (index < 0 || index >= this.radios_.length) {
-      return;
-    }
-
-    var radio = this.radios_[index];
-
-    // If the next radio is line is disabled, skip it (maintaining direction).
-    if (radio.disabled) {
-      this.stepSelectedRadio(step + (step < 0 ? -1 : 1));
-      return;
-    }
-
-    this.radioDispatcher.notify(this.name_);
-    radio.checked = true;
-    ObservableWrapper.callNext(this.change, null);
-
-    this.value = radio.value;
-    this.selectedRadioId = radio.id;
-    this.activedescendant = radio.id;
-  }
-}
-
-
-@Component({
-  selector: 'md-radio-button',
-  lifecycle: [onChange],
-  properties: ['id', 'name', 'value', 'checked', 'disabled'],
-  host: {
-    '(keydown)': 'onKeydown($event)',
-    '[id]': 'id',
-    '[tabindex]': 'tabindex',
-    '[attr.role]': 'role',
-    '[attr.aria-checked]': 'checked',
-    '[attr.aria-disabled]': 'disabled'
-  }
-})
-@View({templateUrl: 'angular2_material/src/components/radio/radio_button.html', directives: []})
-export class MdRadioButton {
-  /** Whether this radio is checked. */
-  checked: boolean;
-
-  /** Whether the radio is disabled. */
-  disabled_: boolean;
-
-  /** The unique ID for the radio button. */
-  id: string;
-
-  /** Analog to HTML 'name' attribute used to group radios for unique selection. */
-  name: string;
-
-  /** Value assigned to this radio. Used to assign the value to the parent MdRadioGroup. */
-  value: any;
-
-  /** The parent radio group. May or may not be present. */
-  radioGroup: MdRadioGroup;
-
-  /** Dispatcher for coordinating radio unique-selection by name. */
-  radioDispatcher: MdRadioDispatcher;
-
-  tabindex: number;
-
-  role: string;
-
-  constructor(@Optional() @Parent() radioGroup: MdRadioGroup, @Attribute('id') id: string,
-              @Attribute('tabindex') tabindex: string, radioDispatcher: MdRadioDispatcher) {
-    // Assertions. Ideally these should be stripped out by the compiler.
-    // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
-
-    this.radioGroup = radioGroup;
-    this.radioDispatcher = radioDispatcher;
-    this.value = null;
-
-    this.role = 'radio';
-    this.checked = false;
-
-    this.id = isPresent(id) ? id : `md-radio-${_uniqueIdCounter++}`;
-
-    // Whenever a radio button with the same name is checked, uncheck this radio button.
-    radioDispatcher.listen((name) => {
-      if (name == this.name) {
-        this.checked = false;
-      }
-    });
-
-    // When this radio-button is inside of a radio-group, the group determines the name.
-    if (isPresent(radioGroup)) {
-      this.name = radioGroup.getName();
-      this.radioGroup.register(this);
-    }
-
-    // If the user has not set a tabindex, default to zero (in the normal document flow).
-    if (!isPresent(radioGroup)) {
-      this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
-    } else {
-      this.tabindex = -1;
-    }
-  }
-
-  /** Change handler invoked when bindings are resolved or when bindings have changed. */
-  onChange(_) {
-    if (isPresent(this.radioGroup)) {
-      this.name = this.radioGroup.getName();
-    }
-  }
-
-  /** Whether this radio button is disabled, taking the parent group into account. */
-  isDisabled(): boolean {
-    // Here, this.disabled may be true/false as the result of a binding, may be the empty string
-    // if the user just adds a `disabled` attribute with no value, or may be absent completely.
-    // TODO(jelbourn): If someone sets `disabled="disabled"`, will this work in dart?
-    return this.disabled || (isPresent(this.disabled) && StringWrapper.equals(this.disabled, '')) ||
-           (isPresent(this.radioGroup) && this.radioGroup.disabled);
-  }
-
-  get disabled(): any {
-    return this.disabled_;
-  }
-
-  set disabled(value: any) {
-    this.disabled_ = isPresent(value) && value !== false;
-  }
-
-  /** Select this radio button. */
-  select(event: Event) {
-    if (this.isDisabled()) {
-      event.stopPropagation();
-      return;
-    }
-
-    // Notifiy all radio buttons with the same name to un-check.
-    this.radioDispatcher.notify(this.name);
-
-    this.checked = true;
-
-    if (isPresent(this.radioGroup)) {
-      this.radioGroup.updateValue(this.value, this.id);
-    }
-  }
-
-  /** Handles pressing the space key to select this focused radio button. */
-  onKeydown(event: KeyboardEvent) {
-    if (event.keyCode == KEY_SPACE) {
-      event.preventDefault();
-      this.select(event);
-    }
-  }
-}
diff --git a/modules/angular2_material/src/components/radio/radio_dispatcher.ts b/modules/angular2_material/src/components/radio/radio_dispatcher.ts
deleted file mode 100644
index a4b1bf8f8baa..000000000000
--- a/modules/angular2_material/src/components/radio/radio_dispatcher.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-
-/**
- * Class for radio buttons to coordinate unique selection based on name.
- * Indended to be consumed as an Angular service.
- */
-export class MdRadioDispatcher {
-  // TODO(jelbourn): Change this to TypeScript syntax when supported.
-  listeners_: List<Function>;
-
-  constructor() {
-    this.listeners_ = [];
-  }
-
-  /** Notify other nadio buttons that selection for the given name has been set. */
-  notify(name: string) {
-    ListWrapper.forEach(this.listeners_, (f) => f(name));
-  }
-
-  /** Listen for future changes to radio button selection. */
-  listen(listener) {
-    this.listeners_.push(listener);
-  }
-}
diff --git a/modules/angular2_material/src/components/radio/radio_group.html b/modules/angular2_material/src/components/radio/radio_group.html
deleted file mode 100644
index eec67d153830..000000000000
--- a/modules/angular2_material/src/components/radio/radio_group.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<style>@import "angular2_material/src/components/radio/radio-group.css";</style>
-<content></content>
diff --git a/modules/angular2_material/src/components/switcher/switch.html b/modules/angular2_material/src/components/switcher/switch.html
deleted file mode 100644
index a2022b915f75..000000000000
--- a/modules/angular2_material/src/components/switcher/switch.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<style>@import "angular2_material/src/components/switcher/switch.css";</style>
-
-<div (^click)="toggle($event)">
-  <div class="md-switch-container">
-    <div class="md-switch-bar"></div>
-    <div class="md-switch-thumb-container">
-      <div class="md-switch-thumb"></div>
-    </div>
-  </div>
-  <div class="md-switch-label"><content></content></div>
-</div>
diff --git a/modules/angular2_material/src/components/switcher/switch.scss b/modules/angular2_material/src/components/switcher/switch.scss
deleted file mode 100644
index 3fb12f7d7a94..000000000000
--- a/modules/angular2_material/src/components/switcher/switch.scss
+++ /dev/null
@@ -1,172 +0,0 @@
-@import "../../core/style/variables";
-
-// TODO(jelbourn): This goes away.
-@import "../../core/style/default-theme";
-
-$switch-width: 36px !default;
-$switch-height: $baseline-grid * 3 !default;
-$switch-bar-height: 14px !default;
-$switch-thumb-size: 20px !default;
-
-md-switch {
-  display: flex;
-  align-items: center;
-
-  margin: 15px;
-  white-space: nowrap;
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  .md-switch-container {
-    cursor: grab;
-    width: $switch-width;
-    height: $switch-height;
-    position: relative;
-    user-select: none;
-    margin-right: 8px;
-  }
-
-  // If the user moves his mouse off the switch, stil display grabbing cursor
-  &:not([disabled]) {
-    .md-switch-dragging,
-    &.md-switch-dragging .md-switch-container {
-      cursor: grabbing;
-    }
-  }
-
-  .md-switch-label {
-    border: 0 transparent;
-  }
-
-  .md-switch-bar {
-    left: 1px;
-    width: $switch-width - 2px;
-    top: $switch-height / 2 - $switch-bar-height / 2;
-    height: $switch-bar-height;
-    border-radius: 8px;
-    position: absolute;
-  }
-
-  .md-switch-thumb-container {
-    top: $switch-height / 2 - $switch-thumb-size / 2;
-    left: 0;
-    width: $switch-width - $switch-thumb-size;
-    position: absolute;
-    transform: translate3d(0,0,0);
-    z-index: 1;
-  }
-
-  &[aria-checked="true"] .md-switch-thumb-container {
-    transform: translate3d(100%, 0, 0);
-  }
-
-  .md-switch-thumb {
-    position: absolute;
-    margin: 0;
-    left: 0;
-    top: 0;
-    outline: none;
-    height: $switch-thumb-size;
-    width: $switch-thumb-size;
-    border-radius: 50%;
-    box-shadow: $whiteframe-shadow-z1;
-
-    // todo
-    .md-ripple-container {
-      position: absolute;
-      display: block;
-      width: auto;
-      height: auto;
-      left: -$switch-thumb-size;
-      top: -$switch-thumb-size;
-      right: -$switch-thumb-size;
-      bottom: -$switch-thumb-size;
-    }
-  }
-
-  &:not(.md-switch-dragging) {
-    .md-switch-bar,
-    .md-switch-thumb-container,
-    .md-switch-thumb {
-      transition: $swift-ease-in-out;
-      transition-property: transform, background-color;
-    }
-    .md-switch-bar,
-    .md-switch-thumb {
-      transition-delay: 0.05s;
-    }
-  }
-
-}
-
-// TODO(jelbourn): Why are these not defined in terms of the theme?
-@media screen and (-ms-high-contrast: active) {
-  md-switch .md-switch-bar {
-    background-color: #666;
-  }
-  md-switch[aria-checked="true"] .md-switch-bar {
-    background-color: #9E9E9E;
-  }
-  md-switch.md-default-theme .md-switch-thumb {
-    background-color: #fff;
-  }
-}
-
-
-// THEME
-
-md-switch {
-  .md-switch-thumb {
-    background-color: md-color($md-background, 50);
-  }
-  .md-switch-bar {
-    background-color: md-color($md-background, 500);
-  }
-
-  &[aria-checked="true"] {
-    .md-switch-thumb {
-      background-color: md-color($md-accent);
-    }
-    .md-switch-bar {
-      background-color: md-color($md-accent, 0.5);
-    }
-
-    &.md-primary {
-      .md-switch-thumb {
-        background-color: md-color($md-primary);
-      }
-      .md-switch-bar {
-        background-color: md-color($md-primary, 0.5);
-      }
-    }
-
-    &.md-warn {
-      .md-switch-thumb {
-        background-color: md-color($md-warn);
-      }
-      .md-switch-bar {
-        background-color: md-color($md-warn, 0.5);
-      }
-    }
-  }
-
-  &[disabled] {
-    .md-switch-thumb {
-      background-color: md-color($md-background, 400);
-    }
-    .md-switch-bar {
-      background-color: md-color($md-foreground, divider);
-    }
-  }
-
-  &:focus {
-    .md-switch-label:not(:empty) {
-      border: 1px dotted md-color($md-foreground, text);
-    }
-  }
-}
diff --git a/modules/angular2_material/src/components/switcher/switch.ts b/modules/angular2_material/src/components/switcher/switch.ts
deleted file mode 100644
index e190779fad3b..000000000000
--- a/modules/angular2_material/src/components/switcher/switch.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import {Component, View, Attribute} from 'angular2/angular2';
-import {isPresent} from 'angular2/src/facade/lang';
-import {KEY_SPACE} from 'angular2_material/src/core/constants';
-import {KeyboardEvent} from 'angular2/src/facade/browser';
-import {NumberWrapper} from 'angular2/src/facade/lang';
-
-// TODO(jelbourn): without gesture support, this is identical to MdCheckbox.
-
-@Component({
-  selector: 'md-switch',
-  properties: ['checked', 'disabled'],
-  host: {
-    '(keydown)': 'onKeydown($event)',
-    '[attr.aria-checked]': 'checked',
-    '[attr.aria-disabled]': 'disabled_',
-    '[attr.role]': '"checkbox"'
-  }
-})
-@View({templateUrl: 'angular2_material/src/components/switcher/switch.html', directives: []})
-export class MdSwitch {
-  /** Whether this switch is checked. */
-  checked: boolean;
-
-  /** Whether this switch is disabled. */
-  disabled_: boolean;
-
-  tabindex: number;
-
-  constructor(@Attribute('tabindex') tabindex: string) {
-    this.checked = false;
-    this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
-  }
-
-  get disabled() {
-    return this.disabled_;
-  }
-
-  set disabled(value) {
-    this.disabled_ = isPresent(value) && value !== false;
-  }
-
-  onKeydown(event: KeyboardEvent) {
-    if (event.keyCode === KEY_SPACE) {
-      event.preventDefault();
-      this.toggle(event);
-    }
-  }
-
-  toggle(event) {
-    if (this.disabled) {
-      event.stopPropagation();
-      return;
-    }
-
-    this.checked = !this.checked;
-  }
-}
diff --git a/modules/angular2_material/src/core/constants.ts b/modules/angular2_material/src/core/constants.ts
deleted file mode 100644
index 3ae5d3897864..000000000000
--- a/modules/angular2_material/src/core/constants.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// TODO: switch to proper enums when we support them.
-
-// Key codes
-export const KEY_ESC = 27;
-export const KEY_SPACE = 32;
-export const KEY_UP = 38;
-export const KEY_DOWN = 40;
diff --git a/modules/angular2_material/src/core/style/default-theme.scss b/modules/angular2_material/src/core/style/default-theme.scss
deleted file mode 100644
index 72da087ea22b..000000000000
--- a/modules/angular2_material/src/core/style/default-theme.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import 'theme-functions';
-@import 'palette';
-
-
-// Person creating a theme writes variables like this:
-$md-is-dark-theme: false;
-
-
-$md-primary: md-palette($md-indigo, 500, 100, 700, $md-contrast-palettes);
-$md-accent: md-palette($md-red, A200, A100, A400, $md-contrast-palettes);
-$md-background: md-palette($md-grey, 500, 300, 600, $md-contrast-palettes);
-$md-warn: md-palette($md-red, 500, 300, 800, $md-contrast-palettes);
-$md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground);
diff --git a/modules/angular2_material/src/core/style/palette.scss b/modules/angular2_material/src/core/style/palette.scss
deleted file mode 100644
index 2f5bf3e9c66c..000000000000
--- a/modules/angular2_material/src/core/style/palette.scss
+++ /dev/null
@@ -1,666 +0,0 @@
-// Core color palettes.
-$md-red: (
-  50: #ffebee,
-  100: #ffcdd2,
-  200: #ef9a9a,
-  300: #e57373,
-  400: #ef5350,
-  500: #f44336,
-  600: #e53935,
-  700: #d32f2f,
-  800: #c62828,
-  900: #b71c1c,
-  A100: #ff8a80,
-  A200: #ff5252,
-  A400: #ff1744,
-  A700: #d50000,
-);
-
-$md-pink: (
-  50: #fce4ec,
-  100: #f8bbd0,
-  200: #f48fb1,
-  300: #f06292,
-  400: #ec407a,
-  500: #e91e63,
-  600: #d81b60,
-  700: #c2185b,
-  800: #ad1457,
-  900: #880e4f,
-  A100: #ff80ab,
-  A200: #ff4081,
-  A400: #f50057,
-  A700: #c51162,
-);
-
-$md-purple: (
-  50: #f3e5f5,
-  100: #e1bee7,
-  200: #ce93d8,
-  300: #ba68c8,
-  400: #ab47bc,
-  500: #9c27b0,
-  600: #8e24aa,
-  700: #7b1fa2,
-  800: #6a1b9a,
-  900: #4a148c,
-  A100: #ea80fc,
-  A200: #e040fb,
-  A400: #d500f9,
-  A700: #aa00ff,
-);
-
-$md-deep-purple: (
-  50: #ede7f6,
-  100: #d1c4e9,
-  200: #b39ddb,
-  300: #9575cd,
-  400: #7e57c2,
-  500: #673ab7,
-  600: #5e35b1,
-  700: #512da8,
-  800: #4527a0,
-  900: #311b92,
-  A100: #b388ff,
-  A200: #7c4dff,
-  A400: #651fff,
-  A700: #6200ea,
-);
-
-$md-indigo: (
-  50: #e8eaf6,
-  100: #c5cae9,
-  200: #9fa8da,
-  300: #7986cb,
-  400: #5c6bc0,
-  500: #3f51b5,
-  600: #3949ab,
-  700: #303f9f,
-  800: #283593,
-  900: #1a237e,
-  A100: #8c9eff,
-  A200: #536dfe,
-  A400: #3d5afe,
-  A700: #304ffe,
-);
-
-$md-blue: (
-  50: #e3f2fd,
-  100: #bbdefb,
-  200: #90caf9,
-  300: #64b5f6,
-  400: #42a5f5,
-  500: #2196f3,
-  600: #1e88e5,
-  700: #1976d2,
-  800: #1565c0,
-  900: #0d47a1,
-  A100: #82b1ff,
-  A200: #448aff,
-  A400: #2979ff,
-  A700: #2962ff,
-);
-
-$md-light-blue: (
-  50: #e1f5fe,
-  100: #b3e5fc,
-  200: #81d4fa,
-  300: #4fc3f7,
-  400: #29b6f6,
-  500: #03a9f4,
-  600: #039be5,
-  700: #0288d1,
-  800: #0277bd,
-  900: #01579b,
-  A100: #80d8ff,
-  A200: #40c4ff,
-  A400: #00b0ff,
-  A700: #0091ea,
-);
-
-$md-cyan: (
-  50: #e0f7fa,
-  100: #b2ebf2,
-  200: #80deea,
-  300: #4dd0e1,
-  400: #26c6da,
-  500: #00bcd4,
-  600: #00acc1,
-  700: #0097a7,
-  800: #00838f,
-  900: #006064,
-  A100: #84ffff,
-  A200: #18ffff,
-  A400: #00e5ff,
-  A700: #00b8d4,
-);
-
-$md-teal: (
-  50: #e0f2f1,
-  100: #b2dfdb,
-  200: #80cbc4,
-  300: #4db6ac,
-  400: #26a69a,
-  500: #009688,
-  600: #00897b,
-  700: #00796b,
-  800: #00695c,
-  900: #004d40,
-  A100: #a7ffeb,
-  A200: #64ffda,
-  A400: #1de9b6,
-  A700: #00bfa5,
-);
-
-$md-green: (
-  50: #e8f5e9,
-  100: #c8e6c9,
-  200: #a5d6a7,
-  300: #81c784,
-  400: #66bb6a,
-  500: #4caf50,
-  600: #43a047,
-  700: #388e3c,
-  800: #2e7d32,
-  900: #1b5e20,
-  A100: #b9f6ca,
-  A200: #69f0ae,
-  A400: #00e676,
-  A700: #00c853,
-);
-
-$md-light-green: (
-  50: #f1f8e9,
-  100: #dcedc8,
-  200: #c5e1a5,
-  300: #aed581,
-  400: #9ccc65,
-  500: #8bc34a,
-  600: #7cb342,
-  700: #689f38,
-  800: #558b2f,
-  900: #33691e,
-  A100: #ccff90,
-  A200: #b2ff59,
-  A400: #76ff03,
-  A700: #64dd17,
-);
-
-$md-lime: (
-  50: #f9fbe7,
-  100: #f0f4c3,
-  200: #e6ee9c,
-  300: #dce775,
-  400: #d4e157,
-  500: #cddc39,
-  600: #c0ca33,
-  700: #afb42b,
-  800: #9e9d24,
-  900: #827717,
-  A100: #f4ff81,
-  A200: #eeff41,
-  A400: #c6ff00,
-  A700: #aeea00,
-);
-
-$md-yellow: (
-  50: #fffde7,
-  100: #fff9c4,
-  200: #fff59d,
-  300: #fff176,
-  400: #ffee58,
-  500: #ffeb3b,
-  600: #fdd835,
-  700: #fbc02d,
-  800: #f9a825,
-  900: #f57f17,
-  A100: #ffff8d,
-  A200: #ffff00,
-  A400: #ffea00,
-  A700: #ffd600,
-);
-
-$md-amber: (
-  50: #fff8e1,
-  100: #ffecb3,
-  200: #ffe082,
-  300: #ffd54f,
-  400: #ffca28,
-  500: #ffc107,
-  600: #ffb300,
-  700: #ffa000,
-  800: #ff8f00,
-  900: #ff6f00,
-  A100: #ffe57f,
-  A200: #ffd740,
-  A400: #ffc400,
-  A700: #ffab00,
-);
-
-$md-orange: (
-  50: #fff3e0,
-  100: #ffe0b2,
-  200: #ffcc80,
-  300: #ffb74d,
-  400: #ffa726,
-  500: #ff9800,
-  600: #fb8c00,
-  700: #f57c00,
-  800: #ef6c00,
-  900: #e65100,
-  A100: #ffd180,
-  A200: #ffab40,
-  A400: #ff9100,
-  A700: #ff6d00,
-);
-
-$md-deep-orange: (
-  50: #fbe9e7,
-  100: #ffccbc,
-  200: #ffab91,
-  300: #ff8a65,
-  400: #ff7043,
-  500: #ff5722,
-  600: #f4511e,
-  700: #e64a19,
-  800: #d84315,
-  900: #bf360c,
-  A100: #ff9e80,
-  A200: #ff6e40,
-  A400: #ff3d00,
-  A700: #dd2c00,
-);
-
-$md-brown: (
-  50: #efebe9,
-  100: #d7ccc8,
-  200: #bcaaa4,
-  300: #a1887f,
-  400: #8d6e63,
-  500: #795548,
-  600: #6d4c41,
-  700: #5d4037,
-  800: #4e342e,
-  900: #3e2723,
-  A100: #d7ccc8,
-  A200: #bcaaa4,
-  A400: #8d6e63,
-  A700: #5d4037,
-);
-
-$md-grey: (
-  0: #ffffff,
-  50: #fafafa,
-  100: #f5f5f5,
-  200: #eeeeee,
-  300: #e0e0e0,
-  400: #bdbdbd,
-  500: #9e9e9e,
-  600: #757575,
-  700: #616161,
-  800: #424242,
-  900: #212121,
-  1000: #000000,
-  A100: #ffffff,
-  A200: #eeeeee,
-  A400: #bdbdbd,
-  A700: #616161,
-);
-
-$md-blue-grey: (
-  50: #eceff1,
-  100: #cfd8dc,
-  200: #b0bec5,
-  300: #90a4ae,
-  400: #78909c,
-  500: #607d8b,
-  600: #546e7a,
-  700: #455a64,
-  800: #37474f,
-  900: #263238,
-  A100: #cfd8dc,
-  A200: #b0bec5,
-  A400: #78909c,
-  A700: #455a64,
-);
-
-
-$md-light-theme-foreground: (
-  divider: rgba(black, 0.12),
-  dividers: rgba(black, 0.12),
-  disabled: rgba(black, 0.26),
-  disabled-text: rgba(black, 0.26),
-  hint-text: rgba(black, 0.26),
-  secondary-text: rgba(black, 0.54),
-  icon: rgba(black, 0.54),
-  icons: rgba(black, 0.54),
-  text: rgba(black, 0.87)
-);
-
-$md-dark-theme-foreground: (
-  divider: rgba(white, 0.12),
-  dividers: rgba(white, 0.12),
-  disabled: rgba(white, 0.30),
-  disabled-text: rgba(white, 0.30),
-  hint-text: rgba(white, 0.30),
-  secondary-text: rgba(white, 0.70),
-  icon: white,
-  icons: white,
-  text: white
-);
-
-
-// Contrast colors. These are hard-coded because it is too difficult to calculate them.
-// These contrast colors are pulled from the public Material Design spec swatches. While the
-// contrast colors in the spec are not perscriptive, we will use them for convenience.
-$black-87-opacity: rgba(black, 0.870588);
-$white-87-opacity: rgba(white, 0.870588);
-
-$md-contrast-palettes: (
-  $md-red: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: white,
-    A700: white,
-  ),
-  $md-pink: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: white,
-    A700: white,
-  ),
-  $md-purple: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: white,
-    400: white,
-    500: $white-87-opacity,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: white,
-    A700: white,
-  ),
-  $md-deep-purple: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: white,
-    400: white,
-    500: $white-87-opacity,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: $white-87-opacity,
-    A700: $white-87-opacity,
-  ),
-  $md-indigo: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: white,
-    400: white,
-    500: $white-87-opacity,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: white,
-    A700: $white-87-opacity,
-  ),
-  $md-blue: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: white,
-    A700: white,
-  ),
-  $md-light-blue: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: white,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: white,
-  ),
-  $md-cyan: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: white,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-teal: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-green: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-light-green: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $black-87-opacity,
-    700: $black-87-opacity,
-    800: white,
-    900: white,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-lime: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $black-87-opacity,
-    700: $black-87-opacity,
-    800: $black-87-opacity,
-    900: white,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-yellow: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $black-87-opacity,
-    700: $black-87-opacity,
-    800: $black-87-opacity,
-    900: $black-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-amber: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $black-87-opacity,
-    700: $black-87-opacity,
-    800: $black-87-opacity,
-    900: $black-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-orange: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $black-87-opacity,
-    700: $black-87-opacity,
-    800: white,
-    900: white,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: black,
-  ),
-  $md-deep-orange: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: white,
-    900: white,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: white,
-    A700: white,
-  ),
-  $md-brown: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: white,
-    400: white,
-    500: $white-87-opacity,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: white,
-    A700: $white-87-opacity,
-  ),
-  $md-grey: (
-    0: $black-87-opacity,
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    1000: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $white-87-opacity,
-  ),
-  $md-blue-grey: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: white,
-    500: white,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: white,
-    A700: $white-87-opacity,
-  ),
-);
diff --git a/modules/angular2_material/src/core/style/shadows.scss b/modules/angular2_material/src/core/style/shadows.scss
deleted file mode 100644
index 572629e2b260..000000000000
--- a/modules/angular2_material/src/core/style/shadows.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Elements can have an "elevation" from 1 to 5, signified by shadows.
-// See http://google.com/design/spec/what-is-material/objects-in-3d-space.html
-.md-shadow-bottom-z-1 {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-}
-
-.md-shadow-bottom-z-2 {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
-}
diff --git a/modules/angular2_material/src/core/style/theme-functions.scss b/modules/angular2_material/src/core/style/theme-functions.scss
deleted file mode 100644
index f4611bd7ae20..000000000000
--- a/modules/angular2_material/src/core/style/theme-functions.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-// ** Two main functions for users **
-// md-palette: used for defining your theme in terms of Material hues.
-// md-color: apply colors to components from the palette. Consumes the output of md-palette
-
-
-// For a given hue in a palette, return the contrast color from the map of contrast palettes.
-@function md-contrast($color-map, $hue, $contrast-color-map) {
-  @return map-get(map-get($contrast-color-map, $color-map), $hue);
-}
-
-
-// Creates a map of hues to colors for a theme.
-// $color-map
-// $primary
-// $lighter
-// $darker
-@function md-palette($color-map, $primary, $lighter, $darker, $contrast-color-map) {
-  $result: map_merge($color-map, (
-    default: map-get($color-map, $primary),
-    lighter: map-get($color-map, $lighter),
-    darker: map-get($color-map, $darker),
-
-    default-contrast: md-contrast($color-map, $primary, $contrast-color-map),
-    lighter-contrast: md-contrast($color-map, $lighter, $contrast-color-map),
-    darker-contrast: md-contrast($color-map, $darker, $contrast-color-map)
-  ));
-
-  // For each hue in the palette, add a "-contrast" color to the map.
-  @each $hue, $color in $color-map {
-    $result: map_merge($result, (
-      "#{$hue}-contrast": md-contrast($color-map, $hue, $contrast-color-map)
-    ))
-  }
-
-  @return $result;
-}
-
-// Gets a color for a material design component.
-// $color-map: a map of {key: color}.
-// $hue-key: key used to lookup the color in $colorMap. Defaults to 'default'
-//     If $hue-key is a number between 0 and 1, it will be treated as $opacity.
-// $opacity: the opacity to apply to the color.
-@function md-color($color-map, $hue-key: default, $opacity: 1) {
-  // If hueKey is a number between zero and one, then it actually contains an
-  // opacity value, so recall this function with the default hue and that given opacity.
-  @if type-of($hue-key) == number and $hue-key >= 0 and $hue-key <= 1 {
-    @return md-color($color-map, default, $hue-key)
-  }
-
-  $color: map-get($color-map, $hue-key);
-  $opacity: if(opacity($color) < 1, opacity($color), $opacity);
-
-  @return rgba($color, $opacity);
-}
-
-
diff --git a/modules/angular2_material/src/core/style/variables.scss b/modules/angular2_material/src/core/style/variables.scss
deleted file mode 100644
index d6a13addc137..000000000000
--- a/modules/angular2_material/src/core/style/variables.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-// Font
-$font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;
-
-
-// Layout
-$baseline-grid:            8px !default;
-$layout-breakpoint-sm:     600px !default;
-$layout-breakpoint-md:     960px !default;
-$layout-breakpoint-lg:     1200px !default;
-$layout-gutter-width:      ($baseline-grid * 2) !default;
-
-
-// App bar variables
-$app-bar-height: 64px;
-
-
-// Toast
-$toast-height: $baseline-grid * 3 !default;
-$toast-margin: $baseline-grid * 1 !default;
-
-
-// Whiteframes
-$whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0,0,0,0.26) !default;
-$whiteframe-zindex-z1: 1 !default;
-$whiteframe-shadow-z2: 0px 8px 17px rgba(0,0,0,0.2) !default;
-$whiteframe-zindex-z2: 2 !default;
-$whiteframe-shadow-z3: 0px 17px 50px rgba(0,0,0,0.19) !default;
-$whiteframe-zindex-z3: 3 !default;
-$whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0,0,0,0.22) !default;
-$whiteframe-zindex-z4: 4 !default;
-$whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2) !default;
-$whiteframe-zindex-z5: 5 !default;
-
-
-// Z-indexes
-$z-index-tooltip: 100 !default;
-$z-index-dialog: 80 !default;
-$z-index-toast: 90 !default;
-$z-index-bottom-sheet: 70 !default;
-$z-index-sidenav: 60 !default;
-$z-index-backdrop: 50 !default;
-$z-index-fab: 20 !default;
-
-
-// Easing Curves
-$swift-ease-out-duration: 0.4s !default;
-$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
-
-$swift-ease-in-duration: 0.3s !default;
-$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
-$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
-
-$swift-ease-in-out-duration: 0.5s !default;
-$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
-$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
diff --git a/modules/angular2_material/src/core/theme.ts b/modules/angular2_material/src/core/theme.ts
deleted file mode 100644
index 384df91d2ef8..000000000000
--- a/modules/angular2_material/src/core/theme.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {Directive} from 'angular2/angular2';
-
-@Directive({selector: '[md-theme]'})
-export class MdTheme {
-  color: string;
-
-  constructor() {
-    this.color = 'sky-blue'
-  }
-}
diff --git a/modules/benchmarks/BUILD.bazel b/modules/benchmarks/BUILD.bazel
new file mode 100644
index 000000000000..8ef1f366dbeb
--- /dev/null
+++ b/modules/benchmarks/BUILD.bazel
@@ -0,0 +1,8 @@
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "favicon",
+    srcs = [
+        "favicon.ico",
+    ],
+)
diff --git a/modules/benchmarks/README.md b/modules/benchmarks/README.md
new file mode 100644
index 000000000000..266e7a0a5179
--- /dev/null
+++ b/modules/benchmarks/README.md
@@ -0,0 +1,29 @@
+# How to run the benchmarks locally
+
+## Run in the browser
+$ build.sh (only needed 1x to copy over third party resources)
+$ cp -r ./modules/benchmarks ./dist/all/
+$ ./node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w
+$ gulp serve
+$ open http://localhost:8000/all/benchmarks/src/tree/ng2/index.html?bundles=false
+
+## Run e2e tests
+$ export NODE_PATH=$(pwd)/dist/all:$(pwd)/dist/tools
+$ ./node_modules/.bin/protractor protractor-e2e.conf.js --specs=dist/all/benchmarks/e2e_test/tree_spec.js
+
+Options for protractor with `protractor-e2e.conf.js`:
+- `--bundles=true`: use prebuilt bundles
+- `--ng-help`: show all available options
+
+## Run benchmarks tests
+$ export NODE_PATH=$(pwd)/dist/all:$(pwd)/dist/tools
+$ ./node_modules/.bin/protractor protractor-perf.conf.js --specs=dist/all/benchmarks/e2e_test/tree_perf.js
+
+Options for protractor with `protractor-perf.conf.js`:
+- `--bundles=true`: use prebuilt bundles
+- `--ng-help`: show all available options
+
+## Compile *_aot.ts files
+
+These files are compiled as part of the compiler_cli integration tests.
+See `@angular/compile_cli/integrationtest/tsconfig.json`
diff --git a/modules/benchmarks/e2e_test/change_detection_perf.dart b/modules/benchmarks/e2e_test/change_detection_perf.dart
deleted file mode 100644
index 89306a9d5d88..000000000000
--- a/modules/benchmarks/e2e_test/change_detection_perf.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchmarks.e2e_test.change_detection_perf;
-
-main() {
-
-}
diff --git a/modules/benchmarks/e2e_test/change_detection_perf.ts b/modules/benchmarks/e2e_test/change_detection_perf.ts
deleted file mode 100644
index e9e01de873c0..000000000000
--- a/modules/benchmarks/e2e_test/change_detection_perf.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
-
-describe('ng2 change detection benchmark', function() {
-
-  var URL = 'benchmarks/src/change_detection/change_detection_benchmark.html';
-
-  afterEach(verifyNoBrowserErrors);
-
-  it('should log ng stats (dynamic, reads)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#ng2ChangeDetectionDynamicReads'],
-      id: 'ng2.changeDetection.dynamic.reads',
-      params: [
-        {name: 'numberOfChecks', value: 900000},
-        {name: 'iterations', value: 20, scale: 'linear'}
-      ],
-      microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'}
-    }).then(done, done.fail);
-  });
-
-  it('should log ng stats (dynamic, writes)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#ng2ChangeDetectionDynamicWrites'],
-      id: 'ng2.changeDetection.dynamic.writes',
-      params: [
-        {name: 'numberOfChecks', value: 900000},
-        {name: 'iterations', value: 20, scale: 'linear'}
-      ],
-      microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'}
-    }).then(done, done.fail);
-  });
-
-  it('should log ng stats (jit, reads)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#ng2ChangeDetectionJitReads'],
-      id: 'ng2.changeDetection.jit.reads',
-      params: [
-        {name: 'numberOfChecks', value: 900000},
-        {name: 'iterations', value: 20, scale: 'linear'}
-      ],
-      microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'}
-    }).then(done, done.fail);
-  });
-
-  it('should log ng stats (jit, writes)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#ng2ChangeDetectionJitWrites'],
-      id: 'ng2.changeDetection.jit.writes',
-      params: [
-        {name: 'numberOfChecks', value: 900000},
-        {name: 'iterations', value: 20, scale: 'linear'}
-      ],
-      microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'}
-    }).then(done, done.fail);
-  });
-
-  it('should log baseline stats (create)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#baselineChangeDetectionReads'],
-      id: 'baseline.changeDetection.reads',
-      params: [
-        {name: 'numberOfChecks', value: 900000},
-        {name: 'iterations', value: 20, scale: 'linear'}
-      ],
-      microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'}
-    }).then(done, done.fail);
-  });
-
-  it('should log baseline stats (update)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#baselineChangeDetectionWrites'],
-      id: 'baseline.changeDetection.writes',
-      params: [
-        {name: 'numberOfChecks', value: 900000},
-        {name: 'iterations', value: 20, scale: 'linear'}
-      ],
-      microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'}
-    }).then(done, done.fail);
-  });
-
-});
diff --git a/modules/benchmarks/e2e_test/compiler_perf.dart b/modules/benchmarks/e2e_test/compiler_perf.dart
deleted file mode 100644
index 73c9ef9d568e..000000000000
--- a/modules/benchmarks/e2e_test/compiler_perf.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchmarks.e2e_test.compiler_perf;
-
-main() {
-
-}
diff --git a/modules/benchmarks/e2e_test/compiler_perf.ts b/modules/benchmarks/e2e_test/compiler_perf.ts
deleted file mode 100644
index 61e642f72056..000000000000
--- a/modules/benchmarks/e2e_test/compiler_perf.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import {runBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
-
-describe('ng2 compiler benchmark', function() {
-
-  var URL = 'benchmarks/src/compiler/compiler_benchmark.html';
-
-  afterEach(verifyNoBrowserErrors);
-
-  it('should log withBindings stats', function(done) {
-    runBenchmark({
-      url: URL,
-      id: 'ng2.compile.withBindings',
-      params: [{name: 'elements', value: 150, scale: 'linear'}],
-      work: function() {
-        browser.executeScript('document.querySelector("#compileWithBindings").click()');
-        browser.sleep(500);
-      }
-    }).then(done, done.fail);
-  });
-
-  it('should log noBindings stats', function(done) {
-    runBenchmark({
-      url: URL,
-      id: 'ng2.compile.noBindings',
-      params: [{name: 'elements', value: 150, scale: 'linear'}],
-      work: function() {
-        browser.executeScript('document.querySelector("#compileNoBindings").click()');
-        browser.sleep(500);
-      }
-    }).then(done, done.fail);
-  });
-
-});
diff --git a/modules/benchmarks/e2e_test/costs_perf.dart b/modules/benchmarks/e2e_test/costs_perf.dart
deleted file mode 100644
index 80a3168ba682..000000000000
--- a/modules/benchmarks/e2e_test/costs_perf.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchmarks.e2e_test.costs_perf;
-
-main() {
-
-}
diff --git a/modules/benchmarks/e2e_test/costs_perf.ts b/modules/benchmarks/e2e_test/costs_perf.ts
deleted file mode 100644
index 649b6be9e47e..000000000000
--- a/modules/benchmarks/e2e_test/costs_perf.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
-
-describe('ng2 cost benchmark', function() {
-
-  var URL = 'benchmarks/src/costs/index.html';
-
-  // Number of components to create in a single iteration
-  var benchmarkSize = 200;
-
-  afterEach(verifyNoBrowserErrors);
-
-  it('should log stats for baseline (plain components)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#reset', '#createPlainComponents'],
-      id: 'ng2.costs.baseline',
-      params: [{name: 'size', value: benchmarkSize, scale: 'linear'}]
-    }).then(done, done.fail);
-  });
-
-  it('should log stats for components with decorators', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#reset', '#createComponentsWithDirectives'],
-      id: 'ng2.costs.decorators',
-      params: [{name: 'size', value: benchmarkSize, scale: 'linear'}]
-    }).then(done, done.fail);
-  });
-
-  it('should log stats for dynamic components', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#reset', '#createDynamicComponents'],
-      id: 'ng2.costs.dynamic',
-      params: [{name: 'size', value: benchmarkSize, scale: 'linear'}]
-    }).then(done, done.fail);
-  });
-});
diff --git a/modules/benchmarks/e2e_test/di_perf.dart b/modules/benchmarks/e2e_test/di_perf.dart
deleted file mode 100644
index 5471f6826411..000000000000
--- a/modules/benchmarks/e2e_test/di_perf.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchmarks.e2e_test.di_perf;
-
-main() {
-
-}
diff --git a/modules/benchmarks/e2e_test/element_injector_perf.dart b/modules/benchmarks/e2e_test/element_injector_perf.dart
deleted file mode 100644
index 895693f60945..000000000000
--- a/modules/benchmarks/e2e_test/element_injector_perf.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchmarks.e2e_test.element_injector_perf;
-
-main() {
-
-}
diff --git a/modules/benchmarks/e2e_test/element_injector_perf.ts b/modules/benchmarks/e2e_test/element_injector_perf.ts
deleted file mode 100644
index a82fb283492e..000000000000
--- a/modules/benchmarks/e2e_test/element_injector_perf.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
-
-describe('ng2 element injector benchmark', function() {
-
-  var URL = 'benchmarks/src/element_injector/element_injector_benchmark.html';
-
-  afterEach(verifyNoBrowserErrors);
-
-  it('should log the stats for instantiate', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#instantiate'],
-      id: 'ng2.elementInjector.instantiate',
-      params: [{name: 'iterations', value: 20000, scale: 'linear'}],
-      microMetrics: {'instantiateAvg': 'avg time for injection (in ms)'}
-    }).then(done, done.fail);
-  });
-
-  it('should log the stats for hydrate', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#hydrate'],
-      id: 'ng2.elementInjector.hydrate',
-      params: [{name: 'iterations', value: 20000, scale: 'linear'}],
-      microMetrics: {'instantiateAvg': 'avg time for injection (in ms)'}
-    }).then(done, done.fail);
-  });
-
-});
diff --git a/modules/benchmarks/e2e_test/largeform_perf.ts b/modules/benchmarks/e2e_test/largeform_perf.ts
new file mode 100644
index 000000000000..42165a035825
--- /dev/null
+++ b/modules/benchmarks/e2e_test/largeform_perf.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 {runBenchmark, verifyNoBrowserErrors} from 'e2e_util/perf_util';
+import {$} from 'protractor';
+
+interface Worker {
+  id: string;
+  prepare?(): void;
+  work(): void;
+}
+
+const CreateAndDestroyWorker: Worker = {
+  id: 'createDestroy',
+  work: () => {
+    $('#createDom').click();
+    $('#destroyDom').click();
+  }
+};
+
+describe('largeform benchmark perf', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  [CreateAndDestroyWorker].forEach((worker) => {
+    describe(worker.id, () => {
+      it('should run for ng2', done => {
+        runLargeFormBenchmark({
+          id: `largeform.ng2.${worker.id}`,
+          url: 'all/benchmarks/src/largeform/ng2/index.html',
+          worker: worker
+        }).then(done, done.fail);
+      });
+    });
+  });
+
+  function runLargeFormBenchmark(
+      config: {id: string, url: string, ignoreBrowserSynchronization?: boolean, worker: Worker}) {
+    return runBenchmark({
+      id: config.id,
+      url: config.url,
+      params: [{name: 'copies', value: 8}],
+      ignoreBrowserSynchronization: config.ignoreBrowserSynchronization,
+      prepare: config.worker.prepare,
+      work: config.worker.work
+    });
+  }
+});
diff --git a/modules/benchmarks/e2e_test/largeform_spec.ts b/modules/benchmarks/e2e_test/largeform_spec.ts
new file mode 100644
index 000000000000..4a837dd492a6
--- /dev/null
+++ b/modules/benchmarks/e2e_test/largeform_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 {openBrowser, verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {$, By, element} from 'protractor';
+
+describe('largeform benchmark spec', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should work for ng2', () => {
+    testLargeformBenchmark({
+      url: 'all/benchmarks/src/largeform/ng2/index.html',
+    });
+  });
+
+  function testLargeformBenchmark(
+      openConfig: {url: string, ignoreBrowserSynchronization?: boolean}) {
+    openBrowser({
+      url: openConfig.url,
+      params: [{name: 'copies', value: 1}],
+      ignoreBrowserSynchronization: openConfig.ignoreBrowserSynchronization,
+    });
+    $('#createDom').click();
+    expect(element.all(By.css('input[name=value0]')).get(0).getAttribute('value'))
+        .toBe('someValue0');
+    $('#destroyDom').click();
+    expect(element.all(By.css('input[name=value0]')).count()).toBe(0);
+  }
+});
diff --git a/modules/benchmarks/e2e_test/largetable_perf.dart b/modules/benchmarks/e2e_test/largetable_perf.dart
deleted file mode 100644
index 503a391411b5..000000000000
--- a/modules/benchmarks/e2e_test/largetable_perf.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchmarks.e2e_test.largetable_perf;
-
-main() {
-
-}
diff --git a/modules/benchmarks/e2e_test/largetable_perf.ts b/modules/benchmarks/e2e_test/largetable_perf.ts
index 8760987cec56..2cfabb963452 100644
--- a/modules/benchmarks/e2e_test/largetable_perf.ts
+++ b/modules/benchmarks/e2e_test/largetable_perf.ts
@@ -1,61 +1,108 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
+/**
+ * @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
+ */
 
-describe('ng2 largetable benchmark', function() {
+import {runBenchmark, verifyNoBrowserErrors} from 'e2e_util/perf_util';
+import {$} from 'protractor';
 
-  var URL = 'benchmarks/src/largetable/largetable_benchmark.html';
+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()
+};
+
+describe('largetable benchmark perf', () => {
 
   afterEach(verifyNoBrowserErrors);
 
-  // Not yet implemented:
-  // 'ngBind',
-  // 'ngBindOnce',
-  // 'ngBindFn',
-  // 'ngBindFilter',
-  // 'interpolationFilter'
-
-  ['interpolation', 'interpolationAttr', 'interpolationFn'].forEach(function(benchmarkType) {
-    it('should log the ng stats with: ' + benchmarkType, function(done) {
-      console.log('executing for type', benchmarkType);
-      runClickBenchmark({
-        url: URL,
-        buttons: ['#ng2DestroyDom', '#ng2CreateDom'],
-        id: 'ng2.largetable.' + benchmarkType,
-        params: [
-          {name: 'rows', value: 20, scale: 'sqrt'},
-          {name: 'columns', value: 20, scale: 'sqrt'},
-          {name: 'benchmarkType', value: benchmarkType}
-        ]
-      }).then(done, done.fail);
-    });
-  });
+  [CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
+    describe(worker.id, () => {
+      it('should run for ng2', done => {
+        runTableBenchmark({
+          id: `largeTable.ng2.${worker.id}`,
+          url: 'all/benchmarks/src/largetable/ng2/index.html',
+          worker: worker
+        }).then(done, done.fail);
+      });
 
-  it('should log the stats without viewcache', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#ng2DestroyDom', '#ng2CreateDom'],
-      id: 'ng2.largetable.interpolation.plain',
-      params: [
-        {name: 'rows', value: 20, scale: 'sqrt'},
-        {name: 'columns', value: 20, scale: 'sqrt'},
-        {name: 'benchmarkType', value: 'interpolation'},
-        {name: 'viewcache', value: 'false'}
-      ]
-    }).then(done, done.fail);
-  });
+      it('should run for ng2 with ngSwitch', done => {
+        runTableBenchmark({
+          id: `largeTable.ng2_switch.${worker.id}`,
+          url: 'all/benchmarks/src/largetable/ng2_switch/index.html',
+          worker: worker
+        }).then(done, done.fail);
+      });
+
+      it('should run for render3', done => {
+        runTableBenchmark({
+          id: `largeTable.render3.${worker.id}`,
+          url: 'all/benchmarks/src/largetable/render3/index.html',
+          ignoreBrowserSynchronization: true,
+          worker: worker
+        }).then(done, done.fail);
+      });
+
+      it('should run for iv', done => {
+        runTableBenchmark({
+          id: `largeTable.iv.${worker.id}`,
+          url: 'all/benchmarks/src/largetable/iv/index.html',
+          ignoreBrowserSynchronization: true,
+          worker: worker
+        }).then(done, done.fail);
+      });
 
+      it('should run for the baseline', done => {
+        runTableBenchmark({
+          id: `largeTable.baseline.${worker.id}`,
+          url: 'all/benchmarks/src/largetable/baseline/index.html',
+          ignoreBrowserSynchronization: true,
+          worker: worker
+        }).then(done, done.fail);
+      });
 
-  it('should log the baseline stats', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#baselineDestroyDom', '#baselineCreateDom'],
-      id: 'baseline.largetable',
-      params: [
-        {name: 'rows', value: 100, scale: 'sqrt'},
-        {name: 'columns', value: 20, scale: 'sqrt'},
-        {name: 'benchmarkType', value: 'baseline'}
-      ]
-    }).then(done, done.fail);
-    ;
+      it('should run for incremental-dom', done => {
+        runTableBenchmark({
+          id: `largeTable.incremental_dom.${worker.id}`,
+          url: 'all/benchmarks/src/largetable/incremental_dom/index.html',
+          ignoreBrowserSynchronization: true,
+          worker: worker
+        }).then(done, done.fail);
+      });
+    });
   });
 
+  function runTableBenchmark(
+      config: {id: string, url: string, ignoreBrowserSynchronization?: boolean, worker: Worker}) {
+    return runBenchmark({
+      id: config.id,
+      url: config.url,
+      ignoreBrowserSynchronization: config.ignoreBrowserSynchronization,
+      params: [{name: 'cols', value: 40}, {name: 'rows', value: 200}],
+      prepare: config.worker.prepare,
+      work: config.worker.work
+    });
+  }
 });
diff --git a/modules/benchmarks/e2e_test/largetable_spec.ts b/modules/benchmarks/e2e_test/largetable_spec.ts
new file mode 100644
index 000000000000..5ac6d943802c
--- /dev/null
+++ b/modules/benchmarks/e2e_test/largetable_spec.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 {openBrowser, verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {$} from 'protractor';
+
+describe('largetable benchmark spec', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should work for ng2', () => {
+    testTableBenchmark({
+      url: 'all/benchmarks/src/largetable/ng2/index.html',
+    });
+  });
+
+  it('should work for ng2 switch', () => {
+    testTableBenchmark({
+      url: 'all/benchmarks/src/largetable/ng2_switch/index.html',
+    });
+  });
+
+  it('should work for render3', () => {
+    testTableBenchmark({
+      url: 'all/benchmarks/src/largetable/render3/index.html',
+      ignoreBrowserSynchronization: true,
+    });
+  });
+
+  it('should work for iv', () => {
+    testTableBenchmark({
+      url: 'all/benchmarks/src/largetable/iv/index.html',
+      ignoreBrowserSynchronization: true,
+    });
+  });
+
+  it('should work for the baseline', () => {
+    testTableBenchmark({
+      url: 'all/benchmarks/src/largetable/baseline/index.html',
+      ignoreBrowserSynchronization: true,
+    });
+  });
+
+  it('should work for the incremental-dom', () => {
+    testTableBenchmark({
+      url: 'all/benchmarks/src/largetable/incremental_dom/index.html',
+      ignoreBrowserSynchronization: true,
+    });
+  });
+
+  function testTableBenchmark(openConfig: {url: string, ignoreBrowserSynchronization?: boolean}) {
+    openBrowser({
+      url: openConfig.url,
+      ignoreBrowserSynchronization: openConfig.ignoreBrowserSynchronization,
+      params: [{name: 'cols', value: 5}, {name: 'rows', value: 5}],
+    });
+    $('#createDom').click();
+    expect($('#root').getText()).toContain('0/0');
+    $('#createDom').click();
+    expect($('#root').getText()).toContain('A/A');
+    $('#destroyDom').click();
+    expect($('#root').getText()).toEqual('');
+  }
+});
diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.dart b/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.dart
deleted file mode 100644
index 6e76e34c7293..000000000000
--- a/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchmarks.e2e_test.naive_infinite_scroll_perf;
-
-main() {
-
-}
diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts b/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts
deleted file mode 100644
index 988a4fe0b5bf..000000000000
--- a/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {runBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
-
-describe('ng2 naive infinite scroll benchmark', function() {
-
-  var URL = 'benchmarks/src/naive_infinite_scroll/index.html';
-
-  afterEach(verifyNoBrowserErrors);
-
-  [1, 2, 4].forEach(function(appSize) {
-    it('should run scroll benchmark and collect stats for appSize = ' + appSize, function(done) {
-      runBenchmark({
-        url: URL,
-        id: 'ng2.naive_infinite_scroll',
-        work: function() {
-          browser.wait(protractor.until.elementLocated(protractor.By.css('body /deep/ #scrollDiv')),
-                       5000);
-          $('#reset-btn').click();
-          $('#run-btn').click();
-          browser.wait(protractor.until.elementLocated(protractor.By.css('#done')), 10000);
-        },
-        params: [
-          {name: 'appSize', value: appSize},
-          {name: 'iterationCount', value: 20, scale: 'linear'},
-          {name: 'scrollIncrement', value: 40}
-        ]
-      }).then(done, done.fail);
-    });
-  });
-
-});
diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.dart b/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.dart
deleted file mode 100644
index c029906c47e1..000000000000
--- a/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchmarks.e2e_test.naive_infinite_scroll_spec;
-
-main() {
-
-}
diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts b/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts
deleted file mode 100644
index 454915a60f11..000000000000
--- a/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('ng2 naive infinite scroll benchmark', function() {
-
-  var URL = 'benchmarks/src/naive_infinite_scroll/index.html?appSize=3';
-
-  afterEach(verifyNoBrowserErrors);
-
-  it('should not throw errors', function() {
-    browser.get(URL);
-    var expectedRowCount = 18;
-    var expectedCellsPerRow = 28;
-    var allScrollItems = 'scroll-app #testArea scroll-item';
-    var cells = `${ allScrollItems } .row *`;
-    var stageButtons = `${ allScrollItems } .row stage-buttons button`;
-
-    var count = function(selector) {
-      return browser.executeScript(`return ` +
-                                   `document.querySelectorAll("${ selector }").length;`);
-    };
-
-    var clickFirstOf = function(selector) {
-      return browser.executeScript(`document.querySelector("${ selector }").click();`);
-    };
-
-    var firstTextOf = function(selector) {
-      return browser.executeScript(`return ` +
-                                   `document.querySelector("${ selector }").innerText;`);
-    };
-
-    // Make sure rows are rendered
-    count(allScrollItems).then(function(c) { expect(c).toEqual(expectedRowCount); });
-
-    // Make sure cells are rendered
-    count(cells).then(function(c) { expect(c).toEqual(expectedRowCount * expectedCellsPerRow); });
-
-    // Click on first enabled button and verify stage changes
-    firstTextOf(`${ stageButtons }:enabled`)
-        .then(function(text) {
-          expect(text).toEqual('Pitched');
-          clickFirstOf(`${ stageButtons }:enabled`)
-              .then(function() {
-                firstTextOf(`${ stageButtons }:enabled`)
-                    .then(function(text) { expect(text).toEqual('Won'); })
-              });
-        });
-
-    $("#reset-btn").click();
-    $("#run-btn").click();
-    browser.wait(() => {
-      return $('#done').getText().then(function() { return true; }, function() { return false; });
-    }, 10000);
-  });
-
-});
diff --git a/modules/benchmarks/e2e_test/old/compiler_perf.ts b/modules/benchmarks/e2e_test/old/compiler_perf.ts
new file mode 100644
index 000000000000..e19852d42245
--- /dev/null
+++ b/modules/benchmarks/e2e_test/old/compiler_perf.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
+ */
+
+import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {runBenchmark} from '@angular/testing/src/perf_util';
+
+describe('ng2 compiler benchmark', function() {
+
+  const URL = 'benchmarks/src/compiler/compiler_benchmark.html';
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should log withBindings stats', function(done) {
+    browser.sleep(1000);
+    runBenchmark({
+      url: URL,
+      id: 'ng2.compile.withBindings',
+      params: [{name: 'elements', value: 150, scale: 'linear'}],
+      work: function() {
+        browser.executeScript('document.querySelector("#compileWithBindings").click()');
+        browser.sleep(500);
+      }
+    }).then(done, done.fail);
+  });
+
+  it('should log noBindings stats', function(done) {
+    browser.sleep(1000);
+    runBenchmark({
+      url: URL,
+      id: 'ng2.compile.noBindings',
+      params: [{name: 'elements', value: 150, scale: 'linear'}],
+      work: function() {
+        browser.executeScript('document.querySelector("#compileNoBindings").click()');
+        browser.sleep(500);
+      }
+    }).then(done, done.fail);
+  });
+
+});
diff --git a/modules/benchmarks/e2e_test/old/costs_perf.ts b/modules/benchmarks/e2e_test/old/costs_perf.ts
new file mode 100644
index 000000000000..3e86ac777738
--- /dev/null
+++ b/modules/benchmarks/e2e_test/old/costs_perf.ts
@@ -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
+ */
+
+import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {runClickBenchmark} from '@angular/testing/src/perf_util';
+
+describe('ng2 cost benchmark', function() {
+
+  const URL = 'benchmarks/src/costs/index.html';
+
+  // Number of components to create in a single iteration
+  const benchmarkSize = 200;
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should log stats for baseline (plain components)', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#reset', '#createPlainComponents'],
+      id: 'ng2.costs.baseline',
+      params: [{name: 'size', value: benchmarkSize, scale: 'linear'}]
+    }).then(done, done.fail);
+  });
+
+  it('should log stats for components with decorators', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#reset', '#createComponentsWithDirectives'],
+      id: 'ng2.costs.decorators',
+      params: [{name: 'size', value: benchmarkSize, scale: 'linear'}]
+    }).then(done, done.fail);
+  });
+
+  it('should log stats for dynamic components', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#reset', '#createDynamicComponents'],
+      id: 'ng2.costs.dynamic',
+      params: [{name: 'size', value: benchmarkSize, scale: 'linear'}]
+    }).then(done, done.fail);
+  });
+});
diff --git a/modules/benchmarks/e2e_test/di_perf.ts b/modules/benchmarks/e2e_test/old/di_perf.ts
similarity index 79%
rename from modules/benchmarks/e2e_test/di_perf.ts
rename to modules/benchmarks/e2e_test/old/di_perf.ts
index 1db7084026ce..7716e8c8e631 100644
--- a/modules/benchmarks/e2e_test/di_perf.ts
+++ b/modules/benchmarks/e2e_test/old/di_perf.ts
@@ -1,8 +1,17 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
+/**
+ * @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 {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {runClickBenchmark} from '@angular/testing/src/perf_util';
 
 describe('ng2 di benchmark', function() {
 
-  var URL = 'benchmarks/src/di/di_benchmark.html';
+  const URL = 'benchmarks/src/di/di_benchmark.html';
 
   afterEach(verifyNoBrowserErrors);
 
@@ -12,7 +21,8 @@ describe('ng2 di benchmark', function() {
       buttons: ['#getByToken'],
       id: 'ng2.di.getByToken',
       params: [{name: 'iterations', value: 20000, scale: 'linear'}],
-      microMetrics: {'injectAvg': 'avg time for injection (in ms)'}
+      microMetrics: {'injectAvg': 'avg time for injection (in ms)'},
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
@@ -22,7 +32,8 @@ describe('ng2 di benchmark', function() {
       buttons: ['#getByKey'],
       id: 'ng2.di.getByKey',
       params: [{name: 'iterations', value: 20000, scale: 'linear'}],
-      microMetrics: {'injectAvg': 'avg time for injection (in ms)'}
+      microMetrics: {'injectAvg': 'avg time for injection (in ms)'},
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
@@ -32,7 +43,8 @@ describe('ng2 di benchmark', function() {
       buttons: ['#getChild'],
       id: 'ng2.di.getChild',
       params: [{name: 'iterations', value: 20000, scale: 'linear'}],
-      microMetrics: {'injectAvg': 'avg time for getChild (in ms)'}
+      microMetrics: {'injectAvg': 'avg time for getChild (in ms)'},
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
@@ -42,7 +54,8 @@ describe('ng2 di benchmark', function() {
       buttons: ['#instantiate'],
       id: 'ng2.di.instantiate',
       params: [{name: 'iterations', value: 10000, scale: 'linear'}],
-      microMetrics: {'injectAvg': 'avg time for instantiate (in ms)'}
+      microMetrics: {'injectAvg': 'avg time for instantiate (in ms)'},
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
@@ -56,7 +69,8 @@ describe('ng2 di benchmark', function() {
       buttons: ['#createVariety'],
       id: 'ng2.di.createVariety',
       params: [{name: 'iterations', value: 10000, scale: 'linear'}],
-      microMetrics: {'injectAvg': 'avg time for createVariety (in ms)'}
+      microMetrics: {'injectAvg': 'avg time for createVariety (in ms)'},
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
@@ -69,7 +83,8 @@ describe('ng2 di benchmark', function() {
       buttons: ['#createVarietyResolved'],
       id: 'ng2.di.createVarietyResolved',
       params: [{name: 'iterations', value: 10000, scale: 'linear'}],
-      microMetrics: {'injectAvg': 'avg time for createVarietyResolved (in ms)'}
+      microMetrics: {'injectAvg': 'avg time for createVarietyResolved (in ms)'},
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
diff --git a/modules/benchmarks/e2e_test/old/largetable_perf.ts b/modules/benchmarks/e2e_test/old/largetable_perf.ts
new file mode 100644
index 000000000000..046c01e3854b
--- /dev/null
+++ b/modules/benchmarks/e2e_test/old/largetable_perf.ts
@@ -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
+ */
+
+import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {runClickBenchmark} from '@angular/testing/src/perf_util';
+
+describe('ng2 largetable benchmark', function() {
+
+  const URL = 'benchmarks/src/largetable/largetable_benchmark.html';
+
+  afterEach(verifyNoBrowserErrors);
+
+  // Not yet implemented:
+  // 'ngBind',
+  // 'ngBindOnce',
+  // 'ngBindFn',
+  // 'ngBindFilter',
+  // 'interpolationFilter'
+
+  ['interpolation', 'interpolationAttr', 'interpolationFn'].forEach(function(benchmarkType) {
+    it('should log the ng stats with: ' + benchmarkType, function(done) {
+      runClickBenchmark({
+        url: URL,
+        buttons: ['#ng2DestroyDom', '#ng2CreateDom'],
+        id: 'ng2.largetable.' + benchmarkType,
+        params: [
+          {name: 'rows', value: 20, scale: 'sqrt'}, {name: 'columns', value: 20, scale: 'sqrt'},
+          {name: 'benchmarkType', value: benchmarkType}
+        ]
+      }).then(done, done.fail);
+    });
+  });
+
+  it('should log the baseline stats', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#baselineDestroyDom', '#baselineCreateDom'],
+      id: 'baseline.largetable',
+      params: [
+        {name: 'rows', value: 100, scale: 'sqrt'}, {name: 'columns', value: 20, scale: 'sqrt'},
+        {name: 'benchmarkType', value: 'baseline'}
+      ]
+    }).then(done, done.fail);
+  });
+
+});
diff --git a/modules/benchmarks/e2e_test/old/naive_infinite_scroll_perf.ts b/modules/benchmarks/e2e_test/old/naive_infinite_scroll_perf.ts
new file mode 100644
index 000000000000..9fa9cc7aafd4
--- /dev/null
+++ b/modules/benchmarks/e2e_test/old/naive_infinite_scroll_perf.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {runBenchmark} from '@angular/testing/src/perf_util';
+
+describe('ng2 naive infinite scroll benchmark', function() {
+
+  const URL = 'benchmarks/src/naive_infinite_scroll/index.html';
+
+  afterEach(verifyNoBrowserErrors);
+
+  [1, 2, 4].forEach(function(appSize) {
+    it('should run scroll benchmark and collect stats for appSize = ' + appSize, function(done) {
+      runBenchmark({
+        url: URL,
+        id: 'ng2.naive_infinite_scroll',
+        work: function() {
+          browser.wait(
+              protractor.until.elementLocated(protractor.By.css('body /deep/ #scrollDiv')), 5000);
+          $('#reset-btn').click();
+          $('#run-btn').click();
+          browser.wait(protractor.until.elementLocated(protractor.By.css('#done')), 10000);
+        },
+        params: [
+          {name: 'appSize', value: appSize}, {name: 'iterationCount', value: 20, scale: 'linear'},
+          {name: 'scrollIncrement', value: 40}
+        ]
+      }).then(done, done.fail);
+    });
+  });
+
+});
diff --git a/modules/benchmarks/e2e_test/old/naive_infinite_scroll_spec.ts b/modules/benchmarks/e2e_test/old/naive_infinite_scroll_spec.ts
new file mode 100644
index 000000000000..6d74ab6cf302
--- /dev/null
+++ b/modules/benchmarks/e2e_test/old/naive_infinite_scroll_spec.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {runClickBenchmark} from '@angular/testing/src/perf_util';
+
+describe('ng2 naive infinite scroll benchmark', function() {
+
+  const URL = 'benchmarks/src/naive_infinite_scroll/index.html?appSize=3';
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should not throw errors', function() {
+    browser.get(URL);
+    const expectedRowCount = 18;
+    const expectedCellsPerRow = 27;
+    const allScrollItems = 'scroll-app #testArea scroll-item';
+    const cells = `${ allScrollItems } .row *`;
+    const stageButtons = `${ allScrollItems } .row stage-buttons button`;
+
+    const count = function(selector) {
+      return browser.executeScript(
+          `return ` +
+          `document.querySelectorAll("${ selector }").length;`);
+    };
+
+    const clickFirstOf = function(selector) {
+      return browser.executeScript(`document.querySelector("${ selector }").click();`);
+    };
+
+    const firstTextOf = function(selector) {
+      return browser.executeScript(
+          `return ` +
+          `document.querySelector("${ selector }").innerText;`);
+    };
+
+    // Make sure rows are rendered
+    count(allScrollItems).then(function(c) { expect(c).toEqual(expectedRowCount); });
+
+    // Make sure cells are rendered
+    count(cells).then(function(c) { expect(c).toEqual(expectedRowCount * expectedCellsPerRow); });
+
+    // Click on first enabled button and verify stage changes
+    firstTextOf(`${ stageButtons }:enabled`).then(function(text) {
+      expect(text).toEqual('Pitched');
+      clickFirstOf(`${ stageButtons }:enabled`).then(function() {
+        firstTextOf(`${ stageButtons }:enabled`).then((text) => expect(text).toEqual('Won'));
+      });
+    });
+
+    $('#reset-btn').click();
+    $('#run-btn').click();
+    browser.wait(() => {
+      return $('#done').getText().then(function() { return true; }, function() { return false; });
+    }, 10000);
+  });
+
+});
diff --git a/modules/benchmarks/e2e_test/old/page_load_perf.ts b/modules/benchmarks/e2e_test/old/page_load_perf.ts
new file mode 100644
index 000000000000..29fc80013f75
--- /dev/null
+++ b/modules/benchmarks/e2e_test/old/page_load_perf.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
+ */
+
+import {verifyNoBrowserErrors} from 'angular2/src/testing/perf_util';
+
+describe('ng2 largetable benchmark', function() {
+
+  const URL = 'benchmarks/src/page_load/page_load.html';
+  const runner = global['benchpressRunner'];
+
+  afterEach(verifyNoBrowserErrors);
+
+
+  it('should log the load time', function(done) {
+    runner
+        .sample({
+          id: 'loadTime',
+          prepare: null,
+          microMetrics: null,
+          userMetrics:
+              {loadTime: 'The time in milliseconds to bootstrap', someConstant: 'Some constant'},
+          bindings: [
+            benchpress.bind(benchpress.SizeValidator.SAMPLE_SIZE).toValue(2),
+            benchpress.bind(benchpress.RegressionSlopeValidator.SAMPLE_SIZE).toValue(2),
+            benchpress.bind(benchpress.RegressionSlopeValidator.METRIC).toValue('someConstant')
+          ],
+          execute: () => { browser.get(URL); }
+        })
+        .then(report => {
+          expect(report.completeSample.map(val => val.values.someConstant)
+                     .every(v => v === 1234567890))
+              .toBe(true);
+          expect(report.completeSample.map(val => val.values.loadTime)
+                     .filter(t => typeof t === 'number' && t > 0)
+                     .length)
+              .toBeGreaterThan(1);
+        })
+        .then(done);
+  });
+});
diff --git a/modules/benchmarks/e2e_test/old/selector_perf.ts b/modules/benchmarks/e2e_test/old/selector_perf.ts
new file mode 100644
index 000000000000..f1fdbe346d43
--- /dev/null
+++ b/modules/benchmarks/e2e_test/old/selector_perf.ts
@@ -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
+ */
+
+import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {runClickBenchmark} from '@angular/testing/src/perf_util';
+
+describe('ng2 selector benchmark', function() {
+
+  const URL = 'benchmarks/src/compiler/selector_benchmark.html';
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should log parse stats', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#parse'],
+      id: 'ng2.selector.parse',
+      params: [{name: 'selectors', value: 10000, scale: 'linear'}],
+      waitForAngular2: false
+    }).then(done, done.fail);
+  });
+
+  it('should log addSelectable stats', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#addSelectable'],
+      id: 'ng2.selector.addSelectable',
+      params: [{name: 'selectors', value: 10000, scale: 'linear'}],
+      waitForAngular2: false
+    }).then(done, done.fail);
+  });
+
+  it('should log match stats', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#match'],
+      id: 'ng2.selector.match',
+      params: [{name: 'selectors', value: 10000, scale: 'linear'}],
+      waitForAngular2: false
+    }).then(done, done.fail);
+  });
+
+});
diff --git a/modules/benchmarks/e2e_test/old/static_tree_perf.ts b/modules/benchmarks/e2e_test/old/static_tree_perf.ts
new file mode 100644
index 000000000000..3bf0dc782f65
--- /dev/null
+++ b/modules/benchmarks/e2e_test/old/static_tree_perf.ts
@@ -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
+ */
+
+import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {runClickBenchmark} from '@angular/testing/src/perf_util';
+
+describe('ng2 static tree benchmark', function() {
+
+  const URL = 'benchmarks/src/static_tree/tree_benchmark.html';
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should log the ng stats', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#ng2DestroyDom', '#ng2CreateDom'],
+      id: 'ng2.static.tree.create.plain',
+      params: []
+    }).then(done, done.fail);
+  });
+
+  it('should log the ng stats (update)', function(done) {
+    runClickBenchmark(
+        {url: URL, buttons: ['#ng2CreateDom'], id: 'ng2.static.tree.update', params: []})
+        .then(done, done.fail);
+  });
+
+  it('should log the baseline stats', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#baselineDestroyDom', '#baselineCreateDom'],
+      id: 'baseline.static.tree.create',
+      params: []
+    }).then(done, done.fail);
+  });
+
+  it('should log the baseline stats (update)', function(done) {
+    runClickBenchmark(
+        {url: URL, buttons: ['#baselineCreateDom'], id: 'baseline.static.tree.update', params: []})
+        .then(done, done.fail);
+  });
+
+});
diff --git a/modules/benchmarks/e2e_test/selector_perf.dart b/modules/benchmarks/e2e_test/selector_perf.dart
deleted file mode 100644
index ac9325d390c0..000000000000
--- a/modules/benchmarks/e2e_test/selector_perf.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchmarks.e2e_test.selector_perf;
-
-main() {
-
-}
diff --git a/modules/benchmarks/e2e_test/selector_perf.ts b/modules/benchmarks/e2e_test/selector_perf.ts
deleted file mode 100644
index 2ba41763ac2a..000000000000
--- a/modules/benchmarks/e2e_test/selector_perf.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
-
-describe('ng2 selector benchmark', function() {
-
-  var URL = 'benchmarks/src/compiler/selector_benchmark.html';
-
-  afterEach(verifyNoBrowserErrors);
-
-  it('should log parse stats', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#parse'],
-      id: 'ng2.selector.parse',
-      params: [{name: 'selectors', value: 10000, scale: 'linear'}]
-    }).then(done, done.fail);
-  });
-
-  it('should log addSelectable stats', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#addSelectable'],
-      id: 'ng2.selector.addSelectable',
-      params: [{name: 'selectors', value: 10000, scale: 'linear'}]
-    }).then(done, done.fail);
-  });
-
-  it('should log match stats', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#match'],
-      id: 'ng2.selector.match',
-      params: [{name: 'selectors', value: 10000, scale: 'linear'}]
-    }).then(done, done.fail);
-  });
-
-});
diff --git a/modules/benchmarks/e2e_test/tree_data.ts b/modules/benchmarks/e2e_test/tree_data.ts
new file mode 100644
index 000000000000..ca3fe381d625
--- /dev/null
+++ b/modules/benchmarks/e2e_test/tree_data.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 {$} 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.ng2.render3`,
+    url: 'all/benchmarks/src/tree/render3/index.html',
+    buttons: CreateDestroyDetectChangesButtons,
+    ignoreBrowserSynchronization: true,
+  },
+  {
+    id: `deepTree.ng2.render3_function`,
+    url: 'all/benchmarks/src/tree/render3_function/index.html',
+    buttons: CreateDestroyDetectChangesButtons,
+    ignoreBrowserSynchronization: true,
+  },
+  {
+    id: `deepTree.iv`,
+    url: 'all/benchmarks/src/tree/iv/index.html',
+    buttons: CreateDestroyDetectChangesButtons,
+    ignoreBrowserSynchronization: true,
+  },
+  {
+    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.dart b/modules/benchmarks/e2e_test/tree_perf.dart
deleted file mode 100644
index afaf29c7d38e..000000000000
--- a/modules/benchmarks/e2e_test/tree_perf.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchmarks.e2e_test.tree_perf;
-
-main() {
-
-}
diff --git a/modules/benchmarks/e2e_test/tree_perf.ts b/modules/benchmarks/e2e_test/tree_perf.ts
index 52f1c379b38c..12034c7e0778 100644
--- a/modules/benchmarks/e2e_test/tree_perf.ts
+++ b/modules/benchmarks/e2e_test/tree_perf.ts
@@ -1,54 +1,93 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
+/**
+ * @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
+ */
 
-describe('ng2 tree benchmark', function() {
+import {runBenchmark, verifyNoBrowserErrors} from 'e2e_util/perf_util';
+import {$, browser} from 'protractor';
 
-  var URL = 'benchmarks/src/tree/tree_benchmark.html';
+import {Benchmark, Benchmarks, CreateBtn, DestroyBtn, DetectChangesBtn, RootEl} from './tree_data';
 
-  afterEach(verifyNoBrowserErrors);
+describe('tree benchmark perf', () => {
 
-  it('should log the ng stats with viewcache', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#ng2DestroyDom', '#ng2CreateDom'],
-      id: 'ng2.tree.create.viewcache',
-      params: [{name: 'depth', value: 9, scale: 'log2'}, {name: 'viewcache', value: 'true'}]
-    }).then(done, done.fail);
-  });
+  let _oldRootEl: any;
+  beforeEach(() => _oldRootEl = browser.rootEl);
 
-  it('should log the ng stats without viewcache', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#ng2DestroyDom', '#ng2CreateDom'],
-      id: 'ng2.tree.create.plain',
-      params: [{name: 'depth', value: 9, scale: 'log2'}, {name: 'viewcache', value: 'false'}]
-    }).then(done, done.fail);
+  afterEach(() => {
+    browser.rootEl = _oldRootEl;
+    verifyNoBrowserErrors();
   });
 
-  it('should log the ng stats (update)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#ng2CreateDom'],
-      id: 'ng2.tree.update',
-      params: [{name: 'depth', value: 9, scale: 'log2'}, {name: 'viewcache', value: 'true'}]
-    }).then(done, done.fail);
-  });
+  Benchmarks.forEach(benchmark => {
+    describe(benchmark.id, () => {
+      // This is actually a destroyOnly benchmark
+      it('should work for createOnly', done => {
+        runTreeBenchmark({
+          id: 'createOnly',
+          benchmark,
+          prepare: () => $(CreateBtn).click(),
+          work: () => $(DestroyBtn).click()
+        }).then(done, done.fail);
+      });
 
-  it('should log the baseline stats', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#baselineDestroyDom', '#baselineCreateDom'],
-      id: 'baseline.tree.create',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
-    }).then(done, done.fail);
-  });
+      it('should work for createOnlyForReal', done => {
+        runTreeBenchmark({
+          id: 'createOnlyForReal',
+          benchmark,
+          prepare: () => $(DestroyBtn).click(),
+          work: () => $(CreateBtn).click()
+        }).then(done, done.fail);
+      });
 
-  it('should log the baseline stats (update)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#baselineCreateDom'],
-      id: 'baseline.tree.update',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
-    }).then(done, done.fail);
-  });
+      it('should work for createDestroy', done => {
+        runTreeBenchmark({
+          id: 'createDestroy',
+          benchmark,
+          work: () => {
+            $(DestroyBtn).click();
+            $(CreateBtn).click();
+          }
+        }).then(done, done.fail);
+      });
+
+      it('should work for update', done => {
+        runTreeBenchmark({id: 'update', benchmark, work: () => $(CreateBtn).click()})
+            .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);
+        });
+      }
+
+    });
+  });
 });
+
+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
new file mode 100644
index 000000000000..6c58fd4b8448
--- /dev/null
+++ b/modules/benchmarks/e2e_test/tree_spec.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 {openBrowser, verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {$, browser} from 'protractor';
+
+import {Benchmark, Benchmarks, CreateBtn, DestroyBtn, DetectChangesBtn, NumberOfChecksEl, RootEl} from './tree_data';
+
+describe('tree benchmark spec', () => {
+
+  let _oldRootEl: any;
+  beforeEach(() => _oldRootEl = browser.rootEl);
+
+  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');
+        });
+      }
+    });
+  });
+
+  function openTreeBenchmark(benchmark: Benchmark) {
+    let params = [{name: 'depth', value: 4}];
+    if (benchmark.extraParams) {
+      params = params.concat(benchmark.extraParams);
+    }
+    browser.rootEl = RootEl;
+    openBrowser({
+      url: benchmark.url,
+      ignoreBrowserSynchronization: benchmark.ignoreBrowserSynchronization,
+      params: params,
+    });
+  }
+});
diff --git a/modules/benchmarks/favicon.ico b/modules/benchmarks/favicon.ico
new file mode 100644
index 000000000000..8081c7ceaf2b
Binary files /dev/null and b/modules/benchmarks/favicon.ico differ
diff --git a/modules/benchmarks/pubspec.yaml b/modules/benchmarks/pubspec.yaml
deleted file mode 100644
index 5556e136b52c..000000000000
--- a/modules/benchmarks/pubspec.yaml
+++ /dev/null
@@ -1,34 +0,0 @@
-name: angular2_benchmarks
-version: <%= packageJson.version %>
-authors:
-<%= Object.keys(packageJson.contributors).map(function(name) {
-  return '- '+name+' <'+packageJson.contributors[name]+'>';
-}).join('\n') %>
-description: Angular2 benchmarks
-homepage: <%= packageJson.homepage %>
-environment:
-  sdk: '>=1.10.0-dev.1.10 <2.0.0'
-dependencies:
-  angular2: '^<%= packageJson.version %>'
-  browser: '^0.10.0'
-dependency_overrides:
-  angular2:
-    path: ../angular2
-transformers:
-- angular2:
-    entry_points:
-        - web/src/compiler/compiler_benchmark.dart
-        - web/src/costs/index.dart
-        - web/src/di/di_benchmark.dart
-        - web/src/element_injector/element_injector_benchmark.dart
-        - web/src/largetable/largetable_benchmark.dart
-        - web/src/naive_infinite_scroll/index.dart
-        - web/src/tree/tree_benchmark.dart
-    generate_change_detectors: false
-- $dart2js:
-    minify: false
-    commandLineOptions:
-    - --dump-info
-    - --trust-type-annotations
-    - --trust-primitives
-    - --show-package-warnings
diff --git a/modules/benchmarks/src/BUILD.bazel b/modules/benchmarks/src/BUILD.bazel
new file mode 100644
index 000000000000..45901bd2fac7
--- /dev/null
+++ b/modules/benchmarks/src/BUILD.bazel
@@ -0,0 +1,25 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "util_lib",
+    srcs = [
+        "util.ts",
+    ],
+    deps = [
+        "//packages:types",
+        "//packages/core",
+    ],
+)
+
+ts_library(
+    name = "bootstrap",
+    srcs = [
+        "bootstrap_ng2.ts",
+        "bootstrap_plain.ts",
+    ],
+    deps = [
+        "//packages:types",
+    ],
+)
diff --git a/modules/benchmarks/src/README.md b/modules/benchmarks/src/README.md
new file mode 100644
index 000000000000..9bd77a618f76
--- /dev/null
+++ b/modules/benchmarks/src/README.md
@@ -0,0 +1,7 @@
+# Benchmark Directory Layout
+
+## Bazel
+
+Under bazel the rules for laying out test files are slightly different. Use `largetable/render3` as an example.
+
+Put the perf file in current subdirectory (ie `largetable`) such that the same perf file can be used for each of the sub-subdirectories. (ie `largetable/*` should all be testable with the same perf file `largetable/largetable_perf.spec.ts`). Under bazel, typescript protractor spec files must end with `.spec.ts` or `.test.ts`.
diff --git a/modules/benchmarks/src/bootstrap_ng2.ts b/modules/benchmarks/src/bootstrap_ng2.ts
new file mode 100644
index 000000000000..ff8eb4d105ff
--- /dev/null
+++ b/modules/benchmarks/src/bootstrap_ng2.ts
@@ -0,0 +1,84 @@
+/**
+ * @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
+ */
+
+(function(global: any) {
+
+  writeScriptTag('/all/benchmarks/vendor/core.js');
+  writeScriptTag('/all/benchmarks/vendor/zone.js');
+  writeScriptTag('/all/benchmarks/vendor/long-stack-trace-zone.js');
+  writeScriptTag('/all/benchmarks/vendor/system.src.js');
+  writeScriptTag('/all/benchmarks/vendor/Reflect.js', 'benchmarksBootstrap()');
+
+  (<any>global).benchmarksBootstrap = benchmarksBootstrap;
+
+  function benchmarksBootstrap() {
+    // check query param
+    const useBundles = location.search.indexOf('bundles=false') == -1;
+    if (useBundles) {
+      System.config({
+        defaultJSExtensions: true,
+        map: {
+          '@angular/core': '/packages-dist/core/bundles/core.umd.js',
+          '@angular/animations': '/packages-dist/common/bundles/animations.umd.js',
+          '@angular/platform-browser/animations':
+              '/packages-dist/platform-browser/bundles/platform-browser-animations.umd.js',
+          '@angular/common': '/packages-dist/common/bundles/common.umd.js',
+          '@angular/forms': '/packages-dist/forms/bundles/forms.umd.js',
+          '@angular/compiler': '/packages-dist/compiler/bundles/compiler.umd.js',
+          '@angular/platform-browser':
+              '/packages-dist/platform-browser/bundles/platform-browser.umd.js',
+          '@angular/platform-browser-dynamic':
+              '/packages-dist/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+          '@angular/http': '/packages-dist/http/bundles/http.umd.js',
+          '@angular/upgrade': '/packages-dist/upgrade/bundles/upgrade.umd.js',
+          '@angular/router': '/packages-dist/router/bundles/router.umd.js',
+          'rxjs': '/all/benchmarks/vendor/rxjs',
+        },
+        packages: {
+          'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs': {main: 'index.js', defaultExtension: 'js'},
+        }
+      });
+    } else {
+      console.warn(
+          'Not using the Angular bundles. Don\'t use this configuration for e2e/performance tests!');
+
+      System.config({
+        defaultJSExtensions: true,
+        map: {'@angular': '/all/@angular', 'rxjs': '/all/benchmarks/vendor/rxjs'},
+        packages: {
+          '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/animations': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-browser/animations': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/forms': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/upgrade': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs': {main: 'index.js', defaultExtension: 'js'},
+        }
+      });
+    }
+
+    // BOOTSTRAP the app!
+    System.import('index').then(function(m: any) { m.main(); }, console.error.bind(console));
+  }
+
+  function writeScriptTag(scriptUrl: string, onload?: string) {
+    document.write(`<script src="${scriptUrl}" onload="${onload}"></script>`);
+  }
+}(window));
diff --git a/modules/benchmarks/src/bootstrap_plain.ts b/modules/benchmarks/src/bootstrap_plain.ts
new file mode 100644
index 000000000000..b2c62c53ae67
--- /dev/null
+++ b/modules/benchmarks/src/bootstrap_plain.ts
@@ -0,0 +1,31 @@
+/**
+ * @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
+ */
+
+(function(global: any) {
+
+  writeScriptTag('/all/benchmarks/vendor/core.js');
+  writeScriptTag('/all/benchmarks/vendor/system.src.js', 'benchmarksBootstrap()');
+
+  (<any>global).benchmarksBootstrap = benchmarksBootstrap;
+
+  function benchmarksBootstrap() {
+    System.config({
+      defaultJSExtensions: true,
+      map: {'incremental-dom': '/all/benchmarks/vendor/incremental-dom-cjs.js'}
+    });
+
+    // BOOTSTRAP the app!
+    System.import('index').then(function(m: any) {
+      m.main && m.main();
+    }, console.error.bind(console));
+  }
+
+  function writeScriptTag(scriptUrl: string, onload?: string) {
+    document.write(`<script src="${scriptUrl}" onload="${onload}"></script>`);
+  }
+}(window));
diff --git a/modules/benchmarks/src/change_detection/change_detection_benchmark.html b/modules/benchmarks/src/change_detection/change_detection_benchmark.html
deleted file mode 100644
index a835c07b1e68..000000000000
--- a/modules/benchmarks/src/change_detection/change_detection_benchmark.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!doctype html>
-<html>
-<body>
-
-<h2>Params</h2>
-<form>
-  Iterations:
-  <input type="number" name="iterations" placeholder="iterations" value="20">
-  Number of checks:
-  <input type="number" name="numberOfChecks" placeholder="numberOfChecks" value="900000">
-  <br>
-  <button>Apply</button>
-</form>
-
-<h2>Actions</h2>
-<p>
-<button id="ng2ChangeDetectionDynamicReads">Ng2 detect changes (reads, dynamic)</button>
-<button id="ng2ChangeDetectionDynamicWrites">Ng2 detect changes (writes, dynamic)</button>
-
-<button id="ng2ChangeDetectionJitReads">Ng2 detect changes (reads, jit)</button>
-<button id="ng2ChangeDetectionJitWrites">Ng2 detect changes (writes, jit)</button>
-
-<button id="baselineChangeDetectionReads">baselineDetectChangesReads</button>
-<button id="baselineChangeDetectionWrites">baselineDetectChangesWrites</button>
-</p>
-
-$SCRIPTS$
-
-</body>
\ No newline at end of file
diff --git a/modules/benchmarks/src/change_detection/change_detection_benchmark.ts b/modules/benchmarks/src/change_detection/change_detection_benchmark.ts
deleted file mode 100644
index a2ed516439f2..000000000000
--- a/modules/benchmarks/src/change_detection/change_detection_benchmark.ts
+++ /dev/null
@@ -1,385 +0,0 @@
-import {reflector} from 'angular2/src/reflection/reflection';
-import {isPresent, isJsObject} from 'angular2/src/facade/lang';
-import {getIntParameter, bindAction, microBenchmark} from 'angular2/src/test_lib/benchmark_util';
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-
-import {
-  Lexer,
-  Parser,
-  ChangeDispatcher,
-  ChangeDetection,
-  DynamicChangeDetection,
-  JitChangeDetection,
-  ChangeDetectorDefinition,
-  BindingRecord,
-  DirectiveRecord,
-  DirectiveIndex,
-  DEFAULT
-} from 'angular2/change_detection';
-
-
-// ---- SHARED
-
-class Obj {
-  field0;
-  field1;
-  field2;
-  field3;
-  field4;
-  field5;
-  field6;
-  field7;
-  field8;
-  field9;
-
-
-  setField(index, value) {
-    switch (index) {
-      case 0:
-        this.field0 = value;
-        break;
-      case 1:
-        this.field1 = value;
-        break;
-      case 2:
-        this.field2 = value;
-        break;
-      case 3:
-        this.field3 = value;
-        break;
-      case 4:
-        this.field4 = value;
-        break;
-      case 5:
-        this.field5 = value;
-        break;
-      case 6:
-        this.field6 = value;
-        break;
-      case 7:
-        this.field7 = value;
-        break;
-      case 8:
-        this.field8 = value;
-        break;
-      case 9:
-        this.field9 = value;
-        break;
-    }
-  }
-
-  getField(index) {
-    switch (index) {
-      case 0:
-        return this.field0;
-      case 1:
-        return this.field1;
-      case 2:
-        return this.field2;
-      case 3:
-        return this.field3;
-      case 4:
-        return this.field4;
-      case 5:
-        return this.field5;
-      case 6:
-        return this.field6;
-      case 7:
-        return this.field7;
-      case 8:
-        return this.field8;
-      case 9:
-        return this.field9;
-    }
-  }
-}
-
-class Row {
-  obj;
-  targetObj;
-  field0;
-  field1;
-  field2;
-  field3;
-  field4;
-  field5;
-  field6;
-  field7;
-  field8;
-  field9;
-
-  next;
-}
-
-function createObject() {
-  var obj = new Obj();
-  for (var i = 0; i < 10; ++i) {
-    obj.setField(i, i);
-  }
-  return obj;
-}
-
-function changeObject(object) {
-  for (var i = 0; i < 10; ++i) {
-    object.setField(i, object.getField(i) + 1);
-  }
-}
-
-function setUpReflector() {
-  reflector.registerGetters({
-    'field0': function(obj) { return obj.field0 },
-    'field1': function(obj) { return obj.field1 },
-    'field2': function(obj) { return obj.field2 },
-    'field3': function(obj) { return obj.field3 },
-    'field4': function(obj) { return obj.field4 },
-    'field5': function(obj) { return obj.field5 },
-    'field6': function(obj) { return obj.field6 },
-    'field7': function(obj) { return obj.field7 },
-    'field8': function(obj) { return obj.field8 },
-    'field9': function(obj) { return obj.field9 }
-  });
-  reflector.registerSetters({
-    'field0': function(obj, v) { return obj.field0 = v },
-    'field1': function(obj, v) { return obj.field1 = v },
-    'field2': function(obj, v) { return obj.field2 = v },
-    'field3': function(obj, v) { return obj.field3 = v },
-    'field4': function(obj, v) { return obj.field4 = v },
-    'field5': function(obj, v) { return obj.field5 = v },
-    'field6': function(obj, v) { return obj.field6 = v },
-    'field7': function(obj, v) { return obj.field7 = v },
-    'field8': function(obj, v) { return obj.field8 = v },
-    'field9': function(obj, v) { return obj.field9 = v }
-  });
-}
-
-
-
-// ---- BASELINE
-
-function setUpBaseline(iterations, object) {
-  function createRow(i) {
-    var r = new Row();
-    r.obj = object;
-    r.targetObj = new Obj();
-    return r;
-  }
-
-  var head = createRow(0);
-  var current = head;
-  for (var i = 1; i < iterations; i++) {
-    var newRow = createRow(i);
-    current.next = newRow;
-    current = newRow;
-  }
-  return head;
-}
-
-function checkBaselineRow(r) {
-  var obj = r.obj;
-
-  if (obj.field0 !== r.field0) {
-    r.field0 = obj.field0;
-    r.targetObj.field0 = obj.field0;
-  }
-  if (obj.field1 !== r.field1) {
-    r.field1 = obj.field1;
-    r.targetObj.field1 = obj.field1;
-  }
-  if (obj.field2 !== r.field2) {
-    r.field2 = obj.field2;
-    r.targetObj.field2 = obj.field2;
-  }
-  if (obj.field3 !== r.field3) {
-    r.field3 = obj.field3;
-    r.targetObj.field3 = obj.field3;
-  }
-  if (obj.field4 !== r.field4) {
-    r.field4 = obj.field4;
-    r.targetObj.field4 = obj.field4;
-  }
-  if (obj.field5 !== r.field5) {
-    r.field5 = obj.field5;
-    r.targetObj.field5 = obj.field5;
-  }
-  if (obj.field6 !== r.field6) {
-    r.field6 = obj.field6;
-    r.targetObj.field6 = obj.field6;
-  }
-  if (obj.field7 !== r.field7) {
-    r.field7 = obj.field7;
-    r.targetObj.field7 = obj.field7;
-  }
-  if (obj.field8 !== r.field8) {
-    r.field8 = obj.field8;
-    r.targetObj.field8 = obj.field8;
-  }
-  if (obj.field9 !== r.field9) {
-    r.field9 = obj.field9;
-    r.targetObj.field9 = obj.field9;
-  }
-}
-
-function runBaselineChangeDetection(baselineHead) {
-  var current = baselineHead;
-  while (isPresent(current)) {
-    checkBaselineRow(current);
-    current = current.next;
-  }
-}
-
-function runBaselineReads(baselineHead, numberOfRuns) {
-  for (var i = 0; i < numberOfRuns; ++i) {
-    runBaselineChangeDetection(baselineHead);
-  }
-}
-
-function runBaselineWrites(baselineHead, numberOfRuns, object) {
-  for (var i = 0; i < numberOfRuns; ++i) {
-    changeObject(object);
-    runBaselineChangeDetection(baselineHead);
-  }
-}
-
-
-
-// ---- CHANGE DETECTION
-
-function setUpChangeDetection(changeDetection: ChangeDetection, iterations, object) {
-  var dispatcher = new DummyDispatcher();
-  var parser = new Parser(new Lexer());
-
-  var parentProto = changeDetection.createProtoChangeDetector(
-      new ChangeDetectorDefinition('parent', null, [], [], []));
-  var parentCd = parentProto.instantiate(dispatcher);
-
-  var directiveRecord = new DirectiveRecord({directiveIndex: new DirectiveIndex(0, 0)});
-  var bindings = [
-    BindingRecord.createForDirective(parser.parseBinding('field0', null), "field0",
-                                     reflector.setter("field0"), directiveRecord),
-    BindingRecord.createForDirective(parser.parseBinding('field1', null), "field1",
-                                     reflector.setter("field1"), directiveRecord),
-    BindingRecord.createForDirective(parser.parseBinding('field2', null), "field2",
-                                     reflector.setter("field2"), directiveRecord),
-    BindingRecord.createForDirective(parser.parseBinding('field3', null), "field3",
-                                     reflector.setter("field3"), directiveRecord),
-    BindingRecord.createForDirective(parser.parseBinding('field4', null), "field4",
-                                     reflector.setter("field4"), directiveRecord),
-    BindingRecord.createForDirective(parser.parseBinding('field5', null), "field5",
-                                     reflector.setter("field5"), directiveRecord),
-    BindingRecord.createForDirective(parser.parseBinding('field6', null), "field6",
-                                     reflector.setter("field6"), directiveRecord),
-    BindingRecord.createForDirective(parser.parseBinding('field7', null), "field7",
-                                     reflector.setter("field7"), directiveRecord),
-    BindingRecord.createForDirective(parser.parseBinding('field8', null), "field8",
-                                     reflector.setter("field8"), directiveRecord),
-    BindingRecord.createForDirective(parser.parseBinding('field9', null), "field9",
-                                     reflector.setter("field9"), directiveRecord)
-  ];
-
-  var proto = changeDetection.createProtoChangeDetector(
-      new ChangeDetectorDefinition("proto", null, [], bindings, [directiveRecord]));
-
-  var targetObj = new Obj();
-  parentCd.hydrate(object, null, new FakeDirectives(targetObj));
-  for (var i = 0; i < iterations; ++i) {
-    var cd = proto.instantiate(dispatcher);
-    cd.hydrate(object, null, new FakeDirectives(targetObj));
-    parentCd.addChild(cd);
-  }
-  return parentCd;
-}
-
-function runChangeDetectionReads(changeDetector, numberOfRuns) {
-  for (var i = 0; i < numberOfRuns; ++i) {
-    changeDetector.detectChanges();
-  }
-}
-
-function runChangeDetectionWrites(changeDetector, numberOfRuns, object) {
-  for (var i = 0; i < numberOfRuns; ++i) {
-    changeObject(object);
-    changeDetector.detectChanges();
-  }
-}
-
-
-
-export function main() {
-  BrowserDomAdapter.makeCurrent();
-  var numberOfChecks = getIntParameter('numberOfChecks');
-  var numberOfRuns = getIntParameter('iterations');
-
-  var numberOfChecksPerDetector = 10;
-  var numberOfDetectors = numberOfChecks / numberOfChecksPerDetector / numberOfRuns;
-
-  setUpReflector();
-  var object = createObject()
-
-      // -- BASELINE
-      var baselineHead = setUpBaseline(numberOfDetectors, object);
-
-  runBaselineReads(baselineHead, 1);  // warmup
-
-  bindAction('#baselineChangeDetectionReads',
-             () => microBenchmark('detectChangesAvg', numberOfRuns,
-                                  () => runBaselineReads(baselineHead, numberOfRuns)));
-
-  bindAction('#baselineChangeDetectionWrites',
-             () => microBenchmark('detectChangesAvg', numberOfRuns,
-                                  () => runBaselineWrites(baselineHead, numberOfRuns, object)));
-
-
-
-  // -- DYNAMIC
-  var ng2DynamicChangeDetector =
-      setUpChangeDetection(new DynamicChangeDetection(null), numberOfDetectors, object);
-
-  runChangeDetectionReads(ng2DynamicChangeDetector, 1);  // warmup
-
-  bindAction(
-      '#ng2ChangeDetectionDynamicReads',
-      () => microBenchmark('detectChangesAvg', numberOfRuns,
-                           () => runChangeDetectionReads(ng2DynamicChangeDetector, numberOfRuns)));
-
-  bindAction('#ng2ChangeDetectionDynamicWrites',
-             () => microBenchmark(
-                 'detectChangesAvg', numberOfRuns,
-                 () => runChangeDetectionWrites(ng2DynamicChangeDetector, numberOfRuns, object)));
-
-
-
-  // -- JIT
-  // Reenable when we have transformers for Dart
-  if (isJsObject({})) {
-    var ng2JitChangeDetector =
-        setUpChangeDetection(new JitChangeDetection(null), numberOfDetectors, object);
-
-    runChangeDetectionReads(ng2JitChangeDetector, 1);  // warmup
-
-    bindAction(
-        '#ng2ChangeDetectionJitReads',
-        () => microBenchmark('detectChangesAvg', numberOfRuns,
-                             () => runChangeDetectionReads(ng2JitChangeDetector, numberOfRuns)));
-
-    bindAction('#ng2ChangeDetectionJitWrites',
-               () => microBenchmark(
-                   'detectChangesAvg', numberOfRuns,
-                   () => runChangeDetectionWrites(ng2JitChangeDetector, numberOfRuns, object)));
-  } else {
-    bindAction('#ng2ChangeDetectionJitReads', () => {});
-    bindAction('#ng2ChangeDetectionJitWrites', () => {});
-  }
-}
-
-class FakeDirectives {
-  targetObj: Obj;
-
-  constructor(targetObj) { this.targetObj = targetObj; }
-
-  getDirectiveFor(record) { return this.targetObj; }
-}
-
-class DummyDispatcher implements ChangeDispatcher {
-  notifyOnBinding(bindingRecord, newValue) { throw "Should not be used"; }
-  notifyOnAllChangesDone() {}
-}
diff --git a/modules/benchmarks/src/compiler/compiler_benchmark.ts b/modules/benchmarks/src/compiler/compiler_benchmark.ts
deleted file mode 100644
index fa56250b0e84..000000000000
--- a/modules/benchmarks/src/compiler/compiler_benchmark.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-import {PromiseWrapper} from 'angular2/src/facade/async';
-import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
-import {DateWrapper, Type, print} from 'angular2/src/facade/lang';
-import {
-  NativeShadowDomStrategy
-} from 'angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy';
-
-import {Parser, Lexer, DynamicChangeDetection} from 'angular2/change_detection';
-
-import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
-import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
-
-import * as viewModule from 'angular2/src/core/annotations_impl/view';
-import {Component, Directive, View} from 'angular2/angular2';
-import {ViewLoader} from 'angular2/src/render/dom/compiler/view_loader';
-import {ViewResolver} from 'angular2/src/core/compiler/view_resolver';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {AppRootUrl} from 'angular2/src/services/app_root_url';
-import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
-
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-
-import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
-import * as rc from 'angular2/src/render/dom/compiler/compiler';
-
-export function main() {
-  BrowserDomAdapter.makeCurrent();
-  var count = getIntParameter('elements');
-
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  var reader = new DirectiveResolver();
-  var cache = new CompilerCache();
-  var viewResolver = new MultipleViewResolver(
-      count, [BenchmarkComponentNoBindings, BenchmarkComponentWithBindings]);
-  var urlResolver = new UrlResolver();
-  var shadowDomStrategy = new NativeShadowDomStrategy();
-  var renderCompiler = new rc.DefaultDomCompiler(new Parser(new Lexer()), shadowDomStrategy,
-                                                 new ViewLoader(null, null, null));
-  var compiler = new Compiler(
-      reader, cache, viewResolver, new ComponentUrlMapper(), urlResolver, renderCompiler,
-      new ProtoViewFactory(new DynamicChangeDetection(null)), new FakeAppRootUrl());
-
-  function measureWrapper(func, desc) {
-    return function() {
-      var begin = DateWrapper.now();
-      print(`[${desc}] Begin...`);
-      var onSuccess = function(_) {
-        var elapsedMs = DateWrapper.toMillis(DateWrapper.now()) - DateWrapper.toMillis(begin);
-        print(`[${desc}] ...done, took ${elapsedMs} ms`);
-      };
-      PromiseWrapper.then(func(), onSuccess, null);
-    };
-  }
-
-  function compileNoBindings() {
-    cache.clear();
-    return compiler.compileInHost(BenchmarkComponentNoBindings);
-  }
-
-  function compileWithBindings() {
-    cache.clear();
-    return compiler.compileInHost(BenchmarkComponentWithBindings);
-  }
-
-  bindAction('#compileNoBindings', measureWrapper(compileNoBindings, 'No Bindings'));
-  bindAction('#compileWithBindings', measureWrapper(compileWithBindings, 'With Bindings'));
-}
-
-@Directive({selector: '[dir0]', properties: ['prop: attr0']})
-class Dir0 {
-}
-
-@Directive({selector: '[dir1]', properties: ['prop: attr1']})
-class Dir1 {
-  constructor(dir0: Dir0) {}
-}
-
-@Directive({selector: '[dir2]', properties: ['prop: attr2']})
-class Dir2 {
-  constructor(dir1: Dir1) {}
-}
-
-@Directive({selector: '[dir3]', properties: ['prop: attr3']})
-class Dir3 {
-  constructor(dir2: Dir2) {}
-}
-
-@Directive({selector: '[dir4]', properties: ['prop: attr4']})
-class Dir4 {
-  constructor(dir3: Dir3) {}
-}
-
-class MultipleViewResolver extends ViewResolver {
-  _multiple: number;
-  _cache: Map<any, any>;
-
-  constructor(multiple: number, components: List<Type>) {
-    super();
-    this._multiple = multiple;
-    this._cache = new Map();
-    ListWrapper.forEach(components, (c) => this._warmUp(c));
-  }
-
-  _warmUp(component: Type) {
-    var view = super.resolve(component);
-    var multiplier = ListWrapper.createFixedSize(this._multiple);
-    for (var i = 0; i < this._multiple; ++i) {
-      multiplier[i] = view.template;
-    }
-    this._cache.set(component, ListWrapper.join(multiplier, ''));
-  }
-
-  resolve(component: Type): viewModule.View {
-    var view = super.resolve(component);
-    var myView = new viewModule.View(
-        {template:<string>this._cache.get(component), directives: view.directives});
-    return myView;
-  }
-}
-
-@Component({selector: 'cmp-nobind'})
-@View({
-  directives: [Dir0, Dir1, Dir2, Dir3, Dir4],
-  template: `
-<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
-  <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
-    <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
-      <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
-        <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
-        </div>
-      </div>
-    </div>
-  </div>
-</div>`
-})
-class BenchmarkComponentNoBindings {
-}
-
-@Component({selector: 'cmp-withbind'})
-@View({
-  directives: [Dir0, Dir1, Dir2, Dir3, Dir4],
-  template: `
-<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
-  {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
-  <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
-    {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
-    <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
-      {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
-      <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
-        {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
-        <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
-          {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
-        </div>
-      </div>
-    </div>
-  </div>
-</div>`
-})
-class BenchmarkComponentWithBindings {
-}
-
-class FakeAppRootUrl extends AppRootUrl {
-  get value() { return ''; }
-}
diff --git a/modules/benchmarks/src/compiler/selector_benchmark.ts b/modules/benchmarks/src/compiler/selector_benchmark.ts
deleted file mode 100644
index eb2ee08154df..000000000000
--- a/modules/benchmarks/src/compiler/selector_benchmark.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import {SelectorMatcher} from "angular2/src/render/dom/compiler/selector";
-import {CssSelector} from "angular2/src/render/dom/compiler/selector";
-import {StringWrapper, Math} from 'angular2/src/facade/lang';
-import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-
-export function main() {
-  BrowserDomAdapter.makeCurrent();
-  var count = getIntParameter('selectors');
-
-  var fixedMatcher;
-  var fixedSelectorStrings = [];
-  var fixedSelectors = [];
-  for (var i = 0; i < count; i++) {
-    fixedSelectorStrings.push(randomSelector());
-  }
-  for (var i = 0; i < count; i++) {
-    fixedSelectors.push(CssSelector.parse(fixedSelectorStrings[i]));
-  }
-  fixedMatcher = new SelectorMatcher();
-  for (var i = 0; i < count; i++) {
-    fixedMatcher.addSelectables(fixedSelectors[i], i);
-  }
-
-  function parse() {
-    var result = [];
-    for (var i = 0; i < count; i++) {
-      result.push(CssSelector.parse(fixedSelectorStrings[i]));
-    }
-    return result;
-  }
-
-  function addSelectable() {
-    var matcher = new SelectorMatcher();
-    for (var i = 0; i < count; i++) {
-      matcher.addSelectables(fixedSelectors[i], i);
-    }
-    return matcher;
-  }
-
-  function match() {
-    var matchCount = 0;
-    for (var i = 0; i < count; i++) {
-      fixedMatcher.match(fixedSelectors[i][0], (selector, selected) => { matchCount += selected; });
-    }
-    return matchCount;
-  }
-
-  bindAction('#parse', parse);
-  bindAction('#addSelectable', addSelectable);
-  bindAction('#match', match);
-}
-
-function randomSelector() {
-  var res = randomStr(5);
-  for (var i = 0; i < 3; i++) {
-    res += '.' + randomStr(5);
-  }
-  for (var i = 0; i < 3; i++) {
-    res += '[' + randomStr(3) + '=' + randomStr(6) + ']';
-  }
-  return res;
-}
-
-function randomStr(len) {
-  var s = '';
-  while (s.length < len) {
-    s += randomChar();
-  }
-  return s;
-}
-
-function randomChar() {
-  var n = randomNum(62);
-  if (n < 10) return n.toString();                        // 1-10
-  if (n < 36) return StringWrapper.fromCharCode(n + 55);  // A-Z
-  return StringWrapper.fromCharCode(n + 61);              // a-z
-}
-
-function randomNum(max) {
-  return Math.floor(Math.random() * max);
-}
diff --git a/modules/benchmarks/src/costs/index.ts b/modules/benchmarks/src/costs/index.ts
deleted file mode 100644
index c5ab478316b8..000000000000
--- a/modules/benchmarks/src/costs/index.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import {
-  bootstrap,
-  Component,
-  Directive,
-  DynamicComponentLoader,
-  ElementRef,
-  View
-} from 'angular2/angular2';
-import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-import {NgIf, NgFor} from 'angular2/directives';
-
-var testList = null;
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  var size = getIntParameter('size');
-  testList = ListWrapper.createFixedSize(size);
-
-  bootstrap(AppComponent)
-      .then((ref) => {
-        var injector = ref.injector;
-        var app: AppComponent = ref.hostComponent;
-        var lifeCycle = injector.get(LifeCycle);
-
-        bindAction('#reset', function() {
-          app.reset();
-          lifeCycle.tick();
-        });
-
-        // Baseline (plain components)
-        bindAction('#createPlainComponents', function() {
-          app.createPlainComponents();
-          lifeCycle.tick();
-        });
-
-        // Components with decorators
-        bindAction('#createComponentsWithDirectives', function() {
-          app.createComponentsWithDirectives();
-          lifeCycle.tick();
-        });
-
-        // Components with decorators
-        bindAction('#createDynamicComponents', function() {
-          app.createDynamicComponents();
-          lifeCycle.tick();
-        });
-      });
-}
-
-
-@Component({selector: 'dummy'})
-@View({template: `<div></div>`})
-class DummyComponent {
-}
-
-@Directive({selector: '[dummy-decorator]'})
-class DummyDirective {
-}
-
-@Directive({selector: 'dynamic-dummy'})
-class DynamicDummy {
-  constructor(loader: DynamicComponentLoader, location: ElementRef) {
-    loader.loadNextToLocation(DummyComponent, location);
-  }
-}
-
-@Component({selector: 'app'})
-@View({
-  directives: [NgIf, NgFor, DummyComponent, DummyDirective, DynamicDummy],
-  template: `
-    <div *ng-if="testingPlainComponents">
-      <dummy *ng-for="#i of list"></dummy>
-    </div>
-
-    <div *ng-if="testingWithDirectives">
-      <dummy dummy-decorator *ng-for="#i of list"></dummy>
-    </div>
-
-    <div *ng-if="testingDynamicComponents">
-      <dynamic-dummy *ng-for="#i of list"></dynamic-dummy>
-    </div>
-  `
-})
-class AppComponent {
-  list: List<any>;
-  testingPlainComponents: boolean;
-  testingWithDirectives: boolean;
-  testingDynamicComponents: boolean;
-
-  constructor() { this.reset(); }
-
-  reset(): void {
-    this.list = [];
-    this.testingPlainComponents = false;
-    this.testingWithDirectives = false;
-    this.testingDynamicComponents = false;
-  }
-
-  createPlainComponents(): void {
-    this.list = testList;
-    this.testingPlainComponents = true;
-  }
-
-  createComponentsWithDirectives(): void {
-    this.list = testList;
-    this.testingWithDirectives = true;
-  }
-
-  createDynamicComponents(): void {
-    this.list = testList;
-    this.testingDynamicComponents = true;
-  }
-}
diff --git a/modules/benchmarks/src/di/di_benchmark.ts b/modules/benchmarks/src/di/di_benchmark.ts
deleted file mode 100644
index b8bcdace262d..000000000000
--- a/modules/benchmarks/src/di/di_benchmark.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import {Injectable, Injector, Key, bind} from "angular2/di";
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {getIntParameter, bindAction, microBenchmark} from 'angular2/src/test_lib/benchmark_util';
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-
-var count = 0;
-
-function setupReflector() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-}
-
-export function main() {
-  BrowserDomAdapter.makeCurrent();
-  var iterations = getIntParameter('iterations');
-
-  setupReflector();
-  var bindings = [A, B, C, D, E];
-  var injector = Injector.resolveAndCreate(bindings);
-
-  var D_KEY = Key.get(D);
-  var E_KEY = Key.get(E);
-  var childInjector = injector.resolveAndCreateChild([])
-                          .resolveAndCreateChild([])
-                          .resolveAndCreateChild([])
-                          .resolveAndCreateChild([])
-                          .resolveAndCreateChild([]);
-
-  var variousBindings = [A, bind(B).toClass(C), [D, [E]], bind(F).toValue(6)];
-
-  var variousBindingsResolved = Injector.resolve(variousBindings);
-
-  function getByToken() {
-    for (var i = 0; i < iterations; ++i) {
-      injector.get(D);
-      injector.get(E);
-    }
-  }
-  function getByKey() {
-    for (var i = 0; i < iterations; ++i) {
-      injector.get(D_KEY);
-      injector.get(E_KEY);
-    }
-  }
-
-  function getChild() {
-    for (var i = 0; i < iterations; ++i) {
-      childInjector.get(D);
-      childInjector.get(E);
-    }
-  }
-
-  function instantiate() {
-    for (var i = 0; i < iterations; ++i) {
-      var child = injector.resolveAndCreateChild([E]);
-      child.get(E);
-    }
-  }
-
-  /**
-   * Creates an injector with a variety of binding types.
-   */
-  function createVariety() {
-    for (var i = 0; i < iterations; ++i) {
-      Injector.resolveAndCreate(variousBindings);
-    }
-  }
-
-  /**
-   * Same as [createVariety] but resolves bindings ahead of time.
-   */
-  function createVarietyResolved() {
-    for (var i = 0; i < iterations; ++i) {
-      Injector.fromResolvedBindings(variousBindingsResolved);
-    }
-  }
-
-  bindAction('#getByToken', () => microBenchmark('injectAvg', iterations, getByToken));
-  bindAction('#getByKey', () => microBenchmark('injectAvg', iterations, getByKey));
-  bindAction('#getChild', () => microBenchmark('injectAvg', iterations, getChild));
-  bindAction('#instantiate', () => microBenchmark('injectAvg', iterations, instantiate));
-  bindAction('#createVariety', () => microBenchmark('injectAvg', iterations, createVariety));
-  bindAction('#createVarietyResolved',
-             () => microBenchmark('injectAvg', iterations, createVarietyResolved));
-}
-
-
-
-@Injectable()
-class A {
-  constructor() { count++; }
-}
-
-@Injectable()
-class B {
-  constructor(a: A) { count++; }
-}
-
-@Injectable()
-class C {
-  constructor(b: B) { count++; }
-}
-
-@Injectable()
-class D {
-  constructor(c: C, b: B) { count++; }
-}
-
-@Injectable()
-class E {
-  constructor(d: D, c: C) { count++; }
-}
-
-@Injectable()
-class F {
-  constructor(e: E, d: D) { count++; }
-}
diff --git a/modules/benchmarks/src/element_injector/element_injector_benchmark.html b/modules/benchmarks/src/element_injector/element_injector_benchmark.html
deleted file mode 100644
index 409d5fb7a01c..000000000000
--- a/modules/benchmarks/src/element_injector/element_injector_benchmark.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!doctype html>
-<html>
-<body>
-
-<h2>Params</h2>
-<form>
-  Iterations:
-  <input type="number" name="iterations" placeholder="iterations" value="20000">
-  <br>
-  <button>Apply</button>
-</form>
-
-<h2>Actions</h2>
-<p>
-<button id="instantiate">instantiate</button>
-<button id="hydrate">hydrate</button>
-</p>
-
-$SCRIPTS$
-</body>
-</html>
diff --git a/modules/benchmarks/src/element_injector/element_injector_benchmark.ts b/modules/benchmarks/src/element_injector/element_injector_benchmark.ts
deleted file mode 100644
index 19dc4beaee73..000000000000
--- a/modules/benchmarks/src/element_injector/element_injector_benchmark.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {Injectable, Injector} from 'angular2/di';
-import {ProtoElementInjector, DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
-import {getIntParameter, bindAction, microBenchmark} from 'angular2/src/test_lib/benchmark_util';
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-
-var count = 0;
-
-export function main() {
-  BrowserDomAdapter.makeCurrent();
-  var iterations = getIntParameter('iterations');
-
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  var bindings = [
-    DirectiveBinding.createFromType(A, null),
-    DirectiveBinding.createFromType(B, null),
-    DirectiveBinding.createFromType(C, null)
-  ];
-  var proto = ProtoElementInjector.create(null, 0, bindings, false, 0, null);
-  var elementInjector = proto.instantiate(null);
-
-  function instantiate() {
-    for (var i = 0; i < iterations; ++i) {
-      var ei = proto.instantiate(null);
-      ei.hydrate(null, null, null);
-    }
-  }
-
-  function hydrate() {
-    for (var i = 0; i < iterations; ++i) {
-      elementInjector.dehydrate();
-      elementInjector.hydrate(null, null, null);
-    }
-  }
-
-  bindAction('#instantiate', () => microBenchmark('instantiateAvg', iterations, instantiate));
-  bindAction('#hydrate', () => microBenchmark('instantiateAvg', iterations, hydrate));
-}
-
-@Injectable()
-class A {
-  constructor() { count++; }
-}
-
-@Injectable()
-class B {
-  constructor() { count++; }
-}
-
-@Injectable()
-class C {
-  constructor(a: A, b: B) { count++; }
-}
diff --git a/modules/benchmarks/src/index.html b/modules/benchmarks/src/index.html
deleted file mode 100644
index 74df5f249b24..000000000000
--- a/modules/benchmarks/src/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!doctype html>
-<html>
-<body>
-  <ul>
-    <li>
-      <a href="di/di_benchmark.html">DI benchmark</a>
-    </li>
-    <li>
-      <a href="change_detection/change_detection_benchmark.html">Change detection benchmark</a>
-    </li>
-    <li>
-      <a href="compiler/selector_benchmark.html">Selector benchmark</a>
-    </li>
-    <li>
-      <a href="compiler/compiler_benchmark.html">Compiler benchmark</a>
-    </li>
-    <li>
-      <a href="element_injector/element_injector_benchmark.html">Element injector benchmark</a>
-    </li>
-    <li>
-      <a href="tree/tree_benchmark.html">Tree benchmark</a>
-    </li>
-    <li>
-      <a href="naive_infinite_scroll/index.html">Naive infinite scroll benchmark</a>
-    </li>
-    <li>
-      <a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
-    </li>
-    <li>
-      <a href="costs/index.html">Benchmarks measuring costs of things</a>
-    </li>
-  </ul>
-</body>
-</html>
diff --git a/modules/benchmarks/src/largeform/README.md b/modules/benchmarks/src/largeform/README.md
new file mode 100644
index 000000000000..152fc1bba9dc
--- /dev/null
+++ b/modules/benchmarks/src/largeform/README.md
@@ -0,0 +1,7 @@
+# Large Form Benchmark
+
+Purpose:
+
+- Track generated file size for a big form
+- Track time for creation / destruction of form widgets,
+  as they are more complex (e.g. include event listeners, host bindings, ...)
diff --git a/modules/benchmarks/src/largeform/ng2/app.ts b/modules/benchmarks/src/largeform/ng2/app.ts
new file mode 100644
index 000000000000..24631d938937
--- /dev/null
+++ b/modules/benchmarks/src/largeform/ng2/app.ts
@@ -0,0 +1,91 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+
+@Component({
+  selector: 'app',
+  template: `<form *ngFor="let copy of copies">
+<input type="text" [(ngModel)]="values[0]" name="value0">
+<input type="text" [(ngModel)]="values[1]" name="value1">
+<input type="text" [(ngModel)]="values[2]" name="value2">
+<input type="text" [(ngModel)]="values[3]" name="value3">
+<input type="text" [(ngModel)]="values[4]" name="value4">
+<input type="text" [(ngModel)]="values[5]" name="value5">
+<input type="text" [(ngModel)]="values[6]" name="value6">
+<input type="text" [(ngModel)]="values[7]" name="value7">
+<input type="text" [(ngModel)]="values[8]" name="value8">
+<input type="text" [(ngModel)]="values[9]" name="value9">
+<input type="text" [(ngModel)]="values[10]" name="value10">
+<input type="text" [(ngModel)]="values[11]" name="value11">
+<input type="text" [(ngModel)]="values[12]" name="value12">
+<input type="text" [(ngModel)]="values[13]" name="value13">
+<input type="text" [(ngModel)]="values[14]" name="value14">
+<input type="text" [(ngModel)]="values[15]" name="value15">
+<input type="text" [(ngModel)]="values[16]" name="value16">
+<input type="text" [(ngModel)]="values[17]" name="value17">
+<input type="text" [(ngModel)]="values[18]" name="value18">
+<input type="text" [(ngModel)]="values[19]" name="value19">
+<input type="text" [(ngModel)]="values[20]" name="value20">
+<input type="text" [(ngModel)]="values[21]" name="value21">
+<input type="text" [(ngModel)]="values[22]" name="value22">
+<input type="text" [(ngModel)]="values[23]" name="value23">
+<input type="text" [(ngModel)]="values[24]" name="value24">
+<input type="text" [(ngModel)]="values[25]" name="value25">
+<input type="text" [(ngModel)]="values[26]" name="value26">
+<input type="text" [(ngModel)]="values[27]" name="value27">
+<input type="text" [(ngModel)]="values[28]" name="value28">
+<input type="text" [(ngModel)]="values[29]" name="value29">
+<input type="text" [(ngModel)]="values[30]" name="value30">
+<input type="text" [(ngModel)]="values[31]" name="value31">
+<input type="text" [(ngModel)]="values[32]" name="value32">
+<input type="text" [(ngModel)]="values[33]" name="value33">
+<input type="text" [(ngModel)]="values[34]" name="value34">
+<input type="text" [(ngModel)]="values[35]" name="value35">
+<input type="text" [(ngModel)]="values[36]" name="value36">
+<input type="text" [(ngModel)]="values[37]" name="value37">
+<input type="text" [(ngModel)]="values[38]" name="value38">
+<input type="text" [(ngModel)]="values[39]" name="value39">
+<input type="text" [(ngModel)]="values[40]" name="value40">
+<input type="text" [(ngModel)]="values[41]" name="value41">
+<input type="text" [(ngModel)]="values[42]" name="value42">
+<input type="text" [(ngModel)]="values[43]" name="value43">
+<input type="text" [(ngModel)]="values[44]" name="value44">
+<input type="text" [(ngModel)]="values[45]" name="value45">
+<input type="text" [(ngModel)]="values[46]" name="value46">
+<input type="text" [(ngModel)]="values[47]" name="value47">
+<input type="text" [(ngModel)]="values[48]" name="value48">
+<input type="text" [(ngModel)]="values[49]" name="value49">
+</form>`
+})
+export class AppComponent {
+  copies: number[] = [];
+  values: string[] = [];
+  constructor() {
+    for (let i = 0; i < 50; i++) {
+      this.values[i] = `someValue${i}`;
+    }
+  }
+
+  setCopies(count: number) {
+    this.copies = [];
+    for (let i = 0; i < count; i++) {
+      this.copies.push(i);
+    }
+  }
+}
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  bootstrap: [AppComponent],
+  declarations: [AppComponent]
+})
+export class AppModule {
+}
diff --git a/modules/benchmarks/src/largeform/ng2/index.html b/modules/benchmarks/src/largeform/ng2/index.html
new file mode 100644
index 000000000000..02796b44c6a8
--- /dev/null
+++ b/modules/benchmarks/src/largeform/ng2/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<body>
+  <h2>Params</h2>
+  <form>
+    Copies:
+    <input type="number" name="copies" placeholder="copies" value="8">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Ng2 Large Form Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <app id="root">Loading...</app>
+  </div>
+
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
diff --git a/modules/benchmarks/src/largeform/ng2/index.ts b/modules/benchmarks/src/largeform/ng2/index.ts
new file mode 100644
index 000000000000..d63010672933
--- /dev/null
+++ b/modules/benchmarks/src/largeform/ng2/index.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {AppModule} from './app';
+import {init} from './init';
+
+export function main() {
+  enableProdMode();
+  platformBrowserDynamic().bootstrapModule(AppModule).then(init);
+}
diff --git a/modules/benchmarks/src/largeform/ng2/index_aot.ts b/modules/benchmarks/src/largeform/ng2/index_aot.ts
new file mode 100644
index 000000000000..72cde6fe6115
--- /dev/null
+++ b/modules/benchmarks/src/largeform/ng2/index_aot.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import {AppModuleNgFactory} from './app.ngfactory';
+import {init} from './init';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(init);
diff --git a/modules/benchmarks/src/largeform/ng2/init.ts b/modules/benchmarks/src/largeform/ng2/init.ts
new file mode 100644
index 000000000000..0fa651293c1d
--- /dev/null
+++ b/modules/benchmarks/src/largeform/ng2/init.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {ApplicationRef, NgModuleRef} from '@angular/core';
+
+import {bindAction, getIntParameter, profile} from '../../util';
+
+import {AppComponent, AppModule} from './app';
+
+const copies = getIntParameter('copies');
+
+export function init(moduleRef: NgModuleRef<AppModule>) {
+  let app: AppComponent;
+  let appRef: ApplicationRef;
+
+  function destroyDom() {
+    app.setCopies(0);
+    appRef.tick();
+  }
+
+  function createDom() {
+    app.setCopies(copies);
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  const injector = moduleRef.injector;
+  appRef = injector.get(ApplicationRef);
+
+  app = appRef.components[0].instance;
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}
diff --git a/modules/benchmarks/src/largetable/BUILD.bazel b/modules/benchmarks/src/largetable/BUILD.bazel
new file mode 100644
index 000000000000..8a6e269adb85
--- /dev/null
+++ b/modules/benchmarks/src/largetable/BUILD.bazel
@@ -0,0 +1,27 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "util_lib",
+    srcs = [
+        "util.ts",
+    ],
+    deps = [
+        "//modules/benchmarks/src:util_lib",
+        "//packages:types",
+        "//packages/core",
+    ],
+)
+
+ts_library(
+    name = "perf_lib",
+    testonly = 1,
+    srcs = [
+        "largetable_perf.spec.ts",
+    ],
+    deps = [
+        "//modules/e2e_util:lib",
+        "//packages:types",
+    ],
+)
diff --git a/modules/benchmarks/src/largetable/baseline/index.html b/modules/benchmarks/src/largetable/baseline/index.html
new file mode 100644
index 000000000000..6c922ffe496b
--- /dev/null
+++ b/modules/benchmarks/src/largetable/baseline/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Cols:
+    <input type="number" name="cols" placeholder="cols" value="40">
+    <br>
+    Rows:
+    <input type="number" name="rows" placeholder="rows" value="200">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Baseline Largetable Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <largetable id="root">Loading...</largetable>
+  </div>
+
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_plain.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/modules/benchmarks/src/largetable/baseline/index.ts b/modules/benchmarks/src/largetable/baseline/index.ts
new file mode 100644
index 000000000000..c8e421d44c02
--- /dev/null
+++ b/modules/benchmarks/src/largetable/baseline/index.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
+ */
+
+import {bindAction, profile} from '../../util';
+import {buildTable, emptyTable} from '../util';
+import {TableComponent} from './table';
+
+let table: TableComponent;
+
+function destroyDom() {
+  table.data = emptyTable;
+}
+
+function createDom() {
+  table.data = buildTable();
+}
+
+function noop() {}
+
+function init() {
+  const rootEl = document.querySelector('largetable');
+  rootEl.textContent = '';
+  table = new TableComponent(rootEl);
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}
+
+init();
diff --git a/modules/benchmarks/src/largetable/baseline/table.ts b/modules/benchmarks/src/largetable/baseline/table.ts
new file mode 100644
index 000000000000..4950e5b2d724
--- /dev/null
+++ b/modules/benchmarks/src/largetable/baseline/table.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 {TableCell} from '../util';
+
+export class TableComponent {
+  private _renderCells: any[][];
+  constructor(private _rootEl: any) {}
+
+  set data(data: TableCell[][]) {
+    if (data.length === 0) {
+      this._destroy();
+    } else if (this._renderCells) {
+      this._update(data);
+    } else {
+      this._create(data);
+    }
+  }
+
+  private _destroy() {
+    while (this._rootEl.lastChild) {
+      this._rootEl.lastChild.remove();
+    }
+    this._renderCells = null;
+  }
+
+  private _update(data: TableCell[][]) {
+    for (let r = 0; r < data.length; r++) {
+      const dataRow = data[r];
+      const renderRow = this._renderCells[r];
+      for (let c = 0; c < dataRow.length; c++) {
+        const dataCell = dataRow[c];
+        const renderCell = renderRow[c];
+        this._updateCell(renderCell, dataCell);
+      }
+    }
+  }
+
+  private _updateCell(renderCell: any, dataCell: TableCell) {
+    renderCell.textContent = dataCell.value;
+  }
+
+  private _create(data: TableCell[][]) {
+    const table = document.createElement('table');
+    this._rootEl.appendChild(table);
+    const tbody = document.createElement('tbody');
+    table.appendChild(tbody);
+    this._renderCells = new Array(data.length);
+    for (let r = 0; r < data.length; r++) {
+      const dataRow = data[r];
+      const tr = document.createElement('tr');
+      tbody.appendChild(tr);
+      const renderRow = new Array(dataRow.length);
+      this._renderCells[r] = renderRow;
+      for (let c = 0; c < dataRow.length; c++) {
+        const dataCell = dataRow[c];
+        const renderCell = document.createElement('td');
+        if (r % 2 === 0) {
+          renderCell.style.backgroundColor = 'grey';
+        }
+        tr.appendChild(renderCell);
+        renderRow[c] = renderCell;
+        this._updateCell(renderCell, dataCell);
+      }
+    }
+  }
+}
diff --git a/modules/benchmarks/src/largetable/incremental_dom/index.html b/modules/benchmarks/src/largetable/incremental_dom/index.html
new file mode 100644
index 000000000000..9688ff7156bc
--- /dev/null
+++ b/modules/benchmarks/src/largetable/incremental_dom/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Cols:
+    <input type="number" name="cols" placeholder="cols" value="40">
+    <br>
+    Rows:
+    <input type="number" name="rows" placeholder="rows" value="200">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Incremental-Dom Largetable Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <largetable id="root"></largetable>
+  </div>
+
+  <script src="../../bootstrap_plain.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/modules/benchmarks/src/largetable/incremental_dom/index.ts b/modules/benchmarks/src/largetable/incremental_dom/index.ts
new file mode 100644
index 000000000000..62f48e1a831f
--- /dev/null
+++ b/modules/benchmarks/src/largetable/incremental_dom/index.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 {bindAction, profile} from '../../util';
+import {buildTable, emptyTable} from '../util';
+import {TableComponent} from './table';
+
+export function main() {
+  let table: TableComponent;
+
+  function destroyDom() { table.data = emptyTable; }
+
+  function createDom() { table.data = buildTable(); }
+
+  function noop() {}
+
+  function init() {
+    table = new TableComponent(document.querySelector('largetable'));
+
+    bindAction('#destroyDom', destroyDom);
+    bindAction('#createDom', createDom);
+
+    bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+    bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+  }
+
+  init();
+}
diff --git a/modules/benchmarks/src/largetable/incremental_dom/table.ts b/modules/benchmarks/src/largetable/incremental_dom/table.ts
new file mode 100644
index 000000000000..6abf149534fb
--- /dev/null
+++ b/modules/benchmarks/src/largetable/incremental_dom/table.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 {TableCell} from '../util';
+const {patch, elementOpen, elementClose, elementOpenStart, elementOpenEnd, attr, text} =
+    require('incremental-dom');
+
+export class TableComponent {
+  constructor(private _rootEl: any) {}
+
+  set data(data: TableCell[][]) { patch(this._rootEl, () => this._render(data)); }
+
+  private _render(data: TableCell[][]) {
+    elementOpen('table');
+    elementOpen('tbody');
+    for (let r = 0; r < data.length; r++) {
+      elementOpen('tr');
+      const row = data[r];
+      for (let c = 0; c < row.length; c++) {
+        elementOpenStart('td');
+        if (r % 2 === 0) {
+          attr('style', 'background-color: grey');
+        }
+        elementOpenEnd('td');
+        text(row[c].value);
+        elementClose('td');
+      }
+      elementClose('tr');
+    }
+    elementClose('tbody');
+    elementClose('table');
+  }
+}
diff --git a/modules/benchmarks/src/largetable/iv/index.html b/modules/benchmarks/src/largetable/iv/index.html
new file mode 100644
index 000000000000..e4423c8493f1
--- /dev/null
+++ b/modules/benchmarks/src/largetable/iv/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<body>
+
+<h2>Params</h2>
+<form>
+  Cols:
+  <input type="number" name="cols" placeholder="cols" value="40">
+  <br>
+  Rows:
+  <input type="number" name="rows" placeholder="rows" value="200">
+  <br>
+  <button>Apply</button>
+</form>
+
+<h2>IV Largetable Benchmark</h2>
+<p>
+  <button id="destroyDom">destroyDom</button>
+  <button id="createDom">createDom</button>
+  <button id="updateDomProfile">profile updateDom</button>
+  <button id="createDomProfile">profile createDom</button>
+</p>
+
+<div>
+  <largetable id="root"></largetable>
+</div>
+
+<script type="text/javascript" src="largetable.js"></script>
+
+</body>
+</html>
diff --git a/modules/benchmarks/src/largetable/iv/largetable.js b/modules/benchmarks/src/largetable/iv/largetable.js
new file mode 100644
index 000000000000..464f04acdfd5
--- /dev/null
+++ b/modules/benchmarks/src/largetable/iv/largetable.js
@@ -0,0 +1,9 @@
+/*
+ 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
+*/
+/* tslint:disable */
+// clang-format off
+function $nextRef(){return++refCount}function $el(e,n,r,t){var o={kind:"E",index:n,name:r,ref:t?++refCount:0,children:[],props:NO_PROPS,domNode:null};return e.children[e.children.length]=o,o}function $cg(e,n,r,t){var o=n.children[e];if(o&&o.index===t)return o.childChanges=null,o;var a={kind:"G",index:t,cm:1,props:{},changes:null,childChanges:null,ref:++refCount,children:[],domNode:null,parent:n,$lastChange:refreshCount,$lastRefresh:refreshCount};return r.cm?n.children[n.children.length]=a:(n.children.splice(e,0,a),addChangeInstruction(a,{kind:"CG",node:a,parent:n,position:e,nextSibling:findNextDomSibling(n,e)})),a}function $lg(e,n){addChildChanges(e,n)}function $dg(e,n,r,t){for(var o=n.children[e];o&&o.index<t;){var a={kind:"DG",node:o,parent:n,position:e,nbrOfNextSiblings:n.children.length-1-e};n.children.splice(e,1),addChangeInstruction(o,a),addChildChanges(o,r),o=n.children[e]}}function $dt(e,n,r){var t={kind:"T",index:n,value:r,ref:++refCount,domNode:null};return e.children[e.children.length]=t}function $ct(e){return 0===e?"0":e||""}function $ut(e,n,r){n.value!==e&&(n.value=e,addChangeInstruction(r,{kind:"UT",value:e,node:n}))}function renderCpt(e){var n=$iv.node;if($iv.node=e,e.cpt){var r=e.cpt;if(!(r.$node.$lastRefresh===refreshCount)&&r.shouldUpdate&&!r.shouldUpdate())return;r.render(),r.$node.$lastRefresh=refreshCount}else e.render(e.props),e.$lastRefresh=refreshCount;$iv.node=n}function $refreshTemplate(e,n,r,t){var o=$iv.node,a=$iv.renderer;refreshCount++,r.childChanges=null,$iv.node=r,$iv.renderer=e,n(t),r.$lastRefresh=refreshCount,$iv.node=o,$iv.renderer=a;var i=[];retrieveChanges(r,i),e.processChanges(i)}function retrieveChanges(e,n,r){void 0===r&&(r=!0);var t,o=e.changes;if(t=e.childChanges){for(i=0;t.length>i;i++)retrieveChanges(t[i],n,r);r&&(e.childChanges=null)}if(o&&o.length){for(var a=n.length,i=0;o.length>i;i++,a++)n[a]=o[i];r&&(e.changes=null)}}function addChangeInstruction(e,n){e.changes?e.changes.splice(e.changes.length,0,n):e.changes=[n],e.$lastChange=refreshCount}function addChildChanges(e,n){(e.changes||e.childChanges)&&(n.childChanges?n.childChanges.push(e):n.childChanges=[e],n.$lastChange=refreshCount)}function findNextDomSibling(e,n,r){void 0===r&&(r=!1);var t,o=e.children;if(n+1<o.length)return"E"===(t=o[n+1]).kind?t:"T"===t.kind?t:"G"===t.kind?findNextDomSibling(t,-1,!0):findNextDomSibling(e,n+1);if("E"===e.kind)return null;if("G"===e.kind){var a=e.parent;if(a&&a!==e)for(var i=0;a.children.length>i;i++)if(a.children[i]===e)return findNextDomSibling(a,i)}return null}function htmlRenderer(e,n,r){return new Renderer(e,n,r)}function processChanges(e,n,r){for(var t=0,o=e;t<o.length;t++){var a=o[t];if("CG"===a.kind){var i=a;if(i.parent)insertGroupContent(i.node,i.parent.domNode,i.nextSibling,r);else{var d=r.createDocFragment();createDomNode(i.node,d,r,null),n.appendChild(d),replaceDomNode(d,n,i.node)}}else if("UT"===a.kind)(c=a.node)&&c.domNode&&(c.domNode.textContent=c.value);else if("UP"===a.kind){var l=a,c=l.node,s=l.name;c&&c.domNode&&(c.domNode.namespaceURI.match(RX_HTML)?c.domNode[s]=l.value:c.domNode.setAttribute(s,l.value))}else if("DG"===a.kind){var u=a;removeGroupFromDom(u.node,!0,0===u.position&&0===u.nbrOfNextSiblings)}else if("UA"===a.kind){var h=a;h.node.domNode.setAttribute(h.name,h.value)}else if("RG"===a.kind){var m=a;removeGroupFromDom(m.oldNode,!0,0===m.position&&null===m.nextSibling),insertGroupContent(m.newNode,m.parent?m.parent.domNode:null,m.nextSibling,r)}else if("UM"===a.kind){var f=a,p=f.node.domNode;if(f.names)updateMapValue(p,f.names[0],f.names[1],f.value);else if(f.name){var v=f.value;for(var g in v)"$"!==g[0]&&v.hasOwnProperty(g)&&updateMapValue(p,f.name,g,v[g])}}else console.error("[iv html renderer] Unsupported change kind: "+a.kind)}}function updateMapValue(e,n,r,t){"style"===n?e.style[r]=t:"class"===n||"className"===n||"classList"===n?t?e.classList.add(r):e.classList.remove(r):console.error("[iv html renderer] Unsupported property map:"+n)}function insertGroupContent(e,n,r,t){var o=t.createDocFragment(),a=null;if(n&&(a=n.namespaceURI)&&a.match(RX_HTML)&&(a=null),createDomNode(e,o,t,a),n){var i=!1;r?r.domNode&&(n.insertBefore(o,r.domNode),i=!0):(n.appendChild(o),i=!0),i&&replaceDomNode(o,n,e)}}function createDomNode(e,n,r,t){if(e.domNode){var o=e.domNode;return o.parentNode&&o.parentNode.removeChild(o),void n.appendChild(o)}switch(e.kind){case"E":createElementDomNode(e,n,r,t);break;case"G":e.domNode=n,processChildNodes(e,n,r,t);break;case"T":var a=r.createTextNode(e.value);e.domNode=a,n.appendChild(a);break;case"D":e.domNode=a;break;default:console.error("[iv html renderer] Invalid node kind: "+e.kind)}}function processChildNodes(e,n,r,t){for(var o=e.children,a=o.length,i=0;a>i;i++)createDomNode(o[i],n,r,t)}function createElementDomNode(e,n,r,t){var o,a,i=e.props,d=e.atts;if(d&&d.xmlns&&(t=d.xmlns),a=t?r.createElementNS(t,e.name):r.createElement(e.name),d)for(var l in d)d.hasOwnProperty(l)&&a.setAttribute(l,d[l]);if(i)if(t&&!t.match(RX_HTML))for(var l in i)i.hasOwnProperty(l)&&a.setAttribute(l,i[l]);else for(var l in i)if(i.hasOwnProperty(l)&&void 0!==(o=i[l]))if(o&&o.$isMap)if("classList"===l){var c=[];d&&(d.class?c.push(d.class):d.className&&c.push(d.className));for(var s in o)o.hasOwnProperty(s)&&"$"!==s[0]&&o[s]&&c.push(s);c.length&&(a.className=c.join(" "))}else"style"===l&&setMapProperties(a.style,o);else o.call?"o"===l[0]&&addEvtListener(a,e,l):a[l]=o;e.domNode=a,n.appendChild(a),processChildNodes(e,a,r,t)}function setMapProperties(e,n){for(var r in n)n.hasOwnProperty(r)&&"$"!==r[0]&&(e[r]=n[r])}function addEvtListener(e,n,r){e.addEventListener(r.substring(2),function(e){n.props[r].call(n,e)})}function removeGroupFromDom(e,n,r){var t,o=e.children,a=e.domNode;if(o){var i=o.length;n&&r&&countGroupDomChildren(e)===a.childNodes.length&&(a.textContent="",n=!1);for(var d=0;i>d;d++)"G"===(t=o[d]).kind?removeGroupFromDom(t,n,!1):"T"!==t.kind&&"E"!==t.kind||n&&t.domNode&&t.domNode.parentNode===a&&a.removeChild(t.domNode)}e.domNode=null}function countGroupDomChildren(e){for(var n,r,t=0,o=e.children,a=o.length,i=0;a>i;i++)"G"===(r=(n=o[i]).kind)?t+=countGroupDomChildren(n):"D"!==r&&t++;return t}function replaceDomNode(e,n,r){if(e!==n&&r.domNode===e&&(r.domNode=n,"G"===r.kind))for(var t=r.children,o=0;t.length>o;o++)replaceDomNode(e,n,t[o])}function getIntParameter(e){return parseInt(getStringParameter(e),10)}function getStringParameter(e){for(var n,r,t=document.querySelectorAll('input[name="'+e+'"]'),o=0;o<t.length;o++){var a=(r=t[o]).type;if("radio"!=a&&"checkbox"!=a||r.checked){n=r.value;break}}if(null==n)throw new Error("Could not find and input field with name "+e);return n}function bindAction(e,n){document.querySelector(e).addEventListener("click",n)}function profile(e,n,r){return function(){window.console.profile(r);for(var t=0,o=0;o++<150;){var a=window.performance.now();e(),t+=window.performance.now()-a,n()}window.console.profileEnd(),window.console.log("Iterations: "+o+"; time: "+t/o+" ms / iteration")}}function urlParamsToForm(){for(var e,n=/(\w+)=(\w+)/g,r=decodeURIComponent(location.search);e=n.exec(r);)for(var t=e[1],o=e[2],a=document.querySelectorAll('input[name="'+t+'"]'),i=void 0,d=0;d<a.length;d++)"radio"===(i=a[d]).type||"checkbox"===i.type?i.checked=i.value===o:i.value=o}function init(){maxRow=getIntParameter("rows"),maxCol=getIntParameter("cols"),tableCreateCount=0,numberData=[],charData=[];for(var e=0;e<=maxRow;e++){var n=[];numberData.push(n);var r=[];charData.push(r);for(var t=0;t<=maxCol;t++)n.push(new TableCell(e,t,t+"/"+e)),r.push(new TableCell(e,t,charValue(t)+"/"+charValue(e)))}}function charValue(e){return String.fromCharCode("A".charCodeAt(0)+e%26)}function buildTable(){return++tableCreateCount%2?numberData:charData}function refresh(e){renderer||(renderer=htmlRenderer(document.getElementById("root"),largeTable)),renderer.refresh({data:e})}function destroyDom(){refresh(emptyTable)}function createDom(){refresh(data=buildTable())}function getColor(e){return e%2?"":"grey"}function largeTable(e){var n,r,t,o,a,i,d,l,c=$iv.node,s=e.data;n=c.cm?$el($el(c,1,"table",0),2,"tbody",1):c.children[0].children[0],d=0;for(var u=0;u<s.length;u++){r=$cg(d,n,c,3),d++,0;var h=s[u];t=r.cm?$el(r,4,"tr",1):r.children[0],1,l=0;for(var m=0;m<h.length;m++){o=$cg(l,t,r,5),l++,0;var f=h[m];o.cm?((a=$el(o,6,"td",0)).atts={style:"background-color:"+getColor(f.row)},$dt(a,7,""+$ct(f.value)),o.cm=0):(i=(a=o.children[0]).children[0],$ut(""+$ct(f.value),i,o)),$lg(o,r)}r.cm?r.cm=0:$dg(l,t,r,8),$lg(r,c)}c.cm?c.cm=0:$dg(d,n,c,8)}function noop(){}var EMPTY_PROPS={},NO_PROPS=void 0,refreshCount=0,refCount=0,$iv={node:null,renderer:null,reset:function(e){1===e?refCount=0:2===e&&(refreshCount=0)},get refreshCount(){return refreshCount}},RX_HTML=/html/i,Renderer=function(){function e(e,n,r){this.htmlElement=e,this.vdFunction=n;var t=this.vdom={kind:"G",index:0,ref:$nextRef(),cm:1,changes:null,childChanges:null,children:[],domNode:null,parent:null,$lastChange:$iv.refreshCount,$lastRefresh:$iv.refreshCount},o={kind:"CG",node:t,parent:null,position:-1,nextSibling:null};t.changes=[o],this.doc=r||{createDocFragment:function(){return document.createDocumentFragment()},createTextNode:function(e){return document.createTextNode(e)},createElement:function(e){return document.createElement(e)},createElementNS:function(e,n){return document.createElementNS(e,n)}}}return e.prototype.refresh=function(e){$refreshTemplate(this,this.vdFunction,this.vdom,e)},e.prototype.processChanges=function(e){processChanges(e,this.htmlElement,this.doc)},e}();urlParamsToForm();var TableCell=function(){return function(e,n,r){this.row=e,this.col=n,this.value=r}}(),tableCreateCount,maxRow,maxCol,numberData,charData;init();var emptyTable=[],renderer,data;bindAction("#destroyDom",destroyDom),bindAction("#createDom",createDom),bindAction("#updateDomProfile",profile(createDom,noop,"update")),bindAction("#createDomProfile",profile(createDom,destroyDom,"create"));
+// clang-format on
diff --git a/modules/benchmarks/src/largetable/largetable_benchmark.html b/modules/benchmarks/src/largetable/largetable_benchmark.html
deleted file mode 100644
index 1c49130c7f97..000000000000
--- a/modules/benchmarks/src/largetable/largetable_benchmark.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<link rel="icon" href="data:;base64,=">
-</head>
-<body>
-
-<h2>Params</h2>
-
-<div>
-  <form>
-    <div>
-      Use Viewcache:
-      <label>
-      Yes<input type="radio" name="viewcache" placeholder="use viewcache" value="true" checked="checked">
-      </label>
-      <label>
-      No<input type="radio" name="viewcache" placeholder="use viewcache" value="false">
-      </label>
-    </div>
-
-    <div>
-      rows:
-      <input type="number" name="rows" value="100">
-      columns:
-      <input type="number" name="columns" value="20">
-    </div>
-
-    <div>
-      baseline (to be used in conjuction with Baseline:createDom &amp; Baseline:destroyDom buttons):
-      <input type="radio"
-             name="benchmarkType"
-             value="baseline"
-             id="baseline">
-    </div>
-    <div>
-      ngBind (not implemented):
-      <input type="radio"
-             name="benchmarkType"
-             value="ngBind"
-             id="ngBind">
-    </div>
-    <div>
-      ngBindOnce (not implemented):
-      <input type="radio"
-             name="benchmarkType"
-             value="ngBindOnce"
-             id="ngBindOnce">
-    </div>
-    <div>
-      interpolation:
-      <input type="radio"
-             name="benchmarkType"
-             value="interpolation"
-             id="interpolation"
-             checked>
-    </div>
-    <div>
-      attribute interpolation:
-      <input type="radio"
-             name="benchmarkType"
-             value="interpolationAttr"
-             id="interpolationAttr">
-    </div>
-    <div>
-      ngBind + fnInvocation (not implemented):
-      <input type="radio"
-             name="benchmarkType"
-             value="ngBindFn"
-             id="ngBindFn">
-    </div>
-    <div>
-      interpolation + fnInvocation:
-      <input type="radio"
-             name="benchmarkType"
-             value="interpolationFn"
-             id="interpolationFn">
-    </div>
-    <div>
-      ngBind + filter (not implemented):
-      <input type="radio"
-             name="benchmarkType"
-             value="ngBindFilter"
-             id="ngBindFilter">
-    </div>
-    <div>
-      interpolation + filter (not implemented):
-      <input type="radio"
-             name="benchmarkType"
-             value="interpolationFilter"
-             id="interpolationFilter">
-    </div>
-    <button>Apply</button>
-  </form>
-</div>
-
-<h2>Angular2 largetable benchmark</h2>
-<p>
-<button id="ng2DestroyDom">destroyDom</button>
-<button id="ng2CreateDom">createDom</button>
-<button id="ng2UpdateDomProfile">profile updateDom</button>
-<button id="ng2CreateDomProfile">profile createDom</button>
-</p>
-
-<h2>Baseline largetable benchmark</h2>
-<p>
-<button id="baselineDestroyDom">destroyDom</button>
-<button id="baselineCreateDom">createDom</button>
-<button id="baselineUpdateDomProfile">profile updateDom</button>
-<button id="baselineCreateDomProfile">profile createDom</button>
-</p>
-
-<div>
-<app></app>
-</div>
-
-<div>
-<baseline></baseline>
-</div>
-
-$SCRIPTS$
-</body>
-</html>
diff --git a/modules/benchmarks/src/largetable/largetable_benchmark.ts b/modules/benchmarks/src/largetable/largetable_benchmark.ts
deleted file mode 100644
index 8e65706e6d99..000000000000
--- a/modules/benchmarks/src/largetable/largetable_benchmark.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-import {bootstrap, Component, Directive, View} from 'angular2/angular2';
-
-import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
-
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {window, document, gc} from 'angular2/src/facade/browser';
-import {
-  getIntParameter,
-  getStringParameter,
-  bindAction,
-  windowProfile,
-  windowProfileEnd
-} from 'angular2/src/test_lib/benchmark_util';
-
-import {NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/directives';
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-import {APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
-
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {bind} from 'angular2/di';
-import {Inject} from 'angular2/src/di/decorators';
-
-export const BENCHMARK_TYPE = 'LargetableComponent.benchmarkType';
-export const LARGETABLE_ROWS = 'LargetableComponent.rows';
-export const LARGETABLE_COLS = 'LargetableComponent.cols';
-
-function _createBindings() {
-  var viewCacheCapacity = getStringParameter('viewcache') == 'true' ? 10000 : 1;
-  return [
-    bind(BENCHMARK_TYPE)
-        .toValue(getStringParameter('benchmarkType')),
-    bind(LARGETABLE_ROWS).toValue(getIntParameter('rows')),
-    bind(LARGETABLE_COLS).toValue(getIntParameter('columns')),
-    bind(APP_VIEW_POOL_CAPACITY).toValue(viewCacheCapacity)
-  ];
-}
-
-var BASELINE_LARGETABLE_TEMPLATE;
-
-function setupReflector() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-
-  // TODO(kegluneq): Generate these.
-  reflector.registerGetters({
-    'benchmarktype': (o) => o.benchmarktype,
-    'switch': (o) => null,
-    'switchWhen': (o) => o.switchWhen
-  });
-  reflector.registerSetters({
-    'benchmarktype': (o, v) => o.benchmarktype = v,
-    'switch': (o, v) => null,
-    'switchWhen': (o, v) => o.switchWhen = v
-  });
-}
-
-export function main() {
-  BrowserDomAdapter.makeCurrent();
-  var totalRows = getIntParameter('rows');
-  var totalColumns = getIntParameter('columns');
-  BASELINE_LARGETABLE_TEMPLATE = DOM.createTemplate('<table></table>');
-
-  setupReflector();
-
-  var app;
-  var lifecycle;
-  var baselineRootLargetableComponent;
-
-  function ng2DestroyDom() {
-    // TODO: We need an initial value as otherwise the getter for data.value will fail
-    // --> this should be already caught in change detection!
-    app.data = null;
-    app.benchmarkType = 'none';
-    lifecycle.tick();
-  }
-
-  function profile(create, destroy, name) {
-    return function() {
-      windowProfile(name + ' w GC');
-      var duration = 0;
-      var count = 0;
-      while (count++ < 150) {
-        gc();
-        var start = window.performance.now();
-        create();
-        duration += window.performance.now() - start;
-        destroy();
-      }
-      windowProfileEnd(name + ' w GC');
-      window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
-
-      windowProfile(name + ' w/o GC');
-      duration = 0;
-      count = 0;
-      while (count++ < 150) {
-        var start = window.performance.now();
-        create();
-        duration += window.performance.now() - start;
-        destroy();
-      }
-      windowProfileEnd(name + ' w/o GC');
-      window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
-    };
-  }
-
-  function ng2CreateDom() {
-    var data = ListWrapper.createFixedSize(totalRows);
-
-    for (var i = 0; i < totalRows; i++) {
-      data[i] = ListWrapper.createFixedSize(totalColumns);
-      for (var j = 0; j < totalColumns; j++) {
-        data[i][j] = new CellData(i, j);
-      }
-    }
-    app.data = data;
-    app.benchmarkType = getStringParameter('benchmarkType');
-    lifecycle.tick();
-  }
-
-  function noop() {}
-
-  function initNg2() {
-    bootstrap(AppComponent, _createBindings())
-        .then((ref) => {
-          var injector = ref.injector;
-          app = ref.hostComponent;
-          lifecycle = injector.get(LifeCycle);
-          bindAction('#ng2DestroyDom', ng2DestroyDom);
-          bindAction('#ng2CreateDom', ng2CreateDom);
-          bindAction('#ng2UpdateDomProfile', profile(ng2CreateDom, noop, 'ng2-update'));
-          bindAction('#ng2CreateDomProfile', profile(ng2CreateDom, ng2DestroyDom, 'ng2-create'));
-        });
-  }
-
-  function baselineDestroyDom() { baselineRootLargetableComponent.update(buildTable(0, 0)); }
-
-  function baselineCreateDom() {
-    baselineRootLargetableComponent.update(buildTable(totalRows, totalColumns));
-  }
-
-  function initBaseline() {
-    baselineRootLargetableComponent = new BaseLineLargetableComponent(
-        DOM.querySelector(document, 'baseline'), getStringParameter('benchmarkType'),
-        getIntParameter('rows'), getIntParameter('columns'));
-
-    bindAction('#baselineDestroyDom', baselineDestroyDom);
-    bindAction('#baselineCreateDom', baselineCreateDom);
-
-    bindAction('#baselineUpdateDomProfile', profile(baselineCreateDom, noop, 'baseline-update'));
-    bindAction('#baselineCreateDomProfile',
-               profile(baselineCreateDom, baselineDestroyDom, 'baseline-create'));
-  }
-
-  initNg2();
-  initBaseline();
-}
-
-function buildTable(rows, columns) {
-  var tbody = DOM.createElement('tbody');
-  var template = DOM.createElement('span');
-  var i, j, row, cell;
-  DOM.appendChild(template, DOM.createElement('span'));
-  DOM.appendChild(template, DOM.createTextNode(':'));
-  DOM.appendChild(template, DOM.createElement('span'));
-  DOM.appendChild(template, DOM.createTextNode('|'));
-
-  for (i = 0; i < rows; i++) {
-    row = DOM.createElement('div');
-    DOM.appendChild(tbody, row);
-    for (j = 0; j < columns; j++) {
-      cell = DOM.clone(template);
-      DOM.appendChild(row, cell);
-      DOM.setText(cell.childNodes[0], i.toString());
-      DOM.setText(cell.childNodes[2], j.toString());
-    }
-  }
-
-  return tbody;
-}
-
-class BaseLineLargetableComponent {
-  element;
-  table;
-  benchmarkType: string;
-  rows: number;
-  columns: number;
-  constructor(element, benchmarkType, rows: number, columns: number) {
-    this.element = element;
-    this.benchmarkType = benchmarkType;
-    this.rows = rows;
-    this.columns = columns;
-    this.table = DOM.clone(BASELINE_LARGETABLE_TEMPLATE.content.firstChild);
-    var shadowRoot = DOM.createShadowRoot(this.element);
-    DOM.appendChild(shadowRoot, this.table);
-  }
-  update(tbody) {
-    var oldBody = DOM.querySelector(this.table, 'tbody');
-    if (oldBody != null) {
-      DOM.replaceChild(this.table, tbody, oldBody);
-    } else {
-      DOM.appendChild(this.table, tbody);
-    }
-  }
-}
-
-class CellData {
-  i: number;
-  j: number;
-  constructor(i, j) {
-    this.i = i;
-    this.j = j;
-  }
-
-  jFn() { return this.j; }
-
-  iFn() { return this.i; }
-}
-
-@Component({selector: 'largetable', properties: ['data', 'benchmarkType']})
-@View({
-  directives: [NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault],
-  template: `
-      <table [ng-switch]="benchmarkType">
-        <tbody template="ng-switch-when 'interpolation'">
-          <tr template="ng-for #row of data">
-            <td template="ng-for #column of row">
-              {{column.i}}:{{column.j}}|
-            </td>
-          </tr>
-        </tbody>
-        <tbody template="ng-switch-when 'interpolationAttr'">
-          <tr template="ng-for #row of data">
-            <td template="ng-for #column of row" attr.i="{{column.i}}" attr.j="{{column.j}}">
-              i,j attrs
-            </td>
-          </tr>
-        </tbody>
-        <tbody template="ng-switch-when 'interpolationFn'">
-          <tr template="ng-for #row of data">
-            <td template="ng-for #column of row">
-              {{column.iFn()}}:{{column.jFn()}}|
-            </td>
-          </tr>
-        </tbody>
-        <tbody template="ng-switch-default">
-          <tr>
-            <td>
-              <em>{{benchmarkType}} not yet implemented</em>
-            </td>
-          </tr>
-        </tbody>
-      </table>`
-})
-class LargetableComponent {
-  data;
-  benchmarkType: string;
-  rows: number;
-  columns: number;
-  constructor(@Inject(BENCHMARK_TYPE) benchmarkType, @Inject(LARGETABLE_ROWS) rows,
-              @Inject(LARGETABLE_COLS) columns) {
-    this.benchmarkType = benchmarkType;
-    this.rows = rows;
-    this.columns = columns;
-  }
-}
-
-@Component({selector: 'app'})
-@View({
-  directives: [LargetableComponent],
-  template: `<largetable [data]='data' [benchmark-type]='benchmarkType'></largetable>`
-})
-class AppComponent {
-  data;
-  benchmarkType: string;
-}
diff --git a/modules/benchmarks/src/largetable/largetable_perf.spec.ts b/modules/benchmarks/src/largetable/largetable_perf.spec.ts
new file mode 100644
index 000000000000..29408c1ffd8a
--- /dev/null
+++ b/modules/benchmarks/src/largetable/largetable_perf.spec.ts
@@ -0,0 +1,66 @@
+/**
+ * @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';
+
+import {runBenchmark, verifyNoBrowserErrors} from '../../../e2e_util/perf_util';
+
+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()
+};
+
+describe('largetable benchmark perf', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  [CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
+    describe(worker.id, () => {
+      it('should run for render3', done => {
+        runTableBenchmark({
+          id: `largeTable.render3.${worker.id}`,
+          url: 'index.html',
+          ignoreBrowserSynchronization: true,
+          worker: worker
+        }).then(done, done.fail);
+      });
+    });
+  });
+
+  function runTableBenchmark(
+      config: {id: string, url: string, ignoreBrowserSynchronization?: boolean, worker: Worker}) {
+    return runBenchmark({
+      id: config.id,
+      url: config.url,
+      ignoreBrowserSynchronization: config.ignoreBrowserSynchronization,
+      params: [{name: 'cols', value: 40}, {name: 'rows', value: 200}],
+      prepare: config.worker.prepare,
+      work: config.worker.work
+    });
+  }
+});
diff --git a/modules/benchmarks/src/largetable/ng2/index.html b/modules/benchmarks/src/largetable/ng2/index.html
new file mode 100644
index 000000000000..3842f866250b
--- /dev/null
+++ b/modules/benchmarks/src/largetable/ng2/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Cols:
+    <input type="number" name="cols" placeholder="cols" value="40">
+    <br>
+    Rows:
+    <input type="number" name="rows" placeholder="rows" value="200">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Ng2 Largetable Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <largetable id="root">Loading...</largetable>
+  </div>
+
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
diff --git a/modules/benchmarks/src/largetable/ng2/index.ts b/modules/benchmarks/src/largetable/ng2/index.ts
new file mode 100644
index 000000000000..c7d73eb3f244
--- /dev/null
+++ b/modules/benchmarks/src/largetable/ng2/index.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {init} from './init';
+import {AppModule} from './table';
+
+export function main() {
+  enableProdMode();
+  platformBrowserDynamic().bootstrapModule(AppModule).then(init);
+}
diff --git a/modules/benchmarks/src/largetable/ng2/index_aot.ts b/modules/benchmarks/src/largetable/ng2/index_aot.ts
new file mode 100644
index 000000000000..36677d76c504
--- /dev/null
+++ b/modules/benchmarks/src/largetable/ng2/index_aot.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import {init} from './init';
+import {AppModuleNgFactory} from './table.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(init);
diff --git a/modules/benchmarks/src/largetable/ng2/init.ts b/modules/benchmarks/src/largetable/ng2/init.ts
new file mode 100644
index 000000000000..054ea20948b6
--- /dev/null
+++ b/modules/benchmarks/src/largetable/ng2/init.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {ApplicationRef, NgModuleRef} from '@angular/core';
+
+import {bindAction, profile} from '../../util';
+import {buildTable, emptyTable} from '../util';
+
+import {AppModule, TableComponent} from './table';
+
+export function init(moduleRef: NgModuleRef<AppModule>) {
+  let table: TableComponent;
+  let appRef: ApplicationRef;
+
+  function destroyDom() {
+    table.data = emptyTable;
+    appRef.tick();
+  }
+
+  function createDom() {
+    table.data = buildTable();
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  const injector = moduleRef.injector;
+  appRef = injector.get(ApplicationRef);
+
+  table = appRef.components[0].instance;
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}
diff --git a/modules/benchmarks/src/largetable/ng2/table.ts b/modules/benchmarks/src/largetable/ng2/table.ts
new file mode 100644
index 000000000000..883d3af5c7a7
--- /dev/null
+++ b/modules/benchmarks/src/largetable/ng2/table.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 {Component, Input, NgModule} from '@angular/core';
+import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
+
+import {TableCell, emptyTable} from '../util';
+
+let trustedEmptyColor: SafeStyle;
+let trustedGreyColor: SafeStyle;
+
+@Component({
+  selector: 'largetable',
+  template: `<table><tbody>
+    <tr *ngFor="let row of data; trackBy: trackByIndex">
+      <td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="getColor(cell.row)">
+      {{cell.value}}
+      </td>
+    </tr>
+  </tbody></table>`,
+})
+export class TableComponent {
+  @Input()
+  data: TableCell[][] = emptyTable;
+
+  trackByIndex(index: number, item: any) { return index; }
+
+  getColor(row: number) { return row % 2 ? trustedEmptyColor : trustedGreyColor; }
+}
+
+@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
+export class AppModule {
+  constructor(sanitizer: DomSanitizer) {
+    trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('');
+    trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey');
+  }
+}
diff --git a/modules/benchmarks/src/largetable/ng2_switch/index.html b/modules/benchmarks/src/largetable/ng2_switch/index.html
new file mode 100644
index 000000000000..9cd629ebc277
--- /dev/null
+++ b/modules/benchmarks/src/largetable/ng2_switch/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Cols:
+    <input type="number" name="cols" placeholder="cols" value="40">
+    <br>
+    Rows:
+    <input type="number" name="rows" placeholder="rows" value="200">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Ng2 with NgSwitch Largetable Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <largetable id="root">Loading...</largetable>
+  </div>
+
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
diff --git a/modules/benchmarks/src/largetable/ng2_switch/index.ts b/modules/benchmarks/src/largetable/ng2_switch/index.ts
new file mode 100644
index 000000000000..c7d73eb3f244
--- /dev/null
+++ b/modules/benchmarks/src/largetable/ng2_switch/index.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {init} from './init';
+import {AppModule} from './table';
+
+export function main() {
+  enableProdMode();
+  platformBrowserDynamic().bootstrapModule(AppModule).then(init);
+}
diff --git a/modules/benchmarks/src/largetable/ng2_switch/index_aot.ts b/modules/benchmarks/src/largetable/ng2_switch/index_aot.ts
new file mode 100644
index 000000000000..36677d76c504
--- /dev/null
+++ b/modules/benchmarks/src/largetable/ng2_switch/index_aot.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import {init} from './init';
+import {AppModuleNgFactory} from './table.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(init);
diff --git a/modules/benchmarks/src/largetable/ng2_switch/init.ts b/modules/benchmarks/src/largetable/ng2_switch/init.ts
new file mode 100644
index 000000000000..054ea20948b6
--- /dev/null
+++ b/modules/benchmarks/src/largetable/ng2_switch/init.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {ApplicationRef, NgModuleRef} from '@angular/core';
+
+import {bindAction, profile} from '../../util';
+import {buildTable, emptyTable} from '../util';
+
+import {AppModule, TableComponent} from './table';
+
+export function init(moduleRef: NgModuleRef<AppModule>) {
+  let table: TableComponent;
+  let appRef: ApplicationRef;
+
+  function destroyDom() {
+    table.data = emptyTable;
+    appRef.tick();
+  }
+
+  function createDom() {
+    table.data = buildTable();
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  const injector = moduleRef.injector;
+  appRef = injector.get(ApplicationRef);
+
+  table = appRef.components[0].instance;
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}
diff --git a/modules/benchmarks/src/largetable/ng2_switch/table.ts b/modules/benchmarks/src/largetable/ng2_switch/table.ts
new file mode 100644
index 000000000000..10b73f6539be
--- /dev/null
+++ b/modules/benchmarks/src/largetable/ng2_switch/table.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 {Component, Input, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {TableCell, emptyTable} from '../util';
+
+@Component({
+  selector: 'largetable',
+  template: `<table><tbody>
+    <tr *ngFor="let row of data; trackBy: trackByIndex">
+    <ng-template ngFor [ngForOf]="row" [ngForTrackBy]="trackByIndex" let-cell><ng-container [ngSwitch]="cell.row % 2">
+        <td *ngSwitchCase="0" style="background-color: grey">{{cell.value}}</td><td *ngSwitchDefault>{{cell.value}}</td>
+    </ng-container></ng-template>
+    </tr>
+  </tbody></table>`
+})
+export class TableComponent {
+  @Input()
+  data: TableCell[][] = emptyTable;
+
+  trackByIndex(index: number, item: any) { return index; }
+}
+
+@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
+export class AppModule {
+}
diff --git a/modules/benchmarks/src/largetable/render3/BUILD.bazel b/modules/benchmarks/src/largetable/render3/BUILD.bazel
new file mode 100644
index 000000000000..4e5caf677008
--- /dev/null
+++ b/modules/benchmarks/src/largetable/render3/BUILD.bazel
@@ -0,0 +1,63 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+load("//packages/bazel:index.bzl", "protractor_web_test")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+ts_library(
+    name = "largetable_lib",
+    srcs = glob(
+        [
+            "**/*.ts",
+        ],
+        exclude = ["protractor.on-prepare.ts"],
+    ),
+    deps = [
+        "//modules/benchmarks/src:util_lib",
+        "//modules/benchmarks/src/largetable:util_lib",
+        "//packages:types",
+        "//packages/core",
+        "@rxjs",
+    ],
+)
+
+ng_rollup_bundle(
+    name = "bundle",
+    entry_point = "modules/benchmarks/src/largetable/render3/index.js",
+    deps = [
+        ":largetable_lib",
+    ],
+)
+
+genrule(
+    name = "favicon",
+    srcs = ["//modules/benchmarks:favicon"],
+    outs = ["favicon.ico"],
+    cmd = "cp $< $@",
+)
+
+ts_devserver(
+    name = "devserver",
+    static_files = [
+        ":bundle.min_debug.js",
+        ":bundle.min.js",
+        "index.html",
+        ":favicon",
+    ],
+)
+
+protractor_web_test(
+    name = "perf",
+    configuration = "//:protractor-perf.conf.js",
+    data = [
+        "//packages/bazel/src/protractor/utils",
+        "//packages/benchpress",
+    ],
+    on_prepare = ":protractor.on-prepare.js",
+    server = ":devserver",
+    tags = ["manual"],
+    deps = [
+        "//modules/benchmarks/src/largetable:perf_lib",
+    ],
+)
diff --git a/modules/benchmarks/src/largetable/render3/index.html b/modules/benchmarks/src/largetable/render3/index.html
new file mode 100644
index 000000000000..85dcfbb742e8
--- /dev/null
+++ b/modules/benchmarks/src/largetable/render3/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Cols:
+    <input type="number" name="cols" placeholder="cols" value="40">
+    <br> Rows:
+    <input type="number" name="rows" placeholder="rows" value="200">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Render3 Largetable Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <largetable id="root"></largetable>
+  </div>
+
+  <script>
+    // TODO(mlaval): remove once we have a proper solution
+    ngDevMode = false;
+    var isBazel = location.pathname.indexOf('/all/') !== 0;
+    // isBazel needed while 'scripts/ci/test-e2e.sh test.e2e.protractor-e2e' is run
+    // on Travis
+    // TODO: port remaining protractor e2e tests to bazel protractor_web_test_suite rule
+    var bazelBundle = document.location.search.endsWith('debug') ? 'bundle.min_debug.js' : 'bundle.min.js';
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + (isBazel ? bazelBundle : mainUrl) + '">\u003c/script>');
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/modules/benchmarks/src/largetable/render3/index.ts b/modules/benchmarks/src/largetable/render3/index.ts
new file mode 100644
index 000000000000..c8d774dbfe6c
--- /dev/null
+++ b/modules/benchmarks/src/largetable/render3/index.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 {ɵrenderComponent as renderComponent} from '@angular/core';
+
+import {bindAction, profile} from '../../util';
+
+import {LargeTableComponent, createDom, destroyDom} from './table';
+
+function noop() {}
+
+export function main() {
+  let component: LargeTableComponent;
+  if (typeof window !== 'undefined') {
+    component = renderComponent<LargeTableComponent>(LargeTableComponent);
+    bindAction('#createDom', () => createDom(component));
+    bindAction('#destroyDom', () => destroyDom(component));
+    bindAction('#updateDomProfile', profile(() => createDom(component), noop, 'update'));
+    bindAction(
+        '#createDomProfile',
+        profile(() => createDom(component), () => destroyDom(component), 'create'));
+  }
+}
+
+const isBazel = location.pathname.indexOf('/all/') !== 0;
+// isBazel needed while 'scripts/ci/test-e2e.sh test.e2e.protractor-e2e' is run
+// on Travis
+// TODO: port remaining protractor e2e tests to bazel protractor_web_test_suite rule
+if (isBazel) {
+  main();
+}
diff --git a/modules/benchmarks/src/largetable/render3/protractor.on-prepare.js b/modules/benchmarks/src/largetable/render3/protractor.on-prepare.js
new file mode 100644
index 000000000000..6671d2d23398
--- /dev/null
+++ b/modules/benchmarks/src/largetable/render3/protractor.on-prepare.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
+ */
+
+const protractorUtils = require('@angular/bazel/protractor-utils');
+const protractor = require('protractor');
+
+module.exports = function(config) {
+  return protractorUtils.runServer(config.workspace, config.server, '-port', [])
+      .then(serverSpec => {
+        const serverUrl = `http://localhost:${serverSpec.port}`;
+        // Since the browser restarts in this benchmark we need to set both the browser.baseUrl
+        // for the first test and the protractor config.baseUrl for the subsequent tests
+        protractor.browser.baseUrl = serverUrl;
+        return protractor.browser.getProcessedConfig().then((config) => config.baseUrl = serverUrl);
+      });
+};
diff --git a/modules/benchmarks/src/largetable/render3/table.ts b/modules/benchmarks/src/largetable/render3/table.ts
new file mode 100644
index 000000000000..9893af24b77a
--- /dev/null
+++ b/modules/benchmarks/src/largetable/render3/table.ts
@@ -0,0 +1,85 @@
+/**
+ * @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 {ɵC as C, ɵE as E, ɵRenderFlags as RenderFlags, ɵT as T, ɵV as V, ɵb as b, ɵcR as cR, ɵcr as cr, ɵdefineComponent as defineComponent, ɵdetectChanges as detectChanges, ɵe as e, ɵi1 as i1, ɵp as p, ɵs as s, ɵsa as sa, ɵsm as sm, ɵsp as sp, ɵt as t, ɵv as v} from '@angular/core';
+import {ComponentDefInternal} from '@angular/core/src/render3/interfaces/definition';
+
+import {TableCell, buildTable, emptyTable} from '../util';
+
+const c0 = ['background-color'];
+export class LargeTableComponent {
+  data: TableCell[][] = emptyTable;
+
+  /** @nocollapse */
+  static ngComponentDef: ComponentDefInternal<LargeTableComponent> = defineComponent({
+    type: LargeTableComponent,
+    selectors: [['largetable']],
+    template: function(rf: RenderFlags, ctx: LargeTableComponent) {
+      if (rf & RenderFlags.Create) {
+        E(0, 'table');
+        {
+          E(1, 'tbody');
+          { C(2); }
+          e();
+        }
+        e();
+      }
+      if (rf & RenderFlags.Update) {
+        cR(2);
+        {
+          for (let row of ctx.data) {
+            let rf1 = V(1);
+            {
+              if (rf1 & RenderFlags.Create) {
+                E(0, 'tr');
+                C(1);
+                e();
+              }
+              if (rf1 & RenderFlags.Update) {
+                cR(1);
+                {
+                  for (let cell of row) {
+                    let rf2 = V(2);
+                    {
+                      if (rf2 & RenderFlags.Create) {
+                        E(0, 'td');
+                        s(null, c0);
+                        { T(1); }
+                        e();
+                      }
+                      if (rf2 & RenderFlags.Update) {
+                        sp(0, 0, null, cell.row % 2 ? '' : 'grey');
+                        t(1, b(cell.value));
+                      }
+                    }
+                    v();
+                  }
+                }
+                cr();
+              }
+            }
+            v();
+          }
+        }
+        cr();
+      }
+    },
+    factory: () => new LargeTableComponent(),
+    inputs: {data: 'data'}
+  });
+}
+
+export function destroyDom(component: LargeTableComponent) {
+  component.data = emptyTable;
+  detectChanges(component);
+}
+
+export function createDom(component: LargeTableComponent) {
+  component.data = buildTable();
+  detectChanges(component);
+}
diff --git a/modules/benchmarks/src/largetable/render3/tsconfig.json b/modules/benchmarks/src/largetable/render3/tsconfig.json
new file mode 100644
index 000000000000..8f3c65679683
--- /dev/null
+++ b/modules/benchmarks/src/largetable/render3/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015"]
+  }
+}
diff --git a/modules/benchmarks/src/largetable/util.ts b/modules/benchmarks/src/largetable/util.ts
new file mode 100644
index 000000000000..a007224bf144
--- /dev/null
+++ b/modules/benchmarks/src/largetable/util.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 {getIntParameter} from '../util';
+
+export class TableCell {
+  constructor(public row: number, public col: number, public value: string) {}
+}
+
+let tableCreateCount: number;
+export let maxRow: number;
+export let maxCol: number;
+let numberData: TableCell[][];
+let charData: TableCell[][];
+
+init();
+
+function init() {
+  maxRow = getIntParameter('rows');
+  maxCol = getIntParameter('cols');
+  tableCreateCount = 0;
+  numberData = [];
+  charData = [];
+  for (let r = 0; r <= maxRow; r++) {
+    const numberRow: TableCell[] = [];
+    numberData.push(numberRow);
+    const charRow: TableCell[] = [];
+    charData.push(charRow);
+    for (let c = 0; c <= maxCol; c++) {
+      numberRow.push(new TableCell(r, c, `${c}/${r}`));
+      charRow.push(new TableCell(r, c, `${charValue(c)}/${charValue(r)}`));
+    }
+  }
+}
+
+function charValue(i: number): string {
+  return String.fromCharCode('A'.charCodeAt(0) + (i % 26));
+}
+
+export const emptyTable: TableCell[][] = [];
+
+export function buildTable(): TableCell[][] {
+  tableCreateCount++;
+  return tableCreateCount % 2 ? numberData : charData;
+}
diff --git a/modules/benchmarks/src/naive_infinite_scroll/app.ts b/modules/benchmarks/src/naive_infinite_scroll/app.ts
deleted file mode 100644
index dbe2e17d059f..000000000000
--- a/modules/benchmarks/src/naive_infinite_scroll/app.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import {isPresent} from 'angular2/src/facade/lang';
-import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-import {TimerWrapper} from 'angular2/src/facade/async';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {ScrollAreaComponent} from './scroll_area';
-import {NgIf, NgFor} from 'angular2/directives';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {document} from 'angular2/src/facade/browser';
-
-import {Component, Directive, View} from 'angular2/angular2';
-
-
-@Component({selector: 'scroll-app'})
-@View({
-  directives: [ScrollAreaComponent, NgIf, NgFor],
-  template: `
-  <div>
-    <div style="display: flex">
-      <scroll-area id="testArea"></scroll-area>
-    </div>
-    <div template="ng-if scrollAreas.length > 0">
-      <p>Following tables are only here to add weight to the UI:</p>
-      <scroll-area template="ng-for #scrollArea of scrollAreas"></scroll-area>
-    </div>
-  </div>`
-})
-export class App {
-  scrollAreas: List<int>;
-  iterationCount: int;
-  scrollIncrement: int;
-
-  constructor() {
-    var appSize = getIntParameter('appSize');
-    this.iterationCount = getIntParameter('iterationCount');
-    this.scrollIncrement = getIntParameter('scrollIncrement');
-    appSize = appSize > 1 ? appSize - 1 : 0;  // draw at least one table
-    this.scrollAreas = [];
-    for (var i = 0; i < appSize; i++) {
-      this.scrollAreas.push(i);
-    }
-    bindAction('#run-btn', () => { this.runBenchmark(); });
-    bindAction('#reset-btn', () => {
-      this._getScrollDiv().scrollTop = 0;
-      var existingMarker = this._locateFinishedMarker();
-      if (isPresent(existingMarker)) {
-        DOM.removeChild(document.body, existingMarker);
-      }
-    });
-  }
-
-  runBenchmark() {
-    var scrollDiv = this._getScrollDiv();
-    var n: int = this.iterationCount;
-    var scheduleScroll;
-    scheduleScroll = () => {
-      TimerWrapper.setTimeout(() => {
-        scrollDiv.scrollTop += this.scrollIncrement;
-        n--;
-        if (n > 0) {
-          scheduleScroll();
-        } else {
-          this._scheduleFinishedMarker();
-        }
-      }, 0);
-    };
-    scheduleScroll();
-  }
-
-  // Puts a marker indicating that the test is finished.
-  _scheduleFinishedMarker() {
-    var existingMarker = this._locateFinishedMarker();
-    if (isPresent(existingMarker)) {
-      // Nothing to do, the marker is already there
-      return;
-    }
-    TimerWrapper.setTimeout(() => {
-      var finishedDiv = DOM.createElement('div');
-      finishedDiv.id = 'done';
-      DOM.setInnerHTML(finishedDiv, 'Finished');
-      DOM.appendChild(document.body, finishedDiv);
-    }, 0);
-  }
-
-  _locateFinishedMarker() { return DOM.querySelector(document.body, '#done'); }
-
-  _getScrollDiv() { return DOM.query('body /deep/ #scrollDiv'); }
-}
diff --git a/modules/benchmarks/src/naive_infinite_scroll/cells.ts b/modules/benchmarks/src/naive_infinite_scroll/cells.ts
deleted file mode 100644
index 57a605ed289a..000000000000
--- a/modules/benchmarks/src/naive_infinite_scroll/cells.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
-import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST} from './common';
-import {NgFor} from 'angular2/directives';
-
-import {Component, Directive, View} from 'angular2/angular2';
-
-export class HasStyle {
-  style: Map<any, any>;
-
-  constructor() { this.style = new Map(); }
-
-  set width(w) { this.style.set('width', w); }
-}
-
-@Component({selector: 'company-name', properties: ['width: cell-width', 'company']})
-@View({directives: [], template: `<div [style]="style">{{company.name}}</div>`})
-export class CompanyNameComponent extends HasStyle {
-  company: Company;
-}
-
-@Component({selector: 'opportunity-name', properties: ['width: cell-width', 'opportunity']})
-@View({directives: [], template: `<div [style]="style">{{opportunity.name}}</div>`})
-export class OpportunityNameComponent extends HasStyle {
-  opportunity: Opportunity;
-}
-
-@Component({selector: 'offering-name', properties: ['width: cell-width', 'offering']})
-@View({directives: [], template: `<div [style]="style">{{offering.name}}</div>`})
-export class OfferingNameComponent extends HasStyle {
-  offering: Offering;
-}
-
-export class Stage {
-  name: string;
-  isDisabled: boolean;
-  style: Map<string, string>;
-  apply: Function;
-}
-
-@Component({selector: 'stage-buttons', properties: ['width: cell-width', 'offering']})
-@View({
-  directives: [NgFor],
-  template: `
-      <div [style]="style">
-          <button template="ng-for #stage of stages"
-                  [disabled]="stage.isDisabled"
-                  [style]="stage.style"
-                  on-click="setStage(stage)">
-            {{stage.name}}
-          </button>
-      </div>`
-})
-export class StageButtonsComponent extends HasStyle {
-  _offering: Offering;
-  stages: List<Stage>;
-
-  get offering(): Offering { return this._offering; }
-
-  set offering(offering: Offering) {
-    this._offering = offering;
-    this._computeStageButtons();
-  }
-
-  setStage(stage: Stage) {
-    this._offering.status = stage.name;
-    this._computeStageButtons();
-  }
-
-  _computeStageButtons() {
-    var disabled = true;
-    this.stages = ListWrapper.clone(STATUS_LIST.map((status) => {
-      var isCurrent = this._offering.status == status;
-      var stage = new Stage();
-      stage.name = status;
-      stage.isDisabled = disabled;
-      var stageStyle = new Map<string, string>();
-      stageStyle.set('background-color', disabled ? '#DDD' : isCurrent ? '#DDF' : '#FDD');
-      stage.style = stageStyle;
-      if (isCurrent) {
-        disabled = false;
-      }
-      return stage;
-    }));
-  }
-}
-
-@Component({selector: 'account-cell', properties: ['width: cell-width', 'account']})
-@View({
-  directives: [],
-  template: `
-      <div [style]="style">
-        <a href="/account/{{account.accountId}}">
-          {{account.accountId}}
-        </a>
-      </div>`
-})
-export class AccountCellComponent extends HasStyle {
-  account: Account;
-}
-
-@Component({selector: 'formatted-cell', properties: ['width: cell-width', 'value']})
-@View({directives: [], template: `<div [style]="style">{{formattedValue}}</div>`})
-export class FormattedCellComponent extends HasStyle {
-  formattedValue: string;
-
-  set value(value) {
-    if (value instanceof CustomDate) {
-      this.formattedValue = `${value.month}/${value.day}/${value.year}`;
-    } else {
-      this.formattedValue = value.toString();
-    }
-  }
-}
diff --git a/modules/benchmarks/src/naive_infinite_scroll/common.ts b/modules/benchmarks/src/naive_infinite_scroll/common.ts
deleted file mode 100644
index 8858cd3c1e2f..000000000000
--- a/modules/benchmarks/src/naive_infinite_scroll/common.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-import {Math} from 'angular2/src/facade/math';
-
-import {ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
-
-export var ITEMS = 1000;
-export var ITEM_HEIGHT = 40;
-export var VISIBLE_ITEMS = 17;
-
-export var HEIGHT = ITEMS * ITEM_HEIGHT;
-export var VIEW_PORT_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
-
-export var COMPANY_NAME_WIDTH = 100;
-export var OPPORTUNITY_NAME_WIDTH = 100;
-export var OFFERING_NAME_WIDTH = 100;
-export var ACCOUNT_CELL_WIDTH = 50;
-export var BASE_POINTS_WIDTH = 50;
-export var KICKER_POINTS_WIDTH = 50;
-export var STAGE_BUTTONS_WIDTH = 220;
-export var BUNDLES_WIDTH = 120;
-export var DUE_DATE_WIDTH = 100;
-export var END_DATE_WIDTH = 100;
-export var AAT_STATUS_WIDTH = 100;
-export var ROW_WIDTH = COMPANY_NAME_WIDTH + OPPORTUNITY_NAME_WIDTH + OFFERING_NAME_WIDTH +
-                       ACCOUNT_CELL_WIDTH + BASE_POINTS_WIDTH + KICKER_POINTS_WIDTH +
-                       STAGE_BUTTONS_WIDTH + BUNDLES_WIDTH + DUE_DATE_WIDTH + END_DATE_WIDTH +
-                       AAT_STATUS_WIDTH;
-
-export var STATUS_LIST = ['Planned', 'Pitched', 'Won', 'Lost'];
-
-export var AAT_STATUS_LIST = ['Active', 'Passive', 'Abandoned'];
-
-// Imitate Streamy entities.
-
-// Just a non-trivial object. Nothing fancy or correct.
-export class CustomDate {
-  year: number;
-  month: number;
-  day: number;
-
-  constructor(y: number, m: number, d: number) {
-    this.year = y;
-    this.month = m;
-    this.day = d;
-  }
-
-  addDays(days: number): CustomDate {
-    var newDay = this.day + days;
-    var newMonth = this.month + Math.floor(newDay / 30);
-    newDay = newDay % 30;
-    var newYear = this.year + Math.floor(newMonth / 12);
-    return new CustomDate(newYear, newMonth, newDay);
-  }
-
-  static now(): CustomDate { return new CustomDate(2014, 1, 28); }
-}
-
-export class RawEntity {
-  _data: Map<any, any>;
-
-  constructor() { this._data = new Map(); }
-
-  get(key: string) {
-    if (key.indexOf('.') == -1) {
-      return this._data[key];
-    }
-    var pieces = key.split('.');
-    var last = ListWrapper.last(pieces);
-    pieces.length = pieces.length - 1;
-    var target = _resolve(pieces, this);
-    if (target == null) {
-      return null;
-    }
-    return target[last];
-  }
-
-  set(key: string, value) {
-    if (key.indexOf('.') == -1) {
-      this._data[key] = value;
-      return;
-    }
-    var pieces = key.split('.');
-    var last = ListWrapper.last(pieces);
-    pieces.length = pieces.length - 1;
-    var target = _resolve(pieces, this);
-    target[last] = value;
-  }
-
-  remove(key: string) {
-    if (!key.contains('.')) {
-      return MapWrapper.delete(this._data, key);
-    }
-    var pieces = key.split('.');
-    var last = ListWrapper.last(pieces);
-    pieces.length = pieces.length - 1;
-    var target = _resolve(pieces, this);
-    return target.remove(last);
-  }
-
-  _resolve(pieces, start) {
-    var cur = start;
-    for (var i = 0; i < pieces.length; i++) {
-      cur = cur[pieces[i]];
-      if (cur == null) {
-        return null;
-      }
-    }
-    return cur;
-  }
-}
-
-export class Company extends RawEntity {
-  get name(): string { return this.get('name'); }
-  set name(val: string) { this.set('name', val); }
-}
-
-export class Offering extends RawEntity {
-  get name(): string { return this.get('name'); }
-  set name(val: string) { this.set('name', val); }
-
-  get company(): Company { return this.get('company'); }
-  set company(val: Company) { this.set('company', val); }
-
-  get opportunity(): Opportunity { return this.get('opportunity'); }
-  set opportunity(val: Opportunity) { this.set('opportunity', val); }
-
-  get account(): Account { return this.get('account'); }
-  set account(val: Account) { this.set('account', val); }
-
-  get basePoints(): number { return this.get('basePoints'); }
-  set basePoints(val: number) { this.set('basePoints', val); }
-
-  get kickerPoints(): number { return this.get('kickerPoints'); }
-  set kickerPoints(val: number) { this.set('kickerPoints', val); }
-
-  get status(): string { return this.get('status'); }
-  set status(val: string) { this.set('status', val); }
-
-  get bundles(): string { return this.get('bundles'); }
-  set bundles(val: string) { this.set('bundles', val); }
-
-  get dueDate(): CustomDate { return this.get('dueDate'); }
-  set dueDate(val: CustomDate) { this.set('dueDate', val); }
-
-  get endDate(): CustomDate { return this.get('endDate'); }
-  set endDate(val: CustomDate) { this.set('endDate', val); }
-
-  get aatStatus(): string { return this.get('aatStatus'); }
-  set aatStatus(val: string) { this.set('aatStatus', val); }
-}
-
-export class Opportunity extends RawEntity {
-  get name(): string { return this.get('name'); }
-  set name(val: string) { this.set('name', val); }
-}
-
-export class Account extends RawEntity {
-  get accountId(): number { return this.get('accountId'); }
-  set accountId(val: number) { this.set('accountId', val); }
-}
diff --git a/modules/benchmarks/src/naive_infinite_scroll/index.html b/modules/benchmarks/src/naive_infinite_scroll/index.html
deleted file mode 100644
index 701cdaecd5a8..000000000000
--- a/modules/benchmarks/src/naive_infinite_scroll/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>AngularDart Scrolling Benchmark</title>
-</head>
-<body>
-  <form>
-    App size: <input type="text" name="appSize" value="1"></input><br>
-    Iteration count: <input type="text" name="iterationCount" value="1"></input><br>
-    Scroll increment: <input type="text" name="scrollIncrement" value="1"></input><br>
-  </form>
-  <div>
-    <button id="run-btn">Run</button>
-    <button id="reset-btn">Reset</button>
-  </div>
-  <scroll-app></scroll-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/benchmarks/src/naive_infinite_scroll/index.ts b/modules/benchmarks/src/naive_infinite_scroll/index.ts
deleted file mode 100644
index 58df2ef0ad93..000000000000
--- a/modules/benchmarks/src/naive_infinite_scroll/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {MapWrapper} from 'angular2/src/facade/collection';
-
-import {bootstrap} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-import {App} from './app';
-
-import {APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
-import {bind} from 'angular2/di';
-
-export function main() {
-  setupReflector();
-  bootstrap(App, createBindings());
-}
-
-function createBindings(): List {
-  return [bind(APP_VIEW_POOL_CAPACITY).toValue(100000)];
-}
-
-export function setupReflector() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-
-  // TODO(kegluneq): Generate this.
-  reflector.registerSetters({
-    'style': (o, m) => {
-      // HACK
-      MapWrapper.forEach(m, function(v, k) { o.style.setProperty(k, v); });
-    }
-  });
-}
diff --git a/modules/benchmarks/src/naive_infinite_scroll/random_data.ts b/modules/benchmarks/src/naive_infinite_scroll/random_data.ts
deleted file mode 100644
index 80c859b7e0c0..000000000000
--- a/modules/benchmarks/src/naive_infinite_scroll/random_data.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import {StringWrapper} from 'angular2/src/facade/lang';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {
-  CustomDate,
-  Offering,
-  Company,
-  Opportunity,
-  Account,
-  STATUS_LIST,
-  AAT_STATUS_LIST
-} from './common';
-
-export function generateOfferings(count: int): List<Offering> {
-  var res = [];
-  for (var i = 0; i < count; i++) {
-    res.push(generateOffering(i));
-  }
-  return res;
-}
-
-export function generateOffering(seed: int): Offering {
-  var res = new Offering();
-  res.name = generateName(seed++);
-  res.company = generateCompany(seed++);
-  res.opportunity = generateOpportunity(seed++);
-  res.account = generateAccount(seed++);
-  res.basePoints = seed % 10;
-  res.kickerPoints = seed % 4;
-  res.status = STATUS_LIST[seed % STATUS_LIST.length];
-  res.bundles = randomString(seed++);
-  res.dueDate = randomDate(seed++);
-  res.endDate = randomDate(seed++, res.dueDate);
-  res.aatStatus = AAT_STATUS_LIST[seed % AAT_STATUS_LIST.length];
-  return res;
-}
-
-export function generateCompany(seed: int): Company {
-  var res = new Company();
-  res.name = generateName(seed);
-  return res;
-}
-
-export function generateOpportunity(seed: int): Opportunity {
-  var res = new Opportunity();
-  res.name = generateName(seed);
-  return res;
-}
-
-export function generateAccount(seed: int): Account {
-  var res = new Account();
-  res.accountId = seed;
-  return res;
-}
-
-var names = [
-  'Foo',
-  'Bar',
-  'Baz',
-  'Qux',
-  'Quux',
-  'Garply',
-  'Waldo',
-  'Fred',
-  'Plugh',
-  'Xyzzy',
-  'Thud',
-  'Cruft',
-  'Stuff'
-];
-
-function generateName(seed: int): string {
-  return names[seed % names.length];
-}
-
-var offsets = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-
-function randomDate(seed: int, minDate: CustomDate = null): CustomDate {
-  if (minDate == null) {
-    minDate = CustomDate.now();
-  }
-
-  return minDate.addDays(offsets[seed % offsets.length]);
-}
-
-var stringLengths = [5, 7, 9, 11, 13];
-var charCodeOffsets = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-
-function randomString(seed: int): string {
-  var len = stringLengths[seed % 5];
-  var str = '';
-  for (var i = 0; i < len; i++) {
-    str += StringWrapper.fromCharCode(97 + charCodeOffsets[seed % 9] + i);
-  }
-  return str;
-}
diff --git a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts b/modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts
deleted file mode 100644
index 92ba8a520524..000000000000
--- a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {Math} from 'angular2/src/facade/math';
-
-import {Component, Directive, View} from 'angular2/angular2';
-
-import {
-  Offering,
-  ITEMS,
-  ITEM_HEIGHT,
-  VISIBLE_ITEMS,
-  VIEW_PORT_HEIGHT,
-  ROW_WIDTH,
-  HEIGHT
-} from './common';
-import {generateOfferings} from './random_data';
-import {ScrollItemComponent} from './scroll_item';
-import {NgFor} from 'angular2/directives';
-
-@Component({
-  selector: 'scroll-area',
-})
-@View({
-  directives: [ScrollItemComponent, NgFor],
-  template: `
-    <div>
-        <div id="scrollDiv"
-             [style]="scrollDivStyle"
-             on-scroll="onScroll($event)">
-            <div id="padding"></div>
-            <div id="inner">
-                <scroll-item
-                    template="ng-for #item of visibleItems"
-                    [offering]="item">
-                </scroll-item>
-            </div>
-        </div>
-    </div>`
-})
-export class ScrollAreaComponent {
-  _fullList: List<Offering>;
-  visibleItems: List<Offering>;
-
-  scrollDivStyle;
-  paddingDiv;
-  innerDiv;
-
-  constructor() {
-    this._fullList = generateOfferings(ITEMS);
-    this.visibleItems = [];
-    this.scrollDivStyle = MapWrapper.createFromPairs([
-      ['height', `${VIEW_PORT_HEIGHT}px`],
-      ['width', '1000px'],
-      ['border', '1px solid #000'],
-      ['overflow', 'scroll']
-    ]);
-    this.onScroll(null);
-  }
-
-  onScroll(evt) {
-    var scrollTop = 0;
-    if (evt != null) {
-      var scrollDiv = evt.target;
-      if (this.paddingDiv == null) {
-        this.paddingDiv = scrollDiv.querySelector('#padding');
-      }
-      if (this.innerDiv == null) {
-        this.innerDiv = scrollDiv.querySelector('#inner');
-        this.innerDiv.style.setProperty('width', `${ROW_WIDTH}px`);
-      }
-      scrollTop = scrollDiv.scrollTop;
-    }
-    var iStart = Math.floor(scrollTop / ITEM_HEIGHT);
-    var iEnd = Math.min(iStart + VISIBLE_ITEMS + 1, this._fullList.length);
-    var padding = iStart * ITEM_HEIGHT;
-    if (this.innerDiv != null) {
-      this.innerDiv.style.setProperty('height', `${HEIGHT - padding}px`);
-    }
-    if (this.paddingDiv != null) {
-      this.paddingDiv.style.setProperty('height', `${padding}px`);
-    }
-    this.visibleItems = ListWrapper.slice(this._fullList, iStart, iEnd);
-  }
-}
diff --git a/modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts b/modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts
deleted file mode 100644
index 2615bc03e64c..000000000000
--- a/modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {
-  CompanyNameComponent,
-  OpportunityNameComponent,
-  OfferingNameComponent,
-  StageButtonsComponent,
-  AccountCellComponent,
-  FormattedCellComponent
-} from './cells';
-
-import {Component, Directive, View} from 'angular2/angular2';
-
-import {
-  Offering,
-  ITEM_HEIGHT,
-  COMPANY_NAME_WIDTH,
-  OPPORTUNITY_NAME_WIDTH,
-  OFFERING_NAME_WIDTH,
-  ACCOUNT_CELL_WIDTH,
-  BASE_POINTS_WIDTH,
-  KICKER_POINTS_WIDTH,
-  STAGE_BUTTONS_WIDTH,
-  BUNDLES_WIDTH,
-  DUE_DATE_WIDTH,
-  END_DATE_WIDTH,
-  AAT_STATUS_WIDTH
-} from './common';
-
-@Component({selector: 'scroll-item', properties: ['offering']})
-@View({
-  directives: [
-    CompanyNameComponent,
-    OpportunityNameComponent,
-    OfferingNameComponent,
-    StageButtonsComponent,
-    AccountCellComponent,
-    FormattedCellComponent
-  ],
-  template: `
-    <div class="row" [style]="itemStyle">
-        <company-name [company]="offering.company"
-                      [cell-width]="companyNameWidth">
-        </company-name>
-        <opportunity-name [opportunity]="offering.opportunity"
-                          [cell-width]="opportunityNameWidth">
-        </opportunity-name>
-        <offering-name [offering]="offering"
-                       [cell-width]="offeringNameWidth">
-        </offering-name>
-        <account-cell [account]="offering.account"
-                      [cell-width]="accountCellWidth">
-        </account-cell>
-        <formatted-cell [value]="offering.basePoints"
-                        [cell-width]="basePointsWidth">
-        </formatted-cell>
-        <formatted-cell [value]="offering.kickerPoints"
-                        [cell-width]="kickerPointsWidth">
-        </formatted-cell>
-        <stage-buttons [offering]="offering"
-                       [cell-width]="stageButtonsWidth">
-        </stage-buttons>
-        <formatted-cell [value]="offering.bundles"
-                        [cell-width]="bundlesWidth">
-        </formatted-cell>
-        <formatted-cell [value]="offering.dueDate"
-                        [cell-width]="dueDateWidth">
-        </formatted-cell>
-        <formatted-cell [value]="offering.endDate"
-                        [cell-width]="endDateWidth">
-        </formatted-cell>
-        <formatted-cell [value]="offering.aatStatus"
-                        [cell-width]="aatStatusWidth">
-        </formatted-cell>
-    </div>`
-})
-export class ScrollItemComponent {
-  offering: Offering;
-  itemStyle;
-
-  constructor() {
-    this.itemStyle = MapWrapper.createFromPairs([
-      ['height', `${ITEM_HEIGHT}px`],
-      ['line-height', `${ITEM_HEIGHT}px`],
-      ['font-size', '18px'],
-      ['display', 'flex'],
-      ['justify-content', 'space-between']
-    ]);
-  }
-
-  get companyNameWidth() { return `${COMPANY_NAME_WIDTH}px`; }
-  get opportunityNameWidth() { return `${OPPORTUNITY_NAME_WIDTH}px`; }
-  get offeringNameWidth() { return `${OFFERING_NAME_WIDTH}px`; }
-  get accountCellWidth() { return `${ACCOUNT_CELL_WIDTH}px`; }
-  get basePointsWidth() { return `${BASE_POINTS_WIDTH}px`; }
-  get kickerPointsWidth() { return `${KICKER_POINTS_WIDTH}px`; }
-  get stageButtonsWidth() { return `${STAGE_BUTTONS_WIDTH}px`; }
-  get bundlesWidth() { return `${BUNDLES_WIDTH}px`; }
-  get dueDateWidth() { return `${DUE_DATE_WIDTH}px`; }
-  get endDateWidth() { return `${END_DATE_WIDTH}px`; }
-  get aatStatusWidth() { return `${AAT_STATUS_WIDTH}px`; }
-}
diff --git a/modules/benchmarks/src/compiler/compiler_benchmark.html b/modules/benchmarks/src/old/compiler/compiler_benchmark.html
similarity index 93%
rename from modules/benchmarks/src/compiler/compiler_benchmark.html
rename to modules/benchmarks/src/old/compiler/compiler_benchmark.html
index 86a02dad6287..26d00701ebc5 100644
--- a/modules/benchmarks/src/compiler/compiler_benchmark.html
+++ b/modules/benchmarks/src/old/compiler/compiler_benchmark.html
@@ -5,7 +5,7 @@
 <h2>Params</h2>
 <form>
   Elements:
-  <input type="number" name="elements" placeholder="elements" value="150">
+  <input type="number" name="elements" placeholder="elements" value="50">
   <br>
   <button>Apply</button>
 </form>
@@ -15,6 +15,8 @@ <h2>Actions</h2>
   <button id="compileWithBindings">CompileWithBindings</button>
   <button id="compileNoBindings">CompileNoBindings</button>
 </p>
+
+<app></app>
 $SCRIPTS$
 
 </body>
diff --git a/modules/benchmarks/src/old/compiler/compiler_benchmark.ts b/modules/benchmarks/src/old/compiler/compiler_benchmark.ts
new file mode 100644
index 000000000000..ce86f687fd54
--- /dev/null
+++ b/modules/benchmarks/src/old/compiler/compiler_benchmark.ts
@@ -0,0 +1,186 @@
+/**
+ * @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 {PromiseWrapper} from '@angular/facade/src/async';
+import {Type, print} from '@angular/facade/src/lang';
+import {bootstrap} from '@angular/platform-browser';
+import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
+import {DOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
+import {ComponentResolver, Component, Directive, ViewContainerRef,} from '@angular/core';
+
+import {ViewMetadata} from '@angular/core/src/metadata/view';
+
+import {CompilerConfig, DirectiveResolver} from '@angular/compiler';
+
+import {getIntParameter, bindAction} from '@angular/testing/src/benchmark_util';
+
+function _createBindings(): any[] {
+  const multiplyTemplatesBy = getIntParameter('elements');
+  return [
+    {
+      provide: DirectiveResolver,
+      useFactory:
+          () => new MultiplyDirectiveResolver(
+              multiplyTemplatesBy, [BenchmarkComponentNoBindings, BenchmarkComponentWithBindings]),
+      deps: []
+    },
+    // Use interpretative mode as Dart does not support JIT and
+    // we want to be able to compare the numbers between JS and Dart
+    {
+      provide: CompilerConfig,
+      useValue: new CompilerConfig({genDebugInfo: false, useJit: false, logBindingUpdate: false})
+    }
+  ];
+}
+
+export function main() {
+  BrowserDomAdapter.makeCurrent();
+  bootstrap(CompilerAppComponent, _createBindings()).then((ref) => {
+    const app = ref.instance;
+    bindAction('#compileNoBindings', measureWrapper(() => app.compileNoBindings(), 'No Bindings'));
+    bindAction(
+        '#compileWithBindings', measureWrapper(() => app.compileWithBindings(), 'With Bindings'));
+  });
+}
+
+function measureWrapper(func, desc) {
+  return function() {
+    const begin = new Date();
+    print(`[${desc}] Begin...`);
+    const onSuccess = function(_) {
+      const elapsedMs = new Date().getTime() - begin.getTime();
+      print(`[${desc}] ...done, took ${elapsedMs} ms`);
+    };
+    const onError = function(e) { DOM.logError(e); };
+    PromiseWrapper.then(func(), onSuccess, onError);
+  };
+}
+
+
+class MultiplyDirectiveResolver extends DirectiveResolver {
+  private _multiplyBy: number;
+  private _cache = new Map<Type, ViewMetadata>();
+
+  constructor(multiple: number, components: Type[]) {
+    super();
+    this._multiplyBy = multiple;
+    components.forEach(c => this._fillCache(c));
+  }
+
+  private _fillCache(component: Type) {
+    const view = super.resolve(component);
+    const multipliedTemplates = new Array(this._multiplyBy);
+    for (let i = 0; i < this._multiplyBy; ++i) {
+      multipliedTemplates[i] = view.template;
+    }
+    this._cache.set(
+        component,
+        new ViewMetadata({template: multipliedTemplates.join(''), directives: view.directives}));
+  }
+
+  resolve(component: Type): ViewMetadata {
+    return this._cache.get(component) || super.resolve(component);
+  }
+}
+
+@Component({selector: 'app', directives: [], template: ``})
+class CompilerAppComponent {
+  constructor(private _compiler: ComponentResolver) {}
+  compileNoBindings() {
+    this._compiler.clearCache();
+    return this._compiler.resolveComponent(BenchmarkComponentNoBindings);
+  }
+
+  compileWithBindings() {
+    this._compiler.clearCache();
+    return this._compiler.resolveComponent(BenchmarkComponentWithBindings);
+  }
+}
+
+@Directive({selector: '[dir0]', inputs: ['prop: attr0']})
+class Dir0 {
+  prop: any;
+}
+
+@Directive({selector: '[dir1]', inputs: ['prop: attr1']})
+class Dir1 {
+  prop: any;
+  constructor(dir0: Dir0) {}
+}
+
+@Directive({selector: '[dir2]', inputs: ['prop: attr2']})
+class Dir2 {
+  prop: any;
+  constructor(dir1: Dir1) {}
+}
+
+@Directive({selector: '[dir3]', inputs: ['prop: attr3']})
+class Dir3 {
+  prop: any;
+  constructor(dir2: Dir2) {}
+}
+
+@Directive({selector: '[dir4]', inputs: ['prop: attr4']})
+class Dir4 {
+  prop: any;
+  constructor(dir3: Dir3) {}
+}
+
+
+@Component({
+  selector: 'cmp-nobind',
+  directives: [Dir0, Dir1, Dir2, Dir3, Dir4],
+  template: `
+<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
+  <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
+    <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
+      <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
+        <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>`
+})
+class BenchmarkComponentNoBindings {
+}
+
+@Component({
+  selector: 'cmp-withbind',
+  directives: [Dir0, Dir1, Dir2, Dir3, Dir4],
+  template: `
+<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
+  {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
+  <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
+    {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
+    <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
+      {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
+      <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
+        {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
+        <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
+          {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>`
+})
+class BenchmarkComponentWithBindings {
+  value0: any;
+  value1: any;
+  value2: any;
+  value3: any;
+  value4: any;
+
+  inter0: any;
+  inter1: any;
+  inter2: any;
+  inter3: any;
+  inter4: any;
+}
diff --git a/modules/benchmarks/src/compiler/selector_benchmark.html b/modules/benchmarks/src/old/compiler/selector_benchmark.html
similarity index 100%
rename from modules/benchmarks/src/compiler/selector_benchmark.html
rename to modules/benchmarks/src/old/compiler/selector_benchmark.html
diff --git a/modules/benchmarks/src/old/compiler/selector_benchmark.ts b/modules/benchmarks/src/old/compiler/selector_benchmark.ts
new file mode 100644
index 000000000000..d1812a2d6d20
--- /dev/null
+++ b/modules/benchmarks/src/old/compiler/selector_benchmark.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 {CssSelector, SelectorMatcher} from '@angular/compiler/src/selector';
+import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
+import {bindAction, getIntParameter} from '@angular/testing/src/benchmark_util';
+
+export function main() {
+  BrowserDomAdapter.makeCurrent();
+  const count = getIntParameter('selectors');
+
+  let fixedMatcher;
+  const fixedSelectorStrings = [];
+  const fixedSelectors = [];
+  for (let i = 0; i < count; i++) {
+    fixedSelectorStrings.push(randomSelector());
+  }
+  for (let i = 0; i < count; i++) {
+    fixedSelectors.push(CssSelector.parse(fixedSelectorStrings[i]));
+  }
+  fixedMatcher = new SelectorMatcher();
+  for (let i = 0; i < count; i++) {
+    fixedMatcher.addSelectables(fixedSelectors[i], i);
+  }
+
+  function parse() {
+    const result = [];
+    for (let i = 0; i < count; i++) {
+      result.push(CssSelector.parse(fixedSelectorStrings[i]));
+    }
+    return result;
+  }
+
+  function addSelectable() {
+    const matcher = new SelectorMatcher();
+    for (let i = 0; i < count; i++) {
+      matcher.addSelectables(fixedSelectors[i], i);
+    }
+    return matcher;
+  }
+
+  function match() {
+    let matchCount = 0;
+    for (let i = 0; i < count; i++) {
+      fixedMatcher.match(fixedSelectors[i][0], (selector, selected) => { matchCount += selected; });
+    }
+    return matchCount;
+  }
+
+  bindAction('#parse', parse);
+  bindAction('#addSelectable', addSelectable);
+  bindAction('#match', match);
+}
+
+function randomSelector() {
+  let res = randomStr(5);
+  for (let i = 0; i < 3; i++) {
+    res += '.' + randomStr(5);
+  }
+  for (let i = 0; i < 3; i++) {
+    res += '[' + randomStr(3) + '=' + randomStr(6) + ']';
+  }
+  return res;
+}
+
+function randomStr(len) {
+  let s = '';
+  while (s.length < len) {
+    s += randomChar();
+  }
+  return s;
+}
+
+function randomChar() {
+  const n = randomNum(62);
+  if (n < 10) return n.toString();                        // 1-10
+  if (n < 36) return StringWrapper.fromCharCode(n + 55);  // A-Z
+  return StringWrapper.fromCharCode(n + 61);              // a-z
+}
+
+function randomNum(max) {
+  return Math.floor(Math.random() * max);
+}
diff --git a/modules/benchmarks/src/costs/index.html b/modules/benchmarks/src/old/costs/index.html
similarity index 100%
rename from modules/benchmarks/src/costs/index.html
rename to modules/benchmarks/src/old/costs/index.html
diff --git a/modules/benchmarks/src/old/costs/index.ts b/modules/benchmarks/src/old/costs/index.ts
new file mode 100644
index 000000000000..f36e4572786b
--- /dev/null
+++ b/modules/benchmarks/src/old/costs/index.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 {NgFor, NgIf} from '@angular/common';
+import {Component, Directive, DynamicComponentLoader, ViewContainerRef} from '@angular/core';
+import {ApplicationRef} from '@angular/core/src/application_ref';
+import {ListWrapper} from '@angular/facade/src/lang';
+import {BrowserModule, bootstrap} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {bindAction, getIntParameter} from '@angular/testing/src/benchmark_util';
+
+let testList = null;
+
+export function main() {
+  const size = getIntParameter('size');
+  testList = new Array(size);
+
+  platformBrowserDynamic().bootstrapModule(AppModule).then((ref) => {
+    const injector = ref.injector;
+    const app: AppComponent = ref.instance;
+    const appRef = injector.get(ApplicationRef);
+
+    bindAction('#reset', function() {
+      app.reset();
+      appRef.tick();
+    });
+
+    // Baseline (plain components)
+    bindAction('#createPlainComponents', function() {
+      app.createPlainComponents();
+      appRef.tick();
+    });
+
+    // Components with decorators
+    bindAction('#createComponentsWithDirectives', function() {
+      app.createComponentsWithDirectives();
+      appRef.tick();
+    });
+
+    // Components with decorators
+    bindAction('#createDynamicComponents', function() {
+      app.createDynamicComponents();
+      appRef.tick();
+    });
+  });
+}
+
+
+@Component({selector: 'dummy', template: `<div></div>`})
+class DummyComponent {
+}
+
+@Directive({selector: '[dummy-decorator]'})
+class DummyDirective {
+}
+
+@Directive({selector: 'dynamic-dummy'})
+class DynamicDummy {
+  constructor(loader: DynamicComponentLoader, location: ViewContainerRef) {
+    loader.loadNextToLocation(DummyComponent, location);
+  }
+}
+
+@Component({
+  selector: 'app',
+  directives: [NgIf, NgFor, DummyComponent, DummyDirective, DynamicDummy],
+  template: `
+    <div *ngIf="testingPlainComponents">
+      <dummy *ngFor="let i of list"></dummy>
+    </div>
+
+    <div *ngIf="testingWithDirectives">
+      <dummy dummy-decorator *ngFor="let i of list"></dummy>
+    </div>
+
+    <div *ngIf="testingDynamicComponents">
+      <dynamic-dummy *ngFor="let i of list"></dynamic-dummy>
+    </div>
+  `
+})
+class AppComponent {
+  list: any[];
+  testingPlainComponents: boolean;
+  testingWithDirectives: boolean;
+  testingDynamicComponents: boolean;
+
+  constructor() { this.reset(); }
+
+  reset(): void {
+    this.list = [];
+    this.testingPlainComponents = false;
+    this.testingWithDirectives = false;
+    this.testingDynamicComponents = false;
+  }
+
+  createPlainComponents(): void {
+    this.list = testList;
+    this.testingPlainComponents = true;
+  }
+
+  createComponentsWithDirectives(): void {
+    this.list = testList;
+    this.testingWithDirectives = true;
+  }
+
+  createDynamicComponents(): void {
+    this.list = testList;
+    this.testingDynamicComponents = true;
+  }
+}
+
+
+
+@NgModule({imports: [BrowserModule], bootstrap: [AppComponent]})
+class AppModule {
+}
diff --git a/modules/benchmarks/src/di/di_benchmark.html b/modules/benchmarks/src/old/di/di_benchmark.html
similarity index 100%
rename from modules/benchmarks/src/di/di_benchmark.html
rename to modules/benchmarks/src/old/di/di_benchmark.html
diff --git a/modules/benchmarks/src/old/di/di_benchmark.ts b/modules/benchmarks/src/old/di/di_benchmark.ts
new file mode 100644
index 000000000000..6d1e8fcc4875
--- /dev/null
+++ b/modules/benchmarks/src/old/di/di_benchmark.ts
@@ -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
+ */
+
+import {Injectable, ReflectiveInjector, ReflectiveKey} from '@angular/core';
+import {reflector} from '@angular/core/src/reflection/reflection';
+import {ReflectionCapabilities} from '@angular/core/src/reflection/reflection_capabilities';
+import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
+import {bindAction, getIntParameter, microBenchmark} from '@angular/testing/src/benchmark_util';
+
+let count = 0;
+
+function setupReflector() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+}
+
+export function main() {
+  BrowserDomAdapter.makeCurrent();
+  const iterations = getIntParameter('iterations');
+
+  // This benchmark does not use bootstrap and needs to create a reflector
+  setupReflector();
+  const bindings = [A, B, C, D, E];
+  const injector = ReflectiveInjector.resolveAndCreate(bindings);
+
+  const D_KEY = ReflectiveKey.get(D);
+  const E_KEY = ReflectiveKey.get(E);
+  const childInjector = injector.resolveAndCreateChild([])
+                            .resolveAndCreateChild([])
+                            .resolveAndCreateChild([])
+                            .resolveAndCreateChild([])
+                            .resolveAndCreateChild([]);
+
+  const variousProviders = [A, {provide: B, useClass: C}, [D, [E]], {provide: F, useValue: 6}];
+
+  const variousProvidersResolved = ReflectiveInjector.resolve(variousProviders);
+
+  function getByToken() {
+    for (let i = 0; i < iterations; ++i) {
+      injector.get(D);
+      injector.get(E);
+    }
+  }
+  function getByKey() {
+    for (let i = 0; i < iterations; ++i) {
+      injector.get(D_KEY);
+      injector.get(E_KEY);
+    }
+  }
+
+  function getChild() {
+    for (let i = 0; i < iterations; ++i) {
+      childInjector.get(D);
+      childInjector.get(E);
+    }
+  }
+
+  function instantiate() {
+    for (let i = 0; i < iterations; ++i) {
+      const child = injector.resolveAndCreateChild([E]);
+      child.get(E);
+    }
+  }
+
+  /**
+   * Creates an injector with a variety of provider types.
+   */
+  function createVariety() {
+    for (let i = 0; i < iterations; ++i) {
+      ReflectiveInjector.resolveAndCreate(variousProviders);
+    }
+  }
+
+  /**
+   * Same as [createVariety] but resolves providers ahead of time.
+   */
+  function createVarietyResolved() {
+    for (let i = 0; i < iterations; ++i) {
+      ReflectiveInjector.fromResolvedProviders(variousProvidersResolved);
+    }
+  }
+
+  bindAction('#getByToken', () => microBenchmark('injectAvg', iterations, getByToken));
+  bindAction('#getByKey', () => microBenchmark('injectAvg', iterations, getByKey));
+  bindAction('#getChild', () => microBenchmark('injectAvg', iterations, getChild));
+  bindAction('#instantiate', () => microBenchmark('injectAvg', iterations, instantiate));
+  bindAction('#createVariety', () => microBenchmark('injectAvg', iterations, createVariety));
+  bindAction(
+      '#createVarietyResolved',
+      () => microBenchmark('injectAvg', iterations, createVarietyResolved));
+}
+
+
+
+@Injectable()
+class A {
+  constructor() { count++; }
+}
+
+@Injectable()
+class B {
+  constructor(a: A) { count++; }
+}
+
+@Injectable()
+class C {
+  constructor(b: B) { count++; }
+}
+
+@Injectable()
+class D {
+  constructor(c: C, b: B) { count++; }
+}
+
+@Injectable()
+class E {
+  constructor(d: D, c: C) { count++; }
+}
+
+@Injectable()
+class F {
+  constructor(e: E, d: D) { count++; }
+}
diff --git a/modules/benchmarks/src/old/naive_infinite_scroll/app.ts b/modules/benchmarks/src/old/naive_infinite_scroll/app.ts
new file mode 100644
index 000000000000..4456bf3fe1c9
--- /dev/null
+++ b/modules/benchmarks/src/old/naive_infinite_scroll/app.ts
@@ -0,0 +1,94 @@
+/**
+ * @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 {NgFor, NgIf} from '@angular/common';
+import {Component, Directive} from '@angular/core';
+import {TimerWrapper} from '@angular/facade/src/async';
+import {document} from '@angular/facade/src/browser';
+import {isPresent} from '@angular/facade/src/lang';
+import {DOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {bindAction, getIntParameter} from '@angular/testing/src/benchmark_util';
+
+import {ScrollAreaComponent} from './scroll_area';
+
+
+@Component({
+  selector: 'scroll-app',
+  directives: [ScrollAreaComponent, NgIf, NgFor],
+  template: `
+  <div>
+    <div style="display: flex">
+      <scroll-area id="testArea"></scroll-area>
+    </div>
+    <div *ngIf="scrollAreas.length > 0">
+      <p>Following tables are only here to add weight to the UI:</p>
+      <scroll-area *ngFor="let scrollArea of scrollAreas"></scroll-area>
+    </div>
+  </div>`
+})
+export class App {
+  scrollAreas: number[];
+  iterationCount: number;
+  scrollIncrement: number;
+
+  constructor() {
+    let appSize = getIntParameter('appSize');
+    this.iterationCount = getIntParameter('iterationCount');
+    this.scrollIncrement = getIntParameter('scrollIncrement');
+    appSize = appSize > 1 ? appSize - 1 : 0;  // draw at least one table
+    this.scrollAreas = [];
+    for (let i = 0; i < appSize; i++) {
+      this.scrollAreas.push(i);
+    }
+    bindAction('#run-btn', () => { this.runBenchmark(); });
+    bindAction('#reset-btn', () => {
+      this._getScrollDiv().scrollTop = 0;
+      const existingMarker = this._locateFinishedMarker();
+      if (existingMarker != null) {
+        DOM.removeChild(document.body, existingMarker);
+      }
+    });
+  }
+
+  runBenchmark() {
+    const scrollDiv = this._getScrollDiv();
+    let n: number = this.iterationCount;
+    let scheduleScroll;
+    scheduleScroll = () => {
+      TimerWrapper.setTimeout(() => {
+        scrollDiv.scrollTop += this.scrollIncrement;
+        n--;
+        if (n > 0) {
+          scheduleScroll();
+        } else {
+          this._scheduleFinishedMarker();
+        }
+      }, 0);
+    };
+    scheduleScroll();
+  }
+
+  // Puts a marker indicating that the test is finished.
+  private _scheduleFinishedMarker() {
+    const existingMarker = this._locateFinishedMarker();
+    if (existingMarker != null) {
+      // Nothing to do, the marker is already there
+      return;
+    }
+    TimerWrapper.setTimeout(() => {
+      const finishedDiv = DOM.createElement('div');
+      finishedDiv.id = 'done';
+      DOM.setInnerHTML(finishedDiv, 'Finished');
+      DOM.appendChild(document.body, finishedDiv);
+    }, 0);
+  }
+
+  private _locateFinishedMarker() { return DOM.querySelector(document.body, '#done'); }
+
+  private _getScrollDiv() { return DOM.query('body /deep/ #scrollDiv'); }
+}
diff --git a/modules/benchmarks/src/old/naive_infinite_scroll/cells.ts b/modules/benchmarks/src/old/naive_infinite_scroll/cells.ts
new file mode 100644
index 000000000000..747ff2fd2a20
--- /dev/null
+++ b/modules/benchmarks/src/old/naive_infinite_scroll/cells.ts
@@ -0,0 +1,138 @@
+/**
+ * @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 {NgFor} from '@angular/common';
+import {Component, Directive} from '@angular/core';
+
+import {Account, Company, CustomDate, Offering, Opportunity, STATUS_LIST} from './common';
+
+export class HasStyle {
+  cellWidth: number;
+
+  constructor() {}
+
+  set width(w: number) { this.cellWidth = w; }
+}
+
+@Component({
+  selector: 'company-name',
+  inputs: ['width: cell-width', 'company'],
+  directives: [],
+  template: `<div [style.width.px]="cellWidth">{{company.name}}</div>`
+})
+export class CompanyNameComponent extends HasStyle {
+  company: Company;
+}
+
+@Component({
+  selector: 'opportunity-name',
+  inputs: ['width: cell-width', 'opportunity'],
+  directives: [],
+  template: `<div [style.width.px]="cellWidth">{{opportunity.name}}</div>`
+})
+export class OpportunityNameComponent extends HasStyle {
+  opportunity: Opportunity;
+}
+
+@Component({
+  selector: 'offering-name',
+  inputs: ['width: cell-width', 'offering'],
+  directives: [],
+  template: `<div [style.width.px]="cellWidth">{{offering.name}}</div>`
+})
+export class OfferingNameComponent extends HasStyle {
+  offering: Offering;
+}
+
+export class Stage {
+  name: string;
+  isDisabled: boolean;
+  backgroundColor: string;
+  apply: Function;
+}
+
+@Component({
+  selector: 'stage-buttons',
+  inputs: ['width: cell-width', 'offering'],
+  directives: [NgFor],
+  template: `
+      <div [style.width.px]="cellWidth">
+          <button *ngFor="let stage of stages"
+                  [disabled]="stage.isDisabled"
+                  [style.background-color]="stage.backgroundColor"
+                  on-click="setStage(stage)">
+            {{stage.name}}
+          </button>
+      </div>`
+})
+export class StageButtonsComponent extends HasStyle {
+  private _offering: Offering;
+  stages: Stage[];
+
+  get offering(): Offering { return this._offering; }
+
+  set offering(offering: Offering) {
+    this._offering = offering;
+    this._computeStageButtons();
+  }
+
+  setStage(stage: Stage) {
+    this._offering.status = stage.name;
+    this._computeStageButtons();
+  }
+
+  private _computeStageButtons() {
+    let disabled = true;
+    this.stages = STATUS_LIST
+                      .map((status) => {
+                        const isCurrent = this._offering.status == status;
+                        const stage = new Stage();
+                        stage.name = status;
+                        stage.isDisabled = disabled;
+                        stage.backgroundColor = disabled ? '#DDD' : isCurrent ? '#DDF' : '#FDD';
+                        if (isCurrent) {
+                          disabled = false;
+                        }
+                        return stage;
+                      })
+                      .slice();
+  }
+}
+
+@Component({
+  selector: 'account-cell',
+  inputs: ['width: cell-width', 'account'],
+  directives: [],
+  template: `
+      <div [style.width.px]="cellWidth">
+        <a href="/account/{{account.accountId}}">
+          {{account.accountId}}
+        </a>
+      </div>`
+})
+export class AccountCellComponent extends HasStyle {
+  account: Account;
+}
+
+@Component({
+  selector: 'formatted-cell',
+  inputs: ['width: cell-width', 'value'],
+  directives: [],
+  template: `<div [style.width.px]="cellWidth">{{formattedValue}}</div>`
+})
+export class FormattedCellComponent extends HasStyle {
+  formattedValue: string;
+
+  set value(value) {
+    if (value instanceof CustomDate) {
+      this.formattedValue = `${value.month}/${value.day}/${value.year}`;
+    } else {
+      this.formattedValue = value.toString();
+    }
+  }
+}
diff --git a/modules/benchmarks/src/old/naive_infinite_scroll/common.ts b/modules/benchmarks/src/old/naive_infinite_scroll/common.ts
new file mode 100644
index 000000000000..4d0a269a051e
--- /dev/null
+++ b/modules/benchmarks/src/old/naive_infinite_scroll/common.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 {Math} from '@angular/facade/src/math';
+
+export const ITEMS = 1000;
+export const ITEM_HEIGHT = 40;
+export const VISIBLE_ITEMS = 17;
+
+export const HEIGHT = ITEMS * ITEM_HEIGHT;
+export const VIEW_PORT_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
+
+export const COMPANY_NAME_WIDTH = 100;
+export const OPPORTUNITY_NAME_WIDTH = 100;
+export const OFFERING_NAME_WIDTH = 100;
+export const ACCOUNT_CELL_WIDTH = 50;
+export const BASE_POINTS_WIDTH = 50;
+export const KICKER_POINTS_WIDTH = 50;
+export const STAGE_BUTTONS_WIDTH = 220;
+export const BUNDLES_WIDTH = 120;
+export const DUE_DATE_WIDTH = 100;
+export const END_DATE_WIDTH = 100;
+export const AAT_STATUS_WIDTH = 100;
+export const ROW_WIDTH = COMPANY_NAME_WIDTH + OPPORTUNITY_NAME_WIDTH + OFFERING_NAME_WIDTH +
+    ACCOUNT_CELL_WIDTH + BASE_POINTS_WIDTH + KICKER_POINTS_WIDTH + STAGE_BUTTONS_WIDTH +
+    BUNDLES_WIDTH + DUE_DATE_WIDTH + END_DATE_WIDTH + AAT_STATUS_WIDTH;
+
+export const STATUS_LIST = ['Planned', 'Pitched', 'Won', 'Lost'];
+
+export const AAT_STATUS_LIST = ['Active', 'Passive', 'Abandoned'];
+
+// Imitate Streamy entities.
+
+// Just a non-trivial object. Nothing fancy or correct.
+export class CustomDate {
+  year: number;
+  month: number;
+  day: number;
+
+  constructor(y: number, m: number, d: number) {
+    this.year = y;
+    this.month = m;
+    this.day = d;
+  }
+
+  addDays(days: number): CustomDate {
+    let newDay = this.day + days;
+    const newMonth = this.month + Math.floor(newDay / 30);
+    newDay = newDay % 30;
+    const newYear = this.year + Math.floor(newMonth / 12);
+    return new CustomDate(newYear, newMonth, newDay);
+  }
+
+  static now(): CustomDate { return new CustomDate(2014, 1, 28); }
+}
+
+export class RawEntity {
+  private _data: Map<any, any>;
+
+  constructor() { this._data = new Map(); }
+
+  get(key: string) {
+    if (key.indexOf('.') == -1) {
+      return this._data[key];
+    }
+    const pieces = key.split('.');
+    const last = pieces[pieces.length - 1];
+    pieces.length = pieces.length - 1;
+    const target = this._resolve(pieces, this);
+    if (target == null) {
+      return null;
+    }
+    return target[last];
+  }
+
+  set(key: string, value) {
+    if (key.indexOf('.') == -1) {
+      this._data[key] = value;
+      return;
+    }
+    const pieces = key.split('.');
+    const last = pieces[pieces.length - 1];
+    pieces.length = pieces.length - 1;
+    const target = this._resolve(pieces, this);
+    target[last] = value;
+  }
+
+  remove(key: string) {
+    if (!StringWrapper.contains(key, '.')) {
+      return this._data.delete(key);
+    }
+    const pieces = key.split('.');
+    const last = pieces[pieces.length - 1];
+    pieces.length = pieces.length - 1;
+    const target = this._resolve(pieces, this);
+    return target.remove(last);
+  }
+
+  private _resolve(pieces, start) {
+    let cur = start;
+    for (let i = 0; i < pieces.length; i++) {
+      cur = cur[pieces[i]];
+      if (cur == null) {
+        return null;
+      }
+    }
+    return cur;
+  }
+}
+
+export class Company extends RawEntity {
+  get name(): string { return this.get('name'); }
+  set name(val: string) { this.set('name', val); }
+}
+
+export class Offering extends RawEntity {
+  get name(): string { return this.get('name'); }
+  set name(val: string) { this.set('name', val); }
+
+  get company(): Company { return this.get('company'); }
+  set company(val: Company) { this.set('company', val); }
+
+  get opportunity(): Opportunity { return this.get('opportunity'); }
+  set opportunity(val: Opportunity) { this.set('opportunity', val); }
+
+  get account(): Account { return this.get('account'); }
+  set account(val: Account) { this.set('account', val); }
+
+  get basePoints(): number { return this.get('basePoints'); }
+  set basePoints(val: number) { this.set('basePoints', val); }
+
+  get kickerPoints(): number { return this.get('kickerPoints'); }
+  set kickerPoints(val: number) { this.set('kickerPoints', val); }
+
+  get status(): string { return this.get('status'); }
+  set status(val: string) { this.set('status', val); }
+
+  get bundles(): string { return this.get('bundles'); }
+  set bundles(val: string) { this.set('bundles', val); }
+
+  get dueDate(): CustomDate { return this.get('dueDate'); }
+  set dueDate(val: CustomDate) { this.set('dueDate', val); }
+
+  get endDate(): CustomDate { return this.get('endDate'); }
+  set endDate(val: CustomDate) { this.set('endDate', val); }
+
+  get aatStatus(): string { return this.get('aatStatus'); }
+  set aatStatus(val: string) { this.set('aatStatus', val); }
+}
+
+export class Opportunity extends RawEntity {
+  get name(): string { return this.get('name'); }
+  set name(val: string) { this.set('name', val); }
+}
+
+export class Account extends RawEntity {
+  get accountId(): number { return this.get('accountId'); }
+  set accountId(val: number) { this.set('accountId', val); }
+}
diff --git a/modules/benchmarks/src/old/naive_infinite_scroll/index.html b/modules/benchmarks/src/old/naive_infinite_scroll/index.html
new file mode 100644
index 000000000000..496ab0aa3c5c
--- /dev/null
+++ b/modules/benchmarks/src/old/naive_infinite_scroll/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>AngularDart Scrolling Benchmark</title>
+</head>
+<body>
+  <form>
+    App size: <input type="text" name="appSize" value="1"><br>
+    Iteration count: <input type="text" name="iterationCount" value="1"><br>
+    Scroll increment: <input type="text" name="scrollIncrement" value="1"><br>
+  </form>
+  <div>
+    <button id="run-btn">Run</button>
+    <button id="reset-btn">Reset</button>
+  </div>
+  <scroll-app>Loading...</scroll-app>
+
+  $SCRIPTS$
+</body>
+</html>
diff --git a/modules/benchmarks/src/old/naive_infinite_scroll/index.ts b/modules/benchmarks/src/old/naive_infinite_scroll/index.ts
new file mode 100644
index 000000000000..e7ee5d71b9b9
--- /dev/null
+++ b/modules/benchmarks/src/old/naive_infinite_scroll/index.ts
@@ -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
+ */
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {App} from './app';
+
+@NgModule({imports: [BrowserModule], bootstrap: [App]})
+class AppModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
+}
diff --git a/modules/benchmarks/src/old/naive_infinite_scroll/random_data.ts b/modules/benchmarks/src/old/naive_infinite_scroll/random_data.ts
new file mode 100644
index 000000000000..89c7191b57e4
--- /dev/null
+++ b/modules/benchmarks/src/old/naive_infinite_scroll/random_data.ts
@@ -0,0 +1,82 @@
+/**
+ * @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 {AAT_STATUS_LIST, Account, Company, CustomDate, Offering, Opportunity, STATUS_LIST} from './common';
+
+export function generateOfferings(count: number): Offering[] {
+  const res = [];
+  for (let i = 0; i < count; i++) {
+    res.push(generateOffering(i));
+  }
+  return res;
+}
+
+export function generateOffering(seed: number): Offering {
+  const res = new Offering();
+  res.name = generateName(seed++);
+  res.company = generateCompany(seed++);
+  res.opportunity = generateOpportunity(seed++);
+  res.account = generateAccount(seed++);
+  res.basePoints = seed % 10;
+  res.kickerPoints = seed % 4;
+  res.status = STATUS_LIST[seed % STATUS_LIST.length];
+  res.bundles = randomString(seed++);
+  res.dueDate = randomDate(seed++);
+  res.endDate = randomDate(seed++, res.dueDate);
+  res.aatStatus = AAT_STATUS_LIST[seed % AAT_STATUS_LIST.length];
+  return res;
+}
+
+export function generateCompany(seed: number): Company {
+  const res = new Company();
+  res.name = generateName(seed);
+  return res;
+}
+
+export function generateOpportunity(seed: number): Opportunity {
+  const res = new Opportunity();
+  res.name = generateName(seed);
+  return res;
+}
+
+export function generateAccount(seed: number): Account {
+  const res = new Account();
+  res.accountId = seed;
+  return res;
+}
+
+const names = [
+  'Foo', 'Bar', 'Baz', 'Qux', 'Quux', 'Garply', 'Waldo', 'Fred', 'Plugh', 'Xyzzy', 'Thud', 'Cruft',
+  'Stuff'
+];
+
+function generateName(seed: number): string {
+  return names[seed % names.length];
+}
+
+const offsets = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+function randomDate(seed: number, minDate: CustomDate = null): CustomDate {
+  if (minDate == null) {
+    minDate = CustomDate.now();
+  }
+
+  return minDate.addDays(offsets[seed % offsets.length]);
+}
+
+const stringLengths = [5, 7, 9, 11, 13];
+const charCodeOffsets = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+
+function randomString(seed: number): string {
+  const len = stringLengths[seed % 5];
+  let str = '';
+  for (let i = 0; i < len; i++) {
+    str += StringWrapper.fromCharCode(97 + charCodeOffsets[seed % 9] + i);
+  }
+  return str;
+}
diff --git a/modules/benchmarks/src/old/naive_infinite_scroll/scroll_area.ts b/modules/benchmarks/src/old/naive_infinite_scroll/scroll_area.ts
new file mode 100644
index 000000000000..f0b71725d3ce
--- /dev/null
+++ b/modules/benchmarks/src/old/naive_infinite_scroll/scroll_area.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 {NgFor} from '@angular/common';
+import {Component, Directive} from '@angular/core';
+
+import {HEIGHT, ITEMS, ITEM_HEIGHT, Offering, ROW_WIDTH, VIEW_PORT_HEIGHT, VISIBLE_ITEMS} from './common';
+import {generateOfferings} from './random_data';
+import {ScrollItemComponent} from './scroll_item';
+
+@Component({
+  selector: 'scroll-area',
+  directives: [ScrollItemComponent, NgFor],
+  template: `
+    <div>
+        <div id="scrollDiv"
+             [style.height.px]="viewPortHeight"
+             style="width: 1000px; border: 1px solid #000; overflow: scroll"
+             on-scroll="onScroll($event)">
+            <div id="padding"></div>
+            <div id="inner">
+                <scroll-item
+                    *ngFor="let item of visibleItems"
+                    [offering]="item">
+                </scroll-item>
+            </div>
+        </div>
+    </div>`
+})
+export class ScrollAreaComponent {
+  private _fullList: Offering[];
+  visibleItems: Offering[];
+
+  viewPortHeight: number;
+  paddingDiv;
+  innerDiv;
+
+  constructor() {
+    this._fullList = generateOfferings(ITEMS);
+    this.visibleItems = [];
+    this.viewPortHeight = VIEW_PORT_HEIGHT;
+    this.onScroll(null);
+  }
+
+  onScroll(evt) {
+    let scrollTop = 0;
+    if (evt != null) {
+      const scrollDiv = evt.target;
+      if (this.paddingDiv == null) {
+        this.paddingDiv = scrollDiv.querySelector('#padding');
+      }
+      if (this.innerDiv == null) {
+        this.innerDiv = scrollDiv.querySelector('#inner');
+        this.innerDiv.style.setProperty('width', `${ROW_WIDTH}px`);
+      }
+      scrollTop = scrollDiv.scrollTop;
+    }
+    const iStart = Math.floor(scrollTop / ITEM_HEIGHT);
+    const iEnd = Math.min(iStart + VISIBLE_ITEMS + 1, this._fullList.length);
+    const padding = iStart * ITEM_HEIGHT;
+    if (this.innerDiv != null) {
+      this.innerDiv.style.setProperty('height', `${HEIGHT - padding}px`);
+    }
+    if (this.paddingDiv != null) {
+      this.paddingDiv.style.setProperty('height', `${padding}px`);
+    }
+    this.visibleItems = this._fullList.slice(iStart, iEnd);
+  }
+}
diff --git a/modules/benchmarks/src/old/naive_infinite_scroll/scroll_item.ts b/modules/benchmarks/src/old/naive_infinite_scroll/scroll_item.ts
new file mode 100644
index 000000000000..b88862454449
--- /dev/null
+++ b/modules/benchmarks/src/old/naive_infinite_scroll/scroll_item.ts
@@ -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 {Component, Directive} from '@angular/core';
+
+import {AccountCellComponent, CompanyNameComponent, FormattedCellComponent, OfferingNameComponent, OpportunityNameComponent, StageButtonsComponent} from './cells';
+import {AAT_STATUS_WIDTH, ACCOUNT_CELL_WIDTH, BASE_POINTS_WIDTH, BUNDLES_WIDTH, COMPANY_NAME_WIDTH, DUE_DATE_WIDTH, END_DATE_WIDTH, ITEM_HEIGHT, KICKER_POINTS_WIDTH, OFFERING_NAME_WIDTH, OPPORTUNITY_NAME_WIDTH, Offering, STAGE_BUTTONS_WIDTH} from './common';
+
+@Component({
+  selector: 'scroll-item',
+  inputs: ['offering'],
+  directives: [
+    CompanyNameComponent, OpportunityNameComponent, OfferingNameComponent, StageButtonsComponent,
+    AccountCellComponent, FormattedCellComponent
+  ],
+  template: `
+    <div class="row"
+      [style.height.px]="itemHeight"
+      [style.line-height.px]="itemHeight"
+      style="font-size: 18px; display: flex; justify-content: space-between;">
+        <company-name [company]="offering.company"
+                      [cell-width]="companyNameWidth">
+        </company-name>
+        <opportunity-name [opportunity]="offering.opportunity"
+                          [cell-width]="opportunityNameWidth">
+        </opportunity-name>
+        <offering-name [offering]="offering"
+                       [cell-width]="offeringNameWidth">
+        </offering-name>
+        <account-cell [account]="offering.account"
+                      [cell-width]="accountCellWidth">
+        </account-cell>
+        <formatted-cell [value]="offering.basePoints"
+                        [cell-width]="basePointsWidth">
+        </formatted-cell>
+        <formatted-cell [value]="offering.kickerPoints"
+                        [cell-width]="kickerPointsWidth">
+        </formatted-cell>
+        <stage-buttons [offering]="offering"
+                       [cell-width]="stageButtonsWidth">
+        </stage-buttons>
+        <formatted-cell [value]="offering.bundles"
+                        [cell-width]="bundlesWidth">
+        </formatted-cell>
+        <formatted-cell [value]="offering.dueDate"
+                        [cell-width]="dueDateWidth">
+        </formatted-cell>
+        <formatted-cell [value]="offering.endDate"
+                        [cell-width]="endDateWidth">
+        </formatted-cell>
+        <formatted-cell [value]="offering.aatStatus"
+                        [cell-width]="aatStatusWidth">
+        </formatted-cell>
+    </div>`
+})
+export class ScrollItemComponent {
+  offering: Offering;
+
+  itemHeight: number;
+
+  constructor() { this.itemHeight = ITEM_HEIGHT; }
+
+  get companyNameWidth() { return COMPANY_NAME_WIDTH; }
+  get opportunityNameWidth() { return OPPORTUNITY_NAME_WIDTH; }
+  get offeringNameWidth() { return OFFERING_NAME_WIDTH; }
+  get accountCellWidth() { return ACCOUNT_CELL_WIDTH; }
+  get basePointsWidth() { return BASE_POINTS_WIDTH; }
+  get kickerPointsWidth() { return KICKER_POINTS_WIDTH; }
+  get stageButtonsWidth() { return STAGE_BUTTONS_WIDTH; }
+  get bundlesWidth() { return BUNDLES_WIDTH; }
+  get dueDateWidth() { return DUE_DATE_WIDTH; }
+  get endDateWidth() { return END_DATE_WIDTH; }
+  get aatStatusWidth() { return AAT_STATUS_WIDTH; }
+}
diff --git a/modules/benchmarks/src/old/page_load/page_load.html b/modules/benchmarks/src/old/page_load/page_load.html
new file mode 100644
index 000000000000..86fc4742b2be
--- /dev/null
+++ b/modules/benchmarks/src/old/page_load/page_load.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<body>
+
+<h2>Angular2 page load benchmark</h2>
+
+<div>
+<app></app>
+</div>
+
+$SCRIPTS$
+</body>
+</html>
diff --git a/modules/benchmarks/src/old/page_load/page_load.ts b/modules/benchmarks/src/old/page_load/page_load.ts
new file mode 100644
index 000000000000..aba9a81e65d9
--- /dev/null
+++ b/modules/benchmarks/src/old/page_load/page_load.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {Component, NgModule} from 'angular2/core';
+
+@Component({selector: 'app', template: '<h1>Page Load Time</h1>'})
+class App {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  bootstrap: [App],
+})
+class AppModule {
+}
+
+platformBrowserDynamic().bootstrapModule(App).then(() => {
+  (<any>window).loadTime = Date.now() - performance.timing.navigationStart;
+  (<any>window).someConstant = 1234567890;
+});
diff --git a/modules/benchmarks/src/tree/BUILD.bazel b/modules/benchmarks/src/tree/BUILD.bazel
new file mode 100644
index 000000000000..77f2cb24bdce
--- /dev/null
+++ b/modules/benchmarks/src/tree/BUILD.bazel
@@ -0,0 +1,15 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "util_lib",
+    srcs = [
+        "util.ts",
+    ],
+    deps = [
+        "//modules/benchmarks/src:util_lib",
+        "//packages:types",
+        "//packages/core",
+    ],
+)
diff --git a/modules/benchmarks/src/tree/baseline/index.html b/modules/benchmarks/src/tree/baseline/index.html
new file mode 100644
index 000000000000..3bfb6340970c
--- /dev/null
+++ b/modules/benchmarks/src/tree/baseline/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Baseline Tree Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <tree id="root">Loading...</tree>
+  </div>
+
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_plain.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/modules/benchmarks/src/tree/baseline/index.ts b/modules/benchmarks/src/tree/baseline/index.ts
new file mode 100644
index 000000000000..8b081e9772ea
--- /dev/null
+++ b/modules/benchmarks/src/tree/baseline/index.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
+ */
+
+import {bindAction, profile} from '../../util';
+import {buildTree, emptyTree} from '../util';
+import {TreeComponent} from './tree';
+
+let tree: TreeComponent;
+
+function destroyDom() {
+  tree.data = emptyTree;
+}
+
+function createDom() {
+  tree.data = buildTree();
+}
+
+function noop() {}
+
+function init() {
+  const rootEl = document.querySelector('tree');
+  rootEl.textContent = '';
+  tree = new TreeComponent(rootEl);
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}
+
+init();
diff --git a/modules/benchmarks/src/tree/baseline/tree.ts b/modules/benchmarks/src/tree/baseline/tree.ts
new file mode 100644
index 000000000000..adf283b66c87
--- /dev/null
+++ b/modules/benchmarks/src/tree/baseline/tree.ts
@@ -0,0 +1,69 @@
+/**
+ * @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';
+
+export class TreeComponent {
+  private _renderNodes: any[];
+
+  constructor(private _rootEl: any) {}
+
+  set data(data: TreeNode) {
+    if (!data.left) {
+      this._destroy();
+    } else if (this._renderNodes) {
+      this._update(data, 0);
+    } else {
+      this._create(this._rootEl, data, 0);
+    }
+  }
+
+  private _create(parentNode: any, dataNode: TreeNode, index: number) {
+    if (!this._renderNodes) {
+      this._renderNodes = new Array(dataNode.transitiveChildCount);
+    }
+
+    const span = document.createElement('span');
+    if (dataNode.depth % 2 === 0) {
+      span.style.backgroundColor = 'grey';
+    }
+    parentNode.appendChild(span);
+    this._renderNodes[index] = span;
+    this._updateNode(span, dataNode);
+
+    if (dataNode.left) {
+      const leftTree = document.createElement('tree');
+      parentNode.appendChild(leftTree);
+      this._create(leftTree, dataNode.left, index + 1);
+    }
+    if (dataNode.right) {
+      const rightTree = document.createElement('tree');
+      parentNode.appendChild(rightTree);
+      this._create(rightTree, dataNode.right, index + dataNode.left.transitiveChildCount + 1);
+    }
+  }
+
+  private _updateNode(renderNode: any, dataNode: TreeNode) {
+    renderNode.textContent = ` ${dataNode.value} `;
+  }
+
+  private _update(dataNode: TreeNode, index: number) {
+    this._updateNode(this._renderNodes[index], dataNode);
+    if (dataNode.left) {
+      this._update(dataNode.left, index + 1);
+    }
+    if (dataNode.right) {
+      this._update(dataNode.right, index + dataNode.left.transitiveChildCount + 1);
+    }
+  }
+
+  private _destroy() {
+    while (this._rootEl.lastChild) this._rootEl.lastChild.remove();
+    this._renderNodes = null;
+  }
+}
diff --git a/modules/benchmarks/src/tree/incremental_dom/index.html b/modules/benchmarks/src/tree/incremental_dom/index.html
new file mode 100644
index 000000000000..99335bd3e48f
--- /dev/null
+++ b/modules/benchmarks/src/tree/incremental_dom/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Incremental-Dom Tree Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <tree id="root"></tree>
+  </div>
+
+  <script src="../../bootstrap_plain.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/modules/benchmarks/src/tree/incremental_dom/index.ts b/modules/benchmarks/src/tree/incremental_dom/index.ts
new file mode 100644
index 000000000000..d730a47c6602
--- /dev/null
+++ b/modules/benchmarks/src/tree/incremental_dom/index.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 {bindAction, profile} from '../../util';
+import {buildTree, emptyTree} from '../util';
+import {TreeComponent} from './tree';
+const {patch} = require('incremental-dom');
+
+export function main() {
+  let tree: TreeComponent;
+
+  function destroyDom() { tree.data = emptyTree; }
+
+  function createDom() { tree.data = buildTree(); }
+
+  function noop() {}
+
+  function init() {
+    tree = new TreeComponent(document.querySelector('tree'));
+
+    bindAction('#destroyDom', destroyDom);
+    bindAction('#createDom', createDom);
+
+    bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+    bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+  }
+
+  init();
+}
diff --git a/modules/benchmarks/src/tree/incremental_dom/tree.ts b/modules/benchmarks/src/tree/incremental_dom/tree.ts
new file mode 100644
index 000000000000..3915288cec35
--- /dev/null
+++ b/modules/benchmarks/src/tree/incremental_dom/tree.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
+ */
+
+import {TreeNode} from '../util';
+const {patch, elementOpen, elementClose, elementOpenStart, elementOpenEnd, text, attr} =
+    require('incremental-dom');
+
+export class TreeComponent {
+  constructor(private _rootEl: any) {}
+
+  set data(data: TreeNode) { patch(this._rootEl, () => this._render(data)); }
+
+  private _render(data: TreeNode) {
+    elementOpenStart('span', '', null);
+    if (data.depth % 2 === 0) {
+      attr('style', 'background-color: grey');
+    }
+    elementOpenEnd();
+    text(` ${data.value} `);
+    elementClose('span');
+    if (data.left) {
+      elementOpen('tree', '', null);
+      this._render(data.left);
+      elementClose('tree');
+    }
+    if (data.right) {
+      elementOpen('tree', '', null);
+      this._render(data.right);
+      elementClose('tree');
+    }
+  }
+}
diff --git a/modules/benchmarks/src/tree/iv/index.html b/modules/benchmarks/src/tree/iv/index.html
new file mode 100644
index 000000000000..fd0d7f85a74b
--- /dev/null
+++ b/modules/benchmarks/src/tree/iv/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>IV 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 id="root"></div>
+
+  <script type="text/javascript" src="tree.js"></script>
+</body>
+</html>
diff --git a/modules/benchmarks/src/tree/iv/tree.js b/modules/benchmarks/src/tree/iv/tree.js
new file mode 100644
index 000000000000..4c13b94cbc4c
--- /dev/null
+++ b/modules/benchmarks/src/tree/iv/tree.js
@@ -0,0 +1,9 @@
+/*
+ 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
+*/
+/* tslint:disable */
+// clang-format off
+function $nextRef(){return++refCount}function $el(e,n,r,t){var o={kind:"E",index:n,name:r,ref:t?++refCount:0,children:[],props:NO_PROPS,domNode:null};return e.children[e.children.length]=o,o}function $cc(e,n,r,t,o,i){var d=!0===t.$isClassCpt,a={kind:"G",index:n,cm:1,cpt:d?new t:null,render:d?null:t,props:r,changes:null,childChanges:null,ref:i?++refCount:0,children:[],domNode:null,sdGroup:null,ltGroup:null,parent:e,$lastChange:refreshCount,$lastRefresh:refreshCount};if(e.children[e.children.length]=a,a.cpt){var l=a.cpt;l.$node=a,l.$renderer=$iv.renderer,l.props=a.props,l.init&&l.init()}return o?a.ltGroup={kind:"G",index:n,cm:1,cpt:a.cpt,render:a.render,props:a.props,changes:null,childChanges:null,ref:0,children:[],domNode:null,sdGroup:a,ltGroup:null,parent:null,$lastChange:refreshCount,$lastRefresh:refreshCount}:(renderCpt(a),a)}function $cg(e,n,r,t){var o=n.children[e];if(o&&o.index===t)return o.childChanges=null,o;var i={kind:"G",index:t,cm:1,props:{},changes:null,childChanges:null,ref:++refCount,children:[],domNode:null,parent:n,$lastChange:refreshCount,$lastRefresh:refreshCount};return r.cm?n.children[n.children.length]=i:(n.children.splice(e,0,i),addChangeInstruction(i,{kind:"CG",node:i,parent:n,position:e,nextSibling:findNextDomSibling(n,e)})),i}function $lg(e,n){addChildChanges(e,n)}function $dg(e,n,r,t){for(var o=n.children[e];o&&o.index<t;){var i={kind:"DG",node:o,parent:n,position:e,nbrOfNextSiblings:n.children.length-1-e};n.children.splice(e,1),addChangeInstruction(o,i),addChildChanges(o,r),o=n.children[e]}}function $dt(e,n,r){var t={kind:"T",index:n,value:r,ref:++refCount,domNode:null};return e.children[e.children.length]=t}function $ct(e){return 0===e?"0":e||""}function $cm(e,n,r,t,o,i){i.props||(i.props={});var d=i.props[e];d||(d=i.props[e]={$isMap:!0,$lastChange:refreshCount}),r?(d=d[n]?d[n]:d[n]={$isMap:!0,$lastChange:refreshCount},t?(d=d[r]?d[r]={$isMap:!0,$lastChange:refreshCount}:d[r])[t]=o:d[r]=o):d[n]=o}function $ut(e,n,r){n.value!==e&&(n.value=e,addChangeInstruction(r,{kind:"UT",value:e,node:n}))}function $uc(e,n,r){r.props[e]=n}function $rc(e,n){var r=e;if(null!==r.sdGroup){var t=r;(r=r.sdGroup).props||(r.props={}),r.props.$content=t}else r.childChanges=null;renderCpt(r),addChildChanges(r,n)}function renderCpt(e){var n=$iv.node;if($iv.node=e,e.cpt){var r=e.cpt;if(!(r.$node.$lastRefresh===refreshCount)&&r.shouldUpdate&&!r.shouldUpdate())return;r.render(),r.$node.$lastRefresh=refreshCount}else e.render(e.props),e.$lastRefresh=refreshCount;$iv.node=n}function $refreshTemplate(e,n,r,t){var o=$iv.node,i=$iv.renderer;refreshCount++,r.childChanges=null,$iv.node=r,$iv.renderer=e,n(t),r.$lastRefresh=refreshCount,$iv.node=o,$iv.renderer=i;var d=[];retrieveChanges(r,d),e.processChanges(d)}function retrieveChanges(e,n,r){void 0===r&&(r=!0);var t,o=e.changes;if(t=e.childChanges){for(d=0;t.length>d;d++)retrieveChanges(t[d],n,r);r&&(e.childChanges=null)}if(o&&o.length){for(var i=n.length,d=0;o.length>d;d++,i++)n[i]=o[d];r&&(e.changes=null)}}function addChangeInstruction(e,n){e.changes?e.changes.splice(e.changes.length,0,n):e.changes=[n],e.$lastChange=refreshCount}function addChildChanges(e,n){(e.changes||e.childChanges)&&(n.childChanges?n.childChanges.push(e):n.childChanges=[e],n.$lastChange=refreshCount)}function findNextDomSibling(e,n,r){void 0===r&&(r=!1);var t,o=e.children;if(n+1<o.length)return"E"===(t=o[n+1]).kind?t:"T"===t.kind?t:"G"===t.kind?findNextDomSibling(t,-1,!0):findNextDomSibling(e,n+1);if("E"===e.kind)return null;if("G"===e.kind){var i=e.parent;if(i&&i!==e)for(var d=0;i.children.length>d;d++)if(i.children[d]===e)return findNextDomSibling(i,d)}return null}function htmlRenderer(e,n,r){return new Renderer(e,n,r)}function processChanges(e,n,r){for(var t=0,o=e;t<o.length;t++){var i=o[t];if("CG"===i.kind){var d=i;if(d.parent)insertGroupContent(d.node,d.parent.domNode,d.nextSibling,r);else{var a=r.createDocFragment();createDomNode(d.node,a,r,null),n.appendChild(a),replaceDomNode(a,n,d.node)}}else if("UT"===i.kind)(s=i.node)&&s.domNode&&(s.domNode.textContent=s.value);else if("UP"===i.kind){var l=i,s=l.node,c=l.name;s&&s.domNode&&(s.domNode.namespaceURI.match(RX_HTML)?s.domNode[c]=l.value:s.domNode.setAttribute(c,l.value))}else if("DG"===i.kind){var u=i;removeGroupFromDom(u.node,!0,0===u.position&&0===u.nbrOfNextSiblings)}else if("UA"===i.kind){var h=i;h.node.domNode.setAttribute(h.name,h.value)}else if("RG"===i.kind){var f=i;removeGroupFromDom(f.oldNode,!0,0===f.position&&null===f.nextSibling),insertGroupContent(f.newNode,f.parent?f.parent.domNode:null,f.nextSibling,r)}else if("UM"===i.kind){var p=i,m=p.node.domNode;if(p.names)updateMapValue(m,p.names[0],p.names[1],p.value);else if(p.name){var g=p.value;for(var C in g)"$"!==C[0]&&g.hasOwnProperty(C)&&updateMapValue(m,p.name,C,g[C])}}else console.error("[iv html renderer] Unsupported change kind: "+i.kind)}}function updateMapValue(e,n,r,t){"style"===n?e.style[r]=t:"class"===n||"className"===n||"classList"===n?t?e.classList.add(r):e.classList.remove(r):console.error("[iv html renderer] Unsupported property map:"+n)}function insertGroupContent(e,n,r,t){var o=t.createDocFragment(),i=null;if(n&&(i=n.namespaceURI)&&i.match(RX_HTML)&&(i=null),createDomNode(e,o,t,i),n){var d=!1;r?r.domNode&&(n.insertBefore(o,r.domNode),d=!0):(n.appendChild(o),d=!0),d&&replaceDomNode(o,n,e)}}function createDomNode(e,n,r,t){if(e.domNode){var o=e.domNode;return o.parentNode&&o.parentNode.removeChild(o),void n.appendChild(o)}switch(e.kind){case"E":createElementDomNode(e,n,r,t);break;case"G":e.domNode=n,processChildNodes(e,n,r,t);break;case"T":var i=r.createTextNode(e.value);e.domNode=i,n.appendChild(i);break;case"D":e.domNode=i;break;default:console.error("[iv html renderer] Invalid node kind: "+e.kind)}}function processChildNodes(e,n,r,t){for(var o=e.children,i=o.length,d=0;i>d;d++)createDomNode(o[d],n,r,t)}function createElementDomNode(e,n,r,t){var o,i,d=e.props,a=e.atts;if(a&&a.xmlns&&(t=a.xmlns),i=t?r.createElementNS(t,e.name):r.createElement(e.name),a)for(var l in a)a.hasOwnProperty(l)&&i.setAttribute(l,a[l]);if(d)if(t&&!t.match(RX_HTML))for(var l in d)d.hasOwnProperty(l)&&i.setAttribute(l,d[l]);else for(var l in d)if(d.hasOwnProperty(l)&&void 0!==(o=d[l]))if(o&&o.$isMap)if("classList"===l){var s=[];a&&(a.class?s.push(a.class):a.className&&s.push(a.className));for(var c in o)o.hasOwnProperty(c)&&"$"!==c[0]&&o[c]&&s.push(c);s.length&&(i.className=s.join(" "))}else"style"===l&&setMapProperties(i.style,o);else o.call?"o"===l[0]&&addEvtListener(i,e,l):i[l]=o;e.domNode=i,n.appendChild(i),processChildNodes(e,i,r,t)}function setMapProperties(e,n){for(var r in n)n.hasOwnProperty(r)&&"$"!==r[0]&&(e[r]=n[r])}function addEvtListener(e,n,r){e.addEventListener(r.substring(2),function(e){n.props[r].call(n,e)})}function removeGroupFromDom(e,n,r){var t,o=e.children,i=e.domNode;if(o){var d=o.length;n&&r&&countGroupDomChildren(e)===i.childNodes.length&&(i.textContent="",n=!1);for(var a=0;d>a;a++)"G"===(t=o[a]).kind?removeGroupFromDom(t,n,!1):"T"!==t.kind&&"E"!==t.kind||n&&t.domNode&&t.domNode.parentNode===i&&i.removeChild(t.domNode)}e.domNode=null}function countGroupDomChildren(e){for(var n,r,t=0,o=e.children,i=o.length,d=0;i>d;d++)"G"===(r=(n=o[d]).kind)?t+=countGroupDomChildren(n):"D"!==r&&t++;return t}function replaceDomNode(e,n,r){if(e!==n&&r.domNode===e&&(r.domNode=n,"G"===r.kind))for(var t=r.children,o=0;t.length>o;o++)replaceDomNode(e,n,t[o])}function getIntParameter(e){return parseInt(getStringParameter(e),10)}function getStringParameter(e){for(var n,r,t=document.querySelectorAll('input[name="'+e+'"]'),o=0;o<t.length;o++){var i=(r=t[o]).type;if("radio"!=i&&"checkbox"!=i||r.checked){n=r.value;break}}if(null==n)throw new Error("Could not find and input field with name "+e);return n}function bindAction(e,n){document.querySelector(e).addEventListener("click",n)}function profile(e,n,r){return function(){window.console.profile(r);for(var t=0,o=0;o++<150;){var i=window.performance.now();e(),t+=window.performance.now()-i,n()}window.console.profileEnd(),window.console.log("Iterations: "+o+"; time: "+t/o+" ms / iteration")}}function urlParamsToForm(){for(var e,n=/(\w+)=(\w+)/g,r=decodeURIComponent(location.search);e=n.exec(r);)for(var t=e[1],o=e[2],i=document.querySelectorAll('input[name="'+t+'"]'),d=void 0,a=0;a<i.length;a++)"radio"===(d=i[a]).type||"checkbox"===d.type?d.checked=d.value===o:d.value=o}function init(){maxDepth=getIntParameter("depth"),treeCreateCount=0,numberData=_buildTree(0,numberValues),charData=_buildTree(0,charValues)}function _buildTree(e,n){var r=e<maxDepth?_buildTree(e+1,n):null;return new TreeNode(n(e),e,maxDepth,r,r)}function buildTree(){return++treeCreateCount%2?numberData:charData}function numberValues(e){return e.toString()}function charValues(e){return String.fromCharCode("A".charCodeAt(0)+e%26)}function refresh(e){renderer||(renderer=htmlRenderer(document.getElementById("root"),tree)),renderer.refresh({data:e})}function destroyDom(){refresh(emptyTree)}function createDom(){refresh(data=buildTree())}function detectChanges(){for(var e=0;e<10;e++)refresh(data);detectChangesRuns+=10,numberOfChecksEl.textContent=""+detectChangesRuns}function getColor(e){return e%2?"":"grey"}function tree(e){var n,r,t,o,i=$iv.node,d=e.data;i.cm?(r=$el(n=$el(i,1,"tree",1),2,"span",0),$cm("style","backgroundColor",0,0,getColor(d.depth),r),$dt(r,3,""+$ct(d.value))):(t=(r=(n=i.children[0]).children[0]).children[0],$ut(""+$ct(d.value),t,i)),o=1,null!=d.left&&(r=$cg(o,n,i,4),o++,0,r.cm?(t=$cc(r,5,{data:d.left},tree,0,1),r.cm=0):(t=r.children[0],$uc("data",d.left,t),$rc(t,r)),$lg(r,i)),null!=d.right&&($dg(o,n,i,6),r=$cg(o,n,i,6),o++,0,r.cm?(t=$cc(r,7,{data:d.right},tree,0,1),r.cm=0):(t=r.children[0],$uc("data",d.right,t),$rc(t,r)),$lg(r,i)),i.cm?i.cm=0:$dg(o,n,i,8)}function noop(){}var EMPTY_PROPS={},NO_PROPS=void 0,refreshCount=0,refCount=0,$iv={node:null,renderer:null,reset:function(e){1===e?refCount=0:2===e&&(refreshCount=0)},get refreshCount(){return refreshCount}},RX_HTML=/html/i,Renderer=function(){function e(e,n,r){this.htmlElement=e,this.vdFunction=n;var t=this.vdom={kind:"G",index:0,ref:$nextRef(),cm:1,changes:null,childChanges:null,children:[],domNode:null,parent:null,$lastChange:$iv.refreshCount,$lastRefresh:$iv.refreshCount},o={kind:"CG",node:t,parent:null,position:-1,nextSibling:null};t.changes=[o],this.doc=r||{createDocFragment:function(){return document.createDocumentFragment()},createTextNode:function(e){return document.createTextNode(e)},createElement:function(e){return document.createElement(e)},createElementNS:function(e,n){return document.createElementNS(e,n)}}}return e.prototype.refresh=function(e){$refreshTemplate(this,this.vdFunction,this.vdom,e)},e.prototype.processChanges=function(e){processChanges(e,this.htmlElement,this.doc)},e}();urlParamsToForm();var TreeNode=function(){function e(e,n,r,t,o){this.value=e,this.depth=n,this.maxDepth=r,this.left=t,this.right=o,this.transitiveChildCount=Math.pow(2,this.maxDepth-this.depth+1)-1,this.children=this.left?[this.left,this.right]:[]}return Object.defineProperty(e.prototype,"style",{get:function(){return this.depth%2==0?"background-color: grey":""},enumerable:!0,configurable:!0}),e}(),treeCreateCount,maxDepth,numberData,charData;init();var emptyTree=new TreeNode("",0,0,null,null),renderer,data=emptyTree,numberOfChecksEl=document.getElementById("numberOfChecks"),detectChangesRuns=0;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"));
+// clang-format on
diff --git a/modules/benchmarks/src/tree/ng1/index.html b/modules/benchmarks/src/tree/ng1/index.html
new file mode 100644
index 000000000000..ee7c5b37e609
--- /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 000000000000..d4dd3c80ae2a
--- /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 000000000000..d914fa9b7b1b
--- /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/index.html b/modules/benchmarks/src/tree/ng2/index.html
new file mode 100644
index 000000000000..266162c0a469
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Ng2 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">Loading...</tree>
+  </div>
+
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
diff --git a/modules/benchmarks/src/tree/ng2/index.ts b/modules/benchmarks/src/tree/ng2/index.ts
new file mode 100644
index 000000000000..3dc8eab92742
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2/index.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {init} from './init';
+import {AppModule} from './tree';
+
+export function main() {
+  enableProdMode();
+  platformBrowserDynamic().bootstrapModule(AppModule).then(init);
+}
diff --git a/modules/benchmarks/src/tree/ng2/index_aot.ts b/modules/benchmarks/src/tree/ng2/index_aot.ts
new file mode 100644
index 000000000000..20a343d703f4
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2/index_aot.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import {init} from './init';
+import {AppModuleNgFactory} from './tree.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(init);
diff --git a/modules/benchmarks/src/tree/ng2/init.ts b/modules/benchmarks/src/tree/ng2/init.ts
new file mode 100644
index 000000000000..06d5b861283b
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2/init.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 {ApplicationRef, NgModuleRef} from '@angular/core';
+
+import {bindAction, profile} from '../../util';
+import {buildTree, emptyTree} from '../util';
+
+import {AppModule, TreeComponent} from './tree';
+
+export function init(moduleRef: NgModuleRef<AppModule>) {
+  let tree: TreeComponent;
+  let appRef: ApplicationRef;
+  let detectChangesRuns = 0;
+
+  function destroyDom() {
+    tree.data = emptyTree;
+    appRef.tick();
+  }
+
+  function createDom() {
+    tree.data = buildTree();
+    appRef.tick();
+  }
+
+  function detectChanges() {
+    for (let i = 0; i < 10; i++) {
+      appRef.tick();
+    }
+    detectChangesRuns += 10;
+    numberOfChecksEl.textContent = `${detectChangesRuns}`;
+  }
+
+  function noop() {}
+
+  const injector = moduleRef.injector;
+  appRef = injector.get(ApplicationRef);
+  const numberOfChecksEl = document.getElementById('numberOfChecks') !;
+
+  tree = appRef.components[0].instance;
+
+  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'));
+}
diff --git a/modules/benchmarks/src/tree/ng2/tree.ts b/modules/benchmarks/src/tree/ng2/tree.ts
new file mode 100644
index 000000000000..eea897e5cb6a
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2/tree.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 {Component, NgModule} from '@angular/core';
+import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
+
+import {TreeNode, emptyTree} from '../util';
+
+let trustedEmptyColor: SafeStyle;
+let trustedGreyColor: SafeStyle;
+
+@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: TreeNode = emptyTree;
+  get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
+}
+
+@NgModule({imports: [BrowserModule], bootstrap: [TreeComponent], declarations: [TreeComponent]})
+export class AppModule {
+  constructor(sanitizer: DomSanitizer) {
+    trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('');
+    trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey');
+  }
+}
diff --git a/modules/benchmarks/src/tree/ng2_next/README.md b/modules/benchmarks/src/tree/ng2_next/README.md
new file mode 100644
index 000000000000..06f8c442a74a
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_next/README.md
@@ -0,0 +1,46 @@
+# Ng2 Next Benchmark
+
+This benchmark uses the upcoming view engine for Angular, which moves
+more functionality from codegen into runtime to reduce generated code size.
+
+As we introduce more runtime code, we need to be very careful to not
+regress in performance, compared to the pure codegen solution.
+
+## Initial results: size of Deep Tree Benchmark
+
+File size for Tree benchmark template,
+view class of the component + the 2 embedded view classes (without imports nor host view factory):
+
+                               | bytes | ratio | bytes (gzip) | ratio (gzip)
+------------------------------ | ----- | ----- | ------------ | ------------
+Source template + annotation   | 245   | 1x    | 159          | 1x
+Gen code (Closure minified)    | 2693  | 11.9x | 746          | 4.7x
+New View Engine (minified)     | 868   | 3.5x  | 436          | 2.7x
+
+## Initial results: performance of Deep Tree Benchmark
+
+Measured locally on a MacBook Pro.
+
+BENCHMARK deepTree....
+Description:
+- bundles: false
+- depth: 11
+- forceGc: false
+- regressionSlopeMetric: scriptTime
+- sampleSize: 20
+- userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36
+
+...createOnly   |           gcAmount |             gcTime |        majorGcTime |     pureScriptTime |         renderTime |         scriptTime
+--------------- | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------
+ng2             |      11461.24+-21% |         12.35+-42% |         1.15+-429% |          72.49+-4% |          49.61+-4% |          82.69+-6%
+ng2 next        |       6207.77+-93% |          9.84+-84% |         3.35+-238% |          73.95+-4% |          49.86+-4% |         77.53+-10%
+
+...update       |           gcAmount |             gcTime |        majorGcTime |     pureScriptTime |         renderTime |         scriptTime
+--------------- | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------
+ng2             |               0.00 |         0.00+-435% |         0.00+-435% |          13.34+-8% |          28.55+-8% |          13.34+-8%
+ng2 next        |       175.02+-435% |         0.74+-435% |         0.00+-302% |         20.55+-12% |          28.00+-6% |         20.55+-12%
+
+...pure cd (10x) |           gcAmount |             gcTime |        majorGcTime |     pureScriptTime |         renderTime |         scriptTime
+--------------- | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------
+ng2             |      2155.57+-238% |         0.24+-238% |         0.00+-238% |          19.32+-9% |           2.54+-6% |          19.32+-9%
+ng2 next        |       908.12+-366% |         1.62+-325% |         0.49+-435% |          30.66+-6% |          2.62+-19% |          30.66+-6%
diff --git a/modules/benchmarks/src/tree/ng2_next/index.html b/modules/benchmarks/src/tree/ng2_next/index.html
new file mode 100644
index 000000000000..69fcee27da04
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_next/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Ng2 Next 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">Loading...</tree>
+  </div>
+
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
diff --git a/modules/benchmarks/src/tree/ng2_next/index.ts b/modules/benchmarks/src/tree/ng2_next/index.ts
new file mode 100644
index 000000000000..1de8c0041cf4
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_next/index.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+
+import {bindAction, profile} from '../../util';
+import {buildTree, emptyTree} from '../util';
+
+import {AppModule, TreeComponent} from './tree';
+
+export function main() {
+  let tree: TreeComponent;
+  let appMod: AppModule;
+  let detectChangesRuns = 0;
+
+  function destroyDom() {
+    tree.data = emptyTree;
+    appMod.tick();
+  }
+
+  function createDom() {
+    tree.data = buildTree();
+    appMod.tick();
+  }
+
+  function detectChanges() {
+    for (let i = 0; i < 10; i++) {
+      appMod.tick();
+    }
+    detectChangesRuns += 10;
+    numberOfChecksEl.textContent = `${detectChangesRuns}`;
+  }
+
+  function noop() {}
+
+  const numberOfChecksEl = document.getElementById('numberOfChecks');
+
+  enableProdMode();
+  appMod = new AppModule();
+  appMod.bootstrap();
+  tree = appMod.componentRef.instance;
+
+  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'));
+}
diff --git a/modules/benchmarks/src/tree/ng2_next/tree.ts b/modules/benchmarks/src/tree/ng2_next/tree.ts
new file mode 100644
index 000000000000..ebd8c05e6a55
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_next/tree.ts
@@ -0,0 +1,131 @@
+/**
+ * @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 {NgIf} from '@angular/common';
+import {ComponentFactory, ComponentFactoryResolver, ComponentRef, ErrorHandler, Injector, NgModuleRef, RendererFactory2, RootRenderer, Sanitizer, TemplateRef, ViewContainerRef, ɵArgumentType as ArgumentType, ɵBindingFlags as BindingFlags, ɵNodeFlags as NodeFlags, ɵViewDefinition as ViewDefinition, ɵViewFlags as ViewFlags, ɵand as anchorDef, ɵccf as createComponentFactory, ɵdid as directiveDef, ɵeld as elementDef, ɵinitServicesIfNeeded as initServicesIfNeeded, ɵted as textDef, ɵvid as viewDef} from '@angular/core';
+import {SafeStyle, ɵDomRendererFactory2 as DomRendererFactory2, ɵDomSanitizerImpl as DomSanitizerImpl} from '@angular/platform-browser';
+
+import {TreeNode, emptyTree} from '../util';
+
+let trustedEmptyColor: SafeStyle;
+let trustedGreyColor: SafeStyle;
+
+export class TreeComponent {
+  data: TreeNode = emptyTree;
+  get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
+}
+
+let viewFlags = ViewFlags.None;
+
+function TreeComponent_Host(): ViewDefinition {
+  return viewDef(viewFlags, [
+    elementDef(0, NodeFlags.None, null, null, 1, 'tree', null, null, null, null, TreeComponent_0),
+    directiveDef(1, NodeFlags.Component, null, 0, TreeComponent, []),
+  ]);
+}
+
+function TreeComponent_1() {
+  return viewDef(
+      viewFlags,
+      [
+        elementDef(
+            0, NodeFlags.None, null, null, 1, 'tree', null, null, null, null, TreeComponent_0),
+        directiveDef(1, NodeFlags.Component, null, 0, TreeComponent, [], {data: [0, 'data']}),
+      ],
+      (check, view) => {
+        const cmp = view.component;
+        check(view, 1, ArgumentType.Inline, cmp.data.left);
+      });
+}
+
+function TreeComponent_2() {
+  return viewDef(
+      viewFlags,
+      [
+        elementDef(
+            0, NodeFlags.None, null, null, 1, 'tree', null, null, null, null, TreeComponent_0),
+        directiveDef(1, NodeFlags.Component, null, 0, TreeComponent, [], {data: [0, 'data']}),
+      ],
+      (check, view) => {
+        const cmp = view.component;
+        check(view, 1, ArgumentType.Inline, cmp.data.left);
+      });
+}
+
+function TreeComponent_0(): ViewDefinition {
+  return viewDef(
+      viewFlags,
+      [
+        elementDef(
+            0, NodeFlags.None, null, null, 1, 'span', null,
+            [[BindingFlags.TypeElementStyle, 'backgroundColor', null]]),
+        textDef(1, null, [' ', ' ']),
+        anchorDef(NodeFlags.EmbeddedViews, null, null, 1, null, TreeComponent_1),
+        directiveDef(
+            3, NodeFlags.None, null, 0, NgIf, [ViewContainerRef, TemplateRef], {ngIf: [0, 'ngIf']}),
+        anchorDef(NodeFlags.EmbeddedViews, null, null, 1, null, TreeComponent_2),
+        directiveDef(
+            5, NodeFlags.None, null, 0, NgIf, [ViewContainerRef, TemplateRef], {ngIf: [0, 'ngIf']}),
+      ],
+      (check, view) => {
+        const cmp = view.component;
+        check(view, 3, ArgumentType.Inline, cmp.data.left != null);
+        check(view, 5, ArgumentType.Inline, cmp.data.right != null);
+      },
+      (check, view) => {
+        const cmp = view.component;
+        check(view, 0, ArgumentType.Inline, cmp.bgColor);
+        check(view, 1, ArgumentType.Inline, cmp.data.value);
+      });
+}
+
+export class AppModule implements Injector, NgModuleRef<any> {
+  private sanitizer: DomSanitizerImpl;
+  private componentFactory: ComponentFactory<TreeComponent>;
+  private renderer2: RendererFactory2;
+
+  componentRef: ComponentRef<TreeComponent>;
+
+  constructor() {
+    initServicesIfNeeded();
+    this.sanitizer = new DomSanitizerImpl(document);
+    this.renderer2 = new DomRendererFactory2(null, null);
+    trustedEmptyColor = this.sanitizer.bypassSecurityTrustStyle('');
+    trustedGreyColor = this.sanitizer.bypassSecurityTrustStyle('grey');
+    this.componentFactory =
+        createComponentFactory('#root', TreeComponent, TreeComponent_Host, {}, {}, []);
+  }
+
+  get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
+    switch (token) {
+      case RendererFactory2:
+        return this.renderer2;
+      case Sanitizer:
+        return this.sanitizer;
+      case RootRenderer:
+      case ErrorHandler:
+        return null;
+      case NgModuleRef:
+        return this;
+    }
+    return Injector.NULL.get(token, notFoundValue);
+  }
+
+  bootstrap() {
+    this.componentRef =
+        this.componentFactory.create(Injector.NULL, [], this.componentFactory.selector, this);
+  }
+
+  tick() { this.componentRef.changeDetectorRef.detectChanges(); }
+
+  get injector() { return this; }
+  get componentFactoryResolver(): ComponentFactoryResolver { return null; }
+  get instance() { return this; }
+  destroy() {}
+  onDestroy(callback: () => void) {}
+}
diff --git a/modules/benchmarks/src/tree/ng2_static/index.html b/modules/benchmarks/src/tree/ng2_static/index.html
new file mode 100644
index 000000000000..3b4659e1d22b
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_static/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<body>
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Ng2 Static Tree Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <tree id="root"></tree>
+  </div>
+
+  <script src="../../bootstrap_ng2.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/modules/benchmarks/src/tree/ng2_static/index.ts b/modules/benchmarks/src/tree/ng2_static/index.ts
new file mode 100644
index 000000000000..f4f34cb5465f
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_static/index.ts
@@ -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
+ */
+
+import {ApplicationRef, enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {bindAction, profile} from '../../util';
+import {buildTree, emptyTree} from '../util';
+
+import {AppModule, RootTreeComponent} from './tree';
+
+export function main() {
+  let tree: RootTreeComponent;
+  let appRef: ApplicationRef;
+
+  function destroyDom() {
+    tree.data = emptyTree;
+    appRef.tick();
+  }
+
+  function createDom() {
+    tree.data = buildTree();
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  function init() {
+    enableProdMode();
+    platformBrowserDynamic().bootstrapModule(AppModule).then((ref) => {
+      const injector = ref.injector;
+      appRef = injector.get(ApplicationRef);
+
+      tree = appRef.components[0].instance;
+      bindAction('#destroyDom', destroyDom);
+      bindAction('#createDom', createDom);
+      bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+      bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+    });
+  }
+
+  init();
+}
diff --git a/modules/benchmarks/src/tree/ng2_static/tree.ts b/modules/benchmarks/src/tree/ng2_static/tree.ts
new file mode 100644
index 000000000000..00d10e74a2dc
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_static/tree.ts
@@ -0,0 +1,58 @@
+/**
+ * @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, Input, NgModule} from '@angular/core';
+import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
+
+import {TreeNode, emptyTree, maxDepth} from '../util';
+
+let trustedEmptyColor: SafeStyle;
+let trustedGreyColor: SafeStyle;
+
+function createTreeComponent(level: number, isLeaf: boolean) {
+  const nextTreeEl = `tree${level+1}`;
+  let template = `<span [style.backgroundColor]="bgColor"> {{data.value}} </span>`;
+  if (!isLeaf) {
+    template +=
+        `<${nextTreeEl} [data]='data.right'></${nextTreeEl}><${nextTreeEl} [data]='data.left'></${nextTreeEl}>`;
+  }
+
+  @Component({selector: `tree${level}`, template: template})
+  class TreeComponent {
+    @Input()
+    data: TreeNode;
+    get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
+  }
+
+  return TreeComponent;
+}
+
+@Component({selector: 'tree', template: `<tree0 *ngIf="data.left != null" [data]='data'></tree0>`})
+export class RootTreeComponent {
+  @Input()
+  data: TreeNode = emptyTree;
+}
+
+function createModule(): any {
+  const components: any[] = [RootTreeComponent];
+  for (let i = 0; i <= maxDepth; i++) {
+    components.push(createTreeComponent(i, i === maxDepth));
+  }
+
+  @NgModule({imports: [BrowserModule], bootstrap: [RootTreeComponent], declarations: [components]})
+  class AppModule {
+    constructor(sanitizer: DomSanitizer) {
+      trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('');
+      trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey');
+    }
+  }
+
+  return AppModule;
+}
+
+export const AppModule = createModule();
diff --git a/modules/benchmarks/src/tree/ng2_switch/index.html b/modules/benchmarks/src/tree/ng2_switch/index.html
new file mode 100644
index 000000000000..2f3d6a3d7bcb
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_switch/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Ng2 with NgSwitch Tree Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <tree id="root">Loading...</tree>
+  </div>
+
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
diff --git a/modules/benchmarks/src/tree/ng2_switch/index.ts b/modules/benchmarks/src/tree/ng2_switch/index.ts
new file mode 100644
index 000000000000..3dc8eab92742
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_switch/index.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {init} from './init';
+import {AppModule} from './tree';
+
+export function main() {
+  enableProdMode();
+  platformBrowserDynamic().bootstrapModule(AppModule).then(init);
+}
diff --git a/modules/benchmarks/src/tree/ng2_switch/index_aot.ts b/modules/benchmarks/src/tree/ng2_switch/index_aot.ts
new file mode 100644
index 000000000000..20a343d703f4
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_switch/index_aot.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import {init} from './init';
+import {AppModuleNgFactory} from './tree.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(init);
diff --git a/modules/benchmarks/src/tree/ng2_switch/init.ts b/modules/benchmarks/src/tree/ng2_switch/init.ts
new file mode 100644
index 000000000000..a1f3af1c609e
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_switch/init.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {ApplicationRef, NgModuleRef} from '@angular/core';
+
+import {bindAction, profile} from '../../util';
+import {buildTree, emptyTree} from '../util';
+
+import {AppModule, TreeComponent} from './tree';
+
+export function init(moduleRef: NgModuleRef<AppModule>) {
+  let tree: TreeComponent;
+  let appRef: ApplicationRef;
+
+  function destroyDom() {
+    tree.data = emptyTree;
+    appRef.tick();
+  }
+
+  function createDom() {
+    tree.data = buildTree();
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  const injector = moduleRef.injector;
+  appRef = injector.get(ApplicationRef);
+
+  tree = appRef.components[0].instance;
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}
diff --git a/modules/benchmarks/src/tree/ng2_switch/tree.ts b/modules/benchmarks/src/tree/ng2_switch/tree.ts
new file mode 100644
index 000000000000..42164490744a
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng2_switch/tree.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 {Component, Input, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {TreeNode, emptyTree} from '../util';
+
+@Component({
+  selector: 'tree',
+  template: `<ng-container [ngSwitch]="data.depth % 2">
+    <span *ngSwitchCase="0" style="background-color: grey"> {{data.value}} </span>
+    <span *ngSwitchDefault> {{data.value}} </span>
+    <tree *ngIf='data.right != null' [data]='data.right'></tree><tree *ngIf='data.left != null' [data]='data.left'></tree>`
+})
+export class TreeComponent {
+  @Input()
+  data: TreeNode = emptyTree;
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  bootstrap: [TreeComponent],
+  declarations: [TreeComponent],
+})
+export class AppModule {
+}
diff --git a/modules/benchmarks/src/tree/polymer/binary_tree.html b/modules/benchmarks/src/tree/polymer/binary_tree.html
new file mode 100644
index 000000000000..ebab874dfa1e
--- /dev/null
+++ b/modules/benchmarks/src/tree/polymer/binary_tree.html
@@ -0,0 +1,22 @@
+<link rel="import" href="/all/benchmarks/vendor/polymer/polymer.html">
+<dom-module id="binary-tree">
+  <template>
+    <span style="[[data.style]]"> {{data.value}} </span>
+    <template is="dom-if" if="[[data.left]]">
+      <binary-tree data="[[data.left]]"></binary-tree>
+    </template>
+    <template is="dom-if" if="[[data.right]]">
+      <binary-tree data="[[data.right]]"></binary-tree>
+    </template>
+  </template>
+  <script>
+    Polymer({
+      is: 'binary-tree',
+      properties: {
+        data: Object
+      },
+      leftTree: null,
+      rightTree: null
+    });
+  </script>
+</dom-module>
diff --git a/modules/benchmarks/src/tree/polymer/index.html b/modules/benchmarks/src/tree/polymer/index.html
new file mode 100644
index 000000000000..ce2c79c35f88
--- /dev/null
+++ b/modules/benchmarks/src/tree/polymer/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+
+<head>
+  <link rel="import" href="binary_tree.html">
+</head>
+
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Polymer Tree Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <binary-tree id="root"></binary-tree>
+  </div>
+
+  <script src="../../bootstrap_plain.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/modules/benchmarks/src/tree/polymer/index.ts b/modules/benchmarks/src/tree/polymer/index.ts
new file mode 100644
index 000000000000..5f1ee89984bf
--- /dev/null
+++ b/modules/benchmarks/src/tree/polymer/index.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 {bindAction, profile} from '../../util';
+import {buildTree, emptyTree} from '../util';
+
+declare var Polymer: any;
+
+export function main() {
+  const rootEl: any = document.querySelector('binary-tree');
+  rootEl.data = emptyTree;
+
+  function destroyDom() { rootEl.data = emptyTree; }
+
+  function createDom() { rootEl.data = buildTree(); }
+
+  function noop() {}
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}
diff --git a/modules/benchmarks/src/tree/polymer_leaves/index.html b/modules/benchmarks/src/tree/polymer_leaves/index.html
new file mode 100644
index 000000000000..fe51d79febd9
--- /dev/null
+++ b/modules/benchmarks/src/tree/polymer_leaves/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+
+<head>
+  <link rel="import" href="tree_leaf.html">
+</head>
+
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Polymer Leaves Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <binary-tree id="root"></binary-tree>
+  </div>
+
+  <script src="../../bootstrap_plain.js"></script>
+
+</body>
+
+</html>
diff --git a/modules/benchmarks/src/tree/polymer_leaves/index.ts b/modules/benchmarks/src/tree/polymer_leaves/index.ts
new file mode 100644
index 000000000000..6c2549197a08
--- /dev/null
+++ b/modules/benchmarks/src/tree/polymer_leaves/index.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 {bindAction} from '../../util';
+import {buildTree, flattenTree} from '../util';
+
+declare var Polymer: any;
+
+export function main() {
+  const rootEl: any = document.querySelector('binary-tree');
+
+  function destroyDom() {
+    while (rootEl.firstChild) rootEl.removeChild(rootEl.firstChild);
+  }
+
+  function createDom() {
+    const flatTree = flattenTree(buildTree(), []);
+    for (let i = 0; i < flatTree.length; i++) {
+      const el: any = document.createElement('tree-leaf');
+      el.data = flatTree[i];
+      rootEl.appendChild(el);
+    }
+  }
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+}
diff --git a/modules/benchmarks/src/tree/polymer_leaves/tree_leaf.html b/modules/benchmarks/src/tree/polymer_leaves/tree_leaf.html
new file mode 100644
index 000000000000..28f3fce8ff88
--- /dev/null
+++ b/modules/benchmarks/src/tree/polymer_leaves/tree_leaf.html
@@ -0,0 +1,14 @@
+<link rel="import" href="/all/benchmarks/vendor/polymer/polymer.html">
+<dom-module id="tree-leaf">
+  <template>
+    <span style="[[data.style]]"> {{data.value}} </span>
+  </template>
+  <script>
+    Polymer({
+      is: 'tree-leaf',
+      properties: {
+        data: {}
+      }
+    });
+  </script>
+</dom-module>
diff --git a/modules/benchmarks/src/tree/render3/BUILD.bazel b/modules/benchmarks/src/tree/render3/BUILD.bazel
new file mode 100644
index 000000000000..d2b2136846a4
--- /dev/null
+++ b/modules/benchmarks/src/tree/render3/BUILD.bazel
@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "render3_lib",
+    srcs = glob(
+        [
+            "**/*.ts",
+        ],
+    ),
+    deps = [
+        "//modules/benchmarks/src/tree:util_lib",
+        "//packages:types",
+        "//packages/core",
+        "@rxjs",
+    ],
+)
diff --git a/modules/benchmarks/src/tree/render3/index.html b/modules/benchmarks/src/tree/render3/index.html
new file mode 100644
index 000000000000..a9200438b59a
--- /dev/null
+++ b/modules/benchmarks/src/tree/render3/index.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Render3 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"></tree>
+  </div>
+
+  <script>
+    // TODO(mlaval): remove once we have a proper solution
+    ngDevMode = false;
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
diff --git a/modules/benchmarks/src/tree/render3/index.ts b/modules/benchmarks/src/tree/render3/index.ts
new file mode 100644
index 000000000000..9c28ec939942
--- /dev/null
+++ b/modules/benchmarks/src/tree/render3/index.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 {ɵrenderComponent as renderComponent} from '@angular/core';
+import {bindAction, profile} from '../../util';
+import {TreeComponent, createDom, destroyDom, detectChanges} from './tree';
+
+function noop() {}
+
+export function main() {
+  let component: TreeComponent;
+  if (typeof window !== 'undefined') {
+    component = renderComponent(TreeComponent);
+    bindAction('#createDom', () => createDom(component));
+    bindAction('#destroyDom', () => destroyDom(component));
+    bindAction('#detectChanges', () => detectChanges(component));
+    bindAction(
+        '#detectChangesProfile', profile(() => detectChanges(component), noop, 'detectChanges'));
+    bindAction('#updateDomProfile', profile(() => createDom(component), noop, 'update'));
+    bindAction(
+        '#createDomProfile',
+        profile(() => createDom(component), () => destroyDom(component), 'create'));
+  }
+}
diff --git a/modules/benchmarks/src/tree/render3/tree.ts b/modules/benchmarks/src/tree/render3/tree.ts
new file mode 100644
index 000000000000..70b9d43ea2d1
--- /dev/null
+++ b/modules/benchmarks/src/tree/render3/tree.ts
@@ -0,0 +1,147 @@
+/**
+ * @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 {ɵC as C, ɵE as E, ɵRenderFlags as RenderFlags, ɵT as T, ɵV as V, ɵb as b, ɵcR as cR, ɵcr as cr, ɵdefineComponent as defineComponent, ɵdetectChanges as _detectChanges, ɵe as e, ɵi1 as i1, ɵp as p, ɵs as s, ɵsa as sa, ɵsm as sm, ɵsp as sp, ɵt as t, ɵv as v} from '@angular/core';
+
+import {TreeNode, buildTree, emptyTree} from '../util';
+
+export function destroyDom(component: TreeComponent) {
+  component.data = emptyTree;
+  _detectChanges(component);
+}
+
+export function createDom(component: TreeComponent) {
+  component.data = buildTree();
+  _detectChanges(component);
+}
+
+const numberOfChecksEl = document.getElementById('numberOfChecks') !;
+let detectChangesRuns = 0;
+export function detectChanges(component: TreeComponent) {
+  for (let i = 0; i < 10; i++) {
+    _detectChanges(component);
+  }
+  detectChangesRuns += 10;
+  numberOfChecksEl.textContent = `${detectChangesRuns}`;
+}
+
+const c0 = ['background-color'];
+export class TreeComponent {
+  data: TreeNode = emptyTree;
+
+  /** @nocollapse */
+  static ngComponentDef = defineComponent({
+    type: TreeComponent,
+    selectors: [['tree']],
+    template: function(rf: RenderFlags, ctx: TreeComponent) {
+      if (rf & RenderFlags.Create) {
+        E(0, 'span');
+        s(null, c0);
+        { T(1); }
+        e();
+        C(2);
+        C(3);
+      }
+      if (rf & RenderFlags.Update) {
+        sp(0, 0, ctx.data.depth % 2 ? '' : 'grey');
+        t(1, i1(' ', ctx.data.value, ' '));
+        cR(2);
+        {
+          if (ctx.data.left != null) {
+            let rf0 = V(0);
+            {
+              if (rf0 & RenderFlags.Create) {
+                E(0, 'tree');
+                e();
+              }
+              if (rf0 & RenderFlags.Update) {
+                p(0, 'data', b(ctx.data.left));
+              }
+            }
+            v();
+          }
+        }
+        cr();
+        cR(3);
+        {
+          if (ctx.data.right != null) {
+            let rf0 = V(0);
+            {
+              if (rf0 & RenderFlags.Create) {
+                E(0, 'tree');
+                e();
+              }
+              if (rf0 & RenderFlags.Update) {
+                p(0, 'data', b(ctx.data.right));
+              }
+            }
+            v();
+          }
+        }
+        cr();
+      }
+    },
+    factory: () => new TreeComponent,
+    inputs: {data: 'data'},
+    directives: () => [TreeComponent]
+  });
+}
+
+export class TreeFunction {
+  data: TreeNode = emptyTree;
+
+  /** @nocollapse */
+  static ngComponentDef = defineComponent({
+    type: TreeFunction,
+    selectors: [['tree']],
+    template: function(rf: RenderFlags, ctx: TreeFunction) {
+      // bit of a hack
+      TreeTpl(rf, ctx.data);
+    },
+    factory: () => new TreeFunction,
+    inputs: {data: 'data'}
+  });
+}
+
+const c1 = ['background-color'];
+export function TreeTpl(rf: RenderFlags, ctx: TreeNode) {
+  if (rf & RenderFlags.Create) {
+    E(0, 'tree');
+    {
+      E(1, 'span');
+      s(null, c1);
+      { T(2); }
+      e();
+      C(3);
+      C(4);
+    }
+    e();
+  }
+  if (rf & RenderFlags.Update) {
+    sp(1, 0, ctx.depth % 2 ? '' : 'grey');
+    t(2, i1(' ', ctx.value, ' '));
+    cR(3);
+    {
+      if (ctx.left != null) {
+        let rf0 = V(0);
+        { TreeTpl(rf0, ctx.left); }
+        v();
+      }
+    }
+    cr();
+    cR(4);
+    {
+      if (ctx.right != null) {
+        let rf0 = V(0);
+        { TreeTpl(rf0, ctx.right); }
+        v();
+      }
+    }
+    cr();
+  }
+}
diff --git a/modules/benchmarks/src/tree/render3_function/BUILD.bazel b/modules/benchmarks/src/tree/render3_function/BUILD.bazel
new file mode 100644
index 000000000000..91236e044dfb
--- /dev/null
+++ b/modules/benchmarks/src/tree/render3_function/BUILD.bazel
@@ -0,0 +1,19 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "render3_function_lib",
+    srcs = glob(
+        [
+            "**/*.ts",
+        ],
+    ),
+    deps = [
+        "//modules/benchmarks/src/tree:util_lib",
+        "//modules/benchmarks/src/tree/render3:render3_lib",
+        "//packages:types",
+        "//packages/core",
+        "@rxjs",
+    ],
+)
diff --git a/modules/benchmarks/src/tree/render3_function/index.html b/modules/benchmarks/src/tree/render3_function/index.html
new file mode 100644
index 000000000000..d71594cf1868
--- /dev/null
+++ b/modules/benchmarks/src/tree/render3_function/index.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Render3 Tree Benchmark with functions</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"></tree>
+  </div>
+
+  <script>
+    // TODO(mlaval): remove once we have a proper solution
+    ngDevMode = false;
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
diff --git a/modules/benchmarks/src/tree/render3_function/index.ts b/modules/benchmarks/src/tree/render3_function/index.ts
new file mode 100644
index 000000000000..3c4b0dc97809
--- /dev/null
+++ b/modules/benchmarks/src/tree/render3_function/index.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 {ɵrenderComponent as renderComponent} from '@angular/core';
+import {bindAction, profile} from '../../util';
+import {TreeFunction, createDom, destroyDom, detectChanges} from '../render3/tree';
+
+function noop() {}
+
+export function main() {
+  let component: TreeFunction;
+  if (typeof window !== 'undefined') {
+    component = renderComponent(TreeFunction);
+    bindAction('#createDom', () => createDom(component));
+    bindAction('#destroyDom', () => destroyDom(component));
+    bindAction('#detectChanges', () => detectChanges(component));
+    bindAction(
+        '#detectChangesProfile', profile(() => detectChanges(component), noop, 'detectChanges'));
+    bindAction('#updateDomProfile', profile(() => createDom(component), noop, 'update'));
+    bindAction(
+        '#createDomProfile',
+        profile(() => createDom(component), () => destroyDom(component), 'create'));
+  }
+}
diff --git a/modules/benchmarks/src/tree/tree_benchmark.html b/modules/benchmarks/src/tree/tree_benchmark.html
deleted file mode 100644
index 087af0ae9401..000000000000
--- a/modules/benchmarks/src/tree/tree_benchmark.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!doctype html>
-<html>
-<body>
-
-<h2>Params</h2>
-<form>
-  Depth:
-  <input type="number" name="depth" placeholder="depth" value="9">
-  <br>
-  Use Viewcache:
-  <label>
-  Yes<input type="radio" name="viewcache" placeholder="use viewcache" value="true" checked="checked">
-  </label>
-  <label>
-  No<input type="radio" name="viewcache" placeholder="use viewcache" value="false">
-  </label>
-  <br>
-  <button>Apply</button>
-</form>
-
-<h2>Angular2 tree benchmark</h2>
-<p>
-<button id="ng2DestroyDom">destroyDom</button>
-<button id="ng2CreateDom">createDom</button>
-<button id="ng2UpdateDomProfile">profile updateDom</button>
-<button id="ng2CreateDomProfile">profile createDom</button>
-</p>
-
-<h2>Baseline tree benchmark</h2>
-<p>
-<button id="baselineDestroyDom">destroyDom</button>
-<button id="baselineCreateDom">createDom</button>
-<button id="baselineUpdateDomProfile">profile updateDom</button>
-<button id="baselineCreateDomProfile">profile createDom</button>
-</p>
-
-<div>
-<app></app>
-</div>
-
-<div>
-<baseline></baseline>
-</div>
-
-$SCRIPTS$
-</body>
-</html>
\ No newline at end of file
diff --git a/modules/benchmarks/src/tree/tree_benchmark.ts b/modules/benchmarks/src/tree/tree_benchmark.ts
deleted file mode 100644
index e95f80584787..000000000000
--- a/modules/benchmarks/src/tree/tree_benchmark.ts
+++ /dev/null
@@ -1,241 +0,0 @@
-import {bootstrap, Compiler, Component, Directive, View, ViewContainerRef} from 'angular2/angular2';
-
-import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {isPresent} from 'angular2/src/facade/lang';
-import {List} from 'angular2/src/facade/collection';
-import {window, document, gc} from 'angular2/src/facade/browser';
-import {
-  getIntParameter,
-  getStringParameter,
-  bindAction,
-  windowProfile,
-  windowProfileEnd
-} from 'angular2/src/test_lib/benchmark_util';
-import {NgIf} from 'angular2/directives';
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-import {APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
-import {bind, Binding} from 'angular2/di';
-
-function createBindings(): List<Binding> {
-  var viewCacheCapacity = getStringParameter('viewcache') == 'true' ? 10000 : 1;
-  return [bind(APP_VIEW_POOL_CAPACITY).toValue(viewCacheCapacity)];
-}
-
-function setupReflector() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-}
-
-var BASELINE_TREE_TEMPLATE;
-var BASELINE_IF_TEMPLATE;
-
-export function main() {
-  BrowserDomAdapter.makeCurrent();
-  var maxDepth = getIntParameter('depth');
-
-  setupReflector();
-
-  BASELINE_TREE_TEMPLATE = DOM.createTemplate(
-      '<span>_<template class="ng-binding"></template><template class="ng-binding"></template></span>');
-  BASELINE_IF_TEMPLATE = DOM.createTemplate('<span template="if"><tree></tree></span>');
-
-  var app;
-  var lifeCycle;
-  var baselineRootTreeComponent;
-  var count = 0;
-
-  function ng2DestroyDom() {
-    // TODO: We need an initial value as otherwise the getter for data.value will fail
-    // --> this should be already caught in change detection!
-    app.initData = new TreeNode('', null, null);
-    lifeCycle.tick();
-  }
-
-  function profile(create, destroy, name) {
-    return function() {
-      windowProfile(name + ' w GC');
-      var duration = 0;
-      var count = 0;
-      while (count++ < 150) {
-        gc();
-        var start = window.performance.now();
-        create();
-        duration += window.performance.now() - start;
-        destroy();
-      }
-      windowProfileEnd(name + ' w GC');
-      window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
-
-      windowProfile(name + ' w/o GC');
-      duration = 0;
-      count = 0;
-      while (count++ < 150) {
-        var start = window.performance.now();
-        create();
-        duration += window.performance.now() - start;
-        destroy();
-      }
-      windowProfileEnd(name + ' w/o GC');
-      window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
-    };
-  }
-
-  function ng2CreateDom() {
-    var values = count++ % 2 == 0 ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
-                                    ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
-    app.initData = buildTree(maxDepth, values, 0);
-    lifeCycle.tick();
-  }
-
-  function noop() {}
-
-  function initNg2() {
-    bootstrap(AppComponent, createBindings())
-        .then((ref) => {
-          var injector = ref.injector;
-          lifeCycle = injector.get(LifeCycle);
-
-          app = ref.hostComponent;
-          bindAction('#ng2DestroyDom', ng2DestroyDom);
-          bindAction('#ng2CreateDom', ng2CreateDom);
-          bindAction('#ng2UpdateDomProfile', profile(ng2CreateDom, noop, 'ng2-update'));
-          bindAction('#ng2CreateDomProfile', profile(ng2CreateDom, ng2DestroyDom, 'ng2-create'));
-        });
-  }
-
-  function baselineDestroyDom() { baselineRootTreeComponent.update(new TreeNode('', null, null)); }
-
-  function baselineCreateDom() {
-    var values = count++ % 2 == 0 ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
-                                    ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
-
-    baselineRootTreeComponent.update(buildTree(maxDepth, values, 0));
-  }
-
-  function initBaseline() {
-    var tree = DOM.createElement('tree');
-    DOM.appendChild(DOM.querySelector(document, 'baseline'), tree);
-    baselineRootTreeComponent = new BaseLineTreeComponent(tree);
-
-    bindAction('#baselineDestroyDom', baselineDestroyDom);
-    bindAction('#baselineCreateDom', baselineCreateDom);
-
-    bindAction('#baselineUpdateDomProfile', profile(baselineCreateDom, noop, 'baseline-update'));
-    bindAction('#baselineCreateDomProfile',
-               profile(baselineCreateDom, baselineDestroyDom, 'baseline-create'));
-  }
-
-  initNg2();
-  initBaseline();
-}
-
-class TreeNode {
-  value: string;
-  left: TreeNode;
-  right: TreeNode;
-  constructor(value, left, right) {
-    this.value = value;
-    this.left = left;
-    this.right = right;
-  }
-}
-
-function buildTree(maxDepth, values, curDepth) {
-  if (maxDepth === curDepth) return new TreeNode('', null, null);
-  return new TreeNode(values[curDepth], buildTree(maxDepth, values, curDepth + 1),
-                      buildTree(maxDepth, values, curDepth + 1));
-}
-
-// http://jsperf.com/nextsibling-vs-childnodes
-
-class BaseLineTreeComponent {
-  element;
-  value: BaseLineInterpolation;
-  left: BaseLineIf;
-  right: BaseLineIf;
-  constructor(element) {
-    this.element = element;
-    var clone = DOM.clone(BASELINE_TREE_TEMPLATE.content.firstChild);
-    var shadowRoot = this.element.createShadowRoot();
-    DOM.appendChild(shadowRoot, clone);
-
-    var child = clone.firstChild;
-    this.value = new BaseLineInterpolation(child);
-    child = DOM.nextSibling(child);
-    this.left = new BaseLineIf(child);
-    child = DOM.nextSibling(child);
-    this.right = new BaseLineIf(child);
-  }
-  update(value: TreeNode) {
-    this.value.update(value.value);
-    this.left.update(value.left);
-    this.right.update(value.right);
-  }
-}
-
-class BaseLineInterpolation {
-  value: string;
-  textNode;
-  constructor(textNode) {
-    this.value = null;
-    this.textNode = textNode;
-  }
-  update(value: string) {
-    if (this.value !== value) {
-      this.value = value;
-      DOM.setText(this.textNode, value + ' ');
-    }
-  }
-}
-
-class BaseLineIf {
-  condition: boolean;
-  component: BaseLineTreeComponent;
-  anchor;
-  constructor(anchor) {
-    this.anchor = anchor;
-    this.condition = false;
-    this.component = null;
-  }
-  update(value: TreeNode) {
-    var newCondition = isPresent(value);
-    if (this.condition !== newCondition) {
-      this.condition = newCondition;
-      if (isPresent(this.component)) {
-        DOM.remove(this.component.element);
-        this.component = null;
-      }
-      if (this.condition) {
-        var element = DOM.firstChild(DOM.clone(BASELINE_IF_TEMPLATE).content);
-        this.anchor.parentNode.insertBefore(element, DOM.nextSibling(this.anchor));
-        this.component = new BaseLineTreeComponent(DOM.firstChild(element));
-      }
-    }
-    if (isPresent(this.component)) {
-      this.component.update(value);
-    }
-  }
-}
-
-@Component({selector: 'tree', properties: ['data']})
-@View({
-  directives: [TreeComponent, NgIf],
-  template:
-      `<span> {{data.value}} <span template='ng-if data.right != null'><tree [data]='data.right'></tree></span><span template='ng-if data.left != null'><tree [data]='data.left'></tree></span></span>`
-})
-class TreeComponent {
-  data: TreeNode;
-}
-
-@Component({selector: 'app'})
-@View({directives: [TreeComponent], template: `<tree [data]='initData'></tree>`})
-class AppComponent {
-  initData: TreeNode;
-  constructor() {
-    // TODO: We need an initial value as otherwise the getter for data.value will fail
-    // --> this should be already caught in change detection!
-    this.initData = new TreeNode('', null, null);
-  }
-}
diff --git a/modules/benchmarks/src/tree/util.ts b/modules/benchmarks/src/tree/util.ts
new file mode 100644
index 000000000000..6f8f59625848
--- /dev/null
+++ b/modules/benchmarks/src/tree/util.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 {getIntParameter} from '../util';
+
+export class TreeNode {
+  transitiveChildCount: number;
+  children: TreeNode[];
+
+  constructor(
+      public value: string, public depth: number, public maxDepth: number,
+      public left: TreeNode|null, public right: TreeNode|null) {
+    this.transitiveChildCount = Math.pow(2, (this.maxDepth - this.depth + 1)) - 1;
+    this.children = this.left ? [this.left, this.right !] : [];
+  }
+
+  // Needed for Polymer as it does not support ternary nor modulo operator
+  // in expressions
+  get style(): string { return this.depth % 2 === 0 ? 'background-color: grey' : ''; }
+}
+
+let treeCreateCount: number;
+export let maxDepth: number;
+let numberData: TreeNode;
+let charData: TreeNode;
+
+init();
+
+function init() {
+  maxDepth = getIntParameter('depth');
+  treeCreateCount = 0;
+  numberData = _buildTree(0, numberValues);
+  charData = _buildTree(0, charValues);
+}
+
+function _buildTree(currDepth: number, valueFn: (depth: number) => string): TreeNode {
+  const children = currDepth < maxDepth ? _buildTree(currDepth + 1, valueFn) : null;
+  return new TreeNode(valueFn(currDepth), currDepth, maxDepth, children, children);
+}
+
+export const emptyTree = new TreeNode('', 0, 0, null, null);
+
+export function buildTree(): TreeNode {
+  treeCreateCount++;
+  return treeCreateCount % 2 ? numberData : charData;
+}
+
+function numberValues(depth: number): string {
+  return depth.toString();
+}
+
+function charValues(depth: number): string {
+  return String.fromCharCode('A'.charCodeAt(0) + (depth % 26));
+}
+
+export function flattenTree(node: TreeNode, target: TreeNode[] = []): TreeNode[] {
+  target.push(node);
+  if (node.left) {
+    flattenTree(node.left, target);
+  }
+  if (node.right) {
+    flattenTree(node.right, target);
+  }
+  return target;
+}
diff --git a/modules/benchmarks/src/util.ts b/modules/benchmarks/src/util.ts
new file mode 100644
index 000000000000..19b0e9abf0b3
--- /dev/null
+++ b/modules/benchmarks/src/util.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
+ */
+
+/* tslint:disable:no-console  */
+urlParamsToForm();
+
+export function getIntParameter(name: string) {
+  return parseInt(getStringParameter(name), 10);
+}
+
+export function getStringParameter(name: string) {
+  const els = document.querySelectorAll(`input[name="${name}"]`);
+  let value: any;
+  let el: any;
+
+  for (let i = 0; i < els.length; i++) {
+    el = els[i];
+    const type = el.type;
+    if ((type != 'radio' && type != 'checkbox') || el.checked) {
+      value = el.value;
+      break;
+    }
+  }
+
+  if (value == null) {
+    throw new Error(`Could not find and input field with name ${name}`);
+  }
+
+  return value;
+}
+
+export function bindAction(selector: string, callback: () => void) {
+  document.querySelector(selector) !.addEventListener('click', callback);
+}
+
+
+export function profile(create: () => void, destroy: () => void, name: string) {
+  return function() {
+    window.console.profile(name);
+    let duration = 0;
+    let count = 0;
+    while (count++ < 150) {
+      const start = window.performance.now();
+      create();
+      duration += window.performance.now() - start;
+      destroy();
+    }
+    window.console.profileEnd();
+    window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
+  };
+}
+
+// helper script that will read out the url parameters
+// and store them in appropriate form fields on the page
+function urlParamsToForm() {
+  const regex = /(\w+)=(\w+)/g;
+  const search = decodeURIComponent(location.search);
+  let match: any[]|null;
+  while (match = regex.exec(search)) {
+    const name = match[1];
+    const value = match[2];
+    const els = document.querySelectorAll('input[name="' + name + '"]');
+    let el: any;
+    for (let i = 0; i < els.length; i++) {
+      el = els[i];
+      if (el.type === 'radio' || el.type === 'checkbox') {
+        el.checked = el.value === value;
+      } else {
+        el.value = value;
+      }
+    }
+  }
+}
diff --git a/modules/benchmarks_external/README.md b/modules/benchmarks_external/README.md
new file mode 100644
index 000000000000..9479c5cd49e0
--- /dev/null
+++ b/modules/benchmarks_external/README.md
@@ -0,0 +1,6 @@
+# How to run the benchmarks_external locally
+
+$ cp -r ./modules/benchmarks_external ./dist/all/
+$ ./node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w
+$ gulp serve
+$ open http://localhost:8000/all/benchmarks_external/src/tree/index.html?bundles=false
diff --git a/modules/benchmarks_external/e2e_test/compiler_perf.dart b/modules/benchmarks_external/e2e_test/compiler_perf.dart
deleted file mode 100644
index a21ac5eb916d..000000000000
--- a/modules/benchmarks_external/e2e_test/compiler_perf.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library benchmarks_external.e2e_test.compiler_perf;
-
-main() {}
diff --git a/modules/benchmarks_external/e2e_test/compiler_perf.ts b/modules/benchmarks_external/e2e_test/compiler_perf.ts
index df99e61b549b..50efb856bee7 100644
--- a/modules/benchmarks_external/e2e_test/compiler_perf.ts
+++ b/modules/benchmarks_external/e2e_test/compiler_perf.ts
@@ -1,8 +1,16 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
+/**
+ * @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 {runClickBenchmark, verifyNoBrowserErrors} from '@angular/testing/src/perf_util';
 
 describe('ng1.x compiler benchmark', function() {
 
-  var URL = 'benchmarks_external/src/compiler/compiler_benchmark.html';
+  const URL = 'benchmarks_external/src/compiler/compiler_benchmark.html';
 
   afterEach(verifyNoBrowserErrors);
 
@@ -11,7 +19,8 @@ describe('ng1.x compiler benchmark', function() {
       url: URL,
       buttons: ['#compileWithBindings'],
       id: 'ng1.compile.withBindings',
-      params: [{name: 'elements', value: 150, scale: 'linear'}]
+      params: [{name: 'elements', value: 150, scale: 'linear'}],
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
@@ -20,7 +29,8 @@ describe('ng1.x compiler benchmark', function() {
       url: URL,
       buttons: ['#compileNoBindings'],
       id: 'ng1.compile.noBindings',
-      params: [{name: 'elements', value: 150, scale: 'linear'}]
+      params: [{name: 'elements', value: 150, scale: 'linear'}],
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
diff --git a/modules/benchmarks_external/e2e_test/largetable_perf.dart b/modules/benchmarks_external/e2e_test/largetable_perf.dart
deleted file mode 100644
index 6a620017af6a..000000000000
--- a/modules/benchmarks_external/e2e_test/largetable_perf.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library benchmarks_external.e2e_test.largetable_perf;
-
-main() {}
diff --git a/modules/benchmarks_external/e2e_test/largetable_perf.ts b/modules/benchmarks_external/e2e_test/largetable_perf.ts
index 4fcaf491d4e2..c62d19abfaca 100644
--- a/modules/benchmarks_external/e2e_test/largetable_perf.ts
+++ b/modules/benchmarks_external/e2e_test/largetable_perf.ts
@@ -1,7 +1,15 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
+/**
+ * @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 {runClickBenchmark, verifyNoBrowserErrors} from '@angular/testing/src/perf_util';
 
 describe('ng1.x largetable benchmark', function() {
-  var URL = 'benchmarks_external/src/largetable/largetable_benchmark.html';
+  const URL = 'benchmarks_external/src/largetable/largetable_benchmark.html';
 
   afterEach(verifyNoBrowserErrors);
 
@@ -17,7 +25,8 @@ describe('ng1.x largetable benchmark', function() {
               {name: 'columns', value: 100, scale: 'sqrt'},
               {name: 'rows', value: 20, scale: 'sqrt'},
               {name: 'benchmarkType', value: benchmarkType}
-            ]
+            ],
+            waitForAngular2: false
           }).then(done, done.fail);
         });
       });
diff --git a/modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.dart b/modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.dart
deleted file mode 100644
index f65d170c5da8..000000000000
--- a/modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library benchmarks_external.e2e_test.naive_infinite_scroll_perf;
-
-main() {}
diff --git a/modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.ts b/modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.ts
index 630a64aeadbe..7f1e02dfe573 100644
--- a/modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.ts
+++ b/modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.ts
@@ -1,8 +1,16 @@
-import {runBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
+/**
+ * @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 {runBenchmark, verifyNoBrowserErrors} from '@angular/testing/src/perf_util';
 
 describe('ng-dart1.x naive infinite scroll benchmark', function() {
 
-  var URL = 'benchmarks_external/src/naive_infinite_scroll/index.html';
+  const URL = 'benchmarks_external/src/naive_infinite_scroll/index.html';
 
   afterEach(verifyNoBrowserErrors);
 
@@ -14,7 +22,7 @@ describe('ng-dart1.x naive infinite scroll benchmark', function() {
         work: function() {
           $('#reset-btn').click();
           $('#run-btn').click();
-          var s = 1000;
+          let s = 1000;
           if (appSize > 4) {
             s = s + appSize * 100;
           }
@@ -24,7 +32,8 @@ describe('ng-dart1.x naive infinite scroll benchmark', function() {
           {name: 'appSize', value: appSize},
           {name: 'iterationCount', value: 20, scale: 'linear'},
           {name: 'scrollIncrement', value: 40}
-        ]
+        ],
+        waitForAngular2: false
       }).then(done, done.fail);
     });
   });
diff --git a/modules/benchmarks_external/e2e_test/polymer_tree_perf.dart b/modules/benchmarks_external/e2e_test/polymer_tree_perf.dart
deleted file mode 100644
index a86d7c6394aa..000000000000
--- a/modules/benchmarks_external/e2e_test/polymer_tree_perf.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library benchmarks_external.e2e_test.polymer_tree_perf;
-
-main() {}
diff --git a/modules/benchmarks_external/e2e_test/polymer_tree_perf.ts b/modules/benchmarks_external/e2e_test/polymer_tree_perf.ts
index 85e3d44e6631..731abd8c4a24 100644
--- a/modules/benchmarks_external/e2e_test/polymer_tree_perf.ts
+++ b/modules/benchmarks_external/e2e_test/polymer_tree_perf.ts
@@ -1,17 +1,36 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
+/**
+ * @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 {runClickBenchmark, verifyNoBrowserErrors} from '@angular/testing/src/perf_util';
 
 describe('polymer tree benchmark', function() {
 
-  var URL = 'benchmarks_external/src/tree/polymer/index.html';
+  const URL = 'benchmarks_external/src/tree/polymer/index.html';
 
   afterEach(verifyNoBrowserErrors);
 
-  it('should log the stats', function(done) {
+  it('should log the stats (create)', function(done) {
     runClickBenchmark({
       url: URL,
       buttons: ['#destroyDom', '#createDom'],
-      id: 'polymer.tree',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
+      id: 'polymer.tree.create',
+      params: [{name: 'depth', value: 9, scale: 'log2'}],
+      waitForAngular2: false
+    }).then(done, done.fail);
+  });
+
+  it('should log the stats (update)', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#createDom'],
+      id: 'polymer.tree.update',
+      params: [{name: 'depth', value: 9, scale: 'log2'}],
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
diff --git a/modules/benchmarks_external/e2e_test/react_tree_perf.dart b/modules/benchmarks_external/e2e_test/react_tree_perf.dart
deleted file mode 100644
index 9a9a620a1179..000000000000
--- a/modules/benchmarks_external/e2e_test/react_tree_perf.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library benchmarks_external.e2e_test.react_tree_perf;
-
-main() {}
diff --git a/modules/benchmarks_external/e2e_test/react_tree_perf.ts b/modules/benchmarks_external/e2e_test/react_tree_perf.ts
index 496de8117459..3313250616b1 100644
--- a/modules/benchmarks_external/e2e_test/react_tree_perf.ts
+++ b/modules/benchmarks_external/e2e_test/react_tree_perf.ts
@@ -1,8 +1,16 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
+/**
+ * @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 {runClickBenchmark, verifyNoBrowserErrors} from '@angular/testing/src/perf_util';
 
 describe('react tree benchmark', function() {
 
-  var URL = 'benchmarks_external/src/tree/react/index.html';
+  const URL = 'benchmarks_external/src/tree/react/index.html';
 
   afterEach(verifyNoBrowserErrors);
 
@@ -11,7 +19,8 @@ describe('react tree benchmark', function() {
       url: URL,
       buttons: ['#destroyDom', '#createDom'],
       id: 'react.tree.create',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
+      params: [{name: 'depth', value: 9, scale: 'log2'}],
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
@@ -20,7 +29,8 @@ describe('react tree benchmark', function() {
       url: URL,
       buttons: ['#createDom'],
       id: 'react.tree.update',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
+      params: [{name: 'depth', value: 9, scale: 'log2'}],
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
diff --git a/modules/benchmarks_external/e2e_test/static_tree_perf.ts b/modules/benchmarks_external/e2e_test/static_tree_perf.ts
new file mode 100644
index 000000000000..6d26c0cd90f2
--- /dev/null
+++ b/modules/benchmarks_external/e2e_test/static_tree_perf.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
+ */
+
+import {runClickBenchmark, verifyNoBrowserErrors} from '@angular/testing/src/perf_util';
+
+describe('ng1.x tree benchmark', function() {
+
+  const URL = 'benchmarks_external/src/static_tree/tree_benchmark.html';
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should log the stats (create)', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#destroyDom', '#createDom'],
+      id: 'ng1.static.tree.create',
+      params: [],
+      waitForAngular2: false
+    }).then(done, done.fail);
+  });
+
+  it('should log the stats (update)', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#createDom'],
+      id: 'ng1.static.tree.update',
+      params: [],
+      waitForAngular2: false
+    }).then(done, done.fail);
+  });
+
+});
diff --git a/modules/benchmarks_external/e2e_test/tree_perf.dart b/modules/benchmarks_external/e2e_test/tree_perf.dart
deleted file mode 100644
index 7a5ca59fc90c..000000000000
--- a/modules/benchmarks_external/e2e_test/tree_perf.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library benchmarks_external.e2e_test.tree_perf;
-
-main() {}
diff --git a/modules/benchmarks_external/e2e_test/tree_perf.ts b/modules/benchmarks_external/e2e_test/tree_perf.ts
index aae6200bfbc9..54e0f94536ba 100644
--- a/modules/benchmarks_external/e2e_test/tree_perf.ts
+++ b/modules/benchmarks_external/e2e_test/tree_perf.ts
@@ -1,17 +1,36 @@
-import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
+/**
+ * @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 {runClickBenchmark, verifyNoBrowserErrors} from '@angular/testing/src/perf_util';
 
 describe('ng1.x tree benchmark', function() {
 
-  var URL = 'benchmarks_external/src/tree/tree_benchmark.html';
+  const URL = 'benchmarks_external/src/tree/tree_benchmark.html';
 
   afterEach(verifyNoBrowserErrors);
 
-  it('should log the stats', function(done) {
+  it('should log the stats (create)', function(done) {
     runClickBenchmark({
       url: URL,
       buttons: ['#destroyDom', '#createDom'],
-      id: 'ng1.tree',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
+      id: 'ng1.tree.create',
+      params: [{name: 'depth', value: 9, scale: 'log2'}],
+      waitForAngular2: false
+    }).then(done, done.fail);
+  });
+
+  it('should log the stats (update)', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#createDom'],
+      id: 'ng1.tree.update',
+      params: [{name: 'depth', value: 9, scale: 'log2'}],
+      waitForAngular2: false
     }).then(done, done.fail);
   });
 
diff --git a/modules/benchmarks_external/pubspec.yaml b/modules/benchmarks_external/pubspec.yaml
deleted file mode 100644
index 9e4c2e35711e..000000000000
--- a/modules/benchmarks_external/pubspec.yaml
+++ /dev/null
@@ -1,18 +0,0 @@
-name: benchmarks_external
-environment:
-  sdk: '>=1.4.0'
-dependencies:
-  angular: '>=1.0.0 <2.0.0'
-  browser: '>=0.10.0 <0.11.0'
-dev_dependencies:
-  angular2:
-    path: ../angular2
-transformers:
-- angular:
-    $exclude: "web/e2e_test"
-    html_files:
-      - web/src/naive_infinite_scroll/scroll_area.html
-      - web/src/naive_infinite_scroll/scroll_item.html
-- $dart2js:
-    commandLineOptions:
-    - --show-package-warnings
diff --git a/modules/benchmarks_external/src/bootstrap.ts b/modules/benchmarks_external/src/bootstrap.ts
new file mode 100644
index 000000000000..20fef436da72
--- /dev/null
+++ b/modules/benchmarks_external/src/bootstrap.ts
@@ -0,0 +1,91 @@
+/**
+ * @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
+ */
+
+
+(function(global: any /** TODO #9100 */) {
+
+  writeScriptTag('/all/benchmarks/vendor/core.js');
+  writeScriptTag('/all/benchmarks/vendor/zone.js');
+  writeScriptTag('/all/benchmarks/vendor/long-stack-trace-zone.js');
+  writeScriptTag('/all/benchmarks/vendor/system.src.js');
+  writeScriptTag('/all/benchmarks/vendor/Reflect.js', 'benchmarksBootstrap()');
+
+  (<any>global).benchmarksBootstrap = benchmarksBootstrap;
+
+  function benchmarksBootstrap() {
+    // check query param
+    const useBundles = location.search.indexOf('bundles=false') == -1;
+    if (useBundles) {
+      System.config({
+        map: {
+          'index': 'index.js',
+          '@angular/core': '/packages-dist/core/bundles/core.umd.js',
+          '@angular/common': '/packages-dist/common/bundles/common.umd.js',
+          '@angular/forms': '/packages-dist/forms/bundles/forms.umd.js',
+          '@angular/compiler': '/packages-dist/compiler/bundles/compiler.umd.js',
+          '@angular/platform-browser':
+              '/packages-dist/platform-browser/bundles/platform-browser.umd.js',
+          '@angular/platform-browser-dynamic':
+              '/packages-dist/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+          '@angular/http': '/packages-dist/http/bundles/http.umd.js',
+          '@angular/upgrade': '/packages-dist/upgrade/bundles/upgrade.umd.js',
+          '@angular/router': '/packages-dist/router/bundles/router.umd.js',
+          '@angular/core/src/facade': '/all/@angular/core/src/facade',
+          'rxjs': 'node_modules/rxjs',
+        },
+        packages: {
+          'app': {defaultExtension: 'js'},
+          '@angular/core/src/facade': {defaultExtension: 'js'},
+          'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },
+          'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },
+          'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },
+          'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },
+          'rxjs': { main: 'index.js', defaultExtension: 'js' },
+        }
+      });
+    } else {
+      console.warn(
+          'Not using the Angular bundles. Don\'t use this configuration for e2e/performance tests!');
+
+      System.config({
+        map: {
+          'index': 'index.js',
+          '@angular': '/all/@angular',
+          'rxjs': 'node_modules/rxjs',
+        },
+        packages: {
+          'app': {defaultExtension: 'js'},
+          '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/forms': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/upgrade': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },
+          'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },
+          'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },
+          'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },
+          'rxjs': { main: 'index.js', defaultExtension: 'js' },
+        }
+      });
+    }
+
+
+    // BOOTSTRAP the app!
+    System.import('index').then(function(m: any /** TODO #9100 */) {
+      m.main();
+    }, console.error.bind(console));
+  }
+
+
+  function writeScriptTag(scriptUrl: any /** TODO #9100 */, onload?: any /** TODO #9100 */) {
+    document.write(`<script src="${scriptUrl}" onload="${onload}"></script>`);
+  }
+}(window));
diff --git a/modules/benchmarks_external/src/compiler/compiler_benchmark.dart b/modules/benchmarks_external/src/compiler/compiler_benchmark.dart
deleted file mode 100644
index 5fd61ba6cfb1..000000000000
--- a/modules/benchmarks_external/src/compiler/compiler_benchmark.dart
+++ /dev/null
@@ -1,90 +0,0 @@
-// compiler benchmark in AngularDart 1.x
-library compiler_benchmark_ng10;
-
-import 'package:angular/angular.dart';
-import 'package:angular/application_factory.dart';
-import 'dart:html';
-import 'package:angular2/src/test_lib/benchmark_util.dart';
-
-main() {
-  var count = getIntParameter('elements');
-
-  var m = new Module()
-    ..bind(Dir0)
-    ..bind(Dir1)
-    ..bind(Dir2)
-    ..bind(Dir3)
-    ..bind(Dir4);
-
-  var templateWithBindings = loadTemplate('templateWithBindings', count);
-  var templateNoBindings = loadTemplate('templateWithBindings', count);
-
-  final injector = applicationFactory().addModule(m).run();
-  final compiler = injector.get(Compiler);
-  final directiveMap = injector.get(DirectiveMap);
-
-  compileWithBindings() {
-    final cloned = templateWithBindings.clone(true);
-    compiler([cloned], directiveMap);
-  }
-
-  compileNoBindings() {
-    final cloned = templateNoBindings.clone(true);
-    compiler([cloned], directiveMap);
-  }
-
-  bindAction('#compileWithBindings', compileWithBindings);
-  bindAction('#compileNoBindings', compileNoBindings);
-}
-
-loadTemplate(templateId, repeatCount) {
-  String result = '';
-  var content = document.querySelector("#${templateId}").innerHtml;
-  for (var i = 0; i < repeatCount; i++) {
-    result += content;
-  }
-  return createTemplate(result.replaceAll(new RegExp(r'[\[\]]'), ''));
-}
-
-class IdentitySanitizer implements NodeTreeSanitizer {
-  void sanitizeTree(Node node) {}
-}
-
-createTemplate(String html) {
-  var div = document.createElement('div');
-  div.setInnerHtml(html, treeSanitizer: new IdentitySanitizer());
-  return div;
-}
-
-@Directive(selector: '[dir0]', map: const {'attr0': '=>prop'})
-class Dir0 {
-  Object prop;
-}
-
-@Directive(selector: '[dir1]', map: const {'attr1': '=>prop'})
-class Dir1 {
-  Object prop;
-
-  constructor(Dir0 dir0) {}
-}
-
-@Directive(selector: '[dir2]', map: const {'attr2': '=>prop'})
-class Dir2 {
-  Object prop;
-
-  constructor(Dir1 dir1) {}
-}
-
-@Directive(selector: '[dir3]', map: const {'attr3': '=>prop'})
-class Dir3 {
-  Object prop;
-
-  constructor(Dir2 dir2) {}
-}
-
-@Directive(selector: '[dir4]', map: const {'attr4': '=>prop'})
-class Dir4 {
-  Object prop;
-
-  constructor(Dir3 dir3) {}
-}
diff --git a/modules/benchmarks_external/src/compiler/compiler_benchmark.ts b/modules/benchmarks_external/src/compiler/compiler_benchmark.ts
index c87eb154aa2f..fddeca1e35c8 100644
--- a/modules/benchmarks_external/src/compiler/compiler_benchmark.ts
+++ b/modules/benchmarks_external/src/compiler/compiler_benchmark.ts
@@ -1,24 +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
+ */
+
 // compiler benchmark in AngularJS 1.x
-import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-import angular = require("angular");
+import {getIntParameter, bindAction} from '@angular/testing/src/benchmark_util';
+declare var angular: any;
 
 export function main() {
-  var ngEl = document.createElement('div');
+  const ngEl = document.createElement('div');
   angular.bootstrap(ngEl, ['app']);
 }
 
 function loadTemplate(templateId, repeatCount) {
-  var template = document.querySelectorAll(`#${templateId}`)[0];
-  var content = template.innerHTML;
-  var result = '';
-  for (var i = 0; i < repeatCount; i++) {
+  const template = document.querySelectorAll(`#${templateId}`)[0];
+  const content = (<HTMLElement>template).innerHTML;
+  let result = '';
+  for (let i = 0; i < repeatCount; i++) {
     result += content;
   }
   // replace [] binding syntax
   result = result.replace(/[\[\]]/g, '');
 
   // Use a DIV as container as Angular 1.3 does not know <template> elements...
-  var div = document.createElement('div');
+  const div = document.createElement('div');
   div.innerHTML = result;
   return div;
 }
@@ -30,8 +38,8 @@ angular.module('app', [])
                  function($parse) {
                    return {
                      compile: function($element, $attrs) {
-                       var expr = $parse($attrs.attr0);
-                       return function($scope) { $scope.$watch(expr, angular.noop); }
+                       const expr = $parse($attrs.attr0);
+                       return ($scope) => $scope.$watch(expr, angular.noop);
                      }
                    };
                  }
@@ -42,8 +50,8 @@ angular.module('app', [])
                  function($parse) {
                    return {
                      compile: function($element, $attrs) {
-                       var expr = $parse($attrs.attr1);
-                       return function($scope) { $scope.$watch(expr, angular.noop); }
+                       const expr = $parse($attrs.attr1);
+                       return ($scope) => $scope.$watch(expr, angular.noop);
                      }
                    };
                  }
@@ -54,8 +62,8 @@ angular.module('app', [])
                  function($parse) {
                    return {
                      compile: function($element, $attrs) {
-                       var expr = $parse($attrs.attr2);
-                       return function($scope) { $scope.$watch(expr, angular.noop); }
+                       const expr = $parse($attrs.attr2);
+                       return ($scope) => $scope.$watch(expr, angular.noop);
                      }
                    };
                  }
@@ -66,8 +74,8 @@ angular.module('app', [])
                  function($parse) {
                    return {
                      compile: function($element, $attrs) {
-                       var expr = $parse($attrs.attr3);
-                       return function($scope) { $scope.$watch(expr, angular.noop); }
+                       const expr = $parse($attrs.attr3);
+                       return ($scope) => $scope.$watch(expr, angular.noop);
                      }
                    };
                  }
@@ -78,8 +86,8 @@ angular.module('app', [])
                  function($parse) {
                    return {
                      compile: function($element, $attrs) {
-                       var expr = $parse($attrs.attr4);
-                       return function($scope) { $scope.$watch(expr, angular.noop); }
+                       const expr = $parse($attrs.attr4);
+                       return ($scope) => $scope.$watch(expr, angular.noop);
                      }
                    };
                  }
@@ -87,22 +95,22 @@ angular.module('app', [])
     .run([
       '$compile',
       function($compile) {
-        var count = getIntParameter('elements');
-        var templateNoBindings = loadTemplate('templateNoBindings', count);
-        var templateWithBindings = loadTemplate('templateWithBindings', count);
+        const count = getIntParameter('elements');
+        const templateNoBindings = loadTemplate('templateNoBindings', count);
+        const templateWithBindings = loadTemplate('templateWithBindings', count);
 
         bindAction('#compileWithBindings', compileWithBindings);
         bindAction('#compileNoBindings', compileNoBindings);
 
         function compileNoBindings() {
           // Need to clone every time as the compiler might modify the template!
-          var cloned = templateNoBindings.cloneNode(true);
+          const cloned = templateNoBindings.cloneNode(true);
           $compile(cloned);
         }
 
         function compileWithBindings() {
           // Need to clone every time as the compiler might modify the template!
-          var cloned = templateWithBindings.cloneNode(true);
+          const cloned = templateWithBindings.cloneNode(true);
           $compile(cloned);
         }
       }
diff --git a/modules/benchmarks_external/src/index.html b/modules/benchmarks_external/src/index.html
index 589941180242..d9c74f9c2e08 100644
--- a/modules/benchmarks_external/src/index.html
+++ b/modules/benchmarks_external/src/index.html
@@ -8,6 +8,9 @@
     <li>
       <a href="tree/tree_benchmark.html">Tree benchmark</a>
     </li>
+    <li>
+      <a href="static_tree/tree_benchmark.html">Static tree benchmark</a>
+    </li>
     <li>
       <a href="tree/polymer/index.html">Polymer Tree benchmark</a>
     </li>
diff --git a/modules/benchmarks_external/src/largetable/largetable_benchmark.dart b/modules/benchmarks_external/src/largetable/largetable_benchmark.dart
deleted file mode 100644
index fc8570d09821..000000000000
--- a/modules/benchmarks_external/src/largetable/largetable_benchmark.dart
+++ /dev/null
@@ -1 +0,0 @@
-library benchmarks_external.src.largetable;
diff --git a/modules/benchmarks_external/src/largetable/largetable_benchmark.ts b/modules/benchmarks_external/src/largetable/largetable_benchmark.ts
index 792c14aa7d6f..3d00f14880ae 100644
--- a/modules/benchmarks_external/src/largetable/largetable_benchmark.ts
+++ b/modules/benchmarks_external/src/largetable/largetable_benchmark.ts
@@ -1,13 +1,17 @@
-import {
-  getIntParameter,
-  getStringParameter,
-  bindAction
-} from 'angular2/src/test_lib/benchmark_util';
-import angular = require("angular");
+/**
+ * @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
+ */
 
-var totalRows = getIntParameter('rows');
-var totalColumns = getIntParameter('columns');
-var benchmarkType = getStringParameter('benchmarkType');
+import {getIntParameter, getStringParameter, bindAction} from '@angular/testing/src/benchmark_util';
+declare var angular: any;
+
+const totalRows = getIntParameter('rows');
+const totalColumns = getIntParameter('columns');
+const benchmarkType = getStringParameter('benchmarkType');
 
 export function main() {
   angular.bootstrap(document.querySelector('largetable'), ['app']);
@@ -41,14 +45,14 @@ angular.module('app', [])
                     $scope.$apply(function() { $scope.benchmarkType = benchmarkType; });
                   }
 
-                  var data = $scope.data = [];
+                  const data = $scope.data = [];
 
                   function iGetter() { return this.i; }
                   function jGetter() { return this.j; }
 
-                  for (var i = 0; i < totalRows; i++) {
+                  for (let i = 0; i < totalRows; i++) {
                     data[i] = [];
-                    for (var j = 0; j < totalColumns; j++) {
+                    for (let j = 0; j < totalColumns; j++) {
                       data[i][j] = {i: i, j: j, iFn: iGetter, jFn: jGetter};
                     }
                   }
@@ -58,8 +62,8 @@ angular.module('app', [])
                  return {
                    restrict: 'E',
                    link: function($scope, $element) {
-                     var i, j, row, cell, comment;
-                     var template = document.createElement('span');
+                     let i, j, row, cell, comment;
+                     const template = document.createElement('span');
                      template.setAttribute('ng-repeat', 'foo in foos');
                      template.classList.add('ng-scope');
                      template.appendChild(document.createElement('span'));
@@ -90,8 +94,8 @@ angular.module('app', [])
       return {
         restrict: 'E',
         link: function($scope, $element) {
-          var i, j, row, cell, comment;
-          var template = document.createElement('span');
+          let i, j, row, cell, comment;
+          const template = document.createElement('span');
           template.setAttribute('ng-repeat', 'foo in foos');
           template.classList.add('ng-scope');
 
@@ -112,4 +116,4 @@ angular.module('app', [])
           }
         }
       };
-    })
+    });
diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/app.dart b/modules/benchmarks_external/src/naive_infinite_scroll/app.dart
deleted file mode 100644
index 6a09e6163006..000000000000
--- a/modules/benchmarks_external/src/naive_infinite_scroll/app.dart
+++ /dev/null
@@ -1,57 +0,0 @@
-library scroll_app;
-
-import 'dart:async';
-import 'dart:html';
-import 'package:angular/angular.dart';
-import 'package:angular2/src/test_lib/benchmark_util.dart';
-
-@Component(selector: 'scroll-app', template: '''
-    <div>
-        <div style="display: flex">
-          <scroll-area scroll-top="scrollTop"></scroll-area>
-        </div>
-        <div ng-if="scrollAreas.length > 0">
-          <p>Following tables are only here to add weight to the UI:</p>
-          <scroll-area ng-repeat="scrollArea in scrollAreas"></scroll-area>
-        </div>
-    </div>
-    ''')
-class App implements ShadowRootAware {
-  final VmTurnZone ngZone;
-  List<int> scrollAreas;
-  int scrollTop = 0;
-  int iterationCount;
-  int scrollIncrement;
-
-  App(this.ngZone) {
-    int appSize = getIntParameter('appSize');
-    iterationCount = getIntParameter('iterationCount');
-    scrollIncrement = getIntParameter('scrollIncrement');
-    appSize = appSize > 1 ? appSize - 1 : 0; // draw at least one table
-    scrollAreas = new List.generate(appSize, (i) => i);
-  }
-
-  @override
-  void onShadowRoot(ShadowRoot shadowRoot) {
-    bindAction('#run-btn', () {
-      runBenchmark();
-    });
-    bindAction('#reset-btn', () {
-      scrollTop = 0;
-    });
-  }
-
-  void runBenchmark() {
-    int n = iterationCount;
-    scheduleScroll() {
-      new Future(() {
-        scrollTop += scrollIncrement;
-        n--;
-        if (n > 0) {
-          scheduleScroll();
-        }
-      });
-    }
-    scheduleScroll();
-  }
-}
diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/cells.dart b/modules/benchmarks_external/src/naive_infinite_scroll/cells.dart
deleted file mode 100644
index 204736107541..000000000000
--- a/modules/benchmarks_external/src/naive_infinite_scroll/cells.dart
+++ /dev/null
@@ -1,113 +0,0 @@
-library cells;
-
-import 'package:angular/angular.dart';
-import 'common.dart';
-
-@Component(selector: 'company-name', template: '''
-    <div style="width: {{width}}">{{company.name}}</div>
-    ''', map: const {'company': '=>company', 'cell-width': '=>width',})
-class CompanyNameComponent {
-  String width;
-  Company company;
-}
-
-@Component(selector: 'opportunity-name', template: '''
-    <div style="width: {{width}}">{{opportunity.name}}</div>
-    ''', map: const {'opportunity': '=>opportunity', 'cell-width': '=>width',})
-class OpportunityNameComponent {
-  String width;
-  Opportunity opportunity;
-}
-
-@Component(selector: 'offering-name', template: '''
-    <div style="width: {{width}}">{{offering.name}}</div>
-    ''', map: const {'offering': '=>offering', 'cell-width': '=>width',})
-class OfferingNameComponent {
-  String width;
-  Offering offering;
-}
-
-class Stage {
-  String name;
-  bool isDisabled;
-  Map style;
-  Function apply;
-
-  String get styleString => style != null
-      ? style.keys.map((prop) => '$prop: ${style[prop]}').join(';')
-      : '';
-}
-
-@Component(selector: 'stage-buttons', template: '''
-    <div style="width: {{width}}">
-        <button ng-repeat="stage in stages"
-                ng-disabled="stage.isDisabled"
-                style="{{stage.styleString}}"
-                ng-click="setStage(stage)">
-          {{stage.name}}
-        </button>
-    </div>
-    ''', map: const {'offering': '=>offering', 'cell-width': '=>width',})
-class StageButtonsComponent {
-  Offering _offering;
-  List<Stage> stages;
-  String width;
-
-  Offering get offering => _offering;
-  set offering(Offering offering) {
-    _offering = offering;
-    _computeStageButtons();
-  }
-
-  setStage(Stage stage) {
-    _offering.status = stage.name;
-    _computeStageButtons();
-  }
-
-  _computeStageButtons() {
-    bool disabled = true;
-    stages = STATUS_LIST.map((String status) {
-      bool isCurrent = offering.status == status;
-      var stage = new Stage();
-      stage
-        ..name = status
-        ..isDisabled = disabled
-        ..style = {
-          'background-color': disabled ? '#DDD' : isCurrent ? '#DDF' : '#FDD'
-        };
-      if (isCurrent) {
-        disabled = false;
-      }
-      return stage;
-    }).toList();
-  }
-}
-
-@Component(selector: 'account-cell', template: '''
-    <div style="width: {{width}}">
-      <a href="/account/{{account.accountId}}">
-        {{account.accountId}}
-      </a>
-    </div>
-    ''', map: const {'account': '=>account', 'cell-width': '=>width',})
-class AccountCellComponent {
-  Account account;
-  String width;
-}
-
-@Component(
-    selector: 'formatted-cell',
-    template: '''<div style="width: {{width}}">{{formattedValue}}</div>''',
-    map: const {'value': '=>value', 'cell-width': '=>width',})
-class FormattedCellComponent {
-  String formattedValue;
-  String width;
-
-  set value(dynamic value) {
-    if (value is DateTime) {
-      formattedValue = '${value.month}/${value.day}/${value.year}';
-    } else {
-      formattedValue = value.toString();
-    }
-  }
-}
diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/common.dart b/modules/benchmarks_external/src/naive_infinite_scroll/common.dart
deleted file mode 100644
index dd27e5a30af3..000000000000
--- a/modules/benchmarks_external/src/naive_infinite_scroll/common.dart
+++ /dev/null
@@ -1,202 +0,0 @@
-library common.stuff;
-
-import 'dart:async';
-import 'dart:collection';
-import 'package:observe/observe.dart';
-
-const ITEMS = 1000;
-const ITEM_HEIGHT = 40;
-const VISIBLE_ITEMS = 17;
-
-const HEIGHT = ITEMS * ITEM_HEIGHT;
-const VIEW_PORT_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
-
-const COMPANY_NAME_WIDTH = 100;
-const OPPORTUNITY_NAME_WIDTH = 100;
-const OFFERING_NAME_WIDTH = 100;
-const ACCOUNT_CELL_WIDTH = 50;
-const BASE_POINTS_WIDTH = 50;
-const KICKER_POINTS_WIDTH = 50;
-const STAGE_BUTTONS_WIDTH = 220;
-const BUNDLES_WIDTH = 120;
-const DUE_DATE_WIDTH = 100;
-const END_DATE_WIDTH = 100;
-const AAT_STATUS_WIDTH = 100;
-const ROW_WIDTH = COMPANY_NAME_WIDTH +
-    OPPORTUNITY_NAME_WIDTH +
-    OFFERING_NAME_WIDTH +
-    ACCOUNT_CELL_WIDTH +
-    BASE_POINTS_WIDTH +
-    KICKER_POINTS_WIDTH +
-    STAGE_BUTTONS_WIDTH +
-    BUNDLES_WIDTH +
-    DUE_DATE_WIDTH +
-    END_DATE_WIDTH +
-    AAT_STATUS_WIDTH;
-
-const STATUS_LIST = const ['Planned', 'Pitched', 'Won', 'Lost'];
-
-const AAT_STATUS_LIST = const ['Active', 'Passive', 'Abandoned'];
-
-// Imitate Streamy entities.
-
-class RawEntity extends Object with MapMixin<String, dynamic>
-    implements ObservableMap<String, dynamic> {
-  ObservableMap _data = new ObservableMap();
-
-  @override
-  Iterable<String> get keys => _data.keys;
-
-  @override
-  void clear() {
-    _data.clear();
-  }
-
-  @override
-  operator [](String key) {
-    if (!key.contains('.')) {
-      return _data[key];
-    }
-    var pieces = key.split('.');
-    var last = pieces.removeLast();
-    var target = _resolve(pieces, this);
-    if (target == null) {
-      return null;
-    }
-    return target[last];
-  }
-
-  @override
-  operator []=(String key, value) {
-    if (!key.contains('.')) {
-      _data[key] = value;
-      return;
-    }
-    var pieces = key.split('.');
-    var last = pieces.removeLast();
-    var target = _resolve(pieces, this);
-    target[last] = value;
-  }
-
-  @override
-  remove(String key) {
-    if (!key.contains('.')) {
-      return _data.remove(key);
-    }
-    var pieces = key.split('.');
-    var last = pieces.removeLast();
-    var target = _resolve(pieces, this);
-    return target.remove(last);
-  }
-
-  _resolve(List<String> pieces, start) {
-    var cur = start;
-    for (var i = 0; i < pieces.length; i++) {
-      cur = cur[pieces[i]];
-      if (cur == null) {
-        return null;
-      }
-    }
-    return cur;
-  }
-
-  @override
-  Stream<List<ChangeRecord>> get changes => _data.changes;
-  @override
-  bool get hasObservers => _data.hasObservers;
-  @override
-  bool deliverChanges() => _data.deliverChanges();
-  @override
-  notifyPropertyChange(Symbol field, Object oldValue, Object newValue) =>
-      _data.notifyPropertyChange(field, oldValue, newValue);
-  @override
-  void notifyChange(ChangeRecord record) {
-    _data.notifyChange(record);
-  }
-  @override
-  void observed() {
-    _data.observed();
-  }
-  @override
-  void unobserved() {
-    _data.observed();
-  }
-}
-
-class Company extends RawEntity {
-  String get name => this['name'];
-  set name(String val) {
-    this['name'] = val;
-  }
-}
-
-class Offering extends RawEntity {
-  String get name => this['name'];
-  set name(String val) {
-    this['name'] = val;
-  }
-
-  Company get company => this['company'];
-  set company(Company val) {
-    this['company'] = val;
-  }
-
-  Opportunity get opportunity => this['opportunity'];
-  set opportunity(Opportunity val) {
-    this['opportunity'] = val;
-  }
-
-  Account get account => this['account'];
-  set account(Account val) {
-    this['account'] = val;
-  }
-
-  int get basePoints => this['basePoints'];
-  set basePoints(int val) {
-    this['basePoints'] = val;
-  }
-
-  int get kickerPoints => this['kickerPoints'];
-  set kickerPoints(int val) {
-    this['kickerPoints'] = val;
-  }
-
-  String get status => this['status'];
-  set status(String val) {
-    this['status'] = val;
-  }
-
-  String get bundles => this['bundles'];
-  set bundles(String val) {
-    this['bundles'] = val;
-  }
-
-  DateTime get dueDate => this['dueDate'];
-  set dueDate(DateTime val) {
-    this['dueDate'] = val;
-  }
-
-  DateTime get endDate => this['endDate'];
-  set endDate(DateTime val) {
-    this['endDate'] = val;
-  }
-
-  String get aatStatus => this['aatStatus'];
-  set aatStatus(String val) {
-    this['aatStatus'] = val;
-  }
-}
-
-class Opportunity extends RawEntity {
-  String get name => this['name'];
-  set name(String val) {
-    this['name'] = val;
-  }
-}
-
-class Account extends RawEntity {
-  int get accountId => this['accountId'];
-  set accountId(int val) {
-    this['accountId'] = val;
-  }
-}
diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/index.dart b/modules/benchmarks_external/src/naive_infinite_scroll/index.dart
deleted file mode 100644
index e20afdc602b3..000000000000
--- a/modules/benchmarks_external/src/naive_infinite_scroll/index.dart
+++ /dev/null
@@ -1,28 +0,0 @@
-library naive_infinite_scroll;
-
-import 'package:angular/angular.dart';
-import 'package:angular/application_factory.dart';
-import 'app.dart';
-import 'scroll_area.dart';
-import 'scroll_item.dart';
-import 'cells.dart';
-
-class MyAppModule extends Module {
-  MyAppModule() {
-    bind(ResourceResolverConfig,
-        toValue: new ResourceResolverConfig.resolveRelativeUrls(false));
-    bind(App);
-    bind(ScrollAreaComponent);
-    bind(ScrollItemComponent);
-    bind(CompanyNameComponent);
-    bind(OpportunityNameComponent);
-    bind(OfferingNameComponent);
-    bind(AccountCellComponent);
-    bind(StageButtonsComponent);
-    bind(FormattedCellComponent);
-  }
-}
-
-void main() {
-  applicationFactory().addModule(new MyAppModule()).run();
-}
diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/index.html b/modules/benchmarks_external/src/naive_infinite_scroll/index.html
index 701cdaecd5a8..a64776bc6e7f 100644
--- a/modules/benchmarks_external/src/naive_infinite_scroll/index.html
+++ b/modules/benchmarks_external/src/naive_infinite_scroll/index.html
@@ -5,9 +5,9 @@
 </head>
 <body>
   <form>
-    App size: <input type="text" name="appSize" value="1"></input><br>
-    Iteration count: <input type="text" name="iterationCount" value="1"></input><br>
-    Scroll increment: <input type="text" name="scrollIncrement" value="1"></input><br>
+    App size: <input type="text" name="appSize" value="1"><br>
+    Iteration count: <input type="text" name="iterationCount" value="1"><br>
+    Scroll increment: <input type="text" name="scrollIncrement" value="1"><br>
   </form>
   <div>
     <button id="run-btn">Run</button>
diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/random_data.dart b/modules/benchmarks_external/src/naive_infinite_scroll/random_data.dart
deleted file mode 100644
index 2a1c00ce1dd7..000000000000
--- a/modules/benchmarks_external/src/naive_infinite_scroll/random_data.dart
+++ /dev/null
@@ -1,73 +0,0 @@
-library random_data;
-
-import 'common.dart';
-
-List<Offering> generateOfferings(int count) =>
-    new List.generate(count, generateOffering);
-
-Offering generateOffering(int seed) {
-  final res = new Offering();
-  res.name = generateName(seed++);
-  res.company = generateCompany(seed++);
-  res.opportunity = generateOpportunity(seed++);
-  res.account = generateAccount(seed++);
-  res.basePoints = seed % 10;
-  res.kickerPoints = seed % 4;
-  res.status = STATUS_LIST[seed % STATUS_LIST.length];
-  res.bundles = randomString(seed++);
-  res.dueDate = randomDate(seed++);
-  res.endDate = randomDate(seed++, minDate: res.dueDate);
-  res.aatStatus = AAT_STATUS_LIST[seed % AAT_STATUS_LIST.length];
-  return res;
-}
-
-Company generateCompany(int seed) {
-  return new Company()..name = generateName(seed);
-}
-
-Opportunity generateOpportunity(int seed) {
-  return new Opportunity()..name = generateName(seed);
-}
-
-Account generateAccount(int seed) {
-  return new Account()..accountId = seed;
-}
-
-String generateName(int seed) {
-  const names = const [
-    'Foo',
-    'Bar',
-    'Baz',
-    'Qux',
-    'Quux',
-    'Garply',
-    'Waldo',
-    'Fred',
-    'Plugh',
-    'Xyzzy',
-    'Thud',
-    'Cruft',
-    'Stuff'
-  ];
-  return names[seed % names.length];
-}
-
-DateTime randomDate(int seed, {DateTime minDate}) {
-  if (minDate == null) {
-    minDate = new DateTime.now();
-  }
-
-  const offsets = const [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-  return minDate.add(new Duration(days: offsets[seed % offsets.length]));
-}
-
-String randomString(int seed) {
-  return new String.fromCharCodes(new List.generate(const [
-    5,
-    7,
-    9,
-    11,
-    13
-  ][seed % 5], (i) =>
-      'a'.codeUnitAt(0) + const [0, 1, 2, 3, 4, 5, 6, 7, 8][seed % 9] + i));
-}
diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/scroll_area.dart b/modules/benchmarks_external/src/naive_infinite_scroll/scroll_area.dart
deleted file mode 100644
index efc9414c72d2..000000000000
--- a/modules/benchmarks_external/src/naive_infinite_scroll/scroll_area.dart
+++ /dev/null
@@ -1,57 +0,0 @@
-library scroll_area;
-
-import 'dart:html';
-import 'dart:math' as math;
-import 'package:angular/angular.dart';
-import 'common.dart';
-import 'random_data.dart';
-
-@Component(
-    selector: 'scroll-area',
-    templateUrl: 'scroll_area.html',
-    map: const {'scroll-top': '=>scrollTop',})
-class ScrollAreaComponent implements ShadowRootAware {
-  Element scrollDiv;
-  List<Offering> _fullList;
-  List<Offering> visibleItems = [];
-
-  // Init empty maps and populate later. There seems to be a bug in Angular
-  // that makes it choke on pre-populated style maps.
-  final Map paddingStyle = {};
-  final Map innerStyle = {};
-  final Map scrollDivStyle = {};
-
-  ScrollAreaComponent() {
-    _fullList = generateOfferings(ITEMS);
-  }
-
-  @override
-  void onShadowRoot(ShadowRoot shadowRoot) {
-    scrollDiv = shadowRoot.querySelector('#scrollDiv');
-    onScroll();
-    scrollDivStyle.addAll({
-      'height': '${VIEW_PORT_HEIGHT}px',
-      'width': '1000px',
-      'border': '1px solid #000',
-      'overflow': 'scroll',
-    });
-    innerStyle['width'] = '${ROW_WIDTH}px';
-  }
-
-  set scrollTop(int value) {
-    if (value == null || scrollDiv == null) return;
-    scrollDiv.scrollTop = value;
-  }
-
-  void onScroll() {
-    int scrollY = scrollDiv.scrollTop;
-    int iStart = scrollY == 0 ? 0 : (scrollY / ITEM_HEIGHT).floor();
-    int iEnd = math.min(iStart + VISIBLE_ITEMS + 1, _fullList.length);
-    int padding = iStart * ITEM_HEIGHT;
-    innerStyle['height'] = '${HEIGHT - padding}px';
-    paddingStyle['height'] = '${padding}px';
-    visibleItems
-      ..clear()
-      ..addAll(_fullList.getRange(iStart, iEnd));
-  }
-}
diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/scroll_item.dart b/modules/benchmarks_external/src/naive_infinite_scroll/scroll_item.dart
deleted file mode 100644
index 732a4c6eb2ce..000000000000
--- a/modules/benchmarks_external/src/naive_infinite_scroll/scroll_item.dart
+++ /dev/null
@@ -1,38 +0,0 @@
-library scroll_item;
-
-import 'package:angular/angular.dart';
-import 'common.dart';
-
-@Component(
-    selector: 'scroll-item',
-    templateUrl: 'scroll_item.html',
-    map: const {'offering': '=>offering',})
-class ScrollItemComponent implements ShadowRootAware {
-  Offering offering;
-
-  // Init empty maps and populate later. There seems to be a bug in Angular
-  // that makes it choke on pre-populated style maps.
-  Map itemStyle = {};
-
-  @override
-  void onShadowRoot(_) {
-    itemStyle.addAll({
-      'height': '${ITEM_HEIGHT}px',
-      'line-height': '${ITEM_HEIGHT}px',
-      'font-size': '18px',
-      'display': 'flex',
-      'justify-content': 'space-between',
-    });
-  }
-  get companyNameWidth => '${COMPANY_NAME_WIDTH}px';
-  get opportunityNameWidth => '${OPPORTUNITY_NAME_WIDTH}px';
-  get offeringNameWidth => '${OFFERING_NAME_WIDTH}px';
-  get accountCellWidth => '${ACCOUNT_CELL_WIDTH}px';
-  get basePointsWidth => '${BASE_POINTS_WIDTH}px';
-  get kickerPointsWidth => '${KICKER_POINTS_WIDTH}px';
-  get stageButtonsWidth => '${STAGE_BUTTONS_WIDTH}px';
-  get bundlesWidth => '${BUNDLES_WIDTH}px';
-  get dueDateWidth => '${DUE_DATE_WIDTH}px';
-  get endDateWidth => '${END_DATE_WIDTH}px';
-  get aatStatusWidth => '${AAT_STATUS_WIDTH}px';
-}
diff --git a/modules/benchmarks_external/src/static_tree/tree_benchmark.html b/modules/benchmarks_external/src/static_tree/tree_benchmark.html
new file mode 100644
index 000000000000..8cb216a072fc
--- /dev/null
+++ b/modules/benchmarks_external/src/static_tree/tree_benchmark.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<body>
+
+<h2>AngularJS/Dart 1.x static tree benchmark (depth 10)</h2>
+<p>
+<button id="destroyDom">destroyDom</button>
+<button id="createDom">createDom</button>
+</p>
+
+<div>
+<tree9 data="initData" ng-if="initData != null" class="app"></tree9>
+</div>
+
+$SCRIPTS$
+</body>
+</html>
diff --git a/modules/benchmarks_external/src/static_tree/tree_benchmark.ts b/modules/benchmarks_external/src/static_tree/tree_benchmark.ts
new file mode 100644
index 000000000000..3dcf96cae1c7
--- /dev/null
+++ b/modules/benchmarks_external/src/static_tree/tree_benchmark.ts
@@ -0,0 +1,77 @@
+/**
+ * @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
+ */
+
+// static tree benchmark in AngularJS 1.x
+import {getIntParameter, bindAction} from '@angular/testing/src/benchmark_util';
+declare var angular: any;
+
+const MAX_DEPTH = 10;
+
+export function main() {
+  angular.bootstrap(document.querySelector('.app'), ['app']);
+}
+
+function addTreeDirective(module, level: number) {
+  let template;
+  if (level <= 0) {
+    template = `<span> {{data.value}}</span>`;
+  } else {
+    template = `<span> {{data.value}} <tree${level-1} data='data.right'></tree${level-1}><tree${level-1} data='data.left'></tree${level-1}></span>`;
+  }
+  module.directive(`tree${level}`, function() { return {scope: {data: '='}, template: template}; });
+}
+
+const module = angular.module('app', []);
+for (let depth = 0; depth < MAX_DEPTH; depth++) {
+  addTreeDirective(module, depth);
+}
+module.config([
+        '$compileProvider',
+        function($compileProvider) { $compileProvider.debugInfoEnabled(false); }
+      ])
+    .run([
+      '$rootScope',
+      function($rootScope) {
+        let count = 0;
+        $rootScope.initData = null;
+
+        bindAction('#destroyDom', destroyDom);
+        bindAction('#createDom', createDom);
+
+        function createData(): TreeNode {
+          const values = count++ % 2 == 0 ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
+                                          ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
+          return buildTree(MAX_DEPTH, values, 0);
+        }
+
+        function destroyDom() {
+          $rootScope.$apply(function() { $rootScope.initData = null; });
+        }
+
+        function createDom() {
+          $rootScope.$apply(function() { $rootScope.initData = createData(); });
+        }
+      }
+    ]);
+
+class TreeNode {
+  value: string;
+  left: TreeNode;
+  right: TreeNode;
+  constructor(value, left, right) {
+    this.value = value;
+    this.left = left;
+    this.right = right;
+  }
+}
+
+function buildTree(maxDepth, values, curDepth) {
+  if (maxDepth === curDepth) return new TreeNode('', null, null);
+  return new TreeNode(values[curDepth], buildTree(maxDepth, values, curDepth + 1),
+                      buildTree(maxDepth, values, curDepth + 1));
+}
diff --git a/modules/benchmarks_external/src/tree/polymer/binary_tree.html b/modules/benchmarks_external/src/tree/polymer/binary_tree.html
deleted file mode 100644
index 17d62b33f142..000000000000
--- a/modules/benchmarks_external/src/tree/polymer/binary_tree.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<link rel="import" href="polymer.html">
-<dom-module id="binary-tree">
-  <template>
-    <span>
-      <span>{{data.value}}</span>
-      <!-- TODO(tbosch): use the builtin conditional template when it is available in Polymer 0.8 -->
-      <span id="leftTree"></span>
-      <span id="rightTree"></span>
-    </span>
-  </template>
-</dom-module>
-<script>
-  (function() {
-    Polymer({
-      is: 'binary-tree',
-      properties: {
-        data: Object
-      },
-      leftTree: null,
-      rightTree: null,
-      dataChanged: function() {
-        var data = this.data || {};
-        this._updateTree(data.left, 'leftTree');
-        this._updateTree(data.right, 'rightTree');
-      },
-      _updateTree: function(data, treeName) {
-        if (data) {
-          if (!this[treeName]) {
-            this[treeName] = document.createElement('binary-tree');
-          }
-          this[treeName].data = data;
-          this.$[treeName].appendChild(this[treeName]);
-        } else {
-          if (this[treeName]) this[treeName].remove();
-          this[treeName] = null;
-        }
-      },
-      properties: {
-        data: 'dataChanged'
-      }
-    });
-  })();
-</script>
diff --git a/modules/benchmarks_external/src/tree/polymer/index.html b/modules/benchmarks_external/src/tree/polymer/index.html
deleted file mode 100644
index e3ad7351923c..000000000000
--- a/modules/benchmarks_external/src/tree/polymer/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <link rel="import" href="root_tree.html">
-</head>
-<body>
-
-<h2>TODO</h2>
-<ul>
-  <li>TODO: Does not use shadow DOM</li>
-  <li>TODO: Does not yet use builtin `if` construct as it uses a preview version of Polymer</li>
-</ul
-
-<h2>Params</h2>
-<form>
-  Depth:
-  <input type="number" name="depth" placeholder="depth" value="9">
-  <br>
-  <button>Apply</button>
-</form>
-
-<h2>Polymer JS 0.8-preview tree benchmark</h2>
-<root-tree></root-tree>
-
-
-<script src="url_params_to_form.js" type="text/javascript"></script>
-
-</body>
-</html>
diff --git a/modules/benchmarks_external/src/tree/polymer/root_tree.html b/modules/benchmarks_external/src/tree/polymer/root_tree.html
deleted file mode 100644
index cb4c43652859..000000000000
--- a/modules/benchmarks_external/src/tree/polymer/root_tree.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<link rel="import" href="polymer.html">
-<link rel="import" href="binary_tree.html">
-
-<dom-module id="root-tree">
-  <template>
-    <div>
-      <button on-click="create" id="createDom">createDom</button>
-      <button on-click="destroy" id="destroyDom">destroyDom</button>
-    </div>
-    <div>
-      <binary-tree data="[[data]]"></binary-tree>
-    </div>
-  </template>
-</dom-module>
-<script type="application/javascript">
-  (function() {
-    var count = 0;
-    var depthInput = document.querySelector('input[name=depth]');
-    var match = /depth=(\w+)/.exec(decodeURIComponent(location.search));
-    if (match) {
-      depthInput.value = match[1];
-    }
-    var maxDepth = depthInput.valueAsNumber;
-    Polymer({
-      is: 'root-tree',
-      properties: {
-        data: Object
-      },
-      create: function() {
-        var values = count++ % 2 == 0 ?
-          ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
-          ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
-
-        this.data = this.buildTree(maxDepth, values, 0);
-      },
-      destroy: function() {
-        this.data = null;
-      },
-      buildTree: function(maxDepth, values, curDepth) {
-        if (maxDepth == curDepth) return {value: '', left: null, right: null};
-        return {
-          value: values[curDepth],
-          left: this.buildTree(maxDepth, values, curDepth+1),
-          right: this.buildTree(maxDepth, values, curDepth+1)
-        };
-      }
-    });
-  })();
-</script>
diff --git a/modules/benchmarks_external/src/tree/react/index.dart b/modules/benchmarks_external/src/tree/react/index.dart
deleted file mode 100644
index f9f741fad9d4..000000000000
--- a/modules/benchmarks_external/src/tree/react/index.dart
+++ /dev/null
@@ -1 +0,0 @@
-library benchmarks_external.src.tree.react;
diff --git a/modules/benchmarks_external/src/tree/react/index.ts b/modules/benchmarks_external/src/tree/react/index.ts
index 7947c58675e4..cb3789804457 100644
--- a/modules/benchmarks_external/src/tree/react/index.ts
+++ b/modules/benchmarks_external/src/tree/react/index.ts
@@ -1,46 +1,54 @@
+/**
+ * @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
+ */
+
 // tree benchmark in React
-import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-import React from './react.min';
+import {getIntParameter, bindAction} from '@angular/testing/src/benchmark_util';
+import * as React from './react.min';
 
-var TreeComponent = React.createClass({
+const TreeComponent = React.createClass({
   displayName: 'TreeComponent',
 
   render: function() {
-    var treeNode = this.props.treeNode;
+    const treeNode = this.props.treeNode;
 
-    var left = null;
+    let left = null;
     if (treeNode.left) {
       left = React.createElement(
-          "span", {}, [React.createElement(TreeComponent, {treeNode: treeNode.left}, "")])
+          "span", {}, [React.createElement(TreeComponent, {treeNode: treeNode.left}, "")]);
     }
 
-    var right = null;
+    let right = null;
     if (treeNode.right) {
       right = React.createElement(
-          "span", {}, [React.createElement(TreeComponent, {treeNode: treeNode.right}, "")])
+          "span", {}, [React.createElement(TreeComponent, {treeNode: treeNode.right}, "")]);
     }
 
-    var span = React.createElement("span", {}, [" " + treeNode.value, left, right]);
+    const span = React.createElement("span", {}, [" " + treeNode.value, left, right]);
 
     return (React.createElement("tree", {}, [span]));
   }
 });
 
 export function main() {
-  var count = 0;
-  var maxDepth = getIntParameter('depth');
+  let count = 0;
+  const maxDepth = getIntParameter('depth');
 
   bindAction('#destroyDom', destroyDom);
   bindAction('#createDom', createDom);
 
-  var empty = new TreeNode(0, null, null);
-  var rootComponent = React.render(React.createElement(TreeComponent, {treeNode: empty}, ""),
+  const empty = new TreeNode(0, null, null);
+  const rootComponent = React.render(React.createElement(TreeComponent, {treeNode: empty}, ""),
                                    document.getElementById('rootTree'));
 
   function destroyDom() { rootComponent.setProps({treeNode: empty}); }
 
   function createDom() {
-    var values = count++ % 2 == 0 ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
+    const values = count++ % 2 == 0 ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
                                     ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
     rootComponent.setProps({treeNode: buildTree(maxDepth, values, 0)});
   }
diff --git a/modules/benchmarks_external/src/tree/react/react.min.d.ts b/modules/benchmarks_external/src/tree/react/react.min.d.ts
new file mode 100644
index 000000000000..1a6fdc30cdcb
--- /dev/null
+++ b/modules/benchmarks_external/src/tree/react/react.min.d.ts
@@ -0,0 +1,3 @@
+export var createElement: Function;
+export var render: Function;
+export var createClass: Function;
diff --git a/modules/benchmarks_external/src/tree/tree_benchmark.dart b/modules/benchmarks_external/src/tree/tree_benchmark.dart
deleted file mode 100644
index f29adbb598c5..000000000000
--- a/modules/benchmarks_external/src/tree/tree_benchmark.dart
+++ /dev/null
@@ -1,72 +0,0 @@
-// tree benchmark in AngularDart 1.x
-library tree_benchmark_ng10;
-
-import 'package:angular/angular.dart';
-import 'package:angular/application_factory.dart';
-import 'package:angular2/src/test_lib/benchmark_util.dart';
-
-setup() {
-  var m = new Module()
-    ..bind(CompilerConfig,
-        toValue: new CompilerConfig.withOptions(elementProbeEnabled: false))
-    ..bind(ScopeDigestTTL,
-        toFactory: () => new ScopeDigestTTL.value(15), inject: [])
-    ..bind(TreeComponent);
-
-  final injector = applicationFactory().addModule(m).run();
-
-  return injector;
-}
-
-main() {
-  var maxDepth = getIntParameter('depth');
-
-  final injector = setup();
-  final zone = injector.get(VmTurnZone);
-  final rootScope = injector.get(Scope);
-  var count = 0;
-
-  destroyDom() {
-    zone.run(() {
-      rootScope.context['initData'] = new TreeNode('');
-    });
-  }
-
-  createDom() {
-    zone.run(() {
-      var values = count++ % 2 == 0
-          ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*']
-          : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
-
-      rootScope.context['initData'] = buildTree(maxDepth, values, 0);
-    });
-  }
-
-  bindAction('#destroyDom', destroyDom);
-  bindAction('#createDom', createDom);
-}
-
-@Component(
-    selector: 'tree',
-    map: const {'data': '=>data'},
-    template: '<span> {{data.value}}'
-    '<span ng-if="data.right != null"><tree data=data.right></span>'
-    '<span ng-if="data.left != null"><tree data=data.left></span>'
-    '</span>')
-class TreeComponent {
-  var data;
-}
-
-buildTree(maxDepth, values, curDepth) {
-  if (maxDepth == curDepth) return new TreeNode('');
-  return new TreeNode(values[curDepth],
-      buildTree(maxDepth, values, curDepth + 1),
-      buildTree(maxDepth, values, curDepth + 1));
-}
-
-class TreeNode {
-  var value;
-  TreeNode left;
-  TreeNode right;
-  TreeNode([this.value, this.left, this.right]);
-}
diff --git a/modules/benchmarks_external/src/tree/tree_benchmark.ts b/modules/benchmarks_external/src/tree/tree_benchmark.ts
index 4ec5df35c6af..70d026abbe1a 100644
--- a/modules/benchmarks_external/src/tree/tree_benchmark.ts
+++ b/modules/benchmarks_external/src/tree/tree_benchmark.ts
@@ -1,6 +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
+ */
+
 // tree benchmark in AngularJS 1.x
-import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-import angular = require("angular");
+import {getIntParameter, bindAction} from '@angular/testing/src/benchmark_util';
+declare var angular: any;
 
 export function main() {
   angular.bootstrap(document.querySelector('tree'), ['app']);
@@ -24,18 +32,18 @@ angular.module('app', [])
                  '$compile',
                  '$parse',
                  function($compile, $parse) {
-                   var transcludeFn;
+                   const transcludeFn;
                    return {
                      compile: function(element, attrs) {
-                       var expr = $parse(attrs.treeIf);
-                       var template = '<tree data="' + attrs.treeIf + '"></tree>';
-                       var transclude;
+                       const expr = $parse('!!' + attrs.treeIf);
+                       const template = '<tree data="' + attrs.treeIf + '"></tree>';
+                       let transclude;
                        return function($scope, $element, $attrs) {
                          if (!transclude) {
                            transclude = $compile(template);
                          }
-                         var childScope;
-                         var childElement;
+                         let childScope;
+                         let childElement;
                          $scope.$watch(expr, function(newValue) {
                            if (childScope) {
                              childScope.$destroy();
@@ -49,10 +57,10 @@ angular.module('app', [])
                                                        function(clone) { $element.append(clone); });
                            }
                          });
-                       }
+                       };
 
                      }
-                   }
+                   };
                  }
                ])
     .config([
@@ -62,8 +70,8 @@ angular.module('app', [])
     .run([
       '$rootScope',
       function($rootScope) {
-        var count = 0;
-        var maxDepth = getIntParameter('depth');
+        let count = 0;
+        const maxDepth = getIntParameter('depth');
 
         bindAction('#destroyDom', destroyDom);
         bindAction('#createDom', createDom);
@@ -73,7 +81,7 @@ angular.module('app', [])
         }
 
         function createDom() {
-          var values = count++ % 2 == 0 ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
+          const values = count++ % 2 == 0 ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
                                           ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
 
           $rootScope.$apply(function() { $rootScope.initData = buildTree(maxDepth, values, 0); });
diff --git a/modules/benchpress/README.dart.md b/modules/benchpress/README.dart.md
deleted file mode 100644
index a303a345be32..000000000000
--- a/modules/benchpress/README.dart.md
+++ /dev/null
@@ -1,6 +0,0 @@
-Benchpress - a framework for e2e performance tests
-=========
-
-The sources for this package are in the main [Angular2](https://github.com/angular/angular) repo. Please file issues and pull requests against that repo.
-
-License: Apache MIT 2.0
diff --git a/modules/benchpress/README.js.md b/modules/benchpress/README.js.md
deleted file mode 100644
index 2365e330273a..000000000000
--- a/modules/benchpress/README.js.md
+++ /dev/null
@@ -1,18 +0,0 @@
-Benchpress - a framework for e2e performance tests
-=========
-
-The sources for this package are in the main [Angular2](https://github.com/angular/angular) repo. Please file issues and pull requests against that repo.
-
-This package contains different sources for different users:
-
-1. The files located in the root folder can be consumed using CommonJS
-2. The files under `/es6` are es6 compatible files that can be transpiled to
-   es5 using any transpiler. This contains:
-    * `dev/`: a development version that includes runtime type assertions
-    * `prod/`: a production version that does not include runtime type assertions
-3. The files under `/ts` are the Typescript source files
-
-As a convenience, we provide you with `/es6/{dev|prod}/es5build.js`, a script to transpile the es6 sources into es5
-using [Google Traceur](https://github.com/google/traceur-compiler/).
-
-License: Apache MIT 2.0
diff --git a/modules/benchpress/benchpress.dart b/modules/benchpress/benchpress.dart
deleted file mode 100644
index 3d334f5ec6ab..000000000000
--- a/modules/benchpress/benchpress.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-export './common.dart';
-export './src/webdriver/async_webdriver_adapter.dart'
-    show AsyncWebDriverAdapter;
diff --git a/modules/benchpress/benchpress.ts b/modules/benchpress/benchpress.ts
deleted file mode 100644
index 7215e59dd35b..000000000000
--- a/modules/benchpress/benchpress.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/// <reference path="../angular2/typings/node/node.d.ts" />
-
-import {bind} from 'angular2/di';
-import {Options} from './common';
-
-export * from './common';
-export {SeleniumWebDriverAdapter} from './src/webdriver/selenium_webdriver_adapter';
-
-var fs = require('fs');
-
-// TODO(tbosch): right now we bind the `writeFile` method
-// in benchpres/benchpress.es6. This does not work for Dart,
-// find another way...
-// Note: Can't do the `require` call in a facade as it can't be loaded into the browser
-// for our unit tests via karma.
-Options.DEFAULT_BINDINGS.push(bind(Options.WRITE_FILE).toValue(writeFile));
-
-function writeFile(filename, content): Promise<any> {
-  return new Promise(function(resolve, reject) {
-    fs.writeFile(filename, content, (error) => {
-      if (error) {
-        reject(error);
-      } else {
-        resolve();
-      }
-    });
-  })
-}
diff --git a/modules/benchpress/common.ts b/modules/benchpress/common.ts
deleted file mode 100644
index 939bedb79939..000000000000
--- a/modules/benchpress/common.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export {Sampler, SampleState} from './src/sampler';
-export {Metric} from './src/metric';
-export {Validator} from './src/validator';
-export {Reporter} from './src/reporter';
-export {WebDriverExtension, PerfLogFeatures} from './src/web_driver_extension';
-export {WebDriverAdapter} from './src/web_driver_adapter';
-export {SizeValidator} from './src/validator/size_validator';
-export {RegressionSlopeValidator} from './src/validator/regression_slope_validator';
-export {ConsoleReporter} from './src/reporter/console_reporter';
-export {JsonFileReporter} from './src/reporter/json_file_reporter';
-export {SampleDescription} from './src/sample_description';
-export {PerflogMetric} from './src/metric/perflog_metric';
-export {ChromeDriverExtension} from './src/webdriver/chrome_driver_extension';
-export {FirefoxDriverExtension} from './src/webdriver/firefox_driver_extension';
-export {IOsDriverExtension} from './src/webdriver/ios_driver_extension';
-export {Runner} from './src/runner';
-export {Options} from './src/common_options';
-export {MeasureValues} from './src/measure_values';
-export {MultiMetric} from './src/metric/multi_metric';
-export {MultiReporter} from './src/reporter/multi_reporter';
-
-export {bind, Injector, OpaqueToken} from 'angular2/di';
diff --git a/modules/benchpress/docs/index.md b/modules/benchpress/docs/index.md
deleted file mode 100644
index 6fe0940e3bce..000000000000
--- a/modules/benchpress/docs/index.md
+++ /dev/null
@@ -1,249 +0,0 @@
-# Benchpress
-
-Benchpress is a framework for e2e performance tests.
-
-# Why?
-
-There are so called "micro benchmarks" that esentially use a stop watch in the browser to measure time
-(e.g. via `performance.now()`). This approach is limited to time, and in some cases memory
-(Chrome with special flags), as metric. It does not allow to measure:
-
-- rendering time: e.g. the time the browser spends to layout or paint elements. This can e.g. used to
-  test the performance impact of stylesheet changes.
-- garbage collection: e.g. how long the browser paused script execution, and how much memory was collected.
-  This can be used to stabilize script execution time, as garbage collection times are usually very
-  unpredictable. This data can also be used to measure and improve memory usage of applications,
-  as the garbage collection amount directly affects garbage collection time.
-- distinguish script execution time from waiting: e.g. to measure the client side only time that is spent
-  in a complex user interaction, ignoring backend calls.
-- measure fps to assert the smoothness of scrolling and animations.
-
-This kind of data is already available in the DevTools of modern browsers. However, there is no standard way to
-use those tools in an automated way to measure web app performance, especially not across platforms.
-
-Benchpress tries to fill this gap, i.e. allow to access all kinds of performance metrics in an automated way.
-
-
-# How it works
-
-Benchpress uses webdriver to read out the so called "performance log" of browsers. This contains all kinds of interesting
-data, e.g. when a script started/ended executing, gc started/ended, the browser painted something to the screen, ...
-
-As browsers are different, benchpress has plugins to normalizes these events.
-
-
-# Features
-
-* Provides a loop (so called "Sampler") that executes the benchmark multiple times
-* Automatically waits/detects until the browser is "warm"
-* Reporters provide a normalized way to store results:
-  - console reporter
-  - file reporter
-  - Google Big Query reporter (coming soon)
-* Supports micro benchmarks as well via `console.time()` / `console.timeEnd()`
-  - `console.time()` / `console.timeEnd()` mark the timeline in the DevTools, so it makes sense
-    to use them in micro benchmark to visualize and understand them, with or without benchpress.
-  - running micro benchmarks in benchpress leverages the already existing reporters,
-    the sampler and the auto warmup feature of benchpress.
-
-
-# Supported browsers
-
-* Chrome on all platforms
-* Mobile Safari (iOS)
-* Firefox (work in progress)
-
-
-# How to write a benchmark
-
-A benchmark in benchpress is made by an application under test
-and a benchmark driver. The application under test is the
-actual application consisting of html/css/js that should be tests.
-A benchmark driver is a webdriver test that interacts with the
-application under test.
-
-
-## A simple benchmark
-
-Let's assume we want to measure the script execution time, as well as the render time
-that it takes to fill a container element with a complex html string.
-
-The application under test could look like this:
-
-```
-index.html:
-
-<button id="reset" onclick="reset()">Reset</button>
-<button id="fill" onclick="fill()">fill innerHTML</button>
-<div id="container"></div>
-<script>
-  var container = document.getElementById('container');
-  var complexHtmlString = '...'; // TODO
-
-  function reset() { cotainer.innerHTML = ''; }
-
-  function fill() {
-    container.innerHTML = complexHtmlString;
-  }
-</script>
-```
-
-A benchmark driver could look like this:
-
-```
-// A runner contains the shared configuration
-// and can be shared across multiple tests.
-var runner = new Runner(...);
-
-driver.get('http://myserver/index.html');
-
-var resetBtn = driver.findElement(By.id('reset'));
-var fillBtn = driver.findElement(By.id('fill'));
-
-runner.sample({
-  id: 'fillElement',
-  // Prepare is optional...
-  prepare: () {
-    resetBtn.click();
-  },
-  execute: () {
-    fillBtn.click();
-    // Note: if fillBtn would use some asynchronous code,
-    // we would need to wait here for its end.
-  }
-});
-```
-
-## Measuring in the browser
-
-If the application under test would like to, it can measure on its own.
-E.g.
-
-```
-index.html:
-
-<button id="measure" onclick="measure()">Measure document.createElement</button>
-<script>
-  function measure() {
-    console.time('createElement*10000');
-    for (var i=0; i<100000; i++) {
-      document.createElement('div');
-    }
-    console.timeEnd('createElement*10000');
-  }
-</script>
-```
-
-When the `measure` button is clicked, it marks the timeline and creates 10000 elements.
-It uses the special names `createElement*10000` to tell benchpress that the
-time that was measured is for 10000 calls to createElement and that benchpress should
-take the average for it.
-
-A test driver for this would look like this:
-
-````
-driver.get('.../index.html');
-
-var measureBtn = driver.findElement(By.id('measure'));
-runner.sample({
-  id: 'createElement test',
-  microMetrics: {
-    'createElement': 'time to create an element (ms)'
-  },
-  execute: () {
-    measureBtn.click();
-  }
-});
-````
-
-When looking into the DevTools Timeline, we see a marker as well:
-![Marked Timeline](marked_timeline.png)
-
-# Smoothness Metrics
-
-Benchpress can also measure the "smoothness" of scrolling and animations. In order to do that, the following set of metrics can be collected by benchpress:
-
-- `frameTime.mean`: mean frame time in ms (target: 16.6ms for 60fps)
-- `frameTime.worst`: worst frame time in ms
-- `frameTime.best`: best frame time in ms
-- `frameTime.smooth`: percentage of frames that hit 60fps
-
-To collect these metrics, you need to execute `console.time('frameCapture')` and `console.timeEnd('frameCapture')` either in your benchmark application or in you benchmark driver via webdriver. The metrics mentioned above will only be collected between those two calls and it is recommended to wrap the time/timeEnd calls as closely as possible around the action you want to evaluate to get accurate measurements.
-
-In addition to that, one extra binding needs to be passed to benchpress in tests that want to collect these metrics:
-
-    benchpress.sample(bindings: [bp.bind(bp.Options.CAPTURE_FRAMES).toValue(true)], ... )
-
-# Best practices
-
-* 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)
-      * 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))
-  - e.g. a calibrated machine that does not run background jobs, has a fixed cpu frequency, ...
-
-* Use relative comparisons
-  - relative comparisons are less likely to change over time and help to interpret the results of benchmarks
-  - e.g. compare an example written using a ui framework against a hand coded example and track the ratio
-
-* Assert post-commit for commit ranges
-  - running benchmarks can take some time. Running them before every commit is usually too slow.
-  - when a regression is detected for a commit range, use bisection to find the problematic commit
-
-* Repeat benchmarks multiple times in a fresh window
-  - run the same benchmark multiple times in a fresh window and then take the minimal average value of each benchmark run
-
-* Use force gc with care
-  - forcing gc can skew the script execution time and gcTime numbers,
-    but might be needed to get stable gc time / gc amount numbers
-
-* Open a new window for every test
-  - browsers (e.g. chrome) might keep JIT statistics over page reloads and optimize pages differently depending on what has been loaded before
-
-# Detailed overview
-
-![Overview](overview.png)
-
-Definitions:
-
-* valid sample: a sample that represents the world that should be measured in a good way.
-* complete sample: sample of all measure values collected so far
-
-Components:
-
-* Runner
-  - contains a default configuration
-  - creates a new injector for every sample call, via which all other components are created
-
-* Sampler
-  - gets data from the metrics
-  - reports measure values immediately to the reporters
-  - loops until the validator is able to extract a valid sample out of the complete sample (see below).
-  - reports the valid sample and the complete sample to the reporters
-
-* Metric
-  - gets measure values from the browser
-  - e.g. reads out performance logs, DOM values, JavaScript values
-
-* Validator
-  - extracts a valid sample out of the complete sample of all measure values.
-  - e.g. wait until there are 10 samples and take them as valid sample (would include warmup time)
-  - e.g. wait until the regression slope for the metric `scriptTime` through the last 10 measure values is >=0, i.e. the values for the `scriptTime` metric are no more decreasing
-
-* Reporter
-  - reports measure values, the valid sample and the complete sample to backends
-  - e.g. a reporter that prints to the console, a reporter that reports values into Google BigQuery, ...
-
-* WebDriverAdapter
-  - abstraction over the used web driver client
-  - one implementation for every webdriver client
-    E.g. one for selenium-webdriver Node.js module, dart async webdriver, dart sync webdriver, ...
-
-* WebDriverExtension
-  - implements additional methods that are standardized in the webdriver protocol using the WebDriverAdapter
-  - provides functionality like force gc, read out performance logs in a normalized format
-  - one implementation per browser, e.g. one for Chrome, one for mobile Safari, one for Firefox
-
-
diff --git a/modules/benchpress/index.dart b/modules/benchpress/index.dart
deleted file mode 100644
index a071c58357f6..000000000000
--- a/modules/benchpress/index.dart
+++ /dev/null
@@ -1,2 +0,0 @@
-library benchpress.index;
-//no dart implementation
diff --git a/modules/benchpress/index.ts b/modules/benchpress/index.ts
deleted file mode 100644
index ed8530f3fc93..000000000000
--- a/modules/benchpress/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-require('reflect-metadata');
-require('traceur/bin/traceur-runtime');
-module.exports = require('./benchpress.js');
-// when bundling benchpress to one file, this is used
-// for getting exports out of browserify's scope.
-global.__benchpressExports = module.exports;
diff --git a/modules/benchpress/package.json b/modules/benchpress/package.json
deleted file mode 100644
index 2c80ee51e2d0..000000000000
--- a/modules/benchpress/package.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "benchpress",
-  "version": "<%= packageJson.version %>",
-  "description": "Benchpress - a framework for e2e performance tests",
-  "homepage": "<%= packageJson.homepage %>",
-  "bugs": "<%= packageJson.bugs %>",
-  "main" : "./index.js",
-  "contributors": <%= JSON.stringify(packageJson.contributors) %>,
-  "license": "<%= packageJson.license %>",
-  "dependencies": {
-    "angular2": "<%= packageJson.version %>",
-    "traceur": "<%= packageJson.dependencies.traceur %>",
-    "selenium-webdriver": "<%= packageJson.dependencies['selenium-webdriver'] %>",
-    "reflect-metadata": "<%= packageJson.dependencies['reflect-metadata'] %>"
-  },
-  "optionalDependencies": {
-    "jpm": "<%= packageJson.devDependencies.jpm %>",
-    "firefox-profile": "<%= packageJson.devDependencies['firefox-profile'] %>"
-  }
-}
diff --git a/modules/benchpress/pubspec.yaml b/modules/benchpress/pubspec.yaml
deleted file mode 100644
index b9fac670783f..000000000000
--- a/modules/benchpress/pubspec.yaml
+++ /dev/null
@@ -1,19 +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-dev.1.10 <2.0.0'
-dependencies:
-  stack_trace: '^1.1.1'
-  angular2: '^<%= packageJson.version %>'
-  webdriver: '^0.9.0'
-dev_dependencies:
-  guinness: '^0.1.17'
-dependency_overrides:
-  angular2:
-    path: ../angular2
diff --git a/modules/benchpress/src/common_options.ts b/modules/benchpress/src/common_options.ts
deleted file mode 100644
index 8ab071b386d6..000000000000
--- a/modules/benchpress/src/common_options.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import {bind, OpaqueToken} from 'angular2/di';
-import {DateWrapper} from 'angular2/src/facade/lang';
-
-export class Options {
-  static get DEFAULT_BINDINGS() { return _DEFAULT_BINDINGS; }
-  // TODO(tbosch): use static initializer when our transpiler supports it
-  static get SAMPLE_ID() { return _SAMPLE_ID; }
-  // TODO(tbosch): use static initializer when our transpiler supports it
-  static get DEFAULT_DESCRIPTION() { return _DEFAULT_DESCRIPTION; }
-  // TODO(tbosch): use static initializer when our transpiler supports it
-  static get SAMPLE_DESCRIPTION() { return _SAMPLE_DESCRIPTION; }
-  // TODO(tbosch): use static initializer when our transpiler supports it
-  static get FORCE_GC() { return _FORCE_GC; }
-  // TODO(tbosch): use static initializer when our transpiler supports it
-  static get PREPARE() { return _PREPARE; }
-  // TODO(tbosch): use static initializer when our transpiler supports it
-  static get EXECUTE() { return _EXECUTE; }
-  // TODO(tbosch): use static initializer when our transpiler supports it
-  static get CAPABILITIES() { return _CAPABILITIES; }
-  // TODO(tbosch): use static initializer when our transpiler supports it
-  static get USER_AGENT() { return _USER_AGENT; }
-  // TODO(tbosch): use static initializer when our transpiler supports it
-  static get NOW() { return _NOW; }
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get WRITE_FILE() { return _WRITE_FILE; }
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get MICRO_METRICS() { return _MICRO_METRICS; }
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get CAPTURE_FRAMES() { return _CAPTURE_FRAMES; }
-}
-
-var _SAMPLE_ID = new OpaqueToken('Options.sampleId');
-var _DEFAULT_DESCRIPTION = new OpaqueToken('Options.defaultDescription');
-var _SAMPLE_DESCRIPTION = new OpaqueToken('Options.sampleDescription');
-var _FORCE_GC = new OpaqueToken('Options.forceGc');
-var _PREPARE = new OpaqueToken('Options.prepare');
-var _EXECUTE = new OpaqueToken('Options.execute');
-var _CAPABILITIES = new OpaqueToken('Options.capabilities');
-var _USER_AGENT = new OpaqueToken('Options.userAgent');
-var _MICRO_METRICS = new OpaqueToken('Options.microMetrics');
-var _NOW = new OpaqueToken('Options.now');
-var _WRITE_FILE = new OpaqueToken('Options.writeFile');
-var _CAPTURE_FRAMES = new OpaqueToken('Options.frameCapture');
-
-var _DEFAULT_BINDINGS = [
-  bind(_DEFAULT_DESCRIPTION)
-      .toValue({}),
-  bind(_SAMPLE_DESCRIPTION).toValue({}),
-  bind(_FORCE_GC).toValue(false),
-  bind(_PREPARE).toValue(false),
-  bind(_MICRO_METRICS).toValue({}),
-  bind(_NOW).toValue(() => DateWrapper.now()),
-  bind(_CAPTURE_FRAMES).toValue(false)
-];
diff --git a/modules/benchpress/src/firefox_extension/data/installed_script.dart b/modules/benchpress/src/firefox_extension/data/installed_script.dart
deleted file mode 100644
index 4a363571216f..000000000000
--- a/modules/benchpress/src/firefox_extension/data/installed_script.dart
+++ /dev/null
@@ -1,2 +0,0 @@
-library benchpress.src.firefox_extension.data.installed_script;
-//no dart implementation
diff --git a/modules/benchpress/src/firefox_extension/data/installed_script.ts b/modules/benchpress/src/firefox_extension/data/installed_script.ts
deleted file mode 100644
index 4a33c2cfd158..000000000000
--- a/modules/benchpress/src/firefox_extension/data/installed_script.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-declare var exportFunction;
-declare var unsafeWindow;
-
-exportFunction(function() {
-  var curTime = unsafeWindow.performance.now();
-  (<any>self).port.emit('startProfiler', curTime);
-}, unsafeWindow, {defineAs: "startProfiler"});
-
-exportFunction(function() { (<any>self).port.emit('stopProfiler'); }, unsafeWindow,
-               {defineAs: "stopProfiler"});
-
-exportFunction(function(cb) {
-  (<any>self).port.once('perfProfile', cb);
-  (<any>self).port.emit('getProfile');
-}, unsafeWindow, {defineAs: "getProfile"});
-
-exportFunction(function() { (<any>self).port.emit('forceGC'); }, unsafeWindow,
-               {defineAs: "forceGC"});
-
-exportFunction(function(name) {
-  var curTime = unsafeWindow.performance.now();
-  (<any>self).port.emit('markStart', name, curTime);
-}, unsafeWindow, {defineAs: "markStart"});
-
-exportFunction(function(name) {
-  var curTime = unsafeWindow.performance.now();
-  (<any>self).port.emit('markEnd', name, curTime);
-}, unsafeWindow, {defineAs: "markEnd"});
diff --git a/modules/benchpress/src/firefox_extension/lib/main.dart b/modules/benchpress/src/firefox_extension/lib/main.dart
deleted file mode 100644
index 81e92e6923cd..000000000000
--- a/modules/benchpress/src/firefox_extension/lib/main.dart
+++ /dev/null
@@ -1,2 +0,0 @@
-library benchpress.src.firefox_extension.lib.main;
-//no dart implementation
diff --git a/modules/benchpress/src/firefox_extension/lib/main.ts b/modules/benchpress/src/firefox_extension/lib/main.ts
deleted file mode 100644
index 0c811cebf4cd..000000000000
--- a/modules/benchpress/src/firefox_extension/lib/main.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/// <reference path="../../../../angular2/typings/node/node.d.ts" />
-
-var {Cc, Ci, Cu} = require('chrome');
-var os = Cc['@mozilla.org/observer-service;1'].getService(Ci.nsIObserverService);
-var ParserUtil = require('./parser_util');
-
-class Profiler {
-  private _profiler;
-  private _markerEvents: List<any>;
-  private _profilerStartTime: number;
-
-  constructor() { this._profiler = Cc['@mozilla.org/tools/profiler;1'].getService(Ci.nsIProfiler); }
-
-  start(entries, interval, features, timeStarted) {
-    this._profiler.StartProfiler(entries, interval, features, features.length);
-    this._profilerStartTime = timeStarted;
-    this._markerEvents = [];
-  }
-
-  stop() { this._profiler.StopProfiler(); }
-
-  getProfilePerfEvents() {
-    var profileData = this._profiler.getProfileData();
-    var perfEvents = ParserUtil.convertPerfProfileToEvents(profileData);
-    perfEvents = this._mergeMarkerEvents(perfEvents);
-    perfEvents.sort(function(event1, event2) { return event1.ts - event2.ts; });  // Sort by ts
-    return perfEvents;
-  }
-
-  _mergeMarkerEvents(perfEvents: List<any>): List<any> {
-    this._markerEvents.forEach(function(markerEvent) { perfEvents.push(markerEvent); });
-    return perfEvents;
-  }
-
-  addStartEvent(name: string, timeStarted: number) {
-    this._markerEvents.push({ph: 'b', ts: timeStarted - this._profilerStartTime, name: name});
-  }
-
-  addEndEvent(name: string, timeEnded: number) {
-    this._markerEvents.push({ph: 'e', ts: timeEnded - this._profilerStartTime, name: name});
-  }
-}
-
-function forceGC() {
-  Cu.forceGC();
-  os.notifyObservers(null, 'child-gc-request', null);
-};
-
-var mod = require('sdk/page-mod');
-var data = require('sdk/self').data;
-var profiler = new Profiler();
-mod.PageMod({
-  include: ['*'],
-  contentScriptFile: data.url('installed_script.js'),
-  onAttach: worker => {
-    worker.port.on('startProfiler',
-                   (timeStarted) => profiler.start(/* = profiler memory */ 1000000, 1,
-                                                   ['leaf', 'js', 'stackwalk', 'gc'], timeStarted));
-    worker.port.on('stopProfiler', () => profiler.stop());
-    worker.port.on('getProfile',
-                   () => worker.port.emit('perfProfile', profiler.getProfilePerfEvents()));
-    worker.port.on('forceGC', forceGC);
-    worker.port.on('markStart', (name, timeStarted) => profiler.addStartEvent(name, timeStarted));
-    worker.port.on('markEnd', (name, timeEnded) => profiler.addEndEvent(name, timeEnded));
-  }
-});
diff --git a/modules/benchpress/src/firefox_extension/lib/parser_util.dart b/modules/benchpress/src/firefox_extension/lib/parser_util.dart
deleted file mode 100644
index 2f4716034502..000000000000
--- a/modules/benchpress/src/firefox_extension/lib/parser_util.dart
+++ /dev/null
@@ -1,2 +0,0 @@
-library benchpress.src.firefox_extension.lib.parser_util;
-//no dart implementation
diff --git a/modules/benchpress/src/firefox_extension/lib/parser_util.ts b/modules/benchpress/src/firefox_extension/lib/parser_util.ts
deleted file mode 100644
index ff7d7d9918e6..000000000000
--- a/modules/benchpress/src/firefox_extension/lib/parser_util.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/// <reference path="../../../../angular2/typings/node/node.d.ts" />
-
-/**
- * @param {Object} perfProfile The perf profile JSON object.
- * @return {Array<Object>} An array of recognized events that are captured
- *     within the perf profile.
- */
-export function convertPerfProfileToEvents(perfProfile: any): List<any> {
-  var inProgressEvents = new Map();  // map from event name to start time
-  var finishedEvents = [];           // Array<Event> finished events
-  var addFinishedEvent = function(eventName, startTime, endTime) {
-    var categorizedEventName = categorizeEvent(eventName);
-    var args = undefined;
-    if (categorizedEventName == 'gc') {
-      // TODO: We cannot measure heap size at the moment
-      args = {usedHeapSize: 0};
-    }
-    if (startTime == endTime) {
-      // Finished instantly
-      finishedEvents.push({ph: 'X', ts: startTime, name: categorizedEventName, args: args});
-    } else {
-      // Has duration
-      finishedEvents.push({ph: 'B', ts: startTime, name: categorizedEventName, args: args});
-      finishedEvents.push({ph: 'E', ts: endTime, name: categorizedEventName, args: args});
-    }
-  };
-
-  var samples = perfProfile.threads[0].samples;
-  // In perf profile, firefox samples all the frames in set time intervals. Here
-  // we go through all the samples and construct the start and end time for each
-  // event.
-  for (var i = 0; i < samples.length; ++i) {
-    var sample = samples[i];
-    var sampleTime = sample.time;
-
-    // Add all the frames into a set so it's easier/faster to find the set
-    // differences
-    var sampleFrames = new Set();
-    sample.frames.forEach(function(frame) { sampleFrames.add(frame.location); });
-
-    // If an event is in the inProgressEvents map, but not in the current sample,
-    // then it must have just finished. We add this event to the finishedEvents
-    // array and remove it from the inProgressEvents map.
-    var previousSampleTime = (i == 0 ? /* not used */ -1 : samples[i - 1].time);
-    inProgressEvents.forEach(function(startTime, eventName) {
-      if (!(sampleFrames.has(eventName))) {
-        addFinishedEvent(eventName, startTime, previousSampleTime);
-        inProgressEvents.delete(eventName);
-      }
-    });
-
-    // If an event is in the current sample, but not in the inProgressEvents map,
-    // then it must have just started. We add this event to the inProgressEvents
-    // map.
-    sampleFrames.forEach(function(eventName) {
-      if (!(inProgressEvents.has(eventName))) {
-        inProgressEvents.set(eventName, sampleTime);
-      }
-    });
-  }
-
-  // If anything is still in progress, we need to included it as a finished event
-  // since recording ended.
-  var lastSampleTime = samples[samples.length - 1].time;
-  inProgressEvents.forEach(function(startTime, eventName) {
-    addFinishedEvent(eventName, startTime, lastSampleTime);
-  });
-
-  // Remove all the unknown categories.
-  return finishedEvents.filter(function(event) { return event.name != 'unknown'; });
-}
-
-// TODO: this is most likely not exhaustive.
-export function categorizeEvent(eventName: string): string {
-  if (eventName.indexOf('PresShell::Paint') > -1) {
-    return 'render';
-  } else if (eventName.indexOf('FirefoxDriver.prototype.executeScript') > -1) {
-    return 'script';
-  } else if (eventName.indexOf('forceGC') > -1) {
-    return 'gc';
-  } else {
-    return 'unknown';
-  }
-}
diff --git a/modules/benchpress/src/firefox_extension/lib/test_helper.dart b/modules/benchpress/src/firefox_extension/lib/test_helper.dart
deleted file mode 100644
index ff6743761043..000000000000
--- a/modules/benchpress/src/firefox_extension/lib/test_helper.dart
+++ /dev/null
@@ -1,2 +0,0 @@
-library benchpress.src.firefox_extension.lib.test_helper;
-//no dart implementation
diff --git a/modules/benchpress/src/firefox_extension/lib/test_helper.ts b/modules/benchpress/src/firefox_extension/lib/test_helper.ts
deleted file mode 100644
index b1bb5ff7e57d..000000000000
--- a/modules/benchpress/src/firefox_extension/lib/test_helper.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-var q = require('q');
-var FirefoxProfile = require('firefox-profile');
-var jpm = require('jpm/lib/xpi');
-var pathUtil = require('path');
-
-var PERF_ADDON_PACKAGE_JSON_DIR = '..';
-
-exports.getAbsolutePath = function(path) {
-  var normalizedPath = pathUtil.normalize(path);
-  if (pathUtil.resolve(normalizedPath) == normalizedPath) {
-    // Already absolute path
-    return normalizedPath;
-  } else {
-    return pathUtil.join(__dirname, normalizedPath);
-  }
-};
-
-exports.getFirefoxProfile = function(extensionPath) {
-  var deferred = q.defer();
-
-  var firefoxProfile = new FirefoxProfile();
-  firefoxProfile.addExtensions([extensionPath], () => {
-    firefoxProfile.encoded(encodedProfile => {
-      var multiCapabilities = [{browserName: 'firefox', firefox_profile: encodedProfile}];
-      deferred.resolve(multiCapabilities);
-    });
-  });
-
-  return deferred.promise;
-};
-
-exports.getFirefoxProfileWithExtension = function() {
-  var absPackageJsonDir = pathUtil.join(__dirname, PERF_ADDON_PACKAGE_JSON_DIR);
-  var packageJson = require(pathUtil.join(absPackageJsonDir, 'package.json'));
-
-  var savedCwd = process.cwd();
-  process.chdir(absPackageJsonDir);
-
-  return jpm(packageJson)
-      .then(xpiPath => {
-        process.chdir(savedCwd);
-        return exports.getFirefoxProfile(xpiPath);
-      });
-};
diff --git a/modules/benchpress/src/measure_values.ts b/modules/benchpress/src/measure_values.ts
deleted file mode 100644
index bdacf455e2c2..000000000000
--- a/modules/benchpress/src/measure_values.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import {Date, DateWrapper} from 'angular2/src/facade/lang';
-import {StringMap, Map} from 'angular2/src/facade/collection';
-
-export class MeasureValues {
-  constructor(public runIndex: number, public timeStamp: Date,
-              public values: StringMap<string, any>) {}
-
-  toJson() {
-    return {
-      'timeStamp': DateWrapper.toJson(this.timeStamp),
-      'runIndex': this.runIndex,
-      'values': this.values
-    };
-  }
-}
diff --git a/modules/benchpress/src/metric.ts b/modules/benchpress/src/metric.ts
deleted file mode 100644
index 6b3c6f38e770..000000000000
--- a/modules/benchpress/src/metric.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {bind} from 'angular2/di';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {ABSTRACT, BaseException} from 'angular2/src/facade/lang';
-import {StringMap} from 'angular2/src/facade/collection';
-
-/**
- * A metric is measures values
- */
-@ABSTRACT()
-export class Metric {
-  static bindTo(delegateToken) {
-    return [bind(Metric).toFactory((delegate) => delegate, [delegateToken])];
-  }
-
-  /**
-   * Starts measuring
-   */
-  beginMeasure(): Promise<any> { throw new BaseException('NYI'); }
-
-  /**
-   * Ends measuring and reports the data
-   * since the begin call.
-   * @param restart: Whether to restart right after this.
-   */
-  endMeasure(restart: boolean): Promise<StringMap<string, any>> { throw new BaseException('NYI'); }
-
-  /**
-   * Describes the metrics provided by this metric implementation.
-   * (e.g. units, ...)
-   */
-  describe(): StringMap<string, any> { throw new BaseException('NYI'); }
-}
diff --git a/modules/benchpress/src/metric/multi_metric.ts b/modules/benchpress/src/metric/multi_metric.ts
deleted file mode 100644
index 5c55330be818..000000000000
--- a/modules/benchpress/src/metric/multi_metric.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {bind, Binding, Injector, OpaqueToken} from 'angular2/di';
-import {List, ListWrapper, StringMapWrapper, StringMap} from 'angular2/src/facade/collection';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-
-import {Metric} from '../metric';
-
-export class MultiMetric extends Metric {
-  static createBindings(childTokens): List<Binding> {
-    return [
-      bind(_CHILDREN)
-          .toFactory(
-              (injector: Injector) => ListWrapper.map(childTokens, (token) => injector.get(token)),
-              [Injector]),
-      bind(MultiMetric).toFactory(children => new MultiMetric(children), [_CHILDREN])
-    ];
-  }
-
-  constructor(private _metrics: List<Metric>) { super(); }
-
-  /**
-   * Starts measuring
-   */
-  beginMeasure(): Promise<any> {
-    return PromiseWrapper.all(ListWrapper.map(this._metrics, (metric) => metric.beginMeasure()));
-  }
-
-  /**
-   * Ends measuring and reports the data
-   * since the begin call.
-   * @param restart: Whether to restart right after this.
-   */
-  endMeasure(restart: boolean): Promise<StringMap<string, any>> {
-    return PromiseWrapper.all(
-                             ListWrapper.map(this._metrics, (metric) => metric.endMeasure(restart)))
-        .then((values) => { return mergeStringMaps(values); });
-  }
-
-  /**
-   * Describes the metrics provided by this metric implementation.
-   * (e.g. units, ...)
-   */
-  describe(): StringMap<string, any> {
-    return mergeStringMaps(this._metrics.map((metric) => metric.describe()));
-  }
-}
-
-function mergeStringMaps(maps): Object {
-  var result = {};
-  ListWrapper.forEach(maps, (map) => {
-    StringMapWrapper.forEach(map, (value, prop) => { result[prop] = value; });
-  });
-  return result;
-}
-
-var _CHILDREN = new OpaqueToken('MultiMetric.children');
\ No newline at end of file
diff --git a/modules/benchpress/src/metric/perflog_metric.ts b/modules/benchpress/src/metric/perflog_metric.ts
deleted file mode 100644
index 038e4a9590d3..000000000000
--- a/modules/benchpress/src/metric/perflog_metric.ts
+++ /dev/null
@@ -1,347 +0,0 @@
-import {PromiseWrapper, Promise, TimerWrapper} from 'angular2/src/facade/async';
-import {
-  isPresent,
-  isBlank,
-  BaseException,
-  StringWrapper,
-  Math,
-  RegExpWrapper,
-  NumberWrapper
-} from 'angular2/src/facade/lang';
-import {ListWrapper, StringMap, StringMapWrapper} from 'angular2/src/facade/collection';
-import {bind, Binding, OpaqueToken} from 'angular2/di';
-
-import {WebDriverExtension, PerfLogFeatures} from '../web_driver_extension';
-import {Metric} from '../metric';
-import {Options} from '../common_options';
-
-/**
- * A metric that reads out the performance log
- */
-export class PerflogMetric extends Metric {
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get BINDINGS(): List<Binding> { return _BINDINGS; }
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get SET_TIMEOUT(): OpaqueToken { return _SET_TIMEOUT; }
-
-  private _remainingEvents: List<StringMap<string, any>>;
-  private _measureCount: int;
-  _perfLogFeatures: PerfLogFeatures;
-
-
-  /**
-   * @param driverExtension
-   * @param setTimeout
-   * @param microMetrics Name and description of metrics provided via console.time / console.timeEnd
-   **/
-  constructor(private _driverExtension: WebDriverExtension, private _setTimeout: Function,
-              private _microMetrics: StringMap<string, any>, private _forceGc: boolean,
-              private _captureFrames: boolean) {
-    super();
-
-    this._remainingEvents = [];
-    this._measureCount = 0;
-    this._perfLogFeatures = _driverExtension.perfLogFeatures();
-  }
-
-  describe(): StringMap<string, any> {
-    var res = {
-      'scriptTime': 'script execution time in ms, including gc and render',
-      'pureScriptTime': 'script execution time in ms, without gc nor render'
-    };
-    if (this._perfLogFeatures.render) {
-      res['renderTime'] = 'render time in ms';
-    }
-    if (this._perfLogFeatures.gc) {
-      res['gcTime'] = 'gc time in ms';
-      res['gcAmount'] = 'gc amount in kbytes';
-      res['majorGcTime'] = 'time of major gcs in ms';
-      if (this._forceGc) {
-        res['forcedGcTime'] = 'forced gc time in ms';
-        res['forcedGcAmount'] = 'forced gc amount in kbytes';
-      }
-    }
-    if (this._captureFrames) {
-      if (!this._perfLogFeatures.frameCapture) {
-        var warningMsg = 'WARNING: Metric requested, but not supported by driver';
-        // using dot syntax for metric name to keep them grouped together in console reporter
-        res['frameTime.mean'] = warningMsg;
-        res['frameTime.worst'] = warningMsg;
-        res['frameTime.best'] = warningMsg;
-        res['frameTime.smooth'] = warningMsg;
-      } else {
-        res['frameTime.mean'] = 'mean frame time in ms (target: 16.6ms for 60fps)';
-        res['frameTime.worst'] = 'worst frame time in ms';
-        res['frameTime.best'] = 'best frame time in ms';
-        res['frameTime.smooth'] = 'percentage of frames that hit 60fps';
-      }
-    }
-    StringMapWrapper.forEach(this._microMetrics,
-                             (desc, name) => { StringMapWrapper.set(res, name, desc); });
-    return res;
-  }
-
-  beginMeasure(): Promise<any> {
-    var resultPromise = PromiseWrapper.resolve(null);
-    if (this._forceGc) {
-      resultPromise = resultPromise.then((_) => this._driverExtension.gc());
-    }
-    return resultPromise.then((_) => this._beginMeasure());
-  }
-
-  endMeasure(restart: boolean): Promise<StringMap<string, any>> {
-    if (this._forceGc) {
-      return this._endPlainMeasureAndMeasureForceGc(restart);
-    } else {
-      return this._endMeasure(restart);
-    }
-  }
-
-  _endPlainMeasureAndMeasureForceGc(restartMeasure: boolean) {
-    return this._endMeasure(true).then((measureValues) => {
-      // disable frame capture for measurments during forced gc
-      var originalFrameCaptureValue = this._captureFrames;
-      this._captureFrames = false;
-      return this._driverExtension.gc()
-          .then((_) => this._endMeasure(restartMeasure))
-          .then((forceGcMeasureValues) => {
-            this._captureFrames = originalFrameCaptureValue;
-            StringMapWrapper.set(measureValues, 'forcedGcTime', forceGcMeasureValues['gcTime']);
-            StringMapWrapper.set(measureValues, 'forcedGcAmount', forceGcMeasureValues['gcAmount']);
-            return measureValues;
-          });
-    });
-  }
-
-  _beginMeasure(): Promise<any> {
-    return this._driverExtension.timeBegin(this._markName(this._measureCount++));
-  }
-
-  _endMeasure(restart: boolean): Promise<StringMap<string, any>> {
-    var markName = this._markName(this._measureCount - 1);
-    var nextMarkName = restart ? this._markName(this._measureCount++) : null;
-    return this._driverExtension.timeEnd(markName, nextMarkName)
-        .then((_) => this._readUntilEndMark(markName));
-  }
-
-  _readUntilEndMark(markName: string, loopCount: int = 0, startEvent = null) {
-    if (loopCount > _MAX_RETRY_COUNT) {
-      throw new BaseException(`Tried too often to get the ending mark: ${loopCount}`);
-    }
-    return this._driverExtension.readPerfLog().then((events) => {
-      this._addEvents(events);
-      var result = this._aggregateEvents(this._remainingEvents, markName);
-      if (isPresent(result)) {
-        this._remainingEvents = events;
-        return result;
-      }
-      var completer = PromiseWrapper.completer();
-      this._setTimeout(() => completer.resolve(this._readUntilEndMark(markName, loopCount + 1)),
-                       100);
-      return completer.promise;
-    });
-  }
-
-  _addEvents(events) {
-    var needSort = false;
-    ListWrapper.forEach(events, (event) => {
-      if (StringWrapper.equals(event['ph'], 'X')) {
-        needSort = true;
-        var startEvent = {};
-        var endEvent = {};
-        StringMapWrapper.forEach(event, (value, prop) => {
-          startEvent[prop] = value;
-          endEvent[prop] = value;
-        });
-        startEvent['ph'] = 'B';
-        endEvent['ph'] = 'E';
-        endEvent['ts'] = startEvent['ts'] + startEvent['dur'];
-        this._remainingEvents.push(startEvent);
-        this._remainingEvents.push(endEvent);
-      } else {
-        this._remainingEvents.push(event);
-      }
-    });
-    if (needSort) {
-      // Need to sort because of the ph==='X' events
-      ListWrapper.sort(this._remainingEvents, (a, b) => {
-        var diff = a['ts'] - b['ts'];
-        return diff > 0 ? 1 : diff < 0 ? -1 : 0;
-      });
-    }
-  }
-
-  _aggregateEvents(events: List<StringMap<string, any>>, markName): StringMap<string, any> {
-    var result = {'scriptTime': 0, 'pureScriptTime': 0};
-    if (this._perfLogFeatures.gc) {
-      result['gcTime'] = 0;
-      result['majorGcTime'] = 0;
-      result['gcAmount'] = 0;
-    }
-    if (this._perfLogFeatures.render) {
-      result['renderTime'] = 0;
-    }
-    if (this._captureFrames) {
-      result['frameTime.mean'] = 0;
-      result['frameTime.best'] = 0;
-      result['frameTime.worst'] = 0;
-      result['frameTime.smooth'] = 0;
-    }
-    StringMapWrapper.forEach(this._microMetrics, (desc, name) => { result[name] = 0; });
-
-    var markStartEvent = null;
-    var markEndEvent = null;
-    var gcTimeInScript = 0;
-    var renderTimeInScript = 0;
-
-    var frameTimestamps = [];
-    var frameTimes = [];
-    var frameCaptureStartEvent = null;
-    var frameCaptureEndEvent = null;
-
-    var intervalStarts: StringMap<string, any> = {};
-    var intervalStartCount: StringMap<string, number> = {};
-    events.forEach((event) => {
-      var ph = event['ph'];
-      var name = event['name'];
-      var microIterations = 1;
-      var microIterationsMatch = RegExpWrapper.firstMatch(_MICRO_ITERATIONS_REGEX, name);
-      if (isPresent(microIterationsMatch)) {
-        name = microIterationsMatch[1];
-        microIterations = NumberWrapper.parseInt(microIterationsMatch[2], 10);
-      }
-
-      if (StringWrapper.equals(ph, 'b') && StringWrapper.equals(name, markName)) {
-        markStartEvent = event;
-      } else if (StringWrapper.equals(ph, 'e') && StringWrapper.equals(name, markName)) {
-        markEndEvent = event;
-      }
-
-      if (isPresent(markStartEvent) && isBlank(markEndEvent) &&
-          event['pid'] === markStartEvent['pid']) {
-        if (StringWrapper.equals(ph, 'b') && StringWrapper.equals(name, _MARK_NAME_FRAME_CAPUTRE)) {
-          if (isPresent(frameCaptureStartEvent)) {
-            throw new BaseException('can capture frames only once per benchmark run');
-          }
-          if (!this._captureFrames) {
-            throw new BaseException(
-                'found start event for frame capture, but frame capture was not requested in benchpress')
-          }
-          frameCaptureStartEvent = event;
-        } else if (StringWrapper.equals(ph, 'e') &&
-                   StringWrapper.equals(name, _MARK_NAME_FRAME_CAPUTRE)) {
-          if (isBlank(frameCaptureStartEvent)) {
-            throw new BaseException('missing start event for frame capture');
-          }
-          frameCaptureEndEvent = event;
-        }
-
-        if (StringWrapper.equals(ph, 'I') || StringWrapper.equals(ph, 'i')) {
-          if (isPresent(frameCaptureStartEvent) && isBlank(frameCaptureEndEvent) &&
-              StringWrapper.equals(name, 'frame')) {
-            frameTimestamps.push(event['ts']);
-            if (frameTimestamps.length >= 2) {
-              frameTimes.push(frameTimestamps[frameTimestamps.length - 1] -
-                              frameTimestamps[frameTimestamps.length - 2]);
-            }
-          }
-        }
-
-        if (StringWrapper.equals(ph, 'B') || StringWrapper.equals(ph, 'b')) {
-          if (isBlank(intervalStarts[name])) {
-            intervalStartCount[name] = 1;
-            intervalStarts[name] = event;
-          } else {
-            intervalStartCount[name]++;
-          }
-        } else if ((StringWrapper.equals(ph, 'E') || StringWrapper.equals(ph, 'e')) &&
-                   isPresent(intervalStarts[name])) {
-          intervalStartCount[name]--;
-          if (intervalStartCount[name] === 0) {
-            var startEvent = intervalStarts[name];
-            var duration = (event['ts'] - startEvent['ts']);
-            intervalStarts[name] = null;
-            if (StringWrapper.equals(name, 'gc')) {
-              result['gcTime'] += duration;
-              var amount =
-                  (startEvent['args']['usedHeapSize'] - event['args']['usedHeapSize']) / 1000;
-              result['gcAmount'] += amount;
-              var majorGc = event['args']['majorGc'];
-              if (isPresent(majorGc) && majorGc) {
-                result['majorGcTime'] += duration;
-              }
-              if (isPresent(intervalStarts['script'])) {
-                gcTimeInScript += duration;
-              }
-            } else if (StringWrapper.equals(name, 'render')) {
-              result['renderTime'] += duration;
-              if (isPresent(intervalStarts['script'])) {
-                renderTimeInScript += duration;
-              }
-            } else if (StringWrapper.equals(name, 'script')) {
-              result['scriptTime'] += duration;
-            } else if (isPresent(this._microMetrics[name])) {
-              result[name] += duration / microIterations;
-            }
-          }
-        }
-      }
-    });
-    if (!isPresent(markStartEvent) || !isPresent(markEndEvent)) {
-      // not all events have been received, no further processing for now
-      return null;
-    }
-
-    if (isPresent(markEndEvent) && isPresent(frameCaptureStartEvent) &&
-        isBlank(frameCaptureEndEvent)) {
-      throw new BaseException('missing end event for frame capture');
-    }
-    if (this._captureFrames && isBlank(frameCaptureStartEvent)) {
-      throw new BaseException(
-          'frame capture requested in benchpress, but no start event was found');
-    }
-    if (frameTimes.length > 0) {
-      this._addFrameMetrics(result, frameTimes);
-    }
-    result['pureScriptTime'] = result['scriptTime'] - gcTimeInScript - renderTimeInScript;
-    return result;
-  }
-
-  _addFrameMetrics(result: StringMap<string, any>, frameTimes: any[]) {
-    result['frameTime.mean'] =
-        ListWrapper.reduce(frameTimes, (a, b) => a + b, 0) / frameTimes.length;
-    var firstFrame = ListWrapper.get(frameTimes, 0);
-    result['frameTime.worst'] = ListWrapper.reduce(frameTimes, (a, b) => a > b ? a : b, firstFrame);
-    result['frameTime.best'] = ListWrapper.reduce(frameTimes, (a, b) => a < b ? a : b, firstFrame);
-    result['frameTime.smooth'] =
-        ListWrapper.filter(frameTimes, (a) => a < _FRAME_TIME_SMOOTH_THRESHOLD).length /
-        frameTimes.length;
-  }
-
-  _markName(index) { return `${_MARK_NAME_PREFIX}${index}`; }
-}
-
-var _MICRO_ITERATIONS_REGEX = RegExpWrapper.create('(.+)\\*(\\d+)$');
-
-var _MAX_RETRY_COUNT = 20;
-var _MARK_NAME_PREFIX = 'benchpress';
-var _SET_TIMEOUT = new OpaqueToken('PerflogMetric.setTimeout');
-
-var _MARK_NAME_FRAME_CAPUTRE = 'frameCapture';
-// using 17ms as a somewhat looser threshold, instead of 16.6666ms
-var _FRAME_TIME_SMOOTH_THRESHOLD = 17;
-
-var _BINDINGS = [
-  bind(PerflogMetric)
-      .toFactory(
-          (driverExtension, setTimeout, microMetrics, forceGc, captureFrames) =>
-              new PerflogMetric(driverExtension, setTimeout, microMetrics, forceGc, captureFrames),
-          [
-            WebDriverExtension,
-            _SET_TIMEOUT,
-            Options.MICRO_METRICS,
-            Options.FORCE_GC,
-            Options.CAPTURE_FRAMES
-          ]),
-  bind(_SET_TIMEOUT).toValue((fn, millis) => TimerWrapper.setTimeout(fn, millis))
-];
diff --git a/modules/benchpress/src/reporter.ts b/modules/benchpress/src/reporter.ts
deleted file mode 100644
index ccd31ebdcf9d..000000000000
--- a/modules/benchpress/src/reporter.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {bind} from 'angular2/di';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {ABSTRACT, BaseException} from 'angular2/src/facade/lang';
-import {MeasureValues} from './measure_values';
-import {List} from 'angular2/src/facade/collection';
-
-/**
- * A reporter reports measure values and the valid sample.
- */
-@ABSTRACT()
-export class Reporter {
-  static bindTo(delegateToken) {
-    return [bind(Reporter).toFactory((delegate) => delegate, [delegateToken])];
-  }
-
-  reportMeasureValues(values: MeasureValues): Promise<any> { throw new BaseException('NYI'); }
-
-  reportSample(completeSample: List<MeasureValues>,
-               validSample: List<MeasureValues>): Promise<any> {
-    throw new BaseException('NYI');
-  }
-}
diff --git a/modules/benchpress/src/reporter/console_reporter.ts b/modules/benchpress/src/reporter/console_reporter.ts
deleted file mode 100644
index 4e85589927ac..000000000000
--- a/modules/benchpress/src/reporter/console_reporter.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import {print, isPresent, isBlank, NumberWrapper} from 'angular2/src/facade/lang';
-import {StringMapWrapper, ListWrapper, List} from 'angular2/src/facade/collection';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {Math} from 'angular2/src/facade/math';
-import {bind, Binding, OpaqueToken} from 'angular2/di';
-
-import {Statistic} from '../statistic';
-import {Reporter} from '../reporter';
-import {SampleDescription} from '../sample_description';
-import {MeasureValues} from '../measure_values';
-
-/**
- * A reporter for the console
- */
-export class ConsoleReporter extends Reporter {
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get PRINT(): OpaqueToken { return _PRINT; }
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get COLUMN_WIDTH(): OpaqueToken { return _COLUMN_WIDTH; }
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get BINDINGS(): List<Binding> { return _BINDINGS; }
-
-
-  static _lpad(value, columnWidth, fill = ' ') {
-    var result = '';
-    for (var i = 0; i < columnWidth - value.length; i++) {
-      result += fill;
-    }
-    return result + value;
-  }
-
-  static _formatNum(n) { return NumberWrapper.toFixed(n, 2); }
-
-  static _sortedProps(obj) {
-    var props = [];
-    StringMapWrapper.forEach(obj, (value, prop) => props.push(prop));
-    props.sort();
-    return props;
-  }
-
-  private _metricNames: List<string>;
-
-  constructor(private _columnWidth: number, sampleDescription, private _print: Function) {
-    super();
-    this._metricNames = ConsoleReporter._sortedProps(sampleDescription.metrics);
-    this._printDescription(sampleDescription);
-  }
-
-  _printDescription(sampleDescription) {
-    this._print(`BENCHMARK ${sampleDescription.id}`);
-    this._print('Description:');
-    var props = ConsoleReporter._sortedProps(sampleDescription.description);
-    props.forEach((prop) => { this._print(`- ${prop}: ${sampleDescription.description[prop]}`); });
-    this._print('Metrics:');
-    this._metricNames.forEach((metricName) => {
-      this._print(`- ${metricName}: ${sampleDescription.metrics[metricName]}`);
-    });
-    this._print('');
-    this._printStringRow(this._metricNames);
-    this._printStringRow(this._metricNames.map((_) => ''), '-');
-  }
-
-  reportMeasureValues(measureValues: MeasureValues): Promise<any> {
-    var formattedValues = ListWrapper.map(this._metricNames, (metricName) => {
-      var value = measureValues.values[metricName];
-      return ConsoleReporter._formatNum(value);
-    });
-    this._printStringRow(formattedValues);
-    return PromiseWrapper.resolve(null);
-  }
-
-  reportSample(completeSample: List<MeasureValues>,
-               validSample: List<MeasureValues>): Promise<any> {
-    this._printStringRow(this._metricNames.map((_) => ''), '=');
-    this._printStringRow(ListWrapper.map(this._metricNames, (metricName) => {
-      var sample =
-          ListWrapper.map(validSample, (measureValues) => measureValues.values[metricName]);
-      var mean = Statistic.calculateMean(sample);
-      var cv = Statistic.calculateCoefficientOfVariation(sample, mean);
-      var formattedMean = ConsoleReporter._formatNum(mean)
-                              // Note: Don't use the unicode character for +- as it might cause
-                              // hickups for consoles...
-                              return NumberWrapper.isNaN(cv) ?
-                              formattedMean :
-                              `${formattedMean}+-${Math.floor(cv)}%`;
-    }));
-    return PromiseWrapper.resolve(null);
-  }
-
-  _printStringRow(parts, fill = ' ') {
-    this._print(ListWrapper.map(parts, (part) => {
-                             var w = this._columnWidth;
-                             return ConsoleReporter._lpad(part, w, fill);
-                           }).join(' | '));
-  }
-}
-
-var _PRINT = new OpaqueToken('ConsoleReporter.print');
-var _COLUMN_WIDTH = new OpaqueToken('ConsoleReporter.columnWidth');
-var _BINDINGS = [
-  bind(ConsoleReporter)
-      .toFactory((columnWidth, sampleDescription, print) =>
-                     new ConsoleReporter(columnWidth, sampleDescription, print),
-                 [_COLUMN_WIDTH, SampleDescription, _PRINT]),
-  bind(_COLUMN_WIDTH).toValue(18),
-  bind(_PRINT).toValue(print)
-];
diff --git a/modules/benchpress/src/reporter/json_file_reporter.ts b/modules/benchpress/src/reporter/json_file_reporter.ts
deleted file mode 100644
index ae704c1b9012..000000000000
--- a/modules/benchpress/src/reporter/json_file_reporter.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {DateWrapper, isPresent, isBlank, Json} from 'angular2/src/facade/lang';
-import {List} from 'angular2/src/facade/collection';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-
-import {bind, Binding, OpaqueToken} from 'angular2/di';
-
-import {Reporter} from '../reporter';
-import {SampleDescription} from '../sample_description';
-import {MeasureValues} from '../measure_values';
-import {Options} from '../common_options';
-
-/**
- * A reporter that writes results into a json file.
- */
-export class JsonFileReporter extends Reporter {
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get PATH(): OpaqueToken { return _PATH; }
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get BINDINGS(): List<Binding> { return _BINDINGS; }
-
-  _writeFile: Function;
-  _path: string;
-  _description: SampleDescription;
-  _now: Function;
-
-  constructor(sampleDescription, path, writeFile, now) {
-    super();
-    this._description = sampleDescription;
-    this._path = path;
-    this._writeFile = writeFile;
-    this._now = now;
-  }
-
-  reportMeasureValues(measureValues: MeasureValues): Promise<any> {
-    return PromiseWrapper.resolve(null);
-  }
-
-  reportSample(completeSample: List<MeasureValues>,
-               validSample: List<MeasureValues>): Promise<any> {
-    var content = Json.stringify({
-      'description': this._description,
-      'completeSample': completeSample,
-      'validSample': validSample
-    });
-    var filePath =
-        `${this._path}/${this._description.id}_${DateWrapper.toMillis(this._now())}.json`;
-    return this._writeFile(filePath, content);
-  }
-}
-
-var _PATH = new OpaqueToken('JsonFileReporter.path');
-var _BINDINGS = [
-  bind(JsonFileReporter)
-      .toFactory((sampleDescription, path, writeFile, now) =>
-                     new JsonFileReporter(sampleDescription, path, writeFile, now),
-                 [SampleDescription, _PATH, Options.WRITE_FILE, Options.NOW]),
-  bind(_PATH).toValue('.')
-];
diff --git a/modules/benchpress/src/reporter/multi_reporter.ts b/modules/benchpress/src/reporter/multi_reporter.ts
deleted file mode 100644
index 9f2583e66cdf..000000000000
--- a/modules/benchpress/src/reporter/multi_reporter.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import {bind, Binding, Injector, OpaqueToken} from 'angular2/di';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-
-import {MeasureValues} from '../measure_values';
-import {Reporter} from '../reporter';
-
-export class MultiReporter extends Reporter {
-  static createBindings(childTokens: List<any>): List<Binding> {
-    return [
-      bind(_CHILDREN)
-          .toFactory(
-              (injector: Injector) => ListWrapper.map(childTokens, (token) => injector.get(token)),
-              [Injector]),
-      bind(MultiReporter).toFactory(children => new MultiReporter(children), [_CHILDREN])
-    ];
-  }
-
-  _reporters: List<Reporter>;
-
-  constructor(reporters) {
-    super();
-    this._reporters = reporters;
-  }
-
-  reportMeasureValues(values: MeasureValues): Promise<List<any>> {
-    return PromiseWrapper.all(
-        ListWrapper.map(this._reporters, (reporter) => reporter.reportMeasureValues(values)));
-  }
-
-  reportSample(completeSample: List<MeasureValues>,
-               validSample: List<MeasureValues>): Promise<List<any>> {
-    return PromiseWrapper.all(ListWrapper.map(
-        this._reporters, (reporter) => reporter.reportSample(completeSample, validSample)));
-  }
-}
-
-var _CHILDREN = new OpaqueToken('MultiReporter.children');
diff --git a/modules/benchpress/src/runner.ts b/modules/benchpress/src/runner.ts
deleted file mode 100644
index fb4b537d7331..000000000000
--- a/modules/benchpress/src/runner.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import {Injector, bind, Binding} from 'angular2/di';
-import {isPresent, isBlank} from 'angular2/src/facade/lang';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-
-import {Sampler, SampleState} from './sampler';
-import {ConsoleReporter} from './reporter/console_reporter';
-import {MultiReporter} from './reporter/multi_reporter';
-import {RegressionSlopeValidator} from './validator/regression_slope_validator';
-import {SizeValidator} from './validator/size_validator';
-import {Validator} from './validator';
-import {PerflogMetric} from './metric/perflog_metric';
-import {MultiMetric} from './metric/multi_metric';
-import {ChromeDriverExtension} from './webdriver/chrome_driver_extension';
-import {FirefoxDriverExtension} from './webdriver/firefox_driver_extension';
-import {IOsDriverExtension} from './webdriver/ios_driver_extension';
-import {WebDriverExtension} from './web_driver_extension';
-import {SampleDescription} from './sample_description';
-import {WebDriverAdapter} from './web_driver_adapter';
-import {Reporter} from './reporter';
-import {Metric} from './metric';
-import {Options} from './common_options';
-
-/**
- * The Runner is the main entry point for executing a sample run.
- * It provides defaults, creates the injector and calls the sampler.
- */
-export class Runner {
-  private _defaultBindings: List<Binding>;
-  constructor(defaultBindings: List<Binding> = null) {
-    if (isBlank(defaultBindings)) {
-      defaultBindings = [];
-    }
-    this._defaultBindings = defaultBindings;
-  }
-
-  sample({id, execute, prepare, microMetrics, bindings}): Promise<SampleState> {
-    var sampleBindings = [
-      _DEFAULT_BINDINGS,
-      this._defaultBindings,
-      bind(Options.SAMPLE_ID).toValue(id),
-      bind(Options.EXECUTE).toValue(execute)
-    ];
-    if (isPresent(prepare)) {
-      sampleBindings.push(bind(Options.PREPARE).toValue(prepare));
-    }
-    if (isPresent(microMetrics)) {
-      sampleBindings.push(bind(Options.MICRO_METRICS).toValue(microMetrics));
-    }
-    if (isPresent(bindings)) {
-      sampleBindings.push(bindings);
-    }
-
-    var inj = Injector.resolveAndCreate(sampleBindings);
-    var adapter = inj.get(WebDriverAdapter);
-
-    return PromiseWrapper
-        .all([adapter.capabilities(), adapter.executeScript('return window.navigator.userAgent;')])
-        .then((args) => {
-          var capabilities = args[0];
-          var userAgent = args[1];
-
-          // This might still create instances twice. We are creating a new injector with all the
-          // bindings.
-          // Only WebDriverAdapter is reused.
-          // TODO vsavkin consider changing it when toAsyncFactory is added back or when child
-          // injectors are handled better.
-          var injector = Injector.resolveAndCreate([
-            sampleBindings,
-            bind(Options.CAPABILITIES).toValue(capabilities),
-            bind(Options.USER_AGENT).toValue(userAgent),
-            bind(WebDriverAdapter).toValue(adapter)
-          ]);
-
-          var sampler = injector.get(Sampler);
-          return sampler.sample();
-        });
-  }
-}
-
-var _DEFAULT_BINDINGS = [
-  Options.DEFAULT_BINDINGS,
-  Sampler.BINDINGS,
-  ConsoleReporter.BINDINGS,
-  RegressionSlopeValidator.BINDINGS,
-  SizeValidator.BINDINGS,
-  ChromeDriverExtension.BINDINGS,
-  FirefoxDriverExtension.BINDINGS,
-  IOsDriverExtension.BINDINGS,
-  PerflogMetric.BINDINGS,
-  SampleDescription.BINDINGS,
-  MultiReporter.createBindings([ConsoleReporter]),
-  MultiMetric.createBindings([PerflogMetric]),
-
-  Reporter.bindTo(MultiReporter),
-  Validator.bindTo(RegressionSlopeValidator),
-  WebDriverExtension.bindTo([ChromeDriverExtension, FirefoxDriverExtension, IOsDriverExtension]),
-  Metric.bindTo(MultiMetric),
-];
diff --git a/modules/benchpress/src/sample_description.ts b/modules/benchpress/src/sample_description.ts
deleted file mode 100644
index dc0824877fd1..000000000000
--- a/modules/benchpress/src/sample_description.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import {StringMapWrapper, ListWrapper, List, StringMap} from 'angular2/src/facade/collection';
-import {bind, Binding, OpaqueToken} from 'angular2/di';
-import {Validator} from './validator';
-import {Metric} from './metric';
-import {Options} from './common_options';
-
-/**
- * SampleDescription merges all available descriptions about a sample
- */
-export class SampleDescription {
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get BINDINGS(): List<Binding> { return _BINDINGS; }
-  description: StringMap<string, any>;
-
-  constructor(public id: string, descriptions: List<StringMap<string, any>>,
-              public metrics: StringMap<string, any>) {
-    this.description = {};
-    ListWrapper.forEach(descriptions, (description) => {
-      StringMapWrapper.forEach(description, (value, prop) => this.description[prop] = value);
-    });
-  }
-
-  toJson() { return {'id': this.id, 'description': this.description, 'metrics': this.metrics}; }
-}
-
-var _BINDINGS = [
-  bind(SampleDescription)
-      .toFactory((metric, id, forceGc, userAgent, validator, defaultDesc, userDesc) =>
-                     new SampleDescription(id,
-                                           [
-                                             {'forceGc': forceGc, 'userAgent': userAgent},
-                                             validator.describe(),
-                                             defaultDesc,
-                                             userDesc
-                                           ],
-                                           metric.describe()),
-                 [
-                   Metric,
-                   Options.SAMPLE_ID,
-                   Options.FORCE_GC,
-                   Options.USER_AGENT,
-                   Validator,
-                   Options.DEFAULT_DESCRIPTION,
-                   Options.SAMPLE_DESCRIPTION
-                 ])
-];
diff --git a/modules/benchpress/src/sampler.ts b/modules/benchpress/src/sampler.ts
deleted file mode 100644
index 783fe85d5423..000000000000
--- a/modules/benchpress/src/sampler.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import {isPresent, isBlank, Date, DateWrapper} from 'angular2/src/facade/lang';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {StringMapWrapper, StringMap, List, ListWrapper} from 'angular2/src/facade/collection';
-import {bind, Binding, OpaqueToken} from 'angular2/di';
-
-import {Metric} from './metric';
-import {Validator} from './validator';
-import {Reporter} from './reporter';
-import {WebDriverAdapter} from './web_driver_adapter';
-
-import {Options} from './common_options';
-import {MeasureValues} from './measure_values';
-
-/**
- * The Sampler owns the sample loop:
- * 1. calls the prepare/execute callbacks,
- * 2. gets data from the metric
- * 3. asks the validator for a valid sample
- * 4. reports the new data to the reporter
- * 5. loop until there is a valid sample
- */
-export class Sampler {
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get BINDINGS(): List<Binding> { return _BINDINGS; }
-
-  _driver: WebDriverAdapter;
-  _metric: Metric;
-  _reporter: Reporter;
-  _validator: Validator;
-  _prepare: Function;
-  _execute: Function;
-  _now: Function;
-
-  constructor({driver, metric, reporter, validator, prepare, execute, now}: {
-    driver?: WebDriverAdapter,
-    metric?: Metric,
-    reporter?: Reporter,
-    validator?: Validator,
-    prepare?: Function,
-    execute?: Function,
-    now?: Function
-  } = {}) {
-    this._driver = driver;
-    this._metric = metric;
-    this._reporter = reporter;
-    this._validator = validator;
-    this._prepare = prepare;
-    this._execute = execute;
-    this._now = now;
-  }
-
-  sample(): Promise<SampleState> {
-    var loop;
-    loop = (lastState) => {
-      return this._iterate(lastState).then((newState) => {
-        if (isPresent(newState.validSample)) {
-          return newState;
-        } else {
-          return loop(newState);
-        }
-      });
-    };
-    return loop(new SampleState([], null));
-  }
-
-  _iterate(lastState) {
-    var resultPromise;
-    if (isPresent(this._prepare)) {
-      resultPromise = this._driver.waitFor(this._prepare);
-    } else {
-      resultPromise = PromiseWrapper.resolve(null);
-    }
-    if (isPresent(this._prepare) || lastState.completeSample.length === 0) {
-      resultPromise = resultPromise.then((_) => this._metric.beginMeasure());
-    }
-    return resultPromise.then((_) => this._driver.waitFor(this._execute))
-        .then((_) => this._metric.endMeasure(isBlank(this._prepare)))
-        .then((measureValues) => this._report(lastState, measureValues));
-  }
-
-  _report(state: SampleState, metricValues: StringMap<string, any>): Promise<SampleState> {
-    var measureValues = new MeasureValues(state.completeSample.length, this._now(), metricValues);
-    var completeSample = ListWrapper.concat(state.completeSample, [measureValues]);
-    var validSample = this._validator.validate(completeSample);
-    var resultPromise = this._reporter.reportMeasureValues(measureValues);
-    if (isPresent(validSample)) {
-      resultPromise =
-          resultPromise.then((_) => this._reporter.reportSample(completeSample, validSample))
-    }
-    return resultPromise.then((_) => new SampleState(completeSample, validSample));
-  }
-}
-
-export class SampleState {
-  constructor(public completeSample: List<any>, public validSample: List<any>) {}
-}
-
-var _BINDINGS = [
-  bind(Sampler)
-      .toFactory((driver, metric, reporter, validator, prepare, execute, now) => new Sampler({
-                   driver: driver,
-                   reporter: reporter,
-                   validator: validator,
-                   metric: metric,
-                   // TODO(tbosch): DI right now does not support null/undefined objects
-                   // Mostly because the cache would have to be initialized with a
-                   // special null object, which is expensive.
-                   prepare: prepare !== false ? prepare : null,
-                   execute: execute,
-                   now: now
-                 }),
-                 [
-                   WebDriverAdapter,
-                   Metric,
-                   Reporter,
-                   Validator,
-                   Options.PREPARE,
-                   Options.EXECUTE,
-                   Options.NOW
-                 ])
-];
diff --git a/modules/benchpress/src/statistic.ts b/modules/benchpress/src/statistic.ts
deleted file mode 100644
index 8fcb86930f60..000000000000
--- a/modules/benchpress/src/statistic.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {Math} from 'angular2/src/facade/math';
-import {ListWrapper, List} from 'angular2/src/facade/collection';
-
-export class Statistic {
-  static calculateCoefficientOfVariation(sample, mean) {
-    return Statistic.calculateStandardDeviation(sample, mean) / mean * 100;
-  }
-
-  static calculateMean(sample) {
-    var total = 0;
-    ListWrapper.forEach(sample, (x) => {total += x});
-    return total / sample.length;
-  }
-
-  static calculateStandardDeviation(sample, mean) {
-    var deviation = 0;
-    ListWrapper.forEach(sample, (x) => { deviation += Math.pow(x - mean, 2); });
-    deviation = deviation / (sample.length);
-    deviation = Math.sqrt(deviation);
-    return deviation;
-  }
-
-  static calculateRegressionSlope(xValues: List<number>, xMean: number, yValues: List<number>,
-                                  yMean: number) {
-    // See http://en.wikipedia.org/wiki/Simple_linear_regression
-    var dividendSum = 0;
-    var divisorSum = 0;
-    for (var i = 0; i < xValues.length; i++) {
-      dividendSum += (xValues[i] - xMean) * (yValues[i] - yMean);
-      divisorSum += Math.pow(xValues[i] - xMean, 2);
-    }
-    return dividendSum / divisorSum;
-  }
-}
diff --git a/modules/benchpress/src/validator.ts b/modules/benchpress/src/validator.ts
deleted file mode 100644
index a88f93f8d6ca..000000000000
--- a/modules/benchpress/src/validator.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {bind} from 'angular2/di';
-import {List, StringMap} from 'angular2/src/facade/collection';
-import {ABSTRACT, BaseException} from 'angular2/src/facade/lang';
-
-import {MeasureValues} from './measure_values';
-
-/**
- * A Validator calculates a valid sample out of the complete sample.
- * A valid sample is a sample that represents the population that should be observed
- * in the correct way.
- */
-@ABSTRACT()
-export class Validator {
-  static bindTo(delegateToken) {
-    return [bind(Validator).toFactory((delegate) => delegate, [delegateToken])];
-  }
-
-  /**
-   * Calculates a valid sample out of the complete sample
-   */
-  validate(completeSample: List<MeasureValues>): List<MeasureValues> {
-    throw new BaseException('NYI');
-  }
-
-  /**
-   * Returns a Map that describes the properties of the validator
-   * (e.g. sample size, ...)
-   */
-  describe(): StringMap<string, any> { throw new BaseException('NYI'); }
-}
diff --git a/modules/benchpress/src/validator/regression_slope_validator.ts b/modules/benchpress/src/validator/regression_slope_validator.ts
deleted file mode 100644
index 0b560c4099e2..000000000000
--- a/modules/benchpress/src/validator/regression_slope_validator.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import {List, ListWrapper, StringMap} from 'angular2/src/facade/collection';
-import {bind, Binding, OpaqueToken} from 'angular2/di';
-
-import {Validator} from '../validator';
-import {Statistic} from '../statistic';
-import {MeasureValues} from '../measure_values';
-
-/**
- * A validator that checks the regression slope of a specific metric.
- * Waits for the regression slope to be >=0.
- */
-export class RegressionSlopeValidator extends Validator {
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get SAMPLE_SIZE(): OpaqueToken { return _SAMPLE_SIZE; }
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get METRIC(): OpaqueToken { return _METRIC; }
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get BINDINGS(): List<Binding> { return _BINDINGS; }
-
-  _sampleSize: number;
-  _metric: string;
-
-  constructor(sampleSize, metric) {
-    super();
-    this._sampleSize = sampleSize;
-    this._metric = metric;
-  }
-
-  describe(): StringMap<string, any> {
-    return {'sampleSize': this._sampleSize, 'regressionSlopeMetric': this._metric};
-  }
-
-  validate(completeSample: List<MeasureValues>): List<MeasureValues> {
-    if (completeSample.length >= this._sampleSize) {
-      var latestSample = ListWrapper.slice(completeSample, completeSample.length - this._sampleSize,
-                                           completeSample.length);
-      var xValues = [];
-      var yValues = [];
-      for (var i = 0; i < latestSample.length; i++) {
-        // For now, we only use the array index as x value.
-        // TODO(tbosch): think about whether we should use time here instead
-        xValues.push(i);
-        yValues.push(latestSample[i].values[this._metric]);
-      }
-      var regressionSlope = Statistic.calculateRegressionSlope(
-          xValues, Statistic.calculateMean(xValues), yValues, Statistic.calculateMean(yValues));
-      return regressionSlope >= 0 ? latestSample : null;
-    } else {
-      return null;
-    }
-  }
-}
-
-var _SAMPLE_SIZE = new OpaqueToken('RegressionSlopeValidator.sampleSize');
-var _METRIC = new OpaqueToken('RegressionSlopeValidator.metric');
-var _BINDINGS = [
-  bind(RegressionSlopeValidator)
-      .toFactory((sampleSize, metric) => new RegressionSlopeValidator(sampleSize, metric),
-                 [_SAMPLE_SIZE, _METRIC]),
-  bind(_SAMPLE_SIZE).toValue(10),
-  bind(_METRIC).toValue('scriptTime')
-];
diff --git a/modules/benchpress/src/validator/size_validator.ts b/modules/benchpress/src/validator/size_validator.ts
deleted file mode 100644
index 3f407f9ad5c4..000000000000
--- a/modules/benchpress/src/validator/size_validator.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {List, ListWrapper, StringMap} from 'angular2/src/facade/collection';
-import {bind, Binding, OpaqueToken} from 'angular2/di';
-
-import {Validator} from '../validator';
-import {MeasureValues} from '../measure_values';
-
-/**
- * A validator that waits for the sample to have a certain size.
- */
-export class SizeValidator extends Validator {
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get BINDINGS(): List<Binding> { return _BINDINGS; }
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get SAMPLE_SIZE() { return _SAMPLE_SIZE; }
-
-  _sampleSize: number;
-
-  constructor(size) {
-    super();
-    this._sampleSize = size;
-  }
-
-  describe(): StringMap<string, any> { return {'sampleSize': this._sampleSize}; }
-
-  validate(completeSample: List<MeasureValues>): List<MeasureValues> {
-    if (completeSample.length >= this._sampleSize) {
-      return ListWrapper.slice(completeSample, completeSample.length - this._sampleSize,
-                               completeSample.length);
-    } else {
-      return null;
-    }
-  }
-}
-
-var _SAMPLE_SIZE = new OpaqueToken('SizeValidator.sampleSize');
-var _BINDINGS = [
-  bind(SizeValidator)
-      .toFactory((size) => new SizeValidator(size), [_SAMPLE_SIZE]),
-  bind(_SAMPLE_SIZE).toValue(10)
-];
diff --git a/modules/benchpress/src/web_driver_adapter.ts b/modules/benchpress/src/web_driver_adapter.ts
deleted file mode 100644
index 77fb15acfce5..000000000000
--- a/modules/benchpress/src/web_driver_adapter.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {bind} from 'angular2/di';
-import {Promise} from 'angular2/src/facade/async';
-import {BaseException, ABSTRACT} from 'angular2/src/facade/lang';
-import {List, Map} from 'angular2/src/facade/collection';
-
-/**
- * A WebDriverAdapter bridges API differences between different WebDriver clients,
- * e.g. JS vs Dart Async vs Dart Sync webdriver.
- * Needs one implementation for every supported WebDriver client.
- */
-@ABSTRACT()
-export class WebDriverAdapter {
-  static bindTo(delegateToken) {
-    return [bind(WebDriverAdapter).toFactory((delegate) => delegate, [delegateToken])];
-  }
-
-  waitFor(callback: Function): Promise<any> { throw new BaseException('NYI'); }
-  executeScript(script: string): Promise<any> { throw new BaseException('NYI'); }
-  executeAsyncScript(script: string): Promise<any> { throw new BaseException('NYI'); }
-  capabilities(): Promise<Map<string, any>> { throw new BaseException('NYI'); }
-  logs(type: string): Promise<List<any>> { throw new BaseException('NYI'); }
-}
diff --git a/modules/benchpress/src/web_driver_extension.ts b/modules/benchpress/src/web_driver_extension.ts
deleted file mode 100644
index 4bba52d893df..000000000000
--- a/modules/benchpress/src/web_driver_extension.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import {bind, Binding, Injector, OpaqueToken} from 'angular2/di';
-
-import {BaseException, ABSTRACT, isBlank, isPresent} from 'angular2/src/facade/lang';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {List, ListWrapper, StringMap} from 'angular2/src/facade/collection';
-
-import {Options} from './common_options';
-
-/**
- * A WebDriverExtension implements extended commands of the webdriver protocol
- * for a given browser, independent of the WebDriverAdapter.
- * Needs one implementation for every supported Browser.
- */
-@ABSTRACT()
-export class WebDriverExtension {
-  static bindTo(childTokens): List<Binding> {
-    var res = [
-      bind(_CHILDREN)
-          .toFactory(
-              (injector: Injector) => ListWrapper.map(childTokens, (token) => injector.get(token)),
-              [Injector]),
-      bind(WebDriverExtension)
-          .toFactory(
-              (children, capabilities) => {
-                var delegate;
-                ListWrapper.forEach(children, (extension) => {
-                  if (extension.supports(capabilities)) {
-                    delegate = extension;
-                  }
-                });
-                if (isBlank(delegate)) {
-                  throw new BaseException('Could not find a delegate for given capabilities!');
-                }
-                return delegate;
-              },
-              [_CHILDREN, Options.CAPABILITIES])
-    ];
-    return res;
-  }
-
-  gc(): Promise<any> { throw new BaseException('NYI'); }
-
-  timeBegin(name: string): Promise<any> { throw new BaseException('NYI'); }
-
-  timeEnd(name: string, restartName: string): Promise<any> { throw new BaseException('NYI'); }
-
-  /**
-   * Format:
-   * - cat: category of the event
-   * - name: event name: 'script', 'gc', 'render', ...
-   * - ph: phase: 'B' (begin), 'E' (end), 'b' (nestable start), 'e' (nestable end), 'X' (Complete
-   *event)
-   * - ts: timestamp in ms, e.g. 12345
-   * - pid: process id
-   * - args: arguments, e.g. {heapSize: 1234}
-   *
-   * Based on [Chrome Trace Event
-   *Format](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit)
-   **/
-  readPerfLog(): Promise<List<any>> { throw new BaseException('NYI'); }
-
-  perfLogFeatures(): PerfLogFeatures { throw new BaseException('NYI'); }
-
-  supports(capabilities: StringMap<string, any>): boolean { return true; }
-}
-
-export class PerfLogFeatures {
-  render: boolean;
-  gc: boolean;
-  frameCapture: boolean;
-
-  constructor({render = false, gc = false,
-               frameCapture = false}: {render?: boolean,
-                                       gc?: boolean,
-                                       frameCapture?: boolean} = {}) {
-    this.render = render;
-    this.gc = gc;
-    this.frameCapture = frameCapture;
-  }
-}
-
-var _CHILDREN = new OpaqueToken('WebDriverExtension.children');
diff --git a/modules/benchpress/src/webdriver/async_webdriver_adapter.dart b/modules/benchpress/src/webdriver/async_webdriver_adapter.dart
deleted file mode 100644
index 6826930d083d..000000000000
--- a/modules/benchpress/src/webdriver/async_webdriver_adapter.dart
+++ /dev/null
@@ -1,35 +0,0 @@
-library benchpress.src.webdriver.async_webdriver_adapter_dart;
-
-import 'package:webdriver/webdriver.dart' show WebDriver, LogEntry;
-import 'package:angular2/src/facade/async.dart' show Future;
-import '../web_driver_adapter.dart' show WebDriverAdapter;
-
-class AsyncWebDriverAdapter extends WebDriverAdapter {
-  WebDriver _driver;
-  AsyncWebDriverAdapter(this._driver);
-
-  Future waitFor(Function callback) {
-    return callback();
-  }
-
-  Future executeScript(String script) {
-    return _driver.execute(script, const []);
-  }
-
-  Future executeAsyncScript(String script) {
-    return _driver.executeAsync(script, const []);
-  }
-
-  Future<Map> capabilities() {
-    return new Future.value(_driver.capabilities);
-  }
-
-  Future<List<Map>> logs(String type) {
-    return _driver.logs
-        .get(type)
-        .map((LogEntry entry) => {'message': entry.message})
-        .fold(<Map>[], (log, Map entry) {
-      return log..add(entry);
-    });
-  }
-}
diff --git a/modules/benchpress/src/webdriver/chrome_driver_extension.ts b/modules/benchpress/src/webdriver/chrome_driver_extension.ts
deleted file mode 100644
index 6fcfe9328e34..000000000000
--- a/modules/benchpress/src/webdriver/chrome_driver_extension.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import {bind, Binding} from 'angular2/di';
-import {ListWrapper, StringMapWrapper, StringMap} from 'angular2/src/facade/collection';
-import {
-  Json,
-  isPresent,
-  isBlank,
-  RegExpWrapper,
-  StringWrapper,
-  BaseException,
-  NumberWrapper
-} from 'angular2/src/facade/lang';
-
-import {WebDriverExtension, PerfLogFeatures} from '../web_driver_extension';
-import {WebDriverAdapter} from '../web_driver_adapter';
-import {Promise} from 'angular2/src/facade/async';
-
-/**
- * Set the following 'traceCategories' to collect metrics in Chrome:
- * 'v8,blink.console,disabled-by-default-devtools.timeline'
- *
- * In order to collect the frame rate related metrics, add 'benchmark'
- * to the list above.
- */
-export class ChromeDriverExtension extends WebDriverExtension {
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get BINDINGS(): List<Binding> { return _BINDINGS; }
-
-  constructor(private _driver: WebDriverAdapter) { super(); }
-
-  gc() { return this._driver.executeScript('window.gc()'); }
-
-  timeBegin(name: string): Promise<any> {
-    return this._driver.executeScript(`console.time('${name}');`);
-  }
-
-  timeEnd(name: string, restartName: string = null): Promise<any> {
-    var script = `console.timeEnd('${name}');`;
-    if (isPresent(restartName)) {
-      script += `console.time('${restartName}');`
-    }
-    return this._driver.executeScript(script);
-  }
-
-  // See [Chrome Trace Event
-  // Format](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit)
-  readPerfLog(): Promise<any> {
-    // TODO(tbosch): Chromedriver bug https://code.google.com/p/chromedriver/issues/detail?id=1098
-    // Need to execute at least one command so that the browser logs can be read out!
-    return this._driver.executeScript('1+1')
-        .then((_) => this._driver.logs('performance'))
-        .then((entries) => {
-          var events = [];
-          ListWrapper.forEach(entries, function(entry) {
-            var message = Json.parse(entry['message'])['message'];
-            if (StringWrapper.equals(message['method'], 'Tracing.dataCollected')) {
-              events.push(message['params']);
-            }
-            if (StringWrapper.equals(message['method'], 'Tracing.bufferUsage')) {
-              throw new BaseException('The DevTools trace buffer filled during the test!');
-            }
-          });
-          return this._convertPerfRecordsToEvents(events);
-        });
-  }
-
-  _convertPerfRecordsToEvents(chromeEvents: List<StringMap<string, any>>,
-                              normalizedEvents: List<StringMap<string, any>> = null) {
-    if (isBlank(normalizedEvents)) {
-      normalizedEvents = [];
-    }
-    var majorGCPids = {};
-    chromeEvents.forEach((event) => {
-      var cat = event['cat'];
-      var name = event['name'];
-      var args = event['args'];
-      var pid = event['pid'];
-      var ph = event['ph'];
-      if (StringWrapper.equals(cat, 'disabled-by-default-devtools.timeline')) {
-        if (StringWrapper.equals(name, 'FunctionCall') &&
-            (isBlank(args) || isBlank(args['data']) ||
-             !StringWrapper.equals(args['data']['scriptName'], 'InjectedScript'))) {
-          normalizedEvents.push(normalizeEvent(event, {'name': 'script'}));
-
-        } else if (StringWrapper.equals(name, 'RecalculateStyles') ||
-                   StringWrapper.equals(name, 'Layout') ||
-                   StringWrapper.equals(name, 'UpdateLayerTree') ||
-                   StringWrapper.equals(name, 'Paint') || StringWrapper.equals(name, 'Rasterize') ||
-                   StringWrapper.equals(name, 'CompositeLayers')) {
-          normalizedEvents.push(normalizeEvent(event, {'name': 'render'}));
-
-        } else if (StringWrapper.equals(name, 'GCEvent')) {
-          var normArgs = {
-            'usedHeapSize': isPresent(args['usedHeapSizeAfter']) ? args['usedHeapSizeAfter'] :
-                                                                   args['usedHeapSizeBefore']
-          };
-          if (StringWrapper.equals(event['ph'], 'E')) {
-            normArgs['majorGc'] = isPresent(majorGCPids[pid]) && majorGCPids[pid];
-          }
-          majorGCPids[pid] = false;
-          normalizedEvents.push(normalizeEvent(event, {'name': 'gc', 'args': normArgs}));
-        }
-
-      } else if (StringWrapper.equals(cat, 'blink.console')) {
-        normalizedEvents.push(normalizeEvent(event, {'name': name}));
-
-      } else if (StringWrapper.equals(cat, 'v8')) {
-        if (StringWrapper.equals(name, 'majorGC')) {
-          if (StringWrapper.equals(ph, 'B')) {
-            majorGCPids[pid] = true;
-          }
-        }
-
-      } else if (StringWrapper.equals(cat, 'benchmark')) {
-        // TODO(goderbauer): Instead of BenchmarkInstrumentation::ImplThreadRenderingStats the
-        // following events should be used (if available) for more accurate measurments:
-        //   1st choice: vsync_before - ground truth on Android
-        //   2nd choice: BenchmarkInstrumentation::DisplayRenderingStats - available on systems with
-        //               new surfaces framework (not broadly enabled yet)
-        //   3rd choice: BenchmarkInstrumentation::ImplThreadRenderingStats - fallback event that is
-        //               allways available if something is rendered
-        if (StringWrapper.equals(name, 'BenchmarkInstrumentation::ImplThreadRenderingStats')) {
-          var frameCount = event['args']['data']['frame_count'];
-          if (frameCount > 1) {
-            throw new BaseException('multi-frame render stats not supported');
-          }
-          if (frameCount == 1) {
-            normalizedEvents.push(normalizeEvent(event, {'name': 'frame'}));
-          }
-        }
-      }
-    });
-    return normalizedEvents;
-  }
-
-  perfLogFeatures(): PerfLogFeatures {
-    return new PerfLogFeatures({render: true, gc: true, frameCapture: true});
-  }
-
-  supports(capabilities: StringMap<string, any>): boolean {
-    return StringWrapper.equals(capabilities['browserName'].toLowerCase(), 'chrome');
-  }
-}
-
-function normalizeEvent(chromeEvent: StringMap<string, any>,
-                        data: StringMap<string, any>): StringMap<string, any> {
-  var ph = chromeEvent['ph'];
-  if (StringWrapper.equals(ph, 'S')) {
-    ph = 'b';
-  } else if (StringWrapper.equals(ph, 'F')) {
-    ph = 'e';
-  }
-  var result =
-      {'pid': chromeEvent['pid'], 'ph': ph, 'cat': 'timeline', 'ts': chromeEvent['ts'] / 1000};
-  if (chromeEvent['ph'] === 'X') {
-    var dur = chromeEvent['dur'];
-    if (isBlank(dur)) {
-      dur = chromeEvent['tdur'];
-    }
-    result['dur'] = isBlank(dur) ? 0.0 : dur / 1000;
-  }
-  StringMapWrapper.forEach(data, (value, prop) => { result[prop] = value; });
-  return result;
-}
-
-var _BINDINGS = [
-  bind(ChromeDriverExtension)
-      .toFactory((driver) => new ChromeDriverExtension(driver), [WebDriverAdapter])
-];
diff --git a/modules/benchpress/src/webdriver/firefox_driver_extension.ts b/modules/benchpress/src/webdriver/firefox_driver_extension.ts
deleted file mode 100644
index 63d3b0a3ee7d..000000000000
--- a/modules/benchpress/src/webdriver/firefox_driver_extension.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import {bind, Binding} from 'angular2/di';
-import {isPresent, StringWrapper} from 'angular2/src/facade/lang';
-import {WebDriverExtension, PerfLogFeatures} from '../web_driver_extension';
-import {WebDriverAdapter} from '../web_driver_adapter';
-import {Promise} from 'angular2/src/facade/async';
-
-export class FirefoxDriverExtension extends WebDriverExtension {
-  static get BINDINGS(): List<Binding> { return _BINDINGS; }
-
-  private _profilerStarted: boolean;
-
-  constructor(private _driver: WebDriverAdapter) {
-    super();
-    this._profilerStarted = false;
-  }
-
-  gc() { return this._driver.executeScript('window.forceGC()'); }
-
-  timeBegin(name: string): Promise<any> {
-    if (!this._profilerStarted) {
-      this._profilerStarted = true;
-      this._driver.executeScript('window.startProfiler();');
-    }
-    return this._driver.executeScript('window.markStart("' + name + '");');
-  }
-
-  timeEnd(name: string, restartName: string = null): Promise<any> {
-    var script = 'window.markEnd("' + name + '");';
-    if (isPresent(restartName)) {
-      script += 'window.markStart("' + restartName + '");';
-    }
-    return this._driver.executeScript(script);
-  }
-
-  readPerfLog(): Promise<any> {
-    return this._driver.executeAsyncScript('var cb = arguments[0]; window.getProfile(cb);');
-  }
-
-  perfLogFeatures(): PerfLogFeatures { return new PerfLogFeatures({render: true, gc: true}); }
-
-  supports(capabilities: StringMap<string, any>): boolean {
-    return StringWrapper.equals(capabilities['browserName'].toLowerCase(), 'firefox');
-  }
-}
-
-var _BINDINGS = [
-  bind(FirefoxDriverExtension)
-      .toFactory((driver) => new FirefoxDriverExtension(driver), [WebDriverAdapter])
-];
diff --git a/modules/benchpress/src/webdriver/ios_driver_extension.ts b/modules/benchpress/src/webdriver/ios_driver_extension.ts
deleted file mode 100644
index 0bbc216d9bc4..000000000000
--- a/modules/benchpress/src/webdriver/ios_driver_extension.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import {bind, Binding} from 'angular2/di';
-import {ListWrapper, StringMap} from 'angular2/src/facade/collection';
-import {
-  Json,
-  isPresent,
-  isBlank,
-  RegExpWrapper,
-  StringWrapper,
-  BaseException
-} from 'angular2/src/facade/lang';
-
-import {WebDriverExtension, PerfLogFeatures} from '../web_driver_extension';
-import {WebDriverAdapter} from '../web_driver_adapter';
-import {Promise} from 'angular2/src/facade/async';
-
-export class IOsDriverExtension extends WebDriverExtension {
-  // TODO(tbosch): use static values when our transpiler supports them
-  static get BINDINGS(): List<Binding> { return _BINDINGS; }
-
-  constructor(private _driver: WebDriverAdapter) { super(); }
-
-  gc(): Promise<any> { throw new BaseException('Force GC is not supported on iOS'); }
-
-  timeBegin(name: string): Promise<any> {
-    return this._driver.executeScript(`console.time('${name}');`);
-  }
-
-  timeEnd(name: string, restartName: string = null): Promise<any> {
-    var script = `console.timeEnd('${name}');`;
-    if (isPresent(restartName)) {
-      script += `console.time('${restartName}');`
-    }
-    return this._driver.executeScript(script);
-  }
-
-  // See https://github.com/WebKit/webkit/tree/master/Source/WebInspectorUI/Versions
-  readPerfLog() {
-    // TODO(tbosch): Bug in IOsDriver: Need to execute at least one command
-    // so that the browser logs can be read out!
-    return this._driver.executeScript('1+1')
-        .then((_) => this._driver.logs('performance'))
-        .then((entries) => {
-          var records = [];
-          ListWrapper.forEach(entries, function(entry) {
-            var message = Json.parse(entry['message'])['message'];
-            if (StringWrapper.equals(message['method'], 'Timeline.eventRecorded')) {
-              records.push(message['params']['record']);
-            }
-          });
-          return this._convertPerfRecordsToEvents(records);
-        });
-  }
-
-  _convertPerfRecordsToEvents(records: any[], events: any[] = null) {
-    if (isBlank(events)) {
-      events = [];
-    }
-    records.forEach((record) => {
-      var endEvent = null;
-      var type = record['type'];
-      var data = record['data'];
-      var startTime = record['startTime'];
-      var endTime = record['endTime'];
-
-      if (StringWrapper.equals(type, 'FunctionCall') &&
-          (isBlank(data) || !StringWrapper.equals(data['scriptName'], 'InjectedScript'))) {
-        events.push(createStartEvent('script', startTime));
-        endEvent = createEndEvent('script', endTime);
-      } else if (StringWrapper.equals(type, 'Time')) {
-        events.push(createMarkStartEvent(data['message'], startTime));
-      } else if (StringWrapper.equals(type, 'TimeEnd')) {
-        events.push(createMarkEndEvent(data['message'], startTime));
-      } else if (StringWrapper.equals(type, 'RecalculateStyles') ||
-                 StringWrapper.equals(type, 'Layout') ||
-                 StringWrapper.equals(type, 'UpdateLayerTree') ||
-                 StringWrapper.equals(type, 'Paint') || StringWrapper.equals(type, 'Rasterize') ||
-                 StringWrapper.equals(type, 'CompositeLayers')) {
-        events.push(createStartEvent('render', startTime));
-        endEvent = createEndEvent('render', endTime);
-      }
-      // Note: ios used to support GCEvent up until iOS 6 :-(
-      if (isPresent(record['children'])) {
-        this._convertPerfRecordsToEvents(record['children'], events);
-      }
-      if (isPresent(endEvent)) {
-        events.push(endEvent);
-      }
-    });
-    return events;
-  }
-
-  perfLogFeatures(): PerfLogFeatures { return new PerfLogFeatures({render: true}); }
-
-  supports(capabilities: StringMap<string, any>): boolean {
-    return StringWrapper.equals(capabilities['browserName'].toLowerCase(), 'safari');
-  }
-}
-
-function createEvent(ph, name, time, args = null) {
-  var result = {
-    'cat': 'timeline',
-    'name': name,
-    'ts': time,
-    'ph': ph,
-    // The ios protocol does not support the notions of multiple processes in
-    // the perflog...
-    'pid': 'pid0'
-  };
-  if (isPresent(args)) {
-    result['args'] = args;
-  }
-  return result;
-}
-
-function createStartEvent(name, time, args = null) {
-  return createEvent('B', name, time, args);
-}
-
-function createEndEvent(name, time, args = null) {
-  return createEvent('E', name, time, args);
-}
-
-function createMarkStartEvent(name, time) {
-  return createEvent('b', name, time);
-}
-
-function createMarkEndEvent(name, time) {
-  return createEvent('e', name, time);
-}
-
-var _BINDINGS = [
-  bind(IOsDriverExtension)
-      .toFactory((driver) => new IOsDriverExtension(driver), [WebDriverAdapter])
-];
diff --git a/modules/benchpress/src/webdriver/selenium_webdriver_adapter.dart b/modules/benchpress/src/webdriver/selenium_webdriver_adapter.dart
deleted file mode 100644
index 1beebecc47e9..000000000000
--- a/modules/benchpress/src/webdriver/selenium_webdriver_adapter.dart
+++ /dev/null
@@ -1,2 +0,0 @@
-library benchpress.src.webdriver.selenium_webdriver_adapter;
-//no dart implementation
diff --git a/modules/benchpress/src/webdriver/selenium_webdriver_adapter.ts b/modules/benchpress/src/webdriver/selenium_webdriver_adapter.ts
deleted file mode 100644
index 3c66e1ed5c03..000000000000
--- a/modules/benchpress/src/webdriver/selenium_webdriver_adapter.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {bind, Binding} from 'angular2/di';
-import {WebDriverAdapter} from '../web_driver_adapter';
-
-import webdriver = require('selenium-webdriver');
-
-/**
- * Adapter for the selenium-webdriver.
- */
-export class SeleniumWebDriverAdapter extends WebDriverAdapter {
-  static get PROTRACTOR_BINDINGS(): List<Binding> { return _PROTRACTOR_BINDINGS; }
-
-  constructor(private _driver: any) { super(); }
-
-  _convertPromise(thenable) {
-    var completer = PromiseWrapper.completer();
-    thenable.then(
-        // selenium-webdriver uses an own Node.js context,
-        // so we need to convert data into objects of this context.
-        // (e.g. otherwise instanceof checks of rtts_assert would fail)
-        (data) => completer.resolve(convertToLocalProcess(data)), completer.reject);
-    return completer.promise;
-  }
-
-  waitFor(callback): Promise<any> {
-    return this._convertPromise(this._driver.controlFlow().execute(callback));
-  }
-
-  executeScript(script: string): Promise<any> {
-    return this._convertPromise(this._driver.executeScript(script));
-  }
-
-  executeAsyncScript(script: string): Promise<any> {
-    return this._convertPromise(this._driver.executeAsyncScript(script));
-  }
-
-  capabilities(): Promise<any> {
-    return this._convertPromise(
-        this._driver.getCapabilities().then((capsObject) => capsObject.toJSON()));
-  }
-
-  logs(type: string): Promise<any> {
-    // Needed as selenium-webdriver does not forward
-    // performance logs in the correct way via manage().logs
-    return this._convertPromise(this._driver.schedule(
-        new webdriver.Command(webdriver.CommandName.GET_LOG).setParameter('type', type),
-        'WebDriver.manage().logs().get(' + type + ')'));
-  }
-}
-
-function convertToLocalProcess(data): Object {
-  var serialized = JSON.stringify(data);
-  if ('' + serialized === 'undefined') {
-    return undefined;
-  }
-  return JSON.parse(serialized);
-}
-
-var _PROTRACTOR_BINDINGS =
-    [bind(WebDriverAdapter).toFactory(() => new SeleniumWebDriverAdapter(global.browser), [])];
diff --git a/modules/benchpress/test/firefox_extension/conf.dart b/modules/benchpress/test/firefox_extension/conf.dart
deleted file mode 100644
index 150503ce484d..000000000000
--- a/modules/benchpress/test/firefox_extension/conf.dart
+++ /dev/null
@@ -1,2 +0,0 @@
-library benchpress.test.firefox_extension.conf;
-//empty as we don't have a version for dart
diff --git a/modules/benchpress/test/firefox_extension/conf.ts b/modules/benchpress/test/firefox_extension/conf.ts
deleted file mode 100644
index eb2a914fa725..000000000000
--- a/modules/benchpress/test/firefox_extension/conf.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/// <reference path="../../../angular2/typings/node/node.d.ts" />
-require('traceur/bin/traceur-runtime.js');
-require('reflect-metadata');
-var testHelper = require('../../src/firefox_extension/lib/test_helper.js');
-
-exports.config = {
-  specs: ['spec.js', 'sample_benchmark.js'],
-
-  framework: 'jasmine2',
-
-  jasmineNodeOpts: {showColors: true, defaultTimeoutInterval: 1200000},
-
-  getMultiCapabilities: function() { return testHelper.getFirefoxProfileWithExtension(); }
-};
diff --git a/modules/benchpress/test/firefox_extension/parser_util_spec.dart b/modules/benchpress/test/firefox_extension/parser_util_spec.dart
deleted file mode 100644
index f9c716b93438..000000000000
--- a/modules/benchpress/test/firefox_extension/parser_util_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchpress.test.firefox_extension.parser_util_spec;
-
-main() {
-
-}
diff --git a/modules/benchpress/test/firefox_extension/parser_util_spec.ts b/modules/benchpress/test/firefox_extension/parser_util_spec.ts
deleted file mode 100644
index fccd1d842c5b..000000000000
--- a/modules/benchpress/test/firefox_extension/parser_util_spec.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import {convertPerfProfileToEvents} from 'benchpress/src/firefox_extension/lib/parser_util';
-
-function assertEventsEqual(actualEvents, expectedEvents) {
-  expect(actualEvents.length == expectedEvents.length);
-  for (var i = 0; i < actualEvents.length; ++i) {
-    var actualEvent = actualEvents[i];
-    var expectedEvent = expectedEvents[i];
-    for (var key in actualEvent) {
-      expect(actualEvent[key]).toEqual(expectedEvent[key]);
-    }
-  }
-};
-
-export function main() {
-  describe('convertPerfProfileToEvents', function() {
-    it('should convert single instantaneous event', function() {
-      var profileData = {
-        threads: [
-          {samples: [{time: 1, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]}]}
-        ]
-      };
-      var perfEvents = convertPerfProfileToEvents(profileData);
-      assertEventsEqual(perfEvents, [{ph: 'X', ts: 1, name: 'script'}]);
-    });
-
-    it('should convert single non-instantaneous event', function() {
-      var profileData = {
-        threads: [
-          {
-            samples: [
-              {time: 1, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
-              {time: 2, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
-              {time: 100, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]}
-            ]
-          }
-        ]
-      };
-      var perfEvents = convertPerfProfileToEvents(profileData);
-      assertEventsEqual(perfEvents,
-                        [{ph: 'B', ts: 1, name: 'script'}, {ph: 'E', ts: 100, name: 'script'}]);
-    });
-
-    it('should convert multiple instantaneous events', function() {
-      var profileData = {
-        threads: [
-          {
-            samples: [
-              {time: 1, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
-              {time: 2, frames: [{location: 'PresShell::Paint'}]}
-            ]
-          }
-        ]
-      };
-      var perfEvents = convertPerfProfileToEvents(profileData);
-      assertEventsEqual(perfEvents,
-                        [{ph: 'X', ts: 1, name: 'script'}, {ph: 'X', ts: 2, name: 'render'}]);
-    });
-
-    it('should convert multiple mixed events', function() {
-      var profileData = {
-        threads: [
-          {
-            samples: [
-              {time: 1, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
-              {time: 2, frames: [{location: 'PresShell::Paint'}]},
-              {time: 5, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
-              {time: 10, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]}
-            ]
-          }
-        ]
-      };
-      var perfEvents = convertPerfProfileToEvents(profileData);
-      assertEventsEqual(perfEvents, [
-        {ph: 'X', ts: 1, name: 'script'},
-        {ph: 'X', ts: 2, name: 'render'},
-        {ph: 'B', ts: 5, name: 'script'},
-        {ph: 'E', ts: 10, name: 'script'}
-      ]);
-    });
-
-    it('should add args to gc events', function() {
-      var profileData = {threads: [{samples: [{time: 1, frames: [{location: 'forceGC'}]}]}]};
-      var perfEvents = convertPerfProfileToEvents(profileData);
-      assertEventsEqual(perfEvents, [{ph: 'X', ts: 1, name: 'gc', args: {usedHeapSize: 0}}]);
-    });
-
-    it('should skip unknown events', function() {
-      var profileData = {
-        threads: [
-          {
-            samples: [
-              {time: 1, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
-              {time: 2, frames: [{location: 'foo'}]}
-            ]
-          }
-        ]
-      };
-      var perfEvents = convertPerfProfileToEvents(profileData);
-      assertEventsEqual(perfEvents, [{ph: 'X', ts: 1, name: 'script'}]);
-    });
-  });
-};
diff --git a/modules/benchpress/test/firefox_extension/sample_benchmark.dart b/modules/benchpress/test/firefox_extension/sample_benchmark.dart
deleted file mode 100644
index 43d081067520..000000000000
--- a/modules/benchpress/test/firefox_extension/sample_benchmark.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchpress.test.firefox_extension.sample_benchmark;
-
-main() {
-
-}
diff --git a/modules/benchpress/test/firefox_extension/sample_benchmark.ts b/modules/benchpress/test/firefox_extension/sample_benchmark.ts
deleted file mode 100644
index 38e28a1244fb..000000000000
--- a/modules/benchpress/test/firefox_extension/sample_benchmark.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-var benchpress = require('../../index.js');
-var runner = new benchpress.Runner([
-  // use protractor as Webdriver client
-  benchpress.SeleniumWebDriverAdapter.PROTRACTOR_BINDINGS,
-  // use RegressionSlopeValidator to validate samples
-  benchpress.Validator.bindTo(benchpress.RegressionSlopeValidator),
-  // use 10 samples to calculate slope regression
-  benchpress.bind(benchpress.RegressionSlopeValidator.SAMPLE_SIZE).toValue(20),
-  // use the script metric to calculate slope regression
-  benchpress.bind(benchpress.RegressionSlopeValidator.METRIC).toValue('scriptTime'),
-  benchpress.bind(benchpress.Options.FORCE_GC).toValue(true)
-]);
-
-describe('deep tree baseline', function() {
-  it('should be fast!', function(done) {
-    browser.ignoreSynchronization = true;
-    browser.get('http://localhost:8001/examples/src/benchpress/');
-
-    /*
-     * Tell benchpress to click the buttons to destroy and re-create the tree for each sample.
-     * Benchpress will log the collected metrics after each sample is collected, and will stop
-     * sampling as soon as the calculated regression slope for last 20 samples is stable.
-     */
-    runner.sample({
-            id: 'baseline',
-            execute: function() { $('button')
-                                      .click(); },
-            bindings: [benchpress.bind(benchpress.Options.SAMPLE_DESCRIPTION).toValue({depth: 9})]
-          })
-        .then(done, done.fail);
-  });
-});
diff --git a/modules/benchpress/test/firefox_extension/spec.dart b/modules/benchpress/test/firefox_extension/spec.dart
deleted file mode 100644
index ba0e45b92a76..000000000000
--- a/modules/benchpress/test/firefox_extension/spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library benchpress.test.firefox_extension.spec;
-
-main() {
-
-}
diff --git a/modules/benchpress/test/firefox_extension/spec.ts b/modules/benchpress/test/firefox_extension/spec.ts
deleted file mode 100644
index 9d5e9b7dec12..000000000000
--- a/modules/benchpress/test/firefox_extension/spec.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/// <reference path="../../../angular2/typings/node/node.d.ts" />
-/// <reference path="../../../angular2/typings/angular-protractor/angular-protractor.d.ts" />
-/// <reference path="../../../angular2/typings/jasmine/jasmine.d.ts" />
-
-var assertEventsContainsName = function(events, eventName) {
-  var found = false;
-  for (var i = 0; i < events.length; ++i) {
-    if (events[i].name == eventName) {
-      found = true;
-      break;
-    }
-  }
-  expect(found).toBeTruthy();
-};
-
-describe('firefox extension', function() {
-  var TEST_URL = 'http://localhost:8001/examples/src/hello_world/index.html';
-
-  it('should measure performance', function() {
-    browser.sleep(3000);  // wait for extension to load
-
-    browser.driver.get(TEST_URL);
-
-    browser.executeScript('window.startProfiler()')
-        .then(function() { console.log('started measuring perf'); });
-
-    browser.executeScript('window.forceGC()');
-
-    browser.executeAsyncScript('var cb = arguments[0]; window.getProfile(cb);')
-        .then(function(profile) {
-          assertEventsContainsName(profile, 'gc');
-          assertEventsContainsName(profile, 'script');
-        });
-  })
-});
diff --git a/modules/benchpress/test/metric/multi_metric_spec.ts b/modules/benchpress/test/metric/multi_metric_spec.ts
deleted file mode 100644
index fe460adfe5c1..000000000000
--- a/modules/benchpress/test/metric/multi_metric_spec.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  afterEach,
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {List, ListWrapper, StringMap} from 'angular2/src/facade/collection';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-
-import {Metric, MultiMetric, bind, Injector} from 'benchpress/common';
-
-export function main() {
-  function createMetric(ids) {
-    var m = Injector.resolveAndCreate([
-                      ListWrapper.map(ids, (id) => bind(id).toValue(new MockMetric(id))),
-                      MultiMetric.createBindings(ids)
-                    ])
-                .get(MultiMetric);
-    return PromiseWrapper.resolve(m);
-  }
-
-  describe('multi metric', () => {
-    it('should merge descriptions', inject([AsyncTestCompleter], (async) => {
-         createMetric(['m1', 'm2'])
-             .then((m) => {
-               expect(m.describe()).toEqual({'m1': 'describe', 'm2': 'describe'});
-               async.done();
-             });
-       }));
-
-    it('should merge all beginMeasure calls', inject([AsyncTestCompleter], (async) => {
-         createMetric(['m1', 'm2'])
-             .then((m) => m.beginMeasure())
-             .then((values) => {
-               expect(values).toEqual(['m1_beginMeasure', 'm2_beginMeasure']);
-               async.done();
-             });
-       }));
-
-    [false, true].forEach((restartFlag) => {
-      it(`should merge all endMeasure calls for restart=${restartFlag}`,
-         inject([AsyncTestCompleter], (async) => {
-           createMetric(['m1', 'm2'])
-               .then((m) => m.endMeasure(restartFlag))
-               .then((values) => {
-                 expect(values)
-                     .toEqual({'m1': {'restart': restartFlag}, 'm2': {'restart': restartFlag}});
-                 async.done();
-               });
-         }));
-    });
-
-  });
-}
-
-class MockMetric extends Metric {
-  _id: string;
-
-  constructor(id) {
-    super();
-    this._id = id;
-  }
-
-  beginMeasure(): Promise<string> { return PromiseWrapper.resolve(`${this._id}_beginMeasure`); }
-
-  endMeasure(restart: boolean): Promise<StringMap<string, any>> {
-    var result = {};
-    result[this._id] = {'restart': restart};
-    return PromiseWrapper.resolve(result);
-  }
-
-  describe(): StringMap<string, string> {
-    var result = {};
-    result[this._id] = 'describe';
-    return result;
-  }
-}
diff --git a/modules/benchpress/test/metric/perflog_metric_spec.ts b/modules/benchpress/test/metric/perflog_metric_spec.ts
deleted file mode 100644
index 2acc5be18ec7..000000000000
--- a/modules/benchpress/test/metric/perflog_metric_spec.ts
+++ /dev/null
@@ -1,676 +0,0 @@
-import {
-  afterEach,
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-import {isPresent, isBlank} from 'angular2/src/facade/lang';
-
-import {
-  Metric,
-  PerflogMetric,
-  WebDriverExtension,
-  PerfLogFeatures,
-  bind,
-  Injector,
-  Options
-} from 'benchpress/common';
-
-import {TraceEventFactory} from '../trace_event_factory';
-
-export function main() {
-  var commandLog: any[];
-  var eventFactory = new TraceEventFactory('timeline', 'pid0');
-
-  function createMetric(perfLogs, microMetrics = null, perfLogFeatures = null, forceGc = null,
-                        captureFrames = null) {
-    commandLog = [];
-    if (isBlank(perfLogFeatures)) {
-      perfLogFeatures = new PerfLogFeatures({render: true, gc: true, frameCapture: true});
-    }
-    if (isBlank(microMetrics)) {
-      microMetrics = StringMapWrapper.create();
-    }
-    var bindings = [
-      Options.DEFAULT_BINDINGS,
-      PerflogMetric.BINDINGS,
-      bind(Options.MICRO_METRICS).toValue(microMetrics),
-      bind(PerflogMetric.SET_TIMEOUT)
-          .toValue((fn, millis) => {
-            commandLog.push(['setTimeout', millis]);
-            fn();
-          }),
-      bind(WebDriverExtension)
-          .toValue(new MockDriverExtension(perfLogs, commandLog, perfLogFeatures))
-    ];
-    if (isPresent(forceGc)) {
-      bindings.push(bind(Options.FORCE_GC).toValue(forceGc));
-    }
-    if (isPresent(captureFrames)) {
-      bindings.push(bind(Options.CAPTURE_FRAMES).toValue(captureFrames));
-    }
-    return Injector.resolveAndCreate(bindings).get(PerflogMetric);
-  }
-
-  describe('perflog metric', () => {
-
-    function sortedKeys(stringMap) {
-      var res = [];
-      StringMapWrapper.forEach(stringMap, (_, key) => { res.push(key); });
-      res.sort();
-      return res;
-    }
-
-    it('should describe itself based on the perfLogFeatrues', () => {
-      expect(sortedKeys(createMetric([[]], null, new PerfLogFeatures()).describe()))
-          .toEqual(['pureScriptTime', 'scriptTime']);
-
-      expect(sortedKeys(createMetric([[]], null, new PerfLogFeatures({render: true, gc: false}))
-                            .describe()))
-          .toEqual(['pureScriptTime', 'renderTime', 'scriptTime']);
-
-      expect(sortedKeys(createMetric([[]]).describe()))
-          .toEqual(
-              ['gcAmount', 'gcTime', 'majorGcTime', 'pureScriptTime', 'renderTime', 'scriptTime']);
-
-      expect(
-          sortedKeys(createMetric([[]], null, new PerfLogFeatures({render: true, gc: true}), true)
-                         .describe()))
-          .toEqual([
-            'forcedGcAmount',
-            'forcedGcTime',
-            'gcAmount',
-            'gcTime',
-            'majorGcTime',
-            'pureScriptTime',
-            'renderTime',
-            'scriptTime'
-          ]);
-    });
-
-    it('should describe itself based on micro metrics', () => {
-      var description = createMetric([[]], {'myMicroMetric': 'someDesc'}).describe();
-      expect(description['myMicroMetric']).toEqual('someDesc');
-    });
-
-    it('should describe itself if frame capture is requested and available', () => {
-      var description =
-          createMetric([[]], null, new PerfLogFeatures({frameCapture: true}), null, true)
-              .describe();
-      expect(description['frameTime.mean']).not.toContain('WARNING');
-      expect(description['frameTime.best']).not.toContain('WARNING');
-      expect(description['frameTime.worst']).not.toContain('WARNING');
-      expect(description['frameTime.smooth']).not.toContain('WARNING');
-    });
-
-    it('should describe itself if frame capture is requested and not available', () => {
-      var description =
-          createMetric([[]], null, new PerfLogFeatures({frameCapture: false}), null, true)
-              .describe();
-      expect(description['frameTime.mean']).toContain('WARNING');
-      expect(description['frameTime.best']).toContain('WARNING');
-      expect(description['frameTime.worst']).toContain('WARNING');
-      expect(description['frameTime.smooth']).toContain('WARNING');
-    });
-
-    describe('beginMeasure', () => {
-
-      it('should not force gc and mark the timeline', inject([AsyncTestCompleter], (async) => {
-           var metric = createMetric([[]]);
-           metric.beginMeasure().then((_) => {
-             expect(commandLog).toEqual([['timeBegin', 'benchpress0']]);
-
-             async.done();
-           });
-         }));
-
-      it('should force gc and mark the timeline', inject([AsyncTestCompleter], (async) => {
-           var metric = createMetric([[]], null, null, true);
-           metric.beginMeasure().then((_) => {
-             expect(commandLog).toEqual([['gc'], ['timeBegin', 'benchpress0']]);
-
-             async.done();
-           });
-         }));
-
-    });
-
-    describe('endMeasure', () => {
-
-      it('should mark and aggregate events in between the marks',
-         inject([AsyncTestCompleter], (async) => {
-           var events = [
-             [
-               eventFactory.markStart('benchpress0', 0),
-               eventFactory.start('script', 4),
-               eventFactory.end('script', 6),
-               eventFactory.markEnd('benchpress0', 10)
-             ]
-           ];
-           var metric = createMetric(events);
-           metric.beginMeasure()
-               .then((_) => metric.endMeasure(false))
-               .then((data) => {
-                 expect(commandLog)
-                     .toEqual([
-                       ['timeBegin', 'benchpress0'],
-                       ['timeEnd', 'benchpress0', null],
-                       'readPerfLog'
-                     ]);
-                 expect(data['scriptTime']).toBe(2);
-
-                 async.done();
-               });
-         }));
-
-      it('should restart timing', inject([AsyncTestCompleter], (async) => {
-           var events = [
-             [
-               eventFactory.markStart('benchpress0', 0),
-               eventFactory.markEnd('benchpress0', 1),
-               eventFactory.markStart('benchpress1', 2),
-             ],
-             [eventFactory.markEnd('benchpress1', 3)]
-           ];
-           var metric = createMetric(events);
-           metric.beginMeasure()
-               .then((_) => metric.endMeasure(true))
-               .then((_) => metric.endMeasure(true))
-               .then((_) => {
-                 expect(commandLog)
-                     .toEqual([
-                       ['timeBegin', 'benchpress0'],
-                       ['timeEnd', 'benchpress0', 'benchpress1'],
-                       'readPerfLog',
-                       ['timeEnd', 'benchpress1', 'benchpress2'],
-                       'readPerfLog'
-                     ]);
-
-                 async.done();
-               });
-         }));
-
-      it('should loop and aggregate until the end mark is present',
-         inject([AsyncTestCompleter], (async) => {
-           var events = [
-             [eventFactory.markStart('benchpress0', 0), eventFactory.start('script', 1)],
-             [eventFactory.end('script', 2)],
-             [
-               eventFactory.start('script', 3),
-               eventFactory.end('script', 5),
-               eventFactory.markEnd('benchpress0', 10)
-             ]
-           ];
-           var metric = createMetric(events);
-           metric.beginMeasure()
-               .then((_) => metric.endMeasure(false))
-               .then((data) => {
-                 expect(commandLog)
-                     .toEqual([
-                       ['timeBegin', 'benchpress0'],
-                       ['timeEnd', 'benchpress0', null],
-                       'readPerfLog',
-                       ['setTimeout', 100],
-                       'readPerfLog',
-                       ['setTimeout', 100],
-                       'readPerfLog'
-                     ]);
-                 expect(data['scriptTime']).toBe(3);
-
-                 async.done();
-               });
-         }));
-
-      it('should store events after the end mark for the next call',
-         inject([AsyncTestCompleter], (async) => {
-           var events = [
-             [
-               eventFactory.markStart('benchpress0', 0),
-               eventFactory.markEnd('benchpress0', 1),
-               eventFactory.markStart('benchpress1', 1),
-               eventFactory.start('script', 1),
-               eventFactory.end('script', 2)
-             ],
-             [
-               eventFactory.start('script', 3),
-               eventFactory.end('script', 5),
-               eventFactory.markEnd('benchpress1', 6)
-             ]
-           ];
-           var metric = createMetric(events);
-           metric.beginMeasure()
-               .then((_) => metric.endMeasure(true))
-               .then((data) => {
-                 expect(data['scriptTime']).toBe(0);
-                 return metric.endMeasure(true)
-               })
-               .then((data) => {
-                 expect(commandLog)
-                     .toEqual([
-                       ['timeBegin', 'benchpress0'],
-                       ['timeEnd', 'benchpress0', 'benchpress1'],
-                       'readPerfLog',
-                       ['timeEnd', 'benchpress1', 'benchpress2'],
-                       'readPerfLog'
-                     ]);
-                 expect(data['scriptTime']).toBe(3);
-
-                 async.done();
-               });
-         }));
-
-      describe('with forced gc', () => {
-        var events;
-        beforeEach(() => {
-          events = [
-            [
-              eventFactory.markStart('benchpress0', 0),
-              eventFactory.start('script', 4),
-              eventFactory.end('script', 6),
-              eventFactory.markEnd('benchpress0', 10),
-              eventFactory.markStart('benchpress1', 11),
-              eventFactory.start('gc', 12, {'usedHeapSize': 2500}),
-              eventFactory.end('gc', 15, {'usedHeapSize': 1000}),
-              eventFactory.markEnd('benchpress1', 20)
-            ]
-          ];
-        });
-
-        it('should measure forced gc', inject([AsyncTestCompleter], (async) => {
-             var metric = createMetric(events, null, null, true);
-             metric.beginMeasure()
-                 .then((_) => metric.endMeasure(false))
-                 .then((data) => {
-                   expect(commandLog)
-                       .toEqual([
-                         ['gc'],
-                         ['timeBegin', 'benchpress0'],
-                         ['timeEnd', 'benchpress0', 'benchpress1'],
-                         'readPerfLog',
-                         ['gc'],
-                         ['timeEnd', 'benchpress1', null],
-                         'readPerfLog'
-                       ]);
-                   expect(data['forcedGcTime']).toBe(3);
-                   expect(data['forcedGcAmount']).toBe(1.5);
-
-                   async.done();
-                 });
-           }));
-
-        it('should restart after the forced gc if needed', inject([AsyncTestCompleter], (async) => {
-             var metric = createMetric(events, null, null, true);
-             metric.beginMeasure()
-                 .then((_) => metric.endMeasure(true))
-                 .then((data) => {
-                   expect(commandLog[5]).toEqual(['timeEnd', 'benchpress1', 'benchpress2']);
-
-                   async.done();
-                 });
-           }));
-
-      });
-
-    });
-
-    describe('aggregation', () => {
-
-      function aggregate(events: any[], microMetrics = null, captureFrames = null) {
-        ListWrapper.insert(events, 0, eventFactory.markStart('benchpress0', 0));
-        events.push(eventFactory.markEnd('benchpress0', 10));
-        var metric = createMetric([events], microMetrics, null, null, captureFrames);
-        return metric.beginMeasure().then((_) => metric.endMeasure(false));
-      }
-
-      describe('frame metrics', () => {
-        it('should calculate mean frame time', inject([AsyncTestCompleter], (async) => {
-             aggregate(
-                 [
-                   eventFactory.markStart('frameCapture', 0),
-                   eventFactory.instant('frame', 1),
-                   eventFactory.instant('frame', 3),
-                   eventFactory.instant('frame', 4),
-                   eventFactory.markEnd('frameCapture', 5)
-                 ],
-                 null, true)
-                 .then((data) => {
-                   expect(data['frameTime.mean']).toBe(((3 - 1) + (4 - 3)) / 2);
-                   async.done();
-                 });
-           }));
-
-        it('should throw if no start event', inject([AsyncTestCompleter], (async) => {
-             PromiseWrapper.catchError(
-                 aggregate(
-                     [eventFactory.instant('frame', 4), eventFactory.markEnd('frameCapture', 5)],
-                     null, true),
-                 (err) => {
-                   expect(() => { throw err; })
-                       .toThrowError('missing start event for frame capture');
-                   async.done();
-                 });
-           }));
-
-        it('should throw if no end event', inject([AsyncTestCompleter], (async) => {
-             PromiseWrapper.catchError(
-                 aggregate(
-                     [eventFactory.markStart('frameCapture', 3), eventFactory.instant('frame', 4)],
-                     null, true),
-                 (err) => {
-                   expect(() => { throw err; }).toThrowError('missing end event for frame capture');
-                   async.done();
-                 });
-           }));
-
-        it('should throw if trying to capture twice', inject([AsyncTestCompleter], (async) => {
-             PromiseWrapper.catchError(
-                 aggregate(
-                     [
-                       eventFactory.markStart('frameCapture', 3),
-                       eventFactory.markStart('frameCapture', 4)
-                     ],
-                     null, true),
-                 (err) => {
-                   expect(() => { throw err; })
-                       .toThrowError('can capture frames only once per benchmark run');
-                   async.done();
-                 });
-           }));
-
-        it('should throw if trying to capture when frame capture is disabled',
-           inject([AsyncTestCompleter], (async) => {
-             PromiseWrapper.catchError(aggregate([eventFactory.markStart('frameCapture', 3)]), (err) => {
-               expect(() => { throw err; })
-                   .toThrowError(
-                       'found start event for frame capture, but frame capture was not requested in benchpress');
-               async.done();
-             });
-           }));
-
-        it('should throw if frame capture is enabled, but nothing is captured',
-           inject([AsyncTestCompleter], (async) => {
-             PromiseWrapper.catchError(aggregate([], null, true), (err) => {
-               expect(() => { throw err; })
-                   .toThrowError(
-                       'frame capture requested in benchpress, but no start event was found');
-               async.done();
-             });
-           }));
-
-        it('should calculate best and worst frame time', inject([AsyncTestCompleter], (async) => {
-             aggregate(
-                 [
-                   eventFactory.markStart('frameCapture', 0),
-                   eventFactory.instant('frame', 1),
-                   eventFactory.instant('frame', 9),
-                   eventFactory.instant('frame', 15),
-                   eventFactory.instant('frame', 18),
-                   eventFactory.instant('frame', 28),
-                   eventFactory.instant('frame', 32),
-                   eventFactory.markEnd('frameCapture', 10)
-                 ],
-                 null, true)
-                 .then((data) => {
-                   expect(data['frameTime.worst']).toBe(10);
-                   expect(data['frameTime.best']).toBe(3);
-                   async.done();
-                 });
-           }));
-
-        it('should calculate percentage of smoothness to be good',
-           inject([AsyncTestCompleter], (async) => {
-             aggregate(
-                 [
-                   eventFactory.markStart('frameCapture', 0),
-                   eventFactory.instant('frame', 1),
-                   eventFactory.instant('frame', 2),
-                   eventFactory.instant('frame', 3),
-                   eventFactory.markEnd('frameCapture', 4)
-                 ],
-                 null, true)
-                 .then((data) => {
-                   expect(data['frameTime.smooth']).toBe(1.0);
-                   async.done();
-                 });
-           }));
-
-        it('should calculate percentage of smoothness to be bad',
-           inject([AsyncTestCompleter], (async) => {
-             aggregate(
-                 [
-                   eventFactory.markStart('frameCapture', 0),
-                   eventFactory.instant('frame', 1),
-                   eventFactory.instant('frame', 2),
-                   eventFactory.instant('frame', 22),
-                   eventFactory.instant('frame', 23),
-                   eventFactory.instant('frame', 24),
-                   eventFactory.markEnd('frameCapture', 4)
-                 ],
-                 null, true)
-                 .then((data) => {
-                   expect(data['frameTime.smooth']).toBe(0.75);
-                   async.done();
-                 });
-           }));
-
-      });
-
-      it('should report a single interval', inject([AsyncTestCompleter], (async) => {
-           aggregate([eventFactory.start('script', 0), eventFactory.end('script', 5)])
-               .then((data) => {
-                 expect(data['scriptTime']).toBe(5);
-                 async.done();
-               });
-         }));
-
-      it('should sum up multiple intervals', inject([AsyncTestCompleter], (async) => {
-           aggregate([
-             eventFactory.start('script', 0),
-             eventFactory.end('script', 5),
-             eventFactory.start('script', 10),
-             eventFactory.end('script', 17)
-           ])
-               .then((data) => {
-                 expect(data['scriptTime']).toBe(12);
-                 async.done();
-               });
-         }));
-
-      it('should ignore not started intervals', inject([AsyncTestCompleter], (async) => {
-           aggregate([eventFactory.end('script', 10)])
-               .then((data) => {
-                 expect(data['scriptTime']).toBe(0);
-                 async.done();
-               });
-         }));
-
-      it('should ignore not ended intervals', inject([AsyncTestCompleter], (async) => {
-           aggregate([eventFactory.start('script', 10)])
-               .then((data) => {
-                 expect(data['scriptTime']).toBe(0);
-                 async.done();
-               });
-         }));
-
-      it('should ignore nested intervals', inject([AsyncTestCompleter], (async) => {
-           aggregate([
-             eventFactory.start('script', 0),
-             eventFactory.start('script', 5),
-             eventFactory.end('script', 10),
-             eventFactory.end('script', 17)
-           ])
-               .then((data) => {
-                 expect(data['scriptTime']).toBe(17);
-                 async.done();
-               });
-         }));
-
-      it('should ignore events from different processed as the start mark',
-         inject([AsyncTestCompleter], (async) => {
-           var otherProcessEventFactory = new TraceEventFactory('timeline', 'pid1');
-           var metric = createMetric([
-             [
-               eventFactory.markStart('benchpress0', 0),
-               eventFactory.start('script', 0, null),
-               eventFactory.end('script', 5, null),
-               otherProcessEventFactory.start('script', 10, null),
-               otherProcessEventFactory.end('script', 17, null),
-               eventFactory.markEnd('benchpress0', 20)
-             ]
-           ]);
-           metric.beginMeasure()
-               .then((_) => metric.endMeasure(false))
-               .then((data) => {
-                 expect(data['scriptTime']).toBe(5);
-                 async.done();
-               });
-         }));
-
-      it('should support scriptTime metric', inject([AsyncTestCompleter], (async) => {
-           aggregate([eventFactory.start('script', 0), eventFactory.end('script', 5)])
-               .then((data) => {
-                 expect(data['scriptTime']).toBe(5);
-                 async.done();
-               });
-         }));
-
-      it('should support renderTime metric', inject([AsyncTestCompleter], (async) => {
-           aggregate([eventFactory.start('render', 0), eventFactory.end('render', 5)])
-               .then((data) => {
-                 expect(data['renderTime']).toBe(5);
-                 async.done();
-               });
-         }));
-
-      it('should support gcTime/gcAmount metric', inject([AsyncTestCompleter], (async) => {
-           aggregate([
-             eventFactory.start('gc', 0, {'usedHeapSize': 2500}),
-             eventFactory.end('gc', 5, {'usedHeapSize': 1000})
-           ])
-               .then((data) => {
-                 expect(data['gcTime']).toBe(5);
-                 expect(data['gcAmount']).toBe(1.5);
-                 expect(data['majorGcTime']).toBe(0);
-                 async.done();
-               });
-         }));
-
-      it('should support majorGcTime metric', inject([AsyncTestCompleter], (async) => {
-           aggregate([
-             eventFactory.start('gc', 0, {'usedHeapSize': 2500}),
-             eventFactory.end('gc', 5, {'usedHeapSize': 1000, 'majorGc': true})
-           ])
-               .then((data) => {
-                 expect(data['gcTime']).toBe(5);
-                 expect(data['majorGcTime']).toBe(5);
-                 async.done();
-               });
-         }));
-
-      it('should support pureScriptTime = scriptTime-gcTime-renderTime',
-         inject([AsyncTestCompleter], (async) => {
-           aggregate([
-             eventFactory.start('script', 0),
-             eventFactory.start('gc', 1, {'usedHeapSize': 1000}),
-             eventFactory.end('gc', 4, {'usedHeapSize': 0}),
-             eventFactory.start('render', 4),
-             eventFactory.end('render', 5),
-             eventFactory.end('script', 6)
-           ])
-               .then((data) => {
-                 expect(data['scriptTime']).toBe(6);
-                 expect(data['pureScriptTime']).toBe(2);
-                 async.done();
-               });
-         }));
-
-      describe('microMetrics', () => {
-
-        it('should report micro metrics', inject([AsyncTestCompleter], (async) => {
-             aggregate(
-                 [
-                   eventFactory.markStart('mm1', 0),
-                   eventFactory.markEnd('mm1', 5),
-                 ],
-                 {'mm1': 'micro metric 1'})
-                 .then((data) => {
-                   expect(data['mm1']).toBe(5.0);
-                   async.done();
-                 });
-           }));
-
-        it('should ignore micro metrics that were not specified',
-           inject([AsyncTestCompleter], (async) => {
-             aggregate([
-               eventFactory.markStart('mm1', 0),
-               eventFactory.markEnd('mm1', 5),
-             ])
-                 .then((data) => {
-                   expect(data['mm1']).toBeFalsy();
-                   async.done();
-                 });
-           }));
-
-        it('should report micro metric averages', inject([AsyncTestCompleter], (async) => {
-             aggregate(
-                 [
-                   eventFactory.markStart('mm1*20', 0),
-                   eventFactory.markEnd('mm1*20', 5),
-                 ],
-                 {'mm1': 'micro metric 1'})
-                 .then((data) => {
-                   expect(data['mm1']).toBe(5 / 20);
-                   async.done();
-                 });
-           }));
-
-      });
-
-    });
-
-  });
-}
-
-class MockDriverExtension extends WebDriverExtension {
-  constructor(private _perfLogs: List<any>, private _commandLog: List<any>,
-              private _perfLogFeatures: PerfLogFeatures) {
-    super();
-  }
-
-  timeBegin(name): Promise<any> {
-    this._commandLog.push(['timeBegin', name]);
-    return PromiseWrapper.resolve(null);
-  }
-
-  timeEnd(name, restartName): Promise<any> {
-    this._commandLog.push(['timeEnd', name, restartName]);
-    return PromiseWrapper.resolve(null);
-  }
-
-  perfLogFeatures(): PerfLogFeatures { return this._perfLogFeatures; }
-
-  readPerfLog(): Promise<any> {
-    this._commandLog.push('readPerfLog');
-    if (this._perfLogs.length > 0) {
-      var next = this._perfLogs[0];
-      ListWrapper.removeAt(this._perfLogs, 0);
-      return PromiseWrapper.resolve(next);
-    } else {
-      return PromiseWrapper.resolve([]);
-    }
-  }
-
-  gc(): Promise<any> {
-    this._commandLog.push(['gc']);
-    return PromiseWrapper.resolve(null);
-  }
-}
diff --git a/modules/benchpress/test/reporter/console_reporter_spec.ts b/modules/benchpress/test/reporter/console_reporter_spec.ts
deleted file mode 100644
index 69631052e438..000000000000
--- a/modules/benchpress/test/reporter/console_reporter_spec.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {describe, ddescribe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-
-import {isBlank, isPresent, Date, DateWrapper} from 'angular2/src/facade/lang';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-
-import {
-  SampleState,
-  Reporter,
-  bind,
-  Injector,
-  ConsoleReporter,
-  SampleDescription,
-  MeasureValues
-} from 'benchpress/common';
-
-export function main() {
-  describe('console reporter', () => {
-    var reporter;
-    var log: string[];
-
-    function createReporter({columnWidth = null, sampleId = null, descriptions = null,
-                             metrics = null}: {columnWidth?, sampleId?, descriptions?, metrics?}) {
-      log = [];
-      if (isBlank(descriptions)) {
-        descriptions = [];
-      }
-      if (isBlank(sampleId)) {
-        sampleId = 'null';
-      }
-      var bindings = [
-        ConsoleReporter.BINDINGS,
-        bind(SampleDescription).toValue(new SampleDescription(sampleId, descriptions, metrics)),
-        bind(ConsoleReporter.PRINT).toValue((line) => log.push(line))
-      ];
-      if (isPresent(columnWidth)) {
-        bindings.push(bind(ConsoleReporter.COLUMN_WIDTH).toValue(columnWidth));
-      }
-      reporter = Injector.resolveAndCreate(bindings).get(ConsoleReporter);
-    }
-
-    it('should print the sample id, description and table header', () => {
-      createReporter({
-        columnWidth: 8,
-        sampleId: 'someSample',
-        descriptions: [{'a': 1, 'b': 2}],
-        metrics: {'m1': 'some desc', 'm2': 'some other desc'}
-      });
-      expect(log).toEqual([
-        'BENCHMARK someSample',
-        'Description:',
-        '- a: 1',
-        '- b: 2',
-        'Metrics:',
-        '- m1: some desc',
-        '- m2: some other desc',
-        '',
-        '      m1 |       m2',
-        '-------- | --------',
-      ]);
-    });
-
-    it('should print a table row', () => {
-      createReporter({columnWidth: 8, metrics: {'a': '', 'b': ''}});
-      log = [];
-      reporter.reportMeasureValues(mv(0, 0, {'a': 1.23, 'b': 2}));
-      expect(log).toEqual(['    1.23 |     2.00']);
-    });
-
-    it('should print the table footer and stats when there is a valid sample', () => {
-      createReporter({columnWidth: 8, metrics: {'a': '', 'b': ''}});
-      log = [];
-      reporter.reportSample([], [mv(0, 0, {'a': 3, 'b': 6}), mv(1, 1, {'a': 5, 'b': 9})]);
-      expect(log).toEqual(['======== | ========', '4.00+-25% | 7.50+-20%']);
-    });
-
-    it('should print the coefficient of variation only when it is meaningful', () => {
-      createReporter({columnWidth: 8, metrics: {'a': '', 'b': ''}});
-      log = [];
-      reporter.reportSample([], [mv(0, 0, {'a': 3, 'b': 0}), mv(1, 1, {'a': 5, 'b': 0})]);
-      expect(log).toEqual(['======== | ========', '4.00+-25% |     0.00']);
-    });
-
-  });
-}
-
-function mv(runIndex, time, values) {
-  return new MeasureValues(runIndex, DateWrapper.fromMillis(time), values);
-}
diff --git a/modules/benchpress/test/reporter/json_file_reporter_spec.ts b/modules/benchpress/test/reporter/json_file_reporter_spec.ts
deleted file mode 100644
index 97d0d6a357d1..000000000000
--- a/modules/benchpress/test/reporter/json_file_reporter_spec.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
-  afterEach,
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {DateWrapper, Json, RegExpWrapper, isPresent} from 'angular2/src/facade/lang';
-import {PromiseWrapper} from 'angular2/src/facade/async';
-
-import {bind, Injector, SampleDescription, MeasureValues, Options} from 'benchpress/common';
-
-
-import {JsonFileReporter} from 'benchpress/src/reporter/json_file_reporter';
-
-export function main() {
-  describe('file reporter', () => {
-    var loggedFile;
-
-    function createReporter({sampleId, descriptions, metrics, path}) {
-      var bindings = [
-        JsonFileReporter.BINDINGS,
-        bind(SampleDescription).toValue(new SampleDescription(sampleId, descriptions, metrics)),
-        bind(JsonFileReporter.PATH).toValue(path),
-        bind(Options.NOW).toValue(() => DateWrapper.fromMillis(1234)),
-        bind(Options.WRITE_FILE)
-            .toValue((filename, content) => {
-              loggedFile = {'filename': filename, 'content': content};
-              return PromiseWrapper.resolve(null);
-            })
-      ];
-      return Injector.resolveAndCreate(bindings).get(JsonFileReporter);
-    }
-
-    it('should write all data into a file', inject([AsyncTestCompleter], (async) => {
-         createReporter({
-           sampleId: 'someId',
-           descriptions: [{'a': 2}],
-           path: 'somePath',
-           metrics: {'script': 'script time'}
-         })
-             .reportSample([mv(0, 0, {'a': 3, 'b': 6})],
-                           [mv(0, 0, {'a': 3, 'b': 6}), mv(1, 1, {'a': 5, 'b': 9})]);
-         var regExp = RegExpWrapper.create('somePath/someId_\\d+\\.json');
-         expect(isPresent(RegExpWrapper.firstMatch(regExp, loggedFile['filename']))).toBe(true);
-         var parsedContent = Json.parse(loggedFile['content']);
-         expect(parsedContent)
-             .toEqual({
-               "description":
-                   {"id": "someId", "description": {"a": 2}, "metrics": {"script": "script time"}},
-               "completeSample": [
-                 {
-                   "timeStamp": "1970-01-01T00:00:00.000Z",
-                   "runIndex": 0,
-                   "values": {"a": 3, "b": 6}
-                 }
-               ],
-               "validSample": [
-                 {
-                   "timeStamp": "1970-01-01T00:00:00.000Z",
-                   "runIndex": 0,
-                   "values": {"a": 3, "b": 6}
-                 },
-                 {
-                   "timeStamp": "1970-01-01T00:00:00.001Z",
-                   "runIndex": 1,
-                   "values": {"a": 5, "b": 9}
-                 }
-               ]
-             });
-         async.done();
-       }));
-
-  });
-}
-
-function mv(runIndex, time, values) {
-  return new MeasureValues(runIndex, DateWrapper.fromMillis(time), values);
-}
diff --git a/modules/benchpress/test/reporter/multi_reporter_spec.ts b/modules/benchpress/test/reporter/multi_reporter_spec.ts
deleted file mode 100644
index 85cc3f0445fd..000000000000
--- a/modules/benchpress/test/reporter/multi_reporter_spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-  afterEach,
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {List, ListWrapper, StringMap} from 'angular2/src/facade/collection';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-import {DateWrapper} from 'angular2/src/facade/lang';
-
-import {Reporter, MultiReporter, bind, Injector, MeasureValues} from 'benchpress/common';
-
-export function main() {
-  function createReporters(ids) {
-    var r = Injector.resolveAndCreate([
-                      ListWrapper.map(ids, (id) => bind(id).toValue(new MockReporter(id))),
-                      MultiReporter.createBindings(ids)
-                    ])
-                .get(MultiReporter);
-    return PromiseWrapper.resolve(r);
-  }
-
-  describe('multi reporter', () => {
-
-    it('should reportMeasureValues to all', inject([AsyncTestCompleter], (async) => {
-         var mv = new MeasureValues(0, DateWrapper.now(), {});
-         createReporters(['m1', 'm2'])
-             .then((r) => r.reportMeasureValues(mv))
-             .then((values) => {
-
-               expect(values).toEqual([{'id': 'm1', 'values': mv}, {'id': 'm2', 'values': mv}]);
-               async.done();
-             });
-       }));
-
-    it('should reportSample to call', inject([AsyncTestCompleter], (async) => {
-         var completeSample = [
-           new MeasureValues(0, DateWrapper.now(), {}),
-           new MeasureValues(1, DateWrapper.now(), {})
-         ];
-         var validSample = [completeSample[1]];
-
-         createReporters(['m1', 'm2'])
-             .then((r) => r.reportSample(completeSample, validSample))
-             .then((values) => {
-
-               expect(values).toEqual([
-                 {'id': 'm1', 'completeSample': completeSample, 'validSample': validSample},
-                 {'id': 'm2', 'completeSample': completeSample, 'validSample': validSample}
-               ]);
-               async.done();
-             })
-       }));
-
-  });
-}
-
-class MockReporter extends Reporter {
-  constructor(private _id: string) { super(); }
-
-  reportMeasureValues(values: MeasureValues): Promise<StringMap<string, any>> {
-    return PromiseWrapper.resolve({'id': this._id, 'values': values});
-  }
-
-  reportSample(completeSample: List<MeasureValues>,
-               validSample: List<MeasureValues>): Promise<StringMap<string, any>> {
-    return PromiseWrapper.resolve(
-        {'id': this._id, 'completeSample': completeSample, 'validSample': validSample});
-  }
-}
diff --git a/modules/benchpress/test/runner_spec.ts b/modules/benchpress/test/runner_spec.ts
deleted file mode 100644
index db0e3814f417..000000000000
--- a/modules/benchpress/test/runner_spec.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import {
-  afterEach,
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-import {
-  Runner,
-  Sampler,
-  SampleDescription,
-  Validator,
-  bind,
-  Injector,
-  Metric,
-  Options,
-  WebDriverAdapter,
-  SampleState
-} from 'benchpress/common';
-import {isBlank} from 'angular2/src/facade/lang';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-
-export function main() {
-  describe('runner', () => {
-    var injector: Injector;
-    var runner;
-
-    function createRunner(defaultBindings = null) {
-      if (isBlank(defaultBindings)) {
-        defaultBindings = [];
-      }
-      runner = new Runner([
-        defaultBindings,
-        bind(Sampler).toFactory(
-            (_injector) => {
-              injector = _injector;
-              return new MockSampler();
-            },
-            [Injector]),
-        bind(Metric).toFactory(() => new MockMetric(), []),
-        bind(Validator).toFactory(() => new MockValidator(), []),
-        bind(WebDriverAdapter).toFactory(() => new MockWebDriverAdapter(), [])
-      ]);
-      return runner;
-    }
-
-    it('should set SampleDescription.id', inject([AsyncTestCompleter], (async) => {
-         createRunner()
-             .sample({id: 'someId'})
-             .then((_) => injector.get(SampleDescription))
-             .then((desc) => {
-               expect(desc.id).toBe('someId');
-               async.done();
-             });
-       }));
-
-    it('should merge SampleDescription.description', inject([AsyncTestCompleter], (async) => {
-         createRunner([bind(Options.DEFAULT_DESCRIPTION).toValue({'a': 1})])
-             .sample({id: 'someId', bindings: [bind(Options.SAMPLE_DESCRIPTION).toValue({'b': 2})]})
-             .then((_) => injector.get(SampleDescription))
-             .then((desc) => {
-               expect(desc.description)
-                   .toEqual(
-                       {'forceGc': false, 'userAgent': 'someUserAgent', 'a': 1, 'b': 2, 'v': 11});
-               async.done();
-             });
-       }));
-
-    it('should fill SampleDescription.metrics from the Metric',
-       inject([AsyncTestCompleter], (async) => {
-         createRunner()
-             .sample({id: 'someId'})
-             .then((_) => injector.get(SampleDescription))
-             .then((desc) => {
-
-               expect(desc.metrics).toEqual({'m1': 'some metric'});
-               async.done();
-             });
-       }));
-
-    it('should bind Options.EXECUTE', inject([AsyncTestCompleter], (async) => {
-         var execute = () => {};
-         createRunner()
-             .sample({id: 'someId', execute: execute})
-             .then((_) => {
-               expect(injector.get(Options.EXECUTE)).toEqual(execute);
-               async.done();
-             });
-       }));
-
-    it('should bind Options.PREPARE', inject([AsyncTestCompleter], (async) => {
-         var prepare = () => {};
-         createRunner()
-             .sample({id: 'someId', prepare: prepare})
-             .then((_) => {
-               expect(injector.get(Options.PREPARE)).toEqual(prepare);
-               async.done();
-             });
-       }));
-
-    it('should bind Options.MICRO_METRICS', inject([AsyncTestCompleter], (async) => {
-         createRunner()
-             .sample({id: 'someId', microMetrics: {'a': 'b'}})
-             .then((_) => {
-               expect(injector.get(Options.MICRO_METRICS)).toEqual({'a': 'b'});
-               async.done();
-             });
-       }));
-
-    it('should overwrite bindings per sample call', inject([AsyncTestCompleter], (async) => {
-         createRunner([
-           bind(Options.DEFAULT_DESCRIPTION)
-               .toValue({'a': 1}),
-         ])
-             .sample({
-               id: 'someId',
-               bindings: [
-                 bind(Options.DEFAULT_DESCRIPTION)
-                     .toValue({'a': 2}),
-               ]
-             })
-             .then((_) => injector.get(SampleDescription))
-             .then((desc) => {
-
-               expect(desc.description['a']).toBe(2);
-               async.done();
-             });
-
-       }));
-
-  });
-}
-
-class MockWebDriverAdapter extends WebDriverAdapter {
-  executeScript(script): Promise<string> { return PromiseWrapper.resolve('someUserAgent'); }
-  capabilities() { return null; }
-}
-
-class MockValidator extends Validator {
-  constructor() { super(); }
-  describe() { return {'v': 11}; }
-}
-
-class MockMetric extends Metric {
-  constructor() { super(); }
-  describe() { return {'m1': 'some metric'}; }
-}
-
-class MockSampler extends Sampler {
-  constructor() { super(); }
-  sample(): Promise<SampleState> { return PromiseWrapper.resolve(23); }
-}
diff --git a/modules/benchpress/test/sampler_spec.ts b/modules/benchpress/test/sampler_spec.ts
deleted file mode 100644
index 4720a28a4e54..000000000000
--- a/modules/benchpress/test/sampler_spec.ts
+++ /dev/null
@@ -1,327 +0,0 @@
-import {
-  afterEach,
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {
-  isBlank,
-  isPresent,
-  BaseException,
-  stringify,
-  Date,
-  DateWrapper
-} from 'angular2/src/facade/lang';
-import {ListWrapper, List} from 'angular2/src/facade/collection';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-
-import {
-  Sampler,
-  WebDriverAdapter,
-  Validator,
-  Metric,
-  Reporter,
-  bind,
-  Injector,
-  Options,
-  MeasureValues
-} from 'benchpress/common';
-
-export function main() {
-  var EMPTY_EXECUTE = () => {};
-
-  describe('sampler', () => {
-    var sampler;
-
-    function createSampler({driver, metric, reporter, validator, prepare, execute}: {
-      driver?: any,
-      metric?: Metric,
-      reporter?: Reporter,
-      validator?: Validator,
-      prepare?: any,
-      execute?: any
-    } = {}) {
-      var time = 1000;
-      if (isBlank(metric)) {
-        metric = new MockMetric([]);
-      }
-      if (isBlank(reporter)) {
-        reporter = new MockReporter([]);
-      }
-      if (isBlank(driver)) {
-        driver = new MockDriverAdapter([]);
-      }
-      var bindings = [
-        Options.DEFAULT_BINDINGS,
-        Sampler.BINDINGS,
-        bind(Metric).toValue(metric),
-        bind(Reporter).toValue(reporter),
-        bind(WebDriverAdapter).toValue(driver),
-        bind(Options.EXECUTE).toValue(execute),
-        bind(Validator).toValue(validator),
-        bind(Options.NOW).toValue(() => DateWrapper.fromMillis(time++))
-      ];
-      if (isPresent(prepare)) {
-        bindings.push(bind(Options.PREPARE).toValue(prepare));
-      }
-
-      sampler = Injector.resolveAndCreate(bindings).get(Sampler);
-    }
-
-    it('should call the prepare and execute callbacks using WebDriverAdapter.waitFor',
-       inject([AsyncTestCompleter], (async) => {
-         var log = [];
-         var count = 0;
-         var driver = new MockDriverAdapter([], (callback) => {
-           var result = callback();
-           log.push(result);
-           return PromiseWrapper.resolve(result);
-         });
-         createSampler({
-           driver: driver,
-           validator: createCountingValidator(2),
-           prepare: () => { return count++; },
-           execute: () => { return count++; }
-         });
-         sampler.sample().then((_) => {
-           expect(count).toBe(4);
-           expect(log).toEqual([0, 1, 2, 3]);
-           async.done();
-         });
-
-       }));
-
-    it('should call prepare, beginMeasure, execute, endMeasure for every iteration',
-       inject([AsyncTestCompleter], (async) => {
-         var workCount = 0;
-         var log = [];
-         createSampler({
-           metric: createCountingMetric(log),
-           validator: createCountingValidator(2),
-           prepare: () => { log.push(`p${workCount++}`); },
-           execute: () => { log.push(`w${workCount++}`); }
-         });
-         sampler.sample().then((_) => {
-           expect(log).toEqual([
-             'p0',
-             ['beginMeasure'],
-             'w1',
-             ['endMeasure', false, {'script': 0}],
-             'p2',
-             ['beginMeasure'],
-             'w3',
-             ['endMeasure', false, {'script': 1}],
-           ]);
-           async.done();
-         });
-       }));
-
-    it('should call execute, endMeasure for every iteration if there is no prepare callback',
-       inject([AsyncTestCompleter], (async) => {
-         var log = [];
-         var workCount = 0;
-         createSampler({
-           metric: createCountingMetric(log),
-           validator: createCountingValidator(2),
-           execute: () => { log.push(`w${workCount++}`); },
-           prepare: null
-         });
-         sampler.sample().then((_) => {
-           expect(log).toEqual([
-             ['beginMeasure'],
-             'w0',
-             ['endMeasure', true, {'script': 0}],
-             'w1',
-             ['endMeasure', true, {'script': 1}],
-           ]);
-           async.done();
-         });
-       }));
-
-    it('should only collect metrics for execute and ignore metrics from prepare',
-       inject([AsyncTestCompleter], (async) => {
-         var scriptTime = 0;
-         var iterationCount = 1;
-         createSampler({
-           validator: createCountingValidator(2),
-           metric: new MockMetric([],
-                                  () => {
-                                    var result = PromiseWrapper.resolve({'script': scriptTime});
-                                    scriptTime = 0;
-                                    return result;
-                                  }),
-           prepare: () => { scriptTime = 1 * iterationCount; },
-           execute: () => {
-             scriptTime = 10 * iterationCount;
-             iterationCount++;
-           }
-         });
-         sampler.sample().then((state) => {
-           expect(state.completeSample.length).toBe(2);
-           expect(state.completeSample[0]).toEqual(mv(0, 1000, {'script': 10}));
-           expect(state.completeSample[1]).toEqual(mv(1, 1001, {'script': 20}));
-           async.done();
-         });
-       }));
-
-    it('should call the validator for every execution and store the valid sample',
-       inject([AsyncTestCompleter], (async) => {
-         var log = [];
-         var validSample = [{}];
-
-         createSampler({
-           metric: createCountingMetric(),
-           validator: createCountingValidator(2, validSample, log),
-           execute: EMPTY_EXECUTE
-         });
-         sampler.sample().then((state) => {
-           expect(state.validSample).toBe(validSample);
-           // TODO(tbosch): Why does this fail??
-           // expect(log).toEqual([
-           //   ['validate', [{'script': 0}], null],
-           //   ['validate', [{'script': 0}, {'script': 1}], validSample]
-           // ]);
-
-           expect(log.length).toBe(2);
-           expect(log[0]).toEqual(['validate', [mv(0, 1000, {'script': 0})], null]);
-           expect(log[1]).toEqual(
-               ['validate', [mv(0, 1000, {'script': 0}), mv(1, 1001, {'script': 1})], validSample]);
-
-           async.done();
-         });
-       }));
-
-    it('should report the metric values', inject([AsyncTestCompleter], (async) => {
-         var log = [];
-         var validSample = [{}];
-         createSampler({
-           validator: createCountingValidator(2, validSample),
-           metric: createCountingMetric(),
-           reporter: new MockReporter(log),
-           execute: EMPTY_EXECUTE
-         });
-         sampler.sample().then((_) => {
-           // TODO(tbosch): Why does this fail??
-           // expect(log).toEqual([
-           //   ['reportMeasureValues', 0, {'script': 0}],
-           //   ['reportMeasureValues', 1, {'script': 1}],
-           //   ['reportSample', [{'script': 0}, {'script': 1}], validSample]
-           // ]);
-           expect(log.length).toBe(3);
-           expect(log[0]).toEqual(['reportMeasureValues', mv(0, 1000, {'script': 0})]);
-           expect(log[1]).toEqual(['reportMeasureValues', mv(1, 1001, {'script': 1})]);
-           expect(log[2]).toEqual([
-             'reportSample',
-             [mv(0, 1000, {'script': 0}), mv(1, 1001, {'script': 1})],
-             validSample
-           ]);
-
-           async.done();
-         });
-       }));
-
-  });
-}
-
-function mv(runIndex, time, values) {
-  return new MeasureValues(runIndex, DateWrapper.fromMillis(time), values);
-}
-
-function createCountingValidator(count, validSample = null, log = null) {
-  return new MockValidator(log, (completeSample) => {
-    count--;
-    if (count === 0) {
-      return isPresent(validSample) ? validSample : completeSample;
-    } else {
-      return null;
-    }
-  });
-}
-
-function createCountingMetric(log = null) {
-  var scriptTime = 0;
-  return new MockMetric(log, () => { return {'script': scriptTime++}; });
-}
-
-class MockDriverAdapter extends WebDriverAdapter {
-  private _log: List<any>;
-  private _waitFor: Function;
-  constructor(log = null, waitFor = null) {
-    super();
-    if (isBlank(log)) {
-      log = [];
-    }
-    this._log = log;
-    this._waitFor = waitFor;
-  }
-  waitFor(callback: Function): Promise<any> {
-    if (isPresent(this._waitFor)) {
-      return this._waitFor(callback);
-    } else {
-      return PromiseWrapper.resolve(callback());
-    }
-  }
-}
-
-
-class MockValidator extends Validator {
-  private _log: List<any>;
-  constructor(log = null, private _validate: Function = null) {
-    super();
-    if (isBlank(log)) {
-      log = [];
-    }
-    this._log = log;
-  }
-  validate(completeSample: List<MeasureValues>): List<MeasureValues> {
-    var stableSample = isPresent(this._validate) ? this._validate(completeSample) : completeSample;
-    this._log.push(['validate', completeSample, stableSample]);
-    return stableSample;
-  }
-}
-
-class MockMetric extends Metric {
-  private _log: List<any>;
-  constructor(log = null, private _endMeasure: Function = null) {
-    super();
-    if (isBlank(log)) {
-      log = [];
-    }
-    this._log = log;
-  }
-  beginMeasure() {
-    this._log.push(['beginMeasure']);
-    return PromiseWrapper.resolve(null);
-  }
-  endMeasure(restart) {
-    var measureValues = isPresent(this._endMeasure) ? this._endMeasure() : {};
-    this._log.push(['endMeasure', restart, measureValues]);
-    return PromiseWrapper.resolve(measureValues);
-  }
-}
-
-class MockReporter extends Reporter {
-  _log: List<any>;
-  constructor(log = null) {
-    super();
-    if (isBlank(log)) {
-      log = [];
-    }
-    this._log = log;
-  }
-  reportMeasureValues(values): Promise<any> {
-    this._log.push(['reportMeasureValues', values]);
-    return PromiseWrapper.resolve(null);
-  }
-  reportSample(completeSample, validSample): Promise<any> {
-    this._log.push(['reportSample', completeSample, validSample]);
-    return PromiseWrapper.resolve(null);
-  }
-}
diff --git a/modules/benchpress/test/trace_event_factory.ts b/modules/benchpress/test/trace_event_factory.ts
deleted file mode 100644
index c7d074e55804..000000000000
--- a/modules/benchpress/test/trace_event_factory.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {isPresent} from 'angular2/src/facade/lang';
-
-export class TraceEventFactory {
-  private _cat: string;
-  private _pid;
-
-  constructor(cat, pid) {
-    this._cat = cat;
-    this._pid = pid;
-  }
-
-  create(ph, name, time, args = null) {
-    var res = {'name': name, 'cat': this._cat, 'ph': ph, 'ts': time, 'pid': this._pid};
-    if (isPresent(args)) {
-      res['args'] = args;
-    }
-    return res;
-  }
-
-  markStart(name, time) { return this.create('b', name, time); }
-
-  markEnd(name, time) { return this.create('e', name, time); }
-
-  start(name, time, args = null) { return this.create('B', name, time, args); }
-
-  end(name, time, args = null) { return this.create('E', name, time, args); }
-
-  instant(name, time, args = null) { return this.create('i', name, time, args); }
-
-  complete(name, time, duration, args = null) {
-    var res = this.create('X', name, time, args);
-    res['dur'] = duration;
-    return res;
-  }
-}
diff --git a/modules/benchpress/test/validator/regression_slope_validator_spec.ts b/modules/benchpress/test/validator/regression_slope_validator_spec.ts
deleted file mode 100644
index ec4c0a2a5b0e..000000000000
--- a/modules/benchpress/test/validator/regression_slope_validator_spec.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import {describe, ddescribe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-import {Date, DateWrapper} from 'angular2/src/facade/lang';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {
-  Validator,
-  RegressionSlopeValidator,
-  Injector,
-  bind,
-  MeasureValues
-} from 'benchpress/common';
-
-export function main() {
-  describe('regression slope validator', () => {
-    var validator;
-
-    function createValidator({size, metric}) {
-      validator = Injector.resolveAndCreate([
-                            RegressionSlopeValidator.BINDINGS,
-                            bind(RegressionSlopeValidator.METRIC).toValue(metric),
-                            bind(RegressionSlopeValidator.SAMPLE_SIZE).toValue(size)
-                          ])
-                      .get(RegressionSlopeValidator);
-    }
-
-    it('should return sampleSize and metric as description', () => {
-      createValidator({size: 2, metric: 'script'});
-      expect(validator.describe()).toEqual({'sampleSize': 2, 'regressionSlopeMetric': 'script'});
-    });
-
-    it('should return null while the completeSample is smaller than the given size', () => {
-      createValidator({size: 2, metric: 'script'});
-      expect(validator.validate([])).toBe(null);
-      expect(validator.validate([mv(0, 0, {})])).toBe(null);
-    });
-
-    it('should return null while the regression slope is < 0', () => {
-      createValidator({size: 2, metric: 'script'});
-      expect(validator.validate([mv(0, 0, {'script': 2}), mv(1, 1, {'script': 1})])).toBe(null);
-    });
-
-    it('should return the last sampleSize runs when the regression slope is ==0', () => {
-      createValidator({size: 2, metric: 'script'});
-      var sample = [mv(0, 0, {'script': 1}), mv(1, 1, {'script': 1}), mv(2, 2, {'script': 1})];
-      expect(validator.validate(ListWrapper.slice(sample, 0, 2)))
-          .toEqual(ListWrapper.slice(sample, 0, 2));
-      expect(validator.validate(sample)).toEqual(ListWrapper.slice(sample, 1, 3));
-    });
-
-    it('should return the last sampleSize runs when the regression slope is >0', () => {
-      createValidator({size: 2, metric: 'script'});
-      var sample = [mv(0, 0, {'script': 1}), mv(1, 1, {'script': 2}), mv(2, 2, {'script': 3})];
-      expect(validator.validate(ListWrapper.slice(sample, 0, 2)))
-          .toEqual(ListWrapper.slice(sample, 0, 2));
-      expect(validator.validate(sample)).toEqual(ListWrapper.slice(sample, 1, 3));
-    });
-
-  });
-}
-
-function mv(runIndex, time, values) {
-  return new MeasureValues(runIndex, DateWrapper.fromMillis(time), values);
-}
diff --git a/modules/benchpress/test/validator/size_validator_spec.ts b/modules/benchpress/test/validator/size_validator_spec.ts
deleted file mode 100644
index 4261d086cdcd..000000000000
--- a/modules/benchpress/test/validator/size_validator_spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {describe, ddescribe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-import {Date, DateWrapper} from 'angular2/src/facade/lang';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {Validator, SizeValidator, Injector, bind, MeasureValues} from 'benchpress/common';
-
-export function main() {
-  describe('size validator', () => {
-    var validator;
-
-    function createValidator(size) {
-      validator =
-          Injector.resolveAndCreate(
-                      [SizeValidator.BINDINGS, bind(SizeValidator.SAMPLE_SIZE).toValue(size)])
-              .get(SizeValidator);
-    }
-
-    it('should return sampleSize as description', () => {
-      createValidator(2);
-      expect(validator.describe()).toEqual({'sampleSize': 2});
-    });
-
-    it('should return null while the completeSample is smaller than the given size', () => {
-      createValidator(2);
-      expect(validator.validate([])).toBe(null);
-      expect(validator.validate([mv(0, 0, {})])).toBe(null);
-    });
-
-    it('should return the last sampleSize runs when it has at least the given size', () => {
-      createValidator(2);
-      var sample = [mv(0, 0, {'a': 1}), mv(1, 1, {'b': 2}), mv(2, 2, {'c': 3})];
-      expect(validator.validate(ListWrapper.slice(sample, 0, 2)))
-          .toEqual(ListWrapper.slice(sample, 0, 2));
-      expect(validator.validate(sample)).toEqual(ListWrapper.slice(sample, 1, 3));
-    });
-
-  });
-}
-
-function mv(runIndex, time, values) {
-  return new MeasureValues(runIndex, DateWrapper.fromMillis(time), values);
-}
diff --git a/modules/benchpress/test/web_driver_extension_spec.ts b/modules/benchpress/test/web_driver_extension_spec.ts
deleted file mode 100644
index c8b3e09b8bda..000000000000
--- a/modules/benchpress/test/web_driver_extension_spec.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
-  afterEach,
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {StringMap, ListWrapper} from 'angular2/src/facade/collection';
-import {isPresent, StringWrapper} from 'angular2/src/facade/lang';
-import {PromiseWrapper} from 'angular2/src/facade/async';
-
-import {WebDriverExtension, bind, Injector, Options} from 'benchpress/common';
-
-export function main() {
-  function createExtension(ids, caps) {
-    return PromiseWrapper.wrap(() => {
-      return Injector.resolveAndCreate([
-                       ListWrapper.map(ids, (id) => bind(id).toValue(new MockExtension(id))),
-                       bind(Options.CAPABILITIES).toValue(caps),
-                       WebDriverExtension.bindTo(ids)
-                     ])
-          .get(WebDriverExtension);
-    });
-  }
-
-  describe('WebDriverExtension.bindTo', () => {
-
-    it('should bind the extension that matches the capabilities',
-       inject([AsyncTestCompleter], (async) => {
-         createExtension(['m1', 'm2', 'm3'], {'browser': 'm2'})
-             .then((m) => {
-               expect(m.id).toEqual('m2');
-               async.done();
-             });
-       }));
-
-    it('should throw if there is no match', inject([AsyncTestCompleter], (async) => {
-         PromiseWrapper.catchError(createExtension(['m1'], {'browser': 'm2'}), (err) => {
-           expect(isPresent(err)).toBe(true);
-           async.done();
-         });
-       }));
-  });
-}
-
-class MockExtension extends WebDriverExtension {
-  id: string;
-
-  constructor(id) {
-    super();
-    this.id = id;
-  }
-
-  supports(capabilities: StringMap<string, any>): boolean {
-    return StringWrapper.equals(capabilities['browser'], this.id);
-  }
-}
diff --git a/modules/benchpress/test/webdriver/chrome_driver_extension_spec.ts b/modules/benchpress/test/webdriver/chrome_driver_extension_spec.ts
deleted file mode 100644
index e9052abc682b..000000000000
--- a/modules/benchpress/test/webdriver/chrome_driver_extension_spec.ts
+++ /dev/null
@@ -1,326 +0,0 @@
-import {
-  afterEach,
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {PromiseWrapper} from 'angular2/src/facade/async';
-import {Json, isBlank} from 'angular2/src/facade/lang';
-
-import {
-  WebDriverExtension,
-  ChromeDriverExtension,
-  WebDriverAdapter,
-  Injector,
-  bind
-} from 'benchpress/common';
-
-import {TraceEventFactory} from '../trace_event_factory';
-
-export function main() {
-  describe('chrome driver extension', () => {
-    var log;
-    var extension;
-
-    var blinkEvents = new TraceEventFactory('blink.console', 'pid0');
-    var v8Events = new TraceEventFactory('v8', 'pid0');
-    var v8EventsOtherProcess = new TraceEventFactory('v8', 'pid1');
-    var chromeTimelineEvents =
-        new TraceEventFactory('disabled-by-default-devtools.timeline', 'pid0');
-    var benchmarkEvents = new TraceEventFactory('benchmark', 'pid0');
-    var normEvents = new TraceEventFactory('timeline', 'pid0');
-
-    function createExtension(perfRecords = null, messageMethod = 'Tracing.dataCollected') {
-      if (isBlank(perfRecords)) {
-        perfRecords = [];
-      }
-      log = [];
-      extension = Injector.resolveAndCreate([
-                            ChromeDriverExtension.BINDINGS,
-                            bind(WebDriverAdapter)
-                                .toValue(new MockDriverAdapter(log, perfRecords, messageMethod))
-                          ])
-                      .get(ChromeDriverExtension);
-      return extension;
-    }
-
-    it('should force gc via window.gc()', inject([AsyncTestCompleter], (async) => {
-         createExtension().gc().then((_) => {
-           expect(log).toEqual([['executeScript', 'window.gc()']]);
-           async.done();
-         });
-       }));
-
-    it('should mark the timeline via console.time()', inject([AsyncTestCompleter], (async) => {
-         createExtension()
-             .timeBegin('someName')
-             .then((_) => {
-               expect(log).toEqual([['executeScript', `console.time('someName');`]]);
-               async.done();
-             });
-       }));
-
-    it('should mark the timeline via console.timeEnd()', inject([AsyncTestCompleter], (async) => {
-         createExtension()
-             .timeEnd('someName')
-             .then((_) => {
-               expect(log).toEqual([['executeScript', `console.timeEnd('someName');`]]);
-               async.done();
-             });
-       }));
-
-    it('should mark the timeline via console.time() and console.timeEnd()',
-       inject([AsyncTestCompleter], (async) => {
-         createExtension()
-             .timeEnd('name1', 'name2')
-             .then((_) => {
-               expect(log).toEqual(
-                   [['executeScript', `console.timeEnd('name1');console.time('name2');`]]);
-               async.done();
-             });
-       }));
-
-    describe('readPerfLog', () => {
-
-      it('should execute a dummy script before reading them',
-         inject([AsyncTestCompleter], (async) => {
-           // TODO(tbosch): This seems to be a bug in ChromeDriver:
-           // Sometimes it does not report the newest events of the performance log
-           // to the WebDriver client unless a script is executed...
-           createExtension([]).readPerfLog().then((_) => {
-             expect(log).toEqual([['executeScript', '1+1'], ['logs', 'performance']]);
-             async.done();
-           });
-         }));
-
-      it('should normalize times to ms and forward ph and pid event properties',
-         inject([AsyncTestCompleter], (async) => {
-           createExtension([chromeTimelineEvents.complete('FunctionCall', 1100, 5500, null)])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([
-                   normEvents.complete('script', 1.1, 5.5, null),
-                 ]);
-                 async.done();
-               });
-         }));
-      describe('frame metrics', () => {
-        it('should report ImplThreadRenderingStats as frame event',
-           inject([AsyncTestCompleter], (async) => {
-             createExtension([
-               benchmarkEvents.instant('BenchmarkInstrumentation::ImplThreadRenderingStats', 1100,
-                                       {'data': {'frame_count': 1}})
-             ])
-                 .readPerfLog()
-                 .then((events) => {
-                   expect(events).toEqual([
-                     normEvents.create('i', 'frame', 1.1),
-                   ]);
-                   async.done();
-                 });
-           }));
-
-        it('should not report ImplThreadRenderingStats with zero frames',
-           inject([AsyncTestCompleter], (async) => {
-             createExtension([
-               benchmarkEvents.instant('BenchmarkInstrumentation::ImplThreadRenderingStats', 1100,
-                                       {'data': {'frame_count': 0}})
-             ])
-                 .readPerfLog()
-                 .then((events) => {
-                   expect(events).toEqual([]);
-                   async.done();
-                 });
-           }));
-
-        it('should throw when ImplThreadRenderingStats contains more than one frame',
-           inject([AsyncTestCompleter], (async) => {
-             PromiseWrapper.catchError(
-                 createExtension([
-                   benchmarkEvents.instant('BenchmarkInstrumentation::ImplThreadRenderingStats',
-                                           1100, {'data': {'frame_count': 2}})
-                 ]).readPerfLog(),
-                 (err) => {
-                   expect(() => { throw err; })
-                       .toThrowError('multi-frame render stats not supported');
-                   async.done();
-                 });
-           }));
-      });
-
-      it('should normalize "tdur" to "dur"', inject([AsyncTestCompleter], (async) => {
-           var event = chromeTimelineEvents.create('X', 'FunctionCall', 1100, null);
-           event['tdur'] = 5500;
-           createExtension([event]).readPerfLog().then((events) => {
-             expect(events).toEqual([
-               normEvents.complete('script', 1.1, 5.5, null),
-             ]);
-             async.done();
-           });
-         }));
-
-      it('should report FunctionCall events as "script"', inject([AsyncTestCompleter], (async) => {
-           createExtension([chromeTimelineEvents.start('FunctionCall', 0)])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([
-                   normEvents.start('script', 0),
-                 ]);
-                 async.done();
-               });
-         }));
-
-      it('should ignore FunctionCalls from webdriver', inject([AsyncTestCompleter], (async) => {
-           createExtension([
-             chromeTimelineEvents.start('FunctionCall', 0,
-                                        {'data': {'scriptName': 'InjectedScript'}})
-           ])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([]);
-                 async.done();
-               });
-         }));
-
-      it('should report begin timestamps', inject([AsyncTestCompleter], (async) => {
-           createExtension([blinkEvents.create('S', 'someName', 1000)])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([normEvents.markStart('someName', 1.0)]);
-                 async.done();
-               });
-         }));
-
-      it('should report end timestamps', inject([AsyncTestCompleter], (async) => {
-           createExtension([blinkEvents.create('F', 'someName', 1000)])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([normEvents.markEnd('someName', 1.0)]);
-                 async.done();
-               });
-         }));
-
-      it('should report gc', inject([AsyncTestCompleter], (async) => {
-           createExtension([
-             chromeTimelineEvents.start('GCEvent', 1000, {'usedHeapSizeBefore': 1000}),
-             chromeTimelineEvents.end('GCEvent', 2000, {'usedHeapSizeAfter': 0}),
-           ])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([
-                   normEvents.start('gc', 1.0, {'usedHeapSize': 1000}),
-                   normEvents.end('gc', 2.0, {'usedHeapSize': 0, 'majorGc': false}),
-                 ]);
-                 async.done();
-               });
-         }));
-
-      it('should report major gc', inject([AsyncTestCompleter], (async) => {
-           createExtension([
-             chromeTimelineEvents.start('GCEvent', 1000, {'usedHeapSizeBefore': 1000}),
-             v8EventsOtherProcess.start('majorGC', 1100, null),
-             v8EventsOtherProcess.end('majorGC', 1200, null),
-             chromeTimelineEvents.end('GCEvent', 2000, {'usedHeapSizeAfter': 0}),
-           ])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([
-                   normEvents.start('gc', 1.0, {'usedHeapSize': 1000}),
-                   normEvents.end('gc', 2.0, {'usedHeapSize': 0, 'majorGc': false}),
-                 ]);
-                 async.done();
-               });
-         }));
-
-      it('should ignore major gc from different processes',
-         inject([AsyncTestCompleter], (async) => {
-           createExtension([
-             chromeTimelineEvents.start('GCEvent', 1000, {'usedHeapSizeBefore': 1000}),
-             v8Events.start('majorGC', 1100, null),
-             v8Events.end('majorGC', 1200, null),
-             chromeTimelineEvents.end('GCEvent', 2000, {'usedHeapSizeAfter': 0}),
-           ])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([
-                   normEvents.start('gc', 1.0, {'usedHeapSize': 1000}),
-                   normEvents.end('gc', 2.0, {'usedHeapSize': 0, 'majorGc': true}),
-                 ]);
-                 async.done();
-               });
-         }));
-
-      ['RecalculateStyles', 'Layout', 'UpdateLayerTree', 'Paint', 'Rasterize', 'CompositeLayers']
-          .forEach((recordType) => {
-            it(`should report ${recordType} as "render"`, inject([AsyncTestCompleter], (async) => {
-                 createExtension([
-                   chromeTimelineEvents.start(recordType, 1234),
-                   chromeTimelineEvents.end(recordType, 2345)
-                 ])
-                     .readPerfLog()
-                     .then((events) => {
-                       expect(events).toEqual([
-                         normEvents.start('render', 1.234),
-                         normEvents.end('render', 2.345),
-                       ]);
-                       async.done();
-                     });
-               }));
-          });
-
-      it('should throw an error on buffer overflow', inject([AsyncTestCompleter], (async) => {
-           PromiseWrapper.catchError(
-               createExtension(
-                   [
-                     chromeTimelineEvents.start('FunctionCall', 1234),
-                   ],
-                   'Tracing.bufferUsage')
-                   .readPerfLog(),
-               (err) => {
-                 expect(() => { throw err; })
-                     .toThrowError('The DevTools trace buffer filled during the test!');
-                 async.done();
-               });
-         }));
-
-      it('should match chrome browsers', () => {
-        expect(createExtension().supports({'browserName': 'chrome'})).toBe(true);
-
-        expect(createExtension().supports({'browserName': 'Chrome'})).toBe(true);
-      });
-
-    });
-
-  });
-}
-
-class MockDriverAdapter extends WebDriverAdapter {
-  constructor(private _log: List<any>, private _events: List<any>, private _messageMethod: string) {
-    super();
-  }
-
-  executeScript(script) {
-    this._log.push(['executeScript', script]);
-    return PromiseWrapper.resolve(null);
-  }
-
-  logs(type) {
-    this._log.push(['logs', type]);
-    if (type === 'performance') {
-      return PromiseWrapper.resolve(this._events.map((event) => {
-        return {
-          'message': Json.stringify({'message': {'method': this._messageMethod, 'params': event}})
-        };
-      }));
-    } else {
-      return null;
-    }
-  }
-}
diff --git a/modules/benchpress/test/webdriver/ios_driver_extension_spec.ts b/modules/benchpress/test/webdriver/ios_driver_extension_spec.ts
deleted file mode 100644
index 555ddff4a6ce..000000000000
--- a/modules/benchpress/test/webdriver/ios_driver_extension_spec.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-import {
-  afterEach,
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {PromiseWrapper} from 'angular2/src/facade/async';
-import {Json, isBlank, isPresent} from 'angular2/src/facade/lang';
-
-import {
-  WebDriverExtension,
-  IOsDriverExtension,
-  WebDriverAdapter,
-  Injector,
-  bind
-} from 'benchpress/common';
-
-import {TraceEventFactory} from '../trace_event_factory';
-
-export function main() {
-  describe('ios driver extension', () => {
-    var log;
-    var extension;
-
-    var normEvents = new TraceEventFactory('timeline', 'pid0');
-
-    function createExtension(perfRecords = null) {
-      if (isBlank(perfRecords)) {
-        perfRecords = [];
-      }
-      log = [];
-      extension = Injector.resolveAndCreate([
-                            IOsDriverExtension.BINDINGS,
-                            bind(WebDriverAdapter).toValue(new MockDriverAdapter(log, perfRecords))
-                          ])
-                      .get(IOsDriverExtension);
-      return extension;
-    }
-
-    it('should throw on forcing gc', () => {
-      expect(() => createExtension().gc()).toThrowError('Force GC is not supported on iOS');
-    });
-
-    it('should mark the timeline via console.time()', inject([AsyncTestCompleter], (async) => {
-         createExtension()
-             .timeBegin('someName')
-             .then((_) => {
-               expect(log).toEqual([['executeScript', `console.time('someName');`]]);
-               async.done();
-             });
-       }));
-
-    it('should mark the timeline via console.timeEnd()', inject([AsyncTestCompleter], (async) => {
-         createExtension()
-             .timeEnd('someName')
-             .then((_) => {
-               expect(log).toEqual([['executeScript', `console.timeEnd('someName');`]]);
-               async.done();
-             });
-       }));
-
-    it('should mark the timeline via console.time() and console.timeEnd()',
-       inject([AsyncTestCompleter], (async) => {
-         createExtension()
-             .timeEnd('name1', 'name2')
-             .then((_) => {
-               expect(log).toEqual(
-                   [['executeScript', `console.timeEnd('name1');console.time('name2');`]]);
-               async.done();
-             });
-       }));
-
-    describe('readPerfLog', () => {
-
-      it('should execute a dummy script before reading them',
-         inject([AsyncTestCompleter], (async) => {
-           // TODO(tbosch): This seems to be a bug in ChromeDriver:
-           // Sometimes it does not report the newest events of the performance log
-           // to the WebDriver client unless a script is executed...
-           createExtension([]).readPerfLog().then((_) => {
-             expect(log).toEqual([['executeScript', '1+1'], ['logs', 'performance']]);
-             async.done();
-           });
-         }));
-
-      it('should report FunctionCall records as "script"', inject([AsyncTestCompleter], (async) => {
-           createExtension([durationRecord('FunctionCall', 1, 5)])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events)
-                     .toEqual([normEvents.start('script', 1), normEvents.end('script', 5)]);
-                 async.done();
-               });
-         }));
-
-      it('should ignore FunctionCalls from webdriver', inject([AsyncTestCompleter], (async) => {
-           createExtension([internalScriptRecord(1, 5)])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([]);
-                 async.done();
-               });
-         }));
-
-      it('should report begin time', inject([AsyncTestCompleter], (async) => {
-           createExtension([timeBeginRecord('someName', 12)])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([normEvents.markStart('someName', 12)]);
-                 async.done();
-               });
-         }));
-
-      it('should report end timestamps', inject([AsyncTestCompleter], (async) => {
-           createExtension([timeEndRecord('someName', 12)])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([normEvents.markEnd('someName', 12)]);
-                 async.done();
-               });
-         }));
-
-      ['RecalculateStyles', 'Layout', 'UpdateLayerTree', 'Paint', 'Rasterize', 'CompositeLayers']
-          .forEach((recordType) => {
-            it(`should report ${recordType}`, inject([AsyncTestCompleter], (async) => {
-                 createExtension([durationRecord(recordType, 0, 1)])
-                     .readPerfLog()
-                     .then((events) => {
-                       expect(events).toEqual([
-                         normEvents.start('render', 0),
-                         normEvents.end('render', 1),
-                       ]);
-                       async.done();
-                     });
-               }));
-          });
-
-
-      it('should walk children', inject([AsyncTestCompleter], (async) => {
-           createExtension([durationRecord('FunctionCall', 1, 5, [timeBeginRecord('someName', 2)])])
-               .readPerfLog()
-               .then((events) => {
-                 expect(events).toEqual([
-                   normEvents.start('script', 1),
-                   normEvents.markStart('someName', 2),
-                   normEvents.end('script', 5)
-                 ]);
-                 async.done();
-               });
-         }));
-
-      it('should match safari browsers', () => {
-        expect(createExtension().supports({'browserName': 'safari'})).toBe(true);
-
-        expect(createExtension().supports({'browserName': 'Safari'})).toBe(true);
-      });
-
-    });
-
-  });
-}
-
-function timeBeginRecord(name, time) {
-  return {'type': 'Time', 'startTime': time, 'data': {'message': name}};
-}
-
-function timeEndRecord(name, time) {
-  return {'type': 'TimeEnd', 'startTime': time, 'data': {'message': name}};
-}
-
-function durationRecord(type, startTime, endTime, children = null) {
-  if (isBlank(children)) {
-    children = [];
-  }
-  return {'type': type, 'startTime': startTime, 'endTime': endTime, 'children': children};
-}
-
-function internalScriptRecord(startTime, endTime) {
-  return {
-    'type': 'FunctionCall',
-    'startTime': startTime,
-    'endTime': endTime,
-    'data': {'scriptName': 'InjectedScript'}
-  };
-}
-
-class MockDriverAdapter extends WebDriverAdapter {
-  constructor(private _log: List<any>, private _perfRecords: List<any>) { super(); }
-
-  executeScript(script) {
-    this._log.push(['executeScript', script]);
-    return PromiseWrapper.resolve(null);
-  }
-
-  logs(type) {
-    this._log.push(['logs', type]);
-    if (type === 'performance') {
-      return PromiseWrapper.resolve(this._perfRecords.map(function(record) {
-        return {
-          'message': Json.stringify(
-              {'message': {'method': 'Timeline.eventRecorded', 'params': {'record': record}}})
-        };
-      }));
-    } else {
-      return null;
-    }
-  }
-}
diff --git a/modules/benchpress/tsconfig.json b/modules/benchpress/tsconfig.json
deleted file mode 100644
index 13249a24e705..000000000000
--- a/modules/benchpress/tsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-    "compilerOptions": {
-        "emitDecoratorMetadata": true,
-        "declaration": true,
-        "module": "commonjs",
-        "rootDir": ".",
-        "sourceMap": true,
-        "sourceRoot": ".",
-        "target": "ES5",
-        "outDir": "../../dist/js/cjs"
-    }
-}
diff --git a/modules/e2e_util/BUILD.bazel b/modules/e2e_util/BUILD.bazel
new file mode 100644
index 000000000000..a70647c870c5
--- /dev/null
+++ b/modules/e2e_util/BUILD.bazel
@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "lib",
+    testonly = 1,
+    srcs = glob(["*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/benchpress",
+    ],
+)
diff --git a/modules/e2e_util/e2e_util.ts b/modules/e2e_util/e2e_util.ts
new file mode 100644
index 000000000000..d0e9c1e8fd0f
--- /dev/null
+++ b/modules/e2e_util/e2e_util.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
+ */
+
+/* tslint:disable:no-console  */
+import {browser} from 'protractor';
+
+const yargs = require('yargs');
+import * as webdriver from 'selenium-webdriver';
+
+let cmdArgs: {'bundles': boolean};
+
+declare var expect: any;
+
+export function readCommandLine(extraOptions?: {[key: string]: any}) {
+  const options: {[key: string]: any} = {
+    'bundles': {describe: 'Whether to use the angular bundles or not.', default: false}
+  };
+  if (extraOptions) {
+    for (const key in extraOptions) {
+      options[key] = extraOptions[key];
+    }
+  }
+
+  cmdArgs = yargs.usage('Angular e2e test options.').options(options).help('ng-help').wrap(40).argv;
+  return cmdArgs;
+}
+
+export function openBrowser(config: {
+  url: string,
+  params?: {name: string, value: any}[],
+  ignoreBrowserSynchronization?: boolean
+}) {
+  if (config.ignoreBrowserSynchronization) {
+    browser.ignoreSynchronization = true;
+  }
+  let params = config.params || [];
+  if (!params.some((param) => param.name === 'bundles')) {
+    params = params.concat([{name: 'bundles', value: cmdArgs.bundles}]);
+  }
+
+  const urlParams: string[] = [];
+  params.forEach((param) => { urlParams.push(param.name + '=' + param.value); });
+  const url = encodeURI(config.url + '?' + urlParams.join('&'));
+  browser.get(url);
+  if (config.ignoreBrowserSynchronization) {
+    browser.sleep(2000);
+  }
+}
+
+/**
+ * @experimental This API will be moved to Protractor.
+ */
+export function verifyNoBrowserErrors() {
+  // TODO(tbosch): Bug in ChromeDriver: Need to execute at least one command
+  // so that the browser logs can be read out!
+  browser.executeScript('1+1');
+  browser.manage().logs().get('browser').then(function(browserLog: any) {
+    const filteredLog = browserLog.filter(function(logEntry: any) {
+      if (logEntry.level.value >= webdriver.logging.Level.INFO.value) {
+        console.log('>> ' + logEntry.message);
+      }
+      return logEntry.level.value > webdriver.logging.Level.WARNING.value;
+    });
+    expect(filteredLog).toEqual([]);
+  });
+}
diff --git a/modules/e2e_util/perf_util.ts b/modules/e2e_util/perf_util.ts
new file mode 100644
index 000000000000..c128c924ba68
--- /dev/null
+++ b/modules/e2e_util/perf_util.ts
@@ -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
+ */
+export {verifyNoBrowserErrors} from './e2e_util';
+
+const nodeUuid = require('node-uuid');
+import * as fs from 'fs-extra';
+
+import {SeleniumWebDriverAdapter, Options, JsonFileReporter, Validator, RegressionSlopeValidator, ConsoleReporter, SizeValidator, MultiReporter, MultiMetric, Runner, StaticProvider} from '@angular/benchpress';
+import {readCommandLine as readE2eCommandLine, openBrowser} from './e2e_util';
+
+let cmdArgs: {'sample-size': number, 'force-gc': boolean, 'dryrun': boolean, 'bundles': boolean};
+let runner: Runner;
+
+export function readCommandLine() {
+  cmdArgs = <any>readE2eCommandLine({
+    'sample-size': {describe: 'Used for perf: sample size.', default: 20},
+    'force-gc': {describe: 'Used for perf: force gc.', default: false, type: 'boolean'},
+    'dryrun': {describe: 'If true, only run performance benchmarks once.', default: false},
+    'bundles': {describe: 'Whether to use the angular bundles or not.', default: false}
+  });
+  runner = createBenchpressRunner();
+}
+
+export function runBenchmark(config: {
+  id: string,
+  url: string,
+  params: {name: string, value: any}[],
+  ignoreBrowserSynchronization?: boolean,
+  microMetrics?: {[key: string]: string},
+  work?: () => void,
+  prepare?: () => void,
+  setup?: () => void
+}): Promise<any> {
+  openBrowser(config);
+  if (config.setup) {
+    config.setup();
+  }
+  const description: {[key: string]: any} = {'bundles': cmdArgs.bundles};
+  config.params.forEach((param) => { description[param.name] = param.value; });
+  return runner.sample({
+    id: config.id,
+    execute: config.work,
+    prepare: config.prepare,
+    microMetrics: config.microMetrics,
+    providers: [{provide: Options.SAMPLE_DESCRIPTION, useValue: description}]
+  });
+}
+
+function createBenchpressRunner(): Runner {
+  let runId = nodeUuid.v1();
+  if (process.env.GIT_SHA) {
+    runId = process.env.GIT_SHA + ' ' + runId;
+  }
+  const resultsFolder = './dist/benchmark_results';
+  fs.ensureDirSync(resultsFolder);
+  const providers: StaticProvider[] = [
+    SeleniumWebDriverAdapter.PROTRACTOR_PROVIDERS,
+    {provide: Options.FORCE_GC, useValue: cmdArgs['force-gc']},
+    {provide: Options.DEFAULT_DESCRIPTION, useValue: {'runId': runId}}, JsonFileReporter.PROVIDERS,
+    {provide: JsonFileReporter.PATH, useValue: resultsFolder}
+  ];
+  if (!cmdArgs['dryrun']) {
+    providers.push({provide: Validator, useExisting: RegressionSlopeValidator});
+    providers.push(
+        {provide: RegressionSlopeValidator.SAMPLE_SIZE, useValue: cmdArgs['sample-size']});
+    providers.push(MultiReporter.provideWith([ConsoleReporter, JsonFileReporter]));
+  } else {
+    providers.push({provide: Validator, useExisting: SizeValidator});
+    providers.push({provide: SizeValidator.SAMPLE_SIZE, useValue: 1});
+    providers.push(MultiReporter.provideWith([]));
+    providers.push(MultiMetric.provideWith([]));
+  }
+  return new Runner(providers);
+}
diff --git a/modules/empty.ts b/modules/empty.ts
new file mode 100644
index 000000000000..540a7a0ad7ff
--- /dev/null
+++ b/modules/empty.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
+ */
+
+// This file intentionally left blank. It is used to load nothing in some cases.
+// Such as parse5/index is redirected here instead of loading into browser.
+
+export let __empty__: any;
diff --git a/modules/es6-subset.d.ts b/modules/es6-subset.d.ts
new file mode 100644
index 000000000000..caef53e496c3
--- /dev/null
+++ b/modules/es6-subset.d.ts
@@ -0,0 +1,65 @@
+
+/**
+ * Subset of lib.es2015.core.d.ts typings.
+ * Angular should not require use of ES6 runtime but some API usages are already present.
+ * See https://github.com/angular/angular/issues/5242
+ * TODO(alexeagle): remove methods below which may not be present in targeted browser
+ */
+
+interface String {
+  /**
+   * Returns true if the sequence of elements of searchString converted to a String is the
+   * same as the corresponding elements of this object (converted to a String) starting at
+   * position. Otherwise returns false.
+   */
+  startsWith(searchString: string, position?: number): boolean;
+
+  /**
+   * Returns true if the sequence of elements of searchString converted to a String is the
+   * same as the corresponding elements of this object (converted to a String) starting at
+   * endPosition – length(this). Otherwise returns false.
+   */
+  endsWith(searchString: string, endPosition?: number): boolean;
+}
+
+interface Array<T> {
+  /**
+   * Returns the value of the first element in the array where predicate is true, and undefined
+   * otherwise.
+   * @param predicate find calls predicate once for each element of the array, in ascending
+   * order, until it finds one where predicate returns true. If such an element is found, find
+   * immediately returns that element value. Otherwise, find returns undefined.
+   * @param thisArg If provided, it will be used as the this value for each invocation of
+   * predicate. If it is not provided, undefined is used instead.
+   */
+  find(predicate: (value: T, index: number, obj: Array<T>) => boolean, thisArg?: any): T;
+  /**
+   * Returns the this object after filling the section identified by start and end with value
+   * @param value value to fill array section with
+   * @param start index to start filling the array at. If start is negative, it is treated as
+   * length+start where length is the length of the array.
+   * @param end index to stop filling the array at. If end is negative, it is treated as
+   * length+end.
+   */
+  fill(value: T, start?: number, end?: number): T[];
+}
+
+interface NumberConstructor {
+  /**
+   * Returns true if the value passed is an integer, false otherwise.
+   * @param number A numeric value.
+   */
+  isInteger(number: number): boolean;
+}
+
+// Workaround https://github.com/Microsoft/TypeScript/issues/9193
+interface PromiseConstructor {
+  all<T>(values: (T|PromiseLike<T>)[]): Promise<T[]>;
+}
+
+interface Function {
+  /**
+    * Returns the name of the function. Function names are read-only and can not be changed.
+    */
+  readonly name: string;
+}
diff --git a/modules/examples/e2e_test/hello_world/hello_world_spec.dart b/modules/examples/e2e_test/hello_world/hello_world_spec.dart
deleted file mode 100644
index 8c250a59a170..000000000000
--- a/modules/examples/e2e_test/hello_world/hello_world_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library examples.e2e_test.hello_world.hello_world_spec;
-
-main() {
-
-}
diff --git a/modules/examples/e2e_test/hello_world/hello_world_spec.ts b/modules/examples/e2e_test/hello_world/hello_world_spec.ts
deleted file mode 100644
index c331fccfe187..000000000000
--- a/modules/examples/e2e_test/hello_world/hello_world_spec.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('hello world', function() {
-
-  afterEach(verifyNoBrowserErrors);
-
-  describe('static reflection', function() {
-    var URL = 'examples/src/hello_world/index.html';
-
-    it('should greet', function() {
-      browser.get(URL);
-
-      expect(getComponentText('hello-app', '.greeting')).toEqual('hello world!');
-    });
-
-    it('should change greeting', function() {
-      browser.get(URL);
-
-      clickComponentButton('hello-app', '.changeButton');
-      expect(getComponentText('hello-app', '.greeting')).toEqual('howdy world!');
-    });
-  });
-
-  describe('dynamic reflection', function() {
-    var URL = 'examples/src/hello_world/index_dynamic.html';
-
-    it('should greet', function() {
-      browser.get(URL);
-
-      expect(getComponentText('hello-app', '.greeting')).toEqual('hello world!');
-    });
-
-    it('should change greeting', function() {
-      browser.get(URL);
-
-      clickComponentButton('hello-app', '.changeButton');
-      expect(getComponentText('hello-app', '.greeting')).toEqual('howdy world!');
-    });
-  });
-
-});
-
-function getComponentText(selector, innerSelector) {
-  return browser.executeScript('return document.querySelector("' + selector + '").querySelector("' +
-                               innerSelector + '").textContent');
-}
-
-function clickComponentButton(selector, innerSelector) {
-  return browser.executeScript('return document.querySelector("' + selector + '").querySelector("' +
-                               innerSelector + '").click()');
-}
diff --git a/modules/examples/e2e_test/http/http_spec.dart b/modules/examples/e2e_test/http/http_spec.dart
deleted file mode 100644
index cc5b8b4c6794..000000000000
--- a/modules/examples/e2e_test/http/http_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library examples.e2e_test.http.http_spec;
-
-main() {
-
-}
diff --git a/modules/examples/e2e_test/http/http_spec.ts b/modules/examples/e2e_test/http/http_spec.ts
deleted file mode 100644
index 450e6579d305..000000000000
--- a/modules/examples/e2e_test/http/http_spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/// <reference path="../../../angular2/typings/jasmine/jasmine.d.ts" />
-
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('http', function() {
-
-  afterEach(verifyNoBrowserErrors);
-
-  describe('fetching', function() {
-    var URL = 'examples/src/http/index.html';
-
-    it('should fetch and display people', function() {
-      browser.get(URL);
-
-      expect(getComponentText('http-app', '.people')).toEqual('hello, Jeff');
-    });
-  });
-});
-
-function getComponentText(selector, innerSelector) {
-  return browser.executeScript('return document.querySelector("' + selector + '").querySelector("' +
-                               innerSelector + '").textContent.trim()');
-}
diff --git a/modules/examples/e2e_test/key_events/key_events_spec.dart b/modules/examples/e2e_test/key_events/key_events_spec.dart
deleted file mode 100644
index df4696b92a0f..000000000000
--- a/modules/examples/e2e_test/key_events/key_events_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library examples.e2e_test.key_events.key_events_spec;
-
-main() {
-
-}
diff --git a/modules/examples/e2e_test/key_events/key_events_spec.ts b/modules/examples/e2e_test/key_events/key_events_spec.ts
deleted file mode 100644
index d6925ae3b45a..000000000000
--- a/modules/examples/e2e_test/key_events/key_events_spec.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('key_events', function() {
-
-  var URL = 'examples/src/key_events/index.html';
-
-  afterEach(verifyNoBrowserErrors);
-  beforeEach(() => { browser.get(URL); });
-
-  it('should display correct key names', function() {
-    var firstArea = element.all(by.css('.sample-area')).get(0);
-    expect(firstArea.getText()).toEqual('(none)');
-
-    // testing different key categories:
-    firstArea.sendKeys(protractor.Key.ENTER);
-    expect(firstArea.getText()).toEqual('enter');
-
-    firstArea.sendKeys(protractor.Key.SHIFT, protractor.Key.ENTER);
-    expect(firstArea.getText()).toEqual('shift.enter');
-
-    firstArea.sendKeys(protractor.Key.CONTROL, protractor.Key.SHIFT, protractor.Key.ENTER);
-    expect(firstArea.getText()).toEqual('control.shift.enter');
-
-    firstArea.sendKeys(' ');
-    expect(firstArea.getText()).toEqual('space');
-
-    // It would not work with a letter which position depends on the keyboard layout (ie AZERTY vs
-    // QWERTY), see https://code.google.com/p/chromedriver/issues/detail?id=553
-    firstArea.sendKeys('u');
-    expect(firstArea.getText()).toEqual('u');
-
-    firstArea.sendKeys(protractor.Key.CONTROL, 'b');
-    expect(firstArea.getText()).toEqual('control.b');
-
-    firstArea.sendKeys(protractor.Key.F1);
-    expect(firstArea.getText()).toEqual('f1');
-
-    firstArea.sendKeys(protractor.Key.ALT, protractor.Key.F1);
-    expect(firstArea.getText()).toEqual('alt.f1');
-
-    firstArea.sendKeys(protractor.Key.CONTROL, protractor.Key.F1);
-    expect(firstArea.getText()).toEqual('control.f1');
-
-    // There is an issue with protractor.Key.NUMPAD0 (and other NUMPADx):
-    // chromedriver does not correctly set the location property on the event to
-    // specify that the key is on the numeric keypad (event.location = 3)
-    // so the following test fails:
-    // firstArea.sendKeys(protractor.Key.NUMPAD0);
-    // expect(firstArea.getText()).toEqual('0');
-  });
-
-  it('should correctly react to the specified key', function() {
-    var secondArea = element.all(by.css('.sample-area')).get(1);
-    secondArea.sendKeys(protractor.Key.SHIFT, protractor.Key.ENTER);
-    expect(secondArea.getText()).toEqual('You pressed shift.enter!');
-  });
-
-  it('should not react to incomplete keys', function() {
-    var secondArea = element.all(by.css('.sample-area')).get(1);
-    secondArea.sendKeys(protractor.Key.ENTER);
-    expect(secondArea.getText()).toEqual('');
-  });
-
-  it('should not react to keys with more modifiers', function() {
-    var secondArea = element.all(by.css('.sample-area')).get(1);
-    secondArea.sendKeys(protractor.Key.CONTROL, protractor.Key.SHIFT, protractor.Key.ENTER);
-    expect(secondArea.getText()).toEqual('');
-  });
-
-});
diff --git a/modules/examples/e2e_test/material/button_spec.dart b/modules/examples/e2e_test/material/button_spec.dart
deleted file mode 100644
index 41b3a3fa7927..000000000000
--- a/modules/examples/e2e_test/material/button_spec.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library examples.e2e_test.material.button_spec;
-
-main() {}
diff --git a/modules/examples/e2e_test/material/button_spec.ts b/modules/examples/e2e_test/material/button_spec.ts
deleted file mode 100644
index 3a0470a398ff..000000000000
--- a/modules/examples/e2e_test/material/button_spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('md-button', function() {
-  var url = 'examples/src/material/button/index.html';
-
-  beforeEach(() => { browser.get(url); });
-  afterEach(verifyNoBrowserErrors);
-
-  // Buttons are broken right now, see https://github.com/angular/angular/issues/1602
-});
diff --git a/modules/examples/e2e_test/material/checkbox_spec.dart b/modules/examples/e2e_test/material/checkbox_spec.dart
deleted file mode 100644
index ea31922d362a..000000000000
--- a/modules/examples/e2e_test/material/checkbox_spec.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library examples.e2e_test.material.checkbox_spec;
-
-main() {}
diff --git a/modules/examples/e2e_test/material/checkbox_spec.ts b/modules/examples/e2e_test/material/checkbox_spec.ts
deleted file mode 100644
index 0f85d901e04b..000000000000
--- a/modules/examples/e2e_test/material/checkbox_spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('md-checkbox', function() {
-  var url = 'examples/src/material/checkbox/index.html';
-
-  beforeEach(() => { browser.get(url); });
-  afterEach(verifyNoBrowserErrors);
-
-  it('should toggle a checkbox', function() {
-    var checkbox = element.all(by.css('md-checkbox')).first();
-
-    checkbox.click();
-    expect(checkbox.getAttribute('aria-checked')).toEqual('true');
-
-    checkbox.click();
-    expect(checkbox.getAttribute('aria-checked')).toEqual('false');
-  });
-});
diff --git a/modules/examples/e2e_test/material/dialog_spec.dart b/modules/examples/e2e_test/material/dialog_spec.dart
deleted file mode 100644
index 36954c6fd11c..000000000000
--- a/modules/examples/e2e_test/material/dialog_spec.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library examples.e2e_test.material.dialog_spec;
-
-main() {}
diff --git a/modules/examples/e2e_test/material/dialog_spec.ts b/modules/examples/e2e_test/material/dialog_spec.ts
deleted file mode 100644
index 8c0b65bd7f90..000000000000
--- a/modules/examples/e2e_test/material/dialog_spec.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('md-dialog', function() {
-  var url = 'examples/src/material/dialog/index.html';
-
-  beforeEach(() => { browser.get(url); });
-  afterEach(verifyNoBrowserErrors);
-
-  it('should open a dialog', function() {
-    var openButton = element(by.id('open'));
-    openButton.click();
-    expect(element(by.css('.md-dialog')).isPresent()).toEqual(true);
-
-    var dialog = element(by.css('.md-dialog'));
-    dialog.sendKeys(protractor.Key.ESCAPE);
-
-    expect(element(by.css('.md-dialog')).isPresent()).toEqual(false);
-  });
-});
diff --git a/modules/examples/e2e_test/material/grid_list_spec.dart b/modules/examples/e2e_test/material/grid_list_spec.dart
deleted file mode 100644
index 578b017c3d95..000000000000
--- a/modules/examples/e2e_test/material/grid_list_spec.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library examples.e2e_test.material.grid_list_spec;
-
-main() {}
diff --git a/modules/examples/e2e_test/material/grid_list_spec.ts b/modules/examples/e2e_test/material/grid_list_spec.ts
deleted file mode 100644
index 76d13c03732b..000000000000
--- a/modules/examples/e2e_test/material/grid_list_spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('md-grid-list', function() {
-  var url = 'examples/src/material/grid_list/index.html';
-
-  beforeEach(() => { browser.get(url); });
-  afterEach(verifyNoBrowserErrors);
-
-  it('should set tiles into different positions', () => {
-    var tiles = element.all(by.css('md-grid-list#complex md-grid-tile'));
-
-    // If the grid-list was not doing any layout, all of the tiles would have the same position.
-    // So our smoke test simply checks that any two tiles are in different positions.
-    expect(tiles.first().getLocation()).not.toEqual(tiles.last().getLocation());
-  });
-});
diff --git a/modules/examples/e2e_test/material/input_spec.dart b/modules/examples/e2e_test/material/input_spec.dart
deleted file mode 100644
index 7133081fdbd1..000000000000
--- a/modules/examples/e2e_test/material/input_spec.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library examples.e2e_test.material.input_spec;
-
-main() {}
diff --git a/modules/examples/e2e_test/material/input_spec.ts b/modules/examples/e2e_test/material/input_spec.ts
deleted file mode 100644
index 2c67c0ab2bd3..000000000000
--- a/modules/examples/e2e_test/material/input_spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('md-input', function() {
-  var url = 'examples/src/material/input/index.html';
-
-  beforeEach(() => { browser.get(url); });
-  afterEach(verifyNoBrowserErrors);
-
-  it('should enter a value to the input', () => {
-    var input = element.all(by.css('md-input-container input')).first();
-
-    input.sendKeys('Hello');
-
-    expect(input.getAttribute('value')).toEqual('Hello');
-  });
-});
diff --git a/modules/examples/e2e_test/material/progress_linear_spec.dart b/modules/examples/e2e_test/material/progress_linear_spec.dart
deleted file mode 100644
index 4d5d3352d646..000000000000
--- a/modules/examples/e2e_test/material/progress_linear_spec.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library examples.e2e_test.material.progress_linear_spec;
-
-main() {}
diff --git a/modules/examples/e2e_test/material/progress_linear_spec.ts b/modules/examples/e2e_test/material/progress_linear_spec.ts
deleted file mode 100644
index ad78e048dbcb..000000000000
--- a/modules/examples/e2e_test/material/progress_linear_spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('md-progress-linear', function() {
-  var url = 'examples/src/material/progress-linear/index.html';
-
-  beforeEach(() => { browser.get(url); });
-  afterEach(verifyNoBrowserErrors);
-
-  it('should increment and decrement progress', function() {
-    var progressBar = element.all(by.css('md-progress-linear')).first();
-    var incrementButton = element(by.id('increment'));
-    var decrementButton = element(by.id('decrement'));
-
-    var initialValue = progressBar.getAttribute('aria-valuenow');
-
-    incrementButton.click();
-    expect(progressBar.getAttribute('aria-valuenow')).toBeGreaterThan(initialValue);
-
-    decrementButton.click();
-    decrementButton.click();
-    expect(progressBar.getAttribute('aria-valuenow')).toBeLessThan(initialValue);
-  });
-});
diff --git a/modules/examples/e2e_test/material/radio_spec.dart b/modules/examples/e2e_test/material/radio_spec.dart
deleted file mode 100644
index 276bd9c6ab31..000000000000
--- a/modules/examples/e2e_test/material/radio_spec.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-library examples.e2e_test.material.radio_spec;
-
-main() {}
diff --git a/modules/examples/e2e_test/material/radio_spec.ts b/modules/examples/e2e_test/material/radio_spec.ts
deleted file mode 100644
index 03b2f286ee91..000000000000
--- a/modules/examples/e2e_test/material/radio_spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('md-radio-button', function() {
-  var url = 'examples/src/material/radio/index.html';
-
-  beforeEach(() => { browser.get(url); });
-  afterEach(verifyNoBrowserErrors);
-
-  it('should check one radio button and then check another', () => {
-    var standaloneRadios = element.all(by.css('[name="element"]'));
-    var firstRadio = standaloneRadios.first();
-    var lastRadio = standaloneRadios.last();
-
-    firstRadio.click();
-    expect(firstRadio.getAttribute('aria-checked')).toEqual('true');
-
-    lastRadio.click();
-    expect(firstRadio.getAttribute('aria-checked')).toEqual('false');
-    expect(lastRadio.getAttribute('aria-checked')).toEqual('true');
-  });
-});
diff --git a/modules/examples/e2e_test/model_driven_forms/model_driven_forms_spec.dart b/modules/examples/e2e_test/model_driven_forms/model_driven_forms_spec.dart
deleted file mode 100644
index a102b6468bb9..000000000000
--- a/modules/examples/e2e_test/model_driven_forms/model_driven_forms_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library examples.e2e_test.hello_world.model_driven_forms_spec;
-
-main() {
-
-}
diff --git a/modules/examples/e2e_test/model_driven_forms/model_driven_forms_spec.ts b/modules/examples/e2e_test/model_driven_forms/model_driven_forms_spec.ts
deleted file mode 100644
index 8e4a516593ab..000000000000
--- a/modules/examples/e2e_test/model_driven_forms/model_driven_forms_spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('Template-Driven Forms', function() {
-
-  afterEach(verifyNoBrowserErrors);
-
-  var URL = 'examples/src/model_driven_forms/index.html';
-
-  it('should display errors', function() {
-    browser.get(URL);
-
-    var form = element.all(by.css('form')).first();
-    var input = element.all(by.css('#creditCard')).first();
-    var firstName = element.all(by.css('#firstName')).first();
-
-    input.sendKeys('invalid');
-    firstName.click();
-
-    expect(form.getInnerHtml()).toContain('is invalid credit card number');
-  });
-});
diff --git a/modules/examples/e2e_test/order_management/order_management_spec.dart b/modules/examples/e2e_test/order_management/order_management_spec.dart
deleted file mode 100644
index 25cb9917f143..000000000000
--- a/modules/examples/e2e_test/order_management/order_management_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library examples.e2e_test.order_management_spec;
-
-main() {
-
-}
diff --git a/modules/examples/e2e_test/order_management/order_management_spec.ts b/modules/examples/e2e_test/order_management/order_management_spec.ts
deleted file mode 100644
index 1e6e6678309e..000000000000
--- a/modules/examples/e2e_test/order_management/order_management_spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('Order Management CRUD', function() {
-  var URL = 'examples/src/order_management/index.html';
-
-  it('should work', function() {
-    browser.get(URL);
-    verifyNoBrowserErrors();
-  });
-});
diff --git a/modules/examples/e2e_test/person_management/person_management_spec.dart b/modules/examples/e2e_test/person_management/person_management_spec.dart
deleted file mode 100644
index 49b417e414f3..000000000000
--- a/modules/examples/e2e_test/person_management/person_management_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library examples.e2e_test.person_management_spec;
-
-main() {
-
-}
diff --git a/modules/examples/e2e_test/person_management/person_management_spec.ts b/modules/examples/e2e_test/person_management/person_management_spec.ts
deleted file mode 100644
index 1284098f36e6..000000000000
--- a/modules/examples/e2e_test/person_management/person_management_spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('Person Management CRUD', function() {
-  var URL = 'examples/src/person_management/index.html';
-
-  it('should work', function() {
-    browser.get(URL);
-    verifyNoBrowserErrors();
-  });
-});
diff --git a/modules/examples/e2e_test/sourcemap/sourcemap_spec.dart b/modules/examples/e2e_test/sourcemap/sourcemap_spec.dart
deleted file mode 100644
index 214405f8ad97..000000000000
--- a/modules/examples/e2e_test/sourcemap/sourcemap_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library examples.e2e_test.sourcemap.sourcemap_spec;
-
-main() {
-
-}
diff --git a/modules/examples/e2e_test/sourcemap/sourcemap_spec.ts b/modules/examples/e2e_test/sourcemap/sourcemap_spec.ts
deleted file mode 100644
index 8fc9f7bcc408..000000000000
--- a/modules/examples/e2e_test/sourcemap/sourcemap_spec.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as testUtil from 'angular2/src/test_lib/e2e_util';
-
-var fs = require('fs');
-var sourceMap = require('source-map');
-
-describe('sourcemaps', function() {
-  var URL = 'examples/src/sourcemap/index.html';
-
-  it('should map sources', function() {
-    browser.get(URL);
-
-    $('error-app .errorButton').click();
-
-    // TODO(tbosch): Bug in ChromeDriver: Need to execute at least one command
-    // so that the browser logs can be read out!
-    browser.executeScript('1+1');
-    browser.manage().logs().get('browser').then(function(logs) {
-      var errorLine = null;
-      var errorColumn = null;
-      logs.forEach(function(log) {
-        var match = /\.createError\s+\(.+:(\d+):(\d+)/m.exec(log.message);
-        if (match) {
-          errorLine = parseInt(match[1]);
-          errorColumn = parseInt(match[2]);
-        }
-      });
-
-      expect(errorLine).not.toBeNull();
-      expect(errorColumn).not.toBeNull();
-
-
-      var sourceMapData = fs.readFileSync('dist/js/prod/es5/examples/src/sourcemap/index.js.map');
-      var decoder = new sourceMap.SourceMapConsumer(JSON.parse(sourceMapData));
-
-      var originalPosition = decoder.originalPositionFor({line: errorLine, column: errorColumn});
-
-      var finalMapData = fs.readFileSync('dist/js/prod/es6/examples/src/sourcemap/index.js.map');
-      var finalDecoder = new sourceMap.SourceMapConsumer(JSON.parse(finalMapData));
-
-      var finalPosition = finalDecoder.originalPositionFor(originalPosition);
-
-      var sourceCodeLines =
-          fs.readFileSync('modules/examples/src/sourcemap/index.ts', {encoding: 'UTF-8'})
-              .split('\n');
-      expect(sourceCodeLines[finalPosition.line - 1])
-          .toMatch(/throw new BaseException\(\'Sourcemap test\'\)/);
-    });
-  });
-});
diff --git a/modules/examples/e2e_test/template_driven_forms/template_driven_forms_spec.dart b/modules/examples/e2e_test/template_driven_forms/template_driven_forms_spec.dart
deleted file mode 100644
index 9379e996b52b..000000000000
--- a/modules/examples/e2e_test/template_driven_forms/template_driven_forms_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library examples.e2e_test.hello_world.template_driven_forms_spec;
-
-main() {
-
-}
diff --git a/modules/examples/e2e_test/template_driven_forms/template_driven_forms_spec.ts b/modules/examples/e2e_test/template_driven_forms/template_driven_forms_spec.ts
deleted file mode 100644
index f671a4a6136a..000000000000
--- a/modules/examples/e2e_test/template_driven_forms/template_driven_forms_spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('Template-Driven Forms', function() {
-
-  afterEach(verifyNoBrowserErrors);
-
-  var URL = 'examples/src/template_driven_forms/index.html';
-
-  it('should display errors', function() {
-    browser.get(URL);
-
-    var form = element.all(by.css('form')).first();
-    var input = element.all(by.css('#creditCard')).first();
-    var firstName = element.all(by.css('#firstName')).first();
-
-    input.sendKeys('invalid');
-    firstName.click();
-
-    expect(form.getInnerHtml()).toContain('is invalid credit card number');
-  });
-});
diff --git a/modules/examples/e2e_test/zippy_component/zippy_spec.dart b/modules/examples/e2e_test/zippy_component/zippy_spec.dart
deleted file mode 100644
index 8d232807d666..000000000000
--- a/modules/examples/e2e_test/zippy_component/zippy_spec.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-library examples.e2e_test.zippy_component.zippy_spec;
-
-main() {
-
-}
diff --git a/modules/examples/e2e_test/zippy_component/zippy_spec.ts b/modules/examples/e2e_test/zippy_component/zippy_spec.ts
deleted file mode 100644
index d1bb64b493f0..000000000000
--- a/modules/examples/e2e_test/zippy_component/zippy_spec.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
-
-describe('Zippy Component', function() {
-
-  afterEach(verifyNoBrowserErrors);
-
-  describe('dynamic reflection', function() {
-    var URL = 'examples/src/zippy_component/index.html';
-
-    beforeEach(function() { browser.get(URL); });
-
-    it('should change the zippy title depending on it\'s state', function() {
-      var zippyTitle = element(by.css('.zippy__title'));
-
-      expect(zippyTitle.getText()).toEqual('▾ Details');
-      zippyTitle.click();
-      expect(zippyTitle.getText()).toEqual('▸ Details');
-    });
-
-    it('should have zippy content', function() {
-      expect(element(by.css('.zippy__content')).getText()).toEqual('This is some content.');
-    });
-
-    it('should toggle when the zippy title is clicked', function() {
-      element(by.css('.zippy__title')).click();
-      expect(element(by.css('.zippy__content')).isDisplayed()).toEqual(false);
-      element(by.css('.zippy__title')).click();
-      expect(element(by.css('.zippy__content')).isDisplayed()).toEqual(true);
-    });
-  });
-});
diff --git a/modules/examples/pubspec.yaml b/modules/examples/pubspec.yaml
deleted file mode 100644
index 1c36276c125d..000000000000
--- a/modules/examples/pubspec.yaml
+++ /dev/null
@@ -1,32 +0,0 @@
-name: examples
-environment:
-  sdk: '>=1.10.0-dev.1.10 <2.0.0'
-dependencies:
-  angular2: '^<%= packageJson.version %>'
-  angular2_material: '^<%= packageJson.version %>'
-  browser: '^0.10.0'
-dev_dependencies:
-  guinness: '^0.1.17'
-  benchpress:
-    path: ../benchpress
-dependency_overrides:
-  angular2:
-    path: ../angular2
-  angular2_material:
-    path: ../angular2_material
-transformers:
-- angular2:
-    entry_points:
-        - web/src/hello_world/index_common.dart
-        - web/src/todo/index.dart
-    reflection_entry_points:
-        - web/src/hello_world/index.dart
-        - web/src/todo/index.dart
-- $dart2js:
-    minify: false
-    commandLineOptions:
-    - --dump-info
-    - --show-package-warnings
-    - --trust-type-annotations
-    - --trust-primitives
-    - --enable-experimental-mirrors
diff --git a/modules/examples/src/gestures/index.html b/modules/examples/src/gestures/index.html
deleted file mode 100644
index 2b9bcebff85c..000000000000
--- a/modules/examples/src/gestures/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Hammer.JS</title>
-    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
-    <style type="text/css">
-      html, body {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-      }
-    </style>
-  </head>
-<body>
-  <gestures-app></gestures-app>
-
-  <script type="application/javascript">
-// Custom build of hammer - master branch
-// Required fixes for bug 688, 644 are not included in the latest release (2.0.4)
-
-/*! Hammer.JS - v2.0.4 - 2015-01-15
- * http://hammerjs.github.io/
- *
- * Copyright (c) 2015 Jorik Tangelder;
- * Licensed under the MIT license */
-!function(a,b,c,d){"use strict";function e(a,b,c){return setTimeout(k(a,c),b)}function f(a,b,c){return Array.isArray(a)?(g(a,c[b],c),!0):!1}function g(a,b,c){var e;if(a)if(a.forEach)a.forEach(b,c);else if(a.length!==d)for(e=0;e<a.length;)b.call(c,a[e],e,a),e++;else for(e in a)a.hasOwnProperty(e)&&b.call(c,a[e],e,a)}function h(a,b,c){for(var e=Object.keys(b),f=0;f<e.length;)(!c||c&&a[e[f]]===d)&&(a[e[f]]=b[e[f]]),f++;return a}function i(a,b){return h(a,b,!0)}function j(a,b,c){var d,e=b.prototype;d=a.prototype=Object.create(e),d.constructor=a,d._super=e,c&&h(d,c)}function k(a,b){return function(){return a.apply(b,arguments)}}function l(a,b){return typeof a==kb?a.apply(b?b[0]||d:d,b):a}function m(a,b){return a===d?b:a}function n(a,b,c){g(r(b),function(b){a.addEventListener(b,c,!1)})}function o(a,b,c){g(r(b),function(b){a.removeEventListener(b,c,!1)})}function p(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1}function q(a,b){return a.indexOf(b)>-1}function r(a){return a.trim().split(/\s+/g)}function s(a,b,c){if(a.indexOf&&!c)return a.indexOf(b);for(var d=0;d<a.length;){if(c&&a[d][c]==b||!c&&a[d]===b)return d;d++}return-1}function t(a){return Array.prototype.slice.call(a,0)}function u(a,b,c){for(var d=[],e=[],f=0;f<a.length;){var g=b?a[f][b]:a[f];s(e,g)<0&&d.push(a[f]),e[f]=g,f++}return c&&(d=b?d.sort(function(a,c){return a[b]>c[b]}):d.sort()),d}function v(a,b){for(var c,e,f=b[0].toUpperCase()+b.slice(1),g=0;g<ib.length;){if(c=ib[g],e=c?c+f:b,e in a)return e;g++}return d}function w(){return ob++}function x(b){var c=b.ownerDocument||b;return c.defaultView||c.parentWindow||a}function y(a,b){var c=this;this.manager=a,this.callback=b,this.element=a.element,this.target=a.options.inputTarget,this.domHandler=function(b){l(a.options.enable,[a])&&c.handler(b)},this.init()}function z(a){var b,c=a.options.inputClass;return new(b=c?c:rb?N:sb?Q:qb?S:M)(a,A)}function A(a,b,c){var d=c.pointers.length,e=c.changedPointers.length,f=b&yb&&d-e===0,g=b&(Ab|Bb)&&d-e===0;c.isFirst=!!f,c.isFinal=!!g,f&&(a.session={}),c.eventType=b,B(a,c),a.emit("hammer.input",c),a.recognize(c),a.session.prevInput=c}function B(a,b){var c=a.session,d=b.pointers,e=d.length;c.firstInput||(c.firstInput=E(b)),e>1&&!c.firstMultiple?c.firstMultiple=E(b):1===e&&(c.firstMultiple=!1);var f=c.firstInput,g=c.firstMultiple,h=g?g.center:f.center,i=b.center=F(d);b.timeStamp=nb(),b.deltaTime=b.timeStamp-f.timeStamp,b.angle=J(h,i),b.distance=I(h,i),C(c,b),b.offsetDirection=H(b.deltaX,b.deltaY),b.scale=g?L(g.pointers,d):1,b.rotation=g?K(g.pointers,d):0,D(c,b);var j=a.element;p(b.srcEvent.target,j)&&(j=b.srcEvent.target),b.target=j}function C(a,b){var c=b.center,d=a.offsetDelta||{},e=a.prevDelta||{},f=a.prevInput||{};(b.eventType===yb||f.eventType===Ab)&&(e=a.prevDelta={x:f.deltaX||0,y:f.deltaY||0},d=a.offsetDelta={x:c.x,y:c.y}),b.deltaX=e.x+(c.x-d.x),b.deltaY=e.y+(c.y-d.y)}function D(a,b){var c,e,f,g,h=a.lastInterval||b,i=b.timeStamp-h.timeStamp;if(b.eventType!=Bb&&(i>xb||h.velocity===d)){var j=h.deltaX-b.deltaX,k=h.deltaY-b.deltaY,l=G(i,j,k);e=l.x,f=l.y,c=mb(l.x)>mb(l.y)?l.x:l.y,g=H(j,k),a.lastInterval=b}else c=h.velocity,e=h.velocityX,f=h.velocityY,g=h.direction;b.velocity=c,b.velocityX=e,b.velocityY=f,b.direction=g}function E(a){for(var b=[],c=0;c<a.pointers.length;)b[c]={clientX:lb(a.pointers[c].clientX),clientY:lb(a.pointers[c].clientY)},c++;return{timeStamp:nb(),pointers:b,center:F(b),deltaX:a.deltaX,deltaY:a.deltaY}}function F(a){var b=a.length;if(1===b)return{x:lb(a[0].clientX),y:lb(a[0].clientY)};for(var c=0,d=0,e=0;b>e;)c+=a[e].clientX,d+=a[e].clientY,e++;return{x:lb(c/b),y:lb(d/b)}}function G(a,b,c){return{x:b/a||0,y:c/a||0}}function H(a,b){return a===b?Cb:mb(a)>=mb(b)?a>0?Db:Eb:b>0?Fb:Gb}function I(a,b,c){c||(c=Kb);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return Math.sqrt(d*d+e*e)}function J(a,b,c){c||(c=Kb);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return 180*Math.atan2(e,d)/Math.PI}function K(a,b){return J(b[1],b[0],Lb)-J(a[1],a[0],Lb)}function L(a,b){return I(b[0],b[1],Lb)/I(a[0],a[1],Lb)}function M(){this.evEl=Nb,this.evWin=Ob,this.allow=!0,this.pressed=!1,y.apply(this,arguments)}function N(){this.evEl=Rb,this.evWin=Sb,y.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}function O(){this.evTarget=Ub,this.evWin=Vb,this.started=!1,y.apply(this,arguments)}function P(a,b){var c=t(a.touches),d=t(a.changedTouches);return b&(Ab|Bb)&&(c=u(c.concat(d),"identifier",!0)),[c,d]}function Q(){this.evTarget=Xb,this.targetIds={},y.apply(this,arguments)}function R(a,b){var c=t(a.touches),d=this.targetIds;if(b&(yb|zb)&&1===c.length)return d[c[0].identifier]=!0,[c,c];var e,f,g=t(a.changedTouches),h=[],i=this.target;if(f=c.filter(function(a){return p(a.target,i)}),b===yb)for(e=0;e<f.length;)d[f[e].identifier]=!0,e++;for(e=0;e<g.length;)d[g[e].identifier]&&h.push(g[e]),b&(Ab|Bb)&&delete d[g[e].identifier],e++;return h.length?[u(f.concat(h),"identifier",!0),h]:void 0}function S(){y.apply(this,arguments);var a=k(this.handler,this);this.touch=new Q(this.manager,a),this.mouse=new M(this.manager,a)}function T(a,b){this.manager=a,this.set(b)}function U(a){if(q(a,bc))return bc;var b=q(a,cc),c=q(a,dc);return b&&c?cc+" "+dc:b||c?b?cc:dc:q(a,ac)?ac:_b}function V(a){this.id=w(),this.manager=null,this.options=i(a||{},this.defaults),this.options.enable=m(this.options.enable,!0),this.state=ec,this.simultaneous={},this.requireFail=[]}function W(a){return a&jc?"cancel":a&hc?"end":a&gc?"move":a&fc?"start":""}function X(a){return a==Gb?"down":a==Fb?"up":a==Db?"left":a==Eb?"right":""}function Y(a,b){var c=b.manager;return c?c.get(a):a}function Z(){V.apply(this,arguments)}function $(){Z.apply(this,arguments),this.pX=null,this.pY=null}function _(){Z.apply(this,arguments)}function ab(){V.apply(this,arguments),this._timer=null,this._input=null}function bb(){Z.apply(this,arguments)}function cb(){Z.apply(this,arguments)}function db(){V.apply(this,arguments),this.pTime=!1,this.pCenter=!1,this._timer=null,this._input=null,this.count=0}function eb(a,b){return b=b||{},b.recognizers=m(b.recognizers,eb.defaults.preset),new fb(a,b)}function fb(a,b){b=b||{},this.options=i(b,eb.defaults),this.options.inputTarget=this.options.inputTarget||a,this.handlers={},this.session={},this.recognizers=[],this.element=a,this.input=z(this),this.touchAction=new T(this,this.options.touchAction),gb(this,!0),g(b.recognizers,function(a){var b=this.add(new a[0](a[1]));a[2]&&b.recognizeWith(a[2]),a[3]&&b.requireFailure(a[3])},this)}function gb(a,b){var c=a.element;c.style&&g(a.options.cssProps,function(a,d){c.style[v(c.style,d)]=b?a:""})}function hb(a,c){var d=b.createEvent("Event");d.initEvent(a,!0,!0),d.gesture=c,c.target.dispatchEvent(d)}var ib=["","webkit","moz","MS","ms","o"],jb=b.createElement("div"),kb="function",lb=Math.round,mb=Math.abs,nb=Date.now,ob=1,pb=/mobile|tablet|ip(ad|hone|od)|android/i,qb="ontouchstart"in a,rb=v(a,"PointerEvent")!==d,sb=qb&&pb.test(navigator.userAgent),tb="touch",ub="pen",vb="mouse",wb="kinect",xb=25,yb=1,zb=2,Ab=4,Bb=8,Cb=1,Db=2,Eb=4,Fb=8,Gb=16,Hb=Db|Eb,Ib=Fb|Gb,Jb=Hb|Ib,Kb=["x","y"],Lb=["clientX","clientY"];y.prototype={handler:function(){},init:function(){this.evEl&&n(this.element,this.evEl,this.domHandler),this.evTarget&&n(this.target,this.evTarget,this.domHandler),this.evWin&&n(x(this.element),this.evWin,this.domHandler)},destroy:function(){this.evEl&&o(this.element,this.evEl,this.domHandler),this.evTarget&&o(this.target,this.evTarget,this.domHandler),this.evWin&&o(x(this.element),this.evWin,this.domHandler)}};var Mb={mousedown:yb,mousemove:zb,mouseup:Ab},Nb="mousedown",Ob="mousemove mouseup";j(M,y,{handler:function(a){var b=Mb[a.type];b&yb&&0===a.button&&(this.pressed=!0),b&zb&&1!==a.which&&(b=Ab),this.pressed&&this.allow&&(b&Ab&&(this.pressed=!1),this.callback(this.manager,b,{pointers:[a],changedPointers:[a],pointerType:vb,srcEvent:a}))}});var Pb={pointerdown:yb,pointermove:zb,pointerup:Ab,pointercancel:Bb,pointerout:Bb},Qb={2:tb,3:ub,4:vb,5:wb},Rb="pointerdown",Sb="pointermove pointerup pointercancel";a.MSPointerEvent&&(Rb="MSPointerDown",Sb="MSPointerMove MSPointerUp MSPointerCancel"),j(N,y,{handler:function(a){var b=this.store,c=!1,d=a.type.toLowerCase().replace("ms",""),e=Pb[d],f=Qb[a.pointerType]||a.pointerType,g=f==tb,h=s(b,a.pointerId,"pointerId");e&yb&&(0===a.button||g)?0>h&&(b.push(a),h=b.length-1):e&(Ab|Bb)&&(c=!0),0>h||(b[h]=a,this.callback(this.manager,e,{pointers:b,changedPointers:[a],pointerType:f,srcEvent:a}),c&&b.splice(h,1))}});var Tb={touchstart:yb,touchmove:zb,touchend:Ab,touchcancel:Bb},Ub="touchstart",Vb="touchstart touchmove touchend touchcancel";j(O,y,{handler:function(a){var b=Tb[a.type];if(b===yb&&(this.started=!0),this.started){var c=P.call(this,a,b);b&(Ab|Bb)&&c[0].length-c[1].length===0&&(this.started=!1),this.callback(this.manager,b,{pointers:c[0],changedPointers:c[1],pointerType:tb,srcEvent:a})}}});var Wb={touchstart:yb,touchmove:zb,touchend:Ab,touchcancel:Bb},Xb="touchstart touchmove touchend touchcancel";j(Q,y,{handler:function(a){var b=Wb[a.type],c=R.call(this,a,b);c&&this.callback(this.manager,b,{pointers:c[0],changedPointers:c[1],pointerType:tb,srcEvent:a})}}),j(S,y,{handler:function(a,b,c){var d=c.pointerType==tb,e=c.pointerType==vb;if(d)this.mouse.allow=!1;else if(e&&!this.mouse.allow)return;b&(Ab|Bb)&&(this.mouse.allow=!0),this.callback(a,b,c)},destroy:function(){this.touch.destroy(),this.mouse.destroy()}});var Yb=v(jb.style,"touchAction"),Zb=Yb!==d,$b="compute",_b="auto",ac="manipulation",bc="none",cc="pan-x",dc="pan-y";T.prototype={set:function(a){a==$b&&(a=this.compute()),Zb&&this.manager.element.style&&(this.manager.element.style[Yb]=a),this.actions=a.toLowerCase().trim()},update:function(){this.set(this.manager.options.touchAction)},compute:function(){var a=[];return g(this.manager.recognizers,function(b){l(b.options.enable,[b])&&(a=a.concat(b.getTouchAction()))}),U(a.join(" "))},preventDefaults:function(a){if(!Zb){var b=a.srcEvent,c=a.offsetDirection;if(this.manager.session.prevented)return void b.preventDefault();var d=this.actions,e=q(d,bc),f=q(d,dc),g=q(d,cc);return e||f&&c&Hb||g&&c&Ib?this.preventSrc(b):void 0}},preventSrc:function(a){this.manager.session.prevented=!0,a.preventDefault()}};var ec=1,fc=2,gc=4,hc=8,ic=hc,jc=16,kc=32;V.prototype={defaults:{},set:function(a){return h(this.options,a),this.manager&&this.manager.touchAction.update(),this},recognizeWith:function(a){if(f(a,"recognizeWith",this))return this;var b=this.simultaneous;return a=Y(a,this),b[a.id]||(b[a.id]=a,a.recognizeWith(this)),this},dropRecognizeWith:function(a){return f(a,"dropRecognizeWith",this)?this:(a=Y(a,this),delete this.simultaneous[a.id],this)},requireFailure:function(a){if(f(a,"requireFailure",this))return this;var b=this.requireFail;return a=Y(a,this),-1===s(b,a)&&(b.push(a),a.requireFailure(this)),this},dropRequireFailure:function(a){if(f(a,"dropRequireFailure",this))return this;a=Y(a,this);var b=s(this.requireFail,a);return b>-1&&this.requireFail.splice(b,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(a){return!!this.simultaneous[a.id]},emit:function(a){function b(b){c.manager.emit(c.options.event+(b?W(d):""),a)}var c=this,d=this.state;hc>d&&b(!0),b(),d>=hc&&b(!0)},tryEmit:function(a){return this.canEmit()?this.emit(a):void(this.state=kc)},canEmit:function(){for(var a=0;a<this.requireFail.length;){if(!(this.requireFail[a].state&(kc|ec)))return!1;a++}return!0},recognize:function(a){var b=h({},a);return l(this.options.enable,[this,b])?(this.state&(ic|jc|kc)&&(this.state=ec),this.state=this.process(b),void(this.state&(fc|gc|hc|jc)&&this.tryEmit(b))):(this.reset(),void(this.state=kc))},process:function(){},getTouchAction:function(){},reset:function(){}},j(Z,V,{defaults:{pointers:1},attrTest:function(a){var b=this.options.pointers;return 0===b||a.pointers.length===b},process:function(a){var b=this.state,c=a.eventType,d=b&(fc|gc),e=this.attrTest(a);return d&&(c&Bb||!e)?b|jc:d||e?c&Ab?b|hc:b&fc?b|gc:fc:kc}}),j($,Z,{defaults:{event:"pan",threshold:10,pointers:1,direction:Jb},getTouchAction:function(){var a=this.options.direction,b=[];return a&Hb&&b.push(dc),a&Ib&&b.push(cc),b},directionTest:function(a){var b=this.options,c=!0,d=a.distance,e=a.direction,f=a.deltaX,g=a.deltaY;return e&b.direction||(b.direction&Hb?(e=0===f?Cb:0>f?Db:Eb,c=f!=this.pX,d=Math.abs(a.deltaX)):(e=0===g?Cb:0>g?Fb:Gb,c=g!=this.pY,d=Math.abs(a.deltaY))),a.direction=e,c&&d>b.threshold&&e&b.direction},attrTest:function(a){return Z.prototype.attrTest.call(this,a)&&(this.state&fc||!(this.state&fc)&&this.directionTest(a))},emit:function(a){this.pX=a.deltaX,this.pY=a.deltaY;var b=X(a.direction);b&&this.manager.emit(this.options.event+b,a),this._super.emit.call(this,a)}}),j(_,Z,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return[bc]},attrTest:function(a){return this._super.attrTest.call(this,a)&&(Math.abs(a.scale-1)>this.options.threshold||this.state&fc)},emit:function(a){if(this._super.emit.call(this,a),1!==a.scale){var b=a.scale<1?"in":"out";this.manager.emit(this.options.event+b,a)}}}),j(ab,V,{defaults:{event:"press",pointers:1,time:500,threshold:5},getTouchAction:function(){return[_b]},process:function(a){var b=this.options,c=a.pointers.length===b.pointers,d=a.distance<b.threshold,f=a.deltaTime>b.time;if(this._input=a,!d||!c||a.eventType&(Ab|Bb)&&!f)this.reset();else if(a.eventType&yb)this.reset(),this._timer=e(function(){this.state=ic,this.tryEmit()},b.time,this);else if(a.eventType&Ab)return ic;return kc},reset:function(){clearTimeout(this._timer)},emit:function(a){this.state===ic&&(a&&a.eventType&Ab?this.manager.emit(this.options.event+"up",a):(this._input.timeStamp=nb(),this.manager.emit(this.options.event,this._input)))}}),j(bb,Z,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return[bc]},attrTest:function(a){return this._super.attrTest.call(this,a)&&(Math.abs(a.rotation)>this.options.threshold||this.state&fc)}}),j(cb,Z,{defaults:{event:"swipe",threshold:10,velocity:.65,direction:Hb|Ib,pointers:1},getTouchAction:function(){return $.prototype.getTouchAction.call(this)},attrTest:function(a){var b,c=this.options.direction;return c&(Hb|Ib)?b=a.velocity:c&Hb?b=a.velocityX:c&Ib&&(b=a.velocityY),this._super.attrTest.call(this,a)&&c&a.direction&&a.distance>this.options.threshold&&mb(b)>this.options.velocity&&a.eventType&Ab},emit:function(a){var b=X(a.direction);b&&this.manager.emit(this.options.event+b,a),this.manager.emit(this.options.event,a)}}),j(db,V,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:2,posThreshold:10},getTouchAction:function(){return[ac]},process:function(a){var b=this.options,c=a.pointers.length===b.pointers,d=a.distance<b.threshold,f=a.deltaTime<b.time;if(this.reset(),a.eventType&yb&&0===this.count)return this.failTimeout();if(d&&f&&c){if(a.eventType!=Ab)return this.failTimeout();var g=this.pTime?a.timeStamp-this.pTime<b.interval:!0,h=!this.pCenter||I(this.pCenter,a.center)<b.posThreshold;this.pTime=a.timeStamp,this.pCenter=a.center,h&&g?this.count+=1:this.count=1,this._input=a;var i=this.count%b.taps;if(0===i)return this.hasRequireFailures()?(this._timer=e(function(){this.state=ic,this.tryEmit()},b.interval,this),fc):ic}return kc},failTimeout:function(){return this._timer=e(function(){this.state=kc},this.options.interval,this),kc},reset:function(){clearTimeout(this._timer)},emit:function(){this.state==ic&&(this._input.tapCount=this.count,this.manager.emit(this.options.event,this._input))}}),eb.VERSION="2.0.4",eb.defaults={domEvents:!1,touchAction:$b,enable:!0,inputTarget:null,inputClass:null,preset:[[bb,{enable:!1}],[_,{enable:!1},["rotate"]],[cb,{direction:Hb}],[$,{direction:Hb},["swipe"]],[db],[db,{event:"doubletap",taps:2},["tap"]],[ab]],cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}};var lc=1,mc=2;fb.prototype={set:function(a){return h(this.options,a),a.touchAction&&this.touchAction.update(),a.inputTarget&&(this.input.destroy(),this.input.target=a.inputTarget,this.input.init()),this},stop:function(a){this.session.stopped=a?mc:lc},recognize:function(a){var b=this.session;if(!b.stopped){this.touchAction.preventDefaults(a);var c,d=this.recognizers,e=b.curRecognizer;(!e||e&&e.state&ic)&&(e=b.curRecognizer=null);for(var f=0;f<d.length;)c=d[f],b.stopped===mc||e&&c!=e&&!c.canRecognizeWith(e)?c.reset():c.recognize(a),!e&&c.state&(fc|gc|hc)&&(e=b.curRecognizer=c),f++}},get:function(a){if(a instanceof V)return a;for(var b=this.recognizers,c=0;c<b.length;c++)if(b[c].options.event==a)return b[c];return null},add:function(a){if(f(a,"add",this))return this;var b=this.get(a.options.event);return b&&this.remove(b),this.recognizers.push(a),a.manager=this,this.touchAction.update(),a},remove:function(a){if(f(a,"remove",this))return this;var b=this.recognizers;return a=this.get(a),b.splice(s(b,a),1),this.touchAction.update(),this},on:function(a,b){var c=this.handlers;return g(r(a),function(a){c[a]=c[a]||[],c[a].push(b)}),this},off:function(a,b){var c=this.handlers;return g(r(a),function(a){b?c[a].splice(s(c[a],b),1):delete c[a]}),this},emit:function(a,b){this.options.domEvents&&hb(a,b);var c=this.handlers[a]&&this.handlers[a].slice();if(c&&c.length){b.type=a,b.preventDefault=function(){b.srcEvent.preventDefault()};for(var d=0;d<c.length;)c[d](b),d++}},destroy:function(){this.element&&gb(this,!1),this.handlers={},this.session={},this.input.destroy(),this.element=null}},h(eb,{INPUT_START:yb,INPUT_MOVE:zb,INPUT_END:Ab,INPUT_CANCEL:Bb,STATE_POSSIBLE:ec,STATE_BEGAN:fc,STATE_CHANGED:gc,STATE_ENDED:hc,STATE_RECOGNIZED:ic,STATE_CANCELLED:jc,STATE_FAILED:kc,DIRECTION_NONE:Cb,DIRECTION_LEFT:Db,DIRECTION_RIGHT:Eb,DIRECTION_UP:Fb,DIRECTION_DOWN:Gb,DIRECTION_HORIZONTAL:Hb,DIRECTION_VERTICAL:Ib,DIRECTION_ALL:Jb,Manager:fb,Input:y,TouchAction:T,TouchInput:Q,MouseInput:M,PointerEventInput:N,TouchMouseInput:S,SingleTouchInput:O,Recognizer:V,AttrRecognizer:Z,Tap:db,Pan:$,Swipe:cb,Pinch:_,Rotate:bb,Press:ab,on:n,off:o,each:g,merge:i,extend:h,inherit:j,bindFn:k,prefixed:v}),typeof define==kb&&define.amd?define(function(){return eb}):"undefined"!=typeof module&&module.exports?module.exports=eb:a[c]=eb}(window,document,"Hammer");
-  </script>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/gestures/index.ts b/modules/examples/src/gestures/index.ts
deleted file mode 100644
index f63307b33284..000000000000
--- a/modules/examples/src/gestures/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {bootstrap, Component, View} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-@Component({selector: 'gestures-app'})
-@View({templateUrl: 'template.html'})
-class GesturesCmp {
-  swipeDirection: string = '-';
-  pinchScale: number = 1;
-  rotateAngle: number = 0;
-
-  onSwipe(event): void { this.swipeDirection = event.deltaX > 0 ? 'right' : 'left'; }
-
-  onPinch(event): void { this.pinchScale = event.scale; }
-
-  onRotate(event): void { this.rotateAngle = event.rotation; }
-}
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(GesturesCmp);
-}
diff --git a/modules/examples/src/hello_world/index.html b/modules/examples/src/hello_world/index.html
deleted file mode 100644
index 1e6008f42b2a..000000000000
--- a/modules/examples/src/hello_world/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html>
-  <title>Hello Angular 2.0</title>
-<body>
-  <hello-app>
-    Loading...
-  </hello-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/hello_world/index.ts b/modules/examples/src/hello_world/index.ts
deleted file mode 100644
index c7802178f947..000000000000
--- a/modules/examples/src/hello_world/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {HelloCmp} from './index_common';
-import {bootstrap} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-export function main() {
-  // For Dart users: Initializing the reflector is only required for the Dart version of the
-  // application. When using Dart, the reflection information is not embedded by default in the
-  // source code to keep the size of the generated file small. Importing ReflectionCapabilities and
-  // initializing the reflector is required to use the reflection information from Dart mirrors.
-  // Dart mirrors are not intended to be use in production code.
-  // Angular 2 provides a transformer which generates static code rather than rely on reflection.
-  // For an example, run `pub serve` on the Dart application and inspect this file in your browser.
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-
-  // Bootstrapping only requires specifying a root component.
-  // The boundary between the Angular application and the rest of the page is
-  // the shadowDom of this root component.
-  // The selector of the component passed in is used to find where to insert the
-  // application.
-  // You can use the light dom of the <hello-app> tag as temporary content (for
-  // example 'Loading...') before the application is ready.
-  bootstrap(HelloCmp);
-}
diff --git a/modules/examples/src/hello_world/index_common.ts b/modules/examples/src/hello_world/index_common.ts
deleted file mode 100644
index 4348a0e2b1a6..000000000000
--- a/modules/examples/src/hello_world/index_common.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {ElementRef, Component, Directive, View, Injectable, Renderer} from 'angular2/angular2';
-
-// A service available to the Injector, used by the HelloCmp component.
-@Injectable()
-class GreetingService {
-  greeting: string = 'hello';
-}
-
-// Directives are light-weight. They don't allow new
-// expression contexts (use @Component for those needs).
-@Directive({selector: '[red]'})
-class RedDec {
-  // ElementRef is always injectable and it wraps the element on which the
-  // directive was found by the compiler.
-  constructor(el: ElementRef, renderer: Renderer) { renderer.setElementStyle(el, 'color', 'red'); }
-}
-
-// Angular 2.0 supports 2 basic types of directives:
-// - Component - the basic building blocks of Angular 2.0 apps. Backed by
-//   ShadowDom.(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
-// - Directive - add behavior to existing elements.
-
-// @Component is AtScript syntax to annotate the HelloCmp class as an Angular
-// 2.0 component.
-@Component({
-  // The Selector prop tells Angular on which elements to instantiate this
-  // class. The syntax supported is a basic subset of CSS selectors, for example
-  // 'element', '[attr]', [attr=foo]', etc.
-  selector: 'hello-app',
-  // These are services that would be created if a class in the component's
-  // template tries to inject them.
-  viewInjector: [GreetingService]
-})
-// The template for the component.
-@View({
-  // Expressions in the template (like {{greeting}}) are evaluated in the
-  // context of the HelloCmp class below.
-  template: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
-           <button class="changeButton" (click)="changeGreeting()">change greeting</button>`,
-  // All directives used in the template need to be specified. This allows for
-  // modularity (RedDec can only be used in this template)
-  // and better tooling (the template can be invalidated if the attribute is
-  // misspelled).
-  directives: [RedDec]
-})
-export class HelloCmp {
-  greeting: string;
-
-  constructor(service: GreetingService) { this.greeting = service.greeting; }
-
-  changeGreeting(): void { this.greeting = 'howdy'; }
-}
diff --git a/modules/examples/src/hello_world/index_dynamic.html b/modules/examples/src/hello_world/index_dynamic.html
deleted file mode 100644
index 16b869170d63..000000000000
--- a/modules/examples/src/hello_world/index_dynamic.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html>
-  <title>Hello Angular 2.0 (Reflection)</title>
-<body>
-  <hello-app>
-    Loading...
-  </hello-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/hello_world/index_dynamic.ts b/modules/examples/src/hello_world/index_dynamic.ts
deleted file mode 100644
index fcc9b7120c29..000000000000
--- a/modules/examples/src/hello_world/index_dynamic.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {HelloCmp} from './index_common';
-import {bootstrap} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-export function main() {
-  // This entry point is not transformed and exists for testing purposes.
-  // See index.js for an explanation.
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(HelloCmp);
-}
diff --git a/modules/examples/src/http/http_comp.ts b/modules/examples/src/http/http_comp.ts
deleted file mode 100644
index 4485440798a5..000000000000
--- a/modules/examples/src/http/http_comp.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {Component, View, NgFor} from 'angular2/angular2';
-import {Http} from 'angular2/http';
-import {ObservableWrapper} from 'angular2/src/facade/async';
-
-@Component({selector: 'http-app'})
-@View({
-  directives: [NgFor],
-  template: `
-    <h1>people</h1>
-    <ul class="people">
-      <li *ng-for="#person of people">
-        hello, {{person['name']}}
-      </li>
-    </ul>
-  `
-})
-export class HttpCmp {
-  people: Object;
-  constructor(http: Http) {
-    ObservableWrapper.subscribe(http.get('./people.json'), res => this.people = res.json());
-  }
-}
diff --git a/modules/examples/src/http/index.html b/modules/examples/src/http/index.html
deleted file mode 100644
index 69d910f0d49d..000000000000
--- a/modules/examples/src/http/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html>
-  <title>Hello Http</title>
-<body>
-  <http-app>
-    Loading...
-  </http-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/http/index.ts b/modules/examples/src/http/index.ts
deleted file mode 100644
index d00a1ff5378a..000000000000
--- a/modules/examples/src/http/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/// <reference path="../../../angular2/typings/rx/rx.all.d.ts" />
-
-import {bootstrap} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {httpInjectables} from 'angular2/http';
-import {HttpCmp} from './http_comp';
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(HttpCmp, [httpInjectables]);
-}
diff --git a/modules/examples/src/http/index_dynamic.html b/modules/examples/src/http/index_dynamic.html
deleted file mode 100644
index 1eb9f874466d..000000000000
--- a/modules/examples/src/http/index_dynamic.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html>
-  <title>Angular 2.0 Http (Reflection)</title>
-<body>
-  <http-app>
-    Loading...
-  </http-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/http/index_dynamic.ts b/modules/examples/src/http/index_dynamic.ts
deleted file mode 100644
index 1599ef841df3..000000000000
--- a/modules/examples/src/http/index_dynamic.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {HttpCmp} from './http_comp';
-import {bootstrap} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {httpInjectables} from 'angular2/http';
-
-
-export function main() {
-  // This entry point is not transformed and exists for testing purposes.
-  // See index.js for an explanation.
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(HttpCmp, [httpInjectables]);
-}
diff --git a/modules/examples/src/key_events/index.html b/modules/examples/src/key_events/index.html
deleted file mode 100644
index fbceec80907f..000000000000
--- a/modules/examples/src/key_events/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!doctype html>
-<html>
-  <title>Key events</title>
-  <style>
-    .sample-area {
-      text-align: center;
-      margin: 5px;
-      height: 50px;
-      line-height: 50px;
-      border-radius: 5px;
-      border: 1px solid #d0d0d0;
-    }
-    .sample-area:focus {
-      border: 1px solid blue;
-      color: blue;
-      font-weight: bold;
-    }
-  </style>
-<body>
-  <key-events-app>
-    Loading...
-  </key-events-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/key_events/index.ts b/modules/examples/src/key_events/index.ts
deleted file mode 100644
index f30229e4bd1b..000000000000
--- a/modules/examples/src/key_events/index.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import {bootstrap, Component, View} from 'angular2/angular2';
-import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
-
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-@Component({selector: 'key-events-app'})
-@View({
-  template: `Click in the following area and press a key to display its name:<br>
-  <div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>
-  Click in the following area and press shift.enter:<br>
-  <div
-    (keydown.shift.enter)="onShiftEnter($event)"
-    (click)="resetShiftEnter()"
-    class="sample-area"
-    tabindex="0"
-  >{{shiftEnter ? 'You pressed shift.enter!' : ''}}</div>`
-})
-class KeyEventsApp {
-  lastKey: string = '(none)';
-  shiftEnter: boolean = false;
-
-  onKeyDown(event): void {
-    this.lastKey = KeyEventsPlugin.getEventFullKey(event);
-    event.preventDefault();
-  }
-
-  onShiftEnter(event): void {
-    this.shiftEnter = true;
-    event.preventDefault();
-  }
-
-  resetShiftEnter(): void { this.shiftEnter = false; }
-}
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();  // for the Dart version
-  bootstrap(KeyEventsApp);
-}
diff --git a/modules/examples/src/material/.clang-format b/modules/examples/src/material/.clang-format
deleted file mode 100644
index e60fec73575e..000000000000
--- a/modules/examples/src/material/.clang-format
+++ /dev/null
@@ -1,12 +0,0 @@
-Language:        JavaScript
-BasedOnStyle:    Google
-ColumnLimit:     100
-
-TabWidth:                2
-ContinuationIndentWidth: 4
-MaxEmptyLinesToKeep    : 2
-
-AllowShortBlocksOnASingleLine:              false
-AllowShortIfStatementsOnASingleLine:        false
-AllowShortLoopsOnASingleLine:               false
-AllowShortFunctionsOnASingleLine:           Empty
diff --git a/modules/examples/src/material/button/demo_app.html b/modules/examples/src/material/button/demo_app.html
deleted file mode 100644
index 8c09669dd030..000000000000
--- a/modules/examples/src/material/button/demo_app.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<style>
-  section {
-    background: #f7f7f7;
-    border-radius: 3px;
-    text-align: center;
-    margin: 1em;
-    position: relative !important;
-    padding-bottom: 10px;
-  }
-  section [md-button]:not(.md-fab) {
-    min-width: 10em;
-  }
-  section [md-button] {
-    display: inline-block;
-    margin: 1em;
-    line-height: 25px;
-  }
-.label {
-  position: absolute;
-  bottom: 5px;
-  left: 7px;
-  color: #ccc;
-  font-size: 14px;
-}
-</style>
-
-<h1>Button demo</h1>
-
-<p>
-  You just clicked: <span>{{previousClick}}</span>
-</p>
-
-<section>
-  <form (^submit)="submit('form submit')">
-    <button md-button>SUBMIT</button>
-    <button>Native button</button>
-  </form>
-
-  <span class="label">form submit</span>
-</section>
-
-<section>
-  <span class="label">Regular button</span>
-
-  <button md-button (^click)="click('button')">BUTTON</button>
-
-  <button md-button class="md-primary" (^click)="click('primary')">PRIMARY</button>
-  <button md-button disabled="disabled" (^click)="click('disabled')">DISABLED</button>
-  <button md-button class="md-accent" (^click)="click('accent')">ACCENT</button>
-  <button md-button class="md-warn" (^click)="click('warn')">WARN</button>
-</section>
-
-<section>
-  <span class="label">Raised button</span>
-  <button md-button class="md-raised" (^click)="click('raised')">BUTTON</button>
-  <button md-button class="md-raised md-primary" (^click)="click('raised primary')">PRIMARY</button>
-  <button md-button class="md-raised" disabled="disabled" (^click)="click('raised disabled')">DISABLED</button>
-  <button md-button class="md-raised md-accent" (^click)="click('raised accent')">ACCENT</button>
-  <button md-button class="md-raised md-warn" (^click)="click('raised warn')">WARN</button>
-</section>
-<section>
-  <span class="label">Fab button</span>
-  <button md-button class="md-fab" (^click)="click('fab')">BTN</button>
-  <button md-button class="md-fab md-primary" (^click)="click('fab primary')">PRMY</button>
-  <button md-button class="md-fab" disabled="disabled" (^click)="click('fab disabled')">DIS</button>
-  <button md-button class="md-fab md-accent" (^click)="click('fab accent')">ACC</button>
-  <button md-button class="md-fab md-warn" (^click)="click('fab warn')">WRN</button>
-</section>
-<section>
-  <span class="label">Anchor / hyperlink</span>
-  <a md-button href="http://google.com" target="_blank">HREF</a>
-  <a md-button href="http://google.com" disabled>DISABLED HREF</a>
-  <a md-button class="md-raised" target="_blank" href="http://google.com">RAISED HREF</a>
-</section>
-
-
-<p template="ng-for #item of items">
-  Repeated button:
-  <button md-button tabindex="-1" (^click)="increment()">{{action}}</button>
-  {{clickCount}}
-</p>
diff --git a/modules/examples/src/material/button/index.html b/modules/examples/src/material/button/index.html
deleted file mode 100644
index 2fa7e4d248db..000000000000
--- a/modules/examples/src/material/button/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title>ng-material button demo</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style> * { font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif; } </style>
-</head>
-<body>
-  <demo-app>Loading...</demo-app>
-  $SCRIPTS$
-</body>
-</html>
\ No newline at end of file
diff --git a/modules/examples/src/material/button/index.ts b/modules/examples/src/material/button/index.ts
deleted file mode 100644
index fb51584bd05c..000000000000
--- a/modules/examples/src/material/button/index.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {bootstrap, Component, View, NgFor} from 'angular2/angular2';
-import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdButton, MdAnchor, NgFor]})
-class DemoApp {
-  previousClick: string;
-  action: string;
-  clickCount: number;
-  items: List<number>;
-
-  constructor() {
-    this.previousClick = 'Nothing';
-    this.action = "ACTIVATE";
-    this.clickCount = 0;
-    this.items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
-  }
-
-  click(msg: string) {
-    this.previousClick = msg;
-  }
-
-  submit(msg: string, event) {
-    event.preventDefault();
-    this.previousClick = msg;
-  }
-
-  increment() {
-    this.clickCount++;
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
-}
diff --git a/modules/examples/src/material/checkbox/demo_app.html b/modules/examples/src/material/checkbox/demo_app.html
deleted file mode 100644
index cac15cdbf9dd..000000000000
--- a/modules/examples/src/material/checkbox/demo_app.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div md-theme="default">
-  <h2>Checkbox demo</h2>
-
-  <md-checkbox (^click)="increment()">Normal checkbox</md-checkbox>
-  <md-checkbox class="md-primary" (^click)="increment()">Primary checkbox</md-checkbox>
-  <md-checkbox disabled (^click)="increment()">Disabled checkbox</md-checkbox>
-
-  <p>Toggle count: {{toggleCount}}</p>
-</div>
diff --git a/modules/examples/src/material/checkbox/index.html b/modules/examples/src/material/checkbox/index.html
deleted file mode 100644
index 76f7c7f63c76..000000000000
--- a/modules/examples/src/material/checkbox/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title>ng-material checkbox demo</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style> * { font-family: RobotoDraft, Roboto; } </style>
-</head>
-<body>
-  <demo-app>Loading...</demo-app>
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/material/checkbox/index.ts b/modules/examples/src/material/checkbox/index.ts
deleted file mode 100644
index 1be5a932665d..000000000000
--- a/modules/examples/src/material/checkbox/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {bootstrap, Component, Directive, View} from 'angular2/angular2';
-import {MdCheckbox} from 'angular2_material/src/components/checkbox/checkbox';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdCheckbox]})
-class DemoApp {
-  toggleCount: number;
-
-  constructor() {
-    this.toggleCount = 0;
-  }
-
-  increment() {
-    this.toggleCount++;
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
-}
diff --git a/modules/examples/src/material/demo_common.ts b/modules/examples/src/material/demo_common.ts
deleted file mode 100644
index 4e3a2ad288f6..000000000000
--- a/modules/examples/src/material/demo_common.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import {IMPLEMENTS, print} from 'angular2/src/facade/lang';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {
-  isPresent,
-  isBlank,
-  RegExpWrapper,
-  StringWrapper,
-  BaseException
-} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Injectable} from 'angular2/di';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-
-
-export function commonDemoSetup(): void {
-  BrowserDomAdapter.makeCurrent();
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-}
-
-@Injectable()
-export class DemoUrlResolver extends UrlResolver {
-  static a;
-
-  isInPubServe: boolean;
-
-  constructor() {
-    super();
-    if (isBlank(DemoUrlResolver.a)) {
-      DemoUrlResolver.a = DOM.createElement('a');
-    }
-    this.isInPubServe = _isInPubServe();
-  }
-
-  resolve(baseUrl: string, url: string): string {
-    if (isBlank(baseUrl)) {
-      DOM.resolveAndSetHref(DemoUrlResolver.a, url, null);
-      return DOM.getHref(DemoUrlResolver.a);
-    }
-
-    if (isBlank(url) || url == '') {
-      return baseUrl;
-    }
-
-    if (url[0] == '/') {
-      return url;
-    }
-
-    var m = RegExpWrapper.firstMatch(_schemeRe, url);
-
-    if (isPresent(m[1])) {
-      return url;
-    }
-
-    if (StringWrapper.startsWith(url, './')) {
-      return `${baseUrl}/${url}`;
-    }
-
-    // Whether the `examples/` dir is being directly served (as the server root).
-    // For cases when this is not true AND we're in pub-serve, `examples/` needs to be
-    // prepended to the URL.
-    var isDirectlyServingExamplesDir = !StringWrapper.contains(baseUrl, 'examples/');
-
-    if (this.isInPubServe && isDirectlyServingExamplesDir) {
-      return `/packages/${url}`;
-    } else if (this.isInPubServe) {
-      return `/examples/packages/${url}`;
-    } else {
-      return `/${url}`;
-    }
-  }
-}
-
-var _schemeRe = RegExpWrapper.create('^([^:/?#]+:)?');
-
-// TODO: remove this hack when http://dartbug.com/23128 is fixed
-function _isInPubServe(): boolean {
-  try {
-    int.parse('123');
-    print('>> Running in Dart');
-    return true;
-  } catch (_) {
-    print('>> Running in JS');
-    return false;
-  }
-}
diff --git a/modules/examples/src/material/dialog/demo_app.html b/modules/examples/src/material/dialog/demo_app.html
deleted file mode 100644
index f06243c95cfa..000000000000
--- a/modules/examples/src/material/dialog/demo_app.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<div>
-  <h2>Dialog demo</h2>
-
-  <button id="open" type="button" (click)="open()" [disabled]="!!dialogRef">
-    Open a dialog
-  </button>
-
-  <button type="button" (click)="close()" [disabled]="!dialogRef">
-    Close the dialog
-  </button>
-
-  <p>
-    Last result: {{lastResult}}
-  </p>
-
-  <hr>
-
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-  <p> Here are some paragaphs to make the page scrollable</p>
-
-</div>
diff --git a/modules/examples/src/material/dialog/index.html b/modules/examples/src/material/dialog/index.html
deleted file mode 100644
index 6b9ed3c4d33d..000000000000
--- a/modules/examples/src/material/dialog/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title>ng-material dialog demo</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style> * { font-family: RobotoDraft, Roboto; } </style>
-</head>
-<body class="dialog-demo">
-  <demo-app>Loading...</demo-app>
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/material/dialog/index.ts b/modules/examples/src/material/dialog/index.ts
deleted file mode 100644
index cf55f5c477b5..000000000000
--- a/modules/examples/src/material/dialog/index.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import {bootstrap, ElementRef, ComponentRef, Component, View} from 'angular2/angular2';
-import {
-  MdDialog,
-  MdDialogRef,
-  MdDialogConfig
-} from 'angular2_material/src/components/dialog/dialog';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-import {isPresent} from 'angular2/src/facade/lang';
-
-
-@Component({
-  selector: 'demo-app',
-  viewInjector: [MdDialog],
-})
-@View({
-  templateUrl: './demo_app.html',
-  directives: [],
-})
-class DemoApp {
-  dialog: MdDialog;
-  elementRef: ElementRef;
-  dialogRef: MdDialogRef;
-  dialogConfig: MdDialogConfig;
-  lastResult: string;
-
-  constructor(mdDialog: MdDialog, elementRef: ElementRef) {
-    this.dialog = mdDialog;
-    this.elementRef = elementRef;
-    this.dialogConfig = new MdDialogConfig();
-
-    this.dialogConfig.width = '60%';
-    this.dialogConfig.height = '60%';
-    this.lastResult = '';
-  }
-
-  open() {
-    if (isPresent(this.dialogRef)) {
-      return;
-    }
-
-    this.dialog.open(SimpleDialogComponent, this.elementRef, this.dialogConfig)
-        .then(ref => {
-          this.dialogRef = ref;
-          ref.instance.numCoconuts = 777;
-
-          ref.whenClosed.then(result => {
-            this.dialogRef = null;
-            this.lastResult = result;
-          });
-        });
-  }
-
-  close() {
-    this.dialogRef.close();
-  }
-}
-
-@Component({
-  selector: 'simple-dialog',
-  properties: ['numCoconuts'],
-})
-@View({
-  template: `
-    <h2>This is the dialog content</h2>
-    <p>There are {{numCoconuts}} coconuts.</p>
-    <p>Return: <input (input)="updateValue($event)"></p>
-    <button type="button" (click)="done()">Done</button>
-  `,
-})
-class SimpleDialogComponent {
-  numCoconuts: number;
-  dialogRef: MdDialogRef;
-  toReturn: string;
-
-  constructor(dialogRef: MdDialogRef) {
-    this.numCoconuts = 0;
-    this.dialogRef = dialogRef;
-    this.toReturn = '';
-  }
-
-  updateValue(event) {
-    this.toReturn = event.target.value;
-  }
-
-  done() {
-    this.dialogRef.close(this.toReturn);
-  }
-}
-
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
-}
diff --git a/modules/examples/src/material/grid_list/demo_app.html b/modules/examples/src/material/grid_list/demo_app.html
deleted file mode 100644
index efec96443998..000000000000
--- a/modules/examples/src/material/grid_list/demo_app.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<style>
-  md-grid-tile {
-    background-color: lightblue;
-  }
-
-  md-grid-list {
-    min-height: 400px;
-  }
-</style>
-
-<div>
-
-  <h2>grid-list demo</h2>
-
-  <md-grid-list cols="4" row-height="50px" gutter-size="2em" id="complex">
-
-    <md-grid-tile rowspan="1" colspan="2"> Tile #1 </md-grid-tile>
-    <md-grid-tile rowspan="1" colspan="1"> Tile #2 </md-grid-tile>
-    <md-grid-tile rowspan="3" colspan="1"> Tile #3 </md-grid-tile>
-    <md-grid-tile rowspan="2" colspan="2"> Tile #4 </md-grid-tile>
-    <md-grid-tile rowspan="1" colspan="3"> Tile #5 </md-grid-tile>
-
-  </md-grid-list>
-
-  <hr>
-
-
-
-  <md-grid-list cols="4" row-height="50px" gutter-size="2em" id="simple">
-
-    <md-grid-tile rowspan="1" colspan="1"> Tile #1 </md-grid-tile>
-    <md-grid-tile rowspan="1" colspan="1"> Tile #2 </md-grid-tile>
-    <md-grid-tile rowspan="1" colspan="1"> Tile #3 </md-grid-tile>
-    <md-grid-tile rowspan="1" colspan="1"> Tile #4 </md-grid-tile>
-    <md-grid-tile rowspan="1" colspan="1"> Tile #5 </md-grid-tile>
-    <md-grid-tile rowspan="1" colspan="1"> Tile #6 </md-grid-tile>
-    <md-grid-tile rowspan="1" colspan="1"> Tile #7 </md-grid-tile>
-
-  </md-grid-list>
-
-</div>
diff --git a/modules/examples/src/material/grid_list/index.html b/modules/examples/src/material/grid_list/index.html
deleted file mode 100644
index 34821f9dc180..000000000000
--- a/modules/examples/src/material/grid_list/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title>ng-material grid-list demo</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style> * { font-family: RobotoDraft, Roboto; } </style>
-</head>
-<body>
-  <demo-app>Loading...</demo-app>
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/material/grid_list/index.ts b/modules/examples/src/material/grid_list/index.ts
deleted file mode 100644
index ae7bd807d32e..000000000000
--- a/modules/examples/src/material/grid_list/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {bootstrap, Component, View} from 'angular2/angular2';
-import {MdGridList, MdGridTile} from 'angular2_material/src/components/grid_list/grid_list';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdGridList, MdGridTile]})
-class DemoApp {
-  tile3RowSpan: number;
-  tile3ColSpan: number;
-
-  constructor() {
-    this.tile3RowSpan = 3;
-    this.tile3ColSpan = 3;
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
-}
diff --git a/modules/examples/src/material/input/demo_app.html b/modules/examples/src/material/input/demo_app.html
deleted file mode 100644
index 226514716175..000000000000
--- a/modules/examples/src/material/input/demo_app.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<style>@import "angular2_material/src/components/input/input.css";</style>
-
-<style>
-  body {
-    max-width: 500px;
-  }
-</style>
-
-<div>
-  <h2>input demo</h2>
-
-
-  <h3>Normal input</h3>
-  <md-input-container>
-    <label>Name</label>
-    <input md-input>
-  </md-input-container>
-
-  <h3>Pre-filled value</h3>
-  <md-input-container>
-    <label>Favorite Framework</label>
-    <input value="Angular">
-  </md-input-container>
-
-  <h3>Disabled input</h3>
-  <md-input-container>
-    <label>ID Number</label>
-    <input disabled>
-  </md-input-container>
-
-  <h3>Disabled, pre-filled input</h3>
-  <md-input-container>
-    <label>Best TV show</label>
-    <input disabled value="Firefly">
-  </md-input-container>
-
-  <!--<h3>textarea</h3>
-  <md-input-container>
-    <label>What I did on my summer vaccation</label>
-    <textarea></textarea>
-  </md-input-container>-->
-
-</div>
diff --git a/modules/examples/src/material/input/index.html b/modules/examples/src/material/input/index.html
deleted file mode 100644
index 548b5126bb3c..000000000000
--- a/modules/examples/src/material/input/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title>ng-material input demo</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style> * { font-family: RobotoDraft, Roboto; }
-  </style>
-</head>
-<body>
-  <demo-app>Loading...</demo-app>
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/material/input/index.ts b/modules/examples/src/material/input/index.ts
deleted file mode 100644
index 9fdc1fd91775..000000000000
--- a/modules/examples/src/material/input/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {bootstrap, Component, View} from 'angular2/angular2';
-import {MdInputContainer, MdInput} from 'angular2_material/src/components/input/input';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdInputContainer, MdInput]})
-class DemoApp {
-  constructor() {}
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
-}
diff --git a/modules/examples/src/material/progress-linear/demo_app.html b/modules/examples/src/material/progress-linear/demo_app.html
deleted file mode 100644
index c38818732ff5..000000000000
--- a/modules/examples/src/material/progress-linear/demo_app.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<link>
-
-<div style="width: 500px;">
-  <h2>Progress-linear demo</h2>
-
-  <p>
-    Determinate: primary
-    <md-progress-linear md-mode="determinate" [value]="progress" class="md-accent">
-    </md-progress-linear>
-  </p>
-
-  <p>
-    Determinate: accent
-    <md-progress-linear md-mode="determinate" [value]="progress" class="md-primary">
-    </md-progress-linear>
-  </p>
-
-  <p>
-    Buffer
-    <md-progress-linear md-mode="buffer"
-        [value]="progress" [buffer-value]="progress + (200 / progress)" class="md-warn">
-    </md-progress-linear>
-  </p>
-
-  <p>
-    Indeterminate
-    <md-progress-linear md-mode="indeterminate" class="md-primary">
-    </md-progress-linear>
-  </p>
-
-  <p>
-    Query
-    <md-progress-linear md-mode="query" class="md-accent">
-    </md-progress-linear>
-  </p>
-
-  <!--<md-progress-linear></md-progress-linear>-->
-
-  <p>Progress: {{progress}}</p>
-  <button type="button" (click)="step(10)" id="increment">Increment</button>
-  <button type="button" (click)="step(-10)" id="decrement">Decrement</button>
-</div>
diff --git a/modules/examples/src/material/progress-linear/index.html b/modules/examples/src/material/progress-linear/index.html
deleted file mode 100644
index 8cce9b6cc6e1..000000000000
--- a/modules/examples/src/material/progress-linear/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title>ng-material progress-linear demo</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style> * { font-family: RobotoDraft, Roboto; } </style>
-</head>
-<body>
-
-  <demo-app>Loading...</demo-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/material/progress-linear/index.ts b/modules/examples/src/material/progress-linear/index.ts
deleted file mode 100644
index e6a94a4d415d..000000000000
--- a/modules/examples/src/material/progress-linear/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {bootstrap, Component, View} from 'angular2/angular2';
-import {MdProgressLinear} from 'angular2_material/src/components/progress-linear/progress_linear';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdProgressLinear]})
-class DemoApp {
-  progress: number;
-
-  constructor() {
-    this.progress = 40;
-  }
-
-  step(s: number) {
-    this.progress += s;
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
-}
diff --git a/modules/examples/src/material/radio/demo_app.html b/modules/examples/src/material/radio/demo_app.html
deleted file mode 100644
index ad9117d12c16..000000000000
--- a/modules/examples/src/material/radio/demo_app.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<style>
-  md-radio-button {
-    max-width: 200px;
-  }
-</style>
-
-<div>
-  <h2>Radio buttons</h2>
-  <h3>Inside of a radiogroup</h3>
-
-  <md-radio-group #scifi (change)="onGroupChange()" id="scifi-group">
-    <md-radio-button value="star-wars">Star Wars</md-radio-button>
-    <md-radio-button value="star-trek" id="special-radio">Star Trek</md-radio-button>
-    <md-radio-button value="bsg" disabled>Battlestar Galactica</md-radio-button>
-    <md-radio-button [value]="thirdValue">Dr. Who</md-radio-button>
-  </md-radio-group>
-
-  <p>Your selection: {{scifi.value}}</p>
-  <p>radio group value change count: {{groupValueChangeCount}}</p>
-
-  <hr>
-  <h3>Standalone</h3>
-
-  <md-radio-button name="element" (^click)="onIndividualClick()">Earth</md-radio-button>
-  <md-radio-button name="element" (^click)="onIndividualClick()">Fire</md-radio-button>
-  <md-radio-button name="element" (^click)="onIndividualClick()" disabled>Wind (disabled)</md-radio-button>
-  <md-radio-button name="element" (^click)="onIndividualClick()">Heart</md-radio-button>
-
-  <p>individual radio value change count: {{individualValueChanges}}</p>
-
-  <hr>
-  <h3>Disabled radio group</h3>
-  <p>Chosen: {{pokemon}}</p>
-  <md-radio-group disabled [value]="pokemon">
-    <md-radio-button value="fire">Charmander</md-radio-button>
-    <md-radio-button value="leaf">Bulbasaur</md-radio-button>
-    <md-radio-button value="water">Squirtle</md-radio-button>
-  </md-radio-group>
-
-  <button type="button" (click)="chooseCharmander()">Choose Charmander</button>
-</div>
diff --git a/modules/examples/src/material/radio/index.html b/modules/examples/src/material/radio/index.html
deleted file mode 100644
index 58ae0384917d..000000000000
--- a/modules/examples/src/material/radio/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title>ng-material radio demo</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style> * { font-family: RobotoDraft, Roboto; } </style>
-</head>
-<body>
-
-  <demo-app>Loading...</demo-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/material/radio/index.ts b/modules/examples/src/material/radio/index.ts
deleted file mode 100644
index 82b113bcd0d1..000000000000
--- a/modules/examples/src/material/radio/index.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {bootstrap, Component, View} from 'angular2/angular2';
-import {MdRadioButton, MdRadioGroup} from 'angular2_material/src/components/radio/radio_button';
-import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-@Component({selector: 'demo-app', viewInjector: [MdRadioDispatcher]})
-@View({templateUrl: './demo_app.html', directives: [MdRadioGroup, MdRadioButton]})
-class DemoApp {
-  thirdValue;
-  groupValueChangeCount;
-  individualValueChanges;
-  pokemon;
-  someTabindex;
-
-  constructor() {
-    this.thirdValue = 'dr-who';
-    this.groupValueChangeCount = 0;
-    this.individualValueChanges = 0;
-    this.pokemon = '';
-    this.someTabindex = 888;
-  }
-
-  chooseCharmander() {
-    this.pokemon = 'fire';
-  }
-
-  onGroupChange() {
-    this.groupValueChangeCount++;
-  }
-
-  onIndividualClick() {
-    this.individualValueChanges++;
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
-}
diff --git a/modules/examples/src/material/switcher/demo_app.html b/modules/examples/src/material/switcher/demo_app.html
deleted file mode 100644
index 5d05101d31cc..000000000000
--- a/modules/examples/src/material/switcher/demo_app.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div md-theme="default">
-  <h2>NgSwitch demo</h2>
-
-  <md-switch (^click)="increment()">Normal switch</md-switch>
-  <md-switch class="md-primary" (^click)="increment()">Primary switch</md-switch>
-  <md-switch disabled (^click)="increment()">Disabled switch</md-switch>
-
-  <p>Toggle count: {{toggleCount}}</p>
-</div>
diff --git a/modules/examples/src/material/switcher/index.html b/modules/examples/src/material/switcher/index.html
deleted file mode 100644
index 766ad9284efd..000000000000
--- a/modules/examples/src/material/switcher/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title>ng-material switch demo</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style>
-    * {
-      font-family: RobotoDraft, Roboto;
-    }
-  </style>
-</head>
-<body>
-
-  <demo-app>Loading...</demo-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/material/switcher/index.ts b/modules/examples/src/material/switcher/index.ts
deleted file mode 100644
index 88a8ed6e295d..000000000000
--- a/modules/examples/src/material/switcher/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {bootstrap, Component, View} from 'angular2/angular2';
-import {MdSwitch} from 'angular2_material/src/components/switcher/switch';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdSwitch]})
-class DemoApp {
-  toggleCount: number;
-
-  constructor() {
-    this.toggleCount = 0;
-  }
-
-  increment() {
-    this.toggleCount++;
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
-}
diff --git a/modules/examples/src/model_driven_forms/index.html b/modules/examples/src/model_driven_forms/index.html
deleted file mode 100644
index 54f575abc275..000000000000
--- a/modules/examples/src/model_driven_forms/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>Model Driven Forms</title>
-  <style>
-    .ng-touched.ng-invalid {
-      border-color: red;
-    }
-  </style>
-</head>
-
-<body>
-  <model-driven-forms>
-    Loading...
-  </model-driven-forms>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/model_driven_forms/index.ts b/modules/examples/src/model_driven_forms/index.ts
deleted file mode 100644
index 047ad6d367a4..000000000000
--- a/modules/examples/src/model_driven_forms/index.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import {
-  bootstrap,
-  onChange,
-  NgIf,
-  NgFor,
-  Component,
-  Directive,
-  View,
-  Ancestor
-} from 'angular2/angular2';
-import {formDirectives, NgControl, Validators, NgFormModel, FormBuilder} from 'angular2/forms';
-
-import {RegExpWrapper, print, isPresent} from 'angular2/src/facade/lang';
-
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-/**
- * Custom validator.
- */
-function creditCardValidator(c): StringMap<string, boolean> {
-  if (isPresent(c.value) && RegExpWrapper.test(new RegExp("^\\d{16}$"), c.value)) {
-    return null;
-  } else {
-    return {"invalidCreditCard": true};
-  }
-}
-
-/**
- * This is a component that displays an error message.
- *
- * For instance,
- *
- * <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
- *
- * Will display the "is required" error if the control is empty, and "invalid credit card" if the
- * control is not empty
- * but not valid.
- *
- * In a real application, this component would receive a service that would map an error code to an
- * actual error message.
- * To make it simple, we are using a simple map here.
- */
-@Component({selector: 'show-error', properties: ['controlPath: control', 'errorTypes: errors']})
-@View({
-  template: `
-    <span *ng-if="errorMessage !== null">{{errorMessage}}</span>
-  `,
-  directives: [NgIf]
-})
-class ShowError {
-  formDir;
-  controlPath: string;
-  errorTypes: List<string>;
-
-  constructor(@Ancestor() formDir: NgFormModel) { this.formDir = formDir; }
-
-  get errorMessage() {
-    var c = this.formDir.form.find(this.controlPath);
-    for (var i = 0; i < this.errorTypes.length; ++i) {
-      if (isPresent(c) && c.touched && c.hasError(this.errorTypes[i])) {
-        return this._errorMessage(this.errorTypes[i]);
-      }
-    }
-    return null;
-  }
-
-  _errorMessage(code) {
-    var config = {'required': 'is required', 'invalidCreditCard': 'is invalid credit card number'};
-    return config[code];
-  }
-}
-
-
-@Component({selector: 'model-driven-forms', viewInjector: [FormBuilder]})
-@View({
-  template: `
-    <h1>Checkout Form (Model Driven)</h1>
-
-    <form (ng-submit)="onSubmit()" [ng-form-model]="form" #f="form">
-      <p>
-        <label for="firstName">First Name</label>
-        <input type="text" id="firstName" ng-control="firstName">
-        <show-error control="firstName" [errors]="['required']"></show-error>
-      </p>
-
-      <p>
-        <label for="middleName">Middle Name</label>
-        <input type="text" id="middleName" ng-control="middleName">
-      </p>
-
-      <p>
-        <label for="lastName">Last Name</label>
-        <input type="text" id="lastName" ng-control="lastName">
-        <show-error control="lastName" [errors]="['required']"></show-error>
-      </p>
-
-      <p>
-        <label for="country">Country</label>
-        <select id="country" ng-control="country">
-          <option *ng-for="#c of countries" [value]="c">{{c}}</option>
-        </select>
-      </p>
-
-      <p>
-        <label for="creditCard">Credit Card</label>
-        <input type="text" id="creditCard" ng-control="creditCard">
-        <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
-      </p>
-
-      <p>
-        <label for="amount">Amount</label>
-        <input type="number" id="amount" ng-control="amount">
-        <show-error control="amount" [errors]="['required']"></show-error>
-      </p>
-
-      <p>
-        <label for="email">Email</label>
-        <input type="email" id="email" ng-control="email">
-        <show-error control="email" [errors]="['required']"></show-error>
-      </p>
-
-      <p>
-        <label for="comments">Comments</label>
-        <textarea id="comments" ng-control="comments">
-        </textarea>
-      </p>
-
-      <button type="submit" [disabled]="!f.form.valid">Submit</button>
-    </form>
-  `,
-  directives: [formDirectives, NgFor, ShowError]
-})
-class ModelDrivenForms {
-  form;
-  countries = ['US', 'Canada'];
-
-  constructor(fb: FormBuilder) {
-    this.form = fb.group({
-      "firstName": ["", Validators.required],
-      "middleName": [""],
-      "lastName": ["", Validators.required],
-      "country": ["Canada", Validators.required],
-      "creditCard": ["", Validators.compose([Validators.required, creditCardValidator])],
-      "amount": [0, Validators.required],
-      "email": ["", Validators.required],
-      "comments": [""]
-    });
-  }
-
-  onSubmit() {
-    print("Submitting:");
-    print(this.form.value);
-  }
-}
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(ModelDrivenForms);
-}
diff --git a/modules/examples/src/order_management/index.html b/modules/examples/src/order_management/index.html
deleted file mode 100644
index 5b733f29ccb5..000000000000
--- a/modules/examples/src/order_management/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>Order Management</title>
-  <style>
-    .warning {
-      background-color: yellow;
-    }
-  </style>
-</head>
-
-<body>
-  <order-management-app>
-    Loading...
-  </order-management-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/order_management/index.ts b/modules/examples/src/order_management/index.ts
deleted file mode 100644
index fd7b8732d6e4..000000000000
--- a/modules/examples/src/order_management/index.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import {
-  bootstrap,
-  onChange,
-  NgIf,
-  NgFor,
-  Component,
-  Directive,
-  View,
-  Ancestor,
-  NgValidator,
-  forwardRef,
-  Binding,
-  EventEmitter
-} from 'angular2/angular2';
-
-import {formDirectives} from 'angular2/forms';
-
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-/**
- * You can find the Angular 1 implementation of this example here:
- * https://github.com/wardbell/ng1DataBinding
- */
-
-// ---- model
-
-class OrderItem {
-  constructor(public orderItemId: number, public orderId: number, public productName: string,
-              public qty: number, public unitPrice: number) {}
-
-  get total(): number { return this.qty * this.unitPrice; }
-}
-
-class Order {
-  constructor(public orderId: number, public customerName: string, public limit: number,
-              private dataService: DataService) {}
-
-  get items(): OrderItem[] { return this.dataService.itemsFor(this); }
-  get total(): number { return this.items.map(i => i.total).reduce((a, b) => a + b); }
-}
-
-
-
-// ---- services
-
-var _nextId = 1000;
-class DataService {
-  orderItems: OrderItem[];
-  orders: Order[];
-  currentOrder: Order = null;
-
-  constructor() {
-    this.orders = [
-      new Order(_nextId++, "J. Coltrane", 100, this),
-      new Order(_nextId++, "B. Evans", 200, this)
-    ];
-
-    this.orderItems = [
-      new OrderItem(_nextId++, this.orders[0].orderId, "Bread", 5, 1),
-      new OrderItem(_nextId++, this.orders[0].orderId, "Brie", 5, 2),
-      new OrderItem(_nextId++, this.orders[0].orderId, "IPA", 5, 3),
-
-      new OrderItem(_nextId++, this.orders[1].orderId, "Mozzarella", 5, 2),
-      new OrderItem(_nextId++, this.orders[1].orderId, "Wine", 5, 3)
-    ];
-  }
-
-  itemsFor(order: Order): OrderItem[] {
-    return ListWrapper.filter(this.orderItems, i => i.orderId === order.orderId);
-  }
-
-  addItemForOrder(order: Order): void {
-    this.orderItems.push(new OrderItem(_nextId++, order.orderId, "", 0, 0));
-  }
-
-  deleteItem(item: OrderItem): void { ListWrapper.remove(this.orderItems, item); }
-}
-
-
-
-// ---- components
-
-@Component({selector: 'order-list-cmp'})
-@View({
-  template: `
-    <h1>Orders</h1>   
-  	<div *ng-for="#order of orders" [class.warning]="order.total > order.limit">
-      <div>
-        <label>Customer name:</label> 
-        {{order.customerName}}
-      </div>
-      
-      <div>
-        <label>Limit: <input [(ng-model)]="order.limit" type="number" placeholder="Limit"></label> 
-      </div>
-      
-      <div>
-        <label>Number of items:</label> 
-        {{order.items.length}}
-      </div>
-      
-      <div>
-        <label>Order total:</label> 
-        {{order.total}}
-      </div>
-      
-      <button (click)="select(order)">Select</button>
-  	</div>			
-  `,
-  directives: [formDirectives, NgFor]
-})
-class OrderListComponent {
-  orders: Order[];
-
-  constructor(private service: DataService) { this.orders = service.orders; }
-  select(order: Order): void { this.service.currentOrder = order; }
-}
-
-
-@Component({selector: 'order-item-cmp', properties: ['item'], events: ['delete']})
-@View({
-  template: `
-    <div>   
-      <div>
-        <label>Product name: <input [(ng-model)]="item.productName" type="text" placeholder="Product name"></label> 
-      </div>
-      
-      <div>
-        <label>Quantity: <input [(ng-model)]="item.qty" type="number" placeholder="Quantity"></label> 
-      </div>
-      
-      <div>
-        <label>Unit Price: <input [(ng-model)]="item.unitPrice" type="number" placeholder="Unit price"></label> 
-      </div>
-      
-      <div>
-        <label>Total:</label> 
-        {{item.total}}
-      </div>
-      
-      <button (click)="onDelete()">Delete</button>
-    </div>
-  `,
-  directives: [formDirectives]
-})
-class OrderItemComponent {
-  item: OrderItem;
-  delete = new EventEmitter();
-
-  onDelete(): void { this.delete.next(this.item); }
-}
-
-@Component({selector: 'order-details-cmp'})
-@View({
-  template: `
-    <div *ng-if="order !== null">
-      <h1>Selected Order</h1>    
-      <div>
-        <label>Customer name: <input [(ng-model)]="order.customerName" type="text" placeholder="Customer name"></label> 
-      </div>
-      
-      <div>
-        <label>Limit: <input [(ng-model)]="order.limit" type="number" placeholder="Limit"></label> 
-      </div>
-      
-      <div>
-        <label>Number of items:</label> 
-        {{order.items.length}}
-      </div>
-      
-      <div>
-        <label>Order total:</label> 
-        {{order.total}}
-      </div>
-      
-      <h2>Items</h2>
-      <button (click)="addItem()">Add Item</button>
-      <order-item-cmp *ng-for="#item of order.items" [item]="item" (delete)="deleteItem(item)"></order-item-cmp>
-    </div>
-  `,
-  directives: [formDirectives, OrderItemComponent, NgFor, NgIf]
-})
-class OrderDetailsComponent {
-  constructor(private service: DataService) {}
-
-  get order(): Order { return this.service.currentOrder; }
-
-  deleteItem(item: OrderItem): void { this.service.deleteItem(item); }
-
-  addItem(): void { this.service.addItemForOrder(this.order); }
-}
-
-@Component({selector: 'order-management-app', viewInjector: [DataService]})
-@View({
-  template: `
-    <order-list-cmp></order-list-cmp>
-    <order-details-cmp></order-details-cmp>
-  `,
-  directives: [OrderListComponent, OrderDetailsComponent]
-})
-class OrderManagementApplication {
-}
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(OrderManagementApplication);
-}
diff --git a/modules/examples/src/person_management/index.html b/modules/examples/src/person_management/index.html
deleted file mode 100644
index 70630d911e8e..000000000000
--- a/modules/examples/src/person_management/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>Person Management</title>
-  <style>
-    .ng-touched.ng-invalid {
-      border-color: red;
-    }
-  </style>
-</head>
-
-<body>
-  <person-management-app>
-    Loading...
-  </person-management-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/person_management/index.ts b/modules/examples/src/person_management/index.ts
deleted file mode 100644
index 2c9e87ac3b06..000000000000
--- a/modules/examples/src/person_management/index.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-import {
-  bootstrap,
-  onChange,
-  NgIf,
-  NgFor,
-  Component,
-  Directive,
-  View,
-  Ancestor,
-  NgValidator,
-  forwardRef,
-  Binding
-} from 'angular2/angular2';
-
-import {formDirectives} from 'angular2/forms';
-
-import {RegExpWrapper, print, isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
-
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-
-/**
- * You can find the Angular 1 implementation of this example here:
- * https://github.com/wardbell/ng1DataBinding
- */
-
-// ---- model
-
-var _nextId = 1;
-class Person {
-  personId: number;
-  mom: Person;
-  dad: Person;
-  friends: Person[];
-
-  constructor(public firstName: string, public lastName: string, public yearOfBirth: number) {
-    this.personId = _nextId++;
-    this.firstName = firstName;
-    this.lastName = lastName;
-    this.mom = null;
-    this.dad = null;
-    this.friends = [];
-    this.personId = _nextId++;
-  }
-
-  get age(): number { return 2015 - this.yearOfBirth; }
-  get fullName(): string { return `${this.firstName} ${this.lastName}`; }
-  get friendNames(): string { return this.friends.map(f => f.fullName).join(', '); }
-}
-
-
-
-// ---- services
-
-class DataService {
-  currentPerson: Person;
-  persons: Person[];
-
-  constructor() {
-    this.persons = [
-      new Person('Victor', 'Savkin', 1930),
-      new Person('Igor', 'Minar', 1920),
-      new Person('John', 'Papa', 1910),
-      new Person('Nancy', 'Duarte', 1910),
-      new Person('Jack', 'Papa', 1910),
-      new Person('Jill', 'Papa', 1910),
-      new Person('Ward', 'Bell', 1910),
-      new Person('Robert', 'Bell', 1910),
-      new Person('Tracy', 'Ward', 1910),
-      new Person('Dan', 'Wahlin', 1910)
-    ];
-
-    this.persons[0].friends = [0, 1, 2, 6, 9].map(_ => this.persons[_]);
-    this.persons[1].friends = [0, 2, 6, 9].map(_ => this.persons[_]);
-    this.persons[2].friends = [0, 1, 6, 9].map(_ => this.persons[_]);
-    this.persons[6].friends = [0, 1, 2, 9].map(_ => this.persons[_]);
-    this.persons[9].friends = [0, 1, 2, 6].map(_ => this.persons[_]);
-
-    this.persons[2].mom = this.persons[5];
-    this.persons[2].dad = this.persons[4];
-    this.persons[6].mom = this.persons[8];
-    this.persons[6].dad = this.persons[7];
-
-    this.currentPerson = this.persons[0];
-  }
-}
-
-
-
-// ---- components
-
-@Component({selector: 'full-name-cmp'})
-@View({
-  template: `
-    <h1>Edit Full Name</h1>   
-    <div>
-      <form>
-          <div>
-            <label>
-              First: <input [(ng-model)]="person.firstName" type="text" placeholder="First name">
-            </label>          
-          </div>
-  
-          <div>
-            <label>
-              Last: <input [(ng-model)]="person.lastName" type="text" placeholder="Last name">
-            </label>  
-          </div>
-  
-          <div>
-            <label>{{person.fullName}}</label>
-          </div>
-      </form>  
-    </div>
-  `,
-  directives: [formDirectives]
-})
-class FullNameComponent {
-  constructor(private service: DataService) {}
-  get person(): Person { return this.service.currentPerson; }
-}
-
-@Component({selector: 'person-detail-cmp'})
-@View({
-  template: `
-    <h2>{{person.fullName}}</h2>
-    
-    <div>
-      <form>
-        <div>              
-					<label>First: <input [(ng-model)]="person.firstName" type="text" placeholder="First name"></label> 
-				</div>              
-        
-        <div>              
-					<label>Last: <input [(ng-model)]="person.lastName" type="text" placeholder="Last name"></label> 
-				</div>
-        
-        <div>              
-					<label>Year of birth: <input [(ng-model)]="person.yearOfBirth" type="number" placeholder="Year of birth"></label> 
-          Age: {{person.age}}
-				</div>\
-        
-        <div *ng-if="person.mom != null">              
-					<label>Mom:</label> 
-          <input [(ng-model)]="person.mom.firstName" type="text" placeholder="Mom's first name">
-          <input [(ng-model)]="person.mom.lastName" type="text" placeholder="Mom's last name">
-          {{person.mom.fullName}}     
-				</div>
-        
-        <div *ng-if="person.dad != null">              
-					<label>Dad:</label> 
-          <input [(ng-model)]="person.dad.firstName" type="text" placeholder="Dad's first name">
-          <input [(ng-model)]="person.dad.lastName" type="text" placeholder="Dad's last name">
-          {{person.dad.fullName}}     
-				</div>
-          
-        <div *ng-if="person.friends.length > 0">              
-					<label>Friends:</label> 
-          {{person.friendNames}}
-				</div>
-      </form>
-    </div>
-  `,
-  directives: [formDirectives, NgIf]
-})
-class PersonsDetailComponent {
-  constructor(private service: DataService) {}
-  get person(): Person { return this.service.currentPerson; }
-}
-
-@Component({selector: 'persons-cmp'})
-@View({
-  template: `
-    <h1>FullName Demo</h1>   
-    <div>
-      <ul>
-  		  <li *ng-for="#person of persons">  
-  			  <label (click)="select(person)">{{person.fullName}}</label>
-  			</li>			
-  	 </ul>
-     
-     <person-detail-cmp></person-detail-cmp>
-    </div>
-  `,
-  directives: [formDirectives, PersonsDetailComponent, NgFor]
-})
-class PersonsComponent {
-  persons: Person[];
-
-  constructor(private service: DataService) { this.persons = service.persons; }
-
-  select(person: Person): void { this.service.currentPerson = person; }
-}
-
-
-@Component({selector: 'person-management-app', viewInjector: [DataService]})
-@View({
-  template: `
-    <button (click)="switchToEditName()">Edit Full Name</button>
-    <button (click)="switchToPersonList()">Person List</button>
-    
-    <full-name-cmp *ng-if="mode == 'editName'"></full-name-cmp>
-    <persons-cmp *ng-if="mode == 'personList'"></persons-cmp>
-  `,
-  directives: [FullNameComponent, PersonsComponent, NgIf]
-})
-class PersonManagementApplication {
-  mode: string;
-
-  switchToEditName(): void { this.mode = 'editName'; }
-  switchToPersonList(): void { this.mode = 'personList'; }
-}
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(PersonManagementApplication);
-}
diff --git a/modules/examples/src/sourcemap/index.html b/modules/examples/src/sourcemap/index.html
deleted file mode 100644
index c8b981108e00..000000000000
--- a/modules/examples/src/sourcemap/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!doctype html>
-<html>
-  <title>Sourcemaps</title>
-<body>
-  <error-app>
-    Loading...
-  </error-app>
-
-  <p>
-  Please look into the console and check whether the stack trace is mapped
-  via source maps!
-  </p>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/sourcemap/index.ts b/modules/examples/src/sourcemap/index.ts
deleted file mode 100644
index c4585c8ae4b2..000000000000
--- a/modules/examples/src/sourcemap/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {BaseException} from 'angular2/src/facade/lang';
-import {bootstrap, Component, View} from 'angular2/angular2';
-
-@Component({
-  selector: 'error-app',
-})
-@View({
-  template: `
-           <button class="errorButton" (click)="createError()">create error</button>`
-})
-export class ErrorComponent {
-  createError(): void { throw new BaseException('Sourcemap test'); }
-}
-
-export function main() {
-  bootstrap(ErrorComponent);
-}
diff --git a/modules/examples/src/template_driven_forms/index.html b/modules/examples/src/template_driven_forms/index.html
deleted file mode 100644
index 79ca5b3efbfa..000000000000
--- a/modules/examples/src/template_driven_forms/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>Template Driven Forms</title>
-  <style>
-    .ng-touched.ng-invalid {
-      border-color: red;
-    }
-  </style>
-</head>
-
-<body>
-  <template-driven-forms>
-    Loading...
-  </template-driven-forms>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/template_driven_forms/index.ts b/modules/examples/src/template_driven_forms/index.ts
deleted file mode 100644
index fb6c571f4eba..000000000000
--- a/modules/examples/src/template_driven_forms/index.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import {
-  bootstrap,
-  onChange,
-  NgIf,
-  NgFor,
-  Component,
-  Directive,
-  View,
-  Ancestor,
-  NgValidator,
-  forwardRef,
-  Binding
-} from 'angular2/angular2';
-import {formDirectives, NgControl, Validators, NgForm} from 'angular2/forms';
-
-import {RegExpWrapper, print, isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
-
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-/**
- * A domain model we are binding the form controls to.
- */
-class CheckoutModel {
-  firstName: string;
-  middleName: string;
-  lastName: string;
-  country: string = "Canada";
-
-  creditCard: string;
-  amount: number;
-  email: string;
-  comments: string;
-}
-
-/**
- * Custom validator.
- */
-const creditCardValidatorBinding =
-    CONST_EXPR(new Binding(NgValidator, {toAlias: forwardRef(() => CreditCardValidator)}));
-
-@Directive({selector: '[credit-card]', hostInjector: [creditCardValidatorBinding]})
-class CreditCardValidator {
-  get validator() { return CreditCardValidator.validate; }
-
-  static validate(c): StringMap<string, boolean> {
-    if (isPresent(c.value) && RegExpWrapper.test(new RegExp("^\\d{16}$"), c.value)) {
-      return null;
-    } else {
-      return {"invalidCreditCard": true};
-    }
-  }
-}
-
-/**
- * This is a component that displays an error message.
- *
- * For instance,
- *
- * <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
- *
- * Will display the "is required" error if the control is empty, and "invalid credit card" if the
- * control is not empty
- * but not valid.
- *
- * In a real application, this component would receive a service that would map an error code to an
- * actual error message.
- * To make it simple, we are using a simple map here.
- */
-@Component({selector: 'show-error', properties: ['controlPath: control', 'errorTypes: errors']})
-@View({
-  template: `
-    <span *ng-if="errorMessage !== null">{{errorMessage}}</span>
-  `,
-  directives: [NgIf]
-})
-class ShowError {
-  formDir;
-  controlPath: string;
-  errorTypes: List<string>;
-
-  constructor(@Ancestor() formDir: NgForm) { this.formDir = formDir; }
-
-  get errorMessage() {
-    var c = this.formDir.form.find(this.controlPath);
-    for (var i = 0; i < this.errorTypes.length; ++i) {
-      if (isPresent(c) && c.touched && c.hasError(this.errorTypes[i])) {
-        return this._errorMessage(this.errorTypes[i]);
-      }
-    }
-    return null;
-  }
-
-  _errorMessage(code) {
-    var config = {'required': 'is required', 'invalidCreditCard': 'is invalid credit card number'};
-    return config[code];
-  }
-}
-
-
-@Component({selector: 'template-driven-forms'})
-@View({
-  template: `
-    <h1>Checkout Form</h1>
-
-    <form (ng-submit)="onSubmit()" #f="form">
-      <p>
-        <label for="firstName">First Name</label>
-        <input type="text" id="firstName" ng-control="firstName" [(ng-model)]="model.firstName" required>
-        <show-error control="firstName" [errors]="['required']"></show-error>
-      </p>
-
-      <p>
-        <label for="middleName">Middle Name</label>
-        <input type="text" id="middleName" ng-control="middleName" [(ng-model)]="model.middleName">
-      </p>
-
-      <p>
-        <label for="lastName">Last Name</label>
-        <input type="text" id="lastName" ng-control="lastName" [(ng-model)]="model.lastName" required>
-        <show-error control="lastName" [errors]="['required']"></show-error>
-      </p>
-
-      <p>
-        <label for="country">Country</label>
-        <select id="country" ng-control="country" [(ng-model)]="model.country">
-          <option *ng-for="#c of countries" [value]="c">{{c}}</option>
-        </select>
-      </p>
-
-      <p>
-        <label for="creditCard">Credit Card</label>
-        <input type="text" id="creditCard" ng-control="creditCard" [(ng-model)]="model.creditCard" required credit-card>
-        <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
-      </p>
-
-      <p>
-        <label for="amount">Amount</label>
-        <input type="number" id="amount" ng-control="amount" [(ng-model)]="model.amount" required>
-        <show-error control="amount" [errors]="['required']"></show-error>
-      </p>
-
-      <p>
-        <label for="email">Email</label>
-        <input type="email" id="email" ng-control="email" [(ng-model)]="model.email" required>
-        <show-error control="email" [errors]="['required']"></show-error>
-      </p>
-
-      <p>
-        <label for="comments">Comments</label>
-        <textarea id="comments" ng-control="comments" [(ng-model)]="model.comments">
-        </textarea>
-      </p>
-
-      <button type="submit" [disabled]="!f.form.valid">Submit</button>
-    </form>
-  `,
-  directives: [formDirectives, NgFor, CreditCardValidator, ShowError]
-})
-class TemplateDrivenForms {
-  model = new CheckoutModel();
-  countries = ['US', 'Canada'];
-
-  onSubmit() {
-    print("Submitting:");
-    print(this.model);
-  }
-}
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(TemplateDrivenForms);
-}
diff --git a/modules/examples/src/todo/css/base.css b/modules/examples/src/todo/css/base.css
deleted file mode 100644
index 502f06cf18be..000000000000
--- a/modules/examples/src/todo/css/base.css
+++ /dev/null
@@ -1,379 +0,0 @@
-@charset "utf-8";
-
-button {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: none;
-  font-size: 100%;
-  vertical-align: baseline;
-  font-family: inherit;
-  font-weight: inherit;
-  color: inherit;
-  -webkit-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-font-smoothing: antialiased;
-  -ms-font-smoothing: antialiased;
-  font-smoothing: antialiased;
-}
-
-button,
-input[type="checkbox"] {
-  outline: none;
-}
-
-.hidden {
-  display: none;
-}
-
-.visible {
-  display: block !important;
-}
-
-#todoapp {
-  background: #fff;
-  margin: 130px 0 40px 0;
-  position: relative;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
-  0 25px 50px 0 rgba(0, 0, 0, 0.1);
-}
-
-#todoapp input::-webkit-input-placeholder {
-  font-style: italic;
-  font-weight: 300;
-  color: #e6e6e6;
-}
-
-#todoapp input::-moz-placeholder {
-  font-style: italic;
-  font-weight: 300;
-  color: #e6e6e6;
-}
-
-#todoapp input::input-placeholder {
-  font-style: italic;
-  font-weight: 300;
-  color: #e6e6e6;
-}
-
-#todoapp h1 {
-  position: absolute;
-  top: -155px;
-  width: 100%;
-  font-size: 100px;
-  font-weight: 100;
-  text-align: center;
-  color: rgba(175, 47, 47, 0.15);
-  -webkit-text-rendering: optimizeLegibility;
-  -moz-text-rendering: optimizeLegibility;
-  -ms-text-rendering: optimizeLegibility;
-  text-rendering: optimizeLegibility;
-}
-
-#new-todo,
-.edit {
-  position: relative;
-  margin: 0;
-  width: 100%;
-  font-size: 24px;
-  font-family: inherit;
-  font-weight: inherit;
-  line-height: 1.4em;
-  border: 0;
-  outline: none;
-  color: inherit;
-  padding: 6px;
-  border: 1px solid #999;
-  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-font-smoothing: antialiased;
-  -ms-font-smoothing: antialiased;
-  font-smoothing: antialiased;
-}
-
-#new-todo {
-  padding: 16px 16px 16px 60px;
-  border: none;
-  background: rgba(0, 0, 0, 0.003);
-  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
-}
-
-#main {
-  position: relative;
-  z-index: 2;
-  border-top: 1px solid #e6e6e6;
-}
-
-label[for='toggle-all'] {
-  display: none;
-}
-
-#toggle-all {
-  position: absolute;
-  top: -55px;
-  left: -12px;
-  width: 60px;
-  height: 34px;
-  text-align: center;
-  border: none; /* Mobile Safari */
-}
-
-#toggle-all:before {
-  content: '❯';
-  font-size: 22px;
-  color: #e6e6e6;
-  padding: 10px 27px 10px 27px;
-}
-
-#toggle-all:checked:before {
-  color: #737373;
-}
-
-#todo-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-#todo-list li {
-  position: relative;
-  font-size: 24px;
-  border-bottom: 1px solid #ededed;
-}
-
-#todo-list li:last-child {
-  border-bottom: none;
-}
-
-#todo-list li.editing {
-  border-bottom: none;
-  padding: 0;
-}
-
-#todo-list li.editing .edit {
-  display: block;
-  width: 506px;
-  padding: 13px 17px 12px 17px;
-  margin: 0 0 0 43px;
-}
-
-#todo-list li.editing .view {
-  display: none;
-}
-
-#todo-list li .toggle {
-  text-align: center;
-  width: 40px;
-  /* auto, since non-WebKit browsers doesn't support input styling */
-  height: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  border: none; /* Mobile Safari */
-  -webkit-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-}
-
-#todo-list li .toggle:after {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
-}
-
-#todo-list li .toggle:checked:after {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
-}
-
-#todo-list li label {
-  white-space: pre;
-  word-break: break-word;
-  padding: 15px 60px 15px 15px;
-  margin-left: 45px;
-  display: block;
-  line-height: 1.2;
-  transition: color 0.4s;
-}
-
-#todo-list li.completed label {
-  color: #d9d9d9;
-  text-decoration: line-through;
-}
-
-#todo-list li .destroy {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 10px;
-  bottom: 0;
-  width: 40px;
-  height: 40px;
-  margin: auto 0;
-  font-size: 30px;
-  color: #cc9a9a;
-  margin-bottom: 11px;
-  transition: color 0.2s ease-out;
-}
-
-#todo-list li .destroy:hover {
-  color: #af5b5e;
-}
-
-#todo-list li .destroy:after {
-  content: '×';
-}
-
-#todo-list li:hover .destroy {
-  display: block;
-}
-
-#todo-list li .edit {
-  display: none;
-}
-
-#todo-list li.editing:last-child {
-  margin-bottom: -1px;
-}
-
-#footer {
-  color: #777;
-  padding: 10px 15px;
-  height: 20px;
-  text-align: center;
-  border-top: 1px solid #e6e6e6;
-}
-
-#footer:before {
-  content: '';
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 50px;
-  overflow: hidden;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
-  0 8px 0 -3px #f6f6f6,
-  0 9px 1px -3px rgba(0, 0, 0, 0.2),
-  0 16px 0 -6px #f6f6f6,
-  0 17px 2px -6px rgba(0, 0, 0, 0.2);
-}
-
-#todo-count {
-  float: left;
-  text-align: left;
-}
-
-#todo-count strong {
-  font-weight: 300;
-}
-
-#filters {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: absolute;
-  right: 0;
-  left: 0;
-}
-
-#filters li {
-  display: inline;
-}
-
-#filters li a {
-  color: inherit;
-  margin: 3px;
-  padding: 3px 7px;
-  text-decoration: none;
-  border: 1px solid transparent;
-  border-radius: 3px;
-}
-
-#filters li a.selected,
-#filters li a:hover {
-  border-color: rgba(175, 47, 47, 0.1);
-}
-
-#filters li a.selected {
-  border-color: rgba(175, 47, 47, 0.2);
-}
-
-#clear-completed,
-html #clear-completed:active {
-  float: right;
-  position: relative;
-  line-height: 20px;
-  text-decoration: none;
-  cursor: pointer;
-  visibility: hidden;
-  position: relative;
-}
-
-#clear-completed::after {
-  visibility: visible;
-  content: 'Clear completed';
-  position: absolute;
-  right: 0;
-  white-space: nowrap;
-}
-
-#clear-completed:hover::after {
-  text-decoration: underline;
-}
-
-#info {
-  margin: 65px auto 0;
-  color: #bfbfbf;
-  font-size: 10px;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  text-align: center;
-}
-
-#info p {
-  line-height: 1;
-}
-
-#info a {
-  color: inherit;
-  text-decoration: none;
-  font-weight: 400;
-}
-
-#info a:hover {
-  text-decoration: underline;
-}
-
-/*
-Hack to remove background from Mobile Safari.
-Can't use it globally since it destroys checkboxes in Firefox
-*/
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  #toggle-all,
-  #todo-list li .toggle {
-    background: none;
-  }
-
-  #todo-list li .toggle {
-    height: 40px;
-  }
-
-  #toggle-all {
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
-    -webkit-appearance: none;
-    appearance: none;
-  }
-}
-
-@media (max-width: 430px) {
-  #footer {
-    height: 50px;
-  }
-
-  #filters {
-    bottom: 10px;
-  }
-}
diff --git a/modules/examples/src/todo/index.html b/modules/examples/src/todo/index.html
deleted file mode 100644
index a7e935cb7bbe..000000000000
--- a/modules/examples/src/todo/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html>
-  <title>Todo Angular 2</title>
-  <link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
-<body>
-  <todo-app>
-    Loading...
-  </todo-app>
-
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/todo/index.ts b/modules/examples/src/todo/index.ts
deleted file mode 100644
index 19d46e790b1d..000000000000
--- a/modules/examples/src/todo/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import {bootstrap, NgFor, Component, View} from 'angular2/angular2';
-import {Store, Todo, TodoFactory} from './services/TodoStore';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-@Component({selector: 'todo-app', viewInjector: [Store, TodoFactory]})
-@View({templateUrl: 'todo.html', directives: [NgFor]})
-class TodoApp {
-  todoEdit: Todo = null;
-
-  constructor(public todoStore: Store, public factory: TodoFactory) {}
-
-  enterTodo(inputElement): void {
-    this.addTodo(inputElement.value);
-    inputElement.value = '';
-  }
-
-  editTodo(todo: Todo): void { this.todoEdit = todo; }
-
-  doneEditing($event, todo: Todo): void {
-    var which = $event.which;
-    var target = $event.target;
-    if (which === 13) {
-      todo.title = target.value;
-      this.todoEdit = null;
-    } else if (which === 27) {
-      this.todoEdit = null;
-      target.value = todo.title;
-    }
-  }
-
-  addTodo(newTitle: string): void { this.todoStore.add(this.factory.create(newTitle, false)); }
-
-  completeMe(todo: Todo): void { todo.completed = !todo.completed; }
-
-  deleteMe(todo: Todo): void { this.todoStore.remove(todo); }
-
-  toggleAll($event): void {
-    var isComplete = $event.target.checked;
-    this.todoStore.list.forEach((todo: Todo) => { todo.completed = isComplete; });
-  }
-
-  clearCompleted(): void { this.todoStore.removeBy((todo) => todo.completed); }
-}
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();  // for the Dart version
-  bootstrap(TodoApp);
-}
diff --git a/modules/examples/src/todo/services/TodoStore.ts b/modules/examples/src/todo/services/TodoStore.ts
deleted file mode 100644
index 97975496619d..000000000000
--- a/modules/examples/src/todo/services/TodoStore.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {Injectable} from 'angular2/angular2';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-// base model for RecordStore
-export class KeyModel {
-  constructor(public key: number) {}
-}
-
-export class Todo extends KeyModel {
-  constructor(key: number, public title: string, public completed: boolean) { super(key); }
-}
-
-@Injectable()
-export class TodoFactory {
-  _uid: number = 0;
-
-  nextUid(): number { return ++this._uid; }
-
-  create(title: string, isCompleted: boolean): Todo {
-    return new Todo(this.nextUid(), title, isCompleted);
-  }
-}
-
-// Store manages any generic item that inherits from KeyModel
-@Injectable()
-export class Store {
-  list: List<KeyModel> = [];
-
-  add(record: KeyModel): void { this.list.push(record); }
-
-  remove(record: KeyModel): void { this._spliceOut(record); }
-
-  removeBy(callback: Function): void {
-    var records = ListWrapper.filter(this.list, callback);
-    ListWrapper.removeAll(this.list, records);
-  }
-
-  private _spliceOut(record: KeyModel) {
-    var i = this._indexFor(record);
-    if (i > -1) {
-      return ListWrapper.splice(this.list, i, 1)[0];
-    }
-    return null;
-  }
-
-  private _indexFor(record: KeyModel) { return this.list.indexOf(record); }
-}
diff --git a/modules/examples/src/todo/todo.html b/modules/examples/src/todo/todo.html
deleted file mode 100644
index 8ef455373e60..000000000000
--- a/modules/examples/src/todo/todo.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<style>@import "css/base.css";</style>
-
-<section id="todoapp">
-
-  <header id="header">
-    <h1>todos</h1>
-    <input
-      id="new-todo"
-      placeholder="What needs to be done?"
-      autofocus
-      #newtodo
-      (keyup.enter)="enterTodo(newtodo)">
-  </header>
-
-  <section id="main">
-    <input id="toggle-all" type="checkbox" (click)="toggleAll($event)">
-    <label for="toggle-all">Mark all as complete</label>
-
-    <ul id="todo-list">
-
-      <li *ng-for="#todo of todoStore.list">
-
-        <div class="view"
-            [class.hidden]="todoEdit == todo">
-
-          <input class="toggle" type="checkbox"
-                 (click)="completeMe(todo)"
-                 [checked]="todo.completed">
-
-          <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
-          <button class="destroy" (click)="deleteMe(todo)"></button>
-
-        </div>
-
-        <div>
-
-          <input class="edit"
-            [class.visible]="todoEdit == todo"
-            [value]="todo.title"
-            (keyup)="doneEditing($event, todo)">
-
-        </div>
-
-      </li>
-    </ul>
-
-  </section>
-
-  <footer id="footer">
-    <span id="todo-count"></span>
-    <div [class.hidden]="true"></div>
-    <ul id="filters">
-      <li>
-        <a href="#/" class="selected">All</a>
-      </li>
-      <li>
-        <a href="#/active">Active</a>
-      </li>
-      <li>
-        <a href="#/completed">Completed</a>
-      </li>
-    </ul>
-    <button id="clear-completed" (click)="clearCompleted()">Clear completed</button>
-  </footer>
-
-</section>
-
-<footer id="info">
-  <p>Double-click to edit a todo</p>
-  <p>Created by <a href="http://twitter.com/angularjs">The Angular Team</a></p>
-</footer>
diff --git a/modules/examples/src/zippy_component/index.html b/modules/examples/src/zippy_component/index.html
deleted file mode 100644
index 01b214421c50..000000000000
--- a/modules/examples/src/zippy_component/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html>
-  <title>Zippy Angular 2.0</title>
-<body>
-  <zippy-app>
-    Loading...
-  </zippy-app>
-
-  $SCRIPTS$
-</body>
-</html>
diff --git a/modules/examples/src/zippy_component/index.ts b/modules/examples/src/zippy_component/index.ts
deleted file mode 100644
index f03c4a5f79bd..000000000000
--- a/modules/examples/src/zippy_component/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {bootstrap, Component, View, NgFor} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {Zippy} from './zippy';
-
-@Component({selector: 'zippy-app'})
-@View({
-  template: `
-    <zippy (open)="pushLog('open')" (close)="pushLog('close')" title="Details">
-      This is some content.
-    </zippy>
-    <ul>
-      <li *ng-for="var log of logs">{{log}}</li>
-    </ul>
-  `,
-  directives: [Zippy, NgFor]
-})
-class ZippyApp {
-  logs: Array<string> = [];
-
-  pushLog(log: string) { this.logs.push(log); }
-}
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(ZippyApp);
-}
diff --git a/modules/examples/src/zippy_component/zippy.html b/modules/examples/src/zippy_component/zippy.html
deleted file mode 100644
index 295334927a71..000000000000
--- a/modules/examples/src/zippy_component/zippy.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="zippy">
-  <div (click)="toggle()" class="zippy__title">
-    {{ visible ? '&blacktriangledown;' : '&blacktriangleright;' }} {{title}}
-  </div>
-  <div [hidden]="!visible" class="zippy__content">
-    <content></content>
-  </div>
-</div>
diff --git a/modules/examples/src/zippy_component/zippy.ts b/modules/examples/src/zippy_component/zippy.ts
deleted file mode 100644
index 641674f7ac92..000000000000
--- a/modules/examples/src/zippy_component/zippy.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Component, View, EventEmitter} from 'angular2/angular2';
-import {ObservableWrapper} from 'angular2/src/facade/async';
-
-@Component({
-  selector: 'zippy',
-  properties: ['title'],
-  events: ['openHandler: open', 'closeHandler: close']
-})
-@View({templateUrl: 'zippy.html'})
-export class Zippy {
-  visible: boolean = true;
-  title: string = '';
-  openHandler: EventEmitter = new EventEmitter();
-  closeHandler: EventEmitter = new EventEmitter();
-
-  toggle() {
-    this.visible = !this.visible;
-    if (this.visible) {
-      ObservableWrapper.callNext(this.openHandler, null);
-    } else {
-      ObservableWrapper.callNext(this.closeHandler, null);
-    }
-  }
-}
diff --git a/modules/examples/test/benchpress/webdriver_async.server.spec.dart b/modules/examples/test/benchpress/webdriver_async.server.spec.dart
deleted file mode 100644
index 8df51d565cc9..000000000000
--- a/modules/examples/test/benchpress/webdriver_async.server.spec.dart
+++ /dev/null
@@ -1,56 +0,0 @@
-import 'dart:async';
-import 'dart:io' show Platform;
-import 'package:guinness/guinness.dart';
-import 'package:benchpress/benchpress.dart';
-import 'package:webdriver/webdriver.dart'
-    show WebDriver, Capabilities, LogType, LogLevel, By;
-
-main() {
-  describe('benchpress', () {
-    WebDriver driver;
-    Runner runner;
-
-    beforeEach(() async {
-      driver = await createTestDriver();
-      await driver
-          .get('http://localhost:8002/examples/src/benchpress/index.html');
-
-      var bindings = [
-        bind(WebDriverAdapter).toFactory(
-            () => new AsyncWebDriverAdapter(driver), [])
-      ];
-      runner = new Runner(bindings);
-    });
-
-    afterEach(() async {
-      await driver.close();
-    });
-
-    it('should work', () {
-      return runner.sample(id: 'benchpress smoke test', execute: () async {
-        var button = await driver.findElement(const By.tagName('button'));
-        await button.click();
-        var logText = await (await driver.findElement(const By.id('log'))).text;
-        expect(logText, 'hi');
-      });
-    });
-  });
-}
-
-Future<WebDriver> createTestDriver() {
-  Map env = Platform.environment;
-  return WebDriver.createDriver(
-      desiredCapabilities: {
-    'name': 'Dartium',
-    'browserName': 'chrome',
-    'chromeOptions': {
-      'binary': env['DARTIUM_BIN'],
-      'args': ['--js-flags=--expose-gc'],
-      'perfLoggingPrefs': {
-        'traceCategories':
-            'v8,blink.console,disabled-by-default-devtools.timeline'
-      },
-    },
-    'loggingPrefs': {'performance': 'ALL', 'browser': 'ALL',}
-  });
-}
diff --git a/modules/payload_tests/hello_world/ts/systemjs/index.html b/modules/payload_tests/hello_world/ts/systemjs/index.html
new file mode 100644
index 000000000000..0a0d5b8e3e80
--- /dev/null
+++ b/modules/payload_tests/hello_world/ts/systemjs/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <title>Angular Hello World payload test</title>
+<body>
+  <hello-app>
+    Loading...
+  </hello-app>
+  <script src="app-bundle-deps.min.js"></script>
+</body>
+</html>
+
diff --git a/modules/payload_tests/hello_world/ts/systemjs/index.ts b/modules/payload_tests/hello_world/ts/systemjs/index.ts
new file mode 100644
index 000000000000..d770ed63b030
--- /dev/null
+++ b/modules/payload_tests/hello_world/ts/systemjs/index.ts
@@ -0,0 +1,30 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+
+@Component({
+  selector: 'hello-app',
+  template: `
+    <h1>Hello, {{name}}!</h1>
+    <label> Say hello to: <input [value]="name" (input)="name = $event.target.value"></label>
+`
+})
+class HelloCmp {
+  name = 'World';
+}
+
+@NgModule({
+  bootstrap: [HelloCmp],
+  imports: [BrowserModule]
+})
+class ExampleModule {}
+
+platformBrowserDynamic().bootstrapModule(ExampleModule);
diff --git a/modules/payload_tests/hello_world/ts/webpack/index.html b/modules/payload_tests/hello_world/ts/webpack/index.html
new file mode 100644
index 000000000000..94b30d7cffdd
--- /dev/null
+++ b/modules/payload_tests/hello_world/ts/webpack/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <title>Angular Hello World payload test</title>
+<body>
+  <hello-app>
+    Loading...
+  </hello-app>
+  <script src="app-bundle-deps.min.js"></script>
+</body>
+</html>
diff --git a/modules/payload_tests/hello_world/ts/webpack/index.ts b/modules/payload_tests/hello_world/ts/webpack/index.ts
new file mode 100644
index 000000000000..d3ca23fdfc64
--- /dev/null
+++ b/modules/payload_tests/hello_world/ts/webpack/index.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 {Component, NgModule} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+
+@Component({
+  selector: 'hello-app',
+  template: `
+    <h1>Hello, {{name}}!</h1>
+    <label> Say hello to: <input [value]="name" (input)="name = $event.target.value"></label>
+`
+})
+export class HelloCmp {
+  name = 'World';
+}
+
+@NgModule({
+  bootstrap: [HelloCmp],
+  imports: [BrowserModule]
+})
+class ExampleModule {}
+
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/README.md b/modules/playground/README.md
new file mode 100644
index 000000000000..213a5faafb27
--- /dev/null
+++ b/modules/playground/README.md
@@ -0,0 +1,8 @@
+# How to run the examples locally
+
+```
+$ cp -r ./modules/playground ./dist/all/
+$ ./node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w
+$ gulp serve
+$ open http://localhost:8000/all/playground/src/hello_world/index.html?bundles=false
+```
\ No newline at end of file
diff --git a/modules/playground/e2e_test/async/async_spec.ts b/modules/playground/e2e_test/async/async_spec.ts
new file mode 100644
index 000000000000..d2afab75424c
--- /dev/null
+++ b/modules/playground/e2e_test/async/async_spec.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {$, browser} from 'protractor';
+import {promise} from 'selenium-webdriver';
+
+describe('async', () => {
+  const URL = 'all/playground/src/async/index.html';
+
+  beforeEach(() => browser.get(URL));
+
+  it('should work with synchronous actions', () => {
+    const increment = $('#increment');
+    increment.$('.action').click();
+
+    expect(increment.$('.val').getText()).toEqual('1');
+  });
+
+  it('should wait for asynchronous actions', () => {
+    const timeout = $('#delayedIncrement');
+
+    // At this point, the async action is still pending, so the count should
+    // still be 0.
+    expect(timeout.$('.val').getText()).toEqual('0');
+
+    timeout.$('.action').click();
+
+    // whenStable should only be called when the async action finished,
+    // so the count should be 1 at this point.
+    expect(timeout.$('.val').getText()).toEqual('1');
+  });
+
+  it('should notice when asynchronous actions are cancelled', () => {
+    const timeout = $('#delayedIncrement');
+
+    // At this point, the async action is still pending, so the count should
+    // still be 0.
+    expect(timeout.$('.val').getText()).toEqual('0');
+
+    browser.ignoreSynchronization = true;
+    timeout.$('.action').click();
+
+    timeout.$('.cancel').click();
+    browser.ignoreSynchronization = false;
+
+    // whenStable should be called since the async action is cancelled. The
+    // count should still be 0;
+    expect(timeout.$('.val').getText()).toEqual('0');
+  });
+
+  it('should wait for a series of asynchronous actions', () => {
+    const timeout = $('#multiDelayedIncrements');
+
+    // At this point, the async action is still pending, so the count should
+    // still be 0.
+    expect(timeout.$('.val').getText()).toEqual('0');
+
+    timeout.$('.action').click();
+
+    // whenStable should only be called when all the async actions
+    // finished, so the count should be 10 at this point.
+    expect(timeout.$('.val').getText()).toEqual('10');
+  });
+
+  it('should wait via frameworkStabilizer', () => {
+    const whenAllStable = (): promise.Promise<any> => {
+      return browser.executeAsyncScript('window.frameworkStabilizers[0](arguments[0]);');
+    };
+
+    // This disables protractor's wait mechanism
+    browser.ignoreSynchronization = true;
+
+    const timeout = $('#multiDelayedIncrements');
+
+    // At this point, the async action is still pending, so the count should
+    // still be 0.
+    expect(timeout.$('.val').getText()).toEqual('0');
+
+    timeout.$('.action').click();
+
+    whenAllStable().then((didWork: any) => {
+      // whenAllStable should only be called when all the async actions
+      // finished, so the count should be 10 at this point.
+      expect(timeout.$('.val').getText()).toEqual('10');
+      expect(didWork).toBeTruthy();  // Work was done.
+    });
+
+    whenAllStable().then((didWork: any) => {
+      // whenAllStable should be called immediately since nothing is pending.
+      expect(didWork).toBeFalsy();  // No work was done.
+      browser.ignoreSynchronization = false;
+    });
+  });
+
+  afterEach(verifyNoBrowserErrors);
+});
diff --git a/modules/playground/e2e_test/hello_world/hello_world_spec.ts b/modules/playground/e2e_test/hello_world/hello_world_spec.ts
new file mode 100644
index 000000000000..1d6bb3fab86e
--- /dev/null
+++ b/modules/playground/e2e_test/hello_world/hello_world_spec.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser} from 'protractor';
+
+describe('hello world', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  describe('hello world app', function() {
+    const URL = 'all/playground/src/hello_world/index.html';
+
+    it('should greet', function() {
+      browser.get(URL);
+
+      expect(getComponentText('hello-app', '.greeting')).toEqual('hello world!');
+    });
+
+    it('should change greeting', function() {
+      browser.get(URL);
+
+      clickComponentButton('hello-app', '.changeButton');
+      expect(getComponentText('hello-app', '.greeting')).toEqual('howdy world!');
+    });
+  });
+
+});
+
+function getComponentText(selector: string, innerSelector: string) {
+  return browser.executeScript(
+      `return document.querySelector("${selector}").querySelector("${innerSelector}").textContent`);
+}
+
+function clickComponentButton(selector: string, innerSelector: string) {
+  return browser.executeScript(
+      `return document.querySelector("${selector}").querySelector("${innerSelector}").click()`);
+}
diff --git a/modules/playground/e2e_test/http/http_spec.ts b/modules/playground/e2e_test/http/http_spec.ts
new file mode 100644
index 000000000000..441400fb5d8b
--- /dev/null
+++ b/modules/playground/e2e_test/http/http_spec.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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser} from 'protractor';
+
+describe('http', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  describe('fetching', function() {
+    const URL = 'all/playground/src/http/index.html';
+
+    it('should fetch and display people', function() {
+      browser.get(URL);
+      expect(getComponentText('http-app', '.people')).toEqual('hello, Jeff');
+    });
+  });
+});
+
+function getComponentText(selector: string, innerSelector: string) {
+  return browser.executeScript(
+      `return document.querySelector("${selector}").querySelector("${innerSelector}").textContent.trim()`);
+}
diff --git a/modules/playground/e2e_test/jsonp/jsonp_spec.ts b/modules/playground/e2e_test/jsonp/jsonp_spec.ts
new file mode 100644
index 000000000000..b4fcda164af5
--- /dev/null
+++ b/modules/playground/e2e_test/jsonp/jsonp_spec.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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser} from 'protractor';
+
+describe('jsonp', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  describe('fetching', function() {
+    const URL = 'all/playground/src/jsonp/index.html';
+
+    it('should fetch and display people', function() {
+      browser.get(URL);
+      expect(getComponentText('jsonp-app', '.people')).toEqual('hello, caitp');
+    });
+  });
+});
+
+function getComponentText(selector: string, innerSelector: string) {
+  return browser.executeScript(
+      `return document.querySelector("${selector}").querySelector("${innerSelector}").textContent.trim()`);
+}
diff --git a/modules/playground/e2e_test/key_events/key_events_spec.ts b/modules/playground/e2e_test/key_events/key_events_spec.ts
new file mode 100644
index 000000000000..5552e03bd0f4
--- /dev/null
+++ b/modules/playground/e2e_test/key_events/key_events_spec.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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser, by, element, protractor} from 'protractor';
+
+const Key = protractor.Key;
+
+describe('key_events', function() {
+
+  const URL = 'all/playground/src/key_events/index.html?bundles=false';
+
+  afterEach(verifyNoBrowserErrors);
+  beforeEach(() => { browser.get(URL); });
+
+  it('should display correct key names', function() {
+    const firstArea = element.all(by.css('.sample-area')).get(0);
+    expect(firstArea.getText()).toEqual('(none)');
+
+    // testing different key categories:
+    firstArea.sendKeys(Key.ENTER);
+    expect(firstArea.getText()).toEqual('enter');
+
+    firstArea.sendKeys(Key.SHIFT, Key.ENTER);
+    expect(firstArea.getText()).toEqual('shift.enter');
+
+    firstArea.sendKeys(Key.CONTROL, Key.SHIFT, Key.ENTER);
+    expect(firstArea.getText()).toEqual('control.shift.enter');
+
+    firstArea.sendKeys(' ');
+    expect(firstArea.getText()).toEqual('space');
+
+    // It would not work with a letter which position depends on the keyboard layout (ie AZERTY vs
+    // QWERTY), see https://code.google.com/p/chromedriver/issues/detail?id=553
+    firstArea.sendKeys('u');
+    expect(firstArea.getText()).toEqual('u');
+
+    firstArea.sendKeys(Key.CONTROL, 'b');
+    expect(firstArea.getText()).toEqual('control.b');
+
+    firstArea.sendKeys(Key.F1);
+    expect(firstArea.getText()).toEqual('f1');
+
+    firstArea.sendKeys(Key.ALT, Key.F1);
+    expect(firstArea.getText()).toEqual('alt.f1');
+
+    firstArea.sendKeys(Key.CONTROL, Key.F1);
+    expect(firstArea.getText()).toEqual('control.f1');
+
+    // There is an issue with Key.NUMPAD0 (and other NUMPADx):
+    // chromedriver does not correctly set the location property on the event to
+    // specify that the key is on the numeric keypad (event.location = 3)
+    // so the following test fails:
+    // firstArea.sendKeys(Key.NUMPAD0);
+    // expect(firstArea.getText()).toEqual('0');
+  });
+
+  it('should correctly react to the specified key', function() {
+    const secondArea = element.all(by.css('.sample-area')).get(1);
+    secondArea.sendKeys(Key.SHIFT, Key.ENTER);
+    expect(secondArea.getText()).toEqual('You pressed shift.enter!');
+  });
+
+  it('should not react to incomplete keys', function() {
+    const secondArea = element.all(by.css('.sample-area')).get(1);
+    secondArea.sendKeys(Key.ENTER);
+    expect(secondArea.getText()).toEqual('');
+  });
+
+  it('should not react to keys with more modifiers', function() {
+    const secondArea = element.all(by.css('.sample-area')).get(1);
+    secondArea.sendKeys(Key.CONTROL, Key.SHIFT, Key.ENTER);
+    expect(secondArea.getText()).toEqual('');
+  });
+
+});
diff --git a/modules/playground/e2e_test/model_driven_forms/model_driven_forms_spec.ts b/modules/playground/e2e_test/model_driven_forms/model_driven_forms_spec.ts
new file mode 100644
index 000000000000..a3b3aaaca6fb
--- /dev/null
+++ b/modules/playground/e2e_test/model_driven_forms/model_driven_forms_spec.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser, by, element} from 'protractor';
+
+describe('Model-Driven Forms', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  const URL = 'all/playground/src/model_driven_forms/index.html';
+
+  it('should display errors', function() {
+    browser.get(URL);
+
+    const form = element.all(by.css('form')).first();
+    const input = element.all(by.css('#creditCard')).first();
+    const firstName = element.all(by.css('#firstName')).first();
+
+    input.sendKeys('invalid');
+    firstName.click();
+
+    expect(form.getAttribute('innerHTML')).toContain('is invalid credit card number');
+  });
+});
diff --git a/modules/playground/e2e_test/order_management/order_management_spec.ts b/modules/playground/e2e_test/order_management/order_management_spec.ts
new file mode 100644
index 000000000000..7750eeda4407
--- /dev/null
+++ b/modules/playground/e2e_test/order_management/order_management_spec.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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser} from 'protractor';
+
+describe('Order Management CRUD', function() {
+  const URL = 'all/playground/src/order_management/index.html';
+
+  it('should work', function() {
+    browser.get(URL);
+    verifyNoBrowserErrors();
+  });
+});
diff --git a/modules/playground/e2e_test/person_management/person_management_spec.ts b/modules/playground/e2e_test/person_management/person_management_spec.ts
new file mode 100644
index 000000000000..b1d5dad6c60b
--- /dev/null
+++ b/modules/playground/e2e_test/person_management/person_management_spec.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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser} from 'protractor';
+
+describe('Person Management CRUD', function() {
+  const URL = 'all/playground/src/person_management/index.html';
+
+  it('should work', function() {
+    browser.get(URL);
+    verifyNoBrowserErrors();
+  });
+});
diff --git a/modules/playground/e2e_test/relative_assets/assets_spec.ts b/modules/playground/e2e_test/relative_assets/assets_spec.ts
new file mode 100644
index 000000000000..99dcb7f1ec17
--- /dev/null
+++ b/modules/playground/e2e_test/relative_assets/assets_spec.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {$, ExpectedConditions, browser, by, element} from 'protractor';
+
+function waitForElement(selector: string) {
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(ExpectedConditions.presenceOf($(selector)), 20000);
+}
+
+describe('relative assets relative-app', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  const URL = 'all/playground/src/relative_assets/';
+
+  it('should load in the templateUrl relative to the my-cmp component', () => {
+    browser.get(URL);
+
+    waitForElement('my-cmp .inner-container');
+    expect(element.all(by.css('my-cmp .inner-container')).count()).toEqual(1);
+  });
+
+  it('should load in the styleUrls relative to the my-cmp component', () => {
+    browser.get(URL);
+
+    waitForElement('my-cmp .inner-container');
+    const elem = element(by.css('my-cmp .inner-container'));
+    const width = browser.executeScript(
+        (e: Element) => parseInt(window.getComputedStyle(e).width), elem.getWebElement());
+
+    expect(width).toBe(432);
+  });
+});
diff --git a/modules/playground/e2e_test/routing/routing_spec.ts b/modules/playground/e2e_test/routing/routing_spec.ts
new file mode 100644
index 000000000000..d86efa17afde
--- /dev/null
+++ b/modules/playground/e2e_test/routing/routing_spec.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {$, ExpectedConditions, browser, by, element} from 'protractor';
+
+function waitForElement(selector: string) {
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(ExpectedConditions.presenceOf($(selector)), 20000);
+}
+
+describe('routing inbox-app', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  describe('index view', () => {
+    const URL = 'all/playground/src/routing/';
+
+    it('should list out the current collection of items', () => {
+      browser.get(URL);
+      waitForElement('.inbox-item-record');
+      expect(element.all(by.css('.inbox-item-record')).count()).toEqual(200);
+    });
+  });
+});
diff --git a/modules/playground/e2e_test/sourcemap/sourcemap_spec.ts b/modules/playground/e2e_test/sourcemap/sourcemap_spec.ts
new file mode 100644
index 000000000000..9648355734b8
--- /dev/null
+++ b/modules/playground/e2e_test/sourcemap/sourcemap_spec.ts
@@ -0,0 +1,59 @@
+/**
+ * @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 {$, browser} from 'protractor';
+import {logging} from 'selenium-webdriver';
+
+const fs = require('fs');
+const sourceMap = require('source-map');
+
+describe('sourcemaps', function() {
+  const URL = 'all/playground/src/sourcemap/index.html';
+
+  it('should map sources', function() {
+    browser.get(URL);
+
+    $('error-app .errorButton').click();
+
+    // TODO(tbosch): Bug in ChromeDriver: Need to execute at least one command
+    // so that the browser logs can be read out!
+    browser.executeScript('1+1');
+    browser.manage().logs().get(logging.Type.BROWSER).then(function(logs: any) {
+      let errorLine: number = null;
+      let errorColumn: number = null;
+      logs.forEach(function(log: any) {
+        const match = log.message.match(/\.createError\s+\(.+:(\d+):(\d+)/m);
+        if (match) {
+          errorLine = parseInt(match[1]);
+          errorColumn = parseInt(match[2]);
+        }
+      });
+
+      expect(errorLine).not.toBeNull();
+      expect(errorColumn).not.toBeNull();
+
+
+      const content =
+          fs.readFileSync('dist/all/playground/src/sourcemap/index.js').toString('utf8');
+      const marker = '//# sourceMappingURL=data:application/json;base64,';
+      const index = content.indexOf(marker);
+      const sourceMapData =
+          new Buffer(content.substring(index + marker.length), 'base64').toString('utf8');
+
+      const decoder = new sourceMap.SourceMapConsumer(JSON.parse(sourceMapData));
+
+      const originalPosition = decoder.originalPositionFor({line: errorLine, column: errorColumn});
+
+      const sourceCodeLines = fs.readFileSync('modules/playground/src/sourcemap/index.ts', {
+                                  encoding: 'UTF-8'
+                                }).split('\n');
+      expect(sourceCodeLines[originalPosition.line - 1])
+          .toMatch(/throw new Error\(\'Sourcemap test\'\)/);
+    });
+  });
+});
diff --git a/modules/playground/e2e_test/svg/svg_spec.ts b/modules/playground/e2e_test/svg/svg_spec.ts
new file mode 100644
index 000000000000..464f8d0afcea
--- /dev/null
+++ b/modules/playground/e2e_test/svg/svg_spec.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser, by, element} from 'protractor';
+
+describe('SVG', function() {
+
+  const URL = 'all/playground/src/svg/index.html';
+
+  afterEach(verifyNoBrowserErrors);
+  beforeEach(() => { browser.get(URL); });
+
+  it('should display SVG component contents', function() {
+    const svgText = element.all(by.css('g text')).get(0);
+    expect(svgText.getText()).toEqual('Hello');
+  });
+
+});
diff --git a/modules/playground/e2e_test/template_driven_forms/template_driven_forms_spec.ts b/modules/playground/e2e_test/template_driven_forms/template_driven_forms_spec.ts
new file mode 100644
index 000000000000..ae2eab59582c
--- /dev/null
+++ b/modules/playground/e2e_test/template_driven_forms/template_driven_forms_spec.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser, by, element} from 'protractor';
+
+describe('Template-Driven Forms', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  const URL = 'all/playground/src/template_driven_forms/index.html';
+
+  it('should display errors', function() {
+    browser.get(URL);
+
+    const form = element.all(by.css('form')).first();
+    const input = element.all(by.css('#creditCard')).first();
+    const firstName = element.all(by.css('#firstName')).first();
+
+    input.sendKeys('invalid');
+    firstName.click();
+
+    expect(form.getAttribute('innerHTML')).toContain('is invalid credit card number');
+  });
+});
diff --git a/modules/playground/e2e_test/upgrade/upgrade_spec.ts b/modules/playground/e2e_test/upgrade/upgrade_spec.ts
new file mode 100644
index 000000000000..eb5a86520d58
--- /dev/null
+++ b/modules/playground/e2e_test/upgrade/upgrade_spec.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser, by, element} from 'protractor';
+
+// TODO(i): re-enable once we are using a version of protractor containing the
+// change in https://github.com/angular/protractor/pull/3403
+xdescribe('ngUpgrade', function() {
+  const URL = 'all/playground/src/upgrade/index.html';
+
+  beforeEach(function() {
+    browser.rootEl = 'body';
+    (<any>browser).ng12Hybrid = true;
+    browser.get(URL);
+  });
+
+  afterEach(function() {
+    (<any>browser).useAllAngular2AppRoots();
+    (<any>browser).ng12Hybrid = false;
+    verifyNoBrowserErrors();
+  });
+
+  it('should bootstrap AngularJS and Angular apps together', function() {
+    const ng1NameInput = element(by.css('input[ng-model="name"]'));
+    expect(ng1NameInput.getAttribute('value')).toEqual('World');
+
+    const userSpan = element(by.css('user span'));
+    expect(userSpan.getText()).toMatch(/World$/);
+  });
+});
diff --git a/modules/playground/e2e_test/web_workers/animations/animations_spec.ts b/modules/playground/e2e_test/web_workers/animations/animations_spec.ts
new file mode 100644
index 000000000000..d3590ff9fe15
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/animations/animations_spec.ts
@@ -0,0 +1,76 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser, by, element, protractor} from 'protractor';
+
+// TODO(matsko): make this test work again with new view engine.
+xdescribe('WebWorkers Animations', function() {
+  afterEach(() => {
+    verifyNoBrowserErrors();
+    browser.ignoreSynchronization = false;
+  });
+
+  const selector = 'animation-app';
+  const URL = 'all/playground/src/web_workers/animations/index.html';
+
+  it('should bootstrap', () => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+
+    waitForBootstrap();
+    const elem = element(by.css(selector + ' .box'));
+    expect(elem.getText()).toEqual('...');
+  });
+
+  it('should animate to open', () => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+
+    waitForBootstrap();
+    element(by.css(selector + ' button')).click();
+
+    const boxElm = element(by.css(selector + ' .box'));
+    browser.wait(() => boxElm.getSize().then(sizes => sizes['width'] > 750), 1000);
+  });
+
+  it('should cancel the animation midway and continue from where it left off', () => {
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+
+    waitForBootstrap();
+
+    const elem = element(by.css(selector + ' .box'));
+    const btn = element(by.css(selector + ' button'));
+    const getWidth = () => elem.getSize().then((sizes: any) => sizes['width']);
+
+    btn.click();
+
+    browser.sleep(250);
+
+    btn.click();
+
+    expect(getWidth()).toBeLessThan(600);
+
+    browser.sleep(500);
+
+    expect(getWidth()).toBeLessThan(50);
+  });
+
+  function waitForBootstrap() {
+    browser.wait(protractor.until.elementLocated(by.css(selector + ' .box')), 5000)
+        .then(() => {}, () => {
+          // jasmine will timeout if this gets called too many times
+          console.error('>> unexpected timeout -> browser.refresh()');
+          browser.refresh();
+          waitForBootstrap();
+        });
+  }
+});
diff --git a/modules/playground/e2e_test/web_workers/input/input_spec.ts b/modules/playground/e2e_test/web_workers/input/input_spec.ts
new file mode 100644
index 000000000000..833af282a28c
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/input/input_spec.ts
@@ -0,0 +1,75 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {ExpectedConditions, browser, by, element, protractor} from 'protractor';
+
+
+describe('WebWorkers Input', function() {
+  afterEach(() => {
+    verifyNoBrowserErrors();
+    browser.ignoreSynchronization = false;
+  });
+  const selector = 'input-app';
+  const URL = 'all/playground/src/web_workers/input/index.html';
+  const VALUE = 'test val';
+
+  it('should bootstrap', () => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+
+    waitForBootstrap();
+    const elem = element(by.css(selector + ' h2'));
+    expect(elem.getText()).toEqual('Input App');
+  });
+
+  it('should bind to input value', () => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+
+    waitForBootstrap();
+    const input = element(by.css(selector + ' input'));
+    input.sendKeys(VALUE);
+    const displayElem = element(by.css(selector + ' .input-val'));
+    const expectedVal = `Input val is ${VALUE}.`;
+    browser.wait(ExpectedConditions.textToBePresentInElement(displayElem, expectedVal), 5000);
+    expect(displayElem.getText()).toEqual(expectedVal);
+  });
+
+  it('should bind to textarea value', () => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+
+    waitForBootstrap();
+    const input = element(by.css(selector + ' textarea'));
+    input.sendKeys(VALUE);
+    const displayElem = element(by.css(selector + ' .textarea-val'));
+    const expectedVal = `Textarea val is ${VALUE}.`;
+    browser.wait(ExpectedConditions.textToBePresentInElement(displayElem, expectedVal), 5000);
+    expect(displayElem.getText()).toEqual(expectedVal);
+  });
+
+  function waitForBootstrap() {
+    browser.wait(protractor.until.elementLocated(by.css(selector + ' h2')), 5000)
+        .then(
+            () => {
+              const elem = element(by.css(selector + ' h2'));
+              browser.wait(
+                  protractor.ExpectedConditions.textToBePresentInElement(elem, 'Input App'), 5000);
+            },
+            () => {
+              // jasmine will timeout if this gets called too many times
+              console.error('>> unexpected timeout -> browser.refresh()');
+              browser.refresh();
+              waitForBootstrap();
+            });
+  }
+});
diff --git a/modules/playground/e2e_test/web_workers/kitchen_sink/kitchen_sink_spec.ts b/modules/playground/e2e_test/web_workers/kitchen_sink/kitchen_sink_spec.ts
new file mode 100644
index 000000000000..a081abb8d4a5
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/kitchen_sink/kitchen_sink_spec.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {ExpectedConditions, browser, by, element, protractor} from 'protractor';
+
+describe('WebWorkers Kitchen Sink', function() {
+  afterEach(() => {
+    verifyNoBrowserErrors();
+    browser.ignoreSynchronization = false;
+  });
+  const selector = 'hello-app .greeting';
+  const URL = 'all/playground/src/web_workers/kitchen_sink/index.html';
+
+  it('should greet', () => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+
+    browser.wait(protractor.until.elementLocated(by.css(selector)), 15000);
+    const elem = element(by.css(selector));
+    browser.wait(ExpectedConditions.textToBePresentInElement(elem, 'hello world!'), 5000);
+    expect(elem.getText()).toEqual('hello world!');
+
+  });
+
+  it('should change greeting', () => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+    const changeButtonSelector = 'hello-app .changeButton';
+
+    browser.wait(protractor.until.elementLocated(by.css(changeButtonSelector)), 15000);
+    element(by.css(changeButtonSelector)).click();
+    const elem = element(by.css(selector));
+    browser.wait(ExpectedConditions.textToBePresentInElement(elem, 'howdy world!'), 5000);
+    expect(elem.getText()).toEqual('howdy world!');
+  });
+
+  it('should display correct key names', () => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+    browser.wait(protractor.until.elementLocated(by.css('.sample-area')), 15000);
+
+    const area = element.all(by.css('.sample-area')).first();
+    expect(area.getText()).toEqual('(none)');
+
+    area.sendKeys('u');
+    browser.wait(ExpectedConditions.textToBePresentInElement(area, 'U'), 5000);
+    expect(area.getText()).toEqual('U');
+  });
+});
diff --git a/modules/playground/e2e_test/web_workers/message_broker/message_broker_spec.ts b/modules/playground/e2e_test/web_workers/message_broker/message_broker_spec.ts
new file mode 100644
index 000000000000..cc06d5915613
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/message_broker/message_broker_spec.ts
@@ -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
+ */
+
+import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {ExpectedConditions, browser, by, element, protractor} from 'protractor';
+
+const URL = 'all/playground/src/web_workers/message_broker/index.html';
+
+describe('MessageBroker', function() {
+
+  afterEach(() => {
+    verifyNoBrowserErrors();
+    browser.ignoreSynchronization = false;
+  });
+
+  it('should bootstrap', () => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+    waitForBootstrap();
+    expect(element(by.css('app h1')).getText()).toEqual('WebWorker MessageBroker Test');
+  });
+
+  it('should echo messages', () => {
+    const VALUE = 'Hi There';
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+    waitForBootstrap();
+
+    const input = element.all(by.css('#echo_input')).first();
+    input.sendKeys(VALUE);
+    element(by.css('#send_echo')).click();
+    const area = element(by.css('#echo_result'));
+    browser.wait(ExpectedConditions.textToBePresentInElement(area, VALUE), 5000);
+    expect(area.getText()).toEqual(VALUE);
+  });
+});
+
+function waitForBootstrap(): void {
+  browser.wait(protractor.until.elementLocated(by.css('app h1')), 15000);
+}
diff --git a/modules/playground/e2e_test/web_workers/router/router_spec.ts b/modules/playground/e2e_test/web_workers/router/router_spec.ts
new file mode 100644
index 000000000000..3d5863e10d11
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/router/router_spec.ts
@@ -0,0 +1,84 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser, by, element, protractor} from 'protractor';
+
+describe('WebWorker Router', () => {
+  beforeEach(() => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get('/');
+  });
+
+  afterEach(() => {
+    verifyNoBrowserErrors();
+    browser.ignoreSynchronization = false;
+  });
+
+  const contentSelector = 'app main h1';
+  const navSelector = 'app nav ul';
+  const baseUrl = 'all/playground/src/web_workers/router/index.html';
+
+  it('should route on click', () => {
+    browser.get(baseUrl);
+
+    waitForElement(contentSelector);
+    let content = element(by.css(contentSelector));
+    expect(content.getText()).toEqual('Start');
+
+    const aboutBtn = element(by.css(navSelector + ' .about'));
+    aboutBtn.click();
+    waitForUrl(/\/about/);
+    waitForElement(contentSelector);
+    waitForElementText(contentSelector, 'About');
+    content = element(by.css(contentSelector));
+    expect(content.getText()).toEqual('About');
+    expect(browser.getCurrentUrl()).toMatch(/\/about/);
+
+    const contactBtn = element(by.css(navSelector + ' .contact'));
+    contactBtn.click();
+    waitForUrl(/\/contact/);
+    waitForElement(contentSelector);
+    waitForElementText(contentSelector, 'Contact');
+    content = element(by.css(contentSelector));
+    expect(content.getText()).toEqual('Contact');
+    expect(browser.getCurrentUrl()).toMatch(/\/contact/);
+  });
+
+  it('should load the correct route from the URL', () => {
+    browser.get(baseUrl + '#/about');
+
+    waitForElement(contentSelector);
+    waitForElementText(contentSelector, 'About');
+    const content = element(by.css(contentSelector));
+    expect(content.getText()).toEqual('About');
+  });
+
+  function waitForElement(selector: string): void {
+    browser.wait(protractor.until.elementLocated(by.css(selector)), 15000);
+  }
+
+  function waitForElementText(contentSelector: string, expected: string): void {
+    browser.wait(() => {
+      const deferred = protractor.promise.defer();
+      const elem = element(by.css(contentSelector));
+      elem.getText().then((text: string) => { return deferred.fulfill(text === expected); });
+      return deferred.promise;
+    }, 5000);
+  }
+
+  function waitForUrl(regex: RegExp): void {
+    browser.wait(() => {
+      const deferred = protractor.promise.defer();
+      browser.getCurrentUrl().then(
+          (url: string) => { return deferred.fulfill(url.match(regex) !== null); });
+      return deferred.promise;
+    }, 5000);
+  }
+});
diff --git a/modules/playground/e2e_test/web_workers/todo/todo_spec.ts b/modules/playground/e2e_test/web_workers/todo/todo_spec.ts
new file mode 100644
index 000000000000..d9c8416575d9
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/todo/todo_spec.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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser, by, element, protractor} from 'protractor';
+
+describe('WebWorkers Todo', function() {
+  afterEach(() => {
+    verifyNoBrowserErrors();
+    browser.ignoreSynchronization = false;
+  });
+
+  const URL = 'all/playground/src/web_workers/todo/index.html';
+
+  it('should bootstrap', () => {
+    // This test can't wait for Angular as Testability is not available when using WebWorker
+    browser.ignoreSynchronization = true;
+    browser.get(URL);
+
+    waitForBootstrap();
+    expect(element(by.css('#todoapp header')).getText()).toEqual('todos');
+  });
+
+});
+
+function waitForBootstrap(): void {
+  browser.wait(protractor.until.elementLocated(by.css('todo-app #todoapp')), 15000);
+}
diff --git a/modules/playground/e2e_test/zippy_component/zippy_spec.ts b/modules/playground/e2e_test/zippy_component/zippy_spec.ts
new file mode 100644
index 000000000000..fc339a12e352
--- /dev/null
+++ b/modules/playground/e2e_test/zippy_component/zippy_spec.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+import {browser, by, element} from 'protractor';
+
+describe('Zippy Component', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  describe('zippy', function() {
+    const URL = 'all/playground/src/zippy_component/index.html';
+
+    beforeEach(function() { browser.get(URL); });
+
+    it('should change the zippy title depending on it\'s state', function() {
+      const zippyTitle = element(by.css('.zippy__title'));
+
+      expect(zippyTitle.getText()).toEqual('▾ Details');
+      zippyTitle.click();
+      expect(zippyTitle.getText()).toEqual('▸ Details');
+    });
+
+    it('should have zippy content', function() {
+      expect(element(by.css('.zippy__content')).getText()).toEqual('This is some content.');
+    });
+
+    it('should toggle when the zippy title is clicked', function() {
+      element(by.css('.zippy__title')).click();
+      expect(element(by.css('.zippy__content')).isDisplayed()).toEqual(false);
+      element(by.css('.zippy__title')).click();
+      expect(element(by.css('.zippy__content')).isDisplayed()).toEqual(true);
+    });
+  });
+});
diff --git a/modules/playground/favicon.ico b/modules/playground/favicon.ico
new file mode 100644
index 000000000000..8081c7ceaf2b
Binary files /dev/null and b/modules/playground/favicon.ico differ
diff --git a/modules/playground/src/animate/app/animate-app.ts b/modules/playground/src/animate/app/animate-app.ts
new file mode 100644
index 000000000000..0dba74ec6902
--- /dev/null
+++ b/modules/playground/src/animate/app/animate-app.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 {animate, keyframes, state, style, transition, trigger} from '@angular/animations';
+import {Component} from '@angular/core';
+
+@Component({
+  host: {
+    '[@backgroundAnimation]': 'bgStatus',
+    '(@backgroundAnimation.start)': 'bgStatusChanged($event, "started")',
+    '(@backgroundAnimation.done)': 'bgStatusChanged($event, "completed")'
+  },
+  selector: 'animate-app',
+  styleUrls: ['css/animate-app.css'],
+  template: `
+    <button (click)="state='start'">Start State</button>
+    <button (click)="state='active'">Active State</button>
+    |
+    <button (click)="state='void'">Void State</button>
+    <button (click)="reorderAndRemove()">Scramble!</button>
+    <button (click)="state='default'">Unhandled (default) State</button>
+    <button style="float:right" (click)="bgStatus='blur'">Blur Page (Host)</button>
+    <hr />
+    <div *ngFor="let item of items; let i=index" class="box" [@boxAnimation]="state">
+      {{ item }} - {{ i }}
+      <button (click)="remove(item)">x</button>
+    </div>
+  `,
+  animations: [
+    trigger('backgroundAnimation', [
+      state('focus', style({ 'background-color':'white' })),
+      state('blur', style({ 'background-color':'grey' })),
+      transition('* => *', [
+        animate(500)
+      ])
+    ]),
+    trigger('boxAnimation', [
+      state('*', style({ 'height': '*', 'background-color': '#dddddd', 'color':'black' })),
+      state('void, hidden', style({ 'height': 0, 'opacity': 0 })),
+      state('start', style({ 'background-color': 'red', 'height': '*' })),
+      state('active', style({ 'background-color': 'orange', 'color': 'white', 'font-size':'100px' })),
+
+      transition('active <=> start', [
+        animate(500, style({ 'transform': 'scale(2)' })),
+        animate(500)
+      ]),
+
+      transition('* => *', [
+        animate(1000, style({ 'opacity': 1, 'height': 300 })),
+        animate(1000, style({ 'background-color': 'blue' })),
+        animate(1000, keyframes([
+          style({ 'background-color': 'blue', 'color': 'black', 'offset': 0.2 }),
+          style({ 'background-color': 'brown', 'color': 'black', 'offset': 0.5 }),
+          style({ 'background-color': 'black', 'color': 'white', 'offset': 1 })
+        ])),
+        animate(2000)
+      ])
+    ])
+  ]
+})
+export class AnimateApp {
+  public items: number[] = [];
+  private _state: ('start'|'active'|'void'|'default');
+
+  public bgStatus = 'focus';
+
+  remove(item: number) {
+    const index = this.items.indexOf(item);
+    if (index >= 0) {
+      this.items.splice(index, 1);
+    }
+  }
+
+  reorderAndRemove() {
+    this.items = this.items.sort((a, b) => Math.random() - 0.5);
+    this.items.splice(Math.floor(Math.random() * this.items.length), 1);
+    this.items.splice(Math.floor(Math.random() * this.items.length), 1);
+    this.items[Math.floor(Math.random() * this.items.length)] = 99;
+  }
+
+  bgStatusChanged(data: {[key: string]: string}, phase: string) {
+    alert(`backgroundAnimation has ${phase} from ${data['fromState']} to ${data['toState']}`);
+  }
+
+  get state() { return this._state; }
+  set state(s) {
+    this._state = s;
+    if (s == 'void') {
+      this.items = [];
+    } else {
+      this.items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
+    }
+  }
+}
diff --git a/modules/playground/src/animate/css/animate-app.css b/modules/playground/src/animate/css/animate-app.css
new file mode 100644
index 000000000000..0f846cb82320
--- /dev/null
+++ b/modules/playground/src/animate/css/animate-app.css
@@ -0,0 +1,20 @@
+button {
+  background:red;
+  font-size:20px;
+  color:white;
+  border:0;
+  cursor:pointer;
+}
+
+.box {
+  font-size:40px;
+  border:10px solid black;
+  width:200px;
+  line-height:100px;
+  height:100px;
+  display:inline-block;
+  vertical-align:top;
+  text-align:center;
+  margin:5px;
+  overflow:hidden;
+}
diff --git a/modules/playground/src/animate/index.html b/modules/playground/src/animate/index.html
new file mode 100644
index 000000000000..acaaacef3161
--- /dev/null
+++ b/modules/playground/src/animate/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <title>Animation Example</title>
+  <link rel="stylesheet" type="text/css" href="./css/app.css" />
+  <style>
+    animate-app {
+      display:block;
+      position:fixed;
+      top:0;
+      left:0;
+      right:0;
+      bottom:0;
+      padding:50px;
+    }
+  </style>
+<body>
+  <animate-app>Loading...</animate-app>
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/animate/index.ts b/modules/playground/src/animate/index.ts
new file mode 100644
index 000000000000..68ef663588cb
--- /dev/null
+++ b/modules/playground/src/animate/index.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
+ */
+import {NgModule} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+import {AnimateApp} from './app/animate-app';
+
+@NgModule({declarations: [AnimateApp], bootstrap: [AnimateApp], imports: [BrowserAnimationsModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/async/index.html b/modules/playground/src/async/index.html
new file mode 100644
index 000000000000..64f40da63ae3
--- /dev/null
+++ b/modules/playground/src/async/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <title>Async</title>
+</head>
+
+<body>
+  <async-app>
+    Loading...
+  </async-app>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/async/index.ts b/modules/playground/src/async/index.ts
new file mode 100644
index 000000000000..a476f9da80d3
--- /dev/null
+++ b/modules/playground/src/async/index.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 {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+@Component({
+  selector: 'async-app',
+  template: `
+    <div id='increment'>
+      <span class='val'>{{val1}}</span>
+      <button class='action' (click)="increment()">Increment</button>
+    </div>
+    <div id='delayedIncrement'>
+      <span class='val'>{{val2}}</span>
+      <button class='action' (click)="delayedIncrement()">Delayed Increment</button>
+      <button class='cancel' *ngIf="timeoutId != null" (click)="cancelDelayedIncrement()">Cancel</button>
+    </div>
+    <div id='multiDelayedIncrements'>
+      <span class='val'>{{val3}}</span>
+      <button class='action' (click)="multiDelayedIncrements(10)">10 Delayed Increments</button>
+      <button class='cancel' *ngIf="multiTimeoutId != null" (click)="cancelMultiDelayedIncrements()">Cancel</button>
+    </div>
+    <div id='periodicIncrement'>
+      <span class='val'>{{val4}}</span>
+      <button class='action' (click)="periodicIncrement()">Periodic Increment</button>
+      <button class='cancel' *ngIf="intervalId != null" (click)="cancelPeriodicIncrement()">Cancel</button>
+    </div>
+  `
+})
+class AsyncApplication {
+  val1: number = 0;
+  val2: number = 0;
+  val3: number = 0;
+  val4: number = 0;
+  timeoutId: any = null;
+  multiTimeoutId: any = null;
+  intervalId: any = null;
+
+  increment(): void { this.val1++; }
+
+  delayedIncrement(): void {
+    this.cancelDelayedIncrement();
+    this.timeoutId = setTimeout(() => {
+      this.val2++;
+      this.timeoutId = null;
+    }, 2000);
+  }
+
+  multiDelayedIncrements(i: number): void {
+    this.cancelMultiDelayedIncrements();
+
+    const self = this;
+    function helper(_i: number) {
+      if (_i <= 0) {
+        self.multiTimeoutId = null;
+        return;
+      }
+
+      self.multiTimeoutId = setTimeout(() => {
+        self.val3++;
+        helper(_i - 1);
+      }, 500);
+    }
+    helper(i);
+  }
+
+  periodicIncrement(): void {
+    this.cancelPeriodicIncrement();
+    this.intervalId = setInterval(() => this.val4++, 2000);
+  }
+
+  cancelDelayedIncrement(): void {
+    if (this.timeoutId != null) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+  }
+
+  cancelMultiDelayedIncrements(): void {
+    if (this.multiTimeoutId != null) {
+      clearTimeout(this.multiTimeoutId);
+      this.multiTimeoutId = null;
+    }
+  }
+
+  cancelPeriodicIncrement(): void {
+    if (this.intervalId != null) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+}
+
+@NgModule(
+    {declarations: [AsyncApplication], bootstrap: [AsyncApplication], imports: [BrowserModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/examples/src/benchpress/index.html b/modules/playground/src/benchpress/index.html
similarity index 100%
rename from modules/examples/src/benchpress/index.html
rename to modules/playground/src/benchpress/index.html
diff --git a/modules/playground/src/bootstrap.ts b/modules/playground/src/bootstrap.ts
new file mode 100644
index 000000000000..92daa49b1d7e
--- /dev/null
+++ b/modules/playground/src/bootstrap.ts
@@ -0,0 +1,102 @@
+/**
+ * @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
+ */
+
+
+(function(global: any) {
+  writeScriptTag('/all/playground/vendor/core.js');
+  writeScriptTag('/all/playground/vendor/zone.js');
+  writeScriptTag('/all/playground/vendor/long-stack-trace-zone.js');
+  writeScriptTag('/all/playground/vendor/system.src.js');
+  writeScriptTag('/all/playground/vendor/Reflect.js', 'playgroundBootstrap()');
+
+  global.playgroundBootstrap = playgroundBootstrap;
+
+  function playgroundBootstrap() {
+    // check query param
+    const useBundles = location.search.indexOf('bundles=false') == -1;
+
+    if (useBundles) {
+      System.config({
+        map: {
+          'index': 'index.js',
+          '@angular/common': '/packages-dist/common/bundles/common.umd.js',
+          '@angular/animations': '/packages-dist/animation/bundles/animations.umd.js',
+          '@angular/platform-browser/animations':
+              '/packages-dist/platform-browser/animations/bundles/platform-browser-animations.umd.js',
+          '@angular/compiler': '/packages-dist/compiler/bundles/compiler.umd.js',
+          '@angular/core': '/packages-dist/core/bundles/core.umd.js',
+          '@angular/forms': '/packages-dist/forms/bundles/forms.umd.js',
+          '@angular/http': '/packages-dist/http/bundles/http.umd.js',
+          '@angular/platform-browser':
+              '/packages-dist/platform-browser/bundles/platform-browser.umd.js',
+          '@angular/platform-browser-dynamic':
+              '/packages-dist/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+          '@angular/platform-webworker':
+              '/packages-dist/platform-webworker/bundles/platform-webworker.umd.js',
+          '@angular/platform-webworker-dynamic':
+              '/packages-dist/platform-webworker-dynamic/bundles/platform-webworker-dynamic.umd.js',
+          '@angular/router': '/packages-dist/router/bundles/router.umd.js',
+          '@angular/upgrade': '/packages-dist/upgrade/bundles/upgrade.umd.js',
+          '@angular/upgrade/static': '/packages-dist/upgrade/bundles/upgrade-static.umd.js',
+          'rxjs': '/all/playground/vendor/rxjs',
+        },
+        packages: {
+          'app': {defaultExtension: 'js'},
+          'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs': {main: 'index.js', defaultExtension: 'js'},
+
+        }
+      });
+    } else {
+      console.warn(
+          'Not using the Angular bundles. Don\'t use this configuration for e2e/performance tests!');
+
+      System.config({
+        map: {
+          'index': 'index.js',
+          '@angular': '/all/@angular',
+          'rxjs': '/all/playground/vendor/rxjs',
+        },
+        packages: {
+          'app': {defaultExtension: 'js'},
+          '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/animations': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/forms': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/http': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/upgrade': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs': {main: 'index.js', defaultExtension: 'js'},
+        }
+      });
+    }
+
+
+    // BOOTSTRAP the app!
+    System.import('index').then(function(m: {main: Function}) {
+      m.main();
+    }, console.error.bind(console));
+  }
+
+
+  function writeScriptTag(scriptUrl: string, onload?: string) {
+    document.write(`<script src="${scriptUrl}" onload="${onload}"></script>`);
+  }
+}(window));
diff --git a/modules/playground/src/gestures/index.html b/modules/playground/src/gestures/index.html
new file mode 100644
index 000000000000..746684c1e934
--- /dev/null
+++ b/modules/playground/src/gestures/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Hammer.JS</title>
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
+    <style type="text/css">
+      html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+<body>
+  <gestures-app></gestures-app>
+
+  <script src="/all/playground/vendor/hammer.js"></script>
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/gestures/index.ts b/modules/playground/src/gestures/index.ts
new file mode 100644
index 000000000000..29d099f5e783
--- /dev/null
+++ b/modules/playground/src/gestures/index.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 {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+@Component({selector: 'gestures-app', templateUrl: 'template.html'})
+class GesturesCmp {
+  swipeDirection: string = '-';
+  pinchScale: number = 1;
+  rotateAngle: number = 0;
+
+  onSwipe(event: HammerInput): void { this.swipeDirection = event.deltaX > 0 ? 'right' : 'left'; }
+
+  onPinch(event: HammerInput): void { this.pinchScale = event.scale; }
+
+  onRotate(event: HammerInput): void { this.rotateAngle = event.rotation; }
+}
+
+@NgModule({declarations: [GesturesCmp], bootstrap: [GesturesCmp], imports: [BrowserModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/examples/src/gestures/template.html b/modules/playground/src/gestures/template.html
similarity index 100%
rename from modules/examples/src/gestures/template.html
rename to modules/playground/src/gestures/template.html
diff --git a/modules/playground/src/hello_world/index.html b/modules/playground/src/hello_world/index.html
new file mode 100644
index 000000000000..6e75312ae164
--- /dev/null
+++ b/modules/playground/src/hello_world/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <title>Hello Angular</title>
+  <body>
+  <hello-app>
+    Loading...
+  </hello-app>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/hello_world/index.ts b/modules/playground/src/hello_world/index.ts
new file mode 100644
index 000000000000..2478447c93bd
--- /dev/null
+++ b/modules/playground/src/hello_world/index.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 {Component, Directive, ElementRef, Injectable, NgModule, Renderer} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
+
+// A service available to the Injector, used by the HelloCmp component.
+@Injectable()
+export class GreetingService {
+  greeting: string = 'hello';
+}
+
+// Directives are light-weight. They don't allow new
+// expression contexts (use @Component for those needs).
+@Directive({selector: '[red]'})
+export class RedDec {
+  // ElementRef is always injectable and it wraps the element on which the
+  // directive was found by the compiler.
+  constructor(el: ElementRef, renderer: Renderer) {
+    renderer.setElementStyle(el.nativeElement, 'color', 'red');
+  }
+}
+
+// Angular supports 2 basic types of directives:
+// - Component - the basic building blocks of Angular apps. Backed by
+//   ShadowDom.(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
+// - Directive - add behavior to existing elements.
+
+@Component({
+  // The Selector prop tells Angular on which elements to instantiate this
+  // class. The syntax supported is a basic subset of CSS selectors, for example
+  // 'element', '[attr]', [attr=foo]', etc.
+  selector: 'hello-app',
+  // These are services that would be created if a class in the component's
+  // template tries to inject them.
+  viewProviders: [GreetingService],
+  // Expressions in the template (like {{greeting}}) are evaluated in the
+  // context of the HelloCmp class below.
+  template: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
+           <button class="changeButton" (click)="changeGreeting()">change greeting</button>`
+})
+export class HelloCmp {
+  greeting: string;
+
+  constructor(service: GreetingService) { this.greeting = service.greeting; }
+
+  changeGreeting(): void { this.greeting = 'howdy'; }
+}
+
+@NgModule({declarations: [HelloCmp, RedDec], bootstrap: [HelloCmp], imports: [BrowserModule]})
+class ExampleModule {
+}
diff --git a/modules/playground/src/http/app/http_comp.ts b/modules/playground/src/http/app/http_comp.ts
new file mode 100644
index 000000000000..4a1be633d070
--- /dev/null
+++ b/modules/playground/src/http/app/http_comp.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 {Http, Response} from '@angular/http';
+import {map} from 'rxjs/operators';
+
+@Component({
+  selector: 'http-app',
+  template: `
+    <h1>people</h1>
+    <ul class="people">
+      <li *ngFor="let person of people">
+        hello, {{person['name']}}
+      </li>
+    </ul>
+  `
+})
+export class HttpCmp {
+  people: Object[];
+  constructor(http: Http) {
+    http.get('./people.json')
+        .pipe(map((res: Response) => res.json()))
+        .subscribe((people: Array<Object>) => this.people = people);
+  }
+}
diff --git a/modules/playground/src/http/index.html b/modules/playground/src/http/index.html
new file mode 100644
index 000000000000..fa19f65ec4d0
--- /dev/null
+++ b/modules/playground/src/http/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <title>Hello Http</title>
+<body>
+  <http-app>
+    Loading...
+  </http-app>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/http/index.ts b/modules/playground/src/http/index.ts
new file mode 100644
index 000000000000..9fbc08411851
--- /dev/null
+++ b/modules/playground/src/http/index.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 {NgModule} from '@angular/core';
+import {HttpModule} from '@angular/http';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {HttpCmp} from './app/http_comp';
+
+@NgModule({declarations: [HttpCmp], bootstrap: [HttpCmp], imports: [BrowserModule, HttpModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/examples/src/http/people.json b/modules/playground/src/http/people.json
similarity index 100%
rename from modules/examples/src/http/people.json
rename to modules/playground/src/http/people.json
diff --git a/modules/playground/src/jsonp/app/jsonp_comp.ts b/modules/playground/src/jsonp/app/jsonp_comp.ts
new file mode 100644
index 000000000000..46e111acf775
--- /dev/null
+++ b/modules/playground/src/jsonp/app/jsonp_comp.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {Jsonp} from '@angular/http';
+
+@Component({
+  selector: 'jsonp-app',
+  template: `
+    <h1>people</h1>
+    <ul class="people">
+      <li *ngFor="let person of people">
+        hello, {{person['name']}}
+      </li>
+    </ul>
+  `
+})
+export class JsonpCmp {
+  people: Object;
+  constructor(jsonp: Jsonp) {
+    jsonp.get('./people.json?callback=JSONP_CALLBACK').subscribe(res => this.people = res.json());
+  }
+}
diff --git a/modules/playground/src/jsonp/index.html b/modules/playground/src/jsonp/index.html
new file mode 100644
index 000000000000..e4fadcf64337
--- /dev/null
+++ b/modules/playground/src/jsonp/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <title>Hello Jsonp</title>
+<body>
+  <jsonp-app>
+    Loading...
+  </jsonp-app>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/jsonp/index.ts b/modules/playground/src/jsonp/index.ts
new file mode 100644
index 000000000000..b840bf025f78
--- /dev/null
+++ b/modules/playground/src/jsonp/index.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 {NgModule} from '@angular/core';
+import {JsonpModule} from '@angular/http';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {JsonpCmp} from './app/jsonp_comp';
+
+@NgModule({bootstrap: [JsonpCmp], declarations: [JsonpCmp], imports: [BrowserModule, JsonpModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/jsonp/people.json b/modules/playground/src/jsonp/people.json
new file mode 100644
index 000000000000..764beb25d73d
--- /dev/null
+++ b/modules/playground/src/jsonp/people.json
@@ -0,0 +1,2 @@
+// This can only be requested once due to constant method name :(
+__ng_jsonp__.__req0.finished([{"name":"caitp"}])
diff --git a/modules/playground/src/key_events/index.html b/modules/playground/src/key_events/index.html
new file mode 100644
index 000000000000..70b7f5fc4338
--- /dev/null
+++ b/modules/playground/src/key_events/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+  <title>Key events</title>
+  <style>
+    .sample-area {
+      text-align: center;
+      margin: 5px;
+      height: 50px;
+      line-height: 50px;
+      border-radius: 5px;
+      border: 1px solid #d0d0d0;
+    }
+    .sample-area:focus {
+      border: 1px solid blue;
+      color: blue;
+      font-weight: bold;
+    }
+  </style>
+<body>
+  <key-events-app>
+    Loading...
+  </key-events-app>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/key_events/index.ts b/modules/playground/src/key_events/index.ts
new file mode 100644
index 000000000000..116c3ce4bebb
--- /dev/null
+++ b/modules/playground/src/key_events/index.ts
@@ -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 {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+@Component({
+  selector: 'key-events-app',
+  template: `Click in the following area and press a key to display its name:<br>
+  <div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>
+  Click in the following area and press shift.enter:<br>
+  <div
+    (keydown.shift.enter)="onShiftEnter($event)"
+    (click)="resetShiftEnter()"
+    class="sample-area"
+    tabindex="0"
+  >{{shiftEnter ? 'You pressed shift.enter!' : ''}}</div>`
+})
+class KeyEventsApp {
+  lastKey: string = '(none)';
+  shiftEnter: boolean = false;
+
+  onKeyDown(event: KeyboardEvent): void {
+    this.lastKey = KeyEventsApp._getEventFullKey(event);
+    event.preventDefault();
+  }
+
+  onShiftEnter(event: KeyboardEvent): void {
+    this.shiftEnter = true;
+    event.preventDefault();
+  }
+
+  resetShiftEnter(): void { this.shiftEnter = false; }
+
+  /**
+   * Get a more readable version of current pressed keys.
+   * @see KeyEventsPlugin.getEventFullKey
+   */
+  private static _getEventFullKey(event: KeyboardEvent): string {
+    const modifierKeys = ['alt', 'control', 'meta', 'shift'];
+    const modifierKeyGetters: {[key: string]: (event: KeyboardEvent) => boolean} = {
+      'alt': (event: KeyboardEvent) => event.altKey,
+      'control': (event: KeyboardEvent) => event.ctrlKey,
+      'meta': (event: KeyboardEvent) => event.metaKey,
+      'shift': (event: KeyboardEvent) => event.shiftKey
+    };
+
+    let fullKey = '';
+    let key = event.key.toLowerCase();
+    if (key === ' ') {
+      key = 'space';  // for readability
+    } else if (key === '.') {
+      key = 'dot';  // because '.' is used as a separator in event names
+    }
+    modifierKeys.forEach(modifierName => {
+      if (modifierName != key) {
+        const modifierGetter = modifierKeyGetters[modifierName];
+        if (modifierGetter(event)) {
+          fullKey += modifierName + '.';
+        }
+      }
+    });
+    return fullKey + key;
+  }
+}
+
+@NgModule({declarations: [KeyEventsApp], bootstrap: [KeyEventsApp], imports: [BrowserModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/model_driven_forms/index.html b/modules/playground/src/model_driven_forms/index.html
new file mode 100644
index 000000000000..366507deefb8
--- /dev/null
+++ b/modules/playground/src/model_driven_forms/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+  <title>Model Driven Forms</title>
+  <style>
+    .ng-touched.ng-invalid {
+      border-color: red;
+    }
+  </style>
+</head>
+
+<body>
+  <reactive-forms>
+    Loading...
+  </reactive-forms>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/model_driven_forms/index.ts b/modules/playground/src/model_driven_forms/index.ts
new file mode 100644
index 000000000000..ebb78850a3b2
--- /dev/null
+++ b/modules/playground/src/model_driven_forms/index.ts
@@ -0,0 +1,172 @@
+/**
+ * @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
+ */
+
+/* tslint:disable:no-console  */
+import {Component, Host, NgModule} from '@angular/core';
+import {AbstractControl, FormBuilder, FormGroup, FormGroupDirective, ReactiveFormsModule, Validators} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+
+
+/**
+ * Custom validator.
+ */
+function creditCardValidator(c: AbstractControl): {[key: string]: boolean} {
+  if (c.value && /^\d{16}$/.test(c.value)) {
+    return null;
+  } else {
+    return {'invalidCreditCard': true};
+  }
+}
+
+/**
+ * This is a component that displays an error message.
+ *
+ * For instance,
+ *
+ * <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
+ *
+ * Will display the "is required" error if the control is empty, and "invalid credit card" if the
+ * control is not empty
+ * but not valid.
+ *
+ * In a real application, this component would receive a service that would map an error code to an
+ * actual error message.
+ * To make it simple, we are using a simple map here.
+ */
+@Component({
+  selector: 'show-error',
+  inputs: ['controlPath: control', 'errorTypes: errors'],
+  template: `
+    <span *ngIf="errorMessage !== null">{{errorMessage}}</span>
+  `
+})
+class ShowError {
+  formDir: FormGroupDirective;
+  controlPath: string;
+  errorTypes: string[];
+
+  constructor(@Host() formDir: FormGroupDirective) { this.formDir = formDir; }
+
+  get errorMessage(): string {
+    const form: FormGroup = this.formDir.form;
+    const control = form.get(this.controlPath);
+    if (control && control.touched) {
+      for (let i = 0; i < this.errorTypes.length; ++i) {
+        if (control.hasError(this.errorTypes[i])) {
+          return this._errorMessage(this.errorTypes[i]);
+        }
+      }
+    }
+    return null;
+  }
+
+  private _errorMessage(code: string): string {
+    const config: {[key: string]: string} = {
+      'required': 'is required',
+      'invalidCreditCard': 'is invalid credit card number',
+    };
+    return config[code];
+  }
+}
+
+
+@Component({
+  selector: 'reactive-forms',
+  viewProviders: [FormBuilder],
+  template: `
+    <h1>Checkout Form (Reactive)</h1>
+
+    <form (ngSubmit)="onSubmit()" [formGroup]="form" #f="ngForm">
+      <p>
+        <label for="firstName">First Name</label>
+        <input type="text" id="firstName" formControlName="firstName">
+        <show-error control="firstName" [errors]="['required']"></show-error>
+      </p>
+
+      <p>
+        <label for="middleName">Middle Name</label>
+        <input type="text" id="middleName" formControlName="middleName">
+      </p>
+
+      <p>
+        <label for="lastName">Last Name</label>
+        <input type="text" id="lastName" formControlName="lastName">
+        <show-error control="lastName" [errors]="['required']"></show-error>
+      </p>
+
+      <p>
+        <label for="country">Country</label>
+        <select id="country" formControlName="country">
+          <option *ngFor="let c of countries" [value]="c">{{c}}</option>
+        </select>
+      </p>
+
+      <p>
+        <label for="creditCard">Credit Card</label>
+        <input type="text" id="creditCard" formControlName="creditCard">
+        <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
+      </p>
+
+      <p>
+        <label for="amount">Amount</label>
+        <input type="number" id="amount" formControlName="amount">
+        <show-error control="amount" [errors]="['required']"></show-error>
+      </p>
+
+      <p>
+        <label for="email">Email</label>
+        <input type="email" id="email" formControlName="email">
+        <show-error control="email" [errors]="['required']"></show-error>
+      </p>
+
+      <p>
+        <label for="comments">Comments</label>
+        <textarea id="comments" formControlName="comments">
+        </textarea>
+      </p>
+
+      <button type="submit" [disabled]="!f.form.valid">Submit</button>
+    </form>
+  `
+})
+class ReactiveForms {
+  form: FormGroup;
+  countries = ['US', 'Canada'];
+
+  constructor(fb: FormBuilder) {
+    this.form = fb.group({
+      'firstName': ['', Validators.required],
+      'middleName': [''],
+      'lastName': ['', Validators.required],
+      'country': ['Canada', Validators.required],
+      'creditCard': ['', Validators.compose([Validators.required, creditCardValidator])],
+      'amount': [0, Validators.required],
+      'email': ['', Validators.required],
+      'comments': ['']
+    });
+  }
+
+  onSubmit(): void {
+    console.log('Submitting:');
+    console.log(this.form.value);
+  }
+}
+
+@NgModule({
+  bootstrap: [ReactiveForms],
+  declarations: [ShowError, ReactiveForms],
+  imports: [BrowserModule, ReactiveFormsModule]
+})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/order_management/index.html b/modules/playground/src/order_management/index.html
new file mode 100644
index 000000000000..52098d69d082
--- /dev/null
+++ b/modules/playground/src/order_management/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+  <title>Order Management</title>
+  <style>
+    .warning {
+      background-color: yellow;
+    }
+  </style>
+</head>
+
+<body>
+  <order-management-app>
+    Loading...
+  </order-management-app>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/order_management/index.ts b/modules/playground/src/order_management/index.ts
new file mode 100644
index 000000000000..ad1a24750338
--- /dev/null
+++ b/modules/playground/src/order_management/index.ts
@@ -0,0 +1,208 @@
+/**
+ * @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, EventEmitter, Injectable, Input, NgModule, Output} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+/**
+ * You can find the AngularJS implementation of this example here:
+ * https://github.com/wardbell/ng1DataBinding
+ */
+
+// ---- model
+
+class OrderItem {
+  constructor(
+      public orderItemId: number, public orderId: number, public productName: string,
+      public qty: number, public unitPrice: number) {}
+
+  get total(): number { return this.qty * this.unitPrice; }
+}
+
+class Order {
+  constructor(
+      public orderId: number, public customerName: string, public limit: number,
+      private _dataService: DataService) {}
+
+  get items(): OrderItem[] { return this._dataService.itemsFor(this); }
+  get total(): number { return this.items.map(i => i.total).reduce((a, b) => a + b, 0); }
+}
+
+
+
+// ---- services
+
+let _nextId = 1000;
+@Injectable()
+class DataService {
+  orderItems: OrderItem[];
+  orders: Order[];
+  currentOrder: Order = null;
+
+  constructor() {
+    this.orders = [
+      new Order(_nextId++, 'J. Coltrane', 100, this), new Order(_nextId++, 'B. Evans', 200, this)
+    ];
+
+    this.orderItems = [
+      new OrderItem(_nextId++, this.orders[0].orderId, 'Bread', 5, 1),
+      new OrderItem(_nextId++, this.orders[0].orderId, 'Brie', 5, 2),
+      new OrderItem(_nextId++, this.orders[0].orderId, 'IPA', 5, 3),
+
+      new OrderItem(_nextId++, this.orders[1].orderId, 'Mozzarella', 5, 2),
+      new OrderItem(_nextId++, this.orders[1].orderId, 'Wine', 5, 3)
+    ];
+  }
+
+  itemsFor(order: Order): OrderItem[] {
+    return this.orderItems.filter(i => i.orderId === order.orderId);
+  }
+
+  addItemForOrder(order: Order): void {
+    this.orderItems.push(new OrderItem(_nextId++, order.orderId, '', 0, 0));
+  }
+
+  deleteItem(item: OrderItem): void { this.orderItems.splice(this.orderItems.indexOf(item), 1); }
+}
+
+
+
+// ---- components
+
+@Component({
+  selector: 'order-list-cmp',
+  template: `
+    <h1>Orders</h1>
+  	<div *ngFor="let order of orders" [class.warning]="order.total > order.limit">
+      <div>
+        <label>Customer name:</label>
+        {{order.customerName}}
+      </div>
+
+      <div>
+        <label>Limit: <input [(ngModel)]="order.limit" type="number" placeholder="Limit"></label>
+      </div>
+
+      <div>
+        <label>Number of items:</label>
+        {{order.items.length}}
+      </div>
+
+      <div>
+        <label>Order total:</label>
+        {{order.total}}
+      </div>
+
+      <button (click)="select(order)">Select</button>
+  	</div>
+  `
+})
+class OrderListComponent {
+  orders: Order[];
+
+  constructor(private _service: DataService) { this.orders = _service.orders; }
+  select(order: Order): void { this._service.currentOrder = order; }
+}
+
+
+@Component({
+  selector: 'order-item-cmp',
+  template: `
+    <div>
+      <div>
+        <label>Product name: <input [(ngModel)]="item.productName" type="text" placeholder="Product name"></label>
+      </div>
+
+      <div>
+        <label>Quantity: <input [(ngModel)]="item.qty" type="number" placeholder="Quantity"></label>
+      </div>
+
+      <div>
+        <label>Unit Price: <input [(ngModel)]="item.unitPrice" type="number" placeholder="Unit price"></label>
+      </div>
+
+      <div>
+        <label>Total:</label>
+        {{item.total}}
+      </div>
+
+      <button (click)="onDelete()">Delete</button>
+    </div>
+  `
+})
+class OrderItemComponent {
+  @Input() item: OrderItem;
+  @Output() delete = new EventEmitter();
+
+  onDelete(): void { this.delete.emit(this.item); }
+}
+
+@Component({
+  selector: 'order-details-cmp',
+  template: `
+    <div *ngIf="order !== null">
+      <h1>Selected Order</h1>
+      <div>
+        <label>Customer name: <input [(ngModel)]="order.customerName" type="text" placeholder="Customer name"></label>
+      </div>
+
+      <div>
+        <label>Limit: <input [(ngModel)]="order.limit" type="number" placeholder="Limit"></label>
+      </div>
+
+      <div>
+        <label>Number of items:</label>
+        {{order.items.length}}
+      </div>
+
+      <div>
+        <label>Order total:</label>
+        {{order.total}}
+      </div>
+
+      <h2>Items</h2>
+      <button (click)="addItem()">Add Item</button>
+      <order-item-cmp *ngFor="let item of order.items" [item]="item" (delete)="deleteItem(item)"></order-item-cmp>
+    </div>
+  `
+})
+class OrderDetailsComponent {
+  constructor(private _service: DataService) {}
+
+  get order(): Order { return this._service.currentOrder; }
+
+  deleteItem(item: OrderItem): void { this._service.deleteItem(item); }
+
+  addItem(): void { this._service.addItemForOrder(this.order); }
+}
+
+@Component({
+  selector: 'order-management-app',
+  providers: [DataService],
+  template: `
+    <order-list-cmp></order-list-cmp>
+    <order-details-cmp></order-details-cmp>
+  `
+})
+class OrderManagementApplication {
+}
+
+@NgModule({
+  bootstrap: [OrderManagementApplication],
+  declarations:
+      [OrderManagementApplication, OrderListComponent, OrderDetailsComponent, OrderItemComponent],
+  imports: [BrowserModule, FormsModule]
+})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/person_management/index.html b/modules/playground/src/person_management/index.html
new file mode 100644
index 000000000000..905b2b2577b4
--- /dev/null
+++ b/modules/playground/src/person_management/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+  <title>Person Management</title>
+  <style>
+    .ng-touched.ng-invalid {
+      border-color: red;
+    }
+  </style>
+</head>
+
+<body>
+  <person-management-app>
+    Loading...
+  </person-management-app>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/person_management/index.ts b/modules/playground/src/person_management/index.ts
new file mode 100644
index 000000000000..bc867189c3bf
--- /dev/null
+++ b/modules/playground/src/person_management/index.ts
@@ -0,0 +1,210 @@
+/**
+ * @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, Injectable, NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+/**
+ * You can find the AngularJS implementation of this example here:
+ * https://github.com/wardbell/ng1DataBinding
+ */
+
+// ---- model
+
+let _nextId = 1;
+class Person {
+  personId: number;
+  mom: Person;
+  dad: Person;
+  friends: Person[];
+
+  constructor(public firstName: string, public lastName: string, public yearOfBirth: number) {
+    this.personId = _nextId++;
+    this.firstName = firstName;
+    this.lastName = lastName;
+    this.mom = null;
+    this.dad = null;
+    this.friends = [];
+    this.personId = _nextId++;
+  }
+
+  get age(): number { return 2015 - this.yearOfBirth; }
+  get fullName(): string { return `${this.firstName} ${this.lastName}`; }
+  get friendNames(): string { return this.friends.map(f => f.fullName).join(', '); }
+}
+
+
+
+// ---- services
+
+@Injectable()
+class DataService {
+  currentPerson: Person;
+  persons: Person[];
+
+  constructor() {
+    this.persons = [
+      new Person('Victor', 'Savkin', 1930), new Person('Igor', 'Minar', 1920),
+      new Person('John', 'Papa', 1910), new Person('Nancy', 'Duarte', 1910),
+      new Person('Jack', 'Papa', 1910), new Person('Jill', 'Papa', 1910),
+      new Person('Ward', 'Bell', 1910), new Person('Robert', 'Bell', 1910),
+      new Person('Tracy', 'Ward', 1910), new Person('Dan', 'Wahlin', 1910)
+    ];
+
+    this.persons[0].friends = [0, 1, 2, 6, 9].map(_ => this.persons[_]);
+    this.persons[1].friends = [0, 2, 6, 9].map(_ => this.persons[_]);
+    this.persons[2].friends = [0, 1, 6, 9].map(_ => this.persons[_]);
+    this.persons[6].friends = [0, 1, 2, 9].map(_ => this.persons[_]);
+    this.persons[9].friends = [0, 1, 2, 6].map(_ => this.persons[_]);
+
+    this.persons[2].mom = this.persons[5];
+    this.persons[2].dad = this.persons[4];
+    this.persons[6].mom = this.persons[8];
+    this.persons[6].dad = this.persons[7];
+
+    this.currentPerson = this.persons[0];
+  }
+}
+
+
+
+// ---- components
+
+@Component({
+  selector: 'full-name-cmp',
+  template: `
+    <h1>Edit Full Name</h1>
+    <div>
+      <form>
+          <div>
+            <label>
+              First: <input [(ngModel)]="person.firstName" type="text" placeholder="First name">
+            </label>
+          </div>
+
+          <div>
+            <label>
+              Last: <input [(ngModel)]="person.lastName" type="text" placeholder="Last name">
+            </label>
+          </div>
+
+          <div>
+            <label>{{person.fullName}}</label>
+          </div>
+      </form>
+    </div>
+  `
+})
+class FullNameComponent {
+  constructor(private _service: DataService) {}
+  get person(): Person { return this._service.currentPerson; }
+}
+
+@Component({
+  selector: 'person-detail-cmp',
+  template: `
+    <h2>{{person.fullName}}</h2>
+
+    <div>
+      <form>
+        <div>
+					<label>First: <input [(ngModel)]="person.firstName" type="text" placeholder="First name"></label>
+				</div>
+
+        <div>
+					<label>Last: <input [(ngModel)]="person.lastName" type="text" placeholder="Last name"></label>
+				</div>
+
+        <div>
+					<label>Year of birth: <input [(ngModel)]="person.yearOfBirth" type="number" placeholder="Year of birth"></label>
+          Age: {{person.age}}
+				</div>\
+
+        <div *ngIf="person.mom != null">
+					<label>Mom:</label>
+          <input [(ngModel)]="person.mom.firstName" type="text" placeholder="Mom's first name">
+          <input [(ngModel)]="person.mom.lastName" type="text" placeholder="Mom's last name">
+          {{person.mom.fullName}}
+				</div>
+
+        <div *ngIf="person.dad != null">
+					<label>Dad:</label>
+          <input [(ngModel)]="person.dad.firstName" type="text" placeholder="Dad's first name">
+          <input [(ngModel)]="person.dad.lastName" type="text" placeholder="Dad's last name">
+          {{person.dad.fullName}}
+				</div>
+
+        <div *ngIf="person.friends.length > 0">
+					<label>Friends:</label>
+          {{person.friendNames}}
+				</div>
+      </form>
+    </div>
+  `
+})
+class PersonsDetailComponent {
+  constructor(private _service: DataService) {}
+  get person(): Person { return this._service.currentPerson; }
+}
+
+@Component({
+  selector: 'persons-cmp',
+  template: `
+    <h1>FullName Demo</h1>
+    <div>
+      <ul>
+  		  <li *ngFor="let person of persons">
+  			  <label (click)="select(person)">{{person.fullName}}</label>
+  			</li>
+  	 </ul>
+
+     <person-detail-cmp></person-detail-cmp>
+    </div>
+  `
+})
+class PersonsComponent {
+  persons: Person[];
+
+  constructor(private _service: DataService) { this.persons = _service.persons; }
+
+  select(person: Person): void { this._service.currentPerson = person; }
+}
+
+
+@Component({
+  selector: 'person-management-app',
+  viewProviders: [DataService],
+  template: `
+    <button (click)="switchToEditName()">Edit Full Name</button>
+    <button (click)="switchToPersonList()">Person Array</button>
+
+    <full-name-cmp *ngIf="mode == 'editName'"></full-name-cmp>
+    <persons-cmp *ngIf="mode == 'personList'"></persons-cmp>
+  `
+})
+class PersonManagementApplication {
+  mode: string;
+
+  switchToEditName(): void { this.mode = 'editName'; }
+  switchToPersonList(): void { this.mode = 'personList'; }
+}
+
+@NgModule({
+  bootstrap: [PersonManagementApplication],
+  declarations:
+      [PersonManagementApplication, FullNameComponent, PersonsComponent, PersonsDetailComponent],
+  imports: [BrowserModule, FormsModule]
+})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/relative_assets/app/my_cmp.ts b/modules/playground/src/relative_assets/app/my_cmp.ts
new file mode 100644
index 000000000000..77e6fb10927e
--- /dev/null
+++ b/modules/playground/src/relative_assets/app/my_cmp.ts
@@ -0,0 +1,13 @@
+/**
+ * @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';
+@Component(
+    {selector: 'my-cmp', templateUrl: 'tpl.html', styleUrls: ['style.css'], moduleId: module.id})
+export class MyCmp {
+}
diff --git a/modules/playground/src/relative_assets/app/style.css b/modules/playground/src/relative_assets/app/style.css
new file mode 100644
index 000000000000..ed72d5deaba6
--- /dev/null
+++ b/modules/playground/src/relative_assets/app/style.css
@@ -0,0 +1,12 @@
+:host {
+  background:red;
+  padding:1em;
+  display:block;
+  font-size:20px;
+  color:white;
+}
+
+.inner-container {
+  width:432px;
+  font-weight:bold;
+}
diff --git a/modules/playground/src/relative_assets/app/tpl.html b/modules/playground/src/relative_assets/app/tpl.html
new file mode 100644
index 000000000000..94da65d56dc9
--- /dev/null
+++ b/modules/playground/src/relative_assets/app/tpl.html
@@ -0,0 +1,3 @@
+<div class="inner-container">
+  my component content goes here
+</div>
diff --git a/modules/playground/src/relative_assets/index.html b/modules/playground/src/relative_assets/index.html
new file mode 100644
index 000000000000..20bd353c1fc6
--- /dev/null
+++ b/modules/playground/src/relative_assets/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <title>Relative URLs</title>
+<body>
+  <relative-app>
+    Loading...
+  </relative-app>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/relative_assets/index.ts b/modules/playground/src/relative_assets/index.ts
new file mode 100644
index 000000000000..43894d02a7d9
--- /dev/null
+++ b/modules/playground/src/relative_assets/index.ts
@@ -0,0 +1,28 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {MyCmp} from './app/my_cmp';
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
+
+@Component({
+  selector: 'relative-app',
+  template: `component = <my-cmp></my-cmp>`,
+})
+export class RelativeApp {
+}
+
+@NgModule({declarations: [RelativeApp, MyCmp], bootstrap: [RelativeApp], imports: [BrowserModule]})
+class ExampleModule {
+}
diff --git a/modules/playground/src/routing/app/data.ts b/modules/playground/src/routing/app/data.ts
new file mode 100644
index 000000000000..a63d46cdba10
--- /dev/null
+++ b/modules/playground/src/routing/app/data.ts
@@ -0,0 +1,2124 @@
+/**
+ * @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 const data = [
+  {
+    'id': '1',
+    'first-name': 'Montana',
+    'last-name': 'Prosacco',
+    'email': 'jairo.bergnaum@bergnaum.org',
+    'date': '1991-10-12 15:12:46 -0700',
+    'content':
+        'Et quisquam veniam voluptatem enim temporibus itaque. Ipsam voluptatem et. Occaecati rerum animi.',
+    'subject': 'Quidem quo ipsam architecto soluta numquam et'
+  },
+
+  {
+    'id': '2',
+    'first-name': 'Frances',
+    'last-name': 'Schaden',
+    'email': 'pierre_tromp@adams.com',
+    'date': '2001-05-06 08:22:33 -0700',
+    'content': 'Porro ea tempore numquam deserunt voluptas qui. Est quis suscipit.',
+    'subject': 'Voluptatibus dolore porro animi'
+  },
+
+  {
+    'id': '3',
+    'first-name': 'Jayne',
+    'last-name': 'Kreiger',
+    'email': 'breanne@howell.net',
+    'date': '2001-05-22 14:28:41 -0700',
+    'content': 'Voluptas et est laborum non ullam.',
+    'subject': 'Ratione ut illum fuga non'
+  },
+
+  {
+    'id': '4',
+    'first-name': 'Hester',
+    'last-name': 'Wyman',
+    'email': 'fausto@steuber.com',
+    'date': '1996-07-20 02:13:12 -0700',
+    'content':
+        'Iusto enim laborum. Autem sed quas laborum deserunt quibusdam dolorem. Laboriosam nesciunt debitis possimus ut aut quae.',
+    'subject': 'Ea quas et quia beatae dolores'
+  },
+
+  {
+    'id': '5',
+    'first-name': 'Alexandre',
+    'last-name': 'Dietrich',
+    'email': 'carmella_mante@moendibbert.biz',
+    'date': '2006-03-20 23:44:38 -0800',
+    'content': 'Voluptates voluptatem dolorem non quod dolores.',
+    'subject': 'Nostrum ad modi non consequatur repellendus et harum'
+  },
+
+  {
+    'id': '6',
+    'first-name': 'Ena',
+    'last-name': 'Green',
+    'email': 'jan_koepp@glover.name',
+    'date': '1988-03-21 02:00:36 -0800',
+    'content':
+        'Nam inventore voluptatum eaque ratione nisi nesciunt. Qui ex qui omnis aliquid. Dolorem ipsum expedita.',
+    'subject': 'Qui sint vero accusamus quam id vitae quis quia'
+  },
+
+  {
+    'id': '7',
+    'first-name': 'Rebecca',
+    'last-name': 'Walsh',
+    'email': 'marta@mueller.biz',
+    'date': '1974-05-09 02:40:20 -0700',
+    'content':
+        'Voluptas vel ut. Rerum vero repellat accusantium earum. Ea atque exercitationem expedita id dolores dolorem.',
+    'subject': 'Suscipit et inventore exercitationem ut voluptatum esse vero'
+  },
+
+  {
+    'id': '8',
+    'first-name': 'Jed',
+    'last-name': 'Rogahn',
+    'email': 'talia_crist@mertzfadel.info',
+    'date': '2006-10-17 01:28:46 -0700',
+    'content': 'Cupiditate nam blanditiis.',
+    'subject': 'Dolore nulla qui sequi ut enim sed'
+  },
+
+  {
+    'id': '9',
+    'first-name': 'Fabiola',
+    'last-name': 'Olson',
+    'email': 'henderson@casper.org',
+    'date': '2008-02-29 11:46:44 -0800',
+    'content':
+        'Similique nesciunt omnis beatae omnis pariatur quas. Voluptatem eum consequatur id impedit fugit dignissimos ut.',
+    'subject': 'Sit quasi accusamus aut et eum'
+  },
+
+  {
+    'id': '10',
+    'first-name': 'Alex',
+    'last-name': 'Turcotte',
+    'email': 'mya@stokes.org',
+    'date': '1974-03-29 12:02:53 -0700',
+    'content':
+        'Ut pariatur porro maiores. Saepe soluta aspernatur est sed suscipit. Excepturi incidunt aut atque nostrum cum non.',
+    'subject': 'Rerum dolore sunt veniam provident'
+  },
+
+  {
+    'id': '11',
+    'first-name': 'Jerome',
+    'last-name': 'Greenholt',
+    'email': 'jazmyne.dibbert@abshire.org',
+    'date': '1997-01-12 02:48:08 -0800',
+    'content': 'Natus error id.',
+    'subject': 'Rerum nemo aperiam veritatis veniam'
+  },
+
+  {
+    'id': '12',
+    'first-name': 'Antwan',
+    'last-name': 'Kreiger',
+    'email': 'delilah@dibbert.name',
+    'date': '1971-05-08 10:45:01 -0700',
+    'content':
+        'Perspiciatis sed quo. Eum dignissimos quia expedita dolorem illum minima enim. Fugiat ducimus nostrum quia reiciendis autem nisi placeat.',
+    'subject': 'Esse ipsum pariatur voluptatum rerum labore id odit'
+  },
+
+  {
+    'id': '13',
+    'first-name': 'Kyleigh',
+    'last-name': 'Rogahn',
+    'email': 'ralph_ledner@bartolettifay.info',
+    'date': '2013-11-28 16:10:15 -0800',
+    'content': 'Molestias repudiandae dicta vel.',
+    'subject': 'Facilis occaecati pariatur qui incidunt reprehenderit sunt'
+  },
+
+  {
+    'id': '14',
+    'first-name': 'Henriette',
+    'last-name': 'Gottlieb',
+    'email': 'adeline.rowe@lubowitz.net',
+    'date': '1983-02-11 06:45:49 -0800',
+    'content': 'Eveniet ut voluptas eos ut rerum voluptatum.',
+    'subject': 'Natus voluptas voluptatem alias'
+  },
+
+  {
+    'id': '15',
+    'first-name': 'Jacklyn',
+    'last-name': 'White',
+    'email': 'milton_keebler@braun.biz',
+    'date': '1992-01-07 12:27:59 -0800',
+    'content': 'Reiciendis et aperiam. Doloremque totam repudiandae velit fuga fugiat.',
+    'subject': 'Nulla est magnam ducimus porro commodi'
+  },
+
+  {
+    'id': '16',
+    'first-name': 'Charlotte',
+    'last-name': 'Ziemann',
+    'email': 'brett@purdymills.com',
+    'date': '1972-06-06 02:42:50 -0700',
+    'content':
+        'Voluptatem corporis tempore. Consectetur fugit perspiciatis libero dolore consequatur asperiores. Voluptates ea accusamus.',
+    'subject': 'Ea adipisci reiciendis excepturi suscipit necessitatibus ut sed'
+  },
+
+  {
+    'id': '17',
+    'first-name': 'Giovanny',
+    'last-name': 'Runolfsdottir',
+    'email': 'dustin.sanford@rippin.com',
+    'date': '1987-04-14 19:29:11 -0700',
+    'content':
+        'Dolor consequuntur sed aspernatur qui. Sit cumque id animi ut sed id. Asperiores voluptatem similique voluptas.',
+    'subject': 'Id ut voluptatum culpa molestiae quo'
+  },
+
+  {
+    'id': '18',
+    'first-name': 'Savion',
+    'last-name': 'McCullough',
+    'email': 'don@gorczanysimonis.name',
+    'date': '1974-01-18 14:40:40 -0700',
+    'content':
+        'Autem voluptatem dignissimos vel debitis ipsum voluptatem consequuntur. Voluptatum et saepe.',
+    'subject': 'Ipsa similique quo nostrum'
+  },
+
+  {
+    'id': '19',
+    'first-name': 'Robbie',
+    'last-name': 'Kohler',
+    'email': 'haley@waters.biz',
+    'date': '2002-09-28 08:35:10 -0700',
+    'content':
+        'Quo ut accusantium similique necessitatibus. Sunt impedit commodi ut et odit voluptatibus error.',
+    'subject': 'Voluptate eum quo error'
+  },
+
+  {
+    'id': '20',
+    'first-name': 'Eulalia',
+    'last-name': 'Effertz',
+    'email': 'rodrigo_parisian@bergecartwright.net',
+    'date': '2006-07-29 21:47:56 -0700',
+    'content':
+        'Eum repudiandae rem aliquid dolorum suscipit vel. Autem vel voluptas et iure magni.',
+    'subject': 'Est dolorum modi et error consequuntur qui'
+  },
+
+  {
+    'id': '21',
+    'first-name': 'Gregoria',
+    'last-name': 'Boehm',
+    'email': 'miles@jerde.org',
+    'date': '1997-04-11 19:49:38 -0700',
+    'content':
+        'Qui necessitatibus veniam. Maiores impedit in natus aspernatur adipisci. Ad sapiente iste.',
+    'subject': 'Doloribus ipsum a eius voluptatem nulla'
+  },
+
+  {
+    'id': '22',
+    'first-name': 'Berry',
+    'last-name': 'Collier',
+    'email': 'larry_rath@rathbernier.info',
+    'date': '1981-06-26 05:26:47 -0700',
+    'content':
+        'Numquam rerum quia similique enim sequi eos inventore. Numquam inventore aliquam commodi neque maiores. Hic et vel aut velit corrupti.',
+    'subject': 'Optio ab delectus pariatur vel tempore'
+  },
+
+  {
+    'id': '23',
+    'first-name': 'Crawford',
+    'last-name': 'Ryan',
+    'email': 'cindy_ziemann@harvey.org',
+    'date': '1997-06-12 07:56:32 -0700',
+    'content': 'Odio ea nostrum molestiae. Doloribus ducimus occaecati facilis pariatur ut est.',
+    'subject': 'Quo fugit at totam voluptate est'
+  },
+
+  {
+    'id': '24',
+    'first-name': 'Kelsie',
+    'last-name': 'Stokes',
+    'email': 'jackson_ferry@connelly.name',
+    'date': '1986-07-30 21:39:50 -0700',
+    'content':
+        'Amet voluptatem ea nesciunt sunt. Quidem pariatur sit. Minus aliquam itaque laudantium in quibusdam laboriosam.',
+    'subject': 'Labore voluptas dolor repellendus accusantium tempora'
+  },
+
+  {
+    'id': '25',
+    'first-name': 'Josefa',
+    'last-name': 'Predovic',
+    'email': 'moises@sauer.info',
+    'date': '1976-04-09 22:38:31 -0800',
+    'content':
+        'Aliquam consectetur et non soluta. Quia dolore molestiae facilis eos nihil vel. Quidem eos et.',
+    'subject': 'Qui architecto inventore alias non aut dolorum porro'
+  },
+
+  {
+    'id': '26',
+    'first-name': 'Toby',
+    'last-name': 'Wehner',
+    'email': 'janet@mohr.org',
+    'date': '2003-05-08 07:44:26 -0700',
+    'content': 'Suscipit cumque alias debitis necessitatibus et qui.',
+    'subject': 'Possimus laudantium exercitationem ut deleniti similique'
+  },
+
+  {
+    'id': '27',
+    'first-name': 'Keira',
+    'last-name': 'Stamm',
+    'email': 'karlie@witting.info',
+    'date': '2010-11-11 16:17:29 -0800',
+    'content':
+        'Rerum cum at autem repellat quod nihil. Quasi voluptates minus autem accusantium debitis cumque qui.',
+    'subject': 'Nostrum repudiandae voluptatum adipisci ut error sunt et sint'
+  },
+
+  {
+    'id': '28',
+    'first-name': 'Clark',
+    'last-name': 'Predovic',
+    'email': 'palma@ankundingbednar.biz',
+    'date': '1978-02-10 16:55:54 -0800',
+    'content':
+        'Non ex aperiam porro. At harum vitae ut exercitationem qui qui. Quae sed sapiente sed debitis officiis quis unde.',
+    'subject': 'Eos eligendi voluptatum consequatur reprehenderit'
+  },
+
+  {
+    'id': '29',
+    'first-name': 'Colby',
+    'last-name': 'Jacobson',
+    'email': 'rozella@spencer.com',
+    'date': '1978-01-04 00:18:51 -0800',
+    'content':
+        'Molestiae laudantium voluptas ipsa est laborum vel. Dolorem et est nihil distinctio numquam.',
+    'subject': 'Aut et sint deleniti mollitia debitis'
+  },
+
+  {
+    'id': '30',
+    'first-name': 'Kayley',
+    'last-name': 'Connelly',
+    'email': 'rowland.thiel@gutmannorn.info',
+    'date': '2012-12-10 09:59:08 -0800',
+    'content':
+        'Eligendi quia repellat distinctio eum voluptas debitis. Totam a alias qui voluptates dolor.',
+    'subject': 'Ipsum consequatur culpa repellat quae mollitia quia unde'
+  },
+
+  {
+    'id': '31',
+    'first-name': 'Kay',
+    'last-name': 'Reynolds',
+    'email': 'lexie.frami@beattyschoen.info',
+    'date': '1991-05-27 22:37:41 -0700',
+    'content':
+        'Laborum quod iusto in voluptas et adipisci dolor. Totam et voluptatibus id tempora. Asperiores magnam dolorem quo iste sapiente.',
+    'subject': 'Tempora et eligendi quia dolorem alias ullam maiores doloremque'
+  },
+
+  {
+    'id': '32',
+    'first-name': 'Ellsworth',
+    'last-name': 'Veum',
+    'email': 'estefania_hermann@murray.biz',
+    'date': '1974-12-07 03:43:52 -0800',
+    'content':
+        'Et commodi molestiae hic distinctio et iusto. Quod illo natus unde est aut. Laborum rem rerum totam.',
+    'subject': 'Expedita nostrum consectetur sint velit modi maxime quisquam'
+  },
+
+  {
+    'id': '33',
+    'first-name': 'Adeline',
+    'last-name': 'Altenwerth',
+    'email': 'francesco@weberstroman.com',
+    'date': '1988-03-25 22:52:39 -0800',
+    'content':
+        'Quod deserunt eum dignissimos eius et veniam. Non exercitationem omnis molestiae corrupti aliquid commodi repudiandae.',
+    'subject': 'Dolor incidunt debitis possimus temporibus rerum quibusdam eaque'
+  },
+
+  {
+    'id': '34',
+    'first-name': 'River',
+    'last-name': 'Roob',
+    'email': 'lester.hodkiewicz@hoppemcglynn.name',
+    'date': '1981-01-03 06:04:53 -0800',
+    'content':
+        'Sed dolorem et laborum voluptate perspiciatis doloremque aliquam. Recusandae et odit. Sit esse consequatur occaecati fuga sed.',
+    'subject': 'Dolorem ut quia repudiandae accusamus reprehenderit dignissimos iste cupiditate'
+  },
+
+  {
+    'id': '35',
+    'first-name': 'Chaya',
+    'last-name': 'Stokes',
+    'email': 'rebekah.baumbach@toy.org',
+    'date': '1979-09-03 07:52:52 -0700',
+    'content': 'Ea voluptas minus hic omnis.',
+    'subject': 'Ab repellendus quia eos eius'
+  },
+
+  {
+    'id': '36',
+    'first-name': 'Cara',
+    'last-name': 'Brown',
+    'email': 'natasha_gibson@bins.name',
+    'date': '1985-12-19 03:29:37 -0800',
+    'content':
+        'Numquam nobis consectetur modi eligendi. Facere adipisci aut velit quis dolor quidem totam. Consequatur qui placeat aut molestiae dignissimos.',
+    'subject': 'Est quia reiciendis enim et totam temporibus'
+  },
+
+  {
+    'id': '37',
+    'first-name': 'Laron',
+    'last-name': 'Wunsch',
+    'email': 'erna@heathcote.com',
+    'date': '2004-06-28 16:53:07 -0700',
+    'content':
+        'Quisquam maxime nostrum explicabo corrupti ut. Et accusantium culpa occaecati officiis quo.',
+    'subject': 'Et et nulla aspernatur quas distinctio'
+  },
+
+  {
+    'id': '38',
+    'first-name': 'Lessie',
+    'last-name': 'Roob',
+    'email': 'ona_olson@dicki.biz',
+    'date': '1980-02-10 00:18:48 -0800',
+    'content':
+        'Facere veritatis aut quam praesentium ut. Consectetur praesentium explicabo consequuntur quia vel rem.',
+    'subject': 'Tenetur ducimus mollitia consequatur dicta'
+  },
+
+  {
+    'id': '39',
+    'first-name': 'Felton',
+    'last-name': 'Labadie',
+    'email': 'stone.kihn@vonruedenbartoletti.biz',
+    'date': '2002-04-04 17:29:31 -0800',
+    'content':
+        'Iure ad nesciunt. Excepturi impedit eum suscipit dignissimos est. Corrupti accusamus sapiente ratione eaque iure aut mollitia.',
+    'subject': 'Sunt et eius et iusto accusamus voluptas eum'
+  },
+
+  {
+    'id': '40',
+    'first-name': 'Verna',
+    'last-name': 'Hoppe',
+    'email': 'arthur_schiller@daniel.org',
+    'date': '2013-05-15 16:04:25 -0700',
+    'content':
+        'Veniam quia omnis at sapiente. Est est fugit eum. Impedit suscipit hic similique eum quibusdam.',
+    'subject': 'Voluptatum ipsum libero et vitae odio dolore tenetur perspiciatis'
+  },
+
+  {
+    'id': '41',
+    'first-name': 'Velda',
+    'last-name': 'Veum',
+    'email': 'christy@feil.org',
+    'date': '1988-10-24 12:42:25 -0700',
+    'content': 'Rem inventore necessitatibus iste et quia vero laudantium.',
+    'subject': 'Suscipit similique provident officia est explicabo sed'
+  },
+
+  {
+    'id': '42',
+    'first-name': 'Mackenzie',
+    'last-name': 'Schroeder',
+    'email': 'miles.dietrich@stehrkuhic.org',
+    'date': '1990-01-07 22:38:09 -0800',
+    'content': 'Non autem delectus. Architecto recusandae unde quia rerum inventore repudiandae.',
+    'subject': 'Molestiae odio et repudiandae ut'
+  },
+
+  {
+    'id': '43',
+    'first-name': 'Natalie',
+    'last-name': 'Hoeger',
+    'email': 'gregorio_mosciski@schneiderframi.net',
+    'date': '1976-04-06 06:23:07 -0800',
+    'content':
+        'Iste id illo cupiditate enim aut quo. Vel ut eos qui. Aut at in eum maiores voluptatem quidem.',
+    'subject': 'Quia officiis sit sint aliquid ad quibusdam et'
+  },
+
+  {
+    'id': '44',
+    'first-name': 'Joan',
+    'last-name': 'Mosciski',
+    'email': 'thad@dickivolkman.info',
+    'date': '1990-12-26 15:04:40 -0800',
+    'content': 'Culpa est officia veritatis esse.',
+    'subject': 'Est eum ullam quo'
+  },
+
+  {
+    'id': '45',
+    'first-name': 'Emmitt',
+    'last-name': 'Keeling',
+    'email': 'cali@ferry.info',
+    'date': '2009-04-10 10:14:57 -0700',
+    'content':
+        'Numquam velit sunt sed et ut. Laudantium qui laboriosam quibusdam qui. Odio non maxime soluta vero qui.',
+    'subject': 'Accusantium saepe id totam aut reiciendis at esse magnam'
+  },
+
+  {
+    'id': '46',
+    'first-name': 'Guy',
+    'last-name': 'Renner',
+    'email': 'naomie_klein@streich.name',
+    'date': '1970-12-18 13:09:51 -0800',
+    'content': 'Iure quia at excepturi sit consequatur.',
+    'subject': 'Commodi aut ipsa accusantium dolor repudiandae in'
+  },
+
+  {
+    'id': '47',
+    'first-name': 'Eric',
+    'last-name': 'Kihn',
+    'email': 'dock.schmeler@langworth.biz',
+    'date': '1993-12-17 11:17:07 -0800',
+    'content': 'Facere voluptate omnis qui officia dicta.',
+    'subject': 'Incidunt a libero ab asperiores fuga ut quo illum'
+  },
+
+  {
+    'id': '48',
+    'first-name': 'Kraig',
+    'last-name': 'Keeling',
+    'email': 'alejandrin@streichwiegand.org',
+    'date': '1977-12-09 14:54:22 -0800',
+    'content': 'Asperiores expedita incidunt in cum ex vel hic.',
+    'subject': 'In illum quisquam ut est eligendi aut'
+  },
+
+  {
+    'id': '49',
+    'first-name': 'Justice',
+    'last-name': 'Leuschke',
+    'email': 'florencio@conn.info',
+    'date': '1991-12-14 09:38:08 -0800',
+    'content':
+        'Aspernatur nesciunt voluptas sit. Cum architecto enim et blanditiis soluta dolor. Recusandae numquam occaecati esse animi et aut.',
+    'subject': 'Quaerat voluptatibus eum sapiente iure deserunt'
+  },
+
+  {
+    'id': '50',
+    'first-name': 'Jodie',
+    'last-name': 'O\'Hara',
+    'email': 'rick@stehrboehm.info',
+    'date': '2000-07-21 05:34:03 -0700',
+    'content':
+        'Labore repudiandae dolor nostrum quo tempora eos. Natus ea fugit voluptas doloremque distinctio quaerat unde. Ut aut nostrum.',
+    'subject': 'Tempore in quam id aliquam fuga eos dolor'
+  },
+
+  {
+    'id': '51',
+    'first-name': 'Dannie',
+    'last-name': 'Vandervort',
+    'email': 'mariana@abbottruecker.biz',
+    'date': '2001-09-15 19:00:54 -0700',
+    'content': 'Consectetur dolore voluptas.',
+    'subject': 'Tenetur possimus et fuga mollitia perferendis omnis corporis'
+  },
+
+  {
+    'id': '52',
+    'first-name': 'Delaney',
+    'last-name': 'Champlin',
+    'email': 'kyler_welch@krisrowe.biz',
+    'date': '2014-07-22 07:09:07 -0700',
+    'content': 'Voluptates qui aut.',
+    'subject': 'Quam eos laborum nisi delectus'
+  },
+
+  {
+    'id': '53',
+    'first-name': 'Barbara',
+    'last-name': 'Kihn',
+    'email': 'tyrese.casper@keebler.net',
+    'date': '1996-02-29 20:04:40 -0800',
+    'content': 'Totam labore voluptatem eos qui temporibus velit.',
+    'subject': 'Eum neque sed aut sunt'
+  },
+
+  {
+    'id': '54',
+    'first-name': 'Jarred',
+    'last-name': 'Shanahan',
+    'email': 'coralie@weinat.net',
+    'date': '1977-06-08 01:46:22 -0700',
+    'content': 'Sed et voluptatum ut est quo et aut.',
+    'subject': 'Aut eligendi voluptas mollitia et accusamus sint nemo'
+  },
+
+  {
+    'id': '55',
+    'first-name': 'Llewellyn',
+    'last-name': 'Bechtelar',
+    'email': 'kaci@jast.com',
+    'date': '1998-12-01 21:14:32 -0800',
+    'content': 'Architecto eligendi et ut occaecati temporibus voluptas quia.',
+    'subject': 'Sint quis vitae voluptatem dolor aut quo maiores quas'
+  },
+
+  {
+    'id': '56',
+    'first-name': 'Albertha',
+    'last-name': 'Upton',
+    'email': 'august@bradtkemiller.net',
+    'date': '2006-11-16 14:38:45 -0800',
+    'content':
+        'Voluptas perspiciatis recusandae et. Sequi eum eius dicta dolorem. Alias reprehenderit explicabo doloribus exercitationem sint.',
+    'subject': 'Quo nihil fuga dolores cumque rerum eos asperiores'
+  },
+
+  {
+    'id': '57',
+    'first-name': 'Christy',
+    'last-name': 'Considine',
+    'email': 'eliseo@veum.com',
+    'date': '1997-05-17 13:54:41 -0700',
+    'content':
+        'Consequatur rerum laudantium distinctio magni. Iusto ullam et suscipit nemo ex velit voluptatem.',
+    'subject': 'Ut ea quisquam libero qui repudiandae aut officia'
+  },
+
+  {
+    'id': '58',
+    'first-name': 'Jessica',
+    'last-name': 'Simonis',
+    'email': 'rickey@mertz.info',
+    'date': '2012-10-04 00:32:34 -0700',
+    'content':
+        'Neque tenetur sunt sunt ratione. Rerum dolorem illo ab blanditiis quisquam architecto. Quidem ea exercitationem enim eos.',
+    'subject': 'Atque quo nemo explicabo voluptas blanditiis accusantium et'
+  },
+
+  {
+    'id': '59',
+    'first-name': 'Justen',
+    'last-name': 'Davis',
+    'email': 'karen@jaskolskigleason.org',
+    'date': '1994-08-10 02:33:43 -0700',
+    'content': 'Eius tenetur mollitia ad alias ab.',
+    'subject': 'Ut accusantium sunt qui nostrum eligendi'
+  },
+
+  {
+    'id': '60',
+    'first-name': 'Elwin',
+    'last-name': 'Daugherty',
+    'email': 'milo@ko.net',
+    'date': '1976-06-30 05:16:38 -0700',
+    'content': 'Sit necessitatibus minus.',
+    'subject': 'A molestiae voluptates ducimus id est recusandae'
+  },
+
+  {
+    'id': '61',
+    'first-name': 'Clair',
+    'last-name': 'Raynor',
+    'email': 'zella.hermiston@batz.org',
+    'date': '1985-12-18 14:30:18 -0800',
+    'content': 'Aut aliquid est sit pariatur voluptatem dolorum.',
+    'subject': 'Consectetur reprehenderit temporibus vel voluptatem voluptatem et rem fuga'
+  },
+
+  {
+    'id': '62',
+    'first-name': 'Hilario',
+    'last-name': 'Klein',
+    'email': 'adrain@stark.biz',
+    'date': '1980-09-08 18:06:43 -0700',
+    'content': 'Eum dolore optio quos animi.',
+    'subject': 'Illum nihil vitae molestiae laboriosam beatae modi'
+  },
+
+  {
+    'id': '63',
+    'first-name': 'Greta',
+    'last-name': 'Murray',
+    'email': 'ethelyn@fritsch.org',
+    'date': '1970-05-23 02:27:54 -0700',
+    'content':
+        'Quisquam animi et recusandae rem modi eos ipsa. Eaque et expedita qui animi veritatis temporibus.',
+    'subject': 'Repellendus fuga sint nemo'
+  },
+
+  {
+    'id': '64',
+    'first-name': 'Anissa',
+    'last-name': 'Adams',
+    'email': 'edward@armstrong.com',
+    'date': '1997-01-26 22:21:57 -0800',
+    'content': 'Laudantium culpa rem voluptas tempore. Sit modi dolor est sunt rem.',
+    'subject': 'Autem unde minima quia beatae totam'
+  },
+
+  {
+    'id': '65',
+    'first-name': 'Kaylah',
+    'last-name': 'Conroy',
+    'email': 'brian.cormier@hyatt.org',
+    'date': '2015-02-02 07:44:37 -0800',
+    'content': 'Voluptates vitae nulla expedita. Possimus et quo aut eum.',
+    'subject': 'Molestiae minus enim adipisci et'
+  },
+
+  {
+    'id': '66',
+    'first-name': 'Jamey',
+    'last-name': 'Ebert',
+    'email': 'seth@pfannerstillrodriguez.name',
+    'date': '1987-09-29 09:40:59 -0700',
+    'content': 'Voluptatem est quae.',
+    'subject': 'Similique nemo placeat id tempore dolorum'
+  },
+
+  {
+    'id': '67',
+    'first-name': 'Johnson',
+    'last-name': 'Mosciski',
+    'email': 'morton@littel.net',
+    'date': '1989-02-14 11:15:10 -0800',
+    'content':
+        'Molestias expedita exercitationem et praesentium et vel delectus. Qui fuga molestias porro.',
+    'subject': 'Aut rerum quidem est iste in blanditiis sit'
+  },
+
+  {
+    'id': '68',
+    'first-name': 'Ellis',
+    'last-name': 'O\'Keefe',
+    'email': 'taurean@ullrich.biz',
+    'date': '1987-03-09 11:29:05 -0800',
+    'content':
+        'Facere sint doloribus qui illo autem consequatur culpa. Est quisquam enim accusantium praesentium.',
+    'subject': 'Quis beatae quia velit deserunt est sit odit quisquam'
+  },
+
+  {
+    'id': '69',
+    'first-name': 'Marlen',
+    'last-name': 'Ritchie',
+    'email': 'rodger_schamberger@thiel.net',
+    'date': '1989-07-23 03:03:52 -0700',
+    'content': 'Doloribus porro hic quis explicabo fuga veritatis vero.',
+    'subject': 'Et doloribus est consequatur unde'
+  },
+
+  {
+    'id': '70',
+    'first-name': 'Maddison',
+    'last-name': 'Kuhic',
+    'email': 'rosetta@von.biz',
+    'date': '1975-06-22 10:34:58 -0700',
+    'content':
+        'Sit ut eos libero error sapiente veritatis. Est dolore qui impedit recusandae quas animi rerum.',
+    'subject': 'Quos culpa assumenda enim eius aliquid dolorum'
+  },
+
+  {
+    'id': '71',
+    'first-name': 'Whitney',
+    'last-name': 'Parisian',
+    'email': 'everardo@langworth.name',
+    'date': '1970-11-04 01:17:28 -0800',
+    'content':
+        'Quam dolores pariatur ut possimus. Alias tenetur ex accusantium quasi. Nihil dolorem mollitia quidem.',
+    'subject': 'Officia totam excepturi sed illum et tempore commodi sit'
+  },
+
+  {
+    'id': '72',
+    'first-name': 'Madyson',
+    'last-name': 'Streich',
+    'email': 'imani@murray.biz',
+    'date': '1983-07-16 11:27:34 -0700',
+    'content':
+        'Veritatis molestiae id placeat dolorem consectetur a est. Est enim aut. Magnam aut distinctio quo sapiente ea est accusantium.',
+    'subject': 'Aut sunt esse eligendi et qui ut sed'
+  },
+
+  {
+    'id': '73',
+    'first-name': 'Laurie',
+    'last-name': 'Purdy',
+    'email': 'jarrell@paucek.biz',
+    'date': '1992-10-18 12:48:31 -0700',
+    'content':
+        'Saepe facilis est repellendus praesentium autem. Qui soluta voluptas ullam sequi. Molestias aut quibusdam.',
+    'subject': 'Quo ullam totam sit dolores'
+  },
+
+  {
+    'id': '74',
+    'first-name': 'Ollie',
+    'last-name': 'Lowe',
+    'email': 'corene@kris.info',
+    'date': '1976-08-24 16:28:46 -0700',
+    'content': 'Nostrum qui eaque aperiam possimus libero non. Quae aut enim non.',
+    'subject': 'Optio minus aut officiis voluptates reiciendis sit dicta'
+  },
+
+  {
+    'id': '75',
+    'first-name': 'Ian',
+    'last-name': 'Murray',
+    'email': 'adelia_bernhard@maggio.com',
+    'date': '1982-04-08 00:25:22 -0800',
+    'content': 'Quod dolores quibusdam nihil aut vel. Sit ab vitae necessitatibus eum.',
+    'subject': 'Quia praesentium nam debitis nulla repellendus quos'
+  },
+
+  {
+    'id': '76',
+    'first-name': 'Bernard',
+    'last-name': 'Zieme',
+    'email': 'kaelyn.johnson@markswalsh.net',
+    'date': '2014-01-17 03:47:35 -0800',
+    'content': 'Repellendus qui reiciendis quibusdam voluptatum voluptate omnis.',
+    'subject': 'Mollitia ut omnis tempore aut debitis ratione alias illum'
+  },
+
+  {
+    'id': '77',
+    'first-name': 'Megane',
+    'last-name': 'Kuvalis',
+    'email': 'otis@donnellypouros.name',
+    'date': '1987-09-29 22:10:00 -0700',
+    'content':
+        'Explicabo repellat qui placeat inventore velit. Tempora accusamus minima facilis dicta architecto unde. Excepturi enim eos.',
+    'subject': 'Quam molestias amet officiis'
+  },
+
+  {
+    'id': '78',
+    'first-name': 'Freeman',
+    'last-name': 'Nader',
+    'email': 'samara_hoppe@dachcorkery.info',
+    'date': '2009-02-02 12:08:30 -0800',
+    'content': 'Perferendis aut minus in.',
+    'subject': 'Voluptates odio neque laudantium accusamus ipsa accusantium'
+  },
+
+  {
+    'id': '79',
+    'first-name': 'Margarita',
+    'last-name': 'Heller',
+    'email': 'heloise@rogahn.name',
+    'date': '1984-01-04 10:41:32 -0800',
+    'content': 'Officiis voluptas omnis. Nihil consectetur id reiciendis qui nemo est.',
+    'subject': 'Velit in molestias quo repudiandae accusamus et excepturi et'
+  },
+
+  {
+    'id': '80',
+    'first-name': 'Lonny',
+    'last-name': 'Goodwin',
+    'email': 'darian@kundebernier.info',
+    'date': '1999-02-08 07:00:38 -0800',
+    'content':
+        'Earum provident et minima aliquam iusto sint. Sed numquam ducimus voluptatem quos enim.',
+    'subject': 'Commodi beatae vitae aut quos dolor consequatur'
+  },
+
+  {
+    'id': '81',
+    'first-name': 'Jazlyn',
+    'last-name': 'Bayer',
+    'email': 'harvey@rempel.org',
+    'date': '2009-09-28 16:50:32 -0700',
+    'content': 'Ipsum voluptas perferendis aperiam dolor.',
+    'subject': 'Omnis inventore nobis cupiditate quas quis tenetur'
+  },
+
+  {
+    'id': '82',
+    'first-name': 'Jakob',
+    'last-name': 'Conn',
+    'email': 'rylee@vandervort.net',
+    'date': '2008-11-12 17:22:34 -0800',
+    'content':
+        'Aut temporibus perferendis neque nulla et. Totam ab neque inventore et facere eligendi.',
+    'subject': 'A optio ut molestiae iste et nam'
+  },
+
+  {
+    'id': '83',
+    'first-name': 'Mikayla',
+    'last-name': 'Romaguera',
+    'email': 'rebecca_moriette@stracke.net',
+    'date': '1986-08-09 12:39:31 -0700',
+    'content': 'Dicta et reiciendis corrupti.',
+    'subject': 'Neque odio voluptates aut quam'
+  },
+
+  {
+    'id': '84',
+    'first-name': 'Brianne',
+    'last-name': 'West',
+    'email': 'sheila@terry.com',
+    'date': '1972-04-25 22:32:20 -0800',
+    'content':
+        'Nulla sit mollitia qui odit sit corrupti repudiandae. Voluptas consequuntur voluptatibus molestiae. Illo quidem nostrum odio et.',
+    'subject': 'Deserunt voluptas et accusamus'
+  },
+
+  {
+    'id': '85',
+    'first-name': 'Destiny',
+    'last-name': 'Mohr',
+    'email': 'ernestine.waters@connellypfannerstill.com',
+    'date': '2012-10-30 15:02:35 -0700',
+    'content':
+        'Eveniet voluptatem molestias dolores aut voluptates. Quisquam nemo ipsam dicta numquam aut temporibus.',
+    'subject': 'Pariatur nisi facilis tempora'
+  },
+
+  {
+    'id': '86',
+    'first-name': 'Brooks',
+    'last-name': 'Herman',
+    'email': 'brendan_smith@treutel.info',
+    'date': '1972-04-01 17:10:07 -0800',
+    'content': 'Qui sunt dolore molestiae minima. Suscipit ea quia a aut sunt et.',
+    'subject': 'Magni quia perferendis possimus ipsam'
+  },
+
+  {
+    'id': '87',
+    'first-name': 'Celestino',
+    'last-name': 'Dickens',
+    'email': 'cruz.mcdermott@ziemann.org',
+    'date': '2007-08-14 14:55:17 -0700',
+    'content': 'Saepe libero tenetur.',
+    'subject': 'Molestiae nulla aut laborum placeat perferendis aliquam'
+  },
+
+  {
+    'id': '88',
+    'first-name': 'Angel',
+    'last-name': 'Tillman',
+    'email': 'shayna_baumbach@durgan.biz',
+    'date': '1978-08-31 01:02:14 -0700',
+    'content':
+        'Libero sequi ea dolore. Numquam quia temporibus voluptatum rerum. Deserunt tenetur nesciunt veritatis debitis.',
+    'subject': 'Occaecati quo omnis adipisci sit perspiciatis aut modi cum'
+  },
+
+  {
+    'id': '89',
+    'first-name': 'Verlie',
+    'last-name': 'Tillman',
+    'email': 'aurelia@gorczany.name',
+    'date': '1995-07-27 01:25:55 -0700',
+    'content': 'Iure est veritatis qui et. Sit tempore ducimus repellat cupiditate.',
+    'subject': 'Dolorum similique expedita praesentium quisquam quasi dolorem eligendi'
+  },
+
+  {
+    'id': '90',
+    'first-name': 'Cornell',
+    'last-name': 'Padberg',
+    'email': 'rhianna@thiel.name',
+    'date': '2009-12-14 14:21:13 -0800',
+    'content':
+        'Ea modi consequatur. Necessitatibus sit qui voluptatem et accusantium. Cumque rerum omnis.',
+    'subject': 'Molestiae nostrum aut officiis porro tempore'
+  },
+
+  {
+    'id': '91',
+    'first-name': 'Carmelo',
+    'last-name': 'Kunde',
+    'email': 'beulah@rolfsonschaefer.info',
+    'date': '2010-08-14 23:10:58 -0700',
+    'content': 'Ut molestiae dolorem fuga in aliquam est provident.',
+    'subject': 'Atque occaecati temporibus et autem est'
+  },
+
+  {
+    'id': '92',
+    'first-name': 'Jess',
+    'last-name': 'Corwin',
+    'email': 'korey.barrows@reillyankunding.com',
+    'date': '1976-11-13 05:09:16 -0800',
+    'content':
+        'Commodi eveniet aspernatur earum nisi aut sit dolor. Odio vero facilis reprehenderit dolore. Provident voluptatibus atque qui assumenda quaerat.',
+    'subject': 'Commodi laboriosam accusamus quis dolores tempora eos'
+  },
+
+  {
+    'id': '93',
+    'first-name': 'Hugh',
+    'last-name': 'Hirthe',
+    'email': 'verla.dickens@keeling.name',
+    'date': '1971-03-17 23:51:15 -0800',
+    'content':
+        'Voluptatibus saepe dolor voluptas sed cupiditate incidunt. Magni velit ut beatae minus. Consequatur recusandae voluptas ad ex dolores modi quos.',
+    'subject': 'Ut pariatur odit mollitia soluta eaque magnam'
+  },
+
+  {
+    'id': '94',
+    'first-name': 'Elsa',
+    'last-name': 'Morissette',
+    'email': 'otto@ohara.org',
+    'date': '2006-11-27 01:10:16 -0800',
+    'content':
+        'Et architecto ipsam asperiores vitae quo. Fugiat error quidem facilis. Eaque officiis est veniam.',
+    'subject': 'Autem rerum consequatur suscipit veritatis'
+  },
+
+  {
+    'id': '95',
+    'first-name': 'Gianni',
+    'last-name': 'Nitzsche',
+    'email': 'maxine.carter@schimmelfritsch.com',
+    'date': '2006-02-22 21:52:15 -0800',
+    'content':
+        'Nam aut at esse. Adipisci tenetur in voluptas. Dolore quia nobis voluptatibus iure sit eaque fugit.',
+    'subject': 'Et est rerum non aut eum'
+  },
+
+  {
+    'id': '96',
+    'first-name': 'Reed',
+    'last-name': 'Kirlin',
+    'email': 'keaton@gutmann.net',
+    'date': '2001-08-15 19:41:38 -0700',
+    'content': 'Mollitia hic numquam dicta.',
+    'subject': 'Est accusantium et nam dolores aliquam'
+  },
+
+  {
+    'id': '97',
+    'first-name': 'Thelma',
+    'last-name': 'Labadie',
+    'email': 'leonor@bahringer.biz',
+    'date': '1993-01-04 20:38:12 -0800',
+    'content':
+        'Porro rerum ea similique. Vel qui est. Temporibus a distinctio dolor doloremque eos beatae.',
+    'subject': 'Aut et quasi aut'
+  },
+
+  {
+    'id': '98',
+    'first-name': 'Neva',
+    'last-name': 'Stehr',
+    'email': 'clifton.turner@beeroconnell.name',
+    'date': '1983-03-21 03:23:41 -0800',
+    'content': 'Voluptatem impedit sed minus. Incidunt ad est consequatur rerum mollitia.',
+    'subject': 'Eum sapiente quis placeat'
+  },
+
+  {
+    'id': '99',
+    'first-name': 'Jovan',
+    'last-name': 'Kunze',
+    'email': 'grady_keler@casper.net',
+    'date': '1985-11-17 01:24:57 -0800',
+    'content':
+        'Molestiae laboriosam quia adipisci delectus praesentium nam. Dolorum repudiandae delectus esse quis voluptatem similique. Illum tempore vitae quia minus.',
+    'subject': 'Nihil qui repellendus animi nostrum voluptas quisquam aut minima'
+  },
+
+  {
+    'id': '100',
+    'first-name': 'Agustin',
+    'last-name': 'Rowe',
+    'email': 'roderick@cartermckenzie.name',
+    'date': '2013-08-15 06:42:43 -0700',
+    'content': 'Quo eaque non laboriosam sunt. Ad aliquid laudantium quia. Aut nisi magnam.',
+    'subject': 'Aut hic iste maiores sit'
+  },
+
+  {
+    'id': '101',
+    'first-name': 'Lennie',
+    'last-name': 'Pacocha',
+    'email': 'valentine@goldnerryan.com',
+    'date': '1995-11-23 15:07:48 -0800',
+    'content':
+        'Provident sit voluptate odio qui. Est consequatur nobis. Quibusdam exercitationem ducimus aspernatur.',
+    'subject': 'Perferendis adipisci necessitatibus qui similique'
+  },
+
+  {
+    'id': '102',
+    'first-name': 'Brionna',
+    'last-name': 'Brown',
+    'email': 'jesus@gusikowski.info',
+    'date': '2007-12-21 20:22:44 -0800',
+    'content':
+        'Qui deleniti quaerat ratione doloremque ea quod consequatur. Illo consequatur nisi eos molestiae quos ullam. Enim neque rerum perspiciatis inventore consectetur.',
+    'subject': 'Perferendis ratione voluptatem quae non magnam'
+  },
+
+  {
+    'id': '103',
+    'first-name': 'Ceasar',
+    'last-name': 'Becker',
+    'email': 'barney@conn.biz',
+    'date': '1991-03-31 18:06:07 -0800',
+    'content': 'Cupiditate ipsa minus. Recusandae consequatur aperiam ab ut sint expedita.',
+    'subject': 'Dolore voluptatum maiores repudiandae ipsam qui consectetur veniam et'
+  },
+
+  {
+    'id': '104',
+    'first-name': 'Jadon',
+    'last-name': 'Walker',
+    'email': 'alexie@brownspencer.biz',
+    'date': '2014-05-05 03:04:04 -0700',
+    'content':
+        'Ipsam ut molestias necessitatibus consequatur eligendi adipisci nihil. Nemo voluptatem dolores iure enim fuga.',
+    'subject': 'Sunt officia voluptas porro et voluptatum exercitationem aut id'
+  },
+
+  {
+    'id': '105',
+    'first-name': 'Harvey',
+    'last-name': 'Little',
+    'email': 'dell_reichel@mayert.name',
+    'date': '1997-05-17 16:09:39 -0700',
+    'content':
+        'Saepe et voluptate enim facere. Nihil est et sint odit aut quae. Deserunt molestiae explicabo impedit iure quod ratione.',
+    'subject': 'Veniam ipsum est eum dolorem neque aut'
+  },
+
+  {
+    'id': '106',
+    'first-name': 'Kailey',
+    'last-name': 'Doyle',
+    'email': 'golda@hayesdavis.name',
+    'date': '1992-07-01 10:53:52 -0700',
+    'content':
+        'Necessitatibus aspernatur nesciunt rerum nam. Qui quaerat modi. Et voluptatem ut quod perspiciatis quo eligendi.',
+    'subject': 'Exercitationem voluptatem sunt hic debitis'
+  },
+
+  {
+    'id': '107',
+    'first-name': 'Emily',
+    'last-name': 'Gutmann',
+    'email': 'mazie@bashirian.biz',
+    'date': '1999-12-26 09:22:07 -0800',
+    'content':
+        'Rem debitis qui quia. Nihil quis quia omnis et ea aliquid. Quam praesentium commodi itaque.',
+    'subject': 'Maiores ea alias fuga'
+  },
+
+  {
+    'id': '108',
+    'first-name': 'Jack',
+    'last-name': 'O\'Keefe',
+    'email': 'carlos@wilkinson.biz',
+    'date': '1988-04-28 18:31:09 -0700',
+    'content': 'Ab aspernatur vel et. Architecto occaecati qui. Adipisci ut sequi culpa.',
+    'subject': 'Qui fuga rerum quo'
+  },
+
+  {
+    'id': '109',
+    'first-name': 'Mylene',
+    'last-name': 'Barton',
+    'email': 'sherman.kunde@block.info',
+    'date': '1996-04-16 20:06:02 -0700',
+    'content': 'Nostrum iste laboriosam corporis omnis.',
+    'subject': 'Nihil et minima odit iste et beatae'
+  },
+
+  {
+    'id': '110',
+    'first-name': 'Cristopher',
+    'last-name': 'Krajcik',
+    'email': 'levi@oconnell.com',
+    'date': '1989-11-08 03:06:37 -0800',
+    'content': 'Assumenda qui et accusamus magnam deserunt ut nobis.',
+    'subject': 'Aut numquam saepe placeat facilis at'
+  },
+
+  {
+    'id': '111',
+    'first-name': 'Amya',
+    'last-name': 'Anderson',
+    'email': 'travis@waelchigottlieb.biz',
+    'date': '1986-12-25 15:27:02 -0800',
+    'content': 'Iure numquam ea omnis nemo illo.',
+    'subject': 'Labore sit aut ea in nemo et deleniti'
+  },
+
+  {
+    'id': '112',
+    'first-name': 'Alphonso',
+    'last-name': 'Buckridge',
+    'email': 'duncan@barton.name',
+    'date': '1991-02-27 01:09:28 -0800',
+    'content': 'Sint ducimus sed temporibus quo. Voluptas possimus eaque earum aut.',
+    'subject': 'Quidem aliquid blanditiis quasi'
+  },
+
+  {
+    'id': '113',
+    'first-name': 'Jovani',
+    'last-name': 'Thompson',
+    'email': 'lewis.greenfelder@stark.biz',
+    'date': '1970-10-29 18:08:36 -0800',
+    'content': 'Modi aut ut amet ut qui.',
+    'subject': 'Deserunt est autem sed dicta qui'
+  },
+
+  {
+    'id': '114',
+    'first-name': 'Roosevelt',
+    'last-name': 'Blick',
+    'email': 'sophie_kaulke@kunze.biz',
+    'date': '2001-11-11 17:45:44 -0800',
+    'content': 'Debitis non exercitationem vero nostrum dignissimos. Et voluptates ad nulla.',
+    'subject': 'Quasi est ipsam accusantium sint'
+  },
+
+  {
+    'id': '115',
+    'first-name': 'Darren',
+    'last-name': 'Brown',
+    'email': 'jammie@hickle.net',
+    'date': '2007-10-05 11:14:49 -0700',
+    'content':
+        'Quas ut odio blanditiis corrupti quia dolor. Id enim in veniam voluptatem. Laborum delectus quidem voluptatem beatae facilis ut.',
+    'subject': 'Fugiat totam dolores harum soluta iusto et'
+  },
+
+  {
+    'id': '116',
+    'first-name': 'Dexter',
+    'last-name': 'Schroeder',
+    'email': 'efrain.corwin@hane.name',
+    'date': '1973-09-30 19:52:23 -0700',
+    'content': 'Debitis assumenda fugit. Sunt omnis in quod aut quibusdam qui.',
+    'subject': 'Aut iure molestias suscipit laboriosam dolores'
+  },
+
+  {
+    'id': '117',
+    'first-name': 'Mellie',
+    'last-name': 'Hilpert',
+    'email': 'amiya_haley@douglasbins.org',
+    'date': '1992-05-14 20:52:23 -0700',
+    'content':
+        'Vero aut perferendis commodi. Quod dolorem distinctio sint. Error nostrum reprehenderit aut quaerat officiis eaque.',
+    'subject': 'Omnis aliquid rerum fuga vero molestiae quidem eveniet'
+  },
+
+  {
+    'id': '118',
+    'first-name': 'Laura',
+    'last-name': 'Koepp',
+    'email': 'gus@hagenes.biz',
+    'date': '2007-08-04 22:19:10 -0700',
+    'content':
+        'Quibusdam fugiat quasi consequatur. Ipsam corporis nesciunt quae ipsa aliquid hic eius.',
+    'subject': 'Asperiores quisquam voluptatem aut quam dolores'
+  },
+
+  {
+    'id': '119',
+    'first-name': 'Amara',
+    'last-name': 'Jerde',
+    'email': 'estelle@marksdonnelly.info',
+    'date': '1989-08-19 01:24:43 -0700',
+    'content':
+        'Architecto voluptatum quas pariatur expedita exercitationem quo. Sint eum perferendis a. Et similique est amet dolores.',
+    'subject': 'Id consequuntur nesciunt tenetur impedit sit voluptas'
+  },
+
+  {
+    'id': '120',
+    'first-name': 'Jacquelyn',
+    'last-name': 'Barton',
+    'email': 'antwon_mayer@kshleringibson.info',
+    'date': '1989-08-19 13:07:02 -0700',
+    'content': 'Quos enim repellendus praesentium sit rerum deserunt.',
+    'subject': 'Et omnis hic autem ipsa tempora impedit perspiciatis'
+  },
+
+  {
+    'id': '121',
+    'first-name': 'Micaela',
+    'last-name': 'Runte',
+    'email': 'vivianne.graham@vonrueden.org',
+    'date': '1986-09-27 01:16:29 -0700',
+    'content': 'Et neque rem.',
+    'subject': 'Enim facere corrupti accusamus quam consequatur beatae aspernatur vero'
+  },
+
+  {
+    'id': '122',
+    'first-name': 'Millie',
+    'last-name': 'Flatley',
+    'email': 'gino@kihn.biz',
+    'date': '1980-02-09 01:35:05 -0800',
+    'content': 'Rerum sint quis esse minus. Aut at asperiores. Amet magni beatae atque.',
+    'subject': 'Illo vitae blanditiis et impedit in dolor'
+  },
+
+  {
+    'id': '123',
+    'first-name': 'Sincere',
+    'last-name': 'Rohan',
+    'email': 'zora@beattyerdman.org',
+    'date': '2002-11-11 22:02:22 -0800',
+    'content': 'Ut error voluptatem aut ratione molestiae. Omnis qui rem delectus.',
+    'subject': 'Unde sed voluptas assumenda non animi quo'
+  },
+
+  {
+    'id': '124',
+    'first-name': 'Vicky',
+    'last-name': 'Kautzer',
+    'email': 'mustafa.lueilwitz@tremblay.name',
+    'date': '2014-08-15 11:18:05 -0700',
+    'content':
+        'Nostrum quis et et molestiae molestiae. Corporis corrupti deleniti qui fugiat eos. Porro qui quis mollitia.',
+    'subject': 'Quisquam ex esse dolore'
+  },
+
+  {
+    'id': '125',
+    'first-name': 'Lavon',
+    'last-name': 'Padberg',
+    'email': 'destin_sanford@reynolds.net',
+    'date': '2005-07-11 21:24:34 -0700',
+    'content': 'Officia dolorem autem beatae soluta numquam aperiam et.',
+    'subject': 'Ad labore aut corporis'
+  },
+
+  {
+    'id': '126',
+    'first-name': 'Shaina',
+    'last-name': 'Dare',
+    'email': 'carrie_sawayn@buckridge.net',
+    'date': '2001-10-12 08:02:09 -0700',
+    'content': 'Ex doloremque dolor deleniti.',
+    'subject': 'Asperiores recusandae reprehenderit quia tempore qui ipsam sit'
+  },
+
+  {
+    'id': '127',
+    'first-name': 'Sigrid',
+    'last-name': 'Farrell',
+    'email': 'soledad_abshire@miller.net',
+    'date': '2003-03-24 17:55:50 -0800',
+    'content': 'Debitis ea soluta eos ut omnis. Ut et laboriosam. Quaerat sit velit impedit.',
+    'subject': 'Eum et nesciunt quidem quo repudiandae rerum doloremque beatae'
+  },
+
+  {
+    'id': '128',
+    'first-name': 'Viola',
+    'last-name': 'Dooley',
+    'email': 'myrtice_grant@zemlakbashirian.com',
+    'date': '2006-06-01 21:17:02 -0700',
+    'content': 'Sit doloremque est aut voluptatem.',
+    'subject': 'Aut accusamus consectetur nihil iusto'
+  },
+
+  {
+    'id': '129',
+    'first-name': 'Davion',
+    'last-name': 'Conn',
+    'email': 'travis@bins.biz',
+    'date': '1993-11-26 09:03:37 -0800',
+    'content':
+        'Voluptatibus ipsum mollitia fugit aspernatur enim sint. Laudantium exercitationem sed voluptas consequatur quis.',
+    'subject': 'Illum aspernatur tempora amet itaque ipsam distinctio aliquid'
+  },
+
+  {
+    'id': '130',
+    'first-name': 'Hobart',
+    'last-name': 'Oberbrunner',
+    'email': 'eric@wisozk.net',
+    'date': '2000-02-11 07:40:02 -0800',
+    'content': 'Quis aut sint officia sunt.',
+    'subject': 'Ut pariatur explicabo consequatur libero distinctio nulla consequatur placeat'
+  },
+
+  {
+    'id': '131',
+    'first-name': 'Raleigh',
+    'last-name': 'Hegmann',
+    'email': 'jasen.koepp@hickle.name',
+    'date': '1993-03-01 22:48:23 -0800',
+    'content':
+        'Delectus aut quod maxime incidunt et consequatur. Nihil eos et eveniet quo iure. Alias facilis earum dicta nulla quo sed.',
+    'subject': 'Aliquam eos aliquid dolor'
+  },
+
+  {
+    'id': '132',
+    'first-name': 'Hector',
+    'last-name': 'Denesik',
+    'email': 'bernice@leuschke.biz',
+    'date': '2013-08-03 14:45:55 -0700',
+    'content': 'Et ut dicta. Qui sunt vel et voluptas hic suscipit.',
+    'subject': 'Ipsum quo est consequatur'
+  },
+
+  {
+    'id': '133',
+    'first-name': 'Nikko',
+    'last-name': 'Rolfson',
+    'email': 'crystel@upton.net',
+    'date': '1977-02-19 16:22:15 -0800',
+    'content': 'Velit quo repellendus consequatur.',
+    'subject': 'Exercitationem omnis aut id deserunt nihil et inventore'
+  },
+
+  {
+    'id': '134',
+    'first-name': 'Jovany',
+    'last-name': 'Nienow',
+    'email': 'neil.muller@lakin.info',
+    'date': '2004-09-28 21:55:43 -0700',
+    'content':
+        'Voluptatibus numquam blanditiis quibusdam. Illum suscipit dolorum. Sunt amet est sint.',
+    'subject': 'Esse nihil est voluptas rerum ea'
+  },
+
+  {
+    'id': '135',
+    'first-name': 'Ellis',
+    'last-name': 'Kohler',
+    'email': 'cordie_bartoletti@barrows.net',
+    'date': '1989-09-19 13:57:30 -0700',
+    'content':
+        'Eum corporis nobis laborum fugiat amet alias. Voluptatum quasi ducimus fuga corrupti. Mollitia modi laborum.',
+    'subject': 'Ipsum modi nulla et'
+  },
+
+  {
+    'id': '136',
+    'first-name': 'Marley',
+    'last-name': 'Runolfsson',
+    'email': 'kian_vonrueden@collier.info',
+    'date': '2003-01-17 06:33:04 -0800',
+    'content': 'Et rerum explicabo iusto ipsa ipsum. Quia ipsa ab sed perspiciatis.',
+    'subject': 'Voluptas esse iure quia hic dolor eligendi velit maiores'
+  },
+
+  {
+    'id': '137',
+    'first-name': 'Grant',
+    'last-name': 'Jenkins',
+    'email': 'hayden.altenwerth@corkeryankunding.net',
+    'date': '1970-03-24 13:04:46 -0800',
+    'content': 'Tenetur odit ratione voluptatum dolore qui.',
+    'subject': 'Tempore est molestiae id'
+  },
+
+  {
+    'id': '138',
+    'first-name': 'Deangelo',
+    'last-name': 'Koss',
+    'email': 'reba.skiles@bruen.com',
+    'date': '1999-10-16 20:28:42 -0700',
+    'content': 'Sit vero sint ut beatae iure. Minima harum tempora sit rerum aut.',
+    'subject': 'Aspernatur cumque non consequatur blanditiis enim quas quam'
+  },
+
+  {
+    'id': '139',
+    'first-name': 'Mariana',
+    'last-name': 'Jakubowski',
+    'email': 'brett@swift.biz',
+    'date': '1970-07-04 08:54:29 -0700',
+    'content': 'Beatae expedita praesentium ea corrupti. Aut sint ad et sunt.',
+    'subject': 'Dolore distinctio consequatur aut laudantium officiis aliquid soluta'
+  },
+
+  {
+    'id': '140',
+    'first-name': 'Leonard',
+    'last-name': 'Kovacek',
+    'email': 'jermain@dachbruen.biz',
+    'date': '1981-10-15 00:39:10 -0700',
+    'content':
+        'Deserunt cupiditate modi. Eius consequatur aut dolor nostrum porro dignissimos. Labore consequatur quod est et distinctio possimus ducimus.',
+    'subject': 'Et rerum id voluptates et iure eligendi rerum'
+  },
+
+  {
+    'id': '141',
+    'first-name': 'Etha',
+    'last-name': 'Ondricka',
+    'email': 'noemy@okuneva.org',
+    'date': '1994-04-29 12:19:51 -0700',
+    'content':
+        'Velit fuga quasi pariatur consectetur est nihil. Dolore nisi dolores quia qui voluptatem inventore provident.',
+    'subject': 'Enim est commodi nisi autem asperiores molestiae minima'
+  },
+
+  {
+    'id': '142',
+    'first-name': 'Nannie',
+    'last-name': 'Fadel',
+    'email': 'frida.streich@prosacco.org',
+    'date': '2012-12-15 16:56:24 -0800',
+    'content': 'Rerum id quo. Recusandae aut optio voluptate perspiciatis tempore sed nemo.',
+    'subject': 'Pariatur soluta praesentium enim quo quam alias consequuntur in'
+  },
+
+  {
+    'id': '143',
+    'first-name': 'Shyanne',
+    'last-name': 'Kunze',
+    'email': 'annabel@littel.net',
+    'date': '1992-12-09 23:41:23 -0800',
+    'content': 'Dolores iure iste unde. Illo esse autem harum perspiciatis.',
+    'subject': 'Atque illum et qui'
+  },
+
+  {
+    'id': '144',
+    'first-name': 'Eloy',
+    'last-name': 'Barton',
+    'email': 'leonie_gulgowski@skiles.com',
+    'date': '2013-01-12 20:05:57 -0800',
+    'content': 'Cumque id sapiente explicabo. Voluptas pariatur quibusdam dolores et.',
+    'subject': 'Ut dolore velit qui omnis'
+  },
+
+  {
+    'id': '145',
+    'first-name': 'Rosalinda',
+    'last-name': 'Pfeffer',
+    'email': 'anabelle@langworth.com',
+    'date': '2001-05-17 05:43:52 -0700',
+    'content': 'Et voluptatem quasi voluptatum.',
+    'subject': 'Voluptatum quia incidunt ut repudiandae blanditiis'
+  },
+
+  {
+    'id': '146',
+    'first-name': 'William',
+    'last-name': 'Bogisich',
+    'email': 'bertha@gibsonrohan.info',
+    'date': '2009-11-01 04:28:13 -0800',
+    'content':
+        'Quaerat dolorem odio et dolor saepe quia odit. Corporis molestiae ab ipsa occaecati autem fuga dicta. Voluptate ratione sunt.',
+    'subject': 'Ipsam quidem mollitia blanditiis magnam ut et'
+  },
+
+  {
+    'id': '147',
+    'first-name': 'Laurianne',
+    'last-name': 'Bergstrom',
+    'email': 'brisa_howe@dare.net',
+    'date': '2003-03-23 21:58:11 -0800',
+    'content': 'Et porro recusandae aut. Tenetur voluptas aperiam ut vitae.',
+    'subject': 'Molestias autem qui nisi mollitia nulla dolorum repudiandae hic'
+  },
+
+  {
+    'id': '148',
+    'first-name': 'Carroll',
+    'last-name': 'Hickle',
+    'email': 'noemi.grady@grimesritchie.com',
+    'date': '1996-07-15 02:55:52 -0700',
+    'content': 'Quia voluptas assumenda. Numquam inventore facilis dicta qui ipsa reiciendis.',
+    'subject': 'Perferendis rerum vel incidunt molestias recusandae'
+  },
+
+  {
+    'id': '149',
+    'first-name': 'Jasen',
+    'last-name': 'Romaguera',
+    'email': 'jayce@berge.name',
+    'date': '1984-04-12 11:56:39 -0800',
+    'content': 'Consectetur molestias perspiciatis ut omnis aliquid.',
+    'subject': 'Hic optio accusamus qui adipisci repellendus ipsa in'
+  },
+
+  {
+    'id': '150',
+    'first-name': 'Heaven',
+    'last-name': 'Fay',
+    'email': 'enola@sanfordsteuber.net',
+    'date': '2000-11-23 00:18:07 -0800',
+    'content':
+        'Quia itaque temporibus. Provident ducimus quidem consectetur qui voluptatum. Sunt cum quis dolorum hic.',
+    'subject': 'Ad excepturi illum doloremque ducimus corporis ut qui omnis'
+  },
+
+  {
+    'id': '151',
+    'first-name': 'Wilburn',
+    'last-name': 'Cartwright',
+    'email': 'jaida_erdman@nitzsche.com',
+    'date': '2011-09-19 01:58:53 -0700',
+    'content': 'Autem iure magni ut odio amet et.',
+    'subject': 'Fuga quis quidem sint laborum et delectus iste'
+  },
+
+  {
+    'id': '152',
+    'first-name': 'Concepcion',
+    'last-name': 'McLaughlin',
+    'email': 'bernardo_langworth@jakubowski.org',
+    'date': '1992-08-20 13:35:09 -0700',
+    'content': 'Rerum laboriosam omnis nobis eaque odit sequi dicta.',
+    'subject': 'Sint accusantium ab quis sed ipsa'
+  },
+
+  {
+    'id': '153',
+    'first-name': 'Vita',
+    'last-name': 'Fisher',
+    'email': 'chanelle_gulgowski@roob.info',
+    'date': '2005-09-21 12:09:45 -0700',
+    'content':
+        'Sunt quibusdam adipisci accusantium laborum distinctio voluptate autem. Quis pariatur culpa ut et. Fuga similique dignissimos culpa dolorum neque reiciendis.',
+    'subject': 'Nulla enim et fugiat eveniet ducimus delectus'
+  },
+
+  {
+    'id': '154',
+    'first-name': 'Elliott',
+    'last-name': 'Champlin',
+    'email': 'kamille@kulascain.biz',
+    'date': '2003-05-20 15:42:54 -0700',
+    'content':
+        'Eos quisquam et voluptates rerum vel. Consectetur veniam voluptatem minus totam numquam in.',
+    'subject': 'Deleniti ipsum et odio'
+  },
+
+  {
+    'id': '155',
+    'first-name': 'Heidi',
+    'last-name': 'Macejkovic',
+    'email': 'stefanie@barrowshagenes.info',
+    'date': '1983-06-02 17:59:14 -0700',
+    'content': 'Ut officiis animi exercitationem delectus suscipit qui voluptatibus.',
+    'subject': 'Eveniet ipsam asperiores qui aut consectetur vel provident'
+  },
+
+  {
+    'id': '156',
+    'first-name': 'Janae',
+    'last-name': 'Pollich',
+    'email': 'brianne.sauer@marquardtsteuber.com',
+    'date': '2000-05-14 07:13:30 -0700',
+    'content': 'Facilis sit ut odit.',
+    'subject': 'Sapiente explicabo sequi molestias illo saepe'
+  },
+
+  {
+    'id': '157',
+    'first-name': 'Kaylin',
+    'last-name': 'Lindgren',
+    'email': 'urban.franecki@wilkinsonwilderman.org',
+    'date': '2014-09-09 00:48:38 -0700',
+    'content': 'Eaque ad repellendus est nihil iste vero.',
+    'subject': 'Deserunt qui dolor rerum ut beatae aut'
+  },
+
+  {
+    'id': '158',
+    'first-name': 'Garland',
+    'last-name': 'Nienow',
+    'email': 'ellen.schultz@kihn.org',
+    'date': '2013-10-27 00:18:14 -0700',
+    'content': 'Quam voluptatem nam est.',
+    'subject': 'Et occaecati quisquam impedit dolore quod'
+  },
+
+  {
+    'id': '159',
+    'first-name': 'Lilly',
+    'last-name': 'Hills',
+    'email': 'macey@labadie.biz',
+    'date': '1981-02-23 03:46:55 -0800',
+    'content':
+        'Quia perferendis est consequuntur voluptates cumque commodi. Laboriosam expedita sit excepturi.',
+    'subject': 'Eos doloribus repellendus provident'
+  },
+
+  {
+    'id': '160',
+    'first-name': 'Lilla',
+    'last-name': 'Abshire',
+    'email': 'roselyn@rippin.org',
+    'date': '1998-05-16 00:55:49 -0700',
+    'content': 'Ratione deserunt ut ut beatae praesentium qui. Nulla ut ipsam tempore.',
+    'subject': 'Autem nostrum tempora iure laborum'
+  },
+
+  {
+    'id': '161',
+    'first-name': 'Alessandro',
+    'last-name': 'Hayes',
+    'email': 'gia_bradtke@schimmelwalsh.biz',
+    'date': '2001-11-28 23:52:57 -0800',
+    'content':
+        'Quasi perspiciatis tenetur dolorum. Quae cupiditate fuga molestiae et tempore soluta.',
+    'subject': 'Non ipsam quis soluta'
+  },
+
+  {
+    'id': '162',
+    'first-name': 'Sharon',
+    'last-name': 'Goodwin',
+    'email': 'ulices.schimmel@oreillyabshire.name',
+    'date': '2010-03-12 00:46:00 -0800',
+    'content': 'Neque omnis in. Qui ad sint. Velit voluptatibus repellat esse at.',
+    'subject': 'Magni exercitationem quas consectetur qui quia id'
+  },
+
+  {
+    'id': '163',
+    'first-name': 'Claude',
+    'last-name': 'Gleason',
+    'email': 'ken.gulgowski@labadie.net',
+    'date': '2003-05-30 14:58:54 -0700',
+    'content': 'Et sit non harum quo sunt. Odio beatae voluptatem ad. Nemo in hic nulla.',
+    'subject': 'Nobis consequatur non sunt sequi ex nihil'
+  },
+
+  {
+    'id': '164',
+    'first-name': 'Maximilian',
+    'last-name': 'Mann',
+    'email': 'samir@stehr.biz',
+    'date': '1993-08-21 15:54:18 -0700',
+    'content':
+        'Minus quae voluptatem sequi. Distinctio voluptatem amet iusto velit et praesentium. Distinctio ipsum voluptas voluptas.',
+    'subject': 'Facere voluptatem laudantium laboriosam omnis'
+  },
+
+  {
+    'id': '165',
+    'first-name': 'Jennyfer',
+    'last-name': 'Satterfield',
+    'email': 'janiya_senger@olson.info',
+    'date': '2006-09-21 00:36:50 -0700',
+    'content': 'Doloribus praesentium excepturi omnis.',
+    'subject': 'Non fuga unde incidunt ad exercitationem maxime laboriosam qui'
+  },
+
+  {
+    'id': '166',
+    'first-name': 'Robin',
+    'last-name': 'Murray',
+    'email': 'alycia@cruickshank.name',
+    'date': '1985-10-04 03:44:39 -0700',
+    'content': 'Repudiandae dolorem ut. Possimus earum dignissimos temporibus amet vel eum.',
+    'subject': 'Vel culpa debitis quam'
+  },
+
+  {
+    'id': '167',
+    'first-name': 'Albina',
+    'last-name': 'Reinger',
+    'email': 'guie.gleason@gorczany.info',
+    'date': '1985-10-02 08:07:53 -0700',
+    'content': 'Natus rerum repellat voluptas. Distinctio dolor est in dolores.',
+    'subject': 'Modi perspiciatis iure odio hic et dignissimos rem qui'
+  },
+
+  {
+    'id': '168',
+    'first-name': 'Eloisa',
+    'last-name': 'Wolf',
+    'email': 'leopold@jenkins.info',
+    'date': '2007-02-19 09:25:29 -0800',
+    'content': 'Corporis ut dolorem ullam quidem ratione. Nam eveniet dicta autem eum.',
+    'subject': 'Facilis voluptas vel repellat et aut amet est'
+  },
+
+  {
+    'id': '169',
+    'first-name': 'Caden',
+    'last-name': 'Cartwright',
+    'email': 'mohammad_lockman@okoncrooks.net',
+    'date': '1974-11-14 03:12:44 -0800',
+    'content':
+        'Sunt nobis voluptate quasi sapiente magni a officia. Laudantium perspiciatis quod quis quidem voluptatum pariatur. Sit ut optio tempora.',
+    'subject': 'Nihil maxime officia et repellat'
+  },
+
+  {
+    'id': '170',
+    'first-name': 'Raul',
+    'last-name': 'Sipes',
+    'email': 'danial.miller@kulas.info',
+    'date': '1996-12-11 14:14:16 -0800',
+    'content':
+        'Ea rerum quo id omnis. Hic est voluptate voluptatem ut. Rerum eos ipsa laboriosam et ut expedita.',
+    'subject': 'Aliquam reiciendis quam expedita sed ad neque voluptas'
+  },
+
+  {
+    'id': '171',
+    'first-name': 'Allie',
+    'last-name': 'Runolfsson',
+    'email': 'skye@marvin.com',
+    'date': '2011-07-31 19:37:22 -0700',
+    'content': 'Perspiciatis mollitia fugit sunt et.',
+    'subject': 'Nihil expedita neque reprehenderit'
+  },
+
+  {
+    'id': '172',
+    'first-name': 'Belle',
+    'last-name': 'Nader',
+    'email': 'eugenia@mante.info',
+    'date': '1995-09-06 05:30:08 -0700',
+    'content': 'Expedita delectus quis ipsa dolore voluptatum.',
+    'subject': 'Recusandae quasi ullam consequatur assumenda aliquid unde'
+  },
+
+  {
+    'id': '173',
+    'first-name': 'Clemens',
+    'last-name': 'Tromp',
+    'email': 'geovanny@kilback.org',
+    'date': '1980-11-28 08:48:35 -0800',
+    'content': 'Sint eos ea quidem tempora.',
+    'subject': 'Velit aperiam consequatur ut et aliquam at'
+  },
+
+  {
+    'id': '174',
+    'first-name': 'Bettie',
+    'last-name': 'Mueller',
+    'email': 'edgardo@little.net',
+    'date': '1983-06-26 14:10:56 -0700',
+    'content': 'Dolore tempore accusamus.',
+    'subject': 'Autem tempore et ut'
+  },
+
+  {
+    'id': '175',
+    'first-name': 'Guy',
+    'last-name': 'King',
+    'email': 'macie@schmeler.info',
+    'date': '1999-03-28 22:34:59 -0800',
+    'content': 'Recusandae laborum ut et eaque eum.',
+    'subject': 'Dolor ullam totam consequatur eos fuga'
+  },
+
+  {
+    'id': '176',
+    'first-name': 'Cydney',
+    'last-name': 'Cronin',
+    'email': 'camren@thompson.org',
+    'date': '1993-10-23 02:50:41 -0700',
+    'content': 'Exercitationem modi eos sint vero. Iste possimus quis. Non est voluptas.',
+    'subject': 'Tempora ipsum soluta ut corrupti omnis in'
+  },
+
+  {
+    'id': '177',
+    'first-name': 'Ludwig',
+    'last-name': 'Hoeger',
+    'email': 'javon@torpolson.info',
+    'date': '2007-12-20 19:09:13 -0800',
+    'content': 'Architecto ut optio tempore pariatur itaque saepe.',
+    'subject': 'Earum unde quis officiis doloremque et animi qui'
+  },
+
+  {
+    'id': '178',
+    'first-name': 'Travon',
+    'last-name': 'Jacobi',
+    'email': 'jameson_streich@hansen.org',
+    'date': '2013-02-03 09:53:51 -0800',
+    'content': 'Autem dolorem totam atque id sit. Consectetur dolor maiores.',
+    'subject': 'Quia autem deleniti ullam neque odio'
+  },
+
+  {
+    'id': '179',
+    'first-name': 'Brennan',
+    'last-name': 'Jaskolski',
+    'email': 'harold_thompson@schaefer.info',
+    'date': '2004-01-13 10:53:47 -0800',
+    'content': 'Libero et dolorem nihil. Omnis consequuntur possimus ut.',
+    'subject': 'Eum labore omnis ipsa doloremque consequuntur soluta esse fuga'
+  },
+
+  {
+    'id': '180',
+    'first-name': 'Clifton',
+    'last-name': 'Boyer',
+    'email': 'justine@skiles.biz',
+    'date': '2000-01-28 22:33:14 -0800',
+    'content':
+        'Nobis recusandae fugiat quibusdam doloribus. Aut praesentium corrupti tenetur ullam quia.',
+    'subject': 'Ea dolorem voluptas aut cumque inventore delectus non molestiae'
+  },
+
+  {
+    'id': '181',
+    'first-name': 'Walker',
+    'last-name': 'Rogahn',
+    'email': 'stanton@rempel.net',
+    'date': '2012-04-02 20:05:38 -0700',
+    'content': 'Consectetur et soluta. Minus voluptatem quod aut vitae praesentium.',
+    'subject': 'Tenetur architecto reprehenderit corporis fuga et rerum vel'
+  },
+
+  {
+    'id': '182',
+    'first-name': 'Jennings',
+    'last-name': 'Hills',
+    'email': 'kenton@murrayharvey.biz',
+    'date': '2007-09-24 22:09:51 -0700',
+    'content':
+        'Velit porro quidem nostrum. Perspiciatis consequatur consectetur reiciendis sunt cupiditate quae. Vitae et ut autem iure.',
+    'subject': 'Cupiditate quis maiores omnis'
+  },
+
+  {
+    'id': '183',
+    'first-name': 'Julianne',
+    'last-name': 'O\'Kon',
+    'email': 'helene@abshire.com',
+    'date': '1987-02-09 22:56:12 -0800',
+    'content':
+        'Voluptas voluptatem veniam porro dolorem maxime. Itaque eveniet laborum optio sed aspernatur omnis. Veritatis enim itaque sint illo ipsam eius.',
+    'subject': 'Corporis et laboriosam aspernatur aut'
+  },
+
+  {
+    'id': '184',
+    'first-name': 'Raymond',
+    'last-name': 'Orn',
+    'email': 'cloyd@rempel.biz',
+    'date': '2014-02-04 04:33:02 -0800',
+    'content':
+        'Eum voluptatibus accusantium rem. Deleniti harum eum. Illo est facere illum saepe voluptas.',
+    'subject': 'Eveniet est architecto id ut rerum nam quidem'
+  },
+
+  {
+    'id': '185',
+    'first-name': 'Johan',
+    'last-name': 'Legros',
+    'email': 'rosie_ernser@wolf.com',
+    'date': '1989-03-02 11:17:10 -0800',
+    'content': 'Architecto explicabo praesentium amet eaque quibusdam.',
+    'subject': 'Consectetur fugiat iusto omnis aspernatur ut'
+  },
+
+  {
+    'id': '186',
+    'first-name': 'Daryl',
+    'last-name': 'Labadie',
+    'email': 'ashly_thompson@casper.net',
+    'date': '2003-01-28 00:02:56 -0800',
+    'content': 'Et est doloribus. Fuga hic sed voluptatibus ullam officia aspernatur.',
+    'subject': 'A sunt eum quas accusamus'
+  },
+
+  {
+    'id': '187',
+    'first-name': 'Gavin',
+    'last-name': 'Moore',
+    'email': 'dahlia@leffleroberbrunner.biz',
+    'date': '1970-10-15 07:36:57 -0700',
+    'content': 'Sapiente ipsum magni dolore est dolor.',
+    'subject': 'Est maxime consequatur esse qui dicta aut quaerat'
+  },
+
+  {
+    'id': '188',
+    'first-name': 'Coby',
+    'last-name': 'Swaniawski',
+    'email': 'millie.labadie@wuckert.name',
+    'date': '2012-09-14 00:25:46 -0700',
+    'content':
+        'Magni qui molestias debitis reprehenderit vel quo est. Blanditiis debitis autem neque non illo.',
+    'subject': 'Rerum accusantium magni dolorem in reprehenderit et voluptas'
+  },
+
+  {
+    'id': '189',
+    'first-name': 'Luis',
+    'last-name': 'Stracke',
+    'email': 'merle@mrazswaniawski.biz',
+    'date': '2007-11-11 05:28:46 -0800',
+    'content': 'Neque magnam sint porro reprehenderit quo. In et reiciendis non velit et eum quos.',
+    'subject': 'Sit voluptates nulla perspiciatis debitis dolor eaque a'
+  },
+
+  {
+    'id': '190',
+    'first-name': 'Leone',
+    'last-name': 'Huel',
+    'email': 'emil@botsford.biz',
+    'date': '2004-03-16 23:46:45 -0800',
+    'content': 'Vitae amet et quae ullam.',
+    'subject': 'Rerum enim voluptate qui'
+  },
+
+  {
+    'id': '191',
+    'first-name': 'Aylin',
+    'last-name': 'Kling',
+    'email': 'anderson_jast@kozeyparisian.com',
+    'date': '1979-06-17 04:05:50 -0700',
+    'content': 'Quam eligendi numquam sint. Non ipsa et qui error dolor velit.',
+    'subject': 'Culpa iste rerum facere praesentium deleniti sequi'
+  },
+
+  {
+    'id': '192',
+    'first-name': 'Junior',
+    'last-name': 'Bartoletti',
+    'email': 'te@kuvalis.net',
+    'date': '1994-12-09 11:00:34 -0800',
+    'content': 'Velit eos et nemo dolore eum necessitatibus. Ea inventore adipisci.',
+    'subject': 'Velit dolorem cumque ipsa'
+  },
+
+  {
+    'id': '193',
+    'first-name': 'Nathanael',
+    'last-name': 'Hermiston',
+    'email': 'macy.cole@wittingcasper.info',
+    'date': '2002-01-06 17:45:52 -0800',
+    'content':
+        'Corporis occaecati quidem quia repudiandae repellendus beatae similique. Inventore quo ullam.',
+    'subject': 'Quidem expedita quia inventore dolores ratione totam et dignissimos'
+  },
+
+  {
+    'id': '194',
+    'first-name': 'Hal',
+    'last-name': 'Bruen',
+    'email': 'nathen.ziemann@gerlachko.name',
+    'date': '1996-03-01 01:35:30 -0800',
+    'content':
+        'Qui eius aspernatur et aut et vel in. Adipisci aliquid consequatur dolores et ut. Est aut temporibus.',
+    'subject': 'Voluptas placeat eveniet non quas assumenda quam minus'
+  },
+
+  {
+    'id': '195',
+    'first-name': 'Freddie',
+    'last-name': 'Thompson',
+    'email': 'elia@aufderharbrown.org',
+    'date': '2005-03-20 05:07:30 -0800',
+    'content': 'Dolor nemo sed molestiae quae quia.',
+    'subject': 'Quam sint et voluptatem et fuga sint ut saepe'
+  },
+
+  {
+    'id': '196',
+    'first-name': 'Aida',
+    'last-name': 'Gorczany',
+    'email': 'olga.labadie@abshire.name',
+    'date': '1989-07-26 04:26:19 -0700',
+    'content':
+        'Sit qui voluptatem facere. Similique alias quia sit ipsum. Ut corrupti tempore molestiae.',
+    'subject': 'Qui veniam blanditiis nesciunt beatae tempore aut fugiat maiores'
+  },
+
+  {
+    'id': '197',
+    'first-name': 'Isabelle',
+    'last-name': 'Collier',
+    'email': 'christiana_gottlieb@borer.biz',
+    'date': '1978-05-15 13:13:34 -0700',
+    'content': 'Aliquam earum velit ut.',
+    'subject': 'Neque et voluptate ratione totam voluptas est nulla ipsum'
+  },
+
+  {
+    'id': '198',
+    'first-name': 'Ida',
+    'last-name': 'Reichert',
+    'email': 'mervin@keeling.com',
+    'date': '1991-02-06 05:02:15 -0800',
+    'content':
+        'Velit in at et dicta tenetur. Doloremque cupiditate est. Excepturi non minus aspernatur dolores qui quaerat architecto.',
+    'subject': 'Ut voluptas qui ad minus'
+  },
+
+  {
+    'id': '199',
+    'first-name': 'Angelina',
+    'last-name': 'Mueller',
+    'email': 'leonel@purdyschroeder.org',
+    'date': '2008-06-17 01:01:57 -0700',
+    'content':
+        'Recusandae eius non necessitatibus. Quisquam qui quo. Voluptas dolorem dolorem sit repellat laudantium ducimus qui.',
+    'subject': 'Dolorem atque impedit qui soluta'
+  },
+
+  {
+    'id': '200',
+    'first-name': 'Marcelle',
+    'last-name': 'Connelly',
+    'email': 'heath@leuschke.net',
+    'date': '1983-10-02 18:32:18 -0700',
+    'content':
+        'Debitis quasi voluptates et voluptatibus rerum. Et explicabo quia qui qui voluptate dolor.',
+    'subject': 'Rem molestiae nobis consequatur eligendi ut'
+  },
+  {
+    'id': '201',
+    'first-name': 'Bob',
+    'last-name': 'Brown',
+    'email': 'bob@brown.net',
+    'date': '1983-10-02 18:32:18 -0700',
+    'content':
+        'Debitis quasi voluptates et voluptatibus rerum. Et explicabo quia qui qui voluptate dolor.',
+    'subject': 'Urgent question about whipped cream',
+    'draft': true
+  },
+  {
+    'id': '202',
+    'first-name': 'Mary',
+    'last-name': 'Jones',
+    'email': 'mary@jones.net',
+    'date': '1983-10-02 18:32:18 -0700',
+    'content':
+        'Debitis quasi voluptates et voluptatibus rerum. Et explicabo quia qui qui voluptate dolor.',
+    'subject': 'Fwd: wedding photos',
+    'draft': true
+  }
+];
diff --git a/modules/playground/src/routing/app/drafts.html b/modules/playground/src/routing/app/drafts.html
new file mode 100644
index 000000000000..62d968bc1cc7
--- /dev/null
+++ b/modules/playground/src/routing/app/drafts.html
@@ -0,0 +1,11 @@
+<div>
+  <h2 class="page-title">Drafts</h2>
+
+  <ol class="inbox-list">
+    <li *ngFor="let item of items" class="inbox-item-record">
+      <a id="item-{{ item.id }}"
+         [routerLink]="['/detail', item.id]">
+        {{ item.subject }}</a>
+    </li>
+  </ol>
+</div>
diff --git a/modules/playground/src/routing/app/inbox-app.html b/modules/playground/src/routing/app/inbox-app.html
new file mode 100644
index 000000000000..64ecb40b4331
--- /dev/null
+++ b/modules/playground/src/routing/app/inbox-app.html
@@ -0,0 +1,5 @@
+<div class="inbox-aside inbox-side-menu">
+  <a [routerLink]="['/inbox']" class="link" routerLinkActive="active">Inbox</a>
+  <a [routerLink]="['/drafts']" class="link" routerLinkActive="active">Drafts</a>
+</div>
+<router-outlet></router-outlet>
diff --git a/modules/playground/src/routing/app/inbox-app.ts b/modules/playground/src/routing/app/inbox-app.ts
new file mode 100644
index 000000000000..86bf0cb7f627
--- /dev/null
+++ b/modules/playground/src/routing/app/inbox-app.ts
@@ -0,0 +1,130 @@
+/**
+ * @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, Injectable} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+
+import * as db from './data';
+
+export class InboxRecord {
+  id: string = '';
+  subject: string = '';
+  content: string = '';
+  email: string = '';
+  firstName: string = '';
+  lastName: string = '';
+  date: string;
+  draft: boolean = false;
+
+  constructor(data: {
+    id: string,
+    subject: string,
+    content: string,
+    email: string,
+    firstName: string,
+    lastName: string,
+    date: string, draft?: boolean
+  } = null) {
+    if (data) {
+      this.setData(data);
+    }
+  }
+
+  setData(record: {
+    id: string,
+    subject: string,
+    content: string,
+    email: string,
+    firstName: string,
+    lastName: string,
+    date: string, draft?: boolean
+  }) {
+    this.id = record.id;
+    this.subject = record.subject;
+    this.content = record.content;
+    this.email = record.email;
+    this.firstName = record.firstName;
+    this.lastName = record.lastName;
+    this.date = record.date;
+    this.draft = record.draft === true;
+  }
+}
+
+@Injectable()
+export class DbService {
+  getData(): Promise<InboxRecord[]> {
+    return Promise.resolve(db.data.map((entry: {[key: string]: any}) => new InboxRecord({
+                                         id: entry['id'],
+                                         subject: entry['subject'],
+                                         content: entry['content'],
+                                         email: entry['email'],
+                                         firstName: entry['first-name'],
+                                         lastName: entry['last-name'],
+                                         date: entry['date'],
+                                         draft: entry['draft'],
+                                       })));
+  }
+
+  drafts(): Promise<InboxRecord[]> {
+    return this.getData().then((data) => data.filter(record => record.draft));
+  }
+
+  emails(): Promise<InboxRecord[]> {
+    return this.getData().then((data) => data.filter(record => !record.draft));
+  }
+
+  email(id: string): Promise<InboxRecord> {
+    return this.getData().then((data) => data.find((entry) => entry.id == id));
+  }
+}
+
+@Component({selector: 'inbox', templateUrl: 'app/inbox.html'})
+export class InboxCmp {
+  private items: InboxRecord[] = [];
+  private ready: boolean = false;
+
+  constructor(public router: Router, db: DbService, route: ActivatedRoute) {
+    route.params.forEach(p => {
+      const sortEmailsByDate = p['sort'] === 'date';
+
+      db.emails().then((emails) => {
+        this.ready = true;
+        this.items = emails;
+
+        if (sortEmailsByDate) {
+          this.items.sort(
+              (a, b) => new Date(a.date).getTime() < new Date(b.date).getTime() ? -1 : 1);
+        }
+      });
+    });
+  }
+}
+
+
+@Component({selector: 'drafts', templateUrl: 'app/drafts.html'})
+export class DraftsCmp {
+  private items: InboxRecord[] = [];
+  private ready: boolean = false;
+
+  constructor(private router: Router, db: DbService) {
+    db.drafts().then((drafts) => {
+      this.ready = true;
+      this.items = drafts;
+    });
+  }
+}
+
+export const ROUTER_CONFIG = [
+  {path: '', pathMatch: 'full', redirectTo: 'inbox'}, {path: 'inbox', component: InboxCmp},
+  {path: 'drafts', component: DraftsCmp}, {path: 'detail', loadChildren: 'app/inbox-detail.js'}
+];
+
+@Component({selector: 'inbox-app', templateUrl: 'app/inbox-app.html'})
+export class InboxApp {
+}
diff --git a/modules/playground/src/routing/app/inbox-detail.html b/modules/playground/src/routing/app/inbox-detail.html
new file mode 100644
index 000000000000..bcd6d13a1b8c
--- /dev/null
+++ b/modules/playground/src/routing/app/inbox-detail.html
@@ -0,0 +1,24 @@
+<div>
+  <h2 class="page-title">{{ record.subject }}</h2>
+
+  <ul>
+    <li id="record-id">ID: {{ record.id }}</li>
+    <li id="record-name">Name: {{ record.firstName }} {{ record.lastName }}</li>
+    <li id="record-email">Email: {{ record.email }}</li>
+    <li id="record-date">Date: {{ record.date }}</li>
+  </ul>
+
+  <p>
+    {{ record.content }}
+  </p>
+
+  <span class="btn medium primary">
+    <a [routerLink]="record.draft ? ['/drafts'] : ['/inbox']" class="back-button">Back</a>
+  </span>
+
+  <hr />
+
+  <a [routerLink]="['/inbox', { sort: 'date'} ]" class="sort-button">
+    View Latest Messages
+  </a>
+</div>
diff --git a/modules/playground/src/routing/app/inbox-detail.ts b/modules/playground/src/routing/app/inbox-detail.ts
new file mode 100644
index 000000000000..584ccc9e8030
--- /dev/null
+++ b/modules/playground/src/routing/app/inbox-detail.ts
@@ -0,0 +1,30 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {ActivatedRoute, RouterModule} from '@angular/router';
+
+import {DbService, InboxRecord} from './inbox-app';
+
+@Component({selector: 'inbox-detail', templateUrl: 'app/inbox-detail.html'})
+export class InboxDetailCmp {
+  private record: InboxRecord = new InboxRecord();
+  private ready: boolean = false;
+
+  constructor(db: DbService, route: ActivatedRoute) {
+    route.paramMap.forEach(
+        p => { db.email(p.get('id')).then((data) => { this.record.setData(data); }); });
+  }
+}
+
+@NgModule({
+  declarations: [InboxDetailCmp],
+  imports: [RouterModule.forChild([{path: ':id', component: InboxDetailCmp}])]
+})
+export default class InboxDetailModule {
+}
diff --git a/modules/playground/src/routing/app/inbox.html b/modules/playground/src/routing/app/inbox.html
new file mode 100644
index 000000000000..976525c39ff9
--- /dev/null
+++ b/modules/playground/src/routing/app/inbox.html
@@ -0,0 +1,10 @@
+<div>
+  <h2 class="page-title">Inbox</h2>
+
+  <ol class="inbox-list">
+    <li *ngFor="let item of items" class="inbox-item-record">
+      <a id="item-{{ item.id }}"
+         [routerLink]="['/detail', item.id]">{{ item.subject }}</a>
+    </li>
+  </ol>
+</div>
diff --git a/modules/playground/src/routing/css/app.css b/modules/playground/src/routing/css/app.css
new file mode 100644
index 000000000000..bda72ce52014
--- /dev/null
+++ b/modules/playground/src/routing/css/app.css
@@ -0,0 +1,57 @@
+body {
+  background:#eee;
+  color:black;
+}
+
+.inbox-list,
+.inbox-list li {
+  list-style:none;
+  padding:0;
+  margin:0;
+}
+
+.inbox-list a {
+  padding:5px;
+  display:block;
+}
+
+inbox, drafts, .inbox-side-menu {
+  display:block;
+}
+
+.inbox-side-menu .link {
+  display:block;
+  text-align:center;
+  padding:1em;
+}
+
+.inbox-side-menu .link.active {
+  background:white;
+}
+
+.inbox-side-menu .link:hover {
+  background:#eee;
+}
+
+.inbox-side-menu {
+  position:fixed;
+  left:0;
+  top:0;
+  bottom:0;
+  width:200px;
+  background:#ddd;
+}
+
+.inbox-side-menu a {
+  display: block;
+}
+
+inbox, drafts, inbox-detail {
+  padding:1em;
+  margin-left:200px;
+}
+
+inbox-detail {
+  display:block;
+  margin-left:200px;
+}
diff --git a/modules/playground/src/routing/css/gumby.css b/modules/playground/src/routing/css/gumby.css
new file mode 100644
index 000000000000..af8373bec016
--- /dev/null
+++ b/modules/playground/src/routing/css/gumby.css
@@ -0,0 +1,1693 @@
+/**
+ * Angular note: local copy downloaded from https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/css/gumby.css
+ * local modification:
+ *    - forced google fonts to be fetched via http in order to avoid SSL error
+ *      https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700 - Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR
+ *      it's unclear why the CI tries to fetch the font via SSL when the base url is http
+ *      example broken build: https://travis-ci.org/angular/angular/jobs/204456086#L2355
+ *
+ */
+
+@charset "UTF-8";
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
+/**
+* Gumby Framework
+* ---------------
+*
+* Follow @gumbycss on twitter and spread the love.
+* We worked super hard on making this awesome and released it to the web.
+* All we ask is you leave this intact. #gumbyisawesome
+*
+* Gumby Framework
+* http://gumbyframework.com
+*
+* Built with love by your friends @digitalsurgeons
+* http://www.digitalsurgeons.com
+*
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+*/
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
+
+html { line-height: 1; }
+
+ol, ul { list-style: none; }
+
+table { border-collapse: collapse; border-spacing: 0; }
+
+caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
+
+q, blockquote { quotes: none; }
+q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }
+
+a img { border: none; }
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
+
+.pull_right { float: right; }
+
+.pull_left { float: left; }
+
+/* Base Styles */
+* html { font-size: 100%; }
+
+html { font-size: 16px; line-height: 1.625em; }
+
+* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+
+body { background: white; font-family: "Open Sans"; font-weight: 400; color: #555555; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+@media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; } }
+
+html, body { height: 100%; }
+
+.hide { display: none; }
+
+.hide.active, .show { display: block; }
+
+.icon-note.icon-left a:before, .icon-note.icon-right a:after, i.icon-note:before { content: "\266a"; height: inherit; }
+
+.icon-note-beamed.icon-left a:before, .icon-note-beamed.icon-right a:after, i.icon-note-beamed:before { content: "\266b"; height: inherit; }
+
+.icon-music.icon-left a:before, .icon-music.icon-right a:after, i.icon-music:before { content: "🎵"; height: inherit; }
+
+.icon-search.icon-left a:before, .icon-search.icon-right a:after, i.icon-search:before { content: "🔍"; height: inherit; }
+
+.icon-flashlight.icon-left a:before, .icon-flashlight.icon-right a:after, i.icon-flashlight:before { content: "🔦"; height: inherit; }
+
+.icon-mail.icon-left a:before, .icon-mail.icon-right a:after, i.icon-mail:before { content: "\2709"; height: inherit; }
+
+.icon-heart.icon-left a:before, .icon-heart.icon-right a:after, i.icon-heart:before { content: "\2665"; height: inherit; }
+
+.icon-heart-empty.icon-left a:before, .icon-heart-empty.icon-right a:after, i.icon-heart-empty:before { content: "\2661"; height: inherit; }
+
+.icon-star.icon-left a:before, .icon-star.icon-right a:after, i.icon-star:before { content: "\2605"; height: inherit; }
+
+.icon-star-empty.icon-left a:before, .icon-star-empty.icon-right a:after, i.icon-star-empty:before { content: "\2606"; height: inherit; }
+
+.icon-user.icon-left a:before, .icon-user.icon-right a:after, i.icon-user:before { content: "👤"; height: inherit; }
+
+.icon-users.icon-left a:before, .icon-users.icon-right a:after, i.icon-users:before { content: "👥"; height: inherit; }
+
+.icon-user-add.icon-left a:before, .icon-user-add.icon-right a:after, i.icon-user-add:before { content: "\e700"; height: inherit; }
+
+.icon-video.icon-left a:before, .icon-video.icon-right a:after, i.icon-video:before { content: "🎬"; height: inherit; }
+
+.icon-picture.icon-left a:before, .icon-picture.icon-right a:after, i.icon-picture:before { content: "🌄"; height: inherit; }
+
+.icon-camera.icon-left a:before, .icon-camera.icon-right a:after, i.icon-camera:before { content: "📷"; height: inherit; }
+
+.icon-layout.icon-left a:before, .icon-layout.icon-right a:after, i.icon-layout:before { content: "\268f"; height: inherit; }
+
+.icon-menu.icon-left a:before, .icon-menu.icon-right a:after, i.icon-menu:before { content: "\2630"; height: inherit; }
+
+.icon-check.icon-left a:before, .icon-check.icon-right a:after, i.icon-check:before { content: "\2713"; height: inherit; }
+
+.icon-cancel.icon-left a:before, .icon-cancel.icon-right a:after, i.icon-cancel:before { content: "\2715"; height: inherit; }
+
+.icon-cancel-circled.icon-left a:before, .icon-cancel-circled.icon-right a:after, i.icon-cancel-circled:before { content: "\2716"; height: inherit; }
+
+.icon-cancel-squared.icon-left a:before, .icon-cancel-squared.icon-right a:after, i.icon-cancel-squared:before { content: "\274e"; height: inherit; }
+
+.icon-plus.icon-left a:before, .icon-plus.icon-right a:after, i.icon-plus:before { content: "\2b"; height: inherit; }
+
+.icon-plus-circled.icon-left a:before, .icon-plus-circled.icon-right a:after, i.icon-plus-circled:before { content: "\2795"; height: inherit; }
+
+.icon-plus-squared.icon-left a:before, .icon-plus-squared.icon-right a:after, i.icon-plus-squared:before { content: "\229e"; height: inherit; }
+
+.icon-minus.icon-left a:before, .icon-minus.icon-right a:after, i.icon-minus:before { content: "\2d"; height: inherit; }
+
+.icon-minus-circled.icon-left a:before, .icon-minus-circled.icon-right a:after, i.icon-minus-circled:before { content: "\2796"; height: inherit; }
+
+.icon-minus-squared.icon-left a:before, .icon-minus-squared.icon-right a:after, i.icon-minus-squared:before { content: "\229f"; height: inherit; }
+
+.icon-help.icon-left a:before, .icon-help.icon-right a:after, i.icon-help:before { content: "\2753"; height: inherit; }
+
+.icon-help-circled.icon-left a:before, .icon-help-circled.icon-right a:after, i.icon-help-circled:before { content: "\e704"; height: inherit; }
+
+.icon-info.icon-left a:before, .icon-info.icon-right a:after, i.icon-info:before { content: "\2139"; height: inherit; }
+
+.icon-info-circled.icon-left a:before, .icon-info-circled.icon-right a:after, i.icon-info-circled:before { content: "\e705"; height: inherit; }
+
+.icon-back.icon-left a:before, .icon-back.icon-right a:after, i.icon-back:before { content: "🔙"; height: inherit; }
+
+.icon-home.icon-left a:before, .icon-home.icon-right a:after, i.icon-home:before { content: "\2302"; height: inherit; }
+
+.icon-link.icon-left a:before, .icon-link.icon-right a:after, i.icon-link:before { content: "🔗"; height: inherit; }
+
+.icon-attach.icon-left a:before, .icon-attach.icon-right a:after, i.icon-attach:before { content: "📎"; height: inherit; }
+
+.icon-lock.icon-left a:before, .icon-lock.icon-right a:after, i.icon-lock:before { content: "🔒"; height: inherit; }
+
+.icon-lock-open.icon-left a:before, .icon-lock-open.icon-right a:after, i.icon-lock-open:before { content: "🔓"; height: inherit; }
+
+.icon-eye.icon-left a:before, .icon-eye.icon-right a:after, i.icon-eye:before { content: "\e70a"; height: inherit; }
+
+.icon-tag.icon-left a:before, .icon-tag.icon-right a:after, i.icon-tag:before { content: "\e70c"; height: inherit; }
+
+.icon-bookmark.icon-left a:before, .icon-bookmark.icon-right a:after, i.icon-bookmark:before { content: "🔖"; height: inherit; }
+
+.icon-bookmarks.icon-left a:before, .icon-bookmarks.icon-right a:after, i.icon-bookmarks:before { content: "📑"; height: inherit; }
+
+.icon-flag.icon-left a:before, .icon-flag.icon-right a:after, i.icon-flag:before { content: "\2691"; height: inherit; }
+
+.icon-thumbs-up.icon-left a:before, .icon-thumbs-up.icon-right a:after, i.icon-thumbs-up:before { content: "👍"; height: inherit; }
+
+.icon-thumbs-down.icon-left a:before, .icon-thumbs-down.icon-right a:after, i.icon-thumbs-down:before { content: "👎"; height: inherit; }
+
+.icon-download.icon-left a:before, .icon-download.icon-right a:after, i.icon-download:before { content: "📥"; height: inherit; }
+
+.icon-upload.icon-left a:before, .icon-upload.icon-right a:after, i.icon-upload:before { content: "📤"; height: inherit; }
+
+.icon-upload-cloud.icon-left a:before, .icon-upload-cloud.icon-right a:after, i.icon-upload-cloud:before { content: "\e711"; height: inherit; }
+
+.icon-reply.icon-left a:before, .icon-reply.icon-right a:after, i.icon-reply:before { content: "\e712"; height: inherit; }
+
+.icon-reply-all.icon-left a:before, .icon-reply-all.icon-right a:after, i.icon-reply-all:before { content: "\e713"; height: inherit; }
+
+.icon-forward.icon-left a:before, .icon-forward.icon-right a:after, i.icon-forward:before { content: "\27a6"; height: inherit; }
+
+.icon-quote.icon-left a:before, .icon-quote.icon-right a:after, i.icon-quote:before { content: "\275e"; height: inherit; }
+
+.icon-code.icon-left a:before, .icon-code.icon-right a:after, i.icon-code:before { content: "\e714"; height: inherit; }
+
+.icon-export.icon-left a:before, .icon-export.icon-right a:after, i.icon-export:before { content: "\e715"; height: inherit; }
+
+.icon-pencil.icon-left a:before, .icon-pencil.icon-right a:after, i.icon-pencil:before { content: "\270e"; height: inherit; }
+
+.icon-feather.icon-left a:before, .icon-feather.icon-right a:after, i.icon-feather:before { content: "\2712"; height: inherit; }
+
+.icon-print.icon-left a:before, .icon-print.icon-right a:after, i.icon-print:before { content: "\e716"; height: inherit; }
+
+.icon-retweet.icon-left a:before, .icon-retweet.icon-right a:after, i.icon-retweet:before { content: "\e717"; height: inherit; }
+
+.icon-keyboard.icon-left a:before, .icon-keyboard.icon-right a:after, i.icon-keyboard:before { content: "\2328"; height: inherit; }
+
+.icon-comment.icon-left a:before, .icon-comment.icon-right a:after, i.icon-comment:before { content: "\e718"; height: inherit; }
+
+.icon-chat.icon-left a:before, .icon-chat.icon-right a:after, i.icon-chat:before { content: "\e720"; height: inherit; }
+
+.icon-bell.icon-left a:before, .icon-bell.icon-right a:after, i.icon-bell:before { content: "🔔"; height: inherit; }
+
+.icon-attention.icon-left a:before, .icon-attention.icon-right a:after, i.icon-attention:before { content: "\26a0"; height: inherit; }
+
+.icon-alert.icon-left a:before, .icon-alert.icon-right a:after, i.icon-alert:before { content: "💥"; height: inherit; }
+
+.icon-vcard.icon-left a:before, .icon-vcard.icon-right a:after, i.icon-vcard:before { content: "\e722"; height: inherit; }
+
+.icon-address.icon-left a:before, .icon-address.icon-right a:after, i.icon-address:before { content: "\e723"; height: inherit; }
+
+.icon-location.icon-left a:before, .icon-location.icon-right a:after, i.icon-location:before { content: "\e724"; height: inherit; }
+
+.icon-map.icon-left a:before, .icon-map.icon-right a:after, i.icon-map:before { content: "\e727"; height: inherit; }
+
+.icon-direction.icon-left a:before, .icon-direction.icon-right a:after, i.icon-direction:before { content: "\27a2"; height: inherit; }
+
+.icon-compass.icon-left a:before, .icon-compass.icon-right a:after, i.icon-compass:before { content: "\e728"; height: inherit; }
+
+.icon-cup.icon-left a:before, .icon-cup.icon-right a:after, i.icon-cup:before { content: "\2615"; height: inherit; }
+
+.icon-trash.icon-left a:before, .icon-trash.icon-right a:after, i.icon-trash:before { content: "\e729"; height: inherit; }
+
+.icon-doc.icon-left a:before, .icon-doc.icon-right a:after, i.icon-doc:before { content: "\e730"; height: inherit; }
+
+.icon-docs.icon-left a:before, .icon-docs.icon-right a:after, i.icon-docs:before { content: "\e736"; height: inherit; }
+
+.icon-doc-landscape.icon-left a:before, .icon-doc-landscape.icon-right a:after, i.icon-doc-landscape:before { content: "\e737"; height: inherit; }
+
+.icon-doc-text.icon-left a:before, .icon-doc-text.icon-right a:after, i.icon-doc-text:before { content: "📄"; height: inherit; }
+
+.icon-doc-text-inv.icon-left a:before, .icon-doc-text-inv.icon-right a:after, i.icon-doc-text-inv:before { content: "\e731"; height: inherit; }
+
+.icon-newspaper.icon-left a:before, .icon-newspaper.icon-right a:after, i.icon-newspaper:before { content: "📰"; height: inherit; }
+
+.icon-book-open.icon-left a:before, .icon-book-open.icon-right a:after, i.icon-book-open:before { content: "📖"; height: inherit; }
+
+.icon-book.icon-left a:before, .icon-book.icon-right a:after, i.icon-book:before { content: "📕"; height: inherit; }
+
+.icon-folder.icon-left a:before, .icon-folder.icon-right a:after, i.icon-folder:before { content: "📁"; height: inherit; }
+
+.icon-archive.icon-left a:before, .icon-archive.icon-right a:after, i.icon-archive:before { content: "\e738"; height: inherit; }
+
+.icon-box.icon-left a:before, .icon-box.icon-right a:after, i.icon-box:before { content: "📦"; height: inherit; }
+
+.icon-rss.icon-left a:before, .icon-rss.icon-right a:after, i.icon-rss:before { content: "\e73a"; height: inherit; }
+
+.icon-phone.icon-left a:before, .icon-phone.icon-right a:after, i.icon-phone:before { content: "📞"; height: inherit; }
+
+.icon-cog.icon-left a:before, .icon-cog.icon-right a:after, i.icon-cog:before { content: "\2699"; height: inherit; }
+
+.icon-tools.icon-left a:before, .icon-tools.icon-right a:after, i.icon-tools:before { content: "\2692"; height: inherit; }
+
+.icon-share.icon-left a:before, .icon-share.icon-right a:after, i.icon-share:before { content: "\e73c"; height: inherit; }
+
+.icon-shareable.icon-left a:before, .icon-shareable.icon-right a:after, i.icon-shareable:before { content: "\e73e"; height: inherit; }
+
+.icon-basket.icon-left a:before, .icon-basket.icon-right a:after, i.icon-basket:before { content: "\e73d"; height: inherit; }
+
+.icon-bag.icon-left a:before, .icon-bag.icon-right a:after, i.icon-bag:before { content: "👜"; height: inherit; }
+
+.icon-calendar.icon-left a:before, .icon-calendar.icon-right a:after, i.icon-calendar:before { content: "📅"; height: inherit; }
+
+.icon-login.icon-left a:before, .icon-login.icon-right a:after, i.icon-login:before { content: "\e740"; height: inherit; }
+
+.icon-logout.icon-left a:before, .icon-logout.icon-right a:after, i.icon-logout:before { content: "\e741"; height: inherit; }
+
+.icon-mic.icon-left a:before, .icon-mic.icon-right a:after, i.icon-mic:before { content: "🎤"; height: inherit; }
+
+.icon-mute.icon-left a:before, .icon-mute.icon-right a:after, i.icon-mute:before { content: "🔇"; height: inherit; }
+
+.icon-sound.icon-left a:before, .icon-sound.icon-right a:after, i.icon-sound:before { content: "🔊"; height: inherit; }
+
+.icon-volume.icon-left a:before, .icon-volume.icon-right a:after, i.icon-volume:before { content: "\e742"; height: inherit; }
+
+.icon-clock.icon-left a:before, .icon-clock.icon-right a:after, i.icon-clock:before { content: "🕔"; height: inherit; }
+
+.icon-hourglass.icon-left a:before, .icon-hourglass.icon-right a:after, i.icon-hourglass:before { content: "\23f3"; height: inherit; }
+
+.icon-lamp.icon-left a:before, .icon-lamp.icon-right a:after, i.icon-lamp:before { content: "💡"; height: inherit; }
+
+.icon-light-down.icon-left a:before, .icon-light-down.icon-right a:after, i.icon-light-down:before { content: "🔅"; height: inherit; }
+
+.icon-light-up.icon-left a:before, .icon-light-up.icon-right a:after, i.icon-light-up:before { content: "🔆"; height: inherit; }
+
+.icon-adjust.icon-left a:before, .icon-adjust.icon-right a:after, i.icon-adjust:before { content: "\25d1"; height: inherit; }
+
+.icon-block.icon-left a:before, .icon-block.icon-right a:after, i.icon-block:before { content: "🚫"; height: inherit; }
+
+.icon-resize-full.icon-left a:before, .icon-resize-full.icon-right a:after, i.icon-resize-full:before { content: "\e744"; height: inherit; }
+
+.icon-resize-small.icon-left a:before, .icon-resize-small.icon-right a:after, i.icon-resize-small:before { content: "\e746"; height: inherit; }
+
+.icon-popup.icon-left a:before, .icon-popup.icon-right a:after, i.icon-popup:before { content: "\e74c"; height: inherit; }
+
+.icon-publish.icon-left a:before, .icon-publish.icon-right a:after, i.icon-publish:before { content: "\e74d"; height: inherit; }
+
+.icon-window.icon-left a:before, .icon-window.icon-right a:after, i.icon-window:before { content: "\e74e"; height: inherit; }
+
+.icon-arrow-combo.icon-left a:before, .icon-arrow-combo.icon-right a:after, i.icon-arrow-combo:before { content: "\e74f"; height: inherit; }
+
+.icon-down-circled.icon-left a:before, .icon-down-circled.icon-right a:after, i.icon-down-circled:before { content: "\e758"; height: inherit; }
+
+.icon-left-circled.icon-left a:before, .icon-left-circled.icon-right a:after, i.icon-left-circled:before { content: "\e759"; height: inherit; }
+
+.icon-right-circled.icon-left a:before, .icon-right-circled.icon-right a:after, i.icon-right-circled:before { content: "\e75a"; height: inherit; }
+
+.icon-up-circled.icon-left a:before, .icon-up-circled.icon-right a:after, i.icon-up-circled:before { content: "\e75b"; height: inherit; }
+
+.icon-down-open.icon-left a:before, .icon-down-open.icon-right a:after, i.icon-down-open:before { content: "\e75c"; height: inherit; }
+
+.icon-left-open.icon-left a:before, .icon-left-open.icon-right a:after, i.icon-left-open:before { content: "\e75d"; height: inherit; }
+
+.icon-right-open.icon-left a:before, .icon-right-open.icon-right a:after, i.icon-right-open:before { content: "\e75e"; height: inherit; }
+
+.icon-up-open.icon-left a:before, .icon-up-open.icon-right a:after, i.icon-up-open:before { content: "\e75f"; height: inherit; }
+
+.icon-down-open-mini.icon-left a:before, .icon-down-open-mini.icon-right a:after, i.icon-down-open-mini:before { content: "\e760"; height: inherit; }
+
+.icon-left-open-mini.icon-left a:before, .icon-left-open-mini.icon-right a:after, i.icon-left-open-mini:before { content: "\e761"; height: inherit; }
+
+.icon-right-open-mini.icon-left a:before, .icon-right-open-mini.icon-right a:after, i.icon-right-open-mini:before { content: "\e762"; height: inherit; }
+
+.icon-up-open-mini.icon-left a:before, .icon-up-open-mini.icon-right a:after, i.icon-up-open-mini:before { content: "\e763"; height: inherit; }
+
+.icon-down-open-big.icon-left a:before, .icon-down-open-big.icon-right a:after, i.icon-down-open-big:before { content: "\e764"; height: inherit; }
+
+.icon-left-open-big.icon-left a:before, .icon-left-open-big.icon-right a:after, i.icon-left-open-big:before { content: "\e765"; height: inherit; }
+
+.icon-right-open-big.icon-left a:before, .icon-right-open-big.icon-right a:after, i.icon-right-open-big:before { content: "\e766"; height: inherit; }
+
+.icon-up-open-big.icon-left a:before, .icon-up-open-big.icon-right a:after, i.icon-up-open-big:before { content: "\e767"; height: inherit; }
+
+.icon-down.icon-left a:before, .icon-down.icon-right a:after, i.icon-down:before { content: "\2b07"; height: inherit; }
+
+.icon-arrow-left.icon-left a:before, .icon-arrow-left.icon-right a:after, i.icon-arrow-left:before { content: "\2b05"; height: inherit; }
+
+.icon-arrow-right.icon-left a:before, .icon-arrow-right.icon-right a:after, i.icon-arrow-right:before { content: "\27a1"; height: inherit; }
+
+.icon-up.icon-left a:before, .icon-up.icon-right a:after, i.icon-up:before { content: "\2b06"; height: inherit; }
+
+.icon-down-dir.icon-left a:before, .icon-down-dir.icon-right a:after, i.icon-down-dir:before { content: "\25be"; height: inherit; }
+
+.icon-left-dir.icon-left a:before, .icon-left-dir.icon-right a:after, i.icon-left-dir:before { content: "\25c2"; height: inherit; }
+
+.icon-right-dir.icon-left a:before, .icon-right-dir.icon-right a:after, i.icon-right-dir:before { content: "\25b8"; height: inherit; }
+
+.icon-up-dir.icon-left a:before, .icon-up-dir.icon-right a:after, i.icon-up-dir:before { content: "\25b4"; height: inherit; }
+
+.icon-down-bold.icon-left a:before, .icon-down-bold.icon-right a:after, i.icon-down-bold:before { content: "\e4b0"; height: inherit; }
+
+.icon-left-bold.icon-left a:before, .icon-left-bold.icon-right a:after, i.icon-left-bold:before { content: "\e4ad"; height: inherit; }
+
+.icon-right-bold.icon-left a:before, .icon-right-bold.icon-right a:after, i.icon-right-bold:before { content: "\e4ae"; height: inherit; }
+
+.icon-up-bold.icon-left a:before, .icon-up-bold.icon-right a:after, i.icon-up-bold:before { content: "\e4af"; height: inherit; }
+
+.icon-down-thin.icon-left a:before, .icon-down-thin.icon-right a:after, i.icon-down-thin:before { content: "\2193"; height: inherit; }
+
+.icon-left-thin.icon-left a:before, .icon-left-thin.icon-right a:after, i.icon-left-thin:before { content: "\2190"; height: inherit; }
+
+.icon-right-thin.icon-left a:before, .icon-right-thin.icon-right a:after, i.icon-right-thin:before { content: "\2192"; height: inherit; }
+
+.icon-up-thin.icon-left a:before, .icon-up-thin.icon-right a:after, i.icon-up-thin:before { content: "\2191"; height: inherit; }
+
+.icon-ccw.icon-left a:before, .icon-ccw.icon-right a:after, i.icon-ccw:before { content: "\27f2"; height: inherit; }
+
+.icon-cw.icon-left a:before, .icon-cw.icon-right a:after, i.icon-cw:before { content: "\27f3"; height: inherit; }
+
+.icon-arrows-ccw.icon-left a:before, .icon-arrows-ccw.icon-right a:after, i.icon-arrows-ccw:before { content: "🔄"; height: inherit; }
+
+.icon-level-down.icon-left a:before, .icon-level-down.icon-right a:after, i.icon-level-down:before { content: "\21b3"; height: inherit; }
+
+.icon-level-up.icon-left a:before, .icon-level-up.icon-right a:after, i.icon-level-up:before { content: "\21b0"; height: inherit; }
+
+.icon-shuffle.icon-left a:before, .icon-shuffle.icon-right a:after, i.icon-shuffle:before { content: "🔀"; height: inherit; }
+
+.icon-loop.icon-left a:before, .icon-loop.icon-right a:after, i.icon-loop:before { content: "🔁"; height: inherit; }
+
+.icon-switch.icon-left a:before, .icon-switch.icon-right a:after, i.icon-switch:before { content: "\21c6"; height: inherit; }
+
+.icon-play.icon-left a:before, .icon-play.icon-right a:after, i.icon-play:before { content: "\25b6"; height: inherit; }
+
+.icon-stop.icon-left a:before, .icon-stop.icon-right a:after, i.icon-stop:before { content: "\25a0"; height: inherit; }
+
+.icon-pause.icon-left a:before, .icon-pause.icon-right a:after, i.icon-pause:before { content: "\2389"; height: inherit; }
+
+.icon-record.icon-left a:before, .icon-record.icon-right a:after, i.icon-record:before { content: "\26ab"; height: inherit; }
+
+.icon-to-end.icon-left a:before, .icon-to-end.icon-right a:after, i.icon-to-end:before { content: "\23ed"; height: inherit; }
+
+.icon-to-start.icon-left a:before, .icon-to-start.icon-right a:after, i.icon-to-start:before { content: "\23ee"; height: inherit; }
+
+.icon-fast-forward.icon-left a:before, .icon-fast-forward.icon-right a:after, i.icon-fast-forward:before { content: "\23e9"; height: inherit; }
+
+.icon-fast-backward.icon-left a:before, .icon-fast-backward.icon-right a:after, i.icon-fast-backward:before { content: "\23ea"; height: inherit; }
+
+.icon-progress-0.icon-left a:before, .icon-progress-0.icon-right a:after, i.icon-progress-0:before { content: "\e768"; height: inherit; }
+
+.icon-progress-1.icon-left a:before, .icon-progress-1.icon-right a:after, i.icon-progress-1:before { content: "\e769"; height: inherit; }
+
+.icon-progress-2.icon-left a:before, .icon-progress-2.icon-right a:after, i.icon-progress-2:before { content: "\e76a"; height: inherit; }
+
+.icon-progress-3.icon-left a:before, .icon-progress-3.icon-right a:after, i.icon-progress-3:before { content: "\e76b"; height: inherit; }
+
+.icon-target.icon-left a:before, .icon-target.icon-right a:after, i.icon-target:before { content: "🎯"; height: inherit; }
+
+.icon-palette.icon-left a:before, .icon-palette.icon-right a:after, i.icon-palette:before { content: "🎨"; height: inherit; }
+
+.icon-list.icon-left a:before, .icon-list.icon-right a:after, i.icon-list:before { content: "\e005"; height: inherit; }
+
+.icon-list-add.icon-left a:before, .icon-list-add.icon-right a:after, i.icon-list-add:before { content: "\e003"; height: inherit; }
+
+.icon-signal.icon-left a:before, .icon-signal.icon-right a:after, i.icon-signal:before { content: "📶"; height: inherit; }
+
+.icon-trophy.icon-left a:before, .icon-trophy.icon-right a:after, i.icon-trophy:before { content: "🏆"; height: inherit; }
+
+.icon-battery.icon-left a:before, .icon-battery.icon-right a:after, i.icon-battery:before { content: "🔋"; height: inherit; }
+
+.icon-back-in-time.icon-left a:before, .icon-back-in-time.icon-right a:after, i.icon-back-in-time:before { content: "\e771"; height: inherit; }
+
+.icon-monitor.icon-left a:before, .icon-monitor.icon-right a:after, i.icon-monitor:before { content: "💻"; height: inherit; }
+
+.icon-mobile.icon-left a:before, .icon-mobile.icon-right a:after, i.icon-mobile:before { content: "📱"; height: inherit; }
+
+.icon-network.icon-left a:before, .icon-network.icon-right a:after, i.icon-network:before { content: "\e776"; height: inherit; }
+
+.icon-cd.icon-left a:before, .icon-cd.icon-right a:after, i.icon-cd:before { content: "💿"; height: inherit; }
+
+.icon-inbox.icon-left a:before, .icon-inbox.icon-right a:after, i.icon-inbox:before { content: "\e777"; height: inherit; }
+
+.icon-install.icon-left a:before, .icon-install.icon-right a:after, i.icon-install:before { content: "\e778"; height: inherit; }
+
+.icon-globe.icon-left a:before, .icon-globe.icon-right a:after, i.icon-globe:before { content: "🌎"; height: inherit; }
+
+.icon-cloud.icon-left a:before, .icon-cloud.icon-right a:after, i.icon-cloud:before { content: "\2601"; height: inherit; }
+
+.icon-cloud-thunder.icon-left a:before, .icon-cloud-thunder.icon-right a:after, i.icon-cloud-thunder:before { content: "\26c8"; height: inherit; }
+
+.icon-flash.icon-left a:before, .icon-flash.icon-right a:after, i.icon-flash:before { content: "\26a1"; height: inherit; }
+
+.icon-moon.icon-left a:before, .icon-moon.icon-right a:after, i.icon-moon:before { content: "\263d"; height: inherit; }
+
+.icon-flight.icon-left a:before, .icon-flight.icon-right a:after, i.icon-flight:before { content: "\2708"; height: inherit; }
+
+.icon-paper-plane.icon-left a:before, .icon-paper-plane.icon-right a:after, i.icon-paper-plane:before { content: "\e79b"; height: inherit; }
+
+.icon-leaf.icon-left a:before, .icon-leaf.icon-right a:after, i.icon-leaf:before { content: "🍂"; height: inherit; }
+
+.icon-lifebuoy.icon-left a:before, .icon-lifebuoy.icon-right a:after, i.icon-lifebuoy:before { content: "\e788"; height: inherit; }
+
+.icon-mouse.icon-left a:before, .icon-mouse.icon-right a:after, i.icon-mouse:before { content: "\e789"; height: inherit; }
+
+.icon-briefcase.icon-left a:before, .icon-briefcase.icon-right a:after, i.icon-briefcase:before { content: "💼"; height: inherit; }
+
+.icon-suitcase.icon-left a:before, .icon-suitcase.icon-right a:after, i.icon-suitcase:before { content: "\e78e"; height: inherit; }
+
+.icon-dot.icon-left a:before, .icon-dot.icon-right a:after, i.icon-dot:before { content: "\e78b"; height: inherit; }
+
+.icon-dot-2.icon-left a:before, .icon-dot-2.icon-right a:after, i.icon-dot-2:before { content: "\e78c"; height: inherit; }
+
+.icon-dot-3.icon-left a:before, .icon-dot-3.icon-right a:after, i.icon-dot-3:before { content: "\e78d"; height: inherit; }
+
+.icon-brush.icon-left a:before, .icon-brush.icon-right a:after, i.icon-brush:before { content: "\e79a"; height: inherit; }
+
+.icon-magnet.icon-left a:before, .icon-magnet.icon-right a:after, i.icon-magnet:before { content: "\e7a1"; height: inherit; }
+
+.icon-infinity.icon-left a:before, .icon-infinity.icon-right a:after, i.icon-infinity:before { content: "\221e"; height: inherit; }
+
+.icon-erase.icon-left a:before, .icon-erase.icon-right a:after, i.icon-erase:before { content: "\232b"; height: inherit; }
+
+.icon-chart-pie.icon-left a:before, .icon-chart-pie.icon-right a:after, i.icon-chart-pie:before { content: "\e751"; height: inherit; }
+
+.icon-chart-line.icon-left a:before, .icon-chart-line.icon-right a:after, i.icon-chart-line:before { content: "📈"; height: inherit; }
+
+.icon-chart-bar.icon-left a:before, .icon-chart-bar.icon-right a:after, i.icon-chart-bar:before { content: "📊"; height: inherit; }
+
+.icon-chart-area.icon-left a:before, .icon-chart-area.icon-right a:after, i.icon-chart-area:before { content: "🔾"; height: inherit; }
+
+.icon-tape.icon-left a:before, .icon-tape.icon-right a:after, i.icon-tape:before { content: "\2707"; height: inherit; }
+
+.icon-graduation-cap.icon-left a:before, .icon-graduation-cap.icon-right a:after, i.icon-graduation-cap:before { content: "🎓"; height: inherit; }
+
+.icon-language.icon-left a:before, .icon-language.icon-right a:after, i.icon-language:before { content: "\e752"; height: inherit; }
+
+.icon-ticket.icon-left a:before, .icon-ticket.icon-right a:after, i.icon-ticket:before { content: "🎫"; height: inherit; }
+
+.icon-water.icon-left a:before, .icon-water.icon-right a:after, i.icon-water:before { content: "💦"; height: inherit; }
+
+.icon-droplet.icon-left a:before, .icon-droplet.icon-right a:after, i.icon-droplet:before { content: "💧"; height: inherit; }
+
+.icon-air.icon-left a:before, .icon-air.icon-right a:after, i.icon-air:before { content: "\e753"; height: inherit; }
+
+.icon-credit-card.icon-left a:before, .icon-credit-card.icon-right a:after, i.icon-credit-card:before { content: "💳"; height: inherit; }
+
+.icon-floppy.icon-left a:before, .icon-floppy.icon-right a:after, i.icon-floppy:before { content: "💾"; height: inherit; }
+
+.icon-clipboard.icon-left a:before, .icon-clipboard.icon-right a:after, i.icon-clipboard:before { content: "📋"; height: inherit; }
+
+.icon-megaphone.icon-left a:before, .icon-megaphone.icon-right a:after, i.icon-megaphone:before { content: "📣"; height: inherit; }
+
+.icon-database.icon-left a:before, .icon-database.icon-right a:after, i.icon-database:before { content: "\e754"; height: inherit; }
+
+.icon-drive.icon-left a:before, .icon-drive.icon-right a:after, i.icon-drive:before { content: "\e755"; height: inherit; }
+
+.icon-bucket.icon-left a:before, .icon-bucket.icon-right a:after, i.icon-bucket:before { content: "\e756"; height: inherit; }
+
+.icon-thermometer.icon-left a:before, .icon-thermometer.icon-right a:after, i.icon-thermometer:before { content: "\e757"; height: inherit; }
+
+.icon-key.icon-left a:before, .icon-key.icon-right a:after, i.icon-key:before { content: "🔑"; height: inherit; }
+
+.icon-flow-cascade.icon-left a:before, .icon-flow-cascade.icon-right a:after, i.icon-flow-cascade:before { content: "\e790"; height: inherit; }
+
+.icon-flow-branch.icon-left a:before, .icon-flow-branch.icon-right a:after, i.icon-flow-branch:before { content: "\e791"; height: inherit; }
+
+.icon-flow-tree.icon-left a:before, .icon-flow-tree.icon-right a:after, i.icon-flow-tree:before { content: "\e792"; height: inherit; }
+
+.icon-flow-line.icon-left a:before, .icon-flow-line.icon-right a:after, i.icon-flow-line:before { content: "\e793"; height: inherit; }
+
+.icon-flow-parallel.icon-left a:before, .icon-flow-parallel.icon-right a:after, i.icon-flow-parallel:before { content: "\e794"; height: inherit; }
+
+.icon-rocket.icon-left a:before, .icon-rocket.icon-right a:after, i.icon-rocket:before { content: "🚀"; height: inherit; }
+
+.icon-gauge.icon-left a:before, .icon-gauge.icon-right a:after, i.icon-gauge:before { content: "\e7a2"; height: inherit; }
+
+.icon-traffic-cone.icon-left a:before, .icon-traffic-cone.icon-right a:after, i.icon-traffic-cone:before { content: "\e7a3"; height: inherit; }
+
+.icon-cc.icon-left a:before, .icon-cc.icon-right a:after, i.icon-cc:before { content: "\e7a5"; height: inherit; }
+
+.icon-cc-by.icon-left a:before, .icon-cc-by.icon-right a:after, i.icon-cc-by:before { content: "\e7a6"; height: inherit; }
+
+.icon-cc-nc.icon-left a:before, .icon-cc-nc.icon-right a:after, i.icon-cc-nc:before { content: "\e7a7"; height: inherit; }
+
+.icon-cc-nc-eu.icon-left a:before, .icon-cc-nc-eu.icon-right a:after, i.icon-cc-nc-eu:before { content: "\e7a8"; height: inherit; }
+
+.icon-cc-nc-jp.icon-left a:before, .icon-cc-nc-jp.icon-right a:after, i.icon-cc-nc-jp:before { content: "\e7a9"; height: inherit; }
+
+.icon-cc-sa.icon-left a:before, .icon-cc-sa.icon-right a:after, i.icon-cc-sa:before { content: "\e7aa"; height: inherit; }
+
+.icon-cc-nd.icon-left a:before, .icon-cc-nd.icon-right a:after, i.icon-cc-nd:before { content: "\e7ab"; height: inherit; }
+
+.icon-cc-pd.icon-left a:before, .icon-cc-pd.icon-right a:after, i.icon-cc-pd:before { content: "\e7ac"; height: inherit; }
+
+.icon-cc-zero.icon-left a:before, .icon-cc-zero.icon-right a:after, i.icon-cc-zero:before { content: "\e7ad"; height: inherit; }
+
+.icon-cc-share.icon-left a:before, .icon-cc-share.icon-right a:after, i.icon-cc-share:before { content: "\e7ae"; height: inherit; }
+
+.icon-cc-remix.icon-left a:before, .icon-cc-remix.icon-right a:after, i.icon-cc-remix:before { content: "\e7af"; height: inherit; }
+
+.icon-github.icon-left a:before, .icon-github.icon-right a:after, i.icon-github:before { content: "\f300"; height: inherit; }
+
+.icon-github-circled.icon-left a:before, .icon-github-circled.icon-right a:after, i.icon-github-circled:before { content: "\f301"; height: inherit; }
+
+.icon-flickr.icon-left a:before, .icon-flickr.icon-right a:after, i.icon-flickr:before { content: "\f303"; height: inherit; }
+
+.icon-flickr-circled.icon-left a:before, .icon-flickr-circled.icon-right a:after, i.icon-flickr-circled:before { content: "\f304"; height: inherit; }
+
+.icon-vimeo.icon-left a:before, .icon-vimeo.icon-right a:after, i.icon-vimeo:before { content: "\f306"; height: inherit; }
+
+.icon-vimeo-circled.icon-left a:before, .icon-vimeo-circled.icon-right a:after, i.icon-vimeo-circled:before { content: "\f307"; height: inherit; }
+
+.icon-twitter.icon-left a:before, .icon-twitter.icon-right a:after, i.icon-twitter:before { content: "\f309"; height: inherit; }
+
+.icon-twitter-circled.icon-left a:before, .icon-twitter-circled.icon-right a:after, i.icon-twitter-circled:before { content: "\f30a"; height: inherit; }
+
+.icon-facebook.icon-left a:before, .icon-facebook.icon-right a:after, i.icon-facebook:before { content: "\f30c"; height: inherit; }
+
+.icon-facebook-circled.icon-left a:before, .icon-facebook-circled.icon-right a:after, i.icon-facebook-circled:before { content: "\f30d"; height: inherit; }
+
+.icon-facebook-squared.icon-left a:before, .icon-facebook-squared.icon-right a:after, i.icon-facebook-squared:before { content: "\f30e"; height: inherit; }
+
+.icon-gplus.icon-left a:before, .icon-gplus.icon-right a:after, i.icon-gplus:before { content: "\f30f"; height: inherit; }
+
+.icon-gplus-circled.icon-left a:before, .icon-gplus-circled.icon-right a:after, i.icon-gplus-circled:before { content: "\f310"; height: inherit; }
+
+.icon-pinterest.icon-left a:before, .icon-pinterest.icon-right a:after, i.icon-pinterest:before { content: "\f312"; height: inherit; }
+
+.icon-pinterest-circled.icon-left a:before, .icon-pinterest-circled.icon-right a:after, i.icon-pinterest-circled:before { content: "\f313"; height: inherit; }
+
+.icon-tumblr.icon-left a:before, .icon-tumblr.icon-right a:after, i.icon-tumblr:before { content: "\f315"; height: inherit; }
+
+.icon-tumblr-circled.icon-left a:before, .icon-tumblr-circled.icon-right a:after, i.icon-tumblr-circled:before { content: "\f316"; height: inherit; }
+
+.icon-linkedin.icon-left a:before, .icon-linkedin.icon-right a:after, i.icon-linkedin:before { content: "\f318"; height: inherit; }
+
+.icon-linkedin-circled.icon-left a:before, .icon-linkedin-circled.icon-right a:after, i.icon-linkedin-circled:before { content: "\f319"; height: inherit; }
+
+.icon-dribbble.icon-left a:before, .icon-dribbble.icon-right a:after, i.icon-dribbble:before { content: "\f31b"; height: inherit; }
+
+.icon-dribbble-circled.icon-left a:before, .icon-dribbble-circled.icon-right a:after, i.icon-dribbble-circled:before { content: "\f31c"; height: inherit; }
+
+.icon-stumbleupon.icon-left a:before, .icon-stumbleupon.icon-right a:after, i.icon-stumbleupon:before { content: "\f31e"; height: inherit; }
+
+.icon-stumbleupon-circled.icon-left a:before, .icon-stumbleupon-circled.icon-right a:after, i.icon-stumbleupon-circled:before { content: "\f31f"; height: inherit; }
+
+.icon-lastfm.icon-left a:before, .icon-lastfm.icon-right a:after, i.icon-lastfm:before { content: "\f321"; height: inherit; }
+
+.icon-lastfm-circled.icon-left a:before, .icon-lastfm-circled.icon-right a:after, i.icon-lastfm-circled:before { content: "\f322"; height: inherit; }
+
+.icon-rdio.icon-left a:before, .icon-rdio.icon-right a:after, i.icon-rdio:before { content: "\f324"; height: inherit; }
+
+.icon-rdio-circled.icon-left a:before, .icon-rdio-circled.icon-right a:after, i.icon-rdio-circled:before { content: "\f325"; height: inherit; }
+
+.icon-spotify.icon-left a:before, .icon-spotify.icon-right a:after, i.icon-spotify:before { content: "\f327"; height: inherit; }
+
+.icon-spotify-circled.icon-left a:before, .icon-spotify-circled.icon-right a:after, i.icon-spotify-circled:before { content: "\f328"; height: inherit; }
+
+.icon-qq.icon-left a:before, .icon-qq.icon-right a:after, i.icon-qq:before { content: "\f32a"; height: inherit; }
+
+.icon-instagram.icon-left a:before, .icon-instagram.icon-right a:after, i.icon-instagram:before { content: "\f32d"; height: inherit; }
+
+.icon-dropbox.icon-left a:before, .icon-dropbox.icon-right a:after, i.icon-dropbox:before { content: "\f330"; height: inherit; }
+
+.icon-evernote.icon-left a:before, .icon-evernote.icon-right a:after, i.icon-evernote:before { content: "\f333"; height: inherit; }
+
+.icon-flattr.icon-left a:before, .icon-flattr.icon-right a:after, i.icon-flattr:before { content: "\f336"; height: inherit; }
+
+.icon-skype.icon-left a:before, .icon-skype.icon-right a:after, i.icon-skype:before { content: "\f339"; height: inherit; }
+
+.icon-skype-circled.icon-left a:before, .icon-skype-circled.icon-right a:after, i.icon-skype-circled:before { content: "\f33a"; height: inherit; }
+
+.icon-renren.icon-left a:before, .icon-renren.icon-right a:after, i.icon-renren:before { content: "\f33c"; height: inherit; }
+
+.icon-sina-weibo.icon-left a:before, .icon-sina-weibo.icon-right a:after, i.icon-sina-weibo:before { content: "\f33f"; height: inherit; }
+
+.icon-paypal.icon-left a:before, .icon-paypal.icon-right a:after, i.icon-paypal:before { content: "\f342"; height: inherit; }
+
+.icon-picasa.icon-left a:before, .icon-picasa.icon-right a:after, i.icon-picasa:before { content: "\f345"; height: inherit; }
+
+.icon-soundcloud.icon-left a:before, .icon-soundcloud.icon-right a:after, i.icon-soundcloud:before { content: "\f348"; height: inherit; }
+
+.icon-mixi.icon-left a:before, .icon-mixi.icon-right a:after, i.icon-mixi:before { content: "\f34b"; height: inherit; }
+
+.icon-behance.icon-left a:before, .icon-behance.icon-right a:after, i.icon-behance:before { content: "\f34e"; height: inherit; }
+
+.icon-google-circles.icon-left a:before, .icon-google-circles.icon-right a:after, i.icon-google-circles:before { content: "\f351"; height: inherit; }
+
+.icon-vkontakte.icon-left a:before, .icon-vkontakte.icon-right a:after, i.icon-vkontakte:before { content: "\f354"; height: inherit; }
+
+.icon-smashing.icon-left a:before, .icon-smashing.icon-right a:after, i.icon-smashing:before { content: "\f357"; height: inherit; }
+
+.icon-sweden.icon-left a:before, .icon-sweden.icon-right a:after, i.icon-sweden:before { content: "\f601"; height: inherit; }
+
+.icon-db-shape.icon-left a:before, .icon-db-shape.icon-right a:after, i.icon-db-shape:before { content: "\f600"; height: inherit; }
+
+.icon-logo-db.icon-left a:before, .icon-logo-db.icon-right a:after, i.icon-logo-db:before { content: "\f603"; height: inherit; }
+
+.fixed { position: fixed; }
+.fixed.pinned { position: absolute; }
+@media only screen and (max-width: 768px) { .fixed { position: relative !important; top: auto !important; left: auto !important; } }
+
+.unfixed { position: relative !important; top: auto !important; left: auto !important; }
+
+.text-center { text-align: center; }
+
+.text-left { text-align: left; }
+
+.text-right { text-align: right; }
+
+/* Fonts */
+@font-face { font-family: "entypo"; font-style: normal; font-weight: 400; src: url(../fonts/icons/entypo.eot); src: url("../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), url("../fonts/icons/entypo.woff") format("woff"), url("../fonts/icons/entypo.ttf") format("truetype"); }
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 { font-family: "Open Sans"; font-weight: 300; color: #444444; text-rendering: optimizeLegibility; padding-top: 0.273em; line-height: 1.15538em; padding-bottom: 0.273em; }
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #d04526; }
+
+@media only screen and (max-width: 767px) { h1, h2, h3, h4, h5, h6 { word-wrap: break-word; } }
+h1 { font-size: 68px; font-size: 4.25rem; }
+h1.xlarge { font-size: 110px; font-size: 6.875rem; }
+h1.xxlarge { font-size: 126px; font-size: 7.875rem; }
+h1.absurd { font-size: 177px; font-size: 11.0625rem; }
+
+h2 { font-size: 42px; font-size: 2.625rem; }
+
+h3 { font-size: 30px; font-size: 1.875rem; }
+
+h4 { font-size: 26px; font-size: 1.625rem; }
+
+h5 { font-size: 18px; font-size: 1.125rem; }
+
+h6 { font-size: 16px; font-size: 1rem; }
+
+@media only screen and (max-width: 767px) { h1 { font-size: 42px; font-size: 2.625rem; }
+  h2 { font-size: 36px; font-size: 2.25rem; } }
+.subhead { color: #777; font-weight: normal; margin-bottom: 20px; }
+
+/*=====================================================  Links & Paragraph styles  ======================================================*/
+p { font-family: "Open Sans"; font-weight: 400; font-size: 16px; font-size: 1rem; margin-bottom: 13px; line-height: 1.625em; }
+p.lead { font-size: 20px; font-size: 1.25rem; margin-bottom: 18px; }
+@media only screen and (max-width: 768px) { p { font-size: 17.6px; font-size: 1.1rem; line-height: 1.625em; } }
+
+a { color: #d04526; text-decoration: none; outline: 0; line-height: inherit; }
+a:hover { color: #c03d20; }
+
+/*=====================================================
+ Lists  ======================================================*/
+ul, ol { margin-bottom: 0.273em; }
+
+ul { list-style: none outside; }
+
+ol { list-style: decimal; margin-left: 30px; }
+
+ul.square, ul.circle, ul.disc { margin-left: 25px; }
+ul.square { list-style: square outside; }
+ul.circle { list-style: circle outside; }
+ul.disc { list-style: disc outside; }
+ul ul { margin: 4px 0 5px 25px; }
+
+ol ol { margin: 4px 0 5px 30px; }
+
+li { padding-bottom: 0.273em; }
+
+ul.large li { line-height: 21px; }
+
+dl dt { font-weight: bold; font-size: 16px; font-size: 1rem; }
+
+@media only screen and (max-width: 768px) { ul, ol, dl, p { text-align: left; } }
+/* Mobile */
+em { font-style: italic; line-height: inherit; }
+
+strong { font-weight: 700; line-height: inherit; }
+
+small { font-size: 56.4%; line-height: inherit; }
+
+h1 small, h2 small, h3 small, h4 small, h5 small { color: #777; }
+
+/*  Blockquotes  */
+blockquote { line-height: 20px; color: #777; margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 5px solid #cccccc; }
+blockquote p { line-height: 20px; color: #777; }
+blockquote cite { display: block; font-size: 12px; font-size: 1.2rem; color: #555555; }
+blockquote cite:before { content: "\2014 \0020"; }
+blockquote cite a { color: #555555; }
+blockquote cite a:visited { color: #555555; }
+
+hr { border: 1px solid #cccccc; clear: both; margin: 16px 0 18px; height: 0; }
+
+abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #cccccc; cursor: help; }
+
+abbr { text-transform: none; }
+
+/** Print styles.  Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */
+@media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
+  /* Black prints faster: sanbeiji.com/archives/953 */
+  p a { color: #555555 !important; text-decoration: underline; }
+  p a:visited { color: #555555 !important; text-decoration: underline; }
+  p a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
+  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; }
+  /* css-discuss.incutio.com/wiki/Printing_Tables */
+  tr, img { page-break-inside: avoid; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; } }
+.row .pull_one.one.column:first-child, .row .pull_one.two.columns:first-child, .row .pull_one.three.columns:first-child, .row .pull_one.four.columns:first-child, .row .pull_one.five.columns:first-child, .row .pull_one.six.columns:first-child, .row .pull_one.seven.columns:first-child, .row .pull_one.eight.columns:first-child, .row .pull_one.nine.columns:first-child, .row .pull_one.ten.columns:first-child, .row .pull_two.one.column:first-child, .row .pull_two.two.columns:first-child, .row .pull_two.three.columns:first-child, .row .pull_two.four.columns:first-child, .row .pull_two.five.columns:first-child, .row .pull_two.six.columns:first-child, .row .pull_two.seven.columns:first-child, .row .pull_two.eight.columns:first-child, .row .pull_two.nine.columns:first-child, .row .pull_two.eleven.columns:first-child, .row .pull_three.one.column:first-child, .row .pull_three.two.columns:first-child, .row .pull_three.three.columns:first-child, .row .pull_three.four.columns:first-child, .row .pull_three.five.columns:first-child, .row .pull_three.six.columns:first-child, .row .pull_three.seven.columns:first-child, .row .pull_three.eight.columns:first-child, .row .pull_three.ten.columns:first-child, .row .pull_three.eleven.columns:first-child, .row .pull_four.one.column:first-child, .row .pull_four.two.columns:first-child, .row .pull_four.three.columns:first-child, .row .pull_four.four.columns:first-child, .row .pull_four.five.columns:first-child, .row .pull_four.six.columns:first-child, .row .pull_four.seven.columns:first-child, .row .pull_four.nine.columns:first-child, .row .pull_four.ten.columns:first-child, .row .pull_four.eleven.columns:first-child, .row .pull_five.one.column:first-child, .row .pull_five.two.columns:first-child, .row .pull_five.three.columns:first-child, .row .pull_five.four.columns:first-child, .row .pull_five.five.columns:first-child, .row .pull_five.six.columns:first-child, .row .pull_five.eight.columns:first-child, .row .pull_five.nine.columns:first-child, .row .pull_five.ten.columns:first-child, .row .pull_five.eleven.columns:first-child, .row .pull_six.one.column:first-child, .row .pull_six.two.columns:first-child, .row .pull_six.three.columns:first-child, .row .pull_six.four.columns:first-child, .row .pull_six.five.columns:first-child, .row .pull_six.seven.columns:first-child, .row .pull_six.eight.columns:first-child, .row .pull_six.nine.columns:first-child, .row .pull_six.ten.columns:first-child, .row .pull_six.eleven.columns:first-child, .row .pull_seven.one.column:first-child, .row .pull_seven.two.columns:first-child, .row .pull_seven.three.columns:first-child, .row .pull_seven.four.columns:first-child, .row .pull_seven.six.columns:first-child, .row .pull_seven.seven.columns:first-child, .row .pull_seven.eight.columns:first-child, .row .pull_seven.nine.columns:first-child, .row .pull_seven.ten.columns:first-child, .row .pull_seven.eleven.columns:first-child, .row .pull_eight.one.column:first-child, .row .pull_eight.two.columns:first-child, .row .pull_eight.three.columns:first-child, .row .pull_eight.five.columns:first-child, .row .pull_eight.six.columns:first-child, .row .pull_eight.seven.columns:first-child, .row .pull_eight.eight.columns:first-child, .row .pull_eight.nine.columns:first-child, .row .pull_eight.ten.columns:first-child, .row .pull_eight.eleven.columns:first-child, .row .pull_nine.one.column:first-child, .row .pull_nine.two.columns:first-child, .row .pull_nine.four.columns:first-child, .row .pull_nine.five.columns:first-child, .row .pull_nine.six.columns:first-child, .row .pull_nine.seven.columns:first-child, .row .pull_nine.eight.columns:first-child, .row .pull_nine.nine.columns:first-child, .row .pull_nine.ten.columns:first-child, .row .pull_nine.eleven.columns:first-child, .row .pull_ten.one.column:first-child, .row .pull_ten.three.columns:first-child, .row .pull_ten.four.columns:first-child, .row .pull_ten.five.columns:first-child, .row .pull_ten.six.columns:first-child, .row .pull_ten.seven.columns:first-child, .row .pull_ten.eight.columns:first-child, .row .pull_ten.nine.columns:first-child, .row .pull_ten.ten.columns:first-child, .row .pull_ten.eleven.columns:first-child, .row .pull_eleven.two.columns:first-child, .row .pull_eleven.three.columns:first-child, .row .pull_eleven.four.columns:first-child, .row .pull_eleven.five.columns:first-child, .row .pull_eleven.six.columns:first-child, .row .pull_eleven.seven.columns:first-child, .row .pull_eleven.eight.columns:first-child, .row .pull_eleven.nine.columns:first-child, .row .pull_eleven.ten.columns:first-child, .row .pull_eleven.eleven.columns:first-child, .sixteen.colgrid .row .pull_one.one.column:first-child, .sixteen.colgrid .row .pull_one.two.columns:first-child, .sixteen.colgrid .row .pull_one.three.columns:first-child, .sixteen.colgrid .row .pull_one.four.columns:first-child, .sixteen.colgrid .row .pull_one.five.columns:first-child, .sixteen.colgrid .row .pull_one.six.columns:first-child, .sixteen.colgrid .row .pull_one.seven.columns:first-child, .sixteen.colgrid .row .pull_one.eight.columns:first-child, .sixteen.colgrid .row .pull_one.nine.columns:first-child, .sixteen.colgrid .row .pull_one.ten.columns:first-child, .sixteen.colgrid .row .pull_one.eleven.columns:first-child, .sixteen.colgrid .row .pull_one.twelve.columns:first-child, .sixteen.colgrid .row .pull_one.thirteen.columns:first-child, .sixteen.colgrid .row .pull_one.fourteen.columns:first-child, .sixteen.colgrid .row .pull_two.one.column:first-child, .sixteen.colgrid .row .pull_two.two.columns:first-child, .sixteen.colgrid .row .pull_two.three.columns:first-child, .sixteen.colgrid .row .pull_two.four.columns:first-child, .sixteen.colgrid .row .pull_two.five.columns:first-child, .sixteen.colgrid .row .pull_two.six.columns:first-child, .sixteen.colgrid .row .pull_two.seven.columns:first-child, .sixteen.colgrid .row .pull_two.eight.columns:first-child, .sixteen.colgrid .row .pull_two.nine.columns:first-child, .sixteen.colgrid .row .pull_two.ten.columns:first-child, .sixteen.colgrid .row .pull_two.eleven.columns:first-child, .sixteen.colgrid .row .pull_two.twelve.columns:first-child, .sixteen.colgrid .row .pull_two.thirteen.columns:first-child, .sixteen.colgrid .row .pull_two.fifteen.columns:first-child, .sixteen.colgrid .row .pull_three.one.column:first-child, .sixteen.colgrid .row .pull_three.two.columns:first-child, .sixteen.colgrid .row .pull_three.three.columns:first-child, .sixteen.colgrid .row .pull_three.four.columns:first-child, .sixteen.colgrid .row .pull_three.five.columns:first-child, .sixteen.colgrid .row .pull_three.six.columns:first-child, .sixteen.colgrid .row .pull_three.seven.columns:first-child, .sixteen.colgrid .row .pull_three.eight.columns:first-child, .sixteen.colgrid .row .pull_three.nine.columns:first-child, .sixteen.colgrid .row .pull_three.ten.columns:first-child, .sixteen.colgrid .row .pull_three.eleven.columns:first-child, .sixteen.colgrid .row .pull_three.twelve.columns:first-child, .sixteen.colgrid .row .pull_three.fourteen.columns:first-child, .sixteen.colgrid .row .pull_three.fifteen.columns:first-child, .sixteen.colgrid .row .pull_four.one.column:first-child, .sixteen.colgrid .row .pull_four.two.columns:first-child, .sixteen.colgrid .row .pull_four.three.columns:first-child, .sixteen.colgrid .row .pull_four.four.columns:first-child, .sixteen.colgrid .row .pull_four.five.columns:first-child, .sixteen.colgrid .row .pull_four.six.columns:first-child, .sixteen.colgrid .row .pull_four.seven.columns:first-child, .sixteen.colgrid .row .pull_four.eight.columns:first-child, .sixteen.colgrid .row .pull_four.nine.columns:first-child, .sixteen.colgrid .row .pull_four.ten.columns:first-child, .sixteen.colgrid .row .pull_four.eleven.columns:first-child, .sixteen.colgrid .row .pull_four.thirteen.columns:first-child, .sixteen.colgrid .row .pull_four.fourteen.columns:first-child, .sixteen.colgrid .row .pull_four.fifteen.columns:first-child, .sixteen.colgrid .row .pull_five.one.column:first-child, .sixteen.colgrid .row .pull_five.two.columns:first-child, .sixteen.colgrid .row .pull_five.three.columns:first-child, .sixteen.colgrid .row .pull_five.four.columns:first-child, .sixteen.colgrid .row .pull_five.five.columns:first-child, .sixteen.colgrid .row .pull_five.six.columns:first-child, .sixteen.colgrid .row .pull_five.seven.columns:first-child, .sixteen.colgrid .row .pull_five.eight.columns:first-child, .sixteen.colgrid .row .pull_five.nine.columns:first-child, .sixteen.colgrid .row .pull_five.ten.columns:first-child, .sixteen.colgrid .row .pull_five.twelve.columns:first-child, .sixteen.colgrid .row .pull_five.thirteen.columns:first-child, .sixteen.colgrid .row .pull_five.fourteen.columns:first-child, .sixteen.colgrid .row .pull_five.fifteen.columns:first-child, .sixteen.colgrid .row .pull_six.one.column:first-child, .sixteen.colgrid .row .pull_six.two.columns:first-child, .sixteen.colgrid .row .pull_six.three.columns:first-child, .sixteen.colgrid .row .pull_six.four.columns:first-child, .sixteen.colgrid .row .pull_six.five.columns:first-child, .sixteen.colgrid .row .pull_six.six.columns:first-child, .sixteen.colgrid .row .pull_six.seven.columns:first-child, .sixteen.colgrid .row .pull_six.eight.columns:first-child, .sixteen.colgrid .row .pull_six.nine.columns:first-child, .sixteen.colgrid .row .pull_six.eleven.columns:first-child, .sixteen.colgrid .row .pull_six.twelve.columns:first-child, .sixteen.colgrid .row .pull_six.thirteen.columns:first-child, .sixteen.colgrid .row .pull_six.fourteen.columns:first-child, .sixteen.colgrid .row .pull_six.fifteen.columns:first-child, .sixteen.colgrid .row .pull_seven.one.column:first-child, .sixteen.colgrid .row .pull_seven.two.columns:first-child, .sixteen.colgrid .row .pull_seven.three.columns:first-child, .sixteen.colgrid .row .pull_seven.four.columns:first-child, .sixteen.colgrid .row .pull_seven.five.columns:first-child, .sixteen.colgrid .row .pull_seven.six.columns:first-child, .sixteen.colgrid .row .pull_seven.seven.columns:first-child, .sixteen.colgrid .row .pull_seven.eight.columns:first-child, .sixteen.colgrid .row .pull_seven.ten.columns:first-child, .sixteen.colgrid .row .pull_seven.eleven.columns:first-child, .sixteen.colgrid .row .pull_seven.twelve.columns:first-child, .sixteen.colgrid .row .pull_seven.thirteen.columns:first-child, .sixteen.colgrid .row .pull_seven.fourteen.columns:first-child, .sixteen.colgrid .row .pull_seven.fifteen.columns:first-child, .sixteen.colgrid .row .pull_eight.one.column:first-child, .sixteen.colgrid .row .pull_eight.two.columns:first-child, .sixteen.colgrid .row .pull_eight.three.columns:first-child, .sixteen.colgrid .row .pull_eight.four.columns:first-child, .sixteen.colgrid .row .pull_eight.five.columns:first-child, .sixteen.colgrid .row .pull_eight.six.columns:first-child, .sixteen.colgrid .row .pull_eight.seven.columns:first-child, .sixteen.colgrid .row .pull_eight.nine.columns:first-child, .sixteen.colgrid .row .pull_eight.ten.columns:first-child, .sixteen.colgrid .row .pull_eight.eleven.columns:first-child, .sixteen.colgrid .row .pull_eight.twelve.columns:first-child, .sixteen.colgrid .row .pull_eight.thirteen.columns:first-child, .sixteen.colgrid .row .pull_eight.fourteen.columns:first-child, .sixteen.colgrid .row .pull_eight.fifteen.columns:first-child, .sixteen.colgrid .row .pull_nine.one.column:first-child, .sixteen.colgrid .row .pull_nine.two.columns:first-child, .sixteen.colgrid .row .pull_nine.three.columns:first-child, .sixteen.colgrid .row .pull_nine.four.columns:first-child, .sixteen.colgrid .row .pull_nine.five.columns:first-child, .sixteen.colgrid .row .pull_nine.six.columns:first-child, .sixteen.colgrid .row .pull_nine.eight.columns:first-child, .sixteen.colgrid .row .pull_nine.nine.columns:first-child, .sixteen.colgrid .row .pull_nine.ten.columns:first-child, .sixteen.colgrid .row .pull_nine.eleven.columns:first-child, .sixteen.colgrid .row .pull_nine.twelve.columns:first-child, .sixteen.colgrid .row .pull_nine.thirteen.columns:first-child, .sixteen.colgrid .row .pull_nine.fourteen.columns:first-child, .sixteen.colgrid .row .pull_nine.fifteen.columns:first-child, .sixteen.colgrid .row .pull_ten.one.column:first-child, .sixteen.colgrid .row .pull_ten.two.columns:first-child, .sixteen.colgrid .row .pull_ten.three.columns:first-child, .sixteen.colgrid .row .pull_ten.four.columns:first-child, .sixteen.colgrid .row .pull_ten.five.columns:first-child, .sixteen.colgrid .row .pull_ten.seven.columns:first-child, .sixteen.colgrid .row .pull_ten.eight.columns:first-child, .sixteen.colgrid .row .pull_ten.nine.columns:first-child, .sixteen.colgrid .row .pull_ten.ten.columns:first-child, .sixteen.colgrid .row .pull_ten.eleven.columns:first-child, .sixteen.colgrid .row .pull_ten.twelve.columns:first-child, .sixteen.colgrid .row .pull_ten.thirteen.columns:first-child, .sixteen.colgrid .row .pull_ten.fourteen.columns:first-child, .sixteen.colgrid .row .pull_ten.fifteen.columns:first-child, .sixteen.colgrid .row .pull_eleven.one.column:first-child, .sixteen.colgrid .row .pull_eleven.two.columns:first-child, .sixteen.colgrid .row .pull_eleven.three.columns:first-child, .sixteen.colgrid .row .pull_eleven.four.columns:first-child, .sixteen.colgrid .row .pull_eleven.six.columns:first-child, .sixteen.colgrid .row .pull_eleven.seven.columns:first-child, .sixteen.colgrid .row .pull_eleven.eight.columns:first-child, .sixteen.colgrid .row .pull_eleven.nine.columns:first-child, .sixteen.colgrid .row .pull_eleven.ten.columns:first-child, .sixteen.colgrid .row .pull_eleven.eleven.columns:first-child, .sixteen.colgrid .row .pull_eleven.twelve.columns:first-child, .sixteen.colgrid .row .pull_eleven.thirteen.columns:first-child, .sixteen.colgrid .row .pull_eleven.fourteen.columns:first-child, .sixteen.colgrid .row .pull_eleven.fifteen.columns:first-child, .sixteen.colgrid .row .pull_twelve.one.column:first-child, .sixteen.colgrid .row .pull_twelve.two.columns:first-child, .sixteen.colgrid .row .pull_twelve.three.columns:first-child, .sixteen.colgrid .row .pull_twelve.five.columns:first-child, .sixteen.colgrid .row .pull_twelve.six.columns:first-child, .sixteen.colgrid .row .pull_twelve.seven.columns:first-child, .sixteen.colgrid .row .pull_twelve.eight.columns:first-child, .sixteen.colgrid .row .pull_twelve.nine.columns:first-child, .sixteen.colgrid .row .pull_twelve.ten.columns:first-child, .sixteen.colgrid .row .pull_twelve.eleven.columns:first-child, .sixteen.colgrid .row .pull_twelve.twelve.columns:first-child, .sixteen.colgrid .row .pull_twelve.thirteen.columns:first-child, .sixteen.colgrid .row .pull_twelve.fourteen.columns:first-child, .sixteen.colgrid .row .pull_twelve.fifteen.columns:first-child, .sixteen.colgrid .row .pull_thirteen.one.column:first-child, .sixteen.colgrid .row .pull_thirteen.two.columns:first-child, .sixteen.colgrid .row .pull_thirteen.four.columns:first-child, .sixteen.colgrid .row .pull_thirteen.five.columns:first-child, .sixteen.colgrid .row .pull_thirteen.six.columns:first-child, .sixteen.colgrid .row .pull_thirteen.seven.columns:first-child, .sixteen.colgrid .row .pull_thirteen.eight.columns:first-child, .sixteen.colgrid .row .pull_thirteen.nine.columns:first-child, .sixteen.colgrid .row .pull_thirteen.ten.columns:first-child, .sixteen.colgrid .row .pull_thirteen.eleven.columns:first-child, .sixteen.colgrid .row .pull_thirteen.twelve.columns:first-child, .sixteen.colgrid .row .pull_thirteen.thirteen.columns:first-child, .sixteen.colgrid .row .pull_thirteen.fourteen.columns:first-child, .sixteen.colgrid .row .pull_thirteen.fifteen.columns:first-child, .sixteen.colgrid .row .pull_fourteen.one.column:first-child, .sixteen.colgrid .row .pull_fourteen.three.columns:first-child, .sixteen.colgrid .row .pull_fourteen.four.columns:first-child, .sixteen.colgrid .row .pull_fourteen.five.columns:first-child, .sixteen.colgrid .row .pull_fourteen.six.columns:first-child, .sixteen.colgrid .row .pull_fourteen.seven.columns:first-child, .sixteen.colgrid .row .pull_fourteen.eight.columns:first-child, .sixteen.colgrid .row .pull_fourteen.nine.columns:first-child, .sixteen.colgrid .row .pull_fourteen.ten.columns:first-child, .sixteen.colgrid .row .pull_fourteen.eleven.columns:first-child, .sixteen.colgrid .row .pull_fourteen.twelve.columns:first-child, .sixteen.colgrid .row .pull_fourteen.thirteen.columns:first-child, .sixteen.colgrid .row .pull_fourteen.fourteen.columns:first-child, .sixteen.colgrid .row .pull_fourteen.fifteen.columns:first-child, .sixteen.colgrid .row .pull_fifteen.two.columns:first-child, .sixteen.colgrid .row .pull_fifteen.three.columns:first-child, .sixteen.colgrid .row .pull_fifteen.four.columns:first-child, .sixteen.colgrid .row .pull_fifteen.five.columns:first-child, .sixteen.colgrid .row .pull_fifteen.six.columns:first-child, .sixteen.colgrid .row .pull_fifteen.seven.columns:first-child, .sixteen.colgrid .row .pull_fifteen.eight.columns:first-child, .sixteen.colgrid .row .pull_fifteen.nine.columns:first-child, .sixteen.colgrid .row .pull_fifteen.ten.columns:first-child, .sixteen.colgrid .row .pull_fifteen.eleven.columns:first-child, .sixteen.colgrid .row .pull_fifteen.twelve.columns:first-child, .sixteen.colgrid .row .pull_fifteen.thirteen.columns:first-child, .sixteen.colgrid .row .pull_fifteen.fourteen.columns:first-child, .sixteen.colgrid .row .pull_fifteen.fifteen.columns:first-child { margin-left: 0; }
+
+/*=================================================
+
+	+++ LE GRID +++
+	A Responsive Grid -- Gumby defaults to a standard 960 grid,
+	but you can change it to whatever you'd like.
+ ==================================================*/
+/*.container {
+	padding: 0 $gutter-in-px;
+}*/
+.row { width: 100%; max-width: 980px; min-width: 320px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
+.row .row { min-width: 0; padding-left: 0; padding-right: 0; }
+
+/* To fix the grid into a different size, set max-width to your desired width */
+.column, .columns { margin-left: 2.12766%; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+
+.column:first-child, .columns:first-child, .alpha { margin-left: 0; }
+
+.column.omega, .columns.omega { float: right; }
+
+/* Column Classes */
+.row .one.column { width: 6.38298%; }
+.row .one.columns { width: 6.38298%; }
+.row .two.columns { width: 14.89362%; }
+.row .three.columns { width: 23.40426%; }
+.row .four.columns { width: 31.91489%; }
+.row .five.columns { width: 40.42553%; }
+.row .six.columns { width: 48.93617%; }
+.row .seven.columns { width: 57.44681%; }
+.row .eight.columns { width: 65.95745%; }
+.row .nine.columns { width: 74.46809%; }
+.row .ten.columns { width: 82.97872%; }
+.row .eleven.columns { width: 91.48936%; }
+.row .twelve.columns { width: 100%; }
+
+/* Push and Pull Classes */
+.row .push_one { margin-left: 10.6383%; }
+.row .push_one:first-child { margin-left: 8.51064%; }
+.row .pull_one.one.column { margin-left: -14.89362%; }
+.row .pull_one.two.columns { margin-left: -23.40426%; }
+.row .pull_one.three.columns { margin-left: -31.91489%; }
+.row .pull_one.four.columns { margin-left: -40.42553%; }
+.row .pull_one.five.columns { margin-left: -48.93617%; }
+.row .pull_one.six.columns { margin-left: -57.44681%; }
+.row .pull_one.seven.columns { margin-left: -65.95745%; }
+.row .pull_one.eight.columns { margin-left: -74.46809%; }
+.row .pull_one.nine.columns { margin-left: -82.97872%; }
+.row .pull_one.ten.columns { margin-left: -91.48936%; }
+.row .push_two { margin-left: 19.14894%; }
+.row .push_two:first-child { margin-left: 17.02128%; }
+.row .pull_two.one.column { margin-left: -23.40426%; }
+.row .pull_two.two.columns { margin-left: -31.91489%; }
+.row .pull_two.three.columns { margin-left: -40.42553%; }
+.row .pull_two.four.columns { margin-left: -48.93617%; }
+.row .pull_two.five.columns { margin-left: -57.44681%; }
+.row .pull_two.six.columns { margin-left: -65.95745%; }
+.row .pull_two.seven.columns { margin-left: -74.46809%; }
+.row .pull_two.eight.columns { margin-left: -82.97872%; }
+.row .pull_two.nine.columns { margin-left: -91.48936%; }
+.row .pull_two.eleven.columns { margin-left: -108.51064%; }
+.row .push_three { margin-left: 27.65957%; }
+.row .push_three:first-child { margin-left: 25.53191%; }
+.row .pull_three.one.column { margin-left: -31.91489%; }
+.row .pull_three.two.columns { margin-left: -40.42553%; }
+.row .pull_three.three.columns { margin-left: -48.93617%; }
+.row .pull_three.four.columns { margin-left: -57.44681%; }
+.row .pull_three.five.columns { margin-left: -65.95745%; }
+.row .pull_three.six.columns { margin-left: -74.46809%; }
+.row .pull_three.seven.columns { margin-left: -82.97872%; }
+.row .pull_three.eight.columns { margin-left: -91.48936%; }
+.row .pull_three.ten.columns { margin-left: -108.51064%; }
+.row .pull_three.eleven.columns { margin-left: -117.02128%; }
+.row .push_four { margin-left: 36.17021%; }
+.row .push_four:first-child { margin-left: 34.04255%; }
+.row .pull_four.one.column { margin-left: -40.42553%; }
+.row .pull_four.two.columns { margin-left: -48.93617%; }
+.row .pull_four.three.columns { margin-left: -57.44681%; }
+.row .pull_four.four.columns { margin-left: -65.95745%; }
+.row .pull_four.five.columns { margin-left: -74.46809%; }
+.row .pull_four.six.columns { margin-left: -82.97872%; }
+.row .pull_four.seven.columns { margin-left: -91.48936%; }
+.row .pull_four.nine.columns { margin-left: -108.51064%; }
+.row .pull_four.ten.columns { margin-left: -117.02128%; }
+.row .pull_four.eleven.columns { margin-left: -125.53191%; }
+.row .push_five { margin-left: 44.68085%; }
+.row .push_five:first-child { margin-left: 42.55319%; }
+.row .pull_five.one.column { margin-left: -48.93617%; }
+.row .pull_five.two.columns { margin-left: -57.44681%; }
+.row .pull_five.three.columns { margin-left: -65.95745%; }
+.row .pull_five.four.columns { margin-left: -74.46809%; }
+.row .pull_five.five.columns { margin-left: -82.97872%; }
+.row .pull_five.six.columns { margin-left: -91.48936%; }
+.row .pull_five.eight.columns { margin-left: -108.51064%; }
+.row .pull_five.nine.columns { margin-left: -117.02128%; }
+.row .pull_five.ten.columns { margin-left: -125.53191%; }
+.row .pull_five.eleven.columns { margin-left: -134.04255%; }
+.row .push_six { margin-left: 53.19149%; }
+.row .push_six:first-child { margin-left: 51.06383%; }
+.row .pull_six.one.column { margin-left: -57.44681%; }
+.row .pull_six.two.columns { margin-left: -65.95745%; }
+.row .pull_six.three.columns { margin-left: -74.46809%; }
+.row .pull_six.four.columns { margin-left: -82.97872%; }
+.row .pull_six.five.columns { margin-left: -91.48936%; }
+.row .pull_six.seven.columns { margin-left: -108.51064%; }
+.row .pull_six.eight.columns { margin-left: -117.02128%; }
+.row .pull_six.nine.columns { margin-left: -125.53191%; }
+.row .pull_six.ten.columns { margin-left: -134.04255%; }
+.row .pull_six.eleven.columns { margin-left: -142.55319%; }
+.row .push_seven { margin-left: 61.70213%; }
+.row .push_seven:first-child { margin-left: 59.57447%; }
+.row .pull_seven.one.column { margin-left: -65.95745%; }
+.row .pull_seven.two.columns { margin-left: -74.46809%; }
+.row .pull_seven.three.columns { margin-left: -82.97872%; }
+.row .pull_seven.four.columns { margin-left: -91.48936%; }
+.row .pull_seven.six.columns { margin-left: -108.51064%; }
+.row .pull_seven.seven.columns { margin-left: -117.02128%; }
+.row .pull_seven.eight.columns { margin-left: -125.53191%; }
+.row .pull_seven.nine.columns { margin-left: -134.04255%; }
+.row .pull_seven.ten.columns { margin-left: -142.55319%; }
+.row .pull_seven.eleven.columns { margin-left: -151.06383%; }
+.row .push_eight { margin-left: 70.21277%; }
+.row .push_eight:first-child { margin-left: 68.08511%; }
+.row .pull_eight.one.column { margin-left: -74.46809%; }
+.row .pull_eight.two.columns { margin-left: -82.97872%; }
+.row .pull_eight.three.columns { margin-left: -91.48936%; }
+.row .pull_eight.five.columns { margin-left: -108.51064%; }
+.row .pull_eight.six.columns { margin-left: -117.02128%; }
+.row .pull_eight.seven.columns { margin-left: -125.53191%; }
+.row .pull_eight.eight.columns { margin-left: -134.04255%; }
+.row .pull_eight.nine.columns { margin-left: -142.55319%; }
+.row .pull_eight.ten.columns { margin-left: -151.06383%; }
+.row .pull_eight.eleven.columns { margin-left: -159.57447%; }
+.row .push_nine { margin-left: 78.7234%; }
+.row .push_nine:first-child { margin-left: 76.59574%; }
+.row .pull_nine.one.column { margin-left: -82.97872%; }
+.row .pull_nine.two.columns { margin-left: -91.48936%; }
+.row .pull_nine.four.columns { margin-left: -108.51064%; }
+.row .pull_nine.five.columns { margin-left: -117.02128%; }
+.row .pull_nine.six.columns { margin-left: -125.53191%; }
+.row .pull_nine.seven.columns { margin-left: -134.04255%; }
+.row .pull_nine.eight.columns { margin-left: -142.55319%; }
+.row .pull_nine.nine.columns { margin-left: -151.06383%; }
+.row .pull_nine.ten.columns { margin-left: -159.57447%; }
+.row .pull_nine.eleven.columns { margin-left: -168.08511%; }
+.row .push_ten { margin-left: 87.23404%; }
+.row .push_ten:first-child { margin-left: 85.10638%; }
+.row .pull_ten.one.column { margin-left: -91.48936%; }
+.row .pull_ten.three.columns { margin-left: -108.51064%; }
+.row .pull_ten.four.columns { margin-left: -117.02128%; }
+.row .pull_ten.five.columns { margin-left: -125.53191%; }
+.row .pull_ten.six.columns { margin-left: -134.04255%; }
+.row .pull_ten.seven.columns { margin-left: -142.55319%; }
+.row .pull_ten.eight.columns { margin-left: -151.06383%; }
+.row .pull_ten.nine.columns { margin-left: -159.57447%; }
+.row .pull_ten.ten.columns { margin-left: -168.08511%; }
+.row .pull_ten.eleven.columns { margin-left: -176.59574%; }
+.row .push_eleven { margin-left: 95.74468%; }
+.row .push_eleven:first-child { margin-left: 93.61702%; }
+.row .pull_eleven.two.columns { margin-left: -108.51064%; }
+.row .pull_eleven.three.columns { margin-left: -117.02128%; }
+.row .pull_eleven.four.columns { margin-left: -125.53191%; }
+.row .pull_eleven.five.columns { margin-left: -134.04255%; }
+.row .pull_eleven.six.columns { margin-left: -142.55319%; }
+.row .pull_eleven.seven.columns { margin-left: -151.06383%; }
+.row .pull_eleven.eight.columns { margin-left: -159.57447%; }
+.row .pull_eleven.nine.columns { margin-left: -168.08511%; }
+.row .pull_eleven.ten.columns { margin-left: -176.59574%; }
+.row .pull_eleven.eleven.columns { margin-left: -185.10638%; }
+
+/* Centered Classes */
+.row .one.centered { margin-left: 46.80851%; }
+.row .two.centered { margin-left: 42.55319%; }
+.row .three.centered { margin-left: 38.29787%; }
+.row .four.centered { margin-left: 34.04255%; }
+.row .five.centered { margin-left: 29.78723%; }
+.row .six.centered { margin-left: 25.53191%; }
+.row .seven.centered { margin-left: 21.2766%; }
+.row .eight.centered { margin-left: 17.02128%; }
+.row .nine.centered { margin-left: 12.76596%; }
+.row .ten.centered { margin-left: 8.51064%; }
+.row .eleven.centered { margin-left: 4.25532%; }
+
+/* Hybrid Grid Columns */
+.sixteen.colgrid .row .one.column { width: 4.25532%; }
+.sixteen.colgrid .row .one.columns { width: 4.25532%; }
+.sixteen.colgrid .row .two.columns { width: 10.6383%; }
+.sixteen.colgrid .row .three.columns { width: 17.02128%; }
+.sixteen.colgrid .row .four.columns { width: 23.40426%; }
+.sixteen.colgrid .row .five.columns { width: 29.78723%; }
+.sixteen.colgrid .row .six.columns { width: 36.17021%; }
+.sixteen.colgrid .row .seven.columns { width: 42.55319%; }
+.sixteen.colgrid .row .eight.columns { width: 48.93617%; }
+.sixteen.colgrid .row .nine.columns { width: 55.31915%; }
+.sixteen.colgrid .row .ten.columns { width: 61.70213%; }
+.sixteen.colgrid .row .eleven.columns { width: 68.08511%; }
+.sixteen.colgrid .row .twelve.columns { width: 74.46809%; }
+.sixteen.colgrid .row .thirteen.columns { width: 80.85106%; }
+.sixteen.colgrid .row .fourteen.columns { width: 87.23404%; }
+.sixteen.colgrid .row .fifteen.columns { width: 93.61702%; }
+.sixteen.colgrid .row .sixteen.columns { width: 100%; }
+
+/* Hybrid Push and Pull Classes */
+.sixteen.colgrid .row .push_one { margin-left: 8.51064%; }
+.sixteen.colgrid .row .push_one:first-child { margin-left: 6.38298%; }
+.sixteen.colgrid .row .pull_one.one.column { margin-left: -10.6383%; }
+.sixteen.colgrid .row .pull_one.two.columns { margin-left: -17.02128%; }
+.sixteen.colgrid .row .pull_one.three.columns { margin-left: -23.40426%; }
+.sixteen.colgrid .row .pull_one.four.columns { margin-left: -29.78723%; }
+.sixteen.colgrid .row .pull_one.five.columns { margin-left: -36.17021%; }
+.sixteen.colgrid .row .pull_one.six.columns { margin-left: -42.55319%; }
+.sixteen.colgrid .row .pull_one.seven.columns { margin-left: -48.93617%; }
+.sixteen.colgrid .row .pull_one.eight.columns { margin-left: -55.31915%; }
+.sixteen.colgrid .row .pull_one.nine.columns { margin-left: -61.70213%; }
+.sixteen.colgrid .row .pull_one.ten.columns { margin-left: -68.08511%; }
+.sixteen.colgrid .row .pull_one.eleven.columns { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_one.twelve.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_one.thirteen.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_one.fourteen.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .push_two { margin-left: 14.89362%; }
+.sixteen.colgrid .row .push_two:first-child { margin-left: 12.76596%; }
+.sixteen.colgrid .row .pull_two.one.column { margin-left: -17.02128%; }
+.sixteen.colgrid .row .pull_two.two.columns { margin-left: -23.40426%; }
+.sixteen.colgrid .row .pull_two.three.columns { margin-left: -29.78723%; }
+.sixteen.colgrid .row .pull_two.four.columns { margin-left: -36.17021%; }
+.sixteen.colgrid .row .pull_two.five.columns { margin-left: -42.55319%; }
+.sixteen.colgrid .row .pull_two.six.columns { margin-left: -48.93617%; }
+.sixteen.colgrid .row .pull_two.seven.columns { margin-left: -55.31915%; }
+.sixteen.colgrid .row .pull_two.eight.columns { margin-left: -61.70213%; }
+.sixteen.colgrid .row .pull_two.nine.columns { margin-left: -68.08511%; }
+.sixteen.colgrid .row .pull_two.ten.columns { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_two.eleven.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_two.twelve.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_two.thirteen.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_two.fifteen.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .push_three { margin-left: 21.2766%; }
+.sixteen.colgrid .row .push_three:first-child { margin-left: 19.14894%; }
+.sixteen.colgrid .row .pull_three.one.column { margin-left: -23.40426%; }
+.sixteen.colgrid .row .pull_three.two.columns { margin-left: -29.78723%; }
+.sixteen.colgrid .row .pull_three.three.columns { margin-left: -36.17021%; }
+.sixteen.colgrid .row .pull_three.four.columns { margin-left: -42.55319%; }
+.sixteen.colgrid .row .pull_three.five.columns { margin-left: -48.93617%; }
+.sixteen.colgrid .row .pull_three.six.columns { margin-left: -55.31915%; }
+.sixteen.colgrid .row .pull_three.seven.columns { margin-left: -61.70213%; }
+.sixteen.colgrid .row .pull_three.eight.columns { margin-left: -68.08511%; }
+.sixteen.colgrid .row .pull_three.nine.columns { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_three.ten.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_three.eleven.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_three.twelve.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_three.fourteen.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_three.fifteen.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .push_four { margin-left: 27.65957%; }
+.sixteen.colgrid .row .push_four:first-child { margin-left: 25.53191%; }
+.sixteen.colgrid .row .pull_four.one.column { margin-left: -29.78723%; }
+.sixteen.colgrid .row .pull_four.two.columns { margin-left: -36.17021%; }
+.sixteen.colgrid .row .pull_four.three.columns { margin-left: -42.55319%; }
+.sixteen.colgrid .row .pull_four.four.columns { margin-left: -48.93617%; }
+.sixteen.colgrid .row .pull_four.five.columns { margin-left: -55.31915%; }
+.sixteen.colgrid .row .pull_four.six.columns { margin-left: -61.70213%; }
+.sixteen.colgrid .row .pull_four.seven.columns { margin-left: -68.08511%; }
+.sixteen.colgrid .row .pull_four.eight.columns { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_four.nine.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_four.ten.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_four.eleven.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_four.thirteen.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_four.fourteen.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_four.fifteen.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .push_five { margin-left: 34.04255%; }
+.sixteen.colgrid .row .push_five:first-child { margin-left: 31.91489%; }
+.sixteen.colgrid .row .pull_five.one.column { margin-left: -36.17021%; }
+.sixteen.colgrid .row .pull_five.two.columns { margin-left: -42.55319%; }
+.sixteen.colgrid .row .pull_five.three.columns { margin-left: -48.93617%; }
+.sixteen.colgrid .row .pull_five.four.columns { margin-left: -55.31915%; }
+.sixteen.colgrid .row .pull_five.five.columns { margin-left: -61.70213%; }
+.sixteen.colgrid .row .pull_five.six.columns { margin-left: -68.08511%; }
+.sixteen.colgrid .row .pull_five.seven.columns { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_five.eight.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_five.nine.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_five.ten.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_five.twelve.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_five.thirteen.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_five.fourteen.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_five.fifteen.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .push_six { margin-left: 40.42553%; }
+.sixteen.colgrid .row .push_six:first-child { margin-left: 38.29787%; }
+.sixteen.colgrid .row .pull_six.one.column { margin-left: -42.55319%; }
+.sixteen.colgrid .row .pull_six.two.columns { margin-left: -48.93617%; }
+.sixteen.colgrid .row .pull_six.three.columns { margin-left: -55.31915%; }
+.sixteen.colgrid .row .pull_six.four.columns { margin-left: -61.70213%; }
+.sixteen.colgrid .row .pull_six.five.columns { margin-left: -68.08511%; }
+.sixteen.colgrid .row .pull_six.six.columns { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_six.seven.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_six.eight.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_six.nine.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_six.eleven.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_six.twelve.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_six.thirteen.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_six.fourteen.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .pull_six.fifteen.columns { margin-left: -131.91489%; }
+.sixteen.colgrid .row .push_seven { margin-left: 46.80851%; }
+.sixteen.colgrid .row .push_seven:first-child { margin-left: 44.68085%; }
+.sixteen.colgrid .row .pull_seven.one.column { margin-left: -48.93617%; }
+.sixteen.colgrid .row .pull_seven.two.columns { margin-left: -55.31915%; }
+.sixteen.colgrid .row .pull_seven.three.columns { margin-left: -61.70213%; }
+.sixteen.colgrid .row .pull_seven.four.columns { margin-left: -68.08511%; }
+.sixteen.colgrid .row .pull_seven.five.columns { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_seven.six.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_seven.seven.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_seven.eight.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_seven.ten.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_seven.eleven.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_seven.twelve.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_seven.thirteen.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .pull_seven.fourteen.columns { margin-left: -131.91489%; }
+.sixteen.colgrid .row .pull_seven.fifteen.columns { margin-left: -138.29787%; }
+.sixteen.colgrid .row .push_eight { margin-left: 53.19149%; }
+.sixteen.colgrid .row .push_eight:first-child { margin-left: 51.06383%; }
+.sixteen.colgrid .row .pull_eight.one.column { margin-left: -55.31915%; }
+.sixteen.colgrid .row .pull_eight.two.columns { margin-left: -61.70213%; }
+.sixteen.colgrid .row .pull_eight.three.columns { margin-left: -68.08511%; }
+.sixteen.colgrid .row .pull_eight.four.columns { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_eight.five.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_eight.six.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_eight.seven.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_eight.nine.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_eight.ten.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_eight.eleven.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_eight.twelve.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .pull_eight.thirteen.columns { margin-left: -131.91489%; }
+.sixteen.colgrid .row .pull_eight.fourteen.columns { margin-left: -138.29787%; }
+.sixteen.colgrid .row .pull_eight.fifteen.columns { margin-left: -144.68085%; }
+.sixteen.colgrid .row .push_nine { margin-left: 59.57447%; }
+.sixteen.colgrid .row .push_nine:first-child { margin-left: 57.44681%; }
+.sixteen.colgrid .row .pull_nine.one.column { margin-left: -61.70213%; }
+.sixteen.colgrid .row .pull_nine.two.columns { margin-left: -68.08511%; }
+.sixteen.colgrid .row .pull_nine.three.columns { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_nine.four.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_nine.five.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_nine.six.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_nine.eight.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_nine.nine.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_nine.ten.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_nine.eleven.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .pull_nine.twelve.columns { margin-left: -131.91489%; }
+.sixteen.colgrid .row .pull_nine.thirteen.columns { margin-left: -138.29787%; }
+.sixteen.colgrid .row .pull_nine.fourteen.columns { margin-left: -144.68085%; }
+.sixteen.colgrid .row .pull_nine.fifteen.columns { margin-left: -151.06383%; }
+.sixteen.colgrid .row .push_ten { margin-left: 65.95745%; }
+.sixteen.colgrid .row .push_ten:first-child { margin-left: 63.82979%; }
+.sixteen.colgrid .row .pull_ten.one.column { margin-left: -68.08511%; }
+.sixteen.colgrid .row .pull_ten.two.columns { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_ten.three.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_ten.four.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_ten.five.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_ten.seven.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_ten.eight.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_ten.nine.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_ten.ten.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .pull_ten.eleven.columns { margin-left: -131.91489%; }
+.sixteen.colgrid .row .pull_ten.twelve.columns { margin-left: -138.29787%; }
+.sixteen.colgrid .row .pull_ten.thirteen.columns { margin-left: -144.68085%; }
+.sixteen.colgrid .row .pull_ten.fourteen.columns { margin-left: -151.06383%; }
+.sixteen.colgrid .row .pull_ten.fifteen.columns { margin-left: -157.44681%; }
+.sixteen.colgrid .row .push_eleven { margin-left: 72.34043%; }
+.sixteen.colgrid .row .push_eleven:first-child { margin-left: 70.21277%; }
+.sixteen.colgrid .row .pull_eleven.one.column { margin-left: -74.46809%; }
+.sixteen.colgrid .row .pull_eleven.two.columns { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_eleven.three.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_eleven.four.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_eleven.six.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_eleven.seven.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_eleven.eight.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_eleven.nine.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .pull_eleven.ten.columns { margin-left: -131.91489%; }
+.sixteen.colgrid .row .pull_eleven.eleven.columns { margin-left: -138.29787%; }
+.sixteen.colgrid .row .pull_eleven.twelve.columns { margin-left: -144.68085%; }
+.sixteen.colgrid .row .pull_eleven.thirteen.columns { margin-left: -151.06383%; }
+.sixteen.colgrid .row .pull_eleven.fourteen.columns { margin-left: -157.44681%; }
+.sixteen.colgrid .row .pull_eleven.fifteen.columns { margin-left: -163.82979%; }
+.sixteen.colgrid .row .push_twelve { margin-left: 78.7234%; }
+.sixteen.colgrid .row .push_twelve:first-child { margin-left: 76.59574%; }
+.sixteen.colgrid .row .pull_twelve.one.column { margin-left: -80.85106%; }
+.sixteen.colgrid .row .pull_twelve.two.columns { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_twelve.three.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_twelve.five.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_twelve.six.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_twelve.seven.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_twelve.eight.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .pull_twelve.nine.columns { margin-left: -131.91489%; }
+.sixteen.colgrid .row .pull_twelve.ten.columns { margin-left: -138.29787%; }
+.sixteen.colgrid .row .pull_twelve.eleven.columns { margin-left: -144.68085%; }
+.sixteen.colgrid .row .pull_twelve.twelve.columns { margin-left: -151.06383%; }
+.sixteen.colgrid .row .pull_twelve.thirteen.columns { margin-left: -157.44681%; }
+.sixteen.colgrid .row .pull_twelve.fourteen.columns { margin-left: -163.82979%; }
+.sixteen.colgrid .row .pull_twelve.fifteen.columns { margin-left: -170.21277%; }
+.sixteen.colgrid .row .push_thirteen { margin-left: 85.10638%; }
+.sixteen.colgrid .row .push_thirteen:first-child { margin-left: 82.97872%; }
+.sixteen.colgrid .row .pull_thirteen.one.column { margin-left: -87.23404%; }
+.sixteen.colgrid .row .pull_thirteen.two.columns { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_thirteen.four.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_thirteen.five.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_thirteen.six.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_thirteen.seven.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .pull_thirteen.eight.columns { margin-left: -131.91489%; }
+.sixteen.colgrid .row .pull_thirteen.nine.columns { margin-left: -138.29787%; }
+.sixteen.colgrid .row .pull_thirteen.ten.columns { margin-left: -144.68085%; }
+.sixteen.colgrid .row .pull_thirteen.eleven.columns { margin-left: -151.06383%; }
+.sixteen.colgrid .row .pull_thirteen.twelve.columns { margin-left: -157.44681%; }
+.sixteen.colgrid .row .pull_thirteen.thirteen.columns { margin-left: -163.82979%; }
+.sixteen.colgrid .row .pull_thirteen.fourteen.columns { margin-left: -170.21277%; }
+.sixteen.colgrid .row .pull_thirteen.fifteen.columns { margin-left: -176.59574%; }
+.sixteen.colgrid .row .push_fourteen { margin-left: 91.48936%; }
+.sixteen.colgrid .row .push_fourteen:first-child { margin-left: 89.3617%; }
+.sixteen.colgrid .row .pull_fourteen.one.column { margin-left: -93.61702%; }
+.sixteen.colgrid .row .pull_fourteen.three.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_fourteen.four.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_fourteen.five.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_fourteen.six.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .pull_fourteen.seven.columns { margin-left: -131.91489%; }
+.sixteen.colgrid .row .pull_fourteen.eight.columns { margin-left: -138.29787%; }
+.sixteen.colgrid .row .pull_fourteen.nine.columns { margin-left: -144.68085%; }
+.sixteen.colgrid .row .pull_fourteen.ten.columns { margin-left: -151.06383%; }
+.sixteen.colgrid .row .pull_fourteen.eleven.columns { margin-left: -157.44681%; }
+.sixteen.colgrid .row .pull_fourteen.twelve.columns { margin-left: -163.82979%; }
+.sixteen.colgrid .row .pull_fourteen.thirteen.columns { margin-left: -170.21277%; }
+.sixteen.colgrid .row .pull_fourteen.fourteen.columns { margin-left: -176.59574%; }
+.sixteen.colgrid .row .pull_fourteen.fifteen.columns { margin-left: -182.97872%; }
+.sixteen.colgrid .row .push_fifteen { margin-left: 97.87234%; }
+.sixteen.colgrid .row .push_fifteen:first-child { margin-left: 95.74468%; }
+.sixteen.colgrid .row .pull_fifteen.two.columns { margin-left: -106.38298%; }
+.sixteen.colgrid .row .pull_fifteen.three.columns { margin-left: -112.76596%; }
+.sixteen.colgrid .row .pull_fifteen.four.columns { margin-left: -119.14894%; }
+.sixteen.colgrid .row .pull_fifteen.five.columns { margin-left: -125.53191%; }
+.sixteen.colgrid .row .pull_fifteen.six.columns { margin-left: -131.91489%; }
+.sixteen.colgrid .row .pull_fifteen.seven.columns { margin-left: -138.29787%; }
+.sixteen.colgrid .row .pull_fifteen.eight.columns { margin-left: -144.68085%; }
+.sixteen.colgrid .row .pull_fifteen.nine.columns { margin-left: -151.06383%; }
+.sixteen.colgrid .row .pull_fifteen.ten.columns { margin-left: -157.44681%; }
+.sixteen.colgrid .row .pull_fifteen.eleven.columns { margin-left: -163.82979%; }
+.sixteen.colgrid .row .pull_fifteen.twelve.columns { margin-left: -170.21277%; }
+.sixteen.colgrid .row .pull_fifteen.thirteen.columns { margin-left: -176.59574%; }
+.sixteen.colgrid .row .pull_fifteen.fourteen.columns { margin-left: -182.97872%; }
+.sixteen.colgrid .row .pull_fifteen.fifteen.columns { margin-left: -189.3617%; }
+
+.row .pull_one.one.column:first-child, .row .pull_one.two.columns:first-child, .row .pull_one.three.columns:first-child, .row .pull_one.four.columns:first-child, .row .pull_one.five.columns:first-child, .row .pull_one.six.columns:first-child, .row .pull_one.seven.columns:first-child, .row .pull_one.eight.columns:first-child, .row .pull_one.nine.columns:first-child, .row .pull_one.ten.columns:first-child, .row .pull_two.one.column:first-child, .row .pull_two.two.columns:first-child, .row .pull_two.three.columns:first-child, .row .pull_two.four.columns:first-child, .row .pull_two.five.columns:first-child, .row .pull_two.six.columns:first-child, .row .pull_two.seven.columns:first-child, .row .pull_two.eight.columns:first-child, .row .pull_two.nine.columns:first-child, .row .pull_two.eleven.columns:first-child, .row .pull_three.one.column:first-child, .row .pull_three.two.columns:first-child, .row .pull_three.three.columns:first-child, .row .pull_three.four.columns:first-child, .row .pull_three.five.columns:first-child, .row .pull_three.six.columns:first-child, .row .pull_three.seven.columns:first-child, .row .pull_three.eight.columns:first-child, .row .pull_three.ten.columns:first-child, .row .pull_three.eleven.columns:first-child, .row .pull_four.one.column:first-child, .row .pull_four.two.columns:first-child, .row .pull_four.three.columns:first-child, .row .pull_four.four.columns:first-child, .row .pull_four.five.columns:first-child, .row .pull_four.six.columns:first-child, .row .pull_four.seven.columns:first-child, .row .pull_four.nine.columns:first-child, .row .pull_four.ten.columns:first-child, .row .pull_four.eleven.columns:first-child, .row .pull_five.one.column:first-child, .row .pull_five.two.columns:first-child, .row .pull_five.three.columns:first-child, .row .pull_five.four.columns:first-child, .row .pull_five.five.columns:first-child, .row .pull_five.six.columns:first-child, .row .pull_five.eight.columns:first-child, .row .pull_five.nine.columns:first-child, .row .pull_five.ten.columns:first-child, .row .pull_five.eleven.columns:first-child, .row .pull_six.one.column:first-child, .row .pull_six.two.columns:first-child, .row .pull_six.three.columns:first-child, .row .pull_six.four.columns:first-child, .row .pull_six.five.columns:first-child, .row .pull_six.seven.columns:first-child, .row .pull_six.eight.columns:first-child, .row .pull_six.nine.columns:first-child, .row .pull_six.ten.columns:first-child, .row .pull_six.eleven.columns:first-child, .row .pull_seven.one.column:first-child, .row .pull_seven.two.columns:first-child, .row .pull_seven.three.columns:first-child, .row .pull_seven.four.columns:first-child, .row .pull_seven.six.columns:first-child, .row .pull_seven.seven.columns:first-child, .row .pull_seven.eight.columns:first-child, .row .pull_seven.nine.columns:first-child, .row .pull_seven.ten.columns:first-child, .row .pull_seven.eleven.columns:first-child, .row .pull_eight.one.column:first-child, .row .pull_eight.two.columns:first-child, .row .pull_eight.three.columns:first-child, .row .pull_eight.five.columns:first-child, .row .pull_eight.six.columns:first-child, .row .pull_eight.seven.columns:first-child, .row .pull_eight.eight.columns:first-child, .row .pull_eight.nine.columns:first-child, .row .pull_eight.ten.columns:first-child, .row .pull_eight.eleven.columns:first-child, .row .pull_nine.one.column:first-child, .row .pull_nine.two.columns:first-child, .row .pull_nine.four.columns:first-child, .row .pull_nine.five.columns:first-child, .row .pull_nine.six.columns:first-child, .row .pull_nine.seven.columns:first-child, .row .pull_nine.eight.columns:first-child, .row .pull_nine.nine.columns:first-child, .row .pull_nine.ten.columns:first-child, .row .pull_nine.eleven.columns:first-child, .row .pull_ten.one.column:first-child, .row .pull_ten.three.columns:first-child, .row .pull_ten.four.columns:first-child, .row .pull_ten.five.columns:first-child, .row .pull_ten.six.columns:first-child, .row .pull_ten.seven.columns:first-child, .row .pull_ten.eight.columns:first-child, .row .pull_ten.nine.columns:first-child, .row .pull_ten.ten.columns:first-child, .row .pull_ten.eleven.columns:first-child, .row .pull_eleven.two.columns:first-child, .row .pull_eleven.three.columns:first-child, .row .pull_eleven.four.columns:first-child, .row .pull_eleven.five.columns:first-child, .row .pull_eleven.six.columns:first-child, .row .pull_eleven.seven.columns:first-child, .row .pull_eleven.eight.columns:first-child, .row .pull_eleven.nine.columns:first-child, .row .pull_eleven.ten.columns:first-child, .row .pull_eleven.eleven.columns:first-child, .sixteen.colgrid .row .pull_one.one.column:first-child, .sixteen.colgrid .row .pull_one.two.columns:first-child, .sixteen.colgrid .row .pull_one.three.columns:first-child, .sixteen.colgrid .row .pull_one.four.columns:first-child, .sixteen.colgrid .row .pull_one.five.columns:first-child, .sixteen.colgrid .row .pull_one.six.columns:first-child, .sixteen.colgrid .row .pull_one.seven.columns:first-child, .sixteen.colgrid .row .pull_one.eight.columns:first-child, .sixteen.colgrid .row .pull_one.nine.columns:first-child, .sixteen.colgrid .row .pull_one.ten.columns:first-child, .sixteen.colgrid .row .pull_one.eleven.columns:first-child, .sixteen.colgrid .row .pull_one.twelve.columns:first-child, .sixteen.colgrid .row .pull_one.thirteen.columns:first-child, .sixteen.colgrid .row .pull_one.fourteen.columns:first-child, .sixteen.colgrid .row .pull_two.one.column:first-child, .sixteen.colgrid .row .pull_two.two.columns:first-child, .sixteen.colgrid .row .pull_two.three.columns:first-child, .sixteen.colgrid .row .pull_two.four.columns:first-child, .sixteen.colgrid .row .pull_two.five.columns:first-child, .sixteen.colgrid .row .pull_two.six.columns:first-child, .sixteen.colgrid .row .pull_two.seven.columns:first-child, .sixteen.colgrid .row .pull_two.eight.columns:first-child, .sixteen.colgrid .row .pull_two.nine.columns:first-child, .sixteen.colgrid .row .pull_two.ten.columns:first-child, .sixteen.colgrid .row .pull_two.eleven.columns:first-child, .sixteen.colgrid .row .pull_two.twelve.columns:first-child, .sixteen.colgrid .row .pull_two.thirteen.columns:first-child, .sixteen.colgrid .row .pull_two.fifteen.columns:first-child, .sixteen.colgrid .row .pull_three.one.column:first-child, .sixteen.colgrid .row .pull_three.two.columns:first-child, .sixteen.colgrid .row .pull_three.three.columns:first-child, .sixteen.colgrid .row .pull_three.four.columns:first-child, .sixteen.colgrid .row .pull_three.five.columns:first-child, .sixteen.colgrid .row .pull_three.six.columns:first-child, .sixteen.colgrid .row .pull_three.seven.columns:first-child, .sixteen.colgrid .row .pull_three.eight.columns:first-child, .sixteen.colgrid .row .pull_three.nine.columns:first-child, .sixteen.colgrid .row .pull_three.ten.columns:first-child, .sixteen.colgrid .row .pull_three.eleven.columns:first-child, .sixteen.colgrid .row .pull_three.twelve.columns:first-child, .sixteen.colgrid .row .pull_three.fourteen.columns:first-child, .sixteen.colgrid .row .pull_three.fifteen.columns:first-child, .sixteen.colgrid .row .pull_four.one.column:first-child, .sixteen.colgrid .row .pull_four.two.columns:first-child, .sixteen.colgrid .row .pull_four.three.columns:first-child, .sixteen.colgrid .row .pull_four.four.columns:first-child, .sixteen.colgrid .row .pull_four.five.columns:first-child, .sixteen.colgrid .row .pull_four.six.columns:first-child, .sixteen.colgrid .row .pull_four.seven.columns:first-child, .sixteen.colgrid .row .pull_four.eight.columns:first-child, .sixteen.colgrid .row .pull_four.nine.columns:first-child, .sixteen.colgrid .row .pull_four.ten.columns:first-child, .sixteen.colgrid .row .pull_four.eleven.columns:first-child, .sixteen.colgrid .row .pull_four.thirteen.columns:first-child, .sixteen.colgrid .row .pull_four.fourteen.columns:first-child, .sixteen.colgrid .row .pull_four.fifteen.columns:first-child, .sixteen.colgrid .row .pull_five.one.column:first-child, .sixteen.colgrid .row .pull_five.two.columns:first-child, .sixteen.colgrid .row .pull_five.three.columns:first-child, .sixteen.colgrid .row .pull_five.four.columns:first-child, .sixteen.colgrid .row .pull_five.five.columns:first-child, .sixteen.colgrid .row .pull_five.six.columns:first-child, .sixteen.colgrid .row .pull_five.seven.columns:first-child, .sixteen.colgrid .row .pull_five.eight.columns:first-child, .sixteen.colgrid .row .pull_five.nine.columns:first-child, .sixteen.colgrid .row .pull_five.ten.columns:first-child, .sixteen.colgrid .row .pull_five.twelve.columns:first-child, .sixteen.colgrid .row .pull_five.thirteen.columns:first-child, .sixteen.colgrid .row .pull_five.fourteen.columns:first-child, .sixteen.colgrid .row .pull_five.fifteen.columns:first-child, .sixteen.colgrid .row .pull_six.one.column:first-child, .sixteen.colgrid .row .pull_six.two.columns:first-child, .sixteen.colgrid .row .pull_six.three.columns:first-child, .sixteen.colgrid .row .pull_six.four.columns:first-child, .sixteen.colgrid .row .pull_six.five.columns:first-child, .sixteen.colgrid .row .pull_six.six.columns:first-child, .sixteen.colgrid .row .pull_six.seven.columns:first-child, .sixteen.colgrid .row .pull_six.eight.columns:first-child, .sixteen.colgrid .row .pull_six.nine.columns:first-child, .sixteen.colgrid .row .pull_six.eleven.columns:first-child, .sixteen.colgrid .row .pull_six.twelve.columns:first-child, .sixteen.colgrid .row .pull_six.thirteen.columns:first-child, .sixteen.colgrid .row .pull_six.fourteen.columns:first-child, .sixteen.colgrid .row .pull_six.fifteen.columns:first-child, .sixteen.colgrid .row .pull_seven.one.column:first-child, .sixteen.colgrid .row .pull_seven.two.columns:first-child, .sixteen.colgrid .row .pull_seven.three.columns:first-child, .sixteen.colgrid .row .pull_seven.four.columns:first-child, .sixteen.colgrid .row .pull_seven.five.columns:first-child, .sixteen.colgrid .row .pull_seven.six.columns:first-child, .sixteen.colgrid .row .pull_seven.seven.columns:first-child, .sixteen.colgrid .row .pull_seven.eight.columns:first-child, .sixteen.colgrid .row .pull_seven.ten.columns:first-child, .sixteen.colgrid .row .pull_seven.eleven.columns:first-child, .sixteen.colgrid .row .pull_seven.twelve.columns:first-child, .sixteen.colgrid .row .pull_seven.thirteen.columns:first-child, .sixteen.colgrid .row .pull_seven.fourteen.columns:first-child, .sixteen.colgrid .row .pull_seven.fifteen.columns:first-child, .sixteen.colgrid .row .pull_eight.one.column:first-child, .sixteen.colgrid .row .pull_eight.two.columns:first-child, .sixteen.colgrid .row .pull_eight.three.columns:first-child, .sixteen.colgrid .row .pull_eight.four.columns:first-child, .sixteen.colgrid .row .pull_eight.five.columns:first-child, .sixteen.colgrid .row .pull_eight.six.columns:first-child, .sixteen.colgrid .row .pull_eight.seven.columns:first-child, .sixteen.colgrid .row .pull_eight.nine.columns:first-child, .sixteen.colgrid .row .pull_eight.ten.columns:first-child, .sixteen.colgrid .row .pull_eight.eleven.columns:first-child, .sixteen.colgrid .row .pull_eight.twelve.columns:first-child, .sixteen.colgrid .row .pull_eight.thirteen.columns:first-child, .sixteen.colgrid .row .pull_eight.fourteen.columns:first-child, .sixteen.colgrid .row .pull_eight.fifteen.columns:first-child, .sixteen.colgrid .row .pull_nine.one.column:first-child, .sixteen.colgrid .row .pull_nine.two.columns:first-child, .sixteen.colgrid .row .pull_nine.three.columns:first-child, .sixteen.colgrid .row .pull_nine.four.columns:first-child, .sixteen.colgrid .row .pull_nine.five.columns:first-child, .sixteen.colgrid .row .pull_nine.six.columns:first-child, .sixteen.colgrid .row .pull_nine.eight.columns:first-child, .sixteen.colgrid .row .pull_nine.nine.columns:first-child, .sixteen.colgrid .row .pull_nine.ten.columns:first-child, .sixteen.colgrid .row .pull_nine.eleven.columns:first-child, .sixteen.colgrid .row .pull_nine.twelve.columns:first-child, .sixteen.colgrid .row .pull_nine.thirteen.columns:first-child, .sixteen.colgrid .row .pull_nine.fourteen.columns:first-child, .sixteen.colgrid .row .pull_nine.fifteen.columns:first-child, .sixteen.colgrid .row .pull_ten.one.column:first-child, .sixteen.colgrid .row .pull_ten.two.columns:first-child, .sixteen.colgrid .row .pull_ten.three.columns:first-child, .sixteen.colgrid .row .pull_ten.four.columns:first-child, .sixteen.colgrid .row .pull_ten.five.columns:first-child, .sixteen.colgrid .row .pull_ten.seven.columns:first-child, .sixteen.colgrid .row .pull_ten.eight.columns:first-child, .sixteen.colgrid .row .pull_ten.nine.columns:first-child, .sixteen.colgrid .row .pull_ten.ten.columns:first-child, .sixteen.colgrid .row .pull_ten.eleven.columns:first-child, .sixteen.colgrid .row .pull_ten.twelve.columns:first-child, .sixteen.colgrid .row .pull_ten.thirteen.columns:first-child, .sixteen.colgrid .row .pull_ten.fourteen.columns:first-child, .sixteen.colgrid .row .pull_ten.fifteen.columns:first-child, .sixteen.colgrid .row .pull_eleven.one.column:first-child, .sixteen.colgrid .row .pull_eleven.two.columns:first-child, .sixteen.colgrid .row .pull_eleven.three.columns:first-child, .sixteen.colgrid .row .pull_eleven.four.columns:first-child, .sixteen.colgrid .row .pull_eleven.six.columns:first-child, .sixteen.colgrid .row .pull_eleven.seven.columns:first-child, .sixteen.colgrid .row .pull_eleven.eight.columns:first-child, .sixteen.colgrid .row .pull_eleven.nine.columns:first-child, .sixteen.colgrid .row .pull_eleven.ten.columns:first-child, .sixteen.colgrid .row .pull_eleven.eleven.columns:first-child, .sixteen.colgrid .row .pull_eleven.twelve.columns:first-child, .sixteen.colgrid .row .pull_eleven.thirteen.columns:first-child, .sixteen.colgrid .row .pull_eleven.fourteen.columns:first-child, .sixteen.colgrid .row .pull_eleven.fifteen.columns:first-child, .sixteen.colgrid .row .pull_twelve.one.column:first-child, .sixteen.colgrid .row .pull_twelve.two.columns:first-child, .sixteen.colgrid .row .pull_twelve.three.columns:first-child, .sixteen.colgrid .row .pull_twelve.five.columns:first-child, .sixteen.colgrid .row .pull_twelve.six.columns:first-child, .sixteen.colgrid .row .pull_twelve.seven.columns:first-child, .sixteen.colgrid .row .pull_twelve.eight.columns:first-child, .sixteen.colgrid .row .pull_twelve.nine.columns:first-child, .sixteen.colgrid .row .pull_twelve.ten.columns:first-child, .sixteen.colgrid .row .pull_twelve.eleven.columns:first-child, .sixteen.colgrid .row .pull_twelve.twelve.columns:first-child, .sixteen.colgrid .row .pull_twelve.thirteen.columns:first-child, .sixteen.colgrid .row .pull_twelve.fourteen.columns:first-child, .sixteen.colgrid .row .pull_twelve.fifteen.columns:first-child, .sixteen.colgrid .row .pull_thirteen.one.column:first-child, .sixteen.colgrid .row .pull_thirteen.two.columns:first-child, .sixteen.colgrid .row .pull_thirteen.four.columns:first-child, .sixteen.colgrid .row .pull_thirteen.five.columns:first-child, .sixteen.colgrid .row .pull_thirteen.six.columns:first-child, .sixteen.colgrid .row .pull_thirteen.seven.columns:first-child, .sixteen.colgrid .row .pull_thirteen.eight.columns:first-child, .sixteen.colgrid .row .pull_thirteen.nine.columns:first-child, .sixteen.colgrid .row .pull_thirteen.ten.columns:first-child, .sixteen.colgrid .row .pull_thirteen.eleven.columns:first-child, .sixteen.colgrid .row .pull_thirteen.twelve.columns:first-child, .sixteen.colgrid .row .pull_thirteen.thirteen.columns:first-child, .sixteen.colgrid .row .pull_thirteen.fourteen.columns:first-child, .sixteen.colgrid .row .pull_thirteen.fifteen.columns:first-child, .sixteen.colgrid .row .pull_fourteen.one.column:first-child, .sixteen.colgrid .row .pull_fourteen.three.columns:first-child, .sixteen.colgrid .row .pull_fourteen.four.columns:first-child, .sixteen.colgrid .row .pull_fourteen.five.columns:first-child, .sixteen.colgrid .row .pull_fourteen.six.columns:first-child, .sixteen.colgrid .row .pull_fourteen.seven.columns:first-child, .sixteen.colgrid .row .pull_fourteen.eight.columns:first-child, .sixteen.colgrid .row .pull_fourteen.nine.columns:first-child, .sixteen.colgrid .row .pull_fourteen.ten.columns:first-child, .sixteen.colgrid .row .pull_fourteen.eleven.columns:first-child, .sixteen.colgrid .row .pull_fourteen.twelve.columns:first-child, .sixteen.colgrid .row .pull_fourteen.thirteen.columns:first-child, .sixteen.colgrid .row .pull_fourteen.fourteen.columns:first-child, .sixteen.colgrid .row .pull_fourteen.fifteen.columns:first-child, .sixteen.colgrid .row .pull_fifteen.two.columns:first-child, .sixteen.colgrid .row .pull_fifteen.three.columns:first-child, .sixteen.colgrid .row .pull_fifteen.four.columns:first-child, .sixteen.colgrid .row .pull_fifteen.five.columns:first-child, .sixteen.colgrid .row .pull_fifteen.six.columns:first-child, .sixteen.colgrid .row .pull_fifteen.seven.columns:first-child, .sixteen.colgrid .row .pull_fifteen.eight.columns:first-child, .sixteen.colgrid .row .pull_fifteen.nine.columns:first-child, .sixteen.colgrid .row .pull_fifteen.ten.columns:first-child, .sixteen.colgrid .row .pull_fifteen.eleven.columns:first-child, .sixteen.colgrid .row .pull_fifteen.twelve.columns:first-child, .sixteen.colgrid .row .pull_fifteen.thirteen.columns:first-child, .sixteen.colgrid .row .pull_fifteen.fourteen.columns:first-child, .sixteen.colgrid .row .pull_fifteen.fifteen.columns:first-child { margin-left: 0; }
+
+.row .pull_one.eleven.columns, .row .pull_two.ten.columns, .row .pull_three.nine.columns, .row .pull_four.eight.columns, .row .pull_five.seven.columns, .row .pull_six.six.columns, .row .pull_seven.five.columns, .row .pull_eight.four.columns, .row .pull_nine.three.columns, .row .pull_ten.two.columns, .row .pull_eleven.one.columns, .sixteen.colgrid .row .pull_one.fifteen.columns, .sixteen.colgrid .row .pull_two.fourteen.columns, .sixteen.colgrid .row .pull_three.thirteen.columns, .sixteen.colgrid .row .pull_four.twelve.columns, .sixteen.colgrid .row .pull_five.eleven.columns, .sixteen.colgrid .row .pull_six.ten.columns, .sixteen.colgrid .row .pull_seven.nine.columns, .sixteen.colgrid .row .pull_eight.eight.columns, .sixteen.colgrid .row .pull_nine.seven.columns, .sixteen.colgrid .row .pull_ten.six.columns, .sixteen.colgrid .row .pull_eleven.five.columns, .sixteen.colgrid .row .pull_twelve.four.columns, .sixteen.colgrid .row .pull_thirteen.three.columns, .sixteen.colgrid .row .pull_fourteen.two.columns, .sixteen.colgrid .row .pull_fifteen.one.columns { margin-left: -100%; }
+
+/* Hybrid Centered Classes */
+.sixteen.colgrid .row .one.centered { margin-left: 47.87234%; }
+.sixteen.colgrid .row .two.centered { margin-left: 44.68085%; }
+.sixteen.colgrid .row .three.centered { margin-left: 41.48936%; }
+.sixteen.colgrid .row .four.centered { margin-left: 38.29787%; }
+.sixteen.colgrid .row .five.centered { margin-left: 35.10638%; }
+.sixteen.colgrid .row .six.centered { margin-left: 31.91489%; }
+.sixteen.colgrid .row .seven.centered { margin-left: 28.7234%; }
+.sixteen.colgrid .row .eight.centered { margin-left: 25.53191%; }
+.sixteen.colgrid .row .nine.centered { margin-left: 22.34043%; }
+.sixteen.colgrid .row .ten.centered { margin-left: 19.14894%; }
+.sixteen.colgrid .row .eleven.centered { margin-left: 15.95745%; }
+.sixteen.colgrid .row .twelve.centered { margin-left: 12.76596%; }
+.sixteen.colgrid .row .thirteen.centered { margin-left: 9.57447%; }
+.sixteen.colgrid .row .fourteen.centered { margin-left: 6.38298%; }
+.sixteen.colgrid .row .fifteen.centered { margin-left: 3.19149%; }
+
+img, object, embed { max-width: 100%; height: auto; }
+
+img { -ms-interpolation-mode: bicubic; }
+
+#map_canvas img, .map_canvas img { max-width: none !important; }
+
+/* Tile Grid */
+.tiles { display: block; overflow: hidden; }
+.tiles > li, .tiles > .tile { display: block; height: auto; float: left; padding-bottom: 0; }
+.tiles.two_up { margin-left: -4%; }
+.tiles.two_up > li, .tiles.two_up > .tile { margin-left: 4%; width: 46%; }
+.tiles.three_up, .tiles.four_up { margin-left: -2%; }
+.tiles.three_up > li, .tiles.three_up > .tile { margin-left: 2%; width: 31.3%; }
+.tiles.four_up > li, .tiles.four_up > .tile { margin-left: 2%; width: 23%; }
+.tiles.five_up { margin-left: -1.5%; }
+.tiles.five_up > li, .tiles.five_up > .tile { margin-left: 1.5%; width: 18.5%; }
+
+/* Nicolas Gallagher's micro clearfix */
+.clearfix { *zoom: 1; }
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+
+.row { *zoom: 1; }
+.row:before, .row:after { content: ""; display: table; }
+.row:after { clear: both; }
+
+.valign:before { content: ' '; display: inline-block; height: 400px; vertical-align: middle; margin-right: -0.25em; }
+.valign > div, .valign > article, .valign > section, .valign > figure { display: inline-block; vertical-align: middle; }
+
+/* Mobile */
+@media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; }
+  .container { min-width: 0; margin-left: 0; margin-right: 0; }
+  .row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
+  .row .row .column, .row .row .columns { padding: 0; }
+  .row .centered { margin-left: 0 !important; }
+  .column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; }
+  .column:last-child, .columns:last-child { margin-right: 0; float: none; }
+  [class*="column"] + [class*="column"]:last-child { float: none; }
+  [class*="column"]:before { display: table; }
+  [class*="column"]:after { display: table; clear: both; }
+  [class^="push_"], [class*="push_"], [class^="pull_"], [class*="pull_"] { margin-left: 0 !important; } }
+/* Navigation (with dropdowns) */
+.navbar { width: 100%; min-height: 60px; display: block; margin-bottom: 20px; background: #4a4d50; position: relative; }
+@media only screen and (max-width: 767px) { .navbar { border: none; }
+  .navbar .column, .navbar .columns { min-height: 0; } }
+.navbar.fixed { position: fixed; z-index: 99999; }
+.navbar.pinned { position: absolute; }
+.navbar a.toggle { display: none; }
+@media only screen and (max-width: 767px) { .navbar a.toggle { top: 18%; right: 4%; width: 46px; position: absolute; text-align: center; display: inline-block; color: white; background: #4a4d50; height: 40px; line-height: 38px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; font-size: 30px; font-size: 1.875rem; }
+  .navbar a.toggle:hover { background: #565a5d; }
+  .navbar a.toggle:active, .navbar a.toggle.active { background: #3e4043; } }
+
+.navbar .logo { display: inline-block; margin: 0 2.12766% 0 0; padding: 0; height: 60px; line-height: 58px; }
+.navbar .logo a { display: block; padding: 0; overflow: hidden; height: 60px; line-height: 58px; }
+.navbar .logo a img { max-height: 95%; }
+@media only screen and (max-width: 767px) { .navbar .logo { float: left; display: inline; }
+  .navbar .logo a { padding: 0; }
+  .navbar .logo a img { width: auto; height: auto; max-width: 100%; } }
+
+.navbar ul { display: table; vertical-align: middle; margin: 0; float: none; }
+@media only screen and (max-width: 767px) { .navbar ul { position: absolute; display: block; width: 100% !important; height: 0; max-height: 0; top: 60px; left: 0; overflow: hidden; text-align: center; background: #3e4043; }
+  .navbar ul.active { height: auto; max-height: 600px; z-index: 999998; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-box-shadow: 0 2px 2px #252728; -moz-box-shadow: 0 2px 2px #252728; box-shadow: 0 2px 2px #252728; } }
+.navbar ul li { display: table-cell; text-align: center; padding-bottom: 0; margin: 0; height: 60px; line-height: 58px; }
+@media only screen and (max-width: 767px) { .navbar ul li { display: block; position: relative; min-height: 50px; max-height: 320px; height: auto; width: 100%; border-right: 0 !important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } }
+.navbar ul li > a { display: block; padding: 0 16px; white-space: nowrap; color: white; text-shadow: 0 1px 2px #191a1b, 0 1px 0 #191a1b; height: 60px; line-height: 58px; font-size: 16px; font-size: 1rem; }
+.navbar ul li > a i.icon-popup { position: absolute; }
+.navbar ul li .btn { border-color: #000101 !important; }
+.navbar ul li.field { margin-bottom: 0 !important; margin-right: 0; }
+@media only screen and (max-width: 767px) { .navbar ul li.field { padding: 0 20px; } }
+.navbar ul li.field input.search { background: #191a1b; border: none; color: #f2f2f2; }
+.navbar ul li .dropdown { width: auto; min-width: 0; max-width: 320px; height: 0; position: absolute; background: #fafafa; overflow: hidden; z-index: 999; }
+@media only screen and (max-width: 767px) { .navbar ul li .dropdown { width: 100%; max-width: 100%; position: relative; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }
+  .navbar ul li.active .dropdown { border-bottom: 1px solid #313436; }
+  .navbar ul li.active .dropdown ul { position: relative; top: 0; background: #36393b; min-height: 50px; max-height: 250px; height: auto; overflow: auto; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }
+  .navbar ul li.active .dropdown ul li { min-height: 50px; border-bottom: #3e4043; }
+  .navbar ul li.active .dropdown ul li a { color: white; border-bottom: 1px solid #313436; }
+  .navbar ul li.active .dropdown ul li a:hover { color: #d04526; } }
+
+@media only screen and (min-width: 768px) and (max-width: 939px) { .navbar > ul > li > .btn a { padding: 0 10px 0 10px !important; }
+  .navbar ul > li .dropdown ul li.active .dropdown { left: -320px; } }
+
+.navcontain { height: 80px; }
+@media only screen and (max-width: 768px) { .navcontain { height: auto; } }
+
+.pretty.navbar { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7b8085), color-stop(100%, #313436)); background-image: -webkit-linear-gradient(#7b8085, #313436); background-image: -moz-linear-gradient(#7b8085, #313436); background-image: -o-linear-gradient(#7b8085, #313436); background-image: linear-gradient(#7b8085, #313436); -webkit-box-shadow: inset 0 1px 1px #7b8085, 0 1px 2px rgba(0, 0, 0, 0.8) !important; -moz-box-shadow: inset 0 1px 1px #7b8085, 0 1px 2px rgba(0, 0, 0, 0.8) !important; box-shadow: inset 0 1px 1px #7b8085, 0 1px 2px rgba(0, 0, 0, 0.8) !important; /* Remove this line if you don't want a dropshadow on your navigation*/ }
+@media only screen and (max-width: 767px) { .pretty.navbar a.toggle { border: 1px solid #3e4043; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7b8085), color-stop(100%, #4a4d50)); background-image: -webkit-linear-gradient(#7b8085, #4a4d50); background-image: -moz-linear-gradient(#7b8085, #4a4d50); background-image: -o-linear-gradient(#7b8085, #4a4d50); background-image: linear-gradient(#7b8085, #4a4d50); -webkit-box-shadow: inset 0 1px 2px #888d91, inset 0 -1px 1px #565a5d, inset 1px 0 1px #565a5d, inset -1px 0 1px #565a5d, 0 1px 1px #63676a; -moz-box-shadow: inset 0 1px 2px #888d91, inset 0 -1px 1px #565a5d, inset 1px 0 1px #565a5d, inset -1px 0 1px #565a5d, 0 1px 1px #63676a; box-shadow: inset 0 1px 2px #888d91, inset 0 -1px 1px #565a5d, inset 1px 0 1px #565a5d, inset -1px 0 1px #565a5d, 0 1px 1px #63676a; }
+  .pretty.navbar a.toggle i { text-shadow: 0 1px 1px #191a1b; }
+  .pretty.navbar a.toggle:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #888d91), color-stop(100%, #565a5d)); background-image: -webkit-linear-gradient(#888d91, #565a5d); background-image: -moz-linear-gradient(#888d91, #565a5d); background-image: -o-linear-gradient(#888d91, #565a5d); background-image: linear-gradient(#888d91, #565a5d); }
+  .pretty.navbar a.toggle:active, .pretty.navbar a.toggle.active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3e4043), color-stop(100%, #4a4d50)); background-image: -webkit-linear-gradient(#3e4043, #4a4d50); background-image: -moz-linear-gradient(#3e4043, #4a4d50); background-image: -o-linear-gradient(#3e4043, #4a4d50); background-image: linear-gradient(#3e4043, #4a4d50); -webkit-box-shadow: 0 1px 1px #63676a; -moz-box-shadow: 0 1px 1px #63676a; box-shadow: 0 1px 1px #63676a; } }
+.pretty.navbar.row { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
+@media only screen and (max-width: 767px) { .pretty.navbar.row { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } }
+.pretty.navbar ul li.field input.search { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #191a1b), color-stop(100%, #4f5255)); background-image: -webkit-linear-gradient(#191a1b, #4f5255); background-image: -moz-linear-gradient(#191a1b, #4f5255); background-image: -o-linear-gradient(#191a1b, #4f5255); background-image: linear-gradient(#191a1b, #4f5255); border: none; -webkit-box-shadow: 0 1px 2px #888d91 !important; -moz-box-shadow: 0 1px 2px #888d91 !important; box-shadow: 0 1px 2px #888d91 !important; /* Remove this line if you don't want a dropshadow on your navigation*/ }
+.pretty.navbar > ul > li:first-child, .pretty.navbar .pretty.navbar > ul > li:first-child a:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+
+.navbar li .dropdown { width: auto; min-width: 0; max-width: 320px; height: 0; position: absolute; background: #fafafa; overflow: hidden; z-index: 999; }
+@media only screen and (max-width: 767px) { .navbar li .dropdown .dropdown { width: 100%; max-width: 100%; position: relative; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }
+  .navbar li .dropdown.active .dropdown { border-bottom: 1px solid #313436; }
+  .navbar li .dropdown.active .dropdown ul { position: relative; top: 0; background: #36393b; min-height: 50px; max-height: 250px; height: auto; overflow: auto; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }
+  .navbar li .dropdown.active .dropdown ul li { min-height: 50px; border-bottom: #3e4043; }
+  .navbar li .dropdown.active .dropdown ul li a { color: white; border-bottom: 1px solid #313436; }
+  .navbar li .dropdown.active .dropdown ul li a:hover { color: #d04526; } }
+
+.navbar li .dropdown ul { margin: 0; display: block; }
+.navbar li .dropdown ul > li { position: relative; display: block; width: 100%; float: left; text-align: left; height: auto; -webkit-border-radius: none; -moz-border-radius: none; -ms-border-radius: none; -o-border-radius: none; border-radius: none; }
+@media only screen and (min-width: 768px) and (max-width: 939px) { .navbar li .dropdown ul > li { max-width: 320px; word-wrap: break-word; } }
+.navbar li .dropdown ul > li a { display: block; padding: 0 20px; color: #d04526; border-bottom: 1px solid #cccccc; text-shadow: none; height: 51px; line-height: 49px; }
+@media only screen and (max-width: 767px) { .navbar li .dropdown ul > li a { padding: 0 20px; } }
+.navbar li .dropdown ul > li .dropdown { display: none; background: white; }
+.navbar li .dropdown ul li:first-child a { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
+
+.gumby-no-touch .navbar ul li:hover > a, .gumby-touch .navbar ul li.active > a { position: relative; background: #868d92; z-index: 1000; }
+
+.gumby-no-touch .navbar ul li:hover .dropdown, .gumby-touch .navbar ul li.active .dropdown { min-height: 50px; max-height: 561px; overflow: visible; height: auto; width: 100%; padding: 0; border-top: 1px solid #3e4043; -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); }
+
+.gumby-no-touch .navbar ul li:hover .dropdown ul { position: relative; top: 0; min-height: 50px; max-height: 250px; height: auto; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
+@media only screen and (max-width: 767px) { .gumby-no-touch .navbar ul li:hover .dropdown ul { overflow: auto; background: #36393b; }
+  .gumby-no-touch .navbar ul li:hover .dropdown ul li { border-bottom: #3e4043; }
+  .gumby-no-touch .navbar ul li:hover .dropdown ul li a { color: white; border-bottom: 1px solid #313436; }
+  .gumby-no-touch .navbar ul li:hover .dropdown ul li a:hover { color: #d04526; } }
+
+.gumby-no-touch .navbar li .dropdown ul > li:hover .dropdown, .gumby-touch .navbar li .dropdown ul > li.active .dropdown { border-top: none; display: block; position: absolute; z-index: 9999; left: 100%; top: 0; margin-top: 0; }
+@media only screen and (max-width: 767px) { .gumby-no-touch .navbar li .dropdown ul > li:hover .dropdown, .gumby-touch .navbar li .dropdown ul > li.active .dropdown { position: relative; left: 0; }
+  .gumby-no-touch .navbar li .dropdown ul > li:hover .dropdown ul, .gumby-touch .navbar li .dropdown ul > li.active .dropdown ul { background: #252728 !important; } }
+
+.gumby-no-touch .navbar li .dropdown ul li a:hover { background: #f2f2f2; }
+
+.gumby-touch .navbar a:hover { color: white !important; }
+
+.subnav { display: block; width: auto; overflow: hidden; margin: 0 0 18px 0; padding-top: 4px; }
+.subnav li, .subnav dt, .subnav dd { float: left; display: inline; margin-left: 9px; margin-bottom: 4px; }
+.subnav li:first-child, .subnav dt:first-child, .subnav dd:first-child { margin-left: 0; }
+.subnav dt { color: #f2f2f2; font-weight: normal; }
+.subnav li a, .subnav dd a { color: white; font-size: 15px; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
+.subnav li.active a, .subnav dd.active a { background: #4a4d50; padding: 5px 9px; text-shadow: 0 1px 1px #4a4d50; }
+
+/* Buttons */
+.btn, .skiplink { display: inline-block; width: auto; background: #f2f2f2; -webkit-appearance: none; font-family: "Open Sans"; font-weight: 600; padding: 0 !important; text-align: center; }
+.btn > a, .btn input, .btn button, .skiplink > a, .skiplink input, .skiplink button { display: block; padding: 0 18px; color: white; height: 100%; }
+.btn input, .btn button, .skiplink input, .skiplink button { background: none; border: none; width: 100%; font-size: 100%; cursor: pointer; font-weight: 400; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
+
+.btn.xlarge, .skiplink.xlarge { font-size: 30px; font-size: 1.875rem; height: 66px; line-height: 64px; }
+.btn.xlarge a, .skiplink.xlarge a { position: relative; padding: 0 30px; }
+.btn.xlarge.icon-left a, .skiplink.xlarge.icon-left a { padding-left: 66px; }
+.btn.xlarge.icon-left a:before, .skiplink.xlarge.icon-left a:before { left: 20px; }
+.btn.xlarge.icon-right a, .skiplink.xlarge.icon-right a { padding-right: 66px; }
+.btn.xlarge.icon-right a:after, .skiplink.xlarge.icon-right a:after { right: 20px; }
+.btn.large, .skiplink.large { font-size: 26px; font-size: 1.625rem; height: 58px; line-height: 56px; }
+.btn.large a, .skiplink.large a { position: relative; padding: 0 26px; }
+.btn.large.icon-left a, .skiplink.large.icon-left a { padding-left: 58px; }
+.btn.large.icon-left a:before, .skiplink.large.icon-left a:before { left: 17.33333px; }
+.btn.large.icon-right a, .skiplink.large.icon-right a { padding-right: 58px; }
+.btn.large.icon-right a:after, .skiplink.large.icon-right a:after { right: 17.33333px; }
+.btn.medium, .skiplink.medium { font-size: 16px; font-size: 1rem; height: 36px; line-height: 34px; }
+.btn.medium a, .skiplink.medium a { position: relative; padding: 0 16px; }
+.btn.medium.icon-left a, .skiplink.medium.icon-left a { padding-left: 36px; }
+.btn.medium.icon-left a:before, .skiplink.medium.icon-left a:before { left: 10.66667px; }
+.btn.medium.icon-right a, .skiplink.medium.icon-right a { padding-right: 36px; }
+.btn.medium.icon-right a:after, .skiplink.medium.icon-right a:after { right: 10.66667px; }
+.btn.medium a, .skiplink.medium a { padding: 0 18px; }
+.btn.small, .skiplink.small { font-size: 10px; font-size: 0.625rem; height: 23px; line-height: 21px; }
+.btn.small a, .skiplink.small a { position: relative; padding: 0 10px; }
+.btn.small.icon-left a, .skiplink.small.icon-left a { padding-left: 23px; }
+.btn.small.icon-left a:before, .skiplink.small.icon-left a:before { left: 6.66667px; }
+.btn.small.icon-right a, .skiplink.small.icon-right a { padding-right: 23px; }
+.btn.small.icon-right a:after, .skiplink.small.icon-right a:after { right: 6.66667px; }
+.btn.small a, .skiplink.small a { padding: 0 10px; }
+.btn.oval, .skiplink.oval { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; }
+.btn.pill-left, .skiplink.pill-left { -webkit-border-radius: 500px 0 0 500px; -moz-border-radius: 500px 0 0 500px; -ms-border-radius: 500px 0 0 500px; -o-border-radius: 500px 0 0 500px; border-radius: 500px 0 0 500px; }
+.btn.pill-right, .skiplink.pill-right { -webkit-border-radius: 0 500px 500px 0; -moz-border-radius: 0 500px 500px 0; -ms-border-radius: 0 500px 500px 0; -o-border-radius: 0 500px 500px 0; border-radius: 0 500px 500px 0; }
+
+.btn.primary, .skiplink.primary { background: #3085d6; border: 1px solid #3085d6; }
+.btn.primary:hover, .skiplink.primary:hover { background: #5b9ede; }
+.btn.primary:active, .skiplink.primary:active { background: #236bb0; }
+.btn.secondary, .skiplink.secondary { background: #42a35a; border: 1px solid #42a35a; }
+.btn.secondary:hover, .skiplink.secondary:hover { background: #5bbd73; }
+.btn.secondary:active, .skiplink.secondary:active { background: #337f46; }
+.btn.default, .skiplink.default { background: #f2f2f2; border: 1px solid #f2f2f2; color: #555555; border: 1px solid #f2f2f2; }
+.btn.default:hover, .skiplink.default:hover { background: white; }
+.btn.default:active, .skiplink.default:active { background: #d8d8d8; }
+.btn.default:hover, .skiplink.default:hover { border: 1px solid #e5e5e5; }
+.btn.default a, .btn.default input, .btn.default button, .skiplink.default a, .skiplink.default input, .skiplink.default button { color: #555555; }
+.btn.info, .skiplink.info { background: #4a4d50; border: 1px solid #4a4d50; }
+.btn.info:hover, .skiplink.info:hover { background: #63676a; }
+.btn.info:active, .skiplink.info:active { background: #313436; }
+.btn.danger, .skiplink.danger { background: #ca3838; border: 1px solid #ca3838; }
+.btn.danger:hover, .skiplink.danger:hover { background: #d56060; }
+.btn.danger:active, .skiplink.danger:active { background: #a32c2c; }
+.btn.warning, .skiplink.warning { background: #f6b83f; border: 1px solid #f6b83f; color: #644405; }
+.btn.warning:hover, .skiplink.warning:hover { background: #f8ca70; }
+.btn.warning:active, .skiplink.warning:active { background: #f4a60e; }
+.btn.warning a, .btn.warning input, .btn.warning button, .skiplink.warning a, .skiplink.warning input, .skiplink.warning button { color: #644405; }
+.btn.success, .skiplink.success { background: #58c026; border: 1px solid #58c026; }
+.btn.success:hover, .skiplink.success:hover { background: #72d940; }
+.btn.success:active, .skiplink.success:active { background: #44951e; }
+
+.btn.metro, .metro .btn, .metro .skiplink, .skiplink.metro, .btn.pretty.squared, .pretty .squared.btn, .pretty .squared.skiplink, .pretty .btn.squared { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
+
+.btn.pretty, .pretty .btn, .pretty .skiplink, .skiplink.pretty, .btn.metro.rounded, .metro .rounded.btn, .metro .rounded.skiplink, .metro .btn.rounded { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
+
+.btn.pretty.primary, .pretty .primary.btn, .pretty .primary.skiplink, .skiplink.pretty.primary { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #85b7e7), color-stop(100%, #2a85dc)); background-image: -webkit-linear-gradient(#85b7e7, #2a85dc); background-image: -moz-linear-gradient(#85b7e7, #2a85dc); background-image: -o-linear-gradient(#85b7e7, #2a85dc); background-image: linear-gradient(#85b7e7, #2a85dc); -webkit-box-shadow: inset 0 0 3px #f0f6fc; -moz-box-shadow: inset 0 0 3px #f0f6fc; box-shadow: inset 0 0 3px #f0f6fc; border: 1px solid #1f5e9b; }
+.btn.pretty.primary:hover, .pretty .primary.btn:hover, .pretty .primary.skiplink:hover, .skiplink.pretty.primary:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a2d4fc), color-stop(100%, #54b2fe)); background-image: -webkit-linear-gradient(#a2d4fc, #54b2fe); background-image: -moz-linear-gradient(#a2d4fc, #54b2fe); background-image: -o-linear-gradient(#a2d4fc, #54b2fe); background-image: linear-gradient(#a2d4fc, #54b2fe); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; border: 1px solid #0e90f8; }
+.btn.pretty.primary:active, .pretty .primary.btn:active, .pretty .primary.skiplink:active, .skiplink.pretty.primary:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2a85dc), color-stop(100%, #85b7e7)); background-image: -webkit-linear-gradient(#2a85dc, #85b7e7); background-image: -moz-linear-gradient(#2a85dc, #85b7e7); background-image: -o-linear-gradient(#2a85dc, #85b7e7); background-image: linear-gradient(#2a85dc, #85b7e7); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; }
+.btn.pretty.primary a, .pretty .primary.btn a, .pretty .primary.skiplink a, .btn.pretty.primary input, .pretty .primary.btn input, .pretty .primary.skiplink input, .btn.pretty.primary button, .pretty .primary.btn button, .pretty .primary.skiplink button, .skiplink.pretty.primary a, .skiplink.pretty.primary input, .skiplink.pretty.primary button { text-shadow: 0 1px 1px #1a5186; }
+.btn.pretty.secondary, .pretty .secondary.btn, .pretty .secondary.skiplink, .skiplink.pretty.secondary { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80cb92), color-stop(100%, #3ca957)); background-image: -webkit-linear-gradient(#80cb92, #3ca957); background-image: -moz-linear-gradient(#80cb92, #3ca957); background-image: -o-linear-gradient(#80cb92, #3ca957); background-image: linear-gradient(#80cb92, #3ca957); -webkit-box-shadow: inset 0 0 3px #daf0e0; -moz-box-shadow: inset 0 0 3px #daf0e0; box-shadow: inset 0 0 3px #daf0e0; border: 1px solid #2c6d3c; }
+.btn.pretty.secondary:hover, .pretty .secondary.btn:hover, .pretty .secondary.skiplink:hover, .skiplink.pretty.secondary:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a1d3ad), color-stop(100%, #68c07d)); background-image: -webkit-linear-gradient(#a1d3ad, #68c07d); background-image: -moz-linear-gradient(#a1d3ad, #68c07d); background-image: -o-linear-gradient(#a1d3ad, #68c07d); background-image: linear-gradient(#a1d3ad, #68c07d); -webkit-box-shadow: inset 0 0 3px #f8fcf9; -moz-box-shadow: inset 0 0 3px #f8fcf9; box-shadow: inset 0 0 3px #f8fcf9; border: 1px solid #469659; }
+.btn.pretty.secondary:active, .pretty .secondary.btn:active, .pretty .secondary.skiplink:active, .skiplink.pretty.secondary:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3ca957), color-stop(100%, #80cb92)); background-image: -webkit-linear-gradient(#3ca957, #80cb92); background-image: -moz-linear-gradient(#3ca957, #80cb92); background-image: -o-linear-gradient(#3ca957, #80cb92); background-image: linear-gradient(#3ca957, #80cb92); -webkit-box-shadow: inset 0 0 3px #ecf8ef; -moz-box-shadow: inset 0 0 3px #ecf8ef; box-shadow: inset 0 0 3px #ecf8ef; }
+.btn.pretty.secondary a, .pretty .secondary.btn a, .pretty .secondary.skiplink a, .btn.pretty.secondary input, .pretty .secondary.btn input, .pretty .secondary.skiplink input, .btn.pretty.secondary button, .pretty .secondary.btn button, .pretty .secondary.skiplink button, .skiplink.pretty.secondary a, .skiplink.pretty.secondary input, .skiplink.pretty.secondary button { text-shadow: 0 1px 1px #255a32; }
+.btn.pretty.default, .pretty .default.btn, .pretty .default.skiplink, .skiplink.pretty.default { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f3f1f1)); background-image: -webkit-linear-gradient(#ffffff, #f3f1f1); background-image: -moz-linear-gradient(#ffffff, #f3f1f1); background-image: -o-linear-gradient(#ffffff, #f3f1f1); background-image: linear-gradient(#ffffff, #f3f1f1); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; border: 1px solid #cccccc; }
+.btn.pretty.default:hover, .pretty .default.btn:hover, .pretty .default.skiplink:hover, .skiplink.pretty.default:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(#ffffff, #ffffff); background-image: -moz-linear-gradient(#ffffff, #ffffff); background-image: -o-linear-gradient(#ffffff, #ffffff); background-image: linear-gradient(#ffffff, #ffffff); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; border: 1px solid #d9d9d9; }
+.btn.pretty.default:active, .pretty .default.btn:active, .pretty .default.skiplink:active, .skiplink.pretty.default:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f1f1), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(#f3f1f1, #ffffff); background-image: -moz-linear-gradient(#f3f1f1, #ffffff); background-image: -o-linear-gradient(#f3f1f1, #ffffff); background-image: linear-gradient(#f3f1f1, #ffffff); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; }
+.btn.pretty.default a, .pretty .default.btn a, .pretty .default.skiplink a, .btn.pretty.default input, .pretty .default.btn input, .pretty .default.skiplink input, .btn.pretty.default button, .pretty .default.btn button, .pretty .default.skiplink button, .skiplink.pretty.default a, .skiplink.pretty.default input, .skiplink.pretty.default button { text-shadow: 0 1px 1px white; }
+.btn.pretty.info, .pretty .info.btn, .pretty .info.skiplink, .skiplink.pretty.info { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7b8085), color-stop(100%, #464d54)); background-image: -webkit-linear-gradient(#7b8085, #464d54); background-image: -moz-linear-gradient(#7b8085, #464d54); background-image: -o-linear-gradient(#7b8085, #464d54); background-image: linear-gradient(#7b8085, #464d54); -webkit-box-shadow: inset 0 0 3px #bdc0c2; -moz-box-shadow: inset 0 0 3px #bdc0c2; box-shadow: inset 0 0 3px #bdc0c2; border: 1px solid #252728; }
+.btn.pretty.info:hover, .pretty .info.btn:hover, .pretty .info.skiplink:hover, .skiplink.pretty.info:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aeb3b6), color-stop(100%, #808e98)); background-image: -webkit-linear-gradient(#aeb3b6, #808e98); background-image: -moz-linear-gradient(#aeb3b6, #808e98); background-image: -o-linear-gradient(#aeb3b6, #808e98); background-image: linear-gradient(#aeb3b6, #808e98); -webkit-box-shadow: inset 0 0 3px #f1f2f3; -moz-box-shadow: inset 0 0 3px #f1f2f3; box-shadow: inset 0 0 3px #f1f2f3; border: 1px solid #60676b; }
+.btn.pretty.info:active, .pretty .info.btn:active, .pretty .info.skiplink:active, .skiplink.pretty.info:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #464d54), color-stop(100%, #7b8085)); background-image: -webkit-linear-gradient(#464d54, #7b8085); background-image: -moz-linear-gradient(#464d54, #7b8085); background-image: -o-linear-gradient(#464d54, #7b8085); background-image: linear-gradient(#464d54, #7b8085); -webkit-box-shadow: inset 0 0 3px #cbcdce; -moz-box-shadow: inset 0 0 3px #cbcdce; box-shadow: inset 0 0 3px #cbcdce; }
+.btn.pretty.info a, .pretty .info.btn a, .pretty .info.skiplink a, .btn.pretty.info input, .pretty .info.btn input, .pretty .info.skiplink input, .btn.pretty.info button, .pretty .info.btn button, .pretty .info.skiplink button, .skiplink.pretty.info a, .skiplink.pretty.info input, .skiplink.pretty.info button { text-shadow: 0 1px 1px #191a1b; }
+.btn.pretty.danger, .pretty .danger.btn, .pretty .danger.skiplink, .skiplink.pretty.danger { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #df8989), color-stop(100%, #d03232)); background-image: -webkit-linear-gradient(#df8989, #d03232); background-image: -moz-linear-gradient(#df8989, #d03232); background-image: -o-linear-gradient(#df8989, #d03232); background-image: linear-gradient(#df8989, #d03232); -webkit-box-shadow: inset 0 0 3px #faeded; -moz-box-shadow: inset 0 0 3px #faeded; box-shadow: inset 0 0 3px #faeded; border: 1px solid #8f2626; }
+.btn.pretty.danger:hover, .pretty .danger.btn:hover, .pretty .danger.skiplink:hover, .skiplink.pretty.danger:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f79696), color-stop(100%, #f64a4a)); background-image: -webkit-linear-gradient(#f79696, #f64a4a); background-image: -moz-linear-gradient(#f79696, #f64a4a); background-image: -o-linear-gradient(#f79696, #f64a4a); background-image: linear-gradient(#f79696, #f64a4a); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; border: 1px solid #e21212; }
+.btn.pretty.danger:active, .pretty .danger.btn:active, .pretty .danger.skiplink:active, .skiplink.pretty.danger:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d03232), color-stop(100%, #df8989)); background-image: -webkit-linear-gradient(#d03232, #df8989); background-image: -moz-linear-gradient(#d03232, #df8989); background-image: -o-linear-gradient(#d03232, #df8989); background-image: linear-gradient(#d03232, #df8989); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; }
+.btn.pretty.danger a, .pretty .danger.btn a, .pretty .danger.skiplink a, .btn.pretty.danger input, .pretty .danger.btn input, .pretty .danger.skiplink input, .btn.pretty.danger button, .pretty .danger.btn button, .pretty .danger.skiplink button, .skiplink.pretty.danger a, .skiplink.pretty.danger input, .skiplink.pretty.danger button { text-shadow: 0 1px 1px #7b2121; }
+.btn.pretty.warning, .pretty .warning.btn, .pretty .warning.skiplink, .skiplink.pretty.warning { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbdca0), color-stop(100%, #fbba3a)); background-image: -webkit-linear-gradient(#fbdca0, #fbba3a); background-image: -moz-linear-gradient(#fbdca0, #fbba3a); background-image: -o-linear-gradient(#fbdca0, #fbba3a); background-image: linear-gradient(#fbdca0, #fbba3a); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; border: 1px solid #de960a; color: #644405; }
+.btn.pretty.warning:hover, .pretty .warning.btn:hover, .pretty .warning.skiplink:hover, .skiplink.pretty.warning:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #feecca), color-stop(100%, #ffd37d)); background-image: -webkit-linear-gradient(#feecca, #ffd37d); background-image: -moz-linear-gradient(#feecca, #ffd37d); background-image: -o-linear-gradient(#feecca, #ffd37d); background-image: linear-gradient(#feecca, #ffd37d); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; border: 1px solid #fcb834; }
+.btn.pretty.warning:active, .pretty .warning.btn:active, .pretty .warning.skiplink:active, .skiplink.pretty.warning:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbba3a), color-stop(100%, #fbdca0)); background-image: -webkit-linear-gradient(#fbba3a, #fbdca0); background-image: -moz-linear-gradient(#fbba3a, #fbdca0); background-image: -o-linear-gradient(#fbba3a, #fbdca0); background-image: linear-gradient(#fbba3a, #fbdca0); -webkit-box-shadow: inset 0 0 3px white; -moz-box-shadow: inset 0 0 3px white; box-shadow: inset 0 0 3px white; }
+.btn.pretty.warning a, .pretty .warning.btn a, .pretty .warning.skiplink a, .btn.pretty.warning input, .pretty .warning.btn input, .pretty .warning.skiplink input, .btn.pretty.warning button, .pretty .warning.btn button, .pretty .warning.skiplink button, .skiplink.pretty.warning a, .skiplink.pretty.warning input, .skiplink.pretty.warning button { text-shadow: 0 1px 1px #fbdca0; }
+.btn.pretty.success, .pretty .success.btn, .pretty .success.skiplink, .skiplink.pretty.success { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #91e26a), color-stop(100%, #56c620)); background-image: -webkit-linear-gradient(#91e26a, #56c620); background-image: -moz-linear-gradient(#91e26a, #56c620); background-image: -o-linear-gradient(#91e26a, #56c620); background-image: linear-gradient(#91e26a, #56c620); -webkit-box-shadow: inset 0 0 3px #e0f7d5; -moz-box-shadow: inset 0 0 3px #e0f7d5; box-shadow: inset 0 0 3px #e0f7d5; border: 1px solid #3b8019; }
+.btn.pretty.success:hover, .pretty .success.btn:hover, .pretty .success.skiplink:hover, .skiplink.pretty.success:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #96e570), color-stop(100%, #64df29)); background-image: -webkit-linear-gradient(#96e570, #64df29); background-image: -moz-linear-gradient(#96e570, #64df29); background-image: -o-linear-gradient(#96e570, #64df29); background-image: linear-gradient(#96e570, #64df29); -webkit-box-shadow: inset 0 0 3px #e5f9db; -moz-box-shadow: inset 0 0 3px #e5f9db; box-shadow: inset 0 0 3px #e5f9db; border: 1px solid #479f1d; }
+.btn.pretty.success:active, .pretty .success.btn:active, .pretty .success.skiplink:active, .skiplink.pretty.success:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #56c620), color-stop(100%, #91e26a)); background-image: -webkit-linear-gradient(#56c620, #91e26a); background-image: -moz-linear-gradient(#56c620, #91e26a); background-image: -o-linear-gradient(#56c620, #91e26a); background-image: linear-gradient(#56c620, #91e26a); -webkit-box-shadow: inset 0 0 3px #f0fbea; -moz-box-shadow: inset 0 0 3px #f0fbea; box-shadow: inset 0 0 3px #f0fbea; }
+.btn.pretty.success a, .pretty .success.btn a, .pretty .success.skiplink a, .btn.pretty.success input, .pretty .success.btn input, .pretty .success.skiplink input, .btn.pretty.success button, .pretty .success.btn button, .pretty .success.skiplink button, .skiplink.pretty.success a, .skiplink.pretty.success input, .skiplink.pretty.success button { text-shadow: 0 1px 1px #316b15; }
+
+/* Icons */
+[class^="icon-"] a:before, [class*=" icon-"] a:before, [class^="icon-"] a:after, [class*=" icon-"] a:after, i[class^="icon-"], i[class*=" icon-"] { font-family: "entypo"; position: absolute; text-decoration: none; zoom: 1; }
+
+i[class^="icon-"], i[class*=" icon-"] { display: inline-block; position: static; min-width: 20px; margin: 0 5px; text-align: center; }
+
+/* Form Styles */
+form { margin: 0 0 18px; }
+form label { display: block; font-size: 16px; font-size: 1rem; line-height: 1.625em; cursor: pointer; margin-bottom: 9px; }
+form label.inline { display: inline-block; padding-right: 20px; }
+form dt { margin: 0; }
+form textarea { height: 150px; }
+form ul, form ul li { margin-left: 0; list-style-type: none; }
+form fieldset { border-style: solid; border-width: 0.0625em; padding: 1.5625em; border-color: #d8d8d8; margin: 18px 0; }
+form fieldset legend { padding: 5px 10px; }
+
+.field { position: relative; max-width: 100%; margin-bottom: 10px; vertical-align: middle; font-size: 16px; overflow: hidden; }
+.field.metro, .field .metro { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
+.field input, .field input[type="*"], .field textarea { max-width: 100%; width: 100%; padding: 0; margin: 0; border: none; outline: none; resize: none; -webkit-appearance: none; font-family: "Open Sans"; font-weight: 300; font-size: 16px; font-size: 1rem; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.field .input { position: relative; padding: 0 10px; background: #fff; border: 1px solid #d8d8d8; height: 36px; line-height: 34px; font-size: 16px; font-size: 1rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
+.field .input.search { height: 36px; line-height: 34px; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; padding-right: 0; }
+.field .input.textarea { height: auto; }
+
+input.xnarrow, .input.xnarrow { width: 13.33333%; margin: 0; }
+input.xnarrow:last-child, .input.xnarrow:last-child { margin-left: -4px; }
+input.xnarrow:first-child, .input.xnarrow:first-child { margin-right: 3.94%; margin-left: 0; }
+input.xnarrow:first-child:last-child, .input.xnarrow:first-child:last-child { margin: 0; }
+input.narrow, .input.narrow { width: 30.66667%; margin: 0; }
+input.narrow:last-child, .input.narrow:last-child { margin-left: -4px; }
+input.narrow:first-child, .input.narrow:first-child { margin-right: 3.94%; margin-left: 0; }
+input.narrow:first-child:last-child, .input.narrow:first-child:last-child { margin: 0; }
+input.normal, .input.normal { width: 48%; margin: 0; }
+input.normal:last-child, .input.normal:last-child { margin-left: -4px; }
+input.normal:first-child, .input.normal:first-child { margin-right: 3.94%; margin-left: 0; }
+input.normal:first-child:last-child, .input.normal:first-child:last-child { margin: 0; }
+input.wide, .input.wide { width: 65.33333%; margin: 0; }
+input.wide:last-child, .input.wide:last-child { margin-left: -4px; }
+input.wide:first-child, .input.wide:first-child { margin-right: 3.94%; margin-left: 0; }
+input.wide:first-child:last-child, .input.wide:first-child:last-child { margin: 0; }
+input.xwide, .input.xwide { width: 82.66667%; margin: 0; }
+input.xwide:last-child, .input.xwide:last-child { margin-left: -4px; }
+input.xwide:first-child, .input.xwide:first-child { margin-right: 3.94%; margin-left: 0; }
+input.xwide:first-child:last-child, .input.xwide:first-child:last-child { margin: 0; }
+input.xxwide, .input.xxwide { width: 100%; margin: 0; }
+input.xxwide:last-child, .input.xxwide:last-child { margin-left: -4px; }
+input.xxwide:first-child, .input.xxwide:first-child { margin-right: 3.94%; margin-left: 0; }
+input.xxwide:first-child:last-child, .input.xxwide:first-child:last-child { margin: 0; }
+
+label + .xnarrow:last-child, label + .narrow:last-child, label + .normal:last-child, label + .wide:last-child, label + .xwide:last-child, label + .xxwide:last-child { margin-left: 0; }
+
+@media only screen and (max-width: 960px) { .xxwide:first-child, .xxwide:last-child { margin-right: 0%; } }
+/* remove inline-block white-space — A 0px font-size = 0px of white space */
+.prepend, .append { font-size: 0; white-space: nowrap; padding-bottom: 3.5px; }
+
+.prepend input, .prepend .input, .append input, .append .input { display: inline-block; max-width: 100%; margin-right: 0; margin-left: 0; }
+
+.prepend input, .prepend .input, .prepend.append input:last-child, .append *:last-child { -webkit-border-radius: 0px 4px 4px 0; -moz-border-radius: 0px 4px 4px 0; -ms-border-radius: 0px 4px 4px 0; -o-border-radius: 0px 4px 4px 0; border-radius: 0px 4px 4px 0; }
+
+.append input, .append .input, .prepend.append input:first-child, .prepend *:first-child { -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -ms-border-radius: 4px 0 0 4px; -o-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; }
+
+.prepend.append input { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
+
+.prepend.append input:last-child { margin-left: -1px; }
+
+.prepend .adjoined, .append .adjoined, .prepend .btn, .append .btn { position: relative; display: inline-block; margin-bottom: 0; z-index: 99; }
+
+.prepend .btn a, .prepend .btn input, .prepend .btn button, .append .btn a, .append .btn input, .append .btn button { padding: 0 12px; }
+
+.prepend .adjoined, .append .adjoined { padding: 0 10px 0 10px; background: #f2f2f2; border: 1px solid #d8d8d8; font-family: "Open Sans"; font-weight: 600; color: #555555; font-size: 16px; font-size: 1rem; height: 36px; line-height: 34px; }
+
+.prepend .adjoined, .prepend .btn { margin-right: -1px; }
+
+.adjoined:first-child { margin-left: 0 !important; }
+
+.append .adjoined, .append .btn { margin-left: -1px; }
+
+.append button, .prepend button { display: inline-block; }
+
+.prepend input:first-child, .append input:first-child, .prepend .input:first-child, .append .input:first-child { margin-right: 0; }
+
+.double input, .double .input { width: 50% !important; }
+.double input:last-child, .double .input:last-child { margin-left: -1px; }
+
+.field input, .field .input, .field textarea, .field .textarea, .field .radio span, .field .checkbox span, .field .picker { -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; }
+.field.danger:after { font-family: "entypo"; content: "\2716"; font-size: 16px; position: absolute; top: 14%; right: 15px; z-index: 999; color: #ca3838; }
+.field.danger.no-icon:after { display: none; }
+.field.danger.append:after, .field.danger.prepend:after { content: ""; }
+.field.danger input, .field.danger .input, .field.danger textarea, .field.danger .textarea, .field.danger .radio span, .field.danger .checkbox span, .field.danger .picker { border-color: #ca3838; background: #f0c5c5; }
+.field.danger input, .field.danger .input, .field.danger textarea, .field.danger .textarea, .field.danger .radio span, .field.danger .checkbox span, .field.danger .picker, .field.danger input::-webkit-input-placeholder, .field.danger textarea::-webkit-input-placeholder, .field.danger input:-moz-placeholder, .field.danger textarea:-moz-placeholder textarea { color: #ca3838; }
+.field.warning:after { font-family: "entypo"; content: "\26a0"; font-size: 16px; position: absolute; top: 14%; right: 15px; z-index: 999; color: #f6b83f; }
+.field.warning.no-icon:after { display: none; }
+.field.warning.append:after, .field.warning.prepend:after { content: ""; }
+.field.warning input, .field.warning .input, .field.warning textarea, .field.warning .textarea, .field.warning .radio span, .field.warning .checkbox span, .field.warning .picker { border-color: #f6b83f; background: #fef7ea; }
+.field.warning input, .field.warning .input, .field.warning textarea, .field.warning .textarea, .field.warning .radio span, .field.warning .checkbox span, .field.warning .picker, .field.warning input::-webkit-input-placeholder, .field.warning textarea::-webkit-input-placeholder, .field.warning input:-moz-placeholder, .field.warning textarea:-moz-placeholder textarea { color: #f6b83f; }
+.field.success:after { font-family: "entypo"; content: "\2713"; font-size: 16px; position: absolute; top: 14%; right: 15px; z-index: 999; color: #58c026; }
+.field.success.no-icon:after { display: none; }
+.field.success.append:after, .field.success.prepend:after { content: ""; }
+.field.success input, .field.success .input, .field.success textarea, .field.success .textarea, .field.success .radio span, .field.success .checkbox span, .field.success .picker { border-color: #58c026; background: #c0eeaa; }
+.field.success input, .field.success .input, .field.success textarea, .field.success .textarea, .field.success .radio span, .field.success .checkbox span, .field.success .picker, .field.success input::-webkit-input-placeholder, .field.success textarea::-webkit-input-placeholder, .field.success input:-moz-placeholder, .field.success textarea:-moz-placeholder textarea { color: #58c026; }
+.field .picker.danger { border-color: #ca3838; color: #ca3838; background: #f0c5c5; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; }
+.field .picker.danger select, .field .picker.danger:after { color: #ca3838; }
+.field .picker.warning { border-color: #f6b83f; color: #f6b83f; background: #fef7ea; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; }
+.field .picker.warning select, .field .picker.warning:after { color: #f6b83f; }
+.field .picker.success { border-color: #58c026; color: #58c026; background: #c0eeaa; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; }
+.field .picker.success select, .field .picker.success:after { color: #58c026; }
+
+.field .text input[type="search"] { -webkit-appearance: textfield; }
+
+.no-js .radio input { -webkit-appearance: radio; margin-left: 1px; }
+.no-js .checkbox input { -webkit-appearance: checkbox; }
+.no-js .radio input, .no-js .checkbox input { display: inline-block; width: 16px; }
+
+.js .field .radio, .js .field .checkbox { position: relative; }
+.js .field .radio.danger, .js .field .checkbox.danger { color: #ca3838; }
+.js .field .radio.danger span, .js .field .checkbox.danger span { border-color: #ca3838; color: #ca3838; background: #f0c5c5; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; }
+.js .field .radio.warning, .js .field .checkbox.warning { color: #f6b83f; }
+.js .field .radio.warning span, .js .field .checkbox.warning span { border-color: #f6b83f; color: #f6b83f; background: #fef7ea; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; }
+.js .field .radio.success, .js .field .checkbox.success { color: #58c026; color: #555555; }
+.js .field .radio.success i, .js .field .checkbox.success i { color: #58c026; }
+.js .field .radio.success span, .js .field .checkbox.success span { border-color: #58c026; color: #58c026; background: #c0eeaa; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; }
+.js .field .radio.checked i, .js .field .checkbox.checked i { position: absolute; top: -1px; left: -8px; line-height: 16px; }
+.js .field .radio span, .js .field .checkbox span { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px #ccc; background: #fefefe; }
+.js .field .radio input[type="radio"], .js .field .radio input[type="checkbox"], .js .field .checkbox input[type="radio"], .js .field .checkbox input[type="checkbox"] { display: none; }
+.js .field .radio span { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }
+.js .field .checkbox span { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
+
+.field .text input[type="search"] { -webkit-appearance: textfield; }
+
+/* Form Picker Element (<select>) */
+.picker { position: relative; width: auto; display: inline-block; margin: 0 0 2px 1.2%; overflow: hidden; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; font-family: "Open Sans"; font-weight: 600; height: auto; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); background-image: -webkit-linear-gradient(#ffffff, #f2f2f2); background-image: -moz-linear-gradient(#ffffff, #f2f2f2); background-image: -o-linear-gradient(#ffffff, #f2f2f2); background-image: linear-gradient(#ffffff, #f2f2f2); }
+.picker:after { content: "\25BE"; font-family: entypo; z-index: 0; position: absolute; right: 8%; top: 50%; margin-top: -12px; color: #555555; }
+.picker:first-child { margin-left: 0; }
+.picker select { position: relative; display: block; min-width: 100%; width: 135%; height: 34px; padding: 6px 45px 6px 15px; color: #555555; border: none; background: transparent; outline: none; -webkit-appearance: none; z-index: 99; cursor: pointer; font-size: 16px; font-size: 1rem; }
+.picker select::-ms-expand { display: none; }
+
+/* Labels */
+.badge, .label { height: 20px; display: inline-block; font-family: Helvetica, arial, verdana, sans-serif; font-weight: bold; line-height: 20px; text-align: center; color: #fff; }
+.badge a, .label a { color: #fff; }
+.badge.primary, .label.primary { background: #3085d6; border: 1px solid #3085d6; }
+.badge.secondary, .label.secondary { background: #42a35a; border: 1px solid #42a35a; }
+.badge.default, .label.default { background: #f2f2f2; border: 1px solid #f2f2f2; color: #555555; }
+.badge.default:hover, .label.default:hover { border-color: #e5e5e5; }
+.badge.default a, .label.default a { color: #555555; }
+.badge.info, .label.info { background: #4a4d50; border: 1px solid #4a4d50; }
+.badge.danger, .label.danger { background: #ca3838; border: 1px solid #ca3838; }
+.badge.warning, .label.warning { background: #f6b83f; border: 1px solid #f6b83f; color: #644405; }
+.badge.warning a, .label.warning a { color: #644405; }
+.badge.success, .label.success { background: #58c026; border: 1px solid #58c026; }
+.badge.light, .label.light { background: #fff; color: #555555; border: 1px solid #f2f2f2; }
+.badge.light a, .label.light a { color: #d04526; }
+.badge.dark, .label.dark { background: #212121; border: 1px solid #212121; }
+
+.badge { padding: 0 10px; font-size: 14px; font-size: 0.875rem; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
+
+.label { padding: 0 10px; font-size: 12px; font-size: 0.75rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; }
+
+.alert { padding: 0 10px; font-family: "Open Sans"; font-weight: 600; list-style-type: none; word-wrap: break-word; margin-bottom: 8px; font-size: 14px; font-size: 0.875rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
+.alert.primary { background: #85b7e7; border: 1px solid #3085d6; color: #1a5186; }
+.alert.secondary { background: #80cb92; border: 1px solid #42a35a; color: #255a32; }
+.alert.default { background: white; border: 1px solid #f2f2f2; color: #bfbfbf; color: #555555; border: 1px solid #f2f2f2; }
+.alert.info { background: #7b8085; border: 1px solid #4a4d50; color: #191a1b; color: #f2f2f2; }
+.alert.danger { background: #df8989; border: 1px solid #ca3838; color: #7b2121; }
+.alert.warning { background: #fbdca0; border: 1px solid #f6b83f; color: #c68609; color: #644405; }
+.alert.success { background: #91e26a; border: 1px solid #58c026; color: #316b15; }
+
+/* Tabs */
+.tabs { display: block; }
+
+.tab-nav { margin: 0; padding: 0; border-bottom: 1px solid #e5e5e5; }
+.tab-nav > li { display: inline-block; width: auto; padding: 0; margin: 0 2.12766% 0 0; cursor: default; top: 1px; -webkit-box-shadow: 0 1px 0 white; -moz-box-shadow: 0 1px 0 white; box-shadow: 0 1px 0 white; }
+.tab-nav > li > li { display: inline-block; width: auto; padding: 0; margin: 0 2.12766% 0 0; cursor: default; top: 1px; -webkit-box-shadow: 0 1px 0 white; -moz-box-shadow: 0 1px 0 white; box-shadow: 0 1px 0 white; }
+.tab-nav > li > li > a { display: block; width: auto; padding: 0 16px; margin: 0; color: #555555; font-family: "Open Sans"; font-weight: 600; border: 1px solid #e5e5e5; border-width: 1px 1px 0 1px; text-shadow: 0 1px 1px white; background: #f2f2f2; cursor: pointer; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; height: 42px; line-height: 40px; }
+.tab-nav > li > li > a:hover { text-decoration: none; background: whitesmoke; }
+.tab-nav > li > li > a:active { background: #ededed; }
+.tab-nav > li > li.active > a { height: 43px; line-height: 41px; background: white; cursor: default; }
+.tab-nav > li > li:last-child { margin-right: 0; }
+
+.tab-nav > li:last-child { margin-right: 0; }
+
+.tab-nav > li > a { display: block; width: auto; padding: 0 16px; margin: 0; color: #555555; font-family: "Open Sans"; font-weight: 600; border: 1px solid #e5e5e5; border-width: 1px 1px 0 1px; text-shadow: 0 1px 1px white; background: #f2f2f2; cursor: pointer; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; height: 42px; line-height: 40px; }
+.tab-nav > li > a:hover { text-decoration: none; background: whitesmoke; }
+.tab-nav > li > a:active { background: #ededed; }
+
+.tab-nav > li.active > a { height: 43px; line-height: 41px; background: white; }
+
+.tabs.pill .tab-nav { width: 100%; /* remove if you don't want the tabs to span the full container width */ display: table; overflow: hidden; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
+.tabs.pill .tab-nav > li { display: table-cell; margin: 0; margin-left: -4px; text-align: center; top: 0; }
+.tabs.pill .tab-nav > li:first-child { margin-left: 0; }
+.tabs.pill .tab-nav > li > a { border: none; border-right: 1px solid #e5e5e5; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; height: 42px; line-height: 40px; }
+.tabs.pill .tab-nav > li:last-child > a { border-right: none; }
+
+.tab-content { display: none; padding: 20px 10px; }
+.tab-content.active { display: block; }
+
+.tabs.vertical .tab-nav { border: none; }
+.tabs.vertical .tab-nav > li { display: block; margin: 0; margin-bottom: 5px; }
+.tabs.vertical .tab-nav > li.active { position: relative; z-index: 99; }
+.tabs.vertical .tab-nav > li.active > a { border-right: 1px solid white; }
+.tabs.vertical .tab-nav > li > a { border: 1px solid #e5e5e5; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -ms-border-radius: 4px 0 0 4px; -o-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; }
+.tabs.vertical .tab-content { padding: 10px 0 30px 20px; margin-left: -1px; border-left: 1px solid #e5e5e5; }
+
+/* Images */
+.image { line-height: 0; margin-bottom: 20px; }
+.image.circle { -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; -ms-border-radius: 50% !important; -o-border-radius: 50% !important; border-radius: 50% !important; overflow: hidden; width: auto; }
+.image.rounded { overflow: hidden; -webkit-border-radius: 4px 4px; -moz-border-radius: 4px 4px; -ms-border-radius: 4px 4px; -o-border-radius: 4px 4px; border-radius: 4px 4px; }
+.image.photo { border: 5px solid #fff; -webkit-box-shadow: 0 0 1px #555555; -moz-box-shadow: 0 0 1px #555555; box-shadow: 0 0 1px #555555; }
+.image.photo.polaroid { padding-bottom: 50px; background: #fff; }
+
+/* Video */
+body .video { width: 100%; position: relative; height: 0; padding-bottom: 56.25%; }
+body .video.twitch, body .video.youtube.show_controls { padding-top: 30px; }
+
+.video > video, .video > iframe, .video > object, .video > embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+/* Toggles */
+.drawer { position: relative; width: 100%; max-height: 0; background: #3e4144; -webkit-box-shadow: inset 0 -2px 5px #313436, inset 0 2px 5px #313436; -moz-box-shadow: inset 0 -2px 5px #313436, inset 0 2px 5px #313436; box-shadow: inset 0 -2px 5px #313436, inset 0 2px 5px #313436; overflow: hidden; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; }
+.drawer.active { height: auto; max-height: 800px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
+
+.modal { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999999; background: black; background: rgba(0, 0, 0, 0.8); }
+.modal > .content { width: 50%; min-height: 50%; max-height: 65%; position: relative; top: 25%; margin: 0 auto; padding: 20px; background: white; z-index: 2; overflow: auto; }
+@media only screen and (max-width: 768px) { .modal > .content { width: 80%; min-height: 80%; max-height: 80%; top: 10%; } }
+@media only screen and (max-width: 767px) { .modal > .content { width: 92.5%; min-height: 92.5%; max-height: 92.5%; top: 3.75%; } }
+.modal > .content > .close { position: absolute; top: 10px; right: 10px; cursor: pointer; z-index: 3; }
+.modal, .modal > .content { visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
+.modal.active { -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; }
+.modal.active, .modal.active > .content { visibility: visible; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
+
+/* Tables */
+table { display: table; background-color: white; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; width: 100%; border: 1px solid #e5e5e5; }
+table caption { text-align: center; font-size: 30px; padding: .75em; }
+table thead th, table tbody td, table tr td { display: table-cell; padding: 10px; vertical-align: top; text-align: left; border-top: 1px solid #e5e5e5; }
+table tr td, table tbody tr td { font-size: 16px; }
+table tr td:first-child { font-weight: bold; }
+table thead { background-color: #3085d6; color: #fff; }
+table thead tr th { font-size: 16px; font-weight: bold; vertical-align: bottom; }
+table.striped tr:nth-of-type(even), table table tr.stripe, table table tr.striped { background-color: #e5e5e5; }
+table.rounded { border-radius: 4px; border-collapse: separate; }
+table.rounded caption + thead tr:first-child th:first-child, table.rounded caption + tr td:first-child, table.rounded > thead tr:first-child th:first-child, table.rounded > thead tr:first-child td:first-child, table.rounded > tr:first-child td:first-child { border-top-left-radius: 4px; }
+table.rounded caption + thead tr:first-child th:last-child, table.rounded caption + tr td:last-child, table.rounded > thead tr:first-child th:last-child, table.rounded > thead tr:first-child td:last-child, table.rounded > tr:first-child td:last-child { border-top-right-radius: 4px; }
+table.rounded thead ~ tr:last-child td:last-child, table.rounded tbody tr:last-child td:last-child { border-bottom-right-radius: 4px; }
+table.rounded thead ~ tr:last-child td:first-child, table.rounded tbody tr:last-child td:first-child { border-bottom-left-radius: 4px; }
+table.rounded thead th, table.rounded thead td, table.rounded caption + tbody tr:first-child td, table.rounded > tbody:first-child tr:first-child td { border-top: 0; }
+
+/* Tooltips */
+.ttip { position: relative; cursor: pointer; }
+.ttip:after { display: block; background: #3085d6; border: 1px solid #3085d6; border-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 0.5em 0.75em; width: auto; min-width: 130px; max-width: 500px; position: absolute; left: 0; bottom: 101%; margin-bottom: 8px; text-align: left; color: #fff; content: attr(data-tooltip); line-height: 1.5; font-size: 16px; font-weight: normal; font-style: normal; -webkit-transition: opacity 0.1s ease; -moz-transition: opacity 0.1s ease; -o-transition: opacity 0.1s ease; transition: opacity 0.1s ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #65a4e1), color-stop(100%, #3085d6)); background-image: -webkit-linear-gradient(top, #65a4e1, #3085d6); background-image: -moz-linear-gradient(top, #65a4e1, #3085d6); background-image: -o-linear-gradient(top, #65a4e1, #3085d6); background-image: linear-gradient(top, #65a4e1, #3085d6); -webkit-box-shadow: 0 0 5px 0 rgba(48, 133, 214, 0.25); -moz-box-shadow: 0 0 5px 0 rgba(48, 133, 214, 0.25); box-shadow: 0 0 5px 0 rgba(48, 133, 214, 0.25); }
+.ttip:before { content: " "; width: 0; height: 0; position: absolute; bottom: 101%; left: 8px; border-top: 9px solid #3085d6 !important; border-left: 9px solid transparent; border-right: 9px solid transparent; -webkit-transition: opacity 0.1s ease; -moz-transition: opacity 0.1s ease; -o-transition: opacity 0.1s ease; transition: opacity 0.1s ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; }
+.ttip:hover:after, .ttip:hover:before { -webkit-transition: opacity 0.1s ease; -moz-transition: opacity 0.1s ease; -o-transition: opacity 0.1s ease; transition: opacity 0.1s ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
+
+@media only screen and (max-width: 768px) { .ttip:after, .ttip:before { display: none; } }
+
+/* SHAME */
+.ie8 .xxwide, .ie8 .xwide, .ie8 .wide, .ie8 .normal, .ie8 .narrow, .ie8 .xnarrow { display: inline; }
+.ie8 .xxwide + input, .ie8 .xwide + input, .ie8 .wide + input, .ie8 .normal + input, .ie8 .narrow + input, .ie8 .xnarrow + input { display: inline; margin: 0 0 0 -.25em; }
+.ie8 .ttip:before, .ie8 .ttip:after { display: none; }
+.ie8 .ttip:hover:before, .ie8 .ttip:hover:after { display: block; }
+
+.ie9 .radio.checked i, .ie9 .checkbox.checked i { top: 0; }
diff --git a/modules/playground/src/routing/index.html b/modules/playground/src/routing/index.html
new file mode 100644
index 000000000000..7d066f8cf370
--- /dev/null
+++ b/modules/playground/src/routing/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <title>Routing Example</title>
+  <link rel="stylesheet" type="text/css" href="./css/gumby.css">
+  <link rel="stylesheet" type="text/css" href="./css/app.css">
+  <base href="/all/playground/src/routing/">
+<body>
+  <inbox-app>
+    Loading...
+  </inbox-app>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/routing/index.ts b/modules/playground/src/routing/index.ts
new file mode 100644
index 000000000000..df1c7280a6b6
--- /dev/null
+++ b/modules/playground/src/routing/index.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 {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {RouterModule} from '@angular/router';
+
+import {DbService, DraftsCmp, InboxApp, InboxCmp, ROUTER_CONFIG} from './app/inbox-app';
+
+export function main() {
+  @NgModule({
+    providers: [DbService],
+    declarations: [InboxCmp, DraftsCmp, InboxApp],
+    imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), BrowserModule],
+    bootstrap: [InboxApp]
+  })
+  class RoutingExampleModule {
+  }
+  platformBrowserDynamic().bootstrapModule(RoutingExampleModule);
+}
diff --git a/modules/playground/src/sourcemap/index.html b/modules/playground/src/sourcemap/index.html
new file mode 100644
index 000000000000..d1981b2a7e55
--- /dev/null
+++ b/modules/playground/src/sourcemap/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <title>Sourcemaps</title>
+<body>
+  <error-app>
+    Loading...
+  </error-app>
+
+  <p>
+  Please look into the console and check whether the stack trace is mapped
+  via source maps!
+  </p>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/sourcemap/index.ts b/modules/playground/src/sourcemap/index.ts
new file mode 100644
index 000000000000..497f88e2d9a1
--- /dev/null
+++ b/modules/playground/src/sourcemap/index.ts
@@ -0,0 +1,28 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+@Component({
+  selector: 'error-app',
+  template: `
+           <button class="errorButton" (click)="createError()">create error</button>`
+})
+export class ErrorComponent {
+  createError(): void { throw new Error('Sourcemap test'); }
+}
+
+@NgModule({declarations: [ErrorComponent], bootstrap: [ErrorComponent], imports: [BrowserModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/svg/index.html b/modules/playground/src/svg/index.html
new file mode 100644
index 000000000000..f74683b9436e
--- /dev/null
+++ b/modules/playground/src/svg/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <title>SVG</title>
+<body>
+  <svg-app>
+    Loading...
+  </svg-app>
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/svg/index.ts b/modules/playground/src/svg/index.ts
new file mode 100644
index 000000000000..82fa5bcc4883
--- /dev/null
+++ b/modules/playground/src/svg/index.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 {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+@Component({selector: '[svg-group]', template: `<svg:text x="20" y="20">Hello</svg:text>`})
+class SvgGroup {
+}
+
+@Component({
+  selector: 'svg-app',
+  template: `<svg>
+    <g svg-group></g>
+  </svg>`
+})
+class SvgApp {
+}
+
+@NgModule({bootstrap: [SvgApp], declarations: [SvgApp, SvgGroup], imports: [BrowserModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/template_driven_forms/index.html b/modules/playground/src/template_driven_forms/index.html
new file mode 100644
index 000000000000..19eb778b98aa
--- /dev/null
+++ b/modules/playground/src/template_driven_forms/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+  <title>Template Driven Forms</title>
+  <style>
+    .ng-touched.ng-invalid {
+      border-color: red;
+    }
+  </style>
+</head>
+
+<body>
+  <template-driven-forms>
+    Loading...
+  </template-driven-forms>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/template_driven_forms/index.ts b/modules/playground/src/template_driven_forms/index.ts
new file mode 100644
index 000000000000..eae084b6f2ee
--- /dev/null
+++ b/modules/playground/src/template_driven_forms/index.ts
@@ -0,0 +1,183 @@
+/**
+ * @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
+ */
+
+/* tslint:disable:no-console  */
+
+import {Component, Directive, Host, NgModule} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, NG_VALIDATORS, NgForm} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+
+
+/**
+ * A domain model we are binding the form controls to.
+ */
+class CheckoutModel {
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  country: string = 'Canada';
+
+  creditCard: string;
+  amount: number;
+  email: string;
+  comments: string;
+}
+
+/**
+ * Custom validator.
+ */
+function creditCardValidator(c: FormControl): {[key: string]: boolean} {
+  if (c.value && /^\d{16}$/.test(c.value)) {
+    return null;
+  } else {
+    return {'invalidCreditCard': true};
+  }
+}
+
+const creditCardValidatorBinding = {
+  provide: NG_VALIDATORS,
+  useValue: creditCardValidator,
+  multi: true
+};
+
+@Directive({selector: '[credit-card]', providers: [creditCardValidatorBinding]})
+class CreditCardValidator {
+}
+
+/**
+ * This is a component that displays an error message.
+ *
+ * For instance,
+ *
+ * <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
+ *
+ * Will display the "is required" error if the control is empty, and "invalid credit card" if the
+ * control is not empty
+ * but not valid.
+ *
+ * In a real application, this component would receive a service that would map an error code to an
+ * actual error message.
+ * To make it simple, we are using a simple map here.
+ */
+@Component({
+  selector: 'show-error',
+  inputs: ['controlPath: control', 'errorTypes: errors'],
+  template: `
+    <span *ngIf="errorMessage !== null">{{errorMessage}}</span>
+  `
+})
+class ShowError {
+  formDir: NgForm;
+  controlPath: string;
+  errorTypes: string[];
+
+  constructor(@Host() formDir: NgForm) { this.formDir = formDir; }
+
+  get errorMessage(): string {
+    const form: FormGroup = this.formDir.form;
+    const control = form.get(this.controlPath);
+    if (control && control.touched) {
+      for (let i = 0; i < this.errorTypes.length; ++i) {
+        if (control.hasError(this.errorTypes[i])) {
+          return this._errorMessage(this.errorTypes[i]);
+        }
+      }
+    }
+    return null;
+  }
+
+  private _errorMessage(code: string): string {
+    const config: {[key: string]: string} = {
+      'required': 'is required',
+      'invalidCreditCard': 'is invalid credit card number',
+    };
+    return config[code];
+  }
+}
+
+
+@Component({
+  selector: 'template-driven-forms',
+  template: `
+    <h1>Checkout Form</h1>
+
+    <form (ngSubmit)="onSubmit()" #f="ngForm">
+      <p>
+        <label for="firstName">First Name</label>
+        <input type="text" id="firstName" name="firstName" [(ngModel)]="model.firstName" required>
+        <show-error control="firstName" [errors]="['required']"></show-error>
+      </p>
+
+      <p>
+        <label for="middleName">Middle Name</label>
+        <input type="text" id="middleName" name="middleName" [(ngModel)]="model.middleName">
+      </p>
+
+      <p>
+        <label for="lastName">Last Name</label>
+        <input type="text" id="lastName" name="lastName" [(ngModel)]="model.lastName" required>
+        <show-error control="lastName" [errors]="['required']"></show-error>
+      </p>
+
+      <p>
+        <label for="country">Country</label>
+        <select id="country" name="country" [(ngModel)]="model.country">
+          <option *ngFor="let c of countries" [value]="c">{{c}}</option>
+        </select>
+      </p>
+
+      <p>
+        <label for="creditCard">Credit Card</label>
+        <input type="text" id="creditCard" name="creditCard" [(ngModel)]="model.creditCard" required credit-card>
+        <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
+      </p>
+
+      <p>
+        <label for="amount">Amount</label>
+        <input type="number" id="amount" name="amount" [(ngModel)]="model.amount" required>
+        <show-error control="amount" [errors]="['required']"></show-error>
+      </p>
+
+      <p>
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" [(ngModel)]="model.email" required>
+        <show-error control="email" [errors]="['required']"></show-error>
+      </p>
+
+      <p>
+        <label for="comments">Comments</label>
+        <textarea id="comments" name="comments" [(ngModel)]="model.comments">
+        </textarea>
+      </p>
+
+      <button type="submit" [disabled]="!f.form.valid">Submit</button>
+    </form>
+  `
+})
+class TemplateDrivenForms {
+  model = new CheckoutModel();
+  countries = ['US', 'Canada'];
+
+  onSubmit(): void {
+    console.log('Submitting:');
+    console.log(this.model);
+  }
+}
+@NgModule({
+  declarations: [TemplateDrivenForms, CreditCardValidator, ShowError],
+  bootstrap: [TemplateDrivenForms],
+  imports: [BrowserModule, FormsModule]
+})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/todo/app/TodoStore.ts b/modules/playground/src/todo/app/TodoStore.ts
new file mode 100644
index 000000000000..e8bde62ae16a
--- /dev/null
+++ b/modules/playground/src/todo/app/TodoStore.ts
@@ -0,0 +1,43 @@
+/**
+ * @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';
+
+// base model for RecordStore
+export abstract class KeyModel {
+  constructor(public key: number) {}
+}
+
+export class Todo extends KeyModel {
+  constructor(key: number, public title: string, public completed: boolean) { super(key); }
+}
+
+@Injectable()
+export class TodoFactory {
+  private _uid: number = 0;
+
+  nextUid(): number { return ++this._uid; }
+
+  create(title: string, isCompleted: boolean): Todo {
+    return new Todo(this.nextUid(), title, isCompleted);
+  }
+}
+
+// Store manages any generic item that inherits from KeyModel
+@Injectable()
+export class Store<T extends KeyModel> {
+  list: T[] = [];
+
+  add(record: T): void { this.list.push(record); }
+
+  remove(record: T): void { this.removeBy((item) => item === record); }
+
+  removeBy(callback: (record: T) => boolean): void {
+    this.list = this.list.filter((record) => !callback(record));
+  }
+}
diff --git a/modules/playground/src/todo/css/base.css b/modules/playground/src/todo/css/base.css
new file mode 100644
index 000000000000..8abb353e87b1
--- /dev/null
+++ b/modules/playground/src/todo/css/base.css
@@ -0,0 +1,379 @@
+@charset "utf-8";
+
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  -ms-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+button,
+input[type="checkbox"] {
+  outline: none;
+}
+
+.hidden {
+  display: none;
+}
+
+.visible {
+  display: block !important;
+}
+
+#todoapp {
+  background: #fff;
+  margin: 130px 0 40px 0;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+  0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+#todoapp input::-webkit-input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: #e6e6e6;
+}
+
+#todoapp input::-moz-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: #e6e6e6;
+}
+
+#todoapp input::input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: #e6e6e6;
+}
+
+#todoapp h1 {
+  position: absolute;
+  top: -155px;
+  width: 100%;
+  font-size: 100px;
+  font-weight: 100;
+  text-align: center;
+  color: rgba(175, 47, 47, 0.15);
+  -webkit-text-rendering: optimizeLegibility;
+  -moz-text-rendering: optimizeLegibility;
+  -ms-text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
+}
+
+#new-todo,
+.edit {
+  position: relative;
+  margin: 0;
+  width: 100%;
+  font-size: 24px;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: 1.4em;
+  border: 0;
+  outline: none;
+  color: inherit;
+  padding: 6px;
+  border: 1px solid #999;
+  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  -ms-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+#new-todo {
+  padding: 16px 16px 16px 60px;
+  border: none;
+  background: rgba(0, 0, 0, 0.003);
+  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+#main {
+  position: relative;
+  z-index: 2;
+  border-top: 1px solid #e6e6e6;
+}
+
+label[for='toggle-all'] {
+  display: none;
+}
+
+#toggle-all {
+  position: absolute;
+  top: -55px;
+  left: -12px;
+  width: 60px;
+  height: 34px;
+  text-align: center;
+  border: none; /* Mobile Safari */
+}
+
+#toggle-all:before {
+  content: '❯';
+  font-size: 22px;
+  color: #e6e6e6;
+  padding: 10px 27px 10px 27px;
+}
+
+#toggle-all:checked:before {
+  color: #737373;
+}
+
+#todo-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+#todo-list li {
+  position: relative;
+  font-size: 24px;
+  border-bottom: 1px solid #ededed;
+}
+
+#todo-list li:last-child {
+  border-bottom: none;
+}
+
+#todo-list li.editing {
+  border-bottom: none;
+  padding: 0;
+}
+
+#todo-list li.editing .edit {
+  display: block;
+  width: 506px;
+  padding: 13px 17px 12px 17px;
+  margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+  display: none;
+}
+
+#todo-list li .toggle {
+  text-align: center;
+  width: 40px;
+  /* auto, since non-WebKit browsers doesn't support input styling */
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  border: none; /* Mobile Safari */
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+}
+
+#todo-list li .toggle:after {
+  content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+}
+
+#todo-list li .toggle:checked:after {
+  content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+}
+
+#todo-list li label {
+  white-space: pre;
+  word-break: break-word;
+  padding: 15px 60px 15px 15px;
+  margin-left: 45px;
+  display: block;
+  line-height: 1.2;
+  transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+  color: #d9d9d9;
+  text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
+  margin: auto 0;
+  font-size: 30px;
+  color: #cc9a9a;
+  margin-bottom: 11px;
+  transition: color 0.2s ease-out;
+}
+
+#todo-list li .destroy:hover {
+  color: #af5b5e;
+}
+
+#todo-list li .destroy:after {
+  content: '×';
+}
+
+#todo-list li:hover .destroy {
+  display: block;
+}
+
+#todo-list li .edit {
+  display: none;
+}
+
+#todo-list li.editing:last-child {
+  margin-bottom: -1px;
+}
+
+#footer {
+  color: #777;
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  border-top: 1px solid #e6e6e6;
+}
+
+#footer:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 50px;
+  overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+  0 8px 0 -3px #f6f6f6,
+  0 9px 1px -3px rgba(0, 0, 0, 0.2),
+  0 16px 0 -6px #f6f6f6,
+  0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+  float: left;
+  text-align: left;
+}
+
+#todo-count strong {
+  font-weight: 300;
+}
+
+#filters {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+}
+
+#filters li {
+  display: inline;
+}
+
+#filters li a {
+  color: inherit;
+  margin: 3px;
+  padding: 3px 7px;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+#filters li a.selected,
+#filters li a:hover {
+  border-color: rgba(175, 47, 47, 0.1);
+}
+
+#filters li a.selected {
+  border-color: rgba(175, 47, 47, 0.2);
+}
+
+#clear-completed,
+html #clear-completed:active {
+  float: right;
+  position: relative;
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
+  visibility: hidden;
+  position: relative;
+}
+
+#clear-completed::after {
+  visibility: visible;
+  content: 'Clear completed';
+  position: absolute;
+  right: 0;
+  white-space: nowrap;
+}
+
+#clear-completed:hover::after {
+  text-decoration: underline;
+}
+
+#info {
+  margin: 65px auto 0;
+  color: #bfbfbf;
+  font-size: 10px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-align: center;
+}
+
+#info p {
+  line-height: 1;
+}
+
+#info a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+#info a:hover {
+  text-decoration: underline;
+}
+
+/*
+Hack to remove background from Mobile Safari.
+Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  #toggle-all,
+  #todo-list li .toggle {
+    background: none;
+  }
+
+  #todo-list li .toggle {
+    height: 40px;
+  }
+
+  #toggle-all {
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+@media (max-width: 430px) {
+  #footer {
+    height: 50px;
+  }
+
+  #filters {
+    bottom: 10px;
+  }
+}
diff --git a/modules/examples/src/todo/css/bg.png b/modules/playground/src/todo/css/bg.png
similarity index 100%
rename from modules/examples/src/todo/css/bg.png
rename to modules/playground/src/todo/css/bg.png
diff --git a/modules/examples/src/todo/css/main.css b/modules/playground/src/todo/css/main.css
similarity index 100%
rename from modules/examples/src/todo/css/main.css
rename to modules/playground/src/todo/css/main.css
diff --git a/modules/playground/src/todo/index.html b/modules/playground/src/todo/index.html
new file mode 100644
index 000000000000..7f38ed0bf639
--- /dev/null
+++ b/modules/playground/src/todo/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<base>
+  <title>Todo Angular</title>
+  <link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
+  <base href="./">
+<body>
+  <todo-app>
+    Loading...
+  </todo-app>
+
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/todo/index.ts b/modules/playground/src/todo/index.ts
new file mode 100644
index 000000000000..6e8d91773a4d
--- /dev/null
+++ b/modules/playground/src/todo/index.ts
@@ -0,0 +1,60 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {Store, Todo, TodoFactory} from './app/TodoStore';
+
+@Component({selector: 'todo-app', viewProviders: [Store, TodoFactory], templateUrl: 'todo.html'})
+class TodoApp {
+  todoEdit: Todo = null;
+
+  constructor(public todoStore: Store<Todo>, public factory: TodoFactory) {}
+
+  enterTodo(inputElement: HTMLInputElement): void {
+    this.addTodo(inputElement.value);
+    inputElement.value = '';
+  }
+
+  editTodo(todo: Todo): void { this.todoEdit = todo; }
+
+  doneEditing($event: KeyboardEvent, todo: Todo): void {
+    const which = $event.which;
+    const target = $event.target as HTMLInputElement;
+    if (which === 13) {
+      todo.title = target.value;
+      this.todoEdit = null;
+    } else if (which === 27) {
+      this.todoEdit = null;
+      target.value = todo.title;
+    }
+  }
+
+  addTodo(newTitle: string): void { this.todoStore.add(this.factory.create(newTitle, false)); }
+
+  completeMe(todo: Todo): void { todo.completed = !todo.completed; }
+
+  deleteMe(todo: Todo): void { this.todoStore.remove(todo); }
+
+  toggleAll($event: MouseEvent): void {
+    const isComplete = ($event.target as HTMLInputElement).checked;
+    this.todoStore.list.forEach((todo: Todo) => { todo.completed = isComplete; });
+  }
+
+  clearCompleted(): void { this.todoStore.removeBy((todo: Todo) => todo.completed); }
+}
+
+@NgModule({declarations: [TodoApp], bootstrap: [TodoApp], imports: [BrowserModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/todo/todo.html b/modules/playground/src/todo/todo.html
new file mode 100644
index 000000000000..6799ec7569f0
--- /dev/null
+++ b/modules/playground/src/todo/todo.html
@@ -0,0 +1,71 @@
+<style>@import "css/base.css";</style>
+
+<section id="todoapp">
+
+  <header id="header">
+    <h1>todos</h1>
+    <input
+      id="new-todo"
+      placeholder="What needs to be done?"
+      autofocus
+      #newtodo
+      (keyup.enter)="enterTodo(newtodo)">
+  </header>
+
+  <section id="main">
+    <input id="toggle-all" type="checkbox" (click)="toggleAll($event)">
+    <label for="toggle-all">Mark all as complete</label>
+
+    <ul id="todo-list">
+
+      <li *ngFor="let todo of todoStore.list">
+
+        <div class="view"
+            [class.hidden]="todoEdit == todo">
+
+          <input class="toggle" type="checkbox"
+                 (click)="completeMe(todo)"
+                 [checked]="todo.completed">
+
+          <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
+          <button class="destroy" (click)="deleteMe(todo)"></button>
+
+        </div>
+
+        <div>
+
+          <input class="edit"
+            [class.visible]="todoEdit == todo"
+            [value]="todo.title"
+            (keyup)="doneEditing($event, todo)">
+
+        </div>
+
+      </li>
+    </ul>
+
+  </section>
+
+  <footer id="footer">
+    <span id="todo-count"></span>
+    <div [class.hidden]="true"></div>
+    <ul id="filters">
+      <li>
+        <a href="#/" class="selected">All</a>
+      </li>
+      <li>
+        <a href="#/active">Active</a>
+      </li>
+      <li>
+        <a href="#/completed">Completed</a>
+      </li>
+    </ul>
+    <button id="clear-completed" (click)="clearCompleted()">Clear completed</button>
+  </footer>
+
+</section>
+
+<footer id="info">
+  <p>Double-click to edit a todo</p>
+  <p>Created by <a href="http://twitter.com/angularjs">The Angular Team</a></p>
+</footer>
diff --git a/modules/playground/src/upgrade/index.html b/modules/playground/src/upgrade/index.html
new file mode 100644
index 000000000000..499a7be8fa0f
--- /dev/null
+++ b/modules/playground/src/upgrade/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <title>Angular Upgrade 2.0</title>
+  <style>
+    user {
+      background-color: lightyellow;
+      border: 2px solid darkorange;
+      display: inline-block;
+      width: 150px;
+      padding: 1em;
+    }
+  </style>
+<body>
+  <upgrade-app ng-controller="Index" [user]="name" (reset)="name=''">
+    Your name: <input ng-model="name">
+    <hr>
+    <span class="greeting">Greetings from {{name}}!</span>
+  </upgrade-app>
+  <script src="/all/playground/vendor/angular.js"></script>
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/upgrade/index.ts b/modules/playground/src/upgrade/index.ts
new file mode 100644
index 000000000000..7eb2fffa9d28
--- /dev/null
+++ b/modules/playground/src/upgrade/index.ts
@@ -0,0 +1,90 @@
+/**
+ * @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, EventEmitter, Input, NgModule, Output, forwardRef} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {UpgradeAdapter} from '@angular/upgrade';
+
+declare const angular: any;
+
+
+const styles = [`
+    .border {
+      border: solid 2px DodgerBlue;
+    }
+    .title {
+      background-color: LightSkyBlue;
+      padding: .2em 1em;
+      font-size: 1.2em;
+    }
+    .content {
+      padding: 1em;
+    }
+  `];
+
+const adapter = new UpgradeAdapter(forwardRef(() => Ng2AppModule));
+const ng1module = angular.module('myExample', []);
+
+ng1module.controller('Index', function($scope: any) { $scope.name = 'World'; });
+
+ng1module.directive('ng1User', function() {
+  return {
+    scope: {handle: '@', reset: '&'},
+    template: `
+      User: {{handle}}
+      <hr>
+      <button ng-click="reset()">clear</button>`
+  };
+});
+
+@Component({
+  selector: 'pane',
+  template: `<div class="border">
+    <div class="title">{{title}}</div>
+    <div class="content"><ng-content></ng-content></div>
+    </div>`,
+  styles: styles
+})
+class Pane {
+  @Input() title: string;
+}
+
+
+@Component({
+  selector: 'upgrade-app',
+  template: `<div class="border">
+      <pane title="Title: {{user}}">
+        <table cellpadding="3">
+          <tr>
+            <td><ng-content></ng-content></td>
+            <td><ng1-user [handle]="user" (reset)="reset.emit()"></ng1-user></td>
+          </tr>
+        </table>
+      </pane>
+    </div>`,
+  styles: styles
+})
+class UpgradeApp {
+  @Input() user: string;
+  @Output() reset = new EventEmitter();
+  constructor() {}
+}
+
+@NgModule({
+  declarations: [Pane, UpgradeApp, adapter.upgradeNg1Component('ng1User')],
+  imports: [BrowserModule]
+})
+class Ng2AppModule {
+}
+
+
+ng1module.directive('upgradeApp', adapter.downgradeNg2Component(UpgradeApp));
+
+export function main() {
+  adapter.bootstrap(document.body, ['myExample']);
+}
diff --git a/modules/playground/src/web_workers/animations/background_index.ts b/modules/playground/src/web_workers/animations/background_index.ts
new file mode 100644
index 000000000000..7f541be76349
--- /dev/null
+++ b/modules/playground/src/web_workers/animations/background_index.ts
@@ -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
+ */
+
+import {NgModule} from '@angular/core';
+import {WorkerAppModule} from '@angular/platform-webworker';
+import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
+
+import {AnimationCmp} from './index_common';
+
+@NgModule({imports: [WorkerAppModule], bootstrap: [AnimationCmp], declarations: [AnimationCmp]})
+class ExampleModule {
+}
+
+export function main() {
+  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/web_workers/animations/index.html b/modules/playground/src/web_workers/animations/index.html
new file mode 100644
index 000000000000..83a75c9deb8e
--- /dev/null
+++ b/modules/playground/src/web_workers/animations/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <title>WebWorker Animation Tests</title>
+  <style>
+  </style>
+<body>
+  <animation-app>
+    Loading...
+  </animation-app>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations-next-lite.min.js"></script>
+  <script src="../../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/web_workers/animations/index.ts b/modules/playground/src/web_workers/animations/index.ts
new file mode 100644
index 000000000000..b45021b6fc1e
--- /dev/null
+++ b/modules/playground/src/web_workers/animations/index.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 {bootstrapWorkerUi} from '@angular/platform-webworker';
+
+export function main() {
+  bootstrapWorkerUi('loader.js');
+}
diff --git a/modules/playground/src/web_workers/animations/index_common.ts b/modules/playground/src/web_workers/animations/index_common.ts
new file mode 100644
index 000000000000..bd15fc482a6b
--- /dev/null
+++ b/modules/playground/src/web_workers/animations/index_common.ts
@@ -0,0 +1,43 @@
+/**
+ * @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, state, style, transition, trigger} from '@angular/animations';
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'animation-app',
+  styles: [`
+    .box {
+      border:10px solid black;
+      text-align:center;
+      overflow:hidden;
+      background:red;
+      color:white;
+      font-size:100px;
+      line-height:200px;
+    }
+  `],
+  animations: [trigger(
+      'animate',
+      [
+        state('off', style({width: '0px'})), state('on', style({width: '750px'})),
+        transition('off <=> on', animate(500))
+      ])],
+  template: `
+    <button (click)="animate=!animate">
+      Start Animation 
+    </button>
+    
+    <div class="box" [@animate]="animate ? 'on' : 'off'">
+      ... 
+    </div>
+  `
+})
+export class AnimationCmp {
+  animate = false;
+}
diff --git a/modules/playground/src/web_workers/animations/loader.js b/modules/playground/src/web_workers/animations/loader.js
new file mode 100644
index 000000000000..7f9b18aed278
--- /dev/null
+++ b/modules/playground/src/web_workers/animations/loader.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
+ */
+
+importScripts(
+    '../../../vendor/core.js', '../../../vendor/zone.js',
+    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
+    '../../../vendor/Reflect.js');
+
+
+System.config({
+  baseURL: '/all',
+
+  map: {
+    'rxjs': '/all/playground/vendor/rxjs',
+  },
+  packages: {
+    '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs': {main: 'index.js', defaultExtension: 'js'},
+  },
+
+  defaultJSExtensions: true
+});
+
+System.import('playground/src/web_workers/animations/background_index')
+    .then(
+        function(m) {
+          try {
+            m.main();
+          } catch (e) {
+            console.error(e);
+          }
+        },
+        function(error) { console.error('error loading background', error); });
diff --git a/modules/playground/src/web_workers/images/background_index.ts b/modules/playground/src/web_workers/images/background_index.ts
new file mode 100644
index 000000000000..8f9459e418d3
--- /dev/null
+++ b/modules/playground/src/web_workers/images/background_index.ts
@@ -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
+ */
+
+import {NgModule} from '@angular/core';
+import {WorkerAppModule} from '@angular/platform-webworker';
+import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
+
+import {ImageDemo} from './index_common';
+
+@NgModule({imports: [WorkerAppModule], bootstrap: [ImageDemo], declarations: [ImageDemo]})
+class ExampleModule {
+}
+
+export function main() {
+  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/web_workers/images/image_demo.css b/modules/playground/src/web_workers/images/image_demo.css
new file mode 100644
index 000000000000..bf19e97801a6
--- /dev/null
+++ b/modules/playground/src/web_workers/images/image_demo.css
@@ -0,0 +1,30 @@
+.hidden{
+  display: none !important;
+}
+#images {
+  width: 600px;
+  margin: 0 auto;
+}
+ul li {
+  list-style-type: none;
+  float: left;
+  margin-left: 20px;
+  width: 200px;
+}
+#main ul {
+  width: 700px;
+}
+.card-image .image-loader{
+  position: absolute;
+  bottom: 0;
+  margin: auto;
+}
+
+.card-image img.grey {
+  opacity: 0.4;
+}
+
+.fixed-action-btn.bottom {
+  bottom: 45px;
+  right: 24px;
+}
diff --git a/modules/playground/src/web_workers/images/image_demo.html b/modules/playground/src/web_workers/images/image_demo.html
new file mode 100644
index 000000000000..83c25c12267d
--- /dev/null
+++ b/modules/playground/src/web_workers/images/image_demo.html
@@ -0,0 +1,33 @@
+<nav class="blue">
+  <div class="container">
+    <div class="nav-wrapper">
+      <a class="brand-logo">Angular Image Demo</a>
+    </div>
+  </div>
+</nav>
+<section id="main" class="container">
+  <div class="row">
+    <div *ngFor="let image of images" class="col s12 m2">
+      <div class="card">
+        <div class="card-image">
+          <img [src]="image.src" [class.grey]="image.filtering"/>
+          <div class="image-loader progress" [class.hidden]="!image.filtering">
+            <div class="indeterminate"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="fixed-action-btn bottom" (click)="applyFilters()">
+    <a class="btn-floating btn-large blue darken-4" (click)="applyFilters()">
+      <i class="large material-icons" (click)="applyFilters()">invert_colors</i>
+    </a>
+  </div>
+
+  <div class="file-field">
+    <div class="btn blue darken-2">
+      <span>Select Images</span>
+      <input type="file" accept="image/bmp" multiple (change)="uploadFiles($event.target.files)" />
+    </div>
+  </div>
+</section>
diff --git a/modules/playground/src/web_workers/images/index.html b/modules/playground/src/web_workers/images/index.html
new file mode 100644
index 000000000000..68736e91b79d
--- /dev/null
+++ b/modules/playground/src/web_workers/images/index.html
@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="image_demo.css" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  </head>
+  <body>
+    <image-demo>
+    </image-demo>
+
+    <script src="../../bootstrap.js"></script>
+    <!-- Compiled and minified CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
+
+    <!-- Compiled and minified JavaScript -->
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
+  </body>
+</html>
diff --git a/modules/playground/src/web_workers/images/index.ts b/modules/playground/src/web_workers/images/index.ts
new file mode 100644
index 000000000000..b45021b6fc1e
--- /dev/null
+++ b/modules/playground/src/web_workers/images/index.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 {bootstrapWorkerUi} from '@angular/platform-webworker';
+
+export function main() {
+  bootstrapWorkerUi('loader.js');
+}
diff --git a/modules/playground/src/web_workers/images/index_common.ts b/modules/playground/src/web_workers/images/index_common.ts
new file mode 100644
index 000000000000..5d949e1f6625
--- /dev/null
+++ b/modules/playground/src/web_workers/images/index_common.ts
@@ -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
+ */
+
+import {Component} from '@angular/core';
+
+import {BitmapService} from './services/bitmap';
+
+
+@Component({selector: 'image-demo', viewProviders: [BitmapService], templateUrl: 'image_demo.html'})
+export class ImageDemo {
+  images: {src: string, buffer: ArrayBuffer, filtering: boolean}[] = [];
+  fileInput: String;
+
+  constructor(private _bitmapService: BitmapService) {}
+
+  uploadFiles(files: FileList) {
+    for (let i = 0; i < files.length; i++) {
+      const reader = new FileReader();
+      reader.addEventListener('load', this.handleReaderLoad(reader));
+      reader.readAsArrayBuffer(files[i]);
+    }
+  }
+
+  handleReaderLoad(reader: FileReader): EventListener {
+    return (e) => {
+      const buffer = reader.result as ArrayBuffer;
+      this.images.push({
+        src: this._bitmapService.arrayBufferToDataUri(new Uint8Array(buffer)),
+        buffer: buffer,
+        filtering: false
+      });
+    };
+  }
+
+  applyFilters() {
+    for (let i = 0; i < this.images.length; i++) {
+      this.images[i].filtering = true;
+
+      setTimeout(this._filter(i), 0);
+    }
+  }
+
+  private _filter(i: number): () => void {
+    return () => {
+      let imageData = this._bitmapService.convertToImageData(this.images[i].buffer);
+      imageData = this._bitmapService.applySepia(imageData);
+      this.images[i].src = this._bitmapService.toDataUri(imageData);
+      this.images[i].filtering = false;
+    };
+  }
+}
diff --git a/modules/playground/src/web_workers/images/loader.css b/modules/playground/src/web_workers/images/loader.css
new file mode 100644
index 000000000000..30e38fef8b90
--- /dev/null
+++ b/modules/playground/src/web_workers/images/loader.css
@@ -0,0 +1,71 @@
+body {
+  background: #eaecfa;
+}
+
+.loader {
+  width: 250px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  font-family: helvetica, arial, sans-serif;
+  text-transform: uppercase;
+  font-weight: 900;
+  color: #ce4233;
+  letter-spacing: 0.2em;
+}
+.loader::before, .loader::after {
+  content: "";
+  display: block;
+  width: 15px;
+  height: 15px;
+  background: #ce4233;
+  position: absolute;
+  -webkit-animation: load .7s infinite alternate ease-in-out;
+          animation: load .7s infinite alternate ease-in-out;
+}
+.loader::before {
+  top: 0;
+}
+.loader::after {
+  bottom: 0;
+}
+
+@-webkit-keyframes load {
+  0% {
+    left: 0;
+    height: 30px;
+    width: 15px;
+  }
+  50% {
+    height: 8px;
+    width: 40px;
+  }
+  100% {
+    left: 235px;
+    height: 30px;
+    width: 15px;
+  }
+}
+
+@keyframes load {
+  0% {
+    left: 0;
+    height: 30px;
+    width: 15px;
+  }
+  50% {
+    height: 8px;
+    width: 40px;
+  }
+  100% {
+    left: 235px;
+    height: 30px;
+    width: 15px;
+  }
+}
diff --git a/modules/playground/src/web_workers/images/loader.js b/modules/playground/src/web_workers/images/loader.js
new file mode 100644
index 000000000000..374be14033e0
--- /dev/null
+++ b/modules/playground/src/web_workers/images/loader.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
+ */
+
+importScripts(
+    '../../../vendor/core.js', '../../../vendor/zone.js',
+    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
+    '../../../vendor/Reflect.js');
+
+
+System.config({
+  baseURL: '/all',
+
+  map: {
+    'base64-js': '/all/playground/vendor/base64-js',
+    'rxjs': '/all/playground/vendor/rxjs',
+  },
+  packages: {
+    '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+    'base64-js': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs': {main: 'index.js', defaultExtension: 'js'},
+  },
+
+  defaultJSExtensions: true
+});
+
+System.import('playground/src/web_workers/images/background_index')
+    .then(
+        function(m) {
+          try {
+            m.main();
+          } catch (e) {
+            console.error(e);
+          }
+        },
+        function(error) { console.error('error loading background', error); });
diff --git a/modules/playground/src/web_workers/images/services/bitmap.ts b/modules/playground/src/web_workers/images/services/bitmap.ts
new file mode 100644
index 000000000000..89e551b94676
--- /dev/null
+++ b/modules/playground/src/web_workers/images/services/bitmap.ts
@@ -0,0 +1,179 @@
+/**
+ * @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 {fromByteArray} from 'base64-js';
+
+// This class is based on the Bitmap examples at:
+// http://www.i-programmer.info/projects/36-web/6234-reading-a-bmp-file-in-javascript.html
+// and http://www.worldwidewhat.net/2012/07/how-to-draw-bitmaps-using-javascript/
+@Injectable()
+export class BitmapService {
+  convertToImageData(buffer: ArrayBuffer): ImageData {
+    const bmp = this._getBMP(buffer);
+    return this._BMPToImageData(bmp);
+  }
+
+  applySepia(imageData: ImageData): ImageData {
+    const buffer = imageData.data;
+    for (let i = 0; i < buffer.length; i += 4) {
+      const r = buffer[i];
+      const g = buffer[i + 1];
+      const b = buffer[i + 2];
+      buffer[i] = (r * .393) + (g * .769) + (b * .189);
+      buffer[i + 1] = (r * .349) + (g * .686) + (b * .168);
+      buffer[i + 2] = (r * .272) + (g * .534) + (b * .131);
+    }
+    return imageData;
+  }
+
+  toDataUri(imageData: ImageData): string {
+    const header = this._createBMPHeader(imageData);
+    imageData = this._imageDataToBMP(imageData);
+    return 'data:image/bmp;base64,' + btoa(header) + fromByteArray(imageData.data);
+  }
+
+  // converts a .bmp file ArrayBuffer to a dataURI
+  arrayBufferToDataUri(data: Uint8Array): string {
+    return 'data:image/bmp;base64,' + fromByteArray(data);
+  }
+
+  // returns a UInt8Array in BMP order (starting from the bottom)
+  private _imageDataToBMP(imageData: ImageData): ImageData {
+    const width = imageData.width;
+    const height = imageData.height;
+
+    const data = imageData.data;
+    for (let y = 0; y < height / 2; ++y) {
+      let topIndex = y * width * 4;
+      let bottomIndex = (height - y) * width * 4;
+      for (let i = 0; i < width * 4; i++) {
+        this._swap(data, topIndex, bottomIndex);
+        topIndex++;
+        bottomIndex++;
+      }
+    }
+
+    return imageData;
+  }
+
+  private _swap(data: Uint8Array|Uint8ClampedArray|number[], index1: number, index2: number) {
+    const temp = data[index1];
+    data[index1] = data[index2];
+    data[index2] = temp;
+  }
+
+  // Based on example from
+  // http://www.worldwidewhat.net/2012/07/how-to-draw-bitmaps-using-javascript/
+  private _createBMPHeader(imageData: ImageData): string {
+    const numFileBytes = this._getLittleEndianHex(imageData.width * imageData.height);
+    const w = this._getLittleEndianHex(imageData.width);
+    const h = this._getLittleEndianHex(imageData.height);
+    return 'BM' +             // Signature
+        numFileBytes +        // size of the file (bytes)*
+        '\x00\x00' +          // reserved
+        '\x00\x00' +          // reserved
+        '\x36\x00\x00\x00' +  // offset of where BMP data lives (54 bytes)
+        '\x28\x00\x00\x00' +  // number of remaining bytes in header from here (40 bytes)
+        w +                   // the width of the bitmap in pixels*
+        h +                   // the height of the bitmap in pixels*
+        '\x01\x00' +          // the number of color planes (1)
+        '\x20\x00' +          // 32 bits / pixel
+        '\x00\x00\x00\x00' +  // No compression (0)
+        '\x00\x00\x00\x00' +  // size of the BMP data (bytes)*
+        '\x13\x0B\x00\x00' +  // 2835 pixels/meter - horizontal resolution
+        '\x13\x0B\x00\x00' +  // 2835 pixels/meter - the vertical resolution
+        '\x00\x00\x00\x00' +  // Number of colors in the palette (keep 0 for 32-bit)
+        '\x00\x00\x00\x00';   // 0 important colors (means all colors are important)
+  }
+
+  private _BMPToImageData(bmp: BitmapFile): ImageData {
+    const width = bmp.infoHeader.biWidth;
+    const height = bmp.infoHeader.biHeight;
+    const imageData = new ImageData(width, height);
+
+    const data = imageData.data;
+    const bmpData = bmp.pixels;
+    const stride = bmp.stride;
+
+    for (let y = 0; y < height; ++y) {
+      for (let x = 0; x < width; ++x) {
+        const index1 = (x + width * (height - y)) * 4;
+        const index2 = x * 3 + stride * y;
+        data[index1] = bmpData[index2 + 2];
+        data[index1 + 1] = bmpData[index2 + 1];
+        data[index1 + 2] = bmpData[index2];
+        data[index1 + 3] = 255;
+      }
+    }
+    return imageData;
+  }
+
+  private _getBMP(buffer: ArrayBuffer): BitmapFile {
+    const datav = new DataView(buffer);
+    const bitmap: BitmapFile = {
+      fileHeader: {
+        bfType: datav.getUint16(0, true),
+        bfSize: datav.getUint32(2, true),
+        bfReserved1: datav.getUint16(6, true),
+        bfReserved2: datav.getUint16(8, true),
+        bfOffBits: datav.getUint32(10, true),
+      },
+      infoHeader: {
+        biSize: datav.getUint32(14, true),
+        biWidth: datav.getUint32(18, true),
+        biHeight: datav.getUint32(22, true),
+        biPlanes: datav.getUint16(26, true),
+        biBitCount: datav.getUint16(28, true),
+        biCompression: datav.getUint32(30, true),
+        biSizeImage: datav.getUint32(34, true),
+        biXPelsPerMeter: datav.getUint32(38, true),
+        biYPelsPerMeter: datav.getUint32(42, true),
+        biClrUsed: datav.getUint32(46, true),
+        biClrImportant: datav.getUint32(50, true)
+      },
+      stride: null,
+      pixels: null
+    };
+    const start = bitmap.fileHeader.bfOffBits;
+    bitmap.stride =
+        Math.floor((bitmap.infoHeader.biBitCount * bitmap.infoHeader.biWidth + 31) / 32) * 4;
+    bitmap.pixels = new Uint8Array(datav.buffer, start);
+    return bitmap;
+  }
+
+  // Based on example from
+  // http://www.worldwidewhat.net/2012/07/how-to-draw-bitmaps-using-javascript/
+  private _getLittleEndianHex(value: number): string {
+    const result: string[] = [];
+
+    for (let bytes = 4; bytes > 0; bytes--) {
+      result.push(String.fromCharCode(value & 255));
+      value >>= 8;
+    }
+
+    return result.join('');
+  }
+}
+
+interface BitmapFile {
+  fileHeader: {
+    bfType: number; bfSize: number; bfReserved1: number; bfReserved2: number; bfOffBits: number;
+  };
+  infoHeader: {
+    biSize: number; biWidth: number; biHeight: number; biPlanes: number; biBitCount: number;
+    biCompression: number;
+    biSizeImage: number;
+    biXPelsPerMeter: number;
+    biYPelsPerMeter: number;
+    biClrUsed: number;
+    biClrImportant: number
+  };
+  stride: number;
+  pixels: Uint8Array;
+}
diff --git a/modules/playground/src/web_workers/images/single_thread.html b/modules/playground/src/web_workers/images/single_thread.html
new file mode 100644
index 000000000000..98dcfcbb4317
--- /dev/null
+++ b/modules/playground/src/web_workers/images/single_thread.html
@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="image_demo.css" />
+  </head>
+  <body>
+    <image-demo>
+    </image-demo>
+
+    <script src="../../bootstrap.js"></script>
+    <!-- Compiled and minified CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
+
+    <!-- Compiled and minified JavaScript -->
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
+  </body>
+</html>
diff --git a/modules/playground/src/web_workers/images/single_thread.ts b/modules/playground/src/web_workers/images/single_thread.ts
new file mode 100644
index 000000000000..3a751fdece43
--- /dev/null
+++ b/modules/playground/src/web_workers/images/single_thread.ts
@@ -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
+ */
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {ImageDemo} from './index_common';
+
+@NgModule({bootstrap: [ImageDemo], imports: [BrowserModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
\ No newline at end of file
diff --git a/modules/playground/src/web_workers/input/background_index.ts b/modules/playground/src/web_workers/input/background_index.ts
new file mode 100644
index 000000000000..d05ec7043913
--- /dev/null
+++ b/modules/playground/src/web_workers/input/background_index.ts
@@ -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
+ */
+
+import {NgModule} from '@angular/core';
+import {WorkerAppModule} from '@angular/platform-webworker';
+import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
+
+import {InputCmp} from './index_common';
+
+@NgModule({imports: [WorkerAppModule], bootstrap: [InputCmp], declarations: [InputCmp]})
+class ExampleModule {
+}
+
+export function main() {
+  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/web_workers/input/index.html b/modules/playground/src/web_workers/input/index.html
new file mode 100644
index 000000000000..80dfbcbc729d
--- /dev/null
+++ b/modules/playground/src/web_workers/input/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <title>WebWorker Input Tests</title>
+  <style>
+  </style>
+<body>
+  <input-app>
+    Loading...
+  </input-app>
+
+  <script src="../../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/web_workers/input/index.ts b/modules/playground/src/web_workers/input/index.ts
new file mode 100644
index 000000000000..b45021b6fc1e
--- /dev/null
+++ b/modules/playground/src/web_workers/input/index.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 {bootstrapWorkerUi} from '@angular/platform-webworker';
+
+export function main() {
+  bootstrapWorkerUi('loader.js');
+}
diff --git a/modules/playground/src/web_workers/input/index_common.ts b/modules/playground/src/web_workers/input/index_common.ts
new file mode 100644
index 000000000000..6ac81ce050a9
--- /dev/null
+++ b/modules/playground/src/web_workers/input/index_common.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 {Component} from '@angular/core';
+
+@Component({
+  selector: 'input-app',
+  template: `
+    <h2>Input App</h2>
+    <div id="input-container">
+      <input type="text" (input)="inputChanged($event)">
+      <textarea (input)="textAreaChanged($event)"></textarea>
+      <div class="input-val">Input val is {{inputVal}}.</div>
+      <div class="textarea-val">Textarea val is {{textareaVal}}.</div>
+    </div>
+    <div id="ng-model-container">
+    </div>
+  `
+})
+export class InputCmp {
+  inputVal = '';
+  textareaVal = '';
+
+  inputChanged(e: Event) { this.inputVal = (e.target as HTMLInputElement).value; }
+
+  textAreaChanged(e: Event) { this.textareaVal = (e.target as HTMLTextAreaElement).value; }
+}
diff --git a/modules/playground/src/web_workers/input/loader.js b/modules/playground/src/web_workers/input/loader.js
new file mode 100644
index 000000000000..13b703e219bd
--- /dev/null
+++ b/modules/playground/src/web_workers/input/loader.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
+ */
+
+importScripts(
+    '../../../vendor/core.js', '../../../vendor/zone.js',
+    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
+    '../../../vendor/Reflect.js');
+
+
+System.config({
+  baseURL: '/all',
+
+  map: {
+    'rxjs': '/all/playground/vendor/rxjs',
+  },
+  packages: {
+    '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs': {main: 'index.js', defaultExtension: 'js'},
+  },
+
+  defaultJSExtensions: true
+});
+
+System.import('playground/src/web_workers/input/background_index')
+    .then(
+        function(m) {
+          try {
+            m.main();
+          } catch (e) {
+            console.error(e);
+          }
+        },
+        function(error) { console.error('error loading background', error); });
diff --git a/modules/playground/src/web_workers/kitchen_sink/background_index.ts b/modules/playground/src/web_workers/kitchen_sink/background_index.ts
new file mode 100644
index 000000000000..a2ea51650c7d
--- /dev/null
+++ b/modules/playground/src/web_workers/kitchen_sink/background_index.ts
@@ -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
+ */
+
+import {NgModule} from '@angular/core';
+import {WorkerAppModule} from '@angular/platform-webworker';
+import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
+
+import {HelloCmp} from './index_common';
+
+@NgModule({imports: [WorkerAppModule], bootstrap: [HelloCmp], declarations: [HelloCmp]})
+class ExampleModule {
+}
+
+export function main() {
+  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/web_workers/kitchen_sink/index.html b/modules/playground/src/web_workers/kitchen_sink/index.html
new file mode 100644
index 000000000000..793df34e11a8
--- /dev/null
+++ b/modules/playground/src/web_workers/kitchen_sink/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+  <title>Hello Angular</title>
+  <style>
+    .sample-area {
+      text-align: center;
+      margin: 5px;
+      height: 50px;
+      line-height: 50px;
+      border-radius: 5px;
+      border: 1px solid #d0d0d0;
+   }
+    .sample-area:focus {
+      border: 1px solid blue;
+      color: blue;
+      font-weight: bold;
+    }
+  </style>
+<body>
+  <hello-app>
+    Loading...
+  </hello-app>
+
+  <script src="../../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/web_workers/kitchen_sink/index.ts b/modules/playground/src/web_workers/kitchen_sink/index.ts
new file mode 100644
index 000000000000..b45021b6fc1e
--- /dev/null
+++ b/modules/playground/src/web_workers/kitchen_sink/index.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 {bootstrapWorkerUi} from '@angular/platform-webworker';
+
+export function main() {
+  bootstrapWorkerUi('loader.js');
+}
diff --git a/modules/playground/src/web_workers/kitchen_sink/index_common.ts b/modules/playground/src/web_workers/kitchen_sink/index_common.ts
new file mode 100644
index 000000000000..fd7c9b33738e
--- /dev/null
+++ b/modules/playground/src/web_workers/kitchen_sink/index_common.ts
@@ -0,0 +1,57 @@
+/**
+ * @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, ElementRef, Injectable, Renderer} from '@angular/core';
+
+// A service available to the Injector, used by the HelloCmp component.
+@Injectable()
+export class GreetingService {
+  greeting: string = 'hello';
+}
+
+// Directives are light-weight. They don't allow new
+// expression contexts (use @Component for those needs).
+@Directive({selector: '[red]'})
+export class RedDec {
+  // ElementRef is always injectable and it wraps the element on which the
+  // directive was found by the compiler.
+  constructor(el: ElementRef, renderer: Renderer) {
+    renderer.setElementStyle(el.nativeElement, 'color', 'red');
+  }
+}
+
+// Angular supports 2 basic types of directives:
+// - Component - the basic building blocks of Angular apps. Backed by
+//   ShadowDom.(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
+// - Directive - add behavior to existing elements.
+
+@Component({
+  // The Selector prop tells Angular on which elements to instantiate this
+  // class. The syntax supported is a basic subset of CSS selectors, for example
+  // 'element', '[attr]', [attr=foo]', etc.
+  selector: 'hello-app',
+  // These are services that would be created if a class in the component's
+  // template tries to inject them.
+  viewProviders: [GreetingService],
+  // The template for the component.
+  // Expressions in the template (like {{greeting}}) are evaluated in the
+  // context of the HelloCmp class below.
+  template: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
+           <button class="changeButton" (click)="changeGreeting()">change greeting</button>
+           <div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>`
+})
+export class HelloCmp {
+  greeting: string;
+  lastKey: string = '(none)';
+
+  constructor(service: GreetingService) { this.greeting = service.greeting; }
+
+  changeGreeting(): void { this.greeting = 'howdy'; }
+
+  onKeyDown(event: KeyboardEvent): void { this.lastKey = String.fromCharCode(event.keyCode); }
+}
diff --git a/modules/playground/src/web_workers/kitchen_sink/loader.js b/modules/playground/src/web_workers/kitchen_sink/loader.js
new file mode 100644
index 000000000000..d5bf332e0402
--- /dev/null
+++ b/modules/playground/src/web_workers/kitchen_sink/loader.js
@@ -0,0 +1,49 @@
+/**
+ * @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
+ */
+
+importScripts(
+    '../../../vendor/core.js', '../../../vendor/zone.js',
+    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
+    '../../../vendor/Reflect.js');
+
+
+System.config({
+  baseURL: '/all',
+
+  map: {
+    'rxjs': '/all/playground/vendor/rxjs',
+  },
+  packages: {
+    '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs': {main: 'index.js', defaultExtension: 'js'},
+  },
+
+  defaultJSExtensions: true
+});
+
+System.import('playground/src/web_workers/kitchen_sink/background_index')
+    .then(
+        function(m) {
+          try {
+            m.main();
+          } catch (e) {
+            console.error(e);
+          }
+        },
+        function(error) { console.error('error loading background', error); });
diff --git a/modules/playground/src/web_workers/message_broker/background_index.ts b/modules/playground/src/web_workers/message_broker/background_index.ts
new file mode 100644
index 000000000000..df555d60a3cd
--- /dev/null
+++ b/modules/playground/src/web_workers/message_broker/background_index.ts
@@ -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
+ */
+
+import {NgModule} from '@angular/core';
+import {WorkerAppModule} from '@angular/platform-webworker';
+import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
+
+import {App} from './index_common';
+
+@NgModule({imports: [WorkerAppModule], bootstrap: [App], declarations: [App]})
+class ExampleModule {
+}
+
+export function main() {
+  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/web_workers/message_broker/index.html b/modules/playground/src/web_workers/message_broker/index.html
new file mode 100644
index 000000000000..40450e78dda4
--- /dev/null
+++ b/modules/playground/src/web_workers/message_broker/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <title>Message Broker Example</title>
+<body>
+  <app></app>
+  <input type="text" id="echo_input" />
+  <button type="button" id="send_echo">Send Echo</button>
+  <p id="echo_result"></p>
+  <p id="ui_result"></p>
+  <script src="../../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/web_workers/message_broker/index.ts b/modules/playground/src/web_workers/message_broker/index.ts
new file mode 100644
index 000000000000..4d14bd5d62e8
--- /dev/null
+++ b/modules/playground/src/web_workers/message_broker/index.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 {PlatformRef} from '@angular/core';
+import {ClientMessageBrokerFactory, FnArg, SerializerTypes, UiArguments, bootstrapWorkerUi} from '@angular/platform-webworker';
+
+const ECHO_CHANNEL = 'ECHO';
+
+export function main() {
+  bootstrapWorkerUi('loader.js').then(afterBootstrap);
+}
+
+function afterBootstrap(ref: PlatformRef) {
+  const brokerFactory: ClientMessageBrokerFactory = ref.injector.get(ClientMessageBrokerFactory);
+  const broker = brokerFactory.createMessageBroker(ECHO_CHANNEL, false);
+
+  document.getElementById('send_echo').addEventListener('click', (e) => {
+    const val = (<HTMLInputElement>document.getElementById('echo_input')).value;
+    // TODO(jteplitz602): Replace default constructors with real constructors
+    // once they're in the .d.ts file (#3926)
+    const fnArg = new FnArg(val);
+    const args = new UiArguments('echo', [fnArg]);
+
+    broker.runOnService(args, SerializerTypes.PRIMITIVE).then((echo_result: string) => {
+      document.getElementById('echo_result').innerHTML =
+          `<span class='response'>${echo_result}</span>`;
+    });
+  });
+}
diff --git a/modules/playground/src/web_workers/message_broker/index_common.ts b/modules/playground/src/web_workers/message_broker/index_common.ts
new file mode 100644
index 000000000000..181b5811669c
--- /dev/null
+++ b/modules/playground/src/web_workers/message_broker/index_common.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 {SerializerTypes, ServiceMessageBrokerFactory} from '@angular/platform-webworker';
+
+const ECHO_CHANNEL = 'ECHO';
+
+@Component({selector: 'app', template: '<h1>WebWorker MessageBroker Test</h1>'})
+export class App {
+  constructor(private _serviceBrokerFactory: ServiceMessageBrokerFactory) {
+    const broker = _serviceBrokerFactory.createMessageBroker(ECHO_CHANNEL, false);
+    broker.registerMethod(
+        'echo', [SerializerTypes.PRIMITIVE], this._echo, SerializerTypes.PRIMITIVE);
+  }
+
+  private _echo(val: string) { return new Promise((res) => res(val)); }
+}
diff --git a/modules/playground/src/web_workers/message_broker/loader.js b/modules/playground/src/web_workers/message_broker/loader.js
new file mode 100644
index 000000000000..5d69da02dbc3
--- /dev/null
+++ b/modules/playground/src/web_workers/message_broker/loader.js
@@ -0,0 +1,49 @@
+/**
+ * @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
+ */
+
+importScripts(
+    '../../../vendor/core.js', '../../../vendor/zone.js',
+    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
+    '../../../vendor/Reflect.js');
+
+
+System.config({
+  baseURL: '/all',
+
+  map: {
+    'rxjs': '/all/playground/vendor/rxjs',
+  },
+  packages: {
+    '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs': {main: 'index.js', defaultExtension: 'js'},
+  },
+
+  defaultJSExtensions: true
+});
+
+System.import('playground/src/web_workers/message_broker/background_index')
+    .then(
+        function(m) {
+          try {
+            m.main();
+          } catch (e) {
+            console.error(e);
+          }
+        },
+        function(error) { console.error('error loading background', error); });
diff --git a/modules/playground/src/web_workers/router/app.html b/modules/playground/src/web_workers/router/app.html
new file mode 100644
index 000000000000..d79243c194f6
--- /dev/null
+++ b/modules/playground/src/web_workers/router/app.html
@@ -0,0 +1,11 @@
+<nav>
+	<ul>
+		<li class="start" routerLink="/">Start</li>
+		<li class="about" routerLink="/about">About</li>
+		<li class="contact" routerLink="/contact">Contact</li>
+	</ul>
+</nav>
+<main>
+	<router-outlet></router-outlet>
+</main>
+
diff --git a/modules/playground/src/web_workers/router/background_index.ts b/modules/playground/src/web_workers/router/background_index.ts
new file mode 100644
index 000000000000..c60355187d41
--- /dev/null
+++ b/modules/playground/src/web_workers/router/background_index.ts
@@ -0,0 +1,15 @@
+/**
+ * @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 {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
+
+import {AppModule} from './index_common';
+
+export function main() {
+  platformWorkerAppDynamic().bootstrapModule(AppModule);
+}
diff --git a/modules/playground/src/web_workers/router/components/about.ts b/modules/playground/src/web_workers/router/components/about.ts
new file mode 100644
index 000000000000..6a8d75f28937
--- /dev/null
+++ b/modules/playground/src/web_workers/router/components/about.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 {Component} from '@angular/core';
+@Component({selector: 'about', template: '<h1>About</h1>'})
+export class About {
+}
diff --git a/modules/playground/src/web_workers/router/components/contact.ts b/modules/playground/src/web_workers/router/components/contact.ts
new file mode 100644
index 000000000000..cf133b158834
--- /dev/null
+++ b/modules/playground/src/web_workers/router/components/contact.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 {Component} from '@angular/core';
+@Component({selector: 'contact', template: '<h1>Contact</h1>'})
+export class Contact {
+}
diff --git a/modules/playground/src/web_workers/router/components/start.ts b/modules/playground/src/web_workers/router/components/start.ts
new file mode 100644
index 000000000000..923a738fb061
--- /dev/null
+++ b/modules/playground/src/web_workers/router/components/start.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 {Component} from '@angular/core';
+@Component({selector: 'start', template: '<h1>Start</h1>'})
+export class Start {
+}
diff --git a/modules/playground/src/web_workers/router/index.html b/modules/playground/src/web_workers/router/index.html
new file mode 100644
index 000000000000..36d69ed15fbe
--- /dev/null
+++ b/modules/playground/src/web_workers/router/index.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+  <title>Web Worker Router Example</title>
+<body>
+  <app></app>
+  <script src="../../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/web_workers/router/index.ts b/modules/playground/src/web_workers/router/index.ts
new file mode 100644
index 000000000000..bc138f7a99ab
--- /dev/null
+++ b/modules/playground/src/web_workers/router/index.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 {WORKER_UI_LOCATION_PROVIDERS, bootstrapWorkerUi} from '@angular/platform-webworker';
+
+export function main() {
+  bootstrapWorkerUi('loader.js', WORKER_UI_LOCATION_PROVIDERS);
+}
diff --git a/modules/playground/src/web_workers/router/index_common.ts b/modules/playground/src/web_workers/router/index_common.ts
new file mode 100644
index 000000000000..7c927c1d20c7
--- /dev/null
+++ b/modules/playground/src/web_workers/router/index_common.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 {Component, NgModule} from '@angular/core';
+import {WORKER_APP_LOCATION_PROVIDERS, WorkerAppModule} from '@angular/platform-webworker';
+import {RouterModule} from '@angular/router';
+
+import {About} from './components/about';
+import {Contact} from './components/contact';
+import {Start} from './components/start';
+
+@Component({selector: 'app', templateUrl: 'app.html'})
+export class App {
+}
+
+export const ROUTES = [
+  {path: '', component: Start}, {path: 'contact', component: Contact},
+  {path: 'about', component: About}
+];
+
+@NgModule({
+  imports: [WorkerAppModule, RouterModule.forRoot(ROUTES, {useHash: true})],
+  providers: [
+    WORKER_APP_LOCATION_PROVIDERS,
+  ],
+  bootstrap: [App],
+  declarations: [App, Start, Contact, About]
+})
+export class AppModule {
+}
diff --git a/modules/playground/src/web_workers/router/loader.js b/modules/playground/src/web_workers/router/loader.js
new file mode 100644
index 000000000000..c5123e2c3e25
--- /dev/null
+++ b/modules/playground/src/web_workers/router/loader.js
@@ -0,0 +1,49 @@
+/**
+ * @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
+ */
+
+importScripts(
+    '../../../vendor/core.js', '../../../vendor/zone.js',
+    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
+    '../../../vendor/Reflect.js');
+
+
+System.config({
+  baseURL: '/all',
+
+  map: {
+    'rxjs': '/all/playground/vendor/rxjs',
+  },
+  packages: {
+    '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs': {main: 'index.js', defaultExtension: 'js'},
+  },
+
+  defaultJSExtensions: true
+});
+
+System.import('playground/src/web_workers/router/background_index')
+    .then(
+        function(m) {
+          try {
+            m.main();
+          } catch (e) {
+            console.error(e);
+          }
+        },
+        function(error) { console.error('error loading background', error); });
diff --git a/modules/playground/src/web_workers/todo/background_index.ts b/modules/playground/src/web_workers/todo/background_index.ts
new file mode 100644
index 000000000000..190431081aa9
--- /dev/null
+++ b/modules/playground/src/web_workers/todo/background_index.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 {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {WorkerAppModule} from '@angular/platform-webworker';
+import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
+
+import {TodoApp} from './index_common';
+
+@NgModule({imports: [WorkerAppModule, FormsModule], bootstrap: [TodoApp], declarations: [TodoApp]})
+class ExampleModule {
+}
+
+export function main() {
+  platformWorkerAppDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/playground/src/web_workers/todo/css/bg.png b/modules/playground/src/web_workers/todo/css/bg.png
new file mode 100644
index 000000000000..b2a7600825ee
Binary files /dev/null and b/modules/playground/src/web_workers/todo/css/bg.png differ
diff --git a/modules/playground/src/web_workers/todo/css/main.css b/modules/playground/src/web_workers/todo/css/main.css
new file mode 100644
index 000000000000..a87b28d93482
--- /dev/null
+++ b/modules/playground/src/web_workers/todo/css/main.css
@@ -0,0 +1,399 @@
+@charset "utf-8";
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  background: #eaeaea;
+  color: #4d4d4d;
+  width: 550px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  -ms-font-smoothing: antialiased;
+  -o-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  -ms-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+button,
+input[type="checkbox"] {
+  outline: none;
+}
+
+.hidden {
+  display: none;
+}
+
+.visible {
+  display: block !important;
+}
+
+#todoapp {
+  background: #fff;
+  margin: 130px 0 40px 0;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+  0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+#todoapp input::-webkit-input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: #e6e6e6;
+}
+
+#todoapp input::-moz-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: #e6e6e6;
+}
+
+#todoapp input::input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: #e6e6e6;
+}
+
+#todoapp h1 {
+  position: absolute;
+  top: -155px;
+  width: 100%;
+  font-size: 100px;
+  font-weight: 100;
+  text-align: center;
+  color: rgba(175, 47, 47, 0.15);
+  -webkit-text-rendering: optimizeLegibility;
+  -moz-text-rendering: optimizeLegibility;
+  -ms-text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
+}
+
+#new-todo,
+.edit {
+  position: relative;
+  margin: 0;
+  width: 100%;
+  font-size: 24px;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: 1.4em;
+  border: 0;
+  outline: none;
+  color: inherit;
+  padding: 6px;
+  border: 1px solid #999;
+  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  -ms-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+#new-todo {
+  padding: 16px 16px 16px 60px;
+  border: none;
+  background: rgba(0, 0, 0, 0.003);
+  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+#main {
+  position: relative;
+  z-index: 2;
+  border-top: 1px solid #e6e6e6;
+}
+
+label[for='toggle-all'] {
+  display: none;
+}
+
+#toggle-all {
+  position: absolute;
+  top: -55px;
+  left: -12px;
+  width: 60px;
+  height: 34px;
+  text-align: center;
+  border: none; /* Mobile Safari */
+}
+
+#toggle-all:before {
+  content: '❯';
+  font-size: 22px;
+  color: #e6e6e6;
+  padding: 10px 27px 10px 27px;
+}
+
+#toggle-all:checked:before {
+  color: #737373;
+}
+
+#todo-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+#todo-list li {
+  position: relative;
+  font-size: 24px;
+  border-bottom: 1px solid #ededed;
+}
+
+#todo-list li:last-child {
+  border-bottom: none;
+}
+
+#todo-list li.editing {
+  border-bottom: none;
+  padding: 0;
+}
+
+#todo-list li.editing .edit {
+  display: block;
+  width: 506px;
+  padding: 13px 17px 12px 17px;
+  margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+  display: none;
+}
+
+#todo-list li .toggle {
+  text-align: center;
+  width: 40px;
+  /* auto, since non-WebKit browsers doesn't support input styling */
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  border: none; /* Mobile Safari */
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+}
+
+#todo-list li .toggle:after {
+  content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+}
+
+#todo-list li .toggle:checked:after {
+  content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+}
+
+#todo-list li label {
+  white-space: pre;
+  word-break: break-word;
+  padding: 15px 60px 15px 15px;
+  margin-left: 45px;
+  display: block;
+  line-height: 1.2;
+  transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+  color: #d9d9d9;
+  text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
+  margin: auto 0;
+  font-size: 30px;
+  color: #cc9a9a;
+  margin-bottom: 11px;
+  transition: color 0.2s ease-out;
+}
+
+#todo-list li .destroy:hover {
+  color: #af5b5e;
+}
+
+#todo-list li .destroy:after {
+  content: '×';
+}
+
+#todo-list li:hover .destroy {
+  display: block;
+}
+
+#todo-list li .edit {
+  display: none;
+}
+
+#todo-list li.editing:last-child {
+  margin-bottom: -1px;
+}
+
+#footer {
+  color: #777;
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  border-top: 1px solid #e6e6e6;
+}
+
+#footer:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 50px;
+  overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+  0 8px 0 -3px #f6f6f6,
+  0 9px 1px -3px rgba(0, 0, 0, 0.2),
+  0 16px 0 -6px #f6f6f6,
+  0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+  float: left;
+  text-align: left;
+}
+
+#todo-count strong {
+  font-weight: 300;
+}
+
+#filters {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+}
+
+#filters li {
+  display: inline;
+}
+
+#filters li a {
+  color: inherit;
+  margin: 3px;
+  padding: 3px 7px;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+#filters li a.selected,
+#filters li a:hover {
+  border-color: rgba(175, 47, 47, 0.1);
+}
+
+#filters li a.selected {
+  border-color: rgba(175, 47, 47, 0.2);
+}
+
+#clear-completed,
+html #clear-completed:active {
+  float: right;
+  position: relative;
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
+  visibility: hidden;
+  position: relative;
+}
+
+#clear-completed::after {
+  visibility: visible;
+  content: 'Clear completed';
+  position: absolute;
+  right: 0;
+  white-space: nowrap;
+}
+
+#clear-completed:hover::after {
+  text-decoration: underline;
+}
+
+#info {
+  margin: 65px auto 0;
+  color: #bfbfbf;
+  font-size: 10px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-align: center;
+}
+
+#info p {
+  line-height: 1;
+}
+
+#info a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+#info a:hover {
+  text-decoration: underline;
+}
+
+/*
+Hack to remove background from Mobile Safari.
+Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  #toggle-all,
+  #todo-list li .toggle {
+    background: none;
+  }
+
+  #todo-list li .toggle {
+    height: 40px;
+  }
+
+  #toggle-all {
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+@media (max-width: 430px) {
+  #footer {
+    height: 50px;
+  }
+
+  #filters {
+    bottom: 10px;
+  }
+}
diff --git a/modules/playground/src/web_workers/todo/index.html b/modules/playground/src/web_workers/todo/index.html
new file mode 100644
index 000000000000..699655ded7dd
--- /dev/null
+++ b/modules/playground/src/web_workers/todo/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <title>Todo Angular - WebWorker</title>
+  <link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
+<body>
+  <todo-app>
+    Loading...
+  </todo-app>
+
+
+  <script src="../../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/web_workers/todo/index.ts b/modules/playground/src/web_workers/todo/index.ts
new file mode 100644
index 000000000000..b45021b6fc1e
--- /dev/null
+++ b/modules/playground/src/web_workers/todo/index.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 {bootstrapWorkerUi} from '@angular/platform-webworker';
+
+export function main() {
+  bootstrapWorkerUi('loader.js');
+}
diff --git a/modules/playground/src/web_workers/todo/index_common.ts b/modules/playground/src/web_workers/todo/index_common.ts
new file mode 100644
index 000000000000..584ae61e86ee
--- /dev/null
+++ b/modules/playground/src/web_workers/todo/index_common.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 {Store, Todo, TodoFactory} from './services/TodoStore';
+
+@Component({selector: 'todo-app', viewProviders: [Store, TodoFactory], templateUrl: 'todo.html'})
+export class TodoApp {
+  todoEdit: Todo = null;
+  inputValue: string;
+  hideActive: boolean = false;
+  hideCompleted: boolean = false;
+  isComplete: boolean = false;
+
+  constructor(public todoStore: Store<Todo>, public factory: TodoFactory) {}
+
+  enterTodo(): void {
+    this.addTodo(this.inputValue);
+    this.inputValue = '';
+  }
+
+  doneEditing($event: KeyboardEvent, todo: Todo): void {
+    const which = $event.keyCode;
+    if (which === 13) {
+      todo.title = todo.editTitle;
+      this.todoEdit = null;
+    } else if (which === 27) {
+      this.todoEdit = null;
+      todo.editTitle = todo.title;
+    }
+  }
+
+  editTodo(todo: Todo): void { this.todoEdit = todo; }
+
+  addTodo(newTitle: string): void { this.todoStore.add(this.factory.create(newTitle, false)); }
+
+  completeMe(todo: Todo): void { todo.completed = !todo.completed; }
+
+  toggleCompleted(): void {
+    this.hideActive = !this.hideActive;
+    this.hideCompleted = false;
+  }
+
+  toggleActive(): void {
+    this.hideCompleted = !this.hideCompleted;
+    this.hideActive = false;
+  }
+
+  showAll(): void {
+    this.hideCompleted = false;
+    this.hideActive = false;
+  }
+
+  deleteMe(todo: Todo): void { this.todoStore.remove(todo); }
+
+  toggleAll($event: MouseEvent): void {
+    this.isComplete = !this.isComplete;
+    this.todoStore.list.forEach((todo: Todo) => { todo.completed = this.isComplete; });
+  }
+
+  clearCompleted(): void { this.todoStore.removeBy((todo: Todo) => todo.completed); }
+}
diff --git a/modules/playground/src/web_workers/todo/index_web_socket.html b/modules/playground/src/web_workers/todo/index_web_socket.html
new file mode 100644
index 000000000000..ef39c45a5fb9
--- /dev/null
+++ b/modules/playground/src/web_workers/todo/index_web_socket.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <title>Todo Angular - WebWorker</title>
+  <link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
+<body>
+  <todo-app>
+    Loading...
+  </todo-app>
+
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/web_workers/todo/loader.js b/modules/playground/src/web_workers/todo/loader.js
new file mode 100644
index 000000000000..f559e52ba7d7
--- /dev/null
+++ b/modules/playground/src/web_workers/todo/loader.js
@@ -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
+ */
+
+importScripts(
+    '../../../vendor/core.js', '../../../vendor/zone.js',
+    '../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
+    '../../../vendor/Reflect.js');
+
+
+System.config({
+  baseURL: '/all',
+
+  map: {
+    'rxjs': '/all/playground/vendor/rxjs',
+  },
+  packages: {
+    '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/forms': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs': {main: 'index.js', defaultExtension: 'js'},
+  },
+
+  defaultJSExtensions: true
+});
+
+System.import('playground/src/web_workers/todo/background_index')
+    .then(
+        function(m) {
+          try {
+            m.main();
+          } catch (e) {
+            console.error(e);
+          }
+        },
+        function(error) { console.error('error loading background', error); });
diff --git a/modules/playground/src/web_workers/todo/services/TodoStore.ts b/modules/playground/src/web_workers/todo/services/TodoStore.ts
new file mode 100644
index 000000000000..c889788eb83b
--- /dev/null
+++ b/modules/playground/src/web_workers/todo/services/TodoStore.ts
@@ -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
+ */
+
+import {Injectable} from '@angular/core';
+
+// base model for RecordStore
+export class KeyModel {
+  constructor(public key: number) {}
+}
+
+export class Todo extends KeyModel {
+  editTitle: string;
+  constructor(key: number, public title: string, public completed: boolean) {
+    super(key);
+    this.editTitle = title;
+  }
+}
+
+@Injectable()
+export class TodoFactory {
+  private _uid: number = 0;
+
+  nextUid(): number { return ++this._uid; }
+
+  create(title: string, isCompleted: boolean): Todo {
+    return new Todo(this.nextUid(), title, isCompleted);
+  }
+}
+
+// Store manages any generic item that inherits from KeyModel
+@Injectable()
+export class Store<T extends KeyModel> {
+  list: T[] = [];
+
+  add(record: T): void { this.list.push(record); }
+
+  remove(record: T): void { this.removeBy((item) => item === record); }
+
+  removeBy(callback: (record: T) => boolean): void {
+    this.list = this.list.filter((record) => !callback(record));
+  }
+}
diff --git a/modules/playground/src/web_workers/todo/todo.html b/modules/playground/src/web_workers/todo/todo.html
new file mode 100644
index 000000000000..d65042c440c7
--- /dev/null
+++ b/modules/playground/src/web_workers/todo/todo.html
@@ -0,0 +1,68 @@
+<section id="todoapp">
+
+  <header id="header">
+    <h1>todos</h1>
+    <input
+      id="new-todo"
+      placeholder="What needs to be done?"
+      [(ngModel)]="inputValue"
+      autofocus
+      #newtodo
+      (keyup.enter)="enterTodo()">
+  </header>
+
+  <section id="main">
+    <input id="toggle-all" type="checkbox" [checked]="isComplete" (click)="toggleAll($event)">
+    <label for="toggle-all">Mark all as complete</label>
+
+    <ul id="todo-list">
+
+      <li *ngFor="let todo of todoStore.list" [class.hidden]="hideActive && !todo.completed || hideCompleted && todo.completed">
+        <div class="view"
+            [class.hidden]="todoEdit == todo">
+
+          <input class="toggle" type="checkbox"
+                 (click)="completeMe(todo)"
+                 [checked]="todo.completed">
+
+          <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
+          <button class="destroy" (click)="deleteMe(todo)"></button>
+
+        </div>
+
+        <div>
+
+          <input class="edit"
+            [class.visible]="todoEdit == todo"
+            [(ngModel)]="todo.editTitle"
+            (keyup)="doneEditing($event, todo)">
+
+        </div>
+      </li>
+    </ul>
+
+  </section>
+
+  <footer id="footer">
+    <span id="todo-count"></span>
+    <div [class.hidden]="true"></div>
+    <ul id="filters">
+      <li>
+        <a href="#/" [class.selected]="!hideActive && !hideCompleted" (click)="showAll()">All</a>
+      </li>
+      <li>
+        <a href="#/active" [class.selected]="hideCompleted" (click)="toggleActive()">Active</a>
+      </li>
+      <li>
+        <a href="#/completed" [class.selected]="hideActive" (click)="toggleCompleted()">Completed</a>
+      </li>
+    </ul>
+    <button id="clear-completed" (click)="clearCompleted()">Clear completed</button>
+  </footer>
+
+</section>
+
+<footer id="info">
+  <p>Double-click to edit a todo</p>
+  <p>Created by <a href="http://twitter.com/angularjs">The Angular Team</a></p>
+</footer>
diff --git a/modules/playground/src/zippy_component/app/zippy.html b/modules/playground/src/zippy_component/app/zippy.html
new file mode 100644
index 000000000000..4d5c36fb45c8
--- /dev/null
+++ b/modules/playground/src/zippy_component/app/zippy.html
@@ -0,0 +1,8 @@
+<div class="zippy">
+  <div (click)="toggle()" class="zippy__title">
+    {{ visible ? '&#x25BE;' : '&#x25B8;' }} {{title}}
+  </div>
+  <div [hidden]="!visible" class="zippy__content">
+    <ng-content></ng-content>
+  </div>
+</div>
diff --git a/modules/playground/src/zippy_component/app/zippy.ts b/modules/playground/src/zippy_component/app/zippy.ts
new file mode 100644
index 000000000000..dd738bae1dd1
--- /dev/null
+++ b/modules/playground/src/zippy_component/app/zippy.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 {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({selector: 'zippy', templateUrl: 'app/zippy.html'})
+export class Zippy {
+  visible: boolean = true;
+  @Input() title: string = '';
+  @Output() open: EventEmitter<any> = new EventEmitter();
+  @Output() close: EventEmitter<any> = new EventEmitter();
+
+  toggle() {
+    this.visible = !this.visible;
+    if (this.visible) {
+      this.open.emit(null);
+    } else {
+      this.close.emit(null);
+    }
+  }
+}
diff --git a/modules/playground/src/zippy_component/index.html b/modules/playground/src/zippy_component/index.html
new file mode 100644
index 000000000000..3310e15eb042
--- /dev/null
+++ b/modules/playground/src/zippy_component/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <title>Zippy Angular</title>
+<body>
+  <zippy-app>
+    Loading...
+  </zippy-app>
+
+  <script src="../bootstrap.js"></script>
+</body>
+</html>
diff --git a/modules/playground/src/zippy_component/index.ts b/modules/playground/src/zippy_component/index.ts
new file mode 100644
index 000000000000..5e17f1b22565
--- /dev/null
+++ b/modules/playground/src/zippy_component/index.ts
@@ -0,0 +1,38 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {Zippy} from './app/zippy';
+
+@Component({
+  selector: 'zippy-app',
+  template: `
+    <zippy (open)="pushLog('open')" (close)="pushLog('close')" title="Details">
+      This is some content.
+    </zippy>
+    <ul>
+      <li *ngFor="let  log of logs">{{log}}</li>
+    </ul>
+  `
+})
+class ZippyApp {
+  logs: string[] = [];
+
+  pushLog(log: string) { this.logs.push(log); }
+}
+
+@NgModule({declarations: [ZippyApp, Zippy], bootstrap: [ZippyApp], imports: [BrowserModule]})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}
diff --git a/modules/rtts_assert/README.js.md b/modules/rtts_assert/README.js.md
deleted file mode 100644
index 88d2e3691f3c..000000000000
--- a/modules/rtts_assert/README.js.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Rtts-Assert
-
-A run-time type assertion library for JavaScript.
-Designed to be used with [Traceur](https://github.com/google/traceur-compiler).
-
-All sources are in ES6 format. They don't depend on any runtime
-and can be used by any modern ES6 -> ES5 transpiler.
-
-As a convenience, we provide you with `es5build.js`, a script to transpile the sources into es5
-using [Google Traceur](https://github.com/google/traceur-compiler/).
-
-License: Apache MIT 2.0
-
-## API
-
-```
-// Asserting APIs:
-// - generated by Traceur (based on type annotations)
-// - can be also used in tests for instance
-assert.type(something, Type);
-assert.returnType(returnValue, Type);
-assert.argumentTypes(firstArg, Type, secondArg, Type);
-
-// this can be used anywhere in the code
-// (useful inside test, when we don't wanna define an interface)
-assert(value).is(...)
-
-
-// Custom type assert:
-// - i have a custom type
-// - adding an assert methos
-assert.define(MyUser, function(value) {
-  assert(value).is(Type, Type2); // or
-  assert(value, 'name').is(assert.string);
-  assert(value, 'contact').is(assert.structure({
-    email: assert.string,
-    cell: assert.string
-  }));
-  assert(value, 'contacts').is(assert.arrayOf(assert.structure({email: assert.string})));
-});
-
-
-// Define interface (an empty type with assert method)
-// - returns an empty class with assert method
-var Email = assert.define('IEmail', function(value) {
-  assert(value).is(String);
-
-  if (value.indexOf('@') !== -1) {
-    assert.fail('has to contain "@"');
-  }
-});
-
-
-// Predefined types
-assert.string
-assert.number
-assert.boolean
-assert.arrayOf(...types)
-assert.structure(object)
-```
\ No newline at end of file
diff --git a/modules/rtts_assert/package.json b/modules/rtts_assert/package.json
deleted file mode 100644
index b287849ca666..000000000000
--- a/modules/rtts_assert/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "rtts_assert",
-  "version": "<%= packageJson.version %>",
-  "description": "A run-time type assertion library for JavaScript",
-  "homepage": "<%= packageJson.homepage %>",
-  "bugs": "<%= packageJson.bugs %>",
-  "contributors": <%= JSON.stringify(packageJson.contributors) %>,
-  "license": "<%= packageJson.license %>",
-  "devDependencies": {
-    "yargs": "2.3.*",
-    "gulp-sourcemaps": "1.3.*",
-    "gulp-traceur": "0.16.*",
-    "gulp": "^3.8.8",
-    "gulp-rename": "^1.2.0",
-    "through2": "^0.6.1"
-  }
-}
diff --git a/modules/rtts_assert/rtts_assert.ts b/modules/rtts_assert/rtts_assert.ts
deleted file mode 100644
index dce716a413c2..000000000000
--- a/modules/rtts_assert/rtts_assert.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './src/rtts_assert';
diff --git a/modules/rtts_assert/src/rtts_assert.ts b/modules/rtts_assert/src/rtts_assert.ts
deleted file mode 100644
index e96e0b147ebe..000000000000
--- a/modules/rtts_assert/src/rtts_assert.ts
+++ /dev/null
@@ -1,369 +0,0 @@
-var _global = typeof window === 'object' ? window : global;
-
-// TODO(vojta):
-// - extract into multiple files
-// - different error types
-// - simplify/humanize error messages
-// - throw when invalid input (such as odd number of args into assert.argumentTypes)
-
-var POSITION_NAME = ['', '1st', '2nd', '3rd'];
-function argPositionName(i) {
-  var position = (i / 2) + 1;
-
-  return POSITION_NAME[position] || (position + 'th');
-}
-
-var primitives;
-var genericType;
-
-if (typeof _global['$traceurRuntime'] === 'object') {
-  primitives = _global['$traceurRuntime'].type;
-  genericType = _global['$traceurRuntime'].genericType;
-} else {
-  // Allow to work without traceur runtime as well!
-  primitives = {
-    any: {name: 'any'},
-    boolean: {name: 'boolean'},
-    number: {name: 'number'},
-    string: {name: 'string'},
-    symbol: {name: 'symbol'}, void: {name: 'void'}
-  };
-  genericType = function(type, args) {
-    return { type: type, args: args }
-  }
-}
-Object.keys(primitives).forEach(function(name) { primitives[name].__assertName = name; });
-
-export function proxy() {}
-
-function assertArgumentTypes(...params) {
-  var actual, type;
-  var currentArgErrors;
-  var errors = [];
-  var msg;
-
-  for (var i = 0, l = params.length; i < l; i = i + 2) {
-    actual = params[i];
-    type = params[i + 1];
-
-    currentArgErrors = [];
-
-    // currentStack = [];
-    //
-
-    if (!isType(actual, type, currentArgErrors)) {
-      // console.log(JSON.stringify(errors, null, '  '));
-      // TODO(vojta): print "an instance of" only if T starts with uppercase.
-      errors.push(argPositionName(i) + ' argument has to be an instance of ' + prettyPrint(type) +
-                  ', got ' + prettyPrint(actual));
-      if (currentArgErrors.length) {
-        errors.push(currentArgErrors);
-      }
-    }
-  }
-
-  if (errors.length) {
-    throw new Error('Invalid arguments given!\n' + formatErrors(errors));
-  }
-}
-
-function prettyPrint(value, depth?) {
-  if (typeof(depth) === 'undefined') {
-    depth = 0;
-  }
-
-  if (depth++ > 3) {
-    return '[...]';
-  }
-
-  if (typeof value === 'undefined') {
-    return 'undefined';
-  }
-
-  if (typeof value === 'string') {
-    return '"' + value + '"';
-  }
-
-  if (typeof value === 'boolean') {
-    return value.toString();
-  }
-
-  if (value === null) {
-    return 'null';
-  }
-
-  if (typeof value === 'object') {
-    if (value.__assertName) {
-      return value.__assertName;
-    }
-
-    if (value.map && typeof value.map === 'function') {
-      return '[' + value.map((v) => prettyPrint(v, depth)).join(', ') + ']';
-    }
-
-    var properties = Object.keys(value);
-    var suffix = '}';
-    if (properties.length > 20) {
-      properties.length = 20;
-      suffix = ', ... }';
-    }
-    return '{' + properties.map((p) => p + ': ' + prettyPrint(value[p], depth)).join(', ') + suffix;
-  }
-
-  return value.__assertName || value.name || value.toString();
-}
-
-function isType(value, T, errors) {
-  if (T && T.type) {
-    // needed for generics.
-    // TODO(tbosch): read out T.args and do assertions based on them as well!
-    T = T.type;
-  }
-  if (T === primitives.void) {
-    return typeof value === 'undefined';
-  }
-
-  if (_isProxy(value)) {
-    return true;
-  }
-
-  if (T === primitives.any || value === null) {
-    return true;
-  }
-
-  if (T === primitives.string) {
-    return typeof value === 'string';
-  }
-
-  if (T === primitives.number) {
-    return typeof value === 'number';
-  }
-
-  if (T === primitives.boolean) {
-    return typeof value === 'boolean';
-  }
-
-  // var parentStack = currentStack;
-  // currentStack = [];
-
-  // shouldnt this create new stack?
-  if (typeof T.assert === 'function') {
-    var parentStack = currentStack;
-    var isValid;
-    currentStack = errors;
-    try {
-      isValid = T.assert(value);
-    } catch (e) {
-      fail(e.message);
-      isValid = false;
-    }
-
-    currentStack = parentStack;
-
-    if (typeof isValid === 'undefined') {
-      isValid = errors.length === 0;
-    }
-
-    return isValid;
-
-    // if (!currentStack.length) {
-    //   currentStack = parentStack;
-    //   return [];
-    // }
-    // var res = currentStack;
-    // currentStack = parentStack;
-    // return ['not instance of ' + prettyPrint(T), res];
-  }
-
-  return value instanceof T;
-
-  // if (!(value instanceof T)) {
-  //   fail('not instance of ' + prettyPrint(T));
-  // }
-
-  // var res = currentStack;
-  // currentStack = parentStack;
-
-  // return res;
-}
-
-function _isProxy(obj) {
-  if (!obj || !obj.constructor || !obj.constructor.annotations) return false;
-  return obj.constructor.annotations.filter((a) => a instanceof proxy).length > 0;
-}
-
-function formatErrors(errors, indent = '  ') {
-  return errors.map((e) => {
-                 if (typeof e === 'string') return indent + '- ' + e;
-                 return formatErrors(e, indent + '  ');
-               })
-      .join('\n');
-}
-
-
-// assert a type of given value and throw if does not pass
-var type: any =
-    function(actual, T) {
-  var errors = [];
-  // currentStack = [];
-
-  if (!isType(actual, T, errors)) {
-    // console.log(JSON.stringify(errors, null, '  '));
-    // TODO(vojta): print "an instance of" only if T starts with uppercase.
-    var msg = 'Expected an instance of ' + prettyPrint(T) + ', got ' + prettyPrint(actual) + '!';
-    if (errors.length) {
-      msg += '\n' + formatErrors(errors);
-    }
-
-    throw new Error(msg);
-  }
-  return actual;
-}
-
-function returnType(actual, T) {
-  var errors = [];
-  // currentStack = [];
-
-  if (!isType(actual, T, errors)) {
-    // console.log(JSON.stringify(errors, null, '  '));
-    // TODO(vojta): print "an instance of" only if T starts with uppercase.
-    var msg = 'Expected to return an instance of ' + prettyPrint(T) + ', got ' +
-              prettyPrint(actual) + '!';
-    if (errors.length) {
-      msg += '\n' + formatErrors(errors);
-    }
-
-    throw new Error(msg);
-  }
-
-  return actual;
-}
-
-// TODO(vojta): define these with DSL?
-var string = type.string = define('string', function(value) { return typeof value === 'string'; });
-
-var boolean = type.boolean =
-    define('boolean', function(value) { return typeof value === 'boolean'; });
-
-var number = type.number = define('number', function(value) { return typeof value === 'number'; });
-
-function arrayOf(...types) {
-  return assert.define('array of ' + types.map(prettyPrint).join('/'), function(value) {
-    if (assert(value).is(Array)) {
-      for (var i = 0; i < value.length; i++) {
-        assert(value[i]).is(...types);
-      }
-    }
-  });
-}
-
-function structure(definition) {
-  var properties = Object.keys(definition);
-  return assert.define('object with properties ' + properties.join(', '), function(value) {
-    if (assert(value).is(Object)) {
-      for (var i = 0; i < properties.length; i++) {
-        var property = properties[i];
-        assert(value[property]).is(definition[property]);
-      }
-    }
-  })
-}
-
-
-
-// I'm sorry, bad global state... to make the API nice ;-)
-var currentStack = [];
-
-function fail(message) {
-  currentStack.push(message);
-}
-
-function define(classOrName, check) {
-  var cls = classOrName;
-
-  if (typeof classOrName === 'string') {
-    cls = function() {};
-    cls.__assertName = classOrName;
-  }
-
-  cls.assert = function(value) {
-    // var parentStack = currentStack;
-
-    // currentStack = [];
-
-    return check(value);
-
-    // if (currentStack.length) {
-    //   parentStack.push(currentStack)
-    // }
-    // currentStack = parentStack;
-  };
-
-  return cls;
-}
-
-
-var assert: any = function(value) {
-  return {
-    is: function is(...types) {
-      // var errors = []
-      var allErrors = [];
-      var errors;
-      for (var i = 0; i < types.length; i++) {
-        var type = types[i];
-        errors = [];
-
-        if (isType(value, type, errors)) {
-          return true;
-        }
-
-        // if no errors, merge multiple "is not instance of " into x/y/z ?
-        allErrors.push(prettyPrint(value) + ' is not instance of ' + prettyPrint(type));
-        if (errors.length) {
-          allErrors.push(errors);
-        }
-      }
-
-      // if (types.length > 1) {
-      //   currentStack.push(['has to be ' + types.map(prettyPrint).join(' or '),
-      //   ...allErrors]);
-      // } else {
-      currentStack.push(...allErrors);
-      // }
-      return false;
-    }
-  };
-};
-
-
-// PUBLIC API
-
-// asserting API
-
-// throw if no type provided
-assert.type = type;
-for (var prop in primitives) {
-  assert.type[prop] = primitives[prop];
-}
-assert.genericType = genericType;
-
-// throw if odd number of args
-assert.argumentTypes = assertArgumentTypes;
-assert.returnType = returnType;
-
-
-// define AP;
-assert.define = define;
-assert.fail = fail;
-
-// primitive value type;
-assert.string = string;
-assert.number = number;
-assert.boolean = boolean;
-
-// custom types
-assert.arrayOf = arrayOf;
-assert.structure = structure;
-
-
-export {assert}
diff --git a/modules/rtts_assert/test/rtts_assert_spec.ts b/modules/rtts_assert/test/rtts_assert_spec.ts
deleted file mode 100644
index 93a76a3e4f86..000000000000
--- a/modules/rtts_assert/test/rtts_assert_spec.ts
+++ /dev/null
@@ -1,368 +0,0 @@
-// # Assert.js
-// A run-time type assertion library for JavaScript. Designed to be used with
-// [Traceur](https://github.com/google/traceur-compiler).
-import {} from '../../angular2/src/test_lib/e2e_util';
-import {assert} from '../rtts_assert';
-
-// - [Basic Type Check](#basic-type-check)
-// - [Custom Check](#custom-check)
-// - [Primitive Values](#primitive-values)
-// - [Describing more complex types](#describing-more-complex-types)
-//   - [assert.arrayOf](#assert-arrayof)
-//   - [assert.structure](#assert-structure)
-// - [Integrating with Traceur](#integrating-with-traceur)
-
-// Note: `assert` gets automatically included by traceur!
-
-export function main() {
-  return;
-
-  describe('prettyPrint', () => {
-    function Type() {}
-
-    it('should limit the number of printed properties', () => {
-      var o = {};
-      for (var i = 0; i < 100; i++) {
-        o['p_' + i] = i;
-      }
-      try {
-        assert.type(o, Type);
-        throw 'fail!';
-      } catch (e) {
-        expect(e.message.indexOf('p_0')).toBeGreaterThan(-1);
-        expect(e.message.indexOf('...')).toBeGreaterThan(-1);
-        expect(e.message.indexOf('p_20')).toEqual(-1);
-      }
-    });
-
-    it('should limit the depth of printed properties', () => {
-      var o = {l1: {l2: {l3: {l4: {l5: {l6: 'deep'}}}}}};
-
-      expect(() => { assert.type(o, Type); })
-          .toThrowError('Expected an instance of Type, got {l1: {l2: {l3: {l4: [...]}}}}!');
-    });
-  });
-
-  // ## Basic Type Check
-  // By default, `instanceof` is used to check the type.
-  //
-  // Note that you can use `assert.type()` in unit tests or anywhere in your code.
-  // Most of the time, you will use it with Traceur.
-  // Jump to the [Traceur section](#integrating-with-traceur) to see an example of that.
-  describe('basic type check', function() {
-
-    function Type() {}
-
-    it('should pass', function() { assert.type(new Type(), Type); });
-
-
-    it('should fail', function() {
-      expect(() => assert.type(123, Type)).toThrowError('Expected an instance of Type, got 123!');
-    });
-
-
-    it('should allow null', function() { assert.type(null, Type); });
-  });
-
-
-
-  // ## Custom Check
-  // Often, `instanceof` is not flexible enough.
-  // In that case, your type can define its own `assert` method which will be used instead.
-  //
-  // See [Describing More Complex Types](#describing-more-complex-types) for examples how to
-  // define custom checks using `assert.define()`.
-  describe('custom check', function() {
-
-    function Type() {}
-
-    // the basic check can just return true/false, without specifying any reason
-    it('should pass when returns true', function() {
-      (<any>Type).assert = function(value) { return true; };
-
-      assert.type({}, Type);
-    });
-
-
-    it('should fail when returns false', function() {
-      (<any>Type).assert = function(value) { return false; };
-
-      expect(() => assert.type({}, Type)).toThrowError('Expected an instance of Type, got {}!');
-    });
-
-
-    // Using `assert.fail()` allows to report even multiple errors.
-    it('should fail when calls assert.fail()', function() {
-      (<any>Type).assert = function(value) {
-        assert.fail('not smart enough');
-        assert.fail('not blue enough');
-      };
-
-      expect(() => assert.type({}, Type))
-          .toThrowError('Expected an instance of Type, got {}!\n' +
-                        '  - not smart enough\n' +
-                        '  - not blue enough');
-    });
-
-
-    it('should fail when throws an exception', function() {
-      (<any>Type).assert = function(value) { throw new Error('not long enough'); };
-
-      expect(function() { assert.type(12345, Type); })
-          .toThrowError('Expected an instance of Type, got 12345!\n' +
-                        '  - not long enough');
-    });
-  });
-
-
-
-  // ## Primitive Values
-  // You don't want to check primitive values (such as strings, numbers, or booleans) using `typeof`
-  // rather than
-  // `instanceof`.
-  //
-  // Again, you probably won't write this code and rather use Traceur to do it for you, simply based
-  // on type annotations.
-  describe('primitive value check', function() {
-    var primitive = global['$traceurRuntime'].type;
-
-    describe('string', function() {
-
-      it('should pass', function() { assert.type('xxx', primitive.string); });
-
-
-      it('should fail', function() {
-        expect(() => assert.type(12345, primitive.string))
-            .toThrowError('Expected an instance of string, got 12345!');
-      });
-
-      it('should allow null', function() { assert.type(null, primitive.string); });
-    });
-
-
-    describe('number', function() {
-
-      it('should pass', function() { assert.type(123, primitive.number); });
-
-
-      it('should fail', function() {
-        expect(() => assert.type(false, primitive.number))
-            .toThrowError('Expected an instance of number, got false!');
-      });
-
-      it('should allow null', function() { assert.type(null, primitive.number); });
-    });
-
-
-    describe('boolean', function() {
-
-      it('should pass', function() {
-        expect(assert.type(true, primitive.boolean)).toEqual(true);
-        expect(assert.type(false, primitive.boolean)).toEqual(false);
-      });
-
-
-      it('should fail', function() {
-        expect(() => assert.type(123, primitive.boolean))
-            .toThrowError('Expected an instance of boolean, got 123!');
-      });
-
-      it('should allow null', function() { assert.type(null, primitive.boolean); });
-    });
-  });
-
-
-  // ## Describing more complex types
-  //
-  // Often, a simple type check using `instanceof` or `typeof` is not enough.
-  // That's why you can define custom checks using this DSL.
-  // The goal was to make them easy to compose and as descriptive as possible.
-  // Of course you can write your own DSL on the top of this.
-  describe('define', function() {
-
-    // If the first argument to `assert.define()` is a type (function), it will define `assert`
-    // method on that function.
-    //
-    // In this example, being a type of Type means being a either a function or object.
-    it('should define assert for an existing type', function() {
-      function Type() {}
-
-      assert.define(Type, function(value) { assert(value).is(Function, Object); });
-
-      assert.type({}, Type);
-      assert.type(function() {}, Type);
-      expect(() => assert.type('str', Type))
-          .toThrowError('Expected an instance of Type, got "str"!\n' +
-                        '  - "str" is not instance of Function\n' +
-                        '  - "str" is not instance of Object');
-    });
-
-
-    // If the first argument to `assert.define()` is a string,
-    // it will create an interface - basically an empty class with `assert` method.
-    it('should define an interface', function() {
-      var User = assert.define('MyUser', function(user) { assert(user).is(Object); });
-
-      assert.type({}, User);
-      expect(() => assert.type(12345, User))
-          .toThrowError('Expected an instance of MyUser, got 12345!\n' +
-                        '  - 12345 is not instance of Object');
-    });
-
-
-    // Here are a couple of more APIs to describe your custom types...
-    //
-    // ### assert.arrayOf
-    // Checks if the value is an array and if so, it checks whether all the items are one the given
-    // types.
-    // These types can be composed types, not just simple ones.
-    describe('arrayOf', function() {
-
-      var Titles = assert.define('ListOfTitles', function(value) {
-        assert(value).is(assert.arrayOf(assert.string, assert.number));
-      });
-
-      it('should pass', function() { assert.type(['one', 55, 'two'], Titles); });
-
-
-      it('should fail when non-array given', function() {
-        expect(() => assert.type('foo', Titles))
-            .toThrowError('Expected an instance of ListOfTitles, got "foo"!\n' +
-                          '  - "foo" is not instance of array of string/number\n' +
-                          '    - "foo" is not instance of Array');
-      });
-
-
-      it('should fail when an invalid item in the array', function() {
-        expect(() => assert.type(['aaa', true], Titles))
-            .toThrowError('Expected an instance of ListOfTitles, got ["aaa", true]!\n' +
-                          '  - ["aaa", true] is not instance of array of string/number\n' +
-                          '    - true is not instance of string\n' +
-                          '    - true is not instance of number');
-      });
-    });
-
-
-    // ### assert.structure
-    // Similar to `assert.arrayOf` which checks a content of an array,
-    // `assert.structure` checks if the value is an object with specific properties.
-    describe('structure', function() {
-
-      var User = assert.define('MyUser', function(value) {
-        assert(value).is(assert.structure({name: assert.string, age: assert.number}));
-      });
-
-      it('should pass', function() { assert.type({name: 'Vojta', age: 28}, User); });
-
-
-      it('should fail when non-object given', function() {
-        expect(() => assert.type(123, User))
-            .toThrowError('Expected an instance of MyUser, got 123!\n' +
-                          '  - 123 is not instance of object with properties name, age\n' +
-                          '    - 123 is not instance of Object');
-      });
-
-
-      it('should fail when an invalid property', function() {
-        expect(() => assert.type({name: 'Vojta', age: true}, User))
-            .toThrowError(
-                'Expected an instance of MyUser, got {name: "Vojta", age: true}!\n' +
-                '  - {name: "Vojta", age: true} is not instance of object with properties name, age\n' +
-                '    - true is not instance of number');
-      });
-    });
-  });
-
-
-
-  // ## Integrating with Traceur
-  //
-  // Manually calling `assert.type()` in your code is cumbersome. Most of the time, you'll want to
-  // have Traceur add the calls to `assert.type()` to your code based on type annotations.
-  //
-  // This has several advantages:
-  // - it's shorter and nicer,
-  // - you can easily ignore it when generating production code.
-  //
-  // You'll need to run Traceur with `--types=true --type-assertions=true
-  // --type-assertion-module="path/to/assert"`.
-  describe('Traceur', function() {
-
-    describe('arguments', function() {
-
-      function reverse(str: string) { return str ? reverse(str.substring(1)) + str[0] : '' }
-
-      it('should pass', function() { expect(reverse('angular')).toEqual('ralugna'); });
-
-
-      it('should fail', function() {
-        expect(() => reverse(<any>123))
-            .toThrowError('Invalid arguments given!\n' +
-                          '  - 1st argument has to be an instance of string, got 123');
-      });
-    });
-
-
-    describe('return value', function() {
-
-      function foo(bar): number { return bar; }
-
-      it('should pass', function() { expect(foo(123)).toEqual(123); });
-
-
-      it('should fail', function() {
-        expect(() => foo('bar'))
-            .toThrowError('Expected to return an instance of number, got "bar"!');
-      });
-    });
-
-
-    describe('variables', function() {
-
-      it('should pass', function() { var count: number = 1; });
-
-
-      it('should fail', function() {
-        expect(() => { var count: number = <any>true; })
-            .toThrowError('Expected an instance of number, got true!');
-      });
-    });
-
-
-    describe('void', function() {
-      function foo(bar?): void { return bar; }
-
-      it('should pass when not defined', function() {
-        function nonReturn(): void {}
-        function returnNothing(): void { return; }
-        function returnUndefined(): void { return undefined; }
-
-        foo();
-        foo(undefined);
-        nonReturn();
-        returnNothing();
-        returnUndefined();
-      });
-
-
-      it('should fail when a value returned', function() {
-        expect(() => foo('bar')).toThrowError('Expected to return an instance of void, got "bar"!');
-      });
-
-
-      it('should fail when null returned', function() {
-        expect(() => foo(null)).toThrowError('Expected to return an instance of void, got null!');
-      });
-    });
-
-
-    describe('generics', function() {
-
-      it('should pass', function() { var list: Array<string> = []; });
-
-      // TODO(tbosch): add assertions based on generics to rtts_assert
-
-    });
-
-  });
-}
diff --git a/modules/system.d.ts b/modules/system.d.ts
new file mode 100644
index 000000000000..f94cec235ebf
--- /dev/null
+++ b/modules/system.d.ts
@@ -0,0 +1,4 @@
+/**
+ * Dummy typings for systemjs.
+ */
+declare var System: any;
diff --git a/modules/tsconfig.json b/modules/tsconfig.json
new file mode 100644
index 000000000000..5dedb93d0ef5
--- /dev/null
+++ b/modules/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/all/",
+    "noImplicitAny": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "selenium-webdriver": ["../node_modules/@types/selenium-webdriver/index.d.ts"],
+      "rxjs/*": ["../node_modules/rxjs/*"],
+      "@angular/*": ["../dist/all/@angular/*"]
+    },
+    "rootDir": ".",
+    "inlineSourceMap": true,
+    "lib": ["es5", "dom", "es2015.promise", "es2015.collection", "es2015.iterable"],
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "target": "es5",
+    "types": ["angular"]
+  },
+  "exclude": [
+    "angular1_router",
+    "benchmarks/e2e_test/old",
+    "benchmarks/src/old",
+    "benchmarks/src/**/index_aot.ts",
+    "benchmarks_external",
+    "payload_tests"
+  ],
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true
+  }
+}
diff --git a/modules/types.d.ts b/modules/types.d.ts
new file mode 100644
index 000000000000..657b0469a26c
--- /dev/null
+++ b/modules/types.d.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 contains all ambient imports needed to compile the modules/ source code
+
+/// <reference types="hammerjs" />
+/// <reference types="jasmine" />
+/// <reference types="jasminewd2" />
+/// <reference types="node" />
+/// <reference types="zone.js" />
+/// <reference path="../tools/types-ext/jasminewd2.d.ts" />
+/// <reference path="./es6-subset.d.ts" />
+/// <reference path="./system.d.ts" />
diff --git a/modules_dart/README.md b/modules_dart/README.md
deleted file mode 100644
index 189330257b44..000000000000
--- a/modules_dart/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-This directory contains pure Dart packages that use standard pub layout.
-
-# Working with an existing package
-
-1. Run `gulp build.dart`
-1. Open the package in any Dart IDE of your choice
-1. Tada!
-
-You do not need to rerun step 1 if you are only making changes in
-`modules_dart`. However, you do need to run it again after you make a change
-in `modules`. This is because these packages depend on code inside the `dist`
-directory via `dependency_overrides`. Code in `modules` need to be transpiled
-into `dist` before the IDE can "feel" your changes in `modules`.
-
-# Creating a new package
-
-1. Create a new directory with its own `pubspec.yaml` and standard pub layout.
-1. Add both a normal dependency on `angular2` _and_ a `dependency_overrides`,
-   like this:
-
-```yaml
-version: 0.0.0
-dependencies:
-  angular2: '0.0.0'
-dependency_overrides:
-  angular2:
-    path: ../../dist/dart/angular2
-```
-
-The publishing script will automatically rewrite version numbers, so use
-`0.0.0` both for your package and `angular2` version. Similarly, do not
-include `authors` and `homepage`, as they will be auto-populated. However,
-do provide `description`, `name` (prefixed with `angular2_`), `dependencies`,
-and `dev_dependencies`.
diff --git a/modules_dart/analysis_server/lib/plugin.dart b/modules_dart/analysis_server/lib/plugin.dart
deleted file mode 100644
index f19c81d6b8ca..000000000000
--- a/modules_dart/analysis_server/lib/plugin.dart
+++ /dev/null
@@ -1,23 +0,0 @@
-library angular2.src.analysis.server_plugin;
-
-import 'package:analyzer/plugin/plugin.dart';
-
-/// Contribute a plugin for services such as completions, indexing and refactoring
-/// of Angular 2 dart code.
-class AngularServerPlugin implements Plugin {
-
-  /// the unique indetifier for this plugin
-  static const String UNIQUE_IDENTIFIER = 'angular2.analysis.services';
-
-  @override
-  String get uniqueIdentifier => UNIQUE_IDENTIFIER;
-
-  @override
-  void registerExtensionPoints(RegisterExtensionPoint registerExtensionPoint) {}
-
-  @override
-  void registerExtensions(RegisterExtension registerExtension) {
-    // TODO: register extension for code completions, indexing etc
-
-  }
-}
diff --git a/modules_dart/analysis_server/pubspec.yaml b/modules_dart/analysis_server/pubspec.yaml
deleted file mode 100644
index 185dfeaecb44..000000000000
--- a/modules_dart/analysis_server/pubspec.yaml
+++ /dev/null
@@ -1,7 +0,0 @@
-name: angular2_analysis_server
-version: 0.0.0
-description: Dart analyzer server plugin for Angular 2
-environment:
-  sdk: '>=1.9.0-dev.8.0'
-dependencies:
-  analyzer: '^0.24.4'
diff --git a/modules_dart/analyzer_plugin/lib/plugin.dart b/modules_dart/analyzer_plugin/lib/plugin.dart
deleted file mode 100644
index 29f311819992..000000000000
--- a/modules_dart/analyzer_plugin/lib/plugin.dart
+++ /dev/null
@@ -1,25 +0,0 @@
-library angular2.src.analysis.analyzer_plugin;
-
-import 'package:analyzer/plugin/plugin.dart';
-import 'package:analyzer/plugin/task.dart';
-import 'src/tasks.dart';
-
-/// Contribute a plugin to the dart analyzer for analysis of
-/// Angular 2 dart code.
-class AngularAnalyzerPlugin implements Plugin {
-
-  /// The unique identifier for this plugin.
-  static const String UNIQUE_IDENTIFIER = 'angular2.analysis';
-
-  @override
-  String get uniqueIdentifier => UNIQUE_IDENTIFIER;
-
-  @override
-  void registerExtensionPoints(RegisterExtensionPoint registerExtensionPoint) {}
-
-  @override
-  void registerExtensions(RegisterExtension registerExtension) {
-    String taskId = TASK_EXTENSION_POINT_ID;
-    registerExtension(taskId, BuildUnitDirectivesTask.DESCRIPTOR);
-  }
-}
diff --git a/modules_dart/analyzer_plugin/lib/src/tasks.dart b/modules_dart/analyzer_plugin/lib/src/tasks.dart
deleted file mode 100644
index 63a29be63112..000000000000
--- a/modules_dart/analyzer_plugin/lib/src/tasks.dart
+++ /dev/null
@@ -1,52 +0,0 @@
-library angular2.src.analysis.analyzer_plugin.src.tasks;
-
-import 'package:analyzer/src/generated/ast.dart' hide Directive;
-import 'package:analyzer/src/generated/engine.dart';
-import 'package:analyzer/src/task/general.dart';
-import 'package:analyzer/task/dart.dart';
-import 'package:analyzer/task/model.dart';
-import 'package:angular2/src/render/api.dart';
-import 'package:angular2/src/transform/common/directive_metadata_reader.dart';
-
-/// The [DirectiveMetadata]s of a [LibrarySpecificUnit].
-final ListResultDescriptor<DirectiveMetadata> DIRECTIVES =
-    new ListResultDescriptor<DirectiveMetadata>('ANGULAR2_DIRECTIVES', null);
-
-/// A task that builds [DirectiveMetadata]s for directive classes.
-class BuildUnitDirectivesTask extends SourceBasedAnalysisTask {
-  static const String UNIT_INPUT = 'UNIT_INPUT';
-
-  static final TaskDescriptor DESCRIPTOR = new TaskDescriptor(
-      'BuildUnitDirectivesTask', createTask, buildInputs,
-      <ResultDescriptor>[DIRECTIVES]);
-
-  BuildUnitDirectivesTask(AnalysisContext context, AnalysisTarget target)
-      : super(context, target);
-
-  @override
-  TaskDescriptor get descriptor => DESCRIPTOR;
-
-  @override
-  void internalPerform() {
-    CompilationUnit unit = getRequiredInput(UNIT_INPUT);
-    List<DirectiveMetadata> metaList = <DirectiveMetadata>[];
-    for (CompilationUnitMember unitMember in unit.declarations) {
-      if (unitMember is ClassDeclaration) {
-        DirectiveMetadata meta = readDirectiveMetadata(unitMember.metadata);
-        if (meta != null) {
-          metaList.add(meta);
-        }
-      }
-    }
-    outputs[DIRECTIVES] = metaList;
-  }
-
-  static Map<String, TaskInput> buildInputs(LibrarySpecificUnit target) {
-    return <String, TaskInput>{UNIT_INPUT: RESOLVED_UNIT.of(target)};
-  }
-
-  static BuildUnitDirectivesTask createTask(
-      AnalysisContext context, LibrarySpecificUnit target) {
-    return new BuildUnitDirectivesTask(context, target);
-  }
-}
diff --git a/modules_dart/analyzer_plugin/lib/tasks.dart b/modules_dart/analyzer_plugin/lib/tasks.dart
deleted file mode 100644
index a8447cb287db..000000000000
--- a/modules_dart/analyzer_plugin/lib/tasks.dart
+++ /dev/null
@@ -1,9 +0,0 @@
-library angular2.src.analysis.analyzer_plugin.tasks;
-
-import 'package:analyzer/src/generated/error.dart';
-import 'package:analyzer/task/model.dart';
-
-/// The analysis errors associated with a target.
-/// The value combines errors represented by multiple other results.
-final CompositeResultDescriptor<List<AnalysisError>> HTML_ERRORS =
-    new CompositeResultDescriptor<List<AnalysisError>>('ANGULAR_HTML_ERRORS');
diff --git a/modules_dart/analyzer_plugin/pubspec.yaml b/modules_dart/analyzer_plugin/pubspec.yaml
deleted file mode 100644
index 56aa7ffe8ef3..000000000000
--- a/modules_dart/analyzer_plugin/pubspec.yaml
+++ /dev/null
@@ -1,15 +0,0 @@
-name: angular2_analyzer_plugin
-version: 0.0.0
-description: Dart analyzer plugin for Angular 2
-environment:
-  sdk: '>=1.9.0-dev.8.0'
-dependencies:
-  angular2: '0.0.0'
-  analyzer: '^0.24.4'
-dev_dependencies:
-  unittest: any
-  typed_mock: any
-  test_reflective_loader: any
-dependency_overrides:
-  angular2:
-    path: ../../dist/dart/angular2
diff --git a/modules_dart/analyzer_plugin/test/mock_sdk.dart b/modules_dart/analyzer_plugin/test/mock_sdk.dart
deleted file mode 100644
index b8c95c993b2f..000000000000
--- a/modules_dart/analyzer_plugin/test/mock_sdk.dart
+++ /dev/null
@@ -1,311 +0,0 @@
-library test.src.mock_sdk;
-
-import 'package:analyzer/file_system/file_system.dart' as resource;
-import 'package:analyzer/file_system/memory_file_system.dart' as resource;
-import 'package:analyzer/src/generated/engine.dart';
-import 'package:analyzer/src/generated/sdk.dart';
-import 'package:analyzer/src/generated/source.dart';
-
-class MockSdk implements DartSdk {
-  static const _MockSdkLibrary LIB_CORE = const _MockSdkLibrary('dart:core',
-      '/lib/core/core.dart', '''
-library dart.core;
-
-import 'dart:async';
-
-class Object {
-  bool operator ==(other) => identical(this, other);
-  String toString() => 'a string';
-  int get hashCode => 0;
-}
-
-class Function {}
-class StackTrace {}
-class Symbol {}
-class Type {}
-
-abstract class Comparable<T> {
-  int compareTo(T other);
-}
-
-abstract class String implements Comparable<String> {
-  external factory String.fromCharCodes(Iterable<int> charCodes,
-                                        [int start = 0, int end]);
-  bool get isEmpty => false;
-  bool get isNotEmpty => false;
-  int get length => 0;
-  String toUpperCase();
-  List<int> get codeUnits;
-}
-
-class bool extends Object {}
-abstract class num implements Comparable<num> {
-  bool operator <(num other);
-  bool operator <=(num other);
-  bool operator >(num other);
-  bool operator >=(num other);
-  num operator +(num other);
-  num operator -(num other);
-  num operator *(num other);
-  num operator /(num other);
-  int toInt();
-  num abs();
-  int round();
-}
-abstract class int extends num {
-  bool get isEven => false;
-  int operator -();
-  external static int parse(String source,
-                            { int radix,
-                              int onError(String source) });
-}
-class double extends num {}
-class DateTime extends Object {}
-class Null extends Object {}
-
-class Deprecated extends Object {
-  final String expires;
-  const Deprecated(this.expires);
-}
-const Object deprecated = const Deprecated("next release");
-
-class Iterator<E> {
-  bool moveNext();
-  E get current;
-}
-
-abstract class Iterable<E> {
-  Iterator<E> get iterator;
-  bool get isEmpty;
-}
-
-abstract class List<E> implements Iterable<E> {
-  void add(E value);
-  E operator [](int index);
-  void operator []=(int index, E value);
-  Iterator<E> get iterator => null;
-  void clear();
-}
-
-abstract class Map<K, V> extends Object {
-  Iterable<K> get keys;
-}
-
-external bool identical(Object a, Object b);
-
-void print(Object object) {}
-
-class _Override {
-  const _Override();
-}
-const Object override = const _Override();
-''');
-
-  static const _MockSdkLibrary LIB_ASYNC = const _MockSdkLibrary('dart:async',
-      '/lib/async/async.dart', '''
-library dart.async;
-
-import 'dart:math';
-
-class Future<T> {
-  factory Future.delayed(Duration duration, [T computation()]) => null;
-  factory Future.value([value]) => null;
-  static Future wait(List<Future> futures) => null;
-}
-
-class Stream<T> {}
-abstract class StreamTransformer<S, T> {}
-''');
-
-  static const _MockSdkLibrary LIB_COLLECTION = const _MockSdkLibrary(
-      'dart:collection', '/lib/collection/collection.dart', '''
-library dart.collection;
-
-abstract class HashMap<K, V> implements Map<K, V> {}
-''');
-
-  static const _MockSdkLibrary LIB_CONVERT = const _MockSdkLibrary(
-      'dart:convert', '/lib/convert/convert.dart', '''
-library dart.convert;
-
-import 'dart:async';
-
-abstract class Converter<S, T> implements StreamTransformer {}
-class JsonDecoder extends Converter<String, Object> {}
-''');
-
-  static const _MockSdkLibrary LIB_MATH = const _MockSdkLibrary('dart:math',
-      '/lib/math/math.dart', '''
-library dart.math;
-const double E = 2.718281828459045;
-const double PI = 3.1415926535897932;
-const double LN10 =  2.302585092994046;
-num min(num a, num b) => 0;
-num max(num a, num b) => 0;
-external double cos(num x);
-external double sin(num x);
-external double sqrt(num x);
-class Random {
-  bool nextBool() => true;
-  double nextDouble() => 2.0;
-  int nextInt() => 1;
-}
-''');
-
-  static const _MockSdkLibrary LIB_HTML = const _MockSdkLibrary('dart:html',
-      '/lib/html/dartium/html_dartium.dart', '''
-library dart.html;
-class HtmlElement {}
-''');
-
-  static const List<SdkLibrary> LIBRARIES = const [
-    LIB_CORE,
-    LIB_ASYNC,
-    LIB_COLLECTION,
-    LIB_CONVERT,
-    LIB_MATH,
-    LIB_HTML,
-  ];
-
-  final resource.MemoryResourceProvider provider =
-      new resource.MemoryResourceProvider();
-
-  /**
-   * The [AnalysisContext] which is used for all of the sources.
-   */
-  InternalAnalysisContext _analysisContext;
-
-  MockSdk() {
-    LIBRARIES.forEach((_MockSdkLibrary library) {
-      provider.newFile(library.path, library.content);
-    });
-  }
-
-  @override
-  AnalysisContext get context {
-    if (_analysisContext == null) {
-      _analysisContext = new SdkAnalysisContext();
-      SourceFactory factory = new SourceFactory([new DartUriResolver(this)]);
-      _analysisContext.sourceFactory = factory;
-      ChangeSet changeSet = new ChangeSet();
-      for (String uri in uris) {
-        Source source = factory.forUri(uri);
-        changeSet.addedSource(source);
-      }
-      _analysisContext.applyChanges(changeSet);
-    }
-    return _analysisContext;
-  }
-
-  @override
-  List<SdkLibrary> get sdkLibraries => LIBRARIES;
-
-  @override
-  String get sdkVersion => throw unimplemented;
-
-  UnimplementedError get unimplemented => new UnimplementedError();
-
-  @override
-  List<String> get uris {
-    List<String> uris = <String>[];
-    for (SdkLibrary library in LIBRARIES) {
-      uris.add(library.shortName);
-    }
-    return uris;
-  }
-
-  @override
-  Source fromFileUri(Uri uri) {
-    String filePath = uri.path;
-    String libPath = '/lib';
-    if (!filePath.startsWith("$libPath/")) {
-      return null;
-    }
-    for (SdkLibrary library in LIBRARIES) {
-      String libraryPath = library.path;
-      if (filePath.replaceAll('\\', '/') == libraryPath) {
-        try {
-          resource.File file = provider.getResource(uri.path);
-          Uri dartUri = Uri.parse(library.shortName);
-          return file.createSource(dartUri);
-        } catch (exception) {
-          return null;
-        }
-      }
-      if (filePath.startsWith("$libraryPath/")) {
-        String pathInLibrary = filePath.substring(libraryPath.length + 1);
-        String path = '${library.shortName}/${pathInLibrary}';
-        try {
-          resource.File file = provider.getResource(uri.path);
-          Uri dartUri = new Uri(scheme: 'dart', path: path);
-          return file.createSource(dartUri);
-        } catch (exception) {
-          return null;
-        }
-      }
-    }
-    return null;
-  }
-
-  @override
-  SdkLibrary getSdkLibrary(String dartUri) {
-    // getSdkLibrary() is only used to determine whether a library is internal
-    // to the SDK.  The mock SDK doesn't have any internals, so it's safe to
-    // return null.
-    return null;
-  }
-
-  @override
-  Source mapDartUri(String dartUri) {
-    const Map<String, String> uriToPath = const {
-      "dart:core": "/lib/core/core.dart",
-      "dart:html": "/lib/html/dartium/html_dartium.dart",
-      "dart:async": "/lib/async/async.dart",
-      "dart:collection": "/lib/collection/collection.dart",
-      "dart:convert": "/lib/convert/convert.dart",
-      "dart:math": "/lib/math/math.dart"
-    };
-
-    String path = uriToPath[dartUri];
-    if (path != null) {
-      resource.File file = provider.getResource(path);
-      Uri uri = new Uri(scheme: 'dart', path: dartUri.substring(5));
-      return file.createSource(uri);
-    }
-
-    // If we reach here then we tried to use a dartUri that's not in the
-    // table above.
-    return null;
-  }
-}
-
-class _MockSdkLibrary implements SdkLibrary {
-  final String shortName;
-  final String path;
-  final String content;
-
-  const _MockSdkLibrary(this.shortName, this.path, this.content);
-
-  @override
-  String get category => throw unimplemented;
-
-  @override
-  bool get isDart2JsLibrary => throw unimplemented;
-
-  @override
-  bool get isDocumented => throw unimplemented;
-
-  @override
-  bool get isImplementation => throw unimplemented;
-
-  @override
-  bool get isInternal => throw unimplemented;
-
-  @override
-  bool get isShared => throw unimplemented;
-
-  @override
-  bool get isVmLibrary => throw unimplemented;
-
-  UnimplementedError get unimplemented => new UnimplementedError();
-}
diff --git a/modules_dart/analyzer_plugin/test/tasks_test.server.spec.dart b/modules_dart/analyzer_plugin/test/tasks_test.server.spec.dart
deleted file mode 100644
index dc896f67126a..000000000000
--- a/modules_dart/analyzer_plugin/test/tasks_test.server.spec.dart
+++ /dev/null
@@ -1,205 +0,0 @@
-library angular2.src.analysis.analyzer_plugin.src.tasks_test;
-
-import 'package:analyzer/file_system/file_system.dart';
-import 'package:analyzer/file_system/memory_file_system.dart';
-import 'package:analyzer/src/context/cache.dart';
-import 'package:analyzer/src/generated/engine.dart'
-    show AnalysisOptionsImpl, TimestampedData;
-import 'package:analyzer/src/generated/resolver.dart';
-import 'package:analyzer/src/generated/sdk.dart';
-import 'package:analyzer/src/generated/source.dart';
-import 'package:analyzer/src/task/dart.dart';
-import 'package:analyzer/src/task/driver.dart';
-import 'package:analyzer/src/task/general.dart';
-import 'package:analyzer/src/task/manager.dart';
-import 'package:analyzer/task/dart.dart';
-import 'package:analyzer/task/model.dart';
-import 'package:angular2/src/render/api.dart';
-import 'package:angular2_analyzer_plugin/src/tasks.dart';
-import 'package:test_reflective_loader/test_reflective_loader.dart';
-import 'package:typed_mock/typed_mock.dart';
-import 'package:unittest/unittest.dart';
-
-import 'mock_sdk.dart';
-
-main() {
-  groupSep = ' | ';
-  defineReflectiveTests(BuildUnitDirectivesTaskTest);
-}
-
-@reflectiveTest
-class BuildUnitDirectivesTaskTest extends _AbstractDartTaskTest {
-  MemoryResourceProvider resourceProvider = new MemoryResourceProvider();
-
-  void test_Component() {
-    _addAngularSources();
-    Source source = _newSource('/test.dart', r'''
-import '/angular2/annotations.dart';
-
-@Component(selector: 'comp-a')
-class ComponentA {
-}
-
-@Component(selector: 'comp-b')
-class ComponentB {
-}
-''');
-    LibrarySpecificUnit target = new LibrarySpecificUnit(source, source);
-    _computeResult(target, DIRECTIVES);
-    expect(task, new isInstanceOf<BuildUnitDirectivesTask>());
-    // validate
-    List<DirectiveMetadata> directives = outputs[DIRECTIVES];
-    expect(directives, hasLength(2));
-    expect(directives[0].selector, 'comp-a');
-    expect(directives[1].selector, 'comp-b');
-  }
-
-  void test_Directive() {
-    _addAngularSources();
-    Source source = _newSource('/test.dart', r'''
-import '/angular2/annotations.dart';
-
-@Directive(selector: 'deco-a')
-class ComponentA {
-}
-
-@Directive(selector: 'deco-b')
-class ComponentB {
-}
-''');
-    LibrarySpecificUnit target = new LibrarySpecificUnit(source, source);
-    _computeResult(target, DIRECTIVES);
-    expect(task, new isInstanceOf<BuildUnitDirectivesTask>());
-    // validate
-    List<DirectiveMetadata> directives = outputs[DIRECTIVES];
-    expect(directives, hasLength(2));
-    expect(directives[0].selector, 'deco-a');
-    expect(directives[1].selector, 'deco-b');
-  }
-
-  void _addAngularSources() {
-    _newSource('/angular2/annotations.dart', r'''
-library angular2.src.core.annotations.annotations;
-
-abstract class Directive {
-  final String selector;
-  final dynamic properties; 
-  final dynamic hostListeners;
-  final List lifecycle;
-  const Directive({selector, properties, hostListeners, lifecycle})
-  : selector = selector,
-    properties = properties,
-    hostListeners = hostListeners,
-    lifecycle = lifecycle,
-    super();
-}
-
-class Component extends Directive {
-  final String changeDetection;
-  final List injectables;
-  const Component({selector, properties, events, hostListeners,
-      injectables, lifecycle, changeDetection: 'DEFAULT'})
-      : changeDetection = changeDetection,
-        injectables = injectables,
-        super(
-            selector: selector,
-            properties: properties,
-            events: events,
-            hostListeners: hostListeners,
-            lifecycle: lifecycle);
-}
-
-''');
-  }
-}
-
-class _AbstractDartTaskTest {
-  MemoryResourceProvider resourceProvider = new MemoryResourceProvider();
-  Source emptySource;
-
-  DartSdk sdk = new MockSdk();
-  _MockContext context = new _MockContext();
-  Map<AnalysisTarget, CacheEntry> entryMap = <AnalysisTarget, CacheEntry>{};
-
-  TaskManager taskManager = new TaskManager();
-  AnalysisDriver analysisDriver;
-
-  AnalysisTask task;
-  Map<ResultDescriptor<dynamic>, dynamic> outputs;
-
-  CacheEntry getCacheEntry(AnalysisTarget target) {
-    return entryMap.putIfAbsent(target, () => new CacheEntry());
-  }
-
-  void setUp() {
-    emptySource = _newSource('/test.dart');
-    // prepare AnalysisContext
-    context.sourceFactory = new SourceFactory(<UriResolver>[
-      new DartUriResolver(sdk),
-      new ResourceUriResolver(resourceProvider)
-    ]);
-    // prepare TaskManager
-    taskManager.addTaskDescriptor(GetContentTask.DESCRIPTOR);
-    // TODO(scheglov) extract into API
-    taskManager.addTaskDescriptor(ScanDartTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(ParseDartTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildClassConstructorsTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildCompilationUnitElementTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildLibraryConstructorsTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildLibraryElementTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildPublicNamespaceTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildDirectiveElementsTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildSourceClosuresTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildExportNamespaceTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildEnumMemberElementsTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildFunctionTypeAliasesTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(BuildTypeProviderTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(GatherUsedImportedElementsTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(GatherUsedLocalElementsTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(GenerateHintsTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(ResolveUnitTypeNamesTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(ResolveLibraryTypeNamesTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(ResolveReferencesTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(ResolveVariableReferencesTask.DESCRIPTOR);
-    taskManager.addTaskDescriptor(VerifyUnitTask.DESCRIPTOR);
-    // Angular specific tasks
-    taskManager.addTaskDescriptor(BuildUnitDirectivesTask.DESCRIPTOR);
-    // prepare AnalysisDriver
-    analysisDriver = new AnalysisDriver(taskManager, context);
-  }
-
-  void _computeResult(AnalysisTarget target, ResultDescriptor result) {
-    task = analysisDriver.computeResult(target, result);
-    expect(task.caughtException, isNull);
-    outputs = task.outputs;
-  }
-
-  Source _newSource(String path, [String content = '']) {
-    File file = resourceProvider.newFile(path, content);
-    return file.createSource();
-  }
-}
-
-class _MockContext extends TypedMock implements ExtendedAnalysisContext {
-  AnalysisOptionsImpl analysisOptions = new AnalysisOptionsImpl();
-  SourceFactory sourceFactory;
-  TypeProvider typeProvider;
-
-  Map<AnalysisTarget, CacheEntry> entryMap = <AnalysisTarget, CacheEntry>{};
-
-  String get name => '_MockContext';
-
-  bool exists(Source source) => source.exists();
-
-  @override
-  CacheEntry getCacheEntry(AnalysisTarget target) {
-    return entryMap.putIfAbsent(target, () => new CacheEntry());
-  }
-
-  TimestampedData<String> getContents(Source source) => source.contents;
-
-  noSuchMethod(Invocation invocation) {
-    print('noSuchMethod: ${invocation.memberName}');
-    return super.noSuchMethod(invocation);
-  }
-}
diff --git a/npm-shrinkwrap.clean.json b/npm-shrinkwrap.clean.json
deleted file mode 100644
index d782c75af52b..000000000000
--- a/npm-shrinkwrap.clean.json
+++ /dev/null
@@ -1,12350 +0,0 @@
-{
-  "dependencies": {
-    "angular": {
-      "version": "1.3.5"
-    },
-    "bower": {
-      "version": "1.4.1",
-      "dependencies": {
-        "abbrev": {
-          "version": "1.0.5"
-        },
-        "archy": {
-          "version": "1.0.0"
-        },
-        "bower-config": {
-          "version": "0.6.1",
-          "dependencies": {
-            "graceful-fs": {
-              "version": "2.0.3"
-            },
-            "mout": {
-              "version": "0.9.1"
-            },
-            "optimist": {
-              "version": "0.6.1",
-              "dependencies": {
-                "wordwrap": {
-                  "version": "0.0.3"
-                },
-                "minimist": {
-                  "version": "0.0.10"
-                }
-              }
-            },
-            "osenv": {
-              "version": "0.0.3"
-            }
-          }
-        },
-        "bower-endpoint-parser": {
-          "version": "0.2.2"
-        },
-        "bower-json": {
-          "version": "0.4.0",
-          "dependencies": {
-            "deep-extend": {
-              "version": "0.2.11"
-            },
-            "graceful-fs": {
-              "version": "2.0.3"
-            },
-            "intersect": {
-              "version": "0.0.3"
-            }
-          }
-        },
-        "bower-logger": {
-          "version": "0.2.2"
-        },
-        "bower-registry-client": {
-          "version": "0.3.0",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10"
-            },
-            "graceful-fs": {
-              "version": "2.0.3"
-            },
-            "lru-cache": {
-              "version": "2.3.1"
-            },
-            "request": {
-              "version": "2.51.0",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "caseless": {
-                  "version": "0.8.0"
-                },
-                "forever-agent": {
-                  "version": "0.5.2"
-                },
-                "form-data": {
-                  "version": "0.2.0",
-                  "dependencies": {
-                    "async": {
-                      "version": "0.9.0"
-                    },
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "json-stringify-safe": {
-                  "version": "5.0.0"
-                },
-                "mime-types": {
-                  "version": "1.0.2"
-                },
-                "qs": {
-                  "version": "2.3.3"
-                },
-                "tunnel-agent": {
-                  "version": "0.4.0"
-                },
-                "tough-cookie": {
-                  "version": "1.1.0"
-                },
-                "http-signature": {
-                  "version": "0.10.1",
-                  "dependencies": {
-                    "assert-plus": {
-                      "version": "0.1.5"
-                    },
-                    "asn1": {
-                      "version": "0.1.11"
-                    },
-                    "ctype": {
-                      "version": "0.5.3"
-                    }
-                  }
-                },
-                "oauth-sign": {
-                  "version": "0.5.0"
-                },
-                "hawk": {
-                  "version": "1.1.1",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "0.9.1"
-                    },
-                    "boom": {
-                      "version": "0.4.2"
-                    },
-                    "cryptiles": {
-                      "version": "0.2.2"
-                    },
-                    "sntp": {
-                      "version": "0.2.4"
-                    }
-                  }
-                },
-                "aws-sign2": {
-                  "version": "0.5.0"
-                },
-                "stringstream": {
-                  "version": "0.0.4"
-                },
-                "combined-stream": {
-                  "version": "0.0.7",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "0.0.5"
-                    }
-                  }
-                }
-              }
-            },
-            "request-replay": {
-              "version": "0.2.0"
-            },
-            "rimraf": {
-              "version": "2.2.8"
-            },
-            "mkdirp": {
-              "version": "0.3.5"
-            }
-          }
-        },
-        "cardinal": {
-          "version": "0.4.4",
-          "dependencies": {
-            "redeyed": {
-              "version": "0.4.4",
-              "dependencies": {
-                "esprima": {
-                  "version": "1.0.4"
-                }
-              }
-            },
-            "ansicolors": {
-              "version": "0.2.1"
-            }
-          }
-        },
-        "chalk": {
-          "version": "1.0.0",
-          "dependencies": {
-            "ansi-styles": {
-              "version": "2.0.1"
-            },
-            "escape-string-regexp": {
-              "version": "1.0.3"
-            },
-            "has-ansi": {
-              "version": "1.0.3",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "1.1.1"
-                },
-                "get-stdin": {
-                  "version": "4.0.1"
-                }
-              }
-            },
-            "supports-color": {
-              "version": "1.3.1"
-            }
-          }
-        },
-        "chmodr": {
-          "version": "0.1.0"
-        },
-        "configstore": {
-          "version": "0.3.2",
-          "dependencies": {
-            "object-assign": {
-              "version": "2.0.0"
-            },
-            "osenv": {
-              "version": "0.1.0"
-            },
-            "uuid": {
-              "version": "2.0.1"
-            },
-            "xdg-basedir": {
-              "version": "1.0.1"
-            }
-          }
-        },
-        "decompress-zip": {
-          "version": "0.1.0",
-          "dependencies": {
-            "binary": {
-              "version": "0.3.0",
-              "dependencies": {
-                "chainsaw": {
-                  "version": "0.1.0",
-                  "dependencies": {
-                    "traverse": {
-                      "version": "0.3.9"
-                    }
-                  }
-                },
-                "buffers": {
-                  "version": "0.1.1"
-                }
-              }
-            },
-            "mkpath": {
-              "version": "0.1.0"
-            },
-            "readable-stream": {
-              "version": "1.1.13",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            },
-            "touch": {
-              "version": "0.0.3",
-              "dependencies": {
-                "nopt": {
-                  "version": "1.0.10"
-                }
-              }
-            }
-          }
-        },
-        "fstream": {
-          "version": "1.0.4",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1"
-            }
-          }
-        },
-        "fstream-ignore": {
-          "version": "1.0.2",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1"
-            }
-          }
-        },
-        "github": {
-          "version": "0.2.4",
-          "dependencies": {
-            "mime": {
-              "version": "1.3.4"
-            }
-          }
-        },
-        "graceful-fs": {
-          "version": "3.0.6"
-        },
-        "handlebars": {
-          "version": "2.0.0",
-          "dependencies": {
-            "optimist": {
-              "version": "0.3.7",
-              "dependencies": {
-                "wordwrap": {
-                  "version": "0.0.3"
-                }
-              }
-            },
-            "uglify-js": {
-              "version": "2.3.6",
-              "dependencies": {
-                "async": {
-                  "version": "0.2.10"
-                },
-                "source-map": {
-                  "version": "0.1.43",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "inquirer": {
-          "version": "0.8.0",
-          "dependencies": {
-            "ansi-regex": {
-              "version": "1.1.1"
-            },
-            "chalk": {
-              "version": "0.5.1",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0"
-                }
-              }
-            },
-            "cli-color": {
-              "version": "0.3.3",
-              "dependencies": {
-                "d": {
-                  "version": "0.1.1"
-                },
-                "es5-ext": {
-                  "version": "0.10.7",
-                  "dependencies": {
-                    "es6-iterator": {
-                      "version": "0.1.3"
-                    },
-                    "es6-symbol": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "memoizee": {
-                  "version": "0.3.8",
-                  "dependencies": {
-                    "es6-weak-map": {
-                      "version": "0.1.4",
-                      "dependencies": {
-                        "es6-iterator": {
-                          "version": "0.1.3"
-                        },
-                        "es6-symbol": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    },
-                    "event-emitter": {
-                      "version": "0.3.3"
-                    },
-                    "lru-queue": {
-                      "version": "0.1.0"
-                    },
-                    "next-tick": {
-                      "version": "0.2.2"
-                    }
-                  }
-                },
-                "timers-ext": {
-                  "version": "0.1.0",
-                  "dependencies": {
-                    "next-tick": {
-                      "version": "0.2.2"
-                    }
-                  }
-                }
-              }
-            },
-            "figures": {
-              "version": "1.3.5"
-            },
-            "mute-stream": {
-              "version": "0.0.4"
-            },
-            "readline2": {
-              "version": "0.1.1"
-            },
-            "through": {
-              "version": "2.3.7"
-            }
-          }
-        },
-        "insight": {
-          "version": "0.5.3",
-          "dependencies": {
-            "async": {
-              "version": "0.9.0"
-            },
-            "lodash.debounce": {
-              "version": "3.0.3",
-              "dependencies": {
-                "lodash.isnative": {
-                  "version": "3.0.2"
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0"
-            },
-            "os-name": {
-              "version": "1.0.3",
-              "dependencies": {
-                "osx-release": {
-                  "version": "1.0.0"
-                },
-                "win-release": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "tough-cookie": {
-              "version": "0.12.1",
-              "dependencies": {
-                "punycode": {
-                  "version": "1.3.2"
-                }
-              }
-            }
-          }
-        },
-        "is-root": {
-          "version": "1.0.0"
-        },
-        "junk": {
-          "version": "1.0.1"
-        },
-        "lockfile": {
-          "version": "1.0.0"
-        },
-        "lru-cache": {
-          "version": "2.6.2"
-        },
-        "mkdirp": {
-          "version": "0.5.0",
-          "dependencies": {
-            "minimist": {
-              "version": "0.0.8"
-            }
-          }
-        },
-        "mout": {
-          "version": "0.11.0"
-        },
-        "nopt": {
-          "version": "3.0.1"
-        },
-        "opn": {
-          "version": "1.0.2"
-        },
-        "p-throttler": {
-          "version": "0.1.1",
-          "dependencies": {
-            "q": {
-              "version": "0.9.7"
-            }
-          }
-        },
-        "promptly": {
-          "version": "0.2.0",
-          "dependencies": {
-            "read": {
-              "version": "1.0.5",
-              "dependencies": {
-                "mute-stream": {
-                  "version": "0.0.4"
-                }
-              }
-            }
-          }
-        },
-        "request": {
-          "version": "2.53.0",
-          "dependencies": {
-            "bl": {
-              "version": "0.9.4",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "caseless": {
-              "version": "0.9.0"
-            },
-            "forever-agent": {
-              "version": "0.5.2"
-            },
-            "form-data": {
-              "version": "0.2.0",
-              "dependencies": {
-                "async": {
-                  "version": "0.9.0"
-                }
-              }
-            },
-            "json-stringify-safe": {
-              "version": "5.0.0"
-            },
-            "mime-types": {
-              "version": "2.0.11",
-              "dependencies": {
-                "mime-db": {
-                  "version": "1.9.1"
-                }
-              }
-            },
-            "qs": {
-              "version": "2.3.3"
-            },
-            "tunnel-agent": {
-              "version": "0.4.0"
-            },
-            "tough-cookie": {
-              "version": "1.1.0"
-            },
-            "http-signature": {
-              "version": "0.10.1",
-              "dependencies": {
-                "assert-plus": {
-                  "version": "0.1.5"
-                },
-                "asn1": {
-                  "version": "0.1.11"
-                },
-                "ctype": {
-                  "version": "0.5.3"
-                }
-              }
-            },
-            "oauth-sign": {
-              "version": "0.6.0"
-            },
-            "hawk": {
-              "version": "2.3.1",
-              "dependencies": {
-                "hoek": {
-                  "version": "2.13.0"
-                },
-                "boom": {
-                  "version": "2.7.1"
-                },
-                "cryptiles": {
-                  "version": "2.0.4"
-                },
-                "sntp": {
-                  "version": "1.0.9"
-                }
-              }
-            },
-            "aws-sign2": {
-              "version": "0.5.0"
-            },
-            "stringstream": {
-              "version": "0.0.4"
-            },
-            "combined-stream": {
-              "version": "0.0.7",
-              "dependencies": {
-                "delayed-stream": {
-                  "version": "0.0.5"
-                }
-              }
-            },
-            "isstream": {
-              "version": "0.1.2"
-            }
-          }
-        },
-        "request-progress": {
-          "version": "0.3.1",
-          "dependencies": {
-            "throttleit": {
-              "version": "0.0.2"
-            }
-          }
-        },
-        "retry": {
-          "version": "0.6.1"
-        },
-        "rimraf": {
-          "version": "2.3.3"
-        },
-        "semver": {
-          "version": "2.3.2"
-        },
-        "shell-quote": {
-          "version": "1.4.3",
-          "dependencies": {
-            "jsonify": {
-              "version": "0.0.0"
-            },
-            "array-filter": {
-              "version": "0.0.1"
-            },
-            "array-reduce": {
-              "version": "0.0.0"
-            },
-            "array-map": {
-              "version": "0.0.0"
-            }
-          }
-        },
-        "stringify-object": {
-          "version": "1.0.1"
-        },
-        "tar-fs": {
-          "version": "1.5.0",
-          "dependencies": {
-            "pump": {
-              "version": "1.0.0",
-              "dependencies": {
-                "end-of-stream": {
-                  "version": "1.1.0"
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "tar-stream": {
-              "version": "1.1.4",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4"
-                },
-                "end-of-stream": {
-                  "version": "1.1.0",
-                  "dependencies": {
-                    "once": {
-                      "version": "1.3.2",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "tmp": {
-          "version": "0.0.24"
-        },
-        "update-notifier": {
-          "version": "0.3.2",
-          "dependencies": {
-            "is-npm": {
-              "version": "1.0.0"
-            },
-            "latest-version": {
-              "version": "1.0.0",
-              "dependencies": {
-                "package-json": {
-                  "version": "1.1.0",
-                  "dependencies": {
-                    "got": {
-                      "version": "2.9.2",
-                      "dependencies": {
-                        "duplexify": {
-                          "version": "3.3.0",
-                          "dependencies": {
-                            "end-of-stream": {
-                              "version": "1.0.0",
-                              "dependencies": {
-                                "once": {
-                                  "version": "1.3.2",
-                                  "dependencies": {
-                                    "wrappy": {
-                                      "version": "1.0.1"
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            "readable-stream": {
-                              "version": "1.0.33",
-                              "dependencies": {
-                                "core-util-is": {
-                                  "version": "1.0.1"
-                                },
-                                "isarray": {
-                                  "version": "0.0.1"
-                                },
-                                "string_decoder": {
-                                  "version": "0.10.31"
-                                },
-                                "inherits": {
-                                  "version": "2.0.1"
-                                }
-                              }
-                            }
-                          }
-                        },
-                        "infinity-agent": {
-                          "version": "2.0.3"
-                        },
-                        "is-stream": {
-                          "version": "1.0.1"
-                        },
-                        "lowercase-keys": {
-                          "version": "1.0.0"
-                        },
-                        "nested-error-stacks": {
-                          "version": "1.0.0"
-                        },
-                        "object-assign": {
-                          "version": "2.0.0"
-                        },
-                        "prepend-http": {
-                          "version": "1.0.1"
-                        },
-                        "read-all-stream": {
-                          "version": "2.1.2",
-                          "dependencies": {
-                            "readable-stream": {
-                              "version": "1.1.13",
-                              "dependencies": {
-                                "core-util-is": {
-                                  "version": "1.0.1"
-                                },
-                                "isarray": {
-                                  "version": "0.0.1"
-                                },
-                                "string_decoder": {
-                                  "version": "0.10.31"
-                                },
-                                "inherits": {
-                                  "version": "2.0.1"
-                                }
-                              }
-                            }
-                          }
-                        },
-                        "statuses": {
-                          "version": "1.2.1"
-                        },
-                        "timed-out": {
-                          "version": "2.0.0"
-                        }
-                      }
-                    },
-                    "registry-url": {
-                      "version": "3.0.3",
-                      "dependencies": {
-                        "rc": {
-                          "version": "1.0.1",
-                          "dependencies": {
-                            "minimist": {
-                              "version": "0.0.10"
-                            },
-                            "deep-extend": {
-                              "version": "0.2.11"
-                            },
-                            "strip-json-comments": {
-                              "version": "0.1.3"
-                            },
-                            "ini": {
-                              "version": "1.3.3"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "semver-diff": {
-              "version": "2.0.0",
-              "dependencies": {
-                "semver": {
-                  "version": "4.3.4"
-                }
-              }
-            },
-            "string-length": {
-              "version": "1.0.0"
-            }
-          }
-        },
-        "user-home": {
-          "version": "1.1.1"
-        }
-      }
-    },
-    "broccoli": {
-      "version": "0.15.4",
-      "dependencies": {
-        "broccoli-kitchen-sink-helpers": {
-          "version": "0.2.6",
-          "dependencies": {
-            "mkdirp": {
-              "version": "0.3.5"
-            },
-            "glob": {
-              "version": "4.0.4",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "minimatch": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "lru-cache": {
-                      "version": "2.6.2"
-                    },
-                    "sigmund": {
-                      "version": "1.0.0"
-                    }
-                  }
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.6"
-                }
-              }
-            }
-          }
-        },
-        "commander": {
-          "version": "2.8.1",
-          "dependencies": {
-            "graceful-readlink": {
-              "version": "1.0.1"
-            }
-          }
-        },
-        "connect": {
-          "version": "3.3.5",
-          "dependencies": {
-            "debug": {
-              "version": "2.1.3",
-              "dependencies": {
-                "ms": {
-                  "version": "0.7.0"
-                }
-              }
-            },
-            "finalhandler": {
-              "version": "0.3.4",
-              "dependencies": {
-                "escape-html": {
-                  "version": "1.0.1"
-                },
-                "on-finished": {
-                  "version": "2.2.1",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.1.0"
-                    }
-                  }
-                }
-              }
-            },
-            "parseurl": {
-              "version": "1.3.0"
-            },
-            "utils-merge": {
-              "version": "1.0.0"
-            }
-          }
-        },
-        "copy-dereference": {
-          "version": "1.0.0"
-        },
-        "findup-sync": {
-          "version": "0.2.1",
-          "dependencies": {
-            "glob": {
-              "version": "4.3.5",
-              "dependencies": {
-                "inflight": {
-                  "version": "1.0.4",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "handlebars": {
-          "version": "3.0.3",
-          "dependencies": {
-            "optimist": {
-              "version": "0.6.1",
-              "dependencies": {
-                "wordwrap": {
-                  "version": "0.0.3"
-                },
-                "minimist": {
-                  "version": "0.0.10"
-                }
-              }
-            },
-            "source-map": {
-              "version": "0.1.43",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0"
-                }
-              }
-            },
-            "uglify-js": {
-              "version": "2.3.6",
-              "dependencies": {
-                "async": {
-                  "version": "0.2.10"
-                },
-                "optimist": {
-                  "version": "0.3.7",
-                  "dependencies": {
-                    "wordwrap": {
-                      "version": "0.0.3"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "mime": {
-          "version": "1.3.4"
-        },
-        "promise-map-series": {
-          "version": "0.2.1"
-        },
-        "quick-temp": {
-          "version": "0.1.2",
-          "dependencies": {
-            "rimraf": {
-              "version": "2.2.8"
-            },
-            "mktemp": {
-              "version": "0.3.5"
-            },
-            "underscore.string": {
-              "version": "2.3.3"
-            }
-          }
-        },
-        "rimraf": {
-          "version": "2.3.3"
-        },
-        "rsvp": {
-          "version": "3.0.18"
-        },
-        "tiny-lr": {
-          "version": "0.1.5",
-          "dependencies": {
-            "body-parser": {
-              "version": "1.8.4",
-              "dependencies": {
-                "bytes": {
-                  "version": "1.0.0"
-                },
-                "depd": {
-                  "version": "0.4.5"
-                },
-                "iconv-lite": {
-                  "version": "0.4.4"
-                },
-                "media-typer": {
-                  "version": "0.3.0"
-                },
-                "on-finished": {
-                  "version": "2.1.0",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.0.5"
-                    }
-                  }
-                },
-                "qs": {
-                  "version": "2.2.4"
-                },
-                "raw-body": {
-                  "version": "1.3.0"
-                },
-                "type-is": {
-                  "version": "1.5.7",
-                  "dependencies": {
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "debug": {
-              "version": "2.0.0",
-              "dependencies": {
-                "ms": {
-                  "version": "0.6.2"
-                }
-              }
-            },
-            "faye-websocket": {
-              "version": "0.7.3",
-              "dependencies": {
-                "websocket-driver": {
-                  "version": "0.5.4",
-                  "dependencies": {
-                    "websocket-extensions": {
-                      "version": "0.1.1"
-                    }
-                  }
-                }
-              }
-            },
-            "livereload-js": {
-              "version": "2.2.2"
-            },
-            "parseurl": {
-              "version": "1.3.0"
-            },
-            "qs": {
-              "version": "2.2.5"
-            }
-          }
-        }
-      }
-    },
-    "broccoli-filter": {
-      "version": "0.1.14",
-      "dependencies": {
-        "broccoli-kitchen-sink-helpers": {
-          "version": "0.2.6",
-          "dependencies": {
-            "glob": {
-              "version": "4.0.4",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "minimatch": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "lru-cache": {
-                      "version": "2.6.2"
-                    },
-                    "sigmund": {
-                      "version": "1.0.0"
-                    }
-                  }
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.6"
-                }
-              }
-            }
-          }
-        },
-        "mkdirp": {
-          "version": "0.3.5"
-        },
-        "promise-map-series": {
-          "version": "0.2.1"
-        },
-        "quick-temp": {
-          "version": "0.1.2",
-          "dependencies": {
-            "rimraf": {
-              "version": "2.2.8"
-            },
-            "mktemp": {
-              "version": "0.3.5"
-            },
-            "underscore.string": {
-              "version": "2.3.3"
-            }
-          }
-        },
-        "rsvp": {
-          "version": "3.0.18"
-        }
-      }
-    },
-    "broccoli-flatten": {
-      "version": "0.1.1",
-      "dependencies": {
-        "broccoli-kitchen-sink-helpers": {
-          "version": "0.2.6",
-          "dependencies": {
-            "mkdirp": {
-              "version": "0.3.5"
-            },
-            "glob": {
-              "version": "4.0.4",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "minimatch": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "lru-cache": {
-                      "version": "2.6.2"
-                    },
-                    "sigmund": {
-                      "version": "1.0.0"
-                    }
-                  }
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.6"
-                }
-              }
-            }
-          }
-        },
-        "path": {
-          "version": "0.4.10"
-        }
-      }
-    },
-    "broccoli-funnel": {
-      "version": "0.2.3",
-      "resolved": "git://github.com/igorminar/broccoli-funnel.git#6bfb53c4ca8dd3fa16416b9f85dc923a227e30ee",
-      "dependencies": {
-        "broccoli-read-compat": {
-          "version": "0.1.3",
-          "dependencies": {
-            "promise-map-series": {
-              "version": "0.2.1"
-            },
-            "quick-temp": {
-              "version": "0.1.2",
-              "dependencies": {
-                "rimraf": {
-                  "version": "2.2.8"
-                },
-                "mktemp": {
-                  "version": "0.3.5"
-                },
-                "underscore.string": {
-                  "version": "2.3.3"
-                }
-              }
-            },
-            "rimraf": {
-              "version": "2.3.3"
-            },
-            "rsvp": {
-              "version": "3.0.18"
-            }
-          }
-        },
-        "core-object": {
-          "version": "0.0.2",
-          "dependencies": {
-            "lodash-node": {
-              "version": "2.4.1"
-            }
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.0",
-          "dependencies": {
-            "minimist": {
-              "version": "0.0.8"
-            }
-          }
-        }
-      }
-    },
-    "broccoli-lodash": {
-      "version": "0.1.1",
-      "dependencies": {
-        "broccoli-glob-filter": {
-          "version": "0.1.2",
-          "dependencies": {
-            "dirmatch": {
-              "version": "0.1.2"
-            },
-            "mkdirp": {
-              "version": "0.5.0",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8"
-                }
-              }
-            },
-            "quick-temp": {
-              "version": "0.1.2",
-              "dependencies": {
-                "rimraf": {
-                  "version": "2.2.8"
-                },
-                "mktemp": {
-                  "version": "0.3.5"
-                },
-                "underscore.string": {
-                  "version": "2.3.3"
-                }
-              }
-            },
-            "underscore": {
-              "version": "1.8.3"
-            }
-          }
-        }
-      }
-    },
-    "broccoli-merge-trees": {
-      "version": "0.2.1",
-      "dependencies": {
-        "promise-map-series": {
-          "version": "0.2.1",
-          "dependencies": {
-            "rsvp": {
-              "version": "3.0.18"
-            }
-          }
-        }
-      }
-    },
-    "broccoli-slow-trees": {
-      "version": "1.1.0"
-    },
-    "broccoli-stew": {
-      "version": "0.2.1",
-      "dependencies": {
-        "broccoli-funnel": {
-          "version": "0.1.7",
-          "dependencies": {
-            "core-object": {
-              "version": "0.0.2"
-            },
-            "mkdirp": {
-              "version": "0.5.0",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8"
-                }
-              }
-            },
-            "rimraf": {
-              "version": "2.3.3"
-            }
-          }
-        },
-        "chalk": {
-          "version": "0.5.1",
-          "dependencies": {
-            "ansi-styles": {
-              "version": "1.1.0"
-            },
-            "escape-string-regexp": {
-              "version": "1.0.3"
-            },
-            "has-ansi": {
-              "version": "0.1.0",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "0.2.1"
-                }
-              }
-            },
-            "strip-ansi": {
-              "version": "0.3.0",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "0.2.1"
-                }
-              }
-            },
-            "supports-color": {
-              "version": "0.2.0"
-            }
-          }
-        },
-        "debug": {
-          "version": "2.1.3",
-          "dependencies": {
-            "ms": {
-              "version": "0.7.0"
-            }
-          }
-        },
-        "fs-extra": {
-          "version": "0.13.0",
-          "dependencies": {
-            "ncp": {
-              "version": "1.0.1"
-            },
-            "jsonfile": {
-              "version": "2.0.0"
-            },
-            "rimraf": {
-              "version": "2.3.3"
-            }
-          }
-        },
-        "lodash-node": {
-          "version": "2.4.1"
-        },
-        "rsvp": {
-          "version": "3.0.18"
-        }
-      }
-    },
-    "broccoli-writer": {
-      "version": "0.1.1",
-      "dependencies": {
-        "quick-temp": {
-          "version": "0.1.2",
-          "dependencies": {
-            "rimraf": {
-              "version": "2.2.8"
-            },
-            "mktemp": {
-              "version": "0.3.5"
-            },
-            "underscore.string": {
-              "version": "2.3.3"
-            }
-          }
-        },
-        "rsvp": {
-          "version": "3.0.18"
-        }
-      }
-    },
-    "browserify": {
-      "version": "10.2.4",
-      "dependencies": {
-        "JSONStream": {
-          "version": "1.0.4",
-          "dependencies": {
-            "jsonparse": {
-              "version": "1.0.0"
-            },
-            "through": {
-              "version": "2.3.7"
-            }
-          }
-        },
-        "assert": {
-          "version": "1.3.0"
-        },
-        "browser-pack": {
-          "version": "5.0.1",
-          "dependencies": {
-            "combine-source-map": {
-              "version": "0.6.1",
-              "dependencies": {
-                "convert-source-map": {
-                  "version": "1.1.1"
-                },
-                "inline-source-map": {
-                  "version": "0.5.0"
-                },
-                "lodash.memoize": {
-                  "version": "3.0.4"
-                },
-                "source-map": {
-                  "version": "0.4.2",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.1"
-                    }
-                  }
-                }
-              }
-            },
-            "umd": {
-              "version": "3.0.1"
-            }
-          }
-        },
-        "browser-resolve": {
-          "version": "1.9.0"
-        },
-        "browserify-zlib": {
-          "version": "0.1.4",
-          "dependencies": {
-            "pako": {
-              "version": "0.2.7"
-            }
-          }
-        },
-        "buffer": {
-          "version": "3.2.2",
-          "dependencies": {
-            "base64-js": {
-              "version": "0.0.8"
-            },
-            "ieee754": {
-              "version": "1.1.6"
-            },
-            "is-array": {
-              "version": "1.0.1"
-            }
-          }
-        },
-        "builtins": {
-          "version": "0.0.7"
-        },
-        "commondir": {
-          "version": "0.0.1"
-        },
-        "concat-stream": {
-          "version": "1.4.10",
-          "dependencies": {
-            "typedarray": {
-              "version": "0.0.6"
-            }
-          }
-        },
-        "console-browserify": {
-          "version": "1.1.0",
-          "dependencies": {
-            "date-now": {
-              "version": "0.1.4"
-            }
-          }
-        },
-        "constants-browserify": {
-          "version": "0.0.1"
-        },
-        "crypto-browserify": {
-          "version": "3.9.14",
-          "dependencies": {
-            "browserify-aes": {
-              "version": "1.0.1"
-            },
-            "browserify-sign": {
-              "version": "3.0.2",
-              "dependencies": {
-                "bn.js": {
-                  "version": "2.1.0"
-                },
-                "browserify-rsa": {
-                  "version": "2.0.1"
-                },
-                "elliptic": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "brorand": {
-                      "version": "1.0.5"
-                    },
-                    "hash.js": {
-                      "version": "1.0.3"
-                    }
-                  }
-                },
-                "parse-asn1": {
-                  "version": "3.0.1",
-                  "dependencies": {
-                    "asn1.js": {
-                      "version": "2.1.0",
-                      "dependencies": {
-                        "minimalistic-assert": {
-                          "version": "1.0.0"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "create-ecdh": {
-              "version": "2.0.1",
-              "dependencies": {
-                "bn.js": {
-                  "version": "2.1.0"
-                },
-                "elliptic": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "brorand": {
-                      "version": "1.0.5"
-                    },
-                    "hash.js": {
-                      "version": "1.0.3"
-                    }
-                  }
-                }
-              }
-            },
-            "create-hash": {
-              "version": "1.1.1",
-              "dependencies": {
-                "ripemd160": {
-                  "version": "1.0.1"
-                },
-                "sha.js": {
-                  "version": "2.4.2"
-                }
-              }
-            },
-            "create-hmac": {
-              "version": "1.1.3"
-            },
-            "diffie-hellman": {
-              "version": "3.0.2",
-              "dependencies": {
-                "bn.js": {
-                  "version": "2.1.0"
-                },
-                "miller-rabin": {
-                  "version": "2.0.1",
-                  "dependencies": {
-                    "brorand": {
-                      "version": "1.0.5"
-                    }
-                  }
-                }
-              }
-            },
-            "pbkdf2": {
-              "version": "3.0.4"
-            },
-            "public-encrypt": {
-              "version": "2.0.1",
-              "dependencies": {
-                "bn.js": {
-                  "version": "2.1.0"
-                },
-                "browserify-rsa": {
-                  "version": "2.0.1"
-                },
-                "parse-asn1": {
-                  "version": "3.0.1",
-                  "dependencies": {
-                    "asn1.js": {
-                      "version": "2.1.0",
-                      "dependencies": {
-                        "minimalistic-assert": {
-                          "version": "1.0.0"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "randombytes": {
-              "version": "2.0.1"
-            }
-          }
-        },
-        "defined": {
-          "version": "1.0.0"
-        },
-        "deps-sort": {
-          "version": "1.3.9"
-        },
-        "domain-browser": {
-          "version": "1.1.4"
-        },
-        "duplexer2": {
-          "version": "0.0.2"
-        },
-        "events": {
-          "version": "1.0.2"
-        },
-        "has": {
-          "version": "1.0.0"
-        },
-        "htmlescape": {
-          "version": "1.1.0"
-        },
-        "http-browserify": {
-          "version": "1.7.0",
-          "dependencies": {
-            "Base64": {
-              "version": "0.2.1"
-            }
-          }
-        },
-        "https-browserify": {
-          "version": "0.0.0"
-        },
-        "inherits": {
-          "version": "2.0.1"
-        },
-        "insert-module-globals": {
-          "version": "6.5.0",
-          "dependencies": {
-            "combine-source-map": {
-              "version": "0.3.0",
-              "dependencies": {
-                "inline-source-map": {
-                  "version": "0.3.1",
-                  "dependencies": {
-                    "source-map": {
-                      "version": "0.3.0",
-                      "dependencies": {
-                        "amdefine": {
-                          "version": "0.1.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "convert-source-map": {
-                  "version": "0.3.5"
-                },
-                "source-map": {
-                  "version": "0.1.43",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.1"
-                    }
-                  }
-                }
-              }
-            },
-            "lexical-scope": {
-              "version": "1.1.1",
-              "dependencies": {
-                "astw": {
-                  "version": "2.0.0",
-                  "dependencies": {
-                    "acorn": {
-                      "version": "1.2.2"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "isarray": {
-          "version": "0.0.1"
-        },
-        "labeled-stream-splicer": {
-          "version": "1.0.2",
-          "dependencies": {
-            "stream-splicer": {
-              "version": "1.3.1",
-              "dependencies": {
-                "readable-wrap": {
-                  "version": "1.0.0"
-                },
-                "indexof": {
-                  "version": "0.0.1"
-                }
-              }
-            }
-          }
-        },
-        "module-deps": {
-          "version": "3.8.1",
-          "dependencies": {
-            "detective": {
-              "version": "4.1.0",
-              "dependencies": {
-                "acorn": {
-                  "version": "1.2.2"
-                },
-                "escodegen": {
-                  "version": "1.6.1",
-                  "dependencies": {
-                    "estraverse": {
-                      "version": "1.9.3"
-                    },
-                    "esutils": {
-                      "version": "1.1.6"
-                    },
-                    "esprima": {
-                      "version": "1.2.5"
-                    },
-                    "optionator": {
-                      "version": "0.5.0",
-                      "dependencies": {
-                        "prelude-ls": {
-                          "version": "1.1.2"
-                        },
-                        "deep-is": {
-                          "version": "0.1.3"
-                        },
-                        "wordwrap": {
-                          "version": "0.0.3"
-                        },
-                        "type-check": {
-                          "version": "0.3.1"
-                        },
-                        "levn": {
-                          "version": "0.2.5"
-                        },
-                        "fast-levenshtein": {
-                          "version": "1.0.6"
-                        }
-                      }
-                    },
-                    "source-map": {
-                      "version": "0.1.43",
-                      "dependencies": {
-                        "amdefine": {
-                          "version": "0.1.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "stream-combiner2": {
-              "version": "1.0.2",
-              "dependencies": {
-                "through2": {
-                  "version": "0.5.1",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "xtend": {
-                      "version": "3.0.0"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "os-browserify": {
-          "version": "0.1.2"
-        },
-        "parents": {
-          "version": "1.0.1",
-          "dependencies": {
-            "path-platform": {
-              "version": "0.11.15"
-            }
-          }
-        },
-        "path-browserify": {
-          "version": "0.0.0"
-        },
-        "process": {
-          "version": "0.11.1"
-        },
-        "punycode": {
-          "version": "1.3.2"
-        },
-        "querystring-es3": {
-          "version": "0.2.1"
-        },
-        "read-only-stream": {
-          "version": "1.1.1",
-          "dependencies": {
-            "readable-wrap": {
-              "version": "1.0.0"
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "1.1.13",
-          "dependencies": {
-            "core-util-is": {
-              "version": "1.0.1"
-            }
-          }
-        },
-        "resolve": {
-          "version": "1.1.6"
-        },
-        "shasum": {
-          "version": "1.0.1",
-          "dependencies": {
-            "json-stable-stringify": {
-              "version": "0.0.1",
-              "dependencies": {
-                "jsonify": {
-                  "version": "0.0.0"
-                }
-              }
-            },
-            "sha.js": {
-              "version": "2.3.6"
-            }
-          }
-        },
-        "shell-quote": {
-          "version": "0.0.1"
-        },
-        "stream-browserify": {
-          "version": "1.0.0"
-        },
-        "string_decoder": {
-          "version": "0.10.31"
-        },
-        "subarg": {
-          "version": "1.0.0"
-        },
-        "syntax-error": {
-          "version": "1.1.4",
-          "dependencies": {
-            "acorn": {
-              "version": "1.2.2"
-            }
-          }
-        },
-        "through2": {
-          "version": "1.1.1"
-        },
-        "timers-browserify": {
-          "version": "1.4.1"
-        },
-        "tty-browserify": {
-          "version": "0.0.0"
-        },
-        "url": {
-          "version": "0.10.3",
-          "dependencies": {
-            "querystring": {
-              "version": "0.2.0"
-            }
-          }
-        },
-        "util": {
-          "version": "0.10.3"
-        },
-        "vm-browserify": {
-          "version": "0.0.4",
-          "dependencies": {
-            "indexof": {
-              "version": "0.0.1"
-            }
-          }
-        }
-      }
-    },
-    "canonical-path": {
-      "version": "0.0.2"
-    },
-    "chokidar": {
-      "version": "1.0.1",
-      "dependencies": {
-        "anymatch": {
-          "version": "1.3.0",
-          "dependencies": {
-            "micromatch": {
-              "version": "2.1.6",
-              "dependencies": {
-                "arr-diff": {
-                  "version": "1.0.1",
-                  "dependencies": {
-                    "array-slice": {
-                      "version": "0.2.3"
-                    }
-                  }
-                },
-                "braces": {
-                  "version": "1.8.0",
-                  "dependencies": {
-                    "expand-range": {
-                      "version": "1.8.1",
-                      "dependencies": {
-                        "fill-range": {
-                          "version": "2.2.2",
-                          "dependencies": {
-                            "is-number": {
-                              "version": "1.1.2"
-                            },
-                            "isobject": {
-                              "version": "1.0.0"
-                            },
-                            "randomatic": {
-                              "version": "1.1.0"
-                            },
-                            "repeat-string": {
-                              "version": "1.5.2"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "preserve": {
-                      "version": "0.2.0"
-                    },
-                    "repeat-element": {
-                      "version": "1.1.2"
-                    }
-                  }
-                },
-                "debug": {
-                  "version": "2.2.0",
-                  "dependencies": {
-                    "ms": {
-                      "version": "0.7.1"
-                    }
-                  }
-                },
-                "expand-brackets": {
-                  "version": "0.1.1"
-                },
-                "filename-regex": {
-                  "version": "2.0.0"
-                },
-                "kind-of": {
-                  "version": "1.1.0"
-                },
-                "object.omit": {
-                  "version": "0.2.1",
-                  "dependencies": {
-                    "for-own": {
-                      "version": "0.1.3",
-                      "dependencies": {
-                        "for-in": {
-                          "version": "0.1.4"
-                        }
-                      }
-                    },
-                    "isobject": {
-                      "version": "0.2.0"
-                    }
-                  }
-                },
-                "parse-glob": {
-                  "version": "3.0.2",
-                  "dependencies": {
-                    "glob-base": {
-                      "version": "0.2.0"
-                    },
-                    "is-dotfile": {
-                      "version": "1.0.1"
-                    },
-                    "is-extglob": {
-                      "version": "1.0.0"
-                    }
-                  }
-                },
-                "regex-cache": {
-                  "version": "0.4.2",
-                  "dependencies": {
-                    "is-equal-shallow": {
-                      "version": "0.1.2",
-                      "dependencies": {
-                        "is-primitive": {
-                          "version": "1.0.0"
-                        }
-                      }
-                    },
-                    "is-primitive": {
-                      "version": "2.0.0"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "arrify": {
-          "version": "1.0.0"
-        },
-        "async-each": {
-          "version": "0.1.6"
-        },
-        "glob-parent": {
-          "version": "1.2.0"
-        },
-        "is-binary-path": {
-          "version": "1.0.1",
-          "dependencies": {
-            "binary-extensions": {
-              "version": "1.3.1"
-            }
-          }
-        },
-        "is-glob": {
-          "version": "1.1.3"
-        },
-        "readdirp": {
-          "version": "1.3.0",
-          "dependencies": {
-            "graceful-fs": {
-              "version": "2.0.3"
-            },
-            "minimatch": {
-              "version": "0.2.14",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.4"
-                },
-                "sigmund": {
-                  "version": "1.0.1"
-                }
-              }
-            },
-            "readable-stream": {
-              "version": "1.0.33",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            }
-          }
-        },
-        "fsevents": {
-          "version": "0.3.6",
-          "dependencies": {
-            "nan": {
-              "version": "1.8.4"
-            }
-          }
-        }
-      }
-    },
-    "clang-format": {
-      "version": "1.0.25",
-      "dependencies": {
-        "resolve": {
-          "version": "1.1.6"
-        }
-      }
-    },
-    "conventional-changelog": {
-      "version": "0.0.17",
-      "dependencies": {
-        "dateformat": {
-          "version": "1.0.11",
-          "dependencies": {
-            "get-stdin": {
-              "version": "4.0.1"
-            },
-            "meow": {
-              "version": "3.1.0",
-              "dependencies": {
-                "camelcase-keys": {
-                  "version": "1.0.0",
-                  "dependencies": {
-                    "camelcase": {
-                      "version": "1.0.2"
-                    },
-                    "map-obj": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "object-assign": {
-                  "version": "2.0.0"
-                }
-              }
-            }
-          }
-        },
-        "github-url-from-git": {
-          "version": "1.4.0"
-        },
-        "lodash": {
-          "version": "3.8.0"
-        },
-        "normalize-package-data": {
-          "version": "1.0.3",
-          "dependencies": {
-            "github-url-from-username-repo": {
-              "version": "1.0.2"
-            }
-          }
-        }
-      }
-    },
-    "css": {
-      "version": "2.2.0",
-      "resolved": "git://github.com/mlaval/css.git#9de8bc988d13c27d143486cf60ddf5f9deec0472",
-      "dependencies": {
-        "source-map": {
-          "version": "0.1.43",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.0"
-            }
-          }
-        },
-        "source-map-resolve": {
-          "version": "0.3.1",
-          "dependencies": {
-            "source-map-url": {
-              "version": "0.3.0"
-            },
-            "atob": {
-              "version": "1.1.2"
-            },
-            "resolve-url": {
-              "version": "0.2.1"
-            }
-          }
-        },
-        "urix": {
-          "version": "0.1.0"
-        },
-        "inherits": {
-          "version": "2.0.1"
-        }
-      }
-    },
-    "del": {
-      "version": "1.1.1",
-      "dependencies": {
-        "each-async": {
-          "version": "1.1.1",
-          "dependencies": {
-            "onetime": {
-              "version": "1.0.0"
-            },
-            "set-immediate-shim": {
-              "version": "1.0.1"
-            }
-          }
-        },
-        "globby": {
-          "version": "1.2.0",
-          "dependencies": {
-            "array-union": {
-              "version": "1.0.1",
-              "dependencies": {
-                "array-uniq": {
-                  "version": "1.0.2"
-                }
-              }
-            },
-            "async": {
-              "version": "0.9.0"
-            }
-          }
-        },
-        "is-path-cwd": {
-          "version": "1.0.0"
-        },
-        "is-path-in-cwd": {
-          "version": "1.0.0",
-          "dependencies": {
-            "is-path-inside": {
-              "version": "1.0.0",
-              "dependencies": {
-                "path-is-inside": {
-                  "version": "1.0.1"
-                }
-              }
-            }
-          }
-        },
-        "object-assign": {
-          "version": "2.0.0"
-        },
-        "rimraf": {
-          "version": "2.3.3"
-        }
-      }
-    },
-    "dgeni": {
-      "version": "0.4.1",
-      "dependencies": {
-        "dependency-graph": {
-          "version": "0.1.0",
-          "dependencies": {
-            "underscore": {
-              "version": "1.4.4"
-            }
-          }
-        },
-        "di": {
-          "version": "0.0.1"
-        },
-        "optimist": {
-          "version": "0.6.1",
-          "dependencies": {
-            "wordwrap": {
-              "version": "0.0.3"
-            },
-            "minimist": {
-              "version": "0.0.10"
-            }
-          }
-        },
-        "q": {
-          "version": "0.9.7"
-        },
-        "validate.js": {
-          "version": "0.2.0"
-        },
-        "winston": {
-          "version": "0.7.3",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10"
-            },
-            "colors": {
-              "version": "0.6.2"
-            },
-            "cycle": {
-              "version": "1.0.3"
-            },
-            "eyes": {
-              "version": "0.1.8"
-            },
-            "pkginfo": {
-              "version": "0.3.0"
-            },
-            "request": {
-              "version": "2.16.6",
-              "dependencies": {
-                "form-data": {
-                  "version": "0.0.10",
-                  "dependencies": {
-                    "combined-stream": {
-                      "version": "0.0.7",
-                      "dependencies": {
-                        "delayed-stream": {
-                          "version": "0.0.5"
-                        }
-                      }
-                    }
-                  }
-                },
-                "mime": {
-                  "version": "1.2.11"
-                },
-                "hawk": {
-                  "version": "0.10.2",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "0.7.6"
-                    },
-                    "boom": {
-                      "version": "0.3.8"
-                    },
-                    "cryptiles": {
-                      "version": "0.1.3"
-                    },
-                    "sntp": {
-                      "version": "0.1.4"
-                    }
-                  }
-                },
-                "cookie-jar": {
-                  "version": "0.2.0"
-                },
-                "aws-sign": {
-                  "version": "0.2.0"
-                },
-                "oauth-sign": {
-                  "version": "0.2.0"
-                },
-                "forever-agent": {
-                  "version": "0.2.0"
-                },
-                "tunnel-agent": {
-                  "version": "0.2.0"
-                },
-                "json-stringify-safe": {
-                  "version": "3.0.0"
-                },
-                "qs": {
-                  "version": "0.5.6"
-                }
-              }
-            },
-            "stack-trace": {
-              "version": "0.0.9"
-            }
-          }
-        }
-      }
-    },
-    "dgeni-packages": {
-      "version": "0.10.15",
-      "dependencies": {
-        "catharsis": {
-          "version": "0.8.7",
-          "dependencies": {
-            "underscore-contrib": {
-              "version": "0.3.0",
-              "dependencies": {
-                "underscore": {
-                  "version": "1.6.0"
-                }
-              }
-            }
-          }
-        },
-        "change-case": {
-          "version": "2.3.0",
-          "dependencies": {
-            "camel-case": {
-              "version": "1.1.2"
-            },
-            "constant-case": {
-              "version": "1.1.1"
-            },
-            "dot-case": {
-              "version": "1.1.1"
-            },
-            "is-lower-case": {
-              "version": "1.1.1"
-            },
-            "is-upper-case": {
-              "version": "1.1.1"
-            },
-            "lower-case": {
-              "version": "1.1.2"
-            },
-            "lower-case-first": {
-              "version": "1.0.0"
-            },
-            "param-case": {
-              "version": "1.1.1"
-            },
-            "pascal-case": {
-              "version": "1.1.1"
-            },
-            "path-case": {
-              "version": "1.1.1"
-            },
-            "sentence-case": {
-              "version": "1.1.2"
-            },
-            "snake-case": {
-              "version": "1.1.1"
-            },
-            "swap-case": {
-              "version": "1.1.1"
-            },
-            "title-case": {
-              "version": "1.1.1"
-            },
-            "upper-case": {
-              "version": "1.1.2"
-            },
-            "upper-case-first": {
-              "version": "1.1.1"
-            }
-          }
-        },
-        "esprima": {
-          "version": "1.2.5"
-        },
-        "estraverse": {
-          "version": "1.9.3"
-        },
-        "glob": {
-          "version": "3.2.11",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1"
-            }
-          }
-        },
-        "htmlparser2": {
-          "version": "3.8.3",
-          "dependencies": {
-            "domhandler": {
-              "version": "2.3.0"
-            },
-            "domutils": {
-              "version": "1.5.1",
-              "dependencies": {
-                "dom-serializer": {
-                  "version": "0.1.0",
-                  "dependencies": {
-                    "domelementtype": {
-                      "version": "1.1.3"
-                    },
-                    "entities": {
-                      "version": "1.1.1"
-                    }
-                  }
-                }
-              }
-            },
-            "domelementtype": {
-              "version": "1.3.0"
-            },
-            "readable-stream": {
-              "version": "1.1.13",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            },
-            "entities": {
-              "version": "1.0.0"
-            }
-          }
-        },
-        "minimatch": {
-          "version": "0.3.0",
-          "dependencies": {
-            "lru-cache": {
-              "version": "2.6.4"
-            },
-            "sigmund": {
-              "version": "1.0.1"
-            }
-          }
-        },
-        "nunjucks": {
-          "version": "1.3.4",
-          "dependencies": {
-            "optimist": {
-              "version": "0.6.1",
-              "dependencies": {
-                "wordwrap": {
-                  "version": "0.0.3"
-                },
-                "minimist": {
-                  "version": "0.0.10"
-                }
-              }
-            },
-            "chokidar": {
-              "version": "0.12.6",
-              "dependencies": {
-                "readdirp": {
-                  "version": "1.3.0",
-                  "dependencies": {
-                    "graceful-fs": {
-                      "version": "2.0.3"
-                    },
-                    "minimatch": {
-                      "version": "0.2.14",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.4"
-                        },
-                        "sigmund": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "async-each": {
-                  "version": "0.1.6"
-                },
-                "fsevents": {
-                  "version": "0.3.6",
-                  "dependencies": {
-                    "nan": {
-                      "version": "1.8.4"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "q": {
-          "version": "1.0.1"
-        },
-        "q-io": {
-          "version": "1.10.9",
-          "dependencies": {
-            "q": {
-              "version": "0.9.7"
-            },
-            "qs": {
-              "version": "0.1.0"
-            },
-            "url2": {
-              "version": "0.0.0"
-            },
-            "mime": {
-              "version": "1.2.11"
-            },
-            "mimeparse": {
-              "version": "0.1.4"
-            },
-            "collections": {
-              "version": "0.2.2",
-              "dependencies": {
-                "weak-map": {
-                  "version": "1.0.0"
-                }
-              }
-            }
-          }
-        },
-        "stringmap": {
-          "version": "0.2.2"
-        },
-        "winston": {
-          "version": "0.7.3",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10"
-            },
-            "colors": {
-              "version": "0.6.2"
-            },
-            "cycle": {
-              "version": "1.0.3"
-            },
-            "eyes": {
-              "version": "0.1.8"
-            },
-            "pkginfo": {
-              "version": "0.3.0"
-            },
-            "request": {
-              "version": "2.16.6",
-              "dependencies": {
-                "form-data": {
-                  "version": "0.0.10",
-                  "dependencies": {
-                    "combined-stream": {
-                      "version": "0.0.7",
-                      "dependencies": {
-                        "delayed-stream": {
-                          "version": "0.0.5"
-                        }
-                      }
-                    }
-                  }
-                },
-                "mime": {
-                  "version": "1.2.11"
-                },
-                "hawk": {
-                  "version": "0.10.2",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "0.7.6"
-                    },
-                    "boom": {
-                      "version": "0.3.8"
-                    },
-                    "cryptiles": {
-                      "version": "0.1.3"
-                    },
-                    "sntp": {
-                      "version": "0.1.4"
-                    }
-                  }
-                },
-                "cookie-jar": {
-                  "version": "0.2.0"
-                },
-                "aws-sign": {
-                  "version": "0.2.0"
-                },
-                "oauth-sign": {
-                  "version": "0.2.0"
-                },
-                "forever-agent": {
-                  "version": "0.2.0"
-                },
-                "tunnel-agent": {
-                  "version": "0.2.0"
-                },
-                "json-stringify-safe": {
-                  "version": "3.0.0"
-                },
-                "qs": {
-                  "version": "0.5.6"
-                }
-              }
-            },
-            "stack-trace": {
-              "version": "0.0.9"
-            }
-          }
-        }
-      }
-    },
-    "es6-module-loader": {
-      "version": "0.9.4",
-      "dependencies": {
-        "grunt-contrib-uglify": {
-          "version": "0.6.0",
-          "dependencies": {
-            "chalk": {
-              "version": "0.5.1",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0"
-                }
-              }
-            },
-            "maxmin": {
-              "version": "1.1.0",
-              "dependencies": {
-                "chalk": {
-                  "version": "1.0.0",
-                  "dependencies": {
-                    "ansi-styles": {
-                      "version": "2.0.1"
-                    },
-                    "escape-string-regexp": {
-                      "version": "1.0.3"
-                    },
-                    "has-ansi": {
-                      "version": "1.0.3",
-                      "dependencies": {
-                        "ansi-regex": {
-                          "version": "1.1.1"
-                        },
-                        "get-stdin": {
-                          "version": "4.0.1"
-                        }
-                      }
-                    },
-                    "supports-color": {
-                      "version": "1.3.1"
-                    }
-                  }
-                },
-                "figures": {
-                  "version": "1.3.5"
-                },
-                "gzip-size": {
-                  "version": "1.0.0",
-                  "dependencies": {
-                    "concat-stream": {
-                      "version": "1.4.8",
-                      "dependencies": {
-                        "inherits": {
-                          "version": "2.0.1"
-                        },
-                        "typedarray": {
-                          "version": "0.0.6"
-                        },
-                        "readable-stream": {
-                          "version": "1.1.13",
-                          "dependencies": {
-                            "core-util-is": {
-                              "version": "1.0.1"
-                            },
-                            "isarray": {
-                              "version": "0.0.1"
-                            },
-                            "string_decoder": {
-                              "version": "0.10.31"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "browserify-zlib": {
-                      "version": "0.1.4",
-                      "dependencies": {
-                        "pako": {
-                          "version": "0.2.6"
-                        }
-                      }
-                    }
-                  }
-                },
-                "pretty-bytes": {
-                  "version": "1.0.4",
-                  "dependencies": {
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    },
-                    "meow": {
-                      "version": "3.1.0",
-                      "dependencies": {
-                        "camelcase-keys": {
-                          "version": "1.0.0",
-                          "dependencies": {
-                            "camelcase": {
-                              "version": "1.0.2"
-                            },
-                            "map-obj": {
-                              "version": "1.0.1"
-                            }
-                          }
-                        },
-                        "object-assign": {
-                          "version": "2.0.0"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "uglify-js": {
-              "version": "2.4.21",
-              "dependencies": {
-                "async": {
-                  "version": "0.2.10"
-                },
-                "source-map": {
-                  "version": "0.1.34",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0"
-                    }
-                  }
-                },
-                "uglify-to-browserify": {
-                  "version": "1.0.2"
-                },
-                "yargs": {
-                  "version": "3.5.4",
-                  "dependencies": {
-                    "camelcase": {
-                      "version": "1.0.2"
-                    },
-                    "decamelize": {
-                      "version": "1.0.0"
-                    },
-                    "window-size": {
-                      "version": "0.1.0"
-                    },
-                    "wordwrap": {
-                      "version": "0.0.2"
-                    }
-                  }
-                }
-              }
-            },
-            "uri-path": {
-              "version": "0.0.2"
-            }
-          }
-        },
-        "traceur": {
-          "version": "0.0.72",
-          "dependencies": {
-            "commander": {
-              "version": "2.8.1",
-              "dependencies": {
-                "graceful-readlink": {
-                  "version": "1.0.1"
-                }
-              }
-            },
-            "regexpu": {
-              "version": "0.3.0",
-              "dependencies": {
-                "recast": {
-                  "version": "0.8.8",
-                  "dependencies": {
-                    "esprima-fb": {
-                      "version": "7001.1.0-dev-harmony-fb"
-                    },
-                    "source-map": {
-                      "version": "0.1.32",
-                      "dependencies": {
-                        "amdefine": {
-                          "version": "0.1.0"
-                        }
-                      }
-                    },
-                    "private": {
-                      "version": "0.1.6"
-                    },
-                    "cls": {
-                      "version": "0.1.5"
-                    },
-                    "depd": {
-                      "version": "1.0.1"
-                    },
-                    "ast-types": {
-                      "version": "0.5.7"
-                    }
-                  }
-                },
-                "regenerate": {
-                  "version": "1.2.1"
-                },
-                "regjsgen": {
-                  "version": "0.2.0"
-                },
-                "regjsparser": {
-                  "version": "0.1.4",
-                  "dependencies": {
-                    "jsesc": {
-                      "version": "0.5.0"
-                    }
-                  }
-                }
-              }
-            },
-            "rsvp": {
-              "version": "3.0.18"
-            },
-            "semver": {
-              "version": "2.3.2"
-            }
-          }
-        },
-        "when": {
-          "version": "3.7.3"
-        },
-        "grunt": {
-          "version": "0.4.5",
-          "dependencies": {
-            "async": {
-              "version": "0.1.22"
-            },
-            "coffee-script": {
-              "version": "1.3.3"
-            },
-            "colors": {
-              "version": "0.6.2"
-            },
-            "dateformat": {
-              "version": "1.0.2-1.2.3"
-            },
-            "eventemitter2": {
-              "version": "0.4.14"
-            },
-            "findup-sync": {
-              "version": "0.1.3",
-              "dependencies": {
-                "glob": {
-                  "version": "3.2.11",
-                  "dependencies": {
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "minimatch": {
-                      "version": "0.3.0",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.2"
-                        },
-                        "sigmund": {
-                          "version": "1.0.0"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash": {
-                  "version": "2.4.2"
-                }
-              }
-            },
-            "glob": {
-              "version": "3.1.21",
-              "dependencies": {
-                "graceful-fs": {
-                  "version": "1.2.3"
-                },
-                "inherits": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "hooker": {
-              "version": "0.2.3"
-            },
-            "iconv-lite": {
-              "version": "0.2.11"
-            },
-            "minimatch": {
-              "version": "0.2.14",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.2"
-                },
-                "sigmund": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "nopt": {
-              "version": "1.0.10",
-              "dependencies": {
-                "abbrev": {
-                  "version": "1.0.5"
-                }
-              }
-            },
-            "rimraf": {
-              "version": "2.2.8"
-            },
-            "lodash": {
-              "version": "0.9.2"
-            },
-            "underscore.string": {
-              "version": "2.2.1"
-            },
-            "js-yaml": {
-              "version": "2.0.5",
-              "dependencies": {
-                "argparse": {
-                  "version": "0.1.16",
-                  "dependencies": {
-                    "underscore": {
-                      "version": "1.7.0"
-                    },
-                    "underscore.string": {
-                      "version": "2.4.0"
-                    }
-                  }
-                },
-                "esprima": {
-                  "version": "1.0.4"
-                }
-              }
-            },
-            "exit": {
-              "version": "0.1.2"
-            },
-            "getobject": {
-              "version": "0.1.0"
-            },
-            "grunt-legacy-util": {
-              "version": "0.2.0"
-            },
-            "grunt-legacy-log": {
-              "version": "0.1.1",
-              "dependencies": {
-                "lodash": {
-                  "version": "2.4.2"
-                },
-                "underscore.string": {
-                  "version": "2.3.3"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "event-stream": {
-      "version": "3.3.1",
-      "dependencies": {
-        "through": {
-          "version": "2.3.7"
-        },
-        "duplexer": {
-          "version": "0.1.1"
-        },
-        "from": {
-          "version": "0.1.3"
-        },
-        "map-stream": {
-          "version": "0.1.0"
-        },
-        "pause-stream": {
-          "version": "0.0.11"
-        },
-        "split": {
-          "version": "0.3.3"
-        },
-        "stream-combiner": {
-          "version": "0.0.4"
-        }
-      }
-    },
-    "firefox-profile": {
-      "version": "0.3.4",
-      "dependencies": {
-        "jetpack-id": {
-          "version": "0.0.4"
-        },
-        "adm-zip": {
-          "version": "0.4.7"
-        },
-        "archiver": {
-          "version": "0.11.0",
-          "dependencies": {
-            "buffer-crc32": {
-              "version": "0.2.5"
-            },
-            "glob": {
-              "version": "3.2.11",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "minimatch": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "lru-cache": {
-                      "version": "2.6.4"
-                    },
-                    "sigmund": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "readable-stream": {
-              "version": "1.0.33",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            },
-            "tar-stream": {
-              "version": "0.4.7",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4"
-                },
-                "end-of-stream": {
-                  "version": "1.1.0",
-                  "dependencies": {
-                    "once": {
-                      "version": "1.3.2",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "zip-stream": {
-              "version": "0.4.1",
-              "dependencies": {
-                "compress-commons": {
-                  "version": "0.1.6",
-                  "dependencies": {
-                    "crc32-stream": {
-                      "version": "0.3.4"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "async": {
-          "version": "0.9.2"
-        },
-        "fs-extra": {
-          "version": "0.11.1",
-          "dependencies": {
-            "ncp": {
-              "version": "0.6.0"
-            },
-            "mkdirp": {
-              "version": "0.5.1",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8"
-                }
-              }
-            },
-            "jsonfile": {
-              "version": "2.0.1"
-            },
-            "rimraf": {
-              "version": "2.3.4"
-            }
-          }
-        },
-        "lazystream": {
-          "version": "0.1.0",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.0.33",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            }
-          }
-        },
-        "wrench": {
-          "version": "1.5.8"
-        },
-        "xml2js": {
-          "version": "0.4.9",
-          "dependencies": {
-            "sax": {
-              "version": "0.6.1"
-            },
-            "xmlbuilder": {
-              "version": "2.6.4",
-              "dependencies": {
-                "lodash": {
-                  "version": "3.9.3"
-                }
-              }
-            }
-          }
-        },
-        "ini": {
-          "version": "1.2.1"
-        }
-      }
-    },
-    "fs-extra": {
-      "version": "0.18.2",
-      "dependencies": {
-        "graceful-fs": {
-          "version": "3.0.6"
-        },
-        "jsonfile": {
-          "version": "2.0.0"
-        },
-        "rimraf": {
-          "version": "2.3.3"
-        }
-      }
-    },
-    "glob": {
-      "version": "4.5.3",
-      "dependencies": {
-        "inflight": {
-          "version": "1.0.4",
-          "dependencies": {
-            "wrappy": {
-              "version": "1.0.1"
-            }
-          }
-        },
-        "inherits": {
-          "version": "2.0.1"
-        },
-        "once": {
-          "version": "1.3.2",
-          "dependencies": {
-            "wrappy": {
-              "version": "1.0.1"
-            }
-          }
-        }
-      }
-    },
-    "googleapis": {
-      "version": "1.0.23",
-      "dependencies": {
-        "async": {
-          "version": "0.9.0"
-        },
-        "gapitoken": {
-          "version": "0.1.4",
-          "dependencies": {
-            "jws": {
-              "version": "0.0.2",
-              "dependencies": {
-                "tap": {
-                  "version": "0.3.3",
-                  "dependencies": {
-                    "inherits": {
-                      "version": "1.0.0"
-                    },
-                    "yamlish": {
-                      "version": "0.0.5"
-                    },
-                    "slide": {
-                      "version": "1.1.6"
-                    },
-                    "runforcover": {
-                      "version": "0.0.2",
-                      "dependencies": {
-                        "bunker": {
-                          "version": "0.1.2",
-                          "dependencies": {
-                            "burrito": {
-                              "version": "0.2.12",
-                              "dependencies": {
-                                "traverse": {
-                                  "version": "0.5.2"
-                                },
-                                "uglify-js": {
-                                  "version": "1.1.1"
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "nopt": {
-                      "version": "2.2.1",
-                      "dependencies": {
-                        "abbrev": {
-                          "version": "1.0.5"
-                        }
-                      }
-                    },
-                    "mkdirp": {
-                      "version": "0.3.5"
-                    },
-                    "difflet": {
-                      "version": "0.2.6",
-                      "dependencies": {
-                        "traverse": {
-                          "version": "0.6.6"
-                        },
-                        "charm": {
-                          "version": "0.1.2"
-                        },
-                        "deep-is": {
-                          "version": "0.1.3"
-                        }
-                      }
-                    },
-                    "deep-equal": {
-                      "version": "0.0.0"
-                    },
-                    "buffer-equal": {
-                      "version": "0.0.1"
-                    },
-                    "tap-consumer": {
-                      "version": "0.0.1",
-                      "dependencies": {
-                        "tap-results": {
-                          "version": "0.0.2"
-                        }
-                      }
-                    }
-                  }
-                },
-                "base64url": {
-                  "version": "0.0.3"
-                }
-              }
-            },
-            "request": {
-              "version": "2.55.0",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "caseless": {
-                  "version": "0.9.0"
-                },
-                "forever-agent": {
-                  "version": "0.6.1"
-                },
-                "form-data": {
-                  "version": "0.2.0"
-                },
-                "json-stringify-safe": {
-                  "version": "5.0.0"
-                },
-                "mime-types": {
-                  "version": "2.0.11",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.9.1"
-                    }
-                  }
-                },
-                "qs": {
-                  "version": "2.4.1"
-                },
-                "tunnel-agent": {
-                  "version": "0.4.0"
-                },
-                "tough-cookie": {
-                  "version": "1.1.0"
-                },
-                "http-signature": {
-                  "version": "0.10.1",
-                  "dependencies": {
-                    "assert-plus": {
-                      "version": "0.1.5"
-                    },
-                    "asn1": {
-                      "version": "0.1.11"
-                    },
-                    "ctype": {
-                      "version": "0.5.3"
-                    }
-                  }
-                },
-                "oauth-sign": {
-                  "version": "0.6.0"
-                },
-                "hawk": {
-                  "version": "2.3.1",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "2.13.0"
-                    },
-                    "boom": {
-                      "version": "2.7.1"
-                    },
-                    "cryptiles": {
-                      "version": "2.0.4"
-                    },
-                    "sntp": {
-                      "version": "1.0.9"
-                    }
-                  }
-                },
-                "aws-sign2": {
-                  "version": "0.5.0"
-                },
-                "stringstream": {
-                  "version": "0.0.4"
-                },
-                "combined-stream": {
-                  "version": "0.0.7",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "0.0.5"
-                    }
-                  }
-                },
-                "isstream": {
-                  "version": "0.1.2"
-                },
-                "har-validator": {
-                  "version": "1.7.0",
-                  "dependencies": {
-                    "bluebird": {
-                      "version": "2.9.25"
-                    },
-                    "chalk": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "ansi-styles": {
-                          "version": "2.0.1"
-                        },
-                        "escape-string-regexp": {
-                          "version": "1.0.3"
-                        },
-                        "has-ansi": {
-                          "version": "1.0.3",
-                          "dependencies": {
-                            "ansi-regex": {
-                              "version": "1.1.1"
-                            },
-                            "get-stdin": {
-                              "version": "4.0.1"
-                            }
-                          }
-                        },
-                        "supports-color": {
-                          "version": "1.3.1"
-                        }
-                      }
-                    },
-                    "commander": {
-                      "version": "2.8.1",
-                      "dependencies": {
-                        "graceful-readlink": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "is-my-json-valid": {
-                      "version": "2.10.1",
-                      "dependencies": {
-                        "generate-function": {
-                          "version": "2.0.0"
-                        },
-                        "generate-object-property": {
-                          "version": "1.1.1",
-                          "dependencies": {
-                            "is-property": {
-                              "version": "1.0.2"
-                            }
-                          }
-                        },
-                        "jsonpointer": {
-                          "version": "1.1.0"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "request": {
-          "version": "2.51.0",
-          "dependencies": {
-            "bl": {
-              "version": "0.9.4",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "caseless": {
-              "version": "0.8.0"
-            },
-            "forever-agent": {
-              "version": "0.5.2"
-            },
-            "form-data": {
-              "version": "0.2.0",
-              "dependencies": {
-                "mime-types": {
-                  "version": "2.0.11",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.9.1"
-                    }
-                  }
-                }
-              }
-            },
-            "json-stringify-safe": {
-              "version": "5.0.0"
-            },
-            "mime-types": {
-              "version": "1.0.2"
-            },
-            "qs": {
-              "version": "2.3.3"
-            },
-            "tunnel-agent": {
-              "version": "0.4.0"
-            },
-            "tough-cookie": {
-              "version": "1.1.0"
-            },
-            "http-signature": {
-              "version": "0.10.1",
-              "dependencies": {
-                "assert-plus": {
-                  "version": "0.1.5"
-                },
-                "asn1": {
-                  "version": "0.1.11"
-                },
-                "ctype": {
-                  "version": "0.5.3"
-                }
-              }
-            },
-            "oauth-sign": {
-              "version": "0.5.0"
-            },
-            "hawk": {
-              "version": "1.1.1",
-              "dependencies": {
-                "hoek": {
-                  "version": "0.9.1"
-                },
-                "boom": {
-                  "version": "0.4.2"
-                },
-                "cryptiles": {
-                  "version": "0.2.2"
-                },
-                "sntp": {
-                  "version": "0.2.4"
-                }
-              }
-            },
-            "aws-sign2": {
-              "version": "0.5.0"
-            },
-            "stringstream": {
-              "version": "0.0.4"
-            },
-            "combined-stream": {
-              "version": "0.0.7",
-              "dependencies": {
-                "delayed-stream": {
-                  "version": "0.0.5"
-                }
-              }
-            }
-          }
-        },
-        "string-template": {
-          "version": "0.2.1"
-        }
-      }
-    },
-    "gulp": {
-      "version": "3.8.11",
-      "dependencies": {
-        "archy": {
-          "version": "1.0.0"
-        },
-        "chalk": {
-          "version": "0.5.1",
-          "dependencies": {
-            "ansi-styles": {
-              "version": "1.1.0"
-            },
-            "escape-string-regexp": {
-              "version": "1.0.3"
-            },
-            "has-ansi": {
-              "version": "0.1.0",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "0.2.1"
-                }
-              }
-            },
-            "strip-ansi": {
-              "version": "0.3.0",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "0.2.1"
-                }
-              }
-            },
-            "supports-color": {
-              "version": "0.2.0"
-            }
-          }
-        },
-        "deprecated": {
-          "version": "0.0.1"
-        },
-        "gulp-util": {
-          "version": "3.0.4",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.0.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            }
-          }
-        },
-        "interpret": {
-          "version": "0.3.10"
-        },
-        "liftoff": {
-          "version": "2.0.3",
-          "dependencies": {
-            "extend": {
-              "version": "2.0.1"
-            },
-            "findup-sync": {
-              "version": "0.2.1",
-              "dependencies": {
-                "glob": {
-                  "version": "4.3.5",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "once": {
-                      "version": "1.3.2",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "flagged-respawn": {
-              "version": "0.3.1"
-            },
-            "resolve": {
-              "version": "1.1.6"
-            }
-          }
-        },
-        "orchestrator": {
-          "version": "0.3.7",
-          "dependencies": {
-            "end-of-stream": {
-              "version": "0.1.5",
-              "dependencies": {
-                "once": {
-                  "version": "1.3.2",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "sequencify": {
-              "version": "0.0.7"
-            },
-            "stream-consume": {
-              "version": "0.1.0"
-            }
-          }
-        },
-        "pretty-hrtime": {
-          "version": "0.2.2"
-        },
-        "tildify": {
-          "version": "1.0.0",
-          "dependencies": {
-            "user-home": {
-              "version": "1.1.1"
-            }
-          }
-        },
-        "v8flags": {
-          "version": "2.0.5",
-          "dependencies": {
-            "user-home": {
-              "version": "1.1.1"
-            }
-          }
-        },
-        "vinyl-fs": {
-          "version": "0.3.13",
-          "dependencies": {
-            "defaults": {
-              "version": "1.0.2",
-              "dependencies": {
-                "clone": {
-                  "version": "0.1.19"
-                }
-              }
-            },
-            "glob-stream": {
-              "version": "3.1.18",
-              "dependencies": {
-                "ordered-read-streams": {
-                  "version": "0.1.0"
-                },
-                "glob2base": {
-                  "version": "0.0.12",
-                  "dependencies": {
-                    "find-index": {
-                      "version": "0.1.1"
-                    }
-                  }
-                },
-                "unique-stream": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "glob-watcher": {
-              "version": "0.0.6",
-              "dependencies": {
-                "gaze": {
-                  "version": "0.5.1",
-                  "dependencies": {
-                    "globule": {
-                      "version": "0.1.0",
-                      "dependencies": {
-                        "lodash": {
-                          "version": "1.0.2"
-                        },
-                        "glob": {
-                          "version": "3.1.21",
-                          "dependencies": {
-                            "graceful-fs": {
-                              "version": "1.2.3"
-                            },
-                            "inherits": {
-                              "version": "1.0.0"
-                            }
-                          }
-                        },
-                        "minimatch": {
-                          "version": "0.2.14",
-                          "dependencies": {
-                            "lru-cache": {
-                              "version": "2.6.2"
-                            },
-                            "sigmund": {
-                              "version": "1.0.0"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "graceful-fs": {
-              "version": "3.0.6"
-            },
-            "mkdirp": {
-              "version": "0.5.0",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8"
-                }
-              }
-            },
-            "strip-bom": {
-              "version": "1.0.0",
-              "dependencies": {
-                "first-chunk-stream": {
-                  "version": "1.0.0"
-                },
-                "is-utf8": {
-                  "version": "0.2.0"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-autoprefixer": {
-      "version": "2.2.0",
-      "dependencies": {
-        "autoprefixer-core": {
-          "version": "5.1.11",
-          "dependencies": {
-            "browserslist": {
-              "version": "0.2.0"
-            },
-            "num2fraction": {
-              "version": "1.1.0"
-            },
-            "caniuse-db": {
-              "version": "1.0.30000157"
-            },
-            "postcss": {
-              "version": "4.0.6",
-              "dependencies": {
-                "source-map": {
-                  "version": "0.2.0",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0"
-                    }
-                  }
-                },
-                "js-base64": {
-                  "version": "2.1.8"
-                }
-              }
-            }
-          }
-        },
-        "gulp-util": {
-          "version": "3.0.4",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.0.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            }
-          }
-        },
-        "object-assign": {
-          "version": "2.0.0"
-        },
-        "postcss": {
-          "version": "4.1.9",
-          "dependencies": {
-            "es6-promise": {
-              "version": "2.1.1"
-            },
-            "source-map": {
-              "version": "0.4.2",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0"
-                }
-              }
-            },
-            "js-base64": {
-              "version": "2.1.8"
-            }
-          }
-        },
-        "vinyl-sourcemaps-apply": {
-          "version": "0.1.4",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.43",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-changed": {
-      "version": "1.2.1",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.4",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.0.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            }
-          }
-        }
-      }
-    },
-    "gulp-clang-format": {
-      "version": "1.0.21",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.6",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.1.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.3.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.1.0"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.6.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.9"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.keys": {
-                  "version": "3.1.1",
-                  "dependencies": {
-                    "lodash._getnative": {
-                      "version": "3.9.0"
-                    },
-                    "lodash.isarguments": {
-                      "version": "3.0.3"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.3"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "3.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            },
-            "through2": {
-              "version": "2.0.0",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "2.0.1",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "process-nextick-args": {
-                      "version": "1.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "util-deprecate": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.5.0",
-              "dependencies": {
-                "clone": {
-                  "version": "1.0.2"
-                },
-                "clone-stats": {
-                  "version": "0.0.1"
-                }
-              }
-            }
-          }
-        },
-        "pkginfo": {
-          "version": "0.3.0"
-        },
-        "stream-equal": {
-          "version": "0.1.5",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.0.33",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-concat": {
-      "version": "2.5.2",
-      "dependencies": {
-        "concat-with-sourcemaps": {
-          "version": "1.0.2",
-          "dependencies": {
-            "source-map": {
-              "version": "0.4.2",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0"
-                }
-              }
-            }
-          }
-        },
-        "gulp-util": {
-          "version": "3.0.4",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.0.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            }
-          }
-        }
-      }
-    },
-    "gulp-connect": {
-      "version": "1.0.10",
-      "dependencies": {
-        "gulp-util": {
-          "version": "2.2.20",
-          "dependencies": {
-            "chalk": {
-              "version": "0.5.1",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "minimist": {
-                      "version": "1.1.1"
-                    },
-                    "object-assign": {
-                      "version": "2.0.0"
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reinterpolate": {
-              "version": "2.4.1"
-            },
-            "lodash.template": {
-              "version": "2.4.1",
-              "dependencies": {
-                "lodash.defaults": {
-                  "version": "2.4.1",
-                  "dependencies": {
-                    "lodash._objecttypes": {
-                      "version": "2.4.1"
-                    }
-                  }
-                },
-                "lodash.escape": {
-                  "version": "2.4.1",
-                  "dependencies": {
-                    "lodash._escapehtmlchar": {
-                      "version": "2.4.1",
-                      "dependencies": {
-                        "lodash._htmlescapes": {
-                          "version": "2.4.1"
-                        }
-                      }
-                    },
-                    "lodash._reunescapedhtml": {
-                      "version": "2.4.1",
-                      "dependencies": {
-                        "lodash._htmlescapes": {
-                          "version": "2.4.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash._escapestringchar": {
-                  "version": "2.4.1"
-                },
-                "lodash.keys": {
-                  "version": "2.4.1",
-                  "dependencies": {
-                    "lodash._isnative": {
-                      "version": "2.4.1"
-                    },
-                    "lodash.isobject": {
-                      "version": "2.4.1",
-                      "dependencies": {
-                        "lodash._objecttypes": {
-                          "version": "2.4.1"
-                        }
-                      }
-                    },
-                    "lodash._shimkeys": {
-                      "version": "2.4.1",
-                      "dependencies": {
-                        "lodash._objecttypes": {
-                          "version": "2.4.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash.templatesettings": {
-                  "version": "2.4.1"
-                },
-                "lodash.values": {
-                  "version": "2.4.1"
-                }
-              }
-            },
-            "minimist": {
-              "version": "0.2.0"
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "through2": {
-              "version": "0.5.1",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "xtend": {
-                  "version": "3.0.0"
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.2.3",
-              "dependencies": {
-                "clone-stats": {
-                  "version": "0.0.1"
-                }
-              }
-            }
-          }
-        },
-        "event-stream": {
-          "version": "3.1.7",
-          "dependencies": {
-            "through": {
-              "version": "2.3.7"
-            },
-            "duplexer": {
-              "version": "0.1.1"
-            },
-            "from": {
-              "version": "0.1.3"
-            },
-            "map-stream": {
-              "version": "0.1.0"
-            },
-            "pause-stream": {
-              "version": "0.0.11"
-            },
-            "split": {
-              "version": "0.2.10"
-            },
-            "stream-combiner": {
-              "version": "0.0.4"
-            }
-          }
-        },
-        "connect-livereload": {
-          "version": "0.3.2"
-        },
-        "open": {
-          "version": "0.0.4"
-        },
-        "tiny-lr": {
-          "version": "0.0.5",
-          "dependencies": {
-            "qs": {
-              "version": "0.5.6"
-            },
-            "faye-websocket": {
-              "version": "0.4.4"
-            },
-            "noptify": {
-              "version": "0.0.3",
-              "dependencies": {
-                "nopt": {
-                  "version": "2.0.0",
-                  "dependencies": {
-                    "abbrev": {
-                      "version": "1.0.5"
-                    }
-                  }
-                }
-              }
-            },
-            "debug": {
-              "version": "0.7.4"
-            }
-          }
-        },
-        "connect": {
-          "version": "2.14.5",
-          "dependencies": {
-            "basic-auth-connect": {
-              "version": "1.0.0"
-            },
-            "cookie-parser": {
-              "version": "1.0.1",
-              "dependencies": {
-                "cookie": {
-                  "version": "0.1.0"
-                }
-              }
-            },
-            "cookie-signature": {
-              "version": "1.0.3"
-            },
-            "compression": {
-              "version": "1.0.0",
-              "dependencies": {
-                "bytes": {
-                  "version": "0.2.1"
-                },
-                "negotiator": {
-                  "version": "0.3.0"
-                },
-                "compressible": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "connect-timeout": {
-              "version": "1.0.0"
-            },
-            "csurf": {
-              "version": "1.1.0",
-              "dependencies": {
-                "uid2": {
-                  "version": "0.0.3"
-                },
-                "scmp": {
-                  "version": "0.0.3"
-                }
-              }
-            },
-            "errorhandler": {
-              "version": "1.0.0"
-            },
-            "express-session": {
-              "version": "1.0.2",
-              "dependencies": {
-                "utils-merge": {
-                  "version": "1.0.0"
-                },
-                "cookie": {
-                  "version": "0.1.0"
-                },
-                "uid2": {
-                  "version": "0.0.3"
-                },
-                "buffer-crc32": {
-                  "version": "0.2.1"
-                },
-                "debug": {
-                  "version": "0.7.4"
-                }
-              }
-            },
-            "fresh": {
-              "version": "0.2.2"
-            },
-            "method-override": {
-              "version": "1.0.0",
-              "dependencies": {
-                "methods": {
-                  "version": "1.1.1"
-                }
-              }
-            },
-            "morgan": {
-              "version": "1.0.0",
-              "dependencies": {
-                "bytes": {
-                  "version": "0.2.1"
-                }
-              }
-            },
-            "qs": {
-              "version": "0.6.6"
-            },
-            "raw-body": {
-              "version": "1.1.4"
-            },
-            "response-time": {
-              "version": "1.0.0"
-            },
-            "setimmediate": {
-              "version": "1.0.1"
-            },
-            "serve-index": {
-              "version": "1.0.1",
-              "dependencies": {
-                "batch": {
-                  "version": "0.5.0"
-                },
-                "negotiator": {
-                  "version": "0.4.2"
-                }
-              }
-            },
-            "serve-static": {
-              "version": "1.1.0",
-              "dependencies": {
-                "parseurl": {
-                  "version": "1.0.1"
-                },
-                "send": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "buffer-crc32": {
-                      "version": "0.2.1"
-                    },
-                    "debug": {
-                      "version": "0.8.0"
-                    },
-                    "mime": {
-                      "version": "1.2.11"
-                    },
-                    "range-parser": {
-                      "version": "1.0.2"
-                    }
-                  }
-                }
-              }
-            },
-            "static-favicon": {
-              "version": "1.0.2"
-            },
-            "vhost": {
-              "version": "1.0.0"
-            },
-            "bytes": {
-              "version": "0.3.0"
-            },
-            "pause": {
-              "version": "0.0.1"
-            },
-            "debug": {
-              "version": "0.8.1"
-            },
-            "multiparty": {
-              "version": "2.2.0",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.1.13",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "stream-counter": {
-                  "version": "0.2.0"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-insert": {
-      "version": "0.4.0",
-      "dependencies": {
-        "readable-stream": {
-          "version": "1.0.33",
-          "dependencies": {
-            "core-util-is": {
-              "version": "1.0.1"
-            },
-            "isarray": {
-              "version": "0.0.1"
-            },
-            "string_decoder": {
-              "version": "0.10.31"
-            },
-            "inherits": {
-              "version": "2.0.1"
-            }
-          }
-        },
-        "streamqueue": {
-          "version": "0.0.6"
-        }
-      }
-    },
-    "gulp-load-plugins": {
-      "version": "0.7.1",
-      "dependencies": {
-        "findup-sync": {
-          "version": "0.1.3",
-          "dependencies": {
-            "glob": {
-              "version": "3.2.11",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "minimatch": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "lru-cache": {
-                      "version": "2.6.2"
-                    },
-                    "sigmund": {
-                      "version": "1.0.0"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "multimatch": {
-          "version": "1.0.0",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-union": {
-              "version": "1.0.1",
-              "dependencies": {
-                "array-uniq": {
-                  "version": "1.0.2"
-                }
-              }
-            },
-            "minimatch": {
-              "version": "1.0.0",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.2"
-                },
-                "sigmund": {
-                  "version": "1.0.0"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-modify": {
-      "version": "0.0.5"
-    },
-    "gulp-rename": {
-      "version": "1.2.2"
-    },
-    "gulp-replace": {
-      "version": "0.5.3",
-      "dependencies": {
-        "istextorbinary": {
-          "version": "1.0.2",
-          "dependencies": {
-            "textextensions": {
-              "version": "1.0.1"
-            },
-            "binaryextensions": {
-              "version": "1.0.0"
-            }
-          }
-        },
-        "replacestream": {
-          "version": "2.0.0",
-          "dependencies": {
-            "through": {
-              "version": "2.3.7"
-            }
-          }
-        },
-        "through2": {
-          "version": "0.6.3",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.0.33",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-sass": {
-      "version": "1.3.3",
-      "dependencies": {
-        "clone": {
-          "version": "0.1.19"
-        },
-        "gulp-util": {
-          "version": "3.0.4",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.0.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            }
-          }
-        },
-        "map-stream": {
-          "version": "0.1.0"
-        },
-        "node-sass": {
-          "version": "2.1.1",
-          "dependencies": {
-            "chalk": {
-              "version": "0.5.1",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0"
-                }
-              }
-            },
-            "cross-spawn": {
-              "version": "0.2.9",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.2"
-                }
-              }
-            },
-            "gaze": {
-              "version": "0.5.1",
-              "dependencies": {
-                "globule": {
-                  "version": "0.1.0",
-                  "dependencies": {
-                    "lodash": {
-                      "version": "1.0.2"
-                    },
-                    "glob": {
-                      "version": "3.1.21",
-                      "dependencies": {
-                        "graceful-fs": {
-                          "version": "1.2.3"
-                        },
-                        "inherits": {
-                          "version": "1.0.0"
-                        }
-                      }
-                    },
-                    "minimatch": {
-                      "version": "0.2.14",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.2"
-                        },
-                        "sigmund": {
-                          "version": "1.0.0"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "get-stdin": {
-              "version": "4.0.1"
-            },
-            "meow": {
-              "version": "3.1.0",
-              "dependencies": {
-                "camelcase-keys": {
-                  "version": "1.0.0",
-                  "dependencies": {
-                    "camelcase": {
-                      "version": "1.0.2"
-                    },
-                    "map-obj": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "mkdirp": {
-              "version": "0.5.0",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8"
-                }
-              }
-            },
-            "mocha": {
-              "version": "2.2.4",
-              "dependencies": {
-                "commander": {
-                  "version": "2.3.0"
-                },
-                "debug": {
-                  "version": "2.0.0",
-                  "dependencies": {
-                    "ms": {
-                      "version": "0.6.2"
-                    }
-                  }
-                },
-                "diff": {
-                  "version": "1.0.8"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.2"
-                },
-                "glob": {
-                  "version": "3.2.3",
-                  "dependencies": {
-                    "minimatch": {
-                      "version": "0.2.14",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.2"
-                        },
-                        "sigmund": {
-                          "version": "1.0.0"
-                        }
-                      }
-                    },
-                    "graceful-fs": {
-                      "version": "2.0.3"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "growl": {
-                  "version": "1.8.1"
-                },
-                "jade": {
-                  "version": "0.26.3",
-                  "dependencies": {
-                    "commander": {
-                      "version": "0.6.1"
-                    },
-                    "mkdirp": {
-                      "version": "0.3.0"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.2.1"
-                }
-              }
-            },
-            "nan": {
-              "version": "1.8.4"
-            },
-            "npmconf": {
-              "version": "2.1.1",
-              "dependencies": {
-                "config-chain": {
-                  "version": "1.1.8",
-                  "dependencies": {
-                    "proto-list": {
-                      "version": "1.2.3"
-                    }
-                  }
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "ini": {
-                  "version": "1.3.3"
-                },
-                "nopt": {
-                  "version": "3.0.1",
-                  "dependencies": {
-                    "abbrev": {
-                      "version": "1.0.5"
-                    }
-                  }
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "osenv": {
-                  "version": "0.1.0"
-                },
-                "uid-number": {
-                  "version": "0.0.5"
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            },
-            "request": {
-              "version": "2.55.0",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "caseless": {
-                  "version": "0.9.0"
-                },
-                "forever-agent": {
-                  "version": "0.6.1"
-                },
-                "form-data": {
-                  "version": "0.2.0",
-                  "dependencies": {
-                    "async": {
-                      "version": "0.9.0"
-                    }
-                  }
-                },
-                "json-stringify-safe": {
-                  "version": "5.0.0"
-                },
-                "mime-types": {
-                  "version": "2.0.11",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.9.1"
-                    }
-                  }
-                },
-                "qs": {
-                  "version": "2.4.1"
-                },
-                "tunnel-agent": {
-                  "version": "0.4.0"
-                },
-                "tough-cookie": {
-                  "version": "1.1.0"
-                },
-                "http-signature": {
-                  "version": "0.10.1",
-                  "dependencies": {
-                    "assert-plus": {
-                      "version": "0.1.5"
-                    },
-                    "asn1": {
-                      "version": "0.1.11"
-                    },
-                    "ctype": {
-                      "version": "0.5.3"
-                    }
-                  }
-                },
-                "oauth-sign": {
-                  "version": "0.6.0"
-                },
-                "hawk": {
-                  "version": "2.3.1",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "2.13.0"
-                    },
-                    "boom": {
-                      "version": "2.7.1"
-                    },
-                    "cryptiles": {
-                      "version": "2.0.4"
-                    },
-                    "sntp": {
-                      "version": "1.0.9"
-                    }
-                  }
-                },
-                "aws-sign2": {
-                  "version": "0.5.0"
-                },
-                "stringstream": {
-                  "version": "0.0.4"
-                },
-                "combined-stream": {
-                  "version": "0.0.7",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "0.0.5"
-                    }
-                  }
-                },
-                "isstream": {
-                  "version": "0.1.2"
-                },
-                "har-validator": {
-                  "version": "1.7.0",
-                  "dependencies": {
-                    "bluebird": {
-                      "version": "2.9.25"
-                    },
-                    "chalk": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "ansi-styles": {
-                          "version": "2.0.1"
-                        },
-                        "escape-string-regexp": {
-                          "version": "1.0.3"
-                        },
-                        "has-ansi": {
-                          "version": "1.0.3",
-                          "dependencies": {
-                            "ansi-regex": {
-                              "version": "1.1.1"
-                            }
-                          }
-                        },
-                        "supports-color": {
-                          "version": "1.3.1"
-                        }
-                      }
-                    },
-                    "commander": {
-                      "version": "2.8.1",
-                      "dependencies": {
-                        "graceful-readlink": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "is-my-json-valid": {
-                      "version": "2.10.1",
-                      "dependencies": {
-                        "generate-function": {
-                          "version": "2.0.0"
-                        },
-                        "generate-object-property": {
-                          "version": "1.1.1",
-                          "dependencies": {
-                            "is-property": {
-                              "version": "1.0.2"
-                            }
-                          }
-                        },
-                        "jsonpointer": {
-                          "version": "1.1.0"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "sass-graph": {
-              "version": "1.3.0",
-              "dependencies": {
-                "commander": {
-                  "version": "2.8.1",
-                  "dependencies": {
-                    "graceful-readlink": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "shelljs": {
-              "version": "0.3.0"
-            },
-            "pangyp": {
-              "version": "2.1.0",
-              "dependencies": {
-                "fstream": {
-                  "version": "1.0.4",
-                  "dependencies": {
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "glob": {
-                  "version": "4.3.5",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "once": {
-                      "version": "1.3.2",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.6"
-                },
-                "nopt": {
-                  "version": "3.0.1",
-                  "dependencies": {
-                    "abbrev": {
-                      "version": "1.0.5"
-                    }
-                  }
-                },
-                "npmlog": {
-                  "version": "1.0.0",
-                  "dependencies": {
-                    "ansi": {
-                      "version": "0.3.0"
-                    },
-                    "are-we-there-yet": {
-                      "version": "1.0.4",
-                      "dependencies": {
-                        "delegates": {
-                          "version": "0.1.0"
-                        },
-                        "readable-stream": {
-                          "version": "1.1.13",
-                          "dependencies": {
-                            "core-util-is": {
-                              "version": "1.0.1"
-                            },
-                            "isarray": {
-                              "version": "0.0.1"
-                            },
-                            "string_decoder": {
-                              "version": "0.10.31"
-                            },
-                            "inherits": {
-                              "version": "2.0.1"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "gauge": {
-                      "version": "1.0.2",
-                      "dependencies": {
-                        "has-unicode": {
-                          "version": "1.0.0"
-                        }
-                      }
-                    }
-                  }
-                },
-                "osenv": {
-                  "version": "0.1.0"
-                },
-                "request": {
-                  "version": "2.51.0",
-                  "dependencies": {
-                    "bl": {
-                      "version": "0.9.4",
-                      "dependencies": {
-                        "readable-stream": {
-                          "version": "1.0.33",
-                          "dependencies": {
-                            "core-util-is": {
-                              "version": "1.0.1"
-                            },
-                            "isarray": {
-                              "version": "0.0.1"
-                            },
-                            "string_decoder": {
-                              "version": "0.10.31"
-                            },
-                            "inherits": {
-                              "version": "2.0.1"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "caseless": {
-                      "version": "0.8.0"
-                    },
-                    "forever-agent": {
-                      "version": "0.5.2"
-                    },
-                    "form-data": {
-                      "version": "0.2.0",
-                      "dependencies": {
-                        "async": {
-                          "version": "0.9.0"
-                        },
-                        "mime-types": {
-                          "version": "2.0.11",
-                          "dependencies": {
-                            "mime-db": {
-                              "version": "1.9.1"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "json-stringify-safe": {
-                      "version": "5.0.0"
-                    },
-                    "mime-types": {
-                      "version": "1.0.2"
-                    },
-                    "qs": {
-                      "version": "2.3.3"
-                    },
-                    "tunnel-agent": {
-                      "version": "0.4.0"
-                    },
-                    "tough-cookie": {
-                      "version": "1.1.0"
-                    },
-                    "http-signature": {
-                      "version": "0.10.1",
-                      "dependencies": {
-                        "assert-plus": {
-                          "version": "0.1.5"
-                        },
-                        "asn1": {
-                          "version": "0.1.11"
-                        },
-                        "ctype": {
-                          "version": "0.5.3"
-                        }
-                      }
-                    },
-                    "oauth-sign": {
-                      "version": "0.5.0"
-                    },
-                    "hawk": {
-                      "version": "1.1.1",
-                      "dependencies": {
-                        "hoek": {
-                          "version": "0.9.1"
-                        },
-                        "boom": {
-                          "version": "0.4.2"
-                        },
-                        "cryptiles": {
-                          "version": "0.2.2"
-                        },
-                        "sntp": {
-                          "version": "0.2.4"
-                        }
-                      }
-                    },
-                    "aws-sign2": {
-                      "version": "0.5.0"
-                    },
-                    "stringstream": {
-                      "version": "0.0.4"
-                    },
-                    "combined-stream": {
-                      "version": "0.0.7",
-                      "dependencies": {
-                        "delayed-stream": {
-                          "version": "0.0.5"
-                        }
-                      }
-                    }
-                  }
-                },
-                "rimraf": {
-                  "version": "2.2.8"
-                },
-                "semver": {
-                  "version": "4.2.2"
-                },
-                "tar": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "block-stream": {
-                      "version": "0.0.7"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "vinyl-sourcemaps-apply": {
-          "version": "0.1.4",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.43",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-shell": {
-      "version": "0.2.11",
-      "dependencies": {
-        "async": {
-          "version": "0.9.0"
-        },
-        "gulp-util": {
-          "version": "3.0.4",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.0.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            }
-          }
-        }
-      }
-    },
-    "gulp-sourcemaps": {
-      "version": "1.3.0",
-      "dependencies": {
-        "convert-source-map": {
-          "version": "0.4.1"
-        }
-      }
-    },
-    "gulp-template": {
-      "version": "3.0.0",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.4",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.0.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            }
-          }
-        },
-        "lodash": {
-          "version": "3.8.0"
-        }
-      }
-    },
-    "gulp-traceur": {
-      "version": "0.17.1",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.4",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.0.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            }
-          }
-        },
-        "object-assign": {
-          "version": "2.0.0"
-        },
-        "traceur": {
-          "version": "0.0.89",
-          "dependencies": {
-            "commander": {
-              "version": "2.6.0"
-            },
-            "glob": {
-              "version": "4.3.5",
-              "dependencies": {
-                "inflight": {
-                  "version": "1.0.4",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "rsvp": {
-              "version": "3.0.18"
-            },
-            "semver": {
-              "version": "2.3.2"
-            },
-            "source-map-support": {
-              "version": "0.2.10",
-              "dependencies": {
-                "source-map": {
-                  "version": "0.1.32",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "vinyl-sourcemaps-apply": {
-          "version": "0.1.4",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.43",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-tslint": {
-      "version": "3.1.0-beta",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.6",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.1.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.3.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.1.0"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.6.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.9"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.keys": {
-                  "version": "3.1.1",
-                  "dependencies": {
-                    "lodash._getnative": {
-                      "version": "3.9.0"
-                    },
-                    "lodash.isarguments": {
-                      "version": "3.0.3"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.3"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "3.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            },
-            "through2": {
-              "version": "2.0.0",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "2.0.1",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "process-nextick-args": {
-                      "version": "1.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "util-deprecate": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.5.0",
-              "dependencies": {
-                "clone": {
-                  "version": "1.0.2"
-                },
-                "clone-stats": {
-                  "version": "0.0.1"
-                }
-              }
-            }
-          }
-        },
-        "map-stream": {
-          "version": "0.1.0"
-        },
-        "rcloader": {
-          "version": "0.1.4",
-          "dependencies": {
-            "lodash": {
-              "version": "3.9.3"
-            },
-            "rcfinder": {
-              "version": "0.1.8",
-              "dependencies": {
-                "lodash": {
-                  "version": "2.4.2"
-                }
-              }
-            }
-          }
-        },
-        "through": {
-          "version": "2.3.7"
-        },
-        "tslint": {
-          "version": "2.3.0-beta",
-          "dependencies": {
-            "findup-sync": {
-              "version": "0.1.3",
-              "dependencies": {
-                "glob": {
-                  "version": "3.2.11",
-                  "dependencies": {
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "minimatch": {
-                      "version": "0.3.0",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.4"
-                        },
-                        "sigmund": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "optimist": {
-              "version": "0.6.1",
-              "dependencies": {
-                "wordwrap": {
-                  "version": "0.0.3"
-                },
-                "minimist": {
-                  "version": "0.0.10"
-                }
-              }
-            },
-            "underscore.string": {
-              "version": "2.3.3"
-            }
-          }
-        }
-      }
-    },
-    "gulp-typescript": {
-      "version": "2.6.0",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.4",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.0.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            }
-          }
-        },
-        "source-map": {
-          "version": "0.4.2",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.0"
-            }
-          }
-        },
-        "typescript": {
-          "version": "1.4.1"
-        }
-      }
-    },
-    "gulp-uglify": {
-      "version": "1.2.0",
-      "dependencies": {
-        "deap": {
-          "version": "1.0.0"
-        },
-        "gulp-util": {
-          "version": "3.0.5",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.1.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.1.0"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.6.1",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.9"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.keys": {
-                  "version": "3.1.1",
-                  "dependencies": {
-                    "lodash._getnative": {
-                      "version": "3.9.0"
-                    },
-                    "lodash.isarguments": {
-                      "version": "3.0.3"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.3"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.1.1"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            }
-          }
-        },
-        "uglify-js": {
-          "version": "2.4.19",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10"
-            },
-            "source-map": {
-              "version": "0.1.34",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.1"
-                }
-              }
-            },
-            "yargs": {
-              "version": "3.5.4",
-              "dependencies": {
-                "camelcase": {
-                  "version": "1.1.0"
-                },
-                "decamelize": {
-                  "version": "1.0.0"
-                },
-                "window-size": {
-                  "version": "0.1.0"
-                },
-                "wordwrap": {
-                  "version": "0.0.2"
-                }
-              }
-            },
-            "uglify-to-browserify": {
-              "version": "1.0.2"
-            }
-          }
-        },
-        "vinyl-sourcemaps-apply": {
-          "version": "0.1.4",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.43",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.1"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-webserver": {
-      "version": "0.8.8",
-      "dependencies": {
-        "connect": {
-          "version": "3.3.5",
-          "dependencies": {
-            "debug": {
-              "version": "2.1.3",
-              "dependencies": {
-                "ms": {
-                  "version": "0.7.0"
-                }
-              }
-            },
-            "finalhandler": {
-              "version": "0.3.4",
-              "dependencies": {
-                "escape-html": {
-                  "version": "1.0.1"
-                },
-                "on-finished": {
-                  "version": "2.2.1",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.1.0"
-                    }
-                  }
-                }
-              }
-            },
-            "parseurl": {
-              "version": "1.3.0"
-            },
-            "utils-merge": {
-              "version": "1.0.0"
-            }
-          }
-        },
-        "connect-livereload": {
-          "version": "0.4.1"
-        },
-        "gulp-util": {
-          "version": "2.2.20",
-          "dependencies": {
-            "chalk": {
-              "version": "0.5.1",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "minimist": {
-                      "version": "1.1.1"
-                    },
-                    "object-assign": {
-                      "version": "2.0.0"
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reinterpolate": {
-              "version": "2.4.1"
-            },
-            "lodash.template": {
-              "version": "2.4.1",
-              "dependencies": {
-                "lodash.defaults": {
-                  "version": "2.4.1",
-                  "dependencies": {
-                    "lodash._objecttypes": {
-                      "version": "2.4.1"
-                    }
-                  }
-                },
-                "lodash.escape": {
-                  "version": "2.4.1",
-                  "dependencies": {
-                    "lodash._escapehtmlchar": {
-                      "version": "2.4.1",
-                      "dependencies": {
-                        "lodash._htmlescapes": {
-                          "version": "2.4.1"
-                        }
-                      }
-                    },
-                    "lodash._reunescapedhtml": {
-                      "version": "2.4.1",
-                      "dependencies": {
-                        "lodash._htmlescapes": {
-                          "version": "2.4.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash._escapestringchar": {
-                  "version": "2.4.1"
-                },
-                "lodash.keys": {
-                  "version": "2.4.1",
-                  "dependencies": {
-                    "lodash._isnative": {
-                      "version": "2.4.1"
-                    },
-                    "lodash.isobject": {
-                      "version": "2.4.1",
-                      "dependencies": {
-                        "lodash._objecttypes": {
-                          "version": "2.4.1"
-                        }
-                      }
-                    },
-                    "lodash._shimkeys": {
-                      "version": "2.4.1",
-                      "dependencies": {
-                        "lodash._objecttypes": {
-                          "version": "2.4.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash.templatesettings": {
-                  "version": "2.4.1"
-                },
-                "lodash.values": {
-                  "version": "2.4.1"
-                }
-              }
-            },
-            "minimist": {
-              "version": "0.2.0"
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.2.3",
-              "dependencies": {
-                "clone-stats": {
-                  "version": "0.0.1"
-                }
-              }
-            }
-          }
-        },
-        "node.extend": {
-          "version": "1.1.3",
-          "dependencies": {
-            "is": {
-              "version": "2.1.0"
-            }
-          }
-        },
-        "open": {
-          "version": "0.0.5"
-        },
-        "proxy-middleware": {
-          "version": "0.5.1"
-        },
-        "serve-index": {
-          "version": "1.6.3",
-          "dependencies": {
-            "accepts": {
-              "version": "1.2.6",
-              "dependencies": {
-                "negotiator": {
-                  "version": "0.5.2"
-                }
-              }
-            },
-            "batch": {
-              "version": "0.5.2"
-            },
-            "debug": {
-              "version": "2.1.3",
-              "dependencies": {
-                "ms": {
-                  "version": "0.7.0"
-                }
-              }
-            },
-            "escape-html": {
-              "version": "1.0.1"
-            },
-            "http-errors": {
-              "version": "1.3.1",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "statuses": {
-                  "version": "1.2.1"
-                }
-              }
-            },
-            "mime-types": {
-              "version": "2.0.11",
-              "dependencies": {
-                "mime-db": {
-                  "version": "1.9.1"
-                }
-              }
-            },
-            "parseurl": {
-              "version": "1.3.0"
-            }
-          }
-        },
-        "serve-static": {
-          "version": "1.9.2",
-          "dependencies": {
-            "escape-html": {
-              "version": "1.0.1"
-            },
-            "parseurl": {
-              "version": "1.3.0"
-            },
-            "send": {
-              "version": "0.12.2",
-              "dependencies": {
-                "debug": {
-                  "version": "2.1.3"
-                },
-                "depd": {
-                  "version": "1.0.1"
-                },
-                "destroy": {
-                  "version": "1.0.3"
-                },
-                "etag": {
-                  "version": "1.5.1",
-                  "dependencies": {
-                    "crc": {
-                      "version": "3.2.1"
-                    }
-                  }
-                },
-                "fresh": {
-                  "version": "0.2.4"
-                },
-                "mime": {
-                  "version": "1.3.4"
-                },
-                "ms": {
-                  "version": "0.7.0"
-                },
-                "on-finished": {
-                  "version": "2.2.1",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.1.0"
-                    }
-                  }
-                },
-                "range-parser": {
-                  "version": "1.0.2"
-                }
-              }
-            },
-            "utils-merge": {
-              "version": "1.0.0"
-            }
-          }
-        },
-        "through2": {
-          "version": "0.5.1",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.0.33",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            },
-            "xtend": {
-              "version": "3.0.0"
-            }
-          }
-        },
-        "tiny-lr": {
-          "version": "0.1.4",
-          "dependencies": {
-            "body-parser": {
-              "version": "1.8.4",
-              "dependencies": {
-                "bytes": {
-                  "version": "1.0.0"
-                },
-                "depd": {
-                  "version": "0.4.5"
-                },
-                "iconv-lite": {
-                  "version": "0.4.4"
-                },
-                "media-typer": {
-                  "version": "0.3.0"
-                },
-                "on-finished": {
-                  "version": "2.1.0",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.0.5"
-                    }
-                  }
-                },
-                "qs": {
-                  "version": "2.2.4"
-                },
-                "raw-body": {
-                  "version": "1.3.0"
-                },
-                "type-is": {
-                  "version": "1.5.7",
-                  "dependencies": {
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "debug": {
-              "version": "0.8.1"
-            },
-            "faye-websocket": {
-              "version": "0.7.3",
-              "dependencies": {
-                "websocket-driver": {
-                  "version": "0.5.4",
-                  "dependencies": {
-                    "websocket-extensions": {
-                      "version": "0.1.1"
-                    }
-                  }
-                }
-              }
-            },
-            "parseurl": {
-              "version": "1.3.0"
-            },
-            "qs": {
-              "version": "2.2.5"
-            }
-          }
-        },
-        "watch": {
-          "version": "0.11.0"
-        }
-      }
-    },
-    "html2jade": {
-      "version": "0.8.3",
-      "dependencies": {
-        "commander": {
-          "version": "2.8.1",
-          "dependencies": {
-            "graceful-readlink": {
-              "version": "1.0.1"
-            }
-          }
-        },
-        "he": {
-          "version": "0.4.1"
-        },
-        "jsdom-little": {
-          "version": "0.10.6",
-          "dependencies": {
-            "htmlparser2": {
-              "version": "3.8.2",
-              "dependencies": {
-                "domhandler": {
-                  "version": "2.3.0"
-                },
-                "domutils": {
-                  "version": "1.5.1",
-                  "dependencies": {
-                    "dom-serializer": {
-                      "version": "0.1.0",
-                      "dependencies": {
-                        "domelementtype": {
-                          "version": "1.1.3"
-                        },
-                        "entities": {
-                          "version": "1.1.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "domelementtype": {
-                  "version": "1.3.0"
-                },
-                "readable-stream": {
-                  "version": "1.1.13",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "entities": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "nwmatcher": {
-              "version": "1.3.4"
-            },
-            "cssom": {
-              "version": "0.3.0"
-            },
-            "cssstyle": {
-              "version": "0.2.24"
-            }
-          }
-        }
-      }
-    },
-    "indent-string": {
-      "version": "1.2.1",
-      "dependencies": {
-        "get-stdin": {
-          "version": "4.0.1"
-        },
-        "repeating": {
-          "version": "1.1.2",
-          "dependencies": {
-            "is-finite": {
-              "version": "1.0.0"
-            },
-            "meow": {
-              "version": "3.1.0",
-              "dependencies": {
-                "camelcase-keys": {
-                  "version": "1.0.0",
-                  "dependencies": {
-                    "camelcase": {
-                      "version": "1.0.2"
-                    },
-                    "map-obj": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "object-assign": {
-                  "version": "2.0.0"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "jasmine": {
-      "version": "2.3.1",
-      "dependencies": {
-        "exit": {
-          "version": "0.1.2"
-        },
-        "glob": {
-          "version": "3.2.11",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1"
-            },
-            "minimatch": {
-              "version": "0.3.0",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.4"
-                },
-                "sigmund": {
-                  "version": "1.0.1"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "jasmine-core": {
-      "version": "2.3.4"
-    },
-    "jpm": {
-      "version": "1.0.0",
-      "dependencies": {
-        "commander": {
-          "version": "2.6.0"
-        },
-        "fs-promise": {
-          "version": "0.3.1",
-          "dependencies": {
-            "any-promise": {
-              "version": "0.1.0"
-            }
-          }
-        },
-        "fs-extra": {
-          "version": "0.16.4",
-          "dependencies": {
-            "graceful-fs": {
-              "version": "3.0.8"
-            },
-            "jsonfile": {
-              "version": "2.0.1"
-            },
-            "rimraf": {
-              "version": "2.3.4"
-            }
-          }
-        },
-        "fx-runner": {
-          "version": "0.0.7",
-          "dependencies": {
-            "lodash": {
-              "version": "2.4.1"
-            },
-            "when": {
-              "version": "3.6.4"
-            },
-            "winreg": {
-              "version": "0.0.12"
-            }
-          }
-        },
-        "jpm-core": {
-          "version": "0.0.9"
-        },
-        "jetpack-id": {
-          "version": "0.0.4"
-        },
-        "jetpack-validation": {
-          "version": "0.0.4",
-          "dependencies": {
-            "resolve": {
-              "version": "0.7.4"
-            },
-            "semver": {
-              "version": "2.3.2"
-            }
-          }
-        },
-        "firefox-profile": {
-          "version": "0.3.9",
-          "dependencies": {
-            "adm-zip": {
-              "version": "0.4.7"
-            },
-            "archiver": {
-              "version": "0.14.4",
-              "dependencies": {
-                "buffer-crc32": {
-                  "version": "0.2.5"
-                },
-                "glob": {
-                  "version": "4.3.5",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "once": {
-                      "version": "1.3.2",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash": {
-                  "version": "3.2.0"
-                },
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "tar-stream": {
-                  "version": "1.1.5",
-                  "dependencies": {
-                    "bl": {
-                      "version": "0.9.4"
-                    },
-                    "end-of-stream": {
-                      "version": "1.1.0",
-                      "dependencies": {
-                        "once": {
-                          "version": "1.3.2",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "zip-stream": {
-                  "version": "0.5.2",
-                  "dependencies": {
-                    "compress-commons": {
-                      "version": "0.2.9",
-                      "dependencies": {
-                        "crc32-stream": {
-                          "version": "0.3.4"
-                        },
-                        "node-int64": {
-                          "version": "0.3.3"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "async": {
-              "version": "0.9.2"
-            },
-            "lazystream": {
-              "version": "0.1.0",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "lodash": {
-              "version": "3.5.0"
-            },
-            "wrench": {
-              "version": "1.5.8"
-            },
-            "xml2js": {
-              "version": "0.4.9",
-              "dependencies": {
-                "sax": {
-                  "version": "0.6.1"
-                },
-                "xmlbuilder": {
-                  "version": "2.6.4"
-                }
-              }
-            },
-            "ini": {
-              "version": "1.3.3"
-            }
-          }
-        },
-        "jsontoxml": {
-          "version": "0.0.11"
-        },
-        "lodash": {
-          "version": "3.3.1"
-        },
-        "minimatch": {
-          "version": "2.0.4",
-          "dependencies": {
-            "brace-expansion": {
-              "version": "1.1.0",
-              "dependencies": {
-                "balanced-match": {
-                  "version": "0.2.0"
-                },
-                "concat-map": {
-                  "version": "0.0.1"
-                }
-              }
-            }
-          }
-        },
-        "node-watch": {
-          "version": "0.3.4"
-        },
-        "tmp": {
-          "version": "0.0.25"
-        },
-        "open": {
-          "version": "0.0.5"
-        },
-        "promzard": {
-          "version": "0.3.0"
-        },
-        "read": {
-          "version": "1.0.5",
-          "dependencies": {
-            "mute-stream": {
-              "version": "0.0.5"
-            }
-          }
-        },
-        "semver": {
-          "version": "4.3.3"
-        },
-        "mozilla-version-comparator": {
-          "version": "1.0.2"
-        },
-        "mozilla-toolkit-versioning": {
-          "version": "0.0.2"
-        },
-        "when": {
-          "version": "3.7.2"
-        },
-        "zip-dir": {
-          "version": "1.0.0",
-          "dependencies": {
-            "jszip": {
-              "version": "2.5.0",
-              "dependencies": {
-                "pako": {
-                  "version": "0.2.6"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "js-beautify": {
-      "version": "1.5.5",
-      "dependencies": {
-        "config-chain": {
-          "version": "1.1.8",
-          "dependencies": {
-            "proto-list": {
-              "version": "1.2.3"
-            },
-            "ini": {
-              "version": "1.3.3"
-            }
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.0",
-          "dependencies": {
-            "minimist": {
-              "version": "0.0.8"
-            }
-          }
-        },
-        "nopt": {
-          "version": "3.0.1",
-          "dependencies": {
-            "abbrev": {
-              "version": "1.0.5"
-            }
-          }
-        }
-      }
-    },
-    "js-yaml": {
-      "version": "3.3.0",
-      "dependencies": {
-        "argparse": {
-          "version": "1.0.2",
-          "dependencies": {
-            "lodash": {
-              "version": "3.8.0"
-            }
-          }
-        },
-        "esprima": {
-          "version": "2.2.0"
-        }
-      }
-    },
-    "karma": {
-      "version": "0.12.31",
-      "dependencies": {
-        "di": {
-          "version": "0.0.1"
-        },
-        "socket.io": {
-          "version": "0.9.16",
-          "dependencies": {
-            "socket.io-client": {
-              "version": "0.9.16",
-              "dependencies": {
-                "uglify-js": {
-                  "version": "1.2.5"
-                },
-                "ws": {
-                  "version": "0.4.32",
-                  "dependencies": {
-                    "commander": {
-                      "version": "2.1.0"
-                    },
-                    "nan": {
-                      "version": "1.0.0"
-                    },
-                    "tinycolor": {
-                      "version": "0.0.1"
-                    },
-                    "options": {
-                      "version": "0.0.6"
-                    }
-                  }
-                },
-                "xmlhttprequest": {
-                  "version": "1.4.2"
-                },
-                "active-x-obfuscator": {
-                  "version": "0.0.1",
-                  "dependencies": {
-                    "zeparser": {
-                      "version": "0.0.5"
-                    }
-                  }
-                }
-              }
-            },
-            "policyfile": {
-              "version": "0.0.4"
-            },
-            "base64id": {
-              "version": "0.1.0"
-            },
-            "redis": {
-              "version": "0.7.3"
-            }
-          }
-        },
-        "glob": {
-          "version": "3.2.11",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1"
-            },
-            "minimatch": {
-              "version": "0.3.0",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.2"
-                },
-                "sigmund": {
-                  "version": "1.0.0"
-                }
-              }
-            }
-          }
-        },
-        "minimatch": {
-          "version": "0.2.14",
-          "dependencies": {
-            "lru-cache": {
-              "version": "2.6.2"
-            },
-            "sigmund": {
-              "version": "1.0.0"
-            }
-          }
-        },
-        "http-proxy": {
-          "version": "0.10.4",
-          "dependencies": {
-            "pkginfo": {
-              "version": "0.3.0"
-            },
-            "utile": {
-              "version": "0.2.1",
-              "dependencies": {
-                "async": {
-                  "version": "0.2.10"
-                },
-                "deep-equal": {
-                  "version": "1.0.0"
-                },
-                "i": {
-                  "version": "0.3.3"
-                },
-                "mkdirp": {
-                  "version": "0.5.0",
-                  "dependencies": {
-                    "minimist": {
-                      "version": "0.0.8"
-                    }
-                  }
-                },
-                "ncp": {
-                  "version": "0.4.2"
-                }
-              }
-            }
-          }
-        },
-        "optimist": {
-          "version": "0.6.1",
-          "dependencies": {
-            "wordwrap": {
-              "version": "0.0.3"
-            },
-            "minimist": {
-              "version": "0.0.10"
-            }
-          }
-        },
-        "rimraf": {
-          "version": "2.2.8"
-        },
-        "q": {
-          "version": "0.9.7"
-        },
-        "colors": {
-          "version": "0.6.2"
-        },
-        "mime": {
-          "version": "1.2.11"
-        },
-        "log4js": {
-          "version": "0.6.24",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10"
-            },
-            "readable-stream": {
-              "version": "1.0.33",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            },
-            "underscore": {
-              "version": "1.8.2"
-            }
-          }
-        },
-        "useragent": {
-          "version": "2.0.10",
-          "dependencies": {
-            "lru-cache": {
-              "version": "2.2.4"
-            }
-          }
-        },
-        "graceful-fs": {
-          "version": "2.0.3"
-        },
-        "connect": {
-          "version": "2.26.6",
-          "dependencies": {
-            "basic-auth-connect": {
-              "version": "1.0.0"
-            },
-            "body-parser": {
-              "version": "1.8.4",
-              "dependencies": {
-                "iconv-lite": {
-                  "version": "0.4.4"
-                },
-                "on-finished": {
-                  "version": "2.1.0",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.0.5"
-                    }
-                  }
-                },
-                "raw-body": {
-                  "version": "1.3.0"
-                }
-              }
-            },
-            "bytes": {
-              "version": "1.0.0"
-            },
-            "cookie": {
-              "version": "0.1.2"
-            },
-            "cookie-parser": {
-              "version": "1.3.4",
-              "dependencies": {
-                "cookie-signature": {
-                  "version": "1.0.6"
-                }
-              }
-            },
-            "cookie-signature": {
-              "version": "1.0.5"
-            },
-            "compression": {
-              "version": "1.1.2",
-              "dependencies": {
-                "accepts": {
-                  "version": "1.1.4",
-                  "dependencies": {
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1"
-                        }
-                      }
-                    },
-                    "negotiator": {
-                      "version": "0.4.9"
-                    }
-                  }
-                },
-                "compressible": {
-                  "version": "2.0.2",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.9.1"
-                    }
-                  }
-                },
-                "vary": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "connect-timeout": {
-              "version": "1.3.0",
-              "dependencies": {
-                "ms": {
-                  "version": "0.6.2"
-                }
-              }
-            },
-            "csurf": {
-              "version": "1.6.6",
-              "dependencies": {
-                "csrf": {
-                  "version": "2.0.7",
-                  "dependencies": {
-                    "base64-url": {
-                      "version": "1.2.1"
-                    },
-                    "rndm": {
-                      "version": "1.1.0"
-                    },
-                    "scmp": {
-                      "version": "1.0.0"
-                    },
-                    "uid-safe": {
-                      "version": "1.1.0",
-                      "dependencies": {
-                        "native-or-bluebird": {
-                          "version": "1.1.2"
-                        }
-                      }
-                    }
-                  }
-                },
-                "http-errors": {
-                  "version": "1.2.8",
-                  "dependencies": {
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "statuses": {
-                      "version": "1.2.1"
-                    }
-                  }
-                }
-              }
-            },
-            "debug": {
-              "version": "2.0.0",
-              "dependencies": {
-                "ms": {
-                  "version": "0.6.2"
-                }
-              }
-            },
-            "depd": {
-              "version": "0.4.5"
-            },
-            "errorhandler": {
-              "version": "1.2.4",
-              "dependencies": {
-                "accepts": {
-                  "version": "1.1.4",
-                  "dependencies": {
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1"
-                        }
-                      }
-                    },
-                    "negotiator": {
-                      "version": "0.4.9"
-                    }
-                  }
-                },
-                "escape-html": {
-                  "version": "1.0.1"
-                }
-              }
-            },
-            "express-session": {
-              "version": "1.8.2",
-              "dependencies": {
-                "crc": {
-                  "version": "3.0.0"
-                },
-                "uid-safe": {
-                  "version": "1.0.1",
-                  "dependencies": {
-                    "mz": {
-                      "version": "1.3.0",
-                      "dependencies": {
-                        "native-or-bluebird": {
-                          "version": "1.2.0"
-                        },
-                        "thenify": {
-                          "version": "3.1.0"
-                        },
-                        "thenify-all": {
-                          "version": "1.6.0"
-                        }
-                      }
-                    },
-                    "base64-url": {
-                      "version": "1.2.1"
-                    }
-                  }
-                },
-                "utils-merge": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "finalhandler": {
-              "version": "0.2.0",
-              "dependencies": {
-                "escape-html": {
-                  "version": "1.0.1"
-                }
-              }
-            },
-            "fresh": {
-              "version": "0.2.4"
-            },
-            "media-typer": {
-              "version": "0.3.0"
-            },
-            "method-override": {
-              "version": "2.2.0",
-              "dependencies": {
-                "methods": {
-                  "version": "1.1.0"
-                },
-                "vary": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "morgan": {
-              "version": "1.3.2",
-              "dependencies": {
-                "basic-auth": {
-                  "version": "1.0.0"
-                },
-                "on-finished": {
-                  "version": "2.1.0",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.0.5"
-                    }
-                  }
-                }
-              }
-            },
-            "multiparty": {
-              "version": "3.3.2",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.1.13",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "stream-counter": {
-                  "version": "0.2.0"
-                }
-              }
-            },
-            "on-headers": {
-              "version": "1.0.0"
-            },
-            "parseurl": {
-              "version": "1.3.0"
-            },
-            "qs": {
-              "version": "2.2.4"
-            },
-            "response-time": {
-              "version": "2.0.1"
-            },
-            "serve-favicon": {
-              "version": "2.1.7",
-              "dependencies": {
-                "etag": {
-                  "version": "1.5.1",
-                  "dependencies": {
-                    "crc": {
-                      "version": "3.2.1"
-                    }
-                  }
-                },
-                "ms": {
-                  "version": "0.6.2"
-                }
-              }
-            },
-            "serve-index": {
-              "version": "1.2.1",
-              "dependencies": {
-                "accepts": {
-                  "version": "1.1.4",
-                  "dependencies": {
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1"
-                        }
-                      }
-                    },
-                    "negotiator": {
-                      "version": "0.4.9"
-                    }
-                  }
-                },
-                "batch": {
-                  "version": "0.5.1"
-                }
-              }
-            },
-            "serve-static": {
-              "version": "1.6.5",
-              "dependencies": {
-                "escape-html": {
-                  "version": "1.0.1"
-                },
-                "send": {
-                  "version": "0.9.3",
-                  "dependencies": {
-                    "destroy": {
-                      "version": "1.0.3"
-                    },
-                    "etag": {
-                      "version": "1.4.0",
-                      "dependencies": {
-                        "crc": {
-                          "version": "3.0.0"
-                        }
-                      }
-                    },
-                    "ms": {
-                      "version": "0.6.2"
-                    },
-                    "on-finished": {
-                      "version": "2.1.0",
-                      "dependencies": {
-                        "ee-first": {
-                          "version": "1.0.5"
-                        }
-                      }
-                    },
-                    "range-parser": {
-                      "version": "1.0.2"
-                    }
-                  }
-                },
-                "utils-merge": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "type-is": {
-              "version": "1.5.7",
-              "dependencies": {
-                "mime-types": {
-                  "version": "2.0.11",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.9.1"
-                    }
-                  }
-                }
-              }
-            },
-            "vhost": {
-              "version": "3.0.0"
-            },
-            "pause": {
-              "version": "0.0.1"
-            }
-          }
-        },
-        "source-map": {
-          "version": "0.1.43",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.0"
-            }
-          }
-        }
-      }
-    },
-    "karma-chrome-launcher": {
-      "version": "0.1.8"
-    },
-    "karma-cli": {
-      "version": "0.0.4",
-      "dependencies": {
-        "resolve": {
-          "version": "0.5.1"
-        }
-      }
-    },
-    "karma-dart": {
-      "version": "0.2.8",
-      "dependencies": {
-        "dart2jsaas": {
-          "version": "0.0.16",
-          "dependencies": {
-            "mkdirp": {
-              "version": "0.3.5"
-            },
-            "q": {
-              "version": "0.9.7"
-            },
-            "q-io": {
-              "version": "1.10.9",
-              "dependencies": {
-                "qs": {
-                  "version": "0.1.0"
-                },
-                "url2": {
-                  "version": "0.0.0"
-                },
-                "mime": {
-                  "version": "1.2.11"
-                },
-                "mimeparse": {
-                  "version": "0.1.4"
-                },
-                "collections": {
-                  "version": "0.2.2",
-                  "dependencies": {
-                    "weak-map": {
-                      "version": "1.0.0"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "karma-jasmine": {
-      "version": "0.3.5"
-    },
-    "karma-sauce-launcher": {
-      "version": "0.2.11",
-      "dependencies": {
-        "wd": {
-          "version": "0.3.12",
-          "dependencies": {
-            "archiver": {
-              "version": "0.14.4",
-              "dependencies": {
-                "async": {
-                  "version": "0.9.2"
-                },
-                "buffer-crc32": {
-                  "version": "0.2.5"
-                },
-                "glob": {
-                  "version": "4.3.5",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "once": {
-                      "version": "1.3.2",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lazystream": {
-                  "version": "0.1.0"
-                },
-                "lodash": {
-                  "version": "3.2.0"
-                },
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "tar-stream": {
-                  "version": "1.1.5",
-                  "dependencies": {
-                    "bl": {
-                      "version": "0.9.4"
-                    },
-                    "end-of-stream": {
-                      "version": "1.1.0",
-                      "dependencies": {
-                        "once": {
-                          "version": "1.3.2",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "zip-stream": {
-                  "version": "0.5.2",
-                  "dependencies": {
-                    "compress-commons": {
-                      "version": "0.2.9",
-                      "dependencies": {
-                        "crc32-stream": {
-                          "version": "0.3.4"
-                        },
-                        "node-int64": {
-                          "version": "0.3.3"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "async": {
-              "version": "1.0.0"
-            },
-            "lodash": {
-              "version": "3.9.3"
-            },
-            "q": {
-              "version": "1.4.1"
-            },
-            "request": {
-              "version": "2.55.0",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "caseless": {
-                  "version": "0.9.0"
-                },
-                "forever-agent": {
-                  "version": "0.6.1"
-                },
-                "form-data": {
-                  "version": "0.2.0",
-                  "dependencies": {
-                    "async": {
-                      "version": "0.9.2"
-                    }
-                  }
-                },
-                "json-stringify-safe": {
-                  "version": "5.0.1"
-                },
-                "mime-types": {
-                  "version": "2.0.13",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.11.0"
-                    }
-                  }
-                },
-                "qs": {
-                  "version": "2.4.2"
-                },
-                "tunnel-agent": {
-                  "version": "0.4.0"
-                },
-                "tough-cookie": {
-                  "version": "1.2.0"
-                },
-                "http-signature": {
-                  "version": "0.10.1",
-                  "dependencies": {
-                    "assert-plus": {
-                      "version": "0.1.5"
-                    },
-                    "asn1": {
-                      "version": "0.1.11"
-                    },
-                    "ctype": {
-                      "version": "0.5.3"
-                    }
-                  }
-                },
-                "oauth-sign": {
-                  "version": "0.6.0"
-                },
-                "hawk": {
-                  "version": "2.3.1",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "2.14.0"
-                    },
-                    "boom": {
-                      "version": "2.7.2"
-                    },
-                    "cryptiles": {
-                      "version": "2.0.4"
-                    },
-                    "sntp": {
-                      "version": "1.0.9"
-                    }
-                  }
-                },
-                "aws-sign2": {
-                  "version": "0.5.0"
-                },
-                "stringstream": {
-                  "version": "0.0.4"
-                },
-                "combined-stream": {
-                  "version": "0.0.7",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "0.0.5"
-                    }
-                  }
-                },
-                "isstream": {
-                  "version": "0.1.2"
-                },
-                "har-validator": {
-                  "version": "1.7.1",
-                  "dependencies": {
-                    "bluebird": {
-                      "version": "2.9.27"
-                    },
-                    "chalk": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "ansi-styles": {
-                          "version": "2.0.1"
-                        },
-                        "escape-string-regexp": {
-                          "version": "1.0.3"
-                        },
-                        "has-ansi": {
-                          "version": "1.0.3",
-                          "dependencies": {
-                            "ansi-regex": {
-                              "version": "1.1.1"
-                            },
-                            "get-stdin": {
-                              "version": "4.0.1"
-                            }
-                          }
-                        },
-                        "supports-color": {
-                          "version": "1.3.1"
-                        }
-                      }
-                    },
-                    "commander": {
-                      "version": "2.8.1",
-                      "dependencies": {
-                        "graceful-readlink": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "is-my-json-valid": {
-                      "version": "2.12.0",
-                      "dependencies": {
-                        "generate-function": {
-                          "version": "2.0.0"
-                        },
-                        "generate-object-property": {
-                          "version": "1.2.0",
-                          "dependencies": {
-                            "is-property": {
-                              "version": "1.0.2"
-                            }
-                          }
-                        },
-                        "jsonpointer": {
-                          "version": "1.1.0"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "underscore.string": {
-              "version": "3.0.3"
-            },
-            "vargs": {
-              "version": "0.1.0"
-            }
-          }
-        },
-        "sauce-connect-launcher": {
-          "version": "0.11.1",
-          "dependencies": {
-            "lodash": {
-              "version": "3.5.0"
-            },
-            "async": {
-              "version": "0.9.0"
-            },
-            "adm-zip": {
-              "version": "0.4.7"
-            },
-            "rimraf": {
-              "version": "2.2.6"
-            }
-          }
-        },
-        "q": {
-          "version": "0.9.7"
-        },
-        "saucelabs": {
-          "version": "0.1.1"
-        }
-      }
-    },
-    "lodash": {
-      "version": "2.4.2"
-    },
-    "madge": {
-      "version": "0.5.0",
-      "dependencies": {
-        "amdetective": {
-          "version": "0.0.2",
-          "dependencies": {
-            "esprima": {
-              "version": "1.2.2"
-            }
-          }
-        },
-        "coffee-script": {
-          "version": "1.3.3"
-        },
-        "colors": {
-          "version": "0.6.0-1"
-        },
-        "commander": {
-          "version": "1.0.0"
-        },
-        "commondir": {
-          "version": "0.0.1"
-        },
-        "detective": {
-          "version": "0.1.1"
-        },
-        "detective-es6": {
-          "version": "1.1.0",
-          "dependencies": {
-            "node-source-walk": {
-              "version": "1.4.2",
-              "dependencies": {
-                "acorn": {
-                  "version": "1.0.3"
-                }
-              }
-            }
-          }
-        },
-        "graphviz": {
-          "version": "0.0.7",
-          "dependencies": {
-            "temp": {
-              "version": "0.4.0"
-            }
-          }
-        },
-        "react-tools": {
-          "version": "0.12.1",
-          "dependencies": {
-            "commoner": {
-              "version": "0.10.1",
-              "dependencies": {
-                "q": {
-                  "version": "1.1.2"
-                },
-                "recast": {
-                  "version": "0.9.11",
-                  "dependencies": {
-                    "esprima-fb": {
-                      "version": "8001.1001.0-dev-harmony-fb"
-                    },
-                    "source-map": {
-                      "version": "0.1.41",
-                      "dependencies": {
-                        "amdefine": {
-                          "version": "0.1.0"
-                        }
-                      }
-                    },
-                    "ast-types": {
-                      "version": "0.6.7"
-                    }
-                  }
-                },
-                "commander": {
-                  "version": "2.5.1"
-                },
-                "graceful-fs": {
-                  "version": "3.0.5"
-                },
-                "glob": {
-                  "version": "4.2.2",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "minimatch": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.5.0"
-                        },
-                        "sigmund": {
-                          "version": "1.0.0"
-                        }
-                      }
-                    },
-                    "once": {
-                      "version": "1.3.1",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "mkdirp": {
-                  "version": "0.5.0",
-                  "dependencies": {
-                    "minimist": {
-                      "version": "0.0.8"
-                    }
-                  }
-                },
-                "private": {
-                  "version": "0.1.6"
-                },
-                "install": {
-                  "version": "0.1.8"
-                },
-                "iconv-lite": {
-                  "version": "0.4.5"
-                }
-              }
-            },
-            "jstransform": {
-              "version": "8.2.0",
-              "dependencies": {
-                "base62": {
-                  "version": "0.1.1"
-                },
-                "esprima-fb": {
-                  "version": "8001.1001.0-dev-harmony-fb"
-                },
-                "source-map": {
-                  "version": "0.1.31",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "resolve": {
-          "version": "0.2.3"
-        },
-        "uglify-js": {
-          "version": "1.2.6"
-        },
-        "walkdir": {
-          "version": "0.0.5"
-        }
-      }
-    },
-    "marked": {
-      "version": "0.3.3"
-    },
-    "merge": {
-      "version": "1.2.0"
-    },
-    "merge2": {
-      "version": "0.3.5"
-    },
-    "minimatch": {
-      "version": "2.0.7",
-      "dependencies": {
-        "brace-expansion": {
-          "version": "1.1.0",
-          "dependencies": {
-            "balanced-match": {
-              "version": "0.2.0"
-            },
-            "concat-map": {
-              "version": "0.0.1"
-            }
-          }
-        }
-      }
-    },
-    "minimist": {
-      "version": "1.1.1"
-    },
-    "mock-fs": {
-      "version": "2.6.0",
-      "dependencies": {
-        "rewire": {
-          "version": "2.0.1"
-        }
-      }
-    },
-    "node-html-encoder": {
-      "version": "0.0.2"
-    },
-    "node-uuid": {
-      "version": "1.4.3"
-    },
-    "parse5": {
-      "version": "1.3.2"
-    },
-    "protractor": {
-      "version": "2.1.0",
-      "dependencies": {
-        "request": {
-          "version": "2.36.0",
-          "dependencies": {
-            "qs": {
-              "version": "0.6.6"
-            },
-            "json-stringify-safe": {
-              "version": "5.0.1"
-            },
-            "mime": {
-              "version": "1.2.11"
-            },
-            "forever-agent": {
-              "version": "0.5.2"
-            },
-            "tough-cookie": {
-              "version": "1.1.0"
-            },
-            "form-data": {
-              "version": "0.1.4",
-              "dependencies": {
-                "combined-stream": {
-                  "version": "0.0.7",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "0.0.5"
-                    }
-                  }
-                },
-                "async": {
-                  "version": "0.9.2"
-                }
-              }
-            },
-            "tunnel-agent": {
-              "version": "0.4.0"
-            },
-            "http-signature": {
-              "version": "0.10.1",
-              "dependencies": {
-                "assert-plus": {
-                  "version": "0.1.5"
-                },
-                "asn1": {
-                  "version": "0.1.11"
-                },
-                "ctype": {
-                  "version": "0.5.3"
-                }
-              }
-            },
-            "oauth-sign": {
-              "version": "0.3.0"
-            },
-            "hawk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "hoek": {
-                  "version": "0.9.1"
-                },
-                "boom": {
-                  "version": "0.4.2"
-                },
-                "cryptiles": {
-                  "version": "0.2.2"
-                },
-                "sntp": {
-                  "version": "0.2.4"
-                }
-              }
-            },
-            "aws-sign2": {
-              "version": "0.5.0"
-            }
-          }
-        },
-        "minijasminenode": {
-          "version": "1.1.1"
-        },
-        "jasminewd": {
-          "version": "1.1.0"
-        },
-        "jasminewd2": {
-          "version": "0.0.5"
-        },
-        "saucelabs": {
-          "version": "0.1.1"
-        },
-        "glob": {
-          "version": "3.2.11",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1"
-            },
-            "minimatch": {
-              "version": "0.3.0",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.4"
-                },
-                "sigmund": {
-                  "version": "1.0.1"
-                }
-              }
-            }
-          }
-        },
-        "adm-zip": {
-          "version": "0.4.4"
-        },
-        "optimist": {
-          "version": "0.6.1",
-          "dependencies": {
-            "wordwrap": {
-              "version": "0.0.3"
-            },
-            "minimist": {
-              "version": "0.0.10"
-            }
-          }
-        },
-        "q": {
-          "version": "1.0.0"
-        },
-        "source-map-support": {
-          "version": "0.2.10",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.32",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0"
-                }
-              }
-            }
-          }
-        },
-        "html-entities": {
-          "version": "1.1.2"
-        },
-        "accessibility-developer-tools": {
-          "version": "2.6.0"
-        }
-      }
-    },
-    "q": {
-      "version": "1.3.0"
-    },
-    "react": {
-      "version": "0.13.2",
-      "dependencies": {
-        "envify": {
-          "version": "3.4.0",
-          "dependencies": {
-            "through": {
-              "version": "2.3.7"
-            },
-            "jstransform": {
-              "version": "10.1.0",
-              "dependencies": {
-                "base62": {
-                  "version": "0.1.1"
-                },
-                "esprima-fb": {
-                  "version": "13001.1001.0-dev-harmony-fb"
-                },
-                "source-map": {
-                  "version": "0.1.31",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "reflect-metadata": {
-      "version": "0.1.0"
-    },
-    "rewire": {
-      "version": "2.3.3"
-    },
-    "run-sequence": {
-      "version": "1.1.0",
-      "dependencies": {
-        "chalk": {
-          "version": "1.0.0",
-          "dependencies": {
-            "ansi-styles": {
-              "version": "2.0.1"
-            },
-            "escape-string-regexp": {
-              "version": "1.0.3"
-            },
-            "has-ansi": {
-              "version": "1.0.3",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "1.1.1"
-                },
-                "get-stdin": {
-                  "version": "4.0.1"
-                }
-              }
-            },
-            "supports-color": {
-              "version": "1.3.1"
-            }
-          }
-        }
-      }
-    },
-    "rx": {
-      "version": "2.5.1"
-    },
-    "selenium-webdriver": {
-      "version": "2.45.1",
-      "dependencies": {
-        "adm-zip": {
-          "version": "0.4.4"
-        },
-        "rimraf": {
-          "version": "2.3.3"
-        },
-        "tmp": {
-          "version": "0.0.24"
-        },
-        "ws": {
-          "version": "0.7.1",
-          "dependencies": {
-            "options": {
-              "version": "0.0.6"
-            },
-            "ultron": {
-              "version": "1.0.1"
-            }
-          }
-        },
-        "xml2js": {
-          "version": "0.4.4",
-          "dependencies": {
-            "sax": {
-              "version": "0.6.1"
-            },
-            "xmlbuilder": {
-              "version": "2.6.2",
-              "dependencies": {
-                "lodash": {
-                  "version": "3.5.0"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "semver": {
-      "version": "4.3.4"
-    },
-    "shelljs": {
-      "version": "0.5.0"
-    },
-    "sorted-object": {
-      "version": "1.0.0"
-    },
-    "source-map": {
-      "version": "0.3.0",
-      "dependencies": {
-        "amdefine": {
-          "version": "0.1.0"
-        }
-      }
-    },
-    "sprintf-js": {
-      "version": "1.0.2"
-    },
-    "string": {
-      "version": "3.1.1"
-    },
-    "strip-ansi": {
-      "version": "2.0.1",
-      "dependencies": {
-        "ansi-regex": {
-          "version": "1.1.1"
-        }
-      }
-    },
-    "symlink-or-copy": {
-      "version": "1.0.1",
-      "dependencies": {
-        "copy-dereference": {
-          "version": "1.0.0"
-        }
-      }
-    },
-    "systemjs": {
-      "version": "0.9.3"
-    },
-    "systemjs-builder": {
-      "version": "0.10.6",
-      "dependencies": {
-        "glob": {
-          "version": "5.0.5",
-          "dependencies": {
-            "inflight": {
-              "version": "1.0.4",
-              "dependencies": {
-                "wrappy": {
-                  "version": "1.0.1"
-                }
-              }
-            },
-            "inherits": {
-              "version": "2.0.1"
-            },
-            "once": {
-              "version": "1.3.2",
-              "dependencies": {
-                "wrappy": {
-                  "version": "1.0.1"
-                }
-              }
-            },
-            "path-is-absolute": {
-              "version": "1.0.0"
-            }
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.0",
-          "dependencies": {
-            "minimist": {
-              "version": "0.0.8"
-            }
-          }
-        },
-        "rsvp": {
-          "version": "3.0.18"
-        },
-        "source-map": {
-          "version": "0.4.2",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.0"
-            }
-          }
-        },
-        "systemjs": {
-          "version": "0.16.11",
-          "dependencies": {
-            "es6-module-loader": {
-              "version": "0.16.6",
-              "dependencies": {
-                "when": {
-                  "version": "3.7.3"
-                }
-              }
-            }
-          }
-        },
-        "traceur": {
-          "version": "0.0.88",
-          "dependencies": {
-            "commander": {
-              "version": "2.6.0"
-            },
-            "glob": {
-              "version": "4.3.5",
-              "dependencies": {
-                "inflight": {
-                  "version": "1.0.4",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "semver": {
-              "version": "2.3.2"
-            },
-            "source-map-support": {
-              "version": "0.2.10",
-              "dependencies": {
-                "source-map": {
-                  "version": "0.1.32",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "uglify-js": {
-          "version": "2.4.21",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10"
-            },
-            "source-map": {
-              "version": "0.1.34",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0"
-                }
-              }
-            },
-            "uglify-to-browserify": {
-              "version": "1.0.2"
-            },
-            "yargs": {
-              "version": "3.5.4",
-              "dependencies": {
-                "camelcase": {
-                  "version": "1.0.2"
-                },
-                "decamelize": {
-                  "version": "1.0.0"
-                },
-                "window-size": {
-                  "version": "0.1.0"
-                },
-                "wordwrap": {
-                  "version": "0.0.2"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "temp": {
-      "version": "0.8.1",
-      "dependencies": {
-        "rimraf": {
-          "version": "2.2.8"
-        }
-      }
-    },
-    "ternary-stream": {
-      "version": "1.2.3",
-      "dependencies": {
-        "duplexer2": {
-          "version": "0.0.2",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.1.13",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            }
-          }
-        },
-        "merge-stream": {
-          "version": "0.1.7"
-        },
-        "fork-stream": {
-          "version": "0.0.4"
-        }
-      }
-    },
-    "through2": {
-      "version": "0.6.5",
-      "dependencies": {
-        "readable-stream": {
-          "version": "1.0.33",
-          "dependencies": {
-            "core-util-is": {
-              "version": "1.0.1"
-            },
-            "isarray": {
-              "version": "0.0.1"
-            },
-            "string_decoder": {
-              "version": "0.10.31"
-            },
-            "inherits": {
-              "version": "2.0.1"
-            }
-          }
-        }
-      }
-    },
-    "traceur": {
-      "version": "0.0.87",
-      "dependencies": {
-        "commander": {
-          "version": "2.6.0"
-        },
-        "glob": {
-          "version": "4.3.5",
-          "dependencies": {
-            "inflight": {
-              "version": "1.0.4",
-              "dependencies": {
-                "wrappy": {
-                  "version": "1.0.1"
-                }
-              }
-            },
-            "inherits": {
-              "version": "2.0.1"
-            },
-            "once": {
-              "version": "1.3.2",
-              "dependencies": {
-                "wrappy": {
-                  "version": "1.0.1"
-                }
-              }
-            }
-          }
-        },
-        "rsvp": {
-          "version": "3.0.18"
-        },
-        "semver": {
-          "version": "2.3.2"
-        },
-        "source-map-support": {
-          "version": "0.2.10",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.32",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "ts2dart": {
-      "version": "0.6.6",
-      "dependencies": {
-        "fs-extra": {
-          "version": "0.18.4",
-          "dependencies": {
-            "graceful-fs": {
-              "version": "3.0.8"
-            },
-            "jsonfile": {
-              "version": "2.2.1"
-            },
-            "rimraf": {
-              "version": "2.4.1",
-              "dependencies": {
-                "glob": {
-                  "version": "4.5.3",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "minimatch": {
-                      "version": "2.0.8",
-                      "dependencies": {
-                        "brace-expansion": {
-                          "version": "1.1.0",
-                          "dependencies": {
-                            "balanced-match": {
-                              "version": "0.2.0"
-                            },
-                            "concat-map": {
-                              "version": "0.0.1"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "once": {
-                      "version": "1.3.2",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "minimist": {
-          "version": "1.1.1"
-        },
-        "source-map": {
-          "version": "0.4.2",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.1"
-            }
-          }
-        },
-        "source-map-support": {
-          "version": "0.3.2",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.32",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.1"
-                }
-              }
-            }
-          }
-        },
-        "typescript": {
-          "version": "1.5.3",
-          "resolved": "git://github.com/microsoft/TypeScript.git#331b63df7d05c9476b6b9cae97a7a158eba303ca"
-        },
-        "merge2": {
-          "version": "0.3.6"
-        },
-        "clang-format": {
-          "version": "1.0.25",
-          "dependencies": {
-            "resolve": {
-              "version": "1.1.6"
-            }
-          }
-        },
-        "temp": {
-          "version": "0.8.3",
-          "dependencies": {
-            "os-tmpdir": {
-              "version": "1.0.1"
-            },
-            "rimraf": {
-              "version": "2.2.8"
-            }
-          }
-        },
-        "chai": {
-          "version": "2.3.0",
-          "dependencies": {
-            "assertion-error": {
-              "version": "1.0.0"
-            },
-            "deep-eql": {
-              "version": "0.1.3",
-              "dependencies": {
-                "type-detect": {
-                  "version": "0.1.1"
-                }
-              }
-            }
-          }
-        },
-        "which": {
-          "version": "1.1.1",
-          "dependencies": {
-            "is-absolute": {
-              "version": "0.1.7",
-              "dependencies": {
-                "is-relative": {
-                  "version": "0.1.3"
-                }
-              }
-            }
-          }
-        },
-        "gulp-clang-format": {
-          "version": "1.0.21",
-          "dependencies": {
-            "clang-format": {
-              "version": "1.0.25",
-              "dependencies": {
-                "resolve": {
-                  "version": "1.1.6"
-                }
-              }
-            },
-            "pkginfo": {
-              "version": "0.3.0"
-            },
-            "stream-equal": {
-              "version": "0.1.5",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "through2": {
-              "version": "0.6.5",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "xtend": {
-                  "version": "4.0.0"
-                }
-              }
-            }
-          }
-        },
-        "gulp-sourcemaps": {
-          "version": "1.5.2",
-          "dependencies": {
-            "convert-source-map": {
-              "version": "1.1.1"
-            },
-            "graceful-fs": {
-              "version": "3.0.8"
-            },
-            "strip-bom": {
-              "version": "1.0.0",
-              "dependencies": {
-                "first-chunk-stream": {
-                  "version": "1.0.0"
-                },
-                "is-utf8": {
-                  "version": "0.2.0"
-                }
-              }
-            },
-            "through2": {
-              "version": "0.6.5",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "xtend": {
-                  "version": "4.0.0"
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.4.6",
-              "dependencies": {
-                "clone": {
-                  "version": "0.2.0"
-                },
-                "clone-stats": {
-                  "version": "0.0.1"
-                }
-              }
-            }
-          }
-        },
-        "gulp-mocha": {
-          "version": "2.1.2",
-          "dependencies": {
-            "mocha": {
-              "version": "2.2.5",
-              "dependencies": {
-                "commander": {
-                  "version": "2.3.0"
-                },
-                "debug": {
-                  "version": "2.0.0",
-                  "dependencies": {
-                    "ms": {
-                      "version": "0.6.2"
-                    }
-                  }
-                },
-                "diff": {
-                  "version": "1.4.0"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.2"
-                },
-                "glob": {
-                  "version": "3.2.3",
-                  "dependencies": {
-                    "minimatch": {
-                      "version": "0.2.14",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.5"
-                        },
-                        "sigmund": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "graceful-fs": {
-                      "version": "2.0.3"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "growl": {
-                  "version": "1.8.1"
-                },
-                "jade": {
-                  "version": "0.26.3",
-                  "dependencies": {
-                    "commander": {
-                      "version": "0.6.1"
-                    },
-                    "mkdirp": {
-                      "version": "0.3.0"
-                    }
-                  }
-                },
-                "mkdirp": {
-                  "version": "0.5.0",
-                  "dependencies": {
-                    "minimist": {
-                      "version": "0.0.8"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.2.1"
-                }
-              }
-            },
-            "plur": {
-              "version": "1.0.0"
-            },
-            "through": {
-              "version": "2.3.7"
-            }
-          }
-        },
-        "gulp": {
-          "version": "3.9.0",
-          "dependencies": {
-            "archy": {
-              "version": "1.0.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "2.0.1",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "deprecated": {
-              "version": "0.0.1"
-            },
-            "interpret": {
-              "version": "0.6.2"
-            },
-            "liftoff": {
-              "version": "2.1.0",
-              "dependencies": {
-                "extend": {
-                  "version": "2.0.1"
-                },
-                "findup-sync": {
-                  "version": "0.2.1",
-                  "dependencies": {
-                    "glob": {
-                      "version": "4.3.5",
-                      "dependencies": {
-                        "inflight": {
-                          "version": "1.0.4",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1"
-                            }
-                          }
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        },
-                        "minimatch": {
-                          "version": "2.0.8",
-                          "dependencies": {
-                            "brace-expansion": {
-                              "version": "1.1.0",
-                              "dependencies": {
-                                "balanced-match": {
-                                  "version": "0.2.0"
-                                },
-                                "concat-map": {
-                                  "version": "0.0.1"
-                                }
-                              }
-                            }
-                          }
-                        },
-                        "once": {
-                          "version": "1.3.2",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "flagged-respawn": {
-                  "version": "0.3.1"
-                },
-                "rechoir": {
-                  "version": "0.6.1"
-                },
-                "resolve": {
-                  "version": "1.1.6"
-                }
-              }
-            },
-            "orchestrator": {
-              "version": "0.3.7",
-              "dependencies": {
-                "end-of-stream": {
-                  "version": "0.1.5",
-                  "dependencies": {
-                    "once": {
-                      "version": "1.3.2",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "sequencify": {
-                  "version": "0.0.7"
-                },
-                "stream-consume": {
-                  "version": "0.1.0"
-                }
-              }
-            },
-            "pretty-hrtime": {
-              "version": "1.0.0"
-            },
-            "semver": {
-              "version": "4.3.6"
-            },
-            "tildify": {
-              "version": "1.1.0",
-              "dependencies": {
-                "os-homedir": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "v8flags": {
-              "version": "2.0.9",
-              "dependencies": {
-                "user-home": {
-                  "version": "1.1.1"
-                }
-              }
-            },
-            "vinyl-fs": {
-              "version": "0.3.13",
-              "dependencies": {
-                "defaults": {
-                  "version": "1.0.2",
-                  "dependencies": {
-                    "clone": {
-                      "version": "0.1.19"
-                    }
-                  }
-                },
-                "glob-stream": {
-                  "version": "3.1.18",
-                  "dependencies": {
-                    "glob": {
-                      "version": "4.5.3",
-                      "dependencies": {
-                        "inflight": {
-                          "version": "1.0.4",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1"
-                            }
-                          }
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        },
-                        "once": {
-                          "version": "1.3.2",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "minimatch": {
-                      "version": "2.0.8",
-                      "dependencies": {
-                        "brace-expansion": {
-                          "version": "1.1.0",
-                          "dependencies": {
-                            "balanced-match": {
-                              "version": "0.2.0"
-                            },
-                            "concat-map": {
-                              "version": "0.0.1"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "ordered-read-streams": {
-                      "version": "0.1.0"
-                    },
-                    "glob2base": {
-                      "version": "0.0.12",
-                      "dependencies": {
-                        "find-index": {
-                          "version": "0.1.1"
-                        }
-                      }
-                    },
-                    "unique-stream": {
-                      "version": "1.0.0"
-                    }
-                  }
-                },
-                "glob-watcher": {
-                  "version": "0.0.6",
-                  "dependencies": {
-                    "gaze": {
-                      "version": "0.5.1",
-                      "dependencies": {
-                        "globule": {
-                          "version": "0.1.0",
-                          "dependencies": {
-                            "lodash": {
-                              "version": "1.0.2"
-                            },
-                            "glob": {
-                              "version": "3.1.21",
-                              "dependencies": {
-                                "graceful-fs": {
-                                  "version": "1.2.3"
-                                },
-                                "inherits": {
-                                  "version": "1.0.0"
-                                }
-                              }
-                            },
-                            "minimatch": {
-                              "version": "0.2.14",
-                              "dependencies": {
-                                "lru-cache": {
-                                  "version": "2.6.5"
-                                },
-                                "sigmund": {
-                                  "version": "1.0.1"
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.8"
-                },
-                "mkdirp": {
-                  "version": "0.5.1",
-                  "dependencies": {
-                    "minimist": {
-                      "version": "0.0.8"
-                    }
-                  }
-                },
-                "strip-bom": {
-                  "version": "1.0.0",
-                  "dependencies": {
-                    "first-chunk-stream": {
-                      "version": "1.0.0"
-                    },
-                    "is-utf8": {
-                      "version": "0.2.0"
-                    }
-                  }
-                },
-                "through2": {
-                  "version": "0.6.5",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    },
-                    "xtend": {
-                      "version": "4.0.0"
-                    }
-                  }
-                },
-                "vinyl": {
-                  "version": "0.4.6",
-                  "dependencies": {
-                    "clone": {
-                      "version": "0.2.0"
-                    },
-                    "clone-stats": {
-                      "version": "0.0.1"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "gulp-util": {
-          "version": "3.0.6",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0"
-            },
-            "array-uniq": {
-              "version": "1.0.2"
-            },
-            "beeper": {
-              "version": "1.1.0"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "2.0.1",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1"
-                },
-                "meow": {
-                  "version": "3.3.0",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.1.0"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "indent-string": {
-                      "version": "1.2.1",
-                      "dependencies": {
-                        "repeating": {
-                          "version": "1.1.3",
-                          "dependencies": {
-                            "is-finite": {
-                              "version": "1.0.1",
-                              "dependencies": {
-                                "number-is-nan": {
-                                  "version": "1.0.0"
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0"
-            },
-            "lodash.template": {
-              "version": "3.6.2",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.1"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.9"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0"
-                },
-                "lodash.keys": {
-                  "version": "3.1.2",
-                  "dependencies": {
-                    "lodash._getnative": {
-                      "version": "3.9.1"
-                    },
-                    "lodash.isarguments": {
-                      "version": "3.0.4"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.4"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "3.0.0"
-            },
-            "replace-ext": {
-              "version": "0.0.1"
-            },
-            "through2": {
-              "version": "2.0.0",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "2.0.1",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "process-nextick-args": {
-                      "version": "1.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "util-deprecate": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "xtend": {
-                  "version": "4.0.0"
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.5.0",
-              "dependencies": {
-                "clone": {
-                  "version": "1.0.2"
-                },
-                "clone-stats": {
-                  "version": "0.0.1"
-                }
-              }
-            }
-          }
-        },
-        "gulp-typescript": {
-          "version": "2.7.8",
-          "dependencies": {
-            "through2": {
-              "version": "0.6.5",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                },
-                "xtend": {
-                  "version": "4.0.0"
-                }
-              }
-            },
-            "typescript": {
-              "version": "1.4.1"
-            },
-            "vinyl-fs": {
-              "version": "1.0.0",
-              "dependencies": {
-                "duplexify": {
-                  "version": "3.4.2",
-                  "dependencies": {
-                    "end-of-stream": {
-                      "version": "1.0.0",
-                      "dependencies": {
-                        "once": {
-                          "version": "1.3.2",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "readable-stream": {
-                      "version": "2.0.1",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1"
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        },
-                        "isarray": {
-                          "version": "0.0.1"
-                        },
-                        "process-nextick-args": {
-                          "version": "1.0.1"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31"
-                        },
-                        "util-deprecate": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "glob-stream": {
-                  "version": "4.1.1",
-                  "dependencies": {
-                    "glob": {
-                      "version": "4.5.3",
-                      "dependencies": {
-                        "inflight": {
-                          "version": "1.0.4",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1"
-                            }
-                          }
-                        },
-                        "inherits": {
-                          "version": "2.0.1"
-                        },
-                        "once": {
-                          "version": "1.3.2",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "minimatch": {
-                      "version": "2.0.8",
-                      "dependencies": {
-                        "brace-expansion": {
-                          "version": "1.1.0",
-                          "dependencies": {
-                            "balanced-match": {
-                              "version": "0.2.0"
-                            },
-                            "concat-map": {
-                              "version": "0.0.1"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "ordered-read-streams": {
-                      "version": "0.1.0"
-                    },
-                    "glob2base": {
-                      "version": "0.0.12",
-                      "dependencies": {
-                        "find-index": {
-                          "version": "0.1.1"
-                        }
-                      }
-                    },
-                    "unique-stream": {
-                      "version": "2.2.0",
-                      "dependencies": {
-                        "through2-filter": {
-                          "version": "2.0.0",
-                          "dependencies": {
-                            "through2": {
-                              "version": "2.0.0",
-                              "dependencies": {
-                                "readable-stream": {
-                                  "version": "2.0.1",
-                                  "dependencies": {
-                                    "core-util-is": {
-                                      "version": "1.0.1"
-                                    },
-                                    "inherits": {
-                                      "version": "2.0.1"
-                                    },
-                                    "isarray": {
-                                      "version": "0.0.1"
-                                    },
-                                    "process-nextick-args": {
-                                      "version": "1.0.1"
-                                    },
-                                    "string_decoder": {
-                                      "version": "0.10.31"
-                                    },
-                                    "util-deprecate": {
-                                      "version": "1.0.1"
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            "xtend": {
-                              "version": "4.0.0"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "glob-watcher": {
-                  "version": "0.0.8",
-                  "dependencies": {
-                    "gaze": {
-                      "version": "0.5.1",
-                      "dependencies": {
-                        "globule": {
-                          "version": "0.1.0",
-                          "dependencies": {
-                            "lodash": {
-                              "version": "1.0.2"
-                            },
-                            "glob": {
-                              "version": "3.1.21",
-                              "dependencies": {
-                                "graceful-fs": {
-                                  "version": "1.2.3"
-                                },
-                                "inherits": {
-                                  "version": "1.0.0"
-                                }
-                              }
-                            },
-                            "minimatch": {
-                              "version": "0.2.14",
-                              "dependencies": {
-                                "lru-cache": {
-                                  "version": "2.6.5"
-                                },
-                                "sigmund": {
-                                  "version": "1.0.1"
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.8"
-                },
-                "merge-stream": {
-                  "version": "0.1.8"
-                },
-                "mkdirp": {
-                  "version": "0.5.1",
-                  "dependencies": {
-                    "minimist": {
-                      "version": "0.0.8"
-                    }
-                  }
-                },
-                "object-assign": {
-                  "version": "2.1.1"
-                },
-                "strip-bom": {
-                  "version": "1.0.0",
-                  "dependencies": {
-                    "first-chunk-stream": {
-                      "version": "1.0.0"
-                    },
-                    "is-utf8": {
-                      "version": "0.2.0"
-                    }
-                  }
-                },
-                "vinyl": {
-                  "version": "0.4.6",
-                  "dependencies": {
-                    "clone": {
-                      "version": "0.2.0"
-                    },
-                    "clone-stats": {
-                      "version": "0.0.1"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "tsd": {
-          "version": "0.6.3",
-          "dependencies": {
-            "assertion-error": {
-              "version": "1.0.0"
-            },
-            "bl": {
-              "version": "0.9.4",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1"
-                    },
-                    "isarray": {
-                      "version": "0.0.1"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31"
-                    },
-                    "inherits": {
-                      "version": "2.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "bluebird": {
-              "version": "1.2.4"
-            },
-            "colors": {
-              "version": "1.1.2"
-            },
-            "deep-freeze": {
-              "version": "0.0.1"
-            },
-            "definition-header": {
-              "version": "0.1.0",
-              "dependencies": {
-                "parsimmon": {
-                  "version": "0.5.1",
-                  "dependencies": {
-                    "pjs": {
-                      "version": "5.1.1"
-                    }
-                  }
-                },
-                "xregexp": {
-                  "version": "2.0.0"
-                }
-              }
-            },
-            "detect-indent": {
-              "version": "0.2.0",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "0.1.0"
-                },
-                "minimist": {
-                  "version": "0.1.0"
-                }
-              }
-            },
-            "diff": {
-              "version": "1.4.0"
-            },
-            "event-stream": {
-              "version": "3.1.7",
-              "dependencies": {
-                "through": {
-                  "version": "2.3.7"
-                },
-                "duplexer": {
-                  "version": "0.1.1"
-                },
-                "from": {
-                  "version": "0.1.3"
-                },
-                "map-stream": {
-                  "version": "0.1.0"
-                },
-                "pause-stream": {
-                  "version": "0.0.11"
-                },
-                "split": {
-                  "version": "0.2.10"
-                },
-                "stream-combiner": {
-                  "version": "0.0.4"
-                }
-              }
-            },
-            "exit": {
-              "version": "0.1.2"
-            },
-            "glob": {
-              "version": "4.5.3",
-              "dependencies": {
-                "inflight": {
-                  "version": "1.0.4",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                },
-                "minimatch": {
-                  "version": "2.0.8",
-                  "dependencies": {
-                    "brace-expansion": {
-                      "version": "1.1.0",
-                      "dependencies": {
-                        "balanced-match": {
-                          "version": "0.2.0"
-                        },
-                        "concat-map": {
-                          "version": "0.0.1"
-                        }
-                      }
-                    }
-                  }
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1"
-                    }
-                  }
-                }
-              }
-            },
-            "joi": {
-              "version": "4.9.0",
-              "dependencies": {
-                "hoek": {
-                  "version": "2.14.0"
-                },
-                "topo": {
-                  "version": "1.0.2"
-                },
-                "isemail": {
-                  "version": "1.1.1"
-                },
-                "moment": {
-                  "version": "2.10.3"
-                }
-              }
-            },
-            "joi-assert": {
-              "version": "0.0.3"
-            },
-            "jsesc": {
-              "version": "0.5.0"
-            },
-            "json-pointer": {
-              "version": "0.2.2",
-              "dependencies": {
-                "foreach": {
-                  "version": "2.0.5"
-                }
-              }
-            },
-            "lazy.js": {
-              "version": "0.3.2"
-            },
-            "lru-cache": {
-              "version": "2.5.2"
-            },
-            "minimatch": {
-              "version": "1.0.0",
-              "dependencies": {
-                "sigmund": {
-                  "version": "1.0.1"
-                }
-              }
-            },
-            "ministyle": {
-              "version": "0.1.4"
-            },
-            "minitable": {
-              "version": "0.0.4",
-              "dependencies": {
-                "minichain": {
-                  "version": "0.0.1"
-                }
-              }
-            },
-            "miniwrite": {
-              "version": "0.1.4",
-              "dependencies": {
-                "mkdirp": {
-                  "version": "0.3.5"
-                }
-              }
-            },
-            "mkdirp": {
-              "version": "0.5.1",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8"
-                }
-              }
-            },
-            "open": {
-              "version": "0.0.5"
-            },
-            "request": {
-              "version": "2.58.0",
-              "dependencies": {
-                "caseless": {
-                  "version": "0.10.0"
-                },
-                "extend": {
-                  "version": "2.0.1"
-                },
-                "forever-agent": {
-                  "version": "0.6.1"
-                },
-                "form-data": {
-                  "version": "1.0.0-rc1",
-                  "dependencies": {
-                    "async": {
-                      "version": "1.3.0"
-                    },
-                    "mime-types": {
-                      "version": "2.1.2",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.14.0"
-                        }
-                      }
-                    }
-                  }
-                },
-                "json-stringify-safe": {
-                  "version": "5.0.1"
-                },
-                "mime-types": {
-                  "version": "2.0.14",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.12.0"
-                    }
-                  }
-                },
-                "node-uuid": {
-                  "version": "1.4.3"
-                },
-                "qs": {
-                  "version": "3.1.0"
-                },
-                "tunnel-agent": {
-                  "version": "0.4.0"
-                },
-                "tough-cookie": {
-                  "version": "2.0.0"
-                },
-                "http-signature": {
-                  "version": "0.11.0",
-                  "dependencies": {
-                    "assert-plus": {
-                      "version": "0.1.5"
-                    },
-                    "asn1": {
-                      "version": "0.1.11"
-                    },
-                    "ctype": {
-                      "version": "0.5.3"
-                    }
-                  }
-                },
-                "oauth-sign": {
-                  "version": "0.8.0"
-                },
-                "hawk": {
-                  "version": "2.3.1",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "2.14.0"
-                    },
-                    "boom": {
-                      "version": "2.8.0"
-                    },
-                    "cryptiles": {
-                      "version": "2.0.4"
-                    },
-                    "sntp": {
-                      "version": "1.0.9"
-                    }
-                  }
-                },
-                "aws-sign2": {
-                  "version": "0.5.0"
-                },
-                "stringstream": {
-                  "version": "0.0.4"
-                },
-                "combined-stream": {
-                  "version": "1.0.5",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "1.0.0"
-                    }
-                  }
-                },
-                "isstream": {
-                  "version": "0.1.2"
-                },
-                "har-validator": {
-                  "version": "1.8.0",
-                  "dependencies": {
-                    "bluebird": {
-                      "version": "2.9.30"
-                    },
-                    "chalk": {
-                      "version": "1.1.0",
-                      "dependencies": {
-                        "ansi-styles": {
-                          "version": "2.1.0"
-                        },
-                        "escape-string-regexp": {
-                          "version": "1.0.3"
-                        },
-                        "has-ansi": {
-                          "version": "2.0.0",
-                          "dependencies": {
-                            "ansi-regex": {
-                              "version": "2.0.0"
-                            }
-                          }
-                        },
-                        "strip-ansi": {
-                          "version": "3.0.0",
-                          "dependencies": {
-                            "ansi-regex": {
-                              "version": "2.0.0"
-                            }
-                          }
-                        },
-                        "supports-color": {
-                          "version": "2.0.0"
-                        }
-                      }
-                    },
-                    "commander": {
-                      "version": "2.8.1",
-                      "dependencies": {
-                        "graceful-readlink": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "is-my-json-valid": {
-                      "version": "2.12.0",
-                      "dependencies": {
-                        "generate-function": {
-                          "version": "2.0.0"
-                        },
-                        "generate-object-property": {
-                          "version": "1.2.0",
-                          "dependencies": {
-                            "is-property": {
-                              "version": "1.0.2"
-                            }
-                          }
-                        },
-                        "jsonpointer": {
-                          "version": "1.1.0"
-                        },
-                        "xtend": {
-                          "version": "4.0.0"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "rimraf": {
-              "version": "2.2.8"
-            },
-            "semver": {
-              "version": "4.3.6"
-            },
-            "type-detect": {
-              "version": "0.1.2"
-            },
-            "universal-analytics": {
-              "version": "0.3.8",
-              "dependencies": {
-                "underscore": {
-                  "version": "1.8.3"
-                },
-                "node-uuid": {
-                  "version": "1.4.3"
-                },
-                "async": {
-                  "version": "0.2.10"
-                }
-              }
-            },
-            "update-notifier": {
-              "version": "0.2.2",
-              "dependencies": {
-                "chalk": {
-                  "version": "0.5.1",
-                  "dependencies": {
-                    "ansi-styles": {
-                      "version": "1.1.0"
-                    },
-                    "escape-string-regexp": {
-                      "version": "1.0.3"
-                    },
-                    "has-ansi": {
-                      "version": "0.1.0",
-                      "dependencies": {
-                        "ansi-regex": {
-                          "version": "0.2.1"
-                        }
-                      }
-                    },
-                    "strip-ansi": {
-                      "version": "0.3.0",
-                      "dependencies": {
-                        "ansi-regex": {
-                          "version": "0.2.1"
-                        }
-                      }
-                    },
-                    "supports-color": {
-                      "version": "0.2.0"
-                    }
-                  }
-                },
-                "configstore": {
-                  "version": "0.3.2",
-                  "dependencies": {
-                    "graceful-fs": {
-                      "version": "3.0.8"
-                    },
-                    "js-yaml": {
-                      "version": "3.3.1",
-                      "dependencies": {
-                        "argparse": {
-                          "version": "1.0.2",
-                          "dependencies": {
-                            "lodash": {
-                              "version": "3.10.0"
-                            },
-                            "sprintf-js": {
-                              "version": "1.0.2"
-                            }
-                          }
-                        },
-                        "esprima": {
-                          "version": "2.2.0"
-                        }
-                      }
-                    },
-                    "object-assign": {
-                      "version": "2.1.1"
-                    },
-                    "osenv": {
-                      "version": "0.1.3",
-                      "dependencies": {
-                        "os-homedir": {
-                          "version": "1.0.0"
-                        },
-                        "os-tmpdir": {
-                          "version": "1.0.1"
-                        }
-                      }
-                    },
-                    "user-home": {
-                      "version": "1.1.1"
-                    },
-                    "xdg-basedir": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "is-npm": {
-                  "version": "1.0.0"
-                },
-                "latest-version": {
-                  "version": "1.0.1",
-                  "dependencies": {
-                    "package-json": {
-                      "version": "1.2.0",
-                      "dependencies": {
-                        "got": {
-                          "version": "3.3.0",
-                          "dependencies": {
-                            "duplexify": {
-                              "version": "3.4.2",
-                              "dependencies": {
-                                "end-of-stream": {
-                                  "version": "1.0.0",
-                                  "dependencies": {
-                                    "once": {
-                                      "version": "1.3.2",
-                                      "dependencies": {
-                                        "wrappy": {
-                                          "version": "1.0.1"
-                                        }
-                                      }
-                                    }
-                                  }
-                                },
-                                "readable-stream": {
-                                  "version": "2.0.1",
-                                  "dependencies": {
-                                    "core-util-is": {
-                                      "version": "1.0.1"
-                                    },
-                                    "inherits": {
-                                      "version": "2.0.1"
-                                    },
-                                    "isarray": {
-                                      "version": "0.0.1"
-                                    },
-                                    "process-nextick-args": {
-                                      "version": "1.0.1"
-                                    },
-                                    "string_decoder": {
-                                      "version": "0.10.31"
-                                    },
-                                    "util-deprecate": {
-                                      "version": "1.0.1"
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            "infinity-agent": {
-                              "version": "2.0.3"
-                            },
-                            "is-redirect": {
-                              "version": "1.0.0"
-                            },
-                            "is-stream": {
-                              "version": "1.0.1"
-                            },
-                            "lowercase-keys": {
-                              "version": "1.0.0"
-                            },
-                            "nested-error-stacks": {
-                              "version": "1.0.0"
-                            },
-                            "object-assign": {
-                              "version": "2.1.1"
-                            },
-                            "prepend-http": {
-                              "version": "1.0.1"
-                            },
-                            "read-all-stream": {
-                              "version": "2.2.0",
-                              "dependencies": {
-                                "readable-stream": {
-                                  "version": "2.0.1",
-                                  "dependencies": {
-                                    "core-util-is": {
-                                      "version": "1.0.1"
-                                    },
-                                    "inherits": {
-                                      "version": "2.0.1"
-                                    },
-                                    "isarray": {
-                                      "version": "0.0.1"
-                                    },
-                                    "process-nextick-args": {
-                                      "version": "1.0.1"
-                                    },
-                                    "string_decoder": {
-                                      "version": "0.10.31"
-                                    },
-                                    "util-deprecate": {
-                                      "version": "1.0.1"
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            "statuses": {
-                              "version": "1.2.1"
-                            },
-                            "timed-out": {
-                              "version": "2.0.0"
-                            }
-                          }
-                        },
-                        "registry-url": {
-                          "version": "3.0.3",
-                          "dependencies": {
-                            "rc": {
-                              "version": "1.0.3",
-                              "dependencies": {
-                                "minimist": {
-                                  "version": "0.0.10"
-                                },
-                                "deep-extend": {
-                                  "version": "0.2.11"
-                                },
-                                "strip-json-comments": {
-                                  "version": "0.1.3"
-                                },
-                                "ini": {
-                                  "version": "1.3.4"
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "semver-diff": {
-                  "version": "2.0.0"
-                },
-                "string-length": {
-                  "version": "1.0.0",
-                  "dependencies": {
-                    "strip-ansi": {
-                      "version": "2.0.1",
-                      "dependencies": {
-                        "ansi-regex": {
-                          "version": "1.1.1"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "uri-templates": {
-              "version": "0.1.7"
-            },
-            "uuid": {
-              "version": "2.0.1"
-            },
-            "verror": {
-              "version": "1.4.0",
-              "dependencies": {
-                "extsprintf": {
-                  "version": "1.0.3"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "tsd": {
-      "version": "0.6.3",
-      "dependencies": {
-        "assertion-error": {
-          "version": "1.0.0"
-        },
-        "bl": {
-          "version": "0.9.4",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.0.33",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1"
-                },
-                "isarray": {
-                  "version": "0.0.1"
-                },
-                "string_decoder": {
-                  "version": "0.10.31"
-                },
-                "inherits": {
-                  "version": "2.0.1"
-                }
-              }
-            }
-          }
-        },
-        "bluebird": {
-          "version": "1.2.4"
-        },
-        "colors": {
-          "version": "1.1.2"
-        },
-        "deep-freeze": {
-          "version": "0.0.1"
-        },
-        "definition-header": {
-          "version": "0.1.0",
-          "dependencies": {
-            "parsimmon": {
-              "version": "0.5.1",
-              "dependencies": {
-                "pjs": {
-                  "version": "5.1.1"
-                }
-              }
-            },
-            "xregexp": {
-              "version": "2.0.0"
-            }
-          }
-        },
-        "detect-indent": {
-          "version": "0.2.0",
-          "dependencies": {
-            "get-stdin": {
-              "version": "0.1.0"
-            },
-            "minimist": {
-              "version": "0.1.0"
-            }
-          }
-        },
-        "diff": {
-          "version": "1.4.0"
-        },
-        "event-stream": {
-          "version": "3.1.7",
-          "dependencies": {
-            "through": {
-              "version": "2.3.7"
-            },
-            "duplexer": {
-              "version": "0.1.1"
-            },
-            "from": {
-              "version": "0.1.3"
-            },
-            "map-stream": {
-              "version": "0.1.0"
-            },
-            "pause-stream": {
-              "version": "0.0.11"
-            },
-            "split": {
-              "version": "0.2.10"
-            },
-            "stream-combiner": {
-              "version": "0.0.4"
-            }
-          }
-        },
-        "exit": {
-          "version": "0.1.2"
-        },
-        "joi": {
-          "version": "4.9.0",
-          "dependencies": {
-            "hoek": {
-              "version": "2.14.0"
-            },
-            "topo": {
-              "version": "1.0.2"
-            },
-            "isemail": {
-              "version": "1.1.1"
-            },
-            "moment": {
-              "version": "2.10.3"
-            }
-          }
-        },
-        "joi-assert": {
-          "version": "0.0.3"
-        },
-        "jsesc": {
-          "version": "0.5.0"
-        },
-        "json-pointer": {
-          "version": "0.2.2",
-          "dependencies": {
-            "foreach": {
-              "version": "2.0.5"
-            }
-          }
-        },
-        "lazy.js": {
-          "version": "0.3.2"
-        },
-        "lru-cache": {
-          "version": "2.5.2"
-        },
-        "minimatch": {
-          "version": "1.0.0",
-          "dependencies": {
-            "sigmund": {
-              "version": "1.0.1"
-            }
-          }
-        },
-        "ministyle": {
-          "version": "0.1.4"
-        },
-        "minitable": {
-          "version": "0.0.4",
-          "dependencies": {
-            "minichain": {
-              "version": "0.0.1"
-            }
-          }
-        },
-        "miniwrite": {
-          "version": "0.1.4",
-          "dependencies": {
-            "mkdirp": {
-              "version": "0.3.5"
-            }
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "dependencies": {
-            "minimist": {
-              "version": "0.0.8"
-            }
-          }
-        },
-        "open": {
-          "version": "0.0.5"
-        },
-        "request": {
-          "version": "2.58.0",
-          "dependencies": {
-            "caseless": {
-              "version": "0.10.0"
-            },
-            "extend": {
-              "version": "2.0.1"
-            },
-            "forever-agent": {
-              "version": "0.6.1"
-            },
-            "form-data": {
-              "version": "1.0.0-rc1",
-              "dependencies": {
-                "async": {
-                  "version": "1.3.0"
-                },
-                "mime-types": {
-                  "version": "2.1.2",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.14.0"
-                    }
-                  }
-                }
-              }
-            },
-            "json-stringify-safe": {
-              "version": "5.0.1"
-            },
-            "mime-types": {
-              "version": "2.0.14",
-              "dependencies": {
-                "mime-db": {
-                  "version": "1.12.0"
-                }
-              }
-            },
-            "qs": {
-              "version": "3.1.0"
-            },
-            "tunnel-agent": {
-              "version": "0.4.0"
-            },
-            "tough-cookie": {
-              "version": "2.0.0"
-            },
-            "http-signature": {
-              "version": "0.11.0",
-              "dependencies": {
-                "assert-plus": {
-                  "version": "0.1.5"
-                },
-                "asn1": {
-                  "version": "0.1.11"
-                },
-                "ctype": {
-                  "version": "0.5.3"
-                }
-              }
-            },
-            "oauth-sign": {
-              "version": "0.8.0"
-            },
-            "hawk": {
-              "version": "2.3.1",
-              "dependencies": {
-                "hoek": {
-                  "version": "2.14.0"
-                },
-                "boom": {
-                  "version": "2.8.0"
-                },
-                "cryptiles": {
-                  "version": "2.0.4"
-                },
-                "sntp": {
-                  "version": "1.0.9"
-                }
-              }
-            },
-            "aws-sign2": {
-              "version": "0.5.0"
-            },
-            "stringstream": {
-              "version": "0.0.4"
-            },
-            "combined-stream": {
-              "version": "1.0.5",
-              "dependencies": {
-                "delayed-stream": {
-                  "version": "1.0.0"
-                }
-              }
-            },
-            "isstream": {
-              "version": "0.1.2"
-            },
-            "har-validator": {
-              "version": "1.8.0",
-              "dependencies": {
-                "bluebird": {
-                  "version": "2.9.30"
-                },
-                "chalk": {
-                  "version": "1.0.0",
-                  "dependencies": {
-                    "ansi-styles": {
-                      "version": "2.0.1"
-                    },
-                    "escape-string-regexp": {
-                      "version": "1.0.3"
-                    },
-                    "has-ansi": {
-                      "version": "1.0.3",
-                      "dependencies": {
-                        "ansi-regex": {
-                          "version": "1.1.1"
-                        },
-                        "get-stdin": {
-                          "version": "4.0.1"
-                        }
-                      }
-                    },
-                    "supports-color": {
-                      "version": "1.3.1"
-                    }
-                  }
-                },
-                "commander": {
-                  "version": "2.8.1",
-                  "dependencies": {
-                    "graceful-readlink": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "is-my-json-valid": {
-                  "version": "2.12.0",
-                  "dependencies": {
-                    "generate-function": {
-                      "version": "2.0.0"
-                    },
-                    "generate-object-property": {
-                      "version": "1.2.0",
-                      "dependencies": {
-                        "is-property": {
-                          "version": "1.0.2"
-                        }
-                      }
-                    },
-                    "jsonpointer": {
-                      "version": "1.1.0"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "rimraf": {
-          "version": "2.2.8"
-        },
-        "type-detect": {
-          "version": "0.1.2"
-        },
-        "universal-analytics": {
-          "version": "0.3.8",
-          "dependencies": {
-            "underscore": {
-              "version": "1.8.3"
-            },
-            "async": {
-              "version": "0.2.10"
-            }
-          }
-        },
-        "update-notifier": {
-          "version": "0.2.2",
-          "dependencies": {
-            "chalk": {
-              "version": "0.5.1",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0"
-                }
-              }
-            },
-            "configstore": {
-              "version": "0.3.2",
-              "dependencies": {
-                "graceful-fs": {
-                  "version": "3.0.8"
-                },
-                "object-assign": {
-                  "version": "2.1.1"
-                },
-                "osenv": {
-                  "version": "0.1.3",
-                  "dependencies": {
-                    "os-homedir": {
-                      "version": "1.0.0"
-                    },
-                    "os-tmpdir": {
-                      "version": "1.0.1"
-                    }
-                  }
-                },
-                "user-home": {
-                  "version": "1.1.1"
-                },
-                "xdg-basedir": {
-                  "version": "1.0.1"
-                }
-              }
-            },
-            "is-npm": {
-              "version": "1.0.0"
-            },
-            "latest-version": {
-              "version": "1.0.1",
-              "dependencies": {
-                "package-json": {
-                  "version": "1.2.0",
-                  "dependencies": {
-                    "got": {
-                      "version": "3.2.0",
-                      "dependencies": {
-                        "duplexify": {
-                          "version": "3.4.2",
-                          "dependencies": {
-                            "end-of-stream": {
-                              "version": "1.0.0",
-                              "dependencies": {
-                                "once": {
-                                  "version": "1.3.2",
-                                  "dependencies": {
-                                    "wrappy": {
-                                      "version": "1.0.1"
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            "readable-stream": {
-                              "version": "2.0.1",
-                              "dependencies": {
-                                "core-util-is": {
-                                  "version": "1.0.1"
-                                },
-                                "inherits": {
-                                  "version": "2.0.1"
-                                },
-                                "isarray": {
-                                  "version": "0.0.1"
-                                },
-                                "process-nextick-args": {
-                                  "version": "1.0.1"
-                                },
-                                "string_decoder": {
-                                  "version": "0.10.31"
-                                },
-                                "util-deprecate": {
-                                  "version": "1.0.1"
-                                }
-                              }
-                            }
-                          }
-                        },
-                        "infinity-agent": {
-                          "version": "2.0.3"
-                        },
-                        "is-stream": {
-                          "version": "1.0.1"
-                        },
-                        "lowercase-keys": {
-                          "version": "1.0.0"
-                        },
-                        "nested-error-stacks": {
-                          "version": "1.0.0"
-                        },
-                        "object-assign": {
-                          "version": "2.1.1"
-                        },
-                        "prepend-http": {
-                          "version": "1.0.1"
-                        },
-                        "read-all-stream": {
-                          "version": "2.2.0",
-                          "dependencies": {
-                            "readable-stream": {
-                              "version": "2.0.1",
-                              "dependencies": {
-                                "core-util-is": {
-                                  "version": "1.0.1"
-                                },
-                                "inherits": {
-                                  "version": "2.0.1"
-                                },
-                                "isarray": {
-                                  "version": "0.0.1"
-                                },
-                                "process-nextick-args": {
-                                  "version": "1.0.1"
-                                },
-                                "string_decoder": {
-                                  "version": "0.10.31"
-                                },
-                                "util-deprecate": {
-                                  "version": "1.0.1"
-                                }
-                              }
-                            }
-                          }
-                        },
-                        "statuses": {
-                          "version": "1.2.1"
-                        },
-                        "timed-out": {
-                          "version": "2.0.0"
-                        }
-                      }
-                    },
-                    "registry-url": {
-                      "version": "3.0.3",
-                      "dependencies": {
-                        "rc": {
-                          "version": "1.0.3",
-                          "dependencies": {
-                            "minimist": {
-                              "version": "0.0.10"
-                            },
-                            "deep-extend": {
-                              "version": "0.2.11"
-                            },
-                            "strip-json-comments": {
-                              "version": "0.1.3"
-                            },
-                            "ini": {
-                              "version": "1.3.4"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "semver-diff": {
-              "version": "2.0.0"
-            },
-            "string-length": {
-              "version": "1.0.0"
-            }
-          }
-        },
-        "uri-templates": {
-          "version": "0.1.7"
-        },
-        "uuid": {
-          "version": "2.0.1"
-        },
-        "verror": {
-          "version": "1.4.0",
-          "dependencies": {
-            "extsprintf": {
-              "version": "1.0.3"
-            }
-          }
-        }
-      }
-    },
-    "typescript": {
-      "version": "1.5.0",
-      "resolved": "git://github.com/alexeagle/TypeScript.git#be9a7edff73ac2592e508732c771c85357041385"
-    },
-    "vinyl": {
-      "version": "0.4.6",
-      "dependencies": {
-        "clone": {
-          "version": "0.2.0"
-        },
-        "clone-stats": {
-          "version": "0.0.1"
-        }
-      }
-    },
-    "walk-sync": {
-      "version": "0.1.3"
-    },
-    "which": {
-      "version": "1.0.9"
-    },
-    "xtend": {
-      "version": "4.0.0"
-    },
-    "yargs": {
-      "version": "2.3.0",
-      "dependencies": {
-        "wordwrap": {
-          "version": "0.0.2"
-        }
-      }
-    },
-    "zone.js": {
-      "version": "0.5.1"
-    }
-  },
-  "name": "angular",
-  "version": "2.0.0-alpha.28"
-}
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
deleted file mode 100644
index e5db25e17b1e..000000000000
--- a/npm-shrinkwrap.json
+++ /dev/null
@@ -1,19080 +0,0 @@
-{
-  "name": "angular",
-  "version": "2.0.0-alpha.28",
-  "dependencies": {
-    "angular": {
-      "version": "1.3.5",
-      "from": "https://registry.npmjs.org/angular/-/angular-1.3.5.tgz",
-      "resolved": "https://registry.npmjs.org/angular/-/angular-1.3.5.tgz"
-    },
-    "bower": {
-      "version": "1.4.1",
-      "from": "https://registry.npmjs.org/bower/-/bower-1.4.1.tgz",
-      "resolved": "https://registry.npmjs.org/bower/-/bower-1.4.1.tgz",
-      "dependencies": {
-        "abbrev": {
-          "version": "1.0.5",
-          "from": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz"
-        },
-        "archy": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz"
-        },
-        "bower-config": {
-          "version": "0.6.1",
-          "from": "https://registry.npmjs.org/bower-config/-/bower-config-0.6.1.tgz",
-          "resolved": "https://registry.npmjs.org/bower-config/-/bower-config-0.6.1.tgz",
-          "dependencies": {
-            "graceful-fs": {
-              "version": "2.0.3",
-              "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz"
-            },
-            "mout": {
-              "version": "0.9.1",
-              "from": "https://registry.npmjs.org/mout/-/mout-0.9.1.tgz",
-              "resolved": "https://registry.npmjs.org/mout/-/mout-0.9.1.tgz"
-            },
-            "optimist": {
-              "version": "0.6.1",
-              "from": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-              "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-              "dependencies": {
-                "wordwrap": {
-                  "version": "0.0.3",
-                  "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
-                },
-                "minimist": {
-                  "version": "0.0.10",
-                  "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
-                }
-              }
-            },
-            "osenv": {
-              "version": "0.0.3",
-              "from": "https://registry.npmjs.org/osenv/-/osenv-0.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.0.3.tgz"
-            }
-          }
-        },
-        "bower-endpoint-parser": {
-          "version": "0.2.2",
-          "from": "https://registry.npmjs.org/bower-endpoint-parser/-/bower-endpoint-parser-0.2.2.tgz",
-          "resolved": "https://registry.npmjs.org/bower-endpoint-parser/-/bower-endpoint-parser-0.2.2.tgz"
-        },
-        "bower-json": {
-          "version": "0.4.0",
-          "from": "https://registry.npmjs.org/bower-json/-/bower-json-0.4.0.tgz",
-          "resolved": "https://registry.npmjs.org/bower-json/-/bower-json-0.4.0.tgz",
-          "dependencies": {
-            "deep-extend": {
-              "version": "0.2.11",
-              "from": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.2.11.tgz",
-              "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.2.11.tgz"
-            },
-            "graceful-fs": {
-              "version": "2.0.3",
-              "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz"
-            },
-            "intersect": {
-              "version": "0.0.3",
-              "from": "https://registry.npmjs.org/intersect/-/intersect-0.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/intersect/-/intersect-0.0.3.tgz"
-            }
-          }
-        },
-        "bower-logger": {
-          "version": "0.2.2",
-          "from": "https://registry.npmjs.org/bower-logger/-/bower-logger-0.2.2.tgz",
-          "resolved": "https://registry.npmjs.org/bower-logger/-/bower-logger-0.2.2.tgz"
-        },
-        "bower-registry-client": {
-          "version": "0.3.0",
-          "from": "https://registry.npmjs.org/bower-registry-client/-/bower-registry-client-0.3.0.tgz",
-          "resolved": "https://registry.npmjs.org/bower-registry-client/-/bower-registry-client-0.3.0.tgz",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10",
-              "from": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-            },
-            "graceful-fs": {
-              "version": "2.0.3",
-              "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz"
-            },
-            "lru-cache": {
-              "version": "2.3.1",
-              "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.3.1.tgz",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.3.1.tgz"
-            },
-            "request": {
-              "version": "2.51.0",
-              "from": "https://registry.npmjs.org/request/-/request-2.51.0.tgz",
-              "resolved": "https://registry.npmjs.org/request/-/request-2.51.0.tgz",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4",
-                  "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                  "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "caseless": {
-                  "version": "0.8.0",
-                  "from": "https://registry.npmjs.org/caseless/-/caseless-0.8.0.tgz",
-                  "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.8.0.tgz"
-                },
-                "forever-agent": {
-                  "version": "0.5.2",
-                  "from": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz",
-                  "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz"
-                },
-                "form-data": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-                  "dependencies": {
-                    "async": {
-                      "version": "0.9.0",
-                      "from": "https://registry.npmjs.org/async/-/async-0.9.0.tgz",
-                      "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz"
-                    },
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1",
-                          "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "json-stringify-safe": {
-                  "version": "5.0.0",
-                  "from": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz"
-                },
-                "mime-types": {
-                  "version": "1.0.2",
-                  "from": "https://registry.npmjs.org/mime-types/-/mime-types-1.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-1.0.2.tgz"
-                },
-                "qs": {
-                  "version": "2.3.3",
-                  "from": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz",
-                  "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz"
-                },
-                "tunnel-agent": {
-                  "version": "0.4.0",
-                  "from": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz",
-                  "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz"
-                },
-                "tough-cookie": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz"
-                },
-                "http-signature": {
-                  "version": "0.10.1",
-                  "from": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-                  "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-                  "dependencies": {
-                    "assert-plus": {
-                      "version": "0.1.5",
-                      "from": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-                      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz"
-                    },
-                    "asn1": {
-                      "version": "0.1.11",
-                      "from": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-                      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
-                    },
-                    "ctype": {
-                      "version": "0.5.3",
-                      "from": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz",
-                      "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
-                    }
-                  }
-                },
-                "oauth-sign": {
-                  "version": "0.5.0",
-                  "from": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.5.0.tgz",
-                  "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.5.0.tgz"
-                },
-                "hawk": {
-                  "version": "1.1.1",
-                  "from": "https://registry.npmjs.org/hawk/-/hawk-1.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/hawk/-/hawk-1.1.1.tgz",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "0.9.1",
-                      "from": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz",
-                      "resolved": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz"
-                    },
-                    "boom": {
-                      "version": "0.4.2",
-                      "from": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz",
-                      "resolved": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz"
-                    },
-                    "cryptiles": {
-                      "version": "0.2.2",
-                      "from": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.2.2.tgz",
-                      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.2.2.tgz"
-                    },
-                    "sntp": {
-                      "version": "0.2.4",
-                      "from": "https://registry.npmjs.org/sntp/-/sntp-0.2.4.tgz",
-                      "resolved": "https://registry.npmjs.org/sntp/-/sntp-0.2.4.tgz"
-                    }
-                  }
-                },
-                "aws-sign2": {
-                  "version": "0.5.0",
-                  "from": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-                  "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
-                },
-                "stringstream": {
-                  "version": "0.0.4",
-                  "from": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz"
-                },
-                "combined-stream": {
-                  "version": "0.0.7",
-                  "from": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "0.0.5",
-                      "from": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "request-replay": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/request-replay/-/request-replay-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/request-replay/-/request-replay-0.2.0.tgz"
-            },
-            "rimraf": {
-              "version": "2.2.8",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-            },
-            "mkdirp": {
-              "version": "0.3.5",
-              "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz"
-            }
-          }
-        },
-        "cardinal": {
-          "version": "0.4.4",
-          "from": "https://registry.npmjs.org/cardinal/-/cardinal-0.4.4.tgz",
-          "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-0.4.4.tgz",
-          "dependencies": {
-            "redeyed": {
-              "version": "0.4.4",
-              "from": "https://registry.npmjs.org/redeyed/-/redeyed-0.4.4.tgz",
-              "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-0.4.4.tgz",
-              "dependencies": {
-                "esprima": {
-                  "version": "1.0.4",
-                  "from": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz"
-                }
-              }
-            },
-            "ansicolors": {
-              "version": "0.2.1",
-              "from": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.2.1.tgz",
-              "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.2.1.tgz"
-            }
-          }
-        },
-        "chalk": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-          "dependencies": {
-            "ansi-styles": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-            },
-            "escape-string-regexp": {
-              "version": "1.0.3",
-              "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-            },
-            "has-ansi": {
-              "version": "1.0.3",
-              "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "1.1.1",
-                  "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                },
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                }
-              }
-            },
-            "supports-color": {
-              "version": "1.3.1",
-              "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-            }
-          }
-        },
-        "chmodr": {
-          "version": "0.1.0",
-          "from": "https://registry.npmjs.org/chmodr/-/chmodr-0.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/chmodr/-/chmodr-0.1.0.tgz"
-        },
-        "configstore": {
-          "version": "0.3.2",
-          "from": "https://registry.npmjs.org/configstore/-/configstore-0.3.2.tgz",
-          "resolved": "https://registry.npmjs.org/configstore/-/configstore-0.3.2.tgz",
-          "dependencies": {
-            "object-assign": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-            },
-            "osenv": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/osenv/-/osenv-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.0.tgz"
-            },
-            "uuid": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/uuid/-/uuid-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.1.tgz"
-            },
-            "xdg-basedir": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-1.0.1.tgz"
-            }
-          }
-        },
-        "decompress-zip": {
-          "version": "0.1.0",
-          "from": "https://registry.npmjs.org/decompress-zip/-/decompress-zip-0.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/decompress-zip/-/decompress-zip-0.1.0.tgz",
-          "dependencies": {
-            "binary": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
-              "dependencies": {
-                "chainsaw": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
-                  "dependencies": {
-                    "traverse": {
-                      "version": "0.3.9",
-                      "from": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-                      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz"
-                    }
-                  }
-                },
-                "buffers": {
-                  "version": "0.1.1",
-                  "from": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz"
-                }
-              }
-            },
-            "mkpath": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/mkpath/-/mkpath-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/mkpath/-/mkpath-0.1.0.tgz"
-            },
-            "readable-stream": {
-              "version": "1.1.13",
-              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                },
-                "string_decoder": {
-                  "version": "0.10.31",
-                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            },
-            "touch": {
-              "version": "0.0.3",
-              "from": "https://registry.npmjs.org/touch/-/touch-0.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/touch/-/touch-0.0.3.tgz",
-              "dependencies": {
-                "nopt": {
-                  "version": "1.0.10",
-                  "from": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-                  "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz"
-                }
-              }
-            }
-          }
-        },
-        "fstream": {
-          "version": "1.0.4",
-          "from": "https://registry.npmjs.org/fstream/-/fstream-1.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.4.tgz",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-            }
-          }
-        },
-        "fstream-ignore": {
-          "version": "1.0.2",
-          "from": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.2.tgz",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-            }
-          }
-        },
-        "github": {
-          "version": "0.2.4",
-          "from": "https://registry.npmjs.org/github/-/github-0.2.4.tgz",
-          "resolved": "https://registry.npmjs.org/github/-/github-0.2.4.tgz",
-          "dependencies": {
-            "mime": {
-              "version": "1.3.4",
-              "from": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz",
-              "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz"
-            }
-          }
-        },
-        "graceful-fs": {
-          "version": "3.0.6",
-          "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz"
-        },
-        "handlebars": {
-          "version": "2.0.0",
-          "from": "https://registry.npmjs.org/handlebars/-/handlebars-2.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-2.0.0.tgz",
-          "dependencies": {
-            "optimist": {
-              "version": "0.3.7",
-              "from": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
-              "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
-              "dependencies": {
-                "wordwrap": {
-                  "version": "0.0.3",
-                  "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
-                }
-              }
-            },
-            "uglify-js": {
-              "version": "2.3.6",
-              "from": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.3.6.tgz",
-              "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.3.6.tgz",
-              "dependencies": {
-                "async": {
-                  "version": "0.2.10",
-                  "from": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-                  "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-                },
-                "source-map": {
-                  "version": "0.1.43",
-                  "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-                  "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "inquirer": {
-          "version": "0.8.0",
-          "from": "https://registry.npmjs.org/inquirer/-/inquirer-0.8.0.tgz",
-          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-0.8.0.tgz",
-          "dependencies": {
-            "ansi-regex": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-            },
-            "chalk": {
-              "version": "0.5.1",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz"
-                }
-              }
-            },
-            "cli-color": {
-              "version": "0.3.3",
-              "from": "https://registry.npmjs.org/cli-color/-/cli-color-0.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/cli-color/-/cli-color-0.3.3.tgz",
-              "dependencies": {
-                "d": {
-                  "version": "0.1.1",
-                  "from": "https://registry.npmjs.org/d/-/d-0.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/d/-/d-0.1.1.tgz"
-                },
-                "es5-ext": {
-                  "version": "0.10.7",
-                  "from": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.7.tgz",
-                  "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.7.tgz",
-                  "dependencies": {
-                    "es6-iterator": {
-                      "version": "0.1.3",
-                      "from": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-0.1.3.tgz",
-                      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-0.1.3.tgz"
-                    },
-                    "es6-symbol": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-2.0.1.tgz"
-                    }
-                  }
-                },
-                "memoizee": {
-                  "version": "0.3.8",
-                  "from": "https://registry.npmjs.org/memoizee/-/memoizee-0.3.8.tgz",
-                  "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.3.8.tgz",
-                  "dependencies": {
-                    "es6-weak-map": {
-                      "version": "0.1.4",
-                      "from": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-0.1.4.tgz",
-                      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-0.1.4.tgz",
-                      "dependencies": {
-                        "es6-iterator": {
-                          "version": "0.1.3",
-                          "from": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-0.1.3.tgz",
-                          "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-0.1.3.tgz"
-                        },
-                        "es6-symbol": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-2.0.1.tgz"
-                        }
-                      }
-                    },
-                    "event-emitter": {
-                      "version": "0.3.3",
-                      "from": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.3.tgz",
-                      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.3.tgz"
-                    },
-                    "lru-queue": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz"
-                    },
-                    "next-tick": {
-                      "version": "0.2.2",
-                      "from": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz",
-                      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz"
-                    }
-                  }
-                },
-                "timers-ext": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.0.tgz",
-                  "dependencies": {
-                    "next-tick": {
-                      "version": "0.2.2",
-                      "from": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz",
-                      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "figures": {
-              "version": "1.3.5",
-              "from": "https://registry.npmjs.org/figures/-/figures-1.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/figures/-/figures-1.3.5.tgz"
-            },
-            "mute-stream": {
-              "version": "0.0.4",
-              "from": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.4.tgz"
-            },
-            "readline2": {
-              "version": "0.1.1",
-              "from": "https://registry.npmjs.org/readline2/-/readline2-0.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/readline2/-/readline2-0.1.1.tgz"
-            },
-            "through": {
-              "version": "2.3.7",
-              "from": "https://registry.npmjs.org/through/-/through-2.3.7.tgz",
-              "resolved": "https://registry.npmjs.org/through/-/through-2.3.7.tgz"
-            }
-          }
-        },
-        "insight": {
-          "version": "0.5.3",
-          "from": "https://registry.npmjs.org/insight/-/insight-0.5.3.tgz",
-          "resolved": "https://registry.npmjs.org/insight/-/insight-0.5.3.tgz",
-          "dependencies": {
-            "async": {
-              "version": "0.9.0",
-              "from": "https://registry.npmjs.org/async/-/async-0.9.0.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz"
-            },
-            "lodash.debounce": {
-              "version": "3.0.3",
-              "from": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.0.3.tgz",
-              "dependencies": {
-                "lodash.isnative": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz"
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-            },
-            "os-name": {
-              "version": "1.0.3",
-              "from": "https://registry.npmjs.org/os-name/-/os-name-1.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/os-name/-/os-name-1.0.3.tgz",
-              "dependencies": {
-                "osx-release": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/osx-release/-/osx-release-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/osx-release/-/osx-release-1.0.0.tgz"
-                },
-                "win-release": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/win-release/-/win-release-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/win-release/-/win-release-1.0.0.tgz"
-                }
-              }
-            },
-            "tough-cookie": {
-              "version": "0.12.1",
-              "from": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-0.12.1.tgz",
-              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-0.12.1.tgz",
-              "dependencies": {
-                "punycode": {
-                  "version": "1.3.2",
-                  "from": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-                  "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz"
-                }
-              }
-            }
-          }
-        },
-        "is-root": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/is-root/-/is-root-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/is-root/-/is-root-1.0.0.tgz"
-        },
-        "junk": {
-          "version": "1.0.1",
-          "from": "https://registry.npmjs.org/junk/-/junk-1.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.1.tgz"
-        },
-        "lockfile": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/lockfile/-/lockfile-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/lockfile/-/lockfile-1.0.0.tgz"
-        },
-        "lru-cache": {
-          "version": "2.6.2",
-          "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-        },
-        "mkdirp": {
-          "version": "0.5.0",
-          "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-          "dependencies": {
-            "minimist": {
-              "version": "0.0.8",
-              "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-            }
-          }
-        },
-        "mout": {
-          "version": "0.11.0",
-          "from": "https://registry.npmjs.org/mout/-/mout-0.11.0.tgz",
-          "resolved": "https://registry.npmjs.org/mout/-/mout-0.11.0.tgz"
-        },
-        "nopt": {
-          "version": "3.0.1",
-          "from": "https://registry.npmjs.org/nopt/-/nopt-3.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.1.tgz"
-        },
-        "opn": {
-          "version": "1.0.2",
-          "from": "https://registry.npmjs.org/opn/-/opn-1.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/opn/-/opn-1.0.2.tgz"
-        },
-        "p-throttler": {
-          "version": "0.1.1",
-          "from": "https://registry.npmjs.org/p-throttler/-/p-throttler-0.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/p-throttler/-/p-throttler-0.1.1.tgz",
-          "dependencies": {
-            "q": {
-              "version": "0.9.7",
-              "from": "https://registry.npmjs.org/q/-/q-0.9.7.tgz",
-              "resolved": "https://registry.npmjs.org/q/-/q-0.9.7.tgz"
-            }
-          }
-        },
-        "promptly": {
-          "version": "0.2.0",
-          "from": "https://registry.npmjs.org/promptly/-/promptly-0.2.0.tgz",
-          "resolved": "https://registry.npmjs.org/promptly/-/promptly-0.2.0.tgz",
-          "dependencies": {
-            "read": {
-              "version": "1.0.5",
-              "from": "https://registry.npmjs.org/read/-/read-1.0.5.tgz",
-              "resolved": "https://registry.npmjs.org/read/-/read-1.0.5.tgz",
-              "dependencies": {
-                "mute-stream": {
-                  "version": "0.0.4",
-                  "from": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.4.tgz"
-                }
-              }
-            }
-          }
-        },
-        "request": {
-          "version": "2.53.0",
-          "from": "https://registry.npmjs.org/request/-/request-2.53.0.tgz",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.53.0.tgz",
-          "dependencies": {
-            "bl": {
-              "version": "0.9.4",
-              "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-              "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "caseless": {
-              "version": "0.9.0",
-              "from": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz",
-              "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz"
-            },
-            "forever-agent": {
-              "version": "0.5.2",
-              "from": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz",
-              "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz"
-            },
-            "form-data": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-              "dependencies": {
-                "async": {
-                  "version": "0.9.0",
-                  "from": "https://registry.npmjs.org/async/-/async-0.9.0.tgz",
-                  "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz"
-                }
-              }
-            },
-            "json-stringify-safe": {
-              "version": "5.0.0",
-              "from": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz"
-            },
-            "mime-types": {
-              "version": "2.0.11",
-              "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-              "dependencies": {
-                "mime-db": {
-                  "version": "1.9.1",
-                  "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                  "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                }
-              }
-            },
-            "qs": {
-              "version": "2.3.3",
-              "from": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz"
-            },
-            "tunnel-agent": {
-              "version": "0.4.0",
-              "from": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz",
-              "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz"
-            },
-            "tough-cookie": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz"
-            },
-            "http-signature": {
-              "version": "0.10.1",
-              "from": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-              "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-              "dependencies": {
-                "assert-plus": {
-                  "version": "0.1.5",
-                  "from": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-                  "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz"
-                },
-                "asn1": {
-                  "version": "0.1.11",
-                  "from": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-                  "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
-                },
-                "ctype": {
-                  "version": "0.5.3",
-                  "from": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz",
-                  "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
-                }
-              }
-            },
-            "oauth-sign": {
-              "version": "0.6.0",
-              "from": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz",
-              "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz"
-            },
-            "hawk": {
-              "version": "2.3.1",
-              "from": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz",
-              "resolved": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz",
-              "dependencies": {
-                "hoek": {
-                  "version": "2.13.0",
-                  "from": "https://registry.npmjs.org/hoek/-/hoek-2.13.0.tgz",
-                  "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.13.0.tgz"
-                },
-                "boom": {
-                  "version": "2.7.1",
-                  "from": "https://registry.npmjs.org/boom/-/boom-2.7.1.tgz",
-                  "resolved": "https://registry.npmjs.org/boom/-/boom-2.7.1.tgz"
-                },
-                "cryptiles": {
-                  "version": "2.0.4",
-                  "from": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.4.tgz"
-                },
-                "sntp": {
-                  "version": "1.0.9",
-                  "from": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-                  "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz"
-                }
-              }
-            },
-            "aws-sign2": {
-              "version": "0.5.0",
-              "from": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
-            },
-            "stringstream": {
-              "version": "0.0.4",
-              "from": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz"
-            },
-            "combined-stream": {
-              "version": "0.0.7",
-              "from": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-              "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-              "dependencies": {
-                "delayed-stream": {
-                  "version": "0.0.5",
-                  "from": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                  "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
-                }
-              }
-            },
-            "isstream": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
-            }
-          }
-        },
-        "request-progress": {
-          "version": "0.3.1",
-          "from": "https://registry.npmjs.org/request-progress/-/request-progress-0.3.1.tgz",
-          "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-0.3.1.tgz",
-          "dependencies": {
-            "throttleit": {
-              "version": "0.0.2",
-              "from": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz"
-            }
-          }
-        },
-        "retry": {
-          "version": "0.6.1",
-          "from": "https://registry.npmjs.org/retry/-/retry-0.6.1.tgz",
-          "resolved": "https://registry.npmjs.org/retry/-/retry-0.6.1.tgz"
-        },
-        "rimraf": {
-          "version": "2.3.3",
-          "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz"
-        },
-        "semver": {
-          "version": "2.3.2",
-          "from": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz"
-        },
-        "shell-quote": {
-          "version": "1.4.3",
-          "from": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.4.3.tgz",
-          "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.4.3.tgz",
-          "dependencies": {
-            "jsonify": {
-              "version": "0.0.0",
-              "from": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz"
-            },
-            "array-filter": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz"
-            },
-            "array-reduce": {
-              "version": "0.0.0",
-              "from": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz"
-            },
-            "array-map": {
-              "version": "0.0.0",
-              "from": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz"
-            }
-          }
-        },
-        "stringify-object": {
-          "version": "1.0.1",
-          "from": "https://registry.npmjs.org/stringify-object/-/stringify-object-1.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-1.0.1.tgz"
-        },
-        "tar-fs": {
-          "version": "1.5.0",
-          "from": "https://registry.npmjs.org/tar-fs/-/tar-fs-1.5.0.tgz",
-          "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-1.5.0.tgz",
-          "dependencies": {
-            "pump": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/pump/-/pump-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/pump/-/pump-1.0.0.tgz",
-              "dependencies": {
-                "end-of-stream": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz"
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "tar-stream": {
-              "version": "1.1.4",
-              "from": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.1.4.tgz",
-              "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.1.4.tgz",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4",
-                  "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                  "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz"
-                },
-                "end-of-stream": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                  "dependencies": {
-                    "once": {
-                      "version": "1.3.2",
-                      "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "tmp": {
-          "version": "0.0.24",
-          "from": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz",
-          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz"
-        },
-        "update-notifier": {
-          "version": "0.3.2",
-          "from": "https://registry.npmjs.org/update-notifier/-/update-notifier-0.3.2.tgz",
-          "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-0.3.2.tgz",
-          "dependencies": {
-            "is-npm": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz"
-            },
-            "latest-version": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/latest-version/-/latest-version-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-1.0.0.tgz",
-              "dependencies": {
-                "package-json": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/package-json/-/package-json-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/package-json/-/package-json-1.1.0.tgz",
-                  "dependencies": {
-                    "got": {
-                      "version": "2.9.2",
-                      "from": "https://registry.npmjs.org/got/-/got-2.9.2.tgz",
-                      "resolved": "https://registry.npmjs.org/got/-/got-2.9.2.tgz",
-                      "dependencies": {
-                        "duplexify": {
-                          "version": "3.3.0",
-                          "from": "https://registry.npmjs.org/duplexify/-/duplexify-3.3.0.tgz",
-                          "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.3.0.tgz",
-                          "dependencies": {
-                            "end-of-stream": {
-                              "version": "1.0.0",
-                              "from": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.0.0.tgz",
-                              "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.0.0.tgz",
-                              "dependencies": {
-                                "once": {
-                                  "version": "1.3.2",
-                                  "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                                  "dependencies": {
-                                    "wrappy": {
-                                      "version": "1.0.1",
-                                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            "readable-stream": {
-                              "version": "1.0.33",
-                              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                              "dependencies": {
-                                "core-util-is": {
-                                  "version": "1.0.1",
-                                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                                },
-                                "isarray": {
-                                  "version": "0.0.1",
-                                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                                },
-                                "string_decoder": {
-                                  "version": "0.10.31",
-                                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                                },
-                                "inherits": {
-                                  "version": "2.0.1",
-                                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                                }
-                              }
-                            }
-                          }
-                        },
-                        "infinity-agent": {
-                          "version": "2.0.3",
-                          "from": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.tgz",
-                          "resolved": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.tgz"
-                        },
-                        "is-stream": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/is-stream/-/is-stream-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.0.1.tgz"
-                        },
-                        "lowercase-keys": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz"
-                        },
-                        "nested-error-stacks": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-1.0.0.tgz"
-                        },
-                        "object-assign": {
-                          "version": "2.0.0",
-                          "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-                        },
-                        "prepend-http": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.1.tgz"
-                        },
-                        "read-all-stream": {
-                          "version": "2.1.2",
-                          "from": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-2.1.2.tgz",
-                          "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-2.1.2.tgz",
-                          "dependencies": {
-                            "readable-stream": {
-                              "version": "1.1.13",
-                              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                              "dependencies": {
-                                "core-util-is": {
-                                  "version": "1.0.1",
-                                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                                },
-                                "isarray": {
-                                  "version": "0.0.1",
-                                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                                },
-                                "string_decoder": {
-                                  "version": "0.10.31",
-                                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                                },
-                                "inherits": {
-                                  "version": "2.0.1",
-                                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                                }
-                              }
-                            }
-                          }
-                        },
-                        "statuses": {
-                          "version": "1.2.1",
-                          "from": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz",
-                          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz"
-                        },
-                        "timed-out": {
-                          "version": "2.0.0",
-                          "from": "https://registry.npmjs.org/timed-out/-/timed-out-2.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-2.0.0.tgz"
-                        }
-                      }
-                    },
-                    "registry-url": {
-                      "version": "3.0.3",
-                      "from": "https://registry.npmjs.org/registry-url/-/registry-url-3.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.0.3.tgz",
-                      "dependencies": {
-                        "rc": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/rc/-/rc-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/rc/-/rc-1.0.1.tgz",
-                          "dependencies": {
-                            "minimist": {
-                              "version": "0.0.10",
-                              "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-                              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
-                            },
-                            "deep-extend": {
-                              "version": "0.2.11",
-                              "from": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.2.11.tgz",
-                              "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.2.11.tgz"
-                            },
-                            "strip-json-comments": {
-                              "version": "0.1.3",
-                              "from": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-0.1.3.tgz",
-                              "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-0.1.3.tgz"
-                            },
-                            "ini": {
-                              "version": "1.3.3",
-                              "from": "https://registry.npmjs.org/ini/-/ini-1.3.3.tgz",
-                              "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.3.tgz"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "semver-diff": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.0.0.tgz",
-              "dependencies": {
-                "semver": {
-                  "version": "4.3.4",
-                  "from": "https://registry.npmjs.org/semver/-/semver-4.3.4.tgz",
-                  "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.4.tgz"
-                }
-              }
-            },
-            "string-length": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/string-length/-/string-length-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.0.tgz"
-            }
-          }
-        },
-        "user-home": {
-          "version": "1.1.1",
-          "from": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz"
-        }
-      }
-    },
-    "broccoli": {
-      "version": "0.15.4",
-      "from": "https://registry.npmjs.org/broccoli/-/broccoli-0.15.4.tgz",
-      "resolved": "https://registry.npmjs.org/broccoli/-/broccoli-0.15.4.tgz",
-      "dependencies": {
-        "broccoli-kitchen-sink-helpers": {
-          "version": "0.2.6",
-          "from": "https://registry.npmjs.org/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.6.tgz",
-          "resolved": "https://registry.npmjs.org/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.6.tgz",
-          "dependencies": {
-            "mkdirp": {
-              "version": "0.3.5",
-              "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz"
-            },
-            "glob": {
-              "version": "4.0.4",
-              "from": "https://registry.npmjs.org/glob/-/glob-4.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-4.0.4.tgz",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "minimatch": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                  "dependencies": {
-                    "lru-cache": {
-                      "version": "2.6.2",
-                      "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                    },
-                    "sigmund": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                    }
-                  }
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.6",
-                  "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz"
-                }
-              }
-            }
-          }
-        },
-        "commander": {
-          "version": "2.8.1",
-          "from": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-          "dependencies": {
-            "graceful-readlink": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
-            }
-          }
-        },
-        "connect": {
-          "version": "3.3.5",
-          "from": "https://registry.npmjs.org/connect/-/connect-3.3.5.tgz",
-          "resolved": "https://registry.npmjs.org/connect/-/connect-3.3.5.tgz",
-          "dependencies": {
-            "debug": {
-              "version": "2.1.3",
-              "from": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz",
-              "dependencies": {
-                "ms": {
-                  "version": "0.7.0",
-                  "from": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz",
-                  "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz"
-                }
-              }
-            },
-            "finalhandler": {
-              "version": "0.3.4",
-              "from": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.3.4.tgz",
-              "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.3.4.tgz",
-              "dependencies": {
-                "escape-html": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz"
-                },
-                "on-finished": {
-                  "version": "2.2.1",
-                  "from": "https://registry.npmjs.org/on-finished/-/on-finished-2.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.2.1.tgz",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.1.0",
-                      "from": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.0.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "parseurl": {
-              "version": "1.3.0",
-              "from": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz"
-            },
-            "utils-merge": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz"
-            }
-          }
-        },
-        "copy-dereference": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/copy-dereference/-/copy-dereference-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/copy-dereference/-/copy-dereference-1.0.0.tgz"
-        },
-        "findup-sync": {
-          "version": "0.2.1",
-          "from": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.2.1.tgz",
-          "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.2.1.tgz",
-          "dependencies": {
-            "glob": {
-              "version": "4.3.5",
-              "from": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-              "dependencies": {
-                "inflight": {
-                  "version": "1.0.4",
-                  "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "handlebars": {
-          "version": "3.0.3",
-          "from": "https://registry.npmjs.org/handlebars/-/handlebars-3.0.3.tgz",
-          "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-3.0.3.tgz",
-          "dependencies": {
-            "optimist": {
-              "version": "0.6.1",
-              "from": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-              "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-              "dependencies": {
-                "wordwrap": {
-                  "version": "0.0.3",
-                  "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
-                },
-                "minimist": {
-                  "version": "0.0.10",
-                  "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
-                }
-              }
-            },
-            "source-map": {
-              "version": "0.1.43",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                }
-              }
-            },
-            "uglify-js": {
-              "version": "2.3.6",
-              "from": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.3.6.tgz",
-              "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.3.6.tgz",
-              "dependencies": {
-                "async": {
-                  "version": "0.2.10",
-                  "from": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-                  "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-                },
-                "optimist": {
-                  "version": "0.3.7",
-                  "from": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
-                  "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
-                  "dependencies": {
-                    "wordwrap": {
-                      "version": "0.0.3",
-                      "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "mime": {
-          "version": "1.3.4",
-          "from": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz"
-        },
-        "promise-map-series": {
-          "version": "0.2.1",
-          "from": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.2.1.tgz",
-          "resolved": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.2.1.tgz"
-        },
-        "quick-temp": {
-          "version": "0.1.2",
-          "from": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.2.tgz",
-          "resolved": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.2.tgz",
-          "dependencies": {
-            "rimraf": {
-              "version": "2.2.8",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-            },
-            "mktemp": {
-              "version": "0.3.5",
-              "from": "https://registry.npmjs.org/mktemp/-/mktemp-0.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/mktemp/-/mktemp-0.3.5.tgz"
-            },
-            "underscore.string": {
-              "version": "2.3.3",
-              "from": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz"
-            }
-          }
-        },
-        "rimraf": {
-          "version": "2.3.3",
-          "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz"
-        },
-        "rsvp": {
-          "version": "3.0.18",
-          "from": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz",
-          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz"
-        },
-        "tiny-lr": {
-          "version": "0.1.5",
-          "from": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-0.1.5.tgz",
-          "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-0.1.5.tgz",
-          "dependencies": {
-            "body-parser": {
-              "version": "1.8.4",
-              "from": "https://registry.npmjs.org/body-parser/-/body-parser-1.8.4.tgz",
-              "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.8.4.tgz",
-              "dependencies": {
-                "bytes": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz"
-                },
-                "depd": {
-                  "version": "0.4.5",
-                  "from": "https://registry.npmjs.org/depd/-/depd-0.4.5.tgz",
-                  "resolved": "https://registry.npmjs.org/depd/-/depd-0.4.5.tgz"
-                },
-                "iconv-lite": {
-                  "version": "0.4.4",
-                  "from": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.4.tgz",
-                  "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.4.tgz"
-                },
-                "media-typer": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
-                },
-                "on-finished": {
-                  "version": "2.1.0",
-                  "from": "https://registry.npmjs.org/on-finished/-/on-finished-2.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.1.0.tgz",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.0.5",
-                      "from": "https://registry.npmjs.org/ee-first/-/ee-first-1.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.0.5.tgz"
-                    }
-                  }
-                },
-                "qs": {
-                  "version": "2.2.4",
-                  "from": "https://registry.npmjs.org/qs/-/qs-2.2.4.tgz",
-                  "resolved": "https://registry.npmjs.org/qs/-/qs-2.2.4.tgz"
-                },
-                "raw-body": {
-                  "version": "1.3.0",
-                  "from": "https://registry.npmjs.org/raw-body/-/raw-body-1.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-1.3.0.tgz"
-                },
-                "type-is": {
-                  "version": "1.5.7",
-                  "from": "https://registry.npmjs.org/type-is/-/type-is-1.5.7.tgz",
-                  "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.5.7.tgz",
-                  "dependencies": {
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1",
-                          "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "debug": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/debug/-/debug-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.0.0.tgz",
-              "dependencies": {
-                "ms": {
-                  "version": "0.6.2",
-                  "from": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz",
-                  "resolved": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz"
-                }
-              }
-            },
-            "faye-websocket": {
-              "version": "0.7.3",
-              "from": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.7.3.tgz",
-              "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.7.3.tgz",
-              "dependencies": {
-                "websocket-driver": {
-                  "version": "0.5.4",
-                  "from": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.5.4.tgz",
-                  "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.5.4.tgz",
-                  "dependencies": {
-                    "websocket-extensions": {
-                      "version": "0.1.1",
-                      "from": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "livereload-js": {
-              "version": "2.2.2",
-              "from": "https://registry.npmjs.org/livereload-js/-/livereload-js-2.2.2.tgz",
-              "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-2.2.2.tgz"
-            },
-            "parseurl": {
-              "version": "1.3.0",
-              "from": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz"
-            },
-            "qs": {
-              "version": "2.2.5",
-              "from": "https://registry.npmjs.org/qs/-/qs-2.2.5.tgz",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-2.2.5.tgz"
-            }
-          }
-        }
-      }
-    },
-    "broccoli-filter": {
-      "version": "0.1.14",
-      "from": "https://registry.npmjs.org/broccoli-filter/-/broccoli-filter-0.1.14.tgz",
-      "resolved": "https://registry.npmjs.org/broccoli-filter/-/broccoli-filter-0.1.14.tgz",
-      "dependencies": {
-        "broccoli-kitchen-sink-helpers": {
-          "version": "0.2.6",
-          "from": "https://registry.npmjs.org/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.6.tgz",
-          "resolved": "https://registry.npmjs.org/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.6.tgz",
-          "dependencies": {
-            "glob": {
-              "version": "4.0.4",
-              "from": "https://registry.npmjs.org/glob/-/glob-4.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-4.0.4.tgz",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "minimatch": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                  "dependencies": {
-                    "lru-cache": {
-                      "version": "2.6.2",
-                      "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                    },
-                    "sigmund": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                    }
-                  }
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.6",
-                  "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz"
-                }
-              }
-            }
-          }
-        },
-        "mkdirp": {
-          "version": "0.3.5",
-          "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz"
-        },
-        "promise-map-series": {
-          "version": "0.2.1",
-          "from": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.2.1.tgz",
-          "resolved": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.2.1.tgz"
-        },
-        "quick-temp": {
-          "version": "0.1.2",
-          "from": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.2.tgz",
-          "resolved": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.2.tgz",
-          "dependencies": {
-            "rimraf": {
-              "version": "2.2.8",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-            },
-            "mktemp": {
-              "version": "0.3.5",
-              "from": "https://registry.npmjs.org/mktemp/-/mktemp-0.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/mktemp/-/mktemp-0.3.5.tgz"
-            },
-            "underscore.string": {
-              "version": "2.3.3",
-              "from": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz"
-            }
-          }
-        },
-        "rsvp": {
-          "version": "3.0.18",
-          "from": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz",
-          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz"
-        }
-      }
-    },
-    "broccoli-flatten": {
-      "version": "0.1.1",
-      "from": "https://registry.npmjs.org/broccoli-flatten/-/broccoli-flatten-0.1.1.tgz",
-      "resolved": "https://registry.npmjs.org/broccoli-flatten/-/broccoli-flatten-0.1.1.tgz",
-      "dependencies": {
-        "broccoli-kitchen-sink-helpers": {
-          "version": "0.2.6",
-          "from": "https://registry.npmjs.org/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.6.tgz",
-          "resolved": "https://registry.npmjs.org/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.6.tgz",
-          "dependencies": {
-            "mkdirp": {
-              "version": "0.3.5",
-              "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz"
-            },
-            "glob": {
-              "version": "4.0.4",
-              "from": "https://registry.npmjs.org/glob/-/glob-4.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-4.0.4.tgz",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "minimatch": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                  "dependencies": {
-                    "lru-cache": {
-                      "version": "2.6.2",
-                      "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                    },
-                    "sigmund": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                    }
-                  }
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.6",
-                  "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz"
-                }
-              }
-            }
-          }
-        },
-        "path": {
-          "version": "0.4.10",
-          "from": "https://registry.npmjs.org/path/-/path-0.4.10.tgz",
-          "resolved": "https://registry.npmjs.org/path/-/path-0.4.10.tgz"
-        }
-      }
-    },
-    "broccoli-funnel": {
-      "version": "0.2.3",
-      "from": "git://github.com/igorminar/broccoli-funnel.git#6bfb53c4ca8dd3fa16416b9f85dc923a227e30ee",
-      "resolved": "git://github.com/igorminar/broccoli-funnel.git#6bfb53c4ca8dd3fa16416b9f85dc923a227e30ee",
-      "dependencies": {
-        "broccoli-read-compat": {
-          "version": "0.1.3",
-          "from": "https://registry.npmjs.org/broccoli-read-compat/-/broccoli-read-compat-0.1.3.tgz",
-          "resolved": "https://registry.npmjs.org/broccoli-read-compat/-/broccoli-read-compat-0.1.3.tgz",
-          "dependencies": {
-            "promise-map-series": {
-              "version": "0.2.1",
-              "from": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.2.1.tgz",
-              "resolved": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.2.1.tgz"
-            },
-            "quick-temp": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.2.tgz",
-              "dependencies": {
-                "rimraf": {
-                  "version": "2.2.8",
-                  "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-                  "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-                },
-                "mktemp": {
-                  "version": "0.3.5",
-                  "from": "https://registry.npmjs.org/mktemp/-/mktemp-0.3.5.tgz",
-                  "resolved": "https://registry.npmjs.org/mktemp/-/mktemp-0.3.5.tgz"
-                },
-                "underscore.string": {
-                  "version": "2.3.3",
-                  "from": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
-                  "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz"
-                }
-              }
-            },
-            "rimraf": {
-              "version": "2.3.3",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz"
-            },
-            "rsvp": {
-              "version": "3.0.18",
-              "from": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz",
-              "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz"
-            }
-          }
-        },
-        "core-object": {
-          "version": "0.0.2",
-          "from": "https://registry.npmjs.org/core-object/-/core-object-0.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/core-object/-/core-object-0.0.2.tgz",
-          "dependencies": {
-            "lodash-node": {
-              "version": "2.4.1",
-              "from": "https://registry.npmjs.org/lodash-node/-/lodash-node-2.4.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash-node/-/lodash-node-2.4.1.tgz"
-            }
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.0",
-          "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-          "dependencies": {
-            "minimist": {
-              "version": "0.0.8",
-              "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-            }
-          }
-        }
-      }
-    },
-    "broccoli-lodash": {
-      "version": "0.1.1",
-      "from": "https://registry.npmjs.org/broccoli-lodash/-/broccoli-lodash-0.1.1.tgz",
-      "resolved": "https://registry.npmjs.org/broccoli-lodash/-/broccoli-lodash-0.1.1.tgz",
-      "dependencies": {
-        "broccoli-glob-filter": {
-          "version": "0.1.2",
-          "from": "https://registry.npmjs.org/broccoli-glob-filter/-/broccoli-glob-filter-0.1.2.tgz",
-          "resolved": "https://registry.npmjs.org/broccoli-glob-filter/-/broccoli-glob-filter-0.1.2.tgz",
-          "dependencies": {
-            "dirmatch": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/dirmatch/-/dirmatch-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/dirmatch/-/dirmatch-0.1.2.tgz"
-            },
-            "mkdirp": {
-              "version": "0.5.0",
-              "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8",
-                  "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-                }
-              }
-            },
-            "quick-temp": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.2.tgz",
-              "dependencies": {
-                "rimraf": {
-                  "version": "2.2.8",
-                  "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-                  "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-                },
-                "mktemp": {
-                  "version": "0.3.5",
-                  "from": "https://registry.npmjs.org/mktemp/-/mktemp-0.3.5.tgz",
-                  "resolved": "https://registry.npmjs.org/mktemp/-/mktemp-0.3.5.tgz"
-                },
-                "underscore.string": {
-                  "version": "2.3.3",
-                  "from": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
-                  "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz"
-                }
-              }
-            },
-            "underscore": {
-              "version": "1.8.3",
-              "from": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz",
-              "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz"
-            }
-          }
-        }
-      }
-    },
-    "broccoli-merge-trees": {
-      "version": "0.2.1",
-      "from": "https://registry.npmjs.org/broccoli-merge-trees/-/broccoli-merge-trees-0.2.1.tgz",
-      "resolved": "https://registry.npmjs.org/broccoli-merge-trees/-/broccoli-merge-trees-0.2.1.tgz",
-      "dependencies": {
-        "promise-map-series": {
-          "version": "0.2.1",
-          "from": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.2.1.tgz",
-          "resolved": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.2.1.tgz",
-          "dependencies": {
-            "rsvp": {
-              "version": "3.0.18",
-              "from": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz",
-              "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz"
-            }
-          }
-        }
-      }
-    },
-    "broccoli-slow-trees": {
-      "version": "1.1.0",
-      "from": "https://registry.npmjs.org/broccoli-slow-trees/-/broccoli-slow-trees-1.1.0.tgz",
-      "resolved": "https://registry.npmjs.org/broccoli-slow-trees/-/broccoli-slow-trees-1.1.0.tgz"
-    },
-    "broccoli-stew": {
-      "version": "0.2.1",
-      "from": "https://registry.npmjs.org/broccoli-stew/-/broccoli-stew-0.2.1.tgz",
-      "resolved": "https://registry.npmjs.org/broccoli-stew/-/broccoli-stew-0.2.1.tgz",
-      "dependencies": {
-        "broccoli-funnel": {
-          "version": "0.1.7",
-          "from": "https://registry.npmjs.org/broccoli-funnel/-/broccoli-funnel-0.1.7.tgz",
-          "resolved": "https://registry.npmjs.org/broccoli-funnel/-/broccoli-funnel-0.1.7.tgz",
-          "dependencies": {
-            "core-object": {
-              "version": "0.0.2",
-              "from": "https://registry.npmjs.org/core-object/-/core-object-0.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/core-object/-/core-object-0.0.2.tgz"
-            },
-            "mkdirp": {
-              "version": "0.5.0",
-              "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8",
-                  "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-                }
-              }
-            },
-            "rimraf": {
-              "version": "2.3.3",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz"
-            }
-          }
-        },
-        "chalk": {
-          "version": "0.5.1",
-          "from": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-          "dependencies": {
-            "ansi-styles": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz"
-            },
-            "escape-string-regexp": {
-              "version": "1.0.3",
-              "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-            },
-            "has-ansi": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "0.2.1",
-                  "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                }
-              }
-            },
-            "strip-ansi": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "0.2.1",
-                  "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                }
-              }
-            },
-            "supports-color": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz"
-            }
-          }
-        },
-        "debug": {
-          "version": "2.1.3",
-          "from": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz",
-          "dependencies": {
-            "ms": {
-              "version": "0.7.0",
-              "from": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz"
-            }
-          }
-        },
-        "fs-extra": {
-          "version": "0.13.0",
-          "from": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.13.0.tgz",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.13.0.tgz",
-          "dependencies": {
-            "ncp": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/ncp/-/ncp-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/ncp/-/ncp-1.0.1.tgz"
-            },
-            "jsonfile": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.0.0.tgz"
-            },
-            "rimraf": {
-              "version": "2.3.3",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz"
-            }
-          }
-        },
-        "lodash-node": {
-          "version": "2.4.1",
-          "from": "https://registry.npmjs.org/lodash-node/-/lodash-node-2.4.1.tgz",
-          "resolved": "https://registry.npmjs.org/lodash-node/-/lodash-node-2.4.1.tgz"
-        },
-        "rsvp": {
-          "version": "3.0.18",
-          "from": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz",
-          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz"
-        }
-      }
-    },
-    "broccoli-writer": {
-      "version": "0.1.1",
-      "from": "https://registry.npmjs.org/broccoli-writer/-/broccoli-writer-0.1.1.tgz",
-      "resolved": "https://registry.npmjs.org/broccoli-writer/-/broccoli-writer-0.1.1.tgz",
-      "dependencies": {
-        "quick-temp": {
-          "version": "0.1.2",
-          "from": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.2.tgz",
-          "resolved": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.2.tgz",
-          "dependencies": {
-            "rimraf": {
-              "version": "2.2.8",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-            },
-            "mktemp": {
-              "version": "0.3.5",
-              "from": "https://registry.npmjs.org/mktemp/-/mktemp-0.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/mktemp/-/mktemp-0.3.5.tgz"
-            },
-            "underscore.string": {
-              "version": "2.3.3",
-              "from": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz"
-            }
-          }
-        },
-        "rsvp": {
-          "version": "3.0.18",
-          "from": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz",
-          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz"
-        }
-      }
-    },
-    "browserify": {
-      "version": "10.2.4",
-      "from": "https://registry.npmjs.org/browserify/-/browserify-10.2.4.tgz",
-      "resolved": "https://registry.npmjs.org/browserify/-/browserify-10.2.4.tgz",
-      "dependencies": {
-        "JSONStream": {
-          "version": "1.0.4",
-          "from": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.0.4.tgz",
-          "dependencies": {
-            "jsonparse": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.0.0.tgz"
-            },
-            "through": {
-              "version": "2.3.7",
-              "from": "https://registry.npmjs.org/through/-/through-2.3.7.tgz",
-              "resolved": "https://registry.npmjs.org/through/-/through-2.3.7.tgz"
-            }
-          }
-        },
-        "assert": {
-          "version": "1.3.0",
-          "from": "https://registry.npmjs.org/assert/-/assert-1.3.0.tgz",
-          "resolved": "https://registry.npmjs.org/assert/-/assert-1.3.0.tgz"
-        },
-        "browser-pack": {
-          "version": "5.0.1",
-          "from": "https://registry.npmjs.org/browser-pack/-/browser-pack-5.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/browser-pack/-/browser-pack-5.0.1.tgz",
-          "dependencies": {
-            "combine-source-map": {
-              "version": "0.6.1",
-              "from": "https://registry.npmjs.org/combine-source-map/-/combine-source-map-0.6.1.tgz",
-              "resolved": "https://registry.npmjs.org/combine-source-map/-/combine-source-map-0.6.1.tgz",
-              "dependencies": {
-                "convert-source-map": {
-                  "version": "1.1.1",
-                  "from": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.1.tgz"
-                },
-                "inline-source-map": {
-                  "version": "0.5.0",
-                  "from": "https://registry.npmjs.org/inline-source-map/-/inline-source-map-0.5.0.tgz",
-                  "resolved": "https://registry.npmjs.org/inline-source-map/-/inline-source-map-0.5.0.tgz"
-                },
-                "lodash.memoize": {
-                  "version": "3.0.4",
-                  "from": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-3.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-3.0.4.tgz"
-                },
-                "source-map": {
-                  "version": "0.4.2",
-                  "from": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.1",
-                      "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "umd": {
-              "version": "3.0.1",
-              "from": "https://registry.npmjs.org/umd/-/umd-3.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/umd/-/umd-3.0.1.tgz"
-            }
-          }
-        },
-        "browser-resolve": {
-          "version": "1.9.0",
-          "from": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.9.0.tgz",
-          "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.9.0.tgz"
-        },
-        "browserify-zlib": {
-          "version": "0.1.4",
-          "from": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
-          "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
-          "dependencies": {
-            "pako": {
-              "version": "0.2.7",
-              "from": "https://registry.npmjs.org/pako/-/pako-0.2.7.tgz",
-              "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.7.tgz"
-            }
-          }
-        },
-        "buffer": {
-          "version": "3.2.2",
-          "from": "https://registry.npmjs.org/buffer/-/buffer-3.2.2.tgz",
-          "resolved": "https://registry.npmjs.org/buffer/-/buffer-3.2.2.tgz",
-          "dependencies": {
-            "base64-js": {
-              "version": "0.0.8",
-              "from": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
-              "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz"
-            },
-            "ieee754": {
-              "version": "1.1.6",
-              "from": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.6.tgz",
-              "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.6.tgz"
-            },
-            "is-array": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/is-array/-/is-array-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/is-array/-/is-array-1.0.1.tgz"
-            }
-          }
-        },
-        "builtins": {
-          "version": "0.0.7",
-          "from": "https://registry.npmjs.org/builtins/-/builtins-0.0.7.tgz",
-          "resolved": "https://registry.npmjs.org/builtins/-/builtins-0.0.7.tgz"
-        },
-        "commondir": {
-          "version": "0.0.1",
-          "from": "https://registry.npmjs.org/commondir/-/commondir-0.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/commondir/-/commondir-0.0.1.tgz"
-        },
-        "concat-stream": {
-          "version": "1.4.10",
-          "from": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.4.10.tgz",
-          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.4.10.tgz",
-          "dependencies": {
-            "typedarray": {
-              "version": "0.0.6",
-              "from": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-              "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
-            }
-          }
-        },
-        "console-browserify": {
-          "version": "1.1.0",
-          "from": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
-          "dependencies": {
-            "date-now": {
-              "version": "0.1.4",
-              "from": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
-              "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz"
-            }
-          }
-        },
-        "constants-browserify": {
-          "version": "0.0.1",
-          "from": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-0.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-0.0.1.tgz"
-        },
-        "crypto-browserify": {
-          "version": "3.9.14",
-          "from": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.9.14.tgz",
-          "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.9.14.tgz",
-          "dependencies": {
-            "browserify-aes": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.0.1.tgz"
-            },
-            "browserify-sign": {
-              "version": "3.0.2",
-              "from": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-3.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-3.0.2.tgz",
-              "dependencies": {
-                "bn.js": {
-                  "version": "2.1.0",
-                  "from": "https://registry.npmjs.org/bn.js/-/bn.js-2.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-2.1.0.tgz"
-                },
-                "browserify-rsa": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-2.0.1.tgz"
-                },
-                "elliptic": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/elliptic/-/elliptic-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-3.1.0.tgz",
-                  "dependencies": {
-                    "brorand": {
-                      "version": "1.0.5",
-                      "from": "https://registry.npmjs.org/brorand/-/brorand-1.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.0.5.tgz"
-                    },
-                    "hash.js": {
-                      "version": "1.0.3",
-                      "from": "https://registry.npmjs.org/hash.js/-/hash.js-1.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.0.3.tgz"
-                    }
-                  }
-                },
-                "parse-asn1": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-3.0.1.tgz",
-                  "dependencies": {
-                    "asn1.js": {
-                      "version": "2.1.0",
-                      "from": "https://registry.npmjs.org/asn1.js/-/asn1.js-2.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-2.1.0.tgz",
-                      "dependencies": {
-                        "minimalistic-assert": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "create-ecdh": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-2.0.1.tgz",
-              "dependencies": {
-                "bn.js": {
-                  "version": "2.1.0",
-                  "from": "https://registry.npmjs.org/bn.js/-/bn.js-2.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-2.1.0.tgz"
-                },
-                "elliptic": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/elliptic/-/elliptic-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-3.1.0.tgz",
-                  "dependencies": {
-                    "brorand": {
-                      "version": "1.0.5",
-                      "from": "https://registry.npmjs.org/brorand/-/brorand-1.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.0.5.tgz"
-                    },
-                    "hash.js": {
-                      "version": "1.0.3",
-                      "from": "https://registry.npmjs.org/hash.js/-/hash.js-1.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.0.3.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "create-hash": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/create-hash/-/create-hash-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.1.1.tgz",
-              "dependencies": {
-                "ripemd160": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/ripemd160/-/ripemd160-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-1.0.1.tgz"
-                },
-                "sha.js": {
-                  "version": "2.4.2",
-                  "from": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.2.tgz"
-                }
-              }
-            },
-            "create-hmac": {
-              "version": "1.1.3",
-              "from": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.3.tgz",
-              "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.3.tgz"
-            },
-            "diffie-hellman": {
-              "version": "3.0.2",
-              "from": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-3.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-3.0.2.tgz",
-              "dependencies": {
-                "bn.js": {
-                  "version": "2.1.0",
-                  "from": "https://registry.npmjs.org/bn.js/-/bn.js-2.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-2.1.0.tgz"
-                },
-                "miller-rabin": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-2.0.1.tgz",
-                  "dependencies": {
-                    "brorand": {
-                      "version": "1.0.5",
-                      "from": "https://registry.npmjs.org/brorand/-/brorand-1.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.0.5.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "pbkdf2": {
-              "version": "3.0.4",
-              "from": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.4.tgz"
-            },
-            "public-encrypt": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-2.0.1.tgz",
-              "dependencies": {
-                "bn.js": {
-                  "version": "2.1.0",
-                  "from": "https://registry.npmjs.org/bn.js/-/bn.js-2.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-2.1.0.tgz"
-                },
-                "browserify-rsa": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-2.0.1.tgz"
-                },
-                "parse-asn1": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-3.0.1.tgz",
-                  "dependencies": {
-                    "asn1.js": {
-                      "version": "2.1.0",
-                      "from": "https://registry.npmjs.org/asn1.js/-/asn1.js-2.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-2.1.0.tgz",
-                      "dependencies": {
-                        "minimalistic-assert": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "randombytes": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/randombytes/-/randombytes-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.0.1.tgz"
-            }
-          }
-        },
-        "defined": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz"
-        },
-        "deps-sort": {
-          "version": "1.3.9",
-          "from": "https://registry.npmjs.org/deps-sort/-/deps-sort-1.3.9.tgz",
-          "resolved": "https://registry.npmjs.org/deps-sort/-/deps-sort-1.3.9.tgz"
-        },
-        "domain-browser": {
-          "version": "1.1.4",
-          "from": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.4.tgz",
-          "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.4.tgz"
-        },
-        "duplexer2": {
-          "version": "0.0.2",
-          "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz"
-        },
-        "events": {
-          "version": "1.0.2",
-          "from": "https://registry.npmjs.org/events/-/events-1.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/events/-/events-1.0.2.tgz"
-        },
-        "has": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/has/-/has-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/has/-/has-1.0.0.tgz"
-        },
-        "htmlescape": {
-          "version": "1.1.0",
-          "from": "https://registry.npmjs.org/htmlescape/-/htmlescape-1.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/htmlescape/-/htmlescape-1.1.0.tgz"
-        },
-        "http-browserify": {
-          "version": "1.7.0",
-          "from": "https://registry.npmjs.org/http-browserify/-/http-browserify-1.7.0.tgz",
-          "resolved": "https://registry.npmjs.org/http-browserify/-/http-browserify-1.7.0.tgz",
-          "dependencies": {
-            "Base64": {
-              "version": "0.2.1",
-              "from": "https://registry.npmjs.org/Base64/-/Base64-0.2.1.tgz",
-              "resolved": "https://registry.npmjs.org/Base64/-/Base64-0.2.1.tgz"
-            }
-          }
-        },
-        "https-browserify": {
-          "version": "0.0.0",
-          "from": "https://registry.npmjs.org/https-browserify/-/https-browserify-0.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-0.0.0.tgz"
-        },
-        "inherits": {
-          "version": "2.0.1",
-          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-        },
-        "insert-module-globals": {
-          "version": "6.5.0",
-          "from": "https://registry.npmjs.org/insert-module-globals/-/insert-module-globals-6.5.0.tgz",
-          "resolved": "https://registry.npmjs.org/insert-module-globals/-/insert-module-globals-6.5.0.tgz",
-          "dependencies": {
-            "combine-source-map": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/combine-source-map/-/combine-source-map-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/combine-source-map/-/combine-source-map-0.3.0.tgz",
-              "dependencies": {
-                "inline-source-map": {
-                  "version": "0.3.1",
-                  "from": "https://registry.npmjs.org/inline-source-map/-/inline-source-map-0.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inline-source-map/-/inline-source-map-0.3.1.tgz",
-                  "dependencies": {
-                    "source-map": {
-                      "version": "0.3.0",
-                      "from": "https://registry.npmjs.org/source-map/-/source-map-0.3.0.tgz",
-                      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.3.0.tgz",
-                      "dependencies": {
-                        "amdefine": {
-                          "version": "0.1.1",
-                          "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz",
-                          "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "convert-source-map": {
-                  "version": "0.3.5",
-                  "from": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz",
-                  "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz"
-                },
-                "source-map": {
-                  "version": "0.1.43",
-                  "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-                  "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.1",
-                      "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "lexical-scope": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/lexical-scope/-/lexical-scope-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/lexical-scope/-/lexical-scope-1.1.1.tgz",
-              "dependencies": {
-                "astw": {
-                  "version": "2.0.0",
-                  "from": "https://registry.npmjs.org/astw/-/astw-2.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/astw/-/astw-2.0.0.tgz",
-                  "dependencies": {
-                    "acorn": {
-                      "version": "1.2.2",
-                      "from": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz",
-                      "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "isarray": {
-          "version": "0.0.1",
-          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-        },
-        "labeled-stream-splicer": {
-          "version": "1.0.2",
-          "from": "https://registry.npmjs.org/labeled-stream-splicer/-/labeled-stream-splicer-1.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/labeled-stream-splicer/-/labeled-stream-splicer-1.0.2.tgz",
-          "dependencies": {
-            "stream-splicer": {
-              "version": "1.3.1",
-              "from": "https://registry.npmjs.org/stream-splicer/-/stream-splicer-1.3.1.tgz",
-              "resolved": "https://registry.npmjs.org/stream-splicer/-/stream-splicer-1.3.1.tgz",
-              "dependencies": {
-                "readable-wrap": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/readable-wrap/-/readable-wrap-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-wrap/-/readable-wrap-1.0.0.tgz"
-                },
-                "indexof": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "module-deps": {
-          "version": "3.8.1",
-          "from": "https://registry.npmjs.org/module-deps/-/module-deps-3.8.1.tgz",
-          "resolved": "https://registry.npmjs.org/module-deps/-/module-deps-3.8.1.tgz",
-          "dependencies": {
-            "detective": {
-              "version": "4.1.0",
-              "from": "https://registry.npmjs.org/detective/-/detective-4.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/detective/-/detective-4.1.0.tgz",
-              "dependencies": {
-                "acorn": {
-                  "version": "1.2.2",
-                  "from": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz",
-                  "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz"
-                },
-                "escodegen": {
-                  "version": "1.6.1",
-                  "from": "https://registry.npmjs.org/escodegen/-/escodegen-1.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.6.1.tgz",
-                  "dependencies": {
-                    "estraverse": {
-                      "version": "1.9.3",
-                      "from": "https://registry.npmjs.org/estraverse/-/estraverse-1.9.3.tgz",
-                      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.9.3.tgz"
-                    },
-                    "esutils": {
-                      "version": "1.1.6",
-                      "from": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz",
-                      "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz"
-                    },
-                    "esprima": {
-                      "version": "1.2.5",
-                      "from": "https://registry.npmjs.org/esprima/-/esprima-1.2.5.tgz",
-                      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.5.tgz"
-                    },
-                    "optionator": {
-                      "version": "0.5.0",
-                      "from": "https://registry.npmjs.org/optionator/-/optionator-0.5.0.tgz",
-                      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.5.0.tgz",
-                      "dependencies": {
-                        "prelude-ls": {
-                          "version": "1.1.2",
-                          "from": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-                          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
-                        },
-                        "deep-is": {
-                          "version": "0.1.3",
-                          "from": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-                          "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz"
-                        },
-                        "wordwrap": {
-                          "version": "0.0.3",
-                          "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-                          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
-                        },
-                        "type-check": {
-                          "version": "0.3.1",
-                          "from": "https://registry.npmjs.org/type-check/-/type-check-0.3.1.tgz",
-                          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.1.tgz"
-                        },
-                        "levn": {
-                          "version": "0.2.5",
-                          "from": "https://registry.npmjs.org/levn/-/levn-0.2.5.tgz",
-                          "resolved": "https://registry.npmjs.org/levn/-/levn-0.2.5.tgz"
-                        },
-                        "fast-levenshtein": {
-                          "version": "1.0.6",
-                          "from": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-1.0.6.tgz",
-                          "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-1.0.6.tgz"
-                        }
-                      }
-                    },
-                    "source-map": {
-                      "version": "0.1.43",
-                      "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-                      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-                      "dependencies": {
-                        "amdefine": {
-                          "version": "0.1.1",
-                          "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz",
-                          "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "stream-combiner2": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/stream-combiner2/-/stream-combiner2-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/stream-combiner2/-/stream-combiner2-1.0.2.tgz",
-              "dependencies": {
-                "through2": {
-                  "version": "0.5.1",
-                  "from": "https://registry.npmjs.org/through2/-/through2-0.5.1.tgz",
-                  "resolved": "https://registry.npmjs.org/through2/-/through2-0.5.1.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "xtend": {
-                      "version": "3.0.0",
-                      "from": "https://registry.npmjs.org/xtend/-/xtend-3.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/xtend/-/xtend-3.0.0.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "os-browserify": {
-          "version": "0.1.2",
-          "from": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.1.2.tgz",
-          "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.1.2.tgz"
-        },
-        "parents": {
-          "version": "1.0.1",
-          "from": "https://registry.npmjs.org/parents/-/parents-1.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/parents/-/parents-1.0.1.tgz",
-          "dependencies": {
-            "path-platform": {
-              "version": "0.11.15",
-              "from": "https://registry.npmjs.org/path-platform/-/path-platform-0.11.15.tgz",
-              "resolved": "https://registry.npmjs.org/path-platform/-/path-platform-0.11.15.tgz"
-            }
-          }
-        },
-        "path-browserify": {
-          "version": "0.0.0",
-          "from": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz"
-        },
-        "process": {
-          "version": "0.11.1",
-          "from": "https://registry.npmjs.org/process/-/process-0.11.1.tgz",
-          "resolved": "https://registry.npmjs.org/process/-/process-0.11.1.tgz"
-        },
-        "punycode": {
-          "version": "1.3.2",
-          "from": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz"
-        },
-        "querystring-es3": {
-          "version": "0.2.1",
-          "from": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-          "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz"
-        },
-        "read-only-stream": {
-          "version": "1.1.1",
-          "from": "https://registry.npmjs.org/read-only-stream/-/read-only-stream-1.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/read-only-stream/-/read-only-stream-1.1.1.tgz",
-          "dependencies": {
-            "readable-wrap": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/readable-wrap/-/readable-wrap-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/readable-wrap/-/readable-wrap-1.0.0.tgz"
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "1.1.13",
-          "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-          "dependencies": {
-            "core-util-is": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-            }
-          }
-        },
-        "resolve": {
-          "version": "1.1.6",
-          "from": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.tgz",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.tgz"
-        },
-        "shasum": {
-          "version": "1.0.1",
-          "from": "https://registry.npmjs.org/shasum/-/shasum-1.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/shasum/-/shasum-1.0.1.tgz",
-          "dependencies": {
-            "json-stable-stringify": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz",
-              "dependencies": {
-                "jsonify": {
-                  "version": "0.0.0",
-                  "from": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz"
-                }
-              }
-            },
-            "sha.js": {
-              "version": "2.3.6",
-              "from": "https://registry.npmjs.org/sha.js/-/sha.js-2.3.6.tgz",
-              "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.3.6.tgz"
-            }
-          }
-        },
-        "shell-quote": {
-          "version": "0.0.1",
-          "from": "https://registry.npmjs.org/shell-quote/-/shell-quote-0.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-0.0.1.tgz"
-        },
-        "stream-browserify": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-1.0.0.tgz"
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-        },
-        "subarg": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz"
-        },
-        "syntax-error": {
-          "version": "1.1.4",
-          "from": "https://registry.npmjs.org/syntax-error/-/syntax-error-1.1.4.tgz",
-          "resolved": "https://registry.npmjs.org/syntax-error/-/syntax-error-1.1.4.tgz",
-          "dependencies": {
-            "acorn": {
-              "version": "1.2.2",
-              "from": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz",
-              "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz"
-            }
-          }
-        },
-        "through2": {
-          "version": "1.1.1",
-          "from": "https://registry.npmjs.org/through2/-/through2-1.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-1.1.1.tgz"
-        },
-        "timers-browserify": {
-          "version": "1.4.1",
-          "from": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-1.4.1.tgz",
-          "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-1.4.1.tgz"
-        },
-        "tty-browserify": {
-          "version": "0.0.0",
-          "from": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
-        },
-        "url": {
-          "version": "0.10.3",
-          "from": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-          "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-          "dependencies": {
-            "querystring": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz"
-            }
-          }
-        },
-        "util": {
-          "version": "0.10.3",
-          "from": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz"
-        },
-        "vm-browserify": {
-          "version": "0.0.4",
-          "from": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
-          "dependencies": {
-            "indexof": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz"
-            }
-          }
-        }
-      }
-    },
-    "canonical-path": {
-      "version": "0.0.2",
-      "from": "https://registry.npmjs.org/canonical-path/-/canonical-path-0.0.2.tgz",
-      "resolved": "https://registry.npmjs.org/canonical-path/-/canonical-path-0.0.2.tgz"
-    },
-    "chokidar": {
-      "version": "1.0.1",
-      "from": "https://registry.npmjs.org/chokidar/-/chokidar-1.0.1.tgz",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.0.1.tgz",
-      "dependencies": {
-        "anymatch": {
-          "version": "1.3.0",
-          "from": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.0.tgz",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.0.tgz",
-          "dependencies": {
-            "micromatch": {
-              "version": "2.1.6",
-              "from": "https://registry.npmjs.org/micromatch/-/micromatch-2.1.6.tgz",
-              "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.1.6.tgz",
-              "dependencies": {
-                "arr-diff": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/arr-diff/-/arr-diff-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-1.0.1.tgz",
-                  "dependencies": {
-                    "array-slice": {
-                      "version": "0.2.3",
-                      "from": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz",
-                      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz"
-                    }
-                  }
-                },
-                "braces": {
-                  "version": "1.8.0",
-                  "from": "https://registry.npmjs.org/braces/-/braces-1.8.0.tgz",
-                  "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.0.tgz",
-                  "dependencies": {
-                    "expand-range": {
-                      "version": "1.8.1",
-                      "from": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.1.tgz",
-                      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.1.tgz",
-                      "dependencies": {
-                        "fill-range": {
-                          "version": "2.2.2",
-                          "from": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.2.tgz",
-                          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.2.tgz",
-                          "dependencies": {
-                            "is-number": {
-                              "version": "1.1.2",
-                              "from": "https://registry.npmjs.org/is-number/-/is-number-1.1.2.tgz",
-                              "resolved": "https://registry.npmjs.org/is-number/-/is-number-1.1.2.tgz"
-                            },
-                            "isobject": {
-                              "version": "1.0.0",
-                              "from": "https://registry.npmjs.org/isobject/-/isobject-1.0.0.tgz",
-                              "resolved": "https://registry.npmjs.org/isobject/-/isobject-1.0.0.tgz"
-                            },
-                            "randomatic": {
-                              "version": "1.1.0",
-                              "from": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.0.tgz",
-                              "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.0.tgz"
-                            },
-                            "repeat-string": {
-                              "version": "1.5.2",
-                              "from": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.5.2.tgz",
-                              "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.5.2.tgz"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "preserve": {
-                      "version": "0.2.0",
-                      "from": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
-                      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz"
-                    },
-                    "repeat-element": {
-                      "version": "1.1.2",
-                      "from": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
-                      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz"
-                    }
-                  }
-                },
-                "debug": {
-                  "version": "2.2.0",
-                  "from": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
-                  "dependencies": {
-                    "ms": {
-                      "version": "0.7.1",
-                      "from": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz"
-                    }
-                  }
-                },
-                "expand-brackets": {
-                  "version": "0.1.1",
-                  "from": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.1.tgz"
-                },
-                "filename-regex": {
-                  "version": "2.0.0",
-                  "from": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.0.tgz"
-                },
-                "kind-of": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz"
-                },
-                "object.omit": {
-                  "version": "0.2.1",
-                  "from": "https://registry.npmjs.org/object.omit/-/object.omit-0.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-0.2.1.tgz",
-                  "dependencies": {
-                    "for-own": {
-                      "version": "0.1.3",
-                      "from": "https://registry.npmjs.org/for-own/-/for-own-0.1.3.tgz",
-                      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.3.tgz",
-                      "dependencies": {
-                        "for-in": {
-                          "version": "0.1.4",
-                          "from": "https://registry.npmjs.org/for-in/-/for-in-0.1.4.tgz",
-                          "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.4.tgz"
-                        }
-                      }
-                    },
-                    "isobject": {
-                      "version": "0.2.0",
-                      "from": "https://registry.npmjs.org/isobject/-/isobject-0.2.0.tgz",
-                      "resolved": "https://registry.npmjs.org/isobject/-/isobject-0.2.0.tgz"
-                    }
-                  }
-                },
-                "parse-glob": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.2.tgz",
-                  "dependencies": {
-                    "glob-base": {
-                      "version": "0.2.0",
-                      "from": "https://registry.npmjs.org/glob-base/-/glob-base-0.2.0.tgz",
-                      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.2.0.tgz"
-                    },
-                    "is-dotfile": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.1.tgz"
-                    },
-                    "is-extglob": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz"
-                    }
-                  }
-                },
-                "regex-cache": {
-                  "version": "0.4.2",
-                  "from": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.2.tgz",
-                  "dependencies": {
-                    "is-equal-shallow": {
-                      "version": "0.1.2",
-                      "from": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.2.tgz",
-                      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.2.tgz",
-                      "dependencies": {
-                        "is-primitive": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/is-primitive/-/is-primitive-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-1.0.0.tgz"
-                        }
-                      }
-                    },
-                    "is-primitive": {
-                      "version": "2.0.0",
-                      "from": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "arrify": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/arrify/-/arrify-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.0.tgz"
-        },
-        "async-each": {
-          "version": "0.1.6",
-          "from": "https://registry.npmjs.org/async-each/-/async-each-0.1.6.tgz",
-          "resolved": "https://registry.npmjs.org/async-each/-/async-each-0.1.6.tgz"
-        },
-        "glob-parent": {
-          "version": "1.2.0",
-          "from": "https://registry.npmjs.org/glob-parent/-/glob-parent-1.2.0.tgz",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-1.2.0.tgz"
-        },
-        "is-binary-path": {
-          "version": "1.0.1",
-          "from": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-          "dependencies": {
-            "binary-extensions": {
-              "version": "1.3.1",
-              "from": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.3.1.tgz",
-              "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.3.1.tgz"
-            }
-          }
-        },
-        "is-glob": {
-          "version": "1.1.3",
-          "from": "https://registry.npmjs.org/is-glob/-/is-glob-1.1.3.tgz",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-1.1.3.tgz"
-        },
-        "readdirp": {
-          "version": "1.3.0",
-          "from": "https://registry.npmjs.org/readdirp/-/readdirp-1.3.0.tgz",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-1.3.0.tgz",
-          "dependencies": {
-            "graceful-fs": {
-              "version": "2.0.3",
-              "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz"
-            },
-            "minimatch": {
-              "version": "0.2.14",
-              "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.4",
-                  "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz",
-                  "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz"
-                },
-                "sigmund": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
-                }
-              }
-            },
-            "readable-stream": {
-              "version": "1.0.33",
-              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                },
-                "string_decoder": {
-                  "version": "0.10.31",
-                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "fsevents": {
-          "version": "0.3.6",
-          "from": "https://registry.npmjs.org/fsevents/-/fsevents-0.3.6.tgz",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-0.3.6.tgz",
-          "dependencies": {
-            "nan": {
-              "version": "1.8.4",
-              "from": "https://registry.npmjs.org/nan/-/nan-1.8.4.tgz",
-              "resolved": "https://registry.npmjs.org/nan/-/nan-1.8.4.tgz"
-            }
-          }
-        }
-      }
-    },
-    "clang-format": {
-      "version": "1.0.25",
-      "from": "https://registry.npmjs.org/clang-format/-/clang-format-1.0.25.tgz",
-      "resolved": "https://registry.npmjs.org/clang-format/-/clang-format-1.0.25.tgz",
-      "dependencies": {
-        "resolve": {
-          "version": "1.1.6",
-          "from": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.tgz",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.tgz"
-        }
-      }
-    },
-    "conventional-changelog": {
-      "version": "0.0.17",
-      "from": "https://registry.npmjs.org/conventional-changelog/-/conventional-changelog-0.0.17.tgz",
-      "resolved": "https://registry.npmjs.org/conventional-changelog/-/conventional-changelog-0.0.17.tgz",
-      "dependencies": {
-        "dateformat": {
-          "version": "1.0.11",
-          "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-          "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-          "dependencies": {
-            "get-stdin": {
-              "version": "4.0.1",
-              "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-            },
-            "meow": {
-              "version": "3.1.0",
-              "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-              "dependencies": {
-                "camelcase-keys": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                  "dependencies": {
-                    "camelcase": {
-                      "version": "1.0.2",
-                      "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                    },
-                    "map-obj": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                    }
-                  }
-                },
-                "object-assign": {
-                  "version": "2.0.0",
-                  "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-                }
-              }
-            }
-          }
-        },
-        "github-url-from-git": {
-          "version": "1.4.0",
-          "from": "https://registry.npmjs.org/github-url-from-git/-/github-url-from-git-1.4.0.tgz",
-          "resolved": "https://registry.npmjs.org/github-url-from-git/-/github-url-from-git-1.4.0.tgz"
-        },
-        "lodash": {
-          "version": "3.8.0",
-          "from": "https://registry.npmjs.org/lodash/-/lodash-3.8.0.tgz",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.8.0.tgz"
-        },
-        "normalize-package-data": {
-          "version": "1.0.3",
-          "from": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-1.0.3.tgz",
-          "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-1.0.3.tgz",
-          "dependencies": {
-            "github-url-from-username-repo": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/github-url-from-username-repo/-/github-url-from-username-repo-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/github-url-from-username-repo/-/github-url-from-username-repo-1.0.2.tgz"
-            }
-          }
-        }
-      }
-    },
-    "css": {
-      "version": "2.2.0",
-      "from": "git://github.com/mlaval/css.git#9de8bc988d13c27d143486cf60ddf5f9deec0472",
-      "resolved": "git://github.com/mlaval/css.git#9de8bc988d13c27d143486cf60ddf5f9deec0472",
-      "dependencies": {
-        "source-map": {
-          "version": "0.1.43",
-          "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-            }
-          }
-        },
-        "source-map-resolve": {
-          "version": "0.3.1",
-          "from": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.3.1.tgz",
-          "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.3.1.tgz",
-          "dependencies": {
-            "source-map-url": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.3.0.tgz"
-            },
-            "atob": {
-              "version": "1.1.2",
-              "from": "https://registry.npmjs.org/atob/-/atob-1.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/atob/-/atob-1.1.2.tgz"
-            },
-            "resolve-url": {
-              "version": "0.2.1",
-              "from": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-              "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz"
-            }
-          }
-        },
-        "urix": {
-          "version": "0.1.0",
-          "from": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz"
-        },
-        "inherits": {
-          "version": "2.0.1",
-          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-        }
-      }
-    },
-    "del": {
-      "version": "1.1.1",
-      "from": "https://registry.npmjs.org/del/-/del-1.1.1.tgz",
-      "resolved": "https://registry.npmjs.org/del/-/del-1.1.1.tgz",
-      "dependencies": {
-        "each-async": {
-          "version": "1.1.1",
-          "from": "https://registry.npmjs.org/each-async/-/each-async-1.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/each-async/-/each-async-1.1.1.tgz",
-          "dependencies": {
-            "onetime": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/onetime/-/onetime-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.0.0.tgz"
-            },
-            "set-immediate-shim": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz"
-            }
-          }
-        },
-        "globby": {
-          "version": "1.2.0",
-          "from": "https://registry.npmjs.org/globby/-/globby-1.2.0.tgz",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-1.2.0.tgz",
-          "dependencies": {
-            "array-union": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/array-union/-/array-union-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.1.tgz",
-              "dependencies": {
-                "array-uniq": {
-                  "version": "1.0.2",
-                  "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-                }
-              }
-            },
-            "async": {
-              "version": "0.9.0",
-              "from": "https://registry.npmjs.org/async/-/async-0.9.0.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz"
-            }
-          }
-        },
-        "is-path-cwd": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz"
-        },
-        "is-path-in-cwd": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz",
-          "dependencies": {
-            "is-path-inside": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.0.tgz",
-              "dependencies": {
-                "path-is-inside": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "object-assign": {
-          "version": "2.0.0",
-          "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-        },
-        "rimraf": {
-          "version": "2.3.3",
-          "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz"
-        }
-      }
-    },
-    "dgeni": {
-      "version": "0.4.1",
-      "from": "https://registry.npmjs.org/dgeni/-/dgeni-0.4.1.tgz",
-      "resolved": "https://registry.npmjs.org/dgeni/-/dgeni-0.4.1.tgz",
-      "dependencies": {
-        "dependency-graph": {
-          "version": "0.1.0",
-          "from": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.1.0.tgz",
-          "dependencies": {
-            "underscore": {
-              "version": "1.4.4",
-              "from": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
-              "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz"
-            }
-          }
-        },
-        "di": {
-          "version": "0.0.1",
-          "from": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz"
-        },
-        "optimist": {
-          "version": "0.6.1",
-          "from": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-          "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-          "dependencies": {
-            "wordwrap": {
-              "version": "0.0.3",
-              "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
-            },
-            "minimist": {
-              "version": "0.0.10",
-              "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
-            }
-          }
-        },
-        "q": {
-          "version": "0.9.7",
-          "from": "https://registry.npmjs.org/q/-/q-0.9.7.tgz",
-          "resolved": "https://registry.npmjs.org/q/-/q-0.9.7.tgz"
-        },
-        "validate.js": {
-          "version": "0.2.0",
-          "from": "https://registry.npmjs.org/validate.js/-/validate.js-0.2.0.tgz",
-          "resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.2.0.tgz"
-        },
-        "winston": {
-          "version": "0.7.3",
-          "from": "https://registry.npmjs.org/winston/-/winston-0.7.3.tgz",
-          "resolved": "https://registry.npmjs.org/winston/-/winston-0.7.3.tgz",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10",
-              "from": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-            },
-            "colors": {
-              "version": "0.6.2",
-              "from": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz",
-              "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz"
-            },
-            "cycle": {
-              "version": "1.0.3",
-              "from": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz"
-            },
-            "eyes": {
-              "version": "0.1.8",
-              "from": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz",
-              "resolved": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz"
-            },
-            "pkginfo": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.0.tgz"
-            },
-            "request": {
-              "version": "2.16.6",
-              "from": "https://registry.npmjs.org/request/-/request-2.16.6.tgz",
-              "resolved": "https://registry.npmjs.org/request/-/request-2.16.6.tgz",
-              "dependencies": {
-                "form-data": {
-                  "version": "0.0.10",
-                  "from": "https://registry.npmjs.org/form-data/-/form-data-0.0.10.tgz",
-                  "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.0.10.tgz",
-                  "dependencies": {
-                    "combined-stream": {
-                      "version": "0.0.7",
-                      "from": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                      "dependencies": {
-                        "delayed-stream": {
-                          "version": "0.0.5",
-                          "from": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "mime": {
-                  "version": "1.2.11",
-                  "from": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz",
-                  "resolved": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz"
-                },
-                "hawk": {
-                  "version": "0.10.2",
-                  "from": "https://registry.npmjs.org/hawk/-/hawk-0.10.2.tgz",
-                  "resolved": "https://registry.npmjs.org/hawk/-/hawk-0.10.2.tgz",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "0.7.6",
-                      "from": "https://registry.npmjs.org/hoek/-/hoek-0.7.6.tgz",
-                      "resolved": "https://registry.npmjs.org/hoek/-/hoek-0.7.6.tgz"
-                    },
-                    "boom": {
-                      "version": "0.3.8",
-                      "from": "https://registry.npmjs.org/boom/-/boom-0.3.8.tgz",
-                      "resolved": "https://registry.npmjs.org/boom/-/boom-0.3.8.tgz"
-                    },
-                    "cryptiles": {
-                      "version": "0.1.3",
-                      "from": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.1.3.tgz",
-                      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.1.3.tgz"
-                    },
-                    "sntp": {
-                      "version": "0.1.4",
-                      "from": "https://registry.npmjs.org/sntp/-/sntp-0.1.4.tgz",
-                      "resolved": "https://registry.npmjs.org/sntp/-/sntp-0.1.4.tgz"
-                    }
-                  }
-                },
-                "cookie-jar": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/cookie-jar/-/cookie-jar-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/cookie-jar/-/cookie-jar-0.2.0.tgz"
-                },
-                "aws-sign": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/aws-sign/-/aws-sign-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/aws-sign/-/aws-sign-0.2.0.tgz"
-                },
-                "oauth-sign": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.2.0.tgz"
-                },
-                "forever-agent": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.2.0.tgz"
-                },
-                "tunnel-agent": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.2.0.tgz"
-                },
-                "json-stringify-safe": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-3.0.0.tgz"
-                },
-                "qs": {
-                  "version": "0.5.6",
-                  "from": "https://registry.npmjs.org/qs/-/qs-0.5.6.tgz",
-                  "resolved": "https://registry.npmjs.org/qs/-/qs-0.5.6.tgz"
-                }
-              }
-            },
-            "stack-trace": {
-              "version": "0.0.9",
-              "from": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.9.tgz",
-              "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.9.tgz"
-            }
-          }
-        }
-      }
-    },
-    "dgeni-packages": {
-      "version": "0.10.15",
-      "from": "https://registry.npmjs.org/dgeni-packages/-/dgeni-packages-0.10.15.tgz",
-      "resolved": "https://registry.npmjs.org/dgeni-packages/-/dgeni-packages-0.10.15.tgz",
-      "dependencies": {
-        "catharsis": {
-          "version": "0.8.7",
-          "from": "https://registry.npmjs.org/catharsis/-/catharsis-0.8.7.tgz",
-          "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.8.7.tgz",
-          "dependencies": {
-            "underscore-contrib": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/underscore-contrib/-/underscore-contrib-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/underscore-contrib/-/underscore-contrib-0.3.0.tgz",
-              "dependencies": {
-                "underscore": {
-                  "version": "1.6.0",
-                  "from": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
-                  "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz"
-                }
-              }
-            }
-          }
-        },
-        "change-case": {
-          "version": "2.3.0",
-          "from": "https://registry.npmjs.org/change-case/-/change-case-2.3.0.tgz",
-          "resolved": "https://registry.npmjs.org/change-case/-/change-case-2.3.0.tgz",
-          "dependencies": {
-            "camel-case": {
-              "version": "1.1.2",
-              "from": "https://registry.npmjs.org/camel-case/-/camel-case-1.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-1.1.2.tgz"
-            },
-            "constant-case": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/constant-case/-/constant-case-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-1.1.1.tgz"
-            },
-            "dot-case": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/dot-case/-/dot-case-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-1.1.1.tgz"
-            },
-            "is-lower-case": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-1.1.1.tgz"
-            },
-            "is-upper-case": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/is-upper-case/-/is-upper-case-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/is-upper-case/-/is-upper-case-1.1.1.tgz"
-            },
-            "lower-case": {
-              "version": "1.1.2",
-              "from": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.2.tgz"
-            },
-            "lower-case-first": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/lower-case-first/-/lower-case-first-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lower-case-first/-/lower-case-first-1.0.0.tgz"
-            },
-            "param-case": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/param-case/-/param-case-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/param-case/-/param-case-1.1.1.tgz"
-            },
-            "pascal-case": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/pascal-case/-/pascal-case-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-1.1.1.tgz"
-            },
-            "path-case": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/path-case/-/path-case-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/path-case/-/path-case-1.1.1.tgz"
-            },
-            "sentence-case": {
-              "version": "1.1.2",
-              "from": "https://registry.npmjs.org/sentence-case/-/sentence-case-1.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-1.1.2.tgz"
-            },
-            "snake-case": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/snake-case/-/snake-case-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-1.1.1.tgz"
-            },
-            "swap-case": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/swap-case/-/swap-case-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/swap-case/-/swap-case-1.1.1.tgz"
-            },
-            "title-case": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/title-case/-/title-case-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/title-case/-/title-case-1.1.1.tgz"
-            },
-            "upper-case": {
-              "version": "1.1.2",
-              "from": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.2.tgz"
-            },
-            "upper-case-first": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-1.1.1.tgz"
-            }
-          }
-        },
-        "esprima": {
-          "version": "1.2.5",
-          "from": "https://registry.npmjs.org/esprima/-/esprima-1.2.5.tgz",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.5.tgz"
-        },
-        "estraverse": {
-          "version": "1.9.3",
-          "from": "https://registry.npmjs.org/estraverse/-/estraverse-1.9.3.tgz",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.9.3.tgz"
-        },
-        "glob": {
-          "version": "3.2.11",
-          "from": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-            }
-          }
-        },
-        "htmlparser2": {
-          "version": "3.8.3",
-          "from": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.3.tgz",
-          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.3.tgz",
-          "dependencies": {
-            "domhandler": {
-              "version": "2.3.0",
-              "from": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz"
-            },
-            "domutils": {
-              "version": "1.5.1",
-              "from": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-              "dependencies": {
-                "dom-serializer": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
-                  "dependencies": {
-                    "domelementtype": {
-                      "version": "1.1.3",
-                      "from": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
-                      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz"
-                    },
-                    "entities": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "domelementtype": {
-              "version": "1.3.0",
-              "from": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz"
-            },
-            "readable-stream": {
-              "version": "1.1.13",
-              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                },
-                "string_decoder": {
-                  "version": "0.10.31",
-                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            },
-            "entities": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz"
-            }
-          }
-        },
-        "minimatch": {
-          "version": "0.3.0",
-          "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-          "dependencies": {
-            "lru-cache": {
-              "version": "2.6.4",
-              "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz"
-            },
-            "sigmund": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
-            }
-          }
-        },
-        "nunjucks": {
-          "version": "1.3.4",
-          "from": "https://registry.npmjs.org/nunjucks/-/nunjucks-1.3.4.tgz",
-          "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-1.3.4.tgz",
-          "dependencies": {
-            "optimist": {
-              "version": "0.6.1",
-              "from": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-              "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-              "dependencies": {
-                "wordwrap": {
-                  "version": "0.0.3",
-                  "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
-                },
-                "minimist": {
-                  "version": "0.0.10",
-                  "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
-                }
-              }
-            },
-            "chokidar": {
-              "version": "0.12.6",
-              "from": "https://registry.npmjs.org/chokidar/-/chokidar-0.12.6.tgz",
-              "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-0.12.6.tgz",
-              "dependencies": {
-                "readdirp": {
-                  "version": "1.3.0",
-                  "from": "https://registry.npmjs.org/readdirp/-/readdirp-1.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-1.3.0.tgz",
-                  "dependencies": {
-                    "graceful-fs": {
-                      "version": "2.0.3",
-                      "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz"
-                    },
-                    "minimatch": {
-                      "version": "0.2.14",
-                      "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-                      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.4",
-                          "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz",
-                          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz"
-                        },
-                        "sigmund": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "async-each": {
-                  "version": "0.1.6",
-                  "from": "https://registry.npmjs.org/async-each/-/async-each-0.1.6.tgz",
-                  "resolved": "https://registry.npmjs.org/async-each/-/async-each-0.1.6.tgz"
-                },
-                "fsevents": {
-                  "version": "0.3.6",
-                  "from": "https://registry.npmjs.org/fsevents/-/fsevents-0.3.6.tgz",
-                  "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-0.3.6.tgz",
-                  "dependencies": {
-                    "nan": {
-                      "version": "1.8.4",
-                      "from": "https://registry.npmjs.org/nan/-/nan-1.8.4.tgz",
-                      "resolved": "https://registry.npmjs.org/nan/-/nan-1.8.4.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "q": {
-          "version": "1.0.1",
-          "from": "https://registry.npmjs.org/q/-/q-1.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/q/-/q-1.0.1.tgz"
-        },
-        "q-io": {
-          "version": "1.10.9",
-          "from": "https://registry.npmjs.org/q-io/-/q-io-1.10.9.tgz",
-          "resolved": "https://registry.npmjs.org/q-io/-/q-io-1.10.9.tgz",
-          "dependencies": {
-            "q": {
-              "version": "0.9.7",
-              "from": "https://registry.npmjs.org/q/-/q-0.9.7.tgz",
-              "resolved": "https://registry.npmjs.org/q/-/q-0.9.7.tgz"
-            },
-            "qs": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/qs/-/qs-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-0.1.0.tgz"
-            },
-            "url2": {
-              "version": "0.0.0",
-              "from": "https://registry.npmjs.org/url2/-/url2-0.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/url2/-/url2-0.0.0.tgz"
-            },
-            "mime": {
-              "version": "1.2.11",
-              "from": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz",
-              "resolved": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz"
-            },
-            "mimeparse": {
-              "version": "0.1.4",
-              "from": "https://registry.npmjs.org/mimeparse/-/mimeparse-0.1.4.tgz",
-              "resolved": "https://registry.npmjs.org/mimeparse/-/mimeparse-0.1.4.tgz"
-            },
-            "collections": {
-              "version": "0.2.2",
-              "from": "https://registry.npmjs.org/collections/-/collections-0.2.2.tgz",
-              "resolved": "https://registry.npmjs.org/collections/-/collections-0.2.2.tgz",
-              "dependencies": {
-                "weak-map": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/weak-map/-/weak-map-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/weak-map/-/weak-map-1.0.0.tgz"
-                }
-              }
-            }
-          }
-        },
-        "stringmap": {
-          "version": "0.2.2",
-          "from": "https://registry.npmjs.org/stringmap/-/stringmap-0.2.2.tgz",
-          "resolved": "https://registry.npmjs.org/stringmap/-/stringmap-0.2.2.tgz"
-        },
-        "winston": {
-          "version": "0.7.3",
-          "from": "https://registry.npmjs.org/winston/-/winston-0.7.3.tgz",
-          "resolved": "https://registry.npmjs.org/winston/-/winston-0.7.3.tgz",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10",
-              "from": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-            },
-            "colors": {
-              "version": "0.6.2",
-              "from": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz",
-              "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz"
-            },
-            "cycle": {
-              "version": "1.0.3",
-              "from": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz"
-            },
-            "eyes": {
-              "version": "0.1.8",
-              "from": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz",
-              "resolved": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz"
-            },
-            "pkginfo": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.0.tgz"
-            },
-            "request": {
-              "version": "2.16.6",
-              "from": "https://registry.npmjs.org/request/-/request-2.16.6.tgz",
-              "resolved": "https://registry.npmjs.org/request/-/request-2.16.6.tgz",
-              "dependencies": {
-                "form-data": {
-                  "version": "0.0.10",
-                  "from": "https://registry.npmjs.org/form-data/-/form-data-0.0.10.tgz",
-                  "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.0.10.tgz",
-                  "dependencies": {
-                    "combined-stream": {
-                      "version": "0.0.7",
-                      "from": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                      "dependencies": {
-                        "delayed-stream": {
-                          "version": "0.0.5",
-                          "from": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "mime": {
-                  "version": "1.2.11",
-                  "from": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz",
-                  "resolved": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz"
-                },
-                "hawk": {
-                  "version": "0.10.2",
-                  "from": "https://registry.npmjs.org/hawk/-/hawk-0.10.2.tgz",
-                  "resolved": "https://registry.npmjs.org/hawk/-/hawk-0.10.2.tgz",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "0.7.6",
-                      "from": "https://registry.npmjs.org/hoek/-/hoek-0.7.6.tgz",
-                      "resolved": "https://registry.npmjs.org/hoek/-/hoek-0.7.6.tgz"
-                    },
-                    "boom": {
-                      "version": "0.3.8",
-                      "from": "https://registry.npmjs.org/boom/-/boom-0.3.8.tgz",
-                      "resolved": "https://registry.npmjs.org/boom/-/boom-0.3.8.tgz"
-                    },
-                    "cryptiles": {
-                      "version": "0.1.3",
-                      "from": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.1.3.tgz",
-                      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.1.3.tgz"
-                    },
-                    "sntp": {
-                      "version": "0.1.4",
-                      "from": "https://registry.npmjs.org/sntp/-/sntp-0.1.4.tgz",
-                      "resolved": "https://registry.npmjs.org/sntp/-/sntp-0.1.4.tgz"
-                    }
-                  }
-                },
-                "cookie-jar": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/cookie-jar/-/cookie-jar-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/cookie-jar/-/cookie-jar-0.2.0.tgz"
-                },
-                "aws-sign": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/aws-sign/-/aws-sign-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/aws-sign/-/aws-sign-0.2.0.tgz"
-                },
-                "oauth-sign": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.2.0.tgz"
-                },
-                "forever-agent": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.2.0.tgz"
-                },
-                "tunnel-agent": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.2.0.tgz"
-                },
-                "json-stringify-safe": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-3.0.0.tgz"
-                },
-                "qs": {
-                  "version": "0.5.6",
-                  "from": "https://registry.npmjs.org/qs/-/qs-0.5.6.tgz",
-                  "resolved": "https://registry.npmjs.org/qs/-/qs-0.5.6.tgz"
-                }
-              }
-            },
-            "stack-trace": {
-              "version": "0.0.9",
-              "from": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.9.tgz",
-              "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.9.tgz"
-            }
-          }
-        }
-      }
-    },
-    "es6-module-loader": {
-      "version": "0.9.4",
-      "from": "https://registry.npmjs.org/es6-module-loader/-/es6-module-loader-0.9.4.tgz",
-      "resolved": "https://registry.npmjs.org/es6-module-loader/-/es6-module-loader-0.9.4.tgz",
-      "dependencies": {
-        "grunt-contrib-uglify": {
-          "version": "0.6.0",
-          "from": "https://registry.npmjs.org/grunt-contrib-uglify/-/grunt-contrib-uglify-0.6.0.tgz",
-          "resolved": "https://registry.npmjs.org/grunt-contrib-uglify/-/grunt-contrib-uglify-0.6.0.tgz",
-          "dependencies": {
-            "chalk": {
-              "version": "0.5.1",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz"
-                }
-              }
-            },
-            "maxmin": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/maxmin/-/maxmin-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/maxmin/-/maxmin-1.1.0.tgz",
-              "dependencies": {
-                "chalk": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-                  "dependencies": {
-                    "ansi-styles": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                    },
-                    "escape-string-regexp": {
-                      "version": "1.0.3",
-                      "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                    },
-                    "has-ansi": {
-                      "version": "1.0.3",
-                      "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                      "dependencies": {
-                        "ansi-regex": {
-                          "version": "1.1.1",
-                          "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                        },
-                        "get-stdin": {
-                          "version": "4.0.1",
-                          "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                        }
-                      }
-                    },
-                    "supports-color": {
-                      "version": "1.3.1",
-                      "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                    }
-                  }
-                },
-                "figures": {
-                  "version": "1.3.5",
-                  "from": "https://registry.npmjs.org/figures/-/figures-1.3.5.tgz",
-                  "resolved": "https://registry.npmjs.org/figures/-/figures-1.3.5.tgz"
-                },
-                "gzip-size": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/gzip-size/-/gzip-size-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-1.0.0.tgz",
-                  "dependencies": {
-                    "concat-stream": {
-                      "version": "1.4.8",
-                      "from": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.4.8.tgz",
-                      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.4.8.tgz",
-                      "dependencies": {
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        },
-                        "typedarray": {
-                          "version": "0.0.6",
-                          "from": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-                          "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
-                        },
-                        "readable-stream": {
-                          "version": "1.1.13",
-                          "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                          "dependencies": {
-                            "core-util-is": {
-                              "version": "1.0.1",
-                              "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                            },
-                            "isarray": {
-                              "version": "0.0.1",
-                              "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                            },
-                            "string_decoder": {
-                              "version": "0.10.31",
-                              "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "browserify-zlib": {
-                      "version": "0.1.4",
-                      "from": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
-                      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
-                      "dependencies": {
-                        "pako": {
-                          "version": "0.2.6",
-                          "from": "https://registry.npmjs.org/pako/-/pako-0.2.6.tgz",
-                          "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.6.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "pretty-bytes": {
-                  "version": "1.0.4",
-                  "from": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-1.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-1.0.4.tgz",
-                  "dependencies": {
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    },
-                    "meow": {
-                      "version": "3.1.0",
-                      "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                      "dependencies": {
-                        "camelcase-keys": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                          "dependencies": {
-                            "camelcase": {
-                              "version": "1.0.2",
-                              "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                            },
-                            "map-obj": {
-                              "version": "1.0.1",
-                              "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                            }
-                          }
-                        },
-                        "object-assign": {
-                          "version": "2.0.0",
-                          "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "uglify-js": {
-              "version": "2.4.21",
-              "from": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.4.21.tgz",
-              "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.4.21.tgz",
-              "dependencies": {
-                "async": {
-                  "version": "0.2.10",
-                  "from": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-                  "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-                },
-                "source-map": {
-                  "version": "0.1.34",
-                  "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.34.tgz",
-                  "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.34.tgz",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                    }
-                  }
-                },
-                "uglify-to-browserify": {
-                  "version": "1.0.2",
-                  "from": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz"
-                },
-                "yargs": {
-                  "version": "3.5.4",
-                  "from": "https://registry.npmjs.org/yargs/-/yargs-3.5.4.tgz",
-                  "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.5.4.tgz",
-                  "dependencies": {
-                    "camelcase": {
-                      "version": "1.0.2",
-                      "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                    },
-                    "decamelize": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/decamelize/-/decamelize-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.0.0.tgz"
-                    },
-                    "window-size": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz"
-                    },
-                    "wordwrap": {
-                      "version": "0.0.2",
-                      "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "uri-path": {
-              "version": "0.0.2",
-              "from": "https://registry.npmjs.org/uri-path/-/uri-path-0.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/uri-path/-/uri-path-0.0.2.tgz"
-            }
-          }
-        },
-        "traceur": {
-          "version": "0.0.72",
-          "from": "https://registry.npmjs.org/traceur/-/traceur-0.0.72.tgz",
-          "resolved": "https://registry.npmjs.org/traceur/-/traceur-0.0.72.tgz",
-          "dependencies": {
-            "commander": {
-              "version": "2.8.1",
-              "from": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-              "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-              "dependencies": {
-                "graceful-readlink": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
-                }
-              }
-            },
-            "regexpu": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/regexpu/-/regexpu-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/regexpu/-/regexpu-0.3.0.tgz",
-              "dependencies": {
-                "recast": {
-                  "version": "0.8.8",
-                  "from": "https://registry.npmjs.org/recast/-/recast-0.8.8.tgz",
-                  "resolved": "https://registry.npmjs.org/recast/-/recast-0.8.8.tgz",
-                  "dependencies": {
-                    "esprima-fb": {
-                      "version": "7001.1.0-dev-harmony-fb",
-                      "from": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-7001.1.0-dev-harmony-fb.tgz",
-                      "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-7001.1.0-dev-harmony-fb.tgz"
-                    },
-                    "source-map": {
-                      "version": "0.1.32",
-                      "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-                      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-                      "dependencies": {
-                        "amdefine": {
-                          "version": "0.1.0",
-                          "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                        }
-                      }
-                    },
-                    "private": {
-                      "version": "0.1.6",
-                      "from": "https://registry.npmjs.org/private/-/private-0.1.6.tgz",
-                      "resolved": "https://registry.npmjs.org/private/-/private-0.1.6.tgz"
-                    },
-                    "cls": {
-                      "version": "0.1.5",
-                      "from": "https://registry.npmjs.org/cls/-/cls-0.1.5.tgz",
-                      "resolved": "https://registry.npmjs.org/cls/-/cls-0.1.5.tgz"
-                    },
-                    "depd": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz"
-                    },
-                    "ast-types": {
-                      "version": "0.5.7",
-                      "from": "https://registry.npmjs.org/ast-types/-/ast-types-0.5.7.tgz",
-                      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.5.7.tgz"
-                    }
-                  }
-                },
-                "regenerate": {
-                  "version": "1.2.1",
-                  "from": "https://registry.npmjs.org/regenerate/-/regenerate-1.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.2.1.tgz"
-                },
-                "regjsgen": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz"
-                },
-                "regjsparser": {
-                  "version": "0.1.4",
-                  "from": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.4.tgz",
-                  "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.4.tgz",
-                  "dependencies": {
-                    "jsesc": {
-                      "version": "0.5.0",
-                      "from": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-                      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "rsvp": {
-              "version": "3.0.18",
-              "from": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz",
-              "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz"
-            },
-            "semver": {
-              "version": "2.3.2",
-              "from": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz"
-            }
-          }
-        },
-        "when": {
-          "version": "3.7.3",
-          "from": "https://registry.npmjs.org/when/-/when-3.7.3.tgz",
-          "resolved": "https://registry.npmjs.org/when/-/when-3.7.3.tgz"
-        },
-        "grunt": {
-          "version": "0.4.5",
-          "from": "https://registry.npmjs.org/grunt/-/grunt-0.4.5.tgz",
-          "resolved": "https://registry.npmjs.org/grunt/-/grunt-0.4.5.tgz",
-          "dependencies": {
-            "async": {
-              "version": "0.1.22",
-              "from": "https://registry.npmjs.org/async/-/async-0.1.22.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.1.22.tgz"
-            },
-            "coffee-script": {
-              "version": "1.3.3",
-              "from": "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"
-            },
-            "colors": {
-              "version": "0.6.2",
-              "from": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz",
-              "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz"
-            },
-            "dateformat": {
-              "version": "1.0.2-1.2.3",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.2-1.2.3.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.2-1.2.3.tgz"
-            },
-            "eventemitter2": {
-              "version": "0.4.14",
-              "from": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-0.4.14.tgz",
-              "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-0.4.14.tgz"
-            },
-            "findup-sync": {
-              "version": "0.1.3",
-              "from": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.1.3.tgz",
-              "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.1.3.tgz",
-              "dependencies": {
-                "glob": {
-                  "version": "3.2.11",
-                  "from": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-                  "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-                  "dependencies": {
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "minimatch": {
-                      "version": "0.3.0",
-                      "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.2",
-                          "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                        },
-                        "sigmund": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash": {
-                  "version": "2.4.2",
-                  "from": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz"
-                }
-              }
-            },
-            "glob": {
-              "version": "3.1.21",
-              "from": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-              "dependencies": {
-                "graceful-fs": {
-                  "version": "1.2.3",
-                  "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz"
-                },
-                "inherits": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.0.tgz"
-                }
-              }
-            },
-            "hooker": {
-              "version": "0.2.3",
-              "from": "https://registry.npmjs.org/hooker/-/hooker-0.2.3.tgz",
-              "resolved": "https://registry.npmjs.org/hooker/-/hooker-0.2.3.tgz"
-            },
-            "iconv-lite": {
-              "version": "0.2.11",
-              "from": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.2.11.tgz",
-              "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.2.11.tgz"
-            },
-            "minimatch": {
-              "version": "0.2.14",
-              "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.2",
-                  "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                },
-                "sigmund": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                }
-              }
-            },
-            "nopt": {
-              "version": "1.0.10",
-              "from": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-              "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-              "dependencies": {
-                "abbrev": {
-                  "version": "1.0.5",
-                  "from": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz",
-                  "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz"
-                }
-              }
-            },
-            "rimraf": {
-              "version": "2.2.8",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-            },
-            "lodash": {
-              "version": "0.9.2",
-              "from": "https://registry.npmjs.org/lodash/-/lodash-0.9.2.tgz",
-              "resolved": "https://registry.npmjs.org/lodash/-/lodash-0.9.2.tgz"
-            },
-            "underscore.string": {
-              "version": "2.2.1",
-              "from": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.2.1.tgz",
-              "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.2.1.tgz"
-            },
-            "js-yaml": {
-              "version": "2.0.5",
-              "from": "https://registry.npmjs.org/js-yaml/-/js-yaml-2.0.5.tgz",
-              "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-2.0.5.tgz",
-              "dependencies": {
-                "argparse": {
-                  "version": "0.1.16",
-                  "from": "https://registry.npmjs.org/argparse/-/argparse-0.1.16.tgz",
-                  "resolved": "https://registry.npmjs.org/argparse/-/argparse-0.1.16.tgz",
-                  "dependencies": {
-                    "underscore": {
-                      "version": "1.7.0",
-                      "from": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz",
-                      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz"
-                    },
-                    "underscore.string": {
-                      "version": "2.4.0",
-                      "from": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.4.0.tgz",
-                      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.4.0.tgz"
-                    }
-                  }
-                },
-                "esprima": {
-                  "version": "1.0.4",
-                  "from": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz"
-                }
-              }
-            },
-            "exit": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
-            },
-            "getobject": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/getobject/-/getobject-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/getobject/-/getobject-0.1.0.tgz"
-            },
-            "grunt-legacy-util": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/grunt-legacy-util/-/grunt-legacy-util-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/grunt-legacy-util/-/grunt-legacy-util-0.2.0.tgz"
-            },
-            "grunt-legacy-log": {
-              "version": "0.1.1",
-              "from": "https://registry.npmjs.org/grunt-legacy-log/-/grunt-legacy-log-0.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/grunt-legacy-log/-/grunt-legacy-log-0.1.1.tgz",
-              "dependencies": {
-                "lodash": {
-                  "version": "2.4.2",
-                  "from": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz"
-                },
-                "underscore.string": {
-                  "version": "2.3.3",
-                  "from": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
-                  "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "event-stream": {
-      "version": "3.3.1",
-      "from": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.1.tgz",
-      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.1.tgz",
-      "dependencies": {
-        "through": {
-          "version": "2.3.7",
-          "from": "https://registry.npmjs.org/through/-/through-2.3.7.tgz",
-          "resolved": "https://registry.npmjs.org/through/-/through-2.3.7.tgz"
-        },
-        "duplexer": {
-          "version": "0.1.1",
-          "from": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz"
-        },
-        "from": {
-          "version": "0.1.3",
-          "from": "https://registry.npmjs.org/from/-/from-0.1.3.tgz",
-          "resolved": "https://registry.npmjs.org/from/-/from-0.1.3.tgz"
-        },
-        "map-stream": {
-          "version": "0.1.0",
-          "from": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz"
-        },
-        "pause-stream": {
-          "version": "0.0.11",
-          "from": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
-          "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz"
-        },
-        "split": {
-          "version": "0.3.3",
-          "from": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
-          "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz"
-        },
-        "stream-combiner": {
-          "version": "0.0.4",
-          "from": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz"
-        }
-      }
-    },
-    "firefox-profile": {
-      "version": "0.3.4",
-      "from": "https://registry.npmjs.org/firefox-profile/-/firefox-profile-0.3.4.tgz",
-      "resolved": "https://registry.npmjs.org/firefox-profile/-/firefox-profile-0.3.4.tgz",
-      "dependencies": {
-        "jetpack-id": {
-          "version": "0.0.4",
-          "from": "https://registry.npmjs.org/jetpack-id/-/jetpack-id-0.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/jetpack-id/-/jetpack-id-0.0.4.tgz"
-        },
-        "adm-zip": {
-          "version": "0.4.7",
-          "from": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.7.tgz",
-          "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.7.tgz"
-        },
-        "archiver": {
-          "version": "0.11.0",
-          "from": "https://registry.npmjs.org/archiver/-/archiver-0.11.0.tgz",
-          "resolved": "https://registry.npmjs.org/archiver/-/archiver-0.11.0.tgz",
-          "dependencies": {
-            "buffer-crc32": {
-              "version": "0.2.5",
-              "from": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.5.tgz",
-              "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.5.tgz"
-            },
-            "glob": {
-              "version": "3.2.11",
-              "from": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "minimatch": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                  "dependencies": {
-                    "lru-cache": {
-                      "version": "2.6.4",
-                      "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz",
-                      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz"
-                    },
-                    "sigmund": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "readable-stream": {
-              "version": "1.0.33",
-              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                },
-                "string_decoder": {
-                  "version": "0.10.31",
-                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            },
-            "tar-stream": {
-              "version": "0.4.7",
-              "from": "https://registry.npmjs.org/tar-stream/-/tar-stream-0.4.7.tgz",
-              "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-0.4.7.tgz",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4",
-                  "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                  "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz"
-                },
-                "end-of-stream": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                  "dependencies": {
-                    "once": {
-                      "version": "1.3.2",
-                      "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "zip-stream": {
-              "version": "0.4.1",
-              "from": "https://registry.npmjs.org/zip-stream/-/zip-stream-0.4.1.tgz",
-              "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-0.4.1.tgz",
-              "dependencies": {
-                "compress-commons": {
-                  "version": "0.1.6",
-                  "from": "https://registry.npmjs.org/compress-commons/-/compress-commons-0.1.6.tgz",
-                  "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-0.1.6.tgz",
-                  "dependencies": {
-                    "crc32-stream": {
-                      "version": "0.3.4",
-                      "from": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-0.3.4.tgz",
-                      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-0.3.4.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "async": {
-          "version": "0.9.2",
-          "from": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
-        },
-        "fs-extra": {
-          "version": "0.11.1",
-          "from": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.11.1.tgz",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.11.1.tgz",
-          "dependencies": {
-            "ncp": {
-              "version": "0.6.0",
-              "from": "https://registry.npmjs.org/ncp/-/ncp-0.6.0.tgz",
-              "resolved": "https://registry.npmjs.org/ncp/-/ncp-0.6.0.tgz"
-            },
-            "mkdirp": {
-              "version": "0.5.1",
-              "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8",
-                  "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-                }
-              }
-            },
-            "jsonfile": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.0.1.tgz"
-            },
-            "rimraf": {
-              "version": "2.3.4",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.4.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.4.tgz"
-            }
-          }
-        },
-        "lazystream": {
-          "version": "0.1.0",
-          "from": "https://registry.npmjs.org/lazystream/-/lazystream-0.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-0.1.0.tgz",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.0.33",
-              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                },
-                "string_decoder": {
-                  "version": "0.10.31",
-                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "wrench": {
-          "version": "1.5.8",
-          "from": "https://registry.npmjs.org/wrench/-/wrench-1.5.8.tgz",
-          "resolved": "https://registry.npmjs.org/wrench/-/wrench-1.5.8.tgz"
-        },
-        "xml2js": {
-          "version": "0.4.9",
-          "from": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.9.tgz",
-          "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.9.tgz",
-          "dependencies": {
-            "sax": {
-              "version": "0.6.1",
-              "from": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz",
-              "resolved": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz"
-            },
-            "xmlbuilder": {
-              "version": "2.6.4",
-              "from": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-2.6.4.tgz",
-              "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-2.6.4.tgz",
-              "dependencies": {
-                "lodash": {
-                  "version": "3.9.3",
-                  "from": "https://registry.npmjs.org/lodash/-/lodash-3.9.3.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.9.3.tgz"
-                }
-              }
-            }
-          }
-        },
-        "ini": {
-          "version": "1.2.1",
-          "from": "https://registry.npmjs.org/ini/-/ini-1.2.1.tgz",
-          "resolved": "https://registry.npmjs.org/ini/-/ini-1.2.1.tgz"
-        }
-      }
-    },
-    "fs-extra": {
-      "version": "0.18.2",
-      "from": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.18.2.tgz",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.18.2.tgz",
-      "dependencies": {
-        "graceful-fs": {
-          "version": "3.0.6",
-          "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz"
-        },
-        "jsonfile": {
-          "version": "2.0.0",
-          "from": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.0.0.tgz"
-        },
-        "rimraf": {
-          "version": "2.3.3",
-          "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz"
-        }
-      }
-    },
-    "glob": {
-      "version": "4.5.3",
-      "from": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
-      "dependencies": {
-        "inflight": {
-          "version": "1.0.4",
-          "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-          "dependencies": {
-            "wrappy": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-            }
-          }
-        },
-        "inherits": {
-          "version": "2.0.1",
-          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-        },
-        "once": {
-          "version": "1.3.2",
-          "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-          "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-          "dependencies": {
-            "wrappy": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-            }
-          }
-        }
-      }
-    },
-    "googleapis": {
-      "version": "1.0.23",
-      "from": "https://registry.npmjs.org/googleapis/-/googleapis-1.0.23.tgz",
-      "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-1.0.23.tgz",
-      "dependencies": {
-        "async": {
-          "version": "0.9.0",
-          "from": "https://registry.npmjs.org/async/-/async-0.9.0.tgz",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz"
-        },
-        "gapitoken": {
-          "version": "0.1.4",
-          "from": "https://registry.npmjs.org/gapitoken/-/gapitoken-0.1.4.tgz",
-          "resolved": "https://registry.npmjs.org/gapitoken/-/gapitoken-0.1.4.tgz",
-          "dependencies": {
-            "jws": {
-              "version": "0.0.2",
-              "from": "https://registry.npmjs.org/jws/-/jws-0.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/jws/-/jws-0.0.2.tgz",
-              "dependencies": {
-                "tap": {
-                  "version": "0.3.3",
-                  "from": "https://registry.npmjs.org/tap/-/tap-0.3.3.tgz",
-                  "resolved": "https://registry.npmjs.org/tap/-/tap-0.3.3.tgz",
-                  "dependencies": {
-                    "inherits": {
-                      "version": "1.0.0"
-                    },
-                    "yamlish": {
-                      "version": "0.0.5"
-                    },
-                    "slide": {
-                      "version": "1.1.6",
-                      "from": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
-                      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz"
-                    },
-                    "runforcover": {
-                      "version": "0.0.2",
-                      "from": "https://registry.npmjs.org/runforcover/-/runforcover-0.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/runforcover/-/runforcover-0.0.2.tgz",
-                      "dependencies": {
-                        "bunker": {
-                          "version": "0.1.2",
-                          "from": "https://registry.npmjs.org/bunker/-/bunker-0.1.2.tgz",
-                          "resolved": "https://registry.npmjs.org/bunker/-/bunker-0.1.2.tgz",
-                          "dependencies": {
-                            "burrito": {
-                              "version": "0.2.12",
-                              "from": "https://registry.npmjs.org/burrito/-/burrito-0.2.12.tgz",
-                              "resolved": "https://registry.npmjs.org/burrito/-/burrito-0.2.12.tgz",
-                              "dependencies": {
-                                "traverse": {
-                                  "version": "0.5.2",
-                                  "from": "https://registry.npmjs.org/traverse/-/traverse-0.5.2.tgz",
-                                  "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.5.2.tgz"
-                                },
-                                "uglify-js": {
-                                  "version": "1.1.1",
-                                  "from": "https://registry.npmjs.org/uglify-js/-/uglify-js-1.1.1.tgz",
-                                  "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-1.1.1.tgz"
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "nopt": {
-                      "version": "2.2.1",
-                      "from": "https://registry.npmjs.org/nopt/-/nopt-2.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/nopt/-/nopt-2.2.1.tgz",
-                      "dependencies": {
-                        "abbrev": {
-                          "version": "1.0.5",
-                          "from": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz",
-                          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz"
-                        }
-                      }
-                    },
-                    "mkdirp": {
-                      "version": "0.3.5",
-                      "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz",
-                      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz"
-                    },
-                    "difflet": {
-                      "version": "0.2.6",
-                      "from": "https://registry.npmjs.org/difflet/-/difflet-0.2.6.tgz",
-                      "resolved": "https://registry.npmjs.org/difflet/-/difflet-0.2.6.tgz",
-                      "dependencies": {
-                        "traverse": {
-                          "version": "0.6.6",
-                          "from": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
-                          "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz"
-                        },
-                        "charm": {
-                          "version": "0.1.2",
-                          "from": "https://registry.npmjs.org/charm/-/charm-0.1.2.tgz",
-                          "resolved": "https://registry.npmjs.org/charm/-/charm-0.1.2.tgz"
-                        },
-                        "deep-is": {
-                          "version": "0.1.3",
-                          "from": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-                          "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz"
-                        }
-                      }
-                    },
-                    "deep-equal": {
-                      "version": "0.0.0",
-                      "from": "https://registry.npmjs.org/deep-equal/-/deep-equal-0.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-0.0.0.tgz"
-                    },
-                    "buffer-equal": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz"
-                    },
-                    "tap-consumer": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/tap-consumer/-/tap-consumer-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/tap-consumer/-/tap-consumer-0.0.1.tgz",
-                      "dependencies": {
-                        "tap-results": {
-                          "version": "0.0.2",
-                          "from": "https://registry.npmjs.org/tap-results/-/tap-results-0.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/tap-results/-/tap-results-0.0.2.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "base64url": {
-                  "version": "0.0.3",
-                  "from": "https://registry.npmjs.org/base64url/-/base64url-0.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/base64url/-/base64url-0.0.3.tgz"
-                }
-              }
-            },
-            "request": {
-              "version": "2.55.0",
-              "from": "https://registry.npmjs.org/request/-/request-2.55.0.tgz",
-              "resolved": "https://registry.npmjs.org/request/-/request-2.55.0.tgz",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4",
-                  "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                  "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "caseless": {
-                  "version": "0.9.0",
-                  "from": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz",
-                  "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz"
-                },
-                "forever-agent": {
-                  "version": "0.6.1",
-                  "from": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz"
-                },
-                "form-data": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz"
-                },
-                "json-stringify-safe": {
-                  "version": "5.0.0",
-                  "from": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz"
-                },
-                "mime-types": {
-                  "version": "2.0.11",
-                  "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                  "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.9.1",
-                      "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                    }
-                  }
-                },
-                "qs": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/qs/-/qs-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/qs/-/qs-2.4.1.tgz"
-                },
-                "tunnel-agent": {
-                  "version": "0.4.0",
-                  "from": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz",
-                  "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz"
-                },
-                "tough-cookie": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz"
-                },
-                "http-signature": {
-                  "version": "0.10.1",
-                  "from": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-                  "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-                  "dependencies": {
-                    "assert-plus": {
-                      "version": "0.1.5",
-                      "from": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-                      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz"
-                    },
-                    "asn1": {
-                      "version": "0.1.11",
-                      "from": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-                      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
-                    },
-                    "ctype": {
-                      "version": "0.5.3",
-                      "from": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz",
-                      "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
-                    }
-                  }
-                },
-                "oauth-sign": {
-                  "version": "0.6.0",
-                  "from": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz",
-                  "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz"
-                },
-                "hawk": {
-                  "version": "2.3.1",
-                  "from": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "2.13.0",
-                      "from": "https://registry.npmjs.org/hoek/-/hoek-2.13.0.tgz",
-                      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.13.0.tgz"
-                    },
-                    "boom": {
-                      "version": "2.7.1",
-                      "from": "https://registry.npmjs.org/boom/-/boom-2.7.1.tgz",
-                      "resolved": "https://registry.npmjs.org/boom/-/boom-2.7.1.tgz"
-                    },
-                    "cryptiles": {
-                      "version": "2.0.4",
-                      "from": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.4.tgz",
-                      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.4.tgz"
-                    },
-                    "sntp": {
-                      "version": "1.0.9",
-                      "from": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-                      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz"
-                    }
-                  }
-                },
-                "aws-sign2": {
-                  "version": "0.5.0",
-                  "from": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-                  "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
-                },
-                "stringstream": {
-                  "version": "0.0.4",
-                  "from": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz"
-                },
-                "combined-stream": {
-                  "version": "0.0.7",
-                  "from": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "0.0.5",
-                      "from": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
-                    }
-                  }
-                },
-                "isstream": {
-                  "version": "0.1.2",
-                  "from": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-                  "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
-                },
-                "har-validator": {
-                  "version": "1.7.0",
-                  "from": "https://registry.npmjs.org/har-validator/-/har-validator-1.7.0.tgz",
-                  "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-1.7.0.tgz",
-                  "dependencies": {
-                    "bluebird": {
-                      "version": "2.9.25",
-                      "from": "https://registry.npmjs.org/bluebird/-/bluebird-2.9.25.tgz",
-                      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.9.25.tgz"
-                    },
-                    "chalk": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-                      "dependencies": {
-                        "ansi-styles": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                        },
-                        "escape-string-regexp": {
-                          "version": "1.0.3",
-                          "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                        },
-                        "has-ansi": {
-                          "version": "1.0.3",
-                          "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                          "dependencies": {
-                            "ansi-regex": {
-                              "version": "1.1.1",
-                              "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                            },
-                            "get-stdin": {
-                              "version": "4.0.1",
-                              "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                            }
-                          }
-                        },
-                        "supports-color": {
-                          "version": "1.3.1",
-                          "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                        }
-                      }
-                    },
-                    "commander": {
-                      "version": "2.8.1",
-                      "from": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-                      "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-                      "dependencies": {
-                        "graceful-readlink": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "is-my-json-valid": {
-                      "version": "2.10.1",
-                      "from": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.10.1.tgz",
-                      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.10.1.tgz",
-                      "dependencies": {
-                        "generate-function": {
-                          "version": "2.0.0",
-                          "from": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz"
-                        },
-                        "generate-object-property": {
-                          "version": "1.1.1",
-                          "from": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.1.1.tgz",
-                          "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.1.1.tgz",
-                          "dependencies": {
-                            "is-property": {
-                              "version": "1.0.2",
-                              "from": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-                              "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz"
-                            }
-                          }
-                        },
-                        "jsonpointer": {
-                          "version": "1.1.0",
-                          "from": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-1.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-1.1.0.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "request": {
-          "version": "2.51.0",
-          "from": "https://registry.npmjs.org/request/-/request-2.51.0.tgz",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.51.0.tgz",
-          "dependencies": {
-            "bl": {
-              "version": "0.9.4",
-              "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-              "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "caseless": {
-              "version": "0.8.0",
-              "from": "https://registry.npmjs.org/caseless/-/caseless-0.8.0.tgz",
-              "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.8.0.tgz"
-            },
-            "forever-agent": {
-              "version": "0.5.2",
-              "from": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz",
-              "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz"
-            },
-            "form-data": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-              "dependencies": {
-                "mime-types": {
-                  "version": "2.0.11",
-                  "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                  "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.9.1",
-                      "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "json-stringify-safe": {
-              "version": "5.0.0",
-              "from": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz"
-            },
-            "mime-types": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/mime-types/-/mime-types-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-1.0.2.tgz"
-            },
-            "qs": {
-              "version": "2.3.3",
-              "from": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz"
-            },
-            "tunnel-agent": {
-              "version": "0.4.0",
-              "from": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz",
-              "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz"
-            },
-            "tough-cookie": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz"
-            },
-            "http-signature": {
-              "version": "0.10.1",
-              "from": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-              "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-              "dependencies": {
-                "assert-plus": {
-                  "version": "0.1.5",
-                  "from": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-                  "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz"
-                },
-                "asn1": {
-                  "version": "0.1.11",
-                  "from": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-                  "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
-                },
-                "ctype": {
-                  "version": "0.5.3",
-                  "from": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz",
-                  "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
-                }
-              }
-            },
-            "oauth-sign": {
-              "version": "0.5.0",
-              "from": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.5.0.tgz"
-            },
-            "hawk": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/hawk/-/hawk-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/hawk/-/hawk-1.1.1.tgz",
-              "dependencies": {
-                "hoek": {
-                  "version": "0.9.1",
-                  "from": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz",
-                  "resolved": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz"
-                },
-                "boom": {
-                  "version": "0.4.2",
-                  "from": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz"
-                },
-                "cryptiles": {
-                  "version": "0.2.2",
-                  "from": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.2.2.tgz",
-                  "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.2.2.tgz"
-                },
-                "sntp": {
-                  "version": "0.2.4",
-                  "from": "https://registry.npmjs.org/sntp/-/sntp-0.2.4.tgz",
-                  "resolved": "https://registry.npmjs.org/sntp/-/sntp-0.2.4.tgz"
-                }
-              }
-            },
-            "aws-sign2": {
-              "version": "0.5.0",
-              "from": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
-            },
-            "stringstream": {
-              "version": "0.0.4",
-              "from": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz"
-            },
-            "combined-stream": {
-              "version": "0.0.7",
-              "from": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-              "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-              "dependencies": {
-                "delayed-stream": {
-                  "version": "0.0.5",
-                  "from": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                  "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
-                }
-              }
-            }
-          }
-        },
-        "string-template": {
-          "version": "0.2.1",
-          "from": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
-          "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz"
-        }
-      }
-    },
-    "gulp": {
-      "version": "3.8.11",
-      "from": "https://registry.npmjs.org/gulp/-/gulp-3.8.11.tgz",
-      "resolved": "https://registry.npmjs.org/gulp/-/gulp-3.8.11.tgz",
-      "dependencies": {
-        "archy": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz"
-        },
-        "chalk": {
-          "version": "0.5.1",
-          "from": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-          "dependencies": {
-            "ansi-styles": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz"
-            },
-            "escape-string-regexp": {
-              "version": "1.0.3",
-              "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-            },
-            "has-ansi": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "0.2.1",
-                  "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                }
-              }
-            },
-            "strip-ansi": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "0.2.1",
-                  "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                }
-              }
-            },
-            "supports-color": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz"
-            }
-          }
-        },
-        "deprecated": {
-          "version": "0.0.1",
-          "from": "https://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz"
-        },
-        "gulp-util": {
-          "version": "3.0.4",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            }
-          }
-        },
-        "interpret": {
-          "version": "0.3.10",
-          "from": "https://registry.npmjs.org/interpret/-/interpret-0.3.10.tgz",
-          "resolved": "https://registry.npmjs.org/interpret/-/interpret-0.3.10.tgz"
-        },
-        "liftoff": {
-          "version": "2.0.3",
-          "from": "https://registry.npmjs.org/liftoff/-/liftoff-2.0.3.tgz",
-          "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-2.0.3.tgz",
-          "dependencies": {
-            "extend": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/extend/-/extend-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/extend/-/extend-2.0.1.tgz"
-            },
-            "findup-sync": {
-              "version": "0.2.1",
-              "from": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.2.1.tgz",
-              "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.2.1.tgz",
-              "dependencies": {
-                "glob": {
-                  "version": "4.3.5",
-                  "from": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-                  "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "once": {
-                      "version": "1.3.2",
-                      "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "flagged-respawn": {
-              "version": "0.3.1",
-              "from": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.1.tgz",
-              "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.1.tgz"
-            },
-            "resolve": {
-              "version": "1.1.6",
-              "from": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.tgz",
-              "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.tgz"
-            }
-          }
-        },
-        "orchestrator": {
-          "version": "0.3.7",
-          "from": "https://registry.npmjs.org/orchestrator/-/orchestrator-0.3.7.tgz",
-          "resolved": "https://registry.npmjs.org/orchestrator/-/orchestrator-0.3.7.tgz",
-          "dependencies": {
-            "end-of-stream": {
-              "version": "0.1.5",
-              "from": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-0.1.5.tgz",
-              "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-0.1.5.tgz",
-              "dependencies": {
-                "once": {
-                  "version": "1.3.2",
-                  "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "sequencify": {
-              "version": "0.0.7",
-              "from": "https://registry.npmjs.org/sequencify/-/sequencify-0.0.7.tgz",
-              "resolved": "https://registry.npmjs.org/sequencify/-/sequencify-0.0.7.tgz"
-            },
-            "stream-consume": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz"
-            }
-          }
-        },
-        "pretty-hrtime": {
-          "version": "0.2.2",
-          "from": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-0.2.2.tgz",
-          "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-0.2.2.tgz"
-        },
-        "tildify": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/tildify/-/tildify-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/tildify/-/tildify-1.0.0.tgz",
-          "dependencies": {
-            "user-home": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz"
-            }
-          }
-        },
-        "v8flags": {
-          "version": "2.0.5",
-          "from": "https://registry.npmjs.org/v8flags/-/v8flags-2.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.0.5.tgz",
-          "dependencies": {
-            "user-home": {
-              "version": "1.1.1",
-              "from": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz"
-            }
-          }
-        },
-        "vinyl-fs": {
-          "version": "0.3.13",
-          "from": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-0.3.13.tgz",
-          "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-0.3.13.tgz",
-          "dependencies": {
-            "defaults": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/defaults/-/defaults-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.2.tgz",
-              "dependencies": {
-                "clone": {
-                  "version": "0.1.19",
-                  "from": "https://registry.npmjs.org/clone/-/clone-0.1.19.tgz",
-                  "resolved": "https://registry.npmjs.org/clone/-/clone-0.1.19.tgz"
-                }
-              }
-            },
-            "glob-stream": {
-              "version": "3.1.18",
-              "from": "https://registry.npmjs.org/glob-stream/-/glob-stream-3.1.18.tgz",
-              "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-3.1.18.tgz",
-              "dependencies": {
-                "ordered-read-streams": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz"
-                },
-                "glob2base": {
-                  "version": "0.0.12",
-                  "from": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz",
-                  "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz",
-                  "dependencies": {
-                    "find-index": {
-                      "version": "0.1.1",
-                      "from": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz"
-                    }
-                  }
-                },
-                "unique-stream": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz"
-                }
-              }
-            },
-            "glob-watcher": {
-              "version": "0.0.6",
-              "from": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-0.0.6.tgz",
-              "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-0.0.6.tgz",
-              "dependencies": {
-                "gaze": {
-                  "version": "0.5.1",
-                  "from": "https://registry.npmjs.org/gaze/-/gaze-0.5.1.tgz",
-                  "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.1.tgz",
-                  "dependencies": {
-                    "globule": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
-                      "dependencies": {
-                        "lodash": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz"
-                        },
-                        "glob": {
-                          "version": "3.1.21",
-                          "from": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-                          "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-                          "dependencies": {
-                            "graceful-fs": {
-                              "version": "1.2.3",
-                              "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
-                              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz"
-                            },
-                            "inherits": {
-                              "version": "1.0.0",
-                              "from": "https://registry.npmjs.org/inherits/-/inherits-1.0.0.tgz",
-                              "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.0.tgz"
-                            }
-                          }
-                        },
-                        "minimatch": {
-                          "version": "0.2.14",
-                          "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-                          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-                          "dependencies": {
-                            "lru-cache": {
-                              "version": "2.6.2",
-                              "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                            },
-                            "sigmund": {
-                              "version": "1.0.0",
-                              "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                              "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "graceful-fs": {
-              "version": "3.0.6",
-              "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz"
-            },
-            "mkdirp": {
-              "version": "0.5.0",
-              "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8",
-                  "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-                }
-              }
-            },
-            "strip-bom": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/strip-bom/-/strip-bom-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-1.0.0.tgz",
-              "dependencies": {
-                "first-chunk-stream": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz"
-                },
-                "is-utf8": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.0.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-autoprefixer": {
-      "version": "2.2.0",
-      "from": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-2.2.0.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-2.2.0.tgz",
-      "dependencies": {
-        "autoprefixer-core": {
-          "version": "5.1.11",
-          "from": "https://registry.npmjs.org/autoprefixer-core/-/autoprefixer-core-5.1.11.tgz",
-          "resolved": "https://registry.npmjs.org/autoprefixer-core/-/autoprefixer-core-5.1.11.tgz",
-          "dependencies": {
-            "browserslist": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/browserslist/-/browserslist-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-0.2.0.tgz"
-            },
-            "num2fraction": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.1.0.tgz"
-            },
-            "caniuse-db": {
-              "version": "1.0.30000157",
-              "from": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000157.tgz",
-              "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000157.tgz"
-            },
-            "postcss": {
-              "version": "4.0.6",
-              "from": "https://registry.npmjs.org/postcss/-/postcss-4.0.6.tgz",
-              "resolved": "https://registry.npmjs.org/postcss/-/postcss-4.0.6.tgz",
-              "dependencies": {
-                "source-map": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/source-map/-/source-map-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.2.0.tgz",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                    }
-                  }
-                },
-                "js-base64": {
-                  "version": "2.1.8",
-                  "from": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.8.tgz",
-                  "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.8.tgz"
-                }
-              }
-            }
-          }
-        },
-        "gulp-util": {
-          "version": "3.0.4",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            }
-          }
-        },
-        "object-assign": {
-          "version": "2.0.0",
-          "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-        },
-        "postcss": {
-          "version": "4.1.9",
-          "from": "https://registry.npmjs.org/postcss/-/postcss-4.1.9.tgz",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-4.1.9.tgz",
-          "dependencies": {
-            "es6-promise": {
-              "version": "2.1.1",
-              "from": "https://registry.npmjs.org/es6-promise/-/es6-promise-2.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-2.1.1.tgz"
-            },
-            "source-map": {
-              "version": "0.4.2",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                }
-              }
-            },
-            "js-base64": {
-              "version": "2.1.8",
-              "from": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.8.tgz",
-              "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.8.tgz"
-            }
-          }
-        },
-        "vinyl-sourcemaps-apply": {
-          "version": "0.1.4",
-          "from": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.1.4.tgz",
-          "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.1.4.tgz",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.43",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-changed": {
-      "version": "1.2.1",
-      "from": "https://registry.npmjs.org/gulp-changed/-/gulp-changed-1.2.1.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-changed/-/gulp-changed-1.2.1.tgz",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.4",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            }
-          }
-        }
-      }
-    },
-    "gulp-clang-format": {
-      "version": "1.0.21",
-      "from": "https://registry.npmjs.org/gulp-clang-format/-/gulp-clang-format-1.0.21.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-clang-format/-/gulp-clang-format-1.0.21.tgz",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.6",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.6.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.6.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.3.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.3.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.1.0",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.1.0.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.6.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.9",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.1.1",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.1.tgz",
-                  "dependencies": {
-                    "lodash._getnative": {
-                      "version": "3.9.0",
-                      "from": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.0.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.0.tgz"
-                    },
-                    "lodash.isarguments": {
-                      "version": "3.0.3",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.3.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.3",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.3.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            },
-            "through2": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/through2/-/through2-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.0.tgz",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "process-nextick-args": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "util-deprecate": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.5.0",
-              "from": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.0.tgz",
-              "dependencies": {
-                "clone": {
-                  "version": "1.0.2",
-                  "from": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz"
-                },
-                "clone-stats": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "pkginfo": {
-          "version": "0.3.0",
-          "from": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.0.tgz",
-          "resolved": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.0.tgz"
-        },
-        "stream-equal": {
-          "version": "0.1.5",
-          "from": "https://registry.npmjs.org/stream-equal/-/stream-equal-0.1.5.tgz",
-          "resolved": "https://registry.npmjs.org/stream-equal/-/stream-equal-0.1.5.tgz",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.0.33",
-              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                },
-                "string_decoder": {
-                  "version": "0.10.31",
-                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-concat": {
-      "version": "2.5.2",
-      "from": "https://registry.npmjs.org/gulp-concat/-/gulp-concat-2.5.2.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-concat/-/gulp-concat-2.5.2.tgz",
-      "dependencies": {
-        "concat-with-sourcemaps": {
-          "version": "1.0.2",
-          "from": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.0.2.tgz",
-          "dependencies": {
-            "source-map": {
-              "version": "0.4.2",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                }
-              }
-            }
-          }
-        },
-        "gulp-util": {
-          "version": "3.0.4",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            }
-          }
-        }
-      }
-    },
-    "gulp-connect": {
-      "version": "1.0.10",
-      "from": "https://registry.npmjs.org/gulp-connect/-/gulp-connect-1.0.10.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-connect/-/gulp-connect-1.0.10.tgz",
-      "dependencies": {
-        "gulp-util": {
-          "version": "2.2.20",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-2.2.20.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-2.2.20.tgz",
-          "dependencies": {
-            "chalk": {
-              "version": "0.5.1",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "minimist": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/minimist/-/minimist-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.1.tgz"
-                    },
-                    "object-assign": {
-                      "version": "2.0.0",
-                      "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reinterpolate": {
-              "version": "2.4.1",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-2.4.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-2.4.1.tgz"
-            },
-            "lodash.template": {
-              "version": "2.4.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-2.4.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-2.4.1.tgz",
-              "dependencies": {
-                "lodash.defaults": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-2.4.1.tgz",
-                  "dependencies": {
-                    "lodash._objecttypes": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz"
-                    }
-                  }
-                },
-                "lodash.escape": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-2.4.1.tgz",
-                  "dependencies": {
-                    "lodash._escapehtmlchar": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash._escapehtmlchar/-/lodash._escapehtmlchar-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._escapehtmlchar/-/lodash._escapehtmlchar-2.4.1.tgz",
-                      "dependencies": {
-                        "lodash._htmlescapes": {
-                          "version": "2.4.1",
-                          "from": "https://registry.npmjs.org/lodash._htmlescapes/-/lodash._htmlescapes-2.4.1.tgz",
-                          "resolved": "https://registry.npmjs.org/lodash._htmlescapes/-/lodash._htmlescapes-2.4.1.tgz"
-                        }
-                      }
-                    },
-                    "lodash._reunescapedhtml": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash._reunescapedhtml/-/lodash._reunescapedhtml-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._reunescapedhtml/-/lodash._reunescapedhtml-2.4.1.tgz",
-                      "dependencies": {
-                        "lodash._htmlescapes": {
-                          "version": "2.4.1",
-                          "from": "https://registry.npmjs.org/lodash._htmlescapes/-/lodash._htmlescapes-2.4.1.tgz",
-                          "resolved": "https://registry.npmjs.org/lodash._htmlescapes/-/lodash._htmlescapes-2.4.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash._escapestringchar": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash._escapestringchar/-/lodash._escapestringchar-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._escapestringchar/-/lodash._escapestringchar-2.4.1.tgz"
-                },
-                "lodash.keys": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-2.4.1.tgz",
-                  "dependencies": {
-                    "lodash._isnative": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash._isnative/-/lodash._isnative-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._isnative/-/lodash._isnative-2.4.1.tgz"
-                    },
-                    "lodash.isobject": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.4.1.tgz",
-                      "dependencies": {
-                        "lodash._objecttypes": {
-                          "version": "2.4.1",
-                          "from": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz",
-                          "resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz"
-                        }
-                      }
-                    },
-                    "lodash._shimkeys": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash._shimkeys/-/lodash._shimkeys-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._shimkeys/-/lodash._shimkeys-2.4.1.tgz",
-                      "dependencies": {
-                        "lodash._objecttypes": {
-                          "version": "2.4.1",
-                          "from": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz",
-                          "resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash.templatesettings": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-2.4.1.tgz"
-                },
-                "lodash.values": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash.values/-/lodash.values-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.values/-/lodash.values-2.4.1.tgz"
-                }
-              }
-            },
-            "minimist": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/minimist/-/minimist-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.2.0.tgz"
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "through2": {
-              "version": "0.5.1",
-              "from": "https://registry.npmjs.org/through2/-/through2-0.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/through2/-/through2-0.5.1.tgz",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "xtend": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/xtend/-/xtend-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/xtend/-/xtend-3.0.0.tgz"
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.2.3",
-              "from": "https://registry.npmjs.org/vinyl/-/vinyl-0.2.3.tgz",
-              "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.2.3.tgz",
-              "dependencies": {
-                "clone-stats": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "event-stream": {
-          "version": "3.1.7",
-          "from": "https://registry.npmjs.org/event-stream/-/event-stream-3.1.7.tgz",
-          "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.1.7.tgz",
-          "dependencies": {
-            "through": {
-              "version": "2.3.7",
-              "from": "https://registry.npmjs.org/through/-/through-2.3.7.tgz",
-              "resolved": "https://registry.npmjs.org/through/-/through-2.3.7.tgz"
-            },
-            "duplexer": {
-              "version": "0.1.1",
-              "from": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz"
-            },
-            "from": {
-              "version": "0.1.3",
-              "from": "https://registry.npmjs.org/from/-/from-0.1.3.tgz",
-              "resolved": "https://registry.npmjs.org/from/-/from-0.1.3.tgz"
-            },
-            "map-stream": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz"
-            },
-            "pause-stream": {
-              "version": "0.0.11",
-              "from": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz"
-            },
-            "split": {
-              "version": "0.2.10",
-              "from": "https://registry.npmjs.org/split/-/split-0.2.10.tgz",
-              "resolved": "https://registry.npmjs.org/split/-/split-0.2.10.tgz"
-            },
-            "stream-combiner": {
-              "version": "0.0.4",
-              "from": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz"
-            }
-          }
-        },
-        "connect-livereload": {
-          "version": "0.3.2",
-          "from": "https://registry.npmjs.org/connect-livereload/-/connect-livereload-0.3.2.tgz",
-          "resolved": "https://registry.npmjs.org/connect-livereload/-/connect-livereload-0.3.2.tgz"
-        },
-        "open": {
-          "version": "0.0.4",
-          "from": "https://registry.npmjs.org/open/-/open-0.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/open/-/open-0.0.4.tgz"
-        },
-        "tiny-lr": {
-          "version": "0.0.5",
-          "from": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-0.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-0.0.5.tgz",
-          "dependencies": {
-            "qs": {
-              "version": "0.5.6",
-              "from": "https://registry.npmjs.org/qs/-/qs-0.5.6.tgz",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-0.5.6.tgz"
-            },
-            "faye-websocket": {
-              "version": "0.4.4",
-              "from": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.4.4.tgz",
-              "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.4.4.tgz"
-            },
-            "noptify": {
-              "version": "0.0.3",
-              "from": "https://registry.npmjs.org/noptify/-/noptify-0.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/noptify/-/noptify-0.0.3.tgz",
-              "dependencies": {
-                "nopt": {
-                  "version": "2.0.0",
-                  "from": "https://registry.npmjs.org/nopt/-/nopt-2.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/nopt/-/nopt-2.0.0.tgz",
-                  "dependencies": {
-                    "abbrev": {
-                      "version": "1.0.5",
-                      "from": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "debug": {
-              "version": "0.7.4",
-              "from": "https://registry.npmjs.org/debug/-/debug-0.7.4.tgz",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-0.7.4.tgz"
-            }
-          }
-        },
-        "connect": {
-          "version": "2.14.5",
-          "from": "https://registry.npmjs.org/connect/-/connect-2.14.5.tgz",
-          "resolved": "https://registry.npmjs.org/connect/-/connect-2.14.5.tgz",
-          "dependencies": {
-            "basic-auth-connect": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz"
-            },
-            "cookie-parser": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.0.1.tgz",
-              "dependencies": {
-                "cookie": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/cookie/-/cookie-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.1.0.tgz"
-                }
-              }
-            },
-            "cookie-signature": {
-              "version": "1.0.3",
-              "from": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.3.tgz"
-            },
-            "compression": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/compression/-/compression-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/compression/-/compression-1.0.0.tgz",
-              "dependencies": {
-                "bytes": {
-                  "version": "0.2.1",
-                  "from": "https://registry.npmjs.org/bytes/-/bytes-0.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/bytes/-/bytes-0.2.1.tgz"
-                },
-                "negotiator": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/negotiator/-/negotiator-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.3.0.tgz"
-                },
-                "compressible": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/compressible/-/compressible-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/compressible/-/compressible-1.0.0.tgz"
-                }
-              }
-            },
-            "connect-timeout": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/connect-timeout/-/connect-timeout-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/connect-timeout/-/connect-timeout-1.0.0.tgz"
-            },
-            "csurf": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/csurf/-/csurf-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/csurf/-/csurf-1.1.0.tgz",
-              "dependencies": {
-                "uid2": {
-                  "version": "0.0.3",
-                  "from": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz"
-                },
-                "scmp": {
-                  "version": "0.0.3",
-                  "from": "https://registry.npmjs.org/scmp/-/scmp-0.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/scmp/-/scmp-0.0.3.tgz"
-                }
-              }
-            },
-            "errorhandler": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.0.0.tgz"
-            },
-            "express-session": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/express-session/-/express-session-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.0.2.tgz",
-              "dependencies": {
-                "utils-merge": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz"
-                },
-                "cookie": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/cookie/-/cookie-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.1.0.tgz"
-                },
-                "uid2": {
-                  "version": "0.0.3",
-                  "from": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz"
-                },
-                "buffer-crc32": {
-                  "version": "0.2.1",
-                  "from": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.1.tgz"
-                },
-                "debug": {
-                  "version": "0.7.4",
-                  "from": "https://registry.npmjs.org/debug/-/debug-0.7.4.tgz",
-                  "resolved": "https://registry.npmjs.org/debug/-/debug-0.7.4.tgz"
-                }
-              }
-            },
-            "fresh": {
-              "version": "0.2.2",
-              "from": "https://registry.npmjs.org/fresh/-/fresh-0.2.2.tgz",
-              "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.2.2.tgz"
-            },
-            "method-override": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/method-override/-/method-override-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/method-override/-/method-override-1.0.0.tgz",
-              "dependencies": {
-                "methods": {
-                  "version": "1.1.1",
-                  "from": "https://registry.npmjs.org/methods/-/methods-1.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.1.tgz"
-                }
-              }
-            },
-            "morgan": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/morgan/-/morgan-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.0.0.tgz",
-              "dependencies": {
-                "bytes": {
-                  "version": "0.2.1",
-                  "from": "https://registry.npmjs.org/bytes/-/bytes-0.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/bytes/-/bytes-0.2.1.tgz"
-                }
-              }
-            },
-            "qs": {
-              "version": "0.6.6",
-              "from": "https://registry.npmjs.org/qs/-/qs-0.6.6.tgz",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-0.6.6.tgz"
-            },
-            "raw-body": {
-              "version": "1.1.4",
-              "from": "https://registry.npmjs.org/raw-body/-/raw-body-1.1.4.tgz",
-              "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-1.1.4.tgz"
-            },
-            "response-time": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/response-time/-/response-time-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/response-time/-/response-time-1.0.0.tgz"
-            },
-            "setimmediate": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.1.tgz"
-            },
-            "serve-index": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/serve-index/-/serve-index-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.0.1.tgz",
-              "dependencies": {
-                "batch": {
-                  "version": "0.5.0",
-                  "from": "https://registry.npmjs.org/batch/-/batch-0.5.0.tgz",
-                  "resolved": "https://registry.npmjs.org/batch/-/batch-0.5.0.tgz"
-                },
-                "negotiator": {
-                  "version": "0.4.2",
-                  "from": "https://registry.npmjs.org/negotiator/-/negotiator-0.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.4.2.tgz"
-                }
-              }
-            },
-            "serve-static": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/serve-static/-/serve-static-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.1.0.tgz",
-              "dependencies": {
-                "parseurl": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/parseurl/-/parseurl-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.0.1.tgz"
-                },
-                "send": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/send/-/send-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/send/-/send-0.3.0.tgz",
-                  "dependencies": {
-                    "buffer-crc32": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.1.tgz"
-                    },
-                    "debug": {
-                      "version": "0.8.0",
-                      "from": "https://registry.npmjs.org/debug/-/debug-0.8.0.tgz",
-                      "resolved": "https://registry.npmjs.org/debug/-/debug-0.8.0.tgz"
-                    },
-                    "mime": {
-                      "version": "1.2.11",
-                      "from": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz",
-                      "resolved": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz"
-                    },
-                    "range-parser": {
-                      "version": "1.0.2",
-                      "from": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.2.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "static-favicon": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/static-favicon/-/static-favicon-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/static-favicon/-/static-favicon-1.0.2.tgz"
-            },
-            "vhost": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/vhost/-/vhost-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/vhost/-/vhost-1.0.0.tgz"
-            },
-            "bytes": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/bytes/-/bytes-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/bytes/-/bytes-0.3.0.tgz"
-            },
-            "pause": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz"
-            },
-            "debug": {
-              "version": "0.8.1",
-              "from": "https://registry.npmjs.org/debug/-/debug-0.8.1.tgz",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-0.8.1.tgz"
-            },
-            "multiparty": {
-              "version": "2.2.0",
-              "from": "https://registry.npmjs.org/multiparty/-/multiparty-2.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/multiparty/-/multiparty-2.2.0.tgz",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.1.13",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "stream-counter": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/stream-counter/-/stream-counter-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/stream-counter/-/stream-counter-0.2.0.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-insert": {
-      "version": "0.4.0",
-      "from": "https://registry.npmjs.org/gulp-insert/-/gulp-insert-0.4.0.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-insert/-/gulp-insert-0.4.0.tgz",
-      "dependencies": {
-        "readable-stream": {
-          "version": "1.0.33",
-          "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dependencies": {
-            "core-util-is": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-            },
-            "isarray": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-            },
-            "string_decoder": {
-              "version": "0.10.31",
-              "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-            },
-            "inherits": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-            }
-          }
-        },
-        "streamqueue": {
-          "version": "0.0.6",
-          "from": "https://registry.npmjs.org/streamqueue/-/streamqueue-0.0.6.tgz",
-          "resolved": "https://registry.npmjs.org/streamqueue/-/streamqueue-0.0.6.tgz"
-        }
-      }
-    },
-    "gulp-load-plugins": {
-      "version": "0.7.1",
-      "from": "https://registry.npmjs.org/gulp-load-plugins/-/gulp-load-plugins-0.7.1.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-load-plugins/-/gulp-load-plugins-0.7.1.tgz",
-      "dependencies": {
-        "findup-sync": {
-          "version": "0.1.3",
-          "from": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.1.3.tgz",
-          "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.1.3.tgz",
-          "dependencies": {
-            "glob": {
-              "version": "3.2.11",
-              "from": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "minimatch": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                  "dependencies": {
-                    "lru-cache": {
-                      "version": "2.6.2",
-                      "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                    },
-                    "sigmund": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "multimatch": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/multimatch/-/multimatch-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-1.0.0.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-union": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/array-union/-/array-union-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.1.tgz",
-              "dependencies": {
-                "array-uniq": {
-                  "version": "1.0.2",
-                  "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-                }
-              }
-            },
-            "minimatch": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/minimatch/-/minimatch-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-1.0.0.tgz",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.2",
-                  "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                },
-                "sigmund": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-modify": {
-      "version": "0.0.5",
-      "from": "https://registry.npmjs.org/gulp-modify/-/gulp-modify-0.0.5.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-modify/-/gulp-modify-0.0.5.tgz"
-    },
-    "gulp-rename": {
-      "version": "1.2.2",
-      "from": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz"
-    },
-    "gulp-replace": {
-      "version": "0.5.3",
-      "from": "https://registry.npmjs.org/gulp-replace/-/gulp-replace-0.5.3.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-replace/-/gulp-replace-0.5.3.tgz",
-      "dependencies": {
-        "istextorbinary": {
-          "version": "1.0.2",
-          "from": "https://registry.npmjs.org/istextorbinary/-/istextorbinary-1.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/istextorbinary/-/istextorbinary-1.0.2.tgz",
-          "dependencies": {
-            "textextensions": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/textextensions/-/textextensions-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/textextensions/-/textextensions-1.0.1.tgz"
-            },
-            "binaryextensions": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/binaryextensions/-/binaryextensions-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/binaryextensions/-/binaryextensions-1.0.0.tgz"
-            }
-          }
-        },
-        "replacestream": {
-          "version": "2.0.0",
-          "from": "https://registry.npmjs.org/replacestream/-/replacestream-2.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/replacestream/-/replacestream-2.0.0.tgz",
-          "dependencies": {
-            "through": {
-              "version": "2.3.7",
-              "from": "https://registry.npmjs.org/through/-/through-2.3.7.tgz",
-              "resolved": "https://registry.npmjs.org/through/-/through-2.3.7.tgz"
-            }
-          }
-        },
-        "through2": {
-          "version": "0.6.3",
-          "from": "https://registry.npmjs.org/through2/-/through2-0.6.3.tgz",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.3.tgz",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.0.33",
-              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                },
-                "string_decoder": {
-                  "version": "0.10.31",
-                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-sass": {
-      "version": "1.3.3",
-      "from": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-1.3.3.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-1.3.3.tgz",
-      "dependencies": {
-        "clone": {
-          "version": "0.1.19",
-          "from": "https://registry.npmjs.org/clone/-/clone-0.1.19.tgz",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-0.1.19.tgz"
-        },
-        "gulp-util": {
-          "version": "3.0.4",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            }
-          }
-        },
-        "map-stream": {
-          "version": "0.1.0",
-          "from": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz"
-        },
-        "node-sass": {
-          "version": "2.1.1",
-          "from": "https://registry.npmjs.org/node-sass/-/node-sass-2.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-2.1.1.tgz",
-          "dependencies": {
-            "chalk": {
-              "version": "0.5.1",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz"
-                }
-              }
-            },
-            "cross-spawn": {
-              "version": "0.2.9",
-              "from": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-0.2.9.tgz",
-              "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-0.2.9.tgz",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.2",
-                  "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                }
-              }
-            },
-            "gaze": {
-              "version": "0.5.1",
-              "from": "https://registry.npmjs.org/gaze/-/gaze-0.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.1.tgz",
-              "dependencies": {
-                "globule": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
-                  "dependencies": {
-                    "lodash": {
-                      "version": "1.0.2",
-                      "from": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz"
-                    },
-                    "glob": {
-                      "version": "3.1.21",
-                      "from": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-                      "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-                      "dependencies": {
-                        "graceful-fs": {
-                          "version": "1.2.3",
-                          "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
-                          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz"
-                        },
-                        "inherits": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.0.tgz"
-                        }
-                      }
-                    },
-                    "minimatch": {
-                      "version": "0.2.14",
-                      "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-                      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.2",
-                          "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                        },
-                        "sigmund": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "get-stdin": {
-              "version": "4.0.1",
-              "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-            },
-            "meow": {
-              "version": "3.1.0",
-              "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-              "dependencies": {
-                "camelcase-keys": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                  "dependencies": {
-                    "camelcase": {
-                      "version": "1.0.2",
-                      "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                    },
-                    "map-obj": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "mkdirp": {
-              "version": "0.5.0",
-              "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8",
-                  "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-                }
-              }
-            },
-            "mocha": {
-              "version": "2.2.4",
-              "from": "https://registry.npmjs.org/mocha/-/mocha-2.2.4.tgz",
-              "resolved": "https://registry.npmjs.org/mocha/-/mocha-2.2.4.tgz",
-              "dependencies": {
-                "commander": {
-                  "version": "2.3.0",
-                  "from": "https://registry.npmjs.org/commander/-/commander-2.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/commander/-/commander-2.3.0.tgz"
-                },
-                "debug": {
-                  "version": "2.0.0",
-                  "from": "https://registry.npmjs.org/debug/-/debug-2.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.0.0.tgz",
-                  "dependencies": {
-                    "ms": {
-                      "version": "0.6.2",
-                      "from": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz",
-                      "resolved": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz"
-                    }
-                  }
-                },
-                "diff": {
-                  "version": "1.0.8",
-                  "from": "https://registry.npmjs.org/diff/-/diff-1.0.8.tgz",
-                  "resolved": "https://registry.npmjs.org/diff/-/diff-1.0.8.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.2",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz"
-                },
-                "glob": {
-                  "version": "3.2.3",
-                  "from": "https://registry.npmjs.org/glob/-/glob-3.2.3.tgz",
-                  "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.3.tgz",
-                  "dependencies": {
-                    "minimatch": {
-                      "version": "0.2.14",
-                      "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-                      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.2",
-                          "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                        },
-                        "sigmund": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                        }
-                      }
-                    },
-                    "graceful-fs": {
-                      "version": "2.0.3",
-                      "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "growl": {
-                  "version": "1.8.1",
-                  "from": "https://registry.npmjs.org/growl/-/growl-1.8.1.tgz",
-                  "resolved": "https://registry.npmjs.org/growl/-/growl-1.8.1.tgz"
-                },
-                "jade": {
-                  "version": "0.26.3",
-                  "from": "https://registry.npmjs.org/jade/-/jade-0.26.3.tgz",
-                  "resolved": "https://registry.npmjs.org/jade/-/jade-0.26.3.tgz",
-                  "dependencies": {
-                    "commander": {
-                      "version": "0.6.1",
-                      "from": "https://registry.npmjs.org/commander/-/commander-0.6.1.tgz",
-                      "resolved": "https://registry.npmjs.org/commander/-/commander-0.6.1.tgz"
-                    },
-                    "mkdirp": {
-                      "version": "0.3.0",
-                      "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz",
-                      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.2.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.2.1.tgz"
-                }
-              }
-            },
-            "nan": {
-              "version": "1.8.4",
-              "from": "https://registry.npmjs.org/nan/-/nan-1.8.4.tgz",
-              "resolved": "https://registry.npmjs.org/nan/-/nan-1.8.4.tgz"
-            },
-            "npmconf": {
-              "version": "2.1.1",
-              "from": "https://registry.npmjs.org/npmconf/-/npmconf-2.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/npmconf/-/npmconf-2.1.1.tgz",
-              "dependencies": {
-                "config-chain": {
-                  "version": "1.1.8",
-                  "from": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.8.tgz",
-                  "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.8.tgz",
-                  "dependencies": {
-                    "proto-list": {
-                      "version": "1.2.3",
-                      "from": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.3.tgz",
-                      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.3.tgz"
-                    }
-                  }
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "ini": {
-                  "version": "1.3.3",
-                  "from": "https://registry.npmjs.org/ini/-/ini-1.3.3.tgz",
-                  "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.3.tgz"
-                },
-                "nopt": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/nopt/-/nopt-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.1.tgz",
-                  "dependencies": {
-                    "abbrev": {
-                      "version": "1.0.5",
-                      "from": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz"
-                    }
-                  }
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                },
-                "osenv": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/osenv/-/osenv-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.0.tgz"
-                },
-                "uid-number": {
-                  "version": "0.0.5",
-                  "from": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.5.tgz",
-                  "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.5.tgz"
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            },
-            "request": {
-              "version": "2.55.0",
-              "from": "https://registry.npmjs.org/request/-/request-2.55.0.tgz",
-              "resolved": "https://registry.npmjs.org/request/-/request-2.55.0.tgz",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4",
-                  "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                  "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "caseless": {
-                  "version": "0.9.0",
-                  "from": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz",
-                  "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz"
-                },
-                "forever-agent": {
-                  "version": "0.6.1",
-                  "from": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz"
-                },
-                "form-data": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-                  "dependencies": {
-                    "async": {
-                      "version": "0.9.0",
-                      "from": "https://registry.npmjs.org/async/-/async-0.9.0.tgz",
-                      "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz"
-                    }
-                  }
-                },
-                "json-stringify-safe": {
-                  "version": "5.0.0",
-                  "from": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz"
-                },
-                "mime-types": {
-                  "version": "2.0.11",
-                  "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                  "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.9.1",
-                      "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                    }
-                  }
-                },
-                "qs": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/qs/-/qs-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/qs/-/qs-2.4.1.tgz"
-                },
-                "tunnel-agent": {
-                  "version": "0.4.0",
-                  "from": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz",
-                  "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz"
-                },
-                "tough-cookie": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz"
-                },
-                "http-signature": {
-                  "version": "0.10.1",
-                  "from": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-                  "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-                  "dependencies": {
-                    "assert-plus": {
-                      "version": "0.1.5",
-                      "from": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-                      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz"
-                    },
-                    "asn1": {
-                      "version": "0.1.11",
-                      "from": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-                      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
-                    },
-                    "ctype": {
-                      "version": "0.5.3",
-                      "from": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz",
-                      "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
-                    }
-                  }
-                },
-                "oauth-sign": {
-                  "version": "0.6.0",
-                  "from": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz",
-                  "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz"
-                },
-                "hawk": {
-                  "version": "2.3.1",
-                  "from": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "2.13.0",
-                      "from": "https://registry.npmjs.org/hoek/-/hoek-2.13.0.tgz",
-                      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.13.0.tgz"
-                    },
-                    "boom": {
-                      "version": "2.7.1",
-                      "from": "https://registry.npmjs.org/boom/-/boom-2.7.1.tgz",
-                      "resolved": "https://registry.npmjs.org/boom/-/boom-2.7.1.tgz"
-                    },
-                    "cryptiles": {
-                      "version": "2.0.4",
-                      "from": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.4.tgz",
-                      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.4.tgz"
-                    },
-                    "sntp": {
-                      "version": "1.0.9",
-                      "from": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-                      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz"
-                    }
-                  }
-                },
-                "aws-sign2": {
-                  "version": "0.5.0",
-                  "from": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-                  "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
-                },
-                "stringstream": {
-                  "version": "0.0.4",
-                  "from": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz"
-                },
-                "combined-stream": {
-                  "version": "0.0.7",
-                  "from": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "0.0.5",
-                      "from": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
-                    }
-                  }
-                },
-                "isstream": {
-                  "version": "0.1.2",
-                  "from": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-                  "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
-                },
-                "har-validator": {
-                  "version": "1.7.0",
-                  "from": "https://registry.npmjs.org/har-validator/-/har-validator-1.7.0.tgz",
-                  "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-1.7.0.tgz",
-                  "dependencies": {
-                    "bluebird": {
-                      "version": "2.9.25",
-                      "from": "https://registry.npmjs.org/bluebird/-/bluebird-2.9.25.tgz",
-                      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.9.25.tgz"
-                    },
-                    "chalk": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-                      "dependencies": {
-                        "ansi-styles": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                        },
-                        "escape-string-regexp": {
-                          "version": "1.0.3",
-                          "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                        },
-                        "has-ansi": {
-                          "version": "1.0.3",
-                          "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                          "dependencies": {
-                            "ansi-regex": {
-                              "version": "1.1.1",
-                              "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                            }
-                          }
-                        },
-                        "supports-color": {
-                          "version": "1.3.1",
-                          "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                        }
-                      }
-                    },
-                    "commander": {
-                      "version": "2.8.1",
-                      "from": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-                      "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-                      "dependencies": {
-                        "graceful-readlink": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "is-my-json-valid": {
-                      "version": "2.10.1",
-                      "from": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.10.1.tgz",
-                      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.10.1.tgz",
-                      "dependencies": {
-                        "generate-function": {
-                          "version": "2.0.0",
-                          "from": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz"
-                        },
-                        "generate-object-property": {
-                          "version": "1.1.1",
-                          "from": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.1.1.tgz",
-                          "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.1.1.tgz",
-                          "dependencies": {
-                            "is-property": {
-                              "version": "1.0.2",
-                              "from": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-                              "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz"
-                            }
-                          }
-                        },
-                        "jsonpointer": {
-                          "version": "1.1.0",
-                          "from": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-1.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-1.1.0.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "sass-graph": {
-              "version": "1.3.0",
-              "from": "https://registry.npmjs.org/sass-graph/-/sass-graph-1.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-1.3.0.tgz",
-              "dependencies": {
-                "commander": {
-                  "version": "2.8.1",
-                  "from": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-                  "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-                  "dependencies": {
-                    "graceful-readlink": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "shelljs": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/shelljs/-/shelljs-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.3.0.tgz"
-            },
-            "pangyp": {
-              "version": "2.1.0",
-              "from": "https://registry.npmjs.org/pangyp/-/pangyp-2.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/pangyp/-/pangyp-2.1.0.tgz",
-              "dependencies": {
-                "fstream": {
-                  "version": "1.0.4",
-                  "from": "https://registry.npmjs.org/fstream/-/fstream-1.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.4.tgz",
-                  "dependencies": {
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "glob": {
-                  "version": "4.3.5",
-                  "from": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-                  "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "once": {
-                      "version": "1.3.2",
-                      "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.6",
-                  "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.6.tgz"
-                },
-                "nopt": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/nopt/-/nopt-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.1.tgz",
-                  "dependencies": {
-                    "abbrev": {
-                      "version": "1.0.5",
-                      "from": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz"
-                    }
-                  }
-                },
-                "npmlog": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/npmlog/-/npmlog-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-1.0.0.tgz",
-                  "dependencies": {
-                    "ansi": {
-                      "version": "0.3.0",
-                      "from": "https://registry.npmjs.org/ansi/-/ansi-0.3.0.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi/-/ansi-0.3.0.tgz"
-                    },
-                    "are-we-there-yet": {
-                      "version": "1.0.4",
-                      "from": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.0.4.tgz",
-                      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.0.4.tgz",
-                      "dependencies": {
-                        "delegates": {
-                          "version": "0.1.0",
-                          "from": "https://registry.npmjs.org/delegates/-/delegates-0.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/delegates/-/delegates-0.1.0.tgz"
-                        },
-                        "readable-stream": {
-                          "version": "1.1.13",
-                          "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                          "dependencies": {
-                            "core-util-is": {
-                              "version": "1.0.1",
-                              "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                            },
-                            "isarray": {
-                              "version": "0.0.1",
-                              "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                            },
-                            "string_decoder": {
-                              "version": "0.10.31",
-                              "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                            },
-                            "inherits": {
-                              "version": "2.0.1",
-                              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "gauge": {
-                      "version": "1.0.2",
-                      "from": "https://registry.npmjs.org/gauge/-/gauge-1.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/gauge/-/gauge-1.0.2.tgz",
-                      "dependencies": {
-                        "has-unicode": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/has-unicode/-/has-unicode-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-1.0.0.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "osenv": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/osenv/-/osenv-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.0.tgz"
-                },
-                "request": {
-                  "version": "2.51.0",
-                  "from": "https://registry.npmjs.org/request/-/request-2.51.0.tgz",
-                  "resolved": "https://registry.npmjs.org/request/-/request-2.51.0.tgz",
-                  "dependencies": {
-                    "bl": {
-                      "version": "0.9.4",
-                      "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                      "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                      "dependencies": {
-                        "readable-stream": {
-                          "version": "1.0.33",
-                          "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                          "dependencies": {
-                            "core-util-is": {
-                              "version": "1.0.1",
-                              "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                            },
-                            "isarray": {
-                              "version": "0.0.1",
-                              "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                            },
-                            "string_decoder": {
-                              "version": "0.10.31",
-                              "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                            },
-                            "inherits": {
-                              "version": "2.0.1",
-                              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "caseless": {
-                      "version": "0.8.0",
-                      "from": "https://registry.npmjs.org/caseless/-/caseless-0.8.0.tgz",
-                      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.8.0.tgz"
-                    },
-                    "forever-agent": {
-                      "version": "0.5.2",
-                      "from": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz",
-                      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz"
-                    },
-                    "form-data": {
-                      "version": "0.2.0",
-                      "from": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-                      "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-                      "dependencies": {
-                        "async": {
-                          "version": "0.9.0",
-                          "from": "https://registry.npmjs.org/async/-/async-0.9.0.tgz",
-                          "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz"
-                        },
-                        "mime-types": {
-                          "version": "2.0.11",
-                          "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                          "dependencies": {
-                            "mime-db": {
-                              "version": "1.9.1",
-                              "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                              "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "json-stringify-safe": {
-                      "version": "5.0.0",
-                      "from": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.0.tgz"
-                    },
-                    "mime-types": {
-                      "version": "1.0.2",
-                      "from": "https://registry.npmjs.org/mime-types/-/mime-types-1.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-1.0.2.tgz"
-                    },
-                    "qs": {
-                      "version": "2.3.3",
-                      "from": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz",
-                      "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz"
-                    },
-                    "tunnel-agent": {
-                      "version": "0.4.0",
-                      "from": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz",
-                      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz"
-                    },
-                    "tough-cookie": {
-                      "version": "1.1.0",
-                      "from": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz"
-                    },
-                    "http-signature": {
-                      "version": "0.10.1",
-                      "from": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-                      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-                      "dependencies": {
-                        "assert-plus": {
-                          "version": "0.1.5",
-                          "from": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-                          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz"
-                        },
-                        "asn1": {
-                          "version": "0.1.11",
-                          "from": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-                          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
-                        },
-                        "ctype": {
-                          "version": "0.5.3",
-                          "from": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz",
-                          "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
-                        }
-                      }
-                    },
-                    "oauth-sign": {
-                      "version": "0.5.0",
-                      "from": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.5.0.tgz",
-                      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.5.0.tgz"
-                    },
-                    "hawk": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/hawk/-/hawk-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/hawk/-/hawk-1.1.1.tgz",
-                      "dependencies": {
-                        "hoek": {
-                          "version": "0.9.1",
-                          "from": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz",
-                          "resolved": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz"
-                        },
-                        "boom": {
-                          "version": "0.4.2",
-                          "from": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz",
-                          "resolved": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz"
-                        },
-                        "cryptiles": {
-                          "version": "0.2.2",
-                          "from": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.2.2.tgz",
-                          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.2.2.tgz"
-                        },
-                        "sntp": {
-                          "version": "0.2.4",
-                          "from": "https://registry.npmjs.org/sntp/-/sntp-0.2.4.tgz",
-                          "resolved": "https://registry.npmjs.org/sntp/-/sntp-0.2.4.tgz"
-                        }
-                      }
-                    },
-                    "aws-sign2": {
-                      "version": "0.5.0",
-                      "from": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-                      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
-                    },
-                    "stringstream": {
-                      "version": "0.0.4",
-                      "from": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz",
-                      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz"
-                    },
-                    "combined-stream": {
-                      "version": "0.0.7",
-                      "from": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                      "dependencies": {
-                        "delayed-stream": {
-                          "version": "0.0.5",
-                          "from": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "rimraf": {
-                  "version": "2.2.8",
-                  "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-                  "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-                },
-                "semver": {
-                  "version": "4.2.2",
-                  "from": "https://registry.npmjs.org/semver/-/semver-4.2.2.tgz",
-                  "resolved": "https://registry.npmjs.org/semver/-/semver-4.2.2.tgz"
-                },
-                "tar": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/tar/-/tar-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/tar/-/tar-1.0.3.tgz",
-                  "dependencies": {
-                    "block-stream": {
-                      "version": "0.0.7",
-                      "from": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.7.tgz",
-                      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.7.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "vinyl-sourcemaps-apply": {
-          "version": "0.1.4",
-          "from": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.1.4.tgz",
-          "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.1.4.tgz",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.43",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-shell": {
-      "version": "0.2.11",
-      "from": "https://registry.npmjs.org/gulp-shell/-/gulp-shell-0.2.11.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-shell/-/gulp-shell-0.2.11.tgz",
-      "dependencies": {
-        "async": {
-          "version": "0.9.0",
-          "from": "https://registry.npmjs.org/async/-/async-0.9.0.tgz",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz"
-        },
-        "gulp-util": {
-          "version": "3.0.4",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            }
-          }
-        }
-      }
-    },
-    "gulp-sourcemaps": {
-      "version": "1.3.0",
-      "from": "https://registry.npmjs.org/gulp-sourcemaps/-/gulp-sourcemaps-1.3.0.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-sourcemaps/-/gulp-sourcemaps-1.3.0.tgz",
-      "dependencies": {
-        "convert-source-map": {
-          "version": "0.4.1",
-          "from": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.4.1.tgz",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.4.1.tgz"
-        }
-      }
-    },
-    "gulp-template": {
-      "version": "3.0.0",
-      "from": "https://registry.npmjs.org/gulp-template/-/gulp-template-3.0.0.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-template/-/gulp-template-3.0.0.tgz",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.4",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            }
-          }
-        },
-        "lodash": {
-          "version": "3.8.0",
-          "from": "https://registry.npmjs.org/lodash/-/lodash-3.8.0.tgz",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.8.0.tgz"
-        }
-      }
-    },
-    "gulp-traceur": {
-      "version": "0.17.1",
-      "from": "https://registry.npmjs.org/gulp-traceur/-/gulp-traceur-0.17.1.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-traceur/-/gulp-traceur-0.17.1.tgz",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.4",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            }
-          }
-        },
-        "object-assign": {
-          "version": "2.0.0",
-          "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-        },
-        "traceur": {
-          "version": "0.0.89",
-          "from": "https://registry.npmjs.org/traceur/-/traceur-0.0.89.tgz",
-          "resolved": "https://registry.npmjs.org/traceur/-/traceur-0.0.89.tgz",
-          "dependencies": {
-            "commander": {
-              "version": "2.6.0",
-              "from": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
-              "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz"
-            },
-            "glob": {
-              "version": "4.3.5",
-              "from": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-              "dependencies": {
-                "inflight": {
-                  "version": "1.0.4",
-                  "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "rsvp": {
-              "version": "3.0.18",
-              "from": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz",
-              "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz"
-            },
-            "semver": {
-              "version": "2.3.2",
-              "from": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz"
-            },
-            "source-map-support": {
-              "version": "0.2.10",
-              "from": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.2.10.tgz",
-              "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.2.10.tgz",
-              "dependencies": {
-                "source-map": {
-                  "version": "0.1.32",
-                  "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-                  "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "vinyl-sourcemaps-apply": {
-          "version": "0.1.4",
-          "from": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.1.4.tgz",
-          "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.1.4.tgz",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.43",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-tslint": {
-      "version": "3.1.0-beta",
-      "from": "https://registry.npmjs.org/gulp-tslint/-/gulp-tslint-3.1.0-beta.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-tslint/-/gulp-tslint-3.1.0-beta.tgz",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.6",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.6.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.6.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.3.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.3.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.1.0",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.1.0.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.6.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.9",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.1.1",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.1.tgz",
-                  "dependencies": {
-                    "lodash._getnative": {
-                      "version": "3.9.0",
-                      "from": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.0.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.0.tgz"
-                    },
-                    "lodash.isarguments": {
-                      "version": "3.0.3",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.3.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.3",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.3.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            },
-            "through2": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/through2/-/through2-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.0.tgz",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "process-nextick-args": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "util-deprecate": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.5.0",
-              "from": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.0.tgz",
-              "dependencies": {
-                "clone": {
-                  "version": "1.0.2",
-                  "from": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz"
-                },
-                "clone-stats": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "map-stream": {
-          "version": "0.1.0",
-          "from": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz"
-        },
-        "rcloader": {
-          "version": "0.1.4",
-          "from": "https://registry.npmjs.org/rcloader/-/rcloader-0.1.4.tgz",
-          "resolved": "https://registry.npmjs.org/rcloader/-/rcloader-0.1.4.tgz",
-          "dependencies": {
-            "lodash": {
-              "version": "3.9.3",
-              "from": "https://registry.npmjs.org/lodash/-/lodash-3.9.3.tgz",
-              "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.9.3.tgz"
-            },
-            "rcfinder": {
-              "version": "0.1.8",
-              "from": "https://registry.npmjs.org/rcfinder/-/rcfinder-0.1.8.tgz",
-              "resolved": "https://registry.npmjs.org/rcfinder/-/rcfinder-0.1.8.tgz",
-              "dependencies": {
-                "lodash": {
-                  "version": "2.4.2",
-                  "from": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz"
-                }
-              }
-            }
-          }
-        },
-        "through": {
-          "version": "2.3.7",
-          "from": "https://registry.npmjs.org/through/-/through-2.3.7.tgz",
-          "resolved": "https://registry.npmjs.org/through/-/through-2.3.7.tgz"
-        },
-        "tslint": {
-          "version": "2.3.0-beta",
-          "from": "https://registry.npmjs.org/tslint/-/tslint-2.3.0-beta.tgz",
-          "resolved": "https://registry.npmjs.org/tslint/-/tslint-2.3.0-beta.tgz",
-          "dependencies": {
-            "findup-sync": {
-              "version": "0.1.3",
-              "from": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.1.3.tgz",
-              "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.1.3.tgz",
-              "dependencies": {
-                "glob": {
-                  "version": "3.2.11",
-                  "from": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-                  "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-                  "dependencies": {
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "minimatch": {
-                      "version": "0.3.0",
-                      "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.4",
-                          "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz",
-                          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz"
-                        },
-                        "sigmund": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "optimist": {
-              "version": "0.6.1",
-              "from": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-              "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-              "dependencies": {
-                "wordwrap": {
-                  "version": "0.0.3",
-                  "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
-                },
-                "minimist": {
-                  "version": "0.0.10",
-                  "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
-                }
-              }
-            },
-            "underscore.string": {
-              "version": "2.3.3",
-              "from": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz"
-            }
-          }
-        }
-      }
-    },
-    "gulp-typescript": {
-      "version": "2.6.0",
-      "from": "https://registry.npmjs.org/gulp-typescript/-/gulp-typescript-2.6.0.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-typescript/-/gulp-typescript-2.6.0.tgz",
-      "dependencies": {
-        "gulp-util": {
-          "version": "3.0.4",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.4.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.0.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.5.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.5.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.7.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.isnative": {
-                  "version": "3.0.2",
-                  "from": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.isnative/-/lodash.isnative-3.0.2.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.0.7",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.0.7.tgz",
-                  "dependencies": {
-                    "lodash.isarguments": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.2.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.2",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.2.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            }
-          }
-        },
-        "source-map": {
-          "version": "0.4.2",
-          "from": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-            }
-          }
-        },
-        "typescript": {
-          "version": "1.4.1",
-          "from": "https://registry.npmjs.org/typescript/-/typescript-1.4.1.tgz",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-1.4.1.tgz"
-        }
-      }
-    },
-    "gulp-uglify": {
-      "version": "1.2.0",
-      "from": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-1.2.0.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-1.2.0.tgz",
-      "dependencies": {
-        "deap": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/deap/-/deap-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/deap/-/deap-1.0.0.tgz"
-        },
-        "gulp-util": {
-          "version": "3.0.5",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.5.tgz",
-          "dependencies": {
-            "array-differ": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
-            },
-            "beeper": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/beeper/-/beeper-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    },
-                    "get-stdin": {
-                      "version": "4.0.1",
-                      "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.1.0",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.1.0.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reescape": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
-            },
-            "lodash._reevaluate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
-            },
-            "lodash._reinterpolate": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
-            },
-            "lodash.template": {
-              "version": "3.6.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.1.tgz",
-              "dependencies": {
-                "lodash._basecopy": {
-                  "version": "3.0.1",
-                  "from": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
-                },
-                "lodash._basetostring": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.0.tgz"
-                },
-                "lodash._basevalues": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
-                },
-                "lodash._isiterateecall": {
-                  "version": "3.0.9",
-                  "from": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz"
-                },
-                "lodash.escape": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
-                },
-                "lodash.keys": {
-                  "version": "3.1.1",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.1.tgz",
-                  "dependencies": {
-                    "lodash._getnative": {
-                      "version": "3.9.0",
-                      "from": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.0.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.0.tgz"
-                    },
-                    "lodash.isarguments": {
-                      "version": "3.0.3",
-                      "from": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.3.tgz"
-                    },
-                    "lodash.isarray": {
-                      "version": "3.0.3",
-                      "from": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.3.tgz"
-                    }
-                  }
-                },
-                "lodash.restparam": {
-                  "version": "3.6.1",
-                  "from": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
-                },
-                "lodash.templatesettings": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "object-assign": {
-              "version": "2.1.1",
-              "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz"
-            },
-            "replace-ext": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
-            }
-          }
-        },
-        "uglify-js": {
-          "version": "2.4.19",
-          "from": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.4.19.tgz",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.4.19.tgz",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10",
-              "from": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-            },
-            "source-map": {
-              "version": "0.1.34",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.34.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.34.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.1",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz"
-                }
-              }
-            },
-            "yargs": {
-              "version": "3.5.4",
-              "from": "https://registry.npmjs.org/yargs/-/yargs-3.5.4.tgz",
-              "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.5.4.tgz",
-              "dependencies": {
-                "camelcase": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.1.0.tgz"
-                },
-                "decamelize": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/decamelize/-/decamelize-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.0.0.tgz"
-                },
-                "window-size": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz"
-                },
-                "wordwrap": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz"
-                }
-              }
-            },
-            "uglify-to-browserify": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz"
-            }
-          }
-        },
-        "vinyl-sourcemaps-apply": {
-          "version": "0.1.4",
-          "from": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.1.4.tgz",
-          "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.1.4.tgz",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.43",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.1",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "gulp-webserver": {
-      "version": "0.8.8",
-      "from": "https://registry.npmjs.org/gulp-webserver/-/gulp-webserver-0.8.8.tgz",
-      "resolved": "https://registry.npmjs.org/gulp-webserver/-/gulp-webserver-0.8.8.tgz",
-      "dependencies": {
-        "connect": {
-          "version": "3.3.5",
-          "from": "https://registry.npmjs.org/connect/-/connect-3.3.5.tgz",
-          "resolved": "https://registry.npmjs.org/connect/-/connect-3.3.5.tgz",
-          "dependencies": {
-            "debug": {
-              "version": "2.1.3",
-              "from": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz",
-              "dependencies": {
-                "ms": {
-                  "version": "0.7.0",
-                  "from": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz",
-                  "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz"
-                }
-              }
-            },
-            "finalhandler": {
-              "version": "0.3.4",
-              "from": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.3.4.tgz",
-              "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.3.4.tgz",
-              "dependencies": {
-                "escape-html": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz"
-                },
-                "on-finished": {
-                  "version": "2.2.1",
-                  "from": "https://registry.npmjs.org/on-finished/-/on-finished-2.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.2.1.tgz",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.1.0",
-                      "from": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.0.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "parseurl": {
-              "version": "1.3.0",
-              "from": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz"
-            },
-            "utils-merge": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz"
-            }
-          }
-        },
-        "connect-livereload": {
-          "version": "0.4.1",
-          "from": "https://registry.npmjs.org/connect-livereload/-/connect-livereload-0.4.1.tgz",
-          "resolved": "https://registry.npmjs.org/connect-livereload/-/connect-livereload-0.4.1.tgz"
-        },
-        "gulp-util": {
-          "version": "2.2.20",
-          "from": "https://registry.npmjs.org/gulp-util/-/gulp-util-2.2.20.tgz",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-2.2.20.tgz",
-          "dependencies": {
-            "chalk": {
-              "version": "0.5.1",
-              "from": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                },
-                "meow": {
-                  "version": "3.1.0",
-                  "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.0.2",
-                          "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                        },
-                        "map-obj": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "minimist": {
-                      "version": "1.1.1",
-                      "from": "https://registry.npmjs.org/minimist/-/minimist-1.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.1.tgz"
-                    },
-                    "object-assign": {
-                      "version": "2.0.0",
-                      "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "lodash._reinterpolate": {
-              "version": "2.4.1",
-              "from": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-2.4.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-2.4.1.tgz"
-            },
-            "lodash.template": {
-              "version": "2.4.1",
-              "from": "https://registry.npmjs.org/lodash.template/-/lodash.template-2.4.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-2.4.1.tgz",
-              "dependencies": {
-                "lodash.defaults": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-2.4.1.tgz",
-                  "dependencies": {
-                    "lodash._objecttypes": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz"
-                    }
-                  }
-                },
-                "lodash.escape": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-2.4.1.tgz",
-                  "dependencies": {
-                    "lodash._escapehtmlchar": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash._escapehtmlchar/-/lodash._escapehtmlchar-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._escapehtmlchar/-/lodash._escapehtmlchar-2.4.1.tgz",
-                      "dependencies": {
-                        "lodash._htmlescapes": {
-                          "version": "2.4.1",
-                          "from": "https://registry.npmjs.org/lodash._htmlescapes/-/lodash._htmlescapes-2.4.1.tgz",
-                          "resolved": "https://registry.npmjs.org/lodash._htmlescapes/-/lodash._htmlescapes-2.4.1.tgz"
-                        }
-                      }
-                    },
-                    "lodash._reunescapedhtml": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash._reunescapedhtml/-/lodash._reunescapedhtml-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._reunescapedhtml/-/lodash._reunescapedhtml-2.4.1.tgz",
-                      "dependencies": {
-                        "lodash._htmlescapes": {
-                          "version": "2.4.1",
-                          "from": "https://registry.npmjs.org/lodash._htmlescapes/-/lodash._htmlescapes-2.4.1.tgz",
-                          "resolved": "https://registry.npmjs.org/lodash._htmlescapes/-/lodash._htmlescapes-2.4.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash._escapestringchar": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash._escapestringchar/-/lodash._escapestringchar-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash._escapestringchar/-/lodash._escapestringchar-2.4.1.tgz"
-                },
-                "lodash.keys": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-2.4.1.tgz",
-                  "dependencies": {
-                    "lodash._isnative": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash._isnative/-/lodash._isnative-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._isnative/-/lodash._isnative-2.4.1.tgz"
-                    },
-                    "lodash.isobject": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.4.1.tgz",
-                      "dependencies": {
-                        "lodash._objecttypes": {
-                          "version": "2.4.1",
-                          "from": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz",
-                          "resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz"
-                        }
-                      }
-                    },
-                    "lodash._shimkeys": {
-                      "version": "2.4.1",
-                      "from": "https://registry.npmjs.org/lodash._shimkeys/-/lodash._shimkeys-2.4.1.tgz",
-                      "resolved": "https://registry.npmjs.org/lodash._shimkeys/-/lodash._shimkeys-2.4.1.tgz",
-                      "dependencies": {
-                        "lodash._objecttypes": {
-                          "version": "2.4.1",
-                          "from": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz",
-                          "resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash.templatesettings": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-2.4.1.tgz"
-                },
-                "lodash.values": {
-                  "version": "2.4.1",
-                  "from": "https://registry.npmjs.org/lodash.values/-/lodash.values-2.4.1.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash.values/-/lodash.values-2.4.1.tgz"
-                }
-              }
-            },
-            "minimist": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/minimist/-/minimist-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.2.0.tgz"
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.2.3",
-              "from": "https://registry.npmjs.org/vinyl/-/vinyl-0.2.3.tgz",
-              "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.2.3.tgz",
-              "dependencies": {
-                "clone-stats": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "node.extend": {
-          "version": "1.1.3",
-          "from": "https://registry.npmjs.org/node.extend/-/node.extend-1.1.3.tgz",
-          "resolved": "https://registry.npmjs.org/node.extend/-/node.extend-1.1.3.tgz",
-          "dependencies": {
-            "is": {
-              "version": "2.1.0",
-              "from": "https://registry.npmjs.org/is/-/is-2.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/is/-/is-2.1.0.tgz"
-            }
-          }
-        },
-        "open": {
-          "version": "0.0.5",
-          "from": "https://registry.npmjs.org/open/-/open-0.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/open/-/open-0.0.5.tgz"
-        },
-        "proxy-middleware": {
-          "version": "0.5.1",
-          "from": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.5.1.tgz",
-          "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.5.1.tgz"
-        },
-        "serve-index": {
-          "version": "1.6.3",
-          "from": "https://registry.npmjs.org/serve-index/-/serve-index-1.6.3.tgz",
-          "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.6.3.tgz",
-          "dependencies": {
-            "accepts": {
-              "version": "1.2.6",
-              "from": "https://registry.npmjs.org/accepts/-/accepts-1.2.6.tgz",
-              "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.2.6.tgz",
-              "dependencies": {
-                "negotiator": {
-                  "version": "0.5.2",
-                  "from": "https://registry.npmjs.org/negotiator/-/negotiator-0.5.2.tgz",
-                  "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.5.2.tgz"
-                }
-              }
-            },
-            "batch": {
-              "version": "0.5.2",
-              "from": "https://registry.npmjs.org/batch/-/batch-0.5.2.tgz",
-              "resolved": "https://registry.npmjs.org/batch/-/batch-0.5.2.tgz"
-            },
-            "debug": {
-              "version": "2.1.3",
-              "from": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz",
-              "dependencies": {
-                "ms": {
-                  "version": "0.7.0",
-                  "from": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz",
-                  "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz"
-                }
-              }
-            },
-            "escape-html": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz"
-            },
-            "http-errors": {
-              "version": "1.3.1",
-              "from": "https://registry.npmjs.org/http-errors/-/http-errors-1.3.1.tgz",
-              "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.3.1.tgz",
-              "dependencies": {
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "statuses": {
-                  "version": "1.2.1",
-                  "from": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz"
-                }
-              }
-            },
-            "mime-types": {
-              "version": "2.0.11",
-              "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-              "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-              "dependencies": {
-                "mime-db": {
-                  "version": "1.9.1",
-                  "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                  "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                }
-              }
-            },
-            "parseurl": {
-              "version": "1.3.0",
-              "from": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz"
-            }
-          }
-        },
-        "serve-static": {
-          "version": "1.9.2",
-          "from": "https://registry.npmjs.org/serve-static/-/serve-static-1.9.2.tgz",
-          "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.9.2.tgz",
-          "dependencies": {
-            "escape-html": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz"
-            },
-            "parseurl": {
-              "version": "1.3.0",
-              "from": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz"
-            },
-            "send": {
-              "version": "0.12.2",
-              "from": "https://registry.npmjs.org/send/-/send-0.12.2.tgz",
-              "resolved": "https://registry.npmjs.org/send/-/send-0.12.2.tgz",
-              "dependencies": {
-                "debug": {
-                  "version": "2.1.3",
-                  "from": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz",
-                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz"
-                },
-                "depd": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz"
-                },
-                "destroy": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz"
-                },
-                "etag": {
-                  "version": "1.5.1",
-                  "from": "https://registry.npmjs.org/etag/-/etag-1.5.1.tgz",
-                  "resolved": "https://registry.npmjs.org/etag/-/etag-1.5.1.tgz",
-                  "dependencies": {
-                    "crc": {
-                      "version": "3.2.1",
-                      "from": "https://registry.npmjs.org/crc/-/crc-3.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/crc/-/crc-3.2.1.tgz"
-                    }
-                  }
-                },
-                "fresh": {
-                  "version": "0.2.4",
-                  "from": "https://registry.npmjs.org/fresh/-/fresh-0.2.4.tgz",
-                  "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.2.4.tgz"
-                },
-                "mime": {
-                  "version": "1.3.4",
-                  "from": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz",
-                  "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz"
-                },
-                "ms": {
-                  "version": "0.7.0",
-                  "from": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz",
-                  "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz"
-                },
-                "on-finished": {
-                  "version": "2.2.1",
-                  "from": "https://registry.npmjs.org/on-finished/-/on-finished-2.2.1.tgz",
-                  "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.2.1.tgz",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.1.0",
-                      "from": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.0.tgz"
-                    }
-                  }
-                },
-                "range-parser": {
-                  "version": "1.0.2",
-                  "from": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.2.tgz"
-                }
-              }
-            },
-            "utils-merge": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz"
-            }
-          }
-        },
-        "through2": {
-          "version": "0.5.1",
-          "from": "https://registry.npmjs.org/through2/-/through2-0.5.1.tgz",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-0.5.1.tgz",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.0.33",
-              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                },
-                "string_decoder": {
-                  "version": "0.10.31",
-                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            },
-            "xtend": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/xtend/-/xtend-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/xtend/-/xtend-3.0.0.tgz"
-            }
-          }
-        },
-        "tiny-lr": {
-          "version": "0.1.4",
-          "from": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-0.1.4.tgz",
-          "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-0.1.4.tgz",
-          "dependencies": {
-            "body-parser": {
-              "version": "1.8.4",
-              "from": "https://registry.npmjs.org/body-parser/-/body-parser-1.8.4.tgz",
-              "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.8.4.tgz",
-              "dependencies": {
-                "bytes": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz"
-                },
-                "depd": {
-                  "version": "0.4.5",
-                  "from": "https://registry.npmjs.org/depd/-/depd-0.4.5.tgz",
-                  "resolved": "https://registry.npmjs.org/depd/-/depd-0.4.5.tgz"
-                },
-                "iconv-lite": {
-                  "version": "0.4.4",
-                  "from": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.4.tgz",
-                  "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.4.tgz"
-                },
-                "media-typer": {
-                  "version": "0.3.0",
-                  "from": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
-                },
-                "on-finished": {
-                  "version": "2.1.0",
-                  "from": "https://registry.npmjs.org/on-finished/-/on-finished-2.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.1.0.tgz",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.0.5",
-                      "from": "https://registry.npmjs.org/ee-first/-/ee-first-1.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.0.5.tgz"
-                    }
-                  }
-                },
-                "qs": {
-                  "version": "2.2.4",
-                  "from": "https://registry.npmjs.org/qs/-/qs-2.2.4.tgz",
-                  "resolved": "https://registry.npmjs.org/qs/-/qs-2.2.4.tgz"
-                },
-                "raw-body": {
-                  "version": "1.3.0",
-                  "from": "https://registry.npmjs.org/raw-body/-/raw-body-1.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-1.3.0.tgz"
-                },
-                "type-is": {
-                  "version": "1.5.7",
-                  "from": "https://registry.npmjs.org/type-is/-/type-is-1.5.7.tgz",
-                  "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.5.7.tgz",
-                  "dependencies": {
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1",
-                          "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "debug": {
-              "version": "0.8.1",
-              "from": "https://registry.npmjs.org/debug/-/debug-0.8.1.tgz",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-0.8.1.tgz"
-            },
-            "faye-websocket": {
-              "version": "0.7.3",
-              "from": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.7.3.tgz",
-              "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.7.3.tgz",
-              "dependencies": {
-                "websocket-driver": {
-                  "version": "0.5.4",
-                  "from": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.5.4.tgz",
-                  "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.5.4.tgz",
-                  "dependencies": {
-                    "websocket-extensions": {
-                      "version": "0.1.1",
-                      "from": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.1.tgz",
-                      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "parseurl": {
-              "version": "1.3.0",
-              "from": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz"
-            },
-            "qs": {
-              "version": "2.2.5",
-              "from": "https://registry.npmjs.org/qs/-/qs-2.2.5.tgz",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-2.2.5.tgz"
-            }
-          }
-        },
-        "watch": {
-          "version": "0.11.0",
-          "from": "https://registry.npmjs.org/watch/-/watch-0.11.0.tgz",
-          "resolved": "https://registry.npmjs.org/watch/-/watch-0.11.0.tgz"
-        }
-      }
-    },
-    "html2jade": {
-      "version": "0.8.3",
-      "from": "https://registry.npmjs.org/html2jade/-/html2jade-0.8.3.tgz",
-      "resolved": "https://registry.npmjs.org/html2jade/-/html2jade-0.8.3.tgz",
-      "dependencies": {
-        "commander": {
-          "version": "2.8.1",
-          "from": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-          "dependencies": {
-            "graceful-readlink": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
-            }
-          }
-        },
-        "he": {
-          "version": "0.4.1",
-          "from": "https://registry.npmjs.org/he/-/he-0.4.1.tgz",
-          "resolved": "https://registry.npmjs.org/he/-/he-0.4.1.tgz"
-        },
-        "jsdom-little": {
-          "version": "0.10.6",
-          "from": "https://registry.npmjs.org/jsdom-little/-/jsdom-little-0.10.6.tgz",
-          "resolved": "https://registry.npmjs.org/jsdom-little/-/jsdom-little-0.10.6.tgz",
-          "dependencies": {
-            "htmlparser2": {
-              "version": "3.8.2",
-              "from": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.2.tgz",
-              "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.2.tgz",
-              "dependencies": {
-                "domhandler": {
-                  "version": "2.3.0",
-                  "from": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz"
-                },
-                "domutils": {
-                  "version": "1.5.1",
-                  "from": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-                  "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-                  "dependencies": {
-                    "dom-serializer": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
-                      "dependencies": {
-                        "domelementtype": {
-                          "version": "1.1.3",
-                          "from": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
-                          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz"
-                        },
-                        "entities": {
-                          "version": "1.1.1",
-                          "from": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
-                          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "domelementtype": {
-                  "version": "1.3.0",
-                  "from": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz"
-                },
-                "readable-stream": {
-                  "version": "1.1.13",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "entities": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz"
-                }
-              }
-            },
-            "nwmatcher": {
-              "version": "1.3.4",
-              "from": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.3.4.tgz",
-              "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.3.4.tgz"
-            },
-            "cssom": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/cssom/-/cssom-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.0.tgz"
-            },
-            "cssstyle": {
-              "version": "0.2.24",
-              "from": "https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.24.tgz",
-              "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.24.tgz"
-            }
-          }
-        }
-      }
-    },
-    "indent-string": {
-      "version": "1.2.1",
-      "from": "https://registry.npmjs.org/indent-string/-/indent-string-1.2.1.tgz",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-1.2.1.tgz",
-      "dependencies": {
-        "get-stdin": {
-          "version": "4.0.1",
-          "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-        },
-        "repeating": {
-          "version": "1.1.2",
-          "from": "https://registry.npmjs.org/repeating/-/repeating-1.1.2.tgz",
-          "resolved": "https://registry.npmjs.org/repeating/-/repeating-1.1.2.tgz",
-          "dependencies": {
-            "is-finite": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.0.tgz"
-            },
-            "meow": {
-              "version": "3.1.0",
-              "from": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/meow/-/meow-3.1.0.tgz",
-              "dependencies": {
-                "camelcase-keys": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                  "dependencies": {
-                    "camelcase": {
-                      "version": "1.0.2",
-                      "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                    },
-                    "map-obj": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
-                    }
-                  }
-                },
-                "object-assign": {
-                  "version": "2.0.0",
-                  "from": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.0.0.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "jasmine": {
-      "version": "2.3.1",
-      "from": "https://registry.npmjs.org/jasmine/-/jasmine-2.3.1.tgz",
-      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.3.1.tgz",
-      "dependencies": {
-        "exit": {
-          "version": "0.1.2",
-          "from": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-          "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
-        },
-        "glob": {
-          "version": "3.2.11",
-          "from": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-            },
-            "minimatch": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.4",
-                  "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz",
-                  "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz"
-                },
-                "sigmund": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "jasmine-core": {
-      "version": "2.3.4",
-      "from": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.3.4.tgz",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.3.4.tgz"
-    },
-    "jpm": {
-      "version": "1.0.0",
-      "from": "https://registry.npmjs.org/jpm/-/jpm-1.0.0.tgz",
-      "resolved": "https://registry.npmjs.org/jpm/-/jpm-1.0.0.tgz",
-      "dependencies": {
-        "commander": {
-          "version": "2.6.0",
-          "from": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz"
-        },
-        "fs-promise": {
-          "version": "0.3.1",
-          "from": "https://registry.npmjs.org/fs-promise/-/fs-promise-0.3.1.tgz",
-          "resolved": "https://registry.npmjs.org/fs-promise/-/fs-promise-0.3.1.tgz",
-          "dependencies": {
-            "any-promise": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz"
-            }
-          }
-        },
-        "fs-extra": {
-          "version": "0.16.4",
-          "from": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.16.4.tgz",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.16.4.tgz",
-          "dependencies": {
-            "graceful-fs": {
-              "version": "3.0.8",
-              "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.8.tgz",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.8.tgz"
-            },
-            "jsonfile": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.0.1.tgz"
-            },
-            "rimraf": {
-              "version": "2.3.4",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.4.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.4.tgz"
-            }
-          }
-        },
-        "fx-runner": {
-          "version": "0.0.7",
-          "from": "https://registry.npmjs.org/fx-runner/-/fx-runner-0.0.7.tgz",
-          "resolved": "https://registry.npmjs.org/fx-runner/-/fx-runner-0.0.7.tgz",
-          "dependencies": {
-            "lodash": {
-              "version": "2.4.1",
-              "from": "https://registry.npmjs.org/lodash/-/lodash-2.4.1.tgz",
-              "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.1.tgz"
-            },
-            "when": {
-              "version": "3.6.4",
-              "from": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
-              "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz"
-            },
-            "winreg": {
-              "version": "0.0.12",
-              "from": "https://registry.npmjs.org/winreg/-/winreg-0.0.12.tgz",
-              "resolved": "https://registry.npmjs.org/winreg/-/winreg-0.0.12.tgz"
-            }
-          }
-        },
-        "jpm-core": {
-          "version": "0.0.9",
-          "from": "https://registry.npmjs.org/jpm-core/-/jpm-core-0.0.9.tgz",
-          "resolved": "https://registry.npmjs.org/jpm-core/-/jpm-core-0.0.9.tgz"
-        },
-        "jetpack-id": {
-          "version": "0.0.4",
-          "from": "https://registry.npmjs.org/jetpack-id/-/jetpack-id-0.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/jetpack-id/-/jetpack-id-0.0.4.tgz"
-        },
-        "jetpack-validation": {
-          "version": "0.0.4",
-          "from": "https://registry.npmjs.org/jetpack-validation/-/jetpack-validation-0.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/jetpack-validation/-/jetpack-validation-0.0.4.tgz",
-          "dependencies": {
-            "resolve": {
-              "version": "0.7.4",
-              "from": "https://registry.npmjs.org/resolve/-/resolve-0.7.4.tgz",
-              "resolved": "https://registry.npmjs.org/resolve/-/resolve-0.7.4.tgz"
-            },
-            "semver": {
-              "version": "2.3.2",
-              "from": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz"
-            }
-          }
-        },
-        "firefox-profile": {
-          "version": "0.3.9",
-          "from": "https://registry.npmjs.org/firefox-profile/-/firefox-profile-0.3.9.tgz",
-          "resolved": "https://registry.npmjs.org/firefox-profile/-/firefox-profile-0.3.9.tgz",
-          "dependencies": {
-            "adm-zip": {
-              "version": "0.4.7",
-              "from": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.7.tgz",
-              "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.7.tgz"
-            },
-            "archiver": {
-              "version": "0.14.4",
-              "from": "https://registry.npmjs.org/archiver/-/archiver-0.14.4.tgz",
-              "resolved": "https://registry.npmjs.org/archiver/-/archiver-0.14.4.tgz",
-              "dependencies": {
-                "buffer-crc32": {
-                  "version": "0.2.5",
-                  "from": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.5.tgz",
-                  "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.5.tgz"
-                },
-                "glob": {
-                  "version": "4.3.5",
-                  "from": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-                  "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "once": {
-                      "version": "1.3.2",
-                      "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lodash": {
-                  "version": "3.2.0",
-                  "from": "https://registry.npmjs.org/lodash/-/lodash-3.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.2.0.tgz"
-                },
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "tar-stream": {
-                  "version": "1.1.5",
-                  "from": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.1.5.tgz",
-                  "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.1.5.tgz",
-                  "dependencies": {
-                    "bl": {
-                      "version": "0.9.4",
-                      "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                      "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz"
-                    },
-                    "end-of-stream": {
-                      "version": "1.1.0",
-                      "from": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                      "dependencies": {
-                        "once": {
-                          "version": "1.3.2",
-                          "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                          "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1",
-                              "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "zip-stream": {
-                  "version": "0.5.2",
-                  "from": "https://registry.npmjs.org/zip-stream/-/zip-stream-0.5.2.tgz",
-                  "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-0.5.2.tgz",
-                  "dependencies": {
-                    "compress-commons": {
-                      "version": "0.2.9",
-                      "from": "https://registry.npmjs.org/compress-commons/-/compress-commons-0.2.9.tgz",
-                      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-0.2.9.tgz",
-                      "dependencies": {
-                        "crc32-stream": {
-                          "version": "0.3.4",
-                          "from": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-0.3.4.tgz",
-                          "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-0.3.4.tgz"
-                        },
-                        "node-int64": {
-                          "version": "0.3.3",
-                          "from": "https://registry.npmjs.org/node-int64/-/node-int64-0.3.3.tgz",
-                          "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.3.3.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "async": {
-              "version": "0.9.2",
-              "from": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
-            },
-            "lazystream": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/lazystream/-/lazystream-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-0.1.0.tgz",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "lodash": {
-              "version": "3.5.0",
-              "from": "https://registry.npmjs.org/lodash/-/lodash-3.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.5.0.tgz"
-            },
-            "wrench": {
-              "version": "1.5.8",
-              "from": "https://registry.npmjs.org/wrench/-/wrench-1.5.8.tgz",
-              "resolved": "https://registry.npmjs.org/wrench/-/wrench-1.5.8.tgz"
-            },
-            "xml2js": {
-              "version": "0.4.9",
-              "from": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.9.tgz",
-              "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.9.tgz",
-              "dependencies": {
-                "sax": {
-                  "version": "0.6.1",
-                  "from": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz"
-                },
-                "xmlbuilder": {
-                  "version": "2.6.4",
-                  "from": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-2.6.4.tgz",
-                  "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-2.6.4.tgz"
-                }
-              }
-            },
-            "ini": {
-              "version": "1.3.3",
-              "from": "https://registry.npmjs.org/ini/-/ini-1.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.3.tgz"
-            }
-          }
-        },
-        "jsontoxml": {
-          "version": "0.0.11",
-          "from": "https://registry.npmjs.org/jsontoxml/-/jsontoxml-0.0.11.tgz",
-          "resolved": "https://registry.npmjs.org/jsontoxml/-/jsontoxml-0.0.11.tgz"
-        },
-        "lodash": {
-          "version": "3.3.1",
-          "from": "https://registry.npmjs.org/lodash/-/lodash-3.3.1.tgz",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.3.1.tgz"
-        },
-        "minimatch": {
-          "version": "2.0.4",
-          "from": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.4.tgz",
-          "dependencies": {
-            "brace-expansion": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.0.tgz",
-              "dependencies": {
-                "balanced-match": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.2.0.tgz"
-                },
-                "concat-map": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "node-watch": {
-          "version": "0.3.4",
-          "from": "https://registry.npmjs.org/node-watch/-/node-watch-0.3.4.tgz",
-          "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.3.4.tgz"
-        },
-        "tmp": {
-          "version": "0.0.25",
-          "from": "https://registry.npmjs.org/tmp/-/tmp-0.0.25.tgz",
-          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.25.tgz"
-        },
-        "open": {
-          "version": "0.0.5",
-          "from": "https://registry.npmjs.org/open/-/open-0.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/open/-/open-0.0.5.tgz"
-        },
-        "promzard": {
-          "version": "0.3.0",
-          "from": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz",
-          "resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz"
-        },
-        "read": {
-          "version": "1.0.5",
-          "from": "https://registry.npmjs.org/read/-/read-1.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/read/-/read-1.0.5.tgz",
-          "dependencies": {
-            "mute-stream": {
-              "version": "0.0.5",
-              "from": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz",
-              "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz"
-            }
-          }
-        },
-        "semver": {
-          "version": "4.3.3",
-          "from": "https://registry.npmjs.org/semver/-/semver-4.3.3.tgz",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.3.tgz"
-        },
-        "mozilla-version-comparator": {
-          "version": "1.0.2",
-          "from": "https://registry.npmjs.org/mozilla-version-comparator/-/mozilla-version-comparator-1.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/mozilla-version-comparator/-/mozilla-version-comparator-1.0.2.tgz"
-        },
-        "mozilla-toolkit-versioning": {
-          "version": "0.0.2",
-          "from": "https://registry.npmjs.org/mozilla-toolkit-versioning/-/mozilla-toolkit-versioning-0.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/mozilla-toolkit-versioning/-/mozilla-toolkit-versioning-0.0.2.tgz"
-        },
-        "when": {
-          "version": "3.7.2",
-          "from": "https://registry.npmjs.org/when/-/when-3.7.2.tgz",
-          "resolved": "https://registry.npmjs.org/when/-/when-3.7.2.tgz"
-        },
-        "zip-dir": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/zip-dir/-/zip-dir-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/zip-dir/-/zip-dir-1.0.0.tgz",
-          "dependencies": {
-            "jszip": {
-              "version": "2.5.0",
-              "from": "https://registry.npmjs.org/jszip/-/jszip-2.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/jszip/-/jszip-2.5.0.tgz",
-              "dependencies": {
-                "pako": {
-                  "version": "0.2.6",
-                  "from": "https://registry.npmjs.org/pako/-/pako-0.2.6.tgz",
-                  "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.6.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "js-beautify": {
-      "version": "1.5.5",
-      "from": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.5.5.tgz",
-      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.5.5.tgz",
-      "dependencies": {
-        "config-chain": {
-          "version": "1.1.8",
-          "from": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.8.tgz",
-          "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.8.tgz",
-          "dependencies": {
-            "proto-list": {
-              "version": "1.2.3",
-              "from": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.3.tgz",
-              "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.3.tgz"
-            },
-            "ini": {
-              "version": "1.3.3",
-              "from": "https://registry.npmjs.org/ini/-/ini-1.3.3.tgz",
-              "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.3.tgz"
-            }
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.0",
-          "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-          "dependencies": {
-            "minimist": {
-              "version": "0.0.8",
-              "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-            }
-          }
-        },
-        "nopt": {
-          "version": "3.0.1",
-          "from": "https://registry.npmjs.org/nopt/-/nopt-3.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.1.tgz",
-          "dependencies": {
-            "abbrev": {
-              "version": "1.0.5",
-              "from": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz",
-              "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz"
-            }
-          }
-        }
-      }
-    },
-    "js-yaml": {
-      "version": "3.3.0",
-      "from": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.3.0.tgz",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.3.0.tgz",
-      "dependencies": {
-        "argparse": {
-          "version": "1.0.2",
-          "from": "https://registry.npmjs.org/argparse/-/argparse-1.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.2.tgz",
-          "dependencies": {
-            "lodash": {
-              "version": "3.8.0",
-              "from": "https://registry.npmjs.org/lodash/-/lodash-3.8.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.8.0.tgz"
-            }
-          }
-        },
-        "esprima": {
-          "version": "2.2.0",
-          "from": "https://registry.npmjs.org/esprima/-/esprima-2.2.0.tgz",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.2.0.tgz"
-        }
-      }
-    },
-    "karma": {
-      "version": "0.12.31",
-      "from": "https://registry.npmjs.org/karma/-/karma-0.12.31.tgz",
-      "resolved": "https://registry.npmjs.org/karma/-/karma-0.12.31.tgz",
-      "dependencies": {
-        "di": {
-          "version": "0.0.1",
-          "from": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz"
-        },
-        "socket.io": {
-          "version": "0.9.16",
-          "from": "https://registry.npmjs.org/socket.io/-/socket.io-0.9.16.tgz",
-          "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-0.9.16.tgz",
-          "dependencies": {
-            "socket.io-client": {
-              "version": "0.9.16",
-              "from": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-0.9.16.tgz",
-              "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-0.9.16.tgz",
-              "dependencies": {
-                "uglify-js": {
-                  "version": "1.2.5",
-                  "from": "https://registry.npmjs.org/uglify-js/-/uglify-js-1.2.5.tgz",
-                  "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-1.2.5.tgz"
-                },
-                "ws": {
-                  "version": "0.4.32",
-                  "from": "https://registry.npmjs.org/ws/-/ws-0.4.32.tgz",
-                  "resolved": "https://registry.npmjs.org/ws/-/ws-0.4.32.tgz",
-                  "dependencies": {
-                    "commander": {
-                      "version": "2.1.0",
-                      "from": "https://registry.npmjs.org/commander/-/commander-2.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/commander/-/commander-2.1.0.tgz"
-                    },
-                    "nan": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/nan/-/nan-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/nan/-/nan-1.0.0.tgz"
-                    },
-                    "tinycolor": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/tinycolor/-/tinycolor-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/tinycolor/-/tinycolor-0.0.1.tgz"
-                    },
-                    "options": {
-                      "version": "0.0.6",
-                      "from": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
-                      "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz"
-                    }
-                  }
-                },
-                "xmlhttprequest": {
-                  "version": "1.4.2",
-                  "from": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.4.2.tgz"
-                },
-                "active-x-obfuscator": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/active-x-obfuscator/-/active-x-obfuscator-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/active-x-obfuscator/-/active-x-obfuscator-0.0.1.tgz",
-                  "dependencies": {
-                    "zeparser": {
-                      "version": "0.0.5",
-                      "from": "https://registry.npmjs.org/zeparser/-/zeparser-0.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/zeparser/-/zeparser-0.0.5.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "policyfile": {
-              "version": "0.0.4",
-              "from": "https://registry.npmjs.org/policyfile/-/policyfile-0.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/policyfile/-/policyfile-0.0.4.tgz"
-            },
-            "base64id": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/base64id/-/base64id-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/base64id/-/base64id-0.1.0.tgz"
-            },
-            "redis": {
-              "version": "0.7.3",
-              "from": "https://registry.npmjs.org/redis/-/redis-0.7.3.tgz",
-              "resolved": "https://registry.npmjs.org/redis/-/redis-0.7.3.tgz"
-            }
-          }
-        },
-        "glob": {
-          "version": "3.2.11",
-          "from": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-            },
-            "minimatch": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.2",
-                  "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-                  "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-                },
-                "sigmund": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                }
-              }
-            }
-          }
-        },
-        "minimatch": {
-          "version": "0.2.14",
-          "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-          "dependencies": {
-            "lru-cache": {
-              "version": "2.6.2",
-              "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.2.tgz"
-            },
-            "sigmund": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-            }
-          }
-        },
-        "http-proxy": {
-          "version": "0.10.4",
-          "from": "https://registry.npmjs.org/http-proxy/-/http-proxy-0.10.4.tgz",
-          "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-0.10.4.tgz",
-          "dependencies": {
-            "pkginfo": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.0.tgz"
-            },
-            "utile": {
-              "version": "0.2.1",
-              "from": "https://registry.npmjs.org/utile/-/utile-0.2.1.tgz",
-              "resolved": "https://registry.npmjs.org/utile/-/utile-0.2.1.tgz",
-              "dependencies": {
-                "async": {
-                  "version": "0.2.10",
-                  "from": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-                  "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-                },
-                "deep-equal": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.0.tgz"
-                },
-                "i": {
-                  "version": "0.3.3",
-                  "from": "https://registry.npmjs.org/i/-/i-0.3.3.tgz",
-                  "resolved": "https://registry.npmjs.org/i/-/i-0.3.3.tgz"
-                },
-                "mkdirp": {
-                  "version": "0.5.0",
-                  "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-                  "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-                  "dependencies": {
-                    "minimist": {
-                      "version": "0.0.8",
-                      "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-                    }
-                  }
-                },
-                "ncp": {
-                  "version": "0.4.2",
-                  "from": "https://registry.npmjs.org/ncp/-/ncp-0.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/ncp/-/ncp-0.4.2.tgz"
-                }
-              }
-            }
-          }
-        },
-        "optimist": {
-          "version": "0.6.1",
-          "from": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-          "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-          "dependencies": {
-            "wordwrap": {
-              "version": "0.0.3",
-              "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
-            },
-            "minimist": {
-              "version": "0.0.10",
-              "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
-            }
-          }
-        },
-        "rimraf": {
-          "version": "2.2.8",
-          "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-        },
-        "q": {
-          "version": "0.9.7",
-          "from": "https://registry.npmjs.org/q/-/q-0.9.7.tgz",
-          "resolved": "https://registry.npmjs.org/q/-/q-0.9.7.tgz"
-        },
-        "colors": {
-          "version": "0.6.2",
-          "from": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz",
-          "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz"
-        },
-        "mime": {
-          "version": "1.2.11",
-          "from": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz"
-        },
-        "log4js": {
-          "version": "0.6.24",
-          "from": "https://registry.npmjs.org/log4js/-/log4js-0.6.24.tgz",
-          "resolved": "https://registry.npmjs.org/log4js/-/log4js-0.6.24.tgz",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10",
-              "from": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-            },
-            "readable-stream": {
-              "version": "1.0.33",
-              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                },
-                "string_decoder": {
-                  "version": "0.10.31",
-                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            },
-            "underscore": {
-              "version": "1.8.2",
-              "from": "https://registry.npmjs.org/underscore/-/underscore-1.8.2.tgz",
-              "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.2.tgz"
-            }
-          }
-        },
-        "useragent": {
-          "version": "2.0.10",
-          "from": "https://registry.npmjs.org/useragent/-/useragent-2.0.10.tgz",
-          "resolved": "https://registry.npmjs.org/useragent/-/useragent-2.0.10.tgz",
-          "dependencies": {
-            "lru-cache": {
-              "version": "2.2.4",
-              "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.2.4.tgz",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.2.4.tgz"
-            }
-          }
-        },
-        "graceful-fs": {
-          "version": "2.0.3",
-          "from": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz"
-        },
-        "connect": {
-          "version": "2.26.6",
-          "from": "https://registry.npmjs.org/connect/-/connect-2.26.6.tgz",
-          "resolved": "https://registry.npmjs.org/connect/-/connect-2.26.6.tgz",
-          "dependencies": {
-            "basic-auth-connect": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz"
-            },
-            "body-parser": {
-              "version": "1.8.4",
-              "from": "https://registry.npmjs.org/body-parser/-/body-parser-1.8.4.tgz",
-              "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.8.4.tgz",
-              "dependencies": {
-                "iconv-lite": {
-                  "version": "0.4.4",
-                  "from": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.4.tgz",
-                  "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.4.tgz"
-                },
-                "on-finished": {
-                  "version": "2.1.0",
-                  "from": "https://registry.npmjs.org/on-finished/-/on-finished-2.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.1.0.tgz",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.0.5",
-                      "from": "https://registry.npmjs.org/ee-first/-/ee-first-1.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.0.5.tgz"
-                    }
-                  }
-                },
-                "raw-body": {
-                  "version": "1.3.0",
-                  "from": "https://registry.npmjs.org/raw-body/-/raw-body-1.3.0.tgz",
-                  "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-1.3.0.tgz"
-                }
-              }
-            },
-            "bytes": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz"
-            },
-            "cookie": {
-              "version": "0.1.2",
-              "from": "https://registry.npmjs.org/cookie/-/cookie-0.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.1.2.tgz"
-            },
-            "cookie-parser": {
-              "version": "1.3.4",
-              "from": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.3.4.tgz",
-              "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.3.4.tgz",
-              "dependencies": {
-                "cookie-signature": {
-                  "version": "1.0.6",
-                  "from": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-                  "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
-                }
-              }
-            },
-            "cookie-signature": {
-              "version": "1.0.5",
-              "from": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.5.tgz",
-              "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.5.tgz"
-            },
-            "compression": {
-              "version": "1.1.2",
-              "from": "https://registry.npmjs.org/compression/-/compression-1.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/compression/-/compression-1.1.2.tgz",
-              "dependencies": {
-                "accepts": {
-                  "version": "1.1.4",
-                  "from": "https://registry.npmjs.org/accepts/-/accepts-1.1.4.tgz",
-                  "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.1.4.tgz",
-                  "dependencies": {
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1",
-                          "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                        }
-                      }
-                    },
-                    "negotiator": {
-                      "version": "0.4.9",
-                      "from": "https://registry.npmjs.org/negotiator/-/negotiator-0.4.9.tgz",
-                      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.4.9.tgz"
-                    }
-                  }
-                },
-                "compressible": {
-                  "version": "2.0.2",
-                  "from": "https://registry.npmjs.org/compressible/-/compressible-2.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.2.tgz",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.9.1",
-                      "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                    }
-                  }
-                },
-                "vary": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/vary/-/vary-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/vary/-/vary-1.0.0.tgz"
-                }
-              }
-            },
-            "connect-timeout": {
-              "version": "1.3.0",
-              "from": "https://registry.npmjs.org/connect-timeout/-/connect-timeout-1.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/connect-timeout/-/connect-timeout-1.3.0.tgz",
-              "dependencies": {
-                "ms": {
-                  "version": "0.6.2",
-                  "from": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz",
-                  "resolved": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz"
-                }
-              }
-            },
-            "csurf": {
-              "version": "1.6.6",
-              "from": "https://registry.npmjs.org/csurf/-/csurf-1.6.6.tgz",
-              "resolved": "https://registry.npmjs.org/csurf/-/csurf-1.6.6.tgz",
-              "dependencies": {
-                "csrf": {
-                  "version": "2.0.7",
-                  "from": "https://registry.npmjs.org/csrf/-/csrf-2.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/csrf/-/csrf-2.0.7.tgz",
-                  "dependencies": {
-                    "base64-url": {
-                      "version": "1.2.1",
-                      "from": "https://registry.npmjs.org/base64-url/-/base64-url-1.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/base64-url/-/base64-url-1.2.1.tgz"
-                    },
-                    "rndm": {
-                      "version": "1.1.0",
-                      "from": "https://registry.npmjs.org/rndm/-/rndm-1.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/rndm/-/rndm-1.1.0.tgz"
-                    },
-                    "scmp": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/scmp/-/scmp-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/scmp/-/scmp-1.0.0.tgz"
-                    },
-                    "uid-safe": {
-                      "version": "1.1.0",
-                      "from": "https://registry.npmjs.org/uid-safe/-/uid-safe-1.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-1.1.0.tgz",
-                      "dependencies": {
-                        "native-or-bluebird": {
-                          "version": "1.1.2",
-                          "from": "https://registry.npmjs.org/native-or-bluebird/-/native-or-bluebird-1.1.2.tgz",
-                          "resolved": "https://registry.npmjs.org/native-or-bluebird/-/native-or-bluebird-1.1.2.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "http-errors": {
-                  "version": "1.2.8",
-                  "from": "https://registry.npmjs.org/http-errors/-/http-errors-1.2.8.tgz",
-                  "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.2.8.tgz",
-                  "dependencies": {
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "statuses": {
-                      "version": "1.2.1",
-                      "from": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "debug": {
-              "version": "2.0.0",
-              "from": "https://registry.npmjs.org/debug/-/debug-2.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.0.0.tgz",
-              "dependencies": {
-                "ms": {
-                  "version": "0.6.2",
-                  "from": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz",
-                  "resolved": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz"
-                }
-              }
-            },
-            "depd": {
-              "version": "0.4.5",
-              "from": "https://registry.npmjs.org/depd/-/depd-0.4.5.tgz",
-              "resolved": "https://registry.npmjs.org/depd/-/depd-0.4.5.tgz"
-            },
-            "errorhandler": {
-              "version": "1.2.4",
-              "from": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.2.4.tgz",
-              "resolved": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.2.4.tgz",
-              "dependencies": {
-                "accepts": {
-                  "version": "1.1.4",
-                  "from": "https://registry.npmjs.org/accepts/-/accepts-1.1.4.tgz",
-                  "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.1.4.tgz",
-                  "dependencies": {
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1",
-                          "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                        }
-                      }
-                    },
-                    "negotiator": {
-                      "version": "0.4.9",
-                      "from": "https://registry.npmjs.org/negotiator/-/negotiator-0.4.9.tgz",
-                      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.4.9.tgz"
-                    }
-                  }
-                },
-                "escape-html": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz"
-                }
-              }
-            },
-            "express-session": {
-              "version": "1.8.2",
-              "from": "https://registry.npmjs.org/express-session/-/express-session-1.8.2.tgz",
-              "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.8.2.tgz",
-              "dependencies": {
-                "crc": {
-                  "version": "3.0.0",
-                  "from": "https://registry.npmjs.org/crc/-/crc-3.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/crc/-/crc-3.0.0.tgz"
-                },
-                "uid-safe": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/uid-safe/-/uid-safe-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-1.0.1.tgz",
-                  "dependencies": {
-                    "mz": {
-                      "version": "1.3.0",
-                      "from": "https://registry.npmjs.org/mz/-/mz-1.3.0.tgz",
-                      "resolved": "https://registry.npmjs.org/mz/-/mz-1.3.0.tgz",
-                      "dependencies": {
-                        "native-or-bluebird": {
-                          "version": "1.2.0",
-                          "from": "https://registry.npmjs.org/native-or-bluebird/-/native-or-bluebird-1.2.0.tgz",
-                          "resolved": "https://registry.npmjs.org/native-or-bluebird/-/native-or-bluebird-1.2.0.tgz"
-                        },
-                        "thenify": {
-                          "version": "3.1.0",
-                          "from": "https://registry.npmjs.org/thenify/-/thenify-3.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.1.0.tgz"
-                        },
-                        "thenify-all": {
-                          "version": "1.6.0",
-                          "from": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-                          "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz"
-                        }
-                      }
-                    },
-                    "base64-url": {
-                      "version": "1.2.1",
-                      "from": "https://registry.npmjs.org/base64-url/-/base64-url-1.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/base64-url/-/base64-url-1.2.1.tgz"
-                    }
-                  }
-                },
-                "utils-merge": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz"
-                }
-              }
-            },
-            "finalhandler": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.2.0.tgz",
-              "dependencies": {
-                "escape-html": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz"
-                }
-              }
-            },
-            "fresh": {
-              "version": "0.2.4",
-              "from": "https://registry.npmjs.org/fresh/-/fresh-0.2.4.tgz",
-              "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.2.4.tgz"
-            },
-            "media-typer": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
-            },
-            "method-override": {
-              "version": "2.2.0",
-              "from": "https://registry.npmjs.org/method-override/-/method-override-2.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/method-override/-/method-override-2.2.0.tgz",
-              "dependencies": {
-                "methods": {
-                  "version": "1.1.0",
-                  "from": "https://registry.npmjs.org/methods/-/methods-1.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.0.tgz"
-                },
-                "vary": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/vary/-/vary-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/vary/-/vary-1.0.0.tgz"
-                }
-              }
-            },
-            "morgan": {
-              "version": "1.3.2",
-              "from": "https://registry.npmjs.org/morgan/-/morgan-1.3.2.tgz",
-              "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.3.2.tgz",
-              "dependencies": {
-                "basic-auth": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.0.0.tgz"
-                },
-                "on-finished": {
-                  "version": "2.1.0",
-                  "from": "https://registry.npmjs.org/on-finished/-/on-finished-2.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.1.0.tgz",
-                  "dependencies": {
-                    "ee-first": {
-                      "version": "1.0.5",
-                      "from": "https://registry.npmjs.org/ee-first/-/ee-first-1.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.0.5.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "multiparty": {
-              "version": "3.3.2",
-              "from": "https://registry.npmjs.org/multiparty/-/multiparty-3.3.2.tgz",
-              "resolved": "https://registry.npmjs.org/multiparty/-/multiparty-3.3.2.tgz",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.1.13",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "stream-counter": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/stream-counter/-/stream-counter-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/stream-counter/-/stream-counter-0.2.0.tgz"
-                }
-              }
-            },
-            "on-headers": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.0.tgz"
-            },
-            "parseurl": {
-              "version": "1.3.0",
-              "from": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz"
-            },
-            "qs": {
-              "version": "2.2.4",
-              "from": "https://registry.npmjs.org/qs/-/qs-2.2.4.tgz",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-2.2.4.tgz"
-            },
-            "response-time": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/response-time/-/response-time-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/response-time/-/response-time-2.0.1.tgz"
-            },
-            "serve-favicon": {
-              "version": "2.1.7",
-              "from": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.1.7.tgz",
-              "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.1.7.tgz",
-              "dependencies": {
-                "etag": {
-                  "version": "1.5.1",
-                  "from": "https://registry.npmjs.org/etag/-/etag-1.5.1.tgz",
-                  "resolved": "https://registry.npmjs.org/etag/-/etag-1.5.1.tgz",
-                  "dependencies": {
-                    "crc": {
-                      "version": "3.2.1",
-                      "from": "https://registry.npmjs.org/crc/-/crc-3.2.1.tgz",
-                      "resolved": "https://registry.npmjs.org/crc/-/crc-3.2.1.tgz"
-                    }
-                  }
-                },
-                "ms": {
-                  "version": "0.6.2",
-                  "from": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz",
-                  "resolved": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz"
-                }
-              }
-            },
-            "serve-index": {
-              "version": "1.2.1",
-              "from": "https://registry.npmjs.org/serve-index/-/serve-index-1.2.1.tgz",
-              "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.2.1.tgz",
-              "dependencies": {
-                "accepts": {
-                  "version": "1.1.4",
-                  "from": "https://registry.npmjs.org/accepts/-/accepts-1.1.4.tgz",
-                  "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.1.4.tgz",
-                  "dependencies": {
-                    "mime-types": {
-                      "version": "2.0.11",
-                      "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.9.1",
-                          "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                        }
-                      }
-                    },
-                    "negotiator": {
-                      "version": "0.4.9",
-                      "from": "https://registry.npmjs.org/negotiator/-/negotiator-0.4.9.tgz",
-                      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.4.9.tgz"
-                    }
-                  }
-                },
-                "batch": {
-                  "version": "0.5.1",
-                  "from": "https://registry.npmjs.org/batch/-/batch-0.5.1.tgz",
-                  "resolved": "https://registry.npmjs.org/batch/-/batch-0.5.1.tgz"
-                }
-              }
-            },
-            "serve-static": {
-              "version": "1.6.5",
-              "from": "https://registry.npmjs.org/serve-static/-/serve-static-1.6.5.tgz",
-              "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.6.5.tgz",
-              "dependencies": {
-                "escape-html": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz"
-                },
-                "send": {
-                  "version": "0.9.3",
-                  "from": "https://registry.npmjs.org/send/-/send-0.9.3.tgz",
-                  "resolved": "https://registry.npmjs.org/send/-/send-0.9.3.tgz",
-                  "dependencies": {
-                    "destroy": {
-                      "version": "1.0.3",
-                      "from": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz",
-                      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz"
-                    },
-                    "etag": {
-                      "version": "1.4.0",
-                      "from": "https://registry.npmjs.org/etag/-/etag-1.4.0.tgz",
-                      "resolved": "https://registry.npmjs.org/etag/-/etag-1.4.0.tgz",
-                      "dependencies": {
-                        "crc": {
-                          "version": "3.0.0",
-                          "from": "https://registry.npmjs.org/crc/-/crc-3.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/crc/-/crc-3.0.0.tgz"
-                        }
-                      }
-                    },
-                    "ms": {
-                      "version": "0.6.2",
-                      "from": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz",
-                      "resolved": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz"
-                    },
-                    "on-finished": {
-                      "version": "2.1.0",
-                      "from": "https://registry.npmjs.org/on-finished/-/on-finished-2.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.1.0.tgz",
-                      "dependencies": {
-                        "ee-first": {
-                          "version": "1.0.5",
-                          "from": "https://registry.npmjs.org/ee-first/-/ee-first-1.0.5.tgz",
-                          "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.0.5.tgz"
-                        }
-                      }
-                    },
-                    "range-parser": {
-                      "version": "1.0.2",
-                      "from": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.2.tgz",
-                      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.2.tgz"
-                    }
-                  }
-                },
-                "utils-merge": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz"
-                }
-              }
-            },
-            "type-is": {
-              "version": "1.5.7",
-              "from": "https://registry.npmjs.org/type-is/-/type-is-1.5.7.tgz",
-              "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.5.7.tgz",
-              "dependencies": {
-                "mime-types": {
-                  "version": "2.0.11",
-                  "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                  "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.11.tgz",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.9.1",
-                      "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.9.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "vhost": {
-              "version": "3.0.0",
-              "from": "https://registry.npmjs.org/vhost/-/vhost-3.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/vhost/-/vhost-3.0.0.tgz"
-            },
-            "pause": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz"
-            }
-          }
-        },
-        "source-map": {
-          "version": "0.1.43",
-          "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-            }
-          }
-        }
-      }
-    },
-    "karma-chrome-launcher": {
-      "version": "0.1.8",
-      "from": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-0.1.8.tgz",
-      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-0.1.8.tgz"
-    },
-    "karma-cli": {
-      "version": "0.0.4",
-      "from": "https://registry.npmjs.org/karma-cli/-/karma-cli-0.0.4.tgz",
-      "resolved": "https://registry.npmjs.org/karma-cli/-/karma-cli-0.0.4.tgz",
-      "dependencies": {
-        "resolve": {
-          "version": "0.5.1",
-          "from": "https://registry.npmjs.org/resolve/-/resolve-0.5.1.tgz",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-0.5.1.tgz"
-        }
-      }
-    },
-    "karma-dart": {
-      "version": "0.2.8",
-      "from": "https://registry.npmjs.org/karma-dart/-/karma-dart-0.2.8.tgz",
-      "resolved": "https://registry.npmjs.org/karma-dart/-/karma-dart-0.2.8.tgz",
-      "dependencies": {
-        "dart2jsaas": {
-          "version": "0.0.16",
-          "from": "https://registry.npmjs.org/dart2jsaas/-/dart2jsaas-0.0.16.tgz",
-          "resolved": "https://registry.npmjs.org/dart2jsaas/-/dart2jsaas-0.0.16.tgz",
-          "dependencies": {
-            "mkdirp": {
-              "version": "0.3.5",
-              "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz"
-            },
-            "q": {
-              "version": "0.9.7",
-              "from": "https://registry.npmjs.org/q/-/q-0.9.7.tgz",
-              "resolved": "https://registry.npmjs.org/q/-/q-0.9.7.tgz"
-            },
-            "q-io": {
-              "version": "1.10.9",
-              "from": "https://registry.npmjs.org/q-io/-/q-io-1.10.9.tgz",
-              "resolved": "https://registry.npmjs.org/q-io/-/q-io-1.10.9.tgz",
-              "dependencies": {
-                "qs": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/qs/-/qs-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/qs/-/qs-0.1.0.tgz"
-                },
-                "url2": {
-                  "version": "0.0.0",
-                  "from": "https://registry.npmjs.org/url2/-/url2-0.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/url2/-/url2-0.0.0.tgz"
-                },
-                "mime": {
-                  "version": "1.2.11",
-                  "from": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz",
-                  "resolved": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz"
-                },
-                "mimeparse": {
-                  "version": "0.1.4",
-                  "from": "https://registry.npmjs.org/mimeparse/-/mimeparse-0.1.4.tgz",
-                  "resolved": "https://registry.npmjs.org/mimeparse/-/mimeparse-0.1.4.tgz"
-                },
-                "collections": {
-                  "version": "0.2.2",
-                  "from": "https://registry.npmjs.org/collections/-/collections-0.2.2.tgz",
-                  "resolved": "https://registry.npmjs.org/collections/-/collections-0.2.2.tgz",
-                  "dependencies": {
-                    "weak-map": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/weak-map/-/weak-map-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/weak-map/-/weak-map-1.0.0.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "karma-jasmine": {
-      "version": "0.3.5",
-      "from": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-0.3.5.tgz",
-      "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-0.3.5.tgz"
-    },
-    "karma-sauce-launcher": {
-      "version": "0.2.11",
-      "from": "https://registry.npmjs.org/karma-sauce-launcher/-/karma-sauce-launcher-0.2.11.tgz",
-      "resolved": "https://registry.npmjs.org/karma-sauce-launcher/-/karma-sauce-launcher-0.2.11.tgz",
-      "dependencies": {
-        "wd": {
-          "version": "0.3.12",
-          "from": "https://registry.npmjs.org/wd/-/wd-0.3.12.tgz",
-          "resolved": "https://registry.npmjs.org/wd/-/wd-0.3.12.tgz",
-          "dependencies": {
-            "archiver": {
-              "version": "0.14.4",
-              "from": "https://registry.npmjs.org/archiver/-/archiver-0.14.4.tgz",
-              "resolved": "https://registry.npmjs.org/archiver/-/archiver-0.14.4.tgz",
-              "dependencies": {
-                "async": {
-                  "version": "0.9.2",
-                  "from": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-                  "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
-                },
-                "buffer-crc32": {
-                  "version": "0.2.5",
-                  "from": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.5.tgz",
-                  "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.5.tgz"
-                },
-                "glob": {
-                  "version": "4.3.5",
-                  "from": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-                  "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "once": {
-                      "version": "1.3.2",
-                      "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "lazystream": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/lazystream/-/lazystream-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-0.1.0.tgz"
-                },
-                "lodash": {
-                  "version": "3.2.0",
-                  "from": "https://registry.npmjs.org/lodash/-/lodash-3.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.2.0.tgz"
-                },
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "string_decoder": {
-                      "version": "0.10.31",
-                      "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "tar-stream": {
-                  "version": "1.1.5",
-                  "from": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.1.5.tgz",
-                  "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.1.5.tgz",
-                  "dependencies": {
-                    "bl": {
-                      "version": "0.9.4",
-                      "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                      "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz"
-                    },
-                    "end-of-stream": {
-                      "version": "1.1.0",
-                      "from": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                      "dependencies": {
-                        "once": {
-                          "version": "1.3.2",
-                          "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                          "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                          "dependencies": {
-                            "wrappy": {
-                              "version": "1.0.1",
-                              "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "zip-stream": {
-                  "version": "0.5.2",
-                  "from": "https://registry.npmjs.org/zip-stream/-/zip-stream-0.5.2.tgz",
-                  "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-0.5.2.tgz",
-                  "dependencies": {
-                    "compress-commons": {
-                      "version": "0.2.9",
-                      "from": "https://registry.npmjs.org/compress-commons/-/compress-commons-0.2.9.tgz",
-                      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-0.2.9.tgz",
-                      "dependencies": {
-                        "crc32-stream": {
-                          "version": "0.3.4",
-                          "from": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-0.3.4.tgz",
-                          "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-0.3.4.tgz"
-                        },
-                        "node-int64": {
-                          "version": "0.3.3",
-                          "from": "https://registry.npmjs.org/node-int64/-/node-int64-0.3.3.tgz",
-                          "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.3.3.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "async": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/async/-/async-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-1.0.0.tgz"
-            },
-            "lodash": {
-              "version": "3.9.3",
-              "from": "https://registry.npmjs.org/lodash/-/lodash-3.9.3.tgz",
-              "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.9.3.tgz"
-            },
-            "q": {
-              "version": "1.4.1",
-              "from": "https://registry.npmjs.org/q/-/q-1.4.1.tgz",
-              "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz"
-            },
-            "request": {
-              "version": "2.55.0",
-              "from": "https://registry.npmjs.org/request/-/request-2.55.0.tgz",
-              "resolved": "https://registry.npmjs.org/request/-/request-2.55.0.tgz",
-              "dependencies": {
-                "bl": {
-                  "version": "0.9.4",
-                  "from": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                  "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "string_decoder": {
-                          "version": "0.10.31",
-                          "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "caseless": {
-                  "version": "0.9.0",
-                  "from": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz",
-                  "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz"
-                },
-                "forever-agent": {
-                  "version": "0.6.1",
-                  "from": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-                  "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz"
-                },
-                "form-data": {
-                  "version": "0.2.0",
-                  "from": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-                  "dependencies": {
-                    "async": {
-                      "version": "0.9.2",
-                      "from": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-                      "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
-                    }
-                  }
-                },
-                "json-stringify-safe": {
-                  "version": "5.0.1",
-                  "from": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
-                },
-                "mime-types": {
-                  "version": "2.0.13",
-                  "from": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.13.tgz",
-                  "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.13.tgz",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.11.0",
-                      "from": "https://registry.npmjs.org/mime-db/-/mime-db-1.11.0.tgz",
-                      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.11.0.tgz"
-                    }
-                  }
-                },
-                "qs": {
-                  "version": "2.4.2",
-                  "from": "https://registry.npmjs.org/qs/-/qs-2.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/qs/-/qs-2.4.2.tgz"
-                },
-                "tunnel-agent": {
-                  "version": "0.4.0",
-                  "from": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz",
-                  "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz"
-                },
-                "tough-cookie": {
-                  "version": "1.2.0",
-                  "from": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.2.0.tgz",
-                  "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.2.0.tgz"
-                },
-                "http-signature": {
-                  "version": "0.10.1",
-                  "from": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-                  "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-                  "dependencies": {
-                    "assert-plus": {
-                      "version": "0.1.5",
-                      "from": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-                      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz"
-                    },
-                    "asn1": {
-                      "version": "0.1.11",
-                      "from": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-                      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
-                    },
-                    "ctype": {
-                      "version": "0.5.3",
-                      "from": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz",
-                      "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
-                    }
-                  }
-                },
-                "oauth-sign": {
-                  "version": "0.6.0",
-                  "from": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz",
-                  "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz"
-                },
-                "hawk": {
-                  "version": "2.3.1",
-                  "from": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz",
-                  "resolved": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "2.14.0",
-                      "from": "https://registry.npmjs.org/hoek/-/hoek-2.14.0.tgz",
-                      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.14.0.tgz"
-                    },
-                    "boom": {
-                      "version": "2.7.2",
-                      "from": "https://registry.npmjs.org/boom/-/boom-2.7.2.tgz",
-                      "resolved": "https://registry.npmjs.org/boom/-/boom-2.7.2.tgz"
-                    },
-                    "cryptiles": {
-                      "version": "2.0.4",
-                      "from": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.4.tgz",
-                      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.4.tgz"
-                    },
-                    "sntp": {
-                      "version": "1.0.9",
-                      "from": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-                      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz"
-                    }
-                  }
-                },
-                "aws-sign2": {
-                  "version": "0.5.0",
-                  "from": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-                  "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
-                },
-                "stringstream": {
-                  "version": "0.0.4",
-                  "from": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz"
-                },
-                "combined-stream": {
-                  "version": "0.0.7",
-                  "from": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "0.0.5",
-                      "from": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
-                    }
-                  }
-                },
-                "isstream": {
-                  "version": "0.1.2",
-                  "from": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-                  "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
-                },
-                "har-validator": {
-                  "version": "1.7.1",
-                  "from": "https://registry.npmjs.org/har-validator/-/har-validator-1.7.1.tgz",
-                  "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-1.7.1.tgz",
-                  "dependencies": {
-                    "bluebird": {
-                      "version": "2.9.27",
-                      "from": "https://registry.npmjs.org/bluebird/-/bluebird-2.9.27.tgz",
-                      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.9.27.tgz"
-                    },
-                    "chalk": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-                      "dependencies": {
-                        "ansi-styles": {
-                          "version": "2.0.1",
-                          "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                        },
-                        "escape-string-regexp": {
-                          "version": "1.0.3",
-                          "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-                          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                        },
-                        "has-ansi": {
-                          "version": "1.0.3",
-                          "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                          "dependencies": {
-                            "ansi-regex": {
-                              "version": "1.1.1",
-                              "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                            },
-                            "get-stdin": {
-                              "version": "4.0.1",
-                              "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                              "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                            }
-                          }
-                        },
-                        "supports-color": {
-                          "version": "1.3.1",
-                          "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-                          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                        }
-                      }
-                    },
-                    "commander": {
-                      "version": "2.8.1",
-                      "from": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-                      "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-                      "dependencies": {
-                        "graceful-readlink": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "is-my-json-valid": {
-                      "version": "2.12.0",
-                      "from": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.12.0.tgz",
-                      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.12.0.tgz",
-                      "dependencies": {
-                        "generate-function": {
-                          "version": "2.0.0",
-                          "from": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz"
-                        },
-                        "generate-object-property": {
-                          "version": "1.2.0",
-                          "from": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
-                          "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
-                          "dependencies": {
-                            "is-property": {
-                              "version": "1.0.2",
-                              "from": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-                              "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz"
-                            }
-                          }
-                        },
-                        "jsonpointer": {
-                          "version": "1.1.0",
-                          "from": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-1.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-1.1.0.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "underscore.string": {
-              "version": "3.0.3",
-              "from": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.0.3.tgz"
-            },
-            "vargs": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/vargs/-/vargs-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/vargs/-/vargs-0.1.0.tgz"
-            }
-          }
-        },
-        "sauce-connect-launcher": {
-          "version": "0.11.1",
-          "from": "https://registry.npmjs.org/sauce-connect-launcher/-/sauce-connect-launcher-0.11.1.tgz",
-          "resolved": "https://registry.npmjs.org/sauce-connect-launcher/-/sauce-connect-launcher-0.11.1.tgz",
-          "dependencies": {
-            "lodash": {
-              "version": "3.5.0",
-              "from": "https://registry.npmjs.org/lodash/-/lodash-3.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.5.0.tgz"
-            },
-            "async": {
-              "version": "0.9.0",
-              "from": "https://registry.npmjs.org/async/-/async-0.9.0.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz"
-            },
-            "adm-zip": {
-              "version": "0.4.7",
-              "from": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.7.tgz",
-              "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.7.tgz"
-            },
-            "rimraf": {
-              "version": "2.2.6",
-              "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.6.tgz",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.6.tgz"
-            }
-          }
-        },
-        "q": {
-          "version": "0.9.7",
-          "from": "https://registry.npmjs.org/q/-/q-0.9.7.tgz",
-          "resolved": "https://registry.npmjs.org/q/-/q-0.9.7.tgz"
-        },
-        "saucelabs": {
-          "version": "0.1.1",
-          "from": "https://registry.npmjs.org/saucelabs/-/saucelabs-0.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-0.1.1.tgz"
-        }
-      }
-    },
-    "lodash": {
-      "version": "2.4.2",
-      "from": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz"
-    },
-    "madge": {
-      "version": "0.5.0",
-      "from": "https://registry.npmjs.org/madge/-/madge-0.5.0.tgz",
-      "resolved": "https://registry.npmjs.org/madge/-/madge-0.5.0.tgz",
-      "dependencies": {
-        "amdetective": {
-          "version": "0.0.2",
-          "from": "https://registry.npmjs.org/amdetective/-/amdetective-0.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/amdetective/-/amdetective-0.0.2.tgz",
-          "dependencies": {
-            "esprima": {
-              "version": "1.2.2",
-              "from": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz",
-              "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz"
-            }
-          }
-        },
-        "coffee-script": {
-          "version": "1.3.3",
-          "from": "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"
-        },
-        "colors": {
-          "version": "0.6.0-1",
-          "from": "https://registry.npmjs.org/colors/-/colors-0.6.0-1.tgz",
-          "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.0-1.tgz"
-        },
-        "commander": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/commander/-/commander-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-1.0.0.tgz"
-        },
-        "commondir": {
-          "version": "0.0.1",
-          "from": "https://registry.npmjs.org/commondir/-/commondir-0.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/commondir/-/commondir-0.0.1.tgz"
-        },
-        "detective": {
-          "version": "0.1.1",
-          "from": "https://registry.npmjs.org/detective/-/detective-0.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/detective/-/detective-0.1.1.tgz"
-        },
-        "detective-es6": {
-          "version": "1.1.0",
-          "from": "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",
-          "dependencies": {
-            "node-source-walk": {
-              "version": "1.4.2",
-              "from": "https://registry.npmjs.org/node-source-walk/-/node-source-walk-1.4.2.tgz",
-              "resolved": "https://registry.npmjs.org/node-source-walk/-/node-source-walk-1.4.2.tgz",
-              "dependencies": {
-                "acorn": {
-                  "version": "1.0.3",
-                  "from": "https://registry.npmjs.org/acorn/-/acorn-1.0.3.tgz",
-                  "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.0.3.tgz"
-                }
-              }
-            }
-          }
-        },
-        "graphviz": {
-          "version": "0.0.7",
-          "from": "https://registry.npmjs.org/graphviz/-/graphviz-0.0.7.tgz",
-          "resolved": "https://registry.npmjs.org/graphviz/-/graphviz-0.0.7.tgz",
-          "dependencies": {
-            "temp": {
-              "version": "0.4.0",
-              "from": "https://registry.npmjs.org/temp/-/temp-0.4.0.tgz",
-              "resolved": "https://registry.npmjs.org/temp/-/temp-0.4.0.tgz"
-            }
-          }
-        },
-        "react-tools": {
-          "version": "0.12.1",
-          "from": "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",
-          "dependencies": {
-            "commoner": {
-              "version": "0.10.1",
-              "from": "https://registry.npmjs.org/commoner/-/commoner-0.10.1.tgz",
-              "resolved": "https://registry.npmjs.org/commoner/-/commoner-0.10.1.tgz",
-              "dependencies": {
-                "q": {
-                  "version": "1.1.2",
-                  "from": "https://registry.npmjs.org/q/-/q-1.1.2.tgz",
-                  "resolved": "https://registry.npmjs.org/q/-/q-1.1.2.tgz"
-                },
-                "recast": {
-                  "version": "0.9.11",
-                  "from": "https://registry.npmjs.org/recast/-/recast-0.9.11.tgz",
-                  "resolved": "https://registry.npmjs.org/recast/-/recast-0.9.11.tgz",
-                  "dependencies": {
-                    "esprima-fb": {
-                      "version": "8001.1001.0-dev-harmony-fb",
-                      "from": "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"
-                    },
-                    "source-map": {
-                      "version": "0.1.41",
-                      "from": "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",
-                      "dependencies": {
-                        "amdefine": {
-                          "version": "0.1.0",
-                          "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                        }
-                      }
-                    },
-                    "ast-types": {
-                      "version": "0.6.7",
-                      "from": "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"
-                    }
-                  }
-                },
-                "commander": {
-                  "version": "2.5.1",
-                  "from": "https://registry.npmjs.org/commander/-/commander-2.5.1.tgz",
-                  "resolved": "https://registry.npmjs.org/commander/-/commander-2.5.1.tgz"
-                },
-                "graceful-fs": {
-                  "version": "3.0.5",
-                  "from": "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"
-                },
-                "glob": {
-                  "version": "4.2.2",
-                  "from": "https://registry.npmjs.org/glob/-/glob-4.2.2.tgz",
-                  "resolved": "https://registry.npmjs.org/glob/-/glob-4.2.2.tgz",
-                  "dependencies": {
-                    "inflight": {
-                      "version": "1.0.4",
-                      "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "minimatch": {
-                      "version": "1.0.0",
-                      "from": "https://registry.npmjs.org/minimatch/-/minimatch-1.0.0.tgz",
-                      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-1.0.0.tgz",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.5.0",
-                          "from": "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"
-                        },
-                        "sigmund": {
-                          "version": "1.0.0",
-                          "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
-                        }
-                      }
-                    },
-                    "once": {
-                      "version": "1.3.1",
-                      "from": "https://registry.npmjs.org/once/-/once-1.3.1.tgz",
-                      "resolved": "https://registry.npmjs.org/once/-/once-1.3.1.tgz",
-                      "dependencies": {
-                        "wrappy": {
-                          "version": "1.0.1",
-                          "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "mkdirp": {
-                  "version": "0.5.0",
-                  "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-                  "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-                  "dependencies": {
-                    "minimist": {
-                      "version": "0.0.8",
-                      "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-                    }
-                  }
-                },
-                "private": {
-                  "version": "0.1.6",
-                  "from": "https://registry.npmjs.org/private/-/private-0.1.6.tgz",
-                  "resolved": "https://registry.npmjs.org/private/-/private-0.1.6.tgz"
-                },
-                "install": {
-                  "version": "0.1.8",
-                  "from": "https://registry.npmjs.org/install/-/install-0.1.8.tgz",
-                  "resolved": "https://registry.npmjs.org/install/-/install-0.1.8.tgz"
-                },
-                "iconv-lite": {
-                  "version": "0.4.5",
-                  "from": "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"
-                }
-              }
-            },
-            "jstransform": {
-              "version": "8.2.0",
-              "from": "https://registry.npmjs.org/jstransform/-/jstransform-8.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-8.2.0.tgz",
-              "dependencies": {
-                "base62": {
-                  "version": "0.1.1",
-                  "from": "https://registry.npmjs.org/base62/-/base62-0.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/base62/-/base62-0.1.1.tgz"
-                },
-                "esprima-fb": {
-                  "version": "8001.1001.0-dev-harmony-fb",
-                  "from": "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"
-                },
-                "source-map": {
-                  "version": "0.1.31",
-                  "from": "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",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "resolve": {
-          "version": "0.2.3",
-          "from": "https://registry.npmjs.org/resolve/-/resolve-0.2.3.tgz",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-0.2.3.tgz"
-        },
-        "uglify-js": {
-          "version": "1.2.6",
-          "from": "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"
-        },
-        "walkdir": {
-          "version": "0.0.5",
-          "from": "https://registry.npmjs.org/walkdir/-/walkdir-0.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/walkdir/-/walkdir-0.0.5.tgz"
-        }
-      }
-    },
-    "marked": {
-      "version": "0.3.3",
-      "from": "https://registry.npmjs.org/marked/-/marked-0.3.3.tgz",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.3.tgz"
-    },
-    "merge": {
-      "version": "1.2.0",
-      "from": "https://registry.npmjs.org/merge/-/merge-1.2.0.tgz",
-      "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.0.tgz"
-    },
-    "merge2": {
-      "version": "0.3.5",
-      "from": "https://registry.npmjs.org/merge2/-/merge2-0.3.5.tgz",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-0.3.5.tgz"
-    },
-    "minimatch": {
-      "version": "2.0.7",
-      "from": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.7.tgz",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.7.tgz",
-      "dependencies": {
-        "brace-expansion": {
-          "version": "1.1.0",
-          "from": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.0.tgz",
-          "dependencies": {
-            "balanced-match": {
-              "version": "0.2.0",
-              "from": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.2.0.tgz",
-              "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.2.0.tgz"
-            },
-            "concat-map": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
-            }
-          }
-        }
-      }
-    },
-    "minimist": {
-      "version": "1.1.1",
-      "from": "https://registry.npmjs.org/minimist/-/minimist-1.1.1.tgz",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.1.tgz"
-    },
-    "mock-fs": {
-      "version": "2.6.0",
-      "from": "https://registry.npmjs.org/mock-fs/-/mock-fs-2.6.0.tgz",
-      "resolved": "https://registry.npmjs.org/mock-fs/-/mock-fs-2.6.0.tgz",
-      "dependencies": {
-        "rewire": {
-          "version": "2.0.1",
-          "from": "https://registry.npmjs.org/rewire/-/rewire-2.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/rewire/-/rewire-2.0.1.tgz"
-        }
-      }
-    },
-    "node-html-encoder": {
-      "version": "0.0.2",
-      "from": "https://registry.npmjs.org/node-html-encoder/-/node-html-encoder-0.0.2.tgz",
-      "resolved": "https://registry.npmjs.org/node-html-encoder/-/node-html-encoder-0.0.2.tgz"
-    },
-    "node-uuid": {
-      "version": "1.4.3",
-      "from": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.3.tgz",
-      "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.3.tgz"
-    },
-    "parse5": {
-      "version": "1.3.2",
-      "from": "https://registry.npmjs.org/parse5/-/parse5-1.3.2.tgz",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.3.2.tgz"
-    },
-    "protractor": {
-      "version": "2.1.0",
-      "from": "https://registry.npmjs.org/protractor/-/protractor-2.1.0.tgz",
-      "resolved": "https://registry.npmjs.org/protractor/-/protractor-2.1.0.tgz",
-      "dependencies": {
-        "request": {
-          "version": "2.36.0",
-          "from": "https://registry.npmjs.org/request/-/request-2.36.0.tgz",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.36.0.tgz",
-          "dependencies": {
-            "qs": {
-              "version": "0.6.6",
-              "from": "https://registry.npmjs.org/qs/-/qs-0.6.6.tgz",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-0.6.6.tgz"
-            },
-            "json-stringify-safe": {
-              "version": "5.0.1",
-              "from": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
-            },
-            "mime": {
-              "version": "1.2.11",
-              "from": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz",
-              "resolved": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz"
-            },
-            "forever-agent": {
-              "version": "0.5.2",
-              "from": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz",
-              "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz"
-            },
-            "tough-cookie": {
-              "version": "1.1.0",
-              "from": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-1.1.0.tgz"
-            },
-            "form-data": {
-              "version": "0.1.4",
-              "from": "https://registry.npmjs.org/form-data/-/form-data-0.1.4.tgz",
-              "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.1.4.tgz",
-              "dependencies": {
-                "combined-stream": {
-                  "version": "0.0.7",
-                  "from": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                  "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-                  "dependencies": {
-                    "delayed-stream": {
-                      "version": "0.0.5",
-                      "from": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
-                    }
-                  }
-                },
-                "async": {
-                  "version": "0.9.2",
-                  "from": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-                  "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
-                }
-              }
-            },
-            "tunnel-agent": {
-              "version": "0.4.0",
-              "from": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz",
-              "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz"
-            },
-            "http-signature": {
-              "version": "0.10.1",
-              "from": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-              "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-              "dependencies": {
-                "assert-plus": {
-                  "version": "0.1.5",
-                  "from": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-                  "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz"
-                },
-                "asn1": {
-                  "version": "0.1.11",
-                  "from": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-                  "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
-                },
-                "ctype": {
-                  "version": "0.5.3",
-                  "from": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz",
-                  "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
-                }
-              }
-            },
-            "oauth-sign": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.3.0.tgz"
-            },
-            "hawk": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/hawk/-/hawk-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/hawk/-/hawk-1.0.0.tgz",
-              "dependencies": {
-                "hoek": {
-                  "version": "0.9.1",
-                  "from": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz",
-                  "resolved": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz"
-                },
-                "boom": {
-                  "version": "0.4.2",
-                  "from": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz",
-                  "resolved": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz"
-                },
-                "cryptiles": {
-                  "version": "0.2.2",
-                  "from": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.2.2.tgz",
-                  "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.2.2.tgz"
-                },
-                "sntp": {
-                  "version": "0.2.4",
-                  "from": "https://registry.npmjs.org/sntp/-/sntp-0.2.4.tgz",
-                  "resolved": "https://registry.npmjs.org/sntp/-/sntp-0.2.4.tgz"
-                }
-              }
-            },
-            "aws-sign2": {
-              "version": "0.5.0",
-              "from": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-              "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
-            }
-          }
-        },
-        "minijasminenode": {
-          "version": "1.1.1",
-          "from": "https://registry.npmjs.org/minijasminenode/-/minijasminenode-1.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/minijasminenode/-/minijasminenode-1.1.1.tgz"
-        },
-        "jasminewd": {
-          "version": "1.1.0",
-          "from": "https://registry.npmjs.org/jasminewd/-/jasminewd-1.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/jasminewd/-/jasminewd-1.1.0.tgz"
-        },
-        "jasminewd2": {
-          "version": "0.0.5",
-          "from": "https://registry.npmjs.org/jasminewd2/-/jasminewd2-0.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/jasminewd2/-/jasminewd2-0.0.5.tgz"
-        },
-        "saucelabs": {
-          "version": "0.1.1",
-          "from": "https://registry.npmjs.org/saucelabs/-/saucelabs-0.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-0.1.1.tgz"
-        },
-        "glob": {
-          "version": "3.2.11",
-          "from": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-            },
-            "minimatch": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-              "dependencies": {
-                "lru-cache": {
-                  "version": "2.6.4",
-                  "from": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz",
-                  "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.4.tgz"
-                },
-                "sigmund": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "adm-zip": {
-          "version": "0.4.4",
-          "from": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.4.tgz",
-          "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.4.tgz"
-        },
-        "optimist": {
-          "version": "0.6.1",
-          "from": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-          "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-          "dependencies": {
-            "wordwrap": {
-              "version": "0.0.3",
-              "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
-            },
-            "minimist": {
-              "version": "0.0.10",
-              "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
-            }
-          }
-        },
-        "q": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/q/-/q-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/q/-/q-1.0.0.tgz"
-        },
-        "source-map-support": {
-          "version": "0.2.10",
-          "from": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.2.10.tgz",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.2.10.tgz",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.32",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                }
-              }
-            }
-          }
-        },
-        "html-entities": {
-          "version": "1.1.2",
-          "from": "https://registry.npmjs.org/html-entities/-/html-entities-1.1.2.tgz",
-          "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.1.2.tgz"
-        },
-        "accessibility-developer-tools": {
-          "version": "2.6.0",
-          "from": "https://registry.npmjs.org/accessibility-developer-tools/-/accessibility-developer-tools-2.6.0.tgz",
-          "resolved": "https://registry.npmjs.org/accessibility-developer-tools/-/accessibility-developer-tools-2.6.0.tgz"
-        }
-      }
-    },
-    "q": {
-      "version": "1.3.0",
-      "from": "https://registry.npmjs.org/q/-/q-1.3.0.tgz",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.3.0.tgz"
-    },
-    "react": {
-      "version": "0.13.2",
-      "from": "https://registry.npmjs.org/react/-/react-0.13.2.tgz",
-      "resolved": "https://registry.npmjs.org/react/-/react-0.13.2.tgz",
-      "dependencies": {
-        "envify": {
-          "version": "3.4.0",
-          "from": "https://registry.npmjs.org/envify/-/envify-3.4.0.tgz",
-          "resolved": "https://registry.npmjs.org/envify/-/envify-3.4.0.tgz",
-          "dependencies": {
-            "through": {
-              "version": "2.3.7",
-              "from": "https://registry.npmjs.org/through/-/through-2.3.7.tgz",
-              "resolved": "https://registry.npmjs.org/through/-/through-2.3.7.tgz"
-            },
-            "jstransform": {
-              "version": "10.1.0",
-              "from": "https://registry.npmjs.org/jstransform/-/jstransform-10.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-10.1.0.tgz",
-              "dependencies": {
-                "base62": {
-                  "version": "0.1.1",
-                  "from": "https://registry.npmjs.org/base62/-/base62-0.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/base62/-/base62-0.1.1.tgz"
-                },
-                "esprima-fb": {
-                  "version": "13001.1001.0-dev-harmony-fb",
-                  "from": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-13001.1001.0-dev-harmony-fb.tgz",
-                  "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-13001.1001.0-dev-harmony-fb.tgz"
-                },
-                "source-map": {
-                  "version": "0.1.31",
-                  "from": "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",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "reflect-metadata": {
-      "version": "0.1.0",
-      "from": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.0.tgz",
-      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.0.tgz"
-    },
-    "rewire": {
-      "version": "2.3.3",
-      "from": "https://registry.npmjs.org/rewire/-/rewire-2.3.3.tgz",
-      "resolved": "https://registry.npmjs.org/rewire/-/rewire-2.3.3.tgz"
-    },
-    "run-sequence": {
-      "version": "1.1.0",
-      "from": "https://registry.npmjs.org/run-sequence/-/run-sequence-1.1.0.tgz",
-      "resolved": "https://registry.npmjs.org/run-sequence/-/run-sequence-1.1.0.tgz",
-      "dependencies": {
-        "chalk": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-          "dependencies": {
-            "ansi-styles": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-            },
-            "escape-string-regexp": {
-              "version": "1.0.3",
-              "from": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-            },
-            "has-ansi": {
-              "version": "1.0.3",
-              "from": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-              "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-              "dependencies": {
-                "ansi-regex": {
-                  "version": "1.1.1",
-                  "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                },
-                "get-stdin": {
-                  "version": "4.0.1",
-                  "from": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
-                }
-              }
-            },
-            "supports-color": {
-              "version": "1.3.1",
-              "from": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-            }
-          }
-        }
-      }
-    },
-    "rx": {
-      "version": "2.5.1",
-      "from": "https://registry.npmjs.org/rx/-/rx-2.5.1.tgz",
-      "resolved": "https://registry.npmjs.org/rx/-/rx-2.5.1.tgz"
-    },
-    "selenium-webdriver": {
-      "version": "2.45.1",
-      "from": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.45.1.tgz",
-      "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.45.1.tgz",
-      "dependencies": {
-        "adm-zip": {
-          "version": "0.4.4",
-          "from": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.4.tgz",
-          "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.4.tgz"
-        },
-        "rimraf": {
-          "version": "2.3.3",
-          "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.3.3.tgz"
-        },
-        "tmp": {
-          "version": "0.0.24",
-          "from": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz",
-          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz"
-        },
-        "ws": {
-          "version": "0.7.1",
-          "from": "https://registry.npmjs.org/ws/-/ws-0.7.1.tgz",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-0.7.1.tgz",
-          "dependencies": {
-            "options": {
-              "version": "0.0.6",
-              "from": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
-              "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz"
-            },
-            "ultron": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/ultron/-/ultron-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.1.tgz"
-            }
-          }
-        },
-        "xml2js": {
-          "version": "0.4.4",
-          "from": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.4.tgz",
-          "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.4.tgz",
-          "dependencies": {
-            "sax": {
-              "version": "0.6.1",
-              "from": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz",
-              "resolved": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz"
-            },
-            "xmlbuilder": {
-              "version": "2.6.2",
-              "from": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-2.6.2.tgz",
-              "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-2.6.2.tgz",
-              "dependencies": {
-                "lodash": {
-                  "version": "3.5.0",
-                  "from": "https://registry.npmjs.org/lodash/-/lodash-3.5.0.tgz",
-                  "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.5.0.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "semver": {
-      "version": "4.3.4",
-      "from": "https://registry.npmjs.org/semver/-/semver-4.3.4.tgz",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.4.tgz"
-    },
-    "shelljs": {
-      "version": "0.5.0",
-      "from": "https://registry.npmjs.org/shelljs/-/shelljs-0.5.0.tgz",
-      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.5.0.tgz"
-    },
-    "sorted-object": {
-      "version": "1.0.0",
-      "from": "https://registry.npmjs.org/sorted-object/-/sorted-object-1.0.0.tgz",
-      "resolved": "https://registry.npmjs.org/sorted-object/-/sorted-object-1.0.0.tgz"
-    },
-    "source-map": {
-      "version": "0.3.0",
-      "from": "https://registry.npmjs.org/source-map/-/source-map-0.3.0.tgz",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.3.0.tgz",
-      "dependencies": {
-        "amdefine": {
-          "version": "0.1.0",
-          "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-        }
-      }
-    },
-    "sprintf-js": {
-      "version": "1.0.2",
-      "from": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.2.tgz",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.2.tgz"
-    },
-    "string": {
-      "version": "3.1.1",
-      "from": "https://registry.npmjs.org/string/-/string-3.1.1.tgz",
-      "resolved": "https://registry.npmjs.org/string/-/string-3.1.1.tgz"
-    },
-    "strip-ansi": {
-      "version": "2.0.1",
-      "from": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-2.0.1.tgz",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-2.0.1.tgz",
-      "dependencies": {
-        "ansi-regex": {
-          "version": "1.1.1",
-          "from": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-        }
-      }
-    },
-    "symlink-or-copy": {
-      "version": "1.0.1",
-      "from": "https://registry.npmjs.org/symlink-or-copy/-/symlink-or-copy-1.0.1.tgz",
-      "resolved": "https://registry.npmjs.org/symlink-or-copy/-/symlink-or-copy-1.0.1.tgz",
-      "dependencies": {
-        "copy-dereference": {
-          "version": "1.0.0",
-          "from": "https://registry.npmjs.org/copy-dereference/-/copy-dereference-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/copy-dereference/-/copy-dereference-1.0.0.tgz"
-        }
-      }
-    },
-    "systemjs": {
-      "version": "0.9.3",
-      "from": "https://registry.npmjs.org/systemjs/-/systemjs-0.9.3.tgz",
-      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-0.9.3.tgz"
-    },
-    "systemjs-builder": {
-      "version": "0.10.6",
-      "from": "https://registry.npmjs.org/systemjs-builder/-/systemjs-builder-0.10.6.tgz",
-      "resolved": "https://registry.npmjs.org/systemjs-builder/-/systemjs-builder-0.10.6.tgz",
-      "dependencies": {
-        "glob": {
-          "version": "5.0.5",
-          "from": "https://registry.npmjs.org/glob/-/glob-5.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.5.tgz",
-          "dependencies": {
-            "inflight": {
-              "version": "1.0.4",
-              "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-              "dependencies": {
-                "wrappy": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                }
-              }
-            },
-            "inherits": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-            },
-            "once": {
-              "version": "1.3.2",
-              "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-              "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-              "dependencies": {
-                "wrappy": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                }
-              }
-            },
-            "path-is-absolute": {
-              "version": "1.0.0",
-              "from": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.0.tgz",
-              "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.0.tgz"
-            }
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.0",
-          "from": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-          "dependencies": {
-            "minimist": {
-              "version": "0.0.8",
-              "from": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-            }
-          }
-        },
-        "rsvp": {
-          "version": "3.0.18",
-          "from": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz",
-          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz"
-        },
-        "source-map": {
-          "version": "0.4.2",
-          "from": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-            }
-          }
-        },
-        "systemjs": {
-          "version": "0.16.11",
-          "from": "https://registry.npmjs.org/systemjs/-/systemjs-0.16.11.tgz",
-          "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-0.16.11.tgz",
-          "dependencies": {
-            "es6-module-loader": {
-              "version": "0.16.6",
-              "from": "https://registry.npmjs.org/es6-module-loader/-/es6-module-loader-0.16.6.tgz",
-              "resolved": "https://registry.npmjs.org/es6-module-loader/-/es6-module-loader-0.16.6.tgz",
-              "dependencies": {
-                "when": {
-                  "version": "3.7.3",
-                  "from": "https://registry.npmjs.org/when/-/when-3.7.3.tgz",
-                  "resolved": "https://registry.npmjs.org/when/-/when-3.7.3.tgz"
-                }
-              }
-            }
-          }
-        },
-        "traceur": {
-          "version": "0.0.88",
-          "from": "https://registry.npmjs.org/traceur/-/traceur-0.0.88.tgz",
-          "resolved": "https://registry.npmjs.org/traceur/-/traceur-0.0.88.tgz",
-          "dependencies": {
-            "commander": {
-              "version": "2.6.0",
-              "from": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
-              "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz"
-            },
-            "glob": {
-              "version": "4.3.5",
-              "from": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-              "dependencies": {
-                "inflight": {
-                  "version": "1.0.4",
-                  "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                  "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "dependencies": {
-                    "wrappy": {
-                      "version": "1.0.1",
-                      "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "semver": {
-              "version": "2.3.2",
-              "from": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz"
-            },
-            "source-map-support": {
-              "version": "0.2.10",
-              "from": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.2.10.tgz",
-              "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.2.10.tgz",
-              "dependencies": {
-                "source-map": {
-                  "version": "0.1.32",
-                  "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-                  "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-                  "dependencies": {
-                    "amdefine": {
-                      "version": "0.1.0",
-                      "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "uglify-js": {
-          "version": "2.4.21",
-          "from": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.4.21.tgz",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.4.21.tgz",
-          "dependencies": {
-            "async": {
-              "version": "0.2.10",
-              "from": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-            },
-            "source-map": {
-              "version": "0.1.34",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.34.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.34.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                }
-              }
-            },
-            "uglify-to-browserify": {
-              "version": "1.0.2",
-              "from": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-              "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz"
-            },
-            "yargs": {
-              "version": "3.5.4",
-              "from": "https://registry.npmjs.org/yargs/-/yargs-3.5.4.tgz",
-              "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.5.4.tgz",
-              "dependencies": {
-                "camelcase": {
-                  "version": "1.0.2",
-                  "from": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.0.2.tgz"
-                },
-                "decamelize": {
-                  "version": "1.0.0",
-                  "from": "https://registry.npmjs.org/decamelize/-/decamelize-1.0.0.tgz",
-                  "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.0.0.tgz"
-                },
-                "window-size": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz"
-                },
-                "wordwrap": {
-                  "version": "0.0.2",
-                  "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "temp": {
-      "version": "0.8.1",
-      "from": "https://registry.npmjs.org/temp/-/temp-0.8.1.tgz",
-      "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.1.tgz",
-      "dependencies": {
-        "rimraf": {
-          "version": "2.2.8",
-          "from": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-        }
-      }
-    },
-    "ternary-stream": {
-      "version": "1.2.3",
-      "from": "https://registry.npmjs.org/ternary-stream/-/ternary-stream-1.2.3.tgz",
-      "resolved": "https://registry.npmjs.org/ternary-stream/-/ternary-stream-1.2.3.tgz",
-      "dependencies": {
-        "duplexer2": {
-          "version": "0.0.2",
-          "from": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-          "dependencies": {
-            "readable-stream": {
-              "version": "1.1.13",
-              "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                },
-                "string_decoder": {
-                  "version": "0.10.31",
-                  "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "merge-stream": {
-          "version": "0.1.7",
-          "from": "https://registry.npmjs.org/merge-stream/-/merge-stream-0.1.7.tgz",
-          "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-0.1.7.tgz"
-        },
-        "fork-stream": {
-          "version": "0.0.4",
-          "from": "https://registry.npmjs.org/fork-stream/-/fork-stream-0.0.4.tgz",
-          "resolved": "https://registry.npmjs.org/fork-stream/-/fork-stream-0.0.4.tgz"
-        }
-      }
-    },
-    "through2": {
-      "version": "0.6.5",
-      "from": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-      "dependencies": {
-        "readable-stream": {
-          "version": "1.0.33",
-          "from": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dependencies": {
-            "core-util-is": {
-              "version": "1.0.1",
-              "from": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-            },
-            "isarray": {
-              "version": "0.0.1",
-              "from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-            },
-            "string_decoder": {
-              "version": "0.10.31",
-              "from": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-            },
-            "inherits": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-            }
-          }
-        }
-      }
-    },
-    "traceur": {
-      "version": "0.0.87",
-      "from": "https://registry.npmjs.org/traceur/-/traceur-0.0.87.tgz",
-      "resolved": "https://registry.npmjs.org/traceur/-/traceur-0.0.87.tgz",
-      "dependencies": {
-        "commander": {
-          "version": "2.6.0",
-          "from": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz"
-        },
-        "glob": {
-          "version": "4.3.5",
-          "from": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-          "dependencies": {
-            "inflight": {
-              "version": "1.0.4",
-              "from": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-              "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-              "dependencies": {
-                "wrappy": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                }
-              }
-            },
-            "inherits": {
-              "version": "2.0.1",
-              "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-            },
-            "once": {
-              "version": "1.3.2",
-              "from": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-              "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-              "dependencies": {
-                "wrappy": {
-                  "version": "1.0.1",
-                  "from": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                  "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "rsvp": {
-          "version": "3.0.18",
-          "from": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz",
-          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.0.18.tgz"
-        },
-        "semver": {
-          "version": "2.3.2",
-          "from": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz"
-        },
-        "source-map-support": {
-          "version": "0.2.10",
-          "from": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.2.10.tgz",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.2.10.tgz",
-          "dependencies": {
-            "source-map": {
-              "version": "0.1.32",
-              "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.0",
-                  "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "ts2dart": {
-      "version": "0.6.6",
-      "dependencies": {
-        "fs-extra": {
-          "version": "0.18.4",
-          "from": "fs-extra@>=0.18.0 <0.19.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.18.4.tgz",
-          "dependencies": {
-            "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"
-            },
-            "jsonfile": {
-              "version": "2.2.1",
-              "from": "jsonfile@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.2.1.tgz"
-            },
-            "rimraf": {
-              "version": "2.4.1",
-              "from": "rimraf@>=2.2.8 <3.0.0",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.4.1.tgz",
-              "dependencies": {
-                "glob": {
-                  "version": "4.5.3",
-                  "from": "glob@>=4.0.6 <5.0.0",
-                  "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
-                  "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",
-                      "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"
-                        }
-                      }
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "inherits@>=2.0.0 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    },
-                    "minimatch": {
-                      "version": "2.0.8",
-                      "from": "minimatch@>=2.0.1 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.8.tgz",
-                      "dependencies": {
-                        "brace-expansion": {
-                          "version": "1.1.0",
-                          "from": "brace-expansion@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.0.tgz",
-                          "dependencies": {
-                            "balanced-match": {
-                              "version": "0.2.0",
-                              "from": "balanced-match@>=0.2.0 <0.3.0",
-                              "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.2.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"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "once": {
-                      "version": "1.3.2",
-                      "from": "once@>=1.3.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "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"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "minimist": {
-          "version": "1.1.1",
-          "from": "minimist@>=1.1.1 <2.0.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.1.tgz"
-        },
-        "source-map": {
-          "version": "0.4.2",
-          "from": "source-map@>=0.4.2 <0.5.0",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.2.tgz",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.1",
-              "from": "amdefine@>=0.0.4",
-              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz"
-            }
-          }
-        },
-        "source-map-support": {
-          "version": "0.3.2",
-          "from": "source-map-support@>=0.3.1 <0.4.0",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.3.2.tgz",
-          "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",
-              "dependencies": {
-                "amdefine": {
-                  "version": "0.1.1",
-                  "from": "amdefine@>=0.0.4",
-                  "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "typescript": {
-          "version": "1.5.3",
-          "from": "microsoft/TypeScript#release-1.5",
-          "resolved": "git://github.com/microsoft/TypeScript.git#331b63df7d05c9476b6b9cae97a7a158eba303ca"
-        },
-        "merge2": {
-          "version": "0.3.6",
-          "from": "merge2@>=0.3.1 <0.4.0",
-          "resolved": "https://registry.npmjs.org/merge2/-/merge2-0.3.6.tgz"
-        },
-        "clang-format": {
-          "version": "1.0.25",
-          "from": "clang-format@>=1.0.25 <2.0.0",
-          "resolved": "https://registry.npmjs.org/clang-format/-/clang-format-1.0.25.tgz",
-          "dependencies": {
-            "resolve": {
-              "version": "1.1.6",
-              "from": "resolve@>=1.1.6 <2.0.0",
-              "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.tgz"
-            }
-          }
-        },
-        "temp": {
-          "version": "0.8.3",
-          "from": "temp@>=0.8.1 <0.9.0",
-          "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz",
-          "dependencies": {
-            "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"
-            },
-            "rimraf": {
-              "version": "2.2.8",
-              "from": "rimraf@>=2.2.6 <2.3.0",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-            }
-          }
-        },
-        "chai": {
-          "version": "2.3.0",
-          "from": "chai@>=2.1.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/chai/-/chai-2.3.0.tgz",
-          "dependencies": {
-            "assertion-error": {
-              "version": "1.0.0",
-              "from": "assertion-error@1.0.0",
-              "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.0.0.tgz"
-            },
-            "deep-eql": {
-              "version": "0.1.3",
-              "from": "deep-eql@0.1.3",
-              "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-0.1.3.tgz",
-              "dependencies": {
-                "type-detect": {
-                  "version": "0.1.1",
-                  "from": "type-detect@0.1.1",
-                  "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-0.1.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "which": {
-          "version": "1.1.1",
-          "from": "which@>=1.0.9 <2.0.0",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.1.1.tgz",
-          "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",
-              "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"
-                }
-              }
-            }
-          }
-        },
-        "gulp-clang-format": {
-          "version": "1.0.21",
-          "from": "gulp-clang-format@>=1.0.19 <2.0.0",
-          "resolved": "https://registry.npmjs.org/gulp-clang-format/-/gulp-clang-format-1.0.21.tgz",
-          "dependencies": {
-            "clang-format": {
-              "version": "1.0.25",
-              "from": "clang-format@>=1.0.25 <2.0.0",
-              "resolved": "https://registry.npmjs.org/clang-format/-/clang-format-1.0.25.tgz",
-              "dependencies": {
-                "resolve": {
-                  "version": "1.1.6",
-                  "from": "resolve@>=1.1.6 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.tgz"
-                }
-              }
-            },
-            "pkginfo": {
-              "version": "0.3.0",
-              "from": "pkginfo@>=0.3.0 <0.4.0",
-              "resolved": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.0.tgz"
-            },
-            "stream-equal": {
-              "version": "0.1.5",
-              "from": "stream-equal@>=0.1.5 <0.2.0",
-              "resolved": "https://registry.npmjs.org/stream-equal/-/stream-equal-0.1.5.tgz",
-              "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",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "core-util-is@>=1.0.0 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "isarray@0.0.1",
-                      "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"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "inherits@>=2.0.1 <2.1.0",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.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",
-              "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",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "core-util-is@>=1.0.0 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "isarray@0.0.1",
-                      "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"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "inherits@>=2.0.1 <2.1.0",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "xtend": {
-                  "version": "4.0.0",
-                  "from": "xtend@>=4.0.0 <4.1.0-0",
-                  "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.0.tgz"
-                }
-              }
-            }
-          }
-        },
-        "gulp-sourcemaps": {
-          "version": "1.5.2",
-          "from": "gulp-sourcemaps@>=1.5.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/gulp-sourcemaps/-/gulp-sourcemaps-1.5.2.tgz",
-          "dependencies": {
-            "convert-source-map": {
-              "version": "1.1.1",
-              "from": "convert-source-map@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.1.tgz"
-            },
-            "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"
-            },
-            "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",
-              "dependencies": {
-                "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"
-                },
-                "is-utf8": {
-                  "version": "0.2.0",
-                  "from": "is-utf8@>=0.2.0 <0.3.0",
-                  "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.0.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",
-              "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",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "core-util-is@>=1.0.0 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "isarray@0.0.1",
-                      "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"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "inherits@>=2.0.1 <2.1.0",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "xtend": {
-                  "version": "4.0.0",
-                  "from": "xtend@>=4.0.0 <4.1.0-0",
-                  "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.0.tgz"
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.4.6",
-              "from": "vinyl@>=0.4.6 <0.5.0",
-              "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz",
-              "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"
-                },
-                "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"
-                }
-              }
-            }
-          }
-        },
-        "gulp-mocha": {
-          "version": "2.1.2",
-          "from": "gulp-mocha@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/gulp-mocha/-/gulp-mocha-2.1.2.tgz",
-          "dependencies": {
-            "mocha": {
-              "version": "2.2.5",
-              "from": "mocha@>=2.0.1 <3.0.0",
-              "resolved": "https://registry.npmjs.org/mocha/-/mocha-2.2.5.tgz",
-              "dependencies": {
-                "commander": {
-                  "version": "2.3.0",
-                  "from": "commander@2.3.0",
-                  "resolved": "https://registry.npmjs.org/commander/-/commander-2.3.0.tgz"
-                },
-                "debug": {
-                  "version": "2.0.0",
-                  "from": "debug@2.0.0",
-                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.0.0.tgz",
-                  "dependencies": {
-                    "ms": {
-                      "version": "0.6.2",
-                      "from": "ms@0.6.2",
-                      "resolved": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz"
-                    }
-                  }
-                },
-                "diff": {
-                  "version": "1.4.0",
-                  "from": "diff@1.4.0",
-                  "resolved": "https://registry.npmjs.org/diff/-/diff-1.4.0.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.2",
-                  "from": "escape-string-regexp@1.0.2",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz"
-                },
-                "glob": {
-                  "version": "3.2.3",
-                  "from": "glob@3.2.3",
-                  "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.3.tgz",
-                  "dependencies": {
-                    "minimatch": {
-                      "version": "0.2.14",
-                      "from": "minimatch@>=0.2.11 <0.3.0",
-                      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-                      "dependencies": {
-                        "lru-cache": {
-                          "version": "2.6.5",
-                          "from": "lru-cache@>=2.0.0 <3.0.0",
-                          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.5.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"
-                        }
-                      }
-                    },
-                    "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"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "inherits@>=2.0.0 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "growl": {
-                  "version": "1.8.1",
-                  "from": "growl@1.8.1",
-                  "resolved": "https://registry.npmjs.org/growl/-/growl-1.8.1.tgz"
-                },
-                "jade": {
-                  "version": "0.26.3",
-                  "from": "jade@0.26.3",
-                  "resolved": "https://registry.npmjs.org/jade/-/jade-0.26.3.tgz",
-                  "dependencies": {
-                    "commander": {
-                      "version": "0.6.1",
-                      "from": "commander@0.6.1",
-                      "resolved": "https://registry.npmjs.org/commander/-/commander-0.6.1.tgz"
-                    },
-                    "mkdirp": {
-                      "version": "0.3.0",
-                      "from": "mkdirp@0.3.0",
-                      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz"
-                    }
-                  }
-                },
-                "mkdirp": {
-                  "version": "0.5.0",
-                  "from": "mkdirp@0.5.0",
-                  "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-                  "dependencies": {
-                    "minimist": {
-                      "version": "0.0.8",
-                      "from": "minimist@0.0.8",
-                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.2.1",
-                  "from": "supports-color@>=1.2.0 <1.3.0",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.2.1.tgz"
-                }
-              }
-            },
-            "plur": {
-              "version": "1.0.0",
-              "from": "plur@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/plur/-/plur-1.0.0.tgz"
-            },
-            "through": {
-              "version": "2.3.7",
-              "from": "through@>=2.3.4 <3.0.0",
-              "resolved": "https://registry.npmjs.org/through/-/through-2.3.7.tgz"
-            }
-          }
-        },
-        "gulp": {
-          "version": "3.9.0",
-          "from": "gulp@>=3.8.11 <4.0.0",
-          "resolved": "https://registry.npmjs.org/gulp/-/gulp-3.9.0.tgz",
-          "dependencies": {
-            "archy": {
-              "version": "1.0.0",
-              "from": "archy@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "chalk@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "ansi-styles@>=2.0.1 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "escape-string-regexp@>=1.0.2 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "has-ansi@>=1.0.3 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "ansi-regex@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.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"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "2.0.1",
-                  "from": "strip-ansi@>=2.0.1 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-2.0.1.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "ansi-regex@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "supports-color@>=1.3.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.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"
-            },
-            "interpret": {
-              "version": "0.6.2",
-              "from": "interpret@>=0.6.2 <0.7.0",
-              "resolved": "https://registry.npmjs.org/interpret/-/interpret-0.6.2.tgz"
-            },
-            "liftoff": {
-              "version": "2.1.0",
-              "from": "liftoff@>=2.1.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-2.1.0.tgz",
-              "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"
-                },
-                "findup-sync": {
-                  "version": "0.2.1",
-                  "from": "findup-sync@>=0.2.1 <0.3.0",
-                  "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.2.1.tgz",
-                  "dependencies": {
-                    "glob": {
-                      "version": "4.3.5",
-                      "from": "glob@>=4.3.0 <4.4.0",
-                      "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-                      "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",
-                          "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"
-                            }
-                          }
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "inherits@>=2.0.1 <2.1.0",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        },
-                        "minimatch": {
-                          "version": "2.0.8",
-                          "from": "minimatch@>=2.0.1 <3.0.0",
-                          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.8.tgz",
-                          "dependencies": {
-                            "brace-expansion": {
-                              "version": "1.1.0",
-                              "from": "brace-expansion@>=1.0.0 <2.0.0",
-                              "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.0.tgz",
-                              "dependencies": {
-                                "balanced-match": {
-                                  "version": "0.2.0",
-                                  "from": "balanced-match@>=0.2.0 <0.3.0",
-                                  "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.2.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"
-                                }
-                              }
-                            }
-                          }
-                        },
-                        "once": {
-                          "version": "1.3.2",
-                          "from": "once@>=1.3.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                          "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"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "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"
-                },
-                "rechoir": {
-                  "version": "0.6.1",
-                  "from": "rechoir@>=0.6.0 <0.7.0",
-                  "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.1.tgz"
-                },
-                "resolve": {
-                  "version": "1.1.6",
-                  "from": "resolve@>=1.1.6 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.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",
-              "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",
-                  "dependencies": {
-                    "once": {
-                      "version": "1.3.2",
-                      "from": "once@>=1.3.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                      "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"
-                        }
-                      }
-                    }
-                  }
-                },
-                "sequencify": {
-                  "version": "0.0.7",
-                  "from": "sequencify@>=0.0.7 <0.1.0",
-                  "resolved": "https://registry.npmjs.org/sequencify/-/sequencify-0.0.7.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"
-                }
-              }
-            },
-            "pretty-hrtime": {
-              "version": "1.0.0",
-              "from": "pretty-hrtime@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.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"
-            },
-            "tildify": {
-              "version": "1.1.0",
-              "from": "tildify@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/tildify/-/tildify-1.1.0.tgz",
-              "dependencies": {
-                "os-homedir": {
-                  "version": "1.0.0",
-                  "from": "os-homedir@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.0.tgz"
-                }
-              }
-            },
-            "v8flags": {
-              "version": "2.0.9",
-              "from": "v8flags@>=2.0.2 <3.0.0",
-              "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.0.9.tgz",
-              "dependencies": {
-                "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"
-                }
-              }
-            },
-            "vinyl-fs": {
-              "version": "0.3.13",
-              "from": "vinyl-fs@>=0.3.0 <0.4.0",
-              "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-0.3.13.tgz",
-              "dependencies": {
-                "defaults": {
-                  "version": "1.0.2",
-                  "from": "defaults@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.2.tgz",
-                  "dependencies": {
-                    "clone": {
-                      "version": "0.1.19",
-                      "from": "clone@>=0.1.5 <0.2.0",
-                      "resolved": "https://registry.npmjs.org/clone/-/clone-0.1.19.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",
-                  "dependencies": {
-                    "glob": {
-                      "version": "4.5.3",
-                      "from": "glob@>=4.3.1 <5.0.0",
-                      "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
-                      "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",
-                          "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"
-                            }
-                          }
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "inherits@>=2.0.0 <3.0.0",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        },
-                        "once": {
-                          "version": "1.3.2",
-                          "from": "once@>=1.3.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                          "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"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "minimatch": {
-                      "version": "2.0.8",
-                      "from": "minimatch@>=2.0.1 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.8.tgz",
-                      "dependencies": {
-                        "brace-expansion": {
-                          "version": "1.1.0",
-                          "from": "brace-expansion@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.0.tgz",
-                          "dependencies": {
-                            "balanced-match": {
-                              "version": "0.2.0",
-                              "from": "balanced-match@>=0.2.0 <0.3.0",
-                              "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.2.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"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "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"
-                    },
-                    "glob2base": {
-                      "version": "0.0.12",
-                      "from": "glob2base@>=0.0.12 <0.0.13",
-                      "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz",
-                      "dependencies": {
-                        "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"
-                        }
-                      }
-                    },
-                    "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"
-                    }
-                  }
-                },
-                "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",
-                  "dependencies": {
-                    "gaze": {
-                      "version": "0.5.1",
-                      "from": "gaze@>=0.5.1 <0.6.0",
-                      "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.1.tgz",
-                      "dependencies": {
-                        "globule": {
-                          "version": "0.1.0",
-                          "from": "globule@>=0.1.0 <0.2.0",
-                          "resolved": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
-                          "dependencies": {
-                            "lodash": {
-                              "version": "1.0.2",
-                              "from": "lodash@>=1.0.1 <1.1.0",
-                              "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz"
-                            },
-                            "glob": {
-                              "version": "3.1.21",
-                              "from": "glob@>=3.1.21 <3.2.0",
-                              "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-                              "dependencies": {
-                                "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"
-                                },
-                                "inherits": {
-                                  "version": "1.0.0",
-                                  "from": "inherits@>=1.0.0 <2.0.0",
-                                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.0.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",
-                              "dependencies": {
-                                "lru-cache": {
-                                  "version": "2.6.5",
-                                  "from": "lru-cache@>=2.0.0 <3.0.0",
-                                  "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.5.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"
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.8",
-                  "from": "graceful-fs@>=3.0.0 <4.0.0",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.8.tgz"
-                },
-                "mkdirp": {
-                  "version": "0.5.1",
-                  "from": "mkdirp@>=0.5.0 <0.6.0",
-                  "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-                  "dependencies": {
-                    "minimist": {
-                      "version": "0.0.8",
-                      "from": "minimist@0.0.8",
-                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.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",
-                  "dependencies": {
-                    "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"
-                    },
-                    "is-utf8": {
-                      "version": "0.2.0",
-                      "from": "is-utf8@>=0.2.0 <0.3.0",
-                      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.0.tgz"
-                    }
-                  }
-                },
-                "through2": {
-                  "version": "0.6.5",
-                  "from": "through2@>=0.6.1 <0.7.0",
-                  "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.0.33",
-                      "from": "readable-stream@>=1.0.33-1 <1.1.0-0",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "core-util-is@>=1.0.0 <1.1.0",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "isarray@0.0.1",
-                          "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"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "inherits@>=2.0.1 <2.1.0",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        }
-                      }
-                    },
-                    "xtend": {
-                      "version": "4.0.0",
-                      "from": "xtend@>=4.0.0 <4.1.0-0",
-                      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.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",
-                  "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"
-                    },
-                    "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"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "gulp-util": {
-          "version": "3.0.6",
-          "from": "gulp-util@>=3.0.4 <4.0.0",
-          "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.6.tgz",
-          "dependencies": {
-            "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"
-            },
-            "array-uniq": {
-              "version": "1.0.2",
-              "from": "array-uniq@>=1.0.2 <2.0.0",
-              "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.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"
-            },
-            "chalk": {
-              "version": "1.0.0",
-              "from": "chalk@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "2.0.1",
-                  "from": "ansi-styles@>=2.0.1 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "escape-string-regexp@>=1.0.2 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "1.0.3",
-                  "from": "has-ansi@>=1.0.3 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "ansi-regex@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.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"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "2.0.1",
-                  "from": "strip-ansi@>=2.0.1 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-2.0.1.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "1.1.1",
-                      "from": "ansi-regex@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                    }
-                  }
-                },
-                "supports-color": {
-                  "version": "1.3.1",
-                  "from": "supports-color@>=1.3.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                }
-              }
-            },
-            "dateformat": {
-              "version": "1.0.11",
-              "from": "dateformat@>=1.0.11 <2.0.0",
-              "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.11.tgz",
-              "dependencies": {
-                "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"
-                },
-                "meow": {
-                  "version": "3.3.0",
-                  "from": "meow@*",
-                  "resolved": "https://registry.npmjs.org/meow/-/meow-3.3.0.tgz",
-                  "dependencies": {
-                    "camelcase-keys": {
-                      "version": "1.0.0",
-                      "from": "camelcase-keys@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-1.0.0.tgz",
-                      "dependencies": {
-                        "camelcase": {
-                          "version": "1.1.0",
-                          "from": "camelcase@>=1.0.1 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.1.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"
-                        }
-                      }
-                    },
-                    "indent-string": {
-                      "version": "1.2.1",
-                      "from": "indent-string@>=1.1.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-1.2.1.tgz",
-                      "dependencies": {
-                        "repeating": {
-                          "version": "1.1.3",
-                          "from": "repeating@>=1.1.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/repeating/-/repeating-1.1.3.tgz",
-                          "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",
-                              "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"
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "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"
-            },
-            "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"
-            },
-            "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"
-            },
-            "lodash.template": {
-              "version": "3.6.2",
-              "from": "lodash.template@>=3.0.0 <4.0.0",
-              "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz",
-              "dependencies": {
-                "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"
-                },
-                "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"
-                },
-                "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"
-                },
-                "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"
-                },
-                "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"
-                },
-                "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",
-                  "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"
-                    },
-                    "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"
-                    },
-                    "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"
-                    }
-                  }
-                },
-                "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"
-                },
-                "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"
-                }
-              }
-            },
-            "multipipe": {
-              "version": "0.1.2",
-              "from": "multipipe@>=0.1.2 <0.2.0",
-              "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-              "dependencies": {
-                "duplexer2": {
-                  "version": "0.0.2",
-                  "from": "duplexer2@0.0.2",
-                  "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-                  "dependencies": {
-                    "readable-stream": {
-                      "version": "1.1.13",
-                      "from": "readable-stream@>=1.1.9 <1.2.0",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "core-util-is@>=1.0.0 <1.1.0",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "isarray@0.0.1",
-                          "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"
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "inherits@>=2.0.1 <2.1.0",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.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"
-            },
-            "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"
-            },
-            "through2": {
-              "version": "2.0.0",
-              "from": "through2@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.0.tgz",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "2.0.1",
-                  "from": "readable-stream@>=2.0.0 <2.1.0",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "core-util-is@>=1.0.0 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.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"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "isarray@0.0.1",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                    },
-                    "process-nextick-args": {
-                      "version": "1.0.1",
-                      "from": "process-nextick-args@>=1.0.0 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.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"
-                    },
-                    "util-deprecate": {
-                      "version": "1.0.1",
-                      "from": "util-deprecate@>=1.0.1 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz"
-                    }
-                  }
-                },
-                "xtend": {
-                  "version": "4.0.0",
-                  "from": "xtend@>=4.0.0 <4.1.0",
-                  "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.0.tgz"
-                }
-              }
-            },
-            "vinyl": {
-              "version": "0.5.0",
-              "from": "vinyl@>=0.5.0 <0.6.0",
-              "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.0.tgz",
-              "dependencies": {
-                "clone": {
-                  "version": "1.0.2",
-                  "from": "clone@>=1.0.0 <2.0.0",
-                  "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"
-                }
-              }
-            }
-          }
-        },
-        "gulp-typescript": {
-          "version": "2.7.8",
-          "from": "gulp-typescript@>=2.7.6 <3.0.0",
-          "resolved": "https://registry.npmjs.org/gulp-typescript/-/gulp-typescript-2.7.8.tgz",
-          "dependencies": {
-            "through2": {
-              "version": "0.6.5",
-              "from": "through2@>=0.6.3 <0.7.0",
-              "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-              "dependencies": {
-                "readable-stream": {
-                  "version": "1.0.33",
-                  "from": "readable-stream@>=1.0.33-1 <1.1.0-0",
-                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "core-util-is@>=1.0.0 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "isarray@0.0.1",
-                      "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"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "inherits@>=2.0.1 <2.1.0",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                },
-                "xtend": {
-                  "version": "4.0.0",
-                  "from": "xtend@>=4.0.0 <4.1.0-0",
-                  "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.0.tgz"
-                }
-              }
-            },
-            "typescript": {
-              "version": "1.4.1",
-              "from": "typescript@1.4.1",
-              "resolved": "https://registry.npmjs.org/typescript/-/typescript-1.4.1.tgz"
-            },
-            "vinyl-fs": {
-              "version": "1.0.0",
-              "from": "vinyl-fs@>=1.0.0 <1.1.0",
-              "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-1.0.0.tgz",
-              "dependencies": {
-                "duplexify": {
-                  "version": "3.4.2",
-                  "from": "duplexify@>=3.2.0 <4.0.0",
-                  "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.4.2.tgz",
-                  "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",
-                      "dependencies": {
-                        "once": {
-                          "version": "1.3.2",
-                          "from": "once@>=1.3.0 <1.4.0",
-                          "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                          "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"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "readable-stream": {
-                      "version": "2.0.1",
-                      "from": "readable-stream@>=2.0.0 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                      "dependencies": {
-                        "core-util-is": {
-                          "version": "1.0.1",
-                          "from": "core-util-is@>=1.0.0 <1.1.0",
-                          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.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"
-                        },
-                        "isarray": {
-                          "version": "0.0.1",
-                          "from": "isarray@0.0.1",
-                          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                        },
-                        "process-nextick-args": {
-                          "version": "1.0.1",
-                          "from": "process-nextick-args@>=1.0.0 <1.1.0",
-                          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.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"
-                        },
-                        "util-deprecate": {
-                          "version": "1.0.1",
-                          "from": "util-deprecate@>=1.0.1 <1.1.0",
-                          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                },
-                "glob-stream": {
-                  "version": "4.1.1",
-                  "from": "glob-stream@>=4.0.1 <5.0.0",
-                  "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-4.1.1.tgz",
-                  "dependencies": {
-                    "glob": {
-                      "version": "4.5.3",
-                      "from": "glob@>=4.3.1 <5.0.0",
-                      "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
-                      "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",
-                          "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"
-                            }
-                          }
-                        },
-                        "inherits": {
-                          "version": "2.0.1",
-                          "from": "inherits@>=2.0.0 <3.0.0",
-                          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                        },
-                        "once": {
-                          "version": "1.3.2",
-                          "from": "once@>=1.3.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                          "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"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "minimatch": {
-                      "version": "2.0.8",
-                      "from": "minimatch@>=2.0.1 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.8.tgz",
-                      "dependencies": {
-                        "brace-expansion": {
-                          "version": "1.1.0",
-                          "from": "brace-expansion@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.0.tgz",
-                          "dependencies": {
-                            "balanced-match": {
-                              "version": "0.2.0",
-                              "from": "balanced-match@>=0.2.0 <0.3.0",
-                              "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.2.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"
-                            }
-                          }
-                        }
-                      }
-                    },
-                    "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"
-                    },
-                    "glob2base": {
-                      "version": "0.0.12",
-                      "from": "glob2base@>=0.0.12 <0.0.13",
-                      "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz",
-                      "dependencies": {
-                        "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"
-                        }
-                      }
-                    },
-                    "unique-stream": {
-                      "version": "2.2.0",
-                      "from": "unique-stream@>=2.0.2 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-2.2.0.tgz",
-                      "dependencies": {
-                        "through2-filter": {
-                          "version": "2.0.0",
-                          "from": "through2-filter@>=2.0.0 <3.0.0",
-                          "resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-2.0.0.tgz",
-                          "dependencies": {
-                            "through2": {
-                              "version": "2.0.0",
-                              "from": "through2@>=2.0.0 <2.1.0",
-                              "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.0.tgz",
-                              "dependencies": {
-                                "readable-stream": {
-                                  "version": "2.0.1",
-                                  "from": "readable-stream@>=2.0.0 <2.1.0",
-                                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                                  "dependencies": {
-                                    "core-util-is": {
-                                      "version": "1.0.1",
-                                      "from": "core-util-is@>=1.0.0 <1.1.0",
-                                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.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"
-                                    },
-                                    "isarray": {
-                                      "version": "0.0.1",
-                                      "from": "isarray@0.0.1",
-                                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                                    },
-                                    "process-nextick-args": {
-                                      "version": "1.0.1",
-                                      "from": "process-nextick-args@>=1.0.0 <1.1.0",
-                                      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.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"
-                                    },
-                                    "util-deprecate": {
-                                      "version": "1.0.1",
-                                      "from": "util-deprecate@>=1.0.1 <1.1.0",
-                                      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz"
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            "xtend": {
-                              "version": "4.0.0",
-                              "from": "xtend@>=4.0.0 <4.1.0",
-                              "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.0.tgz"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "glob-watcher": {
-                  "version": "0.0.8",
-                  "from": "glob-watcher@>=0.0.8 <0.0.9",
-                  "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-0.0.8.tgz",
-                  "dependencies": {
-                    "gaze": {
-                      "version": "0.5.1",
-                      "from": "gaze@>=0.5.1 <0.6.0",
-                      "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.1.tgz",
-                      "dependencies": {
-                        "globule": {
-                          "version": "0.1.0",
-                          "from": "globule@>=0.1.0 <0.2.0",
-                          "resolved": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
-                          "dependencies": {
-                            "lodash": {
-                              "version": "1.0.2",
-                              "from": "lodash@>=1.0.1 <1.1.0",
-                              "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz"
-                            },
-                            "glob": {
-                              "version": "3.1.21",
-                              "from": "glob@>=3.1.21 <3.2.0",
-                              "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-                              "dependencies": {
-                                "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"
-                                },
-                                "inherits": {
-                                  "version": "1.0.0",
-                                  "from": "inherits@>=1.0.0 <2.0.0",
-                                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.0.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",
-                              "dependencies": {
-                                "lru-cache": {
-                                  "version": "2.6.5",
-                                  "from": "lru-cache@>=2.0.0 <3.0.0",
-                                  "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.5.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"
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "graceful-fs": {
-                  "version": "3.0.8",
-                  "from": "graceful-fs@>=3.0.0 <4.0.0",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.8.tgz"
-                },
-                "merge-stream": {
-                  "version": "0.1.8",
-                  "from": "merge-stream@>=0.1.7 <0.2.0",
-                  "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-0.1.8.tgz"
-                },
-                "mkdirp": {
-                  "version": "0.5.1",
-                  "from": "mkdirp@>=0.5.0 <0.6.0",
-                  "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-                  "dependencies": {
-                    "minimist": {
-                      "version": "0.0.8",
-                      "from": "minimist@0.0.8",
-                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.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"
-                },
-                "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",
-                  "dependencies": {
-                    "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"
-                    },
-                    "is-utf8": {
-                      "version": "0.2.0",
-                      "from": "is-utf8@>=0.2.0 <0.3.0",
-                      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.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",
-                  "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"
-                    },
-                    "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"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "tsd": {
-          "version": "0.6.3",
-          "from": "tsd@>=0.6.0 <0.7.0",
-          "resolved": "https://registry.npmjs.org/tsd/-/tsd-0.6.3.tgz",
-          "dependencies": {
-            "assertion-error": {
-              "version": "1.0.0",
-              "from": "assertion-error@1.0.0",
-              "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.0.0.tgz"
-            },
-            "bl": {
-              "version": "0.9.4",
-              "from": "bl@>=0.9.3 <0.10.0",
-              "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-              "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",
-                  "dependencies": {
-                    "core-util-is": {
-                      "version": "1.0.1",
-                      "from": "core-util-is@>=1.0.0 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                    },
-                    "isarray": {
-                      "version": "0.0.1",
-                      "from": "isarray@0.0.1",
-                      "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"
-                    },
-                    "inherits": {
-                      "version": "2.0.1",
-                      "from": "inherits@>=2.0.1 <2.1.0",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                    }
-                  }
-                }
-              }
-            },
-            "bluebird": {
-              "version": "1.2.4",
-              "from": "bluebird@>=1.2.4 <1.3.0",
-              "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-1.2.4.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"
-            },
-            "deep-freeze": {
-              "version": "0.0.1",
-              "from": "deep-freeze@0.0.1",
-              "resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz"
-            },
-            "definition-header": {
-              "version": "0.1.0",
-              "from": "definition-header@>=0.1.0 <0.2.0",
-              "resolved": "https://registry.npmjs.org/definition-header/-/definition-header-0.1.0.tgz",
-              "dependencies": {
-                "parsimmon": {
-                  "version": "0.5.1",
-                  "from": "parsimmon@>=0.5.0 <0.6.0",
-                  "resolved": "https://registry.npmjs.org/parsimmon/-/parsimmon-0.5.1.tgz",
-                  "dependencies": {
-                    "pjs": {
-                      "version": "5.1.1",
-                      "from": "pjs@>=5.0.0 <6.0.0",
-                      "resolved": "https://registry.npmjs.org/pjs/-/pjs-5.1.1.tgz"
-                    }
-                  }
-                },
-                "xregexp": {
-                  "version": "2.0.0",
-                  "from": "xregexp@>=2.0.0 <2.1.0",
-                  "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-2.0.0.tgz"
-                }
-              }
-            },
-            "detect-indent": {
-              "version": "0.2.0",
-              "from": "detect-indent@>=0.2.0 <0.3.0",
-              "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-0.2.0.tgz",
-              "dependencies": {
-                "get-stdin": {
-                  "version": "0.1.0",
-                  "from": "get-stdin@>=0.1.0 <0.2.0",
-                  "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-0.1.0.tgz"
-                },
-                "minimist": {
-                  "version": "0.1.0",
-                  "from": "minimist@>=0.1.0 <0.2.0",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.1.0.tgz"
-                }
-              }
-            },
-            "diff": {
-              "version": "1.4.0",
-              "from": "diff@>=1.4.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/diff/-/diff-1.4.0.tgz"
-            },
-            "event-stream": {
-              "version": "3.1.7",
-              "from": "event-stream@>=3.1.5 <3.2.0",
-              "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.1.7.tgz",
-              "dependencies": {
-                "through": {
-                  "version": "2.3.7",
-                  "from": "through@>=2.3.1 <2.4.0",
-                  "resolved": "https://registry.npmjs.org/through/-/through-2.3.7.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"
-                },
-                "from": {
-                  "version": "0.1.3",
-                  "from": "from@>=0.0.0 <1.0.0",
-                  "resolved": "https://registry.npmjs.org/from/-/from-0.1.3.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"
-                },
-                "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"
-                },
-                "split": {
-                  "version": "0.2.10",
-                  "from": "split@>=0.2.0 <0.3.0",
-                  "resolved": "https://registry.npmjs.org/split/-/split-0.2.10.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"
-                }
-              }
-            },
-            "exit": {
-              "version": "0.1.2",
-              "from": "exit@>=0.1.2 <0.2.0",
-              "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.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",
-              "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",
-                  "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"
-                    }
-                  }
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "inherits@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                },
-                "minimatch": {
-                  "version": "2.0.8",
-                  "from": "minimatch@>=2.0.1 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.8.tgz",
-                  "dependencies": {
-                    "brace-expansion": {
-                      "version": "1.1.0",
-                      "from": "brace-expansion@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.0.tgz",
-                      "dependencies": {
-                        "balanced-match": {
-                          "version": "0.2.0",
-                          "from": "balanced-match@>=0.2.0 <0.3.0",
-                          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.2.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"
-                        }
-                      }
-                    }
-                  }
-                },
-                "once": {
-                  "version": "1.3.2",
-                  "from": "once@>=1.3.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                  "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"
-                    }
-                  }
-                }
-              }
-            },
-            "joi": {
-              "version": "4.9.0",
-              "from": "joi@>=4.7.0 <5.0.0",
-              "resolved": "https://registry.npmjs.org/joi/-/joi-4.9.0.tgz",
-              "dependencies": {
-                "hoek": {
-                  "version": "2.14.0",
-                  "from": "hoek@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.14.0.tgz"
-                },
-                "topo": {
-                  "version": "1.0.2",
-                  "from": "topo@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/topo/-/topo-1.0.2.tgz"
-                },
-                "isemail": {
-                  "version": "1.1.1",
-                  "from": "isemail@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/isemail/-/isemail-1.1.1.tgz"
-                },
-                "moment": {
-                  "version": "2.10.3",
-                  "from": "moment@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/moment/-/moment-2.10.3.tgz"
-                }
-              }
-            },
-            "joi-assert": {
-              "version": "0.0.3",
-              "from": "joi-assert@0.0.3",
-              "resolved": "https://registry.npmjs.org/joi-assert/-/joi-assert-0.0.3.tgz"
-            },
-            "jsesc": {
-              "version": "0.5.0",
-              "from": "jsesc@>=0.5.0 <0.6.0",
-              "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz"
-            },
-            "json-pointer": {
-              "version": "0.2.2",
-              "from": "json-pointer@>=0.2.2 <0.3.0",
-              "resolved": "https://registry.npmjs.org/json-pointer/-/json-pointer-0.2.2.tgz",
-              "dependencies": {
-                "foreach": {
-                  "version": "2.0.5",
-                  "from": "foreach@>=2.0.4 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz"
-                }
-              }
-            },
-            "lazy.js": {
-              "version": "0.3.2",
-              "from": "lazy.js@>=0.3.2 <0.4.0",
-              "resolved": "https://registry.npmjs.org/lazy.js/-/lazy.js-0.3.2.tgz"
-            },
-            "lru-cache": {
-              "version": "2.5.2",
-              "from": "lru-cache@>=2.5.0 <2.6.0",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.2.tgz"
-            },
-            "minimatch": {
-              "version": "1.0.0",
-              "from": "minimatch@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-1.0.0.tgz",
-              "dependencies": {
-                "sigmund": {
-                  "version": "1.0.1",
-                  "from": "sigmund@>=1.0.0 <1.1.0",
-                  "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
-                }
-              }
-            },
-            "ministyle": {
-              "version": "0.1.4",
-              "from": "ministyle@>=0.1.3 <0.2.0",
-              "resolved": "https://registry.npmjs.org/ministyle/-/ministyle-0.1.4.tgz"
-            },
-            "minitable": {
-              "version": "0.0.4",
-              "from": "minitable@0.0.4",
-              "resolved": "https://registry.npmjs.org/minitable/-/minitable-0.0.4.tgz",
-              "dependencies": {
-                "minichain": {
-                  "version": "0.0.1",
-                  "from": "minichain@>=0.0.1 <0.1.0",
-                  "resolved": "https://registry.npmjs.org/minichain/-/minichain-0.0.1.tgz"
-                }
-              }
-            },
-            "miniwrite": {
-              "version": "0.1.4",
-              "from": "miniwrite@>=0.1.3 <0.2.0",
-              "resolved": "https://registry.npmjs.org/miniwrite/-/miniwrite-0.1.4.tgz",
-              "dependencies": {
-                "mkdirp": {
-                  "version": "0.3.5",
-                  "from": "mkdirp@>=0.3.5 <0.4.0",
-                  "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz"
-                }
-              }
-            },
-            "mkdirp": {
-              "version": "0.5.1",
-              "from": "mkdirp@>=0.5.0 <0.6.0",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-              "dependencies": {
-                "minimist": {
-                  "version": "0.0.8",
-                  "from": "minimist@0.0.8",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-                }
-              }
-            },
-            "open": {
-              "version": "0.0.5",
-              "from": "open@>=0.0.5 <0.1.0",
-              "resolved": "https://registry.npmjs.org/open/-/open-0.0.5.tgz"
-            },
-            "request": {
-              "version": "2.58.0",
-              "from": "request@>=2.45.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/request/-/request-2.58.0.tgz",
-              "dependencies": {
-                "caseless": {
-                  "version": "0.10.0",
-                  "from": "caseless@>=0.10.0 <0.11.0",
-                  "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.10.0.tgz"
-                },
-                "extend": {
-                  "version": "2.0.1",
-                  "from": "extend@>=2.0.1 <2.1.0",
-                  "resolved": "https://registry.npmjs.org/extend/-/extend-2.0.1.tgz"
-                },
-                "forever-agent": {
-                  "version": "0.6.1",
-                  "from": "forever-agent@>=0.6.0 <0.7.0",
-                  "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz"
-                },
-                "form-data": {
-                  "version": "1.0.0-rc1",
-                  "from": "form-data@>=1.0.0-rc1 <1.1.0",
-                  "resolved": "https://registry.npmjs.org/form-data/-/form-data-1.0.0-rc1.tgz",
-                  "dependencies": {
-                    "async": {
-                      "version": "1.3.0",
-                      "from": "async@>=1.2.1 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/async/-/async-1.3.0.tgz"
-                    },
-                    "mime-types": {
-                      "version": "2.1.2",
-                      "from": "mime-types@>=2.1.1 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.2.tgz",
-                      "dependencies": {
-                        "mime-db": {
-                          "version": "1.14.0",
-                          "from": "mime-db@>=1.14.0 <1.15.0",
-                          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.14.0.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"
-                },
-                "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",
-                  "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"
-                    }
-                  }
-                },
-                "node-uuid": {
-                  "version": "1.4.3",
-                  "from": "node-uuid@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.3.tgz"
-                },
-                "qs": {
-                  "version": "3.1.0",
-                  "from": "qs@>=3.1.0 <3.2.0",
-                  "resolved": "https://registry.npmjs.org/qs/-/qs-3.1.0.tgz"
-                },
-                "tunnel-agent": {
-                  "version": "0.4.0",
-                  "from": "tunnel-agent@>=0.4.0 <0.5.0",
-                  "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz"
-                },
-                "tough-cookie": {
-                  "version": "2.0.0",
-                  "from": "tough-cookie@>=0.12.0",
-                  "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.0.0.tgz"
-                },
-                "http-signature": {
-                  "version": "0.11.0",
-                  "from": "http-signature@>=0.11.0 <0.12.0",
-                  "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.11.0.tgz",
-                  "dependencies": {
-                    "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"
-                    },
-                    "asn1": {
-                      "version": "0.1.11",
-                      "from": "asn1@0.1.11",
-                      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
-                    },
-                    "ctype": {
-                      "version": "0.5.3",
-                      "from": "ctype@0.5.3",
-                      "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
-                    }
-                  }
-                },
-                "oauth-sign": {
-                  "version": "0.8.0",
-                  "from": "oauth-sign@>=0.8.0 <0.9.0",
-                  "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.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",
-                  "dependencies": {
-                    "hoek": {
-                      "version": "2.14.0",
-                      "from": "hoek@>=2.0.0 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.14.0.tgz"
-                    },
-                    "boom": {
-                      "version": "2.8.0",
-                      "from": "boom@>=2.0.0 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/boom/-/boom-2.8.0.tgz"
-                    },
-                    "cryptiles": {
-                      "version": "2.0.4",
-                      "from": "cryptiles@>=2.0.0 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.4.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"
-                    }
-                  }
-                },
-                "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"
-                },
-                "stringstream": {
-                  "version": "0.0.4",
-                  "from": "stringstream@>=0.0.4 <0.1.0",
-                  "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz"
-                },
-                "combined-stream": {
-                  "version": "1.0.5",
-                  "from": "combined-stream@>=1.0.1 <1.1.0",
-                  "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
-                  "dependencies": {
-                    "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"
-                    }
-                  }
-                },
-                "isstream": {
-                  "version": "0.1.2",
-                  "from": "isstream@>=0.1.1 <0.2.0",
-                  "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
-                },
-                "har-validator": {
-                  "version": "1.8.0",
-                  "from": "har-validator@>=1.6.1 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-1.8.0.tgz",
-                  "dependencies": {
-                    "bluebird": {
-                      "version": "2.9.30",
-                      "from": "bluebird@>=2.9.30 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.9.30.tgz"
-                    },
-                    "chalk": {
-                      "version": "1.1.0",
-                      "from": "chalk@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.0.tgz",
-                      "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"
-                        },
-                        "escape-string-regexp": {
-                          "version": "1.0.3",
-                          "from": "escape-string-regexp@>=1.0.2 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.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",
-                          "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"
-                            }
-                          }
-                        },
-                        "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",
-                          "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"
-                            }
-                          }
-                        },
-                        "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"
-                        }
-                      }
-                    },
-                    "commander": {
-                      "version": "2.8.1",
-                      "from": "commander@>=2.8.1 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-                      "dependencies": {
-                        "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"
-                        }
-                      }
-                    },
-                    "is-my-json-valid": {
-                      "version": "2.12.0",
-                      "from": "is-my-json-valid@>=2.12.0 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.12.0.tgz",
-                      "dependencies": {
-                        "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"
-                        },
-                        "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",
-                          "dependencies": {
-                            "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"
-                            }
-                          }
-                        },
-                        "jsonpointer": {
-                          "version": "1.1.0",
-                          "from": "jsonpointer@>=1.1.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-1.1.0.tgz"
-                        },
-                        "xtend": {
-                          "version": "4.0.0",
-                          "from": "xtend@>=4.0.0 <5.0.0",
-                          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.0.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "rimraf": {
-              "version": "2.2.8",
-              "from": "rimraf@>=2.2.8 <2.3.0",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-            },
-            "semver": {
-              "version": "4.3.6",
-              "from": "semver@>=4.3.1 <5.0.0",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz"
-            },
-            "type-detect": {
-              "version": "0.1.2",
-              "from": "type-detect@>=0.1.2 <0.2.0",
-              "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-0.1.2.tgz"
-            },
-            "universal-analytics": {
-              "version": "0.3.8",
-              "from": "universal-analytics@>=0.3.4 <0.4.0",
-              "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.3.8.tgz",
-              "dependencies": {
-                "underscore": {
-                  "version": "1.8.3",
-                  "from": "underscore@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz"
-                },
-                "node-uuid": {
-                  "version": "1.4.3",
-                  "from": "node-uuid@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.3.tgz"
-                },
-                "async": {
-                  "version": "0.2.10",
-                  "from": "async@>=0.2.0 <0.3.0",
-                  "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-                }
-              }
-            },
-            "update-notifier": {
-              "version": "0.2.2",
-              "from": "update-notifier@>=0.2.2 <0.3.0",
-              "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-0.2.2.tgz",
-              "dependencies": {
-                "chalk": {
-                  "version": "0.5.1",
-                  "from": "chalk@>=0.5.1 <0.6.0",
-                  "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-                  "dependencies": {
-                    "ansi-styles": {
-                      "version": "1.1.0",
-                      "from": "ansi-styles@>=1.1.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz"
-                    },
-                    "escape-string-regexp": {
-                      "version": "1.0.3",
-                      "from": "escape-string-regexp@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                    },
-                    "has-ansi": {
-                      "version": "0.1.0",
-                      "from": "has-ansi@>=0.1.0 <0.2.0",
-                      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                      "dependencies": {
-                        "ansi-regex": {
-                          "version": "0.2.1",
-                          "from": "ansi-regex@>=0.2.1 <0.3.0",
-                          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                        }
-                      }
-                    },
-                    "strip-ansi": {
-                      "version": "0.3.0",
-                      "from": "strip-ansi@>=0.3.0 <0.4.0",
-                      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                      "dependencies": {
-                        "ansi-regex": {
-                          "version": "0.2.1",
-                          "from": "ansi-regex@>=0.2.1 <0.3.0",
-                          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.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"
-                    }
-                  }
-                },
-                "configstore": {
-                  "version": "0.3.2",
-                  "from": "configstore@>=0.3.1 <0.4.0",
-                  "resolved": "https://registry.npmjs.org/configstore/-/configstore-0.3.2.tgz",
-                  "dependencies": {
-                    "graceful-fs": {
-                      "version": "3.0.8",
-                      "from": "graceful-fs@>=3.0.1 <4.0.0",
-                      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.8.tgz"
-                    },
-                    "js-yaml": {
-                      "version": "3.3.1",
-                      "from": "js-yaml@>=3.1.0 <4.0.0",
-                      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.3.1.tgz",
-                      "dependencies": {
-                        "argparse": {
-                          "version": "1.0.2",
-                          "from": "argparse@>=1.0.2 <1.1.0",
-                          "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.2.tgz",
-                          "dependencies": {
-                            "lodash": {
-                              "version": "3.10.0",
-                              "from": "lodash@>=3.2.0 <4.0.0",
-                              "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.0.tgz"
-                            },
-                            "sprintf-js": {
-                              "version": "1.0.2",
-                              "from": "sprintf-js@>=1.0.2 <1.1.0",
-                              "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.2.tgz"
-                            }
-                          }
-                        },
-                        "esprima": {
-                          "version": "2.2.0",
-                          "from": "esprima@>=2.2.0 <2.3.0",
-                          "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.2.0.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"
-                    },
-                    "osenv": {
-                      "version": "0.1.3",
-                      "from": "osenv@>=0.1.0 <0.2.0",
-                      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.3.tgz",
-                      "dependencies": {
-                        "os-homedir": {
-                          "version": "1.0.0",
-                          "from": "os-homedir@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.0.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"
-                        }
-                      }
-                    },
-                    "user-home": {
-                      "version": "1.1.1",
-                      "from": "user-home@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.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"
-                    }
-                  }
-                },
-                "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"
-                },
-                "latest-version": {
-                  "version": "1.0.1",
-                  "from": "latest-version@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-1.0.1.tgz",
-                  "dependencies": {
-                    "package-json": {
-                      "version": "1.2.0",
-                      "from": "package-json@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/package-json/-/package-json-1.2.0.tgz",
-                      "dependencies": {
-                        "got": {
-                          "version": "3.3.0",
-                          "from": "got@>=3.2.0 <4.0.0",
-                          "resolved": "https://registry.npmjs.org/got/-/got-3.3.0.tgz",
-                          "dependencies": {
-                            "duplexify": {
-                              "version": "3.4.2",
-                              "from": "duplexify@>=3.2.0 <4.0.0",
-                              "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.4.2.tgz",
-                              "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",
-                                  "dependencies": {
-                                    "once": {
-                                      "version": "1.3.2",
-                                      "from": "once@>=1.3.0 <1.4.0",
-                                      "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                                      "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"
-                                        }
-                                      }
-                                    }
-                                  }
-                                },
-                                "readable-stream": {
-                                  "version": "2.0.1",
-                                  "from": "readable-stream@>=2.0.0 <3.0.0",
-                                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                                  "dependencies": {
-                                    "core-util-is": {
-                                      "version": "1.0.1",
-                                      "from": "core-util-is@>=1.0.0 <1.1.0",
-                                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.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"
-                                    },
-                                    "isarray": {
-                                      "version": "0.0.1",
-                                      "from": "isarray@0.0.1",
-                                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                                    },
-                                    "process-nextick-args": {
-                                      "version": "1.0.1",
-                                      "from": "process-nextick-args@>=1.0.0 <1.1.0",
-                                      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.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"
-                                    },
-                                    "util-deprecate": {
-                                      "version": "1.0.1",
-                                      "from": "util-deprecate@>=1.0.1 <1.1.0",
-                                      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz"
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            "infinity-agent": {
-                              "version": "2.0.3",
-                              "from": "infinity-agent@>=2.0.0 <3.0.0",
-                              "resolved": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.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"
-                            },
-                            "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"
-                            },
-                            "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"
-                            },
-                            "nested-error-stacks": {
-                              "version": "1.0.0",
-                              "from": "nested-error-stacks@>=1.0.0 <2.0.0",
-                              "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-1.0.0.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"
-                            },
-                            "prepend-http": {
-                              "version": "1.0.1",
-                              "from": "prepend-http@>=1.0.0 <2.0.0",
-                              "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.1.tgz"
-                            },
-                            "read-all-stream": {
-                              "version": "2.2.0",
-                              "from": "read-all-stream@>=2.0.0 <3.0.0",
-                              "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-2.2.0.tgz",
-                              "dependencies": {
-                                "readable-stream": {
-                                  "version": "2.0.1",
-                                  "from": "readable-stream@>=2.0.0 <3.0.0",
-                                  "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                                  "dependencies": {
-                                    "core-util-is": {
-                                      "version": "1.0.1",
-                                      "from": "core-util-is@>=1.0.0 <1.1.0",
-                                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.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"
-                                    },
-                                    "isarray": {
-                                      "version": "0.0.1",
-                                      "from": "isarray@0.0.1",
-                                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                                    },
-                                    "process-nextick-args": {
-                                      "version": "1.0.1",
-                                      "from": "process-nextick-args@>=1.0.0 <1.1.0",
-                                      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.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"
-                                    },
-                                    "util-deprecate": {
-                                      "version": "1.0.1",
-                                      "from": "util-deprecate@>=1.0.1 <1.1.0",
-                                      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz"
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            "statuses": {
-                              "version": "1.2.1",
-                              "from": "statuses@>=1.2.1 <2.0.0",
-                              "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz"
-                            },
-                            "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"
-                            }
-                          }
-                        },
-                        "registry-url": {
-                          "version": "3.0.3",
-                          "from": "registry-url@>=3.0.0 <4.0.0",
-                          "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.0.3.tgz",
-                          "dependencies": {
-                            "rc": {
-                              "version": "1.0.3",
-                              "from": "rc@>=1.0.1 <2.0.0",
-                              "resolved": "https://registry.npmjs.org/rc/-/rc-1.0.3.tgz",
-                              "dependencies": {
-                                "minimist": {
-                                  "version": "0.0.10",
-                                  "from": "minimist@>=0.0.7 <0.1.0",
-                                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
-                                },
-                                "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"
-                                },
-                                "strip-json-comments": {
-                                  "version": "0.1.3",
-                                  "from": "strip-json-comments@>=0.1.0 <0.2.0",
-                                  "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-0.1.3.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"
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                },
-                "semver-diff": {
-                  "version": "2.0.0",
-                  "from": "semver-diff@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.0.0.tgz"
-                },
-                "string-length": {
-                  "version": "1.0.0",
-                  "from": "string-length@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.0.tgz",
-                  "dependencies": {
-                    "strip-ansi": {
-                      "version": "2.0.1",
-                      "from": "strip-ansi@>=2.0.0 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-2.0.1.tgz",
-                      "dependencies": {
-                        "ansi-regex": {
-                          "version": "1.1.1",
-                          "from": "ansi-regex@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz"
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "uri-templates": {
-              "version": "0.1.7",
-              "from": "uri-templates@>=0.1.5 <0.2.0",
-              "resolved": "https://registry.npmjs.org/uri-templates/-/uri-templates-0.1.7.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"
-            },
-            "verror": {
-              "version": "1.4.0",
-              "from": "verror@>=1.4.0 <1.5.0",
-              "resolved": "https://registry.npmjs.org/verror/-/verror-1.4.0.tgz",
-              "dependencies": {
-                "extsprintf": {
-                  "version": "1.0.3",
-                  "from": "extsprintf@1.0.3",
-                  "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.3.tgz"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "tsd": {
-      "version": "0.6.3",
-      "from": "tsd@0.6.3",
-      "resolved": "https://registry.npmjs.org/tsd/-/tsd-0.6.3.tgz",
-      "dependencies": {
-        "assertion-error": {
-          "version": "1.0.0",
-          "from": "assertion-error@1.0.0",
-          "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.0.0.tgz"
-        },
-        "bl": {
-          "version": "0.9.4",
-          "from": "bl@>=0.9.3 <0.10.0",
-          "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-          "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",
-              "dependencies": {
-                "core-util-is": {
-                  "version": "1.0.1",
-                  "from": "core-util-is@>=1.0.0 <1.1.0",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                },
-                "isarray": {
-                  "version": "0.0.1",
-                  "from": "isarray@0.0.1",
-                  "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"
-                },
-                "inherits": {
-                  "version": "2.0.1",
-                  "from": "inherits@>=2.0.1 <2.1.0",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                }
-              }
-            }
-          }
-        },
-        "bluebird": {
-          "version": "1.2.4",
-          "from": "bluebird@>=1.2.4 <1.3.0",
-          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-1.2.4.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"
-        },
-        "deep-freeze": {
-          "version": "0.0.1",
-          "from": "deep-freeze@0.0.1",
-          "resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz"
-        },
-        "definition-header": {
-          "version": "0.1.0",
-          "from": "definition-header@>=0.1.0 <0.2.0",
-          "resolved": "https://registry.npmjs.org/definition-header/-/definition-header-0.1.0.tgz",
-          "dependencies": {
-            "parsimmon": {
-              "version": "0.5.1",
-              "from": "parsimmon@>=0.5.0 <0.6.0",
-              "resolved": "https://registry.npmjs.org/parsimmon/-/parsimmon-0.5.1.tgz",
-              "dependencies": {
-                "pjs": {
-                  "version": "5.1.1",
-                  "from": "pjs@>=5.0.0 <6.0.0",
-                  "resolved": "https://registry.npmjs.org/pjs/-/pjs-5.1.1.tgz"
-                }
-              }
-            },
-            "xregexp": {
-              "version": "2.0.0",
-              "from": "xregexp@>=2.0.0 <2.1.0",
-              "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-2.0.0.tgz"
-            }
-          }
-        },
-        "detect-indent": {
-          "version": "0.2.0",
-          "from": "detect-indent@>=0.2.0 <0.3.0",
-          "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-0.2.0.tgz",
-          "dependencies": {
-            "get-stdin": {
-              "version": "0.1.0",
-              "from": "get-stdin@>=0.1.0 <0.2.0",
-              "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-0.1.0.tgz"
-            },
-            "minimist": {
-              "version": "0.1.0",
-              "from": "minimist@>=0.1.0 <0.2.0",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.1.0.tgz"
-            }
-          }
-        },
-        "diff": {
-          "version": "1.4.0",
-          "from": "diff@>=1.4.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-1.4.0.tgz"
-        },
-        "event-stream": {
-          "version": "3.1.7",
-          "from": "event-stream@>=3.1.5 <3.2.0",
-          "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.1.7.tgz",
-          "dependencies": {
-            "through": {
-              "version": "2.3.7",
-              "from": "through@>=2.3.1 <2.4.0",
-              "resolved": "https://registry.npmjs.org/through/-/through-2.3.7.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"
-            },
-            "from": {
-              "version": "0.1.3",
-              "from": "from@>=0.0.0 <1.0.0",
-              "resolved": "https://registry.npmjs.org/from/-/from-0.1.3.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"
-            },
-            "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"
-            },
-            "split": {
-              "version": "0.2.10",
-              "from": "split@>=0.2.0 <0.3.0",
-              "resolved": "https://registry.npmjs.org/split/-/split-0.2.10.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"
-            }
-          }
-        },
-        "exit": {
-          "version": "0.1.2",
-          "from": "exit@>=0.1.2 <0.2.0",
-          "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
-        },
-        "joi": {
-          "version": "4.9.0",
-          "from": "joi@>=4.7.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/joi/-/joi-4.9.0.tgz",
-          "dependencies": {
-            "hoek": {
-              "version": "2.14.0",
-              "from": "hoek@>=2.2.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.14.0.tgz"
-            },
-            "topo": {
-              "version": "1.0.2",
-              "from": "topo@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/topo/-/topo-1.0.2.tgz"
-            },
-            "isemail": {
-              "version": "1.1.1",
-              "from": "isemail@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/isemail/-/isemail-1.1.1.tgz"
-            },
-            "moment": {
-              "version": "2.10.3",
-              "from": "moment@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/moment/-/moment-2.10.3.tgz"
-            }
-          }
-        },
-        "joi-assert": {
-          "version": "0.0.3",
-          "from": "joi-assert@0.0.3",
-          "resolved": "https://registry.npmjs.org/joi-assert/-/joi-assert-0.0.3.tgz"
-        },
-        "jsesc": {
-          "version": "0.5.0",
-          "from": "jsesc@>=0.5.0 <0.6.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz"
-        },
-        "json-pointer": {
-          "version": "0.2.2",
-          "from": "json-pointer@>=0.2.2 <0.3.0",
-          "resolved": "https://registry.npmjs.org/json-pointer/-/json-pointer-0.2.2.tgz",
-          "dependencies": {
-            "foreach": {
-              "version": "2.0.5",
-              "from": "foreach@>=2.0.4 <3.0.0",
-              "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz"
-            }
-          }
-        },
-        "lazy.js": {
-          "version": "0.3.2",
-          "from": "lazy.js@>=0.3.2 <0.4.0",
-          "resolved": "https://registry.npmjs.org/lazy.js/-/lazy.js-0.3.2.tgz"
-        },
-        "lru-cache": {
-          "version": "2.5.2",
-          "from": "lru-cache@>=2.5.0 <2.6.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.2.tgz"
-        },
-        "minimatch": {
-          "version": "1.0.0",
-          "from": "minimatch@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-1.0.0.tgz",
-          "dependencies": {
-            "sigmund": {
-              "version": "1.0.1",
-              "from": "sigmund@>=1.0.0 <1.1.0",
-              "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
-            }
-          }
-        },
-        "ministyle": {
-          "version": "0.1.4",
-          "from": "ministyle@>=0.1.3 <0.2.0",
-          "resolved": "https://registry.npmjs.org/ministyle/-/ministyle-0.1.4.tgz"
-        },
-        "minitable": {
-          "version": "0.0.4",
-          "from": "minitable@0.0.4",
-          "resolved": "https://registry.npmjs.org/minitable/-/minitable-0.0.4.tgz",
-          "dependencies": {
-            "minichain": {
-              "version": "0.0.1",
-              "from": "minichain@>=0.0.1 <0.1.0",
-              "resolved": "https://registry.npmjs.org/minichain/-/minichain-0.0.1.tgz"
-            }
-          }
-        },
-        "miniwrite": {
-          "version": "0.1.4",
-          "from": "miniwrite@>=0.1.3 <0.2.0",
-          "resolved": "https://registry.npmjs.org/miniwrite/-/miniwrite-0.1.4.tgz",
-          "dependencies": {
-            "mkdirp": {
-              "version": "0.3.5",
-              "from": "mkdirp@>=0.3.5 <0.4.0",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz"
-            }
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "from": "mkdirp@>=0.5.0 <0.6.0",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-          "dependencies": {
-            "minimist": {
-              "version": "0.0.8",
-              "from": "minimist@0.0.8",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-            }
-          }
-        },
-        "open": {
-          "version": "0.0.5",
-          "from": "open@>=0.0.5 <0.1.0",
-          "resolved": "https://registry.npmjs.org/open/-/open-0.0.5.tgz"
-        },
-        "request": {
-          "version": "2.58.0",
-          "from": "request@>=2.45.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.58.0.tgz",
-          "dependencies": {
-            "caseless": {
-              "version": "0.10.0",
-              "from": "caseless@>=0.10.0 <0.11.0",
-              "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.10.0.tgz"
-            },
-            "extend": {
-              "version": "2.0.1",
-              "from": "extend@>=2.0.1 <2.1.0",
-              "resolved": "https://registry.npmjs.org/extend/-/extend-2.0.1.tgz"
-            },
-            "forever-agent": {
-              "version": "0.6.1",
-              "from": "forever-agent@>=0.6.0 <0.7.0",
-              "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz"
-            },
-            "form-data": {
-              "version": "1.0.0-rc1",
-              "from": "form-data@>=1.0.0-rc1 <1.1.0",
-              "resolved": "https://registry.npmjs.org/form-data/-/form-data-1.0.0-rc1.tgz",
-              "dependencies": {
-                "async": {
-                  "version": "1.3.0",
-                  "from": "async@>=1.2.1 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/async/-/async-1.3.0.tgz"
-                },
-                "mime-types": {
-                  "version": "2.1.2",
-                  "from": "mime-types@>=2.1.1 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.2.tgz",
-                  "dependencies": {
-                    "mime-db": {
-                      "version": "1.14.0",
-                      "from": "mime-db@>=1.14.0 <1.15.0",
-                      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.14.0.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"
-            },
-            "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",
-              "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"
-                }
-              }
-            },
-            "qs": {
-              "version": "3.1.0",
-              "from": "qs@>=3.1.0 <3.2.0",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-3.1.0.tgz"
-            },
-            "tunnel-agent": {
-              "version": "0.4.0",
-              "from": "tunnel-agent@>=0.4.0 <0.5.0",
-              "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.0.tgz"
-            },
-            "tough-cookie": {
-              "version": "2.0.0",
-              "from": "tough-cookie@>=0.12.0",
-              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.0.0.tgz"
-            },
-            "http-signature": {
-              "version": "0.11.0",
-              "from": "http-signature@>=0.11.0 <0.12.0",
-              "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.11.0.tgz",
-              "dependencies": {
-                "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"
-                },
-                "asn1": {
-                  "version": "0.1.11",
-                  "from": "asn1@0.1.11",
-                  "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
-                },
-                "ctype": {
-                  "version": "0.5.3",
-                  "from": "ctype@0.5.3",
-                  "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
-                }
-              }
-            },
-            "oauth-sign": {
-              "version": "0.8.0",
-              "from": "oauth-sign@>=0.8.0 <0.9.0",
-              "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.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",
-              "dependencies": {
-                "hoek": {
-                  "version": "2.14.0",
-                  "from": "hoek@>=2.2.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.14.0.tgz"
-                },
-                "boom": {
-                  "version": "2.8.0",
-                  "from": "boom@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/boom/-/boom-2.8.0.tgz"
-                },
-                "cryptiles": {
-                  "version": "2.0.4",
-                  "from": "cryptiles@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.4.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"
-                }
-              }
-            },
-            "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"
-            },
-            "stringstream": {
-              "version": "0.0.4",
-              "from": "stringstream@>=0.0.4 <0.1.0",
-              "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.4.tgz"
-            },
-            "combined-stream": {
-              "version": "1.0.5",
-              "from": "combined-stream@>=1.0.1 <1.1.0",
-              "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
-              "dependencies": {
-                "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"
-                }
-              }
-            },
-            "isstream": {
-              "version": "0.1.2",
-              "from": "isstream@>=0.1.1 <0.2.0",
-              "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
-            },
-            "har-validator": {
-              "version": "1.8.0",
-              "from": "har-validator@>=1.6.1 <2.0.0",
-              "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-1.8.0.tgz",
-              "dependencies": {
-                "bluebird": {
-                  "version": "2.9.30",
-                  "from": "bluebird@>=2.9.30 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.9.30.tgz"
-                },
-                "chalk": {
-                  "version": "1.0.0",
-                  "from": "chalk@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-                  "dependencies": {
-                    "ansi-styles": {
-                      "version": "2.0.1",
-                      "from": "ansi-styles@>=2.0.1 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.0.1.tgz"
-                    },
-                    "escape-string-regexp": {
-                      "version": "1.0.3",
-                      "from": "escape-string-regexp@>=1.0.2 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                    },
-                    "has-ansi": {
-                      "version": "1.0.3",
-                      "from": "has-ansi@>=1.0.3 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-                      "dependencies": {
-                        "ansi-regex": {
-                          "version": "1.1.1",
-                          "from": "ansi-regex@>=1.1.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.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"
-                        }
-                      }
-                    },
-                    "supports-color": {
-                      "version": "1.3.1",
-                      "from": "supports-color@>=1.3.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz"
-                    }
-                  }
-                },
-                "commander": {
-                  "version": "2.8.1",
-                  "from": "commander@>=2.8.1 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-                  "dependencies": {
-                    "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"
-                    }
-                  }
-                },
-                "is-my-json-valid": {
-                  "version": "2.12.0",
-                  "from": "is-my-json-valid@>=2.12.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.12.0.tgz",
-                  "dependencies": {
-                    "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"
-                    },
-                    "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",
-                      "dependencies": {
-                        "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"
-                        }
-                      }
-                    },
-                    "jsonpointer": {
-                      "version": "1.1.0",
-                      "from": "jsonpointer@>=1.1.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-1.1.0.tgz"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        "rimraf": {
-          "version": "2.2.8",
-          "from": "rimraf@>=2.2.8 <2.3.0",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz"
-        },
-        "type-detect": {
-          "version": "0.1.2",
-          "from": "type-detect@>=0.1.2 <0.2.0",
-          "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-0.1.2.tgz"
-        },
-        "universal-analytics": {
-          "version": "0.3.8",
-          "from": "universal-analytics@>=0.3.4 <0.4.0",
-          "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.3.8.tgz",
-          "dependencies": {
-            "underscore": {
-              "version": "1.8.3",
-              "from": "underscore@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz"
-            },
-            "async": {
-              "version": "0.2.10",
-              "from": "async@>=0.2.0 <0.3.0",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
-            }
-          }
-        },
-        "update-notifier": {
-          "version": "0.2.2",
-          "from": "update-notifier@>=0.2.2 <0.3.0",
-          "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-0.2.2.tgz",
-          "dependencies": {
-            "chalk": {
-              "version": "0.5.1",
-              "from": "chalk@>=0.5.1 <0.6.0",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-              "dependencies": {
-                "ansi-styles": {
-                  "version": "1.1.0",
-                  "from": "ansi-styles@>=1.1.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz"
-                },
-                "escape-string-regexp": {
-                  "version": "1.0.3",
-                  "from": "escape-string-regexp@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.3.tgz"
-                },
-                "has-ansi": {
-                  "version": "0.1.0",
-                  "from": "has-ansi@>=0.1.0 <0.2.0",
-                  "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "ansi-regex@>=0.2.0 <0.3.0",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz"
-                    }
-                  }
-                },
-                "strip-ansi": {
-                  "version": "0.3.0",
-                  "from": "strip-ansi@>=0.3.0 <0.4.0",
-                  "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-                  "dependencies": {
-                    "ansi-regex": {
-                      "version": "0.2.1",
-                      "from": "ansi-regex@>=0.2.0 <0.3.0",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.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"
-                }
-              }
-            },
-            "configstore": {
-              "version": "0.3.2",
-              "from": "configstore@>=0.3.1 <0.4.0",
-              "resolved": "https://registry.npmjs.org/configstore/-/configstore-0.3.2.tgz",
-              "dependencies": {
-                "graceful-fs": {
-                  "version": "3.0.8",
-                  "from": "graceful-fs@>=3.0.1 <4.0.0",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.8.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"
-                },
-                "osenv": {
-                  "version": "0.1.3",
-                  "from": "osenv@>=0.1.0 <0.2.0",
-                  "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.3.tgz",
-                  "dependencies": {
-                    "os-homedir": {
-                      "version": "1.0.0",
-                      "from": "os-homedir@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.0.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"
-                    }
-                  }
-                },
-                "user-home": {
-                  "version": "1.1.1",
-                  "from": "user-home@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.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"
-                }
-              }
-            },
-            "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"
-            },
-            "latest-version": {
-              "version": "1.0.1",
-              "from": "latest-version@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-1.0.1.tgz",
-              "dependencies": {
-                "package-json": {
-                  "version": "1.2.0",
-                  "from": "package-json@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/package-json/-/package-json-1.2.0.tgz",
-                  "dependencies": {
-                    "got": {
-                      "version": "3.2.0",
-                      "from": "got@>=3.2.0 <4.0.0",
-                      "resolved": "https://registry.npmjs.org/got/-/got-3.2.0.tgz",
-                      "dependencies": {
-                        "duplexify": {
-                          "version": "3.4.2",
-                          "from": "duplexify@>=3.2.0 <4.0.0",
-                          "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.4.2.tgz",
-                          "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",
-                              "dependencies": {
-                                "once": {
-                                  "version": "1.3.2",
-                                  "from": "once@>=1.3.0 <1.4.0",
-                                  "resolved": "https://registry.npmjs.org/once/-/once-1.3.2.tgz",
-                                  "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"
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            "readable-stream": {
-                              "version": "2.0.1",
-                              "from": "readable-stream@>=2.0.0 <3.0.0",
-                              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                              "dependencies": {
-                                "core-util-is": {
-                                  "version": "1.0.1",
-                                  "from": "core-util-is@>=1.0.0 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.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"
-                                },
-                                "isarray": {
-                                  "version": "0.0.1",
-                                  "from": "isarray@0.0.1",
-                                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                                },
-                                "process-nextick-args": {
-                                  "version": "1.0.1",
-                                  "from": "process-nextick-args@>=1.0.0 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.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"
-                                },
-                                "util-deprecate": {
-                                  "version": "1.0.1",
-                                  "from": "util-deprecate@>=1.0.1 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz"
-                                }
-                              }
-                            }
-                          }
-                        },
-                        "infinity-agent": {
-                          "version": "2.0.3",
-                          "from": "infinity-agent@>=2.0.0 <3.0.0",
-                          "resolved": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.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"
-                        },
-                        "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"
-                        },
-                        "nested-error-stacks": {
-                          "version": "1.0.0",
-                          "from": "nested-error-stacks@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-1.0.0.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"
-                        },
-                        "prepend-http": {
-                          "version": "1.0.1",
-                          "from": "prepend-http@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.1.tgz"
-                        },
-                        "read-all-stream": {
-                          "version": "2.2.0",
-                          "from": "read-all-stream@>=2.0.0 <3.0.0",
-                          "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-2.2.0.tgz",
-                          "dependencies": {
-                            "readable-stream": {
-                              "version": "2.0.1",
-                              "from": "readable-stream@>=2.0.0 <3.0.0",
-                              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.1.tgz",
-                              "dependencies": {
-                                "core-util-is": {
-                                  "version": "1.0.1",
-                                  "from": "core-util-is@>=1.0.0 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.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"
-                                },
-                                "isarray": {
-                                  "version": "0.0.1",
-                                  "from": "isarray@0.0.1",
-                                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                                },
-                                "process-nextick-args": {
-                                  "version": "1.0.1",
-                                  "from": "process-nextick-args@>=1.0.0 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.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"
-                                },
-                                "util-deprecate": {
-                                  "version": "1.0.1",
-                                  "from": "util-deprecate@>=1.0.1 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.1.tgz"
-                                }
-                              }
-                            }
-                          }
-                        },
-                        "statuses": {
-                          "version": "1.2.1",
-                          "from": "statuses@>=1.2.1 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz"
-                        },
-                        "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"
-                        }
-                      }
-                    },
-                    "registry-url": {
-                      "version": "3.0.3",
-                      "from": "registry-url@>=3.0.0 <4.0.0",
-                      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.0.3.tgz",
-                      "dependencies": {
-                        "rc": {
-                          "version": "1.0.3",
-                          "from": "rc@>=1.0.1 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/rc/-/rc-1.0.3.tgz",
-                          "dependencies": {
-                            "minimist": {
-                              "version": "0.0.10",
-                              "from": "minimist@>=0.0.7 <0.1.0",
-                              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
-                            },
-                            "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"
-                            },
-                            "strip-json-comments": {
-                              "version": "0.1.3",
-                              "from": "strip-json-comments@>=0.1.0 <0.2.0",
-                              "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-0.1.3.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"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "semver-diff": {
-              "version": "2.0.0",
-              "from": "semver-diff@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.0.0.tgz"
-            },
-            "string-length": {
-              "version": "1.0.0",
-              "from": "string-length@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.0.tgz"
-            }
-          }
-        },
-        "uri-templates": {
-          "version": "0.1.7",
-          "from": "uri-templates@>=0.1.5 <0.2.0",
-          "resolved": "https://registry.npmjs.org/uri-templates/-/uri-templates-0.1.7.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"
-        },
-        "verror": {
-          "version": "1.4.0",
-          "from": "verror@>=1.4.0 <1.5.0",
-          "resolved": "https://registry.npmjs.org/verror/-/verror-1.4.0.tgz",
-          "dependencies": {
-            "extsprintf": {
-              "version": "1.0.3",
-              "from": "extsprintf@1.0.3",
-              "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.3.tgz"
-            }
-          }
-        }
-      }
-    },
-    "typescript": {
-      "version": "1.5.0",
-      "from": "git://github.com/alexeagle/TypeScript.git#be9a7edff73ac2592e508732c771c85357041385",
-      "resolved": "git://github.com/alexeagle/TypeScript.git#be9a7edff73ac2592e508732c771c85357041385"
-    },
-    "vinyl": {
-      "version": "0.4.6",
-      "from": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz",
-      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz",
-      "dependencies": {
-        "clone": {
-          "version": "0.2.0",
-          "from": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz"
-        },
-        "clone-stats": {
-          "version": "0.0.1",
-          "from": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz"
-        }
-      }
-    },
-    "walk-sync": {
-      "version": "0.1.3",
-      "from": "https://registry.npmjs.org/walk-sync/-/walk-sync-0.1.3.tgz",
-      "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-0.1.3.tgz"
-    },
-    "which": {
-      "version": "1.0.9",
-      "from": "https://registry.npmjs.org/which/-/which-1.0.9.tgz",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.0.9.tgz"
-    },
-    "xtend": {
-      "version": "4.0.0",
-      "from": "https://registry.npmjs.org/xtend/-/xtend-4.0.0.tgz",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.0.tgz"
-    },
-    "yargs": {
-      "version": "2.3.0",
-      "from": "https://registry.npmjs.org/yargs/-/yargs-2.3.0.tgz",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-2.3.0.tgz",
-      "dependencies": {
-        "wordwrap": {
-          "version": "0.0.2",
-          "from": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz"
-        }
-      }
-    },
-    "zone.js": {
-      "version": "0.5.1",
-      "from": "https://registry.npmjs.org/zone.js/-/zone.js-0.5.1.tgz",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.5.1.tgz"
-    }
-  }
-}
diff --git a/npm-shrinkwrap.readme.md b/npm-shrinkwrap.readme.md
deleted file mode 100644
index f62f246a81da..000000000000
--- a/npm-shrinkwrap.readme.md
+++ /dev/null
@@ -1,48 +0,0 @@
-All of our npm dependencies are locked via the `npm-shrinkwrap.json` file for the following reasons:
-
-- our project has lots of dependencies which update at unpredictable times, so it's important that
-  we update them explicitly once in a while rather than implicitly when any of us runs npm install
-- locked dependencies allow us to do reuse npm cache on travis, significantly speeding up our builds
-  (by 5min or more)  
-- locked dependencies allow us to detect when node_modules folder is out of date after a branch switch
-  which allows us to build the project with the correct dependencies every time
-
-However npm's shrinkwrap is known to be buggy, so we need to take some extra steps to deal with this.
-The most important step is generating the npm-shrinkwrap.clean.js which is used during code reviews
-or debugging to easily review what has actually changed. 
-See https://github.com/npm/npm/issues/3581 for related npm issue. A common symptom is that the `from` property of various dependencies in `npm-shrinkwrap.json` "arbitrarily" changes depending on when and where the shrinkwrap command was run.
-
-To add a new dependency do the following:
-
-1. if you are on linux or windows, then use MacOS or ask someone with MacOS to perform the installation. This is due to an optional `fsevents` dependency that is really required on MacOS to get good performance from file watching.
-2. make sure you are in sync with `upstream/master`
-3. ensure that your `node_modules` directory is not stale or poisoned by doing a clean install with `rm -rf node_modules && npm install`
-4. add a new dependency via `npm install --save-dev <packagename>`
-5. update npm-shrinkwrap.json with `npm shrinkwrap --dev`
-6. run `./tools/npm/clean-shrinkwrap.js`
-7. these steps should change 3 files: `package.json`, `npm-shrinkwrap.json` and `npm-shrinkwrap.clean.json`
-8. commit changes to these three files and you are done
-
-
-To update existing dependency do the following:
-
-1. if you are on linux or windows, then use MacOS or ask someone with MacOS to perform the installation. This is due to an optional `fsevents` dependency that is really required on MacOS to get good performance from file watching.
-2. make sure you are in sync with `upstream/master`: `git fetch upstream && git rebase upstream/master`
-3. ensure that your `node_modules` directory is not stale or poisoned by doing a clean install with `rm -rf node_modules && npm install`
-4. run `npm install --save-dev <packagename>@<version|latest>` or `npm update <packagename>` to update to the latest version that matches version constraint in `package.json`
-5. relock the dependencies with `npm shrinkwrap --dev`
-6. clean up the shrinkwrap file for review with `./tools/npm/clean-shrinkwrap.js`
-7. these steps should change 2 files: `npm-shrinkwrap.json` and `npm-shrinkwrap.clean.json`. Optionally if you used `npm install ...` in the first step, `package.json` might be modified as well
-8. commit changes to these three files and you are done
-
-
-To Remove an existing dependency do the following:
-
-1. if you are on linux or windows, then use MacOS or ask someone with MacOS to perform the installation. This is due to an optional `fsevents` dependency that is really required on MacOS to get good performance from file watching.
-2. make sure you are in sync with `upstream/master`: `git fetch upstream && git rebase upstream/master`
-3. ensure that your `node_modules` directory is not stale or poisoned by doing a clean install with `rm -rf node_modules && npm install`
-4. run `npm uninstall --save-dev <packagename>@<version|latest>`
-5. relock the dependencies with `npm shrinkwrap --dev`
-6. clean up the shrinkwrap file for review with `./tools/npm/clean-shrinkwrap.js`
-7. these steps should change 3 files: `npm-shrinkwrap.json` and `npm-shrinkwrap.clean.json`.
-8. commit changes to these three files and you are done
diff --git a/package.json b/package.json
index 79b7fa02fe71..ae08447f1511 100644
--- a/package.json
+++ b/package.json
@@ -1,135 +1,136 @@
 {
-  "name": "angular",
-  "version": "2.0.0-alpha.29",
+  "name": "angular-srcs",
+  "version": "7.0.0-beta.2",
+  "private": true,
   "branchPattern": "2.0.*",
-  "description": "Angular 2 - a web framework for modern web apps",
+  "description": "Angular - a web framework for modern web apps",
   "homepage": "https://github.com/angular/angular",
   "bugs": "https://github.com/angular/angular/issues",
-  "contributors": [
-    "Alex Eagle <alexeagle@google.com>",
-    "Chirayu Krishnappa <chirayu@google.com>",
-    "Jeff Cross <crossj@google.com>",
-    "Matias Niemela <matsko@google.com>",
-    "Misko Hevery <misko@google.com>",
-    "Rado Kirov <radokirov@google.com>",
-    "Tobias Bosch <tbosch@google.com>",
-    "Victor Savkin <vsavkin@google.com>",
-    "Yegor Jbanov <yjbanov@google.com>",
-    "Jeremy Elbourn <jelbourn@google.com>"
-  ],
-  "license": "Apache-2.0",
+  "license": "MIT",
+  "engines": {
+    "node": ">=8.9.1 <9.0.0",
+    "yarn": ">=1.3.2 <2.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/angular/angular.git"
   },
   "scripts": {
-    "preinstall": "node tools/npm/check-node-modules --purge",
-    "postinstall": "node tools/npm/copy-npm-shrinkwrap && node tools/chromedriverpatch.js && webdriver-manager update && bower install && gulp pubget.dart && tsd reinstall --overwrite --config modules/angular2/tsd.json && tsd reinstall --overwrite --config tools/tsd.json",
-    "test": "gulp test.all.js && gulp test.all.dart"
+    "preskylint": "bazel build --noshow_progress @io_bazel//src/tools/skylark/java/com/google/devtools/skylark/skylint:Skylint",
+    "skylint": "find . -type f -name \"*.bzl\" ! -path \"*/node_modules/*\" ! -path \"./dist/*\" | xargs $(bazel info bazel-bin)/external/io_bazel/src/tools/skylark/java/com/google/devtools/skylark/skylint/Skylint --disable-checks=deprecated-api",
+    "prebuildifier": "bazel build --noshow_progress @com_github_bazelbuild_buildtools//buildifier",
+    "buildifier": "find . -type f \\( -name \"*.bzl\" -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs $(bazel info bazel-bin)/external/com_github_bazelbuild_buildtools/buildifier/*/buildifier",
+    "preinstall": "node tools/yarn/check-yarn.js",
+    "postinstall": "yarn update-webdriver && node ./tools/postinstall-patches.js && yarn patch-types",
+    "//patch-types": "work-around for issue https://github.com/angular/angular/issues/25051",
+    "patch-types": "node -e \"var sh = require('shelljs'); sh.set('-e'); sh.mkdir('-p', 'node_modules/@types/zone.js'); sh.cp('-f', 'node_modules/zone.js/dist/zone.js.d.ts', 'node_modules/@types/zone.js/index.d.ts')\"",
+    "update-webdriver": "webdriver-manager update --gecko false $CHROMEDRIVER_VERSION_ARG",
+    "check-env": "gulp check-env",
+    "commitmsg": "node ./scripts/git/commit-msg.js"
   },
   "dependencies": {
-    "es6-module-loader": "^0.9.2",
-    "googleapis": "1.0.x",
-    "gulp-insert": "^0.4.0",
-    "gulp-modify": "0.0.5",
-    "gulp-replace": "^0.5.3",
-    "node-uuid": "1.4.x",
-    "reflect-metadata": "0.1.0",
-    "rx": "2.5.1",
-    "selenium-webdriver": "2.45.1",
-    "systemjs": "^0.9.1",
-    "traceur": "0.0.87",
-    "which": "~1",
-    "zone.js": "0.5.1"
+    "@angular-devkit/schematics": "^0.5.5",
+    "@schematics/angular": "^0.5.4",
+    "core-js": "^2.4.1",
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "^6.0.0",
+    "tslib": "^1.7.1",
+    "zone.js": "^0.8.26"
+  },
+  "optionalDependencies": {
+    "fsevents": "1.1.2"
   },
   "devDependencies": {
-    "angular": "1.3.5",
-    "bower": "^1.3.12",
-    "broccoli": "^0.15.3",
-    "broccoli-filter": "^0.1.12",
-    "broccoli-flatten": "^0.1.1",
-    "broccoli-funnel": "igorminar/broccoli-funnel#perf-files",
-    "broccoli-lodash": "^0.1.1",
-    "broccoli-merge-trees": "^0.2.1",
-    "broccoli-slow-trees": "^1.1.0",
-    "broccoli-stew": "^0.2.1",
-    "broccoli-writer": "^0.1.1",
-    "browserify": "^10.2.4",
+    "@bazel/ibazel": "^0.1.1",
+    "@types/angular": "^1.6.47",
+    "@types/base64-js": "1.2.5",
+    "@types/chai": "^4.1.2",
+    "@types/chokidar": "1.7.3",
+    "@types/convert-source-map": "^1.5.1",
+    "@types/diff": "^3.2.2",
+    "@types/fs-extra": "4.0.2",
+    "@types/hammerjs": "2.0.35",
+    "@types/jasmine": "^2.8.8",
+    "@types/jasminewd2": "^2.0.3",
+    "@types/minimist": "^1.2.0",
+    "@types/mock-fs": "^3.6.30",
+    "@types/node": "6.0.88",
+    "@types/selenium-webdriver": "3.0.7",
+    "@types/shelljs": "^0.7.8",
+    "@types/source-map": "^0.5.1",
+    "@types/systemjs": "0.19.32",
+    "@webcomponents/custom-elements": "^1.0.4",
+    "angular": "npm:angular@1.7",
+    "angular-1.5": "npm:angular@1.5",
+    "angular-1.6": "npm:angular@1.6",
+    "angular-mocks": "npm:angular-mocks@1.7",
+    "angular-mocks-1.5": "npm:angular-mocks@1.5",
+    "angular-mocks-1.6": "npm:angular-mocks@1.6",
+    "base64-js": "1.2.1",
+    "bower": "1.8.2",
+    "browserstacktunnel-wrapper": "2.0.1",
     "canonical-path": "0.0.2",
-    "chokidar": "^1.0.1",
-    "clang-format": "^1.0.25",
-    "conventional-changelog": "^0.0.17",
-    "css": "mlaval/css#issue65",
-    "del": "~1",
-    "dgeni": "^0.4.1",
-    "dgeni-packages": "^0.10.11",
-    "event-stream": "^3.1.5",
-    "firefox-profile": "^0.3.4",
-    "fs-extra": "^0.18.0",
-    "glob": "^4.0.6",
-    "gulp": "^3.8.8",
-    "gulp-autoprefixer": "^2.1.0",
-    "gulp-changed": "^1.0.0",
-    "gulp-clang-format": "^1.0.14",
-    "gulp-concat": "^2.5.2",
-    "gulp-connect": "~1.0.5",
-    "gulp-load-plugins": "^0.7.1",
-    "gulp-rename": "^1.2.0",
-    "gulp-sass": "^1.3.3",
-    "gulp-shell": "^0.2.10",
-    "gulp-sourcemaps": "1.3.*",
-    "gulp-template": "^3.0.0",
-    "gulp-traceur": "0.17.*",
-    "gulp-tslint": "^3.1.0-beta",
-    "gulp-typescript": "^2.6.0",
-    "gulp-uglify": "^1.2.0",
-    "gulp-webserver": "^0.8.7",
-    "html2jade": "^0.8.3",
-    "indent-string": "^1.2.1",
-    "jasmine": "2.3.1",
-    "jasmine-core": "2.3.4",
-    "jpm": "1.0.0",
-    "js-beautify": "^1.5.5",
-    "js-yaml": "^3.2.7",
-    "karma": "^0.12.23",
-    "karma-chrome-launcher": "^0.1.4",
-    "karma-cli": "^0.0.4",
-    "karma-dart": "^0.2.8",
-    "karma-jasmine": "^0.3.5",
-    "karma-sauce-launcher": "^0.2.11",
-    "lodash": "^2.4.1",
-    "madge": "^0.5.0",
-    "marked": "^0.3.3",
-    "merge": "^1.2.0",
-    "merge2": "^0.3.5",
-    "minimatch": "^2.0.1",
-    "minimist": "1.1.x",
-    "mock-fs": "^2.5.0",
-    "node-html-encoder": "0.0.2",
-    "parse5": "1.3.2",
-    "protractor": "2.1.0",
-    "q": "^1.0.1",
-    "react": "^0.13.2",
-    "rewire": "^2.3.3",
-    "run-sequence": "^1.1.0",
-    "semver": "^4.3.4",
-    "shelljs": "^0.5.0",
-    "sorted-object": "^1.0.0",
-    "source-map": "^0.3.0",
-    "sprintf-js": "1.0.*",
-    "string": "^3.1.1",
-    "strip-ansi": "^2.0.1",
-    "symlink-or-copy": "^1.0.1",
-    "systemjs-builder": "^0.10.3",
-    "temp": "^0.8.1",
-    "ternary-stream": "^1.2.3",
-    "through2": "^0.6.1",
-    "ts2dart": "^0.6.0",
-    "tsd": "^0.6.3",
-    "typescript": "alexeagle/TypeScript#error_is_class",
-    "vinyl": "^0.4.6",
-    "walk-sync": "^0.1.3",
-    "xtend": "^4.0.0",
-    "yargs": "2.3.*"
+    "chokidar": "1.7.0",
+    "clang-format": "1.0.41",
+    "cldr": "4.10.0",
+    "cldr-data-downloader": "0.3.2",
+    "cldrjs": "0.5.0",
+    "conventional-changelog": "1.1.0",
+    "convert-source-map": "^1.5.1",
+    "cors": "2.8.4",
+    "diff": "^3.5.0",
+    "domino": "2.0.1",
+    "entities": "1.1.1",
+    "firefox-profile": "1.0.3",
+    "fs-extra": "4.0.2",
+    "glob": "7.1.2",
+    "gulp": "3.9.1",
+    "gulp-clang-format": "1.0.23",
+    "gulp-connect": "5.0.0",
+    "gulp-conventional-changelog": "1.1.0",
+    "gulp-tslint": "8.1.2",
+    "hammerjs": "2.0.8",
+    "husky": "^0.14.3",
+    "incremental-dom": "0.4.1",
+    "jasmine": "^3.1.0",
+    "jasmine-core": "^3.1.0",
+    "jpm": "1.3.1",
+    "karma": "^2.0.4",
+    "karma-browserstack-launcher": "^1.3.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-jasmine": "^1.1.2",
+    "karma-sauce-launcher": "^1.2.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "madge": "0.5.0",
+    "magic-string": "^0.25.0",
+    "minimist": "1.2.0",
+    "mock-fs": "^4.5.0",
+    "mutation-observer": "^1.0.3",
+    "node-uuid": "1.4.8",
+    "protobufjs": "5.0.0",
+    "protractor": "5.1.2",
+    "rewire": "2.5.2",
+    "rollup": "0.47.4",
+    "rollup-plugin-commonjs": "8.1.0",
+    "rollup-plugin-node-resolve": "3.0.0",
+    "rollup-plugin-sourcemaps": "0.4.2",
+    "selenium-webdriver": "3.5.0",
+    "semver": "5.4.1",
+    "shelljs": "^0.8.1",
+    "source-map": "^0.6.1",
+    "source-map-support": "0.4.18",
+    "systemjs": "0.18.10",
+    "tsickle": "0.32",
+    "tslint": "5.7.0",
+    "tslint-eslint-rules": "4.1.1",
+    "tsutils": "2.20.0",
+    "typescript": "2.9.x",
+    "uglify-es": "^3.3.9",
+    "universal-analytics": "0.4.15",
+    "vlq": "0.2.2",
+    "vrsource-tslint-rules": "5.1.1",
+    "webpack": "1.12.9",
+    "xhr2": "0.1.4",
+    "yargs": "9.0.1"
   }
 }
diff --git a/packages/BUILD.bazel b/packages/BUILD.bazel
new file mode 100644
index 000000000000..2a5869794c85
--- /dev/null
+++ b/packages/BUILD.bazel
@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files([
+    "tsconfig-build.json",
+    "tsconfig.json",
+])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "types",
+    srcs = glob(["*.ts"]),
+)
+
+exports_files([
+    "license-banner.txt",
+    "README.md",
+])
diff --git a/packages/README.md b/packages/README.md
new file mode 100644
index 000000000000..7d8a6d3fa994
--- /dev/null
+++ b/packages/README.md
@@ -0,0 +1,6 @@
+Angular
+=======
+
+The sources for this package are in the main [Angular](https://github.com/angular/angular) repo. Please file issues and pull requests against that repo.
+
+License: MIT
diff --git a/packages/animations/BUILD.bazel b/packages/animations/BUILD.bazel
new file mode 100644
index 000000000000..d32879fa706d
--- /dev/null
+++ b/packages/animations/BUILD.bazel
@@ -0,0 +1,37 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "animations",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/animations",
+    deps = [
+        "//packages/core",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "//packages/animations/browser:package.json",
+        "//packages/animations/browser/testing:package.json",
+    ],
+    entry_point = "packages/animations/index.js",
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "release-with-framework",
+    ],
+    deps = [
+        ":animations",
+        "//packages/animations/browser",
+        "//packages/animations/browser/testing",
+    ],
+)
diff --git a/packages/animations/PACKAGE.md b/packages/animations/PACKAGE.md
new file mode 100644
index 000000000000..412b03243b48
--- /dev/null
+++ b/packages/animations/PACKAGE.md
@@ -0,0 +1,29 @@
+Implements a domain-specific language (DSL) for defining web animation sequences for HTML elements as
+multiple transformations over time.
+
+Use this API to define how an HTML element can move, change color, grow or shrink, fade, or slide off
+the page. These changes can occur simultaneously or sequentially. You can control the timing of each
+of these transformations. The function calls generate the data structures and metadata that enable Angular
+to integrate animations into templates and run them based on application states.
+
+Animation definitions are linked to components through the `{@link Component.animations animations}`
+property in the `@Component` metadata, typically in the component file of the HTML element to be animated.
+The `trigger()` function encapsulates a named animation, with all other function calls nested within. Use
+the trigger name to bind the named animation to a specific triggering element in the HTML template.
+
+Angular animations are based on CSS web transition functionality, so anything that can be styled or
+transformed in CSS can be animated the same way in Angular. Angular animations allow you to:
+
+* Set animation timings, styles, keyframes, and transitions.
+* Animate HTML elements in complex sequences and choreographies.
+* Animate HTML elements as they are inserted and removed from the DOM, including responsive real-time
+  filtering.
+* Create reusable animations.
+* Animate parent and child elements.
+
+Additional animation functionality is provided in other Angular modules for animation testing, for
+route-based animations, and for programmatic animation controls that allow an end user to fast forward
+and reverse an animation sequence.
+
+@see Find out more in the [animations guide](guide/animations).
+@see See what polyfills you might need in the [browser support guide](guide/browser-support).
diff --git a/packages/animations/browser/BUILD.bazel b/packages/animations/browser/BUILD.bazel
new file mode 100644
index 000000000000..b3bb295b0317
--- /dev/null
+++ b/packages/animations/browser/BUILD.bazel
@@ -0,0 +1,20 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "browser",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/animations/browser",
+    deps = [
+        "//packages/animations",
+        "//packages/core",
+    ],
+)
diff --git a/packages/animations/browser/index.ts b/packages/animations/browser/index.ts
new file mode 100644
index 000000000000..969471c0986d
--- /dev/null
+++ b/packages/animations/browser/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 verifcation. `ngc`
+// replaces this file with production index.ts when it rewrites private symbol
+// names.
+
+export * from './public_api';
diff --git a/packages/animations/browser/package.json b/packages/animations/browser/package.json
new file mode 100644
index 000000000000..dbf3e987d42d
--- /dev/null
+++ b/packages/animations/browser/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@angular/animations/browser",
+  "typings": "./browser.d.ts",
+  "main": "../bundles/animations-browser.umd.js",
+  "module": "../fesm5/browser.js",
+  "es2015": "../fesm2015/browser.js",
+  "esm5": "../esm5/browser/browser.js",
+  "esm2015": "../esm2015/browser/browser.js",
+  "fesm5": "../fesm5/browser.js",
+  "fesm2015": "../fesm2015/browser.js",
+  "sideEffects": false
+}
diff --git a/packages/animations/browser/public_api.ts b/packages/animations/browser/public_api.ts
new file mode 100644
index 000000000000..172ca60bd453
--- /dev/null
+++ b/packages/animations/browser/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 this package.
+ */
+export * from './src/browser';
diff --git a/packages/animations/browser/rollup.config.js b/packages/animations/browser/rollup.config.js
new file mode 100644
index 000000000000..3ffb6d5a6a09
--- /dev/null
+++ b/packages/animations/browser/rollup.config.js
@@ -0,0 +1,28 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/animations': 'ng.animations'
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/animations/fesm5/browser.js',
+  dest: '../../../dist/packages-dist/animations/bundles/animations-browser.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/animations/browser'},
+  moduleName: 'ng.animations.browser',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/animations/browser/src/browser.ts b/packages/animations/browser/src/browser.ts
new file mode 100644
index 000000000000..108be7b1ae1e
--- /dev/null
+++ b/packages/animations/browser/src/browser.ts
@@ -0,0 +1,15 @@
+/**
+ * @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 animation APIs of the animation browser package.
+ */
+export {AnimationDriver} from './render/animation_driver';
+export * from './private_export';
diff --git a/packages/animations/browser/src/dsl/animation.ts b/packages/animations/browser/src/dsl/animation.ts
new file mode 100644
index 000000000000..e21494a980a8
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation.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 {AnimationMetadata, AnimationMetadataType, AnimationOptions, ɵStyleData} from '@angular/animations';
+
+import {AnimationDriver} from '../render/animation_driver';
+import {ENTER_CLASSNAME, LEAVE_CLASSNAME, 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 {ElementInstructionMap} from './element_instruction_map';
+
+export class Animation {
+  private _animationAst: Ast<AnimationMetadataType>;
+  constructor(private _driver: AnimationDriver, input: AnimationMetadata|AnimationMetadata[]) {
+    const errors: any[] = [];
+    const ast = buildAnimationAst(_driver, input, errors);
+    if (errors.length) {
+      const errorMessage = `animation validation failed:\n${errors.join("\n")}`;
+      throw new Error(errorMessage);
+    }
+    this._animationAst = ast;
+  }
+
+  buildTimelines(
+      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;
+    const errors: any = [];
+    subInstructions = subInstructions || new ElementInstructionMap();
+    const result = buildAnimationTimelines(
+        this._driver, element, this._animationAst, ENTER_CLASSNAME, LEAVE_CLASSNAME, 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 000000000000..dd5a46363bec
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_ast.ts
@@ -0,0 +1,113 @@
+/**
+ * @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, AnimationMetadataType, 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;
+}
+
+export interface Ast<T extends AnimationMetadataType> {
+  type: T;
+  options: AnimationOptions|null;
+}
+
+export interface TriggerAst extends Ast<AnimationMetadataType.Trigger> {
+  type: AnimationMetadataType.Trigger;
+  name: string;
+  states: StateAst[];
+  transitions: TransitionAst[];
+  queryCount: number;
+  depCount: number;
+}
+
+export interface StateAst extends Ast<AnimationMetadataType.State> {
+  type: AnimationMetadataType.State;
+  name: string;
+  style: StyleAst;
+}
+
+export interface TransitionAst extends Ast<AnimationMetadataType.Transition> {
+  matchers: ((fromState: string, toState: string, element: any, params: {[key: string]:
+                                                                             any}) => boolean)[];
+  animation: Ast<AnimationMetadataType>;
+  queryCount: number;
+  depCount: number;
+}
+
+export interface SequenceAst extends Ast<AnimationMetadataType.Sequence> {
+  steps: Ast<AnimationMetadataType>[];
+}
+
+export interface GroupAst extends Ast<AnimationMetadataType.Group> {
+  steps: Ast<AnimationMetadataType>[];
+}
+
+export interface AnimateAst extends Ast<AnimationMetadataType.Animate> {
+  timings: TimingAst;
+  style: StyleAst|KeyframesAst;
+}
+
+export interface StyleAst extends Ast<AnimationMetadataType.Style> {
+  styles: (ɵStyleData|string)[];
+  easing: string|null;
+  offset: number|null;
+  containsDynamicStyles: boolean;
+  isEmptyStep?: boolean;
+}
+
+export interface KeyframesAst extends Ast<AnimationMetadataType.Keyframes> { styles: StyleAst[]; }
+
+export interface ReferenceAst extends Ast<AnimationMetadataType.Reference> {
+  animation: Ast<AnimationMetadataType>;
+}
+
+export interface AnimateChildAst extends Ast<AnimationMetadataType.AnimateChild> {}
+
+export interface AnimateRefAst extends Ast<AnimationMetadataType.AnimateRef> {
+  animation: ReferenceAst;
+}
+
+export interface QueryAst extends Ast<AnimationMetadataType.Query> {
+  selector: string;
+  limit: number;
+  optional: boolean;
+  includeSelf: boolean;
+  animation: Ast<AnimationMetadataType>;
+  originalSelector: string;
+}
+
+export interface StaggerAst extends Ast<AnimationMetadataType.Stagger> {
+  timings: AnimateTimings;
+  animation: Ast<AnimationMetadataType>;
+}
+
+export interface TimingAst {
+  duration: number;
+  delay: number;
+  easing: string|null;
+  dynamic?: boolean;
+}
+
+export interface DynamicTimingAst extends TimingAst {
+  strValue: string;
+  dynamic: true;
+}
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 000000000000..841bfd378b60
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_ast_builder.ts
@@ -0,0 +1,568 @@
+/**
+ * @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 {AnimationDriver} from '../render/animation_driver';
+import {getOrSetAsInMap} from '../render/shared';
+import {ENTER_SELECTOR, LEAVE_SELECTOR, NG_ANIMATING_SELECTOR, NG_TRIGGER_SELECTOR, SUBSTITUTION_EXPR_START, copyObj, extractStyleParams, iteratorToArray, normalizeAnimationEntry, resolveTiming, validateStyleParams, visitDslNode} from '../util';
+
+import {AnimateAst, AnimateChildAst, AnimateRefAst, Ast, DynamicTimingAst, GroupAst, KeyframesAst, QueryAst, ReferenceAst, SequenceAst, StaggerAst, StateAst, StyleAst, TimingAst, TransitionAst, TriggerAst} from './animation_ast';
+import {AnimationDslVisitor} 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(
+    driver: AnimationDriver, metadata: AnimationMetadata | AnimationMetadata[],
+    errors: any[]): Ast<AnimationMetadataType> {
+  return new AnimationAstBuilderVisitor(driver).build(metadata, errors);
+}
+
+const ROOT_SELECTOR = '';
+
+export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
+  constructor(private _driver: AnimationDriver) {}
+
+  build(metadata: AnimationMetadata|AnimationMetadata[], errors: any[]):
+      Ast<AnimationMetadataType> {
+    const context = new AnimationAstBuilderContext(errors);
+    this._resetContextStyleTimingState(context);
+    return <Ast<AnimationMetadataType>>visitDslNode(
+        this, normalizeAnimationEntry(metadata), context);
+  }
+
+  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[] = [];
+    if (metadata.name.charAt(0) == '@') {
+      context.errors.push(
+          'animation triggers cannot be prefixed with an `@` sign (e.g. trigger(\'@foo\', [...]))');
+    }
+
+    metadata.definitions.forEach(def => {
+      this._resetContextStyleTimingState(context);
+      if (def.type == AnimationMetadataType.State) {
+        const stateDef = def as AnimationStateMetadata;
+        const name = stateDef.name;
+        name.toString().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()');
+      }
+    });
+
+    return {
+      type: AnimationMetadataType.Trigger,
+      name: metadata.name, states, transitions, queryCount, depCount,
+      options: null
+    };
+  }
+
+  visitState(metadata: AnimationStateMetadata, context: AnimationAstBuilderContext): StateAst {
+    const styleAst = this.visitStyle(metadata.styles, context);
+    const astParams = (metadata.options && metadata.options.params) || null;
+    if (styleAst.containsDynamicStyles) {
+      const missingSubs = new Set<string>();
+      const params = astParams || {};
+      styleAst.styles.forEach(value => {
+        if (isObject(value)) {
+          const stylesObj = value as any;
+          Object.keys(stylesObj).forEach(prop => {
+            extractStyleParams(stylesObj[prop]).forEach(sub => {
+              if (!params.hasOwnProperty(sub)) {
+                missingSubs.add(sub);
+              }
+            });
+          });
+        }
+      });
+      if (missingSubs.size) {
+        const missingSubsArr = iteratorToArray(missingSubs.values());
+        context.errors.push(
+            `state("${metadata.name}", ...) must define default values for all the following style substitutions: ${missingSubsArr.join(', ')}`);
+      }
+    }
+
+    return {
+      type: AnimationMetadataType.State,
+      name: metadata.name,
+      style: styleAst,
+      options: astParams ? {params: astParams} : null
+    };
+  }
+
+  visitTransition(metadata: AnimationTransitionMetadata, context: AnimationAstBuilderContext):
+      TransitionAst {
+    context.queryCount = 0;
+    context.depCount = 0;
+    const animation = visitDslNode(this, normalizeAnimationEntry(metadata.animation), context);
+    const matchers = parseTransitionExpr(metadata.expr, context.errors);
+
+    return {
+      type: AnimationMetadataType.Transition,
+      matchers,
+      animation,
+      queryCount: context.queryCount,
+      depCount: context.depCount,
+      options: normalizeAnimationOptions(metadata.options)
+    };
+  }
+
+  visitSequence(metadata: AnimationSequenceMetadata, context: AnimationAstBuilderContext):
+      SequenceAst {
+    return {
+      type: AnimationMetadataType.Sequence,
+      steps: metadata.steps.map(s => visitDslNode(this, s, context)),
+      options: normalizeAnimationOptions(metadata.options)
+    };
+  }
+
+  visitGroup(metadata: AnimationGroupMetadata, context: AnimationAstBuilderContext): GroupAst {
+    const currentTime = context.currentTime;
+    let furthestTime = 0;
+    const steps = metadata.steps.map(step => {
+      context.currentTime = currentTime;
+      const innerAst = visitDslNode(this, step, context);
+      furthestTime = Math.max(furthestTime, context.currentTime);
+      return innerAst;
+    });
+
+    context.currentTime = furthestTime;
+    return {
+      type: AnimationMetadataType.Group,
+      steps,
+      options: normalizeAnimationOptions(metadata.options)
+    };
+  }
+
+  visitAnimate(metadata: AnimationAnimateMetadata, context: AnimationAstBuilderContext):
+      AnimateAst {
+    const timingAst = constructTimingAst(metadata.timings, context.errors);
+    context.currentAnimateTimings = timingAst;
+
+    let styleAst: StyleAst|KeyframesAst;
+    let styleMetadata: AnimationMetadata = metadata.styles ? metadata.styles : style({});
+    if (styleMetadata.type == AnimationMetadataType.Keyframes) {
+      styleAst = 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;
+      styleAst = _styleAst;
+    }
+
+    context.currentAnimateTimings = null;
+    return {
+      type: AnimationMetadataType.Animate,
+      timings: timingAst,
+      style: styleAst,
+      options: null
+    };
+  }
+
+  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 containsDynamicStyles = false;
+    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'];
+        }
+        if (!containsDynamicStyles) {
+          for (let prop in styleMap) {
+            const value = styleMap[prop];
+            if (value.toString().indexOf(SUBSTITUTION_EXPR_START) >= 0) {
+              containsDynamicStyles = true;
+              break;
+            }
+          }
+        }
+      }
+    });
+
+    return {
+      type: AnimationMetadataType.Style,
+      styles,
+      easing: collectedEasing,
+      offset: metadata.offset, containsDynamicStyles,
+      options: null
+    };
+  }
+
+  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 => {
+        if (!this._driver.validateStyleProperty(prop)) {
+          context.errors.push(
+              `The provided animation property "${prop}" is not a supported CSS property for animations`);
+          return;
+        }
+
+        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 {
+    const ast: KeyframesAst = {type: AnimationMetadataType.Keyframes, styles: [], options: null};
+    if (!context.currentAnimateTimings) {
+      context.errors.push(`keyframes() must be placed inside of a call to animate()`);
+      return ast;
+    }
+
+    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;
+
+      ast.styles.push(kf);
+    });
+
+    return ast;
+  }
+
+  visitReference(metadata: AnimationReferenceMetadata, context: AnimationAstBuilderContext):
+      ReferenceAst {
+    return {
+      type: AnimationMetadataType.Reference,
+      animation: visitDslNode(this, normalizeAnimationEntry(metadata.animation), context),
+      options: normalizeAnimationOptions(metadata.options)
+    };
+  }
+
+  visitAnimateChild(metadata: AnimationAnimateChildMetadata, context: AnimationAstBuilderContext):
+      AnimateChildAst {
+    context.depCount++;
+    return {
+      type: AnimationMetadataType.AnimateChild,
+      options: normalizeAnimationOptions(metadata.options)
+    };
+  }
+
+  visitAnimateRef(metadata: AnimationAnimateRefMetadata, context: AnimationAstBuilderContext):
+      AnimateRefAst {
+    return {
+      type: AnimationMetadataType.AnimateRef,
+      animation: this.visitReference(metadata.animation, context),
+      options: normalizeAnimationOptions(metadata.options)
+    };
+  }
+
+  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 animation = visitDslNode(this, normalizeAnimationEntry(metadata.animation), context);
+    context.currentQuery = null;
+    context.currentQuerySelector = parentSelector;
+
+    return {
+      type: AnimationMetadataType.Query,
+      selector,
+      limit: options.limit || 0,
+      optional: !!options.optional, includeSelf, animation,
+      originalSelector: metadata.selector,
+      options: normalizeAnimationOptions(metadata.options)
+    };
+  }
+
+  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);
+
+    return {
+      type: AnimationMetadataType.Stagger,
+      animation: visitDslNode(this, normalizeAnimationEntry(metadata.animation), context), timings,
+      options: null
+    };
+  }
+}
+
+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, '');
+  }
+
+  // the :enter and :leave selectors are filled in at runtime during timeline building
+  selector = 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 makeTimingAst(duration as number, 0, '');
+  }
+
+  const strValue = value as string;
+  const isDynamic = strValue.split(/\s+/).some(v => v.charAt(0) == '{' && v.charAt(1) == '{');
+  if (isDynamic) {
+    const ast = makeTimingAst(0, 0, '') as any;
+    ast.dynamic = true;
+    ast.strValue = strValue;
+    return ast as DynamicTimingAst;
+  }
+
+  timings = timings || resolveTiming(strValue, errors);
+  return makeTimingAst(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;
+}
+
+function makeTimingAst(duration: number, delay: number, easing: string | null): TimingAst {
+  return {duration, delay, easing};
+}
diff --git a/packages/animations/browser/src/dsl/animation_dsl_visitor.ts b/packages/animations/browser/src/dsl/animation_dsl_visitor.ts
new file mode 100644
index 000000000000..e77f9db90ef4
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_dsl_visitor.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 {AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationQueryMetadata, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata} from '@angular/animations';
+
+export interface AnimationDslVisitor {
+  visitTrigger(node: AnimationTriggerMetadata, context: any): any;
+  visitState(node: AnimationStateMetadata, context: any): any;
+  visitTransition(node: AnimationTransitionMetadata, context: any): any;
+  visitSequence(node: AnimationSequenceMetadata, context: any): any;
+  visitGroup(node: AnimationGroupMetadata, context: any): any;
+  visitAnimate(node: AnimationAnimateMetadata, context: any): any;
+  visitStyle(node: AnimationStyleMetadata, context: any): any;
+  visitKeyframes(node: AnimationKeyframesSequenceMetadata, context: any): any;
+  visitReference(node: AnimationReferenceMetadata, context: any): any;
+  visitAnimateChild(node: AnimationAnimateChildMetadata, context: any): any;
+  visitAnimateRef(node: AnimationAnimateRefMetadata, context: any): any;
+  visitQuery(node: AnimationQueryMetadata, context: any): any;
+  visitStagger(node: AnimationStaggerMetadata, context: any): any;
+}
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 000000000000..b9bc5b09202d
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_timeline_builder.ts
@@ -0,0 +1,898 @@
+/**
+ * @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, AnimationMetadataType, AnimationOptions, AnimationQueryOptions, ɵPRE_STYLE as PRE_STYLE, ɵStyleData} from '@angular/animations';
+
+import {AnimationDriver} from '../render/animation_driver';
+import {copyObj, copyStyles, interpolateParams, iteratorToArray, resolveTiming, resolveTimingValue, visitDslNode} 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;
+const ENTER_TOKEN = ':enter';
+const ENTER_TOKEN_REGEX = new RegExp(ENTER_TOKEN, 'g');
+const LEAVE_TOKEN = ':leave';
+const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
+
+/*
+ * 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<AnimationMetadataType>,
+    enterClassName: string, leaveClassName: string, startingStyles: ɵStyleData = {},
+    finalStyles: ɵStyleData = {}, options: AnimationOptions,
+    subInstructions?: ElementInstructionMap, errors: any[] = []): AnimationTimelineInstruction[] {
+  return new AnimationTimelineBuilderVisitor().buildKeyframes(
+      driver, rootElement, ast, enterClassName, leaveClassName, startingStyles, finalStyles,
+      options, subInstructions, errors);
+}
+
+export class AnimationTimelineBuilderVisitor implements AstVisitor {
+  buildKeyframes(
+      driver: AnimationDriver, rootElement: any, ast: Ast<AnimationMetadataType>,
+      enterClassName: string, leaveClassName: string, startingStyles: ɵStyleData,
+      finalStyles: ɵStyleData, options: AnimationOptions, subInstructions?: ElementInstructionMap,
+      errors: any[] = []): AnimationTimelineInstruction[] {
+    subInstructions = subInstructions || new ElementInstructionMap();
+    const context = new AnimationTimelineContext(
+        driver, rootElement, subInstructions, enterClassName, leaveClassName, errors, []);
+    context.options = options;
+    context.currentTimeline.setStyles([startingStyles], null, context.errors, options);
+
+    visitDslNode(this, ast, 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);
+    visitDslNode(this, ast.animation, 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.type == AnimationMetadataType.Style) {
+          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 => visitDslNode(this, s, 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);
+      }
+
+      visitDslNode(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;
+  }
+
+  private _visitTiming(ast: TimingAst, context: AnimationTimelineContext): AnimateTimings {
+    if ((ast as DynamicTimingAst).dynamic) {
+      const strValue = (ast as DynamicTimingAst).strValue;
+      const timingValue =
+          context.params ? interpolateParams(strValue, context.params, context.errors) : strValue;
+      return resolveTiming(timingValue, 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.type == AnimationMetadataType.Keyframes) {
+      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.type === AnimationMetadataType.Style ||
+                  (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;
+      }
+
+      visitDslNode(this, ast.animation, 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;
+    visitDslNode(this, ast.animation, 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<AnimationMetadataType>>{};
+export class AnimationTimelineContext {
+  public parentContext: AnimationTimelineContext|null = null;
+  public currentTimeline: TimelineBuilder;
+  public currentAnimateTimings: AnimateTimings|null = null;
+  public previousNode: Ast<AnimationMetadataType> = 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, private _enterClassName: string,
+      private _leaveClassName: string, public errors: any[], public timelines: TimelineBuilder[],
+      initialTimeline?: TimelineBuilder) {
+    this.currentTimeline = initialTimeline || new TimelineBuilder(this._driver, 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(oldParams).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._enterClassName, this._leaveClassName,
+        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(
+        this._driver, 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
+      selector = selector.replace(ENTER_TOKEN_REGEX, '.' + this._enterClassName);
+      selector = selector.replace(LEAVE_TOKEN_REGEX, '.' + this._leaveClassName);
+      const multi = limit != 1;
+      let elements = this._driver.query(this.element, selector, multi);
+      if (limit !== 0) {
+        elements = limit < 0 ? elements.slice(elements.length + limit, elements.length) :
+                               elements.slice(0, limit);
+      }
+      results.push(...elements);
+    }
+
+    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;
+  // TODO(issue/24571): remove '!'.
+  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(
+      private _driver: AnimationDriver, 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(
+        this._driver, 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(
+      driver: AnimationDriver, public element: any, public keyframes: ɵStyleData[],
+      public preStyleProps: string[], public postStyleProps: string[], timings: AnimateTimings,
+      private _stretchStartingKeyframe: boolean = false) {
+    super(driver, 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
new file mode 100644
index 000000000000..4c10d69a3dfd
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_timeline_instruction.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 {ɵ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;
+  stretchStartingKeyframe?: boolean;
+  subTimeline: boolean;
+}
+
+export function createTimelineInstruction(
+    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, subTimeline
+  };
+}
diff --git a/packages/animations/browser/src/dsl/animation_transition_expr.ts b/packages/animations/browser/src/dsl/animation_transition_expr.ts
new file mode 100644
index 000000000000..7285ca056af5
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_transition_expr.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
+ */
+export const ANY_STATE = '*';
+export declare type TransitionMatcherFn =
+    (fromState: any, toState: any, element: any, params: {[key: string]: any}) => boolean;
+
+export function parseTransitionExpr(
+    transitionValue: string | TransitionMatcherFn, errors: string[]): TransitionMatcherFn[] {
+  const expressions: TransitionMatcherFn[] = [];
+  if (typeof transitionValue == 'string') {
+    (<string>transitionValue)
+        .split(/\s*,\s*/)
+        .forEach(str => parseInnerTransitionStr(str, expressions, errors));
+  } else {
+    expressions.push(<TransitionMatcherFn>transitionValue);
+  }
+  return expressions;
+}
+
+function parseInnerTransitionStr(
+    eventStr: string, expressions: TransitionMatcherFn[], errors: string[]) {
+  if (eventStr[0] == ':') {
+    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`);
+    return expressions;
+  }
+
+  const fromState = match[1];
+  const separator = match[2];
+  const toState = match[3];
+  expressions.push(makeLambdaFromStates(fromState, toState));
+
+  const isFullAnyStateExpr = fromState == ANY_STATE && toState == ANY_STATE;
+  if (separator[0] == '<' && !isFullAnyStateExpr) {
+    expressions.push(makeLambdaFromStates(toState, fromState));
+  }
+}
+
+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 '* => *';
+  }
+}
+
+// DO NOT REFACTOR ... keep the follow set instantiations
+// with the values intact (closure compiler for some reason
+// removes follow-up lines that add the values outside of
+// the constructor...
+const TRUE_BOOLEAN_VALUES = new Set<string>(['true', '1']);
+const FALSE_BOOLEAN_VALUES = new Set<string>(['false', '0']);
+
+function makeLambdaFromStates(lhs: string, rhs: string): TransitionMatcherFn {
+  const LHS_MATCH_BOOLEAN = TRUE_BOOLEAN_VALUES.has(lhs) || FALSE_BOOLEAN_VALUES.has(lhs);
+  const RHS_MATCH_BOOLEAN = TRUE_BOOLEAN_VALUES.has(rhs) || FALSE_BOOLEAN_VALUES.has(rhs);
+
+  return (fromState: any, toState: any): boolean => {
+    let lhsMatch = lhs == ANY_STATE || lhs == fromState;
+    let rhsMatch = rhs == ANY_STATE || rhs == toState;
+
+    if (!lhsMatch && LHS_MATCH_BOOLEAN && typeof fromState === 'boolean') {
+      lhsMatch = fromState ? TRUE_BOOLEAN_VALUES.has(lhs) : FALSE_BOOLEAN_VALUES.has(lhs);
+    }
+    if (!rhsMatch && RHS_MATCH_BOOLEAN && typeof toState === 'boolean') {
+      rhsMatch = toState ? TRUE_BOOLEAN_VALUES.has(rhs) : FALSE_BOOLEAN_VALUES.has(rhs);
+    }
+
+    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
new file mode 100644
index 000000000000..f1499e862b6a
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_transition_factory.ts
@@ -0,0 +1,124 @@
+/**
+ * @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 {AnimationOptions, ɵStyleData} from '@angular/animations';
+
+import {AnimationDriver} from '../render/animation_driver';
+import {getOrSetAsInMap} from '../render/shared';
+import {copyObj, interpolateParams, iteratorToArray, mergeAnimationOptions} from '../util';
+
+import {StyleAst, 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';
+
+const EMPTY_OBJECT = {};
+
+export class AnimationTransitionFactory {
+  constructor(
+      private _triggerName: string, public ast: TransitionAst,
+      private _stateStyles: {[stateName: string]: AnimationStateStyles}) {}
+
+  match(currentState: any, nextState: any, element: any, params: {[key: string]: any}): boolean {
+    return oneOrMoreTransitionsMatch(this.ast.matchers, currentState, nextState, element, params);
+  }
+
+  buildStyles(stateName: string, params: {[key: string]: any}, errors: any[]) {
+    const backupStateStyler = this._stateStyles['*'];
+    const stateStyler = this._stateStyles[stateName];
+    const backupStyles = backupStateStyler ? backupStateStyler.buildStyles(params, errors) : {};
+    return stateStyler ? stateStyler.buildStyles(params, errors) : backupStyles;
+  }
+
+  build(
+      driver: AnimationDriver, element: any, currentState: any, nextState: any,
+      enterClassName: string, leaveClassName: string, currentOptions?: AnimationOptions,
+      nextOptions?: AnimationOptions, subInstructions?: ElementInstructionMap,
+      skipAstBuild?: boolean): AnimationTransitionInstruction {
+    const errors: any[] = [];
+
+    const transitionAnimationParams = this.ast.options && this.ast.options.params || EMPTY_OBJECT;
+    const currentAnimationParams = currentOptions && currentOptions.params || EMPTY_OBJECT;
+    const currentStateStyles = this.buildStyles(currentState, currentAnimationParams, errors);
+    const nextAnimationParams = nextOptions && nextOptions.params || EMPTY_OBJECT;
+    const nextStateStyles = this.buildStyles(nextState, nextAnimationParams, errors);
+
+    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 animationOptions = {params: {...transitionAnimationParams, ...nextAnimationParams}};
+
+    const timelines = skipAstBuild ? [] : buildAnimationTimelines(
+                                              driver, element, this.ast.animation, enterClassName,
+                                              leaveClassName, currentStateStyles, nextStateStyles,
+                                              animationOptions, subInstructions, errors);
+
+    let totalTime = 0;
+    timelines.forEach(tl => { totalTime = Math.max(tl.duration + tl.delay, totalTime); });
+
+    if (errors.length) {
+      return createTransitionInstruction(
+          element, this._triggerName, currentState, nextState, isRemoval, currentStateStyles,
+          nextStateStyles, [], [], preStyleMap, postStyleMap, totalTime, 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(
+        element, this._triggerName, currentState, nextState, isRemoval, currentStateStyles,
+        nextStateStyles, timelines, queriedElementsList, preStyleMap, postStyleMap, totalTime);
+  }
+}
+
+function oneOrMoreTransitionsMatch(
+    matchFns: TransitionMatcherFn[], currentState: any, nextState: any, element: any,
+    params: {[key: string]: any}): boolean {
+  return matchFns.some(fn => fn(currentState, nextState, element, params));
+}
+
+export class AnimationStateStyles {
+  constructor(private styles: StyleAst, private defaultParams: {[key: string]: any}) {}
+
+  buildStyles(params: {[key: string]: any}, errors: string[]): ɵStyleData {
+    const finalStyles: ɵStyleData = {};
+    const combinedParams = copyObj(this.defaultParams);
+    Object.keys(params).forEach(key => {
+      const value = params[key];
+      if (value != null) {
+        combinedParams[key] = value;
+      }
+    });
+    this.styles.styles.forEach(value => {
+      if (typeof value !== 'string') {
+        const styleObj = value as any;
+        Object.keys(styleObj).forEach(prop => {
+          let val = styleObj[prop];
+          if (val.length > 1) {
+            val = interpolateParams(val, combinedParams, errors);
+          }
+          finalStyles[prop] = val;
+        });
+      }
+    });
+    return finalStyles;
+  }
+}
diff --git a/packages/animations/browser/src/dsl/animation_transition_instruction.ts b/packages/animations/browser/src/dsl/animation_transition_instruction.ts
new file mode 100644
index 000000000000..a09194faecd2
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_transition_instruction.ts
@@ -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
+ */
+import {ɵStyleData} from '@angular/animations';
+import {AnimationEngineInstruction, AnimationTransitionInstructionType} from '../render/animation_engine_instruction';
+import {AnimationTimelineInstruction} from './animation_timeline_instruction';
+
+export interface AnimationTransitionInstruction extends AnimationEngineInstruction {
+  element: any;
+  triggerName: string;
+  isRemovalTransition: boolean;
+  fromState: string;
+  fromStyles: ɵStyleData;
+  toState: string;
+  toStyles: ɵStyleData;
+  timelines: AnimationTimelineInstruction[];
+  queriedElements: any[];
+  preStyleProps: Map<any, {[prop: string]: boolean}>;
+  postStyleProps: Map<any, {[prop: string]: boolean}>;
+  totalTime: number;
+  errors?: any[];
+}
+
+export function createTransitionInstruction(
+    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}>, totalTime: number,
+    errors?: any[]): AnimationTransitionInstruction {
+  return {
+    type: AnimationTransitionInstructionType.TransitionAnimation,
+    element,
+    triggerName,
+    isRemovalTransition,
+    fromState,
+    fromStyles,
+    toState,
+    toStyles,
+    timelines,
+    queriedElements,
+    preStyleProps,
+    postStyleProps,
+    totalTime,
+    errors
+  };
+}
diff --git a/packages/animations/browser/src/dsl/animation_trigger.ts b/packages/animations/browser/src/dsl/animation_trigger.ts
new file mode 100644
index 000000000000..c594241c3616
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_trigger.ts
@@ -0,0 +1,86 @@
+/**
+ * @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 {AnimationMetadataType, ɵStyleData} from '@angular/animations';
+
+import {copyStyles, interpolateParams} from '../util';
+
+import {SequenceAst, StyleAst, TransitionAst, TriggerAst} from './animation_ast';
+import {AnimationStateStyles, AnimationTransitionFactory} from './animation_transition_factory';
+
+
+
+/**
+ * @experimental Animation support is experimental.
+ */
+export function buildTrigger(name: string, ast: TriggerAst): AnimationTrigger {
+  return new AnimationTrigger(name, ast);
+}
+
+/**
+* @experimental Animation support is experimental.
+*/
+export class AnimationTrigger {
+  public transitionFactories: AnimationTransitionFactory[] = [];
+  public fallbackTransition: AnimationTransitionFactory;
+  public states: {[stateName: string]: AnimationStateStyles} = {};
+
+  constructor(public name: string, public ast: TriggerAst) {
+    ast.states.forEach(ast => {
+      const defaultParams = (ast.options && ast.options.params) || {};
+      this.states[ast.name] = new AnimationStateStyles(ast.style, defaultParams);
+    });
+
+    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, element: any, params: {[key: string]: any}):
+      AnimationTransitionFactory|null {
+    const entry =
+        this.transitionFactories.find(f => f.match(currentState, nextState, element, params));
+    return entry || null;
+  }
+
+  matchStyles(currentState: any, params: {[key: string]: any}, errors: any[]): ɵStyleData {
+    return this.fallbackTransition.buildStyles(currentState, params, errors);
+  }
+}
+
+function createFallbackTransition(
+    triggerName: string,
+    states: {[stateName: string]: AnimationStateStyles}): AnimationTransitionFactory {
+  const matchers = [(fromState: any, toState: any) => true];
+  const animation: SequenceAst = {type: AnimationMetadataType.Sequence, steps: [], options: null};
+  const transition: TransitionAst = {
+    type: AnimationMetadataType.Transition,
+    animation,
+    matchers,
+    options: null,
+    queryCount: 0,
+    depCount: 0
+  };
+  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];
+    }
+  } else if (obj.hasOwnProperty(key2)) {
+    obj[key1] = obj[key2];
+  }
+}
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 000000000000..ad61a5f35ee3
--- /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/animation_style_normalizer.ts b/packages/animations/browser/src/dsl/style_normalization/animation_style_normalizer.ts
new file mode 100644
index 000000000000..c2a3e0ae340e
--- /dev/null
+++ b/packages/animations/browser/src/dsl/style_normalization/animation_style_normalizer.ts
@@ -0,0 +1,30 @@
+/**
+ * @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
+ */
+
+/**
+ * @experimental Animation support is experimental.
+ */
+export abstract class AnimationStyleNormalizer {
+  abstract normalizePropertyName(propertyName: string, errors: string[]): string;
+  abstract normalizeStyleValue(
+      userProvidedProperty: string, normalizedProperty: string, value: string|number,
+      errors: string[]): string;
+}
+
+/**
+ * @experimental Animation support is experimental.
+ */
+export class NoopAnimationStyleNormalizer {
+  normalizePropertyName(propertyName: string, errors: string[]): string { return propertyName; }
+
+  normalizeStyleValue(
+      userProvidedProperty: string, normalizedProperty: string, value: string|number,
+      errors: string[]): string {
+    return <any>value;
+  }
+}
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
new file mode 100644
index 000000000000..2a79684e9081
--- /dev/null
+++ b/packages/animations/browser/src/dsl/style_normalization/web_animations_style_normalizer.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
+ */
+import {dashCaseToCamelCase} from '../../util';
+
+import {AnimationStyleNormalizer} from './animation_style_normalizer';
+
+export class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
+  normalizePropertyName(propertyName: string, errors: string[]): string {
+    return dashCaseToCamelCase(propertyName);
+  }
+
+  normalizeStyleValue(
+      userProvidedProperty: string, normalizedProperty: string, value: string|number,
+      errors: string[]): string {
+    let unit: string = '';
+    const strVal = value.toString().trim();
+
+    if (DIMENSIONAL_PROP_MAP[normalizedProperty] && value !== 0 && value !== '0') {
+      if (typeof value === 'number') {
+        unit = 'px';
+      } else {
+        const valAndSuffixMatch = value.match(/^[+-]?[\d\.]+([a-z]*)$/);
+        if (valAndSuffixMatch && valAndSuffixMatch[1].length == 0) {
+          errors.push(`Please provide a CSS unit value for ${userProvidedProperty}:${value}`);
+        }
+      }
+    }
+    return strVal + unit;
+  }
+}
+
+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,perspective'
+        .split(','));
+
+function makeBooleanMap(keys: string[]): {[key: string]: boolean} {
+  const map: {[key: string]: boolean} = {};
+  keys.forEach(key => map[key] = true);
+  return map;
+}
diff --git a/packages/animations/browser/src/private_export.ts b/packages/animations/browser/src/private_export.ts
new file mode 100644
index 000000000000..697fd889ebde
--- /dev/null
+++ b/packages/animations/browser/src/private_export.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {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 {AnimationDriver as ɵAnimationDriver, NoopAnimationDriver as ɵNoopAnimationDriver} from './render/animation_driver';
+export {AnimationEngine as ɵAnimationEngine} from './render/animation_engine_next';
+export {CssKeyframesDriver as ɵCssKeyframesDriver} from './render/css_keyframes/css_keyframes_driver';
+export {CssKeyframesPlayer as ɵCssKeyframesPlayer} from './render/css_keyframes/css_keyframes_player';
+export {containsElement as ɵcontainsElement, invokeQuery as ɵinvokeQuery, matchesElement as ɵmatchesElement, validateStyleProperty as ɵvalidateStyleProperty} from './render/shared';
+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';
+export {allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge} from './util';
diff --git a/packages/animations/browser/src/render/animation_driver.ts b/packages/animations/browser/src/render/animation_driver.ts
new file mode 100644
index 000000000000..9583884507eb
--- /dev/null
+++ b/packages/animations/browser/src/render/animation_driver.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 {AnimationPlayer, NoopAnimationPlayer} from '@angular/animations';
+import {Injectable} from '@angular/core';
+
+import {containsElement, invokeQuery, matchesElement, validateStyleProperty} from './shared';
+
+/**
+ * @experimental
+ */
+@Injectable()
+export class NoopAnimationDriver implements AnimationDriver {
+  validateStyleProperty(prop: string): boolean { return validateStyleProperty(prop); }
+
+  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[] = [],
+      scrubberAccessRequested?: boolean): AnimationPlayer {
+    return new NoopAnimationPlayer(duration, delay);
+  }
+}
+
+/**
+ * @experimental
+ */
+export abstract class AnimationDriver {
+  static NOOP: AnimationDriver = new NoopAnimationDriver();
+
+  abstract validateStyleProperty(prop: string): boolean;
+
+  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[], scrubberAccessRequested?: boolean): any;
+}
diff --git a/packages/animations/browser/src/render/animation_engine_instruction.ts b/packages/animations/browser/src/render/animation_engine_instruction.ts
new file mode 100644
index 000000000000..43c9fcd773ef
--- /dev/null
+++ b/packages/animations/browser/src/render/animation_engine_instruction.ts
@@ -0,0 +1,10 @@
+/**
+ * @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 const enum AnimationTransitionInstructionType {TransitionAnimation, TimelineAnimation}
+
+export interface AnimationEngineInstruction { type: AnimationTransitionInstructionType; }
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 000000000000..753d8b52aef4
--- /dev/null
+++ b/packages/animations/browser/src/render/animation_engine_next.ts
@@ -0,0 +1,106 @@
+/**
+ * @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(
+      private bodyNode: any, private _driver: AnimationDriver,
+      normalizer: AnimationStyleNormalizer) {
+    this._transitionEngine = new TransitionAnimationEngine(bodyNode, _driver, normalizer);
+    this._timelineEngine = new TimelineAnimationEngine(bodyNode, _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(this._driver, 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/css_keyframes/css_keyframes_driver.ts b/packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts
new file mode 100644
index 000000000000..242a1fd1e7ac
--- /dev/null
+++ b/packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts
@@ -0,0 +1,142 @@
+/**
+ * @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, ɵStyleData} from '@angular/animations';
+
+import {allowPreviousPlayerStylesMerge, balancePreviousStylesIntoKeyframes, computeStyle} from '../../util';
+import {AnimationDriver} from '../animation_driver';
+import {containsElement, hypenatePropsObject, invokeQuery, matchesElement, validateStyleProperty} from '../shared';
+
+import {CssKeyframesPlayer} from './css_keyframes_player';
+import {DirectStylePlayer} from './direct_style_player';
+
+const KEYFRAMES_NAME_PREFIX = 'gen_css_kf_';
+const TAB_SPACE = ' ';
+
+export class CssKeyframesDriver implements AnimationDriver {
+  private _count = 0;
+  private readonly _head: any = document.querySelector('head');
+  private _warningIssued = false;
+
+  validateStyleProperty(prop: string): boolean { return validateStyleProperty(prop); }
+
+  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;
+  }
+
+  buildKeyframeElement(element: any, name: string, keyframes: {[key: string]: any}[]): any {
+    keyframes = keyframes.map(kf => hypenatePropsObject(kf));
+    let keyframeStr = `@keyframes ${name} {\n`;
+    let tab = '';
+    keyframes.forEach(kf => {
+      tab = TAB_SPACE;
+      const offset = parseFloat(kf.offset);
+      keyframeStr += `${tab}${offset * 100}% {\n`;
+      tab += TAB_SPACE;
+      Object.keys(kf).forEach(prop => {
+        const value = kf[prop];
+        switch (prop) {
+          case 'offset':
+            return;
+          case 'easing':
+            if (value) {
+              keyframeStr += `${tab}animation-timing-function: ${value};\n`;
+            }
+            return;
+          default:
+            keyframeStr += `${tab}${prop}: ${value};\n`;
+            return;
+        }
+      });
+      keyframeStr += `${tab}}\n`;
+    });
+    keyframeStr += `}\n`;
+
+    const kfElm = document.createElement('style');
+    kfElm.innerHTML = keyframeStr;
+    return kfElm;
+  }
+
+  animate(
+      element: any, keyframes: ɵStyleData[], duration: number, delay: number, easing: string,
+      previousPlayers: AnimationPlayer[] = [], scrubberAccessRequested?: boolean): AnimationPlayer {
+    if (scrubberAccessRequested) {
+      this._notifyFaultyScrubber();
+    }
+
+    const previousCssKeyframePlayers = <CssKeyframesPlayer[]>previousPlayers.filter(
+        player => player instanceof CssKeyframesPlayer);
+
+    const previousStyles: {[key: string]: any} = {};
+
+    if (allowPreviousPlayerStylesMerge(duration, delay)) {
+      previousCssKeyframePlayers.forEach(player => {
+        let styles = player.currentSnapshot;
+        Object.keys(styles).forEach(prop => previousStyles[prop] = styles[prop]);
+      });
+    }
+
+    keyframes = balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles);
+    const finalStyles = flattenKeyframesIntoStyles(keyframes);
+
+    // if there is no animation then there is no point in applying
+    // styles and waiting for an event to get fired. This causes lag.
+    // It's better to just directly apply the styles to the element
+    // via the direct styling animation player.
+    if (duration == 0) {
+      return new DirectStylePlayer(element, finalStyles);
+    }
+
+    const animationName = `${KEYFRAMES_NAME_PREFIX}${this._count++}`;
+    const kfElm = this.buildKeyframeElement(element, animationName, keyframes);
+    document.querySelector('head') !.appendChild(kfElm);
+
+    const player = new CssKeyframesPlayer(
+        element, keyframes, animationName, duration, delay, easing, finalStyles);
+
+    player.onDestroy(() => removeElement(kfElm));
+    return player;
+  }
+
+  private _notifyFaultyScrubber() {
+    if (!this._warningIssued) {
+      console.warn(
+          '@angular/animations: please load the web-animations.js polyfill to allow programmatic access...\n',
+          '  visit http://bit.ly/IWukam to learn more about using the web-animation-js polyfill.');
+      this._warningIssued = true;
+    }
+  }
+}
+
+function flattenKeyframesIntoStyles(
+    keyframes: null | {[key: string]: any} | {[key: string]: any}[]): {[key: string]: any} {
+  let flatKeyframes: {[key: string]: any} = {};
+  if (keyframes) {
+    const kfs = Array.isArray(keyframes) ? keyframes : [keyframes];
+    kfs.forEach(kf => {
+      Object.keys(kf).forEach(prop => {
+        if (prop == 'offset' || prop == 'easing') return;
+        flatKeyframes[prop] = kf[prop];
+      });
+    });
+  }
+  return flatKeyframes;
+}
+
+function removeElement(node: any) {
+  node.parentNode.removeChild(node);
+}
diff --git a/packages/animations/browser/src/render/css_keyframes/css_keyframes_player.ts b/packages/animations/browser/src/render/css_keyframes/css_keyframes_player.ts
new file mode 100644
index 000000000000..88c1a2e07d46
--- /dev/null
+++ b/packages/animations/browser/src/render/css_keyframes/css_keyframes_player.ts
@@ -0,0 +1,147 @@
+/**
+ * @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} from '@angular/animations';
+
+import {computeStyle} from '../../util';
+
+import {ElementAnimationStyleHandler} from './element_animation_style_handler';
+
+const DEFAULT_FILL_MODE = 'forwards';
+const DEFAULT_EASING = 'linear';
+const ANIMATION_END_EVENT = 'animationend';
+
+export const enum AnimatorControlState {INITIALIZED = 1, STARTED = 2, FINISHED = 3, DESTROYED = 4}
+
+export class CssKeyframesPlayer implements AnimationPlayer {
+  private _onDoneFns: Function[] = [];
+  private _onStartFns: Function[] = [];
+  private _onDestroyFns: Function[] = [];
+
+  private _started = false;
+  // TODO(issue/24571): remove '!'.
+  private _styler !: ElementAnimationStyleHandler;
+
+  // TODO(issue/24571): remove '!'.
+  public parentPlayer !: AnimationPlayer;
+  public readonly totalTime: number;
+  public readonly easing: string;
+  public currentSnapshot: {[key: string]: string} = {};
+
+  private _state: AnimatorControlState = 0;
+
+  constructor(
+      public readonly element: any, public readonly keyframes: {[key: string]: string | number}[],
+      public readonly animationName: string, private readonly _duration: number,
+      private readonly _delay: number, easing: string,
+      private readonly _finalStyles: {[key: string]: any}) {
+    this.easing = easing || DEFAULT_EASING;
+    this.totalTime = _duration + _delay;
+    this._buildStyler();
+  }
+
+  onStart(fn: () => void): void { this._onStartFns.push(fn); }
+
+  onDone(fn: () => void): void { this._onDoneFns.push(fn); }
+
+  onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
+
+  destroy() {
+    this.init();
+    if (this._state >= AnimatorControlState.DESTROYED) return;
+    this._state = AnimatorControlState.DESTROYED;
+    this._styler.destroy();
+    this._flushStartFns();
+    this._flushDoneFns();
+    this._onDestroyFns.forEach(fn => fn());
+    this._onDestroyFns = [];
+  }
+
+  private _flushDoneFns() {
+    this._onDoneFns.forEach(fn => fn());
+    this._onDoneFns = [];
+  }
+
+  private _flushStartFns() {
+    this._onStartFns.forEach(fn => fn());
+    this._onStartFns = [];
+  }
+
+  finish() {
+    this.init();
+    if (this._state >= AnimatorControlState.FINISHED) return;
+    this._state = AnimatorControlState.FINISHED;
+    this._styler.finish();
+    this._flushStartFns();
+    this._flushDoneFns();
+  }
+
+  setPosition(value: number) { this._styler.setPosition(value); }
+
+  getPosition(): number { return this._styler.getPosition(); }
+
+  hasStarted(): boolean { return this._state >= AnimatorControlState.STARTED; }
+  init(): void {
+    if (this._state >= AnimatorControlState.INITIALIZED) return;
+    this._state = AnimatorControlState.INITIALIZED;
+    const elm = this.element;
+    this._styler.apply();
+    if (this._delay) {
+      this._styler.pause();
+    }
+  }
+
+  play(): void {
+    this.init();
+    if (!this.hasStarted()) {
+      this._flushStartFns();
+      this._state = AnimatorControlState.STARTED;
+    }
+    this._styler.resume();
+  }
+
+  pause(): void {
+    this.init();
+    this._styler.pause();
+  }
+  restart(): void {
+    this.reset();
+    this.play();
+  }
+  reset(): void {
+    this._styler.destroy();
+    this._buildStyler();
+    this._styler.apply();
+  }
+
+  private _buildStyler() {
+    this._styler = new ElementAnimationStyleHandler(
+        this.element, this.animationName, this._duration, this._delay, this.easing,
+        DEFAULT_FILL_MODE, () => this.finish());
+  }
+
+  /** @internal */
+  triggerCallback(phaseName: string): void {
+    const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
+    methods.forEach(fn => fn());
+    methods.length = 0;
+  }
+
+  beforeDestroy() {
+    this.init();
+    const styles: {[key: string]: string} = {};
+    if (this.hasStarted()) {
+      const finished = this._state >= AnimatorControlState.FINISHED;
+      Object.keys(this._finalStyles).forEach(prop => {
+        if (prop != 'offset') {
+          styles[prop] = finished ? this._finalStyles[prop] : computeStyle(this.element, prop);
+        }
+      });
+    }
+    this.currentSnapshot = styles;
+  }
+}
diff --git a/packages/animations/browser/src/render/css_keyframes/direct_style_player.ts b/packages/animations/browser/src/render/css_keyframes/direct_style_player.ts
new file mode 100644
index 000000000000..f4c092d27eb8
--- /dev/null
+++ b/packages/animations/browser/src/render/css_keyframes/direct_style_player.ts
@@ -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
+ */
+import {NoopAnimationPlayer} from '@angular/animations';
+import {hypenatePropsObject} from '../shared';
+
+export class DirectStylePlayer extends NoopAnimationPlayer {
+  private _startingStyles: {[key: string]: any}|null = {};
+  private __initialized = false;
+  private _styles: {[key: string]: any};
+
+  constructor(public element: any, styles: {[key: string]: any}) {
+    super();
+    this._styles = hypenatePropsObject(styles);
+  }
+
+  init() {
+    if (this.__initialized || !this._startingStyles) return;
+    this.__initialized = true;
+    Object.keys(this._styles).forEach(prop => {
+      this._startingStyles ![prop] = this.element.style[prop];
+    });
+    super.init();
+  }
+
+  play() {
+    if (!this._startingStyles) return;
+    this.init();
+    Object.keys(this._styles)
+        .forEach(prop => this.element.style.setProperty(prop, this._styles[prop]));
+    super.play();
+  }
+
+  destroy() {
+    if (!this._startingStyles) return;
+    Object.keys(this._startingStyles).forEach(prop => {
+      const value = this._startingStyles ![prop];
+      if (value) {
+        this.element.style.setProperty(prop, value);
+      } else {
+        this.element.style.removeProperty(prop);
+      }
+    });
+    this._startingStyles = null;
+    super.destroy();
+  }
+}
diff --git a/packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts b/packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts
new file mode 100644
index 000000000000..03e06889d30b
--- /dev/null
+++ b/packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts
@@ -0,0 +1,147 @@
+/**
+ * @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 ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
+const ANIMATION_PROP = 'animation';
+const ANIMATIONEND_EVENT = 'animationend';
+const ONE_SECOND = 1000;
+
+export class ElementAnimationStyleHandler {
+  private readonly _eventFn: (e: any) => any;
+  private _finished = false;
+  private _destroyed = false;
+  private _startTime = 0;
+  private _position = 0;
+
+  constructor(
+      private readonly _element: any, private readonly _name: string,
+      private readonly _duration: number, private readonly _delay: number,
+      private readonly _easing: string, private readonly _fillMode: ''|'both'|'forwards',
+      private readonly _onDoneFn: () => any) {
+    this._eventFn = (e) => this._handleCallback(e);
+  }
+
+  apply() {
+    applyKeyframeAnimation(
+        this._element,
+        `${this._duration}ms ${this._easing} ${this._delay}ms 1 normal ${this._fillMode} ${this._name}`);
+    addRemoveAnimationEvent(this._element, this._eventFn, false);
+    this._startTime = Date.now();
+  }
+
+  pause() { playPauseAnimation(this._element, this._name, 'paused'); }
+
+  resume() { playPauseAnimation(this._element, this._name, 'running'); }
+
+  setPosition(position: number) {
+    const index = findIndexForAnimation(this._element, this._name);
+    this._position = position * this._duration;
+    setAnimationStyle(this._element, 'Delay', `-${this._position}ms`, index);
+  }
+
+  getPosition() { return this._position; }
+
+  private _handleCallback(event: any) {
+    const timestamp = event._ngTestManualTimestamp || Date.now();
+    const elapsedTime =
+        parseFloat(event.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES)) * ONE_SECOND;
+    if (event.animationName == this._name &&
+        Math.max(timestamp - this._startTime, 0) >= this._delay && elapsedTime >= this._duration) {
+      this.finish();
+    }
+  }
+
+  finish() {
+    if (this._finished) return;
+    this._finished = true;
+    this._onDoneFn();
+    addRemoveAnimationEvent(this._element, this._eventFn, true);
+  }
+
+  destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
+    this.finish();
+    removeKeyframeAnimation(this._element, this._name);
+  }
+}
+
+function playPauseAnimation(element: any, name: string, status: 'running' | 'paused') {
+  const index = findIndexForAnimation(element, name);
+  setAnimationStyle(element, 'PlayState', status, index);
+}
+
+function applyKeyframeAnimation(element: any, value: string): number {
+  const anim = getAnimationStyle(element, '').trim();
+  let index = 0;
+  if (anim.length) {
+    index = countChars(anim, ',') + 1;
+    value = `${anim}, ${value}`;
+  }
+  setAnimationStyle(element, '', value);
+  return index;
+}
+
+function removeKeyframeAnimation(element: any, name: string) {
+  const anim = getAnimationStyle(element, '');
+  const tokens = anim.split(',');
+  const index = findMatchingTokenIndex(tokens, name);
+  if (index >= 0) {
+    tokens.splice(index, 1);
+    const newValue = tokens.join(',');
+    setAnimationStyle(element, '', newValue);
+  }
+}
+
+function findIndexForAnimation(element: any, value: string) {
+  const anim = getAnimationStyle(element, '');
+  if (anim.indexOf(',') > 0) {
+    const tokens = anim.split(',');
+    return findMatchingTokenIndex(tokens, value);
+  }
+  return findMatchingTokenIndex([anim], value);
+}
+
+function findMatchingTokenIndex(tokens: string[], searchToken: string): number {
+  for (let i = 0; i < tokens.length; i++) {
+    if (tokens[i].indexOf(searchToken) >= 0) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+function addRemoveAnimationEvent(element: any, fn: (e: any) => any, doRemove: boolean) {
+  doRemove ? element.removeEventListener(ANIMATIONEND_EVENT, fn) :
+             element.addEventListener(ANIMATIONEND_EVENT, fn);
+}
+
+function setAnimationStyle(element: any, name: string, value: string, index?: number) {
+  const prop = ANIMATION_PROP + name;
+  if (index != null) {
+    const oldValue = element.style[prop];
+    if (oldValue.length) {
+      const tokens = oldValue.split(',');
+      tokens[index] = value;
+      value = tokens.join(',');
+    }
+  }
+  element.style[prop] = value;
+}
+
+function getAnimationStyle(element: any, name: string) {
+  return element.style[ANIMATION_PROP + name];
+}
+
+function countChars(value: string, char: string): number {
+  let count = 0;
+  for (let i = 0; i < value.length; i++) {
+    const c = value.charAt(i);
+    if (c === char) count++;
+  }
+  return count;
+}
diff --git a/packages/animations/browser/src/render/shared.ts b/packages/animations/browser/src/render/shared.ts
new file mode 100644
index 000000000000..7027805b46fb
--- /dev/null
+++ b/packages/animations/browser/src/render/shared.ts
@@ -0,0 +1,225 @@
+/**
+ * @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 isBrowser() {
+  return (typeof window !== 'undefined' && typeof window.document !== 'undefined');
+}
+
+export function isNode() {
+  return (typeof process !== 'undefined');
+}
+
+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)));
+      break;
+    case 'done':
+      player.onDone(() => callback(event && copyAnimationEvent(event, 'done', player)));
+      break;
+    case 'destroy':
+      player.onDestroy(() => callback(event && copyAnimationEvent(event, 'destroy', player)));
+      break;
+  }
+}
+
+export function copyAnimationEvent(
+    e: AnimationEvent, phaseName: string, player: AnimationPlayer): AnimationEvent {
+  const totalTime = player.totalTime;
+  const disabled = (player as any).disabled ? true : false;
+  const event = makeAnimationEvent(
+      e.element, e.triggerName, e.fromState, e.toState, phaseName || e.phaseName,
+      totalTime == undefined ? e.totalTime : totalTime, disabled);
+  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, disabled?: boolean): AnimationEvent {
+  return {element, triggerName, fromState, toState, phaseName, totalTime, disabled: !!disabled};
+}
+
+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 [];
+    };
+
+// Define utility methods for browsers and platform-server(domino) where Element
+// and utility methods exist.
+const _isNode = isNode();
+if (_isNode || typeof Element !== 'undefined') {
+  // this is well supported in all browsers
+  _contains = (elm1: any, elm2: any) => { return elm1.contains(elm2) as boolean; };
+
+  if (_isNode || 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;
+  };
+}
+
+function containsVendorPrefix(prop: string): boolean {
+  // Webkit is the only real popular vendor prefix nowadays
+  // cc: http://shouldiprefix.com/
+  return prop.substring(1, 6) == 'ebkit';  // webkit or Webkit
+}
+
+let _CACHED_BODY: {style: any}|null = null;
+let _IS_WEBKIT = false;
+export function validateStyleProperty(prop: string): boolean {
+  if (!_CACHED_BODY) {
+    _CACHED_BODY = getBodyNode() || {};
+    _IS_WEBKIT = _CACHED_BODY !.style ? ('WebkitAppearance' in _CACHED_BODY !.style) : false;
+  }
+
+  let result = true;
+  if (_CACHED_BODY !.style && !containsVendorPrefix(prop)) {
+    result = prop in _CACHED_BODY !.style;
+    if (!result && _IS_WEBKIT) {
+      const camelProp = 'Webkit' + prop.charAt(0).toUpperCase() + prop.substr(1);
+      result = camelProp in _CACHED_BODY !.style;
+    }
+  }
+
+  return result;
+}
+
+export function getBodyNode(): any|null {
+  if (typeof document != 'undefined') {
+    return document.body;
+  }
+  return null;
+}
+
+export const matchesElement = _matches;
+export const containsElement = _contains;
+export const invokeQuery = _query;
+
+export function hypenatePropsObject(object: {[key: string]: any}): {[key: string]: any} {
+  const newObj: {[key: string]: any} = {};
+  Object.keys(object).forEach(prop => {
+    const newProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2');
+    newObj[newProp] = object[prop];
+  });
+  return newObj;
+}
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 000000000000..d83ad5022320
--- /dev/null
+++ b/packages/animations/browser/src/render/timeline_animation_engine.ts
@@ -0,0 +1,160 @@
+/**
+ * @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, AnimationMetadataType, 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 {ENTER_CLASSNAME, LEAVE_CLASSNAME} from '../util';
+
+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<AnimationMetadataType>} = {};
+  private _playersById: {[id: string]: AnimationPlayer} = {};
+  public players: AnimationPlayer[] = [];
+
+  constructor(
+      public bodyNode: any, private _driver: AnimationDriver,
+      private _normalizer: AnimationStyleNormalizer) {}
+
+  register(id: string, metadata: AnimationMetadata|AnimationMetadata[]) {
+    const errors: any[] = [];
+    const ast = buildAnimationAst(this._driver, 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, [], true);
+  }
+
+  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, ENTER_CLASSNAME, LEAVE_CLASSNAME, {}, {}, 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 000000000000..2d1222936aad
--- /dev/null
+++ b/packages/animations/browser/src/render/transition_animation_engine.ts
@@ -0,0 +1,1736 @@
+/**
+ * @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, iteratorToArray, 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 STAR_CLASSNAME = 'ng-star-inserted';
+const STAR_SELECTOR = '.ng-star-inserted';
+
+const EMPTY_PLAYER_ARRAY: TransitionAnimationPlayer[] = [];
+const NULL_REMOVAL_STATE: ElementAnimationState = {
+  namespaceId: '',
+  setForRemoval: false,
+  setForMove: false,
+  hasAnimation: false,
+  removedBeforeQueried: false
+};
+const NULL_REMOVED_QUERIED_STATE: ElementAnimationState = {
+  namespaceId: '',
+  setForMove: false,
+  setForRemoval: false,
+  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: boolean;
+  setForMove: boolean;
+  hasAnimation: boolean;
+  namespaceId: string;
+  removedBeforeQueried: boolean;
+}
+
+export class StateValue {
+  public value: string;
+  public options: AnimationOptions;
+
+  get params(): {[key: string]: any} { return this.options.params as{[key: string]: any}; }
+
+  constructor(input: any, public namespaceId: string = '') {
+    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 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] = DEFAULT_STATE_VALUE;
+    }
+
+    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, this.id);
+
+    const isObj = value && value.hasOwnProperty('value');
+    if (!isObj && fromState) {
+      toState.absorbOptions(fromState.options);
+    }
+
+    triggersWithStates[triggerName] = toState;
+
+    if (!fromState) {
+      fromState = DEFAULT_STATE_VALUE;
+    }
+
+    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) {
+      // this means that despite the value not changing, some inner params
+      // have changed which means that the animation final styles need to be applied
+      if (!objEquals(fromState.params, toState.params)) {
+        const errors: any[] = [];
+        const fromStyles = trigger.matchStyles(fromState.value, fromState.params, errors);
+        const toStyles = trigger.matchStyles(toState.value, toState.params, errors);
+        if (errors.length) {
+          this._engine.reportError(errors);
+        } else {
+          this._engine.afterFlush(() => {
+            eraseStyles(element, fromStyles);
+            setStyles(element, toStyles);
+          });
+        }
+      }
+      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, element, toState.params);
+    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 _signalRemovalForInnerTriggers(rootElement: any, context: any, animate: boolean = false) {
+    // emulate a leave animation for all inner nodes within this node.
+    // If there are no animations found for any of the nodes then clear the cache
+    // for the element.
+    this._engine.driver.query(rootElement, NG_TRIGGER_SELECTOR, true).forEach(elm => {
+      // this means that an inner remove() operation has already kicked off
+      // the animation on this element...
+      if (elm[REMOVAL_FLAG]) return;
+
+      const namespaces = this._engine.fetchNamespacesByElement(elm);
+      if (namespaces.size) {
+        namespaces.forEach(ns => ns.triggerLeaveAnimation(elm, context, false, true));
+      } else {
+        this.clearElementCache(elm);
+      }
+    });
+  }
+
+  triggerLeaveAnimation(
+      element: any, context: any, destroyAfterComplete?: boolean,
+      defaultToFallback?: boolean): boolean {
+    const triggerStates = this._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, defaultToFallback);
+          if (player) {
+            players.push(player);
+          }
+        }
+      });
+
+      if (players.length) {
+        this._engine.markElementAsRemoved(this.id, element, true, context);
+        if (destroyAfterComplete) {
+          optimizeGroupPlayer(players).onDone(() => this._engine.processLeaveNode(element));
+        }
+        return true;
+      }
+    }
+    return false;
+  }
+
+  prepareLeaveAnimationListeners(element: any) {
+    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 = this._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
+        });
+      });
+    }
+  }
+
+  removeNode(element: any, context: any): void {
+    const engine = this._engine;
+
+    if (element.childElementCount) {
+      this._signalRemovalForInnerTriggers(element, context, true);
+    }
+
+    // this means that a * => VOID animation was detected and kicked off
+    if (this.triggerLeaveAnimation(element, context, true)) 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 forwards 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)
+    this.prepareLeaveAnimationListeners(element);
+
+    // 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._signalRemovalForInnerTriggers(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) => {};
+
+  /** @internal */
+  _onRemovalComplete(element: any, context: any) { this.onRemovalComplete(element, context); }
+
+  constructor(
+      public bodyNode: any, 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]; }
+
+  fetchNamespacesByElement(element: any): Set<AnimationTransitionNamespace> {
+    // normally there should only be one namespace per element, however
+    // if @triggers are placed on both the component element and then
+    // its host element (within the component code) then there will be
+    // two namespaces returned. We use a set here to simply the dedupe
+    // of namespaces incase there are multiple triggers both the elm and host
+    const namespaces = new Set<AnimationTransitionNamespace>();
+    const elementStates = this.statesByElement.get(element);
+    if (elementStates) {
+      const keys = Object.keys(elementStates);
+      for (let i = 0; i < keys.length; i++) {
+        const nsId = elementStates[keys[i]].namespaceId;
+        if (nsId) {
+          const ns = this._fetchNamespace(nsId);
+          if (ns) {
+            namespaces.add(ns);
+          }
+        }
+      }
+    }
+    return namespaces;
+  }
+
+  trigger(namespaceId: string, element: any, name: string, value: any): boolean {
+    if (isElementNode(element)) {
+      const ns = this._fetchNamespace(namespaceId);
+      if (ns) {
+        ns.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;
+      details.setForMove = true;
+      const index = this.collectedLeaveElements.indexOf(element);
+      if (index >= 0) {
+        this.collectedLeaveElements.splice(index, 1);
+      }
+    }
+
+    // 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) {
+      const ns = this._fetchNamespace(namespaceId);
+      // This if-statement is a workaround for router issue #21947.
+      // The router sometimes hits a race condition where while a route
+      // is being instantiated a new navigation arrives, triggering leave
+      // animation of DOM that has not been fully initialized, until this
+      // is resolved, we need to handle the scenario when DOM is not in a
+      // consistent state during the animation.
+      if (ns) {
+        ns.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): void {
+    if (!isElementNode(element)) {
+      this._onRemovalComplete(element, context);
+      return;
+    }
+
+    const ns = namespaceId ? this._fetchNamespace(namespaceId) : null;
+    if (ns) {
+      ns.removeNode(element, context);
+    } 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, enterClassName: string,
+      leaveClassName: string, skipBuildAst?: boolean) {
+    return entry.transition.build(
+        this.driver, entry.element, entry.fromState.value, entry.toState.value, enterClassName,
+        leaveClassName, entry.fromState.options, entry.toState.options, subTimelines, skipBuildAst);
+  }
+
+  destroyInnerAnimations(containerElement: any) {
+    let elements = this.driver.query(containerElement, NG_TRIGGER_SELECTOR, true);
+    elements.forEach(element => this.destroyActiveAnimationsForElement(element));
+
+    if (this.playersByQueriedElement.size == 0) return;
+
+    elements = this.driver.query(containerElement, NG_ANIMATING_SELECTOR, true);
+    elements.forEach(element => this.finishActiveQueriedAnimationOnElement(element));
+  }
+
+  destroyActiveAnimationsForElement(element: any) {
+    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();
+        }
+      });
+    }
+  }
+
+  finishActiveQueriedAnimationOnElement(element: any) {
+    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.totalAnimations && this.collectedEnterElements.length) {
+      for (let i = 0; i < this.collectedEnterElements.length; i++) {
+        const elm = this.collectedEnterElements[i];
+        addClass(elm, STAR_CLASSNAME);
+      }
+    }
+
+    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());
+      }
+    }
+  }
+
+  reportError(errors: string[]) {
+    throw new Error(
+        `Unable to process animations due to the following failed trigger transitions\n ${
+            errors.join('\n')}`);
+  }
+
+  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 => {
+      disabledElementsSet.add(node);
+      const nodesThatAreDisabled = this.driver.query(node, QUEUED_SELECTOR, true);
+      for (let i = 0; i < nodesThatAreDisabled.length; i++) {
+        disabledElementsSet.add(nodesThatAreDisabled[i]);
+      }
+    });
+
+    const bodyNode = this.bodyNode;
+    const allTriggerElements = Array.from(this.statesByElement.keys());
+    const enterNodeMap = buildRootMap(allTriggerElements, 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).
+    const enterNodeMapIds = new Map<any, string>();
+    let i = 0;
+    enterNodeMap.forEach((nodes, root) => {
+      const className = ENTER_CLASSNAME + i++;
+      enterNodeMapIds.set(root, className);
+      nodes.forEach(node => addClass(node, className));
+    });
+
+    const allLeaveNodes: any[] = [];
+    const mergedLeaveNodes = new Set<any>();
+    const leaveNodesWithoutAnimations = new Set<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) {
+        allLeaveNodes.push(element);
+        mergedLeaveNodes.add(element);
+        if (details.hasAnimation) {
+          this.driver.query(element, STAR_SELECTOR, true).forEach(elm => mergedLeaveNodes.add(elm));
+        } else {
+          leaveNodesWithoutAnimations.add(element);
+        }
+      }
+    }
+
+    const leaveNodeMapIds = new Map<any, string>();
+    const leaveNodeMap = buildRootMap(allTriggerElements, Array.from(mergedLeaveNodes));
+    leaveNodeMap.forEach((nodes, root) => {
+      const className = LEAVE_CLASSNAME + i++;
+      leaveNodeMapIds.set(root, className);
+      nodes.forEach(node => addClass(node, className));
+    });
+
+    cleanupFns.push(() => {
+      enterNodeMap.forEach((nodes, root) => {
+        const className = enterNodeMapIds.get(root) !;
+        nodes.forEach(node => removeClass(node, className));
+      });
+
+      leaveNodeMap.forEach((nodes, root) => {
+        const className = leaveNodeMapIds.get(root) !;
+        nodes.forEach(node => removeClass(node, className));
+      });
+
+      allLeaveNodes.forEach(element => { 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;
+        const element = entry.element;
+        allPlayers.push(player);
+
+        if (this.collectedEnterElements.length) {
+          const details = element[REMOVAL_FLAG] as ElementAnimationState;
+          // move animations are currently not supported...
+          if (details && details.setForMove) {
+            player.destroy();
+            return;
+          }
+        }
+
+        const nodeIsOrphaned = !bodyNode || !this.driver.containsElement(bodyNode, element);
+        const leaveClassName = leaveNodeMapIds.get(element) !;
+        const enterClassName = enterNodeMapIds.get(element) !;
+        const instruction = this._buildInstruction(
+            entry, subTimelines, enterClassName, leaveClassName, nodeIsOrphaned) !;
+        if (instruction.errors && instruction.errors.length) {
+          erroneousTransitions.push(instruction);
+          return;
+        }
+
+        // even though the element may not be apart of the DOM, it may
+        // still be added at a later point (due to the mechanics of content
+        // projection and/or dynamic component insertion) therefore it's
+        // important we still style the element.
+        if (nodeIsOrphaned) {
+          player.onStart(() => eraseStyles(element, instruction.fromStyles));
+          player.onDestroy(() => setStyles(element, instruction.toStyles));
+          skippedPlayers.push(player);
+          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) {
+      const errors: string[] = [];
+      erroneousTransitions.forEach(instruction => {
+        errors.push(`@${instruction.triggerName} has failed due to:\n`);
+        instruction.errors !.forEach(error => errors.push(`- ${error}\n`));
+      });
+
+      allPlayers.forEach(player => player.destroy());
+      this.reportError(errors);
+    }
+
+    const allPreviousPlayersMap = new Map<any, TransitionAnimationPlayer[]>();
+    // this map works to tell which element in the DOM tree is contained by
+    // which animation. Further down below this map will get populated once
+    // the players are built and in doing so it can efficiently figure out
+    // if a sub player is skipped due to a parent player having priority.
+    const animationElementMap = new Map<any, any>();
+    queuedInstructions.forEach(entry => {
+      const element = entry.element;
+      if (subTimelines.has(element)) {
+        animationElementMap.set(element, 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);
+        prevPlayer.destroy();
+      });
+    });
+
+    // this is a special case for nodes that will be removed (either by)
+    // having their own leave animations or by being queried in a container
+    // that will be removed once a parent animation is complete. The idea
+    // here is that * styles must be identical to ! styles because of
+    // backwards compatibility (* is also filled in by default in many places).
+    // Otherwise * styles will return an empty value or auto since the element
+    // that is being getComputedStyle'd will not be visible (since * = destination)
+    const replaceNodes = allLeaveNodes.filter(node => {
+      return replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements);
+    });
+
+    // POST STAGE: fill the * styles
+    const postStylesMap = new Map<any, ɵStyleData>();
+    const allLeaveQueriedNodes = cloakAndComputeStyles(
+        postStylesMap, this.driver, leaveNodesWithoutAnimations, allPostStyleElements, AUTO_STYLE);
+
+    allLeaveQueriedNodes.forEach(node => {
+      if (replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements)) {
+        replaceNodes.push(node);
+      }
+    });
+
+    // PRE STAGE: fill the ! styles
+    const preStylesMap = new Map<any, ɵStyleData>();
+    enterNodeMap.forEach((nodes, root) => {
+      cloakAndComputeStyles(
+          preStylesMap, this.driver, new Set(nodes), allPreStyleElements, PRE_STYLE);
+    });
+
+    replaceNodes.forEach(node => {
+      const post = postStylesMap.get(node);
+      const pre = preStylesMap.get(node);
+      postStylesMap.set(node, { ...post, ...pre } as any);
+    });
+
+    const rootPlayers: TransitionAnimationPlayer[] = [];
+    const subPlayers: TransitionAnimationPlayer[] = [];
+    const NO_PARENT_ANIMATION_ELEMENT_DETECTED = {};
+    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)) {
+          player.onDestroy(() => setStyles(element, instruction.toStyles));
+          player.disabled = true;
+          player.overrideTotalTime(instruction.totalTime);
+          skippedPlayers.push(player);
+          return;
+        }
+
+        // this will flow up the DOM and query the map to figure out
+        // if a parent animation has priority over it. In the situation
+        // that a parent is detected then it will cancel the loop. If
+        // nothing is detected, or it takes a few hops to find a parent,
+        // then it will fill in the missing nodes and signal them as having
+        // a detected parent (or a NO_PARENT value via a special constant).
+        let parentWithAnimation: any = NO_PARENT_ANIMATION_ELEMENT_DETECTED;
+        if (animationElementMap.size > 1) {
+          let elm = element;
+          const parentsToAdd: any[] = [];
+          while (elm = elm.parentNode) {
+            const detectedParent = animationElementMap.get(elm);
+            if (detectedParent) {
+              parentWithAnimation = detectedParent;
+              break;
+            }
+            parentsToAdd.push(elm);
+          }
+          parentsToAdd.forEach(parent => animationElementMap.set(parent, parentWithAnimation));
+        }
+
+        const innerPlayer = this._buildAnimation(
+            player.namespaceId, instruction, allPreviousPlayersMap, skippedPlayersMap, preStylesMap,
+            postStylesMap);
+
+        player.setRealPlayer(innerPlayer);
+
+        if (parentWithAnimation === NO_PARENT_ANIMATION_ELEMENT_DETECTED) {
+          rootPlayers.push(player);
+        } else {
+          const parentPlayers = this.playersByElement.get(parentWithAnimation);
+          if (parentPlayers && parentPlayers.length) {
+            player.parentPlayer = optimizeGroupPlayer(parentPlayers);
+          }
+          skippedPlayers.push(player);
+        }
+      } else {
+        eraseStyles(element, instruction.fromStyles);
+        player.onDestroy(() => setStyles(element, instruction.toStyles));
+        // there still might be a ancestor player animating this
+        // element therefore we will still add it as a sub player
+        // even if its animation may be disabled
+        subPlayers.push(player);
+        if (disabledElementsSet.has(element)) {
+          skippedPlayers.push(player);
+        }
+      }
+    });
+
+    // find all of the sub players' corresponding inner animation player
+    subPlayers.forEach(player => {
+      // even if any players are not found for a sub animation then it
+      // will still complete itself after the next tick since it's Noop
+      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.syncPlayerEvents(player.parentPlayer);
+      } 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: TransitionAnimationPlayer[] = [];
+
+      // 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);
+          }
+        }
+      }
+
+      const activePlayers = players.filter(p => !p.destroyed);
+      if (activePlayers.length) {
+        removeNodesAfterAnimationDone(this, element, activePlayers);
+      } 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[]>) {
+    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;
+
+    for (const timelineInstruction of instruction.timelines) {
+      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();
+        }
+        player.destroy();
+        players.push(player);
+      });
+    }
+
+    // this needs to be done so that the PRE/POST styles can be
+    // computed properly without interfering with the previous animation
+    eraseStyles(rootElement, instruction.fromStyles);
+  }
+
+  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(timelineInstruction.duration, timelineInstruction.delay);
+
+      const isQueriedElement = element !== rootElement;
+      const previousPlayers =
+          flattenGroupPlayers((allPreviousPlayersMap.get(element) || EMPTY_PLAYER_ARRAY)
+                                  .map(p => p.getRealPlayer()))
+              .filter(p => {
+                // the `element` is not apart of the AnimationPlayer definition, but
+                // Mock/WebAnimations
+                // use the element within their implementation. This will be added in Angular5 to
+                // AnimationPlayer
+                const pp = p as any;
+                return pp.element ? pp.element === element : false;
+              });
+
+      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(instruction.duration, instruction.delay);
+  }
+}
+
+export class TransitionAnimationPlayer implements AnimationPlayer {
+  private _player: AnimationPlayer = new NoopAnimationPlayer();
+  private _containsRealPlayer = false;
+
+  private _queuedCallbacks: {[name: string]: (() => any)[]} = {};
+  public readonly destroyed = false;
+  // TODO(issue/24571): remove '!'.
+  public parentPlayer !: AnimationPlayer;
+
+  public markedForDestroy: boolean = false;
+  public disabled = false;
+
+  readonly queued: boolean = true;
+  public readonly totalTime: number = 0;
+
+  constructor(public namespaceId: string, public triggerName: string, public element: any) {}
+
+  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;
+    this.overrideTotalTime(player.totalTime);
+    (this as{queued: boolean}).queued = false;
+  }
+
+  getRealPlayer() { return this._player; }
+
+  overrideTotalTime(totalTime: number) { (this as any).totalTime = totalTime; }
+
+  syncPlayerEvents(player: AnimationPlayer) {
+    const p = this._player as any;
+    if (p.triggerCallback) {
+      player.onStart(() => p.triggerCallback !('start'));
+    }
+    player.onDone(() => this.finish());
+    player.onDestroy(() => this.destroy());
+  }
+
+  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 as{destroyed: boolean}).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(); }
+
+  /** @internal */
+  triggerCallback(phaseName: string): void {
+    const p = this._player as any;
+    if (p.triggerCallback) {
+      p.triggerCallback(phaseName);
+    }
+  }
+}
+
+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): any {
+  // we use `!= null` here because it's the most simple
+  // way to test against a "falsy" value without mixing
+  // in empty strings or a zero value. DO NOT OPTIMIZE.
+  return value != null ? value : 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(
+    valuesMap: Map<any, ɵStyleData>, driver: AnimationDriver, elements: Set<any>,
+    elementPropsMap: Map<any, Set<string>>, defaultStyle: string): any[] {
+  const cloakVals: string[] = [];
+  elements.forEach(element => cloakVals.push(cloakElement(element)));
+
+  const failedElements: any[] = [];
+
+  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;
+        failedElements.push(element);
+      }
+    });
+    valuesMap.set(element, styles);
+  });
+
+  // we use a index variable here since Set.forEach(a, i) does not return
+  // an index value for the closure (but instead just the value)
+  let i = 0;
+  elements.forEach(element => cloakElement(element, cloakVals[i++]));
+
+  return failedElements;
+}
+
+/*
+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 for each animation @trigger.
+
+By placing each inserted node into a Set and traversing upwards, it
+is possible to find the @trigger elements and well any direct *star
+insertion nodes, if a @trigger root is found then the enter element
+is placed into the Map[@trigger] spot.
+ */
+function buildRootMap(roots: any[], nodes: any[]): Map<any, any[]> {
+  const rootMap = new Map<any, any[]>();
+  roots.forEach(root => rootMap.set(root, []));
+
+  if (nodes.length == 0) return rootMap;
+
+  const NULL_NODE = 1;
+  const nodeSet = new Set(nodes);
+  const localRootMap = new Map<any, any>();
+
+  function getRoot(node: any): any {
+    if (!node) return NULL_NODE;
+
+    let root = localRootMap.get(node);
+    if (root) return root;
+
+    const parent = node.parentNode;
+    if (rootMap.has(parent)) {  // ngIf inside @trigger
+      root = parent;
+    } else if (nodeSet.has(parent)) {  // ngIf inside ngIf
+      root = NULL_NODE;
+    } else {  // recurse upwards
+      root = getRoot(parent);
+    }
+
+    localRootMap.set(node, root);
+    return root;
+  }
+
+  nodes.forEach(node => {
+    const root = getRoot(node);
+    if (root !== NULL_NODE) {
+      rootMap.get(root) !.push(node);
+    }
+  });
+
+  return rootMap;
+}
+
+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 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);
+    }
+  }
+}
+
+function objEquals(a: {[key: string]: any}, b: {[key: string]: any}): boolean {
+  const k1 = Object.keys(a);
+  const k2 = Object.keys(b);
+  if (k1.length != k2.length) return false;
+  for (let i = 0; i < k1.length; i++) {
+    const prop = k1[i];
+    if (!b.hasOwnProperty(prop) || a[prop] !== b[prop]) return false;
+  }
+  return true;
+}
+
+function replacePostStylesAsPre(
+    element: any, allPreStyleElements: Map<any, Set<string>>,
+    allPostStyleElements: Map<any, Set<string>>): boolean {
+  const postEntry = allPostStyleElements.get(element);
+  if (!postEntry) return false;
+
+  let preEntry = allPreStyleElements.get(element);
+  if (preEntry) {
+    postEntry.forEach(data => preEntry !.add(data));
+  } else {
+    allPreStyleElements.set(element, postEntry);
+  }
+
+  allPostStyleElements.delete(element);
+  return true;
+}
diff --git a/packages/animations/browser/src/render/web_animations/dom_animation.ts b/packages/animations/browser/src/render/web_animations/dom_animation.ts
new file mode 100644
index 000000000000..f1d825af3416
--- /dev/null
+++ b/packages/animations/browser/src/render/web_animations/dom_animation.ts
@@ -0,0 +1,27 @@
+/**
+ * @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
+ */
+
+/**
+ * DOMAnimation represents the Animation Web API.
+ *
+ * It is an external API by the browser, and must thus use "declare interface",
+ * to prevent renaming by Closure Compiler.
+ *
+ * @see https://developer.mozilla.org/de/docs/Web/API/Animation
+ */
+export declare interface DOMAnimation {
+  cancel(): void;
+  play(): void;
+  pause(): void;
+  finish(): void;
+  onfinish: Function;
+  position: number;
+  currentTime: number;
+  addEventListener(eventName: string, handler: (event: any) => any): any;
+  dispatchEvent(eventName: string): any;
+}
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
new file mode 100644
index 000000000000..2d2e81c2f97e
--- /dev/null
+++ b/packages/animations/browser/src/render/web_animations/web_animations_driver.ts
@@ -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 {AnimationPlayer, ɵStyleData} from '@angular/animations';
+
+import {allowPreviousPlayerStylesMerge, balancePreviousStylesIntoKeyframes, copyStyles} from '../../util';
+import {AnimationDriver} from '../animation_driver';
+import {CssKeyframesDriver} from '../css_keyframes/css_keyframes_driver';
+import {containsElement, invokeQuery, isBrowser, matchesElement, validateStyleProperty} from '../shared';
+
+import {WebAnimationsPlayer} from './web_animations_player';
+
+export class WebAnimationsDriver implements AnimationDriver {
+  private _isNativeImpl = /\{\s*\[native\s+code\]\s*\}/.test(getElementAnimateFn().toString());
+  private _cssKeyframesDriver = new CssKeyframesDriver();
+
+  validateStyleProperty(prop: string): boolean { return validateStyleProperty(prop); }
+
+  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;
+  }
+
+  overrideWebAnimationsSupport(supported: boolean) { this._isNativeImpl = supported; }
+
+  animate(
+      element: any, keyframes: ɵStyleData[], duration: number, delay: number, easing: string,
+      previousPlayers: AnimationPlayer[] = [], scrubberAccessRequested?: boolean): AnimationPlayer {
+    const useKeyframes = !scrubberAccessRequested && !this._isNativeImpl;
+    if (useKeyframes) {
+      return this._cssKeyframesDriver.animate(
+          element, keyframes, duration, delay, easing, previousPlayers);
+    }
+
+    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)
+    if (easing) {
+      playerOptions['easing'] = easing;
+    }
+
+    const previousStyles: {[key: string]: any} = {};
+    const previousWebAnimationPlayers = <WebAnimationsPlayer[]>previousPlayers.filter(
+        player => player instanceof WebAnimationsPlayer);
+
+    if (allowPreviousPlayerStylesMerge(duration, delay)) {
+      previousWebAnimationPlayers.forEach(player => {
+        let styles = player.currentSnapshot;
+        Object.keys(styles).forEach(prop => previousStyles[prop] = styles[prop]);
+      });
+    }
+
+    keyframes = keyframes.map(styles => copyStyles(styles, false));
+    keyframes = balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles);
+    return new WebAnimationsPlayer(element, keyframes, playerOptions);
+  }
+}
+
+export function supportsWebAnimations() {
+  return typeof getElementAnimateFn() === 'function';
+}
+
+function getElementAnimateFn(): any {
+  return (isBrowser() && (<any>Element).prototype['animate']) || {};
+}
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
new file mode 100644
index 000000000000..441a6b244bff
--- /dev/null
+++ b/packages/animations/browser/src/render/web_animations/web_animations_player.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 {AnimationPlayer} from '@angular/animations';
+
+import {allowPreviousPlayerStylesMerge, balancePreviousStylesIntoKeyframes, computeStyle, copyStyles} from '../../util';
+
+import {DOMAnimation} from './dom_animation';
+
+export class WebAnimationsPlayer implements AnimationPlayer {
+  private _onDoneFns: Function[] = [];
+  private _onStartFns: Function[] = [];
+  private _onDestroyFns: Function[] = [];
+  private _duration: number;
+  private _delay: number;
+  private _initialized = false;
+  private _finished = false;
+  private _started = false;
+  private _destroyed = false;
+  // TODO(issue/24571): remove '!'.
+  private _finalKeyframe !: {[key: string]: string | number};
+
+  // TODO(issue/24571): remove '!'.
+  public readonly domPlayer !: DOMAnimation;
+  public time = 0;
+
+  public parentPlayer: AnimationPlayer|null = null;
+  public currentSnapshot: {[styleName: string]: string | number} = {};
+
+  constructor(
+      public element: any, public keyframes: {[key: string]: string | number}[],
+      public options: {[key: string]: string | number}) {
+    this._duration = <number>options['duration'];
+    this._delay = <number>options['delay'] || 0;
+    this.time = this._duration + this._delay;
+  }
+
+  private _onFinish() {
+    if (!this._finished) {
+      this._finished = true;
+      this._onDoneFns.forEach(fn => fn());
+      this._onDoneFns = [];
+    }
+  }
+
+  init(): void {
+    this._buildPlayer();
+    this._preparePlayerBeforeStart();
+  }
+
+  private _buildPlayer(): void {
+    if (this._initialized) return;
+    this._initialized = true;
+
+    const keyframes = this.keyframes;
+    (this as{domPlayer: DOMAnimation}).domPlayer =
+        this._triggerWebAnimation(this.element, keyframes, this.options);
+    this._finalKeyframe = keyframes.length ? keyframes[keyframes.length - 1] : {};
+    this.domPlayer.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.domPlayer.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
+    // supported yet across common browsers (we polyfill it for Edge/Safari) [CL #143630929]
+    return element['animate'](keyframes, options) as DOMAnimation;
+  }
+
+  onStart(fn: () => void): void { this._onStartFns.push(fn); }
+
+  onDone(fn: () => void): void { this._onDoneFns.push(fn); }
+
+  onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
+
+  play(): void {
+    this._buildPlayer();
+    if (!this.hasStarted()) {
+      this._onStartFns.forEach(fn => fn());
+      this._onStartFns = [];
+      this._started = true;
+    }
+    this.domPlayer.play();
+  }
+
+  pause(): void {
+    this.init();
+    this.domPlayer.pause();
+  }
+
+  finish(): void {
+    this.init();
+    this._onFinish();
+    this.domPlayer.finish();
+  }
+
+  reset(): void {
+    this._resetDomPlayerState();
+    this._destroyed = false;
+    this._finished = false;
+    this._started = false;
+  }
+
+  private _resetDomPlayerState() {
+    if (this.domPlayer) {
+      this.domPlayer.cancel();
+    }
+  }
+
+  restart(): void {
+    this.reset();
+    this.play();
+  }
+
+  hasStarted(): boolean { return this._started; }
+
+  destroy(): void {
+    if (!this._destroyed) {
+      this._destroyed = true;
+      this._resetDomPlayerState();
+      this._onFinish();
+      this._onDestroyFns.forEach(fn => fn());
+      this._onDestroyFns = [];
+    }
+  }
+
+  setPosition(p: number): void { this.domPlayer.currentTime = p * this.time; }
+
+  getPosition(): number { return this.domPlayer.currentTime / this.time; }
+
+  get totalTime(): number { return this._delay + this._duration; }
+
+  beforeDestroy() {
+    const styles: {[key: string]: string | number} = {};
+    if (this.hasStarted()) {
+      Object.keys(this._finalKeyframe).forEach(prop => {
+        if (prop != 'offset') {
+          styles[prop] =
+              this._finished ? this._finalKeyframe[prop] : computeStyle(this.element, prop);
+        }
+      });
+    }
+    this.currentSnapshot = styles;
+  }
+
+  /** @internal */
+  triggerCallback(phaseName: string): void {
+    const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
+    methods.forEach(fn => fn());
+    methods.length = 0;
+  }
+}
diff --git a/packages/animations/browser/src/util.ts b/packages/animations/browser/src/util.ts
new file mode 100644
index 000000000000..0fe31caf4fa5
--- /dev/null
+++ b/packages/animations/browser/src/util.ts
@@ -0,0 +1,345 @@
+/**
+ * @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, AnimationMetadata, AnimationMetadataType, AnimationOptions, sequence, ɵStyleData} from '@angular/animations';
+import {Ast as AnimationAst, AstVisitor as AnimationAstVisitor} from './dsl/animation_ast';
+import {AnimationDslVisitor} from './dsl/animation_dsl_visitor';
+import {isNode} from './render/shared';
+
+export const ONE_SECOND = 1000;
+
+export const SUBSTITUTION_EXPR_START = '{{';
+export const SUBSTITUTION_EXPR_END = '}}';
+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 = '';
+  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: ''};
+    }
+
+    duration = _convertTimeValueToMS(parseFloat(matches[1]), matches[2]);
+
+    const delayMatch = matches[3];
+    if (delayMatch != null) {
+      delay = _convertTimeValueToMS(Math.floor(parseFloat(delayMatch)), matches[4]);
+    }
+
+    const easingVal = matches[5];
+    if (easingVal) {
+      easing = easingVal;
+    }
+  } else {
+    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)) {
+    styles.forEach(data => copyStyles(data, false, normalizedStyles));
+  } else {
+    copyStyles(styles, false, normalizedStyles);
+  }
+  return normalizedStyles;
+}
+
+export function copyStyles(
+    styles: ɵStyleData, readPrototype: boolean, destination: ɵStyleData = {}): ɵStyleData {
+  if (readPrototype) {
+    // we make use of a for-in loop so that the
+    // prototypically inherited properties are
+    // revealed from the backFill map
+    for (let prop in styles) {
+      destination[prop] = styles[prop];
+    }
+  } else {
+    copyObj(styles, destination);
+  }
+  return destination;
+}
+
+function getStyleAttributeString(element: any, key: string, value: string) {
+  // Return the key-value pair string to be added to the style attribute for the
+  // given CSS style key.
+  if (value) {
+    return key + ':' + value + ';';
+  } else {
+    return '';
+  }
+}
+
+function writeStyleAttribute(element: any) {
+  // Read the style property of the element and manually reflect it to the
+  // style attribute. This is needed because Domino on platform-server doesn't
+  // understand the full set of allowed CSS properties and doesn't reflect some
+  // of them automatically.
+  let styleAttrValue = '';
+  for (let i = 0; i < element.style.length; i++) {
+    const key = element.style.item(i);
+    styleAttrValue += getStyleAttributeString(element, key, element.style.getPropertyValue(key));
+  }
+  for (const key in element.style) {
+    // Skip internal Domino properties that don't need to be reflected.
+    if (!element.style.hasOwnProperty(key) || key.startsWith('_')) {
+      continue;
+    }
+    const dashKey = camelCaseToDashCase(key);
+    styleAttrValue += getStyleAttributeString(element, dashKey, element.style[key]);
+  }
+  element.setAttribute('style', styleAttrValue);
+}
+
+export function setStyles(element: any, styles: ɵStyleData) {
+  if (element['style']) {
+    Object.keys(styles).forEach(prop => {
+      const camelProp = dashCaseToCamelCase(prop);
+      element.style[camelProp] = styles[prop];
+    });
+    // On the server set the 'style' attribute since it's not automatically reflected.
+    if (isNode()) {
+      writeStyleAttribute(element);
+    }
+  }
+}
+
+export function eraseStyles(element: any, styles: ɵStyleData) {
+  if (element['style']) {
+    Object.keys(styles).forEach(prop => {
+      const camelProp = dashCaseToCamelCase(prop);
+      element.style[camelProp] = '';
+    });
+    // On the server set the 'style' attribute since it's not automatically reflected.
+    if (isNode()) {
+      writeStyleAttribute(element);
+    }
+  }
+}
+
+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 || {};
+  const matches = extractStyleParams(value);
+  if (matches.length) {
+    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 =
+    new RegExp(`${SUBSTITUTION_EXPR_START}\\s*(.+?)\\s*${SUBSTITUTION_EXPR_END}`, 'g');
+export function extractStyleParams(value: string | number): string[] {
+  let params: string[] = [];
+  if (typeof value === 'string') {
+    const val = value.toString();
+
+    let match: any;
+    while (match = PARAM_REGEX.exec(val)) {
+      params.push(match[1] as string);
+    }
+    PARAM_REGEX.lastIndex = 0;
+  }
+  return params;
+}
+
+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 overridden 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());
+}
+
+function camelCaseToDashCase(input: string): string {
+  return input.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+export function allowPreviousPlayerStylesMerge(duration: number, delay: number) {
+  return duration === 0 || delay === 0;
+}
+
+export function balancePreviousStylesIntoKeyframes(
+    element: any, keyframes: {[key: string]: any}[], previousStyles: {[key: string]: any}) {
+  const previousStyleProps = Object.keys(previousStyles);
+  if (previousStyleProps.length && keyframes.length) {
+    let startingKeyframe = keyframes[0];
+    let missingStyleProps: string[] = [];
+    previousStyleProps.forEach(prop => {
+      if (!startingKeyframe.hasOwnProperty(prop)) {
+        missingStyleProps.push(prop);
+      }
+      startingKeyframe[prop] = previousStyles[prop];
+    });
+
+    if (missingStyleProps.length) {
+      // tslint:disable-next-line
+      for (var i = 1; i < keyframes.length; i++) {
+        let kf = keyframes[i];
+        missingStyleProps.forEach(function(prop) { kf[prop] = computeStyle(element, prop); });
+      }
+    }
+  }
+  return keyframes;
+}
+
+export function visitDslNode(
+    visitor: AnimationDslVisitor, node: AnimationMetadata, context: any): any;
+export function visitDslNode(
+    visitor: AnimationAstVisitor, node: AnimationAst<AnimationMetadataType>, context: any): any;
+export function visitDslNode(visitor: any, node: any, context: any): any {
+  switch (node.type) {
+    case AnimationMetadataType.Trigger:
+      return visitor.visitTrigger(node, context);
+    case AnimationMetadataType.State:
+      return visitor.visitState(node, context);
+    case AnimationMetadataType.Transition:
+      return visitor.visitTransition(node, context);
+    case AnimationMetadataType.Sequence:
+      return visitor.visitSequence(node, context);
+    case AnimationMetadataType.Group:
+      return visitor.visitGroup(node, context);
+    case AnimationMetadataType.Animate:
+      return visitor.visitAnimate(node, context);
+    case AnimationMetadataType.Keyframes:
+      return visitor.visitKeyframes(node, context);
+    case AnimationMetadataType.Style:
+      return visitor.visitStyle(node, context);
+    case AnimationMetadataType.Reference:
+      return visitor.visitReference(node, context);
+    case AnimationMetadataType.AnimateChild:
+      return visitor.visitAnimateChild(node, context);
+    case AnimationMetadataType.AnimateRef:
+      return visitor.visitAnimateRef(node, context);
+    case AnimationMetadataType.Query:
+      return visitor.visitQuery(node, context);
+    case AnimationMetadataType.Stagger:
+      return visitor.visitStagger(node, context);
+    default:
+      throw new Error(`Unable to resolve animation metadata node #${node.type}`);
+  }
+}
+
+export function computeStyle(element: any, prop: string): string {
+  return (<any>window.getComputedStyle(element))[prop];
+}
diff --git a/packages/animations/browser/test/BUILD.bazel b/packages/animations/browser/test/BUILD.bazel
new file mode 100644
index 000000000000..29603a85f6e2
--- /dev/null
+++ b/packages/animations/browser/test/BUILD.bazel
@@ -0,0 +1,15 @@
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "test",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/animations",
+        "//packages/animations/browser",
+        "//packages/animations/browser/testing",
+        "//packages/core",
+        "//packages/core/testing",
+    ],
+)
diff --git a/packages/animations/browser/test/dsl/animation_spec.ts b/packages/animations/browser/test/dsl/animation_spec.ts
new file mode 100644
index 000000000000..21071dec8f00
--- /dev/null
+++ b/packages/animations/browser/test/dsl/animation_spec.ts
@@ -0,0 +1,1030 @@
+/**
+ * @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, AnimationMetadataType, AnimationOptions, animate, animation, group, keyframes, query, sequence, state, style, transition, trigger, useAnimation, ɵStyleData} from '@angular/animations';
+
+import {Animation} from '../../src/dsl/animation';
+import {buildAnimationAst} from '../../src/dsl/animation_ast_builder';
+import {AnimationTimelineInstruction} from '../../src/dsl/animation_timeline_instruction';
+import {ElementInstructionMap} from '../../src/dsl/element_instruction_map';
+import {MockAnimationDriver} from '../../testing';
+
+function createDiv() {
+  return document.createElement('div');
+}
+
+{
+  describe('Animation', () => {
+    // these tests are only mean't to be run within the DOM (for now)
+    if (isNode) 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',
+         () => {
+           const steps = animate(1000, keyframes([
+                                   style({opacity: 0}),
+                                   style({opacity: 1, offset: 1}),
+                                 ]));
+
+           expect(() => { validateAndThrowAnimationSequence(steps); })
+               .toThrowError(
+                   /Not all style\(\) steps within the declared keyframes\(\) contain offsets/);
+         });
+
+      it('should throw an error if not all offsets are between 0 and 1', () => {
+        let steps = animate(1000, keyframes([
+                              style({opacity: 0, offset: -1}),
+                              style({opacity: 1, offset: 1}),
+                            ]));
+
+        expect(() => {
+          validateAndThrowAnimationSequence(steps);
+        }).toThrowError(/Please ensure that all keyframe offsets are between 0 and 1/);
+
+        steps = animate(1000, keyframes([
+                          style({opacity: 0, offset: 0}),
+                          style({opacity: 1, offset: 1.1}),
+                        ]));
+
+        expect(() => {
+          validateAndThrowAnimationSequence(steps);
+        }).toThrowError(/Please ensure that all keyframe offsets are between 0 and 1/);
+      });
+
+      it('should throw an error if a smaller offset shows up after a bigger one', () => {
+        let steps = animate(1000, keyframes([
+                              style({opacity: 0, offset: 1}),
+                              style({opacity: 1, offset: 0}),
+                            ]));
+
+        expect(() => {
+          validateAndThrowAnimationSequence(steps);
+        }).toThrowError(/Please ensure that all keyframe offsets are in order/);
+      });
+
+      it('should throw an error if any styles overlap during parallel animations', () => {
+        const steps = group([
+          sequence([
+            // 0 -> 2000ms
+            style({opacity: 0}), animate('500ms', style({opacity: .25})),
+            animate('500ms', style({opacity: .5})), animate('500ms', style({opacity: .75})),
+            animate('500ms', style({opacity: 1}))
+          ]),
+          animate('1s 500ms', keyframes([
+                    // 0 -> 1500ms
+                    style({width: 0}),
+                    style({opacity: 1, width: 1000}),
+                  ]))
+        ]);
+
+        expect(() => { validateAndThrowAnimationSequence(steps); })
+            .toThrowError(
+                /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 not allow triggers to be defined with a prefixed `@` symbol', () => {
+        const steps = trigger('@foo', []);
+
+        expect(() => validateAndThrowAnimationSequence(steps))
+            .toThrowError(
+                /animation triggers cannot be prefixed with an `@` sign \(e\.g\. trigger\('@foo', \[...\]\)\)/);
+      });
+
+      it('should throw an error if an animation time is invalid', () => {
+        const steps = [animate('500xs', style({opacity: 1}))];
+
+        expect(() => {
+          validateAndThrowAnimationSequence(steps);
+        }).toThrowError(/The provided timing value "500xs" is invalid/);
+
+        const steps2 = [animate('500ms 500ms 500ms ease-out', style({opacity: 1}))];
+
+        expect(() => {
+          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\(\)/);
+      });
+
+      it('should throw if dynamic style substitutions are used without defaults within state() definitions',
+         () => {
+           const steps = [
+             state('final', style({
+                     'width': '{{ one }}px',
+                     'borderRadius': '{{ two }}px {{ three }}px',
+                   })),
+           ];
+
+           expect(() => { validateAndThrowAnimationSequence(steps); })
+               .toThrowError(
+                   /state\("final", ...\) must define default values for all the following style substitutions: one, two, three/);
+
+           const steps2 = [state(
+               'panfinal', style({
+                 'color': '{{ greyColor }}',
+                 'borderColor': '1px solid {{ greyColor }}',
+                 'backgroundColor': '{{ redColor }}',
+               }),
+               {params: {redColor: 'maroon'}})];
+
+           expect(() => { validateAndThrowAnimationSequence(steps2); })
+               .toThrowError(
+                   /state\("panfinal", ...\) must define default values for all the following style substitutions: greyColor/);
+         });
+
+      it('should throw an error if an invalid CSS property is used in the animation', () => {
+        const steps = [animate(1000, style({abc: '500px'}))];
+
+        expect(() => { validateAndThrowAnimationSequence(steps); })
+            .toThrowError(
+                /The provided animation property "abc" is not a supported CSS property for animations/);
+      });
+
+      it('should allow a vendor-prefixed property to be used in an animation sequence without throwing an error',
+         () => {
+           const steps = [
+             style({webkitTransform: 'translateX(0px)'}),
+             animate(1000, style({webkitTransform: 'translateX(100px)'}))
+           ];
+
+           expect(() => validateAndThrowAnimationSequence(steps)).not.toThrow();
+         });
+
+      it('should allow for old CSS properties (like transform) to be auto-prefixed by webkit',
+         () => {
+           const steps = [
+             style({transform: 'translateX(-100px)'}),
+             animate(1000, style({transform: 'translateX(500px)'}))
+           ];
+
+           expect(() => validateAndThrowAnimationSequence(steps)).not.toThrow();
+         });
+    });
+
+    describe('keyframe building', () => {
+      describe('style() / animate()', () => {
+        it('should produce a balanced series of keyframes given a sequence of animate steps',
+           () => {
+             const steps = [
+               style({width: 0}), animate(1000, style({height: 50})),
+               animate(1000, style({width: 100})), animate(1000, style({height: 150})),
+               animate(1000, style({width: 200}))
+             ];
+
+             const players = invokeAnimationSequence(rootElement, steps);
+             expect(players[0].keyframes).toEqual([
+               {height: AUTO_STYLE, width: 0, offset: 0},
+               {height: 50, width: 0, offset: .25},
+               {height: 50, width: 100, offset: .5},
+               {height: 150, width: 100, offset: .75},
+               {height: 150, width: 200, offset: 1},
+             ]);
+           });
+
+        it('should fill in missing starting steps when a starting `style()` value is not used',
+           () => {
+             const steps = [animate(1000, style({width: 999}))];
+
+             const players = invokeAnimationSequence(rootElement, steps);
+             expect(players[0].keyframes).toEqual([
+               {width: AUTO_STYLE, offset: 0}, {width: 999, offset: 1}
+             ]);
+           });
+
+        it('should merge successive style() calls together before an animate() call', () => {
+          const steps = [
+            style({width: 0}), style({height: 0}), style({width: 200}), style({opacity: 0}),
+            animate(1000, style({width: 100, height: 400, opacity: 1}))
+          ];
+
+          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}
+          ]);
+        });
+
+        it('should not merge in successive style() calls to the previous animate() keyframe',
+           () => {
+             const steps = [
+               style({opacity: 0}), animate(1000, style({opacity: .5})), style({opacity: .6}),
+               animate(1000, style({opacity: 1}))
+             ];
+
+             const players = invokeAnimationSequence(rootElement, steps);
+             const keyframes = humanizeOffsets(players[0].keyframes, 4);
+
+             expect(keyframes).toEqual([
+               {opacity: 0, offset: 0},
+               {opacity: .5, offset: .4998},
+               {opacity: .6, offset: .5002},
+               {opacity: 1, offset: 1},
+             ]);
+           });
+
+        it('should support an easing value that uses cubic-bezier(...)', () => {
+          const steps = [
+            style({opacity: 0}),
+            animate('1s cubic-bezier(.29, .55 ,.53 ,1.53)', style({opacity: 1}))
+          ];
+
+          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)');
+        });
+      });
+
+      describe('sequence()', () => {
+        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([
+                 animate(1000, style({width: 200})),
+                 sequence([
+                   animate(1000, style({width: 300})),
+                 ]),
+               ]),
+               animate(1000, style({width: 400})),
+               sequence([
+                 animate(1000, style({width: 500})),
+               ]),
+             ];
+
+             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 create a new timeline after a sequence if group() or keyframe() commands are used within',
+           () => {
+             const steps = [
+               style({width: 100, height: 100}), animate(1000, style({width: 150, height: 150})),
+               sequence([
+                 group([
+                   animate(1000, style({height: 200})),
+                 ]),
+                 animate(1000, keyframes([style({width: 180}), style({width: 200})]))
+               ]),
+               animate(1000, style({width: 500, height: 500}))
+             ];
+
+             const players = invokeAnimationSequence(rootElement, steps);
+             expect(players.length).toEqual(4);
+
+             const finalPlayer = players[players.length - 1];
+             expect(finalPlayer.keyframes).toEqual([
+               {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('substitutions', () => {
+        it('should allow params to be substituted 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({borderRadius: '100px 100px'}),
+            animate(1000, style({borderRadius: '{{ one }}px {{ two }}'})),
+          ];
+          const players =
+              invokeAnimationSequence(rootElement, steps, buildParams({one: '200', two: '400px'}));
+          expect(players[0].keyframes).toEqual([
+            {offset: 0, borderRadius: '100px 100px'}, {offset: 1, borderRadius: '200px 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()', () => {
+        it('should produce a sub timeline when `keyframes()` is used within a sequence', () => {
+          const steps = [
+            animate(1000, style({opacity: .5})), animate(1000, style({opacity: 1})),
+            animate(
+                1000, keyframes([style({height: 0}), style({height: 100}), style({height: 50})])),
+            animate(1000, style({height: 0, opacity: 0}))
+          ];
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          expect(players.length).toEqual(3);
+
+          const player0 = players[0];
+          expect(player0.delay).toEqual(0);
+          expect(player0.keyframes).toEqual([
+            {opacity: AUTO_STYLE, offset: 0},
+            {opacity: .5, offset: .5},
+            {opacity: 1, offset: 1},
+          ]);
+
+          const subPlayer = players[1];
+          expect(subPlayer.delay).toEqual(2000);
+          expect(subPlayer.keyframes).toEqual([
+            {height: 0, offset: 0},
+            {height: 100, offset: .5},
+            {height: 50, offset: 1},
+          ]);
+
+          const player1 = players[2];
+          expect(player1.delay).toEqual(3000);
+          expect(player1.keyframes).toEqual([
+            {opacity: 1, height: 50, offset: 0}, {opacity: 0, height: 0, offset: 1}
+          ]);
+        });
+
+        it('should propagate inner keyframe style data to the parent timeline if used afterwards',
+           () => {
+             const steps = [
+               style({opacity: 0}), animate(1000, style({opacity: .5})),
+               animate(1000, style({opacity: 1})), animate(1000, keyframes([
+                                                             style({color: 'red'}),
+                                                             style({color: 'blue'}),
+                                                           ])),
+               animate(1000, style({color: 'green', opacity: 0}))
+             ];
+
+             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}
+             ]);
+           });
+
+        it('should feed in starting data into inner keyframes if used in an style step beforehand',
+           () => {
+             const steps = [
+               animate(1000, style({opacity: .5})), animate(1000, keyframes([
+                                                              style({opacity: .8, offset: .5}),
+                                                              style({opacity: 1, offset: 1}),
+                                                            ]))
+             ];
+
+             const players = invokeAnimationSequence(rootElement, steps);
+             expect(players.length).toEqual(2);
+
+             const topPlayer = players[0];
+             expect(topPlayer.keyframes).toEqual([
+               {opacity: AUTO_STYLE, offset: 0}, {opacity: .5, offset: 1}
+             ]);
+
+             const subPlayer = players[1];
+             expect(subPlayer.keyframes).toEqual([
+               {opacity: .5, offset: 0}, {opacity: .8, offset: 0.5}, {opacity: 1, offset: 1}
+             ]);
+           });
+
+        it('should set the easing value as an easing value for the entire timeline', () => {
+          const steps = [
+            style({opacity: 0}), animate(1000, style({opacity: .5})),
+            animate(
+                '1s ease-out',
+                keyframes([style({opacity: .8, offset: .5}), style({opacity: 1, offset: 1})]))
+          ];
+
+          const player = invokeAnimationSequence(rootElement, steps)[1];
+          expect(player.easing).toEqual('ease-out');
+        });
+
+        it('should combine the starting time + the given delay as the delay value for the animated keyframes',
+           () => {
+             const steps = [
+               style({opacity: 0}), animate(500, style({opacity: .5})),
+               animate(
+                   '1s 2s ease-out',
+                   keyframes([style({opacity: .8, offset: .5}), style({opacity: 1, offset: 1})]))
+             ];
+
+             const player = invokeAnimationSequence(rootElement, steps)[1];
+             expect(player.delay).toEqual(2500);
+           });
+
+        it('should not leak in additional styles used later on after keyframe styles have already been declared',
+           () => {
+             const steps = [
+               animate(1000, style({height: '50px'})),
+               animate(2000, keyframes([
+                         style({left: '0', top: '0', offset: 0}),
+                         style({left: '40%', top: '50%', offset: .33}),
+                         style({left: '60%', top: '80%', offset: .66}),
+                         style({left: 'calc(100% - 100px)', top: '100%', offset: 1}),
+                       ])),
+               group([animate('2s', style({width: '200px'}))]),
+               animate('2s', style({height: '300px'})),
+               group([animate('2s', style({height: '500px', width: '500px'}))])
+             ];
+
+             const players = invokeAnimationSequence(rootElement, steps);
+             expect(players.length).toEqual(5);
+
+             const firstPlayerKeyframes = players[0].keyframes;
+             expect(firstPlayerKeyframes[0]['width']).toBeFalsy();
+             expect(firstPlayerKeyframes[1]['width']).toBeFalsy();
+             expect(firstPlayerKeyframes[0]['height']).toEqual(AUTO_STYLE);
+             expect(firstPlayerKeyframes[1]['height']).toEqual('50px');
+
+             const keyframePlayerKeyframes = players[1].keyframes;
+             expect(keyframePlayerKeyframes[0]['width']).toBeFalsy();
+             expect(keyframePlayerKeyframes[0]['height']).toBeFalsy();
+
+             const groupPlayerKeyframes = players[2].keyframes;
+             expect(groupPlayerKeyframes[0]['width']).toEqual(AUTO_STYLE);
+             expect(groupPlayerKeyframes[1]['width']).toEqual('200px');
+             expect(groupPlayerKeyframes[0]['height']).toBeFalsy();
+             expect(groupPlayerKeyframes[1]['height']).toBeFalsy();
+
+             const secondToFinalAnimatePlayerKeyframes = players[3].keyframes;
+             expect(secondToFinalAnimatePlayerKeyframes[0]['width']).toBeFalsy();
+             expect(secondToFinalAnimatePlayerKeyframes[1]['width']).toBeFalsy();
+             expect(secondToFinalAnimatePlayerKeyframes[0]['height']).toEqual('50px');
+             expect(secondToFinalAnimatePlayerKeyframes[1]['height']).toEqual('300px');
+
+             const finalAnimatePlayerKeyframes = players[4].keyframes;
+             expect(finalAnimatePlayerKeyframes[0]['width']).toEqual('200px');
+             expect(finalAnimatePlayerKeyframes[1]['width']).toEqual('500px');
+             expect(finalAnimatePlayerKeyframes[0]['height']).toEqual('300px');
+             expect(finalAnimatePlayerKeyframes[1]['height']).toEqual('500px');
+           });
+
+        it('should respect offsets if provided directly within the style data', () => {
+          const steps = animate(1000, keyframes([
+                                  style({opacity: 0, offset: 0}), style({opacity: .6, offset: .6}),
+                                  style({opacity: 1, offset: 1})
+                                ]));
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          expect(players.length).toEqual(1);
+          const player = players[0];
+
+          expect(player.keyframes).toEqual([
+            {opacity: 0, offset: 0}, {opacity: .6, offset: .6}, {opacity: 1, offset: 1}
+          ]);
+        });
+
+        it('should respect offsets if provided directly within the style metadata type', () => {
+          const steps =
+              animate(1000, keyframes([
+                        {type: AnimationMetadataType.Style, offset: 0, styles: {opacity: 0}},
+                        {type: AnimationMetadataType.Style, offset: .4, styles: {opacity: .4}},
+                        {type: AnimationMetadataType.Style, offset: 1, styles: {opacity: 1}},
+                      ]));
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          expect(players.length).toEqual(1);
+          const player = players[0];
+
+          expect(player.keyframes).toEqual([
+            {opacity: 0, offset: 0}, {opacity: .4, offset: .4}, {opacity: 1, offset: 1}
+          ]);
+        });
+      });
+
+      describe('group()', () => {
+        it('should properly tally style data within a group() for use in a follow-up animate() step',
+           () => {
+             const steps = [
+               style({width: 0, height: 0}), animate(1000, style({width: 20, height: 50})),
+               group([animate('1s 1s', style({width: 200})), animate('1s', style({height: 500}))]),
+               animate(1000, style({width: 1000, height: 1000}))
+             ];
+
+             const players = invokeAnimationSequence(rootElement, steps);
+             expect(players.length).toEqual(4);
+
+             const player0 = players[0];
+             expect(player0.duration).toEqual(1000);
+             expect(player0.keyframes).toEqual([
+               {width: 0, height: 0, offset: 0}, {width: 20, height: 50, offset: 1}
+             ]);
+
+             const gPlayer1 = players[1];
+             expect(gPlayer1.duration).toEqual(2000);
+             expect(gPlayer1.delay).toEqual(1000);
+             expect(gPlayer1.keyframes).toEqual([
+               {width: 20, offset: 0}, {width: 20, offset: .5}, {width: 200, offset: 1}
+             ]);
+
+             const gPlayer2 = players[2];
+             expect(gPlayer2.duration).toEqual(1000);
+             expect(gPlayer2.delay).toEqual(1000);
+             expect(gPlayer2.keyframes).toEqual([
+               {height: 50, offset: 0}, {height: 500, offset: 1}
+             ]);
+
+             const player1 = players[3];
+             expect(player1.duration).toEqual(1000);
+             expect(player1.delay).toEqual(3000);
+             expect(player1.keyframes).toEqual([
+               {width: 200, height: 500, offset: 0}, {width: 1000, height: 1000, offset: 1}
+             ]);
+           });
+
+        it('should support groups with nested sequences', () => {
+          const steps = [group([
+            sequence([
+              style({opacity: 0}),
+              animate(1000, style({opacity: 1})),
+            ]),
+            sequence([
+              style({width: 0}),
+              animate(1000, style({width: 200})),
+            ])
+          ])];
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          expect(players.length).toEqual(2);
+
+          const gPlayer1 = players[0];
+          expect(gPlayer1.delay).toEqual(0);
+          expect(gPlayer1.keyframes).toEqual([
+            {opacity: 0, offset: 0},
+            {opacity: 1, offset: 1},
+          ]);
+
+          const gPlayer2 = players[1];
+          expect(gPlayer1.delay).toEqual(0);
+          expect(gPlayer2.keyframes).toEqual([{width: 0, offset: 0}, {width: 200, offset: 1}]);
+        });
+
+        it('should respect delays after group entries', () => {
+          const steps = [
+            style({width: 0, height: 0}), animate(1000, style({width: 50, height: 50})), group([
+              animate(1000, style({width: 100})),
+              animate(1000, style({height: 100})),
+            ]),
+            animate('1s 1s', style({height: 200, width: 200}))
+          ];
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          expect(players.length).toEqual(4);
+
+          const finalPlayer = players[players.length - 1];
+          expect(finalPlayer.delay).toEqual(2000);
+          expect(finalPlayer.duration).toEqual(2000);
+          expect(finalPlayer.keyframes).toEqual([
+            {width: 100, height: 100, offset: 0},
+            {width: 100, height: 100, offset: .5},
+            {width: 200, height: 200, offset: 1},
+          ]);
+        });
+
+        it('should respect delays after multiple calls to group()', () => {
+          const steps = [
+            group([animate('2s', style({opacity: 1})), animate('2s', style({width: '100px'}))]),
+            animate(2000, style({width: 0, opacity: 0})),
+            group([animate('2s', style({opacity: 1})), animate('2s', style({width: '200px'}))]),
+            animate(2000, style({width: 0, opacity: 0}))
+          ];
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          const middlePlayer = players[2];
+          expect(middlePlayer.delay).toEqual(2000);
+          expect(middlePlayer.duration).toEqual(2000);
+
+          const finalPlayer = players[players.length - 1];
+          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', () => {
+        it('should properly combine an easing value with a delay into a set of three keyframes',
+           () => {
+             const steps: AnimationMetadata[] =
+                 [style({opacity: 0}), animate('3s 1s ease-out', style({opacity: 1}))];
+
+             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}
+             ]);
+           });
+
+        it('should allow easing values to exist for each animate() step', () => {
+          const steps: AnimationMetadata[] = [
+            style({width: 0}), animate('1s linear', style({width: 10})),
+            animate('2s ease-out', style({width: 20})), animate('1s ease-in', style({width: 30}))
+          ];
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          expect(players.length).toEqual(1);
+
+          const player = players[0];
+          expect(player.keyframes).toEqual([
+            {width: 0, offset: 0, easing: 'linear'}, {width: 10, offset: .25, easing: 'ease-out'},
+            {width: 20, offset: .75, easing: 'ease-in'}, {width: 30, offset: 1}
+          ]);
+        });
+
+        it('should produce a top-level timeline only for the duration that is set as before a group kicks in',
+           () => {
+             const steps: AnimationMetadata[] = [
+               style({width: 0, height: 0, opacity: 0}),
+               animate('1s', style({width: 100, height: 100, opacity: .2})), group([
+                 animate('500ms 1s', style({width: 500})), animate('1s', style({height: 500})),
+                 sequence([
+                   animate(500, style({opacity: .5})),
+                   animate(500, style({opacity: .6})),
+                   animate(500, style({opacity: .7})),
+                   animate(500, style({opacity: 1})),
+                 ])
+               ])
+             ];
+
+             const player = invokeAnimationSequence(rootElement, steps)[0];
+             expect(player.duration).toEqual(1000);
+             expect(player.delay).toEqual(0);
+           });
+
+        it('should offset group() and keyframe() timelines with a delay which is the current time of the previous player when called',
+           () => {
+             const steps: AnimationMetadata[] = [
+               style({width: 0, height: 0}),
+               animate('1500ms linear', style({width: 10, height: 10})), group([
+                 animate(1000, style({width: 500, height: 500})),
+                 animate(2000, style({width: 500, height: 500}))
+               ]),
+               animate(1000, keyframes([
+                         style({width: 200}),
+                         style({width: 500}),
+                       ]))
+             ];
+
+             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()
+             expect(players[3].delay).toEqual(3500);  // animate(...keyframes())
+           });
+      });
+
+      describe('state based data', () => {
+        it('should create an empty animation if there are zero animation steps', () => {
+          const steps: AnimationMetadata[] = [];
+
+          const fromStyles: ɵStyleData[] = [{background: 'blue', height: 100}];
+
+          const toStyles: ɵStyleData[] = [{background: 'red'}];
+
+          const player = invokeAnimationSequence(rootElement, steps, {}, fromStyles, toStyles)[0];
+          expect(player.duration).toEqual(0);
+          expect(player.keyframes).toEqual([]);
+        });
+
+        it('should produce an animation from start to end between the to and from styles if there are animate steps in between',
+           () => {
+             const steps: AnimationMetadata[] = [animate(1000)];
+
+             const fromStyles: ɵStyleData[] = [{background: 'blue', height: 100}];
+
+             const toStyles: ɵStyleData[] = [{background: 'red'}];
+
+             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}
+             ]);
+           });
+
+        it('should produce an animation from start to end between the to and from styles if there are animate steps in between with an easing value',
+           () => {
+             const steps: AnimationMetadata[] = [animate('1s ease-out')];
+
+             const fromStyles: ɵStyleData[] = [{background: 'blue'}];
+
+             const toStyles: ɵStyleData[] = [{background: 'red'}];
+
+             const players = invokeAnimationSequence(rootElement, steps, {}, fromStyles, toStyles);
+             expect(players[0].keyframes).toEqual([
+               {background: 'blue', offset: 0, easing: 'ease-out'},
+               {background: 'red', offset: 1}
+             ]);
+           });
+      });
+    });
+  });
+}
+
+function humanizeOffsets(keyframes: ɵStyleData[], digits: number = 3): ɵStyleData[] {
+  return keyframes.map(keyframe => {
+    keyframe['offset'] = Number(parseFloat(<any>keyframe['offset']).toFixed(digits));
+    return keyframe;
+  });
+}
+
+function invokeAnimationSequence(
+    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 driver = new MockAnimationDriver();
+  const errors: any[] = [];
+  const ast = buildAnimationAst(driver, 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
new file mode 100644
index 000000000000..5482075fc645
--- /dev/null
+++ b/packages/animations/browser/test/dsl/animation_trigger_spec.ts
@@ -0,0 +1,257 @@
+/**
+ * @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 {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';
+
+import {ENTER_CLASSNAME, LEAVE_CLASSNAME} from '../../src/util';
+import {MockAnimationDriver} from '../../testing';
+import {makeTrigger} from '../shared';
+
+{
+  describe('AnimationTrigger', () => {
+    // these tests are only mean't to be run within the DOM (for now)
+    if (isNode) 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(() => {
+          makeTrigger('myTrigger', [transition('12345', animate(3333))]);
+        }).toThrowError(/Animation parsing for the myTrigger trigger have failed/);
+      });
+
+      it('should throw an error when a transition within a trigger contains an invalid expression',
+         () => {
+           expect(
+               () => { makeTrigger('name', [transition('somethingThatIsWrong', animate(3333))]); })
+               .toThrowError(
+                   /- The provided transition expression "somethingThatIsWrong" is not supported/);
+         });
+
+      it('should throw an error if an animation alias is used that is not yet supported', () => {
+        expect(() => {
+          makeTrigger('name', [transition(':angular', animate(3333))]);
+        }).toThrowError(/- The transition alias value ":angular" is not supported/);
+      });
+    });
+
+    describe('trigger usage', () => {
+      it('should construct a trigger based on the states and transition data', () => {
+        const result = makeTrigger('name', [
+          state('on', style({width: 0})),
+          state('off', style({width: 100})),
+          transition('on => off', animate(1000)),
+          transition('off => on', animate(1000)),
+        ]);
+
+        expect(result.states['on'].buildStyles({}, [])).toEqual({width: 0});
+        expect(result.states['off'].buildStyles({}, [])).toEqual({width: 100});
+        expect(result.transitionFactories.length).toEqual(2);
+      });
+
+      it('should allow multiple state values to use the same styles', () => {
+        const result = makeTrigger('name', [
+          state('on, off', style({width: 50})), transition('on => off', animate(1000)),
+          transition('off => on', animate(1000))
+        ]);
+
+
+        expect(result.states['on'].buildStyles({}, [])).toEqual({width: 50});
+        expect(result.states['off'].buildStyles({}, [])).toEqual({width: 50});
+      });
+
+      it('should find the first transition that matches', () => {
+        const result = makeTrigger(
+            'name', [transition('a => b', animate(1234)), transition('b => c', animate(5678))]);
+
+        const trans = buildTransition(result, element, 'b', 'c') !;
+        expect(trans.timelines.length).toEqual(1);
+        const timeline = trans.timelines[0];
+        expect(timeline.duration).toEqual(5678);
+      });
+
+      it('should find a transition with a `*` value', () => {
+        const result = makeTrigger('name', [
+          transition('* => b', animate(1234)), transition('b => *', animate(5678)),
+          transition('* => *', animate(9999))
+        ]);
+
+        let trans = buildTransition(result, element, 'b', 'c') !;
+        expect(trans.timelines[0].duration).toEqual(5678);
+
+        trans = buildTransition(result, element, 'a', 'b') !;
+        expect(trans.timelines[0].duration).toEqual(1234);
+
+        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 trigger = result.matchTransition('b', 'a', {}, {});
+        expect(trigger).toBeFalsy();
+      });
+
+      it('should support bi-directional transition expressions', () => {
+        const result = makeTrigger('name', [transition('a <=> b', animate(2222))]);
+
+        const t1 = buildTransition(result, element, 'a', 'b') !;
+        expect(t1.timelines[0].duration).toEqual(2222);
+
+        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 = buildTransition(result, element, 'a', 'b') !;
+        expect(t1.timelines[0].duration).toEqual(1234);
+
+        const t2 = buildTransition(result, element, 'b', 'a') !;
+        expect(t2.timelines[0].duration).toEqual(1234);
+
+        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 substitute 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'}
+           ]);
+         });
+
+      it('should treat numeric values (disguised as strings) as proper state values', () => {
+        const result = makeTrigger('name', [
+          state(1 as any as string, style({opacity: 0})),
+          state(0 as any as string, style({opacity: 0})), transition('* => *', animate(1000))
+        ]);
+
+        expect(() => {
+          const trans = buildTransition(result, element, false, true) !;
+        }).not.toThrow();
+      });
+
+      describe('aliases', () => {
+        it('should alias the :enter transition as void => *', () => {
+          const result = makeTrigger('name', [transition(':enter', animate(3333))]);
+
+          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 = buildTransition(result, element, 'something', 'void') !;
+          expect(trans.timelines[0].duration).toEqual(3333);
+        });
+      });
+    });
+  });
+}
+
+function buildTransition(
+    trigger: AnimationTrigger, element: any, fromState: any, toState: any,
+    fromOptions?: AnimationOptions, toOptions?: AnimationOptions): AnimationTransitionInstruction|
+    null {
+  const params = toOptions && toOptions.params || {};
+  const trans = trigger.matchTransition(fromState, toState, element, params) !;
+  if (trans) {
+    const driver = new MockAnimationDriver();
+    return trans.build(
+        driver, element, fromState, toState, ENTER_CLASSNAME, LEAVE_CLASSNAME, fromOptions,
+        toOptions) !;
+  }
+  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
new file mode 100644
index 000000000000..003df7678cc9
--- /dev/null
+++ b/packages/animations/browser/test/dsl/style_normalizer/web_animations_style_normalizer_spec.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 {WebAnimationsStyleNormalizer} from '../../../src/dsl/style_normalization/web_animations_style_normalizer';
+
+{
+  describe('WebAnimationsStyleNormalizer', () => {
+    const normalizer = new WebAnimationsStyleNormalizer();
+
+    describe('normalizePropertyName', () => {
+      it('should normalize CSS property values to camel-case', () => {
+        expect(normalizer.normalizePropertyName('width', [])).toEqual('width');
+        expect(normalizer.normalizePropertyName('border-width', [])).toEqual('borderWidth');
+        expect(normalizer.normalizePropertyName('borderHeight', [])).toEqual('borderHeight');
+        expect(normalizer.normalizePropertyName('-webkit-animation', [
+        ])).toEqual('WebkitAnimation');
+      });
+    });
+
+    describe('normalizeStyleValue', () => {
+      function normalize(prop: string, val: string | number): string {
+        const errors: string[] = [];
+        const result = normalizer.normalizeStyleValue(prop, prop, val, errors);
+        if (errors.length) {
+          throw new Error(errors.join('\n'));
+        }
+        return result;
+      }
+
+      it('should normalize number-based dimensional properties to use a `px` suffix if missing',
+         () => {
+           expect(normalize('width', 10)).toEqual('10px');
+           expect(normalize('height', 20)).toEqual('20px');
+         });
+
+      it('should report an error when a string-based dimensional value does not contain a suffix at all',
+         () => {
+           expect(() => {
+             normalize('width', '50');
+           }).toThrowError(/Please provide a CSS unit value for width:50/);
+         });
+
+      it('should not normalize non-dimensional properties with `px` values, but only convert them to string',
+         () => {
+           expect(normalize('opacity', 0)).toEqual('0');
+           expect(normalize('opacity', '1')).toEqual('1');
+           expect(normalize('color', 'red')).toEqual('red');
+           expect(normalize('fontWeight', '100')).toEqual('100');
+         });
+
+      it('should not normalize dimensional-based values that already contain a dimensional suffix or a non dimensional value',
+         () => {
+           expect(normalize('width', '50em')).toEqual('50em');
+           expect(normalize('height', '500pt')).toEqual('500pt');
+           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/css_keyframes/css_keyframes_driver_spec.ts b/packages/animations/browser/test/render/css_keyframes/css_keyframes_driver_spec.ts
new file mode 100644
index 000000000000..747a3895751e
--- /dev/null
+++ b/packages/animations/browser/test/render/css_keyframes/css_keyframes_driver_spec.ts
@@ -0,0 +1,398 @@
+/**
+ * @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 {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
+
+import {CssKeyframesDriver} from '../../../src/render/css_keyframes/css_keyframes_driver';
+import {CssKeyframesPlayer} from '../../../src/render/css_keyframes/css_keyframes_player';
+import {DirectStylePlayer} from '../../../src/render/css_keyframes/direct_style_player';
+
+import {assertElementExistsInDom, createElement, findKeyframeDefinition, forceReflow, makeAnimationEvent, supportsAnimationEventCreation} from './shared';
+
+const CSS_KEYFRAME_RULE_TYPE = 7;
+
+describe('CssKeyframesDriver tests', () => {
+  if (isNode || typeof(window as any)['AnimationEvent'] == 'undefined') return;
+
+  describe('building keyframes', () => {
+    it('should build CSS keyframe style object containing the keyframe styles', () => {
+      const elm = createElement();
+      const animator = new CssKeyframesDriver();
+      const kfElm = animator.buildKeyframeElement(elm, 'myKfAnim', [
+        {opacity: 0, width: '0px', offset: 0},
+        {opacity: 0.5, width: '100px', offset: 0.5},
+        {opacity: 1, width: '200px', offset: 1},
+      ]);
+
+      const head = document.querySelector('head') !;
+      head.appendChild(kfElm);
+      forceReflow();
+
+      const sheet = kfElm.sheet;
+      const kfRule = findKeyframeDefinition(sheet);
+      expect(kfRule.name).toEqual('myKfAnim');
+      expect(kfRule.type).toEqual(CSS_KEYFRAME_RULE_TYPE);
+
+      const keyframeCssRules = kfRule.cssRules;
+      expect(keyframeCssRules.length).toEqual(3);
+
+      const [from, mid, to] = keyframeCssRules;
+      expect(from.keyText).toEqual('0%');
+      expect(mid.keyText).toEqual('50%');
+      expect(to.keyText).toEqual('100%');
+
+      const fromStyles = from.style;
+      expect(fromStyles.opacity).toEqual('0');
+      expect(fromStyles.width).toEqual('0px');
+
+      const midStyles = mid.style;
+      expect(midStyles.opacity).toEqual('0.5');
+      expect(midStyles.width).toEqual('100px');
+
+      const toStyles = to.style;
+      expect(toStyles.opacity).toEqual('1');
+      expect(toStyles.width).toEqual('200px');
+    });
+
+    it('should convert numeric values into px-suffixed data', () => {
+      const elm = createElement();
+      const animator = new CssKeyframesDriver();
+      const kfElm = animator.buildKeyframeElement(elm, 'myKfAnim', [
+        {width: '0px', offset: 0},
+        {width: '100px', offset: 0.5},
+        {width: '200px', offset: 1},
+      ]);
+
+      const head = document.querySelector('head') !;
+      head.appendChild(kfElm);
+      forceReflow();
+
+      const sheet = kfElm.sheet;
+      const kfRule = findKeyframeDefinition(sheet);
+      const keyframeCssRules = kfRule.cssRules;
+      const [from, mid, to] = keyframeCssRules;
+
+      expect(from.style.width).toEqual('0px');
+      expect(mid.style.width).toEqual('100px');
+      expect(to.style.width).toEqual('200px');
+    });
+  });
+
+  describe('when animating', () => {
+    it('should set an animation on the element that matches the generated animation', () => {
+      const elm = createElement();
+      const animator = new CssKeyframesDriver();
+      const player = animator.animate(
+          elm,
+          [
+            {width: '0px', offset: 0},
+            {width: '200px', offset: 1},
+          ],
+          1234, 0, 'ease-out');
+
+      const sheet: any = document.styleSheets[document.styleSheets.length - 1];
+      const kfRule = findKeyframeDefinition(sheet);
+
+      player.init();
+      const {animationName, duration, easing} = parseElementAnimationStyle(elm);
+      expect(animationName).toEqual(kfRule.name);
+      expect(duration).toEqual(1234);
+      expect(easing).toEqual('ease-out');
+    });
+
+    it('should animate until the `animationend` method is emitted, but stil retain the <style> method and the element animation details',
+       fakeAsync(() => {
+         // IE10 and IE11 cannot create an instanceof AnimationEvent
+         if (!supportsAnimationEventCreation()) return;
+
+         const elm = createElement();
+         const animator = new CssKeyframesDriver();
+
+         assertExistingAnimationDuration(elm, 0);
+         const player = <CssKeyframesPlayer>animator.animate(
+             elm,
+             [
+               {width: '0px', offset: 0},
+               {width: '200px', offset: 1},
+             ],
+             1234, 0, 'ease-out');
+
+         const matchingStyleElm = findStyleObjectWithKeyframes();
+
+         player.play();
+         assertExistingAnimationDuration(elm, 1234);
+         assertElementExistsInDom(matchingStyleElm, true);
+
+         let completed = false;
+         player.onDone(() => completed = true);
+         expect(completed).toBeFalsy();
+
+         flushMicrotasks();
+         expect(completed).toBeFalsy();
+
+         const event = makeAnimationEvent('end', player.animationName, 1234);
+         elm.dispatchEvent(event);
+
+         flushMicrotasks();
+         expect(completed).toBeTruthy();
+
+         assertExistingAnimationDuration(elm, 1234);
+         assertElementExistsInDom(matchingStyleElm, true);
+       }));
+
+    it('should animate until finish() is called, but stil retain the <style> method and the element animation details',
+       fakeAsync(() => {
+         const elm = createElement();
+         const animator = new CssKeyframesDriver();
+
+         assertExistingAnimationDuration(elm, 0);
+         const player = animator.animate(
+             elm,
+             [
+               {width: '0px', offset: 0},
+               {width: '200px', offset: 1},
+             ],
+             1234, 0, 'ease-out');
+
+         const matchingStyleElm = findStyleObjectWithKeyframes();
+
+         player.play();
+         assertExistingAnimationDuration(elm, 1234);
+         assertElementExistsInDom(matchingStyleElm, true);
+
+         let completed = false;
+         player.onDone(() => completed = true);
+         expect(completed).toBeFalsy();
+
+         flushMicrotasks();
+         expect(completed).toBeFalsy();
+
+         player.finish();
+
+         flushMicrotasks();
+         expect(completed).toBeTruthy();
+
+         assertExistingAnimationDuration(elm, 1234);
+         assertElementExistsInDom(matchingStyleElm, true);
+       }));
+
+    it('should animate until the destroy method is called and cleanup the element animation details',
+       fakeAsync(() => {
+         const elm = createElement();
+         const animator = new CssKeyframesDriver();
+
+         assertExistingAnimationDuration(elm, 0);
+         const player = animator.animate(
+             elm,
+             [
+               {width: '0px', offset: 0},
+               {width: '200px', offset: 1},
+             ],
+             1234, 0, 'ease-out');
+
+         player.play();
+         assertExistingAnimationDuration(elm, 1234);
+
+         let completed = false;
+         player.onDone(() => completed = true);
+
+         flushMicrotasks();
+         expect(completed).toBeFalsy();
+
+         player.destroy();
+         flushMicrotasks();
+         expect(completed).toBeTruthy();
+
+         assertExistingAnimationDuration(elm, 0);
+       }));
+
+    it('should return an instance of a direct style player if an animation has a duration of 0',
+       () => {
+         const elm = createElement();
+         const animator = new CssKeyframesDriver();
+
+         assertExistingAnimationDuration(elm, 0);
+         const player = animator.animate(
+             elm,
+             [
+               {width: '0px', offset: 0},
+               {width: '200px', offset: 1},
+             ],
+             0, 0, 'ease-out');
+         expect(player instanceof DirectStylePlayer).toBeTruthy();
+       });
+
+    it('should cleanup the associated <style> object when the animation is destroyed',
+       fakeAsync(() => {
+         const elm = createElement();
+         const animator = new CssKeyframesDriver();
+
+         const player = animator.animate(
+             elm,
+             [
+               {width: '0px', offset: 0},
+               {width: '200px', offset: 1},
+             ],
+             1234, 0, 'ease-out');
+
+         player.play();
+         const matchingStyleElm = findStyleObjectWithKeyframes();
+         assertElementExistsInDom(matchingStyleElm, true);
+
+         player.destroy();
+         flushMicrotasks();
+         assertElementExistsInDom(matchingStyleElm, false);
+       }));
+
+    it('should return the final styles when capture() is called', () => {
+      const elm = createElement();
+      const animator = new CssKeyframesDriver();
+      const player = <CssKeyframesPlayer>animator.animate(
+          elm,
+          [
+            {color: 'red', width: '111px', height: '111px', offset: 0},
+            {color: 'blue', height: '999px', width: '999px', offset: 1},
+          ],
+          2000, 0, 'ease-out');
+
+      player.play();
+      player.finish();
+      player.beforeDestroy !();
+      expect(player.currentSnapshot).toEqual({
+        width: '999px',
+        height: '999px',
+        color: 'blue',
+      });
+    });
+
+    it('should return the intermediate styles when capture() is called in the middle of the animation',
+       () => {
+         const elm = createElement();
+         document.body.appendChild(elm);  // this is required so GCS works
+
+         const animator = new CssKeyframesDriver();
+         const player = <CssKeyframesPlayer>animator.animate(
+             elm,
+             [
+               {width: '0px', height: '0px', offset: 0},
+               {height: '100px', width: '100px', offset: 1},
+             ],
+             2000, 0, 'ease-out');
+
+         player.play();
+         player.setPosition(0.5);
+         player.beforeDestroy();
+         const result = player.currentSnapshot;
+         expect(parseFloat(result['width'])).toBeGreaterThan(0);
+         expect(parseFloat(result['height'])).toBeGreaterThan(0);
+       });
+
+    it('should capture existing keyframe player styles in and merge in the styles into the follow up player\'s keyframes',
+       () => {
+         // IE cannot modify the position of an animation...
+         // note that this feature is only for testing purposes
+         if (isIE()) return;
+
+         const elm = createElement();
+         elm.style.border = '1px solid black';
+         document.body.appendChild(elm);  // this is required so GCS works
+
+         const animator = new CssKeyframesDriver();
+         const p1 = <CssKeyframesPlayer>animator.animate(
+             elm,
+             [
+               {width: '0px', lineHeight: '20px', offset: 0},
+               {width: '100px', lineHeight: '50px', offset: 1},
+             ],
+             2000, 0, 'ease-out');
+
+         const p2 = <CssKeyframesPlayer>animator.animate(
+             elm,
+             [
+               {height: '100px', offset: 0},
+               {height: '300px', offset: 1},
+             ],
+             2000, 0, 'ease-out');
+
+         p1.play();
+         p1.setPosition(0.5);
+         p1.beforeDestroy();
+         p2.play();
+         p2.setPosition(0.5);
+         p2.beforeDestroy();
+
+         const p3 = <CssKeyframesPlayer>animator.animate(
+             elm,
+             [
+               {height: '0px', width: '0px', offset: 0},
+               {height: '400px', width: '400px', offset: 0.5},
+               {height: '500px', width: '500px', offset: 1},
+             ],
+             2000, 0, 'ease-out', [p1, p2]);
+
+         p3.init();
+         const [k1, k2, k3] = p3.keyframes;
+
+         const offset = k1.offset;
+         expect(offset).toEqual(0);
+
+         const width = parseInt(k1['width'] as string);
+         expect(width).toBeGreaterThan(0);
+         expect(width).toBeLessThan(100);
+
+         const bWidth = parseInt(k1['lineHeight'] as string);
+         expect(bWidth).toBeGreaterThan(20);
+         expect(bWidth).toBeLessThan(50);
+
+         const height = parseFloat(k1['height'] as string);
+         expect(height).toBeGreaterThan(100);
+         expect(height).toBeLessThan(300);
+
+         // since the lineHeight wasn't apart of the follow-up animation,
+         // it's values were copied over into all the keyframes
+         const b1 = bWidth;
+         const b2 = parseInt(k2['lineHeight'] as string);
+         const b3 = parseInt(k3['lineHeight'] as string);
+         expect(b1).toEqual(b2);
+         expect(b2).toEqual(b3);
+
+         // we delete the lineHeight values because they are float-based
+         // and each browser has a different value based on precision...
+         // therefore we can't assert it directly below (asserting it above
+         // on the first keyframe was all that was needed since they are the same)
+         delete k2['lineHeight'];
+         delete k3['lineHeight'];
+         expect(k2).toEqual({width: '400px', height: '400px', offset: 0.5});
+         expect(k3).toEqual({width: '500px', height: '500px', offset: 1});
+       });
+  });
+});
+
+function assertExistingAnimationDuration(element: any, duration: number) {
+  expect(parseElementAnimationStyle(element).duration).toEqual(duration);
+}
+
+function findStyleObjectWithKeyframes(): any|null {
+  const sheetWithKeyframes = document.styleSheets[document.styleSheets.length - 1];
+  const styleElms = Array.from(document.querySelectorAll('head style') as any as any[]);
+  return styleElms.find(elm => elm.sheet == sheetWithKeyframes) || null;
+}
+
+function parseElementAnimationStyle(element: any):
+    {duration: number, delay: number, easing: string, animationName: string} {
+  const style = element.style;
+  const duration = parseInt(style.animationDuration || 0);
+  const delay = style.animationDelay;
+  const easing = style.animationTimingFunction;
+  const animationName = style.animationName;
+  return {duration, delay, easing, animationName};
+}
+
+function isIE() {
+  // note that this only applies to older IEs (not edge)
+  return (window as any).document['documentMode'] ? true : false;
+}
diff --git a/packages/animations/browser/test/render/css_keyframes/direct_style_player_spec.ts b/packages/animations/browser/test/render/css_keyframes/direct_style_player_spec.ts
new file mode 100644
index 000000000000..c04ae07783df
--- /dev/null
+++ b/packages/animations/browser/test/render/css_keyframes/direct_style_player_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 {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
+
+import {DirectStylePlayer} from '../../../src/render/css_keyframes/direct_style_player';
+
+import {assertStyle, createElement} from './shared';
+
+const CSS_KEYFRAME_RULE_TYPE = 7;
+
+describe('DirectStylePlayer tests', () => {
+  if (isNode) return;
+
+  it('should apply the styling to the given element when the animation starts and remove when destroyed',
+     () => {
+       const element = createElement();
+       const player = new DirectStylePlayer(element, {opacity: 0.5});
+
+       assertStyle(element, 'opacity', '');
+
+       player.play();
+       assertStyle(element, 'opacity', '0.5');
+
+       player.finish();
+       assertStyle(element, 'opacity', '0.5');
+
+       player.destroy();
+       assertStyle(element, 'opacity', '');
+     });
+
+  it('should finish the animation after one tick', fakeAsync(() => {
+       const element = createElement();
+       const player = new DirectStylePlayer(element, {opacity: 0.5});
+
+       let done = false;
+       player.onDone(() => done = true);
+
+       expect(done).toBeFalsy();
+
+       player.play();
+       expect(done).toBeFalsy();
+
+       flushMicrotasks();
+       expect(done).toBeTruthy();
+     }));
+
+  it('should restore existing element styles once the animation is destroyed', fakeAsync(() => {
+       const element = createElement();
+       element.style['width'] = '100px';
+       element.style['height'] = '200px';
+
+       const player = new DirectStylePlayer(element, {width: '500px', opacity: 0.5});
+
+       assertStyle(element, 'width', '100px');
+       assertStyle(element, 'height', '200px');
+       assertStyle(element, 'opacity', '');
+
+       player.init();
+       assertStyle(element, 'width', '100px');
+       assertStyle(element, 'height', '200px');
+       assertStyle(element, 'opacity', '');
+
+       player.play();
+       assertStyle(element, 'width', '500px');
+       assertStyle(element, 'height', '200px');
+       assertStyle(element, 'opacity', '0.5');
+
+       player.destroy();
+       assertStyle(element, 'width', '100px');
+       assertStyle(element, 'height', '200px');
+       assertStyle(element, 'opacity', '');
+     }));
+});
diff --git a/packages/animations/browser/test/render/css_keyframes/element_animation_style_handler_spec.ts b/packages/animations/browser/test/render/css_keyframes/element_animation_style_handler_spec.ts
new file mode 100644
index 000000000000..d5b64b5758d1
--- /dev/null
+++ b/packages/animations/browser/test/render/css_keyframes/element_animation_style_handler_spec.ts
@@ -0,0 +1,231 @@
+/**
+ * @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 {ElementAnimationStyleHandler} from '../../../src/render/css_keyframes/element_animation_style_handler';
+import {computeStyle} from '../../../src/util';
+
+import {assertStyle, createElement, makeAnimationEvent, supportsAnimationEventCreation} from './shared';
+
+const EMPTY_FN = () => {};
+{
+  describe('ElementAnimationStyleHandler', () => {
+    if (isNode || typeof(window as any)['AnimationEvent'] == 'undefined') return;
+
+    it('should add and remove an animation on to an element\'s styling', () => {
+      const element = createElement();
+      document.body.appendChild(element);
+
+      const handler = new ElementAnimationStyleHandler(
+          element, 'someAnimation', 1234, 999, 'ease-in', 'forwards', EMPTY_FN);
+
+      assertStyle(element, 'animation-name', '');
+      assertStyle(element, 'animation-duration', '');
+      assertStyle(element, 'animation-delay', '');
+      assertStyle(element, 'animation-timing-function', '');
+      assertStyle(element, 'animation-fill-mode', '');
+
+      handler.apply();
+
+      assertStyle(element, 'animation-name', 'someAnimation');
+      assertStyle(element, 'animation-duration', '1234ms');
+      assertStyle(element, 'animation-delay', '999ms');
+      assertStyle(element, 'animation-timing-function', 'ease-in');
+      assertStyle(element, 'animation-fill-mode', 'forwards');
+
+      handler.finish();
+
+      assertStyle(element, 'animation-name', 'someAnimation');
+      assertStyle(element, 'animation-duration', '1234ms');
+      assertStyle(element, 'animation-delay', '999ms');
+      assertStyle(element, 'animation-timing-function', 'ease-in');
+      assertStyle(element, 'animation-fill-mode', 'forwards');
+
+      handler.destroy();
+
+      assertStyle(element, 'animation-name', '');
+      assertStyle(element, 'animation-duration', '');
+      assertStyle(element, 'animation-delay', '');
+      assertStyle(element, 'animation-timing-function', '');
+      assertStyle(element, 'animation-fill-mode', '');
+    });
+
+    it('should respect existing animation styling on an element', () => {
+      const element = createElement();
+      document.body.appendChild(element);
+
+      element.style.setProperty('animation', 'fooAnimation 1s ease-out forwards');
+      assertStyle(element, 'animation-name', 'fooAnimation');
+
+      const handler = new ElementAnimationStyleHandler(
+          element, 'barAnimation', 1234, 555, 'ease-out', 'both', EMPTY_FN);
+
+      assertStyle(element, 'animation-name', 'fooAnimation');
+      handler.apply();
+      assertStyle(element, 'animation-name', 'fooAnimation, barAnimation');
+      handler.destroy();
+      assertStyle(element, 'animation-name', 'fooAnimation');
+    });
+
+    it('should respect animation styling that is prefixed after a handler is applied on an element',
+       () => {
+         const element = createElement();
+         document.body.appendChild(element);
+
+         const handler = new ElementAnimationStyleHandler(
+             element, 'barAnimation', 1234, 555, 'ease-out', 'both', EMPTY_FN);
+
+         assertStyle(element, 'animation-name', '');
+         handler.apply();
+         assertStyle(element, 'animation-name', 'barAnimation');
+
+         const anim = element.style.animation;
+         element.style.setProperty('animation', `${anim}, fooAnimation 1s ease-out forwards`);
+         assertStyle(element, 'animation-name', 'barAnimation, fooAnimation');
+
+         handler.destroy();
+         assertStyle(element, 'animation-name', 'fooAnimation');
+       });
+
+    it('should respect animation styling that is suffixed after a handler is applied on an element',
+       () => {
+         const element = createElement();
+         document.body.appendChild(element);
+
+         const handler = new ElementAnimationStyleHandler(
+             element, 'barAnimation', 1234, 555, 'ease-out', 'both', EMPTY_FN);
+
+         assertStyle(element, 'animation-name', '');
+         handler.apply();
+         assertStyle(element, 'animation-name', 'barAnimation');
+
+         const anim = element.style.animation;
+         element.style.setProperty('animation', `fooAnimation 1s ease-out forwards, ${anim}`);
+         assertStyle(element, 'animation-name', 'fooAnimation, barAnimation');
+
+         handler.destroy();
+         assertStyle(element, 'animation-name', 'fooAnimation');
+       });
+
+    it('should respect existing animation handlers on an element', () => {
+      const element = createElement();
+      document.body.appendChild(element);
+
+      assertStyle(element, 'animation-name', '');
+
+      const h1 = new ElementAnimationStyleHandler(
+          element, 'fooAnimation', 1234, 333, 'ease-out', 'both', EMPTY_FN);
+      h1.apply();
+
+      assertStyle(element, 'animation-name', 'fooAnimation');
+      assertStyle(element, 'animation-duration', '1234ms');
+      assertStyle(element, 'animation-delay', '333ms');
+
+      const h2 = new ElementAnimationStyleHandler(
+          element, 'barAnimation', 5678, 666, 'ease-out', 'both', EMPTY_FN);
+      h2.apply();
+
+      assertStyle(element, 'animation-name', 'fooAnimation, barAnimation');
+      assertStyle(element, 'animation-duration', '1234ms, 5678ms');
+      assertStyle(element, 'animation-delay', '333ms, 666ms');
+
+      const h3 = new ElementAnimationStyleHandler(
+          element, 'bazAnimation', 90, 999, 'ease-out', 'both', EMPTY_FN);
+      h3.apply();
+
+      assertStyle(element, 'animation-name', 'fooAnimation, barAnimation, bazAnimation');
+      assertStyle(element, 'animation-duration', '1234ms, 5678ms, 90ms');
+      assertStyle(element, 'animation-delay', '333ms, 666ms, 999ms');
+
+      h2.destroy();
+
+      assertStyle(element, 'animation-name', 'fooAnimation, bazAnimation');
+      assertStyle(element, 'animation-duration', '1234ms, 90ms');
+      assertStyle(element, 'animation-delay', '333ms, 999ms');
+
+      h1.destroy();
+
+      assertStyle(element, 'animation-name', 'bazAnimation');
+      assertStyle(element, 'animation-duration', '90ms');
+      assertStyle(element, 'animation-delay', '999ms');
+    });
+
+    it('should fire the onDone method when .finish() is called on the handler', () => {
+      const element = createElement();
+      document.body.appendChild(element);
+
+      let done = false;
+      const handler = new ElementAnimationStyleHandler(
+          element, 'fooAnimation', 1234, 333, 'ease-out', 'both', () => done = true);
+
+      expect(done).toBeFalsy();
+      handler.finish();
+      expect(done).toBeTruthy();
+    });
+
+    it('should fire the onDone method only once when .finish() is called on the handler', () => {
+      const element = createElement();
+      document.body.appendChild(element);
+
+      let doneCount = 0;
+      const handler = new ElementAnimationStyleHandler(
+          element, 'fooAnimation', 1234, 333, 'ease-out', 'both', () => doneCount++);
+
+      expect(doneCount).toEqual(0);
+      handler.finish();
+      expect(doneCount).toEqual(1);
+      handler.finish();
+      expect(doneCount).toEqual(1);
+    });
+
+    it('should fire the onDone method when .destroy() is called on the handler', () => {
+      const element = createElement();
+      document.body.appendChild(element);
+
+      let done = false;
+      const handler = new ElementAnimationStyleHandler(
+          element, 'fooAnimation', 1234, 333, 'ease-out', 'both', () => done = true);
+
+      expect(done).toBeFalsy();
+      handler.destroy();
+      expect(done).toBeTruthy();
+    });
+
+    it('should fire the onDone method when the matching animationend event is emitted', () => {
+      // IE10 and IE11 cannot create an instanceof AnimationEvent
+      if (!supportsAnimationEventCreation()) return;
+
+      const element = createElement();
+      document.body.appendChild(element);
+
+      let done = false;
+      const handler = new ElementAnimationStyleHandler(
+          element, 'fooAnimation', 1234, 333, 'ease-out', 'both', () => done = true);
+
+      expect(done).toBeFalsy();
+      handler.apply();
+      expect(done).toBeFalsy();
+
+      let event = makeAnimationEvent('end', 'fooAnimation', 100);
+      element.dispatchEvent(event);
+      expect(done).toBeFalsy();
+
+      event = makeAnimationEvent('end', 'fooAnimation', 1234);
+      element.dispatchEvent(event);
+      expect(done).toBeFalsy();
+
+      const timestampAfterDelay = Date.now() + 500;
+
+      event = makeAnimationEvent('end', 'fakeAnimation', 1234, timestampAfterDelay);
+      element.dispatchEvent(event);
+      expect(done).toBeFalsy();
+
+      event = makeAnimationEvent('end', 'fooAnimation', 1234, timestampAfterDelay);
+      element.dispatchEvent(event);
+      expect(done).toBeTruthy();
+    });
+  });
+}
diff --git a/packages/animations/browser/test/render/css_keyframes/shared.ts b/packages/animations/browser/test/render/css_keyframes/shared.ts
new file mode 100644
index 000000000000..e7055d118654
--- /dev/null
+++ b/packages/animations/browser/test/render/css_keyframes/shared.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
+ */
+export function forceReflow() {
+  (document.body as any)['_reflow'] = document.body.clientWidth;
+}
+
+export function makeAnimationEvent(
+    startOrEnd: 'start' | 'end', animationName: string, elapsedTime: number, timestamp?: number) {
+  const e = new AnimationEvent('animation' + startOrEnd, {animationName, elapsedTime});
+  if (timestamp) {
+    (e as any)._ngTestManualTimestamp = timestamp;
+  }
+  return e;
+}
+
+export function supportsAnimationEventCreation() {
+  let supported = false;
+  try {
+    makeAnimationEvent('end', 'test', 0);
+    supported = true;
+  } catch (e) {
+  }
+  return supported;
+}
+
+export function findKeyframeDefinition(sheet: any): any|null {
+  return sheet.cssRules[0] || null;
+}
+
+export function createElement() {
+  return document.createElement('div');
+}
+
+export function assertStyle(element: any, prop: string, value: string) {
+  expect(element.style[prop] || '').toEqual(value);
+}
+
+export function assertElementExistsInDom(element: any, yes?: boolean) {
+  const exp = expect(element.parentNode);
+  if (yes) {
+    exp.toBeTruthy();
+  } else {
+    exp.toBeFalsy();
+  }
+}
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 000000000000..b9471416335b
--- /dev/null
+++ b/packages/animations/browser/test/render/timeline_animation_engine_spec.ts
@@ -0,0 +1,123 @@
+/**
+ * @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 {getBodyNode} from '../../src/render/shared';
+import {TimelineAnimationEngine} from '../../src/render/timeline_animation_engine';
+import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/src/mock_animation_driver';
+
+(function() {
+  const defaultDriver = new MockAnimationDriver();
+
+  function makeEngine(body: any, driver?: AnimationDriver, normalizer?: AnimationStyleNormalizer) {
+    return new TimelineAnimationEngine(
+        body, driver || defaultDriver, normalizer || new NoopAnimationStyleNormalizer());
+  }
+
+  // these tests are only mean't to be run within the DOM
+  if (isNode) 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(getBodyNode());
+      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(getBodyNode());
+
+      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(getBodyNode(), 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(getBodyNode(), 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/render/transition_animation_engine_spec.ts b/packages/animations/browser/test/render/transition_animation_engine_spec.ts
new file mode 100644
index 000000000000..8090f81e001b
--- /dev/null
+++ b/packages/animations/browser/test/render/transition_animation_engine_spec.ts
@@ -0,0 +1,707 @@
+/**
+ * @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, AnimationMetadata, AnimationTriggerMetadata, NoopAnimationPlayer, animate, state, style, transition, trigger} from '@angular/animations';
+
+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 {getBodyNode} from '../../src/render/shared';
+import {TransitionAnimationEngine} from '../../src/render/transition_animation_engine';
+import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/src/mock_animation_driver';
+
+const DEFAULT_NAMESPACE_ID = 'id';
+
+(function() {
+  const driver = new MockAnimationDriver();
+
+  // these tests are only mean't to be run within the DOM
+  if (isNode) return;
+
+  describe('TransitionAnimationEngine', () => {
+    let element: any;
+
+    beforeEach(() => {
+      MockAnimationDriver.log = [];
+      element = document.createElement('div');
+      document.body.appendChild(element);
+    });
+
+    afterEach(() => { document.body.removeChild(element); });
+
+    function makeEngine(normalizer?: AnimationStyleNormalizer) {
+      const engine = new TransitionAnimationEngine(
+          getBodyNode(), 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();
+        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'}))])
+        ]);
+
+        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([
+          {height: '0px', offset: 0}, {height: '100px', offset: 1}
+        ]);
+      });
+
+      it('should not queue an animation if the property value has not changed at all', () => {
+        const engine = makeEngine();
+
+        const trig = trigger('myTrigger', [
+          transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
+        ]);
+
+        registerTrigger(element, engine, trig);
+        engine.flush();
+        expect(engine.players.length).toEqual(0);
+
+        setProperty(element, engine, 'myTrigger', 'abc');
+        engine.flush();
+        expect(engine.players.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(() => {
+             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();
+
+        const trig = trigger('myTrigger', [
+          transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
+        ]);
+
+        let count = 0;
+        registerTrigger(element, engine, trig);
+        listen(element, engine, 'myTrigger', 'start', () => count++);
+        setProperty(element, engine, 'myTrigger', 'value');
+        expect(count).toEqual(0);
+
+        engine.flush();
+        expect(count).toEqual(1);
+      });
+
+      it('should listen to the onDone operation for the animation', () => {
+        const engine = makeEngine();
+
+        const trig = trigger('myTrigger', [
+          transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
+        ]);
+
+        let count = 0;
+        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);
+
+        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', []);
+        registerTrigger(element, engine, trig);
+
+        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(() => { listen(element, engine, 'myTrigger', 'explode', () => {}); })
+            .toThrowError(
+                /Unable to listen on the animation trigger event "explode" because the animation trigger "myTrigger" doesn\'t exist!/);
+      });
+
+      it('should throw an error when an undefined event is listened for', () => {
+        const engine = makeEngine();
+        const trig = trigger('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 successive animation state changes',
+         () => {
+           const engine = makeEngine();
+           const trig = trigger(
+               'myTrigger',
+               [transition(
+                   '* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])]);
+
+           registerTrigger(element, engine, trig);
+
+           let count = 0;
+           listen(element, engine, 'myTrigger', 'start', () => count++);
+
+           setProperty(element, engine, 'myTrigger', '123');
+           engine.flush();
+           expect(count).toEqual(1);
+
+           setProperty(element, engine, 'myTrigger', '456');
+           engine.flush();
+           expect(count).toEqual(2);
+         });
+
+      it('should only fire event listener changes for when the corresponding trigger changes state',
+         () => {
+           const engine = makeEngine();
+           const trig1 = trigger(
+               'myTrigger1',
+               [transition(
+                   '* => 123', [style({height: '0px'}), animate(1000, style({height: '100px'}))])]);
+           registerTrigger(element, engine, trig1);
+
+           const trig2 = trigger(
+               'myTrigger2',
+               [transition(
+                   '* => 123', [style({width: '0px'}), animate(1000, style({width: '100px'}))])]);
+           registerTrigger(element, engine, trig2);
+
+           let count = 0;
+           listen(element, engine, 'myTrigger1', 'start', () => count++);
+
+           setProperty(element, engine, 'myTrigger1', '123');
+           engine.flush();
+           expect(count).toEqual(1);
+
+           setProperty(element, engine, 'myTrigger2', '123');
+           engine.flush();
+           expect(count).toEqual(1);
+         });
+
+      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'}))])]);
+        registerTrigger(element, engine, trig);
+
+        let count = 0;
+        const deregisterFn = listen(element, engine, 'myTrigger', 'start', () => count++);
+        setProperty(element, engine, 'myTrigger', '123');
+        engine.flush();
+        expect(count).toEqual(1);
+
+        deregisterFn();
+        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();
+        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 isn't null
+        setProperty(element, engine, 'myTrigger', '123');
+        engine.flush();
+
+        let capture: AnimationEvent = null !;
+        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',
+          phaseName: 'start',
+          fromState: '123',
+          toState: '456',
+          totalTime: 1234,
+          disabled: false
+        });
+
+        capture = null !;
+        const player = engine.players.pop() !;
+        player.finish();
+
+        delete (capture as any)['_data'];
+        expect(capture).toEqual({
+          element,
+          triggerName: 'myTrigger',
+          phaseName: 'done',
+          fromState: '123',
+          toState: '456',
+          totalTime: 1234,
+          disabled: false
+        });
+      });
+    });
+
+    describe('transition operations', () => {
+      it('should persist the styles on the element as actual styles once the animation is complete',
+         () => {
+           const engine = makeEngine();
+           const trig = trigger('something', [
+             state('on', style({height: '100px'})), state('off', style({height: '0px'})),
+             transition('on => off', animate(9876))
+           ]);
+
+           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');
+           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 = trigger('something', [
+             state('a', style({height: '100px'})), state('b', style({height: '500px'})),
+             state('c', style({width: '200px'})), transition('* => *', animate(9876))
+           ]);
+
+           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');
+
+           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');
+           expect(element.style.height).not.toEqual('500px');
+         });
+
+      it('should allow two animation transitions with different triggers to animate in parallel',
+         () => {
+           const engine = makeEngine();
+           const trig1 = trigger('something1', [
+             state('a', style({width: '100px'})), state('b', style({width: '200px'})),
+             transition('* => *', animate(1000))
+           ]);
+
+           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++; }
+
+           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.players[1] !;
+           player2.onDone(doneCallback);
+           expect(doneCount).toEqual(0);
+
+           player1.finish();
+           expect(doneCount).toEqual(1);
+
+           player2.finish();
+           expect(doneCount).toEqual(2);
+
+           expect(element.style.width).toEqual('200px');
+           expect(element.style.height).toEqual('1000px');
+         });
+
+      it('should cancel a previously running animation when a follow-up transition kicks off on the same trigger',
+         () => {
+           const engine = makeEngine();
+           const trig = trigger('something', [
+             state('x', style({opacity: 0})),
+             state('y', style({opacity: .5})),
+             state('z', style({opacity: 1})),
+             transition('* => *', animate(1000)),
+           ]);
+
+           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.players[0];
+           setProperty(element, engine, trig.name, 'z');
+           engine.flush();
+
+           const player2 = engine.players[0];
+
+           expect(parseFloat(element.style.opacity)).not.toEqual(.5);
+
+           player2.finish();
+           expect(parseFloat(element.style.opacity)).toEqual(1);
+
+           player1.finish();
+           expect(parseFloat(element.style.opacity)).toEqual(1);
+         });
+
+      it('should pass in the previously running players into the follow-up transition player when cancelled',
+         () => {
+           const engine = makeEngine();
+           const trig = trigger('something', [
+             state('x', style({opacity: 0})), state('y', style({opacity: .5})),
+             state('z', style({opacity: 1})), transition('* => *', animate(1000))
+           ]);
+
+           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);
+
+           setProperty(element, engine, trig.name, 'z');
+           engine.flush();
+
+           const player2 = MockAnimationDriver.log.pop() !as MockAnimationPlayer;
+           expect(player2.previousPlayers).toEqual([player1]);
+           player2.finish();
+
+           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 = 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 player1 = engine.players[0];
+        player1.onDone(doneCallback);
+
+        expect(doneCount).toEqual(0);
+
+        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 = trigger('something', [
+             state('0', style({width: '0px'})), state('1', style({width: '100px'})),
+             transition('* => *', [animate(1000, style({height: '200px'}))])
+           ]);
+
+           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();
+           expect(element.style.height).not.toEqual('200px');
+           expect(element.style.width).toEqual('100px');
+         });
+
+      it('should default to using styling from the `*` state if a matching state is not found',
+         () => {
+           const engine = makeEngine();
+           const trig = trigger('something', [
+             state('a', style({opacity: 0})), state('*', style({opacity: .5})),
+             transition('* => *', animate(1000))
+           ]);
+
+           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 = trigger('something', [
+          state('a', style({opacity: 0})), state('void', style({opacity: .8})),
+          transition('* => *', animate(1000))
+        ]);
+
+        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('style normalizer', () => {
+      it('should normalize the style values that are animateTransitioned within an a transition animation',
+         () => {
+           const engine = makeEngine(new SuffixNormalizer('-normalized'));
+
+           const trig = trigger('something', [
+             state('on', style({height: 100})), state('off', style({height: 0})),
+             transition('on => off', animate(9876))
+           ]);
+
+           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 throw an error when normalization fails within a transition animation', () => {
+        const engine = makeEngine(new ExactCssValueNormalizer({left: '100px'}));
+
+        const trig = trigger('something', [
+          state('a', style({left: '0px', width: '200px'})),
+          state('b', style({left: '100px', width: '100px'})), transition('a => b', animate(9876))
+        ]);
+
+        registerTrigger(element, engine, trig);
+        setProperty(element, engine, trig.name, 'a');
+        setProperty(element, engine, trig.name, 'b');
+
+        let errorMessage = '';
+        try {
+          engine.flush();
+        } catch (e) {
+          errorMessage = e.toString();
+        }
+
+        expect(errorMessage).toMatch(/Unable to animate due to the following errors:/);
+        expect(errorMessage).toMatch(/- The CSS property `left` is not allowed to be `0px`/);
+        expect(errorMessage).toMatch(/- The CSS property `width` is not allowed/);
+      });
+    });
+
+    describe('view operations', () => {
+      it('should perform insert operations immediately ', () => {
+        const engine = makeEngine();
+
+        const child1 = document.createElement('div');
+        const child2 = document.createElement('div');
+        element.appendChild(child1);
+        element.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(element.contains(child1)).toBe(true);
+        expect(element.contains(child2)).toBe(true);
+      });
+
+      it('should not throw an error if a missing namespace is used', () => {
+        const engine = makeEngine();
+        const ID = 'foo';
+        const TRIGGER = 'fooTrigger';
+        expect(() => { engine.trigger(ID, element, TRIGGER, 'something'); }).not.toThrow();
+      });
+
+      it('should still apply state-styling to an element even if it is not yet inserted into the DOM',
+         () => {
+           const engine = makeEngine();
+           const orphanElement = document.createElement('div');
+           orphanElement.classList.add('orphan');
+
+           registerTrigger(
+               orphanElement, engine, trigger('trig', [
+                 state('go', style({opacity: 0.5})), transition('* => go', animate(1000))
+               ]));
+
+           setProperty(orphanElement, engine, 'trig', 'go');
+           engine.flush();
+           expect(engine.players.length).toEqual(0);
+           expect(orphanElement.style.opacity).toEqual('0.5');
+         });
+    });
+  });
+})();
+
+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 ExactCssValueNormalizer extends AnimationStyleNormalizer {
+  constructor(private _allowedValues: {[propName: string]: any}) { super(); }
+
+  normalizePropertyName(propertyName: string, errors: string[]): string {
+    if (!this._allowedValues[propertyName]) {
+      errors.push(`The CSS property \`${propertyName}\` is not allowed`);
+    }
+    return propertyName;
+  }
+
+  normalizeStyleValue(
+      userProvidedProperty: string, normalizedProperty: string, value: string|number,
+      errors: string[]): string {
+    const expectedValue = this._allowedValues[userProvidedProperty];
+    if (expectedValue != value) {
+      errors.push(`The CSS property \`${userProvidedProperty}\` is not allowed to be \`${value}\``);
+    }
+    return expectedValue;
+  }
+}
+
+function registerTrigger(
+    element: any, engine: TransitionAnimationEngine, metadata: AnimationTriggerMetadata,
+    id: string = DEFAULT_NAMESPACE_ID) {
+  const errors: any[] = [];
+  const driver = new MockAnimationDriver();
+  const name = metadata.name;
+  const ast = buildAnimationAst(driver, 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_driver_spec.ts b/packages/animations/browser/test/render/web_animations/web_animations_driver_spec.ts
new file mode 100644
index 000000000000..f66043f58b0c
--- /dev/null
+++ b/packages/animations/browser/test/render/web_animations/web_animations_driver_spec.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 {CssKeyframesPlayer} from '../../../src/render/css_keyframes/css_keyframes_player';
+import {DOMAnimation} from '../../../src/render/web_animations/dom_animation';
+import {WebAnimationsDriver} from '../../../src/render/web_animations/web_animations_driver';
+import {WebAnimationsPlayer} from '../../../src/render/web_animations/web_animations_player';
+
+{
+  describe('WebAnimationsDriver', () => {
+    if (isNode) return;
+
+    describe('when web-animations are not supported natively', () => {
+      it('should return an instance of a CssKeyframePlayer if scrubbing is not requested', () => {
+        const element = createElement();
+        const driver = makeDriver();
+        driver.overrideWebAnimationsSupport(false);
+        const player = driver.animate(element, [], 1000, 1000, '', [], false);
+        expect(player instanceof CssKeyframesPlayer).toBeTruthy();
+      });
+
+      it('should return an instance of a WebAnimationsPlayer if scrubbing is not requested', () => {
+        const element = createElement();
+        const driver = makeDriver();
+        driver.overrideWebAnimationsSupport(false);
+        const player = driver.animate(element, [], 1000, 1000, '', [], true);
+        expect(player instanceof WebAnimationsPlayer).toBeTruthy();
+      });
+    });
+
+    describe('when web-animations are supported natively', () => {
+      it('should return an instance of a WebAnimationsPlayer if scrubbing is not requested', () => {
+        const element = createElement();
+        const driver = makeDriver();
+        driver.overrideWebAnimationsSupport(true);
+        const player = driver.animate(element, [], 1000, 1000, '', [], false);
+        expect(player instanceof WebAnimationsPlayer).toBeTruthy();
+      });
+
+      it('should return an instance of a WebAnimationsPlayer if scrubbing is requested', () => {
+        const element = createElement();
+        const driver = makeDriver();
+        driver.overrideWebAnimationsSupport(true);
+        const player = driver.animate(element, [], 1000, 1000, '', [], true);
+        expect(player instanceof WebAnimationsPlayer).toBeTruthy();
+      });
+    });
+  });
+}
+
+function makeDriver() {
+  return new WebAnimationsDriver();
+}
+
+function createElement() {
+  return document.createElement('div');
+}
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 000000000000..c8e44bc11ca8
--- /dev/null
+++ b/packages/animations/browser/test/render/web_animations/web_animations_player_spec.ts
@@ -0,0 +1,82 @@
+/**
+ * @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';
+
+{
+  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']);
+    });
+
+    it('should fire start/done callbacks manually when called directly', () => {
+      const log: string[] = [];
+
+      const player = new WebAnimationsPlayer(element, [], {duration: 1000});
+      player.onStart(() => log.push('started'));
+      player.onDone(() => log.push('done'));
+
+      (player as any).triggerCallback('start');
+      expect(log).toEqual(['started']);
+
+      player.play();
+      expect(log).toEqual(['started']);
+
+      (player as any).triggerCallback('done');
+      expect(log).toEqual(['started', 'done']);
+
+      player.finish();
+      expect(log).toEqual(['started', 'done']);
+    });
+  });
+}
+
+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/shared.ts b/packages/animations/browser/test/shared.ts
new file mode 100644
index 000000000000..12904ef15723
--- /dev/null
+++ b/packages/animations/browser/test/shared.ts
@@ -0,0 +1,28 @@
+/**
+ * @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';
+import {MockAnimationDriver} from '../testing/src/mock_animation_driver';
+
+export function makeTrigger(
+    name: string, steps: any, skipErrors: boolean = false): AnimationTrigger {
+  const driver = new MockAnimationDriver();
+  const errors: any[] = [];
+  const triggerData = trigger(name, steps);
+  const triggerAst = buildAnimationAst(driver, 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/BUILD.bazel b/packages/animations/browser/testing/BUILD.bazel
new file mode 100644
index 000000000000..c8a98f45fbfa
--- /dev/null
+++ b/packages/animations/browser/testing/BUILD.bazel
@@ -0,0 +1,15 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(["**/*.ts"]),
+    module_name = "@angular/animations/browser/testing",
+    deps = [
+        "//packages/animations",
+        "//packages/animations/browser",
+    ],
+)
diff --git a/packages/animations/browser/testing/index.ts b/packages/animations/browser/testing/index.ts
new file mode 100644
index 000000000000..969471c0986d
--- /dev/null
+++ b/packages/animations/browser/testing/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 verifcation. `ngc`
+// replaces this file with production index.ts when it rewrites private symbol
+// names.
+
+export * from './public_api';
diff --git a/packages/animations/browser/testing/package.json b/packages/animations/browser/testing/package.json
new file mode 100644
index 000000000000..131f6090ffc7
--- /dev/null
+++ b/packages/animations/browser/testing/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/animations/browser/testing",
+  "typings": "./testing.d.ts",
+  "main": "../../bundles/animations-browser-testing.umd.js",
+  "module": "../../fesm5/browser/testing.js",
+  "es2015": "../../fesm2015/browser/testing.js",
+  "esm5": "../../esm5/browser/testing/testing.js",
+  "esm2015": "../../esm2015/browser/testing/testing.js",
+  "fesm5": "../../fesm5/browser/testing.js",
+  "fesm2015": "../../fesm2015/browser/testing.js"
+}
diff --git a/packages/animations/browser/testing/public_api.ts b/packages/animations/browser/testing/public_api.ts
new file mode 100644
index 000000000000..fcc511dc6e48
--- /dev/null
+++ b/packages/animations/browser/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 this package.
+ */
+export * from './src/testing';
diff --git a/packages/animations/browser/testing/rollup.config.js b/packages/animations/browser/testing/rollup.config.js
new file mode 100644
index 000000000000..8380bc9d351d
--- /dev/null
+++ b/packages/animations/browser/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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/animations': 'ng.animations',
+  '@angular/animations/browser': 'ng.animations.browser',
+  'rxjs': 'rxjs',
+};
+
+module.exports = {
+  entry: '../../../../dist/packages-dist/animations/fesm5/browser/testing.js',
+  dest: '../../../../dist/packages-dist/animations/bundles/animations-browser-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/animations/browser/testing'},
+  moduleName: 'ng.animations.browser.testing',
+  plugins: [resolve(), sourcemaps()],
+  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
new file mode 100644
index 000000000000..ae58ca494b2b
--- /dev/null
+++ b/packages/animations/browser/testing/src/mock_animation_driver.ts
@@ -0,0 +1,122 @@
+/**
+ * @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, NoopAnimationPlayer, ɵStyleData} from '@angular/animations';
+import {ɵAnimationDriver as AnimationDriver, ɵallowPreviousPlayerStylesMerge as allowPreviousPlayerStylesMerge, ɵcontainsElement as containsElement, ɵinvokeQuery as invokeQuery, ɵmatchesElement as matchesElement, ɵvalidateStyleProperty as validateStyleProperty} from '@angular/animations/browser';
+
+
+/**
+ * @experimental Animation support is experimental.
+ */
+export class MockAnimationDriver implements AnimationDriver {
+  static log: AnimationPlayer[] = [];
+
+  validateStyleProperty(prop: string): boolean { return validateStyleProperty(prop); }
+
+  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 {
+    const player =
+        new MockAnimationPlayer(element, keyframes, duration, delay, easing, previousPlayers);
+    MockAnimationDriver.log.push(<AnimationPlayer>player);
+    return player;
+  }
+}
+
+/**
+ * @experimental Animation support is experimental.
+ */
+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(duration, delay);
+
+    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]);
+        }
+      });
+    }
+  }
+
+  /* @internal */
+  onInit(fn: () => any) { this._onInitFns.push(fn); }
+
+  /* @internal */
+  init() {
+    super.init();
+    this._onInitFns.forEach(fn => fn());
+    this._onInitFns = [];
+  }
+
+  finish(): void {
+    super.finish();
+    this.__finished = true;
+  }
+
+  destroy(): void {
+    super.destroy();
+    this.__finished = true;
+  }
+
+  /* @internal */
+  triggerMicrotask() {}
+
+  play(): void {
+    super.play();
+    this.__started = true;
+  }
+
+  hasStarted() { return this.__started; }
+
+  beforeDestroy() {
+    const captures: ɵStyleData = {};
+
+    Object.keys(this.previousStyles).forEach(prop => {
+      captures[prop] = this.previousStyles[prop];
+    });
+
+    if (this.hasStarted()) {
+      // when assembling the captured styles, it's important that
+      // we build the keyframe styles in the following order:
+      // {other styles within keyframes, ... previousStyles }
+      this.keyframes.forEach(kf => {
+        Object.keys(kf).forEach(prop => {
+          if (prop != 'offset') {
+            captures[prop] = this.__finished ? kf[prop] : AUTO_STYLE;
+          }
+        });
+      });
+    }
+
+    this.currentSnapshot = captures;
+  }
+}
diff --git a/packages/animations/browser/testing/src/testing.ts b/packages/animations/browser/testing/src/testing.ts
new file mode 100644
index 000000000000..8d396ea92e97
--- /dev/null
+++ b/packages/animations/browser/testing/src/testing.ts
@@ -0,0 +1,8 @@
+/**
+ * @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 {MockAnimationDriver, MockAnimationPlayer} from './mock_animation_driver';
diff --git a/packages/animations/browser/testing/tsconfig-build.json b/packages/animations/browser/testing/tsconfig-build.json
new file mode 100644
index 000000000000..1b8d6a779b6e
--- /dev/null
+++ b/packages/animations/browser/testing/tsconfig-build.json
@@ -0,0 +1,29 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../../",
+    "paths": {
+      "@angular/animations": ["../../../../dist/packages/animations"],
+      "@angular/animations/browser": ["../../../../dist/packages/animations/browser"],
+      "@angular/core": ["../../../../dist/packages/core"]
+    },
+    "outDir": "../../../../dist/packages/animations"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../../../node_modules/@types/hammerjs/index.d.ts",
+    "../../../../node_modules/@types/jasmine/index.d.ts",
+    "../../../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "testing.js",
+    "flatModuleId": "@angular/animations/browser/testing"
+  }
+}
diff --git a/packages/animations/browser/tsconfig-build.json b/packages/animations/browser/tsconfig-build.json
new file mode 100644
index 000000000000..963bc8dfa2e4
--- /dev/null
+++ b/packages/animations/browser/tsconfig-build.json
@@ -0,0 +1,28 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/animations": ["../../../dist/packages/animations"],
+      "@angular/core": ["../../../dist/packages/core"]
+    },
+    "outDir": "../../../dist/packages/animations"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../../node_modules/@types/node/index.d.ts",
+    "../../../node_modules/zone.js/dist/zone.js.d.ts",
+    "../../system.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "browser.js",
+    "flatModuleId": "@angular/animations/browser"
+  }
+}
diff --git a/packages/animations/index.ts b/packages/animations/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/animations/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';
diff --git a/packages/animations/package.json b/packages/animations/package.json
new file mode 100644
index 000000000000..71b6559dad08
--- /dev/null
+++ b/packages/animations/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@angular/animations",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - animations integration with web-animations",
+  "main": "./bundles/animations.umd.js",
+  "module": "./fesm5/animations.js",
+  "es2015": "./fesm2015/animations.js",
+  "esm5": "./esm5/animations.js",
+  "esm2015": "./esm2015/animations.js",
+  "fesm5": "./fesm5/animations.js",
+  "fesm2015": "./fesm2015/animations.js",
+  "typings": "./animations.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/animations/public_api.ts b/packages/animations/public_api.ts
new file mode 100644
index 000000000000..3ebc27ff03b4
--- /dev/null
+++ b/packages/animations/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 this package.
+ */
+export * from './src/animations';
diff --git a/packages/animations/rollup.config.js b/packages/animations/rollup.config.js
new file mode 100644
index 000000000000..5a1aa1f7f21e
--- /dev/null
+++ b/packages/animations/rollup.config.js
@@ -0,0 +1,28 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/animations': 'ng.animations',
+  'rxjs': 'rxjs',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/animations/fesm5/animations.js',
+  dest: '../../dist/packages-dist/animations/bundles/animations.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/animations'},
+  moduleName: 'ng.animations',
+  plugins: [resolve(), sourcemaps()],
+  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 000000000000..5d8d826d31f5
--- /dev/null
+++ b/packages/animations/src/animation_builder.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 {AnimationMetadata, AnimationOptions} from './animation_metadata';
+import {AnimationPlayer} from './players/animation_player';
+
+/**
+ * An injectable service that produces an animation sequence programmatically within an
+ * Angular component or directive.
+ * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.
+ *
+ * @usageNotes
+ *
+ * To use this service, add it to your component or directive as a dependency.
+ * The service is instantiated along with your component.
+ *
+ * Apps do not typically need to create their own animation players, but if you
+ * do need to, follow these steps:
+ *
+ * 1. Use the `build()` method to create a programmatic animation using the
+ * `animate()` function. The method returns an `AnimationFactory` instance.
+ *
+ * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.
+ *
+ * 3. Use the player object to control the animation programmatically.
+ *
+ * For example:
+ *
+ * ```ts
+ * // import the service from BrowserAnimationsModule
+ * import {AnimationBuilder} from '@angular/animations';
+ * // require the service as a dependency
+ * class MyCmp {
+ *   constructor(private _builder: AnimationBuilder) {}
+ *
+ *   makeAnimation(element: any) {
+ *     // first define a reusable animation
+ *     const myAnimation = this._builder.build([
+ *       style({ width: 0 }),
+ *       animate(1000, style({ width: '100px' }))
+ *     ]);
+ *
+ *     // use the returned factory object to create a player
+ *     const player = myAnimation.create(element);
+ *
+ *     player.play();
+ *   }
+ * }
+ * ```
+ *
+ */
+export abstract class AnimationBuilder {
+  /**
+   * Builds a factory for producing a defined animation. 
+   * @param animation A reusable animation definition.
+   * @returns A factory object that can create a player for the defined animation.
+   * @see `animate()`
+   */
+  abstract build(animation: AnimationMetadata|AnimationMetadata[]): AnimationFactory;
+}
+
+/**
+ * A factory object returned from the `AnimationBuilder`.`build()` method.
+ *
+ */
+export abstract class AnimationFactory {
+  /**
+   * Creates an `AnimationPlayer` instance for the reusable animation defined by
+   * the `AnimationBuilder`.`build()` method that created this factory.
+   * Attaches the new player a DOM element.
+   * @param element The DOM element to which to attach the animation.
+   * @param options A set of options that can include a time delay and
+   * additional developer-defined parameters.
+   */
+  abstract create(element: any, options?: AnimationOptions): AnimationPlayer;
+}
diff --git a/packages/animations/src/animation_event.ts b/packages/animations/src/animation_event.ts
new file mode 100644
index 000000000000..36f4151edd3e
--- /dev/null
+++ b/packages/animations/src/animation_event.ts
@@ -0,0 +1,70 @@
+/**
+ * @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
+ */
+
+/**
+ * An instance of this class is returned as an event parameter when an animation
+ * callback is captured for an animation either during the start or done phase.
+ *
+ * ```typescript
+ * @Component({
+ *   host: {
+ *     '[@myAnimationTrigger]': 'someExpression',
+ *     '(@myAnimationTrigger.start)': 'captureStartEvent($event)',
+ *     '(@myAnimationTrigger.done)': 'captureDoneEvent($event)',
+ *   },
+ *   animations: [
+ *     trigger("myAnimationTrigger", [
+ *        // ...
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   someExpression: any = false;
+ *   captureStartEvent(event: AnimationEvent) {
+ *     // the toState, fromState and totalTime data is accessible from the event variable
+ *   }
+ *
+ *   captureDoneEvent(event: AnimationEvent) {
+ *     // the toState, fromState and totalTime data is accessible from the event variable
+ *   }
+ * }
+ * ```
+ *
+ * @experimental Animation support is experimental.
+ */
+export interface AnimationEvent {
+  /**
+   * The name of the state from which the animation is triggered.
+   */
+  fromState: string;
+  /**
+   * The name of the state in which the animation completes.
+   */
+  toState: string;
+  /**
+   * The time it takes the animation to complete, in milliseconds.
+   */
+  totalTime: number;
+  /**
+   * The animation phase in which the callback was invoked, one of
+   * "start" or "done".
+   */
+  phaseName: string;
+  /**
+   * The element to which the animation is attached.
+   */
+  element: any;
+  /**
+   * Internal.
+   */
+  triggerName: string;
+  /**
+   * Internal.
+   */
+  disabled: boolean;
+}
diff --git a/packages/animations/src/animation_metadata.ts b/packages/animations/src/animation_metadata.ts
new file mode 100755
index 000000000000..f370757a48a2
--- /dev/null
+++ b/packages/animations/src/animation_metadata.ts
@@ -0,0 +1,1248 @@
+/**
+ * @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
+ */
+
+/**
+ * Represents a set of CSS styles for use in an animation style.
+ */
+export interface ɵStyleData { [key: string]: string|number; }
+
+/**
+* Represents animation-step timing parameters for an animation step.  
+* @see `animate()`
+*/
+export declare type AnimateTimings = {
+  /**
+   * The full duration of an animation step. A number and optional time unit,
+   * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
+   * The default unit is milliseconds.
+   */
+  duration: number,
+  /**
+   * The delay in applying an animation step. A number and optional time unit.
+   * The default unit is milliseconds.
+   */
+  delay: number,
+  /**
+   * An easing style that controls how an animations step accelerates
+   * and decelerates during its run time. An easing function such as `cubic-bezier()`,
+   * or one of the following constants:
+   * - `ease-in`
+   * - `ease-out`
+   * - `ease-in-and-out`
+   */
+  easing: string | null
+};
+
+/**
+ * @description Options that control animation styling and timing.
+ *
+ * The following animation functions accept `AnimationOptions` data:
+ *
+ * - `transition()`
+ * - `sequence()`
+ * - `{@link animations/group group()}`
+ * - `query()`
+ * - `animation()`
+ * - `useAnimation()`
+ * - `animateChild()`
+ *
+ * Programmatic animations built using the `AnimationBuilder` service also
+ * make use of `AnimationOptions`.
+ */
+export declare interface AnimationOptions {
+  /**
+   * Sets a time-delay for initiating an animation action.
+   * A number and optional time unit, such as "1s" or "10ms" for one second
+   * and 10 milliseconds, respectively.The default unit is milliseconds.
+   * Default value is 0, meaning no delay.
+   */
+  delay?: number|string;
+  /**
+  * A set of developer-defined parameters that modify styling and timing
+  * when an animation action starts. An array of key-value pairs, where the provided value
+  * is used as a default.
+  */
+  params?: {[name: string]: any};
+}
+
+/**
+ * Adds duration options to control animation styling and timing for a child animation.
+ *
+ * @see `animateChild()`
+ */
+export declare interface AnimateChildOptions extends AnimationOptions { duration?: number|string; }
+
+/**
+ * @description Constants for the categories of parameters that can be defined for animations.
+ *
+ * A corresponding function defines a set of parameters for each category, and
+ * collects them into a corresponding `AnimationMetadata` object.
+ */
+export const enum AnimationMetadataType {
+  /**
+   * Associates a named animation state with a set of CSS styles.
+   * See `state()`
+   */
+  State = 0,
+  /**
+   * Data for a transition from one animation state to another.
+   * See `transition()`
+   */
+  Transition = 1,
+  /**
+   * Contains a set of animation steps.
+   * See `sequence()`
+   */
+  Sequence = 2,
+  /**
+   * Contains a set of animation steps.
+   * See `{@link animations/group group()}`
+   */
+  Group = 3,
+  /**
+   * Contains an animation step.
+   * See `animate()`
+   */
+  Animate = 4,
+  /**
+   * Contains a set of animation steps.
+   * See `keyframes()`
+   */
+  Keyframes = 5,
+  /**
+   * Contains a set of CSS property-value pairs into a named style.
+   * See `style()`
+   */
+  Style = 6,
+  /**
+   * Associates an animation with an entry trigger that can be attached to an element.
+   * See `trigger()`
+   */
+  Trigger = 7,
+  /**
+   * Contains a re-usable animation.
+   * See `animation()`
+   */
+  Reference = 8,
+  /**
+   * Contains data to use in executing child animations returned by a query.
+   * See `animateChild()`
+   */
+  AnimateChild = 9,
+  /**
+   * Contains animation parameters for a re-usable animation.
+   * See `useAnimation()`
+   */
+  AnimateRef = 10,
+  /**
+   * Contains child-animation query data.
+   * See `query()`
+   */
+  Query = 11,
+  /**
+   * Contains data for staggering an animation sequence.
+   * See `stagger()`
+   */
+  Stagger = 12
+}
+
+/**
+ * Specifies automatic styling.
+ */
+export const AUTO_STYLE = '*';
+
+/**
+ * Base for animation data structures.
+ */
+export interface AnimationMetadata { type: AnimationMetadataType; }
+
+/**
+ * Contains an animation trigger. Instantiated and returned by the
+ * `trigger()` function.
+ */
+export interface AnimationTriggerMetadata extends AnimationMetadata {
+  /**
+    * The trigger name, used to associate it with an element. Unique within the component.
+    */
+  name: string;
+  /**
+   * An animation definition object, containing an array of state and transition declarations.
+   */
+  definitions: AnimationMetadata[];
+  /**
+   * An options object containing a delay and
+   * developer-defined parameters that provide styling defaults and
+   * can be overridden on invocation. Default delay is 0.
+   */
+  options: {params?: {[name: string]: any}}|null;
+}
+
+/**
+ * Encapsulates an animation state by associating a state name with a set of CSS styles.
+ * Instantiated and returned by the `state()` function.
+ */
+export interface AnimationStateMetadata extends AnimationMetadata {
+  /**
+   * The state name, unique within the component.
+   */
+  name: string;
+  /**
+   *  The CSS styles associated with this state.
+   */
+  styles: AnimationStyleMetadata;
+  /**
+   * An options object containing
+   * developer-defined parameters that provide styling defaults and
+   * can be overridden on invocation.
+   */
+  options?: {params: {[name: string]: any}};
+}
+
+/**
+ * Encapsulates an animation transition. Instantiated and returned by the
+ * `transition()` function.
+ */
+export interface AnimationTransitionMetadata extends AnimationMetadata {
+  /**
+   * An expression that describes a state change.
+   */
+  expr: string|
+      ((fromState: string, toState: string, element?: any,
+        params?: {[key: string]: any}) => boolean);
+  /**
+   * One or more animation objects to which this transition applies.
+   */
+  animation: AnimationMetadata|AnimationMetadata[];
+  /**
+   * An options object containing a delay and
+   * developer-defined parameters that provide styling defaults and
+   * can be overridden on invocation. Default delay is 0.
+   */
+  options: AnimationOptions|null;
+}
+
+/**
+ * Encapsulates a reusable animation, which is a collection of individual animation steps.
+ * Instantiated and returned by the `animation()` function, and
+ * passed to the `useAnimation()` function.
+ */
+export interface AnimationReferenceMetadata extends AnimationMetadata {
+  /**
+   *  One or more animation step objects.
+   */
+  animation: AnimationMetadata|AnimationMetadata[];
+  /**
+   * An options object containing a delay and
+   * developer-defined parameters that provide styling defaults and
+   * can be overridden on invocation. Default delay is 0.
+   */
+  options: AnimationOptions|null;
+}
+
+/**
+ * Encapsulates an animation query. Instantiated and returned by
+ * the `query()` function.
+ */
+export interface AnimationQueryMetadata extends AnimationMetadata {
+  /**
+   *  The CSS selector for this query.
+   */
+  selector: string;
+  /**
+   * One or more animation step objects.
+   */
+  animation: AnimationMetadata|AnimationMetadata[];
+  /**
+   * A query options object.
+   */
+  options: AnimationQueryOptions|null;
+}
+
+/**
+ * Encapsulates a keyframes sequence. Instantiated and returned by
+ * the `keyframes()` function.
+ */
+export interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {
+  /**
+   * An array of animation styles.
+   */
+  steps: AnimationStyleMetadata[];
+}
+
+/**
+ * Encapsulates an animation style. Instantiated and returned by
+ * the `style()` function.
+ */
+export interface AnimationStyleMetadata extends AnimationMetadata {
+  /**
+   * A set of CSS style properties.
+   */
+  styles: '*'|{[key: string]: string | number}|Array<{[key: string]: string | number}|'*'>;
+  /**
+   * A percentage of the total animate time at which the style is to be applied.
+   */
+  offset: number|null;
+}
+
+/**
+ * Encapsulates an animation step. Instantiated and returned by
+ * the `animate()` function.
+ */
+export interface AnimationAnimateMetadata extends AnimationMetadata {
+  /**
+   * The timing data for the step.
+   */
+  timings: string|number|AnimateTimings;
+  /**
+   * A set of styles used in the step.
+   */
+  styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata|null;
+}
+
+/**
+ * Encapsulates a child animation, that can be run explicitly when the parent is run.
+ * Instantiated and returned by the `animateChild` function.
+ */
+export interface AnimationAnimateChildMetadata extends AnimationMetadata {
+  /**
+   * An options object containing a delay and
+   * developer-defined parameters that provide styling defaults and
+   * can be overridden on invocation. Default delay is 0.
+   */
+  options: AnimationOptions|null;
+}
+
+/**
+ * Encapsulates a reusable animation.
+ * Instantiated and returned by the `useAnimation()` function.
+ */
+export interface AnimationAnimateRefMetadata extends AnimationMetadata {
+  /**
+   * An animation reference object.
+   */
+  animation: AnimationReferenceMetadata;
+  /**
+   * An options object containing a delay and
+   * developer-defined parameters that provide styling defaults and
+   * can be overridden on invocation. Default delay is 0.
+   */
+  options: AnimationOptions|null;
+}
+
+/**
+ * Encapsulates an animation sequence.
+ * Instantiated and returned by the `sequence()` function.
+ */
+export interface AnimationSequenceMetadata extends AnimationMetadata {
+  /**
+   *  An array of animation step objects.
+   */
+  steps: AnimationMetadata[];
+  /**
+   * An options object containing a delay and
+   * developer-defined parameters that provide styling defaults and
+   * can be overridden on invocation. Default delay is 0.
+   */
+  options: AnimationOptions|null;
+}
+
+/**
+ * Encapsulates an animation group.
+ * Instantiated and returned by the `{@link animations/group group()}` function.
+ */
+export interface AnimationGroupMetadata extends AnimationMetadata {
+  /**
+   * One or more animation or style steps that form this group.
+   */
+  steps: AnimationMetadata[];
+  /**
+   * An options object containing a delay and
+   * developer-defined parameters that provide styling defaults and
+   * can be overridden on invocation. Default delay is 0.
+   */
+  options: AnimationOptions|null;
+}
+
+/**
+ * Encapsulates animation query options.
+ * Passed to the `query()` function.
+ */
+export declare interface AnimationQueryOptions extends AnimationOptions {
+  /**
+   * True if this query is optional, false if it is required. Default is false.
+   * A required query throws an error if no elements are retrieved when
+   * the query is executed. An optional query does not.
+   *
+   */
+  optional?: boolean;
+  /**
+   * A maximum total number of results to return from the query.
+   * If negative, results are limited from the end of the query list towards the beginning.
+   * By default, results are not limited.
+   */
+  limit?: number;
+}
+
+/**
+ * Encapsulates parameters for staggering the start times of a set of animation steps.
+ * Instantiated and returned by the `stagger()` function.
+ **/
+export interface AnimationStaggerMetadata extends AnimationMetadata {
+  /**
+   * The timing data for the steps.
+   */
+  timings: string|number;
+  /**
+   * One or more animation steps.
+   */
+  animation: AnimationMetadata|AnimationMetadata[];
+}
+
+/**
+ * Creates a named animation trigger, containing a  list of `state()`
+ * and `transition()` entries to be evaluated when the expression
+ * bound to the trigger changes.
+ *
+ * @param name An identifying string.
+ * @param definitions  An animation definition object, containing an array of `state()`
+ * and `transition()` declarations.
+ *
+ * @return An object that encapsulates the trigger data.
+ * 
+ * @usageNotes
+ * Define an animation trigger in the `animations` section of `@Component` metadata.
+ * In the template, reference the trigger by name and bind it to a trigger expression that
+ * evaluates to a defined animation state, using the following format:
+ *
+ * `[@triggerName]="expression"`
+ *
+ * Animation trigger bindings convert all values to strings, and then match the 
+ * previous and current values against any linked transitions.
+ * Booleans can be specified as `1` or `true` and `0` or `false`.
+ *
+ * ### Usage Example
+ * 
+ * The following example creates an animation trigger reference based on the provided
+ * name value.
+ * The provided animation value is expected to be an array consisting of state and
+ * transition declarations.
+ *
+ * ```typescript
+ * @Component({
+ *   selector: "my-component",
+ *   templateUrl: "my-component-tpl.html",
+ *   animations: [
+ *     trigger("myAnimationTrigger", [
+ *       state(...),
+ *       state(...),
+ *       transition(...),
+ *       transition(...)
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   myStatusExp = "something";
+ * }
+ * ```
+ *
+ * The template associated with this component makes use of the defined trigger
+ * by binding to an element within its template code.
+ *
+ * ```html
+ * <!-- somewhere inside of my-component-tpl.html -->
+ * <div [@myAnimationTrigger]="myStatusExp">...</div>
+ * ```
+ *
+ * ### Using an inline function
+ * The `transition` animation method also supports reading an inline function which can decide
+ * if its associated animation should be run.
+ *
+ * ```typescript
+ * // this method is run each time the `myAnimationTrigger` trigger value changes.
+ * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
+ string]: any}): boolean {
+ *   // notice that `element` and `params` are also available here
+ *   return toState == 'yes-please-animate';
+ * }
+ *
+ * @Component({
+ *   selector: 'my-component',
+ *   templateUrl: 'my-component-tpl.html',
+ *   animations: [
+ *     trigger('myAnimationTrigger', [
+ *       transition(myInlineMatcherFn, [
+ *         // the animation sequence code
+ *       ]),
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   myStatusExp = "yes-please-animate";
+ * }
+ * ```
+ *
+ * ### Disabling Animations
+ * When true, the special animation control binding `@.disabled` binding prevents 
+ * all animations from rendering.
+ * Place the  `@.disabled` binding on an element to disable
+ * animations on the element itself, as well as any inner animation triggers
+ * within the element.
+ *
+ * The following example shows how to use this feature:
+ *
+ * ```typescript
+ * @Component({
+ *   selector: 'my-component',
+ *   template: `
+ *     <div [@.disabled]="isDisabled">
+ *       <div [@childAnimation]="exp"></div>
+ *     </div>
+ *   `,
+ *   animations: [
+ *     trigger("childAnimation", [
+ *       // ...
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   isDisabled = true;
+ *   exp = '...';
+ * }
+ * ```
+ *
+ * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,
+ * along with any inner animations.
+ *
+ * ### Disable animations application-wide
+ * When an area of the template is set to have animations disabled, 
+ * **all** inner components have their animations disabled as well.
+ * This means that you can disable all animations for an app
+ * by placing a host binding set on `@.disabled` on the topmost Angular component.
+ *
+ * ```typescript
+ * import {Component, HostBinding} from '@angular/core';
+ *
+ * @Component({
+ *   selector: 'app-component',
+ *   templateUrl: 'app.component.html',
+ * })
+ * class AppComponent {
+ *   @HostBinding('@.disabled')
+ *   public animationsDisabled = true;
+ * }
+ * ```
+ *
+ * ### Overriding disablement of inner animations
+ * Despite inner animations being disabled, a parent animation can `query()`
+ * for inner elements located in disabled areas of the template and still animate 
+ * them if needed. This is also the case for when a sub animation is 
+ * queried by a parent and then later animated using `animateChild()`.
+ *
+ * ### Detecting when an animation is disabled
+ * If a region of the DOM (or the entire application) has its animations disabled, the animation
+ * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides
+ * an instance of an `AnimationEvent`. If animations are disabled,
+ * the `.disabled` flag on the event is true.
+ *
+ * @experimental Animation support is experimental.
+ */
+export function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata {
+  return {type: AnimationMetadataType.Trigger, name, definitions, options: {}};
+}
+
+/**
+ * Defines an animation step that combines styling information with timing information.
+ *
+ * @param timings Sets `AnimateTimings` for the parent animation.
+ * A string in the format "duration [delay] [easing]".
+ *  - Duration and delay are expressed as a number and optional time unit,
+ * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
+ * The default unit is milliseconds.
+ *  - The easing value controls how the animation accelerates and decelerates
+ * during its runtime. Value is one of  `ease`, `ease-in`, `ease-out`,
+ * `ease-in-out`, or a `cubic-bezier()` function call.
+ * If not supplied, no easing is applied.
+ *
+ * For example, the string "1s 100ms ease-out" specifies a duration of
+ * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style,
+ * which decelerates near the end of the duration.
+ * @param styles Sets AnimationStyles for the parent animation.
+ * A function call to either `style()` or `keyframes()`
+ * that returns a collection of CSS style entries to be applied to the parent animation.
+ * When null, uses the styles from the destination state.
+ * This is useful when describing an animation step that will complete an animation;
+ * see "Animating to the final state" in `transitions()`.
+ * @returns An object that encapsulates the animation step.
+ *
+ * @usageNotes
+ * Call within an animation `sequence()`, `{@link animations/group group()}`, or
+ * `transition()` call to specify an animation step
+ * that applies given style data to the parent animation for a given amount of time.
+ *
+ * ### Syntax Examples
+ * **Timing examples**
+ *
+ * The following examples show various `timings` specifications.
+ * - `animate(500)` : Duration is 500 milliseconds.
+ * - `animate("1s")` : Duration is 1000 milliseconds.
+ * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds.
+ * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in.
+ * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10
+ * milliseconds, easing according to a bezier curve.
+ *
+ * **Style examples**
+ *
+ * The following example calls `style()` to set a single CSS style.
+ * ```typescript
+ * animate(500, style({ background: "red" }))
+ * ```
+ * The following example calls `keyframes()` to set a CSS style
+ * to different values for successive keyframes.
+ * ```typescript
+ * animate(500, keyframes(
+ *  [
+ *   style({ background: "blue" })),
+ *   style({ background: "red" }))
+ *  ])
+ * ```
+ */
+export function animate(
+    timings: string | number, styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata |
+        null = null): AnimationAnimateMetadata {
+  return {type: AnimationMetadataType.Animate, styles, timings};
+}
+
+/**
+ * @description Defines a list of animation steps to be run in parallel.
+ *
+ * @param steps An array of animation step objects.
+ * - When steps are defined by `style()` or `animate()`
+ * function calls, each call within the group is executed instantly.
+ * - To specify offset styles to be applied at a later time, define steps with
+ * `keyframes()`, or use `animate()` calls with a delay value.
+ * For example:
+ * 
+ * ```typescript
+ * group([
+ *   animate("1s", { background: "black" }))
+ *   animate("2s", { color: "white" }))
+ * ])
+ * ```
+ *
+ * @param options An options object containing a delay and
+ * developer-defined parameters that provide styling defaults and
+ * can be overridden on invocation.
+ *
+ * @return An object that encapsulates the group data.
+ *
+ * @usageNotes
+ * Grouped animations are useful when a series of styles must be 
+ * animated at different starting times and closed off at different ending times.
+ *
+ * When called within a `sequence()` or a
+ * `transition()` call, does not continue to the next
+ * instruction until all of the inner animation steps have completed.
+ */
+export function group(
+    steps: AnimationMetadata[], options: AnimationOptions | null = null): AnimationGroupMetadata {
+  return {type: AnimationMetadataType.Group, steps, options};
+}
+
+/**
+ * Defines a list of animation steps to be run sequentially, one by one.
+ *
+ * @param steps An array of animation step objects.
+ * - Steps defined by `style()` calls apply the styling data immediately.
+ * - Steps defined by `animate()` calls apply the styling data over time
+ *   as specified by the timing data.
+ *
+ * ```typescript
+ * sequence([
+ *   style({ opacity: 0 })),
+ *   animate("1s", { opacity: 1 }))
+ * ])
+ * ```
+ *
+ * @param options An options object containing a delay and
+ * developer-defined parameters that provide styling defaults and
+ * can be overridden on invocation.
+ *
+ * @return An object that encapsulates the sequence data.
+ *
+ * @usageNotes
+ * When you pass an array of steps to a
+ * `transition()` call, the steps run sequentially by default.
+ * Compare this to the `{@link animations/group group()}` call, which runs animation steps in parallel.
+ *
+ * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,
+ * execution continues to the next instruction only after each of the inner animation
+ * steps have completed.
+ *
+ **/
+export function sequence(steps: AnimationMetadata[], options: AnimationOptions | null = null):
+    AnimationSequenceMetadata {
+  return {type: AnimationMetadataType.Sequence, steps, options};
+}
+
+/**
+ * Declares a key/value object containing CSS properties/styles that
+ * can then be used for an animation `state`, within an animation `sequence`,
+ * or as styling data for calls to `animate()` and `keyframes()`.
+ *
+ * @param tokens A set of CSS styles or HTML styles associated with an animation state.
+ * The value can be any of the following:
+ * - A key-value style pair associating a CSS property with a value.
+ * - An array of key-value style pairs.
+ * - An asterisk (*), to use auto-styling, where styles are derived from the element
+ * being animated and applied to the animation when it starts.
+ *
+ * Auto-styling can be used to define a state that depends on layout or other 
+ * environmental factors.
+ *
+ * @return An object that encapsulates the style data.
+ *
+ * @usageNotes
+ * The following examples create animation styles that collect a set of
+ * CSS property values:
+ * 
+ * ```typescript
+ * // string values for CSS properties
+ * style({ background: "red", color: "blue" })
+ *
+ * // numerical pixel values
+ * style({ width: 100, height: 0 })
+ * ```
+ *
+ * The following example uses auto-styling to allow a component to animate from
+ * a height of 0 up to the height of the parent element:
+ *
+ * ```
+ * style({ height: 0 }),
+ * animate("1s", style({ height: "*" }))
+ * ```
+ *
+ **/
+export function style(
+    tokens: '*' | {[key: string]: string | number} |
+    Array<'*'|{[key: string]: string | number}>): AnimationStyleMetadata {
+  return {type: AnimationMetadataType.Style, styles: tokens, offset: null};
+}
+
+/**
+ * Declares an animation state within a trigger attached to an element.
+ *
+ * @param name One or more names for the defined state in a comma-separated string.
+ * The following reserved state names can be supplied to define a style for specific use
+ * cases:
+ *
+ * - `void` You can associate styles with this name to be used when
+ * the element is detached from the application. For example, when an `ngIf` evaluates
+ * to false, the state of the associated element is void.
+ *  - `*` (asterisk) Indicates the default state. You can associate styles with this name
+ * to be used as the fallback when the state that is being animated is not declared
+ * within the trigger.
+ *
+ * @param styles A set of CSS styles associated with this state, created using the
+ * `style()` function.
+ * This set of styles persists on the element once the state has been reached.
+ * @param options Parameters that can be passed to the state when it is invoked.
+ * 0 or more key-value pairs.
+ * @return An object that encapsulates the new state data.
+ *
+ * @usageNotes
+ * Use the `trigger()` function to register states to an animation trigger.
+ * Use the `transition()` function to animate between states.
+ * When a state is active within a component, its associated styles persist on the element,
+ * even when the animation ends.
+ **/
+export function state(
+    name: string, styles: AnimationStyleMetadata,
+    options?: {params: {[name: string]: any}}): AnimationStateMetadata {
+  return {type: AnimationMetadataType.State, name, styles, options};
+}
+
+/**
+ * Defines a set of animation styles, associating each style with an optional `offset` value.
+ *
+ * @param steps A set of animation styles with optional offset data.
+ * The optional `offset` value for a style specifies a percentage of the total animation
+ * time at which that style is applied.
+ * @returns An object that encapsulates the keyframes data.
+ *
+ * @usageNotes
+ * Use with the `animate()` call. Instead of applying animations
+ * from the current state
+ * to the destination state, keyframes describe how each style entry is applied and at what point
+ * within the animation arc.
+ * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).
+ *
+ * ### Usage
+ *
+ * In the following example, the offset values describe
+ * when each `backgroundColor` value is applied. The color is red at the start, and changes to
+ * blue when 20% of the total time has elapsed.
+ *
+ * ```typescript
+ * // the provided offset values
+ * animate("5s", keyframes([
+ *   style({ backgroundColor: "red", offset: 0 }),
+ *   style({ backgroundColor: "blue", offset: 0.2 }),
+ *   style({ backgroundColor: "orange", offset: 0.3 }),
+ *   style({ backgroundColor: "black", offset: 1 })
+ * ]))
+ * ```
+ *
+ * If there are no `offset` values specified in the style entries, the offsets
+ * are calculated automatically.
+ *
+ * ```typescript
+ * animate("5s", keyframes([
+ *   style({ backgroundColor: "red" }) // offset = 0
+ *   style({ backgroundColor: "blue" }) // offset = 0.33
+ *   style({ backgroundColor: "orange" }) // offset = 0.66
+ *   style({ backgroundColor: "black" }) // offset = 1
+ * ]))
+ *```
+ */
+export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata {
+  return {type: AnimationMetadataType.Keyframes, steps};
+}
+
+/**
+ * Declares an animation transition as a sequence of animation steps to run when a given
+ * condition is satisfied. The condition is a Boolean expression or function that compares
+ * the previous and current animation states, and returns true if this transition should occur.
+ * When the state criteria of a defined transition are met, the associated animation is
+ * triggered.
+ *
+ * @param stateChangeExpr A Boolean expression or function that compares the previous and current
+ * animation states, and returns true if this transition should occur. Note that  "true" and "false"
+ * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the
+ * animation trigger element.
+ * The animation steps run when the expression evaluates to true.
+ *
+ * - A state-change string takes the form "state1 => state2", where each side is a defined animation
+ * state, or an asterix (*) to refer to a dynamic start or end state.
+ *   - The expression string can contain multiple comma-separated statements;
+ * for example "state1 => state2, state3 => state4".
+ *   - Special values `:enter` and `:leave` initiate a transition on the entry and exit states,
+ * equivalent to  "void => *"  and "* => void".
+ *   - Special values `:increment` and `:decrement` initiate a transition when a numeric value has
+ * increased or decreased in value.
+ * - A function is executed each time a state change occurs in the animation trigger element.
+ * The animation steps run when the function returns true.
+ *
+ * @param steps One or more animation objects, as returned by the `animate()` or
+ * `sequence()` function, that form a transformation from one state to another.
+ * A sequence is used by default when you pass an array.
+ * @param options An options object that can contain a delay value for the start of the animation,
+ * and additional developer-defined parameters. Provided values for additional parameters are used
+ * as defaults, and override values can be passed to the caller on invocation.
+ * @returns An object that encapsulates the transition data.
+ *
+ * @usageNotes
+ * The template associated with a component binds an animation trigger to an element.
+ *
+ * ```HTML
+ * <!-- somewhere inside of my-component-tpl.html -->
+ * <div [@myAnimationTrigger]="myStatusExp">...</div>
+ * ```
+ *
+ * All transitions are defined within an animation trigger,
+ * along with named states that the transitions change to and from.
+ *
+ * ```typescript
+ * trigger("myAnimationTrigger", [
+ *  // define states
+ *  state("on", style({ background: "green" })),
+ *  state("off", style({ background: "grey" })),
+ *  ...]
+ * ```
+ *
+ * Note that when you call the `sequence()` function within a `{@link animations/group group()}`
+ * or a `transition()` call, execution does not continue to the next instruction
+ * until each of the inner animation steps have completed.
+ *
+ * ### Syntax examples
+ *
+ * The following examples define transitions between the two defined states (and default states),
+ * using various options:
+ *
+ * ```typescript
+ * // Transition occurs when the state value
+ * // bound to "myAnimationTrigger" changes from "on" to "off"
+ * transition("on => off", animate(500))
+ * // Run the same animation for both directions
+ * transition("on <=> off", animate(500))
+ * // Define multiple state-change pairs separated by commas
+ * transition("on => off, off => void", animate(500))
+ * ```
+ *
+ * ### Special values for state-change expressions
+ *
+ * - Catch-all state change for when an element is inserted into the page and the
+ * destination state is unknown:
+ *
+ * ```typescript
+ * transition("void => *", [
+ *  style({ opacity: 0 }),
+ *  animate(500)
+ *  ])
+ * ```
+ *
+ * - Capture a state change between any states:
+ *
+ *  `transition("* => *", animate("1s 0s"))`
+ *
+ * - Entry and exit transitions:
+ *
+ * ```typescript
+ * transition(":enter", [
+ *   style({ opacity: 0 }),
+ *   animate(500, style({ opacity: 1 }))
+ *   ]),
+ * transition(":leave", [
+ *   animate(500, style({ opacity: 0 }))
+ *   ])
+ * ```
+ *
+ * - Use `:increment` and `:decrement` to initiate transitions:
+ *
+ * ```typescript
+ * 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%' }))
+ *  ])
+ * ]))
+ * ```
+ *
+ * ### State-change functions
+ *
+ * Here is an example of a `fromState` specified as a state-change function that invokes an
+ * animation when true:
+ *
+ * ```typescript
+ * transition((fromState, toState) =>
+ *  {
+ *   return fromState == "off" && toState == "on";
+ *  },
+ *  animate("1s 0s"))
+ * ```
+ *
+ * ### Animating to the final state
+ *
+ * If the final step in a transition is a call to `animate()` that uses a timing value
+ * with no style data, that step is automatically considered the final animation arc,
+ * for the element to reach the final state. Angular automatically adds or removes
+ * CSS styles to ensure that the element is in the correct final state.
+ *
+ * The following example defines a transition that starts by hiding the element,
+ * then makes sure that it animates properly to whatever state is currently active for trigger:
+ *
+ * ```typescript
+ * transition("void => *", [
+ *   style({ opacity: 0 }),
+ *   animate(500)
+ *  ])
+ * ```
+ * ### Boolean value matching
+ * If a trigger binding value is a Boolean, it can be matched using a transition expression
+ * that compares true and false or 1 and 0. For example:
+ *
+ * ```
+ * // in the template
+ * <div [@openClose]="open ? true : false">...</div>
+ * // in the component metadata
+ * trigger('openClose', [
+ *   state('true', style({ height: '*' })),
+ *   state('false', style({ height: '0px' })),
+ *   transition('false <=> true', animate(500))
+ * ])
+ * ```
+ **/
+export function transition(
+    stateChangeExpr: string | ((fromState: string, toState: string, element?: any,
+                                params?: {[key: string]: any}) => boolean),
+    steps: AnimationMetadata | AnimationMetadata[],
+    options: AnimationOptions | null = null): AnimationTransitionMetadata {
+  return {type: AnimationMetadataType.Transition, expr: stateChangeExpr, animation: steps, options};
+}
+
+/**
+ * Produces a reusable animation that can be invoked in another animation or sequence,
+ * by calling the `useAnimation()` function.
+ *
+ * @param steps One or more animation objects, as returned by the `animate()`
+ * or `sequence()` function, that form a transformation from one state to another.
+ * A sequence is used by default when you pass an array.
+ * @param options An options object that can contain a delay value for the start of the
+ * animation, and additional developer-defined parameters.
+ * Provided values for additional parameters are used as defaults,
+ * and override values can be passed to the caller on invocation.
+ * @returns An object that encapsulates the animation data.
+ *
+ * @usageNotes
+ * The following example defines a reusable animation, providing some default parameter
+ * values.
+ *
+ * ```typescript
+ * var fadeAnimation = animation([
+ *   style({ opacity: '{{ start }}' }),
+ *   animate('{{ time }}',
+ *   style({ opacity: '{{ end }}'}))
+ *   ],
+ *   { params: { time: '1000ms', start: 0, end: 1 }});
+ * ```
+ *
+ * The following invokes the defined animation with a call to `useAnimation()`,
+ * passing in override parameter values.
+ *
+ * ```js
+ * useAnimation(fadeAnimation, {
+ *   params: {
+ *     time: '2s',
+ *     start: 1,
+ *     end: 0
+ *   }
+ * })
+ * ```
+ *
+ * If any of the passed-in parameter values are missing from this call,
+ * the default values are used. If one or more parameter values are missing before a step is
+ * animated, `useAnimation()` throws an error.
+ */
+export function animation(
+    steps: AnimationMetadata | AnimationMetadata[],
+    options: AnimationOptions | null = null): AnimationReferenceMetadata {
+  return {type: AnimationMetadataType.Reference, animation: steps, options};
+}
+
+/**
+ * Executes a queried inner animation element within an animation sequence.
+ *
+ * @param options An options object that can contain a delay value for the start of the
+ * animation, and additional override values for developer-defined parameters.
+ * @return An object that encapsulates the child animation data.
+ *
+ * @usageNotes
+ * Each time an animation is triggered in Angular, the parent animation
+ * has priority and any child animations are blocked. In order
+ * for a child animation to run, the parent animation must query each of the elements
+ * containing child animations, and run them using this function.
+ *
+ * Note that this feature designed to be used with `query()` and it will only work
+ * with animations that are assigned using the Angular animation library. CSS keyframes
+ * and transitions are not handled by this API.
+ */
+export function animateChild(options: AnimateChildOptions | null = null):
+    AnimationAnimateChildMetadata {
+  return {type: AnimationMetadataType.AnimateChild, options};
+}
+
+/**
+ * Starts a reusable animation that is created using the `animation()` function.
+ *
+ * @param animation The reusable animation to start.
+ * @param options An options object that can contain a delay value for the start of 
+ * the animation, and additional override values for developer-defined parameters.
+ * @return An object that contains the animation parameters.
+ */
+export function useAnimation(
+    animation: AnimationReferenceMetadata,
+    options: AnimationOptions | null = null): AnimationAnimateRefMetadata {
+  return {type: AnimationMetadataType.AnimateRef, animation, options};
+}
+
+/**
+ * Finds one or more inner elements within the current element that is
+ * being animated within a sequence. Use with `animateChild()`.
+ *
+ * @param selector The element to query, or a set of elements that contain Angular-specific
+ * characteristics, specified with one or more of the following tokens.
+ *  - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements.
+ *  - `query(":animating")` : Query all currently animating elements.
+ *  - `query("@triggerName")` : Query elements that contain an animation trigger.
+ *  - `query("@*")` : Query all elements that contain an animation triggers.
+ *  - `query(":self")` : Include the current element into the animation sequence.
+ *
+ * @param animation One or more animation steps to apply to the queried element or elements.
+ * An array is treated as an animation sequence.
+ * @param options An options object. Use the 'limit' field to limit the total number of
+ * items to collect.
+ * @return An object that encapsulates the query data.
+ *
+ * @usageNotes
+ * Tokens can be merged into a combined query selector string. For example:
+ *
+ * ```typescript
+ *  query(':self, .record:enter, .record:leave, @subTrigger', [...])
+ * ```
+ *
+ * The `query()` function collects multiple elements and works internally by using
+ * `element.querySelectorAll`. Use the `limit` field of an options object to limit
+ * the total number of items to be collected. For example:
+ *
+ * ```js
+ * query('div', [
+ *   animate(...),
+ *   animate(...)
+ * ], { limit: 1 })
+ * ```
+ *
+ * By default, throws an error when zero items are found. Set the
+ * `optional` flag to ignore this error. For example:
+ *
+ * ```js
+ * query('.some-element-that-may-not-be-there', [
+ *   animate(...),
+ *   animate(...)
+ * ], { optional: true })
+ * ```
+ *
+ * ### Usage Example
+ *
+ * The following example queries for inner elements and animates them
+ * individually using `animateChild()`. 
+ *
+ * ```typescript
+ * @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';
+ *   }
+ * }
+ * ```
+ */
+export function query(
+    selector: string, animation: AnimationMetadata | AnimationMetadata[],
+    options: AnimationQueryOptions | null = null): AnimationQueryMetadata {
+  return {type: AnimationMetadataType.Query, selector, animation, options};
+}
+
+/**
+ * Use within an animation `query()` call to issue a timing gap after
+ * each queried item is animated.
+ *
+ * @param timings A delay value.
+ * @param animation One ore more animation steps.
+ * @returns An object that encapsulates the stagger data.
+ *
+ * @usageNotes
+ * In the following example, a container element 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.
+ *
+ * Each time items are added, the opacity fade-in animation runs,
+ * and each removed item is faded out.
+ * When either of these animations occur, the stagger effect is
+ * applied after each item's animation is started.
+ *
+ * ```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>
+ * ```
+ *
+ * Here is the component code:
+ *
+ * ```typescript
+ * 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();
+ *    }
+ *  }
+ * ```
+ *
+ * Here is the animation trigger code:
+ *
+ * ```typescript
+ * 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 }))
+ *       ])
+ *     ])
+ *   ])
+ * ])
+ * ```
+ */
+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
new file mode 100644
index 000000000000..7f8acfadc9c2
--- /dev/null
+++ b/packages/animations/src/animations.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
+ */
+
+/**
+ * @module
+ * @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, 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
new file mode 100644
index 000000000000..c1f6a40c23ab
--- /dev/null
+++ b/packages/animations/src/players/animation_group_player.ts
@@ -0,0 +1,157 @@
+/**
+ * @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 {scheduleMicroTask} from '../util';
+import {AnimationPlayer} from './animation_player';
+
+/**
+ * A programmatic controller for a group of reusable animations.
+ * Used internally to control animations.
+ *
+ * @see `AnimationPlayer`
+ * @see `{@link animations/group group()}`
+ *
+ */
+export class AnimationGroupPlayer implements AnimationPlayer {
+  private _onDoneFns: Function[] = [];
+  private _onStartFns: Function[] = [];
+  private _finished = false;
+  private _started = false;
+  private _destroyed = false;
+  private _onDestroyFns: Function[] = [];
+
+  public parentPlayer: AnimationPlayer|null = null;
+  public totalTime: number = 0;
+  public readonly players: AnimationPlayer[];
+
+  constructor(_players: AnimationPlayer[]) {
+    this.players = _players;
+    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.onDone(() => {
+          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() {
+    if (!this._finished) {
+      this._finished = true;
+      this._onDoneFns.forEach(fn => fn());
+      this._onDoneFns = [];
+    }
+  }
+
+  init(): void { this.players.forEach(player => player.init()); }
+
+  onStart(fn: () => void): void { this._onStartFns.push(fn); }
+
+  private _onStart() {
+    if (!this.hasStarted()) {
+      this._started = true;
+      this._onStartFns.forEach(fn => fn());
+      this._onStartFns = [];
+    }
+  }
+
+  onDone(fn: () => void): void { this._onDoneFns.push(fn); }
+
+  onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
+
+  hasStarted() { return this._started; }
+
+  play() {
+    if (!this.parentPlayer) {
+      this.init();
+    }
+    this._onStart();
+    this.players.forEach(player => player.play());
+  }
+
+  pause(): void { this.players.forEach(player => player.pause()); }
+
+  restart(): void { this.players.forEach(player => player.restart()); }
+
+  finish(): void {
+    this._onFinish();
+    this.players.forEach(player => player.finish());
+  }
+
+  destroy(): void { this._onDestroy(); }
+
+  private _onDestroy() {
+    if (!this._destroyed) {
+      this._destroyed = true;
+      this._onFinish();
+      this.players.forEach(player => player.destroy());
+      this._onDestroyFns.forEach(fn => fn());
+      this._onDestroyFns = [];
+    }
+  }
+
+  reset(): void {
+    this.players.forEach(player => player.reset());
+    this._destroyed = false;
+    this._finished = false;
+    this._started = false;
+  }
+
+  setPosition(p: number): void {
+    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 {
+    let min = 0;
+    this.players.forEach(player => {
+      const p = player.getPosition();
+      min = Math.min(p, min);
+    });
+    return min;
+  }
+
+  beforeDestroy(): void {
+    this.players.forEach(player => {
+      if (player.beforeDestroy) {
+        player.beforeDestroy();
+      }
+    });
+  }
+
+  /** @internal */
+  triggerCallback(phaseName: string): void {
+    const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
+    methods.forEach(fn => fn());
+    methods.length = 0;
+  }
+}
diff --git a/packages/animations/src/players/animation_player.ts b/packages/animations/src/players/animation_player.ts
new file mode 100644
index 000000000000..3813a9a44f4d
--- /dev/null
+++ b/packages/animations/src/players/animation_player.ts
@@ -0,0 +1,178 @@
+/**
+ * @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 {scheduleMicroTask} from '../util';
+
+/**
+ * Provides programmatic control of a reusable animation sequence,
+ * built using the `build()` method of `AnimationBuilder`. The `build()` method
+ * returns a factory, whose `create()` method instantiates and initializes this interface.
+ *
+ * @see `AnimationBuilder`
+ * @see `AnimationFactory`
+ * @see `animate()` 
+ *
+ */
+export interface AnimationPlayer {
+  /**
+   * Provides a callback to invoke when the animation finishes.
+   * @param fn The callback function.
+   * @see `finish()`
+   */
+  onDone(fn: () => void): void;
+  /**
+   * Provides a callback to invoke when the animation starts.
+   * @param fn The callback function.
+   * @see `run()`
+   */
+  onStart(fn: () => void): void;
+  /**
+   * Provides a callback to invoke after the animation is destroyed.
+   * @param fn The callback function.
+   * @see `destroy()`
+   * @see `beforeDestroy()`
+   */
+  onDestroy(fn: () => void): void;
+  /**
+   * Initializes the animation.
+   */
+  init(): void;
+  /**
+   * Reports whether the animation has started.
+   * @returns True if the animation has started, false otherwise.
+   */
+  hasStarted(): boolean;
+  /**
+   * Runs the animation, invoking the `onStart()` callback.
+   */
+  play(): void;
+  /**
+   * Pauses the animation.
+   */
+  pause(): void;
+  /**
+   * Restarts the paused animation.
+   */
+  restart(): void;
+  /**
+   * Ends the animation, invoking the `onDone()` callback.
+   */
+  finish(): void;
+  /**
+   * Destroys the animation, after invoking the `beforeDestroy()` callback.
+   * Calls the `onDestroy()` callback when destruction is completed.
+   */
+  destroy(): void;
+  /**
+   * Resets the animation to its initial state.
+   */
+  reset(): void;
+  /**
+   * Sets the position of the animation.
+   * @param position A 0-based offset into the duration, in milliseconds.
+   */
+  setPosition(position: any /** TODO #9100 */): void;
+  /**
+   * Reports the current position of the animation.
+   * @returns A 0-based offset into the duration, in milliseconds.
+   */
+  getPosition(): number;
+  /**
+   * The parent of this player, if any.
+   */
+  parentPlayer: AnimationPlayer|null;
+  /**
+   * The total run time of the animation, in milliseconds.
+   */
+  readonly totalTime: number;
+  /**
+   * Provides a callback to invoke before the animation is destroyed.
+   */
+  beforeDestroy?: () => any;
+  /** @internal
+   * Internal
+   */
+  triggerCallback?: (phaseName: string) => void;
+  /** @internal
+   * Internal
+   */
+  disabled?: boolean;
+}
+
+/**
+ * An empty programmatic controller for reusable animations.
+ * Used internally when animations are disabled, to avoid
+ * checking for the null case when an animation player is expected.
+ *
+ * @see `animate()`
+ * @see `AnimationPlayer`
+ * @see `GroupPlayer`
+ *
+ */
+export class NoopAnimationPlayer implements AnimationPlayer {
+  private _onDoneFns: Function[] = [];
+  private _onStartFns: Function[] = [];
+  private _onDestroyFns: Function[] = [];
+  private _started = false;
+  private _destroyed = false;
+  private _finished = false;
+  public parentPlayer: AnimationPlayer|null = null;
+  public readonly totalTime: number;
+  constructor(duration: number = 0, delay: number = 0) { this.totalTime = duration + delay; }
+  private _onFinish() {
+    if (!this._finished) {
+      this._finished = true;
+      this._onDoneFns.forEach(fn => fn());
+      this._onDoneFns = [];
+    }
+  }
+  onStart(fn: () => void): void { this._onStartFns.push(fn); }
+  onDone(fn: () => void): void { this._onDoneFns.push(fn); }
+  onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
+  hasStarted(): boolean { return this._started; }
+  init(): void {}
+  play(): void {
+    if (!this.hasStarted()) {
+      this._onStart();
+      this.triggerMicrotask();
+    }
+    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(); }
+  destroy(): void {
+    if (!this._destroyed) {
+      this._destroyed = true;
+      if (!this.hasStarted()) {
+        this._onStart();
+      }
+      this.finish();
+      this._onDestroyFns.forEach(fn => fn());
+      this._onDestroyFns = [];
+    }
+  }
+  reset(): void {}
+  setPosition(position: number): void {}
+  getPosition(): number { return 0; }
+
+  /** @internal */
+  triggerCallback(phaseName: string): void {
+    const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
+    methods.forEach(fn => fn());
+    methods.length = 0;
+  }
+}
diff --git a/packages/animations/src/private_export.ts b/packages/animations/src/private_export.ts
new file mode 100644
index 000000000000..69b331402634
--- /dev/null
+++ b/packages/animations/src/private_export.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 {AnimationGroupPlayer as ɵAnimationGroupPlayer} from './players/animation_group_player';
+export const ɵPRE_STYLE = '!';
diff --git a/packages/animations/src/util.ts b/packages/animations/src/util.ts
new file mode 100644
index 000000000000..530e64707e48
--- /dev/null
+++ b/packages/animations/src/util.ts
@@ -0,0 +1,10 @@
+/**
+ * @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 scheduleMicroTask(cb: () => any) {
+  Promise.resolve(null).then(cb);
+}
diff --git a/packages/animations/src/version.ts b/packages/animations/src/version.ts
new file mode 100644
index 000000000000..ead04f916420
--- /dev/null
+++ b/packages/animations/src/version.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
+ */
+
+/**
+ * @module
+ * @description
+ * Entry point for all public APIs of the animation package.
+ */
+
+/**
+ * @description
+ *
+ * Represents the version of angular/animations
+ */
+export class Version {
+  public readonly major: string;
+  public readonly minor: string;
+  public readonly patch: string;
+
+  constructor(public full: string) {
+    const splits = full.split('.');
+    this.major = splits[0];
+    this.minor = splits[1];
+    this.patch = splits.slice(2).join('.');
+  }
+}
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/animations/test/BUILD.bazel b/packages/animations/test/BUILD.bazel
new file mode 100644
index 000000000000..5e023cb7850e
--- /dev/null
+++ b/packages/animations/test/BUILD.bazel
@@ -0,0 +1,12 @@
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "test",
+    testonly = 1,
+    srcs = glob(["test/**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/animations",
+        "//packages/core/testing",
+    ],
+)
diff --git a/packages/animations/test/animation_player_spec.ts b/packages/animations/test/animation_player_spec.ts
new file mode 100644
index 000000000000..7ad7152d6018
--- /dev/null
+++ b/packages/animations/test/animation_player_spec.ts
@@ -0,0 +1,83 @@
+/**
+ * @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 {fakeAsync} from '@angular/core/testing';
+import {flushMicrotasks} from '../../core/testing/src/fake_async';
+import {NoopAnimationPlayer} from '../src/players/animation_player';
+import {scheduleMicroTask} from '../src/util';
+
+{
+  describe('NoopAnimationPlayer', function() {
+    it('should finish after the next microtask once started', fakeAsync(() => {
+         const log: string[] = [];
+
+         const player = new NoopAnimationPlayer();
+         player.onStart(() => log.push('started'));
+         player.onDone(() => log.push('done'));
+         flushMicrotasks();
+
+         expect(log).toEqual([]);
+         player.play();
+         expect(log).toEqual(['started']);
+
+         flushMicrotasks();
+         expect(log).toEqual(['started', 'done']);
+       }));
+
+    it('should fire all callbacks when destroyed', () => {
+      const log: string[] = [];
+
+      const player = new NoopAnimationPlayer();
+      player.onStart(() => log.push('started'));
+      player.onDone(() => log.push('done'));
+      player.onDestroy(() => log.push('destroy'));
+      expect(log).toEqual([]);
+
+      player.destroy();
+      expect(log).toEqual(['started', 'done', 'destroy']);
+    });
+
+    it('should fire start/done callbacks manually when called directly', fakeAsync(() => {
+         const log: string[] = [];
+
+         const player = new NoopAnimationPlayer();
+         player.onStart(() => log.push('started'));
+         player.onDone(() => log.push('done'));
+         flushMicrotasks();
+
+         (player as any).triggerCallback('start');
+         expect(log).toEqual(['started']);
+
+         player.play();
+         expect(log).toEqual(['started']);
+
+         (player as any).triggerCallback('done');
+         expect(log).toEqual(['started', 'done']);
+
+         player.finish();
+         expect(log).toEqual(['started', 'done']);
+
+         flushMicrotasks();
+         expect(log).toEqual(['started', 'done']);
+       }));
+
+    it('should fire off start callbacks before triggering the finish callback', fakeAsync(() => {
+         const log: string[] = [];
+
+         const player = new NoopAnimationPlayer();
+         player.onStart(() => { scheduleMicroTask(() => log.push('started')); });
+         player.onDone(() => log.push('done'));
+         expect(log).toEqual([]);
+
+         player.play();
+         expect(log).toEqual([]);
+
+         flushMicrotasks();
+         expect(log).toEqual(['started', 'done']);
+       }));
+  });
+}
diff --git a/packages/animations/test/util_spec.ts b/packages/animations/test/util_spec.ts
new file mode 100644
index 000000000000..dc5070a4c6d8
--- /dev/null
+++ b/packages/animations/test/util_spec.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 {scheduleMicroTask} from '../src/util';
+
+{
+  describe('util', () => {
+    it('should schedule a microtask and not call an async timeout', (done) => {
+      let count = 0;
+      scheduleMicroTask(() => count++);
+
+      expect(count).toEqual(0);
+      Promise.resolve(null).then(() => {
+        expect(count).toEqual(1);
+        done();
+      });
+      expect(count).toEqual(0);
+    });
+  });
+}
diff --git a/packages/animations/tsconfig-build.json b/packages/animations/tsconfig-build.json
new file mode 100644
index 000000000000..f3ecc805f619
--- /dev/null
+++ b/packages/animations/tsconfig-build.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"]
+    },
+    "outDir": "../../dist/packages/animations"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts",
+    "../system.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "animations.js",
+    "flatModuleId": "@angular/animations"
+  }
+}
diff --git a/packages/bazel/BUILD.bazel b/packages/bazel/BUILD.bazel
new file mode 100644
index 000000000000..282edb9a4046
--- /dev/null
+++ b/packages/bazel/BUILD.bazel
@@ -0,0 +1,25 @@
+load("//tools:defaults.bzl", "npm_package")
+
+genrule(
+    name = "workspace",
+    outs = ["WORKSPACE"],
+    cmd = "echo 'workspace(name=\"angular\")' > $@",
+)
+
+npm_package(
+    name = "npm_package",
+    srcs = [
+        "BUILD.bazel",
+        "index.bzl",
+        "package.json",
+        "//packages/bazel/src:package_assets",
+    ],
+    packages = ["//packages/bazel/docs"],
+    # Re-host //packages/bazel/ which is just // in the public distro
+    replacements = {
+        "//packages/bazel/": "//",
+        "angular/packages/bazel/": "angular/",
+    },
+    tags = ["release-with-framework"],
+    deps = [":workspace"],
+)
diff --git a/packages/bazel/docs/BUILD.bazel b/packages/bazel/docs/BUILD.bazel
new file mode 100644
index 000000000000..234fb875daad
--- /dev/null
+++ b/packages/bazel/docs/BUILD.bazel
@@ -0,0 +1,16 @@
+load("@io_bazel_skydoc//skylark:skylark.bzl", "skylark_doc")
+
+skylark_doc(
+    name = "docs",
+    srcs = [
+        "//packages/bazel/src:ng_module.bzl",
+        "//packages/bazel/src:ng_rollup_bundle.bzl",
+        "//packages/bazel/src:ng_setup_workspace.bzl",
+        "//packages/bazel/src/ng_package:ng_package.bzl",
+        "//packages/bazel/src/protractor:protractor_web_test.bzl",
+    ],
+    format = "html",
+    site_root = "/bazel-builds",
+    strip_prefix = "packages/bazel/",
+    visibility = ["//packages/bazel:__subpackages__"],
+)
diff --git a/packages/bazel/index.bzl b/packages/bazel/index.bzl
new file mode 100644
index 000000000000..76e190177332
--- /dev/null
+++ b/packages/bazel/index.bzl
@@ -0,0 +1,25 @@
+# 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
+""" Public API surface is re-exported here.
+
+Users should not load files under "/src"
+"""
+
+load("//packages/bazel/src:ng_module.bzl", _ng_module = "ng_module")
+load("//packages/bazel/src:ng_setup_workspace.bzl", _ng_setup_workspace = "ng_setup_workspace")
+load("//packages/bazel/src/ng_package:ng_package.bzl", _ng_package = "ng_package")
+load(
+    "//packages/bazel/src/protractor:protractor_web_test.bzl",
+    _protractor_web_test = "protractor_web_test",
+    _protractor_web_test_suite = "protractor_web_test_suite",
+)
+
+ng_module = _ng_module
+ng_package = _ng_package
+protractor_web_test = _protractor_web_test
+protractor_web_test_suite = _protractor_web_test_suite
+ng_setup_workspace = _ng_setup_workspace
+# DO NOT ADD PUBLIC API without including in the documentation generation
+# Run `bazel build //packages/bazel/docs` to verify
diff --git a/packages/bazel/package.json b/packages/bazel/package.json
new file mode 100644
index 000000000000..b922668a5723
--- /dev/null
+++ b/packages/bazel/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@angular/bazel",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - bazel build rules",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "@bazel/typescript": "^0.15.0",
+    "@types/node": "6.0.84",
+    "protobufjs": "5.0.0"
+  },
+  "peerDependencies": {
+    "@angular/compiler-cli": "0.0.0-PLACEHOLDER",
+    "typescript": ">=2.7.2 <2.10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  }
+}
diff --git a/packages/bazel/src/BUILD.bazel b/packages/bazel/src/BUILD.bazel
new file mode 100644
index 000000000000..427aa6499df8
--- /dev/null
+++ b/packages/bazel/src/BUILD.bazel
@@ -0,0 +1,31 @@
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "package_assets",
+    srcs = glob(["*"]) + [
+        "//packages/bazel/src/ng_package:package_assets",
+        "//packages/bazel/src/ngc-wrapped:package_assets",
+        "//packages/bazel/src/protractor:package_assets",
+    ],
+    visibility = ["//packages/bazel:__subpackages__"],
+)
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary")
+
+nodejs_binary(
+    name = "rollup_with_build_optimizer",
+    data = ["@angular_cli//packages/angular_devkit/build_optimizer:lib"],
+    # Since our rule extends the one in rules_nodejs, we use the same runtime
+    # dependency @build_bazel_rules_nodejs_rollup_deps. We don't need any
+    # additional npm dependencies when we run rollup or uglify.
+    entry_point = "build_bazel_rules_nodejs_rollup_deps/node_modules/rollup/bin/rollup",
+    install_source_map_support = False,
+    node_modules = "@build_bazel_rules_nodejs_rollup_deps//:node_modules",
+)
+
+nodejs_binary(
+    name = "modify_tsconfig",
+    data = ["modify_tsconfig.js"],
+    entry_point = "angular/packages/bazel/src/modify_tsconfig.js",
+    install_source_map_support = False,
+)
diff --git a/packages/bazel/src/esm5.bzl b/packages/bazel/src/esm5.bzl
new file mode 100644
index 000000000000..097815e4865e
--- /dev/null
+++ b/packages/bazel/src/esm5.bzl
@@ -0,0 +1,175 @@
+# 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 ES5 syntax with ESModule import/exports.
+
+This exposes another flavor of output JavaScript, which is ES5 syntax
+with ES2015 module syntax (import/export).
+All Bazel rules should consume the standard dev or prod mode.
+However we need to publish this flavor on NPM, so it's necessary to be able
+to produce it.
+"""
+
+# The provider downstream rules use to access the outputs
+ESM5Info = provider(
+    doc = "Typescript compilation outputs in ES5 syntax with ES Modules",
+    fields = {
+        "transitive_output": """Dict of [rootDir, .js depset] entries.
+
+        The value is a depset of the .js output files.
+        The key is the prefix that should be stripped off the files
+        when resolving modules, eg. for file
+          bazel-bin/[external/wkspc/]path/to/package/label.esm5/path/to/package/file.js
+        the rootdir would be
+          bazel-bin/[external/wkspc/]path/to/package/label.esm5""",
+    },
+)
+
+def _map_closure_path(file):
+    result = file.short_path[:-len(".closure.js")]
+
+    # short_path is meant to be used when accessing runfiles in a binary, where
+    # the CWD is inside the current repo. Therefore files in external repo have a
+    # short_path of ../external/wkspc/path/to/package
+    # We want to strip the first two segments from such paths.
+    if (result.startswith("../")):
+        result = "/".join(result.split("/")[2:])
+    return result + ".js"
+
+def _join(array):
+    return "/".join([p for p in array if p])
+
+def _esm5_outputs_aspect(target, ctx):
+    if not hasattr(target, "typescript"):
+        return []
+
+    # We create a new tsconfig.json file that will have our compilation settings
+    tsconfig = ctx.actions.declare_file("%s_esm5.tsconfig.json" % target.label.name)
+
+    workspace = target.label.workspace_root if target.label.workspace_root else ""
+
+    # re-root the outputs under a ".esm5" directory so the path don't collide
+    out_dir = ctx.label.name + ".esm5"
+    if workspace:
+        out_dir = out_dir + "/" + workspace
+
+    outputs = [
+        ctx.actions.declare_file(_join([out_dir, _map_closure_path(f)]))
+        for f in target.typescript.replay_params.outputs
+        if not f.short_path.endswith(".externs.js")
+    ]
+
+    ctx.actions.run(
+        executable = ctx.executable._modify_tsconfig,
+        inputs = [target.typescript.replay_params.tsconfig],
+        outputs = [tsconfig],
+        arguments = [
+            target.typescript.replay_params.tsconfig.path,
+            tsconfig.path,
+            _join([workspace, target.label.package, ctx.label.name + ".esm5"]),
+            ctx.bin_dir.path,
+        ],
+    )
+
+    ctx.actions.run(
+        progress_message = "Compiling TypeScript (ES5 with ES Modules) %s" % target.label,
+        inputs = target.typescript.replay_params.inputs + [tsconfig],
+        outputs = outputs,
+        arguments = [tsconfig.path],
+        executable = target.typescript.replay_params.compiler,
+        execution_requirements = {
+            # TODO(alexeagle): enable worker mode for these compilations
+            "supports-workers": "0",
+        },
+    )
+
+    root_dir = _join([
+        ctx.bin_dir.path,
+        workspace,
+        target.label.package,
+        ctx.label.name + ".esm5",
+    ])
+
+    transitive_output = {root_dir: depset(outputs)}
+    for dep in ctx.rule.attr.deps:
+        if ESM5Info in dep:
+            transitive_output.update(dep[ESM5Info].transitive_output)
+
+    return [ESM5Info(
+        transitive_output = transitive_output,
+    )]
+
+# Downstream rules can use this aspect to access the ESM5 output flavor.
+# Only terminal rules (those which expect never to be used in deps[]) should do
+# this.
+esm5_outputs_aspect = aspect(
+    implementation = _esm5_outputs_aspect,
+    # Recurse to the deps of any target we visit
+    attr_aspects = ["deps"],
+    attrs = {
+        "_modify_tsconfig": attr.label(
+            default = Label("//packages/bazel/src:modify_tsconfig"),
+            executable = True,
+            cfg = "host",
+        ),
+        # We must list tsc_wrapped here to ensure it's built before the action runs
+        # For some reason, having the compiler output as an input to the action above
+        # is not sufficient.
+        "_tsc_wrapped": attr.label(
+            default = Label("@build_bazel_rules_typescript//internal:tsc_wrapped_bin"),
+            executable = True,
+            cfg = "host",
+        ),
+        # Same comment as for tsc_wrapped above.
+        "_ngc_wrapped": attr.label(
+            default = Label("//packages/bazel/src/ngc-wrapped"),
+            executable = True,
+            cfg = "host",
+        ),
+    },
+)
+
+def esm5_root_dir(ctx):
+    return ctx.label.name + ".esm5"
+
+def flatten_esm5(ctx):
+    """Merge together the .esm5 folders from the dependencies.
+
+    Two different dependencies A and B may have outputs like
+    `bazel-bin/path/to/A.esm5/path/to/lib.js`
+    `bazel-bin/path/to/B.esm5/path/to/main.js`
+
+    In order to run rollup on this app, in case main.js contains `import from './lib'`
+    they need to be together in the same root directory, so if we depend on both A and B
+    we need the outputs to be
+    `bazel-bin/path/to/my_rule.esm5/path/to/lib.js`
+    `bazel-bin/path/to/my_rule.esm5/path/to/main.js`
+
+    Args:
+      ctx: the skylark rule execution context
+
+    Returns:
+      list of flattened files
+    """
+    esm5_sources = []
+    result = []
+    for dep in ctx.attr.deps:
+        if ESM5Info in dep:
+            transitive_output = dep[ESM5Info].transitive_output
+            esm5_sources.extend(transitive_output.values())
+    for f in depset(transitive = esm5_sources).to_list():
+        path = f.short_path[f.short_path.find(".esm5") + len(".esm5"):]
+        if (path.startswith("../")):
+            path = "external/" + path[3:]
+        rerooted_file = ctx.actions.declare_file("/".join([esm5_root_dir(ctx), path]))
+        result.append(rerooted_file)
+
+        # print("copy", f.short_path, "to", rerooted_file.short_path)
+        ctx.actions.expand_template(
+            output = rerooted_file,
+            template = f,
+            substitutions = {},
+        )
+    return result
diff --git a/packages/bazel/src/modify_tsconfig.js b/packages/bazel/src/modify_tsconfig.js
new file mode 100644
index 000000000000..e1e5508e993b
--- /dev/null
+++ b/packages/bazel/src/modify_tsconfig.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
+ */
+
+/**
+ * @fileoverview Read a tsconfig.json file intended to produce production mode
+ * JS output, modify it to produce esm5 output instead, and write the result
+ * to disk.
+ */
+const fs = require('fs');
+const path = require('path');
+
+function main(args) {
+  if (args.length < 3) {
+    console.error('Usage: $0 input.tsconfig.json output.tsconfig.json newRoot binDir');
+  }
+  [input, output, newRoot, binDir] = args;
+
+  const data = JSON.parse(fs.readFileSync(input, {encoding: 'utf-8'}));
+  data['compilerOptions']['target'] = 'es5';
+  data['bazelOptions']['es5Mode'] = true;
+  // Enable tsickle for decorator downleveling only
+  data['bazelOptions']['tsickle'] = true;
+  data['bazelOptions']['tsickleExternsPath'] = '';
+  data['compilerOptions']['outDir'] = path.join(data['compilerOptions']['outDir'], newRoot);
+  if (data['angularCompilerOptions']) {
+    // Don't enable tsickle's closure conversions
+    data['angularCompilerOptions']['annotateForClosureCompiler'] = false;
+    data['angularCompilerOptions']['expectedOut'] =
+        data['angularCompilerOptions']['expectedOut'].map(
+            f => f.replace(/\.closure\.js$/, '.js').replace(binDir, path.join(binDir, newRoot)));
+  }
+  fs.writeFileSync(output, JSON.stringify(data));
+}
+
+if (require.main === module) {
+  process.exitCode = main(process.argv.slice(2));
+}
diff --git a/packages/bazel/src/ng_module.bzl b/packages/bazel/src/ng_module.bzl
new file mode 100644
index 000000000000..4d37bf8f05ab
--- /dev/null
+++ b/packages/bazel/src/ng_module.bzl
@@ -0,0 +1,560 @@
+# 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
+"""Run Angular's AOT template compiler
+"""
+
+load(
+    ":rules_typescript.bzl",
+    "COMMON_ATTRIBUTES",
+    "COMMON_OUTPUTS",
+    "DEPS_ASPECTS",
+    "compile_ts",
+    "ts_providers_dict_to_struct",
+    "tsc_wrapped_tsconfig",
+)
+
+def compile_strategy(ctx):
+    """Detect which strategy should be used to implement ng_module.
+
+    Depending on the value of the 'compile' define flag or the '_global_mode' attribute, ng_module
+    can be implemented in various ways. This function reads the configuration passed by the user and
+    determines which mode is active.
+
+    Args:
+      ctx: skylark rule execution context
+
+    Returns:
+      one of 'legacy', 'local', 'jit', or 'global' depending on the configuration in ctx
+    """
+
+    strategy = "legacy"
+    if "compile" in ctx.var:
+        strategy = ctx.var["compile"]
+
+    if strategy not in ["legacy", "local", "jit"]:
+        fail("Unknown --define=compile value '%s'" % strategy)
+
+    if strategy == "legacy" and hasattr(ctx.attr, "_global_mode") and ctx.attr._global_mode:
+        strategy = "global"
+
+    return strategy
+
+def _compiler_name(ctx):
+    """Selects a user-visible name depending on the current compilation strategy.
+
+    Args:
+      ctx: skylark rule execution context
+
+    Returns:
+      the name of the current compiler to be displayed in build output
+    """
+
+    strategy = compile_strategy(ctx)
+    if strategy == "legacy":
+        return "ngc"
+    elif strategy == "global":
+        return "ngc.ivy"
+    elif strategy == "local":
+        return "ngtsc"
+    elif strategy == "jit":
+        return "tsc"
+    else:
+        fail("unreachable")
+
+def _enable_ivy_value(ctx):
+    """Determines the value of the enableIvy option in the generated tsconfig.
+
+    Args:
+      ctx: skylark rule execution context
+
+    Returns:
+      the value of enableIvy that needs to be set in angularCompilerOptions in the generated tsconfig
+    """
+
+    strategy = compile_strategy(ctx)
+    if strategy == "legacy":
+        return False
+    elif strategy == "global":
+        return True
+    elif strategy == "local":
+        return "ngtsc"
+    elif strategy == "jit":
+        return "tsc"
+    else:
+        fail("unreachable")
+
+def _include_ng_files(ctx):
+    """Determines whether Angular outputs will be produced by the current compilation strategy.
+
+    Args:
+      ctx: skylark rule execution context
+
+    Returns:
+      true iff the current compilation strategy will produce View Engine compilation outputs (such as
+      factory files), false otherwise
+    """
+
+    strategy = compile_strategy(ctx)
+    return strategy == "legacy" or strategy == "global"
+
+def _basename_of(ctx, file):
+    ext_len = len(".ts")
+    if file.short_path.endswith(".ng.html"):
+        ext_len = len(".ng.html")
+    elif file.short_path.endswith(".html"):
+        ext_len = len(".html")
+    return file.short_path[len(ctx.label.package) + 1:-ext_len]
+
+# Return true if run with bazel (the open-sourced version of blaze), false if
+# run with blaze.
+def _is_bazel():
+    return not hasattr(native, "genmpm")
+
+def _flat_module_out_file(ctx):
+    """Provide a default for the flat_module_out_file attribute.
+
+    We cannot use the default="" parameter of ctx.attr because the value is calculated
+    from other attributes (name)
+
+    Args:
+      ctx: skylark rule execution context
+
+    Returns:
+      a basename used for the flat module out (no extension)
+    """
+    if hasattr(ctx.attr, "flat_module_out_file") and ctx.attr.flat_module_out_file:
+        return ctx.attr.flat_module_out_file
+    return "%s_public_index" % ctx.label.name
+
+def _should_produce_flat_module_outs(ctx):
+    """Should we produce flat module outputs.
+
+    We only produce flat module outs when we expect the ng_module is meant to be published,
+    based on the presence of the module_name attribute.
+
+    Args:
+      ctx: skylark rule execution context
+
+    Returns:
+      true iff we should run the bundle_index_host to produce flat module metadata and bundle index
+    """
+    return _is_bazel() and ctx.attr.module_name
+
+# Calculate the expected output of the template compiler for every source in
+# in the library. Most of these will be produced as empty files but it is
+# unknown, without parsing, which will be empty.
+def _expected_outs(ctx):
+    include_ng_files = _include_ng_files(ctx)
+
+    devmode_js_files = []
+    closure_js_files = []
+    declaration_files = []
+    summary_files = []
+    metadata_files = []
+
+    factory_basename_set = depset([_basename_of(ctx, src) for src in ctx.files.factories])
+
+    for src in ctx.files.srcs + ctx.files.assets:
+        package_prefix = ctx.label.package + "/" if ctx.label.package else ""
+
+        # Strip external repository name from path if src is from external repository
+        # If src is from external repository, it's short_path will be ../<external_repo_name>/...
+        short_path = src.short_path if src.short_path[0:2] != ".." else "/".join(src.short_path.split("/")[2:])
+
+        if short_path.endswith(".ts") and not short_path.endswith(".d.ts"):
+            basename = short_path[len(package_prefix):-len(".ts")]
+            if include_ng_files and (len(factory_basename_set) == 0 or basename in factory_basename_set):
+                devmode_js = [
+                    ".ngfactory.js",
+                    ".ngsummary.js",
+                    ".js",
+                ]
+                summaries = [".ngsummary.json"]
+                metadata = [".metadata.json"]
+            else:
+                devmode_js = [".js"]
+                if not _is_bazel():
+                    devmode_js += [".ngfactory.js"]
+                summaries = []
+                metadata = []
+        elif include_ng_files and short_path.endswith(".css"):
+            basename = short_path[len(package_prefix):-len(".css")]
+            devmode_js = [
+                ".css.shim.ngstyle.js",
+                ".css.ngstyle.js",
+            ]
+            summaries = []
+            metadata = []
+        else:
+            continue
+
+        filter_summaries = ctx.attr.filter_summaries
+        closure_js = [f.replace(".js", ".closure.js") for f in devmode_js if not filter_summaries or not f.endswith(".ngsummary.js")]
+        declarations = [f.replace(".js", ".d.ts") for f in devmode_js]
+
+        devmode_js_files += [ctx.actions.declare_file(basename + ext) for ext in devmode_js]
+        closure_js_files += [ctx.actions.declare_file(basename + ext) for ext in closure_js]
+        declaration_files += [ctx.actions.declare_file(basename + ext) for ext in declarations]
+        summary_files += [ctx.actions.declare_file(basename + ext) for ext in summaries]
+        if not _is_bazel():
+            metadata_files += [ctx.actions.declare_file(basename + ext) for ext in metadata]
+
+    # We do this just when producing a flat module index for a publishable ng_module
+    if include_ng_files and _should_produce_flat_module_outs(ctx):
+        flat_module_out = _flat_module_out_file(ctx)
+        devmode_js_files.append(ctx.actions.declare_file("%s.js" % flat_module_out))
+        closure_js_files.append(ctx.actions.declare_file("%s.closure.js" % flat_module_out))
+        bundle_index_typings = ctx.actions.declare_file("%s.d.ts" % flat_module_out)
+        declaration_files.append(bundle_index_typings)
+        metadata_files.append(ctx.actions.declare_file("%s.metadata.json" % flat_module_out))
+    else:
+        bundle_index_typings = None
+
+    # TODO(alxhub): i18n is only produced by the legacy compiler currently. This should be re-enabled
+    # when ngtsc can extract messages
+    if include_ng_files:
+        i18n_messages_files = [ctx.new_file(ctx.genfiles_dir, ctx.label.name + "_ngc_messages.xmb")]
+    else:
+        i18n_messages_files = []
+
+    return struct(
+        closure_js = closure_js_files,
+        devmode_js = devmode_js_files,
+        declarations = declaration_files,
+        summaries = summary_files,
+        metadata = metadata_files,
+        bundle_index_typings = bundle_index_typings,
+        i18n_messages = i18n_messages_files,
+    )
+
+def _ngc_tsconfig(ctx, files, srcs, **kwargs):
+    outs = _expected_outs(ctx)
+    include_ng_files = _include_ng_files(ctx)
+    if "devmode_manifest" in kwargs:
+        expected_outs = outs.devmode_js + outs.declarations + outs.summaries + outs.metadata
+    else:
+        expected_outs = outs.closure_js
+
+    angular_compiler_options = {
+        "enableResourceInlining": ctx.attr.inline_resources,
+        "generateCodeForLibraries": False,
+        "allowEmptyCodegenFiles": True,
+        # Summaries are only enabled if Angular outputs are to be produced.
+        "enableSummariesForJit": include_ng_files,
+        "enableIvy": _enable_ivy_value(ctx),
+        "fullTemplateTypeCheck": ctx.attr.type_check,
+        # FIXME: wrong place to de-dupe
+        "expectedOut": depset([o.path for o in expected_outs]).to_list(),
+    }
+
+    if _should_produce_flat_module_outs(ctx):
+        angular_compiler_options["flatModuleId"] = ctx.attr.module_name
+        angular_compiler_options["flatModuleOutFile"] = _flat_module_out_file(ctx)
+        angular_compiler_options["flatModulePrivateSymbolPrefix"] = "_".join(
+            [ctx.workspace_name] + ctx.label.package.split("/") + [ctx.label.name, ""],
+        )
+
+    return dict(tsc_wrapped_tsconfig(ctx, files, srcs, **kwargs), **{
+        "angularCompilerOptions": angular_compiler_options,
+    })
+
+def _collect_summaries_aspect_impl(target, ctx):
+    results = depset(target.angular.summaries if hasattr(target, "angular") else [])
+
+    # If we are visiting empty-srcs ts_library, this is a re-export
+    srcs = ctx.rule.attr.srcs if hasattr(ctx.rule.attr, "srcs") else []
+
+    # "re-export" rules should expose all the files of their deps
+    if not srcs and hasattr(ctx.rule.attr, "deps"):
+        for dep in ctx.rule.attr.deps:
+            if (hasattr(dep, "angular")):
+                results = depset(dep.angular.summaries, transitive = [results])
+
+    return struct(collect_summaries_aspect_result = results)
+
+_collect_summaries_aspect = aspect(
+    implementation = _collect_summaries_aspect_impl,
+    attr_aspects = ["deps"],
+)
+
+# Extra options passed to Node when running ngc.
+_EXTRA_NODE_OPTIONS_FLAGS = [
+    # Expose the v8 garbage collection API to JS.
+    "--node_options=--expose-gc",
+]
+
+def ngc_compile_action(
+        ctx,
+        label,
+        inputs,
+        outputs,
+        messages_out,
+        tsconfig_file,
+        node_opts,
+        locale = None,
+        i18n_args = []):
+    """Helper function to create the ngc action.
+
+    This is exposed for google3 to wire up i18n replay rules, and is not intended
+    as part of the public API.
+
+    Args:
+      ctx: skylark context
+      label: the label of the ng_module being compiled
+      inputs: passed to the ngc action's inputs
+      outputs: passed to the ngc action's outputs
+      messages_out: produced xmb files
+      tsconfig_file: tsconfig file with settings used for the compilation
+      node_opts: list of strings, extra nodejs options.
+      locale: i18n locale, or None
+      i18n_args: additional command-line arguments to ngc
+
+    Returns:
+      the parameters of the compilation which will be used to replay the ngc action for i18N.
+    """
+
+    include_ng_files = _include_ng_files(ctx)
+
+    mnemonic = "AngularTemplateCompile"
+    progress_message = "Compiling Angular templates (%s) %s" % (_compiler_name(ctx), label)
+
+    if locale:
+        mnemonic = "AngularI18NMerging"
+        supports_workers = "0"
+        progress_message = ("Recompiling Angular templates (ngc) %s for locale %s" %
+                            (label, locale))
+    else:
+        supports_workers = str(int(ctx.attr._supports_workers))
+
+    arguments = (list(_EXTRA_NODE_OPTIONS_FLAGS) +
+                 ["--node_options=%s" % opt for opt in node_opts])
+
+    # One at-sign makes this a params-file, enabling the worker strategy.
+    # Two at-signs escapes the argument so it's passed through to ngc
+    # rather than the contents getting expanded.
+    if supports_workers == "1":
+        arguments += ["@@" + tsconfig_file.path]
+    else:
+        arguments += ["-p", tsconfig_file.path]
+
+    arguments += i18n_args
+
+    ctx.actions.run(
+        progress_message = progress_message,
+        mnemonic = mnemonic,
+        inputs = inputs,
+        outputs = outputs,
+        arguments = arguments,
+        executable = ctx.executable.compiler,
+        execution_requirements = {
+            "supports-workers": supports_workers,
+        },
+    )
+
+    if include_ng_files and messages_out != None:
+        ctx.actions.run(
+            inputs = list(inputs),
+            outputs = messages_out,
+            executable = ctx.executable._ng_xi18n,
+            arguments = (_EXTRA_NODE_OPTIONS_FLAGS +
+                         [tsconfig_file.path] +
+                         # The base path is bin_dir because of the way the ngc
+                         # compiler host is configured. So we need to explicitly
+                         # point to genfiles/ to redirect the output.
+                         ["../genfiles/" + messages_out[0].short_path]),
+            progress_message = "Extracting Angular 2 messages (ng_xi18n)",
+            mnemonic = "Angular2MessageExtractor",
+        )
+
+    if not locale and not ctx.attr.no_i18n:
+        return struct(
+            label = label,
+            tsconfig = tsconfig_file,
+            inputs = inputs,
+            outputs = outputs,
+            compiler = ctx.executable.compiler,
+        )
+
+    return None
+
+def _compile_action(ctx, inputs, outputs, messages_out, tsconfig_file, node_opts):
+    # Give the Angular compiler all the user-listed assets
+    file_inputs = list(ctx.files.assets)
+
+    # The compiler only needs to see TypeScript sources from the npm dependencies,
+    # but may need to look at package.json and ngsummary.json files as well.
+    if hasattr(ctx.attr, "node_modules"):
+        file_inputs += [
+            f
+            for f in ctx.files.node_modules
+            if f.path.endswith(".ts") or f.path.endswith(".json")
+        ]
+
+    # If the user supplies a tsconfig.json file, the Angular compiler needs to read it
+    if hasattr(ctx.attr, "tsconfig") and ctx.file.tsconfig:
+        file_inputs.append(ctx.file.tsconfig)
+
+    # Collect the inputs and summary files from our deps
+    action_inputs = depset(
+        file_inputs,
+        transitive = [inputs] + [
+            dep.collect_summaries_aspect_result
+            for dep in ctx.attr.deps
+            if hasattr(dep, "collect_summaries_aspect_result")
+        ],
+    )
+
+    return ngc_compile_action(ctx, ctx.label, action_inputs, outputs, messages_out, tsconfig_file, node_opts)
+
+def _prodmode_compile_action(ctx, inputs, outputs, tsconfig_file, node_opts):
+    outs = _expected_outs(ctx)
+    return _compile_action(ctx, inputs, outputs + outs.closure_js, outs.i18n_messages, tsconfig_file, node_opts)
+
+def _devmode_compile_action(ctx, inputs, outputs, tsconfig_file, node_opts):
+    outs = _expected_outs(ctx)
+    compile_action_outputs = outputs + outs.devmode_js + outs.declarations + outs.summaries + outs.metadata
+    _compile_action(ctx, inputs, compile_action_outputs, None, tsconfig_file, node_opts)
+
+def _ts_expected_outs(ctx, label):
+    # rules_typescript expects a function with two arguments, but our
+    # implementation doesn't use the label
+    _ignored = [label]
+    return _expected_outs(ctx)
+
+def ng_module_impl(ctx, ts_compile_actions):
+    """Implementation function for the ng_module rule.
+
+    This is exposed so that google3 can have its own entry point that re-uses this
+    and is not meant as a public API.
+
+    Args:
+      ctx: the skylark rule context
+      ts_compile_actions: generates all the actions to run an ngc compilation
+
+    Returns:
+      the result of the ng_module rule as a dict, suitable for
+      conversion by ts_providers_dict_to_struct
+    """
+
+    include_ng_files = _include_ng_files(ctx)
+
+    providers = ts_compile_actions(
+        ctx,
+        is_library = True,
+        compile_action = _prodmode_compile_action,
+        devmode_compile_action = _devmode_compile_action,
+        tsc_wrapped_tsconfig = _ngc_tsconfig,
+        outputs = _ts_expected_outs,
+    )
+
+    outs = _expected_outs(ctx)
+
+    if include_ng_files:
+        providers["angular"] = {
+            "summaries": outs.summaries,
+            "metadata": outs.metadata,
+        }
+        providers["ngc_messages"] = outs.i18n_messages
+
+    if include_ng_files and _should_produce_flat_module_outs(ctx):
+        if len(outs.metadata) > 1:
+            fail("expecting exactly one metadata output for " + str(ctx.label))
+
+        providers["angular"]["flat_module_metadata"] = struct(
+            module_name = ctx.attr.module_name,
+            metadata_file = outs.metadata[0],
+            typings_file = outs.bundle_index_typings,
+            flat_module_out_file = _flat_module_out_file(ctx),
+        )
+
+    return providers
+
+def _ng_module_impl(ctx):
+    return ts_providers_dict_to_struct(ng_module_impl(ctx, compile_ts))
+
+NG_MODULE_ATTRIBUTES = {
+    "srcs": attr.label_list(allow_files = [".ts"]),
+
+    # Note: DEPS_ASPECTS is already a list, we add the cast to workaround
+    # https://github.com/bazelbuild/skydoc/issues/21
+    "deps": attr.label_list(
+        doc = "Targets that are imported by this target",
+        aspects = list(DEPS_ASPECTS) + [_collect_summaries_aspect],
+    ),
+    "assets": attr.label_list(
+        doc = ".html and .css files needed by the Angular compiler",
+        allow_files = [
+            ".css",
+            # TODO(alexeagle): change this to ".ng.html" when usages updated
+            ".html",
+        ],
+    ),
+    "factories": attr.label_list(
+        allow_files = [".ts", ".html"],
+        mandatory = False,
+    ),
+    "filter_summaries": attr.bool(default = False),
+    "type_check": attr.bool(default = True),
+    "inline_resources": attr.bool(default = True),
+    "no_i18n": attr.bool(default = False),
+    "compiler": attr.label(
+        default = Label("//packages/bazel/src/ngc-wrapped"),
+        executable = True,
+        cfg = "host",
+    ),
+    "_ng_xi18n": attr.label(
+        default = Label("//packages/bazel/src/ngc-wrapped:xi18n"),
+        executable = True,
+        cfg = "host",
+    ),
+    "_supports_workers": attr.bool(default = True),
+}
+
+NG_MODULE_RULE_ATTRS = dict(dict(COMMON_ATTRIBUTES, **NG_MODULE_ATTRIBUTES), **{
+    "tsconfig": attr.label(allow_files = True, single_file = True),
+
+    # @// is special syntax for the "main" repository
+    # The default assumes the user specified a target "node_modules" in their
+    # root BUILD file.
+    "node_modules": attr.label(
+        default = Label("@//:node_modules"),
+    ),
+    "entry_point": attr.string(),
+
+    # Default is %{name}_public_index
+    # The suffix points to the generated "bundle index" files that users import from
+    # The default is intended to avoid collisions with the users input files.
+    # Later packaging rules will point to these generated files as the entry point
+    # into the package.
+    # See the flatModuleOutFile documentation in
+    # https://github.com/angular/angular/blob/master/packages/compiler-cli/src/transformers/api.ts
+    "flat_module_out_file": attr.string(),
+})
+
+ng_module = rule(
+    implementation = _ng_module_impl,
+    attrs = NG_MODULE_RULE_ATTRS,
+    outputs = COMMON_OUTPUTS,
+)
+"""
+Run the Angular AOT template compiler.
+
+This rule extends the [ts_library] rule.
+
+[ts_library]: http://tsetse.info/api/build_defs.html#ts_library
+"""
+
+# TODO(alxhub): this rule causes legacy ngc to produce Ivy outputs from global analysis information.
+# It exists to facilitate testing of the Ivy runtime until ngtsc is mature enough to be used
+# instead, and should be removed once ngtsc is capable of fulfilling the same requirements.
+internal_global_ng_module = rule(
+    implementation = _ng_module_impl,
+    attrs = dict(NG_MODULE_RULE_ATTRS, **{
+        "_global_mode": attr.bool(
+            default = True,
+        ),
+    }),
+    outputs = COMMON_OUTPUTS,
+)
diff --git a/packages/bazel/src/ng_package/BUILD.bazel b/packages/bazel/src/ng_package/BUILD.bazel
new file mode 100644
index 000000000000..69323a0fed32
--- /dev/null
+++ b/packages/bazel/src/ng_package/BUILD.bazel
@@ -0,0 +1,27 @@
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "package_assets",
+    srcs = glob(["*"]),
+    visibility = ["//packages/bazel:__subpackages__"],
+)
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+exports_files(["rollup.config.js"])
+
+ts_library(
+    name = "lib",
+    srcs = glob(["*.ts"]),
+    node_modules = "@angular_packager_deps//:node_modules",
+    tsconfig = ":tsconfig.json",
+)
+
+nodejs_binary(
+    name = "packager",
+    data = ["lib"],
+    entry_point = "angular/packages/bazel/src/ng_package/packager.js",
+    install_source_map_support = False,
+    node_modules = "@angular_packager_deps//:node_modules",
+)
diff --git a/packages/bazel/src/ng_package/ng_package.bzl b/packages/bazel/src/ng_package/ng_package.bzl
new file mode 100644
index 000000000000..8b2326e42934
--- /dev/null
+++ b/packages/bazel/src/ng_package/ng_package.bzl
@@ -0,0 +1,451 @@
+# 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
+"""Package Angular libraries for npm distribution
+
+If all users of an Angular library use Bazel (e.g. internal usage in your company)
+then you should simply add your library to the `deps` of the consuming application.
+
+These rules exist for compatibility with non-Bazel consumers of your library.
+
+It packages your library following the Angular Package Format, see the
+specification of this format at https://goo.gl/jB3GVv
+"""
+
+load("@build_bazel_rules_nodejs//:internal/collect_es6_sources.bzl", "collect_es6_sources")
+load(
+    "@build_bazel_rules_nodejs//:internal/rollup/rollup_bundle.bzl",
+    "ROLLUP_ATTRS",
+    "rollup_module_mappings_aspect",
+    "run_uglify",
+    "write_rollup_config",
+)
+load(
+    "@build_bazel_rules_nodejs//:internal/npm_package/npm_package.bzl",
+    "NPM_PACKAGE_ATTRS",
+    "NPM_PACKAGE_OUTPUTS",
+    "create_package",
+)
+load("@build_bazel_rules_nodejs//:internal/node.bzl", "sources_aspect")
+load("//packages/bazel/src:esm5.bzl", "esm5_outputs_aspect", "esm5_root_dir", "flatten_esm5")
+
+# Convert from some-dash-case to someCamelCase
+def _convert_dash_case_to_camel_case(s):
+    parts = s.split("-")
+
+    # First letter in the result is always unchanged
+    return s[0] + "".join([p.title() for p in parts])[1:]
+
+# Convert from a package name on npm to an identifier that's a legal global symbol
+#  @angular/core -> ng.core
+#  @angular/platform-browser-dynamic/testing -> ng.platformBrowserDynamic.testing
+def _global_name(package_name):
+    # strip npm scoped package qualifier
+    start = 1 if package_name.startswith("@") else 0
+    parts = package_name[start:].split("/")
+    result_parts = []
+    for p in parts:
+        # Special case for angular's short name
+        if p == "angular":
+            result_parts.append("ng")
+        else:
+            result_parts.append(_convert_dash_case_to_camel_case(p))
+    return ".".join(result_parts)
+
+WELL_KNOWN_GLOBALS = {p: _global_name(p) for p in [
+    "@angular/upgrade",
+    "@angular/upgrade/static",
+    "@angular/forms",
+    "@angular/core/testing",
+    "@angular/core",
+    "@angular/platform-server/testing",
+    "@angular/platform-server",
+    "@angular/platform-webworker-dynamic",
+    "@angular/platform-webworker",
+    "@angular/common/testing",
+    "@angular/common",
+    "@angular/common/http/testing",
+    "@angular/common/http",
+    "@angular/elements",
+    "@angular/http/testing",
+    "@angular/http",
+    "@angular/platform-browser-dynamic/testing",
+    "@angular/platform-browser-dynamic",
+    "@angular/compiler/testing",
+    "@angular/compiler",
+    "@angular/animations",
+    "@angular/animations/browser/testing",
+    "@angular/animations/browser",
+    "@angular/service-worker/config",
+    "@angular/service-worker",
+    "@angular/platform-browser/testing",
+    "@angular/platform-browser",
+    "@angular/platform-browser/animations",
+    "@angular/router/upgrade",
+    "@angular/router/testing",
+    "@angular/router",
+    "rxjs",
+    "rxjs/operators",
+]}
+
+def _rollup(ctx, bundle_name, rollup_config, entry_point, inputs, js_output, format = "es", package_name = "", include_tslib = False):
+    map_output = ctx.actions.declare_file(js_output.basename + ".map", sibling = js_output)
+
+    args = ctx.actions.args()
+    args.add("--config", rollup_config)
+
+    args.add("--input", entry_point)
+    args.add("--output.file", js_output)
+    args.add("--output.format", format)
+    if package_name:
+        args.add("--output.name", _global_name(package_name))
+        args.add("--amd.id", package_name)
+
+    # Note: if the input has external source maps then we need to also install and use
+    #   `rollup-plugin-sourcemaps`, which will require us to use rollup.config.js file instead
+    #   of command line args
+    args.add("--sourcemap")
+
+    globals = dict(WELL_KNOWN_GLOBALS, **ctx.attr.globals)
+    external = globals.keys()
+    if not include_tslib:
+        external.append("tslib")
+    args.add_joined("--external", external, join_with = ",")
+
+    args.add_joined(
+        "--globals",
+        ["%s:%s" % g for g in globals.items()],
+        join_with = ",",
+    )
+
+    args.add("--silent")
+
+    other_inputs = [ctx.executable._rollup, rollup_config]
+    if ctx.file.license_banner:
+        other_inputs.append(ctx.file.license_banner)
+    if ctx.version_file:
+        other_inputs.append(ctx.version_file)
+    ctx.actions.run(
+        progress_message = "ng_package: Rollup %s %s" % (bundle_name, ctx.label),
+        mnemonic = "AngularPackageRollup",
+        inputs = inputs.to_list() + other_inputs,
+        outputs = [js_output, map_output],
+        executable = ctx.executable._rollup,
+        arguments = [args],
+    )
+    return struct(
+        js = js_output,
+        map = map_output,
+    )
+
+# convert from [{js: js_file1, map: map_file1}, ...] to
+# [js_filepath1, map_filepath1, ...]
+def _flatten_paths(directory):
+    result = []
+    for f in directory:
+        result.append(f.js.path)
+        if f.map:
+            result.append(f.map.path)
+    return result
+
+# takes an depset of files and returns an array that doesn't contain any generated files by ngc
+def _filter_out_generated_files(files):
+    result = []
+    for file in files:
+        if (not (file.path.endswith(".ngfactory.js") or file.path.endswith(".ngsummary.js") or file.path.endswith(".ngstyle.js"))):
+            result.append(file)
+    return depset(result)
+
+def _esm2015_root_dir(ctx):
+    return ctx.label.name + ".es6"
+
+# ng_package produces package that is npm-ready.
+def _ng_package_impl(ctx):
+    npm_package_directory = ctx.actions.declare_directory("%s.ng_pkg" % ctx.label.name)
+
+    esm_2015_files = _filter_out_generated_files(collect_es6_sources(ctx))
+    esm5_sources = _filter_out_generated_files(flatten_esm5(ctx))
+
+    # These accumulators match the directory names where the files live in the
+    # Angular package format.
+    fesm2015 = []
+    fesm5 = []
+    esm2015 = []
+    esm5 = []
+    bundles = []
+
+    # For Angular Package Format v6, we put all the individual .js files in the
+    # esm5/ and esm2015/ folders.
+    for f in esm5_sources.to_list():
+        if f.path.endswith(".js"):
+            esm5.append(struct(js = f, map = None))
+    for f in esm_2015_files.to_list():
+        if f.path.endswith(".js"):
+            esm2015.append(struct(js = f, map = None))
+
+    # We infer the entry points to be:
+    # - ng_module rules in the deps (they have an "angular" provider)
+    # - in this package or a subpackage
+    # - those that have a module_name attribute (they produce flat module metadata)
+    flat_module_metadata = []
+
+    # Name given in the package.json name field, eg. @angular/core/testing
+    package_name = ""
+    deps_in_package = [d for d in ctx.attr.deps if d.label.package.startswith(ctx.label.package)]
+    for dep in deps_in_package:
+        # Intentionally evaluates to empty string for the main entry point
+        entry_point = dep.label.package[len(ctx.label.package) + 1:]
+        if hasattr(dep, "module_name"):
+            package_name = dep.module_name
+        if hasattr(dep, "angular") and hasattr(dep.angular, "flat_module_metadata"):
+            flat_module_metadata.append(dep.angular.flat_module_metadata)
+            flat_module_out_file = dep.angular.flat_module_metadata.flat_module_out_file + ".js"
+        else:
+            # fallback to a reasonable default
+            flat_module_out_file = "index.js"
+
+        es2015_entry_point = "/".join([p for p in [
+            ctx.bin_dir.path,
+            ctx.label.package,
+            _esm2015_root_dir(ctx),
+            ctx.label.package,
+            entry_point,
+            flat_module_out_file,
+        ] if p])
+
+        es5_entry_point = "/".join([p for p in [
+            ctx.label.package,
+            entry_point,
+            flat_module_out_file,
+        ] if p])
+
+        if entry_point:
+            # TODO jasonaden says there is no particular reason these filenames differ
+            prefix = primary_entry_point_name(ctx.attr.name, ctx.attr.entry_point, ctx.attr.entry_point_name)
+            umd_output_filename = "-".join([prefix] + entry_point.split("/"))
+            fesm_output_filename = entry_point.replace("/", "__")
+            fesm2015_output = ctx.actions.declare_file("fesm2015/%s.js" % fesm_output_filename)
+            fesm5_output = ctx.actions.declare_file("%s.js" % fesm_output_filename)
+            umd_output = ctx.actions.declare_file("%s.umd.js" % umd_output_filename)
+            min_output = ctx.actions.declare_file("%s.umd.min.js" % umd_output_filename)
+        else:
+            fesm2015_output = ctx.outputs.fesm2015
+            fesm5_output = ctx.outputs.fesm5
+            umd_output = ctx.outputs.umd
+            min_output = ctx.outputs.umd_min
+
+        esm2015_config = write_rollup_config(ctx, [], "/".join([ctx.bin_dir.path, ctx.label.package, _esm2015_root_dir(ctx)]), filename = "_%s.rollup_esm2015.conf.js")
+        esm5_config = write_rollup_config(ctx, [], "/".join([ctx.bin_dir.path, ctx.label.package, esm5_root_dir(ctx)]), filename = "_%s.rollup_esm5.conf.js")
+
+        fesm2015.append(_rollup(ctx, "fesm2015", esm2015_config, es2015_entry_point, esm_2015_files + ctx.files.node_modules, fesm2015_output))
+        fesm5.append(_rollup(ctx, "fesm5", esm5_config, es5_entry_point, esm5_sources + ctx.files.node_modules, fesm5_output))
+
+        bundles.append(
+            _rollup(
+                ctx,
+                "umd",
+                esm5_config,
+                es5_entry_point,
+                esm5_sources + ctx.files.node_modules,
+                umd_output,
+                format = "umd",
+                package_name = package_name,
+                include_tslib = True,
+            ),
+        )
+        uglify_sourcemap = run_uglify(
+            ctx,
+            umd_output,
+            min_output,
+            config_name = entry_point.replace("/", "_"),
+        )
+        bundles.append(struct(js = min_output, map = uglify_sourcemap))
+
+    packager_inputs = (
+        ctx.files.srcs +
+        ctx.files.data +
+        esm5_sources.to_list() +
+        depset(transitive = [
+            d.typescript.transitive_declarations
+            for d in ctx.attr.deps
+            if hasattr(d, "typescript")
+        ]).to_list() +
+        [f.js for f in fesm2015 + fesm5 + esm2015 + esm5 + bundles] +
+        [f.map for f in fesm2015 + fesm5 + esm2015 + esm5 + bundles if f.map]
+    )
+
+    packager_args = ctx.actions.args()
+    packager_args.use_param_file("%s", use_always = True)
+
+    # The order of arguments matters here, as they are read in order in packager.ts.
+    packager_args.add(npm_package_directory.path)
+    packager_args.add(ctx.label.package)
+    packager_args.add_joined([ctx.bin_dir.path, ctx.label.package], join_with = "/")
+    packager_args.add_joined([ctx.genfiles_dir.path, ctx.label.package], join_with = "/")
+
+    # Marshal the metadata into a JSON string so we can parse the data structure
+    # in the TypeScript program easily.
+    metadata_arg = {}
+    for m in flat_module_metadata:
+        packager_inputs.extend([m.metadata_file])
+        metadata_arg[m.module_name] = {
+            "index": m.typings_file.path.replace(".d.ts", ".js"),
+            "typings": m.typings_file.path,
+            "metadata": m.metadata_file.path,
+        }
+    packager_args.add(str(metadata_arg))
+
+    if ctx.file.readme_md:
+        packager_inputs.append(ctx.file.readme_md)
+        packager_args.add(ctx.file.readme_md.path)
+    else:
+        # placeholder
+        packager_args.add("")
+
+    packager_args.add_joined(_flatten_paths(fesm2015), join_with = ",")
+    packager_args.add_joined(_flatten_paths(fesm5), join_with = ",")
+    packager_args.add_joined(_flatten_paths(esm2015), join_with = ",")
+    packager_args.add_joined(_flatten_paths(esm5), join_with = ",")
+    packager_args.add_joined(_flatten_paths(bundles), join_with = ",")
+    packager_args.add_joined([s.path for s in ctx.files.srcs], join_with = ",")
+
+    # TODO: figure out a better way to gather runfiles providers from the transitive closure.
+    packager_args.add_joined([d.path for d in ctx.files.data], join_with = ",")
+
+    if ctx.file.license_banner:
+        packager_inputs.append(ctx.file.license_banner)
+        packager_args.add(ctx.file.license_banner)
+    else:
+        # placeholder
+        packager_args.add("")
+
+    ctx.actions.run(
+        progress_message = "Angular Packaging: building npm package %s" % str(ctx.label),
+        mnemonic = "AngularPackage",
+        inputs = packager_inputs,
+        outputs = [npm_package_directory],
+        executable = ctx.executable._ng_packager,
+        arguments = [packager_args],
+    )
+
+    devfiles = depset()
+    if ctx.attr.include_devmode_srcs:
+        for d in ctx.attr.deps:
+            devfiles = depset(transitive = [devfiles, d.files, d.node_sources])
+
+    # Re-use the create_package function from the nodejs npm_package rule.
+    package_dir = create_package(
+        ctx,
+        devfiles.to_list(),
+        [npm_package_directory] + ctx.files.packages,
+    )
+    return [DefaultInfo(
+        files = depset([package_dir]),
+    )]
+
+NG_PACKAGE_ATTRS = dict(NPM_PACKAGE_ATTRS, **dict(ROLLUP_ATTRS, **{
+    "srcs": attr.label_list(allow_files = True),
+    "deps": attr.label_list(aspects = [
+        rollup_module_mappings_aspect,
+        esm5_outputs_aspect,
+        sources_aspect,
+    ]),
+    "data": attr.label_list(
+        doc = "Additional, non-Angular files to be added to the package, e.g. global CSS assets.",
+        allow_files = True,
+    ),
+    "include_devmode_srcs": attr.bool(default = False),
+    "readme_md": attr.label(allow_single_file = FileType([".md"])),
+    "globals": attr.string_dict(default = {}),
+    "entry_point_name": attr.string(
+        doc = "Name to use when generating bundle files for the primary entry-point.",
+    ),
+    "_ng_packager": attr.label(
+        default = Label("//packages/bazel/src/ng_package:packager"),
+        executable = True,
+        cfg = "host",
+    ),
+    "_rollup": attr.label(
+        default = Label("@build_bazel_rules_nodejs//internal/rollup"),
+        executable = True,
+        cfg = "host",
+    ),
+    "_rollup_config_tmpl": attr.label(
+        default = Label("@build_bazel_rules_nodejs//internal/rollup:rollup.config.js"),
+        allow_single_file = True,
+    ),
+    "_uglify": attr.label(
+        default = Label("@build_bazel_rules_nodejs//internal/rollup:uglify"),
+        executable = True,
+        cfg = "host",
+    ),
+}))
+
+# Angular wants these named after the entry_point,
+# eg. for //packages/core it looks like "packages/core/index.js", we want
+# core.js produced by this rule.
+# Currently we just borrow the entry point for this, if it looks like
+# some/path/to/my/package/index.js
+# we assume the files should be named "package.*.js"
+def primary_entry_point_name(name, entry_point, entry_point_name):
+    """This is not a public API.
+
+    Compute the name of the primary entry point in the library.
+
+    Args:
+      name: the name of the `ng_package` rule, as a fallback.
+      entry_point: The starting point of the application, see rollup_bundle.
+      entry_point_name: if set, this is the returned value.
+
+    Returns:
+      name of the entry point, which will appear in the name of generated bundles
+    """
+    if entry_point_name:
+        # If an explicit entry_point_name is given, use that.
+        return entry_point_name
+    elif entry_point.find("/") >= 0:
+        # If the entry_point has multiple path segments, use the second one.
+        # E.g., for "@angular/cdk/a11y", use "cdk".
+        return entry_point.split("/")[-2]
+    else:
+        # Fall back to the name of the ng_package rule.
+        return name
+
+def ng_package_outputs(name, entry_point, entry_point_name):
+    """This is not a public API.
+
+    This function computes the named outputs for an ng_package rule.
+
+    Args:
+      name: value of the name attribute
+      entry_point: value of the entry_point attribute
+      entry_point_name: value of the entry_point_name attribute
+
+    Returns:
+      dict of named outputs of the rule
+    """
+
+    basename = primary_entry_point_name(name, entry_point, entry_point_name)
+    outputs = {
+        "fesm5": "fesm5/%s.js" % basename,
+        "fesm2015": "fesm2015/%s.js" % basename,
+        "umd": "%s.umd.js" % basename,
+        "umd_min": "%s.umd.min.js" % basename,
+    }
+    for key in NPM_PACKAGE_OUTPUTS:
+        # NPM_PACKAGE_OUTPUTS is a "normal" dict-valued outputs so it looks like
+        #  "pack": "%{name}.pack",
+        # But this is a function-valued outputs.
+        # Bazel won't replace the %{name} token so we have to do it.
+        outputs[key] = NPM_PACKAGE_OUTPUTS[key].replace("%{name}", name)
+    return outputs
+
+ng_package = rule(
+    implementation = _ng_package_impl,
+    attrs = NG_PACKAGE_ATTRS,
+    outputs = ng_package_outputs,
+)
+"""
+ng_package produces an npm-ready package from an Angular library.
+"""
diff --git a/packages/bazel/src/ng_package/package.json b/packages/bazel/src/ng_package/package.json
new file mode 100644
index 000000000000..5bdd3ddcebba
--- /dev/null
+++ b/packages/bazel/src/ng_package/package.json
@@ -0,0 +1,9 @@
+{
+  "description": "runtime dependences for packager",
+  "devDependencies": {
+    "@types/node": "6.0.84",
+    "@types/shelljs": "0.7.7",
+    "shelljs": "0.8.2",
+    "typescript": "2.7.2"
+  }
+}
diff --git a/packages/bazel/src/ng_package/packager.ts b/packages/bazel/src/ng_package/packager.ts
new file mode 100644
index 000000000000..59358020e04d
--- /dev/null
+++ b/packages/bazel/src/ng_package/packager.ts
@@ -0,0 +1,363 @@
+/**
+ * @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 fs from 'fs';
+import * as path from 'path';
+import * as shx from 'shelljs';
+
+function main(args: string[]): number {
+  // Exit immediately when encountering an error.
+  shx.set('-e');
+
+  // Keep track of whether an error has occured so that we can return an appropriate exit code.
+  let errorHasOccured = false;
+
+  // This utility expects all of its arguments to be specified in a params file generated by
+  // bazel (see https://docs.bazel.build/versions/master/skylark/lib/Args.html#use_param_file).
+  const paramFilePath = args[0];
+
+  // Bazel params may be surrounded with quotes
+  function unquoteParameter(s: string) { return s.replace(/^'(.*)'$/, '$1'); }
+
+  // Parameters are specified in the file one per line.
+  const params = fs.readFileSync(paramFilePath, 'utf-8').split('\n').map(unquoteParameter);
+
+  const [
+      // Output directory for the npm package.
+      out,
+
+      // The package segment of the ng_package rule's label (e.g. 'package/common').
+      srcDir,
+
+      // The bazel-bin dir joined with the srcDir (e.g. 'bazel-bin/package.common').
+      // This is the intended output location for package artifacts.
+      binDir,
+
+      // The bazel-genfiles dir joined with the srcDir (e.g. 'bazel-bin/package.common').
+      genfilesDir,
+
+      // JSON data mapping each entry point to the generated bundle index and
+      // flat module metadata, for example
+      // {"@angular/core": {
+      //     "index": "bazel-bin/packages/core/core.js",
+      //     "typing": "bazel-bin/packages/core/core.d.ts",
+      //     "metadata": "bazel-bin/packages/core/core.metadata.json"
+      //  },
+      // ...
+      // }
+      modulesManifestArg,
+
+      // Path to the package's README.md.
+      readmeMd,
+
+      // List of rolled-up flat ES2015 modules
+      fesm2015Arg,
+
+      // List of rolled-up flat ES5 modules
+      fesm5Arg,
+
+      // List of individual ES2015 modules
+      esm2015Arg,
+
+      // List of individual ES5 modules
+      esm5Arg,
+
+      // List of all UMD bundles generated by rollup.
+      bundlesArg,
+
+      // List of all files in the ng_package rule's srcs.
+      srcsArg,
+
+      // List of all files in the ng_package rule's data.
+      dataArg,
+
+      // Path to the package's LICENSE.
+      licenseFile,
+  ] = params;
+
+  const fesm2015 = fesm2015Arg.split(',').filter(s => !!s);
+  const fesm5 = fesm5Arg.split(',').filter(s => !!s);
+  const esm2015 = esm2015Arg.split(',').filter(s => !!s);
+  const esm5 = esm5Arg.split(',').filter(s => !!s);
+  const bundles = bundlesArg.split(',').filter(s => !!s);
+  const srcs = srcsArg.split(',').filter(s => !!s);
+  const dataFiles: string[] = dataArg.split(',').filter(s => !!s);
+  const modulesManifest = JSON.parse(modulesManifestArg);
+
+  if (readmeMd) {
+    copyFile(readmeMd, out);
+  }
+
+  /**
+   * Writes a file into the package based on its input path, relativizing to the package path.
+   * @param inputPath Path to the file in the input tree.
+   * @param fileContent Content of the file.
+   */
+  function writeFileFromInputPath(inputPath: string, fileContent: string) {
+    // We want the relative path from the given file to its ancestor "root" directory.
+    // This root depends on whether the file lives in the source tree (srcDir) as a basic file
+    // input to ng_package, the bin output tree (binDir) as the output of another rule, or
+    // the genfiles output tree (genfilesDir) as the output of a genrule.
+    let rootDir: string;
+    if (inputPath.includes(binDir)) {
+      rootDir = binDir;
+    } else if (inputPath.includes(genfilesDir)) {
+      rootDir = genfilesDir;
+    } else {
+      rootDir = srcDir;
+    }
+
+    const outputPath = path.join(out, path.relative(rootDir, inputPath));
+
+    // Always ensure that the target directory exists.
+    shx.mkdir('-p', path.dirname(outputPath));
+    fs.writeFileSync(outputPath, fileContent, 'utf-8');
+  }
+
+  /**
+   * Copies a file into the package based on its input path, relativizing to the package path.
+   * @param inputPath a path relative to the binDir, typically from a file in the deps[]
+   */
+  function copyFileFromInputPath(inputPath: string) {
+    writeFileFromInputPath(inputPath, fs.readFileSync(inputPath, 'utf-8'));
+  }
+
+  /**
+   * Relativize the path where a file is written.
+   * @param file a path containing a re-rooted segment like .esm5 or .es6
+   * @param suffix the re-rooted directory
+   * @param outDir path where we copy the file, relative to the out
+   */
+  function writeEsmFile(file: string, suffix: string, outDir: string) {
+    const root = file.substr(0, file.lastIndexOf(suffix + path.sep) + suffix.length + 1);
+    const rel = path.dirname(path.relative(path.join(root, srcDir), file));
+    if (!rel.startsWith('..')) {
+      copyFile(file, path.join(out, outDir), rel);
+    }
+  }
+
+  esm2015.forEach(file => writeEsmFile(file, '.es6', 'esm2015'));
+  esm5.forEach(file => writeEsmFile(file, '.esm5', 'esm5'));
+
+  bundles.forEach(bundle => { copyFile(bundle, out, 'bundles'); });
+  fesm2015.forEach(file => { copyFile(file, out, 'fesm2015'); });
+  fesm5.forEach(file => { copyFile(file, out, 'fesm5'); });
+
+  const allsrcs = shx.find('-R', binDir);
+  allsrcs.filter(hasFileExtension('.d.ts')).forEach((f: string) => {
+    const content = fs.readFileSync(f, 'utf-8')
+                        // Strip the named AMD module for compatibility with non-bazel users
+                        .replace(/^\/\/\/ <amd-module name=.*\/>\n/gm, '');
+    writeFileFromInputPath(f, content);
+  });
+
+  // Copy all `data` files into the package. These are files that aren't built by the ng_package
+  // rule, but instead are just straight copied into the package, e.g. global CSS assets.
+  dataFiles.forEach(f => copyFileFromInputPath(f));
+
+  // Iterate through the entry point modules
+  // We do this first because we also record new paths for the esm5 and esm2015 copies
+  // of the index JS file, which we need to amend the package.json.
+  Object.keys(modulesManifest).forEach(moduleName => {
+    const moduleFiles = modulesManifest[moduleName];
+    const relative = path.relative(binDir, moduleFiles['index']);
+
+    moduleFiles['esm5_index'] = path.join(binDir, 'esm5', relative);
+    moduleFiles['esm2015_index'] = path.join(binDir, 'esm2015', relative);
+
+    copyFileFromInputPath(moduleFiles['metadata']);
+  });
+
+  // Root package name (e.g. '@angular/common'), captures as we iterate through sources below.
+  let rootPackageName = '';
+  const packagesWithExistingPackageJson = new Set<string>();
+
+  for (const src of srcs) {
+    if (src.includes(binDir) || src.includes(genfilesDir)) {
+      errorHasOccured = true;
+      console.error(
+          'The "srcs" for ng_package should not include output of other rules. Found:\n' +
+          `  ${src}`);
+    }
+
+    let content = fs.readFileSync(src, 'utf-8');
+    // Modify package.json files as necessary for publishing
+    if (path.basename(src) === 'package.json') {
+      const packageJson = JSON.parse(content);
+      content = amendPackageJson(src, packageJson);
+
+      const packageName = packageJson['name'];
+      packagesWithExistingPackageJson.add(packageName);
+
+      // Keep track of the root package name, e.g. "@angular/common". We assume that the
+      // root name will be shortest because secondary entry-points will append to it
+      // (e.g. "@angular/common/http").
+      if (!rootPackageName || packageName.length < rootPackageName.length) {
+        rootPackageName = packageJson['name'];
+      }
+    }
+    writeFileFromInputPath(src, content);
+  }
+
+  const licenseBanner = licenseFile ? fs.readFileSync(licenseFile, 'utf-8') : '';
+
+  // Generate extra files for secondary entry-points.
+  Object.keys(modulesManifest).forEach(entryPointPackageName => {
+    const entryPointName = entryPointPackageName.substr(rootPackageName.length + 1);
+    if (!entryPointName) return;
+
+    createMetadataReexportFile(
+        entryPointName, modulesManifest[entryPointPackageName]['metadata'], entryPointPackageName);
+    createTypingsReexportFile(
+        entryPointName, licenseBanner, modulesManifest[entryPointPackageName]['typings']);
+
+    if (!packagesWithExistingPackageJson.has(entryPointPackageName)) {
+      createEntryPointPackageJson(entryPointName, entryPointPackageName);
+    }
+  });
+
+  return errorHasOccured ? 1 : 0;
+
+  /**
+   * Convert a binDir-relative path to srcDir-relative
+   * @param from path to a file under the srcDir, like packages/core/testing/package.json
+   * @param file path to a file under the binDir, like bazel-bin/core/testing/generated.js
+   */
+  function srcDirRelative(from: string, file: string) {
+    const result =
+        path.relative(path.dirname(from), path.join(srcDir, path.relative(binDir, file)));
+    if (result.startsWith('..')) return result;
+    return `./${result}`;
+  }
+
+  /** Gets a predicate function to filter non-generated files with a specified extension. */
+  function hasFileExtension(ext: string): (path: string) => boolean {
+    return f => f.endsWith(ext) && !f.endsWith(`.ngfactory${ext}`) &&
+        !f.endsWith(`.ngsummary${ext}`);
+  }
+
+  function copyFile(file: string, baseDir: string, relative = '.') {
+    const dir = path.join(baseDir, relative);
+    shx.mkdir('-p', dir);
+    shx.cp(file, dir);
+    // Double-underscore is used to escape forward slash in FESM filenames.
+    // See ng_package.bzl:
+    //   fesm_output_filename = entry_point.replace("/", "__")
+    // We need to unescape these.
+    if (file.indexOf('__') >= 0) {
+      const outputPath = path.join(dir, ...path.basename(file).split('__'));
+      shx.mkdir('-p', path.dirname(outputPath));
+      shx.mv(path.join(dir, path.basename(file)), outputPath);
+    }
+  }
+
+  /**
+   * Inserts or edits properties into the package.json file(s) in the package so that
+   * they point to all the right generated artifacts.
+   *
+   * @param packageJson The path to the package.json file.
+   * @param parsedPackage Parsed package.json content
+   */
+  function amendPackageJson(packageJson: string, parsedPackage: {[key: string]: string}) {
+    const packageName = parsedPackage['name'];
+    const moduleFiles = modulesManifest[packageName];
+    if (!moduleFiles) {
+      // Ideally we should throw here, as we got an entry point that doesn't
+      // have flat module metadata / bundle index, so it may have been an
+      // ng_module that's missing a module_name attribute.
+      // However, @angular/compiler can't be an ng_module, as it's the internals
+      // of the ngc compiler, yet we want to build an ng_package for it.
+      // So ignore package.json files when we are missing data.
+      console.error('WARNING: no module metadata for package', packageName);
+      console.error('   Not updating the package.json file to point to it');
+      console.error(
+          '   The ng_module for this package is possibly missing the module_name attribute ');
+      return JSON.stringify(parsedPackage, null, 2);
+    }
+
+    // Derive the paths to the files from the hard-coded names we gave them.
+    // TODO(alexeagle): it would be better to transfer this information from the place
+    // where we created the filenames, via the modulesManifestArg
+    parsedPackage['main'] = getBundleName(packageName, 'bundles');
+    parsedPackage['fesm5'] = getBundleName(packageName, 'fesm5');
+    parsedPackage['fesm2015'] = getBundleName(packageName, 'fesm2015');
+
+    parsedPackage['esm5'] = srcDirRelative(packageJson, moduleFiles['esm5_index']);
+    parsedPackage['esm2015'] = srcDirRelative(packageJson, moduleFiles['esm2015_index']);
+    parsedPackage['typings'] = srcDirRelative(packageJson, moduleFiles['typings']);
+
+    // For now, we point the primary entry points at the fesm files, because of Webpack
+    // performance issues with a large number of individual files.
+    // TODO(iminar): resolve performance issues with the toolchain and point these to esm
+    parsedPackage['module'] = parsedPackage['fesm5'];
+    parsedPackage['es2015'] = parsedPackage['fesm2015'];
+
+    return JSON.stringify(parsedPackage, null, 2);
+  }
+
+  // e.g. @angular/common/http/testing -> ../../bundles/common-http-testing.umd.js
+  // or   @angular/common/http/testing -> ../../fesm5/http/testing.js
+  function getBundleName(packageName: string, dir: string) {
+    const parts = packageName.split('/');
+    // Remove the scoped package part, like @angular if present
+    const nameParts = packageName.startsWith('@') ? parts.splice(1) : parts;
+    const relativePath = Array(nameParts.length - 1).fill('..').join('/') || '.';
+    let basename: string;
+    if (dir === 'bundles') {
+      basename = nameParts.join('-') + '.umd';
+    } else if (nameParts.length === 1) {
+      basename = nameParts[0];
+    } else {
+      basename = nameParts.slice(1).join('/');
+    }
+    return [relativePath, dir, basename + '.js'].join('/');
+  }
+
+  /** Creates metadata re-export file for a secondary entry-point. */
+  function createMetadataReexportFile(
+      entryPointName: string, metadataFile: string, packageName: string) {
+    const inputPath = path.join(srcDir, `${entryPointName}.metadata.json`);
+    writeFileFromInputPath(inputPath, JSON.stringify({
+      '__symbolic': 'module',
+      'version': 3,
+      'metadata': {},
+      'exports':
+          [{'from': `${srcDirRelative(inputPath, metadataFile.replace(/.metadata.json$/, ''))}`}],
+      'flatModuleIndexRedirect': true,
+      'importAs': packageName
+    }) + '\n');
+  }
+
+  /**
+   * Creates a typings (d.ts) re-export file for a secondary-entry point,
+   * e.g., `export * from './common/common'`
+   */
+  function createTypingsReexportFile(entryPointName: string, license: string, typingsFile: string) {
+    const inputPath = path.join(srcDir, `${entryPointName}.d.ts`);
+    const content = `${license}
+  export * from '${srcDirRelative(inputPath, typingsFile.replace(/\.d\.tsx?$/, ''))}';
+  `;
+    writeFileFromInputPath(inputPath, content);
+  }
+
+  /**
+   * Creates a package.json for a secondary entry-point.
+   * @param dir The directory under which the package.json should be written.
+   * @param entryPointPackageName The full package name for the entry point,
+   *     e.g. '@angular/common/http'.
+   */
+  function createEntryPointPackageJson(dir: string, entryPointPackageName: string) {
+    const pkgJson = path.join(srcDir, dir, 'package.json');
+    const content = amendPackageJson(pkgJson, {name: entryPointPackageName});
+    writeFileFromInputPath(pkgJson, content);
+  }
+}
+
+if (require.main === module) {
+  process.exitCode = main(process.argv.slice(2));
+}
diff --git a/packages/bazel/src/ng_package/tsconfig.json b/packages/bazel/src/ng_package/tsconfig.json
new file mode 100644
index 000000000000..e9b6c07f852a
--- /dev/null
+++ b/packages/bazel/src/ng_package/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "lib": ["es2015"]
+  }
+}
diff --git a/packages/bazel/src/ng_package/yarn.lock b/packages/bazel/src/ng_package/yarn.lock
new file mode 100644
index 000000000000..4730fcb12b1a
--- /dev/null
+++ b/packages/bazel/src/ng_package/yarn.lock
@@ -0,0 +1,127 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/events@*":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/events/-/events-1.2.0.tgz#81a6731ce4df43619e5c8c945383b3e62a89ea86"
+
+"@types/glob@*":
+  version "5.0.35"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-5.0.35.tgz#1ae151c802cece940443b5ac246925c85189f32a"
+  dependencies:
+    "@types/events" "*"
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
+"@types/minimatch@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
+
+"@types/node@*":
+  version "10.0.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.0.8.tgz#37b4d91d4e958e4c2ba0be2b86e7ed4ff19b0858"
+
+"@types/node@6.0.84":
+  version "6.0.84"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.84.tgz#193ffe5a9f42864d425ffd9739d95b753c6a1eab"
+
+"@types/shelljs@0.7.7":
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.7.7.tgz#1f7bfa28947661afea06365db9b1135bbc903ec4"
+  dependencies:
+    "@types/glob" "*"
+    "@types/node" "*"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+glob@^7.0.0:
+  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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+interpret@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  dependencies:
+    brace-expansion "^1.1.7"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  dependencies:
+    resolve "^1.1.6"
+
+resolve@^1.1.6:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
+  dependencies:
+    path-parse "^1.0.5"
+
+shelljs@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.2.tgz#345b7df7763f4c2340d584abb532c5f752ca9e35"
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+typescript@2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
diff --git a/packages/bazel/src/ng_rollup_bundle.bzl b/packages/bazel/src/ng_rollup_bundle.bzl
new file mode 100644
index 000000000000..3a346aefa017
--- /dev/null
+++ b/packages/bazel/src/ng_rollup_bundle.bzl
@@ -0,0 +1,179 @@
+# 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
+
+"""Rollup with Build Optimizer
+
+   This provides a variant of the [rollup_bundle] rule that works better for Angular apps.
+
+   It registers `@angular-devkit/build-optimizer` as a rollup plugin, to get
+   better optimization. It also uses ESM5 format inputs, as this is what
+   build-optimizer is hard-coded to look for and transform.
+
+   [rollup_bundle]: https://bazelbuild.github.io/rules_nodejs/rollup/rollup_bundle.html
+"""
+
+load(
+    "@build_bazel_rules_nodejs//internal/rollup:rollup_bundle.bzl",
+    "ROLLUP_ATTRS",
+    "ROLLUP_OUTPUTS",
+    "rollup_module_mappings_aspect",
+    "run_rollup",
+    "run_sourcemapexplorer",
+    "run_uglify",
+    "write_rollup_config",
+)
+load("@build_bazel_rules_nodejs//internal:collect_es6_sources.bzl", collect_es2015_sources = "collect_es6_sources")
+load(":esm5.bzl", "esm5_outputs_aspect", "esm5_root_dir", "flatten_esm5")
+
+PACKAGES = ["packages/core/src", "packages/common/src", "packages/compiler/src", "external/rxjs"]
+PLUGIN_CONFIG = "{sideEffectFreeModules: [\n%s]}" % ",\n".join(
+    ["        '.esm5/{0}'".format(p) for p in PACKAGES],
+)
+BO_ROLLUP = "angular_cli/packages/angular_devkit/build_optimizer/src/build-optimizer/rollup-plugin.js"
+BO_PLUGIN = "require('%s').default(%s)" % (BO_ROLLUP, PLUGIN_CONFIG)
+
+def _use_plain_rollup(ctx):
+    """Determine whether to use the Angular or upstream versions of the rollup_bundle rule.
+
+    In most modes, the Angular version of rollup is used. This runs build optimizer as part of its
+    processing, which affects decorators and annotations.
+
+    In JIT modes, an emulation of the upstream rollup_bundle rule is used. This avoids running
+    build optimizer on code which isn't designed to be optimized by it.
+
+    Args:
+      ctx: skylark rule execution context
+
+    Returns:
+      true iff the Angular version of rollup with build optimizer should be used, false otherwise
+    """
+
+    if "compile" not in ctx.var:
+        return False
+
+    strategy = ctx.var["compile"]
+    return strategy == "jit"
+
+def run_brotli(ctx, input, output):
+    """Execute the Brotli compression utility.
+
+    Args:
+      ctx: Bazel's rule execution context
+      input: any file
+      output: the compressed file
+    """
+    ctx.actions.run(
+        executable = ctx.executable._brotli,
+        inputs = [input],
+        outputs = [output],
+        arguments = ["--output=%s" % output.path, input.path],
+    )
+
+# Borrowed from bazelbuild/rules_nodejs
+def _run_tsc(ctx, input, output):
+    args = ctx.actions.args()
+    args.add("--target", "es5")
+    args.add("--allowJS")
+    args.add(input)
+    args.add("--outFile", output)
+
+    ctx.action(
+        executable = ctx.executable._tsc,
+        inputs = [input],
+        outputs = [output],
+        arguments = [args],
+    )
+
+# Borrowed from bazelbuild/rules_nodejs, with the addition of brotli compression output
+def _plain_rollup_bundle(ctx):
+    rollup_config = write_rollup_config(ctx)
+    run_rollup(ctx, collect_es2015_sources(ctx), rollup_config, ctx.outputs.build_es6)
+    _run_tsc(ctx, ctx.outputs.build_es6, ctx.outputs.build_es5)
+    source_map = run_uglify(ctx, ctx.outputs.build_es5, ctx.outputs.build_es5_min)
+    run_uglify(ctx, ctx.outputs.build_es5, ctx.outputs.build_es5_min_debug, debug = True)
+    umd_rollup_config = write_rollup_config(ctx, filename = "_%s_umd.rollup.conf.js", output_format = "umd")
+    run_rollup(ctx, collect_es2015_sources(ctx), umd_rollup_config, ctx.outputs.build_umd)
+    run_sourcemapexplorer(ctx, ctx.outputs.build_es5_min, source_map, ctx.outputs.explore_html)
+
+    run_brotli(ctx, ctx.outputs.build_es5_min, ctx.outputs.build_es5_min_compressed)
+    files = [ctx.outputs.build_es5_min, source_map]
+    return DefaultInfo(files = depset(files), runfiles = ctx.runfiles(files))
+
+def _ng_rollup_bundle(ctx):
+    # Escape and use the plain rollup rule if the compilation strategy requires it
+    if _use_plain_rollup(ctx):
+        return _plain_rollup_bundle(ctx)
+
+    # We don't expect anyone to make use of this bundle yet, but it makes this rule
+    # compatible with rollup_bundle which allows them to be easily swapped back and
+    # forth.
+    esm2015_rollup_config = write_rollup_config(ctx, filename = "_%s.rollup_es6.conf.js")
+    run_rollup(ctx, collect_es2015_sources(ctx), esm2015_rollup_config, ctx.outputs.build_es6)
+
+    esm5_sources = flatten_esm5(ctx)
+
+    rollup_config = write_rollup_config(ctx, [BO_PLUGIN], "/".join([ctx.bin_dir.path, ctx.label.package, esm5_root_dir(ctx)]))
+    rollup_sourcemap = run_rollup(ctx, esm5_sources, rollup_config, ctx.outputs.build_es5)
+
+    sourcemap = run_uglify(
+        ctx,
+        ctx.outputs.build_es5,
+        ctx.outputs.build_es5_min,
+        comments = False,
+        in_source_map = rollup_sourcemap,
+    )
+    run_uglify(
+        ctx,
+        ctx.outputs.build_es5,
+        ctx.outputs.build_es5_min_debug,
+        debug = True,
+        comments = False,
+    )
+
+    umd_rollup_config = write_rollup_config(ctx, filename = "_%s_umd.rollup.conf.js", output_format = "umd")
+    run_rollup(ctx, collect_es2015_sources(ctx), umd_rollup_config, ctx.outputs.build_umd)
+
+    run_brotli(ctx, ctx.outputs.build_es5_min, ctx.outputs.build_es5_min_compressed)
+
+    run_sourcemapexplorer(ctx, ctx.outputs.build_es5_min, sourcemap, ctx.outputs.explore_html)
+
+    return DefaultInfo(files = depset([ctx.outputs.build_es5_min, sourcemap]))
+
+ng_rollup_bundle = rule(
+    implementation = _ng_rollup_bundle,
+    attrs = dict(ROLLUP_ATTRS, **{
+        "deps": attr.label_list(
+            doc = """Other targets that provide JavaScript files.
+            Typically this will be `ts_library` or `ng_module` targets.""",
+            aspects = [
+                rollup_module_mappings_aspect,
+                esm5_outputs_aspect,
+            ],
+        ),
+        "_rollup": attr.label(
+            executable = True,
+            cfg = "host",
+            default = Label("@angular//packages/bazel/src:rollup_with_build_optimizer"),
+        ),
+        "_brotli": attr.label(
+            executable = True,
+            cfg = "host",
+            default = Label("@org_brotli//:brotli"),
+        ),
+    }),
+    outputs = dict(ROLLUP_OUTPUTS, **{
+        "build_es5_min_compressed": "%{name}.min.js.br",
+    }),
+)
+"""
+Run [Rollup] with the [Build Optimizer] plugin.
+
+This rule extends from the [rollup_bundle] rule, so attributes and outputs of
+that rule are used here too.
+
+[Rollup]: https://rollupjs.org/
+[Build Optimizer]: https://www.npmjs.com/package/@angular-devkit/build-optimizer
+[rollup_bundle]: https://bazelbuild.github.io/rules_nodejs/rollup/rollup_bundle.html
+"""
diff --git a/packages/bazel/src/ng_setup_workspace.bzl b/packages/bazel/src/ng_setup_workspace.bzl
new file mode 100644
index 000000000000..18b7e8c0d58e
--- /dev/null
+++ b/packages/bazel/src/ng_setup_workspace.bzl
@@ -0,0 +1,24 @@
+# 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
+
+"Install toolchain dependencies"
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "yarn_install")
+load("@build_bazel_rules_typescript//:defs.bzl", "check_rules_typescript_version")
+
+def ng_setup_workspace():
+    """This repository rule should be called from your WORKSPACE file.
+
+    It creates some additional Bazel external repositories that are used internally
+    by the Angular rules.
+    """
+    yarn_install(
+        name = "angular_packager_deps",
+        package_json = "@angular//packages/bazel/src/ng_package:package.json",
+        yarn_lock = "@angular//packages/bazel/src/ng_package:yarn.lock",
+    )
+
+    # 0.16.0: minimal version required to work with ng_module
+    check_rules_typescript_version("0.16.0")
diff --git a/packages/bazel/src/ngc-wrapped/BUILD.bazel b/packages/bazel/src/ngc-wrapped/BUILD.bazel
new file mode 100644
index 000000000000..5b3f2a7c9dc4
--- /dev/null
+++ b/packages/bazel/src/ngc-wrapped/BUILD.bazel
@@ -0,0 +1,46 @@
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+filegroup(
+    name = "package_assets",
+    srcs = glob(["*"]),
+    visibility = ["//packages/bazel:__subpackages__"],
+)
+
+ts_library(
+    name = "ngc_lib",
+    srcs = [
+        "extract_i18n.ts",
+        "index.ts",
+    ],
+    module_name = "@angular/bazel",
+    tsconfig = ":tsconfig.json",
+    visibility = ["//packages/bazel/test/ngc-wrapped:__subpackages__"],
+    deps = [
+        # BEGIN-INTERNAL
+        # Only needed when compiling within the Angular repo.
+        # Users will get this dependency from node_modules.
+        "//packages/compiler-cli",
+        # END-INTERNAL
+        "@build_bazel_rules_typescript//internal:tsc_wrapped",
+    ],
+)
+
+nodejs_binary(
+    name = "ngc-wrapped",
+    data = [
+        ":ngc_lib",
+        "@build_bazel_rules_typescript//third_party/github.com/bazelbuild/bazel/src/main/protobuf:worker_protocol.proto",
+    ],
+    entry_point = "angular/packages/bazel/src/ngc-wrapped/index.js",
+    visibility = ["//visibility:public"],
+)
+
+nodejs_binary(
+    name = "xi18n",
+    data = [
+        ":ngc_lib",
+    ],
+    entry_point = "angular/packages/bazel/src/ngc-wrapped/index.js/extract_i18n.js",
+    visibility = ["//visibility:public"],
+)
diff --git a/packages/bazel/src/ngc-wrapped/README.md b/packages/bazel/src/ngc-wrapped/README.md
new file mode 100644
index 000000000000..b48a91a8b66f
--- /dev/null
+++ b/packages/bazel/src/ngc-wrapped/README.md
@@ -0,0 +1,3 @@
+# ngc-wrapped
+
+This is a wrapper around @angular/compiler-cli that makes ngc run under Bazel.
diff --git a/packages/bazel/src/ngc-wrapped/extract_i18n.ts b/packages/bazel/src/ngc-wrapped/extract_i18n.ts
new file mode 100644
index 000000000000..301d7a32bc87
--- /dev/null
+++ b/packages/bazel/src/ngc-wrapped/extract_i18n.ts
@@ -0,0 +1,16 @@
+/**
+ * @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
+ *
+ * @fileoverview Extracts i18n messages.
+ */
+
+// Entry point
+if (require.main === module) {
+  const args = process.argv.slice(2);
+  console.error('>>> now yet implemented!');
+  process.exitCode = 1;
+}
diff --git a/packages/bazel/src/ngc-wrapped/index.ts b/packages/bazel/src/ngc-wrapped/index.ts
new file mode 100644
index 000000000000..4e1e92730d3e
--- /dev/null
+++ b/packages/bazel/src/ngc-wrapped/index.ts
@@ -0,0 +1,383 @@
+/**
+ * @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 ng from '@angular/compiler-cli';
+import {BazelOptions, CachedFileLoader, CompilerHost, FileCache, FileLoader, UncachedFileLoader, constructManifest, debug, fixUmdModuleDeclarations, parseTsconfig, resolveNormalizedPath, runAsWorker, runWorkerLoop} from '@bazel/typescript';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as tsickle from 'tsickle';
+import * as ts from 'typescript';
+
+const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
+const NGC_GEN_FILES = /^(.*?)\.(ngfactory|ngsummary|ngstyle|shim\.ngstyle)(.*)$/;
+// FIXME: we should be able to add the assets to the tsconfig so FileLoader
+// knows about them
+const NGC_ASSETS = /\.(css|html|ngsummary\.json)$/;
+
+const BAZEL_BIN = /\b(blaze|bazel)-out\b.*?\bbin\b/;
+
+// TODO(alexeagle): probably not needed, see
+// https://github.com/bazelbuild/rules_typescript/issues/28
+const ALLOW_NON_HERMETIC_READS = true;
+// Note: We compile the content of node_modules with plain ngc command line.
+const ALL_DEPS_COMPILED_WITH_BAZEL = false;
+
+const NODE_MODULES = 'node_modules/';
+
+export function main(args) {
+  if (runAsWorker(args)) {
+    runWorkerLoop(runOneBuild);
+  } else {
+    return runOneBuild(args) ? 0 : 1;
+  }
+  return 0;
+}
+
+/** The one FileCache instance used in this process. */
+const fileCache = new FileCache<ts.SourceFile>(debug);
+
+export function runOneBuild(args: string[], inputs?: {[path: string]: string}): boolean {
+  if (args[0] === '-p') args.shift();
+  // Strip leading at-signs, used to indicate a params file
+  const project = args[0].replace(/^@+/, '');
+
+  const [parsedOptions, errors] = parseTsconfig(project);
+  if (errors && errors.length) {
+    console.error(ng.formatDiagnostics(errors));
+    return false;
+  }
+  const {options: tsOptions, bazelOpts, files, config} = parsedOptions;
+  const expectedOuts = config['angularCompilerOptions']['expectedOut'];
+
+  const {basePath} = ng.calcProjectFileAndBasePath(project);
+  const compilerOpts = ng.createNgCompilerOptions(basePath, config, tsOptions);
+  const tsHost = ts.createCompilerHost(compilerOpts, true);
+  const {diagnostics} = compile({
+    allowNonHermeticReads: ALLOW_NON_HERMETIC_READS,
+    allDepsCompiledWithBazel: ALL_DEPS_COMPILED_WITH_BAZEL,
+    compilerOpts,
+    tsHost,
+    bazelOpts,
+    files,
+    inputs,
+    expectedOuts
+  });
+  if (diagnostics.length) {
+    console.error(ng.formatDiagnostics(diagnostics));
+  }
+  return diagnostics.every(d => d.category !== ts.DiagnosticCategory.Error);
+}
+
+export function relativeToRootDirs(filePath: string, rootDirs: string[]): string {
+  if (!filePath) return filePath;
+  // NB: the rootDirs should have been sorted longest-first
+  for (let i = 0; i < rootDirs.length; i++) {
+    const dir = rootDirs[i];
+    const rel = path.posix.relative(dir, filePath);
+    if (rel.indexOf('.') != 0) return rel;
+  }
+  return filePath;
+}
+
+export function compile({allowNonHermeticReads, allDepsCompiledWithBazel = true, compilerOpts,
+                         tsHost, bazelOpts, files, inputs, expectedOuts, gatherDiagnostics}: {
+  allowNonHermeticReads: boolean,
+  allDepsCompiledWithBazel?: boolean,
+  compilerOpts: ng.CompilerOptions,
+  tsHost: ts.CompilerHost, inputs?: {[path: string]: string},
+  bazelOpts: BazelOptions,
+  files: string[],
+  expectedOuts: string[], gatherDiagnostics?: (program: ng.Program) => ng.Diagnostics
+}): {diagnostics: ng.Diagnostics, program: ng.Program} {
+  let fileLoader: FileLoader;
+
+  if (bazelOpts.maxCacheSizeMb !== undefined) {
+    const maxCacheSizeBytes = bazelOpts.maxCacheSizeMb * (1 << 20);
+    fileCache.setMaxCacheSize(maxCacheSizeBytes);
+  } else {
+    fileCache.resetMaxCacheSize();
+  }
+
+  if (inputs) {
+    fileLoader = new CachedFileLoader(fileCache, allowNonHermeticReads);
+    // Resolve the inputs to absolute paths to match TypeScript internals
+    const resolvedInputs: {[path: string]: string} = {};
+    const inputKeys = Object.keys(inputs);
+    for (let i = 0; i < inputKeys.length; i++) {
+      const key = inputKeys[i];
+      resolvedInputs[resolveNormalizedPath(key)] = inputs[key];
+    }
+    fileCache.updateCache(resolvedInputs);
+  } else {
+    fileLoader = new UncachedFileLoader();
+  }
+
+  if (!bazelOpts.es5Mode) {
+    compilerOpts.annotateForClosureCompiler = true;
+    compilerOpts.annotationsAs = 'static fields';
+  }
+
+  // Detect from compilerOpts whether the entrypoint is being invoked in Ivy mode.
+  const isInIvyMode = compilerOpts.enableIvy === 'ngtsc' || compilerOpts.enableIvy === 'tsc';
+
+  // Disable downleveling and Closure annotation if in Ivy mode.
+  if (isInIvyMode) {
+    // In pass-through mode for TypeScript, we want to turn off decorator transpilation entirely.
+    // This causes ngc to be have exactly like tsc.
+    if (compilerOpts.enableIvy === 'tsc') {
+      compilerOpts.annotateForClosureCompiler = false;
+    }
+    compilerOpts.annotationsAs = 'decorators';
+  }
+
+  if (!compilerOpts.rootDirs) {
+    throw new Error('rootDirs is not set!');
+  }
+  const bazelBin = compilerOpts.rootDirs.find(rootDir => BAZEL_BIN.test(rootDir));
+  if (!bazelBin) {
+    throw new Error(`Couldn't find bazel bin in the rootDirs: ${compilerOpts.rootDirs}`);
+  }
+
+  const writtenExpectedOuts = [...expectedOuts];
+
+  const originalWriteFile = tsHost.writeFile.bind(tsHost);
+  tsHost.writeFile =
+      (fileName: string, content: string, writeByteOrderMark: boolean,
+       onError?: (message: string) => void, sourceFiles?: ts.SourceFile[]) => {
+        const relative = relativeToRootDirs(fileName.replace(/\\/g, '/'), [compilerOpts.rootDir]);
+        const expectedIdx = writtenExpectedOuts.findIndex(o => o === relative);
+        if (expectedIdx >= 0) {
+          writtenExpectedOuts.splice(expectedIdx, 1);
+          originalWriteFile(fileName, content, writeByteOrderMark, onError, sourceFiles);
+        }
+      };
+
+  // Patch fileExists when resolving modules, so that CompilerHost can ask TypeScript to
+  // resolve non-existing generated files that don't exist on disk, but are
+  // synthetic and added to the `programWithStubs` based on real inputs.
+  const generatedFileModuleResolverHost = Object.create(tsHost);
+  generatedFileModuleResolverHost.fileExists = (fileName: string) => {
+    const match = NGC_GEN_FILES.exec(fileName);
+    if (match) {
+      const [, file, suffix, ext] = match;
+      // Performance: skip looking for files other than .d.ts or .ts
+      if (ext !== '.ts' && ext !== '.d.ts') return false;
+      if (suffix.indexOf('ngstyle') >= 0) {
+        // Look for foo.css on disk
+        fileName = file;
+      } else {
+        // Look for foo.d.ts or foo.ts on disk
+        fileName = file + (ext || '');
+      }
+    }
+    return tsHost.fileExists(fileName);
+  };
+
+  function generatedFileModuleResolver(
+      moduleName: string, containingFile: string,
+      compilerOptions: ts.CompilerOptions): ts.ResolvedModuleWithFailedLookupLocations {
+    return ts.resolveModuleName(
+        moduleName, containingFile, compilerOptions, generatedFileModuleResolverHost);
+  }
+
+  const bazelHost = new CompilerHost(
+      files, compilerOpts, bazelOpts, tsHost, fileLoader, allowNonHermeticReads,
+      generatedFileModuleResolver);
+
+  // Also need to disable decorator downleveling in the BazelHost in Ivy mode.
+  if (isInIvyMode) {
+    bazelHost.transformDecorators = false;
+  }
+
+  // Prevent tsickle adding any types at all if we don't want closure compiler annotations.
+  bazelHost.transformTypesToClosure = compilerOpts.annotateForClosureCompiler;
+  const origBazelHostFileExist = bazelHost.fileExists;
+  bazelHost.fileExists = (fileName: string) => {
+    if (NGC_ASSETS.test(fileName)) {
+      return tsHost.fileExists(fileName);
+    }
+    return origBazelHostFileExist.call(bazelHost, fileName);
+  };
+  const origBazelHostShouldNameModule = bazelHost.shouldNameModule.bind(bazelHost);
+  bazelHost.shouldNameModule = (fileName: string) => {
+    // The bundle index file is synthesized in bundle_index_host so it's not in the
+    // compilationTargetSrc.
+    // However we still want to give it an AMD module name for devmode.
+    // We can't easily tell which file is the synthetic one, so we build up the path we expect
+    // it to have
+    // and compare against that.
+    if (fileName ===
+        path.join(compilerOpts.baseUrl, bazelOpts.package, compilerOpts.flatModuleOutFile + '.ts'))
+      return true;
+    // Also handle the case when angular is built from source as an external repository
+    if (fileName ===
+        path.join(
+            compilerOpts.baseUrl, 'external/angular', bazelOpts.package,
+            compilerOpts.flatModuleOutFile + '.ts'))
+      return true;
+    return origBazelHostShouldNameModule(fileName) || NGC_GEN_FILES.test(fileName);
+  };
+
+  const ngHost = ng.createCompilerHost({options: compilerOpts, tsHost: bazelHost});
+
+  ngHost.fileNameToModuleName = (importedFilePath: string, containingFilePath: string) => {
+    if ((compilerOpts.module === ts.ModuleKind.UMD || compilerOpts.module === ts.ModuleKind.AMD) &&
+        ngHost.amdModuleName) {
+      return ngHost.amdModuleName({ fileName: importedFilePath } as ts.SourceFile);
+    }
+    const result = relativeToRootDirs(importedFilePath, compilerOpts.rootDirs).replace(EXT, '');
+    if (result.startsWith(NODE_MODULES)) {
+      return result.substr(NODE_MODULES.length);
+    }
+    return bazelOpts.workspaceName + '/' + result;
+  };
+  ngHost.toSummaryFileName = (fileName: string, referringSrcFileName: string) => path.posix.join(
+      bazelOpts.workspaceName,
+      relativeToRootDirs(fileName, compilerOpts.rootDirs).replace(EXT, ''));
+  if (allDepsCompiledWithBazel) {
+    // Note: The default implementation would work as well,
+    // but we can be faster as we know how `toSummaryFileName` works.
+    // Note: We can't do this if some deps have been compiled with the command line,
+    // as that has a different implementation of fromSummaryFileName / toSummaryFileName
+    ngHost.fromSummaryFileName = (fileName: string, referringLibFileName: string) => {
+      const workspaceRelative = fileName.split('/').splice(1).join('/');
+      return resolveNormalizedPath(bazelBin, workspaceRelative) + '.d.ts';
+    };
+  }
+  // Patch a property on the ngHost that allows the resourceNameToModuleName function to
+  // report better errors.
+  (ngHost as any).reportMissingResource = (resourceName: string) => {
+    console.error(`\nAsset not found:\n  ${resourceName}`);
+    console.error('Check that it\'s included in the `assets` attribute of the `ng_module` rule.\n');
+  };
+
+  const emitCallback: ng.TsEmitCallback = ({
+    program,
+    targetSourceFile,
+    writeFile,
+    cancellationToken,
+    emitOnlyDtsFiles,
+    customTransformers = {},
+  }) =>
+      tsickle.emitWithTsickle(
+          program, bazelHost, bazelHost, compilerOpts, targetSourceFile, writeFile,
+          cancellationToken, emitOnlyDtsFiles, {
+            beforeTs: customTransformers.before,
+            afterTs: [
+              ...(customTransformers.after || []),
+              fixUmdModuleDeclarations((sf: ts.SourceFile) => bazelHost.amdModuleName(sf)),
+            ],
+          });
+
+  if (!gatherDiagnostics) {
+    gatherDiagnostics = (program) =>
+        gatherDiagnosticsForInputsOnly(compilerOpts, bazelOpts, program);
+  }
+  const {diagnostics, emitResult, program} = ng.performCompilation({
+    rootNames: files,
+    options: compilerOpts,
+    host: ngHost, emitCallback,
+    mergeEmitResultsCallback: tsickle.mergeEmitResults, gatherDiagnostics
+  });
+  const tsickleEmitResult = emitResult as tsickle.EmitResult;
+  let externs = '/** @externs */\n';
+  if (!diagnostics.length) {
+    if (bazelOpts.tsickleGenerateExterns) {
+      externs += tsickle.getGeneratedExterns(tsickleEmitResult.externs);
+    }
+    if (bazelOpts.manifest) {
+      const manifest = constructManifest(tsickleEmitResult.modulesManifest, bazelHost);
+      fs.writeFileSync(bazelOpts.manifest, manifest);
+    }
+  }
+
+  // If compilation fails unexpectedly, performCompilation returns no program.
+  // Make sure not to crash but report the diagnostics.
+  if (!program) return {program, diagnostics};
+
+  if (!bazelOpts.nodeModulesPrefix) {
+    // If there is no node modules, then metadata.json should be emitted since
+    // there is no other way to obtain the information
+    generateMetadataJson(program.getTsProgram(), files, compilerOpts.rootDirs, bazelBin, tsHost);
+  }
+
+  if (bazelOpts.tsickleExternsPath) {
+    // Note: when tsickleExternsPath is provided, we always write a file as a
+    // marker that compilation succeeded, even if it's empty (just containing an
+    // @externs).
+    fs.writeFileSync(bazelOpts.tsickleExternsPath, externs);
+  }
+
+  for (let i = 0; i < writtenExpectedOuts.length; i++) {
+    originalWriteFile(writtenExpectedOuts[i], '', false);
+  }
+
+  return {program, diagnostics};
+}
+
+/**
+ * Generate metadata.json for the specified `files`. By default, metadata.json
+ * is only generated by the compiler if --flatModuleOutFile is specified. But
+ * if compiled under blaze, we want the metadata to be generated for each
+ * Angular component.
+ */
+function generateMetadataJson(
+    program: ts.Program, files: string[], rootDirs: string[], bazelBin: string,
+    tsHost: ts.CompilerHost) {
+  const collector = new ng.MetadataCollector();
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    const sourceFile = program.getSourceFile(file);
+    if (sourceFile) {
+      const metadata = collector.getMetadata(sourceFile);
+      if (metadata) {
+        const relative = relativeToRootDirs(file, rootDirs);
+        const shortPath = relative.replace(EXT, '.metadata.json');
+        const outFile = resolveNormalizedPath(bazelBin, shortPath);
+        const data = JSON.stringify(metadata);
+        tsHost.writeFile(outFile, data, false, undefined, []);
+      }
+    }
+  }
+}
+
+function isCompilationTarget(bazelOpts: BazelOptions, sf: ts.SourceFile): boolean {
+  return !NGC_GEN_FILES.test(sf.fileName) &&
+      (bazelOpts.compilationTargetSrc.indexOf(sf.fileName) !== -1);
+}
+
+function gatherDiagnosticsForInputsOnly(
+    options: ng.CompilerOptions, bazelOpts: BazelOptions,
+    ngProgram: ng.Program): (ng.Diagnostic | ts.Diagnostic)[] {
+  const tsProgram = ngProgram.getTsProgram();
+  const diagnostics: (ng.Diagnostic | ts.Diagnostic)[] = [];
+  // These checks mirror ts.getPreEmitDiagnostics, with the important
+  // exception of avoiding b/30708240, which is that if you call
+  // program.getDeclarationDiagnostics() it somehow corrupts the emit.
+  diagnostics.push(...tsProgram.getOptionsDiagnostics());
+  diagnostics.push(...tsProgram.getGlobalDiagnostics());
+  const programFiles = tsProgram.getSourceFiles().filter(f => isCompilationTarget(bazelOpts, f));
+  for (let i = 0; i < programFiles.length; i++) {
+    const sf = programFiles[i];
+    // Note: We only get the diagnostics for individual files
+    // to e.g. not check libraries.
+    diagnostics.push(...tsProgram.getSyntacticDiagnostics(sf));
+    diagnostics.push(...tsProgram.getSemanticDiagnostics(sf));
+  }
+  if (!diagnostics.length) {
+    // only gather the angular diagnostics if we have no diagnostics
+    // in any other files.
+    diagnostics.push(...ngProgram.getNgStructuralDiagnostics());
+    diagnostics.push(...ngProgram.getNgSemanticDiagnostics());
+  }
+  return diagnostics;
+}
+
+if (require.main === module) {
+  process.exitCode = main(process.argv.slice(2));
+}
diff --git a/packages/bazel/src/ngc-wrapped/tsconfig.json b/packages/bazel/src/ngc-wrapped/tsconfig.json
new file mode 100644
index 000000000000..fd217e560a24
--- /dev/null
+++ b/packages/bazel/src/ngc-wrapped/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "lib": ["es5", "es2015.collection", "es2015.core"]
+  }
+}
diff --git a/packages/bazel/src/protractor/BUILD.bazel b/packages/bazel/src/protractor/BUILD.bazel
new file mode 100644
index 000000000000..98d1e3ffbcec
--- /dev/null
+++ b/packages/bazel/src/protractor/BUILD.bazel
@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "package_assets",
+    srcs = glob(["*"]) + [
+        "//packages/bazel/src/protractor/utils:package_assets",
+    ],
+    visibility = ["//packages/bazel:__subpackages__"],
+)
+
+exports_files([
+    "protractor.conf.js",
+])
diff --git a/packages/bazel/src/protractor/protractor.conf.js b/packages/bazel/src/protractor/protractor.conf.js
new file mode 100644
index 000000000000..dae9bb3c8d4d
--- /dev/null
+++ b/packages/bazel/src/protractor/protractor.conf.js
@@ -0,0 +1,159 @@
+/**
+ * @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 DEBUG = false;
+
+const configPath = 'TMPL_config';
+const onPreparePath = 'TMPL_on_prepare';
+const workspace = 'TMPL_workspace';
+const server = 'TMPL_server';
+
+if (DEBUG)
+  console.info(`Protractor test starting with:
+  cwd: ${process.cwd()}
+  configPath: ${configPath}
+  onPreparePath: ${onPreparePath}
+  workspace: ${workspace}
+  server: ${server}`);
+
+// Helper function to warn when a user specified value is being overwritten
+function setConf(conf, name, value, msg) {
+  if (conf[name] && conf[name] !== value) {
+    console.warn(
+        `Your protractor configuration specifies an option which is overwritten by Bazel: '${name}' ${msg}`);
+  }
+  conf[name] = value;
+}
+
+let conf = {};
+
+// Import the user's base protractor configuration if specified
+if (configPath) {
+  const baseConf = require(configPath);
+  if (!baseConf.config) {
+    throw new Error('Invalid base protractor configration. Expected config to be exported.');
+  }
+  conf = baseConf.config;
+}
+
+// Import the user's on prepare function if specified
+if (onPreparePath) {
+  const onPrepare = require(onPreparePath);
+  if (typeof onPrepare === 'function') {
+    const original = conf.onPrepare;
+    conf.onPrepare = function() {
+      return Promise.resolve(original ? original() : null)
+          .then(() => Promise.resolve(onPrepare({workspace, server})));
+    };
+  } else {
+    throw new Error(
+        'Invalid protractor on_prepare script. Expected a function as the default export.');
+  }
+}
+
+// Override the user's base protractor configuration as appropriate based on the
+// ts_web_test_suite & rules_webtesting WEB_TEST_METADATA attributes
+setConf(conf, 'framework', 'jasmine2', 'is set to jasmine2');
+
+const specs = [TMPL_specs]
+                  .map(s => require.resolve(s))
+                  .filter(s => s.endsWith('.spec.js') || s.endsWith('.test.js'));
+
+setConf(conf, 'specs', specs, 'are determined by the srcs and deps attribute');
+
+// WEB_TEST_METADATA is configured in rules_webtesting based on value
+// of the browsers attribute passed to ts_web_test_suite
+// We setup the protractor configuration based on the values in this object
+if (process.env['WEB_TEST_METADATA']) {
+  const webTestMetadata = require(process.env['WEB_TEST_METADATA']);
+  if (DEBUG) console.info(`WEB_TEST_METADATA: ${JSON.stringify(webTestMetadata, null, 2)}`);
+  if (webTestMetadata['environment'] === 'sauce') {
+    // If a sauce labs browser is chosen for the test such as
+    // "@io_bazel_rules_webtesting//browsers/sauce:chrome-win10"
+    // than the 'environment' will equal 'sauce'.
+    // We expect that a SAUCE_USERNAME and SAUCE_ACCESS_KEY is available
+    // from the environment for this test to run
+
+    // TODO(gmagolan): implement sauce labs support for protractor
+    throw new Error('Saucelabs not yet support by protractor_web_test_suite.');
+
+    // if (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) {
+    //   console.error('Make sure the SAUCE_USERNAME and SAUCE_ACCESS_KEY environment variables are
+    //   set.');
+    //   process.exit(1);
+    // }
+    // setConf(conf, 'sauceUser', process.env.SAUCE_USERNAME, 'is determined by the SAUCE_USERNAME
+    // environment variable');
+    // setConf(conf, 'sauceKey', process.env.SAUCE_ACCESS_KEY, 'is determined by the
+    // SAUCE_ACCESS_KEY environment variable');
+  } else if (webTestMetadata['environment'] === 'local') {
+    // When a local chrome or firefox browser is chosen such as
+    // "@io_bazel_rules_webtesting//browsers:chromium-local" or
+    // "@io_bazel_rules_webtesting//browsers:firefox-local"
+    // then the 'environment' will equal 'local' and
+    // 'webTestFiles' will contain the path to the binary to use
+    const webTestNamedFiles = webTestMetadata['webTestFiles'][0]['namedFiles'];
+    const headless = !process.env['DISPLAY'];
+    if (webTestNamedFiles['CHROMIUM']) {
+      const chromeBin = path.join(process.cwd(), 'external', webTestNamedFiles['CHROMIUM']);
+      const args = [];
+      if (headless) {
+        args.push('--headless');
+        args.push('--disable-gpu');
+        const isRoot = process.getuid && process.getuid() == 0;
+        if (isRoot) {
+          // Specify --no-sandbox if it is started by root.
+          args.push('--no-sandbox');
+        }
+      }
+      setConf(conf, 'directConnect', true, 'is set to true for chrome');
+      setConf(
+          conf, 'chromeDriver',
+          path.join(process.cwd(), 'external', webTestNamedFiles['CHROMEDRIVER']),
+          'is determined by the browsers attribute');
+      setConf(
+          conf, 'capabilities', {
+            browserName: 'chrome',
+            chromeOptions: {
+              binary: chromeBin,
+              args: args,
+            }
+          },
+          'is determined by the browsers attribute');
+    }
+    if (webTestNamedFiles['FIREFOX']) {
+      // TODO(gmagolan): implement firefox support for protractor
+      throw new Error('Firefox not yet support by protractor_web_test_suite');
+
+      // const firefoxBin = path.join('external', webTestNamedFiles['FIREFOX']);
+      // const args = [];
+      // if (headless) {
+      //   args.push("--headless")
+      //   args.push("--marionette")
+      // }
+      // setConf(conf, 'seleniumAddress', process.env.WEB_TEST_HTTP_SERVER.trim() + "/wd/hub", 'is
+      // configured by Bazel for firefox browser')
+      // setConf(conf, 'capabilities', {
+      //   browserName: "firefox",
+      //   'moz:firefoxOptions': {
+      //     binary: firefoxBin,
+      //     args: args,
+      //   }
+      // }, 'is determined by the browsers attribute');
+    }
+  } else {
+    console.warn(`Unknown WEB_TEST_METADATA environment '${webTestMetadata['environment']}'`);
+  }
+}
+
+// Export the complete protractor configuration
+if (DEBUG) console.info(`Protractor configuration: ${JSON.stringify(conf, null, 2)}`);
+
+exports.config = conf;
diff --git a/packages/bazel/src/protractor/protractor_web_test.bzl b/packages/bazel/src/protractor/protractor_web_test.bzl
new file mode 100644
index 000000000000..f3faee85478f
--- /dev/null
+++ b/packages/bazel/src/protractor/protractor_web_test.bzl
@@ -0,0 +1,357 @@
+# 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
+"Run end-to-end tests with Protractor"
+
+load(
+    "@build_bazel_rules_nodejs//internal:node.bzl",
+    "expand_path_into_runfiles",
+    "sources_aspect",
+)
+load("@io_bazel_rules_webtesting//web:web.bzl", "web_test_suite")
+load("@io_bazel_rules_webtesting//web/internal:constants.bzl", "DEFAULT_WRAPPED_TEST_TAGS")
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary")
+
+_CONF_TMPL = "//packages/bazel/src/protractor:protractor.conf.js"
+
+def _protractor_web_test_impl(ctx):
+    configuration = ctx.actions.declare_file(
+        "%s.conf.js" % ctx.label.name,
+        sibling = ctx.outputs.executable,
+    )
+
+    files = depset(ctx.files.srcs)
+    for d in ctx.attr.deps:
+        if hasattr(d, "node_sources"):
+            files = depset(transitive = [files, d.node_sources])
+        elif hasattr(d, "files"):
+            files = depset(transitive = [files, d.files])
+
+    specs = [
+        expand_path_into_runfiles(ctx, f.short_path)
+        for f in files
+    ]
+
+    configuration_sources = []
+    if ctx.file.configuration:
+        configuration_sources = [ctx.file.configuration]
+    if hasattr(ctx.attr.configuration, "node_sources"):
+        configuration_sources = ctx.attr.configuration.node_sources.to_list()
+
+    configuration_file = ctx.file.configuration
+    if hasattr(ctx.attr.configuration, "typescript"):
+        configuration_file = ctx.attr.configuration.typescript.es5_sources.to_list()[0]
+
+    on_prepare_sources = []
+    if ctx.file.on_prepare:
+        on_prepare_sources = [ctx.file.on_prepare]
+    if hasattr(ctx.attr.on_prepare, "node_sources"):
+        on_prepare_sources = ctx.attr.on_prepare.node_sources.to_list()
+
+    on_prepare_file = ctx.file.on_prepare
+    if hasattr(ctx.attr.on_prepare, "typescript"):
+        on_prepare_file = ctx.attr.on_prepare.typescript.es5_sources.to_list()[0]
+
+    protractor_executable_path = ctx.executable.protractor.short_path
+    if protractor_executable_path.startswith(".."):
+        protractor_executable_path = "external" + protractor_executable_path[2:]
+
+    server_executable_path = ""
+    if ctx.executable.server:
+        server_executable_path = ctx.executable.server.short_path
+        if server_executable_path.startswith(".."):
+            server_executable_path = "external" + protractor_executable_path[2:]
+
+    ctx.actions.expand_template(
+        output = configuration,
+        template = ctx.file._conf_tmpl,
+        substitutions = {
+            "TMPL_config": expand_path_into_runfiles(ctx, configuration_file.short_path) if configuration_file else "",
+            "TMPL_on_prepare": expand_path_into_runfiles(ctx, on_prepare_file.short_path) if on_prepare_file else "",
+            "TMPL_workspace": ctx.workspace_name,
+            "TMPL_server": server_executable_path,
+            "TMPL_specs": "\n".join(["      '%s'," % e for e in specs]),
+        },
+    )
+
+    runfiles = [configuration] + configuration_sources + on_prepare_sources
+
+    ctx.actions.write(
+        output = ctx.outputs.executable,
+        is_executable = True,
+        content = """#!/usr/bin/env bash
+if [ -e "$RUNFILE_MANIFEST_FILE" ]; then
+  while read line; do
+    declare -a PARTS=($line)
+    if [ "${{PARTS[0]}}" == "angular/{TMPL_protractor}" ]; then
+      readonly PROTRACTOR=${{PARTS[1]}}
+    elif [ "${{PARTS[0]}}" == "angular/{TMPL_conf}" ]; then
+      readonly CONF=${{PARTS[1]}}
+    fi
+  done < $RUNFILE_MANIFEST_FILE
+else
+  readonly PROTRACTOR={TMPL_protractor}
+  readonly CONF={TMPL_conf}
+fi
+
+export HOME=$(mktemp -d)
+
+# Print the protractor version in the test log
+PROTRACTOR_VERSION=$($PROTRACTOR --version)
+echo "Protractor $PROTRACTOR_VERSION"
+
+# Run the protractor binary
+$PROTRACTOR $CONF
+""".format(
+            TMPL_protractor = protractor_executable_path,
+            TMPL_conf = configuration.short_path,
+        ),
+    )
+    return [DefaultInfo(
+        files = depset([ctx.outputs.executable]),
+        runfiles = ctx.runfiles(
+            files = runfiles,
+            transitive_files = files,
+            # Propagate protractor_bin and its runfiles
+            collect_data = True,
+            collect_default = True,
+        ),
+        executable = ctx.outputs.executable,
+    )]
+
+_protractor_web_test = rule(
+    implementation = _protractor_web_test_impl,
+    test = True,
+    executable = True,
+    attrs = {
+        "configuration": attr.label(
+            doc = "Protractor configuration file",
+            allow_single_file = True,
+            cfg = "data",
+            aspects = [sources_aspect],
+        ),
+        "srcs": attr.label_list(
+            doc = "A list of JavaScript test files",
+            allow_files = [".js"],
+        ),
+        "on_prepare": attr.label(
+            doc = """A file with a node.js script to run once before all tests run.
+            If the script exports a function which returns a promise, protractor
+            will wait for the promise to resolve before beginning tests.""",
+            allow_single_file = True,
+            cfg = "data",
+            aspects = [sources_aspect],
+        ),
+        "deps": attr.label_list(
+            doc = "Other targets which produce JavaScript such as `ts_library`",
+            allow_files = True,
+            aspects = [sources_aspect],
+        ),
+        "data": attr.label_list(
+            doc = "Runtime dependencies",
+            cfg = "data",
+        ),
+        "server": attr.label(
+            doc = "Optional server executable target",
+            executable = True,
+            cfg = "data",
+            single_file = False,
+            allow_files = True,
+        ),
+        "protractor": attr.label(
+            doc = "Protractor executable target (set by protractor_web_test macro)",
+            executable = True,
+            cfg = "data",
+            single_file = False,
+            allow_files = True,
+        ),
+        "_conf_tmpl": attr.label(
+            default = Label(_CONF_TMPL),
+            allow_single_file = True,
+        ),
+    },
+)
+
+def protractor_web_test(
+        name,
+        configuration = None,
+        on_prepare = None,
+        srcs = [],
+        deps = [],
+        data = [],
+        server = None,
+        tags = [],
+        **kwargs):
+    """Runs a protractor test in a browser.
+
+    Args:
+      name: The name of the test
+      configuration: Protractor configuration file.
+      on_prepare: A file with a node.js script to run once before all tests run.
+          If the script exports a function which returns a promise, protractor
+          will wait for the promise to resolve before beginning tests.
+      srcs: JavaScript source files
+      deps: Other targets which produce JavaScript such as `ts_library`
+      data: Runtime dependencies
+      server: Optional server executable target
+      tags: Standard Bazel tags, this macro adds one for ibazel
+      **kwargs: passed through to `_protractor_web_test`
+    """
+
+    protractor_bin_name = name + "_protractor_bin"
+
+    nodejs_binary(
+        name = protractor_bin_name,
+        entry_point = "protractor/bin/protractor",
+        data = srcs + deps + data,
+        node_modules = "@//:node_modules",
+        testonly = 1,
+        visibility = ["//visibility:private"],
+    )
+
+    # Our binary dependency must be in data[] for collect_data to pick it up
+    # FIXME: maybe we can just ask :protractor_bin_name for its runfiles attr
+    web_test_data = data + [":" + protractor_bin_name]
+    if server:
+        web_test_data += [server]
+
+    _protractor_web_test(
+        name = name,
+        configuration = configuration,
+        on_prepare = on_prepare,
+        srcs = srcs,
+        deps = deps,
+        data = web_test_data,
+        server = server,
+        protractor = protractor_bin_name,
+        tags = tags + [
+            # Users don't need to know that this tag is required to run under ibazel
+            "ibazel_notify_changes",
+        ],
+        **kwargs
+    )
+
+def protractor_web_test_suite(
+        name,
+        configuration = None,
+        on_prepare = None,
+        srcs = [],
+        deps = [],
+        data = [],
+        server = None,
+        browsers = ["@io_bazel_rules_webtesting//browsers:chromium-local"],
+        args = None,
+        browser_overrides = None,
+        config = None,
+        flaky = None,
+        local = None,
+        shard_count = None,
+        size = None,
+        tags = [],
+        test_suite_tags = None,
+        timeout = None,
+        visibility = None,
+        web_test_data = [],
+        wrapped_test_tags = None,
+        **remaining_keyword_args):
+    """Defines a test_suite of web_test targets that wrap a protractor_web_test target.
+
+    Args:
+      name: The base name of the test.
+      configuration: Protractor configuration file.
+      on_prepare: A file with a node.js script to run once before all tests run.
+          If the script exports a function which returns a promise, protractor
+          will wait for the promise to resolve before beginning tests.
+      srcs: JavaScript source files
+      deps: Other targets which produce JavaScript such as `ts_library`
+      data: Runtime dependencies
+      server: Optional server executable target
+      browsers: A sequence of labels specifying the browsers to use.
+      args: Args for web_test targets generated by this extension.
+      browser_overrides: Dictionary; optional; default is an empty dictionary. A
+        dictionary mapping from browser names to browser-specific web_test
+        attributes, such as shard_count, flakiness, timeout, etc. For example:
+        {'//browsers:chrome-native': {'shard_count': 3, 'flaky': 1}
+         '//browsers:firefox-native': {'shard_count': 1, 'timeout': 100}}.
+      config: Label; optional; Configuration of web test features.
+      flaky: A boolean specifying that the test is flaky. If set, the test will
+        be retried up to 3 times (default: 0)
+      local: boolean; optional.
+      shard_count: The number of test shards to use per browser. (default: 1)
+      size: A string specifying the test size. (default: 'large')
+      tags: A list of test tag strings to apply to each generated web_test target.
+        This macro adds a couple for ibazel.
+      test_suite_tags: A list of tag strings for the generated test_suite.
+      timeout: A string specifying the test timeout (default: computed from size)
+      visibility: List of labels; optional.
+      web_test_data: Data dependencies for the web_test.
+      wrapped_test_tags: A list of test tag strings to use for the wrapped test
+      **remaining_keyword_args: Arguments for the wrapped test target.
+    """
+
+    # Check explicitly for None so that users can set this to the empty list
+    if wrapped_test_tags == None:
+        wrapped_test_tags = DEFAULT_WRAPPED_TEST_TAGS
+
+    size = size or "large"
+
+    wrapped_test_name = name + "_wrapped_test"
+    protractor_bin_name = name + "_protractor_bin"
+
+    # Users don't need to know that this tag is required to run under ibazel
+    tags = tags + ["ibazel_notify_changes"]
+
+    nodejs_binary(
+        name = protractor_bin_name,
+        entry_point = "protractor/bin/protractor",
+        data = srcs + deps + data,
+        node_modules = "@//:node_modules",
+        testonly = 1,
+        visibility = ["//visibility:private"],
+    )
+
+    # Our binary dependency must be in data[] for collect_data to pick it up
+    # FIXME: maybe we can just ask the :protractor_bin_name for its runfiles attr
+    web_test_data = web_test_data + [":" + protractor_bin_name]
+    if server:
+        web_test_data += [server]
+
+    _protractor_web_test(
+        name = wrapped_test_name,
+        configuration = configuration,
+        on_prepare = on_prepare,
+        srcs = srcs,
+        deps = deps,
+        data = web_test_data,
+        server = server,
+        protractor = protractor_bin_name,
+        args = args,
+        flaky = flaky,
+        local = local,
+        shard_count = shard_count,
+        size = size,
+        tags = wrapped_test_tags,
+        timeout = timeout,
+        visibility = ["//visibility:private"],
+        **remaining_keyword_args
+    )
+
+    web_test_suite(
+        name = name,
+        launcher = ":" + wrapped_test_name,
+        args = args,
+        browsers = browsers,
+        browser_overrides = browser_overrides,
+        config = config,
+        data = web_test_data,
+        flaky = flaky,
+        local = local,
+        shard_count = shard_count,
+        size = size,
+        tags = tags,
+        test = wrapped_test_name,
+        test_suite_tags = test_suite_tags,
+        timeout = timeout,
+        visibility = visibility,
+    )
diff --git a/packages/bazel/src/protractor/utils/BUILD.bazel b/packages/bazel/src/protractor/utils/BUILD.bazel
new file mode 100644
index 000000000000..437e9b327e11
--- /dev/null
+++ b/packages/bazel/src/protractor/utils/BUILD.bazel
@@ -0,0 +1,16 @@
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "package_assets",
+    srcs = glob(["*"]),
+    visibility = ["//packages/bazel:__subpackages__"],
+)
+
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+ts_library(
+    name = "utils",
+    srcs = ["index.ts"],
+    module_name = "@angular/bazel/protractor-utils",
+    tsconfig = ":tsconfig.json",
+)
diff --git a/packages/bazel/src/protractor/utils/index.ts b/packages/bazel/src/protractor/utils/index.ts
new file mode 100644
index 000000000000..666119d5161f
--- /dev/null
+++ b/packages/bazel/src/protractor/utils/index.ts
@@ -0,0 +1,94 @@
+/**
+ * @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 child_process from 'child_process';
+import * as net from 'net';
+import * as path from 'path';
+
+export function isTcpPortFree(port: number): Promise<boolean> {
+  return new Promise((resolve, reject) => {
+    const server = net.createServer();
+    server.on('error', (e) => { resolve(false); });
+    server.on('close', () => { resolve(true); });
+    server.listen(port, () => { server.close(); });
+  });
+}
+
+export function isTcpPortBound(port: number): Promise<boolean> {
+  return new Promise((resolve, reject) => {
+    const client = new net.Socket();
+    client.once('connect', () => { resolve(true); });
+    client.once('error', (e) => { resolve(false); });
+    client.connect(port);
+  });
+}
+
+export async function findFreeTcpPort(): Promise<number> {
+  const range = {
+    min: 32768,
+    max: 60000,
+  };
+  for (let i = 0; i < 100; i++) {
+    let port = Math.floor(Math.random() * (range.max - range.min) + range.min);
+    if (await isTcpPortFree(port)) {
+      return port;
+    }
+  }
+  throw new Error('Unable to find a free port');
+}
+
+// Interface for config parameter of the protractor_web_test_suite onPrepare function
+export interface OnPrepareConfig {
+  // The workspace name
+  workspace: string;
+
+  // The server binary to run
+  server: string;
+}
+
+export function waitForServer(port: number, timeout: number): Promise<boolean> {
+  return isTcpPortBound(port).then(isBound => {
+    if (!isBound) {
+      if (timeout <= 0) {
+        throw new Error('Timeout waiting for server to start');
+      }
+      const wait = Math.min(timeout, 500);
+      return new Promise((res, rej) => setTimeout(res, wait))
+          .then(() => waitForServer(port, timeout - wait));
+    }
+    return true;
+  });
+}
+
+// Return type from runServer function
+export interface ServerSpec {
+  // Port number that the server is running on
+  port: number;
+}
+
+export function runServer(
+    workspace: string, binary: string, portFlag: string, args: string[],
+    timeout = 5000): Promise<ServerSpec> {
+  return findFreeTcpPort().then(function(port) {
+    const runfiles_path = process.env.TEST_SRCDIR;
+    const cmd = path.join(runfiles_path, workspace, binary);
+
+    args = args.concat([portFlag, port.toString()]);
+
+    const child = child_process.spawn(
+        cmd, args, {cwd: path.join(runfiles_path, workspace), stdio: 'inherit'});
+
+    child.on('exit', function(code) {
+      if (code != 0) {
+        throw new Error(`non-zero exit code ${code} from server`);
+      }
+    });
+
+    return waitForServer(port, timeout).then(() => { return {port}; });
+  });
+}
diff --git a/packages/bazel/src/protractor/utils/tsconfig.json b/packages/bazel/src/protractor/utils/tsconfig.json
new file mode 100644
index 000000000000..e9b6c07f852a
--- /dev/null
+++ b/packages/bazel/src/protractor/utils/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "lib": ["es2015"]
+  }
+}
diff --git a/packages/bazel/src/rules_typescript.bzl b/packages/bazel/src/rules_typescript.bzl
new file mode 100644
index 000000000000..33095c44c030
--- /dev/null
+++ b/packages/bazel/src/rules_typescript.bzl
@@ -0,0 +1,22 @@
+"""Allows different paths for these imports in google3.
+"""
+
+load(
+    "@build_bazel_rules_typescript//internal:build_defs.bzl",
+    _tsc_wrapped_tsconfig = "tsc_wrapped_tsconfig",
+)
+load(
+    "@build_bazel_rules_typescript//internal:common/compilation.bzl",
+    _COMMON_ATTRIBUTES = "COMMON_ATTRIBUTES",
+    _COMMON_OUTPUTS = "COMMON_OUTPUTS",
+    _DEPS_ASPECTS = "DEPS_ASPECTS",
+    _compile_ts = "compile_ts",
+    _ts_providers_dict_to_struct = "ts_providers_dict_to_struct",
+)
+
+tsc_wrapped_tsconfig = _tsc_wrapped_tsconfig
+COMMON_ATTRIBUTES = _COMMON_ATTRIBUTES
+COMMON_OUTPUTS = _COMMON_OUTPUTS
+compile_ts = _compile_ts
+DEPS_ASPECTS = _DEPS_ASPECTS
+ts_providers_dict_to_struct = _ts_providers_dict_to_struct
diff --git a/packages/bazel/test/ng_package/BUILD.bazel b/packages/bazel/test/ng_package/BUILD.bazel
new file mode 100644
index 000000000000..e21acdabd0e1
--- /dev/null
+++ b/packages/bazel/test/ng_package/BUILD.bazel
@@ -0,0 +1,65 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test", "nodejs_binary")
+
+exports_files(["package.json"])
+
+# The tests in this package must run in separate targets, since they change
+# working directory and therefore have mutable global state that causes test
+# isolation failures.
+
+ts_library(
+    name = "core_spec_lib",
+    testonly = True,
+    srcs = ["core_package.spec.ts"],
+    deps = ["//packages:types"],
+)
+
+jasmine_node_test(
+    name = "core_package",
+    srcs = [":core_spec_lib"],
+    data = [
+        "//packages/core:npm_package",
+    ],
+)
+
+ts_library(
+    name = "common_spec_lib",
+    testonly = True,
+    srcs = ["common_package.spec.ts"],
+    deps = ["//packages:types"],
+)
+
+jasmine_node_test(
+    name = "common_package",
+    srcs = [":common_spec_lib"],
+    data = ["//packages/common:npm_package"],
+)
+
+ts_library(
+    name = "example_spec_lib",
+    srcs = ["example_package.spec.ts"],
+    deps = ["//packages:types"],
+)
+
+jasmine_node_test(
+    name = "example_package",
+    srcs = [":example_spec_lib"],
+    data = [
+        "example_package.golden",
+        "//packages/bazel/test/ng_package/example:npm_package",
+    ],
+    # TODO(alexeagle): re-enable this test
+    # see https://github.com/angular/angular/pull/22933
+    tags = ["manual"],
+)
+
+nodejs_binary(
+    name = "example_package.accept",
+    data = [
+        "example_package.golden",
+        ":example_spec_lib",
+        "//packages/bazel/test/ng_package/example:npm_package",
+    ],
+    entry_point = "angular/packages/bazel/test/ng_package/example_package.spec.js",
+    templated_args = ["--accept"],
+)
diff --git a/packages/bazel/test/ng_package/common_package.spec.ts b/packages/bazel/test/ng_package/common_package.spec.ts
new file mode 100644
index 000000000000..81d8b32012c5
--- /dev/null
+++ b/packages/bazel/test/ng_package/common_package.spec.ts
@@ -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
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import * as shx from 'shelljs';
+
+shx.cd(path.join(process.env['TEST_SRCDIR'], 'angular', 'packages', 'common', 'npm_package'));
+
+describe('@angular/common ng_package', () => {
+  describe('should have the locales files', () => {
+    it('/locales', () => {
+      const files = shx.ls('locales').stdout.split('\n');
+      expect(files.some(n => n.endsWith('.d.ts'))).toBe(true, `.d.ts files don't exist`);
+      expect(files.some(n => n.endsWith('.js'))).toBe(true, `.js files don't exist`);
+    });
+    it('/locales/extra', () => {
+      const files = shx.ls('locales/extra').stdout.split('\n');
+      expect(files.some(n => n.endsWith('.d.ts'))).toBe(true, `.d.ts files don't exist`);
+      expect(files.some(n => n.endsWith('.js'))).toBe(true, `.js files don't exist`);
+    });
+    // regression test for https://github.com/angular/angular/issues/23217
+    // Note, we don't have an e2e test that covers this
+    it('doesn\'t pass require in a way that breaks webpack static analysis',
+       () => { expect(shx.cat('locales/fr.js')).not.toContain('factory(require, exports)'); });
+  });
+
+  it('should have right bundle files', () => {
+    expect(shx.ls('-R', 'bundles').stdout.split('\n').filter(n => !!n).sort()).toEqual([
+      'common-http-testing.umd.js',
+      'common-http-testing.umd.js.map',
+      'common-http-testing.umd.min.js',
+      'common-http-testing.umd.min.js.map',
+      'common-http.umd.js',
+      'common-http.umd.js.map',
+      'common-http.umd.min.js',
+      'common-http.umd.min.js.map',
+      'common-testing.umd.js',
+      'common-testing.umd.js.map',
+      'common-testing.umd.min.js',
+      'common-testing.umd.min.js.map',
+      'common.umd.js',
+      'common.umd.js.map',
+      'common.umd.min.js',
+      'common.umd.min.js.map',
+    ]);
+  });
+
+  it('should reference core using global symbol in umd',
+     () => { expect(shx.cat('bundles/common.umd.js')).toContain('global.ng.core'); });
+
+  it('should have right fesm files', () => {
+    const expected = [
+      'common.js',
+      'common.js.map',
+      'http',
+      'http.js',
+      'http.js.map',
+      'http/testing.js',
+      'http/testing.js.map',
+      'testing.js',
+      'testing.js.map',
+    ];
+    expect(shx.ls('-R', 'fesm5').stdout.split('\n').filter(n => !!n).sort()).toEqual(expected);
+    expect(shx.ls('-R', 'fesm2015').stdout.split('\n').filter(n => !!n).sort()).toEqual(expected);
+  });
+
+  describe('should have module resolution properties in the package.json file for', () => {
+    // https://github.com/angular/common-builds/blob/master/package.json
+    it('/', () => {
+      const actual = JSON.parse(fs.readFileSync('package.json', {encoding: 'utf-8'}));
+      expect(actual['main']).toEqual('./bundles/common.umd.js');
+    });
+    // https://github.com/angular/common-builds/blob/master/http/package.json
+    it('/http', () => {
+      const actual = JSON.parse(fs.readFileSync('http/package.json', {encoding: 'utf-8'}));
+      expect(actual['main']).toEqual('../bundles/common-http.umd.js');
+      expect(actual['es2015']).toEqual('../fesm2015/http.js');
+      expect(actual['module']).toEqual('../fesm5/http.js');
+      expect(actual['typings']).toEqual('./http.d.ts');
+    });
+    // https://github.com/angular/common-builds/blob/master/testing/package.json
+    it('/testing', () => {
+      const actual = JSON.parse(fs.readFileSync('testing/package.json', {encoding: 'utf-8'}));
+      expect(actual['main']).toEqual('../bundles/common-testing.umd.js');
+    });
+    // https://github.com/angular/common-builds/blob/master/http/testing/package.json
+    it('/http/testing', () => {
+      const actual = JSON.parse(fs.readFileSync('http/testing/package.json', {encoding: 'utf-8'}));
+      expect(actual['main']).toEqual('../../bundles/common-http-testing.umd.js');
+      expect(actual['es2015']).toEqual('../../fesm2015/http/testing.js');
+      expect(actual['module']).toEqual('../../fesm5/http/testing.js');
+      expect(actual['typings']).toEqual('./testing.d.ts');
+    });
+  });
+});
diff --git a/packages/bazel/test/ng_package/core_package.spec.ts b/packages/bazel/test/ng_package/core_package.spec.ts
new file mode 100644
index 000000000000..9496201c5dd6
--- /dev/null
+++ b/packages/bazel/test/ng_package/core_package.spec.ts
@@ -0,0 +1,287 @@
+/**
+ * @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 path from 'path';
+import * as shx from 'shelljs';
+
+const corePackagePath =
+    path.join(process.env['TEST_SRCDIR'], 'angular', 'packages', 'core', 'npm_package');
+shx.cd(corePackagePath);
+
+/**
+ * Utility functions that allows me to create fs paths
+ *   p`${foo}/some/${{bar}}/path` rather than path.join(foo, 'some',
+ */
+function p(templateStringArray: TemplateStringsArray) {
+  const segments = [];
+  for (const entry of templateStringArray) {
+    segments.push(...entry.split('/').filter(s => s !== ''));
+  }
+  return path.join(...segments);
+}
+
+
+describe('@angular/core ng_package', () => {
+
+  describe('misc root files', () => {
+
+    describe('README.md', () => {
+
+      it('should have a README.md file with basic info', () => {
+        expect(shx.cat('README.md')).toContain(`Angular`);
+        expect(shx.cat('README.md')).toContain(`https://github.com/angular/angular`);
+      });
+    });
+  });
+
+
+  describe('primary entry-point', () => {
+
+    describe('package.json', () => {
+
+      const packageJson = 'package.json';
+
+      it('should have a package.json file',
+         () => { expect(shx.grep('"name":', packageJson)).toContain(`@angular/core`); });
+
+
+      it('should contain correct version number with the PLACEHOLDER string replaced', () => {
+        expect(shx.grep('"version":', packageJson)).toMatch(/\d+\.\d+\.\d+(?!-PLACEHOLDER)/);
+      });
+
+      it('should contain module resolution mappings', () => {
+        expect(shx.grep('"main":', packageJson)).toContain(`./bundles/core.umd.js`);
+        expect(shx.grep('"module":', packageJson)).toContain(`./fesm5/core.js`);
+        expect(shx.grep('"es2015":', packageJson)).toContain(`./fesm2015/core.js`);
+        expect(shx.grep('"esm5":', packageJson)).toContain(`./esm5/core.js`);
+        expect(shx.grep('"esm2015":', packageJson)).toContain(`./esm2015/core.js`);
+        expect(shx.grep('"typings":', packageJson)).toContain(`./core.d.ts`);
+      });
+
+      it('should contain metadata for ng update', () => {
+        expect(shx.cat(packageJson)).not.toContain('NG_UPDATE_PACKAGE_GROUP');
+        expect(JSON.parse(shx.cat(packageJson))['ng-update']['packageGroup'])
+            .toContain('@angular/core');
+      });
+    });
+
+
+    describe('typescript support', () => {
+
+      it('should have an index.d.ts file',
+         () => { expect(shx.cat('core.d.ts')).toContain(`export *`); });
+      it('should not have amd module names',
+         () => { expect(shx.cat('public_api.d.ts')).not.toContain('<amd-module name'); });
+    });
+
+
+    describe('closure', () => {
+      it('should contain externs', () => {
+        expect(shx.cat('src/testability/testability.externs.js')).toContain('/** @externs */');
+      });
+    });
+
+
+    describe('angular metadata', () => {
+
+      it('should have metadata.json files',
+         () => { expect(shx.cat('core.metadata.json')).toContain(`"__symbolic":"module"`); });
+    });
+
+
+    describe('fesm2015', () => {
+      it('should have a fesm15 file in the /fesm2015 directory',
+         () => { expect(shx.cat('fesm2015/core.js')).toContain(`export {`); });
+
+      it('should have a source map', () => {
+        expect(shx.cat('fesm2015/core.js.map'))
+            .toContain(`{"version":3,"file":"core.js","sources":`);
+      });
+
+      it('should have the version info in the header', () => {
+        expect(shx.cat('fesm2015/core.js'))
+            .toMatch(/@license Angular v\d+\.\d+\.\d+(?!-PLACEHOLDER)/);
+      });
+
+      it('should have been built from the generated bundle index',
+         () => { expect(shx.cat('fesm2015/core.js')).toMatch('export {.*makeParamDecorator'); });
+    });
+
+
+    describe('fesm5', () => {
+
+      it('should have a fesm5 file in the /fesm5 directory',
+         () => { expect(shx.cat('fesm5/core.js')).toContain(`export {`); });
+
+      it('should have a source map', () => {
+        expect(shx.cat('fesm5/core.js.map')).toContain(`{"version":3,"file":"core.js","sources":`);
+      });
+
+      it('should not be processed by tsickle', () => {
+        expect(shx.cat('fesm5/core.js')).not.toContain('@fileoverview added by tsickle');
+      });
+
+      it('should have annotations rather than decorators',
+         () => { expect(shx.cat('fesm5/core.js')).not.toContain('__decorate'); });
+
+      it('should load tslib from external bundle', () => {
+        expect(shx.cat('fesm5/core.js')).not.toContain('function __extends');
+        expect(shx.cat('fesm5/core.js')).toMatch('import {.*__extends');
+      });
+
+      it('should have been built from the generated bundle index',
+         () => { expect(shx.cat('fesm5/core.js')).toMatch('export {.*makeParamDecorator'); });
+    });
+
+
+    describe('esm2015', () => {
+      it('should not contain any *.ngfactory.js files', () => {
+        expect(shx.find('esm2015').filter(f => f.endsWith('.ngfactory.js'))).toEqual([]);
+      });
+
+      it('should not contain any *.ngsummary.js files', () => {
+        expect(shx.find('esm2015').filter(f => f.endsWith('.ngsummary.js'))).toEqual([]);
+      });
+    });
+
+
+    describe('esm5', () => {
+      it('should not contain any *.ngfactory.js files',
+         () => { expect(shx.find('esm5').filter(f => f.endsWith('.ngfactory.js'))).toEqual([]); });
+
+      it('should not contain any *.ngsummary.js files',
+         () => { expect(shx.find('esm5').filter(f => f.endsWith('.ngsummary.js'))).toEqual([]); });
+    });
+
+
+    describe('umd', () => {
+
+      it('should have a umd file in the /bundles directory',
+         () => { expect(shx.ls('bundles/core.umd.js').length).toBe(1, 'File not found'); });
+
+      it('should have a source map next to the umd file',
+         () => { expect(shx.ls('bundles/core.umd.js.map').length).toBe(1, 'File not found'); });
+
+      it('should have a minified umd file in the /bundles directory',
+         () => { expect(shx.ls('bundles/core.umd.min.js').length).toBe(1, 'File not found'); });
+
+      it('should have a source map next to the minified umd file',
+         () => { expect(shx.ls('bundles/core.umd.min.js.map').length).toBe(1, 'File not found'); });
+
+      it('should have the version info in the header', () => {
+        expect(shx.cat('bundles/core.umd.js'))
+            .toMatch(/@license Angular v\d+\.\d+\.\d+(?!-PLACEHOLDER)/);
+      });
+
+      it('should have tslib helpers', () => {
+        expect(shx.cat('bundles/core.umd.js')).toContain('function __extends');
+        expect(shx.cat('bundles/core.umd.js')).not.toContain('undefined.__extends');
+      });
+      it('should have an AMD name',
+         () => { expect(shx.cat('bundles/core.umd.js')).toContain('define(\'@angular/core\''); });
+      it('should define ng global symbols',
+         () => { expect(shx.cat('bundles/core.umd.js')).toContain('global.ng.core = {}'); });
+    });
+  });
+
+  describe('secondary entry-point', () => {
+    describe('package.json', () => {
+
+      const packageJson = p `testing/package.json`;
+
+      it('should have a package.json file',
+         () => { expect(shx.grep('"name":', packageJson)).toContain(`@angular/core/testing`); });
+
+      it('should have its module resolution mappings defined in the nested package.json', () => {
+        const packageJson = p `testing/package.json`;
+        expect(shx.grep('"main":', packageJson)).toContain(`../bundles/core-testing.umd.js`);
+        expect(shx.grep('"module":', packageJson)).toContain(`../fesm5/testing.js`);
+        expect(shx.grep('"es2015":', packageJson)).toContain(`../fesm2015/testing.js`);
+        expect(shx.grep('"esm5":', packageJson)).toContain(`../esm5/testing/testing.js`);
+        expect(shx.grep('"esm2015":', packageJson)).toContain(`../esm2015/testing/testing.js`);
+        expect(shx.grep('"typings":', packageJson)).toContain(`./testing.d.ts`);
+      });
+    });
+
+    describe('typings', () => {
+      const typingsFile = p `testing/index.d.ts`;
+      it('should have a typings file',
+         () => { expect(shx.cat(typingsFile)).toContain('export * from \'./public_api\';'); });
+    });
+    describe('typescript support', () => {
+
+      // TODO(i): why in the parent dir?
+      it('should have an \'redirect\' d.ts file in the parent dir',
+         () => { expect(shx.cat('testing.d.ts')).toContain(`export *`); });
+
+      it('should have a \'actual\' d.ts file in the parent dir', () => {
+        expect(shx.cat('testing/index.d.ts')).toContain(`export * from './public_api';`);
+      });
+    });
+
+    describe('angular metadata file', () => {
+      it('should have a \'redirect\' metadata.json file next to the d.ts file', () => {
+        expect(shx.cat('testing.metadata.json'))
+            .toContain(`"exports":[{"from":"./testing/testing"}],"flatModuleIndexRedirect":true`);
+      });
+    });
+
+    describe('fesm2015', () => {
+      it('should have a fesm15 file in the /fesm2015 directory',
+         () => { expect(shx.cat('fesm2015/testing.js')).toContain(`export {`); });
+
+      it('should have a source map', () => {
+        expect(shx.cat('fesm2015/testing.js.map'))
+            .toContain(`{"version":3,"file":"testing.js","sources":`);
+      });
+
+      it('should have the version info in the header', () => {
+        expect(shx.cat('fesm2015/testing.js'))
+            .toMatch(/@license Angular v\d+\.\d+\.\d+(?!-PLACEHOLDER)/);
+      });
+    });
+
+    describe('fesm5', () => {
+      it('should have a fesm5 file in the /fesm5 directory',
+         () => { expect(shx.cat('fesm5/testing.js')).toContain(`export {`); });
+
+      it('should have a source map', () => {
+        expect(shx.cat('fesm5/testing.js.map'))
+            .toContain(`{"version":3,"file":"testing.js","sources":`);
+      });
+    });
+
+    describe('umd', () => {
+
+      it('should have a umd file in the /bundles directory',
+         () => { expect(shx.ls('bundles/core-testing.umd.js').length).toBe(1, 'File not found'); });
+
+      it('should have a source map next to the umd file', () => {
+        expect(shx.ls('bundles/core-testing.umd.js.map').length).toBe(1, 'File not found');
+      });
+
+      it('should have a minified umd file in the /bundles directory', () => {
+        expect(shx.ls('bundles/core-testing.umd.min.js').length).toBe(1, 'File not found');
+      });
+
+      it('should have a source map next to the minified umd file', () => {
+        expect(shx.ls('bundles/core-testing.umd.min.js.map').length).toBe(1, 'File not found');
+      });
+
+      it('should have an AMD name', () => {
+        expect(shx.cat('bundles/core-testing.umd.js'))
+            .toContain('define(\'@angular/core/testing\'');
+      });
+
+      it('should define ng global symbols', () => {
+        expect(shx.cat('bundles/core-testing.umd.js')).toContain('global.ng.core.testing = {}');
+      });
+
+    });
+  });
+});
diff --git a/packages/bazel/test/ng_package/example-custom-entry-point-name.golden b/packages/bazel/test/ng_package/example-custom-entry-point-name.golden
new file mode 100644
index 000000000000..b023e773c646
--- /dev/null
+++ b/packages/bazel/test/ng_package/example-custom-entry-point-name.golden
@@ -0,0 +1,939 @@
+bundles
+  bundles/waffels-secondary.umd.js
+  bundles/waffels-secondary.umd.js.map
+  bundles/waffels-secondary.umd.min.js
+  bundles/waffels-secondary.umd.min.js.map
+  bundles/waffels.umd.js
+  bundles/waffels.umd.js.map
+  bundles/waffels.umd.min.js
+  bundles/waffels.umd.min.js.map
+esm2015
+  esm2015/example.externs.js
+  esm2015/example_public_index.js
+  esm2015/index.js
+  esm2015/index.ngfactory.js
+  esm2015/index.ngsummary.js
+  esm2015/mymodule.js
+  esm2015/mymodule.ngfactory.js
+  esm2015/mymodule.ngsummary.js
+  esm2015/secondary
+    esm2015/secondary/index.js
+    esm2015/secondary/index.ngfactory.js
+    esm2015/secondary/index.ngsummary.js
+    esm2015/secondary/secondary.externs.js
+    esm2015/secondary/secondary_public_index.js
+    esm2015/secondary/secondarymodule.js
+    esm2015/secondary/secondarymodule.ngfactory.js
+    esm2015/secondary/secondarymodule.ngsummary.js
+esm5
+  esm5/example_public_index.js
+  esm5/index.js
+  esm5/index.ngfactory.js
+  esm5/index.ngsummary.js
+  esm5/mymodule.js
+  esm5/mymodule.ngfactory.js
+  esm5/mymodule.ngsummary.js
+  esm5/secondary
+    esm5/secondary/index.js
+    esm5/secondary/index.ngfactory.js
+    esm5/secondary/index.ngsummary.js
+    esm5/secondary/secondary_public_index.js
+    esm5/secondary/secondarymodule.js
+    esm5/secondary/secondarymodule.ngfactory.js
+    esm5/secondary/secondarymodule.ngsummary.js
+example_public_index.d.ts
+example_public_index.metadata.json
+fesm2015
+  fesm2015/secondary.js
+  fesm2015/secondary.js.map
+  fesm2015/waffels.js
+  fesm2015/waffels.js.map
+fesm5
+  fesm5/secondary.js
+  fesm5/secondary.js.map
+  fesm5/waffels.js
+  fesm5/waffels.js.map
+index.d.ts
+mymodule.d.ts
+secondary
+  secondary/index.d.ts
+  secondary/secondary_public_index.d.ts
+  secondary/secondary_public_index.metadata.json
+  secondary/secondarymodule.d.ts
+xample
+  xample/package.json
+  xample/secondary
+    xample/secondary/package.json
+  xample/secondary.d.ts
+  xample/secondary.metadata.json
+xample.d.ts
+xample.metadata.json
+--- bundles/waffels-secondary.umd.js ---
+
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
+	typeof define === 'function' && define.amd ? define(['exports', '@angular/core'], factory) :
+	(factory((global.npm_package = {}),global.ng.core));
+}(this, (function (exports,core) { 'use strict';
+
+/**
+ * @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
+ */
+var SecondaryModule = /** @class */ (function () {
+    function SecondaryModule() {
+    }
+    SecondaryModule.decorators = [
+        { type: core.NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    SecondaryModule.ctorParameters = function () { return []; };
+    return SecondaryModule;
+}());
+var a = 1;
+
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+exports.SecondaryModule = SecondaryModule;
+exports.a = a;
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=waffels-secondary.umd.js.map
+
+
+--- bundles/waffels-secondary.umd.js.map ---
+
+{"version":3,"file":"waffels-secondary.umd.js","sources":["../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example-custom-entry-point-name/secondary/secondary.esm5/packages/bazel/test/ng_package/example-custom-entry-point-name/secondary/secondary_public_index.js"],"sourcesContent":["/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nvar SecondaryModule = /** @class */ (function () {\n    function SecondaryModule() {\n    }\n    SecondaryModule.decorators = [\n        { type: NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    SecondaryModule.ctorParameters = function () { return []; };\n    return SecondaryModule;\n}());\nexport { SecondaryModule };\nexport var a = 1;\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBRXRDLFFBQVEsU0FBQyxFQUFFOzs7OzBCQVZaOztTQVdhLGVBQWU7QUFHNUIsTUFBTSxDQUFDLElBQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBOZ01vZHVsZSh7fSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRhcnlNb2R1bGUge1xufVxuXG5leHBvcnQgY29uc3QgYSA9IDE7XG4iXX0=","/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport * from './secondarymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9zZWNvbmRhcnkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVFBLGNBQWMsbUJBQW1CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vc2Vjb25kYXJ5bW9kdWxlJztcbiJdfQ==","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5X3B1YmxpY19pbmRleC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlLWN1c3RvbS1lbnRyeS1wb2ludC1uYW1lL3NlY29uZGFyeS9zZWNvbmRhcnlfcHVibGljX2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19"],"names":["NgModule"],"mappings":";;;;;;AAAA;;;;;;;AAOA,AACA,IAAI,eAAe,kBAAkB,YAAY;IAC7C,SAAS,eAAe,GAAG;KAC1B;IACD,eAAe,CAAC,UAAU,GAAG;QACzB,EAAE,IAAI,EAAEA,aAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;KAClC,CAAC;;IAEF,eAAe,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IAC5D,OAAO,eAAe,CAAC;CAC1B,EAAE,CAAC,CAAC;AACL,AACO,IAAI,CAAC,GAAG,CAAC;;ACnBhB;;;;;;GAMG;;ACNH;;GAEG;;;;;;;;;;;;;"}
+
+--- bundles/waffels-secondary.umd.min.js ---
+
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core")):"function"==typeof define&&define.amd?define(["exports","@angular/core"],n):n(e.npm_package={},e.ng.core)}(this,function(e,n){"use strict";
+/**
+ * @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
+ */var o=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{}]}],e.ctorParameters=function(){return[]},e}();
+/**
+ * @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
+ */
+e.SecondaryModule=o,e.a=1,Object.defineProperty(e,"__esModule",{value:!0})});
+
+--- bundles/waffels-secondary.umd.min.js.map ---
+
+{"version":3,"sources":["packages/bazel/test/ng_package/example-custom-entry-point-name/waffels-secondary.umd.js"],"names":["global","factory","exports","module","require","define","amd","npm_package","ng","core","this","SecondaryModule","decorators","type","NgModule","args","ctorParameters","a","Object","defineProperty","value"],"mappings":"CAAC,SAAUA,EAAQC,GACC,iBAAZC,SAA0C,oBAAXC,OAAyBF,EAAQC,QAASE,QAAQ,kBACtE,mBAAXC,QAAyBA,OAAOC,IAAMD,QAAQ,UAAW,iBAAkBJ,GACjFA,EAASD,EAAOO,eAAkBP,EAAOQ,GAAGC,MAH9C,CAIEC,KAAM,SAAWR,EAAQO,GAAQ;;;;;;;GASnC,IAAIE,EAAiC,WACjC,SAASA,KAOT,OALAA,EAAgBC,aACVC,KAAMJ,EAAKK,SAAUC,YAG3BJ,EAAgBK,eAAiB,WAAc,UACxCL,EARyB;;;;;;;;AAwBpCT,EAAQS,gBAAkBA,EAC1BT,EAAQe,EAfA,EAiBRC,OAAOC,eAAejB,EAAS,cAAgBkB,OAAO","sourcesContent":["(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :\n\ttypeof define === 'function' && define.amd ? define(['exports', '@angular/core'], factory) :\n\t(factory((global.npm_package = {}),global.ng.core));\n}(this, (function (exports,core) { 'use strict';\n\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nvar SecondaryModule = /** @class */ (function () {\n    function SecondaryModule() {\n    }\n    SecondaryModule.decorators = [\n        { type: core.NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    SecondaryModule.ctorParameters = function () { return []; };\n    return SecondaryModule;\n}());\nvar a = 1;\n\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexports.SecondaryModule = SecondaryModule;\nexports.a = a;\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\n})));\n//# sourceMappingURL=waffels-secondary.umd.js.map\n"]}
+
+--- bundles/waffels.umd.js ---
+
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
+	typeof define === 'function' && define.amd ? define(['exports', '@angular/core'], factory) :
+	(factory((global.npm_package = {}),global.ng.core));
+}(this, (function (exports,core) { 'use strict';
+
+/**
+ * @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
+ */
+var MyModule = /** @class */ (function () {
+    function MyModule() {
+    }
+    MyModule.decorators = [
+        { type: core.NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    MyModule.ctorParameters = function () { return []; };
+    return MyModule;
+}());
+
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+exports.MyModule = MyModule;
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=waffels.umd.js.map
+
+
+--- bundles/waffels.umd.js.map ---
+
+{"version":3,"file":"waffels.umd.js","sources":["../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example-custom-entry-point-name/example.esm5/packages/bazel/test/ng_package/example-custom-entry-point-name/example_public_index.js"],"sourcesContent":["/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nvar MyModule = /** @class */ (function () {\n    function MyModule() {\n    }\n    MyModule.decorators = [\n        { type: NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    MyModule.ctorParameters = function () { return []; };\n    return MyModule;\n}());\nexport { MyModule };\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9teW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBR3RDLFFBQVEsU0FBQyxFQUFFOzs7O21CQVhaOztTQVlhLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthfSBmcm9tICcuL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUnO1xuXG5ATmdNb2R1bGUoe30pXG5leHBvcnQgY2xhc3MgTXlNb2R1bGUge1xufSJdfQ==","/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport * from './mymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsY0FBYyxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbXltb2R1bGUnOyJdfQ==","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9wdWJsaWNfaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9leGFtcGxlX3B1YmxpY19pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":["NgModule"],"mappings":";;;;;;AAAA;;;;;;;AAOA,AACA,IAAI,QAAQ,kBAAkB,YAAY;IACtC,SAAS,QAAQ,GAAG;KACnB;IACD,QAAQ,CAAC,UAAU,GAAG;QAClB,EAAE,IAAI,EAAEA,aAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;KAClC,CAAC;;IAEF,QAAQ,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IACrD,OAAO,QAAQ,CAAC;CACnB,EAAE,CAAC;;ACjBJ;;;;;;GAMG;;ACNH;;GAEG;;;;;;;;;;;;"}
+
+--- bundles/waffels.umd.min.js ---
+
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core")):"function"==typeof define&&define.amd?define(["exports","@angular/core"],n):n(e.npm_package={},e.ng.core)}(this,function(e,n){"use strict";
+/**
+ * @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
+ */var o=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{}]}],e.ctorParameters=function(){return[]},e}();
+/**
+ * @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
+ */e.MyModule=o,Object.defineProperty(e,"__esModule",{value:!0})});
+
+--- bundles/waffels.umd.min.js.map ---
+
+{"version":3,"sources":["packages/bazel/test/ng_package/example-custom-entry-point-name/waffels.umd.js"],"names":["global","factory","exports","module","require","define","amd","npm_package","ng","core","this","MyModule","decorators","type","NgModule","args","ctorParameters","Object","defineProperty","value"],"mappings":"CAAC,SAAUA,EAAQC,GACC,iBAAZC,SAA0C,oBAAXC,OAAyBF,EAAQC,QAASE,QAAQ,kBACtE,mBAAXC,QAAyBA,OAAOC,IAAMD,QAAQ,UAAW,iBAAkBJ,GACjFA,EAASD,EAAOO,eAAkBP,EAAOQ,GAAGC,MAH9C,CAIEC,KAAM,SAAWR,EAAQO,GAAQ;;;;;;;GASnC,IAAIE,EAA0B,WAC1B,SAASA,KAOT,OALAA,EAASC,aACHC,KAAMJ,EAAKK,SAAUC,YAG3BJ,EAASK,eAAiB,WAAc,UACjCL,EARkB;;;;;;;GAuB7BT,EAAQS,SAAWA,EAEnBM,OAAOC,eAAehB,EAAS,cAAgBiB,OAAO","sourcesContent":["(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :\n\ttypeof define === 'function' && define.amd ? define(['exports', '@angular/core'], factory) :\n\t(factory((global.npm_package = {}),global.ng.core));\n}(this, (function (exports,core) { 'use strict';\n\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nvar MyModule = /** @class */ (function () {\n    function MyModule() {\n    }\n    MyModule.decorators = [\n        { type: core.NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    MyModule.ctorParameters = function () { return []; };\n    return MyModule;\n}());\n\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexports.MyModule = MyModule;\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\n})));\n//# sourceMappingURL=waffels.umd.js.map\n"]}
+
+--- esm2015/example.externs.js ---
+
+/** @externs */
+/**
+ * @externs
+ * @suppress {duplicate,checkTypes}
+ */
+// NOTE: generated by tsickle, do not edit.
+
+
+--- esm2015/example_public_index.js ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9wdWJsaWNfaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9leGFtcGxlX3B1YmxpY19pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==
+
+--- esm2015/index.js ---
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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 { MyModule } from './mymodule';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLHlCQUFjLFlBQVksQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9teW1vZHVsZSc7Il19
+
+--- esm2015/index.ngfactory.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgubmdmYWN0b3J5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvaW5kZXgubmdmYWN0b3J5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmkwLkNvbXBvbmVudEZhY3Rvcnk7XG4iXX0=
+
+--- esm2015/index.ngsummary.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgubmdzdW1tYXJ5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvaW5kZXgubmdzdW1tYXJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmkwLkNvbXBvbmVudEZhY3Rvcnk7XG4iXX0=
+
+--- esm2015/mymodule.js ---
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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 { NgModule } from '@angular/core';
+export class MyModule {
+}
+MyModule.decorators = [
+    { type: NgModule, args: [{},] }
+];
+/** @nocollapse */
+MyModule.ctorParameters = () => [];
+function MyModule_tsickle_Closure_declarations() {
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    MyModule.decorators;
+    /**
+     * @nocollapse
+     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
+     */
+    MyModule.ctorParameters;
+}
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9teW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFJdkMsTUFBTTs7O1lBREwsUUFBUSxTQUFDLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthfSBmcm9tICcuL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUnO1xuXG5ATmdNb2R1bGUoe30pXG5leHBvcnQgY2xhc3MgTXlNb2R1bGUge1xufSJdfQ==
+
+--- esm2015/mymodule.ngfactory.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+import * as i0 from "@angular/core";
+import * as i1 from "angular/packages/bazel/test/ng_package/example-custom-entry-point-name/mymodule";
+var MyModuleNgFactory = i0.ɵcmf(i1.MyModule, [], function (_l) { return i0.ɵmod([i0.ɵmpd(512, i0.ComponentFactoryResolver, i0.ɵCodegenComponentFactoryResolver, [[8, []], [3, i0.ComponentFactoryResolver], i0.NgModuleRef]), i0.ɵmpd(1073742336, i1.MyModule, i1.MyModule, [])]); });
+export { MyModuleNgFactory as MyModuleNgFactory };
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUubmdmYWN0b3J5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvbXltb2R1bGUubmdmYWN0b3J5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCAqIGFzIGkxIGZyb20gJ2FuZ3VsYXIvcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvbXltb2R1bGUnO1xuZXhwb3J0IGNvbnN0IE15TW9kdWxlTmdGYWN0b3J5OmkwLk5nTW9kdWxlRmFjdG9yeTxpMS5NeU1vZHVsZT4gPSAobnVsbCBhcyBhbnkpO1xudmFyIF9kZWNsMF8wOmkwLlRlbXBsYXRlUmVmPGFueT4gPSAoPGFueT4obnVsbCBhcyBhbnkpKTtcbnZhciBfZGVjbDBfMTppMC5FbGVtZW50UmVmPGFueT4gPSAoPGFueT4obnVsbCBhcyBhbnkpKTtcbiJdfQ==
+
+--- esm2015/mymodule.ngsummary.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+import * as i0 from "angular/packages/bazel/test/ng_package/example-custom-entry-point-name/mymodule";
+export function MyModuleNgSummary() { return [{ summaryKind: 2, type: { reference: i0.MyModule, diDeps: [], lifecycleHooks: [] }, entryComponents: [], providers: [], modules: [{ reference: i0.MyModule, diDeps: [], lifecycleHooks: [] }], exportedDirectives: [], exportedPipes: [] }]; }
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUubmdzdW1tYXJ5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvbXltb2R1bGUubmdzdW1tYXJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmkwLkNvbXBvbmVudEZhY3Rvcnk7XG5leHBvcnQgZnVuY3Rpb24gTXlNb2R1bGVOZ1N1bW1hcnkoKTphbnlbXSB7XG4gIHJldHVybiAobnVsbCBhcyBhbnkpO1xufVxuIl19
+
+--- esm2015/secondary/index.js ---
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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 { SecondaryModule, a } from './secondarymodule';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9zZWNvbmRhcnkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFRQSxtQ0FBYyxtQkFBbUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9zZWNvbmRhcnltb2R1bGUnO1xuIl19
+
+--- esm2015/secondary/index.ngfactory.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgubmdmYWN0b3J5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L2luZGV4Lm5nZmFjdG9yeS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgaTAgZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pMC5Db21wb25lbnRGYWN0b3J5O1xuIl19
+
+--- esm2015/secondary/index.ngsummary.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgubmdzdW1tYXJ5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L2luZGV4Lm5nc3VtbWFyeS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgaTAgZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pMC5Db21wb25lbnRGYWN0b3J5O1xuIl19
+
+--- esm2015/secondary/secondary.externs.js ---
+
+/** @externs */
+/**
+ * @externs
+ * @suppress {duplicate,checkTypes}
+ */
+// NOTE: generated by tsickle, do not edit.
+
+
+--- esm2015/secondary/secondary_public_index.js ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5X3B1YmxpY19pbmRleC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlLWN1c3RvbS1lbnRyeS1wb2ludC1uYW1lL3NlY29uZGFyeS9zZWNvbmRhcnlfcHVibGljX2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19
+
+--- esm2015/secondary/secondarymodule.js ---
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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 { NgModule } from '@angular/core';
+export class SecondaryModule {
+}
+SecondaryModule.decorators = [
+    { type: NgModule, args: [{},] }
+];
+/** @nocollapse */
+SecondaryModule.ctorParameters = () => [];
+function SecondaryModule_tsickle_Closure_declarations() {
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    SecondaryModule.decorators;
+    /**
+     * @nocollapse
+     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
+     */
+    SecondaryModule.ctorParameters;
+}
+export const /** @type {?} */ a = 1;
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHdkMsTUFBTTs7O1lBREwsUUFBUSxTQUFDLEVBQUU7Ozs7Ozs7Ozs7Ozs7QUFJWixNQUFNLENBQUMsdUJBQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBOZ01vZHVsZSh7fSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRhcnlNb2R1bGUge1xufVxuXG5leHBvcnQgY29uc3QgYSA9IDE7XG4iXX0=
+
+--- esm2015/secondary/secondarymodule.ngfactory.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+import * as i0 from "@angular/core";
+import * as i1 from "angular/packages/bazel/test/ng_package/example-custom-entry-point-name/secondary/secondarymodule";
+var SecondaryModuleNgFactory = i0.ɵcmf(i1.SecondaryModule, [], function (_l) { return i0.ɵmod([i0.ɵmpd(512, i0.ComponentFactoryResolver, i0.ɵCodegenComponentFactoryResolver, [[8, []], [3, i0.ComponentFactoryResolver], i0.NgModuleRef]), i0.ɵmpd(1073742336, i1.SecondaryModule, i1.SecondaryModule, [])]); });
+export { SecondaryModuleNgFactory as SecondaryModuleNgFactory };
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLm5nZmFjdG9yeS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlLWN1c3RvbS1lbnRyeS1wb2ludC1uYW1lL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUubmdmYWN0b3J5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCAqIGFzIGkxIGZyb20gJ2FuZ3VsYXIvcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZSc7XG5leHBvcnQgY29uc3QgU2Vjb25kYXJ5TW9kdWxlTmdGYWN0b3J5OmkwLk5nTW9kdWxlRmFjdG9yeTxpMS5TZWNvbmRhcnlNb2R1bGU+ID0gKG51bGwgYXMgYW55KTtcbnZhciBfZGVjbDBfMDppMC5UZW1wbGF0ZVJlZjxhbnk+ID0gKDxhbnk+KG51bGwgYXMgYW55KSk7XG52YXIgX2RlY2wwXzE6aTAuRWxlbWVudFJlZjxhbnk+ID0gKDxhbnk+KG51bGwgYXMgYW55KSk7XG4iXX0=
+
+--- esm2015/secondary/secondarymodule.ngsummary.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+import * as i0 from "angular/packages/bazel/test/ng_package/example-custom-entry-point-name/secondary/secondarymodule";
+export function SecondaryModuleNgSummary() { return [{ summaryKind: 2, type: { reference: i0.SecondaryModule, diDeps: [], lifecycleHooks: [] }, entryComponents: [], providers: [], modules: [{ reference: i0.SecondaryModule, diDeps: [], lifecycleHooks: [] }], exportedDirectives: [], exportedPipes: [] }]; }
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLm5nc3VtbWFyeS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlLWN1c3RvbS1lbnRyeS1wb2ludC1uYW1lL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUubmdzdW1tYXJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmkwLkNvbXBvbmVudEZhY3Rvcnk7XG5leHBvcnQgZnVuY3Rpb24gU2Vjb25kYXJ5TW9kdWxlTmdTdW1tYXJ5KCk6YW55W10ge1xuICByZXR1cm4gKG51bGwgYXMgYW55KTtcbn1cbiJdfQ==
+
+--- esm5/example_public_index.js ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9wdWJsaWNfaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9leGFtcGxlX3B1YmxpY19pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==
+
+--- esm5/index.js ---
+
+/**
+ * @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 './mymodule';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsY0FBYyxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbXltb2R1bGUnOyJdfQ==
+
+--- esm5/index.ngfactory.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgubmdmYWN0b3J5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvaW5kZXgubmdmYWN0b3J5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmkwLkNvbXBvbmVudEZhY3Rvcnk7XG4iXX0=
+
+--- esm5/index.ngsummary.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgubmdzdW1tYXJ5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvaW5kZXgubmdzdW1tYXJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmkwLkNvbXBvbmVudEZhY3Rvcnk7XG4iXX0=
+
+--- esm5/mymodule.js ---
+
+/**
+ * @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 { NgModule } from '@angular/core';
+var MyModule = /** @class */ (function () {
+    function MyModule() {
+    }
+    MyModule.decorators = [
+        { type: NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    MyModule.ctorParameters = function () { return []; };
+    return MyModule;
+}());
+export { MyModule };
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9teW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBR3RDLFFBQVEsU0FBQyxFQUFFOzs7O21CQVhaOztTQVlhLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthfSBmcm9tICcuL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUnO1xuXG5ATmdNb2R1bGUoe30pXG5leHBvcnQgY2xhc3MgTXlNb2R1bGUge1xufSJdfQ==
+
+--- esm5/mymodule.ngfactory.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+import * as i0 from "@angular/core";
+import * as i1 from "angular/packages/bazel/test/ng_package/example-custom-entry-point-name/mymodule";
+var MyModuleNgFactory = i0.ɵcmf(i1.MyModule, [], function (_l) { return i0.ɵmod([i0.ɵmpd(512, i0.ComponentFactoryResolver, i0.ɵCodegenComponentFactoryResolver, [[8, []], [3, i0.ComponentFactoryResolver], i0.NgModuleRef]), i0.ɵmpd(1073742336, i1.MyModule, i1.MyModule, [])]); });
+export { MyModuleNgFactory as MyModuleNgFactory };
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUubmdmYWN0b3J5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvbXltb2R1bGUubmdmYWN0b3J5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCAqIGFzIGkxIGZyb20gJ2FuZ3VsYXIvcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvbXltb2R1bGUnO1xuZXhwb3J0IGNvbnN0IE15TW9kdWxlTmdGYWN0b3J5OmkwLk5nTW9kdWxlRmFjdG9yeTxpMS5NeU1vZHVsZT4gPSAobnVsbCBhcyBhbnkpO1xudmFyIF9kZWNsMF8wOmkwLlRlbXBsYXRlUmVmPGFueT4gPSAoPGFueT4obnVsbCBhcyBhbnkpKTtcbnZhciBfZGVjbDBfMTppMC5FbGVtZW50UmVmPGFueT4gPSAoPGFueT4obnVsbCBhcyBhbnkpKTtcbiJdfQ==
+
+--- esm5/mymodule.ngsummary.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+import * as i0 from "angular/packages/bazel/test/ng_package/example-custom-entry-point-name/mymodule";
+export function MyModuleNgSummary() { return [{ summaryKind: 2, type: { reference: i0.MyModule, diDeps: [], lifecycleHooks: [] }, entryComponents: [], providers: [], modules: [{ reference: i0.MyModule, diDeps: [], lifecycleHooks: [] }], exportedDirectives: [], exportedPipes: [] }]; }
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUubmdzdW1tYXJ5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvbXltb2R1bGUubmdzdW1tYXJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmkwLkNvbXBvbmVudEZhY3Rvcnk7XG5leHBvcnQgZnVuY3Rpb24gTXlNb2R1bGVOZ1N1bW1hcnkoKTphbnlbXSB7XG4gIHJldHVybiAobnVsbCBhcyBhbnkpO1xufVxuIl19
+
+--- esm5/secondary/index.js ---
+
+/**
+ * @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 './secondarymodule';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9zZWNvbmRhcnkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVFBLGNBQWMsbUJBQW1CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vc2Vjb25kYXJ5bW9kdWxlJztcbiJdfQ==
+
+--- esm5/secondary/index.ngfactory.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgubmdmYWN0b3J5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L2luZGV4Lm5nZmFjdG9yeS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgaTAgZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pMC5Db21wb25lbnRGYWN0b3J5O1xuIl19
+
+--- esm5/secondary/index.ngsummary.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgubmdzdW1tYXJ5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L2luZGV4Lm5nc3VtbWFyeS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgaTAgZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pMC5Db21wb25lbnRGYWN0b3J5O1xuIl19
+
+--- esm5/secondary/secondary_public_index.js ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5X3B1YmxpY19pbmRleC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlLWN1c3RvbS1lbnRyeS1wb2ludC1uYW1lL3NlY29uZGFyeS9zZWNvbmRhcnlfcHVibGljX2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19
+
+--- esm5/secondary/secondarymodule.js ---
+
+/**
+ * @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 { NgModule } from '@angular/core';
+var SecondaryModule = /** @class */ (function () {
+    function SecondaryModule() {
+    }
+    SecondaryModule.decorators = [
+        { type: NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    SecondaryModule.ctorParameters = function () { return []; };
+    return SecondaryModule;
+}());
+export { SecondaryModule };
+export var a = 1;
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBRXRDLFFBQVEsU0FBQyxFQUFFOzs7OzBCQVZaOztTQVdhLGVBQWU7QUFHNUIsTUFBTSxDQUFDLElBQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBOZ01vZHVsZSh7fSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRhcnlNb2R1bGUge1xufVxuXG5leHBvcnQgY29uc3QgYSA9IDE7XG4iXX0=
+
+--- esm5/secondary/secondarymodule.ngfactory.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+import * as i0 from "@angular/core";
+import * as i1 from "angular/packages/bazel/test/ng_package/example-custom-entry-point-name/secondary/secondarymodule";
+var SecondaryModuleNgFactory = i0.ɵcmf(i1.SecondaryModule, [], function (_l) { return i0.ɵmod([i0.ɵmpd(512, i0.ComponentFactoryResolver, i0.ɵCodegenComponentFactoryResolver, [[8, []], [3, i0.ComponentFactoryResolver], i0.NgModuleRef]), i0.ɵmpd(1073742336, i1.SecondaryModule, i1.SecondaryModule, [])]); });
+export { SecondaryModuleNgFactory as SecondaryModuleNgFactory };
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLm5nZmFjdG9yeS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlLWN1c3RvbS1lbnRyeS1wb2ludC1uYW1lL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUubmdmYWN0b3J5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCAqIGFzIGkxIGZyb20gJ2FuZ3VsYXIvcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZSc7XG5leHBvcnQgY29uc3QgU2Vjb25kYXJ5TW9kdWxlTmdGYWN0b3J5OmkwLk5nTW9kdWxlRmFjdG9yeTxpMS5TZWNvbmRhcnlNb2R1bGU+ID0gKG51bGwgYXMgYW55KTtcbnZhciBfZGVjbDBfMDppMC5UZW1wbGF0ZVJlZjxhbnk+ID0gKDxhbnk+KG51bGwgYXMgYW55KSk7XG52YXIgX2RlY2wwXzE6aTAuRWxlbWVudFJlZjxhbnk+ID0gKDxhbnk+KG51bGwgYXMgYW55KSk7XG4iXX0=
+
+--- esm5/secondary/secondarymodule.ngsummary.js ---
+
+/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ *
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */ 
+import * as i0 from "angular/packages/bazel/test/ng_package/example-custom-entry-point-name/secondary/secondarymodule";
+export function SecondaryModuleNgSummary() { return [{ summaryKind: 2, type: { reference: i0.SecondaryModule, diDeps: [], lifecycleHooks: [] }, entryComponents: [], providers: [], modules: [{ reference: i0.SecondaryModule, diDeps: [], lifecycleHooks: [] }], exportedDirectives: [], exportedPipes: [] }]; }
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLm5nc3VtbWFyeS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlLWN1c3RvbS1lbnRyeS1wb2ludC1uYW1lL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUubmdzdW1tYXJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmkwLkNvbXBvbmVudEZhY3Rvcnk7XG5leHBvcnQgZnVuY3Rpb24gU2Vjb25kYXJ5TW9kdWxlTmdTdW1tYXJ5KCk6YW55W10ge1xuICByZXR1cm4gKG51bGwgYXMgYW55KTtcbn1cbiJdfQ==
+
+--- example_public_index.d.ts ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+
+--- example_public_index.metadata.json ---
+
+{"__symbolic":"module","version":4,"metadata":{"MyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{}]}],"members":{}}},"origins":{"MyModule":"./mymodule"},"importAs":"example"}
+
+--- fesm2015/secondary.js ---
+
+import { NgModule } from '@angular/core';
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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
+ */
+class SecondaryModule {
+}
+SecondaryModule.decorators = [
+    { type: NgModule, args: [{},] }
+];
+/** @nocollapse */
+SecondaryModule.ctorParameters = () => [];
+const a = 1;
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SecondaryModule, a };
+//# sourceMappingURL=secondary.js.map
+
+
+--- fesm2015/secondary.js.map ---
+
+{"version":3,"file":"secondary.js","sources":["../../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example-custom-entry-point-name/npm_package.es6/packages/bazel/test/ng_package/example-custom-entry-point-name/secondary/secondary_public_index.js"],"sourcesContent":["/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes} checked by tsc\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nexport class SecondaryModule {\n}\nSecondaryModule.decorators = [\n    { type: NgModule, args: [{},] }\n];\n/** @nocollapse */\nSecondaryModule.ctorParameters = () => [];\nfunction SecondaryModule_tsickle_Closure_declarations() {\n    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */\n    SecondaryModule.decorators;\n    /**\n     * @nocollapse\n     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}\n     */\n    SecondaryModule.ctorParameters;\n}\nexport const /** @type {?} */ a = 1;\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHdkMsTUFBTTs7O1lBREwsUUFBUSxTQUFDLEVBQUU7Ozs7Ozs7Ozs7Ozs7QUFJWixNQUFNLENBQUMsdUJBQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBOZ01vZHVsZSh7fSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRhcnlNb2R1bGUge1xufVxuXG5leHBvcnQgY29uc3QgYSA9IDE7XG4iXX0=","/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes} checked by tsc\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport { SecondaryModule, a } from './secondarymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9zZWNvbmRhcnkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFRQSxtQ0FBYyxtQkFBbUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9zZWNvbmRhcnltb2R1bGUnO1xuIl19","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5X3B1YmxpY19pbmRleC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlLWN1c3RvbS1lbnRyeS1wb2ludC1uYW1lL3NlY29uZGFyeS9zZWNvbmRhcnlfcHVibGljX2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19"],"names":[],"mappings":";;AAAA;;;;;;;;;;;AAWA,AACO,MAAM,eAAe,CAAC;CAC5B;AACD,eAAe,CAAC,UAAU,GAAG;IACzB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;CAClC,CAAC;;AAEF,eAAe,CAAC,cAAc,GAAG,MAAM,EAAE,CAAC;AAC1C,AASO,MAAuB,CAAC,GAAG,CAAC;;AC5BnC;;;;;;;;;;GAUG;;ACVH;;GAEG;;;;"}
+
+--- fesm2015/waffels.js ---
+
+import { NgModule } from '@angular/core';
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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
+ */
+class MyModule {
+}
+MyModule.decorators = [
+    { type: NgModule, args: [{},] }
+];
+/** @nocollapse */
+MyModule.ctorParameters = () => [];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MyModule };
+//# sourceMappingURL=waffels.js.map
+
+
+--- fesm2015/waffels.js.map ---
+
+{"version":3,"file":"waffels.js","sources":["../../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example-custom-entry-point-name/npm_package.es6/packages/bazel/test/ng_package/example-custom-entry-point-name/example_public_index.js"],"sourcesContent":["/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes} checked by tsc\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nexport class MyModule {\n}\nMyModule.decorators = [\n    { type: NgModule, args: [{},] }\n];\n/** @nocollapse */\nMyModule.ctorParameters = () => [];\nfunction MyModule_tsickle_Closure_declarations() {\n    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */\n    MyModule.decorators;\n    /**\n     * @nocollapse\n     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}\n     */\n    MyModule.ctorParameters;\n}\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9teW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFJdkMsTUFBTTs7O1lBREwsUUFBUSxTQUFDLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthfSBmcm9tICcuL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUnO1xuXG5ATmdNb2R1bGUoe30pXG5leHBvcnQgY2xhc3MgTXlNb2R1bGUge1xufSJdfQ==","/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes} checked by tsc\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport { MyModule } from './mymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLHlCQUFjLFlBQVksQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9teW1vZHVsZSc7Il19","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9wdWJsaWNfaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9leGFtcGxlX3B1YmxpY19pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":";;AAAA;;;;;;;;;;;AAWA,AACO,MAAM,QAAQ,CAAC;CACrB;AACD,QAAQ,CAAC,UAAU,GAAG;IAClB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;CAClC,CAAC;;AAEF,QAAQ,CAAC,cAAc,GAAG,MAAM,EAAE,CAAC;;AClBnC;;;;;;;;;;GAUG;;ACVH;;GAEG;;;;"}
+
+--- fesm5/secondary.js ---
+
+import { NgModule } from '@angular/core';
+
+/**
+ * @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
+ */
+var SecondaryModule = /** @class */ (function () {
+    function SecondaryModule() {
+    }
+    SecondaryModule.decorators = [
+        { type: NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    SecondaryModule.ctorParameters = function () { return []; };
+    return SecondaryModule;
+}());
+var a = 1;
+
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SecondaryModule, a };
+//# sourceMappingURL=secondary.js.map
+
+
+--- fesm5/secondary.js.map ---
+
+{"version":3,"file":"secondary.js","sources":["../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example-custom-entry-point-name/secondary/secondary.esm5/packages/bazel/test/ng_package/example-custom-entry-point-name/secondary/secondary_public_index.js"],"sourcesContent":["/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nvar SecondaryModule = /** @class */ (function () {\n    function SecondaryModule() {\n    }\n    SecondaryModule.decorators = [\n        { type: NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    SecondaryModule.ctorParameters = function () { return []; };\n    return SecondaryModule;\n}());\nexport { SecondaryModule };\nexport var a = 1;\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUtY3VzdG9tLWVudHJ5LXBvaW50LW5hbWUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBRXRDLFFBQVEsU0FBQyxFQUFFOzs7OzBCQVZaOztTQVdhLGVBQWU7QUFHNUIsTUFBTSxDQUFDLElBQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBOZ01vZHVsZSh7fSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRhcnlNb2R1bGUge1xufVxuXG5leHBvcnQgY29uc3QgYSA9IDE7XG4iXX0=","/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport * from './secondarymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9zZWNvbmRhcnkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVFBLGNBQWMsbUJBQW1CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vc2Vjb25kYXJ5bW9kdWxlJztcbiJdfQ==","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5X3B1YmxpY19pbmRleC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlLWN1c3RvbS1lbnRyeS1wb2ludC1uYW1lL3NlY29uZGFyeS9zZWNvbmRhcnlfcHVibGljX2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19"],"names":[],"mappings":";;AAAA;;;;;;;AAOA,AACA,IAAI,eAAe,kBAAkB,YAAY;IAC7C,SAAS,eAAe,GAAG;KAC1B;IACD,eAAe,CAAC,UAAU,GAAG;QACzB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;KAClC,CAAC;;IAEF,eAAe,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IAC5D,OAAO,eAAe,CAAC;CAC1B,EAAE,CAAC,CAAC;AACL,AACO,IAAI,CAAC,GAAG,CAAC;;ACnBhB;;;;;;GAMG;;ACNH;;GAEG;;;;"}
+
+--- fesm5/waffels.js ---
+
+import { NgModule } from '@angular/core';
+
+/**
+ * @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
+ */
+var MyModule = /** @class */ (function () {
+    function MyModule() {
+    }
+    MyModule.decorators = [
+        { type: NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    MyModule.ctorParameters = function () { return []; };
+    return MyModule;
+}());
+
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MyModule };
+//# sourceMappingURL=waffels.js.map
+
+
+--- fesm5/waffels.js.map ---
+
+{"version":3,"file":"waffels.js","sources":["../../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example-custom-entry-point-name/example.esm5/packages/bazel/test/ng_package/example-custom-entry-point-name/example_public_index.js"],"sourcesContent":["/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nvar MyModule = /** @class */ (function () {\n    function MyModule() {\n    }\n    MyModule.decorators = [\n        { type: NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    MyModule.ctorParameters = function () { return []; };\n    return MyModule;\n}());\nexport { MyModule };\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9teW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBR3RDLFFBQVEsU0FBQyxFQUFFOzs7O21CQVhaOztTQVlhLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthfSBmcm9tICcuL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUnO1xuXG5ATmdNb2R1bGUoe30pXG5leHBvcnQgY2xhc3MgTXlNb2R1bGUge1xufSJdfQ==","/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport * from './mymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsY0FBYyxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbXltb2R1bGUnOyJdfQ==","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9wdWJsaWNfaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS1jdXN0b20tZW50cnktcG9pbnQtbmFtZS9leGFtcGxlX3B1YmxpY19pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":";;AAAA;;;;;;;AAOA,AACA,IAAI,QAAQ,kBAAkB,YAAY;IACtC,SAAS,QAAQ,GAAG;KACnB;IACD,QAAQ,CAAC,UAAU,GAAG;QAClB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;KAClC,CAAC;;IAEF,QAAQ,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IACrD,OAAO,QAAQ,CAAC;CACnB,EAAE,CAAC;;ACjBJ;;;;;;GAMG;;ACNH;;GAEG;;;;"}
+
+--- index.d.ts ---
+
+/**
+ * @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 './mymodule';
+
+
+--- mymodule.d.ts ---
+
+export declare class MyModule {
+}
+
+
+--- secondary/index.d.ts ---
+
+/**
+ * @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 './secondarymodule';
+
+
+--- secondary/secondary_public_index.d.ts ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+
+--- secondary/secondary_public_index.metadata.json ---
+
+{"__symbolic":"module","version":4,"metadata":{"SecondaryModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{}]}],"members":{}},"a":1},"origins":{"SecondaryModule":"./secondarymodule","a":"./secondarymodule"},"importAs":"example/secondary"}
+
+--- secondary/secondarymodule.d.ts ---
+
+export declare class SecondaryModule {
+}
+export declare const a = 1;
+
+
+--- xample/package.json ---
+
+{
+  "name": "example",
+  "main": "./bundles/example.umd.js",
+  "fesm5": "./fesm5/example.js",
+  "fesm2015": "./fesm2015/example.js",
+  "esm5": "../esm5/example_public_index.js",
+  "esm2015": "../esm2015/example_public_index.js",
+  "typings": "../example_public_index.d.ts",
+  "module": "./fesm5/example.js",
+  "es2015": "./fesm2015/example.js"
+}
+
+--- xample/secondary/package.json ---
+
+{
+  "name": "example/secondary",
+  "main": "../bundles/example-secondary.umd.js",
+  "fesm5": "../fesm5/secondary.js",
+  "fesm2015": "../fesm2015/secondary.js",
+  "esm5": "../../esm5/secondary/secondary_public_index.js",
+  "esm2015": "../../esm2015/secondary/secondary_public_index.js",
+  "typings": "../../secondary/secondary_public_index.d.ts",
+  "module": "../fesm5/secondary.js",
+  "es2015": "../fesm2015/secondary.js"
+}
+
+--- xample/secondary.d.ts ---
+
+
+  export * from '../secondary/secondary_public_index';
+  
+
+--- xample/secondary.metadata.json ---
+
+{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"../secondary/secondary_public_index"}],"flatModuleIndexRedirect":true}
+
+
+--- xample.d.ts ---
+
+
+  export * from './example_public_index';
+  
+
+--- xample.metadata.json ---
+
+{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./example_public_index"}],"flatModuleIndexRedirect":true}
+
diff --git a/packages/bazel/test/ng_package/example/BUILD.bazel b/packages/bazel/test/ng_package/example/BUILD.bazel
new file mode 100644
index 000000000000..62c41eedc7cc
--- /dev/null
+++ b/packages/bazel/test/ng_package/example/BUILD.bazel
@@ -0,0 +1,55 @@
+package(default_visibility = ["//packages/bazel/test:__subpackages__"])
+
+load("//packages/bazel:index.bzl", "ng_module", "ng_package")
+load("//tools:defaults.bzl", "npm_package")
+
+ng_module(
+    name = "example",
+    srcs = glob(["*.ts"]),
+    module_name = "example",
+    deps = ["//packages/bazel/test/ng_package/example/secondary"],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "some-file.txt",
+    ],
+    data = [
+        ":arbitrary_bin_file",
+        ":arbitrary_genfiles_file",
+        ":extra-styles.css",
+    ],
+    entry_point = "packages/bazel/test/ng_package/example/index.js",
+    entry_point_name = "waffels",
+    packages = [
+        ":arbitrary_npm_package",
+    ],
+    deps = [
+        ":example",
+        "//packages/bazel/test/ng_package/example/secondary",
+    ],
+)
+
+# Use a genrule to create a file in bazel-genfiles to ensure that the genfiles output of
+# a rule can be passed through to the `data` of ng_package.
+genrule(
+    name = "arbitrary_genfiles_file",
+    outs = ["arbitrary_genfiles.txt"],
+    cmd = "echo Hello > $@",
+)
+
+# Use a genrule to create a file in bazel-bin to ensure that the bin output of
+# a rule can be passed through to the `data` of ng_package.
+genrule(
+    name = "arbitrary_bin_file",
+    outs = ["arbitrary_bin.txt"],
+    cmd = "echo World > $@",
+    output_to_bindir = True,
+)
+
+npm_package(
+    name = "arbitrary_npm_package",
+    srcs = [":arbitrary-npm-package-main.js"],
+)
diff --git a/packages/bazel/test/ng_package/example/arbitrary-npm-package-main.js b/packages/bazel/test/ng_package/example/arbitrary-npm-package-main.js
new file mode 100644
index 000000000000..d9b04a89379d
--- /dev/null
+++ b/packages/bazel/test/ng_package/example/arbitrary-npm-package-main.js
@@ -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
+ */
+
+const x = 1;
diff --git a/packages/bazel/test/ng_package/example/extra-styles.css b/packages/bazel/test/ng_package/example/extra-styles.css
new file mode 100644
index 000000000000..0b5e2be6f71f
--- /dev/null
+++ b/packages/bazel/test/ng_package/example/extra-styles.css
@@ -0,0 +1,3 @@
+.special {
+  color: goldenrod;
+}
diff --git a/packages/bazel/test/ng_package/example/index.ts b/packages/bazel/test/ng_package/example/index.ts
new file mode 100644
index 000000000000..374f4edd1158
--- /dev/null
+++ b/packages/bazel/test/ng_package/example/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 './mymodule';
\ No newline at end of file
diff --git a/packages/bazel/test/ng_package/example/mymodule.ts b/packages/bazel/test/ng_package/example/mymodule.ts
new file mode 100644
index 000000000000..a34eb530143e
--- /dev/null
+++ b/packages/bazel/test/ng_package/example/mymodule.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
+ */
+
+import {NgModule} from '@angular/core';
+import {a} from './secondary/secondarymodule';
+
+@NgModule({})
+export class MyModule {
+}
\ No newline at end of file
diff --git a/packages/bazel/test/ng_package/example/package.json b/packages/bazel/test/ng_package/example/package.json
new file mode 100644
index 000000000000..92e8fca5b50d
--- /dev/null
+++ b/packages/bazel/test/ng_package/example/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "example",
+  "version": "0.0.0-PLACEHOLDER"
+}
\ No newline at end of file
diff --git a/packages/bazel/test/ng_package/example/secondary/BUILD.bazel b/packages/bazel/test/ng_package/example/secondary/BUILD.bazel
new file mode 100644
index 000000000000..1026b1636ab3
--- /dev/null
+++ b/packages/bazel/test/ng_package/example/secondary/BUILD.bazel
@@ -0,0 +1,10 @@
+package(default_visibility = ["//packages/bazel/test:__subpackages__"])
+
+load("//packages/bazel:index.bzl", "ng_module")
+
+ng_module(
+    name = "secondary",
+    srcs = glob(["*.ts"]),
+    module_name = "example/secondary",
+    deps = ["//packages/core"],
+)
diff --git a/packages/bazel/test/ng_package/example/secondary/index.ts b/packages/bazel/test/ng_package/example/secondary/index.ts
new file mode 100644
index 000000000000..768e94c8b0aa
--- /dev/null
+++ b/packages/bazel/test/ng_package/example/secondary/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 './secondarymodule';
diff --git a/packages/bazel/test/ng_package/example/secondary/secondarymodule.ts b/packages/bazel/test/ng_package/example/secondary/secondarymodule.ts
new file mode 100644
index 000000000000..17e4c1a7ae48
--- /dev/null
+++ b/packages/bazel/test/ng_package/example/secondary/secondarymodule.ts
@@ -0,0 +1,15 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+
+@NgModule({})
+export class SecondaryModule {
+}
+
+export const a = 1;
diff --git a/packages/bazel/test/ng_package/example/some-file.txt b/packages/bazel/test/ng_package/example/some-file.txt
new file mode 100644
index 000000000000..4809e652ee0e
--- /dev/null
+++ b/packages/bazel/test/ng_package/example/some-file.txt
@@ -0,0 +1 @@
+This file is just copied into the package.
diff --git a/packages/bazel/test/ng_package/example_package.golden b/packages/bazel/test/ng_package/example_package.golden
new file mode 100644
index 000000000000..cd796eb31eab
--- /dev/null
+++ b/packages/bazel/test/ng_package/example_package.golden
@@ -0,0 +1,748 @@
+arbitrary-npm-package-main.js
+arbitrary_bin.txt
+arbitrary_genfiles.txt
+bundles
+  bundles/waffels-secondary.umd.js
+  bundles/waffels-secondary.umd.js.map
+  bundles/waffels-secondary.umd.min.js
+  bundles/waffels-secondary.umd.min.js.map
+  bundles/waffels.umd.js
+  bundles/waffels.umd.js.map
+  bundles/waffels.umd.min.js
+  bundles/waffels.umd.min.js.map
+esm2015
+  esm2015/example.externs.js
+  esm2015/example_public_index.js
+  esm2015/index.js
+  esm2015/mymodule.js
+  esm2015/secondary
+    esm2015/secondary/index.js
+    esm2015/secondary/secondary.externs.js
+    esm2015/secondary/secondary_public_index.js
+    esm2015/secondary/secondarymodule.js
+esm5
+  esm5/example_public_index.js
+  esm5/index.js
+  esm5/mymodule.js
+  esm5/secondary
+    esm5/secondary/index.js
+    esm5/secondary/secondary_public_index.js
+    esm5/secondary/secondarymodule.js
+example_public_index.d.ts
+example_public_index.metadata.json
+extra-styles.css
+fesm2015
+  fesm2015/secondary.js
+  fesm2015/secondary.js.map
+  fesm2015/waffels.js
+  fesm2015/waffels.js.map
+fesm5
+  fesm5/secondary.js
+  fesm5/secondary.js.map
+  fesm5/waffels.js
+  fesm5/waffels.js.map
+index.d.ts
+mymodule.d.ts
+package.json
+secondary
+  secondary/index.d.ts
+  secondary/package.json
+  secondary/secondary_public_index.d.ts
+  secondary/secondary_public_index.metadata.json
+  secondary/secondarymodule.d.ts
+secondary.d.ts
+secondary.metadata.json
+some-file.txt
+--- arbitrary-npm-package-main.js ---
+
+/**
+ * @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 x = 1;
+
+
+--- arbitrary_bin.txt ---
+
+World
+
+
+--- arbitrary_genfiles.txt ---
+
+Hello
+
+
+--- bundles/waffels-secondary.umd.js ---
+
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
+	typeof define === 'function' && define.amd ? define(['exports', '@angular/core'], factory) :
+	(factory((global.npm_package = {}),global.ng.core));
+}(this, (function (exports,core) { 'use strict';
+
+/**
+ * @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
+ */
+var SecondaryModule = /** @class */ (function () {
+    function SecondaryModule() {
+    }
+    SecondaryModule.decorators = [
+        { type: core.NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    SecondaryModule.ctorParameters = function () { return []; };
+    return SecondaryModule;
+}());
+var a = 1;
+
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+exports.SecondaryModule = SecondaryModule;
+exports.a = a;
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=waffels-secondary.umd.js.map
+
+
+--- bundles/waffels-secondary.umd.js.map ---
+
+{"version":3,"file":"waffels-secondary.umd.js","sources":["../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example/npm_package.esm5/packages/bazel/test/ng_package/example/secondary/secondary_public_index.js"],"sourcesContent":["/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nvar SecondaryModule = /** @class */ (function () {\n    function SecondaryModule() {\n    }\n    SecondaryModule.decorators = [\n        { type: NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    SecondaryModule.ctorParameters = function () { return []; };\n    return SecondaryModule;\n}());\nexport { SecondaryModule };\nexport var a = 1;\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBRXRDLFFBQVEsU0FBQyxFQUFFOzs7OzBCQVZaOztTQVdhLGVBQWU7QUFHNUIsTUFBTSxDQUFDLElBQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBOZ01vZHVsZSh7fSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRhcnlNb2R1bGUge1xufVxuXG5leHBvcnQgY29uc3QgYSA9IDE7XG4iXX0=","/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport * from './secondarymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9zZWNvbmRhcnkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVFBLGNBQWMsbUJBQW1CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vc2Vjb25kYXJ5bW9kdWxlJztcbiJdfQ==","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5X3B1YmxpY19pbmRleC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlL3NlY29uZGFyeS9zZWNvbmRhcnlfcHVibGljX2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19"],"names":["NgModule"],"mappings":";;;;;;AAAA;;;;;;;AAOA,AACA,IAAI,eAAe,kBAAkB,YAAY;IAC7C,SAAS,eAAe,GAAG;KAC1B;IACD,eAAe,CAAC,UAAU,GAAG;QACzB,EAAE,IAAI,EAAEA,aAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;KAClC,CAAC;;IAEF,eAAe,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IAC5D,OAAO,eAAe,CAAC;CAC1B,EAAE,CAAC,CAAC;AACL,AACO,IAAI,CAAC,GAAG,CAAC;;ACnBhB;;;;;;GAMG;;ACNH;;GAEG;;;;;;;;;;;;;"}
+
+--- bundles/waffels-secondary.umd.min.js ---
+
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core")):"function"==typeof define&&define.amd?define(["exports","@angular/core"],n):n(e.npm_package={},e.ng.core)}(this,function(e,n){"use strict";
+/**
+ * @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
+ */var o=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{}]}],e.ctorParameters=function(){return[]},e}();
+/**
+ * @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
+ */
+e.SecondaryModule=o,e.a=1,Object.defineProperty(e,"__esModule",{value:!0})});
+
+--- bundles/waffels-secondary.umd.min.js.map ---
+
+{"version":3,"sources":["packages/bazel/test/ng_package/example/waffels-secondary.umd.js"],"names":["global","factory","exports","module","require","define","amd","npm_package","ng","core","this","SecondaryModule","decorators","type","NgModule","args","ctorParameters","a","Object","defineProperty","value"],"mappings":"CAAC,SAAUA,EAAQC,GACC,iBAAZC,SAA0C,oBAAXC,OAAyBF,EAAQC,QAASE,QAAQ,kBACtE,mBAAXC,QAAyBA,OAAOC,IAAMD,QAAQ,UAAW,iBAAkBJ,GACjFA,EAASD,EAAOO,eAAkBP,EAAOQ,GAAGC,MAH9C,CAIEC,KAAM,SAAWR,EAAQO,GAAQ;;;;;;;GASnC,IAAIE,EAAiC,WACjC,SAASA,KAOT,OALAA,EAAgBC,aACVC,KAAMJ,EAAKK,SAAUC,YAG3BJ,EAAgBK,eAAiB,WAAc,UACxCL,EARyB;;;;;;;;AAwBpCT,EAAQS,gBAAkBA,EAC1BT,EAAQe,EAfA,EAiBRC,OAAOC,eAAejB,EAAS,cAAgBkB,OAAO","sourcesContent":["(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :\n\ttypeof define === 'function' && define.amd ? define(['exports', '@angular/core'], factory) :\n\t(factory((global.npm_package = {}),global.ng.core));\n}(this, (function (exports,core) { 'use strict';\n\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nvar SecondaryModule = /** @class */ (function () {\n    function SecondaryModule() {\n    }\n    SecondaryModule.decorators = [\n        { type: core.NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    SecondaryModule.ctorParameters = function () { return []; };\n    return SecondaryModule;\n}());\nvar a = 1;\n\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexports.SecondaryModule = SecondaryModule;\nexports.a = a;\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\n})));\n//# sourceMappingURL=waffels-secondary.umd.js.map\n"]}
+
+--- bundles/waffels.umd.js ---
+
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
+	typeof define === 'function' && define.amd ? define(['exports', '@angular/core'], factory) :
+	(factory((global.npm_package = {}),global.ng.core));
+}(this, (function (exports,core) { 'use strict';
+
+/**
+ * @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
+ */
+var MyModule = /** @class */ (function () {
+    function MyModule() {
+    }
+    MyModule.decorators = [
+        { type: core.NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    MyModule.ctorParameters = function () { return []; };
+    return MyModule;
+}());
+
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+exports.MyModule = MyModule;
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=waffels.umd.js.map
+
+
+--- bundles/waffels.umd.js.map ---
+
+{"version":3,"file":"waffels.umd.js","sources":["../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example/npm_package.esm5/packages/bazel/test/ng_package/example/example_public_index.js"],"sourcesContent":["/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nvar MyModule = /** @class */ (function () {\n    function MyModule() {\n    }\n    MyModule.decorators = [\n        { type: NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    MyModule.ctorParameters = function () { return []; };\n    return MyModule;\n}());\nexport { MyModule };\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9teW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBR3RDLFFBQVEsU0FBQyxFQUFFOzs7O21CQVhaOztTQVlhLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthfSBmcm9tICcuL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUnO1xuXG5ATmdNb2R1bGUoe30pXG5leHBvcnQgY2xhc3MgTXlNb2R1bGUge1xufSJdfQ==","/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport * from './mymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsY0FBYyxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbXltb2R1bGUnOyJdfQ==","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9wdWJsaWNfaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9leGFtcGxlX3B1YmxpY19pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":["NgModule"],"mappings":";;;;;;AAAA;;;;;;;AAOA,AACA,IAAI,QAAQ,kBAAkB,YAAY;IACtC,SAAS,QAAQ,GAAG;KACnB;IACD,QAAQ,CAAC,UAAU,GAAG;QAClB,EAAE,IAAI,EAAEA,aAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;KAClC,CAAC;;IAEF,QAAQ,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IACrD,OAAO,QAAQ,CAAC;CACnB,EAAE,CAAC;;ACjBJ;;;;;;GAMG;;ACNH;;GAEG;;;;;;;;;;;;"}
+
+--- bundles/waffels.umd.min.js ---
+
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core")):"function"==typeof define&&define.amd?define(["exports","@angular/core"],n):n(e.npm_package={},e.ng.core)}(this,function(e,n){"use strict";
+/**
+ * @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
+ */var o=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{}]}],e.ctorParameters=function(){return[]},e}();
+/**
+ * @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
+ */e.MyModule=o,Object.defineProperty(e,"__esModule",{value:!0})});
+
+--- bundles/waffels.umd.min.js.map ---
+
+{"version":3,"sources":["packages/bazel/test/ng_package/example/waffels.umd.js"],"names":["global","factory","exports","module","require","define","amd","npm_package","ng","core","this","MyModule","decorators","type","NgModule","args","ctorParameters","Object","defineProperty","value"],"mappings":"CAAC,SAAUA,EAAQC,GACC,iBAAZC,SAA0C,oBAAXC,OAAyBF,EAAQC,QAASE,QAAQ,kBACtE,mBAAXC,QAAyBA,OAAOC,IAAMD,QAAQ,UAAW,iBAAkBJ,GACjFA,EAASD,EAAOO,eAAkBP,EAAOQ,GAAGC,MAH9C,CAIEC,KAAM,SAAWR,EAAQO,GAAQ;;;;;;;GASnC,IAAIE,EAA0B,WAC1B,SAASA,KAOT,OALAA,EAASC,aACHC,KAAMJ,EAAKK,SAAUC,YAG3BJ,EAASK,eAAiB,WAAc,UACjCL,EARkB;;;;;;;GAuB7BT,EAAQS,SAAWA,EAEnBM,OAAOC,eAAehB,EAAS,cAAgBiB,OAAO","sourcesContent":["(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :\n\ttypeof define === 'function' && define.amd ? define(['exports', '@angular/core'], factory) :\n\t(factory((global.npm_package = {}),global.ng.core));\n}(this, (function (exports,core) { 'use strict';\n\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nvar MyModule = /** @class */ (function () {\n    function MyModule() {\n    }\n    MyModule.decorators = [\n        { type: core.NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    MyModule.ctorParameters = function () { return []; };\n    return MyModule;\n}());\n\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexports.MyModule = MyModule;\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\n})));\n//# sourceMappingURL=waffels.umd.js.map\n"]}
+
+--- esm2015/example.externs.js ---
+
+/** @externs */
+/**
+ * @externs
+ * @suppress {duplicate,checkTypes}
+ */
+// NOTE: generated by tsickle, do not edit.
+
+
+--- esm2015/example_public_index.js ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9wdWJsaWNfaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9leGFtcGxlX3B1YmxpY19pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==
+
+--- esm2015/index.js ---
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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 { MyModule } from './mymodule';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLHlCQUFjLFlBQVksQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9teW1vZHVsZSc7Il19
+
+--- esm2015/mymodule.js ---
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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 { NgModule } from '@angular/core';
+export class MyModule {
+}
+MyModule.decorators = [
+    { type: NgModule, args: [{},] }
+];
+/** @nocollapse */
+MyModule.ctorParameters = () => [];
+function MyModule_tsickle_Closure_declarations() {
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    MyModule.decorators;
+    /**
+     * @nocollapse
+     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
+     */
+    MyModule.ctorParameters;
+}
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9teW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFJdkMsTUFBTTs7O1lBREwsUUFBUSxTQUFDLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthfSBmcm9tICcuL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUnO1xuXG5ATmdNb2R1bGUoe30pXG5leHBvcnQgY2xhc3MgTXlNb2R1bGUge1xufSJdfQ==
+
+--- esm2015/secondary/index.js ---
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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 { SecondaryModule, a } from './secondarymodule';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9zZWNvbmRhcnkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFRQSxtQ0FBYyxtQkFBbUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9zZWNvbmRhcnltb2R1bGUnO1xuIl19
+
+--- esm2015/secondary/secondary.externs.js ---
+
+/** @externs */
+/**
+ * @externs
+ * @suppress {duplicate,checkTypes}
+ */
+// NOTE: generated by tsickle, do not edit.
+
+
+--- esm2015/secondary/secondary_public_index.js ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5X3B1YmxpY19pbmRleC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlL3NlY29uZGFyeS9zZWNvbmRhcnlfcHVibGljX2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19
+
+--- esm2015/secondary/secondarymodule.js ---
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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 { NgModule } from '@angular/core';
+export class SecondaryModule {
+}
+SecondaryModule.decorators = [
+    { type: NgModule, args: [{},] }
+];
+/** @nocollapse */
+SecondaryModule.ctorParameters = () => [];
+function SecondaryModule_tsickle_Closure_declarations() {
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    SecondaryModule.decorators;
+    /**
+     * @nocollapse
+     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
+     */
+    SecondaryModule.ctorParameters;
+}
+export const /** @type {?} */ a = 1;
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHdkMsTUFBTTs7O1lBREwsUUFBUSxTQUFDLEVBQUU7Ozs7Ozs7Ozs7Ozs7QUFJWixNQUFNLENBQUMsdUJBQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBOZ01vZHVsZSh7fSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRhcnlNb2R1bGUge1xufVxuXG5leHBvcnQgY29uc3QgYSA9IDE7XG4iXX0=
+
+--- esm5/example_public_index.js ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9wdWJsaWNfaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9leGFtcGxlX3B1YmxpY19pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==
+
+--- esm5/index.js ---
+
+/**
+ * @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 './mymodule';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsY0FBYyxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbXltb2R1bGUnOyJdfQ==
+
+--- esm5/mymodule.js ---
+
+/**
+ * @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 { NgModule } from '@angular/core';
+var MyModule = /** @class */ (function () {
+    function MyModule() {
+    }
+    MyModule.decorators = [
+        { type: NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    MyModule.ctorParameters = function () { return []; };
+    return MyModule;
+}());
+export { MyModule };
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9teW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBR3RDLFFBQVEsU0FBQyxFQUFFOzs7O21CQVhaOztTQVlhLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthfSBmcm9tICcuL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUnO1xuXG5ATmdNb2R1bGUoe30pXG5leHBvcnQgY2xhc3MgTXlNb2R1bGUge1xufSJdfQ==
+
+--- esm5/secondary/index.js ---
+
+/**
+ * @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 './secondarymodule';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9zZWNvbmRhcnkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVFBLGNBQWMsbUJBQW1CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vc2Vjb25kYXJ5bW9kdWxlJztcbiJdfQ==
+
+--- esm5/secondary/secondary_public_index.js ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5X3B1YmxpY19pbmRleC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlL3NlY29uZGFyeS9zZWNvbmRhcnlfcHVibGljX2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19
+
+--- esm5/secondary/secondarymodule.js ---
+
+/**
+ * @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 { NgModule } from '@angular/core';
+var SecondaryModule = /** @class */ (function () {
+    function SecondaryModule() {
+    }
+    SecondaryModule.decorators = [
+        { type: NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    SecondaryModule.ctorParameters = function () { return []; };
+    return SecondaryModule;
+}());
+export { SecondaryModule };
+export var a = 1;
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBRXRDLFFBQVEsU0FBQyxFQUFFOzs7OzBCQVZaOztTQVdhLGVBQWU7QUFHNUIsTUFBTSxDQUFDLElBQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBOZ01vZHVsZSh7fSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRhcnlNb2R1bGUge1xufVxuXG5leHBvcnQgY29uc3QgYSA9IDE7XG4iXX0=
+
+--- example_public_index.d.ts ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+
+--- example_public_index.metadata.json ---
+
+{"__symbolic":"module","version":4,"metadata":{"MyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{}]}],"members":{}}},"origins":{"MyModule":"./mymodule"},"importAs":"example"}
+
+--- extra-styles.css ---
+
+.special {
+  color: goldenrod;
+}
+
+
+--- fesm2015/secondary.js ---
+
+import { NgModule } from '@angular/core';
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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
+ */
+class SecondaryModule {
+}
+SecondaryModule.decorators = [
+    { type: NgModule, args: [{},] }
+];
+/** @nocollapse */
+SecondaryModule.ctorParameters = () => [];
+const a = 1;
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SecondaryModule, a };
+//# sourceMappingURL=secondary.js.map
+
+
+--- fesm2015/secondary.js.map ---
+
+{"version":3,"file":"secondary.js","sources":["../../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example/npm_package.es6/packages/bazel/test/ng_package/example/secondary/secondary_public_index.js"],"sourcesContent":["/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes} checked by tsc\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nexport class SecondaryModule {\n}\nSecondaryModule.decorators = [\n    { type: NgModule, args: [{},] }\n];\n/** @nocollapse */\nSecondaryModule.ctorParameters = () => [];\nfunction SecondaryModule_tsickle_Closure_declarations() {\n    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */\n    SecondaryModule.decorators;\n    /**\n     * @nocollapse\n     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}\n     */\n    SecondaryModule.ctorParameters;\n}\nexport const /** @type {?} */ a = 1;\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHdkMsTUFBTTs7O1lBREwsUUFBUSxTQUFDLEVBQUU7Ozs7Ozs7Ozs7Ozs7QUFJWixNQUFNLENBQUMsdUJBQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBOZ01vZHVsZSh7fSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRhcnlNb2R1bGUge1xufVxuXG5leHBvcnQgY29uc3QgYSA9IDE7XG4iXX0=","/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes} checked by tsc\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport { SecondaryModule, a } from './secondarymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9zZWNvbmRhcnkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFRQSxtQ0FBYyxtQkFBbUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9zZWNvbmRhcnltb2R1bGUnO1xuIl19","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5X3B1YmxpY19pbmRleC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlL3NlY29uZGFyeS9zZWNvbmRhcnlfcHVibGljX2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19"],"names":[],"mappings":";;AAAA;;;;;;;;;;;AAWA,AACO,MAAM,eAAe,CAAC;CAC5B;AACD,eAAe,CAAC,UAAU,GAAG;IACzB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;CAClC,CAAC;;AAEF,eAAe,CAAC,cAAc,GAAG,MAAM,EAAE,CAAC;AAC1C,AASO,MAAuB,CAAC,GAAG,CAAC;;AC5BnC;;;;;;;;;;GAUG;;ACVH;;GAEG;;;;"}
+
+--- fesm2015/waffels.js ---
+
+import { NgModule } from '@angular/core';
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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
+ */
+class MyModule {
+}
+MyModule.decorators = [
+    { type: NgModule, args: [{},] }
+];
+/** @nocollapse */
+MyModule.ctorParameters = () => [];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MyModule };
+//# sourceMappingURL=waffels.js.map
+
+
+--- fesm2015/waffels.js.map ---
+
+{"version":3,"file":"waffels.js","sources":["../../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example/npm_package.es6/packages/bazel/test/ng_package/example/example_public_index.js"],"sourcesContent":["/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes} checked by tsc\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nexport class MyModule {\n}\nMyModule.decorators = [\n    { type: NgModule, args: [{},] }\n];\n/** @nocollapse */\nMyModule.ctorParameters = () => [];\nfunction MyModule_tsickle_Closure_declarations() {\n    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */\n    MyModule.decorators;\n    /**\n     * @nocollapse\n     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}\n     */\n    MyModule.ctorParameters;\n}\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9teW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFJdkMsTUFBTTs7O1lBREwsUUFBUSxTQUFDLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthfSBmcm9tICcuL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUnO1xuXG5ATmdNb2R1bGUoe30pXG5leHBvcnQgY2xhc3MgTXlNb2R1bGUge1xufSJdfQ==","/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes} checked by tsc\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport { MyModule } from './mymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLHlCQUFjLFlBQVksQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9teW1vZHVsZSc7Il19","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9wdWJsaWNfaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9leGFtcGxlX3B1YmxpY19pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":";;AAAA;;;;;;;;;;;AAWA,AACO,MAAM,QAAQ,CAAC;CACrB;AACD,QAAQ,CAAC,UAAU,GAAG;IAClB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;CAClC,CAAC;;AAEF,QAAQ,CAAC,cAAc,GAAG,MAAM,EAAE,CAAC;;AClBnC;;;;;;;;;;GAUG;;ACVH;;GAEG;;;;"}
+
+--- fesm5/secondary.js ---
+
+import { NgModule } from '@angular/core';
+
+/**
+ * @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
+ */
+var SecondaryModule = /** @class */ (function () {
+    function SecondaryModule() {
+    }
+    SecondaryModule.decorators = [
+        { type: NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    SecondaryModule.ctorParameters = function () { return []; };
+    return SecondaryModule;
+}());
+var a = 1;
+
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SecondaryModule, a };
+//# sourceMappingURL=secondary.js.map
+
+
+--- fesm5/secondary.js.map ---
+
+{"version":3,"file":"secondary.js","sources":["../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example/npm_package.esm5/packages/bazel/test/ng_package/example/secondary/secondary_public_index.js"],"sourcesContent":["/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nvar SecondaryModule = /** @class */ (function () {\n    function SecondaryModule() {\n    }\n    SecondaryModule.decorators = [\n        { type: NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    SecondaryModule.ctorParameters = function () { return []; };\n    return SecondaryModule;\n}());\nexport { SecondaryModule };\nexport var a = 1;\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5bW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYmF6ZWwvdGVzdC9uZ19wYWNrYWdlL2V4YW1wbGUvc2Vjb25kYXJ5L3NlY29uZGFyeW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBRXRDLFFBQVEsU0FBQyxFQUFFOzs7OzBCQVZaOztTQVdhLGVBQWU7QUFHNUIsTUFBTSxDQUFDLElBQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBOZ01vZHVsZSh7fSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRhcnlNb2R1bGUge1xufVxuXG5leHBvcnQgY29uc3QgYSA9IDE7XG4iXX0=","/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport * from './secondarymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9zZWNvbmRhcnkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVFBLGNBQWMsbUJBQW1CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vc2Vjb25kYXJ5bW9kdWxlJztcbiJdfQ==","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kYXJ5X3B1YmxpY19pbmRleC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2JhemVsL3Rlc3QvbmdfcGFja2FnZS9leGFtcGxlL3NlY29uZGFyeS9zZWNvbmRhcnlfcHVibGljX2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19"],"names":[],"mappings":";;AAAA;;;;;;;AAOA,AACA,IAAI,eAAe,kBAAkB,YAAY;IAC7C,SAAS,eAAe,GAAG;KAC1B;IACD,eAAe,CAAC,UAAU,GAAG;QACzB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;KAClC,CAAC;;IAEF,eAAe,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IAC5D,OAAO,eAAe,CAAC;CAC1B,EAAE,CAAC,CAAC;AACL,AACO,IAAI,CAAC,GAAG,CAAC;;ACnBhB;;;;;;GAMG;;ACNH;;GAEG;;;;"}
+
+--- fesm5/waffels.js ---
+
+import { NgModule } from '@angular/core';
+
+/**
+ * @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
+ */
+var MyModule = /** @class */ (function () {
+    function MyModule() {
+    }
+    MyModule.decorators = [
+        { type: NgModule, args: [{},] }
+    ];
+    /** @nocollapse */
+    MyModule.ctorParameters = function () { return []; };
+    return MyModule;
+}());
+
+/**
+ * @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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MyModule };
+//# sourceMappingURL=waffels.js.map
+
+
+--- fesm5/waffels.js.map ---
+
+{"version":3,"file":"waffels.js","sources":["../../../../../../../../../../../../../execroot/angular/bazel-bin/packages/bazel/test/ng_package/example/npm_package.esm5/packages/bazel/test/ng_package/example/example_public_index.js"],"sourcesContent":["/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { NgModule } from '@angular/core';\nvar MyModule = /** @class */ (function () {\n    function MyModule() {\n    }\n    MyModule.decorators = [\n        { type: NgModule, args: [{},] }\n    ];\n    /** @nocollapse */\n    MyModule.ctorParameters = function () { return []; };\n    return MyModule;\n}());\nexport { MyModule };\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXltb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9teW1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7Z0JBR3RDLFFBQVEsU0FBQyxFQUFFOzs7O21CQVhaOztTQVlhLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthfSBmcm9tICcuL3NlY29uZGFyeS9zZWNvbmRhcnltb2R1bGUnO1xuXG5ATmdNb2R1bGUoe30pXG5leHBvcnQgY2xhc3MgTXlNb2R1bGUge1xufSJdfQ==","/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport * from './mymodule';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBUUEsY0FBYyxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbXltb2R1bGUnOyJdfQ==","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9wdWJsaWNfaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9iYXplbC90ZXN0L25nX3BhY2thZ2UvZXhhbXBsZS9leGFtcGxlX3B1YmxpY19pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":";;AAAA;;;;;;;AAOA,AACA,IAAI,QAAQ,kBAAkB,YAAY;IACtC,SAAS,QAAQ,GAAG;KACnB;IACD,QAAQ,CAAC,UAAU,GAAG;QAClB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE;KAClC,CAAC;;IAEF,QAAQ,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IACrD,OAAO,QAAQ,CAAC;CACnB,EAAE,CAAC;;ACjBJ;;;;;;GAMG;;ACNH;;GAEG;;;;"}
+
+--- index.d.ts ---
+
+/**
+ * @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 './mymodule';
+
+
+--- mymodule.d.ts ---
+
+export declare class MyModule {
+}
+
+
+--- package.json ---
+
+{
+  "name": "example",
+  "main": "./bundles/example.umd.js",
+  "fesm5": "./fesm5/example.js",
+  "fesm2015": "./fesm2015/example.js",
+  "esm5": "./esm5/example_public_index.js",
+  "esm2015": "./esm2015/example_public_index.js",
+  "typings": "./example_public_index.d.ts",
+  "module": "./fesm5/example.js",
+  "es2015": "./fesm2015/example.js"
+}
+
+--- secondary/index.d.ts ---
+
+/**
+ * @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 './secondarymodule';
+
+
+--- secondary/package.json ---
+
+{
+  "name": "example/secondary",
+  "main": "../bundles/example-secondary.umd.js",
+  "fesm5": "../fesm5/secondary.js",
+  "fesm2015": "../fesm2015/secondary.js",
+  "esm5": "../esm5/secondary/secondary_public_index.js",
+  "esm2015": "../esm2015/secondary/secondary_public_index.js",
+  "typings": "./secondary_public_index.d.ts",
+  "module": "../fesm5/secondary.js",
+  "es2015": "../fesm2015/secondary.js"
+}
+
+--- secondary/secondary_public_index.d.ts ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+
+
+--- secondary/secondary_public_index.metadata.json ---
+
+{"__symbolic":"module","version":4,"metadata":{"SecondaryModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{}]}],"members":{}},"a":1},"origins":{"SecondaryModule":"./secondarymodule","a":"./secondarymodule"},"importAs":"example/secondary"}
+
+--- secondary/secondarymodule.d.ts ---
+
+export declare class SecondaryModule {
+}
+export declare const a = 1;
+
+
+--- secondary.d.ts ---
+
+
+  export * from './secondary/secondary_public_index';
+  
+
+--- secondary.metadata.json ---
+
+{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./secondary/secondary_public_index"}],"flatModuleIndexRedirect":true}
+
+
+--- some-file.txt ---
+
+This file is just copied into the package.
+
diff --git a/packages/bazel/test/ng_package/example_package.spec.ts b/packages/bazel/test/ng_package/example_package.spec.ts
new file mode 100644
index 000000000000..02e9e80aea12
--- /dev/null
+++ b/packages/bazel/test/ng_package/example_package.spec.ts
@@ -0,0 +1,162 @@
+/**
+ * @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 {createPatch} from 'diff';
+import * as fs from 'fs';
+import * as path from 'path';
+
+/** Directory in the Angular repo where package gold tests live. */
+const TEST_DIR = path.resolve(path.join('packages', 'bazel', 'test', 'ng_package'));
+
+type TestPackage = {
+  dir: string; goldPath: string
+};
+const packagesToTest: TestPackage[] = [
+  {dir: 'example', goldPath: 'example_package.golden'},
+];
+
+/**
+ * Gets all entries in a given directory (files and directories) recursively,
+ * indented based on each entry's depth.
+ *
+ * @param directoryPath Path of the directory for which to get entries.
+ * @param depth The depth of this directory (used for indentation).
+ * @returns Array of all indented entries (files and directories).
+ */
+function getIndentedDirectoryStructure(directoryPath: string, depth = 0): string[] {
+  const result: string[] = [];
+  if (fs.statSync(directoryPath).isDirectory()) {
+    fs.readdirSync(directoryPath).forEach(f => {
+      result.push(
+          '  '.repeat(depth) + path.join(directoryPath, f),
+          ...getIndentedDirectoryStructure(path.join(directoryPath, f), depth + 1));
+    });
+  }
+  return result;
+}
+
+/**
+ * Gets all file contents in a given directory recursively. Each file's content will be
+ * prefixed with a one-line header with the file name.
+ *
+ * @param directoryPath Path of the directory for which file contents are collected.
+ * @returns Array of all files' contents.
+ */
+function getDescendantFilesContents(directoryPath: string): string[] {
+  const result: string[] = [];
+  if (fs.statSync(directoryPath).isDirectory()) {
+    fs.readdirSync(directoryPath).forEach(dir => {
+      result.push(...getDescendantFilesContents(path.join(directoryPath, dir)));
+    });
+  } else {
+    result.push(`--- ${directoryPath} ---`, '', fs.readFileSync(directoryPath, 'utf-8'), '');
+  }
+  return result;
+}
+
+/** Accepts the current package output by overwriting the gold file in source control. */
+function acceptNewPackageGold(testPackage: TestPackage) {
+  const goldenFile = path.join(TEST_DIR, testPackage.goldPath);
+  process.chdir(path.join(TEST_DIR, `${testPackage.dir}`, 'npm_package'));
+
+  const actual = getCurrentPackageContent();
+  fs.writeFileSync(require.resolve(goldenFile), actual, 'utf-8');
+}
+
+/** Gets the content of the current package. Depends on the current working directory. */
+function getCurrentPackageContent() {
+  return [...getIndentedDirectoryStructure('.'), ...getDescendantFilesContents('.')]
+      .join('\n')
+      .replace(/bazel-out\/.*\/bin/g, 'bazel-bin');
+}
+
+/** Compares the current package output to the gold file in source control in a jasmine test. */
+function runPackageGoldTest(testPackage: TestPackage) {
+  const goldenFile = path.join(TEST_DIR, testPackage.goldPath);
+  process.chdir(path.join(TEST_DIR, `${testPackage.dir}`, 'npm_package'));
+
+  // Gold file content from source control. We expect that the output of the package matches this.
+  const expected = fs.readFileSync(goldenFile, 'utf-8');
+
+  // Actual file content generated from the rule.
+  const actual = getCurrentPackageContent();
+
+  // Without the `--accept` flag, compare the actual to the expected in a jasmine test.
+  it(`Package "${testPackage.dir}"`, () => {
+    if (actual !== expected) {
+      // Compute the patch and strip the header
+      let patch =
+          createPatch(goldenFile, expected, actual, 'Golden file', 'Generated file', {context: 5});
+      const endOfHeader = patch.indexOf('\n', patch.indexOf('\n') + 1) + 1;
+      patch = patch.substring(endOfHeader);
+
+      // Use string concatentation instead of whitespace inside a single template string
+      // to make the structure message explicit.
+      const failureMessage = `example ng_package differs from golden file\n` +
+          `    Diff:\n` +
+          `    ${patch}\n\n` +
+          `    To accept the new golden file, run:\n` +
+          `      bazel run ${process.env['BAZEL_TARGET']}.accept\n`;
+
+      fail(failureMessage);
+    }
+  });
+}
+
+/** Gets all errors for missing golden files or packages. Typically missing from the bazel rule. */
+function getDependencyErrors(testPackage: TestPackage): string[] {
+  const errors = [];
+
+  const goldenFile = path.join(TEST_DIR, testPackage.goldPath);
+  if (!fs.existsSync(goldenFile)) {
+    errors.push(
+        `The golden file "${testPackage.goldPath}" cannot be found. ` +
+        `Ensure that the file exists and is added to the 'data' attribute of the test rule`);
+  }
+
+  if (!fs.existsSync(path.join(TEST_DIR, `${testPackage.dir}`, 'npm_package'))) {
+    errors.push(
+        `The package output for "${testPackage.dir}" cannot be found. Ensure that ` +
+        `the an ng_package named "npm_package" exists in the "${testPackage.dir }" directory ` +
+        `and that it is added to the "data" attribute of the test rule.`);
+  }
+
+  return errors;
+}
+
+
+// If there are any dependency errors, emit the errors and set the exit code.
+let hasError = false;
+for (let p of packagesToTest) {
+  const dependencyErrors = getDependencyErrors(p);
+  if (dependencyErrors.length) {
+    console.error(dependencyErrors.join('\n\n'));
+    hasError = true;
+  }
+}
+
+if (!hasError) {
+  if (require.main === module) {
+    const args = process.argv.slice(2);
+    const acceptingNewGold = (args[0] === '--accept');
+
+    if (acceptingNewGold) {
+      for (let p of packagesToTest) {
+        acceptNewPackageGold(p);
+      }
+    }
+  } else {
+    describe('Comparing test packages to golds', () => {
+      for (let p of packagesToTest) {
+        runPackageGoldTest(p);
+      }
+    });
+  }
+}
+
+process.exitCode = hasError ? 1 : 0;
diff --git a/packages/bazel/test/ngc-wrapped/BUILD.bazel b/packages/bazel/test/ngc-wrapped/BUILD.bazel
new file mode 100644
index 000000000000..6fcd11080e7a
--- /dev/null
+++ b/packages/bazel/test/ngc-wrapped/BUILD.bazel
@@ -0,0 +1,35 @@
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+ts_library(
+    name = "ngc_test_lib",
+    srcs = [
+        "index_test.ts",
+        "test_support.ts",
+        "tsconfig_template.ts",
+    ],
+    tsconfig = ":tsconfig.json",
+    deps = [
+        "//packages/bazel/src/ngc-wrapped:ngc_lib",
+        "//packages/compiler-cli",
+    ],
+)
+
+# We need a filegroup so that we can refer
+# .d.ts files (by default, jasmine_node_test would get the .js files).
+filegroup(
+    name = "angular_core",
+    srcs = ["//packages/core"],
+)
+
+jasmine_node_test(
+    name = "ngc_test",
+    size = "small",
+    srcs = [":ngc_test_lib"],
+    data = [
+        ":angular_core",
+        "//packages/bazel/test/ngc-wrapped/empty:empty_tsconfig.json",
+        "//packages/bazel/test/ngc-wrapped/empty:tsconfig.json",
+        "@build_bazel_rules_typescript//third_party/github.com/bazelbuild/bazel/src/main/protobuf:worker_protocol.proto",
+    ],
+)
diff --git a/packages/bazel/test/ngc-wrapped/empty/BUILD.bazel b/packages/bazel/test/ngc-wrapped/empty/BUILD.bazel
new file mode 100644
index 000000000000..48925e5a1823
--- /dev/null
+++ b/packages/bazel/test/ngc-wrapped/empty/BUILD.bazel
@@ -0,0 +1,10 @@
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//packages/bazel/test:__subpackages__"])
+
+ng_module(
+    name = "empty",
+    srcs = ["empty.ts"],
+    tsconfig = ":tsconfig.json",
+    deps = ["//packages/core"],
+)
diff --git a/packages/bazel/test/ngc-wrapped/empty/README.md b/packages/bazel/test/ngc-wrapped/empty/README.md
new file mode 100644
index 000000000000..a17da4174b03
--- /dev/null
+++ b/packages/bazel/test/ngc-wrapped/empty/README.md
@@ -0,0 +1 @@
+# Empty ng_module to capture the default tsconfig.json
diff --git a/packages/bazel/test/ngc-wrapped/empty/empty.ts b/packages/bazel/test/ngc-wrapped/empty/empty.ts
new file mode 100644
index 000000000000..40b61645a2be
--- /dev/null
+++ b/packages/bazel/test/ngc-wrapped/empty/empty.ts
@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+
+// Empty file for an empty ng_module
+// to capture the tsconfig used by ng_module.
diff --git a/packages/bazel/test/ngc-wrapped/empty/tsconfig.json b/packages/bazel/test/ngc-wrapped/empty/tsconfig.json
new file mode 100644
index 000000000000..35ac957478e1
--- /dev/null
+++ b/packages/bazel/test/ngc-wrapped/empty/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@angular/core": ["../../../../dist/packages/core"]
+    }
+  }
+}
diff --git a/packages/bazel/test/ngc-wrapped/index_test.ts b/packages/bazel/test/ngc-wrapped/index_test.ts
new file mode 100644
index 000000000000..49a85d99a689
--- /dev/null
+++ b/packages/bazel/test/ngc-wrapped/index_test.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 * as fs from 'fs';
+import * as path from 'path';
+
+import {setup} from './test_support';
+
+describe('ngc_wrapped', () => {
+
+  it('should work', () => {
+    const {read, write, runOneBuild, writeConfig, shouldExist, basePath} = setup();
+
+    write('some_project/index.ts', `
+      import {Component} from '@angular/core';
+      import {a} from 'ambient_module';
+      console.log('works: ', Component);
+    `);
+
+    const tsconfig = writeConfig({
+      srcTargetPath: 'some_project',
+    });
+    const typesFile = path.resolve(
+        tsconfig.compilerOptions.rootDir, tsconfig.compilerOptions.typeRoots[0], 'thing',
+        'index.d.ts');
+
+    write(typesFile, `
+      declare module "ambient_module" {
+        declare const a = 1;
+      }
+    `);
+
+    // expect no error
+    expect(runOneBuild()).toBe(true);
+
+    shouldExist('bazel-bin/some_project/index.js');
+
+    expect(read('bazel-bin/some_project/index.js'))
+        .toContain(`console.log('works: ', core_1.Component);`);
+  });
+});
diff --git a/packages/bazel/test/ngc-wrapped/test_support.ts b/packages/bazel/test/ngc-wrapped/test_support.ts
new file mode 100644
index 000000000000..3e331f66d42f
--- /dev/null
+++ b/packages/bazel/test/ngc-wrapped/test_support.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 {runOneBuild} from '@angular/bazel';
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {createTsConfig} from './tsconfig_template';
+
+export interface TestSupport {
+  basePath: string;
+  runfilesPath: string;
+  angularCorePath: string;
+  writeConfig({
+      srcTargetPath, depPaths, pathMapping,
+  }: {
+    srcTargetPath: string,
+    depPaths?: string[],
+    pathMapping?: Array<{moduleName: string; path: string;}>,
+  }): {compilerOptions: ts.CompilerOptions};
+  read(fileName: string): string;
+  write(fileName: string, content: string): void;
+  writeFiles(...mockDirs: {[fileName: string]: string}[]): void;
+  shouldExist(fileName: string): void;
+  shouldNotExist(fileName: string): void;
+  runOneBuild(): boolean;
+}
+
+export function setup(
+    {
+        bazelBin = 'bazel-bin', tsconfig = 'tsconfig.json',
+    }: {
+      bazelBin?: string,
+      tsconfig?: string,
+    } = {}): TestSupport {
+  const runfilesPath = process.env['TEST_SRCDIR'];
+
+  const basePath = makeTempDir(runfilesPath);
+
+  const bazelBinPath = path.resolve(basePath, bazelBin);
+  fs.mkdirSync(bazelBinPath);
+
+  const angularCorePath = path.resolve(runfilesPath, 'angular', 'packages', 'core');
+  const ngFiles = listFilesRecursive(angularCorePath);
+
+  const tsConfigJsonPath = path.resolve(basePath, tsconfig);
+
+  return {
+    basePath,
+    runfilesPath,
+    angularCorePath,
+    write,
+    read,
+    writeFiles,
+    writeConfig,
+    shouldExist,
+    shouldNotExist,
+    runOneBuild: runOneBuildImpl
+  };
+
+  // -----------------
+  // helpers
+
+  function mkdirp(dirname: string) {
+    const parent = path.dirname(dirname);
+    if (!fs.existsSync(parent)) {
+      mkdirp(parent);
+    }
+    fs.mkdirSync(dirname);
+  }
+
+  function write(fileName: string, content: string) {
+    const dir = path.dirname(fileName);
+    if (dir != '.') {
+      const newDir = path.resolve(basePath, dir);
+      if (!fs.existsSync(newDir)) mkdirp(newDir);
+    }
+    fs.writeFileSync(path.resolve(basePath, fileName), content, {encoding: 'utf-8'});
+  }
+
+  function read(fileName: string) {
+    return fs.readFileSync(path.resolve(basePath, fileName), {encoding: 'utf-8'});
+  }
+
+  function writeFiles(...mockDirs: {[fileName: string]: string}[]) {
+    mockDirs.forEach(
+        (dir) => { Object.keys(dir).forEach((fileName) => { write(fileName, dir[fileName]); }); });
+  }
+
+  function writeConfig({
+      srcTargetPath, depPaths = [], pathMapping = [],
+  }: {
+    srcTargetPath: string,
+    depPaths?: string[],
+    pathMapping?: Array<{moduleName: string; path: string;}>,
+  }) {
+    srcTargetPath = path.resolve(basePath, srcTargetPath);
+    const compilationTargetSrc = listFilesRecursive(srcTargetPath);
+    const target = '//' + path.relative(basePath, srcTargetPath);
+    const files = [...compilationTargetSrc];
+
+    depPaths = depPaths.concat([angularCorePath]);
+    pathMapping = pathMapping.concat([{moduleName: '@angular/core', path: angularCorePath}]);
+
+    for (const depPath of depPaths) {
+      files.push(...listFilesRecursive(depPath).filter(f => f.endsWith('.d.ts')));
+    }
+
+    const pathMappingObj = {};
+    for (const mapping of pathMapping) {
+      pathMappingObj[mapping.moduleName] = [mapping.path];
+      pathMappingObj[path.join(mapping.moduleName, '*')] = [path.join(mapping.path, '*')];
+    }
+
+    const emptyTsConfig = ts.readConfigFile(
+        path.resolve(
+            runfilesPath, 'angular', 'packages', 'bazel', 'test', 'ngc-wrapped', 'empty',
+            'empty_tsconfig.json'),
+        read);
+
+    const tsconfig = createTsConfig({
+      defaultTsConfig: emptyTsConfig.config,
+      rootDir: basePath,
+      target: target,
+      outDir: bazelBinPath, compilationTargetSrc,
+      files: files,
+      pathMapping: pathMappingObj,
+    });
+    write(path.resolve(basePath, tsConfigJsonPath), JSON.stringify(tsconfig, null, 2));
+    return tsconfig;
+  }
+
+  function shouldExist(fileName: string) {
+    if (!fs.existsSync(path.resolve(basePath, fileName))) {
+      throw new Error(`Expected ${fileName} to be emitted (basePath: ${basePath})`);
+    }
+  }
+
+  function shouldNotExist(fileName: string) {
+    if (fs.existsSync(path.resolve(basePath, fileName))) {
+      throw new Error(`Did not expect ${fileName} to be emitted (basePath: ${basePath})`);
+    }
+  }
+
+  function runOneBuildImpl(): boolean { return runOneBuild(['@' + tsConfigJsonPath]); }
+}
+
+function makeTempDir(baseDir): string {
+  const id = (Math.random() * 1000000).toFixed(0);
+  const dir = path.join(baseDir, `tmp.${id}`);
+  fs.mkdirSync(dir);
+  return dir;
+}
+
+export function listFilesRecursive(dir: string, fileList: string[] = []) {
+  fs.readdirSync(dir).forEach(file => {
+    if (fs.statSync(path.join(dir, file)).isDirectory()) {
+      listFilesRecursive(path.join(dir, file), fileList);
+    } else {
+      fileList.push(path.join(dir, file));
+    }
+  });
+  return fileList;
+}
diff --git a/packages/bazel/test/ngc-wrapped/tsconfig.json b/packages/bazel/test/ngc-wrapped/tsconfig.json
new file mode 100644
index 000000000000..19f586e9f622
--- /dev/null
+++ b/packages/bazel/test/ngc-wrapped/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "lib": ["es5", "es2015.collection", "es2015.core"],
+    "types": ["node", "jasmine"]
+  }
+}
diff --git a/packages/bazel/test/ngc-wrapped/tsconfig_template.ts b/packages/bazel/test/ngc-wrapped/tsconfig_template.ts
new file mode 100644
index 000000000000..07c06ce281be
--- /dev/null
+++ b/packages/bazel/test/ngc-wrapped/tsconfig_template.ts
@@ -0,0 +1,105 @@
+/**
+ * @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 path from 'path';
+import * as ts from 'typescript';
+
+const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
+
+export interface TsConfigOptions {
+  defaultTsConfig: any;
+  outDir: string;
+  rootDir: string;
+  pathMapping: {[pattern: string]: string[]};
+  // e.g. //packages/core:core
+  target: string;
+  compilationTargetSrc: string[];
+  files: string[];
+}
+
+/**
+ * Creates a tsconfig based on the default tsconfig
+ * to adjust paths, ...
+ *
+ * @param options
+ */
+export function createTsConfig(options: TsConfigOptions) {
+  const result = options.defaultTsConfig;
+
+  return {
+    'extends': '../angular/packages/bazel/test/ngc-wrapped/empty/tsconfig',
+    'compilerOptions': {
+      ...result.compilerOptions,
+      'outDir': options.outDir,
+      'rootDir': options.rootDir,
+      'rootDirs': [
+        options.rootDir,
+      ],
+      'baseUrl': options.rootDir,
+      'paths': {
+        '*': [
+          './*',
+        ],
+        ...options.pathMapping,
+      },
+      // we have to set this as the default tsconfig is made of es6 mode
+      'target': 'es5',
+      // we have to set this as the default tsconfig is made of es6 mode
+      'module': 'commonjs',
+      // if we specify declarationDir, we also have to specify
+      // declaration in the same tsconfig.json, otherwise ts will error.
+      'declaration': true,
+      'declarationDir': options.outDir,
+    },
+    'bazelOptions': {
+      ...result.bazelOptions,
+      'workspaceName': 'angular',
+      'target': options.target,
+      // we have to set this as the default tsconfig is made of es6 mode
+      'es5Mode': true,
+      'manifest': createManifestPath(options),
+      'compilationTargetSrc': options.compilationTargetSrc,
+      // Override this property from the real tsconfig we read
+      // Because we ask for :empty_tsconfig.json, we get the ES6 version which
+      // expects to write externs, yet that doesn't work under this fixture.
+      'tsickleExternsPath': '',
+      // we don't copy the node_modules into our tmp dir, so we should look in
+      // the original workspace directory for it
+      'nodeModulesPrefix': '../angular/external/angular_deps/node_modules',
+    },
+    'files': options.files,
+    'angularCompilerOptions': {
+      ...result.angularCompilerOptions,
+      'expectedOut': [
+        ...options.compilationTargetSrc.map(src => srcToExpectedOut(src, 'js', options)),
+        ...options.compilationTargetSrc.map(src => srcToExpectedOut(src, 'd.ts', options)),
+        ...options.compilationTargetSrc.map(src => srcToExpectedOut(src, 'ngfactory.js', options)),
+        ...options.compilationTargetSrc.map(
+            src => srcToExpectedOut(src, 'ngfactory.d.ts', options)),
+        ...options.compilationTargetSrc.map(src => srcToExpectedOut(src, 'ngsummary.js', options)),
+        ...options.compilationTargetSrc.map(
+            src => srcToExpectedOut(src, 'ngsummary.d.ts', options)),
+        ...options.compilationTargetSrc.map(
+            src => srcToExpectedOut(src, 'ngsummary.json', options)),
+      ]
+    }
+  };
+}
+
+function srcToExpectedOut(srcFile: string, suffix: string, options: TsConfigOptions): string {
+  const baseName = path.basename(srcFile).replace(EXT, '');
+  return path.join(
+             path.relative(options.rootDir, options.outDir),
+             path.relative(options.rootDir, path.dirname(srcFile)), baseName) +
+      '.' + suffix;
+}
+
+function createManifestPath(options: TsConfigOptions): string {
+  return path.resolve(options.outDir, options.target.replace(/\/\/|@/g, '').replace(/:/g, '/')) +
+      '.es5.MF';
+}
\ No newline at end of file
diff --git a/packages/bazel/test/protractor-2/BUILD.bazel b/packages/bazel/test/protractor-2/BUILD.bazel
new file mode 100644
index 000000000000..2a0c311af996
--- /dev/null
+++ b/packages/bazel/test/protractor-2/BUILD.bazel
@@ -0,0 +1,56 @@
+load("//packages/bazel:index.bzl", "protractor_web_test_suite")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary", "rollup_bundle")
+load("//tools/http-server:http_server.bzl", "http_server")
+
+ts_library(
+    name = "app",
+    srcs = ["app.ts"],
+    tsconfig = ":tsconfig.json",
+)
+
+ts_devserver(
+    name = "devserver",
+    serving_path = "/bundle.min.js",
+    static_files = ["index.html"],
+    deps = [":app"],
+)
+
+rollup_bundle(
+    name = "bundle",
+    entry_point = "packages/bazel/test/protractor-2/app",
+    deps = [":app"],
+)
+
+http_server(
+    name = "prodserver",
+    data = [
+        "index.html",
+        ":bundle",
+    ],
+)
+
+ts_library(
+    name = "ts_spec",
+    testonly = True,
+    srcs = ["test.spec.ts"],
+    tsconfig = ":tsconfig.json",
+)
+
+protractor_web_test_suite(
+    name = "prodserver_test",
+    configuration = ":conf.js",
+    data = ["//packages/bazel/src/protractor/utils"],
+    on_prepare = ":on-prepare.js",
+    server = ":prodserver",
+    deps = [":ts_spec"],
+)
+
+protractor_web_test_suite(
+    name = "devserver_test",
+    configuration = ":conf.js",
+    data = ["//packages/bazel/src/protractor/utils"],
+    on_prepare = ":on-prepare.js",
+    server = ":devserver",
+    deps = [":ts_spec"],
+)
diff --git a/packages/bazel/test/protractor-2/app.ts b/packages/bazel/test/protractor-2/app.ts
new file mode 100644
index 000000000000..2008d9798ab2
--- /dev/null
+++ b/packages/bazel/test/protractor-2/app.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
+ */
+
+const el: HTMLDivElement = document.createElement('div');
+el.innerText = 'Hello, Protractor';
+el.className = 'ts1';
+document.body.appendChild(el);
diff --git a/packages/bazel/test/protractor-2/conf.js b/packages/bazel/test/protractor-2/conf.js
new file mode 100644
index 000000000000..5d142953a911
--- /dev/null
+++ b/packages/bazel/test/protractor-2/conf.js
@@ -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
+ */
+
+exports.config = {
+  onPrepare: function() { global.userOnPrepareGotCalled = true; }
+};
diff --git a/packages/bazel/test/protractor-2/index.html b/packages/bazel/test/protractor-2/index.html
new file mode 100644
index 000000000000..256a75f74fc2
--- /dev/null
+++ b/packages/bazel/test/protractor-2/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <title>protractor test</title>
+  </head>
+  <body>
+    <script src="/bundle.min.js"></script>
+  </body>
+</html>
diff --git a/packages/bazel/test/protractor-2/on-prepare.js b/packages/bazel/test/protractor-2/on-prepare.js
new file mode 100644
index 000000000000..1ce5b2d426be
--- /dev/null
+++ b/packages/bazel/test/protractor-2/on-prepare.js
@@ -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
+ */
+
+const protractorUtils = require('@angular/bazel/protractor-utils');
+const protractor = require('protractor');
+
+module.exports = function(config) {
+  if (!global.userOnPrepareGotCalled) {
+    throw new Error('Expecting user configuration onPrepare to have been called');
+  }
+  const portFlag = config.server.endsWith('prodserver') ? '-p' : '-port';
+  return protractorUtils.runServer(config.workspace, config.server, portFlag, [])
+      .then(serverSpec => {
+        const serverUrl = `http://localhost:${serverSpec.port}`;
+        protractor.browser.baseUrl = serverUrl;
+      });
+};
diff --git a/packages/bazel/test/protractor-2/test.spec.ts b/packages/bazel/test/protractor-2/test.spec.ts
new file mode 100644
index 000000000000..cf8b5e956431
--- /dev/null
+++ b/packages/bazel/test/protractor-2/test.spec.ts
@@ -0,0 +1,28 @@
+/**
+ * @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
+ *
+ * @fileoverview A small demo of how to run a protractor test.
+ */
+
+import {ExpectedConditions, browser, by, element} from 'protractor';
+
+
+// This test uses Protractor without Angular, so disable Angular features
+browser.waitForAngularEnabled(false);
+
+describe('app', () => {
+  beforeAll(() => {
+    browser.get('');
+    browser.wait(ExpectedConditions.presenceOf(element(by.css('div.ts1'))), 100000);
+  });
+
+  it('should display: Hello, Protractor', (done) => {
+    const div = element(by.css('div.ts1'));
+    div.getText().then(t => expect(t).toEqual(`Hello, Protractor`));
+    done();
+  });
+});
diff --git a/packages/bazel/test/protractor-2/tsconfig.json b/packages/bazel/test/protractor-2/tsconfig.json
new file mode 100644
index 000000000000..4c08760f6ab0
--- /dev/null
+++ b/packages/bazel/test/protractor-2/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "es2015"]
+  }
+}
diff --git a/packages/bazel/test/protractor/BUILD.bazel b/packages/bazel/test/protractor/BUILD.bazel
new file mode 100644
index 000000000000..449d6a95b1a3
--- /dev/null
+++ b/packages/bazel/test/protractor/BUILD.bazel
@@ -0,0 +1,24 @@
+load("//packages/bazel:index.bzl", "protractor_web_test_suite")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+ts_library(
+    name = "ts_spec",
+    testonly = True,
+    srcs = ["test.spec.ts"],
+    tsconfig = ":tsconfig.json",
+)
+
+ts_library(
+    name = "ts_conf",
+    testonly = True,
+    srcs = ["conf.ts"],
+    tsconfig = ":tsconfig.json",
+    deps = ["//packages/bazel/src/protractor/utils"],
+)
+
+protractor_web_test_suite(
+    name = "test",
+    configuration = ":ts_conf",
+    data = ["//packages/bazel/src/protractor/utils"],
+    deps = [":ts_spec"],
+)
diff --git a/packages/bazel/test/protractor/conf.ts b/packages/bazel/test/protractor/conf.ts
new file mode 100644
index 000000000000..2a3e21f4be6f
--- /dev/null
+++ b/packages/bazel/test/protractor/conf.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 protractorUtils from '@angular/bazel/protractor-utils';
+import {browser} from 'protractor';
+
+const http = require('http');
+
+exports.config = {
+  onPrepare() {
+    return protractorUtils.findFreeTcpPort().then(port => {
+      const app = new http.Server();
+
+      app.on('request', (req, res) => {
+        res.writeHead(200, {'Content-Type': 'text/plain'});
+        res.write('Hello World');
+        res.end('\n');
+      });
+
+      browser.baseUrl = `http://localhost:${port}`;
+
+      return new Promise(resolve => { app.listen(port, () => { resolve(); }); });
+    });
+  }
+};
diff --git a/packages/bazel/test/protractor/test.spec.ts b/packages/bazel/test/protractor/test.spec.ts
new file mode 100644
index 000000000000..139fd3c98db8
--- /dev/null
+++ b/packages/bazel/test/protractor/test.spec.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
+ *
+ * @fileoverview A small demo of how to run a protractor test.
+ */
+
+import {$, browser} from 'protractor';
+
+describe('Basic test', () => {
+  it('should say hello world', () => {
+    browser.waitForAngularEnabled(false);
+    browser.get('/');
+
+    expect($('body').getText()).toContain('Hello World');
+  });
+});
diff --git a/packages/bazel/test/protractor/tsconfig.json b/packages/bazel/test/protractor/tsconfig.json
new file mode 100644
index 000000000000..8f3c65679683
--- /dev/null
+++ b/packages/bazel/test/protractor/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015"]
+  }
+}
diff --git a/packages/benchpress/BUILD.bazel b/packages/benchpress/BUILD.bazel
new file mode 100644
index 000000000000..243f8db349d4
--- /dev/null
+++ b/packages/benchpress/BUILD.bazel
@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "benchpress",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/benchpress",
+    deps = [
+        "//packages:types",
+        "//packages/core",
+    ],
+)
diff --git a/packages/benchpress/README.md b/packages/benchpress/README.md
new file mode 100644
index 000000000000..64a58318a795
--- /dev/null
+++ b/packages/benchpress/README.md
@@ -0,0 +1,305 @@
+# Benchpress
+
+Benchpress is a framework for e2e performance tests.
+See [here for an example project](https://github.com/angular/benchpress-tree).
+
+The sources for this package are in the main [Angular](https://github.com/angular/angular) repo. Please file issues and pull requests against that repo.
+
+License: MIT
+
+# Why?
+
+There are so called "micro benchmarks" that essentially use a stop watch in the browser to measure time
+(e.g. via `performance.now()`). This approach is limited to time, and in some cases memory
+(Chrome with special flags), as metric. It does not allow to measure:
+
+- rendering time: e.g. the time the browser spends to layout or paint elements. This can e.g. used to
+  test the performance impact of stylesheet changes.
+- garbage collection: e.g. how long the browser paused script execution, and how much memory was collected.
+  This can be used to stabilize script execution time, as garbage collection times are usually very
+  unpredictable. This data can also be used to measure and improve memory usage of applications,
+  as the garbage collection amount directly affects garbage collection time.
+- distinguish script execution time from waiting: e.g. to measure the client side only time that is spent
+  in a complex user interaction, ignoring backend calls.
+- measure fps to assert the smoothness of scrolling and animations.
+
+This kind of data is already available in the DevTools of modern browsers. However, there is no standard way to
+use those tools in an automated way to measure web app performance, especially not across platforms.
+
+Benchpress tries to fill this gap, i.e. allow to access all kinds of performance metrics in an automated way.
+
+
+# How it works
+
+Benchpress uses webdriver to read out the so called "performance log" of browsers. This contains all kinds of interesting
+data, e.g. when a script started/ended executing, gc started/ended, the browser painted something to the screen, ...
+
+As browsers are different, benchpress has plugins to normalizes these events.
+
+
+# Features
+
+* Provides a loop (so called "Sampler") that executes the benchmark multiple times
+* Automatically waits/detects until the browser is "warm"
+* Reporters provide a normalized way to store results:
+  - console reporter
+  - file reporter
+  - Google Big Query reporter (coming soon)
+* Supports micro benchmarks as well via `console.time()` / `console.timeEnd()`
+  - `console.time()` / `console.timeEnd()` mark the timeline in the DevTools, so it makes sense
+    to use them in micro benchmark to visualize and understand them, with or without benchpress.
+  - running micro benchmarks in benchpress leverages the already existing reporters,
+    the sampler and the auto warmup feature of benchpress.
+
+
+# Supported browsers
+
+* Chrome on all platforms
+* Mobile Safari (iOS)
+* Firefox (work in progress)
+
+
+# How to write a benchmark
+
+A benchmark in benchpress is made by an application under test
+and a benchmark driver. The application under test is the
+actual application consisting of html/css/js that should be tests.
+A benchmark driver is a webdriver test that interacts with the
+application under test.
+
+
+## A simple benchmark
+
+Let's assume we want to measure the script execution time, as well as the render time
+that it takes to fill a container element with a complex html string.
+
+The application under test could look like this:
+
+```
+index.html:
+
+<button id="reset" onclick="reset()">Reset</button>
+<button id="fill" onclick="fill()">fill innerHTML</button>
+<div id="container"></div>
+<script>
+  var container = document.getElementById('container');
+  var complexHtmlString = '...'; // TODO
+
+  function reset() { container.innerHTML = ''; }
+
+  function fill() {
+    container.innerHTML = complexHtmlString;
+  }
+</script>
+```
+
+A benchmark driver could look like this:
+
+```
+// A runner contains the shared configuration
+// and can be shared across multiple tests.
+var runner = new Runner(...);
+
+driver.get('http://myserver/index.html');
+
+var resetBtn = driver.findElement(By.id('reset'));
+var fillBtn = driver.findElement(By.id('fill'));
+
+runner.sample({
+  id: 'fillElement',
+  // Prepare is optional...
+  prepare: () {
+    resetBtn.click();
+  },
+  execute: () {
+    fillBtn.click();
+    // Note: if fillBtn would use some asynchronous code,
+    // we would need to wait here for its end.
+  }
+});
+```
+
+## Measuring in the browser
+
+If the application under test would like to, it can measure on its own.
+E.g.
+
+```
+index.html:
+
+<button id="measure" onclick="measure()">Measure document.createElement</button>
+<script>
+  function measure() {
+    console.time('createElement*10000');
+    for (var i=0; i<10000; i++) {
+      document.createElement('div');
+    }
+    console.timeEnd('createElement*10000');
+  }
+</script>
+```
+
+When the `measure` button is clicked, it marks the timeline and creates 10000 elements.
+It uses the special names `createElement*10000` to tell benchpress that the
+time that was measured is for 10000 calls to createElement and that benchpress should
+take the average for it.
+
+A test driver for this would look like this:
+
+````
+driver.get('.../index.html');
+
+var measureBtn = driver.findElement(By.id('measure'));
+runner.sample({
+  id: 'createElement test',
+  microMetrics: {
+    'createElement': 'time to create an element (ms)'
+  },
+  execute: () {
+    measureBtn.click();
+  }
+});
+````
+
+When looking into the DevTools Timeline, we see a marker as well:
+![Marked Timeline](docs/marked_timeline.png)
+
+### Custom Metrics Without Using `console.time`
+
+It's also possible to measure any "user metric" within the browser
+by setting a numeric value on the `window` object. For example:
+
+```js
+bootstrap(App)
+  .then(() => {
+    window.timeToBootstrap = Date.now() - performance.timing.navigationStart;
+  });
+```
+
+A test driver for this user metric could be written as follows:
+
+```js
+
+describe('home page load', function() {
+  it('should log load time for a 2G connection', done => {
+    runner.sample({
+      execute: () => {
+        browser.get(`http://localhost:8080`);
+      },
+      userMetrics: {
+        timeToBootstrap: 'The time in milliseconds to bootstrap'
+      },
+      providers: [
+        {provide: RegressionSlopeValidator.METRIC, useValue: 'timeToBootstrap'}
+      ]
+    }).then(done);
+  });
+});
+```
+
+Using this strategy, benchpress will wait until the specified property name,
+`timeToBootstrap` in this case, is defined as a number on the `window` object
+inside the application under test.
+
+# Smoothness Metrics
+
+Benchpress can also measure the "smoothness" of scrolling and animations. In order to do that, the following set of metrics can be collected by benchpress:
+
+- `frameTime.mean`: mean frame time in ms (target: 16.6ms for 60fps)
+- `frameTime.worst`: worst frame time in ms
+- `frameTime.best`: best frame time in ms
+- `frameTime.smooth`: percentage of frames that hit 60fps
+
+To collect these metrics, you need to execute `console.time('frameCapture')` and `console.timeEnd('frameCapture')` either in your benchmark application or in you benchmark driver via webdriver. The metrics mentioned above will only be collected between those two calls and it is recommended to wrap the time/timeEnd calls as closely as possible around the action you want to evaluate to get accurate measurements.
+
+In addition to that, one extra provider needs to be passed to benchpress in tests that want to collect these metrics:
+
+    benchpress.sample(providers: [{provide: bp.Options.CAPTURE_FRAMES, useValue: true}], ... )
+
+# Requests Metrics
+
+Benchpress can also record the number of requests sent and count the received "encoded" bytes since [window.performance.timing.navigationStart](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-navigationstart):
+
+- `receivedData`: number of bytes received since the last navigation start
+- `requestCount`: number of requests sent since the last navigation start
+
+To collect these metrics, you need the following corresponding extra providers:
+
+    benchpress.sample(providers: [
+      {provide: bp.Options.RECEIVED_DATA, useValue: true},
+      {provide: bp.Options.REQUEST_COUNT, useValue: true}
+    ], ... )
+
+# Best practices
+
+* 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/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) 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
+  - relative comparisons are less likely to change over time and help to interpret the results of benchmarks
+  - e.g. compare an example written using a ui framework against a hand coded example and track the ratio
+
+* Assert post-commit for commit ranges
+  - running benchmarks can take some time. Running them before every commit is usually too slow.
+  - when a regression is detected for a commit range, use bisection to find the problematic commit
+
+* Repeat benchmarks multiple times in a fresh window
+  - run the same benchmark multiple times in a fresh window and then take the minimal average value of each benchmark run
+
+* Use force gc with care
+  - forcing gc can skew the script execution time and gcTime numbers,
+    but might be needed to get stable gc time / gc amount numbers
+
+* Open a new window for every test
+  - browsers (e.g. chrome) might keep JIT statistics over page reloads and optimize pages differently depending on what has been loaded before
+
+# Detailed overview
+
+![Overview](docs/overview.png)
+
+Definitions:
+
+* valid sample: a sample that represents the world that should be measured in a good way.
+* complete sample: sample of all measure values collected so far
+
+Components:
+
+* Runner
+  - contains a default configuration
+  - creates a new injector for every sample call, via which all other components are created
+
+* Sampler
+  - gets data from the metrics
+  - reports measure values immediately to the reporters
+  - loops until the validator is able to extract a valid sample out of the complete sample (see below).
+  - reports the valid sample and the complete sample to the reporters
+
+* Metric
+  - gets measure values from the browser
+  - e.g. reads out performance logs, DOM values, JavaScript values
+
+* Validator
+  - extracts a valid sample out of the complete sample of all measure values.
+  - e.g. wait until there are 10 samples and take them as valid sample (would include warmup time)
+  - e.g. wait until the regression slope for the metric `scriptTime` through the last 10 measure values is >=0, i.e. the values for the `scriptTime` metric are no more decreasing
+
+* Reporter
+  - reports measure values, the valid sample and the complete sample to backends
+  - e.g. a reporter that prints to the console, a reporter that reports values into Google BigQuery, ...
+
+* WebDriverAdapter
+  - abstraction over the used web driver client
+  - one implementation for every webdriver client
+    E.g. one for selenium-webdriver Node.js module, dart async webdriver, dart sync webdriver, ...
+
+* WebDriverExtension
+  - implements additional methods that are standardized in the webdriver protocol using the WebDriverAdapter
+  - provides functionality like force gc, read out performance logs in a normalized format
+  - one implementation per browser, e.g. one for Chrome, one for mobile Safari, one for Firefox
+
+
diff --git a/modules/benchpress/docs/marked_timeline.png b/packages/benchpress/docs/marked_timeline.png
similarity index 100%
rename from modules/benchpress/docs/marked_timeline.png
rename to packages/benchpress/docs/marked_timeline.png
diff --git a/modules/benchpress/docs/overview.png b/packages/benchpress/docs/overview.png
similarity index 100%
rename from modules/benchpress/docs/overview.png
rename to packages/benchpress/docs/overview.png
diff --git a/packages/benchpress/index.ts b/packages/benchpress/index.ts
new file mode 100644
index 000000000000..1b1127264218
--- /dev/null
+++ b/packages/benchpress/index.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
+ */
+
+// Must be imported first, because Angular decorators throw on load.
+import 'reflect-metadata';
+
+export {InjectionToken, Injector, Provider, ReflectiveInjector, StaticProvider} from '@angular/core';
+export {Options} from './src/common_options';
+export {MeasureValues} from './src/measure_values';
+export {Metric} from './src/metric';
+export {MultiMetric} from './src/metric/multi_metric';
+export {PerflogMetric} from './src/metric/perflog_metric';
+export {UserMetric} from './src/metric/user_metric';
+export {Reporter} from './src/reporter';
+export {ConsoleReporter} from './src/reporter/console_reporter';
+export {JsonFileReporter} from './src/reporter/json_file_reporter';
+export {MultiReporter} from './src/reporter/multi_reporter';
+export {Runner} from './src/runner';
+export {SampleDescription} from './src/sample_description';
+export {SampleState, Sampler} from './src/sampler';
+export {Validator} from './src/validator';
+export {RegressionSlopeValidator} from './src/validator/regression_slope_validator';
+export {SizeValidator} from './src/validator/size_validator';
+export {WebDriverAdapter} from './src/web_driver_adapter';
+export {PerfLogEvent, PerfLogFeatures, WebDriverExtension} from './src/web_driver_extension';
+export {ChromeDriverExtension} from './src/webdriver/chrome_driver_extension';
+export {FirefoxDriverExtension} from './src/webdriver/firefox_driver_extension';
+export {IOsDriverExtension} from './src/webdriver/ios_driver_extension';
+export {SeleniumWebDriverAdapter} from './src/webdriver/selenium_webdriver_adapter';
diff --git a/packages/benchpress/package.json b/packages/benchpress/package.json
new file mode 100644
index 000000000000..72cccaf76bb0
--- /dev/null
+++ b/packages/benchpress/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@angular/benchpress",
+  "version": "0.1.0",
+  "description": "Benchpress - a framework for e2e performance tests",
+  "main": "index.js",
+  "typings": "./index.d.ts",
+  "strictNullChecks": true,
+  "dependencies": {
+    "@angular/core": "^2.0.0-rc.7",
+    "reflect-metadata": "^0.1.2",
+    "rxjs": "^6.0.0",
+    "jpm": "1.1.4",
+    "firefox-profile": "0.4.0",
+    "selenium-webdriver": "^2.53.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "keywords": [
+    "angular",
+    "benchmarks"
+  ],
+  "contributors": [
+    "Tobias Bosch <tbosch@google.com> (https://angular.io/)"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/angular/issues"
+  },
+  "homepage": "https://github.com/angular/angular/tree/master/packages/compiler-cli"
+}
diff --git a/packages/benchpress/publish.sh b/packages/benchpress/publish.sh
new file mode 100755
index 000000000000..2b17befcf5b1
--- /dev/null
+++ b/packages/benchpress/publish.sh
@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+set -ex
+
+cd $(dirname $0)/../../..
+ROOTDIR=$(pwd)
+SRCDIR=${ROOTDIR}/packages/benchpress
+DESTDIR=${ROOTDIR}/dist/packages-dist/benchpress
+
+rm -fr ${DESTDIR}
+
+echo "====== BUILDING... ====="
+./build.sh --packages=core,benchpress --bundle=false
+
+echo "====== PUBLISHING: ${DESTDIR} ====="
+npm publish ${DESTDIR} --access public
diff --git a/packages/benchpress/src/common_options.ts b/packages/benchpress/src/common_options.ts
new file mode 100644
index 000000000000..12125c962bee
--- /dev/null
+++ b/packages/benchpress/src/common_options.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 {InjectionToken} from '@angular/core';
+import * as fs from 'fs';
+
+export class Options {
+  static SAMPLE_ID = new InjectionToken('Options.sampleId');
+  static DEFAULT_DESCRIPTION = new InjectionToken('Options.defaultDescription');
+  static SAMPLE_DESCRIPTION = new InjectionToken('Options.sampleDescription');
+  static FORCE_GC = new InjectionToken('Options.forceGc');
+  static NO_PREPARE = () => true;
+  static PREPARE = new InjectionToken('Options.prepare');
+  static EXECUTE = new InjectionToken('Options.execute');
+  static CAPABILITIES = new InjectionToken('Options.capabilities');
+  static USER_AGENT = new InjectionToken('Options.userAgent');
+  static MICRO_METRICS = new InjectionToken('Options.microMetrics');
+  static USER_METRICS = new InjectionToken('Options.userMetrics');
+  static NOW = new InjectionToken('Options.now');
+  static WRITE_FILE = new InjectionToken('Options.writeFile');
+  static RECEIVED_DATA = new InjectionToken('Options.receivedData');
+  static REQUEST_COUNT = new InjectionToken('Options.requestCount');
+  static CAPTURE_FRAMES = new InjectionToken('Options.frameCapture');
+  static DEFAULT_PROVIDERS = [
+    {provide: Options.DEFAULT_DESCRIPTION, useValue: {}},
+    {provide: Options.SAMPLE_DESCRIPTION, useValue: {}},
+    {provide: Options.FORCE_GC, useValue: false},
+    {provide: Options.PREPARE, useValue: Options.NO_PREPARE},
+    {provide: Options.MICRO_METRICS, useValue: {}}, {provide: Options.USER_METRICS, useValue: {}},
+    {provide: Options.NOW, useValue: () => new Date()},
+    {provide: Options.RECEIVED_DATA, useValue: false},
+    {provide: Options.REQUEST_COUNT, useValue: false},
+    {provide: Options.CAPTURE_FRAMES, useValue: false},
+    {provide: Options.WRITE_FILE, useValue: writeFile}
+  ];
+}
+
+function writeFile(filename: string, content: string): Promise<any> {
+  return new Promise(function(resolve, reject) {
+    fs.writeFile(filename, content, (error) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve();
+      }
+    });
+  });
+}
diff --git a/modules/benchpress/src/firefox_extension/.gitignore b/packages/benchpress/src/firefox_extension/.gitignore
similarity index 100%
rename from modules/benchpress/src/firefox_extension/.gitignore
rename to packages/benchpress/src/firefox_extension/.gitignore
diff --git a/packages/benchpress/src/firefox_extension/data/installed_script.ts b/packages/benchpress/src/firefox_extension/data/installed_script.ts
new file mode 100644
index 000000000000..1e14d5cc6b6c
--- /dev/null
+++ b/packages/benchpress/src/firefox_extension/data/installed_script.ts
@@ -0,0 +1,38 @@
+/**
+ * @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
+ */
+
+declare var exportFunction: any;
+declare var unsafeWindow: any;
+
+exportFunction(function() {
+  const curTime = unsafeWindow.performance.now();
+  (<any>self).port.emit('startProfiler', curTime);
+}, unsafeWindow, {defineAs: 'startProfiler'});
+
+exportFunction(function() {
+  (<any>self).port.emit('stopProfiler');
+}, unsafeWindow, {defineAs: 'stopProfiler'});
+
+exportFunction(function(cb: Function) {
+  (<any>self).port.once('perfProfile', cb);
+  (<any>self).port.emit('getProfile');
+}, unsafeWindow, {defineAs: 'getProfile'});
+
+exportFunction(function() {
+  (<any>self).port.emit('forceGC');
+}, unsafeWindow, {defineAs: 'forceGC'});
+
+exportFunction(function(name: string) {
+  const curTime = unsafeWindow.performance.now();
+  (<any>self).port.emit('markStart', name, curTime);
+}, unsafeWindow, {defineAs: 'markStart'});
+
+exportFunction(function(name: string) {
+  const curTime = unsafeWindow.performance.now();
+  (<any>self).port.emit('markEnd', name, curTime);
+}, unsafeWindow, {defineAs: 'markEnd'});
diff --git a/packages/benchpress/src/firefox_extension/lib/main.ts b/packages/benchpress/src/firefox_extension/lib/main.ts
new file mode 100644
index 000000000000..348014637c46
--- /dev/null
+++ b/packages/benchpress/src/firefox_extension/lib/main.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
+ */
+
+const {Cc, Ci, Cu} = require('chrome');
+const os = Cc['@mozilla.org/observer-service;1'].getService(Ci.nsIObserverService);
+const ParserUtil = require('./parser_util');
+
+class Profiler {
+  private _profiler: any;
+  // TODO(issue/24571): remove '!'.
+  private _markerEvents !: any[];
+  // TODO(issue/24571): remove '!'.
+  private _profilerStartTime !: number;
+
+  constructor() { this._profiler = Cc['@mozilla.org/tools/profiler;1'].getService(Ci.nsIProfiler); }
+
+  start(entries: any, interval: any, features: any, timeStarted: any) {
+    this._profiler.StartProfiler(entries, interval, features, features.length);
+    this._profilerStartTime = timeStarted;
+    this._markerEvents = [];
+  }
+
+  stop() { this._profiler.StopProfiler(); }
+
+  getProfilePerfEvents() {
+    const profileData = this._profiler.getProfileData();
+    let perfEvents = ParserUtil.convertPerfProfileToEvents(profileData);
+    perfEvents = this._mergeMarkerEvents(perfEvents);
+    perfEvents.sort(function(event1: any, event2: any) {
+      return event1.ts - event2.ts;
+    });  // Sort by ts
+    return perfEvents;
+  }
+
+  /** @internal */
+  private _mergeMarkerEvents(perfEvents: any[]): any[] {
+    this._markerEvents.forEach(function(markerEvent) { perfEvents.push(markerEvent); });
+    return perfEvents;
+  }
+
+  addStartEvent(name: string, timeStarted: number) {
+    this._markerEvents.push({ph: 'B', ts: timeStarted - this._profilerStartTime, name: name});
+  }
+
+  addEndEvent(name: string, timeEnded: number) {
+    this._markerEvents.push({ph: 'E', ts: timeEnded - this._profilerStartTime, name: name});
+  }
+}
+
+function forceGC() {
+  Cu.forceGC();
+  os.notifyObservers(null, 'child-gc-request', null);
+}
+
+const mod = require('sdk/page-mod');
+const data = require('sdk/self').data;
+const profiler = new Profiler();
+mod.PageMod({
+  include: ['*'],
+  contentScriptFile: data.url('installed_script.js'),
+  onAttach: (worker: any) => {
+    worker.port.on(
+        'startProfiler',
+        (timeStarted: any) => profiler.start(
+            /* = profiler memory */ 3000000, 0.1, ['leaf', 'js', 'stackwalk', 'gc'], timeStarted));
+    worker.port.on('stopProfiler', () => profiler.stop());
+    worker.port.on(
+        'getProfile', () => worker.port.emit('perfProfile', profiler.getProfilePerfEvents()));
+    worker.port.on('forceGC', forceGC);
+    worker.port.on(
+        'markStart', (name: string, timeStarted: any) => profiler.addStartEvent(name, timeStarted));
+    worker.port.on(
+        'markEnd', (name: string, timeEnded: any) => profiler.addEndEvent(name, timeEnded));
+  }
+});
diff --git a/packages/benchpress/src/firefox_extension/lib/parser_util.ts b/packages/benchpress/src/firefox_extension/lib/parser_util.ts
new file mode 100644
index 000000000000..6bccc3c87624
--- /dev/null
+++ b/packages/benchpress/src/firefox_extension/lib/parser_util.ts
@@ -0,0 +1,92 @@
+/**
+ * @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
+ */
+
+/**
+ * @param {Object} perfProfile The perf profile JSON object.
+ * @return {Object[]} An array of recognized events that are captured
+ *     within the perf profile.
+ */
+export function convertPerfProfileToEvents(perfProfile: any): any[] {
+  const inProgressEvents = new Map();                 // map from event name to start time
+  const finishedEvents: {[key: string]: any}[] = [];  // Event[] finished events
+  const addFinishedEvent = function(eventName: string, startTime: number, endTime: number) {
+    const categorizedEventName = categorizeEvent(eventName);
+    let args: {[key: string]: any}|undefined = undefined;
+    if (categorizedEventName == 'gc') {
+      // TODO: We cannot measure heap size at the moment
+      args = {usedHeapSize: 0};
+    }
+    if (startTime == endTime) {
+      // Finished instantly
+      finishedEvents.push({ph: 'X', ts: startTime, name: categorizedEventName, args: args});
+    } else {
+      // Has duration
+      finishedEvents.push({ph: 'B', ts: startTime, name: categorizedEventName, args: args});
+      finishedEvents.push({ph: 'E', ts: endTime, name: categorizedEventName, args: args});
+    }
+  };
+
+  const samples = perfProfile.threads[0].samples;
+  // In perf profile, firefox samples all the frames in set time intervals. Here
+  // we go through all the samples and construct the start and end time for each
+  // event.
+  for (let i = 0; i < samples.length; ++i) {
+    const sample = samples[i];
+    const sampleTime = sample.time;
+
+    // Add all the frames into a set so it's easier/faster to find the set
+    // differences
+    const sampleFrames = new Set();
+    sample.frames.forEach(function(frame: {[key: string]: any}) {
+      sampleFrames.add(frame['location']);
+    });
+
+    // If an event is in the inProgressEvents map, but not in the current sample,
+    // then it must have just finished. We add this event to the finishedEvents
+    // array and remove it from the inProgressEvents map.
+    const previousSampleTime = (i == 0 ? /* not used */ -1 : samples[i - 1].time);
+    inProgressEvents.forEach(function(startTime, eventName) {
+      if (!(sampleFrames.has(eventName))) {
+        addFinishedEvent(eventName, startTime, previousSampleTime);
+        inProgressEvents.delete(eventName);
+      }
+    });
+
+    // If an event is in the current sample, but not in the inProgressEvents map,
+    // then it must have just started. We add this event to the inProgressEvents
+    // map.
+    sampleFrames.forEach(function(eventName) {
+      if (!(inProgressEvents.has(eventName))) {
+        inProgressEvents.set(eventName, sampleTime);
+      }
+    });
+  }
+
+  // If anything is still in progress, we need to included it as a finished event
+  // since recording ended.
+  const lastSampleTime = samples[samples.length - 1].time;
+  inProgressEvents.forEach(function(startTime, eventName) {
+    addFinishedEvent(eventName, startTime, lastSampleTime);
+  });
+
+  // Remove all the unknown categories.
+  return finishedEvents.filter(function(event) { return event['name'] != 'unknown'; });
+}
+
+// TODO: this is most likely not exhaustive.
+export function categorizeEvent(eventName: string): string {
+  if (eventName.indexOf('PresShell::Paint') > -1) {
+    return 'render';
+  } else if (eventName.indexOf('FirefoxDriver.prototype.executeScript') > -1) {
+    return 'script';
+  } else if (eventName.indexOf('forceGC') > -1) {
+    return 'gc';
+  } else {
+    return 'unknown';
+  }
+}
diff --git a/packages/benchpress/src/firefox_extension/lib/test_helper.ts b/packages/benchpress/src/firefox_extension/lib/test_helper.ts
new file mode 100644
index 000000000000..97cfd2519d28
--- /dev/null
+++ b/packages/benchpress/src/firefox_extension/lib/test_helper.ts
@@ -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 q = require('q');
+const FirefoxProfile = require('firefox-profile');
+const jpm = require('jpm/lib/xpi');
+const pathUtil = require('path');
+
+const PERF_ADDON_PACKAGE_JSON_DIR = '..';
+
+exports.getAbsolutePath = function(path: string) {
+  const normalizedPath = pathUtil.normalize(path);
+  if (pathUtil.resolve(normalizedPath) == normalizedPath) {
+    // Already absolute path
+    return normalizedPath;
+  } else {
+    return pathUtil.join(__dirname, normalizedPath);
+  }
+};
+
+exports.getFirefoxProfile = function(extensionPath: string) {
+  const deferred = q.defer();
+
+  const firefoxProfile = new FirefoxProfile();
+  firefoxProfile.addExtensions([extensionPath], () => {
+    firefoxProfile.encoded((err: any, encodedProfile: string) => {
+      const multiCapabilities = [{browserName: 'firefox', firefox_profile: encodedProfile}];
+      deferred.resolve(multiCapabilities);
+    });
+  });
+
+  return deferred.promise;
+};
+
+exports.getFirefoxProfileWithExtension = function() {
+  const absPackageJsonDir = pathUtil.join(__dirname, PERF_ADDON_PACKAGE_JSON_DIR);
+  const packageJson = require(pathUtil.join(absPackageJsonDir, 'package.json'));
+
+  const savedCwd = process.cwd();
+  process.chdir(absPackageJsonDir);
+
+  return jpm(packageJson).then((xpiPath: string) => {
+    process.chdir(savedCwd);
+    return exports.getFirefoxProfile(xpiPath);
+  });
+};
diff --git a/modules/benchpress/src/firefox_extension/package.json b/packages/benchpress/src/firefox_extension/package.json
similarity index 100%
rename from modules/benchpress/src/firefox_extension/package.json
rename to packages/benchpress/src/firefox_extension/package.json
diff --git a/packages/benchpress/src/measure_values.ts b/packages/benchpress/src/measure_values.ts
new file mode 100644
index 000000000000..13a67238dc41
--- /dev/null
+++ b/packages/benchpress/src/measure_values.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 class MeasureValues {
+  constructor(
+      public runIndex: number, public timeStamp: Date, public values: {[key: string]: any}) {}
+
+  toJson() {
+    return {
+      'timeStamp': this.timeStamp.toJSON(),
+      'runIndex': this.runIndex,
+      'values': this.values,
+    };
+  }
+}
diff --git a/packages/benchpress/src/metric.ts b/packages/benchpress/src/metric.ts
new file mode 100644
index 000000000000..60fb0a8f0bcb
--- /dev/null
+++ b/packages/benchpress/src/metric.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 metric is measures values
+ */
+export abstract class Metric {
+  /**
+   * Starts measuring
+   */
+  beginMeasure(): Promise<any> { throw new Error('NYI'); }
+
+  /**
+   * Ends measuring and reports the data
+   * since the begin call.
+   * @param restart: Whether to restart right after this.
+   */
+  endMeasure(restart: boolean): Promise<{[key: string]: any}> { throw new Error('NYI'); }
+
+  /**
+   * Describes the metrics provided by this metric implementation.
+   * (e.g. units, ...)
+   */
+  describe(): {[key: string]: string} { throw new Error('NYI'); }
+}
diff --git a/packages/benchpress/src/metric/multi_metric.ts b/packages/benchpress/src/metric/multi_metric.ts
new file mode 100644
index 000000000000..47310e74835c
--- /dev/null
+++ b/packages/benchpress/src/metric/multi_metric.ts
@@ -0,0 +1,63 @@
+/**
+ * @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, Injector} from '@angular/core';
+
+import {Metric} from '../metric';
+
+export class MultiMetric extends Metric {
+  static provideWith(childTokens: any[]): any[] {
+    return [
+      {
+        provide: _CHILDREN,
+        useFactory: (injector: Injector) => childTokens.map(token => injector.get(token)),
+        deps: [Injector]
+      },
+      {
+        provide: MultiMetric,
+        useFactory: (children: Metric[]) => new MultiMetric(children),
+        deps: [_CHILDREN]
+      }
+    ];
+  }
+
+  constructor(private _metrics: Metric[]) { super(); }
+
+  /**
+   * Starts measuring
+   */
+  beginMeasure(): Promise<any> {
+    return Promise.all(this._metrics.map(metric => metric.beginMeasure()));
+  }
+
+  /**
+   * Ends measuring and reports the data
+   * since the begin call.
+   * @param restart: Whether to restart right after this.
+   */
+  endMeasure(restart: boolean): Promise<{[key: string]: any}> {
+    return Promise.all(this._metrics.map(metric => metric.endMeasure(restart)))
+        .then(values => mergeStringMaps(<any>values));
+  }
+
+  /**
+   * Describes the metrics provided by this metric implementation.
+   * (e.g. units, ...)
+   */
+  describe(): {[key: string]: any} {
+    return mergeStringMaps(this._metrics.map((metric) => metric.describe()));
+  }
+}
+
+function mergeStringMaps(maps: {[key: string]: string}[]): {[key: string]: string} {
+  const result: {[key: string]: string} = {};
+  maps.forEach(map => { Object.keys(map).forEach(prop => { result[prop] = map[prop]; }); });
+  return result;
+}
+
+const _CHILDREN = new InjectionToken('MultiMetric.children');
diff --git a/packages/benchpress/src/metric/perflog_metric.ts b/packages/benchpress/src/metric/perflog_metric.ts
new file mode 100644
index 000000000000..ac285e7a959e
--- /dev/null
+++ b/packages/benchpress/src/metric/perflog_metric.ts
@@ -0,0 +1,387 @@
+/**
+ * @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, Injectable, InjectionToken} from '@angular/core';
+
+import {Options} from '../common_options';
+import {Metric} from '../metric';
+import {PerfLogEvent, PerfLogFeatures, WebDriverExtension} from '../web_driver_extension';
+
+
+/**
+ * A metric that reads out the performance log
+ */
+@Injectable()
+export class PerflogMetric extends Metric {
+  static SET_TIMEOUT = new InjectionToken('PerflogMetric.setTimeout');
+  static IGNORE_NAVIGATION = new InjectionToken('PerflogMetric.ignoreNavigation');
+  static PROVIDERS = [
+    {
+      provide: PerflogMetric,
+      deps: [
+        WebDriverExtension, PerflogMetric.SET_TIMEOUT, Options.MICRO_METRICS, Options.FORCE_GC,
+        Options.CAPTURE_FRAMES, Options.RECEIVED_DATA, Options.REQUEST_COUNT,
+        PerflogMetric.IGNORE_NAVIGATION
+      ]
+    },
+    {
+      provide: PerflogMetric.SET_TIMEOUT,
+      useValue: (fn: Function, millis: number) => <any>setTimeout(fn, millis)
+    },
+    {provide: PerflogMetric.IGNORE_NAVIGATION, useValue: false}
+  ];
+
+  private _remainingEvents: PerfLogEvent[];
+  private _measureCount: number;
+  private _perfLogFeatures: PerfLogFeatures;
+
+  /**
+   * @param driverExtension
+   * @param setTimeout
+   * @param microMetrics Name and description of metrics provided via console.time / console.timeEnd
+   * @param ignoreNavigation If true, don't measure from navigationStart events. These events are
+   *   usually triggered by a page load, but can also be triggered when adding iframes to the DOM.
+   **/
+  constructor(
+      private _driverExtension: WebDriverExtension,
+      @Inject(PerflogMetric.SET_TIMEOUT) private _setTimeout: Function,
+      @Inject(Options.MICRO_METRICS) private _microMetrics: {[key: string]: string},
+      @Inject(Options.FORCE_GC) private _forceGc: boolean,
+      @Inject(Options.CAPTURE_FRAMES) private _captureFrames: boolean,
+      @Inject(Options.RECEIVED_DATA) private _receivedData: boolean,
+      @Inject(Options.REQUEST_COUNT) private _requestCount: boolean,
+      @Inject(PerflogMetric.IGNORE_NAVIGATION) private _ignoreNavigation: boolean) {
+    super();
+
+    this._remainingEvents = [];
+    this._measureCount = 0;
+    this._perfLogFeatures = _driverExtension.perfLogFeatures();
+    if (!this._perfLogFeatures.userTiming) {
+      // User timing is needed for navigationStart.
+      this._receivedData = false;
+      this._requestCount = false;
+    }
+  }
+
+  describe(): {[key: string]: string} {
+    const res: {[key: string]: any} = {
+      'scriptTime': 'script execution time in ms, including gc and render',
+      'pureScriptTime': 'script execution time in ms, without gc nor render'
+    };
+    if (this._perfLogFeatures.render) {
+      res['renderTime'] = 'render time in ms';
+    }
+    if (this._perfLogFeatures.gc) {
+      res['gcTime'] = 'gc time in ms';
+      res['gcAmount'] = 'gc amount in kbytes';
+      res['majorGcTime'] = 'time of major gcs in ms';
+      if (this._forceGc) {
+        res['forcedGcTime'] = 'forced gc time in ms';
+        res['forcedGcAmount'] = 'forced gc amount in kbytes';
+      }
+    }
+    if (this._receivedData) {
+      res['receivedData'] = 'encoded bytes received since navigationStart';
+    }
+    if (this._requestCount) {
+      res['requestCount'] = 'count of requests sent since navigationStart';
+    }
+    if (this._captureFrames) {
+      if (!this._perfLogFeatures.frameCapture) {
+        const warningMsg = 'WARNING: Metric requested, but not supported by driver';
+        // using dot syntax for metric name to keep them grouped together in console reporter
+        res['frameTime.mean'] = warningMsg;
+        res['frameTime.worst'] = warningMsg;
+        res['frameTime.best'] = warningMsg;
+        res['frameTime.smooth'] = warningMsg;
+      } else {
+        res['frameTime.mean'] = 'mean frame time in ms (target: 16.6ms for 60fps)';
+        res['frameTime.worst'] = 'worst frame time in ms';
+        res['frameTime.best'] = 'best frame time in ms';
+        res['frameTime.smooth'] = 'percentage of frames that hit 60fps';
+      }
+    }
+    for (const name in this._microMetrics) {
+      res[name] = this._microMetrics[name];
+    }
+    return res;
+  }
+
+  beginMeasure(): Promise<any> {
+    let resultPromise = Promise.resolve(null);
+    if (this._forceGc) {
+      resultPromise = resultPromise.then((_) => this._driverExtension.gc());
+    }
+    return resultPromise.then((_) => this._beginMeasure());
+  }
+
+  endMeasure(restart: boolean): Promise<{[key: string]: number}> {
+    if (this._forceGc) {
+      return this._endPlainMeasureAndMeasureForceGc(restart);
+    } else {
+      return this._endMeasure(restart);
+    }
+  }
+
+  /** @internal */
+  private _endPlainMeasureAndMeasureForceGc(restartMeasure: boolean) {
+    return this._endMeasure(true).then((measureValues) => {
+      // disable frame capture for measurements during forced gc
+      const originalFrameCaptureValue = this._captureFrames;
+      this._captureFrames = false;
+      return this._driverExtension.gc()
+          .then((_) => this._endMeasure(restartMeasure))
+          .then((forceGcMeasureValues) => {
+            this._captureFrames = originalFrameCaptureValue;
+            measureValues['forcedGcTime'] = forceGcMeasureValues['gcTime'];
+            measureValues['forcedGcAmount'] = forceGcMeasureValues['gcAmount'];
+            return measureValues;
+          });
+    });
+  }
+
+  private _beginMeasure(): Promise<any> {
+    return this._driverExtension.timeBegin(this._markName(this._measureCount++));
+  }
+
+  private _endMeasure(restart: boolean): Promise<{[key: string]: number}> {
+    const markName = this._markName(this._measureCount - 1);
+    const nextMarkName = restart ? this._markName(this._measureCount++) : null;
+    return this._driverExtension.timeEnd(markName, nextMarkName)
+        .then((_: any) => this._readUntilEndMark(markName));
+  }
+
+  private _readUntilEndMark(
+      markName: string, loopCount: number = 0, startEvent: PerfLogEvent|null = null) {
+    if (loopCount > _MAX_RETRY_COUNT) {
+      throw new Error(`Tried too often to get the ending mark: ${loopCount}`);
+    }
+    return this._driverExtension.readPerfLog().then((events) => {
+      this._addEvents(events);
+      const result = this._aggregateEvents(this._remainingEvents, markName);
+      if (result) {
+        this._remainingEvents = events;
+        return result;
+      }
+      let resolve: (result: any) => void;
+      const promise = new Promise<{[key: string]: number}>(res => { resolve = res; });
+      this._setTimeout(() => resolve(this._readUntilEndMark(markName, loopCount + 1)), 100);
+      return promise;
+    });
+  }
+
+  private _addEvents(events: PerfLogEvent[]) {
+    let needSort = false;
+    events.forEach(event => {
+      if (event['ph'] === 'X') {
+        needSort = true;
+        const startEvent: PerfLogEvent = {};
+        const endEvent: PerfLogEvent = {};
+        for (const prop in event) {
+          startEvent[prop] = event[prop];
+          endEvent[prop] = event[prop];
+        }
+        startEvent['ph'] = 'B';
+        endEvent['ph'] = 'E';
+        endEvent['ts'] = startEvent['ts'] ! + startEvent['dur'] !;
+        this._remainingEvents.push(startEvent);
+        this._remainingEvents.push(endEvent);
+      } else {
+        this._remainingEvents.push(event);
+      }
+    });
+    if (needSort) {
+      // Need to sort because of the ph==='X' events
+      this._remainingEvents.sort((a, b) => {
+        const diff = a['ts'] ! - b['ts'] !;
+        return diff > 0 ? 1 : diff < 0 ? -1 : 0;
+      });
+    }
+  }
+
+  private _aggregateEvents(events: PerfLogEvent[], markName: string): {[key: string]: number}|null {
+    const result: {[key: string]: number} = {'scriptTime': 0, 'pureScriptTime': 0};
+    if (this._perfLogFeatures.gc) {
+      result['gcTime'] = 0;
+      result['majorGcTime'] = 0;
+      result['gcAmount'] = 0;
+    }
+    if (this._perfLogFeatures.render) {
+      result['renderTime'] = 0;
+    }
+    if (this._captureFrames) {
+      result['frameTime.mean'] = 0;
+      result['frameTime.best'] = 0;
+      result['frameTime.worst'] = 0;
+      result['frameTime.smooth'] = 0;
+    }
+    for (const name in this._microMetrics) {
+      result[name] = 0;
+    }
+    if (this._receivedData) {
+      result['receivedData'] = 0;
+    }
+    if (this._requestCount) {
+      result['requestCount'] = 0;
+    }
+
+    let markStartEvent: PerfLogEvent = null !;
+    let markEndEvent: PerfLogEvent = null !;
+    events.forEach((event) => {
+      const ph = event['ph'];
+      const name = event['name'];
+      if (ph === 'B' && name === markName) {
+        markStartEvent = event;
+      } else if (ph === 'I' && name === 'navigationStart' && !this._ignoreNavigation) {
+        // if a benchmark measures reload of a page, use the last
+        // navigationStart as begin event
+        markStartEvent = event;
+      } else if (ph === 'E' && name === markName) {
+        markEndEvent = event;
+      }
+    });
+    if (!markStartEvent || !markEndEvent) {
+      // not all events have been received, no further processing for now
+      return null;
+    }
+    if (markStartEvent.pid !== markEndEvent.pid) {
+      result['invalid'] = 1;
+    }
+
+    let gcTimeInScript = 0;
+    let renderTimeInScript = 0;
+
+    const frameTimestamps: number[] = [];
+    const frameTimes: number[] = [];
+    let frameCaptureStartEvent: PerfLogEvent|null = null;
+    let frameCaptureEndEvent: PerfLogEvent|null = null;
+
+    const intervalStarts: {[key: string]: PerfLogEvent} = {};
+    const intervalStartCount: {[key: string]: number} = {};
+
+    let inMeasureRange = false;
+    events.forEach((event) => {
+      const ph = event['ph'];
+      let name = event['name'] !;
+      let microIterations = 1;
+      const microIterationsMatch = name.match(_MICRO_ITERATIONS_REGEX);
+      if (microIterationsMatch) {
+        name = microIterationsMatch[1];
+        microIterations = parseInt(microIterationsMatch[2], 10);
+      }
+      if (event === markStartEvent) {
+        inMeasureRange = true;
+      } else if (event === markEndEvent) {
+        inMeasureRange = false;
+      }
+      if (!inMeasureRange || event['pid'] !== markStartEvent['pid']) {
+        return;
+      }
+
+      if (this._requestCount && name === 'sendRequest') {
+        result['requestCount'] += 1;
+      } else if (this._receivedData && name === 'receivedData' && ph === 'I') {
+        result['receivedData'] += event['args'] !['encodedDataLength'] !;
+      }
+      if (ph === 'B' && name === _MARK_NAME_FRAME_CAPTURE) {
+        if (frameCaptureStartEvent) {
+          throw new Error('can capture frames only once per benchmark run');
+        }
+        if (!this._captureFrames) {
+          throw new Error(
+              'found start event for frame capture, but frame capture was not requested in benchpress');
+        }
+        frameCaptureStartEvent = event;
+      } else if (ph === 'E' && name === _MARK_NAME_FRAME_CAPTURE) {
+        if (!frameCaptureStartEvent) {
+          throw new Error('missing start event for frame capture');
+        }
+        frameCaptureEndEvent = event;
+      }
+
+      if (ph === 'I' && frameCaptureStartEvent && !frameCaptureEndEvent && name === 'frame') {
+        frameTimestamps.push(event['ts'] !);
+        if (frameTimestamps.length >= 2) {
+          frameTimes.push(
+              frameTimestamps[frameTimestamps.length - 1] -
+              frameTimestamps[frameTimestamps.length - 2]);
+        }
+      }
+
+      if (ph === 'B') {
+        if (!intervalStarts[name]) {
+          intervalStartCount[name] = 1;
+          intervalStarts[name] = event;
+        } else {
+          intervalStartCount[name]++;
+        }
+      } else if ((ph === 'E') && intervalStarts[name]) {
+        intervalStartCount[name]--;
+        if (intervalStartCount[name] === 0) {
+          const startEvent = intervalStarts[name];
+          const duration = (event['ts'] ! - startEvent['ts'] !);
+          intervalStarts[name] = null !;
+          if (name === 'gc') {
+            result['gcTime'] += duration;
+            const amount =
+                (startEvent['args'] !['usedHeapSize'] ! - event['args'] !['usedHeapSize'] !) / 1000;
+            result['gcAmount'] += amount;
+            const majorGc = event['args'] !['majorGc'];
+            if (majorGc && majorGc) {
+              result['majorGcTime'] += duration;
+            }
+            if (intervalStarts['script']) {
+              gcTimeInScript += duration;
+            }
+          } else if (name === 'render') {
+            result['renderTime'] += duration;
+            if (intervalStarts['script']) {
+              renderTimeInScript += duration;
+            }
+          } else if (name === 'script') {
+            result['scriptTime'] += duration;
+          } else if (this._microMetrics[name]) {
+            (<any>result)[name] += duration / microIterations;
+          }
+        }
+      }
+    });
+
+    if (frameCaptureStartEvent && !frameCaptureEndEvent) {
+      throw new Error('missing end event for frame capture');
+    }
+    if (this._captureFrames && !frameCaptureStartEvent) {
+      throw new Error('frame capture requested in benchpress, but no start event was found');
+    }
+    if (frameTimes.length > 0) {
+      this._addFrameMetrics(result, frameTimes);
+    }
+    result['pureScriptTime'] = result['scriptTime'] - gcTimeInScript - renderTimeInScript;
+    return result;
+  }
+
+  private _addFrameMetrics(result: {[key: string]: number}, frameTimes: any[]) {
+    result['frameTime.mean'] = frameTimes.reduce((a, b) => a + b, 0) / frameTimes.length;
+    const firstFrame = frameTimes[0];
+    result['frameTime.worst'] = frameTimes.reduce((a, b) => a > b ? a : b, firstFrame);
+    result['frameTime.best'] = frameTimes.reduce((a, b) => a < b ? a : b, firstFrame);
+    result['frameTime.smooth'] =
+        frameTimes.filter(t => t < _FRAME_TIME_SMOOTH_THRESHOLD).length / frameTimes.length;
+  }
+
+  private _markName(index: number) { return `${_MARK_NAME_PREFIX}${index}`; }
+}
+
+const _MICRO_ITERATIONS_REGEX = /(.+)\*(\d+)$/;
+
+const _MAX_RETRY_COUNT = 20;
+const _MARK_NAME_PREFIX = 'benchpress';
+
+const _MARK_NAME_FRAME_CAPTURE = 'frameCapture';
+// using 17ms as a somewhat looser threshold, instead of 16.6666ms
+const _FRAME_TIME_SMOOTH_THRESHOLD = 17;
diff --git a/packages/benchpress/src/metric/user_metric.ts b/packages/benchpress/src/metric/user_metric.ts
new file mode 100644
index 000000000000..fe253d913d13
--- /dev/null
+++ b/packages/benchpress/src/metric/user_metric.ts
@@ -0,0 +1,70 @@
+/**
+ * @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, Injectable, StaticProvider} from '@angular/core';
+
+import {Options} from '../common_options';
+import {Metric} from '../metric';
+import {WebDriverAdapter} from '../web_driver_adapter';
+
+@Injectable()
+export class UserMetric extends Metric {
+  static PROVIDERS =
+      <StaticProvider[]>[{provide: UserMetric, deps: [Options.USER_METRICS, WebDriverAdapter]}];
+
+  constructor(
+      @Inject(Options.USER_METRICS) private _userMetrics: {[key: string]: string},
+      private _wdAdapter: WebDriverAdapter) {
+    super();
+  }
+
+  /**
+   * Starts measuring
+   */
+  beginMeasure(): Promise<any> { return Promise.resolve(true); }
+
+  /**
+   * Ends measuring.
+   */
+  endMeasure(restart: boolean): Promise<{[key: string]: any}> {
+    let resolve: (result: any) => void;
+    let reject: (error: any) => void;
+    const promise = new Promise((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+    const adapter = this._wdAdapter;
+    const names = Object.keys(this._userMetrics);
+
+    function getAndClearValues() {
+      Promise.all(names.map(name => adapter.executeScript(`return window.${name}`)))
+          .then((values: any[]) => {
+            if (values.every(v => typeof v === 'number')) {
+              Promise.all(names.map(name => adapter.executeScript(`delete window.${name}`)))
+                  .then((_: any[]) => {
+                    const map: {[k: string]: any} = {};
+                    for (let i = 0, n = names.length; i < n; i++) {
+                      map[names[i]] = values[i];
+                    }
+                    resolve(map);
+                  }, reject);
+            } else {
+              <any>setTimeout(getAndClearValues, 100);
+            }
+          }, reject);
+    }
+    getAndClearValues();
+    return promise;
+  }
+
+  /**
+   * Describes the metrics provided by this metric implementation.
+   * (e.g. units, ...)
+   */
+  describe(): {[key: string]: any} { return this._userMetrics; }
+}
diff --git a/packages/benchpress/src/reporter.ts b/packages/benchpress/src/reporter.ts
new file mode 100644
index 000000000000..0a75e79614a5
--- /dev/null
+++ b/packages/benchpress/src/reporter.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
+ */
+
+import {MeasureValues} from './measure_values';
+
+/**
+ * A reporter reports measure values and the valid sample.
+ */
+export abstract class Reporter {
+  reportMeasureValues(values: MeasureValues): Promise<any> { throw new Error('NYI'); }
+
+  reportSample(completeSample: MeasureValues[], validSample: MeasureValues[]): Promise<any> {
+    throw new Error('NYI');
+  }
+}
diff --git a/packages/benchpress/src/reporter/console_reporter.ts b/packages/benchpress/src/reporter/console_reporter.ts
new file mode 100644
index 000000000000..165964001059
--- /dev/null
+++ b/packages/benchpress/src/reporter/console_reporter.ts
@@ -0,0 +1,91 @@
+/**
+ * @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, Injectable, InjectionToken} from '@angular/core';
+import {MeasureValues} from '../measure_values';
+import {Reporter} from '../reporter';
+import {SampleDescription} from '../sample_description';
+
+import {formatNum, formatStats, sortedProps} from './util';
+
+
+/**
+ * A reporter for the console
+ */
+@Injectable()
+export class ConsoleReporter extends Reporter {
+  static PRINT = new InjectionToken('ConsoleReporter.print');
+  static COLUMN_WIDTH = new InjectionToken('ConsoleReporter.columnWidth');
+  static PROVIDERS = [
+    {
+      provide: ConsoleReporter,
+      deps: [ConsoleReporter.COLUMN_WIDTH, SampleDescription, ConsoleReporter.PRINT]
+    },
+    {provide: ConsoleReporter.COLUMN_WIDTH, useValue: 18}, {
+      provide: ConsoleReporter.PRINT,
+      useValue: function(v: any) {
+        // tslint:disable-next-line:no-console
+        console.log(v);
+      }
+    }
+  ];
+
+  private static _lpad(value: string, columnWidth: number, fill = ' ') {
+    let result = '';
+    for (let i = 0; i < columnWidth - value.length; i++) {
+      result += fill;
+    }
+    return result + value;
+  }
+
+  private _metricNames: string[];
+
+  constructor(
+      @Inject(ConsoleReporter.COLUMN_WIDTH) private _columnWidth: number,
+      sampleDescription: SampleDescription,
+      @Inject(ConsoleReporter.PRINT) private _print: Function) {
+    super();
+    this._metricNames = sortedProps(sampleDescription.metrics);
+    this._printDescription(sampleDescription);
+  }
+
+  private _printDescription(sampleDescription: SampleDescription) {
+    this._print(`BENCHMARK ${sampleDescription.id}`);
+    this._print('Description:');
+    const props = sortedProps(sampleDescription.description);
+    props.forEach((prop) => { this._print(`- ${prop}: ${sampleDescription.description[prop]}`); });
+    this._print('Metrics:');
+    this._metricNames.forEach((metricName) => {
+      this._print(`- ${metricName}: ${sampleDescription.metrics[metricName]}`);
+    });
+    this._print('');
+    this._printStringRow(this._metricNames);
+    this._printStringRow(this._metricNames.map((_) => ''), '-');
+  }
+
+  reportMeasureValues(measureValues: MeasureValues): Promise<any> {
+    const formattedValues = this._metricNames.map(metricName => {
+      const value = measureValues.values[metricName];
+      return formatNum(value);
+    });
+    this._printStringRow(formattedValues);
+    return Promise.resolve(null);
+  }
+
+  reportSample(completeSample: MeasureValues[], validSamples: MeasureValues[]): Promise<any> {
+    this._printStringRow(this._metricNames.map((_) => ''), '=');
+    this._printStringRow(
+        this._metricNames.map(metricName => formatStats(validSamples, metricName)));
+    return Promise.resolve(null);
+  }
+
+  private _printStringRow(parts: any[], fill = ' ') {
+    this._print(
+        parts.map(part => ConsoleReporter._lpad(part, this._columnWidth, fill)).join(' | '));
+  }
+}
diff --git a/packages/benchpress/src/reporter/json_file_reporter.ts b/packages/benchpress/src/reporter/json_file_reporter.ts
new file mode 100644
index 000000000000..aaca71e9164a
--- /dev/null
+++ b/packages/benchpress/src/reporter/json_file_reporter.ts
@@ -0,0 +1,58 @@
+/**
+ * @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, Injectable, InjectionToken} from '@angular/core';
+
+import {Options} from '../common_options';
+import {MeasureValues} from '../measure_values';
+import {Reporter} from '../reporter';
+import {SampleDescription} from '../sample_description';
+
+import {formatStats, sortedProps} from './util';
+
+
+/**
+ * A reporter that writes results into a json file.
+ */
+@Injectable()
+export class JsonFileReporter extends Reporter {
+  static PATH = new InjectionToken('JsonFileReporter.path');
+  static PROVIDERS = [
+    {
+      provide: JsonFileReporter,
+      deps: [SampleDescription, JsonFileReporter.PATH, Options.WRITE_FILE, Options.NOW]
+    },
+    {provide: JsonFileReporter.PATH, useValue: '.'}
+  ];
+
+  constructor(
+      private _description: SampleDescription, @Inject(JsonFileReporter.PATH) private _path: string,
+      @Inject(Options.WRITE_FILE) private _writeFile: Function,
+      @Inject(Options.NOW) private _now: Function) {
+    super();
+  }
+
+  reportMeasureValues(measureValues: MeasureValues): Promise<any> { return Promise.resolve(null); }
+
+  reportSample(completeSample: MeasureValues[], validSample: MeasureValues[]): Promise<any> {
+    const stats: {[key: string]: string} = {};
+    sortedProps(this._description.metrics).forEach((metricName) => {
+      stats[metricName] = formatStats(validSample, metricName);
+    });
+    const content = JSON.stringify(
+        {
+          'description': this._description,
+          'stats': stats,
+          'completeSample': completeSample,
+          'validSample': validSample,
+        },
+        null, 2);
+    const filePath = `${this._path}/${this._description.id}_${this._now().getTime()}.json`;
+    return this._writeFile(filePath, content);
+  }
+}
diff --git a/packages/benchpress/src/reporter/multi_reporter.ts b/packages/benchpress/src/reporter/multi_reporter.ts
new file mode 100644
index 000000000000..07b507148ac2
--- /dev/null
+++ b/packages/benchpress/src/reporter/multi_reporter.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 {InjectionToken, Injector} from '@angular/core';
+
+import {MeasureValues} from '../measure_values';
+import {Reporter} from '../reporter';
+
+export class MultiReporter extends Reporter {
+  static provideWith(childTokens: any[]): any[] {
+    return [
+      {
+        provide: _CHILDREN,
+        useFactory: (injector: Injector) => childTokens.map(token => injector.get(token)),
+        deps: [Injector],
+      },
+      {
+        provide: MultiReporter,
+        useFactory: (children: Reporter[]) => new MultiReporter(children),
+        deps: [_CHILDREN]
+      }
+    ];
+  }
+
+  constructor(private _reporters: Reporter[]) { super(); }
+
+  reportMeasureValues(values: MeasureValues): Promise<any[]> {
+    return Promise.all(this._reporters.map(reporter => reporter.reportMeasureValues(values)));
+  }
+
+  reportSample(completeSample: MeasureValues[], validSample: MeasureValues[]): Promise<any[]> {
+    return Promise.all(
+        this._reporters.map(reporter => reporter.reportSample(completeSample, validSample)));
+  }
+}
+
+const _CHILDREN = new InjectionToken('MultiReporter.children');
diff --git a/packages/benchpress/src/reporter/util.ts b/packages/benchpress/src/reporter/util.ts
new file mode 100644
index 000000000000..db177a0d2707
--- /dev/null
+++ b/packages/benchpress/src/reporter/util.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {MeasureValues} from '../measure_values';
+import {Statistic} from '../statistic';
+
+export function formatNum(n: number) {
+  return n.toFixed(2);
+}
+
+export function sortedProps(obj: {[key: string]: any}) {
+  return Object.keys(obj).sort();
+}
+
+export function formatStats(validSamples: MeasureValues[], metricName: string): string {
+  const samples = validSamples.map(measureValues => measureValues.values[metricName]);
+  const mean = Statistic.calculateMean(samples);
+  const cv = Statistic.calculateCoefficientOfVariation(samples, mean);
+  const formattedMean = formatNum(mean);
+  // Note: Don't use the unicode character for +- as it might cause
+  // hickups for consoles...
+  return isNaN(cv) ? formattedMean : `${formattedMean}+-${Math.floor(cv)}%`;
+}
diff --git a/packages/benchpress/src/runner.ts b/packages/benchpress/src/runner.ts
new file mode 100644
index 000000000000..7ba28dbf8a33
--- /dev/null
+++ b/packages/benchpress/src/runner.ts
@@ -0,0 +1,111 @@
+/**
+ * @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, StaticProvider} from '@angular/core';
+
+import {Options} from './common_options';
+import {Metric} from './metric';
+import {MultiMetric} from './metric/multi_metric';
+import {PerflogMetric} from './metric/perflog_metric';
+import {UserMetric} from './metric/user_metric';
+import {Reporter} from './reporter';
+import {ConsoleReporter} from './reporter/console_reporter';
+import {MultiReporter} from './reporter/multi_reporter';
+import {SampleDescription} from './sample_description';
+import {SampleState, Sampler} from './sampler';
+import {Validator} from './validator';
+import {RegressionSlopeValidator} from './validator/regression_slope_validator';
+import {SizeValidator} from './validator/size_validator';
+import {WebDriverAdapter} from './web_driver_adapter';
+import {WebDriverExtension} from './web_driver_extension';
+import {ChromeDriverExtension} from './webdriver/chrome_driver_extension';
+import {FirefoxDriverExtension} from './webdriver/firefox_driver_extension';
+import {IOsDriverExtension} from './webdriver/ios_driver_extension';
+
+
+
+/**
+ * The Runner is the main entry point for executing a sample run.
+ * It provides defaults, creates the injector and calls the sampler.
+ */
+export class Runner {
+  constructor(private _defaultProviders: StaticProvider[] = []) {}
+
+  sample({id, execute, prepare, microMetrics, providers, userMetrics}: {
+    id: string,
+    execute?: Function,
+    prepare?: Function,
+    microMetrics?: {[key: string]: string},
+    providers?: StaticProvider[],
+    userMetrics?: {[key: string]: string}
+  }): Promise<SampleState> {
+    const sampleProviders: StaticProvider[] = [
+      _DEFAULT_PROVIDERS, this._defaultProviders, {provide: Options.SAMPLE_ID, useValue: id},
+      {provide: Options.EXECUTE, useValue: execute}
+    ];
+    if (prepare != null) {
+      sampleProviders.push({provide: Options.PREPARE, useValue: prepare});
+    }
+    if (microMetrics != null) {
+      sampleProviders.push({provide: Options.MICRO_METRICS, useValue: microMetrics});
+    }
+    if (userMetrics != null) {
+      sampleProviders.push({provide: Options.USER_METRICS, useValue: userMetrics});
+    }
+    if (providers != null) {
+      sampleProviders.push(providers);
+    }
+
+    const inj = Injector.create(sampleProviders);
+    const adapter: WebDriverAdapter = inj.get(WebDriverAdapter);
+
+    return Promise
+        .all([adapter.capabilities(), adapter.executeScript('return window.navigator.userAgent;')])
+        .then((args) => {
+          const capabilities = args[0];
+          const userAgent = args[1];
+
+          // This might still create instances twice. We are creating a new injector with all the
+          // providers.
+          // Only WebDriverAdapter is reused.
+          // TODO(vsavkin): consider changing it when toAsyncFactory is added back or when child
+          // injectors are handled better.
+          const injector = Injector.create([
+            sampleProviders, {provide: Options.CAPABILITIES, useValue: capabilities},
+            {provide: Options.USER_AGENT, useValue: userAgent},
+            {provide: WebDriverAdapter, useValue: adapter}
+          ]);
+
+          // TODO: With TypeScript 2.5 injector.get does not infer correctly the
+          // return type. Remove 'any' and investigate the issue.
+          const sampler = injector.get(Sampler) as any;
+          return sampler.sample();
+        });
+  }
+}
+
+const _DEFAULT_PROVIDERS = [
+  Options.DEFAULT_PROVIDERS,
+  Sampler.PROVIDERS,
+  ConsoleReporter.PROVIDERS,
+  RegressionSlopeValidator.PROVIDERS,
+  SizeValidator.PROVIDERS,
+  ChromeDriverExtension.PROVIDERS,
+  FirefoxDriverExtension.PROVIDERS,
+  IOsDriverExtension.PROVIDERS,
+  PerflogMetric.PROVIDERS,
+  UserMetric.PROVIDERS,
+  SampleDescription.PROVIDERS,
+  MultiReporter.provideWith([ConsoleReporter]),
+  MultiMetric.provideWith([PerflogMetric, UserMetric]),
+  {provide: Reporter, useExisting: MultiReporter},
+  {provide: Validator, useExisting: RegressionSlopeValidator},
+  WebDriverExtension.provideFirstSupported(
+      [ChromeDriverExtension, FirefoxDriverExtension, IOsDriverExtension]),
+  {provide: Metric, useExisting: MultiMetric},
+];
diff --git a/packages/benchpress/src/sample_description.ts b/packages/benchpress/src/sample_description.ts
new file mode 100644
index 000000000000..ccecf159b575
--- /dev/null
+++ b/packages/benchpress/src/sample_description.ts
@@ -0,0 +1,49 @@
+/**
+ * @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';
+
+import {Options} from './common_options';
+import {Metric} from './metric';
+import {Validator} from './validator';
+
+
+/**
+ * SampleDescription merges all available descriptions about a sample
+ */
+export class SampleDescription {
+  static PROVIDERS = [{
+    provide: SampleDescription,
+    useFactory:
+        (metric: Metric, id: string, forceGc: boolean, userAgent: string, validator: Validator,
+         defaultDesc: {[key: string]: string}, userDesc: {[key: string]: string}) =>
+            new SampleDescription(
+                id,
+                [
+                  {'forceGc': forceGc, 'userAgent': userAgent}, validator.describe(), defaultDesc,
+                  userDesc
+                ],
+                metric.describe()),
+    deps: [
+      Metric, Options.SAMPLE_ID, Options.FORCE_GC, Options.USER_AGENT, Validator,
+      Options.DEFAULT_DESCRIPTION, Options.SAMPLE_DESCRIPTION
+    ]
+  }];
+  description: {[key: string]: any};
+
+  constructor(
+      public id: string, descriptions: Array<{[key: string]: any}>,
+      public metrics: {[key: string]: any}) {
+    this.description = {};
+    descriptions.forEach(description => {
+      Object.keys(description).forEach(prop => { this.description[prop] = description[prop]; });
+    });
+  }
+
+  toJson() { return {'id': this.id, 'description': this.description, 'metrics': this.metrics}; }
+}
diff --git a/packages/benchpress/src/sampler.ts b/packages/benchpress/src/sampler.ts
new file mode 100644
index 000000000000..720fe621a535
--- /dev/null
+++ b/packages/benchpress/src/sampler.ts
@@ -0,0 +1,89 @@
+/**
+ * @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, Injectable, StaticProvider} from '@angular/core';
+
+import {Options} from './common_options';
+import {MeasureValues} from './measure_values';
+import {Metric} from './metric';
+import {Reporter} from './reporter';
+import {Validator} from './validator';
+import {WebDriverAdapter} from './web_driver_adapter';
+
+
+/**
+ * The Sampler owns the sample loop:
+ * 1. calls the prepare/execute callbacks,
+ * 2. gets data from the metric
+ * 3. asks the validator for a valid sample
+ * 4. reports the new data to the reporter
+ * 5. loop until there is a valid sample
+ */
+@Injectable()
+export class Sampler {
+  static PROVIDERS = <StaticProvider[]>[{
+    provide: Sampler,
+    deps: [
+      WebDriverAdapter, Metric, Reporter, Validator, Options.PREPARE, Options.EXECUTE, Options.NOW
+    ]
+  }];
+  constructor(
+      private _driver: WebDriverAdapter, private _metric: Metric, private _reporter: Reporter,
+      private _validator: Validator, @Inject(Options.PREPARE) private _prepare: Function,
+      @Inject(Options.EXECUTE) private _execute: Function,
+      @Inject(Options.NOW) private _now: Function) {}
+
+  sample(): Promise<SampleState> {
+    const loop = (lastState: SampleState): Promise<SampleState> => {
+      return this._iterate(lastState).then((newState) => {
+        if (newState.validSample != null) {
+          return newState;
+        } else {
+          return loop(newState);
+        }
+      });
+    };
+    return loop(new SampleState([], null));
+  }
+
+  private _iterate(lastState: SampleState): Promise<SampleState> {
+    let resultPromise: Promise<SampleState|null>;
+    if (this._prepare !== Options.NO_PREPARE) {
+      resultPromise = this._driver.waitFor(this._prepare);
+    } else {
+      resultPromise = Promise.resolve(null);
+    }
+    if (this._prepare !== Options.NO_PREPARE || lastState.completeSample.length === 0) {
+      resultPromise = resultPromise.then((_) => this._metric.beginMeasure());
+    }
+    return resultPromise.then((_) => this._driver.waitFor(this._execute))
+        .then((_) => this._metric.endMeasure(this._prepare === Options.NO_PREPARE))
+        .then((measureValues) => {
+          if (!!measureValues['invalid']) {
+            return lastState;
+          }
+          return this._report(lastState, measureValues);
+        });
+  }
+
+  private _report(state: SampleState, metricValues: {[key: string]: any}): Promise<SampleState> {
+    const measureValues = new MeasureValues(state.completeSample.length, this._now(), metricValues);
+    const completeSample = state.completeSample.concat([measureValues]);
+    const validSample = this._validator.validate(completeSample);
+    let resultPromise = this._reporter.reportMeasureValues(measureValues);
+    if (validSample != null) {
+      resultPromise =
+          resultPromise.then((_) => this._reporter.reportSample(completeSample, validSample));
+    }
+    return resultPromise.then((_) => new SampleState(completeSample, validSample));
+  }
+}
+
+export class SampleState {
+  constructor(public completeSample: MeasureValues[], public validSample: MeasureValues[]|null) {}
+}
diff --git a/packages/benchpress/src/statistic.ts b/packages/benchpress/src/statistic.ts
new file mode 100644
index 000000000000..a82836b3a71e
--- /dev/null
+++ b/packages/benchpress/src/statistic.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
+ */
+
+export class Statistic {
+  static calculateCoefficientOfVariation(sample: number[], mean: number) {
+    return Statistic.calculateStandardDeviation(sample, mean) / mean * 100;
+  }
+
+  static calculateMean(samples: number[]) {
+    let total = 0;
+    // TODO: use reduce
+    samples.forEach(x => total += x);
+    return total / samples.length;
+  }
+
+  static calculateStandardDeviation(samples: number[], mean: number) {
+    let deviation = 0;
+    // TODO: use reduce
+    samples.forEach(x => deviation += Math.pow(x - mean, 2));
+    deviation = deviation / (samples.length);
+    deviation = Math.sqrt(deviation);
+    return deviation;
+  }
+
+  static calculateRegressionSlope(
+      xValues: number[], xMean: number, yValues: number[], yMean: number) {
+    // See http://en.wikipedia.org/wiki/Simple_linear_regression
+    let dividendSum = 0;
+    let divisorSum = 0;
+    for (let i = 0; i < xValues.length; i++) {
+      dividendSum += (xValues[i] - xMean) * (yValues[i] - yMean);
+      divisorSum += Math.pow(xValues[i] - xMean, 2);
+    }
+    return dividendSum / divisorSum;
+  }
+}
diff --git a/packages/benchpress/src/validator.ts b/packages/benchpress/src/validator.ts
new file mode 100644
index 000000000000..536c22949d6e
--- /dev/null
+++ b/packages/benchpress/src/validator.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 {MeasureValues} from './measure_values';
+
+/**
+ * A Validator calculates a valid sample out of the complete sample.
+ * A valid sample is a sample that represents the population that should be observed
+ * in the correct way.
+ */
+export abstract class Validator {
+  /**
+   * Calculates a valid sample out of the complete sample
+   */
+  validate(completeSample: MeasureValues[]): MeasureValues[]|null { throw new Error('NYI'); }
+
+  /**
+   * Returns a Map that describes the properties of the validator
+   * (e.g. sample size, ...)
+   */
+  describe(): {[key: string]: any} { throw new Error('NYI'); }
+}
diff --git a/packages/benchpress/src/validator/regression_slope_validator.ts b/packages/benchpress/src/validator/regression_slope_validator.ts
new file mode 100644
index 000000000000..8f590e2b2411
--- /dev/null
+++ b/packages/benchpress/src/validator/regression_slope_validator.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 {Inject, Injectable, InjectionToken} from '@angular/core';
+
+import {MeasureValues} from '../measure_values';
+import {Statistic} from '../statistic';
+import {Validator} from '../validator';
+
+/**
+ * A validator that checks the regression slope of a specific metric.
+ * Waits for the regression slope to be >=0.
+ */
+@Injectable()
+export class RegressionSlopeValidator extends Validator {
+  static SAMPLE_SIZE = new InjectionToken('RegressionSlopeValidator.sampleSize');
+  static METRIC = new InjectionToken('RegressionSlopeValidator.metric');
+  static PROVIDERS = [
+    {
+      provide: RegressionSlopeValidator,
+      deps: [RegressionSlopeValidator.SAMPLE_SIZE, RegressionSlopeValidator.METRIC]
+    },
+    {provide: RegressionSlopeValidator.SAMPLE_SIZE, useValue: 10},
+    {provide: RegressionSlopeValidator.METRIC, useValue: 'scriptTime'}
+  ];
+
+  constructor(
+      @Inject(RegressionSlopeValidator.SAMPLE_SIZE) private _sampleSize: number,
+      @Inject(RegressionSlopeValidator.METRIC) private _metric: string) {
+    super();
+  }
+
+  describe(): {[key: string]: any} {
+    return {'sampleSize': this._sampleSize, 'regressionSlopeMetric': this._metric};
+  }
+
+  validate(completeSample: MeasureValues[]): MeasureValues[]|null {
+    if (completeSample.length >= this._sampleSize) {
+      const latestSample =
+          completeSample.slice(completeSample.length - this._sampleSize, completeSample.length);
+      const xValues: number[] = [];
+      const yValues: number[] = [];
+      for (let i = 0; i < latestSample.length; i++) {
+        // For now, we only use the array index as x value.
+        // TODO(tbosch): think about whether we should use time here instead
+        xValues.push(i);
+        yValues.push(latestSample[i].values[this._metric]);
+      }
+      const regressionSlope = Statistic.calculateRegressionSlope(
+          xValues, Statistic.calculateMean(xValues), yValues, Statistic.calculateMean(yValues));
+      return regressionSlope >= 0 ? latestSample : null;
+    } else {
+      return null;
+    }
+  }
+}
diff --git a/packages/benchpress/src/validator/size_validator.ts b/packages/benchpress/src/validator/size_validator.ts
new file mode 100644
index 000000000000..7d546c186a43
--- /dev/null
+++ b/packages/benchpress/src/validator/size_validator.ts
@@ -0,0 +1,36 @@
+/**
+ * @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, Injectable, InjectionToken} from '@angular/core';
+
+import {MeasureValues} from '../measure_values';
+import {Validator} from '../validator';
+
+/**
+ * A validator that waits for the sample to have a certain size.
+ */
+@Injectable()
+export class SizeValidator extends Validator {
+  static SAMPLE_SIZE = new InjectionToken('SizeValidator.sampleSize');
+  static PROVIDERS = [
+    {provide: SizeValidator, deps: [SizeValidator.SAMPLE_SIZE]},
+    {provide: SizeValidator.SAMPLE_SIZE, useValue: 10}
+  ];
+
+  constructor(@Inject(SizeValidator.SAMPLE_SIZE) private _sampleSize: number) { super(); }
+
+  describe(): {[key: string]: any} { return {'sampleSize': this._sampleSize}; }
+
+  validate(completeSample: MeasureValues[]): MeasureValues[]|null {
+    if (completeSample.length >= this._sampleSize) {
+      return completeSample.slice(completeSample.length - this._sampleSize, completeSample.length);
+    } else {
+      return null;
+    }
+  }
+}
diff --git a/packages/benchpress/src/web_driver_adapter.ts b/packages/benchpress/src/web_driver_adapter.ts
new file mode 100644
index 000000000000..d43e022f0e47
--- /dev/null
+++ b/packages/benchpress/src/web_driver_adapter.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
+ */
+
+
+
+/**
+ * A WebDriverAdapter bridges API differences between different WebDriver clients,
+ * e.g. JS vs Dart Async vs Dart Sync webdriver.
+ * Needs one implementation for every supported WebDriver client.
+ */
+export abstract class WebDriverAdapter {
+  waitFor(callback: Function): Promise<any> { throw new Error('NYI'); }
+  executeScript(script: string): Promise<any> { throw new Error('NYI'); }
+  executeAsyncScript(script: string): Promise<any> { throw new Error('NYI'); }
+  capabilities(): Promise<{[key: string]: any}> { throw new Error('NYI'); }
+  logs(type: string): Promise<any[]> { throw new Error('NYI'); }
+}
diff --git a/packages/benchpress/src/web_driver_extension.ts b/packages/benchpress/src/web_driver_extension.ts
new file mode 100644
index 000000000000..f5d173976381
--- /dev/null
+++ b/packages/benchpress/src/web_driver_extension.ts
@@ -0,0 +1,104 @@
+/**
+ * @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, Injector} from '@angular/core';
+
+import {Options} from './common_options';
+
+export type PerfLogEvent = {
+  [key: string]: any
+} & {
+  ph?: 'X' | 'B' | 'E' | 'I',
+  ts?: number,
+  dur?: number,
+  name?: string,
+  pid?: string,
+  args?: {
+    encodedDataLength?: number,
+    usedHeapSize?: number,
+    majorGc?: boolean,
+    url?: string,
+    method?: string
+  }
+};
+
+/**
+ * A WebDriverExtension implements extended commands of the webdriver protocol
+ * for a given browser, independent of the WebDriverAdapter.
+ * Needs one implementation for every supported Browser.
+ */
+export abstract class WebDriverExtension {
+  static provideFirstSupported(childTokens: any[]): any[] {
+    const res = [
+      {
+        provide: _CHILDREN,
+        useFactory: (injector: Injector) => childTokens.map(token => injector.get(token)),
+        deps: [Injector]
+      },
+      {
+        provide: WebDriverExtension,
+        useFactory: (children: WebDriverExtension[], capabilities: {[key: string]: any}) => {
+          let delegate: WebDriverExtension = undefined !;
+          children.forEach(extension => {
+            if (extension.supports(capabilities)) {
+              delegate = extension;
+            }
+          });
+          if (!delegate) {
+            throw new Error('Could not find a delegate for given capabilities!');
+          }
+          return delegate;
+        },
+        deps: [_CHILDREN, Options.CAPABILITIES]
+      }
+    ];
+    return res;
+  }
+
+  gc(): Promise<any> { throw new Error('NYI'); }
+
+  timeBegin(name: string): Promise<any> { throw new Error('NYI'); }
+
+  timeEnd(name: string, restartName: string|null): Promise<any> { throw new Error('NYI'); }
+
+  /**
+   * Format:
+   * - cat: category of the event
+   * - name: event name: 'script', 'gc', 'render', ...
+   * - ph: phase: 'B' (begin), 'E' (end), 'X' (Complete event), 'I' (Instant event)
+   * - ts: timestamp in ms, e.g. 12345
+   * - pid: process id
+   * - args: arguments, e.g. {heapSize: 1234}
+   *
+   * Based on [Chrome Trace Event
+   *Format](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit)
+   **/
+  readPerfLog(): Promise<PerfLogEvent[]> { throw new Error('NYI'); }
+
+  perfLogFeatures(): PerfLogFeatures { throw new Error('NYI'); }
+
+  supports(capabilities: {[key: string]: any}): boolean { return true; }
+}
+
+export class PerfLogFeatures {
+  render: boolean;
+  gc: boolean;
+  frameCapture: boolean;
+  userTiming: boolean;
+
+  constructor(
+      {render = false, gc = false, frameCapture = false, userTiming = false}:
+          {render?: boolean, gc?: boolean, frameCapture?: boolean, userTiming?: boolean} = {}) {
+    this.render = render;
+    this.gc = gc;
+    this.frameCapture = frameCapture;
+    this.userTiming = userTiming;
+  }
+}
+
+const _CHILDREN = new InjectionToken('WebDriverExtension.children');
diff --git a/packages/benchpress/src/webdriver/chrome_driver_extension.ts b/packages/benchpress/src/webdriver/chrome_driver_extension.ts
new file mode 100644
index 000000000000..c255f2ff3387
--- /dev/null
+++ b/packages/benchpress/src/webdriver/chrome_driver_extension.ts
@@ -0,0 +1,218 @@
+/**
+ * @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, Injectable, StaticProvider} from '@angular/core';
+
+import {Options} from '../common_options';
+import {WebDriverAdapter} from '../web_driver_adapter';
+import {PerfLogEvent, PerfLogFeatures, WebDriverExtension} from '../web_driver_extension';
+
+/**
+ * Set the following 'traceCategories' to collect metrics in Chrome:
+ * 'v8,blink.console,disabled-by-default-devtools.timeline,devtools.timeline,blink.user_timing'
+ *
+ * In order to collect the frame rate related metrics, add 'benchmark'
+ * to the list above.
+ */
+@Injectable()
+export class ChromeDriverExtension extends WebDriverExtension {
+  static PROVIDERS = <StaticProvider>[{
+    provide: ChromeDriverExtension,
+    deps: [WebDriverAdapter, Options.USER_AGENT]
+  }];
+
+  private _majorChromeVersion: number;
+  private _firstRun = true;
+
+  constructor(private _driver: WebDriverAdapter, @Inject(Options.USER_AGENT) userAgent: string) {
+    super();
+    this._majorChromeVersion = this._parseChromeVersion(userAgent);
+  }
+
+  private _parseChromeVersion(userAgent: string): number {
+    if (!userAgent) {
+      return -1;
+    }
+    let v = userAgent.split(/Chrom(e|ium)\//g)[2];
+    if (!v) {
+      return -1;
+    }
+    v = v.split('.')[0];
+    if (!v) {
+      return -1;
+    }
+    return parseInt(v, 10);
+  }
+
+  gc() { return this._driver.executeScript('window.gc()'); }
+
+  async 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.
+      await this._driver.logs('performance');
+    }
+    return this._driver.executeScript(`console.time('${name}');`);
+  }
+
+  timeEnd(name: string, restartName: string|null = null): Promise<any> {
+    let script = `console.timeEnd('${name}');`;
+    if (restartName) {
+      script += `console.time('${restartName}');`;
+    }
+    return this._driver.executeScript(script);
+  }
+
+  // See [Chrome Trace Event
+  // Format](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit)
+  readPerfLog(): Promise<PerfLogEvent[]> {
+    // TODO(tbosch): Chromedriver bug https://code.google.com/p/chromedriver/issues/detail?id=1098
+    // Need to execute at least one command so that the browser logs can be read out!
+    return this._driver.executeScript('1+1')
+        .then((_) => this._driver.logs('performance'))
+        .then((entries) => {
+          const events: PerfLogEvent[] = [];
+          entries.forEach((entry: any) => {
+            const message = JSON.parse(entry['message'])['message'];
+            if (message['method'] === 'Tracing.dataCollected') {
+              events.push(message['params']);
+            }
+            if (message['method'] === 'Tracing.bufferUsage') {
+              throw new Error('The DevTools trace buffer filled during the test!');
+            }
+          });
+          return this._convertPerfRecordsToEvents(events);
+        });
+  }
+
+  private _convertPerfRecordsToEvents(
+      chromeEvents: Array<{[key: string]: any}>, normalizedEvents: PerfLogEvent[]|null = null) {
+    if (!normalizedEvents) {
+      normalizedEvents = [];
+    }
+    chromeEvents.forEach((event) => {
+      const categories = this._parseCategories(event['cat']);
+      const normalizedEvent = this._convertEvent(event, categories);
+      if (normalizedEvent != null) normalizedEvents !.push(normalizedEvent);
+    });
+    return normalizedEvents;
+  }
+
+  private _convertEvent(event: {[key: string]: any}, categories: string[]) {
+    const name = event['name'];
+    const args = event['args'];
+    if (this._isEvent(categories, name, ['blink.console'])) {
+      return normalizeEvent(event, {'name': name});
+    } else if (this._isEvent(
+                   categories, name, ['benchmark'],
+                   'BenchmarkInstrumentation::ImplThreadRenderingStats')) {
+      // TODO(goderbauer): Instead of BenchmarkInstrumentation::ImplThreadRenderingStats the
+      // 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)
+      //   3rd choice: BenchmarkInstrumentation::ImplThreadRenderingStats - fallback event that is
+      //               always available if something is rendered
+      const frameCount = event['args']['data']['frame_count'];
+      if (frameCount > 1) {
+        throw new Error('multi-frame render stats not supported');
+      }
+      if (frameCount == 1) {
+        return normalizeEvent(event, {'name': 'frame'});
+      }
+    } else if (
+        this._isEvent(categories, name, ['disabled-by-default-devtools.timeline'], 'Rasterize') ||
+        this._isEvent(
+            categories, name, ['disabled-by-default-devtools.timeline'], 'CompositeLayers')) {
+      return normalizeEvent(event, {'name': 'render'});
+    } else if (this._isEvent(categories, name, ['devtools.timeline', 'v8'], 'MajorGC')) {
+      const normArgs = {
+        'majorGc': true,
+        'usedHeapSize': args['usedHeapSizeAfter'] !== undefined ? args['usedHeapSizeAfter'] :
+                                                                  args['usedHeapSizeBefore']
+      };
+      return normalizeEvent(event, {'name': 'gc', 'args': normArgs});
+    } else if (this._isEvent(categories, name, ['devtools.timeline', 'v8'], 'MinorGC')) {
+      const normArgs = {
+        'majorGc': false,
+        'usedHeapSize': args['usedHeapSizeAfter'] !== undefined ? args['usedHeapSizeAfter'] :
+                                                                  args['usedHeapSizeBefore']
+      };
+      return normalizeEvent(event, {'name': 'gc', 'args': normArgs});
+    } else if (
+        this._isEvent(categories, name, ['devtools.timeline'], 'FunctionCall') &&
+        (!args || !args['data'] ||
+         (args['data']['scriptName'] !== 'InjectedScript' && args['data']['scriptName'] !== ''))) {
+      return normalizeEvent(event, {'name': 'script'});
+    } else if (this._isEvent(categories, name, ['devtools.timeline'], 'EvaluateScript')) {
+      return normalizeEvent(event, {'name': 'script'});
+    } else if (this._isEvent(
+                   categories, name, ['devtools.timeline', 'blink'], 'UpdateLayoutTree')) {
+      return normalizeEvent(event, {'name': 'render'});
+    } else if (
+        this._isEvent(categories, name, ['devtools.timeline'], 'UpdateLayerTree') ||
+        this._isEvent(categories, name, ['devtools.timeline'], 'Layout') ||
+        this._isEvent(categories, name, ['devtools.timeline'], 'Paint')) {
+      return normalizeEvent(event, {'name': 'render'});
+    } else if (this._isEvent(categories, name, ['devtools.timeline'], 'ResourceReceivedData')) {
+      const normArgs = {'encodedDataLength': args['data']['encodedDataLength']};
+      return normalizeEvent(event, {'name': 'receivedData', 'args': normArgs});
+    } else if (this._isEvent(categories, name, ['devtools.timeline'], 'ResourceSendRequest')) {
+      const data = args['data'];
+      const normArgs = {'url': data['url'], 'method': data['requestMethod']};
+      return normalizeEvent(event, {'name': 'sendRequest', 'args': normArgs});
+    } else if (this._isEvent(categories, name, ['blink.user_timing'], 'navigationStart')) {
+      return normalizeEvent(event, {'name': 'navigationStart'});
+    }
+    return null;  // nothing useful in this event
+  }
+
+  private _parseCategories(categories: string): string[] { return categories.split(','); }
+
+  private _isEvent(
+      eventCategories: string[], eventName: string, expectedCategories: string[],
+      expectedName: string|null = null): boolean {
+    const hasCategories = expectedCategories.reduce(
+        (value, cat) => value && eventCategories.indexOf(cat) !== -1, true);
+    return !expectedName ? hasCategories : hasCategories && eventName === expectedName;
+  }
+
+  perfLogFeatures(): PerfLogFeatures {
+    return new PerfLogFeatures({render: true, gc: true, frameCapture: true, userTiming: true});
+  }
+
+  supports(capabilities: {[key: string]: any}): boolean {
+    return this._majorChromeVersion >= 44 && capabilities['browserName'].toLowerCase() === 'chrome';
+  }
+}
+
+function normalizeEvent(chromeEvent: {[key: string]: any}, data: PerfLogEvent): PerfLogEvent {
+  let ph = chromeEvent['ph'].toUpperCase();
+  if (ph === 'S') {
+    ph = 'B';
+  } else if (ph === 'F') {
+    ph = 'E';
+  } else if (ph === 'R') {
+    // mark events from navigation timing
+    ph = 'I';
+  }
+  const result: {[key: string]: any} =
+      {'pid': chromeEvent['pid'], 'ph': ph, 'cat': 'timeline', 'ts': chromeEvent['ts'] / 1000};
+  if (ph === 'X') {
+    let dur = chromeEvent['dur'];
+    if (dur === undefined) {
+      dur = chromeEvent['tdur'];
+    }
+    result['dur'] = !dur ? 0.0 : dur / 1000;
+  }
+  for (const prop in data) {
+    result[prop] = data[prop];
+  }
+  return result;
+}
diff --git a/packages/benchpress/src/webdriver/firefox_driver_extension.ts b/packages/benchpress/src/webdriver/firefox_driver_extension.ts
new file mode 100644
index 000000000000..2d3474250561
--- /dev/null
+++ b/packages/benchpress/src/webdriver/firefox_driver_extension.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 {Injectable} from '@angular/core';
+
+import {WebDriverAdapter} from '../web_driver_adapter';
+import {PerfLogEvent, PerfLogFeatures, WebDriverExtension} from '../web_driver_extension';
+
+@Injectable()
+export class FirefoxDriverExtension extends WebDriverExtension {
+  static PROVIDERS = [{provide: FirefoxDriverExtension, deps: [WebDriverAdapter]}];
+
+  private _profilerStarted: boolean;
+
+  constructor(private _driver: WebDriverAdapter) {
+    super();
+    this._profilerStarted = false;
+  }
+
+  gc() { return this._driver.executeScript('window.forceGC()'); }
+
+  timeBegin(name: string): Promise<any> {
+    if (!this._profilerStarted) {
+      this._profilerStarted = true;
+      this._driver.executeScript('window.startProfiler();');
+    }
+    return this._driver.executeScript('window.markStart("' + name + '");');
+  }
+
+  timeEnd(name: string, restartName: string|null = null): Promise<any> {
+    let script = 'window.markEnd("' + name + '");';
+    if (restartName != null) {
+      script += 'window.markStart("' + restartName + '");';
+    }
+    return this._driver.executeScript(script);
+  }
+
+  readPerfLog(): Promise<PerfLogEvent[]> {
+    return this._driver.executeAsyncScript('var cb = arguments[0]; window.getProfile(cb);');
+  }
+
+  perfLogFeatures(): PerfLogFeatures { return new PerfLogFeatures({render: true, gc: true}); }
+
+  supports(capabilities: {[key: string]: any}): boolean {
+    return capabilities['browserName'].toLowerCase() === 'firefox';
+  }
+}
diff --git a/packages/benchpress/src/webdriver/ios_driver_extension.ts b/packages/benchpress/src/webdriver/ios_driver_extension.ts
new file mode 100644
index 000000000000..fefef6314c00
--- /dev/null
+++ b/packages/benchpress/src/webdriver/ios_driver_extension.ts
@@ -0,0 +1,126 @@
+/**
+ * @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 {WebDriverAdapter} from '../web_driver_adapter';
+import {PerfLogEvent, PerfLogFeatures, WebDriverExtension} from '../web_driver_extension';
+
+@Injectable()
+export class IOsDriverExtension extends WebDriverExtension {
+  static PROVIDERS = [{provide: IOsDriverExtension, deps: [WebDriverAdapter]}];
+
+  constructor(private _driver: WebDriverAdapter) { super(); }
+
+  gc(): Promise<any> { throw new Error('Force GC is not supported on iOS'); }
+
+  timeBegin(name: string): Promise<any> {
+    return this._driver.executeScript(`console.time('${name}');`);
+  }
+
+  timeEnd(name: string, restartName: string|null = null): Promise<any> {
+    let script = `console.timeEnd('${name}');`;
+    if (restartName != null) {
+      script += `console.time('${restartName}');`;
+    }
+    return this._driver.executeScript(script);
+  }
+
+  // See https://github.com/WebKit/webkit/tree/master/Source/WebInspectorUI/Versions
+  readPerfLog() {
+    // TODO(tbosch): Bug in IOsDriver: Need to execute at least one command
+    // so that the browser logs can be read out!
+    return this._driver.executeScript('1+1')
+        .then((_) => this._driver.logs('performance'))
+        .then((entries) => {
+          const records: any[] = [];
+          entries.forEach((entry: any) => {
+            const message = JSON.parse(entry['message'])['message'];
+            if (message['method'] === 'Timeline.eventRecorded') {
+              records.push(message['params']['record']);
+            }
+          });
+          return this._convertPerfRecordsToEvents(records);
+        });
+  }
+
+  /** @internal */
+  private _convertPerfRecordsToEvents(records: any[], events: PerfLogEvent[]|null = null) {
+    if (!events) {
+      events = [];
+    }
+    records.forEach((record) => {
+      let endEvent: PerfLogEvent|null = null;
+      const type = record['type'];
+      const data = record['data'];
+      const startTime = record['startTime'];
+      const endTime = record['endTime'];
+
+      if (type === 'FunctionCall' && (data == null || data['scriptName'] !== 'InjectedScript')) {
+        events !.push(createStartEvent('script', startTime));
+        endEvent = createEndEvent('script', endTime);
+      } else if (type === 'Time') {
+        events !.push(createMarkStartEvent(data['message'], startTime));
+      } else if (type === 'TimeEnd') {
+        events !.push(createMarkEndEvent(data['message'], startTime));
+      } else if (
+          type === 'RecalculateStyles' || type === 'Layout' || type === 'UpdateLayerTree' ||
+          type === 'Paint' || type === 'Rasterize' || type === 'CompositeLayers') {
+        events !.push(createStartEvent('render', startTime));
+        endEvent = createEndEvent('render', endTime);
+      }
+      // Note: ios used to support GCEvent up until iOS 6 :-(
+      if (record['children'] != null) {
+        this._convertPerfRecordsToEvents(record['children'], events);
+      }
+      if (endEvent != null) {
+        events !.push(endEvent);
+      }
+    });
+    return events;
+  }
+
+  perfLogFeatures(): PerfLogFeatures { return new PerfLogFeatures({render: true}); }
+
+  supports(capabilities: {[key: string]: any}): boolean {
+    return capabilities['browserName'].toLowerCase() === 'safari';
+  }
+}
+
+function createEvent(
+    ph: 'X' | 'B' | 'E' | 'B' | 'E', name: string, time: number, args: any = null) {
+  const result: PerfLogEvent = {
+    'cat': 'timeline',
+    'name': name,
+    'ts': time,
+    'ph': ph,
+    // The ios protocol does not support the notions of multiple processes in
+    // the perflog...
+    'pid': 'pid0'
+  };
+  if (args != null) {
+    result['args'] = args;
+  }
+  return result;
+}
+
+function createStartEvent(name: string, time: number, args: any = null) {
+  return createEvent('B', name, time, args);
+}
+
+function createEndEvent(name: string, time: number, args: any = null) {
+  return createEvent('E', name, time, args);
+}
+
+function createMarkStartEvent(name: string, time: number) {
+  return createEvent('B', name, time);
+}
+
+function createMarkEndEvent(name: string, time: number) {
+  return createEvent('E', name, time);
+}
diff --git a/packages/benchpress/src/webdriver/selenium_webdriver_adapter.ts b/packages/benchpress/src/webdriver/selenium_webdriver_adapter.ts
new file mode 100644
index 000000000000..3f7f7c4aa1fd
--- /dev/null
+++ b/packages/benchpress/src/webdriver/selenium_webdriver_adapter.ts
@@ -0,0 +1,76 @@
+/**
+ * @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 {StaticProvider} from '@angular/core';
+
+import {WebDriverAdapter} from '../web_driver_adapter';
+
+
+/**
+ * Adapter for the selenium-webdriver.
+ */
+export class SeleniumWebDriverAdapter extends WebDriverAdapter {
+  static PROTRACTOR_PROVIDERS = <StaticProvider[]>[{
+    provide: WebDriverAdapter,
+    useFactory: () => new SeleniumWebDriverAdapter((<any>global).browser),
+    deps: []
+  }];
+
+  constructor(private _driver: any) { super(); }
+
+  waitFor(callback: () => any): Promise<any> { return this._driver.call(callback); }
+
+  executeScript(script: string): Promise<any> { return this._driver.executeScript(script); }
+
+  executeAsyncScript(script: string): Promise<any> {
+    return this._driver.executeAsyncScript(script);
+  }
+
+  capabilities(): Promise<{[key: string]: any}> {
+    return this._driver.getCapabilities().then((capsObject: any) => {
+      const localData: {[key: string]: any} = {};
+      for (const key of Array.from((<Map<string, any>>capsObject).keys())) {
+        localData[key] = capsObject.get(key);
+      }
+      return localData;
+    });
+  }
+
+  logs(type: string): Promise<any> {
+    // Needed as selenium-webdriver does not forward
+    // performance logs in the correct way via manage().logs
+    return this._driver.schedule(
+        new Command('getLog').setParameter('type', type),
+        'WebDriver.manage().logs().get(' + type + ')');
+  }
+}
+
+/**
+ * Copy of the `Command` class of webdriver as
+ * it is not exposed via index.js in selenium-webdriver.
+ */
+class Command {
+  private parameters_: {[key: string]: any} = {};
+  constructor(private name_: string) {}
+
+  getName() { return this.name_; }
+
+  setParameter(name: string, value: any) {
+    this.parameters_[name] = value;
+    return this;
+  }
+
+  setParameters(parameters: {[key: string]: any}) {
+    this.parameters_ = parameters;
+    return this;
+  }
+
+  getParameter(key: string) { return this.parameters_[key]; }
+
+  getParameters() { return this.parameters_; }
+}
diff --git a/packages/benchpress/test/firefox_extension/conf.ts b/packages/benchpress/test/firefox_extension/conf.ts
new file mode 100644
index 000000000000..4be1898f2bea
--- /dev/null
+++ b/packages/benchpress/test/firefox_extension/conf.ts
@@ -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
+ */
+
+require('core-js');
+require('reflect-metadata');
+const testHelper = require('../../src/firefox_extension/lib/test_helper.js');
+
+exports.config = {
+  specs: ['spec.js', 'sample_benchmark.js'],
+
+  framework: 'jasmine2',
+
+  jasmineNodeOpts: {showColors: true, defaultTimeoutInterval: 1200000},
+
+  getMultiCapabilities: function() { return testHelper.getFirefoxProfileWithExtension(); }
+};
diff --git a/packages/benchpress/test/firefox_extension/parser_util_spec.ts b/packages/benchpress/test/firefox_extension/parser_util_spec.ts
new file mode 100644
index 000000000000..1669d0703651
--- /dev/null
+++ b/packages/benchpress/test/firefox_extension/parser_util_spec.ts
@@ -0,0 +1,100 @@
+/**
+ * @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 {convertPerfProfileToEvents} from '../../src/firefox_extension/lib/parser_util';
+
+function assertEventsEqual(actualEvents: any[], expectedEvents: any[]) {
+  expect(actualEvents.length == expectedEvents.length);
+  for (let i = 0; i < actualEvents.length; ++i) {
+    const actualEvent = actualEvents[i];
+    const expectedEvent = expectedEvents[i];
+    for (const key in actualEvent) {
+      expect(actualEvent[key]).toEqual(expectedEvent[key]);
+    }
+  }
+}
+
+{
+  describe('convertPerfProfileToEvents', function() {
+    it('should convert single instantaneous event', function() {
+      const profileData = {
+        threads: [
+          {samples: [{time: 1, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]}]}
+        ]
+      };
+      const perfEvents = convertPerfProfileToEvents(profileData);
+      assertEventsEqual(perfEvents, [{ph: 'X', ts: 1, name: 'script'}]);
+    });
+
+    it('should convert single non-instantaneous event', function() {
+      const profileData = {
+        threads: [{
+          samples: [
+            {time: 1, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
+            {time: 2, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
+            {time: 100, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]}
+          ]
+        }]
+      };
+      const perfEvents = convertPerfProfileToEvents(profileData);
+      assertEventsEqual(
+          perfEvents, [{ph: 'B', ts: 1, name: 'script'}, {ph: 'E', ts: 100, name: 'script'}]);
+    });
+
+    it('should convert multiple instantaneous events', function() {
+      const profileData = {
+        threads: [{
+          samples: [
+            {time: 1, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
+            {time: 2, frames: [{location: 'PresShell::Paint'}]}
+          ]
+        }]
+      };
+      const perfEvents = convertPerfProfileToEvents(profileData);
+      assertEventsEqual(
+          perfEvents, [{ph: 'X', ts: 1, name: 'script'}, {ph: 'X', ts: 2, name: 'render'}]);
+    });
+
+    it('should convert multiple mixed events', function() {
+      const profileData = {
+        threads: [{
+          samples: [
+            {time: 1, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
+            {time: 2, frames: [{location: 'PresShell::Paint'}]},
+            {time: 5, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
+            {time: 10, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]}
+          ]
+        }]
+      };
+      const perfEvents = convertPerfProfileToEvents(profileData);
+      assertEventsEqual(perfEvents, [
+        {ph: 'X', ts: 1, name: 'script'}, {ph: 'X', ts: 2, name: 'render'},
+        {ph: 'B', ts: 5, name: 'script'}, {ph: 'E', ts: 10, name: 'script'}
+      ]);
+    });
+
+    it('should add args to gc events', function() {
+      const profileData = {threads: [{samples: [{time: 1, frames: [{location: 'forceGC'}]}]}]};
+      const perfEvents = convertPerfProfileToEvents(profileData);
+      assertEventsEqual(perfEvents, [{ph: 'X', ts: 1, name: 'gc', args: {usedHeapSize: 0}}]);
+    });
+
+    it('should skip unknown events', function() {
+      const profileData = {
+        threads: [{
+          samples: [
+            {time: 1, frames: [{location: 'FirefoxDriver.prototype.executeScript'}]},
+            {time: 2, frames: [{location: 'foo'}]}
+          ]
+        }]
+      };
+      const perfEvents = convertPerfProfileToEvents(profileData);
+      assertEventsEqual(perfEvents, [{ph: 'X', ts: 1, name: 'script'}]);
+    });
+  });
+}
diff --git a/packages/benchpress/test/firefox_extension/sample_benchmark.ts b/packages/benchpress/test/firefox_extension/sample_benchmark.ts
new file mode 100644
index 000000000000..914d6a98a6fb
--- /dev/null
+++ b/packages/benchpress/test/firefox_extension/sample_benchmark.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 {$, browser} from 'protractor';
+
+const benchpress = require('../../index.js');
+const runner = new benchpress.Runner([
+  // use protractor as Webdriver client
+  benchpress.SeleniumWebDriverAdapter.PROTRACTOR_PROVIDERS,
+  // use RegressionSlopeValidator to validate samples
+  benchpress.Validator.bindTo(benchpress.RegressionSlopeValidator),
+  // use 10 samples to calculate slope regression
+  benchpress.bind(benchpress.RegressionSlopeValidator.SAMPLE_SIZE).toValue(20),
+  // use the script metric to calculate slope regression
+  benchpress.bind(benchpress.RegressionSlopeValidator.METRIC).toValue('scriptTime'),
+  benchpress.bind(benchpress.Options.FORCE_GC).toValue(true)
+]);
+
+describe('deep tree baseline', function() {
+  it('should be fast!', function(done) {
+    browser.ignoreSynchronization = true;
+    browser.get('http://localhost:8001/playground/src/benchpress/');
+
+    /*
+     * Tell benchpress to click the buttons to destroy and re-create the tree for each sample.
+     * Benchpress will log the collected metrics after each sample is collected, and will stop
+     * sampling as soon as the calculated regression slope for last 20 samples is stable.
+     */
+    runner
+        .sample({
+          id: 'baseline',
+          execute: function() { $('button').click(); },
+          providers: [benchpress.bind(benchpress.Options.SAMPLE_DESCRIPTION).toValue({depth: 9})]
+        })
+        .then(done, done.fail);
+  });
+});
diff --git a/packages/benchpress/test/firefox_extension/spec.ts b/packages/benchpress/test/firefox_extension/spec.ts
new file mode 100644
index 000000000000..9b0d9421f98c
--- /dev/null
+++ b/packages/benchpress/test/firefox_extension/spec.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
+ */
+
+/* tslint:disable:no-console  */
+import {browser} from 'protractor';
+
+const assertEventsContainsName = function(events: any[], eventName: string) {
+  let found = false;
+  for (let i = 0; i < events.length; ++i) {
+    if (events[i].name == eventName) {
+      found = true;
+      break;
+    }
+  }
+  expect(found).toBeTruthy();
+};
+
+describe('firefox extension', function() {
+  const TEST_URL = 'http://localhost:8001/playground/src/hello_world/index.html';
+
+  it('should measure performance', function() {
+    browser.sleep(3000);  // wait for extension to load
+
+    browser.driver.get(TEST_URL);
+
+    browser.executeScript('window.startProfiler()').then(function() {
+      console.log('started measuring perf');
+    });
+
+    browser.executeAsyncScript('setTimeout(arguments[0], 1000);');
+    browser.executeScript('window.forceGC()');
+
+    browser.executeAsyncScript('var cb = arguments[0]; window.getProfile(cb);')
+        .then(function(profile: any) {
+          assertEventsContainsName(profile, 'gc');
+          assertEventsContainsName(profile, 'script');
+        });
+  });
+});
diff --git a/packages/benchpress/test/metric/multi_metric_spec.ts b/packages/benchpress/test/metric/multi_metric_spec.ts
new file mode 100644
index 000000000000..1eb8bda5bc8b
--- /dev/null
+++ b/packages/benchpress/test/metric/multi_metric_spec.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 {AsyncTestCompleter, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+import {Injector, Metric, MultiMetric} from '../../index';
+
+(function() {
+  function createMetric(ids: any[]) {
+    const m = Injector
+                  .create([
+                    ids.map(id => ({provide: id, useValue: new MockMetric(id)})),
+                    MultiMetric.provideWith(ids)
+                  ])
+                  .get<MultiMetric>(MultiMetric);
+    return Promise.resolve(m);
+  }
+
+  describe('multi metric', () => {
+    it('should merge descriptions', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createMetric(['m1', 'm2']).then((m) => {
+           expect(m.describe()).toEqual({'m1': 'describe', 'm2': 'describe'});
+           async.done();
+         });
+       }));
+
+    it('should merge all beginMeasure calls',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createMetric(['m1', 'm2']).then((m) => m.beginMeasure()).then((values) => {
+           expect(values).toEqual(['m1_beginMeasure', 'm2_beginMeasure']);
+           async.done();
+         });
+       }));
+
+    [false, true].forEach((restartFlag) => {
+      it(`should merge all endMeasure calls for restart=${restartFlag}`,
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           createMetric(['m1', 'm2']).then((m) => m.endMeasure(restartFlag)).then((values) => {
+             expect(values).toEqual(
+                 {'m1': {'restart': restartFlag}, 'm2': {'restart': restartFlag}});
+             async.done();
+           });
+         }));
+    });
+
+  });
+})();
+
+class MockMetric extends Metric {
+  constructor(private _id: string) { super(); }
+
+  beginMeasure(): Promise<string> { return Promise.resolve(`${this._id}_beginMeasure`); }
+
+  endMeasure(restart: boolean): Promise<{[key: string]: any}> {
+    const result: {[key: string]: any} = {};
+    result[this._id] = {'restart': restart};
+    return Promise.resolve(result);
+  }
+
+  describe(): {[key: string]: string} {
+    const result: {[key: string]: string} = {};
+    result[this._id] = 'describe';
+    return result;
+  }
+}
diff --git a/packages/benchpress/test/metric/perflog_metric_spec.ts b/packages/benchpress/test/metric/perflog_metric_spec.ts
new file mode 100644
index 000000000000..7c068403a7de
--- /dev/null
+++ b/packages/benchpress/test/metric/perflog_metric_spec.ts
@@ -0,0 +1,737 @@
+/**
+ * @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 {StaticProvider} from '@angular/core';
+import {AsyncTestCompleter, beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+import {Injector, Metric, Options, PerfLogEvent, PerfLogFeatures, PerflogMetric, WebDriverExtension} from '../../index';
+import {TraceEventFactory} from '../trace_event_factory';
+
+(function() {
+  let commandLog: any[];
+  const eventFactory = new TraceEventFactory('timeline', 'pid0');
+
+  function createMetric(
+      perfLogs: PerfLogEvent[], perfLogFeatures: PerfLogFeatures,
+      {microMetrics, forceGc, captureFrames, receivedData, requestCount, ignoreNavigation}: {
+        microMetrics?: {[key: string]: string},
+        forceGc?: boolean,
+        captureFrames?: boolean,
+        receivedData?: boolean,
+        requestCount?: boolean,
+        ignoreNavigation?: boolean
+      } = {}): Metric {
+    commandLog = [];
+    if (!perfLogFeatures) {
+      perfLogFeatures =
+          new PerfLogFeatures({render: true, gc: true, frameCapture: true, userTiming: true});
+    }
+    if (!microMetrics) {
+      microMetrics = {};
+    }
+    const providers: StaticProvider[] = [
+      Options.DEFAULT_PROVIDERS, PerflogMetric.PROVIDERS,
+      {provide: Options.MICRO_METRICS, useValue: microMetrics}, {
+        provide: PerflogMetric.SET_TIMEOUT,
+        useValue: (fn: Function, millis: number) => {
+          commandLog.push(['setTimeout', millis]);
+          fn();
+        },
+      },
+      {
+        provide: WebDriverExtension,
+        useValue: new MockDriverExtension(perfLogs, commandLog, perfLogFeatures)
+      }
+    ];
+    if (forceGc != null) {
+      providers.push({provide: Options.FORCE_GC, useValue: forceGc});
+    }
+    if (captureFrames != null) {
+      providers.push({provide: Options.CAPTURE_FRAMES, useValue: captureFrames});
+    }
+    if (receivedData != null) {
+      providers.push({provide: Options.RECEIVED_DATA, useValue: receivedData});
+    }
+    if (requestCount != null) {
+      providers.push({provide: Options.REQUEST_COUNT, useValue: requestCount});
+    }
+    if (ignoreNavigation != null) {
+      providers.push({provide: PerflogMetric.IGNORE_NAVIGATION, useValue: ignoreNavigation});
+    }
+    return Injector.create(providers).get(PerflogMetric);
+  }
+
+  describe('perflog metric', () => {
+
+    function sortedKeys(stringMap: {[key: string]: any}) {
+      const res: string[] = [];
+      res.push(...Object.keys(stringMap));
+      res.sort();
+      return res;
+    }
+
+    it('should describe itself based on the perfLogFeatrues', () => {
+      expect(sortedKeys(createMetric([[]], new PerfLogFeatures()).describe())).toEqual([
+        'pureScriptTime', 'scriptTime'
+      ]);
+
+      expect(
+          sortedKeys(createMetric([[]], new PerfLogFeatures({render: true, gc: false})).describe()))
+          .toEqual(['pureScriptTime', 'renderTime', 'scriptTime']);
+
+      expect(sortedKeys(createMetric([[]], null !).describe())).toEqual([
+        'gcAmount', 'gcTime', 'majorGcTime', 'pureScriptTime', 'renderTime', 'scriptTime'
+      ]);
+
+      expect(sortedKeys(createMetric([[]], new PerfLogFeatures({render: true, gc: true}), {
+                          forceGc: true
+                        }).describe()))
+          .toEqual([
+            'forcedGcAmount', 'forcedGcTime', 'gcAmount', 'gcTime', 'majorGcTime', 'pureScriptTime',
+            'renderTime', 'scriptTime'
+          ]);
+
+
+      expect(sortedKeys(createMetric([[]], new PerfLogFeatures({userTiming: true}), {
+                          receivedData: true,
+                          requestCount: true
+                        }).describe()))
+          .toEqual(['pureScriptTime', 'receivedData', 'requestCount', 'scriptTime']);
+    });
+
+    it('should describe itself based on micro metrics', () => {
+      const description =
+          createMetric([[]], null !, {microMetrics: {'myMicroMetric': 'someDesc'}}).describe();
+      expect(description['myMicroMetric']).toEqual('someDesc');
+    });
+
+    it('should describe itself if frame capture is requested and available', () => {
+      const description = createMetric([[]], new PerfLogFeatures({frameCapture: true}), {
+                            captureFrames: true
+                          }).describe();
+      expect(description['frameTime.mean']).not.toContain('WARNING');
+      expect(description['frameTime.best']).not.toContain('WARNING');
+      expect(description['frameTime.worst']).not.toContain('WARNING');
+      expect(description['frameTime.smooth']).not.toContain('WARNING');
+    });
+
+    it('should describe itself if frame capture is requested and not available', () => {
+      const description = createMetric([[]], new PerfLogFeatures({frameCapture: false}), {
+                            captureFrames: true
+                          }).describe();
+      expect(description['frameTime.mean']).toContain('WARNING');
+      expect(description['frameTime.best']).toContain('WARNING');
+      expect(description['frameTime.worst']).toContain('WARNING');
+      expect(description['frameTime.smooth']).toContain('WARNING');
+    });
+
+    describe('beginMeasure', () => {
+
+      it('should not force gc and mark the timeline',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const metric = createMetric([[]], null !);
+           metric.beginMeasure().then((_) => {
+             expect(commandLog).toEqual([['timeBegin', 'benchpress0']]);
+
+             async.done();
+           });
+         }));
+
+      it('should force gc and mark the timeline',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const metric = createMetric([[]], null !, {forceGc: true});
+           metric.beginMeasure().then((_) => {
+             expect(commandLog).toEqual([['gc'], ['timeBegin', 'benchpress0']]);
+
+             async.done();
+           });
+         }));
+
+    });
+
+    describe('endMeasure', () => {
+
+      it('should mark and aggregate events in between the marks',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const events = [[
+             eventFactory.markStart('benchpress0', 0), eventFactory.start('script', 4),
+             eventFactory.end('script', 6), eventFactory.markEnd('benchpress0', 10)
+           ]];
+           const metric = createMetric(events, null !);
+           metric.beginMeasure().then((_) => metric.endMeasure(false)).then((data) => {
+             expect(commandLog).toEqual([
+               ['timeBegin', 'benchpress0'], ['timeEnd', 'benchpress0', null], 'readPerfLog'
+             ]);
+             expect(data['scriptTime']).toBe(2);
+
+             async.done();
+           });
+         }));
+
+      it('should mark and aggregate events since navigationStart',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const events = [[
+             eventFactory.markStart('benchpress0', 0), eventFactory.start('script', 4),
+             eventFactory.end('script', 6), eventFactory.instant('navigationStart', 7),
+             eventFactory.start('script', 8), eventFactory.end('script', 9),
+             eventFactory.markEnd('benchpress0', 10)
+           ]];
+           const metric = createMetric(events, null !);
+           metric.beginMeasure().then((_) => metric.endMeasure(false)).then((data) => {
+             expect(data['scriptTime']).toBe(1);
+
+             async.done();
+           });
+         }));
+
+      it('should ignore navigationStart if ignoreNavigation is set',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const events = [[
+             eventFactory.markStart('benchpress0', 0), eventFactory.start('script', 4),
+             eventFactory.end('script', 6), eventFactory.instant('navigationStart', 7),
+             eventFactory.start('script', 8), eventFactory.end('script', 9),
+             eventFactory.markEnd('benchpress0', 10)
+           ]];
+           const metric = createMetric(events, null !, {ignoreNavigation: true});
+           metric.beginMeasure().then((_) => metric.endMeasure(false)).then((data) => {
+             expect(data['scriptTime']).toBe(3);
+
+             async.done();
+           });
+         }));
+
+      it('should restart timing', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const events = [
+             [
+               eventFactory.markStart('benchpress0', 0),
+               eventFactory.markEnd('benchpress0', 1),
+               eventFactory.markStart('benchpress1', 2),
+             ],
+             [eventFactory.markEnd('benchpress1', 3)]
+           ];
+           const metric = createMetric(events, null !);
+           metric.beginMeasure()
+               .then((_) => metric.endMeasure(true))
+               .then((_) => metric.endMeasure(true))
+               .then((_) => {
+                 expect(commandLog).toEqual([
+                   ['timeBegin', 'benchpress0'], ['timeEnd', 'benchpress0', 'benchpress1'],
+                   'readPerfLog', ['timeEnd', 'benchpress1', 'benchpress2'], 'readPerfLog'
+                 ]);
+
+                 async.done();
+               });
+         }));
+
+      it('should loop and aggregate until the end mark is present',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const events = [
+             [eventFactory.markStart('benchpress0', 0), eventFactory.start('script', 1)],
+             [eventFactory.end('script', 2)],
+             [
+               eventFactory.start('script', 3), eventFactory.end('script', 5),
+               eventFactory.markEnd('benchpress0', 10)
+             ]
+           ];
+           const metric = createMetric(events, null !);
+           metric.beginMeasure().then((_) => metric.endMeasure(false)).then((data) => {
+             expect(commandLog).toEqual([
+               ['timeBegin', 'benchpress0'], ['timeEnd', 'benchpress0', null], 'readPerfLog',
+               ['setTimeout', 100], 'readPerfLog', ['setTimeout', 100], 'readPerfLog'
+             ]);
+             expect(data['scriptTime']).toBe(3);
+
+             async.done();
+           });
+         }));
+
+      it('should store events after the end mark for the next call',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const events = [
+             [
+               eventFactory.markStart('benchpress0', 0), eventFactory.markEnd('benchpress0', 1),
+               eventFactory.markStart('benchpress1', 1), eventFactory.start('script', 1),
+               eventFactory.end('script', 2)
+             ],
+             [
+               eventFactory.start('script', 3), eventFactory.end('script', 5),
+               eventFactory.markEnd('benchpress1', 6)
+             ]
+           ];
+           const metric = createMetric(events, null !);
+           metric.beginMeasure()
+               .then((_) => metric.endMeasure(true))
+               .then((data) => {
+                 expect(data['scriptTime']).toBe(0);
+                 return metric.endMeasure(true);
+               })
+               .then((data) => {
+                 expect(commandLog).toEqual([
+                   ['timeBegin', 'benchpress0'], ['timeEnd', 'benchpress0', 'benchpress1'],
+                   'readPerfLog', ['timeEnd', 'benchpress1', 'benchpress2'], 'readPerfLog'
+                 ]);
+                 expect(data['scriptTime']).toBe(3);
+
+                 async.done();
+               });
+         }));
+
+      describe('with forced gc', () => {
+        let events: PerfLogEvent[][];
+        beforeEach(() => {
+          events = [[
+            eventFactory.markStart('benchpress0', 0), eventFactory.start('script', 4),
+            eventFactory.end('script', 6), eventFactory.markEnd('benchpress0', 10),
+            eventFactory.markStart('benchpress1', 11),
+            eventFactory.start('gc', 12, {'usedHeapSize': 2500}),
+            eventFactory.end('gc', 15, {'usedHeapSize': 1000}),
+            eventFactory.markEnd('benchpress1', 20)
+          ]];
+        });
+
+        it('should measure forced gc', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             const metric = createMetric(events, null !, {forceGc: true});
+             metric.beginMeasure().then((_) => metric.endMeasure(false)).then((data) => {
+               expect(commandLog).toEqual([
+                 ['gc'], ['timeBegin', 'benchpress0'], ['timeEnd', 'benchpress0', 'benchpress1'],
+                 'readPerfLog', ['gc'], ['timeEnd', 'benchpress1', null], 'readPerfLog'
+               ]);
+               expect(data['forcedGcTime']).toBe(3);
+               expect(data['forcedGcAmount']).toBe(1.5);
+
+               async.done();
+             });
+           }));
+
+        it('should restart after the forced gc if needed',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             const metric = createMetric(events, null !, {forceGc: true});
+             metric.beginMeasure().then((_) => metric.endMeasure(true)).then((data) => {
+               expect(commandLog[5]).toEqual(['timeEnd', 'benchpress1', 'benchpress2']);
+
+               async.done();
+             });
+           }));
+
+      });
+
+    });
+
+    describe('aggregation', () => {
+
+      function aggregate(events: any[], {microMetrics, captureFrames, receivedData, requestCount}: {
+        microMetrics?: {[key: string]: string},
+        captureFrames?: boolean,
+        receivedData?: boolean,
+        requestCount?: boolean
+      } = {}) {
+        events.unshift(eventFactory.markStart('benchpress0', 0));
+        events.push(eventFactory.markEnd('benchpress0', 10));
+        const metric = createMetric([events], null !, {
+          microMetrics: microMetrics,
+          captureFrames: captureFrames,
+          receivedData: receivedData,
+          requestCount: requestCount
+        });
+        return metric.beginMeasure().then((_) => metric.endMeasure(false));
+      }
+
+      describe('frame metrics', () => {
+        it('should calculate mean frame time',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate(
+                 [
+                   eventFactory.markStart('frameCapture', 0), eventFactory.instant('frame', 1),
+                   eventFactory.instant('frame', 3), eventFactory.instant('frame', 4),
+                   eventFactory.markEnd('frameCapture', 5)
+                 ],
+                 {captureFrames: true})
+                 .then((data) => {
+                   expect(data['frameTime.mean']).toBe(((3 - 1) + (4 - 3)) / 2);
+                   async.done();
+                 });
+           }));
+
+        it('should throw if no start event',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+
+             aggregate(
+                 [eventFactory.instant('frame', 4), eventFactory.markEnd('frameCapture', 5)],
+                 {captureFrames: true})
+                 .catch((err): any => {
+                   expect(() => {
+                     throw err;
+                   }).toThrowError('missing start event for frame capture');
+                   async.done();
+                 });
+           }));
+
+        it('should throw if no end event',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+
+             aggregate(
+                 [eventFactory.markStart('frameCapture', 3), eventFactory.instant('frame', 4)],
+                 {captureFrames: true})
+                 .catch((err): any => {
+                   expect(() => { throw err; }).toThrowError('missing end event for frame capture');
+                   async.done();
+                 });
+           }));
+
+        it('should throw if trying to capture twice',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+
+             aggregate(
+                 [
+                   eventFactory.markStart('frameCapture', 3),
+                   eventFactory.markStart('frameCapture', 4)
+                 ],
+                 {captureFrames: true})
+                 .catch((err): any => {
+                   expect(() => {
+                     throw err;
+                   }).toThrowError('can capture frames only once per benchmark run');
+                   async.done();
+                 });
+           }));
+
+        it('should throw if trying to capture when frame capture is disabled',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate([eventFactory.markStart('frameCapture', 3)]).catch((err) => {
+               expect(() => { throw err; })
+                   .toThrowError(
+                       'found start event for frame capture, but frame capture was not requested in benchpress');
+               async.done();
+               return null;
+             });
+           }));
+
+        it('should throw if frame capture is enabled, but nothing is captured',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate([], {captureFrames: true}).catch((err): any => {
+               expect(() => { throw err; })
+                   .toThrowError(
+                       'frame capture requested in benchpress, but no start event was found');
+               async.done();
+             });
+           }));
+
+        it('should calculate best and worst frame time',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate(
+                 [
+                   eventFactory.markStart('frameCapture', 0), eventFactory.instant('frame', 1),
+                   eventFactory.instant('frame', 9), eventFactory.instant('frame', 15),
+                   eventFactory.instant('frame', 18), eventFactory.instant('frame', 28),
+                   eventFactory.instant('frame', 32), eventFactory.markEnd('frameCapture', 10)
+                 ],
+                 {captureFrames: true})
+                 .then((data) => {
+                   expect(data['frameTime.worst']).toBe(10);
+                   expect(data['frameTime.best']).toBe(3);
+                   async.done();
+                 });
+           }));
+
+        it('should calculate percentage of smoothness to be good',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate(
+                 [
+                   eventFactory.markStart('frameCapture', 0), eventFactory.instant('frame', 1),
+                   eventFactory.instant('frame', 2), eventFactory.instant('frame', 3),
+                   eventFactory.markEnd('frameCapture', 4)
+                 ],
+                 {captureFrames: true})
+                 .then((data) => {
+                   expect(data['frameTime.smooth']).toBe(1.0);
+                   async.done();
+                 });
+           }));
+
+        it('should calculate percentage of smoothness to be bad',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate(
+                 [
+                   eventFactory.markStart('frameCapture', 0), eventFactory.instant('frame', 1),
+                   eventFactory.instant('frame', 2), eventFactory.instant('frame', 22),
+                   eventFactory.instant('frame', 23), eventFactory.instant('frame', 24),
+                   eventFactory.markEnd('frameCapture', 4)
+                 ],
+                 {captureFrames: true})
+                 .then((data) => {
+                   expect(data['frameTime.smooth']).toBe(0.75);
+                   async.done();
+                 });
+           }));
+
+      });
+
+      it('should report a single interval',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           aggregate([
+             eventFactory.start('script', 0), eventFactory.end('script', 5)
+           ]).then((data) => {
+             expect(data['scriptTime']).toBe(5);
+             async.done();
+           });
+         }));
+
+      it('should sum up multiple intervals',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           aggregate([
+             eventFactory.start('script', 0), eventFactory.end('script', 5),
+             eventFactory.start('script', 10), eventFactory.end('script', 17)
+           ]).then((data) => {
+             expect(data['scriptTime']).toBe(12);
+             async.done();
+           });
+         }));
+
+      it('should ignore not started intervals',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           aggregate([eventFactory.end('script', 10)]).then((data) => {
+             expect(data['scriptTime']).toBe(0);
+             async.done();
+           });
+         }));
+
+      it('should ignore not ended intervals',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           aggregate([eventFactory.start('script', 10)]).then((data) => {
+             expect(data['scriptTime']).toBe(0);
+             async.done();
+           });
+         }));
+
+      it('should ignore nested intervals',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           aggregate([
+             eventFactory.start('script', 0), eventFactory.start('script', 5),
+             eventFactory.end('script', 10), eventFactory.end('script', 17)
+           ]).then((data) => {
+             expect(data['scriptTime']).toBe(17);
+             async.done();
+           });
+         }));
+
+      it('should ignore events from different processed as the start mark',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const otherProcessEventFactory = new TraceEventFactory('timeline', 'pid1');
+           const metric = createMetric(
+               [[
+                 eventFactory.markStart('benchpress0', 0), eventFactory.start('script', 0, null),
+                 eventFactory.end('script', 5, null),
+                 otherProcessEventFactory.start('script', 10, null),
+                 otherProcessEventFactory.end('script', 17, null),
+                 eventFactory.markEnd('benchpress0', 20)
+               ]],
+               null !);
+           metric.beginMeasure().then((_) => metric.endMeasure(false)).then((data) => {
+             expect(data['scriptTime']).toBe(5);
+             async.done();
+           });
+         }));
+
+      it('should mark a run as invalid if the start and end marks are different',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const otherProcessEventFactory = new TraceEventFactory('timeline', 'pid1');
+           const metric = createMetric(
+               [[
+                 eventFactory.markStart('benchpress0', 0), eventFactory.start('script', 0, null),
+                 eventFactory.end('script', 5, null),
+                 otherProcessEventFactory.start('script', 10, null),
+                 otherProcessEventFactory.end('script', 17, null),
+                 otherProcessEventFactory.markEnd('benchpress0', 20)
+               ]],
+               null !);
+           metric.beginMeasure().then((_) => metric.endMeasure(false)).then((data) => {
+             expect(data['invalid']).toBe(1);
+             async.done();
+           });
+         }));
+
+      it('should support scriptTime metric',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           aggregate([
+             eventFactory.start('script', 0), eventFactory.end('script', 5)
+           ]).then((data) => {
+             expect(data['scriptTime']).toBe(5);
+             async.done();
+           });
+         }));
+
+      it('should support renderTime metric',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           aggregate([
+             eventFactory.start('render', 0), eventFactory.end('render', 5)
+           ]).then((data) => {
+             expect(data['renderTime']).toBe(5);
+             async.done();
+           });
+         }));
+
+      it('should support gcTime/gcAmount metric',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           aggregate([
+             eventFactory.start('gc', 0, {'usedHeapSize': 2500}),
+             eventFactory.end('gc', 5, {'usedHeapSize': 1000})
+           ]).then((data) => {
+             expect(data['gcTime']).toBe(5);
+             expect(data['gcAmount']).toBe(1.5);
+             expect(data['majorGcTime']).toBe(0);
+             async.done();
+           });
+         }));
+
+      it('should support majorGcTime metric',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           aggregate([
+             eventFactory.start('gc', 0, {'usedHeapSize': 2500}),
+             eventFactory.end('gc', 5, {'usedHeapSize': 1000, 'majorGc': true})
+           ]).then((data) => {
+             expect(data['gcTime']).toBe(5);
+             expect(data['majorGcTime']).toBe(5);
+             async.done();
+           });
+         }));
+
+      it('should support pureScriptTime = scriptTime-gcTime-renderTime',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           aggregate([
+             eventFactory.start('script', 0), eventFactory.start('gc', 1, {'usedHeapSize': 1000}),
+             eventFactory.end('gc', 4, {'usedHeapSize': 0}), eventFactory.start('render', 4),
+             eventFactory.end('render', 5), eventFactory.end('script', 6)
+           ]).then((data) => {
+             expect(data['scriptTime']).toBe(6);
+             expect(data['pureScriptTime']).toBe(2);
+             async.done();
+           });
+         }));
+
+      describe('receivedData', () => {
+        it('should report received data since last navigationStart',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate(
+                 [
+                   eventFactory.instant('receivedData', 0, {'encodedDataLength': 1}),
+                   eventFactory.instant('navigationStart', 1),
+                   eventFactory.instant('receivedData', 2, {'encodedDataLength': 2}),
+                   eventFactory.instant('navigationStart', 3),
+                   eventFactory.instant('receivedData', 4, {'encodedDataLength': 4}),
+                   eventFactory.instant('receivedData', 5, {'encodedDataLength': 8})
+                 ],
+                 {receivedData: true})
+                 .then((data) => {
+                   expect(data['receivedData']).toBe(12);
+                   async.done();
+                 });
+           }));
+      });
+
+      describe('requestCount', () => {
+        it('should report count of requests sent since last navigationStart',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate(
+                 [
+                   eventFactory.instant('sendRequest', 0),
+                   eventFactory.instant('navigationStart', 1),
+                   eventFactory.instant('sendRequest', 2),
+                   eventFactory.instant('navigationStart', 3),
+                   eventFactory.instant('sendRequest', 4), eventFactory.instant('sendRequest', 5)
+                 ],
+                 {requestCount: true})
+                 .then((data) => {
+                   expect(data['requestCount']).toBe(2);
+                   async.done();
+                 });
+           }));
+      });
+
+      describe('microMetrics', () => {
+
+        it('should report micro metrics',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate(
+                 [
+                   eventFactory.markStart('mm1', 0),
+                   eventFactory.markEnd('mm1', 5),
+                 ],
+                 {microMetrics: {'mm1': 'micro metric 1'}})
+                 .then((data) => {
+                   expect(data['mm1']).toBe(5.0);
+                   async.done();
+                 });
+           }));
+
+        it('should ignore micro metrics that were not specified',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate([
+               eventFactory.markStart('mm1', 0),
+               eventFactory.markEnd('mm1', 5),
+             ]).then((data) => {
+               expect(data['mm1']).toBeFalsy();
+               async.done();
+             });
+           }));
+
+        it('should report micro metric averages',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             aggregate(
+                 [
+                   eventFactory.markStart('mm1*20', 0),
+                   eventFactory.markEnd('mm1*20', 5),
+                 ],
+                 {microMetrics: {'mm1': 'micro metric 1'}})
+                 .then((data) => {
+                   expect(data['mm1']).toBe(5 / 20);
+                   async.done();
+                 });
+           }));
+
+      });
+
+    });
+
+  });
+})();
+
+class MockDriverExtension extends WebDriverExtension {
+  constructor(
+      private _perfLogs: any[], private _commandLog: any[],
+      private _perfLogFeatures: PerfLogFeatures) {
+    super();
+  }
+
+  timeBegin(name: string): Promise<any> {
+    this._commandLog.push(['timeBegin', name]);
+    return Promise.resolve(null);
+  }
+
+  timeEnd(name: string, restartName: string|null): Promise<any> {
+    this._commandLog.push(['timeEnd', name, restartName]);
+    return Promise.resolve(null);
+  }
+
+  perfLogFeatures(): PerfLogFeatures { return this._perfLogFeatures; }
+
+  readPerfLog(): Promise<any> {
+    this._commandLog.push('readPerfLog');
+    if (this._perfLogs.length > 0) {
+      const next = this._perfLogs[0];
+      this._perfLogs.shift();
+      return Promise.resolve(next);
+    } else {
+      return Promise.resolve([]);
+    }
+  }
+
+  gc(): Promise<any> {
+    this._commandLog.push(['gc']);
+    return Promise.resolve(null);
+  }
+}
diff --git a/packages/benchpress/test/metric/user_metric_spec.ts b/packages/benchpress/test/metric/user_metric_spec.ts
new file mode 100644
index 000000000000..0225154a585f
--- /dev/null
+++ b/packages/benchpress/test/metric/user_metric_spec.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 {Injector, StaticProvider} from '@angular/core';
+import {AsyncTestCompleter, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+import {Options, PerfLogEvent, PerfLogFeatures, UserMetric, WebDriverAdapter} from '../../index';
+
+(function() {
+  let wdAdapter: MockDriverAdapter;
+
+  function createMetric(
+      perfLogs: PerfLogEvent[], perfLogFeatures: PerfLogFeatures,
+      {userMetrics}: {userMetrics?: {[key: string]: string}} = {}): UserMetric {
+    if (!perfLogFeatures) {
+      perfLogFeatures =
+          new PerfLogFeatures({render: true, gc: true, frameCapture: true, userTiming: true});
+    }
+    if (!userMetrics) {
+      userMetrics = {};
+    }
+    wdAdapter = new MockDriverAdapter();
+    const providers: StaticProvider[] = [
+      Options.DEFAULT_PROVIDERS, UserMetric.PROVIDERS,
+      {provide: Options.USER_METRICS, useValue: userMetrics},
+      {provide: WebDriverAdapter, useValue: wdAdapter}
+    ];
+    return Injector.create(providers).get(UserMetric);
+  }
+
+  describe('user metric', () => {
+
+    it('should describe itself based on userMetrics', () => {
+      expect(createMetric([[]], new PerfLogFeatures(), {
+               userMetrics: {'loadTime': 'time to load'}
+             }).describe())
+          .toEqual({'loadTime': 'time to load'});
+    });
+
+    describe('endMeasure', () => {
+      it('should stop measuring when all properties have numeric values',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const metric = createMetric(
+               [[]], new PerfLogFeatures(),
+               {userMetrics: {'loadTime': 'time to load', 'content': 'time to see content'}});
+           metric.beginMeasure().then(() => metric.endMeasure(true)).then(values => {
+             expect(values['loadTime']).toBe(25);
+             expect(values['content']).toBe(250);
+             async.done();
+           });
+
+           wdAdapter.data['loadTime'] = 25;
+           // Wait before setting 2nd property.
+           setTimeout(() => { wdAdapter.data['content'] = 250; }, 50);
+
+         }), 600);
+    });
+  });
+})();
+
+class MockDriverAdapter extends WebDriverAdapter {
+  data: any = {};
+
+  executeScript(script: string): any {
+    // Just handles `return window.propName` ignores `delete window.propName`.
+    if (script.indexOf('return window.') == 0) {
+      const metricName = script.substring('return window.'.length);
+      return Promise.resolve(this.data[metricName]);
+    } else if (script.indexOf('delete window.') == 0) {
+      return Promise.resolve(null);
+    } else {
+      return Promise.reject(`Unexpected syntax: ${script}`);
+    }
+  }
+}
diff --git a/packages/benchpress/test/reporter/console_reporter_spec.ts b/packages/benchpress/test/reporter/console_reporter_spec.ts
new file mode 100644
index 000000000000..950b1a1cc1f1
--- /dev/null
+++ b/packages/benchpress/test/reporter/console_reporter_spec.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 {StaticProvider} from '@angular/core';
+import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+import {ConsoleReporter, Injector, MeasureValues, SampleDescription} from '../../index';
+
+{
+  describe('console reporter', () => {
+    let reporter: ConsoleReporter;
+    let log: string[];
+
+    function createReporter(
+        {columnWidth = null, sampleId = null, descriptions = null, metrics = null}: {
+          columnWidth?: number,
+          sampleId?: string,
+          descriptions?: {[key: string]: any}[],
+          metrics?: {[key: string]: any}
+        }) {
+      log = [];
+      if (!descriptions) {
+        descriptions = [];
+      }
+      if (sampleId == null) {
+        sampleId = 'null';
+      }
+      const providers: StaticProvider[] = [
+        ConsoleReporter.PROVIDERS, {
+          provide: SampleDescription,
+          useValue: new SampleDescription(sampleId, descriptions, metrics !)
+        },
+        {provide: ConsoleReporter.PRINT, useValue: (line: string) => log.push(line)}
+      ];
+      if (columnWidth != null) {
+        providers.push({provide: ConsoleReporter.COLUMN_WIDTH, useValue: columnWidth});
+      }
+      reporter = Injector.create(providers).get(ConsoleReporter);
+    }
+
+    it('should print the sample id, description and table header', () => {
+      createReporter({
+        columnWidth: 8,
+        sampleId: 'someSample',
+        descriptions: [{'a': 1, 'b': 2}],
+        metrics: {'m1': 'some desc', 'm2': 'some other desc'}
+      });
+      expect(log).toEqual([
+        'BENCHMARK someSample',
+        'Description:',
+        '- a: 1',
+        '- b: 2',
+        'Metrics:',
+        '- m1: some desc',
+        '- m2: some other desc',
+        '',
+        '      m1 |       m2',
+        '-------- | --------',
+      ]);
+    });
+
+    it('should print a table row', () => {
+      createReporter({columnWidth: 8, metrics: {'a': '', 'b': ''}});
+      log = [];
+      reporter.reportMeasureValues(mv(0, 0, {'a': 1.23, 'b': 2}));
+      expect(log).toEqual(['    1.23 |     2.00']);
+    });
+
+    it('should print the table footer and stats when there is a valid sample', () => {
+      createReporter({columnWidth: 8, metrics: {'a': '', 'b': ''}});
+      log = [];
+      reporter.reportSample([], [mv(0, 0, {'a': 3, 'b': 6}), mv(1, 1, {'a': 5, 'b': 9})]);
+      expect(log).toEqual(['======== | ========', '4.00+-25% | 7.50+-20%']);
+    });
+
+    it('should print the coefficient of variation only when it is meaningful', () => {
+      createReporter({columnWidth: 8, metrics: {'a': '', 'b': ''}});
+      log = [];
+      reporter.reportSample([], [mv(0, 0, {'a': 3, 'b': 0}), mv(1, 1, {'a': 5, 'b': 0})]);
+      expect(log).toEqual(['======== | ========', '4.00+-25% |     0.00']);
+    });
+
+  });
+}
+
+function mv(runIndex: number, time: number, values: {[key: string]: number}) {
+  return new MeasureValues(runIndex, new Date(time), values);
+}
diff --git a/packages/benchpress/test/reporter/json_file_reporter_spec.ts b/packages/benchpress/test/reporter/json_file_reporter_spec.ts
new file mode 100644
index 000000000000..2ca147f2379d
--- /dev/null
+++ b/packages/benchpress/test/reporter/json_file_reporter_spec.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 {AsyncTestCompleter, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+import {Injector, JsonFileReporter, MeasureValues, Options, SampleDescription} from '../../index';
+
+{
+  describe('file reporter', () => {
+    let loggedFile: any;
+
+    function createReporter({sampleId, descriptions, metrics, path}: {
+      sampleId: string,
+      descriptions: {[key: string]: any}[],
+      metrics: {[key: string]: string},
+      path: string
+    }) {
+      const providers = [
+        JsonFileReporter.PROVIDERS, {
+          provide: SampleDescription,
+          useValue: new SampleDescription(sampleId, descriptions, metrics)
+        },
+        {provide: JsonFileReporter.PATH, useValue: path},
+        {provide: Options.NOW, useValue: () => new Date(1234)}, {
+          provide: Options.WRITE_FILE,
+          useValue: (filename: string, content: string) => {
+            loggedFile = {'filename': filename, 'content': content};
+            return Promise.resolve(null);
+          }
+        }
+      ];
+      return Injector.create(providers).get<JsonFileReporter>(JsonFileReporter);
+    }
+
+    it('should write all data into a file',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createReporter({
+           sampleId: 'someId',
+           descriptions: [{'a': 2}],
+           path: 'somePath',
+           metrics: {'a': 'script time', 'b': 'render time'}
+         })
+             .reportSample(
+                 [mv(0, 0, {'a': 3, 'b': 6})],
+                 [mv(0, 0, {'a': 3, 'b': 6}), mv(1, 1, {'a': 5, 'b': 9})]);
+         const regExp = /somePath\/someId_\d+\.json/;
+         expect(loggedFile['filename'].match(regExp) != null).toBe(true);
+         const parsedContent = JSON.parse(loggedFile['content']);
+         expect(parsedContent).toEqual({
+           'description': {
+             'id': 'someId',
+             'description': {'a': 2},
+             'metrics': {'a': 'script time', 'b': 'render time'}
+           },
+           'stats': {'a': '4.00+-25%', 'b': '7.50+-20%'},
+           'completeSample': [
+             {'timeStamp': '1970-01-01T00:00:00.000Z', 'runIndex': 0, 'values': {'a': 3, 'b': 6}}
+           ],
+           'validSample': [
+             {'timeStamp': '1970-01-01T00:00:00.000Z', 'runIndex': 0, 'values': {'a': 3, 'b': 6}}, {
+               'timeStamp': '1970-01-01T00:00:00.001Z',
+               'runIndex': 1,
+               'values': {'a': 5, 'b': 9}
+             }
+           ]
+         });
+         async.done();
+       }));
+
+  });
+}
+
+function mv(runIndex: number, time: number, values: {[key: string]: number}) {
+  return new MeasureValues(runIndex, new Date(time), values);
+}
diff --git a/packages/benchpress/test/reporter/multi_reporter_spec.ts b/packages/benchpress/test/reporter/multi_reporter_spec.ts
new file mode 100644
index 000000000000..4bfeb5ff8228
--- /dev/null
+++ b/packages/benchpress/test/reporter/multi_reporter_spec.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 {AsyncTestCompleter, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+import {Injector, MeasureValues, MultiReporter, Reporter} from '../../index';
+
+(function() {
+  function createReporters(ids: any[]) {
+    const r = Injector
+                  .create([
+                    ids.map(id => ({provide: id, useValue: new MockReporter(id)})),
+                    MultiReporter.provideWith(ids)
+                  ])
+                  .get<MultiReporter>(MultiReporter);
+    return Promise.resolve(r);
+  }
+
+  describe('multi reporter', () => {
+
+    it('should reportMeasureValues to all',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const mv = new MeasureValues(0, new Date(), {});
+         createReporters(['m1', 'm2']).then((r) => r.reportMeasureValues(mv)).then((values) => {
+
+           expect(values).toEqual([{'id': 'm1', 'values': mv}, {'id': 'm2', 'values': mv}]);
+           async.done();
+         });
+       }));
+
+    it('should reportSample to call', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const completeSample =
+             [new MeasureValues(0, new Date(), {}), new MeasureValues(1, new Date(), {})];
+         const validSample = [completeSample[1]];
+
+         createReporters(['m1', 'm2'])
+             .then((r) => r.reportSample(completeSample, validSample))
+             .then((values) => {
+
+               expect(values).toEqual([
+                 {'id': 'm1', 'completeSample': completeSample, 'validSample': validSample},
+                 {'id': 'm2', 'completeSample': completeSample, 'validSample': validSample}
+               ]);
+               async.done();
+             });
+       }));
+
+  });
+})();
+
+class MockReporter extends Reporter {
+  constructor(private _id: string) { super(); }
+
+  reportMeasureValues(values: MeasureValues): Promise<{[key: string]: any}> {
+    return Promise.resolve({'id': this._id, 'values': values});
+  }
+
+  reportSample(completeSample: MeasureValues[], validSample: MeasureValues[]):
+      Promise<{[key: string]: any}> {
+    return Promise.resolve(
+        {'id': this._id, 'completeSample': completeSample, 'validSample': validSample});
+  }
+}
diff --git a/packages/benchpress/test/runner_spec.ts b/packages/benchpress/test/runner_spec.ts
new file mode 100644
index 000000000000..3487b5988eb5
--- /dev/null
+++ b/packages/benchpress/test/runner_spec.ts
@@ -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
+ */
+
+import {AsyncTestCompleter, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+import {Injector, Metric, Options, Runner, SampleDescription, SampleState, Sampler, Validator, WebDriverAdapter} from '../index';
+
+{
+  describe('runner', () => {
+    let injector: Injector;
+    let runner: Runner;
+
+    function createRunner(defaultProviders?: any[]): Runner {
+      if (!defaultProviders) {
+        defaultProviders = [];
+      }
+      runner = new Runner([
+        defaultProviders, {
+          provide: Sampler,
+          useFactory: (_injector: Injector) => {
+            injector = _injector;
+            return new MockSampler();
+          },
+          deps: [Injector]
+        },
+        {provide: Metric, useFactory: () => new MockMetric(), deps: []},
+        {provide: Validator, useFactory: () => new MockValidator(), deps: []},
+        {provide: WebDriverAdapter, useFactory: () => new MockWebDriverAdapter(), deps: []}
+      ]);
+      return runner;
+    }
+
+    it('should set SampleDescription.id',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createRunner()
+             .sample({id: 'someId'})
+             .then((_) => injector.get(SampleDescription))
+             .then((desc) => {
+               expect(desc.id).toBe('someId');
+               async.done();
+             });
+       }));
+
+    it('should merge SampleDescription.description',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createRunner([{provide: Options.DEFAULT_DESCRIPTION, useValue: {'a': 1}}])
+             .sample({
+               id: 'someId',
+               providers: [{provide: Options.SAMPLE_DESCRIPTION, useValue: {'b': 2}}]
+             })
+             .then((_) => injector.get(SampleDescription))
+             .then((desc) => {
+               expect(desc.description)
+                   .toEqual(
+                       {'forceGc': false, 'userAgent': 'someUserAgent', 'a': 1, 'b': 2, 'v': 11});
+               async.done();
+             });
+       }));
+
+    it('should fill SampleDescription.metrics from the Metric',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createRunner()
+             .sample({id: 'someId'})
+             .then((_) => injector.get(SampleDescription))
+             .then((desc) => {
+
+               expect(desc.metrics).toEqual({'m1': 'some metric'});
+               async.done();
+             });
+       }));
+
+    it('should provide Options.EXECUTE',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const execute = () => {};
+         createRunner().sample({id: 'someId', execute: execute}).then((_) => {
+           expect(injector.get(Options.EXECUTE)).toEqual(execute);
+           async.done();
+         });
+       }));
+
+    it('should provide Options.PREPARE',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const prepare = () => {};
+         createRunner().sample({id: 'someId', prepare: prepare}).then((_) => {
+           expect(injector.get(Options.PREPARE)).toEqual(prepare);
+           async.done();
+         });
+       }));
+
+    it('should provide Options.MICRO_METRICS',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createRunner().sample({id: 'someId', microMetrics: {'a': 'b'}}).then((_) => {
+           expect(injector.get(Options.MICRO_METRICS)).toEqual({'a': 'b'});
+           async.done();
+         });
+       }));
+
+    it('should overwrite providers per sample call',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createRunner([{provide: Options.DEFAULT_DESCRIPTION, useValue: {'a': 1}}])
+             .sample({
+               id: 'someId',
+               providers: [{provide: Options.DEFAULT_DESCRIPTION, useValue: {'a': 2}}]
+             })
+             .then((_) => injector.get(SampleDescription))
+             .then((desc) => {
+
+               expect(desc.description['a']).toBe(2);
+               async.done();
+             });
+
+       }));
+
+  });
+}
+
+class MockWebDriverAdapter extends WebDriverAdapter {
+  executeScript(script: string): Promise<string> { return Promise.resolve('someUserAgent'); }
+  capabilities(): Promise<Map<string, any>> { return null !; }
+}
+
+class MockValidator extends Validator {
+  constructor() { super(); }
+  describe() { return {'v': 11}; }
+}
+
+class MockMetric extends Metric {
+  constructor() { super(); }
+  describe() { return {'m1': 'some metric'}; }
+}
+
+class MockSampler extends Sampler {
+  constructor() { super(null !, null !, null !, null !, null !, null !, null !); }
+  sample(): Promise<SampleState> { return Promise.resolve(new SampleState([], [])); }
+}
diff --git a/packages/benchpress/test/sampler_spec.ts b/packages/benchpress/test/sampler_spec.ts
new file mode 100644
index 000000000000..9b1b7864e38d
--- /dev/null
+++ b/packages/benchpress/test/sampler_spec.ts
@@ -0,0 +1,269 @@
+/**
+ * @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 {AsyncTestCompleter, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+import {Injector, MeasureValues, Metric, Options, Reporter, Sampler, Validator, WebDriverAdapter} from '../index';
+
+{
+  const EMPTY_EXECUTE = () => {};
+
+  describe('sampler', () => {
+    let sampler: Sampler;
+
+    function createSampler({driver, metric, reporter, validator, prepare, execute}: {
+      driver?: any,
+      metric?: Metric,
+      reporter?: Reporter,
+      validator?: Validator,
+      prepare?: any,
+      execute?: any
+    } = {}) {
+      let time = 1000;
+      if (!metric) {
+        metric = new MockMetric([]);
+      }
+      if (!reporter) {
+        reporter = new MockReporter([]);
+      }
+      if (driver == null) {
+        driver = new MockDriverAdapter([]);
+      }
+      const providers = [
+        Options.DEFAULT_PROVIDERS, Sampler.PROVIDERS, {provide: Metric, useValue: metric},
+        {provide: Reporter, useValue: reporter}, {provide: WebDriverAdapter, useValue: driver},
+        {provide: Options.EXECUTE, useValue: execute}, {provide: Validator, useValue: validator},
+        {provide: Options.NOW, useValue: () => new Date(time++)}
+      ];
+      if (prepare != null) {
+        providers.push({provide: Options.PREPARE, useValue: prepare});
+      }
+
+      sampler = Injector.create(providers).get(Sampler);
+    }
+
+    it('should call the prepare and execute callbacks using WebDriverAdapter.waitFor',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const log: any[] = [];
+         let count = 0;
+         const driver = new MockDriverAdapter([], (callback: Function) => {
+           const result = callback();
+           log.push(result);
+           return Promise.resolve(result);
+         });
+         createSampler({
+           driver: driver,
+           validator: createCountingValidator(2),
+           prepare: () => count++,
+           execute: () => count++,
+         });
+         sampler.sample().then((_) => {
+           expect(count).toBe(4);
+           expect(log).toEqual([0, 1, 2, 3]);
+           async.done();
+         });
+
+       }));
+
+    it('should call prepare, beginMeasure, execute, endMeasure for every iteration',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         let workCount = 0;
+         const log: any[] = [];
+         createSampler({
+           metric: createCountingMetric(log),
+           validator: createCountingValidator(2),
+           prepare: () => { log.push(`p${workCount++}`); },
+           execute: () => { log.push(`w${workCount++}`); }
+         });
+         sampler.sample().then((_) => {
+           expect(log).toEqual([
+             'p0',
+             ['beginMeasure'],
+             'w1',
+             ['endMeasure', false, {'script': 0}],
+             'p2',
+             ['beginMeasure'],
+             'w3',
+             ['endMeasure', false, {'script': 1}],
+           ]);
+           async.done();
+         });
+       }));
+
+    it('should call execute, endMeasure for every iteration if there is no prepare callback',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const log: any[] = [];
+         let workCount = 0;
+         createSampler({
+           metric: createCountingMetric(log),
+           validator: createCountingValidator(2),
+           execute: () => { log.push(`w${workCount++}`); },
+           prepare: null
+         });
+         sampler.sample().then((_) => {
+           expect(log).toEqual([
+             ['beginMeasure'],
+             'w0',
+             ['endMeasure', true, {'script': 0}],
+             'w1',
+             ['endMeasure', true, {'script': 1}],
+           ]);
+           async.done();
+         });
+       }));
+
+    it('should only collect metrics for execute and ignore metrics from prepare',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         let scriptTime = 0;
+         let iterationCount = 1;
+         createSampler({
+           validator: createCountingValidator(2),
+           metric: new MockMetric(
+               [],
+               () => {
+                 const result = Promise.resolve({'script': scriptTime});
+                 scriptTime = 0;
+                 return result;
+               }),
+           prepare: () => { scriptTime = 1 * iterationCount; },
+           execute: () => {
+             scriptTime = 10 * iterationCount;
+             iterationCount++;
+           }
+         });
+         sampler.sample().then((state) => {
+           expect(state.completeSample.length).toBe(2);
+           expect(state.completeSample[0]).toEqual(mv(0, 1000, {'script': 10}));
+           expect(state.completeSample[1]).toEqual(mv(1, 1001, {'script': 20}));
+           async.done();
+         });
+       }));
+
+    it('should call the validator for every execution and store the valid sample',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const log: any[] = [];
+         const validSample = [mv(null !, null !, {})];
+
+         createSampler({
+           metric: createCountingMetric(),
+           validator: createCountingValidator(2, validSample, log),
+           execute: EMPTY_EXECUTE
+         });
+         sampler.sample().then((state) => {
+           expect(state.validSample).toBe(validSample);
+           // TODO(tbosch): Why does this fail??
+           // expect(log).toEqual([
+           //   ['validate', [{'script': 0}], null],
+           //   ['validate', [{'script': 0}, {'script': 1}], validSample]
+           // ]);
+
+           expect(log.length).toBe(2);
+           expect(log[0]).toEqual(['validate', [mv(0, 1000, {'script': 0})], null]);
+           expect(log[1]).toEqual(
+               ['validate', [mv(0, 1000, {'script': 0}), mv(1, 1001, {'script': 1})], validSample]);
+
+           async.done();
+         });
+       }));
+
+    it('should report the metric values',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const log: any[] = [];
+         const validSample = [mv(null !, null !, {})];
+         createSampler({
+           validator: createCountingValidator(2, validSample),
+           metric: createCountingMetric(),
+           reporter: new MockReporter(log),
+           execute: EMPTY_EXECUTE
+         });
+         sampler.sample().then((_) => {
+           // TODO(tbosch): Why does this fail??
+           // expect(log).toEqual([
+           //   ['reportMeasureValues', 0, {'script': 0}],
+           //   ['reportMeasureValues', 1, {'script': 1}],
+           //   ['reportSample', [{'script': 0}, {'script': 1}], validSample]
+           // ]);
+           expect(log.length).toBe(3);
+           expect(log[0]).toEqual(['reportMeasureValues', mv(0, 1000, {'script': 0})]);
+           expect(log[1]).toEqual(['reportMeasureValues', mv(1, 1001, {'script': 1})]);
+           expect(log[2]).toEqual([
+             'reportSample', [mv(0, 1000, {'script': 0}), mv(1, 1001, {'script': 1})], validSample
+           ]);
+
+           async.done();
+         });
+       }));
+
+  });
+}
+
+function mv(runIndex: number, time: number, values: {[key: string]: number}) {
+  return new MeasureValues(runIndex, new Date(time), values);
+}
+
+function createCountingValidator(count: number, validSample?: MeasureValues[], log: any[] = []) {
+  return new MockValidator(log, (completeSample: MeasureValues[]) => {
+    count--;
+    if (count === 0) {
+      return validSample || completeSample;
+    } else {
+      return null;
+    }
+  });
+}
+
+function createCountingMetric(log: any[] = []) {
+  let scriptTime = 0;
+  return new MockMetric(log, () => ({'script': scriptTime++}));
+}
+
+class MockDriverAdapter extends WebDriverAdapter {
+  constructor(private _log: any[] = [], private _waitFor: Function|null = null) { super(); }
+  waitFor(callback: Function): Promise<any> {
+    if (this._waitFor != null) {
+      return this._waitFor(callback);
+    } else {
+      return Promise.resolve(callback());
+    }
+  }
+}
+
+
+class MockValidator extends Validator {
+  constructor(private _log: any[] = [], private _validate: Function|null = null) { super(); }
+  validate(completeSample: MeasureValues[]): MeasureValues[] {
+    const stableSample = this._validate != null ? this._validate(completeSample) : completeSample;
+    this._log.push(['validate', completeSample, stableSample]);
+    return stableSample;
+  }
+}
+
+class MockMetric extends Metric {
+  constructor(private _log: any[] = [], private _endMeasure: Function|null = null) { super(); }
+  beginMeasure() {
+    this._log.push(['beginMeasure']);
+    return Promise.resolve(null);
+  }
+  endMeasure(restart: boolean) {
+    const measureValues = this._endMeasure != null ? this._endMeasure() : {};
+    this._log.push(['endMeasure', restart, measureValues]);
+    return Promise.resolve(measureValues);
+  }
+}
+
+class MockReporter extends Reporter {
+  constructor(private _log: any[] = []) { super(); }
+  reportMeasureValues(values: MeasureValues): Promise<any> {
+    this._log.push(['reportMeasureValues', values]);
+    return Promise.resolve(null);
+  }
+  reportSample(completeSample: MeasureValues[], validSample: MeasureValues[]): Promise<any> {
+    this._log.push(['reportSample', completeSample, validSample]);
+    return Promise.resolve(null);
+  }
+}
diff --git a/modules/benchpress/test/statistic_spec.ts b/packages/benchpress/test/statistic_spec.ts
similarity index 77%
rename from modules/benchpress/test/statistic_spec.ts
rename to packages/benchpress/test/statistic_spec.ts
index 3a8986f4d537..efbeaa876672 100644
--- a/modules/benchpress/test/statistic_spec.ts
+++ b/packages/benchpress/test/statistic_spec.ts
@@ -1,10 +1,15 @@
-import {describe, ddescribe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-
-import {Statistic} from 'benchpress/src/statistic';
-
-import {NaN} from 'angular2/src/facade/math';
-
-export function main() {
+/**
+ * @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 {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {Statistic} from '../src/statistic';
+
+{
   describe('statistic', () => {
 
     it('should calculate the mean', () => {
@@ -31,4 +36,4 @@ export function main() {
     });
 
   });
-}
\ No newline at end of file
+}
diff --git a/packages/benchpress/test/trace_event_factory.ts b/packages/benchpress/test/trace_event_factory.ts
new file mode 100644
index 000000000000..11ce4c0b5315
--- /dev/null
+++ b/packages/benchpress/test/trace_event_factory.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {PerfLogEvent} from '../index';
+
+export class TraceEventFactory {
+  constructor(private _cat: string, private _pid: string) {}
+
+  create(ph: any, name: string, time: number, args: any = null) {
+    const res:
+        PerfLogEvent = {'name': name, 'cat': this._cat, 'ph': ph, 'ts': time, 'pid': this._pid};
+    if (args != null) {
+      res['args'] = args;
+    }
+    return res;
+  }
+
+  markStart(name: string, time: number) { return this.create('B', name, time); }
+
+  markEnd(name: string, time: number) { return this.create('E', name, time); }
+
+  start(name: string, time: number, args: any = null) { return this.create('B', name, time, args); }
+
+  end(name: string, time: number, args: any = null) { return this.create('E', name, time, args); }
+
+  instant(name: string, time: number, args: any = null) {
+    return this.create('I', name, time, args);
+  }
+
+  complete(name: string, time: number, duration: number, args: any = null) {
+    const res = this.create('X', name, time, args);
+    res['dur'] = duration;
+    return res;
+  }
+}
diff --git a/packages/benchpress/test/validator/regression_slope_validator_spec.ts b/packages/benchpress/test/validator/regression_slope_validator_spec.ts
new file mode 100644
index 000000000000..07cc120cc906
--- /dev/null
+++ b/packages/benchpress/test/validator/regression_slope_validator_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 {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+import {Injector, MeasureValues, RegressionSlopeValidator} from '../../index';
+
+{
+  describe('regression slope validator', () => {
+    let validator: RegressionSlopeValidator;
+
+    function createValidator({size, metric}: {size: number, metric: string}) {
+      validator = Injector
+                      .create([
+                        RegressionSlopeValidator.PROVIDERS,
+                        {provide: RegressionSlopeValidator.METRIC, useValue: metric},
+                        {provide: RegressionSlopeValidator.SAMPLE_SIZE, useValue: size}
+                      ])
+                      .get(RegressionSlopeValidator);
+    }
+
+    it('should return sampleSize and metric as description', () => {
+      createValidator({size: 2, metric: 'script'});
+      expect(validator.describe()).toEqual({'sampleSize': 2, 'regressionSlopeMetric': 'script'});
+    });
+
+    it('should return null while the completeSample is smaller than the given size', () => {
+      createValidator({size: 2, metric: 'script'});
+      expect(validator.validate([])).toBe(null);
+      expect(validator.validate([mv(0, 0, {})])).toBe(null);
+    });
+
+    it('should return null while the regression slope is < 0', () => {
+      createValidator({size: 2, metric: 'script'});
+      expect(validator.validate([mv(0, 0, {'script': 2}), mv(1, 1, {'script': 1})])).toBe(null);
+    });
+
+    it('should return the last sampleSize runs when the regression slope is ==0', () => {
+      createValidator({size: 2, metric: 'script'});
+      const sample = [mv(0, 0, {'script': 1}), mv(1, 1, {'script': 1}), mv(2, 2, {'script': 1})];
+      expect(validator.validate(sample.slice(0, 2))).toEqual(sample.slice(0, 2));
+      expect(validator.validate(sample)).toEqual(sample.slice(1, 3));
+    });
+
+    it('should return the last sampleSize runs when the regression slope is >0', () => {
+      createValidator({size: 2, metric: 'script'});
+      const sample = [mv(0, 0, {'script': 1}), mv(1, 1, {'script': 2}), mv(2, 2, {'script': 3})];
+      expect(validator.validate(sample.slice(0, 2))).toEqual(sample.slice(0, 2));
+      expect(validator.validate(sample)).toEqual(sample.slice(1, 3));
+    });
+
+  });
+}
+
+function mv(runIndex: number, time: number, values: {[key: string]: number}) {
+  return new MeasureValues(runIndex, new Date(time), values);
+}
diff --git a/packages/benchpress/test/validator/size_validator_spec.ts b/packages/benchpress/test/validator/size_validator_spec.ts
new file mode 100644
index 000000000000..782b36ab1f25
--- /dev/null
+++ b/packages/benchpress/test/validator/size_validator_spec.ts
@@ -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
+ */
+
+import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+import {Injector, MeasureValues, SizeValidator} from '../../index';
+
+{
+  describe('size validator', () => {
+    let validator: SizeValidator;
+
+    function createValidator(size: number) {
+      validator =
+          Injector
+              .create(
+                  [SizeValidator.PROVIDERS, {provide: SizeValidator.SAMPLE_SIZE, useValue: size}])
+              .get(SizeValidator);
+    }
+
+    it('should return sampleSize as description', () => {
+      createValidator(2);
+      expect(validator.describe()).toEqual({'sampleSize': 2});
+    });
+
+    it('should return null while the completeSample is smaller than the given size', () => {
+      createValidator(2);
+      expect(validator.validate([])).toBe(null);
+      expect(validator.validate([mv(0, 0, {})])).toBe(null);
+    });
+
+    it('should return the last sampleSize runs when it has at least the given size', () => {
+      createValidator(2);
+      const sample = [mv(0, 0, {'a': 1}), mv(1, 1, {'b': 2}), mv(2, 2, {'c': 3})];
+      expect(validator.validate(sample.slice(0, 2))).toEqual(sample.slice(0, 2));
+      expect(validator.validate(sample)).toEqual(sample.slice(1, 3));
+    });
+
+  });
+}
+
+function mv(runIndex: number, time: number, values: {[key: string]: number}) {
+  return new MeasureValues(runIndex, new Date(time), values);
+}
diff --git a/packages/benchpress/test/web_driver_extension_spec.ts b/packages/benchpress/test/web_driver_extension_spec.ts
new file mode 100644
index 000000000000..907c464eaad5
--- /dev/null
+++ b/packages/benchpress/test/web_driver_extension_spec.ts
@@ -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
+ */
+
+import {AsyncTestCompleter, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+import {Injector, Options, WebDriverExtension} from '../index';
+
+(function() {
+  function createExtension(ids: any[], caps: any) {
+    return new Promise<any>((res, rej) => {
+      try {
+        res(Injector
+                .create([
+                  ids.map((id) => ({provide: id, useValue: new MockExtension(id)})),
+                  {provide: Options.CAPABILITIES, useValue: caps},
+                  WebDriverExtension.provideFirstSupported(ids)
+                ])
+                .get(WebDriverExtension));
+      } catch (e) {
+        rej(e);
+      }
+    });
+  }
+
+  describe('WebDriverExtension.provideFirstSupported', () => {
+
+    it('should provide the extension that matches the capabilities',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension(['m1', 'm2', 'm3'], {'browser': 'm2'}).then((m) => {
+           expect(m.id).toEqual('m2');
+           async.done();
+         });
+       }));
+
+    it('should throw if there is no match',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension(['m1'], {'browser': 'm2'}).catch((err) => {
+           expect(err != null).toBe(true);
+           async.done();
+         });
+       }));
+  });
+})();
+
+class MockExtension extends WebDriverExtension {
+  constructor(public id: string) { super(); }
+
+  supports(capabilities: {[key: string]: any}): boolean {
+    return capabilities['browser'] === this.id;
+  }
+}
diff --git a/packages/benchpress/test/webdriver/chrome_driver_extension_spec.ts b/packages/benchpress/test/webdriver/chrome_driver_extension_spec.ts
new file mode 100644
index 000000000000..640143b541f0
--- /dev/null
+++ b/packages/benchpress/test/webdriver/chrome_driver_extension_spec.ts
@@ -0,0 +1,422 @@
+/**
+ * @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 {AsyncTestCompleter, describe, expect, fit, inject, it} from '@angular/core/testing/src/testing_internal';
+
+import {ChromeDriverExtension, Injector, Options, WebDriverAdapter, WebDriverExtension} from '../../index';
+import {TraceEventFactory} from '../trace_event_factory';
+
+{
+  describe('chrome driver extension', () => {
+    const CHROME45_USER_AGENT =
+        '"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2499.0 Safari/537.36"';
+
+    let log: any[];
+    let extension: ChromeDriverExtension;
+
+    const blinkEvents = new TraceEventFactory('blink.console', 'pid0');
+    const v8Events = new TraceEventFactory('v8', 'pid0');
+    const v8EventsOtherProcess = new TraceEventFactory('v8', 'pid1');
+    const chromeTimelineEvents =
+        new TraceEventFactory('disabled-by-default-devtools.timeline', 'pid0');
+    const chrome45TimelineEvents = new TraceEventFactory('devtools.timeline', 'pid0');
+    const chromeTimelineV8Events = new TraceEventFactory('devtools.timeline,v8', 'pid0');
+    const chromeBlinkTimelineEvents = new TraceEventFactory('blink,devtools.timeline', 'pid0');
+    const chromeBlinkUserTimingEvents = new TraceEventFactory('blink.user_timing', 'pid0');
+    const benchmarkEvents = new TraceEventFactory('benchmark', 'pid0');
+    const normEvents = new TraceEventFactory('timeline', 'pid0');
+
+    function createExtension(
+        perfRecords: any[] | null = null, userAgent: string | null = null,
+        messageMethod = 'Tracing.dataCollected'): WebDriverExtension {
+      if (!perfRecords) {
+        perfRecords = [];
+      }
+      if (userAgent == null) {
+        userAgent = CHROME45_USER_AGENT;
+      }
+      log = [];
+      extension = Injector
+                      .create([
+                        ChromeDriverExtension.PROVIDERS, {
+                          provide: WebDriverAdapter,
+                          useValue: new MockDriverAdapter(log, perfRecords, messageMethod)
+                        },
+                        {provide: Options.USER_AGENT, useValue: userAgent}
+                      ])
+                      .get(ChromeDriverExtension);
+      return extension;
+    }
+
+    it('should force gc via window.gc()',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension().gc().then((_) => {
+           expect(log).toEqual([['executeScript', 'window.gc()']]);
+           async.done();
+         });
+       }));
+
+    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(
+               [['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((_) => {
+           expect(log).toEqual([['executeScript', `console.timeEnd('someName');`]]);
+           async.done();
+         });
+       }));
+
+    it('should mark the timeline via console.time() and console.timeEnd()',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension().timeEnd('name1', 'name2').then((_) => {
+           expect(log).toEqual(
+               [['executeScript', `console.timeEnd('name1');console.time('name2');`]]);
+           async.done();
+         });
+       }));
+
+    it('should normalize times to ms and forward ph and pid event properties',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension([chromeTimelineV8Events.complete('FunctionCall', 1100, 5500, null)])
+             .readPerfLog()
+             .then((events) => {
+               expect(events).toEqual([
+                 normEvents.complete('script', 1.1, 5.5, null),
+               ]);
+               async.done();
+             });
+       }));
+
+    it('should normalize "tdur" to "dur"',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const event: any = chromeTimelineV8Events.create('X', 'FunctionCall', 1100, null);
+         event['tdur'] = 5500;
+         createExtension([event]).readPerfLog().then((events) => {
+           expect(events).toEqual([
+             normEvents.complete('script', 1.1, 5.5, null),
+           ]);
+           async.done();
+         });
+       }));
+
+    it('should report FunctionCall events as "script"',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension([chromeTimelineV8Events.start('FunctionCall', 0)])
+             .readPerfLog()
+             .then((events) => {
+               expect(events).toEqual([
+                 normEvents.start('script', 0),
+               ]);
+               async.done();
+             });
+       }));
+
+    it('should report EvaluateScript events as "script"',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension([chromeTimelineV8Events.start('EvaluateScript', 0)])
+             .readPerfLog()
+             .then((events) => {
+               expect(events).toEqual([
+                 normEvents.start('script', 0),
+               ]);
+               async.done();
+             });
+       }));
+
+    it('should report minor gc', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension([
+           chromeTimelineV8Events.start('MinorGC', 1000, {'usedHeapSizeBefore': 1000}),
+           chromeTimelineV8Events.end('MinorGC', 2000, {'usedHeapSizeAfter': 0}),
+         ])
+             .readPerfLog()
+             .then((events) => {
+               expect(events.length).toEqual(2);
+               expect(events[0]).toEqual(
+                   normEvents.start('gc', 1.0, {'usedHeapSize': 1000, 'majorGc': false}));
+               expect(events[1]).toEqual(
+                   normEvents.end('gc', 2.0, {'usedHeapSize': 0, 'majorGc': false}));
+               async.done();
+             });
+       }));
+
+    it('should report major gc', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension(
+             [
+               chromeTimelineV8Events.start('MajorGC', 1000, {'usedHeapSizeBefore': 1000}),
+               chromeTimelineV8Events.end('MajorGC', 2000, {'usedHeapSizeAfter': 0}),
+             ], )
+             .readPerfLog()
+             .then((events) => {
+               expect(events.length).toEqual(2);
+               expect(events[0]).toEqual(
+                   normEvents.start('gc', 1.0, {'usedHeapSize': 1000, 'majorGc': true}));
+               expect(events[1]).toEqual(
+                   normEvents.end('gc', 2.0, {'usedHeapSize': 0, 'majorGc': true}));
+               async.done();
+             });
+       }));
+
+    ['Layout', 'UpdateLayerTree', 'Paint'].forEach((recordType) => {
+      it(`should report ${recordType} as "render"`,
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           createExtension(
+               [
+                 chrome45TimelineEvents.start(recordType, 1234),
+                 chrome45TimelineEvents.end(recordType, 2345)
+               ], )
+               .readPerfLog()
+               .then((events) => {
+                 expect(events).toEqual([
+                   normEvents.start('render', 1.234),
+                   normEvents.end('render', 2.345),
+                 ]);
+                 async.done();
+               });
+         }));
+    });
+
+    it(`should report UpdateLayoutTree as "render"`,
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension(
+             [
+               chromeBlinkTimelineEvents.start('UpdateLayoutTree', 1234),
+               chromeBlinkTimelineEvents.end('UpdateLayoutTree', 2345)
+             ], )
+             .readPerfLog()
+             .then((events) => {
+               expect(events).toEqual([
+                 normEvents.start('render', 1.234),
+                 normEvents.end('render', 2.345),
+               ]);
+               async.done();
+             });
+       }));
+
+    it('should ignore FunctionCalls from webdriver',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension([chromeTimelineV8Events.start(
+                             'FunctionCall', 0, {'data': {'scriptName': 'InjectedScript'}})])
+             .readPerfLog()
+             .then((events) => {
+               expect(events).toEqual([]);
+               async.done();
+             });
+       }));
+
+    it('should ignore FunctionCalls with empty scriptName',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension(
+             [chromeTimelineV8Events.start('FunctionCall', 0, {'data': {'scriptName': ''}})])
+             .readPerfLog()
+             .then((events) => {
+               expect(events).toEqual([]);
+               async.done();
+             });
+       }));
+
+    it('should report navigationStart',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension([chromeBlinkUserTimingEvents.instant('navigationStart', 1234)])
+             .readPerfLog()
+             .then((events) => {
+               expect(events).toEqual([normEvents.instant('navigationStart', 1.234)]);
+               async.done();
+             });
+       }));
+
+    it('should report receivedData', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension([chrome45TimelineEvents.instant(
+                             'ResourceReceivedData', 1234, {'data': {'encodedDataLength': 987}})], )
+             .readPerfLog()
+             .then((events) => {
+               expect(events).toEqual(
+                   [normEvents.instant('receivedData', 1.234, {'encodedDataLength': 987})]);
+               async.done();
+             });
+       }));
+
+    it('should report sendRequest', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension([chrome45TimelineEvents.instant(
+                             'ResourceSendRequest', 1234,
+                             {'data': {'url': 'http://here', 'requestMethod': 'GET'}})], )
+             .readPerfLog()
+             .then((events) => {
+               expect(events).toEqual([normEvents.instant(
+                   'sendRequest', 1.234, {'url': 'http://here', 'method': 'GET'})]);
+               async.done();
+             });
+       }));
+
+    describe('readPerfLog (common)', () => {
+
+      it('should execute a dummy script before reading them',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           // TODO(tbosch): This seems to be a bug in ChromeDriver:
+           // Sometimes it does not report the newest events of the performance log
+           // to the WebDriver client unless a script is executed...
+           createExtension([]).readPerfLog().then((_) => {
+             expect(log).toEqual([['executeScript', '1+1'], ['logs', 'performance']]);
+             async.done();
+           });
+         }));
+
+      ['Rasterize', 'CompositeLayers'].forEach((recordType) => {
+        it(`should report ${recordType} as "render"`,
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             createExtension(
+                 [
+                   chromeTimelineEvents.start(recordType, 1234),
+                   chromeTimelineEvents.end(recordType, 2345)
+                 ], )
+                 .readPerfLog()
+                 .then((events) => {
+                   expect(events).toEqual([
+                     normEvents.start('render', 1.234),
+                     normEvents.end('render', 2.345),
+                   ]);
+                   async.done();
+                 });
+           }));
+      });
+
+      describe('frame metrics', () => {
+        it('should report ImplThreadRenderingStats as frame event',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             createExtension([benchmarkEvents.instant(
+                                 'BenchmarkInstrumentation::ImplThreadRenderingStats', 1100,
+                                 {'data': {'frame_count': 1}})])
+                 .readPerfLog()
+                 .then((events) => {
+                   expect(events).toEqual([
+                     normEvents.instant('frame', 1.1),
+                   ]);
+                   async.done();
+                 });
+           }));
+
+        it('should not report ImplThreadRenderingStats with zero frames',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             createExtension([benchmarkEvents.instant(
+                                 'BenchmarkInstrumentation::ImplThreadRenderingStats', 1100,
+                                 {'data': {'frame_count': 0}})])
+                 .readPerfLog()
+                 .then((events) => {
+                   expect(events).toEqual([]);
+                   async.done();
+                 });
+           }));
+
+        it('should throw when ImplThreadRenderingStats contains more than one frame',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+
+             createExtension([benchmarkEvents.instant(
+                                 'BenchmarkInstrumentation::ImplThreadRenderingStats', 1100,
+                                 {'data': {'frame_count': 2}})])
+                 .readPerfLog()
+                 .catch((err): any => {
+                   expect(() => {
+                     throw err;
+                   }).toThrowError('multi-frame render stats not supported');
+                   async.done();
+                 });
+           }));
+
+      });
+
+      it('should report begin timestamps',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           createExtension([blinkEvents.create('S', 'someName', 1000)])
+               .readPerfLog()
+               .then((events) => {
+                 expect(events).toEqual([normEvents.markStart('someName', 1.0)]);
+                 async.done();
+               });
+         }));
+
+      it('should report end timestamps',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           createExtension([blinkEvents.create('F', 'someName', 1000)])
+               .readPerfLog()
+               .then((events) => {
+                 expect(events).toEqual([normEvents.markEnd('someName', 1.0)]);
+                 async.done();
+               });
+         }));
+
+      it('should throw an error on buffer overflow',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+
+           createExtension(
+               [
+                 chromeTimelineEvents.start('FunctionCall', 1234),
+               ],
+               CHROME45_USER_AGENT, 'Tracing.bufferUsage')
+               .readPerfLog()
+               .catch((err): any => {
+                 expect(() => {
+                   throw err;
+                 }).toThrowError('The DevTools trace buffer filled during the test!');
+                 async.done();
+               });
+         }));
+
+      it('should match chrome browsers', () => {
+        expect(createExtension().supports({'browserName': 'chrome'})).toBe(true);
+
+        expect(createExtension().supports({'browserName': 'Chrome'})).toBe(true);
+      });
+
+    });
+
+  });
+}
+
+class MockDriverAdapter extends WebDriverAdapter {
+  constructor(private _log: any[], private _events: any[], private _messageMethod: string) {
+    super();
+  }
+
+  executeScript(script: string) {
+    this._log.push(['executeScript', script]);
+    return Promise.resolve(null);
+  }
+
+  logs(type: string): Promise<any[]> {
+    this._log.push(['logs', type]);
+    if (type === 'performance') {
+      return Promise.resolve(this._events.map(
+          (event) => ({
+            'message': JSON.stringify(
+                {'message': {'method': this._messageMethod, 'params': event}}, null, 2)
+          })));
+    } else {
+      return null !;
+    }
+  }
+}
diff --git a/packages/benchpress/test/webdriver/ios_driver_extension_spec.ts b/packages/benchpress/test/webdriver/ios_driver_extension_spec.ts
new file mode 100644
index 000000000000..f2edbc774015
--- /dev/null
+++ b/packages/benchpress/test/webdriver/ios_driver_extension_spec.ts
@@ -0,0 +1,196 @@
+/**
+ * @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 {AsyncTestCompleter, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+import {IOsDriverExtension, Injector, WebDriverAdapter, WebDriverExtension} from '../../index';
+import {TraceEventFactory} from '../trace_event_factory';
+
+{
+  describe('ios driver extension', () => {
+    let log: any[];
+    let extension: IOsDriverExtension;
+
+    const normEvents = new TraceEventFactory('timeline', 'pid0');
+
+    function createExtension(perfRecords: any[] | null = null): WebDriverExtension {
+      if (!perfRecords) {
+        perfRecords = [];
+      }
+      log = [];
+      extension =
+          Injector
+              .create([
+                IOsDriverExtension.PROVIDERS,
+                {provide: WebDriverAdapter, useValue: new MockDriverAdapter(log, perfRecords)}
+              ])
+              .get(IOsDriverExtension);
+      return extension;
+    }
+
+    it('should throw on forcing gc', () => {
+      expect(() => createExtension().gc()).toThrowError('Force GC is not supported on iOS');
+    });
+
+    it('should mark the timeline via console.time()',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension().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((_) => {
+           expect(log).toEqual([['executeScript', `console.timeEnd('someName');`]]);
+           async.done();
+         });
+       }));
+
+    it('should mark the timeline via console.time() and console.timeEnd()',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         createExtension().timeEnd('name1', 'name2').then((_) => {
+           expect(log).toEqual(
+               [['executeScript', `console.timeEnd('name1');console.time('name2');`]]);
+           async.done();
+         });
+       }));
+
+    describe('readPerfLog', () => {
+
+      it('should execute a dummy script before reading them',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           // TODO(tbosch): This seems to be a bug in ChromeDriver:
+           // Sometimes it does not report the newest events of the performance log
+           // to the WebDriver client unless a script is executed...
+           createExtension([]).readPerfLog().then((_) => {
+             expect(log).toEqual([['executeScript', '1+1'], ['logs', 'performance']]);
+             async.done();
+           });
+         }));
+
+      it('should report FunctionCall records as "script"',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           createExtension([durationRecord('FunctionCall', 1, 5)]).readPerfLog().then((events) => {
+             expect(events).toEqual([normEvents.start('script', 1), normEvents.end('script', 5)]);
+             async.done();
+           });
+         }));
+
+      it('should ignore FunctionCalls from webdriver',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           createExtension([internalScriptRecord(1, 5)]).readPerfLog().then((events) => {
+             expect(events).toEqual([]);
+             async.done();
+           });
+         }));
+
+      it('should report begin time', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           createExtension([timeBeginRecord('someName', 12)]).readPerfLog().then((events) => {
+             expect(events).toEqual([normEvents.markStart('someName', 12)]);
+             async.done();
+           });
+         }));
+
+      it('should report end timestamps',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           createExtension([timeEndRecord('someName', 12)]).readPerfLog().then((events) => {
+             expect(events).toEqual([normEvents.markEnd('someName', 12)]);
+             async.done();
+           });
+         }));
+
+      ['RecalculateStyles', 'Layout', 'UpdateLayerTree', 'Paint', 'Rasterize', 'CompositeLayers']
+          .forEach((recordType) => {
+            it(`should report ${recordType}`,
+               inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+                 createExtension([durationRecord(recordType, 0, 1)])
+                     .readPerfLog()
+                     .then((events) => {
+                       expect(events).toEqual([
+                         normEvents.start('render', 0),
+                         normEvents.end('render', 1),
+                       ]);
+                       async.done();
+                     });
+               }));
+          });
+
+
+      it('should walk children', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           createExtension([durationRecord('FunctionCall', 1, 5, [timeBeginRecord('someName', 2)])])
+               .readPerfLog()
+               .then((events) => {
+                 expect(events).toEqual([
+                   normEvents.start('script', 1), normEvents.markStart('someName', 2),
+                   normEvents.end('script', 5)
+                 ]);
+                 async.done();
+               });
+         }));
+
+      it('should match safari browsers', () => {
+        expect(createExtension().supports({'browserName': 'safari'})).toBe(true);
+
+        expect(createExtension().supports({'browserName': 'Safari'})).toBe(true);
+      });
+
+    });
+
+  });
+}
+
+function timeBeginRecord(name: string, time: number) {
+  return {'type': 'Time', 'startTime': time, 'data': {'message': name}};
+}
+
+function timeEndRecord(name: string, time: number) {
+  return {'type': 'TimeEnd', 'startTime': time, 'data': {'message': name}};
+}
+
+function durationRecord(
+    type: string, startTime: number, endTime: number, children: any[] | null = null) {
+  if (!children) {
+    children = [];
+  }
+  return {'type': type, 'startTime': startTime, 'endTime': endTime, 'children': children};
+}
+
+function internalScriptRecord(startTime: number, endTime: number) {
+  return {
+    'type': 'FunctionCall',
+    'startTime': startTime,
+    'endTime': endTime,
+    'data': {'scriptName': 'InjectedScript'}
+  };
+}
+
+class MockDriverAdapter extends WebDriverAdapter {
+  constructor(private _log: any[], private _perfRecords: any[]) { super(); }
+
+  executeScript(script: string) {
+    this._log.push(['executeScript', script]);
+    return Promise.resolve(null);
+  }
+
+  logs(type: string): Promise<any[]> {
+    this._log.push(['logs', type]);
+    if (type === 'performance') {
+      return Promise.resolve(this._perfRecords.map(function(record) {
+        return {
+          'message': JSON.stringify(
+              {'message': {'method': 'Timeline.eventRecorded', 'params': {'record': record}}}, null,
+              2)
+        };
+      }));
+    } else {
+      return null !;
+    }
+  }
+}
diff --git a/packages/benchpress/tsconfig-build.json b/packages/benchpress/tsconfig-build.json
new file mode 100644
index 000000000000..540553953ee5
--- /dev/null
+++ b/packages/benchpress/tsconfig-build.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "module": "commonjs",
+    "baseUrl": ".",
+    "rootDir": ".",
+    "sourceRoot": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"]
+    },
+    "outDir": "../../dist/packages/benchpress"
+  },
+
+  "files": [
+    "index.ts",
+    "../../node_modules/@types/node/index.d.ts",
+    "../../node_modules/@types/jasmine/index.d.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ]
+}
diff --git a/packages/common/BUILD.bazel b/packages/common/BUILD.bazel
new file mode 100644
index 000000000000..0b06fa465f33
--- /dev/null
+++ b/packages/common/BUILD.bazel
@@ -0,0 +1,41 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "common",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/common",
+    deps = [
+        "//packages/core",
+        "@rxjs",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "//packages/common/http:package.json",
+        "//packages/common/http/testing:package.json",
+        "//packages/common/testing:package.json",
+    ],
+    entry_point = "packages/common/index.js",
+    packages = ["//packages/common/locales:package"],
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "release-with-framework",
+    ],
+    deps = [
+        "//packages/common",
+        "//packages/common/http",
+        "//packages/common/http/testing",
+        "//packages/common/testing",
+    ],
+)
diff --git a/packages/common/http/BUILD.bazel b/packages/common/http/BUILD.bazel
new file mode 100644
index 000000000000..0e5a0f002d32
--- /dev/null
+++ b/packages/common/http/BUILD.bazel
@@ -0,0 +1,21 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "http",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/common/http",
+    deps = [
+        "//packages/common",
+        "//packages/core",
+        "@rxjs",
+    ],
+)
diff --git a/packages/common/http/index.ts b/packages/common/http/index.ts
new file mode 100644
index 000000000000..ca39d26dcdb8
--- /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 000000000000..7fc014ef30a8
--- /dev/null
+++ b/packages/common/http/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@angular/common/http",
+  "typings": "./http.d.ts",
+  "main": "../bundles/common-http.umd.js",
+  "module": "../fesm5/http.js",
+  "es2015": "../fesm2015/http.js",
+  "esm5": "../esm5/http/http.js",
+  "esm2015": "../esm2015/http/http.js",
+  "fesm5": "../fesm5/http.js",
+  "fesm2015": "../fesm2015/http.js",
+  "sideEffects": false
+}
diff --git a/packages/common/http/public_api.ts b/packages/common/http/public_api.ts
new file mode 100644
index 000000000000..9975cfc8f5f1
--- /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, HttpInterceptingHandler as ɵHttpInterceptingHandler} 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 000000000000..c2a589b01f26
--- /dev/null
+++ b/packages/common/http/rollup.config.js
@@ -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
+ */
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/common': 'ng.common',
+  'rxjs': 'rxjs',
+  'rxjs/operators': 'rxjs.operators',
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/common/fesm5/http.js',
+  dest: '../../../dist/packages-dist/common/bundles/common-http.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/common/http'},
+  moduleName: 'ng.common.http',
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/common/http/src/backend.ts b/packages/common/http/src/backend.ts
new file mode 100644
index 000000000000..1c0c84cf5fc0
--- /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';
+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.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+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 000000000000..5b604d54338f
--- /dev/null
+++ b/packages/common/http/src/client.ts
@@ -0,0 +1,1990 @@
+/**
+ * @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, of } from 'rxjs';
+import {concatMap, filter, map} from 'rxjs/operators';
+
+import {HttpHandler} from './backend';
+import {HttpHeaders} from './headers';
+import {HttpParams, HttpParamsOptions} 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 | {[header: string]: string | string[]},
+      observe?: HttpObserve,
+      params?: HttpParams | {[param: string]: string | string[]},
+      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,
+  };
+}
+
+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`).
+ *
+ *
+ */
+@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|{[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    reportProgress?: boolean,
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    reportProgress?: boolean,
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    reportProgress?: boolean,
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    reportProgress?: boolean,
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    params?: HttpParams|{[param: string]: string | string[]},
+    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|{[header: string]: string | string[]},
+    observe?: HttpObserve,
+    params?: HttpParams|{[param: string]: string | string[]},
+    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.
+
+      // Figure out the headers.
+      let headers: HttpHeaders|undefined = undefined;
+      if (options.headers instanceof HttpHeaders) {
+        headers = options.headers;
+      } else {
+        headers = new HttpHeaders(options.headers);
+      }
+
+      // Sort out parameters.
+      let params: HttpParams|undefined = undefined;
+      if (!!options.params) {
+        if (options.params instanceof HttpParams) {
+          params = options.params;
+        } else {
+          params = new HttpParams({ fromObject: options.params } as HttpParamsOptions);
+        }
+      }
+
+      // Construct the request.
+      req = new HttpRequest(first, url !, (options.body !== undefined ? options.body : null), {
+        headers,
+        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>> =
+        of (req).pipe(concatMap((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>> = <Observable<HttpResponse<any>>>events$.pipe(
+        filter((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 res$.pipe(map((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 res$.pipe(map((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 res$.pipe(map((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 res$.pipe(map((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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: HttpObserve,
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: HttpObserve,
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<string>;
+
+  /**
+   * Construct a HEAD 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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: HttpObserve,
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<Blob>;
+
+  /**
+   * Construct an 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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: HttpObserve,
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: HttpObserve,
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<string>;
+
+  /**
+   * Construct a POST 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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: HttpObserve,
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'events',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe: 'response',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 | {[header: string]: string | string[]},
+    observe?: 'body',
+    params?: HttpParams|{[param: string]: string | string[]},
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<T>;
+
+  /**
+   * Constructs an `Observable` which, when subscribed, will cause the configured
+   * PUT request to be executed on the server. See the individual overloads for
+   * details of `put()`'s return type based on the provided options.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders | {[header: string]: string | string[]},
+    observe?: HttpObserve,
+    params?: HttpParams|{[param: string]: string | string[]},
+    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 000000000000..a4c39e4f217f
--- /dev/null
+++ b/packages/common/http/src/headers.ts
@@ -0,0 +1,216 @@
+/**
+ * @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.
+ *
+ */
+export class HttpHeaders {
+  /**
+   * Internal map of lowercase header names to values.
+   */
+  // TODO(issue/24571): remove '!'.
+  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).
+   */
+  // TODO(issue/24571): remove '!'.
+  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 000000000000..cb1f8990fca1
--- /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';
+
+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.
+ *
+ *
+ */
+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`.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+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 000000000000..b00267504717
--- /dev/null
+++ b/packages/common/http/src/jsonp.ts
@@ -0,0 +1,222 @@
+/**
+ * @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} from '@angular/core';
+import {Observable, Observer} from 'rxjs';
+
+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.
+ *
+ *
+ */
+export abstract class JsonpCallbackContext { [key: string]: (data: any) => void; }
+
+/**
+ * `HttpBackend` that only processes `HttpRequest` with the JSONP method,
+ * by performing JSONP style requests.
+ *
+ *
+ */
+@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 response 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`.
+ *
+ *
+ */
+@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 000000000000..feceb505e0c2
--- /dev/null
+++ b/packages/common/http/src/module.ts
@@ -0,0 +1,183 @@
+/**
+ * @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, Injector, ModuleWithProviders, NgModule} from '@angular/core';
+import {Observable} from 'rxjs';
+
+import {HttpBackend, HttpHandler} from './backend';
+import {HttpClient} from './client';
+import {HTTP_INTERCEPTORS, HttpInterceptor, HttpInterceptorHandler, NoopInterceptor} from './interceptor';
+import {JsonpCallbackContext, JsonpClientBackend, JsonpInterceptor} from './jsonp';
+import {HttpRequest} from './request';
+import {HttpEvent} from './response';
+import {BrowserXhr, HttpXhrBackend, XhrFactory} from './xhr';
+import {HttpXsrfCookieExtractor, HttpXsrfInterceptor, HttpXsrfTokenExtractor, XSRF_COOKIE_NAME, XSRF_HEADER_NAME} from './xsrf';
+
+/**
+ * An injectable `HttpHandler` that applies multiple interceptors
+ * to a request before passing it to the given `HttpBackend`.
+ *
+ * The interceptors are loaded lazily from the injector, to allow
+ * interceptors to themselves inject classes depending indirectly
+ * on `HttpInterceptingHandler` itself.
+ * @see `HttpInterceptor`
+ */
+@Injectable()
+export class HttpInterceptingHandler implements HttpHandler {
+  private chain: HttpHandler|null = null;
+
+  constructor(private backend: HttpBackend, private injector: Injector) {}
+
+  handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+    if (this.chain === null) {
+      const interceptors = this.injector.get(HTTP_INTERCEPTORS, []);
+      this.chain = interceptors.reduceRight(
+          (next, interceptor) => new HttpInterceptorHandler(next, interceptor), this.backend);
+    }
+    return this.chain.handle(req);
+  }
+}
+
+/**
+ * Constructs an `HttpHandler` that applies interceptors
+ * to a request before passing it to the given `HttpBackend`.
+ *
+ * Use as a factory function within `HttpClientModule`.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+export function jsonpCallbackContext(): Object {
+  if (typeof window === 'object') {
+    return window;
+  }
+  return {};
+}
+
+/**
+ * An NgModule that adds XSRF protection support to outgoing requests.
+ *
+ * For a server that supports a cookie-based XSRF protection system,
+ * use directly to configure XSRF protection with the correct
+ * cookie and header names.
+ *
+ * If no names are supplied, the default cookie name is `XSRF-TOKEN`
+ * and the default header name is `X-XSRF-TOKEN`.
+ *
+ *
+ */
+@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.
+   * @param options An object that can specify either or both
+   * cookie name or header name.
+   * - Cookie name default is `XSRF-TOKEN`.
+   * - Header name default is `X-XSRF-TOKEN`.
+   *
+   */
+  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} : [],
+      ],
+    };
+  }
+}
+
+/**
+ * An NgModule that provides the `HttpClient` and associated services.
+ *
+ * Interceptors can be added to the chain behind `HttpClient` by binding them
+ * to the multiprovider for `HTTP_INTERCEPTORS`.
+ *
+ *
+ */
+@NgModule({
+  /**
+   * Optional configuration for XSRF protection.
+   */
+  imports: [
+    HttpClientXsrfModule.withOptions({
+      cookieName: 'XSRF-TOKEN',
+      headerName: 'X-XSRF-TOKEN',
+    }),
+  ],
+  /**
+   * The module provides `HttpClient` itself, and supporting services.
+   */
+  providers: [
+    HttpClient,
+    {provide: HttpHandler, useClass: HttpInterceptingHandler},
+    HttpXhrBackend,
+    {provide: HttpBackend, useExisting: HttpXhrBackend},
+    BrowserXhr,
+    {provide: XhrFactory, useExisting: BrowserXhr},
+  ],
+})
+export class HttpClientModule {
+}
+
+/**
+ * An NgModule that enables JSONP support in `HttpClient`.
+ *
+ * Without this module, Jsonp requests will reach the backend
+ * with method JSONP, where they'll be rejected.
+ *
+ *
+ */
+@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 000000000000..09c9cf423997
--- /dev/null
+++ b/packages/common/http/src/params.ts
@@ -0,0 +1,231 @@
+/**
+ * @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`.
+ *
+ *
+ **/
+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.
+ *
+ *
+ */
+export class HttpUrlEncodingCodec implements HttpParameterCodec {
+  encodeKey(key: string): string { return standardEncoding(key); }
+
+  encodeValue(value: string): string { return standardEncoding(value); }
+
+  decodeKey(key: string): string { return decodeURIComponent(key); }
+
+  decodeValue(value: string) { return decodeURIComponent(value); }
+}
+
+
+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';
+}
+
+/** Options used to construct an `HttpParams` instance. */
+export interface HttpParamsOptions {
+  /**
+   * String representation of the HTTP params in URL-query-string format. Mutually exclusive with
+   * `fromObject`.
+   */
+  fromString?: string;
+
+  /** Object map of the HTTP params. Mutally exclusive with `fromString`. */
+  fromObject?: {[param: string]: string | string[]};
+
+  /** Encoding codec used to parse and serialize the params. */
+  encoder?: HttpParameterCodec;
+}
+
+/**
+ * An HTTP request/response body that represents serialized parameters,
+ * per the MIME type `application/x-www-form-urlencoded`.
+ *
+ * This class is immutable - all mutation operations return a new instance.
+ *
+ *
+ */
+export class HttpParams {
+  private map: Map<string, string[]>|null;
+  private encoder: HttpParameterCodec;
+  private updates: Update[]|null = null;
+  private cloneFrom: HttpParams|null = null;
+
+  constructor(options: HttpParamsOptions = {} as HttpParamsOptions) {
+    this.encoder = options.encoder || new HttpUrlEncodingCodec();
+    if (!!options.fromString) {
+      if (!!options.fromObject) {
+        throw new Error(`Cannot specify both fromString and fromObject.`);
+      }
+      this.map = paramParser(options.fromString, this.encoder);
+    } else if (!!options.fromObject) {
+      this.map = new Map<string, string[]>();
+      Object.keys(options.fromObject).forEach(key => {
+        const value = (options.fromObject as any)[key];
+        this.map !.set(key, Array.isArray(value) ? value : [value]);
+      });
+    } else {
+      this.map = 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 } as HttpParamsOptions);
+    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 000000000000..30413cb8da93
--- /dev/null
+++ b/packages/common/http/src/request.ts
@@ -0,0 +1,387 @@
+/**
+ * @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.
+ *
+ *
+ */
+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.
+   */
+  // TODO(issue/24571): remove '!'.
+  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.
+   */
+  // TODO(issue/24571): remove '!'.
+  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 !== undefined) ? 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 000000000000..9a72499030a6
--- /dev/null
+++ b/packages/common/http/src/response.ts
@@ -0,0 +1,330 @@
+/**
+ * @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`.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+export type HttpEvent<T> =
+    HttpSentEvent | HttpHeaderResponse | HttpResponse<T>| HttpProgressEvent | HttpUserEvent<T>;
+
+/**
+ * Base class for both `HttpResponse` and `HttpHeaderResponse`.
+ *
+ *
+ */
+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.
+   */
+  // TODO(issue/24571): remove '!'.
+  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.
+ *
+ *
+ */
+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.
+ *
+ *
+ */
+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 !== undefined ? 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.
+ *
+ *
+ */
+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 000000000000..c0583c10a764
--- /dev/null
+++ b/packages/common/http/src/xhr.ts
@@ -0,0 +1,338 @@
+/**
+ * @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, Observer} from 'rxjs';
+
+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.
+ *
+ *
+ */
+export abstract class XhrFactory { abstract build(): XMLHttpRequest; }
+
+/**
+ * A factory for @{link HttpXhrBackend} that uses the `XMLHttpRequest` browser API.
+ *
+ *
+ */
+@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.
+ *
+ *
+ */
+@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) {
+        const responseType = req.responseType.toLowerCase();
+
+        // JSON responses need to be processed as text. This is because if the server
+        // returns an XSSI-prefixed JSON response, the browser will fail to parse it,
+        // xhr.response will be null, and xhr.responseText cannot be accessed to
+        // retrieve the prefixed JSON data in order to strip the prefix. Thus, all JSON
+        // is parsed by first requesting text and then applying JSON.parse.
+        xhr.responseType = ((responseType !== 'json') ? responseType : 'text') 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;
+        }
+
+        // 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 (req.responseType === 'json' && typeof body === 'string') {
+          // Save the original body, before attempting XSSI prefix stripping.
+          const originalBody = body;
+          body = body.replace(XSSI_PREFIX, '');
+          try {
+            // Attempt the parse. If it fails, a parse error should be delivered to the user.
+            body = body !== '' ? JSON.parse(body) : null;
+          } catch (error) {
+            // Since the JSON.parse failed, it's reasonable to assume this might not have been a
+            // JSON response. Restore the original body (including any XSSI prefix) to deliver
+            // a better error response.
+            body = originalBody;
+
+            // If this was an error request to begin with, leave it as a string, it probably
+            // just isn't JSON. Otherwise, deliver the parsing error to the user.
+            if (ok) {
+              // 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 000000000000..98089874ae01
--- /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';
+
+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.
+ *
+ *
+ */
+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/BUILD.bazel b/packages/common/http/test/BUILD.bazel
new file mode 100644
index 000000000000..3f01fc2c3776
--- /dev/null
+++ b/packages/common/http/test/BUILD.bazel
@@ -0,0 +1,35 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*_node_only_spec.ts"],
+    ),
+    deps = [
+        "//packages/common/http",
+        "//packages/common/http/testing",
+        "//packages/core",
+        "//packages/core/testing",
+        "@rxjs",
+        "@rxjs//operators",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/common/http/test/client_spec.ts b/packages/common/http/test/client_spec.ts
new file mode 100644
index 000000000000..9c9942af7b7d
--- /dev/null
+++ b/packages/common/http/test/client_spec.ts
@@ -0,0 +1,166 @@
+/**
+ * @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, fit, it} from '@angular/core/testing/src/testing_internal';
+import {toArray} from 'rxjs/operators';
+
+import {HttpClient} from '../src/client';
+import {HttpErrorResponse, HttpEventType, HttpResponse} from '../src/response';
+import {HttpClientTestingBackend} from '../testing/src/backend';
+
+{
+  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 => {
+        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 => {
+        client.get('/test', {responseType: 'text'}).subscribe(res => {
+          expect(res).toEqual('hello world');
+          done();
+        });
+        backend.expectOne('/test').flush('hello world');
+      });
+      it('with headers', done => {
+        client.get('/test', {headers: {'X-Option': 'true'}}).subscribe(() => done());
+        const req = backend.expectOne('/test');
+        expect(req.request.headers.get('X-Option')).toEqual('true');
+        req.flush({});
+      });
+      it('with params', done => {
+        client.get('/test', {params: {'test': 'true'}}).subscribe(() => done());
+        backend.expectOne('/test?test=true').flush({});
+      });
+      it('for an arraybuffer', done => {
+        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 => {
+          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 => {
+        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 => {
+        client.get('/test', {observe: 'events'}).pipe(toArray()).toPromise().then(events => {
+          expect(events.length).toBe(2);
+          let x = HttpResponse;
+          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 => {
+        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 => {
+        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 => {
+        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 a json body of false', done => {
+        client.post('/test', false, {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(false);
+        testReq.flush('hello world');
+      });
+      it('with a json body of 0', done => {
+        client.post('/test', 0, {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(0);
+        testReq.flush('hello world');
+      });
+      it('with an arraybuffer', done => {
+        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 => {
+        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 => {
+        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 000000000000..e26b07f4d79b
--- /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';
+
+{
+  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 000000000000..7b2345d7c349
--- /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 {
+  // TODO(issue/24571): remove '!'.
+  mock !: MockScriptElement | null;
+  readonly body: any = this;
+
+  createElement(tag: 'script'): HTMLScriptElement {
+    return new MockScriptElement() as any as HTMLScriptElement;
+  }
+
+  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); }
+}
diff --git a/packages/common/http/test/jsonp_spec.ts b/packages/common/http/test/jsonp_spec.ts
new file mode 100644
index 000000000000..2d0fef287d29
--- /dev/null
+++ b/packages/common/http/test/jsonp_spec.ts
@@ -0,0 +1,76 @@
+/**
+ * @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 {toArray} from 'rxjs/operators';
+
+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');
+
+{
+  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 => {
+      backend.handle(SAMPLE_REQ).pipe(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 => {
+      const error = new Error('This is a test error');
+      backend.handle(SAMPLE_REQ).pipe(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 => {
+        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 000000000000..33dd1a47edbf
--- /dev/null
+++ b/packages/common/http/test/module_spec.ts
@@ -0,0 +1,106 @@
+/**
+ * @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 {Injectable, Injector} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+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).pipe(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'); }
+}
+
+@Injectable()
+class ReentrantInterceptor implements HttpInterceptor {
+  constructor(private client: HttpClient) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(req);
+  }
+}
+
+{
+  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 => {
+      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 => {
+      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 => {
+      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!');
+    });
+    it('allows interceptors to inject HttpClient', done => {
+      TestBed.resetTestingModule();
+      injector = TestBed.configureTestingModule({
+        imports: [HttpClientTestingModule],
+        providers: [
+          {provide: HTTP_INTERCEPTORS, useClass: ReentrantInterceptor, multi: true},
+        ],
+      });
+      injector.get(HttpClient).get('/test').subscribe(() => { 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 000000000000..304ebb1ec24a
--- /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';
+
+{
+  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 000000000000..d5ed4549adfc
--- /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!`;
+
+{
+  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 000000000000..c2e116a08e56
--- /dev/null
+++ b/packages/common/http/test/response_spec.ts
@@ -0,0 +1,82 @@
+/**
+ * @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';
+
+{
+  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('accepts a falsy body', () => {
+        expect(new HttpResponse({body: false}).body).toEqual(false);
+        expect(new HttpResponse({body: 0}).body).toEqual(0);
+      });
+    });
+    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 000000000000..419d4af7e7c2
--- /dev/null
+++ b/packages/common/http/test/xhr_mock.ts
@@ -0,0 +1,122 @@
+/**
+ * @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 {
+  // TODO(issue/24571): remove '!'.
+  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;
+  // TODO(issue/24571): remove '!'.
+  method !: string;
+  // TODO(issue/24571): remove '!'.
+  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?: string) {
+    if (typeof body === 'string') {
+      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 000000000000..4218532c88a1
--- /dev/null
+++ b/packages/common/http/test/xhr_spec.ts
@@ -0,0 +1,351 @@
+/**
+ * @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, fit, it} from '@angular/core/testing/src/testing_internal';
+import {Observable} from 'rxjs';
+import {toArray} from 'rxjs/operators';
+
+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), err => events.push(err));
+  return events;
+}
+
+const TEST_POST = new HttpRequest('POST', '/test', 'some body', {
+  responseType: 'text',
+});
+
+const XSSI_PREFIX = ')]}\'\n';
+
+{
+  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', 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('handles a blank json response', () => {
+      const events = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+      factory.mock.mockFlush(200, 'OK', '');
+      expect(events.length).toBe(2);
+      const res = events[1] as HttpResponse<{data: string}>;
+      expect(res.body).toBeNull();
+    });
+    it('handles a json error response', () => {
+      const events = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+      factory.mock.mockFlush(500, 'Error', JSON.stringify({data: 'some data'}));
+      expect(events.length).toBe(2);
+      const res = events[1] as any as HttpErrorResponse;
+      expect(res.error !.data).toBe('some data');
+    });
+    it('handles a json error response with XSSI prefix', () => {
+      const events = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+      factory.mock.mockFlush(500, 'Error', XSSI_PREFIX + JSON.stringify({data: 'some data'}));
+      expect(events.length).toBe(2);
+      const res = events[1] as any as HttpErrorResponse;
+      expect(res.error !.data).toBe('some data');
+    });
+    it('handles a json string response', () => {
+      const events = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+      expect(factory.mock.responseType).toEqual('text');
+      factory.mock.mockFlush(200, 'OK', JSON.stringify('this is a string'));
+      expect(events.length).toBe(2);
+      const res = events[1] as HttpResponse<string>;
+      expect(res.body).toEqual('this is a string');
+    });
+    it('handles a json response with an XSSI prefix', () => {
+      const events = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+      factory.mock.mockFlush(200, 'OK', XSSI_PREFIX + 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 => {
+      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 => {
+      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 => {
+        backend.handle(TEST_POST.clone({reportProgress: true}))
+            .pipe(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 => {
+        backend.handle(TEST_POST.clone({reportProgress: true}))
+            .pipe(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 => {
+        backend.handle(TEST_POST.clone({reportProgress: true}))
+            .pipe(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 => {
+        backend.handle(TEST_POST.clone({reportProgress: true}))
+            .pipe(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 => {
+        backend.handle(TEST_POST.clone({reportProgress: true}))
+            .pipe(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 => {
+        backend.handle(TEST_POST.clone({reportProgress: true}))
+            .pipe(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 => {
+        backend.handle(TEST_POST).pipe(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 => {
+        backend.handle(TEST_POST).pipe(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 => {
+        backend.handle(TEST_POST).pipe(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 => {
+        backend.handle(TEST_POST).pipe(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 => {
+        backend.handle(TEST_POST).pipe(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 => {
+        backend.handle(TEST_POST).pipe(toArray()).subscribe(
+            undefined, (error: HttpErrorResponse) => {
+              expect(error.status).toBe(0);
+              done();
+            });
+        factory.mock.mockFlush(0, 'CORS 0 status');
+      });
+    });
+  });
+}
diff --git a/packages/common/http/test/xsrf_spec.ts b/packages/common/http/test/xsrf_spec.ts
new file mode 100644
index 000000000000..02a1569b0712
--- /dev/null
+++ b/packages/common/http/test/xsrf_spec.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 {HttpRequest} from '../src/request';
+import {HttpXsrfCookieExtractor, HttpXsrfInterceptor, HttpXsrfTokenExtractor} from '../src/xsrf';
+
+import {HttpClientTestingBackend} from '../testing/src/backend';
+
+class SampleTokenExtractor extends HttpXsrfTokenExtractor {
+  constructor(private token: string|null) { super(); }
+
+  getToken(): string|null { return this.token; }
+}
+
+{
+  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(getParseCount(extractor)).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(getParseCount(extractor)).toEqual(2);
+    });
+  });
+}
+
+function getParseCount(extractor: HttpXsrfCookieExtractor): number {
+  return (extractor as any).parseCount;
+}
\ No newline at end of file
diff --git a/packages/common/http/testing/BUILD.bazel b/packages/common/http/testing/BUILD.bazel
new file mode 100644
index 000000000000..d206a794127b
--- /dev/null
+++ b/packages/common/http/testing/BUILD.bazel
@@ -0,0 +1,21 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/common/http/testing",
+    deps = [
+        "//packages/common/http",
+        "//packages/core",
+        "@rxjs",
+    ],
+)
diff --git a/packages/common/http/testing/index.ts b/packages/common/http/testing/index.ts
new file mode 100644
index 000000000000..f93e7c31d564
--- /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 000000000000..4eb691bf3a29
--- /dev/null
+++ b/packages/common/http/testing/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/common/http/testing",
+  "typings": "./testing.d.ts",
+  "main": "../../bundles/common-http-testing.umd.js",
+  "module": "../../fesm5/http/testing.js",
+  "es2015": "../../fesm2015/http/testing.js",
+  "esm5": "../../esm5/http/testing.js",
+  "esm2015": "../../esm2015/http/testing.js",
+  "fesm5": "../../fesm5/http/testing.js",
+  "fesm2015": "../../fesm2015/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 000000000000..c42e3300b6c5
--- /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 000000000000..50ab5a54ee45
--- /dev/null
+++ b/packages/common/http/testing/rollup.config.js
@@ -0,0 +1,31 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/common': 'ng.common',
+  '@angular/common/http': 'ng.common.http',
+  'rxjs': 'rxjs',
+  'rxjs/operators': 'rxjs.operators',
+};
+
+module.exports = {
+  entry: '../../../../dist/packages-dist/common/fesm5/http/testing.js',
+  dest: '../../../../dist/packages-dist/common/bundles/common-http-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/common/http/testing'},
+  moduleName: 'ng.common.http.testing',
+  plugins: [resolve(), sourcemaps()],
+  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 000000000000..c5a4afdb717e
--- /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.
+ *
+ *
+ */
+export interface RequestMatch {
+  method?: string;
+  url?: string;
+}
+
+/**
+ * Controller to be injected into tests, that allows for mocking and flushing
+ * of requests.
+ *
+ *
+ */
+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 000000000000..d5311fd5512c
--- /dev/null
+++ b/packages/common/http/testing/src/backend.ts
@@ -0,0 +1,146 @@
+/**
+ * @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, Observer} from 'rxjs';
+
+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.
+ *
+ *
+ */
+@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 000000000000..68c8fb0ae036
--- /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.
+ *
+ *
+ */
+@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 000000000000..37fa3ff9cb3c
--- /dev/null
+++ b/packages/common/http/testing/src/request.ts
@@ -0,0 +1,202 @@
+/**
+ * @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, HttpHeaders, HttpRequest, HttpResponse} from '@angular/common/http';
+import {Observer} from 'rxjs';
+
+/**
+ * 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.
+ *
+ *
+ */
+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 {
+  if (body === null) {
+    return null;
+  }
+  switch (responseType) {
+    case 'arraybuffer':
+      return _toArrayBufferBody(body);
+    case 'blob':
+      return _toBlob(body);
+    case 'json':
+      return _toJsonBody(body);
+    case 'text':
+      return _toTextBody(body);
+    default:
+      throw new Error(`Unsupported responseType: ${responseType}`);
+  }
+}
diff --git a/packages/common/http/testing/test/request_spec.ts b/packages/common/http/testing/test/request_spec.ts
new file mode 100644
index 000000000000..777c18dfc08a
--- /dev/null
+++ b/packages/common/http/testing/test/request_spec.ts
@@ -0,0 +1,27 @@
+/**
+ * @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, fit, it} from '@angular/core/testing/src/testing_internal';
+
+import {HttpClient} from '../../src/client';
+import {HttpClientTestingBackend} from '../src/backend';
+
+describe('HttpClient TestRequest', () => {
+  it('accepts a null body', () => {
+    const mock = new HttpClientTestingBackend();
+    const client = new HttpClient(mock);
+
+    let resp: any;
+    client.post('/some-url', {test: 'test'}).subscribe(body => { resp = body; });
+
+    const req = mock.expectOne('/some-url');
+    req.flush(null);
+
+    expect(resp).toBeNull();
+  });
+});
diff --git a/packages/common/http/testing/tsconfig-build.json b/packages/common/http/testing/tsconfig-build.json
new file mode 100644
index 000000000000..9d37f9938396
--- /dev/null
+++ b/packages/common/http/testing/tsconfig-build.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../../",
+    "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"]
+    },
+    "outDir": "../../../../dist/packages/common"
+  },
+
+  "files": [
+    "public_api.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "testing.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 000000000000..39180a20d244
--- /dev/null
+++ b/packages/common/http/tsconfig-build.json
@@ -0,0 +1,25 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/common": ["../../../dist/packages/common"],
+      "@angular/core": ["../../../dist/packages/core"]
+    },
+    "outDir": "../../../dist/packages/common"
+  },
+
+  "files": [
+    "public_api.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "http.js",
+    "flatModuleId": "@angular/common/http"
+  }
+}
diff --git a/packages/common/index.ts b/packages/common/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/common/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';
diff --git a/packages/common/locales/BUILD.bazel b/packages/common/locales/BUILD.bazel
new file mode 100644
index 000000000000..07be1c9fc141
--- /dev/null
+++ b/packages/common/locales/BUILD.bazel
@@ -0,0 +1,31 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "npm_package", "ts_library")
+
+ts_library(
+    name = "locales",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["closure-locale.ts"],
+    ),
+    module_name = "@angular/common/locales",
+)
+
+npm_package(
+    name = "package",
+    srcs = ["package.json"],
+    replacements = {
+        # Workaround for https://github.com/angular/angular/issues/23217
+        # Webpack will detect that the UMD outputs from TypeScript pass the
+        # `require` function into the module, and cannot accurately track
+        # dependencies in case require was called.
+        # We don't actually import anything in the locale code so we can
+        # null out the require reference passed into the module.
+        "factory\(require, exports\)": "factory(null, exports)",
+
+        # Workaround for `.d.ts`` containing `/// <amd-module .../>`
+        # which are generated in TypeScript v2.9, but not before.
+        "/// <amd-module name=.*/>": "",
+    },
+    deps = [":locales"],
+)
diff --git a/packages/common/locales/af-NA.ts b/packages/common/locales/af-NA.ts
new file mode 100644
index 000000000000..6352736d92aa
--- /dev/null
+++ b/packages/common/locales/af-NA.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'af-NA', [['v', 'n'], ['vm.', 'nm.'], u], u,
+  [
+    ['S', 'M', 'D', 'W', 'D', 'V', 'S'], ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.'],
+    ['Sondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrydag', 'Saterdag'],
+    ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan.', 'Feb.', 'Mrt.', 'Apr.', 'Mei', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Des.'],
+    [
+      'Januarie', 'Februarie', 'Maart', 'April', 'Mei', 'Junie', 'Julie', 'Augustus', 'September',
+      'Oktober', 'November', 'Desember'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], u, ['voor Christus', 'na Christus']], 1, [6, 0],
+  ['y-MM-dd', 'dd MMM y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'R', 'Suid-Afrikaanse rand', {
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'NAD': ['$'],
+    'RON': [u, 'leu'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'ZAR': ['R']
+  },
+  plural
+];
diff --git a/packages/common/locales/af.ts b/packages/common/locales/af.ts
new file mode 100644
index 000000000000..384559a0612f
--- /dev/null
+++ b/packages/common/locales/af.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'af', [['v', 'n'], ['vm.', 'nm.'], u], u,
+  [
+    ['S', 'M', 'D', 'W', 'D', 'V', 'S'], ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.'],
+    ['Sondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrydag', 'Saterdag'],
+    ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan.', 'Feb.', 'Mrt.', 'Apr.', 'Mei', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Des.'],
+    [
+      'Januarie', 'Februarie', 'Maart', 'April', 'Mei', 'Junie', 'Julie', 'Augustus', 'September',
+      'Oktober', 'November', 'Desember'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], u, ['voor Christus', 'na Christus']], 0, [6, 0],
+  ['y-MM-dd', 'dd MMM y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'R', 'Suid-Afrikaanse rand', {
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'RON': [u, 'leu'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'ZAR': ['R']
+  },
+  plural
+];
diff --git a/packages/common/locales/agq.ts b/packages/common/locales/agq.ts
new file mode 100644
index 000000000000..151a73c726b2
--- /dev/null
+++ b/packages/common/locales/agq.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'agq', [['a.g', 'a.k'], u, u], u,
+  [
+    ['n', 'k', 'g', 't', 'u', 'g', 'd'], ['nts', 'kpa', 'ghɔ', 'tɔm', 'ume', 'ghɨ', 'dzk'],
+    [
+      'tsuʔntsɨ', 'tsuʔukpà', 'tsuʔughɔe', 'tsuʔutɔ̀mlò', 'tsuʔumè', 'tsuʔughɨ̂m',
+      'tsuʔndzɨkɔʔɔ'
+    ],
+    ['nts', 'kpa', 'ghɔ', 'tɔm', 'ume', 'ghɨ', 'dzk']
+  ],
+  u,
+  [
+    ['n', 'k', 't', 't', 's', 'z', 'k', 'f', 'd', 'l', 'c', 'f'],
+    ['nùm', 'kɨz', 'tɨd', 'taa', 'see', 'nzu', 'dum', 'fɔe', 'dzu', 'lɔm', 'kaa', 'fwo'],
+    [
+      'ndzɔ̀ŋɔ̀nùm', 'ndzɔ̀ŋɔ̀kƗ̀zùʔ', 'ndzɔ̀ŋɔ̀tƗ̀dʉ̀ghà',
+      'ndzɔ̀ŋɔ̀tǎafʉ̄ghā', 'ndzɔ̀ŋèsèe', 'ndzɔ̀ŋɔ̀nzùghò',
+      'ndzɔ̀ŋɔ̀dùmlo', 'ndzɔ̀ŋɔ̀kwîfɔ̀e', 'ndzɔ̀ŋɔ̀tƗ̀fʉ̀ghàdzughù',
+      'ndzɔ̀ŋɔ̀ghǔuwelɔ̀m', 'ndzɔ̀ŋɔ̀chwaʔàkaa wo', 'ndzɔ̀ŋèfwòo'
+    ]
+  ],
+  u, [['SK', 'BK'], u, ['Sěe Kɨ̀lesto', 'Bǎa Kɨ̀lesto']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'FCFA', 'CFA Fàlâŋ BEAC',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ak.ts b/packages/common/locales/ak.ts
new file mode 100644
index 000000000000..ff4c7353ad66
--- /dev/null
+++ b/packages/common/locales/ak.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'ak', [['AN', 'EW'], u, u], u,
+  [
+    ['K', 'D', 'B', 'W', 'Y', 'F', 'M'], ['Kwe', 'Dwo', 'Ben', 'Wuk', 'Yaw', 'Fia', 'Mem'],
+    ['Kwesida', 'Dwowda', 'Benada', 'Wukuda', 'Yawda', 'Fida', 'Memeneda'],
+    ['Kwe', 'Dwo', 'Ben', 'Wuk', 'Yaw', 'Fia', 'Mem']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['S-Ɔ', 'K-Ɔ', 'E-Ɔ', 'E-O', 'E-K', 'O-A', 'A-K', 'D-Ɔ', 'F-Ɛ', 'Ɔ-A', 'Ɔ-O', 'M-Ɔ'],
+    [
+      'Sanda-Ɔpɛpɔn', 'Kwakwar-Ɔgyefuo', 'Ebɔw-Ɔbenem', 'Ebɔbira-Oforisuo',
+      'Esusow Aketseaba-Kɔtɔnimba', 'Obirade-Ayɛwohomumu', 'Ayɛwoho-Kitawonsa',
+      'Difuu-Ɔsandaa', 'Fankwa-Ɛbɔ', 'Ɔbɛsɛ-Ahinime', 'Ɔberɛfɛw-Obubuo', 'Mumu-Ɔpɛnimba'
+    ]
+  ],
+  u, [['AK', 'KE'], u, ['Ansa Kristo', 'Kristo Ekyiri']], 1, [6, 0],
+  ['yy/MM/dd', 'y MMM d', 'y MMMM d', 'EEEE, y MMMM dd'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'GH₵', 'Ghana Sidi',
+  {'GHS': ['GH₵'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/am.ts b/packages/common/locales/am.ts
new file mode 100644
index 000000000000..b8d4bf384a9d
--- /dev/null
+++ b/packages/common/locales/am.ts
@@ -0,0 +1,55 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'am', [['ጠ', 'ከ'], ['ጥዋት', 'ከሰዓት'], u], u,
+  [
+    ['እ', 'ሰ', 'ማ', 'ረ', 'ሐ', 'ዓ', 'ቅ'],
+    ['እሑድ', 'ሰኞ', 'ማክሰ', 'ረቡዕ', 'ሐሙስ', 'ዓርብ', 'ቅዳሜ'],
+    ['እሑድ', 'ሰኞ', 'ማክሰኞ', 'ረቡዕ', 'ሐሙስ', 'ዓርብ', 'ቅዳሜ'],
+    ['እ', 'ሰ', 'ማ', 'ረ', 'ሐ', 'ዓ', 'ቅ']
+  ],
+  u,
+  [
+    ['ጃ', 'ፌ', 'ማ', 'ኤ', 'ሜ', 'ጁ', 'ጁ', 'ኦ', 'ሴ', 'ኦ', 'ኖ', 'ዲ'],
+    [
+      'ጃንዩ', 'ፌብሩ', 'ማርች', 'ኤፕሪ', 'ሜይ', 'ጁን', 'ጁላይ',
+      'ኦገስ', 'ሴፕቴ', 'ኦክቶ', 'ኖቬም', 'ዲሴም'
+    ],
+    [
+      'ጃንዩወሪ', 'ፌብሩወሪ', 'ማርች', 'ኤፕሪል', 'ሜይ', 'ጁን',
+      'ጁላይ', 'ኦገስት', 'ሴፕቴምበር', 'ኦክቶበር', 'ኖቬምበር',
+      'ዲሴምበር'
+    ]
+  ],
+  u, [['ዓ/ዓ', 'ዓ/ም'], u, ['ዓመተ ዓለም', 'ዓመተ ምሕረት']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE ፣d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'ብር', 'የኢትዮጵያ ብር', {
+    'AUD': ['AU$', '$'],
+    'CNH': ['የቻይና ዩዋን'],
+    'ETB': ['ብር'],
+    'JPY': ['JP¥', '¥'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-AE.ts b/packages/common/locales/ar-AE.ts
new file mode 100644
index 000000000000..40c5f74cc9cc
--- /dev/null
+++ b/packages/common/locales/ar-AE.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-AE', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.إ.\u200f', 'درهم إماراتي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-BH.ts b/packages/common/locales/ar-BH.ts
new file mode 100644
index 000000000000..c9b18b66543c
--- /dev/null
+++ b/packages/common/locales/ar-BH.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-BH', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.ب.\u200f', 'دينار بحريني', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-DJ.ts b/packages/common/locales/ar-DJ.ts
new file mode 100644
index 000000000000..15dd691e61c0
--- /dev/null
+++ b/packages/common/locales/ar-DJ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-DJ', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [6, 0],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'Fdj', 'فرنك جيبوتي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DJF': ['Fdj'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-DZ.ts b/packages/common/locales/ar-DZ.ts
new file mode 100644
index 000000000000..e42886864eed
--- /dev/null
+++ b/packages/common/locales/ar-DZ.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-DZ', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ج', 'ف', 'م', 'أ', 'م', 'ج', 'ج', 'أ', 'س', 'أ', 'ن', 'د'],
+    [
+      'جانفي', 'فيفري', 'مارس', 'أفريل', 'ماي', 'جوان', 'جويلية',
+      'أوت', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    ',', '.', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.ج.\u200f', 'دينار جزائري', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-EG.ts b/packages/common/locales/ar-EG.ts
new file mode 100644
index 000000000000..16f9d55da62e
--- /dev/null
+++ b/packages/common/locales/ar-EG.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-EG', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ج.م.\u200f', 'جنيه مصري', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-EH.ts b/packages/common/locales/ar-EH.ts
new file mode 100644
index 000000000000..50b17a0d5471
--- /dev/null
+++ b/packages/common/locales/ar-EH.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-EH', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 1, [6, 0],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.م.\u200f', 'درهم مغربي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-ER.ts b/packages/common/locales/ar-ER.ts
new file mode 100644
index 000000000000..e6dd9c7f1bd1
--- /dev/null
+++ b/packages/common/locales/ar-ER.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-ER', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 1, [6, 0],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'Nfk', 'ناكفا أريتري', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'ERN': ['Nfk'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-IL.ts b/packages/common/locales/ar-IL.ts
new file mode 100644
index 000000000000..b4c183d107e1
--- /dev/null
+++ b/packages/common/locales/ar-IL.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-IL', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 0, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₪', 'شيكل إسرائيلي جديد', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-IQ.ts b/packages/common/locales/ar-IQ.ts
new file mode 100644
index 000000000000..0863f1d36654
--- /dev/null
+++ b/packages/common/locales/ar-IQ.ts
@@ -0,0 +1,116 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-IQ', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ك', 'ش', 'آ', 'ن', 'أ', 'ح', 'ت', 'آ', 'أ', 'ت', 'ت', 'ك'],
+    [
+      'كانون الثاني', 'شباط', 'آذار', 'نيسان', 'أيار', 'حزيران',
+      'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني',
+      'كانون الأول'
+    ],
+    [
+      'كانون الثاني', 'شباط', 'آذار', 'نيسان', 'أيار', 'حزيران',
+      'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني',
+      'كانون الأول'
+    ]
+  ],
+  [
+    ['ك', 'ش', 'آ', 'ن', 'أ', 'ح', 'ت', 'آ', 'أ', 'ت', 'ت', 'ك'],
+    [
+      'كانون الثاني', 'شباط', 'آذار', 'نيسان', 'أيار', 'حزيران',
+      'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني',
+      'كانون الأول'
+    ],
+    u
+  ],
+  [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.ع.\u200f', 'دينار عراقي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-JO.ts b/packages/common/locales/ar-JO.ts
new file mode 100644
index 000000000000..b5ec817f2d6b
--- /dev/null
+++ b/packages/common/locales/ar-JO.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-JO', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ك', 'ش', 'آ', 'ن', 'أ', 'ح', 'ت', 'آ', 'أ', 'ت', 'ت', 'ك'],
+    [
+      'كانون الثاني', 'شباط', 'آذار', 'نيسان', 'أيار', 'حزيران',
+      'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني',
+      'كانون الأول'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.أ.\u200f', 'دينار أردني', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-KM.ts b/packages/common/locales/ar-KM.ts
new file mode 100644
index 000000000000..0b43f11b0246
--- /dev/null
+++ b/packages/common/locales/ar-KM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-KM', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 1, [6, 0],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'CF', 'فرنك جزر القمر', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KMF': ['CF'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-KW.ts b/packages/common/locales/ar-KW.ts
new file mode 100644
index 000000000000..777e704d5fe0
--- /dev/null
+++ b/packages/common/locales/ar-KW.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-KW', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.ك.\u200f', 'دينار كويتي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-LB.ts b/packages/common/locales/ar-LB.ts
new file mode 100644
index 000000000000..d5849a657e0a
--- /dev/null
+++ b/packages/common/locales/ar-LB.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-LB', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ك', 'ش', 'آ', 'ن', 'أ', 'ح', 'ت', 'آ', 'أ', 'ت', 'ت', 'ك'],
+    [
+      'كانون الثاني', 'شباط', 'آذار', 'نيسان', 'أيار', 'حزيران',
+      'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني',
+      'كانون الأول'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 1, [6, 0],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    ',', '.', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ل.ل.\u200f', 'جنيه لبناني', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-LY.ts b/packages/common/locales/ar-LY.ts
new file mode 100644
index 000000000000..e1c649348fe3
--- /dev/null
+++ b/packages/common/locales/ar-LY.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-LY', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    ',', '.', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.ل.\u200f', 'دينار ليبي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-MA.ts b/packages/common/locales/ar-MA.ts
new file mode 100644
index 000000000000..26a78b524125
--- /dev/null
+++ b/packages/common/locales/ar-MA.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-MA', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'م', 'ن', 'ل', 'غ', 'ش', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'ماي', 'يونيو',
+      'يوليوز', 'غشت', 'شتنبر', 'أكتوبر', 'نونبر', 'دجنبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [
+    ',', '.', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.م.\u200f', 'درهم مغربي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-MR.ts b/packages/common/locales/ar-MR.ts
new file mode 100644
index 000000000000..861e426d7caa
--- /dev/null
+++ b/packages/common/locales/ar-MR.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-MR', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'إ', 'و', 'ن', 'ل', 'غ', 'ش', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغشت', 'شتمبر', 'أكتوبر', 'نوفمبر', 'دجمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 1, [6, 0],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    ',', '.', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'MRU', 'أوقية موريتانية', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-OM.ts b/packages/common/locales/ar-OM.ts
new file mode 100644
index 000000000000..ad30b567256a
--- /dev/null
+++ b/packages/common/locales/ar-OM.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-OM', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ر.ع.\u200f', 'ريال عماني', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-PS.ts b/packages/common/locales/ar-PS.ts
new file mode 100644
index 000000000000..44cd54c22de9
--- /dev/null
+++ b/packages/common/locales/ar-PS.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-PS', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ك', 'ش', 'آ', 'ن', 'أ', 'ح', 'ت', 'آ', 'أ', 'ت', 'ت', 'ك'],
+    [
+      'كانون الثاني', 'شباط', 'آذار', 'نيسان', 'أيار', 'حزيران',
+      'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني',
+      'كانون الأول'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 1, [6, 0],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₪', 'شيكل إسرائيلي جديد', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-QA.ts b/packages/common/locales/ar-QA.ts
new file mode 100644
index 000000000000..df8882865ae3
--- /dev/null
+++ b/packages/common/locales/ar-QA.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-QA', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ر.ق.\u200f', 'ريال قطري', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-SA.ts b/packages/common/locales/ar-SA.ts
new file mode 100644
index 000000000000..7309be6ed2b2
--- /dev/null
+++ b/packages/common/locales/ar-SA.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-SA', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 0, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '٪', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'ليس رقمًا', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ر.س.\u200f', 'ريال سعودي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-SD.ts b/packages/common/locales/ar-SD.ts
new file mode 100644
index 000000000000..0ea8d14c4bb2
--- /dev/null
+++ b/packages/common/locales/ar-SD.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-SD', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ج.س.', 'جنيه سوداني', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-SO.ts b/packages/common/locales/ar-SO.ts
new file mode 100644
index 000000000000..ffd2b4c9a37d
--- /dev/null
+++ b/packages/common/locales/ar-SO.ts
@@ -0,0 +1,100 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-SO', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 1, [6, 0],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '٪', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'ليس رقمًا', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'S', 'شلن صومالي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SOS': ['S'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-SS.ts b/packages/common/locales/ar-SS.ts
new file mode 100644
index 000000000000..48cb4d7c0141
--- /dev/null
+++ b/packages/common/locales/ar-SS.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-SS', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 1, [6, 0],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '£', 'جنيه جنوب السودان', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['GB£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SSP': ['£'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-SY.ts b/packages/common/locales/ar-SY.ts
new file mode 100644
index 000000000000..e5edc2a7920a
--- /dev/null
+++ b/packages/common/locales/ar-SY.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-SY', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ك', 'ش', 'آ', 'ن', 'أ', 'ح', 'ت', 'آ', 'أ', 'ت', 'ت', 'ك'],
+    [
+      'كانون الثاني', 'شباط', 'آذار', 'نيسان', 'أيار', 'حزيران',
+      'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني',
+      'كانون الأول'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ل.س.\u200f', 'ليرة سورية', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-TD.ts b/packages/common/locales/ar-TD.ts
new file mode 100644
index 000000000000..a75edd3328e4
--- /dev/null
+++ b/packages/common/locales/ar-TD.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-TD', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 1, [6, 0],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'FCFA', 'فرنك وسط أفريقي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-TN.ts b/packages/common/locales/ar-TN.ts
new file mode 100644
index 000000000000..9c8e0cbecd83
--- /dev/null
+++ b/packages/common/locales/ar-TN.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-TN', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ج', 'ف', 'م', 'أ', 'م', 'ج', 'ج', 'أ', 'س', 'أ', 'ن', 'د'],
+    [
+      'جانفي', 'فيفري', 'مارس', 'أفريل', 'ماي', 'جوان', 'جويلية',
+      'أوت', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 0, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    ',', '.', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.ت.\u200f', 'دينار تونسي', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar-YE.ts b/packages/common/locales/ar-YE.ts
new file mode 100644
index 000000000000..455a25dacc75
--- /dev/null
+++ b/packages/common/locales/ar-YE.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar-YE', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 0, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ر.ي.\u200f', 'ريال يمني', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/ar.ts b/packages/common/locales/ar.ts
new file mode 100644
index 000000000000..d7f6eb47195e
--- /dev/null
+++ b/packages/common/locales/ar.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export default [
+  'ar', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    [
+      'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس',
+      'الجمعة', 'السبت'
+    ],
+    u, ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞',
+    'ليس رقمًا', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ج.م.\u200f', 'جنيه مصري', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural
+];
diff --git a/packages/common/locales/as.ts b/packages/common/locales/as.ts
new file mode 100644
index 000000000000..b2e032bbd58f
--- /dev/null
+++ b/packages/common/locales/as.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'as', [['পূৰ্বাহ্ন', 'অপৰাহ্ন'], u, u], u,
+  [
+    ['দ', 'স', 'ম', 'ব', 'ব', 'শ', 'শ'],
+    [
+      'দেও', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহ', 'শুক্ৰ',
+      'শনি'
+    ],
+    [
+      'দেওবাৰ', 'সোমবাৰ', 'মঙ্গলবাৰ', 'বুধবাৰ',
+      'বৃহস্পতিবাৰ', 'শুক্ৰবাৰ', 'শনিবাৰ'
+    ],
+    [
+      'দেও', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহ', 'শুক্ৰ',
+      'শনি'
+    ]
+  ],
+  u,
+  [
+    ['জ', 'ফ', 'ম', 'এ', 'ম', 'জ', 'জ', 'আ', 'ছ', 'অ', 'ন', 'ড'],
+    [
+      'জানু', 'ফেব্ৰু', 'মাৰ্চ', 'এপ্ৰিল', 'মে’',
+      'জুন', 'জুলাই', 'আগ', 'ছেপ্তে', 'অক্টো',
+      'নৱে', 'ডিচে'
+    ],
+    [
+      'জানুৱাৰী', 'ফেব্ৰুৱাৰী', 'মাৰ্চ',
+      'এপ্ৰিল', 'মে’', 'জুন', 'জুলাই', 'আগষ্ট',
+      'ছেপ্তেম্বৰ', 'অক্টোবৰ', 'নৱেম্বৰ',
+      'ডিচেম্বৰ'
+    ]
+  ],
+  u,
+  [
+    ['খ্ৰীঃ পূঃ', 'খ্ৰীঃ'], u,
+    ['খ্ৰীষ্টপূৰ্ব', 'খ্ৰীষ্টাব্দ']
+  ],
+  0, [0, 0], ['d-M-y', 'dd-MM-y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['a h.mm', 'a h.mm.ss', 'a h.mm.ss z', 'a h.mm.ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], '₹',
+  'ভাৰতীয় ৰুপী', {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/asa.ts b/packages/common/locales/asa.ts
new file mode 100644
index 000000000000..eae0cd5e9035
--- /dev/null
+++ b/packages/common/locales/asa.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'asa', [['icheheavo', 'ichamthi'], u, u], u,
+  [
+    ['J', 'J', 'J', 'J', 'A', 'I', 'J'], ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Ijm', 'Jmo'],
+    ['Jumapili', 'Jumatatu', 'Jumanne', 'Jumatano', 'Alhamisi', 'Ijumaa', 'Jumamosi'],
+    ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Ijm', 'Jmo']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Dec'],
+    [
+      'Januari', 'Februari', 'Machi', 'Aprili', 'Mei', 'Juni', 'Julai', 'Agosti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['KM', 'BM'], u, ['Kabla yakwe Yethu', 'Baada yakwe Yethu']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'TSh', 'shilingi ya Tandhania',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ast.ts b/packages/common/locales/ast.ts
new file mode 100644
index 000000000000..fdb93a38da32
--- /dev/null
+++ b/packages/common/locales/ast.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'ast', [['a', 'p'], ['AM', 'PM'], ['de la mañana', 'de la tarde']],
+  [['a', 'p'], ['AM', 'PM'], ['mañana', 'tarde']],
+  [
+    ['D', 'L', 'M', 'M', 'X', 'V', 'S'], ['dom', 'llu', 'mar', 'mié', 'xue', 'vie', 'sáb'],
+    ['domingu', 'llunes', 'martes', 'miércoles', 'xueves', 'vienres', 'sábadu'],
+    ['do', 'll', 'ma', 'mi', 'xu', 'vi', 'sá']
+  ],
+  u,
+  [
+    ['X', 'F', 'M', 'A', 'M', 'X', 'X', 'A', 'S', 'O', 'P', 'A'],
+    ['xin', 'feb', 'mar', 'abr', 'may', 'xun', 'xnt', 'ago', 'set', 'och', 'pay', 'avi'],
+    [
+      'de xineru', 'de febreru', 'de marzu', 'd’abril', 'de mayu', 'de xunu', 'de xunetu',
+      'd’agostu', 'de setiembre', 'd’ochobre', 'de payares', 'd’avientu'
+    ]
+  ],
+  [
+    ['X', 'F', 'M', 'A', 'M', 'X', 'X', 'A', 'S', 'O', 'P', 'A'],
+    ['Xin', 'Feb', 'Mar', 'Abr', 'May', 'Xun', 'Xnt', 'Ago', 'Set', 'Och', 'Pay', 'Avi'],
+    [
+      'xineru', 'febreru', 'marzu', 'abril', 'mayu', 'xunu', 'xunetu', 'agostu', 'setiembre',
+      'ochobre', 'payares', 'avientu'
+    ]
+  ],
+  [['e.C.', 'd.C.'], u, ['enantes de Cristu', 'después de Cristu']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM \'de\' y', 'EEEE, d MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', '{1} \'a\' \'les\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'ND', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'BYN': [],
+    'DKK': [],
+    'HRK': [],
+    'ISK': [],
+    'NOK': [],
+    'PLN': [],
+    'RUR': [],
+    'SEK': [],
+    'THB': ['฿'],
+    'TWD': ['NT$']
+  },
+  plural
+];
diff --git a/packages/common/locales/az-Cyrl.ts b/packages/common/locales/az-Cyrl.ts
new file mode 100644
index 000000000000..aa4736aa080d
--- /dev/null
+++ b/packages/common/locales/az-Cyrl.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'az-Cyrl', [['а', 'п'], ['АМ', 'ПМ'], u], [['АМ', 'ПМ'], u, u],
+  [
+    ['7', '1', '2', '3', '4', '5', '6'], ['Б.', 'Б.Е.', 'Ч.А.', 'Ч.', 'Ҹ.А.', 'Ҹ.', 'Ш.'],
+    [
+      'базар', 'базар ертәси', 'чәршәнбә ахшамы', 'чәршәнбә',
+      'ҹүмә ахшамы', 'ҹүмә', 'шәнбә'
+    ],
+    ['Б.', 'Б.Е.', 'Ч.А.', 'Ч.', 'Ҹ.А.', 'Ҹ.', 'Ш.']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'јан', 'фев', 'мар', 'апр', 'май', 'ијн', 'ијл', 'авг', 'сен',
+      'окт', 'ној', 'дек'
+    ],
+    [
+      'јанвар', 'феврал', 'март', 'апрел', 'май', 'ијун', 'ијул',
+      'август', 'сентјабр', 'октјабр', 'нојабр', 'декабр'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'јан', 'фев', 'мар', 'апр', 'май', 'ијн', 'ијл', 'авг', 'сен',
+      'окт', 'ној', 'дек'
+    ],
+    [
+      'Јанвар', 'Феврал', 'Март', 'Апрел', 'Май', 'Ијун', 'Ијул',
+      'Август', 'Сентјабр', 'Октјабр', 'Нојабр', 'Декабр'
+    ]
+  ],
+  [['е.ә.', 'ј.е.'], u, ['ерамыздан әввәл', 'јени ера']], 1, [6, 0],
+  ['dd.MM.yy', 'd MMM y', 'd MMMM y', 'd MMMM y, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₼', 'AZN',
+  {'AZN': ['₼'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/az-Latn.ts b/packages/common/locales/az-Latn.ts
new file mode 100644
index 000000000000..9d224c6aef60
--- /dev/null
+++ b/packages/common/locales/az-Latn.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'az-Latn', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['7', '1', '2', '3', '4', '5', '6'], ['B.', 'B.E.', 'Ç.A.', 'Ç.', 'C.A.', 'C.', 'Ş.'],
+    [
+      'bazar', 'bazar ertəsi', 'çərşənbə axşamı', 'çərşənbə', 'cümə axşamı',
+      'cümə', 'şənbə'
+    ],
+    ['B.', 'B.E.', 'Ç.A.', 'Ç.', 'C.A.', 'C.', 'Ş.']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avq', 'sen', 'okt', 'noy', 'dek'],
+    [
+      'yanvar', 'fevral', 'mart', 'aprel', 'may', 'iyun', 'iyul', 'avqust', 'sentyabr', 'oktyabr',
+      'noyabr', 'dekabr'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avq', 'sen', 'okt', 'noy', 'dek'],
+    [
+      'Yanvar', 'Fevral', 'Mart', 'Aprel', 'May', 'İyun', 'İyul', 'Avqust', 'Sentyabr', 'Oktyabr',
+      'Noyabr', 'Dekabr'
+    ]
+  ],
+  [['e.ə.', 'y.e.'], u, ['eramızdan əvvəl', 'yeni era']], 1, [6, 0],
+  ['dd.MM.yy', 'd MMM y', 'd MMMM y', 'd MMMM y, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₼', 'Azərbaycan Manatı', {
+    'AZN': ['₼'],
+    'JPY': ['JP¥', '¥'],
+    'RON': [u, 'ley'],
+    'SYP': [u, 'S£'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/az.ts b/packages/common/locales/az.ts
new file mode 100644
index 000000000000..9f1240007d67
--- /dev/null
+++ b/packages/common/locales/az.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'az', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['7', '1', '2', '3', '4', '5', '6'], ['B.', 'B.E.', 'Ç.A.', 'Ç.', 'C.A.', 'C.', 'Ş.'],
+    [
+      'bazar', 'bazar ertəsi', 'çərşənbə axşamı', 'çərşənbə', 'cümə axşamı',
+      'cümə', 'şənbə'
+    ],
+    ['B.', 'B.E.', 'Ç.A.', 'Ç.', 'C.A.', 'C.', 'Ş.']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avq', 'sen', 'okt', 'noy', 'dek'],
+    [
+      'yanvar', 'fevral', 'mart', 'aprel', 'may', 'iyun', 'iyul', 'avqust', 'sentyabr', 'oktyabr',
+      'noyabr', 'dekabr'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avq', 'sen', 'okt', 'noy', 'dek'],
+    [
+      'Yanvar', 'Fevral', 'Mart', 'Aprel', 'May', 'İyun', 'İyul', 'Avqust', 'Sentyabr', 'Oktyabr',
+      'Noyabr', 'Dekabr'
+    ]
+  ],
+  [['e.ə.', 'y.e.'], u, ['eramızdan əvvəl', 'yeni era']], 1, [6, 0],
+  ['dd.MM.yy', 'd MMM y', 'd MMMM y', 'd MMMM y, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₼', 'Azərbaycan Manatı', {
+    'AZN': ['₼'],
+    'JPY': ['JP¥', '¥'],
+    'RON': [u, 'ley'],
+    'SYP': [u, 'S£'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/bas.ts b/packages/common/locales/bas.ts
new file mode 100644
index 000000000000..c01e83c02ed3
--- /dev/null
+++ b/packages/common/locales/bas.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'bas', [['I bikɛ̂glà', 'I ɓugajɔp'], u, u], u,
+  [
+    ['n', 'n', 'u', 'ŋ', 'm', 'k', 'j'], ['nɔy', 'nja', 'uum', 'ŋge', 'mbɔ', 'kɔɔ', 'jon'],
+    [
+      'ŋgwà nɔ̂y', 'ŋgwà njaŋgumba', 'ŋgwà ûm', 'ŋgwà ŋgê', 'ŋgwà mbɔk',
+      'ŋgwà kɔɔ', 'ŋgwà jôn'
+    ],
+    ['nɔy', 'nja', 'uum', 'ŋge', 'mbɔ', 'kɔɔ', 'jon']
+  ],
+  u,
+  [
+    ['k', 'm', 'm', 'm', 'm', 'h', 'n', 'h', 'd', 'b', 'm', 'l'],
+    ['kɔn', 'mac', 'mat', 'mto', 'mpu', 'hil', 'nje', 'hik', 'dip', 'bio', 'may', 'liɓ'],
+    [
+      'Kɔndɔŋ', 'Màcɛ̂l', 'Màtùmb', 'Màtop', 'M̀puyɛ', 'Hìlòndɛ̀', 'Njèbà',
+      'Hìkaŋ', 'Dìpɔ̀s', 'Bìòôm', 'Màyɛsèp', 'Lìbuy li ńyèe'
+    ]
+  ],
+  u, [['b.Y.K', 'm.Y.K'], u, ['bisū bi Yesù Krǐstò', 'i mbūs Yesù Krǐstò']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFA', 'Frǎŋ CFA (BEAC)',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/be.ts b/packages/common/locales/be.ts
new file mode 100644
index 000000000000..f4a3e99c45db
--- /dev/null
+++ b/packages/common/locales/be.ts
@@ -0,0 +1,98 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n % 10 === 1 && !(n % 100 === 11)) return 1;
+  if (n % 10 === Math.floor(n % 10) && n % 10 >= 2 && n % 10 <= 4 &&
+      !(n % 100 >= 12 && n % 100 <= 14))
+    return 3;
+  if (n % 10 === 0 || n % 10 === Math.floor(n % 10) && n % 10 >= 5 && n % 10 <= 9 ||
+      n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export default [
+  'be', [['am', 'pm'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['н', 'п', 'а', 'с', 'ч', 'п', 'с'],
+    ['нд', 'пн', 'аў', 'ср', 'чц', 'пт', 'сб'],
+    [
+      'нядзеля', 'панядзелак', 'аўторак', 'серада', 'чацвер',
+      'пятніца', 'субота'
+    ],
+    ['нд', 'пн', 'аў', 'ср', 'чц', 'пт', 'сб']
+  ],
+  u,
+  [
+    ['с', 'л', 'с', 'к', 'м', 'ч', 'л', 'ж', 'в', 'к', 'л', 'с'],
+    [
+      'сту', 'лют', 'сак', 'кра', 'мая', 'чэр', 'ліп', 'жні', 'вер',
+      'кас', 'ліс', 'сне'
+    ],
+    [
+      'студзеня', 'лютага', 'сакавіка', 'красавіка', 'мая',
+      'чэрвеня', 'ліпеня', 'жніўня', 'верасня', 'кастрычніка',
+      'лістапада', 'снежня'
+    ]
+  ],
+  [
+    ['с', 'л', 'с', 'к', 'м', 'ч', 'л', 'ж', 'в', 'к', 'л', 'с'],
+    [
+      'сту', 'лют', 'сак', 'кра', 'май', 'чэр', 'ліп', 'жні', 'вер',
+      'кас', 'ліс', 'сне'
+    ],
+    [
+      'студзень', 'люты', 'сакавік', 'красавік', 'май',
+      'чэрвень', 'ліпень', 'жнівень', 'верасень',
+      'кастрычнік', 'лістапад', 'снежань'
+    ]
+  ],
+  [
+    ['да н.э.', 'н.э.'], u,
+    ['да нараджэння Хрыстова', 'ад нараджэння Хрыстова']
+  ],
+  1, [6, 0], ['d.MM.yy', 'd.MM.y', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss, zzzz'], ['{1}, {0}', u, '{1} \'у\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'Br', 'беларускі рубель', {
+    'AUD': ['A$'],
+    'BBD': [u, 'Bds$'],
+    'BMD': [u, 'BD$'],
+    'BRL': [u, 'R$'],
+    'BSD': [u, 'B$'],
+    'BYN': ['Br'],
+    'BZD': [u, 'BZ$'],
+    'CAD': [u, 'CA$'],
+    'CUC': [u, 'CUC$'],
+    'CUP': [u, '$MN'],
+    'DOP': [u, 'RD$'],
+    'FJD': [u, 'FJ$'],
+    'FKP': [u, 'FK£'],
+    'GYD': [u, 'G$'],
+    'ISK': [u, 'Íkr'],
+    'JMD': [u, 'J$'],
+    'KYD': [u, 'CI$'],
+    'LRD': [u, 'L$'],
+    'MXN': ['MX$'],
+    'NAD': [u, 'N$'],
+    'NZD': [u, 'NZ$'],
+    'RUB': ['₽', 'руб.'],
+    'SBD': [u, 'SI$'],
+    'SGD': [u, 'S$'],
+    'TTD': [u, 'TT$'],
+    'UYU': [u, '$U'],
+    'XCD': ['EC$']
+  },
+  plural
+];
diff --git a/packages/common/locales/bem.ts b/packages/common/locales/bem.ts
new file mode 100644
index 000000000000..b82f7267b995
--- /dev/null
+++ b/packages/common/locales/bem.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'bem', [['uluchelo', 'akasuba'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    [
+      'Pa Mulungu', 'Palichimo', 'Palichibuli', 'Palichitatu', 'Palichine', 'Palichisano',
+      'Pachibelushi'
+    ],
+    u, u
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'E', 'M', 'J', 'J', 'O', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Epr', 'Mei', 'Jun', 'Jul', 'Oga', 'Sep', 'Okt', 'Nov', 'Dis'],
+    [
+      'Januari', 'Februari', 'Machi', 'Epreo', 'Mei', 'Juni', 'Julai', 'Ogasti', 'Septemba',
+      'Oktoba', 'Novemba', 'Disemba'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['Before Yesu', 'After Yesu']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'K', 'ZMW',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'ZMW': ['K', 'ZK']}, plural
+];
diff --git a/packages/common/locales/bez.ts b/packages/common/locales/bez.ts
new file mode 100644
index 000000000000..f813e2cca2d1
--- /dev/null
+++ b/packages/common/locales/bez.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'bez', [['pamilau', 'pamunyi'], u, u], u,
+  [
+    ['M', 'J', 'H', 'H', 'H', 'W', 'J'], ['Mul', 'Vil', 'Hiv', 'Hid', 'Hit', 'Hih', 'Lem'],
+    [
+      'pa mulungu', 'pa shahuviluha', 'pa hivili', 'pa hidatu', 'pa hitayi', 'pa hihanu',
+      'pa shahulembela'
+    ],
+    ['Mul', 'Vil', 'Hiv', 'Hid', 'Hit', 'Hih', 'Lem']
+  ],
+  u,
+  [
+    ['H', 'V', 'D', 'T', 'H', 'S', 'S', 'N', 'T', 'K', 'K', 'K'],
+    ['Hut', 'Vil', 'Dat', 'Tai', 'Han', 'Sit', 'Sab', 'Nan', 'Tis', 'Kum', 'Kmj', 'Kmb'],
+    [
+      'pa mwedzi gwa hutala', 'pa mwedzi gwa wuvili', 'pa mwedzi gwa wudatu', 'pa mwedzi gwa wutai',
+      'pa mwedzi gwa wuhanu', 'pa mwedzi gwa sita', 'pa mwedzi gwa saba', 'pa mwedzi gwa nane',
+      'pa mwedzi gwa tisa', 'pa mwedzi gwa kumi', 'pa mwedzi gwa kumi na moja',
+      'pa mwedzi gwa kumi na mbili'
+    ]
+  ],
+  u, [['KM', 'BM'], u, ['Kabla ya Mtwaa', 'Baada ya Mtwaa']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'TSh', 'Shilingi ya Hutanzania',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/bg.ts b/packages/common/locales/bg.ts
new file mode 100644
index 000000000000..f5d881d057a5
--- /dev/null
+++ b/packages/common/locales/bg.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'bg', [['am', 'pm'], u, ['пр.об.', 'сл.об.']], [['am', 'pm'], u, u],
+  [
+    ['н', 'п', 'в', 'с', 'ч', 'п', 'с'],
+    ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    [
+      'неделя', 'понеделник', 'вторник', 'сряда', 'четвъртък',
+      'петък', 'събота'
+    ],
+    ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  u,
+  [
+    ['я', 'ф', 'м', 'а', 'м', 'ю', 'ю', 'а', 'с', 'о', 'н', 'д'],
+    [
+      'яну', 'фев', 'март', 'апр', 'май', 'юни', 'юли', 'авг', 'сеп',
+      'окт', 'ное', 'дек'
+    ],
+    [
+      'януари', 'февруари', 'март', 'април', 'май', 'юни', 'юли',
+      'август', 'септември', 'октомври', 'ноември', 'декември'
+    ]
+  ],
+  u, [['пр.Хр.', 'сл.Хр.'], u, ['преди Христа', 'след Христа']], 1,
+  [6, 0], ['d.MM.yy \'г\'.', 'd.MM.y \'г\'.', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['H:mm \'ч\'.', 'H:mm:ss \'ч\'.', 'H:mm:ss \'ч\'. z', 'H:mm:ss \'ч\'. zzzz'],
+  ['{1}, {0}', u, u, u], [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '0.00 ¤', '#E0'], 'лв.', 'Български лев', {
+    'ARS': [],
+    'AUD': [],
+    'BBD': [],
+    'BDT': [],
+    'BGN': ['лв.'],
+    'BMD': [],
+    'BND': [],
+    'BRL': [],
+    'BSD': [],
+    'BYN': [],
+    'BZD': [],
+    'CAD': [],
+    'CLP': [],
+    'CNY': [],
+    'COP': [],
+    'CRC': [],
+    'CUP': [],
+    'DOP': [],
+    'FJD': [],
+    'GBP': [u, '£'],
+    'GIP': [],
+    'GYD': [],
+    'HKD': [],
+    'ILS': [],
+    'INR': [],
+    'JMD': [],
+    'JPY': [u, '¥'],
+    'KHR': [],
+    'KRW': [],
+    'KYD': [],
+    'KZT': [],
+    'LAK': [],
+    'LRD': [],
+    'MNT': [],
+    'MXN': [],
+    'NAD': [],
+    'NGN': [],
+    'NZD': [],
+    'PHP': [],
+    'PYG': [],
+    'RON': [],
+    'SBD': [],
+    'SGD': [],
+    'SRD': [],
+    'SSP': [],
+    'TRY': [],
+    'TTD': [],
+    'TWD': [],
+    'UAH': [],
+    'USD': ['щ.д.', '$'],
+    'UYU': [],
+    'VND': [],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/bm.ts b/packages/common/locales/bm.ts
new file mode 100644
index 000000000000..917c2599efcf
--- /dev/null
+++ b/packages/common/locales/bm.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'bm', [['AM', 'PM'], u, u], u,
+  [
+    ['K', 'N', 'T', 'A', 'A', 'J', 'S'], ['kar', 'ntɛ', 'tar', 'ara', 'ala', 'jum', 'sib'],
+    ['kari', 'ntɛnɛ', 'tarata', 'araba', 'alamisa', 'juma', 'sibiri'],
+    ['kar', 'ntɛ', 'tar', 'ara', 'ala', 'jum', 'sib']
+  ],
+  u,
+  [
+    ['Z', 'F', 'M', 'A', 'M', 'Z', 'Z', 'U', 'S', 'Ɔ', 'N', 'D'],
+    ['zan', 'feb', 'mar', 'awi', 'mɛ', 'zuw', 'zul', 'uti', 'sɛt', 'ɔku', 'now', 'des'],
+    [
+      'zanwuye', 'feburuye', 'marisi', 'awirili', 'mɛ', 'zuwɛn', 'zuluye', 'uti', 'sɛtanburu',
+      'ɔkutɔburu', 'nowanburu', 'desanburu'
+    ]
+  ],
+  u, [['J.-C. ɲɛ', 'ni J.-C.'], u, ['jezu krisiti ɲɛ', 'jezu krisiti minkɛ']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'CFA', 'sefa Fraŋ (BCEAO)',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/bn-IN.ts b/packages/common/locales/bn-IN.ts
new file mode 100644
index 000000000000..f1e764f88271
--- /dev/null
+++ b/packages/common/locales/bn-IN.ts
@@ -0,0 +1,87 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'bn-IN', [['AM', 'PM'], u, u], u,
+  [
+    ['র', 'সো', 'ম', 'বু', 'বৃ', 'শু', 'শ'],
+    [
+      'রবি', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতি',
+      'শুক্র', 'শনি'
+    ],
+    [
+      'রবিবার', 'সোমবার', 'মঙ্গলবার', 'বুধবার',
+      'বৃহস্পতিবার', 'শুক্রবার', 'শনিবার'
+    ],
+    ['রঃ', 'সোঃ', 'মঃ', 'বুঃ', 'বৃঃ', 'শুঃ', 'শোঃ']
+  ],
+  [
+    ['র', 'সো', 'ম', 'বু', 'বৃ', 'শু', 'শ'],
+    [
+      'রবি', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতি',
+      'শুক্র', 'শনি'
+    ],
+    [
+      'রবিবার', 'সোমবার', 'মঙ্গলবার', 'বুধবার',
+      'বৃহষ্পতিবার', 'শুক্রবার', 'শনিবার'
+    ],
+    ['রঃ', 'সোঃ', 'মঃ', 'বুঃ', 'বৃঃ', 'শুঃ', 'শনি']
+  ],
+  [
+    [
+      'জা', 'ফে', 'মা', 'এ', 'মে', 'জুন', 'জু', 'আ', 'সে', 'অ',
+      'ন', 'ডি'
+    ],
+    [
+      'জানু', 'ফেব', 'মার্চ', 'এপ্রিল', 'মে', 'জুন',
+      'জুলাই', 'আগস্ট', 'সেপ্টেম্বর',
+      'অক্টোবর', 'নভেম্বর', 'ডিসেম্বর'
+    ],
+    [
+      'জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ',
+      'এপ্রিল', 'মে', 'জুন', 'জুলাই', 'আগস্ট',
+      'সেপ্টেম্বর', 'অক্টোবর', 'নভেম্বর',
+      'ডিসেম্বর'
+    ]
+  ],
+  [
+    [
+      'জা', 'ফে', 'মা', 'এ', 'মে', 'জুন', 'জু', 'আ', 'সে', 'অ',
+      'ন', 'ডি'
+    ],
+    [
+      'জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ',
+      'এপ্রিল', 'মে', 'জুন', 'জুলাই', 'আগস্ট',
+      'সেপ্টেম্বর', 'অক্টোবর', 'নভেম্বর',
+      'ডিসেম্বর'
+    ],
+    u
+  ],
+  [
+    ['খ্রিস্টপূর্ব', 'খৃষ্টাব্দ'], u,
+    ['খ্রিস্টপূর্ব', 'খ্রীষ্টাব্দ']
+  ],
+  0, [0, 0], ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '#,##,##0.00¤', '#E0'], '₹',
+  'ভারতীয় রুপি',
+  {'BDT': ['৳'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/bn.ts b/packages/common/locales/bn.ts
new file mode 100644
index 000000000000..cae030e0c99b
--- /dev/null
+++ b/packages/common/locales/bn.ts
@@ -0,0 +1,87 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'bn', [['AM', 'PM'], u, u], u,
+  [
+    ['র', 'সো', 'ম', 'বু', 'বৃ', 'শু', 'শ'],
+    [
+      'রবি', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতি',
+      'শুক্র', 'শনি'
+    ],
+    [
+      'রবিবার', 'সোমবার', 'মঙ্গলবার', 'বুধবার',
+      'বৃহস্পতিবার', 'শুক্রবার', 'শনিবার'
+    ],
+    ['রঃ', 'সোঃ', 'মঃ', 'বুঃ', 'বৃঃ', 'শুঃ', 'শোঃ']
+  ],
+  [
+    ['র', 'সো', 'ম', 'বু', 'বৃ', 'শু', 'শ'],
+    [
+      'রবি', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতি',
+      'শুক্র', 'শনি'
+    ],
+    [
+      'রবিবার', 'সোমবার', 'মঙ্গলবার', 'বুধবার',
+      'বৃহষ্পতিবার', 'শুক্রবার', 'শনিবার'
+    ],
+    ['রঃ', 'সোঃ', 'মঃ', 'বুঃ', 'বৃঃ', 'শুঃ', 'শনি']
+  ],
+  [
+    [
+      'জা', 'ফে', 'মা', 'এ', 'মে', 'জুন', 'জু', 'আ', 'সে', 'অ',
+      'ন', 'ডি'
+    ],
+    [
+      'জানু', 'ফেব', 'মার্চ', 'এপ্রিল', 'মে', 'জুন',
+      'জুলাই', 'আগস্ট', 'সেপ্টেম্বর',
+      'অক্টোবর', 'নভেম্বর', 'ডিসেম্বর'
+    ],
+    [
+      'জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ',
+      'এপ্রিল', 'মে', 'জুন', 'জুলাই', 'আগস্ট',
+      'সেপ্টেম্বর', 'অক্টোবর', 'নভেম্বর',
+      'ডিসেম্বর'
+    ]
+  ],
+  [
+    [
+      'জা', 'ফে', 'মা', 'এ', 'মে', 'জুন', 'জু', 'আ', 'সে', 'অ',
+      'ন', 'ডি'
+    ],
+    [
+      'জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ',
+      'এপ্রিল', 'মে', 'জুন', 'জুলাই', 'আগস্ট',
+      'সেপ্টেম্বর', 'অক্টোবর', 'নভেম্বর',
+      'ডিসেম্বর'
+    ],
+    u
+  ],
+  [
+    ['খ্রিস্টপূর্ব', 'খৃষ্টাব্দ'], u,
+    ['খ্রিস্টপূর্ব', 'খ্রীষ্টাব্দ']
+  ],
+  0, [6, 0], ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '#,##,##0.00¤', '#E0'], '৳',
+  'বাংলাদেশী টাকা',
+  {'BDT': ['৳'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/bo-IN.ts b/packages/common/locales/bo-IN.ts
new file mode 100644
index 000000000000..5f43a4980fa5
--- /dev/null
+++ b/packages/common/locales/bo-IN.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'bo-IN', [['སྔ་དྲོ་', 'ཕྱི་དྲོ་'], u, u], u,
+  [
+    ['ཉི', 'ཟླ', 'མིག', 'ལྷག', 'ཕུར', 'སངས', 'སྤེན'],
+    [
+      'ཉི་མ་', 'ཟླ་བ་', 'མིག་དམར་', 'ལྷག་པ་',
+      'ཕུར་བུ་', 'པ་སངས་', 'སྤེན་པ་'
+    ],
+    [
+      'གཟའ་ཉི་མ་', 'གཟའ་ཟླ་བ་',
+      'གཟའ་མིག་དམར་', 'གཟའ་ལྷག་པ་',
+      'གཟའ་ཕུར་བུ་', 'གཟའ་པ་སངས་',
+      'གཟའ་སྤེན་པ་'
+    ],
+    [
+      'ཉི་མ་', 'ཟླ་བ་', 'མིག་དམར་', 'ལྷག་པ་',
+      'ཕུར་བུ་', 'པ་སངས་', 'སྤེན་པ་'
+    ]
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ཟླ་༡', 'ཟླ་༢', 'ཟླ་༣', 'ཟླ་༤', 'ཟླ་༥',
+      'ཟླ་༦', 'ཟླ་༧', 'ཟླ་༨', 'ཟླ་༩', 'ཟླ་༡༠',
+      'ཟླ་༡༡', 'ཟླ་༡༢'
+    ],
+    [
+      'ཟླ་བ་དང་པོ', 'ཟླ་བ་གཉིས་པ',
+      'ཟླ་བ་གསུམ་པ', 'ཟླ་བ་བཞི་པ',
+      'ཟླ་བ་ལྔ་པ', 'ཟླ་བ་དྲུག་པ',
+      'ཟླ་བ་བདུན་པ', 'ཟླ་བ་བརྒྱད་པ',
+      'ཟླ་བ་དགུ་པ', 'ཟླ་བ་བཅུ་པ',
+      'ཟླ་བ་བཅུ་གཅིག་པ',
+      'ཟླ་བ་བཅུ་གཉིས་པ'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ཟླ་༡', 'ཟླ་༢', 'ཟླ་༣', 'ཟླ་༤', 'ཟླ་༥',
+      'ཟླ་༦', 'ཟླ་༧', 'ཟླ་༨', 'ཟླ་༩', 'ཟླ་༡༠',
+      'ཟླ་༡༡', 'ཟླ་༡༢'
+    ],
+    [
+      'ཟླ་བ་དང་པོ་', 'ཟླ་བ་གཉིས་པ་',
+      'ཟླ་བ་གསུམ་པ་', 'ཟླ་བ་བཞི་པ་',
+      'ཟླ་བ་ལྔ་པ་', 'ཟླ་བ་དྲུག་པ་',
+      'ཟླ་བ་བདུན་པ་', 'ཟླ་བ་བརྒྱད་པ་',
+      'ཟླ་བ་དགུ་པ་', 'ཟླ་བ་བཅུ་པ་',
+      'ཟླ་བ་བཅུ་གཅིག་པ་',
+      'ཟླ་བ་བཅུ་གཉིས་པ་'
+    ]
+  ],
+  [['སྤྱི་ལོ་སྔོན་', 'སྤྱི་ལོ་'], u, u], 0, [0, 0],
+  [
+    'y-MM-dd', 'y ལོའི་MMMཚེས་d',
+    'སྤྱི་ལོ་y MMMMའི་ཚེས་d', 'y MMMMའི་ཚེས་d, EEEE'
+  ],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₹', 'རྒྱ་གར་སྒོར་',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/bo.ts b/packages/common/locales/bo.ts
new file mode 100644
index 000000000000..239982490fe0
--- /dev/null
+++ b/packages/common/locales/bo.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'bo', [['སྔ་དྲོ་', 'ཕྱི་དྲོ་'], u, u], u,
+  [
+    ['ཉི', 'ཟླ', 'མིག', 'ལྷག', 'ཕུར', 'སངས', 'སྤེན'],
+    [
+      'ཉི་མ་', 'ཟླ་བ་', 'མིག་དམར་', 'ལྷག་པ་',
+      'ཕུར་བུ་', 'པ་སངས་', 'སྤེན་པ་'
+    ],
+    [
+      'གཟའ་ཉི་མ་', 'གཟའ་ཟླ་བ་',
+      'གཟའ་མིག་དམར་', 'གཟའ་ལྷག་པ་',
+      'གཟའ་ཕུར་བུ་', 'གཟའ་པ་སངས་',
+      'གཟའ་སྤེན་པ་'
+    ],
+    [
+      'ཉི་མ་', 'ཟླ་བ་', 'མིག་དམར་', 'ལྷག་པ་',
+      'ཕུར་བུ་', 'པ་སངས་', 'སྤེན་པ་'
+    ]
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ཟླ་༡', 'ཟླ་༢', 'ཟླ་༣', 'ཟླ་༤', 'ཟླ་༥',
+      'ཟླ་༦', 'ཟླ་༧', 'ཟླ་༨', 'ཟླ་༩', 'ཟླ་༡༠',
+      'ཟླ་༡༡', 'ཟླ་༡༢'
+    ],
+    [
+      'ཟླ་བ་དང་པོ', 'ཟླ་བ་གཉིས་པ',
+      'ཟླ་བ་གསུམ་པ', 'ཟླ་བ་བཞི་པ',
+      'ཟླ་བ་ལྔ་པ', 'ཟླ་བ་དྲུག་པ',
+      'ཟླ་བ་བདུན་པ', 'ཟླ་བ་བརྒྱད་པ',
+      'ཟླ་བ་དགུ་པ', 'ཟླ་བ་བཅུ་པ',
+      'ཟླ་བ་བཅུ་གཅིག་པ',
+      'ཟླ་བ་བཅུ་གཉིས་པ'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ཟླ་༡', 'ཟླ་༢', 'ཟླ་༣', 'ཟླ་༤', 'ཟླ་༥',
+      'ཟླ་༦', 'ཟླ་༧', 'ཟླ་༨', 'ཟླ་༩', 'ཟླ་༡༠',
+      'ཟླ་༡༡', 'ཟླ་༡༢'
+    ],
+    [
+      'ཟླ་བ་དང་པོ་', 'ཟླ་བ་གཉིས་པ་',
+      'ཟླ་བ་གསུམ་པ་', 'ཟླ་བ་བཞི་པ་',
+      'ཟླ་བ་ལྔ་པ་', 'ཟླ་བ་དྲུག་པ་',
+      'ཟླ་བ་བདུན་པ་', 'ཟླ་བ་བརྒྱད་པ་',
+      'ཟླ་བ་དགུ་པ་', 'ཟླ་བ་བཅུ་པ་',
+      'ཟླ་བ་བཅུ་གཅིག་པ་',
+      'ཟླ་བ་བཅུ་གཉིས་པ་'
+    ]
+  ],
+  [['སྤྱི་ལོ་སྔོན་', 'སྤྱི་ལོ་'], u, u], 0, [6, 0],
+  [
+    'y-MM-dd', 'y ལོའི་MMMཚེས་d',
+    'སྤྱི་ལོ་y MMMMའི་ཚེས་d', 'y MMMMའི་ཚེས་d, EEEE'
+  ],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '¥', 'ཡུ་ཨན་',
+  {'CNY': ['¥'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/br.ts b/packages/common/locales/br.ts
new file mode 100644
index 000000000000..01cf7e38a098
--- /dev/null
+++ b/packages/common/locales/br.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n % 10 === 1 && !(n % 100 === 11 || n % 100 === 71 || n % 100 === 91)) return 1;
+  if (n % 10 === 2 && !(n % 100 === 12 || n % 100 === 72 || n % 100 === 92)) return 2;
+  if (n % 10 === Math.floor(n % 10) && (n % 10 >= 3 && n % 10 <= 4 || n % 10 === 9) &&
+      !(n % 100 >= 10 && n % 100 <= 19 || n % 100 >= 70 && n % 100 <= 79 ||
+        n % 100 >= 90 && n % 100 <= 99))
+    return 3;
+  if (!(n === 0) && n % 1e6 === 0) return 4;
+  return 5;
+}
+
+export default [
+  'br', [['am', 'gm'], ['A.M.', 'G.M.'], u], [['A.M.', 'G.M.'], u, u],
+  [
+    ['Su', 'L', 'Mz', 'Mc', 'Y', 'G', 'Sa'], ['Sul', 'Lun', 'Meu.', 'Mer.', 'Yaou', 'Gwe.', 'Sad.'],
+    ['Sul', 'Lun', 'Meurzh', 'Mercʼher', 'Yaou', 'Gwener', 'Sadorn'],
+    ['Sul', 'Lun', 'Meu.', 'Mer.', 'Yaou', 'Gwe.', 'Sad.']
+  ],
+  u,
+  [
+    ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+    [
+      'Gen.', 'Cʼhwe.', 'Meur.', 'Ebr.', 'Mae', 'Mezh.', 'Goue.', 'Eost', 'Gwen.', 'Here', 'Du',
+      'Kzu.'
+    ],
+    [
+      'Genver', 'Cʼhwevrer', 'Meurzh', 'Ebrel', 'Mae', 'Mezheven', 'Gouere', 'Eost', 'Gwengolo',
+      'Here', 'Du', 'Kerzu'
+    ]
+  ],
+  u, [['a-raok J.K.', 'goude J.K.'], u, ['a-raok Jezuz-Krist', 'goude Jezuz-Krist']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', '{1} \'da\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['$A', '$'],
+    'BRL': [u, 'R$'],
+    'CAD': ['$CA', '$'],
+    'CNY': [u, '¥'],
+    'EGP': [u, '£ E'],
+    'GBP': ['£ RU', '£'],
+    'HKD': ['$ HK', '$'],
+    'ILS': [u, '₪'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'LBP': [u, '£L'],
+    'NZD': ['$ ZN', '$'],
+    'TOP': [u, '$ T'],
+    'TWD': [u, '$'],
+    'USD': ['$ SU', '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/brx.ts b/packages/common/locales/brx.ts
new file mode 100644
index 000000000000..c1ee5f3e643e
--- /dev/null
+++ b/packages/common/locales/brx.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'brx', [['फुं', 'बेलासे'], u, u], u,
+  [
+    ['र', 'स', 'मं', 'बु', 'बि', 'सु', 'सु'],
+    [
+      'रबि', 'सम', 'मंगल', 'बुद', 'बिसथि', 'सुखुर',
+      'सुनि'
+    ],
+    [
+      'रबिबार', 'समबार', 'मंगलबार', 'बुदबार',
+      'बिसथिबार', 'सुखुरबार', 'सुनिबार'
+    ],
+    [
+      'रबि', 'सम', 'मंगल', 'बुद', 'बिसथि', 'सुखुर',
+      'सुनि'
+    ]
+  ],
+  u,
+  [
+    [
+      'ज', 'फे', 'मा', 'ए', 'मे', 'जु', 'जु', 'आ', 'से', 'अ', 'न',
+      'दि'
+    ],
+    [
+      'जानुवारी', 'फेब्रुवारी', 'मार्स',
+      'एफ्रिल', 'मे', 'जुन', 'जुलाइ', 'आगस्थ',
+      'सेबथेज्ब़र', 'अखथबर', 'नबेज्ब़र',
+      'दिसेज्ब़र'
+    ],
+    u
+  ],
+  u, [['ईसा.पूर्व', 'सन'], u, u], 0, [0, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], '₹', 'रां',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/bs-Cyrl.ts b/packages/common/locales/bs-Cyrl.ts
new file mode 100644
index 000000000000..e5c89dad0189
--- /dev/null
+++ b/packages/common/locales/bs-Cyrl.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'bs-Cyrl', [['пре подне', 'поподне'], u, u], u,
+  [
+    ['н', 'п', 'у', 'с', 'ч', 'п', 'с'],
+    ['нед', 'пон', 'уто', 'сри', 'чет', 'пет', 'суб'],
+    [
+      'недјеља', 'понедјељак', 'уторак', 'сриједа',
+      'четвртак', 'петак', 'субота'
+    ],
+    ['нед', 'пон', 'уто', 'сри', 'чет', 'пет', 'суб']
+  ],
+  u,
+  [
+    ['ј', 'ф', 'м', 'а', 'м', 'ј', 'ј', 'а', 'с', 'о', 'н', 'д'],
+    [
+      'јан', 'феб', 'мар', 'апр', 'мај', 'јун', 'јул', 'ауг', 'сеп',
+      'окт', 'нов', 'дец'
+    ],
+    [
+      'јануар', 'фебруар', 'март', 'април', 'мај', 'јуни', 'јули',
+      'аугуст', 'септембар', 'октобар', 'новембар', 'децембар'
+    ]
+  ],
+  u,
+  [
+    ['п.н.е.', 'н.е.'], ['п. н. е.', 'н. е.'],
+    ['прије нове ере', 'нове ере']
+  ],
+  1, [6, 0], ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'КМ', 'Конвертибилна марка', {
+    'BAM': ['КМ', 'KM'],
+    'CZK': ['Кч', 'Kč'],
+    'PLN': ['зл', 'zł'],
+    'RSD': ['дин.'],
+    'TRY': ['Тл', '₺'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/bs-Latn.ts b/packages/common/locales/bs-Latn.ts
new file mode 100644
index 000000000000..f54938db80b5
--- /dev/null
+++ b/packages/common/locales/bs-Latn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export default [
+  'bs-Latn', [['prijepodne', 'popodne'], u, u], u,
+  [
+    ['N', 'P', 'U', 'S', 'Č', 'P', 'S'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  [
+    ['n', 'p', 'u', 's', 'č', 'p', 's'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'avg', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'januar', 'februar', 'mart', 'april', 'maj', 'juni', 'juli', 'avgust', 'septembar', 'oktobar',
+      'novembar', 'decembar'
+    ]
+  ],
+  u, [['p.n.e.', 'n.e.'], ['p. n. e.', 'n. e.'], ['prije nove ere', 'nove ere']], 1, [6, 0],
+  ['d.M.yy.', 'd. MMM y.', 'd. MMMM y.', 'EEEE, d. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'u\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'KM',
+  'Bosanskohercegovačka konvertibilna marka', {
+    'AUD': [u, '$'],
+    'BAM': ['KM'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'HRK': ['kn'],
+    'ILS': [u, '₪'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RSD': ['din.'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': [u, '$'],
+    'XCD': [u, '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/bs.ts b/packages/common/locales/bs.ts
new file mode 100644
index 000000000000..13c6693a53ae
--- /dev/null
+++ b/packages/common/locales/bs.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export default [
+  'bs', [['prijepodne', 'popodne'], u, u], u,
+  [
+    ['N', 'P', 'U', 'S', 'Č', 'P', 'S'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  [
+    ['n', 'p', 'u', 's', 'č', 'p', 's'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'avg', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'januar', 'februar', 'mart', 'april', 'maj', 'juni', 'juli', 'avgust', 'septembar', 'oktobar',
+      'novembar', 'decembar'
+    ]
+  ],
+  u, [['p.n.e.', 'n.e.'], ['p. n. e.', 'n. e.'], ['prije nove ere', 'nove ere']], 1, [6, 0],
+  ['d.M.yy.', 'd. MMM y.', 'd. MMMM y.', 'EEEE, d. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'u\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'KM',
+  'Bosanskohercegovačka konvertibilna marka', {
+    'AUD': [u, '$'],
+    'BAM': ['KM'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'HRK': ['kn'],
+    'ILS': [u, '₪'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RSD': ['din.'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': [u, '$'],
+    'XCD': [u, '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/ca-AD.ts b/packages/common/locales/ca-AD.ts
new file mode 100644
index 000000000000..3549c5400226
--- /dev/null
+++ b/packages/common/locales/ca-AD.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'ca-AD', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['dg', 'dl', 'dt', 'dc', 'dj', 'dv', 'ds'], ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.'],
+    ['diumenge', 'dilluns', 'dimarts', 'dimecres', 'dijous', 'divendres', 'dissabte'],
+    ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.']
+  ],
+  u,
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'de gen.', 'de febr.', 'de març', 'd’abr.', 'de maig', 'de juny', 'de jul.', 'd’ag.',
+      'de set.', 'd’oct.', 'de nov.', 'de des.'
+    ],
+    [
+      'de gener', 'de febrer', 'de març', 'd’abril', 'de maig', 'de juny', 'de juliol',
+      'd’agost', 'de setembre', 'd’octubre', 'de novembre', 'de desembre'
+    ]
+  ],
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'gen.', 'febr.', 'març', 'abr.', 'maig', 'juny', 'jul.', 'ag.', 'set.', 'oct.', 'nov.',
+      'des.'
+    ],
+    [
+      'gener', 'febrer', 'març', 'abril', 'maig', 'juny', 'juliol', 'agost', 'setembre', 'octubre',
+      'novembre', 'desembre'
+    ]
+  ],
+  [['aC', 'dC'], u, ['abans de Crist', 'després de Crist']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM \'de\' y', 'EEEE, d MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', '{1} \'a\' \'les\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['AU$', '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': ['¥'],
+    'ESP': ['₧'],
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'THB': ['฿'],
+    'USD': [u, '$'],
+    'VEF': [],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ca-ES-VALENCIA.ts b/packages/common/locales/ca-ES-VALENCIA.ts
new file mode 100644
index 000000000000..783143898dc4
--- /dev/null
+++ b/packages/common/locales/ca-ES-VALENCIA.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'ca-ES-VALENCIA', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['dg', 'dl', 'dt', 'dc', 'dj', 'dv', 'ds'], ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.'],
+    ['diumenge', 'dilluns', 'dimarts', 'dimecres', 'dijous', 'divendres', 'dissabte'],
+    ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.']
+  ],
+  u,
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'de gen.', 'de febr.', 'de març', 'd’abr.', 'de maig', 'de juny', 'de jul.', 'd’ag.',
+      'de set.', 'd’oct.', 'de nov.', 'de des.'
+    ],
+    [
+      'de gener', 'de febrer', 'de març', 'd’abril', 'de maig', 'de juny', 'de juliol',
+      'd’agost', 'de setembre', 'd’octubre', 'de novembre', 'de desembre'
+    ]
+  ],
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'gen.', 'febr.', 'març', 'abr.', 'maig', 'juny', 'jul.', 'ag.', 'set.', 'oct.', 'nov.',
+      'des.'
+    ],
+    [
+      'gener', 'febrer', 'març', 'abril', 'maig', 'juny', 'juliol', 'agost', 'setembre', 'octubre',
+      'novembre', 'desembre'
+    ]
+  ],
+  [['aC', 'dC'], u, ['abans de Crist', 'després de Crist']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM \'de\' y', 'EEEE, d MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', '{1} \'a\' \'les\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['AU$', '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': ['¥'],
+    'ESP': ['₧'],
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'THB': ['฿'],
+    'USD': [u, '$'],
+    'VEF': [],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ca-FR.ts b/packages/common/locales/ca-FR.ts
new file mode 100644
index 000000000000..0e41b5599d71
--- /dev/null
+++ b/packages/common/locales/ca-FR.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'ca-FR', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['dg', 'dl', 'dt', 'dc', 'dj', 'dv', 'ds'], ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.'],
+    ['diumenge', 'dilluns', 'dimarts', 'dimecres', 'dijous', 'divendres', 'dissabte'],
+    ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.']
+  ],
+  u,
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'de gen.', 'de febr.', 'de març', 'd’abr.', 'de maig', 'de juny', 'de jul.', 'd’ag.',
+      'de set.', 'd’oct.', 'de nov.', 'de des.'
+    ],
+    [
+      'de gener', 'de febrer', 'de març', 'd’abril', 'de maig', 'de juny', 'de juliol',
+      'd’agost', 'de setembre', 'd’octubre', 'de novembre', 'de desembre'
+    ]
+  ],
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'gen.', 'febr.', 'març', 'abr.', 'maig', 'juny', 'jul.', 'ag.', 'set.', 'oct.', 'nov.',
+      'des.'
+    ],
+    [
+      'gener', 'febrer', 'març', 'abril', 'maig', 'juny', 'juliol', 'agost', 'setembre', 'octubre',
+      'novembre', 'desembre'
+    ]
+  ],
+  [['aC', 'dC'], u, ['abans de Crist', 'després de Crist']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM \'de\' y', 'EEEE, d MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', '{1} \'a\' \'les\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['AU$', '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': ['¥'],
+    'ESP': ['₧'],
+    'FRF': ['F'],
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'THB': ['฿'],
+    'USD': [u, '$'],
+    'VEF': [],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ca-IT.ts b/packages/common/locales/ca-IT.ts
new file mode 100644
index 000000000000..861cdcec2da8
--- /dev/null
+++ b/packages/common/locales/ca-IT.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'ca-IT', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['dg', 'dl', 'dt', 'dc', 'dj', 'dv', 'ds'], ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.'],
+    ['diumenge', 'dilluns', 'dimarts', 'dimecres', 'dijous', 'divendres', 'dissabte'],
+    ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.']
+  ],
+  u,
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'de gen.', 'de febr.', 'de març', 'd’abr.', 'de maig', 'de juny', 'de jul.', 'd’ag.',
+      'de set.', 'd’oct.', 'de nov.', 'de des.'
+    ],
+    [
+      'de gener', 'de febrer', 'de març', 'd’abril', 'de maig', 'de juny', 'de juliol',
+      'd’agost', 'de setembre', 'd’octubre', 'de novembre', 'de desembre'
+    ]
+  ],
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'gen.', 'febr.', 'març', 'abr.', 'maig', 'juny', 'jul.', 'ag.', 'set.', 'oct.', 'nov.',
+      'des.'
+    ],
+    [
+      'gener', 'febrer', 'març', 'abril', 'maig', 'juny', 'juliol', 'agost', 'setembre', 'octubre',
+      'novembre', 'desembre'
+    ]
+  ],
+  [['aC', 'dC'], u, ['abans de Crist', 'després de Crist']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM \'de\' y', 'EEEE, d MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', '{1} \'a\' \'les\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['AU$', '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': ['¥'],
+    'ESP': ['₧'],
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'THB': ['฿'],
+    'USD': [u, '$'],
+    'VEF': [],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ca.ts b/packages/common/locales/ca.ts
new file mode 100644
index 000000000000..edd5f53942e1
--- /dev/null
+++ b/packages/common/locales/ca.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'ca', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['dg', 'dl', 'dt', 'dc', 'dj', 'dv', 'ds'], ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.'],
+    ['diumenge', 'dilluns', 'dimarts', 'dimecres', 'dijous', 'divendres', 'dissabte'],
+    ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.']
+  ],
+  u,
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'de gen.', 'de febr.', 'de març', 'd’abr.', 'de maig', 'de juny', 'de jul.', 'd’ag.',
+      'de set.', 'd’oct.', 'de nov.', 'de des.'
+    ],
+    [
+      'de gener', 'de febrer', 'de març', 'd’abril', 'de maig', 'de juny', 'de juliol',
+      'd’agost', 'de setembre', 'd’octubre', 'de novembre', 'de desembre'
+    ]
+  ],
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'gen.', 'febr.', 'març', 'abr.', 'maig', 'juny', 'jul.', 'ag.', 'set.', 'oct.', 'nov.',
+      'des.'
+    ],
+    [
+      'gener', 'febrer', 'març', 'abril', 'maig', 'juny', 'juliol', 'agost', 'setembre', 'octubre',
+      'novembre', 'desembre'
+    ]
+  ],
+  [['aC', 'dC'], u, ['abans de Crist', 'després de Crist']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM \'de\' y', 'EEEE, d MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', '{1} \'a\' \'les\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['AU$', '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': ['¥'],
+    'ESP': ['₧'],
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'THB': ['฿'],
+    'USD': [u, '$'],
+    'VEF': [],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ccp-IN.ts b/packages/common/locales/ccp-IN.ts
new file mode 100644
index 000000000000..c435e4d0350f
--- /dev/null
+++ b/packages/common/locales/ccp-IN.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ccp-IN', [['AM', 'PM'], u, u], u,
+  [
+    ['𑄢𑄧', '𑄥𑄧', '𑄟𑄧', '𑄝𑄪', '𑄝𑄳𑄢𑄨', '𑄥𑄪', '𑄥𑄧'],
+    [
+      '𑄢𑄧𑄝𑄨', '𑄥𑄧𑄟𑄴', '𑄟𑄧𑄁𑄉𑄧𑄣𑄴', '𑄝𑄪𑄖𑄴',
+      '𑄝𑄳𑄢𑄨𑄥𑄪𑄛𑄴', '𑄥𑄪𑄇𑄴𑄇𑄮𑄢𑄴', '𑄥𑄧𑄚𑄨'
+    ],
+    [
+      '𑄢𑄧𑄝𑄨𑄝𑄢𑄴', '𑄥𑄧𑄟𑄴𑄝𑄢𑄴',
+      '𑄟𑄧𑄁𑄉𑄧𑄣𑄴𑄝𑄢𑄴', '𑄝𑄪𑄖𑄴𑄝𑄢𑄴',
+      '𑄝𑄳𑄢𑄨𑄥𑄪𑄛𑄴𑄝𑄢𑄴',
+      '𑄥𑄪𑄇𑄴𑄇𑄮𑄢𑄴𑄝𑄢𑄴', '𑄥𑄧𑄚𑄨𑄝𑄢𑄴'
+    ],
+    [
+      '𑄢𑄧𑄝𑄨', '𑄥𑄧𑄟𑄴', '𑄟𑄧𑄁𑄉𑄧𑄣𑄴', '𑄝𑄪𑄖𑄴',
+      '𑄝𑄳𑄢𑄨𑄥𑄪𑄛𑄴', '𑄥𑄪𑄇𑄴𑄇𑄮𑄢𑄴', '𑄥𑄧𑄚𑄨'
+    ]
+  ],
+  u,
+  [
+    [
+      '𑄎', '𑄜𑄬', '𑄟', '𑄃𑄬', '𑄟𑄬', '𑄎𑄪𑄚𑄴', '𑄎𑄪', '𑄃',
+      '𑄥𑄬', '𑄃𑄧', '𑄚𑄧', '𑄓𑄨'
+    ],
+    [
+      '𑄎𑄚𑄪', '𑄜𑄬𑄛𑄴', '𑄟𑄢𑄴𑄌𑄧',
+      '𑄃𑄬𑄛𑄳𑄢𑄨𑄣𑄴', '𑄟𑄬', '𑄎𑄪𑄚𑄴', '𑄎𑄪𑄣𑄭',
+      '𑄃𑄉𑄧𑄌𑄴𑄑𑄴', '𑄥𑄬𑄛𑄴𑄑𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄃𑄧𑄇𑄴𑄑𑄮𑄝𑄧𑄢𑄴', '𑄚𑄧𑄞𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄓𑄨𑄥𑄬𑄟𑄴𑄝𑄢𑄴'
+    ],
+    [
+      '𑄎𑄚𑄪𑄠𑄢𑄨', '𑄜𑄬𑄛𑄴𑄝𑄳𑄢𑄪𑄠𑄢𑄨',
+      '𑄟𑄢𑄴𑄌𑄧', '𑄃𑄬𑄛𑄳𑄢𑄨𑄣𑄴', '𑄟𑄬', '𑄎𑄪𑄚𑄴',
+      '𑄎𑄪𑄣𑄭', '𑄃𑄉𑄧𑄌𑄴𑄑𑄴',
+      '𑄥𑄬𑄛𑄴𑄑𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄃𑄧𑄇𑄴𑄑𑄬𑄝𑄧𑄢𑄴', '𑄚𑄧𑄞𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄓𑄨𑄥𑄬𑄟𑄴𑄝𑄧𑄢𑄴'
+    ]
+  ],
+  [
+    [
+      '𑄎', '𑄜𑄬', '𑄟', '𑄃𑄬', '𑄟𑄬', '𑄎𑄪𑄚𑄴', '𑄎𑄪', '𑄃',
+      '𑄥𑄬', '𑄃𑄧', '𑄚𑄧', '𑄓𑄨'
+    ],
+    [
+      '𑄎𑄚𑄪𑄠𑄢𑄨', '𑄜𑄬𑄛𑄴𑄝𑄳𑄢𑄪𑄠𑄢𑄨',
+      '𑄟𑄢𑄴𑄌𑄧', '𑄃𑄬𑄛𑄳𑄢𑄨𑄣𑄴', '𑄟𑄬', '𑄎𑄪𑄚𑄴',
+      '𑄎𑄪𑄣𑄭', '𑄃𑄉𑄧𑄌𑄴𑄑𑄴',
+      '𑄥𑄬𑄛𑄴𑄑𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄃𑄧𑄇𑄴𑄑𑄮𑄝𑄧𑄢𑄴', '𑄚𑄧𑄞𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄓𑄨𑄥𑄬𑄟𑄴𑄝𑄧𑄢𑄴'
+    ],
+    u
+  ],
+  [
+    [
+      '𑄈𑄳𑄢𑄨𑄌𑄴𑄑𑄴𑄛𑄫𑄢𑄴𑄝𑄧',
+      '𑄈𑄳𑄢𑄨𑄌𑄴𑄑𑄛𑄴𑄘𑄧'
+    ],
+    u, u
+  ],
+  0, [0, 0], ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '#,##,##0.00¤', '#E0'], '₹',
+  '𑄃𑄨𑄚𑄴𑄘𑄨𑄠𑄚𑄴 𑄢𑄪𑄛𑄨',
+  {'BDT': ['৳'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/ccp.ts b/packages/common/locales/ccp.ts
new file mode 100644
index 000000000000..b17aebd7a8dc
--- /dev/null
+++ b/packages/common/locales/ccp.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ccp', [['AM', 'PM'], u, u], u,
+  [
+    ['𑄢𑄧', '𑄥𑄧', '𑄟𑄧', '𑄝𑄪', '𑄝𑄳𑄢𑄨', '𑄥𑄪', '𑄥𑄧'],
+    [
+      '𑄢𑄧𑄝𑄨', '𑄥𑄧𑄟𑄴', '𑄟𑄧𑄁𑄉𑄧𑄣𑄴', '𑄝𑄪𑄖𑄴',
+      '𑄝𑄳𑄢𑄨𑄥𑄪𑄛𑄴', '𑄥𑄪𑄇𑄴𑄇𑄮𑄢𑄴', '𑄥𑄧𑄚𑄨'
+    ],
+    [
+      '𑄢𑄧𑄝𑄨𑄝𑄢𑄴', '𑄥𑄧𑄟𑄴𑄝𑄢𑄴',
+      '𑄟𑄧𑄁𑄉𑄧𑄣𑄴𑄝𑄢𑄴', '𑄝𑄪𑄖𑄴𑄝𑄢𑄴',
+      '𑄝𑄳𑄢𑄨𑄥𑄪𑄛𑄴𑄝𑄢𑄴',
+      '𑄥𑄪𑄇𑄴𑄇𑄮𑄢𑄴𑄝𑄢𑄴', '𑄥𑄧𑄚𑄨𑄝𑄢𑄴'
+    ],
+    [
+      '𑄢𑄧𑄝𑄨', '𑄥𑄧𑄟𑄴', '𑄟𑄧𑄁𑄉𑄧𑄣𑄴', '𑄝𑄪𑄖𑄴',
+      '𑄝𑄳𑄢𑄨𑄥𑄪𑄛𑄴', '𑄥𑄪𑄇𑄴𑄇𑄮𑄢𑄴', '𑄥𑄧𑄚𑄨'
+    ]
+  ],
+  u,
+  [
+    [
+      '𑄎', '𑄜𑄬', '𑄟', '𑄃𑄬', '𑄟𑄬', '𑄎𑄪𑄚𑄴', '𑄎𑄪', '𑄃',
+      '𑄥𑄬', '𑄃𑄧', '𑄚𑄧', '𑄓𑄨'
+    ],
+    [
+      '𑄎𑄚𑄪', '𑄜𑄬𑄛𑄴', '𑄟𑄢𑄴𑄌𑄧',
+      '𑄃𑄬𑄛𑄳𑄢𑄨𑄣𑄴', '𑄟𑄬', '𑄎𑄪𑄚𑄴', '𑄎𑄪𑄣𑄭',
+      '𑄃𑄉𑄧𑄌𑄴𑄑𑄴', '𑄥𑄬𑄛𑄴𑄑𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄃𑄧𑄇𑄴𑄑𑄮𑄝𑄧𑄢𑄴', '𑄚𑄧𑄞𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄓𑄨𑄥𑄬𑄟𑄴𑄝𑄢𑄴'
+    ],
+    [
+      '𑄎𑄚𑄪𑄠𑄢𑄨', '𑄜𑄬𑄛𑄴𑄝𑄳𑄢𑄪𑄠𑄢𑄨',
+      '𑄟𑄢𑄴𑄌𑄧', '𑄃𑄬𑄛𑄳𑄢𑄨𑄣𑄴', '𑄟𑄬', '𑄎𑄪𑄚𑄴',
+      '𑄎𑄪𑄣𑄭', '𑄃𑄉𑄧𑄌𑄴𑄑𑄴',
+      '𑄥𑄬𑄛𑄴𑄑𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄃𑄧𑄇𑄴𑄑𑄬𑄝𑄧𑄢𑄴', '𑄚𑄧𑄞𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄓𑄨𑄥𑄬𑄟𑄴𑄝𑄧𑄢𑄴'
+    ]
+  ],
+  [
+    [
+      '𑄎', '𑄜𑄬', '𑄟', '𑄃𑄬', '𑄟𑄬', '𑄎𑄪𑄚𑄴', '𑄎𑄪', '𑄃',
+      '𑄥𑄬', '𑄃𑄧', '𑄚𑄧', '𑄓𑄨'
+    ],
+    [
+      '𑄎𑄚𑄪𑄠𑄢𑄨', '𑄜𑄬𑄛𑄴𑄝𑄳𑄢𑄪𑄠𑄢𑄨',
+      '𑄟𑄢𑄴𑄌𑄧', '𑄃𑄬𑄛𑄳𑄢𑄨𑄣𑄴', '𑄟𑄬', '𑄎𑄪𑄚𑄴',
+      '𑄎𑄪𑄣𑄭', '𑄃𑄉𑄧𑄌𑄴𑄑𑄴',
+      '𑄥𑄬𑄛𑄴𑄑𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄃𑄧𑄇𑄴𑄑𑄮𑄝𑄧𑄢𑄴', '𑄚𑄧𑄞𑄬𑄟𑄴𑄝𑄧𑄢𑄴',
+      '𑄓𑄨𑄥𑄬𑄟𑄴𑄝𑄧𑄢𑄴'
+    ],
+    u
+  ],
+  [
+    [
+      '𑄈𑄳𑄢𑄨𑄌𑄴𑄑𑄴𑄛𑄫𑄢𑄴𑄝𑄧',
+      '𑄈𑄳𑄢𑄨𑄌𑄴𑄑𑄛𑄴𑄘𑄧'
+    ],
+    u, u
+  ],
+  0, [6, 0], ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '#,##,##0.00¤', '#E0'], '৳',
+  '𑄝𑄁𑄣𑄘𑄬𑄥𑄨 𑄑𑄬𑄋',
+  {'BDT': ['৳'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/ce.ts b/packages/common/locales/ce.ts
new file mode 100644
index 000000000000..bb425ec3564c
--- /dev/null
+++ b/packages/common/locales/ce.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ce', [['AM', 'PM'], u, u], u,
+  [
+    ['кӀи', 'ор', 'ши', 'кха', 'еа', 'пӀе', 'шуо'], u,
+    [
+      'кӀира', 'оршот', 'шинара', 'кхаара', 'еара', 'пӀераска',
+      'шуот'
+    ],
+    ['кӀи', 'ор', 'ши', 'кха', 'еа', 'пӀе', 'шуо']
+  ],
+  [
+    ['кӀ', 'о', 'ш', 'кх', 'е', 'пӀ', 'ш'],
+    ['кӀи', 'ор', 'ши', 'кха', 'еа', 'пӀе', 'шуо'],
+    [
+      'кӀира', 'оршот', 'шинара', 'кхаара', 'еара', 'пӀераска',
+      'шуот'
+    ],
+    ['кӀи', 'ор', 'ши', 'кха', 'еа', 'пӀе', 'шуо']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен',
+      'окт', 'ноя', 'дек'
+    ],
+    [
+      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
+      'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь',
+      'декабрь'
+    ]
+  ],
+  u,
+  [
+    ['в. э. тӀ. я', 'в. э'], u,
+    [
+      'Ӏийса пайхамар вина де кхачале',
+      'Ӏийса пайхамар вина дийнахь дуьйна'
+    ]
+  ],
+  1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'Терхьаш дац', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '₽', 'Российн сом',
+  {'JPY': ['JP¥', '¥'], 'RON': [u, 'лей'], 'RUB': ['₽'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/cgg.ts b/packages/common/locales/cgg.ts
new file mode 100644
index 000000000000..67deefc27057
--- /dev/null
+++ b/packages/common/locales/cgg.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'cgg', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'K', 'R', 'S', 'N', 'T', 'M'], ['SAN', 'ORK', 'OKB', 'OKS', 'OKN', 'OKT', 'OMK'],
+    ['Sande', 'Orwokubanza', 'Orwakabiri', 'Orwakashatu', 'Orwakana', 'Orwakataano', 'Orwamukaaga'],
+    ['SAN', 'ORK', 'OKB', 'OKS', 'OKN', 'OKT', 'OMK']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['KBZ', 'KBR', 'KST', 'KKN', 'KTN', 'KMK', 'KMS', 'KMN', 'KMW', 'KKM', 'KNK', 'KNB'],
+    [
+      'Okwokubanza', 'Okwakabiri', 'Okwakashatu', 'Okwakana', 'Okwakataana', 'Okwamukaaga',
+      'Okwamushanju', 'Okwamunaana', 'Okwamwenda', 'Okwaikumi', 'Okwaikumi na kumwe',
+      'Okwaikumi na ibiri'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['Kurisito Atakaijire', 'Kurisito Yaijire']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'USh', 'Eshiringi ya Uganda',
+  {'JPY': ['JP¥', '¥'], 'UGX': ['USh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/chr.ts b/packages/common/locales/chr.ts
new file mode 100644
index 000000000000..13c7c6071032
--- /dev/null
+++ b/packages/common/locales/chr.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'chr', [['Ꮜ', 'Ꮢ'], ['ᏌᎾᎴ', 'ᏒᎯᏱᎢ'], ['ᏌᎾᎴ', 'ᏒᎯᏱᎢᏗᏢ']],
+  [['ᏌᎾᎴ', 'ᏒᎯᏱᎢ'], u, ['ᏌᎾᎴ', 'ᏒᎯᏱᎢᏗᏢ']],
+  [
+    ['Ꮖ', 'Ꮙ', 'Ꮤ', 'Ꮶ', 'Ꮕ', 'Ꮷ', 'Ꭴ'],
+    ['ᏆᏍᎬ', 'ᏉᏅᎯ', 'ᏔᎵᏁ', 'ᏦᎢᏁ', 'ᏅᎩᏁ', 'ᏧᎾᎩ', 'ᏈᏕᎾ'],
+    [
+      'ᎤᎾᏙᏓᏆᏍᎬ', 'ᎤᎾᏙᏓᏉᏅᎯ', 'ᏔᎵᏁᎢᎦ', 'ᏦᎢᏁᎢᎦ',
+      'ᏅᎩᏁᎢᎦ', 'ᏧᎾᎩᎶᏍᏗ', 'ᎤᎾᏙᏓᏈᏕᎾ'
+    ],
+    ['ᏍᎬ', 'ᏅᎯ', 'ᏔᎵ', 'ᏦᎢ', 'ᏅᎩ', 'ᏧᎾ', 'ᏕᎾ']
+  ],
+  u,
+  [
+    ['Ꭴ', 'Ꭷ', 'Ꭰ', 'Ꭷ', 'Ꭰ', 'Ꮥ', 'Ꭻ', 'Ꭶ', 'Ꮪ', 'Ꮪ', 'Ꮕ', 'Ꭵ'],
+    [
+      'ᎤᏃ', 'ᎧᎦ', 'ᎠᏅ', 'ᎧᏬ', 'ᎠᏂ', 'ᏕᎭ', 'ᎫᏰ', 'ᎦᎶ', 'ᏚᎵ',
+      'ᏚᏂ', 'ᏅᏓ', 'ᎥᏍ'
+    ],
+    [
+      'ᎤᏃᎸᏔᏅ', 'ᎧᎦᎵ', 'ᎠᏅᏱ', 'ᎧᏬᏂ', 'ᎠᏂᏍᎬᏘ', 'ᏕᎭᎷᏱ',
+      'ᎫᏰᏉᏂ', 'ᎦᎶᏂ', 'ᏚᎵᏍᏗ', 'ᏚᏂᏅᏗ', 'ᏅᏓᏕᏆ', 'ᎥᏍᎩᏱ'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['ᏧᏓᎷᎸ ᎤᎷᎯᏍᏗ ᎦᎶᏁᏛ', 'ᎠᏃ ᏙᎻᏂ']], 0,
+  [6, 0], ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} ᎤᎾᎢ {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US ᎠᏕᎳ', {'JPY': ['JP¥', '¥']}, plural
+];
diff --git a/packages/common/locales/ckb-IR.ts b/packages/common/locales/ckb-IR.ts
new file mode 100644
index 000000000000..d3af93a66886
--- /dev/null
+++ b/packages/common/locales/ckb-IR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ckb-IR', [['ب.ن', 'د.ن'], u, u], u,
+  [
+    ['ی', 'د', 'س', 'چ', 'پ', 'ھ', 'ش'],
+    [
+      'یەکشەممە', 'دووشەممە', 'سێشەممە', 'چوارشەممە',
+      'پێنجشەممە', 'ھەینی', 'شەممە'
+    ],
+    u, ['١ش', '٢ش', '٣ش', '٤ش', '٥ش', 'ھ', 'ش']
+  ],
+  u,
+  [
+    ['ک', 'ش', 'ئ', 'ن', 'ئ', 'ح', 'ت', 'ئ', 'ئ', 'ت', 'ت', 'ک'],
+    [
+      'کانوونی دووەم', 'شوبات', 'ئازار', 'نیسان', 'ئایار',
+      'حوزەیران', 'تەمووز', 'ئاب', 'ئەیلوول', 'تشرینی یەکەم',
+      'تشرینی دووەم', 'کانونی یەکەم'
+    ],
+    u
+  ],
+  u, [['پێش زایین', 'زایینی'], u, u], 6, [5, 5],
+  ['y-MM-dd', 'y MMM d', 'dی MMMMی y', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '\u200e+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'IRR', 'IRR',
+  {'IQD': ['د.ع.\u200f'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ckb.ts b/packages/common/locales/ckb.ts
new file mode 100644
index 000000000000..56e664e2117f
--- /dev/null
+++ b/packages/common/locales/ckb.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ckb', [['ب.ن', 'د.ن'], u, u], u,
+  [
+    ['ی', 'د', 'س', 'چ', 'پ', 'ھ', 'ش'],
+    [
+      'یەکشەممە', 'دووشەممە', 'سێشەممە', 'چوارشەممە',
+      'پێنجشەممە', 'ھەینی', 'شەممە'
+    ],
+    u, ['١ش', '٢ش', '٣ش', '٤ش', '٥ش', 'ھ', 'ش']
+  ],
+  u,
+  [
+    ['ک', 'ش', 'ئ', 'ن', 'ئ', 'ح', 'ت', 'ئ', 'ئ', 'ت', 'ت', 'ک'],
+    [
+      'کانوونی دووەم', 'شوبات', 'ئازار', 'نیسان', 'ئایار',
+      'حوزەیران', 'تەمووز', 'ئاب', 'ئەیلوول', 'تشرینی یەکەم',
+      'تشرینی دووەم', 'کانونی یەکەم'
+    ],
+    u
+  ],
+  u, [['پێش زایین', 'زایینی'], u, u], 6, [5, 6],
+  ['y-MM-dd', 'y MMM d', 'dی MMMMی y', 'y MMMM d, EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '\u200e+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.ع.\u200f', 'IQD',
+  {'IQD': ['د.ع.\u200f'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/closure-locale.ts b/packages/common/locales/closure-locale.ts
new file mode 100644
index 000000000000..183913a7c9e6
--- /dev/null
+++ b/packages/common/locales/closure-locale.ts
@@ -0,0 +1,4947 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+import {registerLocaleData} from '../src/i18n/locale_data';
+
+const u = undefined;
+
+function plural_af(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_af = [
+  'af', [['v', 'n'], ['vm.', 'nm.'], u], u,
+  [
+    ['S', 'M', 'D', 'W', 'D', 'V', 'S'], ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.'],
+    ['Sondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrydag', 'Saterdag'],
+    ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan.', 'Feb.', 'Mrt.', 'Apr.', 'Mei', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Des.'],
+    [
+      'Januarie', 'Februarie', 'Maart', 'April', 'Mei', 'Junie', 'Julie', 'Augustus', 'September',
+      'Oktober', 'November', 'Desember'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], u, ['voor Christus', 'na Christus']], 0, [6, 0],
+  ['y-MM-dd', 'dd MMM y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'R', 'Suid-Afrikaanse rand', {
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'RON': [u, 'leu'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'ZAR': ['R']
+  },
+  plural_af
+];
+
+function plural_am(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export const locale_am = [
+  'am', [['ጠ', 'ከ'], ['ጥዋት', 'ከሰዓት'], u], u,
+  [
+    ['እ', 'ሰ', 'ማ', 'ረ', 'ሐ', 'ዓ', 'ቅ'], ['እሑድ', 'ሰኞ', 'ማክሰ', 'ረቡዕ', 'ሐሙስ', 'ዓርብ', 'ቅዳሜ'],
+    ['እሑድ', 'ሰኞ', 'ማክሰኞ', 'ረቡዕ', 'ሐሙስ', 'ዓርብ', 'ቅዳሜ'], ['እ', 'ሰ', 'ማ', 'ረ', 'ሐ', 'ዓ', 'ቅ']
+  ],
+  u,
+  [
+    ['ጃ', 'ፌ', 'ማ', 'ኤ', 'ሜ', 'ጁ', 'ጁ', 'ኦ', 'ሴ', 'ኦ', 'ኖ', 'ዲ'],
+    ['ጃንዩ', 'ፌብሩ', 'ማርች', 'ኤፕሪ', 'ሜይ', 'ጁን', 'ጁላይ', 'ኦገስ', 'ሴፕቴ', 'ኦክቶ', 'ኖቬም', 'ዲሴም'],
+    [
+      'ጃንዩወሪ', 'ፌብሩወሪ', 'ማርች', 'ኤፕሪል', 'ሜይ', 'ጁን', 'ጁላይ', 'ኦገስት', 'ሴፕቴምበር', 'ኦክቶበር', 'ኖቬምበር',
+      'ዲሴምበር'
+    ]
+  ],
+  u, [['ዓ/ዓ', 'ዓ/ም'], u, ['ዓመተ ዓለም', 'ዓመተ ምሕረት']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE ፣d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'ብር', 'የኢትዮጵያ ብር', {
+    'AUD': ['AU$', '$'],
+    'CNH': ['የቻይና ዩዋን'],
+    'ETB': ['ብር'],
+    'JPY': ['JP¥', '¥'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural_am
+];
+
+function plural_ar(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export const locale_ar = [
+  'ar', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'], u,
+    ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د'],
+    [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر',
+      'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'ليس رقمًا', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ج.م.\u200f', 'جنيه مصري', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural_ar
+];
+
+function plural_ar_DZ(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
+  return 5;
+}
+
+export const locale_ar_DZ = [
+  'ar-DZ', [['ص', 'م'], u, u], [['ص', 'م'], u, ['صباحًا', 'مساءً']],
+  [
+    ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'], u,
+    ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت']
+  ],
+  u,
+  [
+    ['ج', 'ف', 'م', 'أ', 'م', 'ج', 'ج', 'أ', 'س', 'أ', 'ن', 'د'],
+    [
+      'جانفي', 'فيفري', 'مارس', 'أفريل', 'ماي', 'جوان', 'جويلية', 'أوت', 'سبتمبر', 'أكتوبر',
+      'نوفمبر', 'ديسمبر'
+    ],
+    u
+  ],
+  u, [['ق.م', 'م'], u, ['قبل الميلاد', 'ميلادي']], 6, [5, 6],
+  ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '\u200e%\u200e', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'ليس رقمًا', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.ج.\u200f', 'دينار جزائري', {
+    'AED': ['د.إ.\u200f'],
+    'ARS': [u, 'AR$'],
+    'AUD': ['AU$'],
+    'BBD': [u, 'BB$'],
+    'BHD': ['د.ب.\u200f'],
+    'BMD': [u, 'BM$'],
+    'BND': [u, 'BN$'],
+    'BSD': [u, 'BS$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': ['CA$'],
+    'CLP': [u, 'CL$'],
+    'CNY': ['CN¥'],
+    'COP': [u, 'CO$'],
+    'CUP': [u, 'CU$'],
+    'DOP': [u, 'DO$'],
+    'DZD': ['د.ج.\u200f'],
+    'EGP': ['ج.م.\u200f', 'E£'],
+    'FJD': [u, 'FJ$'],
+    'GBP': ['£', 'UK£'],
+    'GYD': [u, 'GY$'],
+    'HKD': ['HK$'],
+    'IQD': ['د.ع.\u200f'],
+    'IRR': ['ر.إ.'],
+    'JMD': [u, 'JM$'],
+    'JOD': ['د.أ.\u200f'],
+    'JPY': ['JP¥'],
+    'KWD': ['د.ك.\u200f'],
+    'KYD': [u, 'KY$'],
+    'LBP': ['ل.ل.\u200f', 'L£'],
+    'LYD': ['د.ل.\u200f'],
+    'MAD': ['د.م.\u200f'],
+    'MRO': ['أ.م.\u200f'],
+    'MXN': ['MX$'],
+    'NZD': ['NZ$'],
+    'OMR': ['ر.ع.\u200f'],
+    'QAR': ['ر.ق.\u200f'],
+    'SAR': ['ر.س.\u200f'],
+    'SBD': [u, 'SB$'],
+    'SDD': ['د.س.\u200f'],
+    'SDG': ['ج.س.'],
+    'SRD': [u, 'SR$'],
+    'SYP': ['ل.س.\u200f', '£'],
+    'THB': ['฿'],
+    'TND': ['د.ت.\u200f'],
+    'TTD': [u, 'TT$'],
+    'TWD': ['NT$'],
+    'USD': ['US$'],
+    'UYU': [u, 'UY$'],
+    'XXX': ['***'],
+    'YER': ['ر.ي.\u200f']
+  },
+  plural_ar_DZ
+];
+
+function plural_az(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_az = [
+  'az', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['7', '1', '2', '3', '4', '5', '6'], ['B.', 'B.E.', 'Ç.A.', 'Ç.', 'C.A.', 'C.', 'Ş.'],
+    ['bazar', 'bazar ertəsi', 'çərşənbə axşamı', 'çərşənbə', 'cümə axşamı', 'cümə', 'şənbə'],
+    ['B.', 'B.E.', 'Ç.A.', 'Ç.', 'C.A.', 'C.', 'Ş.']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avq', 'sen', 'okt', 'noy', 'dek'],
+    [
+      'yanvar', 'fevral', 'mart', 'aprel', 'may', 'iyun', 'iyul', 'avqust', 'sentyabr', 'oktyabr',
+      'noyabr', 'dekabr'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avq', 'sen', 'okt', 'noy', 'dek'],
+    [
+      'Yanvar', 'Fevral', 'Mart', 'Aprel', 'May', 'İyun', 'İyul', 'Avqust', 'Sentyabr', 'Oktyabr',
+      'Noyabr', 'Dekabr'
+    ]
+  ],
+  [['e.ə.', 'y.e.'], u, ['eramızdan əvvəl', 'yeni era']], 1, [6, 0],
+  ['dd.MM.yy', 'd MMM y', 'd MMMM y', 'd MMMM y, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₼', 'Azərbaycan Manatı', {
+    'AZN': ['₼'],
+    'JPY': ['JP¥', '¥'],
+    'RON': [u, 'ley'],
+    'SYP': [u, 'S£'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural_az
+];
+
+function plural_be(n: number): number {
+  if (n % 10 === 1 && !(n % 100 === 11)) return 1;
+  if (n % 10 === Math.floor(n % 10) && n % 10 >= 2 && n % 10 <= 4 &&
+      !(n % 100 >= 12 && n % 100 <= 14))
+    return 3;
+  if (n % 10 === 0 || n % 10 === Math.floor(n % 10) && n % 10 >= 5 && n % 10 <= 9 ||
+      n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export const locale_be = [
+  'be', [['am', 'pm'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['н', 'п', 'а', 'с', 'ч', 'п', 'с'], ['нд', 'пн', 'аў', 'ср', 'чц', 'пт', 'сб'],
+    ['нядзеля', 'панядзелак', 'аўторак', 'серада', 'чацвер', 'пятніца', 'субота'],
+    ['нд', 'пн', 'аў', 'ср', 'чц', 'пт', 'сб']
+  ],
+  u,
+  [
+    ['с', 'л', 'с', 'к', 'м', 'ч', 'л', 'ж', 'в', 'к', 'л', 'с'],
+    ['сту', 'лют', 'сак', 'кра', 'мая', 'чэр', 'ліп', 'жні', 'вер', 'кас', 'ліс', 'сне'],
+    [
+      'студзеня', 'лютага', 'сакавіка', 'красавіка', 'мая', 'чэрвеня', 'ліпеня', 'жніўня',
+      'верасня', 'кастрычніка', 'лістапада', 'снежня'
+    ]
+  ],
+  [
+    ['с', 'л', 'с', 'к', 'м', 'ч', 'л', 'ж', 'в', 'к', 'л', 'с'],
+    ['сту', 'лют', 'сак', 'кра', 'май', 'чэр', 'ліп', 'жні', 'вер', 'кас', 'ліс', 'сне'],
+    [
+      'студзень', 'люты', 'сакавік', 'красавік', 'май', 'чэрвень', 'ліпень', 'жнівень', 'верасень',
+      'кастрычнік', 'лістапад', 'снежань'
+    ]
+  ],
+  [['да н.э.', 'н.э.'], u, ['да нараджэння Хрыстова', 'ад нараджэння Хрыстова']], 1, [6, 0],
+  ['d.MM.yy', 'd.MM.y', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss, zzzz'], ['{1}, {0}', u, '{1} \'у\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'Br', 'беларускі рубель', {
+    'AUD': ['A$'],
+    'BBD': [u, 'Bds$'],
+    'BMD': [u, 'BD$'],
+    'BRL': [u, 'R$'],
+    'BSD': [u, 'B$'],
+    'BYN': ['Br'],
+    'BZD': [u, 'BZ$'],
+    'CAD': [u, 'CA$'],
+    'CUC': [u, 'CUC$'],
+    'CUP': [u, '$MN'],
+    'DOP': [u, 'RD$'],
+    'FJD': [u, 'FJ$'],
+    'FKP': [u, 'FK£'],
+    'GYD': [u, 'G$'],
+    'ISK': [u, 'Íkr'],
+    'JMD': [u, 'J$'],
+    'KYD': [u, 'CI$'],
+    'LRD': [u, 'L$'],
+    'MXN': ['MX$'],
+    'NAD': [u, 'N$'],
+    'NZD': [u, 'NZ$'],
+    'RUB': ['₽', 'руб.'],
+    'SBD': [u, 'SI$'],
+    'SGD': [u, 'S$'],
+    'TTD': [u, 'TT$'],
+    'UYU': [u, '$U'],
+    'XCD': ['EC$']
+  },
+  plural_be
+];
+
+function plural_bg(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_bg = [
+  'bg', [['am', 'pm'], u, ['пр.об.', 'сл.об.']], [['am', 'pm'], u, u],
+  [
+    ['н', 'п', 'в', 'с', 'ч', 'п', 'с'], ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    ['неделя', 'понеделник', 'вторник', 'сряда', 'четвъртък', 'петък', 'събота'],
+    ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  u,
+  [
+    ['я', 'ф', 'м', 'а', 'м', 'ю', 'ю', 'а', 'с', 'о', 'н', 'д'],
+    ['яну', 'фев', 'март', 'апр', 'май', 'юни', 'юли', 'авг', 'сеп', 'окт', 'ное', 'дек'],
+    [
+      'януари', 'февруари', 'март', 'април', 'май', 'юни', 'юли', 'август', 'септември', 'октомври',
+      'ноември', 'декември'
+    ]
+  ],
+  u, [['пр.Хр.', 'сл.Хр.'], u, ['преди Христа', 'след Христа']], 1, [6, 0],
+  ['d.MM.yy \'г\'.', 'd.MM.y \'г\'.', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['H:mm \'ч\'.', 'H:mm:ss \'ч\'.', 'H:mm:ss \'ч\'. z', 'H:mm:ss \'ч\'. zzzz'],
+  ['{1}, {0}', u, u, u], [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '0.00 ¤', '#E0'], 'лв.', 'Български лев', {
+    'ARS': [],
+    'AUD': [],
+    'BBD': [],
+    'BDT': [],
+    'BGN': ['лв.'],
+    'BMD': [],
+    'BND': [],
+    'BRL': [],
+    'BSD': [],
+    'BYN': [],
+    'BZD': [],
+    'CAD': [],
+    'CLP': [],
+    'CNY': [],
+    'COP': [],
+    'CRC': [],
+    'CUP': [],
+    'DOP': [],
+    'FJD': [],
+    'GBP': [u, '£'],
+    'GIP': [],
+    'GYD': [],
+    'HKD': [],
+    'ILS': [],
+    'INR': [],
+    'JMD': [],
+    'JPY': [u, '¥'],
+    'KHR': [],
+    'KRW': [],
+    'KYD': [],
+    'KZT': [],
+    'LAK': [],
+    'LRD': [],
+    'MNT': [],
+    'MXN': [],
+    'NAD': [],
+    'NGN': [],
+    'NZD': [],
+    'PHP': [],
+    'PYG': [],
+    'RON': [],
+    'SBD': [],
+    'SGD': [],
+    'SRD': [],
+    'SSP': [],
+    'TRY': [],
+    'TTD': [],
+    'TWD': [],
+    'UAH': [],
+    'USD': ['щ.д.', '$'],
+    'UYU': [],
+    'VND': [],
+    'XCD': [u, '$']
+  },
+  plural_bg
+];
+
+function plural_bn(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export const locale_bn = [
+  'bn', [['AM', 'PM'], u, u], u,
+  [
+    ['র', 'সো', 'ম', 'বু', 'বৃ', 'শু', 'শ'], ['রবি', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতি', 'শুক্র', 'শনি'],
+    ['রবিবার', 'সোমবার', 'মঙ্গলবার', 'বুধবার', 'বৃহস্পতিবার', 'শুক্রবার', 'শনিবার'],
+    ['রঃ', 'সোঃ', 'মঃ', 'বুঃ', 'বৃঃ', 'শুঃ', 'শোঃ']
+  ],
+  [
+    ['র', 'সো', 'ম', 'বু', 'বৃ', 'শু', 'শ'], ['রবি', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতি', 'শুক্র', 'শনি'],
+    ['রবিবার', 'সোমবার', 'মঙ্গলবার', 'বুধবার', 'বৃহষ্পতিবার', 'শুক্রবার', 'শনিবার'],
+    ['রঃ', 'সোঃ', 'মঃ', 'বুঃ', 'বৃঃ', 'শুঃ', 'শন���']
+  ],
+  [
+    ['জা', 'ফে', 'মা', 'এ', 'মে', 'জুন', 'জু', 'আ', 'সে', 'অ', 'ন', 'ডি'],
+    [
+      'জানু', 'ফেব', 'মার্চ', 'এপ্রিল', 'মে', 'জুন', 'জুলাই', 'আগস্ট', 'সেপ্টেম্বর', 'অক্টোবর', 'নভেম্বর',
+      'ডিসেম্বর'
+    ],
+    [
+      'জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ', 'এপ্রিল', 'মে', 'জুন', 'জুলাই', 'আগস্ট', 'সেপ্টেম্বর', 'অক্টোবর',
+      'নভেম্বর', 'ডিসেম্বর'
+    ]
+  ],
+  [
+    ['জা', 'ফে', 'মা', 'এ', 'মে', 'জুন', 'জু', 'আ', 'সে', 'অ', 'ন', 'ডি'],
+    [
+      'জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ', 'এপ্রিল', 'মে', 'জুন', 'জুলাই', 'আগস্ট', 'সেপ্টেম্বর', 'অক্টোবর',
+      'নভেম্বর', 'ডিসেম্বর'
+    ],
+    u
+  ],
+  [['খ্রিস্টপূর্ব', 'খৃষ্টাব্দ'], u, ['খ্রিস্টপূর্ব', 'খ্রীষ্টাব্দ']], 0, [6, 0],
+  ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '#,##,##0.00¤', '#E0'], '৳', 'বাংলাদেশী টাকা',
+  {'BDT': ['৳'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']}, plural_bn
+];
+
+function plural_br(n: number): number {
+  if (n % 10 === 1 && !(n % 100 === 11 || n % 100 === 71 || n % 100 === 91)) return 1;
+  if (n % 10 === 2 && !(n % 100 === 12 || n % 100 === 72 || n % 100 === 92)) return 2;
+  if (n % 10 === Math.floor(n % 10) && (n % 10 >= 3 && n % 10 <= 4 || n % 10 === 9) &&
+      !(n % 100 >= 10 && n % 100 <= 19 || n % 100 >= 70 && n % 100 <= 79 ||
+        n % 100 >= 90 && n % 100 <= 99))
+    return 3;
+  if (!(n === 0) && n % 1e6 === 0) return 4;
+  return 5;
+}
+
+export const locale_br = [
+  'br', [['am', 'gm'], ['A.M.', 'G.M.'], u], [['A.M.', 'G.M.'], u, u],
+  [
+    ['Su', 'L', 'Mz', 'Mc', 'Y', 'G', 'Sa'], ['Sul', 'Lun', 'Meu.', 'Mer.', 'Yaou', 'Gwe.', 'Sad.'],
+    ['Sul', 'Lun', 'Meurzh', 'Mercʼher', 'Yaou', 'Gwener', 'Sadorn'],
+    ['Sul', 'Lun', 'Meu.', 'Mer.', 'Yaou', 'Gwe.', 'Sad.']
+  ],
+  u,
+  [
+    ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+    [
+      'Gen.', 'Cʼhwe.', 'Meur.', 'Ebr.', 'Mae', 'Mezh.', 'Goue.', 'Eost', 'Gwen.', 'Here', 'Du',
+      'Kzu.'
+    ],
+    [
+      'Genver', 'Cʼhwevrer', 'Meurzh', 'Ebrel', 'Mae', 'Mezheven', 'Gouere', 'Eost', 'Gwengolo',
+      'Here', 'Du', 'Kerzu'
+    ]
+  ],
+  u, [['a-raok J.K.', 'goude J.K.'], u, ['a-raok Jezuz-Krist', 'goude Jezuz-Krist']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', '{1} \'da\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['$A', '$'],
+    'BRL': [u, 'R$'],
+    'CAD': ['$CA', '$'],
+    'CNY': [u, '¥'],
+    'EGP': [u, '£ E'],
+    'GBP': ['£ RU', '£'],
+    'HKD': ['$ HK', '$'],
+    'ILS': [u, '₪'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'LBP': [u, '£L'],
+    'NZD': ['$ ZN', '$'],
+    'TOP': [u, '$ T'],
+    'TWD': [u, '$'],
+    'USD': ['$ SU', '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$']
+  },
+  plural_br
+];
+
+function plural_bs(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export const locale_bs = [
+  'bs', [['prijepodne', 'popodne'], u, u], u,
+  [
+    ['N', 'P', 'U', 'S', 'Č', 'P', 'S'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  [
+    ['n', 'p', 'u', 's', 'č', 'p', 's'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'avg', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'januar', 'februar', 'mart', 'april', 'maj', 'juni', 'juli', 'avgust', 'septembar', 'oktobar',
+      'novembar', 'decembar'
+    ]
+  ],
+  u, [['p.n.e.', 'n.e.'], ['p. n. e.', 'n. e.'], ['prije nove ere', 'nove ere']], 1, [6, 0],
+  ['d.M.yy.', 'd. MMM y.', 'd. MMMM y.', 'EEEE, d. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'u\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'KM', 'Bosanskohercegovačka konvertibilna marka', {
+    'AUD': [u, '$'],
+    'BAM': ['KM'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'HRK': ['kn'],
+    'ILS': [u, '₪'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RSD': ['din.'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': [u, '$'],
+    'XCD': [u, '$'],
+    'XPF': []
+  },
+  plural_bs
+];
+
+function plural_ca(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_ca = [
+  'ca', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['dg', 'dl', 'dt', 'dc', 'dj', 'dv', 'ds'], ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.'],
+    ['diumenge', 'dilluns', 'dimarts', 'dimecres', 'dijous', 'divendres', 'dissabte'],
+    ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.']
+  ],
+  u,
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'de gen.', 'de febr.', 'de març', 'd’abr.', 'de maig', 'de juny', 'de jul.', 'd’ag.',
+      'de set.', 'd’oct.', 'de nov.', 'de des.'
+    ],
+    [
+      'de gener', 'de febrer', 'de març', 'd’abril', 'de maig', 'de juny', 'de juliol', 'd’agost',
+      'de setembre', 'd’octubre', 'de novembre', 'de desembre'
+    ]
+  ],
+  [
+    ['GN', 'FB', 'MÇ', 'AB', 'MG', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DS'],
+    [
+      'gen.', 'febr.', 'març', 'abr.', 'maig', 'juny', 'jul.', 'ag.', 'set.', 'oct.', 'nov.', 'des.'
+    ],
+    [
+      'gener', 'febrer', 'març', 'abril', 'maig', 'juny', 'juliol', 'agost', 'setembre', 'octubre',
+      'novembre', 'desembre'
+    ]
+  ],
+  [['aC', 'dC'], u, ['abans de Crist', 'després de Crist']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM \'de\' y', 'EEEE, d MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', '{1} \'a\' \'les\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['AU$', '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': ['¥'],
+    'ESP': ['₧'],
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'THB': ['฿'],
+    'USD': [u, '$'],
+    'VEF': [],
+    'XCD': [u, '$']
+  },
+  plural_ca
+];
+
+function plural_chr(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_chr = [
+  'chr', [['Ꮜ', 'Ꮢ'], ['ᏌᎾᎴ', 'ᏒᎯᏱᎢ'], ['ᏌᎾᎴ', 'ᏒᎯᏱᎢᏗᏢ']], [['ᏌᎾᎴ', 'ᏒᎯᏱᎢ'], u, ['ᏌᎾᎴ', 'ᏒᎯᏱᎢᏗᏢ']],
+  [
+    ['Ꮖ', 'Ꮙ', 'Ꮤ', 'Ꮶ', 'Ꮕ', 'Ꮷ', 'Ꭴ'], ['ᏆᏍᎬ', 'ᏉᏅᎯ', 'ᏔᎵᏁ', 'ᏦᎢᏁ', 'ᏅᎩᏁ', 'ᏧᎾᎩ', 'ᏈᏕᎾ'],
+    ['ᎤᎾᏙᏓᏆᏍᎬ', 'ᎤᎾᏙᏓᏉᏅᎯ', 'ᏔᎵᏁᎢᎦ', 'ᏦᎢᏁᎢᎦ', 'ᏅᎩᏁᎢᎦ', 'ᏧᎾᎩᎶᏍᏗ', 'ᎤᎾᏙᏓᏈᏕᎾ'],
+    ['ᏍᎬ', 'ᏅᎯ', 'ᏔᎵ', 'ᏦᎢ', 'ᏅᎩ', 'ᏧᎾ', 'ᏕᎾ']
+  ],
+  u,
+  [
+    ['Ꭴ', 'Ꭷ', 'Ꭰ', 'Ꭷ', 'Ꭰ', 'Ꮥ', 'Ꭻ', 'Ꭶ', 'Ꮪ', 'Ꮪ', 'Ꮕ', 'Ꭵ'],
+    ['ᎤᏃ', 'ᎧᎦ', 'ᎠᏅ', 'ᎧᏬ', 'ᎠᏂ', 'ᏕᎭ', 'ᎫᏰ', 'ᎦᎶ', 'ᏚᎵ', 'ᏚᏂ', 'ᏅᏓ', 'ᎥᏍ'],
+    ['ᎤᏃᎸᏔᏅ', 'ᎧᎦᎵ', 'ᎠᏅᏱ', 'ᎧᏬᏂ', 'ᎠᏂᏍᎬᏘ', 'ᏕᎭᎷᏱ', 'ᎫᏰᏉᏂ', 'ᎦᎶᏂ', 'ᏚᎵᏍᏗ', 'ᏚᏂᏅᏗ', 'ᏅᏓᏕᏆ', 'ᎥᏍᎩᏱ']
+  ],
+  u, [['BC', 'AD'], u, ['ᏧᏓᎷᎸ ᎤᎷᎯᏍᏗ ᎦᎶᏁᏛ', 'ᎠᏃ ᏙᎻᏂ']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} ᎤᎾᎢ {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US ᎠᏕᎳ', {'JPY': ['JP¥', '¥']}, plural_chr
+];
+
+function plural_cs(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (i === Math.floor(i) && i >= 2 && i <= 4 && v === 0) return 3;
+  if (!(v === 0)) return 4;
+  return 5;
+}
+
+export const locale_cs = [
+  'cs', [['dop.', 'odp.'], u, u], u,
+  [
+    ['N', 'P', 'Ú', 'S', 'Č', 'P', 'S'], ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
+    ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'],
+    ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['led', 'úno', 'bře', 'dub', 'kvě', 'čvn', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
+    [
+      'ledna', 'února', 'března', 'dubna', 'května', 'června', 'července', 'srpna', 'září', 'října',
+      'listopadu', 'prosince'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['led', 'úno', 'bře', 'dub', 'kvě', 'čvn', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
+    [
+      'leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen', 'září', 'říjen',
+      'listopad', 'prosinec'
+    ]
+  ],
+  [['př.n.l.', 'n.l.'], ['př. n. l.', 'n. l.'], ['před naším letopočtem', 'našeho letopočtu']], 1,
+  [6, 0], ['dd.MM.yy', 'd. M. y', 'd. MMMM y', 'EEEE d. MMMM y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'Kč', 'česká koruna', {
+    'AUD': ['AU$', '$'],
+    'CSK': ['Kčs'],
+    'CZK': ['Kč'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': ['JP¥', '¥'],
+    'RON': [u, 'L'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫'],
+    'XEU': ['ECU']
+  },
+  plural_cs
+];
+
+function plural_cy(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n === 3) return 3;
+  if (n === 6) return 4;
+  return 5;
+}
+
+export const locale_cy = [
+  'cy', [['b', 'h'], ['yb', 'yh'], u], [['yb', 'yh'], u, u],
+  [
+    ['S', 'Ll', 'M', 'M', 'I', 'G', 'S'], ['Sul', 'Llun', 'Maw', 'Mer', 'Iau', 'Gwen', 'Sad'],
+    [
+      'Dydd Sul', 'Dydd Llun', 'Dydd Mawrth', 'Dydd Mercher', 'Dydd Iau', 'Dydd Gwener',
+      'Dydd Sadwrn'
+    ],
+    ['Su', 'Ll', 'Ma', 'Me', 'Ia', 'Gw', 'Sa']
+  ],
+  [
+    ['S', 'Ll', 'M', 'M', 'I', 'G', 'S'], ['Sul', 'Llun', 'Maw', 'Mer', 'Iau', 'Gwe', 'Sad'],
+    [
+      'Dydd Sul', 'Dydd Llun', 'Dydd Mawrth', 'Dydd Mercher', 'Dydd Iau', 'Dydd Gwener',
+      'Dydd Sadwrn'
+    ],
+    ['Su', 'Ll', 'Ma', 'Me', 'Ia', 'Gw', 'Sa']
+  ],
+  [
+    ['I', 'Ch', 'M', 'E', 'M', 'M', 'G', 'A', 'M', 'H', 'T', 'Rh'],
+    ['Ion', 'Chwef', 'Maw', 'Ebrill', 'Mai', 'Meh', 'Gorff', 'Awst', 'Medi', 'Hyd', 'Tach', 'Rhag'],
+    [
+      'Ionawr', 'Chwefror', 'Mawrth', 'Ebrill', 'Mai', 'Mehefin', 'Gorffennaf', 'Awst', 'Medi',
+      'Hydref', 'Tachwedd', 'Rhagfyr'
+    ]
+  ],
+  [
+    ['I', 'Ch', 'M', 'E', 'M', 'M', 'G', 'A', 'M', 'H', 'T', 'Rh'],
+    ['Ion', 'Chw', 'Maw', 'Ebr', 'Mai', 'Meh', 'Gor', 'Awst', 'Medi', 'Hyd', 'Tach', 'Rhag'],
+    [
+      'Ionawr', 'Chwefror', 'Mawrth', 'Ebrill', 'Mai', 'Mehefin', 'Gorffennaf', 'Awst', 'Medi',
+      'Hydref', 'Tachwedd', 'Rhagfyr'
+    ]
+  ],
+  [['C', 'O'], ['CC', 'OC'], ['Cyn Crist', 'Oed Crist']], 1, [6, 0],
+  ['dd/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'am\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'Punt Prydain', {
+    'BDT': [u, 'TK'],
+    'BWP': [],
+    'HKD': ['HK$'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': [u, '₩'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'ZAR': [],
+    'ZMW': []
+  },
+  plural_cy
+];
+
+function plural_da(n: number): number {
+  let i = Math.floor(Math.abs(n)),
+      t = parseInt(n.toString().replace(/^[^.]*\.?|0+$/g, ''), 10) || 0;
+  if (n === 1 || !(t === 0) && (i === 0 || i === 1)) return 1;
+  return 5;
+}
+
+export const locale_da = [
+  'da', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['søn.', 'man.', 'tir.', 'ons.', 'tor.', 'fre.', 'lør.'],
+    ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'],
+    ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø']
+  ],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['søn', 'man', 'tir', 'ons', 'tor', 'fre', 'lør'],
+    ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'],
+    ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januar', 'februar', 'marts', 'april', 'maj', 'juni', 'juli', 'august', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['fKr', 'eKr'], ['f.Kr.', 'e.Kr.'], u], 1, [6, 0],
+  ['dd/MM/y', 'd. MMM y', 'd. MMMM y', 'EEEE \'den\' d. MMMM y'],
+  ['HH.mm', 'HH.mm.ss', 'HH.mm.ss z', 'HH.mm.ss zzzz'], ['{1} {0}', u, '{1} \'kl\'. {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr.', 'dansk krone', {
+    'AUD': ['AU$', '$'],
+    'DKK': ['kr.'],
+    'ISK': [u, 'kr.'],
+    'JPY': ['JP¥', '¥'],
+    'NOK': [u, 'kr.'],
+    'RON': [u, 'L'],
+    'SEK': [u, 'kr.'],
+    'THB': ['฿'],
+    'TWD': ['NT$']
+  },
+  plural_da
+];
+
+function plural_de(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_de = [
+  'de', [['vm.', 'nm.'], ['vorm.', 'nachm.'], u], [['vorm.', 'nachm.'], u, u],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober',
+      'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober',
+      'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'um\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro', {
+    'ATS': ['öS'],
+    'AUD': ['AU$', '$'],
+    'BGM': ['BGK'],
+    'BGO': ['BGJ'],
+    'CUC': [u, 'Cub$'],
+    'DEM': ['DM'],
+    'FKP': [u, 'Fl£'],
+    'GNF': [u, 'F.G.'],
+    'KMF': [u, 'FC'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'F.Rw'],
+    'SYP': [],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'ZMW': [u, 'K']
+  },
+  plural_de
+];
+
+function plural_de_AT(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_de_AT = [
+  'de-AT', [['vm.', 'nm.'], ['vorm.', 'nachm.'], u], u,
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jän.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
+    [
+      'Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober',
+      'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jän', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober',
+      'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'um\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':', u, '.'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], '€', 'Euro', {
+    'ATS': ['öS'],
+    'AUD': ['AU$', '$'],
+    'BGM': ['BGK'],
+    'BGO': ['BGJ'],
+    'CUC': [u, 'Cub$'],
+    'DEM': ['DM'],
+    'FKP': [u, 'Fl£'],
+    'GNF': [u, 'F.G.'],
+    'KMF': [u, 'FC'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'F.Rw'],
+    'SYP': [],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'ZMW': [u, 'K']
+  },
+  plural_de_AT
+];
+
+function plural_de_CH(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_de_CH = [
+  'de-CH', [['vm.', 'nm.'], ['vorm.', 'nachm.'], u], [['vorm.', 'nachm.'], u, u],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober',
+      'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober',
+      'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'um\' {0}', u],
+  ['.', '’', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤-#,##0.00', '#E0'], 'CHF', 'Schweizer Franken', {
+    'ATS': ['öS'],
+    'AUD': ['AU$', '$'],
+    'BGM': ['BGK'],
+    'BGO': ['BGJ'],
+    'CUC': [u, 'Cub$'],
+    'DEM': ['DM'],
+    'EUR': [],
+    'FKP': [u, 'Fl£'],
+    'GNF': [u, 'F.G.'],
+    'KMF': [u, 'FC'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'F.Rw'],
+    'SYP': [],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'ZMW': [u, 'K']
+  },
+  plural_de_CH
+];
+
+function plural_el(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_el = [
+  'el', [['πμ', 'μμ'], ['π.μ.', 'μ.μ.'], u], u,
+  [
+    ['Κ', 'Δ', 'Τ', 'Τ', 'Π', 'Π', 'Σ'], ['Κυρ', 'Δευ', 'Τρί', 'Τετ', 'Πέμ', 'Παρ', 'Σάβ'],
+    ['Κυριακή', 'Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη', 'Παρασκευή', 'Σάββατο'],
+    ['Κυ', 'Δε', 'Τρ', 'Τε', 'Πέ', 'Πα', 'Σά']
+  ],
+  u,
+  [
+    ['Ι', 'Φ', 'Μ', 'Α', 'Μ', 'Ι', 'Ι', 'Α', 'Σ', 'Ο', 'Ν', 'Δ'],
+    ['Ιαν', 'Φεβ', 'Μαρ', 'Απρ', 'Μαΐ', 'Ιουν', 'Ιουλ', 'Αυγ', 'Σεπ', 'Οκτ', 'Νοε', 'Δεκ'],
+    [
+      'Ιανουαρίου', 'Φεβρουαρίου', 'Μαρτίου', 'Απριλίου', 'Μαΐου', 'Ιουνίου', 'Ιουλίου',
+      'Αυγούστου', 'Σεπτεμβρίου', 'Οκτωβρίου', 'Νοεμβρίου', 'Δεκεμβρίου'
+    ]
+  ],
+  [
+    ['Ι', 'Φ', 'Μ', 'Α', 'Μ', 'Ι', 'Ι', 'Α', 'Σ', 'Ο', 'Ν', 'Δ'],
+    ['Ιαν', 'Φεβ', 'Μάρ', 'Απρ', 'Μάι', 'Ιούν', 'Ιούλ', 'Αύγ', 'Σεπ', 'Οκτ', 'Νοέ', 'Δεκ'],
+    [
+      'Ιανουάριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιος', 'Μάιος', 'Ιούνιος', 'Ιούλιος',
+      'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος', 'Δεκέμβριος'
+    ]
+  ],
+  [['π.Χ.', 'μ.Χ.'], u, ['προ Χριστού', 'μετά Χριστόν']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} - {0}', u],
+  [',', '.', ';', '%', '+', '-', 'e', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Ευρώ',
+  {'GRD': ['Δρχ'], 'JPY': ['JP¥', '¥'], 'THB': ['฿']}, plural_el
+];
+
+function plural_en_AU(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_en_AU = [
+  'en-AU', [['am', 'pm'], u, u], u,
+  [
+    ['Su.', 'M.', 'Tu.', 'W.', 'Th.', 'F.', 'Sa.'],
+    ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su.', 'Mon.', 'Tu.', 'Wed.', 'Th.', 'Fri.', 'Sat.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'e', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Australian Dollar', {
+    'AUD': ['$'],
+    'BDT': [u, 'Tk'],
+    'BOB': [u, '$b'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'CUP': [u, '₱'],
+    'EGP': [u, '£'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'ISK': [u, 'Kr'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'PYG': [u, 'Gs'],
+    'SCR': ['Rs'],
+    'SEK': [u, 'Kr'],
+    'TWD': [u, '$'],
+    'USD': [u, '$'],
+    'UYU': [u, '$U'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': [],
+    'XPF': ['CFP']
+  },
+  plural_en_AU
+];
+
+function plural_en_CA(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_en_CA = [
+  'en-CA', [['a', 'p'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['y-MM-dd', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'e', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Canadian Dollar',
+  {'CAD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural_en_CA
+];
+
+function plural_en_GB(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_en_GB = [
+  'en-GB', [['a', 'p'], ['am', 'pm'], u], [['am', 'pm'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'British Pound',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural_en_GB
+];
+
+function plural_en_IE(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_en_IE = [
+  'en-IE', [['a', 'p'], ['AM', 'PM'], ['a.m.', 'p.m.']], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '€', 'Euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural_en_IE
+];
+
+function plural_en_IN(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_en_IN = [
+  'en-IN', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [0, 0],
+  ['dd/MM/yy', 'dd-MMM-y', 'd MMMM y', 'EEEE, d MMMM, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], '₹', 'Indian Rupee',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural_en_IN
+];
+
+function plural_en_SG(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_en_SG = [
+  'en-SG', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Singapore Dollar',
+  {'JPY': ['JP¥', '¥'], 'SGD': ['$'], 'USD': ['US$', '$']}, plural_en_SG
+];
+
+function plural_en_ZA(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_en_ZA = [
+  'en-ZA', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['y/MM/dd', 'dd MMM y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'R', 'South African Rand',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'ZAR': ['R']}, plural_en_ZA
+];
+
+function plural_es(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_es = [
+  'es', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'X', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sept.', 'oct.', 'nov.',
+      'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss (zzzz)'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CNY': [u, '¥'],
+    'EGP': [],
+    'ESP': ['₧'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural_es
+];
+
+function plural_es_419(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_es_419 = [
+  'es-419', [['a. m.', 'p. m.'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'EUR', 'euro', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural_es_419
+];
+
+function plural_es_MX(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_es_MX = [
+  'es-MX', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['do', 'lu', 'ma', 'mi', 'ju', 'vi', 'sá']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['dd/MM/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], '$', 'peso mexicano', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'BYN': [u, 'p.'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': ['$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural_es_MX
+];
+
+function plural_es_US(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_es_US = [
+  'es-US', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], '$', 'dólar estadounidense', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural_es_US
+];
+
+function plural_et(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_et = [
+  'et', [['AM', 'PM'], u, u], u,
+  [
+    ['P', 'E', 'T', 'K', 'N', 'R', 'L'], u,
+    ['pühapäev', 'esmaspäev', 'teisipäev', 'kolmapäev', 'neljapäev', 'reede', 'laupäev'],
+    ['P', 'E', 'T', 'K', 'N', 'R', 'L']
+  ],
+  u,
+  [
+    ['J', 'V', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jaan', 'veebr', 'märts', 'apr', 'mai', 'juuni', 'juuli', 'aug', 'sept', 'okt', 'nov', 'dets'],
+    [
+      'jaanuar', 'veebruar', 'märts', 'aprill', 'mai', 'juuni', 'juuli', 'august', 'september',
+      'oktoober', 'november', 'detsember'
+    ]
+  ],
+  u, [['eKr', 'pKr'], u, ['enne Kristust', 'pärast Kristust']], 1, [6, 0],
+  ['dd.MM.yy', 'd. MMM y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '×10^', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro',
+  {'AUD': ['AU$', '$'], 'EEK': ['kr'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_et
+];
+
+function plural_eu(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_eu = [
+  'eu', [['g', 'a'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['I', 'A', 'A', 'A', 'O', 'O', 'L'], ['ig.', 'al.', 'ar.', 'az.', 'og.', 'or.', 'lr.'],
+    ['igandea', 'astelehena', 'asteartea', 'asteazkena', 'osteguna', 'ostirala', 'larunbata'],
+    ['ig.', 'al.', 'ar.', 'az.', 'og.', 'or.', 'lr.']
+  ],
+  [
+    ['I', 'A', 'A', 'A', 'O', 'O', 'L'], ['ig.', 'al.', 'ar.', 'az.', 'og.', 'or.', 'lr.'],
+    ['Igandea', 'Astelehena', 'Asteartea', 'Asteazkena', 'Osteguna', 'Ostirala', 'Larunbata'],
+    ['ig.', 'al.', 'ar.', 'az.', 'og.', 'or.', 'lr.']
+  ],
+  [
+    ['U', 'O', 'M', 'A', 'M', 'E', 'U', 'A', 'I', 'U', 'A', 'A'],
+    [
+      'urt.', 'ots.', 'mar.', 'api.', 'mai.', 'eka.', 'uzt.', 'abu.', 'ira.', 'urr.', 'aza.', 'abe.'
+    ],
+    [
+      'urtarrila', 'otsaila', 'martxoa', 'apirila', 'maiatza', 'ekaina', 'uztaila', 'abuztua',
+      'iraila', 'urria', 'azaroa', 'abendua'
+    ]
+  ],
+  [
+    ['U', 'O', 'M', 'A', 'M', 'E', 'U', 'A', 'I', 'U', 'A', 'A'],
+    [
+      'urt.', 'ots.', 'mar.', 'api.', 'mai.', 'eka.', 'uzt.', 'abu.', 'ira.', 'urr.', 'aza.', 'abe.'
+    ],
+    [
+      'urtarrila', 'Otsaila', 'Martxoa', 'Apirila', 'Maiatza', 'Ekaina', 'Uztaila', 'Abuztua',
+      'Iraila', 'Urria', 'Azaroa', 'Abendua'
+    ]
+  ],
+  [['K.a.', 'K.o.'], u, ['K.a.', 'Kristo ondoren']], 1, [6, 0],
+  [
+    'yy/M/d', 'y MMM d', 'y(\'e\')\'ko\' MMMM\'ren\' d(\'a\')',
+    'y(\'e\')\'ko\' MMMM\'ren\' d(\'a\'), EEEE'
+  ],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss (z)', 'HH:mm:ss (zzzz)'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '% #,##0', '#,##0.00 ¤', '#E0'], '€', 'euroa',
+  {'ESP': ['₧'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']}, plural_eu
+];
+
+function plural_fa(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export const locale_fa = [
+  'fa', [['ق', 'ب'], ['ق.ظ.', 'ب.ظ.'], ['قبل\u200cازظهر', 'بعدازظهر']],
+  [['ق.ظ.', 'ب.ظ.'], u, ['قبل\u200cازظهر', 'بعدازظهر']],
+  [
+    ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'],
+    ['یکشنبه', 'دوشنبه', 'سه\u200cشنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه', 'شنبه'], u,
+    ['۱ش', '۲ش', '۳ش', '۴ش', '۵ش', 'ج', 'ش']
+  ],
+  u,
+  [
+    ['ژ', 'ف', 'م', 'آ', 'م', 'ژ', 'ژ', 'ا', 'س', 'ا', 'ن', 'د'],
+    [
+      'ژانویهٔ', 'فوریهٔ', 'مارس', 'آوریل', 'مهٔ', 'ژوئن', 'ژوئیهٔ', 'اوت', 'سپتامبر', 'اکتبر',
+      'نوامبر', 'دسامبر'
+    ],
+    u
+  ],
+  [
+    ['ژ', 'ف', 'م', 'آ', 'م', 'ژ', 'ژ', 'ا', 'س', 'ا', 'ن', 'د'],
+    [
+      'ژانویه', 'فوریه', 'مارس', 'آوریل', 'مه', 'ژوئن', 'ژوئیه', 'اوت', 'سپتامبر', 'اکتبر',
+      'نوامبر', 'دسامبر'
+    ],
+    u
+  ],
+  [['ق', 'م'], ['ق.م.', 'م.'], ['قبل از میلاد', 'میلادی']], 6, [5, 5],
+  ['y/M/d', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss (z)', 'H:mm:ss (zzzz)'], ['{1}،\u200f {0}', u, '{1}، ساعت {0}', u],
+  ['.', ',', ';', '%', '\u200e+', '\u200e−', 'E', '×', '‰', '∞', 'ناعدد', ':'],
+  ['#,##0.###', '#,##0%', '\u200e¤ #,##0.00', '#E0'], 'ریال', 'ریال ایران', {
+    'AFN': ['؋'],
+    'CAD': ['$CA', '$'],
+    'CNY': ['¥CN', '¥'],
+    'HKD': ['$HK', '$'],
+    'IRR': ['ریال'],
+    'MXN': ['$MX', '$'],
+    'NZD': ['$NZ', '$'],
+    'THB': ['฿'],
+    'XCD': ['$EC', '$']
+  },
+  plural_fa
+];
+
+function plural_fi(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_fi = [
+  'fi', [['ap.', 'ip.'], u, u], u,
+  [
+    ['S', 'M', 'T', 'K', 'T', 'P', 'L'], ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la'],
+    [
+      'sunnuntaina', 'maanantaina', 'tiistaina', 'keskiviikkona', 'torstaina', 'perjantaina',
+      'lauantaina'
+    ],
+    ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la']
+  ],
+  [
+    ['S', 'M', 'T', 'K', 'T', 'P', 'L'], ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la'],
+    ['sunnuntai', 'maanantai', 'tiistai', 'keskiviikko', 'torstai', 'perjantai', 'lauantai'],
+    ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la']
+  ],
+  [
+    ['T', 'H', 'M', 'H', 'T', 'K', 'H', 'E', 'S', 'L', 'M', 'J'],
+    [
+      'tammik.', 'helmik.', 'maalisk.', 'huhtik.', 'toukok.', 'kesäk.', 'heinäk.', 'elok.',
+      'syysk.', 'lokak.', 'marrask.', 'jouluk.'
+    ],
+    [
+      'tammikuuta', 'helmikuuta', 'maaliskuuta', 'huhtikuuta', 'toukokuuta', 'kesäkuuta',
+      'heinäkuuta', 'elokuuta', 'syyskuuta', 'lokakuuta', 'marraskuuta', 'joulukuuta'
+    ]
+  ],
+  [
+    ['T', 'H', 'M', 'H', 'T', 'K', 'H', 'E', 'S', 'L', 'M', 'J'],
+    [
+      'tammi', 'helmi', 'maalis', 'huhti', 'touko', 'kesä', 'heinä', 'elo', 'syys', 'loka',
+      'marras', 'joulu'
+    ],
+    [
+      'tammikuu', 'helmikuu', 'maaliskuu', 'huhtikuu', 'toukokuu', 'kesäkuu', 'heinäkuu', 'elokuu',
+      'syyskuu', 'lokakuu', 'marraskuu', 'joulukuu'
+    ]
+  ],
+  [['eKr', 'jKr'], ['eKr.', 'jKr.'], ['ennen Kristuksen syntymää', 'jälkeen Kristuksen syntymän']],
+  1, [6, 0], ['d.M.y', u, 'd. MMMM y', 'cccc d. MMMM y'],
+  ['H.mm', 'H.mm.ss', 'H.mm.ss z', 'H.mm.ss zzzz'], ['{1} {0}', '{1} \'klo\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'epäluku', '.'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AOA': [],
+    'ARS': [],
+    'AUD': [],
+    'BAM': [],
+    'BBD': [],
+    'BDT': [],
+    'BMD': [],
+    'BND': [],
+    'BOB': [],
+    'BRL': [],
+    'BSD': [],
+    'BWP': [],
+    'BYN': [],
+    'BZD': [],
+    'CAD': [],
+    'CLP': [],
+    'CNY': [],
+    'COP': [],
+    'CRC': [],
+    'CUC': [],
+    'CUP': [],
+    'CZK': [],
+    'DKK': [],
+    'DOP': [],
+    'EGP': [],
+    'ESP': [],
+    'FIM': ['mk'],
+    'FJD': [],
+    'FKP': [],
+    'GEL': [],
+    'GIP': [],
+    'GNF': [],
+    'GTQ': [],
+    'GYD': [],
+    'HKD': [],
+    'HNL': [],
+    'HRK': [],
+    'HUF': [],
+    'IDR': [],
+    'ILS': [],
+    'INR': [],
+    'ISK': [],
+    'JMD': [],
+    'KHR': [],
+    'KMF': [],
+    'KPW': [],
+    'KRW': [],
+    'KYD': [],
+    'KZT': [],
+    'LAK': [],
+    'LBP': [],
+    'LKR': [],
+    'LRD': [],
+    'LTL': [],
+    'LVL': [],
+    'MGA': [],
+    'MMK': [],
+    'MNT': [],
+    'MUR': [],
+    'MXN': [],
+    'MYR': [],
+    'NAD': [],
+    'NGN': [],
+    'NIO': [],
+    'NOK': [],
+    'NPR': [],
+    'NZD': [],
+    'PHP': [],
+    'PKR': [],
+    'PLN': [],
+    'PYG': [],
+    'RON': [],
+    'RUR': [],
+    'RWF': [],
+    'SBD': [],
+    'SEK': [],
+    'SGD': [],
+    'SHP': [],
+    'SRD': [],
+    'SSP': [],
+    'STN': [u, 'STD'],
+    'SYP': [],
+    'THB': [],
+    'TOP': [],
+    'TRY': [],
+    'TTD': [],
+    'TWD': [],
+    'UAH': [],
+    'UYU': [],
+    'VEF': [],
+    'VND': [],
+    'XCD': [],
+    'XPF': [],
+    'ZAR': [],
+    'ZMW': []
+  },
+  plural_fi
+];
+
+function plural_fr(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export const locale_fr = [
+  'fr', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural_fr
+];
+
+function plural_fr_CA(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export const locale_fr_CA = [
+  'fr-CA', [['a', 'p'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juill.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 0, [6, 0],
+  ['yy-MM-dd', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  [
+    'HH \'h\' mm', 'HH \'h\' mm \'min\' ss \'s\'', 'HH \'h\' mm \'min\' ss \'s\' z',
+    'HH \'h\' mm \'min\' ss \'s\' zzzz'
+  ],
+  ['{1} {0}', u, '{1} \'à\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '$', 'dollar canadien', {
+    'AUD': ['$ AU', '$'],
+    'BEF': ['FB'],
+    'BYN': [u, 'Br'],
+    'CAD': ['$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FRF': ['F'],
+    'GEL': [],
+    'HKD': ['$ HK', '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'ITL': ['₤IT'],
+    'KRW': [u, '₩'],
+    'LBP': [u, '£L'],
+    'MTP': ['£MT'],
+    'MXN': [u, '$'],
+    'NZD': ['$ NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SGD': ['$ SG', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$ US', '$'],
+    'VND': [u, '₫'],
+    'WST': ['WS$'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': [],
+    'XPF': []
+  },
+  plural_fr_CA
+];
+
+function plural_ga(n: number): number {
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n === Math.floor(n) && n >= 3 && n <= 6) return 3;
+  if (n === Math.floor(n) && n >= 7 && n <= 10) return 4;
+  return 5;
+}
+
+export const locale_ga = [
+  'ga', [['a', 'p'], ['r.n.', 'i.n.'], u], [['a', 'p'], ['a.m.', 'p.m.'], u],
+  [
+    ['D', 'L', 'M', 'C', 'D', 'A', 'S'], ['Domh', 'Luan', 'Máirt', 'Céad', 'Déar', 'Aoine', 'Sath'],
+    [
+      'Dé Domhnaigh', 'Dé Luain', 'Dé Máirt', 'Dé Céadaoin', 'Déardaoin', 'Dé hAoine', 'Dé Sathairn'
+    ],
+    ['Do', 'Lu', 'Má', 'Cé', 'Dé', 'Ao', 'Sa']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'B', 'M', 'I', 'L', 'M', 'D', 'S', 'N'],
+    [
+      'Ean', 'Feabh', 'Márta', 'Aib', 'Beal', 'Meith', 'Iúil', 'Lún', 'MFómh', 'DFómh', 'Samh',
+      'Noll'
+    ],
+    [
+      'Eanáir', 'Feabhra', 'Márta', 'Aibreán', 'Bealtaine', 'Meitheamh', 'Iúil', 'Lúnasa',
+      'Meán Fómhair', 'Deireadh Fómhair', 'Samhain', 'Nollaig'
+    ]
+  ],
+  u, [['RC', 'AD'], u, ['Roimh Chríost', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '€', 'Euro', {'THB': ['฿'], 'TWD': ['NT$']},
+  plural_ga
+];
+
+function plural_gl(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_gl = [
+  'gl', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['d.', 'l.', 'm.', 'm.', 'x.', 'v.', 's.'],
+    ['dom.', 'luns', 'mar.', 'mér.', 'xov.', 'ven.', 'sáb.'],
+    ['domingo', 'luns', 'martes', 'mércores', 'xoves', 'venres', 'sábado'],
+    ['do.', 'lu.', 'ma.', 'mé.', 'xo.', 've.', 'sá.']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'X', 'V', 'S'], ['Dom.', 'Luns', 'Mar.', 'Mér.', 'Xov.', 'Ven.', 'Sáb.'],
+    ['Domingo', 'Luns', 'Martes', 'Mércores', 'Xoves', 'Venres', 'Sábado'],
+    ['Do', 'Lu', 'Ma', 'Mé', 'Xo', 'Ve', 'Sá']
+  ],
+  [
+    ['x.', 'f.', 'm.', 'a.', 'm.', 'x.', 'x.', 'a.', 's.', 'o.', 'n.', 'd.'],
+    [
+      'xan.', 'feb.', 'mar.', 'abr.', 'maio', 'xuño', 'xul.', 'ago.', 'set.', 'out.', 'nov.', 'dec.'
+    ],
+    [
+      'xaneiro', 'febreiro', 'marzo', 'abril', 'maio', 'xuño', 'xullo', 'agosto', 'setembro',
+      'outubro', 'novembro', 'decembro'
+    ]
+  ],
+  [
+    ['X', 'F', 'M', 'A', 'M', 'X', 'X', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Xan.', 'Feb.', 'Mar.', 'Abr.', 'Maio', 'Xuño', 'Xul.', 'Ago.', 'Set.', 'Out.', 'Nov.', 'Dec.'
+    ],
+    [
+      'Xaneiro', 'Febreiro', 'Marzo', 'Abril', 'Maio', 'Xuño', 'Xullo', 'Agosto', 'Setembro',
+      'Outubro', 'Novembro', 'Decembro'
+    ]
+  ],
+  [['a.C.', 'd.C.'], u, ['antes de Cristo', 'despois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{0}, {1}', u, '{0} \'do\' {1}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro', {
+    'ESP': ['₧'],
+    'JPY': ['JP¥', '¥'],
+    'KMF': [u, 'FC'],
+    'MXN': ['$MX', '$'],
+    'RUB': [u, 'руб'],
+    'THB': ['฿'],
+    'TWD': ['NT$']
+  },
+  plural_gl
+];
+
+function plural_gsw(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_gsw = [
+  'gsw', [['vorm.', 'nam.'], u, ['am Vormittag', 'am Namittag']],
+  [['vorm.', 'nam.'], u, ['Vormittag', 'Namittag']],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['Su.', 'Mä.', 'Zi.', 'Mi.', 'Du.', 'Fr.', 'Sa.'],
+    ['Sunntig', 'Määntig', 'Ziischtig', 'Mittwuch', 'Dunschtig', 'Friitig', 'Samschtig'],
+    ['Su.', 'Mä.', 'Zi.', 'Mi.', 'Du.', 'Fr.', 'Sa.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'Auguscht', 'Septämber',
+      'Oktoober', 'Novämber', 'Dezämber'
+    ]
+  ],
+  u, [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', '’', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CHF', 'Schwiizer Franke', {'ATS': ['öS']},
+  plural_gsw
+];
+
+function plural_gu(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export const locale_gu = [
+  'gu', [['AM', 'PM'], u, u], u,
+  [
+    ['ર', 'સો', 'મં', 'બુ', 'ગુ', 'શુ', 'શ'], ['રવિ', 'સોમ', 'મંગળ', 'બુધ', 'ગુરુ', 'શુક્ર', 'શનિ'],
+    ['રવિવાર', 'સોમવાર', 'મંગળવાર', 'બુધવાર', 'ગુરુવાર', 'શુક્રવાર', 'શનિવાર'],
+    ['ર', 'સો', 'મં', 'બુ', 'ગુ', 'શુ', 'શ']
+  ],
+  u,
+  [
+    ['જા', 'ફે', 'મા', 'એ', 'મે', 'જૂ', 'જુ', 'ઑ', 'સ', 'ઑ', 'ન', 'ડિ'],
+    ['જાન્યુ', 'ફેબ્રુ', 'માર્ચ', 'એપ્રિલ', 'મે', 'જૂન', 'જુલાઈ', 'ઑગસ્ટ', 'સપ્ટે', 'ઑક્ટો', 'નવે', 'ડિસે'],
+    [
+      'જાન્યુઆરી', 'ફેબ્રુઆરી', 'માર્ચ', 'એપ્રિલ', 'મે', 'જૂન', 'જુલાઈ', 'ઑગસ્ટ', 'સપ્ટેમ્બર', 'ઑક્ટોબર', 'નવેમ્બર',
+      'ડિસેમ્બર'
+    ]
+  ],
+  u, [['ઇ સ પુ', 'ઇસ'], ['ઈ.સ.પૂર્વે', 'ઈ.સ.'], ['ઈસવીસન પૂર્વે', 'ઇસવીસન']], 0, [0, 0],
+  ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['hh:mm a', 'hh:mm:ss a', 'hh:mm:ss a z', 'hh:mm:ss a zzzz'], ['{1} {0}', u, '{1} એ {0} વાગ્યે', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤#,##,##0.00', '[#E0]'], '₹', 'ભારતીય રૂપિયા',
+  {'JPY': ['JP¥', '¥'], 'MUR': [u, 'રૂ.'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']},
+  plural_gu
+];
+
+function plural_haw(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_haw = [
+  'haw', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['LP', 'P1', 'P2', 'P3', 'P4', 'P5', 'P6'],
+    ['Lāpule', 'Poʻakahi', 'Poʻalua', 'Poʻakolu', 'Poʻahā', 'Poʻalima', 'Poʻaono'],
+    ['LP', 'P1', 'P2', 'P3', 'P4', 'P5', 'P6']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Ian.', 'Pep.', 'Mal.', 'ʻAp.', 'Mei', 'Iun.', 'Iul.', 'ʻAu.', 'Kep.', 'ʻOk.', 'Now.', 'Kek.'],
+    [
+      'Ianuali', 'Pepeluali', 'Malaki', 'ʻApelila', 'Mei', 'Iune', 'Iulai', 'ʻAukake', 'Kepakemapa',
+      'ʻOkakopa', 'Nowemapa', 'Kekemapa'
+    ]
+  ],
+  u, [['BCE', 'CE'], u, u], 0, [6, 0], ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'USD', {'JPY': ['JP¥', '¥']}, plural_haw
+];
+
+function plural_hi(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export const locale_hi = [
+  'hi', [['पू', 'अ'], ['पूर्वाह्न', 'अपराह्न'], u], u,
+  [
+    ['र', 'सो', 'मं', 'बु', 'गु', 'शु', 'श'], ['रवि', 'सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र', 'शनि'],
+    ['रविवार', 'सोमवार', 'मंगलवार', 'बुधवार', 'गुरुवार', 'शुक्रवार', 'शनिवार'],
+    ['र', 'सो', 'मं', 'बु', 'गु', 'शु', 'श']
+  ],
+  u,
+  [
+    ['ज', 'फ़', 'मा', 'अ', 'म', 'जू', 'जु', 'अ', 'सि', 'अ', 'न', 'दि'],
+    ['जन॰', 'फ़र॰', 'मार्च', 'अप्रैल', 'मई', 'जून', 'जुल॰', 'अग॰', 'सित॰', 'अक्तू॰', 'नव॰', 'दिस॰'],
+    [
+      'जनवरी', 'फ़रवरी', 'मार्च', 'अप्रैल', 'मई', 'जून', 'जुलाई', 'अगस्त', 'सितंबर', 'अक्तूबर', 'नवंबर',
+      'द��संबर'
+    ]
+  ],
+  u, [['ईसा-पूर्व', 'ईस्वी'], u, ['ईसा-पूर्व', 'ईसवी सन']], 0, [0, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} को {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤#,##,##0.00', '[#E0]'], '₹', 'भारतीय रुपया',
+  {'JPY': ['JP¥', '¥'], 'RON': [u, 'लेई'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_hi
+];
+
+function plural_hr(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export const locale_hr = [
+  'hr', [['AM', 'PM'], u, u], u,
+  [
+    ['N', 'P', 'U', 'S', 'Č', 'P', 'S'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  [
+    ['n', 'p', 'u', 's', 'č', 'p', 's'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  [
+    ['1.', '2.', '3.', '4.', '5.', '6.', '7.', '8.', '9.', '10.', '11.', '12.'],
+    ['sij', 'velj', 'ožu', 'tra', 'svi', 'lip', 'srp', 'kol', 'ruj', 'lis', 'stu', 'pro'],
+    [
+      'siječnja', 'veljače', 'ožujka', 'travnja', 'svibnja', 'lipnja', 'srpnja', 'kolovoza',
+      'rujna', 'listopada', 'studenoga', 'prosinca'
+    ]
+  ],
+  [
+    ['1.', '2.', '3.', '4.', '5.', '6.', '7.', '8.', '9.', '10.', '11.', '12.'],
+    ['sij', 'velj', 'ožu', 'tra', 'svi', 'lip', 'srp', 'kol', 'ruj', 'lis', 'stu', 'pro'],
+    [
+      'siječanj', 'veljača', 'ožujak', 'travanj', 'svibanj', 'lipanj', 'srpanj', 'kolovoz', 'rujan',
+      'listopad', 'studeni', 'prosinac'
+    ]
+  ],
+  [['pr.n.e.', 'AD'], ['pr. Kr.', 'po. Kr.'], ['prije Krista', 'poslije Krista']], 1, [6, 0],
+  ['dd. MM. y.', 'd. MMM y.', 'd. MMMM y.', 'EEEE, d. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss (zzzz)'], ['{1} {0}', u, '{1} \'u\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'HRK', 'hrvatska kuna', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$'],
+    'XPF': []
+  },
+  plural_hr
+];
+
+function plural_hu(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_hu = [
+  'hu', [['de.', 'du.'], u, u], u,
+  [
+    ['V', 'H', 'K', 'Sz', 'Cs', 'P', 'Sz'], ['V', 'H', 'K', 'Sze', 'Cs', 'P', 'Szo'],
+    ['vasárnap', 'hétfő', 'kedd', 'szerda', 'csütörtök', 'péntek', 'szombat'],
+    ['V', 'H', 'K', 'Sze', 'Cs', 'P', 'Szo']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'Á', 'M', 'J', 'J', 'A', 'Sz', 'O', 'N', 'D'],
+    [
+      'jan.', 'febr.', 'márc.', 'ápr.', 'máj.', 'jún.', 'júl.', 'aug.', 'szept.', 'okt.', 'nov.',
+      'dec.'
+    ],
+    [
+      'január', 'február', 'március', 'április', 'május', 'június', 'július', 'augusztus',
+      'szeptember', 'október', 'november', 'december'
+    ]
+  ],
+  u, [['ie.', 'isz.'], ['i. e.', 'i. sz.'], ['Krisztus előtt', 'időszámításunk szerint']], 1,
+  [6, 0], ['y. MM. dd.', 'y. MMM d.', 'y. MMMM d.', 'y. MMMM d., EEEE'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'Ft', 'magyar forint', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'HUF': ['Ft'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$']
+  },
+  plural_hu
+];
+
+function plural_hy(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export const locale_hy = [
+  'hy', [['ա', 'հ'], ['ԿԱ', 'ԿՀ'], u], [['ԿԱ', 'ԿՀ'], u, u],
+  [
+    ['Կ', 'Ե', 'Ե', 'Չ', 'Հ', 'Ո', 'Շ'], ['կիր', 'երկ', 'երք', 'չրք', 'հնգ', 'ուր', 'շբթ'],
+    ['կիրակի', 'երկուշաբթի', 'երեքշաբթի', 'չորեքշաբթի', 'հինգշաբթի', 'ուրբաթ', 'շաբաթ'],
+    ['կր', 'եկ', 'եք', 'չք', 'հգ', 'ու', 'շբ']
+  ],
+  u,
+  [
+    ['Հ', 'Փ', 'Մ', 'Ա', 'Մ', 'Հ', 'Հ', 'Օ', 'Ս', 'Հ', 'Ն', 'Դ'],
+    ['հնվ', 'փտվ', 'մրտ', 'ապր', 'մյս', 'հնս', 'հլս', 'օգս', 'սեպ', 'հոկ', 'նոյ', 'դեկ'],
+    [
+      'հունվարի', 'փետրվարի', 'մարտի', 'ապրիլի', 'մայիսի', 'հունիսի', 'հուլիսի', 'օգոստոսի',
+      'սեպտեմբերի', 'հոկտեմբերի', 'նոյեմբերի', 'դեկտեմբերի'
+    ]
+  ],
+  [
+    ['Հ', 'Փ', 'Մ', 'Ա', 'Մ', 'Հ', 'Հ', 'Օ', 'Ս', 'Հ', 'Ն', 'Դ'],
+    ['հնվ', 'փտվ', 'մրտ', 'ապր', 'մյս', 'հնս', 'հլս', 'օգս', 'սեպ', 'հոկ', 'նոյ', 'դեկ'],
+    [
+      'հունվար', 'փետրվար', 'մարտ', 'ապրիլ', 'մայիս', 'հունիս', 'հուլիս', 'օգոստոս', 'սեպտեմբեր',
+      'հոկտեմբեր', 'նոյեմբեր', 'դեկտեմբեր'
+    ]
+  ],
+  [['մ.թ.ա.', 'մ.թ.'], u, ['Քրիստոսից առաջ', 'Քրիստոսից հետո']], 1, [6, 0],
+  ['dd.MM.yy', 'dd MMM, y թ.', 'dd MMMM, y թ.', 'y թ. MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'ՈչԹ', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '֏', 'հայկական դրամ',
+  {'AMD': ['֏'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_hy
+];
+
+function plural_in(n: number): number {
+  return 5;
+}
+
+export const locale_in = [
+  'id', [['AM', 'PM'], u, u], u,
+  [
+    ['M', 'S', 'S', 'R', 'K', 'J', 'S'], ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'],
+    ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'],
+    ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agt', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September',
+      'Oktober', 'November', 'Desember'
+    ]
+  ],
+  u, [['SM', 'M'], u, ['Sebelum Masehi', 'Masehi']], 0, [6, 0],
+  ['dd/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH.mm', 'HH.mm.ss', 'HH.mm.ss z', 'HH.mm.ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Rp', 'Rupiah Indonesia', {
+    'AUD': ['AU$', '$'],
+    'IDR': ['Rp'],
+    'INR': ['Rs', '₹'],
+    'JPY': ['JP¥', '¥'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural_in
+];
+
+function plural_is(n: number): number {
+  let i = Math.floor(Math.abs(n)),
+      t = parseInt(n.toString().replace(/^[^.]*\.?|0+$/g, ''), 10) || 0;
+  if (t === 0 && i % 10 === 1 && !(i % 100 === 11) || !(t === 0)) return 1;
+  return 5;
+}
+
+export const locale_is = [
+  'is', [['f.', 'e.'], ['f.h.', 'e.h.'], u], [['f.h.', 'e.h.'], u, u],
+  [
+    ['S', 'M', 'Þ', 'M', 'F', 'F', 'L'], ['sun.', 'mán.', 'þri.', 'mið.', 'fim.', 'fös.', 'lau.'],
+    [
+      'sunnudagur', 'mánudagur', 'þriðjudagur', 'miðvikudagur', 'fimmtudagur', 'föstudagur',
+      'laugardagur'
+    ],
+    ['su.', 'má.', 'þr.', 'mi.', 'fi.', 'fö.', 'la.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'Á', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'maí', 'jún.', 'júl.', 'ágú.', 'sep.', 'okt.', 'nóv.', 'des.'],
+    [
+      'janúar', 'febrúar', 'mars', 'apríl', 'maí', 'júní', 'júlí', 'ágúst', 'september', 'október',
+      'nóvember', 'desember'
+    ]
+  ],
+  u, [['f.k.', 'e.k.'], ['f.Kr.', 'e.Kr.'], ['fyrir Krist', 'eftir Krist']], 1, [6, 0],
+  ['d.M.y', 'd. MMM y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'kl\'. {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'ISK', 'íslensk króna', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'INR': [u, '₹'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫']
+  },
+  plural_is
+];
+
+function plural_it(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_it = [
+  'it', [['m.', 'p.'], ['AM', 'PM'], u], u,
+  [
+    ['D', 'L', 'M', 'M', 'G', 'V', 'S'], ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab'],
+    ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato'],
+    ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab']
+  ],
+  u,
+  [
+    ['G', 'F', 'M', 'A', 'M', 'G', 'L', 'A', 'S', 'O', 'N', 'D'],
+    ['gen', 'feb', 'mar', 'apr', 'mag', 'giu', 'lug', 'ago', 'set', 'ott', 'nov', 'dic'],
+    [
+      'gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre',
+      'ottobre', 'novembre', 'dicembre'
+    ]
+  ],
+  u, [['aC', 'dC'], ['a.C.', 'd.C.'], ['avanti Cristo', 'dopo Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'BRL': [u, 'R$'],
+    'BYN': [u, 'Br'],
+    'EGP': [u, '£E'],
+    'HKD': [u, '$'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NOK': [u, 'NKr'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$']
+  },
+  plural_it
+];
+
+function plural_iw(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (i === 2 && v === 0) return 2;
+  if (v === 0 && !(n >= 0 && n <= 10) && n % 10 === 0) return 4;
+  return 5;
+}
+
+export const locale_iw = [
+  'he', [['לפנה״צ', 'אחה״צ'], u, u], [['לפנה״צ', 'אחה״צ'], ['AM', 'PM'], u],
+  [
+    ['א׳', 'ב׳', 'ג׳', 'ד׳', 'ה׳', 'ו׳', 'ש׳'],
+    ['יום א׳', 'יום ב׳', 'יום ג׳', 'יום ד׳', 'יום ה׳', 'יום ו׳', 'שבת'],
+    ['יום ראשון', 'יום שני', 'יום שלישי', 'יום רביעי', 'יום חמישי', 'יום שישי', 'יום שבת'],
+    ['א׳', 'ב׳', 'ג׳', 'ד׳', 'ה׳', 'ו׳', 'ש׳']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['ינו׳', 'פבר׳', 'מרץ', 'אפר׳', 'מאי', 'יוני', 'יולי', 'אוג׳', 'ספט׳', 'אוק׳', 'נוב׳', 'דצמ׳'],
+    [
+      'ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר',
+      'נובמבר', 'דצמבר'
+    ]
+  ],
+  u, [['לפנה״ס', 'לספירה'], u, ['לפני הספירה', 'לספירה']], 0, [5, 6],
+  ['d.M.y', 'd בMMM y', 'd בMMMM y', 'EEEE, d בMMMM y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1}, {0}', u, '{1} בשעה {0}', u],
+  ['.', ',', ';', '%', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '\u200f#,##0.00 ¤;\u200f-#,##0.00 ¤', '#E0'], '₪', 'שקל חדש',
+  {'CNY': ['\u200eCN¥\u200e', '¥'], 'ILP': ['ל״י'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_iw
+];
+
+function plural_ja(n: number): number {
+  return 5;
+}
+
+export const locale_ja = [
+  'ja', [['午前', '午後'], u, u], u,
+  [
+    ['日', '月', '火', '水', '木', '金', '土'], u,
+    ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
+    ['日', '月', '火', '水', '木', '金', '土']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], u
+  ],
+  u, [['BC', 'AD'], ['紀元前', '西暦'], u], 0, [6, 0], ['y/MM/dd', u, 'y年M月d日', 'y年M月d日EEEE'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H時mm分ss秒 zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '￥', '日本円',
+  {'CNY': ['元', '￥'], 'JPY': ['￥'], 'RON': [u, 'レイ']}, plural_ja
+];
+
+function plural_ka(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_ka = [
+  'ka', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, ['AM', 'შუადღ. შემდეგ']],
+  [
+    ['კ', 'ო', 'ს', 'ო', 'ხ', 'პ', 'შ'], ['კვი', 'ორშ', 'სამ', 'ოთხ', 'ხუთ', 'პარ', 'შაბ'],
+    ['კვირა', 'ორშაბათი', 'სამშაბათი', 'ოთხშაბათი', 'ხუთშაბათი', 'პარასკევი', 'შაბათი'],
+    ['კვ', 'ორ', 'სმ', 'ოთ', 'ხთ', 'პრ', 'შბ']
+  ],
+  u,
+  [
+    ['ი', 'თ', 'მ', 'ა', 'მ', 'ი', 'ი', 'ა', 'ს', 'ო', 'ნ', 'დ'],
+    ['იან', 'თებ', 'მარ', 'აპრ', 'მაი', 'ივნ', 'ივლ', 'აგვ', 'სექ', 'ოქტ', 'ნოე', 'დეკ'],
+    [
+      'იანვარი', 'თებერვალი', 'მარტი', 'აპრილი', 'მაისი', 'ივნისი', 'ივლისი', 'აგვისტო',
+      'სექტემბერი', 'ოქტომბერი', 'ნოემბერი', 'დეკემბერი'
+    ]
+  ],
+  u, [['ძვ. წ.', 'ახ. წ.'], u, ['ძველი წელთაღრიცხვით', 'ახალი წელთაღრიცხვით']], 1, [6, 0],
+  ['dd.MM.yy', 'd MMM. y', 'd MMMM, y', 'EEEE, dd MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'არ არის რიცხვი', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '₾', 'ქართული ლარი', {
+    'AUD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GEL': ['₾'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural_ka
+];
+
+function plural_kk(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_kk = [
+  'kk', [['AM', 'PM'], u, u], u,
+  [
+    ['Ж', 'Д', 'С', 'С', 'Б', 'Ж', 'С'], ['Жс', 'Дс', 'Сс', 'Ср', 'Бс', 'Жм', 'Сб'],
+    ['жексенбі', 'дүйсенбі', 'сейсенбі', 'сәрсенбі', 'бейсенбі', 'жұма', 'сенбі'],
+    ['Жс', 'Дс', 'Сс', 'Ср', 'Бс', 'Жм', 'Сб']
+  ],
+  [
+    ['Ж', 'Д', 'С', 'С', 'Б', 'Ж', 'С'], ['Жс', 'Дс', 'Сс', 'Ср', 'Бс', 'Жм', 'Сб'],
+    ['Жексенбі', 'Дүйсенбі', 'Сейсенбі', 'Сәрсенбі', 'Бейсенб��', 'Жұма', 'Сенбі'],
+    ['Жс', 'Дс', 'Сс', 'Ср', 'Бс', 'Жм', 'Сб']
+  ],
+  [
+    ['Қ', 'А', 'Н', 'С', 'М', 'М', 'Ш', 'Т', 'Қ', 'Қ', 'Қ', 'Ж'],
+    [
+      'қаң.', 'ақп.', 'нау.', 'сәу.', 'мам.', 'мау.', 'шіл.', 'там.', 'қыр.', 'қаз.', 'қар.', 'жел.'
+    ],
+    [
+      'қаңтар', 'ақпан', 'наурыз', 'сәуір', 'мамыр', 'маусым', 'шілде', 'тамыз', 'қыркүйек',
+      'қазан', 'қараша', 'желтоқсан'
+    ]
+  ],
+  [
+    ['Қ', 'А', 'Н', 'С', 'М', 'М', 'Ш', 'Т', 'Қ', 'Қ', 'Қ', 'Ж'],
+    [
+      'Қаң.', 'Ақп.', 'Нау.', 'Сәу.', 'Мам.', 'Мау.', 'Шіл.', 'Там.', 'Қыр.', 'Қаз.', 'Қар.', 'Жел.'
+    ],
+    [
+      'Қаңтар', 'Ақпан', 'Наурыз', 'Сәуір', 'Мамыр', 'Маусым', 'Шілде', 'Тамыз', 'Қыркүйек',
+      'Қазан', 'Қараша', 'Желтоқсан'
+    ]
+  ],
+  [['б.з.д.', 'б.з.'], u, ['Біздің заманымызға дейін', 'біздің заманымыз']], 1, [6, 0],
+  ['dd.MM.yy', 'y \'ж\'. dd MMM', 'y \'ж\'. d MMMM', 'y \'ж\'. d MMMM, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'сан емес', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '₸', 'Қазақстан теңгесі',
+  {'JPY': ['JP¥', '¥'], 'KZT': ['₸'], 'RUB': ['₽'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_kk
+];
+
+function plural_km(n: number): number {
+  return 5;
+}
+
+export const locale_km = [
+  'km', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['អ', 'ច', 'អ', 'ព', 'ព', 'ស', 'ស'], ['អាទិត្យ', 'ច័ន្ទ', 'អង្គារ', 'ពុធ', 'ព្រហស្បតិ៍', 'សុក្រ', 'សៅរ៍'], u,
+    ['អា', 'ច', 'អ', 'ពុ', 'ព្រ', 'សុ', 'ស']
+  ],
+  u,
+  [
+    ['ម', 'ក', 'ម', 'ម', 'ឧ', 'ម', 'ក', 'ស', 'ក', 'ត', 'វ', 'ធ'],
+    ['មករា', 'កុម្ភៈ', 'មីនា', 'មេសា', 'ឧសភា', 'មិថុនា', 'កក្កដា', 'សីហា', 'កញ្ញា', 'តុលា', 'វិច្ឆិកា', 'ធ្នូ'], u
+  ],
+  u, [['មុន គ.ស.', 'គ.ស.'], u, ['មុន​គ្រិស្តសករាជ', 'គ្រិស្តសករាជ']], 0,
+  [6, 0], ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'],
+  ['{1}, {0}', u, '{1} នៅ​ម៉ោង {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], '៛', 'រៀល​កម្ពុជា',
+  {'JPY': ['JP¥', '¥'], 'KHR': ['៛'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_km
+];
+
+function plural_kn(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export const locale_kn = [
+  'kn', [['ಪೂ', 'ಅ'], ['ಪೂರ್ವಾಹ್ನ', 'ಅಪರಾಹ್ನ'], u], [['ಪೂರ್ವಾಹ್ನ', 'ಅಪರಾಹ್ನ'], u, u],
+  [
+    ['ಭಾ', 'ಸೋ', 'ಮಂ', 'ಬು', 'ಗು', 'ಶು', 'ಶ'], ['ಭಾನು', 'ಸೋಮ', 'ಮಂಗಳ', 'ಬುಧ', 'ಗುರು', 'ಶುಕ್ರ', 'ಶನಿ'],
+    ['ಭಾನುವಾರ', 'ಸೋಮವಾರ', 'ಮಂಗಳವಾರ', 'ಬುಧವಾರ', 'ಗುರುವಾರ', 'ಶುಕ್ರವಾರ', 'ಶನಿವಾರ'],
+    ['ಭಾನು', 'ಸೋಮ', 'ಮಂಗಳ', 'ಬುಧ', 'ಗುರು', 'ಶುಕ್ರ', 'ಶನಿ']
+  ],
+  u,
+  [
+    ['ಜ', 'ಫೆ', 'ಮಾ', 'ಏ', 'ಮೇ', 'ಜೂ', 'ಜು', 'ಆ', 'ಸೆ', 'ಅ', 'ನ', 'ಡಿ'],
+    ['ಜನವರಿ', 'ಫೆಬ್ರವರಿ', 'ಮಾರ್ಚ್', 'ಏಪ್ರಿ', 'ಮೇ', 'ಜೂನ್', 'ಜುಲೈ', 'ಆಗ', 'ಸೆಪ್ಟೆಂ', 'ಅಕ್ಟೋ', 'ನವೆಂ', 'ಡಿಸೆಂ'],
+    [
+      'ಜನವರಿ', 'ಫೆಬ್ರವರಿ', 'ಮಾರ್ಚ್', 'ಏಪ್ರಿಲ್', 'ಮೇ', 'ಜೂನ್', 'ಜುಲೈ', 'ಆಗಸ್ಟ್', 'ಸೆಪ್ಟೆಂಬರ್', 'ಅಕ್ಟೋಬರ್', 'ನವೆಂಬರ್',
+      'ಡಿಸೆಂಬರ್'
+    ]
+  ],
+  [
+    ['ಜ', 'ಫೆ', 'ಮಾ', 'ಏ', 'ಮೇ', 'ಜೂ', 'ಜು', 'ಆ', 'ಸೆ', 'ಅ', 'ನ', 'ಡಿ'],
+    ['ಜನ', 'ಫೆಬ್ರ', 'ಮಾರ್ಚ್', 'ಏಪ್ರಿ', 'ಮೇ', 'ಜೂನ್', 'ಜುಲೈ', 'ಆಗ', 'ಸೆಪ್ಟೆಂ', 'ಅಕ್ಟೋ', 'ನವೆಂ', 'ಡಿಸೆಂ'],
+    [
+      'ಜನವರಿ', 'ಫೆಬ್ರವರಿ', 'ಮಾರ್ಚ್', 'ಏಪ್ರಿಲ್', 'ಮೇ', 'ಜೂನ್', 'ಜುಲೈ', 'ಆಗಸ್ಟ್', 'ಸೆಪ್ಟೆಂಬರ್', 'ಅಕ್ಟೋಬರ್', 'ನವೆಂಬರ್',
+      'ಡಿಸೆಂಬರ್'
+    ]
+  ],
+  [['ಕ್ರಿ.ಪೂ', 'ಕ್ರಿ.ಶ'], u, ['ಕ್ರಿಸ್ತ ಪೂರ್ವ', 'ಕ್ರಿಸ್ತ ಶಕ']], 0, [0, 0],
+  ['d/M/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['hh:mm a', 'hh:mm:ss a', 'hh:mm:ss a z', 'hh:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₹', 'ಭಾರತೀಯ ರೂಪಾಯಿ',
+  {'JPY': ['JP¥', '¥'], 'RON': [u, 'ಲೀ'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_kn
+];
+
+function plural_ko(n: number): number {
+  return 5;
+}
+
+export const locale_ko = [
+  'ko', [['AM', 'PM'], u, ['오전', '오후']], u,
+  [
+    ['일', '월', '화', '수', '목', '금', '토'], u,
+    ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
+    ['일', '월', '화', '수', '목', '금', '토']
+  ],
+  u,
+  [['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], u, u],
+  u, [['BC', 'AD'], u, ['기원전', '서기']], 0, [6, 0],
+  ['yy. M. d.', 'y. M. d.', 'y년 M월 d일', 'y년 M월 d일 EEEE'],
+  ['a h:mm', 'a h:mm:ss', 'a h시 m분 s초 z', 'a h시 m분 s초 zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₩', '대한민국 원',
+  {'AUD': ['AU$', '$'], 'JPY': ['JP¥', '¥'], 'RON': [u, 'L'], 'TWD': ['NT$'], 'USD': ['US$', '$']},
+  plural_ko
+];
+
+function plural_ky(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_ky = [
+  'ky', [['тң', 'тк'], u, ['таңкы', 'түштөн кийинки']], u,
+  [
+    ['Ж', 'Д', 'Ш', 'Ш', 'Б', 'Ж', 'И'],
+    ['жек.', 'дүй.', 'шейш.', 'шарш.', 'бейш.', 'жума', 'ишм.'],
+    ['жекшемби', 'дүйшөмбү', 'шейшемби', 'шаршемби', 'бейшемби', 'жума', 'ишемби'],
+    ['жек.', 'дүй.', 'шейш.', 'шарш.', 'бейш.', 'жума', 'ишм.']
+  ],
+  [
+    ['Ж', 'Д', 'Ш', 'Ш', 'Б', 'Ж', 'И'],
+    ['жек.', 'дүй.', 'шейш.', 'шарш.', 'бейш.', 'жума', 'ишм.'],
+    ['жекшемби', 'дүйшөмбү', 'шейшемби', 'шаршемби', 'бейшемби', 'жума', 'ишемби'],
+    ['жк', 'дш.', 'шш.', 'шр.', 'бш.', 'жм.', 'иш.']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    ['янв.', 'фев.', 'мар.', 'апр.', 'май', 'июн.', 'июл.', 'авг.', 'сен.', 'окт.', 'ноя.', 'дек.'],
+    [
+      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь',
+      'ноябрь', 'декабрь'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+    [
+      'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь',
+      'Ноябрь', 'Декабрь'
+    ]
+  ],
+  [['б.з.ч.', 'б.з.'], u, ['биздин заманга чейин', 'биздин заман']], 1, [6, 0],
+  ['d/M/yy', 'y-\'ж\'., d-MMM', 'y-\'ж\'., d-MMMM', 'y-\'ж\'., d-MMMM, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'сан эмес', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'сом', 'Кыргызстан сому', {
+    'AUD': [u, '$'],
+    'BMD': [u, 'BD$'],
+    'BRL': [u, 'R$'],
+    'BSD': [u, 'B$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': [u, 'C$'],
+    'DOP': [u, 'RD$'],
+    'EGP': [u, 'LE'],
+    'GBP': [u, '£'],
+    'HKD': [u, 'HK$'],
+    'HRK': [u, 'Kn'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JMD': [u, 'J$'],
+    'JPY': ['JP¥', '¥'],
+    'KGS': ['сом'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'THB': ['฿'],
+    'TTD': [u, 'TT$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'XCD': [u, '$']
+  },
+  plural_ky
+];
+
+function plural_ln(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export const locale_ln = [
+  'ln', [['ntɔ́ngɔ́', 'mpókwa'], u, u], u,
+  [
+    ['e', 'y', 'm', 'm', 'm', 'm', 'p'], ['eye', 'ybo', 'mbl', 'mst', 'min', 'mtn', 'mps'],
+    [
+      'eyenga', 'mokɔlɔ mwa yambo', 'mokɔlɔ mwa míbalé', 'mokɔlɔ mwa mísáto', 'mokɔlɔ ya mínéi',
+      'mokɔlɔ ya mítáno', 'mpɔ́sɔ'
+    ],
+    ['eye', 'ybo', 'mbl', 'mst', 'min', 'mtn', 'mps']
+  ],
+  u,
+  [
+    ['y', 'f', 'm', 'a', 'm', 'y', 'y', 'a', 's', 'ɔ', 'n', 'd'],
+    ['yan', 'fbl', 'msi', 'apl', 'mai', 'yun', 'yul', 'agt', 'stb', 'ɔtb', 'nvb', 'dsb'],
+    [
+      'sánzá ya yambo', 'sánzá ya míbalé', 'sánzá ya mísáto', 'sánzá ya mínei', 'sánzá ya mítáno',
+      'sánzá ya motóbá', 'sánzá ya nsambo', 'sánzá ya mwambe', 'sánzá ya libwa', 'sánzá ya zómi',
+      'sánzá ya zómi na mɔ̌kɔ́', 'sánzá ya zómi na míbalé'
+    ]
+  ],
+  u, [['libóso ya', 'nsima ya Y'], u, ['Yambo ya Yézu Krís', 'Nsima ya Yézu Krís']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FC', 'Falánga ya Kongó',
+  {'CDF': ['FC'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural_ln
+];
+
+function plural_lo(n: number): number {
+  return 5;
+}
+
+export const locale_lo = [
+  'lo', [['ກທ', 'ຫຼທ'], ['ກ່ອນທ່ຽງ', 'ຫຼັງທ່ຽງ'], u], u,
+  [
+    ['ອາ', 'ຈ', 'ອ', 'ພ', 'ພຫ', 'ສຸ', 'ສ'], ['ອາທິດ', 'ຈັນ', 'ອັງຄານ', 'ພຸດ', 'ພະຫັດ', 'ສຸກ', 'ເສົາ'],
+    ['ວັນອາທິດ', 'ວັນຈັນ', 'ວັນອັງຄານ', 'ວັນພຸດ', 'ວັນພະຫັດ', 'ວັນສຸກ', 'ວັນເສົາ'],
+    ['ອາ.', 'ຈ.', 'ອ.', 'ພ.', 'ພຫ.', 'ສຸ.', 'ສ.']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ມ.ກ.', 'ກ.ພ.', 'ມ.ນ.', 'ມ.ສ.', 'ພ.ພ.', 'ມິ.ຖ.', 'ກ.ລ.', 'ສ.ຫ.', 'ກ.ຍ.', 'ຕ.ລ.', 'ພ.ຈ.', 'ທ.ວ.'
+    ],
+    [
+      'ມັງກອນ', 'ກຸມພາ', 'ມີນາ', 'ເມສາ', 'ພຶດສະພາ', 'ມິຖຸນາ', 'ກໍລະກົດ', 'ສິງຫາ', 'ກັນຍາ', 'ຕຸລາ', 'ພະຈິກ',
+      'ທັນວາ'
+    ]
+  ],
+  u, [['ກ່ອນ ຄ.ສ.', 'ຄ.ສ.'], u, ['ກ່ອນຄຣິດສັກກະລາດ', 'ຄຣິດສັກກະລາດ']], 0, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE ທີ d MMMM G y'],
+  ['H:mm', 'H:mm:ss', 'H ໂມງ m ນາທີ ss ວິນາທີ z', 'H ໂມງ m ນາທີ ss ວິນາທີ zzzz'], ['{1}, {0}', u, u, u],
+  [
+    ',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞',
+    'ບໍ່​ແມ່ນ​ໂຕ​ເລກ', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤#,##0.00;¤-#,##0.00', '#'], '₭', 'ລາວ ກີບ',
+  {'JPY': ['JP¥', '¥'], 'LAK': ['₭'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']}, plural_lo
+];
+
+function plural_lt(n: number): number {
+  let f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (n % 10 === 1 && !(n % 100 >= 11 && n % 100 <= 19)) return 1;
+  if (n % 10 === Math.floor(n % 10) && n % 10 >= 2 && n % 10 <= 9 &&
+      !(n % 100 >= 11 && n % 100 <= 19))
+    return 3;
+  if (!(f === 0)) return 4;
+  return 5;
+}
+
+export const locale_lt = [
+  'lt', [['pr. p.', 'pop.'], ['priešpiet', 'popiet'], u], u,
+  [
+    ['S', 'P', 'A', 'T', 'K', 'P', 'Š'], ['sk', 'pr', 'an', 'tr', 'kt', 'pn', 'št'],
+    [
+      'sekmadienis', 'pirmadienis', 'antradienis', 'trečiadienis', 'ketvirtadienis', 'penktadienis',
+      'šeštadienis'
+    ],
+    ['Sk', 'Pr', 'An', 'Tr', 'Kt', 'Pn', 'Št']
+  ],
+  u,
+  [
+    ['S', 'V', 'K', 'B', 'G', 'B', 'L', 'R', 'R', 'S', 'L', 'G'],
+    [
+      'saus.', 'vas.', 'kov.', 'bal.', 'geg.', 'birž.', 'liep.', 'rugp.', 'rugs.', 'spal.',
+      'lapkr.', 'gruod.'
+    ],
+    [
+      'sausio', 'vasario', 'kovo', 'balandžio', 'gegužės', 'birželio', 'liepos', 'rugpjūčio',
+      'rugsėjo', 'spalio', 'lapkričio', 'gruodžio'
+    ]
+  ],
+  [
+    ['S', 'V', 'K', 'B', 'G', 'B', 'L', 'R', 'R', 'S', 'L', 'G'],
+    [
+      'saus.', 'vas.', 'kov.', 'bal.', 'geg.', 'birž.', 'liep.', 'rugp.', 'rugs.', 'spal.',
+      'lapkr.', 'gruod.'
+    ],
+    [
+      'sausis', 'vasaris', 'kovas', 'balandis', 'gegužė', 'birželis', 'liepa', 'rugpjūtis',
+      'rugsėjis', 'spalis', 'lapkritis', 'gruodis'
+    ]
+  ],
+  [['pr. Kr.', 'po Kr.'], u, ['prieš Kristų', 'po Kristaus']], 1, [6, 0],
+  ['y-MM-dd', u, 'y \'m\'. MMMM d \'d\'.', 'y \'m\'. MMMM d \'d\'., EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '×10^', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euras', {
+    'AUD': [u, '$'],
+    'BDT': [],
+    'BRL': [u, 'R$'],
+    'BYN': [u, 'Br'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [],
+    'INR': [],
+    'JPY': [u, '¥'],
+    'KHR': [],
+    'KRW': [u, '₩'],
+    'LAK': [],
+    'MNT': [],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'PLN': [u, 'zl'],
+    'PYG': [u, 'Gs'],
+    'RUB': [u, 'rb'],
+    'TWD': [u, '$'],
+    'USD': [u, '$'],
+    'VND': [],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': [],
+    'XPF': []
+  },
+  plural_lt
+];
+
+function plural_lv(n: number): number {
+  let v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (n % 10 === 0 || n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 19 ||
+      v === 2 && f % 100 === Math.floor(f % 100) && f % 100 >= 11 && f % 100 <= 19)
+    return 0;
+  if (n % 10 === 1 && !(n % 100 === 11) || v === 2 && f % 10 === 1 && !(f % 100 === 11) ||
+      !(v === 2) && f % 10 === 1)
+    return 1;
+  return 5;
+}
+
+export const locale_lv = [
+  'lv', [['priekšp.', 'pēcp.'], u, ['priekšpusdienā', 'pēcpusdienā']],
+  [['priekšp.', 'pēcpusd.'], u, ['priekšpusdiena', 'pēcpusdiena']],
+  [
+    ['S', 'P', 'O', 'T', 'C', 'P', 'S'],
+    ['svētd.', 'pirmd.', 'otrd.', 'trešd.', 'ceturtd.', 'piektd.', 'sestd.'],
+    ['svētdiena', 'pirmdiena', 'otrdiena', 'trešdiena', 'ceturtdiena', 'piektdiena', 'sestdiena'],
+    ['Sv', 'Pr', 'Ot', 'Tr', 'Ce', 'Pk', 'Se']
+  ],
+  [
+    ['S', 'P', 'O', 'T', 'C', 'P', 'S'],
+    ['Svētd.', 'Pirmd.', 'Otrd.', 'Trešd.', 'Ceturtd.', 'Piektd.', 'Sestd.'],
+    ['Svētdiena', 'Pirmdiena', 'Otrdiena', 'Trešdiena', 'Ceturtdiena', 'Piektdiena', 'Sestdiena'],
+    ['Sv', 'Pr', 'Ot', 'Tr', 'Ce', 'Pk', 'Se']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'febr.', 'marts', 'apr.', 'maijs', 'jūn.', 'jūl.', 'aug.', 'sept.', 'okt.', 'nov.',
+      'dec.'
+    ],
+    [
+      'janvāris', 'februāris', 'marts', 'aprīlis', 'maijs', 'jūnijs', 'jūlijs', 'augusts',
+      'septembris', 'oktobris', 'novembris', 'decembris'
+    ]
+  ],
+  u, [['p.m.ē.', 'm.ē.'], u, ['pirms mūsu ēras', 'mūsu ērā']], 1, [6, 0],
+  ['dd.MM.yy', 'y. \'gada\' d. MMM', 'y. \'gada\' d. MMMM', 'EEEE, y. \'gada\' d. MMMM'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NS', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'eiro',
+  {'AUD': ['AU$', '$'], 'LVL': ['Ls'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_lv
+];
+
+function plural_mk(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  return 5;
+}
+
+export const locale_mk = [
+  'mk', [['претпл.', 'попл.'], u, ['претпладне', 'попладне']], u,
+  [
+    ['н', 'п', 'в', 'с', 'ч', 'п', 'с'], ['нед.', 'пон.', 'вт.', 'сре.', 'чет.', 'пет.', 'саб.'],
+    ['недела', 'понеделник', 'вторник', 'среда', 'четврток', 'петок', 'сабота'],
+    ['нед.', 'пон.', 'вто.', 'сре.', 'чет.', 'пет.', 'саб.']
+  ],
+  [
+    ['н', 'п', 'в', 'с', 'ч', 'п', 'с'], ['нед.', 'пон.', 'вто.', 'сре.', 'чет.', 'пет.', 'саб.'],
+    ['недела', 'понеделник', 'вторник', 'среда', 'четврток', 'петок', 'сабота'],
+    ['нед.', 'пон.', 'вто.', 'сре.', 'чет.', 'пет.', 'саб.']
+  ],
+  [
+    ['ј', 'ф', 'м', 'а', 'м', 'ј', 'ј', 'а', 'с', 'о', 'н', 'д'],
+    [
+      'јан.', 'фев.', 'мар.', 'апр.', 'мај', 'јун.', 'јул.', 'авг.', 'септ.', 'окт.', 'ноем.',
+      'дек.'
+    ],
+    [
+      'јануари', 'февруари', 'март', 'април', 'мај', 'јуни', 'јули', 'август', 'септември',
+      'октомври', 'ноември', 'декември'
+    ]
+  ],
+  u, [['пр.н.е.', 'н.е.'], u, ['пред нашата ера', 'од нашата ера']], 1, [6, 0],
+  ['dd.M.yy', 'dd.M.y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'ден', 'Македонски денар', {
+    'AUD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MKD': ['ден'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural_mk
+];
+
+function plural_ml(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_ml = [
+  'ml', [['AM', 'PM'], u, u], u,
+  [
+    ['ഞ', 'തി', 'ചൊ', 'ബു', 'വ്യാ', 'വെ', 'ശ'],
+    ['ഞായർ', 'തിങ്കൾ', 'ചൊവ്വ', 'ബുധൻ', 'വ്യാഴം', 'വെള്ളി', 'ശനി'],
+    [
+      'ഞായറാഴ്\u200cച', 'തിങ്കളാഴ്\u200cച', 'ചൊവ്വാഴ്ച', 'ബുധനാഴ്\u200cച', 'വ്യാഴാഴ്\u200cച',
+      'വെള്ളിയാഴ്\u200cച', 'ശനിയാഴ്\u200cച'
+    ],
+    ['ഞാ', 'തി', 'ചൊ', 'ബു', 'വ്യാ', 'വെ', 'ശ']
+  ],
+  [
+    ['ഞാ', 'തി', 'ചൊ', 'ബു', 'വ്യാ', 'വെ', 'ശ'],
+    ['ഞായർ', 'തിങ്കൾ', 'ചൊവ്വ', 'ബുധൻ', 'വ്യാഴം', 'വെള്ളി', 'ശനി'],
+    [
+      'ഞായറാഴ്\u200cച', 'തിങ്കളാഴ്\u200cച', 'ചൊവ്വാഴ്\u200cച', 'ബുധനാഴ്\u200cച', 'വ്യാഴാഴ്\u200cച',
+      'വെള്ളിയാഴ്\u200cച', 'ശനിയാഴ്\u200cച'
+    ],
+    ['ഞാ', 'തി', 'ചൊ', 'ബ��', 'വ്യാ', 'വെ', 'ശ']
+  ],
+  [
+    ['ജ', 'ഫെ', 'മാ', 'ഏ', 'മെ', 'ജൂൺ', 'ജൂ', 'ഓ', 'സെ', 'ഒ', 'ന', 'ഡി'],
+    ['ജനു', 'ഫെബ്രു', 'മാർ', 'ഏപ്രി', 'മേയ്', 'ജൂൺ', 'ജൂലൈ', 'ഓഗ', 'സെപ്റ്റം', 'ഒക്ടോ', 'നവം', 'ഡിസം'],
+    [
+      'ജനുവരി', 'ഫെബ്രുവരി', 'മാർച്ച്', 'ഏപ്രിൽ', 'മേയ്', 'ജൂൺ', 'ജൂലൈ', 'ഓഗസ്റ്റ്', 'സെപ്റ്റംബർ', 'ഒക്\u200cടോബർ',
+      'നവംബർ', 'ഡിസംബർ'
+    ]
+  ],
+  u, [['ക്രി.മു.', 'എഡി'], u, ['ക്രിസ്\u200cതുവിന് മുമ്പ്', 'ആന്നോ ഡൊമിനി']], 0, [0, 0],
+  ['d/M/yy', 'y, MMM d', 'y, MMMM d', 'y, MMMM d, EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₹', 'ഇന്ത്യൻ രൂപ', {'THB': ['฿'], 'TWD': ['NT$']},
+  plural_ml
+];
+
+function plural_mn(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_mn = [
+  'mn', [['үө', 'үх'], ['ҮӨ', 'ҮХ'], ['ү.ө', 'ү.х']], [['ҮӨ', 'ҮХ'], u, u],
+  [
+    ['Ня', 'Да', 'Мя', 'Лх', 'Пү', 'Ба', 'Бя'], u,
+    ['ням', 'даваа', 'мягмар', 'лхагва', 'пүрэв', 'баасан', 'бямба'],
+    ['Ня', 'Да', 'Мя', 'Лх', 'Пү', 'Ба', 'Бя']
+  ],
+  u,
+  [
+    ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'],
+    [
+      '1-р сар', '2-р сар', '3-р сар', '4-р сар', '5-р сар', '6-р сар', '7-р сар', '8-р сар',
+      '9-р сар', '10-р сар', '11-р сар', '12-р сар'
+    ],
+    [
+      'Нэгдүгээр сар', 'Хоёрдугаар сар', 'Гуравдугаар сар', 'Дөрөвдүгээр сар', 'Тавдугаар сар',
+      'Зургаадугаар сар', 'Долдугаар сар', 'Наймдугаар сар', 'Есдүгээр сар', 'Аравдугаар сар',
+      'Арван нэгдүгээр сар', 'Арван хоёрдугаар сар'
+    ]
+  ],
+  u, [['МЭӨ', 'МЭ'], u, ['манай эриний өмнөх', 'манай эриний']], 1, [6, 0],
+  ['y.MM.dd', u, u, 'y.MM.dd, EEEE'], ['HH:mm', 'HH:mm:ss', 'HH:mm:ss (z)', 'HH:mm:ss (zzzz)'],
+  ['{1} {0}', u, u, u], ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₮', 'төгрөг',
+  {'JPY': ['JP¥', '¥'], 'MNT': ['₮'], 'SEK': [u, 'кр'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_mn
+];
+
+function plural_mo(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (!(v === 0) || n === 0 ||
+      !(n === 1) && n % 100 === Math.floor(n % 100) && n % 100 >= 1 && n % 100 <= 19)
+    return 3;
+  return 5;
+}
+
+export const locale_mo = [
+  'ro-MD', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['D', 'L', 'Ma', 'Mi', 'J', 'V', 'S'], ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
+    ['duminică', 'luni', 'marți', 'miercuri', 'joi', 'vineri', 'sâmbătă'],
+    ['Du', 'Lu', 'Ma', 'Mi', 'Jo', 'Vi', 'Sâ']
+  ],
+  u,
+  [
+    ['I', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ian.', 'feb.', 'mar.', 'apr.', 'mai', 'iun.', 'iul.', 'aug.', 'sept.', 'oct.', 'nov.', 'dec.'
+    ],
+    [
+      'ianuarie', 'februarie', 'martie', 'aprilie', 'mai', 'iunie', 'iulie', 'august', 'septembrie',
+      'octombrie', 'noiembrie', 'decembrie'
+    ]
+  ],
+  u, [['î.Hr.', 'd.Hr.'], u, ['înainte de Hristos', 'după Hristos']], 1, [6, 0],
+  ['dd.MM.y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'L', 'leu moldovenesc', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MDL': ['L'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$']
+  },
+  plural_mo
+];
+
+function plural_mr(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export const locale_mr = [
+  'mr', [['स', 'सं'], ['म.पू.', 'म.उ.'], u], [['म.पू.', 'म.उ.'], u, u],
+  [
+    ['र', 'सो', 'मं', 'बु', 'गु', 'शु', 'श'], ['रवि', 'सोम', 'मंगळ', 'बुध', 'गुरु', 'शुक्र', 'शनि'],
+    ['रविवार', 'सोमवार', 'मंगळवार', 'बुधवार', 'गुरुवार', 'शुक्रवार', 'शनिवार'],
+    ['र', 'सो', 'मं', 'बु', 'गु', 'शु', 'श']
+  ],
+  u,
+  [
+    ['जा', 'फे', 'मा', 'ए', 'मे', 'जू', 'जु', 'ऑ', 'स', 'ऑ', 'नो', 'डि'],
+    ['जाने', 'फेब्रु', 'मार्च', 'एप्रि', 'मे', 'जून', 'जुलै', 'ऑग', 'सप्टें', 'ऑक्टो', 'नोव्हें', 'डिसें'],
+    [
+      'जानेवारी', 'फेब्रुवारी', 'मार्च', 'एप्रिल', 'मे', 'जून', 'जुलै', 'ऑगस्ट', 'सप्टेंबर', 'ऑक्टोबर', 'नोव्हेंबर',
+      'डिसेंबर'
+    ]
+  ],
+  u, [['इ. स. पू.', 'इ. स.'], u, ['ईसवीसनपूर्व', 'ईसवीसन']], 0, [0, 0],
+  ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} रोजी {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##0%', '¤#,##0.00', '[#E0]'], '₹', 'भारतीय रुपया',
+  {'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_mr
+];
+
+function plural_ms(n: number): number {
+  return 5;
+}
+
+export const locale_ms = [
+  'ms', [['a', 'p'], ['PG', 'PTG'], u], u,
+  [
+    ['A', 'I', 'S', 'R', 'K', 'J', 'S'], ['Ahd', 'Isn', 'Sel', 'Rab', 'Kha', 'Jum', 'Sab'],
+    ['Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu'],
+    ['Ah', 'Is', 'Se', 'Ra', 'Kh', 'Ju', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'O', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ogo', 'Sep', 'Okt', 'Nov', 'Dis'],
+    [
+      'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober',
+      'November', 'Disember'
+    ]
+  ],
+  u, [['S.M.', 'TM'], u, u], 1, [6, 0], ['d/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'RM', 'Ringgit Malaysia', {
+    'CAD': [u, '$'],
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'MYR': ['RM'],
+    'TWD': ['NT$'],
+    'USD': [u, '$']
+  },
+  plural_ms
+];
+
+function plural_mt(n: number): number {
+  if (n === 1) return 1;
+  if (n === 0 || n % 100 === Math.floor(n % 100) && n % 100 >= 2 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 19) return 4;
+  return 5;
+}
+
+export const locale_mt = [
+  'mt', [['am', 'pm'], ['AM', 'PM'], u], u,
+  [
+    ['Ħd', 'T', 'Tl', 'Er', 'Ħm', 'Ġm', 'Sb'], ['Ħad', 'Tne', 'Tli', 'Erb', 'Ħam', 'Ġim', 'Sib'],
+    ['Il-Ħadd', 'It-Tnejn', 'It-Tlieta', 'L-Erbgħa', 'Il-Ħamis', 'Il-Ġimgħa', 'Is-Sibt'],
+    ['Ħad', 'Tne', 'Tli', 'Erb', 'Ħam', 'Ġim', 'Sib']
+  ],
+  [
+    ['Ħd', 'Tn', 'Tl', 'Er', 'Ħm', 'Ġm', 'Sb'], ['Ħad', 'Tne', 'Tli', 'Erb', 'Ħam', 'Ġim', 'Sib'],
+    ['Il-Ħadd', 'It-Tnejn', 'It-Tlieta', 'L-Erbgħa', 'Il-Ħamis', 'Il-Ġimgħa', 'Is-Sibt'],
+    ['Ħad', 'Tne', 'Tli', 'Erb', 'Ħam', 'Ġim', 'Sib']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'Ġ', 'L', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Fra', 'Mar', 'Apr', 'Mej', 'Ġun', 'Lul', 'Aww', 'Set', 'Ott', 'Nov', 'Diċ'],
+    [
+      'Jannar', 'Frar', 'Marzu', 'April', 'Mejju', 'Ġunju', 'Lulju', 'Awwissu', 'Settembru',
+      'Ottubru', 'Novembru', 'Diċembru'
+    ]
+  ],
+  [
+    ['Jn', 'Fr', 'Mz', 'Ap', 'Mj', 'Ġn', 'Lj', 'Aw', 'St', 'Ob', 'Nv', 'Dċ'],
+    ['Jan', 'Fra', 'Mar', 'Apr', 'Mej', 'Ġun', 'Lul', 'Aww', 'Set', 'Ott', 'Nov', 'Diċ'],
+    [
+      'Jannar', 'Frar', 'Marzu', 'April', 'Mejju', 'Ġunju', 'Lulju', 'Awwissu', 'Settembru',
+      'Ottubru', 'Novembru', 'Diċembru'
+    ]
+  ],
+  [['QK', 'WK'], u, ['Qabel Kristu', 'Wara Kristu']], 0, [6, 0],
+  ['dd/MM/y', 'dd MMM y', 'd \'ta\'’ MMMM y', 'EEEE, d \'ta\'’ MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '€', 'ewro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural_mt
+];
+
+function plural_my(n: number): number {
+  return 5;
+}
+
+export const locale_my = [
+  'my', [['နံနက်', 'ညနေ'], u, u], u,
+  [
+    ['တ', 'တ', 'အ', 'ဗ', 'က', 'သ', 'စ'],
+    ['တနင်္ဂနွေ', 'တနင်္လာ', 'အင်္ဂါ', 'ဗုဒ္ဓဟူး', 'ကြာသပတေး', 'သောကြာ', 'စနေ'], u, u
+  ],
+  u,
+  [
+    ['ဇ', 'ဖ', 'မ', 'ဧ', 'မ', 'ဇ', 'ဇ', 'ဩ', 'စ', 'အ', 'န', 'ဒ'],
+    ['ဇန်', 'ဖေ', 'မတ်', 'ဧ', 'မေ', 'ဇွန်', 'ဇူ', 'ဩ', 'စက်', 'အောက်', 'နို', 'ဒီ'],
+    [
+      'ဇန်နဝါရီ', 'ဖေဖော်ဝါရီ', 'မတ်', 'ဧပြီ', 'မေ', 'ဇွန်', 'ဇူလိုင်', 'ဩဂုတ်', 'စက်တင်ဘာ', 'အောက်တိုဘာ', 'နိုဝင်ဘာ',
+      'ဒီဇင်ဘာ'
+    ]
+  ],
+  u, [['ဘီစီ', 'အေဒီ'], u, ['ခရစ်တော် မပေါ်မီနှစ်', 'ခရစ်နှစ်']], 0, [6, 0],
+  ['dd-MM-yy', 'y၊ MMM d', 'y၊ d MMMM', 'y၊ MMMM d၊ EEEE'],
+  ['B H:mm', 'B HH:mm:ss', 'z HH:mm:ss', 'zzzz HH:mm:ss'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'ဂဏန်းမဟုတ်သော', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'K', 'မြန်မာ ကျပ်', {
+    'ANG': ['NAf'],
+    'AWG': ['Afl'],
+    'BBD': [u, 'Bds$'],
+    'BSD': [u, 'B$'],
+    'HTG': ['G'],
+    'JPY': ['JP¥', '¥'],
+    'MMK': ['K'],
+    'PAB': ['B/.'],
+    'THB': ['฿'],
+    'TTD': ['TT$', '$'],
+    'USD': ['US$', '$']
+  },
+  plural_my
+];
+
+function plural_ne(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_ne = [
+  'ne', [['पूर्वाह्न', 'अपराह्न'], u, u], u,
+  [
+    ['आ', 'सो', 'म', 'बु', 'बि', 'शु', 'श'], ['आइत', 'सोम', 'मङ्गल', 'बुध', 'बिहि', 'शुक्र', 'शनि'],
+    ['आइतबार', 'सोमबार', 'मङ्गलबार', 'बुधबार', 'बिहिबार', 'शुक्रबार', 'शनिबार'],
+    ['आइत', 'सोम', 'मङ्गल', 'बुध', 'बिहि', 'शुक्र', 'शनि']
+  ],
+  u,
+  [
+    ['जन', 'फेब', 'मार्च', 'अप्र', 'मे', 'जुन', 'जुल', 'अग', 'सेप', 'अक्टो', 'नोभे', 'डिसे'],
+    [
+      'जनवरी', 'फेब्रुअरी', 'मार्च', 'अप्रिल', 'मे', 'जुन', 'जुलाई', 'अगस्ट', 'सेप्टेम्बर', 'अक्टोबर', 'नोभेम्बर',
+      'डिसेम्बर'
+    ],
+    u
+  ],
+  [
+    ['ज���', 'फेेब', 'मार्च', 'अप्र', 'मे', 'जुन', 'जुल', 'अग', 'सेप', 'अक्टो', 'नोभे', 'डिसे'],
+    [
+      'जनवरी', 'फेब्रुअरी', 'मार्च', 'अप्रिल', 'मे', 'जुन', 'जुलाई', 'अगस्ट', 'सेप्टेम्बर', 'अक्टोबर', 'नोभेम्बर',
+      'डिसेम्बर'
+    ],
+    u
+  ],
+  [['ईसा पूर्व', 'सन्'], u, u], 0, [6, 0], ['yy/M/d', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'नेरू', 'नेपाली रूपैयाँ',
+  {'JPY': ['JP¥', '¥'], 'NPR': ['नेरू', 'रू'], 'THB': ['฿'], 'USD': ['US$', '$']}, plural_ne
+];
+
+function plural_nl(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_nl = [
+  'nl', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'], ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
+    ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], ['v.Chr.', 'n.Chr.'], ['voor Christus', 'na Christus']], 1, [6, 0],
+  ['dd-MM-yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'om\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤ -#,##0.00', '#E0'], '€', 'Euro', {
+    'AUD': ['AU$', '$'],
+    'CAD': ['C$', '$'],
+    'FJD': ['FJ$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'SBD': ['SI$', '$'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'XPF': []
+  },
+  plural_nl
+];
+
+function plural_no(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_no = [
+  'nb', [['a', 'p'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['søn.', 'man.', 'tir.', 'ons.', 'tor.', 'fre.', 'lør.'],
+    ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'],
+    ['sø.', 'ma.', 'ti.', 'on.', 'to.', 'fr.', 'lø.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'mai', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'des.'],
+    [
+      'januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober',
+      'november', 'desember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'des'],
+    [
+      'januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober',
+      'november', 'desember'
+    ]
+  ],
+  [['f.Kr.', 'e.Kr.'], u, ['før Kristus', 'etter Kristus']], 1, [6, 0],
+  ['dd.MM.y', 'd. MMM y', 'd. MMMM y', 'EEEE d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'],
+  ['{1}, {0}', u, '{1} \'kl\'. {0}', '{1} {0}'],
+  [',', ' ', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], 'kr', 'norske kroner', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NOK': ['kr'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XPF': []
+  },
+  plural_no
+];
+
+function plural_or(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_or = [
+  'or', [['ପୂ', 'ଅ'], ['AM', 'PM'], u], [['AM', 'ଅପରାହ୍ନ'], ['ପୂର୍ବାହ୍ନ', 'ଅପରାହ୍ନ'], u],
+  [
+    ['ର', 'ସୋ', 'ମ', 'ବୁ', 'ଗୁ', 'ଶୁ', 'ଶ'], ['ରବି', 'ସୋମ', 'ମଙ୍ଗଳ', 'ବୁଧ', 'ଗୁରୁ', 'ଶୁକ୍ର', 'ଶନି'],
+    ['ରବିବାର', 'ସୋମବାର', 'ମଙ୍ଗଳବାର', 'ବୁଧବାର', 'ଗୁରୁବାର', 'ଶୁକ୍ରବାର', 'ଶନିବାର'],
+    ['ରବି', 'ସୋମ', 'ମଙ୍ଗଳ', 'ବୁଧ', 'ଗୁରୁ', 'ଶୁକ୍ର', 'ଶନି']
+  ],
+  u,
+  [
+    ['ଜା', 'ଫେ', 'ମା', 'ଅ', 'ମଇ', 'ଜୁ', 'ଜୁ', 'ଅ', 'ସେ', 'ଅ', 'ନ', 'ଡି'],
+    [
+      'ଜାନୁଆରୀ', 'ଫେବୃଆରୀ', 'ମାର୍ଚ୍ଚ', 'ଅପ୍ରେଲ', 'ମଇ', 'ଜୁନ', 'ଜୁଲାଇ', 'ଅଗଷ୍ଟ', 'ସେପ୍ଟେମ୍ବର', 'ଅକ୍ଟୋବର',
+      'ନଭେମ୍ବର', 'ଡିସେମ୍ବର'
+    ],
+    u
+  ],
+  u, [['BC', 'AD'], u, ['ଖ୍ରୀଷ୍ଟପୂର୍ବ', 'ଖ୍ରୀଷ୍ଟାବ୍ଦ']], 0, [0, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{0} ଠାରେ {1}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], '₹', 'ଭାରତୀୟ ଟଙ୍କା', {}, plural_or
+];
+
+function plural_pa(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export const locale_pa = [
+  'pa', [['ਸ.', 'ਸ਼.'], ['ਪੂ.ਦੁ.', 'ਬਾ.ਦੁ.'], u], [['ਪੂ.ਦੁ.', 'ਬਾ.ਦੁ.'], u, u],
+  [
+    ['ਐ', 'ਸੋ', 'ਮੰ', 'ਬੁੱ', 'ਵੀ', 'ਸ਼ੁੱ', 'ਸ਼'], ['ਐਤ', 'ਸੋਮ', 'ਮੰਗਲ', 'ਬੁੱਧ', 'ਵੀਰ', 'ਸ਼ੁੱਕਰ', 'ਸ਼ਨਿੱਚਰ'],
+    ['ਐਤਵਾਰ', 'ਸੋਮਵਾਰ', 'ਮੰਗਲਵਾਰ', 'ਬੁੱਧਵਾਰ', 'ਵੀਰਵਾਰ', 'ਸ਼ੁੱਕਰਵਾਰ', 'ਸ਼ਨਿੱਚਰਵਾਰ'],
+    ['ਐਤ', 'ਸੋਮ', 'ਮੰਗ', 'ਬੁੱਧ', 'ਵੀਰ', 'ਸ਼ੁੱਕ', 'ਸ਼ਨਿੱ']
+  ],
+  u,
+  [
+    ['ਜ', 'ਫ਼', 'ਮਾ', 'ਅ', 'ਮ', 'ਜੂ', 'ਜੁ', 'ਅ', 'ਸ', 'ਅ', 'ਨ', 'ਦ'],
+    ['ਜਨ', 'ਫ਼ਰ', 'ਮਾਰਚ', 'ਅਪ੍ਰੈ', 'ਮਈ', 'ਜੂਨ', 'ਜੁਲਾ', 'ਅਗ', 'ਸਤੰ', 'ਅਕਤੂ', 'ਨਵੰ', 'ਦਸੰ'],
+    [
+      'ਜਨਵਰੀ', 'ਫ਼ਰਵਰੀ', 'ਮਾਰਚ', 'ਅਪ੍ਰੈਲ', 'ਮਈ', 'ਜੂਨ', 'ਜੁਲਾਈ', 'ਅਗਸਤ', 'ਸਤੰਬਰ', 'ਅਕਤੂਬਰ', 'ਨਵੰਬਰ', 'ਦਸੰਬਰ'
+    ]
+  ],
+  u, [['ਈ.ਪੂ.', 'ਸੰਨ'], ['ਈ. ਪੂ.', 'ਸੰਨ'], ['ਈਸਵੀ ਪੂਰਵ', 'ਈਸਵੀ ਸੰਨ']], 0, [0, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '[#E0]'], '₹', 'ਭਾਰਤੀ ਰੁਪਇਆ',
+  {'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']}, plural_pa
+];
+
+function plural_pl(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && !(i === 1) && i % 10 === Math.floor(i % 10) && i % 10 >= 0 && i % 10 <= 1 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 12 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export const locale_pl = [
+  'pl', [['a', 'p'], ['AM', 'PM'], u], u,
+  [
+    ['n', 'p', 'w', 'ś', 'c', 'p', 's'], ['niedz.', 'pon.', 'wt.', 'śr.', 'czw.', 'pt.', 'sob.'],
+    ['niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota'],
+    ['nie', 'pon', 'wto', 'śro', 'czw', 'pią', 'sob']
+  ],
+  [
+    ['N', 'P', 'W', 'Ś', 'C', 'P', 'S'], ['niedz.', 'pon.', 'wt.', 'śr.', 'czw.', 'pt.', 'sob.'],
+    ['niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota'],
+    ['nie', 'pon', 'wto', 'śro', 'czw', 'pią', 'sob']
+  ],
+  [
+    ['s', 'l', 'm', 'k', 'm', 'c', 'l', 's', 'w', 'p', 'l', 'g'],
+    ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'],
+    [
+      'stycznia', 'lutego', 'marca', 'kwietnia', 'maja', 'czerwca', 'lipca', 'sierpnia', 'września',
+      'października', 'listopada', 'grudnia'
+    ]
+  ],
+  [
+    ['S', 'L', 'M', 'K', 'M', 'C', 'L', 'S', 'W', 'P', 'L', 'G'],
+    ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'],
+    [
+      'styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień', 'wrzesień',
+      'październik', 'listopad', 'grudzień'
+    ]
+  ],
+  [['p.n.e.', 'n.e.'], u, ['przed naszą erą', 'naszej ery']], 1, [6, 0],
+  ['dd.MM.y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'zł', 'złoty polski', {
+    'AUD': [u, '$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'PLN': ['zł'],
+    'RON': [u, 'lej'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫']
+  },
+  plural_pl
+];
+
+function plural_pt(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export const locale_pt = [
+  'pt', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'], ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 0, [6, 0],
+  ['dd/MM/y', 'd \'de\' MMM \'de\' y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'R$', 'Real brasileiro', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['Esc.'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural_pt
+];
+
+function plural_pt_PT(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export const locale_pt_PT = [
+  'pt-PT', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural_pt_PT
+];
+
+function plural_ro(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (!(v === 0) || n === 0 ||
+      !(n === 1) && n % 100 === Math.floor(n % 100) && n % 100 >= 1 && n % 100 <= 19)
+    return 3;
+  return 5;
+}
+
+export const locale_ro = [
+  'ro', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dum.', 'lun.', 'mar.', 'mie.', 'joi', 'vin.', 'sâm.'],
+    ['duminică', 'luni', 'marți', 'miercuri', 'joi', 'vineri', 'sâmbătă'],
+    ['du.', 'lu.', 'ma.', 'mi.', 'joi', 'vi.', 'sâ.']
+  ],
+  u,
+  [
+    ['I', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ian.', 'feb.', 'mar.', 'apr.', 'mai', 'iun.', 'iul.', 'aug.', 'sept.', 'oct.', 'nov.', 'dec.'
+    ],
+    [
+      'ianuarie', 'februarie', 'martie', 'aprilie', 'mai', 'iunie', 'iulie', 'august', 'septembrie',
+      'octombrie', 'noiembrie', 'decembrie'
+    ]
+  ],
+  u, [['î.Hr.', 'd.Hr.'], u, ['înainte de Hristos', 'după Hristos']], 1, [6, 0],
+  ['dd.MM.y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'RON', 'leu românesc', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$']
+  },
+  plural_ro
+];
+
+function plural_ru(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && i % 10 === 0 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export const locale_ru = [
+  'ru', [['AM', 'PM'], u, u], u,
+  [
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'], u,
+    ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['В', 'П', 'В', 'С', 'Ч', 'П', 'С'], ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'мар.', 'апр.', 'мая', 'июн.', 'июл.', 'авг.', 'сент.', 'окт.', 'нояб.',
+      'дек.'
+    ],
+    [
+      'января', 'февраля', 'марта', 'апреля', 'мая', 'ию��я', 'июля', 'августа', 'сентября',
+      'октября', 'ноября', 'декабря'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'март', 'апр.', 'май', 'июнь', 'июль', 'авг.', 'сент.', 'окт.', 'нояб.',
+      'дек.'
+    ],
+    [
+      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь',
+      'ноябрь', 'декабрь'
+    ]
+  ],
+  [['до н.э.', 'н.э.'], ['до н. э.', 'н. э.'], ['до Рождества Христова', 'от Рождества Христова']],
+  1, [6, 0], ['dd.MM.y', 'd MMM y \'г\'.', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'не число', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '₽', 'российский рубль', {
+    'GEL': [u, 'ლ'],
+    'RON': [u, 'L'],
+    'RUB': ['₽'],
+    'RUR': ['р.'],
+    'THB': ['฿'],
+    'TMT': ['ТМТ'],
+    'TWD': ['NT$'],
+    'UAH': ['₴'],
+    'XXX': ['XXXX']
+  },
+  plural_ru
+];
+
+function plural_sh(n: number): number {
+  return 5;
+}
+
+export const locale_sh = [
+  'sr-Latn', [['a', 'p'], ['pre podne', 'po podne'], u], [['pre podne', 'po podne'], u, u],
+  [
+    ['n', 'p', 'u', 's', 'č', 'p', 's'], ['ned', 'pon', 'uto', 'sre', 'čet', 'pet', 'sub'],
+    ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
+    ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'avg', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar',
+      'novembar', 'decembar'
+    ]
+  ],
+  u, [['p.n.e.', 'n.e.'], ['p. n. e.', 'n. e.'], ['pre nove ere', 'nove ere']], 1, [6, 0],
+  ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'RSD', 'Srpski dinar', {
+    'AUD': [u, '$'],
+    'BAM': ['KM'],
+    'BYN': [u, 'r.'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural_sh
+];
+
+function plural_si(n: number): number {
+  let i = Math.floor(Math.abs(n)), f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (n === 0 || n === 1 || i === 0 && f === 1) return 1;
+  return 5;
+}
+
+export const locale_si = [
+  'si', [['පෙ', 'ප'], ['පෙ.ව.', 'ප.ව.'], u], [['පෙ.ව.', 'ප.ව.'], u, u],
+  [
+    ['ඉ', 'ස', 'අ', 'බ', 'බ්\u200dර', 'සි', 'සෙ'],
+    ['ඉරිදා', 'සඳුදා', 'අඟහ', 'බදාදා', 'බ්\u200dරහස්', 'සිකු', 'සෙන'],
+    ['ඉරිදා', 'සඳුදා', 'අඟහරුවාදා', 'බදාදා', 'බ්\u200dරහස්පතින්දා', 'සිකුරාදා', 'සෙනසුරාදා'],
+    ['ඉරි', 'සඳු', 'අඟ', 'බදා', 'බ්\u200dරහ', 'සිකු', 'සෙන']
+  ],
+  u,
+  [
+    ['ජ', 'පෙ', 'මා', 'අ', 'මැ', 'ජූ', 'ජූ', 'අ', 'සැ', 'ඔ', 'නෙ', 'දෙ'],
+    ['ජන', 'පෙබ', 'මාර්තු', 'අප්\u200dරේල්', 'මැයි', 'ජූනි', 'ජූලි', 'අගෝ', 'සැප්', 'ඔක්', 'නොවැ', 'දෙසැ'],
+    [
+      'ජනවාරි', 'පෙබරවාරි', 'මාර්තු', 'අප්\u200dරේල්', 'මැයි', 'ජූනි', 'ජූලි', 'අගෝස්තු', 'සැප්තැම්බර්', 'ඔක්තෝබර්',
+      'නොවැම්බර්', 'දෙසැම්බ���්'
+    ]
+  ],
+  [
+    ['ජ', 'පෙ', 'මා', 'අ', 'මැ', 'ජූ', 'ජූ', 'අ', 'සැ', 'ඔ', 'නෙ', 'දෙ'],
+    ['ජන', 'පෙබ', 'මාර්', 'අප්\u200dරේල්', 'මැයි', 'ජූනි', 'ජූලි', 'අගෝ', 'සැප්', 'ඔක්', 'නොවැ', 'දෙසැ'],
+    [
+      'ජනවාරි', 'පෙබරවාරි', 'මාර්තු', 'අප්\u200dරේල්', 'මැයි', 'ජූනි', 'ජූලි', 'අගෝස්තු', 'සැප්තැම්බර්', 'ඔක්තෝබර්',
+      'නොවැම්බර්', 'දෙසැම්බර්'
+    ]
+  ],
+  [['ක්\u200dරි.පූ.', 'ක්\u200dරි.ව.'], u, ['ක්\u200dරිස්තු පූර්ව', 'ක්\u200dරිස්තු වර්ෂ']], 1, [6, 0],
+  ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH.mm', 'HH.mm.ss', 'HH.mm.ss z', 'HH.mm.ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#'], 'රු.', 'ශ්\u200dරී ලංකා රුපියල', {
+    'JPY': ['JP¥', '¥'],
+    'LKR': ['රු.'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'XOF': ['සිෆ්එ']
+  },
+  plural_si
+];
+
+function plural_sk(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (i === Math.floor(i) && i >= 2 && i <= 4 && v === 0) return 3;
+  if (!(v === 0)) return 4;
+  return 5;
+}
+
+export const locale_sk = [
+  'sk', [['AM', 'PM'], u, u], u,
+  [
+    ['n', 'p', 'u', 's', 'š', 'p', 's'], ['ne', 'po', 'ut', 'st', 'št', 'pi', 'so'],
+    ['nedeľa', 'pondelok', 'utorok', 'streda', 'štvrtok', 'piatok', 'sobota'],
+    ['ne', 'po', 'ut', 'st', 'št', 'pi', 'so']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'mar', 'apr', 'máj', 'jún', 'júl', 'aug', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'januára', 'februára', 'marca', 'apríla', 'mája', 'júna', 'júla', 'augusta', 'septembra',
+      'októbra', 'novembra', 'decembra'
+    ]
+  ],
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'mar', 'apr', 'máj', 'jún', 'júl', 'aug', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'január', 'február', 'marec', 'apríl', 'máj', 'jún', 'júl', 'august', 'september', 'október',
+      'november', 'december'
+    ]
+  ],
+  [['pred Kr.', 'po Kr.'], u, ['pred Kristom', 'po Kristovi']], 1, [6, 0],
+  ['d. M. y', u, 'd. MMMM y', 'EEEE d. MMMM y'], ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', u, u], [',', ' ', ';', '%', '+', '-', 'e', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': ['NIS', '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫']
+  },
+  plural_sk
+];
+
+function plural_sl(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 100 === 1) return 1;
+  if (v === 0 && i % 100 === 2) return 2;
+  if (v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 3 && i % 100 <= 4 || !(v === 0))
+    return 3;
+  return 5;
+}
+
+export const locale_sl = [
+  'sl', [['d', 'p'], ['dop.', 'pop.'], u], [['d', 'p'], ['dop.', 'pop.'], ['dopoldne', 'popoldne']],
+  [
+    ['n', 'p', 't', 's', 'č', 'p', 's'], ['ned.', 'pon.', 'tor.', 'sre.', 'čet.', 'pet.', 'sob.'],
+    ['nedelja', 'ponedeljek', 'torek', 'sreda', 'četrtek', 'petek', 'sobota'],
+    ['ned.', 'pon.', 'tor.', 'sre.', 'čet.', 'pet.', 'sob.']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun.', 'jul.', 'avg.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januar', 'februar', 'marec', 'april', 'maj', 'junij', 'julij', 'avgust', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['pr. Kr.', 'po Kr.'], u, ['pred Kristusom', 'po Kristusu']], 1, [6, 0],
+  ['d. MM. yy', 'd. MMM y', 'dd. MMMM y', 'EEEE, dd. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '−', 'e', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'evro', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'GBP': [u, '£'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'XCD': [u, '$']
+  },
+  plural_sl
+];
+
+function plural_sq(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_sq = [
+  'sq', [['e paradites', 'e pasdites'], u, u], [['paradite', 'pasdite'], u, u],
+  [
+    ['D', 'H', 'M', 'M', 'E', 'P', 'Sh'], ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht'],
+    ['e diel', 'e hënë', 'e martë', 'e mërkurë', 'e enjte', 'e premte', 'e shtunë'],
+    ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht']
+  ],
+  [
+    ['D', 'H', 'M', 'M', 'E', 'P', 'Sh'], ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht'],
+    ['E diel', 'E hënë', 'E martë', 'E mërkurë', 'E enjte', 'E premte', 'E shtunë'],
+    ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht']
+  ],
+  [
+    ['j', 'sh', 'm', 'p', 'm', 'q', 'k', 'g', 'sh', 't', 'n', 'dh'],
+    ['jan', 'shk', 'mar', 'pri', 'maj', 'qer', 'korr', 'gush', 'sht', 'tet', 'nën', 'dhj'],
+    [
+      'janar', 'shkurt', 'mars', 'prill', 'maj', 'qershor', 'korrik', 'gusht', 'shtator', 'tetor',
+      'nëntor', 'dhjetor'
+    ]
+  ],
+  [
+    ['J', 'Sh', 'M', 'P', 'M', 'Q', 'K', 'G', 'Sh', 'T', 'N', 'Dh'],
+    ['Jan', 'Shk', 'Mar', 'Pri', 'Maj', 'Qer', 'Korr', 'Gush', 'Sht', 'Tet', 'Nën', 'Dhj'],
+    [
+      'Janar', 'Shkurt', 'Mars', 'Prill', 'Maj', 'Qershor', 'Korrik', 'Gusht', 'Shtator', 'Tetor',
+      'Nëntor', 'Dhjetor'
+    ]
+  ],
+  [['p.K.', 'mb.K.'], u, ['para Krishtit', 'mbas Krishtit']], 1, [6, 0],
+  ['d.M.yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a, z', 'h:mm:ss a, zzzz'], ['{1}, {0}', u, '{1} \'në\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'Lekë', 'Leku shqiptar',
+  {'ALL': ['Lekë'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'USD': ['US$', '$']}, plural_sq
+];
+
+function plural_sr(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export const locale_sr = [
+  'sr', [['a', 'p'], ['пре подне', 'по подне'], u], [['пре подне', 'по подне'], u, u],
+  [
+    ['н', 'п', 'у', 'с', 'ч', 'п', 'с'], ['нед', 'пон', 'уто', 'сре', 'чет', 'пет', 'суб'],
+    ['недеља', 'понедељак', 'уторак', 'среда', 'четвртак', 'петак', 'субота'],
+    ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су']
+  ],
+  u,
+  [
+    ['ј', 'ф', 'м', 'а', 'м', 'ј', 'ј', 'а', 'с', 'о', 'н', 'д'],
+    ['јан', 'феб', 'мар', 'апр', 'мај', 'јун', 'јул', 'авг', 'сеп', 'окт', 'нов', 'дец'],
+    [
+      'јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул', 'август', 'септембар', 'октобар',
+      'новембар', 'децембар'
+    ]
+  ],
+  u, [['п.н.е.', 'н.е.'], ['п. н. е.', 'н. е.'], ['пре нове ере', 'нове ере']], 1, [6, 0],
+  ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'RSD', 'Српски динар', {
+    'AUD': [u, '$'],
+    'BAM': ['КМ', 'KM'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural_sr
+];
+
+function plural_sv(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_sv = [
+  'sv', [['fm', 'em'], u, u], [['fm', 'em'], ['f.m.', 'e.m.'], ['förmiddag', 'eftermiddag']],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['sön', 'mån', 'tis', 'ons', 'tors', 'fre', 'lör'],
+    ['söndag', 'måndag', 'tisdag', 'onsdag', 'torsdag', 'fredag', 'lördag'],
+    ['sö', 'må', 'ti', 'on', 'to', 'fr', 'lö']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mars', 'apr.', 'maj', 'juni', 'juli', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'mars', 'april', 'maj', 'juni', 'juli', 'augusti', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['f.Kr.', 'e.Kr.'], u, ['före Kristus', 'efter Kristus']], 1, [6, 0],
+  ['y-MM-dd', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', '\'kl\'. HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '×10^', '×', '‰', '∞', '¤¤¤', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr', 'svensk krona', {
+    'AUD': [u, '$'],
+    'BBD': ['Bds$', '$'],
+    'BMD': ['BM$', '$'],
+    'BRL': ['BR$', 'R$'],
+    'BSD': ['BS$', '$'],
+    'BZD': ['BZ$', '$'],
+    'CNY': [u, '¥'],
+    'DKK': ['Dkr', 'kr'],
+    'DOP': ['RD$', '$'],
+    'EEK': ['Ekr'],
+    'EGP': ['EG£', 'E£'],
+    'ESP': [],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'IEP': ['IE£'],
+    'INR': [u, '₹'],
+    'ISK': ['Ikr', 'kr'],
+    'JMD': ['JM$', '$'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'NOK': ['Nkr', 'kr'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SEK': ['kr'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural_sv
+];
+
+function plural_sw(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_sw = [
+  'sw', [['am', 'pm'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['Jumapili', 'Jumatatu', 'Jumanne', 'Jumatano', 'Alhamisi', 'Ijumaa', 'Jumamosi'], u, u
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Machi', 'Aprili', 'Mei', 'Juni', 'Julai', 'Agosti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Kristo', 'Baada ya Kristo']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'TSh', 'Shilingi ya Tanzania', {
+    'JPY': ['JP¥', '¥'],
+    'KES': ['Ksh'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'TZS': ['TSh'],
+    'USD': ['US$', '$']
+  },
+  plural_sw
+];
+
+function plural_ta(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_ta = [
+  'ta', [['மு.ப', 'பி.ப'], ['முற்பகல்', 'பிற்பகல்'], u], u,
+  [
+    ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச'],
+    ['ஞாயி.', 'திங்.', 'செவ்.', 'புத.', 'வியா.', 'வெள்.', 'சனி'],
+    ['ஞாயிறு', 'திங்கள்', 'செவ்வாய்', 'புதன்', 'வியாழன்', 'வெள்ளி', 'சனி'],
+    ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச']
+  ],
+  u,
+  [
+    ['ஜ', 'பி', 'மா', 'ஏ', 'மே', 'ஜூ', 'ஜூ', 'ஆ', 'செ', 'அ', 'ந', 'டி'],
+    ['ஜன.', 'பிப்.', 'மார்.', 'ஏப்.', 'மே', 'ஜூன்', 'ஜூலை', 'ஆக.', 'செப்.', 'அக்.', 'நவ.', 'டிச.'],
+    [
+      'ஜனவரி', 'பிப்ரவரி', 'மார்ச்', 'ஏப்ரல்', 'மே', 'ஜூன்', 'ஜூலை', 'ஆகஸ்ட்', 'செப்டம்பர்', 'அக்டோபர்', 'நவம்பர்',
+      'டிசம்பர்'
+    ]
+  ],
+  u, [['கி.மு.', 'கி.பி.'], u, ['கிறிஸ்துவுக்கு முன்', 'அன்னோ டோமினி']], 0, [0, 0],
+  ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['a h:mm', 'a h:mm:ss', 'a h:mm:ss z', 'a h:mm:ss zzzz'], ['{1}, {0}', u, '{1} ’அன்று’ {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], '₹', 'இந்திய ரூபாய்',
+  {'THB': ['฿'], 'TWD': ['NT$']}, plural_ta
+];
+
+function plural_te(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_te = [
+  'te', [['ఉ', 'సా'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['ఆ', 'సో', 'మ', 'బు', 'గు', 'శు', 'శ'], ['ఆది', 'సోమ', 'మంగళ', 'బుధ', 'గురు', 'శుక్ర', 'శని'],
+    ['ఆదివారం', 'సోమవారం', 'మంగళవారం', 'బుధవారం', 'గురువారం', 'శుక్రవారం', 'శనివారం'],
+    ['ఆది', 'సోమ', 'మం', 'బుధ', 'గురు', 'శుక్ర', 'శని']
+  ],
+  u,
+  [
+    ['జ', 'ఫి', 'మా', 'ఏ', 'మే', 'జూ', 'జు', 'ఆ', 'సె', 'అ', 'న', 'డి'],
+    ['జన', 'ఫిబ్ర', 'మార్చి', 'ఏప్రి', 'మే', 'జూన్', 'జులై', 'ఆగ', 'సెప్టెం', 'అక్టో', 'నవం', 'డిసెం'],
+    [
+      'జనవరి', 'ఫిబ్రవరి', 'మార్చి', 'ఏప్రిల్', 'మే', 'జూన్', 'జులై', 'ఆగస్టు', 'సెప్టెంబర్', 'అక్టోబర్', 'నవంబర్',
+      'డిసెంబర్'
+    ]
+  ],
+  u, [['క్రీపూ', 'క్రీశ'], u, ['క్రీస్తు పూర్వం', 'క్రీస్తు శకం']], 0, [0, 0],
+  ['dd-MM-yy', 'd MMM, y', 'd MMMM, y', 'd, MMMM y, EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, '{1} {0}కి', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##0%', '¤#,##,##0.00', '#E0'], '₹', 'రూపాయి',
+  {'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_te
+];
+
+function plural_th(n: number): number {
+  return 5;
+}
+
+export const locale_th = [
+  'th', [['a', 'p'], ['ก่อนเที่ยง', 'หลังเที่ยง'], u], [['ก่อนเที่ยง', 'หลังเที่ยง'], u, u],
+  [
+    ['อา', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส'], ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
+    ['วันอาทิตย์', 'วันจันทร์', 'วันอังคาร', 'วันพุธ', 'วันพฤหัสบดี', 'วันศุกร์', 'วันเสาร์'],
+    ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.']
+  ],
+  u,
+  [
+    [
+      'ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.',
+      'ธ.ค.'
+    ],
+    u,
+    [
+      'มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนาย���', 'กรกฎาคม', 'สิงหาคม', 'กันยายน',
+      'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'
+    ]
+  ],
+  u, [['ก่อน ค.ศ.', 'ค.ศ.'], ['ปีก่อน ค.ศ.', 'ค.ศ.'], ['ปีก่อนคริสต์ศักราช', 'คริสต์ศักราช']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM G y', 'EEEEที่ d MMMM G y'],
+  ['HH:mm', 'HH:mm:ss', 'H นาฬิกา mm นาที ss วินาที z', 'H นาฬิกา mm นาที ss วินาที zzzz'],
+  ['{1} {0}', u, u, u], ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'THB', 'บาท',
+  {'AUD': ['AU$', '$'], 'TWD': ['NT$'], 'USD': ['US$', '$']}, plural_th
+];
+
+function plural_tl(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && (i === 1 || i === 2 || i === 3) ||
+      v === 0 && !(i % 10 === 4 || i % 10 === 6 || i % 10 === 9) ||
+      !(v === 0) && !(f % 10 === 4 || f % 10 === 6 || f % 10 === 9))
+    return 1;
+  return 5;
+}
+
+export const locale_tl = [
+  'fil', [['am', 'pm'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['Lin', 'Lun', 'Mar', 'Miy', 'Huw', 'Biy', 'Sab'], u,
+    ['Linggo', 'Lunes', 'Martes', 'Miyerkules', 'Huwebes', 'Biyernes', 'Sabado'],
+    ['Li', 'Lu', 'Ma', 'Mi', 'Hu', 'Bi', 'Sa']
+  ],
+  u,
+  [
+    ['Ene', 'Peb', 'Mar', 'Abr', 'May', 'Hun', 'Hul', 'Ago', 'Set', 'Okt', 'Nob', 'Dis'], u,
+    [
+      'Enero', 'Pebrero', 'Marso', 'Abril', 'Mayo', 'Hunyo', 'Hulyo', 'Agosto', 'Setyembre',
+      'Oktubre', 'Nobyembre', 'Disyembre'
+    ]
+  ],
+  [
+    ['E', 'P', 'M', 'A', 'M', 'Hun', 'Hul', 'Ago', 'Set', 'Okt', 'Nob', 'Dis'],
+    ['Ene', 'Peb', 'Mar', 'Abr', 'May', 'Hun', 'Hul', 'Ago', 'Set', 'Okt', 'Nob', 'Dis'],
+    [
+      'Enero', 'Pebrero', 'Marso', 'Abril', 'Mayo', 'Hunyo', 'Hulyo', 'Agosto', 'Setyembre',
+      'Oktubre', 'Nobyembre', 'Disyembre'
+    ]
+  ],
+  [['BC', 'AD'], u, ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'nang\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₱', 'Piso ng Pilipinas',
+  {'PHP': ['₱'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_tl
+];
+
+function plural_tr(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_tr = [
+  'tr', [['öö', 'ös'], ['ÖÖ', 'ÖS'], u], [['ÖÖ', 'ÖS'], u, u],
+  [
+    ['P', 'P', 'S', 'Ç', 'P', 'C', 'C'], ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
+    ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
+    ['Pa', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct']
+  ],
+  u,
+  [
+    ['O', 'Ş', 'M', 'N', 'M', 'H', 'T', 'A', 'E', 'E', 'K', 'A'],
+    ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
+    [
+      'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim',
+      'Kasım', 'Aralık'
+    ]
+  ],
+  u, [['MÖ', 'MS'], u, ['Milattan Önce', 'Milattan Sonra']], 1, [6, 0],
+  ['d.MM.y', 'd MMM y', 'd MMMM y', 'd MMMM y EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '%#,##0', '¤#,##0.00', '#E0'], '₺', 'Türk Lirası',
+  {'AUD': ['AU$', '$'], 'RON': [u, 'L'], 'THB': ['฿'], 'TRY': ['₺'], 'TWD': ['NT$']}, plural_tr
+];
+
+function plural_uk(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && i % 10 === 0 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export const locale_uk = [
+  'uk', [['дп', 'пп'], u, u], u,
+  [
+    ['Н', 'П', 'В', 'С', 'Ч', 'П', 'С'], ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    ['неділя', 'понеділок', 'вівторок', 'середа', 'четвер', 'пʼятниця', 'субота'],
+    ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  u,
+  [
+    ['с', 'л', 'б', 'к', 'т', 'ч', 'л', 'с', 'в', 'ж', 'л', 'г'],
+    [
+      'січ.', 'лют.', 'бер.', 'квіт.', 'трав.', 'черв.', 'лип.', 'серп.', 'вер.', 'жовт.', 'лист.',
+      'груд.'
+    ],
+    [
+      'січня', 'лютого', 'березня', 'квітня', 'травня', 'червня', 'липня', 'серпня', 'вересня',
+      'жовтня', 'листопада', 'грудня'
+    ]
+  ],
+  [
+    ['С', 'Л', 'Б', 'К', 'Т', 'Ч', 'Л', 'С', 'В', 'Ж', 'Л', 'Г'],
+    ['січ', 'лют', 'бер', 'кві', 'тра', 'чер', 'лип', 'сер', 'вер', 'жов', 'лис', 'гру'],
+    [
+      'січень', 'лютий', 'березень', 'квітень', 'травень', 'червень', 'липень', 'серпень',
+      'вересень', 'жовтень', 'листопад', 'грудень'
+    ]
+  ],
+  [['до н.е.', 'н.е.'], ['до н. е.', 'н. е.'], ['до нашої ери', 'нашої ери']], 1, [6, 0],
+  ['dd.MM.yy', 'd MMM y \'р\'.', 'd MMMM y \'р\'.', 'EEEE, d MMMM y \'р\'.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'о\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'Е', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '₴', 'українська гривня', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'UAH': ['₴'],
+    'UAK': ['крб.'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$']
+  },
+  plural_uk
+];
+
+function plural_ur(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export const locale_ur = [
+  'ur', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['اتوار', 'پیر', 'منگل', 'بدھ', 'جمعرات', 'جمعہ', 'ہفتہ'],
+    u, u
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'جنوری', 'فروری', 'مارچ', 'اپریل', 'مئی', 'جون', 'جولائی', 'اگست', 'ستمبر', 'اکتوبر', 'نومبر',
+      'دسمبر'
+    ],
+    u
+  ],
+  u, [['قبل مسیح', 'عیسوی'], u, u], 0, [6, 0],
+  ['d/M/yy', 'd MMM، y', 'd MMMM، y', 'EEEE، d MMMM، y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'Rs', 'پاکستانی روپیہ',
+  {'JPY': ['JP¥', '¥'], 'PKR': ['Rs'], 'THB': ['฿'], 'TWD': ['NT$']}, plural_ur
+];
+
+function plural_uz(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export const locale_uz = [
+  'uz', [['TO', 'TK'], u, u], u,
+  [
+    ['Y', 'D', 'S', 'C', 'P', 'J', 'S'], ['Yak', 'Dush', 'Sesh', 'Chor', 'Pay', 'Jum', 'Shan'],
+    ['yakshanba', 'dushanba', 'seshanba', 'chorshanba', 'payshanba', 'juma', 'shanba'],
+    ['Ya', 'Du', 'Se', 'Ch', 'Pa', 'Ju', 'Sh']
+  ],
+  u,
+  [
+    ['Y', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avg', 'sen', 'okt', 'noy', 'dek'],
+    [
+      'yanvar', 'fevral', 'mart', 'aprel', 'may', 'iyun', 'iyul', 'avgust', 'sentabr', 'oktabr',
+      'noyabr', 'dekabr'
+    ]
+  ],
+  [
+    ['Y', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    ['Yan', 'Fev', 'Mar', 'Apr', 'May', 'Iyn', 'Iyl', 'Avg', 'Sen', 'Okt', 'Noy', 'Dek'],
+    [
+      'Yanvar', 'Fevral', 'Mart', 'Aprel', 'May', 'Iyun', 'Iyul', 'Avgust', 'Sentabr', 'Oktabr',
+      'Noyabr', 'Dekabr'
+    ]
+  ],
+  [['m.a.', 'milodiy'], u, ['miloddan avvalgi', 'milodiy']], 1, [6, 0],
+  ['dd/MM/yy', 'd-MMM, y', 'd-MMMM, y', 'EEEE, d-MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'H:mm:ss (z)', 'H:mm:ss (zzzz)'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'son emas', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'soʻm', 'O‘zbekiston so‘mi',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'UZS': ['soʻm']}, plural_uz
+];
+
+function plural_vi(n: number): number {
+  return 5;
+}
+
+export const locale_vi = [
+  'vi', [['s', 'c'], ['SA', 'CH'], u], [['SA', 'CH'], u, u],
+  [
+    ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
+    ['CN', 'Th 2', 'Th 3', 'Th 4', 'Th 5', 'Th 6', 'Th 7'],
+    ['Chủ Nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'],
+    ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'thg 1', 'thg 2', 'thg 3', 'thg 4', 'thg 5', 'thg 6', 'thg 7', 'thg 8', 'thg 9', 'thg 10',
+      'thg 11', 'thg 12'
+    ],
+    [
+      'tháng 1', 'tháng 2', 'tháng 3', 'tháng 4', 'tháng 5', 'tháng 6', 'tháng 7', 'tháng 8',
+      'tháng 9', 'tháng 10', 'tháng 11', 'tháng 12'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'Thg 1', 'Thg 2', 'Thg 3', 'Thg 4', 'Thg 5', 'Thg 6', 'Thg 7', 'Thg 8', 'Thg 9', 'Thg 10',
+      'Thg 11', 'Thg 12'
+    ],
+    [
+      'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8',
+      'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'
+    ]
+  ],
+  [['tr. CN', 'sau CN'], ['Trước CN', 'sau CN'], u], 1, [6, 0],
+  ['dd/MM/y', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{0}, {1}', u, '{0} {1}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '₫', 'Đồng Việt Nam',
+  {'AUD': ['AU$', '$'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']},
+  plural_vi
+];
+
+function plural_zh(n: number): number {
+  return 5;
+}
+
+export const locale_zh = [
+  'zh', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    [
+      '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月',
+      '十二月'
+    ]
+  ],
+  u, [['公元前', '公元'], u, u], 0, [6, 0], ['y/M/d', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'z ah:mm:ss', 'zzzz ah:mm:ss'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '￥', '人民币', {
+    'AUD': ['AU$', '$'],
+    'CNY': ['￥', '¥'],
+    'ILR': ['ILS'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': ['￦', '₩'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural_zh
+];
+
+function plural_zh_CN(n: number): number {
+  return 5;
+}
+
+export const locale_zh_CN = [
+  'zh-Hans', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    ['星期日', '星期一', '��期二', '星期三', '星期四', '星期五', '星期六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    [
+      '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月',
+      '十二月'
+    ]
+  ],
+  u, [['公元前', '公元'], u, u], 0, [6, 0], ['y/M/d', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'z ah:mm:ss', 'zzzz ah:mm:ss'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '￥', '人民币', {
+    'AUD': ['AU$', '$'],
+    'CNY': ['￥', '¥'],
+    'ILR': ['ILS'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': ['￦', '₩'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural_zh_CN
+];
+
+function plural_zh_HK(n: number): number {
+  return 5;
+}
+
+export const locale_zh_HK = [
+  'zh-Hant-HK', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['日', '一', '二', '三', '四', '五', '六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], u
+  ],
+  u, [['西元前', '西元'], ['公元前', '公元'], u], 0, [6, 0],
+  ['d/M/y', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'ah:mm:ss [z]', 'ah:mm:ss [zzzz]'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', '非數值', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'HK$', '港元',
+  {'AUD': ['AU$', '$'], 'RON': [u, 'L'], 'USD': ['US$', '$']}, plural_zh_HK
+];
+
+function plural_zh_TW(n: number): number {
+  return 5;
+}
+
+export const locale_zh_TW = [
+  'zh-Hant', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['日', '一', '二', '三', '四', '五', '六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], u
+  ],
+  u, [['西元前', '西元'], u, u], 0, [6, 0], ['y/M/d', 'y年M月d日', u, 'y年M月d日 EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'ah:mm:ss [z]', 'ah:mm:ss [zzzz]'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', '非數值', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', '新台幣',
+  {'AUD': ['AU$', '$'], 'KRW': ['￦', '₩'], 'RON': [u, 'L'], 'TWD': ['$'], 'USD': ['US$', '$']},
+  plural_zh_TW
+];
+
+function plural_zu(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export const locale_zu = [
+  'zu', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'B', 'T', 'S', 'H', 'M'], ['Son', 'Mso', 'Bil', 'Tha', 'Sin', 'Hla', 'Mgq'],
+    ['ISonto', 'UMsombuluko', 'ULwesibili', 'ULwesithathu', 'ULwesine', 'ULwesihlanu', 'UMgqibelo'],
+    ['Son', 'Mso', 'Bil', 'Tha', 'Sin', 'Hla', 'Mgq']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'E', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mas', 'Eph', 'Mey', 'Jun', 'Jul', 'Aga', 'Sep', 'Okt', 'Nov', 'Dis'],
+    [
+      'Januwari', 'Februwari', 'Mashi', 'Ephreli', 'Meyi', 'Juni', 'Julayi', 'Agasti', 'Septhemba',
+      'Okthoba', 'Novemba', 'Disemba'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mas', 'Eph', 'Mey', 'Jun', 'Jul', 'Aga', 'Sep', 'Okt', 'Nov', 'Dis'],
+    [
+      'Januwari', 'Februwari', 'Mashi', 'Ephreli', 'Meyi', 'Juni', 'Julayi', 'Agasti', 'Septhemba',
+      'Okthoba', 'Novemba', 'Disemba'
+    ]
+  ],
+  [['BC', 'AD'], u, u], 0, [6, 0], ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'R', 'i-South African Rand', {
+    'BYN': [u, 'P.'],
+    'DKK': [u, 'Kr'],
+    'HRK': [u, 'Kn'],
+    'ISK': [u, 'Kr'],
+    'JPY': ['JP¥', '¥'],
+    'NOK': [u, 'Kr'],
+    'PLN': [u, 'Zł'],
+    'SEK': [u, 'Kr'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'ZAR': ['R']
+  },
+  plural_zu
+];
+
+
+let l: any;
+
+switch (goog.LOCALE) {
+  case 'af':
+    l = locale_af;
+    break;
+  case 'am':
+    l = locale_am;
+    break;
+  case 'ar':
+    l = locale_ar;
+    break;
+  case 'ar-DZ':
+  case 'ar_DZ':
+    l = locale_ar_DZ;
+    break;
+  case 'az':
+    l = locale_az;
+    break;
+  case 'be':
+    l = locale_be;
+    break;
+  case 'bg':
+    l = locale_bg;
+    break;
+  case 'bn':
+    l = locale_bn;
+    break;
+  case 'br':
+    l = locale_br;
+    break;
+  case 'bs':
+    l = locale_bs;
+    break;
+  case 'ca':
+    l = locale_ca;
+    break;
+  case 'chr':
+    l = locale_chr;
+    break;
+  case 'cs':
+    l = locale_cs;
+    break;
+  case 'cy':
+    l = locale_cy;
+    break;
+  case 'da':
+    l = locale_da;
+    break;
+  case 'de':
+    l = locale_de;
+    break;
+  case 'de-AT':
+  case 'de_AT':
+    l = locale_de_AT;
+    break;
+  case 'de-CH':
+  case 'de_CH':
+    l = locale_de_CH;
+    break;
+  case 'el':
+    l = locale_el;
+    break;
+  case 'en-AU':
+  case 'en_AU':
+    l = locale_en_AU;
+    break;
+  case 'en-CA':
+  case 'en_CA':
+    l = locale_en_CA;
+    break;
+  case 'en-GB':
+  case 'en_GB':
+    l = locale_en_GB;
+    break;
+  case 'en-IE':
+  case 'en_IE':
+    l = locale_en_IE;
+    break;
+  case 'en-IN':
+  case 'en_IN':
+    l = locale_en_IN;
+    break;
+  case 'en-SG':
+  case 'en_SG':
+    l = locale_en_SG;
+    break;
+  case 'en-ZA':
+  case 'en_ZA':
+    l = locale_en_ZA;
+    break;
+  case 'es':
+    l = locale_es;
+    break;
+  case 'es-419':
+  case 'es_419':
+    l = locale_es_419;
+    break;
+  case 'es-MX':
+  case 'es_MX':
+    l = locale_es_MX;
+    break;
+  case 'es-US':
+  case 'es_US':
+    l = locale_es_US;
+    break;
+  case 'et':
+    l = locale_et;
+    break;
+  case 'eu':
+    l = locale_eu;
+    break;
+  case 'fa':
+    l = locale_fa;
+    break;
+  case 'fi':
+    l = locale_fi;
+    break;
+  case 'fr':
+    l = locale_fr;
+    break;
+  case 'fr-CA':
+  case 'fr_CA':
+    l = locale_fr_CA;
+    break;
+  case 'ga':
+    l = locale_ga;
+    break;
+  case 'gl':
+    l = locale_gl;
+    break;
+  case 'gsw':
+    l = locale_gsw;
+    break;
+  case 'gu':
+    l = locale_gu;
+    break;
+  case 'haw':
+    l = locale_haw;
+    break;
+  case 'hi':
+    l = locale_hi;
+    break;
+  case 'hr':
+    l = locale_hr;
+    break;
+  case 'hu':
+    l = locale_hu;
+    break;
+  case 'hy':
+    l = locale_hy;
+    break;
+  case 'in':
+  case 'id':
+    l = locale_in;
+    break;
+  case 'is':
+    l = locale_is;
+    break;
+  case 'it':
+    l = locale_it;
+    break;
+  case 'iw':
+  case 'he':
+    l = locale_iw;
+    break;
+  case 'ja':
+    l = locale_ja;
+    break;
+  case 'ka':
+    l = locale_ka;
+    break;
+  case 'kk':
+    l = locale_kk;
+    break;
+  case 'km':
+    l = locale_km;
+    break;
+  case 'kn':
+    l = locale_kn;
+    break;
+  case 'ko':
+    l = locale_ko;
+    break;
+  case 'ky':
+    l = locale_ky;
+    break;
+  case 'ln':
+    l = locale_ln;
+    break;
+  case 'lo':
+    l = locale_lo;
+    break;
+  case 'lt':
+    l = locale_lt;
+    break;
+  case 'lv':
+    l = locale_lv;
+    break;
+  case 'mk':
+    l = locale_mk;
+    break;
+  case 'ml':
+    l = locale_ml;
+    break;
+  case 'mn':
+    l = locale_mn;
+    break;
+  case 'mo':
+  case 'ro-MD':
+  case 'ro_MD':
+    l = locale_mo;
+    break;
+  case 'mr':
+    l = locale_mr;
+    break;
+  case 'ms':
+    l = locale_ms;
+    break;
+  case 'mt':
+    l = locale_mt;
+    break;
+  case 'my':
+    l = locale_my;
+    break;
+  case 'ne':
+    l = locale_ne;
+    break;
+  case 'nl':
+    l = locale_nl;
+    break;
+  case 'no':
+  case 'nb':
+  case 'no-NO':
+  case 'no_NO':
+    l = locale_no;
+    break;
+  case 'or':
+    l = locale_or;
+    break;
+  case 'pa':
+    l = locale_pa;
+    break;
+  case 'pl':
+    l = locale_pl;
+    break;
+  case 'pt':
+  case 'pt-BR':
+  case 'pt_BR':
+    l = locale_pt;
+    break;
+  case 'pt-PT':
+  case 'pt_PT':
+    l = locale_pt_PT;
+    break;
+  case 'ro':
+    l = locale_ro;
+    break;
+  case 'ru':
+    l = locale_ru;
+    break;
+  case 'sh':
+  case 'sr-Latn':
+  case 'sr_Latn':
+    l = locale_sh;
+    break;
+  case 'si':
+    l = locale_si;
+    break;
+  case 'sk':
+    l = locale_sk;
+    break;
+  case 'sl':
+    l = locale_sl;
+    break;
+  case 'sq':
+    l = locale_sq;
+    break;
+  case 'sr':
+    l = locale_sr;
+    break;
+  case 'sv':
+    l = locale_sv;
+    break;
+  case 'sw':
+    l = locale_sw;
+    break;
+  case 'ta':
+    l = locale_ta;
+    break;
+  case 'te':
+    l = locale_te;
+    break;
+  case 'th':
+    l = locale_th;
+    break;
+  case 'tl':
+  case 'fil':
+    l = locale_tl;
+    break;
+  case 'tr':
+    l = locale_tr;
+    break;
+  case 'uk':
+    l = locale_uk;
+    break;
+  case 'ur':
+    l = locale_ur;
+    break;
+  case 'uz':
+    l = locale_uz;
+    break;
+  case 'vi':
+    l = locale_vi;
+    break;
+  case 'zh':
+    l = locale_zh;
+    break;
+  case 'zh-CN':
+  case 'zh_CN':
+  case 'zh-Hans-CN':
+  case 'zh_Hans_CN':
+  case 'zh-Hans':
+  case 'zh_Hans':
+    l = locale_zh_CN;
+    break;
+  case 'zh-HK':
+  case 'zh_HK':
+  case 'zh-Hant-HK':
+  case 'zh_Hant_HK':
+    l = locale_zh_HK;
+    break;
+  case 'zh-TW':
+  case 'zh_TW':
+  case 'zh-Hant-TW':
+  case 'zh_Hant_TW':
+  case 'zh-Hant':
+  case 'zh_Hant':
+    l = locale_zh_TW;
+    break;
+  case 'zu':
+    l = locale_zu;
+    break;
+}
+
+if (l) {
+  registerLocaleData(l, goog.LOCALE);
+}
diff --git a/packages/common/locales/cs.ts b/packages/common/locales/cs.ts
new file mode 100644
index 000000000000..db3dc78450dc
--- /dev/null
+++ b/packages/common/locales/cs.ts
@@ -0,0 +1,67 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (i === Math.floor(i) && i >= 2 && i <= 4 && v === 0) return 3;
+  if (!(v === 0)) return 4;
+  return 5;
+}
+
+export default [
+  'cs', [['dop.', 'odp.'], u, u], u,
+  [
+    ['N', 'P', 'Ú', 'S', 'Č', 'P', 'S'], ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
+    ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'],
+    ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['led', 'úno', 'bře', 'dub', 'kvě', 'čvn', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
+    [
+      'ledna', 'února', 'března', 'dubna', 'května', 'června', 'července', 'srpna', 'září',
+      'října', 'listopadu', 'prosince'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['led', 'úno', 'bře', 'dub', 'kvě', 'čvn', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
+    [
+      'leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen', 'září',
+      'říjen', 'listopad', 'prosinec'
+    ]
+  ],
+  [
+    ['př.n.l.', 'n.l.'], ['př. n. l.', 'n. l.'],
+    ['před naším letopočtem', 'našeho letopočtu']
+  ],
+  1, [6, 0], ['dd.MM.yy', 'd. M. y', 'd. MMMM y', 'EEEE d. MMMM y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'Kč', 'česká koruna', {
+    'AUD': ['AU$', '$'],
+    'CSK': ['Kčs'],
+    'CZK': ['Kč'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': ['JP¥', '¥'],
+    'RON': [u, 'L'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫'],
+    'XEU': ['ECU']
+  },
+  plural
+];
diff --git a/packages/common/locales/cu.ts b/packages/common/locales/cu.ts
new file mode 100644
index 000000000000..d92aff3b2c4d
--- /dev/null
+++ b/packages/common/locales/cu.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'cu', [['AM', 'PM'], u, u], u,
+  [['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], u, u], u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['M01', 'M02', 'M03', 'M04', 'M05', 'M06', 'M07', 'M08', 'M09', 'M10', 'M11', 'M12'], u
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₽', 'RUB',
+  {'JPY': ['JP¥', '¥'], 'RUB': ['₽'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/cy.ts b/packages/common/locales/cy.ts
new file mode 100644
index 000000000000..c453f467cf7d
--- /dev/null
+++ b/packages/common/locales/cy.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n === 3) return 3;
+  if (n === 6) return 4;
+  return 5;
+}
+
+export default [
+  'cy', [['b', 'h'], ['yb', 'yh'], u], [['yb', 'yh'], u, u],
+  [
+    ['S', 'Ll', 'M', 'M', 'I', 'G', 'S'], ['Sul', 'Llun', 'Maw', 'Mer', 'Iau', 'Gwen', 'Sad'],
+    [
+      'Dydd Sul', 'Dydd Llun', 'Dydd Mawrth', 'Dydd Mercher', 'Dydd Iau', 'Dydd Gwener',
+      'Dydd Sadwrn'
+    ],
+    ['Su', 'Ll', 'Ma', 'Me', 'Ia', 'Gw', 'Sa']
+  ],
+  [
+    ['S', 'Ll', 'M', 'M', 'I', 'G', 'S'], ['Sul', 'Llun', 'Maw', 'Mer', 'Iau', 'Gwe', 'Sad'],
+    [
+      'Dydd Sul', 'Dydd Llun', 'Dydd Mawrth', 'Dydd Mercher', 'Dydd Iau', 'Dydd Gwener',
+      'Dydd Sadwrn'
+    ],
+    ['Su', 'Ll', 'Ma', 'Me', 'Ia', 'Gw', 'Sa']
+  ],
+  [
+    ['I', 'Ch', 'M', 'E', 'M', 'M', 'G', 'A', 'M', 'H', 'T', 'Rh'],
+    ['Ion', 'Chwef', 'Maw', 'Ebrill', 'Mai', 'Meh', 'Gorff', 'Awst', 'Medi', 'Hyd', 'Tach', 'Rhag'],
+    [
+      'Ionawr', 'Chwefror', 'Mawrth', 'Ebrill', 'Mai', 'Mehefin', 'Gorffennaf', 'Awst', 'Medi',
+      'Hydref', 'Tachwedd', 'Rhagfyr'
+    ]
+  ],
+  [
+    ['I', 'Ch', 'M', 'E', 'M', 'M', 'G', 'A', 'M', 'H', 'T', 'Rh'],
+    ['Ion', 'Chw', 'Maw', 'Ebr', 'Mai', 'Meh', 'Gor', 'Awst', 'Medi', 'Hyd', 'Tach', 'Rhag'],
+    [
+      'Ionawr', 'Chwefror', 'Mawrth', 'Ebrill', 'Mai', 'Mehefin', 'Gorffennaf', 'Awst', 'Medi',
+      'Hydref', 'Tachwedd', 'Rhagfyr'
+    ]
+  ],
+  [['C', 'O'], ['CC', 'OC'], ['Cyn Crist', 'Oed Crist']], 1, [6, 0],
+  ['dd/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'am\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'Punt Prydain', {
+    'BDT': [u, 'TK'],
+    'BWP': [],
+    'HKD': ['HK$'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': [u, '₩'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'ZAR': [],
+    'ZMW': []
+  },
+  plural
+];
diff --git a/packages/common/locales/da-GL.ts b/packages/common/locales/da-GL.ts
new file mode 100644
index 000000000000..2d02cf3fd126
--- /dev/null
+++ b/packages/common/locales/da-GL.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)),
+      t = parseInt(n.toString().replace(/^[^.]*\.?|0+$/g, ''), 10) || 0;
+  if (n === 1 || !(t === 0) && (i === 0 || i === 1)) return 1;
+  return 5;
+}
+
+export default [
+  'da-GL', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['søn.', 'man.', 'tir.', 'ons.', 'tor.', 'fre.', 'lør.'],
+    ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'],
+    ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø']
+  ],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['søn', 'man', 'tir', 'ons', 'tor', 'fre', 'lør'],
+    ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'],
+    ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januar', 'februar', 'marts', 'april', 'maj', 'juni', 'juli', 'august', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['fKr', 'eKr'], ['f.Kr.', 'e.Kr.'], u], 1, [6, 0],
+  ['dd/MM/y', 'd. MMM y', 'd. MMMM y', 'EEEE \'den\' d. MMMM y'],
+  ['HH.mm', 'HH.mm.ss', 'HH.mm.ss z', 'HH.mm.ss zzzz'], ['{1} {0}', u, '{1} \'kl\'. {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr.', 'dansk krone', {
+    'AUD': ['AU$', '$'],
+    'DKK': ['kr.'],
+    'ISK': [u, 'kr.'],
+    'JPY': ['JP¥', '¥'],
+    'NOK': [u, 'kr.'],
+    'RON': [u, 'L'],
+    'SEK': [u, 'kr.'],
+    'THB': ['฿'],
+    'TWD': ['NT$']
+  },
+  plural
+];
diff --git a/packages/common/locales/da.ts b/packages/common/locales/da.ts
new file mode 100644
index 000000000000..a1452f33f2b8
--- /dev/null
+++ b/packages/common/locales/da.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)),
+      t = parseInt(n.toString().replace(/^[^.]*\.?|0+$/g, ''), 10) || 0;
+  if (n === 1 || !(t === 0) && (i === 0 || i === 1)) return 1;
+  return 5;
+}
+
+export default [
+  'da', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['søn.', 'man.', 'tir.', 'ons.', 'tor.', 'fre.', 'lør.'],
+    ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'],
+    ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø']
+  ],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['søn', 'man', 'tir', 'ons', 'tor', 'fre', 'lør'],
+    ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'],
+    ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januar', 'februar', 'marts', 'april', 'maj', 'juni', 'juli', 'august', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['fKr', 'eKr'], ['f.Kr.', 'e.Kr.'], u], 1, [6, 0],
+  ['dd/MM/y', 'd. MMM y', 'd. MMMM y', 'EEEE \'den\' d. MMMM y'],
+  ['HH.mm', 'HH.mm.ss', 'HH.mm.ss z', 'HH.mm.ss zzzz'], ['{1} {0}', u, '{1} \'kl\'. {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr.', 'dansk krone', {
+    'AUD': ['AU$', '$'],
+    'DKK': ['kr.'],
+    'ISK': [u, 'kr.'],
+    'JPY': ['JP¥', '¥'],
+    'NOK': [u, 'kr.'],
+    'RON': [u, 'L'],
+    'SEK': [u, 'kr.'],
+    'THB': ['฿'],
+    'TWD': ['NT$']
+  },
+  plural
+];
diff --git a/packages/common/locales/dav.ts b/packages/common/locales/dav.ts
new file mode 100644
index 000000000000..5e56825f7726
--- /dev/null
+++ b/packages/common/locales/dav.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'dav', [['Luma lwa K', 'luma lwa p'], u, u], u,
+  [
+    ['J', 'J', 'K', 'K', 'K', 'K', 'N'], ['Jum', 'Jim', 'Kaw', 'Kad', 'Kan', 'Kas', 'Ngu'],
+    [
+      'Ituku ja jumwa', 'Kuramuka jimweri', 'Kuramuka kawi', 'Kuramuka kadadu', 'Kuramuka kana',
+      'Kuramuka kasanu', 'Kifula nguwo'
+    ],
+    ['Jum', 'Jim', 'Kaw', 'Kad', 'Kan', 'Kas', 'Ngu']
+  ],
+  u,
+  [
+    ['I', 'K', 'K', 'K', 'K', 'K', 'M', 'W', 'I', 'I', 'I', 'I'],
+    ['Imb', 'Kaw', 'Kad', 'Kan', 'Kas', 'Kar', 'Mfu', 'Wun', 'Ike', 'Iku', 'Imw', 'Iwi'],
+    [
+      'Mori ghwa imbiri', 'Mori ghwa kawi', 'Mori ghwa kadadu', 'Mori ghwa kana',
+      'Mori ghwa kasanu', 'Mori ghwa karandadu', 'Mori ghwa mfungade', 'Mori ghwa wunyanya',
+      'Mori ghwa ikenda', 'Mori ghwa ikumi', 'Mori ghwa ikumi na imweri', 'Mori ghwa ikumi na iwi'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Kristo', 'Baada ya Kristo']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Shilingi ya Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/de-AT.ts b/packages/common/locales/de-AT.ts
new file mode 100644
index 000000000000..5898204bd6f0
--- /dev/null
+++ b/packages/common/locales/de-AT.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'de-AT', [['vm.', 'nm.'], ['vorm.', 'nachm.'], u], u,
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Jän.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.',
+      'Dez.'
+    ],
+    [
+      'Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jän', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'um\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':', u, '.'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], '€', 'Euro', {
+    'ATS': ['öS'],
+    'AUD': ['AU$', '$'],
+    'BGM': ['BGK'],
+    'BGO': ['BGJ'],
+    'CUC': [u, 'Cub$'],
+    'DEM': ['DM'],
+    'FKP': [u, 'Fl£'],
+    'GNF': [u, 'F.G.'],
+    'KMF': [u, 'FC'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'F.Rw'],
+    'SYP': [],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'ZMW': [u, 'K']
+  },
+  plural
+];
diff --git a/packages/common/locales/de-BE.ts b/packages/common/locales/de-BE.ts
new file mode 100644
index 000000000000..176322c077ab
--- /dev/null
+++ b/packages/common/locales/de-BE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'de-BE', [['vm.', 'nm.'], ['vorm.', 'nachm.'], u], [['vorm.', 'nachm.'], u, u],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'
+    ],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'um\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro', {
+    'ATS': ['öS'],
+    'AUD': ['AU$', '$'],
+    'BGM': ['BGK'],
+    'BGO': ['BGJ'],
+    'CUC': [u, 'Cub$'],
+    'DEM': ['DM'],
+    'FKP': [u, 'Fl£'],
+    'GNF': [u, 'F.G.'],
+    'KMF': [u, 'FC'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'F.Rw'],
+    'SYP': [],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'ZMW': [u, 'K']
+  },
+  plural
+];
diff --git a/packages/common/locales/de-CH.ts b/packages/common/locales/de-CH.ts
new file mode 100644
index 000000000000..30e8e2f2367f
--- /dev/null
+++ b/packages/common/locales/de-CH.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'de-CH', [['vm.', 'nm.'], ['vorm.', 'nachm.'], u], [['vorm.', 'nachm.'], u, u],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'
+    ],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'um\' {0}', u],
+  ['.', '’', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤-#,##0.00', '#E0'], 'CHF', 'Schweizer Franken', {
+    'ATS': ['öS'],
+    'AUD': ['AU$', '$'],
+    'BGM': ['BGK'],
+    'BGO': ['BGJ'],
+    'CUC': [u, 'Cub$'],
+    'DEM': ['DM'],
+    'EUR': [],
+    'FKP': [u, 'Fl£'],
+    'GNF': [u, 'F.G.'],
+    'KMF': [u, 'FC'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'F.Rw'],
+    'SYP': [],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'ZMW': [u, 'K']
+  },
+  plural
+];
diff --git a/packages/common/locales/de-IT.ts b/packages/common/locales/de-IT.ts
new file mode 100644
index 000000000000..6ee8cf979dba
--- /dev/null
+++ b/packages/common/locales/de-IT.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'de-IT', [['vm.', 'nm.'], ['vorm.', 'nachm.'], u], [['vorm.', 'nachm.'], u, u],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Jän.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.',
+      'Dez.'
+    ],
+    [
+      'Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jän', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'um\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro', {
+    'ATS': ['öS'],
+    'AUD': ['AU$', '$'],
+    'BGM': ['BGK'],
+    'BGO': ['BGJ'],
+    'CUC': [u, 'Cub$'],
+    'DEM': ['DM'],
+    'FKP': [u, 'Fl£'],
+    'GNF': [u, 'F.G.'],
+    'KMF': [u, 'FC'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'F.Rw'],
+    'SYP': [],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'ZMW': [u, 'K']
+  },
+  plural
+];
diff --git a/packages/common/locales/de-LI.ts b/packages/common/locales/de-LI.ts
new file mode 100644
index 000000000000..47d8a73f345c
--- /dev/null
+++ b/packages/common/locales/de-LI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'de-LI', [['vm.', 'nm.'], ['vorm.', 'nachm.'], u], u,
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'
+    ],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'um\' {0}', u],
+  ['.', '’', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'CHF', 'Schweizer Franken', {
+    'ATS': ['öS'],
+    'AUD': ['AU$', '$'],
+    'BGM': ['BGK'],
+    'BGO': ['BGJ'],
+    'CUC': [u, 'Cub$'],
+    'DEM': ['DM'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'Fl£'],
+    'GNF': [u, 'F.G.'],
+    'KMF': [u, 'FC'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'F.Rw'],
+    'SYP': [],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'ZMW': [u, 'K']
+  },
+  plural
+];
diff --git a/packages/common/locales/de-LU.ts b/packages/common/locales/de-LU.ts
new file mode 100644
index 000000000000..64a7fc124b43
--- /dev/null
+++ b/packages/common/locales/de-LU.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'de-LU', [['vorm.', 'nachm.'], u, u], u,
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'
+    ],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'um\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro', {
+    'ATS': ['öS'],
+    'AUD': ['AU$', '$'],
+    'BGM': ['BGK'],
+    'BGO': ['BGJ'],
+    'CUC': [u, 'Cub$'],
+    'DEM': ['DM'],
+    'FKP': [u, 'Fl£'],
+    'GNF': [u, 'F.G.'],
+    'KMF': [u, 'FC'],
+    'LUF': ['F'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'F.Rw'],
+    'SYP': [],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'ZMW': [u, 'K']
+  },
+  plural
+];
diff --git a/packages/common/locales/de.ts b/packages/common/locales/de.ts
new file mode 100644
index 000000000000..1f9c40d10539
--- /dev/null
+++ b/packages/common/locales/de.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'de', [['vm.', 'nm.'], ['vorm.', 'nachm.'], u], [['vorm.', 'nachm.'], u, u],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'
+    ],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'um\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro', {
+    'ATS': ['öS'],
+    'AUD': ['AU$', '$'],
+    'BGM': ['BGK'],
+    'BGO': ['BGJ'],
+    'CUC': [u, 'Cub$'],
+    'DEM': ['DM'],
+    'FKP': [u, 'Fl£'],
+    'GNF': [u, 'F.G.'],
+    'KMF': [u, 'FC'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'F.Rw'],
+    'SYP': [],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'ZMW': [u, 'K']
+  },
+  plural
+];
diff --git a/packages/common/locales/dje.ts b/packages/common/locales/dje.ts
new file mode 100644
index 000000000000..9e9bac249f84
--- /dev/null
+++ b/packages/common/locales/dje.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'dje', [['Subbaahi', 'Zaarikay b'], u, u], u,
+  [
+    ['H', 'T', 'T', 'L', 'M', 'Z', 'S'], ['Alh', 'Ati', 'Ata', 'Ala', 'Alm', 'Alz', 'Asi'],
+    ['Alhadi', 'Atinni', 'Atalaata', 'Alarba', 'Alhamisi', 'Alzuma', 'Asibti'],
+    ['Alh', 'Ati', 'Ata', 'Ala', 'Alm', 'Alz', 'Asi']
+  ],
+  u,
+  [
+    ['Ž', 'F', 'M', 'A', 'M', 'Ž', 'Ž', 'U', 'S', 'O', 'N', 'D'],
+    ['Žan', 'Fee', 'Mar', 'Awi', 'Me', 'Žuw', 'Žuy', 'Ut', 'Sek', 'Okt', 'Noo', 'Dee'],
+    [
+      'Žanwiye', 'Feewiriye', 'Marsi', 'Awiril', 'Me', 'Žuweŋ', 'Žuyye', 'Ut', 'Sektanbur',
+      'Oktoobur', 'Noowanbur', 'Deesanbur'
+    ]
+  ],
+  u, [['IJ', 'IZ'], u, ['Isaa jine', 'Isaa zamanoo']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'CFA', 'CFA Fraŋ (BCEAO)',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/dsb.ts b/packages/common/locales/dsb.ts
new file mode 100644
index 000000000000..9f6f56c77cd9
--- /dev/null
+++ b/packages/common/locales/dsb.ts
@@ -0,0 +1,59 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 100 === 1 || f % 100 === 1) return 1;
+  if (v === 0 && i % 100 === 2 || f % 100 === 2) return 2;
+  if (v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 3 && i % 100 <= 4 ||
+      f % 100 === Math.floor(f % 100) && f % 100 >= 3 && f % 100 <= 4)
+    return 3;
+  return 5;
+}
+
+export default [
+  'dsb', [['dop.', 'wótp.'], ['dopołdnja', 'wótpołdnja'], u],
+  [['dopołdnja', 'wótpołdnja'], u, u],
+  [
+    ['n', 'p', 'w', 's', 's', 'p', 's'], ['nje', 'pón', 'wał', 'srj', 'stw', 'pět', 'sob'],
+    ['njeźela', 'pónjeźele', 'wałtora', 'srjoda', 'stwórtk', 'pětk', 'sobota'],
+    ['nj', 'pó', 'wa', 'sr', 'st', 'pě', 'so']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    [
+      'jan.', 'feb.', 'měr.', 'apr.', 'maj.', 'jun.', 'jul.', 'awg.', 'sep.', 'okt.', 'now.',
+      'dec.'
+    ],
+    [
+      'januara', 'februara', 'měrca', 'apryla', 'maja', 'junija', 'julija', 'awgusta', 'septembra',
+      'oktobra', 'nowembra', 'decembra'
+    ]
+  ],
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'měr', 'apr', 'maj', 'jun', 'jul', 'awg', 'sep', 'okt', 'now', 'dec'],
+    [
+      'januar', 'februar', 'měrc', 'apryl', 'maj', 'junij', 'julij', 'awgust', 'september',
+      'oktober', 'nowember', 'december'
+    ]
+  ],
+  [['pś.Chr.n.', 'pó Chr.n.'], u, ['pśed Kristusowym naroźenim', 'pó Kristusowem naroźenju']],
+  1, [6, 0], ['d.M.yy', 'd.M.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro',
+  {'AUD': [u, '$'], 'PLN': ['zł'], 'THB': ['฿']}, plural
+];
diff --git a/packages/common/locales/dua.ts b/packages/common/locales/dua.ts
new file mode 100644
index 000000000000..212bce22c1c9
--- /dev/null
+++ b/packages/common/locales/dua.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'dua', [['idiɓa', 'ebyámu'], u, u], u,
+  [
+    ['e', 'm', 'k', 'm', 'ŋ', 'ɗ', 'e'], ['ét', 'mɔ́s', 'kwa', 'muk', 'ŋgi', 'ɗón', 'esa'],
+    ['éti', 'mɔ́sú', 'kwasú', 'mukɔ́sú', 'ŋgisú', 'ɗónɛsú', 'esaɓasú'],
+    ['ét', 'mɔ́s', 'kwa', 'muk', 'ŋgi', 'ɗón', 'esa']
+  ],
+  u,
+  [
+    ['d', 'ŋ', 's', 'd', 'e', 'e', 'm', 'd', 'n', 'm', 't', 'e'],
+    ['di', 'ŋgɔn', 'sɔŋ', 'diɓ', 'emi', 'esɔ', 'mad', 'diŋ', 'nyɛt', 'may', 'tin', 'elá'],
+    [
+      'dimɔ́di', 'ŋgɔndɛ', 'sɔŋɛ', 'diɓáɓá', 'emiasele', 'esɔpɛsɔpɛ',
+      'madiɓɛ́díɓɛ́', 'diŋgindi', 'nyɛtɛki', 'mayésɛ́', 'tiníní', 'eláŋgɛ́'
+    ]
+  ],
+  u, [['ɓ.Ys', 'mb.Ys'], u, ['ɓoso ɓwá yáɓe lá', 'mbúsa kwédi a Yés']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFA', 'XAF',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/dyo.ts b/packages/common/locales/dyo.ts
new file mode 100644
index 000000000000..139cd64f589c
--- /dev/null
+++ b/packages/common/locales/dyo.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'dyo', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'T', 'T', 'A', 'A', 'A', 'S'], ['Dim', 'Ten', 'Tal', 'Ala', 'Ara', 'Arj', 'Sib'],
+    ['Dimas', 'Teneŋ', 'Talata', 'Alarbay', 'Aramisay', 'Arjuma', 'Sibiti'],
+    ['Dim', 'Ten', 'Tal', 'Ala', 'Ara', 'Arj', 'Sib']
+  ],
+  u,
+  [
+    ['S', 'F', 'M', 'A', 'M', 'S', 'S', 'U', 'S', 'O', 'N', 'D'],
+    ['Sa', 'Fe', 'Ma', 'Ab', 'Me', 'Su', 'Sú', 'Ut', 'Se', 'Ok', 'No', 'De'],
+    [
+      'Sanvie', 'Fébirie', 'Mars', 'Aburil', 'Mee', 'Sueŋ', 'Súuyee', 'Ut', 'Settembar',
+      'Oktobar', 'Novembar', 'Disambar'
+    ]
+  ],
+  u, [['ArY', 'AtY'], u, ['Ariŋuu Yeesu', 'Atooŋe Yeesu']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'CFA', 'seefa yati BCEAO',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/dz.ts b/packages/common/locales/dz.ts
new file mode 100644
index 000000000000..c40b307cda99
--- /dev/null
+++ b/packages/common/locales/dz.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'dz', [['སྔ་ཆ་', 'ཕྱི་ཆ་'], u, u], u,
+  [
+    ['ཟླ', 'མིར', 'ལྷག', 'ཕུར', 'སངྶ', 'སྤེན', 'ཉི'],
+    [
+      'ཟླ་', 'མིར་', 'ལྷག་', 'ཕུར་', 'སངས་',
+      'སྤེན་', 'ཉི་'
+    ],
+    [
+      'གཟའ་ཟླ་བ་', 'གཟའ་མིག་དམར་',
+      'གཟའ་ལྷག་པ་', 'གཟའ་ཕུར་བུ་',
+      'གཟའ་པ་སངས་', 'གཟའ་སྤེན་པ་',
+      'གཟའ་ཉི་མ་'
+    ],
+    [
+      'ཟླ་', 'མིར་', 'ལྷག་', 'ཕུར་', 'སངས་',
+      'སྤེན་', 'ཉི་'
+    ]
+  ],
+  u,
+  [
+    ['༡', '༢', '༣', '4', '༥', '༦', '༧', '༨', '9', '༡༠', '༡༡', '༡༢'],
+    ['༡', '༢', '༣', '༤', '༥', '༦', '༧', '༨', '༩', '༡༠', '༡༡', '12'],
+    [
+      'ཟླ་དངཔ་', 'ཟླ་གཉིས་པ་', 'ཟླ་གསུམ་པ་',
+      'ཟླ་བཞི་པ་', 'ཟླ་ལྔ་པ་', 'ཟླ་དྲུག་པ',
+      'ཟླ་བདུན་པ་', 'ཟླ་བརྒྱད་པ་',
+      'ཟླ་དགུ་པ་', 'ཟླ་བཅུ་པ་',
+      'ཟླ་བཅུ་གཅིག་པ་', 'ཟླ་བཅུ་གཉིས་པ་'
+    ]
+  ],
+  [
+    ['༡', '༢', '༣', '༤', '༥', '༦', '༧', '༨', '༩', '༡༠', '༡༡', '༡༢'],
+    [
+      'ཟླ་༡', 'ཟླ་༢', 'ཟླ་༣', 'ཟླ་༤', 'ཟླ་༥',
+      'ཟླ་༦', 'ཟླ་༧', 'ཟླ་༨', 'ཟླ་༩', 'ཟླ་༡༠',
+      'ཟླ་༡༡', 'ཟླ་༡༢'
+    ],
+    [
+      'སྤྱི་ཟླ་དངཔ་', 'སྤྱི་ཟླ་གཉིས་པ་',
+      'སྤྱི་ཟླ་གསུམ་པ་', 'སྤྱི་ཟླ་བཞི་པ',
+      'སྤྱི་ཟླ་ལྔ་པ་', 'སྤྱི་ཟླ་དྲུག་པ',
+      'སྤྱི་ཟླ་བདུན་པ་',
+      'སྤྱི་ཟླ་བརྒྱད་པ་',
+      'སྤྱི་ཟླ་དགུ་པ་', 'སྤྱི་ཟླ་བཅུ་པ་',
+      'སྤྱི་ཟླ་བཅུ་གཅིག་པ་',
+      'སྤྱི་ཟླ་བཅུ་གཉིས་པ་'
+    ]
+  ],
+  [['BCE', 'CE'], u, u], 0, [6, 0],
+  [
+    'y-MM-dd', 'སྤྱི་ལོ་y ཟླ་MMM ཚེས་dd',
+    'སྤྱི་ལོ་y MMMM ཚེས་ dd',
+    'EEEE, སྤྱི་ལོ་y MMMM ཚེས་dd'
+  ],
+  [
+    'ཆུ་ཚོད་ h སྐར་མ་ mm a', 'ཆུ་ཚོད་h:mm:ss a',
+    'ཆུ་ཚོད་ h སྐར་མ་ mm:ss a z',
+    'ཆུ་ཚོད་ h སྐར་མ་ mm:ss a zzzz'
+  ],
+  ['{1} {0}', u, u, u], ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0 %', '¤#,##,##0.00', '#E0'], '₹',
+  'རྒྱ་གར་གྱི་དངུལ་ རུ་པི', {
+    'AUD': ['AU$', '$'],
+    'BTN': ['Nu.'],
+    'ILS': [u, '₪'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': ['KR₩', '₩'],
+    'THB': ['TH฿', '฿'],
+    'USD': ['US$', '$'],
+    'XAF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/ebu.ts b/packages/common/locales/ebu.ts
new file mode 100644
index 000000000000..fec0d3ecc339
--- /dev/null
+++ b/packages/common/locales/ebu.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ebu', [['KI', 'UT'], u, u], u,
+  [
+    ['K', 'N', 'N', 'N', 'A', 'M', 'N'], ['Kma', 'Tat', 'Ine', 'Tan', 'Arm', 'Maa', 'NMM'],
+    ['Kiumia', 'Njumatatu', 'Njumaine', 'Njumatano', 'Aramithi', 'Njumaa', 'NJumamothii'],
+    ['Kma', 'Tat', 'Ine', 'Tan', 'Arm', 'Maa', 'NMM']
+  ],
+  u,
+  [
+    ['M', 'K', 'K', 'K', 'G', 'G', 'M', 'K', 'K', 'I', 'I', 'I'],
+    ['Mbe', 'Kai', 'Kat', 'Kan', 'Gat', 'Gan', 'Mug', 'Knn', 'Ken', 'Iku', 'Imw', 'Igi'],
+    [
+      'Mweri wa mbere', 'Mweri wa kaĩri', 'Mweri wa kathatũ', 'Mweri wa kana', 'Mweri wa gatano',
+      'Mweri wa gatantatũ', 'Mweri wa mũgwanja', 'Mweri wa kanana', 'Mweri wa kenda',
+      'Mweri wa ikũmi', 'Mweri wa ikũmi na ũmwe', 'Mweri wa ikũmi na Kaĩrĩ'
+    ]
+  ],
+  u, [['MK', 'TK'], u, ['Mbere ya Kristo', 'Thutha wa Kristo']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Shilingi ya Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ee-TG.ts b/packages/common/locales/ee-TG.ts
new file mode 100644
index 000000000000..5012853d0fe5
--- /dev/null
+++ b/packages/common/locales/ee-TG.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ee-TG', [['ŋ', 'ɣ'], ['ŋdi', 'ɣetrɔ'], u], u,
+  [
+    ['k', 'd', 'b', 'k', 'y', 'f', 'm'], ['kɔs', 'dzo', 'bla', 'kuɖ', 'yaw', 'fiɖ', 'mem'],
+    ['kɔsiɖa', 'dzoɖa', 'blaɖa', 'kuɖa', 'yawoɖa', 'fiɖa', 'memleɖa'],
+    ['kɔs', 'dzo', 'bla', 'kuɖ', 'yaw', 'fiɖ', 'mem']
+  ],
+  u,
+  [
+    ['d', 'd', 't', 'a', 'd', 'm', 's', 'd', 'a', 'k', 'a', 'd'],
+    ['dzv', 'dzd', 'ted', 'afɔ', 'dam', 'mas', 'sia', 'dea', 'any', 'kel', 'ade', 'dzm'],
+    [
+      'dzove', 'dzodze', 'tedoxe', 'afɔfĩe', 'dama', 'masa', 'siamlɔm', 'deasiamime',
+      'anyɔnyɔ', 'kele', 'adeɛmekpɔxe', 'dzome'
+    ]
+  ],
+  u, [['HYV', 'Yŋ'], u, ['Hafi Yesu Va', 'Yesu ŋɔli']], 1, [6, 0],
+  ['M/d/yy', 'MMM d \'lia\', y', 'MMMM d \'lia\' y', 'EEEE, MMMM d \'lia\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{0} {1}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'mnn', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'CFA', 'ɣetoɖofe afrikaga CFA franc BCEAO', {
+    'AUD': ['AU$', '$'],
+    'GHS': ['GH₵'],
+    'JPY': ['JP¥', '¥'],
+    'THB': ['฿'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ee.ts b/packages/common/locales/ee.ts
new file mode 100644
index 000000000000..ad2376664fde
--- /dev/null
+++ b/packages/common/locales/ee.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ee', [['ŋ', 'ɣ'], ['ŋdi', 'ɣetrɔ'], u], u,
+  [
+    ['k', 'd', 'b', 'k', 'y', 'f', 'm'], ['kɔs', 'dzo', 'bla', 'kuɖ', 'yaw', 'fiɖ', 'mem'],
+    ['kɔsiɖa', 'dzoɖa', 'blaɖa', 'kuɖa', 'yawoɖa', 'fiɖa', 'memleɖa'],
+    ['kɔs', 'dzo', 'bla', 'kuɖ', 'yaw', 'fiɖ', 'mem']
+  ],
+  u,
+  [
+    ['d', 'd', 't', 'a', 'd', 'm', 's', 'd', 'a', 'k', 'a', 'd'],
+    ['dzv', 'dzd', 'ted', 'afɔ', 'dam', 'mas', 'sia', 'dea', 'any', 'kel', 'ade', 'dzm'],
+    [
+      'dzove', 'dzodze', 'tedoxe', 'afɔfĩe', 'dama', 'masa', 'siamlɔm', 'deasiamime',
+      'anyɔnyɔ', 'kele', 'adeɛmekpɔxe', 'dzome'
+    ]
+  ],
+  u, [['HYV', 'Yŋ'], u, ['Hafi Yesu Va', 'Yesu ŋɔli']], 1, [6, 0],
+  ['M/d/yy', 'MMM d \'lia\', y', 'MMMM d \'lia\' y', 'EEEE, MMMM d \'lia\' y'],
+  ['a \'ga\' h:mm', 'a \'ga\' h:mm:ss', 'a \'ga\' h:mm:ss z', 'a \'ga\' h:mm:ss zzzz'],
+  ['{0} {1}', u, u, u], ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'mnn', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'GH₵', 'ghana siɖi', {
+    'AUD': ['AU$', '$'],
+    'GHS': ['GH₵'],
+    'JPY': ['JP¥', '¥'],
+    'THB': ['฿'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/el-CY.ts b/packages/common/locales/el-CY.ts
new file mode 100644
index 000000000000..6bee0c17be37
--- /dev/null
+++ b/packages/common/locales/el-CY.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'el-CY', [['πμ', 'μμ'], ['π.μ.', 'μ.μ.'], u], u,
+  [
+    ['Κ', 'Δ', 'Τ', 'Τ', 'Π', 'Π', 'Σ'],
+    ['Κυρ', 'Δευ', 'Τρί', 'Τετ', 'Πέμ', 'Παρ', 'Σάβ'],
+    [
+      'Κυριακή', 'Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη',
+      'Παρασκευή', 'Σάββατο'
+    ],
+    ['Κυ', 'Δε', 'Τρ', 'Τε', 'Πέ', 'Πα', 'Σά']
+  ],
+  u,
+  [
+    ['Ι', 'Φ', 'Μ', 'Α', 'Μ', 'Ι', 'Ι', 'Α', 'Σ', 'Ο', 'Ν', 'Δ'],
+    [
+      'Ιαν', 'Φεβ', 'Μαρ', 'Απρ', 'Μαΐ', 'Ιουν', 'Ιουλ', 'Αυγ', 'Σεπ',
+      'Οκτ', 'Νοε', 'Δεκ'
+    ],
+    [
+      'Ιανουαρίου', 'Φεβρουαρίου', 'Μαρτίου', 'Απριλίου',
+      'Μαΐου', 'Ιουνίου', 'Ιουλίου', 'Αυγούστου',
+      'Σεπτεμβρίου', 'Οκτωβρίου', 'Νοεμβρίου', 'Δεκεμβρίου'
+    ]
+  ],
+  [
+    ['Ι', 'Φ', 'Μ', 'Α', 'Μ', 'Ι', 'Ι', 'Α', 'Σ', 'Ο', 'Ν', 'Δ'],
+    [
+      'Ιαν', 'Φεβ', 'Μάρ', 'Απρ', 'Μάι', 'Ιούν', 'Ιούλ', 'Αύγ', 'Σεπ',
+      'Οκτ', 'Νοέ', 'Δεκ'
+    ],
+    [
+      'Ιανουάριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιος',
+      'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος',
+      'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος', 'Δεκέμβριος'
+    ]
+  ],
+  [['π.Χ.', 'μ.Χ.'], u, ['προ Χριστού', 'μετά Χριστόν']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} - {0}', u],
+  [',', '.', ';', '%', '+', '-', 'e', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Ευρώ',
+  {'GRD': ['Δρχ'], 'JPY': ['JP¥', '¥'], 'THB': ['฿']}, plural
+];
diff --git a/packages/common/locales/el.ts b/packages/common/locales/el.ts
new file mode 100644
index 000000000000..3dc629ef2673
--- /dev/null
+++ b/packages/common/locales/el.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'el', [['πμ', 'μμ'], ['π.μ.', 'μ.μ.'], u], u,
+  [
+    ['Κ', 'Δ', 'Τ', 'Τ', 'Π', 'Π', 'Σ'],
+    ['Κυρ', 'Δευ', 'Τρί', 'Τετ', 'Πέμ', 'Παρ', 'Σάβ'],
+    [
+      'Κυριακή', 'Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη',
+      'Παρασκευή', 'Σάββατο'
+    ],
+    ['Κυ', 'Δε', 'Τρ', 'Τε', 'Πέ', 'Πα', 'Σά']
+  ],
+  u,
+  [
+    ['Ι', 'Φ', 'Μ', 'Α', 'Μ', 'Ι', 'Ι', 'Α', 'Σ', 'Ο', 'Ν', 'Δ'],
+    [
+      'Ιαν', 'Φεβ', 'Μαρ', 'Απρ', 'Μαΐ', 'Ιουν', 'Ιουλ', 'Αυγ', 'Σεπ',
+      'Οκτ', 'Νοε', 'Δεκ'
+    ],
+    [
+      'Ιανουαρίου', 'Φεβρουαρίου', 'Μαρτίου', 'Απριλίου',
+      'Μαΐου', 'Ιουνίου', 'Ιουλίου', 'Αυγούστου',
+      'Σεπτεμβρίου', 'Οκτωβρίου', 'Νοεμβρίου', 'Δεκεμβρίου'
+    ]
+  ],
+  [
+    ['Ι', 'Φ', 'Μ', 'Α', 'Μ', 'Ι', 'Ι', 'Α', 'Σ', 'Ο', 'Ν', 'Δ'],
+    [
+      'Ιαν', 'Φεβ', 'Μάρ', 'Απρ', 'Μάι', 'Ιούν', 'Ιούλ', 'Αύγ', 'Σεπ',
+      'Οκτ', 'Νοέ', 'Δεκ'
+    ],
+    [
+      'Ιανουάριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιος',
+      'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος',
+      'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος', 'Δεκέμβριος'
+    ]
+  ],
+  [['π.Χ.', 'μ.Χ.'], u, ['προ Χριστού', 'μετά Χριστόν']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} - {0}', u],
+  [',', '.', ';', '%', '+', '-', 'e', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Ευρώ',
+  {'GRD': ['Δρχ'], 'JPY': ['JP¥', '¥'], 'THB': ['฿']}, plural
+];
diff --git a/packages/common/locales/en-001.ts b/packages/common/locales/en-001.ts
new file mode 100644
index 000000000000..f17159530be3
--- /dev/null
+++ b/packages/common/locales/en-001.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-001', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], u, u, {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/en-150.ts b/packages/common/locales/en-150.ts
new file mode 100644
index 000000000000..78a6daa4cf3d
--- /dev/null
+++ b/packages/common/locales/en-150.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-150', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], u, u,
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-AG.ts b/packages/common/locales/en-AG.ts
new file mode 100644
index 000000000000..076742555905
--- /dev/null
+++ b/packages/common/locales/en-AG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-AG', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'East Caribbean Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'XCD': ['$']}, plural
+];
diff --git a/packages/common/locales/en-AI.ts b/packages/common/locales/en-AI.ts
new file mode 100644
index 000000000000..f786c145315a
--- /dev/null
+++ b/packages/common/locales/en-AI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-AI', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'East Caribbean Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'XCD': ['$']}, plural
+];
diff --git a/packages/common/locales/en-AS.ts b/packages/common/locales/en-AS.ts
new file mode 100644
index 000000000000..23afd3232290
--- /dev/null
+++ b/packages/common/locales/en-AS.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-AS', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/locales/en-AT.ts b/packages/common/locales/en-AT.ts
new file mode 100644
index 000000000000..5062c5cabc23
--- /dev/null
+++ b/packages/common/locales/en-AT.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-AT', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], '€', 'Euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-AU.ts b/packages/common/locales/en-AU.ts
new file mode 100644
index 000000000000..b6e1988d6c7c
--- /dev/null
+++ b/packages/common/locales/en-AU.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-AU', [['am', 'pm'], u, u], u,
+  [
+    ['Su.', 'M.', 'Tu.', 'W.', 'Th.', 'F.', 'Sa.'],
+    ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su.', 'Mon.', 'Tu.', 'Wed.', 'Th.', 'Fri.', 'Sat.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'e', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Australian Dollar', {
+    'AUD': ['$'],
+    'BDT': [u, 'Tk'],
+    'BOB': [u, '$b'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'CUP': [u, '₱'],
+    'EGP': [u, '£'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'ISK': [u, 'Kr'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'PYG': [u, 'Gs'],
+    'SCR': ['Rs'],
+    'SEK': [u, 'Kr'],
+    'TWD': [u, '$'],
+    'USD': [u, '$'],
+    'UYU': [u, '$U'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': [],
+    'XPF': ['CFP']
+  },
+  plural
+];
diff --git a/packages/common/locales/en-BB.ts b/packages/common/locales/en-BB.ts
new file mode 100644
index 000000000000..263ad479a303
--- /dev/null
+++ b/packages/common/locales/en-BB.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-BB', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Barbadian Dollar',
+  {'BBD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-BE.ts b/packages/common/locales/en-BE.ts
new file mode 100644
index 000000000000..150b5f6e2e2c
--- /dev/null
+++ b/packages/common/locales/en-BE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-BE', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/yy', 'dd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-BI.ts b/packages/common/locales/en-BI.ts
new file mode 100644
index 000000000000..5919b0d16569
--- /dev/null
+++ b/packages/common/locales/en-BI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-BI', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'FBu', 'Burundian Franc', {'BIF': ['FBu']}, plural
+];
diff --git a/packages/common/locales/en-BM.ts b/packages/common/locales/en-BM.ts
new file mode 100644
index 000000000000..ab929a925106
--- /dev/null
+++ b/packages/common/locales/en-BM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-BM', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Bermudan Dollar',
+  {'BMD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-BS.ts b/packages/common/locales/en-BS.ts
new file mode 100644
index 000000000000..81f4033de615
--- /dev/null
+++ b/packages/common/locales/en-BS.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-BS', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Bahamian Dollar',
+  {'BSD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-BW.ts b/packages/common/locales/en-BW.ts
new file mode 100644
index 000000000000..58c4c56f8685
--- /dev/null
+++ b/packages/common/locales/en-BW.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-BW', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/yy', 'dd MMM y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'P', 'Botswanan Pula',
+  {'BWP': ['P'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-BZ.ts b/packages/common/locales/en-BZ.ts
new file mode 100644
index 000000000000..2b2c489f385e
--- /dev/null
+++ b/packages/common/locales/en-BZ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-BZ', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/yy', 'dd-MMM-y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Belize Dollar',
+  {'BZD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-CA.ts b/packages/common/locales/en-CA.ts
new file mode 100644
index 000000000000..f7accde5dc7b
--- /dev/null
+++ b/packages/common/locales/en-CA.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-CA', [['a', 'p'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['y-MM-dd', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'e', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Canadian Dollar',
+  {'CAD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-CC.ts b/packages/common/locales/en-CC.ts
new file mode 100644
index 000000000000..0f384d5b2f5b
--- /dev/null
+++ b/packages/common/locales/en-CC.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-CC', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Australian Dollar',
+  {'AUD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-CH.ts b/packages/common/locales/en-CH.ts
new file mode 100644
index 000000000000..1696b512701b
--- /dev/null
+++ b/packages/common/locales/en-CH.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-CH', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤-#,##0.00', '#E0'], 'CHF', 'Swiss Franc',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-CK.ts b/packages/common/locales/en-CK.ts
new file mode 100644
index 000000000000..173ac0860655
--- /dev/null
+++ b/packages/common/locales/en-CK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-CK', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'New Zealand Dollar',
+  {'JPY': ['JP¥', '¥'], 'NZD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-CM.ts b/packages/common/locales/en-CM.ts
new file mode 100644
index 000000000000..3c0b5575916d
--- /dev/null
+++ b/packages/common/locales/en-CM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-CM', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'FCFA', 'Central African CFA Franc',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-CX.ts b/packages/common/locales/en-CX.ts
new file mode 100644
index 000000000000..d111c6ade83b
--- /dev/null
+++ b/packages/common/locales/en-CX.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-CX', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Australian Dollar',
+  {'AUD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-CY.ts b/packages/common/locales/en-CY.ts
new file mode 100644
index 000000000000..51667351ae79
--- /dev/null
+++ b/packages/common/locales/en-CY.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-CY', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '€', 'Euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-DE.ts b/packages/common/locales/en-DE.ts
new file mode 100644
index 000000000000..a0ca24a45940
--- /dev/null
+++ b/packages/common/locales/en-DE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-DE', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-DG.ts b/packages/common/locales/en-DG.ts
new file mode 100644
index 000000000000..232f82695aa6
--- /dev/null
+++ b/packages/common/locales/en-DG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-DG', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'US$', 'US Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-DK.ts b/packages/common/locales/en-DK.ts
new file mode 100644
index 000000000000..56dfc653fb11
--- /dev/null
+++ b/packages/common/locales/en-DK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-DK', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH.mm', 'HH.mm.ss', 'HH.mm.ss z', 'HH.mm.ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr.', 'Danish Krone',
+  {'DKK': ['kr.', 'kr'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-DM.ts b/packages/common/locales/en-DM.ts
new file mode 100644
index 000000000000..09ee6a697834
--- /dev/null
+++ b/packages/common/locales/en-DM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-DM', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'East Caribbean Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'XCD': ['$']}, plural
+];
diff --git a/packages/common/locales/en-ER.ts b/packages/common/locales/en-ER.ts
new file mode 100644
index 000000000000..599a895d6b58
--- /dev/null
+++ b/packages/common/locales/en-ER.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-ER', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Nfk', 'Eritrean Nakfa',
+  {'ERN': ['Nfk'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-FI.ts b/packages/common/locales/en-FI.ts
new file mode 100644
index 000000000000..6c7f1d5c0788
--- /dev/null
+++ b/packages/common/locales/en-FI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-FI', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['H.mm', 'H.mm.ss', 'H.mm.ss z', 'H.mm.ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-FJ.ts b/packages/common/locales/en-FJ.ts
new file mode 100644
index 000000000000..cfccb85d8780
--- /dev/null
+++ b/packages/common/locales/en-FJ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-FJ', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Fijian Dollar',
+  {'FJD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-FK.ts b/packages/common/locales/en-FK.ts
new file mode 100644
index 000000000000..8e1375ce125f
--- /dev/null
+++ b/packages/common/locales/en-FK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-FK', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'Falkland Islands Pound',
+  {'FKP': ['£'], 'GBP': ['GB£', '£'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-FM.ts b/packages/common/locales/en-FM.ts
new file mode 100644
index 000000000000..dc5cff13f54e
--- /dev/null
+++ b/packages/common/locales/en-FM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-FM', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'US$', 'US Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-GB.ts b/packages/common/locales/en-GB.ts
new file mode 100644
index 000000000000..d597f00fd7eb
--- /dev/null
+++ b/packages/common/locales/en-GB.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-GB', [['a', 'p'], ['am', 'pm'], u], [['am', 'pm'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'British Pound',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-GD.ts b/packages/common/locales/en-GD.ts
new file mode 100644
index 000000000000..550bca54bf17
--- /dev/null
+++ b/packages/common/locales/en-GD.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-GD', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'East Caribbean Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'XCD': ['$']}, plural
+];
diff --git a/packages/common/locales/en-GG.ts b/packages/common/locales/en-GG.ts
new file mode 100644
index 000000000000..4deb8c66efcd
--- /dev/null
+++ b/packages/common/locales/en-GG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-GG', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'UK Pound',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-GH.ts b/packages/common/locales/en-GH.ts
new file mode 100644
index 000000000000..5f543ef93391
--- /dev/null
+++ b/packages/common/locales/en-GH.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-GH', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'GH₵', 'Ghanaian Cedi',
+  {'GHS': ['GH₵'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-GI.ts b/packages/common/locales/en-GI.ts
new file mode 100644
index 000000000000..e8998f6e0851
--- /dev/null
+++ b/packages/common/locales/en-GI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-GI', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'Gibraltar Pound',
+  {'GBP': ['GB£', '£'], 'GIP': ['£'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-GM.ts b/packages/common/locales/en-GM.ts
new file mode 100644
index 000000000000..fc387e3e0bae
--- /dev/null
+++ b/packages/common/locales/en-GM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-GM', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'D', 'Gambian Dalasi',
+  {'GMD': ['D'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-GU.ts b/packages/common/locales/en-GU.ts
new file mode 100644
index 000000000000..756cbe7973b2
--- /dev/null
+++ b/packages/common/locales/en-GU.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-GU', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/locales/en-GY.ts b/packages/common/locales/en-GY.ts
new file mode 100644
index 000000000000..78de45605341
--- /dev/null
+++ b/packages/common/locales/en-GY.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-GY', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Guyanaese Dollar',
+  {'GYD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-HK.ts b/packages/common/locales/en-HK.ts
new file mode 100644
index 000000000000..e849b8402126
--- /dev/null
+++ b/packages/common/locales/en-HK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-HK', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'HK$', 'Hong Kong Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-IE.ts b/packages/common/locales/en-IE.ts
new file mode 100644
index 000000000000..7a6d866ae704
--- /dev/null
+++ b/packages/common/locales/en-IE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-IE', [['a', 'p'], ['AM', 'PM'], ['a.m.', 'p.m.']], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '€', 'Euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-IL.ts b/packages/common/locales/en-IL.ts
new file mode 100644
index 000000000000..e4ccca353f6c
--- /dev/null
+++ b/packages/common/locales/en-IL.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-IL', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [5, 6],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₪', 'Israeli New Shekel',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-IM.ts b/packages/common/locales/en-IM.ts
new file mode 100644
index 000000000000..3481334a3aa4
--- /dev/null
+++ b/packages/common/locales/en-IM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-IM', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'UK Pound',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-IN.ts b/packages/common/locales/en-IN.ts
new file mode 100644
index 000000000000..9e15f3483395
--- /dev/null
+++ b/packages/common/locales/en-IN.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-IN', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [0, 0],
+  ['dd/MM/yy', 'dd-MMM-y', 'd MMMM y', 'EEEE, d MMMM, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], '₹', 'Indian Rupee',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-IO.ts b/packages/common/locales/en-IO.ts
new file mode 100644
index 000000000000..85ed29dd277a
--- /dev/null
+++ b/packages/common/locales/en-IO.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-IO', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'US$', 'US Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-JE.ts b/packages/common/locales/en-JE.ts
new file mode 100644
index 000000000000..fce9a897b72d
--- /dev/null
+++ b/packages/common/locales/en-JE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-JE', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'UK Pound',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-JM.ts b/packages/common/locales/en-JM.ts
new file mode 100644
index 000000000000..f146140bd52c
--- /dev/null
+++ b/packages/common/locales/en-JM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-JM', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Jamaican Dollar',
+  {'JMD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-KE.ts b/packages/common/locales/en-KE.ts
new file mode 100644
index 000000000000..1f3273c8c366
--- /dev/null
+++ b/packages/common/locales/en-KE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-KE', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Kenyan Shilling',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-KI.ts b/packages/common/locales/en-KI.ts
new file mode 100644
index 000000000000..5f722a103d5b
--- /dev/null
+++ b/packages/common/locales/en-KI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-KI', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Australian Dollar',
+  {'AUD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-KN.ts b/packages/common/locales/en-KN.ts
new file mode 100644
index 000000000000..b32e295d5a39
--- /dev/null
+++ b/packages/common/locales/en-KN.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-KN', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'East Caribbean Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'XCD': ['$']}, plural
+];
diff --git a/packages/common/locales/en-KY.ts b/packages/common/locales/en-KY.ts
new file mode 100644
index 000000000000..8774f1ea2db6
--- /dev/null
+++ b/packages/common/locales/en-KY.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-KY', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Cayman Islands Dollar',
+  {'JPY': ['JP¥', '¥'], 'KYD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-LC.ts b/packages/common/locales/en-LC.ts
new file mode 100644
index 000000000000..e5425c5260bd
--- /dev/null
+++ b/packages/common/locales/en-LC.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-LC', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'East Caribbean Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'XCD': ['$']}, plural
+];
diff --git a/packages/common/locales/en-LR.ts b/packages/common/locales/en-LR.ts
new file mode 100644
index 000000000000..15db3ea377bc
--- /dev/null
+++ b/packages/common/locales/en-LR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-LR', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Liberian Dollar',
+  {'JPY': ['JP¥', '¥'], 'LRD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-LS.ts b/packages/common/locales/en-LS.ts
new file mode 100644
index 000000000000..65bf1295426c
--- /dev/null
+++ b/packages/common/locales/en-LS.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-LS', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'R', 'South African Rand',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'ZAR': ['R']}, plural
+];
diff --git a/packages/common/locales/en-MG.ts b/packages/common/locales/en-MG.ts
new file mode 100644
index 000000000000..0d725905888d
--- /dev/null
+++ b/packages/common/locales/en-MG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-MG', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ar', 'Malagasy Ariary',
+  {'JPY': ['JP¥', '¥'], 'MGA': ['Ar'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-MH.ts b/packages/common/locales/en-MH.ts
new file mode 100644
index 000000000000..8870f4bdde58
--- /dev/null
+++ b/packages/common/locales/en-MH.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-MH', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/locales/en-MO.ts b/packages/common/locales/en-MO.ts
new file mode 100644
index 000000000000..8dc5f7acb2aa
--- /dev/null
+++ b/packages/common/locales/en-MO.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-MO', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'MOP$', 'Macanese Pataca',
+  {'JPY': ['JP¥', '¥'], 'MOP': ['MOP$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-MP.ts b/packages/common/locales/en-MP.ts
new file mode 100644
index 000000000000..5094828c9b02
--- /dev/null
+++ b/packages/common/locales/en-MP.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-MP', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/locales/en-MS.ts b/packages/common/locales/en-MS.ts
new file mode 100644
index 000000000000..e966227c6fce
--- /dev/null
+++ b/packages/common/locales/en-MS.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-MS', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'East Caribbean Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'XCD': ['$']}, plural
+];
diff --git a/packages/common/locales/en-MT.ts b/packages/common/locales/en-MT.ts
new file mode 100644
index 000000000000..f3e380b1ed5e
--- /dev/null
+++ b/packages/common/locales/en-MT.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-MT', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'dd MMM y', 'dd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '€', 'Euro',
+  {'GBP': ['GB£', '£'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-MU.ts b/packages/common/locales/en-MU.ts
new file mode 100644
index 000000000000..5e796289566c
--- /dev/null
+++ b/packages/common/locales/en-MU.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-MU', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Rs', 'Mauritian Rupee',
+  {'JPY': ['JP¥', '¥'], 'MUR': ['Rs'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-MW.ts b/packages/common/locales/en-MW.ts
new file mode 100644
index 000000000000..2a10249f1217
--- /dev/null
+++ b/packages/common/locales/en-MW.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-MW', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'MK', 'Malawian Kwacha',
+  {'JPY': ['JP¥', '¥'], 'MWK': ['MK'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-MY.ts b/packages/common/locales/en-MY.ts
new file mode 100644
index 000000000000..dda326571e59
--- /dev/null
+++ b/packages/common/locales/en-MY.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-MY', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'RM', 'Malaysian Ringgit',
+  {'JPY': ['JP¥', '¥'], 'MYR': ['RM'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-NA.ts b/packages/common/locales/en-NA.ts
new file mode 100644
index 000000000000..6929f1f90b5f
--- /dev/null
+++ b/packages/common/locales/en-NA.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-NA', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'ZAR', 'South African Rand',
+  {'JPY': ['JP¥', '¥'], 'NAD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-NF.ts b/packages/common/locales/en-NF.ts
new file mode 100644
index 000000000000..27f85bdbbf5d
--- /dev/null
+++ b/packages/common/locales/en-NF.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-NF', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Australian Dollar',
+  {'AUD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-NG.ts b/packages/common/locales/en-NG.ts
new file mode 100644
index 000000000000..286c2a550cf7
--- /dev/null
+++ b/packages/common/locales/en-NG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-NG', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₦', 'Nigerian Naira',
+  {'JPY': ['JP¥', '¥'], 'NGN': ['₦'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-NL.ts b/packages/common/locales/en-NL.ts
new file mode 100644
index 000000000000..3e4e4e51cf98
--- /dev/null
+++ b/packages/common/locales/en-NL.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-NL', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤ -#,##0.00', '#E0'], '€', 'Euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-NR.ts b/packages/common/locales/en-NR.ts
new file mode 100644
index 000000000000..134ccf04402b
--- /dev/null
+++ b/packages/common/locales/en-NR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-NR', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Australian Dollar',
+  {'AUD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-NU.ts b/packages/common/locales/en-NU.ts
new file mode 100644
index 000000000000..9dfbc8bc13f6
--- /dev/null
+++ b/packages/common/locales/en-NU.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-NU', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'New Zealand Dollar',
+  {'JPY': ['JP¥', '¥'], 'NZD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-NZ.ts b/packages/common/locales/en-NZ.ts
new file mode 100644
index 000000000000..e9e25c4c4713
--- /dev/null
+++ b/packages/common/locales/en-NZ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-NZ', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['d/MM/yy', 'd/MM/y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'New Zealand Dollar',
+  {'JPY': ['JP¥', '¥'], 'NZD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-PG.ts b/packages/common/locales/en-PG.ts
new file mode 100644
index 000000000000..277bd84029dc
--- /dev/null
+++ b/packages/common/locales/en-PG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-PG', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'K', 'Papua New Guinean Kina',
+  {'JPY': ['JP¥', '¥'], 'PGK': ['K'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-PH.ts b/packages/common/locales/en-PH.ts
new file mode 100644
index 000000000000..edc4cfdc3df1
--- /dev/null
+++ b/packages/common/locales/en-PH.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-PH', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₱', 'Philippine Piso',
+  {'JPY': ['JP¥', '¥'], 'PHP': ['₱'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-PK.ts b/packages/common/locales/en-PK.ts
new file mode 100644
index 000000000000..760859567e23
--- /dev/null
+++ b/packages/common/locales/en-PK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-PK', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'dd-MMM-y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Rs', 'Pakistani Rupee',
+  {'JPY': ['JP¥', '¥'], 'PKR': ['Rs'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-PN.ts b/packages/common/locales/en-PN.ts
new file mode 100644
index 000000000000..796186b0bb82
--- /dev/null
+++ b/packages/common/locales/en-PN.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-PN', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'New Zealand Dollar',
+  {'JPY': ['JP¥', '¥'], 'NZD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-PR.ts b/packages/common/locales/en-PR.ts
new file mode 100644
index 000000000000..6d8b66a405f3
--- /dev/null
+++ b/packages/common/locales/en-PR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-PR', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/locales/en-PW.ts b/packages/common/locales/en-PW.ts
new file mode 100644
index 000000000000..e27c7c46c97f
--- /dev/null
+++ b/packages/common/locales/en-PW.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-PW', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'US$', 'US Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-RW.ts b/packages/common/locales/en-RW.ts
new file mode 100644
index 000000000000..2f8ec51804a2
--- /dev/null
+++ b/packages/common/locales/en-RW.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-RW', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'RF', 'Rwandan Franc',
+  {'JPY': ['JP¥', '¥'], 'RWF': ['RF'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SB.ts b/packages/common/locales/en-SB.ts
new file mode 100644
index 000000000000..5cfa245b3737
--- /dev/null
+++ b/packages/common/locales/en-SB.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SB', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Solomon Islands Dollar',
+  {'JPY': ['JP¥', '¥'], 'SBD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SC.ts b/packages/common/locales/en-SC.ts
new file mode 100644
index 000000000000..f8d2bf0f6189
--- /dev/null
+++ b/packages/common/locales/en-SC.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SC', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'SR', 'Seychellois Rupee',
+  {'JPY': ['JP¥', '¥'], 'SCR': ['SR'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SD.ts b/packages/common/locales/en-SD.ts
new file mode 100644
index 000000000000..0929d7c4572e
--- /dev/null
+++ b/packages/common/locales/en-SD.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SD', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 6, [5, 6],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'SDG', 'Sudanese Pound',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SE.ts b/packages/common/locales/en-SE.ts
new file mode 100644
index 000000000000..1e8ab6e5df2e
--- /dev/null
+++ b/packages/common/locales/en-SE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SE', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['y-MM-dd', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', '×10^', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr', 'Swedish Krona',
+  {'JPY': ['JP¥', '¥'], 'SEK': ['kr'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SG.ts b/packages/common/locales/en-SG.ts
new file mode 100644
index 000000000000..52a1bc234341
--- /dev/null
+++ b/packages/common/locales/en-SG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SG', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Singapore Dollar',
+  {'JPY': ['JP¥', '¥'], 'SGD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SH.ts b/packages/common/locales/en-SH.ts
new file mode 100644
index 000000000000..dfbc95d87f0b
--- /dev/null
+++ b/packages/common/locales/en-SH.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SH', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'St. Helena Pound',
+  {'GBP': ['GB£', '£'], 'JPY': ['JP¥', '¥'], 'SHP': ['£'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SI.ts b/packages/common/locales/en-SI.ts
new file mode 100644
index 000000000000..1cb7a170430b
--- /dev/null
+++ b/packages/common/locales/en-SI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SI', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'e', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SL.ts b/packages/common/locales/en-SL.ts
new file mode 100644
index 000000000000..887627c7a7ad
--- /dev/null
+++ b/packages/common/locales/en-SL.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SL', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Le', 'Sierra Leonean Leone',
+  {'JPY': ['JP¥', '¥'], 'SLL': ['Le'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SS.ts b/packages/common/locales/en-SS.ts
new file mode 100644
index 000000000000..93ec4d91994e
--- /dev/null
+++ b/packages/common/locales/en-SS.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SS', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'South Sudanese Pound',
+  {'GBP': ['GB£', '£'], 'JPY': ['JP¥', '¥'], 'SSP': ['£'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SX.ts b/packages/common/locales/en-SX.ts
new file mode 100644
index 000000000000..d0bb86ff1af2
--- /dev/null
+++ b/packages/common/locales/en-SX.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SX', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'NAf.', 'Netherlands Antillean Guilder',
+  {'ANG': ['NAf.'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-SZ.ts b/packages/common/locales/en-SZ.ts
new file mode 100644
index 000000000000..13e8bc637638
--- /dev/null
+++ b/packages/common/locales/en-SZ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-SZ', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'E', 'Swazi Lilangeni',
+  {'JPY': ['JP¥', '¥'], 'SZL': ['E'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-TC.ts b/packages/common/locales/en-TC.ts
new file mode 100644
index 000000000000..2da98d3ab417
--- /dev/null
+++ b/packages/common/locales/en-TC.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-TC', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'US$', 'US Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-TK.ts b/packages/common/locales/en-TK.ts
new file mode 100644
index 000000000000..67d5c36d327a
--- /dev/null
+++ b/packages/common/locales/en-TK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-TK', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'New Zealand Dollar',
+  {'JPY': ['JP¥', '¥'], 'NZD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-TO.ts b/packages/common/locales/en-TO.ts
new file mode 100644
index 000000000000..43b4df34406b
--- /dev/null
+++ b/packages/common/locales/en-TO.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-TO', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'T$', 'Tongan Paʻanga',
+  {'JPY': ['JP¥', '¥'], 'TOP': ['T$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-TT.ts b/packages/common/locales/en-TT.ts
new file mode 100644
index 000000000000..243dca374e39
--- /dev/null
+++ b/packages/common/locales/en-TT.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-TT', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Trinidad & Tobago Dollar',
+  {'JPY': ['JP¥', '¥'], 'TTD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-TV.ts b/packages/common/locales/en-TV.ts
new file mode 100644
index 000000000000..3293fd87c139
--- /dev/null
+++ b/packages/common/locales/en-TV.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-TV', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Australian Dollar',
+  {'AUD': ['$'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-TZ.ts b/packages/common/locales/en-TZ.ts
new file mode 100644
index 000000000000..ae2b5e2dbf47
--- /dev/null
+++ b/packages/common/locales/en-TZ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-TZ', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'TSh', 'Tanzanian Shilling',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-UG.ts b/packages/common/locales/en-UG.ts
new file mode 100644
index 000000000000..1b911197dbd4
--- /dev/null
+++ b/packages/common/locales/en-UG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-UG', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'USh', 'Ugandan Shilling',
+  {'JPY': ['JP¥', '¥'], 'UGX': ['USh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-UM.ts b/packages/common/locales/en-UM.ts
new file mode 100644
index 000000000000..ee697af1784b
--- /dev/null
+++ b/packages/common/locales/en-UM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-UM', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/locales/en-US-POSIX.ts b/packages/common/locales/en-US-POSIX.ts
new file mode 100644
index 000000000000..b7cb47946d48
--- /dev/null
+++ b/packages/common/locales/en-US-POSIX.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-US-POSIX', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '0/00', 'INF', 'NaN', ':'],
+  ['0.######', '0%', '¤ 0.00', '0.000000E+000'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/locales/en-VC.ts b/packages/common/locales/en-VC.ts
new file mode 100644
index 000000000000..08ccaf02ec59
--- /dev/null
+++ b/packages/common/locales/en-VC.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-VC', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'East Caribbean Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'XCD': ['$']}, plural
+];
diff --git a/packages/common/locales/en-VG.ts b/packages/common/locales/en-VG.ts
new file mode 100644
index 000000000000..ac64e9082966
--- /dev/null
+++ b/packages/common/locales/en-VG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-VG', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'US$', 'US Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en-VI.ts b/packages/common/locales/en-VI.ts
new file mode 100644
index 000000000000..6e52c879dff0
--- /dev/null
+++ b/packages/common/locales/en-VI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-VI', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/locales/en-VU.ts b/packages/common/locales/en-VU.ts
new file mode 100644
index 000000000000..b65df2450f5f
--- /dev/null
+++ b/packages/common/locales/en-VU.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-VU', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'VT', 'Vanuatu Vatu',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'VUV': ['VT']}, plural
+];
diff --git a/packages/common/locales/en-WS.ts b/packages/common/locales/en-WS.ts
new file mode 100644
index 000000000000..262da7c43e83
--- /dev/null
+++ b/packages/common/locales/en-WS.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-WS', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'WS$', 'Samoan Tala',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'WST': ['WS$']}, plural
+];
diff --git a/packages/common/locales/en-ZA.ts b/packages/common/locales/en-ZA.ts
new file mode 100644
index 000000000000..7850e7068fff
--- /dev/null
+++ b/packages/common/locales/en-ZA.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-ZA', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['y/MM/dd', 'dd MMM y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'R', 'South African Rand',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'ZAR': ['R']}, plural
+];
diff --git a/packages/common/locales/en-ZM.ts b/packages/common/locales/en-ZM.ts
new file mode 100644
index 000000000000..c9c5b5e50d59
--- /dev/null
+++ b/packages/common/locales/en-ZM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-ZM', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'K', 'Zambian Kwacha',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'ZMW': ['K', 'ZK']}, plural
+];
diff --git a/packages/common/locales/en-ZW.ts b/packages/common/locales/en-ZW.ts
new file mode 100644
index 000000000000..a850d1ab5d7e
--- /dev/null
+++ b/packages/common/locales/en-ZW.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en-ZW', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['d/M/y', 'dd MMM,y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'US$', 'US Dollar',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/en.ts b/packages/common/locales/en.ts
new file mode 100644
index 000000000000..af207dab9006
--- /dev/null
+++ b/packages/common/locales/en.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/locales/eo.ts b/packages/common/locales/eo.ts
new file mode 100644
index 000000000000..0a6d2d97d3b5
--- /dev/null
+++ b/packages/common/locales/eo.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'eo', [['atm', 'ptm'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['di', 'lu', 'ma', 'me', 'ĵa', 've', 'sa'],
+    ['dimanĉo', 'lundo', 'mardo', 'merkredo', 'ĵaŭdo', 'vendredo', 'sabato'],
+    ['di', 'lu', 'ma', 'me', 'ĵa', 've', 'sa']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'aŭg', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'januaro', 'februaro', 'marto', 'aprilo', 'majo', 'junio', 'julio', 'aŭgusto', 'septembro',
+      'oktobro', 'novembro', 'decembro'
+    ]
+  ],
+  u, [['aK', 'pK'], u, u], 1, [6, 0],
+  ['yy-MM-dd', 'y-MMM-dd', 'y-MMMM-dd', 'EEEE, d-\'a\' \'de\' MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'H-\'a\' \'horo\' \'kaj\' m:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], u, u,
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/es-419.ts b/packages/common/locales/es-419.ts
new file mode 100644
index 000000000000..92fef7b106a9
--- /dev/null
+++ b/packages/common/locales/es-419.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-419', [['a. m.', 'p. m.'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'EUR', 'euro', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-AR.ts b/packages/common/locales/es-AR.ts
new file mode 100644
index 000000000000..32e8bfa31099
--- /dev/null
+++ b/packages/common/locales/es-AR.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-AR', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], '$', 'peso argentino', {
+    'ARS': ['$'],
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-BO.ts b/packages/common/locales/es-BO.ts
new file mode 100644
index 000000000000..5fb25e06196f
--- /dev/null
+++ b/packages/common/locales/es-BO.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-BO', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM \'de\' y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'Bs', 'boliviano', {
+    'AUD': [u, '$'],
+    'BOB': ['Bs'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-BR.ts b/packages/common/locales/es-BR.ts
new file mode 100644
index 000000000000..50922776260e
--- /dev/null
+++ b/packages/common/locales/es-BR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-BR', [['a. m.', 'p. m.'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'R$', 'real brasileño', {
+    'AUD': [u, '$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-BZ.ts b/packages/common/locales/es-BZ.ts
new file mode 100644
index 000000000000..569bf2823661
--- /dev/null
+++ b/packages/common/locales/es-BZ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-BZ', [['a. m.', 'p. m.'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], '$', 'dólar beliceño', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'BZD': ['$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-CL.ts b/packages/common/locales/es-CL.ts
new file mode 100644
index 000000000000..257fe1918bbc
--- /dev/null
+++ b/packages/common/locales/es-CL.ts
@@ -0,0 +1,85 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-CL', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['do', 'lu', 'ma', 'mi', 'ju', 'vi', 'sá']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sept.', 'oct.', 'nov.',
+      'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['dd-MM-yy', 'dd-MM-y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00;¤-#,##0.00', '#E0'], '$', 'Peso chileno', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CLP': ['$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-CO.ts b/packages/common/locales/es-CO.ts
new file mode 100644
index 000000000000..8756f692cf19
--- /dev/null
+++ b/packages/common/locales/es-CO.ts
@@ -0,0 +1,85 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-CO', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sept.', 'oct.', 'nov.',
+      'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/MM/yy', 'd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], '$', 'peso colombiano', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-CR.ts b/packages/common/locales/es-CR.ts
new file mode 100644
index 000000000000..67a47a9f8a0e
--- /dev/null
+++ b/packages/common/locales/es-CR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-CR', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], '₡', 'colón costarricense', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'CRC': ['₡'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-CU.ts b/packages/common/locales/es-CU.ts
new file mode 100644
index 000000000000..c739d3453648
--- /dev/null
+++ b/packages/common/locales/es-CU.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-CU', [['a. m.', 'p. m.'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], '$', 'peso cubano', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'CUP': ['$'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-DO.ts b/packages/common/locales/es-DO.ts
new file mode 100644
index 000000000000..201f849eed56
--- /dev/null
+++ b/packages/common/locales/es-DO.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-DO', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'RD$', 'peso dominicano', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'DOP': ['RD$', '$'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-EA.ts b/packages/common/locales/es-EA.ts
new file mode 100644
index 000000000000..cfc58c08bad8
--- /dev/null
+++ b/packages/common/locales/es-EA.ts
@@ -0,0 +1,65 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-EA', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'X', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sept.', 'oct.', 'nov.',
+      'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss (zzzz)'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CNY': [u, '¥'],
+    'EGP': [],
+    'ESP': ['₧'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-EC.ts b/packages/common/locales/es-EC.ts
new file mode 100644
index 000000000000..adcbf75f228d
--- /dev/null
+++ b/packages/common/locales/es-EC.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-EC', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00;¤-#,##0.00', '#E0'], '$', 'dólar estadounidense', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-GQ.ts b/packages/common/locales/es-GQ.ts
new file mode 100644
index 000000000000..21a4b1083e8c
--- /dev/null
+++ b/packages/common/locales/es-GQ.ts
@@ -0,0 +1,64 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-GQ', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'X', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sept.', 'oct.', 'nov.',
+      'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss (zzzz)'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'FCFA', 'franco CFA de África Central', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CNY': [u, '¥'],
+    'EGP': [],
+    'ESP': ['₧'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-GT.ts b/packages/common/locales/es-GT.ts
new file mode 100644
index 000000000000..caf2251f111f
--- /dev/null
+++ b/packages/common/locales/es-GT.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-GT', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/MM/yy', 'd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'Q', 'quetzal', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'GTQ': ['Q'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-HN.ts b/packages/common/locales/es-HN.ts
new file mode 100644
index 000000000000..68198c19ab66
--- /dev/null
+++ b/packages/common/locales/es-HN.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-HN', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'dd \'de\' MMMM \'de\' y', 'EEEE dd \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'L', 'lempira hondureño', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'HNL': ['L'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-IC.ts b/packages/common/locales/es-IC.ts
new file mode 100644
index 000000000000..63e8548ac968
--- /dev/null
+++ b/packages/common/locales/es-IC.ts
@@ -0,0 +1,65 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-IC', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'X', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sept.', 'oct.', 'nov.',
+      'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss (zzzz)'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CNY': [u, '¥'],
+    'EGP': [],
+    'ESP': ['₧'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-MX.ts b/packages/common/locales/es-MX.ts
new file mode 100644
index 000000000000..6d378b617067
--- /dev/null
+++ b/packages/common/locales/es-MX.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-MX', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['do', 'lu', 'ma', 'mi', 'ju', 'vi', 'sá']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['dd/MM/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], '$', 'peso mexicano', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'BYN': [u, 'p.'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': ['$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-NI.ts b/packages/common/locales/es-NI.ts
new file mode 100644
index 000000000000..48a03b048c7c
--- /dev/null
+++ b/packages/common/locales/es-NI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-NI', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'C$', 'córdoba nicaragüense', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NIO': ['C$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-PA.ts b/packages/common/locales/es-PA.ts
new file mode 100644
index 000000000000..be6617ebf27b
--- /dev/null
+++ b/packages/common/locales/es-PA.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-PA', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['MM/dd/yy', 'MM/dd/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'B/.', 'balboa panameño', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'PAB': ['B/.'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-PE.ts b/packages/common/locales/es-PE.ts
new file mode 100644
index 000000000000..2001f312fd15
--- /dev/null
+++ b/packages/common/locales/es-PE.ts
@@ -0,0 +1,84 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-PE', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'set.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'setiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Ene.', 'Feb.', 'Mar.', 'Abr.', 'May.', 'Jun.', 'Jul.', 'Ago.', 'Set.', 'Oct.', 'Nov.', 'Dic.'
+    ],
+    [
+      'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Setiembre',
+      'Octubre', 'Noviembre', 'Diciembre'
+    ]
+  ],
+  [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/MM/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], 'S/', 'sol peruano', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'PEN': ['S/'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-PH.ts b/packages/common/locales/es-PH.ts
new file mode 100644
index 000000000000..38092e96474c
--- /dev/null
+++ b/packages/common/locales/es-PH.ts
@@ -0,0 +1,66 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-PH', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'X', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sept.', 'oct.', 'nov.',
+      'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '₱', 'peso filipino', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CNY': [u, '¥'],
+    'EGP': [],
+    'ESP': ['₧'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'PHP': ['₱'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-PR.ts b/packages/common/locales/es-PR.ts
new file mode 100644
index 000000000000..02a7ef33f348
--- /dev/null
+++ b/packages/common/locales/es-PR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-PR', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['MM/dd/yy', 'MM/dd/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], '$', 'dólar estadounidense', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-PY.ts b/packages/common/locales/es-PY.ts
new file mode 100644
index 000000000000..41add4d456c4
--- /dev/null
+++ b/packages/common/locales/es-PY.ts
@@ -0,0 +1,75 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-PY', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['do', 'lu', 'ma', 'mi', 'ju', 'vi', 'sa']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sept.', 'oct.', 'nov.',
+      'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00;¤ -#,##0.00', '#E0'], 'Gs.', 'guaraní paraguayo', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'PYG': ['Gs.', '₲'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-SV.ts b/packages/common/locales/es-SV.ts
new file mode 100644
index 000000000000..2bcb13b316ea
--- /dev/null
+++ b/packages/common/locales/es-SV.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-SV', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], '$', 'dólar estadounidense', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-US.ts b/packages/common/locales/es-US.ts
new file mode 100644
index 000000000000..9c812073678a
--- /dev/null
+++ b/packages/common/locales/es-US.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-US', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00', '#E0'], '$', 'dólar estadounidense', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-UY.ts b/packages/common/locales/es-UY.ts
new file mode 100644
index 000000000000..1bab69eb286a
--- /dev/null
+++ b/packages/common/locales/es-UY.ts
@@ -0,0 +1,84 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-UY', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'set.', 'oct.', 'nov.', 'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'setiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Ene.', 'Feb.', 'Mar.', 'Abr.', 'May.', 'Jun.', 'Jul.', 'Ago.', 'Set.', 'Oct.', 'Nov.', 'Dic.'
+    ],
+    [
+      'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Setiembre',
+      'Octubre', 'Noviembre', 'Diciembre'
+    ]
+  ],
+  [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], '$', 'peso uruguayo', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'UYU': ['$'],
+    'VEF': [u, 'BsF'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es-VE.ts b/packages/common/locales/es-VE.ts
new file mode 100644
index 000000000000..63dd0f045357
--- /dev/null
+++ b/packages/common/locales/es-VE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es-VE', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'j', 'v', 's'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa']
+  ],
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sept.', 'oct.', 'nov.',
+      'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 0, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00;¤-#,##0.00', '#E0'], 'Bs.', 'bolívar venezolano', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'ESP': ['₧'],
+    'EUR': [u, '€'],
+    'FKP': [u, 'FK£'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SSP': [u, 'SD£'],
+    'SYP': [u, 'S£'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VEF': ['Bs.'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/es.ts b/packages/common/locales/es.ts
new file mode 100644
index 000000000000..fa0075564cc4
--- /dev/null
+++ b/packages/common/locales/es.ts
@@ -0,0 +1,65 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'es', [['a. m.', 'p. m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'X', 'J', 'V', 'S'], ['dom.', 'lun.', 'mar.', 'mié.', 'jue.', 'vie.', 'sáb.'],
+    ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ene.', 'feb.', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sept.', 'oct.', 'nov.',
+      'dic.'
+    ],
+    [
+      'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+      'octubre', 'noviembre', 'diciembre'
+    ]
+  ],
+  u, [['a. C.', 'd. C.'], u, ['antes de Cristo', 'después de Cristo']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss (zzzz)'], ['{1} {0}', u, '{1}, {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CNY': [u, '¥'],
+    'EGP': [],
+    'ESP': ['₧'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/et.ts b/packages/common/locales/et.ts
new file mode 100644
index 000000000000..8f3114fdcc2a
--- /dev/null
+++ b/packages/common/locales/et.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'et', [['AM', 'PM'], u, u], u,
+  [
+    ['P', 'E', 'T', 'K', 'N', 'R', 'L'], u,
+    ['pühapäev', 'esmaspäev', 'teisipäev', 'kolmapäev', 'neljapäev', 'reede', 'laupäev'],
+    ['P', 'E', 'T', 'K', 'N', 'R', 'L']
+  ],
+  u,
+  [
+    ['J', 'V', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'jaan', 'veebr', 'märts', 'apr', 'mai', 'juuni', 'juuli', 'aug', 'sept', 'okt', 'nov', 'dets'
+    ],
+    [
+      'jaanuar', 'veebruar', 'märts', 'aprill', 'mai', 'juuni', 'juuli', 'august', 'september',
+      'oktoober', 'november', 'detsember'
+    ]
+  ],
+  u, [['eKr', 'pKr'], u, ['enne Kristust', 'pärast Kristust']], 1, [6, 0],
+  ['dd.MM.yy', 'd. MMM y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '×10^', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro',
+  {'AUD': ['AU$', '$'], 'EEK': ['kr'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/eu.ts b/packages/common/locales/eu.ts
new file mode 100644
index 000000000000..026ea79bdf15
--- /dev/null
+++ b/packages/common/locales/eu.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'eu', [['g', 'a'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['I', 'A', 'A', 'A', 'O', 'O', 'L'], ['ig.', 'al.', 'ar.', 'az.', 'og.', 'or.', 'lr.'],
+    ['igandea', 'astelehena', 'asteartea', 'asteazkena', 'osteguna', 'ostirala', 'larunbata'],
+    ['ig.', 'al.', 'ar.', 'az.', 'og.', 'or.', 'lr.']
+  ],
+  [
+    ['I', 'A', 'A', 'A', 'O', 'O', 'L'], ['ig.', 'al.', 'ar.', 'az.', 'og.', 'or.', 'lr.'],
+    ['Igandea', 'Astelehena', 'Asteartea', 'Asteazkena', 'Osteguna', 'Ostirala', 'Larunbata'],
+    ['ig.', 'al.', 'ar.', 'az.', 'og.', 'or.', 'lr.']
+  ],
+  [
+    ['U', 'O', 'M', 'A', 'M', 'E', 'U', 'A', 'I', 'U', 'A', 'A'],
+    [
+      'urt.', 'ots.', 'mar.', 'api.', 'mai.', 'eka.', 'uzt.', 'abu.', 'ira.', 'urr.', 'aza.', 'abe.'
+    ],
+    [
+      'urtarrila', 'otsaila', 'martxoa', 'apirila', 'maiatza', 'ekaina', 'uztaila', 'abuztua',
+      'iraila', 'urria', 'azaroa', 'abendua'
+    ]
+  ],
+  [
+    ['U', 'O', 'M', 'A', 'M', 'E', 'U', 'A', 'I', 'U', 'A', 'A'],
+    [
+      'urt.', 'ots.', 'mar.', 'api.', 'mai.', 'eka.', 'uzt.', 'abu.', 'ira.', 'urr.', 'aza.', 'abe.'
+    ],
+    [
+      'urtarrila', 'Otsaila', 'Martxoa', 'Apirila', 'Maiatza', 'Ekaina', 'Uztaila', 'Abuztua',
+      'Iraila', 'Urria', 'Azaroa', 'Abendua'
+    ]
+  ],
+  [['K.a.', 'K.o.'], u, ['K.a.', 'Kristo ondoren']], 1, [6, 0],
+  [
+    'yy/M/d', 'y MMM d', 'y(\'e\')\'ko\' MMMM\'ren\' d(\'a\')',
+    'y(\'e\')\'ko\' MMMM\'ren\' d(\'a\'), EEEE'
+  ],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss (z)', 'HH:mm:ss (zzzz)'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '% #,##0', '#,##0.00 ¤', '#E0'], '€', 'euroa',
+  {'ESP': ['₧'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/ewo.ts b/packages/common/locales/ewo.ts
new file mode 100644
index 000000000000..66a67fc08fde
--- /dev/null
+++ b/packages/common/locales/ewo.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ewo', [['kíkíríg', 'ngəgógəle'], u, u], u,
+  [
+    ['s', 'm', 's', 's', 's', 'f', 's'], ['sɔ́n', 'mɔ́n', 'smb', 'sml', 'smn', 'fúl', 'sér'],
+    [
+      'sɔ́ndɔ', 'mɔ́ndi', 'sɔ́ndɔ məlú mə́bɛ̌', 'sɔ́ndɔ məlú mə́lɛ́',
+      'sɔ́ndɔ məlú mə́nyi', 'fúladé', 'séradé'
+    ],
+    ['sɔ́n', 'mɔ́n', 'smb', 'sml', 'smn', 'fúl', 'sér']
+  ],
+  u,
+  [
+    ['o', 'b', 'l', 'n', 't', 's', 'z', 'm', 'e', 'a', 'd', 'b'],
+    ['ngo', 'ngb', 'ngl', 'ngn', 'ngt', 'ngs', 'ngz', 'ngm', 'nge', 'nga', 'ngad', 'ngab'],
+    [
+      'ngɔn osú', 'ngɔn bɛ̌', 'ngɔn lála', 'ngɔn nyina', 'ngɔn tána', 'ngɔn saməna',
+      'ngɔn zamgbála', 'ngɔn mwom', 'ngɔn ebulú', 'ngɔn awóm', 'ngɔn awóm ai dziá',
+      'ngɔn awóm ai bɛ̌'
+    ]
+  ],
+  u, [['oyk', 'ayk'], u, ['osúsúa Yésus kiri', 'ámvus Yésus Kirís']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FCFA', 'Fəláŋ CFA (BEAC)',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/extra/af-NA.ts b/packages/common/locales/extra/af-NA.ts
new file mode 100644
index 000000000000..d02d1b858ba0
--- /dev/null
+++ b/packages/common/locales/extra/af-NA.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['mn', 'o', 'm', 'a', 'n'], ['middernag', 'die oggend', 'die middag', 'die aand', 'die nag'], u],
+  [['mn', 'o', 'm', 'a', 'n'], ['middernag', 'oggend', 'middag', 'aand', 'nag'], u],
+  ['00:00', ['05:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'], ['00:00', '05:00']]
+];
diff --git a/packages/common/locales/extra/af.ts b/packages/common/locales/extra/af.ts
new file mode 100644
index 000000000000..d02d1b858ba0
--- /dev/null
+++ b/packages/common/locales/extra/af.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['mn', 'o', 'm', 'a', 'n'], ['middernag', 'die oggend', 'die middag', 'die aand', 'die nag'], u],
+  [['mn', 'o', 'm', 'a', 'n'], ['middernag', 'oggend', 'middag', 'aand', 'nag'], u],
+  ['00:00', ['05:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'], ['00:00', '05:00']]
+];
diff --git a/packages/common/locales/extra/agq.ts b/packages/common/locales/extra/agq.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/agq.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ak.ts b/packages/common/locales/extra/ak.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ak.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/am.ts b/packages/common/locales/extra/am.ts
new file mode 100644
index 000000000000..da1428d29fe4
--- /dev/null
+++ b/packages/common/locales/extra/am.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['እኩለ ሌሊት', 'ቀ', 'ጥዋት1', 'ከሰዓት1', 'ማታ1', 'ሌሊት1'],
+    ['እኩለ ሌሊት', 'ቀትር', 'ጥዋት1', 'ከሰዓት1', 'ማታ1', 'ሌሊት1'], u
+  ],
+  [
+    [
+      'እኩለ ሌሊት', 'ቀትር', 'ጥዋት', 'ከሰዓት በኋላ', 'ማታ',
+      'ሌሊት'
+    ],
+    [
+      'እኩለ ሌሊት', 'ቀትር', 'ጥዋት1', 'ከሰዓት በኋላ', 'ማታ',
+      'ሌሊት'
+    ],
+    u
+  ],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-AE.ts b/packages/common/locales/extra/ar-AE.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-AE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-BH.ts b/packages/common/locales/extra/ar-BH.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-BH.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-DJ.ts b/packages/common/locales/extra/ar-DJ.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-DJ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-DZ.ts b/packages/common/locales/extra/ar-DZ.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-DZ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-EG.ts b/packages/common/locales/extra/ar-EG.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-EG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-EH.ts b/packages/common/locales/extra/ar-EH.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-EH.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-ER.ts b/packages/common/locales/extra/ar-ER.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-ER.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-IL.ts b/packages/common/locales/extra/ar-IL.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-IL.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-IQ.ts b/packages/common/locales/extra/ar-IQ.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-IQ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-JO.ts b/packages/common/locales/extra/ar-JO.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-JO.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-KM.ts b/packages/common/locales/extra/ar-KM.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-KM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-KW.ts b/packages/common/locales/extra/ar-KW.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-KW.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-LB.ts b/packages/common/locales/extra/ar-LB.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-LB.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-LY.ts b/packages/common/locales/extra/ar-LY.ts
new file mode 100644
index 000000000000..e9d205be713c
--- /dev/null
+++ b/packages/common/locales/extra/ar-LY.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ل'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-MA.ts b/packages/common/locales/extra/ar-MA.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-MA.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-MR.ts b/packages/common/locales/extra/ar-MR.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-MR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-OM.ts b/packages/common/locales/extra/ar-OM.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-OM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-PS.ts b/packages/common/locales/extra/ar-PS.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-PS.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-QA.ts b/packages/common/locales/extra/ar-QA.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-QA.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-SA.ts b/packages/common/locales/extra/ar-SA.ts
new file mode 100644
index 000000000000..e9d205be713c
--- /dev/null
+++ b/packages/common/locales/extra/ar-SA.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ل'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-SD.ts b/packages/common/locales/extra/ar-SD.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-SD.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-SO.ts b/packages/common/locales/extra/ar-SO.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-SO.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-SS.ts b/packages/common/locales/extra/ar-SS.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-SS.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-SY.ts b/packages/common/locales/extra/ar-SY.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-SY.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-TD.ts b/packages/common/locales/extra/ar-TD.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-TD.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-TN.ts b/packages/common/locales/extra/ar-TN.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-TN.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar-YE.ts b/packages/common/locales/extra/ar-YE.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar-YE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ar.ts b/packages/common/locales/extra/ar.ts
new file mode 100644
index 000000000000..71dd56862b33
--- /dev/null
+++ b/packages/common/locales/extra/ar.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ],
+    [
+      'فجرًا', 'ص', 'ظهرًا', 'بعد الظهر', 'مساءً', 'منتصف الليل',
+      'ليلاً'
+    ],
+    [
+      'فجرًا', 'صباحًا', 'ظهرًا', 'بعد الظهر', 'مساءً',
+      'منتصف الليل', 'ليلاً'
+    ]
+  ],
+  u,
+  [
+    ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '01:00'], ['01:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/as.ts b/packages/common/locales/extra/as.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/as.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/asa.ts b/packages/common/locales/extra/asa.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/asa.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ast.ts b/packages/common/locales/extra/ast.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ast.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/az-Cyrl.ts b/packages/common/locales/extra/az-Cyrl.ts
new file mode 100644
index 000000000000..e8c0401160ca
--- /dev/null
+++ b/packages/common/locales/extra/az-Cyrl.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'ҝеҹәјары', 'ҝ', 'сүбһ', 'сәһәр', 'ҝүндүз', 'ахшамүстү',
+      'ахшам', 'ҝеҹә'
+    ],
+    [
+      'ҝеҹәјары', 'ҝүнорта', 'сүбһ', 'сәһәр', 'ҝүндүз',
+      'ахшамүстү', 'ахшам', 'ҝеҹә'
+    ],
+    u
+  ],
+  [
+    [
+      'ҝеҹәјары', 'ҝүнорта', 'сүбһ', 'сәһәр', 'ҝүндүз',
+      'ахшамүстү', 'ахшам', 'ҝеҹә'
+    ],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['04:00', '06:00'], ['06:00', '12:00'], ['12:00', '17:00'],
+    ['17:00', '19:00'], ['19:00', '24:00'], ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/az-Latn.ts b/packages/common/locales/extra/az-Latn.ts
new file mode 100644
index 000000000000..ccf74572ad53
--- /dev/null
+++ b/packages/common/locales/extra/az-Latn.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['gecəyarı', 'g', 'sübh', 'səhər', 'gündüz', 'axşamüstü', 'axşam', 'gecə'],
+    ['gecəyarı', 'günorta', 'sübh', 'səhər', 'gündüz', 'axşamüstü', 'axşam', 'gecə'], u
+  ],
+  [
+    ['gecəyarı', 'günorta', 'sübh', 'səhər', 'gündüz', 'axşamüstü', 'axşam', 'gecə'],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['04:00', '06:00'], ['06:00', '12:00'], ['12:00', '17:00'],
+    ['17:00', '19:00'], ['19:00', '24:00'], ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/az.ts b/packages/common/locales/extra/az.ts
new file mode 100644
index 000000000000..ccf74572ad53
--- /dev/null
+++ b/packages/common/locales/extra/az.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['gecəyarı', 'g', 'sübh', 'səhər', 'gündüz', 'axşamüstü', 'axşam', 'gecə'],
+    ['gecəyarı', 'günorta', 'sübh', 'səhər', 'gündüz', 'axşamüstü', 'axşam', 'gecə'], u
+  ],
+  [
+    ['gecəyarı', 'günorta', 'sübh', 'səhər', 'gündüz', 'axşamüstü', 'axşam', 'gecə'],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['04:00', '06:00'], ['06:00', '12:00'], ['12:00', '17:00'],
+    ['17:00', '19:00'], ['19:00', '24:00'], ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/bas.ts b/packages/common/locales/extra/bas.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/bas.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/be.ts b/packages/common/locales/extra/be.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/be.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/bem.ts b/packages/common/locales/extra/bem.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/bem.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/bez.ts b/packages/common/locales/extra/bez.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/bez.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/bg.ts b/packages/common/locales/extra/bg.ts
new file mode 100644
index 000000000000..5428282e7447
--- /dev/null
+++ b/packages/common/locales/extra/bg.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'полунощ', 'сутринта', 'на обед', 'следобед', 'вечерта',
+      'през нощта'
+    ],
+    u,
+    [
+      'полунощ', 'сутринта', 'на обяд', 'следобед', 'вечерта',
+      'през нощта'
+    ]
+  ],
+  [
+    [
+      'полунощ', 'сутринта', 'наобед', 'следобед', 'вечерта',
+      'през нощта'
+    ],
+    [
+      'полунощ', 'сутринта', 'на обед', 'следобед', 'вечерта',
+      'през нощта'
+    ],
+    u
+  ],
+  [
+    '00:00', ['04:00', '11:00'], ['11:00', '14:00'], ['14:00', '18:00'], ['18:00', '22:00'],
+    ['22:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/bm.ts b/packages/common/locales/extra/bm.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/bm.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/bn-IN.ts b/packages/common/locales/extra/bn-IN.ts
new file mode 100644
index 000000000000..f836d01a39ce
--- /dev/null
+++ b/packages/common/locales/extra/bn-IN.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'ভোর', 'সকাল', 'দুপুর', 'বিকাল', 'সন্ধ্যা',
+      'রাত্রি'
+    ],
+    u,
+    [
+      'ভোর', 'সকাল', 'দুপুর', 'বিকাল', 'সন্ধ্যা',
+      'রাত্রিতে'
+    ]
+  ],
+  [
+    [
+      'ভোর', 'সকাল', 'দুপুর', 'বিকাল', 'সন্ধ্যা',
+      'রাত্রি'
+    ],
+    u, u
+  ],
+  [
+    ['04:00', '06:00'], ['06:00', '12:00'], ['12:00', '16:00'], ['16:00', '18:00'],
+    ['18:00', '20:00'], ['20:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/bn.ts b/packages/common/locales/extra/bn.ts
new file mode 100644
index 000000000000..f836d01a39ce
--- /dev/null
+++ b/packages/common/locales/extra/bn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'ভোর', 'সকাল', 'দুপুর', 'বিকাল', 'সন্ধ্যা',
+      'রাত্রি'
+    ],
+    u,
+    [
+      'ভোর', 'সকাল', 'দুপুর', 'বিকাল', 'সন্ধ্যা',
+      'রাত্রিতে'
+    ]
+  ],
+  [
+    [
+      'ভোর', 'সকাল', 'দুপুর', 'বিকাল', 'সন্ধ্যা',
+      'রাত্রি'
+    ],
+    u, u
+  ],
+  [
+    ['04:00', '06:00'], ['06:00', '12:00'], ['12:00', '16:00'], ['16:00', '18:00'],
+    ['18:00', '20:00'], ['20:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/bo-IN.ts b/packages/common/locales/extra/bo-IN.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/bo-IN.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/bo.ts b/packages/common/locales/extra/bo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/bo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/br.ts b/packages/common/locales/extra/br.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/br.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/brx.ts b/packages/common/locales/extra/brx.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/brx.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/bs-Cyrl.ts b/packages/common/locales/extra/bs-Cyrl.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/bs-Cyrl.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/bs-Latn.ts b/packages/common/locales/extra/bs-Latn.ts
new file mode 100644
index 000000000000..6376677b919f
--- /dev/null
+++ b/packages/common/locales/extra/bs-Latn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['ponoć', 'podne', 'ujutro', 'poslijepodne', 'navečer', 'po noći'], u, u], u,
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/bs.ts b/packages/common/locales/extra/bs.ts
new file mode 100644
index 000000000000..6376677b919f
--- /dev/null
+++ b/packages/common/locales/extra/bs.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['ponoć', 'podne', 'ujutro', 'poslijepodne', 'navečer', 'po noći'], u, u], u,
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ca-AD.ts b/packages/common/locales/extra/ca-AD.ts
new file mode 100644
index 000000000000..5baa88d15224
--- /dev/null
+++ b/packages/common/locales/extra/ca-AD.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mitjanit', 'mat.', 'matí', 'md', 'tarda', 'vespre', 'nit'],
+    ['mitjanit', 'matinada', 'matí', 'migdia', 'tarda', 'vespre', 'nit'], u
+  ],
+  [['mitjanit', 'matinada', 'matí', 'migdia', 'tarda', 'vespre', 'nit'], u, u],
+  [
+    '00:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '21:00'], ['21:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ca-ES-VALENCIA.ts b/packages/common/locales/extra/ca-ES-VALENCIA.ts
new file mode 100644
index 000000000000..5baa88d15224
--- /dev/null
+++ b/packages/common/locales/extra/ca-ES-VALENCIA.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mitjanit', 'mat.', 'matí', 'md', 'tarda', 'vespre', 'nit'],
+    ['mitjanit', 'matinada', 'matí', 'migdia', 'tarda', 'vespre', 'nit'], u
+  ],
+  [['mitjanit', 'matinada', 'matí', 'migdia', 'tarda', 'vespre', 'nit'], u, u],
+  [
+    '00:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '21:00'], ['21:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ca-FR.ts b/packages/common/locales/extra/ca-FR.ts
new file mode 100644
index 000000000000..5baa88d15224
--- /dev/null
+++ b/packages/common/locales/extra/ca-FR.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mitjanit', 'mat.', 'matí', 'md', 'tarda', 'vespre', 'nit'],
+    ['mitjanit', 'matinada', 'matí', 'migdia', 'tarda', 'vespre', 'nit'], u
+  ],
+  [['mitjanit', 'matinada', 'matí', 'migdia', 'tarda', 'vespre', 'nit'], u, u],
+  [
+    '00:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '21:00'], ['21:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ca-IT.ts b/packages/common/locales/extra/ca-IT.ts
new file mode 100644
index 000000000000..5baa88d15224
--- /dev/null
+++ b/packages/common/locales/extra/ca-IT.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mitjanit', 'mat.', 'matí', 'md', 'tarda', 'vespre', 'nit'],
+    ['mitjanit', 'matinada', 'matí', 'migdia', 'tarda', 'vespre', 'nit'], u
+  ],
+  [['mitjanit', 'matinada', 'matí', 'migdia', 'tarda', 'vespre', 'nit'], u, u],
+  [
+    '00:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '21:00'], ['21:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ca.ts b/packages/common/locales/extra/ca.ts
new file mode 100644
index 000000000000..5baa88d15224
--- /dev/null
+++ b/packages/common/locales/extra/ca.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mitjanit', 'mat.', 'matí', 'md', 'tarda', 'vespre', 'nit'],
+    ['mitjanit', 'matinada', 'matí', 'migdia', 'tarda', 'vespre', 'nit'], u
+  ],
+  [['mitjanit', 'matinada', 'matí', 'migdia', 'tarda', 'vespre', 'nit'], u, u],
+  [
+    '00:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '21:00'], ['21:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ccp-IN.ts b/packages/common/locales/extra/ccp-IN.ts
new file mode 100644
index 000000000000..0a9198542472
--- /dev/null
+++ b/packages/common/locales/extra/ccp-IN.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      '𑄛𑄧𑄖𑄳𑄠𑄃𑄟𑄧𑄣𑄳𑄠𑄬', '𑄝𑄬𑄚𑄳𑄠𑄬',
+      '𑄘𑄨𑄝𑄪𑄎𑄳𑄠', '𑄝𑄬𑄣𑄳𑄠𑄬', '𑄥𑄎𑄧𑄚𑄳𑄠',
+      '𑄢𑄬𑄖𑄴'
+    ],
+    u, u
+  ],
+  u,
+  [
+    ['04:00', '06:00'], ['06:00', '12:00'], ['12:00', '16:00'], ['16:00', '18:00'],
+    ['18:00', '20:00'], ['20:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ccp.ts b/packages/common/locales/extra/ccp.ts
new file mode 100644
index 000000000000..0a9198542472
--- /dev/null
+++ b/packages/common/locales/extra/ccp.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      '𑄛𑄧𑄖𑄳𑄠𑄃𑄟𑄧𑄣𑄳𑄠𑄬', '𑄝𑄬𑄚𑄳𑄠𑄬',
+      '𑄘𑄨𑄝𑄪𑄎𑄳𑄠', '𑄝𑄬𑄣𑄳𑄠𑄬', '𑄥𑄎𑄧𑄚𑄳𑄠',
+      '𑄢𑄬𑄖𑄴'
+    ],
+    u, u
+  ],
+  u,
+  [
+    ['04:00', '06:00'], ['06:00', '12:00'], ['12:00', '16:00'], ['16:00', '18:00'],
+    ['18:00', '20:00'], ['20:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ce.ts b/packages/common/locales/extra/ce.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ce.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/cgg.ts b/packages/common/locales/extra/cgg.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/cgg.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/chr.ts b/packages/common/locales/extra/chr.ts
new file mode 100644
index 000000000000..aa148a829c71
--- /dev/null
+++ b/packages/common/locales/extra/chr.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Ꭲ', 'ᏌᎾᎴ', 'ᏒᎯᏱᎢᏗᏢ'], ['ᎢᎦ', 'ᏌᎾᎴ', 'ᏒᎯᏱᎢᏗᏢ'], u],
+  [['ᎢᎦ', 'ᏌᎾᎴ', 'ᏒᎯᏱᎢᏗᏢ'], u, u],
+  ['12:00', ['00:00', '12:00'], ['12:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/ckb-IR.ts b/packages/common/locales/extra/ckb-IR.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ckb-IR.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ckb.ts b/packages/common/locales/extra/ckb.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ckb.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/cs.ts b/packages/common/locales/extra/cs.ts
new file mode 100644
index 000000000000..58d64f65136f
--- /dev/null
+++ b/packages/common/locales/extra/cs.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['půl.', 'pol.', 'r.', 'd.', 'o.', 'v.', 'n.'],
+    ['půln.', 'pol.', 'r.', 'dop.', 'odp.', 'več.', 'v n.'],
+    ['půlnoc', 'poledne', 'ráno', 'dopoledne', 'odpoledne', 'večer', 'v noci']
+  ],
+  [
+    ['půl.', 'pol.', 'ráno', 'dop.', 'odp.', 'več.', 'noc'],
+    ['půlnoc', 'poledne', 'ráno', 'dopoledne', 'odpoledne', 'večer', 'noc'], u
+  ],
+  [
+    '00:00', '12:00', ['04:00', '09:00'], ['09:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '22:00'], ['22:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/cu.ts b/packages/common/locales/extra/cu.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/cu.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/cy.ts b/packages/common/locales/extra/cy.ts
new file mode 100644
index 000000000000..cec2c0cd3a4e
--- /dev/null
+++ b/packages/common/locales/extra/cy.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['canol nos', 'canol dydd', 'yn y bore', 'yn y prynhawn', 'min nos'],
+    ['canol nos', 'canol dydd', 'y bore', 'y prynhawn', 'yr hwyr'], u
+  ],
+  [
+    ['canol nos', 'canol dydd', 'bore', 'prynhawn', 'min nos'],
+    ['canol nos', 'canol dydd', 'bore', 'prynhawn', 'yr hwyr'],
+    ['canol nos', 'canol dydd', 'y bore', 'y prynhawn', 'yr hwyr']
+  ],
+  ['00:00', '12:00', ['00:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/da-GL.ts b/packages/common/locales/extra/da-GL.ts
new file mode 100644
index 000000000000..e2b2b2dd8f13
--- /dev/null
+++ b/packages/common/locales/extra/da-GL.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['midnat', 'om morgenen', 'om formiddagen', 'om eftermiddagen', 'om aftenen', 'om natten'], u, u
+  ],
+  [['midnat', 'morgen', 'formiddag', 'eftermiddag', 'aften', 'nat'], u, u],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/da.ts b/packages/common/locales/extra/da.ts
new file mode 100644
index 000000000000..e2b2b2dd8f13
--- /dev/null
+++ b/packages/common/locales/extra/da.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['midnat', 'om morgenen', 'om formiddagen', 'om eftermiddagen', 'om aftenen', 'om natten'], u, u
+  ],
+  [['midnat', 'morgen', 'formiddag', 'eftermiddag', 'aften', 'nat'], u, u],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/dav.ts b/packages/common/locales/extra/dav.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/dav.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/de-AT.ts b/packages/common/locales/extra/de-AT.ts
new file mode 100644
index 000000000000..d4e7165a06f9
--- /dev/null
+++ b/packages/common/locales/extra/de-AT.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Mitternacht', 'morgens', 'vormittags', 'mittags', 'nachmittags', 'abends', 'nachts'], u, u],
+  [['Mitternacht', 'Morgen', 'Vormittag', 'Mittag', 'Nachmittag', 'Abend', 'Nacht'], u, u],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/de-BE.ts b/packages/common/locales/extra/de-BE.ts
new file mode 100644
index 000000000000..d4e7165a06f9
--- /dev/null
+++ b/packages/common/locales/extra/de-BE.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Mitternacht', 'morgens', 'vormittags', 'mittags', 'nachmittags', 'abends', 'nachts'], u, u],
+  [['Mitternacht', 'Morgen', 'Vormittag', 'Mittag', 'Nachmittag', 'Abend', 'Nacht'], u, u],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/de-CH.ts b/packages/common/locales/extra/de-CH.ts
new file mode 100644
index 000000000000..d4e7165a06f9
--- /dev/null
+++ b/packages/common/locales/extra/de-CH.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Mitternacht', 'morgens', 'vormittags', 'mittags', 'nachmittags', 'abends', 'nachts'], u, u],
+  [['Mitternacht', 'Morgen', 'Vormittag', 'Mittag', 'Nachmittag', 'Abend', 'Nacht'], u, u],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/de-IT.ts b/packages/common/locales/extra/de-IT.ts
new file mode 100644
index 000000000000..d4e7165a06f9
--- /dev/null
+++ b/packages/common/locales/extra/de-IT.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Mitternacht', 'morgens', 'vormittags', 'mittags', 'nachmittags', 'abends', 'nachts'], u, u],
+  [['Mitternacht', 'Morgen', 'Vormittag', 'Mittag', 'Nachmittag', 'Abend', 'Nacht'], u, u],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/de-LI.ts b/packages/common/locales/extra/de-LI.ts
new file mode 100644
index 000000000000..d4e7165a06f9
--- /dev/null
+++ b/packages/common/locales/extra/de-LI.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Mitternacht', 'morgens', 'vormittags', 'mittags', 'nachmittags', 'abends', 'nachts'], u, u],
+  [['Mitternacht', 'Morgen', 'Vormittag', 'Mittag', 'Nachmittag', 'Abend', 'Nacht'], u, u],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/de-LU.ts b/packages/common/locales/extra/de-LU.ts
new file mode 100644
index 000000000000..d4e7165a06f9
--- /dev/null
+++ b/packages/common/locales/extra/de-LU.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Mitternacht', 'morgens', 'vormittags', 'mittags', 'nachmittags', 'abends', 'nachts'], u, u],
+  [['Mitternacht', 'Morgen', 'Vormittag', 'Mittag', 'Nachmittag', 'Abend', 'Nacht'], u, u],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/de.ts b/packages/common/locales/extra/de.ts
new file mode 100644
index 000000000000..d4e7165a06f9
--- /dev/null
+++ b/packages/common/locales/extra/de.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Mitternacht', 'morgens', 'vormittags', 'mittags', 'nachmittags', 'abends', 'nachts'], u, u],
+  [['Mitternacht', 'Morgen', 'Vormittag', 'Mittag', 'Nachmittag', 'Abend', 'Nacht'], u, u],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '13:00'], ['13:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/dje.ts b/packages/common/locales/extra/dje.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/dje.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/dsb.ts b/packages/common/locales/extra/dsb.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/dsb.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/dua.ts b/packages/common/locales/extra/dua.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/dua.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/dyo.ts b/packages/common/locales/extra/dyo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/dyo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/dz.ts b/packages/common/locales/extra/dz.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/dz.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ebu.ts b/packages/common/locales/extra/ebu.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ebu.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ee-TG.ts b/packages/common/locales/extra/ee-TG.ts
new file mode 100644
index 000000000000..7ee78aa1e0e3
--- /dev/null
+++ b/packages/common/locales/extra/ee-TG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['fɔŋli', 'ŋdi', 'ŋdɔ', 'ɣetrɔ', 'fiẽ', 'zã'], u, u], u,
+  [
+    ['04:00', '05:00'], ['05:00', '12:00'], ['12:00', '14:00'], ['14:00', '18:00'],
+    ['18:00', '21:00'], ['21:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ee.ts b/packages/common/locales/extra/ee.ts
new file mode 100644
index 000000000000..7ee78aa1e0e3
--- /dev/null
+++ b/packages/common/locales/extra/ee.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['fɔŋli', 'ŋdi', 'ŋdɔ', 'ɣetrɔ', 'fiẽ', 'zã'], u, u], u,
+  [
+    ['04:00', '05:00'], ['05:00', '12:00'], ['12:00', '14:00'], ['14:00', '18:00'],
+    ['18:00', '21:00'], ['21:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/el-CY.ts b/packages/common/locales/extra/el-CY.ts
new file mode 100644
index 000000000000..53cf0dd83906
--- /dev/null
+++ b/packages/common/locales/extra/el-CY.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['πρωί', 'μεσημ.', 'απόγ.', 'βράδυ'], u,
+    ['πρωί', 'μεσημέρι', 'απόγευμα', 'βράδυ']
+  ],
+  u, [['04:00', '12:00'], ['12:00', '17:00'], ['17:00', '20:00'], ['20:00', '04:00']]
+];
diff --git a/packages/common/locales/extra/el.ts b/packages/common/locales/extra/el.ts
new file mode 100644
index 000000000000..53cf0dd83906
--- /dev/null
+++ b/packages/common/locales/extra/el.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['πρωί', 'μεσημ.', 'απόγ.', 'βράδυ'], u,
+    ['πρωί', 'μεσημέρι', 'απόγευμα', 'βράδυ']
+  ],
+  u, [['04:00', '12:00'], ['12:00', '17:00'], ['17:00', '20:00'], ['20:00', '04:00']]
+];
diff --git a/packages/common/locales/extra/en-001.ts b/packages/common/locales/extra/en-001.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-001.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-150.ts b/packages/common/locales/extra/en-150.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-150.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-AG.ts b/packages/common/locales/extra/en-AG.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-AG.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-AI.ts b/packages/common/locales/extra/en-AI.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-AI.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-AS.ts b/packages/common/locales/extra/en-AS.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-AS.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-AT.ts b/packages/common/locales/extra/en-AT.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-AT.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-AU.ts b/packages/common/locales/extra/en-AU.ts
new file mode 100644
index 000000000000..3d52f2b0b3a3
--- /dev/null
+++ b/packages/common/locales/extra/en-AU.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['midnight', 'midday', 'morning', 'afternoon', 'evening', 'night'], u,
+    ['midnight', 'midday', 'in the morning', 'in the afternoon', 'in the evening', 'at night']
+  ],
+  [['midnight', 'midday', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-BB.ts b/packages/common/locales/extra/en-BB.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-BB.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-BE.ts b/packages/common/locales/extra/en-BE.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-BE.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-BI.ts b/packages/common/locales/extra/en-BI.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-BI.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-BM.ts b/packages/common/locales/extra/en-BM.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-BM.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-BS.ts b/packages/common/locales/extra/en-BS.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-BS.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-BW.ts b/packages/common/locales/extra/en-BW.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-BW.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-BZ.ts b/packages/common/locales/extra/en-BZ.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-BZ.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-CA.ts b/packages/common/locales/extra/en-CA.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-CA.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-CC.ts b/packages/common/locales/extra/en-CC.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-CC.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-CH.ts b/packages/common/locales/extra/en-CH.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-CH.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-CK.ts b/packages/common/locales/extra/en-CK.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-CK.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-CM.ts b/packages/common/locales/extra/en-CM.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-CM.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-CX.ts b/packages/common/locales/extra/en-CX.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-CX.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-CY.ts b/packages/common/locales/extra/en-CY.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-CY.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-DE.ts b/packages/common/locales/extra/en-DE.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-DE.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-DG.ts b/packages/common/locales/extra/en-DG.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-DG.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-DK.ts b/packages/common/locales/extra/en-DK.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-DK.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-DM.ts b/packages/common/locales/extra/en-DM.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-DM.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-ER.ts b/packages/common/locales/extra/en-ER.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-ER.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-FI.ts b/packages/common/locales/extra/en-FI.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-FI.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-FJ.ts b/packages/common/locales/extra/en-FJ.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-FJ.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-FK.ts b/packages/common/locales/extra/en-FK.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-FK.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-FM.ts b/packages/common/locales/extra/en-FM.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-FM.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-GB.ts b/packages/common/locales/extra/en-GB.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-GB.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-GD.ts b/packages/common/locales/extra/en-GD.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-GD.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-GG.ts b/packages/common/locales/extra/en-GG.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-GG.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-GH.ts b/packages/common/locales/extra/en-GH.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-GH.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-GI.ts b/packages/common/locales/extra/en-GI.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-GI.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-GM.ts b/packages/common/locales/extra/en-GM.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-GM.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-GU.ts b/packages/common/locales/extra/en-GU.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-GU.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-GY.ts b/packages/common/locales/extra/en-GY.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-GY.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-HK.ts b/packages/common/locales/extra/en-HK.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-HK.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-IE.ts b/packages/common/locales/extra/en-IE.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-IE.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-IL.ts b/packages/common/locales/extra/en-IL.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-IL.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-IM.ts b/packages/common/locales/extra/en-IM.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-IM.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-IN.ts b/packages/common/locales/extra/en-IN.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-IN.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-IO.ts b/packages/common/locales/extra/en-IO.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-IO.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-JE.ts b/packages/common/locales/extra/en-JE.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-JE.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-JM.ts b/packages/common/locales/extra/en-JM.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-JM.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-KE.ts b/packages/common/locales/extra/en-KE.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-KE.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-KI.ts b/packages/common/locales/extra/en-KI.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-KI.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-KN.ts b/packages/common/locales/extra/en-KN.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-KN.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-KY.ts b/packages/common/locales/extra/en-KY.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-KY.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-LC.ts b/packages/common/locales/extra/en-LC.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-LC.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-LR.ts b/packages/common/locales/extra/en-LR.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-LR.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-LS.ts b/packages/common/locales/extra/en-LS.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-LS.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-MG.ts b/packages/common/locales/extra/en-MG.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-MG.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-MH.ts b/packages/common/locales/extra/en-MH.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-MH.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-MO.ts b/packages/common/locales/extra/en-MO.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-MO.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-MP.ts b/packages/common/locales/extra/en-MP.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-MP.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-MS.ts b/packages/common/locales/extra/en-MS.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-MS.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-MT.ts b/packages/common/locales/extra/en-MT.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-MT.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-MU.ts b/packages/common/locales/extra/en-MU.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-MU.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-MW.ts b/packages/common/locales/extra/en-MW.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-MW.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-MY.ts b/packages/common/locales/extra/en-MY.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-MY.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-NA.ts b/packages/common/locales/extra/en-NA.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-NA.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-NF.ts b/packages/common/locales/extra/en-NF.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-NF.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-NG.ts b/packages/common/locales/extra/en-NG.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-NG.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-NL.ts b/packages/common/locales/extra/en-NL.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-NL.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-NR.ts b/packages/common/locales/extra/en-NR.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-NR.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-NU.ts b/packages/common/locales/extra/en-NU.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-NU.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-NZ.ts b/packages/common/locales/extra/en-NZ.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-NZ.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-PG.ts b/packages/common/locales/extra/en-PG.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-PG.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-PH.ts b/packages/common/locales/extra/en-PH.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-PH.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-PK.ts b/packages/common/locales/extra/en-PK.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-PK.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-PN.ts b/packages/common/locales/extra/en-PN.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-PN.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-PR.ts b/packages/common/locales/extra/en-PR.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-PR.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-PW.ts b/packages/common/locales/extra/en-PW.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-PW.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-RW.ts b/packages/common/locales/extra/en-RW.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-RW.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SB.ts b/packages/common/locales/extra/en-SB.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SB.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SC.ts b/packages/common/locales/extra/en-SC.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SC.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SD.ts b/packages/common/locales/extra/en-SD.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SD.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SE.ts b/packages/common/locales/extra/en-SE.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SE.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SG.ts b/packages/common/locales/extra/en-SG.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SG.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SH.ts b/packages/common/locales/extra/en-SH.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SH.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SI.ts b/packages/common/locales/extra/en-SI.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SI.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SL.ts b/packages/common/locales/extra/en-SL.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SL.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SS.ts b/packages/common/locales/extra/en-SS.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SS.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SX.ts b/packages/common/locales/extra/en-SX.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SX.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-SZ.ts b/packages/common/locales/extra/en-SZ.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-SZ.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-TC.ts b/packages/common/locales/extra/en-TC.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-TC.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-TK.ts b/packages/common/locales/extra/en-TK.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-TK.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-TO.ts b/packages/common/locales/extra/en-TO.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-TO.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-TT.ts b/packages/common/locales/extra/en-TT.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-TT.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-TV.ts b/packages/common/locales/extra/en-TV.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-TV.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-TZ.ts b/packages/common/locales/extra/en-TZ.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-TZ.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-UG.ts b/packages/common/locales/extra/en-UG.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-UG.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-UM.ts b/packages/common/locales/extra/en-UM.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-UM.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-US-POSIX.ts b/packages/common/locales/extra/en-US-POSIX.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-US-POSIX.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-VC.ts b/packages/common/locales/extra/en-VC.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-VC.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-VG.ts b/packages/common/locales/extra/en-VG.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-VG.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-VI.ts b/packages/common/locales/extra/en-VI.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-VI.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-VU.ts b/packages/common/locales/extra/en-VU.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-VU.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-WS.ts b/packages/common/locales/extra/en-WS.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-WS.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-ZA.ts b/packages/common/locales/extra/en-ZA.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-ZA.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-ZM.ts b/packages/common/locales/extra/en-ZM.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-ZM.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en-ZW.ts b/packages/common/locales/extra/en-ZW.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en-ZW.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/en.ts b/packages/common/locales/extra/en.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/en.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/eo.ts b/packages/common/locales/extra/eo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/eo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/es-419.ts b/packages/common/locales/extra/es-419.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-419.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-AR.ts b/packages/common/locales/extra/es-AR.ts
new file mode 100644
index 000000000000..750f4dbd188b
--- /dev/null
+++ b/packages/common/locales/extra/es-AR.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'],
+    ['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u
+  ],
+  [
+    ['m.', 'madrugada', 'mañana', 'tarde', 'noche'],
+    ['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u
+  ],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-BO.ts b/packages/common/locales/extra/es-BO.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-BO.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-BR.ts b/packages/common/locales/extra/es-BR.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-BR.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-BZ.ts b/packages/common/locales/extra/es-BZ.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-BZ.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-CL.ts b/packages/common/locales/extra/es-CL.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-CL.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-CO.ts b/packages/common/locales/extra/es-CO.ts
new file mode 100644
index 000000000000..b97e5c8bfb52
--- /dev/null
+++ b/packages/common/locales/extra/es-CO.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'],
+    ['m.', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'],
+    ['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche']
+  ],
+  [
+    ['m.', 'madrugada', 'mañana', 'tarde', 'noche'], u,
+    ['mediodía', 'madrugada', 'mañana', 'tarde', 'noche']
+  ],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-CR.ts b/packages/common/locales/extra/es-CR.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-CR.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-CU.ts b/packages/common/locales/extra/es-CU.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-CU.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-DO.ts b/packages/common/locales/extra/es-DO.ts
new file mode 100644
index 000000000000..775fb6b837b6
--- /dev/null
+++ b/packages/common/locales/extra/es-DO.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mediodía', 'día', 'mañana', 'tarde', 'noche'],
+    ['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u
+  ],
+  [
+    ['m.', 'madrugada', 'mañana', 'tarde', 'noche'],
+    ['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u
+  ],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-EA.ts b/packages/common/locales/extra/es-EA.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-EA.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-EC.ts b/packages/common/locales/extra/es-EC.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-EC.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-GQ.ts b/packages/common/locales/extra/es-GQ.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-GQ.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-GT.ts b/packages/common/locales/extra/es-GT.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-GT.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-HN.ts b/packages/common/locales/extra/es-HN.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-HN.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-IC.ts b/packages/common/locales/extra/es-IC.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-IC.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-MX.ts b/packages/common/locales/extra/es-MX.ts
new file mode 100644
index 000000000000..8f3571b8bf79
--- /dev/null
+++ b/packages/common/locales/extra/es-MX.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['del mediodía', 'de la madrugada', 'mañana', 'de la tarde', 'de la noche'],
+    ['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u
+  ],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-NI.ts b/packages/common/locales/extra/es-NI.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-NI.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-PA.ts b/packages/common/locales/extra/es-PA.ts
new file mode 100644
index 000000000000..083d6a0e52dc
--- /dev/null
+++ b/packages/common/locales/extra/es-PA.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'],
+    ['mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u
+  ],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-PE.ts b/packages/common/locales/extra/es-PE.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-PE.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-PH.ts b/packages/common/locales/extra/es-PH.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-PH.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-PR.ts b/packages/common/locales/extra/es-PR.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-PR.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-PY.ts b/packages/common/locales/extra/es-PY.ts
new file mode 100644
index 000000000000..7f8d88221450
--- /dev/null
+++ b/packages/common/locales/extra/es-PY.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [
+    ['m.', 'madrugada', 'mañana', 'tarde', 'noche'],
+    ['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u
+  ],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-SV.ts b/packages/common/locales/extra/es-SV.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-SV.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-US.ts b/packages/common/locales/extra/es-US.ts
new file mode 100644
index 000000000000..8f3571b8bf79
--- /dev/null
+++ b/packages/common/locales/extra/es-US.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['del mediodía', 'de la madrugada', 'mañana', 'de la tarde', 'de la noche'],
+    ['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u
+  ],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-UY.ts b/packages/common/locales/extra/es-UY.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es-UY.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es-VE.ts b/packages/common/locales/extra/es-VE.ts
new file mode 100644
index 000000000000..7f8d88221450
--- /dev/null
+++ b/packages/common/locales/extra/es-VE.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [
+    ['m.', 'madrugada', 'mañana', 'tarde', 'noche'],
+    ['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u
+  ],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/es.ts b/packages/common/locales/extra/es.ts
new file mode 100644
index 000000000000..16f73170b5fe
--- /dev/null
+++ b/packages/common/locales/extra/es.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['del mediodía', 'de la madrugada', 'de la mañana', 'de la tarde', 'de la noche'], u, u],
+  [['mediodía', 'madrugada', 'mañana', 'tarde', 'noche'], u, u],
+  ['12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '20:00'], ['20:00', '24:00']]
+];
diff --git a/packages/common/locales/extra/et.ts b/packages/common/locales/extra/et.ts
new file mode 100644
index 000000000000..3cbd9eb7e9b4
--- /dev/null
+++ b/packages/common/locales/extra/et.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['keskööl', 'keskpäeval', 'hommikul', 'pärastlõunal', 'õhtul', 'öösel'], u, u],
+  [['kesköö', 'keskpäev', 'hommik', 'pärastlõuna', 'õhtu', 'öö'], u, u],
+  [
+    '00:00', '12:00', ['05:00', '12:00'], ['12:00', '18:00'], ['18:00', '23:00'],
+    ['23:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/eu.ts b/packages/common/locales/extra/eu.ts
new file mode 100644
index 000000000000..28ffb57af498
--- /dev/null
+++ b/packages/common/locales/extra/eu.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['gauerdia', 'goizald.', 'goizeko', 'eguerd.', 'arrats.', 'iluntz.', 'gaueko'], u,
+    ['gauerdia', 'goizaldeko', 'goizeko', 'eguerdiko', 'arratsaldeko', 'iluntzeko', 'gaueko']
+  ],
+  [
+    ['gauerdia', 'goizald.', 'goiza', 'eguerd.', 'arrats.', 'iluntz.', 'gaua'],
+    ['gauerdia', 'goiz.', 'goiza', 'eguerd.', 'arrats.', 'iluntz.', 'gaua'],
+    ['gauerdia', 'goizaldea', 'goiza', 'eguerdia', 'arratsaldea', 'iluntzea', 'gaua']
+  ],
+  [
+    '00:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '14:00'], ['14:00', '19:00'],
+    ['19:00', '21:00'], ['21:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ewo.ts b/packages/common/locales/extra/ewo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ewo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/fa-AF.ts b/packages/common/locales/extra/fa-AF.ts
new file mode 100644
index 000000000000..87af391700e2
--- /dev/null
+++ b/packages/common/locales/extra/fa-AF.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['ن', 'ظ', 'ص', 'ب.ظ.', 'ش', 'ش'],
+    ['نیمه\u200cشب', 'ظهر', 'صبح', 'بعد از چاشت', 'شام', 'شب'], u
+  ],
+  [
+    ['ن', 'ظ', 'ص', 'بعد از چاشت', 'شام', 'ش'],
+    ['نیمه\u200cشب', 'ظهر', 'صبح', 'بعد از چاشت', 'شام', 'شب'], u
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '17:00'], ['17:00', '19:00'],
+    ['19:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fa.ts b/packages/common/locales/extra/fa.ts
new file mode 100644
index 000000000000..77c6d0ae4d4c
--- /dev/null
+++ b/packages/common/locales/extra/fa.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['ن', 'ظ', 'ص', 'ب.ظ.', 'ع', 'ش'],
+    ['نیمه\u200cشب', 'ظهر', 'صبح', 'ب.ظ.', 'عصر', 'شب'],
+    ['نیمه\u200cشب', 'ظهر', 'صبح', 'بعدازظهر', 'عصر', 'شب']
+  ],
+  [
+    ['ن', 'ظ', 'ص', 'ب.ظ.', 'ع', 'ش'],
+    ['نیمه\u200cشب', 'ظهر', 'صبح', 'بعدازظهر', 'عصر', 'شب'], u
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '17:00'], ['17:00', '19:00'],
+    ['19:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ff-CM.ts b/packages/common/locales/extra/ff-CM.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ff-CM.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ff-GN.ts b/packages/common/locales/extra/ff-GN.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ff-GN.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ff-MR.ts b/packages/common/locales/extra/ff-MR.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ff-MR.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ff.ts b/packages/common/locales/extra/ff.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ff.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/fi.ts b/packages/common/locales/extra/fi.ts
new file mode 100644
index 000000000000..ee44db4b11d2
--- /dev/null
+++ b/packages/common/locales/extra/fi.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['ky.', 'kp.', 'aamulla', 'ap.', 'ip.', 'illalla', 'yöllä'],
+    ['keskiyöllä', 'keskip.', 'aamulla', 'aamup.', 'iltap.', 'illalla', 'yöllä'],
+    [
+      'keskiyöllä', 'keskipäivällä', 'aamulla', 'aamupäivällä', 'iltapäivällä',
+      'illalla', 'yöllä'
+    ]
+  ],
+  [
+    ['ky.', 'kp.', 'aamu', 'ap.', 'ip.', 'ilta', 'yö'],
+    ['keskiyö', 'keskip.', 'aamu', 'aamup.', 'iltap.', 'ilta', 'yö'],
+    ['keskiyö', 'keskipäivä', 'aamu', 'aamupäivä', 'iltapäivä', 'ilta', 'yö']
+  ],
+  [
+    '00:00', '12:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '23:00'], ['23:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fil.ts b/packages/common/locales/extra/fil.ts
new file mode 100644
index 000000000000..214afa8c324a
--- /dev/null
+++ b/packages/common/locales/extra/fil.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['hatinggabi', 'tanghaling-tapat', 'umaga', 'madaling-araw', 'sa hapon', 'sa gabi', 'gabi'],
+    [
+      'hatinggabi', 'tanghaling-tapat', 'nang umaga', 'madaling-araw', 'tanghali', 'ng hapon',
+      'gabi'
+    ],
+    [
+      'hatinggabi', 'tanghaling-tapat', 'nang umaga', 'madaling-araw', 'tanghali', 'ng hapon',
+      'ng gabi'
+    ]
+  ],
+  [
+    ['hatinggabi', 'tanghaling-tapat', 'umaga', 'madaling-araw', 'tanghali', 'gabi', 'gabi'],
+    ['hatinggabi', 'tanghaling-tapat', 'umaga', 'madaling-araw', 'tanghali', 'hapon', 'gabi'], u
+  ],
+  [
+    '00:00', '12:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '16:00'],
+    ['16:00', '18:00'], ['18:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fo-DK.ts b/packages/common/locales/extra/fo-DK.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/fo-DK.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/fo.ts b/packages/common/locales/extra/fo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/fo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/fr-BE.ts b/packages/common/locales/extra/fr-BE.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-BE.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-BF.ts b/packages/common/locales/extra/fr-BF.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-BF.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-BI.ts b/packages/common/locales/extra/fr-BI.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-BI.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-BJ.ts b/packages/common/locales/extra/fr-BJ.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-BJ.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-BL.ts b/packages/common/locales/extra/fr-BL.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-BL.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-CA.ts b/packages/common/locales/extra/fr-CA.ts
new file mode 100644
index 000000000000..3f96cf76b9c1
--- /dev/null
+++ b/packages/common/locales/extra/fr-CA.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'après-midi', 'soir', 'mat.'],
+    ['minuit', 'midi', 'du mat.', 'après-midi', 'du soir', 'du mat.'],
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'après-midi', 'soir', 'mat.'],
+    ['minuit', 'midi', 'mat.', 'après-midi', 'soir', 'nuit'],
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-CD.ts b/packages/common/locales/extra/fr-CD.ts
new file mode 100644
index 000000000000..104d60c5e2de
--- /dev/null
+++ b/packages/common/locales/extra/fr-CD.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['min.', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'],
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'],
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['min.', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'],
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'],
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-CF.ts b/packages/common/locales/extra/fr-CF.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-CF.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-CG.ts b/packages/common/locales/extra/fr-CG.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-CG.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-CH.ts b/packages/common/locales/extra/fr-CH.ts
new file mode 100644
index 000000000000..87c67a17f850
--- /dev/null
+++ b/packages/common/locales/extra/fr-CH.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['min.', 'midi', 'du mat.', 'de l’ap.m.', 'du soir', 'du mat.'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['min.', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-CI.ts b/packages/common/locales/extra/fr-CI.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-CI.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-CM.ts b/packages/common/locales/extra/fr-CM.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-CM.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-DJ.ts b/packages/common/locales/extra/fr-DJ.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-DJ.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-DZ.ts b/packages/common/locales/extra/fr-DZ.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-DZ.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-GA.ts b/packages/common/locales/extra/fr-GA.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-GA.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-GF.ts b/packages/common/locales/extra/fr-GF.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-GF.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-GN.ts b/packages/common/locales/extra/fr-GN.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-GN.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-GP.ts b/packages/common/locales/extra/fr-GP.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-GP.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-GQ.ts b/packages/common/locales/extra/fr-GQ.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-GQ.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-HT.ts b/packages/common/locales/extra/fr-HT.ts
new file mode 100644
index 000000000000..a710df0f9efd
--- /dev/null
+++ b/packages/common/locales/extra/fr-HT.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'de la nuit']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-KM.ts b/packages/common/locales/extra/fr-KM.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-KM.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-LU.ts b/packages/common/locales/extra/fr-LU.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-LU.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-MA.ts b/packages/common/locales/extra/fr-MA.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-MA.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-MC.ts b/packages/common/locales/extra/fr-MC.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-MC.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-MF.ts b/packages/common/locales/extra/fr-MF.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-MF.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-MG.ts b/packages/common/locales/extra/fr-MG.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-MG.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-ML.ts b/packages/common/locales/extra/fr-ML.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-ML.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-MQ.ts b/packages/common/locales/extra/fr-MQ.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-MQ.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-MR.ts b/packages/common/locales/extra/fr-MR.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-MR.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-MU.ts b/packages/common/locales/extra/fr-MU.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-MU.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-NC.ts b/packages/common/locales/extra/fr-NC.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-NC.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-NE.ts b/packages/common/locales/extra/fr-NE.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-NE.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-PF.ts b/packages/common/locales/extra/fr-PF.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-PF.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-PM.ts b/packages/common/locales/extra/fr-PM.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-PM.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-RE.ts b/packages/common/locales/extra/fr-RE.ts
new file mode 100644
index 000000000000..1745b6ba9776
--- /dev/null
+++ b/packages/common/locales/extra/fr-RE.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'],
+    ['min.', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'],
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['min.', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-RW.ts b/packages/common/locales/extra/fr-RW.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-RW.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-SC.ts b/packages/common/locales/extra/fr-SC.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-SC.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-SN.ts b/packages/common/locales/extra/fr-SN.ts
new file mode 100644
index 000000000000..248134fee661
--- /dev/null
+++ b/packages/common/locales/extra/fr-SN.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['min.', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['min.', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-SY.ts b/packages/common/locales/extra/fr-SY.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-SY.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-TD.ts b/packages/common/locales/extra/fr-TD.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-TD.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-TG.ts b/packages/common/locales/extra/fr-TG.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-TG.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-TN.ts b/packages/common/locales/extra/fr-TN.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-TN.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-VU.ts b/packages/common/locales/extra/fr-VU.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-VU.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-WF.ts b/packages/common/locales/extra/fr-WF.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-WF.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr-YT.ts b/packages/common/locales/extra/fr-YT.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr-YT.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fr.ts b/packages/common/locales/extra/fr.ts
new file mode 100644
index 000000000000..1e74baea4fea
--- /dev/null
+++ b/packages/common/locales/extra/fr.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'du matin', 'de l’après-midi', 'du soir', 'du matin']
+  ],
+  [
+    ['minuit', 'midi', 'mat.', 'ap.m.', 'soir', 'nuit'], u,
+    ['minuit', 'midi', 'matin', 'après-midi', 'soir', 'nuit']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/fur.ts b/packages/common/locales/extra/fur.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/fur.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/fy.ts b/packages/common/locales/extra/fy.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/fy.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ga.ts b/packages/common/locales/extra/ga.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ga.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/gd.ts b/packages/common/locales/extra/gd.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/gd.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/gl.ts b/packages/common/locales/extra/gl.ts
new file mode 100644
index 000000000000..847c95249d77
--- /dev/null
+++ b/packages/common/locales/extra/gl.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['da noite', 'da madrugada', 'da mañá', 'do mediodía', 'da tarde', 'da noite'], u, u],
+  [['medianoite', 'madrugada', 'mañá', 'mediodía', 'tarde', 'noite'], u, u],
+  [
+    '00:00', ['00:00', '06:00'], ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '21:00'],
+    ['21:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/gsw-FR.ts b/packages/common/locales/extra/gsw-FR.ts
new file mode 100644
index 000000000000..b0fb2b362b74
--- /dev/null
+++ b/packages/common/locales/extra/gsw-FR.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Mitternacht', 'am Morge', 'zmittag', 'am Namittag', 'zaabig', 'znacht'], u, u],
+  [
+    ['Mitternacht', 'am Morge', 'zmittag', 'am Namittag', 'zaabig', 'znacht'], u,
+    ['Mitternacht', 'Morge', 'Mittag', 'Namittag', 'Aabig', 'Nacht']
+  ],
+  [
+    '00:00', ['05:00', '12:00'], ['12:00', '14:00'], ['14:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/gsw-LI.ts b/packages/common/locales/extra/gsw-LI.ts
new file mode 100644
index 000000000000..b0fb2b362b74
--- /dev/null
+++ b/packages/common/locales/extra/gsw-LI.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Mitternacht', 'am Morge', 'zmittag', 'am Namittag', 'zaabig', 'znacht'], u, u],
+  [
+    ['Mitternacht', 'am Morge', 'zmittag', 'am Namittag', 'zaabig', 'znacht'], u,
+    ['Mitternacht', 'Morge', 'Mittag', 'Namittag', 'Aabig', 'Nacht']
+  ],
+  [
+    '00:00', ['05:00', '12:00'], ['12:00', '14:00'], ['14:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/gsw.ts b/packages/common/locales/extra/gsw.ts
new file mode 100644
index 000000000000..b0fb2b362b74
--- /dev/null
+++ b/packages/common/locales/extra/gsw.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['Mitternacht', 'am Morge', 'zmittag', 'am Namittag', 'zaabig', 'znacht'], u, u],
+  [
+    ['Mitternacht', 'am Morge', 'zmittag', 'am Namittag', 'zaabig', 'znacht'], u,
+    ['Mitternacht', 'Morge', 'Mittag', 'Namittag', 'Aabig', 'Nacht']
+  ],
+  [
+    '00:00', ['05:00', '12:00'], ['12:00', '14:00'], ['14:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/gu.ts b/packages/common/locales/extra/gu.ts
new file mode 100644
index 000000000000..d97b56e449de
--- /dev/null
+++ b/packages/common/locales/extra/gu.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'મ.રાત્રિ', 'સવારે', 'બપોરે', 'સાંજે',
+      'રાત્રે'
+    ],
+    [
+      'મધ્યરાત્રિ', 'સવારે', 'બપોરે', 'સાંજે',
+      'રાત્રે'
+    ],
+    u
+  ],
+  [
+    [
+      'મધ્યરાત્રિ', 'સવારે', 'બપોરે', 'સાંજે',
+      'રાત્રે'
+    ],
+    u,
+    [
+      'મધ્યરાત્રિ', 'સવાર', 'બપોર', 'સાંજ',
+      'રાત્રિ'
+    ]
+  ],
+  ['00:00', ['04:00', '12:00'], ['12:00', '16:00'], ['16:00', '20:00'], ['20:00', '04:00']]
+];
diff --git a/packages/common/locales/extra/guz.ts b/packages/common/locales/extra/guz.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/guz.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/gv.ts b/packages/common/locales/extra/gv.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/gv.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ha-GH.ts b/packages/common/locales/extra/ha-GH.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ha-GH.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ha-NE.ts b/packages/common/locales/extra/ha-NE.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ha-NE.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ha.ts b/packages/common/locales/extra/ha.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ha.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/haw.ts b/packages/common/locales/extra/haw.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/haw.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/he.ts b/packages/common/locales/extra/he.ts
new file mode 100644
index 000000000000..da050641121d
--- /dev/null
+++ b/packages/common/locales/extra/he.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'חצות', 'בבוקר', 'בצהריים', 'אחה״צ', 'בערב', 'בלילה',
+      'לפנות בוקר'
+    ],
+    [
+      'חצות', 'בוקר', 'צהריים', 'אחר הצהריים', 'ערב', 'לילה',
+      'לפנות בוקר'
+    ],
+    [
+      'חצות', 'בבוקר', 'בצהריים', 'אחר הצהריים', 'בערב', 'בלילה',
+      'לפנות בוקר'
+    ]
+  ],
+  [
+    [
+      'חצות', 'בוקר', 'צהריים', 'אחה״צ', 'ערב', 'לילה',
+      'לפנות בוקר'
+    ],
+    u,
+    [
+      'חצות', 'בוקר', 'צהריים', 'אחר הצהריים', 'ערב', 'לילה',
+      'לפנות בוקר'
+    ]
+  ],
+  [
+    '00:00', ['06:00', '12:00'], ['12:00', '16:00'], ['16:00', '18:00'], ['18:00', '22:00'],
+    ['22:00', '03:00'], ['03:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/hi.ts b/packages/common/locales/extra/hi.ts
new file mode 100644
index 000000000000..8390edd3eb2b
--- /dev/null
+++ b/packages/common/locales/extra/hi.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'मध्यरात्रि', 'सुबह', 'अपराह्न', 'शाम',
+      'रात'
+    ],
+    u, u
+  ],
+  [
+    ['आधी रात', 'सुबह', 'अपराह्न', 'शाम', 'रात'],
+    ['मध्यरात्रि', 'सुबह', 'दोपहर', 'शाम', 'रात'],
+    u
+  ],
+  ['00:00', ['04:00', '12:00'], ['12:00', '16:00'], ['16:00', '20:00'], ['20:00', '04:00']]
+];
diff --git a/packages/common/locales/extra/hr-BA.ts b/packages/common/locales/extra/hr-BA.ts
new file mode 100644
index 000000000000..7c5ed2af8620
--- /dev/null
+++ b/packages/common/locales/extra/hr-BA.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['ponoć', 'podne', 'ujutro', 'popodne', 'navečer', 'noću'], u,
+    ['ponoć', 'podne', 'ujutro', 'poslije podne', 'navečer', 'noću']
+  ],
+  [['ponoć', 'podne', 'ujutro', 'popodne', 'navečer', 'noću'], u, u],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/hr.ts b/packages/common/locales/extra/hr.ts
new file mode 100644
index 000000000000..7c5ed2af8620
--- /dev/null
+++ b/packages/common/locales/extra/hr.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['ponoć', 'podne', 'ujutro', 'popodne', 'navečer', 'noću'], u,
+    ['ponoć', 'podne', 'ujutro', 'poslije podne', 'navečer', 'noću']
+  ],
+  [['ponoć', 'podne', 'ujutro', 'popodne', 'navečer', 'noću'], u, u],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/hsb.ts b/packages/common/locales/extra/hsb.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/hsb.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/hu.ts b/packages/common/locales/extra/hu.ts
new file mode 100644
index 000000000000..bb5d40a7b0c9
--- /dev/null
+++ b/packages/common/locales/extra/hu.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['éjfél', 'dél', 'reggel', 'de.', 'du.', 'este', 'éjjel', 'hajnal'], u,
+    ['éjfél', 'dél', 'reggel', 'délelőtt', 'délután', 'este', 'éjjel', 'hajnal']
+  ],
+  u,
+  [
+    '00:00', '12:00', ['06:00', '09:00'], ['09:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '21:00'], ['21:00', '04:00'], ['04:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/hy.ts b/packages/common/locales/extra/hy.ts
new file mode 100644
index 000000000000..ab139589d1fb
--- /dev/null
+++ b/packages/common/locales/extra/hy.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['կգ․', 'կօ․', 'առվ', 'ցրկ', 'երկ', 'գշր'],
+    [
+      'կեսգիշեր', 'կեսօր', 'առավոտյան', 'ցերեկը', 'երեկոյան',
+      'գիշերը'
+    ],
+    [
+      'կեսգիշերին', 'կեսօրին', 'առավոտյան', 'ցերեկը',
+      'երեկոյան', 'գիշերը'
+    ]
+  ],
+  [
+    ['կեսգիշեր', 'կեսօր', 'առավոտ', 'ցերեկ', 'երեկո', 'գիշեր'], u,
+    u
+  ],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/id.ts b/packages/common/locales/extra/id.ts
new file mode 100644
index 000000000000..4d023b6c80c7
--- /dev/null
+++ b/packages/common/locales/extra/id.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['tengah malam', 'tengah hari', 'pagi', 'siang', 'sore', 'malam'], u, u], u,
+  [
+    '00:00', '12:00', ['00:00', '10:00'], ['10:00', '15:00'], ['15:00', '18:00'],
+    ['18:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ig.ts b/packages/common/locales/extra/ig.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ig.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ii.ts b/packages/common/locales/extra/ii.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ii.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/is.ts b/packages/common/locales/extra/is.ts
new file mode 100644
index 000000000000..040f1c3d83e3
--- /dev/null
+++ b/packages/common/locales/extra/is.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mn.', 'h.', 'mrg.', 'sd.', 'kv.', 'n.'],
+    ['miðnætti', 'hádegi', 'að morgni', 'síðdegis', 'að kvöldi', 'að nóttu'], u
+  ],
+  [
+    ['mn.', 'hd.', 'mrg.', 'sd.', 'kv.', 'n.'],
+    ['miðnætti', 'hádegi', 'morgunn', 'síðdegis', 'kvöld', 'nótt'],
+    ['miðnætti', 'hádegi', 'morgunn', 'eftir hádegi', 'kvöld', 'nótt']
+  ],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/it-CH.ts b/packages/common/locales/extra/it-CH.ts
new file mode 100644
index 000000000000..b02ddb5b2091
--- /dev/null
+++ b/packages/common/locales/extra/it-CH.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['mezzanotte', 'mezzogiorno', 'di mattina', 'del pomeriggio', 'di sera', 'di notte'], u, u],
+  [['mezzanotte', 'mezzogiorno', 'mattina', 'pomeriggio', 'sera', 'notte'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/it-SM.ts b/packages/common/locales/extra/it-SM.ts
new file mode 100644
index 000000000000..b02ddb5b2091
--- /dev/null
+++ b/packages/common/locales/extra/it-SM.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['mezzanotte', 'mezzogiorno', 'di mattina', 'del pomeriggio', 'di sera', 'di notte'], u, u],
+  [['mezzanotte', 'mezzogiorno', 'mattina', 'pomeriggio', 'sera', 'notte'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/it-VA.ts b/packages/common/locales/extra/it-VA.ts
new file mode 100644
index 000000000000..b02ddb5b2091
--- /dev/null
+++ b/packages/common/locales/extra/it-VA.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['mezzanotte', 'mezzogiorno', 'di mattina', 'del pomeriggio', 'di sera', 'di notte'], u, u],
+  [['mezzanotte', 'mezzogiorno', 'mattina', 'pomeriggio', 'sera', 'notte'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/it.ts b/packages/common/locales/extra/it.ts
new file mode 100644
index 000000000000..b02ddb5b2091
--- /dev/null
+++ b/packages/common/locales/extra/it.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['mezzanotte', 'mezzogiorno', 'di mattina', 'del pomeriggio', 'di sera', 'di notte'], u, u],
+  [['mezzanotte', 'mezzogiorno', 'mattina', 'pomeriggio', 'sera', 'notte'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ja.ts b/packages/common/locales/extra/ja.ts
new file mode 100644
index 000000000000..93958d331c94
--- /dev/null
+++ b/packages/common/locales/extra/ja.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['真夜中', '正午', '朝', '昼', '夕方', '夜', '夜中'], u, u], u,
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '16:00'], ['16:00', '19:00'],
+    ['19:00', '23:00'], ['23:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/jgo.ts b/packages/common/locales/extra/jgo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/jgo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/jmc.ts b/packages/common/locales/extra/jmc.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/jmc.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ka.ts b/packages/common/locales/extra/ka.ts
new file mode 100644
index 000000000000..d14e6b790799
--- /dev/null
+++ b/packages/common/locales/extra/ka.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'შუაღამეს', 'შუადღ.', 'დილ.', 'ნაშუადღ.',
+      'საღ.', 'ღამ.'
+    ],
+    u,
+    [
+      'შუაღამეს', 'შუადღეს', 'დილით',
+      'ნაშუადღევს', 'საღამოს', 'ღამით'
+    ]
+  ],
+  [
+    [
+      'შუაღამე', 'შუადღე', 'დილა',
+      'ნაშუადღევი', 'საღამო', 'ღამე'
+    ],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['05:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/kab.ts b/packages/common/locales/extra/kab.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/kab.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/kam.ts b/packages/common/locales/extra/kam.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/kam.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/kde.ts b/packages/common/locales/extra/kde.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/kde.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/kea.ts b/packages/common/locales/extra/kea.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/kea.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/khq.ts b/packages/common/locales/extra/khq.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/khq.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ki.ts b/packages/common/locales/extra/ki.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ki.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/kk.ts b/packages/common/locales/extra/kk.ts
new file mode 100644
index 000000000000..0f7171b14208
--- /dev/null
+++ b/packages/common/locales/extra/kk.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'түнгі', 'түскі', 'таңғы', 'түстен кейінгі', 'кешкі',
+      'түнгі'
+    ],
+    [
+      'түн жарымы', 'түскі', 'таңғы', 'түстен кейінгі',
+      'кешкі', 'түнгі'
+    ],
+    u
+  ],
+  [
+    [
+      'түн жарымы', 'талтүс', 'таң', 'түстен кейін', 'кеш', 'түн'
+    ],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/kkj.ts b/packages/common/locales/extra/kkj.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/kkj.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/kl.ts b/packages/common/locales/extra/kl.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/kl.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/kln.ts b/packages/common/locales/extra/kln.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/kln.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/km.ts b/packages/common/locales/extra/km.ts
new file mode 100644
index 000000000000..f6fc0f6052ef
--- /dev/null
+++ b/packages/common/locales/extra/km.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'អធ្រាត្រ', 'ថ្ងៃត្រង់', 'ព្រឹក', 'រសៀល',
+      'ល្ងាច', 'យប់'
+    ],
+    u, u
+  ],
+  [
+    [
+      'អធ្រាត្រ', 'ថ្ងៃ​ត្រង់', 'ព្រឹក',
+      'រសៀល', 'ល្ងាច', 'យប់'
+    ],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['00:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/kn.ts b/packages/common/locales/extra/kn.ts
new file mode 100644
index 000000000000..50facc84f807
--- /dev/null
+++ b/packages/common/locales/extra/kn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'ಮಧ್ಯರಾತ್ರಿ', 'ಬೆಳಗ್ಗೆ', 'ಮಧ್ಯಾಹ್ನ',
+      'ಸಂಜೆ', 'ರಾತ್ರಿ'
+    ],
+    [
+      'ಮಧ್ಯ ರಾತ್ರಿ', 'ಬೆಳಗ್ಗೆ', 'ಮಧ್ಯಾಹ್ನ',
+      'ಸಂಜೆ', 'ರಾತ್ರಿ'
+    ],
+    u
+  ],
+  [
+    [
+      'ಮಧ್ಯರಾತ್ರಿ', 'ಬೆಳಗ್ಗೆ', 'ಮಧ್ಯಾಹ್ನ',
+      'ಸಂಜೆ', 'ರಾತ್ರಿ'
+    ],
+    u, u
+  ],
+  ['00:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'], ['21:00', '06:00']]
+];
diff --git a/packages/common/locales/extra/ko-KP.ts b/packages/common/locales/extra/ko-KP.ts
new file mode 100644
index 000000000000..d7b508224df4
--- /dev/null
+++ b/packages/common/locales/extra/ko-KP.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['자정', '정오', '새벽', '오전', '오후', '저녁', '밤'], u, u], u,
+  [
+    '00:00', '12:00', ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '21:00'], ['21:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ko.ts b/packages/common/locales/extra/ko.ts
new file mode 100644
index 000000000000..d7b508224df4
--- /dev/null
+++ b/packages/common/locales/extra/ko.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['자정', '정오', '새벽', '오전', '오후', '저녁', '밤'], u, u], u,
+  [
+    '00:00', '12:00', ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '21:00'], ['21:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/kok.ts b/packages/common/locales/extra/kok.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/kok.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ks.ts b/packages/common/locales/extra/ks.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ks.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ksb.ts b/packages/common/locales/extra/ksb.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ksb.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ksf.ts b/packages/common/locales/extra/ksf.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ksf.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ksh.ts b/packages/common/locales/extra/ksh.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ksh.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/kw.ts b/packages/common/locales/extra/kw.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/kw.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ky.ts b/packages/common/locales/extra/ky.ts
new file mode 100644
index 000000000000..615777b8485e
--- /dev/null
+++ b/packages/common/locales/extra/ky.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['түн орт', 'чт', 'эртң мн', 'түшт кйн', 'кечк', 'түн'],
+    [
+      'түн ортосу', 'чак түш', 'эртең менен', 'түштөн кийин',
+      'кечинде', 'түн ичинде'
+    ],
+    u
+  ],
+  [
+    [
+      'түн ортосу', 'чак түш', 'эртең менен', 'түштөн кийин',
+      'кечкурун', 'түн'
+    ],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/lag.ts b/packages/common/locales/extra/lag.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/lag.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/lb.ts b/packages/common/locales/extra/lb.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/lb.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/lg.ts b/packages/common/locales/extra/lg.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/lg.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/lkt.ts b/packages/common/locales/extra/lkt.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/lkt.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ln-AO.ts b/packages/common/locales/extra/ln-AO.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ln-AO.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ln-CF.ts b/packages/common/locales/extra/ln-CF.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ln-CF.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ln-CG.ts b/packages/common/locales/extra/ln-CG.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ln-CG.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ln.ts b/packages/common/locales/extra/ln.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ln.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/lo.ts b/packages/common/locales/extra/lo.ts
new file mode 100644
index 000000000000..5449a04d23d1
--- /dev/null
+++ b/packages/common/locales/extra/lo.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'ທຄ', 'ທ', 'ຕອນເຊົ້າ', 'ຕອນທ່ຽງ', 'ຕອນແລງ',
+      'ກາງຄືນ'
+    ],
+    [
+      'ທ່ຽງຄືນ', 'ຕອນທ່ຽງ', 'ຕອນເຊົ້າ',
+      'ຕອນບ່າຍ', 'ຕອນແລງ', 'ກາງຄືນ'
+    ],
+    [
+      'ທ່ຽງຄືນ', 'ຕອນທ່ຽງ', 'ຕອນເຊົ້າ',
+      'ຕອນບ່າຍ', 'ຕອນແລງ', 'ຕອນກາງຄືນ'
+    ]
+  ],
+  [
+    ['ທຄ', 'ຕອນທ່ຽງ', 'ຊ', 'ສ', 'ລ', 'ກຄ'],
+    [
+      'ທ່ຽງ​ຄືນ', 'ທ່ຽງ', '​ເຊົ້າ', 'ສວຍ', 'ແລງ',
+      '​ກາງ​ຄືນ'
+    ],
+    [
+      'ທ່ຽງຄືນ', 'ຕອນທ່ຽງ', '​ເຊົ້າ', 'ສວຍ',
+      'ແລງ', '​ກາງ​ຄືນ'
+    ]
+  ],
+  [
+    '00:00', '12:00', ['05:00', '12:00'], ['12:00', '16:00'], ['16:00', '20:00'],
+    ['20:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/lrc-IQ.ts b/packages/common/locales/extra/lrc-IQ.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/lrc-IQ.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/lrc.ts b/packages/common/locales/extra/lrc.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/lrc.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/lt.ts b/packages/common/locales/extra/lt.ts
new file mode 100644
index 000000000000..197feb4741f4
--- /dev/null
+++ b/packages/common/locales/extra/lt.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['vidurnaktis', 'perpiet', 'rytas', 'popietė', 'vakaras', 'naktis'], u, u],
+  [['vidurnaktis', 'vidurdienis', 'rytas', 'diena', 'vakaras', 'naktis'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/lu.ts b/packages/common/locales/extra/lu.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/lu.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/luo.ts b/packages/common/locales/extra/luo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/luo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/luy.ts b/packages/common/locales/extra/luy.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/luy.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/lv.ts b/packages/common/locales/extra/lv.ts
new file mode 100644
index 000000000000..1d103ca2998b
--- /dev/null
+++ b/packages/common/locales/extra/lv.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['pusnaktī', 'pusd.', 'no rīta', 'pēcpusd.', 'vakarā', 'naktī'], u,
+    ['pusnaktī', 'pusdienlaikā', 'no rīta', 'pēcpusdienā', 'vakarā', 'naktī']
+  ],
+  [
+    ['pusnakts', 'pusd.', 'rīts', 'pēcpusd.', 'vakars', 'nakts'],
+    ['pusnakts', 'pusd.', 'rīts', 'pēcpusdiena', 'vakars', 'nakts'],
+    ['pusnakts', 'pusdienlaiks', 'rīts', 'pēcpusdiena', 'vakars', 'nakts']
+  ],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '23:00'],
+    ['23:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/mas-TZ.ts b/packages/common/locales/extra/mas-TZ.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/mas-TZ.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/mas.ts b/packages/common/locales/extra/mas.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/mas.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/mer.ts b/packages/common/locales/extra/mer.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/mer.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/mfe.ts b/packages/common/locales/extra/mfe.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/mfe.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/mg.ts b/packages/common/locales/extra/mg.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/mg.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/mgh.ts b/packages/common/locales/extra/mgh.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/mgh.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/mgo.ts b/packages/common/locales/extra/mgo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/mgo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/mk.ts b/packages/common/locales/extra/mk.ts
new file mode 100644
index 000000000000..a3849b6d8d57
--- /dev/null
+++ b/packages/common/locales/extra/mk.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['полн.', 'напл.', 'утро', 'претпл.', 'попл.', 'веч.', 'ноќе'],
+    [
+      'полноќ', 'напладне', 'наутро', 'претпл.', 'попл.',
+      'навечер', 'ноќе'
+    ],
+    [
+      'полноќ', 'напладне', 'наутро', 'претпладне',
+      'попладне', 'навечер', 'по полноќ'
+    ]
+  ],
+  [
+    [
+      'полноќ', 'пладне', 'наутро', 'претпл.', 'попл.',
+      'навечер', 'по полноќ'
+    ],
+    [
+      'полноќ', 'напладне', 'наутро', 'претпл.', 'попл.',
+      'навечер', 'по полноќ'
+    ],
+    [
+      'на полноќ', 'напладне', 'наутро', 'претпладне',
+      'попладне', 'навечер', 'по полноќ'
+    ]
+  ],
+  [
+    '00:00', '12:00', ['04:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ml.ts b/packages/common/locales/extra/ml.ts
new file mode 100644
index 000000000000..5ee63e534d2d
--- /dev/null
+++ b/packages/common/locales/extra/ml.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'അ', 'ഉച്ച', 'പുലർച്ചെ', 'രാവിലെ',
+      'ഉച്ചയ്ക്ക്', 'ഉച്ചതിരിഞ്ഞ്',
+      'വൈകുന്നേരം', 'സന്ധ്യ', 'രാത്രി'
+    ],
+    [
+      'അർദ്ധരാത്രി', 'ഉച്ച', 'പുലർച്ചെ',
+      'രാവിലെ', 'ഉച്ചയ്ക്ക്',
+      'ഉച്ചതിരിഞ്ഞ്', 'വൈകുന്നേരം',
+      'സന്ധ്യ', 'രാത്രി'
+    ],
+    u
+  ],
+  [
+    [
+      'അർദ്ധരാത്രി', 'ഉച്ച', 'പുലർച്ചെ',
+      'രാവിലെ', 'ഉച്ചയ്ക്ക്',
+      'ഉച്ചതിരിഞ്ഞ്', 'വൈകുന്നേരം',
+      'സന്ധ്യ', 'രാത്രി'
+    ],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['03:00', '06:00'], ['06:00', '12:00'], ['12:00', '14:00'],
+    ['14:00', '15:00'], ['15:00', '18:00'], ['18:00', '19:00'], ['19:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/mn.ts b/packages/common/locales/extra/mn.ts
new file mode 100644
index 000000000000..89bff105167b
--- /dev/null
+++ b/packages/common/locales/extra/mn.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['шөнө дунд', 'үд дунд', 'өглөө', 'өдөр', 'орой', 'шөнө'], u, u],
+  u,
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/mr.ts b/packages/common/locales/extra/mr.ts
new file mode 100644
index 000000000000..4a383ee13474
--- /dev/null
+++ b/packages/common/locales/extra/mr.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['म.रा.', 'दु', 'प', 'स', 'दु', 'सं', 'सा', 'रा'],
+    [
+      'मध्यरात्र', 'मध्यान्ह', 'पहाट', 'सकाळ',
+      'दुपार', 'संध्याकाळ', 'सायंकाळ', 'रात्र'
+    ],
+    u
+  ],
+  [
+    ['म.रा.', 'म', 'प', 'स', 'दु', 'सं', 'सा', 'रात्र'],
+    [
+      'मध्यरात्र', 'मध्यान्ह', 'पहाट', 'सकाळ',
+      'दुपार', 'संध्याकाळ', 'सायंकाळ', 'रात्र'
+    ],
+    u
+  ],
+  [
+    '00:00', '12:00', ['04:00', '06:00'], ['06:00', '12:00'], ['12:00', '16:00'],
+    ['16:00', '18:00'], ['18:00', '21:00'], ['21:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ms-BN.ts b/packages/common/locales/extra/ms-BN.ts
new file mode 100644
index 000000000000..5f79ab31aa56
--- /dev/null
+++ b/packages/common/locales/extra/ms-BN.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['pagi', 'pagi', 'tengah hari', 'petang', 'malam'], u,
+    ['tengah malam', 'pagi', 'tengah hari', 'petang', 'malam']
+  ],
+  [
+    ['pagi', 'pagi', 'tengah hari', 'petang', 'malam'],
+    ['tengah malam', 'pagi', 'tengah hari', 'petang', 'malam'], u
+  ],
+  [
+    ['00:00', '01:00'], ['01:00', '12:00'], ['12:00', '14:00'], ['14:00', '19:00'],
+    ['19:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ms-SG.ts b/packages/common/locales/extra/ms-SG.ts
new file mode 100644
index 000000000000..5f79ab31aa56
--- /dev/null
+++ b/packages/common/locales/extra/ms-SG.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['pagi', 'pagi', 'tengah hari', 'petang', 'malam'], u,
+    ['tengah malam', 'pagi', 'tengah hari', 'petang', 'malam']
+  ],
+  [
+    ['pagi', 'pagi', 'tengah hari', 'petang', 'malam'],
+    ['tengah malam', 'pagi', 'tengah hari', 'petang', 'malam'], u
+  ],
+  [
+    ['00:00', '01:00'], ['01:00', '12:00'], ['12:00', '14:00'], ['14:00', '19:00'],
+    ['19:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ms.ts b/packages/common/locales/extra/ms.ts
new file mode 100644
index 000000000000..5f79ab31aa56
--- /dev/null
+++ b/packages/common/locales/extra/ms.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['pagi', 'pagi', 'tengah hari', 'petang', 'malam'], u,
+    ['tengah malam', 'pagi', 'tengah hari', 'petang', 'malam']
+  ],
+  [
+    ['pagi', 'pagi', 'tengah hari', 'petang', 'malam'],
+    ['tengah malam', 'pagi', 'tengah hari', 'petang', 'malam'], u
+  ],
+  [
+    ['00:00', '01:00'], ['01:00', '12:00'], ['12:00', '14:00'], ['14:00', '19:00'],
+    ['19:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/mt.ts b/packages/common/locales/extra/mt.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/mt.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/mua.ts b/packages/common/locales/extra/mua.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/mua.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/my.ts b/packages/common/locales/extra/my.ts
new file mode 100644
index 000000000000..e269bb9421ff
--- /dev/null
+++ b/packages/common/locales/extra/my.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'သန်းခေါင်ယံ', 'မွန်းတည့်', 'နံနက်',
+      'နေ့လယ်', 'ညနေ', 'ည'
+    ],
+    u, u
+  ],
+  u,
+  [
+    '00:00', '12:00', ['00:00', '12:00'], ['12:00', '16:00'], ['16:00', '19:00'],
+    ['19:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/extra/mzn.ts b/packages/common/locales/extra/mzn.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/mzn.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/naq.ts b/packages/common/locales/extra/naq.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/naq.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/nb-SJ.ts b/packages/common/locales/extra/nb-SJ.ts
new file mode 100644
index 000000000000..17744b709a44
--- /dev/null
+++ b/packages/common/locales/extra/nb-SJ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mn.', 'mg.', 'fm.', 'em.', 'kv.', 'nt.'],
+    ['midn.', 'morg.', 'form.', 'etterm.', 'kveld', 'natt'],
+    ['midnatt', 'morgenen', 'formiddagen', 'ettermiddagen', 'kvelden', 'natten']
+  ],
+  [
+    ['mn.', 'mg.', 'fm.', 'em.', 'kv.', 'nt.'],
+    ['midn.', 'morg.', 'form.', 'etterm.', 'kveld', 'natt'],
+    ['midnatt', 'morgen', 'formiddag', 'ettermiddag', 'kveld', 'natt']
+  ],
+  [
+    '00:00', ['06:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/nb.ts b/packages/common/locales/extra/nb.ts
new file mode 100644
index 000000000000..17744b709a44
--- /dev/null
+++ b/packages/common/locales/extra/nb.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mn.', 'mg.', 'fm.', 'em.', 'kv.', 'nt.'],
+    ['midn.', 'morg.', 'form.', 'etterm.', 'kveld', 'natt'],
+    ['midnatt', 'morgenen', 'formiddagen', 'ettermiddagen', 'kvelden', 'natten']
+  ],
+  [
+    ['mn.', 'mg.', 'fm.', 'em.', 'kv.', 'nt.'],
+    ['midn.', 'morg.', 'form.', 'etterm.', 'kveld', 'natt'],
+    ['midnatt', 'morgen', 'formiddag', 'ettermiddag', 'kveld', 'natt']
+  ],
+  [
+    '00:00', ['06:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/nd.ts b/packages/common/locales/extra/nd.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/nd.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/nds-NL.ts b/packages/common/locales/extra/nds-NL.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/nds-NL.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/nds.ts b/packages/common/locales/extra/nds.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/nds.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ne-IN.ts b/packages/common/locales/extra/ne-IN.ts
new file mode 100644
index 000000000000..9935aa0abdd3
--- /dev/null
+++ b/packages/common/locales/extra/ne-IN.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'मध्यरात', 'मध्यान्ह', 'बिहान',
+      'अपरान्ह', 'साँझ', 'बेलुकी', 'रात'
+    ],
+    u, u
+  ],
+  u,
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '16:00'], ['16:00', '19:00'],
+    ['19:00', '22:00'], ['22:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ne.ts b/packages/common/locales/extra/ne.ts
new file mode 100644
index 000000000000..9935aa0abdd3
--- /dev/null
+++ b/packages/common/locales/extra/ne.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'मध्यरात', 'मध्यान्ह', 'बिहान',
+      'अपरान्ह', 'साँझ', 'बेलुकी', 'रात'
+    ],
+    u, u
+  ],
+  u,
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '16:00'], ['16:00', '19:00'],
+    ['19:00', '22:00'], ['22:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/nl-AW.ts b/packages/common/locales/extra/nl-AW.ts
new file mode 100644
index 000000000000..5b5e89b4c14c
--- /dev/null
+++ b/packages/common/locales/extra/nl-AW.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['middernacht', '‘s ochtends', '‘s middags', '‘s avonds', '‘s nachts'], u, u],
+  [['middernacht', 'ochtend', 'middag', 'avond', 'nacht'], u, u],
+  ['00:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'], ['00:00', '06:00']]
+];
diff --git a/packages/common/locales/extra/nl-BE.ts b/packages/common/locales/extra/nl-BE.ts
new file mode 100644
index 000000000000..5b5e89b4c14c
--- /dev/null
+++ b/packages/common/locales/extra/nl-BE.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['middernacht', '‘s ochtends', '‘s middags', '‘s avonds', '‘s nachts'], u, u],
+  [['middernacht', 'ochtend', 'middag', 'avond', 'nacht'], u, u],
+  ['00:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'], ['00:00', '06:00']]
+];
diff --git a/packages/common/locales/extra/nl-BQ.ts b/packages/common/locales/extra/nl-BQ.ts
new file mode 100644
index 000000000000..5b5e89b4c14c
--- /dev/null
+++ b/packages/common/locales/extra/nl-BQ.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['middernacht', '‘s ochtends', '‘s middags', '‘s avonds', '‘s nachts'], u, u],
+  [['middernacht', 'ochtend', 'middag', 'avond', 'nacht'], u, u],
+  ['00:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'], ['00:00', '06:00']]
+];
diff --git a/packages/common/locales/extra/nl-CW.ts b/packages/common/locales/extra/nl-CW.ts
new file mode 100644
index 000000000000..5b5e89b4c14c
--- /dev/null
+++ b/packages/common/locales/extra/nl-CW.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['middernacht', '‘s ochtends', '‘s middags', '‘s avonds', '‘s nachts'], u, u],
+  [['middernacht', 'ochtend', 'middag', 'avond', 'nacht'], u, u],
+  ['00:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'], ['00:00', '06:00']]
+];
diff --git a/packages/common/locales/extra/nl-SR.ts b/packages/common/locales/extra/nl-SR.ts
new file mode 100644
index 000000000000..5b5e89b4c14c
--- /dev/null
+++ b/packages/common/locales/extra/nl-SR.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['middernacht', '‘s ochtends', '‘s middags', '‘s avonds', '‘s nachts'], u, u],
+  [['middernacht', 'ochtend', 'middag', 'avond', 'nacht'], u, u],
+  ['00:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'], ['00:00', '06:00']]
+];
diff --git a/packages/common/locales/extra/nl-SX.ts b/packages/common/locales/extra/nl-SX.ts
new file mode 100644
index 000000000000..5b5e89b4c14c
--- /dev/null
+++ b/packages/common/locales/extra/nl-SX.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['middernacht', '‘s ochtends', '‘s middags', '‘s avonds', '‘s nachts'], u, u],
+  [['middernacht', 'ochtend', 'middag', 'avond', 'nacht'], u, u],
+  ['00:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'], ['00:00', '06:00']]
+];
diff --git a/packages/common/locales/extra/nl.ts b/packages/common/locales/extra/nl.ts
new file mode 100644
index 000000000000..5b5e89b4c14c
--- /dev/null
+++ b/packages/common/locales/extra/nl.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['middernacht', '‘s ochtends', '‘s middags', '‘s avonds', '‘s nachts'], u, u],
+  [['middernacht', 'ochtend', 'middag', 'avond', 'nacht'], u, u],
+  ['00:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'], ['00:00', '06:00']]
+];
diff --git a/packages/common/locales/extra/nmg.ts b/packages/common/locales/extra/nmg.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/nmg.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/nn.ts b/packages/common/locales/extra/nn.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/nn.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/nnh.ts b/packages/common/locales/extra/nnh.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/nnh.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/nus.ts b/packages/common/locales/extra/nus.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/nus.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/nyn.ts b/packages/common/locales/extra/nyn.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/nyn.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/om-KE.ts b/packages/common/locales/extra/om-KE.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/om-KE.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/om.ts b/packages/common/locales/extra/om.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/om.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/or.ts b/packages/common/locales/extra/or.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/or.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/os-RU.ts b/packages/common/locales/extra/os-RU.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/os-RU.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/os.ts b/packages/common/locales/extra/os.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/os.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/pa-Arab.ts b/packages/common/locales/extra/pa-Arab.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/pa-Arab.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/pa-Guru.ts b/packages/common/locales/extra/pa-Guru.ts
new file mode 100644
index 000000000000..abe2c5b6858b
--- /dev/null
+++ b/packages/common/locales/extra/pa-Guru.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'ਅੱਧੀ ਰਾਤ', 'ਸਵੇਰੇ', 'ਦੁਪਹਿਰੇ', 'ਸ਼ਾਮੀਂ',
+      'ਰਾਤੀਂ'
+    ],
+    u, u
+  ],
+  [
+    [
+      'ਅੱਧੀ ਰਾਤ', 'ਸਵੇਰੇ', 'ਦੁਪਹਿਰੇ', 'ਸ਼ਾਮੀਂ',
+      'ਰਾਤੀਂ'
+    ],
+    u,
+    [
+      'ਅੱਧੀ ਰਾਤ', 'ਸਵੇਰੇ', 'ਦੁਪਹਿਰੇ', 'ਸ਼ਾਮ',
+      'ਰਾਤ'
+    ]
+  ],
+  ['00:00', ['04:00', '12:00'], ['12:00', '16:00'], ['16:00', '21:00'], ['21:00', '04:00']]
+];
diff --git a/packages/common/locales/extra/pa.ts b/packages/common/locales/extra/pa.ts
new file mode 100644
index 000000000000..abe2c5b6858b
--- /dev/null
+++ b/packages/common/locales/extra/pa.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'ਅੱਧੀ ਰਾਤ', 'ਸਵੇਰੇ', 'ਦੁਪਹਿਰੇ', 'ਸ਼ਾਮੀਂ',
+      'ਰਾਤੀਂ'
+    ],
+    u, u
+  ],
+  [
+    [
+      'ਅੱਧੀ ਰਾਤ', 'ਸਵੇਰੇ', 'ਦੁਪਹਿਰੇ', 'ਸ਼ਾਮੀਂ',
+      'ਰਾਤੀਂ'
+    ],
+    u,
+    [
+      'ਅੱਧੀ ਰਾਤ', 'ਸਵੇਰੇ', 'ਦੁਪਹਿਰੇ', 'ਸ਼ਾਮ',
+      'ਰਾਤ'
+    ]
+  ],
+  ['00:00', ['04:00', '12:00'], ['12:00', '16:00'], ['16:00', '21:00'], ['21:00', '04:00']]
+];
diff --git a/packages/common/locales/extra/pl.ts b/packages/common/locales/extra/pl.ts
new file mode 100644
index 000000000000..1e5ac5ee7f4c
--- /dev/null
+++ b/packages/common/locales/extra/pl.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['o półn.', 'w poł.', 'rano', 'przed poł.', 'po poł.', 'wiecz.', 'w nocy'],
+    [
+      'o północy', 'w południe', 'rano', 'przed południem', 'po południu', 'wieczorem',
+      'w nocy'
+    ],
+    u
+  ],
+  [
+    ['półn.', 'poł.', 'rano', 'przedpoł.', 'popoł.', 'wiecz.', 'noc'],
+    ['północ', 'południe', 'rano', 'przedpołudnie', 'popołudnie', 'wieczór', 'noc'], u
+  ],
+  [
+    '00:00', '12:00', ['06:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '21:00'], ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/prg.ts b/packages/common/locales/extra/prg.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/prg.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ps.ts b/packages/common/locales/extra/ps.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ps.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/pt-AO.ts b/packages/common/locales/extra/pt-AO.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-AO.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt-CH.ts b/packages/common/locales/extra/pt-CH.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-CH.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt-CV.ts b/packages/common/locales/extra/pt-CV.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-CV.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt-GQ.ts b/packages/common/locales/extra/pt-GQ.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-GQ.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt-GW.ts b/packages/common/locales/extra/pt-GW.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-GW.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt-LU.ts b/packages/common/locales/extra/pt-LU.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-LU.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt-MO.ts b/packages/common/locales/extra/pt-MO.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-MO.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt-MZ.ts b/packages/common/locales/extra/pt-MZ.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-MZ.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt-PT.ts b/packages/common/locales/extra/pt-PT.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-PT.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt-ST.ts b/packages/common/locales/extra/pt-ST.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-ST.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt-TL.ts b/packages/common/locales/extra/pt-TL.ts
new file mode 100644
index 000000000000..d61b2623b8f0
--- /dev/null
+++ b/packages/common/locales/extra/pt-TL.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'],
+    ['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u
+  ],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/pt.ts b/packages/common/locales/extra/pt.ts
new file mode 100644
index 000000000000..210cfd1019b0
--- /dev/null
+++ b/packages/common/locales/extra/pt.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['meia-noite', 'meio-dia', 'da manhã', 'da tarde', 'da noite', 'da madrugada'], u, u],
+  [['meia-noite', 'meio-dia', 'manhã', 'tarde', 'noite', 'madrugada'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '19:00'], ['19:00', '24:00'],
+    ['00:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/qu-BO.ts b/packages/common/locales/extra/qu-BO.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/qu-BO.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/qu-EC.ts b/packages/common/locales/extra/qu-EC.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/qu-EC.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/qu.ts b/packages/common/locales/extra/qu.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/qu.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/rm.ts b/packages/common/locales/extra/rm.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/rm.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/rn.ts b/packages/common/locales/extra/rn.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/rn.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ro-MD.ts b/packages/common/locales/extra/ro-MD.ts
new file mode 100644
index 000000000000..2654f212386a
--- /dev/null
+++ b/packages/common/locales/extra/ro-MD.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['miezul nopții', 'amiază', 'dimineață', 'după-amiază', 'seară', 'noapte'],
+    ['miezul nopții', 'amiază', 'dimineața', 'după-amiaza', 'seara', 'noaptea'], u
+  ],
+  u,
+  [
+    '00:00', '12:00', ['05:00', '12:00'], ['12:00', '18:00'], ['18:00', '22:00'],
+    ['22:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ro.ts b/packages/common/locales/extra/ro.ts
new file mode 100644
index 000000000000..9f6aa247959c
--- /dev/null
+++ b/packages/common/locales/extra/ro.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['miezul nopții', 'la amiază', 'dimineața', 'după-amiaza', 'seara', 'noaptea'],
+    ['miezul nopții', 'amiază', 'dimineața', 'după-amiaza', 'seara', 'noaptea'],
+    ['la miezul nopții', 'la amiază', 'dimineața', 'după-amiaza', 'seara', 'noaptea']
+  ],
+  [
+    ['miezul nopții', 'amiază', 'dimineața', 'după-amiaza', 'seara', 'noaptea'], u,
+    ['la miezul nopții', 'la amiază', 'dimineața', 'după-amiaza', 'seara', 'noaptea']
+  ],
+  [
+    '00:00', '12:00', ['05:00', '12:00'], ['12:00', '18:00'], ['18:00', '22:00'],
+    ['22:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/rof.ts b/packages/common/locales/extra/rof.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/rof.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/root.ts b/packages/common/locales/extra/root.ts
new file mode 100644
index 000000000000..92d9305c1d38
--- /dev/null
+++ b/packages/common/locales/extra/root.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['mi', 'n', 'in the morning', 'in the afternoon', 'in the evening', 'at night'],
+    ['midnight', 'noon', 'in the morning', 'in the afternoon', 'in the evening', 'at night'], u
+  ],
+  [['midnight', 'noon', 'morning', 'afternoon', 'evening', 'night'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ru-BY.ts b/packages/common/locales/extra/ru-BY.ts
new file mode 100644
index 000000000000..b845127fb3db
--- /dev/null
+++ b/packages/common/locales/extra/ru-BY.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['полн.', 'полд.', 'утра', 'дня', 'веч.', 'ночи'],
+    ['полн.', 'полд.', 'утра', 'дня', 'вечера', 'ночи'],
+    ['полночь', 'полдень', 'утра', 'дня', 'вечера', 'ночи']
+  ],
+  [
+    ['полн.', 'полд.', 'утро', 'день', 'веч.', 'ночь'], u,
+    ['полночь', 'полдень', 'утро', 'день', 'вечер', 'ночь']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ru-KG.ts b/packages/common/locales/extra/ru-KG.ts
new file mode 100644
index 000000000000..b845127fb3db
--- /dev/null
+++ b/packages/common/locales/extra/ru-KG.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['полн.', 'полд.', 'утра', 'дня', 'веч.', 'ночи'],
+    ['полн.', 'полд.', 'утра', 'дня', 'вечера', 'ночи'],
+    ['полночь', 'полдень', 'утра', 'дня', 'вечера', 'ночи']
+  ],
+  [
+    ['полн.', 'полд.', 'утро', 'день', 'веч.', 'ночь'], u,
+    ['полночь', 'полдень', 'утро', 'день', 'вечер', 'ночь']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ru-KZ.ts b/packages/common/locales/extra/ru-KZ.ts
new file mode 100644
index 000000000000..b845127fb3db
--- /dev/null
+++ b/packages/common/locales/extra/ru-KZ.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['полн.', 'полд.', 'утра', 'дня', 'веч.', 'ночи'],
+    ['полн.', 'полд.', 'утра', 'дня', 'вечера', 'ночи'],
+    ['полночь', 'полдень', 'утра', 'дня', 'вечера', 'ночи']
+  ],
+  [
+    ['полн.', 'полд.', 'утро', 'день', 'веч.', 'ночь'], u,
+    ['полночь', 'полдень', 'утро', 'день', 'вечер', 'ночь']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ru-MD.ts b/packages/common/locales/extra/ru-MD.ts
new file mode 100644
index 000000000000..b845127fb3db
--- /dev/null
+++ b/packages/common/locales/extra/ru-MD.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['полн.', 'полд.', 'утра', 'дня', 'веч.', 'ночи'],
+    ['полн.', 'полд.', 'утра', 'дня', 'вечера', 'ночи'],
+    ['полночь', 'полдень', 'утра', 'дня', 'вечера', 'ночи']
+  ],
+  [
+    ['полн.', 'полд.', 'утро', 'день', 'веч.', 'ночь'], u,
+    ['полночь', 'полдень', 'утро', 'день', 'вечер', 'ночь']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ru-UA.ts b/packages/common/locales/extra/ru-UA.ts
new file mode 100644
index 000000000000..b845127fb3db
--- /dev/null
+++ b/packages/common/locales/extra/ru-UA.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['полн.', 'полд.', 'утра', 'дня', 'веч.', 'ночи'],
+    ['полн.', 'полд.', 'утра', 'дня', 'вечера', 'ночи'],
+    ['полночь', 'полдень', 'утра', 'дня', 'вечера', 'ночи']
+  ],
+  [
+    ['полн.', 'полд.', 'утро', 'день', 'веч.', 'ночь'], u,
+    ['полночь', 'полдень', 'утро', 'день', 'вечер', 'ночь']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ru.ts b/packages/common/locales/extra/ru.ts
new file mode 100644
index 000000000000..b845127fb3db
--- /dev/null
+++ b/packages/common/locales/extra/ru.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['полн.', 'полд.', 'утра', 'дня', 'веч.', 'ночи'],
+    ['полн.', 'полд.', 'утра', 'дня', 'вечера', 'ночи'],
+    ['полночь', 'полдень', 'утра', 'дня', 'вечера', 'ночи']
+  ],
+  [
+    ['полн.', 'полд.', 'утро', 'день', 'веч.', 'ночь'], u,
+    ['полночь', 'полдень', 'утро', 'день', 'вечер', 'ночь']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/rw.ts b/packages/common/locales/extra/rw.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/rw.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/rwk.ts b/packages/common/locales/extra/rwk.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/rwk.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/sah.ts b/packages/common/locales/extra/sah.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/sah.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/saq.ts b/packages/common/locales/extra/saq.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/saq.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/sbp.ts b/packages/common/locales/extra/sbp.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/sbp.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/sd.ts b/packages/common/locales/extra/sd.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/sd.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/se-FI.ts b/packages/common/locales/extra/se-FI.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/se-FI.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/se-SE.ts b/packages/common/locales/extra/se-SE.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/se-SE.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/se.ts b/packages/common/locales/extra/se.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/se.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/seh.ts b/packages/common/locales/extra/seh.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/seh.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ses.ts b/packages/common/locales/extra/ses.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ses.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/sg.ts b/packages/common/locales/extra/sg.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/sg.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/shi-Latn.ts b/packages/common/locales/extra/shi-Latn.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/shi-Latn.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/shi-Tfng.ts b/packages/common/locales/extra/shi-Tfng.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/shi-Tfng.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/shi.ts b/packages/common/locales/extra/shi.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/shi.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/si.ts b/packages/common/locales/extra/si.ts
new file mode 100644
index 000000000000..8621fd6d9fb5
--- /dev/null
+++ b/packages/common/locales/extra/si.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['මැ', 'ම', 'පා', 'උ', 'ද', 'හ', 'රෑ', 'මැ'],
+    [
+      'මැදියම', 'මධ්\u200dයාහ්නය', 'පාන්දර', 'උදේ',
+      'දවල්', 'හවස', 'රෑ', 'මැදියමට පසු'
+    ],
+    u
+  ],
+  [
+    [
+      'මැදියම', 'මධ්\u200dයාහ්නය', 'පාන්දර', 'උදේ',
+      'දවල්', 'හවස', 'රෑ', 'මැදියමට පසු'
+    ],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['01:00', '06:00'], ['06:00', '12:00'], ['12:00', '14:00'],
+    ['14:00', '18:00'], ['18:00', '24:00'], ['00:00', '01:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sk.ts b/packages/common/locales/extra/sk.ts
new file mode 100644
index 000000000000..f3c3ee4032ac
--- /dev/null
+++ b/packages/common/locales/extra/sk.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['o poln.', 'nap.', 'ráno', 'dop.', 'pop.', 'več.', 'v n.'],
+    ['o poln.', 'napol.', 'ráno', 'dopol.', 'popol.', 'večer', 'v noci'],
+    ['o polnoci', 'napoludnie', 'ráno', 'dopoludnia', 'popoludní', 'večer', 'v noci']
+  ],
+  [
+    ['poln.', 'pol.', 'ráno', 'dop.', 'pop.', 'več.', 'noc'],
+    ['poln.', 'pol.', 'ráno', 'dopol.', 'popol.', 'večer', 'noc'],
+    ['polnoc', 'poludnie', 'ráno', 'dopoludnie', 'popoludnie', 'večer', 'noc']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '09:00'], ['09:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '22:00'], ['22:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sl.ts b/packages/common/locales/extra/sl.ts
new file mode 100644
index 000000000000..75ecc968a3af
--- /dev/null
+++ b/packages/common/locales/extra/sl.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['24.00', '12.00', 'zj', 'd', 'p', 'zv', 'po'],
+    ['opoln.', 'opold.', 'zjut.', 'dop.', 'pop.', 'zveč.', 'ponoči'],
+    ['opolnoči', 'opoldne', 'zjutraj', 'dopoldan', 'popoldan', 'zvečer', 'ponoči']
+  ],
+  [
+    ['24.00', '12.00', 'j', 'd', 'p', 'v', 'n'],
+    ['poln.', 'pold.', 'jut.', 'dop.', 'pop.', 'zveč.', 'noč'],
+    ['polnoč', 'poldne', 'jutro', 'dopoldne', 'popoldne', 'večer', 'noč']
+  ],
+  [
+    '00:00', '12:00', ['06:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '22:00'], ['22:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/smn.ts b/packages/common/locales/extra/smn.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/smn.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/sn.ts b/packages/common/locales/extra/sn.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/sn.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/so-DJ.ts b/packages/common/locales/extra/so-DJ.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/so-DJ.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/so-ET.ts b/packages/common/locales/extra/so-ET.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/so-ET.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/so-KE.ts b/packages/common/locales/extra/so-KE.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/so-KE.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/so.ts b/packages/common/locales/extra/so.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/so.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/sq-MK.ts b/packages/common/locales/extra/sq-MK.ts
new file mode 100644
index 000000000000..410b9d6b6c3c
--- /dev/null
+++ b/packages/common/locales/extra/sq-MK.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'e mesnatës', 'e mesditës', 'e mëngjesit', 'e paradites', 'e pasdites', 'e mbrëmjes',
+      'e natës'
+    ],
+    u, u
+  ],
+  [['mesnatë', 'mesditë', 'mëngjes', 'paradite', 'pasdite', 'mbrëmje', 'natë'], u, u],
+  [
+    '00:00', '12:00', ['04:00', '09:00'], ['09:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sq-XK.ts b/packages/common/locales/extra/sq-XK.ts
new file mode 100644
index 000000000000..410b9d6b6c3c
--- /dev/null
+++ b/packages/common/locales/extra/sq-XK.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'e mesnatës', 'e mesditës', 'e mëngjesit', 'e paradites', 'e pasdites', 'e mbrëmjes',
+      'e natës'
+    ],
+    u, u
+  ],
+  [['mesnatë', 'mesditë', 'mëngjes', 'paradite', 'pasdite', 'mbrëmje', 'natë'], u, u],
+  [
+    '00:00', '12:00', ['04:00', '09:00'], ['09:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sq.ts b/packages/common/locales/extra/sq.ts
new file mode 100644
index 000000000000..410b9d6b6c3c
--- /dev/null
+++ b/packages/common/locales/extra/sq.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'e mesnatës', 'e mesditës', 'e mëngjesit', 'e paradites', 'e pasdites', 'e mbrëmjes',
+      'e natës'
+    ],
+    u, u
+  ],
+  [['mesnatë', 'mesditë', 'mëngjes', 'paradite', 'pasdite', 'mbrëmje', 'natë'], u, u],
+  [
+    '00:00', '12:00', ['04:00', '09:00'], ['09:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '24:00'], ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sr-Cyrl-BA.ts b/packages/common/locales/extra/sr-Cyrl-BA.ts
new file mode 100644
index 000000000000..a52db938b99a
--- /dev/null
+++ b/packages/common/locales/extra/sr-Cyrl-BA.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['поноћ', 'подне', 'јутро', 'по под.', 'вече', 'ноћ'],
+    ['поноћ', 'подне', 'јутро', 'по под.', 'вече', 'ноћу'],
+    ['поноћ', 'подне', 'ујутро', 'по подне', 'увече', 'ноћу']
+  ],
+  [['поноћ', 'подне', 'јутро', 'поподне', 'вече', 'ноћ'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sr-Cyrl-ME.ts b/packages/common/locales/extra/sr-Cyrl-ME.ts
new file mode 100644
index 000000000000..a52db938b99a
--- /dev/null
+++ b/packages/common/locales/extra/sr-Cyrl-ME.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['поноћ', 'подне', 'јутро', 'по под.', 'вече', 'ноћ'],
+    ['поноћ', 'подне', 'јутро', 'по под.', 'вече', 'ноћу'],
+    ['поноћ', 'подне', 'ујутро', 'по подне', 'увече', 'ноћу']
+  ],
+  [['поноћ', 'подне', 'јутро', 'поподне', 'вече', 'ноћ'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sr-Cyrl-XK.ts b/packages/common/locales/extra/sr-Cyrl-XK.ts
new file mode 100644
index 000000000000..099a98548eb0
--- /dev/null
+++ b/packages/common/locales/extra/sr-Cyrl-XK.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['поноћ', 'подне', 'јутро', 'по под.', 'вече', 'ноћ'],
+    ['поноћ', 'подне', 'јутро', 'по под.', 'увече', 'ноћу'],
+    ['поноћ', 'подне', 'ујутро', 'по подне', 'увече', 'ноћу']
+  ],
+  [['поноћ', 'подне', 'јутро', 'поподне', 'вече', 'ноћ'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sr-Cyrl.ts b/packages/common/locales/extra/sr-Cyrl.ts
new file mode 100644
index 000000000000..34ce23822030
--- /dev/null
+++ b/packages/common/locales/extra/sr-Cyrl.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['поноћ', 'подне', 'ујутру', 'по подне', 'увече', 'ноћу'],
+    ['поноћ', 'подне', 'ујутро', 'по подне', 'увече', 'ноћу'], u
+  ],
+  [['поноћ', 'подне', 'јутро', 'поподне', 'вече', 'ноћ'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sr-Latn-BA.ts b/packages/common/locales/extra/sr-Latn-BA.ts
new file mode 100644
index 000000000000..d22163edd4a0
--- /dev/null
+++ b/packages/common/locales/extra/sr-Latn-BA.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['ponoć', 'podne', 'jutro', 'po pod.', 'veče', 'noć'],
+    ['ponoć', 'podne', 'jutro', 'po pod.', 'veče', 'noću'],
+    ['ponoć', 'podne', 'ujutro', 'po podne', 'uveče', 'noću']
+  ],
+  [['ponoć', 'podne', 'jutro', 'popodne', 'veče', 'noć'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sr-Latn-ME.ts b/packages/common/locales/extra/sr-Latn-ME.ts
new file mode 100644
index 000000000000..d22163edd4a0
--- /dev/null
+++ b/packages/common/locales/extra/sr-Latn-ME.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['ponoć', 'podne', 'jutro', 'po pod.', 'veče', 'noć'],
+    ['ponoć', 'podne', 'jutro', 'po pod.', 'veče', 'noću'],
+    ['ponoć', 'podne', 'ujutro', 'po podne', 'uveče', 'noću']
+  ],
+  [['ponoć', 'podne', 'jutro', 'popodne', 'veče', 'noć'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sr-Latn-XK.ts b/packages/common/locales/extra/sr-Latn-XK.ts
new file mode 100644
index 000000000000..0c9eb20f2913
--- /dev/null
+++ b/packages/common/locales/extra/sr-Latn-XK.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['ponoć', 'podne', 'jutro', 'po pod.', 'veče', 'noć'],
+    ['ponoć', 'podne', 'jutro', 'po pod.', 'uveče', 'noću'],
+    ['ponoć', 'podne', 'ujutro', 'po podne', 'uveče', 'noću']
+  ],
+  [['ponoć', 'podne', 'jutro', 'popodne', 'veče', 'noć'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sr-Latn.ts b/packages/common/locales/extra/sr-Latn.ts
new file mode 100644
index 000000000000..b13107fbac3e
--- /dev/null
+++ b/packages/common/locales/extra/sr-Latn.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['ponoć', 'podne', 'ujutru', 'po podne', 'uveče', 'noću'],
+    ['ponoć', 'podne', 'ujutro', 'po podne', 'uveče', 'noću'], u
+  ],
+  [['ponoć', 'podne', 'jutro', 'popodne', 'veče', 'noć'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sr.ts b/packages/common/locales/extra/sr.ts
new file mode 100644
index 000000000000..34ce23822030
--- /dev/null
+++ b/packages/common/locales/extra/sr.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['поноћ', 'подне', 'ујутру', 'по подне', 'увече', 'ноћу'],
+    ['поноћ', 'подне', 'ујутро', 'по подне', 'увече', 'ноћу'], u
+  ],
+  [['поноћ', 'подне', 'јутро', 'поподне', 'вече', 'ноћ'], u, u],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sv-AX.ts b/packages/common/locales/extra/sv-AX.ts
new file mode 100644
index 000000000000..889ff63d2deb
--- /dev/null
+++ b/packages/common/locales/extra/sv-AX.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['midn.', 'på morg.', 'på förm.', 'på efterm.', 'på kvällen', 'på natten'],
+    ['midnatt', 'på morg.', 'på förm.', 'på efterm.', 'på kvällen', 'på natten'],
+    [
+      'midnatt', 'på morgonen', 'på förmiddagen', 'på eftermiddagen', 'på kvällen',
+      'på natten'
+    ]
+  ],
+  [
+    ['midn.', 'morg.', 'förm.', 'efterm.', 'kväll', 'natt'],
+    ['midnatt', 'morgon', 'förm.', 'efterm.', 'kväll', 'natt'],
+    ['midnatt', 'morgon', 'förmiddag', 'eftermiddag', 'kväll', 'natt']
+  ],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sv-FI.ts b/packages/common/locales/extra/sv-FI.ts
new file mode 100644
index 000000000000..889ff63d2deb
--- /dev/null
+++ b/packages/common/locales/extra/sv-FI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['midn.', 'på morg.', 'på förm.', 'på efterm.', 'på kvällen', 'på natten'],
+    ['midnatt', 'på morg.', 'på förm.', 'på efterm.', 'på kvällen', 'på natten'],
+    [
+      'midnatt', 'på morgonen', 'på förmiddagen', 'på eftermiddagen', 'på kvällen',
+      'på natten'
+    ]
+  ],
+  [
+    ['midn.', 'morg.', 'förm.', 'efterm.', 'kväll', 'natt'],
+    ['midnatt', 'morgon', 'förm.', 'efterm.', 'kväll', 'natt'],
+    ['midnatt', 'morgon', 'förmiddag', 'eftermiddag', 'kväll', 'natt']
+  ],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sv.ts b/packages/common/locales/extra/sv.ts
new file mode 100644
index 000000000000..889ff63d2deb
--- /dev/null
+++ b/packages/common/locales/extra/sv.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['midn.', 'på morg.', 'på förm.', 'på efterm.', 'på kvällen', 'på natten'],
+    ['midnatt', 'på morg.', 'på förm.', 'på efterm.', 'på kvällen', 'på natten'],
+    [
+      'midnatt', 'på morgonen', 'på förmiddagen', 'på eftermiddagen', 'på kvällen',
+      'på natten'
+    ]
+  ],
+  [
+    ['midn.', 'morg.', 'förm.', 'efterm.', 'kväll', 'natt'],
+    ['midnatt', 'morgon', 'förm.', 'efterm.', 'kväll', 'natt'],
+    ['midnatt', 'morgon', 'förmiddag', 'eftermiddag', 'kväll', 'natt']
+  ],
+  [
+    '00:00', ['05:00', '10:00'], ['10:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sw-CD.ts b/packages/common/locales/extra/sw-CD.ts
new file mode 100644
index 000000000000..e4be56f0a2db
--- /dev/null
+++ b/packages/common/locales/extra/sw-CD.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['usiku', 'mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    u
+  ],
+  [
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'alasiri', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '07:00'], ['07:00', '12:00'], ['12:00', '16:00'],
+    ['16:00', '19:00'], ['19:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sw-KE.ts b/packages/common/locales/extra/sw-KE.ts
new file mode 100644
index 000000000000..e4be56f0a2db
--- /dev/null
+++ b/packages/common/locales/extra/sw-KE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['usiku', 'mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    u
+  ],
+  [
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'alasiri', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '07:00'], ['07:00', '12:00'], ['12:00', '16:00'],
+    ['16:00', '19:00'], ['19:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sw-UG.ts b/packages/common/locales/extra/sw-UG.ts
new file mode 100644
index 000000000000..e4be56f0a2db
--- /dev/null
+++ b/packages/common/locales/extra/sw-UG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['usiku', 'mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    u
+  ],
+  [
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'alasiri', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '07:00'], ['07:00', '12:00'], ['12:00', '16:00'],
+    ['16:00', '19:00'], ['19:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/sw.ts b/packages/common/locales/extra/sw.ts
new file mode 100644
index 000000000000..e4be56f0a2db
--- /dev/null
+++ b/packages/common/locales/extra/sw.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['usiku', 'mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    u
+  ],
+  [
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'alasiri', 'jioni', 'usiku'],
+    ['saa sita za usiku', 'saa sita za mchana', 'alfajiri', 'asubuhi', 'mchana', 'jioni', 'usiku']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '07:00'], ['07:00', '12:00'], ['12:00', '16:00'],
+    ['16:00', '19:00'], ['19:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ta-LK.ts b/packages/common/locales/extra/ta-LK.ts
new file mode 100644
index 000000000000..b7247418b3c1
--- /dev/null
+++ b/packages/common/locales/extra/ta-LK.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'நள்.', 'நண்.', 'அதி.', 'கா.', 'மதி.', 'பிற்.', 'மா.',
+      'அந்தி மா.', 'இர.'
+    ],
+    [
+      'நள்ளிரவு', 'நண்பகல்', 'அதிகாலை', 'காலை',
+      'மதியம்', 'பிற்பகல்', 'மாலை',
+      'அந்தி மாலை', 'இரவு'
+    ],
+    u
+  ],
+  [
+    [
+      'நள்.', 'நண்.', 'அதி.', 'கா.', 'மதி.', 'பிற்.', 'மா.',
+      'அந்தி மா.', 'இ.'
+    ],
+    [
+      'நள்ளிரவு', 'நண்பகல்', 'அதிகாலை', 'காலை',
+      'மதியம்', 'பிற்பகல்', 'மாலை',
+      'அந்தி மாலை', 'இரவு'
+    ],
+    u
+  ],
+  [
+    '00:00', '12:00', ['03:00', '05:00'], ['05:00', '12:00'], ['12:00', '14:00'],
+    ['14:00', '16:00'], ['16:00', '18:00'], ['18:00', '21:00'], ['21:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ta-MY.ts b/packages/common/locales/extra/ta-MY.ts
new file mode 100644
index 000000000000..b7247418b3c1
--- /dev/null
+++ b/packages/common/locales/extra/ta-MY.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'நள்.', 'நண்.', 'அதி.', 'கா.', 'மதி.', 'பிற்.', 'மா.',
+      'அந்தி மா.', 'இர.'
+    ],
+    [
+      'நள்ளிரவு', 'நண்பகல்', 'அதிகாலை', 'காலை',
+      'மதியம்', 'பிற்பகல்', 'மாலை',
+      'அந்தி மாலை', 'இரவு'
+    ],
+    u
+  ],
+  [
+    [
+      'நள்.', 'நண்.', 'அதி.', 'கா.', 'மதி.', 'பிற்.', 'மா.',
+      'அந்தி மா.', 'இ.'
+    ],
+    [
+      'நள்ளிரவு', 'நண்பகல்', 'அதிகாலை', 'காலை',
+      'மதியம்', 'பிற்பகல்', 'மாலை',
+      'அந்தி மாலை', 'இரவு'
+    ],
+    u
+  ],
+  [
+    '00:00', '12:00', ['03:00', '05:00'], ['05:00', '12:00'], ['12:00', '14:00'],
+    ['14:00', '16:00'], ['16:00', '18:00'], ['18:00', '21:00'], ['21:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ta-SG.ts b/packages/common/locales/extra/ta-SG.ts
new file mode 100644
index 000000000000..b7247418b3c1
--- /dev/null
+++ b/packages/common/locales/extra/ta-SG.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'நள்.', 'நண்.', 'அதி.', 'கா.', 'மதி.', 'பிற்.', 'மா.',
+      'அந்தி மா.', 'இர.'
+    ],
+    [
+      'நள்ளிரவு', 'நண்பகல்', 'அதிகாலை', 'காலை',
+      'மதியம்', 'பிற்பகல்', 'மாலை',
+      'அந்தி மாலை', 'இரவு'
+    ],
+    u
+  ],
+  [
+    [
+      'நள்.', 'நண்.', 'அதி.', 'கா.', 'மதி.', 'பிற்.', 'மா.',
+      'அந்தி மா.', 'இ.'
+    ],
+    [
+      'நள்ளிரவு', 'நண்பகல்', 'அதிகாலை', 'காலை',
+      'மதியம்', 'பிற்பகல்', 'மாலை',
+      'அந்தி மாலை', 'இரவு'
+    ],
+    u
+  ],
+  [
+    '00:00', '12:00', ['03:00', '05:00'], ['05:00', '12:00'], ['12:00', '14:00'],
+    ['14:00', '16:00'], ['16:00', '18:00'], ['18:00', '21:00'], ['21:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ta.ts b/packages/common/locales/extra/ta.ts
new file mode 100644
index 000000000000..b7247418b3c1
--- /dev/null
+++ b/packages/common/locales/extra/ta.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'நள்.', 'நண்.', 'அதி.', 'கா.', 'மதி.', 'பிற்.', 'மா.',
+      'அந்தி மா.', 'இர.'
+    ],
+    [
+      'நள்ளிரவு', 'நண்பகல்', 'அதிகாலை', 'காலை',
+      'மதியம்', 'பிற்பகல்', 'மாலை',
+      'அந்தி மாலை', 'இரவு'
+    ],
+    u
+  ],
+  [
+    [
+      'நள்.', 'நண்.', 'அதி.', 'கா.', 'மதி.', 'பிற்.', 'மா.',
+      'அந்தி மா.', 'இ.'
+    ],
+    [
+      'நள்ளிரவு', 'நண்பகல்', 'அதிகாலை', 'காலை',
+      'மதியம்', 'பிற்பகல்', 'மாலை',
+      'அந்தி மாலை', 'இரவு'
+    ],
+    u
+  ],
+  [
+    '00:00', '12:00', ['03:00', '05:00'], ['05:00', '12:00'], ['12:00', '14:00'],
+    ['14:00', '16:00'], ['16:00', '18:00'], ['18:00', '21:00'], ['21:00', '03:00']
+  ]
+];
diff --git a/packages/common/locales/extra/te.ts b/packages/common/locales/extra/te.ts
new file mode 100644
index 000000000000..e04915cfcf9c
--- /dev/null
+++ b/packages/common/locales/extra/te.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'అర్ధరాత్రి', 'ఉదయం', 'మధ్యాహ్నం',
+      'సాయంత్రం', 'రాత్రి'
+    ],
+    u, u
+  ],
+  u, ['00:00', ['06:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'], ['21:00', '06:00']]
+];
diff --git a/packages/common/locales/extra/teo-KE.ts b/packages/common/locales/extra/teo-KE.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/teo-KE.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/teo.ts b/packages/common/locales/extra/teo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/teo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/tg.ts b/packages/common/locales/extra/tg.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/tg.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/th.ts b/packages/common/locales/extra/th.ts
new file mode 100644
index 000000000000..c4639d5e937e
--- /dev/null
+++ b/packages/common/locales/extra/th.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'เที่ยงคืน', 'n', 'เช้า', 'เที่ยง', 'บ่าย',
+      'เย็น', 'ค่ำ', 'กลางคืน'
+    ],
+    [
+      'เที่ยงคืน', 'เที่ยง', 'ในตอนเช้า',
+      'ในตอนบ่าย', 'บ่าย', 'ในตอนเย็น', 'ค่ำ',
+      'กลางคืน'
+    ],
+    u
+  ],
+  [
+    [
+      'เที่ยงคืน', 'เที่ยง', 'เช้า',
+      'ช่วงเที่ยง', 'บ่าย', 'เย็น', 'ค่ำ',
+      'กลางคืน'
+    ],
+    [
+      'เที่ยงคืน', 'เที่ยง', 'ในตอนเช้า',
+      'ในตอนบ่าย', 'บ่าย', 'ในตอนเย็น', 'ค่ำ',
+      'กลางคืน'
+    ],
+    u
+  ],
+  [
+    '00:00', '12:00', ['06:00', '12:00'], ['12:00', '13:00'], ['13:00', '16:00'],
+    ['16:00', '18:00'], ['18:00', '21:00'], ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ti-ER.ts b/packages/common/locales/extra/ti-ER.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ti-ER.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ti.ts b/packages/common/locales/extra/ti.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ti.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/tk.ts b/packages/common/locales/extra/tk.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/tk.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/to.ts b/packages/common/locales/extra/to.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/to.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/tr-CY.ts b/packages/common/locales/extra/tr-CY.ts
new file mode 100644
index 000000000000..6d3ec675cc8d
--- /dev/null
+++ b/packages/common/locales/extra/tr-CY.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['gece', 'ö', 'sabah', 'öğleden önce', 'öğleden sonra', 'akşamüstü', 'akşam', 'gece'],
+    [
+      'gece yarısı', 'öğle', 'sabah', 'öğleden önce', 'öğleden sonra', 'akşamüstü',
+      'akşam', 'gece'
+    ],
+    u
+  ],
+  [
+    [
+      'gece yarısı', 'öğle', 'sabah', 'öğleden önce', 'öğleden sonra', 'akşamüstü',
+      'akşam', 'gece'
+    ],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['06:00', '11:00'], ['11:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '19:00'], ['19:00', '21:00'], ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/tr.ts b/packages/common/locales/extra/tr.ts
new file mode 100644
index 000000000000..6d3ec675cc8d
--- /dev/null
+++ b/packages/common/locales/extra/tr.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['gece', 'ö', 'sabah', 'öğleden önce', 'öğleden sonra', 'akşamüstü', 'akşam', 'gece'],
+    [
+      'gece yarısı', 'öğle', 'sabah', 'öğleden önce', 'öğleden sonra', 'akşamüstü',
+      'akşam', 'gece'
+    ],
+    u
+  ],
+  [
+    [
+      'gece yarısı', 'öğle', 'sabah', 'öğleden önce', 'öğleden sonra', 'akşamüstü',
+      'akşam', 'gece'
+    ],
+    u, u
+  ],
+  [
+    '00:00', '12:00', ['06:00', '11:00'], ['11:00', '12:00'], ['12:00', '18:00'],
+    ['18:00', '19:00'], ['19:00', '21:00'], ['21:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/tt.ts b/packages/common/locales/extra/tt.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/tt.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/twq.ts b/packages/common/locales/extra/twq.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/twq.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/tzm.ts b/packages/common/locales/extra/tzm.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/tzm.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/ug.ts b/packages/common/locales/extra/ug.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/ug.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/uk.ts b/packages/common/locales/extra/uk.ts
new file mode 100644
index 000000000000..ce3d8159dbad
--- /dev/null
+++ b/packages/common/locales/extra/uk.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['північ', 'п', 'ранку', 'дня', 'вечора', 'ночі'],
+    ['опівночі', 'пополудні', 'ранку', 'дня', 'вечора', 'ночі'],
+    u
+  ],
+  [['північ', 'полудень', 'ранок', 'день', 'вечір', 'ніч'], u, u],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '24:00'],
+    ['00:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ur-IN.ts b/packages/common/locales/extra/ur-IN.ts
new file mode 100644
index 000000000000..51d8c8b3df06
--- /dev/null
+++ b/packages/common/locales/extra/ur-IN.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['آدھی رات', 'صبح', 'دوپہر', 'سہ پہر', 'شام', 'رات'], u,
+    [
+      'آدھی رات', 'صبح میں', 'دوپہر میں', 'سہ پہر', 'شام میں',
+      'رات میں'
+    ]
+  ],
+  [['آدھی رات', 'صبح', 'دوپہر', 'سہ پہر', 'شام', 'رات'], u, u],
+  [
+    '00:00', ['04:00', '12:00'], ['12:00', '16:00'], ['16:00', '18:00'], ['18:00', '20:00'],
+    ['20:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/ur.ts b/packages/common/locales/extra/ur.ts
new file mode 100644
index 000000000000..51d8c8b3df06
--- /dev/null
+++ b/packages/common/locales/extra/ur.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['آدھی رات', 'صبح', 'دوپہر', 'سہ پہر', 'شام', 'رات'], u,
+    [
+      'آدھی رات', 'صبح میں', 'دوپہر میں', 'سہ پہر', 'شام میں',
+      'رات میں'
+    ]
+  ],
+  [['آدھی رات', 'صبح', 'دوپہر', 'سہ پہر', 'شام', 'رات'], u, u],
+  [
+    '00:00', ['04:00', '12:00'], ['12:00', '16:00'], ['16:00', '18:00'], ['18:00', '20:00'],
+    ['20:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/uz-Arab.ts b/packages/common/locales/extra/uz-Arab.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/uz-Arab.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/uz-Cyrl.ts b/packages/common/locales/extra/uz-Cyrl.ts
new file mode 100644
index 000000000000..5fa303ae9de5
--- /dev/null
+++ b/packages/common/locales/extra/uz-Cyrl.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    [
+      'ярим тун', 'туш пайти', 'эрталаб', 'кундузи',
+      'кечқурун', 'кечаси'
+    ],
+    u, u
+  ],
+  u,
+  [
+    '00:00', '12:00', ['06:00', '11:00'], ['11:00', '18:00'], ['18:00', '22:00'],
+    ['22:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/uz-Latn.ts b/packages/common/locales/extra/uz-Latn.ts
new file mode 100644
index 000000000000..2582f0332565
--- /dev/null
+++ b/packages/common/locales/extra/uz-Latn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['yarim tun', 'tush payti', 'ertalab', 'kunduzi', 'kechqurun', 'kechasi'], u, u], u,
+  [
+    '00:00', '12:00', ['06:00', '11:00'], ['11:00', '18:00'], ['18:00', '22:00'],
+    ['22:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/uz.ts b/packages/common/locales/extra/uz.ts
new file mode 100644
index 000000000000..2582f0332565
--- /dev/null
+++ b/packages/common/locales/extra/uz.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['yarim tun', 'tush payti', 'ertalab', 'kunduzi', 'kechqurun', 'kechasi'], u, u], u,
+  [
+    '00:00', '12:00', ['06:00', '11:00'], ['11:00', '18:00'], ['18:00', '22:00'],
+    ['22:00', '06:00']
+  ]
+];
diff --git a/packages/common/locales/extra/vai-Latn.ts b/packages/common/locales/extra/vai-Latn.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/vai-Latn.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/vai-Vaii.ts b/packages/common/locales/extra/vai-Vaii.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/vai-Vaii.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/vai.ts b/packages/common/locales/extra/vai.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/vai.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/vi.ts b/packages/common/locales/extra/vi.ts
new file mode 100644
index 000000000000..7cbf2d12c56f
--- /dev/null
+++ b/packages/common/locales/extra/vi.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['nửa đêm', 'tr', 'sáng', 'chiều', 'tối', 'đêm'],
+    ['nửa đêm', 'TR', 'sáng', 'chiều', 'tối', 'đêm'], u
+  ],
+  [
+    ['nửa đêm', 'trưa', 'sáng', 'chiều', 'tối', 'đêm'],
+    ['nửa đêm', 'TR', 'sáng', 'chiều', 'tối', 'đêm'],
+    ['nửa đêm', 'trưa', 'sáng', 'chiều', 'tối', 'đêm']
+  ],
+  [
+    '00:00', '12:00', ['04:00', '12:00'], ['12:00', '18:00'], ['18:00', '21:00'],
+    ['21:00', '04:00']
+  ]
+];
diff --git a/packages/common/locales/extra/vo.ts b/packages/common/locales/extra/vo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/vo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/vun.ts b/packages/common/locales/extra/vun.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/vun.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/wae.ts b/packages/common/locales/extra/wae.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/wae.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/wo.ts b/packages/common/locales/extra/wo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/wo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/xog.ts b/packages/common/locales/extra/xog.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/xog.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/yav.ts b/packages/common/locales/extra/yav.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/yav.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/yi.ts b/packages/common/locales/extra/yi.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/yi.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/yo-BJ.ts b/packages/common/locales/extra/yo-BJ.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/yo-BJ.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/yo.ts b/packages/common/locales/extra/yo.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/yo.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/yue-Hans.ts b/packages/common/locales/extra/yue-Hans.ts
new file mode 100644
index 000000000000..40d9cc0a831c
--- /dev/null
+++ b/packages/common/locales/extra/yue-Hans.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['午夜', '清晨', '朝早', '中午', '下昼', '夜晚', '凌晨'], u, u], u,
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/yue-Hant.ts b/packages/common/locales/extra/yue-Hant.ts
new file mode 100644
index 000000000000..bb8bb21e406f
--- /dev/null
+++ b/packages/common/locales/extra/yue-Hant.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['午夜', '清晨', '朝早', '中午', '下晝', '夜晚', '凌晨'], u, u], u,
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/yue.ts b/packages/common/locales/extra/yue.ts
new file mode 100644
index 000000000000..bb8bb21e406f
--- /dev/null
+++ b/packages/common/locales/extra/yue.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['午夜', '清晨', '朝早', '中午', '下晝', '夜晚', '凌晨'], u, u], u,
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/zgh.ts b/packages/common/locales/extra/zgh.ts
new file mode 100644
index 000000000000..ec21da0ec755
--- /dev/null
+++ b/packages/common/locales/extra/zgh.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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [];
diff --git a/packages/common/locales/extra/zh-Hans-HK.ts b/packages/common/locales/extra/zh-Hans-HK.ts
new file mode 100644
index 000000000000..f91f7fdfd05c
--- /dev/null
+++ b/packages/common/locales/extra/zh-Hans-HK.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u,
+    ['午夜', '清晨', '上午', '中午', '下午', '晚上', '凌晨']
+  ],
+  [['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u, u],
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/zh-Hans-MO.ts b/packages/common/locales/extra/zh-Hans-MO.ts
new file mode 100644
index 000000000000..f91f7fdfd05c
--- /dev/null
+++ b/packages/common/locales/extra/zh-Hans-MO.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u,
+    ['午夜', '清晨', '上午', '中午', '下午', '晚上', '凌晨']
+  ],
+  [['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u, u],
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/zh-Hans-SG.ts b/packages/common/locales/extra/zh-Hans-SG.ts
new file mode 100644
index 000000000000..f91f7fdfd05c
--- /dev/null
+++ b/packages/common/locales/extra/zh-Hans-SG.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u,
+    ['午夜', '清晨', '上午', '中午', '下午', '晚上', '凌晨']
+  ],
+  [['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u, u],
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/zh-Hans.ts b/packages/common/locales/extra/zh-Hans.ts
new file mode 100644
index 000000000000..f91f7fdfd05c
--- /dev/null
+++ b/packages/common/locales/extra/zh-Hans.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u,
+    ['午夜', '清晨', '上午', '中午', '下午', '晚上', '凌晨']
+  ],
+  [['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u, u],
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/zh-Hant-HK.ts b/packages/common/locales/extra/zh-Hant-HK.ts
new file mode 100644
index 000000000000..0bc3e3a5f10a
--- /dev/null
+++ b/packages/common/locales/extra/zh-Hant-HK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u, u], u,
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/zh-Hant-MO.ts b/packages/common/locales/extra/zh-Hant-MO.ts
new file mode 100644
index 000000000000..0bc3e3a5f10a
--- /dev/null
+++ b/packages/common/locales/extra/zh-Hant-MO.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u, u], u,
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/zh-Hant.ts b/packages/common/locales/extra/zh-Hant.ts
new file mode 100644
index 000000000000..f2de99d1e529
--- /dev/null
+++ b/packages/common/locales/extra/zh-Hant.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['午夜', '清晨', '上午', '中午', '下午', '晚上', '凌晨'], u, u], u,
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/zh.ts b/packages/common/locales/extra/zh.ts
new file mode 100644
index 000000000000..f91f7fdfd05c
--- /dev/null
+++ b/packages/common/locales/extra/zh.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [
+    ['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u,
+    ['午夜', '清晨', '上午', '中午', '下午', '晚上', '凌晨']
+  ],
+  [['午夜', '早上', '上午', '中午', '下午', '晚上', '凌晨'], u, u],
+  [
+    '00:00', ['05:00', '08:00'], ['08:00', '12:00'], ['12:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00'], ['00:00', '05:00']
+  ]
+];
diff --git a/packages/common/locales/extra/zu.ts b/packages/common/locales/extra/zu.ts
new file mode 100644
index 000000000000..137f5920736d
--- /dev/null
+++ b/packages/common/locales/extra/zu.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+export default [
+  [['entathakusa', 'ekuseni', 'emini', 'ntambama', 'ebusuku'], u, u], u,
+  [
+    ['00:00', '06:00'], ['06:00', '10:00'], ['10:00', '13:00'], ['13:00', '19:00'],
+    ['19:00', '24:00']
+  ]
+];
diff --git a/packages/common/locales/fa-AF.ts b/packages/common/locales/fa-AF.ts
new file mode 100644
index 000000000000..8164a208da87
--- /dev/null
+++ b/packages/common/locales/fa-AF.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fa-AF', [['ق', 'ب'], ['ق.ظ.', 'ب.ظ.'], ['قبل\u200cازظهر', 'بعدازظهر']],
+  [['ق.ظ.', 'ب.ظ.'], u, ['قبل\u200cازظهر', 'بعدازظهر']],
+  [
+    ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'],
+    [
+      'یکشنبه', 'دوشنبه', 'سه\u200cشنبه', 'چهارشنبه', 'پنجشنبه',
+      'جمعه', 'شنبه'
+    ],
+    u, ['۱ش', '۲ش', '۳ش', '۴ش', '۵ش', 'ج', 'ش']
+  ],
+  u,
+  [
+    ['ج', 'ف', 'م', 'ا', 'م', 'ج', 'ج', 'ا', 'س', 'ا', 'ن', 'د'],
+    [
+      'جنو', 'فبروری', 'مارچ', 'اپریل', 'می', 'جون', 'جول', 'اگست',
+      'سپتمبر', 'اکتوبر', 'نومبر', 'دسم'
+    ],
+    [
+      'جنوری', 'فبروری', 'مارچ', 'اپریل', 'می', 'جون', 'جولای',
+      'اگست', 'سپتمبر', 'اکتوبر', 'نومبر', 'دسمبر'
+    ]
+  ],
+  [
+    ['ج', 'ف', 'م', 'ا', 'م', 'ج', 'ج', 'ا', 'س', 'ا', 'ن', 'د'],
+    [
+      'جنوری', 'فبروری', 'مارچ', 'اپریل', 'می', 'جون', 'جولای',
+      'اگست', 'سپتمبر', 'اکتوبر', 'نومبر', 'دسمبر'
+    ],
+    u
+  ],
+  [['ق', 'م'], ['ق.م.', 'م.'], ['قبل از میلاد', 'میلادی']], 6, [4, 5],
+  ['y/M/d', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss (z)', 'H:mm:ss (zzzz)'],
+  ['{1}،\u200f {0}', u, '{1}، ساعت {0}', u],
+  ['.', ',', ';', '%', '\u200e+', '\u200e−', 'E', '×', '‰', '∞', 'ناعدد', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '؋', 'افغانی افغانستان', {
+    'AFN': ['؋'],
+    'CAD': ['$CA', '$'],
+    'CNY': ['¥CN', '¥'],
+    'HKD': ['$HK', '$'],
+    'IRR': ['ریال'],
+    'MXN': ['$MX', '$'],
+    'NZD': ['$NZ', '$'],
+    'THB': ['฿'],
+    'XCD': ['$EC', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/fa.ts b/packages/common/locales/fa.ts
new file mode 100644
index 000000000000..cf0193563ba3
--- /dev/null
+++ b/packages/common/locales/fa.ts
@@ -0,0 +1,65 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fa', [['ق', 'ب'], ['ق.ظ.', 'ب.ظ.'], ['قبل\u200cازظهر', 'بعدازظهر']],
+  [['ق.ظ.', 'ب.ظ.'], u, ['قبل\u200cازظهر', 'بعدازظهر']],
+  [
+    ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'],
+    [
+      'یکشنبه', 'دوشنبه', 'سه\u200cشنبه', 'چهارشنبه', 'پنجشنبه',
+      'جمعه', 'شنبه'
+    ],
+    u, ['۱ش', '۲ش', '۳ش', '۴ش', '۵ش', 'ج', 'ش']
+  ],
+  u,
+  [
+    ['ژ', 'ف', 'م', 'آ', 'م', 'ژ', 'ژ', 'ا', 'س', 'ا', 'ن', 'د'],
+    [
+      'ژانویهٔ', 'فوریهٔ', 'مارس', 'آوریل', 'مهٔ', 'ژوئن',
+      'ژوئیهٔ', 'اوت', 'سپتامبر', 'اکتبر', 'نوامبر', 'دسامبر'
+    ],
+    u
+  ],
+  [
+    ['ژ', 'ف', 'م', 'آ', 'م', 'ژ', 'ژ', 'ا', 'س', 'ا', 'ن', 'د'],
+    [
+      'ژانویه', 'فوریه', 'مارس', 'آوریل', 'مه', 'ژوئن', 'ژوئیه',
+      'اوت', 'سپتامبر', 'اکتبر', 'نوامبر', 'دسامبر'
+    ],
+    u
+  ],
+  [['ق', 'م'], ['ق.م.', 'م.'], ['قبل از میلاد', 'میلادی']], 6, [5, 5],
+  ['y/M/d', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss (z)', 'H:mm:ss (zzzz)'],
+  ['{1}،\u200f {0}', u, '{1}، ساعت {0}', u],
+  ['.', ',', ';', '%', '\u200e+', '\u200e−', 'E', '×', '‰', '∞', 'ناعدد', ':'],
+  ['#,##0.###', '#,##0%', '\u200e¤ #,##0.00', '#E0'], 'ریال', 'ریال ایران', {
+    'AFN': ['؋'],
+    'CAD': ['$CA', '$'],
+    'CNY': ['¥CN', '¥'],
+    'HKD': ['$HK', '$'],
+    'IRR': ['ریال'],
+    'MXN': ['$MX', '$'],
+    'NZD': ['$NZ', '$'],
+    'THB': ['฿'],
+    'XCD': ['$EC', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ff-CM.ts b/packages/common/locales/ff-CM.ts
new file mode 100644
index 000000000000..501624e316b4
--- /dev/null
+++ b/packages/common/locales/ff-CM.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ff-CM', [['subaka', 'kikiiɗe'], u, u], u,
+  [
+    ['d', 'a', 'm', 'n', 'n', 'm', 'h'], ['dew', 'aaɓ', 'maw', 'nje', 'naa', 'mwd', 'hbi'],
+    ['dewo', 'aaɓnde', 'mawbaare', 'njeslaare', 'naasaande', 'mawnde', 'hoore-biir'],
+    ['dew', 'aaɓ', 'maw', 'nje', 'naa', 'mwd', 'hbi']
+  ],
+  u,
+  [
+    ['s', 'c', 'm', 's', 'd', 'k', 'm', 'j', 's', 'y', 'j', 'b'],
+    ['sii', 'col', 'mbo', 'see', 'duu', 'kor', 'mor', 'juk', 'slt', 'yar', 'jol', 'bow'],
+    [
+      'siilo', 'colte', 'mbooy', 'seeɗto', 'duujal', 'korse', 'morso', 'juko', 'siilto',
+      'yarkomaa', 'jolal', 'bowte'
+    ]
+  ],
+  u, [['H-I', 'C-I'], u, ['Hade Iisa', 'Caggal Iisa']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FCFA', 'Mbuuɗi Seefaa BEAC',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ff-GN.ts b/packages/common/locales/ff-GN.ts
new file mode 100644
index 000000000000..0e8ced665375
--- /dev/null
+++ b/packages/common/locales/ff-GN.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ff-GN', [['subaka', 'kikiiɗe'], u, u], u,
+  [
+    ['d', 'a', 'm', 'n', 'n', 'm', 'h'], ['dew', 'aaɓ', 'maw', 'nje', 'naa', 'mwd', 'hbi'],
+    ['dewo', 'aaɓnde', 'mawbaare', 'njeslaare', 'naasaande', 'mawnde', 'hoore-biir'],
+    ['dew', 'aaɓ', 'maw', 'nje', 'naa', 'mwd', 'hbi']
+  ],
+  u,
+  [
+    ['s', 'c', 'm', 's', 'd', 'k', 'm', 'j', 's', 'y', 'j', 'b'],
+    ['sii', 'col', 'mbo', 'see', 'duu', 'kor', 'mor', 'juk', 'slt', 'yar', 'jol', 'bow'],
+    [
+      'siilo', 'colte', 'mbooy', 'seeɗto', 'duujal', 'korse', 'morso', 'juko', 'siilto',
+      'yarkomaa', 'jolal', 'bowte'
+    ]
+  ],
+  u, [['H-I', 'C-I'], u, ['Hade Iisa', 'Caggal Iisa']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FG', 'GNF',
+  {'GNF': ['FG'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ff-MR.ts b/packages/common/locales/ff-MR.ts
new file mode 100644
index 000000000000..9149e74379fd
--- /dev/null
+++ b/packages/common/locales/ff-MR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ff-MR', [['subaka', 'kikiiɗe'], u, u], u,
+  [
+    ['d', 'a', 'm', 'n', 'n', 'm', 'h'], ['dew', 'aaɓ', 'maw', 'nje', 'naa', 'mwd', 'hbi'],
+    ['dewo', 'aaɓnde', 'mawbaare', 'njeslaare', 'naasaande', 'mawnde', 'hoore-biir'],
+    ['dew', 'aaɓ', 'maw', 'nje', 'naa', 'mwd', 'hbi']
+  ],
+  u,
+  [
+    ['s', 'c', 'm', 's', 'd', 'k', 'm', 'j', 's', 'y', 'j', 'b'],
+    ['sii', 'col', 'mbo', 'see', 'duu', 'kor', 'mor', 'juk', 'slt', 'yar', 'jol', 'bow'],
+    [
+      'siilo', 'colte', 'mbooy', 'seeɗto', 'duujal', 'korse', 'morso', 'juko', 'siilto',
+      'yarkomaa', 'jolal', 'bowte'
+    ]
+  ],
+  u, [['H-I', 'C-I'], u, ['Hade Iisa', 'Caggal Iisa']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'UM', 'Ugiyya Muritani',
+  {'JPY': ['JP¥', '¥'], 'MRU': ['UM'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ff.ts b/packages/common/locales/ff.ts
new file mode 100644
index 000000000000..8f56b37d1242
--- /dev/null
+++ b/packages/common/locales/ff.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ff', [['subaka', 'kikiiɗe'], u, u], u,
+  [
+    ['d', 'a', 'm', 'n', 'n', 'm', 'h'], ['dew', 'aaɓ', 'maw', 'nje', 'naa', 'mwd', 'hbi'],
+    ['dewo', 'aaɓnde', 'mawbaare', 'njeslaare', 'naasaande', 'mawnde', 'hoore-biir'],
+    ['dew', 'aaɓ', 'maw', 'nje', 'naa', 'mwd', 'hbi']
+  ],
+  u,
+  [
+    ['s', 'c', 'm', 's', 'd', 'k', 'm', 'j', 's', 'y', 'j', 'b'],
+    ['sii', 'col', 'mbo', 'see', 'duu', 'kor', 'mor', 'juk', 'slt', 'yar', 'jol', 'bow'],
+    [
+      'siilo', 'colte', 'mbooy', 'seeɗto', 'duujal', 'korse', 'morso', 'juko', 'siilto',
+      'yarkomaa', 'jolal', 'bowte'
+    ]
+  ],
+  u, [['H-I', 'C-I'], u, ['Hade Iisa', 'Caggal Iisa']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'CFA', 'Mbuuɗu Seefaa BCEAO',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/fi.ts b/packages/common/locales/fi.ts
new file mode 100644
index 000000000000..ea9e8fef47fa
--- /dev/null
+++ b/packages/common/locales/fi.ts
@@ -0,0 +1,162 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'fi', [['ap.', 'ip.'], u, u], u,
+  [
+    ['S', 'M', 'T', 'K', 'T', 'P', 'L'], ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la'],
+    [
+      'sunnuntaina', 'maanantaina', 'tiistaina', 'keskiviikkona', 'torstaina', 'perjantaina',
+      'lauantaina'
+    ],
+    ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la']
+  ],
+  [
+    ['S', 'M', 'T', 'K', 'T', 'P', 'L'], ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la'],
+    ['sunnuntai', 'maanantai', 'tiistai', 'keskiviikko', 'torstai', 'perjantai', 'lauantai'],
+    ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la']
+  ],
+  [
+    ['T', 'H', 'M', 'H', 'T', 'K', 'H', 'E', 'S', 'L', 'M', 'J'],
+    [
+      'tammik.', 'helmik.', 'maalisk.', 'huhtik.', 'toukok.', 'kesäk.', 'heinäk.', 'elok.',
+      'syysk.', 'lokak.', 'marrask.', 'jouluk.'
+    ],
+    [
+      'tammikuuta', 'helmikuuta', 'maaliskuuta', 'huhtikuuta', 'toukokuuta', 'kesäkuuta',
+      'heinäkuuta', 'elokuuta', 'syyskuuta', 'lokakuuta', 'marraskuuta', 'joulukuuta'
+    ]
+  ],
+  [
+    ['T', 'H', 'M', 'H', 'T', 'K', 'H', 'E', 'S', 'L', 'M', 'J'],
+    [
+      'tammi', 'helmi', 'maalis', 'huhti', 'touko', 'kesä', 'heinä', 'elo', 'syys', 'loka',
+      'marras', 'joulu'
+    ],
+    [
+      'tammikuu', 'helmikuu', 'maaliskuu', 'huhtikuu', 'toukokuu', 'kesäkuu', 'heinäkuu',
+      'elokuu', 'syyskuu', 'lokakuu', 'marraskuu', 'joulukuu'
+    ]
+  ],
+  [
+    ['eKr', 'jKr'], ['eKr.', 'jKr.'],
+    ['ennen Kristuksen syntymää', 'jälkeen Kristuksen syntymän']
+  ],
+  1, [6, 0], ['d.M.y', u, 'd. MMMM y', 'cccc d. MMMM y'],
+  ['H.mm', 'H.mm.ss', 'H.mm.ss z', 'H.mm.ss zzzz'], ['{1} {0}', '{1} \'klo\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'epäluku', '.'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AOA': [],
+    'ARS': [],
+    'AUD': [],
+    'BAM': [],
+    'BBD': [],
+    'BDT': [],
+    'BMD': [],
+    'BND': [],
+    'BOB': [],
+    'BRL': [],
+    'BSD': [],
+    'BWP': [],
+    'BYN': [],
+    'BZD': [],
+    'CAD': [],
+    'CLP': [],
+    'CNY': [],
+    'COP': [],
+    'CRC': [],
+    'CUC': [],
+    'CUP': [],
+    'CZK': [],
+    'DKK': [],
+    'DOP': [],
+    'EGP': [],
+    'ESP': [],
+    'FIM': ['mk'],
+    'FJD': [],
+    'FKP': [],
+    'GEL': [],
+    'GIP': [],
+    'GNF': [],
+    'GTQ': [],
+    'GYD': [],
+    'HKD': [],
+    'HNL': [],
+    'HRK': [],
+    'HUF': [],
+    'IDR': [],
+    'ILS': [],
+    'INR': [],
+    'ISK': [],
+    'JMD': [],
+    'KHR': [],
+    'KMF': [],
+    'KPW': [],
+    'KRW': [],
+    'KYD': [],
+    'KZT': [],
+    'LAK': [],
+    'LBP': [],
+    'LKR': [],
+    'LRD': [],
+    'LTL': [],
+    'LVL': [],
+    'MGA': [],
+    'MMK': [],
+    'MNT': [],
+    'MUR': [],
+    'MXN': [],
+    'MYR': [],
+    'NAD': [],
+    'NGN': [],
+    'NIO': [],
+    'NOK': [],
+    'NPR': [],
+    'NZD': [],
+    'PHP': [],
+    'PKR': [],
+    'PLN': [],
+    'PYG': [],
+    'RON': [],
+    'RUR': [],
+    'RWF': [],
+    'SBD': [],
+    'SEK': [],
+    'SGD': [],
+    'SHP': [],
+    'SRD': [],
+    'SSP': [],
+    'STN': [u, 'STD'],
+    'SYP': [],
+    'THB': [],
+    'TOP': [],
+    'TRY': [],
+    'TTD': [],
+    'TWD': [],
+    'UAH': [],
+    'UYU': [],
+    'VEF': [],
+    'VND': [],
+    'XCD': [],
+    'XPF': [],
+    'ZAR': [],
+    'ZMW': []
+  },
+  plural
+];
diff --git a/packages/common/locales/fil.ts b/packages/common/locales/fil.ts
new file mode 100644
index 000000000000..88d35a58c006
--- /dev/null
+++ b/packages/common/locales/fil.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && (i === 1 || i === 2 || i === 3) ||
+      v === 0 && !(i % 10 === 4 || i % 10 === 6 || i % 10 === 9) ||
+      !(v === 0) && !(f % 10 === 4 || f % 10 === 6 || f % 10 === 9))
+    return 1;
+  return 5;
+}
+
+export default [
+  'fil', [['am', 'pm'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['Lin', 'Lun', 'Mar', 'Miy', 'Huw', 'Biy', 'Sab'], u,
+    ['Linggo', 'Lunes', 'Martes', 'Miyerkules', 'Huwebes', 'Biyernes', 'Sabado'],
+    ['Li', 'Lu', 'Ma', 'Mi', 'Hu', 'Bi', 'Sa']
+  ],
+  u,
+  [
+    ['Ene', 'Peb', 'Mar', 'Abr', 'May', 'Hun', 'Hul', 'Ago', 'Set', 'Okt', 'Nob', 'Dis'], u,
+    [
+      'Enero', 'Pebrero', 'Marso', 'Abril', 'Mayo', 'Hunyo', 'Hulyo', 'Agosto', 'Setyembre',
+      'Oktubre', 'Nobyembre', 'Disyembre'
+    ]
+  ],
+  [
+    ['E', 'P', 'M', 'A', 'M', 'Hun', 'Hul', 'Ago', 'Set', 'Okt', 'Nob', 'Dis'],
+    ['Ene', 'Peb', 'Mar', 'Abr', 'May', 'Hun', 'Hul', 'Ago', 'Set', 'Okt', 'Nob', 'Dis'],
+    [
+      'Enero', 'Pebrero', 'Marso', 'Abril', 'Mayo', 'Hunyo', 'Hulyo', 'Agosto', 'Setyembre',
+      'Oktubre', 'Nobyembre', 'Disyembre'
+    ]
+  ],
+  [['BC', 'AD'], u, ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'nang\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₱', 'Piso ng Pilipinas',
+  {'PHP': ['₱'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/fo-DK.ts b/packages/common/locales/fo-DK.ts
new file mode 100644
index 000000000000..f29696f9241f
--- /dev/null
+++ b/packages/common/locales/fo-DK.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fo-DK', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'M', 'H', 'F', 'L'],
+    ['sun.', 'mán.', 'týs.', 'mik.', 'hós.', 'frí.', 'ley.'],
+    [
+      'sunnudagur', 'mánadagur', 'týsdagur', 'mikudagur', 'hósdagur', 'fríggjadagur',
+      'leygardagur'
+    ],
+    ['su.', 'má.', 'tý.', 'mi.', 'hó.', 'fr.', 'le.']
+  ],
+  [
+    ['S', 'M', 'T', 'M', 'H', 'F', 'L'], ['sun', 'mán', 'týs', 'mik', 'hós', 'frí', 'ley'],
+    [
+      'sunnudagur', 'mánadagur', 'týsdagur', 'mikudagur', 'hósdagur', 'fríggjadagur',
+      'leygardagur'
+    ],
+    ['su', 'má', 'tý', 'mi', 'hó', 'fr', 'le']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'mai', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'des.'],
+    [
+      'januar', 'februar', 'mars', 'apríl', 'mai', 'juni', 'juli', 'august', 'september',
+      'oktober', 'november', 'desember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'des'],
+    [
+      'januar', 'februar', 'mars', 'apríl', 'mai', 'juni', 'juli', 'august', 'september',
+      'oktober', 'november', 'desember'
+    ]
+  ],
+  [['fKr', 'eKr'], ['f.Kr.', 'e.Kr.'], ['fyri Krist', 'eftir Krist']], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'kl\'. {0}', u],
+  [',', '.', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr.', 'donsk króna',
+  {'DKK': ['kr.', 'kr'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/fo.ts b/packages/common/locales/fo.ts
new file mode 100644
index 000000000000..241bd5976ea7
--- /dev/null
+++ b/packages/common/locales/fo.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fo', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'M', 'H', 'F', 'L'],
+    ['sun.', 'mán.', 'týs.', 'mik.', 'hós.', 'frí.', 'ley.'],
+    [
+      'sunnudagur', 'mánadagur', 'týsdagur', 'mikudagur', 'hósdagur', 'fríggjadagur',
+      'leygardagur'
+    ],
+    ['su.', 'má.', 'tý.', 'mi.', 'hó.', 'fr.', 'le.']
+  ],
+  [
+    ['S', 'M', 'T', 'M', 'H', 'F', 'L'], ['sun', 'mán', 'týs', 'mik', 'hós', 'frí', 'ley'],
+    [
+      'sunnudagur', 'mánadagur', 'týsdagur', 'mikudagur', 'hósdagur', 'fríggjadagur',
+      'leygardagur'
+    ],
+    ['su', 'má', 'tý', 'mi', 'hó', 'fr', 'le']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'mai', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'des.'],
+    [
+      'januar', 'februar', 'mars', 'apríl', 'mai', 'juni', 'juli', 'august', 'september',
+      'oktober', 'november', 'desember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'des'],
+    [
+      'januar', 'februar', 'mars', 'apríl', 'mai', 'juni', 'juli', 'august', 'september',
+      'oktober', 'november', 'desember'
+    ]
+  ],
+  [['fKr', 'eKr'], ['f.Kr.', 'e.Kr.'], ['fyri Krist', 'eftir Krist']], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'kl\'. {0}', u],
+  [',', '.', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr', 'donsk króna',
+  {'DKK': ['kr'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/fr-BE.ts b/packages/common/locales/fr-BE.ts
new file mode 100644
index 000000000000..8ca035ee270d
--- /dev/null
+++ b/packages/common/locales/fr-BE.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-BE', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['d/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'H \'h\' mm \'min\' ss \'s\' zzzz'],
+  ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-BF.ts b/packages/common/locales/fr-BF.ts
new file mode 100644
index 000000000000..32438da2062a
--- /dev/null
+++ b/packages/common/locales/fr-BF.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-BF', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CFA', 'franc CFA (BCEAO)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-BI.ts b/packages/common/locales/fr-BI.ts
new file mode 100644
index 000000000000..43f88b7738af
--- /dev/null
+++ b/packages/common/locales/fr-BI.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-BI', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FBu', 'franc burundais', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BIF': ['FBu'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-BJ.ts b/packages/common/locales/fr-BJ.ts
new file mode 100644
index 000000000000..57dbff31f6fb
--- /dev/null
+++ b/packages/common/locales/fr-BJ.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-BJ', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CFA', 'franc CFA (BCEAO)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-BL.ts b/packages/common/locales/fr-BL.ts
new file mode 100644
index 000000000000..8310bf5b0984
--- /dev/null
+++ b/packages/common/locales/fr-BL.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-BL', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-CA.ts b/packages/common/locales/fr-CA.ts
new file mode 100644
index 000000000000..01e007603db3
--- /dev/null
+++ b/packages/common/locales/fr-CA.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-CA', [['a', 'p'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juill.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 0, [6, 0],
+  ['yy-MM-dd', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  [
+    'HH \'h\' mm', 'HH \'h\' mm \'min\' ss \'s\'', 'HH \'h\' mm \'min\' ss \'s\' z',
+    'HH \'h\' mm \'min\' ss \'s\' zzzz'
+  ],
+  ['{1} {0}', u, '{1} \'à\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '$', 'dollar canadien', {
+    'AUD': ['$ AU', '$'],
+    'BEF': ['FB'],
+    'BYN': [u, 'Br'],
+    'CAD': ['$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FRF': ['F'],
+    'GEL': [],
+    'HKD': ['$ HK', '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'ITL': ['₤IT'],
+    'KRW': [u, '₩'],
+    'LBP': [u, '£L'],
+    'MTP': ['£MT'],
+    'MXN': [u, '$'],
+    'NZD': ['$ NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SGD': ['$ SG', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$ US', '$'],
+    'VND': [u, '₫'],
+    'WST': ['WS$'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': [],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-CD.ts b/packages/common/locales/fr-CD.ts
new file mode 100644
index 000000000000..32d0025f6521
--- /dev/null
+++ b/packages/common/locales/fr-CD.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-CD', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FC', 'franc congolais', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CDF': ['FC'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-CF.ts b/packages/common/locales/fr-CF.ts
new file mode 100644
index 000000000000..ae9572424ab7
--- /dev/null
+++ b/packages/common/locales/fr-CF.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-CF', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFA', 'franc CFA (BEAC)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-CG.ts b/packages/common/locales/fr-CG.ts
new file mode 100644
index 000000000000..56b3de2d5746
--- /dev/null
+++ b/packages/common/locales/fr-CG.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-CG', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFA', 'franc CFA (BEAC)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-CH.ts b/packages/common/locales/fr-CH.ts
new file mode 100644
index 000000000000..453b53b943af
--- /dev/null
+++ b/packages/common/locales/fr-CH.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-CH', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd.MM.yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH.mm:ss \'h\' zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':', '.'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤;-#,##0.00 ¤', '#E0'], 'CHF', 'franc suisse', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-CI.ts b/packages/common/locales/fr-CI.ts
new file mode 100644
index 000000000000..59901efe67bf
--- /dev/null
+++ b/packages/common/locales/fr-CI.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-CI', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CFA', 'franc CFA (BCEAO)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-CM.ts b/packages/common/locales/fr-CM.ts
new file mode 100644
index 000000000000..956d8887b826
--- /dev/null
+++ b/packages/common/locales/fr-CM.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-CM', [['mat.', 'soir'], u, ['matin', 'soir']], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFA', 'franc CFA (BEAC)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-DJ.ts b/packages/common/locales/fr-DJ.ts
new file mode 100644
index 000000000000..fd6455b5b198
--- /dev/null
+++ b/packages/common/locales/fr-DJ.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-DJ', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 6, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'Fdj', 'franc djiboutien', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'DJF': ['Fdj'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-DZ.ts b/packages/common/locales/fr-DZ.ts
new file mode 100644
index 000000000000..bbb59c5d813e
--- /dev/null
+++ b/packages/common/locales/fr-DZ.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-DZ', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 6, [5, 6],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'DA', 'dinar algérien', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'DZD': ['DA'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-GA.ts b/packages/common/locales/fr-GA.ts
new file mode 100644
index 000000000000..6403dc62636a
--- /dev/null
+++ b/packages/common/locales/fr-GA.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-GA', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFA', 'franc CFA (BEAC)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-GF.ts b/packages/common/locales/fr-GF.ts
new file mode 100644
index 000000000000..930d39c54b07
--- /dev/null
+++ b/packages/common/locales/fr-GF.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-GF', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-GN.ts b/packages/common/locales/fr-GN.ts
new file mode 100644
index 000000000000..ae82844e44d6
--- /dev/null
+++ b/packages/common/locales/fr-GN.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-GN', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FG', 'franc guinéen', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'GNF': ['FG'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-GP.ts b/packages/common/locales/fr-GP.ts
new file mode 100644
index 000000000000..87223fdcff60
--- /dev/null
+++ b/packages/common/locales/fr-GP.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-GP', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-GQ.ts b/packages/common/locales/fr-GQ.ts
new file mode 100644
index 000000000000..cf190089b839
--- /dev/null
+++ b/packages/common/locales/fr-GQ.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-GQ', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFA', 'franc CFA (BEAC)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-HT.ts b/packages/common/locales/fr-HT.ts
new file mode 100644
index 000000000000..5ad9d559527a
--- /dev/null
+++ b/packages/common/locales/fr-HT.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-HT', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'G', 'gourde haïtienne', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'HTG': ['G'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-KM.ts b/packages/common/locales/fr-KM.ts
new file mode 100644
index 000000000000..532f5149f277
--- /dev/null
+++ b/packages/common/locales/fr-KM.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-KM', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CF', 'franc comorien', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': ['CF', 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-LU.ts b/packages/common/locales/fr-LU.ts
new file mode 100644
index 000000000000..80f7efb32167
--- /dev/null
+++ b/packages/common/locales/fr-LU.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-LU', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'LUF': ['F'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-MA.ts b/packages/common/locales/fr-MA.ts
new file mode 100644
index 000000000000..59a46c90bb6b
--- /dev/null
+++ b/packages/common/locales/fr-MA.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-MA', [['AM', 'PM'], u, ['a.m.', 'p.m.']], [['AM', 'PM'], u, u],
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'jan.', 'fév.', 'mar.', 'avr.', 'mai', 'jui.', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 6, [5, 6],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'MAD', 'dirham marocain', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-MC.ts b/packages/common/locales/fr-MC.ts
new file mode 100644
index 000000000000..39991af674ca
--- /dev/null
+++ b/packages/common/locales/fr-MC.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-MC', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-MF.ts b/packages/common/locales/fr-MF.ts
new file mode 100644
index 000000000000..1714e1a5302b
--- /dev/null
+++ b/packages/common/locales/fr-MF.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-MF', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-MG.ts b/packages/common/locales/fr-MG.ts
new file mode 100644
index 000000000000..a87d5afc3ded
--- /dev/null
+++ b/packages/common/locales/fr-MG.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-MG', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'Ar', 'ariary malgache', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MGA': ['Ar'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-ML.ts b/packages/common/locales/fr-ML.ts
new file mode 100644
index 000000000000..a3d945314a5e
--- /dev/null
+++ b/packages/common/locales/fr-ML.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-ML', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'à\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CFA', 'franc CFA (BCEAO)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-MQ.ts b/packages/common/locales/fr-MQ.ts
new file mode 100644
index 000000000000..3a2f824b58bb
--- /dev/null
+++ b/packages/common/locales/fr-MQ.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-MQ', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-MR.ts b/packages/common/locales/fr-MR.ts
new file mode 100644
index 000000000000..45e8b54c745d
--- /dev/null
+++ b/packages/common/locales/fr-MR.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-MR', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'UM', 'ouguiya mauritanien', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MRU': ['UM'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-MU.ts b/packages/common/locales/fr-MU.ts
new file mode 100644
index 000000000000..880c9fd500f1
--- /dev/null
+++ b/packages/common/locales/fr-MU.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-MU', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'Rs', 'roupie mauricienne', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MUR': ['Rs'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-NC.ts b/packages/common/locales/fr-NC.ts
new file mode 100644
index 000000000000..636de747e1fb
--- /dev/null
+++ b/packages/common/locales/fr-NC.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-NC', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFP', 'franc CFP', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-NE.ts b/packages/common/locales/fr-NE.ts
new file mode 100644
index 000000000000..43393dc64c2d
--- /dev/null
+++ b/packages/common/locales/fr-NE.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-NE', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CFA', 'franc CFA (BCEAO)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-PF.ts b/packages/common/locales/fr-PF.ts
new file mode 100644
index 000000000000..e2387da9e543
--- /dev/null
+++ b/packages/common/locales/fr-PF.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-PF', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFP', 'franc CFP', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-PM.ts b/packages/common/locales/fr-PM.ts
new file mode 100644
index 000000000000..5ea5eef14504
--- /dev/null
+++ b/packages/common/locales/fr-PM.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-PM', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-RE.ts b/packages/common/locales/fr-RE.ts
new file mode 100644
index 000000000000..ac46acb356dd
--- /dev/null
+++ b/packages/common/locales/fr-RE.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-RE', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-RW.ts b/packages/common/locales/fr-RW.ts
new file mode 100644
index 000000000000..0e61442df2b8
--- /dev/null
+++ b/packages/common/locales/fr-RW.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-RW', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'RF', 'franc rwandais', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': ['RF', 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-SC.ts b/packages/common/locales/fr-SC.ts
new file mode 100644
index 000000000000..dd9f2c99d2a6
--- /dev/null
+++ b/packages/common/locales/fr-SC.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-SC', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'SR', 'roupie des Seychelles', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SCR': ['SR'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-SN.ts b/packages/common/locales/fr-SN.ts
new file mode 100644
index 000000000000..1035478a1ca3
--- /dev/null
+++ b/packages/common/locales/fr-SN.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-SN', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CFA', 'franc CFA (BCEAO)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-SY.ts b/packages/common/locales/fr-SY.ts
new file mode 100644
index 000000000000..5ec5722f19df
--- /dev/null
+++ b/packages/common/locales/fr-SY.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-SY', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 6, [5, 6],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'LS', 'livre syrienne', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'SYP': ['LS', '£'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-TD.ts b/packages/common/locales/fr-TD.ts
new file mode 100644
index 000000000000..f46ea94aba44
--- /dev/null
+++ b/packages/common/locales/fr-TD.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-TD', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFA', 'franc CFA (BEAC)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-TG.ts b/packages/common/locales/fr-TG.ts
new file mode 100644
index 000000000000..253f5e549b67
--- /dev/null
+++ b/packages/common/locales/fr-TG.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-TG', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CFA', 'franc CFA (BCEAO)', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-TN.ts b/packages/common/locales/fr-TN.ts
new file mode 100644
index 000000000000..3108b23b3050
--- /dev/null
+++ b/packages/common/locales/fr-TN.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-TN', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 0, [5, 6],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'DT', 'dinar tunisien', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TND': ['DT'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-VU.ts b/packages/common/locales/fr-VU.ts
new file mode 100644
index 000000000000..be6da7fec62d
--- /dev/null
+++ b/packages/common/locales/fr-VU.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-VU', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'VT', 'vatu vanuatuan', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'VUV': ['VT'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-WF.ts b/packages/common/locales/fr-WF.ts
new file mode 100644
index 000000000000..0d181996d7ff
--- /dev/null
+++ b/packages/common/locales/fr-WF.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-WF', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'FCFP', 'franc CFP', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr-YT.ts b/packages/common/locales/fr-YT.ts
new file mode 100644
index 000000000000..9f053f7fadb2
--- /dev/null
+++ b/packages/common/locales/fr-YT.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr-YT', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fr.ts b/packages/common/locales/fr.ts
new file mode 100644
index 000000000000..68d001b8094c
--- /dev/null
+++ b/packages/common/locales/fr.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fr', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  u, [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1} \'à\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'ARS': ['$AR', '$'],
+    'AUD': ['$AU', '$'],
+    'BEF': ['FB'],
+    'BMD': ['$BM', '$'],
+    'BND': ['$BN', '$'],
+    'BSD': ['$BS', '$'],
+    'BZD': ['$BZ', '$'],
+    'CAD': ['$CA', '$'],
+    'CLP': ['$CL', '$'],
+    'CNY': [u, '¥'],
+    'COP': ['$CO', '$'],
+    'CYP': ['£CY'],
+    'EGP': [u, '£E'],
+    'FJD': ['$FJ', '$'],
+    'FKP': ['£FK', '£'],
+    'FRF': ['F'],
+    'GBP': ['£GB', '£'],
+    'GIP': ['£GI', '£'],
+    'HKD': [u, '$'],
+    'IEP': ['£IE'],
+    'ILP': ['£IL'],
+    'ITL': ['₤IT'],
+    'JPY': [u, '¥'],
+    'KMF': [u, 'FC'],
+    'LBP': ['£LB', '£L'],
+    'MTP': ['£MT'],
+    'MXN': ['$MX', '$'],
+    'NAD': ['$NA', '$'],
+    'NIO': [u, '$C'],
+    'NZD': ['$NZ', '$'],
+    'RHD': ['$RH'],
+    'RON': [u, 'L'],
+    'RWF': [u, 'FR'],
+    'SBD': ['$SB', '$'],
+    'SGD': ['$SG', '$'],
+    'SRD': ['$SR', '$'],
+    'TTD': ['$TT', '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['$US', '$'],
+    'UYU': ['$UY', '$'],
+    'WST': ['WS$'],
+    'XCD': [u, '$'],
+    'XPF': ['FCFP'],
+    'ZMW': [u, 'Kw']
+  },
+  plural
+];
diff --git a/packages/common/locales/fur.ts b/packages/common/locales/fur.ts
new file mode 100644
index 000000000000..bbbe57a3e46f
--- /dev/null
+++ b/packages/common/locales/fur.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'fur', [['a.', 'p.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dom', 'lun', 'mar', 'mie', 'joi', 'vin', 'sab'],
+    ['domenie', 'lunis', 'martars', 'miercus', 'joibe', 'vinars', 'sabide'],
+    ['dom', 'lun', 'mar', 'mie', 'joi', 'vin', 'sab']
+  ],
+  u,
+  [
+    ['Z', 'F', 'M', 'A', 'M', 'J', 'L', 'A', 'S', 'O', 'N', 'D'],
+    ['Zen', 'Fev', 'Mar', 'Avr', 'Mai', 'Jug', 'Lui', 'Avo', 'Set', 'Otu', 'Nov', 'Dic'],
+    [
+      'Zenâr', 'Fevrâr', 'Març', 'Avrîl', 'Mai', 'Jugn', 'Lui', 'Avost', 'Setembar', 'Otubar',
+      'Novembar', 'Dicembar'
+    ]
+  ],
+  u, [['pdC', 'ddC'], u, u], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'di\' MMMM \'dal\' y', 'EEEE d \'di\' MMMM \'dal\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '€', 'euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/fy.ts b/packages/common/locales/fy.ts
new file mode 100644
index 000000000000..e35505c3f2f8
--- /dev/null
+++ b/packages/common/locales/fy.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'fy', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['si', 'mo', 'ti', 'wo', 'to', 'fr', 'so'],
+    ['snein', 'moandei', 'tiisdei', 'woansdei', 'tongersdei', 'freed', 'sneon'],
+    ['si', 'mo', 'ti', 'wo', 'to', 'fr', 'so']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mrt', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Jannewaris', 'Febrewaris', 'Maart', 'April', 'Maaie', 'Juny', 'July', 'Augustus',
+      'Septimber', 'Oktober', 'Novimber', 'Desimber'
+    ]
+  ],
+  u, [['f.K.', 'n.K.'], ['f.Kr.', 'n.Kr.'], ['Foar Kristus', 'nei Kristus']], 1, [6, 0],
+  ['dd-MM-yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'om\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤ #,##0.00-', '#E0'], '€', 'Euro', {
+    'AUD': ['AU$', '$'],
+    'CAD': ['C$', '$'],
+    'FJD': ['FJ$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'SBD': ['SI$', '$'],
+    'THB': ['฿'],
+    'USD': ['US$', '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/ga.ts b/packages/common/locales/ga.ts
new file mode 100644
index 000000000000..034e87451b54
--- /dev/null
+++ b/packages/common/locales/ga.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  if (n === Math.floor(n) && n >= 3 && n <= 6) return 3;
+  if (n === Math.floor(n) && n >= 7 && n <= 10) return 4;
+  return 5;
+}
+
+export default [
+  'ga', [['a', 'p'], ['r.n.', 'i.n.'], u], [['a', 'p'], ['a.m.', 'p.m.'], u],
+  [
+    ['D', 'L', 'M', 'C', 'D', 'A', 'S'],
+    ['Domh', 'Luan', 'Máirt', 'Céad', 'Déar', 'Aoine', 'Sath'],
+    [
+      'Dé Domhnaigh', 'Dé Luain', 'Dé Máirt', 'Dé Céadaoin', 'Déardaoin', 'Dé hAoine',
+      'Dé Sathairn'
+    ],
+    ['Do', 'Lu', 'Má', 'Cé', 'Dé', 'Ao', 'Sa']
+  ],
+  u,
+  [
+    ['E', 'F', 'M', 'A', 'B', 'M', 'I', 'L', 'M', 'D', 'S', 'N'],
+    [
+      'Ean', 'Feabh', 'Márta', 'Aib', 'Beal', 'Meith', 'Iúil', 'Lún', 'MFómh', 'DFómh', 'Samh',
+      'Noll'
+    ],
+    [
+      'Eanáir', 'Feabhra', 'Márta', 'Aibreán', 'Bealtaine', 'Meitheamh', 'Iúil', 'Lúnasa',
+      'Meán Fómhair', 'Deireadh Fómhair', 'Samhain', 'Nollaig'
+    ]
+  ],
+  u, [['RC', 'AD'], u, ['Roimh Chríost', 'Anno Domini']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '€', 'Euro', {'THB': ['฿'], 'TWD': ['NT$']},
+  plural
+];
diff --git a/packages/common/locales/gd.ts b/packages/common/locales/gd.ts
new file mode 100644
index 000000000000..cbfd675756c4
--- /dev/null
+++ b/packages/common/locales/gd.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1 || n === 11) return 1;
+  if (n === 2 || n === 12) return 2;
+  if (n === Math.floor(n) && (n >= 3 && n <= 10 || n >= 13 && n <= 19)) return 3;
+  return 5;
+}
+
+export default [
+  'gd', [['m', 'f'], u, u], u,
+  [
+    ['D', 'L', 'M', 'C', 'A', 'H', 'S'], ['DiD', 'DiL', 'DiM', 'DiC', 'Dia', 'Dih', 'DiS'],
+    ['DiDòmhnaich', 'DiLuain', 'DiMàirt', 'DiCiadain', 'DiarDaoin', 'DihAoine', 'DiSathairne'],
+    ['Dò', 'Lu', 'Mà', 'Ci', 'Da', 'hA', 'Sa']
+  ],
+  u,
+  [
+    ['F', 'G', 'M', 'G', 'C', 'Ò', 'I', 'L', 'S', 'D', 'S', 'D'],
+    [
+      'Faoi', 'Gearr', 'Màrt', 'Gibl', 'Cèit', 'Ògmh', 'Iuch', 'Lùna', 'Sult', 'Dàmh', 'Samh',
+      'Dùbh'
+    ],
+    [
+      'dhen Fhaoilleach', 'dhen Ghearran', 'dhen Mhàrt', 'dhen Ghiblean', 'dhen Chèitean',
+      'dhen Ògmhios', 'dhen Iuchar', 'dhen Lùnastal', 'dhen t-Sultain', 'dhen Dàmhair',
+      'dhen t-Samhain', 'dhen Dùbhlachd'
+    ]
+  ],
+  [
+    ['F', 'G', 'M', 'G', 'C', 'Ò', 'I', 'L', 'S', 'D', 'S', 'D'],
+    [
+      'Faoi', 'Gearr', 'Màrt', 'Gibl', 'Cèit', 'Ògmh', 'Iuch', 'Lùna', 'Sult', 'Dàmh', 'Samh',
+      'Dùbh'
+    ],
+    [
+      'Am Faoilleach', 'An Gearran', 'Am Màrt', 'An Giblean', 'An Cèitean', 'An t-Ògmhios',
+      'An t-Iuchar', 'An Lùnastal', 'An t-Sultain', 'An Dàmhair', 'An t-Samhain', 'An Dùbhlachd'
+    ]
+  ],
+  [['R', 'A'], ['RC', 'AD'], ['Ro Chrìosta', 'An dèidh Chrìosta']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd\'mh\' MMMM y', 'EEEE, d\'mh\' MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'Punnd Sasannach',
+  {'JPY': ['JP¥', '¥'], 'RON': [u, 'leu'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/gl.ts b/packages/common/locales/gl.ts
new file mode 100644
index 000000000000..de370bae3c42
--- /dev/null
+++ b/packages/common/locales/gl.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'gl', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['d.', 'l.', 'm.', 'm.', 'x.', 'v.', 's.'],
+    ['dom.', 'luns', 'mar.', 'mér.', 'xov.', 'ven.', 'sáb.'],
+    ['domingo', 'luns', 'martes', 'mércores', 'xoves', 'venres', 'sábado'],
+    ['do.', 'lu.', 'ma.', 'mé.', 'xo.', 've.', 'sá.']
+  ],
+  [
+    ['D', 'L', 'M', 'M', 'X', 'V', 'S'], ['Dom.', 'Luns', 'Mar.', 'Mér.', 'Xov.', 'Ven.', 'Sáb.'],
+    ['Domingo', 'Luns', 'Martes', 'Mércores', 'Xoves', 'Venres', 'Sábado'],
+    ['Do', 'Lu', 'Ma', 'Mé', 'Xo', 'Ve', 'Sá']
+  ],
+  [
+    ['x.', 'f.', 'm.', 'a.', 'm.', 'x.', 'x.', 'a.', 's.', 'o.', 'n.', 'd.'],
+    [
+      'xan.', 'feb.', 'mar.', 'abr.', 'maio', 'xuño', 'xul.', 'ago.', 'set.', 'out.', 'nov.',
+      'dec.'
+    ],
+    [
+      'xaneiro', 'febreiro', 'marzo', 'abril', 'maio', 'xuño', 'xullo', 'agosto', 'setembro',
+      'outubro', 'novembro', 'decembro'
+    ]
+  ],
+  [
+    ['X', 'F', 'M', 'A', 'M', 'X', 'X', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Xan.', 'Feb.', 'Mar.', 'Abr.', 'Maio', 'Xuño', 'Xul.', 'Ago.', 'Set.', 'Out.', 'Nov.',
+      'Dec.'
+    ],
+    [
+      'Xaneiro', 'Febreiro', 'Marzo', 'Abril', 'Maio', 'Xuño', 'Xullo', 'Agosto', 'Setembro',
+      'Outubro', 'Novembro', 'Decembro'
+    ]
+  ],
+  [['a.C.', 'd.C.'], u, ['antes de Cristo', 'despois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{0}, {1}', u, '{0} \'do\' {1}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro', {
+    'ESP': ['₧'],
+    'JPY': ['JP¥', '¥'],
+    'KMF': [u, 'FC'],
+    'MXN': ['$MX', '$'],
+    'RUB': [u, 'руб'],
+    'THB': ['฿'],
+    'TWD': ['NT$']
+  },
+  plural
+];
diff --git a/packages/common/locales/gsw-FR.ts b/packages/common/locales/gsw-FR.ts
new file mode 100644
index 000000000000..a1f872f62be9
--- /dev/null
+++ b/packages/common/locales/gsw-FR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'gsw-FR', [['vorm.', 'nam.'], u, ['am Vormittag', 'am Namittag']],
+  [['vorm.', 'nam.'], u, ['Vormittag', 'Namittag']],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['Su.', 'Mä.', 'Zi.', 'Mi.', 'Du.', 'Fr.', 'Sa.'],
+    ['Sunntig', 'Määntig', 'Ziischtig', 'Mittwuch', 'Dunschtig', 'Friitig', 'Samschtig'],
+    ['Su.', 'Mä.', 'Zi.', 'Mi.', 'Du.', 'Fr.', 'Sa.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'Auguscht', 'Septämber',
+      'Oktoober', 'Novämber', 'Dezämber'
+    ]
+  ],
+  u, [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', '’', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro', {'ATS': ['öS']}, plural
+];
diff --git a/packages/common/locales/gsw-LI.ts b/packages/common/locales/gsw-LI.ts
new file mode 100644
index 000000000000..c8ee0013116a
--- /dev/null
+++ b/packages/common/locales/gsw-LI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'gsw-LI', [['vorm.', 'nam.'], u, ['am Vormittag', 'am Namittag']],
+  [['vorm.', 'nam.'], u, ['Vormittag', 'Namittag']],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['Su.', 'Mä.', 'Zi.', 'Mi.', 'Du.', 'Fr.', 'Sa.'],
+    ['Sunntig', 'Määntig', 'Ziischtig', 'Mittwuch', 'Dunschtig', 'Friitig', 'Samschtig'],
+    ['Su.', 'Mä.', 'Zi.', 'Mi.', 'Du.', 'Fr.', 'Sa.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'Auguscht', 'Septämber',
+      'Oktoober', 'Novämber', 'Dezämber'
+    ]
+  ],
+  u, [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', '’', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CHF', 'Schwiizer Franke', {'ATS': ['öS']},
+  plural
+];
diff --git a/packages/common/locales/gsw.ts b/packages/common/locales/gsw.ts
new file mode 100644
index 000000000000..682fa013bafd
--- /dev/null
+++ b/packages/common/locales/gsw.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'gsw', [['vorm.', 'nam.'], u, ['am Vormittag', 'am Namittag']],
+  [['vorm.', 'nam.'], u, ['Vormittag', 'Namittag']],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['Su.', 'Mä.', 'Zi.', 'Mi.', 'Du.', 'Fr.', 'Sa.'],
+    ['Sunntig', 'Määntig', 'Ziischtig', 'Mittwuch', 'Dunschtig', 'Friitig', 'Samschtig'],
+    ['Su.', 'Mä.', 'Zi.', 'Mi.', 'Du.', 'Fr.', 'Sa.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'Auguscht', 'Septämber',
+      'Oktoober', 'Novämber', 'Dezämber'
+    ]
+  ],
+  u, [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', '’', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CHF', 'Schwiizer Franke', {'ATS': ['öS']},
+  plural
+];
diff --git a/packages/common/locales/gu.ts b/packages/common/locales/gu.ts
new file mode 100644
index 000000000000..28e1479e25a8
--- /dev/null
+++ b/packages/common/locales/gu.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'gu', [['AM', 'PM'], u, u], u,
+  [
+    ['ર', 'સો', 'મં', 'બુ', 'ગુ', 'શુ', 'શ'],
+    [
+      'રવિ', 'સોમ', 'મંગળ', 'બુધ', 'ગુરુ', 'શુક્ર',
+      'શનિ'
+    ],
+    [
+      'રવિવાર', 'સોમવાર', 'મંગળવાર', 'બુધવાર',
+      'ગુરુવાર', 'શુક્રવાર', 'શનિવાર'
+    ],
+    ['ર', 'સો', 'મં', 'બુ', 'ગુ', 'શુ', 'શ']
+  ],
+  u,
+  [
+    [
+      'જા', 'ફે', 'મા', 'એ', 'મે', 'જૂ', 'જુ', 'ઑ', 'સ', 'ઑ', 'ન',
+      'ડિ'
+    ],
+    [
+      'જાન્યુ', 'ફેબ્રુ', 'માર્ચ', 'એપ્રિલ', 'મે',
+      'જૂન', 'જુલાઈ', 'ઑગસ્ટ', 'સપ્ટે', 'ઑક્ટો',
+      'નવે', 'ડિસે'
+    ],
+    [
+      'જાન્યુઆરી', 'ફેબ્રુઆરી', 'માર્ચ',
+      'એપ્રિલ', 'મે', 'જૂન', 'જુલાઈ', 'ઑગસ્ટ',
+      'સપ્ટેમ્બર', 'ઑક્ટોબર', 'નવેમ્બર',
+      'ડિસેમ્બર'
+    ]
+  ],
+  u,
+  [
+    ['ઇ સ પુ', 'ઇસ'], ['ઈ.સ.પૂર્વે', 'ઈ.સ.'],
+    ['ઈસવીસન પૂર્વે', 'ઇસવીસન']
+  ],
+  0, [0, 0], ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['hh:mm a', 'hh:mm:ss a', 'hh:mm:ss a z', 'hh:mm:ss a zzzz'],
+  ['{1} {0}', u, '{1} એ {0} વાગ્યે', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤#,##,##0.00', '[#E0]'], '₹',
+  'ભારતીય રૂપિયા', {
+    'JPY': ['JP¥', '¥'],
+    'MUR': [u, 'રૂ.'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/guz.ts b/packages/common/locales/guz.ts
new file mode 100644
index 000000000000..8900bd57952b
--- /dev/null
+++ b/packages/common/locales/guz.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'guz', [['Ma', 'Mo'], u, ['Mambia', 'Mog']], [['Ma', 'Mo'], u, u],
+  [
+    ['C', 'C', 'C', 'C', 'A', 'I', 'E'], ['Cpr', 'Ctt', 'Cmn', 'Cmt', 'Ars', 'Icm', 'Est'],
+    ['Chumapiri', 'Chumatato', 'Chumaine', 'Chumatano', 'Aramisi', 'Ichuma', 'Esabato'],
+    ['Cpr', 'Ctt', 'Cmn', 'Cmt', 'Ars', 'Icm', 'Est']
+  ],
+  u,
+  [
+    ['C', 'F', 'M', 'A', 'M', 'J', 'C', 'A', 'S', 'O', 'N', 'D'],
+    ['Can', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Cul', 'Agt', 'Sep', 'Okt', 'Nob', 'Dis'],
+    [
+      'Chanuari', 'Feburari', 'Machi', 'Apiriri', 'Mei', 'Juni', 'Chulai', 'Agosti', 'Septemba',
+      'Okitoba', 'Nobemba', 'Disemba'
+    ]
+  ],
+  u, [['YA', 'YK'], u, ['Yeso ataiborwa', 'Yeso kaiboirwe']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Shilingi ya Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/gv.ts b/packages/common/locales/gv.ts
new file mode 100644
index 000000000000..129aaccc35a0
--- /dev/null
+++ b/packages/common/locales/gv.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 10 === 1) return 1;
+  if (v === 0 && i % 10 === 2) return 2;
+  if (v === 0 &&
+      (i % 100 === 0 || i % 100 === 20 || i % 100 === 40 || i % 100 === 60 || i % 100 === 80))
+    return 3;
+  if (!(v === 0)) return 4;
+  return 5;
+}
+
+export default [
+  'gv', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Jed', 'Jel', 'Jem', 'Jerc', 'Jerd', 'Jeh', 'Jes'],
+    ['Jedoonee', 'Jelhein', 'Jemayrt', 'Jercean', 'Jerdein', 'Jeheiney', 'Jesarn'],
+    ['Jed', 'Jel', 'Jem', 'Jerc', 'Jerd', 'Jeh', 'Jes']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'J-guer', 'T-arree', 'Mayrnt', 'Avrril', 'Boaldyn', 'M-souree', 'J-souree', 'Luanistyn',
+      'M-fouyir', 'J-fouyir', 'M-Houney', 'M-Nollick'
+    ],
+    [
+      'Jerrey-geuree', 'Toshiaght-arree', 'Mayrnt', 'Averil', 'Boaldyn', 'Mean-souree',
+      'Jerrey-souree', 'Luanistyn', 'Mean-fouyir', 'Jerrey-fouyir', 'Mee Houney', 'Mee ny Nollick'
+    ]
+  ],
+  u, [['RC', 'AD'], u, u], 1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'GBP',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ha-GH.ts b/packages/common/locales/ha-GH.ts
new file mode 100644
index 000000000000..ef0057edf1f8
--- /dev/null
+++ b/packages/common/locales/ha-GH.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ha-GH', [['AM', 'PM'], u, u], u,
+  [
+    ['L', 'L', 'T', 'L', 'A', 'J', 'A'], ['Lah', 'Lit', 'Tal', 'Lar', 'Alh', 'Jum', 'Asa'],
+    ['Lahadi', 'Litinin', 'Talata', 'Laraba', 'Alhamis', 'Jummaʼa', 'Asabar'],
+    ['Lh', 'Li', 'Ta', 'Lr', 'Al', 'Ju', 'As']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'Y', 'Y', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Fab', 'Mar', 'Afi', 'May', 'Yun', 'Yul', 'Agu', 'Sat', 'Okt', 'Nuw', 'Dis'],
+    [
+      'Janairu', 'Faburairu', 'Maris', 'Afirilu', 'Mayu', 'Yuni', 'Yuli', 'Agusta', 'Satumba',
+      'Oktoba', 'Nuwamba', 'Disamba'
+    ]
+  ],
+  u, [['KHAI', 'BHAI'], u, ['Kafin haihuwar annab', 'Bayan haihuwar annab']], 1, [6, 0],
+  ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'GH₵', 'GHS',
+  {'GHS': ['GH₵'], 'JPY': ['JP¥', '¥'], 'NGN': ['₦'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ha-NE.ts b/packages/common/locales/ha-NE.ts
new file mode 100644
index 000000000000..a32ac3b60774
--- /dev/null
+++ b/packages/common/locales/ha-NE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ha-NE', [['AM', 'PM'], u, u], u,
+  [
+    ['L', 'L', 'T', 'L', 'A', 'J', 'A'], ['Lah', 'Lit', 'Tal', 'Lar', 'Alh', 'Jum', 'Asa'],
+    ['Lahadi', 'Litinin', 'Talata', 'Laraba', 'Alhamis', 'Jummaʼa', 'Asabar'],
+    ['Lh', 'Li', 'Ta', 'Lr', 'Al', 'Ju', 'As']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'Y', 'Y', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Fab', 'Mar', 'Afi', 'May', 'Yun', 'Yul', 'Agu', 'Sat', 'Okt', 'Nuw', 'Dis'],
+    [
+      'Janairu', 'Faburairu', 'Maris', 'Afirilu', 'Mayu', 'Yuni', 'Yuli', 'Agusta', 'Satumba',
+      'Oktoba', 'Nuwamba', 'Disamba'
+    ]
+  ],
+  u, [['KHAI', 'BHAI'], u, ['Kafin haihuwar annab', 'Bayan haihuwar annab']], 1, [6, 0],
+  ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'CFA', 'Kuɗin Sefa na Afirka Ta Yamma',
+  {'JPY': ['JP¥', '¥'], 'NGN': ['₦'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ha.ts b/packages/common/locales/ha.ts
new file mode 100644
index 000000000000..5351b4533d89
--- /dev/null
+++ b/packages/common/locales/ha.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ha', [['AM', 'PM'], u, u], u,
+  [
+    ['L', 'L', 'T', 'L', 'A', 'J', 'A'], ['Lah', 'Lit', 'Tal', 'Lar', 'Alh', 'Jum', 'Asa'],
+    ['Lahadi', 'Litinin', 'Talata', 'Laraba', 'Alhamis', 'Jummaʼa', 'Asabar'],
+    ['Lh', 'Li', 'Ta', 'Lr', 'Al', 'Ju', 'As']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'Y', 'Y', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Fab', 'Mar', 'Afi', 'May', 'Yun', 'Yul', 'Agu', 'Sat', 'Okt', 'Nuw', 'Dis'],
+    [
+      'Janairu', 'Faburairu', 'Maris', 'Afirilu', 'Mayu', 'Yuni', 'Yuli', 'Agusta', 'Satumba',
+      'Oktoba', 'Nuwamba', 'Disamba'
+    ]
+  ],
+  u, [['KHAI', 'BHAI'], u, ['Kafin haihuwar annab', 'Bayan haihuwar annab']], 1, [6, 0],
+  ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₦', 'Naira',
+  {'JPY': ['JP¥', '¥'], 'NGN': ['₦'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/haw.ts b/packages/common/locales/haw.ts
new file mode 100644
index 000000000000..4e66b2923d23
--- /dev/null
+++ b/packages/common/locales/haw.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'haw', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['LP', 'P1', 'P2', 'P3', 'P4', 'P5', 'P6'],
+    ['Lāpule', 'Poʻakahi', 'Poʻalua', 'Poʻakolu', 'Poʻahā', 'Poʻalima', 'Poʻaono'],
+    ['LP', 'P1', 'P2', 'P3', 'P4', 'P5', 'P6']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'Ian.', 'Pep.', 'Mal.', 'ʻAp.', 'Mei', 'Iun.', 'Iul.', 'ʻAu.', 'Kep.', 'ʻOk.', 'Now.',
+      'Kek.'
+    ],
+    [
+      'Ianuali', 'Pepeluali', 'Malaki', 'ʻApelila', 'Mei', 'Iune', 'Iulai', 'ʻAukake',
+      'Kepakemapa', 'ʻOkakopa', 'Nowemapa', 'Kekemapa'
+    ]
+  ],
+  u, [['BCE', 'CE'], u, u], 0, [6, 0], ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'USD', {'JPY': ['JP¥', '¥']}, plural
+];
diff --git a/packages/common/locales/he.ts b/packages/common/locales/he.ts
new file mode 100644
index 000000000000..4adfe46979aa
--- /dev/null
+++ b/packages/common/locales/he.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (i === 2 && v === 0) return 2;
+  if (v === 0 && !(n >= 0 && n <= 10) && n % 10 === 0) return 4;
+  return 5;
+}
+
+export default [
+  'he', [['לפנה״צ', 'אחה״צ'], u, u], [['לפנה״צ', 'אחה״צ'], ['AM', 'PM'], u],
+  [
+    ['א׳', 'ב׳', 'ג׳', 'ד׳', 'ה׳', 'ו׳', 'ש׳'],
+    [
+      'יום א׳', 'יום ב׳', 'יום ג׳', 'יום ד׳', 'יום ה׳', 'יום ו׳',
+      'שבת'
+    ],
+    [
+      'יום ראשון', 'יום שני', 'יום שלישי', 'יום רביעי',
+      'יום חמישי', 'יום שישי', 'יום שבת'
+    ],
+    ['א׳', 'ב׳', 'ג׳', 'ד׳', 'ה׳', 'ו׳', 'ש׳']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ינו׳', 'פבר׳', 'מרץ', 'אפר׳', 'מאי', 'יוני', 'יולי', 'אוג׳',
+      'ספט׳', 'אוק׳', 'נוב׳', 'דצמ׳'
+    ],
+    [
+      'ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי',
+      'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'
+    ]
+  ],
+  u, [['לפנה״ס', 'לספירה'], u, ['לפני הספירה', 'לספירה']], 0, [5, 6],
+  ['d.M.y', 'd בMMM y', 'd בMMMM y', 'EEEE, d בMMMM y'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1}, {0}', u, '{1} בשעה {0}', u],
+  ['.', ',', ';', '%', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '\u200f#,##0.00 ¤;\u200f-#,##0.00 ¤', '#E0'], '₪', 'שקל חדש',
+  {'CNY': ['\u200eCN¥\u200e', '¥'], 'ILP': ['ל״י'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/hi.ts b/packages/common/locales/hi.ts
new file mode 100644
index 000000000000..3dd0e172ec26
--- /dev/null
+++ b/packages/common/locales/hi.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'hi', [['पू', 'अ'], ['पूर्वाह्न', 'अपराह्न'], u], u,
+  [
+    ['र', 'सो', 'मं', 'बु', 'गु', 'शु', 'श'],
+    [
+      'रवि', 'सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र',
+      'शनि'
+    ],
+    [
+      'रविवार', 'सोमवार', 'मंगलवार', 'बुधवार',
+      'गुरुवार', 'शुक्रवार', 'शनिवार'
+    ],
+    ['र', 'सो', 'मं', 'बु', 'गु', 'शु', 'श']
+  ],
+  u,
+  [
+    [
+      'ज', 'फ़', 'मा', 'अ', 'म', 'जू', 'जु', 'अ', 'सि', 'अ', 'न',
+      'दि'
+    ],
+    [
+      'जन॰', 'फ़र॰', 'मार्च', 'अप्रैल', 'मई', 'जून',
+      'जुल॰', 'अग॰', 'सित॰', 'अक्तू॰', 'नव॰', 'दिस॰'
+    ],
+    [
+      'जनवरी', 'फ़रवरी', 'मार्च', 'अप्रैल', 'मई',
+      'जून', 'जुलाई', 'अगस्त', 'सितंबर',
+      'अक्तूबर', 'नवंबर', 'दिसंबर'
+    ]
+  ],
+  u,
+  [
+    ['ईसा-पूर्व', 'ईस्वी'], u,
+    ['ईसा-पूर्व', 'ईसवी सन']
+  ],
+  0, [0, 0], ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} को {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤#,##,##0.00', '[#E0]'], '₹',
+  'भारतीय रुपया',
+  {'JPY': ['JP¥', '¥'], 'RON': [u, 'लेई'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/hr-BA.ts b/packages/common/locales/hr-BA.ts
new file mode 100644
index 000000000000..fc358f2839ce
--- /dev/null
+++ b/packages/common/locales/hr-BA.ts
@@ -0,0 +1,76 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export default [
+  'hr-BA', [['AM', 'PM'], u, u], u,
+  [
+    ['N', 'P', 'U', 'S', 'Č', 'P', 'S'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  u,
+  [
+    ['1.', '2.', '3.', '4.', '5.', '6.', '7.', '8.', '9.', '10.', '11.', '12.'],
+    ['sij', 'velj', 'ožu', 'tra', 'svi', 'lip', 'srp', 'kol', 'ruj', 'lis', 'stu', 'pro'],
+    [
+      'siječnja', 'veljače', 'ožujka', 'travnja', 'svibnja', 'lipnja', 'srpnja', 'kolovoza',
+      'rujna', 'listopada', 'studenoga', 'prosinca'
+    ]
+  ],
+  [
+    ['1.', '2.', '3.', '4.', '5.', '6.', '7.', '8.', '9.', '10.', '11.', '12.'],
+    ['sij', 'velj', 'ožu', 'tra', 'svi', 'lip', 'srp', 'kol', 'ruj', 'lis', 'stu', 'pro'],
+    [
+      'siječanj', 'veljača', 'ožujak', 'travanj', 'svibanj', 'lipanj', 'srpanj', 'kolovoz',
+      'rujan', 'listopad', 'studeni', 'prosinac'
+    ]
+  ],
+  [['pr.n.e.', 'AD'], ['pr. Kr.', 'po. Kr.'], ['prije Krista', 'poslije Krista']], 1, [6, 0],
+  ['d. M. yy.', 'd. MMM y.', 'd. MMMM y.', 'EEEE, d. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss (zzzz)'], ['{1} {0}', u, '{1} \'u\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'KM', 'konvertibilna marka', {
+    'AUD': [u, '$'],
+    'BAM': ['KM'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/hr.ts b/packages/common/locales/hr.ts
new file mode 100644
index 000000000000..d274065f90b9
--- /dev/null
+++ b/packages/common/locales/hr.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export default [
+  'hr', [['AM', 'PM'], u, u], u,
+  [
+    ['N', 'P', 'U', 'S', 'Č', 'P', 'S'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  [
+    ['n', 'p', 'u', 's', 'č', 'p', 's'], ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub'],
+    ['nedjelja', 'ponedjeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ned', 'pon', 'uto', 'sri', 'čet', 'pet', 'sub']
+  ],
+  [
+    ['1.', '2.', '3.', '4.', '5.', '6.', '7.', '8.', '9.', '10.', '11.', '12.'],
+    ['sij', 'velj', 'ožu', 'tra', 'svi', 'lip', 'srp', 'kol', 'ruj', 'lis', 'stu', 'pro'],
+    [
+      'siječnja', 'veljače', 'ožujka', 'travnja', 'svibnja', 'lipnja', 'srpnja', 'kolovoza',
+      'rujna', 'listopada', 'studenoga', 'prosinca'
+    ]
+  ],
+  [
+    ['1.', '2.', '3.', '4.', '5.', '6.', '7.', '8.', '9.', '10.', '11.', '12.'],
+    ['sij', 'velj', 'ožu', 'tra', 'svi', 'lip', 'srp', 'kol', 'ruj', 'lis', 'stu', 'pro'],
+    [
+      'siječanj', 'veljača', 'ožujak', 'travanj', 'svibanj', 'lipanj', 'srpanj', 'kolovoz',
+      'rujan', 'listopad', 'studeni', 'prosinac'
+    ]
+  ],
+  [['pr.n.e.', 'AD'], ['pr. Kr.', 'po. Kr.'], ['prije Krista', 'poslije Krista']], 1, [6, 0],
+  ['dd. MM. y.', 'd. MMM y.', 'd. MMMM y.', 'EEEE, d. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss (zzzz)'], ['{1} {0}', u, '{1} \'u\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'HRK', 'hrvatska kuna', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/hsb.ts b/packages/common/locales/hsb.ts
new file mode 100644
index 000000000000..e426589840b5
--- /dev/null
+++ b/packages/common/locales/hsb.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 100 === 1 || f % 100 === 1) return 1;
+  if (v === 0 && i % 100 === 2 || f % 100 === 2) return 2;
+  if (v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 3 && i % 100 <= 4 ||
+      f % 100 === Math.floor(f % 100) && f % 100 >= 3 && f % 100 <= 4)
+    return 3;
+  return 5;
+}
+
+export default [
+  'hsb', [['dop.', 'pop.'], ['dopołdnja', 'popołdnju'], u], [['dopołdnja', 'popołdnju'], u, u],
+  [
+    ['n', 'p', 'w', 's', 'š', 'p', 's'], ['nje', 'pón', 'wut', 'srj', 'štw', 'pja', 'sob'],
+    ['njedźela', 'póndźela', 'wutora', 'srjeda', 'štwórtk', 'pjatk', 'sobota'],
+    ['nj', 'pó', 'wu', 'sr', 'št', 'pj', 'so']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    [
+      'jan.', 'feb.', 'měr.', 'apr.', 'mej.', 'jun.', 'jul.', 'awg.', 'sep.', 'okt.', 'now.',
+      'dec.'
+    ],
+    [
+      'januara', 'februara', 'měrca', 'apryla', 'meje', 'junija', 'julija', 'awgusta', 'septembra',
+      'oktobra', 'nowembra', 'decembra'
+    ]
+  ],
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'měr', 'apr', 'mej', 'jun', 'jul', 'awg', 'sep', 'okt', 'now', 'dec'],
+    [
+      'januar', 'februar', 'měrc', 'apryl', 'meja', 'junij', 'julij', 'awgust', 'september',
+      'oktober', 'nowember', 'december'
+    ]
+  ],
+  [['př.Chr.n.', 'po Chr.n.'], u, ['před Chrystowym narodźenjom', 'po Chrystowym narodźenju']],
+  1, [6, 0], ['d.M.yy', 'd.M.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['H:mm \'hodź\'.', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro',
+  {'AUD': [u, '$'], 'PLN': ['zł'], 'THB': ['฿']}, plural
+];
diff --git a/packages/common/locales/hu.ts b/packages/common/locales/hu.ts
new file mode 100644
index 000000000000..c3fdeaa31f73
--- /dev/null
+++ b/packages/common/locales/hu.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'hu', [['de.', 'du.'], u, u], u,
+  [
+    ['V', 'H', 'K', 'Sz', 'Cs', 'P', 'Sz'], ['V', 'H', 'K', 'Sze', 'Cs', 'P', 'Szo'],
+    ['vasárnap', 'hétfő', 'kedd', 'szerda', 'csütörtök', 'péntek', 'szombat'],
+    ['V', 'H', 'K', 'Sze', 'Cs', 'P', 'Szo']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'Á', 'M', 'J', 'J', 'A', 'Sz', 'O', 'N', 'D'],
+    [
+      'jan.', 'febr.', 'márc.', 'ápr.', 'máj.', 'jún.', 'júl.', 'aug.', 'szept.', 'okt.',
+      'nov.', 'dec.'
+    ],
+    [
+      'január', 'február', 'március', 'április', 'május', 'június', 'július', 'augusztus',
+      'szeptember', 'október', 'november', 'december'
+    ]
+  ],
+  u, [['ie.', 'isz.'], ['i. e.', 'i. sz.'], ['Krisztus előtt', 'időszámításunk szerint']], 1,
+  [6, 0], ['y. MM. dd.', 'y. MMM d.', 'y. MMMM d.', 'y. MMMM d., EEEE'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'Ft', 'magyar forint', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'HUF': ['Ft'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/hy.ts b/packages/common/locales/hy.ts
new file mode 100644
index 000000000000..6a5102b4313f
--- /dev/null
+++ b/packages/common/locales/hy.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'hy', [['ա', 'հ'], ['ԿԱ', 'ԿՀ'], u], [['ԿԱ', 'ԿՀ'], u, u],
+  [
+    ['Կ', 'Ե', 'Ե', 'Չ', 'Հ', 'Ո', 'Շ'],
+    ['կիր', 'երկ', 'երք', 'չրք', 'հնգ', 'ուր', 'շբթ'],
+    [
+      'կիրակի', 'երկուշաբթի', 'երեքշաբթի', 'չորեքշաբթի',
+      'հինգշաբթի', 'ուրբաթ', 'շաբաթ'
+    ],
+    ['կր', 'եկ', 'եք', 'չք', 'հգ', 'ու', 'շբ']
+  ],
+  u,
+  [
+    ['Հ', 'Փ', 'Մ', 'Ա', 'Մ', 'Հ', 'Հ', 'Օ', 'Ս', 'Հ', 'Ն', 'Դ'],
+    [
+      'հնվ', 'փտվ', 'մրտ', 'ապր', 'մյս', 'հնս', 'հլս', 'օգս', 'սեպ',
+      'հոկ', 'նոյ', 'դեկ'
+    ],
+    [
+      'հունվարի', 'փետրվարի', 'մարտի', 'ապրիլի', 'մայիսի',
+      'հունիսի', 'հուլիսի', 'օգոստոսի', 'սեպտեմբերի',
+      'հոկտեմբերի', 'նոյեմբերի', 'դեկտեմբերի'
+    ]
+  ],
+  [
+    ['Հ', 'Փ', 'Մ', 'Ա', 'Մ', 'Հ', 'Հ', 'Օ', 'Ս', 'Հ', 'Ն', 'Դ'],
+    [
+      'հնվ', 'փտվ', 'մրտ', 'ապր', 'մյս', 'հնս', 'հլս', 'օգս', 'սեպ',
+      'հոկ', 'նոյ', 'դեկ'
+    ],
+    [
+      'հունվար', 'փետրվար', 'մարտ', 'ապրիլ', 'մայիս', 'հունիս',
+      'հուլիս', 'օգոստոս', 'սեպտեմբեր', 'հոկտեմբեր',
+      'նոյեմբեր', 'դեկտեմբեր'
+    ]
+  ],
+  [['մ.թ.ա.', 'մ.թ.'], u, ['Քրիստոսից առաջ', 'Քրիստոսից հետո']], 1,
+  [6, 0], ['dd.MM.yy', 'dd MMM, y թ.', 'dd MMMM, y թ.', 'y թ. MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'ՈչԹ', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '֏', 'հայկական դրամ',
+  {'AMD': ['֏'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/id.ts b/packages/common/locales/id.ts
new file mode 100644
index 000000000000..ce13be7ae05e
--- /dev/null
+++ b/packages/common/locales/id.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'id', [['AM', 'PM'], u, u], u,
+  [
+    ['M', 'S', 'S', 'R', 'K', 'J', 'S'], ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'],
+    ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'],
+    ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agt', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September',
+      'Oktober', 'November', 'Desember'
+    ]
+  ],
+  u, [['SM', 'M'], u, ['Sebelum Masehi', 'Masehi']], 0, [6, 0],
+  ['dd/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH.mm', 'HH.mm.ss', 'HH.mm.ss z', 'HH.mm.ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Rp', 'Rupiah Indonesia', {
+    'AUD': ['AU$', '$'],
+    'IDR': ['Rp'],
+    'INR': ['Rs', '₹'],
+    'JPY': ['JP¥', '¥'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ig.ts b/packages/common/locales/ig.ts
new file mode 100644
index 000000000000..b352d771239b
--- /dev/null
+++ b/packages/common/locales/ig.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ig', [['A.M.', 'P.M.'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['Ụka', 'Mọn', 'Tiu', 'Wen', 'Tọọ', 'Fraị', 'Sat'],
+    ['Mbọsị Ụka', 'Mọnde', 'Tiuzdee', 'Wenezdee', 'Tọọzdee', 'Fraịdee', 'Satọdee'],
+    ['Ụka', 'Mọn', 'Tiu', 'Wen', 'Tọọ', 'Fraị', 'Sat']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Jen', 'Feb', 'Maa', 'Epr', 'Mee', 'Juu', 'Jul', 'Ọgọ', 'Sep', 'Ọkt', 'Nov', 'Dis'],
+    [
+      'Jenụwarị', 'Febrụwarị', 'Maachị', 'Eprel', 'Mee', 'Juun', 'Julaị',
+      'Ọgọọst', 'Septemba', 'Ọktoba', 'Novemba', 'Disemba'
+    ]
+  ],
+  u, [['T.K.', 'A.K.'], u, ['Tupu Kristi', 'Afọ Kristi']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₦', 'Naịra',
+  {'JPY': ['JP¥', '¥'], 'NGN': ['₦'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ii.ts b/packages/common/locales/ii.ts
new file mode 100644
index 000000000000..41bec1f8f645
--- /dev/null
+++ b/packages/common/locales/ii.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ii', [['ꎸꄑ', 'ꁯꋒ'], u, u], u,
+  [
+    ['ꆏ', 'ꋍ', 'ꑍ', 'ꌕ', 'ꇖ', 'ꉬ', 'ꃘ'],
+    ['ꑭꆏ', 'ꆏꋍ', 'ꆏꑍ', 'ꆏꌕ', 'ꆏꇖ', 'ꆏꉬ', 'ꆏꃘ'],
+    ['ꑭꆏꑍ', 'ꆏꊂꋍ', 'ꆏꊂꑍ', 'ꆏꊂꌕ', 'ꆏꊂꇖ', 'ꆏꊂꉬ', 'ꆏꊂꃘ'],
+    ['ꑭꆏ', 'ꆏꋍ', 'ꆏꑍ', 'ꆏꌕ', 'ꆏꇖ', 'ꆏꉬ', 'ꆏꃘ']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ꋍꆪ', 'ꑍꆪ', 'ꌕꆪ', 'ꇖꆪ', 'ꉬꆪ', 'ꃘꆪ', 'ꏃꆪ', 'ꉆꆪ', 'ꈬꆪ',
+      'ꊰꆪ', 'ꊰꊪꆪ', 'ꊰꑋꆪ'
+    ],
+    u
+  ],
+  u, [['ꃅꋊꂿ', 'ꃅꋊꊂ'], u, u], 0, [6, 0],
+  ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '¥', 'CNY',
+  {'CNY': ['¥'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/is.ts b/packages/common/locales/is.ts
new file mode 100644
index 000000000000..016a5abfac0c
--- /dev/null
+++ b/packages/common/locales/is.ts
@@ -0,0 +1,64 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)),
+      t = parseInt(n.toString().replace(/^[^.]*\.?|0+$/g, ''), 10) || 0;
+  if (t === 0 && i % 10 === 1 && !(i % 100 === 11) || !(t === 0)) return 1;
+  return 5;
+}
+
+export default [
+  'is', [['f.', 'e.'], ['f.h.', 'e.h.'], u], [['f.h.', 'e.h.'], u, u],
+  [
+    ['S', 'M', 'Þ', 'M', 'F', 'F', 'L'],
+    ['sun.', 'mán.', 'þri.', 'mið.', 'fim.', 'fös.', 'lau.'],
+    [
+      'sunnudagur', 'mánudagur', 'þriðjudagur', 'miðvikudagur', 'fimmtudagur', 'föstudagur',
+      'laugardagur'
+    ],
+    ['su.', 'má.', 'þr.', 'mi.', 'fi.', 'fö.', 'la.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'Á', 'S', 'O', 'N', 'D'],
+    [
+      'jan.', 'feb.', 'mar.', 'apr.', 'maí', 'jún.', 'júl.', 'ágú.', 'sep.', 'okt.', 'nóv.',
+      'des.'
+    ],
+    [
+      'janúar', 'febrúar', 'mars', 'apríl', 'maí', 'júní', 'júlí', 'ágúst', 'september',
+      'október', 'nóvember', 'desember'
+    ]
+  ],
+  u, [['f.k.', 'e.k.'], ['f.Kr.', 'e.Kr.'], ['fyrir Krist', 'eftir Krist']], 1, [6, 0],
+  ['d.M.y', 'd. MMM y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'kl\'. {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'ISK', 'íslensk króna', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'INR': [u, '₹'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/it-CH.ts b/packages/common/locales/it-CH.ts
new file mode 100644
index 000000000000..15d8fe8d53ab
--- /dev/null
+++ b/packages/common/locales/it-CH.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'it-CH', [['m.', 'p.'], ['AM', 'PM'], u], u,
+  [
+    ['D', 'L', 'M', 'M', 'G', 'V', 'S'], ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab'],
+    ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato'],
+    ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab']
+  ],
+  u,
+  [
+    ['G', 'F', 'M', 'A', 'M', 'G', 'L', 'A', 'S', 'O', 'N', 'D'],
+    ['gen', 'feb', 'mar', 'apr', 'mag', 'giu', 'lug', 'ago', 'set', 'ott', 'nov', 'dic'],
+    [
+      'gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre',
+      'ottobre', 'novembre', 'dicembre'
+    ]
+  ],
+  u, [['aC', 'dC'], ['a.C.', 'd.C.'], ['avanti Cristo', 'dopo Cristo']], 1, [6, 0],
+  ['dd.MM.yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  ['.', '’', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤-#,##0.00', '#E0'], 'CHF', 'franco svizzero', {
+    'BRL': [u, 'R$'],
+    'BYN': [u, 'Br'],
+    'EGP': [u, '£E'],
+    'HKD': [u, '$'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NOK': [u, 'NKr'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/it-SM.ts b/packages/common/locales/it-SM.ts
new file mode 100644
index 000000000000..70f027310154
--- /dev/null
+++ b/packages/common/locales/it-SM.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'it-SM', [['m.', 'p.'], ['AM', 'PM'], u], u,
+  [
+    ['D', 'L', 'M', 'M', 'G', 'V', 'S'], ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab'],
+    ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato'],
+    ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab']
+  ],
+  u,
+  [
+    ['G', 'F', 'M', 'A', 'M', 'G', 'L', 'A', 'S', 'O', 'N', 'D'],
+    ['gen', 'feb', 'mar', 'apr', 'mag', 'giu', 'lug', 'ago', 'set', 'ott', 'nov', 'dic'],
+    [
+      'gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre',
+      'ottobre', 'novembre', 'dicembre'
+    ]
+  ],
+  u, [['aC', 'dC'], ['a.C.', 'd.C.'], ['avanti Cristo', 'dopo Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'BRL': [u, 'R$'],
+    'BYN': [u, 'Br'],
+    'EGP': [u, '£E'],
+    'HKD': [u, '$'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NOK': [u, 'NKr'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/it-VA.ts b/packages/common/locales/it-VA.ts
new file mode 100644
index 000000000000..5d66fb60169a
--- /dev/null
+++ b/packages/common/locales/it-VA.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'it-VA', [['m.', 'p.'], ['AM', 'PM'], u], u,
+  [
+    ['D', 'L', 'M', 'M', 'G', 'V', 'S'], ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab'],
+    ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato'],
+    ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab']
+  ],
+  u,
+  [
+    ['G', 'F', 'M', 'A', 'M', 'G', 'L', 'A', 'S', 'O', 'N', 'D'],
+    ['gen', 'feb', 'mar', 'apr', 'mag', 'giu', 'lug', 'ago', 'set', 'ott', 'nov', 'dic'],
+    [
+      'gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre',
+      'ottobre', 'novembre', 'dicembre'
+    ]
+  ],
+  u, [['aC', 'dC'], ['a.C.', 'd.C.'], ['avanti Cristo', 'dopo Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'BRL': [u, 'R$'],
+    'BYN': [u, 'Br'],
+    'EGP': [u, '£E'],
+    'HKD': [u, '$'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NOK': [u, 'NKr'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/it.ts b/packages/common/locales/it.ts
new file mode 100644
index 000000000000..d9f28e9e986f
--- /dev/null
+++ b/packages/common/locales/it.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'it', [['m.', 'p.'], ['AM', 'PM'], u], u,
+  [
+    ['D', 'L', 'M', 'M', 'G', 'V', 'S'], ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab'],
+    ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato'],
+    ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab']
+  ],
+  u,
+  [
+    ['G', 'F', 'M', 'A', 'M', 'G', 'L', 'A', 'S', 'O', 'N', 'D'],
+    ['gen', 'feb', 'mar', 'apr', 'mag', 'giu', 'lug', 'ago', 'set', 'ott', 'nov', 'dic'],
+    [
+      'gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre',
+      'ottobre', 'novembre', 'dicembre'
+    ]
+  ],
+  u, [['aC', 'dC'], ['a.C.', 'd.C.'], ['avanti Cristo', 'dopo Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'BRL': [u, 'R$'],
+    'BYN': [u, 'Br'],
+    'EGP': [u, '£E'],
+    'HKD': [u, '$'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NOK': [u, 'NKr'],
+    'THB': ['฿'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ja.ts b/packages/common/locales/ja.ts
new file mode 100644
index 000000000000..9dbd6f062ccd
--- /dev/null
+++ b/packages/common/locales/ja.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ja', [['午前', '午後'], u, u], u,
+  [
+    ['日', '月', '火', '水', '木', '金', '土'], u,
+    ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
+    ['日', '月', '火', '水', '木', '金', '土']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    u
+  ],
+  u, [['BC', 'AD'], ['紀元前', '西暦'], u], 0, [6, 0],
+  ['y/MM/dd', u, 'y年M月d日', 'y年M月d日EEEE'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H時mm分ss秒 zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '￥', '日本円',
+  {'CNY': ['元', '￥'], 'JPY': ['￥'], 'RON': [u, 'レイ']}, plural
+];
diff --git a/packages/common/locales/jgo.ts b/packages/common/locales/jgo.ts
new file mode 100644
index 000000000000..c8d9494dc325
--- /dev/null
+++ b/packages/common/locales/jgo.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'jgo', [['mbaꞌmbaꞌ', 'ŋka mbɔ́t nji'], u, u], u,
+  [
+    ['Sɔ́', 'Mɔ́', 'ÁM', 'Wɛ́', 'Tɔ́', 'Fɛ', 'Sá'],
+    [
+      'Sɔ́ndi', 'Mɔ́ndi', 'Ápta Mɔ́ndi', 'Wɛ́nɛsɛdɛ', 'Tɔ́sɛdɛ', 'Fɛlâyɛdɛ',
+      'Sásidɛ'
+    ],
+    u, u
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'Nduŋmbi Saŋ', 'Pɛsaŋ Pɛ́pá', 'Pɛsaŋ Pɛ́tát', 'Pɛsaŋ Pɛ́nɛ́kwa',
+      'Pɛsaŋ Pataa', 'Pɛsaŋ Pɛ́nɛ́ntúkú', 'Pɛsaŋ Saambá', 'Pɛsaŋ Pɛ́nɛ́fɔm',
+      'Pɛsaŋ Pɛ́nɛ́pfúꞋú', 'Pɛsaŋ Nɛgɛ́m', 'Pɛsaŋ Ntsɔ̌pmɔ́',
+      'Pɛsaŋ Ntsɔ̌ppá'
+    ],
+    u
+  ],
+  u,
+  [
+    ['BCE', 'CE'], u,
+    [
+      'tsɛttsɛt mɛŋguꞌ mi ɛ́ lɛɛnɛ Kɛlísɛtɔ gɔ ńɔ́',
+      'tsɛttsɛt mɛŋguꞌ mi ɛ́ fúnɛ Kɛlísɛtɔ tɔ́ mɔ́'
+    ]
+  ],
+  1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'EEEE, y MMMM dd'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'FCFA', 'Fɛlâŋ',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/jmc.ts b/packages/common/locales/jmc.ts
new file mode 100644
index 000000000000..5839086fbca2
--- /dev/null
+++ b/packages/common/locales/jmc.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'jmc', [['utuko', 'kyiukonyi'], u, u], u,
+  [
+    ['J', 'J', 'J', 'J', 'A', 'I', 'J'], ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo'],
+    ['Jumapilyi', 'Jumatatuu', 'Jumanne', 'Jumatanu', 'Alhamisi', 'Ijumaa', 'Jumamosi'],
+    ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Machi', 'Aprilyi', 'Mei', 'Junyi', 'Julyai', 'Agusti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Kristu', 'Baada ya Kristu']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'TSh', 'Shilingi ya Tanzania',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ka.ts b/packages/common/locales/ka.ts
new file mode 100644
index 000000000000..4331f0eca465
--- /dev/null
+++ b/packages/common/locales/ka.ts
@@ -0,0 +1,75 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ka', [['a', 'p'], ['AM', 'PM'], u],
+  [['AM', 'PM'], u, ['AM', 'შუადღ. შემდეგ']],
+  [
+    ['კ', 'ო', 'ს', 'ო', 'ხ', 'პ', 'შ'],
+    ['კვი', 'ორშ', 'სამ', 'ოთხ', 'ხუთ', 'პარ', 'შაბ'],
+    [
+      'კვირა', 'ორშაბათი', 'სამშაბათი',
+      'ოთხშაბათი', 'ხუთშაბათი', 'პარასკევი',
+      'შაბათი'
+    ],
+    ['კვ', 'ორ', 'სმ', 'ოთ', 'ხთ', 'პრ', 'შბ']
+  ],
+  u,
+  [
+    ['ი', 'თ', 'მ', 'ა', 'მ', 'ი', 'ი', 'ა', 'ს', 'ო', 'ნ', 'დ'],
+    [
+      'იან', 'თებ', 'მარ', 'აპრ', 'მაი', 'ივნ', 'ივლ',
+      'აგვ', 'სექ', 'ოქტ', 'ნოე', 'დეკ'
+    ],
+    [
+      'იანვარი', 'თებერვალი', 'მარტი',
+      'აპრილი', 'მაისი', 'ივნისი', 'ივლისი',
+      'აგვისტო', 'სექტემბერი', 'ოქტომბერი',
+      'ნოემბერი', 'დეკემბერი'
+    ]
+  ],
+  u,
+  [
+    ['ძვ. წ.', 'ახ. წ.'], u,
+    [
+      'ძველი წელთაღრიცხვით',
+      'ახალი წელთაღრიცხვით'
+    ]
+  ],
+  1, [6, 0], ['dd.MM.yy', 'd MMM. y', 'd MMMM, y', 'EEEE, dd MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [
+    ',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞',
+    'არ არის რიცხვი', ':'
+  ],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '₾', 'ქართული ლარი', {
+    'AUD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GEL': ['₾'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/kab.ts b/packages/common/locales/kab.ts
new file mode 100644
index 000000000000..f4250f76940b
--- /dev/null
+++ b/packages/common/locales/kab.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || i === 1) return 1;
+  return 5;
+}
+
+export default [
+  'kab', [['n tufat', 'n tmeddit'], u, u], u,
+  [
+    ['Y', 'S', 'K', 'K', 'S', 'S', 'S'], ['Yan', 'San', 'Kraḍ', 'Kuẓ', 'Sam', 'Sḍis', 'Say'],
+    ['Yanass', 'Sanass', 'Kraḍass', 'Kuẓass', 'Samass', 'Sḍisass', 'Sayass'],
+    ['Yan', 'San', 'Kraḍ', 'Kuẓ', 'Sam', 'Sḍis', 'Say']
+  ],
+  u,
+  [
+    ['Y', 'F', 'M', 'Y', 'M', 'Y', 'Y', 'Ɣ', 'C', 'T', 'N', 'D'],
+    ['Yen', 'Fur', 'Meɣ', 'Yeb', 'May', 'Yun', 'Yul', 'Ɣuc', 'Cte', 'Tub', 'Nun', 'Duǧ'],
+    [
+      'Yennayer', 'Fuṛar', 'Meɣres', 'Yebrir', 'Mayyu', 'Yunyu', 'Yulyu', 'Ɣuct', 'Ctembeṛ',
+      'Tubeṛ', 'Nunembeṛ', 'Duǧembeṛ'
+    ]
+  ],
+  u, [['snd. T.Ɛ', 'sld. T.Ɛ'], u, ['send talalit n Ɛisa', 'seld talalit n Ɛisa']], 6, [5, 6],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'DA', 'Adinar Azzayri',
+  {'DZD': ['DA'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/kam.ts b/packages/common/locales/kam.ts
new file mode 100644
index 000000000000..30af3a0a9abb
--- /dev/null
+++ b/packages/common/locales/kam.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'kam', [['Ĩyakwakya', 'Ĩyawĩoo'], u, u], u,
+  [
+    ['Y', 'W', 'E', 'A', 'A', 'A', 'A'], ['Wky', 'Wkw', 'Wkl', 'Wtũ', 'Wkn', 'Wtn', 'Wth'],
+    [
+      'Wa kyumwa', 'Wa kwambĩlĩlya', 'Wa kelĩ', 'Wa katatũ', 'Wa kana', 'Wa katano',
+      'Wa thanthatũ'
+    ],
+    ['Wky', 'Wkw', 'Wkl', 'Wtũ', 'Wkn', 'Wtn', 'Wth']
+  ],
+  u,
+  [
+    ['M', 'K', 'K', 'K', 'K', 'T', 'M', 'N', 'K', 'Ĩ', 'Ĩ', 'Ĩ'],
+    ['Mbe', 'Kel', 'Ktũ', 'Kan', 'Ktn', 'Tha', 'Moo', 'Nya', 'Knd', 'Ĩku', 'Ĩkm', 'Ĩkl'],
+    [
+      'Mwai wa mbee', 'Mwai wa kelĩ', 'Mwai wa katatũ', 'Mwai wa kana', 'Mwai wa katano',
+      'Mwai wa thanthatũ', 'Mwai wa muonza', 'Mwai wa nyaanya', 'Mwai wa kenda', 'Mwai wa ĩkumi',
+      'Mwai wa ĩkumi na ĩmwe', 'Mwai wa ĩkumi na ilĩ'
+    ]
+  ],
+  u, [['MY', 'IY'], u, ['Mbee wa Yesũ', 'Ĩtina wa Yesũ']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Silingi ya Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/kde.ts b/packages/common/locales/kde.ts
new file mode 100644
index 000000000000..25bf63cb1cdf
--- /dev/null
+++ b/packages/common/locales/kde.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'kde', [['Muhi', 'Chilo'], u, u], u,
+  [
+    ['2', '3', '4', '5', '6', '7', '1'], ['Ll2', 'Ll3', 'Ll4', 'Ll5', 'Ll6', 'Ll7', 'Ll1'],
+    [
+      'Liduva lyapili', 'Liduva lyatatu', 'Liduva lyanchechi', 'Liduva lyannyano',
+      'Liduva lyannyano na linji', 'Liduva lyannyano na mavili', 'Liduva litandi'
+    ],
+    ['Ll2', 'Ll3', 'Ll4', 'Ll5', 'Ll6', 'Ll7', 'Ll1']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Mwedi Ntandi', 'Mwedi wa Pili', 'Mwedi wa Tatu', 'Mwedi wa Nchechi', 'Mwedi wa Nnyano',
+      'Mwedi wa Nnyano na Umo', 'Mwedi wa Nnyano na Mivili', 'Mwedi wa Nnyano na Mitatu',
+      'Mwedi wa Nnyano na Nchechi', 'Mwedi wa Nnyano na Nnyano', 'Mwedi wa Nnyano na Nnyano na U',
+      'Mwedi wa Nnyano na Nnyano na M'
+    ]
+  ],
+  u, [['AY', 'NY'], u, ['Akanapawa Yesu', 'Nankuida Yesu']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'TSh', 'Shilingi ya Tanzania',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/kea.ts b/packages/common/locales/kea.ts
new file mode 100644
index 000000000000..696de4b89e61
--- /dev/null
+++ b/packages/common/locales/kea.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'kea', [['a', 'p'], ['am', 'pm'], u], [['am', 'pm'], u, u],
+  [
+    ['D', 'S', 'T', 'K', 'K', 'S', 'S'], ['dum', 'sig', 'ter', 'kua', 'kin', 'ses', 'sab'],
+    ['dumingu', 'sigunda-fera', 'tersa-fera', 'kuarta-fera', 'kinta-fera', 'sesta-fera', 'sabadu'],
+    ['du', 'si', 'te', 'ku', 'ki', 'se', 'sa']
+  ],
+  [
+    ['D', 'S', 'T', 'K', 'K', 'S', 'S'], ['dum', 'sig', 'ter', 'kua', 'kin', 'ses', 'sab'],
+    ['dumingu', 'sigunda-fera', 'tersa-fera', 'kuarta-fera', 'kinta-fera', 'sesta-fera', 'sábadu'],
+    ['du', 'si', 'te', 'ku', 'ki', 'se', 'sa']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Otu', 'Nuv', 'Diz'],
+    [
+      'Janeru', 'Febreru', 'Marsu', 'Abril', 'Maiu', 'Junhu', 'Julhu', 'Agostu', 'Setenbru',
+      'Otubru', 'Nuvenbru', 'Dizenbru'
+    ]
+  ],
+  u, [['AK', 'DK'], u, ['Antis di Kristu', 'Dispos di Kristu']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd \'di\' MMMM \'di\' y', 'EEEE, d \'di\' MMMM \'di\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '​', 'Skudu Kabuverdianu',
+  {'AUD': ['AU$', '$'], 'CVE': ['​'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/khq.ts b/packages/common/locales/khq.ts
new file mode 100644
index 000000000000..d80d19eabe1d
--- /dev/null
+++ b/packages/common/locales/khq.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'khq', [['Adduha', 'Aluula'], u, u], u,
+  [
+    ['H', 'T', 'T', 'L', 'L', 'L', 'S'], ['Alh', 'Ati', 'Ata', 'Ala', 'Alm', 'Alj', 'Ass'],
+    ['Alhadi', 'Atini', 'Atalata', 'Alarba', 'Alhamiisa', 'Aljuma', 'Assabdu'],
+    ['Alh', 'Ati', 'Ata', 'Ala', 'Alm', 'Alj', 'Ass']
+  ],
+  u,
+  [
+    ['Ž', 'F', 'M', 'A', 'M', 'Ž', 'Ž', 'U', 'S', 'O', 'N', 'D'],
+    ['Žan', 'Fee', 'Mar', 'Awi', 'Me', 'Žuw', 'Žuy', 'Ut', 'Sek', 'Okt', 'Noo', 'Dee'],
+    [
+      'Žanwiye', 'Feewiriye', 'Marsi', 'Awiril', 'Me', 'Žuweŋ', 'Žuyye', 'Ut', 'Sektanbur',
+      'Oktoobur', 'Noowanbur', 'Deesanbur'
+    ]
+  ],
+  u, [['IJ', 'IZ'], u, ['Isaa jine', 'Isaa jamanoo']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'CFA', 'CFA Fraŋ (BCEAO)',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ki.ts b/packages/common/locales/ki.ts
new file mode 100644
index 000000000000..717c7883de23
--- /dev/null
+++ b/packages/common/locales/ki.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ki', [['Kiroko', 'Hwaĩ-inĩ'], u, u], u,
+  [
+    ['K', 'N', 'N', 'N', 'A', 'N', 'N'], ['KMA', 'NTT', 'NMN', 'NMT', 'ART', 'NMA', 'NMM'],
+    ['Kiumia', 'Njumatatũ', 'Njumaine', 'Njumatana', 'Aramithi', 'Njumaa', 'Njumamothi'],
+    ['KMA', 'NTT', 'NMN', 'NMT', 'ART', 'NMA', 'NMM']
+  ],
+  u,
+  [
+    ['J', 'K', 'G', 'K', 'G', 'G', 'M', 'K', 'K', 'I', 'I', 'D'],
+    ['JEN', 'WKR', 'WGT', 'WKN', 'WTN', 'WTD', 'WMJ', 'WNN', 'WKD', 'WIK', 'WMW', 'DIT'],
+    [
+      'Njenuarĩ', 'Mwere wa kerĩ', 'Mwere wa gatatũ', 'Mwere wa kana', 'Mwere wa gatano',
+      'Mwere wa gatandatũ', 'Mwere wa mũgwanja', 'Mwere wa kanana', 'Mwere wa kenda',
+      'Mwere wa ikũmi', 'Mwere wa ikũmi na ũmwe', 'Ndithemba'
+    ]
+  ],
+  u, [['MK', 'TK'], u, ['Mbere ya Kristo', 'Thutha wa Kristo']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Ciringi ya Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/kk.ts b/packages/common/locales/kk.ts
new file mode 100644
index 000000000000..85ae4a07d4ee
--- /dev/null
+++ b/packages/common/locales/kk.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'kk', [['AM', 'PM'], u, u], u,
+  [
+    ['Ж', 'Д', 'С', 'С', 'Б', 'Ж', 'С'],
+    ['Жс', 'Дс', 'Сс', 'Ср', 'Бс', 'Жм', 'Сб'],
+    [
+      'жексенбі', 'дүйсенбі', 'сейсенбі', 'сәрсенбі',
+      'бейсенбі', 'жұма', 'сенбі'
+    ],
+    ['Жс', 'Дс', 'Сс', 'Ср', 'Бс', 'Жм', 'Сб']
+  ],
+  [
+    ['Ж', 'Д', 'С', 'С', 'Б', 'Ж', 'С'],
+    ['Жс', 'Дс', 'Сс', 'Ср', 'Бс', 'Жм', 'Сб'],
+    [
+      'Жексенбі', 'Дүйсенбі', 'Сейсенбі', 'Сәрсенбі',
+      'Бейсенбі', 'Жұма', 'Сенбі'
+    ],
+    ['Жс', 'Дс', 'Сс', 'Ср', 'Бс', 'Жм', 'Сб']
+  ],
+  [
+    ['Қ', 'А', 'Н', 'С', 'М', 'М', 'Ш', 'Т', 'Қ', 'Қ', 'Қ', 'Ж'],
+    [
+      'қаң.', 'ақп.', 'нау.', 'сәу.', 'мам.', 'мау.', 'шіл.', 'там.',
+      'қыр.', 'қаз.', 'қар.', 'жел.'
+    ],
+    [
+      'қаңтар', 'ақпан', 'наурыз', 'сәуір', 'мамыр', 'маусым',
+      'шілде', 'тамыз', 'қыркүйек', 'қазан', 'қараша',
+      'желтоқсан'
+    ]
+  ],
+  [
+    ['Қ', 'А', 'Н', 'С', 'М', 'М', 'Ш', 'Т', 'Қ', 'Қ', 'Қ', 'Ж'],
+    [
+      'Қаң.', 'Ақп.', 'Нау.', 'Сәу.', 'Мам.', 'Мау.', 'Шіл.', 'Там.',
+      'Қыр.', 'Қаз.', 'Қар.', 'Жел.'
+    ],
+    [
+      'Қаңтар', 'Ақпан', 'Наурыз', 'Сәуір', 'Мамыр', 'Маусым',
+      'Шілде', 'Тамыз', 'Қыркүйек', 'Қазан', 'Қараша',
+      'Желтоқсан'
+    ]
+  ],
+  [
+    ['б.з.д.', 'б.з.'], u,
+    ['Біздің заманымызға дейін', 'біздің заманымыз']
+  ],
+  1, [6, 0], ['dd.MM.yy', 'y \'ж\'. dd MMM', 'y \'ж\'. d MMMM', 'y \'ж\'. d MMMM, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'сан емес', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '₸', 'Қазақстан теңгесі',
+  {'JPY': ['JP¥', '¥'], 'KZT': ['₸'], 'RUB': ['₽'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/kkj.ts b/packages/common/locales/kkj.ts
new file mode 100644
index 000000000000..ba861082bec9
--- /dev/null
+++ b/packages/common/locales/kkj.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'kkj', [['AM', 'PM'], u, u], u,
+  [
+    ['so', 'lu', 'ma', 'mɛ', 'ye', 'va', 'ms'],
+    ['sɔndi', 'lundi', 'mardi', 'mɛrkɛrɛdi', 'yedi', 'vaŋdɛrɛdi', 'mɔnɔ sɔndi'], u, u
+  ],
+  [
+    ['so', 'lu', 'ma', 'mɛ', 'ye', 'va', 'ms'],
+    ['sɔndi', 'lundi', 'mardi', 'mɛrkɛrɛdi', 'yedi', 'vaŋdɛrɛdi', 'mɔnɔ sɔndi'], u,
+    ['so', 'lu', 'ma', 'mɛ', 'ye', 'va', 'ms']
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'pamba', 'wanja', 'mbiyɔ mɛndoŋgɔ', 'Nyɔlɔmbɔŋgɔ', 'Mɔnɔ ŋgbanja',
+      'Nyaŋgwɛ ŋgbanja', 'kuŋgwɛ', 'fɛ', 'njapi', 'nyukul', '11', 'ɓulɓusɛ'
+    ],
+    u
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['dd/MM y', 'd MMM y', 'd MMMM y', 'EEEE dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'FCFA', 'Franc CFA',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/kl.ts b/packages/common/locales/kl.ts
new file mode 100644
index 000000000000..9ba909b966ef
--- /dev/null
+++ b/packages/common/locales/kl.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'kl', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['sab', 'ata', 'mar', 'pin', 'sis', 'tal', 'arf'],
+    [
+      'sabaat', 'ataasinngorneq', 'marlunngorneq', 'pingasunngorneq', 'sisamanngorneq',
+      'tallimanngorneq', 'arfininngorneq'
+    ],
+    ['sab', 'ata', 'mar', 'pin', 'sis', 'tal', 'arf']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'januari', 'februari', 'martsi', 'aprili', 'maji', 'juni', 'juli', 'augustusi', 'septemberi',
+      'oktoberi', 'novemberi', 'decemberi'
+    ]
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH.mm', 'HH.mm.ss', 'HH.mm.ss z', 'HH.mm.ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤#,##0.00;¤-#,##0.00', '#E0'], 'kr.', 'DKK',
+  {'DKK': ['kr.', 'kr'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/kln.ts b/packages/common/locales/kln.ts
new file mode 100644
index 000000000000..b3a1e331d0a0
--- /dev/null
+++ b/packages/common/locales/kln.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'kln', [['krn', 'koosk'], u, ['karoon', 'kooskoliny']], [['krn', 'koosk'], u, u],
+  [
+    ['T', 'T', 'O', 'S', 'A', 'M', 'L'], ['Kts', 'Kot', 'Koo', 'Kos', 'Koa', 'Kom', 'Kol'],
+    ['Kotisap', 'Kotaai', 'Koaeng’', 'Kosomok', 'Koang’wan', 'Komuut', 'Kolo'],
+    ['Kts', 'Kot', 'Koo', 'Kos', 'Koa', 'Kom', 'Kol']
+  ],
+  u,
+  [
+    ['M', 'N', 'T', 'I', 'M', 'P', 'N', 'R', 'B', 'E', 'K', 'K'],
+    ['Mul', 'Ngat', 'Taa', 'Iwo', 'Mam', 'Paa', 'Nge', 'Roo', 'Bur', 'Epe', 'Kpt', 'Kpa'],
+    [
+      'Mulgul', 'Ng’atyaato', 'Kiptaamo', 'Iwootkuut', 'Mamuut', 'Paagi', 'Ng’eiyeet',
+      'Rooptui', 'Bureet', 'Epeeso', 'Kipsuunde ne taai', 'Kipsuunde nebo aeng’'
+    ]
+  ],
+  u, [['AM', 'KO'], u, ['Amait kesich Jesu', 'Kokakesich Jesu']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Silingitab ya Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/km.ts b/packages/common/locales/km.ts
new file mode 100644
index 000000000000..fa57727e9195
--- /dev/null
+++ b/packages/common/locales/km.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'km', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['អ', 'ច', 'អ', 'ព', 'ព', 'ស', 'ស'],
+    [
+      'អាទិត្យ', 'ច័ន្ទ', 'អង្គារ', 'ពុធ',
+      'ព្រហស្បតិ៍', 'សុក្រ', 'សៅរ៍'
+    ],
+    u, ['អា', 'ច', 'អ', 'ពុ', 'ព្រ', 'សុ', 'ស']
+  ],
+  u,
+  [
+    ['ម', 'ក', 'ម', 'ម', 'ឧ', 'ម', 'ក', 'ស', 'ក', 'ត', 'វ', 'ធ'],
+    [
+      'មករា', 'កុម្ភៈ', 'មីនា', 'មេសា', 'ឧសភា',
+      'មិថុនា', 'កក្កដា', 'សីហា', 'កញ្ញា', 'តុលា',
+      'វិច្ឆិកា', 'ធ្នូ'
+    ],
+    u
+  ],
+  u,
+  [
+    ['មុន គ.ស.', 'គ.ស.'], u,
+    ['មុន​គ្រិស្តសករាជ', 'គ្រិស្តសករាជ']
+  ],
+  0, [6, 0], ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'],
+  ['{1}, {0}', u, '{1} នៅ​ម៉ោង {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], '៛', 'រៀល​កម្ពុជា',
+  {'JPY': ['JP¥', '¥'], 'KHR': ['៛'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/kn.ts b/packages/common/locales/kn.ts
new file mode 100644
index 000000000000..8d5da30dbf1a
--- /dev/null
+++ b/packages/common/locales/kn.ts
@@ -0,0 +1,82 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'kn', [['ಪೂ', 'ಅ'], ['ಪೂರ್ವಾಹ್ನ', 'ಅಪರಾಹ್ನ'], u],
+  [['ಪೂರ್ವಾಹ್ನ', 'ಅಪರಾಹ್ನ'], u, u],
+  [
+    ['ಭಾ', 'ಸೋ', 'ಮಂ', 'ಬು', 'ಗು', 'ಶು', 'ಶ'],
+    [
+      'ಭಾನು', 'ಸೋಮ', 'ಮಂಗಳ', 'ಬುಧ', 'ಗುರು', 'ಶುಕ್ರ',
+      'ಶನಿ'
+    ],
+    [
+      'ಭಾನುವಾರ', 'ಸೋಮವಾರ', 'ಮಂಗಳವಾರ', 'ಬುಧವಾರ',
+      'ಗುರುವಾರ', 'ಶುಕ್ರವಾರ', 'ಶನಿವಾರ'
+    ],
+    [
+      'ಭಾನು', 'ಸೋಮ', 'ಮಂಗಳ', 'ಬುಧ', 'ಗುರು', 'ಶುಕ್ರ',
+      'ಶನಿ'
+    ]
+  ],
+  u,
+  [
+    [
+      'ಜ', 'ಫೆ', 'ಮಾ', 'ಏ', 'ಮೇ', 'ಜೂ', 'ಜು', 'ಆ', 'ಸೆ', 'ಅ', 'ನ',
+      'ಡಿ'
+    ],
+    [
+      'ಜನವರಿ', 'ಫೆಬ್ರವರಿ', 'ಮಾರ್ಚ್', 'ಏಪ್ರಿ',
+      'ಮೇ', 'ಜೂನ್', 'ಜುಲೈ', 'ಆಗ', 'ಸೆಪ್ಟೆಂ',
+      'ಅಕ್ಟೋ', 'ನವೆಂ', 'ಡಿಸೆಂ'
+    ],
+    [
+      'ಜನವರಿ', 'ಫೆಬ್ರವರಿ', 'ಮಾರ್ಚ್', 'ಏಪ್ರಿಲ್',
+      'ಮೇ', 'ಜೂನ್', 'ಜುಲೈ', 'ಆಗಸ್ಟ್',
+      'ಸೆಪ್ಟೆಂಬರ್', 'ಅಕ್ಟೋಬರ್', 'ನವೆಂಬರ್',
+      'ಡಿಸೆಂಬರ್'
+    ]
+  ],
+  [
+    [
+      'ಜ', 'ಫೆ', 'ಮಾ', 'ಏ', 'ಮೇ', 'ಜೂ', 'ಜು', 'ಆ', 'ಸೆ', 'ಅ', 'ನ',
+      'ಡಿ'
+    ],
+    [
+      'ಜನ', 'ಫೆಬ್ರ', 'ಮಾರ್ಚ್', 'ಏಪ್ರಿ', 'ಮೇ',
+      'ಜೂನ್', 'ಜುಲೈ', 'ಆಗ', 'ಸೆಪ್ಟೆಂ', 'ಅಕ್ಟೋ',
+      'ನವೆಂ', 'ಡಿಸೆಂ'
+    ],
+    [
+      'ಜನವರಿ', 'ಫೆಬ್ರವರಿ', 'ಮಾರ್ಚ್', 'ಏಪ್ರಿಲ್',
+      'ಮೇ', 'ಜೂನ್', 'ಜುಲೈ', 'ಆಗಸ್ಟ್',
+      'ಸೆಪ್ಟೆಂಬರ್', 'ಅಕ್ಟೋಬರ್', 'ನವೆಂಬರ್',
+      'ಡಿಸೆಂಬರ್'
+    ]
+  ],
+  [
+    ['ಕ್ರಿ.ಪೂ', 'ಕ್ರಿ.ಶ'], u,
+    ['ಕ್ರಿಸ್ತ ಪೂರ್ವ', 'ಕ್ರಿಸ್ತ ಶಕ']
+  ],
+  0, [0, 0], ['d/M/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['hh:mm a', 'hh:mm:ss a', 'hh:mm:ss a z', 'hh:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₹', 'ಭಾರತೀಯ ರೂಪಾಯಿ',
+  {'JPY': ['JP¥', '¥'], 'RON': [u, 'ಲೀ'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/ko-KP.ts b/packages/common/locales/ko-KP.ts
new file mode 100644
index 000000000000..d16ed35bbcf7
--- /dev/null
+++ b/packages/common/locales/ko-KP.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ko-KP', [['AM', 'PM'], u, ['오전', '오후']], u,
+  [
+    ['일', '월', '화', '수', '목', '금', '토'], u,
+    ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
+    ['일', '월', '화', '수', '목', '금', '토']
+  ],
+  u,
+  [
+    [
+      '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월',
+      '12월'
+    ],
+    u, u
+  ],
+  u, [['BC', 'AD'], u, ['기원전', '서기']], 1, [6, 0],
+  ['yy. M. d.', 'y. M. d.', 'y년 M월 d일', 'y년 M월 d일 EEEE'],
+  ['a h:mm', 'a h:mm:ss', 'a h시 m분 s초 z', 'a h시 m분 s초 zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'KPW', '조선 민주주의 인민 공화국 원', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'RON': [u, 'L'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ko.ts b/packages/common/locales/ko.ts
new file mode 100644
index 000000000000..d8a6ce36463f
--- /dev/null
+++ b/packages/common/locales/ko.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ko', [['AM', 'PM'], u, ['오전', '오후']], u,
+  [
+    ['일', '월', '화', '수', '목', '금', '토'], u,
+    ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
+    ['일', '월', '화', '수', '목', '금', '토']
+  ],
+  u,
+  [
+    [
+      '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월',
+      '12월'
+    ],
+    u, u
+  ],
+  u, [['BC', 'AD'], u, ['기원전', '서기']], 0, [6, 0],
+  ['yy. M. d.', 'y. M. d.', 'y년 M월 d일', 'y년 M월 d일 EEEE'],
+  ['a h:mm', 'a h:mm:ss', 'a h시 m분 s초 z', 'a h시 m분 s초 zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₩', '대한민국 원', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'RON': [u, 'L'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/kok.ts b/packages/common/locales/kok.ts
new file mode 100644
index 000000000000..a31b2e4f9cdb
--- /dev/null
+++ b/packages/common/locales/kok.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'kok', [['म.पू.', 'म.नं.'], u, u], u,
+  [
+    ['आ', 'सो', 'मं', 'बु', 'गु', 'शु', 'शे'],
+    [
+      'आयतार', 'सोमार', 'मंगळार', 'बुधवार',
+      'गुरुवार', 'शुक्रार', 'शेनवार'
+    ],
+    u,
+    [
+      'आय', 'सोम', 'मंगळ', 'बुध', 'गुरु', 'शुक्र',
+      'शेन'
+    ]
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'जानेवारी', 'फेब्रुवारी', 'मार्च',
+      'एप्रिल', 'मे', 'जून', 'जुलाय', 'आगोस्त',
+      'सप्टेंबर', 'ऑक्टोबर', 'नोव्हेंबर',
+      'डिसेंबर'
+    ],
+    u
+  ],
+  u, [['क्रिस्तपूर्व', 'क्रिस्तशखा'], u, u], 0, [0, 0],
+  ['d-M-yy', 'dd-MM-y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], '₹', 'INR',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ks.ts b/packages/common/locales/ks.ts
new file mode 100644
index 000000000000..726777e978e1
--- /dev/null
+++ b/packages/common/locales/ks.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ks', [['AM', 'PM'], u, u], u,
+  [
+    ['ا', 'ژ', 'ب', 'ب', 'ب', 'ج', 'ب'],
+    [
+      'آتھوار', 'ژٔنٛدٕروار', 'بوٚموار', 'بودوار',
+      'برٛٮ۪سوار', 'جُمہ', 'بٹوار'
+    ],
+    [
+      'اَتھوار', 'ژٔنٛدرٕروار', 'بوٚموار', 'بودوار',
+      'برٛٮ۪سوار', 'جُمہ', 'بٹوار'
+    ],
+    [
+      'آتھوار', 'ژٔنٛدٕروار', 'بوٚموار', 'بودوار',
+      'برٛٮ۪سوار', 'جُمہ', 'بٹوار'
+    ]
+  ],
+  u,
+  [
+    ['ج', 'ف', 'م', 'ا', 'م', 'ج', 'ج', 'ا', 'س', 'س', 'ا', 'ن'],
+    [
+      'جنؤری', 'فرؤری', 'مارٕچ', 'اپریل', 'میٔ', 'جوٗن',
+      'جوٗلایی', 'اگست', 'ستمبر', 'اکتوٗبر', 'نومبر', 'دسمبر'
+    ],
+    u
+  ],
+  u, [['بی سی', 'اے ڈی'], u, ['قبٕل مسیٖح', 'عیٖسوی سنہٕ']], 0, [0, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], '₹', 'ہِندُستٲنۍ رۄپَے',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ksb.ts b/packages/common/locales/ksb.ts
new file mode 100644
index 000000000000..7781ede9c2a1
--- /dev/null
+++ b/packages/common/locales/ksb.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ksb', [['makeo', 'nyiaghuo'], u, u], u,
+  [
+    ['2', '3', '4', '5', 'A', 'I', '1'], ['Jpi', 'Jtt', 'Jmn', 'Jtn', 'Alh', 'Iju', 'Jmo'],
+    ['Jumaapii', 'Jumaatatu', 'Jumaane', 'Jumaatano', 'Alhamisi', 'Ijumaa', 'Jumaamosi'],
+    ['Jpi', 'Jtt', 'Jmn', 'Jtn', 'Alh', 'Iju', 'Jmo']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januali', 'Febluali', 'Machi', 'Aplili', 'Mei', 'Juni', 'Julai', 'Agosti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Klisto', 'Baada ya Klisto']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'TSh', 'shilingi ya Tanzania',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ksf.ts b/packages/common/locales/ksf.ts
new file mode 100644
index 000000000000..8acce433ffd2
--- /dev/null
+++ b/packages/common/locales/ksf.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ksf', [['sárúwá', 'cɛɛ́nko'], u, u], u,
+  [
+    ['s', 'l', 'm', 'm', 'j', 'j', 's'], ['sɔ́n', 'lǝn', 'maa', 'mɛk', 'jǝǝ', 'júm', 'sam'],
+    ['sɔ́ndǝ', 'lǝndí', 'maadí', 'mɛkrɛdí', 'jǝǝdí', 'júmbá', 'samdí'],
+    ['sɔ́n', 'lǝn', 'maa', 'mɛk', 'jǝǝ', 'júm', 'sam']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['ŋ1', 'ŋ2', 'ŋ3', 'ŋ4', 'ŋ5', 'ŋ6', 'ŋ7', 'ŋ8', 'ŋ9', 'ŋ10', 'ŋ11', 'ŋ12'],
+    [
+      'ŋwíí a ntɔ́ntɔ', 'ŋwíí akǝ bɛ́ɛ', 'ŋwíí akǝ ráá', 'ŋwíí akǝ nin',
+      'ŋwíí akǝ táan', 'ŋwíí akǝ táafɔk', 'ŋwíí akǝ táabɛɛ',
+      'ŋwíí akǝ táaraa', 'ŋwíí akǝ táanin', 'ŋwíí akǝ ntɛk',
+      'ŋwíí akǝ ntɛk di bɔ́k', 'ŋwíí akǝ ntɛk di bɛ́ɛ'
+    ]
+  ],
+  u, [['d.Y.', 'k.Y.'], u, ['di Yɛ́sus aká yálɛ', 'cámɛɛn kǝ kǝbɔpka Y']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FCFA', 'fráŋ',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ksh.ts b/packages/common/locales/ksh.ts
new file mode 100644
index 000000000000..a182a3503f6e
--- /dev/null
+++ b/packages/common/locales/ksh.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ksh', [['v.M.', 'n.M.'], u, ['Uhr vörmiddaachs', 'Uhr nommendaachs']],
+  [['v.M.', 'n.M.'], u, ['Vörmeddaach', 'Nommendaach']],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['Su.', 'Mo.', 'Di.', 'Me.', 'Du.', 'Fr.', 'Sa.'],
+    ['Sunndaach', 'Mohndaach', 'Dinnsdaach', 'Metwoch', 'Dunnersdaach', 'Friidaach', 'Samsdaach'],
+    ['Su', 'Mo', 'Di', 'Me', 'Du', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'O', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Fäb', 'Mäz', 'Apr', 'Mai', 'Jun', 'Jul', 'Ouj', 'Säp', 'Okt', 'Nov', 'Dez'],
+    [
+      'Jannewa', 'Fäbrowa', 'Määz', 'Aprell', 'Mai', 'Juuni', 'Juuli', 'Oujoß', 'Septämber',
+      'Oktohber', 'Novämber', 'Dezämber'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'O', 'S', 'O', 'N', 'D'],
+    [
+      'Jan.', 'Fäb.', 'Mäz.', 'Apr.', 'Mai', 'Jun.', 'Jul.', 'Ouj.', 'Säp.', 'Okt.', 'Nov.',
+      'Dez.'
+    ],
+    [
+      'Jannewa', 'Fäbrowa', 'Määz', 'Aprell', 'Mai', 'Juuni', 'Juuli', 'Oujoß', 'Septämber',
+      'Oktohber', 'Novämber', 'Dezämber'
+    ]
+  ],
+  [['vC', 'nC'], ['v. Chr.', 'n. Chr.'], ['vür Krestos', 'noh Krestos']], 1, [6, 0],
+  ['d. M. y', 'd. MMM. y', 'd. MMMM y', 'EEEE, \'dä\' d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '×10^', '×', '‰', '∞', '¤¤¤', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/kw.ts b/packages/common/locales/kw.ts
new file mode 100644
index 000000000000..d55b854f99fe
--- /dev/null
+++ b/packages/common/locales/kw.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  return 5;
+}
+
+export default [
+  'kw', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sul', 'Lun', 'Mth', 'Mhr', 'Yow', 'Gwe', 'Sad'],
+    ['dy Sul', 'dy Lun', 'dy Meurth', 'dy Merher', 'dy Yow', 'dy Gwener', 'dy Sadorn'],
+    ['Sul', 'Lun', 'Mth', 'Mhr', 'Yow', 'Gwe', 'Sad']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Gen', 'Hwe', 'Meu', 'Ebr', 'Me', 'Met', 'Gor', 'Est', 'Gwn', 'Hed', 'Du', 'Kev'],
+    [
+      'mis Genver', 'mis Hwevrer', 'mis Meurth', 'mis Ebrel', 'mis Me', 'mis Metheven',
+      'mis Gortheren', 'mis Est', 'mis Gwynngala', 'mis Hedra', 'mis Du', 'mis Kevardhu'
+    ]
+  ],
+  u, [['RC', 'AD'], u, u], 1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'GBP',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ky.ts b/packages/common/locales/ky.ts
new file mode 100644
index 000000000000..07b1394ab22b
--- /dev/null
+++ b/packages/common/locales/ky.ts
@@ -0,0 +1,97 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ky', [['тң', 'тк'], u, ['таңкы', 'түштөн кийинки']], u,
+  [
+    ['Ж', 'Д', 'Ш', 'Ш', 'Б', 'Ж', 'И'],
+    ['жек.', 'дүй.', 'шейш.', 'шарш.', 'бейш.', 'жума', 'ишм.'],
+    [
+      'жекшемби', 'дүйшөмбү', 'шейшемби', 'шаршемби',
+      'бейшемби', 'жума', 'ишемби'
+    ],
+    ['жек.', 'дүй.', 'шейш.', 'шарш.', 'бейш.', 'жума', 'ишм.']
+  ],
+  [
+    ['Ж', 'Д', 'Ш', 'Ш', 'Б', 'Ж', 'И'],
+    ['жек.', 'дүй.', 'шейш.', 'шарш.', 'бейш.', 'жума', 'ишм.'],
+    [
+      'жекшемби', 'дүйшөмбү', 'шейшемби', 'шаршемби',
+      'бейшемби', 'жума', 'ишемби'
+    ],
+    ['жк', 'дш.', 'шш.', 'шр.', 'бш.', 'жм.', 'иш.']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'фев.', 'мар.', 'апр.', 'май', 'июн.', 'июл.', 'авг.',
+      'сен.', 'окт.', 'ноя.', 'дек.'
+    ],
+    [
+      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
+      'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь',
+      'декабрь'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен',
+      'Окт', 'Ноя', 'Дек'
+    ],
+    [
+      'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
+      'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь',
+      'Декабрь'
+    ]
+  ],
+  [
+    ['б.з.ч.', 'б.з.'], u,
+    ['биздин заманга чейин', 'биздин заман']
+  ],
+  1, [6, 0], ['d/M/yy', 'y-\'ж\'., d-MMM', 'y-\'ж\'., d-MMMM', 'y-\'ж\'., d-MMMM, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'сан эмес', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'сом', 'Кыргызстан сому', {
+    'AUD': [u, '$'],
+    'BMD': [u, 'BD$'],
+    'BRL': [u, 'R$'],
+    'BSD': [u, 'B$'],
+    'BZD': [u, 'BZ$'],
+    'CAD': [u, 'C$'],
+    'DOP': [u, 'RD$'],
+    'EGP': [u, 'LE'],
+    'GBP': [u, '£'],
+    'HKD': [u, 'HK$'],
+    'HRK': [u, 'Kn'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JMD': [u, 'J$'],
+    'JPY': ['JP¥', '¥'],
+    'KGS': ['сом'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'THB': ['฿'],
+    'TTD': [u, 'TT$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/lag.ts b/packages/common/locales/lag.ts
new file mode 100644
index 000000000000..d28e2d5a88df
--- /dev/null
+++ b/packages/common/locales/lag.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (n === 0) return 0;
+  if ((i === 0 || i === 1) && !(n === 0)) return 1;
+  return 5;
+}
+
+export default [
+  'lag', [['TOO', 'MUU'], u, u], u,
+  [
+    ['P', 'T', 'E', 'O', 'A', 'I', 'M'],
+    ['Píili', 'Táatu', 'Íne', 'Táano', 'Alh', 'Ijm', 'Móosi'],
+    ['Jumapíiri', 'Jumatátu', 'Jumaíne', 'Jumatáano', 'Alamíisi', 'Ijumáa', 'Jumamóosi'],
+    ['Píili', 'Táatu', 'Íne', 'Táano', 'Alh', 'Ijm', 'Móosi']
+  ],
+  u,
+  [
+    ['F', 'N', 'K', 'I', 'I', 'I', 'M', 'V', 'S', 'I', 'S', 'S'],
+    [
+      'Fúngatɨ', 'Naanɨ', 'Keenda', 'Ikúmi', 'Inyambala', 'Idwaata', 'Mʉʉnchɨ', 'Vɨɨrɨ',
+      'Saatʉ', 'Inyi', 'Saano', 'Sasatʉ'
+    ],
+    [
+      'Kʉfúngatɨ', 'Kʉnaanɨ', 'Kʉkeenda', 'Kwiikumi', 'Kwiinyambála', 'Kwiidwaata',
+      'Kʉmʉʉnchɨ', 'Kʉvɨɨrɨ', 'Kʉsaatʉ', 'Kwiinyi', 'Kʉsaano', 'Kʉsasatʉ'
+    ]
+  ],
+  u, [['KSA', 'KA'], u, ['Kɨrɨsitʉ sɨ anavyaal', 'Kɨrɨsitʉ akavyaalwe']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'TSh', 'Shilíingi ya Taansanía',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/lb.ts b/packages/common/locales/lb.ts
new file mode 100644
index 000000000000..d06f54bf5828
--- /dev/null
+++ b/packages/common/locales/lb.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'lb', [['mo.', 'nomë.'], ['moies', 'nomëttes'], u], [['moies', 'nomëttes'], u, u],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
+    ['Son.', 'Méi.', 'Dën.', 'Mët.', 'Don.', 'Fre.', 'Sam.'],
+    ['Sonndeg', 'Méindeg', 'Dënschdeg', 'Mëttwoch', 'Donneschdeg', 'Freideg', 'Samschdeg'],
+    ['So.', 'Mé.', 'Dë.', 'Më.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['Son', 'Méi', 'Dën', 'Mët', 'Don', 'Fre', 'Sam'],
+    ['Sonndeg', 'Méindeg', 'Dënschdeg', 'Mëttwoch', 'Donneschdeg', 'Freideg', 'Samschdeg'],
+    ['So.', 'Mé.', 'Dë.', 'Më.', 'Do.', 'Fr.', 'Sa.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'Jan.', 'Feb.', 'Mäe.', 'Abr.', 'Mee', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'
+    ],
+    [
+      'Januar', 'Februar', 'Mäerz', 'Abrëll', 'Mee', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mäe', 'Abr', 'Mee', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    [
+      'Januar', 'Februar', 'Mäerz', 'Abrëll', 'Mee', 'Juni', 'Juli', 'August', 'September',
+      'Oktober', 'November', 'Dezember'
+    ]
+  ],
+  [['v. Chr.', 'n. Chr.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'd. MMM y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro',
+  {'ATS': ['öS'], 'AUD': ['AU$', '$'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/lg.ts b/packages/common/locales/lg.ts
new file mode 100644
index 000000000000..b936b595bf50
--- /dev/null
+++ b/packages/common/locales/lg.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'lg', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'B', 'L', 'L', 'L', 'L', 'L'], ['Sab', 'Bal', 'Lw2', 'Lw3', 'Lw4', 'Lw5', 'Lw6'],
+    ['Sabbiiti', 'Balaza', 'Lwakubiri', 'Lwakusatu', 'Lwakuna', 'Lwakutaano', 'Lwamukaaga'],
+    ['Sab', 'Bal', 'Lw2', 'Lw3', 'Lw4', 'Lw5', 'Lw6']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apu', 'Maa', 'Juu', 'Jul', 'Agu', 'Seb', 'Oki', 'Nov', 'Des'],
+    [
+      'Janwaliyo', 'Febwaliyo', 'Marisi', 'Apuli', 'Maayi', 'Juuni', 'Julaayi', 'Agusito',
+      'Sebuttemba', 'Okitobba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['Kulisito nga tannaza', 'Bukya Kulisito Azaal']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'USh', 'Silingi eya Yuganda',
+  {'JPY': ['JP¥', '¥'], 'UGX': ['USh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/lkt.ts b/packages/common/locales/lkt.ts
new file mode 100644
index 000000000000..cd6c9d7415e9
--- /dev/null
+++ b/packages/common/locales/lkt.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'lkt', [['AM', 'PM'], u, u], u,
+  [
+    ['A', 'W', 'N', 'Y', 'T', 'Z', 'O'],
+    [
+      'Aŋpétuwakȟaŋ', 'Aŋpétuwaŋži', 'Aŋpétunuŋpa', 'Aŋpétuyamni', 'Aŋpétutopa',
+      'Aŋpétuzaptaŋ', 'Owáŋgyužažapi'
+    ],
+    u, u
+  ],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    [
+      'Aŋpétuwakȟaŋ', 'Aŋpétuwaŋži', 'Aŋpétunuŋpa', 'Aŋpétuyamni', 'Aŋpétutopa',
+      'Aŋpétuzaptaŋ', 'Owáŋgyužažapi'
+    ],
+    u, u
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'Wiótheȟika Wí', 'Thiyóȟeyuŋka Wí', 'Ištáwičhayazaŋ Wí', 'Pȟežítȟo Wí',
+      'Čhaŋwápetȟo Wí', 'Wípazukȟa-wašté Wí', 'Čhaŋpȟásapa Wí', 'Wasútȟuŋ Wí',
+      'Čhaŋwápeǧi Wí', 'Čhaŋwápe-kasná Wí', 'Waníyetu Wí', 'Tȟahékapšuŋ Wí'
+    ],
+    u
+  ],
+  u, [['BCE', 'CE'], u, u], 0, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '$', 'USD', {'JPY': ['JP¥', '¥']}, plural
+];
diff --git a/packages/common/locales/ln-AO.ts b/packages/common/locales/ln-AO.ts
new file mode 100644
index 000000000000..ef143fac7f31
--- /dev/null
+++ b/packages/common/locales/ln-AO.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'ln-AO', [['ntɔ́ngɔ́', 'mpókwa'], u, u], u,
+  [
+    ['e', 'y', 'm', 'm', 'm', 'm', 'p'], ['eye', 'ybo', 'mbl', 'mst', 'min', 'mtn', 'mps'],
+    [
+      'eyenga', 'mokɔlɔ mwa yambo', 'mokɔlɔ mwa míbalé', 'mokɔlɔ mwa mísáto',
+      'mokɔlɔ ya mínéi', 'mokɔlɔ ya mítáno', 'mpɔ́sɔ'
+    ],
+    ['eye', 'ybo', 'mbl', 'mst', 'min', 'mtn', 'mps']
+  ],
+  u,
+  [
+    ['y', 'f', 'm', 'a', 'm', 'y', 'y', 'a', 's', 'ɔ', 'n', 'd'],
+    ['yan', 'fbl', 'msi', 'apl', 'mai', 'yun', 'yul', 'agt', 'stb', 'ɔtb', 'nvb', 'dsb'],
+    [
+      'sánzá ya yambo', 'sánzá ya míbalé', 'sánzá ya mísáto', 'sánzá ya mínei',
+      'sánzá ya mítáno', 'sánzá ya motóbá', 'sánzá ya nsambo', 'sánzá ya mwambe',
+      'sánzá ya libwa', 'sánzá ya zómi', 'sánzá ya zómi na mɔ̌kɔ́',
+      'sánzá ya zómi na míbalé'
+    ]
+  ],
+  u, [['libóso ya', 'nsima ya Y'], u, ['Yambo ya Yézu Krís', 'Nsima ya Yézu Krís']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'Kz', 'Kwanza ya Angóla',
+  {'AOA': ['Kz'], 'CDF': ['FC'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ln-CF.ts b/packages/common/locales/ln-CF.ts
new file mode 100644
index 000000000000..b0aadfeb1d9c
--- /dev/null
+++ b/packages/common/locales/ln-CF.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'ln-CF', [['ntɔ́ngɔ́', 'mpókwa'], u, u], u,
+  [
+    ['e', 'y', 'm', 'm', 'm', 'm', 'p'], ['eye', 'ybo', 'mbl', 'mst', 'min', 'mtn', 'mps'],
+    [
+      'eyenga', 'mokɔlɔ mwa yambo', 'mokɔlɔ mwa míbalé', 'mokɔlɔ mwa mísáto',
+      'mokɔlɔ ya mínéi', 'mokɔlɔ ya mítáno', 'mpɔ́sɔ'
+    ],
+    ['eye', 'ybo', 'mbl', 'mst', 'min', 'mtn', 'mps']
+  ],
+  u,
+  [
+    ['y', 'f', 'm', 'a', 'm', 'y', 'y', 'a', 's', 'ɔ', 'n', 'd'],
+    ['yan', 'fbl', 'msi', 'apl', 'mai', 'yun', 'yul', 'agt', 'stb', 'ɔtb', 'nvb', 'dsb'],
+    [
+      'sánzá ya yambo', 'sánzá ya míbalé', 'sánzá ya mísáto', 'sánzá ya mínei',
+      'sánzá ya mítáno', 'sánzá ya motóbá', 'sánzá ya nsambo', 'sánzá ya mwambe',
+      'sánzá ya libwa', 'sánzá ya zómi', 'sánzá ya zómi na mɔ̌kɔ́',
+      'sánzá ya zómi na míbalé'
+    ]
+  ],
+  u, [['libóso ya', 'nsima ya Y'], u, ['Yambo ya Yézu Krís', 'Nsima ya Yézu Krís']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FCFA', 'Falánga CFA BEAC',
+  {'CDF': ['FC'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ln-CG.ts b/packages/common/locales/ln-CG.ts
new file mode 100644
index 000000000000..71abf2569b5d
--- /dev/null
+++ b/packages/common/locales/ln-CG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'ln-CG', [['ntɔ́ngɔ́', 'mpókwa'], u, u], u,
+  [
+    ['e', 'y', 'm', 'm', 'm', 'm', 'p'], ['eye', 'ybo', 'mbl', 'mst', 'min', 'mtn', 'mps'],
+    [
+      'eyenga', 'mokɔlɔ mwa yambo', 'mokɔlɔ mwa míbalé', 'mokɔlɔ mwa mísáto',
+      'mokɔlɔ ya mínéi', 'mokɔlɔ ya mítáno', 'mpɔ́sɔ'
+    ],
+    ['eye', 'ybo', 'mbl', 'mst', 'min', 'mtn', 'mps']
+  ],
+  u,
+  [
+    ['y', 'f', 'm', 'a', 'm', 'y', 'y', 'a', 's', 'ɔ', 'n', 'd'],
+    ['yan', 'fbl', 'msi', 'apl', 'mai', 'yun', 'yul', 'agt', 'stb', 'ɔtb', 'nvb', 'dsb'],
+    [
+      'sánzá ya yambo', 'sánzá ya míbalé', 'sánzá ya mísáto', 'sánzá ya mínei',
+      'sánzá ya mítáno', 'sánzá ya motóbá', 'sánzá ya nsambo', 'sánzá ya mwambe',
+      'sánzá ya libwa', 'sánzá ya zómi', 'sánzá ya zómi na mɔ̌kɔ́',
+      'sánzá ya zómi na míbalé'
+    ]
+  ],
+  u, [['libóso ya', 'nsima ya Y'], u, ['Yambo ya Yézu Krís', 'Nsima ya Yézu Krís']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FCFA', 'Falánga CFA BEAC',
+  {'CDF': ['FC'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ln.ts b/packages/common/locales/ln.ts
new file mode 100644
index 000000000000..853f55bc17a5
--- /dev/null
+++ b/packages/common/locales/ln.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'ln', [['ntɔ́ngɔ́', 'mpókwa'], u, u], u,
+  [
+    ['e', 'y', 'm', 'm', 'm', 'm', 'p'], ['eye', 'ybo', 'mbl', 'mst', 'min', 'mtn', 'mps'],
+    [
+      'eyenga', 'mokɔlɔ mwa yambo', 'mokɔlɔ mwa míbalé', 'mokɔlɔ mwa mísáto',
+      'mokɔlɔ ya mínéi', 'mokɔlɔ ya mítáno', 'mpɔ́sɔ'
+    ],
+    ['eye', 'ybo', 'mbl', 'mst', 'min', 'mtn', 'mps']
+  ],
+  u,
+  [
+    ['y', 'f', 'm', 'a', 'm', 'y', 'y', 'a', 's', 'ɔ', 'n', 'd'],
+    ['yan', 'fbl', 'msi', 'apl', 'mai', 'yun', 'yul', 'agt', 'stb', 'ɔtb', 'nvb', 'dsb'],
+    [
+      'sánzá ya yambo', 'sánzá ya míbalé', 'sánzá ya mísáto', 'sánzá ya mínei',
+      'sánzá ya mítáno', 'sánzá ya motóbá', 'sánzá ya nsambo', 'sánzá ya mwambe',
+      'sánzá ya libwa', 'sánzá ya zómi', 'sánzá ya zómi na mɔ̌kɔ́',
+      'sánzá ya zómi na míbalé'
+    ]
+  ],
+  u, [['libóso ya', 'nsima ya Y'], u, ['Yambo ya Yézu Krís', 'Nsima ya Yézu Krís']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FC', 'Falánga ya Kongó',
+  {'CDF': ['FC'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/lo.ts b/packages/common/locales/lo.ts
new file mode 100644
index 000000000000..ac1285225f91
--- /dev/null
+++ b/packages/common/locales/lo.ts
@@ -0,0 +1,64 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'lo', [['ກທ', 'ຫຼທ'], ['ກ່ອນທ່ຽງ', 'ຫຼັງທ່ຽງ'], u], u,
+  [
+    ['ອາ', 'ຈ', 'ອ', 'ພ', 'ພຫ', 'ສຸ', 'ສ'],
+    [
+      'ອາທິດ', 'ຈັນ', 'ອັງຄານ', 'ພຸດ', 'ພະຫັດ',
+      'ສຸກ', 'ເສົາ'
+    ],
+    [
+      'ວັນອາທິດ', 'ວັນຈັນ', 'ວັນອັງຄານ',
+      'ວັນພຸດ', 'ວັນພະຫັດ', 'ວັນສຸກ',
+      'ວັນເສົາ'
+    ],
+    ['ອາ.', 'ຈ.', 'ອ.', 'ພ.', 'ພຫ.', 'ສຸ.', 'ສ.']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ມ.ກ.', 'ກ.ພ.', 'ມ.ນ.', 'ມ.ສ.', 'ພ.ພ.', 'ມິ.ຖ.', 'ກ.ລ.',
+      'ສ.ຫ.', 'ກ.ຍ.', 'ຕ.ລ.', 'ພ.ຈ.', 'ທ.ວ.'
+    ],
+    [
+      'ມັງກອນ', 'ກຸມພາ', 'ມີນາ', 'ເມສາ',
+      'ພຶດສະພາ', 'ມິຖຸນາ', 'ກໍລະກົດ', 'ສິງຫາ',
+      'ກັນຍາ', 'ຕຸລາ', 'ພະຈິກ', 'ທັນວາ'
+    ]
+  ],
+  u,
+  [
+    ['ກ່ອນ ຄ.ສ.', 'ຄ.ສ.'], u,
+    ['ກ່ອນຄຣິດສັກກະລາດ', 'ຄຣິດສັກກະລາດ']
+  ],
+  0, [6, 0], ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE ທີ d MMMM G y'],
+  [
+    'H:mm', 'H:mm:ss', 'H ໂມງ m ນາທີ ss ວິນາທີ z',
+    'H ໂມງ m ນາທີ ss ວິນາທີ zzzz'
+  ],
+  ['{1}, {0}', u, u, u],
+  [
+    ',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞',
+    'ບໍ່​ແມ່ນ​ໂຕ​ເລກ', ':'
+  ],
+  ['#,##0.###', '#,##0%', '¤#,##0.00;¤-#,##0.00', '#'], '₭', 'ລາວ ກີບ',
+  {'JPY': ['JP¥', '¥'], 'LAK': ['₭'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/lrc-IQ.ts b/packages/common/locales/lrc-IQ.ts
new file mode 100644
index 000000000000..b7b5dda86d02
--- /dev/null
+++ b/packages/common/locales/lrc-IQ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'lrc-IQ', [['AM', 'PM'], u, u], u,
+  [['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], u, u], u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'جانڤیە', 'فئڤریە', 'مارس', 'آڤریل', 'مئی', 'جوٙأن',
+      'جوٙلا', 'آگوست', 'سئپتامر', 'ئوکتوڤر', 'نوڤامر', 'دئسامر'
+    ],
+    u
+  ],
+  u, [['BCE', 'CE'], u, u], 6, [5, 6], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'د.ع.\u200f', 'IQD',
+  {'IQD': ['د.ع.\u200f'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/lrc.ts b/packages/common/locales/lrc.ts
new file mode 100644
index 000000000000..dfdd8ae9ad91
--- /dev/null
+++ b/packages/common/locales/lrc.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'lrc', [['AM', 'PM'], u, u], u,
+  [['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], u, u], u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'جانڤیە', 'فئڤریە', 'مارس', 'آڤریل', 'مئی', 'جوٙأن',
+      'جوٙلا', 'آگوست', 'سئپتامر', 'ئوکتوڤر', 'نوڤامر', 'دئسامر'
+    ],
+    u
+  ],
+  u, [['BCE', 'CE'], u, u], 6, [5, 5], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'IRR', 'IRR',
+  {'IQD': ['د.ع.\u200f'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/lt.ts b/packages/common/locales/lt.ts
new file mode 100644
index 000000000000..5f0d160a2bdb
--- /dev/null
+++ b/packages/common/locales/lt.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (n % 10 === 1 && !(n % 100 >= 11 && n % 100 <= 19)) return 1;
+  if (n % 10 === Math.floor(n % 10) && n % 10 >= 2 && n % 10 <= 9 &&
+      !(n % 100 >= 11 && n % 100 <= 19))
+    return 3;
+  if (!(f === 0)) return 4;
+  return 5;
+}
+
+export default [
+  'lt', [['pr. p.', 'pop.'], ['priešpiet', 'popiet'], u], u,
+  [
+    ['S', 'P', 'A', 'T', 'K', 'P', 'Š'], ['sk', 'pr', 'an', 'tr', 'kt', 'pn', 'št'],
+    [
+      'sekmadienis', 'pirmadienis', 'antradienis', 'trečiadienis', 'ketvirtadienis',
+      'penktadienis', 'šeštadienis'
+    ],
+    ['Sk', 'Pr', 'An', 'Tr', 'Kt', 'Pn', 'Št']
+  ],
+  u,
+  [
+    ['S', 'V', 'K', 'B', 'G', 'B', 'L', 'R', 'R', 'S', 'L', 'G'],
+    [
+      'saus.', 'vas.', 'kov.', 'bal.', 'geg.', 'birž.', 'liep.', 'rugp.', 'rugs.', 'spal.',
+      'lapkr.', 'gruod.'
+    ],
+    [
+      'sausio', 'vasario', 'kovo', 'balandžio', 'gegužės', 'birželio', 'liepos', 'rugpjūčio',
+      'rugsėjo', 'spalio', 'lapkričio', 'gruodžio'
+    ]
+  ],
+  [
+    ['S', 'V', 'K', 'B', 'G', 'B', 'L', 'R', 'R', 'S', 'L', 'G'],
+    [
+      'saus.', 'vas.', 'kov.', 'bal.', 'geg.', 'birž.', 'liep.', 'rugp.', 'rugs.', 'spal.',
+      'lapkr.', 'gruod.'
+    ],
+    [
+      'sausis', 'vasaris', 'kovas', 'balandis', 'gegužė', 'birželis', 'liepa', 'rugpjūtis',
+      'rugsėjis', 'spalis', 'lapkritis', 'gruodis'
+    ]
+  ],
+  [['pr. Kr.', 'po Kr.'], u, ['prieš Kristų', 'po Kristaus']], 1, [6, 0],
+  ['y-MM-dd', u, 'y \'m\'. MMMM d \'d\'.', 'y \'m\'. MMMM d \'d\'., EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '×10^', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euras', {
+    'AUD': [u, '$'],
+    'BDT': [],
+    'BRL': [u, 'R$'],
+    'BYN': [u, 'Br'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [],
+    'INR': [],
+    'JPY': [u, '¥'],
+    'KHR': [],
+    'KRW': [u, '₩'],
+    'LAK': [],
+    'MNT': [],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'PLN': [u, 'zl'],
+    'PYG': [u, 'Gs'],
+    'RUB': [u, 'rb'],
+    'TWD': [u, '$'],
+    'USD': [u, '$'],
+    'VND': [],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XOF': [],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/lu.ts b/packages/common/locales/lu.ts
new file mode 100644
index 000000000000..6a38755727d3
--- /dev/null
+++ b/packages/common/locales/lu.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'lu', [['Dinda', 'Dilolo'], u, u], u,
+  [
+    ['L', 'N', 'N', 'N', 'N', 'N', 'L'], ['Lum', 'Nko', 'Ndy', 'Ndg', 'Njw', 'Ngv', 'Lub'],
+    ['Lumingu', 'Nkodya', 'Ndàayà', 'Ndangù', 'Njòwa', 'Ngòvya', 'Lubingu'],
+    ['Lum', 'Nko', 'Ndy', 'Ndg', 'Njw', 'Ngv', 'Lub']
+  ],
+  u,
+  [
+    ['C', 'L', 'L', 'M', 'L', 'L', 'K', 'L', 'L', 'L', 'K', 'C'],
+    ['Cio', 'Lui', 'Lus', 'Muu', 'Lum', 'Luf', 'Kab', 'Lush', 'Lut', 'Lun', 'Kas', 'Cis'],
+    [
+      'Ciongo', 'Lùishi', 'Lusòlo', 'Mùuyà', 'Lumùngùlù', 'Lufuimi', 'Kabàlàshìpù',
+      'Lùshìkà', 'Lutongolo', 'Lungùdi', 'Kaswèkèsè', 'Ciswà'
+    ]
+  ],
+  u, [['kmp. Y.K.', 'kny. Y. K.'], u, ['Kumpala kwa Yezu Kli', 'Kunyima kwa Yezu Kli']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'FC', 'Nfalanga wa Kongu',
+  {'CDF': ['FC'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/luo.ts b/packages/common/locales/luo.ts
new file mode 100644
index 000000000000..3a8cafdca346
--- /dev/null
+++ b/packages/common/locales/luo.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'luo', [['OD', 'OT'], u, u], u,
+  [
+    ['J', 'W', 'T', 'T', 'T', 'T', 'N'], ['JMP', 'WUT', 'TAR', 'TAD', 'TAN', 'TAB', 'NGS'],
+    ['Jumapil', 'Wuok Tich', 'Tich Ariyo', 'Tich Adek', 'Tich Ang’wen', 'Tich Abich', 'Ngeso'],
+    ['JMP', 'WUT', 'TAR', 'TAD', 'TAN', 'TAB', 'NGS']
+  ],
+  u,
+  [
+    ['C', 'R', 'D', 'N', 'B', 'U', 'B', 'B', 'C', 'P', 'C', 'P'],
+    ['DAC', 'DAR', 'DAD', 'DAN', 'DAH', 'DAU', 'DAO', 'DAB', 'DOC', 'DAP', 'DGI', 'DAG'],
+    [
+      'Dwe mar Achiel', 'Dwe mar Ariyo', 'Dwe mar Adek', 'Dwe mar Ang’wen', 'Dwe mar Abich',
+      'Dwe mar Auchiel', 'Dwe mar Abiriyo', 'Dwe mar Aboro', 'Dwe mar Ochiko', 'Dwe mar Apar',
+      'Dwe mar gi achiel', 'Dwe mar Apar gi ariyo'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['Kapok Kristo obiro', 'Ka Kristo osebiro']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'Ksh', 'Siling mar Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/luy.ts b/packages/common/locales/luy.ts
new file mode 100644
index 000000000000..d60dca1fcd85
--- /dev/null
+++ b/packages/common/locales/luy.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'luy', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['J2', 'J3', 'J4', 'J5', 'Al', 'Ij', 'J1'],
+    [
+      'Jumapiri', 'Jumatatu', 'Jumanne', 'Jumatano', 'Murwa wa Kanne', 'Murwa wa Katano', 'Jumamosi'
+    ],
+    ['J2', 'J3', 'J4', 'J5', 'Al', 'Ij', 'J1']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Machi', 'Aprili', 'Mei', 'Juni', 'Julai', 'Agosti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['Imberi ya Kuuza Kwa', 'Muhiga Kuvita Kuuza']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00;¤- #,##0.00', '#E0'], 'Ksh', 'Sirinji ya Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/lv.ts b/packages/common/locales/lv.ts
new file mode 100644
index 000000000000..4a5b2a3c9d0b
--- /dev/null
+++ b/packages/common/locales/lv.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (n % 10 === 0 || n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 19 ||
+      v === 2 && f % 100 === Math.floor(f % 100) && f % 100 >= 11 && f % 100 <= 19)
+    return 0;
+  if (n % 10 === 1 && !(n % 100 === 11) || v === 2 && f % 10 === 1 && !(f % 100 === 11) ||
+      !(v === 2) && f % 10 === 1)
+    return 1;
+  return 5;
+}
+
+export default [
+  'lv', [['priekšp.', 'pēcp.'], u, ['priekšpusdienā', 'pēcpusdienā']],
+  [['priekšp.', 'pēcpusd.'], u, ['priekšpusdiena', 'pēcpusdiena']],
+  [
+    ['S', 'P', 'O', 'T', 'C', 'P', 'S'],
+    ['svētd.', 'pirmd.', 'otrd.', 'trešd.', 'ceturtd.', 'piektd.', 'sestd.'],
+    ['svētdiena', 'pirmdiena', 'otrdiena', 'trešdiena', 'ceturtdiena', 'piektdiena', 'sestdiena'],
+    ['Sv', 'Pr', 'Ot', 'Tr', 'Ce', 'Pk', 'Se']
+  ],
+  [
+    ['S', 'P', 'O', 'T', 'C', 'P', 'S'],
+    ['Svētd.', 'Pirmd.', 'Otrd.', 'Trešd.', 'Ceturtd.', 'Piektd.', 'Sestd.'],
+    ['Svētdiena', 'Pirmdiena', 'Otrdiena', 'Trešdiena', 'Ceturtdiena', 'Piektdiena', 'Sestdiena'],
+    ['Sv', 'Pr', 'Ot', 'Tr', 'Ce', 'Pk', 'Se']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'febr.', 'marts', 'apr.', 'maijs', 'jūn.', 'jūl.', 'aug.', 'sept.', 'okt.', 'nov.',
+      'dec.'
+    ],
+    [
+      'janvāris', 'februāris', 'marts', 'aprīlis', 'maijs', 'jūnijs', 'jūlijs', 'augusts',
+      'septembris', 'oktobris', 'novembris', 'decembris'
+    ]
+  ],
+  u, [['p.m.ē.', 'm.ē.'], u, ['pirms mūsu ēras', 'mūsu ērā']], 1, [6, 0],
+  ['dd.MM.yy', 'y. \'gada\' d. MMM', 'y. \'gada\' d. MMMM', 'EEEE, y. \'gada\' d. MMMM'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NS', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'eiro',
+  {'AUD': ['AU$', '$'], 'LVL': ['Ls'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/mas-TZ.ts b/packages/common/locales/mas-TZ.ts
new file mode 100644
index 000000000000..93667f6ed3d0
--- /dev/null
+++ b/packages/common/locales/mas-TZ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'mas-TZ', [['Ɛnkakɛnyá', 'Ɛndámâ'], u, u], u,
+  [
+    ['2', '3', '4', '5', '6', '7', '1'], ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo'],
+    ['Jumapílí', 'Jumatátu', 'Jumane', 'Jumatánɔ', 'Alaámisi', 'Jumáa', 'Jumamósi'],
+    ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'Dal', 'Ará', 'Ɔɛn', 'Doy', 'Lép', 'Rok', 'Sás', 'Bɔ́r', 'Kús', 'Gís', 'Shʉ́',
+      'Ntʉ́'
+    ],
+    [
+      'Oladalʉ́', 'Arát', 'Ɔɛnɨ́ɔɨŋɔk', 'Olodoyíóríê inkókúâ',
+      'Oloilépūnyīē inkókúâ', 'Kújúɔrɔk', 'Mórusásin', 'Ɔlɔ́ɨ́bɔ́rárɛ',
+      'Kúshîn', 'Olgísan', 'Pʉshʉ́ka', 'Ntʉ́ŋʉ́s'
+    ]
+  ],
+  u, [['MY', 'EY'], u, ['Meínō Yɛ́sʉ', 'Eínō Yɛ́sʉ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'TSh', 'Iropiyianí e Tanzania',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/mas.ts b/packages/common/locales/mas.ts
new file mode 100644
index 000000000000..a08d987a5b56
--- /dev/null
+++ b/packages/common/locales/mas.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'mas', [['Ɛnkakɛnyá', 'Ɛndámâ'], u, u], u,
+  [
+    ['2', '3', '4', '5', '6', '7', '1'], ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo'],
+    ['Jumapílí', 'Jumatátu', 'Jumane', 'Jumatánɔ', 'Alaámisi', 'Jumáa', 'Jumamósi'],
+    ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'Dal', 'Ará', 'Ɔɛn', 'Doy', 'Lép', 'Rok', 'Sás', 'Bɔ́r', 'Kús', 'Gís', 'Shʉ́',
+      'Ntʉ́'
+    ],
+    [
+      'Oladalʉ́', 'Arát', 'Ɔɛnɨ́ɔɨŋɔk', 'Olodoyíóríê inkókúâ',
+      'Oloilépūnyīē inkókúâ', 'Kújúɔrɔk', 'Mórusásin', 'Ɔlɔ́ɨ́bɔ́rárɛ',
+      'Kúshîn', 'Olgísan', 'Pʉshʉ́ka', 'Ntʉ́ŋʉ́s'
+    ]
+  ],
+  u, [['MY', 'EY'], u, ['Meínō Yɛ́sʉ', 'Eínō Yɛ́sʉ']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Iropiyianí e Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/mer.ts b/packages/common/locales/mer.ts
new file mode 100644
index 000000000000..74c50dcbe248
--- /dev/null
+++ b/packages/common/locales/mer.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'mer', [['RŨ', 'ŨG'], u, u], u,
+  [
+    ['K', 'M', 'W', 'W', 'W', 'W', 'J'], ['KIU', 'MRA', 'WAI', 'WET', 'WEN', 'WTN', 'JUM'],
+    ['Kiumia', 'Muramuko', 'Wairi', 'Wethatu', 'Wena', 'Wetano', 'Jumamosi'],
+    ['KIU', 'MRA', 'WAI', 'WET', 'WEN', 'WTN', 'JUM']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'Ĩ', 'M', 'N', 'N', 'A', 'S', 'O', 'N', 'D'],
+    ['JAN', 'FEB', 'MAC', 'ĨPU', 'MĨĨ', 'NJU', 'NJR', 'AGA', 'SPT', 'OKT', 'NOV', 'DEC'],
+    [
+      'Januarĩ', 'Feburuarĩ', 'Machi', 'Ĩpurũ', 'Mĩĩ', 'Njuni', 'Njuraĩ', 'Agasti',
+      'Septemba', 'Oktũba', 'Novemba', 'Dicemba'
+    ]
+  ],
+  u, [['MK', 'NK'], u, ['Mbere ya Kristũ', 'Nyuma ya Kristũ']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Shilingi ya Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/mfe.ts b/packages/common/locales/mfe.ts
new file mode 100644
index 000000000000..ddd72641f906
--- /dev/null
+++ b/packages/common/locales/mfe.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'mfe', [['AM', 'PM'], u, u], u,
+  [
+    ['d', 'l', 'm', 'm', 'z', 'v', 's'], ['dim', 'lin', 'mar', 'mer', 'ze', 'van', 'sam'],
+    ['dimans', 'lindi', 'mardi', 'merkredi', 'zedi', 'vandredi', 'samdi'],
+    ['dim', 'lin', 'mar', 'mer', 'ze', 'van', 'sam']
+  ],
+  u,
+  [
+    ['z', 'f', 'm', 'a', 'm', 'z', 'z', 'o', 's', 'o', 'n', 'd'],
+    ['zan', 'fev', 'mar', 'avr', 'me', 'zin', 'zil', 'out', 'sep', 'okt', 'nov', 'des'],
+    [
+      'zanvie', 'fevriye', 'mars', 'avril', 'me', 'zin', 'zilye', 'out', 'septam', 'oktob', 'novam',
+      'desam'
+    ]
+  ],
+  u, [['av. Z-K', 'ap. Z-K'], u, ['avan Zezi-Krist', 'apre Zezi-Krist']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'Rs', 'roupi morisien',
+  {'JPY': ['JP¥', '¥'], 'MUR': ['Rs'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/mg.ts b/packages/common/locales/mg.ts
new file mode 100644
index 000000000000..dfe1be7cd9ca
--- /dev/null
+++ b/packages/common/locales/mg.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'mg', [['AM', 'PM'], u, u], u,
+  [
+    ['A', 'A', 'T', 'A', 'A', 'Z', 'A'], ['Alah', 'Alats', 'Tal', 'Alar', 'Alak', 'Zom', 'Asab'],
+    ['Alahady', 'Alatsinainy', 'Talata', 'Alarobia', 'Alakamisy', 'Zoma', 'Asabotsy'],
+    ['Alah', 'Alats', 'Tal', 'Alar', 'Alak', 'Zom', 'Asab']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'Mey', 'Jon', 'Jol', 'Aog', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Janoary', 'Febroary', 'Martsa', 'Aprily', 'Mey', 'Jona', 'Jolay', 'Aogositra', 'Septambra',
+      'Oktobra', 'Novambra', 'Desambra'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['Alohan’i JK', 'Aorian’i JK']], 1, [6, 0],
+  ['y-MM-dd', 'y MMM d', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'Ar', 'Ariary',
+  {'JPY': ['JP¥', '¥'], 'MGA': ['Ar'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/mgh.ts b/packages/common/locales/mgh.ts
new file mode 100644
index 000000000000..71865761239a
--- /dev/null
+++ b/packages/common/locales/mgh.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'mgh', [['wichishu', 'mchochil’l'], u, u], u,
+  [
+    ['S', 'J', 'J', 'J', 'A', 'I', 'J'], ['Sab', 'Jtt', 'Jnn', 'Jtn', 'Ara', 'Iju', 'Jmo'],
+    ['Sabato', 'Jumatatu', 'Jumanne', 'Jumatano', 'Arahamisi', 'Ijumaa', 'Jumamosi'],
+    ['Sab', 'Jtt', 'Jnn', 'Jtn', 'Ara', 'Iju', 'Jmo']
+  ],
+  u,
+  [
+    ['K', 'U', 'R', 'C', 'T', 'M', 'S', 'N', 'T', 'K', 'M', 'Y'],
+    ['Kwa', 'Una', 'Rar', 'Che', 'Tha', 'Moc', 'Sab', 'Nan', 'Tis', 'Kum', 'Moj', 'Yel'],
+    [
+      'Mweri wo kwanza', 'Mweri wo unayeli', 'Mweri wo uneraru', 'Mweri wo unecheshe',
+      'Mweri wo unethanu', 'Mweri wo thanu na mocha', 'Mweri wo saba', 'Mweri wo nane',
+      'Mweri wo tisa', 'Mweri wo kumi', 'Mweri wo kumi na moja', 'Mweri wo kumi na yel’li'
+    ]
+  ],
+  u, [['HY', 'YY'], u, ['Hinapiya yesu', 'Yopia yesu']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'MTn', 'MZN',
+  {'JPY': ['JP¥', '¥'], 'MZN': ['MTn'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/mgo.ts b/packages/common/locales/mgo.ts
new file mode 100644
index 000000000000..850d3af6f850
--- /dev/null
+++ b/packages/common/locales/mgo.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'mgo', [['AM', 'PM'], u, u], u,
+  [
+    ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7'],
+    ['Aneg 1', 'Aneg 2', 'Aneg 3', 'Aneg 4', 'Aneg 5', 'Aneg 6', 'Aneg 7'], u,
+    ['1', '2', '3', '4', '5', '6', '7']
+  ],
+  u,
+  [
+    ['M1', 'A2', 'M3', 'N4', 'F5', 'I6', 'A7', 'I8', 'K9', '10', '11', '12'],
+    [
+      'mbegtug', 'imeg àbùbì', 'imeg mbəŋchubi', 'iməg ngwə̀t', 'iməg fog',
+      'iməg ichiibɔd', 'iməg àdùmbə̀ŋ', 'iməg ichika', 'iməg kud', 'iməg tèsiʼe',
+      'iməg zò', 'iməg krizmed'
+    ],
+    [
+      'iməg mbegtug', 'imeg àbùbì', 'imeg mbəŋchubi', 'iməg ngwə̀t', 'iməg fog',
+      'iməg ichiibɔd', 'iməg àdùmbə̀ŋ', 'iməg ichika', 'iməg kud', 'iməg tèsiʼe',
+      'iməg zò', 'iməg krizmed'
+    ]
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'EEEE, y MMMM dd'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'FCFA', 'shirè',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/mk.ts b/packages/common/locales/mk.ts
new file mode 100644
index 000000000000..aa328a975201
--- /dev/null
+++ b/packages/common/locales/mk.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  return 5;
+}
+
+export default [
+  'mk', [['претпл.', 'попл.'], u, ['претпладне', 'попладне']], u,
+  [
+    ['н', 'п', 'в', 'с', 'ч', 'п', 'с'],
+    ['нед.', 'пон.', 'вт.', 'сре.', 'чет.', 'пет.', 'саб.'],
+    [
+      'недела', 'понеделник', 'вторник', 'среда', 'четврток',
+      'петок', 'сабота'
+    ],
+    ['нед.', 'пон.', 'вто.', 'сре.', 'чет.', 'пет.', 'саб.']
+  ],
+  [
+    ['н', 'п', 'в', 'с', 'ч', 'п', 'с'],
+    ['нед.', 'пон.', 'вто.', 'сре.', 'чет.', 'пет.', 'саб.'],
+    [
+      'недела', 'понеделник', 'вторник', 'среда', 'четврток',
+      'петок', 'сабота'
+    ],
+    ['нед.', 'пон.', 'вто.', 'сре.', 'чет.', 'пет.', 'саб.']
+  ],
+  [
+    ['ј', 'ф', 'м', 'а', 'м', 'ј', 'ј', 'а', 'с', 'о', 'н', 'д'],
+    [
+      'јан.', 'фев.', 'мар.', 'апр.', 'мај', 'јун.', 'јул.', 'авг.',
+      'септ.', 'окт.', 'ноем.', 'дек.'
+    ],
+    [
+      'јануари', 'февруари', 'март', 'април', 'мај', 'јуни',
+      'јули', 'август', 'септември', 'октомври', 'ноември',
+      'декември'
+    ]
+  ],
+  u, [['пр.н.е.', 'н.е.'], u, ['пред нашата ера', 'од нашата ера']],
+  1, [6, 0], ['dd.M.yy', 'dd.M.y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'ден', 'Македонски денар', {
+    'AUD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MKD': ['ден'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/ml.ts b/packages/common/locales/ml.ts
new file mode 100644
index 000000000000..88e98c8f118d
--- /dev/null
+++ b/packages/common/locales/ml.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ml', [['AM', 'PM'], u, u], u,
+  [
+    ['ഞ', 'തി', 'ചൊ', 'ബു', 'വ്യാ', 'വെ', 'ശ'],
+    [
+      'ഞായർ', 'തിങ്കൾ', 'ചൊവ്വ', 'ബുധൻ', 'വ്യാഴം',
+      'വെള്ളി', 'ശനി'
+    ],
+    [
+      'ഞായറാഴ്\u200cച', 'തിങ്കളാഴ്\u200cച',
+      'ചൊവ്വാഴ്ച', 'ബുധനാഴ്\u200cച',
+      'വ്യാഴാഴ്\u200cച', 'വെള്ളിയാഴ്\u200cച',
+      'ശനിയാഴ്\u200cച'
+    ],
+    ['ഞാ', 'തി', 'ചൊ', 'ബു', 'വ്യാ', 'വെ', 'ശ']
+  ],
+  [
+    ['ഞാ', 'തി', 'ചൊ', 'ബു', 'വ്യാ', 'വെ', 'ശ'],
+    [
+      'ഞായർ', 'തിങ്കൾ', 'ചൊവ്വ', 'ബുധൻ', 'വ്യാഴം',
+      'വെള്ളി', 'ശനി'
+    ],
+    [
+      'ഞായറാഴ്\u200cച', 'തിങ്കളാഴ്\u200cച',
+      'ചൊവ്വാഴ്\u200cച', 'ബുധനാഴ്\u200cച',
+      'വ്യാഴാഴ്\u200cച', 'വെള്ളിയാഴ്\u200cച',
+      'ശനിയാഴ്\u200cച'
+    ],
+    ['ഞാ', 'തി', 'ചൊ', 'ബു', 'വ്യാ', 'വെ', 'ശ']
+  ],
+  [
+    [
+      'ജ', 'ഫെ', 'മാ', 'ഏ', 'മെ', 'ജൂൺ', 'ജൂ', 'ഓ', 'സെ', 'ഒ',
+      'ന', 'ഡി'
+    ],
+    [
+      'ജനു', 'ഫെബ്രു', 'മാർ', 'ഏപ്രി', 'മേയ്',
+      'ജൂൺ', 'ജൂലൈ', 'ഓഗ', 'സെപ്റ്റം', 'ഒക്ടോ',
+      'നവം', 'ഡിസം'
+    ],
+    [
+      'ജനുവരി', 'ഫെബ്രുവരി', 'മാർച്ച്',
+      'ഏപ്രിൽ', 'മേയ്', 'ജൂൺ', 'ജൂലൈ', 'ഓഗസ്റ്റ്',
+      'സെപ്റ്റംബർ', 'ഒക്\u200cടോബർ', 'നവംബർ',
+      'ഡിസംബർ'
+    ]
+  ],
+  u,
+  [
+    ['ക്രി.മു.', 'എഡി'], u,
+    [
+      'ക്രിസ്\u200cതുവിന് മുമ്പ്',
+      'ആന്നോ ഡൊമിനി'
+    ]
+  ],
+  0, [0, 0], ['d/M/yy', 'y, MMM d', 'y, MMMM d', 'y, MMMM d, EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₹', 'ഇന്ത്യൻ രൂപ',
+  {'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/mn.ts b/packages/common/locales/mn.ts
new file mode 100644
index 000000000000..ed85f707ac86
--- /dev/null
+++ b/packages/common/locales/mn.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'mn', [['үө', 'үх'], ['ҮӨ', 'ҮХ'], ['ү.ө', 'ү.х']], [['ҮӨ', 'ҮХ'], u, u],
+  [
+    ['Ня', 'Да', 'Мя', 'Лх', 'Пү', 'Ба', 'Бя'], u,
+    [
+      'ням', 'даваа', 'мягмар', 'лхагва', 'пүрэв', 'баасан',
+      'бямба'
+    ],
+    ['Ня', 'Да', 'Мя', 'Лх', 'Пү', 'Ба', 'Бя']
+  ],
+  u,
+  [
+    ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'],
+    [
+      '1-р сар', '2-р сар', '3-р сар', '4-р сар', '5-р сар', '6-р сар',
+      '7-р сар', '8-р сар', '9-р сар', '10-р сар', '11-р сар', '12-р сар'
+    ],
+    [
+      'Нэгдүгээр сар', 'Хоёрдугаар сар', 'Гуравдугаар сар',
+      'Дөрөвдүгээр сар', 'Тавдугаар сар',
+      'Зургаадугаар сар', 'Долдугаар сар', 'Наймдугаар сар',
+      'Есдүгээр сар', 'Аравдугаар сар',
+      'Арван нэгдүгээр сар', 'Арван хоёрдугаар сар'
+    ]
+  ],
+  u, [['МЭӨ', 'МЭ'], u, ['манай эриний өмнөх', 'манай эриний']], 1,
+  [6, 0], ['y.MM.dd', u, u, 'y.MM.dd, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss (z)', 'HH:mm:ss (zzzz)'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₮', 'төгрөг',
+  {'JPY': ['JP¥', '¥'], 'MNT': ['₮'], 'SEK': [u, 'кр'], 'THB': ['฿'], 'TWD': ['NT$']},
+  plural
+];
diff --git a/packages/common/locales/mr.ts b/packages/common/locales/mr.ts
new file mode 100644
index 000000000000..cbdf91058680
--- /dev/null
+++ b/packages/common/locales/mr.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'mr', [['स', 'सं'], ['म.पू.', 'म.उ.'], u], [['म.पू.', 'म.उ.'], u, u],
+  [
+    ['र', 'सो', 'मं', 'बु', 'गु', 'शु', 'श'],
+    [
+      'रवि', 'सोम', 'मंगळ', 'बुध', 'गुरु', 'शुक्र',
+      'शनि'
+    ],
+    [
+      'रविवार', 'सोमवार', 'मंगळवार', 'बुधवार',
+      'गुरुवार', 'शुक्रवार', 'शनिवार'
+    ],
+    ['र', 'सो', 'मं', 'बु', 'गु', 'शु', 'श']
+  ],
+  u,
+  [
+    [
+      'जा', 'फे', 'मा', 'ए', 'मे', 'जू', 'जु', 'ऑ', 'स', 'ऑ',
+      'नो', 'डि'
+    ],
+    [
+      'जाने', 'फेब्रु', 'मार्च', 'एप्रि', 'मे',
+      'जून', 'जुलै', 'ऑग', 'सप्टें', 'ऑक्टो',
+      'नोव्हें', 'डिसें'
+    ],
+    [
+      'जानेवारी', 'फेब्रुवारी', 'मार्च',
+      'एप्रिल', 'मे', 'जून', 'जुलै', 'ऑगस्ट',
+      'सप्टेंबर', 'ऑक्टोबर', 'नोव्हेंबर',
+      'डिसेंबर'
+    ]
+  ],
+  u,
+  [
+    ['इ. स. पू.', 'इ. स.'], u,
+    ['ईसवीसनपूर्व', 'ईसवीसन']
+  ],
+  0, [0, 0], ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'],
+  ['{1}, {0}', u, '{1} रोजी {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##0%', '¤#,##0.00', '[#E0]'], '₹', 'भारतीय रुपया',
+  {'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/ms-BN.ts b/packages/common/locales/ms-BN.ts
new file mode 100644
index 000000000000..42e0a0368a78
--- /dev/null
+++ b/packages/common/locales/ms-BN.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ms-BN', [['a', 'p'], ['PG', 'PTG'], u], u,
+  [
+    ['A', 'I', 'S', 'R', 'K', 'J', 'S'], ['Ahd', 'Isn', 'Sel', 'Rab', 'Kha', 'Jum', 'Sab'],
+    ['Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu'],
+    ['Ah', 'Is', 'Se', 'Ra', 'Kh', 'Ju', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'O', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ogo', 'Sep', 'Okt', 'Nov', 'Dis'],
+    [
+      'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober',
+      'November', 'Disember'
+    ]
+  ],
+  u, [['S.M.', 'TM'], u, u], 1, [6, 0], ['d/MM/yy', 'd MMM y', 'd MMMM y', 'dd MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '$', 'Dolar Brunei', {
+    'BND': ['$'],
+    'CAD': [u, '$'],
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'MYR': ['RM'],
+    'TWD': ['NT$'],
+    'USD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ms-SG.ts b/packages/common/locales/ms-SG.ts
new file mode 100644
index 000000000000..88e0fbe64160
--- /dev/null
+++ b/packages/common/locales/ms-SG.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ms-SG', [['a', 'p'], ['PG', 'PTG'], u], u,
+  [
+    ['A', 'I', 'S', 'R', 'K', 'J', 'S'], ['Ahd', 'Isn', 'Sel', 'Rab', 'Kha', 'Jum', 'Sab'],
+    ['Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu'],
+    ['Ah', 'Is', 'Se', 'Ra', 'Kh', 'Ju', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'O', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ogo', 'Sep', 'Okt', 'Nov', 'Dis'],
+    [
+      'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober',
+      'November', 'Disember'
+    ]
+  ],
+  u, [['S.M.', 'TM'], u, u], 0, [6, 0], ['d/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Dolar Singapura', {
+    'CAD': [u, '$'],
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'MYR': ['RM'],
+    'SGD': ['$'],
+    'TWD': ['NT$'],
+    'USD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ms.ts b/packages/common/locales/ms.ts
new file mode 100644
index 000000000000..375aa8c36965
--- /dev/null
+++ b/packages/common/locales/ms.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ms', [['a', 'p'], ['PG', 'PTG'], u], u,
+  [
+    ['A', 'I', 'S', 'R', 'K', 'J', 'S'], ['Ahd', 'Isn', 'Sel', 'Rab', 'Kha', 'Jum', 'Sab'],
+    ['Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu'],
+    ['Ah', 'Is', 'Se', 'Ra', 'Kh', 'Ju', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'O', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ogo', 'Sep', 'Okt', 'Nov', 'Dis'],
+    [
+      'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober',
+      'November', 'Disember'
+    ]
+  ],
+  u, [['S.M.', 'TM'], u, u], 1, [6, 0], ['d/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'RM', 'Ringgit Malaysia', {
+    'CAD': [u, '$'],
+    'JPY': ['JP¥', '¥'],
+    'MXN': [u, '$'],
+    'MYR': ['RM'],
+    'TWD': ['NT$'],
+    'USD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/mt.ts b/packages/common/locales/mt.ts
new file mode 100644
index 000000000000..82f61945ec29
--- /dev/null
+++ b/packages/common/locales/mt.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  if (n === 0 || n % 100 === Math.floor(n % 100) && n % 100 >= 2 && n % 100 <= 10) return 3;
+  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 19) return 4;
+  return 5;
+}
+
+export default [
+  'mt', [['am', 'pm'], ['AM', 'PM'], u], u,
+  [
+    ['Ħd', 'T', 'Tl', 'Er', 'Ħm', 'Ġm', 'Sb'],
+    ['Ħad', 'Tne', 'Tli', 'Erb', 'Ħam', 'Ġim', 'Sib'],
+    ['Il-Ħadd', 'It-Tnejn', 'It-Tlieta', 'L-Erbgħa', 'Il-Ħamis', 'Il-Ġimgħa', 'Is-Sibt'],
+    ['Ħad', 'Tne', 'Tli', 'Erb', 'Ħam', 'Ġim', 'Sib']
+  ],
+  [
+    ['Ħd', 'Tn', 'Tl', 'Er', 'Ħm', 'Ġm', 'Sb'],
+    ['Ħad', 'Tne', 'Tli', 'Erb', 'Ħam', 'Ġim', 'Sib'],
+    ['Il-Ħadd', 'It-Tnejn', 'It-Tlieta', 'L-Erbgħa', 'Il-Ħamis', 'Il-Ġimgħa', 'Is-Sibt'],
+    ['Ħad', 'Tne', 'Tli', 'Erb', 'Ħam', 'Ġim', 'Sib']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'Ġ', 'L', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Fra', 'Mar', 'Apr', 'Mej', 'Ġun', 'Lul', 'Aww', 'Set', 'Ott', 'Nov', 'Diċ'],
+    [
+      'Jannar', 'Frar', 'Marzu', 'April', 'Mejju', 'Ġunju', 'Lulju', 'Awwissu', 'Settembru',
+      'Ottubru', 'Novembru', 'Diċembru'
+    ]
+  ],
+  [
+    ['Jn', 'Fr', 'Mz', 'Ap', 'Mj', 'Ġn', 'Lj', 'Aw', 'St', 'Ob', 'Nv', 'Dċ'],
+    ['Jan', 'Fra', 'Mar', 'Apr', 'Mej', 'Ġun', 'Lul', 'Aww', 'Set', 'Ott', 'Nov', 'Diċ'],
+    [
+      'Jannar', 'Frar', 'Marzu', 'April', 'Mejju', 'Ġunju', 'Lulju', 'Awwissu', 'Settembru',
+      'Ottubru', 'Novembru', 'Diċembru'
+    ]
+  ],
+  [['QK', 'WK'], u, ['Qabel Kristu', 'Wara Kristu']], 0, [6, 0],
+  ['dd/MM/y', 'dd MMM y', 'd \'ta\'’ MMMM y', 'EEEE, d \'ta\'’ MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '€', 'ewro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/mua.ts b/packages/common/locales/mua.ts
new file mode 100644
index 000000000000..1dc31ced6ca3
--- /dev/null
+++ b/packages/common/locales/mua.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'mua', [['comme', 'lilli'], u, u], u,
+  [
+    ['Y', 'L', 'Z', 'O', 'A', 'G', 'E'], ['Cya', 'Cla', 'Czi', 'Cko', 'Cka', 'Cga', 'Cze'],
+    [
+      'Com’yakke', 'Comlaaɗii', 'Comzyiiɗii', 'Comkolle', 'Comkaldǝɓlii', 'Comgaisuu',
+      'Comzyeɓsuu'
+    ],
+    ['Cya', 'Cla', 'Czi', 'Cko', 'Cka', 'Cga', 'Cze']
+  ],
+  u,
+  [
+    ['O', 'A', 'I', 'F', 'D', 'B', 'L', 'M', 'E', 'U', 'W', 'Y'],
+    ['FLO', 'CLA', 'CKI', 'FMF', 'MAD', 'MBI', 'MLI', 'MAM', 'FDE', 'FMU', 'FGW', 'FYU'],
+    [
+      'Fĩi Loo', 'Cokcwaklaŋne', 'Cokcwaklii', 'Fĩi Marfoo', 'Madǝǝuutǝbijaŋ',
+      'Mamǝŋgwãafahbii', 'Mamǝŋgwãalii', 'Madǝmbii', 'Fĩi Dǝɓlii', 'Fĩi Mundaŋ',
+      'Fĩi Gwahlle', 'Fĩi Yuru'
+    ]
+  ],
+  u, [['KK', 'PK'], u, ['KǝPel Kristu', 'Pel Kristu']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'FCFA', 'solai BEAC',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/my.ts b/packages/common/locales/my.ts
new file mode 100644
index 000000000000..74c703fe44d0
--- /dev/null
+++ b/packages/common/locales/my.ts
@@ -0,0 +1,67 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'my', [['နံနက်', 'ညနေ'], u, u], u,
+  [
+    ['တ', 'တ', 'အ', 'ဗ', 'က', 'သ', 'စ'],
+    [
+      'တနင်္ဂနွေ', 'တနင်္လာ', 'အင်္ဂါ',
+      'ဗုဒ္ဓဟူး', 'ကြာသပတေး', 'သောကြာ', 'စနေ'
+    ],
+    u, u
+  ],
+  u,
+  [
+    ['ဇ', 'ဖ', 'မ', 'ဧ', 'မ', 'ဇ', 'ဇ', 'ဩ', 'စ', 'အ', 'န', 'ဒ'],
+    [
+      'ဇန်', 'ဖေ', 'မတ်', 'ဧ', 'မေ', 'ဇွန်', 'ဇူ', 'ဩ',
+      'စက်', 'အောက်', 'နို', 'ဒီ'
+    ],
+    [
+      'ဇန်နဝါရီ', 'ဖေဖော်ဝါရီ', 'မတ်', 'ဧပြီ',
+      'မေ', 'ဇွန်', 'ဇူလိုင်', 'ဩဂုတ်',
+      'စက်တင်ဘာ', 'အောက်တိုဘာ', 'နိုဝင်ဘာ',
+      'ဒီဇင်ဘာ'
+    ]
+  ],
+  u,
+  [
+    ['ဘီစီ', 'အေဒီ'], u,
+    ['ခရစ်တော် မပေါ်မီနှစ်', 'ခရစ်နှစ်']
+  ],
+  0, [6, 0], ['dd-MM-yy', 'y၊ MMM d', 'y၊ d MMMM', 'y၊ MMMM d၊ EEEE'],
+  ['B H:mm', 'B HH:mm:ss', 'z HH:mm:ss', 'zzzz HH:mm:ss'], ['{1} {0}', u, u, u],
+  [
+    '.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞',
+    'ဂဏန်းမဟုတ်သော', ':'
+  ],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'K', 'မြန်မာ ကျပ်', {
+    'ANG': ['NAf'],
+    'AWG': ['Afl'],
+    'BBD': [u, 'Bds$'],
+    'BSD': [u, 'B$'],
+    'HTG': ['G'],
+    'JPY': ['JP¥', '¥'],
+    'MMK': ['K'],
+    'PAB': ['B/.'],
+    'THB': ['฿'],
+    'TTD': ['TT$', '$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/mzn.ts b/packages/common/locales/mzn.ts
new file mode 100644
index 000000000000..438da7584624
--- /dev/null
+++ b/packages/common/locales/mzn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'mzn', [['AM', 'PM'], u, u], u,
+  [['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], u, u], u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ژانویه', 'فوریه', 'مارس', 'آوریل', 'مه', 'ژوئن', 'ژوئیه',
+      'اوت', 'سپتامبر', 'اکتبر', 'نوامبر', 'دسامبر'
+    ],
+    u
+  ],
+  u, [['پ.م', 'م.'], u, ['قبل میلاد', 'بعد میلاد']], 6, [5, 5],
+  ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'IRR', 'ایران ریال',
+  {'JPY': ['JP¥', '¥']}, plural
+];
diff --git a/packages/common/locales/naq.ts b/packages/common/locales/naq.ts
new file mode 100644
index 000000000000..7a6462817747
--- /dev/null
+++ b/packages/common/locales/naq.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  return 5;
+}
+
+export default [
+  'naq', [['ǁgoagas', 'ǃuias'], u, u], u,
+  [
+    ['S', 'M', 'E', 'W', 'D', 'F', 'A'], ['Son', 'Ma', 'De', 'Wu', 'Do', 'Fr', 'Sat'],
+    [
+      'Sontaxtsees', 'Mantaxtsees', 'Denstaxtsees', 'Wunstaxtsees', 'Dondertaxtsees',
+      'Fraitaxtsees', 'Satertaxtsees'
+    ],
+    ['Son', 'Ma', 'De', 'Wu', 'Do', 'Fr', 'Sat']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'ǃKhanni', 'ǃKhanǀgôab', 'ǀKhuuǁkhâb', 'ǃHôaǂkhaib', 'ǃKhaitsâb', 'Gamaǀaeb',
+      'ǂKhoesaob', 'Aoǁkhuumûǁkhâb', 'Taraǀkhuumûǁkhâb', 'ǂNûǁnâiseb', 'ǀHooǂgaeb',
+      'Hôasoreǁkhâb'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['Xristub aiǃâ', 'Xristub khaoǃgâ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'ZAR', 'South African Randi',
+  {'JPY': ['JP¥', '¥'], 'NAD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/nb-SJ.ts b/packages/common/locales/nb-SJ.ts
new file mode 100644
index 000000000000..0061deeebbea
--- /dev/null
+++ b/packages/common/locales/nb-SJ.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'nb-SJ', [['a', 'p'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['søn.', 'man.', 'tir.', 'ons.', 'tor.', 'fre.', 'lør.'],
+    ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'],
+    ['sø.', 'ma.', 'ti.', 'on.', 'to.', 'fr.', 'lø.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'mai', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'des.'],
+    [
+      'januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober',
+      'november', 'desember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'des'],
+    [
+      'januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober',
+      'november', 'desember'
+    ]
+  ],
+  [['f.Kr.', 'e.Kr.'], u, ['før Kristus', 'etter Kristus']], 1, [6, 0],
+  ['dd.MM.y', 'd. MMM y', 'd. MMMM y', 'EEEE d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'],
+  ['{1}, {0}', u, '{1} \'kl\'. {0}', '{1} {0}'],
+  [',', ' ', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], 'kr', 'norske kroner', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NOK': ['kr'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/nb.ts b/packages/common/locales/nb.ts
new file mode 100644
index 000000000000..39d05607e286
--- /dev/null
+++ b/packages/common/locales/nb.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'nb', [['a', 'p'], ['a.m.', 'p.m.'], u], [['a.m.', 'p.m.'], u, u],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['søn.', 'man.', 'tir.', 'ons.', 'tor.', 'fre.', 'lør.'],
+    ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'],
+    ['sø.', 'ma.', 'ti.', 'on.', 'to.', 'fr.', 'lø.']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'mai', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'des.'],
+    [
+      'januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober',
+      'november', 'desember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'des'],
+    [
+      'januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober',
+      'november', 'desember'
+    ]
+  ],
+  [['f.Kr.', 'e.Kr.'], u, ['før Kristus', 'etter Kristus']], 1, [6, 0],
+  ['dd.MM.y', 'd. MMM y', 'd. MMMM y', 'EEEE d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'],
+  ['{1}, {0}', u, '{1} \'kl\'. {0}', '{1} {0}'],
+  [',', ' ', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], 'kr', 'norske kroner', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NOK': ['kr'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/nd.ts b/packages/common/locales/nd.ts
new file mode 100644
index 000000000000..670fc001f0c8
--- /dev/null
+++ b/packages/common/locales/nd.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'nd', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'S', 'S', 'S', 'S', 'M'], ['Son', 'Mvu', 'Sib', 'Sit', 'Sin', 'Sih', 'Mgq'],
+    ['Sonto', 'Mvulo', 'Sibili', 'Sithathu', 'Sine', 'Sihlanu', 'Mgqibelo'],
+    ['Son', 'Mvu', 'Sib', 'Sit', 'Sin', 'Sih', 'Mgq']
+  ],
+  u,
+  [
+    ['Z', 'N', 'M', 'M', 'N', 'N', 'N', 'N', 'M', 'M', 'L', 'M'],
+    ['Zib', 'Nhlo', 'Mbi', 'Mab', 'Nkw', 'Nhla', 'Ntu', 'Ncw', 'Mpan', 'Mfu', 'Lwe', 'Mpal'],
+    [
+      'Zibandlela', 'Nhlolanja', 'Mbimbitho', 'Mabasa', 'Nkwenkwezi', 'Nhlangula', 'Ntulikazi',
+      'Ncwabakazi', 'Mpandula', 'Mfumfu', 'Lwezi', 'Mpalakazi'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['UKristo angakabuyi', 'Ukristo ebuyile']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'US$', 'Dola yase Amelika',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/nds-NL.ts b/packages/common/locales/nds-NL.ts
new file mode 100644
index 000000000000..8999dc0bbe45
--- /dev/null
+++ b/packages/common/locales/nds-NL.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'nds-NL', [['AM', 'PM'], u, u], u,
+  [['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], u, u], u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['M01', 'M02', 'M03', 'M04', 'M05', 'M06', 'M07', 'M08', 'M09', 'M10', 'M11', 'M12'], u
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '€', 'EUR',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/nds.ts b/packages/common/locales/nds.ts
new file mode 100644
index 000000000000..6aa69413d6ff
--- /dev/null
+++ b/packages/common/locales/nds.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'nds', [['AM', 'PM'], u, u], u,
+  [['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], u, u], u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['M01', 'M02', 'M03', 'M04', 'M05', 'M06', 'M07', 'M08', 'M09', 'M10', 'M11', 'M12'], u
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '€', 'EUR',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ne-IN.ts b/packages/common/locales/ne-IN.ts
new file mode 100644
index 000000000000..86998e228c2d
--- /dev/null
+++ b/packages/common/locales/ne-IN.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ne-IN', [['पूर्वाह्न', 'अपराह्न'], u, u], u,
+  [
+    ['आ', 'सो', 'म', 'बु', 'बि', 'शु', 'श'],
+    [
+      'आइत', 'सोम', 'मङ्गल', 'बुध', 'बिहि', 'शुक्र',
+      'शनि'
+    ],
+    [
+      'आइतबार', 'सोमबार', 'मङ्गलबार', 'बुधबार',
+      'बिहिबार', 'शुक्रबार', 'शनिबार'
+    ],
+    [
+      'आइत', 'सोम', 'मङ्गल', 'बुध', 'बिहि', 'शुक्र',
+      'शनि'
+    ]
+  ],
+  u,
+  [
+    [
+      'जन', 'फेब', 'मार्च', 'अप्र', 'मे', 'जुन', 'जुल',
+      'अग', 'सेप', 'अक्टो', 'नोभे', 'डिसे'
+    ],
+    [
+      'जनवरी', 'फेब्रुअरी', 'मार्च', 'अप्रिल',
+      'मे', 'जुन', 'जुलाई', 'अगस्ट', 'सेप्टेम्बर',
+      'अक्टोबर', 'नोभेम्बर', 'डिसेम्बर'
+    ],
+    u
+  ],
+  [
+    [
+      'जन', 'फेेब', 'मार्च', 'अप्र', 'मे', 'जुन',
+      'जुल', 'अग', 'सेप', 'अक्टो', 'नोभे', 'डिसे'
+    ],
+    [
+      'जनवरी', 'फेब्रुअरी', 'मार्च', 'अप्रिल',
+      'मे', 'जुन', 'जुलाई', 'अगस्ट', 'सेप्टेम्बर',
+      'अक्टोबर', 'नोभेम्बर', 'डिसेम्बर'
+    ],
+    u
+  ],
+  [['ईसा पूर्व', 'सन्'], u, u], 0, [0, 0],
+  ['yy/M/d', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₹', 'भारतीय रूपिँया',
+  {'JPY': ['JP¥', '¥'], 'NPR': ['नेरू', 'रू'], 'THB': ['฿'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/ne.ts b/packages/common/locales/ne.ts
new file mode 100644
index 000000000000..4e87c538ec16
--- /dev/null
+++ b/packages/common/locales/ne.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ne', [['पूर्वाह्न', 'अपराह्न'], u, u], u,
+  [
+    ['आ', 'सो', 'म', 'बु', 'बि', 'शु', 'श'],
+    [
+      'आइत', 'सोम', 'मङ्गल', 'बुध', 'बिहि', 'शुक्र',
+      'शनि'
+    ],
+    [
+      'आइतबार', 'सोमबार', 'मङ्गलबार', 'बुधबार',
+      'बिहिबार', 'शुक्रबार', 'शनिबार'
+    ],
+    [
+      'आइत', 'सोम', 'मङ्गल', 'बुध', 'बिहि', 'शुक्र',
+      'शनि'
+    ]
+  ],
+  u,
+  [
+    [
+      'जन', 'फेब', 'मार्च', 'अप्र', 'मे', 'जुन', 'जुल',
+      'अग', 'सेप', 'अक्टो', 'नोभे', 'डिसे'
+    ],
+    [
+      'जनवरी', 'फेब्रुअरी', 'मार्च', 'अप्रिल',
+      'मे', 'जुन', 'जुलाई', 'अगस्ट', 'सेप्टेम्बर',
+      'अक्टोबर', 'नोभेम्बर', 'डिसेम्बर'
+    ],
+    u
+  ],
+  [
+    [
+      'जन', 'फेेब', 'मार्च', 'अप्र', 'मे', 'जुन',
+      'जुल', 'अग', 'सेप', 'अक्टो', 'नोभे', 'डिसे'
+    ],
+    [
+      'जनवरी', 'फेब्रुअरी', 'मार्च', 'अप्रिल',
+      'मे', 'जुन', 'जुलाई', 'अगस्ट', 'सेप्टेम्बर',
+      'अक्टोबर', 'नोभेम्बर', 'डिसेम्बर'
+    ],
+    u
+  ],
+  [['ईसा पूर्व', 'सन्'], u, u], 0, [6, 0],
+  ['yy/M/d', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'नेरू',
+  'नेपाली रूपैयाँ',
+  {'JPY': ['JP¥', '¥'], 'NPR': ['नेरू', 'रू'], 'THB': ['฿'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/nl-AW.ts b/packages/common/locales/nl-AW.ts
new file mode 100644
index 000000000000..4e6d9cef1f66
--- /dev/null
+++ b/packages/common/locales/nl-AW.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'nl-AW', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'], ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
+    ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], ['v.Chr.', 'n.Chr.'], ['voor Christus', 'na Christus']], 1, [6, 0],
+  ['dd-MM-yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'om\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤ -#,##0.00', '#E0'], 'Afl.', 'Arubaanse gulden', {
+    'AUD': ['AU$', '$'],
+    'AWG': ['Afl.'],
+    'CAD': ['C$', '$'],
+    'FJD': ['FJ$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'SBD': ['SI$', '$'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/nl-BE.ts b/packages/common/locales/nl-BE.ts
new file mode 100644
index 000000000000..f47baccb8a74
--- /dev/null
+++ b/packages/common/locales/nl-BE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'nl-BE', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'], ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
+    ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], ['v.Chr.', 'n.Chr.'], ['voor Christus', 'na Christus']], 1, [6, 0],
+  ['d/MM/yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'om\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Euro', {
+    'AUD': ['AU$', '$'],
+    'CAD': ['C$', '$'],
+    'FJD': ['FJ$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'SBD': ['SI$', '$'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/nl-BQ.ts b/packages/common/locales/nl-BQ.ts
new file mode 100644
index 000000000000..e4ec252b0bfa
--- /dev/null
+++ b/packages/common/locales/nl-BQ.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'nl-BQ', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'], ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
+    ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], ['v.Chr.', 'n.Chr.'], ['voor Christus', 'na Christus']], 1, [6, 0],
+  ['dd-MM-yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'om\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤ -#,##0.00', '#E0'], '$', 'Amerikaanse dollar', {
+    'AUD': ['AU$', '$'],
+    'CAD': ['C$', '$'],
+    'FJD': ['FJ$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'SBD': ['SI$', '$'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/nl-CW.ts b/packages/common/locales/nl-CW.ts
new file mode 100644
index 000000000000..f0ade661f036
--- /dev/null
+++ b/packages/common/locales/nl-CW.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'nl-CW', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'], ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
+    ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], ['v.Chr.', 'n.Chr.'], ['voor Christus', 'na Christus']], 1, [6, 0],
+  ['dd-MM-yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'om\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤ -#,##0.00', '#E0'], 'NAf.',
+  'Nederlands-Antilliaanse gulden', {
+    'ANG': ['NAf.'],
+    'AUD': ['AU$', '$'],
+    'CAD': ['C$', '$'],
+    'FJD': ['FJ$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'SBD': ['SI$', '$'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/nl-SR.ts b/packages/common/locales/nl-SR.ts
new file mode 100644
index 000000000000..4594e09ad7c3
--- /dev/null
+++ b/packages/common/locales/nl-SR.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'nl-SR', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'], ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
+    ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], ['v.Chr.', 'n.Chr.'], ['voor Christus', 'na Christus']], 1, [6, 0],
+  ['dd-MM-yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'om\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤ -#,##0.00', '#E0'], '$', 'Surinaamse dollar', {
+    'AUD': ['AU$', '$'],
+    'CAD': ['C$', '$'],
+    'FJD': ['FJ$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'SBD': ['SI$', '$'],
+    'SRD': ['$'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/nl-SX.ts b/packages/common/locales/nl-SX.ts
new file mode 100644
index 000000000000..f69cd00f5c0b
--- /dev/null
+++ b/packages/common/locales/nl-SX.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'nl-SX', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'], ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
+    ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], ['v.Chr.', 'n.Chr.'], ['voor Christus', 'na Christus']], 1, [6, 0],
+  ['dd-MM-yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'om\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤ -#,##0.00', '#E0'], 'NAf.',
+  'Nederlands-Antilliaanse gulden', {
+    'ANG': ['NAf.'],
+    'AUD': ['AU$', '$'],
+    'CAD': ['C$', '$'],
+    'FJD': ['FJ$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'SBD': ['SI$', '$'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/nl.ts b/packages/common/locales/nl.ts
new file mode 100644
index 000000000000..ad99629b7ad5
--- /dev/null
+++ b/packages/common/locales/nl.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'nl', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'], ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
+    ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['v.C.', 'n.C.'], ['v.Chr.', 'n.Chr.'], ['voor Christus', 'na Christus']], 1, [6, 0],
+  ['dd-MM-yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1} \'om\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00;¤ -#,##0.00', '#E0'], '€', 'Euro', {
+    'AUD': ['AU$', '$'],
+    'CAD': ['C$', '$'],
+    'FJD': ['FJ$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'SBD': ['SI$', '$'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/nmg.ts b/packages/common/locales/nmg.ts
new file mode 100644
index 000000000000..60d65458dba3
--- /dev/null
+++ b/packages/common/locales/nmg.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'nmg', [['maná', 'kugú'], u, u], u,
+  [
+    ['s', 'm', 's', 's', 's', 'm', 's'], ['sɔ́n', 'mɔ́n', 'smb', 'sml', 'smn', 'mbs', 'sas'],
+    [
+      'sɔ́ndɔ', 'mɔ́ndɔ', 'sɔ́ndɔ mafú mába', 'sɔ́ndɔ mafú málal',
+      'sɔ́ndɔ mafú mána', 'mabágá má sukul', 'sásadi'
+    ],
+    ['sɔ́n', 'mɔ́n', 'smb', 'sml', 'smn', 'mbs', 'sas']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['ng1', 'ng2', 'ng3', 'ng4', 'ng5', 'ng6', 'ng7', 'ng8', 'ng9', 'ng10', 'ng11', 'kris'],
+    [
+      'ngwɛn matáhra', 'ngwɛn ńmba', 'ngwɛn ńlal', 'ngwɛn ńna', 'ngwɛn ńtan',
+      'ngwɛn ńtuó', 'ngwɛn hɛmbuɛrí', 'ngwɛn lɔmbi', 'ngwɛn rɛbvuâ', 'ngwɛn wum',
+      'ngwɛn wum navǔr', 'krísimin'
+    ]
+  ],
+  u, [['BL', 'PB'], u, ['Bó Lahlɛ̄', 'Pfiɛ Burī']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FCFA', 'Fraŋ CFA BEAC',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/nn.ts b/packages/common/locales/nn.ts
new file mode 100644
index 000000000000..a888e1b9489b
--- /dev/null
+++ b/packages/common/locales/nn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'nn', [['f.m.', 'e.m.'], u, ['formiddag', 'ettermiddag']], [['f.m.', 'e.m.'], u, u],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['sø.', 'må.', 'ty.', 'on.', 'to.', 'fr.', 'la.'],
+    ['søndag', 'måndag', 'tysdag', 'onsdag', 'torsdag', 'fredag', 'laurdag'],
+    ['sø.', 'må.', 'ty.', 'on.', 'to.', 'fr.', 'la.']
+  ],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['søn', 'mån', 'tys', 'ons', 'tor', 'fre', 'lau'],
+    ['søndag', 'måndag', 'tysdag', 'onsdag', 'torsdag', 'fredag', 'laurdag'],
+    ['sø.', 'må.', 'ty.', 'on.', 'to.', 'fr.', 'la.']
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mars', 'apr.', 'mai', 'juni', 'juli', 'aug.', 'sep.', 'okt.', 'nov.', 'des.'],
+    [
+      'januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober',
+      'november', 'desember'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'des'],
+    [
+      'januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober',
+      'november', 'desember'
+    ]
+  ],
+  [['f.Kr.', 'e.Kr.'], u, u], 1, [6, 0], ['dd.MM.y', 'd. MMM y', 'd. MMMM y', 'EEEE d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', '\'kl\'. HH:mm:ss zzzz'],
+  ['{1}, {0}', u, '{1} \'kl\'. {0}', '{1} {0}'],
+  [',', ' ', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr', 'norske kroner', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NOK': ['kr'],
+    'NZD': [u, '$'],
+    'TWD': [u, '$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XAF': [],
+    'XCD': [u, '$'],
+    'XPF': []
+  },
+  plural
+];
diff --git a/packages/common/locales/nnh.ts b/packages/common/locales/nnh.ts
new file mode 100644
index 000000000000..f48f9e99e3f9
--- /dev/null
+++ b/packages/common/locales/nnh.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'nnh', [['mbaʼámbaʼ', 'ncwònzém'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    [
+      'lyɛʼɛ́ sẅíŋtè', 'mvfò lyɛ̌ʼ', 'mbɔ́ɔntè mvfò lyɛ̌ʼ',
+      'tsètsɛ̀ɛ lyɛ̌ʼ', 'mbɔ́ɔntè tsetsɛ̀ɛ lyɛ̌ʼ', 'mvfò màga lyɛ̌ʼ',
+      'màga lyɛ̌ʼ'
+    ],
+    u, u
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'saŋ tsetsɛ̀ɛ lùm', 'saŋ kàg ngwóŋ', 'saŋ lepyè shúm', 'saŋ cÿó',
+      'saŋ tsɛ̀ɛ cÿó', 'saŋ njÿoláʼ', 'saŋ tyɛ̀b tyɛ̀b mbʉ̀ŋ', 'saŋ mbʉ̀ŋ',
+      'saŋ ngwɔ̀ʼ mbÿɛ', 'saŋ tàŋa tsetsáʼ', 'saŋ mejwoŋó', 'saŋ lùm'
+    ],
+    u
+  ],
+  u, [['m.z.Y.', 'm.g.n.Y.'], u, ['mé zyé Yěsô', 'mé gÿo ńzyé Yěsô']], 1, [6, 0],
+  ['dd/MM/yy', 'd MMM, y', '\'lyɛ\'̌ʼ d \'na\' MMMM, y', 'EEEE , \'lyɛ\'̌ʼ d \'na\' MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{1}, {0}', '{1},{0}'],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'FCFA', 'feláŋ CFA',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/nus.ts b/packages/common/locales/nus.ts
new file mode 100644
index 000000000000..9611d4fb0d29
--- /dev/null
+++ b/packages/common/locales/nus.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'nus', [['RW', 'TŊ'], u, u], u,
+  [
+    ['C', 'J', 'R', 'D', 'Ŋ', 'D', 'B'],
+    ['Cäŋ', 'Jiec', 'Rɛw', 'Diɔ̱k', 'Ŋuaan', 'Dhieec', 'Bäkɛl'],
+    [
+      'Cäŋ kuɔth', 'Jiec la̱t', 'Rɛw lätni', 'Diɔ̱k lätni', 'Ŋuaan lätni',
+      'Dhieec lätni', 'Bäkɛl lätni'
+    ],
+    ['Cäŋ', 'Jiec', 'Rɛw', 'Diɔ̱k', 'Ŋuaan', 'Dhieec', 'Bäkɛl']
+  ],
+  u,
+  [
+    ['T', 'P', 'D', 'G', 'D', 'K', 'P', 'T', 'T', 'L', 'K', 'T'],
+    [
+      'Tiop', 'Pɛt', 'Duɔ̱ɔ̱', 'Guak', 'Duä', 'Kor', 'Pay', 'Thoo', 'Tɛɛ', 'Laa', 'Kur',
+      'Tid'
+    ],
+    [
+      'Tiop thar pɛt', 'Pɛt', 'Duɔ̱ɔ̱ŋ', 'Guak', 'Duät', 'Kornyoot', 'Pay yie̱tni',
+      'Tho̱o̱r', 'Tɛɛr', 'Laath', 'Kur', 'Tio̱p in di̱i̱t'
+    ]
+  ],
+  u, [['AY', 'ƐY'], u, ['A ka̱n Yecu ni dap', 'Ɛ ca Yecu dap']], 1, [6, 0],
+  ['d/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'z h:mm:ss a', 'zzzz h:mm:ss a'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '£', 'SSP',
+  {'GBP': ['GB£', '£'], 'JPY': ['JP¥', '¥'], 'SSP': ['£'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/nyn.ts b/packages/common/locales/nyn.ts
new file mode 100644
index 000000000000..289ed5f84415
--- /dev/null
+++ b/packages/common/locales/nyn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'nyn', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'K', 'R', 'S', 'N', 'T', 'M'], ['SAN', 'ORK', 'OKB', 'OKS', 'OKN', 'OKT', 'OMK'],
+    ['Sande', 'Orwokubanza', 'Orwakabiri', 'Orwakashatu', 'Orwakana', 'Orwakataano', 'Orwamukaaga'],
+    ['SAN', 'ORK', 'OKB', 'OKS', 'OKN', 'OKT', 'OMK']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['KBZ', 'KBR', 'KST', 'KKN', 'KTN', 'KMK', 'KMS', 'KMN', 'KMW', 'KKM', 'KNK', 'KNB'],
+    [
+      'Okwokubanza', 'Okwakabiri', 'Okwakashatu', 'Okwakana', 'Okwakataana', 'Okwamukaaga',
+      'Okwamushanju', 'Okwamunaana', 'Okwamwenda', 'Okwaikumi', 'Okwaikumi na kumwe',
+      'Okwaikumi na ibiri'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['Kurisito Atakaijire', 'Kurisito Yaijire']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'USh', 'Eshiringi ya Uganda',
+  {'JPY': ['JP¥', '¥'], 'UGX': ['USh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/om-KE.ts b/packages/common/locales/om-KE.ts
new file mode 100644
index 000000000000..f131715c77bc
--- /dev/null
+++ b/packages/common/locales/om-KE.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'om-KE', [['WD', 'WB'], u, u], u,
+  [
+    ['D', 'W', 'Q', 'R', 'K', 'J', 'S'], ['Dil', 'Wix', 'Qib', 'Rob', 'Kam', 'Jim', 'San'],
+    ['Dilbata', 'Wiixata', 'Qibxata', 'Roobii', 'Kamiisa', 'Jimaata', 'Sanbata'],
+    ['Dil', 'Wix', 'Qib', 'Rob', 'Kam', 'Jim', 'San']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Ama', 'Gur', 'Bit', 'Elb', 'Cam', 'Wax', 'Ado', 'Hag', 'Ful', 'Onk', 'Sad', 'Mud'],
+    [
+      'Amajjii', 'Guraandhala', 'Bitooteessa', 'Elba', 'Caamsa', 'Waxabajjii', 'Adooleessa',
+      'Hagayya', 'Fuulbana', 'Onkololeessa', 'Sadaasa', 'Muddee'
+    ]
+  ],
+  [
+    ['A', 'G', 'B', 'E', 'C', 'W', 'A', 'H', 'F', 'O', 'S', 'M'],
+    ['Ama', 'Gur', 'Bit', 'Elb', 'Cam', 'Wax', 'Ado', 'Hag', 'Ful', 'Onk', 'Sad', 'Mud'],
+    [
+      'Amajjii', 'Guraandhala', 'Bitooteessa', 'Elba', 'Caamsa', 'Waxabajjii', 'Adooleessa',
+      'Hagayya', 'Fuulbana', 'Onkololeessa', 'Sadaasa', 'Muddee'
+    ]
+  ],
+  [['KD', 'CE'], u, ['Dheengadda Jeesu', 'CE']], 0, [6, 0],
+  ['dd/MM/yy', 'dd-MMM-y', 'dd MMMM y', 'EEEE, MMMM d, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'KES',
+  {'ETB': ['Br'], 'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/om.ts b/packages/common/locales/om.ts
new file mode 100644
index 000000000000..08e7fb2ba72d
--- /dev/null
+++ b/packages/common/locales/om.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'om', [['WD', 'WB'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Dil', 'Wix', 'Qib', 'Rob', 'Kam', 'Jim', 'San'],
+    ['Dilbata', 'Wiixata', 'Qibxata', 'Roobii', 'Kamiisa', 'Jimaata', 'Sanbata'],
+    ['Dil', 'Wix', 'Qib', 'Rob', 'Kam', 'Jim', 'San']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Ama', 'Gur', 'Bit', 'Elb', 'Cam', 'Wax', 'Ado', 'Hag', 'Ful', 'Onk', 'Sad', 'Mud'],
+    [
+      'Amajjii', 'Guraandhala', 'Bitooteessa', 'Elba', 'Caamsa', 'Waxabajjii', 'Adooleessa',
+      'Hagayya', 'Fuulbana', 'Onkololeessa', 'Sadaasa', 'Muddee'
+    ]
+  ],
+  u, [['BCE', 'CE'], u, ['Dheengadda Jeesu', 'CE']], 0, [6, 0],
+  ['dd/MM/yy', 'dd-MMM-y', 'dd MMMM y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Br', 'Itoophiyaa Birrii',
+  {'ETB': ['Br'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/or.ts b/packages/common/locales/or.ts
new file mode 100644
index 000000000000..3ab141b32d41
--- /dev/null
+++ b/packages/common/locales/or.ts
@@ -0,0 +1,59 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'or', [['ପୂ', 'ଅ'], ['AM', 'PM'], u],
+  [['AM', 'ଅପରାହ୍ନ'], ['ପୂର୍ବାହ୍ନ', 'ଅପରାହ୍ନ'], u],
+  [
+    ['ର', 'ସୋ', 'ମ', 'ବୁ', 'ଗୁ', 'ଶୁ', 'ଶ'],
+    [
+      'ରବି', 'ସୋମ', 'ମଙ୍ଗଳ', 'ବୁଧ', 'ଗୁରୁ', 'ଶୁକ୍ର',
+      'ଶନି'
+    ],
+    [
+      'ରବିବାର', 'ସୋମବାର', 'ମଙ୍ଗଳବାର', 'ବୁଧବାର',
+      'ଗୁରୁବାର', 'ଶୁକ୍ରବାର', 'ଶନିବାର'
+    ],
+    [
+      'ରବି', 'ସୋମ', 'ମଙ୍ଗଳ', 'ବୁଧ', 'ଗୁରୁ', 'ଶୁକ୍ର',
+      'ଶନି'
+    ]
+  ],
+  u,
+  [
+    [
+      'ଜା', 'ଫେ', 'ମା', 'ଅ', 'ମଇ', 'ଜୁ', 'ଜୁ', 'ଅ', 'ସେ', 'ଅ',
+      'ନ', 'ଡି'
+    ],
+    [
+      'ଜାନୁଆରୀ', 'ଫେବୃଆରୀ', 'ମାର୍ଚ୍ଚ',
+      'ଅପ୍ରେଲ', 'ମଇ', 'ଜୁନ', 'ଜୁଲାଇ', 'ଅଗଷ୍ଟ',
+      'ସେପ୍ଟେମ୍ବର', 'ଅକ୍ଟୋବର', 'ନଭେମ୍ବର',
+      'ଡିସେମ୍ବର'
+    ],
+    u
+  ],
+  u,
+  [['BC', 'AD'], u, ['ଖ୍ରୀଷ୍ଟପୂର୍ବ', 'ଖ୍ରୀଷ୍ଟାବ୍ଦ']],
+  0, [0, 0], ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'],
+  ['{1}, {0}', u, '{0} ଠାରେ {1}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], '₹',
+  'ଭାରତୀୟ ଟଙ୍କା', {}, plural
+];
diff --git a/packages/common/locales/os-RU.ts b/packages/common/locales/os-RU.ts
new file mode 100644
index 000000000000..26260e6eddf9
--- /dev/null
+++ b/packages/common/locales/os-RU.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'os-RU', [['AM', 'PM'], u, ['ӕмбисбоны размӕ', 'ӕмбисбоны фӕстӕ']],
+  [['AM', 'PM'], u, u],
+  [
+    ['Х', 'К', 'Д', 'Ӕ', 'Ц', 'М', 'С'],
+    ['хцб', 'крс', 'дцг', 'ӕрт', 'цпр', 'мрб', 'сбт'],
+    [
+      'хуыцаубон', 'къуырисӕр', 'дыццӕг', 'ӕртыццӕг',
+      'цыппӕрӕм', 'майрӕмбон', 'сабат'
+    ],
+    ['хцб', 'крс', 'дцг', 'ӕрт', 'цпр', 'мрб', 'сбт']
+  ],
+  [
+    ['Х', 'К', 'Д', 'Ӕ', 'Ц', 'М', 'С'],
+    ['Хцб', 'Крс', 'Дцг', 'Ӕрт', 'Цпр', 'Мрб', 'Сбт'],
+    [
+      'Хуыцаубон', 'Къуырисӕр', 'Дыццӕг', 'Ӕртыццӕг',
+      'Цыппӕрӕм', 'Майрӕмбон', 'Сабат'
+    ],
+    ['хцб', 'крс', 'дцг', 'ӕрт', 'цпр', 'мрб', 'сбт']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'фев.', 'мар.', 'апр.', 'майы', 'июны', 'июлы', 'авг.',
+      'сен.', 'окт.', 'ноя.', 'дек.'
+    ],
+    [
+      'январы', 'февралы', 'мартъийы', 'апрелы', 'майы', 'июны',
+      'июлы', 'августы', 'сентябры', 'октябры', 'ноябры',
+      'декабры'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'Янв.', 'Февр.', 'Март.', 'Апр.', 'Май', 'Июнь', 'Июль', 'Авг.',
+      'Сент.', 'Окт.', 'Нояб.', 'Дек.'
+    ],
+    [
+      'Январь', 'Февраль', 'Мартъи', 'Апрель', 'Май', 'Июнь',
+      'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь',
+      'Декабрь'
+    ]
+  ],
+  [['н.д.а.', 'н.д.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd MMM y \'аз\'', 'd MMMM, y \'аз\'', 'EEEE, d MMMM, y \'аз\''],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'НН', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₽', 'Сом',
+  {'JPY': ['JP¥', '¥'], 'RUB': ['₽']}, plural
+];
diff --git a/packages/common/locales/os.ts b/packages/common/locales/os.ts
new file mode 100644
index 000000000000..801b55c7845b
--- /dev/null
+++ b/packages/common/locales/os.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'os', [['AM', 'PM'], u, ['ӕмбисбоны размӕ', 'ӕмбисбоны фӕстӕ']],
+  [['AM', 'PM'], u, u],
+  [
+    ['Х', 'К', 'Д', 'Ӕ', 'Ц', 'М', 'С'],
+    ['хцб', 'крс', 'дцг', 'ӕрт', 'цпр', 'мрб', 'сбт'],
+    [
+      'хуыцаубон', 'къуырисӕр', 'дыццӕг', 'ӕртыццӕг',
+      'цыппӕрӕм', 'майрӕмбон', 'сабат'
+    ],
+    ['хцб', 'крс', 'дцг', 'ӕрт', 'цпр', 'мрб', 'сбт']
+  ],
+  [
+    ['Х', 'К', 'Д', 'Ӕ', 'Ц', 'М', 'С'],
+    ['Хцб', 'Крс', 'Дцг', 'Ӕрт', 'Цпр', 'Мрб', 'Сбт'],
+    [
+      'Хуыцаубон', 'Къуырисӕр', 'Дыццӕг', 'Ӕртыццӕг',
+      'Цыппӕрӕм', 'Майрӕмбон', 'Сабат'
+    ],
+    ['хцб', 'крс', 'дцг', 'ӕрт', 'цпр', 'мрб', 'сбт']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'фев.', 'мар.', 'апр.', 'майы', 'июны', 'июлы', 'авг.',
+      'сен.', 'окт.', 'ноя.', 'дек.'
+    ],
+    [
+      'январы', 'февралы', 'мартъийы', 'апрелы', 'майы', 'июны',
+      'июлы', 'августы', 'сентябры', 'октябры', 'ноябры',
+      'декабры'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'Янв.', 'Февр.', 'Март.', 'Апр.', 'Май', 'Июнь', 'Июль', 'Авг.',
+      'Сент.', 'Окт.', 'Нояб.', 'Дек.'
+    ],
+    [
+      'Январь', 'Февраль', 'Мартъи', 'Апрель', 'Май', 'Июнь',
+      'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь',
+      'Декабрь'
+    ]
+  ],
+  [['н.д.а.', 'н.д.'], u, u], 1, [6, 0],
+  ['dd.MM.yy', 'dd MMM y \'аз\'', 'd MMMM, y \'аз\'', 'EEEE, d MMMM, y \'аз\''],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'НН', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₾', 'Лар',
+  {'GEL': ['₾'], 'JPY': ['JP¥', '¥']}, plural
+];
diff --git a/packages/common/locales/pa-Arab.ts b/packages/common/locales/pa-Arab.ts
new file mode 100644
index 000000000000..e66691c0fd6a
--- /dev/null
+++ b/packages/common/locales/pa-Arab.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'pa-Arab', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['اتوار', 'پیر', 'منگل', 'بُدھ', 'جمعرات', 'جمعہ', 'ہفتہ'], u, u
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'جنوری', 'فروری', 'مارچ', 'اپریل', 'مئ', 'جون', 'جولائی',
+      'اگست', 'ستمبر', 'اکتوبر', 'نومبر', 'دسمبر'
+    ],
+    u
+  ],
+  u, [['ايساپورو', 'سں'], u, u], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, dd MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'ر', 'روپئیہ',
+  {'JPY': ['JP¥', '¥'], 'PKR': ['ر', 'Rs'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/pa-Guru.ts b/packages/common/locales/pa-Guru.ts
new file mode 100644
index 000000000000..63bda3737261
--- /dev/null
+++ b/packages/common/locales/pa-Guru.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pa-Guru', [['ਸ.', 'ਸ਼.'], ['ਪੂ.ਦੁ.', 'ਬਾ.ਦੁ.'], u],
+  [['ਪੂ.ਦੁ.', 'ਬਾ.ਦੁ.'], u, u],
+  [
+    ['ਐ', 'ਸੋ', 'ਮੰ', 'ਬੁੱ', 'ਵੀ', 'ਸ਼ੁੱ', 'ਸ਼'],
+    [
+      'ਐਤ', 'ਸੋਮ', 'ਮੰਗਲ', 'ਬੁੱਧ', 'ਵੀਰ', 'ਸ਼ੁੱਕਰ',
+      'ਸ਼ਨਿੱਚਰ'
+    ],
+    [
+      'ਐਤਵਾਰ', 'ਸੋਮਵਾਰ', 'ਮੰਗਲਵਾਰ', 'ਬੁੱਧਵਾਰ',
+      'ਵੀਰਵਾਰ', 'ਸ਼ੁੱਕਰਵਾਰ', 'ਸ਼ਨਿੱਚਰਵਾਰ'
+    ],
+    [
+      'ਐਤ', 'ਸੋਮ', 'ਮੰਗ', 'ਬੁੱਧ', 'ਵੀਰ', 'ਸ਼ੁੱਕ',
+      'ਸ਼ਨਿੱ'
+    ]
+  ],
+  u,
+  [
+    [
+      'ਜ', 'ਫ਼', 'ਮਾ', 'ਅ', 'ਮ', 'ਜੂ', 'ਜੁ', 'ਅ', 'ਸ', 'ਅ', 'ਨ', 'ਦ'
+    ],
+    [
+      'ਜਨ', 'ਫ਼ਰ', 'ਮਾਰਚ', 'ਅਪ੍ਰੈ', 'ਮਈ', 'ਜੂਨ',
+      'ਜੁਲਾ', 'ਅਗ', 'ਸਤੰ', 'ਅਕਤੂ', 'ਨਵੰ', 'ਦਸੰ'
+    ],
+    [
+      'ਜਨਵਰੀ', 'ਫ਼ਰਵਰੀ', 'ਮਾਰਚ', 'ਅਪ੍ਰੈਲ', 'ਮਈ',
+      'ਜੂਨ', 'ਜੁਲਾਈ', 'ਅਗਸਤ', 'ਸਤੰਬਰ', 'ਅਕਤੂਬਰ',
+      'ਨਵੰਬਰ', 'ਦਸੰਬਰ'
+    ]
+  ],
+  u,
+  [
+    ['ਈ.ਪੂ.', 'ਸੰਨ'], ['ਈ. ਪੂ.', 'ਸੰਨ'],
+    ['ਈਸਵੀ ਪੂਰਵ', 'ਈਸਵੀ ਸੰਨ']
+  ],
+  0, [0, 0], ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '[#E0]'], '₹',
+  'ਭਾਰਤੀ ਰੁਪਇਆ',
+  {'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/pa.ts b/packages/common/locales/pa.ts
new file mode 100644
index 000000000000..378422e2c426
--- /dev/null
+++ b/packages/common/locales/pa.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pa', [['ਸ.', 'ਸ਼.'], ['ਪੂ.ਦੁ.', 'ਬਾ.ਦੁ.'], u],
+  [['ਪੂ.ਦੁ.', 'ਬਾ.ਦੁ.'], u, u],
+  [
+    ['ਐ', 'ਸੋ', 'ਮੰ', 'ਬੁੱ', 'ਵੀ', 'ਸ਼ੁੱ', 'ਸ਼'],
+    [
+      'ਐਤ', 'ਸੋਮ', 'ਮੰਗਲ', 'ਬੁੱਧ', 'ਵੀਰ', 'ਸ਼ੁੱਕਰ',
+      'ਸ਼ਨਿੱਚਰ'
+    ],
+    [
+      'ਐਤਵਾਰ', 'ਸੋਮਵਾਰ', 'ਮੰਗਲਵਾਰ', 'ਬੁੱਧਵਾਰ',
+      'ਵੀਰਵਾਰ', 'ਸ਼ੁੱਕਰਵਾਰ', 'ਸ਼ਨਿੱਚਰਵਾਰ'
+    ],
+    [
+      'ਐਤ', 'ਸੋਮ', 'ਮੰਗ', 'ਬੁੱਧ', 'ਵੀਰ', 'ਸ਼ੁੱਕ',
+      'ਸ਼ਨਿੱ'
+    ]
+  ],
+  u,
+  [
+    [
+      'ਜ', 'ਫ਼', 'ਮਾ', 'ਅ', 'ਮ', 'ਜੂ', 'ਜੁ', 'ਅ', 'ਸ', 'ਅ', 'ਨ', 'ਦ'
+    ],
+    [
+      'ਜਨ', 'ਫ਼ਰ', 'ਮਾਰਚ', 'ਅਪ੍ਰੈ', 'ਮਈ', 'ਜੂਨ',
+      'ਜੁਲਾ', 'ਅਗ', 'ਸਤੰ', 'ਅਕਤੂ', 'ਨਵੰ', 'ਦਸੰ'
+    ],
+    [
+      'ਜਨਵਰੀ', 'ਫ਼ਰਵਰੀ', 'ਮਾਰਚ', 'ਅਪ੍ਰੈਲ', 'ਮਈ',
+      'ਜੂਨ', 'ਜੁਲਾਈ', 'ਅਗਸਤ', 'ਸਤੰਬਰ', 'ਅਕਤੂਬਰ',
+      'ਨਵੰਬਰ', 'ਦਸੰਬਰ'
+    ]
+  ],
+  u,
+  [
+    ['ਈ.ਪੂ.', 'ਸੰਨ'], ['ਈ. ਪੂ.', 'ਸੰਨ'],
+    ['ਈਸਵੀ ਪੂਰਵ', 'ਈਸਵੀ ਸੰਨ']
+  ],
+  0, [0, 0], ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '[#E0]'], '₹',
+  'ਭਾਰਤੀ ਰੁਪਇਆ',
+  {'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/package.json b/packages/common/locales/package.json
new file mode 100644
index 000000000000..47fd7ad86e1d
--- /dev/null
+++ b/packages/common/locales/package.json
@@ -0,0 +1,4 @@
+{
+  "description": "This directory contains UMD files which by its nature are not side-effect free. The parent package.json marks the whole @angular/common package as side-effect free, so if this directory is not excluded from that, build-optimizer will mark the contents as side-effect free and uglify will incorrectly remove all needed localization code.",
+  "sideEffects": true
+}
diff --git a/packages/common/locales/pl.ts b/packages/common/locales/pl.ts
new file mode 100644
index 000000000000..c1e7b04672c7
--- /dev/null
+++ b/packages/common/locales/pl.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && !(i === 1) && i % 10 === Math.floor(i % 10) && i % 10 >= 0 && i % 10 <= 1 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 12 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export default [
+  'pl', [['a', 'p'], ['AM', 'PM'], u], u,
+  [
+    ['n', 'p', 'w', 'ś', 'c', 'p', 's'], ['niedz.', 'pon.', 'wt.', 'śr.', 'czw.', 'pt.', 'sob.'],
+    ['niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota'],
+    ['nie', 'pon', 'wto', 'śro', 'czw', 'pią', 'sob']
+  ],
+  [
+    ['N', 'P', 'W', 'Ś', 'C', 'P', 'S'], ['niedz.', 'pon.', 'wt.', 'śr.', 'czw.', 'pt.', 'sob.'],
+    ['niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota'],
+    ['nie', 'pon', 'wto', 'śro', 'czw', 'pią', 'sob']
+  ],
+  [
+    ['s', 'l', 'm', 'k', 'm', 'c', 'l', 's', 'w', 'p', 'l', 'g'],
+    ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'],
+    [
+      'stycznia', 'lutego', 'marca', 'kwietnia', 'maja', 'czerwca', 'lipca', 'sierpnia',
+      'września', 'października', 'listopada', 'grudnia'
+    ]
+  ],
+  [
+    ['S', 'L', 'M', 'K', 'M', 'C', 'L', 'S', 'W', 'P', 'L', 'G'],
+    ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'],
+    [
+      'styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień',
+      'wrzesień', 'październik', 'listopad', 'grudzień'
+    ]
+  ],
+  [['p.n.e.', 'n.e.'], u, ['przed naszą erą', 'naszej ery']], 1, [6, 0],
+  ['dd.MM.y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'zł', 'złoty polski', {
+    'AUD': [u, '$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'PLN': ['zł'],
+    'RON': [u, 'lej'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/prg.ts b/packages/common/locales/prg.ts
new file mode 100644
index 000000000000..920be1f4b59f
--- /dev/null
+++ b/packages/common/locales/prg.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (n % 10 === 0 || n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 19 ||
+      v === 2 && f % 100 === Math.floor(f % 100) && f % 100 >= 11 && f % 100 <= 19)
+    return 0;
+  if (n % 10 === 1 && !(n % 100 === 11) || v === 2 && f % 10 === 1 && !(f % 100 === 11) ||
+      !(v === 2) && f % 10 === 1)
+    return 1;
+  return 5;
+}
+
+export default [
+  'prg', [['AM', 'PM'], u, u], u,
+  [['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], u, u], u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['M01', 'M02', 'M03', 'M04', 'M05', 'M06', 'M07', 'M08', 'M09', 'M10', 'M11', 'M12'], u
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], u, u,
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ps.ts b/packages/common/locales/ps.ts
new file mode 100644
index 000000000000..7d97363938d4
--- /dev/null
+++ b/packages/common/locales/ps.ts
@@ -0,0 +1,55 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ps', [['غ.م.', 'غ.و.'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['يونۍ', 'دونۍ', 'درېنۍ', 'څلرنۍ', 'پينځنۍ', 'جمعه', 'اونۍ'], u,
+    u
+  ],
+  u,
+  [
+    ['ج', 'ف', 'م', 'ا', 'م', 'ج', 'ج', 'ا', 'س', 'ا', 'ن', 'د'],
+    [
+      'جنوري', 'فبروري', 'مارچ', 'اپریل', 'مۍ', 'جون', 'جولای',
+      'اگست', 'سېپتمبر', 'اکتوبر', 'نومبر', 'دسمبر'
+    ],
+    u
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'جنوري', 'فبروري', 'مارچ', 'اپریل', 'مۍ', 'جون', 'جولای',
+      'اگست', 'سپتمبر', 'اکتوبر', 'نومبر', 'دسمبر'
+    ],
+    [
+      'جنوري', 'فېبروري', 'مارچ', 'اپریل', 'مۍ', 'جون', 'جولای',
+      'اگست', 'سپتمبر', 'اکتوبر', 'نومبر', 'دسمبر'
+    ]
+  ],
+  [
+    ['له میلاد وړاندې', 'م.'], u,
+    ['له میلاد څخه وړاندې', 'له میلاد څخه وروسته']
+  ],
+  6, [4, 5], ['y/M/d', 'y MMM d', 'د y د MMMM d', 'EEEE د y د MMMM d'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss (z)', 'H:mm:ss (zzzz)'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '\u200e+', '\u200e−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '؋', 'افغانۍ',
+  {'AFN': ['؋'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/pt-AO.ts b/packages/common/locales/pt-AO.ts
new file mode 100644
index 000000000000..a6d6ca6055da
--- /dev/null
+++ b/packages/common/locales/pt-AO.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-AO', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'Kz', 'Kwanza angolano', {
+    'AOA': ['Kz'],
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt-CH.ts b/packages/common/locales/pt-CH.ts
new file mode 100644
index 000000000000..2cb83ea622f4
--- /dev/null
+++ b/packages/common/locales/pt-CH.ts
@@ -0,0 +1,55 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-CH', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'CHF', 'franco suíço', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt-CV.ts b/packages/common/locales/pt-CV.ts
new file mode 100644
index 000000000000..99fa665ebdb3
--- /dev/null
+++ b/packages/common/locales/pt-CV.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-CV', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '​', 'escudo cabo-verdiano', {
+    'AUD': ['AU$', '$'],
+    'CVE': ['​'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['​PTE'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt-GQ.ts b/packages/common/locales/pt-GQ.ts
new file mode 100644
index 000000000000..a1d0bb2860fe
--- /dev/null
+++ b/packages/common/locales/pt-GQ.ts
@@ -0,0 +1,55 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-GQ', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FCFA', 'Franco CFA (BEAC)', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt-GW.ts b/packages/common/locales/pt-GW.ts
new file mode 100644
index 000000000000..d353ffab6f6b
--- /dev/null
+++ b/packages/common/locales/pt-GW.ts
@@ -0,0 +1,55 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-GW', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'CFA', 'franco CFA (BCEAO)', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt-LU.ts b/packages/common/locales/pt-LU.ts
new file mode 100644
index 000000000000..d774fba324aa
--- /dev/null
+++ b/packages/common/locales/pt-LU.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-LU', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'LUF': ['F'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt-MO.ts b/packages/common/locales/pt-MO.ts
new file mode 100644
index 000000000000..b44a4debbf0b
--- /dev/null
+++ b/packages/common/locales/pt-MO.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-MO', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 0, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'MOP$', 'Pataca de Macau', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'MOP': ['MOP$'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt-MZ.ts b/packages/common/locales/pt-MZ.ts
new file mode 100644
index 000000000000..016b8d1953b4
--- /dev/null
+++ b/packages/common/locales/pt-MZ.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-MZ', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 0, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'MTn', 'Metical de Moçambique', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'MZN': ['MTn'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt-PT.ts b/packages/common/locales/pt-PT.ts
new file mode 100644
index 000000000000..bbf87bf9b645
--- /dev/null
+++ b/packages/common/locales/pt-PT.ts
@@ -0,0 +1,55 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-PT', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt-ST.ts b/packages/common/locales/pt-ST.ts
new file mode 100644
index 000000000000..4aafc6d5e0a1
--- /dev/null
+++ b/packages/common/locales/pt-ST.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-ST', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'Db', 'São Tomé & Príncipe Dobra (2018)', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'STN': ['Db'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt-TL.ts b/packages/common/locales/pt-TL.ts
new file mode 100644
index 000000000000..5365c6c4d4a3
--- /dev/null
+++ b/packages/common/locales/pt-TL.ts
@@ -0,0 +1,55 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt-TL', [['a.m.', 'p.m.'], u, ['da manhã', 'da tarde']],
+  [['a.m.', 'p.m.'], u, ['manhã', 'tarde']],
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 1, [6, 0],
+  ['dd/MM/yy', 'dd/MM/y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'às\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'US$', 'dólar dos Estados Unidos', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['​'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/pt.ts b/packages/common/locales/pt.ts
new file mode 100644
index 000000000000..2cd8436b06bc
--- /dev/null
+++ b/packages/common/locales/pt.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === Math.floor(i) && i >= 0 && i <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'pt', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'], ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb'],
+    [
+      'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira',
+      'sábado'
+    ],
+    ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+    [
+      'janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro',
+      'outubro', 'novembro', 'dezembro'
+    ]
+  ],
+  u, [['a.C.', 'd.C.'], u, ['antes de Cristo', 'depois de Cristo']], 0, [6, 0],
+  ['dd/MM/y', 'd \'de\' MMM \'de\' y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'R$', 'Real brasileiro', {
+    'AUD': ['AU$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'PTE': ['Esc.'],
+    'RON': [u, 'L'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/qu-BO.ts b/packages/common/locales/qu-BO.ts
new file mode 100644
index 000000000000..0e8ac68d495f
--- /dev/null
+++ b/packages/common/locales/qu-BO.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'qu-BO', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'X', 'J', 'V', 'S'], ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sab'],
+    ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
+    ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sab']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Set', 'Oct', 'Nov', 'Dic'],
+    [
+      'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Setiembre',
+      'Octubre', 'Noviembre', 'Diciembre'
+    ]
+  ],
+  u, [['BCE', 'dC'], ['BCE', 'd.C.'], u], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{0} {1}', '{1} {0}'],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], 'Bs', 'BOB',
+  {'BOB': ['Bs'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/qu-EC.ts b/packages/common/locales/qu-EC.ts
new file mode 100644
index 000000000000..58aae1d7de35
--- /dev/null
+++ b/packages/common/locales/qu-EC.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'qu-EC', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'X', 'J', 'V', 'S'], ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sab'],
+    ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
+    ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sab']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Set', 'Oct', 'Nov', 'Dic'],
+    [
+      'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Setiembre',
+      'Octubre', 'Noviembre', 'Diciembre'
+    ]
+  ],
+  u, [['BCE', 'dC'], ['BCE', 'd.C.'], u], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{0} {1}', '{1} {0}'],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], '$', 'USD', {'JPY': ['JP¥', '¥']}, plural
+];
diff --git a/packages/common/locales/qu.ts b/packages/common/locales/qu.ts
new file mode 100644
index 000000000000..0d029aad9383
--- /dev/null
+++ b/packages/common/locales/qu.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'qu', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'X', 'J', 'V', 'S'], ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sab'],
+    ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
+    ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sab']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Set', 'Oct', 'Nov', 'Dic'],
+    [
+      'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Setiembre',
+      'Octubre', 'Noviembre', 'Diciembre'
+    ]
+  ],
+  u, [['BCE', 'dC'], ['BCE', 'd.C.'], u], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, '{0} {1}', '{1} {0}'],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '¤ #,##0.00', '#E0'], 'S/', 'PEN',
+  {'JPY': ['JP¥', '¥'], 'PEN': ['S/'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/rm.ts b/packages/common/locales/rm.ts
new file mode 100644
index 000000000000..a5f99c0e9f94
--- /dev/null
+++ b/packages/common/locales/rm.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'rm', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'G', 'M', 'M', 'G', 'V', 'S'], ['du', 'gli', 'ma', 'me', 'gie', 've', 'so'],
+    ['dumengia', 'glindesdi', 'mardi', 'mesemna', 'gievgia', 'venderdi', 'sonda'],
+    ['du', 'gli', 'ma', 'me', 'gie', 've', 'so']
+  ],
+  u,
+  [
+    ['S', 'F', 'M', 'A', 'M', 'Z', 'F', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'schan.', 'favr.', 'mars', 'avr.', 'matg', 'zercl.', 'fan.', 'avust', 'sett.', 'oct.', 'nov.',
+      'dec.'
+    ],
+    [
+      'schaner', 'favrer', 'mars', 'avrigl', 'matg', 'zercladur', 'fanadur', 'avust', 'settember',
+      'october', 'november', 'december'
+    ]
+  ],
+  u, [['av. Cr.', 's. Cr.'], u, ['avant Cristus', 'suenter Cristus']], 1, [6, 0],
+  ['dd-MM-yy', 'dd-MM-y', 'd \'da\' MMMM y', 'EEEE, \'ils\' d \'da\' MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', '’', ';', '%', '+', '−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'CHF', 'franc svizzer',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/rn.ts b/packages/common/locales/rn.ts
new file mode 100644
index 000000000000..98c177214b84
--- /dev/null
+++ b/packages/common/locales/rn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'rn', [['Z.MU.', 'Z.MW.'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['cu.', 'mbe.', 'kab.', 'gtu.', 'kan.', 'gnu.', 'gnd.'],
+    [
+      'Ku w’indwi', 'Ku wa mbere', 'Ku wa kabiri', 'Ku wa gatatu', 'Ku wa kane', 'Ku wa gatanu',
+      'Ku wa gatandatu'
+    ],
+    ['cu.', 'mbe.', 'kab.', 'gtu.', 'kan.', 'gnu.', 'gnd.']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'Mut.', 'Gas.', 'Wer.', 'Mat.', 'Gic.', 'Kam.', 'Nya.', 'Kan.', 'Nze.', 'Ukw.', 'Ugu.', 'Uku.'
+    ],
+    [
+      'Nzero', 'Ruhuhuma', 'Ntwarante', 'Ndamukiza', 'Rusama', 'Ruheshi', 'Mukakaro', 'Nyandagaro',
+      'Nyakanga', 'Gitugutu', 'Munyonyo', 'Kigarama'
+    ]
+  ],
+  u, [['Mb.Y.', 'Ny.Y'], u, ['Mbere ya Yezu', 'Nyuma ya Yezu']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00¤', '#E0'], 'FBu', 'Ifaranga ry’Uburundi',
+  {'BIF': ['FBu'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ro-MD.ts b/packages/common/locales/ro-MD.ts
new file mode 100644
index 000000000000..0fdea99a6f3a
--- /dev/null
+++ b/packages/common/locales/ro-MD.ts
@@ -0,0 +1,66 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (!(v === 0) || n === 0 ||
+      !(n === 1) && n % 100 === Math.floor(n % 100) && n % 100 >= 1 && n % 100 <= 19)
+    return 3;
+  return 5;
+}
+
+export default [
+  'ro-MD', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['D', 'L', 'Ma', 'Mi', 'J', 'V', 'S'], ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
+    ['duminică', 'luni', 'marți', 'miercuri', 'joi', 'vineri', 'sâmbătă'],
+    ['Du', 'Lu', 'Ma', 'Mi', 'Jo', 'Vi', 'Sâ']
+  ],
+  u,
+  [
+    ['I', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ian.', 'feb.', 'mar.', 'apr.', 'mai', 'iun.', 'iul.', 'aug.', 'sept.', 'oct.', 'nov.', 'dec.'
+    ],
+    [
+      'ianuarie', 'februarie', 'martie', 'aprilie', 'mai', 'iunie', 'iulie', 'august', 'septembrie',
+      'octombrie', 'noiembrie', 'decembrie'
+    ]
+  ],
+  u, [['î.Hr.', 'd.Hr.'], u, ['înainte de Hristos', 'după Hristos']], 1, [6, 0],
+  ['dd.MM.y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'L', 'leu moldovenesc', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MDL': ['L'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ro.ts b/packages/common/locales/ro.ts
new file mode 100644
index 000000000000..c25beb59d920
--- /dev/null
+++ b/packages/common/locales/ro.ts
@@ -0,0 +1,65 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (!(v === 0) || n === 0 ||
+      !(n === 1) && n % 100 === Math.floor(n % 100) && n % 100 >= 1 && n % 100 <= 19)
+    return 3;
+  return 5;
+}
+
+export default [
+  'ro', [['a.m.', 'p.m.'], u, u], u,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dum.', 'lun.', 'mar.', 'mie.', 'joi', 'vin.', 'sâm.'],
+    ['duminică', 'luni', 'marți', 'miercuri', 'joi', 'vineri', 'sâmbătă'],
+    ['du.', 'lu.', 'ma.', 'mi.', 'joi', 'vi.', 'sâ.']
+  ],
+  u,
+  [
+    ['I', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'ian.', 'feb.', 'mar.', 'apr.', 'mai', 'iun.', 'iul.', 'aug.', 'sept.', 'oct.', 'nov.', 'dec.'
+    ],
+    [
+      'ianuarie', 'februarie', 'martie', 'aprilie', 'mai', 'iunie', 'iulie', 'august', 'septembrie',
+      'octombrie', 'noiembrie', 'decembrie'
+    ]
+  ],
+  u, [['î.Hr.', 'd.Hr.'], u, ['înainte de Hristos', 'după Hristos']], 1, [6, 0],
+  ['dd.MM.y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'RON', 'leu românesc', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/rof.ts b/packages/common/locales/rof.ts
new file mode 100644
index 000000000000..05723ee8626f
--- /dev/null
+++ b/packages/common/locales/rof.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'rof', [['kang’ama', 'kingoto'], u, u], u,
+  [
+    ['2', '3', '4', '5', '6', '7', '1'], ['Ijp', 'Ijt', 'Ijn', 'Ijtn', 'Alh', 'Iju', 'Ijm'],
+    ['Ijumapili', 'Ijumatatu', 'Ijumanne', 'Ijumatano', 'Alhamisi', 'Ijumaa', 'Ijumamosi'],
+    ['Ijp', 'Ijt', 'Ijn', 'Ijtn', 'Alh', 'Iju', 'Ijm']
+  ],
+  u,
+  [
+    ['K', 'K', 'K', 'K', 'T', 'S', 'S', 'N', 'T', 'I', 'I', 'I'],
+    ['M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12'],
+    [
+      'Mweri wa kwanza', 'Mweri wa kaili', 'Mweri wa katatu', 'Mweri wa kaana', 'Mweri wa tanu',
+      'Mweri wa sita', 'Mweri wa saba', 'Mweri wa nane', 'Mweri wa tisa', 'Mweri wa ikumi',
+      'Mweri wa ikumi na moja', 'Mweri wa ikumi na mbili'
+    ]
+  ],
+  u, [['KM', 'BM'], u, ['Kabla ya Mayesu', 'Baada ya Mayesu']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'TSh', 'heleri sa Tanzania',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/root.ts b/packages/common/locales/root.ts
new file mode 100644
index 000000000000..dbdc1815c566
--- /dev/null
+++ b/packages/common/locales/root.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'root', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/locales/ru-BY.ts b/packages/common/locales/ru-BY.ts
new file mode 100644
index 000000000000..565ac20904f4
--- /dev/null
+++ b/packages/common/locales/ru-BY.ts
@@ -0,0 +1,89 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && i % 10 === 0 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export default [
+  'ru-BY', [['AM', 'PM'], u, u], u,
+  [
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'], u,
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['В', 'П', 'В', 'С', 'Ч', 'П', 'С'],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'мар.', 'апр.', 'мая', 'июн.', 'июл.', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
+      'июля', 'августа', 'сентября', 'октября', 'ноября',
+      'декабря'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'март', 'апр.', 'май', 'июнь', 'июль', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
+      'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь',
+      'декабрь'
+    ]
+  ],
+  [
+    ['до н.э.', 'н.э.'], ['до н. э.', 'н. э.'],
+    ['до Рождества Христова', 'от Рождества Христова']
+  ],
+  1, [6, 0], ['dd.MM.y', 'd MMM y \'г\'.', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'не число', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'Br', 'белорусский рубль', {
+    'BYN': ['Br'],
+    'GEL': [u, 'ლ'],
+    'RON': [u, 'L'],
+    'RUB': ['₽'],
+    'THB': ['฿'],
+    'TMT': ['ТМТ'],
+    'TWD': ['NT$'],
+    'UAH': ['₴'],
+    'XXX': ['XXXX']
+  },
+  plural
+];
diff --git a/packages/common/locales/ru-KG.ts b/packages/common/locales/ru-KG.ts
new file mode 100644
index 000000000000..d4ccbe982394
--- /dev/null
+++ b/packages/common/locales/ru-KG.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && i % 10 === 0 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export default [
+  'ru-KG', [['AM', 'PM'], u, u], u,
+  [
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'], u,
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['В', 'П', 'В', 'С', 'Ч', 'П', 'С'],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'мар.', 'апр.', 'мая', 'июн.', 'июл.', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
+      'июля', 'августа', 'сентября', 'октября', 'ноября',
+      'декабря'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'март', 'апр.', 'май', 'июнь', 'июль', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
+      'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь',
+      'декабрь'
+    ]
+  ],
+  [
+    ['до н.э.', 'н.э.'], ['до н. э.', 'н. э.'],
+    ['до Рождества Христова', 'от Рождества Христова']
+  ],
+  1, [6, 0], ['dd.MM.y', 'd MMM y \'г\'.', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'не число', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'сом', 'киргизский сом', {
+    'GEL': [u, 'ლ'],
+    'KGS': ['сом'],
+    'RON': [u, 'L'],
+    'RUB': ['₽'],
+    'RUR': ['р.'],
+    'THB': ['฿'],
+    'TMT': ['ТМТ'],
+    'TWD': ['NT$'],
+    'UAH': ['₴'],
+    'XXX': ['XXXX']
+  },
+  plural
+];
diff --git a/packages/common/locales/ru-KZ.ts b/packages/common/locales/ru-KZ.ts
new file mode 100644
index 000000000000..29d4ee00c0a8
--- /dev/null
+++ b/packages/common/locales/ru-KZ.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && i % 10 === 0 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export default [
+  'ru-KZ', [['AM', 'PM'], u, u], u,
+  [
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'], u,
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['В', 'П', 'В', 'С', 'Ч', 'П', 'С'],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'мар.', 'апр.', 'мая', 'июн.', 'июл.', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
+      'июля', 'августа', 'сентября', 'октября', 'ноября',
+      'декабря'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'март', 'апр.', 'май', 'июнь', 'июль', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
+      'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь',
+      'декабрь'
+    ]
+  ],
+  [
+    ['до н.э.', 'н.э.'], ['до н. э.', 'н. э.'],
+    ['до Рождества Христова', 'от Рождества Христова']
+  ],
+  1, [6, 0], ['dd.MM.y', 'd MMM y \'г\'.', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'не число', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '₸', 'казахский тенге', {
+    'GEL': [u, 'ლ'],
+    'KZT': ['₸'],
+    'RON': [u, 'L'],
+    'RUB': ['₽'],
+    'RUR': ['р.'],
+    'THB': ['฿'],
+    'TMT': ['ТМТ'],
+    'TWD': ['NT$'],
+    'UAH': ['₴'],
+    'XXX': ['XXXX']
+  },
+  plural
+];
diff --git a/packages/common/locales/ru-MD.ts b/packages/common/locales/ru-MD.ts
new file mode 100644
index 000000000000..d4d738e3bfe9
--- /dev/null
+++ b/packages/common/locales/ru-MD.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && i % 10 === 0 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export default [
+  'ru-MD', [['AM', 'PM'], u, u], u,
+  [
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'], u,
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['В', 'П', 'В', 'С', 'Ч', 'П', 'С'],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'мар.', 'апр.', 'мая', 'июн.', 'июл.', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
+      'июля', 'августа', 'сентября', 'октября', 'ноября',
+      'декабря'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'март', 'апр.', 'май', 'июнь', 'июль', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
+      'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь',
+      'декабрь'
+    ]
+  ],
+  [
+    ['до н.э.', 'н.э.'], ['до н. э.', 'н. э.'],
+    ['до Рождества Христова', 'от Рождества Христова']
+  ],
+  1, [6, 0], ['dd.MM.y', 'd MMM y \'г\'.', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'не число', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'L', 'молдавский лей', {
+    'GEL': [u, 'ლ'],
+    'MDL': ['L'],
+    'RON': [u, 'L'],
+    'RUB': ['₽'],
+    'RUR': ['р.'],
+    'THB': ['฿'],
+    'TMT': ['ТМТ'],
+    'TWD': ['NT$'],
+    'UAH': ['₴'],
+    'XXX': ['XXXX']
+  },
+  plural
+];
diff --git a/packages/common/locales/ru-UA.ts b/packages/common/locales/ru-UA.ts
new file mode 100644
index 000000000000..ed8aa7cafd49
--- /dev/null
+++ b/packages/common/locales/ru-UA.ts
@@ -0,0 +1,89 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && i % 10 === 0 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export default [
+  'ru-UA', [['AM', 'PM'], u, u], u,
+  [
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'], u,
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['В', 'П', 'В', 'С', 'Ч', 'П', 'С'],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'мар.', 'апр.', 'мая', 'июн.', 'июл.', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
+      'июля', 'августа', 'сентября', 'октября', 'ноября',
+      'декабря'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'март', 'апр.', 'май', 'июнь', 'июль', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
+      'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь',
+      'декабрь'
+    ]
+  ],
+  [
+    ['до н.э.', 'н.э.'], ['до н. э.', 'н. э.'],
+    ['до Рождества Христова', 'от Рождества Христова']
+  ],
+  1, [6, 0], ['dd.MM.y', 'd MMM y \'г\'.', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'не число', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '₴', 'украинская гривна', {
+    'GEL': [u, 'ლ'],
+    'RON': [u, 'L'],
+    'RUB': ['₽'],
+    'RUR': ['р.'],
+    'THB': ['฿'],
+    'TMT': ['ТМТ'],
+    'TWD': ['NT$'],
+    'UAH': ['₴'],
+    'XXX': ['XXXX']
+  },
+  plural
+];
diff --git a/packages/common/locales/ru.ts b/packages/common/locales/ru.ts
new file mode 100644
index 000000000000..614f01d31f0c
--- /dev/null
+++ b/packages/common/locales/ru.ts
@@ -0,0 +1,89 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && i % 10 === 0 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export default [
+  'ru', [['AM', 'PM'], u, u], u,
+  [
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'], u,
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['В', 'П', 'В', 'С', 'Ч', 'П', 'С'],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    [
+      'воскресенье', 'понедельник', 'вторник', 'среда',
+      'четверг', 'пятница', 'суббота'
+    ],
+    ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'мар.', 'апр.', 'мая', 'июн.', 'июл.', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
+      'июля', 'августа', 'сентября', 'октября', 'ноября',
+      'декабря'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв.', 'февр.', 'март', 'апр.', 'май', 'июнь', 'июль', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
+      'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь',
+      'декабрь'
+    ]
+  ],
+  [
+    ['до н.э.', 'н.э.'], ['до н. э.', 'н. э.'],
+    ['до Рождества Христова', 'от Рождества Христова']
+  ],
+  1, [6, 0], ['dd.MM.y', 'd MMM y \'г\'.', 'd MMMM y \'г\'.', 'EEEE, d MMMM y \'г\'.'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'не число', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '₽', 'российский рубль', {
+    'GEL': [u, 'ლ'],
+    'RON': [u, 'L'],
+    'RUB': ['₽'],
+    'RUR': ['р.'],
+    'THB': ['฿'],
+    'TMT': ['ТМТ'],
+    'TWD': ['NT$'],
+    'UAH': ['₴'],
+    'XXX': ['XXXX']
+  },
+  plural
+];
diff --git a/packages/common/locales/rw.ts b/packages/common/locales/rw.ts
new file mode 100644
index 000000000000..90525bc73c88
--- /dev/null
+++ b/packages/common/locales/rw.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'rw', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['cyu.', 'mbe.', 'kab.', 'gtu.', 'kan.', 'gnu.', 'gnd.'],
+    [
+      'Ku cyumweru', 'Kuwa mbere', 'Kuwa kabiri', 'Kuwa gatatu', 'Kuwa kane', 'Kuwa gatanu',
+      'Kuwa gatandatu'
+    ],
+    ['cyu.', 'mbe.', 'kab.', 'gtu.', 'kan.', 'gnu.', 'gnd.']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'mut.', 'gas.', 'wer.', 'mat.', 'gic.', 'kam.', 'nya.', 'kan.', 'nze.', 'ukw.', 'ugu.', 'uku.'
+    ],
+    [
+      'Mutarama', 'Gashyantare', 'Werurwe', 'Mata', 'Gicuransi', 'Kamena', 'Nyakanga', 'Kanama',
+      'Nzeli', 'Ukwakira', 'Ugushyingo', 'Ukuboza'
+    ]
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'RF', 'RWF',
+  {'JPY': ['JP¥', '¥'], 'RWF': ['RF'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/rwk.ts b/packages/common/locales/rwk.ts
new file mode 100644
index 000000000000..8d59b267c825
--- /dev/null
+++ b/packages/common/locales/rwk.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'rwk', [['utuko', 'kyiukonyi'], u, u], u,
+  [
+    ['J', 'J', 'J', 'J', 'A', 'I', 'J'], ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo'],
+    ['Jumapilyi', 'Jumatatuu', 'Jumanne', 'Jumatanu', 'Alhamisi', 'Ijumaa', 'Jumamosi'],
+    ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Machi', 'Aprilyi', 'Mei', 'Junyi', 'Julyai', 'Agusti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Kristu', 'Baada ya Kristu']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'TSh', 'Shilingi ya Tanzania',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/sah.ts b/packages/common/locales/sah.ts
new file mode 100644
index 000000000000..3f688f29c1eb
--- /dev/null
+++ b/packages/common/locales/sah.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'sah', [['ЭИ', 'ЭК'], u, u], u,
+  [
+    ['Б', 'Б', 'О', 'С', 'Ч', 'Б', 'С'],
+    ['бс', 'бн', 'оп', 'сэ', 'чп', 'бэ', 'сб'],
+    [
+      'баскыһыанньа', 'бэнидиэнньик', 'оптуорунньук',
+      'сэрэдэ', 'чэппиэр', 'Бээтиҥсэ', 'субуота'
+    ],
+    ['бс', 'бн', 'оп', 'сэ', 'чп', 'бэ', 'сб']
+  ],
+  u,
+  [
+    ['Т', 'О', 'К', 'М', 'Ы', 'Б', 'О', 'А', 'Б', 'А', 'С', 'А'],
+    [
+      'Тохс', 'Олун', 'Клн', 'Мсу', 'Ыам', 'Бэс', 'Отй', 'Атр', 'Блҕ',
+      'Алт', 'Сэт', 'Ахс'
+    ],
+    [
+      'Тохсунньу', 'Олунньу', 'Кулун тутар', 'Муус устар',
+      'Ыам ыйын', 'Бэс ыйын', 'От ыйын', 'Атырдьых ыйын',
+      'Балаҕан ыйын', 'Алтынньы', 'Сэтинньи', 'ахсынньы'
+    ]
+  ],
+  [
+    ['Т', 'О', 'К', 'М', 'Ы', 'Б', 'О', 'А', 'Б', 'А', 'С', 'А'],
+    [
+      'Тохс', 'Олун', 'Клн', 'Мсу', 'Ыам', 'Бэс', 'Отй', 'Атр', 'Блҕ',
+      'Алт', 'Сэт', 'Ахс'
+    ],
+    [
+      'тохсунньу', 'олунньу', 'кулун тутар', 'муус устар',
+      'ыам ыйа', 'бэс ыйа', 'от ыйа', 'атырдьых ыйа',
+      'балаҕан ыйа', 'алтынньы', 'сэтинньи', 'ахсынньы'
+    ]
+  ],
+  [['б. э. и.', 'б. э'], u, u], 1, [6, 0],
+  ['yy/M/d', 'y, MMM d', 'y, MMMM d', 'y \'сыл\' MMMM d \'күнэ\', EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'чыыһыла буотах', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '₽', 'Арассыыйа солкуобайа',
+  {'JPY': ['JP¥', '¥'], 'RUB': ['₽'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/saq.ts b/packages/common/locales/saq.ts
new file mode 100644
index 000000000000..af89358f84f4
--- /dev/null
+++ b/packages/common/locales/saq.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'saq', [['Tesiran', 'Teipa'], u, u], u,
+  [
+    ['A', 'K', 'O', 'I', 'I', 'S', 'K'], ['Are', 'Kun', 'Ong', 'Ine', 'Ile', 'Sap', 'Kwe'],
+    [
+      'Mderot ee are', 'Mderot ee kuni', 'Mderot ee ong’wan', 'Mderot ee inet', 'Mderot ee ile',
+      'Mderot ee sapa', 'Mderot ee kwe'
+    ],
+    ['Are', 'Kun', 'Ong', 'Ine', 'Ile', 'Sap', 'Kwe']
+  ],
+  u,
+  [
+    ['O', 'W', 'O', 'O', 'I', 'I', 'S', 'I', 'S', 'T', 'T', 'T'],
+    ['Obo', 'Waa', 'Oku', 'Ong', 'Ime', 'Ile', 'Sap', 'Isi', 'Saa', 'Tom', 'Tob', 'Tow'],
+    [
+      'Lapa le obo', 'Lapa le waare', 'Lapa le okuni', 'Lapa le ong’wan', 'Lapa le imet',
+      'Lapa le ile', 'Lapa le sapa', 'Lapa le isiet', 'Lapa le saal', 'Lapa le tomon',
+      'Lapa le tomon obo', 'Lapa le tomon waare'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Christo', 'Baada ya Christo']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Njilingi eel Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/sbp.ts b/packages/common/locales/sbp.ts
new file mode 100644
index 000000000000..66be4c7e2f7b
--- /dev/null
+++ b/packages/common/locales/sbp.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'sbp', [['Lwamilawu', 'Pashamihe'], u, u], u,
+  [
+    ['M', 'J', 'J', 'J', 'A', 'I', 'J'], ['Mul', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo'],
+    ['Mulungu', 'Jumatatu', 'Jumanne', 'Jumatano', 'Alahamisi', 'Ijumaa', 'Jumamosi'],
+    ['Mul', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Mup', 'Mwi', 'Msh', 'Mun', 'Mag', 'Muj', 'Msp', 'Mpg', 'Mye', 'Mok', 'Mus', 'Muh'],
+    [
+      'Mupalangulwa', 'Mwitope', 'Mushende', 'Munyi', 'Mushende Magali', 'Mujimbi', 'Mushipepo',
+      'Mupuguto', 'Munyense', 'Mokhu', 'Musongandembwe', 'Muhaano'
+    ]
+  ],
+  u, [['AK', 'PK'], u, ['Ashanali uKilisito', 'Pamwandi ya Kilisto']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'TSh', 'Ihela ya Tansaniya',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/sd.ts b/packages/common/locales/sd.ts
new file mode 100644
index 000000000000..33c4832e5132
--- /dev/null
+++ b/packages/common/locales/sd.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'sd',
+  [
+    ['صبح، منجهند', 'منجهند، شام'],
+    ['صبح، منجهند', 'شام، منجهند'],
+    ['صبح، منجهند', 'منجهند، شام']
+  ],
+  [['صبح، منجهند', 'منجهند، شام'], u, u],
+  [
+    ['آچر', 'سو', 'اڱارو', 'اربع', 'خم', 'جمعو', 'ڇنڇر'],
+    ['آچر', 'سومر', 'اڱارو', 'اربع', 'خميس', 'جمعو', 'ڇنڇر'], u, u
+  ],
+  [
+    ['آچ', 'سو', 'اڱ', 'ار', 'خم', 'جم', 'ڇن'],
+    ['آچر', 'سومر', 'اڱارو', 'اربع', 'خميس', 'جمعو', 'ڇنڇر'], u, u
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'جنوري', 'فيبروري', 'مارچ', 'اپريل', 'مئي', 'جون', 'جولاءِ',
+      'آگسٽ', 'سيپٽمبر', 'آڪٽوبر', 'نومبر', 'ڊسمبر'
+    ],
+    u
+  ],
+  u, [['BCE', 'CE'], u, ['مسيح کان اڳ', 'عيسوي کان پهرين']], 0, [6, 0],
+  ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'Rs', 'پاڪستاني رپي',
+  {'JPY': ['JP¥', '¥'], 'PKR': ['Rs'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/se-FI.ts b/packages/common/locales/se-FI.ts
new file mode 100644
index 000000000000..356d733adb78
--- /dev/null
+++ b/packages/common/locales/se-FI.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  return 5;
+}
+
+export default [
+  'se-FI', [['i', 'e'], ['ib', 'eb'], u], [['ib', 'eb'], u, u],
+  [
+    ['S', 'M', 'D', 'G', 'D', 'B', 'L'], ['so', 'má', 'di', 'ga', 'du', 'be', 'lá'],
+    ['sotnabeaivi', 'mánnodat', 'disdat', 'gaskavahkku', 'duorastat', 'bearjadat', 'lávvordat'],
+    ['so', 'má', 'di', 'ga', 'du', 'be', 'lá']
+  ],
+  u,
+  [
+    ['O', 'G', 'N', 'C', 'M', 'G', 'S', 'B', 'Č', 'G', 'S', 'J'],
+    [
+      'ođđj', 'guov', 'njuk', 'cuoŋ', 'mies', 'geas', 'suoi', 'borg', 'čakč', 'golg', 'skáb',
+      'juov'
+    ],
+    [
+      'ođđajagemánnu', 'guovvamánnu', 'njukčamánnu', 'cuoŋománnu', 'miessemánnu',
+      'geassemánnu', 'suoidnemánnu', 'borgemánnu', 'čakčamánnu', 'golggotmánnu',
+      'skábmamánnu', 'juovlamánnu'
+    ]
+  ],
+  u, [['oKr.', 'mKr.'], u, ['ovdal Kristusa', 'maŋŋel Kristusa']], 1, [6, 0],
+  ['dd.MM.y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '·10^', '·', '‰', '∞', '¤¤¤', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'DKK': ['Dkr', 'kr'],
+    'JPY': ['JP¥', '¥'],
+    'NOK': ['kr'],
+    'SEK': ['Skr', 'kr'],
+    'THB': ['฿'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/se-SE.ts b/packages/common/locales/se-SE.ts
new file mode 100644
index 000000000000..b73698ee0815
--- /dev/null
+++ b/packages/common/locales/se-SE.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  return 5;
+}
+
+export default [
+  'se-SE', [['i.b.', 'e.b.'], u, ['iđitbeaivet', 'eahketbeaivet']],
+  [['i.b.', 'e.b.'], u, ['iđitbeaivi', 'eahketbeaivi']],
+  [
+    ['S', 'V', 'M', 'G', 'D', 'B', 'L'], ['sotn', 'vuos', 'maŋ', 'gask', 'duor', 'bear', 'láv'],
+    [
+      'sotnabeaivi', 'vuossárga', 'maŋŋebárga', 'gaskavahkku', 'duorasdat', 'bearjadat',
+      'lávvardat'
+    ],
+    ['sotn', 'vuos', 'maŋ', 'gask', 'duor', 'bear', 'láv']
+  ],
+  u,
+  [
+    ['O', 'G', 'N', 'C', 'M', 'G', 'S', 'B', 'Č', 'G', 'S', 'J'],
+    [
+      'ođđj', 'guov', 'njuk', 'cuo', 'mies', 'geas', 'suoi', 'borg', 'čakč', 'golg', 'skáb',
+      'juov'
+    ],
+    [
+      'ođđajagemánnu', 'guovvamánnu', 'njukčamánnu', 'cuoŋománnu', 'miessemánnu',
+      'geassemánnu', 'suoidnemánnu', 'borgemánnu', 'čakčamánnu', 'golggotmánnu',
+      'skábmamánnu', 'juovlamánnu'
+    ]
+  ],
+  u, [['o.Kr.', 'm.Kr.'], u, ['ovdal Kristtusa', 'maŋŋel Kristtusa']], 1, [6, 0],
+  ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '·10^', '·', '‰', '∞', '¤¤¤', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr', 'ruoŧŧa kruvdno', {
+    'DKK': ['Dkr', 'kr'],
+    'JPY': ['JP¥', '¥'],
+    'NOK': ['Nkr', 'kr'],
+    'SEK': ['kr'],
+    'THB': ['฿'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/se.ts b/packages/common/locales/se.ts
new file mode 100644
index 000000000000..1d1e2a5162b6
--- /dev/null
+++ b/packages/common/locales/se.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  return 5;
+}
+
+export default [
+  'se', [['i.b.', 'e.b.'], u, ['iđitbeaivet', 'eahketbeaivet']],
+  [['i.b.', 'e.b.'], u, ['iđitbeaivi', 'eahketbeaivi']],
+  [
+    ['S', 'V', 'M', 'G', 'D', 'B', 'L'], ['sotn', 'vuos', 'maŋ', 'gask', 'duor', 'bear', 'láv'],
+    [
+      'sotnabeaivi', 'vuossárga', 'maŋŋebárga', 'gaskavahkku', 'duorasdat', 'bearjadat',
+      'lávvardat'
+    ],
+    ['sotn', 'vuos', 'maŋ', 'gask', 'duor', 'bear', 'láv']
+  ],
+  u,
+  [
+    ['O', 'G', 'N', 'C', 'M', 'G', 'S', 'B', 'Č', 'G', 'S', 'J'],
+    [
+      'ođđj', 'guov', 'njuk', 'cuo', 'mies', 'geas', 'suoi', 'borg', 'čakč', 'golg', 'skáb',
+      'juov'
+    ],
+    [
+      'ođđajagemánnu', 'guovvamánnu', 'njukčamánnu', 'cuoŋománnu', 'miessemánnu',
+      'geassemánnu', 'suoidnemánnu', 'borgemánnu', 'čakčamánnu', 'golggotmánnu',
+      'skábmamánnu', 'juovlamánnu'
+    ]
+  ],
+  u, [['o.Kr.', 'm.Kr.'], u, ['ovdal Kristtusa', 'maŋŋel Kristtusa']], 1, [6, 0],
+  ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '·10^', '·', '‰', '∞', '¤¤¤', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr', 'norgga kruvdno', {
+    'DKK': ['Dkr', 'kr'],
+    'JPY': ['JP¥', '¥'],
+    'NOK': ['kr'],
+    'SEK': ['Skr', 'kr'],
+    'THB': ['฿'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/seh.ts b/packages/common/locales/seh.ts
new file mode 100644
index 000000000000..e8b92989170e
--- /dev/null
+++ b/packages/common/locales/seh.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'seh', [['AM', 'PM'], u, u], u,
+  [
+    ['D', 'P', 'C', 'T', 'N', 'S', 'S'], ['Dim', 'Pos', 'Pir', 'Tat', 'Nai', 'Sha', 'Sab'],
+    ['Dimingu', 'Chiposi', 'Chipiri', 'Chitatu', 'Chinai', 'Chishanu', 'Sabudu'],
+    ['Dim', 'Pos', 'Pir', 'Tat', 'Nai', 'Sha', 'Sab']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Aug', 'Set', 'Otu', 'Nov', 'Dec'],
+    [
+      'Janeiro', 'Fevreiro', 'Marco', 'Abril', 'Maio', 'Junho', 'Julho', 'Augusto', 'Setembro',
+      'Otubro', 'Novembro', 'Decembro'
+    ]
+  ],
+  u, [['AC', 'AD'], u, ['Antes de Cristo', 'Anno Domini']], 0, [6, 0],
+  ['d/M/y', 'd \'de\' MMM \'de\' y', 'd \'de\' MMMM \'de\' y', 'EEEE, d \'de\' MMMM \'de\' y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'MTn', 'Metical de Moçambique',
+  {'JPY': ['JP¥', '¥'], 'MZN': ['MTn'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ses.ts b/packages/common/locales/ses.ts
new file mode 100644
index 000000000000..19a3c34ec3ca
--- /dev/null
+++ b/packages/common/locales/ses.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'ses', [['Adduha', 'Aluula'], u, u], u,
+  [
+    ['H', 'T', 'T', 'L', 'L', 'L', 'S'], ['Alh', 'Ati', 'Ata', 'Ala', 'Alm', 'Alz', 'Asi'],
+    ['Alhadi', 'Atinni', 'Atalaata', 'Alarba', 'Alhamiisa', 'Alzuma', 'Asibti'],
+    ['Alh', 'Ati', 'Ata', 'Ala', 'Alm', 'Alz', 'Asi']
+  ],
+  u,
+  [
+    ['Ž', 'F', 'M', 'A', 'M', 'Ž', 'Ž', 'U', 'S', 'O', 'N', 'D'],
+    ['Žan', 'Fee', 'Mar', 'Awi', 'Me', 'Žuw', 'Žuy', 'Ut', 'Sek', 'Okt', 'Noo', 'Dee'],
+    [
+      'Žanwiye', 'Feewiriye', 'Marsi', 'Awiril', 'Me', 'Žuweŋ', 'Žuyye', 'Ut', 'Sektanbur',
+      'Oktoobur', 'Noowanbur', 'Deesanbur'
+    ]
+  ],
+  u, [['IJ', 'IZ'], u, ['Isaa jine', 'Isaa zamanoo']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'CFA', 'CFA Fraŋ (BCEAO)',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/sg.ts b/packages/common/locales/sg.ts
new file mode 100644
index 000000000000..7ed82a0b4986
--- /dev/null
+++ b/packages/common/locales/sg.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'sg', [['ND', 'LK'], u, u], u,
+  [
+    ['K', 'S', 'T', 'S', 'K', 'P', 'Y'], ['Bk1', 'Bk2', 'Bk3', 'Bk4', 'Bk5', 'Lâp', 'Lây'],
+    [
+      'Bikua-ôko', 'Bïkua-ûse', 'Bïkua-ptâ', 'Bïkua-usïö', 'Bïkua-okü', 'Lâpôsö',
+      'Lâyenga'
+    ],
+    ['Bk1', 'Bk2', 'Bk3', 'Bk4', 'Bk5', 'Lâp', 'Lây']
+  ],
+  u,
+  [
+    ['N', 'F', 'M', 'N', 'B', 'F', 'L', 'K', 'M', 'N', 'N', 'K'],
+    ['Nye', 'Ful', 'Mbä', 'Ngu', 'Bêl', 'Fön', 'Len', 'Kük', 'Mvu', 'Ngb', 'Nab', 'Kak'],
+    [
+      'Nyenye', 'Fulundïgi', 'Mbängü', 'Ngubùe', 'Bêläwü', 'Föndo', 'Lengua', 'Kükürü',
+      'Mvuka', 'Ngberere', 'Nabändüru', 'Kakauka'
+    ]
+  ],
+  u, [['KnK', 'NpK'], u, ['Kôzo na Krîstu', 'Na pekô tî Krîstu']], 1, [6, 0],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00;¤-#,##0.00', '#E0'], 'FCFA', 'farânga CFA (BEAC)',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/shi-Latn.ts b/packages/common/locales/shi-Latn.ts
new file mode 100644
index 000000000000..13ed0b0e8ae5
--- /dev/null
+++ b/packages/common/locales/shi-Latn.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'shi-Latn', [['tifawt', 'tadggʷat'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['asa', 'ayn', 'asi', 'akṛ', 'akw', 'asim', 'asiḍ'],
+    ['asamas', 'aynas', 'asinas', 'akṛas', 'akwas', 'asimwas', 'asiḍyas'],
+    ['asa', 'ayn', 'asi', 'akṛ', 'akw', 'asim', 'asiḍ']
+  ],
+  u,
+  [
+    ['i', 'b', 'm', 'i', 'm', 'y', 'y', 'ɣ', 'c', 'k', 'n', 'd'],
+    ['inn', 'bṛa', 'maṛ', 'ibr', 'may', 'yun', 'yul', 'ɣuc', 'cut', 'ktu', 'nuw', 'duj'],
+    [
+      'innayr', 'bṛayṛ', 'maṛṣ', 'ibrir', 'mayyu', 'yunyu', 'yulyuz', 'ɣuct', 'cutanbir',
+      'ktubr', 'nuwanbir', 'dujanbir'
+    ]
+  ],
+  u, [['daɛ', 'dfɛ'], u, ['dat n ɛisa', 'dffir n ɛisa']], 6, [5, 6],
+  ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'MAD', 'adrim n lmɣrib',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/shi-Tfng.ts b/packages/common/locales/shi-Tfng.ts
new file mode 100644
index 000000000000..95a7e4f663c1
--- /dev/null
+++ b/packages/common/locales/shi-Tfng.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  if (n === Math.floor(n) && n >= 2 && n <= 10) return 3;
+  return 5;
+}
+
+export default [
+  'shi-Tfng', [['ⵜⵉⴼⴰⵡⵜ', 'ⵜⴰⴷⴳⴳⵯⴰⵜ'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    [
+      'ⴰⵙⴰ', 'ⴰⵢⵏ', 'ⴰⵙⵉ', 'ⴰⴽⵕ', 'ⴰⴽⵡ', 'ⴰⵙⵉⵎ',
+      'ⴰⵙⵉⴹ'
+    ],
+    [
+      'ⴰⵙⴰⵎⴰⵙ', 'ⴰⵢⵏⴰⵙ', 'ⴰⵙⵉⵏⴰⵙ', 'ⴰⴽⵕⴰⵙ',
+      'ⴰⴽⵡⴰⵙ', 'ⵙⵉⵎⵡⴰⵙ', 'ⴰⵙⵉⴹⵢⴰⵙ'
+    ],
+    [
+      'ⴰⵙⴰ', 'ⴰⵢⵏ', 'ⴰⵙⵉ', 'ⴰⴽⵕ', 'ⴰⴽⵡ', 'ⴰⵙⵉⵎ',
+      'ⴰⵙⵉⴹ'
+    ]
+  ],
+  u,
+  [
+    ['ⵉ', 'ⴱ', 'ⵎ', 'ⵉ', 'ⵎ', 'ⵢ', 'ⵢ', 'ⵖ', 'ⵛ', 'ⴽ', 'ⵏ', 'ⴷ'],
+    [
+      'ⵉⵏⵏ', 'ⴱⵕⴰ', 'ⵎⴰⵕ', 'ⵉⴱⵔ', 'ⵎⴰⵢ', 'ⵢⵓⵏ', 'ⵢⵓⵍ',
+      'ⵖⵓⵛ', 'ⵛⵓⵜ', 'ⴽⵜⵓ', 'ⵏⵓⵡ', 'ⴷⵓⵊ'
+    ],
+    [
+      'ⵉⵏⵏⴰⵢⵔ', 'ⴱⵕⴰⵢⵕ', 'ⵎⴰⵕⵚ', 'ⵉⴱⵔⵉⵔ', 'ⵎⴰⵢⵢⵓ',
+      'ⵢⵓⵏⵢⵓ', 'ⵢⵓⵍⵢⵓⵣ', 'ⵖⵓⵛⵜ', 'ⵛⵓⵜⴰⵏⴱⵉⵔ',
+      'ⴽⵜⵓⴱⵔ', 'ⵏⵓⵡⴰⵏⴱⵉⵔ', 'ⴷⵓⵊⴰⵏⴱⵉⵔ'
+    ]
+  ],
+  u,
+  [
+    ['ⴷⴰⵄ', 'ⴷⴼⵄ'], u,
+    ['ⴷⴰⵜ ⵏ ⵄⵉⵙⴰ', 'ⴷⴼⴼⵉⵔ ⵏ ⵄⵉⵙⴰ']
+  ],
+  6, [5, 6], ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'MAD', 'ⴰⴷⵔⵉⵎ ⵏ ⵍⵎⵖⵔⵉⴱ',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/shi.ts b/packages/common/locales/shi.ts
new file mode 100644
index 000000000000..2d245ac83a86
--- /dev/null
+++ b/packages/common/locales/shi.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  if (n === Math.floor(n) && n >= 2 && n <= 10) return 3;
+  return 5;
+}
+
+export default [
+  'shi', [['ⵜⵉⴼⴰⵡⵜ', 'ⵜⴰⴷⴳⴳⵯⴰⵜ'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    [
+      'ⴰⵙⴰ', 'ⴰⵢⵏ', 'ⴰⵙⵉ', 'ⴰⴽⵕ', 'ⴰⴽⵡ', 'ⴰⵙⵉⵎ',
+      'ⴰⵙⵉⴹ'
+    ],
+    [
+      'ⴰⵙⴰⵎⴰⵙ', 'ⴰⵢⵏⴰⵙ', 'ⴰⵙⵉⵏⴰⵙ', 'ⴰⴽⵕⴰⵙ',
+      'ⴰⴽⵡⴰⵙ', 'ⵙⵉⵎⵡⴰⵙ', 'ⴰⵙⵉⴹⵢⴰⵙ'
+    ],
+    [
+      'ⴰⵙⴰ', 'ⴰⵢⵏ', 'ⴰⵙⵉ', 'ⴰⴽⵕ', 'ⴰⴽⵡ', 'ⴰⵙⵉⵎ',
+      'ⴰⵙⵉⴹ'
+    ]
+  ],
+  u,
+  [
+    ['ⵉ', 'ⴱ', 'ⵎ', 'ⵉ', 'ⵎ', 'ⵢ', 'ⵢ', 'ⵖ', 'ⵛ', 'ⴽ', 'ⵏ', 'ⴷ'],
+    [
+      'ⵉⵏⵏ', 'ⴱⵕⴰ', 'ⵎⴰⵕ', 'ⵉⴱⵔ', 'ⵎⴰⵢ', 'ⵢⵓⵏ', 'ⵢⵓⵍ',
+      'ⵖⵓⵛ', 'ⵛⵓⵜ', 'ⴽⵜⵓ', 'ⵏⵓⵡ', 'ⴷⵓⵊ'
+    ],
+    [
+      'ⵉⵏⵏⴰⵢⵔ', 'ⴱⵕⴰⵢⵕ', 'ⵎⴰⵕⵚ', 'ⵉⴱⵔⵉⵔ', 'ⵎⴰⵢⵢⵓ',
+      'ⵢⵓⵏⵢⵓ', 'ⵢⵓⵍⵢⵓⵣ', 'ⵖⵓⵛⵜ', 'ⵛⵓⵜⴰⵏⴱⵉⵔ',
+      'ⴽⵜⵓⴱⵔ', 'ⵏⵓⵡⴰⵏⴱⵉⵔ', 'ⴷⵓⵊⴰⵏⴱⵉⵔ'
+    ]
+  ],
+  u,
+  [
+    ['ⴷⴰⵄ', 'ⴷⴼⵄ'], u,
+    ['ⴷⴰⵜ ⵏ ⵄⵉⵙⴰ', 'ⴷⴼⴼⵉⵔ ⵏ ⵄⵉⵙⴰ']
+  ],
+  6, [5, 6], ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'MAD', 'ⴰⴷⵔⵉⵎ ⵏ ⵍⵎⵖⵔⵉⴱ',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/si.ts b/packages/common/locales/si.ts
new file mode 100644
index 000000000000..bfda829eb0ab
--- /dev/null
+++ b/packages/common/locales/si.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (n === 0 || n === 1 || i === 0 && f === 1) return 1;
+  return 5;
+}
+
+export default [
+  'si', [['පෙ', 'ප'], ['පෙ.ව.', 'ප.ව.'], u], [['පෙ.ව.', 'ප.ව.'], u, u],
+  [
+    ['ඉ', 'ස', 'අ', 'බ', 'බ්\u200dර', 'සි', 'සෙ'],
+    [
+      'ඉරිදා', 'සඳුදා', 'අඟහ', 'බදාදා',
+      'බ්\u200dරහස්', 'සිකු', 'සෙන'
+    ],
+    [
+      'ඉරිදා', 'සඳුදා', 'අඟහරුවාදා', 'බදාදා',
+      'බ්\u200dරහස්පතින්දා', 'සිකුරාදා',
+      'සෙනසුරාදා'
+    ],
+    [
+      'ඉරි', 'සඳු', 'අඟ', 'බදා', 'බ්\u200dරහ', 'සිකු',
+      'සෙන'
+    ]
+  ],
+  u,
+  [
+    [
+      'ජ', 'පෙ', 'මා', 'අ', 'මැ', 'ජූ', 'ජූ', 'අ', 'සැ', 'ඔ',
+      'නෙ', 'දෙ'
+    ],
+    [
+      'ජන', 'පෙබ', 'මාර්තු', 'අප්\u200dරේල්', 'මැයි',
+      'ජූනි', 'ජූලි', 'අගෝ', 'සැප්', 'ඔක්', 'නොවැ',
+      'දෙසැ'
+    ],
+    [
+      'ජනවාරි', 'පෙබරවාරි', 'මාර්තු',
+      'අප්\u200dරේල්', 'මැයි', 'ජූනි', 'ජූලි',
+      'අගෝස්තු', 'සැප්තැම්බර්', 'ඔක්තෝබර්',
+      'නොවැම්බර්', 'දෙසැම්බර්'
+    ]
+  ],
+  [
+    [
+      'ජ', 'පෙ', 'මා', 'අ', 'මැ', 'ජූ', 'ජූ', 'අ', 'සැ', 'ඔ',
+      'නෙ', 'දෙ'
+    ],
+    [
+      'ජන', 'පෙබ', 'මාර්', 'අප්\u200dරේල්', 'මැයි',
+      'ජූනි', 'ජූලි', 'අගෝ', 'සැප්', 'ඔක්', 'නොවැ',
+      'දෙසැ'
+    ],
+    [
+      'ජනවාරි', 'පෙබරවාරි', 'මාර්තු',
+      'අප්\u200dරේල්', 'මැයි', 'ජූනි', 'ජූලි',
+      'අගෝස්තු', 'සැප්තැම්බර්', 'ඔක්තෝබර්',
+      'නොවැම්බර්', 'දෙසැම්බර්'
+    ]
+  ],
+  [
+    ['ක්\u200dරි.පූ.', 'ක්\u200dරි.ව.'], u,
+    [
+      'ක්\u200dරිස්තු පූර්ව',
+      'ක්\u200dරිස්තු වර්ෂ'
+    ]
+  ],
+  1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH.mm', 'HH.mm.ss', 'HH.mm.ss z', 'HH.mm.ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', '.'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#'], 'රු.',
+  'ශ්\u200dරී ලංකා රුපියල', {
+    'JPY': ['JP¥', '¥'],
+    'LKR': ['රු.'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'XOF': ['සිෆ්එ']
+  },
+  plural
+];
diff --git a/packages/common/locales/sk.ts b/packages/common/locales/sk.ts
new file mode 100644
index 000000000000..fe37951a41e5
--- /dev/null
+++ b/packages/common/locales/sk.ts
@@ -0,0 +1,67 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  if (i === Math.floor(i) && i >= 2 && i <= 4 && v === 0) return 3;
+  if (!(v === 0)) return 4;
+  return 5;
+}
+
+export default [
+  'sk', [['AM', 'PM'], u, u], u,
+  [
+    ['n', 'p', 'u', 's', 'š', 'p', 's'], ['ne', 'po', 'ut', 'st', 'št', 'pi', 'so'],
+    ['nedeľa', 'pondelok', 'utorok', 'streda', 'štvrtok', 'piatok', 'sobota'],
+    ['ne', 'po', 'ut', 'st', 'št', 'pi', 'so']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'mar', 'apr', 'máj', 'jún', 'júl', 'aug', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'januára', 'februára', 'marca', 'apríla', 'mája', 'júna', 'júla', 'augusta',
+      'septembra', 'októbra', 'novembra', 'decembra'
+    ]
+  ],
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'mar', 'apr', 'máj', 'jún', 'júl', 'aug', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'január', 'február', 'marec', 'apríl', 'máj', 'jún', 'júl', 'august', 'september',
+      'október', 'november', 'december'
+    ]
+  ],
+  [['pred Kr.', 'po Kr.'], u, ['pred Kristom', 'po Kristovi']], 1, [6, 0],
+  ['d. M. y', u, 'd. MMMM y', 'EEEE d. MMMM y'], ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'],
+  ['{1} {0}', '{1}, {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'e', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': ['NIS', '₪'],
+    'INR': [u, '₹'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'USD': [u, '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sl.ts b/packages/common/locales/sl.ts
new file mode 100644
index 000000000000..91dfffd1f6aa
--- /dev/null
+++ b/packages/common/locales/sl.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 100 === 1) return 1;
+  if (v === 0 && i % 100 === 2) return 2;
+  if (v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 3 && i % 100 <= 4 || !(v === 0))
+    return 3;
+  return 5;
+}
+
+export default [
+  'sl', [['d', 'p'], ['dop.', 'pop.'], u], [['d', 'p'], ['dop.', 'pop.'], ['dopoldne', 'popoldne']],
+  [
+    ['n', 'p', 't', 's', 'č', 'p', 's'], ['ned.', 'pon.', 'tor.', 'sre.', 'čet.', 'pet.', 'sob.'],
+    ['nedelja', 'ponedeljek', 'torek', 'sreda', 'četrtek', 'petek', 'sobota'],
+    ['ned.', 'pon.', 'tor.', 'sre.', 'čet.', 'pet.', 'sob.']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun.', 'jul.', 'avg.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januar', 'februar', 'marec', 'april', 'maj', 'junij', 'julij', 'avgust', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['pr. Kr.', 'po Kr.'], u, ['pred Kristusom', 'po Kristusu']], 1, [6, 0],
+  ['d. MM. yy', 'd. MMM y', 'dd. MMMM y', 'EEEE, dd. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '−', 'e', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'evro', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'GBP': [u, '£'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/smn.ts b/packages/common/locales/smn.ts
new file mode 100644
index 000000000000..b8748c0aad85
--- /dev/null
+++ b/packages/common/locales/smn.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  if (n === 2) return 2;
+  return 5;
+}
+
+export default [
+  'smn', [['ip.', 'ep.'], u, u], u,
+  [
+    ['p', 'V', 'M', 'K', 'T', 'V', 'L'], ['pas', 'vuo', 'maj', 'kos', 'tuo', 'vás', 'láv'],
+    [
+      'pasepeeivi', 'vuossaargâ', 'majebaargâ', 'koskoho', 'tuorâstuv', 'vástuppeeivi',
+      'lávurduv'
+    ],
+    ['pa', 'vu', 'ma', 'ko', 'tu', 'vá', 'lá']
+  ],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['pas', 'vuo', 'maj', 'kos', 'tuo', 'vás', 'láv'],
+    [
+      'pasepeivi', 'vuossargâ', 'majebargâ', 'koskokko', 'tuorâstâh', 'vástuppeivi',
+      'lávurdâh'
+    ],
+    ['pa', 'vu', 'ma', 'ko', 'tu', 'vá', 'lá']
+  ],
+  [
+    ['U', 'K', 'NJ', 'C', 'V', 'K', 'S', 'P', 'Č', 'R', 'S', 'J'],
+    [
+      'uđiv', 'kuovâ', 'njuhčâ', 'cuáŋui', 'vyesi', 'kesi', 'syeini', 'porge', 'čohčâ',
+      'roovvâd', 'skammâ', 'juovlâ'
+    ],
+    [
+      'uđđâivemáánu', 'kuovâmáánu', 'njuhčâmáánu', 'cuáŋuimáánu', 'vyesimáánu',
+      'kesimáánu', 'syeinimáánu', 'porgemáánu', 'čohčâmáánu', 'roovvâdmáánu',
+      'skammâmáánu', 'juovlâmáánu'
+    ]
+  ],
+  u, [['oKr.', 'mKr.'], u, ['Ovdil Kristus šoddâm', 'maŋa Kristus šoddâm']], 1, [6, 0],
+  ['d.M.y', 'MMM d. y', 'MMMM d. y', 'cccc, MMMM d. y'],
+  ['H.mm', 'H.mm.ss', 'H.mm.ss z', 'H.mm.ss zzzz'], ['{1} {0}', '{1} \'tme\' {0}', u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'epiloho', '.'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/sn.ts b/packages/common/locales/sn.ts
new file mode 100644
index 000000000000..a16bdc2910c3
--- /dev/null
+++ b/packages/common/locales/sn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'sn', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'C', 'C', 'C', 'C', 'M'], ['Svo', 'Muv', 'Chp', 'Cht', 'Chn', 'Chs', 'Mug'],
+    ['Svondo', 'Muvhuro', 'Chipiri', 'Chitatu', 'China', 'Chishanu', 'Mugovera'],
+    ['Sv', 'Mu', 'Cp', 'Ct', 'Cn', 'Cs', 'Mg']
+  ],
+  u,
+  [
+    ['N', 'K', 'K', 'K', 'C', 'C', 'C', 'N', 'G', 'G', 'M', 'Z'],
+    ['Ndi', 'Kuk', 'Kur', 'Kub', 'Chv', 'Chk', 'Chg', 'Nya', 'Gun', 'Gum', 'Mbu', 'Zvi'],
+    [
+      'Ndira', 'Kukadzi', 'Kurume', 'Kubvumbi', 'Chivabvu', 'Chikumi', 'Chikunguru', 'Nyamavhuvhu',
+      'Gunyana', 'Gumiguru', 'Mbudzi', 'Zvita'
+    ]
+  ],
+  u, [['BC', 'AD'], u, ['Kristo asati auya', 'mugore ramambo vedu']], 0, [6, 0],
+  ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'US$', 'Dora re Amerika',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/so-DJ.ts b/packages/common/locales/so-DJ.ts
new file mode 100644
index 000000000000..eb986a6c269e
--- /dev/null
+++ b/packages/common/locales/so-DJ.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'so-DJ', [['sn.', 'gn.'], u, u], u,
+  [
+    ['A', 'I', 'T', 'A', 'Kh', 'J', 'S'], ['Axd', 'Isn', 'Tal', 'Arb', 'Kha', 'Jim', 'Sab'],
+    ['Axad', 'Isniin', 'Talaado', 'Arbaco', 'Khamiis', 'Jimco', 'Sabti'],
+    ['Axd', 'Isn', 'Tal', 'Arb', 'Kha', 'Jim', 'Sab']
+  ],
+  u,
+  [
+    ['K', 'L', 'S', 'A', 'S', 'L', 'T', 'S', 'S', 'T', 'K', 'L'],
+    ['Kob', 'Lab', 'Sad', 'Afr', 'Sha', 'Lix', 'Tod', 'Sid', 'Sag', 'Tob', 'KIT', 'LIT'],
+    [
+      'Bisha Koobaad', 'Bisha Labaad', 'Bisha Saddexaad', 'Bisha Afraad', 'Bisha Shanaad',
+      'Bisha Lixaad', 'Bisha Todobaad', 'Bisha Sideedaad', 'Bisha Sagaalaad', 'Bisha Tobnaad',
+      'Bisha Kow iyo Tobnaad', 'Bisha Laba iyo Tobnaad'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Kob', 'Lab', 'Sad', 'Afr', 'Sha', 'Lix', 'Tod', 'Sid', 'Sag', 'Tob', 'KIT', 'LIT'],
+    [
+      'Bisha Koobaad', 'Bisha Labaad', 'Bisha Saddexaad', 'Bisha Afraad', 'Bisha Shanaad',
+      'Bisha Lixaad', 'Bisha Todobaad', 'Bisha Sideedaad', 'Bisha Sagaalaad', 'Bisha Tobnaad',
+      'Bisha Kow iyo Tobnaad', 'Bisha Laba iyo Tobnaad'
+    ]
+  ],
+  [['CK', 'CD'], u, u], 6, [6, 0], ['dd/MM/yy', 'dd-MMM-y', 'dd MMMM y', 'EEEE, MMMM dd, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Fdj', 'Faran Jabbuuti',
+  {'DJF': ['Fdj'], 'JPY': ['JP¥', '¥'], 'SOS': ['S'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/so-ET.ts b/packages/common/locales/so-ET.ts
new file mode 100644
index 000000000000..f0a6d30c5443
--- /dev/null
+++ b/packages/common/locales/so-ET.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'so-ET', [['sn.', 'gn.'], u, u], u,
+  [
+    ['A', 'I', 'T', 'A', 'Kh', 'J', 'S'], ['Axd', 'Isn', 'Tal', 'Arb', 'Kha', 'Jim', 'Sab'],
+    ['Axad', 'Isniin', 'Talaado', 'Arbaco', 'Khamiis', 'Jimco', 'Sabti'],
+    ['Axd', 'Isn', 'Tal', 'Arb', 'Kha', 'Jim', 'Sab']
+  ],
+  u,
+  [
+    ['K', 'L', 'S', 'A', 'S', 'L', 'T', 'S', 'S', 'T', 'K', 'L'],
+    ['Kob', 'Lab', 'Sad', 'Afr', 'Sha', 'Lix', 'Tod', 'Sid', 'Sag', 'Tob', 'KIT', 'LIT'],
+    [
+      'Bisha Koobaad', 'Bisha Labaad', 'Bisha Saddexaad', 'Bisha Afraad', 'Bisha Shanaad',
+      'Bisha Lixaad', 'Bisha Todobaad', 'Bisha Sideedaad', 'Bisha Sagaalaad', 'Bisha Tobnaad',
+      'Bisha Kow iyo Tobnaad', 'Bisha Laba iyo Tobnaad'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Kob', 'Lab', 'Sad', 'Afr', 'Sha', 'Lix', 'Tod', 'Sid', 'Sag', 'Tob', 'KIT', 'LIT'],
+    [
+      'Bisha Koobaad', 'Bisha Labaad', 'Bisha Saddexaad', 'Bisha Afraad', 'Bisha Shanaad',
+      'Bisha Lixaad', 'Bisha Todobaad', 'Bisha Sideedaad', 'Bisha Sagaalaad', 'Bisha Tobnaad',
+      'Bisha Kow iyo Tobnaad', 'Bisha Laba iyo Tobnaad'
+    ]
+  ],
+  [['CK', 'CD'], u, u], 0, [6, 0], ['dd/MM/yy', 'dd-MMM-y', 'dd MMMM y', 'EEEE, MMMM dd, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Br', 'Birta Itoobbiya',
+  {'ETB': ['Br'], 'JPY': ['JP¥', '¥'], 'SOS': ['S'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/so-KE.ts b/packages/common/locales/so-KE.ts
new file mode 100644
index 000000000000..860802b81c33
--- /dev/null
+++ b/packages/common/locales/so-KE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'so-KE', [['sn.', 'gn.'], u, u], u,
+  [
+    ['A', 'I', 'T', 'A', 'Kh', 'J', 'S'], ['Axd', 'Isn', 'Tal', 'Arb', 'Kha', 'Jim', 'Sab'],
+    ['Axad', 'Isniin', 'Talaado', 'Arbaco', 'Khamiis', 'Jimco', 'Sabti'],
+    ['Axd', 'Isn', 'Tal', 'Arb', 'Kha', 'Jim', 'Sab']
+  ],
+  u,
+  [
+    ['K', 'L', 'S', 'A', 'S', 'L', 'T', 'S', 'S', 'T', 'K', 'L'],
+    ['Kob', 'Lab', 'Sad', 'Afr', 'Sha', 'Lix', 'Tod', 'Sid', 'Sag', 'Tob', 'KIT', 'LIT'],
+    [
+      'Bisha Koobaad', 'Bisha Labaad', 'Bisha Saddexaad', 'Bisha Afraad', 'Bisha Shanaad',
+      'Bisha Lixaad', 'Bisha Todobaad', 'Bisha Sideedaad', 'Bisha Sagaalaad', 'Bisha Tobnaad',
+      'Bisha Kow iyo Tobnaad', 'Bisha Laba iyo Tobnaad'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Kob', 'Lab', 'Sad', 'Afr', 'Sha', 'Lix', 'Tod', 'Sid', 'Sag', 'Tob', 'KIT', 'LIT'],
+    [
+      'Bisha Koobaad', 'Bisha Labaad', 'Bisha Saddexaad', 'Bisha Afraad', 'Bisha Shanaad',
+      'Bisha Lixaad', 'Bisha Todobaad', 'Bisha Sideedaad', 'Bisha Sagaalaad', 'Bisha Tobnaad',
+      'Bisha Kow iyo Tobnaad', 'Bisha Laba iyo Tobnaad'
+    ]
+  ],
+  [['CK', 'CD'], u, u], 0, [6, 0], ['dd/MM/yy', 'dd-MMM-y', 'dd MMMM y', 'EEEE, MMMM dd, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'KES',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'SOS': ['S'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/so.ts b/packages/common/locales/so.ts
new file mode 100644
index 000000000000..b5e3f69be4a0
--- /dev/null
+++ b/packages/common/locales/so.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'so', [['sn.', 'gn.'], u, u], u,
+  [
+    ['A', 'I', 'T', 'A', 'Kh', 'J', 'S'], ['Axd', 'Isn', 'Tal', 'Arb', 'Kha', 'Jim', 'Sab'],
+    ['Axad', 'Isniin', 'Talaado', 'Arbaco', 'Khamiis', 'Jimco', 'Sabti'],
+    ['Axd', 'Isn', 'Tal', 'Arb', 'Kha', 'Jim', 'Sab']
+  ],
+  u,
+  [
+    ['K', 'L', 'S', 'A', 'S', 'L', 'T', 'S', 'S', 'T', 'K', 'L'],
+    ['Kob', 'Lab', 'Sad', 'Afr', 'Sha', 'Lix', 'Tod', 'Sid', 'Sag', 'Tob', 'KIT', 'LIT'],
+    [
+      'Bisha Koobaad', 'Bisha Labaad', 'Bisha Saddexaad', 'Bisha Afraad', 'Bisha Shanaad',
+      'Bisha Lixaad', 'Bisha Todobaad', 'Bisha Sideedaad', 'Bisha Sagaalaad', 'Bisha Tobnaad',
+      'Bisha Kow iyo Tobnaad', 'Bisha Laba iyo Tobnaad'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Kob', 'Lab', 'Sad', 'Afr', 'Sha', 'Lix', 'Tod', 'Sid', 'Sag', 'Tob', 'KIT', 'LIT'],
+    [
+      'Bisha Koobaad', 'Bisha Labaad', 'Bisha Saddexaad', 'Bisha Afraad', 'Bisha Shanaad',
+      'Bisha Lixaad', 'Bisha Todobaad', 'Bisha Sideedaad', 'Bisha Sagaalaad', 'Bisha Tobnaad',
+      'Bisha Kow iyo Tobnaad', 'Bisha Laba iyo Tobnaad'
+    ]
+  ],
+  [['CK', 'CD'], u, u], 1, [6, 0], ['dd/MM/yy', 'dd-MMM-y', 'dd MMMM y', 'EEEE, MMMM dd, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'S', 'Shilin soomaali',
+  {'JPY': ['JP¥', '¥'], 'SOS': ['S'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/sq-MK.ts b/packages/common/locales/sq-MK.ts
new file mode 100644
index 000000000000..ccdbb007bea2
--- /dev/null
+++ b/packages/common/locales/sq-MK.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'sq-MK', [['e paradites', 'e pasdites'], u, u], [['paradite', 'pasdite'], u, u],
+  [
+    ['D', 'H', 'M', 'M', 'E', 'P', 'Sh'], ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht'],
+    ['e diel', 'e hënë', 'e martë', 'e mërkurë', 'e enjte', 'e premte', 'e shtunë'],
+    ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht']
+  ],
+  [
+    ['D', 'H', 'M', 'M', 'E', 'P', 'Sh'], ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht'],
+    ['E diel', 'E hënë', 'E martë', 'E mërkurë', 'E enjte', 'E premte', 'E shtunë'],
+    ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht']
+  ],
+  [
+    ['j', 'sh', 'm', 'p', 'm', 'q', 'k', 'g', 'sh', 't', 'n', 'dh'],
+    ['jan', 'shk', 'mar', 'pri', 'maj', 'qer', 'korr', 'gush', 'sht', 'tet', 'nën', 'dhj'],
+    [
+      'janar', 'shkurt', 'mars', 'prill', 'maj', 'qershor', 'korrik', 'gusht', 'shtator', 'tetor',
+      'nëntor', 'dhjetor'
+    ]
+  ],
+  [
+    ['J', 'Sh', 'M', 'P', 'M', 'Q', 'K', 'G', 'Sh', 'T', 'N', 'Dh'],
+    ['Jan', 'Shk', 'Mar', 'Pri', 'Maj', 'Qer', 'Korr', 'Gush', 'Sht', 'Tet', 'Nën', 'Dhj'],
+    [
+      'Janar', 'Shkurt', 'Mars', 'Prill', 'Maj', 'Qershor', 'Korrik', 'Gusht', 'Shtator', 'Tetor',
+      'Nëntor', 'Dhjetor'
+    ]
+  ],
+  [['p.K.', 'mb.K.'], u, ['para Krishtit', 'mbas Krishtit']], 1, [6, 0],
+  ['d.M.yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'në\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'den', 'Denari maqedonas',
+  {'ALL': ['Lekë'], 'JPY': ['JP¥', '¥'], 'MKD': ['den'], 'THB': ['฿'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/sq-XK.ts b/packages/common/locales/sq-XK.ts
new file mode 100644
index 000000000000..f041472c15c4
--- /dev/null
+++ b/packages/common/locales/sq-XK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'sq-XK', [['e paradites', 'e pasdites'], u, u], [['paradite', 'pasdite'], u, u],
+  [
+    ['D', 'H', 'M', 'M', 'E', 'P', 'Sh'], ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht'],
+    ['e diel', 'e hënë', 'e martë', 'e mërkurë', 'e enjte', 'e premte', 'e shtunë'],
+    ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht']
+  ],
+  [
+    ['D', 'H', 'M', 'M', 'E', 'P', 'Sh'], ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht'],
+    ['E diel', 'E hënë', 'E martë', 'E mërkurë', 'E enjte', 'E premte', 'E shtunë'],
+    ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht']
+  ],
+  [
+    ['j', 'sh', 'm', 'p', 'm', 'q', 'k', 'g', 'sh', 't', 'n', 'dh'],
+    ['jan', 'shk', 'mar', 'pri', 'maj', 'qer', 'korr', 'gush', 'sht', 'tet', 'nën', 'dhj'],
+    [
+      'janar', 'shkurt', 'mars', 'prill', 'maj', 'qershor', 'korrik', 'gusht', 'shtator', 'tetor',
+      'nëntor', 'dhjetor'
+    ]
+  ],
+  [
+    ['J', 'Sh', 'M', 'P', 'M', 'Q', 'K', 'G', 'Sh', 'T', 'N', 'Dh'],
+    ['Jan', 'Shk', 'Mar', 'Pri', 'Maj', 'Qer', 'Korr', 'Gush', 'Sht', 'Tet', 'Nën', 'Dhj'],
+    [
+      'Janar', 'Shkurt', 'Mars', 'Prill', 'Maj', 'Qershor', 'Korrik', 'Gusht', 'Shtator', 'Tetor',
+      'Nëntor', 'Dhjetor'
+    ]
+  ],
+  [['p.K.', 'mb.K.'], u, ['para Krishtit', 'mbas Krishtit']], 1, [6, 0],
+  ['d.M.yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'në\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Euroja',
+  {'ALL': ['Lekë'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/sq.ts b/packages/common/locales/sq.ts
new file mode 100644
index 000000000000..1b84892088f1
--- /dev/null
+++ b/packages/common/locales/sq.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'sq', [['e paradites', 'e pasdites'], u, u], [['paradite', 'pasdite'], u, u],
+  [
+    ['D', 'H', 'M', 'M', 'E', 'P', 'Sh'], ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht'],
+    ['e diel', 'e hënë', 'e martë', 'e mërkurë', 'e enjte', 'e premte', 'e shtunë'],
+    ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht']
+  ],
+  [
+    ['D', 'H', 'M', 'M', 'E', 'P', 'Sh'], ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht'],
+    ['E diel', 'E hënë', 'E martë', 'E mërkurë', 'E enjte', 'E premte', 'E shtunë'],
+    ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht']
+  ],
+  [
+    ['j', 'sh', 'm', 'p', 'm', 'q', 'k', 'g', 'sh', 't', 'n', 'dh'],
+    ['jan', 'shk', 'mar', 'pri', 'maj', 'qer', 'korr', 'gush', 'sht', 'tet', 'nën', 'dhj'],
+    [
+      'janar', 'shkurt', 'mars', 'prill', 'maj', 'qershor', 'korrik', 'gusht', 'shtator', 'tetor',
+      'nëntor', 'dhjetor'
+    ]
+  ],
+  [
+    ['J', 'Sh', 'M', 'P', 'M', 'Q', 'K', 'G', 'Sh', 'T', 'N', 'Dh'],
+    ['Jan', 'Shk', 'Mar', 'Pri', 'Maj', 'Qer', 'Korr', 'Gush', 'Sht', 'Tet', 'Nën', 'Dhj'],
+    [
+      'Janar', 'Shkurt', 'Mars', 'Prill', 'Maj', 'Qershor', 'Korrik', 'Gusht', 'Shtator', 'Tetor',
+      'Nëntor', 'Dhjetor'
+    ]
+  ],
+  [['p.K.', 'mb.K.'], u, ['para Krishtit', 'mbas Krishtit']], 1, [6, 0],
+  ['d.M.yy', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a, z', 'h:mm:ss a, zzzz'], ['{1}, {0}', u, '{1} \'në\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'Lekë', 'Leku shqiptar',
+  {'ALL': ['Lekë'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/sr-Cyrl-BA.ts b/packages/common/locales/sr-Cyrl-BA.ts
new file mode 100644
index 000000000000..981b2eb62ee3
--- /dev/null
+++ b/packages/common/locales/sr-Cyrl-BA.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export default [
+  'sr-Cyrl-BA', [['a', 'p'], ['прије подне', 'по подне'], u],
+  [['а', 'p'], ['прије подне', 'по подне'], u],
+  [
+    ['н', 'п', 'у', 'с', 'ч', 'п', 'с'],
+    ['нед.', 'пон.', 'ут.', 'ср.', 'чет.', 'пет.', 'суб.'],
+    [
+      'недјеља', 'понедељак', 'уторак', 'сриједа', 'четвртак',
+      'петак', 'субота'
+    ],
+    ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су']
+  ],
+  u,
+  [
+    ['ј', 'ф', 'м', 'а', 'м', 'ј', 'ј', 'а', 'с', 'о', 'н', 'д'],
+    [
+      'јан.', 'феб.', 'март', 'апр.', 'мај', 'јун', 'јул', 'авг.',
+      'септ.', 'окт.', 'нов.', 'дец.'
+    ],
+    [
+      'јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул',
+      'август', 'септембар', 'октобар', 'новембар', 'децембар'
+    ]
+  ],
+  u,
+  [
+    ['п.н.е.', 'н.е.'], ['п. н. е.', 'н. е.'],
+    ['прије нове ере', 'нове ере']
+  ],
+  1, [6, 0], ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'КМ',
+  'Босанско-херцеговачка конвертибилна марка', {
+    'AUD': [u, '$'],
+    'BAM': ['КМ', 'KM'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sr-Cyrl-ME.ts b/packages/common/locales/sr-Cyrl-ME.ts
new file mode 100644
index 000000000000..213b10530c45
--- /dev/null
+++ b/packages/common/locales/sr-Cyrl-ME.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export default [
+  'sr-Cyrl-ME', [['a', 'p'], ['прије подне', 'по подне'], u], u,
+  [
+    ['н', 'п', 'у', 'с', 'ч', 'п', 'с'],
+    ['нед.', 'пон.', 'ут.', 'ср.', 'чет.', 'пет.', 'суб.'],
+    [
+      'недјеља', 'понедељак', 'уторак', 'сриједа', 'четвртак',
+      'петак', 'субота'
+    ],
+    ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су']
+  ],
+  u,
+  [
+    ['ј', 'ф', 'м', 'а', 'м', 'ј', 'ј', 'а', 'с', 'о', 'н', 'д'],
+    [
+      'јан.', 'феб.', 'март', 'апр.', 'мај', 'јун', 'јул', 'авг.',
+      'септ.', 'окт.', 'нов.', 'дец.'
+    ],
+    [
+      'јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул',
+      'август', 'септембар', 'октобар', 'новембар', 'децембар'
+    ]
+  ],
+  u,
+  [
+    ['п.н.е.', 'н.е.'], ['п. н. е.', 'н. е.'],
+    ['прије нове ере', 'нове ере']
+  ],
+  1, [6, 0], ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Евро', {
+    'AUD': [u, '$'],
+    'BAM': ['КМ', 'KM'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sr-Cyrl-XK.ts b/packages/common/locales/sr-Cyrl-XK.ts
new file mode 100644
index 000000000000..3e617e41f32d
--- /dev/null
+++ b/packages/common/locales/sr-Cyrl-XK.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export default [
+  'sr-Cyrl-XK', [['a', 'p'], ['пре подне', 'по подне'], u], u,
+  [
+    ['н', 'п', 'у', 'с', 'ч', 'п', 'с'],
+    ['нед.', 'пон.', 'ут.', 'ср.', 'чет.', 'пет.', 'суб.'],
+    [
+      'недеља', 'понедељак', 'уторак', 'среда', 'четвртак',
+      'петак', 'субота'
+    ],
+    ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су']
+  ],
+  u,
+  [
+    ['ј', 'ф', 'м', 'а', 'м', 'ј', 'ј', 'а', 'с', 'о', 'н', 'д'],
+    [
+      'јан.', 'феб.', 'март', 'апр.', 'мај', 'јун', 'јул', 'авг.',
+      'септ.', 'окт.', 'нов.', 'дец.'
+    ],
+    [
+      'јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул',
+      'август', 'септембар', 'октобар', 'новембар', 'децембар'
+    ]
+  ],
+  u,
+  [
+    ['п.н.е.', 'н.е.'], ['п. н. е.', 'н. е.'],
+    ['пре нове ере', 'нове ере']
+  ],
+  1, [6, 0], ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Евро', {
+    'AUD': [u, '$'],
+    'BAM': ['КМ', 'KM'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sr-Cyrl.ts b/packages/common/locales/sr-Cyrl.ts
new file mode 100644
index 000000000000..9c58a77cfcd5
--- /dev/null
+++ b/packages/common/locales/sr-Cyrl.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export default [
+  'sr-Cyrl', [['a', 'p'], ['пре подне', 'по подне'], u],
+  [['пре подне', 'по подне'], u, u],
+  [
+    ['н', 'п', 'у', 'с', 'ч', 'п', 'с'],
+    ['нед', 'пон', 'уто', 'сре', 'чет', 'пет', 'суб'],
+    [
+      'недеља', 'понедељак', 'уторак', 'среда', 'четвртак',
+      'петак', 'субота'
+    ],
+    ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су']
+  ],
+  u,
+  [
+    ['ј', 'ф', 'м', 'а', 'м', 'ј', 'ј', 'а', 'с', 'о', 'н', 'д'],
+    [
+      'јан', 'феб', 'мар', 'апр', 'мај', 'јун', 'јул', 'авг', 'сеп',
+      'окт', 'нов', 'дец'
+    ],
+    [
+      'јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул',
+      'август', 'септембар', 'октобар', 'новембар', 'децембар'
+    ]
+  ],
+  u,
+  [
+    ['п.н.е.', 'н.е.'], ['п. н. е.', 'н. е.'],
+    ['пре нове ере', 'нове ере']
+  ],
+  1, [6, 0], ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'RSD', 'Српски динар', {
+    'AUD': [u, '$'],
+    'BAM': ['КМ', 'KM'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sr-Latn-BA.ts b/packages/common/locales/sr-Latn-BA.ts
new file mode 100644
index 000000000000..11d0485d3ce2
--- /dev/null
+++ b/packages/common/locales/sr-Latn-BA.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'sr-Latn-BA', [['a', 'p'], ['prije podne', 'po podne'], u], u,
+  [
+    ['n', 'p', 'u', 's', 'č', 'p', 's'], ['ned.', 'pon.', 'ut.', 'sr.', 'čet.', 'pet.', 'sub.'],
+    ['nedjelja', 'ponedeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan.', 'feb.', 'mart', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sept.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar',
+      'novembar', 'decembar'
+    ]
+  ],
+  u, [['p.n.e.', 'n.e.'], ['p. n. e.', 'n. e.'], ['prije nove ere', 'nove ere']], 1, [6, 0],
+  ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'KM',
+  'Bosansko-hercegovačka konvertibilna marka', {
+    'AUD': [u, '$'],
+    'BAM': ['KM'],
+    'BYN': [u, 'r.'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sr-Latn-ME.ts b/packages/common/locales/sr-Latn-ME.ts
new file mode 100644
index 000000000000..fbde59dfaca4
--- /dev/null
+++ b/packages/common/locales/sr-Latn-ME.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'sr-Latn-ME', [['a', 'p'], ['prije podne', 'po podne'], u], u,
+  [
+    ['n', 'p', 'u', 's', 'č', 'p', 's'], ['ned.', 'pon.', 'ut.', 'sr.', 'čet.', 'pet.', 'sub.'],
+    ['nedjelja', 'ponedeljak', 'utorak', 'srijeda', 'četvrtak', 'petak', 'subota'],
+    ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan.', 'feb.', 'mart', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sept.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar',
+      'novembar', 'decembar'
+    ]
+  ],
+  u, [['p.n.e.', 'n.e.'], ['p. n. e.', 'n. e.'], ['prije nove ere', 'nove ere']], 1, [6, 0],
+  ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Evro', {
+    'AUD': [u, '$'],
+    'BAM': ['KM'],
+    'BYN': [u, 'r.'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sr-Latn-XK.ts b/packages/common/locales/sr-Latn-XK.ts
new file mode 100644
index 000000000000..3272bf3255e0
--- /dev/null
+++ b/packages/common/locales/sr-Latn-XK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'sr-Latn-XK', [['a', 'p'], ['pre podne', 'po podne'], u], u,
+  [
+    ['n', 'p', 'u', 's', 'č', 'p', 's'], ['ned.', 'pon.', 'ut.', 'sr.', 'čet.', 'pet.', 'sub.'],
+    ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
+    ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan.', 'feb.', 'mart', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sept.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar',
+      'novembar', 'decembar'
+    ]
+  ],
+  u, [['p.n.e.', 'n.e.'], ['p. n. e.', 'n. e.'], ['pre nove ere', 'nove ere']], 1, [6, 0],
+  ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '€', 'Evro', {
+    'AUD': [u, '$'],
+    'BAM': ['KM'],
+    'BYN': [u, 'r.'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sr-Latn.ts b/packages/common/locales/sr-Latn.ts
new file mode 100644
index 000000000000..a1ee04813bfa
--- /dev/null
+++ b/packages/common/locales/sr-Latn.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'sr-Latn', [['a', 'p'], ['pre podne', 'po podne'], u], [['pre podne', 'po podne'], u, u],
+  [
+    ['n', 'p', 'u', 's', 'č', 'p', 's'], ['ned', 'pon', 'uto', 'sre', 'čet', 'pet', 'sub'],
+    ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
+    ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su']
+  ],
+  u,
+  [
+    ['j', 'f', 'm', 'a', 'm', 'j', 'j', 'a', 's', 'o', 'n', 'd'],
+    ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'avg', 'sep', 'okt', 'nov', 'dec'],
+    [
+      'januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar',
+      'novembar', 'decembar'
+    ]
+  ],
+  u, [['p.n.e.', 'n.e.'], ['p. n. e.', 'n. e.'], ['pre nove ere', 'nove ere']], 1, [6, 0],
+  ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'RSD', 'Srpski dinar', {
+    'AUD': [u, '$'],
+    'BAM': ['KM'],
+    'BYN': [u, 'r.'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sr.ts b/packages/common/locales/sr.ts
new file mode 100644
index 000000000000..33d9b88e1e21
--- /dev/null
+++ b/packages/common/locales/sr.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length,
+      f = parseInt(n.toString().replace(/^[^.]*\.?/, ''), 10) || 0;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14) ||
+      f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+          !(f % 100 >= 12 && f % 100 <= 14))
+    return 3;
+  return 5;
+}
+
+export default [
+  'sr', [['a', 'p'], ['пре подне', 'по подне'], u],
+  [['пре подне', 'по подне'], u, u],
+  [
+    ['н', 'п', 'у', 'с', 'ч', 'п', 'с'],
+    ['нед', 'пон', 'уто', 'сре', 'чет', 'пет', 'суб'],
+    [
+      'недеља', 'понедељак', 'уторак', 'среда', 'четвртак',
+      'петак', 'субота'
+    ],
+    ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су']
+  ],
+  u,
+  [
+    ['ј', 'ф', 'м', 'а', 'м', 'ј', 'ј', 'а', 'с', 'о', 'н', 'д'],
+    [
+      'јан', 'феб', 'мар', 'апр', 'мај', 'јун', 'јул', 'авг', 'сеп',
+      'окт', 'нов', 'дец'
+    ],
+    [
+      'јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул',
+      'август', 'септембар', 'октобар', 'новембар', 'децембар'
+    ]
+  ],
+  u,
+  [
+    ['п.н.е.', 'н.е.'], ['п. н. е.', 'н. е.'],
+    ['пре нове ере', 'нове ере']
+  ],
+  1, [6, 0], ['d.M.yy.', 'dd.MM.y.', 'dd. MMMM y.', 'EEEE, dd. MMMM y.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'RSD', 'Српски динар', {
+    'AUD': [u, '$'],
+    'BAM': ['КМ', 'KM'],
+    'GEL': [u, 'ლ'],
+    'KRW': [u, '₩'],
+    'NZD': [u, '$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sv-AX.ts b/packages/common/locales/sv-AX.ts
new file mode 100644
index 000000000000..c38ae2cd18d2
--- /dev/null
+++ b/packages/common/locales/sv-AX.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'sv-AX', [['fm', 'em'], u, u], [['fm', 'em'], ['f.m.', 'e.m.'], ['förmiddag', 'eftermiddag']],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['sön', 'mån', 'tis', 'ons', 'tors', 'fre', 'lör'],
+    ['söndag', 'måndag', 'tisdag', 'onsdag', 'torsdag', 'fredag', 'lördag'],
+    ['sö', 'må', 'ti', 'on', 'to', 'fr', 'lö']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mars', 'apr.', 'maj', 'juni', 'juli', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'mars', 'april', 'maj', 'juni', 'juli', 'augusti', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['f.Kr.', 'e.Kr.'], u, ['före Kristus', 'efter Kristus']], 1, [6, 0],
+  ['y-MM-dd', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', '\'kl\'. HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '×10^', '×', '‰', '∞', '¤¤¤', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': [u, '$'],
+    'BBD': ['Bds$', '$'],
+    'BMD': ['BM$', '$'],
+    'BRL': ['BR$', 'R$'],
+    'BSD': ['BS$', '$'],
+    'BZD': ['BZ$', '$'],
+    'CNY': [u, '¥'],
+    'DKK': ['Dkr', 'kr'],
+    'DOP': ['RD$', '$'],
+    'EEK': ['Ekr'],
+    'EGP': ['EG£', 'E£'],
+    'ESP': [],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'IEP': ['IE£'],
+    'INR': [u, '₹'],
+    'ISK': ['Ikr', 'kr'],
+    'JMD': ['JM$', '$'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'NOK': ['Nkr', 'kr'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SEK': ['kr'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sv-FI.ts b/packages/common/locales/sv-FI.ts
new file mode 100644
index 000000000000..ab2ae5259f38
--- /dev/null
+++ b/packages/common/locales/sv-FI.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'sv-FI', [['fm', 'em'], u, u], [['fm', 'em'], ['f.m.', 'e.m.'], ['förmiddag', 'eftermiddag']],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['sön', 'mån', 'tis', 'ons', 'tors', 'fre', 'lör'],
+    ['söndag', 'måndag', 'tisdag', 'onsdag', 'torsdag', 'fredag', 'lördag'],
+    ['sö', 'må', 'ti', 'on', 'to', 'fr', 'lö']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mars', 'apr.', 'maj', 'juni', 'juli', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'mars', 'april', 'maj', 'juni', 'juli', 'augusti', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['f.Kr.', 'e.Kr.'], u, ['före Kristus', 'efter Kristus']], 1, [6, 0],
+  ['dd-MM-y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', '\'kl\'. HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '×10^', '×', '‰', '∞', '¤¤¤', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', {
+    'AUD': [u, '$'],
+    'BBD': ['Bds$', '$'],
+    'BMD': ['BM$', '$'],
+    'BRL': ['BR$', 'R$'],
+    'BSD': ['BS$', '$'],
+    'BZD': ['BZ$', '$'],
+    'CNY': [u, '¥'],
+    'DKK': ['Dkr', 'kr'],
+    'DOP': ['RD$', '$'],
+    'EEK': ['Ekr'],
+    'EGP': ['EG£', 'E£'],
+    'ESP': [],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'IEP': ['IE£'],
+    'INR': [u, '₹'],
+    'ISK': ['Ikr', 'kr'],
+    'JMD': ['JM$', '$'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'NOK': ['Nkr', 'kr'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SEK': ['kr'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sv.ts b/packages/common/locales/sv.ts
new file mode 100644
index 000000000000..22828b7c3c4a
--- /dev/null
+++ b/packages/common/locales/sv.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'sv', [['fm', 'em'], u, u], [['fm', 'em'], ['f.m.', 'e.m.'], ['förmiddag', 'eftermiddag']],
+  [
+    ['S', 'M', 'T', 'O', 'T', 'F', 'L'], ['sön', 'mån', 'tis', 'ons', 'tors', 'fre', 'lör'],
+    ['söndag', 'måndag', 'tisdag', 'onsdag', 'torsdag', 'fredag', 'lördag'],
+    ['sö', 'må', 'ti', 'on', 'to', 'fr', 'lö']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['jan.', 'feb.', 'mars', 'apr.', 'maj', 'juni', 'juli', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+    [
+      'januari', 'februari', 'mars', 'april', 'maj', 'juni', 'juli', 'augusti', 'september',
+      'oktober', 'november', 'december'
+    ]
+  ],
+  u, [['f.Kr.', 'e.Kr.'], u, ['före Kristus', 'efter Kristus']], 1, [6, 0],
+  ['y-MM-dd', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', '\'kl\'. HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '−', '×10^', '×', '‰', '∞', '¤¤¤', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'kr', 'svensk krona', {
+    'AUD': [u, '$'],
+    'BBD': ['Bds$', '$'],
+    'BMD': ['BM$', '$'],
+    'BRL': ['BR$', 'R$'],
+    'BSD': ['BS$', '$'],
+    'BZD': ['BZ$', '$'],
+    'CNY': [u, '¥'],
+    'DKK': ['Dkr', 'kr'],
+    'DOP': ['RD$', '$'],
+    'EEK': ['Ekr'],
+    'EGP': ['EG£', 'E£'],
+    'ESP': [],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'IEP': ['IE£'],
+    'INR': [u, '₹'],
+    'ISK': ['Ikr', 'kr'],
+    'JMD': ['JM$', '$'],
+    'JPY': [u, '¥'],
+    'KRW': [u, '₩'],
+    'NOK': ['Nkr', 'kr'],
+    'NZD': [u, '$'],
+    'RON': [u, 'L'],
+    'SEK': ['kr'],
+    'TWD': [u, 'NT$'],
+    'USD': ['US$', '$'],
+    'VND': [u, '₫']
+  },
+  plural
+];
diff --git a/packages/common/locales/sw-CD.ts b/packages/common/locales/sw-CD.ts
new file mode 100644
index 000000000000..c77f3ba998f8
--- /dev/null
+++ b/packages/common/locales/sw-CD.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'sw-CD', [['am', 'pm'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['Jumapili', 'Jumatatu', 'Jumanne', 'Jumatano', 'Alhamisi', 'Ijumaa', 'Jumamosi'], u, u
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Machi', 'Aprili', 'Mei', 'Juni', 'Julai', 'Agosti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Kristo', 'Baada ya Kristo']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'FC', 'Faranga ya Kongo', {
+    'CDF': ['FC'],
+    'JPY': ['JP¥', '¥'],
+    'KES': ['Ksh'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'TZS': ['TSh'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/sw-KE.ts b/packages/common/locales/sw-KE.ts
new file mode 100644
index 000000000000..0f2e50fe2ea4
--- /dev/null
+++ b/packages/common/locales/sw-KE.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'sw-KE', [['am', 'pm'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['Jumapili', 'Jumatatu', 'Jumanne', 'Jumatano', 'Alhamisi', 'Ijumaa', 'Jumamosi'], u, u
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Machi', 'Aprili', 'Mei', 'Juni', 'Julai', 'Agosti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Kristo', 'Baada ya Kristo']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'saa\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Shilingi ya Kenya', {
+    'JPY': ['JP¥', '¥'],
+    'KES': ['Ksh'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'TZS': ['TSh'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/sw-UG.ts b/packages/common/locales/sw-UG.ts
new file mode 100644
index 000000000000..9bc6c858df08
--- /dev/null
+++ b/packages/common/locales/sw-UG.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'sw-UG', [['am', 'pm'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['Jumapili', 'Jumatatu', 'Jumanne', 'Jumatano', 'Alhamisi', 'Ijumaa', 'Jumamosi'], u, u
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Machi', 'Aprili', 'Mei', 'Juni', 'Julai', 'Agosti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Kristo', 'Baada ya Kristo']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'USh', 'Shilingi ya Uganda', {
+    'JPY': ['JP¥', '¥'],
+    'KES': ['Ksh'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'TZS': ['TSh'],
+    'UGX': ['USh'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/sw.ts b/packages/common/locales/sw.ts
new file mode 100644
index 000000000000..9f8b0e9eee3b
--- /dev/null
+++ b/packages/common/locales/sw.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'sw', [['am', 'pm'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['Jumapili', 'Jumatatu', 'Jumanne', 'Jumatano', 'Alhamisi', 'Ijumaa', 'Jumamosi'], u, u
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Machi', 'Aprili', 'Mei', 'Juni', 'Julai', 'Agosti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Kristo', 'Baada ya Kristo']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'TSh', 'Shilingi ya Tanzania', {
+    'JPY': ['JP¥', '¥'],
+    'KES': ['Ksh'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'TZS': ['TSh'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ta-LK.ts b/packages/common/locales/ta-LK.ts
new file mode 100644
index 000000000000..a02b782eef6b
--- /dev/null
+++ b/packages/common/locales/ta-LK.ts
@@ -0,0 +1,66 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ta-LK',
+  [['மு.ப', 'பி.ப'], ['முற்பகல்', 'பிற்பகல்'], u], u,
+  [
+    ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச'],
+    [
+      'ஞாயி.', 'திங்.', 'செவ்.', 'புத.', 'வியா.',
+      'வெள்.', 'சனி'
+    ],
+    [
+      'ஞாயிறு', 'திங்கள்', 'செவ்வாய்', 'புதன்',
+      'வியாழன்', 'வெள்ளி', 'சனி'
+    ],
+    ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச']
+  ],
+  u,
+  [
+    [
+      'ஜ', 'பி', 'மா', 'ஏ', 'மே', 'ஜூ', 'ஜூ', 'ஆ', 'செ', 'அ', 'ந',
+      'டி'
+    ],
+    [
+      'ஜன.', 'பிப்.', 'மார்.', 'ஏப்.', 'மே', 'ஜூன்',
+      'ஜூலை', 'ஆக.', 'செப்.', 'அக்.', 'நவ.', 'டிச.'
+    ],
+    [
+      'ஜனவரி', 'பிப்ரவரி', 'மார்ச்', 'ஏப்ரல்',
+      'மே', 'ஜூன்', 'ஜூலை', 'ஆகஸ்ட்',
+      'செப்டம்பர்', 'அக்டோபர்', 'நவம்பர்',
+      'டிசம்பர்'
+    ]
+  ],
+  u,
+  [
+    ['கி.மு.', 'கி.பி.'], u,
+    [
+      'கிறிஸ்துவுக்கு முன்',
+      'அன்னோ டோமினி'
+    ]
+  ],
+  1, [6, 0], ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'],
+  ['{1}, {0}', u, '{1} ’அன்று’ {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], 'Rs.',
+  'இலங்கை ரூபாய்', {'LKR': ['Rs.', 'Rs'], 'THB': ['฿'], 'TWD': ['NT$']},
+  plural
+];
diff --git a/packages/common/locales/ta-MY.ts b/packages/common/locales/ta-MY.ts
new file mode 100644
index 000000000000..5623509d3746
--- /dev/null
+++ b/packages/common/locales/ta-MY.ts
@@ -0,0 +1,66 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ta-MY',
+  [['மு.ப', 'பி.ப'], ['முற்பகல்', 'பிற்பகல்'], u], u,
+  [
+    ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச'],
+    [
+      'ஞாயி.', 'திங்.', 'செவ்.', 'புத.', 'வியா.',
+      'வெள்.', 'சனி'
+    ],
+    [
+      'ஞாயிறு', 'திங்கள்', 'செவ்வாய்', 'புதன்',
+      'வியாழன்', 'வெள்ளி', 'சனி'
+    ],
+    ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச']
+  ],
+  u,
+  [
+    [
+      'ஜ', 'பி', 'மா', 'ஏ', 'மே', 'ஜூ', 'ஜூ', 'ஆ', 'செ', 'அ', 'ந',
+      'டி'
+    ],
+    [
+      'ஜன.', 'பிப்.', 'மார்.', 'ஏப்.', 'மே', 'ஜூன்',
+      'ஜூலை', 'ஆக.', 'செப்.', 'அக்.', 'நவ.', 'டிச.'
+    ],
+    [
+      'ஜனவரி', 'பிப்ரவரி', 'மார்ச்', 'ஏப்ரல்',
+      'மே', 'ஜூன்', 'ஜூலை', 'ஆகஸ்ட்',
+      'செப்டம்பர்', 'அக்டோபர்', 'நவம்பர்',
+      'டிசம்பர்'
+    ]
+  ],
+  u,
+  [
+    ['கி.மு.', 'கி.பி.'], u,
+    [
+      'கிறிஸ்துவுக்கு முன்',
+      'அன்னோ டோமினி'
+    ]
+  ],
+  1, [6, 0], ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['a h:mm', 'a h:mm:ss', 'a h:mm:ss z', 'a h:mm:ss zzzz'],
+  ['{1}, {0}', u, '{1} ’அன்று’ {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'RM',
+  'மலேஷியன் ரிங்கிட்',
+  {'MYR': ['RM'], 'SGD': ['S$', '$'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/ta-SG.ts b/packages/common/locales/ta-SG.ts
new file mode 100644
index 000000000000..61cba34d47ff
--- /dev/null
+++ b/packages/common/locales/ta-SG.ts
@@ -0,0 +1,66 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ta-SG',
+  [['மு.ப', 'பி.ப'], ['முற்பகல்', 'பிற்பகல்'], u], u,
+  [
+    ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச'],
+    [
+      'ஞாயி.', 'திங்.', 'செவ்.', 'புத.', 'வியா.',
+      'வெள்.', 'சனி'
+    ],
+    [
+      'ஞாயிறு', 'திங்கள்', 'செவ்வாய்', 'புதன்',
+      'வியாழன்', 'வெள்ளி', 'சனி'
+    ],
+    ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச']
+  ],
+  u,
+  [
+    [
+      'ஜ', 'பி', 'மா', 'ஏ', 'மே', 'ஜூ', 'ஜூ', 'ஆ', 'செ', 'அ', 'ந',
+      'டி'
+    ],
+    [
+      'ஜன.', 'பிப்.', 'மார்.', 'ஏப்.', 'மே', 'ஜூன்',
+      'ஜூலை', 'ஆக.', 'செப்.', 'அக்.', 'நவ.', 'டிச.'
+    ],
+    [
+      'ஜனவரி', 'பிப்ரவரி', 'மார்ச்', 'ஏப்ரல்',
+      'மே', 'ஜூன்', 'ஜூலை', 'ஆகஸ்ட்',
+      'செப்டம்பர்', 'அக்டோபர்', 'நவம்பர்',
+      'டிசம்பர்'
+    ]
+  ],
+  u,
+  [
+    ['கி.மு.', 'கி.பி.'], u,
+    [
+      'கிறிஸ்துவுக்கு முன்',
+      'அன்னோ டோமினி'
+    ]
+  ],
+  0, [6, 0], ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['a h:mm', 'a h:mm:ss', 'a h:mm:ss z', 'a h:mm:ss zzzz'],
+  ['{1}, {0}', u, '{1} ’அன்று’ {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '$',
+  'சிங்கப்பூர் டாலர்',
+  {'MYR': ['RM'], 'SGD': ['$'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ta.ts b/packages/common/locales/ta.ts
new file mode 100644
index 000000000000..1e5cde53170d
--- /dev/null
+++ b/packages/common/locales/ta.ts
@@ -0,0 +1,65 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ta', [['மு.ப', 'பி.ப'], ['முற்பகல்', 'பிற்பகல்'], u],
+  u,
+  [
+    ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச'],
+    [
+      'ஞாயி.', 'திங்.', 'செவ்.', 'புத.', 'வியா.',
+      'வெள்.', 'சனி'
+    ],
+    [
+      'ஞாயிறு', 'திங்கள்', 'செவ்வாய்', 'புதன்',
+      'வியாழன்', 'வெள்ளி', 'சனி'
+    ],
+    ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச']
+  ],
+  u,
+  [
+    [
+      'ஜ', 'பி', 'மா', 'ஏ', 'மே', 'ஜூ', 'ஜூ', 'ஆ', 'செ', 'அ', 'ந',
+      'டி'
+    ],
+    [
+      'ஜன.', 'பிப்.', 'மார்.', 'ஏப்.', 'மே', 'ஜூன்',
+      'ஜூலை', 'ஆக.', 'செப்.', 'அக்.', 'நவ.', 'டிச.'
+    ],
+    [
+      'ஜனவரி', 'பிப்ரவரி', 'மார்ச்', 'ஏப்ரல்',
+      'மே', 'ஜூன்', 'ஜூலை', 'ஆகஸ்ட்',
+      'செப்டம்பர்', 'அக்டோபர்', 'நவம்பர்',
+      'டிசம்பர்'
+    ]
+  ],
+  u,
+  [
+    ['கி.மு.', 'கி.பி.'], u,
+    [
+      'கிறிஸ்துவுக்கு முன்',
+      'அன்னோ டோமினி'
+    ]
+  ],
+  0, [0, 0], ['d/M/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['a h:mm', 'a h:mm:ss', 'a h:mm:ss z', 'a h:mm:ss zzzz'],
+  ['{1}, {0}', u, '{1} ’அன்று’ {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##,##0%', '¤ #,##,##0.00', '#E0'], '₹',
+  'இந்திய ரூபாய்', {'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/te.ts b/packages/common/locales/te.ts
new file mode 100644
index 000000000000..16f983c04af1
--- /dev/null
+++ b/packages/common/locales/te.ts
@@ -0,0 +1,65 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'te', [['ఉ', 'సా'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['ఆ', 'సో', 'మ', 'బు', 'గు', 'శు', 'శ'],
+    [
+      'ఆది', 'సోమ', 'మంగళ', 'బుధ', 'గురు', 'శుక్ర',
+      'శని'
+    ],
+    [
+      'ఆదివారం', 'సోమవారం', 'మంగళవారం',
+      'బుధవారం', 'గురువారం', 'శుక్రవారం',
+      'శనివారం'
+    ],
+    [
+      'ఆది', 'సోమ', 'మం', 'బుధ', 'గురు', 'శుక్ర',
+      'శని'
+    ]
+  ],
+  u,
+  [
+    [
+      'జ', 'ఫి', 'మా', 'ఏ', 'మే', 'జూ', 'జు', 'ఆ', 'సె', 'అ', 'న',
+      'డి'
+    ],
+    [
+      'జన', 'ఫిబ్ర', 'మార్చి', 'ఏప్రి', 'మే',
+      'జూన్', 'జులై', 'ఆగ', 'సెప్టెం', 'అక్టో',
+      'నవం', 'డిసెం'
+    ],
+    [
+      'జనవరి', 'ఫిబ్రవరి', 'మార్చి', 'ఏప్రిల్',
+      'మే', 'జూన్', 'జులై', 'ఆగస్టు',
+      'సెప్టెంబర్', 'అక్టోబర్', 'నవంబర్',
+      'డిసెంబర్'
+    ]
+  ],
+  u,
+  [
+    ['క్రీపూ', 'క్రీశ'], u,
+    ['క్రీస్తు పూర్వం', 'క్రీస్తు శకం']
+  ],
+  0, [0, 0], ['dd-MM-yy', 'd MMM, y', 'd MMMM, y', 'd, MMMM y, EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, '{1} {0}కి', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##,##0.###', '#,##0%', '¤#,##,##0.00', '#E0'], '₹', 'రూపాయి',
+  {'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/teo-KE.ts b/packages/common/locales/teo-KE.ts
new file mode 100644
index 000000000000..51ffff245bbe
--- /dev/null
+++ b/packages/common/locales/teo-KE.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'teo-KE', [['Taparachu', 'Ebongi'], u, u], u,
+  [
+    ['J', 'B', 'A', 'U', 'U', 'K', 'S'], ['Jum', 'Bar', 'Aar', 'Uni', 'Ung', 'Kan', 'Sab'],
+    ['Nakaejuma', 'Nakaebarasa', 'Nakaare', 'Nakauni', 'Nakaung’on', 'Nakakany', 'Nakasabiti'],
+    ['Jum', 'Bar', 'Aar', 'Uni', 'Ung', 'Kan', 'Sab']
+  ],
+  u,
+  [
+    ['R', 'M', 'K', 'D', 'M', 'M', 'J', 'P', 'S', 'T', 'L', 'P'],
+    ['Rar', 'Muk', 'Kwa', 'Dun', 'Mar', 'Mod', 'Jol', 'Ped', 'Sok', 'Tib', 'Lab', 'Poo'],
+    [
+      'Orara', 'Omuk', 'Okwamg’', 'Odung’el', 'Omaruk', 'Omodok’king’ol', 'Ojola', 'Opedel',
+      'Osokosokoma', 'Otibar', 'Olabor', 'Opoo'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Christo', 'Baada ya Christo']], 0, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Ksh', 'Ango’otol lok’ Kenya',
+  {'JPY': ['JP¥', '¥'], 'KES': ['Ksh'], 'UGX': ['USh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/teo.ts b/packages/common/locales/teo.ts
new file mode 100644
index 000000000000..220858173ef4
--- /dev/null
+++ b/packages/common/locales/teo.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'teo', [['Taparachu', 'Ebongi'], u, u], u,
+  [
+    ['J', 'B', 'A', 'U', 'U', 'K', 'S'], ['Jum', 'Bar', 'Aar', 'Uni', 'Ung', 'Kan', 'Sab'],
+    ['Nakaejuma', 'Nakaebarasa', 'Nakaare', 'Nakauni', 'Nakaung’on', 'Nakakany', 'Nakasabiti'],
+    ['Jum', 'Bar', 'Aar', 'Uni', 'Ung', 'Kan', 'Sab']
+  ],
+  u,
+  [
+    ['R', 'M', 'K', 'D', 'M', 'M', 'J', 'P', 'S', 'T', 'L', 'P'],
+    ['Rar', 'Muk', 'Kwa', 'Dun', 'Mar', 'Mod', 'Jol', 'Ped', 'Sok', 'Tib', 'Lab', 'Poo'],
+    [
+      'Orara', 'Omuk', 'Okwamg’', 'Odung’el', 'Omaruk', 'Omodok’king’ol', 'Ojola', 'Opedel',
+      'Osokosokoma', 'Otibar', 'Olabor', 'Opoo'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Christo', 'Baada ya Christo']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'USh', 'Ango’otol lok’ Uganda',
+  {'JPY': ['JP¥', '¥'], 'UGX': ['USh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/tg.ts b/packages/common/locales/tg.ts
new file mode 100644
index 000000000000..f1c472b95c33
--- /dev/null
+++ b/packages/common/locales/tg.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'tg', [['AM', 'PM'], u, ['пе. чо.', 'па. чо.']], [['AM', 'PM'], u, u],
+  [
+    ['Я', 'Д', 'С', 'Ч', 'П', 'Ҷ', 'Ш'],
+    ['Яшб', 'Дшб', 'Сшб', 'Чшб', 'Пшб', 'Ҷмъ', 'Шнб'],
+    [
+      'Якшанбе', 'Душанбе', 'Сешанбе', 'Чоршанбе',
+      'Панҷшанбе', 'Ҷумъа', 'Шанбе'
+    ],
+    ['Яшб', 'Дшб', 'Сшб', 'Чшб', 'Пшб', 'Ҷмъ', 'Шнб']
+  ],
+  u,
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен',
+      'Окт', 'Ноя', 'Дек'
+    ],
+    [
+      'Январ', 'Феврал', 'Март', 'Апрел', 'Май', 'Июн', 'Июл',
+      'Август', 'Сентябр', 'Октябр', 'Ноябр', 'Декабр'
+    ]
+  ],
+  u, [['ПеМ', 'ПаМ'], u, ['Пеш аз милод', 'ПаМ']], 1, [6, 0],
+  ['dd/MM/yy', 'dd MMM y', 'dd MMMM y', 'EEEE, dd MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'сом.', 'Сомонӣ',
+  {'JPY': ['JP¥', '¥'], 'TJS': ['сом.']}, plural
+];
diff --git a/packages/common/locales/th.ts b/packages/common/locales/th.ts
new file mode 100644
index 000000000000..eeed222968c5
--- /dev/null
+++ b/packages/common/locales/th.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'th', [['a', 'p'], ['ก่อนเที่ยง', 'หลังเที่ยง'], u],
+  [['ก่อนเที่ยง', 'หลังเที่ยง'], u, u],
+  [
+    ['อา', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส'],
+    ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
+    [
+      'วันอาทิตย์', 'วันจันทร์',
+      'วันอังคาร', 'วันพุธ', 'วันพฤหัสบดี',
+      'วันศุกร์', 'วันเสาร์'
+    ],
+    ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.']
+  ],
+  u,
+  [
+    [
+      'ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.',
+      'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'
+    ],
+    u,
+    [
+      'มกราคม', 'กุมภาพันธ์', 'มีนาคม',
+      'เมษายน', 'พฤษภาคม', 'มิถุนายน',
+      'กรกฎาคม', 'สิงหาคม', 'กันยายน',
+      'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'
+    ]
+  ],
+  u,
+  [
+    ['ก่อน ค.ศ.', 'ค.ศ.'], ['ปีก่อน ค.ศ.', 'ค.ศ.'],
+    [
+      'ปีก่อนคริสต์ศักราช',
+      'คริสต์ศักราช'
+    ]
+  ],
+  0, [6, 0], ['d/M/yy', 'd MMM y', 'd MMMM G y', 'EEEEที่ d MMMM G y'],
+  [
+    'HH:mm', 'HH:mm:ss', 'H นาฬิกา mm นาที ss วินาที z',
+    'H นาฬิกา mm นาที ss วินาที zzzz'
+  ],
+  ['{1} {0}', u, u, u], ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'THB', 'บาท',
+  {'AUD': ['AU$', '$'], 'TWD': ['NT$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ti-ER.ts b/packages/common/locales/ti-ER.ts
new file mode 100644
index 000000000000..2932c928e7ea
--- /dev/null
+++ b/packages/common/locales/ti-ER.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'ti-ER', [['ንጉሆ ሰዓተ', 'ድሕር ሰዓት'], u, u], u,
+  [
+    ['ሰ', 'ሰ', 'ሰ', 'ረ', 'ሓ', 'ዓ', 'ቀ'],
+    ['ሰን', 'ሰኑ', 'ሰሉ', 'ረቡ', 'ሓሙ', 'ዓር', 'ቀዳ'],
+    ['ሰንበት', 'ሰኑይ', 'ሠሉስ', 'ረቡዕ', 'ኃሙስ', 'ዓርቢ', 'ቀዳም'],
+    ['ሰን', 'ሰኑ', 'ሰሉ', 'ረቡ', 'ሓሙ', 'ዓር', 'ቀዳ']
+  ],
+  [
+    ['ሰ', 'ሰ', 'ሰ', 'ረ', 'ሓ', 'ዓ', 'ቀ'],
+    ['ሰን', 'ሰኑ', 'ሰሉ', 'ረቡ', 'ሓሙ', 'ዓር', 'ቀዳ'],
+    ['ሰንበት', 'ሰኑይ', 'ሰሉስ', 'ረቡዕ', 'ሓሙስ', 'ዓርቢ', 'ቀዳም'],
+    ['ሰን', 'ሰኑ', 'ሰሉ', 'ረቡ', 'ሓሙ', 'ዓር', 'ቀዳ']
+  ],
+  [
+    ['ጥ', 'ለ', 'መ', 'ሚ', 'ግ', 'ሰ', 'ሓ', 'ነ', 'መ', 'ጥ', 'ሕ', 'ታ'],
+    [
+      'ጥሪ', 'ለካ', 'መጋ', 'ሚያ', 'ግን', 'ሰነ', 'ሓም', 'ነሓ', 'መስ',
+      'ጥቅ', 'ሕዳ', 'ታሕ'
+    ],
+    [
+      'ጥሪ', 'ለካቲት', 'መጋቢት', 'ሚያዝያ', 'ግንቦት', 'ሰነ',
+      'ሓምለ', 'ነሓሰ', 'መስከረም', 'ጥቅምቲ', 'ሕዳር', 'ታሕሳስ'
+    ]
+  ],
+  u, [['ዓ/ዓ', 'ዓ/ም'], u, ['ዓመተ ዓለም', 'ዓመተ ምህረት']], 1, [6, 0],
+  ['dd/MM/yy', 'dd-MMM-y', 'dd MMMM y', 'EEEE፣ dd MMMM መዓልቲ y G'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Nfk', 'ERN',
+  {'ERN': ['Nfk'], 'ETB': ['Br'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ti.ts b/packages/common/locales/ti.ts
new file mode 100644
index 000000000000..ad625d568695
--- /dev/null
+++ b/packages/common/locales/ti.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1) return 1;
+  return 5;
+}
+
+export default [
+  'ti', [['ንጉሆ ሰዓተ', 'ድሕር ሰዓት'], u, u], u,
+  [
+    ['ሰ', 'ሰ', 'ሰ', 'ረ', 'ሓ', 'ዓ', 'ቀ'],
+    ['ሰን', 'ሰኑ', 'ሰሉ', 'ረቡ', 'ሓሙ', 'ዓር', 'ቀዳ'],
+    ['ሰንበት', 'ሰኑይ', 'ሠሉስ', 'ረቡዕ', 'ኃሙስ', 'ዓርቢ', 'ቀዳም'],
+    ['ሰን', 'ሰኑ', 'ሰሉ', 'ረቡ', 'ሓሙ', 'ዓር', 'ቀዳ']
+  ],
+  [
+    ['ሰ', 'ሰ', 'ሠ', 'ረ', 'ሓ', 'ዓ', 'ቀ'],
+    ['ሰን', 'ሰኑ', 'ሰሉ', 'ረቡ', 'ሓሙ', 'ዓር', 'ቀዳ'],
+    ['ሰንበት', 'ሰኑይ', 'ሰሉስ', 'ረቡዕ', 'ሓሙስ', 'ዓርቢ', 'ቀዳም'],
+    ['ሰን', 'ሰኑ', 'ሰሉ', 'ረቡ', 'ሓሙ', 'ዓር', 'ቀዳ']
+  ],
+  [
+    ['ጥ', 'ለ', 'መ', 'ሚ', 'ግ', 'ሰ', 'ሓ', 'ነ', 'መ', 'ጥ', 'ሕ', 'ታ'],
+    [
+      'ጥሪ', 'ለካ', 'መጋ', 'ሚያ', 'ግን', 'ሰነ', 'ሓም', 'ነሓ', 'መስ',
+      'ጥቅ', 'ሕዳ', 'ታሕ'
+    ],
+    [
+      'ጥሪ', 'ለካቲት', 'መጋቢት', 'ሚያዝያ', 'ግንቦት', 'ሰነ',
+      'ሓምለ', 'ነሓሰ', 'መስከረም', 'ጥቅምቲ', 'ሕዳር', 'ታሕሳስ'
+    ]
+  ],
+  u, [['ዓ/ዓ', 'ዓ/ም'], u, ['ዓ/ዓ', 'ዓመተ ምህረት']], 0, [6, 0],
+  ['dd/MM/yy', 'dd-MMM-y', 'dd MMMM y', 'EEEE፣ dd MMMM መዓልቲ y G'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'Br', 'የኢትዮጵያ ብር',
+  {'ETB': ['Br'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/tk.ts b/packages/common/locales/tk.ts
new file mode 100644
index 000000000000..be30bb8f6839
--- /dev/null
+++ b/packages/common/locales/tk.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'tk', [['öň', 'soň'], ['go.öň', 'go.soň'], ['günortadan öň', 'günortadan soň']],
+  [['öň', 'soň'], ['g.öň', 'g.soň'], ['günortadan öň', 'günortadan soň']],
+  [
+    ['Ý', 'D', 'S', 'Ç', 'P', 'A', 'Ş'], ['ýek', 'duş', 'siş', 'çar', 'pen', 'ann', 'şen'],
+    ['ýekşenbe', 'duşenbe', 'sişenbe', 'çarşenbe', 'penşenbe', 'anna', 'şenbe'],
+    ['ýb', 'db', 'sb', 'çb', 'pb', 'an', 'şb']
+  ],
+  [
+    ['Ý', 'D', 'S', 'Ç', 'P', 'A', 'Ş'], ['Ýek', 'Duş', 'Siş', 'Çar', 'Pen', 'Ann', 'Şen'],
+    ['Ýekşenbe', 'Duşenbe', 'Sişenbe', 'Çarşenbe', 'Penşenbe', 'Anna', 'Şenbe'],
+    ['Ýb', 'Db', 'Sb', 'Çb', 'Pb', 'An', 'Şb']
+  ],
+  [
+    ['Ý', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    ['ýan', 'few', 'mart', 'apr', 'maý', 'iýun', 'iýul', 'awg', 'sen', 'okt', 'noý', 'dek'],
+    [
+      'ýanwar', 'fewral', 'mart', 'aprel', 'maý', 'iýun', 'iýul', 'awgust', 'sentýabr',
+      'oktýabr', 'noýabr', 'dekabr'
+    ]
+  ],
+  [
+    ['Ý', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    ['Ýan', 'Few', 'Mart', 'Apr', 'Maý', 'Iýun', 'Iýul', 'Awg', 'Sen', 'Okt', 'Noý', 'Dek'],
+    [
+      'Ýanwar', 'Fewral', 'Mart', 'Aprel', 'Maý', 'Iýun', 'Iýul', 'Awgust', 'Sentýabr',
+      'Oktýabr', 'Noýabr', 'Dekabr'
+    ]
+  ],
+  [['B.e.öň', 'B.e.'], u, ['Isadan öň', 'Isadan soň']], 1, [6, 0],
+  ['dd.MM.y', 'd MMM y', 'd MMMM y', 'd MMMM y EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'san däl', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], 'TMT', 'Türkmen manady',
+  {'EUR': [u, '€'], 'GBP': [u, '£'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/to.ts b/packages/common/locales/to.ts
new file mode 100644
index 000000000000..7460483522e2
--- /dev/null
+++ b/packages/common/locales/to.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'to', [['AM', 'PM'], u, ['hengihengi', 'efiafi']], [['AM', 'PM'], u, ['HH', 'EA']],
+  [
+    ['S', 'M', 'T', 'P', 'T', 'F', 'T'], ['Sāp', 'Mōn', 'Tūs', 'Pul', 'Tuʻa', 'Fal', 'Tok'],
+    ['Sāpate', 'Mōnite', 'Tūsite', 'Pulelulu', 'Tuʻapulelulu', 'Falaite', 'Tokonaki'],
+    ['Sāp', 'Mōn', 'Tūs', 'Pul', 'Tuʻa', 'Fal', 'Tok']
+  ],
+  u,
+  [
+    ['S', 'F', 'M', 'E', 'M', 'S', 'S', 'A', 'S', 'O', 'N', 'T'],
+    [
+      'Sān', 'Fēp', 'Maʻa', 'ʻEpe', 'Mē', 'Sun', 'Siu', 'ʻAok', 'Sep', 'ʻOka', 'Nōv', 'Tīs'
+    ],
+    [
+      'Sānuali', 'Fēpueli', 'Maʻasi', 'ʻEpeleli', 'Mē', 'Sune', 'Siulai', 'ʻAokosi',
+      'Sepitema', 'ʻOkatopa', 'Nōvema', 'Tīsema'
+    ]
+  ],
+  u, [['KM', 'TS'], u, ['ki muʻa', 'taʻu ʻo Sīsū']], 1, [6, 0],
+  ['d/M/yy', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', '{1}, {0}', u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'TF', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'T$', 'Paʻanga fakatonga', {
+    'AUD': ['AUD$', '$'],
+    'JPY': ['JP¥', '¥'],
+    'NZD': ['NZD$', '$'],
+    'TOP': ['T$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/tr-CY.ts b/packages/common/locales/tr-CY.ts
new file mode 100644
index 000000000000..b20941eb08b5
--- /dev/null
+++ b/packages/common/locales/tr-CY.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'tr-CY', [['öö', 'ös'], ['ÖÖ', 'ÖS'], u], [['ÖÖ', 'ÖS'], u, u],
+  [
+    ['P', 'P', 'S', 'Ç', 'P', 'C', 'C'], ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
+    ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
+    ['Pa', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct']
+  ],
+  u,
+  [
+    ['O', 'Ş', 'M', 'N', 'M', 'H', 'T', 'A', 'E', 'E', 'K', 'A'],
+    ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
+    [
+      'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül',
+      'Ekim', 'Kasım', 'Aralık'
+    ]
+  ],
+  u, [['MÖ', 'MS'], u, ['Milattan Önce', 'Milattan Sonra']], 1, [6, 0],
+  ['d.MM.y', 'd MMM y', 'd MMMM y', 'd MMMM y EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '%#,##0', '¤#,##0.00', '#E0'], '€', 'Euro',
+  {'AUD': ['AU$', '$'], 'RON': [u, 'L'], 'THB': ['฿'], 'TRY': ['₺'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/tr.ts b/packages/common/locales/tr.ts
new file mode 100644
index 000000000000..5b1326fbd63a
--- /dev/null
+++ b/packages/common/locales/tr.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'tr', [['öö', 'ös'], ['ÖÖ', 'ÖS'], u], [['ÖÖ', 'ÖS'], u, u],
+  [
+    ['P', 'P', 'S', 'Ç', 'P', 'C', 'C'], ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
+    ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
+    ['Pa', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct']
+  ],
+  u,
+  [
+    ['O', 'Ş', 'M', 'N', 'M', 'H', 'T', 'A', 'E', 'E', 'K', 'A'],
+    ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
+    [
+      'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül',
+      'Ekim', 'Kasım', 'Aralık'
+    ]
+  ],
+  u, [['MÖ', 'MS'], u, ['Milattan Önce', 'Milattan Sonra']], 1, [6, 0],
+  ['d.MM.y', 'd MMM y', 'd MMMM y', 'd MMMM y EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '%#,##0', '¤#,##0.00', '#E0'], '₺', 'Türk Lirası',
+  {'AUD': ['AU$', '$'], 'RON': [u, 'L'], 'THB': ['฿'], 'TRY': ['₺'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/tsconfig-build.json b/packages/common/locales/tsconfig-build.json
new file mode 100644
index 000000000000..5a57417b9615
--- /dev/null
+++ b/packages/common/locales/tsconfig-build.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "stripInternal": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../../../dist/packages/common/locales",
+    "paths": {
+      "@angular/common": ["../../../dist/packages/common"],
+      "@angular/core": ["../../../dist/packages/core"]
+    },
+    "sourceMap": true,
+    "inlineSources": true,
+    "target": "es5",
+    "skipLibCheck": true,
+    "lib": ["es2015", "dom"]
+  },
+  "exclude": [
+    "./closure-locale.ts"
+  ],
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "skipMetadataEmit": true
+  }
+}
diff --git a/packages/common/locales/tt.ts b/packages/common/locales/tt.ts
new file mode 100644
index 000000000000..2a27c937645f
--- /dev/null
+++ b/packages/common/locales/tt.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'tt', [['AM', 'PM'], u, u], u,
+  [
+    ['Я', 'Д', 'С', 'Ч', 'П', 'Җ', 'Ш'],
+    ['якш.', 'дүш.', 'сиш.', 'чәр.', 'пәнҗ.', 'җом.', 'шим.'],
+    [
+      'якшәмбе', 'дүшәмбе', 'сишәмбе', 'чәршәмбе',
+      'пәнҗешәмбе', 'җомга', 'шимбә'
+    ],
+    ['якш.', 'дүш.', 'сиш.', 'чәр.', 'пәнҗ.', 'җом.', 'шим.']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'гыйн.', 'фев.', 'мар.', 'апр.', 'май', 'июнь', 'июль', 'авг.',
+      'сент.', 'окт.', 'нояб.', 'дек.'
+    ],
+    [
+      'гыйнвар', 'февраль', 'март', 'апрель', 'май', 'июнь',
+      'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь',
+      'декабрь'
+    ]
+  ],
+  u, [['б.э.к.', 'б.э.'], u, ['безнең эрага кадәр', 'безнең эра']], 1,
+  [6, 0], ['dd.MM.y', 'd MMM, y \'ел\'', 'd MMMM, y \'ел\'', 'd MMMM, y \'ел\', EEEE'],
+  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '₽', 'Россия сумы',
+  {'JPY': ['JP¥', '¥'], 'RUB': ['₽']}, plural
+];
diff --git a/packages/common/locales/twq.ts b/packages/common/locales/twq.ts
new file mode 100644
index 000000000000..78528fff9ae8
--- /dev/null
+++ b/packages/common/locales/twq.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'twq', [['Subbaahi', 'Zaarikay b'], u, u], u,
+  [
+    ['H', 'T', 'T', 'L', 'L', 'L', 'S'], ['Alh', 'Ati', 'Ata', 'Ala', 'Alm', 'Alz', 'Asi'],
+    ['Alhadi', 'Atinni', 'Atalaata', 'Alarba', 'Alhamiisa', 'Alzuma', 'Asibti'],
+    ['Alh', 'Ati', 'Ata', 'Ala', 'Alm', 'Alz', 'Asi']
+  ],
+  u,
+  [
+    ['Ž', 'F', 'M', 'A', 'M', 'Ž', 'Ž', 'U', 'S', 'O', 'N', 'D'],
+    ['Žan', 'Fee', 'Mar', 'Awi', 'Me', 'Žuw', 'Žuy', 'Ut', 'Sek', 'Okt', 'Noo', 'Dee'],
+    [
+      'Žanwiye', 'Feewiriye', 'Marsi', 'Awiril', 'Me', 'Žuweŋ', 'Žuyye', 'Ut', 'Sektanbur',
+      'Oktoobur', 'Noowanbur', 'Deesanbur'
+    ]
+  ],
+  u, [['IJ', 'IZ'], u, ['Isaa jine', 'Isaa zamanoo']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00¤', '#E0'], 'CFA', 'CFA Fraŋ (BCEAO)',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/tzm.ts b/packages/common/locales/tzm.ts
new file mode 100644
index 000000000000..319a0bfe5e2e
--- /dev/null
+++ b/packages/common/locales/tzm.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === Math.floor(n) && n >= 0 && n <= 1 || n === Math.floor(n) && n >= 11 && n <= 99)
+    return 1;
+  return 5;
+}
+
+export default [
+  'tzm', [['Zdat azal', 'Ḍeffir aza'], u, u], u,
+  [
+    ['A', 'A', 'A', 'A', 'A', 'A', 'A'], ['Asa', 'Ayn', 'Asn', 'Akr', 'Akw', 'Asm', 'Asḍ'],
+    ['Asamas', 'Aynas', 'Asinas', 'Akras', 'Akwas', 'Asimwas', 'Asiḍyas'],
+    ['Asa', 'Ayn', 'Asn', 'Akr', 'Akw', 'Asm', 'Asḍ']
+  ],
+  u,
+  [
+    ['Y', 'Y', 'M', 'I', 'M', 'Y', 'Y', 'Ɣ', 'C', 'K', 'N', 'D'],
+    ['Yen', 'Yeb', 'Mar', 'Ibr', 'May', 'Yun', 'Yul', 'Ɣuc', 'Cut', 'Kṭu', 'Nwa', 'Duj'],
+    [
+      'Yennayer', 'Yebrayer', 'Mars', 'Ibrir', 'Mayyu', 'Yunyu', 'Yulyuz', 'Ɣuct', 'Cutanbir',
+      'Kṭuber', 'Nwanbir', 'Dujanbir'
+    ]
+  ],
+  u, [['ZƐ', 'ḌƐ'], u, ['Zdat Ɛisa (TAƔ)', 'Ḍeffir Ɛisa (TAƔ)']], 6, [5, 6],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'MAD', 'Derhem Umeṛṛuki',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/ug.ts b/packages/common/locales/ug.ts
new file mode 100644
index 000000000000..73569fa21000
--- /dev/null
+++ b/packages/common/locales/ug.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'ug', [['ب', 'ك'], ['چ.ب', 'چ.ك'], ['چۈشتىن بۇرۇن', 'چۈشتىن كېيىن']],
+  [['چ.ب', 'چ.ك'], u, u],
+  [
+    ['ي', 'د', 'س', 'چ', 'پ', 'ج', 'ش'],
+    ['يە', 'دۈ', 'سە', 'چا', 'پە', 'جۈ', 'شە'],
+    [
+      'يەكشەنبە', 'دۈشەنبە', 'سەيشەنبە', 'چارشەنبە',
+      'پەيشەنبە', 'جۈمە', 'شەنبە'
+    ],
+    ['ي', 'د', 'س', 'چ', 'پ', 'ج', 'ش']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'يانۋار', 'فېۋرال', 'مارت', 'ئاپرېل', 'ماي', 'ئىيۇن',
+      'ئىيۇل', 'ئاۋغۇست', 'سېنتەبىر', 'ئۆكتەبىر', 'نويابىر',
+      'دېكابىر'
+    ],
+    u
+  ],
+  u, [['BCE', 'مىلادىيە'], u, ['مىلادىيەدىن بۇرۇن', 'مىلادىيە']], 0,
+  [6, 0], ['y-MM-dd', 'd-MMM، y', 'd-MMMM، y', 'y d-MMMM، EEEE'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}، {0}', u, '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '￥', 'جۇڭگو يۈەنى',
+  {'CNY': ['￥', '¥'], 'JPY': ['JP¥', '¥']}, plural
+];
diff --git a/packages/common/locales/uk.ts b/packages/common/locales/uk.ts
new file mode 100644
index 000000000000..a004ebb6a3d0
--- /dev/null
+++ b/packages/common/locales/uk.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return 1;
+  if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+      !(i % 100 >= 12 && i % 100 <= 14))
+    return 3;
+  if (v === 0 && i % 10 === 0 ||
+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+      v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
+    return 4;
+  return 5;
+}
+
+export default [
+  'uk', [['дп', 'пп'], u, u], u,
+  [
+    ['Н', 'П', 'В', 'С', 'Ч', 'П', 'С'],
+    ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    [
+      'неділя', 'понеділок', 'вівторок', 'середа', 'четвер',
+      'пʼятниця', 'субота'
+    ],
+    ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб']
+  ],
+  u,
+  [
+    ['с', 'л', 'б', 'к', 'т', 'ч', 'л', 'с', 'в', 'ж', 'л', 'г'],
+    [
+      'січ.', 'лют.', 'бер.', 'квіт.', 'трав.', 'черв.', 'лип.',
+      'серп.', 'вер.', 'жовт.', 'лист.', 'груд.'
+    ],
+    [
+      'січня', 'лютого', 'березня', 'квітня', 'травня',
+      'червня', 'липня', 'серпня', 'вересня', 'жовтня',
+      'листопада', 'грудня'
+    ]
+  ],
+  [
+    ['С', 'Л', 'Б', 'К', 'Т', 'Ч', 'Л', 'С', 'В', 'Ж', 'Л', 'Г'],
+    [
+      'січ', 'лют', 'бер', 'кві', 'тра', 'чер', 'лип', 'сер', 'вер',
+      'жов', 'лис', 'гру'
+    ],
+    [
+      'січень', 'лютий', 'березень', 'квітень', 'травень',
+      'червень', 'липень', 'серпень', 'вересень', 'жовтень',
+      'листопад', 'грудень'
+    ]
+  ],
+  [
+    ['до н.е.', 'н.е.'], ['до н. е.', 'н. е.'],
+    ['до нашої ери', 'нашої ери']
+  ],
+  1, [6, 0], ['dd.MM.yy', 'd MMM y \'р\'.', 'd MMMM y \'р\'.', 'EEEE, d MMMM y \'р\'.'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1}, {0}', u, '{1} \'о\' {0}', u],
+  [',', ' ', ';', '%', '+', '-', 'Е', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '₴', 'українська гривня', {
+    'AUD': [u, '$'],
+    'BRL': [u, 'R$'],
+    'CAD': [u, '$'],
+    'CNY': [u, '¥'],
+    'EUR': [u, '€'],
+    'GBP': [u, '£'],
+    'HKD': [u, '$'],
+    'ILS': [u, '₪'],
+    'INR': [u, '₹'],
+    'KRW': [u, '₩'],
+    'MXN': [u, '$'],
+    'NZD': [u, '$'],
+    'TWD': [u, 'NT$'],
+    'UAH': ['₴'],
+    'UAK': ['крб.'],
+    'USD': [u, '$'],
+    'VND': [u, '₫'],
+    'XCD': [u, '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/ur-IN.ts b/packages/common/locales/ur-IN.ts
new file mode 100644
index 000000000000..cfa90834cf5d
--- /dev/null
+++ b/packages/common/locales/ur-IN.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'ur-IN', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['اتوار', 'پیر', 'منگل', 'بدھ', 'جمعرات', 'جمعہ', 'ہفتہ'], u, u
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'جنوری', 'فروری', 'مارچ', 'اپریل', 'مئی', 'جون', 'جولائی',
+      'اگست', 'ستمبر', 'اکتوبر', 'نومبر', 'دسمبر'
+    ],
+    u
+  ],
+  u, [['قبل مسیح', 'عیسوی'], u, u], 0, [0, 0],
+  ['d/M/yy', 'd MMM، y', 'd MMMM، y', 'EEEE، d MMMM، y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '₹', 'بھارتی روپیہ',
+  {'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/ur.ts b/packages/common/locales/ur.ts
new file mode 100644
index 000000000000..41a7258b5d05
--- /dev/null
+++ b/packages/common/locales/ur.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'ur', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['اتوار', 'پیر', 'منگل', 'بدھ', 'جمعرات', 'جمعہ', 'ہفتہ'], u, u
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'جنوری', 'فروری', 'مارچ', 'اپریل', 'مئی', 'جون', 'جولائی',
+      'اگست', 'ستمبر', 'اکتوبر', 'نومبر', 'دسمبر'
+    ],
+    u
+  ],
+  u, [['قبل مسیح', 'عیسوی'], u, u], 0, [6, 0],
+  ['d/M/yy', 'd MMM، y', 'd MMMM، y', 'EEEE، d MMMM، y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '\u200e+', '\u200e-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'Rs', 'پاکستانی روپیہ',
+  {'JPY': ['JP¥', '¥'], 'PKR': ['Rs'], 'THB': ['฿'], 'TWD': ['NT$']}, plural
+];
diff --git a/packages/common/locales/uz-Arab.ts b/packages/common/locales/uz-Arab.ts
new file mode 100644
index 000000000000..75065311e73f
--- /dev/null
+++ b/packages/common/locales/uz-Arab.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'uz-Arab', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['ی.', 'د.', 'س.', 'چ.', 'پ.', 'ج.', 'ش.'],
+    [
+      'یکشنبه', 'دوشنبه', 'سه\u200cشنبه', 'چهارشنبه', 'پنجشنبه',
+      'جمعه', 'شنبه'
+    ],
+    ['ی.', 'د.', 'س.', 'چ.', 'پ.', 'ج.', 'ش.']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'جنو', 'فبر', 'مار', 'اپر', 'می', 'جون', 'جول', 'اگس', 'سپت',
+      'اکت', 'نوم', 'دسم'
+    ],
+    [
+      'جنوری', 'فبروری', 'مارچ', 'اپریل', 'می', 'جون', 'جولای',
+      'اگست', 'سپتمبر', 'اکتوبر', 'نومبر', 'دسمبر'
+    ]
+  ],
+  u, [['BCE', 'CE'], u, u], 6, [4, 5], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '.', ';', '%', '\u200e+', '\u200e−', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], '؋', 'افغانی',
+  {'AFN': ['؋'], 'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/uz-Cyrl.ts b/packages/common/locales/uz-Cyrl.ts
new file mode 100644
index 000000000000..661fc40aa6f2
--- /dev/null
+++ b/packages/common/locales/uz-Cyrl.ts
@@ -0,0 +1,66 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'uz-Cyrl', [['ТО', 'ТК'], u, u], u,
+  [
+    ['Я', 'Д', 'С', 'Ч', 'П', 'Ж', 'Ш'],
+    ['якш', 'душ', 'сеш', 'чор', 'пай', 'жум', 'шан'],
+    [
+      'якшанба', 'душанба', 'сешанба', 'чоршанба', 'пайшанба',
+      'жума', 'шанба'
+    ],
+    ['Як', 'Ду', 'Се', 'Чо', 'Па', 'Жу', 'Ша']
+  ],
+  [
+    ['Я', 'Д', 'С', 'Ч', 'П', 'Ж', 'Ш'],
+    ['Якш', 'Душ', 'Сеш', 'Чор', 'Пай', 'Жум', 'Шан'],
+    [
+      'Якшанба', 'Душанба', 'Сешанба', 'Чоршанба', 'Пайшанба',
+      'Жума', 'Шанба'
+    ],
+    ['Як', 'Ду', 'Се', 'Чо', 'Па', 'Жу', 'Ша']
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен',
+      'окт', 'ноя', 'дек'
+    ],
+    [
+      'январ', 'феврал', 'март', 'апрел', 'май', 'июн', 'июл',
+      'август', 'сентябр', 'октябр', 'ноябр', 'декабр'
+    ]
+  ],
+  [
+    ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'],
+    [
+      'Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен',
+      'Окт', 'Ноя', 'Дек'
+    ],
+    [
+      'Январ', 'Феврал', 'Март', 'Апрел', 'Май', 'Июн', 'Июл',
+      'Август', 'Сентябр', 'Октябр', 'Ноябр', 'Декабр'
+    ]
+  ],
+  [['м.а.', 'милодий'], u, ['милоддан аввалги', 'милодий']], 1,
+  [6, 0], ['dd/MM/yy', 'd MMM, y', 'd MMMM, y', 'EEEE, dd MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss (z)', 'HH:mm:ss (zzzz)'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'ҳақиқий сон эмас', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'сўм', 'Ўзбекистон сўм',
+  {'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'USD': ['US$', '$'], 'UZS': ['сўм']}, plural
+];
diff --git a/packages/common/locales/uz-Latn.ts b/packages/common/locales/uz-Latn.ts
new file mode 100644
index 000000000000..55ad29fab0ca
--- /dev/null
+++ b/packages/common/locales/uz-Latn.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'uz-Latn', [['TO', 'TK'], u, u], u,
+  [
+    ['Y', 'D', 'S', 'C', 'P', 'J', 'S'], ['Yak', 'Dush', 'Sesh', 'Chor', 'Pay', 'Jum', 'Shan'],
+    ['yakshanba', 'dushanba', 'seshanba', 'chorshanba', 'payshanba', 'juma', 'shanba'],
+    ['Ya', 'Du', 'Se', 'Ch', 'Pa', 'Ju', 'Sh']
+  ],
+  u,
+  [
+    ['Y', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avg', 'sen', 'okt', 'noy', 'dek'],
+    [
+      'yanvar', 'fevral', 'mart', 'aprel', 'may', 'iyun', 'iyul', 'avgust', 'sentabr', 'oktabr',
+      'noyabr', 'dekabr'
+    ]
+  ],
+  [
+    ['Y', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    ['Yan', 'Fev', 'Mar', 'Apr', 'May', 'Iyn', 'Iyl', 'Avg', 'Sen', 'Okt', 'Noy', 'Dek'],
+    [
+      'Yanvar', 'Fevral', 'Mart', 'Aprel', 'May', 'Iyun', 'Iyul', 'Avgust', 'Sentabr', 'Oktabr',
+      'Noyabr', 'Dekabr'
+    ]
+  ],
+  [['m.a.', 'milodiy'], u, ['miloddan avvalgi', 'milodiy']], 1, [6, 0],
+  ['dd/MM/yy', 'd-MMM, y', 'd-MMMM, y', 'EEEE, d-MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'H:mm:ss (z)', 'H:mm:ss (zzzz)'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'son emas', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'soʻm', 'O‘zbekiston so‘mi',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'UZS': ['soʻm']}, plural
+];
diff --git a/packages/common/locales/uz.ts b/packages/common/locales/uz.ts
new file mode 100644
index 000000000000..e54292aec01f
--- /dev/null
+++ b/packages/common/locales/uz.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'uz', [['TO', 'TK'], u, u], u,
+  [
+    ['Y', 'D', 'S', 'C', 'P', 'J', 'S'], ['Yak', 'Dush', 'Sesh', 'Chor', 'Pay', 'Jum', 'Shan'],
+    ['yakshanba', 'dushanba', 'seshanba', 'chorshanba', 'payshanba', 'juma', 'shanba'],
+    ['Ya', 'Du', 'Se', 'Ch', 'Pa', 'Ju', 'Sh']
+  ],
+  u,
+  [
+    ['Y', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avg', 'sen', 'okt', 'noy', 'dek'],
+    [
+      'yanvar', 'fevral', 'mart', 'aprel', 'may', 'iyun', 'iyul', 'avgust', 'sentabr', 'oktabr',
+      'noyabr', 'dekabr'
+    ]
+  ],
+  [
+    ['Y', 'F', 'M', 'A', 'M', 'I', 'I', 'A', 'S', 'O', 'N', 'D'],
+    ['Yan', 'Fev', 'Mar', 'Apr', 'May', 'Iyn', 'Iyl', 'Avg', 'Sen', 'Okt', 'Noy', 'Dek'],
+    [
+      'Yanvar', 'Fevral', 'Mart', 'Aprel', 'May', 'Iyun', 'Iyul', 'Avgust', 'Sentabr', 'Oktabr',
+      'Noyabr', 'Dekabr'
+    ]
+  ],
+  [['m.a.', 'milodiy'], u, ['miloddan avvalgi', 'milodiy']], 1, [6, 0],
+  ['dd/MM/yy', 'd-MMM, y', 'd-MMMM, y', 'EEEE, d-MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'H:mm:ss (z)', 'H:mm:ss (zzzz)'], ['{1}, {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'son emas', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'soʻm', 'O‘zbekiston so‘mi',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$'], 'UZS': ['soʻm']}, plural
+];
diff --git a/packages/common/locales/vai-Latn.ts b/packages/common/locales/vai-Latn.ts
new file mode 100644
index 000000000000..c4c2da5a9f5f
--- /dev/null
+++ b/packages/common/locales/vai-Latn.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'vai-Latn', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['lahadi', 'tɛɛnɛɛ', 'talata', 'alaba', 'aimisa', 'aijima', 'siɓiti'], u, u
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'luukao kemã', 'ɓandaɓu', 'vɔɔ', 'fulu', 'goo', '6', '7', 'kɔnde', 'saah', 'galo',
+      'kenpkato ɓololɔ', 'luukao lɔma'
+    ],
+    u
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'Laibhiya Dala',
+  {'JPY': ['JP¥', '¥'], 'LRD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/vai-Vaii.ts b/packages/common/locales/vai-Vaii.ts
new file mode 100644
index 000000000000..80dd2a05c9b9
--- /dev/null
+++ b/packages/common/locales/vai-Vaii.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'vai-Vaii', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    [
+      'ꕞꕌꔵ', 'ꗳꗡꘉ', 'ꕚꕞꕚ', 'ꕉꕞꕒ', 'ꕉꔤꕆꕢ', 'ꕉꔤꕀꕮ',
+      'ꔻꔬꔳ'
+    ],
+    u, u
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ꖨꖕꔞ', 'ꕒꕡ', 'ꕾꖺ', 'ꖢꖕ', 'ꖑꕱ', 'ꖱꘋ', 'ꖱꕞ', 'ꗛꔕ', 'ꕢꕌ',
+      'ꕭꖃ', 'ꔞꘋ', 'ꖨꖕꗏ'
+    ],
+    [
+      'ꖨꖕ ꕪꕴ ꔞꔀꕮꕊ', 'ꕒꕡꖝꖕ', 'ꕾꖺ', 'ꖢꖕ', 'ꖑꕱ', 'ꖱꘋ',
+      'ꖱꕞꔤ', 'ꗛꔕ', 'ꕢꕌ', 'ꕭꖃ', 'ꔞꘋꕔꕿ ꕸꖃꗏ',
+      'ꖨꖕ ꕪꕴ ꗏꖺꕮꕊ'
+    ]
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'ꕞꔤꔫꕩ ꕜꕞꕌ',
+  {'JPY': ['JP¥', '¥'], 'LRD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/vai.ts b/packages/common/locales/vai.ts
new file mode 100644
index 000000000000..3f3855565ad4
--- /dev/null
+++ b/packages/common/locales/vai.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'vai', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    [
+      'ꕞꕌꔵ', 'ꗳꗡꘉ', 'ꕚꕞꕚ', 'ꕉꕞꕒ', 'ꕉꔤꕆꕢ', 'ꕉꔤꕀꕮ',
+      'ꔻꔬꔳ'
+    ],
+    u, u
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'ꖨꖕꔞ', 'ꕒꕡ', 'ꕾꖺ', 'ꖢꖕ', 'ꖑꕱ', 'ꖱꘋ', 'ꖱꕞ', 'ꗛꔕ', 'ꕢꕌ',
+      'ꕭꖃ', 'ꔞꘋ', 'ꖨꖕꗏ'
+    ],
+    [
+      'ꖨꖕ ꕪꕴ ꔞꔀꕮꕊ', 'ꕒꕡꖝꖕ', 'ꕾꖺ', 'ꖢꖕ', 'ꖑꕱ', 'ꖱꘋ',
+      'ꖱꕞꔤ', 'ꗛꔕ', 'ꕢꕌ', 'ꕭꖃ', 'ꔞꘋꕔꕿ ꕸꖃꗏ',
+      'ꖨꖕ ꕪꕴ ꗏꖺꕮꕊ'
+    ]
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'ꕞꔤꔫꕩ ꕜꕞꕌ',
+  {'JPY': ['JP¥', '¥'], 'LRD': ['$'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/vi.ts b/packages/common/locales/vi.ts
new file mode 100644
index 000000000000..ec972afe9a7f
--- /dev/null
+++ b/packages/common/locales/vi.ts
@@ -0,0 +1,59 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'vi', [['s', 'c'], ['SA', 'CH'], u], [['SA', 'CH'], u, u],
+  [
+    ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
+    ['CN', 'Th 2', 'Th 3', 'Th 4', 'Th 5', 'Th 6', 'Th 7'],
+    [
+      'Chủ Nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu',
+      'Thứ Bảy'
+    ],
+    ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'thg 1', 'thg 2', 'thg 3', 'thg 4', 'thg 5', 'thg 6', 'thg 7', 'thg 8', 'thg 9', 'thg 10',
+      'thg 11', 'thg 12'
+    ],
+    [
+      'tháng 1', 'tháng 2', 'tháng 3', 'tháng 4', 'tháng 5', 'tháng 6', 'tháng 7',
+      'tháng 8', 'tháng 9', 'tháng 10', 'tháng 11', 'tháng 12'
+    ]
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'Thg 1', 'Thg 2', 'Thg 3', 'Thg 4', 'Thg 5', 'Thg 6', 'Thg 7', 'Thg 8', 'Thg 9', 'Thg 10',
+      'Thg 11', 'Thg 12'
+    ],
+    [
+      'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7',
+      'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'
+    ]
+  ],
+  [['tr. CN', 'sau CN'], ['Trước CN', 'sau CN'], u], 1, [6, 0],
+  ['dd/MM/y', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{0}, {1}', u, '{0} {1}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], '₫', 'Đồng Việt Nam',
+  {'AUD': ['AU$', '$'], 'JPY': ['JP¥', '¥'], 'THB': ['฿'], 'TWD': ['NT$'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/vo.ts b/packages/common/locales/vo.ts
new file mode 100644
index 000000000000..d75877b225dd
--- /dev/null
+++ b/packages/common/locales/vo.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'vo', [['AM', 'PM'], u, u], u,
+  [['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], u, u], u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['M01', 'M02', 'M03', 'M04', 'M05', 'M06', 'M07', 'M08', 'M09', 'M10', 'M11', 'M12'], u
+  ],
+  u, [['BCE', 'CE'], u, u], 1, [6, 0], ['y-MM-dd', 'y MMM d', 'y MMMM d', 'y MMMM d, EEEE'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], u, u,
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/vun.ts b/packages/common/locales/vun.ts
new file mode 100644
index 000000000000..0d27abb4bde7
--- /dev/null
+++ b/packages/common/locales/vun.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'vun', [['utuko', 'kyiukonyi'], u, u], u,
+  [
+    ['J', 'J', 'J', 'J', 'A', 'I', 'J'], ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo'],
+    ['Jumapilyi', 'Jumatatuu', 'Jumanne', 'Jumatanu', 'Alhamisi', 'Ijumaa', 'Jumamosi'],
+    ['Jpi', 'Jtt', 'Jnn', 'Jtn', 'Alh', 'Iju', 'Jmo']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'],
+    [
+      'Januari', 'Februari', 'Machi', 'Aprilyi', 'Mei', 'Junyi', 'Julyai', 'Agusti', 'Septemba',
+      'Oktoba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['KK', 'BK'], u, ['Kabla ya Kristu', 'Baada ya Kristu']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'TSh', 'Shilingi ya Tanzania',
+  {'JPY': ['JP¥', '¥'], 'TZS': ['TSh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/wae.ts b/packages/common/locales/wae.ts
new file mode 100644
index 000000000000..b7d8232f4df1
--- /dev/null
+++ b/packages/common/locales/wae.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'wae', [['AM', 'PM'], u, u], u,
+  [
+    ['S', 'M', 'Z', 'M', 'F', 'F', 'S'], ['Sun', 'Män', 'Ziš', 'Mit', 'Fró', 'Fri', 'Sam'],
+    ['Sunntag', 'Mäntag', 'Zištag', 'Mittwuč', 'Fróntag', 'Fritag', 'Samštag'],
+    ['Sun', 'Män', 'Ziš', 'Mit', 'Fró', 'Fri', 'Sam']
+  ],
+  u,
+  [
+    ['J', 'H', 'M', 'A', 'M', 'B', 'H', 'Ö', 'H', 'W', 'W', 'C'],
+    ['Jen', 'Hor', 'Mär', 'Abr', 'Mei', 'Brá', 'Hei', 'Öig', 'Her', 'Wím', 'Win', 'Chr'],
+    [
+      'Jenner', 'Hornig', 'Märze', 'Abrille', 'Meije', 'Bráčet', 'Heiwet', 'Öigšte',
+      'Herbštmánet', 'Wímánet', 'Wintermánet', 'Chrištmánet'
+    ]
+  ],
+  u, [['v. Chr.', 'n. Chr'], u, u], 1, [6, 0],
+  ['y-MM-dd', 'd. MMM y', 'd. MMMM y', 'EEEE, d. MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', '’', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'CHF', 'CHF', {}, plural
+];
diff --git a/packages/common/locales/wo.ts b/packages/common/locales/wo.ts
new file mode 100644
index 000000000000..3dd728a8b903
--- /dev/null
+++ b/packages/common/locales/wo.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'wo', [['Sub', 'Ngo'], u, u], u,
+  [
+    ['Dib', 'Alt', 'Tal', 'Àla', 'Alx', 'Àjj', 'Ase'], u,
+    ['Dibéer', 'Altine', 'Talaata', 'Àlarba', 'Alxamis', 'Àjjuma', 'Aseer'],
+    ['Dib', 'Alt', 'Tal', 'Àla', 'Alx', 'Àjj', 'Ase']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['Sam', 'Few', 'Mar', 'Awr', 'Mee', 'Suw', 'Sul', 'Ut', 'Sàt', 'Okt', 'Now', 'Des'],
+    [
+      'Samwiyee', 'Fewriyee', 'Mars', 'Awril', 'Mee', 'Suwe', 'Sulet', 'Ut', 'Sàttumbar',
+      'Oktoobar', 'Nowàmbar', 'Desàmbar'
+    ]
+  ],
+  u, [['JC', 'AD'], u, ['av. JC', 'AD']], 1, [6, 0],
+  ['dd-MM-y', 'd MMM, y', 'd MMMM, y', 'EEEE, d MMM, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} - {0}', u, '{1} \'ci\' {0}', u],
+  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], 'CFA', 'Franc CFA bu Afrik Sowwu-jant',
+  {'JPY': ['JP¥', '¥']}, plural
+];
diff --git a/packages/common/locales/xog.ts b/packages/common/locales/xog.ts
new file mode 100644
index 000000000000..7de014eb1ac1
--- /dev/null
+++ b/packages/common/locales/xog.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  if (n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'xog', [['Munkyo', 'Eigulo'], u, u], u,
+  [
+    ['S', 'B', 'B', 'S', 'K', 'K', 'M'], ['Sabi', 'Bala', 'Kubi', 'Kusa', 'Kuna', 'Kuta', 'Muka'],
+    ['Sabiiti', 'Balaza', 'Owokubili', 'Owokusatu', 'Olokuna', 'Olokutaanu', 'Olomukaaga'],
+    ['Sabi', 'Bala', 'Kubi', 'Kusa', 'Kuna', 'Kuta', 'Muka']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apu', 'Maa', 'Juu', 'Jul', 'Agu', 'Seb', 'Oki', 'Nov', 'Des'],
+    [
+      'Janwaliyo', 'Febwaliyo', 'Marisi', 'Apuli', 'Maayi', 'Juuni', 'Julaayi', 'Agusito',
+      'Sebuttemba', 'Okitobba', 'Novemba', 'Desemba'
+    ]
+  ],
+  u, [['AZ', 'AF'], u, ['Kulisto nga azilawo', 'Kulisto nga affile']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'USh', 'Silingi eya Yuganda',
+  {'JPY': ['JP¥', '¥'], 'UGX': ['USh'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/yav.ts b/packages/common/locales/yav.ts
new file mode 100644
index 000000000000..be3e654693f0
--- /dev/null
+++ b/packages/common/locales/yav.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'yav', [['kiɛmɛ́ɛm', 'kisɛ́ndɛ'], u, u], u,
+  [
+    ['s', 'm', 'm', 'e', 'k', 'f', 's'], ['sd', 'md', 'mw', 'et', 'kl', 'fl', 'ss'],
+    [
+      'sɔ́ndiɛ', 'móndie', 'muányáŋmóndie', 'metúkpíápɛ', 'kúpélimetúkpiapɛ',
+      'feléte', 'séselé'
+    ],
+    ['sd', 'md', 'mw', 'et', 'kl', 'fl', 'ss']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    ['o.1', 'o.2', 'o.3', 'o.4', 'o.5', 'o.6', 'o.7', 'o.8', 'o.9', 'o.10', 'o.11', 'o.12'],
+    [
+      'pikítíkítie, oólí ú kutúan', 'siɛyɛ́, oóli ú kándíɛ',
+      'ɔnsúmbɔl, oóli ú kátátúɛ', 'mesiŋ, oóli ú kénie', 'ensil, oóli ú kátánuɛ',
+      'ɔsɔn', 'efute', 'pisuyú', 'imɛŋ i puɔs', 'imɛŋ i putúk,oóli ú kátíɛ',
+      'makandikɛ', 'pilɔndɔ́'
+    ]
+  ],
+  u, [['k.Y.', '+J.C.'], u, ['katikupíen Yésuse', 'ékélémkúnupíén n']], 1, [6, 0],
+  ['d/M/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'], 'FCFA', 'XAF',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/yi.ts b/packages/common/locales/yi.ts
new file mode 100644
index 000000000000..1c501fce51a1
--- /dev/null
+++ b/packages/common/locales/yi.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'yi', [['פֿאַרמיטאָג', 'נאָכמיטאָג'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    [
+      'זונטיק', 'מאָנטיק', 'דינסטיק', 'מיטוואך', 'דאנערשטיק',
+      'פֿרײַטיק', 'שבת'
+    ],
+    u, u
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'יאַנואַר', 'פֿעברואַר', 'מערץ', 'אַפּריל', 'מיי', 'יוני',
+      'יולי', 'אויגוסט', 'סעפּטעמבער', 'אקטאבער', 'נאוועמבער',
+      'דעצעמבער'
+    ],
+    u
+  ],
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'יאַנ', 'פֿעב', 'מערץ', 'אַפּר', 'מיי', 'יוני', 'יולי',
+      'אויג', 'סעפּ', 'אקט', 'נאוו', 'דעצ'
+    ],
+    [
+      'יאַנואַר', 'פֿעברואַר', 'מערץ', 'אַפּריל', 'מיי', 'יוני',
+      'יולי', 'אויגוסט', 'סעפּטעמבער', 'אקטאבער', 'נאוועמבער',
+      'דעצעמבער'
+    ]
+  ],
+  [['BCE', 'CE'], u, u], 1, [6, 0],
+  ['dd/MM/yy', 'dטן MMM y', 'dטן MMMM y', 'EEEE, dטן MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', '{1}, {0}', '{1} {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤ #,##0.00', '#E0'], u, u,
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/yo-BJ.ts b/packages/common/locales/yo-BJ.ts
new file mode 100644
index 000000000000..b34d01c14a08
--- /dev/null
+++ b/packages/common/locales/yo-BJ.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'yo-BJ', [['Àárɔ̀', 'Ɔ̀sán'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['Àìkú', 'Ajé', 'Ìsɛ́gun', 'Ɔjɔ́rú', 'Ɔjɔ́bɔ', 'Ɛtì', 'Àbámɛ́ta'],
+    [
+      'Ɔjɔ́ Àìkú', 'Ɔjɔ́ Ajé', 'Ɔjɔ́ Ìsɛ́gun', 'Ɔjɔ́rú', 'Ɔjɔ́bɔ',
+      'Ɔjɔ́ Ɛtì', 'Ɔjɔ́ Àbámɛ́ta'
+    ],
+    ['Àìkú', 'Ajé', 'Ìsɛ́gun', 'Ɔjɔ́rú', 'Ɔjɔ́bɔ', 'Ɛtì', 'Àbámɛ́ta']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'Shɛ́rɛ́', 'Èrèlè', 'Ɛrɛ̀nà', 'Ìgbé', 'Ɛ̀bibi', 'Òkúdu', 'Agɛmɔ', 'Ògún',
+      'Owewe', 'Ɔ̀wàrà', 'Bélú', 'Ɔ̀pɛ̀'
+    ],
+    [
+      'Oshù Shɛ́rɛ́', 'Oshù Èrèlè', 'Oshù Ɛrɛ̀nà', 'Oshù Ìgbé', 'Oshù Ɛ̀bibi',
+      'Oshù Òkúdu', 'Oshù Agɛmɔ', 'Oshù Ògún', 'Oshù Owewe', 'Oshù Ɔ̀wàrà',
+      'Oshù Bélú', 'Oshù Ɔ̀pɛ̀'
+    ]
+  ],
+  u, [['BCE', 'LK'], u, ['Saju Kristi', 'Lehin Kristi']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'CFA', 'Faransi ti Orílɛ́ède BIKEAO',
+  {'JPY': ['JP¥', '¥'], 'NGN': ['₦'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/yo.ts b/packages/common/locales/yo.ts
new file mode 100644
index 000000000000..48c5ce83e4e2
--- /dev/null
+++ b/packages/common/locales/yo.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'yo', [['Àárọ̀', 'Ọ̀sán'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    ['Àìkú', 'Ajé', 'Ìsẹ́gun', 'Ọjọ́rú', 'Ọjọ́bọ', 'Ẹtì', 'Àbámẹ́ta'],
+    [
+      'Ọjọ́ Àìkú', 'Ọjọ́ Ajé', 'Ọjọ́ Ìsẹ́gun', 'Ọjọ́rú',
+      'Ọjọ́bọ', 'Ọjọ́ Ẹtì', 'Ọjọ́ Àbámẹ́ta'
+    ],
+    ['Àìkú', 'Ajé', 'Ìsẹ́gun', 'Ọjọ́rú', 'Ọjọ́bọ', 'Ẹtì', 'Àbámẹ́ta']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      'Ṣẹ́rẹ́', 'Èrèlè', 'Ẹrẹ̀nà', 'Ìgbé', 'Ẹ̀bibi', 'Òkúdu', 'Agẹmọ',
+      'Ògún', 'Owewe', 'Ọ̀wàrà', 'Bélú', 'Ọ̀pẹ̀'
+    ],
+    [
+      'Oṣù Ṣẹ́rẹ́', 'Oṣù Èrèlè', 'Oṣù Ẹrẹ̀nà', 'Oṣù Ìgbé',
+      'Oṣù Ẹ̀bibi', 'Oṣù Òkúdu', 'Oṣù Agẹmọ', 'Oṣù Ògún', 'Oṣù Owewe',
+      'Oṣù Ọ̀wàrà', 'Oṣù Bélú', 'Oṣù Ọ̀pẹ̀'
+    ]
+  ],
+  u, [['BCE', 'LK'], u, ['Saju Kristi', 'Lehin Kristi']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE, d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '₦', 'Naira ti Orílẹ́ède Nàìjíríà',
+  {'JPY': ['JP¥', '¥'], 'NGN': ['₦'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/yue-Hans.ts b/packages/common/locales/yue-Hans.ts
new file mode 100644
index 000000000000..548a8d78c1a7
--- /dev/null
+++ b/packages/common/locales/yue-Hans.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'yue-Hans', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    [
+      '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
+      '十月', '十一月', '十二月'
+    ]
+  ],
+  u, [['西元前', '西元'], u, u], 0, [6, 0], ['y/M/d', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'z ah:mm:ss', 'zzzz ah:mm:ss'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', '非数值', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '￥', '人民币', {
+    'AUD': ['AU$', '$'],
+    'CNY': ['￥', '¥'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': ['￦', '₩'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/yue-Hant.ts b/packages/common/locales/yue-Hant.ts
new file mode 100644
index 000000000000..703c89caefda
--- /dev/null
+++ b/packages/common/locales/yue-Hant.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'yue-Hant', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], u,
+    ['日', '一', '二', '三', '四', '五', '六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    u
+  ],
+  u, [['西元前', '西元'], u, u], 0, [6, 0], ['y/M/d', 'y年M月d日', u, 'y年M月d日 EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'ah:mm:ss [z]', 'ah:mm:ss [zzzz]'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', '非數值', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'HK$', '港幣',
+  {'AUD': ['AU$', '$'], 'KRW': ['￦', '₩'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/yue.ts b/packages/common/locales/yue.ts
new file mode 100644
index 000000000000..147f1e3c3b5a
--- /dev/null
+++ b/packages/common/locales/yue.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'yue', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], u,
+    ['日', '一', '二', '三', '四', '五', '六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    u
+  ],
+  u, [['西元前', '西元'], u, u], 0, [6, 0], ['y/M/d', 'y年M月d日', u, 'y年M月d日 EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'ah:mm:ss [z]', 'ah:mm:ss [zzzz]'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', '非數值', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'HK$', '港幣',
+  {'AUD': ['AU$', '$'], 'KRW': ['￦', '₩'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/zgh.ts b/packages/common/locales/zgh.ts
new file mode 100644
index 000000000000..0c668fe5f9e2
--- /dev/null
+++ b/packages/common/locales/zgh.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'zgh', [['ⵜⵉⴼⴰⵡⵜ', 'ⵜⴰⴷⴳⴳⵯⴰⵜ'], u, u], u,
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    [
+      'ⴰⵙⴰ', 'ⴰⵢⵏ', 'ⴰⵙⵉ', 'ⴰⴽⵕ', 'ⴰⴽⵡ', 'ⴰⵙⵉⵎ',
+      'ⴰⵙⵉⴹ'
+    ],
+    [
+      'ⴰⵙⴰⵎⴰⵙ', 'ⴰⵢⵏⴰⵙ', 'ⴰⵙⵉⵏⴰⵙ', 'ⴰⴽⵕⴰⵙ',
+      'ⴰⴽⵡⴰⵙ', 'ⴰⵙⵉⵎⵡⴰⵙ', 'ⴰⵙⵉⴹⵢⴰⵙ'
+    ],
+    [
+      'ⴰⵙⴰ', 'ⴰⵢⵏ', 'ⴰⵙⵉ', 'ⴰⴽⵕ', 'ⴰⴽⵡ', 'ⴰⵙⵉⵎ',
+      'ⴰⵙⵉⴹ'
+    ]
+  ],
+  u,
+  [
+    ['ⵉ', 'ⴱ', 'ⵎ', 'ⵉ', 'ⵎ', 'ⵢ', 'ⵢ', 'ⵖ', 'ⵛ', 'ⴽ', 'ⵏ', 'ⴷ'],
+    [
+      'ⵉⵏⵏ', 'ⴱⵕⴰ', 'ⵎⴰⵕ', 'ⵉⴱⵔ', 'ⵎⴰⵢ', 'ⵢⵓⵏ', 'ⵢⵓⵍ',
+      'ⵖⵓⵛ', 'ⵛⵓⵜ', 'ⴽⵜⵓ', 'ⵏⵓⵡ', 'ⴷⵓⵊ'
+    ],
+    [
+      'ⵉⵏⵏⴰⵢⵔ', 'ⴱⵕⴰⵢⵕ', 'ⵎⴰⵕⵚ', 'ⵉⴱⵔⵉⵔ', 'ⵎⴰⵢⵢⵓ',
+      'ⵢⵓⵏⵢⵓ', 'ⵢⵓⵍⵢⵓⵣ', 'ⵖⵓⵛⵜ', 'ⵛⵓⵜⴰⵏⴱⵉⵔ',
+      'ⴽⵜⵓⴱⵔ', 'ⵏⵓⵡⴰⵏⴱⵉⵔ', 'ⴷⵓⵊⴰⵏⴱⵉⵔ'
+    ]
+  ],
+  u,
+  [
+    ['ⴷⴰⵄ', 'ⴷⴼⵄ'], u,
+    ['ⴷⴰⵜ ⵏ ⵄⵉⵙⴰ', 'ⴷⴼⴼⵉⵔ ⵏ ⵄⵉⵙⴰ']
+  ],
+  6, [5, 6], ['d/M/y', 'd MMM, y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00¤', '#E0'], 'MAD', 'ⴰⴷⵔⵉⵎ ⵏ ⵍⵎⵖⵔⵉⴱ',
+  {'JPY': ['JP¥', '¥'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/zh-Hans-HK.ts b/packages/common/locales/zh-Hans-HK.ts
new file mode 100644
index 000000000000..957ecbfcda05
--- /dev/null
+++ b/packages/common/locales/zh-Hans-HK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'zh-Hans-HK', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    [
+      '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
+      '十月', '十一月', '十二月'
+    ]
+  ],
+  u, [['公元前', '公元'], u, u], 0, [6, 0], ['d/M/yy', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'z ah:mm:ss', 'zzzz ah:mm:ss'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'HK$', '港元', {
+    'AUD': ['AU$', '$'],
+    'ILR': ['ILS'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': ['￦', '₩'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/zh-Hans-MO.ts b/packages/common/locales/zh-Hans-MO.ts
new file mode 100644
index 000000000000..59f08e4bdd67
--- /dev/null
+++ b/packages/common/locales/zh-Hans-MO.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'zh-Hans-MO', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    [
+      '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
+      '十月', '十一月', '十二月'
+    ]
+  ],
+  u, [['公元前', '公元'], u, u], 0, [6, 0], ['d/M/yy', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'z ah:mm:ss', 'zzzz ah:mm:ss'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'MOP$', '澳门币', {
+    'AUD': ['AU$', '$'],
+    'ILR': ['ILS'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': ['￦', '₩'],
+    'MOP': ['MOP$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/zh-Hans-SG.ts b/packages/common/locales/zh-Hans-SG.ts
new file mode 100644
index 000000000000..0badb5640449
--- /dev/null
+++ b/packages/common/locales/zh-Hans-SG.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'zh-Hans-SG', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    [
+      '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
+      '十月', '十一月', '十二月'
+    ]
+  ],
+  u, [['公元前', '公元'], u, u], 0, [6, 0],
+  ['dd/MM/yy', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'z ah:mm:ss', 'zzzz ah:mm:ss'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', '新加坡元', {
+    'AUD': ['AU$', '$'],
+    'ILR': ['ILS'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': ['￦', '₩'],
+    'SGD': ['$'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/zh-Hans.ts b/packages/common/locales/zh-Hans.ts
new file mode 100644
index 000000000000..c0a475a1115d
--- /dev/null
+++ b/packages/common/locales/zh-Hans.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'zh-Hans', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    [
+      '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
+      '十月', '十一月', '十二月'
+    ]
+  ],
+  u, [['公元前', '公元'], u, u], 0, [6, 0], ['y/M/d', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'z ah:mm:ss', 'zzzz ah:mm:ss'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '￥', '人民币', {
+    'AUD': ['AU$', '$'],
+    'CNY': ['￥', '¥'],
+    'ILR': ['ILS'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': ['￦', '₩'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/zh-Hant-HK.ts b/packages/common/locales/zh-Hant-HK.ts
new file mode 100644
index 000000000000..0db54ca666df
--- /dev/null
+++ b/packages/common/locales/zh-Hant-HK.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'zh-Hant-HK', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['日', '一', '二', '三', '四', '五', '六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    u
+  ],
+  u, [['西元前', '西元'], ['公元前', '公元'], u], 0, [6, 0],
+  ['d/M/y', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'ah:mm:ss [z]', 'ah:mm:ss [zzzz]'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', '非數值', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'HK$', '港元',
+  {'AUD': ['AU$', '$'], 'RON': [u, 'L'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/zh-Hant-MO.ts b/packages/common/locales/zh-Hant-MO.ts
new file mode 100644
index 000000000000..71b159e5983d
--- /dev/null
+++ b/packages/common/locales/zh-Hant-MO.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'zh-Hant-MO', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['日', '一', '二', '三', '四', '五', '六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    u
+  ],
+  u, [['西元前', '西元'], ['公元前', '公元'], u], 0, [6, 0],
+  ['d/M/y', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'ah:mm:ss [z]', 'ah:mm:ss [zzzz]'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', '非數值', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'MOP$', '澳門元',
+  {'AUD': ['AU$', '$'], 'MOP': ['MOP$'], 'RON': [u, 'L'], 'USD': ['US$', '$']}, plural
+];
diff --git a/packages/common/locales/zh-Hant.ts b/packages/common/locales/zh-Hant.ts
new file mode 100644
index 000000000000..5edd09076c36
--- /dev/null
+++ b/packages/common/locales/zh-Hant.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'zh-Hant', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['日', '一', '二', '三', '四', '五', '六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    u
+  ],
+  u, [['西元前', '西元'], u, u], 0, [6, 0], ['y/M/d', 'y年M月d日', u, 'y年M月d日 EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'ah:mm:ss [z]', 'ah:mm:ss [zzzz]'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', '非數值', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', '新台幣',
+  {'AUD': ['AU$', '$'], 'KRW': ['￦', '₩'], 'RON': [u, 'L'], 'TWD': ['$'], 'USD': ['US$', '$']},
+  plural
+];
diff --git a/packages/common/locales/zh.ts b/packages/common/locales/zh.ts
new file mode 100644
index 000000000000..71e4e57e9ce7
--- /dev/null
+++ b/packages/common/locales/zh.ts
@@ -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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  return 5;
+}
+
+export default [
+  'zh', [['上午', '下午'], u, u], u,
+  [
+    ['日', '一', '二', '三', '四', '五', '六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  ],
+  u,
+  [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    [
+      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
+      '12月'
+    ],
+    [
+      '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
+      '十月', '十一月', '十二月'
+    ]
+  ],
+  u, [['公元前', '公元'], u, u], 0, [6, 0], ['y/M/d', 'y年M月d日', u, 'y年M月d日EEEE'],
+  ['ah:mm', 'ah:mm:ss', 'z ah:mm:ss', 'zzzz ah:mm:ss'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '￥', '人民币', {
+    'AUD': ['AU$', '$'],
+    'CNY': ['￥', '¥'],
+    'ILR': ['ILS'],
+    'JPY': ['JP¥', '¥'],
+    'KRW': ['￦', '₩'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$']
+  },
+  plural
+];
diff --git a/packages/common/locales/zu.ts b/packages/common/locales/zu.ts
new file mode 100644
index 000000000000..b97dfd7c3f4f
--- /dev/null
+++ b/packages/common/locales/zu.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n));
+  if (i === 0 || n === 1) return 1;
+  return 5;
+}
+
+export default [
+  'zu', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'B', 'T', 'S', 'H', 'M'], ['Son', 'Mso', 'Bil', 'Tha', 'Sin', 'Hla', 'Mgq'],
+    ['ISonto', 'UMsombuluko', 'ULwesibili', 'ULwesithathu', 'ULwesine', 'ULwesihlanu', 'UMgqibelo'],
+    ['Son', 'Mso', 'Bil', 'Tha', 'Sin', 'Hla', 'Mgq']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'E', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mas', 'Eph', 'Mey', 'Jun', 'Jul', 'Aga', 'Sep', 'Okt', 'Nov', 'Dis'],
+    [
+      'Januwari', 'Februwari', 'Mashi', 'Ephreli', 'Meyi', 'Juni', 'Julayi', 'Agasti', 'Septhemba',
+      'Okthoba', 'Novemba', 'Disemba'
+    ]
+  ],
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mas', 'Eph', 'Mey', 'Jun', 'Jul', 'Aga', 'Sep', 'Okt', 'Nov', 'Dis'],
+    [
+      'Januwari', 'Februwari', 'Mashi', 'Ephreli', 'Meyi', 'Juni', 'Julayi', 'Agasti', 'Septhemba',
+      'Okthoba', 'Novemba', 'Disemba'
+    ]
+  ],
+  [['BC', 'AD'], u, u], 0, [6, 0], ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], ['{1} {0}', u, u, u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], 'R', 'i-South African Rand', {
+    'BYN': [u, 'P.'],
+    'DKK': [u, 'Kr'],
+    'HRK': [u, 'Kn'],
+    'ISK': [u, 'Kr'],
+    'JPY': ['JP¥', '¥'],
+    'NOK': [u, 'Kr'],
+    'PLN': [u, 'Zł'],
+    'SEK': [u, 'Kr'],
+    'THB': ['฿'],
+    'TWD': ['NT$'],
+    'USD': ['US$', '$'],
+    'ZAR': ['R']
+  },
+  plural
+];
diff --git a/packages/common/package.json b/packages/common/package.json
new file mode 100644
index 000000000000..865fb8faee18
--- /dev/null
+++ b/packages/common/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@angular/common",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - commonly needed directives and services",
+  "main": "./bundles/common.umd.js",
+  "module": "./fesm5/common.js",
+  "es2015": "./fesm2015/common.js",
+  "esm5": "./esm5/common.js",
+  "esm2015": "./esm2015/common.js",
+  "fesm5": "./fesm5/common.js",
+  "fesm2015": "./fesm2015/common.js",
+  "typings": "./common.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "locales": "locales",
+  "peerDependencies": {
+    "rxjs": "^6.0.0",
+    "@angular/core": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/common/public_api.ts b/packages/common/public_api.ts
new file mode 100644
index 000000000000..308ff0cf653b
--- /dev/null
+++ b/packages/common/public_api.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 this package.
+ */
+export * from './src/common';
+export {registerLocaleData as ɵregisterLocaleData} from './src/i18n/locale_data';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/common/rollup.config.js b/packages/common/rollup.config.js
new file mode 100644
index 000000000000..ff83e4dbdf02
--- /dev/null
+++ b/packages/common/rollup.config.js
@@ -0,0 +1,27 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  'rxjs': 'rxjs',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/common/fesm5/common.js',
+  dest: '../../dist/packages-dist/common/bundles/common.umd.js',
+  format: 'umd',
+  exports: 'named',
+  moduleName: 'ng.common',
+  amd: {id: '@angular/common'},
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/common/src/common.ts b/packages/common/src/common.ts
new file mode 100644
index 000000000000..1bfa538ce0b2
--- /dev/null
+++ b/packages/common/src/common.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 common package.
+ */
+export * from './location/index';
+export {formatDate} from './i18n/format_date';
+export {formatCurrency, formatNumber, formatPercent} from './i18n/format_number';
+export {NgLocaleLocalization, NgLocalization} from './i18n/localization';
+export {registerLocaleData} from './i18n/locale_data';
+export {Plural, NumberFormatStyle, FormStyle, Time, TranslationWidth, FormatWidth, NumberSymbol, WeekDay, getNumberOfCurrencyDigits, getCurrencySymbol, getLocaleDayPeriods, getLocaleDayNames, getLocaleMonthNames, getLocaleId, getLocaleEraNames, getLocaleWeekEndRange, getLocaleFirstDayOfWeek, getLocaleDateFormat, getLocaleDateTimeFormat, getLocaleExtraDayPeriodRules, getLocaleExtraDayPeriods, getLocalePluralCase, getLocaleTimeFormat, getLocaleNumberSymbol, getLocaleNumberFormat, getLocaleCurrencyName, getLocaleCurrencySymbol} from './i18n/locale_data_api';
+export {parseCookieValue as ɵparseCookieValue} from './cookie';
+export {CommonModule, DeprecatedI18NPipesModule} from './common_module';
+export {NgClass, 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, KeyValuePipe, KeyValue} from './pipes/index';
+export {DeprecatedDatePipe, DeprecatedCurrencyPipe, DeprecatedDecimalPipe, DeprecatedPercentPipe} from './pipes/deprecated/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';
+export {ViewportScroller, NullViewportScroller as ɵNullViewportScroller} from './viewport_scroller';
diff --git a/packages/common/src/common_module.ts b/packages/common/src/common_module.ts
new file mode 100644
index 000000000000..07c155783640
--- /dev/null
+++ b/packages/common/src/common_module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {COMMON_DIRECTIVES} from './directives/index';
+import {DEPRECATED_PLURAL_FN, NgLocaleLocalization, NgLocalization, getPluralCase} from './i18n/localization';
+import {COMMON_DEPRECATED_I18N_PIPES} from './pipes/deprecated/index';
+import {COMMON_PIPES} from './pipes/index';
+
+
+// Note: This does not contain the location providers,
+// as they need some platform specific implementations to work.
+/**
+ * The module that includes all the basic Angular directives like {@link NgIf}, {@link NgForOf}, ...
+ *
+ *
+ */
+@NgModule({
+  declarations: [COMMON_DIRECTIVES, COMMON_PIPES],
+  exports: [COMMON_DIRECTIVES, COMMON_PIPES],
+  providers: [
+    {provide: NgLocalization, useClass: NgLocaleLocalization},
+  ],
+})
+export class CommonModule {
+}
+
+/**
+ * A module that contains the deprecated i18n pipes.
+ *
+ * @deprecated from v5
+ */
+@NgModule({
+  declarations: [COMMON_DEPRECATED_I18N_PIPES],
+  exports: [COMMON_DEPRECATED_I18N_PIPES],
+  providers: [{provide: DEPRECATED_PLURAL_FN, useValue: getPluralCase}],
+})
+export class DeprecatedI18NPipesModule {
+}
diff --git a/packages/common/src/cookie.ts b/packages/common/src/cookie.ts
new file mode 100644
index 000000000000..1e577cfe2bba
--- /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/index.ts b/packages/common/src/directives/index.ts
new file mode 100644
index 000000000000..c2dcabe37d26
--- /dev/null
+++ b/packages/common/src/directives/index.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 {Provider} from '@angular/core';
+
+import {NgClass} from './ng_class';
+import {NgComponentOutlet} from './ng_component_outlet';
+import {NgForOf, NgForOfContext} from './ng_for_of';
+import {NgIf, NgIfContext} from './ng_if';
+import {NgPlural, NgPluralCase} from './ng_plural';
+import {NgStyle} from './ng_style';
+import {NgSwitch, NgSwitchCase, NgSwitchDefault} from './ng_switch';
+import {NgTemplateOutlet} from './ng_template_outlet';
+
+export {
+  NgClass,
+  NgComponentOutlet,
+  NgForOf,
+  NgForOfContext,
+  NgIf,
+  NgIfContext,
+  NgPlural,
+  NgPluralCase,
+  NgStyle,
+  NgSwitch,
+  NgSwitchCase,
+  NgSwitchDefault,
+  NgTemplateOutlet
+};
+
+
+
+/**
+ * A collection of Angular directives that are likely to be used in each and every Angular
+ * application.
+ */
+export const COMMON_DIRECTIVES: Provider[] = [
+  NgClass,
+  NgComponentOutlet,
+  NgForOf,
+  NgIf,
+  NgTemplateOutlet,
+  NgStyle,
+  NgSwitch,
+  NgSwitchCase,
+  NgSwitchDefault,
+  NgPlural,
+  NgPluralCase,
+];
diff --git a/packages/common/src/directives/ng_class.ts b/packages/common/src/directives/ng_class.ts
new file mode 100644
index 000000000000..3c1e38a188ab
--- /dev/null
+++ b/packages/common/src/directives/ng_class.ts
@@ -0,0 +1,161 @@
+/**
+ * @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 {Directive, DoCheck, ElementRef, Input, IterableChanges, IterableDiffer, IterableDiffers, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer2, ɵisListLikeIterable as isListLikeIterable, ɵstringify as stringify} from '@angular/core';
+
+/**
+ * @ngModule CommonModule
+ *
+ * @usageNotes
+ * ```
+ *     <some-element [ngClass]="'first second'">...</some-element>
+ *
+ *     <some-element [ngClass]="['first', 'second']">...</some-element>
+ *
+ *     <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
+ *
+ *     <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
+ *
+ *     <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
+ * ```
+ *
+ * @description
+ *
+ * Adds and removes CSS classes on an HTML element.
+ *
+ * The CSS classes are updated as follows, depending on the type of the expression evaluation:
+ * - `string` - the CSS classes listed in the string (space delimited) are added,
+ * - `Array` - the CSS classes declared as Array elements are added,
+ * - `Object` - keys are CSS classes that get added when the expression given in the value
+ *              evaluates to a truthy value, otherwise they are removed.
+ *
+ *
+ */
+@Directive({selector: '[ngClass]'})
+export class NgClass implements DoCheck {
+  // TODO(issue/24571): remove '!'.
+  private _iterableDiffer !: IterableDiffer<string>| null;
+  // TODO(issue/24571): remove '!'.
+  private _keyValueDiffer !: KeyValueDiffer<string, any>| null;
+  private _initialClasses: string[] = [];
+  // TODO(issue/24571): remove '!'.
+  private _rawClass !: string[] | Set<string>| {[klass: string]: any};
+
+  constructor(
+      private _iterableDiffers: IterableDiffers, private _keyValueDiffers: KeyValueDiffers,
+      private _ngEl: ElementRef, private _renderer: Renderer2) {}
+
+  @Input('class')
+  set klass(value: string) {
+    this._removeClasses(this._initialClasses);
+    this._initialClasses = typeof value === 'string' ? value.split(/\s+/) : [];
+    this._applyClasses(this._initialClasses);
+    this._applyClasses(this._rawClass);
+  }
+
+  @Input()
+  set ngClass(value: string|string[]|Set<string>|{[klass: string]: any}) {
+    this._removeClasses(this._rawClass);
+    this._applyClasses(this._initialClasses);
+
+    this._iterableDiffer = null;
+    this._keyValueDiffer = null;
+
+    this._rawClass = typeof value === 'string' ? value.split(/\s+/) : value;
+
+    if (this._rawClass) {
+      if (isListLikeIterable(this._rawClass)) {
+        this._iterableDiffer = this._iterableDiffers.find(this._rawClass).create();
+      } else {
+        this._keyValueDiffer = this._keyValueDiffers.find(this._rawClass).create();
+      }
+    }
+  }
+
+  ngDoCheck(): void {
+    if (this._iterableDiffer) {
+      const iterableChanges = this._iterableDiffer.diff(this._rawClass as string[]);
+      if (iterableChanges) {
+        this._applyIterableChanges(iterableChanges);
+      }
+    } else if (this._keyValueDiffer) {
+      const keyValueChanges = this._keyValueDiffer.diff(this._rawClass as{[k: string]: any});
+      if (keyValueChanges) {
+        this._applyKeyValueChanges(keyValueChanges);
+      }
+    }
+  }
+
+  private _applyKeyValueChanges(changes: KeyValueChanges<string, any>): void {
+    changes.forEachAddedItem((record) => this._toggleClass(record.key, record.currentValue));
+    changes.forEachChangedItem((record) => this._toggleClass(record.key, record.currentValue));
+    changes.forEachRemovedItem((record) => {
+      if (record.previousValue) {
+        this._toggleClass(record.key, false);
+      }
+    });
+  }
+
+  private _applyIterableChanges(changes: IterableChanges<string>): void {
+    changes.forEachAddedItem((record) => {
+      if (typeof record.item === 'string') {
+        this._toggleClass(record.item, true);
+      } else {
+        throw new Error(
+            `NgClass can only toggle CSS classes expressed as strings, got ${stringify(record.item)}`);
+      }
+    });
+
+    changes.forEachRemovedItem((record) => this._toggleClass(record.item, false));
+  }
+
+  /**
+   * Applies a collection of CSS classes to the DOM element.
+   *
+   * For argument of type Set and Array CSS class names contained in those collections are always
+   * added.
+   * For argument of type Map CSS class name in the map's key is toggled based on the value (added
+   * for truthy and removed for falsy).
+   */
+  private _applyClasses(rawClassVal: string[]|Set<string>|{[klass: string]: any}) {
+    if (rawClassVal) {
+      if (Array.isArray(rawClassVal) || rawClassVal instanceof Set) {
+        (<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, true));
+      } else {
+        Object.keys(rawClassVal).forEach(klass => this._toggleClass(klass, !!rawClassVal[klass]));
+      }
+    }
+  }
+
+  /**
+   * Removes a collection of CSS classes from the DOM element. This is mostly useful for cleanup
+   * purposes.
+   */
+  private _removeClasses(rawClassVal: string[]|Set<string>|{[klass: string]: any}) {
+    if (rawClassVal) {
+      if (Array.isArray(rawClassVal) || rawClassVal instanceof Set) {
+        (<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, false));
+      } else {
+        Object.keys(rawClassVal).forEach(klass => this._toggleClass(klass, false));
+      }
+    }
+  }
+
+  private _toggleClass(klass: string, enabled: boolean): void {
+    klass = klass.trim();
+    if (klass) {
+      klass.split(/\s+/g).forEach(klass => {
+        if (enabled) {
+          this._renderer.addClass(this._ngEl.nativeElement, klass);
+        } else {
+          this._renderer.removeClass(this._ngEl.nativeElement, klass);
+        }
+      });
+    }
+  }
+}
diff --git a/packages/common/src/directives/ng_component_outlet.ts b/packages/common/src/directives/ng_component_outlet.ts
new file mode 100644
index 000000000000..3d04a2574eb7
--- /dev/null
+++ b/packages/common/src/directives/ng_component_outlet.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 {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, NgModuleFactory, NgModuleRef, OnChanges, OnDestroy, SimpleChanges, StaticProvider, Type, ViewContainerRef} from '@angular/core';
+
+
+/**
+ * Instantiates a single {@link Component} type and inserts its Host View into current View.
+ * `NgComponentOutlet` provides a declarative approach for dynamic component creation.
+ *
+ * `NgComponentOutlet` requires a component type, if a falsy value is set the view will clear and
+ * any existing component will get destroyed.
+ *
+ * @usageNotes
+ *
+ * ### Fine tune control
+ *
+ * You can control the component creation process by using the following optional attributes:
+ *
+ * * `ngComponentOutletInjector`: Optional custom {@link Injector} that will be used as parent for
+ * the Component. Defaults to the injector of the current view container.
+ *
+ * * `ngComponentOutletContent`: Optional list of projectable nodes to insert into the content
+ * section of the component, if exists.
+ *
+ * * `ngComponentOutletNgModuleFactory`: Optional module factory to allow dynamically loading other
+ * module, then load a component from that module.
+ *
+ * ### Syntax
+ *
+ * Simple
+ * ```
+ * <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
+ * ```
+ *
+ * Customized injector/content
+ * ```
+ * <ng-container *ngComponentOutlet="componentTypeExpression;
+ *                                   injector: injectorExpression;
+ *                                   content: contentNodesExpression;">
+ * </ng-container>
+ * ```
+ *
+ * Customized ngModuleFactory
+ * ```
+ * <ng-container *ngComponentOutlet="componentTypeExpression;
+ *                                   ngModuleFactory: moduleFactory;">
+ * </ng-container>
+ * ```
+ *
+ * ### A simple example
+ *
+ * {@example common/ngComponentOutlet/ts/module.ts region='SimpleExample'}
+ *
+ * A more complete example with additional options:
+ *
+ * {@example common/ngComponentOutlet/ts/module.ts region='CompleteExample'}
+
+ * A more complete example with ngModuleFactory:
+ *
+ * {@example common/ngComponentOutlet/ts/module.ts region='NgModuleFactoryExample'}
+ *
+ * @experimental
+ */
+@Directive({selector: '[ngComponentOutlet]'})
+export class NgComponentOutlet implements OnChanges, OnDestroy {
+  // TODO(issue/24571): remove '!'.
+  @Input() ngComponentOutlet !: Type<any>;
+  // TODO(issue/24571): remove '!'.
+  @Input() ngComponentOutletInjector !: Injector;
+  // TODO(issue/24571): remove '!'.
+  @Input() ngComponentOutletContent !: any[][];
+  // TODO(issue/24571): remove '!'.
+  @Input() ngComponentOutletNgModuleFactory !: NgModuleFactory<any>;
+
+  private _componentRef: ComponentRef<any>|null = null;
+  private _moduleRef: NgModuleRef<any>|null = null;
+
+  constructor(private _viewContainerRef: ViewContainerRef) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    this._viewContainerRef.clear();
+    this._componentRef = null;
+
+    if (this.ngComponentOutlet) {
+      const elInjector = this.ngComponentOutletInjector || this._viewContainerRef.parentInjector;
+
+      if (changes['ngComponentOutletNgModuleFactory']) {
+        if (this._moduleRef) this._moduleRef.destroy();
+
+        if (this.ngComponentOutletNgModuleFactory) {
+          const parentModule = elInjector.get(NgModuleRef);
+          this._moduleRef = this.ngComponentOutletNgModuleFactory.create(parentModule.injector);
+        } else {
+          this._moduleRef = null;
+        }
+      }
+
+      const componentFactoryResolver = this._moduleRef ? this._moduleRef.componentFactoryResolver :
+                                                         elInjector.get(ComponentFactoryResolver);
+
+      const componentFactory =
+          componentFactoryResolver.resolveComponentFactory(this.ngComponentOutlet);
+
+      this._componentRef = this._viewContainerRef.createComponent(
+          componentFactory, this._viewContainerRef.length, elInjector,
+          this.ngComponentOutletContent);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this._moduleRef) this._moduleRef.destroy();
+  }
+}
diff --git a/packages/common/src/directives/ng_for_of.ts b/packages/common/src/directives/ng_for_of.ts
new file mode 100644
index 000000000000..0779162ddbec
--- /dev/null
+++ b/packages/common/src/directives/ng_for_of.ts
@@ -0,0 +1,209 @@
+/**
+ * @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 {ChangeDetectorRef, Directive, DoCheck, EmbeddedViewRef, Input, IterableChangeRecord, IterableChanges, IterableDiffer, IterableDiffers, NgIterable, TemplateRef, TrackByFunction, ViewContainerRef, forwardRef, isDevMode} from '@angular/core';
+
+export class NgForOfContext<T> {
+  constructor(
+      public $implicit: T, public ngForOf: NgIterable<T>, public index: number,
+      public count: number) {}
+
+  get first(): boolean { return this.index === 0; }
+
+  get last(): boolean { return this.index === this.count - 1; }
+
+  get even(): boolean { return this.index % 2 === 0; }
+
+  get odd(): boolean { return !this.even; }
+}
+
+/**
+ * The `NgForOf` directive instantiates a template once per item from an iterable. The context
+ * for each instantiated template inherits from the outer context with the given loop variable
+ * set to the current item from the iterable.
+ *
+ * @usageNotes
+ *
+ * ### Local Variables
+ *
+ * `NgForOf` provides several exported values that can be aliased to local variables:
+ *
+ * - `$implicit: T`: The value of the individual items in the iterable (`ngForOf`).
+ * - `ngForOf: NgIterable<T>`: The value of the iterable expression. Useful when the expression is
+ * more complex then a property access, for example when using the async pipe (`userStreams |
+ * async`).
+ * - `index: number`: The index of the current item in the iterable.
+ * - `first: boolean`: True when the item is the first item in the iterable.
+ * - `last: boolean`: True when the item is the last item in the iterable.
+ * - `even: boolean`: True when the item has an even index in the iterable.
+ * - `odd: boolean`: True when the item has an odd index in the iterable.
+ *
+ * ```
+ * <li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
+ *    {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
+ * </li>
+ * ```
+ *
+ * ### Change Propagation
+ *
+ * When the contents of the iterator changes, `NgForOf` makes the corresponding changes to the DOM:
+ *
+ * * When an item is added, a new instance of the template is added to the DOM.
+ * * When an item is removed, its template instance is removed from the DOM.
+ * * When items are reordered, their respective templates are reordered in the DOM.
+ * * Otherwise, the DOM element for that item will remain the same.
+ *
+ * Angular uses object identity to track insertions and deletions within the iterator and reproduce
+ * those changes in the DOM. This has important implications for animations and any stateful
+ * controls (such as `<input>` elements which accept user input) that are present. Inserted rows can
+ * be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state
+ * such as user input.
+ *
+ * It is possible for the identities of elements in the iterator to change while the data does not.
+ * This can happen, for example, if the iterator produced from an RPC to the server, and that
+ * RPC is re-run. Even if the data hasn't changed, the second response will produce objects with
+ * different identities, and Angular will tear down the entire DOM and rebuild it (as if all old
+ * elements were deleted and all new elements inserted). This is an expensive operation and should
+ * be avoided if possible.
+ *
+ * To customize the default tracking algorithm, `NgForOf` supports `trackBy` option.
+ * `trackBy` takes a function which has two arguments: `index` and `item`.
+ * If `trackBy` is given, Angular tracks changes by the return value of the function.
+ *
+ * ### Syntax
+ *
+ * - `<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>`
+ *
+ * With `<ng-template>` element:
+ *
+ * ```
+ * <ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
+ *   <li>...</li>
+ * </ng-template>
+ * ```
+ *
+ * ### Example
+ *
+ * See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed
+ * example.
+ *
+ *
+ */
+@Directive({selector: '[ngFor][ngForOf]'})
+export class NgForOf<T> implements DoCheck {
+  @Input()
+  set ngForOf(ngForOf: NgIterable<T>) {
+    this._ngForOf = ngForOf;
+    this._ngForOfDirty = true;
+  }
+  @Input()
+  set ngForTrackBy(fn: TrackByFunction<T>) {
+    if (isDevMode() && fn != null && typeof fn !== 'function') {
+      // TODO(vicb): use a log service once there is a public one available
+      if (<any>console && <any>console.warn) {
+        console.warn(
+            `trackBy must be a function, but received ${JSON.stringify(fn)}. ` +
+            `See https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html#!#change-propagation for more information.`);
+      }
+    }
+    this._trackByFn = fn;
+  }
+
+  get ngForTrackBy(): TrackByFunction<T> { return this._trackByFn; }
+
+  // TODO(issue/24571): remove '!'.
+  private _ngForOf !: NgIterable<T>;
+  private _ngForOfDirty: boolean = true;
+  private _differ: IterableDiffer<T>|null = null;
+  // TODO(issue/24571): remove '!'.
+  private _trackByFn !: TrackByFunction<T>;
+
+  constructor(
+      private _viewContainer: ViewContainerRef, private _template: TemplateRef<NgForOfContext<T>>,
+      private _differs: IterableDiffers) {}
+
+  @Input()
+  set ngForTemplate(value: TemplateRef<NgForOfContext<T>>) {
+    // TODO(TS2.1): make TemplateRef<Partial<NgForRowOf<T>>> once we move to TS v2.1
+    // The current type is too restrictive; a template that just uses index, for example,
+    // should be acceptable.
+    if (value) {
+      this._template = value;
+    }
+  }
+
+  ngDoCheck(): void {
+    if (this._ngForOfDirty) {
+      this._ngForOfDirty = false;
+      // React on ngForOf changes only once all inputs have been initialized
+      const value = this._ngForOf;
+      if (!this._differ && value) {
+        try {
+          this._differ = this._differs.find(value).create(this.ngForTrackBy);
+        } catch (e) {
+          throw new Error(
+              `Cannot find a differ supporting object '${value}' of type '${getTypeNameForDebugging(value)}'. NgFor only supports binding to Iterables such as Arrays.`);
+        }
+      }
+    }
+    if (this._differ) {
+      const changes = this._differ.diff(this._ngForOf);
+      if (changes) this._applyChanges(changes);
+    }
+  }
+
+  private _applyChanges(changes: IterableChanges<T>) {
+    const insertTuples: RecordViewTuple<T>[] = [];
+    changes.forEachOperation(
+        (item: IterableChangeRecord<any>, adjustedPreviousIndex: number, currentIndex: number) => {
+          if (item.previousIndex == null) {
+            const view = this._viewContainer.createEmbeddedView(
+                this._template, new NgForOfContext<T>(null !, this._ngForOf, -1, -1), currentIndex);
+            const tuple = new RecordViewTuple<T>(item, view);
+            insertTuples.push(tuple);
+          } else if (currentIndex == null) {
+            this._viewContainer.remove(adjustedPreviousIndex);
+          } else {
+            const view = this._viewContainer.get(adjustedPreviousIndex) !;
+            this._viewContainer.move(view, currentIndex);
+            const tuple = new RecordViewTuple(item, <EmbeddedViewRef<NgForOfContext<T>>>view);
+            insertTuples.push(tuple);
+          }
+        });
+
+    for (let i = 0; i < insertTuples.length; i++) {
+      this._perViewChange(insertTuples[i].view, insertTuples[i].record);
+    }
+
+    for (let i = 0, ilen = this._viewContainer.length; i < ilen; i++) {
+      const viewRef = <EmbeddedViewRef<NgForOfContext<T>>>this._viewContainer.get(i);
+      viewRef.context.index = i;
+      viewRef.context.count = ilen;
+      viewRef.context.ngForOf = this._ngForOf;
+    }
+
+    changes.forEachIdentityChange((record: any) => {
+      const viewRef =
+          <EmbeddedViewRef<NgForOfContext<T>>>this._viewContainer.get(record.currentIndex);
+      viewRef.context.$implicit = record.item;
+    });
+  }
+
+  private _perViewChange(
+      view: EmbeddedViewRef<NgForOfContext<T>>, record: IterableChangeRecord<any>) {
+    view.context.$implicit = record.item;
+  }
+}
+
+class RecordViewTuple<T> {
+  constructor(public record: any, public view: EmbeddedViewRef<NgForOfContext<T>>) {}
+}
+
+export function getTypeNameForDebugging(type: any): string {
+  return type['name'] || typeof type;
+}
diff --git a/packages/common/src/directives/ng_if.ts b/packages/common/src/directives/ng_if.ts
new file mode 100644
index 000000000000..4c8d42f26c36
--- /dev/null
+++ b/packages/common/src/directives/ng_if.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 {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef, ɵstringify as stringify} from '@angular/core';
+
+
+/**
+ * Conditionally includes a template based on the value of an `expression`.
+ *
+ * `ngIf` evaluates the `expression` and then renders the `then` or `else` template in its place
+ * when expression is truthy or falsy respectively. Typically the:
+ *  - `then` template is the inline template of `ngIf` unless bound to a different value.
+ *  - `else` template is blank unless it is bound.
+ *
+ *
+ * @usageNotes
+ *
+ * ### 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`
+ *
+ * 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`.
+ * The template can be defined anywhere in the component view but is typically placed right after
+ * `ngIf` for readability.
+ *
+ * {@example common/ngIf/ts/module.ts region='NgIfElse'}
+ *
+ * ### 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
+ * change at runtime as shown in this example.
+ *
+ * {@example common/ngIf/ts/module.ts region='NgIfThenElse'}
+ *
+ * ### 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 following example:
+ *
+ * ```
+ * Hello {{ (userStream|async)?.last }}, {{ (userStream|async)?.first }}!
+ * ```
+ *
+ * There are several inefficiencies in the above example:
+ *  - We create multiple subscriptions on `userStream`. One for each `async` pipe, or two in the
+ *    example above.
+ *  - We cannot display an alternative screen while waiting for the data to arrive asynchronously.
+ *  - We have to use the safe-traversal-operator `?.` to access properties, which is cumbersome.
+ *  - We have to place the `async` pipe in parenthesis.
+ *
+ * A better way to do this is to use `ngIf` and store the result of the condition in a local
+ * variable as shown in the the example below:
+ *
+ * {@example common/ngIf/ts/module.ts region='NgIfAs'}
+ *
+ * Notice that:
+ *  - We use only one `async` pipe and hence only one subscription gets created.
+ *  - `ngIf` stores the result of the `userStream|async` in the local variable `user`.
+ *  - The local `user` can then be bound repeatedly in a more efficient way.
+ *  - No need to use the safe-traversal-operator `?.` to access properties as `ngIf` will only
+ *    display the data if `userStream` returns a value.
+ *  - We can display an alternative template while waiting for the data.
+ *
+ * ### Syntax
+ *
+ * Simple form:
+ * - `<div *ngIf="condition">...</div>`
+ * - `<ng-template [ngIf]="condition"><div>...</div></ng-template>`
+ *
+ * Form with an else block:
+ * ```
+ * <div *ngIf="condition; else elseBlock">...</div>
+ * <ng-template #elseBlock>...</ng-template>
+ * ```
+ *
+ * Form with a `then` and `else` block:
+ * ```
+ * <div *ngIf="condition; then thenBlock else elseBlock"></div>
+ * <ng-template #thenBlock>...</ng-template>
+ * <ng-template #elseBlock>...</ng-template>
+ * ```
+ *
+ * Form with storing the value locally:
+ * ```
+ * <div *ngIf="condition as value; else elseBlock">{{value}}</div>
+ * <ng-template #elseBlock>...</ng-template>
+ * ```
+ *
+ *
+ */
+@Directive({selector: '[ngIf]'})
+export class NgIf {
+  private _context: NgIfContext = new NgIfContext();
+  private _thenTemplateRef: TemplateRef<NgIfContext>|null = null;
+  private _elseTemplateRef: TemplateRef<NgIfContext>|null = null;
+  private _thenViewRef: EmbeddedViewRef<NgIfContext>|null = null;
+  private _elseViewRef: EmbeddedViewRef<NgIfContext>|null = null;
+
+  constructor(private _viewContainer: ViewContainerRef, templateRef: TemplateRef<NgIfContext>) {
+    this._thenTemplateRef = templateRef;
+  }
+
+  @Input()
+  set ngIf(condition: any) {
+    this._context.$implicit = this._context.ngIf = condition;
+    this._updateView();
+  }
+
+  @Input()
+  set ngIfThen(templateRef: TemplateRef<NgIfContext>|null) {
+    assertTemplate('ngIfThen', templateRef);
+    this._thenTemplateRef = templateRef;
+    this._thenViewRef = null;  // clear previous view if any.
+    this._updateView();
+  }
+
+  @Input()
+  set ngIfElse(templateRef: TemplateRef<NgIfContext>|null) {
+    assertTemplate('ngIfElse', templateRef);
+    this._elseTemplateRef = templateRef;
+    this._elseViewRef = null;  // clear previous view if any.
+    this._updateView();
+  }
+
+  private _updateView() {
+    if (this._context.$implicit) {
+      if (!this._thenViewRef) {
+        this._viewContainer.clear();
+        this._elseViewRef = null;
+        if (this._thenTemplateRef) {
+          this._thenViewRef =
+              this._viewContainer.createEmbeddedView(this._thenTemplateRef, this._context);
+        }
+      }
+    } else {
+      if (!this._elseViewRef) {
+        this._viewContainer.clear();
+        this._thenViewRef = null;
+        if (this._elseTemplateRef) {
+          this._elseViewRef =
+              this._viewContainer.createEmbeddedView(this._elseTemplateRef, this._context);
+        }
+      }
+    }
+  }
+
+  /** @internal */
+  public static ngIfUseIfTypeGuard: void;
+}
+
+export class NgIfContext {
+  public $implicit: any = null;
+  public ngIf: any = null;
+}
+
+function assertTemplate(property: string, templateRef: TemplateRef<any>| null): void {
+  const isTemplateRefOrNull = !!(!templateRef || templateRef.createEmbeddedView);
+  if (!isTemplateRefOrNull) {
+    throw new Error(`${property} must be a TemplateRef, but received '${stringify(templateRef)}'.`);
+  }
+}
diff --git a/packages/common/src/directives/ng_plural.ts b/packages/common/src/directives/ng_plural.ts
new file mode 100644
index 000000000000..eb489a82285e
--- /dev/null
+++ b/packages/common/src/directives/ng_plural.ts
@@ -0,0 +1,113 @@
+/**
+ * @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, Directive, Host, Input, TemplateRef, ViewContainerRef} from '@angular/core';
+
+import {NgLocalization, getPluralCategory} from '../i18n/localization';
+
+import {SwitchView} from './ng_switch';
+
+
+/**
+ * @ngModule CommonModule
+ *
+ * @usageNotes
+ * ```
+ * <some-element [ngPlural]="value">
+ *   <ng-template ngPluralCase="=0">there is nothing</ng-template>
+ *   <ng-template ngPluralCase="=1">there is one</ng-template>
+ *   <ng-template ngPluralCase="few">there are a few</ng-template>
+ * </some-element>
+ * ```
+ *
+ * @description
+ *
+ * Adds / removes DOM sub-trees based on a numeric value. Tailored for pluralization.
+ *
+ * Displays DOM sub-trees that match the switch expression value, or failing that, DOM sub-trees
+ * that match the switch expression's pluralization category.
+ *
+ * To use this directive you must provide a container element that sets the `[ngPlural]` attribute
+ * to a switch expression. Inner elements with a `[ngPluralCase]` will display based on their
+ * expression:
+ * - if `[ngPluralCase]` is set to a value starting with `=`, it will only display if the value
+ *   matches the switch expression exactly,
+ * - otherwise, the view will be treated as a "category match", and will only display if exact
+ *   value matches aren't found and the value maps to its category for the defined locale.
+ *
+ * See http://cldr.unicode.org/index/cldr-spec/plural-rules
+ *
+ * @experimental
+ */
+@Directive({selector: '[ngPlural]'})
+export class NgPlural {
+  // TODO(issue/24571): remove '!'.
+  private _switchValue !: number;
+  // TODO(issue/24571): remove '!'.
+  private _activeView !: SwitchView;
+  private _caseViews: {[k: string]: SwitchView} = {};
+
+  constructor(private _localization: NgLocalization) {}
+
+  @Input()
+  set ngPlural(value: number) {
+    this._switchValue = value;
+    this._updateView();
+  }
+
+  addCase(value: string, switchView: SwitchView): void { this._caseViews[value] = switchView; }
+
+  private _updateView(): void {
+    this._clearViews();
+
+    const cases = Object.keys(this._caseViews);
+    const key = getPluralCategory(this._switchValue, cases, this._localization);
+    this._activateView(this._caseViews[key]);
+  }
+
+  private _clearViews() {
+    if (this._activeView) this._activeView.destroy();
+  }
+
+  private _activateView(view: SwitchView) {
+    if (view) {
+      this._activeView = view;
+      this._activeView.create();
+    }
+  }
+}
+
+/**
+ * @ngModule CommonModule
+ *
+ * @description
+ *
+ * Creates a view that will be added/removed from the parent {@link NgPlural} when the
+ * given expression matches the plural expression according to CLDR rules.
+ *
+ * @usageNotes
+ * ```
+ * <some-element [ngPlural]="value">
+ *   <ng-template ngPluralCase="=0">...</ng-template>
+ *   <ng-template ngPluralCase="other">...</ng-template>
+ * </some-element>
+ *```
+ *
+ * See {@link NgPlural} for more details and example.
+ *
+ * @experimental
+ */
+@Directive({selector: '[ngPluralCase]'})
+export class NgPluralCase {
+  constructor(
+      @Attribute('ngPluralCase') public value: string, template: TemplateRef<Object>,
+      viewContainer: ViewContainerRef, @Host() ngPlural: NgPlural) {
+    const isANumber: boolean = !isNaN(Number(value));
+    ngPlural.addCase(isANumber ? `=${value}` : value, new SwitchView(viewContainer, template));
+  }
+}
diff --git a/packages/common/src/directives/ng_style.ts b/packages/common/src/directives/ng_style.ts
new file mode 100644
index 000000000000..612bb358a0e1
--- /dev/null
+++ b/packages/common/src/directives/ng_style.ts
@@ -0,0 +1,76 @@
+/**
+ * @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 {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer2} from '@angular/core';
+
+/**
+ * @ngModule CommonModule
+ *
+ * @usageNotes
+ * ```
+ * <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
+ *
+ * <some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
+ *
+ * <some-element [ngStyle]="objExp">...</some-element>
+ * ```
+ *
+ * @description
+ *
+ * Update an HTML element styles.
+ *
+ * The styles are updated according to the value of the expression evaluation:
+ * - keys are style names with an optional `.<unit>` suffix (ie 'top.px', 'font-style.em'),
+ * - values are the values assigned to those properties (expressed in the given unit).
+ *
+ *
+ */
+@Directive({selector: '[ngStyle]'})
+export class NgStyle implements DoCheck {
+  // TODO(issue/24571): remove '!'.
+  private _ngStyle !: {[key: string]: string};
+  // TODO(issue/24571): remove '!'.
+  private _differ !: KeyValueDiffer<string, string|number>;
+
+  constructor(
+      private _differs: KeyValueDiffers, private _ngEl: ElementRef, private _renderer: Renderer2) {}
+
+  @Input()
+  set ngStyle(values: {[key: string]: string}) {
+    this._ngStyle = values;
+    if (!this._differ && values) {
+      this._differ = this._differs.find(values).create();
+    }
+  }
+
+  ngDoCheck() {
+    if (this._differ) {
+      const changes = this._differ.diff(this._ngStyle);
+      if (changes) {
+        this._applyChanges(changes);
+      }
+    }
+  }
+
+  private _applyChanges(changes: KeyValueChanges<string, string|number>): void {
+    changes.forEachRemovedItem((record) => this._setStyle(record.key, null));
+    changes.forEachAddedItem((record) => this._setStyle(record.key, record.currentValue));
+    changes.forEachChangedItem((record) => this._setStyle(record.key, record.currentValue));
+  }
+
+  private _setStyle(nameAndUnit: string, value: string|number|null|undefined): void {
+    const [name, unit] = nameAndUnit.split('.');
+    value = value != null && unit ? `${value}${unit}` : value;
+
+    if (value != null) {
+      this._renderer.setStyle(this._ngEl.nativeElement, name, value as string);
+    } else {
+      this._renderer.removeStyle(this._ngEl.nativeElement, name);
+    }
+  }
+}
diff --git a/packages/common/src/directives/ng_switch.ts b/packages/common/src/directives/ng_switch.ts
new file mode 100644
index 000000000000..3f3ca39180ef
--- /dev/null
+++ b/packages/common/src/directives/ng_switch.ts
@@ -0,0 +1,199 @@
+/**
+ * @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 {Directive, DoCheck, Host, Input, TemplateRef, ViewContainerRef} from '@angular/core';
+
+export class SwitchView {
+  private _created = false;
+
+  constructor(
+      private _viewContainerRef: ViewContainerRef, private _templateRef: TemplateRef<Object>) {}
+
+  create(): void {
+    this._created = true;
+    this._viewContainerRef.createEmbeddedView(this._templateRef);
+  }
+
+  destroy(): void {
+    this._created = false;
+    this._viewContainerRef.clear();
+  }
+
+  enforceState(created: boolean) {
+    if (created && !this._created) {
+      this.create();
+    } else if (!created && this._created) {
+      this.destroy();
+    }
+  }
+}
+
+/**
+ * @ngModule CommonModule
+ *
+ * @usageNotes
+ * ```
+ *     <container-element [ngSwitch]="switch_expression">
+ *       <some-element *ngSwitchCase="match_expression_1">...</some-element>
+ *       <some-element *ngSwitchCase="match_expression_2">...</some-element>
+ *       <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
+ *       <ng-container *ngSwitchCase="match_expression_3">
+ *         <!-- use a ng-container to group multiple root nodes -->
+ *         <inner-element></inner-element>
+ *         <inner-other-element></inner-other-element>
+ *       </ng-container>
+ *       <some-element *ngSwitchDefault>...</some-element>
+ *     </container-element>
+ * ```
+ * @description
+ *
+ * Adds / removes DOM sub-trees when the nest match expressions matches the switch expression.
+ *
+ * `NgSwitch` stamps out nested views when their match expression value matches the value of the
+ * switch expression.
+ *
+ * In other words:
+ * - you define a container element (where you place the directive with a switch expression on the
+ * `[ngSwitch]="..."` attribute)
+ * - you define inner views inside the `NgSwitch` and place a `*ngSwitchCase` attribute on the view
+ * root elements.
+ *
+ * Elements within `NgSwitch` but outside of a `NgSwitchCase` or `NgSwitchDefault` directives will
+ * be preserved at the location.
+ *
+ * The `ngSwitchCase` directive informs the parent `NgSwitch` of which view to display when the
+ * expression is evaluated.
+ * When no matching expression is found on a `ngSwitchCase` view, the `ngSwitchDefault` view is
+ * stamped out.
+ *
+ *
+ */
+@Directive({selector: '[ngSwitch]'})
+export class NgSwitch {
+  // TODO(issue/24571): remove '!'.
+  private _defaultViews !: SwitchView[];
+  private _defaultUsed = false;
+  private _caseCount = 0;
+  private _lastCaseCheckIndex = 0;
+  private _lastCasesMatched = false;
+  private _ngSwitch: any;
+
+  @Input()
+  set ngSwitch(newValue: any) {
+    this._ngSwitch = newValue;
+    if (this._caseCount === 0) {
+      this._updateDefaultCases(true);
+    }
+  }
+
+  /** @internal */
+  _addCase(): number { return this._caseCount++; }
+
+  /** @internal */
+  _addDefault(view: SwitchView) {
+    if (!this._defaultViews) {
+      this._defaultViews = [];
+    }
+    this._defaultViews.push(view);
+  }
+
+  /** @internal */
+  _matchCase(value: any): boolean {
+    const matched = value == this._ngSwitch;
+    this._lastCasesMatched = this._lastCasesMatched || matched;
+    this._lastCaseCheckIndex++;
+    if (this._lastCaseCheckIndex === this._caseCount) {
+      this._updateDefaultCases(!this._lastCasesMatched);
+      this._lastCaseCheckIndex = 0;
+      this._lastCasesMatched = false;
+    }
+    return matched;
+  }
+
+  private _updateDefaultCases(useDefault: boolean) {
+    if (this._defaultViews && useDefault !== this._defaultUsed) {
+      this._defaultUsed = useDefault;
+      for (let i = 0; i < this._defaultViews.length; i++) {
+        const defaultView = this._defaultViews[i];
+        defaultView.enforceState(useDefault);
+      }
+    }
+  }
+}
+
+/**
+ * @ngModule CommonModule
+ *
+ * @usageNotes
+ * ```
+ * <container-element [ngSwitch]="switch_expression">
+ *   <some-element *ngSwitchCase="match_expression_1">...</some-element>
+ * </container-element>
+ *```
+ * @description
+ *
+ * Creates a view that will be added/removed from the parent {@link NgSwitch} when the
+ * given expression evaluate to respectively the same/different value as the switch
+ * expression.
+ *
+ * Insert the sub-tree when the expression evaluates to the same value as the enclosing switch
+ * expression.
+ *
+ * If multiple match expressions match the switch expression value, all of them are displayed.
+ *
+ * See {@link NgSwitch} for more details and example.
+ *
+ *
+ */
+@Directive({selector: '[ngSwitchCase]'})
+export class NgSwitchCase implements DoCheck {
+  private _view: SwitchView;
+
+  @Input()
+  ngSwitchCase: any;
+
+  constructor(
+      viewContainer: ViewContainerRef, templateRef: TemplateRef<Object>,
+      @Host() private ngSwitch: NgSwitch) {
+    ngSwitch._addCase();
+    this._view = new SwitchView(viewContainer, templateRef);
+  }
+
+  ngDoCheck() { this._view.enforceState(this.ngSwitch._matchCase(this.ngSwitchCase)); }
+}
+
+/**
+ * @ngModule CommonModule
+ * @usageNotes
+ * ```
+ * <container-element [ngSwitch]="switch_expression">
+ *   <some-element *ngSwitchCase="match_expression_1">...</some-element>
+ *   <some-other-element *ngSwitchDefault>...</some-other-element>
+ * </container-element>
+ * ```
+ *
+ * @description
+ *
+ * Creates a view that is added to the parent {@link NgSwitch} when no case expressions
+ * match the switch expression.
+ *
+ * Insert the sub-tree when no case expressions evaluate to the same value as the enclosing switch
+ * expression.
+ *
+ * See {@link NgSwitch} for more details and example.
+ *
+ *
+ */
+@Directive({selector: '[ngSwitchDefault]'})
+export class NgSwitchDefault {
+  constructor(
+      viewContainer: ViewContainerRef, templateRef: TemplateRef<Object>,
+      @Host() ngSwitch: NgSwitch) {
+    ngSwitch._addDefault(new SwitchView(viewContainer, templateRef));
+  }
+}
diff --git a/packages/common/src/directives/ng_template_outlet.ts b/packages/common/src/directives/ng_template_outlet.ts
new file mode 100644
index 000000000000..2ff09b3807bb
--- /dev/null
+++ b/packages/common/src/directives/ng_template_outlet.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 {Directive, EmbeddedViewRef, Input, OnChanges, SimpleChange, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core';
+
+/**
+ * @ngModule CommonModule
+ *
+ * @description
+ *
+ * Inserts an embedded view from a prepared `TemplateRef`.
+ *
+ * You can attach a context object to the `EmbeddedViewRef` by setting `[ngTemplateOutletContext]`.
+ * `[ngTemplateOutletContext]` should be an object, the object's keys will be available for binding
+ * by the local template `let` declarations.
+ *
+ * @usageNotes
+ * ```
+ * <ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>
+ * ```
+ *
+ * Using the key `$implicit` in the context object will set its value as default.
+ *
+ * ### Example
+ *
+ * {@example common/ngTemplateOutlet/ts/module.ts region='NgTemplateOutlet'}
+ *
+ */
+@Directive({selector: '[ngTemplateOutlet]'})
+export class NgTemplateOutlet implements OnChanges {
+  // TODO(issue/24571): remove '!'.
+  private _viewRef !: EmbeddedViewRef<any>;
+
+  // TODO(issue/24571): remove '!'.
+  @Input() public ngTemplateOutletContext !: Object;
+
+  // TODO(issue/24571): remove '!'.
+  @Input() public ngTemplateOutlet !: TemplateRef<any>;
+
+  constructor(private _viewContainerRef: ViewContainerRef) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    const recreateView = this._shouldRecreateView(changes);
+
+    if (recreateView) {
+      if (this._viewRef) {
+        this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
+      }
+
+      if (this.ngTemplateOutlet) {
+        this._viewRef = this._viewContainerRef.createEmbeddedView(
+            this.ngTemplateOutlet, this.ngTemplateOutletContext);
+      }
+    } else {
+      if (this._viewRef && this.ngTemplateOutletContext) {
+        this._updateExistingContext(this.ngTemplateOutletContext);
+      }
+    }
+  }
+
+  /**
+   * We need to re-create existing embedded view if:
+   * - templateRef has changed
+   * - context has changes
+   *
+   * We mark context object as changed when the corresponding object
+   * shape changes (new properties are added or existing properties are removed).
+   * In other words we consider context with the same properties as "the same" even
+   * if object reference changes (see https://github.com/angular/angular/issues/13407).
+   */
+  private _shouldRecreateView(changes: SimpleChanges): boolean {
+    const ctxChange = changes['ngTemplateOutletContext'];
+    return !!changes['ngTemplateOutlet'] || (ctxChange && this._hasContextShapeChanged(ctxChange));
+  }
+
+  private _hasContextShapeChanged(ctxChange: SimpleChange): boolean {
+    const prevCtxKeys = Object.keys(ctxChange.previousValue || {});
+    const currCtxKeys = Object.keys(ctxChange.currentValue || {});
+
+    if (prevCtxKeys.length === currCtxKeys.length) {
+      for (let propName of currCtxKeys) {
+        if (prevCtxKeys.indexOf(propName) === -1) {
+          return true;
+        }
+      }
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  private _updateExistingContext(ctx: Object): void {
+    for (let propName of Object.keys(ctx)) {
+      (<any>this._viewRef.context)[propName] = (<any>this.ngTemplateOutletContext)[propName];
+    }
+  }
+}
diff --git a/packages/common/src/dom_tokens.ts b/packages/common/src/dom_tokens.ts
new file mode 100644
index 000000000000..3952de8f54dc
--- /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).
+ *
+ *
+ */
+export const DOCUMENT = new InjectionToken<Document>('DocumentToken');
diff --git a/packages/common/src/i18n/currencies.ts b/packages/common/src/i18n/currencies.ts
new file mode 100644
index 000000000000..8897e578d445
--- /dev/null
+++ b/packages/common/src/i18n/currencies.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+export type CurrenciesSymbols = [string] | [string | undefined, string];
+
+/** @internal */
+export const CURRENCIES_EN:
+    {[code: string]: CurrenciesSymbols | [string | undefined, string | undefined, number]} = {
+      'ADP': [undefined, undefined, 0],
+      'AFN': [undefined, undefined, 0],
+      'ALL': [undefined, undefined, 0],
+      'AMD': [undefined, undefined, 0],
+      'AOA': [undefined, 'Kz'],
+      'ARS': [undefined, '$'],
+      'AUD': ['A$', '$'],
+      'BAM': [undefined, 'KM'],
+      'BBD': [undefined, '$'],
+      'BDT': [undefined, '৳'],
+      'BHD': [undefined, undefined, 3],
+      'BIF': [undefined, undefined, 0],
+      'BMD': [undefined, '$'],
+      'BND': [undefined, '$'],
+      'BOB': [undefined, 'Bs'],
+      'BRL': ['R$'],
+      'BSD': [undefined, '$'],
+      'BWP': [undefined, 'P'],
+      'BYN': [undefined, 'р.', 2],
+      'BYR': [undefined, undefined, 0],
+      'BZD': [undefined, '$'],
+      'CAD': ['CA$', '$', 2],
+      'CHF': [undefined, undefined, 2],
+      'CLF': [undefined, undefined, 4],
+      'CLP': [undefined, '$', 0],
+      'CNY': ['CN¥', '¥'],
+      'COP': [undefined, '$', 0],
+      'CRC': [undefined, '₡', 2],
+      'CUC': [undefined, '$'],
+      'CUP': [undefined, '$'],
+      'CZK': [undefined, 'Kč', 2],
+      'DJF': [undefined, undefined, 0],
+      'DKK': [undefined, 'kr', 2],
+      'DOP': [undefined, '$'],
+      'EGP': [undefined, 'E£'],
+      'ESP': [undefined, '₧', 0],
+      'EUR': ['€'],
+      'FJD': [undefined, '$'],
+      'FKP': [undefined, '£'],
+      'GBP': ['£'],
+      'GEL': [undefined, '₾'],
+      'GIP': [undefined, '£'],
+      'GNF': [undefined, 'FG', 0],
+      'GTQ': [undefined, 'Q'],
+      'GYD': [undefined, '$', 0],
+      'HKD': ['HK$', '$'],
+      'HNL': [undefined, 'L'],
+      'HRK': [undefined, 'kn'],
+      'HUF': [undefined, 'Ft', 2],
+      'IDR': [undefined, 'Rp', 0],
+      'ILS': ['₪'],
+      'INR': ['₹'],
+      'IQD': [undefined, undefined, 0],
+      'IRR': [undefined, undefined, 0],
+      'ISK': [undefined, 'kr', 0],
+      'ITL': [undefined, undefined, 0],
+      'JMD': [undefined, '$'],
+      'JOD': [undefined, undefined, 3],
+      'JPY': ['¥', undefined, 0],
+      'KHR': [undefined, '៛'],
+      'KMF': [undefined, 'CF', 0],
+      'KPW': [undefined, '₩', 0],
+      'KRW': ['₩', undefined, 0],
+      'KWD': [undefined, undefined, 3],
+      'KYD': [undefined, '$'],
+      'KZT': [undefined, '₸'],
+      'LAK': [undefined, '₭', 0],
+      'LBP': [undefined, 'L£', 0],
+      'LKR': [undefined, 'Rs'],
+      'LRD': [undefined, '$'],
+      'LTL': [undefined, 'Lt'],
+      'LUF': [undefined, undefined, 0],
+      'LVL': [undefined, 'Ls'],
+      'LYD': [undefined, undefined, 3],
+      'MGA': [undefined, 'Ar', 0],
+      'MGF': [undefined, undefined, 0],
+      'MMK': [undefined, 'K', 0],
+      'MNT': [undefined, '₮', 0],
+      'MRO': [undefined, undefined, 0],
+      'MUR': [undefined, 'Rs', 0],
+      'MXN': ['MX$', '$'],
+      'MYR': [undefined, 'RM'],
+      'NAD': [undefined, '$'],
+      'NGN': [undefined, '₦'],
+      'NIO': [undefined, 'C$'],
+      'NOK': [undefined, 'kr', 2],
+      'NPR': [undefined, 'Rs'],
+      'NZD': ['NZ$', '$'],
+      'OMR': [undefined, undefined, 3],
+      'PHP': [undefined, '₱'],
+      'PKR': [undefined, 'Rs', 0],
+      'PLN': [undefined, 'zł'],
+      'PYG': [undefined, '₲', 0],
+      'RON': [undefined, 'lei'],
+      'RSD': [undefined, undefined, 0],
+      'RUB': [undefined, '₽'],
+      'RUR': [undefined, 'р.'],
+      'RWF': [undefined, 'RF', 0],
+      'SBD': [undefined, '$'],
+      'SEK': [undefined, 'kr', 2],
+      'SGD': [undefined, '$'],
+      'SHP': [undefined, '£'],
+      'SLL': [undefined, undefined, 0],
+      'SOS': [undefined, undefined, 0],
+      'SRD': [undefined, '$'],
+      'SSP': [undefined, '£'],
+      'STD': [undefined, undefined, 0],
+      'STN': [undefined, 'Db'],
+      'SYP': [undefined, '£', 0],
+      'THB': [undefined, '฿'],
+      'TMM': [undefined, undefined, 0],
+      'TND': [undefined, undefined, 3],
+      'TOP': [undefined, 'T$'],
+      'TRL': [undefined, undefined, 0],
+      'TRY': [undefined, '₺'],
+      'TTD': [undefined, '$'],
+      'TWD': ['NT$', '$', 2],
+      'TZS': [undefined, undefined, 0],
+      'UAH': [undefined, '₴'],
+      'UGX': [undefined, undefined, 0],
+      'USD': ['$'],
+      'UYI': [undefined, undefined, 0],
+      'UYU': [undefined, '$'],
+      'UZS': [undefined, undefined, 0],
+      'VEF': [undefined, 'Bs'],
+      'VND': ['₫', undefined, 0],
+      'VUV': [undefined, undefined, 0],
+      'XAF': ['FCFA', undefined, 0],
+      'XCD': ['EC$', '$'],
+      'XOF': ['CFA', undefined, 0],
+      'XPF': ['CFPF', undefined, 0],
+      'YER': [undefined, undefined, 0],
+      'ZAR': [undefined, 'R'],
+      'ZMK': [undefined, undefined, 0],
+      'ZMW': [undefined, 'ZK'],
+      'ZWD': [undefined, undefined, 0]
+    };
diff --git a/packages/common/src/i18n/format_date.ts b/packages/common/src/i18n/format_date.ts
new file mode 100644
index 000000000000..54c41ecf0eb7
--- /dev/null
+++ b/packages/common/src/i18n/format_date.ts
@@ -0,0 +1,725 @@
+/**
+ * @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 {FormStyle, FormatWidth, NumberSymbol, Time, TranslationWidth, getLocaleDateFormat, getLocaleDateTimeFormat, getLocaleDayNames, getLocaleDayPeriods, getLocaleEraNames, getLocaleExtraDayPeriodRules, getLocaleExtraDayPeriods, getLocaleId, getLocaleMonthNames, getLocaleNumberSymbol, getLocaleTimeFormat} from './locale_data_api';
+
+export const ISO8601_DATE_REGEX =
+    /^(\d{4})-?(\d\d)-?(\d\d)(?:T(\d\d)(?::?(\d\d)(?::?(\d\d)(?:\.(\d+))?)?)?(Z|([+-])(\d\d):?(\d\d))?)?$/;
+//    1        2       3         4          5          6          7          8  9     10      11
+const NAMED_FORMATS: {[localeId: string]: {[format: string]: string}} = {};
+const DATE_FORMATS_SPLIT =
+    /((?:[^GyMLwWdEabBhHmsSzZO']+)|(?:'(?:[^']|'')*')|(?:G{1,5}|y{1,4}|M{1,5}|L{1,5}|w{1,2}|W{1}|d{1,2}|E{1,6}|a{1,5}|b{1,5}|B{1,5}|h{1,2}|H{1,2}|m{1,2}|s{1,2}|S{1,3}|z{1,4}|Z{1,5}|O{1,4}))([\s\S]*)/;
+
+enum ZoneWidth {
+  Short,
+  ShortGMT,
+  Long,
+  Extended
+}
+
+enum DateType {
+  FullYear,
+  Month,
+  Date,
+  Hours,
+  Minutes,
+  Seconds,
+  FractionalSeconds,
+  Day
+}
+
+enum TranslationType {
+  DayPeriods,
+  Days,
+  Months,
+  Eras
+}
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Formats a date according to locale rules.
+ *
+ * Where:
+ * - `value` is a Date, a number (milliseconds since UTC epoch) or an ISO string
+ *   (https://www.w3.org/TR/NOTE-datetime).
+ * - `format` indicates which date/time components to include. See {@link DatePipe} for more
+ *   details.
+ * - `locale` is a `string` defining the locale to use.
+ * - `timezone` to be used for formatting. It understands UTC/GMT and the continental US time zone
+ *   abbreviations, but for general use, use a time zone offset (e.g. `'+0430'`).
+ *   If not specified, host system settings are used.
+ *
+ * See {@link DatePipe} for more details.
+ */
+export function formatDate(
+    value: string | number | Date, format: string, locale: string, timezone?: string): string {
+  let date = toDate(value);
+  const namedFormat = getNamedFormat(locale, format);
+  format = namedFormat || format;
+
+  let parts: string[] = [];
+  let match;
+  while (format) {
+    match = DATE_FORMATS_SPLIT.exec(format);
+    if (match) {
+      parts = parts.concat(match.slice(1));
+      const part = parts.pop();
+      if (!part) {
+        break;
+      }
+      format = part;
+    } else {
+      parts.push(format);
+      break;
+    }
+  }
+
+  let dateTimezoneOffset = date.getTimezoneOffset();
+  if (timezone) {
+    dateTimezoneOffset = timezoneToOffset(timezone, dateTimezoneOffset);
+    date = convertTimezoneToLocal(date, timezone, true);
+  }
+
+  let text = '';
+  parts.forEach(value => {
+    const dateFormatter = getDateFormatter(value);
+    text += dateFormatter ?
+        dateFormatter(date, locale, dateTimezoneOffset) :
+        value === '\'\'' ? '\'' : value.replace(/(^'|'$)/g, '').replace(/''/g, '\'');
+  });
+
+  return text;
+}
+
+function getNamedFormat(locale: string, format: string): string {
+  const localeId = getLocaleId(locale);
+  NAMED_FORMATS[localeId] = NAMED_FORMATS[localeId] || {};
+
+  if (NAMED_FORMATS[localeId][format]) {
+    return NAMED_FORMATS[localeId][format];
+  }
+
+  let formatValue = '';
+  switch (format) {
+    case 'shortDate':
+      formatValue = getLocaleDateFormat(locale, FormatWidth.Short);
+      break;
+    case 'mediumDate':
+      formatValue = getLocaleDateFormat(locale, FormatWidth.Medium);
+      break;
+    case 'longDate':
+      formatValue = getLocaleDateFormat(locale, FormatWidth.Long);
+      break;
+    case 'fullDate':
+      formatValue = getLocaleDateFormat(locale, FormatWidth.Full);
+      break;
+    case 'shortTime':
+      formatValue = getLocaleTimeFormat(locale, FormatWidth.Short);
+      break;
+    case 'mediumTime':
+      formatValue = getLocaleTimeFormat(locale, FormatWidth.Medium);
+      break;
+    case 'longTime':
+      formatValue = getLocaleTimeFormat(locale, FormatWidth.Long);
+      break;
+    case 'fullTime':
+      formatValue = getLocaleTimeFormat(locale, FormatWidth.Full);
+      break;
+    case 'short':
+      const shortTime = getNamedFormat(locale, 'shortTime');
+      const shortDate = getNamedFormat(locale, 'shortDate');
+      formatValue = formatDateTime(
+          getLocaleDateTimeFormat(locale, FormatWidth.Short), [shortTime, shortDate]);
+      break;
+    case 'medium':
+      const mediumTime = getNamedFormat(locale, 'mediumTime');
+      const mediumDate = getNamedFormat(locale, 'mediumDate');
+      formatValue = formatDateTime(
+          getLocaleDateTimeFormat(locale, FormatWidth.Medium), [mediumTime, mediumDate]);
+      break;
+    case 'long':
+      const longTime = getNamedFormat(locale, 'longTime');
+      const longDate = getNamedFormat(locale, 'longDate');
+      formatValue =
+          formatDateTime(getLocaleDateTimeFormat(locale, FormatWidth.Long), [longTime, longDate]);
+      break;
+    case 'full':
+      const fullTime = getNamedFormat(locale, 'fullTime');
+      const fullDate = getNamedFormat(locale, 'fullDate');
+      formatValue =
+          formatDateTime(getLocaleDateTimeFormat(locale, FormatWidth.Full), [fullTime, fullDate]);
+      break;
+  }
+  if (formatValue) {
+    NAMED_FORMATS[localeId][format] = formatValue;
+  }
+  return formatValue;
+}
+
+function formatDateTime(str: string, opt_values: string[]) {
+  if (opt_values) {
+    str = str.replace(/\{([^}]+)}/g, function(match, key) {
+      return (opt_values != null && key in opt_values) ? opt_values[key] : match;
+    });
+  }
+  return str;
+}
+
+function padNumber(
+    num: number, digits: number, minusSign = '-', trim?: boolean, negWrap?: boolean): string {
+  let neg = '';
+  if (num < 0 || (negWrap && num <= 0)) {
+    if (negWrap) {
+      num = -num + 1;
+    } else {
+      num = -num;
+      neg = minusSign;
+    }
+  }
+  let strNum = String(num);
+  while (strNum.length < digits) {
+    strNum = '0' + strNum;
+  }
+  if (trim) {
+    strNum = strNum.substr(strNum.length - digits);
+  }
+  return neg + strNum;
+}
+
+function formatFractionalSeconds(milliseconds: number, digits: number): string {
+  const strMs = padNumber(milliseconds, 3);
+  return strMs.substr(0, digits);
+}
+
+/**
+ * Returns a date formatter that transforms a date into its locale digit representation
+ */
+function dateGetter(
+    name: DateType, size: number, offset: number = 0, trim = false,
+    negWrap = false): DateFormatter {
+  return function(date: Date, locale: string): string {
+    let part = getDatePart(name, date);
+    if (offset > 0 || part > -offset) {
+      part += offset;
+    }
+
+    if (name === DateType.Hours) {
+      if (part === 0 && offset === -12) {
+        part = 12;
+      }
+    } else if (name === DateType.FractionalSeconds) {
+      return formatFractionalSeconds(part, size);
+    }
+
+    const localeMinus = getLocaleNumberSymbol(locale, NumberSymbol.MinusSign);
+    return padNumber(part, size, localeMinus, trim, negWrap);
+  };
+}
+
+function getDatePart(part: DateType, date: Date): number {
+  switch (part) {
+    case DateType.FullYear:
+      return date.getFullYear();
+    case DateType.Month:
+      return date.getMonth();
+    case DateType.Date:
+      return date.getDate();
+    case DateType.Hours:
+      return date.getHours();
+    case DateType.Minutes:
+      return date.getMinutes();
+    case DateType.Seconds:
+      return date.getSeconds();
+    case DateType.FractionalSeconds:
+      return date.getMilliseconds();
+    case DateType.Day:
+      return date.getDay();
+    default:
+      throw new Error(`Unknown DateType value "${part}".`);
+  }
+}
+
+/**
+ * Returns a date formatter that transforms a date into its locale string representation
+ */
+function dateStrGetter(
+    name: TranslationType, width: TranslationWidth, form: FormStyle = FormStyle.Format,
+    extended = false): DateFormatter {
+  return function(date: Date, locale: string): string {
+    return getDateTranslation(date, locale, name, width, form, extended);
+  };
+}
+
+/**
+ * Returns the locale translation of a date for a given form, type and width
+ */
+function getDateTranslation(
+    date: Date, locale: string, name: TranslationType, width: TranslationWidth, form: FormStyle,
+    extended: boolean) {
+  switch (name) {
+    case TranslationType.Months:
+      return getLocaleMonthNames(locale, form, width)[date.getMonth()];
+    case TranslationType.Days:
+      return getLocaleDayNames(locale, form, width)[date.getDay()];
+    case TranslationType.DayPeriods:
+      const currentHours = date.getHours();
+      const currentMinutes = date.getMinutes();
+      if (extended) {
+        const rules = getLocaleExtraDayPeriodRules(locale);
+        const dayPeriods = getLocaleExtraDayPeriods(locale, form, width);
+        let result;
+        rules.forEach((rule: Time | [Time, Time], index: number) => {
+          if (Array.isArray(rule)) {
+            // morning, afternoon, evening, night
+            const {hours: hoursFrom, minutes: minutesFrom} = rule[0];
+            const {hours: hoursTo, minutes: minutesTo} = rule[1];
+            if (currentHours >= hoursFrom && currentMinutes >= minutesFrom &&
+                (currentHours < hoursTo ||
+                 (currentHours === hoursTo && currentMinutes < minutesTo))) {
+              result = dayPeriods[index];
+            }
+          } else {  // noon or midnight
+            const {hours, minutes} = rule;
+            if (hours === currentHours && minutes === currentMinutes) {
+              result = dayPeriods[index];
+            }
+          }
+        });
+        if (result) {
+          return result;
+        }
+      }
+      // if no rules for the day periods, we use am/pm by default
+      return getLocaleDayPeriods(locale, form, <TranslationWidth>width)[currentHours < 12 ? 0 : 1];
+    case TranslationType.Eras:
+      return getLocaleEraNames(locale, <TranslationWidth>width)[date.getFullYear() <= 0 ? 0 : 1];
+    default:
+      // This default case is not needed by TypeScript compiler, as the switch is exhaustive.
+      // However Closure Compiler does not understand that and reports an error in typed mode.
+      // The `throw new Error` below works around the problem, and the unexpected: never variable
+      // makes sure tsc still checks this code is unreachable.
+      const unexpected: never = name;
+      throw new Error(`unexpected translation type ${unexpected}`);
+  }
+}
+
+/**
+ * Returns a date formatter that transforms a date and an offset into a timezone with ISO8601 or
+ * GMT format depending on the width (eg: short = +0430, short:GMT = GMT+4, long = GMT+04:30,
+ * extended = +04:30)
+ */
+function timeZoneGetter(width: ZoneWidth): DateFormatter {
+  return function(date: Date, locale: string, offset: number) {
+    const zone = -1 * offset;
+    const minusSign = getLocaleNumberSymbol(locale, NumberSymbol.MinusSign);
+    const hours = zone > 0 ? Math.floor(zone / 60) : Math.ceil(zone / 60);
+    switch (width) {
+      case ZoneWidth.Short:
+        return ((zone >= 0) ? '+' : '') + padNumber(hours, 2, minusSign) +
+            padNumber(Math.abs(zone % 60), 2, minusSign);
+      case ZoneWidth.ShortGMT:
+        return 'GMT' + ((zone >= 0) ? '+' : '') + padNumber(hours, 1, minusSign);
+      case ZoneWidth.Long:
+        return 'GMT' + ((zone >= 0) ? '+' : '') + padNumber(hours, 2, minusSign) + ':' +
+            padNumber(Math.abs(zone % 60), 2, minusSign);
+      case ZoneWidth.Extended:
+        if (offset === 0) {
+          return 'Z';
+        } else {
+          return ((zone >= 0) ? '+' : '') + padNumber(hours, 2, minusSign) + ':' +
+              padNumber(Math.abs(zone % 60), 2, minusSign);
+        }
+      default:
+        throw new Error(`Unknown zone width "${width}"`);
+    }
+  };
+}
+
+const JANUARY = 0;
+const THURSDAY = 4;
+function getFirstThursdayOfYear(year: number) {
+  const firstDayOfYear = (new Date(year, JANUARY, 1)).getDay();
+  return new Date(
+      year, 0, 1 + ((firstDayOfYear <= THURSDAY) ? THURSDAY : THURSDAY + 7) - firstDayOfYear);
+}
+
+function getThursdayThisWeek(datetime: Date) {
+  return new Date(
+      datetime.getFullYear(), datetime.getMonth(),
+      datetime.getDate() + (THURSDAY - datetime.getDay()));
+}
+
+function weekGetter(size: number, monthBased = false): DateFormatter {
+  return function(date: Date, locale: string) {
+    let result;
+    if (monthBased) {
+      const nbDaysBefore1stDayOfMonth =
+          new Date(date.getFullYear(), date.getMonth(), 1).getDay() - 1;
+      const today = date.getDate();
+      result = 1 + Math.floor((today + nbDaysBefore1stDayOfMonth) / 7);
+    } else {
+      const firstThurs = getFirstThursdayOfYear(date.getFullYear());
+      const thisThurs = getThursdayThisWeek(date);
+      const diff = thisThurs.getTime() - firstThurs.getTime();
+      result = 1 + Math.round(diff / 6.048e8);  // 6.048e8 ms per week
+    }
+
+    return padNumber(result, size, getLocaleNumberSymbol(locale, NumberSymbol.MinusSign));
+  };
+}
+
+type DateFormatter = (date: Date, locale: string, offset?: number) => string;
+
+const DATE_FORMATS: {[format: string]: DateFormatter} = {};
+
+// Based on CLDR formats:
+// See complete list: http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+// See also explanations: http://cldr.unicode.org/translation/date-time
+// TODO(ocombe): support all missing cldr formats: Y, U, Q, D, F, e, c, j, J, C, A, v, V, X, x
+function getDateFormatter(format: string): DateFormatter|null {
+  if (DATE_FORMATS[format]) {
+    return DATE_FORMATS[format];
+  }
+  let formatter;
+  switch (format) {
+    // Era name (AD/BC)
+    case 'G':
+    case 'GG':
+    case 'GGG':
+      formatter = dateStrGetter(TranslationType.Eras, TranslationWidth.Abbreviated);
+      break;
+    case 'GGGG':
+      formatter = dateStrGetter(TranslationType.Eras, TranslationWidth.Wide);
+      break;
+    case 'GGGGG':
+      formatter = dateStrGetter(TranslationType.Eras, TranslationWidth.Narrow);
+      break;
+
+    // 1 digit representation of the year, e.g. (AD 1 => 1, AD 199 => 199)
+    case 'y':
+      formatter = dateGetter(DateType.FullYear, 1, 0, false, true);
+      break;
+    // 2 digit representation of the year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
+    case 'yy':
+      formatter = dateGetter(DateType.FullYear, 2, 0, true, true);
+      break;
+    // 3 digit representation of the year, padded (000-999). (e.g. AD 2001 => 01, AD 2010 => 10)
+    case 'yyy':
+      formatter = dateGetter(DateType.FullYear, 3, 0, false, true);
+      break;
+    // 4 digit representation of the year (e.g. AD 1 => 0001, AD 2010 => 2010)
+    case 'yyyy':
+      formatter = dateGetter(DateType.FullYear, 4, 0, false, true);
+      break;
+
+    // Month of the year (1-12), numeric
+    case 'M':
+    case 'L':
+      formatter = dateGetter(DateType.Month, 1, 1);
+      break;
+    case 'MM':
+    case 'LL':
+      formatter = dateGetter(DateType.Month, 2, 1);
+      break;
+
+    // Month of the year (January, ...), string, format
+    case 'MMM':
+      formatter = dateStrGetter(TranslationType.Months, TranslationWidth.Abbreviated);
+      break;
+    case 'MMMM':
+      formatter = dateStrGetter(TranslationType.Months, TranslationWidth.Wide);
+      break;
+    case 'MMMMM':
+      formatter = dateStrGetter(TranslationType.Months, TranslationWidth.Narrow);
+      break;
+
+    // Month of the year (January, ...), string, standalone
+    case 'LLL':
+      formatter =
+          dateStrGetter(TranslationType.Months, TranslationWidth.Abbreviated, FormStyle.Standalone);
+      break;
+    case 'LLLL':
+      formatter =
+          dateStrGetter(TranslationType.Months, TranslationWidth.Wide, FormStyle.Standalone);
+      break;
+    case 'LLLLL':
+      formatter =
+          dateStrGetter(TranslationType.Months, TranslationWidth.Narrow, FormStyle.Standalone);
+      break;
+
+    // Week of the year (1, ... 52)
+    case 'w':
+      formatter = weekGetter(1);
+      break;
+    case 'ww':
+      formatter = weekGetter(2);
+      break;
+
+    // Week of the month (1, ...)
+    case 'W':
+      formatter = weekGetter(1, true);
+      break;
+
+    // Day of the month (1-31)
+    case 'd':
+      formatter = dateGetter(DateType.Date, 1);
+      break;
+    case 'dd':
+      formatter = dateGetter(DateType.Date, 2);
+      break;
+
+    // Day of the Week
+    case 'E':
+    case 'EE':
+    case 'EEE':
+      formatter = dateStrGetter(TranslationType.Days, TranslationWidth.Abbreviated);
+      break;
+    case 'EEEE':
+      formatter = dateStrGetter(TranslationType.Days, TranslationWidth.Wide);
+      break;
+    case 'EEEEE':
+      formatter = dateStrGetter(TranslationType.Days, TranslationWidth.Narrow);
+      break;
+    case 'EEEEEE':
+      formatter = dateStrGetter(TranslationType.Days, TranslationWidth.Short);
+      break;
+
+    // Generic period of the day (am-pm)
+    case 'a':
+    case 'aa':
+    case 'aaa':
+      formatter = dateStrGetter(TranslationType.DayPeriods, TranslationWidth.Abbreviated);
+      break;
+    case 'aaaa':
+      formatter = dateStrGetter(TranslationType.DayPeriods, TranslationWidth.Wide);
+      break;
+    case 'aaaaa':
+      formatter = dateStrGetter(TranslationType.DayPeriods, TranslationWidth.Narrow);
+      break;
+
+    // Extended period of the day (midnight, at night, ...), standalone
+    case 'b':
+    case 'bb':
+    case 'bbb':
+      formatter = dateStrGetter(
+          TranslationType.DayPeriods, TranslationWidth.Abbreviated, FormStyle.Standalone, true);
+      break;
+    case 'bbbb':
+      formatter = dateStrGetter(
+          TranslationType.DayPeriods, TranslationWidth.Wide, FormStyle.Standalone, true);
+      break;
+    case 'bbbbb':
+      formatter = dateStrGetter(
+          TranslationType.DayPeriods, TranslationWidth.Narrow, FormStyle.Standalone, true);
+      break;
+
+    // Extended period of the day (midnight, night, ...), standalone
+    case 'B':
+    case 'BB':
+    case 'BBB':
+      formatter = dateStrGetter(
+          TranslationType.DayPeriods, TranslationWidth.Abbreviated, FormStyle.Format, true);
+      break;
+    case 'BBBB':
+      formatter =
+          dateStrGetter(TranslationType.DayPeriods, TranslationWidth.Wide, FormStyle.Format, true);
+      break;
+    case 'BBBBB':
+      formatter = dateStrGetter(
+          TranslationType.DayPeriods, TranslationWidth.Narrow, FormStyle.Format, true);
+      break;
+
+    // Hour in AM/PM, (1-12)
+    case 'h':
+      formatter = dateGetter(DateType.Hours, 1, -12);
+      break;
+    case 'hh':
+      formatter = dateGetter(DateType.Hours, 2, -12);
+      break;
+
+    // Hour of the day (0-23)
+    case 'H':
+      formatter = dateGetter(DateType.Hours, 1);
+      break;
+    // Hour in day, padded (00-23)
+    case 'HH':
+      formatter = dateGetter(DateType.Hours, 2);
+      break;
+
+    // Minute of the hour (0-59)
+    case 'm':
+      formatter = dateGetter(DateType.Minutes, 1);
+      break;
+    case 'mm':
+      formatter = dateGetter(DateType.Minutes, 2);
+      break;
+
+    // Second of the minute (0-59)
+    case 's':
+      formatter = dateGetter(DateType.Seconds, 1);
+      break;
+    case 'ss':
+      formatter = dateGetter(DateType.Seconds, 2);
+      break;
+
+    // Fractional second
+    case 'S':
+      formatter = dateGetter(DateType.FractionalSeconds, 1);
+      break;
+    case 'SS':
+      formatter = dateGetter(DateType.FractionalSeconds, 2);
+      break;
+    case 'SSS':
+      formatter = dateGetter(DateType.FractionalSeconds, 3);
+      break;
+
+
+    // Timezone ISO8601 short format (-0430)
+    case 'Z':
+    case 'ZZ':
+    case 'ZZZ':
+      formatter = timeZoneGetter(ZoneWidth.Short);
+      break;
+    // Timezone ISO8601 extended format (-04:30)
+    case 'ZZZZZ':
+      formatter = timeZoneGetter(ZoneWidth.Extended);
+      break;
+
+    // Timezone GMT short format (GMT+4)
+    case 'O':
+    case 'OO':
+    case 'OOO':
+    // Should be location, but fallback to format O instead because we don't have the data yet
+    case 'z':
+    case 'zz':
+    case 'zzz':
+      formatter = timeZoneGetter(ZoneWidth.ShortGMT);
+      break;
+    // Timezone GMT long format (GMT+0430)
+    case 'OOOO':
+    case 'ZZZZ':
+    // Should be location, but fallback to format O instead because we don't have the data yet
+    case 'zzzz':
+      formatter = timeZoneGetter(ZoneWidth.Long);
+      break;
+    default:
+      return null;
+  }
+  DATE_FORMATS[format] = formatter;
+  return formatter;
+}
+
+function timezoneToOffset(timezone: string, fallback: number): number {
+  // Support: IE 9-11 only, Edge 13-15+
+  // IE/Edge do not "understand" colon (`:`) in timezone
+  timezone = timezone.replace(/:/g, '');
+  const requestedTimezoneOffset = Date.parse('Jan 01, 1970 00:00:00 ' + timezone) / 60000;
+  return isNaN(requestedTimezoneOffset) ? fallback : requestedTimezoneOffset;
+}
+
+function addDateMinutes(date: Date, minutes: number) {
+  date = new Date(date.getTime());
+  date.setMinutes(date.getMinutes() + minutes);
+  return date;
+}
+
+function convertTimezoneToLocal(date: Date, timezone: string, reverse: boolean): Date {
+  const reverseValue = reverse ? -1 : 1;
+  const dateTimezoneOffset = date.getTimezoneOffset();
+  const timezoneOffset = timezoneToOffset(timezone, dateTimezoneOffset);
+  return addDateMinutes(date, reverseValue * (timezoneOffset - dateTimezoneOffset));
+}
+
+/**
+ * Converts a value to date.
+ *
+ * Supported input formats:
+ * - `Date`
+ * - number: timestamp
+ * - string: numeric (e.g. "1234"), ISO and date strings in a format supported by
+ *   [Date.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse).
+ *   Note: ISO strings without time return a date without timeoffset.
+ *
+ * Throws if unable to convert to a date.
+ */
+export function toDate(value: string | number | Date): Date {
+  if (isDate(value)) {
+    return value;
+  }
+
+  if (typeof value === 'number' && !isNaN(value)) {
+    return new Date(value);
+  }
+
+  if (typeof value === 'string') {
+    value = value.trim();
+
+    const parsedNb = parseFloat(value);
+
+    // any string that only contains numbers, like "1234" but not like "1234hello"
+    if (!isNaN(value as any - parsedNb)) {
+      return new Date(parsedNb);
+    }
+
+    if (/^(\d{4}-\d{1,2}-\d{1,2})$/.test(value)) {
+      /* For ISO Strings without time the day, month and year must be extracted from the ISO String
+      before Date creation to avoid time offset and errors in the new Date.
+      If we only replace '-' with ',' in the ISO String ("2015,01,01"), and try to create a new
+      date, some browsers (e.g. IE 9) will throw an invalid Date error.
+      If we leave the '-' ("2015-01-01") and try to create a new Date("2015-01-01") the timeoffset
+      is applied.
+      Note: ISO months are 0 for January, 1 for February, ... */
+      const [y, m, d] = value.split('-').map((val: string) => +val);
+      return new Date(y, m - 1, d);
+    }
+
+    let match: RegExpMatchArray|null;
+    if (match = value.match(ISO8601_DATE_REGEX)) {
+      return isoStringToDate(match);
+    }
+  }
+
+  const date = new Date(value as any);
+  if (!isDate(date)) {
+    throw new Error(`Unable to convert "${value}" into a date`);
+  }
+  return date;
+}
+
+/**
+ * Converts a date in ISO8601 to a Date.
+ * Used instead of `Date.parse` because of browser discrepancies.
+ */
+export function isoStringToDate(match: RegExpMatchArray): Date {
+  const date = new Date(0);
+  let tzHour = 0;
+  let tzMin = 0;
+
+  // match[8] means that the string contains "Z" (UTC) or a timezone like "+01:00" or "+0100"
+  const dateSetter = match[8] ? date.setUTCFullYear : date.setFullYear;
+  const timeSetter = match[8] ? date.setUTCHours : date.setHours;
+
+  // if there is a timezone defined like "+01:00" or "+0100"
+  if (match[9]) {
+    tzHour = Number(match[9] + match[10]);
+    tzMin = Number(match[9] + match[11]);
+  }
+  dateSetter.call(date, Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+  const h = Number(match[4] || 0) - tzHour;
+  const m = Number(match[5] || 0) - tzMin;
+  const s = Number(match[6] || 0);
+  const ms = Math.round(parseFloat('0.' + (match[7] || 0)) * 1000);
+  timeSetter.call(date, h, m, s, ms);
+  return date;
+}
+
+export function isDate(value: any): value is Date {
+  return value instanceof Date && !isNaN(value.valueOf());
+}
diff --git a/packages/common/src/i18n/format_number.ts b/packages/common/src/i18n/format_number.ts
new file mode 100644
index 000000000000..b528e5f4c3a9
--- /dev/null
+++ b/packages/common/src/i18n/format_number.ts
@@ -0,0 +1,449 @@
+/**
+ * @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 {NumberFormatStyle, NumberSymbol, getLocaleNumberFormat, getLocaleNumberSymbol, getNumberOfCurrencyDigits} from './locale_data_api';
+
+export const NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;
+const MAX_DIGITS = 22;
+const DECIMAL_SEP = '.';
+const ZERO_CHAR = '0';
+const PATTERN_SEP = ';';
+const GROUP_SEP = ',';
+const DIGIT_CHAR = '#';
+const CURRENCY_CHAR = '¤';
+const PERCENT_CHAR = '%';
+
+/**
+ * Transforms a number to a locale string based on a style and a format
+ */
+function formatNumberToLocaleString(
+    value: number, pattern: ParsedNumberFormat, locale: string, groupSymbol: NumberSymbol,
+    decimalSymbol: NumberSymbol, digitsInfo?: string, isPercent = false): string {
+  let formattedText = '';
+  let isZero = false;
+
+  if (!isFinite(value)) {
+    formattedText = getLocaleNumberSymbol(locale, NumberSymbol.Infinity);
+  } else {
+    let parsedNumber = parseNumber(value);
+
+    if (isPercent) {
+      parsedNumber = toPercent(parsedNumber);
+    }
+
+    let minInt = pattern.minInt;
+    let minFraction = pattern.minFrac;
+    let maxFraction = pattern.maxFrac;
+
+    if (digitsInfo) {
+      const parts = digitsInfo.match(NUMBER_FORMAT_REGEXP);
+      if (parts === null) {
+        throw new Error(`${digitsInfo} is not a valid digit info`);
+      }
+      const minIntPart = parts[1];
+      const minFractionPart = parts[3];
+      const maxFractionPart = parts[5];
+      if (minIntPart != null) {
+        minInt = parseIntAutoRadix(minIntPart);
+      }
+      if (minFractionPart != null) {
+        minFraction = parseIntAutoRadix(minFractionPart);
+      }
+      if (maxFractionPart != null) {
+        maxFraction = parseIntAutoRadix(maxFractionPart);
+      } else if (minFractionPart != null && minFraction > maxFraction) {
+        maxFraction = minFraction;
+      }
+    }
+
+    roundNumber(parsedNumber, minFraction, maxFraction);
+
+    let digits = parsedNumber.digits;
+    let integerLen = parsedNumber.integerLen;
+    const exponent = parsedNumber.exponent;
+    let decimals = [];
+    isZero = digits.every(d => !d);
+
+    // pad zeros for small numbers
+    for (; integerLen < minInt; integerLen++) {
+      digits.unshift(0);
+    }
+
+    // pad zeros for small numbers
+    for (; integerLen < 0; integerLen++) {
+      digits.unshift(0);
+    }
+
+    // extract decimals digits
+    if (integerLen > 0) {
+      decimals = digits.splice(integerLen, digits.length);
+    } else {
+      decimals = digits;
+      digits = [0];
+    }
+
+    // format the integer digits with grouping separators
+    const groups = [];
+    if (digits.length >= pattern.lgSize) {
+      groups.unshift(digits.splice(-pattern.lgSize, digits.length).join(''));
+    }
+
+    while (digits.length > pattern.gSize) {
+      groups.unshift(digits.splice(-pattern.gSize, digits.length).join(''));
+    }
+
+    if (digits.length) {
+      groups.unshift(digits.join(''));
+    }
+
+    formattedText = groups.join(getLocaleNumberSymbol(locale, groupSymbol));
+
+    // append the decimal digits
+    if (decimals.length) {
+      formattedText += getLocaleNumberSymbol(locale, decimalSymbol) + decimals.join('');
+    }
+
+    if (exponent) {
+      formattedText += getLocaleNumberSymbol(locale, NumberSymbol.Exponential) + '+' + exponent;
+    }
+  }
+
+  if (value < 0 && !isZero) {
+    formattedText = pattern.negPre + formattedText + pattern.negSuf;
+  } else {
+    formattedText = pattern.posPre + formattedText + pattern.posSuf;
+  }
+
+  return formattedText;
+}
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Formats a number as currency using locale rules.
+ *
+ * Use `currency` to format a number as currency.
+ *
+ * Where:
+ * - `value` is a number.
+ * - `locale` is a `string` defining the locale to use.
+ * - `currency` is the string that represents the currency, it can be its symbol or its name.
+ * - `currencyCode` is the [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code, such
+ *    as `USD` for the US dollar and `EUR` for the euro.
+ * - `digitInfo` See {@link DecimalPipe} for more details.
+ *
+ *
+ */
+export function formatCurrency(
+    value: number, locale: string, currency: string, currencyCode?: string,
+    digitsInfo?: string): string {
+  const format = getLocaleNumberFormat(locale, NumberFormatStyle.Currency);
+  const pattern = parseNumberFormat(format, getLocaleNumberSymbol(locale, NumberSymbol.MinusSign));
+
+  pattern.minFrac = getNumberOfCurrencyDigits(currencyCode !);
+  pattern.maxFrac = pattern.minFrac;
+
+  const res = formatNumberToLocaleString(
+      value, pattern, locale, NumberSymbol.CurrencyGroup, NumberSymbol.CurrencyDecimal, digitsInfo);
+  return res
+      .replace(CURRENCY_CHAR, currency)
+      // if we have 2 time the currency character, the second one is ignored
+      .replace(CURRENCY_CHAR, '');
+}
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Formats a number as a percentage according to locale rules.
+ *
+ * Where:
+ * - `value` is a number.
+ * - `locale` is a `string` defining the locale to use.
+ * - `digitInfo` See {@link DecimalPipe} for more details.
+ *
+ *
+ */
+export function formatPercent(value: number, locale: string, digitsInfo?: string): string {
+  const format = getLocaleNumberFormat(locale, NumberFormatStyle.Percent);
+  const pattern = parseNumberFormat(format, getLocaleNumberSymbol(locale, NumberSymbol.MinusSign));
+  const res = formatNumberToLocaleString(
+      value, pattern, locale, NumberSymbol.Group, NumberSymbol.Decimal, digitsInfo, true);
+  return res.replace(
+      new RegExp(PERCENT_CHAR, 'g'), getLocaleNumberSymbol(locale, NumberSymbol.PercentSign));
+}
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Formats a number as text. Group sizing and separator and other locale-specific
+ * configurations are based on the locale.
+ *
+ * Where:
+ * - `value` is a number.
+ * - `locale` is a `string` defining the locale to use.
+ * - `digitInfo` See {@link DecimalPipe} for more details.
+ *
+ *
+ */
+export function formatNumber(value: number, locale: string, digitsInfo?: string): string {
+  const format = getLocaleNumberFormat(locale, NumberFormatStyle.Decimal);
+  const pattern = parseNumberFormat(format, getLocaleNumberSymbol(locale, NumberSymbol.MinusSign));
+  return formatNumberToLocaleString(
+      value, pattern, locale, NumberSymbol.Group, NumberSymbol.Decimal, digitsInfo);
+}
+
+interface ParsedNumberFormat {
+  minInt: number;
+  // the minimum number of digits required in the fraction part of the number
+  minFrac: number;
+  // the maximum number of digits required in the fraction part of the number
+  maxFrac: number;
+  // the prefix for a positive number
+  posPre: string;
+  // the suffix for a positive number
+  posSuf: string;
+  // the prefix for a negative number (e.g. `-` or `(`))
+  negPre: string;
+  // the suffix for a negative number (e.g. `)`)
+  negSuf: string;
+  // number of digits in each group of separated digits
+  gSize: number;
+  // number of digits in the last group of digits before the decimal separator
+  lgSize: number;
+}
+
+function parseNumberFormat(format: string, minusSign = '-'): ParsedNumberFormat {
+  const p = {
+    minInt: 1,
+    minFrac: 0,
+    maxFrac: 0,
+    posPre: '',
+    posSuf: '',
+    negPre: '',
+    negSuf: '',
+    gSize: 0,
+    lgSize: 0
+  };
+
+  const patternParts = format.split(PATTERN_SEP);
+  const positive = patternParts[0];
+  const negative = patternParts[1];
+
+  const positiveParts = positive.indexOf(DECIMAL_SEP) !== -1 ?
+      positive.split(DECIMAL_SEP) :
+      [
+        positive.substring(0, positive.lastIndexOf(ZERO_CHAR) + 1),
+        positive.substring(positive.lastIndexOf(ZERO_CHAR) + 1)
+      ],
+        integer = positiveParts[0], fraction = positiveParts[1] || '';
+
+  p.posPre = integer.substr(0, integer.indexOf(DIGIT_CHAR));
+
+  for (let i = 0; i < fraction.length; i++) {
+    const ch = fraction.charAt(i);
+    if (ch === ZERO_CHAR) {
+      p.minFrac = p.maxFrac = i + 1;
+    } else if (ch === DIGIT_CHAR) {
+      p.maxFrac = i + 1;
+    } else {
+      p.posSuf += ch;
+    }
+  }
+
+  const groups = integer.split(GROUP_SEP);
+  p.gSize = groups[1] ? groups[1].length : 0;
+  p.lgSize = (groups[2] || groups[1]) ? (groups[2] || groups[1]).length : 0;
+
+  if (negative) {
+    const trunkLen = positive.length - p.posPre.length - p.posSuf.length,
+          pos = negative.indexOf(DIGIT_CHAR);
+
+    p.negPre = negative.substr(0, pos).replace(/'/g, '');
+    p.negSuf = negative.substr(pos + trunkLen).replace(/'/g, '');
+  } else {
+    p.negPre = minusSign + p.posPre;
+    p.negSuf = p.posSuf;
+  }
+
+  return p;
+}
+
+interface ParsedNumber {
+  // an array of digits containing leading zeros as necessary
+  digits: number[];
+  // the exponent for numbers that would need more than `MAX_DIGITS` digits in `d`
+  exponent: number;
+  // the number of the digits in `d` that are to the left of the decimal point
+  integerLen: number;
+}
+
+// Transforms a parsed number into a percentage by multiplying it by 100
+function toPercent(parsedNumber: ParsedNumber): ParsedNumber {
+  // if the number is 0, don't do anything
+  if (parsedNumber.digits[0] === 0) {
+    return parsedNumber;
+  }
+
+  // Getting the current number of decimals
+  const fractionLen = parsedNumber.digits.length - parsedNumber.integerLen;
+  if (parsedNumber.exponent) {
+    parsedNumber.exponent += 2;
+  } else {
+    if (fractionLen === 0) {
+      parsedNumber.digits.push(0, 0);
+    } else if (fractionLen === 1) {
+      parsedNumber.digits.push(0);
+    }
+    parsedNumber.integerLen += 2;
+  }
+
+  return parsedNumber;
+}
+
+/**
+ * Parses a number.
+ * Significant bits of this parse algorithm came from https://github.com/MikeMcl/big.js/
+ */
+function parseNumber(num: number): ParsedNumber {
+  let numStr = Math.abs(num) + '';
+  let exponent = 0, digits, integerLen;
+  let i, j, zeros;
+
+  // Decimal point?
+  if ((integerLen = numStr.indexOf(DECIMAL_SEP)) > -1) {
+    numStr = numStr.replace(DECIMAL_SEP, '');
+  }
+
+  // Exponential form?
+  if ((i = numStr.search(/e/i)) > 0) {
+    // Work out the exponent.
+    if (integerLen < 0) integerLen = i;
+    integerLen += +numStr.slice(i + 1);
+    numStr = numStr.substring(0, i);
+  } else if (integerLen < 0) {
+    // There was no decimal point or exponent so it is an integer.
+    integerLen = numStr.length;
+  }
+
+  // Count the number of leading zeros.
+  for (i = 0; numStr.charAt(i) === ZERO_CHAR; i++) { /* empty */
+  }
+
+  if (i === (zeros = numStr.length)) {
+    // The digits are all zero.
+    digits = [0];
+    integerLen = 1;
+  } else {
+    // Count the number of trailing zeros
+    zeros--;
+    while (numStr.charAt(zeros) === ZERO_CHAR) zeros--;
+
+    // Trailing zeros are insignificant so ignore them
+    integerLen -= i;
+    digits = [];
+    // Convert string to array of digits without leading/trailing zeros.
+    for (j = 0; i <= zeros; i++, j++) {
+      digits[j] = Number(numStr.charAt(i));
+    }
+  }
+
+  // If the number overflows the maximum allowed digits then use an exponent.
+  if (integerLen > MAX_DIGITS) {
+    digits = digits.splice(0, MAX_DIGITS - 1);
+    exponent = integerLen - 1;
+    integerLen = 1;
+  }
+
+  return {digits, exponent, integerLen};
+}
+
+/**
+ * Round the parsed number to the specified number of decimal places
+ * This function changes the parsedNumber in-place
+ */
+function roundNumber(parsedNumber: ParsedNumber, minFrac: number, maxFrac: number) {
+  if (minFrac > maxFrac) {
+    throw new Error(
+        `The minimum number of digits after fraction (${minFrac}) is higher than the maximum (${maxFrac}).`);
+  }
+
+  let digits = parsedNumber.digits;
+  let fractionLen = digits.length - parsedNumber.integerLen;
+  const fractionSize = Math.min(Math.max(minFrac, fractionLen), maxFrac);
+
+  // The index of the digit to where rounding is to occur
+  let roundAt = fractionSize + parsedNumber.integerLen;
+  let digit = digits[roundAt];
+
+  if (roundAt > 0) {
+    // Drop fractional digits beyond `roundAt`
+    digits.splice(Math.max(parsedNumber.integerLen, roundAt));
+
+    // Set non-fractional digits beyond `roundAt` to 0
+    for (let j = roundAt; j < digits.length; j++) {
+      digits[j] = 0;
+    }
+  } else {
+    // We rounded to zero so reset the parsedNumber
+    fractionLen = Math.max(0, fractionLen);
+    parsedNumber.integerLen = 1;
+    digits.length = Math.max(1, roundAt = fractionSize + 1);
+    digits[0] = 0;
+    for (let i = 1; i < roundAt; i++) digits[i] = 0;
+  }
+
+  if (digit >= 5) {
+    if (roundAt - 1 < 0) {
+      for (let k = 0; k > roundAt; k--) {
+        digits.unshift(0);
+        parsedNumber.integerLen++;
+      }
+      digits.unshift(1);
+      parsedNumber.integerLen++;
+    } else {
+      digits[roundAt - 1]++;
+    }
+  }
+
+  // Pad out with zeros to get the required fraction length
+  for (; fractionLen < Math.max(0, fractionSize); fractionLen++) digits.push(0);
+
+  let dropTrailingZeros = fractionSize !== 0;
+  // Minimal length = nb of decimals required + current nb of integers
+  // Any number besides that is optional and can be removed if it's a trailing 0
+  const minLen = minFrac + parsedNumber.integerLen;
+  // Do any carrying, e.g. a digit was rounded up to 10
+  const carry = digits.reduceRight(function(carry, d, i, digits) {
+    d = d + carry;
+    digits[i] = d < 10 ? d : d - 10;  // d % 10
+    if (dropTrailingZeros) {
+      // Do not keep meaningless fractional trailing zeros (e.g. 15.52000 --> 15.52)
+      if (digits[i] === 0 && i >= minLen) {
+        digits.pop();
+      } else {
+        dropTrailingZeros = false;
+      }
+    }
+    return d >= 10 ? 1 : 0;  // Math.floor(d / 10);
+  }, 0);
+  if (carry) {
+    digits.unshift(carry);
+    parsedNumber.integerLen++;
+  }
+}
+
+export function parseIntAutoRadix(text: string): number {
+  const result: number = parseInt(text);
+  if (isNaN(result)) {
+    throw new Error('Invalid integer literal when parsing ' + text);
+  }
+  return result;
+}
diff --git a/packages/common/src/i18n/locale_data.ts b/packages/common/src/i18n/locale_data.ts
new file mode 100644
index 000000000000..d638d26bc3f7
--- /dev/null
+++ b/packages/common/src/i18n/locale_data.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
+ */
+
+/**
+ * @experimental i18n support is experimental.
+ */
+export const LOCALE_DATA: {[localeId: string]: any} = {};
+
+/**
+ * Register global data to be used internally by Angular. See the
+ * ["I18n guide"](guide/i18n#i18n-pipes) to know how to import additional locale data.
+ *
+ * @experimental i18n support is experimental.
+ */
+// The signature registerLocaleData(data: any, extraData?: any) is deprecated since v5.1
+export function registerLocaleData(data: any, localeId?: string | any, extraData?: any): void {
+  if (typeof localeId !== 'string') {
+    extraData = localeId;
+    localeId = data[LocaleDataIndex.LocaleId];
+  }
+
+  localeId = localeId.toLowerCase().replace(/_/g, '-');
+
+  LOCALE_DATA[localeId] = data;
+
+  if (extraData) {
+    LOCALE_DATA[localeId][LocaleDataIndex.ExtraData] = extraData;
+  }
+}
+
+/**
+ * Index of each type of locale data from the locale data array
+ */
+export const enum LocaleDataIndex {
+  LocaleId = 0,
+  DayPeriodsFormat,
+  DayPeriodsStandalone,
+  DaysFormat,
+  DaysStandalone,
+  MonthsFormat,
+  MonthsStandalone,
+  Eras,
+  FirstDayOfWeek,
+  WeekendRange,
+  DateFormat,
+  TimeFormat,
+  DateTimeFormat,
+  NumberSymbols,
+  NumberFormats,
+  CurrencySymbol,
+  CurrencyName,
+  Currencies,
+  PluralCase,
+  ExtraData
+}
+
+/**
+ * Index of each type of locale data from the extra locale data array
+ */
+export const enum ExtraLocaleDataIndex {
+  ExtraDayPeriodFormats = 0,
+  ExtraDayPeriodStandalone,
+  ExtraDayPeriodsRules
+}
+
+/**
+ * Index of each value in currency data (used to describe CURRENCIES_EN in currencies.ts)
+ */
+export const enum CurrencyIndex {Symbol = 0, SymbolNarrow, NbOfDigits}
diff --git a/packages/common/src/i18n/locale_data_api.ts b/packages/common/src/i18n/locale_data_api.ts
new file mode 100644
index 000000000000..cbfd90f11736
--- /dev/null
+++ b/packages/common/src/i18n/locale_data_api.ts
@@ -0,0 +1,570 @@
+/**
+ * @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 localeEn from './locale_en';
+import {LOCALE_DATA, LocaleDataIndex, ExtraLocaleDataIndex, CurrencyIndex} from './locale_data';
+import {CURRENCIES_EN, CurrenciesSymbols} from './currencies';
+
+/**
+ * The different format styles that can be used to represent numbers.
+ * Used by the function {@link getLocaleNumberFormat}.
+ *
+ * @experimental i18n support is experimental.
+ */
+export enum NumberFormatStyle {
+  Decimal,
+  Percent,
+  Currency,
+  Scientific
+}
+
+/** @experimental */
+export enum Plural {
+  Zero = 0,
+  One = 1,
+  Two = 2,
+  Few = 3,
+  Many = 4,
+  Other = 5,
+}
+
+/**
+ * Some languages use two different forms of strings (standalone and format) depending on the
+ * context.
+ * Typically the standalone version is the nominative form of the word, and the format version is in
+ * the genitive.
+ * See [the CLDR website](http://cldr.unicode.org/translation/date-time) for more information.
+ *
+ * @experimental i18n support is experimental.
+ */
+export enum FormStyle {
+  Format,
+  Standalone
+}
+
+/**
+ * Multiple widths are available for translations: narrow (1 character), abbreviated (3 characters),
+ * wide (full length), and short (2 characters, only for days).
+ *
+ * For example the day `Sunday` will be:
+ * - Narrow: `S`
+ * - Short: `Su`
+ * - Abbreviated: `Sun`
+ * - Wide: `Sunday`
+ *
+ * @experimental i18n support is experimental.
+ */
+export enum TranslationWidth {
+  Narrow,
+  Abbreviated,
+  Wide,
+  Short
+}
+
+/**
+ * Multiple widths are available for formats: short (minimal amount of data), medium (small amount
+ * of data), long (complete amount of data), full (complete amount of data and extra information).
+ *
+ * For example the date-time formats for the english locale will be:
+ *  - `'short'`: `'M/d/yy, h:mm a'` (e.g. `6/15/15, 9:03 AM`)
+ *  - `'medium'`: `'MMM d, y, h:mm:ss a'` (e.g. `Jun 15, 2015, 9:03:01 AM`)
+ *  - `'long'`: `'MMMM d, y, h:mm:ss a z'` (e.g. `June 15, 2015 at 9:03:01 AM GMT+1`)
+ *  - `'full'`: `'EEEE, MMMM d, y, h:mm:ss a zzzz'` (e.g. `Monday, June 15, 2015 at
+ * 9:03:01 AM GMT+01:00`)
+ *
+ * @experimental i18n support is experimental.
+ */
+export enum FormatWidth {
+  Short,
+  Medium,
+  Long,
+  Full
+}
+
+/**
+ * Number symbol that can be used to replace placeholders in number patterns.
+ * The placeholders are based on english values:
+ *
+ * | Name                   | Example for en-US | Meaning                                     |
+ * |------------------------|-------------------|---------------------------------------------|
+ * | decimal                | 2,345`.`67        | decimal separator                           |
+ * | group                  | 2`,`345.67        | grouping separator, typically for thousands |
+ * | plusSign               | `+`23             | the plus sign used with numbers             |
+ * | minusSign              | `-`23             | the minus sign used with numbers            |
+ * | percentSign            | 23.4`%`           | the percent sign (out of 100)               |
+ * | perMille               | 234`‰`            | the permille sign (out of 1000)             |
+ * | exponential            | 1.2`E`3           | used in computers for 1.2×10³.              |
+ * | superscriptingExponent | 1.2`×`103         | human-readable format of exponential        |
+ * | infinity               | `∞`               | used in +∞ and -∞.                          |
+ * | nan                    | `NaN`             | "not a number".                             |
+ * | timeSeparator          | 10`:`52           | symbol used between time units              |
+ * | currencyDecimal        | $2,345`.`67       | decimal separator, fallback to "decimal"    |
+ * | currencyGroup          | $2`,`345.67       | grouping separator, fallback to "group"     |
+ *
+ * @experimental i18n support is experimental.
+ */
+export enum NumberSymbol {
+  Decimal,
+  Group,
+  List,
+  PercentSign,
+  PlusSign,
+  MinusSign,
+  Exponential,
+  SuperscriptingExponent,
+  PerMille,
+  Infinity,
+  NaN,
+  TimeSeparator,
+  CurrencyDecimal,
+  CurrencyGroup
+}
+
+/**
+ * The value for each day of the week, based on the en-US locale
+ *
+ * @experimental
+ */
+export enum WeekDay {
+  Sunday = 0,
+  Monday,
+  Tuesday,
+  Wednesday,
+  Thursday,
+  Friday,
+  Saturday
+}
+
+/**
+ * The locale id for the chosen locale (e.g `en-GB`).
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleId(locale: string): string {
+  return findLocaleData(locale)[LocaleDataIndex.LocaleId];
+}
+
+/**
+ * Periods of the day (e.g. `[AM, PM]` for en-US).
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleDayPeriods(
+    locale: string, formStyle: FormStyle, width: TranslationWidth): [string, string] {
+  const data = findLocaleData(locale);
+  const amPmData = <[
+    string, string
+  ][][]>[data[LocaleDataIndex.DayPeriodsFormat], data[LocaleDataIndex.DayPeriodsStandalone]];
+  const amPm = getLastDefinedValue(amPmData, formStyle);
+  return getLastDefinedValue(amPm, width);
+}
+
+/**
+ * Days of the week for the Gregorian calendar (e.g. `[Sunday, Monday, ... Saturday]` for en-US).
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleDayNames(
+    locale: string, formStyle: FormStyle, width: TranslationWidth): string[] {
+  const data = findLocaleData(locale);
+  const daysData =
+      <string[][][]>[data[LocaleDataIndex.DaysFormat], data[LocaleDataIndex.DaysStandalone]];
+  const days = getLastDefinedValue(daysData, formStyle);
+  return getLastDefinedValue(days, width);
+}
+
+/**
+ * Months of the year for the Gregorian calendar (e.g. `[January, February, ...]` for en-US).
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleMonthNames(
+    locale: string, formStyle: FormStyle, width: TranslationWidth): string[] {
+  const data = findLocaleData(locale);
+  const monthsData =
+      <string[][][]>[data[LocaleDataIndex.MonthsFormat], data[LocaleDataIndex.MonthsStandalone]];
+  const months = getLastDefinedValue(monthsData, formStyle);
+  return getLastDefinedValue(months, width);
+}
+
+/**
+ * Eras for the Gregorian calendar (e.g. AD/BC).
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleEraNames(locale: string, width: TranslationWidth): [string, string] {
+  const data = findLocaleData(locale);
+  const erasData = <[string, string][]>data[LocaleDataIndex.Eras];
+  return getLastDefinedValue(erasData, width);
+}
+
+/**
+ * First day of the week for this locale, based on english days (Sunday = 0, Monday = 1, ...).
+ * For example in french the value would be 1 because the first day of the week is Monday.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleFirstDayOfWeek(locale: string): WeekDay {
+  const data = findLocaleData(locale);
+  return data[LocaleDataIndex.FirstDayOfWeek];
+}
+
+/**
+ * Range of days in the week that represent the week-end for this locale, based on english days
+ * (Sunday = 0, Monday = 1, ...).
+ * For example in english the value would be [6,0] for Saturday to Sunday.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleWeekEndRange(locale: string): [WeekDay, WeekDay] {
+  const data = findLocaleData(locale);
+  return data[LocaleDataIndex.WeekendRange];
+}
+
+/**
+ * Date format that depends on the locale.
+ *
+ * There are four basic date formats:
+ * - `full` should contain long-weekday (EEEE), year (y), long-month (MMMM), day (d).
+ *
+ *  For example, English uses `EEEE, MMMM d, y`, corresponding to a date like
+ *  "Tuesday, September 14, 1999".
+ *
+ * - `long` should contain year, long-month, day.
+ *
+ *  For example, `MMMM d, y`, corresponding to a date like "September 14, 1999".
+ *
+ * - `medium` should contain year, abbreviated-month (MMM), day.
+ *
+ *  For example, `MMM d, y`, corresponding to a date like "Sep 14, 1999".
+ *  For languages that do not use abbreviated months, use the numeric month (MM/M). For example,
+ *  `y/MM/dd`, corresponding to a date like "1999/09/14".
+ *
+ * - `short` should contain year, numeric-month (MM/M), and day.
+ *
+ *  For example, `M/d/yy`, corresponding to a date like "9/14/99".
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleDateFormat(locale: string, width: FormatWidth): string {
+  const data = findLocaleData(locale);
+  return getLastDefinedValue(data[LocaleDataIndex.DateFormat], width);
+}
+
+/**
+ * Time format that depends on the locale.
+ *
+ * The standard formats include four basic time formats:
+ * - `full` should contain hour (h/H), minute (mm), second (ss), and zone (zzzz).
+ * - `long` should contain hour, minute, second, and zone (z)
+ * - `medium` should contain hour, minute, second.
+ * - `short` should contain hour, minute.
+ *
+ * Note: The patterns depend on whether the main country using your language uses 12-hour time or
+ * not:
+ * - For 12-hour time, use a pattern like `hh:mm a` using h to mean a 12-hour clock cycle running
+ * 1 through 12 (midnight plus 1 minute is 12:01), or using K to mean a 12-hour clock cycle
+ * running 0 through 11 (midnight plus 1 minute is 0:01).
+ * - For 24-hour time, use a pattern like `HH:mm` using H to mean a 24-hour clock cycle running 0
+ * through 23 (midnight plus 1 minute is 0:01), or using k to mean a 24-hour clock cycle running
+ * 1 through 24 (midnight plus 1 minute is 24:01).
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleTimeFormat(locale: string, width: FormatWidth): string {
+  const data = findLocaleData(locale);
+  return getLastDefinedValue(data[LocaleDataIndex.TimeFormat], width);
+}
+
+/**
+ * Date-time format that depends on the locale.
+ *
+ * The date-time pattern shows how to combine separate patterns for date (represented by {1})
+ * and time (represented by {0}) into a single pattern. It usually doesn't need to be changed.
+ * What you want to pay attention to are:
+ * - possibly removing a space for languages that don't use it, such as many East Asian languages
+ * - possibly adding a comma, other punctuation, or a combining word
+ *
+ * For example:
+ * - English uses `{1} 'at' {0}` or `{1}, {0}` (depending on date style), while Japanese uses
+ *  `{1}{0}`.
+ * - An English formatted date-time using the combining pattern `{1}, {0}` could be
+ *  `Dec 10, 2010, 3:59:49 PM`. Notice the comma and space between the date portion and the time
+ *  portion.
+ *
+ * There are four formats (`full`, `long`, `medium`, `short`); the determination of which to use
+ * is normally based on the date style. For example, if the date has a full month and weekday
+ * name, the full combining pattern will be used to combine that with a time. If the date has
+ * numeric month, the short version of the combining pattern will be used to combine that with a
+ * time. English uses `{1} 'at' {0}` for full and long styles, and `{1}, {0}` for medium and short
+ * styles.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleDateTimeFormat(locale: string, width: FormatWidth): string {
+  const data = findLocaleData(locale);
+  const dateTimeFormatData = <string[]>data[LocaleDataIndex.DateTimeFormat];
+  return getLastDefinedValue(dateTimeFormatData, width);
+}
+
+/**
+ * Number symbol that can be used to replace placeholders in number formats.
+ * See {@link NumberSymbol} for more information.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleNumberSymbol(locale: string, symbol: NumberSymbol): string {
+  const data = findLocaleData(locale);
+  const res = data[LocaleDataIndex.NumberSymbols][symbol];
+  if (typeof res === 'undefined') {
+    if (symbol === NumberSymbol.CurrencyDecimal) {
+      return data[LocaleDataIndex.NumberSymbols][NumberSymbol.Decimal];
+    } else if (symbol === NumberSymbol.CurrencyGroup) {
+      return data[LocaleDataIndex.NumberSymbols][NumberSymbol.Group];
+    }
+  }
+  return res;
+}
+
+/**
+ * Number format that depends on the locale.
+ *
+ * Numbers are formatted using patterns, like `#,###.00`. For example, the pattern `#,###.00`
+ * when used to format the number 12345.678 could result in "12'345,67". That would happen if the
+ * grouping separator for your language is an apostrophe, and the decimal separator is a comma.
+ *
+ * <b>Important:</b> The characters `.` `,` `0` `#` (and others below) are special placeholders;
+ * they stand for the decimal separator, and so on, and are NOT real characters.
+ * You must NOT "translate" the placeholders; for example, don't change `.` to `,` even though in
+ * your language the decimal point is written with a comma. The symbols should be replaced by the
+ * local equivalents, using the Number Symbols for your language.
+ *
+ * Here are the special characters used in number patterns:
+ *
+ * | Symbol | Meaning |
+ * |--------|---------|
+ * | . | Replaced automatically by the character used for the decimal point. |
+ * | , | Replaced by the "grouping" (thousands) separator. |
+ * | 0 | Replaced by a digit (or zero if there aren't enough digits). |
+ * | # | Replaced by a digit (or nothing if there aren't enough). |
+ * | ¤ | This will be replaced by a currency symbol, such as $ or USD. |
+ * | % | This marks a percent format. The % symbol may change position, but must be retained. |
+ * | E | This marks a scientific format. The E symbol may change position, but must be retained. |
+ * | ' | Special characters used as literal characters are quoted with ASCII single quotes. |
+ *
+ * You can find more information
+ * [on the CLDR website](http://cldr.unicode.org/translation/number-patterns)
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleNumberFormat(locale: string, type: NumberFormatStyle): string {
+  const data = findLocaleData(locale);
+  return data[LocaleDataIndex.NumberFormats][type];
+}
+
+/**
+ * The symbol used to represent the currency for the main country using this locale (e.g. $ for
+ * the locale en-US).
+ * The symbol will be `null` if the main country cannot be determined.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleCurrencySymbol(locale: string): string|null {
+  const data = findLocaleData(locale);
+  return data[LocaleDataIndex.CurrencySymbol] || null;
+}
+
+/**
+ * The name of the currency for the main country using this locale (e.g. USD for the locale
+ * en-US).
+ * The name will be `null` if the main country cannot be determined.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleCurrencyName(locale: string): string|null {
+  const data = findLocaleData(locale);
+  return data[LocaleDataIndex.CurrencyName] || null;
+}
+
+/**
+ * Returns the currency values for the locale
+ */
+function getLocaleCurrencies(locale: string): {[code: string]: CurrenciesSymbols} {
+  const data = findLocaleData(locale);
+  return data[LocaleDataIndex.Currencies];
+}
+
+/**
+ * The locale plural function used by ICU expressions to determine the plural case to use.
+ * See {@link NgPlural} for more information.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocalePluralCase(locale: string): (value: number) => Plural {
+  const data = findLocaleData(locale);
+  return data[LocaleDataIndex.PluralCase];
+}
+
+function checkFullData(data: any) {
+  if (!data[LocaleDataIndex.ExtraData]) {
+    throw new Error(
+        `Missing extra locale data for the locale "${data[LocaleDataIndex.LocaleId]}". Use "registerLocaleData" to load new data. See the "I18n guide" on angular.io to know more.`);
+  }
+}
+
+/**
+ * Rules used to determine which day period to use (See `dayPeriods` below).
+ * The rules can either be an array or a single value. If it's an array, consider it as "from"
+ * and "to". If it's a single value then it means that the period is only valid at this exact
+ * value.
+ * There is always the same number of rules as the number of day periods, which means that the
+ * first rule is applied to the first day period and so on.
+ * You should fallback to AM/PM when there are no rules available.
+ *
+ * Note: this is only available if you load the full locale data.
+ * See the ["I18n guide"](guide/i18n#i18n-pipes) to know how to import additional locale
+ * data.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleExtraDayPeriodRules(locale: string): (Time | [Time, Time])[] {
+  const data = findLocaleData(locale);
+  checkFullData(data);
+  const rules = data[LocaleDataIndex.ExtraData][ExtraLocaleDataIndex.ExtraDayPeriodsRules] || [];
+  return rules.map((rule: string | [string, string]) => {
+    if (typeof rule === 'string') {
+      return extractTime(rule);
+    }
+    return [extractTime(rule[0]), extractTime(rule[1])];
+  });
+}
+
+/**
+ * Day Periods indicate roughly how the day is broken up in different languages (e.g. morning,
+ * noon, afternoon, midnight, ...).
+ * You should use the function {@link getLocaleExtraDayPeriodRules} to determine which period to
+ * use.
+ * You should fallback to AM/PM when there are no day periods available.
+ *
+ * Note: this is only available if you load the full locale data.
+ * See the ["I18n guide"](guide/i18n#i18n-pipes) to know how to import additional locale
+ * data.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getLocaleExtraDayPeriods(
+    locale: string, formStyle: FormStyle, width: TranslationWidth): string[] {
+  const data = findLocaleData(locale);
+  checkFullData(data);
+  const dayPeriodsData = <string[][][]>[
+    data[LocaleDataIndex.ExtraData][ExtraLocaleDataIndex.ExtraDayPeriodFormats],
+    data[LocaleDataIndex.ExtraData][ExtraLocaleDataIndex.ExtraDayPeriodStandalone]
+  ];
+  const dayPeriods = getLastDefinedValue(dayPeriodsData, formStyle) || [];
+  return getLastDefinedValue(dayPeriods, width) || [];
+}
+
+/**
+ * Returns the first value that is defined in an array, going backwards.
+ *
+ * To avoid repeating the same data (e.g. when "format" and "standalone" are the same) we only
+ * add the first one to the locale data arrays, the other ones are only defined when different.
+ * We use this function to retrieve the first defined value.
+ *
+ * @experimental i18n support is experimental.
+ */
+function getLastDefinedValue<T>(data: T[], index: number): T {
+  for (let i = index; i > -1; i--) {
+    if (typeof data[i] !== 'undefined') {
+      return data[i];
+    }
+  }
+  throw new Error('Locale data API: locale data undefined');
+}
+
+/**
+ * A representation of the time with hours and minutes
+ *
+ * @experimental i18n support is experimental.
+ */
+export type Time = {
+  hours: number,
+  minutes: number
+};
+
+/**
+ * Extract the hours and minutes from a string like "15:45"
+ */
+function extractTime(time: string): Time {
+  const [h, m] = time.split(':');
+  return {hours: +h, minutes: +m};
+}
+
+/**
+ * Finds the locale data for a locale id
+ *
+ * @experimental i18n support is experimental.
+ */
+export function findLocaleData(locale: string): any {
+  const normalizedLocale = locale.toLowerCase().replace(/_/g, '-');
+
+  let match = LOCALE_DATA[normalizedLocale];
+  if (match) {
+    return match;
+  }
+
+  // let's try to find a parent locale
+  const parentLocale = normalizedLocale.split('-')[0];
+  match = LOCALE_DATA[parentLocale];
+
+  if (match) {
+    return match;
+  }
+
+  if (parentLocale === 'en') {
+    return localeEn;
+  }
+
+  throw new Error(`Missing locale data for the locale "${locale}".`);
+}
+
+/**
+ * Returns the currency symbol for a given currency code, or the code if no symbol available
+ * (e.g.: format narrow = $, format wide = US$, code = USD)
+ * If no locale is provided, it uses the locale "en" by default
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getCurrencySymbol(code: string, format: 'wide' | 'narrow', locale = 'en'): string {
+  const currency = getLocaleCurrencies(locale)[code] || CURRENCIES_EN[code] || [];
+  const symbolNarrow = currency[CurrencyIndex.SymbolNarrow];
+
+  if (format === 'narrow' && typeof symbolNarrow === 'string') {
+    return symbolNarrow;
+  }
+
+  return currency[CurrencyIndex.Symbol] || code;
+}
+
+// Most currencies have cents, that's why the default is 2
+const DEFAULT_NB_OF_CURRENCY_DIGITS = 2;
+
+/**
+ * Returns the number of decimal digits for the given currency.
+ * Its value depends upon the presence of cents in that particular currency.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getNumberOfCurrencyDigits(code: string): number {
+  let digits;
+  const currency = CURRENCIES_EN[code];
+  if (currency) {
+    digits = currency[CurrencyIndex.NbOfDigits];
+  }
+  return typeof digits === 'number' ? digits : DEFAULT_NB_OF_CURRENCY_DIGITS;
+}
diff --git a/packages/common/src/i18n/locale_en.ts b/packages/common/src/i18n/locale_en.ts
new file mode 100644
index 000000000000..af207dab9006
--- /dev/null
+++ b/packages/common/src/i18n/locale_en.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+const u = undefined;
+
+function plural(n: number): number {
+  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+  if (i === 1 && v === 0) return 1;
+  return 5;
+}
+
+export default [
+  'en', [['a', 'p'], ['AM', 'PM'], u], [['AM', 'PM'], u, u],
+  [
+    ['S', 'M', 'T', 'W', 'T', 'F', 'S'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+  ],
+  u,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+  ],
+  u, [['B', 'A'], ['BC', 'AD'], ['Before Christ', 'Anno Domini']], 0, [6, 0],
+  ['M/d/yy', 'MMM d, y', 'MMMM d, y', 'EEEE, MMMM d, y'],
+  ['h:mm a', 'h:mm:ss a', 'h:mm:ss a z', 'h:mm:ss a zzzz'], ['{1}, {0}', u, '{1} \'at\' {0}', u],
+  ['.', ',', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0%', '¤#,##0.00', '#E0'], '$', 'US Dollar', {}, plural
+];
diff --git a/packages/common/src/i18n/localization.ts b/packages/common/src/i18n/localization.ts
new file mode 100644
index 000000000000..69aeceafdffd
--- /dev/null
+++ b/packages/common/src/i18n/localization.ts
@@ -0,0 +1,403 @@
+/**
+ * @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, Injectable, InjectionToken, LOCALE_ID, Optional} from '@angular/core';
+import {Plural, getLocalePluralCase} from './locale_data_api';
+
+
+/**
+ * @deprecated from v5
+ */
+export const DEPRECATED_PLURAL_FN = new InjectionToken<boolean>('UseV4Plurals');
+
+/**
+ * @experimental
+ */
+export abstract class NgLocalization {
+  abstract getPluralCategory(value: any, locale?: string): string;
+}
+
+
+/**
+ * Returns the plural category for a given value.
+ * - "=value" when the case exists,
+ * - the plural category otherwise
+ */
+export function getPluralCategory(
+    value: number, cases: string[], ngLocalization: NgLocalization, locale?: string): string {
+  let key = `=${value}`;
+
+  if (cases.indexOf(key) > -1) {
+    return key;
+  }
+
+  key = ngLocalization.getPluralCategory(value, locale);
+
+  if (cases.indexOf(key) > -1) {
+    return key;
+  }
+
+  if (cases.indexOf('other') > -1) {
+    return 'other';
+  }
+
+  throw new Error(`No plural message found for value "${value}"`);
+}
+
+/**
+ * Returns the plural case based on the locale
+ *
+ * @experimental
+ */
+@Injectable()
+export class NgLocaleLocalization extends NgLocalization {
+  constructor(
+      @Inject(LOCALE_ID) protected locale: string,
+      /** @deprecated from v5 */
+      @Optional() @Inject(DEPRECATED_PLURAL_FN) protected deprecatedPluralFn?:
+          ((locale: string, value: number|string) => Plural)|null) {
+    super();
+  }
+
+  getPluralCategory(value: any, locale?: string): string {
+    const plural = this.deprecatedPluralFn ? this.deprecatedPluralFn(locale || this.locale, value) :
+                                             getLocalePluralCase(locale || this.locale)(value);
+
+    switch (plural) {
+      case Plural.Zero:
+        return 'zero';
+      case Plural.One:
+        return 'one';
+      case Plural.Two:
+        return 'two';
+      case Plural.Few:
+        return 'few';
+      case Plural.Many:
+        return 'many';
+      default:
+        return 'other';
+    }
+  }
+}
+
+/**
+ * Returns the plural case based on the locale
+ *
+ * @deprecated from v5 the plural case function is in locale data files common/locales/*.ts
+ * @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 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 lang = locale.split('-')[0].toLowerCase();
+
+  switch (lang) {
+    case 'af':
+    case 'asa':
+    case 'az':
+    case 'bem':
+    case 'bez':
+    case 'bg':
+    case 'brx':
+    case 'ce':
+    case 'cgg':
+    case 'chr':
+    case 'ckb':
+    case 'ee':
+    case 'el':
+    case 'eo':
+    case 'es':
+    case 'eu':
+    case 'fo':
+    case 'fur':
+    case 'gsw':
+    case 'ha':
+    case 'haw':
+    case 'hu':
+    case 'jgo':
+    case 'jmc':
+    case 'ka':
+    case 'kk':
+    case 'kkj':
+    case 'kl':
+    case 'ks':
+    case 'ksb':
+    case 'ky':
+    case 'lb':
+    case 'lg':
+    case 'mas':
+    case 'mgo':
+    case 'ml':
+    case 'mn':
+    case 'nb':
+    case 'nd':
+    case 'ne':
+    case 'nn':
+    case 'nnh':
+    case 'nyn':
+    case 'om':
+    case 'or':
+    case 'os':
+    case 'ps':
+    case 'rm':
+    case 'rof':
+    case 'rwk':
+    case 'saq':
+    case 'seh':
+    case 'sn':
+    case 'so':
+    case 'sq':
+    case 'ta':
+    case 'te':
+    case 'teo':
+    case 'tk':
+    case 'tr':
+    case 'ug':
+    case 'uz':
+    case 'vo':
+    case 'vun':
+    case 'wae':
+    case 'xog':
+      if (n === 1) return Plural.One;
+      return Plural.Other;
+    case 'ak':
+    case 'ln':
+    case 'mg':
+    case 'pa':
+    case 'ti':
+      if (n === Math.floor(n) && n >= 0 && n <= 1) return Plural.One;
+      return Plural.Other;
+    case 'am':
+    case 'as':
+    case 'bn':
+    case 'fa':
+    case 'gu':
+    case 'hi':
+    case 'kn':
+    case 'mr':
+    case 'zu':
+      if (i === 0 || n === 1) return Plural.One;
+      return Plural.Other;
+    case 'ar':
+      if (n === 0) return Plural.Zero;
+      if (n === 1) return Plural.One;
+      if (n === 2) return Plural.Two;
+      if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return Plural.Few;
+      if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return Plural.Many;
+      return Plural.Other;
+    case 'ast':
+    case 'ca':
+    case 'de':
+    case 'en':
+    case 'et':
+    case 'fi':
+    case 'fy':
+    case 'gl':
+    case 'it':
+    case 'nl':
+    case 'sv':
+    case 'sw':
+    case 'ur':
+    case 'yi':
+      if (i === 1 && v === 0) return Plural.One;
+      return Plural.Other;
+    case 'be':
+      if (n % 10 === 1 && !(n % 100 === 11)) return Plural.One;
+      if (n % 10 === Math.floor(n % 10) && n % 10 >= 2 && n % 10 <= 4 &&
+          !(n % 100 >= 12 && n % 100 <= 14))
+        return Plural.Few;
+      if (n % 10 === 0 || n % 10 === Math.floor(n % 10) && n % 10 >= 5 && n % 10 <= 9 ||
+          n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 14)
+        return Plural.Many;
+      return Plural.Other;
+    case 'br':
+      if (n % 10 === 1 && !(n % 100 === 11 || n % 100 === 71 || n % 100 === 91)) return Plural.One;
+      if (n % 10 === 2 && !(n % 100 === 12 || n % 100 === 72 || n % 100 === 92)) return Plural.Two;
+      if (n % 10 === Math.floor(n % 10) && (n % 10 >= 3 && n % 10 <= 4 || n % 10 === 9) &&
+          !(n % 100 >= 10 && n % 100 <= 19 || n % 100 >= 70 && n % 100 <= 79 ||
+            n % 100 >= 90 && n % 100 <= 99))
+        return Plural.Few;
+      if (!(n === 0) && n % 1e6 === 0) return Plural.Many;
+      return Plural.Other;
+    case 'bs':
+    case 'hr':
+    case 'sr':
+      if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11))
+        return Plural.One;
+      if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+              !(i % 100 >= 12 && i % 100 <= 14) ||
+          f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
+              !(f % 100 >= 12 && f % 100 <= 14))
+        return Plural.Few;
+      return Plural.Other;
+    case 'cs':
+    case 'sk':
+      if (i === 1 && v === 0) return Plural.One;
+      if (i === Math.floor(i) && i >= 2 && i <= 4 && v === 0) return Plural.Few;
+      if (!(v === 0)) return Plural.Many;
+      return Plural.Other;
+    case 'cy':
+      if (n === 0) return Plural.Zero;
+      if (n === 1) return Plural.One;
+      if (n === 2) return Plural.Two;
+      if (n === 3) return Plural.Few;
+      if (n === 6) return Plural.Many;
+      return Plural.Other;
+    case 'da':
+      if (n === 1 || !(t === 0) && (i === 0 || i === 1)) return Plural.One;
+      return Plural.Other;
+    case 'dsb':
+    case 'hsb':
+      if (v === 0 && i % 100 === 1 || f % 100 === 1) return Plural.One;
+      if (v === 0 && i % 100 === 2 || f % 100 === 2) return Plural.Two;
+      if (v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 3 && i % 100 <= 4 ||
+          f % 100 === Math.floor(f % 100) && f % 100 >= 3 && f % 100 <= 4)
+        return Plural.Few;
+      return Plural.Other;
+    case 'ff':
+    case 'fr':
+    case 'hy':
+    case 'kab':
+      if (i === 0 || i === 1) return Plural.One;
+      return Plural.Other;
+    case 'fil':
+      if (v === 0 && (i === 1 || i === 2 || i === 3) ||
+          v === 0 && !(i % 10 === 4 || i % 10 === 6 || i % 10 === 9) ||
+          !(v === 0) && !(f % 10 === 4 || f % 10 === 6 || f % 10 === 9))
+        return Plural.One;
+      return Plural.Other;
+    case 'ga':
+      if (n === 1) return Plural.One;
+      if (n === 2) return Plural.Two;
+      if (n === Math.floor(n) && n >= 3 && n <= 6) return Plural.Few;
+      if (n === Math.floor(n) && n >= 7 && n <= 10) return Plural.Many;
+      return Plural.Other;
+    case 'gd':
+      if (n === 1 || n === 11) return Plural.One;
+      if (n === 2 || n === 12) return Plural.Two;
+      if (n === Math.floor(n) && (n >= 3 && n <= 10 || n >= 13 && n <= 19)) return Plural.Few;
+      return Plural.Other;
+    case 'gv':
+      if (v === 0 && i % 10 === 1) return Plural.One;
+      if (v === 0 && i % 10 === 2) return Plural.Two;
+      if (v === 0 &&
+          (i % 100 === 0 || i % 100 === 20 || i % 100 === 40 || i % 100 === 60 || i % 100 === 80))
+        return Plural.Few;
+      if (!(v === 0)) return Plural.Many;
+      return Plural.Other;
+    case 'he':
+      if (i === 1 && v === 0) return Plural.One;
+      if (i === 2 && v === 0) return Plural.Two;
+      if (v === 0 && !(n >= 0 && n <= 10) && n % 10 === 0) return Plural.Many;
+      return Plural.Other;
+    case 'is':
+      if (t === 0 && i % 10 === 1 && !(i % 100 === 11) || !(t === 0)) return Plural.One;
+      return Plural.Other;
+    case 'ksh':
+      if (n === 0) return Plural.Zero;
+      if (n === 1) return Plural.One;
+      return Plural.Other;
+    case 'kw':
+    case 'naq':
+    case 'se':
+    case 'smn':
+      if (n === 1) return Plural.One;
+      if (n === 2) return Plural.Two;
+      return Plural.Other;
+    case 'lag':
+      if (n === 0) return Plural.Zero;
+      if ((i === 0 || i === 1) && !(n === 0)) return Plural.One;
+      return Plural.Other;
+    case 'lt':
+      if (n % 10 === 1 && !(n % 100 >= 11 && n % 100 <= 19)) return Plural.One;
+      if (n % 10 === Math.floor(n % 10) && n % 10 >= 2 && n % 10 <= 9 &&
+          !(n % 100 >= 11 && n % 100 <= 19))
+        return Plural.Few;
+      if (!(f === 0)) return Plural.Many;
+      return Plural.Other;
+    case 'lv':
+    case 'prg':
+      if (n % 10 === 0 || n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 19 ||
+          v === 2 && f % 100 === Math.floor(f % 100) && f % 100 >= 11 && f % 100 <= 19)
+        return Plural.Zero;
+      if (n % 10 === 1 && !(n % 100 === 11) || v === 2 && f % 10 === 1 && !(f % 100 === 11) ||
+          !(v === 2) && f % 10 === 1)
+        return Plural.One;
+      return Plural.Other;
+    case 'mk':
+      if (v === 0 && i % 10 === 1 || f % 10 === 1) return Plural.One;
+      return Plural.Other;
+    case 'mt':
+      if (n === 1) return Plural.One;
+      if (n === 0 || n % 100 === Math.floor(n % 100) && n % 100 >= 2 && n % 100 <= 10)
+        return Plural.Few;
+      if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 19) return Plural.Many;
+      return Plural.Other;
+    case 'pl':
+      if (i === 1 && v === 0) return Plural.One;
+      if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14))
+        return Plural.Few;
+      if (v === 0 && !(i === 1) && i % 10 === Math.floor(i % 10) && i % 10 >= 0 && i % 10 <= 1 ||
+          v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+          v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 12 && i % 100 <= 14)
+        return Plural.Many;
+      return Plural.Other;
+    case 'pt':
+      if (n === Math.floor(n) && n >= 0 && n <= 2 && !(n === 2)) return Plural.One;
+      return Plural.Other;
+    case 'ro':
+      if (i === 1 && v === 0) return Plural.One;
+      if (!(v === 0) || n === 0 ||
+          !(n === 1) && n % 100 === Math.floor(n % 100) && n % 100 >= 1 && n % 100 <= 19)
+        return Plural.Few;
+      return Plural.Other;
+    case 'ru':
+    case 'uk':
+      if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return Plural.One;
+      if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
+          !(i % 100 >= 12 && i % 100 <= 14))
+        return Plural.Few;
+      if (v === 0 && i % 10 === 0 ||
+          v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
+          v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
+        return Plural.Many;
+      return Plural.Other;
+    case 'shi':
+      if (i === 0 || n === 1) return Plural.One;
+      if (n === Math.floor(n) && n >= 2 && n <= 10) return Plural.Few;
+      return Plural.Other;
+    case 'si':
+      if (n === 0 || n === 1 || i === 0 && f === 1) return Plural.One;
+      return Plural.Other;
+    case 'sl':
+      if (v === 0 && i % 100 === 1) return Plural.One;
+      if (v === 0 && i % 100 === 2) return Plural.Two;
+      if (v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 3 && i % 100 <= 4 || !(v === 0))
+        return Plural.Few;
+      return Plural.Other;
+    case 'tzm':
+      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/hash_location_strategy.ts b/packages/common/src/location/hash_location_strategy.ts
new file mode 100644
index 000000000000..d52c4c7610fa
--- /dev/null
+++ b/packages/common/src/location/hash_location_strategy.ts
@@ -0,0 +1,89 @@
+/**
+ * @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, Injectable, Optional} from '@angular/core';
+
+
+import {Location} from './location';
+import {APP_BASE_HREF, LocationStrategy} from './location_strategy';
+import {LocationChangeListener, PlatformLocation} from './platform_location';
+
+
+
+/**
+ * @description
+ * A {@link LocationStrategy} used to configure the {@link Location} service to
+ * represent its state in the
+ * [hash fragment](https://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax)
+ * of the browser's URL.
+ *
+ * For instance, if you call `location.go('/foo')`, the browser's URL will become
+ * `example.com#/foo`.
+ *
+ * @usageNotes
+ *
+ * ### Example
+ *
+ * {@example common/location/ts/hash_location_component.ts region='LocationComponent'}
+ *
+ *
+ */
+@Injectable()
+export class HashLocationStrategy extends LocationStrategy {
+  private _baseHref: string = '';
+  constructor(
+      private _platformLocation: PlatformLocation,
+      @Optional() @Inject(APP_BASE_HREF) _baseHref?: string) {
+    super();
+    if (_baseHref != null) {
+      this._baseHref = _baseHref;
+    }
+  }
+
+  onPopState(fn: LocationChangeListener): void {
+    this._platformLocation.onPopState(fn);
+    this._platformLocation.onHashChange(fn);
+  }
+
+  getBaseHref(): string { return this._baseHref; }
+
+  path(includeHash: boolean = false): string {
+    // the hash value is always prefixed with a `#`
+    // and if it is empty then it will stay empty
+    let path = this._platformLocation.hash;
+    if (path == null) path = '#';
+
+    return path.length > 0 ? path.substring(1) : path;
+  }
+
+  prepareExternalUrl(internal: string): string {
+    const url = Location.joinWithSlash(this._baseHref, internal);
+    return url.length > 0 ? ('#' + url) : url;
+  }
+
+  pushState(state: any, title: string, path: string, queryParams: string) {
+    let url: string|null =
+        this.prepareExternalUrl(path + Location.normalizeQueryParams(queryParams));
+    if (url.length == 0) {
+      url = this._platformLocation.pathname;
+    }
+    this._platformLocation.pushState(state, title, url);
+  }
+
+  replaceState(state: any, title: string, path: string, queryParams: string) {
+    let url = this.prepareExternalUrl(path + Location.normalizeQueryParams(queryParams));
+    if (url.length == 0) {
+      url = this._platformLocation.pathname;
+    }
+    this._platformLocation.replaceState(state, title, url);
+  }
+
+  forward(): void { this._platformLocation.forward(); }
+
+  back(): void { this._platformLocation.back(); }
+}
diff --git a/packages/common/src/location/index.ts b/packages/common/src/location/index.ts
new file mode 100644
index 000000000000..5707ccd33fde
--- /dev/null
+++ b/packages/common/src/location/index.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 './platform_location';
+export * from './location_strategy';
+export * from './hash_location_strategy';
+export * from './path_location_strategy';
+export * from './location';
diff --git a/packages/common/src/location/location.ts b/packages/common/src/location/location.ts
new file mode 100644
index 000000000000..4ee84dfb6b1e
--- /dev/null
+++ b/packages/common/src/location/location.ts
@@ -0,0 +1,197 @@
+/**
+ * @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 {EventEmitter, Injectable} from '@angular/core';
+import {SubscriptionLike} from 'rxjs';
+
+import {LocationStrategy} from './location_strategy';
+
+/** @experimental */
+export interface PopStateEvent {
+  pop?: boolean;
+  state?: any;
+  type?: string;
+  url?: string;
+}
+
+/**
+ * @description
+ *
+ * A service that applications can use to interact with a browser's URL.
+ *
+ * Depending on which {@link LocationStrategy} is used, `Location` will either persist
+ * to the URL's path or the URL's hash segment.
+ *
+ * @usageNotes
+ *
+ * It's better to use {@link Router#navigate} service to trigger route changes. Use
+ * `Location` only if you need to interact with or create normalized URLs outside of
+ * routing.
+ *
+ * `Location` is responsible for normalizing the URL against the application's base href.
+ * A normalized URL is absolute from the URL host, includes the application's base href, and has no
+ * trailing slash:
+ * - `/my/app/user/123` is normalized
+ * - `my/app/user/123` **is not** normalized
+ * - `/my/app/user/123/` **is not** normalized
+ *
+ * ### Example
+ *
+ * {@example common/location/ts/path_location_component.ts region='LocationComponent'}
+ *
+ */
+@Injectable()
+export class Location {
+  /** @internal */
+  _subject: EventEmitter<any> = new EventEmitter();
+  /** @internal */
+  _baseHref: string;
+  /** @internal */
+  _platformStrategy: LocationStrategy;
+
+  constructor(platformStrategy: LocationStrategy) {
+    this._platformStrategy = platformStrategy;
+    const browserBaseHref = this._platformStrategy.getBaseHref();
+    this._baseHref = Location.stripTrailingSlash(_stripIndexHtml(browserBaseHref));
+    this._platformStrategy.onPopState((ev) => {
+      this._subject.emit({
+        'url': this.path(true),
+        'pop': true,
+        'state': ev.state,
+        'type': ev.type,
+      });
+    });
+  }
+
+  /**
+   * Returns the normalized URL path.
+   */
+  // TODO: vsavkin. Remove the boolean flag and always include hash once the deprecated router is
+  // removed.
+  path(includeHash: boolean = false): string {
+    return this.normalize(this._platformStrategy.path(includeHash));
+  }
+
+  /**
+   * Normalizes the given path and compares to the current normalized path.
+   */
+  isCurrentPathEqualTo(path: string, query: string = ''): boolean {
+    return this.path() == this.normalize(path + Location.normalizeQueryParams(query));
+  }
+
+  /**
+   * Given a string representing a URL, returns the normalized URL path without leading or
+   * trailing slashes.
+   */
+  normalize(url: string): string {
+    return Location.stripTrailingSlash(_stripBaseHref(this._baseHref, _stripIndexHtml(url)));
+  }
+
+  /**
+   * Given a string representing a URL, returns the platform-specific external URL path.
+   * If the given URL doesn't begin with a leading slash (`'/'`), this method adds one
+   * before normalizing. This method will also add a hash if `HashLocationStrategy` is
+   * used, or the `APP_BASE_HREF` if the `PathLocationStrategy` is in use.
+   */
+  prepareExternalUrl(url: string): string {
+    if (url && url[0] !== '/') {
+      url = '/' + url;
+    }
+    return this._platformStrategy.prepareExternalUrl(url);
+  }
+
+  // TODO: rename this method to pushState
+  /**
+   * Changes the browsers URL to the normalized version of the given URL, and pushes a
+   * new item onto the platform's history.
+   */
+  go(path: string, query: string = '', state: any = null): void {
+    this._platformStrategy.pushState(state, '', path, query);
+  }
+
+  /**
+   * Changes the browsers URL to the normalized version of the given URL, and replaces
+   * the top item on the platform's history stack.
+   */
+  replaceState(path: string, query: string = '', state: any = null): void {
+    this._platformStrategy.replaceState(state, '', path, query);
+  }
+
+  /**
+   * Navigates forward in the platform's history.
+   */
+  forward(): void { this._platformStrategy.forward(); }
+
+  /**
+   * Navigates back in the platform's history.
+   */
+  back(): void { this._platformStrategy.back(); }
+
+  /**
+   * Subscribe to the platform's `popState` events.
+   */
+  subscribe(
+      onNext: (value: PopStateEvent) => void, onThrow?: ((exception: any) => void)|null,
+      onReturn?: (() => void)|null): SubscriptionLike {
+    return this._subject.subscribe({next: onNext, error: onThrow, complete: onReturn});
+  }
+
+  /**
+   * Given a string of url parameters, prepend with '?' if needed, otherwise return parameters as
+   * is.
+   */
+  public static normalizeQueryParams(params: string): string {
+    return params && params[0] !== '?' ? '?' + params : params;
+  }
+
+  /**
+   * Given 2 parts of a url, join them with a slash if needed.
+   */
+  public static joinWithSlash(start: string, end: string): string {
+    if (start.length == 0) {
+      return end;
+    }
+    if (end.length == 0) {
+      return start;
+    }
+    let slashes = 0;
+    if (start.endsWith('/')) {
+      slashes++;
+    }
+    if (end.startsWith('/')) {
+      slashes++;
+    }
+    if (slashes == 2) {
+      return start + end.substring(1);
+    }
+    if (slashes == 1) {
+      return start + end;
+    }
+    return start + '/' + end;
+  }
+
+  /**
+   * If url has a trailing slash, remove it, otherwise return url as is. This
+   * method looks for the first occurrence of either #, ?, or the end of the
+   * line as `/` characters after any of these should not be replaced.
+   */
+  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 {
+  return baseHref && url.startsWith(baseHref) ? url.substring(baseHref.length) : url;
+}
+
+function _stripIndexHtml(url: string): string {
+  return url.replace(/\/index.html$/, '');
+}
diff --git a/packages/common/src/location/location_strategy.ts b/packages/common/src/location/location_strategy.ts
new file mode 100644
index 000000000000..d40e0e245212
--- /dev/null
+++ b/packages/common/src/location/location_strategy.ts
@@ -0,0 +1,66 @@
+/**
+ * @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';
+import {LocationChangeListener} from './platform_location';
+
+/**
+ * `LocationStrategy` is responsible for representing and reading route state
+ * from the browser's URL. Angular provides two strategies:
+ * {@link HashLocationStrategy} and {@link PathLocationStrategy}.
+ *
+ * This is used under the hood of the {@link Location} service.
+ *
+ * Applications should use the {@link Router} or {@link Location} services to
+ * interact with application route state.
+ *
+ * For instance, {@link HashLocationStrategy} produces URLs like
+ * `http://example.com#/foo`, and {@link PathLocationStrategy} produces
+ * `http://example.com/foo` as an equivalent URL.
+ *
+ * See these two classes for more.
+ *
+ *
+ */
+export abstract class LocationStrategy {
+  abstract path(includeHash?: boolean): string;
+  abstract prepareExternalUrl(internal: string): string;
+  abstract pushState(state: any, title: string, url: string, queryParams: string): void;
+  abstract replaceState(state: any, title: string, url: string, queryParams: string): void;
+  abstract forward(): void;
+  abstract back(): void;
+  abstract onPopState(fn: LocationChangeListener): void;
+  abstract getBaseHref(): string;
+}
+
+
+/**
+ * The `APP_BASE_HREF` token represents the base href to be used with the
+ * {@link PathLocationStrategy}.
+ *
+ * If you're using {@link PathLocationStrategy}, you must provide a provider to a string
+ * representing the URL prefix that should be preserved when generating and recognizing
+ * URLs.
+ *
+ * @usageNotes
+ *
+ * ### Example
+ *
+ * ```typescript
+ * import {Component, NgModule} from '@angular/core';
+ * import {APP_BASE_HREF} from '@angular/common';
+ *
+ * @NgModule({
+ *   providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ *
+ */
+export const APP_BASE_HREF = new InjectionToken<string>('appBaseHref');
diff --git a/packages/common/src/location/path_location_strategy.ts b/packages/common/src/location/path_location_strategy.ts
new file mode 100644
index 000000000000..e47932568cbc
--- /dev/null
+++ b/packages/common/src/location/path_location_strategy.ts
@@ -0,0 +1,97 @@
+/**
+ * @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, Injectable, Optional} from '@angular/core';
+
+
+import {Location} from './location';
+import {APP_BASE_HREF, LocationStrategy} from './location_strategy';
+import {LocationChangeListener, PlatformLocation} from './platform_location';
+
+
+
+/**
+ * @description
+ * A {@link LocationStrategy} used to configure the {@link Location} service to
+ * represent its state in the
+ * [path](https://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax) of the
+ * browser's URL.
+ *
+ * If you're using `PathLocationStrategy`, you must provide a {@link APP_BASE_HREF}
+ * or add a base element to the document. This URL prefix that will be preserved
+ * when generating and recognizing URLs.
+ *
+ * For instance, if you provide an `APP_BASE_HREF` of `'/my/app'` and call
+ * `location.go('/foo')`, the browser's URL will become
+ * `example.com/my/app/foo`.
+ *
+ * Similarly, if you add `<base href='/my/app'/>` to the document and call
+ * `location.go('/foo')`, the browser's URL will become
+ * `example.com/my/app/foo`.
+ *
+ * @usageNotes
+ *
+ * ### Example
+ *
+ * {@example common/location/ts/path_location_component.ts region='LocationComponent'}
+ *
+ *
+ */
+@Injectable()
+export class PathLocationStrategy extends LocationStrategy {
+  private _baseHref: string;
+
+  constructor(
+      private _platformLocation: PlatformLocation,
+      @Optional() @Inject(APP_BASE_HREF) href?: string) {
+    super();
+
+    if (href == null) {
+      href = this._platformLocation.getBaseHrefFromDOM();
+    }
+
+    if (href == null) {
+      throw new Error(
+          `No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.`);
+    }
+
+    this._baseHref = href;
+  }
+
+  onPopState(fn: LocationChangeListener): void {
+    this._platformLocation.onPopState(fn);
+    this._platformLocation.onHashChange(fn);
+  }
+
+  getBaseHref(): string { return this._baseHref; }
+
+  prepareExternalUrl(internal: string): string {
+    return Location.joinWithSlash(this._baseHref, internal);
+  }
+
+  path(includeHash: boolean = false): string {
+    const pathname = this._platformLocation.pathname +
+        Location.normalizeQueryParams(this._platformLocation.search);
+    const hash = this._platformLocation.hash;
+    return hash && includeHash ? `${pathname}${hash}` : pathname;
+  }
+
+  pushState(state: any, title: string, url: string, queryParams: string) {
+    const externalUrl = this.prepareExternalUrl(url + Location.normalizeQueryParams(queryParams));
+    this._platformLocation.pushState(state, title, externalUrl);
+  }
+
+  replaceState(state: any, title: string, url: string, queryParams: string) {
+    const externalUrl = this.prepareExternalUrl(url + Location.normalizeQueryParams(queryParams));
+    this._platformLocation.replaceState(state, title, externalUrl);
+  }
+
+  forward(): void { this._platformLocation.forward(); }
+
+  back(): void { this._platformLocation.back(); }
+}
diff --git a/packages/common/src/location/platform_location.ts b/packages/common/src/location/platform_location.ts
new file mode 100644
index 000000000000..9770017b902b
--- /dev/null
+++ b/packages/common/src/location/platform_location.ts
@@ -0,0 +1,70 @@
+/**
+ * @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';
+/**
+ * This class should not be used directly by an application developer. Instead, use
+ * {@link Location}.
+ *
+ * `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, `@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...
+ *
+ * {@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
+ * Router} /
+ * {@link Location} / {@link LocationStrategy} and DOM apis flow through the `PlatformLocation`
+ * class they are all platform independent.
+ *
+ *
+ */
+export abstract class PlatformLocation {
+  abstract getBaseHrefFromDOM(): string;
+  abstract onPopState(fn: LocationChangeListener): void;
+  abstract onHashChange(fn: LocationChangeListener): void;
+
+  abstract get pathname(): string;
+  abstract get search(): string;
+  abstract get hash(): string;
+
+  abstract replaceState(state: any, title: string, url: string): void;
+
+  abstract pushState(state: any, title: string, url: string): void;
+
+  abstract forward(): void;
+
+  abstract back(): void;
+}
+
+/**
+ * @description Indicates when a location is initialized.
+ * @experimental
+ */
+export const LOCATION_INITIALIZED = new InjectionToken<Promise<any>>('Location Initialized');
+
+/**
+ * @description
+ * A serializable version of the event from `onPopState` or `onHashChange`
+ *
+ * @experimental
+ */
+export interface LocationChangeEvent {
+  type: string;
+  state: any;
+}
+
+/**
+ * @experimental
+ */
+export interface LocationChangeListener { (event: LocationChangeEvent): any; }
diff --git a/packages/common/src/pipes/async_pipe.ts b/packages/common/src/pipes/async_pipe.ts
new file mode 100644
index 000000000000..244f5b8d7ec2
--- /dev/null
+++ b/packages/common/src/pipes/async_pipe.ts
@@ -0,0 +1,145 @@
+/**
+ * @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 {ChangeDetectorRef, EventEmitter, OnDestroy, Pipe, PipeTransform, WrappedValue, ɵisObservable, ɵisPromise} from '@angular/core';
+import {Observable, SubscriptionLike} from 'rxjs';
+import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
+
+interface SubscriptionStrategy {
+  createSubscription(async: Observable<any>|Promise<any>, updateLatestValue: any): SubscriptionLike
+      |Promise<any>;
+  dispose(subscription: SubscriptionLike|Promise<any>): void;
+  onDestroy(subscription: SubscriptionLike|Promise<any>): void;
+}
+
+class ObservableStrategy implements SubscriptionStrategy {
+  createSubscription(async: Observable<any>, updateLatestValue: any): SubscriptionLike {
+    return async.subscribe({next: updateLatestValue, error: (e: any) => { throw e; }});
+  }
+
+  dispose(subscription: SubscriptionLike): void { subscription.unsubscribe(); }
+
+  onDestroy(subscription: SubscriptionLike): void { subscription.unsubscribe(); }
+}
+
+class PromiseStrategy implements SubscriptionStrategy {
+  createSubscription(async: Promise<any>, updateLatestValue: (v: any) => any): Promise<any> {
+    return async.then(updateLatestValue, e => { throw e; });
+  }
+
+  dispose(subscription: Promise<any>): void {}
+
+  onDestroy(subscription: Promise<any>): void {}
+}
+
+const _promiseStrategy = new PromiseStrategy();
+const _observableStrategy = new ObservableStrategy();
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Unwraps a value from an asynchronous primitive.
+ *
+ * The `async` pipe subscribes to an `Observable` or `Promise` and returns the latest value it has
+ * emitted. When a new value is emitted, the `async` pipe marks the component to be checked for
+ * changes. When the component gets destroyed, the `async` pipe unsubscribes automatically to avoid
+ * potential memory leaks.
+ *
+ * @usageNotes
+ *
+ * ### Examples
+ *
+ * This example binds a `Promise` to the view. Clicking the `Resolve` button resolves the
+ * promise.
+ *
+ * {@example common/pipes/ts/async_pipe.ts region='AsyncPipePromise'}
+ *
+ * It's also possible to use `async` with Observables. The example below binds the `time` Observable
+ * to the view. The Observable continuously updates the view with the current time.
+ *
+ * {@example common/pipes/ts/async_pipe.ts region='AsyncPipeObservable'}
+ *
+ */
+@Pipe({name: 'async', pure: false})
+export class AsyncPipe implements OnDestroy, PipeTransform {
+  private _latestValue: any = null;
+  private _latestReturnedValue: any = null;
+
+  private _subscription: SubscriptionLike|Promise<any>|null = null;
+  private _obj: Observable<any>|Promise<any>|EventEmitter<any>|null = null;
+  private _strategy: SubscriptionStrategy = null !;
+
+  constructor(private _ref: ChangeDetectorRef) {}
+
+  ngOnDestroy(): void {
+    if (this._subscription) {
+      this._dispose();
+    }
+  }
+
+  transform<T>(obj: null): null;
+  transform<T>(obj: undefined): undefined;
+  transform<T>(obj: Observable<T>|null|undefined): T|null;
+  transform<T>(obj: Promise<T>|null|undefined): T|null;
+  transform(obj: Observable<any>|Promise<any>|null|undefined): any {
+    if (!this._obj) {
+      if (obj) {
+        this._subscribe(obj);
+      }
+      this._latestReturnedValue = this._latestValue;
+      return this._latestValue;
+    }
+
+    if (obj !== this._obj) {
+      this._dispose();
+      return this.transform(obj as any);
+    }
+
+    if (this._latestValue === this._latestReturnedValue) {
+      return this._latestReturnedValue;
+    }
+
+    this._latestReturnedValue = this._latestValue;
+    return WrappedValue.wrap(this._latestValue);
+  }
+
+  private _subscribe(obj: Observable<any>|Promise<any>|EventEmitter<any>): void {
+    this._obj = obj;
+    this._strategy = this._selectStrategy(obj);
+    this._subscription = this._strategy.createSubscription(
+        obj, (value: Object) => this._updateLatestValue(obj, value));
+  }
+
+  private _selectStrategy(obj: Observable<any>|Promise<any>|EventEmitter<any>): any {
+    if (ɵisPromise(obj)) {
+      return _promiseStrategy;
+    }
+
+    if (ɵisObservable(obj)) {
+      return _observableStrategy;
+    }
+
+    throw invalidPipeArgumentError(AsyncPipe, obj);
+  }
+
+  private _dispose(): void {
+    this._strategy.dispose(this._subscription !);
+    this._latestValue = null;
+    this._latestReturnedValue = null;
+    this._subscription = null;
+    this._obj = null;
+  }
+
+  private _updateLatestValue(async: any, value: Object): void {
+    if (async === this._obj) {
+      this._latestValue = value;
+      this._ref.markForCheck();
+    }
+  }
+}
diff --git a/packages/common/src/pipes/case_conversion_pipes.ts b/packages/common/src/pipes/case_conversion_pipes.ts
new file mode 100644
index 000000000000..e2e6041dac57
--- /dev/null
+++ b/packages/common/src/pipes/case_conversion_pipes.ts
@@ -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
+ */
+
+import {Pipe, PipeTransform} from '@angular/core';
+import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
+
+/**
+ * Transforms text to all lower case.
+ *
+ * @see `UpperCasePipe`
+ * @see `TitleCasePipe`
+ * @usageNotes
+ *
+ * The following example defines a view that allows the user to enter
+ * text, and then uses the pipe to convert the input text to all lower case.
+ *
+ * <code-example path="common/pipes/ts/lowerupper_pipe.ts" region='LowerUpperPipe'></code-example>
+ *
+ *
+ */
+@Pipe({name: 'lowercase'})
+export class LowerCasePipe implements PipeTransform {
+  /**
+   * @param value The string to transform to lower case.
+   */
+  transform(value: string): string {
+    if (!value) return value;
+    if (typeof value !== 'string') {
+      throw invalidPipeArgumentError(LowerCasePipe, value);
+    }
+    return value.toLowerCase();
+  }
+}
+
+//
+// Regex below matches any Unicode word and compatible with ES5. In ES2018 the same result
+// can be achieved by using /\p{L}\S*/gu and also known as Unicode Property Escapes
+// (http://2ality.com/2017/07/regexp-unicode-property-escapes.html). Since there is no
+// transpilation of this functionality down to ES5 without external tool, the only solution is
+// to use already transpiled form. Example can be found here -
+// https://mothereff.in/regexpu#input=var+regex+%3D+/%5Cp%7BL%7D/u%3B&unicodePropertyEscape=1
+//
+
+const unicodeWordMatch =
+    /(?:[A-Za-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16F1-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312E\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEA\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AE\uA7B0-\uA7B7\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF2D-\uDF40\uDF42-\uDF49\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF]|\uD801[\uDC00-\uDC9D\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF19]|\uD806[\uDCA0-\uDCDF\uDCFF\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE83\uDE86-\uDE89\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46]|\uD808[\uDC00-\uDF99]|\uD809[\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50\uDF93-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFEC]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4\uDD00-\uDD43]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D])\S*/g;
+
+/**
+ * Transforms text to title case.
+ * Capitalizes the first letter of each word, and transforms the
+ * rest of the word to lower case.
+ * Words are delimited by any whitespace character, such as a space, tab, or line-feed character.
+ *
+ * @see `LowerCasePipe`
+ * @see `UpperCasePipe`
+ *
+ * @usageNotes
+ * The following example shows the result of transforming various strings into title case.
+ *
+ * <code-example path="common/pipes/ts/titlecase_pipe.ts" region='TitleCasePipe'></code-example>
+ *
+ *
+ */
+@Pipe({name: 'titlecase'})
+export class TitleCasePipe implements PipeTransform {
+  /**
+   * @param value The string to transform to title case.
+   */
+  transform(value: string): string {
+    if (!value) return value;
+    if (typeof value !== 'string') {
+      throw invalidPipeArgumentError(TitleCasePipe, value);
+    }
+
+    return value.replace(
+        unicodeWordMatch, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase()));
+  }
+}
+
+/**
+ * Transforms text to all upper case.
+ * @see `LowerCasePipe`
+ * @see `TitleCasePipe`
+ */
+@Pipe({name: 'uppercase'})
+export class UpperCasePipe implements PipeTransform {
+  /**
+   * @param value The string to transform to upper case.
+   */
+  transform(value: string): string {
+    if (!value) return value;
+    if (typeof value !== 'string') {
+      throw invalidPipeArgumentError(UpperCasePipe, value);
+    }
+    return value.toUpperCase();
+  }
+}
diff --git a/packages/common/src/pipes/date_pipe.ts b/packages/common/src/pipes/date_pipe.ts
new file mode 100644
index 000000000000..c0365c42b5e6
--- /dev/null
+++ b/packages/common/src/pipes/date_pipe.ts
@@ -0,0 +1,178 @@
+/**
+ * @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, LOCALE_ID, Pipe, PipeTransform} from '@angular/core';
+import {formatDate} from '../i18n/format_date';
+import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
+
+// clang-format off
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Formats a date value according to locale rules.
+ *
+ * Only the `en-US` locale data comes with Angular. To localize dates
+ * in another language, you must import the corresponding locale data.
+ * See the [I18n guide](guide/i18n#i18n-pipes) for more information.
+ *
+ * @see `formatDate()`
+ *
+ *
+ * @usageNotes
+ *
+ * The result of this pipe is not reevaluated when the input is mutated. To avoid the need to
+ * reformat the date on every change-detection cycle, treat the date as an immutable object
+ * and change the reference when the pipe needs to run again.
+ *
+ * ### Pre-defined format options
+ *
+ * Examples are given in `en-US` locale.
+ *
+ * - `'short'`: equivalent to `'M/d/yy, h:mm a'` (`6/15/15, 9:03 AM`).
+ * - `'medium'`: equivalent to `'MMM d, y, h:mm:ss a'` (`Jun 15, 2015, 9:03:01 AM`).
+ * - `'long'`: equivalent to `'MMMM d, y, h:mm:ss a z'` (`June 15, 2015 at 9:03:01 AM
+ * GMT+1`).
+ * - `'full'`: equivalent to `'EEEE, MMMM d, y, h:mm:ss a zzzz'` (`Monday, June 15, 2015 at
+ * 9:03:01 AM GMT+01:00`).
+ * - `'shortDate'`: equivalent to `'M/d/yy'` (`6/15/15`).
+ * - `'mediumDate'`: equivalent to `'MMM d, y'` (`Jun 15, 2015`).
+ * - `'longDate'`: equivalent to `'MMMM d, y'` (`June 15, 2015`).
+ * - `'fullDate'`: equivalent to `'EEEE, MMMM d, y'` (`Monday, June 15, 2015`).
+ * - `'shortTime'`: equivalent to `'h:mm a'` (`9:03 AM`).
+ * - `'mediumTime'`: equivalent to `'h:mm:ss a'` (`9:03:01 AM`).
+ * - `'longTime'`: equivalent to `'h:mm:ss a z'` (`9:03:01 AM GMT+1`).
+ * - `'fullTime'`: equivalent to `'h:mm:ss a zzzz'` (`9:03:01 AM GMT+01:00`).
+ *
+ * ### Custom format options
+ *
+ * You can construct a format string using symbols to specify the components
+ * of a date-time value, as described in the following table.
+ * Format details depend on the locale.
+ * Fields marked with (*) are only available in the extra data set for the given locale.
+ *
+ *  | Field type         | Format      | Description                                                   | Example Value                                              |
+ *  |--------------------|-------------|---------------------------------------------------------------|------------------------------------------------------------|
+ *  | Era                | G, GG & GGG | Abbreviated                                                   | AD                                                         |
+ *  |                    | GGGG        | Wide                                                          | Anno Domini                                                |
+ *  |                    | GGGGG       | Narrow                                                        | A                                                          |
+ *  | Year               | y           | Numeric: minimum digits                                       | 2, 20, 201, 2017, 20173                                    |
+ *  |                    | yy          | Numeric: 2 digits + zero padded                               | 02, 20, 01, 17, 73                                         |
+ *  |                    | yyy         | Numeric: 3 digits + zero padded                               | 002, 020, 201, 2017, 20173                                 |
+ *  |                    | yyyy        | Numeric: 4 digits or more + zero padded                       | 0002, 0020, 0201, 2017, 20173                              |
+ *  | Month              | M           | Numeric: 1 digit                                              | 9, 12                                                      |
+ *  |                    | MM          | Numeric: 2 digits + zero padded                               | 09, 12                                                     |
+ *  |                    | MMM         | Abbreviated                                                   | Sep                                                        |
+ *  |                    | MMMM        | Wide                                                          | September                                                  |
+ *  |                    | MMMMM       | Narrow                                                        | S                                                          |
+ *  | Month standalone   | L           | Numeric: 1 digit                                              | 9, 12                                                      |
+ *  |                    | LL          | Numeric: 2 digits + zero padded                               | 09, 12                                                     |
+ *  |                    | LLL         | Abbreviated                                                   | Sep                                                        |
+ *  |                    | LLLL        | Wide                                                          | September                                                  |
+ *  |                    | LLLLL       | Narrow                                                        | S                                                          |
+ *  | Week of year       | w           | Numeric: minimum digits                                       | 1... 53                                                    |
+ *  |                    | ww          | Numeric: 2 digits + zero padded                               | 01... 53                                                   |
+ *  | Week of month      | W           | Numeric: 1 digit                                              | 1... 5                                                     |
+ *  | Day of month       | d           | Numeric: minimum digits                                       | 1                                                          |
+ *  |                    | dd          | Numeric: 2 digits + zero padded                               | 01                                                          |
+ *  | Week day           | E, EE & EEE | Abbreviated                                                   | Tue                                                        |
+ *  |                    | EEEE        | Wide                                                          | Tuesday                                                    |
+ *  |                    | EEEEE       | Narrow                                                        | T                                                          |
+ *  |                    | EEEEEE      | Short                                                         | Tu                                                         |
+ *  | Period             | a, aa & aaa | Abbreviated                                                   | am/pm or AM/PM                                             |
+ *  |                    | aaaa        | Wide (fallback to `a` when missing)                           | ante meridiem/post meridiem                                |
+ *  |                    | aaaaa       | Narrow                                                        | a/p                                                        |
+ *  | Period*            | B, BB & BBB | Abbreviated                                                   | mid.                                                       |
+ *  |                    | BBBB        | Wide                                                          | am, pm, midnight, noon, morning, afternoon, evening, night |
+ *  |                    | BBBBB       | Narrow                                                        | md                                                         |
+ *  | Period standalone* | b, bb & bbb | Abbreviated                                                   | mid.                                                       |
+ *  |                    | bbbb        | Wide                                                          | am, pm, midnight, noon, morning, afternoon, evening, night |
+ *  |                    | bbbbb       | Narrow                                                        | md                                                         |
+ *  | Hour 1-12          | h           | Numeric: minimum digits                                       | 1, 12                                                      |
+ *  |                    | hh          | Numeric: 2 digits + zero padded                               | 01, 12                                                     |
+ *  | Hour 0-23          | H           | Numeric: minimum digits                                       | 0, 23                                                      |
+ *  |                    | HH          | Numeric: 2 digits + zero padded                               | 00, 23                                                     |
+ *  | Minute             | m           | Numeric: minimum digits                                       | 8, 59                                                      |
+ *  |                    | mm          | Numeric: 2 digits + zero padded                               | 08, 59                                                     |
+ *  | Second             | s           | Numeric: minimum digits                                       | 0... 59                                                    |
+ *  |                    | ss          | Numeric: 2 digits + zero padded                               | 00... 59                                                   |
+ *  | Fractional seconds | S           | Numeric: 1 digit                                              | 0... 9                                                     |
+ *  |                    | SS          | Numeric: 2 digits + zero padded                               | 00... 99                                                   |
+ *  |                    | SSS         | Numeric: 3 digits + zero padded (= milliseconds)              | 000... 999                                                 |
+ *  | Zone               | z, zz & zzz | Short specific non location format (fallback to O)            | GMT-8                                                      |
+ *  |                    | zzzz        | Long specific non location format (fallback to OOOO)          | GMT-08:00                                                  |
+ *  |                    | Z, ZZ & ZZZ | ISO8601 basic format                                          | -0800                                                      |
+ *  |                    | ZZZZ        | Long localized GMT format                                     | GMT-8:00                                                   |
+ *  |                    | ZZZZZ       | ISO8601 extended format + Z indicator for offset 0 (= XXXXX)  | -08:00                                                     |
+ *  |                    | O, OO & OOO | Short localized GMT format                                    | GMT-8                                                      |
+ *  |                    | OOOO        | Long localized GMT format                                     | GMT-08:00                                                  |
+ *
+ * Note that timezone correction is not applied to an ISO string that has no time component, such as "2016-09-19"
+ *
+ * ### Format examples
+ *
+ * These examples transform a date into various formats,
+ * assuming that `dateObj` is a JavaScript `Date` object for
+ * year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11,
+ * given in the local time for the `en-US` locale.
+ *
+ * ```
+ * {{ dateObj | date }}               // output is 'Jun 15, 2015'
+ * {{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM'
+ * {{ dateObj | date:'shortTime' }}   // output is '9:43 PM'
+ * {{ dateObj | date:'mmss' }}        // output is '43:11'
+ * ```
+ *
+ * ### Usage example
+ *
+ * The following component uses a date pipe to display the current date in different formats.
+ *
+ * ```
+ * @Component({
+ *  selector: 'date-pipe',
+ *  template: `<div>
+ *    <p>Today is {{today | date}}</p>
+ *    <p>Or if you prefer, {{today | date:'fullDate'}}</p>
+ *    <p>The time is {{today | date:'h:mm a z'}}</p>
+ *  </div>`
+ * })
+ * // Get the current date and time as a date-time value.
+ * export class DatePipeComponent {
+ *   today: number = Date.now();
+ * }
+ * ```
+ *
+ */
+// clang-format on
+@Pipe({name: 'date', pure: true})
+export class DatePipe implements PipeTransform {
+  constructor(@Inject(LOCALE_ID) private locale: string) {}
+
+  /**
+   * @param value The date expression: a `Date` object,  a number
+   * (milliseconds since UTC epoch), or an ISO string (https://www.w3.org/TR/NOTE-datetime).
+   * @param format The date/time components to include, using predefined options or a
+   * custom format string.
+   * @param timezone A timezone offset (such as `'+0430'`), or a standard
+   * UTC/GMT or continental US timezone abbreviation. Default is
+   * the local system timezone of the end-user's machine.
+   * @param locale A locale code for the locale format rules to use.
+   * When not supplied, uses the value of `LOCALE_ID`, which is `en-US` by default.
+   * See [Setting your app locale](guide/i18n#setting-up-the-locale-of-your-app).
+   * @returns A date string in the desired format.
+   */
+  transform(value: any, format = 'mediumDate', timezone?: string, locale?: string): string|null {
+    if (value == null || value === '' || value !== value) return null;
+
+    try {
+      return formatDate(value, format, locale || this.locale, timezone);
+    } catch (error) {
+      throw invalidPipeArgumentError(DatePipe, error.message);
+    }
+  }
+}
diff --git a/packages/common/src/pipes/deprecated/date_pipe.ts b/packages/common/src/pipes/deprecated/date_pipe.ts
new file mode 100644
index 000000000000..c4379fb66701
--- /dev/null
+++ b/packages/common/src/pipes/deprecated/date_pipe.ts
@@ -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
+  */
+
+import {Inject, LOCALE_ID, Pipe, PipeTransform} from '@angular/core';
+import {ISO8601_DATE_REGEX, isoStringToDate} from '../../i18n/format_date';
+import {invalidPipeArgumentError} from '../invalid_pipe_argument_error';
+import {DateFormatter} from './intl';
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Formats a date according to locale rules.
+ *
+ * Where:
+ * - `expression` is a date object or a number (milliseconds since UTC epoch) or an ISO string
+ * (https://www.w3.org/TR/NOTE-datetime).
+ * - `format` indicates which date/time components to include. The format can be predefined as
+ *   shown below or custom as shown in the table.
+ *   - `'medium'`: equivalent to `'yMMMdjms'` (e.g. `Sep 3, 2010, 12:05:08 PM` for `en-US`)
+ *   - `'short'`: equivalent to `'yMdjm'` (e.g. `9/3/2010, 12:05 PM` for `en-US`)
+ *   - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. `Friday, September 3, 2010` for `en-US`)
+ *   - `'longDate'`: equivalent to `'yMMMMd'` (e.g. `September 3, 2010` for `en-US`)
+ *   - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. `Sep 3, 2010` for `en-US`)
+ *   - `'shortDate'`: equivalent to `'yMd'` (e.g. `9/3/2010` for `en-US`)
+ *   - `'mediumTime'`: equivalent to `'jms'` (e.g. `12:05:08 PM` for `en-US`)
+ *   - `'shortTime'`: equivalent to `'jm'` (e.g. `12:05 PM` for `en-US`)
+ *
+ *
+ *  | Component | Symbol | Narrow | Short Form   | Long Form         | Numeric   | 2-digit   |
+ *  |-----------|:------:|--------|--------------|-------------------|-----------|-----------|
+ *  | era       |   G    | G (A)  | GGG (AD)     | GGGG (Anno Domini)| -         | -         |
+ *  | year      |   y    | -      | -            | -                 | y (2015)  | yy (15)   |
+ *  | month     |   M    | L (S)  | MMM (Sep)    | MMMM (September)  | M (9)     | MM (09)   |
+ *  | day       |   d    | -      | -            | -                 | d (3)     | dd (03)   |
+ *  | weekday   |   E    | E (S)  | EEE (Sun)    | EEEE (Sunday)     | -         | -         |
+ *  | hour      |   j    | -      | -            | -                 | j (13)    | jj (13)   |
+ *  | hour12    |   h    | -      | -            | -                 | h (1 PM)  | hh (01 PM)|
+ *  | hour24    |   H    | -      | -            | -                 | H (13)    | HH (13)   |
+ *  | minute    |   m    | -      | -            | -                 | m (5)     | mm (05)   |
+ *  | second    |   s    | -      | -            | -                 | s (9)     | ss (09)   |
+ *  | timezone  |   z    | -      | -            | z (Pacific Standard Time)| -  | -         |
+ *  | timezone  |   Z    | -      | Z (GMT-8:00) | -                 | -         | -         |
+ *  | timezone  |   a    | -      | a (PM)       | -                 | -         | -         |
+ *
+ * In javascript, only the components specified will be respected (not the ordering,
+ * punctuations, ...) and details of the formatting will be dependent on the locale.
+ *
+ * Timezone of the formatted text will be the local system timezone of the end-user's machine.
+ *
+ * When the expression is a ISO string without time (e.g. 2016-09-19) the time zone offset is not
+ * applied and the formatted text will have the same day, month and year of the expression.
+ *
+ * WARNINGS:
+ * - this pipe is marked as pure hence it will not be re-evaluated when the input is mutated.
+ *   Instead users should treat the date as an immutable object and change the reference when the
+ *   pipe needs to re-run (this is to avoid reformatting the date on every change detection run
+ *   which would be an expensive operation).
+ * - this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera
+ *   browsers.
+ *
+ * @usageNotes
+ *
+ * ### Examples
+ *
+ * Assuming `dateObj` is (year: 2010, month: 9, day: 3, hour: 12 PM, minute: 05, second: 08)
+ * in the _local_ time and locale is 'en-US':
+ *
+ * {@example common/pipes/ts/date_pipe.ts region='DeprecatedDatePipe'}
+ *
+ *
+ */
+@Pipe({name: 'date', pure: true})
+export class DeprecatedDatePipe implements PipeTransform {
+  /** @internal */
+  static _ALIASES: {[key: string]: string} = {
+    'medium': 'yMMMdjms',
+    'short': 'yMdjm',
+    'fullDate': 'yMMMMEEEEd',
+    'longDate': 'yMMMMd',
+    'mediumDate': 'yMMMd',
+    'shortDate': 'yMd',
+    'mediumTime': 'jms',
+    'shortTime': 'jm'
+  };
+
+  constructor(@Inject(LOCALE_ID) private _locale: string) {}
+
+  transform(value: any, pattern: string = 'mediumDate'): string|null {
+    if (value == null || value === '' || value !== value) return null;
+
+    let date: Date;
+
+    if (typeof value === 'string') {
+      value = value.trim();
+    }
+
+    if (isDate(value)) {
+      date = value;
+    } else if (!isNaN(value - parseFloat(value))) {
+      date = new Date(parseFloat(value));
+    } else if (typeof value === 'string' && /^(\d{4}-\d{1,2}-\d{1,2})$/.test(value)) {
+      /**
+       * For ISO Strings without time the day, month and year must be extracted from the ISO String
+       * before Date creation to avoid time offset and errors in the new Date.
+       * If we only replace '-' with ',' in the ISO String ("2015,01,01"), and try to create a new
+       * date, some browsers (e.g. IE 9) will throw an invalid Date error
+       * If we leave the '-' ("2015-01-01") and try to create a new Date("2015-01-01") the
+       * timeoffset
+       * is applied
+       * Note: ISO months are 0 for January, 1 for February, ...
+       */
+      const [y, m, d] = value.split('-').map((val: string) => parseInt(val, 10));
+      date = new Date(y, m - 1, d);
+    } else {
+      date = new Date(value);
+    }
+
+    if (!isDate(date)) {
+      let match: RegExpMatchArray|null;
+      if ((typeof value === 'string') && (match = value.match(ISO8601_DATE_REGEX))) {
+        date = isoStringToDate(match);
+      } else {
+        throw invalidPipeArgumentError(DeprecatedDatePipe, value);
+      }
+    }
+
+    return DateFormatter.format(
+        date, this._locale, DeprecatedDatePipe._ALIASES[pattern] || pattern);
+  }
+}
+
+function isDate(value: any): value is Date {
+  return value instanceof Date && !isNaN(value.valueOf());
+}
diff --git a/packages/common/src/pipes/deprecated/index.ts b/packages/common/src/pipes/deprecated/index.ts
new file mode 100644
index 000000000000..2d2bbd7c900e
--- /dev/null
+++ b/packages/common/src/pipes/deprecated/index.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 {Provider} from '@angular/core';
+import {DeprecatedDatePipe} from './date_pipe';
+import {DeprecatedCurrencyPipe, DeprecatedDecimalPipe, DeprecatedPercentPipe} from './number_pipe';
+
+export {
+  DeprecatedCurrencyPipe,
+  DeprecatedDatePipe,
+  DeprecatedDecimalPipe,
+  DeprecatedPercentPipe,
+};
+
+
+/**
+ * A collection of deprecated i18n pipes that require intl api
+ *
+ * @deprecated from v5
+ */
+export const COMMON_DEPRECATED_I18N_PIPES: Provider[] =
+    [DeprecatedDecimalPipe, DeprecatedPercentPipe, DeprecatedCurrencyPipe, DeprecatedDatePipe];
diff --git a/packages/common/src/pipes/deprecated/intl.ts b/packages/common/src/pipes/deprecated/intl.ts
new file mode 100644
index 000000000000..ff7fa9808a9e
--- /dev/null
+++ b/packages/common/src/pipes/deprecated/intl.ts
@@ -0,0 +1,221 @@
+/**
+ * @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 {NumberFormatStyle} from '../../i18n/locale_data_api';
+
+export class NumberFormatter {
+  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,
+      maximumFractionDigits,
+      style: NumberFormatStyle[style].toLowerCase()
+    };
+
+    if (style == NumberFormatStyle.Currency) {
+      options.currency = typeof currency == 'string' ? currency : undefined;
+      options.currencyDisplay = currencyAsSymbol ? 'symbol' : 'code';
+    }
+    return new Intl.NumberFormat(locale, options).format(num);
+  }
+}
+
+type DateFormatterFn = (date: Date, locale: string) => string;
+
+const DATE_FORMATS_SPLIT =
+    /((?:[^yMLdHhmsazZEwGjJ']+)|(?:'(?:[^']|'')*')|(?:E+|y+|M+|L+|d+|H+|h+|J+|j+|m+|s+|a|z|Z|G+|w+))(.*)/;
+
+const PATTERN_ALIASES: {[format: string]: DateFormatterFn} = {
+  // Keys are quoted so they do not get renamed during closure compilation.
+  'yMMMdjms': datePartGetterFactory(combine([
+    digitCondition('year', 1),
+    nameCondition('month', 3),
+    digitCondition('day', 1),
+    digitCondition('hour', 1),
+    digitCondition('minute', 1),
+    digitCondition('second', 1),
+  ])),
+  'yMdjm': datePartGetterFactory(combine([
+    digitCondition('year', 1), digitCondition('month', 1), digitCondition('day', 1),
+    digitCondition('hour', 1), digitCondition('minute', 1)
+  ])),
+  'yMMMMEEEEd': datePartGetterFactory(combine([
+    digitCondition('year', 1), nameCondition('month', 4), nameCondition('weekday', 4),
+    digitCondition('day', 1)
+  ])),
+  'yMMMMd': datePartGetterFactory(
+      combine([digitCondition('year', 1), nameCondition('month', 4), digitCondition('day', 1)])),
+  'yMMMd': datePartGetterFactory(
+      combine([digitCondition('year', 1), nameCondition('month', 3), digitCondition('day', 1)])),
+  'yMd': datePartGetterFactory(
+      combine([digitCondition('year', 1), digitCondition('month', 1), digitCondition('day', 1)])),
+  'jms': datePartGetterFactory(combine(
+      [digitCondition('hour', 1), digitCondition('second', 1), digitCondition('minute', 1)])),
+  'jm': datePartGetterFactory(combine([digitCondition('hour', 1), digitCondition('minute', 1)]))
+};
+
+const DATE_FORMATS: {[format: string]: DateFormatterFn} = {
+  // Keys are quoted so they do not get renamed.
+  'yyyy': datePartGetterFactory(digitCondition('year', 4)),
+  'yy': datePartGetterFactory(digitCondition('year', 2)),
+  'y': datePartGetterFactory(digitCondition('year', 1)),
+  'MMMM': datePartGetterFactory(nameCondition('month', 4)),
+  'MMM': datePartGetterFactory(nameCondition('month', 3)),
+  'MM': datePartGetterFactory(digitCondition('month', 2)),
+  'M': datePartGetterFactory(digitCondition('month', 1)),
+  'LLLL': datePartGetterFactory(nameCondition('month', 4)),
+  'L': datePartGetterFactory(nameCondition('month', 1)),
+  'dd': datePartGetterFactory(digitCondition('day', 2)),
+  'd': datePartGetterFactory(digitCondition('day', 1)),
+  'HH': digitModifier(
+      hourExtractor(datePartGetterFactory(hour12Modify(digitCondition('hour', 2), false)))),
+  'H': hourExtractor(datePartGetterFactory(hour12Modify(digitCondition('hour', 1), false))),
+  'hh': digitModifier(
+      hourExtractor(datePartGetterFactory(hour12Modify(digitCondition('hour', 2), true)))),
+  'h': hourExtractor(datePartGetterFactory(hour12Modify(digitCondition('hour', 1), true))),
+  'jj': datePartGetterFactory(digitCondition('hour', 2)),
+  'j': datePartGetterFactory(digitCondition('hour', 1)),
+  'mm': digitModifier(datePartGetterFactory(digitCondition('minute', 2))),
+  'm': datePartGetterFactory(digitCondition('minute', 1)),
+  'ss': digitModifier(datePartGetterFactory(digitCondition('second', 2))),
+  's': datePartGetterFactory(digitCondition('second', 1)),
+  // while ISO 8601 requires fractions to be prefixed with `.` or `,`
+  // we can be just safely rely on using `sss` since we currently don't support single or two digit
+  // fractions
+  'sss': datePartGetterFactory(digitCondition('second', 3)),
+  'EEEE': datePartGetterFactory(nameCondition('weekday', 4)),
+  'EEE': datePartGetterFactory(nameCondition('weekday', 3)),
+  'EE': datePartGetterFactory(nameCondition('weekday', 2)),
+  'E': datePartGetterFactory(nameCondition('weekday', 1)),
+  'a': hourClockExtractor(datePartGetterFactory(hour12Modify(digitCondition('hour', 1), true))),
+  'Z': timeZoneGetter('short'),
+  'z': timeZoneGetter('long'),
+  'ww': datePartGetterFactory({}),  // Week of year, padded (00-53). Week 01 is the week with the
+                                    // first Thursday of the year. not support ?
+  'w':
+      datePartGetterFactory({}),  // Week of year (0-53). Week 1 is the week with the first Thursday
+                                  // of the year not support ?
+  'G': datePartGetterFactory(nameCondition('era', 1)),
+  'GG': datePartGetterFactory(nameCondition('era', 2)),
+  'GGG': datePartGetterFactory(nameCondition('era', 3)),
+  'GGGG': datePartGetterFactory(nameCondition('era', 4))
+};
+
+
+function digitModifier(inner: DateFormatterFn): DateFormatterFn {
+  return function(date: Date, locale: string): string {
+    const result = inner(date, locale);
+    return result.length == 1 ? '0' + result : result;
+  };
+}
+
+function hourClockExtractor(inner: DateFormatterFn): DateFormatterFn {
+  return function(date: Date, locale: string): string { return inner(date, locale).split(' ')[1]; };
+}
+
+function hourExtractor(inner: DateFormatterFn): DateFormatterFn {
+  return function(date: Date, locale: string): string { return inner(date, locale).split(' ')[0]; };
+}
+
+function intlDateFormat(date: Date, locale: string, options: Intl.DateTimeFormatOptions): string {
+  return new Intl.DateTimeFormat(locale, options).format(date).replace(/[\u200e\u200f]/g, '');
+}
+
+function timeZoneGetter(timezone: string): DateFormatterFn {
+  // To workaround `Intl` API restriction for single timezone let format with 24 hours
+  const options = {hour: '2-digit', hour12: false, timeZoneName: timezone};
+  return function(date: Date, locale: string): string {
+    const result = intlDateFormat(date, locale, options);
+    // Then extract first 3 letters that related to hours
+    return result ? result.substring(3) : '';
+  };
+}
+
+function hour12Modify(
+    options: Intl.DateTimeFormatOptions, value: boolean): Intl.DateTimeFormatOptions {
+  options.hour12 = value;
+  return options;
+}
+
+function digitCondition(prop: string, len: number): Intl.DateTimeFormatOptions {
+  const result: {[k: string]: string} = {};
+  result[prop] = len === 2 ? '2-digit' : 'numeric';
+  return result;
+}
+
+function nameCondition(prop: string, len: number): Intl.DateTimeFormatOptions {
+  const result: {[k: string]: string} = {};
+  if (len < 4) {
+    result[prop] = len > 1 ? 'short' : 'narrow';
+  } else {
+    result[prop] = 'long';
+  }
+
+  return result;
+}
+
+function combine(options: Intl.DateTimeFormatOptions[]): Intl.DateTimeFormatOptions {
+  return options.reduce((merged, opt) => ({...merged, ...opt}), {});
+}
+
+function datePartGetterFactory(ret: Intl.DateTimeFormatOptions): DateFormatterFn {
+  return (date: Date, locale: string): string => intlDateFormat(date, locale, ret);
+}
+
+const DATE_FORMATTER_CACHE = new Map<string, string[]>();
+
+function dateFormatter(format: string, date: Date, locale: string): string {
+  const fn = PATTERN_ALIASES[format];
+
+  if (fn) return fn(date, locale);
+
+  const cacheKey = format;
+  let parts = DATE_FORMATTER_CACHE.get(cacheKey);
+
+  if (!parts) {
+    parts = [];
+    let match: RegExpExecArray|null;
+    DATE_FORMATS_SPLIT.exec(format);
+
+    let _format: string|null = format;
+    while (_format) {
+      match = DATE_FORMATS_SPLIT.exec(_format);
+      if (match) {
+        parts = parts.concat(match.slice(1));
+        _format = parts.pop() !;
+      } else {
+        parts.push(_format);
+        _format = null;
+      }
+    }
+
+    DATE_FORMATTER_CACHE.set(cacheKey, parts);
+  }
+
+  return parts.reduce((text, part) => {
+    const fn = DATE_FORMATS[part];
+    return text + (fn ? fn(date, locale) : partToTime(part));
+  }, '');
+}
+
+function partToTime(part: string): string {
+  return part === '\'\'' ? '\'' : part.replace(/(^'|'$)/g, '').replace(/''/g, '\'');
+}
+
+export class DateFormatter {
+  static format(date: Date, locale: string, pattern: string): string {
+    return dateFormatter(pattern, date, locale);
+  }
+}
diff --git a/packages/common/src/pipes/deprecated/number_pipe.ts b/packages/common/src/pipes/deprecated/number_pipe.ts
new file mode 100644
index 000000000000..6195edffcc1d
--- /dev/null
+++ b/packages/common/src/pipes/deprecated/number_pipe.ts
@@ -0,0 +1,165 @@
+/**
+ * @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, LOCALE_ID, Pipe, PipeTransform, Type} from '@angular/core';
+import {NUMBER_FORMAT_REGEXP, parseIntAutoRadix} from '../../i18n/format_number';
+import {NumberFormatStyle} from '../../i18n/locale_data_api';
+import {invalidPipeArgumentError} from '../invalid_pipe_argument_error';
+import {NumberFormatter} from './intl';
+
+function formatNumber(
+    pipe: Type<any>, locale: string, value: number | string, style: NumberFormatStyle,
+    digits?: string | null, currency: string | null = null,
+    currencyAsSymbol: boolean = false): string|null {
+  if (value == null) return null;
+
+  // Convert strings to numbers
+  value = typeof value === 'string' && !isNaN(+value - parseFloat(value)) ? +value : value;
+  if (typeof value !== 'number') {
+    throw invalidPipeArgumentError(pipe, value);
+  }
+
+  let minInt: number|undefined;
+  let minFraction: number|undefined;
+  let maxFraction: number|undefined;
+  if (style !== NumberFormatStyle.Currency) {
+    // rely on Intl default for currency
+    minInt = 1;
+    minFraction = 0;
+    maxFraction = 3;
+  }
+
+  if (digits) {
+    const parts = digits.match(NUMBER_FORMAT_REGEXP);
+    if (parts === null) {
+      throw new Error(`${digits} is not a valid digit info for number pipes`);
+    }
+    if (parts[1] != null) {  // min integer digits
+      minInt = parseIntAutoRadix(parts[1]);
+    }
+    if (parts[3] != null) {  // min fraction digits
+      minFraction = parseIntAutoRadix(parts[3]);
+    }
+    if (parts[5] != null) {  // max fraction digits
+      maxFraction = parseIntAutoRadix(parts[5]);
+    }
+  }
+
+  return NumberFormatter.format(value as number, locale, style, {
+    minimumIntegerDigits: minInt,
+    minimumFractionDigits: minFraction,
+    maximumFractionDigits: maxFraction,
+    currency: currency,
+    currencyAsSymbol: currencyAsSymbol,
+  });
+}
+
+/**
+ * @ngModule CommonModule
+ *
+ * Formats a number as text. Group sizing and separator and other locale-specific
+ * configurations are based on the active locale.
+ *
+ * where `expression` is a number:
+ *  - `digitInfo` is a `string` which has a following format: <br>
+ *     <code>{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}</code>
+ *   - `minIntegerDigits` is the minimum number of integer digits to use. Defaults to `1`.
+ *   - `minFractionDigits` is the minimum number of digits after fraction. Defaults to `0`.
+ *   - `maxFractionDigits` is the maximum number of digits after fraction. Defaults to `3`.
+ *
+ * For more information on the acceptable range for each of these numbers and other
+ * 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 [Browser Support](guide/browser-support) for details.
+ *
+ * @usageNotes
+ *
+ * ### Example
+ *
+ * {@example common/pipes/ts/number_pipe.ts region='DeprecatedNumberPipe'}
+ *
+ */
+@Pipe({name: 'number'})
+export class DeprecatedDecimalPipe implements PipeTransform {
+  constructor(@Inject(LOCALE_ID) private _locale: string) {}
+
+  transform(value: any, digits?: string): string|null {
+    return formatNumber(
+        DeprecatedDecimalPipe, this._locale, value, NumberFormatStyle.Decimal, digits);
+  }
+}
+
+/**
+ * @ngModule CommonModule
+ *
+ * @description
+ *
+ * Formats a number as percentage according to locale rules.
+ *
+ * - `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 [Browser Support](guide/browser-support) for details.
+ *
+ * @usageNotes
+ *
+ * ### Example
+ *
+ * {@example common/pipes/ts/percent_pipe.ts region='DeprecatedPercentPipe'}
+ *
+ *
+ */
+@Pipe({name: 'percent'})
+export class DeprecatedPercentPipe implements PipeTransform {
+  constructor(@Inject(LOCALE_ID) private _locale: string) {}
+
+  transform(value: any, digits?: string): string|null {
+    return formatNumber(
+        DeprecatedPercentPipe, this._locale, value, NumberFormatStyle.Percent, digits);
+  }
+}
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Formats a number as currency using locale rules.
+ *
+ * Use `currency` to format a number as currency.
+ *
+ * - `currencyCode` is the [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code, such
+ *    as `USD` for the US dollar and `EUR` for the euro.
+ * - `symbolDisplay` is a boolean indicating whether to use the currency symbol or code.
+ *   - `true`: use symbol (e.g. `$`).
+ *   - `false`(default): use code (e.g. `USD`).
+ * - `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 [Browser Support](guide/browser-support) for details.
+ *
+ * @usageNotes
+ *
+ * ### Example
+ *
+ * {@example common/pipes/ts/currency_pipe.ts region='DeprecatedCurrencyPipe'}
+ *
+ *
+ */
+@Pipe({name: 'currency'})
+export class DeprecatedCurrencyPipe implements PipeTransform {
+  constructor(@Inject(LOCALE_ID) private _locale: string) {}
+
+  transform(
+      value: any, currencyCode: string = 'USD', symbolDisplay: boolean = false,
+      digits?: string): string|null {
+    return formatNumber(
+        DeprecatedCurrencyPipe, this._locale, value, NumberFormatStyle.Currency, digits,
+        currencyCode, symbolDisplay);
+  }
+}
diff --git a/packages/common/src/pipes/i18n_plural_pipe.ts b/packages/common/src/pipes/i18n_plural_pipe.ts
new file mode 100644
index 000000000000..5ecdf3d5f720
--- /dev/null
+++ b/packages/common/src/pipes/i18n_plural_pipe.ts
@@ -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
+ */
+
+import {LOCALE_ID, Pipe, PipeTransform} from '@angular/core';
+import {NgLocalization, getPluralCategory} from '../i18n/localization';
+import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
+
+const _INTERPOLATION_REGEXP: RegExp = /#/g;
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Maps a value to a string that pluralizes the value according to locale rules.
+ *
+ * @usageNotes
+ *
+ * ### Example
+ *
+ * {@example common/pipes/ts/i18n_pipe.ts region='I18nPluralPipeComponent'}
+ *
+ * @experimental
+ */
+@Pipe({name: 'i18nPlural', pure: true})
+export class I18nPluralPipe implements PipeTransform {
+  constructor(private _localization: NgLocalization) {}
+
+  /**
+   * @param value the number to be formatted
+   * @param pluralMap an object that mimics the ICU format, see
+   * http://userguide.icu-project.org/formatparse/messages.
+   * @param locale a `string` defining the locale to use (uses the current {@link LOCALE_ID} by
+   * default).
+   */
+  transform(value: number, pluralMap: {[count: string]: string}, locale?: string): string {
+    if (value == null) return '';
+
+    if (typeof pluralMap !== 'object' || pluralMap === null) {
+      throw invalidPipeArgumentError(I18nPluralPipe, pluralMap);
+    }
+
+    const key = getPluralCategory(value, Object.keys(pluralMap), this._localization, locale);
+
+    return pluralMap[key].replace(_INTERPOLATION_REGEXP, value.toString());
+  }
+}
diff --git a/packages/common/src/pipes/i18n_select_pipe.ts b/packages/common/src/pipes/i18n_select_pipe.ts
new file mode 100644
index 000000000000..c276f9992474
--- /dev/null
+++ b/packages/common/src/pipes/i18n_select_pipe.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 {Pipe, PipeTransform} from '@angular/core';
+import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Generic selector that displays the string that matches the current value.
+ *
+ * If none of the keys of the `mapping` match the `value`, then the content
+ * of the `other` key is returned when present, otherwise an empty string is returned.
+ *
+ * @usageNotes
+ *
+ * ### Example
+ *
+ * {@example common/pipes/ts/i18n_pipe.ts region='I18nSelectPipeComponent'}
+ *
+ * @experimental
+ */
+@Pipe({name: 'i18nSelect', pure: true})
+export class I18nSelectPipe implements PipeTransform {
+  /**
+   * @param value a string to be internationalized.
+   * @param mapping an object that indicates the text that should be displayed
+   * for different values of the provided `value`.
+   */
+  transform(value: string|null|undefined, mapping: {[key: string]: string}): string {
+    if (value == null) return '';
+
+    if (typeof mapping !== 'object' || typeof value !== 'string') {
+      throw invalidPipeArgumentError(I18nSelectPipe, mapping);
+    }
+
+    if (mapping.hasOwnProperty(value)) {
+      return mapping[value];
+    }
+
+    if (mapping.hasOwnProperty('other')) {
+      return mapping['other'];
+    }
+
+    return '';
+  }
+}
diff --git a/packages/common/src/pipes/index.ts b/packages/common/src/pipes/index.ts
new file mode 100644
index 000000000000..9dc1e8d10a29
--- /dev/null
+++ b/packages/common/src/pipes/index.ts
@@ -0,0 +1,59 @@
+/**
+ * @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
+ * This module provides a set of common Pipes.
+ */
+import {AsyncPipe} from './async_pipe';
+import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from './case_conversion_pipes';
+import {DatePipe} from './date_pipe';
+import {I18nPluralPipe} from './i18n_plural_pipe';
+import {I18nSelectPipe} from './i18n_select_pipe';
+import {JsonPipe} from './json_pipe';
+import {KeyValue, KeyValuePipe} from './keyvalue_pipe';
+import {CurrencyPipe, DecimalPipe, PercentPipe} from './number_pipe';
+import {SlicePipe} from './slice_pipe';
+
+export {
+  AsyncPipe,
+  CurrencyPipe,
+  DatePipe,
+  DecimalPipe,
+  KeyValue,
+  KeyValuePipe,
+  I18nPluralPipe,
+  I18nSelectPipe,
+  JsonPipe,
+  LowerCasePipe,
+  PercentPipe,
+  SlicePipe,
+  TitleCasePipe,
+  UpperCasePipe,
+};
+
+
+/**
+ * A collection of Angular pipes that are likely to be used in each and every application.
+ */
+export const COMMON_PIPES = [
+  AsyncPipe,
+  UpperCasePipe,
+  LowerCasePipe,
+  JsonPipe,
+  SlicePipe,
+  DecimalPipe,
+  PercentPipe,
+  TitleCasePipe,
+  CurrencyPipe,
+  DatePipe,
+  I18nPluralPipe,
+  I18nSelectPipe,
+  KeyValuePipe,
+];
diff --git a/packages/common/src/pipes/invalid_pipe_argument_error.ts b/packages/common/src/pipes/invalid_pipe_argument_error.ts
new file mode 100644
index 000000000000..92add35e0bc6
--- /dev/null
+++ b/packages/common/src/pipes/invalid_pipe_argument_error.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 {Type, ɵstringify as stringify} from '@angular/core';
+
+export function invalidPipeArgumentError(type: Type<any>, value: Object) {
+  return Error(`InvalidPipeArgument: '${value}' for pipe '${stringify(type)}'`);
+}
diff --git a/packages/common/src/pipes/json_pipe.ts b/packages/common/src/pipes/json_pipe.ts
new file mode 100644
index 000000000000..9603b59991d7
--- /dev/null
+++ b/packages/common/src/pipes/json_pipe.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 {Pipe, PipeTransform} from '@angular/core';
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Converts a value into its JSON-format representation.  Useful for debugging.
+ *
+ * @usageNotes
+ *
+ * The following component uses a JSON pipe to convert an object
+ * to JSON format, and displays the string in both formats for comparison.
+ *
+ * {@example common/pipes/ts/json_pipe.ts region='JsonPipe'}
+ *
+ */
+@Pipe({name: 'json', pure: false})
+export class JsonPipe implements PipeTransform {
+  /**
+   * @param value A value of any type to convert into a JSON-format string.
+   */
+  transform(value: any): string { return JSON.stringify(value, null, 2); }
+}
diff --git a/packages/common/src/pipes/keyvalue_pipe.ts b/packages/common/src/pipes/keyvalue_pipe.ts
new file mode 100644
index 000000000000..ec78bfc9415c
--- /dev/null
+++ b/packages/common/src/pipes/keyvalue_pipe.ts
@@ -0,0 +1,112 @@
+/**
+ * @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 {KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Pipe, PipeTransform} from '@angular/core';
+
+function makeKeyValuePair<K, V>(key: K, value: V): KeyValue<K, V> {
+  return {key: key, value: value};
+}
+
+/**
+ * A key value pair.
+ * Usually used to represent the key value pairs from a Map or Object.
+ */
+export interface KeyValue<K, V> {
+  key: K;
+  value: V;
+}
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Transforms Object or Map into an array of key value pairs.
+ *
+ * The output array will be ordered by keys.
+ * By default the comparator will be by Unicode point value.
+ * You can optionally pass a compareFn if your keys are complex types.
+ *
+ * ## Examples
+ *
+ * This examples show how an Object or a Map and be iterated by ngFor with the use of this keyvalue
+ * pipe.
+ *
+ * {@example common/pipes/ts/keyvalue_pipe.ts region='KeyValuePipe'}
+ */
+@Pipe({name: 'keyvalue', pure: false})
+export class KeyValuePipe implements PipeTransform {
+  constructor(private readonly differs: KeyValueDiffers) {}
+
+  // TODO(issue/24571): remove '!'.
+  private differ !: KeyValueDiffer<any, any>;
+  // TODO(issue/24571): remove '!'.
+  private keyValues !: Array<KeyValue<any, any>>;
+
+  transform<K, V>(input: null, compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number): null;
+  transform<V>(
+      input: {[key: string]: V}|Map<string, V>,
+      compareFn?: (a: KeyValue<string, V>, b: KeyValue<string, V>) => number):
+      Array<KeyValue<string, V>>;
+  transform<V>(
+      input: {[key: number]: V}|Map<number, V>,
+      compareFn?: (a: KeyValue<number, V>, b: KeyValue<number, V>) => number):
+      Array<KeyValue<number, V>>;
+  transform<K, V>(input: Map<K, V>, compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number):
+      Array<KeyValue<K, V>>;
+  transform<K, V>(
+      input: null|{[key: string]: V, [key: number]: V}|Map<K, V>,
+      compareFn: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number = defaultComparator):
+      Array<KeyValue<K, V>>|null {
+    if (!input || (!(input instanceof Map) && typeof input !== 'object')) {
+      return null;
+    }
+
+    if (!this.differ) {
+      // make a differ for whatever type we've been passed in
+      this.differ = this.differs.find(input).create();
+    }
+
+    const differChanges: KeyValueChanges<K, V>|null = this.differ.diff(input as any);
+
+    if (differChanges) {
+      this.keyValues = [];
+      differChanges.forEachItem((r: KeyValueChangeRecord<K, V>) => {
+        this.keyValues.push(makeKeyValuePair(r.key, r.currentValue !));
+      });
+      this.keyValues.sort(compareFn);
+    }
+    return this.keyValues;
+  }
+}
+
+export function defaultComparator<K, V>(
+    keyValueA: KeyValue<K, V>, keyValueB: KeyValue<K, V>): number {
+  const a = keyValueA.key;
+  const b = keyValueB.key;
+  // if same exit with 0;
+  if (a === b) return 0;
+  // make sure that undefined are at the end of the sort.
+  if (a === undefined) return 1;
+  if (b === undefined) return -1;
+  // make sure that nulls are at the end of the sort.
+  if (a === null) return 1;
+  if (b === null) return -1;
+  if (typeof a == 'string' && typeof b == 'string') {
+    return a < b ? -1 : 1;
+  }
+  if (typeof a == 'number' && typeof b == 'number') {
+    return a - b;
+  }
+  if (typeof a == 'boolean' && typeof b == 'boolean') {
+    return a < b ? -1 : 1;
+  }
+  // `a` and `b` are of different types. Compare their string values.
+  const aString = String(a);
+  const bString = String(b);
+  return aString == bString ? 0 : aString < bString ? -1 : 1;
+}
diff --git a/packages/common/src/pipes/number_pipe.ts b/packages/common/src/pipes/number_pipe.ts
new file mode 100644
index 000000000000..144949c578a6
--- /dev/null
+++ b/packages/common/src/pipes/number_pipe.ts
@@ -0,0 +1,240 @@
+/**
+ * @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, LOCALE_ID, Pipe, PipeTransform} from '@angular/core';
+import {formatCurrency, formatNumber, formatPercent} from '../i18n/format_number';
+import {getCurrencySymbol} from '../i18n/locale_data_api';
+import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Transforms a number into a string,
+ * formatted according to locale rules that determine group sizing and
+ * separator, decimal-point character, and other locale-specific
+ * configurations.
+ *
+ * If no parameters are specified, the function rounds off to the nearest value using this
+ * [rounding method](https://en.wikibooks.org/wiki/Arithmetic/Rounding).
+ * The behavior differs from that of the JavaScript ```Math.round()``` function.
+ * In the following case for example, the pipe rounds down where
+ * ```Math.round()``` rounds up:
+ *
+ * ```html
+ * -2.5 | number:'1.0-0'
+ * > -3
+ * Math.round(-2.5)
+ * > -2
+ * ```
+ *
+ * @see `formatNumber()`
+ *
+ * @usageNotes
+ * The following code shows how the pipe transforms numbers
+ * into text strings, according to various format specifications,
+ * where the caller's default locale is `en-US`.
+ *
+ * ### Example
+ *
+ * <code-example path="common/pipes/ts/number_pipe.ts" region='NumberPipe'></code-example>
+ *
+ */
+@Pipe({name: 'number'})
+export class DecimalPipe implements PipeTransform {
+  constructor(@Inject(LOCALE_ID) private _locale: string) {}
+
+  /**
+   * @param value The number to be formatted.
+   * @param digitsInfo Decimal representation options, specified by a string
+   * in the following format:<br>
+   * <code>{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}</code>.
+   *   - `minIntegerDigits`: The minimum number of integer digits before the decimal point.
+   * Default is `1`.
+   *   - `minFractionDigits`: The minimum number of digits after the decimal point.
+   * Default is `0`.
+   *   - `maxFractionDigits`: The maximum number of digits after the decimal point.
+   * Default is `3`.
+   * @param locale A locale code for the locale format rules to use.
+   * When not supplied, uses the value of `LOCALE_ID`, which is `en-US` by default.
+   * See [Setting your app locale](guide/i18n#setting-up-the-locale-of-your-app).
+   */
+  transform(value: any, digitsInfo?: string, locale?: string): string|null {
+    if (isEmpty(value)) return null;
+
+    locale = locale || this._locale;
+
+    try {
+      const num = strToNumber(value);
+      return formatNumber(num, locale, digitsInfo);
+    } catch (error) {
+      throw invalidPipeArgumentError(DecimalPipe, error.message);
+    }
+  }
+}
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Transforms a number to a percentage
+ * string, formatted according to locale rules that determine group sizing and
+ * separator, decimal-point character, and other locale-specific
+ * configurations.
+ *
+ * @see `formatPercent()`
+ *
+ * @usageNotes
+ * The following code shows how the pipe transforms numbers
+ * into text strings, according to various format specifications,
+ * where the caller's default locale is `en-US`.
+ *
+ * <code-example path="common/pipes/ts/percent_pipe.ts" region='PercentPipe'></code-example>
+ *
+ *
+ */
+@Pipe({name: 'percent'})
+export class PercentPipe implements PipeTransform {
+  constructor(@Inject(LOCALE_ID) private _locale: string) {}
+
+  /**
+   *
+   * @param value The number to be formatted as a percentage.
+   * @param digitsInfo Decimal representation options, specified by a string
+   * in the following format:<br>
+   * <code>{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}</code>.
+   *   - `minIntegerDigits`: The minimum number of integer digits before the decimal point.
+   * Default is `1`.
+   *   - `minFractionDigits`: The minimum number of digits after the decimal point.
+   * Default is `0`.
+   *   - `maxFractionDigits`: The maximum number of digits after the decimal point.
+   * Default is `3`.
+   * @param locale A locale code for the locale format rules to use.
+   * When not supplied, uses the value of `LOCALE_ID`, which is `en-US` by default.
+   * See [Setting your app locale](guide/i18n#setting-up-the-locale-of-your-app).
+   */
+  transform(value: any, digitsInfo?: string, locale?: string): string|null {
+    if (isEmpty(value)) return null;
+
+    locale = locale || this._locale;
+
+    try {
+      const num = strToNumber(value);
+      return formatPercent(num, locale, digitsInfo);
+    } catch (error) {
+      throw invalidPipeArgumentError(PercentPipe, error.message);
+    }
+  }
+}
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Transforms a number to a currency string, formatted according to locale rules
+ * that determine group sizing and separator, decimal-point character,
+ * and other locale-specific configurations.
+ *
+ * @see `getCurrencySymbol()`
+ * @see `formatCurrency()`
+ *
+ * @usageNotes
+ * The following code shows how the pipe transforms numbers
+ * into text strings, according to various format specifications,
+ * where the caller's default locale is `en-US`.
+ *
+ * <code-example path="common/pipes/ts/currency_pipe.ts" region='CurrencyPipe'></code-example>
+ *
+ *
+ */
+@Pipe({name: 'currency'})
+export class CurrencyPipe implements PipeTransform {
+  constructor(@Inject(LOCALE_ID) private _locale: string) {}
+
+  /**
+   *
+   * @param value The number to be formatted as currency.
+   * @param currencyCode The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code,
+   * such as `USD` for the US dollar and `EUR` for the euro.
+   * @param display The format for the currency indicator. One of the following:
+   *   - `code`: Show the code (such as `USD`).
+   *   - `symbol`(default): Show the symbol (such as `$`).
+   *   - `symbol-narrow`: Use the narrow symbol for locales that have two symbols for their
+   * currency.
+   * For example, the Canadian dollar CAD has the symbol `CA$` and the symbol-narrow `$`. If the
+   * locale has no narrow symbol, uses the standard symbol for the locale.
+   *   - String: Use the given string value instead of a code or a symbol.
+   *   - Boolean (marked deprecated in v5): `true` for symbol and false for `code`.
+   *
+   * @param digitsInfo Decimal representation options, specified by a string
+   * in the following format:<br>
+   * <code>{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}</code>.
+   *   - `minIntegerDigits`: The minimum number of integer digits before the decimal point.
+   * Default is `1`.
+   *   - `minFractionDigits`: The minimum number of digits after the decimal point.
+   * Default is `0`.
+   *   - `maxFractionDigits`: The maximum number of digits after the decimal point.
+   * Default is `3`.
+   * If not provided, the number will be formatted with the proper amount of digits,
+   * depending on what the [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) specifies.
+   * For example, the Canadian dollar has 2 digits, whereas the Chilean peso has none.
+   * @param locale A locale code for the locale format rules to use.
+   * When not supplied, uses the value of `LOCALE_ID`, which is `en-US` by default.
+   * See [Setting your app locale](guide/i18n#setting-up-the-locale-of-your-app).
+   */
+  transform(
+      value: any, currencyCode?: string,
+      display: 'code'|'symbol'|'symbol-narrow'|string|boolean = 'symbol', digitsInfo?: string,
+      locale?: string): string|null {
+    if (isEmpty(value)) return null;
+
+    locale = locale || this._locale;
+
+    if (typeof display === 'boolean') {
+      if (<any>console && <any>console.warn) {
+        console.warn(
+            `Warning: the currency pipe has been changed in Angular v5. The symbolDisplay option (third parameter) is now a string instead of a boolean. The accepted values are "code", "symbol" or "symbol-narrow".`);
+      }
+      display = display ? 'symbol' : 'code';
+    }
+
+    let currency: string = currencyCode || 'USD';
+    if (display !== 'code') {
+      if (display === 'symbol' || display === 'symbol-narrow') {
+        currency = getCurrencySymbol(currency, display === 'symbol' ? 'wide' : 'narrow', locale);
+      } else {
+        currency = display;
+      }
+    }
+
+    try {
+      const num = strToNumber(value);
+      return formatCurrency(num, locale, currency, currencyCode, digitsInfo);
+    } catch (error) {
+      throw invalidPipeArgumentError(CurrencyPipe, error.message);
+    }
+  }
+}
+
+function isEmpty(value: any): boolean {
+  return value == null || value === '' || value !== value;
+}
+
+/**
+ * Transforms a string into a number (if needed).
+ */
+function strToNumber(value: number | string): number {
+  // Convert strings to numbers
+  if (typeof value === 'string' && !isNaN(Number(value) - parseFloat(value))) {
+    return Number(value);
+  }
+  if (typeof value !== 'number') {
+    throw new Error(`${value} is not a number`);
+  }
+  return value;
+}
diff --git a/packages/common/src/pipes/slice_pipe.ts b/packages/common/src/pipes/slice_pipe.ts
new file mode 100644
index 000000000000..60fed51fe1dd
--- /dev/null
+++ b/packages/common/src/pipes/slice_pipe.ts
@@ -0,0 +1,75 @@
+/**
+ * @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 {Pipe, PipeTransform} from '@angular/core';
+import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
+
+/**
+ * @ngModule CommonModule
+ * @description
+ *
+ * Creates a new `Array` or `String` containing a subset (slice) of the elements.
+ *
+ * @usageNotes
+ *
+ * All behavior is based on the expected behavior of the JavaScript API `Array.prototype.slice()`
+ * and `String.prototype.slice()`.
+ *
+ * When operating on an `Array`, the returned `Array` is always a copy even when all
+ * the elements are being returned.
+ *
+ * When operating on a blank value, the pipe returns the blank value.
+ *
+ * ### List Example
+ *
+ * This `ngFor` example:
+ *
+ * {@example common/pipes/ts/slice_pipe.ts region='SlicePipe_list'}
+ *
+ * produces the following:
+ *
+ * ```html
+ * <li>b</li>
+ * <li>c</li>
+ * ```
+ *
+ * ### String Examples
+ *
+ * {@example common/pipes/ts/slice_pipe.ts region='SlicePipe_string'}
+ *
+ */
+
+@Pipe({name: 'slice', pure: false})
+export class SlicePipe implements PipeTransform {
+  /**
+   * @param value a list or a string to be sliced.
+   * @param start the starting index of the subset to return:
+   *   - **a positive integer**: return the item at `start` index and all items after
+   *     in the list or string expression.
+   *   - **a negative integer**: return the item at `start` index from the end and all items after
+   *     in the list or string expression.
+   *   - **if positive and greater than the size of the expression**: return an empty list or
+   * string.
+   *   - **if negative and greater than the size of the expression**: return entire list or string.
+   * @param end the ending index of the subset to return:
+   *   - **omitted**: return all items until the end.
+   *   - **if positive**: return all items before `end` index of the list or string.
+   *   - **if negative**: return all items before `end` index from the end of the list or string.
+   */
+  transform(value: any, start: number, end?: number): any {
+    if (value == null) return value;
+
+    if (!this.supports(value)) {
+      throw invalidPipeArgumentError(SlicePipe, value);
+    }
+
+    return value.slice(start, end);
+  }
+
+  private supports(obj: any): boolean { return typeof obj === 'string' || Array.isArray(obj); }
+}
diff --git a/packages/common/src/platform_id.ts b/packages/common/src/platform_id.ts
new file mode 100644
index 000000000000..2a27926c9e4c
--- /dev/null
+++ b/packages/common/src/platform_id.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 const PLATFORM_BROWSER_ID = 'browser';
+export const PLATFORM_SERVER_ID = 'server';
+export const PLATFORM_WORKER_APP_ID = 'browserWorkerApp';
+export const PLATFORM_WORKER_UI_ID = 'browserWorkerUi';
+
+/**
+ * Returns whether a platform id represents a browser platform.
+ * @experimental
+ */
+export function isPlatformBrowser(platformId: Object): boolean {
+  return platformId === PLATFORM_BROWSER_ID;
+}
+
+/**
+ * Returns whether a platform id represents a server platform.
+ * @experimental
+ */
+export function isPlatformServer(platformId: Object): boolean {
+  return platformId === PLATFORM_SERVER_ID;
+}
+
+/**
+ * Returns whether a platform id represents a web worker app platform.
+ * @experimental
+ */
+export function isPlatformWorkerApp(platformId: Object): boolean {
+  return platformId === PLATFORM_WORKER_APP_ID;
+}
+
+/**
+ * Returns whether a platform id represents a web worker UI platform.
+ * @experimental
+ */
+export function isPlatformWorkerUi(platformId: Object): boolean {
+  return platformId === PLATFORM_WORKER_UI_ID;
+}
diff --git a/packages/common/src/version.ts b/packages/common/src/version.ts
new file mode 100644
index 000000000000..af66f0fa278a
--- /dev/null
+++ b/packages/common/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/core';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/common/src/viewport_scroller.ts b/packages/common/src/viewport_scroller.ts
new file mode 100644
index 000000000000..6270b063d6d0
--- /dev/null
+++ b/packages/common/src/viewport_scroller.ts
@@ -0,0 +1,183 @@
+/**
+ * @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 {defineInjectable, inject} from '@angular/core';
+
+import {DOCUMENT} from './dom_tokens';
+
+/**
+ * @whatItDoes Manages the scroll position.
+ */
+export abstract class ViewportScroller {
+  // De-sugared tree-shakable injection
+  // See #23917
+  /** @nocollapse */
+  static ngInjectableDef = defineInjectable(
+      {providedIn: 'root', factory: () => new BrowserViewportScroller(inject(DOCUMENT), window)});
+
+  /**
+   * @whatItDoes Configures the top offset used when scrolling to an anchor.
+   *
+   * When given a tuple with two number, the service will always use the numbers.
+   * When given a function, the service will invoke the function every time it restores scroll
+   * position.
+   */
+  abstract setOffset(offset: [number, number]|(() => [number, number])): void;
+
+  /**
+   * @whatItDoes Returns the current scroll position.
+   */
+  abstract getScrollPosition(): [number, number];
+
+  /**
+   * @whatItDoes Sets the scroll position.
+   */
+  abstract scrollToPosition(position: [number, number]): void;
+
+  /**
+   * @whatItDoes Scrolls to the provided anchor.
+   */
+  abstract scrollToAnchor(anchor: string): void;
+
+  /**
+   * @whatItDoes Disables automatic scroll restoration provided by the browser.
+   * See also [window.history.scrollRestoration
+   * info](https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration)
+   */
+  abstract setHistoryScrollRestoration(scrollRestoration: 'auto'|'manual'): void;
+}
+
+/**
+ * @whatItDoes Manages the scroll position.
+ */
+export class BrowserViewportScroller implements ViewportScroller {
+  private offset: () => [number, number] = () => [0, 0];
+
+  constructor(private document: any, private window: any) {}
+
+  /**
+   * @whatItDoes Configures the top offset used when scrolling to an anchor.
+   *
+   * * When given a number, the service will always use the number.
+   * * When given a function, the service will invoke the function every time it restores scroll
+   * position.
+   */
+  setOffset(offset: [number, number]|(() => [number, number])): void {
+    if (Array.isArray(offset)) {
+      this.offset = () => offset;
+    } else {
+      this.offset = offset;
+    }
+  }
+
+  /**
+   * @whatItDoes Returns the current scroll position.
+   */
+  getScrollPosition(): [number, number] {
+    if (this.supportScrollRestoration()) {
+      return [this.window.scrollX, this.window.scrollY];
+    } else {
+      return [0, 0];
+    }
+  }
+
+  /**
+   * @whatItDoes Sets the scroll position.
+   */
+  scrollToPosition(position: [number, number]): void {
+    if (this.supportScrollRestoration()) {
+      this.window.scrollTo(position[0], position[1]);
+    }
+  }
+
+  /**
+   * @whatItDoes Scrolls to the provided anchor.
+   */
+  scrollToAnchor(anchor: string): void {
+    if (this.supportScrollRestoration()) {
+      const elSelectedById = this.document.querySelector(`#${anchor}`);
+      if (elSelectedById) {
+        this.scrollToElement(elSelectedById);
+        return;
+      }
+      const elSelectedByName = this.document.querySelector(`[name='${anchor}']`);
+      if (elSelectedByName) {
+        this.scrollToElement(elSelectedByName);
+        return;
+      }
+    }
+  }
+
+  /**
+   * @whatItDoes Disables automatic scroll restoration provided by the browser.
+   */
+  setHistoryScrollRestoration(scrollRestoration: 'auto'|'manual'): void {
+    if (this.supportScrollRestoration()) {
+      const history = this.window.history;
+      if (history && history.scrollRestoration) {
+        history.scrollRestoration = scrollRestoration;
+      }
+    }
+  }
+
+  private scrollToElement(el: any): void {
+    const rect = el.getBoundingClientRect();
+    const left = rect.left + this.window.pageXOffset;
+    const top = rect.top + this.window.pageYOffset;
+    const offset = this.offset();
+    this.window.scrollTo(left - offset[0], top - offset[1]);
+  }
+
+  /**
+   * We only support scroll restoration when we can get a hold of window.
+   * This means that we do not support this behavior when running in a web worker.
+   *
+   * Lifting this restriction right now would require more changes in the dom adapter.
+   * Since webworkers aren't widely used, we will lift it once RouterScroller is
+   * battle-tested.
+   */
+  private supportScrollRestoration(): boolean {
+    try {
+      return !!this.window && !!this.window.scrollTo;
+    } catch (e) {
+      return false;
+    }
+  }
+}
+
+
+/**
+ * @whatItDoes Provides an empty implementation of the viewport scroller. This will
+ * live in @angular/common as it will be used by both platform-server and platform-webworker.
+ */
+export class NullViewportScroller implements ViewportScroller {
+  /**
+   * @whatItDoes empty implementation
+   */
+  setOffset(offset: [number, number]|(() => [number, number])): void {}
+
+  /**
+   * @whatItDoes empty implementation
+   */
+  getScrollPosition(): [number, number] { return [0, 0]; }
+
+  /**
+   * @whatItDoes empty implementation
+   */
+  scrollToPosition(position: [number, number]): void {}
+
+  /**
+   * @whatItDoes empty implementation
+   */
+  scrollToAnchor(anchor: string): void {}
+
+  /**
+   * @whatItDoes empty implementation
+   */
+  setHistoryScrollRestoration(scrollRestoration: 'auto'|'manual'): void {}
+}
\ No newline at end of file
diff --git a/packages/common/test/BUILD.bazel b/packages/common/test/BUILD.bazel
new file mode 100644
index 000000000000..268d0a8bfc2b
--- /dev/null
+++ b/packages/common/test/BUILD.bazel
@@ -0,0 +1,37 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*_node_only_spec.ts"],
+    ),
+    deps = [
+        "//packages/common",
+        "//packages/common/locales",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/common/test/common_module_spec.ts b/packages/common/test/common_module_spec.ts
new file mode 100644
index 000000000000..be40f6722f6e
--- /dev/null
+++ b/packages/common/test/common_module_spec.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 {TestBed, inject} from '@angular/core/testing';
+import {DeprecatedI18NPipesModule} from '../src/common_module';
+import {Plural} from '../src/i18n/locale_data_api';
+import {DEPRECATED_PLURAL_FN, getPluralCase} from '../src/i18n/localization';
+
+{
+  describe('DeprecatedI18NPipesModule', () => {
+    beforeEach(() => { TestBed.configureTestingModule({imports: [DeprecatedI18NPipesModule]}); });
+
+    it('should define the token DEPRECATED_PLURAL_FN',
+       inject(
+           [DEPRECATED_PLURAL_FN],
+           (injectedGetPluralCase?: (locale: string, value: number | string) => Plural) => {
+             expect(injectedGetPluralCase).toEqual(getPluralCase);
+           }));
+  });
+}
diff --git a/packages/common/test/cookie_spec.ts b/packages/common/test/cookie_spec.ts
new file mode 100644
index 000000000000..36b10c0e3532
--- /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';
+
+{
+  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/directives/ng_class_spec.ts b/packages/common/test/directives/ng_class_spec.ts
new file mode 100644
index 000000000000..36706aa88455
--- /dev/null
+++ b/packages/common/test/directives/ng_class_spec.ts
@@ -0,0 +1,374 @@
+/**
+ * @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 {ComponentFixture, TestBed, async} from '@angular/core/testing';
+
+{
+  describe('binding to CSS class list', () => {
+    let fixture: ComponentFixture<any>|null;
+
+    function normalizeClassNames(classes: string) {
+      return classes.trim().split(' ').sort().join(' ');
+    }
+
+    function detectChangesAndExpectClassName(classes: string): void {
+      fixture !.detectChanges();
+      let nonNormalizedClassName = fixture !.debugElement.children[0].nativeElement.className;
+      expect(normalizeClassNames(nonNormalizedClassName)).toEqual(normalizeClassNames(classes));
+    }
+
+    function getComponent(): TestComponent { return fixture !.debugElement.componentInstance; }
+
+    afterEach(() => { fixture = null; });
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestComponent],
+      });
+    });
+
+    it('should clean up when the directive is destroyed', async(() => {
+         fixture = createTestComponent('<div *ngFor="let item of items" [ngClass]="item"></div>');
+
+         getComponent().items = [['0']];
+         fixture.detectChanges();
+         getComponent().items = [['1']];
+         detectChangesAndExpectClassName('1');
+       }));
+
+    describe('expressions evaluating to objects', () => {
+
+      it('should add classes specified in an object literal', async(() => {
+           fixture = createTestComponent('<div [ngClass]="{foo: true, bar: false}"></div>');
+
+           detectChangesAndExpectClassName('foo');
+         }));
+
+      it('should add classes specified in an object literal without change in class names',
+         async(() => {
+           fixture =
+               createTestComponent(`<div [ngClass]="{'foo-bar': true, 'fooBar': true}"></div>`);
+
+           detectChangesAndExpectClassName('foo-bar fooBar');
+         }));
+
+      it('should add and remove classes based on changes in object literal values', async(() => {
+           fixture =
+               createTestComponent('<div [ngClass]="{foo: condition, bar: !condition}"></div>');
+
+           detectChangesAndExpectClassName('foo');
+
+           getComponent().condition = false;
+           detectChangesAndExpectClassName('bar');
+         }));
+
+      it('should add and remove classes based on changes to the expression object', async(() => {
+           fixture = createTestComponent('<div [ngClass]="objExpr"></div>');
+           const objExpr = getComponent().objExpr;
+
+           detectChangesAndExpectClassName('foo');
+
+           objExpr !['bar'] = true;
+           detectChangesAndExpectClassName('foo bar');
+
+           objExpr !['baz'] = true;
+           detectChangesAndExpectClassName('foo bar baz');
+
+           delete (objExpr !['bar']);
+           detectChangesAndExpectClassName('foo baz');
+         }));
+
+      it('should add and remove classes based on reference changes to the expression object',
+         async(() => {
+           fixture = createTestComponent('<div [ngClass]="objExpr"></div>');
+
+           detectChangesAndExpectClassName('foo');
+
+           getComponent().objExpr = {foo: true, bar: true};
+           detectChangesAndExpectClassName('foo bar');
+
+           getComponent().objExpr = {baz: true};
+           detectChangesAndExpectClassName('baz');
+         }));
+
+      it('should remove active classes when expression evaluates to null', async(() => {
+           fixture = createTestComponent('<div [ngClass]="objExpr"></div>');
+
+           detectChangesAndExpectClassName('foo');
+
+           getComponent().objExpr = null;
+           detectChangesAndExpectClassName('');
+
+           getComponent().objExpr = {'foo': false, 'bar': true};
+           detectChangesAndExpectClassName('bar');
+         }));
+
+
+      it('should allow multiple classes per expression', async(() => {
+           fixture = createTestComponent('<div [ngClass]="objExpr"></div>');
+
+           getComponent().objExpr = {'bar baz': true, 'bar1 baz1': true};
+           detectChangesAndExpectClassName('bar baz bar1 baz1');
+
+           getComponent().objExpr = {'bar baz': false, 'bar1 baz1': true};
+           detectChangesAndExpectClassName('bar1 baz1');
+         }));
+
+      it('should split by one or more spaces between classes', async(() => {
+           fixture = createTestComponent('<div [ngClass]="objExpr"></div>');
+
+           getComponent().objExpr = {'foo bar     baz': true};
+           detectChangesAndExpectClassName('foo bar baz');
+         }));
+    });
+
+    describe('expressions evaluating to lists', () => {
+
+      it('should add classes specified in a list literal', async(() => {
+           fixture =
+               createTestComponent(`<div [ngClass]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`);
+
+           detectChangesAndExpectClassName('foo bar foo-bar fooBar');
+         }));
+
+      it('should add and remove classes based on changes to the expression', async(() => {
+           fixture = createTestComponent('<div [ngClass]="arrExpr"></div>');
+           const arrExpr = getComponent().arrExpr;
+           detectChangesAndExpectClassName('foo');
+
+           arrExpr.push('bar');
+           detectChangesAndExpectClassName('foo bar');
+
+           arrExpr[1] = 'baz';
+           detectChangesAndExpectClassName('foo baz');
+
+           getComponent().arrExpr = arrExpr.filter((v: string) => v !== 'baz');
+           detectChangesAndExpectClassName('foo');
+         }));
+
+      it('should add and remove classes when a reference changes', async(() => {
+           fixture = createTestComponent('<div [ngClass]="arrExpr"></div>');
+           detectChangesAndExpectClassName('foo');
+
+           getComponent().arrExpr = ['bar'];
+           detectChangesAndExpectClassName('bar');
+         }));
+
+      it('should take initial classes into account when a reference changes', async(() => {
+           fixture = createTestComponent('<div class="foo" [ngClass]="arrExpr"></div>');
+           detectChangesAndExpectClassName('foo');
+
+           getComponent().arrExpr = ['bar'];
+           detectChangesAndExpectClassName('foo bar');
+         }));
+
+      it('should ignore empty or blank class names', async(() => {
+           fixture = createTestComponent('<div class="foo" [ngClass]="arrExpr"></div>');
+           getComponent().arrExpr = ['', '  '];
+           detectChangesAndExpectClassName('foo');
+         }));
+
+      it('should trim blanks from class names', async(() => {
+           fixture = createTestComponent('<div class="foo" [ngClass]="arrExpr"></div>');
+
+           getComponent().arrExpr = [' bar  '];
+           detectChangesAndExpectClassName('foo bar');
+         }));
+
+
+      it('should allow multiple classes per item in arrays', async(() => {
+           fixture = createTestComponent('<div [ngClass]="arrExpr"></div>');
+
+           getComponent().arrExpr = ['foo bar baz', 'foo1 bar1   baz1'];
+           detectChangesAndExpectClassName('foo bar baz foo1 bar1 baz1');
+
+           getComponent().arrExpr = ['foo bar   baz foobar'];
+           detectChangesAndExpectClassName('foo bar baz foobar');
+         }));
+
+      it('should throw with descriptive error message when CSS class is not a string', () => {
+        fixture = createTestComponent(`<div [ngClass]="['foo', {}]"></div>`);
+        expect(() => fixture !.detectChanges())
+            .toThrowError(
+                /NgClass can only toggle CSS classes expressed as strings, got \[object Object\]/);
+      });
+    });
+
+    describe('expressions evaluating to sets', () => {
+
+      it('should add and remove classes if the set instance changed', async(() => {
+           fixture = createTestComponent('<div [ngClass]="setExpr"></div>');
+           let setExpr = new Set<string>();
+           setExpr.add('bar');
+           getComponent().setExpr = setExpr;
+           detectChangesAndExpectClassName('bar');
+
+           setExpr = new Set<string>();
+           setExpr.add('baz');
+           getComponent().setExpr = setExpr;
+           detectChangesAndExpectClassName('baz');
+         }));
+    });
+
+    describe('expressions evaluating to string', () => {
+
+      it('should add classes specified in a string literal', async(() => {
+           fixture = createTestComponent(`<div [ngClass]="'foo bar foo-bar fooBar'"></div>`);
+           detectChangesAndExpectClassName('foo bar foo-bar fooBar');
+         }));
+
+      it('should add and remove classes based on changes to the expression', async(() => {
+           fixture = createTestComponent('<div [ngClass]="strExpr"></div>');
+           detectChangesAndExpectClassName('foo');
+
+           getComponent().strExpr = 'foo bar';
+           detectChangesAndExpectClassName('foo bar');
+
+
+           getComponent().strExpr = 'baz';
+           detectChangesAndExpectClassName('baz');
+         }));
+
+      it('should remove active classes when switching from string to null', async(() => {
+           fixture = createTestComponent(`<div [ngClass]="strExpr"></div>`);
+           detectChangesAndExpectClassName('foo');
+
+           getComponent().strExpr = null;
+           detectChangesAndExpectClassName('');
+         }));
+
+      it('should take initial classes into account when switching from string to null',
+         async(() => {
+           fixture = createTestComponent(`<div class="foo" [ngClass]="strExpr"></div>`);
+           detectChangesAndExpectClassName('foo');
+
+           getComponent().strExpr = null;
+           detectChangesAndExpectClassName('foo');
+         }));
+
+      it('should ignore empty and blank strings', async(() => {
+           fixture = createTestComponent(`<div class="foo" [ngClass]="strExpr"></div>`);
+           getComponent().strExpr = '';
+           detectChangesAndExpectClassName('foo');
+         }));
+
+    });
+
+    describe('cooperation with other class-changing constructs', () => {
+
+      it('should co-operate with the class attribute', async(() => {
+           fixture = createTestComponent('<div [ngClass]="objExpr" class="init foo"></div>');
+           const objExpr = getComponent().objExpr;
+
+           objExpr !['bar'] = true;
+           detectChangesAndExpectClassName('init foo bar');
+
+           objExpr !['foo'] = false;
+           detectChangesAndExpectClassName('init bar');
+
+           getComponent().objExpr = null;
+           detectChangesAndExpectClassName('init foo');
+         }));
+
+      it('should co-operate with the interpolated class attribute', async(() => {
+           fixture = createTestComponent(`<div [ngClass]="objExpr" class="{{'init foo'}}"></div>`);
+           const objExpr = getComponent().objExpr;
+
+           objExpr !['bar'] = true;
+           detectChangesAndExpectClassName(`init foo bar`);
+
+           objExpr !['foo'] = false;
+           detectChangesAndExpectClassName(`init bar`);
+
+           getComponent().objExpr = null;
+           detectChangesAndExpectClassName(`init foo`);
+         }));
+
+      it('should co-operate with the interpolated class attribute when interpolation changes',
+         async(() => {
+           fixture = createTestComponent(
+               `<div [ngClass]="{large: false, small: true}" class="{{strExpr}}"></div>`);
+
+           detectChangesAndExpectClassName(`foo small`);
+
+           getComponent().strExpr = 'bar';
+           detectChangesAndExpectClassName(`bar small`);
+         }));
+
+      it('should co-operate with the class attribute and binding to it', async(() => {
+           fixture =
+               createTestComponent(`<div [ngClass]="objExpr" class="init" [class]="'foo'"></div>`);
+           const objExpr = getComponent().objExpr;
+
+           objExpr !['bar'] = true;
+           detectChangesAndExpectClassName(`init foo bar`);
+
+           objExpr !['foo'] = false;
+           detectChangesAndExpectClassName(`init bar`);
+
+           getComponent().objExpr = null;
+           detectChangesAndExpectClassName(`init foo`);
+         }));
+
+      it('should co-operate with the class attribute and class.name binding', async(() => {
+           const template =
+               '<div class="init foo" [ngClass]="objExpr" [class.baz]="condition"></div>';
+           fixture = createTestComponent(template);
+           const objExpr = getComponent().objExpr;
+
+           detectChangesAndExpectClassName('init foo baz');
+
+           objExpr !['bar'] = true;
+           detectChangesAndExpectClassName('init foo baz bar');
+
+           objExpr !['foo'] = false;
+           detectChangesAndExpectClassName('init baz bar');
+
+           getComponent().condition = false;
+           detectChangesAndExpectClassName('init bar');
+         }));
+
+      it('should co-operate with initial class and class attribute binding when binding changes',
+         async(() => {
+           const template = '<div class="init" [ngClass]="objExpr" [class]="strExpr"></div>';
+           fixture = createTestComponent(template);
+           const cmp = getComponent();
+
+           detectChangesAndExpectClassName('init foo');
+
+           cmp.objExpr !['bar'] = true;
+           detectChangesAndExpectClassName('init foo bar');
+
+           cmp.strExpr = 'baz';
+           detectChangesAndExpectClassName('init bar baz foo');
+
+           cmp.objExpr = null;
+           detectChangesAndExpectClassName('init baz');
+         }));
+    });
+  });
+}
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+  condition: boolean = true;
+  // TODO(issue/24571): remove '!'.
+  items !: any[];
+  arrExpr: string[] = ['foo'];
+  setExpr: Set<string> = new Set<string>();
+  objExpr: {[klass: string]: any}|null = {'foo': true, 'bar': false};
+  strExpr: string|null = 'foo';
+
+  constructor() { this.setExpr.add('foo'); }
+}
+
+function createTestComponent(template: string): ComponentFixture<TestComponent> {
+  return TestBed.overrideComponent(TestComponent, {set: {template: template}})
+      .createComponent(TestComponent);
+}
diff --git a/packages/common/test/directives/ng_component_outlet_spec.ts b/packages/common/test/directives/ng_component_outlet_spec.ts
new file mode 100644
index 000000000000..39f0b3d3170f
--- /dev/null
+++ b/packages/common/test/directives/ng_component_outlet_spec.ts
@@ -0,0 +1,284 @@
+/**
+ * @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 {NgComponentOutlet} from '@angular/common/src/directives/ng_component_outlet';
+import {Compiler, Component, ComponentRef, Inject, InjectionToken, Injector, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory, Optional, QueryList, StaticProvider, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
+import {TestBed, async, fakeAsync} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('insert/remove', () => {
+
+    beforeEach(() => { TestBed.configureTestingModule({imports: [TestModule]}); });
+
+    it('should do nothing if component is null', async(() => {
+         const template = `<ng-template *ngComponentOutlet="currentComponent"></ng-template>`;
+         TestBed.overrideComponent(TestComponent, {set: {template: template}});
+         let fixture = TestBed.createComponent(TestComponent);
+
+         fixture.componentInstance.currentComponent = null;
+         fixture.detectChanges();
+
+         expect(fixture.nativeElement).toHaveText('');
+       }));
+
+    it('should insert content specified by a component', async(() => {
+         let fixture = TestBed.createComponent(TestComponent);
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('');
+
+         fixture.componentInstance.currentComponent = InjectedComponent;
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('foo');
+       }));
+
+    it('should emit a ComponentRef once a component was created', async(() => {
+         let fixture = TestBed.createComponent(TestComponent);
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('');
+
+         fixture.componentInstance.cmpRef = null;
+         fixture.componentInstance.currentComponent = InjectedComponent;
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('foo');
+         expect(fixture.componentInstance.cmpRef).toBeAnInstanceOf(ComponentRef);
+         expect(fixture.componentInstance.cmpRef !.instance).toBeAnInstanceOf(InjectedComponent);
+       }));
+
+
+    it('should clear view if component becomes null', async(() => {
+         let fixture = TestBed.createComponent(TestComponent);
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('');
+
+         fixture.componentInstance.currentComponent = InjectedComponent;
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('foo');
+
+         fixture.componentInstance.currentComponent = null;
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('');
+       }));
+
+
+    it('should swap content if component changes', async(() => {
+         let fixture = TestBed.createComponent(TestComponent);
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('');
+
+         fixture.componentInstance.currentComponent = InjectedComponent;
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('foo');
+
+         fixture.componentInstance.currentComponent = InjectedComponentAgain;
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('bar');
+       }));
+
+    it('should use the injector, if one supplied', async(() => {
+         let fixture = TestBed.createComponent(TestComponent);
+
+         const uniqueValue = {};
+         fixture.componentInstance.currentComponent = InjectedComponent;
+         fixture.componentInstance.injector = Injector.create(
+             [{provide: TEST_TOKEN, useValue: uniqueValue}], fixture.componentRef.injector);
+
+         fixture.detectChanges();
+         let cmpRef: ComponentRef<InjectedComponent> = fixture.componentInstance.cmpRef !;
+         expect(cmpRef).toBeAnInstanceOf(ComponentRef);
+         expect(cmpRef.instance).toBeAnInstanceOf(InjectedComponent);
+         expect(cmpRef.instance.testToken).toBe(uniqueValue);
+
+       }));
+
+    it('should resolve a with injector', async(() => {
+         let fixture = TestBed.createComponent(TestComponent);
+
+         fixture.componentInstance.cmpRef = null;
+         fixture.componentInstance.currentComponent = InjectedComponent;
+         fixture.detectChanges();
+         let cmpRef: ComponentRef<InjectedComponent> = fixture.componentInstance.cmpRef !;
+         expect(cmpRef).toBeAnInstanceOf(ComponentRef);
+         expect(cmpRef.instance).toBeAnInstanceOf(InjectedComponent);
+         expect(cmpRef.instance.testToken).toBeNull();
+       }));
+
+    it('should render projectable nodes, if supplied', async(() => {
+         const template = `<ng-template>projected foo</ng-template>${TEST_CMP_TEMPLATE}`;
+         TestBed.overrideComponent(TestComponent, {set: {template: template}})
+             .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]});
+
+         TestBed
+             .overrideComponent(InjectedComponent, {set: {template: `<ng-content></ng-content>`}})
+             .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]});
+
+         let fixture = TestBed.createComponent(TestComponent);
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('');
+
+         fixture.componentInstance.currentComponent = InjectedComponent;
+         fixture.componentInstance.projectables =
+             [fixture.componentInstance.vcRef
+                  .createEmbeddedView(fixture.componentInstance.tplRefs.first)
+                  .rootNodes];
+
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('projected foo');
+       }));
+
+    it('should resolve components from other modules, if supplied', async(() => {
+         const compiler = TestBed.get(Compiler) as Compiler;
+         let fixture = TestBed.createComponent(TestComponent);
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('');
+
+         fixture.componentInstance.module = compiler.compileModuleSync(TestModule2);
+         fixture.componentInstance.currentComponent = Module2InjectedComponent;
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('baz');
+       }));
+
+    it('should clean up moduleRef, if supplied', async(() => {
+         let destroyed = false;
+         const compiler = TestBed.get(Compiler) as Compiler;
+         const fixture = TestBed.createComponent(TestComponent);
+         fixture.componentInstance.module = compiler.compileModuleSync(TestModule2);
+         fixture.componentInstance.currentComponent = Module2InjectedComponent;
+         fixture.detectChanges();
+
+         const moduleRef = fixture.componentInstance.ngComponentOutlet['_moduleRef'] !;
+         spyOn(moduleRef, 'destroy').and.callThrough();
+
+         expect(moduleRef.destroy).not.toHaveBeenCalled();
+         fixture.destroy();
+         expect(moduleRef.destroy).toHaveBeenCalled();
+       }));
+
+    it('should not re-create moduleRef when it didn\'t actually change', async(() => {
+         const compiler = TestBed.get(Compiler) as Compiler;
+         const fixture = TestBed.createComponent(TestComponent);
+
+         fixture.componentInstance.module = compiler.compileModuleSync(TestModule2);
+         fixture.componentInstance.currentComponent = Module2InjectedComponent;
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('baz');
+         const moduleRef = fixture.componentInstance.ngComponentOutlet['_moduleRef'];
+
+         fixture.componentInstance.currentComponent = Module2InjectedComponent2;
+         fixture.detectChanges();
+
+         expect(fixture.nativeElement).toHaveText('baz2');
+         expect(moduleRef).toBe(fixture.componentInstance.ngComponentOutlet['_moduleRef']);
+       }));
+
+    it('should re-create moduleRef when changed', async(() => {
+         const compiler = TestBed.get(Compiler) as Compiler;
+         const fixture = TestBed.createComponent(TestComponent);
+         fixture.componentInstance.module = compiler.compileModuleSync(TestModule2);
+         fixture.componentInstance.currentComponent = Module2InjectedComponent;
+         fixture.detectChanges();
+
+         expect(fixture.nativeElement).toHaveText('baz');
+
+         fixture.componentInstance.module = compiler.compileModuleSync(TestModule3);
+         fixture.componentInstance.currentComponent = Module3InjectedComponent;
+         fixture.detectChanges();
+
+         expect(fixture.nativeElement).toHaveText('bat');
+       }));
+  });
+}
+
+const TEST_TOKEN = new InjectionToken('TestToken');
+@Component({selector: 'injected-component', template: 'foo'})
+class InjectedComponent {
+  constructor(@Optional() @Inject(TEST_TOKEN) public testToken: any) {}
+}
+
+
+@Component({selector: 'injected-component-again', template: 'bar'})
+class InjectedComponentAgain {
+}
+
+const TEST_CMP_TEMPLATE =
+    `<ng-template *ngComponentOutlet="currentComponent; injector: injector; content: projectables; ngModuleFactory: module;"></ng-template>`;
+@Component({selector: 'test-cmp', template: TEST_CMP_TEMPLATE})
+class TestComponent {
+  // TODO(issue/24571): remove '!'.
+  currentComponent !: Type<any>| null;
+  // TODO(issue/24571): remove '!'.
+  injector !: Injector;
+  // TODO(issue/24571): remove '!'.
+  projectables !: any[][];
+  // TODO(issue/24571): remove '!'.
+  module !: NgModuleFactory<any>;
+
+  get cmpRef(): ComponentRef<any>|null { return this.ngComponentOutlet['_componentRef']; }
+  set cmpRef(value: ComponentRef<any>|null) { this.ngComponentOutlet['_componentRef'] = value; }
+
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(TemplateRef) tplRefs !: QueryList<TemplateRef<any>>;
+  // TODO(issue/24571): remove '!'.
+  @ViewChild(NgComponentOutlet) ngComponentOutlet !: NgComponentOutlet;
+
+  constructor(public vcRef: ViewContainerRef) {}
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [TestComponent, InjectedComponent, InjectedComponentAgain],
+  exports: [TestComponent, InjectedComponent, InjectedComponentAgain],
+  entryComponents: [InjectedComponent, InjectedComponentAgain]
+})
+export class TestModule {
+}
+
+@Component({selector: 'module-2-injected-component', template: 'baz'})
+class Module2InjectedComponent {
+}
+
+@Component({selector: 'module-2-injected-component-2', template: 'baz2'})
+class Module2InjectedComponent2 {
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [Module2InjectedComponent, Module2InjectedComponent2],
+  exports: [Module2InjectedComponent, Module2InjectedComponent2],
+  entryComponents: [Module2InjectedComponent, Module2InjectedComponent2]
+})
+export class TestModule2 {
+}
+
+@Component({selector: 'module-3-injected-component', template: 'bat'})
+class Module3InjectedComponent {
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [Module3InjectedComponent],
+  exports: [Module3InjectedComponent],
+  entryComponents: [Module3InjectedComponent]
+})
+export class TestModule3 {
+}
diff --git a/packages/common/test/directives/ng_for_spec.ts b/packages/common/test/directives/ng_for_spec.ts
new file mode 100644
index 000000000000..0935650f7e27
--- /dev/null
+++ b/packages/common/test/directives/ng_for_spec.ts
@@ -0,0 +1,386 @@
+/**
+ * @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} from '@angular/core';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {By} from '@angular/platform-browser/src/dom/debug/by';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+let thisArg: any;
+
+{
+  describe('ngFor', () => {
+    let fixture: ComponentFixture<any>;
+
+    function getComponent(): TestComponent { return fixture.componentInstance; }
+
+    function detectChangesAndExpectText(text: string): void {
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText(text);
+    }
+
+    afterEach(() => { fixture = null as any; });
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestComponent],
+        imports: [CommonModule],
+      });
+    });
+
+    it('should reflect initial elements', async(() => {
+         fixture = createTestComponent();
+
+         detectChangesAndExpectText('1;2;');
+       }));
+
+    it('should reflect added elements', async(() => {
+         fixture = createTestComponent();
+         fixture.detectChanges();
+         getComponent().items.push(3);
+         detectChangesAndExpectText('1;2;3;');
+       }));
+
+    it('should reflect removed elements', async(() => {
+         fixture = createTestComponent();
+         fixture.detectChanges();
+         getComponent().items.splice(1, 1);
+         detectChangesAndExpectText('1;');
+       }));
+
+    it('should reflect moved elements', async(() => {
+         fixture = createTestComponent();
+         fixture.detectChanges();
+         getComponent().items.splice(0, 1);
+         getComponent().items.push(1);
+         detectChangesAndExpectText('2;1;');
+       }));
+
+    it('should reflect a mix of all changes (additions/removals/moves)', async(() => {
+         fixture = createTestComponent();
+
+         getComponent().items = [0, 1, 2, 3, 4, 5];
+         fixture.detectChanges();
+
+         getComponent().items = [6, 2, 7, 0, 4, 8];
+
+         detectChangesAndExpectText('6;2;7;0;4;8;');
+       }));
+
+    it('should iterate over an array of objects', async(() => {
+         const template = '<ul><li *ngFor="let item of items">{{item["name"]}};</li></ul>';
+         fixture = createTestComponent(template);
+
+         // INIT
+         getComponent().items = [{'name': 'misko'}, {'name': 'shyam'}];
+         detectChangesAndExpectText('misko;shyam;');
+
+         // GROW
+         getComponent().items.push({'name': 'adam'});
+         detectChangesAndExpectText('misko;shyam;adam;');
+
+         // SHRINK
+         getComponent().items.splice(2, 1);
+         getComponent().items.splice(0, 1);
+         detectChangesAndExpectText('shyam;');
+       }));
+
+    it('should gracefully handle nulls', async(() => {
+         const template = '<ul><li *ngFor="let item of null">{{item}};</li></ul>';
+         fixture = createTestComponent(template);
+
+         detectChangesAndExpectText('');
+       }));
+
+    it('should gracefully handle ref changing to null and back', async(() => {
+         fixture = createTestComponent();
+
+         detectChangesAndExpectText('1;2;');
+
+         getComponent().items = null !;
+         detectChangesAndExpectText('');
+
+         getComponent().items = [1, 2, 3];
+         detectChangesAndExpectText('1;2;3;');
+       }));
+
+    it('should throw on non-iterable ref and suggest using an array', async(() => {
+         fixture = createTestComponent();
+
+         getComponent().items = <any>'whaaa';
+         expect(() => fixture.detectChanges())
+             .toThrowError(
+                 /Cannot find a differ supporting object 'whaaa' of type 'string'. NgFor only supports binding to Iterables such as Arrays/);
+       }));
+
+    it('should throw on ref changing to string', async(() => {
+         fixture = createTestComponent();
+
+         detectChangesAndExpectText('1;2;');
+
+         getComponent().items = <any>'whaaa';
+         expect(() => fixture.detectChanges()).toThrowError();
+       }));
+
+    it('should works with duplicates', async(() => {
+         fixture = createTestComponent();
+
+         const a = new Foo();
+         getComponent().items = [a, a];
+         detectChangesAndExpectText('foo;foo;');
+       }));
+
+    it('should repeat over nested arrays', async(() => {
+         const template = '<div *ngFor="let item of items">' +
+             '<div *ngFor="let subitem of item">{{subitem}}-{{item.length}};</div>|' +
+             '</div>';
+         fixture = createTestComponent(template);
+
+         getComponent().items = [['a', 'b'], ['c']];
+         detectChangesAndExpectText('a-2;b-2;|c-1;|');
+
+         getComponent().items = [['e'], ['f', 'g']];
+         detectChangesAndExpectText('e-1;|f-2;g-2;|');
+       }));
+
+    it('should repeat over nested arrays with no intermediate element', async(() => {
+         const template = '<div *ngFor="let item of items">' +
+             '<div *ngFor="let subitem of item">{{subitem}}-{{item.length}};</div>' +
+             '</div>';
+         fixture = createTestComponent(template);
+
+         getComponent().items = [['a', 'b'], ['c']];
+         detectChangesAndExpectText('a-2;b-2;c-1;');
+
+         getComponent().items = [['e'], ['f', 'g']];
+         detectChangesAndExpectText('e-1;f-2;g-2;');
+       }));
+
+    it('should repeat over nested ngIf that are the last node in the ngFor template', async(() => {
+         const template = `<div *ngFor="let item of items; let i=index">` +
+             `<div>{{i}}|</div>` +
+             `<div *ngIf="i % 2 == 0">even|</div>` +
+             `</div>`;
+
+         fixture = createTestComponent(template);
+
+         const items = [1];
+         getComponent().items = items;
+         detectChangesAndExpectText('0|even|');
+
+         items.push(1);
+         detectChangesAndExpectText('0|even|1|');
+
+         items.push(1);
+         detectChangesAndExpectText('0|even|1|2|even|');
+       }));
+
+    it('should allow of saving the collection', async(() => {
+         const template =
+             '<ul><li *ngFor="let item of items as collection; index as i">{{i}}/{{collection.length}} - {{item}};</li></ul>';
+         fixture = createTestComponent(template);
+
+         detectChangesAndExpectText('0/2 - 1;1/2 - 2;');
+
+         getComponent().items = [1, 2, 3];
+         detectChangesAndExpectText('0/3 - 1;1/3 - 2;2/3 - 3;');
+       }));
+
+    it('should display indices correctly', async(() => {
+         const template = '<span *ngFor ="let item of items; let i=index">{{i.toString()}}</span>';
+         fixture = createTestComponent(template);
+
+         getComponent().items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+         detectChangesAndExpectText('0123456789');
+
+         getComponent().items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
+         detectChangesAndExpectText('0123456789');
+       }));
+
+    it('should display first item correctly', async(() => {
+         const template =
+             '<span *ngFor="let item of items; let isFirst=first">{{isFirst.toString()}}</span>';
+         fixture = createTestComponent(template);
+
+         getComponent().items = [0, 1, 2];
+         detectChangesAndExpectText('truefalsefalse');
+
+         getComponent().items = [2, 1];
+         detectChangesAndExpectText('truefalse');
+       }));
+
+    it('should display last item correctly', async(() => {
+         const template =
+             '<span *ngFor="let item of items; let isLast=last">{{isLast.toString()}}</span>';
+         fixture = createTestComponent(template);
+
+         getComponent().items = [0, 1, 2];
+         detectChangesAndExpectText('falsefalsetrue');
+
+         getComponent().items = [2, 1];
+         detectChangesAndExpectText('falsetrue');
+       }));
+
+    it('should display even items correctly', async(() => {
+         const template =
+             '<span *ngFor="let item of items; let isEven=even">{{isEven.toString()}}</span>';
+         fixture = createTestComponent(template);
+
+         getComponent().items = [0, 1, 2];
+         detectChangesAndExpectText('truefalsetrue');
+
+         getComponent().items = [2, 1];
+         detectChangesAndExpectText('truefalse');
+       }));
+
+    it('should display odd items correctly', async(() => {
+         const template =
+             '<span *ngFor="let item of items; let isOdd=odd">{{isOdd.toString()}}</span>';
+         fixture = createTestComponent(template);
+
+         getComponent().items = [0, 1, 2, 3];
+         detectChangesAndExpectText('falsetruefalsetrue');
+
+         getComponent().items = [2, 1];
+         detectChangesAndExpectText('falsetrue');
+       }));
+
+    it('should allow to use a custom template', async(() => {
+         const template =
+             '<ng-container *ngFor="let item of items; template: tpl"></ng-container>' +
+             '<ng-template let-item let-i="index" #tpl><p>{{i}}: {{item}};</p></ng-template>';
+         fixture = createTestComponent(template);
+         getComponent().items = ['a', 'b', 'c'];
+         fixture.detectChanges();
+         detectChangesAndExpectText('0: a;1: b;2: c;');
+       }));
+
+    it('should use a default template if a custom one is null', async(() => {
+         const template =
+             `<ul><ng-container *ngFor="let item of items; template: null; let i=index">{{i}}: {{item}};</ng-container></ul>`;
+         fixture = createTestComponent(template);
+         getComponent().items = ['a', 'b', 'c'];
+         fixture.detectChanges();
+         detectChangesAndExpectText('0: a;1: b;2: c;');
+       }));
+
+    it('should use a custom template when both default and a custom one are present', async(() => {
+         const template =
+             '<ng-container *ngFor="let item of items; template: tpl">{{i}};</ng-container>' +
+             '<ng-template let-item let-i="index" #tpl>{{i}}: {{item}};</ng-template>';
+         fixture = createTestComponent(template);
+         getComponent().items = ['a', 'b', 'c'];
+         fixture.detectChanges();
+         detectChangesAndExpectText('0: a;1: b;2: c;');
+       }));
+
+    describe('track by', () => {
+      it('should console.warn if trackBy is not a function', async(() => {
+           // TODO(vicb): expect a warning message when we have a proper log service
+           const template = `<p *ngFor="let item of items; trackBy: value"></p>`;
+           fixture = createTestComponent(template);
+           fixture.componentInstance.value = 0;
+           fixture.detectChanges();
+         }));
+
+      it('should track by identity when trackBy is to `null` or `undefined`', async(() => {
+           // TODO(vicb): expect no warning message when we have a proper log service
+           const template = `<p *ngFor="let item of items; trackBy: value">{{ item }}</p>`;
+           fixture = createTestComponent(template);
+           fixture.componentInstance.items = ['a', 'b', 'c'];
+           fixture.componentInstance.value = null;
+           detectChangesAndExpectText('abc');
+           fixture.componentInstance.value = undefined;
+           detectChangesAndExpectText('abc');
+         }));
+
+      it('should set the context to the component instance', async(() => {
+           const template =
+               `<p *ngFor="let item of items; trackBy: trackByContext.bind(this)"></p>`;
+           fixture = createTestComponent(template);
+
+           thisArg = null;
+           fixture.detectChanges();
+           expect(thisArg).toBe(getComponent());
+         }));
+
+      it('should not replace tracked items', async(() => {
+           const template =
+               `<p *ngFor="let item of items; trackBy: trackById; let i=index">{{items[i]}}</p>`;
+           fixture = createTestComponent(template);
+
+           const buildItemList = () => {
+             getComponent().items = [{'id': 'a'}];
+             fixture.detectChanges();
+             return fixture.debugElement.queryAll(By.css('p'))[0];
+           };
+
+           const firstP = buildItemList();
+           const finalP = buildItemList();
+           expect(finalP.nativeElement).toBe(firstP.nativeElement);
+         }));
+
+      it('should update implicit local variable on view', async(() => {
+           const template =
+               `<div *ngFor="let item of items; trackBy: trackById">{{item['color']}}</div>`;
+           fixture = createTestComponent(template);
+
+           getComponent().items = [{'id': 'a', 'color': 'blue'}];
+           detectChangesAndExpectText('blue');
+
+           getComponent().items = [{'id': 'a', 'color': 'red'}];
+           detectChangesAndExpectText('red');
+         }));
+
+      it('should move items around and keep them updated ', async(() => {
+           const template =
+               `<div *ngFor="let item of items; trackBy: trackById">{{item['color']}}</div>`;
+           fixture = createTestComponent(template);
+
+           getComponent().items = [{'id': 'a', 'color': 'blue'}, {'id': 'b', 'color': 'yellow'}];
+           detectChangesAndExpectText('blueyellow');
+
+           getComponent().items = [{'id': 'b', 'color': 'orange'}, {'id': 'a', 'color': 'red'}];
+           detectChangesAndExpectText('orangered');
+         }));
+
+      it('should handle added and removed items properly when tracking by index', async(() => {
+           const template = `<div *ngFor="let item of items; trackBy: trackByIndex">{{item}}</div>`;
+           fixture = createTestComponent(template);
+
+           getComponent().items = ['a', 'b', 'c', 'd'];
+           fixture.detectChanges();
+           getComponent().items = ['e', 'f', 'g', 'h'];
+           fixture.detectChanges();
+           getComponent().items = ['e', 'f', 'h'];
+           detectChangesAndExpectText('efh');
+         }));
+    });
+  });
+}
+
+class Foo {
+  toString() { return 'foo'; }
+}
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+  value: any;
+  items: any[] = [1, 2];
+  trackById(index: number, item: any): string { return item['id']; }
+  trackByIndex(index: number, item: any): number { return index; }
+  trackByContext(): void { thisArg = this; }
+}
+
+const TEMPLATE = '<div><span *ngFor="let item of items">{{item.toString()}};</span></div>';
+
+function createTestComponent(template: string = TEMPLATE): ComponentFixture<TestComponent> {
+  return TestBed.overrideComponent(TestComponent, {set: {template: template}})
+      .createComponent(TestComponent);
+}
diff --git a/packages/common/test/directives/ng_if_spec.ts b/packages/common/test/directives/ng_if_spec.ts
new file mode 100644
index 000000000000..5d4109208940
--- /dev/null
+++ b/packages/common/test/directives/ng_if_spec.ts
@@ -0,0 +1,288 @@
+/**
+ * @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} 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 {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('ngIf directive', () => {
+    let fixture: ComponentFixture<any>;
+
+    function getComponent(): TestComponent { return fixture.componentInstance; }
+
+    afterEach(() => { fixture = null !; });
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestComponent],
+        imports: [CommonModule],
+      });
+    });
+
+    it('should work in a template attribute', async(() => {
+         const template = '<span *ngIf="booleanCondition">hello</span>';
+         fixture = createTestComponent(template);
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(fixture.nativeElement).toHaveText('hello');
+       }));
+
+    it('should work on a template element', async(() => {
+         const template = '<ng-template [ngIf]="booleanCondition">hello2</ng-template>';
+         fixture = createTestComponent(template);
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('hello2');
+       }));
+
+    it('should toggle node when condition changes', async(() => {
+         const template = '<span *ngIf="booleanCondition">hello</span>';
+         fixture = createTestComponent(template);
+         getComponent().booleanCondition = false;
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+         expect(fixture.nativeElement).toHaveText('');
+
+         getComponent().booleanCondition = true;
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(fixture.nativeElement).toHaveText('hello');
+
+         getComponent().booleanCondition = false;
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+         expect(fixture.nativeElement).toHaveText('');
+       }));
+
+    it('should handle nested if correctly', async(() => {
+         const template =
+             '<div *ngIf="booleanCondition"><span *ngIf="nestedBooleanCondition">hello</span></div>';
+
+         fixture = createTestComponent(template);
+
+         getComponent().booleanCondition = false;
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+         expect(fixture.nativeElement).toHaveText('');
+
+         getComponent().booleanCondition = true;
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(fixture.nativeElement).toHaveText('hello');
+
+         getComponent().nestedBooleanCondition = false;
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+         expect(fixture.nativeElement).toHaveText('');
+
+         getComponent().nestedBooleanCondition = true;
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(fixture.nativeElement).toHaveText('hello');
+
+         getComponent().booleanCondition = false;
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+         expect(fixture.nativeElement).toHaveText('');
+       }));
+
+    it('should update several nodes with if', async(() => {
+         const template = '<span *ngIf="numberCondition + 1 >= 2">helloNumber</span>' +
+             '<span *ngIf="stringCondition == \'foo\'">helloString</span>' +
+             '<span *ngIf="functionCondition(stringCondition, numberCondition)">helloFunction</span>';
+
+         fixture = createTestComponent(template);
+
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(3);
+         expect(getDOM().getText(fixture.nativeElement))
+             .toEqual('helloNumberhelloStringhelloFunction');
+
+         getComponent().numberCondition = 0;
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(fixture.nativeElement).toHaveText('helloString');
+
+         getComponent().numberCondition = 1;
+         getComponent().stringCondition = 'bar';
+         fixture.detectChanges();
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(fixture.nativeElement).toHaveText('helloNumber');
+       }));
+
+    it('should not add the element twice if the condition goes from truthy to truthy', async(() => {
+         const template = '<span *ngIf="numberCondition">hello</span>';
+
+         fixture = createTestComponent(template);
+
+         fixture.detectChanges();
+         let els = fixture.debugElement.queryAll(By.css('span'));
+         expect(els.length).toEqual(1);
+         getDOM().addClass(els[0].nativeElement, 'marker');
+         expect(fixture.nativeElement).toHaveText('hello');
+
+         getComponent().numberCondition = 2;
+         fixture.detectChanges();
+         els = fixture.debugElement.queryAll(By.css('span'));
+         expect(els.length).toEqual(1);
+         expect(getDOM().hasClass(els[0].nativeElement, 'marker')).toBe(true);
+
+         expect(fixture.nativeElement).toHaveText('hello');
+       }));
+
+    describe('then/else templates', () => {
+      it('should support else', async(() => {
+           const template = '<span *ngIf="booleanCondition; else elseBlock">TRUE</span>' +
+               '<ng-template #elseBlock>FALSE</ng-template>';
+
+           fixture = createTestComponent(template);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('TRUE');
+
+           getComponent().booleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('FALSE');
+         }));
+
+      it('should support then and else', async(() => {
+           const template =
+               '<span *ngIf="booleanCondition; then thenBlock; else elseBlock">IGNORE</span>' +
+               '<ng-template #thenBlock>THEN</ng-template>' +
+               '<ng-template #elseBlock>ELSE</ng-template>';
+
+           fixture = createTestComponent(template);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('THEN');
+
+           getComponent().booleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('ELSE');
+         }));
+
+      it('should support removing the then/else templates', () => {
+        const template = `<span *ngIf="booleanCondition;
+            then nestedBooleanCondition ? tplRef : null;
+            else nestedBooleanCondition ? tplRef : null"></span>
+        <ng-template #tplRef>Template</ng-template>`;
+
+        fixture = createTestComponent(template);
+        const comp = fixture.componentInstance;
+        // then template
+        comp.booleanCondition = true;
+
+        comp.nestedBooleanCondition = true;
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('Template');
+
+        comp.nestedBooleanCondition = false;
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('');
+
+        // else template
+        comp.booleanCondition = true;
+
+        comp.nestedBooleanCondition = true;
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('Template');
+
+        comp.nestedBooleanCondition = false;
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('');
+      });
+
+      it('should support dynamic else', async(() => {
+           const template =
+               '<span *ngIf="booleanCondition; else nestedBooleanCondition ? b1 : b2">TRUE</span>' +
+               '<ng-template #b1>FALSE1</ng-template>' +
+               '<ng-template #b2>FALSE2</ng-template>';
+
+           fixture = createTestComponent(template);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('TRUE');
+
+           getComponent().booleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('FALSE1');
+
+           getComponent().nestedBooleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('FALSE2');
+         }));
+
+      it('should support binding to variable using let', async(() => {
+           const template = '<span *ngIf="booleanCondition; else elseBlock; let v">{{v}}</span>' +
+               '<ng-template #elseBlock let-v>{{v}}</ng-template>';
+
+           fixture = createTestComponent(template);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('true');
+
+           getComponent().booleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('false');
+         }));
+
+      it('should support binding to variable using as', async(() => {
+           const template = '<span *ngIf="booleanCondition as v; else elseBlock">{{v}}</span>' +
+               '<ng-template #elseBlock let-v>{{v}}</ng-template>';
+
+           fixture = createTestComponent(template);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('true');
+
+           getComponent().booleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('false');
+         }));
+    });
+
+    describe('Type guarding', () => {
+      it('should throw when then block is not template', async(() => {
+           const template = '<span *ngIf="booleanCondition; then thenBlock">IGNORE</span>' +
+               '<div #thenBlock>THEN</div>';
+
+           fixture = createTestComponent(template);
+
+           expect(() => fixture.detectChanges())
+               .toThrowError(/ngIfThen must be a TemplateRef, but received/);
+         }));
+
+      it('should throw when else block is not template', async(() => {
+           const template = '<span *ngIf="booleanCondition; else elseBlock">IGNORE</span>' +
+               '<div #elseBlock>ELSE</div>';
+
+           fixture = createTestComponent(template);
+
+           expect(() => fixture.detectChanges())
+               .toThrowError(/ngIfElse must be a TemplateRef, but received/);
+         }));
+    });
+  });
+}
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+  booleanCondition: boolean = true;
+  nestedBooleanCondition: boolean = true;
+  numberCondition: number = 1;
+  stringCondition: string = 'foo';
+  functionCondition: Function = (s: any, n: any): boolean => s == 'foo' && n == 1;
+}
+
+function createTestComponent(template: string): ComponentFixture<TestComponent> {
+  return TestBed.overrideComponent(TestComponent, {set: {template: template}})
+      .createComponent(TestComponent);
+}
diff --git a/packages/common/test/directives/ng_plural_spec.ts b/packages/common/test/directives/ng_plural_spec.ts
new file mode 100644
index 000000000000..07e6e66740b7
--- /dev/null
+++ b/packages/common/test/directives/ng_plural_spec.ts
@@ -0,0 +1,162 @@
+/**
+ * @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, NgLocalization} from '@angular/common';
+import {Component, Injectable} from '@angular/core';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('ngPlural', () => {
+    let fixture: ComponentFixture<any>;
+
+    function getComponent(): TestComponent { return fixture.componentInstance; }
+
+    function detectChangesAndExpectText<T>(text: string): void {
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText(text);
+    }
+
+    afterEach(() => { fixture = null !; });
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestComponent],
+        providers: [{provide: NgLocalization, useClass: TestLocalization}],
+        imports: [CommonModule]
+      });
+    });
+
+    it('should display the template according to the exact value', async(() => {
+         const template = '<ul [ngPlural]="switchValue">' +
+             '<ng-template ngPluralCase="=0"><li>you have no messages.</li></ng-template>' +
+             '<ng-template ngPluralCase="=1"><li>you have one message.</li></ng-template>' +
+             '</ul>';
+
+         fixture = createTestComponent(template);
+
+         getComponent().switchValue = 0;
+         detectChangesAndExpectText('you have no messages.');
+
+         getComponent().switchValue = 1;
+         detectChangesAndExpectText('you have one message.');
+       }));
+
+    it('should display the template according to the exact numeric value', async(() => {
+         const template = '<div>' +
+             '<ul [ngPlural]="switchValue">' +
+             '<ng-template ngPluralCase="0"><li>you have no messages.</li></ng-template>' +
+             '<ng-template ngPluralCase="1"><li>you have one message.</li></ng-template>' +
+             '</ul></div>';
+
+         fixture = createTestComponent(template);
+
+         getComponent().switchValue = 0;
+         detectChangesAndExpectText('you have no messages.');
+
+         getComponent().switchValue = 1;
+         detectChangesAndExpectText('you have one message.');
+       }));
+
+    // https://github.com/angular/angular/issues/9868
+    // https://github.com/angular/angular/issues/9882
+    it('should not throw when ngPluralCase contains expressions', async(() => {
+         const template = '<ul [ngPlural]="switchValue">' +
+             '<ng-template ngPluralCase="=0"><li>{{ switchValue }}</li></ng-template>' +
+             '</ul>';
+
+         fixture = createTestComponent(template);
+
+         getComponent().switchValue = 0;
+         expect(() => fixture.detectChanges()).not.toThrow();
+       }));
+
+
+    it('should be applicable to <ng-container> elements', async(() => {
+         const template = '<ng-container [ngPlural]="switchValue">' +
+             '<ng-template ngPluralCase="=0">you have no messages.</ng-template>' +
+             '<ng-template ngPluralCase="=1">you have one message.</ng-template>' +
+             '</ng-container>';
+
+         fixture = createTestComponent(template);
+
+         getComponent().switchValue = 0;
+         detectChangesAndExpectText('you have no messages.');
+
+         getComponent().switchValue = 1;
+         detectChangesAndExpectText('you have one message.');
+       }));
+
+    it('should display the template according to the category', async(() => {
+         const template = '<ul [ngPlural]="switchValue">' +
+             '<ng-template ngPluralCase="few"><li>you have a few messages.</li></ng-template>' +
+             '<ng-template ngPluralCase="many"><li>you have many messages.</li></ng-template>' +
+             '</ul>';
+
+         fixture = createTestComponent(template);
+
+         getComponent().switchValue = 2;
+         detectChangesAndExpectText('you have a few messages.');
+
+         getComponent().switchValue = 8;
+         detectChangesAndExpectText('you have many messages.');
+       }));
+
+    it('should default to other when no matches are found', async(() => {
+         const template = '<ul [ngPlural]="switchValue">' +
+             '<ng-template ngPluralCase="few"><li>you have a few messages.</li></ng-template>' +
+             '<ng-template ngPluralCase="other"><li>default message.</li></ng-template>' +
+             '</ul>';
+
+         fixture = createTestComponent(template);
+
+         getComponent().switchValue = 100;
+         detectChangesAndExpectText('default message.');
+       }));
+
+    it('should prioritize value matches over category matches', async(() => {
+         const template = '<ul [ngPlural]="switchValue">' +
+             '<ng-template ngPluralCase="few"><li>you have a few messages.</li></ng-template>' +
+             '<ng-template ngPluralCase="=2">you have two messages.</ng-template>' +
+             '</ul>';
+
+         fixture = createTestComponent(template);
+
+         getComponent().switchValue = 2;
+         detectChangesAndExpectText('you have two messages.');
+
+         getComponent().switchValue = 3;
+         detectChangesAndExpectText('you have a few messages.');
+       }));
+  });
+}
+
+@Injectable()
+class TestLocalization extends NgLocalization {
+  getPluralCategory(value: number): string {
+    if (value > 1 && value < 4) {
+      return 'few';
+    }
+
+    if (value >= 4 && value < 10) {
+      return 'many';
+    }
+
+    return 'other';
+  }
+}
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+  switchValue: number|null = null;
+}
+
+function createTestComponent(template: string): ComponentFixture<TestComponent> {
+  return TestBed.overrideComponent(TestComponent, {set: {template: template}})
+      .createComponent(TestComponent);
+}
diff --git a/packages/common/test/directives/ng_style_spec.ts b/packages/common/test/directives/ng_style_spec.ts
new file mode 100644
index 000000000000..0c494c7f420a
--- /dev/null
+++ b/packages/common/test/directives/ng_style_spec.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 {CommonModule} from '@angular/common';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+
+{
+  describe('NgStyle', () => {
+    let fixture: ComponentFixture<any>;
+
+    function getComponent(): TestComponent { return fixture.componentInstance; }
+
+    function expectNativeEl(fixture: ComponentFixture<any>): any {
+      return expect(fixture.debugElement.children[0].nativeElement);
+    }
+
+    afterEach(() => { fixture = null !; });
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({declarations: [TestComponent], imports: [CommonModule]});
+    });
+
+    it('should add styles specified in an object literal', async(() => {
+         const template = `<div [ngStyle]="{'max-width': '40px'}"></div>`;
+         fixture = createTestComponent(template);
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
+       }));
+
+    it('should add and change styles specified in an object expression', async(() => {
+         const template = `<div [ngStyle]="expr"></div>`;
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {'max-width': '40px'};
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
+
+         let expr = getComponent().expr;
+         expr['max-width'] = '30%';
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '30%'});
+       }));
+
+    it('should add and remove styles specified using style.unit notation', async(() => {
+         const template = `<div [ngStyle]="{'max-width.px': expr}"></div>`;
+
+         fixture = createTestComponent(template);
+
+         getComponent().expr = '40';
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
+
+         getComponent().expr = null;
+         fixture.detectChanges();
+         expectNativeEl(fixture).not.toHaveCssStyle('max-width');
+       }));
+
+    // https://github.com/angular/angular/issues/21064
+    it('should add and remove styles which names are not dash-cased', async(() => {
+         fixture = createTestComponent(`<div [ngStyle]="{'color': expr}"></div>`);
+
+         getComponent().expr = 'green';
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'color': 'green'});
+
+         getComponent().expr = null;
+         fixture.detectChanges();
+         expectNativeEl(fixture).not.toHaveCssStyle('color');
+       }));
+
+    it('should update styles using style.unit notation when unit changes', async(() => {
+         const template = `<div [ngStyle]="expr"></div>`;
+
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {'max-width.px': '40'};
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
+
+         getComponent().expr = {'max-width.em': '40'};
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40em'});
+       }));
+
+    // keyValueDiffer is sensitive to key order #9115
+    it('should change styles specified in an object expression', async(() => {
+         const template = `<div [ngStyle]="expr"></div>`;
+
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {
+           // height, width order is important here
+           height: '10px',
+           width: '10px'
+         };
+
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'height': '10px', 'width': '10px'});
+
+         getComponent().expr = {
+           // width, height order is important here
+           width: '5px',
+           height: '5px',
+         };
+
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'height': '5px', 'width': '5px'});
+       }));
+
+    it('should remove styles when deleting a key in an object expression', async(() => {
+         const template = `<div [ngStyle]="expr"></div>`;
+
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {'max-width': '40px'};
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
+
+         delete getComponent().expr['max-width'];
+         fixture.detectChanges();
+         expectNativeEl(fixture).not.toHaveCssStyle('max-width');
+       }));
+
+    it('should co-operate with the style attribute', async(() => {
+         const template = `<div style="font-size: 12px" [ngStyle]="expr"></div>`;
+
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {'max-width': '40px'};
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px', 'font-size': '12px'});
+
+         delete getComponent().expr['max-width'];
+         fixture.detectChanges();
+         expectNativeEl(fixture).not.toHaveCssStyle('max-width');
+         expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'});
+       }));
+
+    it('should co-operate with the style.[styleName]="expr" special-case in the compiler',
+       async(() => {
+         const template = `<div [style.font-size.px]="12" [ngStyle]="expr"></div>`;
+
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {'max-width': '40px'};
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px', 'font-size': '12px'});
+
+         delete getComponent().expr['max-width'];
+         fixture.detectChanges();
+         expectNativeEl(fixture).not.toHaveCssStyle('max-width');
+         expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'});
+       }));
+  });
+}
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+  expr: any;
+}
+
+function createTestComponent(template: string): ComponentFixture<TestComponent> {
+  return TestBed.overrideComponent(TestComponent, {set: {template: template}})
+      .createComponent(TestComponent);
+}
diff --git a/packages/common/test/directives/ng_switch_spec.ts b/packages/common/test/directives/ng_switch_spec.ts
new file mode 100644
index 000000000000..3adf2a161405
--- /dev/null
+++ b/packages/common/test/directives/ng_switch_spec.ts
@@ -0,0 +1,190 @@
+/**
+ * @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 {Attribute, Component, Directive} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('NgSwitch', () => {
+    let fixture: ComponentFixture<any>;
+
+    function getComponent(): TestComponent { return fixture.componentInstance; }
+
+    function detectChangesAndExpectText(text: string): void {
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText(text);
+    }
+
+    afterEach(() => { fixture = null !; });
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestComponent],
+        imports: [CommonModule],
+      });
+    });
+
+    describe('switch value changes', () => {
+      it('should switch amongst when values', () => {
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchCase="\'a\'">when a</li>' +
+            '<li *ngSwitchCase="\'b\'">when b</li>' +
+            '</ul>';
+
+        fixture = createTestComponent(template);
+
+        detectChangesAndExpectText('');
+
+        getComponent().switchValue = 'a';
+        detectChangesAndExpectText('when a');
+
+        getComponent().switchValue = 'b';
+        detectChangesAndExpectText('when b');
+      });
+
+      it('should switch amongst when values with fallback to default', () => {
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchCase="\'a\'">when a</li>' +
+            '<li *ngSwitchDefault>when default</li>' +
+            '</ul>';
+
+        fixture = createTestComponent(template);
+        detectChangesAndExpectText('when default');
+
+        getComponent().switchValue = 'a';
+        detectChangesAndExpectText('when a');
+
+        getComponent().switchValue = 'b';
+        detectChangesAndExpectText('when default');
+
+        getComponent().switchValue = 'c';
+        detectChangesAndExpectText('when default');
+      });
+
+      it('should support multiple whens with the same value', () => {
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchCase="\'a\'">when a1;</li>' +
+            '<li *ngSwitchCase="\'b\'">when b1;</li>' +
+            '<li *ngSwitchCase="\'a\'">when a2;</li>' +
+            '<li *ngSwitchCase="\'b\'">when b2;</li>' +
+            '<li *ngSwitchDefault>when default1;</li>' +
+            '<li *ngSwitchDefault>when default2;</li>' +
+            '</ul>';
+
+        fixture = createTestComponent(template);
+        detectChangesAndExpectText('when default1;when default2;');
+
+        getComponent().switchValue = 'a';
+        detectChangesAndExpectText('when a1;when a2;');
+
+        getComponent().switchValue = 'b';
+        detectChangesAndExpectText('when b1;when b2;');
+      });
+    });
+
+    describe('when values changes', () => {
+      it('should switch amongst when values', () => {
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchCase="when1">when 1;</li>' +
+            '<li *ngSwitchCase="when2">when 2;</li>' +
+            '<li *ngSwitchDefault>when default;</li>' +
+            '</ul>';
+
+        fixture = createTestComponent(template);
+        getComponent().when1 = 'a';
+        getComponent().when2 = 'b';
+        getComponent().switchValue = 'a';
+        detectChangesAndExpectText('when 1;');
+
+        getComponent().switchValue = 'b';
+        detectChangesAndExpectText('when 2;');
+
+        getComponent().switchValue = 'c';
+        detectChangesAndExpectText('when default;');
+
+        getComponent().when1 = 'c';
+        detectChangesAndExpectText('when 1;');
+
+        getComponent().when1 = 'd';
+        detectChangesAndExpectText('when default;');
+      });
+    });
+
+    describe('corner cases', () => {
+
+      it('should not create the default case if another case matches', () => {
+        const log: string[] = [];
+
+        @Directive({selector: '[test]'})
+        class TestDirective {
+          constructor(@Attribute('test') test: string) { log.push(test); }
+        }
+
+        const template = '<div [ngSwitch]="switchValue">' +
+            '<div *ngSwitchCase="\'a\'" test="aCase"></div>' +
+            '<div *ngSwitchDefault test="defaultCase"></div>' +
+            '</div>';
+
+        TestBed.configureTestingModule({declarations: [TestDirective]});
+        TestBed.overrideComponent(TestComponent, {set: {template: template}})
+            .createComponent(TestComponent);
+        const fixture = TestBed.createComponent(TestComponent);
+        fixture.componentInstance.switchValue = 'a';
+
+        fixture.detectChanges();
+
+        expect(log).toEqual(['aCase']);
+      });
+
+      it('should create the default case if there is no other case', () => {
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchDefault>when default1;</li>' +
+            '<li *ngSwitchDefault>when default2;</li>' +
+            '</ul>';
+
+        fixture = createTestComponent(template);
+        detectChangesAndExpectText('when default1;when default2;');
+
+      });
+
+      it('should allow defaults before cases', () => {
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchDefault>when default1;</li>' +
+            '<li *ngSwitchDefault>when default2;</li>' +
+            '<li *ngSwitchCase="\'a\'">when a1;</li>' +
+            '<li *ngSwitchCase="\'b\'">when b1;</li>' +
+            '<li *ngSwitchCase="\'a\'">when a2;</li>' +
+            '<li *ngSwitchCase="\'b\'">when b2;</li>' +
+            '</ul>';
+
+        fixture = createTestComponent(template);
+        detectChangesAndExpectText('when default1;when default2;');
+
+        getComponent().switchValue = 'a';
+        detectChangesAndExpectText('when a1;when a2;');
+
+        getComponent().switchValue = 'b';
+        detectChangesAndExpectText('when b1;when b2;');
+      });
+    });
+  });
+}
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+  switchValue: any = null;
+  when1: any = null;
+  when2: any = null;
+}
+
+function createTestComponent(template: string): ComponentFixture<TestComponent> {
+  return TestBed.overrideComponent(TestComponent, {set: {template: template}})
+      .createComponent(TestComponent);
+}
diff --git a/packages/common/test/directives/ng_template_outlet_spec.ts b/packages/common/test/directives/ng_template_outlet_spec.ts
new file mode 100644
index 000000000000..99dae02116d1
--- /dev/null
+++ b/packages/common/test/directives/ng_template_outlet_spec.ts
@@ -0,0 +1,243 @@
+/**
+ * @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, ContentChildren, Directive, Injectable, NO_ERRORS_SCHEMA, OnDestroy, QueryList, TemplateRef} from '@angular/core';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('NgTemplateOutlet', () => {
+    let fixture: ComponentFixture<any>;
+
+    function setTplRef(value: any): void { fixture.componentInstance.currentTplRef = value; }
+
+    function detectChangesAndExpectText(text: string): void {
+      fixture.detectChanges();
+      expect(fixture.debugElement.nativeElement).toHaveText(text);
+    }
+
+    afterEach(() => { fixture = null as any; });
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestComponent, CaptureTplRefs, DestroyableCmpt],
+        imports: [CommonModule],
+        providers: [DestroyedSpyService]
+      });
+    });
+
+    // https://github.com/angular/angular/issues/14778
+    it('should accept the component as the context', async(() => {
+         const template = `<ng-container *ngTemplateOutlet="tpl; context: this"></ng-container>` +
+             `<ng-template #tpl>{{context.foo}}</ng-template>`;
+
+         fixture = createTestComponent(template);
+         detectChangesAndExpectText('bar');
+       }));
+
+    it('should do nothing if templateRef is `null`', async(() => {
+         const template = `<ng-container [ngTemplateOutlet]="null"></ng-container>`;
+         fixture = createTestComponent(template);
+         detectChangesAndExpectText('');
+       }));
+
+    it('should insert content specified by TemplateRef', async(() => {
+         const template = `<ng-template #tpl>foo</ng-template>` +
+             `<ng-container [ngTemplateOutlet]="tpl"></ng-container>`;
+         fixture = createTestComponent(template);
+         detectChangesAndExpectText('foo');
+       }));
+
+    it('should clear content if TemplateRef becomes `null`', async(() => {
+         const template = `<tpl-refs #refs="tplRefs"><ng-template>foo</ng-template></tpl-refs>` +
+             `<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
+         fixture = createTestComponent(template);
+         fixture.detectChanges();
+         const refs = fixture.debugElement.children[0].references !['refs'];
+
+         setTplRef(refs.tplRefs.first);
+         detectChangesAndExpectText('foo');
+
+         setTplRef(null);
+         detectChangesAndExpectText('');
+       }));
+
+    it('should swap content if TemplateRef changes', async(() => {
+         const template =
+             `<tpl-refs #refs="tplRefs"><ng-template>foo</ng-template><ng-template>bar</ng-template></tpl-refs>` +
+             `<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
+         fixture = createTestComponent(template);
+
+         fixture.detectChanges();
+         const refs = fixture.debugElement.children[0].references !['refs'];
+
+         setTplRef(refs.tplRefs.first);
+         detectChangesAndExpectText('foo');
+
+         setTplRef(refs.tplRefs.last);
+         detectChangesAndExpectText('bar');
+       }));
+
+    it('should display template if context is `null`', async(() => {
+         const template = `<ng-template #tpl>foo</ng-template>` +
+             `<ng-container *ngTemplateOutlet="tpl; context: null"></ng-container>`;
+         fixture = createTestComponent(template);
+         detectChangesAndExpectText('foo');
+       }));
+
+    it('should reflect initial context and changes', async(() => {
+         const template = `<ng-template let-foo="foo" #tpl>{{foo}}</ng-template>` +
+             `<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
+         fixture = createTestComponent(template);
+
+         fixture.detectChanges();
+         detectChangesAndExpectText('bar');
+
+         fixture.componentInstance.context.foo = 'alter-bar';
+         detectChangesAndExpectText('alter-bar');
+       }));
+
+    it('should reflect user defined `$implicit` property in the context', async(() => {
+         const template = `<ng-template let-ctx #tpl>{{ctx.foo}}</ng-template>` +
+             `<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
+         fixture = createTestComponent(template);
+         fixture.componentInstance.context = {$implicit: {foo: 'bra'}};
+         detectChangesAndExpectText('bra');
+       }));
+
+    it('should reflect context re-binding', async(() => {
+         const template =
+             `<ng-template let-shawshank="shawshank" #tpl>{{shawshank}}</ng-template>` +
+             `<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
+         fixture = createTestComponent(template);
+
+         fixture.componentInstance.context = {shawshank: 'brooks'};
+         detectChangesAndExpectText('brooks');
+
+         fixture.componentInstance.context = {shawshank: 'was here'};
+         detectChangesAndExpectText('was here');
+       }));
+
+    it('should update but not destroy embedded view when context values change', () => {
+      const template =
+          `<ng-template let-foo="foo" #tpl><destroyable-cmpt></destroyable-cmpt>:{{foo}}</ng-template>` +
+          `<ng-template [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{foo: value}"></ng-template>`;
+
+      fixture = createTestComponent(template);
+      const spyService = fixture.debugElement.injector.get(DestroyedSpyService);
+
+      detectChangesAndExpectText('Content to destroy:bar');
+      expect(spyService.destroyed).toBeFalsy();
+
+      fixture.componentInstance.value = 'baz';
+      detectChangesAndExpectText('Content to destroy:baz');
+      expect(spyService.destroyed).toBeFalsy();
+    });
+
+    it('should recreate embedded view when context shape changes', () => {
+      const template =
+          `<ng-template let-foo="foo" #tpl><destroyable-cmpt></destroyable-cmpt>:{{foo}}</ng-template>` +
+          `<ng-template [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="context"></ng-template>`;
+
+      fixture = createTestComponent(template);
+      const spyService = fixture.debugElement.injector.get(DestroyedSpyService);
+
+      detectChangesAndExpectText('Content to destroy:bar');
+      expect(spyService.destroyed).toBeFalsy();
+
+      fixture.componentInstance.context = {foo: 'baz', other: true};
+      detectChangesAndExpectText('Content to destroy:baz');
+      expect(spyService.destroyed).toBeTruthy();
+    });
+
+    it('should destroy embedded view when context value changes and templateRef becomes undefined',
+       () => {
+         const template =
+             `<ng-template let-foo="foo" #tpl><destroyable-cmpt></destroyable-cmpt>:{{foo}}</ng-template>` +
+             `<ng-template [ngTemplateOutlet]="value === 'bar' ? tpl : undefined" [ngTemplateOutletContext]="{foo: value}"></ng-template>`;
+
+         fixture = createTestComponent(template);
+         const spyService = fixture.debugElement.injector.get(DestroyedSpyService);
+
+         detectChangesAndExpectText('Content to destroy:bar');
+         expect(spyService.destroyed).toBeFalsy();
+
+         fixture.componentInstance.value = 'baz';
+         detectChangesAndExpectText('');
+         expect(spyService.destroyed).toBeTruthy();
+       });
+
+    it('should not try to update null / undefined context when context changes but template stays the same',
+       () => {
+         const template = `<ng-template let-foo="foo" #tpl>{{foo}}</ng-template>` +
+             `<ng-template [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="value === 'bar' ? null : undefined"></ng-template>`;
+
+         fixture = createTestComponent(template);
+         detectChangesAndExpectText('');
+
+         fixture.componentInstance.value = 'baz';
+         detectChangesAndExpectText('');
+       });
+
+    it('should not try to update null / undefined context when template changes', () => {
+      const template = `<ng-template let-foo="foo" #tpl1>{{foo}}</ng-template>` +
+          `<ng-template let-foo="foo" #tpl2>{{foo}}</ng-template>` +
+          `<ng-template [ngTemplateOutlet]="value === 'bar' ? tpl1 : tpl2" [ngTemplateOutletContext]="value === 'bar' ? null : undefined"></ng-template>`;
+
+      fixture = createTestComponent(template);
+      detectChangesAndExpectText('');
+
+      fixture.componentInstance.value = 'baz';
+      detectChangesAndExpectText('');
+    });
+
+    it('should not try to update context on undefined view', () => {
+      const template = `<ng-template let-foo="foo" #tpl>{{foo}}</ng-template>` +
+          `<ng-template [ngTemplateOutlet]="value === 'bar' ? null : undefined" [ngTemplateOutletContext]="{foo: value}"></ng-template>`;
+
+      fixture = createTestComponent(template);
+      detectChangesAndExpectText('');
+
+      fixture.componentInstance.value = 'baz';
+      detectChangesAndExpectText('');
+    });
+  });
+}
+
+@Injectable()
+class DestroyedSpyService {
+  destroyed = false;
+}
+
+@Component({selector: 'destroyable-cmpt', template: 'Content to destroy'})
+class DestroyableCmpt implements OnDestroy {
+  constructor(private _spyService: DestroyedSpyService) {}
+
+  ngOnDestroy(): void { this._spyService.destroyed = true; }
+}
+
+@Directive({selector: 'tpl-refs', exportAs: 'tplRefs'})
+class CaptureTplRefs {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(TemplateRef) tplRefs !: QueryList<TemplateRef<any>>;
+}
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+  // TODO(issue/24571): remove '!'.
+  currentTplRef !: TemplateRef<any>;
+  context: any = {foo: 'bar'};
+  value = 'bar';
+}
+
+function createTestComponent(template: string): ComponentFixture<TestComponent> {
+  return TestBed.overrideComponent(TestComponent, {set: {template: template}})
+      .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
+      .createComponent(TestComponent);
+}
diff --git a/packages/common/test/directives/non_bindable_spec.ts b/packages/common/test/directives/non_bindable_spec.ts
new file mode 100644
index 000000000000..a6ee2330f43a
--- /dev/null
+++ b/packages/common/test/directives/non_bindable_spec.ts
@@ -0,0 +1,67 @@
+/**
+ * @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} from '@angular/core';
+import {ElementRef} from '@angular/core/src/linker/element_ref';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('non-bindable', () => {
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestComponent, TestDirective],
+      });
+    });
+
+    it('should not interpolate children', async(() => {
+         const template = '<div>{{text}}<span ngNonBindable>{{text}}</span></div>';
+         const fixture = createTestComponent(template);
+
+         fixture.detectChanges();
+         expect(fixture.nativeElement).toHaveText('foo{{text}}');
+       }));
+
+    it('should ignore directives on child nodes', async(() => {
+         const template = '<div ngNonBindable><span id=child test-dec>{{text}}</span></div>';
+         const fixture = createTestComponent(template);
+         fixture.detectChanges();
+
+         // We must use getDOM().querySelector instead of fixture.query here
+         // since the elements inside are not compiled.
+         const span = getDOM().querySelector(fixture.nativeElement, '#child');
+         expect(getDOM().hasClass(span, 'compiled')).toBeFalsy();
+       }));
+
+    it('should trigger directives on the same node', async(() => {
+         const template = '<div><span id=child ngNonBindable test-dec>{{text}}</span></div>';
+         const fixture = createTestComponent(template);
+         fixture.detectChanges();
+         const span = getDOM().querySelector(fixture.nativeElement, '#child');
+         expect(getDOM().hasClass(span, 'compiled')).toBeTruthy();
+       }));
+  });
+}
+
+@Directive({selector: '[test-dec]'})
+class TestDirective {
+  constructor(el: ElementRef) { getDOM().addClass(el.nativeElement, 'compiled'); }
+}
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+  text: string;
+  constructor() { this.text = 'foo'; }
+}
+
+function createTestComponent(template: string): ComponentFixture<TestComponent> {
+  return TestBed.overrideComponent(TestComponent, {set: {template: template}})
+      .createComponent(TestComponent);
+}
diff --git a/packages/common/test/i18n/format_date_spec.ts b/packages/common/test/i18n/format_date_spec.ts
new file mode 100644
index 000000000000..02219f5751e9
--- /dev/null
+++ b/packages/common/test/i18n/format_date_spec.ts
@@ -0,0 +1,328 @@
+/**
+ * @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 {registerLocaleData} from '@angular/common';
+import localeAr from '@angular/common/locales/ar';
+import localeDe from '@angular/common/locales/de';
+import localeEn from '@angular/common/locales/en';
+import localeEnExtra from '@angular/common/locales/extra/en';
+import localeHu from '@angular/common/locales/hu';
+import localeSr from '@angular/common/locales/sr';
+import localeTh from '@angular/common/locales/th';
+import {isDate, toDate, formatDate} from '@angular/common/src/i18n/format_date';
+
+describe('Format date', () => {
+  describe('toDate', () => {
+    it('should support date', () => { expect(isDate(toDate(new Date()))).toBeTruthy(); });
+
+    it('should support int', () => { expect(isDate(toDate(123456789))).toBeTruthy(); });
+
+    it('should support numeric strings',
+       () => { expect(isDate(toDate('123456789'))).toBeTruthy(); });
+
+    it('should support decimal strings',
+       () => { expect(isDate(toDate('123456789.11'))).toBeTruthy(); });
+
+    it('should support ISO string',
+       () => { expect(isDate(toDate('2015-06-15T21:43:11Z'))).toBeTruthy(); });
+
+    it('should throw for empty string', () => { expect(() => toDate('')).toThrow(); });
+
+    it('should throw for alpha numeric strings',
+       () => { expect(() => toDate('123456789 hello')).toThrow(); });
+
+    it('should throw for NaN', () => { expect(() => toDate(Number.NaN)).toThrow(); });
+
+    it('should support ISO string without time',
+       () => { expect(isDate(toDate('2015-01-01'))).toBeTruthy(); });
+
+    it('should throw for objects', () => { expect(() => toDate({} as any)).toThrow(); });
+  });
+
+  describe('formatDate', () => {
+    const isoStringWithoutTime = '2015-01-01';
+    const defaultLocale = 'en-US';
+    const defaultFormat = 'mediumDate';
+    let date: Date;
+
+    // Check the transformation of a date into a pattern
+    function expectDateFormatAs(date: Date | string, pattern: any, output: string): void {
+      expect(formatDate(date, pattern, defaultLocale)).toEqual(output, `pattern: "${pattern}"`);
+    }
+
+    beforeAll(() => {
+      registerLocaleData(localeEn, localeEnExtra);
+      registerLocaleData(localeDe);
+      registerLocaleData(localeHu);
+      registerLocaleData(localeSr);
+      registerLocaleData(localeTh);
+      registerLocaleData(localeAr);
+    });
+
+    beforeEach(() => { date = new Date(2015, 5, 15, 9, 3, 1, 550); });
+
+    it('should format each component correctly', () => {
+      const dateFixtures: any = {
+        G: 'AD',
+        GG: 'AD',
+        GGG: 'AD',
+        GGGG: 'Anno Domini',
+        GGGGG: 'A',
+        y: '2015',
+        yy: '15',
+        yyy: '2015',
+        yyyy: '2015',
+        M: '6',
+        MM: '06',
+        MMM: 'Jun',
+        MMMM: 'June',
+        MMMMM: 'J',
+        L: '6',
+        LL: '06',
+        LLL: 'Jun',
+        LLLL: 'June',
+        LLLLL: 'J',
+        w: '25',
+        ww: '25',
+        W: '3',
+        d: '15',
+        dd: '15',
+        E: 'Mon',
+        EE: 'Mon',
+        EEE: 'Mon',
+        EEEE: 'Monday',
+        EEEEEE: 'Mo',
+        h: '9',
+        hh: '09',
+        H: '9',
+        HH: '09',
+        m: '3',
+        mm: '03',
+        s: '1',
+        ss: '01',
+        S: '5',
+        SS: '55',
+        SSS: '550',
+        a: 'AM',
+        aa: 'AM',
+        aaa: 'AM',
+        aaaa: 'AM',
+        aaaaa: 'a',
+        b: 'morning',
+        bb: 'morning',
+        bbb: 'morning',
+        bbbb: 'morning',
+        bbbbb: 'morning',
+        B: 'in the morning',
+        BB: 'in the morning',
+        BBB: 'in the morning',
+        BBBB: 'in the morning',
+        BBBBB: 'in the morning',
+      };
+
+      const isoStringWithoutTimeFixtures: any = {
+        G: 'AD',
+        GG: 'AD',
+        GGG: 'AD',
+        GGGG: 'Anno Domini',
+        GGGGG: 'A',
+        y: '2015',
+        yy: '15',
+        yyy: '2015',
+        yyyy: '2015',
+        M: '1',
+        MM: '01',
+        MMM: 'Jan',
+        MMMM: 'January',
+        MMMMM: 'J',
+        L: '1',
+        LL: '01',
+        LLL: 'Jan',
+        LLLL: 'January',
+        LLLLL: 'J',
+        w: '1',
+        ww: '01',
+        W: '1',
+        d: '1',
+        dd: '01',
+        E: 'Thu',
+        EE: 'Thu',
+        EEE: 'Thu',
+        EEEE: 'Thursday',
+        EEEEE: 'T',
+        EEEEEE: 'Th',
+        h: '12',
+        hh: '12',
+        H: '0',
+        HH: '00',
+        m: '0',
+        mm: '00',
+        s: '0',
+        ss: '00',
+        S: '0',
+        SS: '00',
+        SSS: '000',
+        a: 'AM',
+        aa: 'AM',
+        aaa: 'AM',
+        aaaa: 'AM',
+        aaaaa: 'a',
+        b: 'midnight',
+        bb: 'midnight',
+        bbb: 'midnight',
+        bbbb: 'midnight',
+        bbbbb: 'midnight',
+        B: 'midnight',
+        BB: 'midnight',
+        BBB: 'midnight',
+        BBBB: 'midnight',
+        BBBBB: 'mi',
+      };
+
+      Object.keys(dateFixtures).forEach((pattern: string) => {
+        expectDateFormatAs(date, pattern, dateFixtures[pattern]);
+      });
+
+      Object.keys(isoStringWithoutTimeFixtures).forEach((pattern: string) => {
+        expectDateFormatAs(isoStringWithoutTime, pattern, isoStringWithoutTimeFixtures[pattern]);
+      });
+    });
+
+    it('should format with timezones', () => {
+      const dateFixtures: any = {
+        z: /GMT(\+|-)\d/,
+        zz: /GMT(\+|-)\d/,
+        zzz: /GMT(\+|-)\d/,
+        zzzz: /GMT(\+|-)\d{2}\:30/,
+        Z: /(\+|-)\d{2}30/,
+        ZZ: /(\+|-)\d{2}30/,
+        ZZZ: /(\+|-)\d{2}30/,
+        ZZZZ: /GMT(\+|-)\d{2}\:30/,
+        ZZZZZ: /(\+|-)\d{2}\:30/,
+        O: /GMT(\+|-)\d/,
+        OOOO: /GMT(\+|-)\d{2}\:30/,
+      };
+
+      Object.keys(dateFixtures).forEach((pattern: string) => {
+        expect(formatDate(date, pattern, defaultLocale, '+0430')).toMatch(dateFixtures[pattern]);
+      });
+    });
+
+    it('should format common multi component patterns', () => {
+      const dateFixtures: any = {
+        'EEE, M/d/y': 'Mon, 6/15/2015',
+        'EEE, M/d': 'Mon, 6/15',
+        'MMM d': 'Jun 15',
+        'dd/MM/yyyy': '15/06/2015',
+        'MM/dd/yyyy': '06/15/2015',
+        'yMEEEd': '20156Mon15',
+        'MEEEd': '6Mon15',
+        'MMMd': 'Jun15',
+        'EEEE, MMMM d, y': 'Monday, June 15, 2015',
+        'H:mm a': '9:03 AM',
+        'ms': '31',
+        'MM/dd/yy hh:mm': '06/15/15 09:03',
+        'MM/dd/y': '06/15/2015'
+      };
+
+      Object.keys(dateFixtures).forEach((pattern: string) => {
+        expectDateFormatAs(date, pattern, dateFixtures[pattern]);
+      });
+    });
+
+    it('should format with pattern aliases', () => {
+      const dateFixtures: any = {
+        'MM/dd/yyyy': '06/15/2015',
+        shortDate: '6/15/15',
+        mediumDate: 'Jun 15, 2015',
+        longDate: 'June 15, 2015',
+        fullDate: 'Monday, June 15, 2015',
+        short: '6/15/15, 9:03 AM',
+        medium: 'Jun 15, 2015, 9:03:01 AM',
+        long: /June 15, 2015 at 9:03:01 AM GMT(\+|-)\d/,
+        full: /Monday, June 15, 2015 at 9:03:01 AM GMT(\+|-)\d{2}:\d{2}/,
+        shortTime: '9:03 AM',
+        mediumTime: '9:03:01 AM',
+        longTime: /9:03:01 AM GMT(\+|-)\d/,
+        fullTime: /9:03:01 AM GMT(\+|-)\d{2}:\d{2}/,
+      };
+
+      Object.keys(dateFixtures).forEach((pattern: string) => {
+        expect(formatDate(date, pattern, defaultLocale)).toMatch(dateFixtures[pattern]);
+      });
+    });
+
+    it('should format invalid in IE ISO date',
+       () => expect(formatDate('2017-01-11T12:00:00.014-0500', defaultFormat, defaultLocale))
+                 .toEqual('Jan 11, 2017'));
+
+    it('should format invalid in Safari ISO date',
+       () => expect(formatDate('2017-01-20T12:00:00+0000', defaultFormat, defaultLocale))
+                 .toEqual('Jan 20, 2017'));
+
+    // https://github.com/angular/angular/issues/9524
+    // https://github.com/angular/angular/issues/9524
+    it('should format correctly with iso strings that contain time',
+       () => expect(formatDate('2017-05-07T22:14:39', 'dd-MM-yyyy HH:mm', defaultLocale))
+                 .toMatch(/07-05-2017 \d{2}:\d{2}/));
+
+    // https://github.com/angular/angular/issues/21491
+    it('should not assume UTC for iso strings in Safari if the timezone is not defined', () => {
+      // this test only works if the timezone is not in UTC
+      // which is the case for BrowserStack when we test Safari
+      if (new Date().getTimezoneOffset() !== 0) {
+        expect(formatDate('2018-01-11T13:00:00', 'HH', defaultLocale))
+            .not.toEqual(formatDate('2018-01-11T13:00:00Z', 'HH', defaultLocale));
+      }
+    });
+
+    // https://github.com/angular/angular/issues/16624
+    // https://github.com/angular/angular/issues/17478
+    it('should show the correct time when the timezone is fixed', () => {
+      expect(formatDate('2017-06-13T10:14:39+0000', 'shortTime', defaultLocale, '+0000'))
+          .toEqual('10:14 AM');
+      expect(formatDate('2017-06-13T10:14:39+0000', 'h:mm a', defaultLocale, '+0000'))
+          .toEqual('10:14 AM');
+    });
+
+    it('should remove bidi control characters',
+       () => expect(formatDate(date, 'MM/dd/yyyy', defaultLocale) !.length).toEqual(10));
+
+    it(`should format the date correctly in various locales`, () => {
+      expect(formatDate(date, 'short', 'de')).toEqual('15.06.15, 09:03');
+      expect(formatDate(date, 'short', 'ar')).toEqual('15‏/6‏/2015 9:03 ص');
+      expect(formatDate(date, 'dd-MM-yy', 'th')).toEqual('15-06-15');
+      expect(formatDate(date, 'a', 'hu')).toEqual('de.');
+      expect(formatDate(date, 'a', 'sr')).toEqual('пре подне');
+
+      // TODO(ocombe): activate this test when we support local numbers
+      // expect(formatDate(date, 'hh', 'mr')).toEqual('०९');
+    });
+
+    it('should throw if we use getExtraDayPeriods without loading extra locale data', () => {
+      expect(() => formatDate(date, 'b', 'de'))
+          .toThrowError(/Missing extra locale data for the locale "de"/);
+    });
+
+    // https://github.com/angular/angular/issues/24384
+    it('should not round fractional seconds', () => {
+      expect(formatDate(3999, 'm:ss', 'en')).toEqual('0:03');
+      expect(formatDate(3999, 'm:ss.S', 'en')).toEqual('0:03.9');
+      expect(formatDate(3999, 'm:ss.SS', 'en')).toEqual('0:03.99');
+      expect(formatDate(3999, 'm:ss.SSS', 'en')).toEqual('0:03.999');
+      expect(formatDate(3000, 'm:ss', 'en')).toEqual('0:03');
+      expect(formatDate(3000, 'm:ss.S', 'en')).toEqual('0:03.0');
+      expect(formatDate(3000, 'm:ss.SS', 'en')).toEqual('0:03.00');
+      expect(formatDate(3000, 'm:ss.SSS', 'en')).toEqual('0:03.000');
+      expect(formatDate(3001, 'm:ss', 'en')).toEqual('0:03');
+      expect(formatDate(3001, 'm:ss.S', 'en')).toEqual('0:03.0');
+      expect(formatDate(3001, 'm:ss.SS', 'en')).toEqual('0:03.00');
+      expect(formatDate(3001, 'm:ss.SSS', 'en')).toEqual('0:03.001');
+    });
+  });
+});
diff --git a/packages/common/test/i18n/format_number_spec.ts b/packages/common/test/i18n/format_number_spec.ts
new file mode 100644
index 000000000000..970b68f5ef36
--- /dev/null
+++ b/packages/common/test/i18n/format_number_spec.ts
@@ -0,0 +1,118 @@
+/**
+ * @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 localeEn from '@angular/common/locales/en';
+import localeEsUS from '@angular/common/locales/es-US';
+import localeFr from '@angular/common/locales/fr';
+import localeAr from '@angular/common/locales/ar';
+import {formatCurrency, formatNumber, formatPercent, registerLocaleData} from '@angular/common';
+import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+describe('Format number', () => {
+  const defaultLocale = 'en-US';
+
+  beforeAll(() => {
+    registerLocaleData(localeEn);
+    registerLocaleData(localeEsUS);
+    registerLocaleData(localeFr);
+    registerLocaleData(localeAr);
+  });
+
+  describe('Number', () => {
+    describe('transform', () => {
+      it('should return correct value for numbers', () => {
+        expect(formatNumber(12345, defaultLocale)).toEqual('12,345');
+        expect(formatNumber(123, defaultLocale, '.2')).toEqual('123.00');
+        expect(formatNumber(1, defaultLocale, '3.')).toEqual('001');
+        expect(formatNumber(1.1, defaultLocale, '3.4-5')).toEqual('001.1000');
+        expect(formatNumber(1.123456, defaultLocale, '3.4-5')).toEqual('001.12346');
+        expect(formatNumber(1.1234, defaultLocale)).toEqual('1.123');
+        expect(formatNumber(1.123456, defaultLocale, '.2')).toEqual('1.123');
+        expect(formatNumber(1.123456, defaultLocale, '.4')).toEqual('1.1235');
+      });
+
+      it('should throw if minFractionDigits is explicitly higher than maxFractionDigits', () => {
+        expect(() => formatNumber(1.1, defaultLocale, '3.4-2'))
+            .toThrowError(/is higher than the maximum/);
+      });
+    });
+
+    describe('transform with custom locales', () => {
+      it('should return the correct format for es-US',
+         () => { expect(formatNumber(9999999.99, 'es-US', '1.2-2')).toEqual('9,999,999.99'); });
+    });
+  });
+
+  describe('Percent', () => {
+    describe('transform', () => {
+      it('should return correct value for numbers', () => {
+        expect(formatPercent(1.23, defaultLocale)).toEqual('123%');
+        expect(formatPercent(1.2, defaultLocale, '.2')).toEqual('120.00%');
+        expect(formatPercent(1.2, defaultLocale, '4.2')).toEqual('0,120.00%');
+        expect(formatPercent(1.2, 'fr', '4.2')).toEqual('0 120,00 %');
+        expect(formatPercent(1.2, 'ar', '4.2')).toEqual('0,120.00‎%‎');
+        // see issue #20136
+        expect(formatPercent(0.12345674, defaultLocale, '0.0-10')).toEqual('12.345674%');
+        expect(formatPercent(0, defaultLocale, '0.0-10')).toEqual('0%');
+        expect(formatPercent(0.00, defaultLocale, '0.0-10')).toEqual('0%');
+        expect(formatPercent(1, defaultLocale, '0.0-10')).toEqual('100%');
+        expect(formatPercent(0.1, defaultLocale, '0.0-10')).toEqual('10%');
+        expect(formatPercent(0.12, defaultLocale, '0.0-10')).toEqual('12%');
+        expect(formatPercent(0.123, defaultLocale, '0.0-10')).toEqual('12.3%');
+        expect(formatPercent(12.3456, defaultLocale, '0.0-10')).toEqual('1,234.56%');
+        expect(formatPercent(12.345600, defaultLocale, '0.0-10')).toEqual('1,234.56%');
+        expect(formatPercent(12.345699999, defaultLocale, '0.0-6')).toEqual('1,234.57%');
+        expect(formatPercent(12.345699999, defaultLocale, '0.4-6')).toEqual('1,234.5700%');
+        expect(formatPercent(100, defaultLocale, '0.4-6')).toEqual('10,000.0000%');
+        expect(formatPercent(100, defaultLocale, '0.0-10')).toEqual('10,000%');
+        expect(formatPercent(1.5e2, defaultLocale)).toEqual('15,000%');
+        expect(formatPercent(1e100, defaultLocale)).toEqual('1E+102%');
+      });
+    });
+  });
+
+  describe('Currency', () => {
+    const defaultCurrencyCode = 'USD';
+    describe('transform', () => {
+      it('should return correct value for numbers', () => {
+        expect(formatCurrency(123, defaultLocale, '$')).toEqual('$123.00');
+        expect(formatCurrency(12, defaultLocale, 'EUR', 'EUR', '.1')).toEqual('EUR12.0');
+        expect(
+            formatCurrency(5.1234, defaultLocale, defaultCurrencyCode, defaultCurrencyCode, '.0-3'))
+            .toEqual('USD5.123');
+        expect(formatCurrency(5.1234, defaultLocale, defaultCurrencyCode)).toEqual('USD5.12');
+        expect(formatCurrency(5.1234, defaultLocale, '$')).toEqual('$5.12');
+        expect(formatCurrency(5.1234, defaultLocale, 'CA$')).toEqual('CA$5.12');
+        expect(formatCurrency(5.1234, defaultLocale, '$')).toEqual('$5.12');
+        expect(formatCurrency(5.1234, defaultLocale, '$', defaultCurrencyCode, '5.2-2'))
+            .toEqual('$00,005.12');
+        expect(formatCurrency(5.1234, 'fr', '$', defaultCurrencyCode, '5.2-2'))
+            .toEqual('00 005,12 $');
+        expect(formatCurrency(5, 'fr', '$US', defaultCurrencyCode)).toEqual('5,00 $US');
+      });
+
+      it('should support any currency code name', () => {
+        // currency code is unknown, default formatting options will be used
+        expect(formatCurrency(5.1234, defaultLocale, 'unexisting_ISO_code'))
+            .toEqual('unexisting_ISO_code5.12');
+        // currency code is USD, the pipe will format based on USD but will display "Custom name"
+        expect(formatCurrency(5.1234, defaultLocale, 'Custom name')).toEqual('Custom name5.12');
+      });
+
+      it('should round to the default number of digits if no digitsInfo', () => {
+        // IDR has a default number of digits of 0
+        expect(formatCurrency(5.1234, defaultLocale, 'IDR', 'IDR')).toEqual('IDR5');
+        expect(formatCurrency(5.1234, defaultLocale, 'IDR', 'IDR', '.2')).toEqual('IDR5.12');
+        expect(formatCurrency(5.1234, defaultLocale, 'Custom name', 'IDR')).toEqual('Custom name5');
+        // BHD has a default number of digits of 3
+        expect(formatCurrency(5.1234, defaultLocale, 'BHD', 'BHD')).toEqual('BHD5.123');
+        expect(formatCurrency(5.1234, defaultLocale, 'BHD', 'BHD', '.1-2')).toEqual('BHD5.12');
+      });
+    });
+  });
+});
diff --git a/packages/common/test/i18n/locale_data_api_spec.ts b/packages/common/test/i18n/locale_data_api_spec.ts
new file mode 100644
index 000000000000..9fee3870708e
--- /dev/null
+++ b/packages/common/test/i18n/locale_data_api_spec.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 localeCaESVALENCIA from '@angular/common/locales/ca-ES-VALENCIA';
+import localeEn from '@angular/common/locales/en';
+import localeFr from '@angular/common/locales/fr';
+import localeZh from '@angular/common/locales/zh';
+import localeFrCA from '@angular/common/locales/fr-CA';
+import localeEnAU from '@angular/common/locales/en-AU';
+import {registerLocaleData} from '../../src/i18n/locale_data';
+import {findLocaleData, getCurrencySymbol, getLocaleDateFormat, FormatWidth, getNumberOfCurrencyDigits} from '../../src/i18n/locale_data_api';
+
+{
+  describe('locale data api', () => {
+    beforeAll(() => {
+      registerLocaleData(localeCaESVALENCIA);
+      registerLocaleData(localeEn);
+      registerLocaleData(localeFr);
+      registerLocaleData(localeFrCA);
+      registerLocaleData(localeFr, 'fake-id');
+      registerLocaleData(localeFrCA, 'fake_Id2');
+      registerLocaleData(localeZh);
+      registerLocaleData(localeEnAU);
+    });
+
+    describe('findLocaleData', () => {
+      it('should throw if the LOCALE_DATA for the chosen locale or its parent locale is not available',
+         () => {
+           expect(() => findLocaleData('pt-AO'))
+               .toThrowError(/Missing locale data for the locale "pt-AO"/);
+         });
+
+      it('should return english data if the locale is en-US',
+         () => { expect(findLocaleData('en-US')).toEqual(localeEn); });
+
+      it('should return the exact LOCALE_DATA if it is available',
+         () => { expect(findLocaleData('fr-CA')).toEqual(localeFrCA); });
+
+      it('should return the parent LOCALE_DATA if it exists and exact locale is not available',
+         () => { expect(findLocaleData('fr-BE')).toEqual(localeFr); });
+
+      it(`should find the LOCALE_DATA even if the locale id is badly formatted`, () => {
+        expect(findLocaleData('ca-ES-VALENCIA')).toEqual(localeCaESVALENCIA);
+        expect(findLocaleData('CA_es_Valencia')).toEqual(localeCaESVALENCIA);
+      });
+
+      it(`should find the LOCALE_DATA if the locale id was registered`, () => {
+        expect(findLocaleData('fake-id')).toEqual(localeFr);
+        expect(findLocaleData('fake_iD')).toEqual(localeFr);
+        expect(findLocaleData('fake-id2')).toEqual(localeFrCA);
+      });
+    });
+
+    describe('getting currency symbol', () => {
+      it('should return the correct symbol', () => {
+        expect(getCurrencySymbol('USD', 'wide')).toEqual('$');
+        expect(getCurrencySymbol('USD', 'narrow')).toEqual('$');
+        expect(getCurrencySymbol('AUD', 'wide')).toEqual('A$');
+        expect(getCurrencySymbol('AUD', 'narrow')).toEqual('$');
+        expect(getCurrencySymbol('CRC', 'wide')).toEqual('CRC');
+        expect(getCurrencySymbol('CRC', 'narrow')).toEqual('₡');
+        expect(getCurrencySymbol('unexisting_ISO_code', 'wide')).toEqual('unexisting_ISO_code');
+        expect(getCurrencySymbol('unexisting_ISO_code', 'narrow')).toEqual('unexisting_ISO_code');
+        expect(getCurrencySymbol('USD', 'wide', 'en-AU')).toEqual('USD');
+        expect(getCurrencySymbol('USD', 'narrow', 'en-AU')).toEqual('$');
+        expect(getCurrencySymbol('AUD', 'wide', 'en-AU')).toEqual('$');
+        expect(getCurrencySymbol('AUD', 'narrow', 'en-AU')).toEqual('$');
+        expect(getCurrencySymbol('USD', 'wide', 'fr')).toEqual('$US');
+      });
+    });
+
+    describe('getNbOfCurrencyDigits', () => {
+      it('should return the correct value', () => {
+        expect(getNumberOfCurrencyDigits('USD')).toEqual(2);
+        expect(getNumberOfCurrencyDigits('IDR')).toEqual(0);
+        expect(getNumberOfCurrencyDigits('BHD')).toEqual(3);
+        expect(getNumberOfCurrencyDigits('unexisting_ISO_code')).toEqual(2);
+      });
+    });
+
+    describe('getLastDefinedValue', () => {
+      it('should find the last defined date format when format not defined',
+         () => { expect(getLocaleDateFormat('zh', FormatWidth.Long)).toEqual('y年M月d日'); });
+    });
+  });
+}
diff --git a/packages/common/test/i18n/localization_spec.ts b/packages/common/test/i18n/localization_spec.ts
new file mode 100644
index 000000000000..8eba92fb2c20
--- /dev/null
+++ b/packages/common/test/i18n/localization_spec.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 localeRo from '@angular/common/locales/ro';
+import localeSr from '@angular/common/locales/sr';
+import localeZgh from '@angular/common/locales/zgh';
+import localeFr from '@angular/common/locales/fr';
+import {LOCALE_ID} from '@angular/core';
+import {TestBed, inject} from '@angular/core/testing';
+import {NgLocaleLocalization, NgLocalization, getPluralCategory, DEPRECATED_PLURAL_FN, getPluralCase} from '../../src/i18n/localization';
+import {Plural} from '../../src/i18n/locale_data_api';
+import {registerLocaleData} from '../../src/i18n/locale_data';
+
+{
+  describe('l10n', () => {
+    beforeAll(() => {
+      registerLocaleData(localeRo);
+      registerLocaleData(localeSr);
+      registerLocaleData(localeZgh);
+      registerLocaleData(localeFr);
+    });
+
+    describe('NgLocalization', () => {
+      function roTests() {
+        it('should return plural cases for the provided locale',
+           inject([NgLocalization], (l10n: NgLocalization) => {
+             expect(l10n.getPluralCategory(0)).toEqual('few');
+             expect(l10n.getPluralCategory(1)).toEqual('one');
+             expect(l10n.getPluralCategory(1212)).toEqual('few');
+             expect(l10n.getPluralCategory(1223)).toEqual('other');
+           }));
+      }
+
+      describe('ro', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule({
+            providers: [{provide: LOCALE_ID, useValue: 'ro'}],
+          });
+        });
+
+        roTests();
+      });
+
+      describe('ro with v4 plurals', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule({
+            providers: [
+              {provide: LOCALE_ID, useValue: 'ro'},
+              {provide: DEPRECATED_PLURAL_FN, useValue: getPluralCase}
+            ],
+          });
+        });
+
+        roTests();
+      });
+
+      function srTests() {
+        it('should return plural cases for the provided locale',
+           inject([NgLocalization], (l10n: NgLocalization) => {
+             expect(l10n.getPluralCategory(1)).toEqual('one');
+             expect(l10n.getPluralCategory(2.1)).toEqual('one');
+
+             expect(l10n.getPluralCategory(3)).toEqual('few');
+             expect(l10n.getPluralCategory(0.2)).toEqual('few');
+
+             expect(l10n.getPluralCategory(2.11)).toEqual('other');
+             expect(l10n.getPluralCategory(2.12)).toEqual('other');
+           }));
+      }
+
+      describe('sr', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule({
+            providers: [{provide: LOCALE_ID, useValue: 'sr'}],
+          });
+        });
+
+        srTests();
+      });
+
+      describe('sr with v4 plurals', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule({
+            providers: [
+              {provide: LOCALE_ID, useValue: 'sr'},
+              {provide: DEPRECATED_PLURAL_FN, useValue: getPluralCase}
+            ],
+          });
+        });
+
+        srTests();
+      });
+    });
+
+    describe('NgLocaleLocalization', () => {
+      function ngLocaleLocalizationTests(
+          getPluralCase: ((locale: string, value: number | string) => Plural) | null) {
+        it('should return the correct values for the "en" locale', () => {
+          const l10n = new NgLocaleLocalization('en-US', getPluralCase);
+
+          expect(l10n.getPluralCategory(0)).toEqual('other');
+          expect(l10n.getPluralCategory(1)).toEqual('one');
+          expect(l10n.getPluralCategory(2)).toEqual('other');
+        });
+
+        it('should return the correct values for the "ro" locale', () => {
+          const l10n = new NgLocaleLocalization('ro', getPluralCase);
+
+          expect(l10n.getPluralCategory(0)).toEqual('few');
+          expect(l10n.getPluralCategory(1)).toEqual('one');
+          expect(l10n.getPluralCategory(2)).toEqual('few');
+          expect(l10n.getPluralCategory(12)).toEqual('few');
+          expect(l10n.getPluralCategory(23)).toEqual('other');
+          expect(l10n.getPluralCategory(1212)).toEqual('few');
+          expect(l10n.getPluralCategory(1223)).toEqual('other');
+        });
+
+        it('should return the correct values for the "sr" locale', () => {
+          const l10n = new NgLocaleLocalization('sr', getPluralCase);
+
+          expect(l10n.getPluralCategory(1)).toEqual('one');
+          expect(l10n.getPluralCategory(31)).toEqual('one');
+          expect(l10n.getPluralCategory(0.1)).toEqual('one');
+          expect(l10n.getPluralCategory(1.1)).toEqual('one');
+          expect(l10n.getPluralCategory(2.1)).toEqual('one');
+
+          expect(l10n.getPluralCategory(3)).toEqual('few');
+          expect(l10n.getPluralCategory(33)).toEqual('few');
+          expect(l10n.getPluralCategory(0.2)).toEqual('few');
+          expect(l10n.getPluralCategory(0.3)).toEqual('few');
+          expect(l10n.getPluralCategory(0.4)).toEqual('few');
+          expect(l10n.getPluralCategory(2.2)).toEqual('few');
+
+          expect(l10n.getPluralCategory(2.11)).toEqual('other');
+          expect(l10n.getPluralCategory(2.12)).toEqual('other');
+          expect(l10n.getPluralCategory(2.13)).toEqual('other');
+          expect(l10n.getPluralCategory(2.14)).toEqual('other');
+          expect(l10n.getPluralCategory(2.15)).toEqual('other');
+
+          expect(l10n.getPluralCategory(0)).toEqual('other');
+          expect(l10n.getPluralCategory(5)).toEqual('other');
+          expect(l10n.getPluralCategory(10)).toEqual('other');
+          expect(l10n.getPluralCategory(35)).toEqual('other');
+          expect(l10n.getPluralCategory(37)).toEqual('other');
+          expect(l10n.getPluralCategory(40)).toEqual('other');
+          expect(l10n.getPluralCategory(0.0)).toEqual('other');
+          expect(l10n.getPluralCategory(0.5)).toEqual('other');
+          expect(l10n.getPluralCategory(0.6)).toEqual('other');
+
+          expect(l10n.getPluralCategory(2)).toEqual('few');
+          expect(l10n.getPluralCategory(2.1)).toEqual('one');
+          expect(l10n.getPluralCategory(2.2)).toEqual('few');
+          expect(l10n.getPluralCategory(2.3)).toEqual('few');
+          expect(l10n.getPluralCategory(2.4)).toEqual('few');
+          expect(l10n.getPluralCategory(2.5)).toEqual('other');
+
+          expect(l10n.getPluralCategory(20)).toEqual('other');
+          expect(l10n.getPluralCategory(21)).toEqual('one');
+          expect(l10n.getPluralCategory(22)).toEqual('few');
+          expect(l10n.getPluralCategory(23)).toEqual('few');
+          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', getPluralCase);
+
+          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');
+        });
+      }
+
+      ngLocaleLocalizationTests(null);
+      ngLocaleLocalizationTests(getPluralCase);
+    });
+
+    function pluralCategoryTests(
+        getPluralCase: ((locale: string, value: number | string) => Plural) | null) {
+      it('should return plural category', () => {
+        const l10n = new NgLocaleLocalization('fr', getPluralCase);
+
+        expect(getPluralCategory(0, ['one', 'other'], l10n)).toEqual('one');
+        expect(getPluralCategory(1, ['one', 'other'], l10n)).toEqual('one');
+        expect(getPluralCategory(5, ['one', 'other'], l10n)).toEqual('other');
+      });
+
+      it('should return discrete cases', () => {
+        const l10n = new NgLocaleLocalization('fr', getPluralCase);
+
+        expect(getPluralCategory(0, ['one', 'other', '=0'], l10n)).toEqual('=0');
+        expect(getPluralCategory(1, ['one', 'other'], l10n)).toEqual('one');
+        expect(getPluralCategory(5, ['one', 'other', '=5'], l10n)).toEqual('=5');
+        expect(getPluralCategory(6, ['one', 'other', '=5'], l10n)).toEqual('other');
+      });
+
+      it('should fallback to other when the case is not present', () => {
+        const l10n = new NgLocaleLocalization('ro', getPluralCase);
+        expect(getPluralCategory(1, ['one', 'other'], l10n)).toEqual('one');
+        // 2 -> 'few'
+        expect(getPluralCategory(2, ['one', 'other'], l10n)).toEqual('other');
+      });
+
+      describe('errors', () => {
+        it('should report an error when the "other" category is not present', () => {
+          expect(() => {
+            const l10n = new NgLocaleLocalization('ro', getPluralCase);
+            // 2 -> 'few'
+            getPluralCategory(2, ['one'], l10n);
+          }).toThrowError('No plural message found for value "2"');
+        });
+      });
+    }
+
+    describe('getPluralCategory', () => {
+      pluralCategoryTests(null);
+      pluralCategoryTests(getPluralCase);
+    });
+  });
+}
diff --git a/packages/common/test/location/location_spec.ts b/packages/common/test/location/location_spec.ts
new file mode 100644
index 000000000000..7d1fe22ebc6d
--- /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';
+
+{
+  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/async_pipe_spec.ts b/packages/common/test/pipes/async_pipe_spec.ts
new file mode 100644
index 000000000000..20babf8a9d7f
--- /dev/null
+++ b/packages/common/test/pipes/async_pipe_spec.ts
@@ -0,0 +1,216 @@
+/**
+ * @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 {AsyncPipe} from '@angular/common';
+import {EventEmitter, WrappedValue} from '@angular/core';
+import {AsyncTestCompleter, beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
+import {SpyChangeDetectorRef} from '../spies';
+
+{
+  describe('AsyncPipe', () => {
+
+    describe('Observable', () => {
+      let emitter: EventEmitter<any>;
+      let pipe: AsyncPipe;
+      let ref: any;
+      const message = {};
+
+      beforeEach(() => {
+        emitter = new EventEmitter();
+        ref = new SpyChangeDetectorRef();
+        pipe = new AsyncPipe(ref);
+      });
+
+      describe('transform', () => {
+        it('should return null when subscribing to an observable',
+           () => { expect(pipe.transform(emitter)).toBe(null); });
+
+        it('should return the latest available value wrapped',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             pipe.transform(emitter);
+             emitter.emit(message);
+
+             setTimeout(() => {
+               expect(pipe.transform(emitter)).toEqual(new WrappedValue(message));
+               async.done();
+             }, 0);
+           }));
+
+
+        it('should return same value when nothing has changed since the last call',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             pipe.transform(emitter);
+             emitter.emit(message);
+
+             setTimeout(() => {
+               pipe.transform(emitter);
+               expect(pipe.transform(emitter)).toBe(message);
+               async.done();
+             }, 0);
+           }));
+
+        it('should dispose of the existing subscription when subscribing to a new observable',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             pipe.transform(emitter);
+
+             const newEmitter = new EventEmitter();
+             expect(pipe.transform(newEmitter)).toBe(null);
+             emitter.emit(message);
+
+             // this should not affect the pipe
+             setTimeout(() => {
+               expect(pipe.transform(newEmitter)).toBe(null);
+               async.done();
+             }, 0);
+           }));
+
+        it('should request a change detection check upon receiving a new value',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             pipe.transform(emitter);
+             emitter.emit(message);
+
+             setTimeout(() => {
+               expect(ref.spy('markForCheck')).toHaveBeenCalled();
+               async.done();
+             }, 10);
+           }));
+      });
+
+      describe('ngOnDestroy', () => {
+        it('should do nothing when no subscription',
+           () => { expect(() => pipe.ngOnDestroy()).not.toThrow(); });
+
+        it('should dispose of the existing subscription',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             pipe.transform(emitter);
+             pipe.ngOnDestroy();
+             emitter.emit(message);
+
+             setTimeout(() => {
+               expect(pipe.transform(emitter)).toBe(null);
+               async.done();
+             }, 0);
+           }));
+      });
+    });
+
+    describe('Promise', () => {
+      const message = new Object();
+      let pipe: AsyncPipe;
+      let resolve: (result: any) => void;
+      let reject: (error: any) => void;
+      let promise: Promise<any>;
+      let ref: SpyChangeDetectorRef;
+      // adds longer timers for passing tests in IE
+      const timer = (getDOM() && browserDetection.isIE) ? 50 : 10;
+
+      beforeEach(() => {
+        promise = new Promise((res, rej) => {
+          resolve = res;
+          reject = rej;
+        });
+        ref = new SpyChangeDetectorRef();
+        pipe = new AsyncPipe(<any>ref);
+      });
+
+      describe('transform', () => {
+        it('should return null when subscribing to a promise',
+           () => { expect(pipe.transform(promise)).toBe(null); });
+
+        it('should return the latest available value',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             pipe.transform(promise);
+
+             resolve(message);
+
+             setTimeout(() => {
+               expect(pipe.transform(promise)).toEqual(new WrappedValue(message));
+               async.done();
+             }, timer);
+           }));
+
+        it('should return unwrapped value when nothing has changed since the last call',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             pipe.transform(promise);
+             resolve(message);
+
+             setTimeout(() => {
+               pipe.transform(promise);
+               expect(pipe.transform(promise)).toBe(message);
+               async.done();
+             }, timer);
+           }));
+
+        it('should dispose of the existing subscription when subscribing to a new promise',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             pipe.transform(promise);
+
+             promise = new Promise<any>(() => {});
+             expect(pipe.transform(promise)).toBe(null);
+
+             // this should not affect the pipe, so it should return WrappedValue
+             resolve(message);
+
+             setTimeout(() => {
+               expect(pipe.transform(promise)).toBe(null);
+               async.done();
+             }, timer);
+           }));
+
+        it('should request a change detection check upon receiving a new value',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             const markForCheck = ref.spy('markForCheck');
+             pipe.transform(promise);
+             resolve(message);
+
+             setTimeout(() => {
+               expect(markForCheck).toHaveBeenCalled();
+               async.done();
+             }, timer);
+           }));
+
+        describe('ngOnDestroy', () => {
+          it('should do nothing when no source',
+             () => { expect(() => pipe.ngOnDestroy()).not.toThrow(); });
+
+          it('should dispose of the existing source',
+             inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+               pipe.transform(promise);
+               expect(pipe.transform(promise)).toBe(null);
+               resolve(message);
+
+
+               setTimeout(() => {
+                 expect(pipe.transform(promise)).toEqual(new WrappedValue(message));
+                 pipe.ngOnDestroy();
+                 expect(pipe.transform(promise)).toBe(null);
+                 async.done();
+               }, timer);
+             }));
+        });
+      });
+    });
+
+    describe('null', () => {
+      it('should return null when given null', () => {
+        const pipe = new AsyncPipe(null as any);
+        expect(pipe.transform(null)).toEqual(null);
+      });
+    });
+
+    describe('other types', () => {
+      it('should throw when given an invalid object', () => {
+        const pipe = new AsyncPipe(null as any);
+        expect(() => pipe.transform(<any>'some bogus object')).toThrowError();
+      });
+    });
+  });
+}
diff --git a/packages/common/test/pipes/case_conversion_pipes_spec.ts b/packages/common/test/pipes/case_conversion_pipes_spec.ts
new file mode 100644
index 000000000000..22458d785508
--- /dev/null
+++ b/packages/common/test/pipes/case_conversion_pipes_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 {LowerCasePipe, TitleCasePipe, UpperCasePipe} from '@angular/common';
+
+{
+  describe('LowerCasePipe', () => {
+    let pipe: LowerCasePipe;
+
+    beforeEach(() => { pipe = new LowerCasePipe(); });
+
+    it('should return lowercase', () => { expect(pipe.transform('FOO')).toEqual('foo'); });
+
+    it('should lowercase when there is a new value', () => {
+      expect(pipe.transform('FOO')).toEqual('foo');
+      expect(pipe.transform('BAr')).toEqual('bar');
+    });
+
+    it('should not support other objects',
+       () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
+  });
+
+  describe('TitleCasePipe', () => {
+    let pipe: TitleCasePipe;
+
+    beforeEach(() => { pipe = new TitleCasePipe(); });
+
+    it('should return titlecase', () => { expect(pipe.transform('foo')).toEqual('Foo'); });
+
+    it('should return titlecase for subsequent words',
+       () => { expect(pipe.transform('one TWO Three fouR')).toEqual('One Two Three Four'); });
+
+    it('should support empty strings', () => { expect(pipe.transform('')).toEqual(''); });
+
+    it('should persist whitespace',
+       () => { expect(pipe.transform('one   two')).toEqual('One   Two'); });
+
+    it('should titlecase when there is a new value', () => {
+      expect(pipe.transform('bar')).toEqual('Bar');
+      expect(pipe.transform('foo')).toEqual('Foo');
+    });
+
+    it('should not capitalize letter after the quotes',
+       () => { expect(pipe.transform('it\'s complicated')).toEqual('It\'s Complicated'); });
+
+    it('should not treat non-space character as a separator', () => {
+      expect(pipe.transform('one,two,three')).toEqual('One,two,three');
+      expect(pipe.transform('true|false')).toEqual('True|false');
+      expect(pipe.transform('foo-vs-bar')).toEqual('Foo-vs-bar');
+    });
+
+    it('should support support all whitespace characters', () => {
+      expect(pipe.transform('one\ttwo')).toEqual('One\tTwo');
+      expect(pipe.transform('three\rfour')).toEqual('Three\rFour');
+      expect(pipe.transform('five\nsix')).toEqual('Five\nSix');
+    });
+
+    it('should work properly for non-latin alphabet', () => {
+      expect(pipe.transform('føderation')).toEqual('Føderation');
+      expect(pipe.transform('poniedziałek')).toEqual('Poniedziałek');
+      expect(pipe.transform('éric')).toEqual('Éric');
+    });
+
+    it('should not support other objects',
+       () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
+  });
+
+  describe('UpperCasePipe', () => {
+    let pipe: UpperCasePipe;
+
+    beforeEach(() => { pipe = new UpperCasePipe(); });
+
+    it('should return uppercase', () => { expect(pipe.transform('foo')).toEqual('FOO'); });
+
+    it('should uppercase when there is a new value', () => {
+      expect(pipe.transform('foo')).toEqual('FOO');
+      expect(pipe.transform('bar')).toEqual('BAR');
+    });
+
+    it('should not support other objects',
+       () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
+  });
+}
diff --git a/packages/common/test/pipes/date_pipe_spec.ts b/packages/common/test/pipes/date_pipe_spec.ts
new file mode 100644
index 000000000000..5b84bb45c67b
--- /dev/null
+++ b/packages/common/test/pipes/date_pipe_spec.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 {DatePipe, registerLocaleData} from '@angular/common';
+import localeEn from '@angular/common/locales/en';
+import localeEnExtra from '@angular/common/locales/extra/en';
+import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+{
+  let date: Date;
+  describe('DatePipe', () => {
+    const isoStringWithoutTime = '2015-01-01';
+    let pipe: DatePipe;
+
+    // Check the transformation of a date into a pattern
+    function expectDateFormatAs(date: Date | string, pattern: any, output: string): void {
+      expect(pipe.transform(date, pattern)).toEqual(output);
+    }
+
+    beforeAll(() => { registerLocaleData(localeEn, localeEnExtra); });
+
+    beforeEach(() => {
+      date = new Date(2015, 5, 15, 9, 3, 1, 550);
+      pipe = new DatePipe('en-US');
+    });
+
+    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(); });
+
+      it('should support int', () => { expect(() => pipe.transform(123456789)).not.toThrow(); });
+
+      it('should support numeric strings',
+         () => { expect(() => pipe.transform('123456789')).not.toThrow(); });
+
+      it('should support decimal strings',
+         () => { expect(() => pipe.transform('123456789.11')).not.toThrow(); });
+
+      it('should support ISO string',
+         () => expect(() => pipe.transform('2015-06-15T21:43:11Z')).not.toThrow());
+
+      it('should return null for empty string',
+         () => { expect(pipe.transform('')).toEqual(null); });
+
+      it('should return null for NaN', () => { expect(pipe.transform(Number.NaN)).toEqual(null); });
+
+      it('should support ISO string without time',
+         () => { expect(() => pipe.transform(isoStringWithoutTime)).not.toThrow(); });
+
+      it('should not support other objects',
+         () => { expect(() => pipe.transform({})).toThrowError(/InvalidPipeArgument/); });
+    });
+
+    describe('transform', () => {
+      it('should use "mediumDate" as the default format',
+         () => expect(pipe.transform('2017-01-11T10:14:39+0000')).toEqual('Jan 11, 2017'));
+    });
+  });
+}
diff --git a/packages/common/test/pipes/deprecated/date_pipe_spec.ts b/packages/common/test/pipes/deprecated/date_pipe_spec.ts
new file mode 100644
index 000000000000..4d5ea658b708
--- /dev/null
+++ b/packages/common/test/pipes/deprecated/date_pipe_spec.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 {DeprecatedDatePipe} from '@angular/common';
+import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
+{
+  describe('DeprecatedDatePipe', () => {
+    let date: Date;
+    const isoStringWithoutTime = '2015-01-01';
+    let pipe: DeprecatedDatePipe;
+
+    // Check the transformation of a date into a pattern
+    function expectDateFormatAs(date: Date | string, pattern: any, output: string): void {
+      // disabled on chrome mobile because of the following bug affecting the intl API
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=796583
+      // the android 7 emulator of saucelabs uses chrome mobile 63
+      if (!browserDetection.isAndroid && !browserDetection.isWebkit) {
+        expect(pipe.transform(date, pattern)).toEqual(output);
+      }
+    }
+
+    // TODO: reactivate the disabled expectations once emulators are fixed in SauceLabs
+    // In some old versions of Chrome in Android emulators, time formatting returns dates in the
+    // timezone of the VM host,
+    // instead of the device timezone. Same symptoms as
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=406382
+    // This happens locally and in SauceLabs, so some checks are disabled to avoid failures.
+    // Tracking issue: https://github.com/angular/angular/issues/11187
+
+    beforeEach(() => {
+      date = new Date(2015, 5, 15, 9, 3, 1);
+      pipe = new DeprecatedDatePipe('en-US');
+    });
+
+    it('should be marked as pure', () => {
+      expect(new PipeResolver(new JitReflector()).resolve(DeprecatedDatePipe) !.pure).toEqual(true);
+    });
+
+    describe('supports', () => {
+      it('should support date', () => { expect(() => pipe.transform(date)).not.toThrow(); });
+
+      it('should support int', () => { expect(() => pipe.transform(123456789)).not.toThrow(); });
+
+      it('should support numeric strings',
+         () => { expect(() => pipe.transform('123456789')).not.toThrow(); });
+
+      it('should support decimal strings',
+         () => { expect(() => pipe.transform('123456789.11')).not.toThrow(); });
+
+      it('should support ISO string',
+         () => expect(() => pipe.transform('2015-06-15T21:43:11Z')).not.toThrow());
+
+      it('should return null for empty string', () => expect(pipe.transform('')).toEqual(null));
+
+      it('should return null for NaN', () => expect(pipe.transform(Number.NaN)).toEqual(null));
+
+      it('should support ISO string without time',
+         () => { expect(() => pipe.transform(isoStringWithoutTime)).not.toThrow(); });
+
+      it('should not support other objects',
+         () => expect(() => pipe.transform({})).toThrowError(/InvalidPipeArgument/));
+    });
+
+    describe('transform', () => {
+      it('should format each component correctly', () => {
+        const dateFixtures: any = {
+          'y': '2015',
+          'yy': '15',
+          'M': '6',
+          'MM': '06',
+          'MMM': 'Jun',
+          'MMMM': 'June',
+          'd': '15',
+          'dd': '15',
+          'EEE': 'Mon',
+          'EEEE': 'Monday'
+        };
+
+        const isoStringWithoutTimeFixtures: any = {
+          'y': '2015',
+          'yy': '15',
+          'M': '1',
+          'MM': '01',
+          'MMM': 'Jan',
+          'MMMM': 'January',
+          'd': '1',
+          'dd': '01',
+          'EEE': 'Thu',
+          'EEEE': 'Thursday'
+        };
+
+        if (!browserDetection.isOldChrome) {
+          dateFixtures['h'] = '9';
+          dateFixtures['hh'] = '09';
+          dateFixtures['j'] = '9 AM';
+          isoStringWithoutTimeFixtures['h'] = '12';
+          isoStringWithoutTimeFixtures['hh'] = '12';
+          isoStringWithoutTimeFixtures['j'] = '12 AM';
+        }
+
+        // IE and Edge can't format a date to minutes and seconds without hours
+        if (!browserDetection.isEdge && !browserDetection.isIE ||
+            !browserDetection.supportsNativeIntlApi) {
+          if (!browserDetection.isOldChrome) {
+            dateFixtures['HH'] = '09';
+            isoStringWithoutTimeFixtures['HH'] = '00';
+          }
+          dateFixtures['E'] = 'M';
+          dateFixtures['L'] = 'J';
+          dateFixtures['m'] = '3';
+          dateFixtures['s'] = '1';
+          dateFixtures['mm'] = '03';
+          dateFixtures['ss'] = '01';
+          isoStringWithoutTimeFixtures['m'] = '0';
+          isoStringWithoutTimeFixtures['s'] = '0';
+          isoStringWithoutTimeFixtures['mm'] = '00';
+          isoStringWithoutTimeFixtures['ss'] = '00';
+        }
+
+        Object.keys(dateFixtures).forEach((pattern: string) => {
+          expectDateFormatAs(date, pattern, dateFixtures[pattern]);
+        });
+
+        if (!browserDetection.isOldChrome) {
+          Object.keys(isoStringWithoutTimeFixtures).forEach((pattern: string) => {
+            expectDateFormatAs(
+                isoStringWithoutTime, pattern, isoStringWithoutTimeFixtures[pattern]);
+          });
+        }
+
+        expect(pipe.transform(date, 'Z')).toBeDefined();
+      });
+
+      it('should format common multi component patterns', () => {
+        const dateFixtures: any = {
+          'EEE, M/d/y': 'Mon, 6/15/2015',
+          'EEE, M/d': 'Mon, 6/15',
+          'MMM d': 'Jun 15',
+          'dd/MM/yyyy': '15/06/2015',
+          'MM/dd/yyyy': '06/15/2015',
+          'yMEEEd': '20156Mon15',
+          'MEEEd': '6Mon15',
+          'MMMd': 'Jun15',
+          'yMMMMEEEEd': 'Monday, June 15, 2015'
+        };
+
+        // IE and Edge can't format a date to minutes and seconds without hours
+        if (!browserDetection.isEdge && !browserDetection.isIE ||
+            !browserDetection.supportsNativeIntlApi) {
+          dateFixtures['ms'] = '31';
+        }
+
+        if (!browserDetection.isOldChrome) {
+          dateFixtures['jm'] = '9:03 AM';
+        }
+
+        Object.keys(dateFixtures).forEach((pattern: string) => {
+          expectDateFormatAs(date, pattern, dateFixtures[pattern]);
+        });
+      });
+
+      it('should format with pattern aliases', () => {
+        const dateFixtures: any = {
+          'MM/dd/yyyy': '06/15/2015',
+          'fullDate': 'Monday, June 15, 2015',
+          'longDate': 'June 15, 2015',
+          'mediumDate': 'Jun 15, 2015',
+          'shortDate': '6/15/2015'
+        };
+
+        if (!browserDetection.isOldChrome) {
+          // IE and Edge do not add a coma after the year in these 2 cases
+          if ((browserDetection.isEdge || browserDetection.isIE) &&
+              browserDetection.supportsNativeIntlApi) {
+            dateFixtures['medium'] = 'Jun 15, 2015 9:03:01 AM';
+            dateFixtures['short'] = '6/15/2015 9:03 AM';
+          } else {
+            dateFixtures['medium'] = 'Jun 15, 2015, 9:03:01 AM';
+            dateFixtures['short'] = '6/15/2015, 9:03 AM';
+          }
+        }
+
+        if (!browserDetection.isOldChrome) {
+          dateFixtures['mediumTime'] = '9:03:01 AM';
+          dateFixtures['shortTime'] = '9:03 AM';
+        }
+
+        Object.keys(dateFixtures).forEach((pattern: string) => {
+          expectDateFormatAs(date, pattern, dateFixtures[pattern]);
+        });
+      });
+
+      it('should format invalid in IE ISO date',
+         () => expect(pipe.transform('2017-01-11T09:25:14.014-0500')).toEqual('Jan 11, 2017'));
+
+      it('should format invalid in Safari ISO date',
+         () => expect(pipe.transform('2017-01-20T19:00:00+0000')).toEqual('Jan 20, 2017'));
+
+      it('should remove bidi control characters',
+         () => expect(pipe.transform(date, 'MM/dd/yyyy') !.length).toEqual(10));
+    });
+  });
+}
diff --git a/packages/common/test/pipes/deprecated/number_pipe_spec.ts b/packages/common/test/pipes/deprecated/number_pipe_spec.ts
new file mode 100644
index 000000000000..d879c2f7c8e0
--- /dev/null
+++ b/packages/common/test/pipes/deprecated/number_pipe_spec.ts
@@ -0,0 +1,109 @@
+/**
+ * @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 {DeprecatedCurrencyPipe, DeprecatedDecimalPipe, DeprecatedPercentPipe} from '@angular/common';
+import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
+(function() {
+  function isNumeric(value: any): boolean { return !isNaN(value - parseFloat(value)); }
+
+  // Between the symbol and the number, Edge adds a no breaking space and IE11 adds a standard space
+  function normalize(s: string): string { return s.replace(/\u00A0| /g, ''); }
+
+  describe('Number pipes', () => {
+    describe('DeprecatedDecimalPipe', () => {
+      let pipe: DeprecatedDecimalPipe;
+
+      beforeEach(() => { pipe = new DeprecatedDecimalPipe('en-US'); });
+
+      describe('transform', () => {
+        it('should return correct value for numbers', () => {
+          expect(pipe.transform(12345)).toEqual('12,345');
+          expect(pipe.transform(123, '.2')).toEqual('123.00');
+          expect(pipe.transform(1, '3.')).toEqual('001');
+          expect(pipe.transform(1.1, '3.4-5')).toEqual('001.1000');
+          expect(pipe.transform(1.123456, '3.4-5')).toEqual('001.12346');
+          expect(pipe.transform(1.1234)).toEqual('1.123');
+        });
+
+        it('should support strings', () => {
+          expect(pipe.transform('12345')).toEqual('12,345');
+          expect(pipe.transform('123', '.2')).toEqual('123.00');
+          expect(pipe.transform('1', '3.')).toEqual('001');
+          expect(pipe.transform('1.1', '3.4-5')).toEqual('001.1000');
+          expect(pipe.transform('1.123456', '3.4-5')).toEqual('001.12346');
+          expect(pipe.transform('1.1234')).toEqual('1.123');
+        });
+
+        it('should not support other objects', () => {
+          expect(() => pipe.transform(new Object())).toThrowError();
+          expect(() => pipe.transform('123abc')).toThrowError();
+        });
+      });
+    });
+
+    describe('DeprecatedPercentPipe', () => {
+      let pipe: DeprecatedPercentPipe;
+
+      beforeEach(() => { pipe = new DeprecatedPercentPipe('en-US'); });
+
+      describe('transform', () => {
+        it('should return correct value for numbers', () => {
+          expect(normalize(pipe.transform(1.23) !)).toEqual('123%');
+          expect(normalize(pipe.transform(1.2, '.2') !)).toEqual('120.00%');
+        });
+
+        it('should not support other objects',
+           () => { expect(() => pipe.transform(new Object())).toThrowError(); });
+      });
+    });
+
+    describe('DeprecatedCurrencyPipe', () => {
+      let pipe: DeprecatedCurrencyPipe;
+
+      beforeEach(() => { pipe = new DeprecatedCurrencyPipe('en-US'); });
+
+      describe('transform', () => {
+        it('should return correct value for numbers', () => {
+          // In old Chrome, default formatiing for USD is different
+          if (browserDetection.isOldChrome) {
+            expect(normalize(pipe.transform(123) !)).toEqual('USD123');
+          } else {
+            expect(normalize(pipe.transform(123) !)).toEqual('USD123.00');
+          }
+          expect(normalize(pipe.transform(12, 'EUR', false, '.1') !)).toEqual('EUR12.0');
+          expect(normalize(pipe.transform(5.1234, 'USD', false, '.0-3') !)).toEqual('USD5.123');
+        });
+
+        it('should not support other objects',
+           () => { expect(() => pipe.transform(new Object())).toThrowError(); });
+      });
+    });
+
+    describe('isNumeric', () => {
+      it('should return true when passing correct numeric string',
+         () => { expect(isNumeric('2')).toBe(true); });
+
+      it('should return true when passing correct double string',
+         () => { expect(isNumeric('1.123')).toBe(true); });
+
+      it('should return true when passing correct negative string',
+         () => { expect(isNumeric('-2')).toBe(true); });
+
+      it('should return true when passing correct scientific notation string',
+         () => { expect(isNumeric('1e5')).toBe(true); });
+
+      it('should return false when passing incorrect numeric',
+         () => { expect(isNumeric('a')).toBe(false); });
+
+      it('should return false when passing parseable but non numeric',
+         () => { expect(isNumeric('2a')).toBe(false); });
+    });
+  });
+})();
diff --git a/packages/common/test/pipes/i18n_plural_pipe_spec.ts b/packages/common/test/pipes/i18n_plural_pipe_spec.ts
new file mode 100644
index 000000000000..2941584b3cf8
--- /dev/null
+++ b/packages/common/test/pipes/i18n_plural_pipe_spec.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 {I18nPluralPipe, NgLocalization} from '@angular/common';
+import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
+import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+{
+  describe('I18nPluralPipe', () => {
+    let localization: NgLocalization;
+    let pipe: I18nPluralPipe;
+
+    const mapping = {
+      '=0': 'No messages.',
+      '=1': 'One message.',
+      'many': 'Many messages.',
+      'other': 'There are # messages, that is #.',
+    };
+
+    beforeEach(() => {
+      localization = new TestLocalization();
+      pipe = new I18nPluralPipe(localization);
+    });
+
+    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', () => {
+        const val = pipe.transform(0, mapping);
+        expect(val).toEqual('No messages.');
+      });
+
+      it('should return 1 text if value is 1', () => {
+        const val = pipe.transform(1, mapping);
+        expect(val).toEqual('One message.');
+      });
+
+      it('should return category messages', () => {
+        const val = pipe.transform(4, mapping);
+        expect(val).toEqual('Many messages.');
+      });
+
+      it('should interpolate the value into the text where indicated', () => {
+        const val = pipe.transform(6, mapping);
+        expect(val).toEqual('There are 6 messages, that is 6.');
+      });
+
+      it('should use "" if value is undefined', () => {
+        const val = pipe.transform(void(0) as any, mapping);
+        expect(val).toEqual('');
+      });
+
+      it('should not support bad arguments',
+         () => { expect(() => pipe.transform(0, <any>'hey')).toThrowError(); });
+    });
+
+  });
+}
+
+class TestLocalization extends NgLocalization {
+  getPluralCategory(value: number): string { return value > 1 && value < 6 ? 'many' : 'other'; }
+}
diff --git a/packages/common/test/pipes/i18n_select_pipe_spec.ts b/packages/common/test/pipes/i18n_select_pipe_spec.ts
new file mode 100644
index 000000000000..2d68a237d325
--- /dev/null
+++ b/packages/common/test/pipes/i18n_select_pipe_spec.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 {I18nSelectPipe} from '@angular/common';
+import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+{
+  describe('I18nSelectPipe', () => {
+    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(new JitReflector()).resolve(I18nSelectPipe) !.pure).toEqual(true);
+    });
+
+    describe('transform', () => {
+      it('should return the "male" text if value is "male"', () => {
+        const val = pipe.transform('male', mapping);
+        expect(val).toEqual('Invite him.');
+      });
+
+      it('should return the "female" text if value is "female"', () => {
+        const val = pipe.transform('female', mapping);
+        expect(val).toEqual('Invite her.');
+      });
+
+      it('should return the "other" text if value is neither "male" nor "female"',
+         () => { expect(pipe.transform('Anything else', mapping)).toEqual('Invite them.'); });
+
+      it('should return an empty text if value is null or undefined', () => {
+        expect(pipe.transform(null, mapping)).toEqual('');
+        expect(pipe.transform(void 0, mapping)).toEqual('');
+      });
+
+      it('should throw on bad arguments',
+         () => { expect(() => pipe.transform('male', <any>'hey')).toThrowError(); });
+    });
+
+  });
+}
diff --git a/packages/common/test/pipes/json_pipe_spec.ts b/packages/common/test/pipes/json_pipe_spec.ts
new file mode 100644
index 000000000000..a9f5e4637d7b
--- /dev/null
+++ b/packages/common/test/pipes/json_pipe_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 {CommonModule, JsonPipe} from '@angular/common';
+import {Component} from '@angular/core';
+import {TestBed, async} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('JsonPipe', () => {
+    const regNewLine = '\n';
+    let inceptionObj: any;
+    let inceptionObjString: string;
+    let pipe: JsonPipe;
+
+    function normalize(obj: string): string { return obj.replace(regNewLine, ''); }
+
+    beforeEach(() => {
+      inceptionObj = {dream: {dream: {dream: 'Limbo'}}};
+      inceptionObjString = '{\n' +
+          '  "dream": {\n' +
+          '    "dream": {\n' +
+          '      "dream": "Limbo"\n' +
+          '    }\n' +
+          '  }\n' +
+          '}';
+
+
+      pipe = new JsonPipe();
+    });
+
+    describe('transform', () => {
+      it('should return JSON-formatted string',
+         () => { expect(pipe.transform(inceptionObj)).toEqual(inceptionObjString); });
+
+      it('should return JSON-formatted string even when normalized', () => {
+        const dream1 = normalize(pipe.transform(inceptionObj));
+        const dream2 = normalize(inceptionObjString);
+        expect(dream1).toEqual(dream2);
+      });
+
+      it('should return JSON-formatted string similar to Json.stringify', () => {
+        const dream1 = normalize(pipe.transform(inceptionObj));
+        const dream2 = normalize(JSON.stringify(inceptionObj, null, 2));
+        expect(dream1).toEqual(dream2);
+      });
+    });
+
+    describe('integration', () => {
+
+      @Component({selector: 'test-comp', template: '{{data | json}}'})
+      class TestComp {
+        data: any;
+      }
+
+      beforeEach(() => {
+        TestBed.configureTestingModule({declarations: [TestComp], imports: [CommonModule]});
+      });
+
+      it('should work with mutable objects', async(() => {
+           const fixture = TestBed.createComponent(TestComp);
+           const mutable: number[] = [1];
+           fixture.componentInstance.data = mutable;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('[\n  1\n]');
+
+           mutable.push(2);
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('[\n  1,\n  2\n]');
+         }));
+    });
+  });
+}
diff --git a/packages/common/test/pipes/keyvalue_pipe_spec.ts b/packages/common/test/pipes/keyvalue_pipe_spec.ts
new file mode 100644
index 000000000000..484531dd9e8c
--- /dev/null
+++ b/packages/common/test/pipes/keyvalue_pipe_spec.ts
@@ -0,0 +1,152 @@
+/**
+ * @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 {KeyValuePipe} from '@angular/common';
+import {EventEmitter, KeyValueDiffers, WrappedValue, ɵdefaultKeyValueDiffers as defaultKeyValueDiffers} from '@angular/core';
+import {AsyncTestCompleter, beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
+import {defaultComparator} from '../../src/pipes/keyvalue_pipe';
+import {SpyChangeDetectorRef} from '../spies';
+
+describe('KeyValuePipe', () => {
+  it('should return null when given null', () => {
+    const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+    expect(pipe.transform(null)).toEqual(null);
+  });
+  it('should return null when given undefined', () => {
+    const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+    expect(pipe.transform(undefined as any)).toEqual(null);
+  });
+  it('should return null for an unsupported type', () => {
+    const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+    const fn = () => {};
+    expect(pipe.transform(fn as any)).toEqual(null);
+  });
+  describe('object dictionary', () => {
+    it('should transform a basic dictionary', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      expect(pipe.transform({1: 2})).toEqual([{key: '1', value: 2}]);
+    });
+    it('should order by alpha', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      expect(pipe.transform({'b': 1, 'a': 1})).toEqual([
+        {key: 'a', value: 1}, {key: 'b', value: 1}
+      ]);
+    });
+    it('should order by numerical', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      expect(pipe.transform({2: 1, 1: 1})).toEqual([{key: '1', value: 1}, {key: '2', value: 1}]);
+    });
+    it('should order by numerical and alpha', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      const input = {2: 1, 1: 1, 'b': 1, 0: 1, 3: 1, 'a': 1};
+      expect(pipe.transform(input)).toEqual([
+        {key: '0', value: 1}, {key: '1', value: 1}, {key: '2', value: 1}, {key: '3', value: 1},
+        {key: 'a', value: 1}, {key: 'b', value: 1}
+      ]);
+    });
+    it('should return the same ref if nothing changes', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      const transform1 = pipe.transform({1: 2});
+      const transform2 = pipe.transform({1: 2});
+      expect(transform1 === transform2).toEqual(true);
+    });
+    it('should return a new ref if something changes', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      const transform1 = pipe.transform({1: 2});
+      const transform2 = pipe.transform({1: 3});
+      expect(transform1 !== transform2).toEqual(true);
+    });
+  });
+
+  describe('Map', () => {
+    it('should transform a basic Map', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      expect(pipe.transform(new Map([[1, 2]]))).toEqual([{key: 1, value: 2}]);
+    });
+    it('should order by alpha', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      expect(pipe.transform(new Map([['b', 1], ['a', 1]]))).toEqual([
+        {key: 'a', value: 1}, {key: 'b', value: 1}
+      ]);
+    });
+    it('should order by numerical', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      expect(pipe.transform(new Map([[2, 1], [1, 1]]))).toEqual([
+        {key: 1, value: 1}, {key: 2, value: 1}
+      ]);
+    });
+    it('should order by numerical and alpha', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      const input = [[2, 1], [1, 1], ['b', 1], [0, 1], [3, 1], ['a', 1]];
+      expect(pipe.transform(new Map(input as any))).toEqual([
+        {key: 0, value: 1}, {key: 1, value: 1}, {key: 2, value: 1}, {key: 3, value: 1},
+        {key: 'a', value: 1}, {key: 'b', value: 1}
+      ]);
+    });
+    it('should order by complex types with compareFn', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      const input = new Map([[{id: 1}, 1], [{id: 0}, 1]]);
+      expect(pipe.transform<{id: number}, number>(input, (a, b) => a.key.id > b.key.id ? 1 : -1))
+          .toEqual([
+            {key: {id: 0}, value: 1},
+            {key: {id: 1}, value: 1},
+          ]);
+    });
+    it('should return the same ref if nothing changes', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      const transform1 = pipe.transform(new Map([[1, 2]]));
+      const transform2 = pipe.transform(new Map([[1, 2]]));
+      expect(transform1 === transform2).toEqual(true);
+    });
+    it('should return a new ref if something changes', () => {
+      const pipe = new KeyValuePipe(defaultKeyValueDiffers);
+      const transform1 = pipe.transform(new Map([[1, 2]]));
+      const transform2 = pipe.transform(new Map([[1, 3]]));
+      expect(transform1 !== transform2).toEqual(true);
+    });
+  });
+});
+
+describe('defaultComparator', () => {
+  it('should remain the same order when keys are equal', () => {
+    const key = 1;
+    const values = [{key, value: 2}, {key, value: 1}];
+    expect(values.sort(defaultComparator)).toEqual(values);
+  });
+  it('should sort undefined keys to the end', () => {
+    const values = [{key: 3, value: 1}, {key: undefined, value: 3}, {key: 1, value: 2}];
+    expect(values.sort(defaultComparator)).toEqual([
+      {key: 1, value: 2}, {key: 3, value: 1}, {key: undefined, value: 3}
+    ]);
+  });
+  it('should sort null keys to the end', () => {
+    const values = [{key: 3, value: 1}, {key: null, value: 3}, {key: 1, value: 2}];
+    expect(values.sort(defaultComparator)).toEqual([
+      {key: 1, value: 2}, {key: 3, value: 1}, {key: null, value: 3}
+    ]);
+  });
+  it('should sort strings in alpha ascending', () => {
+    const values = [{key: 'b', value: 1}, {key: 'a', value: 3}];
+    expect(values.sort(defaultComparator)).toEqual([{key: 'a', value: 3}, {key: 'b', value: 1}]);
+  });
+  it('should sort numbers in numerical ascending', () => {
+    const values = [{key: 2, value: 1}, {key: 1, value: 3}];
+    expect(values.sort(defaultComparator)).toEqual([{key: 1, value: 3}, {key: 2, value: 1}]);
+  });
+  it('should sort boolean in false (0) -> true (1)', () => {
+    const values = [{key: true, value: 3}, {key: false, value: 1}];
+    expect(values.sort(defaultComparator)).toEqual([{key: false, value: 1}, {key: true, value: 3}]);
+  });
+  it('should sort numbers as strings in numerical ascending', () => {
+    const values = [{key: '2', value: 1}, {key: 1, value: 3}];
+    expect(values.sort(defaultComparator)).toEqual([{key: 1, value: 3}, {key: '2', value: 1}]);
+  });
+});
diff --git a/packages/common/test/pipes/number_pipe_spec.ts b/packages/common/test/pipes/number_pipe_spec.ts
new file mode 100644
index 000000000000..f72800f81452
--- /dev/null
+++ b/packages/common/test/pipes/number_pipe_spec.ts
@@ -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
+ */
+
+import localeEn from '@angular/common/locales/en';
+import localeEsUS from '@angular/common/locales/es-US';
+import localeFr from '@angular/common/locales/fr';
+import localeAr from '@angular/common/locales/ar';
+import localeDeAt from '@angular/common/locales/de-AT';
+import {registerLocaleData, CurrencyPipe, DecimalPipe, PercentPipe, formatNumber} from '@angular/common';
+import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+{
+  describe('Number pipes', () => {
+    beforeAll(() => {
+      registerLocaleData(localeEn);
+      registerLocaleData(localeEsUS);
+      registerLocaleData(localeFr);
+      registerLocaleData(localeAr);
+      registerLocaleData(localeDeAt);
+    });
+
+    describe('DecimalPipe', () => {
+      describe('transform', () => {
+        let pipe: DecimalPipe;
+        beforeEach(() => { pipe = new DecimalPipe('en-US'); });
+
+        it('should return correct value for numbers', () => {
+          expect(pipe.transform(12345)).toEqual('12,345');
+          expect(pipe.transform(1.123456, '3.4-5')).toEqual('001.12346');
+        });
+
+        it('should support strings', () => {
+          expect(pipe.transform('12345')).toEqual('12,345');
+          expect(pipe.transform('123', '.2')).toEqual('123.00');
+          expect(pipe.transform('1', '3.')).toEqual('001');
+          expect(pipe.transform('1.1', '3.4-5')).toEqual('001.1000');
+          expect(pipe.transform('1.123456', '3.4-5')).toEqual('001.12346');
+          expect(pipe.transform('1.1234')).toEqual('1.123');
+        });
+
+        it('should not support other objects', () => {
+          expect(() => pipe.transform({}))
+              .toThrowError(
+                  `InvalidPipeArgument: '[object Object] is not a number' for pipe 'DecimalPipe'`);
+          expect(() => pipe.transform('123abc'))
+              .toThrowError(`InvalidPipeArgument: '123abc is not a number' for pipe 'DecimalPipe'`);
+        });
+      });
+
+      describe('transform with custom locales', () => {
+        it('should return the correct format for es-US', () => {
+          const pipe = new DecimalPipe('es-US');
+          expect(pipe.transform('9999999.99', '1.2-2')).toEqual('9,999,999.99');
+        });
+      });
+    });
+
+    describe('PercentPipe', () => {
+      let pipe: PercentPipe;
+
+      beforeEach(() => { pipe = new PercentPipe('en-US'); });
+
+      describe('transform', () => {
+        it('should return correct value for numbers', () => {
+          expect(pipe.transform(1.23)).toEqual('123%');
+          expect(pipe.transform(12.3456, '0.0-10')).toEqual('1,234.56%');
+        });
+
+        it('should not support other objects', () => {
+          expect(() => pipe.transform({}))
+              .toThrowError(
+                  `InvalidPipeArgument: '[object Object] is not a number' for pipe 'PercentPipe'`);
+        });
+      });
+    });
+
+    describe('CurrencyPipe', () => {
+      let pipe: CurrencyPipe;
+
+      beforeEach(() => { pipe = new CurrencyPipe('en-US'); });
+
+      describe('transform', () => {
+        it('should return correct value for numbers', () => {
+          expect(pipe.transform(123)).toEqual('$123.00');
+          expect(pipe.transform(12, 'EUR', 'code', '.1')).toEqual('EUR12.0');
+          expect(pipe.transform(5.1234, 'USD', 'code', '.0-3')).toEqual('USD5.123');
+          expect(pipe.transform(5.1234, 'USD', 'code')).toEqual('USD5.12');
+          expect(pipe.transform(5.1234, 'USD', 'symbol')).toEqual('$5.12');
+          expect(pipe.transform(5.1234, 'CAD', 'symbol')).toEqual('CA$5.12');
+          expect(pipe.transform(5.1234, 'CAD', 'symbol-narrow')).toEqual('$5.12');
+          expect(pipe.transform(5.1234, 'CAD', 'symbol-narrow', '5.2-2')).toEqual('$00,005.12');
+          expect(pipe.transform(5.1234, 'CAD', 'symbol-narrow', '5.2-2', 'fr'))
+              .toEqual('00 005,12 $');
+          expect(pipe.transform(5, 'USD', 'symbol', '', 'fr')).toEqual('5,00 $US');
+          expect(pipe.transform(123456789, 'EUR', 'symbol', '', 'de-at'))
+              .toEqual('€ 123.456.789,00');
+        });
+
+        it('should support any currency code name', () => {
+          // currency code is unknown, default formatting options will be used
+          expect(pipe.transform(5.1234, 'unexisting_ISO_code', 'symbol'))
+              .toEqual('unexisting_ISO_code5.12');
+          // currency code is USD, the pipe will format based on USD but will display "Custom name"
+          expect(pipe.transform(5.1234, 'USD', 'Custom name')).toEqual('Custom name5.12');
+        });
+
+        it('should not support other objects', () => {
+          expect(() => pipe.transform({}))
+              .toThrowError(
+                  `InvalidPipeArgument: '[object Object] is not a number' for pipe 'CurrencyPipe'`);
+        });
+
+        it('should warn if you are using the v4 signature', () => {
+          const warnSpy = spyOn(console, 'warn');
+          pipe.transform(123, 'USD', true);
+          expect(warnSpy).toHaveBeenCalledWith(
+              `Warning: the currency pipe has been changed in Angular v5. The symbolDisplay option (third parameter) is now a string instead of a boolean. The accepted values are "code", "symbol" or "symbol-narrow".`);
+        });
+      });
+    });
+  });
+}
diff --git a/packages/common/test/pipes/slice_pipe_spec.ts b/packages/common/test/pipes/slice_pipe_spec.ts
new file mode 100644
index 000000000000..8ed5c41bb23e
--- /dev/null
+++ b/packages/common/test/pipes/slice_pipe_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 {CommonModule, SlicePipe} from '@angular/common';
+import {Component} from '@angular/core';
+import {TestBed, async} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('SlicePipe', () => {
+    let list: number[];
+    let str: string;
+    let pipe: SlicePipe;
+
+    beforeEach(() => {
+      list = [1, 2, 3, 4, 5];
+      str = 'tuvwxyz';
+      pipe = new SlicePipe();
+    });
+
+    describe('supports', () => {
+      it('should support strings', () => { expect(() => pipe.transform(str, 0)).not.toThrow(); });
+      it('should support lists', () => { expect(() => pipe.transform(list, 0)).not.toThrow(); });
+
+      it('should not support other objects',
+         () => { expect(() => pipe.transform({}, 0)).toThrow(); });
+    });
+
+    describe('transform', () => {
+
+      it('should return null if the value is null',
+         () => { expect(pipe.transform(null, 1)).toBe(null); });
+
+      it('should return all items after START index when START is positive and END is omitted',
+         () => {
+           expect(pipe.transform(list, 3)).toEqual([4, 5]);
+           expect(pipe.transform(str, 3)).toEqual('wxyz');
+         });
+
+      it('should return last START items when START is negative and END is omitted', () => {
+        expect(pipe.transform(list, -3)).toEqual([3, 4, 5]);
+        expect(pipe.transform(str, -3)).toEqual('xyz');
+      });
+
+      it('should return all items between START and END index when START and END are positive',
+         () => {
+           expect(pipe.transform(list, 1, 3)).toEqual([2, 3]);
+           expect(pipe.transform(str, 1, 3)).toEqual('uv');
+         });
+
+      it('should return all items between START and END from the end when START and END are negative',
+         () => {
+           expect(pipe.transform(list, -4, -2)).toEqual([2, 3]);
+           expect(pipe.transform(str, -4, -2)).toEqual('wx');
+         });
+
+      it('should return an empty value if START is greater than END', () => {
+        expect(pipe.transform(list, 4, 2)).toEqual([]);
+        expect(pipe.transform(str, 4, 2)).toEqual('');
+      });
+
+      it('should return an empty value if START greater than input length', () => {
+        expect(pipe.transform(list, 99)).toEqual([]);
+        expect(pipe.transform(str, 99)).toEqual('');
+      });
+
+      it('should return entire input if START is negative and greater than input length', () => {
+        expect(pipe.transform(list, -99)).toEqual([1, 2, 3, 4, 5]);
+        expect(pipe.transform(str, -99)).toEqual('tuvwxyz');
+      });
+
+      it('should not modify the input list', () => {
+        expect(pipe.transform(list, 2)).toEqual([3, 4, 5]);
+        expect(list).toEqual([1, 2, 3, 4, 5]);
+      });
+
+    });
+
+    describe('integration', () => {
+
+      @Component({selector: 'test-comp', template: '{{(data | slice:1).join(",") }}'})
+      class TestComp {
+        data: any;
+      }
+
+      beforeEach(() => {
+        TestBed.configureTestingModule({declarations: [TestComp], imports: [CommonModule]});
+      });
+
+      it('should work with mutable arrays', async(() => {
+           const fixture = TestBed.createComponent(TestComp);
+           const mutable: number[] = [1, 2];
+           fixture.componentInstance.data = mutable;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('2');
+
+           mutable.push(3);
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('2,3');
+         }));
+    });
+  });
+}
diff --git a/packages/common/test/spies.ts b/packages/common/test/spies.ts
new file mode 100644
index 000000000000..e956a4821c47
--- /dev/null
+++ b/packages/common/test/spies.ts
@@ -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
+ */
+
+import {ChangeDetectorRef} from '@angular/core/src/change_detection/change_detector_ref';
+import {SpyObject} from '@angular/core/testing/src/testing_internal';
+
+export class SpyChangeDetectorRef extends SpyObject {
+  constructor() {
+    super(ChangeDetectorRef);
+    this.spy('markForCheck');
+  }
+}
+
+export class SpyNgControl extends SpyObject {}
+
+export class SpyValueAccessor extends SpyObject { writeValue: any; }
diff --git a/packages/common/testing/BUILD.bazel b/packages/common/testing/BUILD.bazel
new file mode 100644
index 000000000000..a10c80ec90a7
--- /dev/null
+++ b/packages/common/testing/BUILD.bazel
@@ -0,0 +1,16 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(["**/*.ts"]),
+    module_name = "@angular/common/testing",
+    deps = [
+        "//packages/common",
+        "//packages/core",
+        "@rxjs",
+    ],
+)
diff --git a/packages/common/testing/index.ts b/packages/common/testing/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/common/testing/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';
diff --git a/packages/common/testing/package.json b/packages/common/testing/package.json
new file mode 100644
index 000000000000..3374f2671507
--- /dev/null
+++ b/packages/common/testing/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/common/testing",
+  "typings": "./testing.d.ts",
+  "main": "../bundles/common-testing.umd.js",
+  "module": "../fesm5/testing.js",
+  "es2015": "../fesm2015/testing.js",
+  "esm5": "../esm5/testing/testing.js",
+  "esm2015": "../esm2015/testing/testing.js",
+  "fesm5": "../fesm5/testing.js",
+  "fesm2015": "../fesm2015/testing.js"
+}
diff --git a/packages/common/testing/public_api.ts b/packages/common/testing/public_api.ts
new file mode 100644
index 000000000000..e95d9f8ef071
--- /dev/null
+++ b/packages/common/testing/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/testing';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/common/testing/rollup.config.js b/packages/common/testing/rollup.config.js
new file mode 100644
index 000000000000..5022ab760ed6
--- /dev/null
+++ b/packages/common/testing/rollup.config.js
@@ -0,0 +1,28 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  'rxjs': 'rxjs',
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/common/fesm5/testing.js',
+  dest: '../../../dist/packages-dist/common/bundles/common-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/common/testing'},
+  moduleName: 'ng.common.testing',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/common/testing/src/location_mock.ts b/packages/common/testing/src/location_mock.ts
new file mode 100644
index 000000000000..f28f68731a3e
--- /dev/null
+++ b/packages/common/testing/src/location_mock.ts
@@ -0,0 +1,125 @@
+/**
+ * @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, LocationStrategy} from '@angular/common';
+import {EventEmitter, Injectable} from '@angular/core';
+import {SubscriptionLike} from 'rxjs';
+
+
+/**
+ * A spy for {@link Location} that allows tests to fire simulated location events.
+ *
+ * @experimental
+ */
+@Injectable()
+export class SpyLocation implements Location {
+  urlChanges: string[] = [];
+  private _history: LocationState[] = [new LocationState('', '', null)];
+  private _historyIndex: number = 0;
+  /** @internal */
+  _subject: EventEmitter<any> = new EventEmitter();
+  /** @internal */
+  _baseHref: string = '';
+  /** @internal */
+  _platformStrategy: LocationStrategy = null !;
+
+  setInitialPath(url: string) { this._history[this._historyIndex].path = url; }
+
+  setBaseHref(url: string) { this._baseHref = url; }
+
+  path(): string { return this._history[this._historyIndex].path; }
+
+  private state(): string { return this._history[this._historyIndex].state; }
+
+  isCurrentPathEqualTo(path: string, query: string = ''): boolean {
+    const givenPath = path.endsWith('/') ? path.substring(0, path.length - 1) : path;
+    const currPath =
+        this.path().endsWith('/') ? this.path().substring(0, this.path().length - 1) : this.path();
+
+    return currPath == givenPath + (query.length > 0 ? ('?' + query) : '');
+  }
+
+  simulateUrlPop(pathname: string) {
+    this._subject.emit({'url': pathname, 'pop': true, 'type': 'popstate'});
+  }
+
+  simulateHashChange(pathname: string) {
+    // Because we don't prevent the native event, the browser will independently update the path
+    this.setInitialPath(pathname);
+    this.urlChanges.push('hash: ' + pathname);
+    this._subject.emit({'url': pathname, 'pop': true, 'type': 'hashchange'});
+  }
+
+  prepareExternalUrl(url: string): string {
+    if (url.length > 0 && !url.startsWith('/')) {
+      url = '/' + url;
+    }
+    return this._baseHref + url;
+  }
+
+  go(path: string, query: string = '', state: any = null) {
+    path = this.prepareExternalUrl(path);
+
+    if (this._historyIndex > 0) {
+      this._history.splice(this._historyIndex + 1);
+    }
+    this._history.push(new LocationState(path, query, state));
+    this._historyIndex = this._history.length - 1;
+
+    const locationState = this._history[this._historyIndex - 1];
+    if (locationState.path == path && locationState.query == query) {
+      return;
+    }
+
+    const url = path + (query.length > 0 ? ('?' + query) : '');
+    this.urlChanges.push(url);
+    this._subject.emit({'url': url, 'pop': false});
+  }
+
+  replaceState(path: string, query: string = '', state: any = null) {
+    path = this.prepareExternalUrl(path);
+
+    const history = this._history[this._historyIndex];
+    if (history.path == path && history.query == query) {
+      return;
+    }
+
+    history.path = path;
+    history.query = query;
+    history.state = state;
+
+    const url = path + (query.length > 0 ? ('?' + query) : '');
+    this.urlChanges.push('replace: ' + url);
+  }
+
+  forward() {
+    if (this._historyIndex < (this._history.length - 1)) {
+      this._historyIndex++;
+      this._subject.emit({'url': this.path(), 'state': this.state(), 'pop': true});
+    }
+  }
+
+  back() {
+    if (this._historyIndex > 0) {
+      this._historyIndex--;
+      this._subject.emit({'url': this.path(), 'state': this.state(), 'pop': true});
+    }
+  }
+
+  subscribe(
+      onNext: (value: any) => void, onThrow?: ((error: any) => void)|null,
+      onReturn?: (() => void)|null): SubscriptionLike {
+    return this._subject.subscribe({next: onNext, error: onThrow, complete: onReturn});
+  }
+
+  normalize(url: string): string { return null !; }
+}
+
+class LocationState {
+  constructor(public path: string, public query: string, public state: any) {}
+}
diff --git a/packages/common/testing/src/mock_location_strategy.ts b/packages/common/testing/src/mock_location_strategy.ts
new file mode 100644
index 000000000000..6c3c663624ff
--- /dev/null
+++ b/packages/common/testing/src/mock_location_strategy.ts
@@ -0,0 +1,83 @@
+/**
+ * @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 {LocationStrategy} from '@angular/common';
+import {EventEmitter, Injectable} from '@angular/core';
+
+
+
+/**
+ * A mock implementation of {@link LocationStrategy} that allows tests to fire simulated
+ * location events.
+ *
+ *
+ */
+@Injectable()
+export class MockLocationStrategy extends LocationStrategy {
+  internalBaseHref: string = '/';
+  internalPath: string = '/';
+  internalTitle: string = '';
+  urlChanges: string[] = [];
+  /** @internal */
+  _subject: EventEmitter<any> = new EventEmitter();
+  constructor() { super(); }
+
+  simulatePopState(url: string): void {
+    this.internalPath = url;
+    this._subject.emit(new _MockPopStateEvent(this.path()));
+  }
+
+  path(includeHash: boolean = false): string { return this.internalPath; }
+
+  prepareExternalUrl(internal: string): string {
+    if (internal.startsWith('/') && this.internalBaseHref.endsWith('/')) {
+      return this.internalBaseHref + internal.substring(1);
+    }
+    return this.internalBaseHref + internal;
+  }
+
+  pushState(ctx: any, title: string, path: string, query: string): void {
+    this.internalTitle = title;
+
+    const url = path + (query.length > 0 ? ('?' + query) : '');
+    this.internalPath = url;
+
+    const externalUrl = this.prepareExternalUrl(url);
+    this.urlChanges.push(externalUrl);
+  }
+
+  replaceState(ctx: any, title: string, path: string, query: string): void {
+    this.internalTitle = title;
+
+    const url = path + (query.length > 0 ? ('?' + query) : '');
+    this.internalPath = url;
+
+    const externalUrl = this.prepareExternalUrl(url);
+    this.urlChanges.push('replace: ' + externalUrl);
+  }
+
+  onPopState(fn: (value: any) => void): void { this._subject.subscribe({next: fn}); }
+
+  getBaseHref(): string { return this.internalBaseHref; }
+
+  back(): void {
+    if (this.urlChanges.length > 0) {
+      this.urlChanges.pop();
+      const nextUrl = this.urlChanges.length > 0 ? this.urlChanges[this.urlChanges.length - 1] : '';
+      this.simulatePopState(nextUrl);
+    }
+  }
+
+  forward(): void { throw 'not implemented'; }
+}
+
+class _MockPopStateEvent {
+  pop: boolean = true;
+  type: string = 'popstate';
+  constructor(public newUrl: string) {}
+}
diff --git a/packages/common/testing/src/testing.ts b/packages/common/testing/src/testing.ts
new file mode 100644
index 000000000000..c5f4cf9e2067
--- /dev/null
+++ b/packages/common/testing/src/testing.ts
@@ -0,0 +1,15 @@
+/**
+ * @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 common/testing package.
+ */
+export {SpyLocation} from './location_mock';
+export {MockLocationStrategy} from './mock_location_strategy';
diff --git a/packages/common/testing/tsconfig-build.json b/packages/common/testing/tsconfig-build.json
new file mode 100644
index 000000000000..c7f5ba334e33
--- /dev/null
+++ b/packages/common/testing/tsconfig-build.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/core": ["../../../dist/packages/core"],
+      "@angular/common": ["../../../dist/packages/common"]
+    },
+    "outDir": "../../../dist/packages/common"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "testing.js",
+    "flatModuleId": "@angular/common/testing"
+  }
+}
diff --git a/packages/common/tsconfig-build.json b/packages/common/tsconfig-build.json
new file mode 100644
index 000000000000..1cba80a6094d
--- /dev/null
+++ b/packages/common/tsconfig-build.json
@@ -0,0 +1,25 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"]
+    },
+    "outDir": "../../dist/packages/common"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "common.js",
+    "flatModuleId": "@angular/common"
+  }
+}
diff --git a/packages/compiler-cli/BUILD.bazel b/packages/compiler-cli/BUILD.bazel
new file mode 100644
index 000000000000..484a2f63036f
--- /dev/null
+++ b/packages/compiler-cli/BUILD.bazel
@@ -0,0 +1,49 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "npm_package")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_config", "ts_library")
+
+ts_config(
+    name = "tsconfig",
+    src = "tsconfig-build.json",
+    deps = ["//packages:tsconfig-build.json"],
+)
+
+ts_library(
+    name = "compiler-cli",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+        exclude = [
+            "src/integrationtest/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/compiler-cli",
+    node_modules = "@angular_deps//:node_modules",
+    tsconfig = ":tsconfig",
+    deps = [
+        "//packages/compiler",
+        "//packages/compiler-cli/src/ngtsc/annotations",
+        "//packages/compiler-cli/src/ngtsc/factories",
+        "//packages/compiler-cli/src/ngtsc/metadata",
+        "//packages/compiler-cli/src/ngtsc/transform",
+    ],
+)
+
+npm_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+    ],
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "release-with-framework",
+    ],
+    deps = [
+        ":compiler-cli",
+        "//packages/compiler-cli/src/ngcc",
+    ],
+)
diff --git a/packages/compiler-cli/README.md b/packages/compiler-cli/README.md
new file mode 100644
index 000000000000..5cb161c59ba5
--- /dev/null
+++ b/packages/compiler-cli/README.md
@@ -0,0 +1,139 @@
+# Angular Template Compiler
+
+Angular applications are built with templates, which may be `.html` or `.css` files,
+or may be inline `template` attributes on Decorators like `@Component`.
+
+These templates are compiled into executable JS at application runtime (except in `interpretation` mode).
+This compilation can occur on the client, but it results in slower bootstrap time, and also
+requires that the compiler be included in the code downloaded to the client.
+
+You can produce smaller, faster applications by running Angular's compiler as a build step,
+and then downloading only the executable JS to the client.
+
+## Install and use
+
+```
+# First install angular, see https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc0-2016-05-02
+$ npm install @angular/compiler-cli typescript@next @angular/platform-server @angular/compiler
+# Optional sanity check, make sure TypeScript can compile.
+$ ./node_modules/.bin/tsc -p path/to/project
+# ngc is a drop-in replacement for tsc.
+$ ./node_modules/.bin/ngc -p path/to/project
+```
+
+In order to write a `bootstrap` that imports the generated code, you should first write your
+top-level component, and run `ngc` once to produce a generated `.ngfactory.ts` file.
+Then you can add an import statement in the `bootstrap` allowing you to bootstrap off the
+generated code:
+
+```typescript
+main.module.ts
+-------------
+import {BrowserModule} from '@angular/platform-browser';
+import {Component, NgModule, ApplicationRef} from '@angular/core';
+
+@Component(...)
+export class MyComponent {}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [MyComponent],
+  entryComponents: [MyComponent]
+})
+export class MainModule {
+  constructor(appRef: ApplicationRef) {
+    appRef.bootstrap(MyComponent);
+  }
+}
+
+bootstrap.ts
+-------------
+
+import {MainModuleNgFactory} from './main.module.ngfactory';
+import {platformBrowser} from '@angular/platform-browser';
+
+platformBrowser().bootstrapModuleFactory(MainModuleNgFactory);
+```
+
+## Configuration
+
+The `tsconfig.json` file may contain an additional configuration block:
+```
+ "angularCompilerOptions": {
+   "genDir": ".",
+   "debug": true
+ }
+```
+
+### `genDir`
+
+the `genDir` option controls the path (relative to `tsconfig.json`) where the generated file tree
+will be written. If `genDir` is not set, then the code will be generated in the source tree, next
+to your original sources. More options may be added as we implement more features.
+
+We recommend you avoid checking generated files into version control. This permits a state where
+the generated files in the repository were created from sources that were never checked in,
+making it impossible to reproduce the current state. Also, your changes will effectively appear
+twice in code reviews, with the generated version inscrutible by the reviewer.
+
+In TypeScript 1.8, the generated sources will have to be written alongside your originals,
+so set `genDir` to the same location as your files (typicially the same as `rootDir`).
+Add `**/*.ngfactory.ts` and `**/*.ngsummary.json` to your `.gitignore` or other mechanism for your
+version control system.
+
+In TypeScript 1.9 and above, you can add a generated folder into your application,
+such as `codegen`. Using the `rootDirs` option, you can allow relative imports like
+`import {} from './foo.ngfactory'` even though the `src` and `codegen` trees are distinct.
+Add `**/codegen` to your `.gitignore` or similar.
+
+Note that in the second option, TypeScript will emit the code into two parallel directories
+as well. This is by design, see https://github.com/Microsoft/TypeScript/issues/8245.
+This makes the configuration of your runtime module loader more complex, so we don't recommend
+this option yet.
+
+### `debug`
+
+Set the `debug` option to true to generate debug information in the generate files.
+Default to `false`.
+
+See the example in the `test/` directory for a working example.
+
+## Compiler CLI
+
+This program mimics the TypeScript tsc command line. It accepts a `-p` flag which points to a
+`tsconfig.json` file, or a directory containing one.
+
+This CLI is intended for demos, prototyping, or for users with simple build systems
+that run bare `tsc`.
+
+Users with a build system should expect an Angular template plugin. Such a plugin would be
+based on the `public_api.ts` in this directory, but should share the TypeScript compiler instance
+with the one already used in the plugin for TypeScript typechecking and emit.
+
+## Design
+At a high level, this program
+- collects static metadata about the sources
+- uses the `OfflineCompiler` from `@angular/compiler` to codegen additional `.ts` files
+- these `.ts` files are written to the `genDir` path, then compiled together with the application.
+
+## For developers
+```
+# Build Angular and the compiler
+./build.sh
+
+# Run the test once
+# (First edit the LINKABLE_PKGS to use npm link instead of npm install)
+$ ./scripts/ci/offline_compiler_test.sh
+
+# Keep a package fresh in watch mode
+./node_modules/.bin/tsc -p packages/compiler/tsconfig-build.json -w
+
+# Recompile @angular/core module (needs to use tsc-ext to keep the metadata)
+$ export NODE_PATH=${NODE_PATH}:$(pwd)/dist/all:$(pwd)/dist/tools
+$ node dist/tools/@angular/compiler-cli/src/main -p packages/core/tsconfig-build.json
+
+# Iterate on the test
+$ cd /tmp/wherever/e2e_test.1464388257/
+$ ./node_modules/.bin/ngc
+$ ./node_modules/.bin/jasmine test/*_spec.js
+```
diff --git a/packages/compiler-cli/browser-rollup.config.js b/packages/compiler-cli/browser-rollup.config.js
new file mode 100644
index 000000000000..d5c583c04bf2
--- /dev/null
+++ b/packages/compiler-cli/browser-rollup.config.js
@@ -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
+ */
+
+const commonjs = require('rollup-plugin-commonjs');
+const path = require('path');
+
+require('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 = {'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)
+  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;`;
+
+module.exports = {
+  entry: '../../dist/packages-dist/compiler-cli/src/ngc.js',
+  dest: './browser-bundle.umd.js',
+  format: 'umd',
+  amd: {id: '@angular/compiler-cli-browser'},
+  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
new file mode 100644
index 000000000000..c7fe86a9f6a0
--- /dev/null
+++ b/packages/compiler-cli/index.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
+ */
+export {AotCompilerHost, AotCompilerHost as StaticReflectorHost, StaticReflector, StaticSymbol} from '@angular/compiler';
+export {DiagnosticTemplateInfo, getExpressionScope, getTemplateExpressionDiagnostics} from './src/diagnostics/expression_diagnostics';
+export {AstType, ExpressionDiagnosticsContext} from './src/diagnostics/expression_type';
+export {BuiltinType, DeclarationKind, Definition, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from './src/diagnostics/symbols';
+export {getClassMembersFromDeclaration, getPipesTable, getSymbolQuery} from './src/diagnostics/typescript_symbols';
+export {VERSION} from './src/version';
+
+export * from './src/metadata';
+export * from './src/transformers/api';
+export * from './src/transformers/entry_points';
+
+export * from './src/perform_compile';
+
+// TODO(tbosch): remove this once cli 1.5 is fully released,
+// and usages in G3 are changed to `CompilerOptions`.
+export {CompilerOptions as AngularCompilerOptions} from './src/transformers/api';
+export {NgTools_InternalApi_NG_2 as __NGTOOLS_PRIVATE_API_2} from './src/ngtools_api';
+
+export {ngToTsDiagnostic} from './src/transformers/util';
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/BUILD.bazel b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/BUILD.bazel
new file mode 100644
index 000000000000..ec996eb8c175
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/BUILD.bazel
@@ -0,0 +1,22 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ng_module(
+    name = "app",
+    srcs = glob(
+        [
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "app_built",
+    deps = [
+        "//packages/compiler-cli/integrationtest/bazel/injectable_def/lib2",
+        "//packages/core",
+        "//packages/platform-browser",
+        "//packages/platform-server",
+        "//packages/router",
+        "@rxjs",
+    ],
+)
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/basic.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/basic.ts
new file mode 100644
index 000000000000..899eccc89d2e
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/basic.ts
@@ -0,0 +1,31 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ServerModule} from '@angular/platform-server';
+import {Lib2Module} from 'lib2_built/module';
+
+@Component({
+  selector: 'id-app',
+  template: '<lib2-cmp></lib2-cmp>',
+})
+export class AppComponent {
+}
+
+@NgModule({
+  imports: [
+    Lib2Module,
+    BrowserModule.withServerTransition({appId: 'id-app'}),
+    ServerModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class BasicAppModule {
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/dep.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/dep.ts
new file mode 100644
index 000000000000..4cc1c02b7d98
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/dep.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 {Component, Injectable, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ServerModule} from '@angular/platform-server';
+
+@Injectable()
+export class NormalService {
+}
+
+@Component({
+  selector: 'dep-app',
+  template: '{{found}}',
+})
+export class AppComponent {
+  found: boolean;
+  constructor(service: ShakeableService) { this.found = !!service.normal; }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule.withServerTransition({appId: 'id-app'}),
+    ServerModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+  providers: [NormalService],
+})
+export class DepAppModule {
+}
+
+@Injectable({providedIn: DepAppModule})
+export class ShakeableService {
+  constructor(readonly normal: NormalService) {}
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/hierarchy.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/hierarchy.ts
new file mode 100644
index 000000000000..86daf887989b
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/hierarchy.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
+ */
+
+import {Component, Injectable, NgModule, Optional, Self} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ServerModule} from '@angular/platform-server';
+
+@Injectable()
+export class Service {
+}
+
+@Component({
+  selector: 'hierarchy-app',
+  template: '<child-cmp></child-cmp>',
+  providers: [Service],
+})
+export class AppComponent {
+}
+
+@Component({
+  selector: 'child-cmp',
+  template: '{{found}}',
+})
+export class ChildComponent {
+  found: boolean;
+
+  constructor(@Optional() @Self() service: Service|null) { this.found = !!service; }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule.withServerTransition({appId: 'hierarchy-app'}),
+    ServerModule,
+  ],
+  declarations: [AppComponent, ChildComponent],
+  bootstrap: [AppComponent],
+})
+export class HierarchyAppModule {
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root.ts
new file mode 100644
index 000000000000..3d56d26bec7e
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root.ts
@@ -0,0 +1,43 @@
+/**
+ * @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, Injectable, NgModule, Optional, Self} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ServerModule} from '@angular/platform-server';
+import {RouterModule} from '@angular/router';
+
+import {LazyModuleNgFactory} from './root_lazy.ngfactory';
+
+@Component({
+  selector: 'root-app',
+  template: '<router-outlet></router-outlet>',
+})
+export class AppComponent {
+}
+
+export function children(): any {
+  console.error('children', LazyModuleNgFactory);
+  return LazyModuleNgFactory;
+}
+
+
+@NgModule({
+  imports: [
+    BrowserModule.withServerTransition({appId: 'id-app'}),
+    ServerModule,
+    RouterModule.forRoot(
+        [
+          {path: '', pathMatch: 'prefix', loadChildren: children},
+        ],
+        {initialNavigation: 'enabled'}),
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class RootAppModule {
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root_lazy.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root_lazy.ts
new file mode 100644
index 000000000000..1a56081266d4
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root_lazy.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 {Component, NgModule, Optional, Self} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {Service} from './root_service';
+
+@Component({
+  selector: 'lazy-route',
+  template: '{{service}}:{{serviceInLazyInjector}}',
+})
+export class RouteComponent {
+  service: boolean;
+  serviceInLazyInjector: boolean;
+  constructor(@Optional() service: Service, @Optional() @Self() lazyService: Service) {
+    this.service = !!service;
+    this.serviceInLazyInjector = !!lazyService;
+  }
+}
+
+@NgModule({
+  declarations: [RouteComponent],
+  imports: [
+    RouterModule.forChild([
+      {path: '', pathMatch: 'prefix', component: RouteComponent},
+    ]),
+  ],
+})
+export class LazyModule {
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root_service.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root_service.ts
new file mode 100644
index 000000000000..487b40ab0b10
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root_service.ts
@@ -0,0 +1,15 @@
+/**
+ * @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';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Service {
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/self.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/self.ts
new file mode 100644
index 000000000000..fb37c76e4065
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/self.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 {Component, Injectable, NgModule, Optional, Self} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ServerModule} from '@angular/platform-server';
+
+@Injectable()
+export class NormalService {
+  constructor(@Optional() @Self() readonly shakeable: ShakeableService|null) {}
+}
+
+@Component({
+  selector: 'self-app',
+  template: '{{found}}',
+})
+export class AppComponent {
+  found: boolean;
+  constructor(service: NormalService) { this.found = !!service.shakeable; }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule.withServerTransition({appId: 'id-app'}),
+    ServerModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+  providers: [NormalService],
+})
+export class SelfAppModule {
+}
+
+@Injectable({providedIn: SelfAppModule})
+export class ShakeableService {
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/string.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/string.ts
new file mode 100644
index 000000000000..fca98267bd6e
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/string.ts
@@ -0,0 +1,38 @@
+/**
+ * @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, Injectable, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ServerModule} from '@angular/platform-server';
+
+
+@Component({
+  selector: 'string-app',
+  template: '{{data}}',
+})
+export class AppComponent {
+  data: string;
+  constructor(service: Service) { this.data = service.data; }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule.withServerTransition({appId: 'id-app'}),
+    ServerModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+  providers: [{provide: 'someStringToken', useValue: 'works'}],
+})
+export class StringAppModule {
+}
+
+@Injectable({providedIn: StringAppModule})
+export class Service {
+  constructor(@Inject('someStringToken') readonly data: string) {}
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/token.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/token.ts
new file mode 100644
index 000000000000..3b93c3e5d859
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/token.ts
@@ -0,0 +1,54 @@
+/**
+ * @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, Injectable, InjectionToken, NgModule, forwardRef, inject} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ServerModule} from '@angular/platform-server';
+
+export interface IService { readonly dep: {readonly data: string;}; }
+
+@NgModule({})
+export class TokenModule {
+}
+
+export const TOKEN = new InjectionToken('test', {
+  providedIn: TokenModule,
+  factory: () => new Service(inject(Dep)),
+});
+
+
+@Component({
+  selector: 'token-app',
+  template: '{{data}}',
+})
+export class AppComponent {
+  data: string;
+  constructor(@Inject(TOKEN) service: IService) { this.data = service.dep.data; }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule.withServerTransition({appId: 'id-app'}),
+    ServerModule,
+    TokenModule,
+  ],
+  providers: [forwardRef(() => Dep)],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class TokenAppModule {
+}
+
+@Injectable()
+export class Dep {
+  readonly data = 'fromToken';
+}
+
+export class Service {
+  constructor(readonly dep: Dep) {}
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/test/BUILD.bazel b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/test/BUILD.bazel
new file mode 100644
index 000000000000..5e4bb4bd12e9
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/test/BUILD.bazel
@@ -0,0 +1,31 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        [
+            "**/*.ts",
+        ],
+    ),
+    deps = [
+        "//packages/compiler-cli/integrationtest/bazel/injectable_def/app",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-server",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//packages/platform-server",
+        "//packages/platform-server/testing",
+        "//tools/testing:node",
+    ],
+)
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/test/app_spec.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/test/app_spec.ts
new file mode 100644
index 000000000000..571252f74473
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/test/app_spec.ts
@@ -0,0 +1,169 @@
+/**
+ * @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, INJECTOR, Injectable, NgModule} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {renderModuleFactory} from '@angular/platform-server';
+import {BasicAppModuleNgFactory} from 'app_built/src/basic.ngfactory';
+import {DepAppModuleNgFactory} from 'app_built/src/dep.ngfactory';
+import {HierarchyAppModuleNgFactory} from 'app_built/src/hierarchy.ngfactory';
+import {RootAppModuleNgFactory} from 'app_built/src/root.ngfactory';
+import {SelfAppModuleNgFactory} from 'app_built/src/self.ngfactory';
+import {StringAppModuleNgFactory} from 'app_built/src/string.ngfactory';
+import {TokenAppModuleNgFactory} from 'app_built/src/token.ngfactory';
+
+describe('ngInjectableDef Bazel Integration', () => {
+  it('works in AOT', done => {
+    renderModuleFactory(BasicAppModuleNgFactory, {
+      document: '<id-app></id-app>',
+      url: '/',
+    }).then(html => {
+      expect(html).toMatch(/>0:0<\//);
+      done();
+    });
+  });
+
+  it('@Self() works in component hierarchies', done => {
+    renderModuleFactory(HierarchyAppModuleNgFactory, {
+      document: '<hierarchy-app></hierarchy-app>',
+      url: '/',
+    }).then(html => {
+      expect(html).toMatch(/>false<\//);
+      done();
+    });
+  });
+
+  it('@Optional() Self() resolves to @Injectable() scoped service', done => {
+    renderModuleFactory(SelfAppModuleNgFactory, {
+      document: '<self-app></self-app>',
+      url: '/',
+    }).then(html => {
+      expect(html).toMatch(/>true<\//);
+      done();
+    });
+  });
+
+  it('InjectionToken ngInjectableDef works', done => {
+    renderModuleFactory(TokenAppModuleNgFactory, {
+      document: '<token-app></token-app>',
+      url: '/',
+    }).then(html => {
+      expect(html).toMatch(/>fromToken<\//);
+      done();
+    });
+  });
+
+  it('APP_ROOT_SCOPE works', done => {
+    renderModuleFactory(RootAppModuleNgFactory, {
+      document: '<root-app></root-app>',
+      url: '/',
+    }).then(html => {
+      expect(html).toMatch(/>true:false<\//);
+      done();
+    });
+  });
+
+  it('can inject dependencies', done => {
+    renderModuleFactory(DepAppModuleNgFactory, {
+      document: '<dep-app></dep-app>',
+      url: '/',
+    }).then(html => {
+      expect(html).toMatch(/>true<\//);
+      done();
+    });
+  });
+
+  it('string tokens work', done => {
+    renderModuleFactory(StringAppModuleNgFactory, {
+      document: '<string-app></string-app>',
+      url: '/',
+    }).then(html => {
+      expect(html).toMatch(/>works<\//);
+      done();
+    });
+  });
+
+  it('allows provider override in JIT for root-scoped @Injectables', () => {
+    @Injectable({
+      providedIn: 'root',
+      useValue: new Service('default'),
+    })
+    class Service {
+      constructor(readonly value: string) {}
+    }
+
+    TestBed.configureTestingModule({});
+    TestBed.overrideProvider(Service, {useValue: new Service('overridden')});
+
+    expect(TestBed.get(Service).value).toEqual('overridden');
+  });
+
+  it('allows provider override in JIT for module-scoped @Injectables', () => {
+
+    @NgModule()
+    class Module {
+    }
+
+    @Injectable({
+      providedIn: Module,
+      useValue: new Service('default'),
+    })
+    class Service {
+      constructor(readonly value: string) {}
+    }
+
+    TestBed.configureTestingModule({
+      imports: [Module],
+    });
+    TestBed.overrideProvider(Service, {useValue: new Service('overridden')});
+
+    expect(TestBed.get(Service).value).toEqual('overridden');
+  });
+
+  it('does not override existing ngInjectableDef', () => {
+    @Injectable({
+      providedIn: 'root',
+      useValue: new Service(false),
+    })
+    class Service {
+      constructor(public value: boolean) {}
+      static ngInjectableDef = {
+        providedIn: 'root',
+        factory: () => new Service(true),
+        token: Service,
+      };
+    }
+
+    TestBed.configureTestingModule({});
+    expect(TestBed.get(Service).value).toEqual(true);
+  });
+
+  it('NgModule injector understands requests for INJECTABLE', () => {
+    TestBed.configureTestingModule({
+      providers: [{provide: 'foo', useValue: 'bar'}],
+    });
+    expect(TestBed.get(INJECTOR).get('foo')).toEqual('bar');
+  });
+
+  it('Component injector understands requests for INJECTABLE', () => {
+    @Component({
+      selector: 'test-cmp',
+      template: 'test',
+      providers: [{provide: 'foo', useValue: 'bar'}],
+    })
+    class TestCmp {
+    }
+
+    TestBed.configureTestingModule({
+      declarations: [TestCmp],
+    });
+
+    const fixture = TestBed.createComponent(TestCmp);
+    expect(fixture.componentRef.injector.get(INJECTOR).get('foo')).toEqual('bar');
+  });
+});
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/lib1/BUILD.bazel b/packages/compiler-cli/integrationtest/bazel/injectable_def/lib1/BUILD.bazel
new file mode 100644
index 000000000000..4caedba71433
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/lib1/BUILD.bazel
@@ -0,0 +1,17 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "lib1",
+    srcs = glob(
+        [
+            "**/*.ts",
+        ],
+    ),
+    module_name = "lib1_built",
+    deps = [
+        "//packages/core",
+        "@rxjs",
+    ],
+)
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/lib1/module.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/lib1/module.ts
new file mode 100644
index 000000000000..f9baf45121b6
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/lib1/module.ts
@@ -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
+ */
+
+import {Injectable, NgModule} from '@angular/core';
+
+@NgModule({})
+export class Lib1Module {
+}
+
+@Injectable({
+  providedIn: Lib1Module,
+})
+export class Service {
+  static instanceCount = 0;
+  instance = Service.instanceCount++;
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/lib2/BUILD.bazel b/packages/compiler-cli/integrationtest/bazel/injectable_def/lib2/BUILD.bazel
new file mode 100644
index 000000000000..1c08147d309c
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/lib2/BUILD.bazel
@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "lib2",
+    srcs = glob(
+        [
+            "**/*.ts",
+        ],
+    ),
+    module_name = "lib2_built",
+    deps = [
+        "//packages/compiler-cli/integrationtest/bazel/injectable_def/lib1",
+        "//packages/core",
+        "@rxjs",
+    ],
+)
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/lib2/module.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/lib2/module.ts
new file mode 100644
index 000000000000..ebeccb0a81f1
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injectable_def/lib2/module.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 {Component, Injector, NgModule} from '@angular/core';
+import {Lib1Module, Service} from 'lib1_built/module';
+
+@Component({
+  selector: 'lib2-cmp',
+  template: '{{instance1}}:{{instance2}}',
+})
+export class Lib2Cmp {
+  instance1: number = -1;
+  instance2: number = -1;
+
+  constructor(service: Service, injector: Injector) {
+    this.instance1 = service.instance;
+    this.instance2 = injector.get(Service).instance;
+  }
+}
+
+@NgModule({
+  declarations: [Lib2Cmp],
+  exports: [Lib2Cmp],
+  imports: [Lib1Module],
+})
+export class Lib2Module {
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/BUILD.bazel b/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/BUILD.bazel
new file mode 100644
index 000000000000..15a6b28c75da
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/BUILD.bazel
@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ivy_ng_module")
+load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+
+ivy_ng_module(
+    name = "app",
+    srcs = glob(
+        [
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "app_built",
+    deps = [
+        "//packages/core",
+        "@rxjs",
+    ],
+)
diff --git a/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/src/module.ts b/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/src/module.ts
new file mode 100644
index 000000000000..e1eb0c205eb2
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/src/module.ts
@@ -0,0 +1,40 @@
+/**
+ * @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, NgModule} from '@angular/core';
+
+export const AOT_TOKEN = new InjectionToken<string>('TOKEN');
+
+@Injectable()
+export class AotService {
+}
+
+@NgModule({
+  providers: [AotService],
+})
+export class AotServiceModule {
+}
+
+@NgModule({
+  providers: [{provide: AOT_TOKEN, useValue: 'imports'}],
+})
+export class AotImportedModule {
+}
+
+@NgModule({
+  providers: [{provide: AOT_TOKEN, useValue: 'exports'}],
+})
+export class AotExportedModule {
+}
+
+@NgModule({
+  imports: [AotServiceModule, AotImportedModule],
+  exports: [AotExportedModule],
+})
+export class AotModule {
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/test/BUILD.bazel b/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/test/BUILD.bazel
new file mode 100644
index 000000000000..1d89f7076561
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/test/BUILD.bazel
@@ -0,0 +1,27 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        [
+            "**/*.ts",
+        ],
+    ),
+    deps = [
+        "//packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app",
+        "//packages/core",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
diff --git a/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/test/module_spec.ts b/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/test/module_spec.ts
new file mode 100644
index 000000000000..89c0c09c2b46
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/injector_def/ivy_build/app/test/module_spec.ts
@@ -0,0 +1,84 @@
+/**
+ * @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, Injector, NgModule, createInjector, forwardRef} from '@angular/core';
+import {AOT_TOKEN, AotModule, AotService} from 'app_built/src/module';
+
+describe('Ivy NgModule', () => {
+  describe('AOT', () => {
+    let injector: Injector;
+
+    beforeEach(() => { injector = createInjector(AotModule); });
+    it('works', () => { expect(injector.get(AotService) instanceof AotService).toBeTruthy(); });
+
+    it('merges imports and exports', () => { expect(injector.get(AOT_TOKEN)).toEqual('exports'); });
+  });
+
+
+
+  describe('JIT', () => {
+    @Injectable({providedIn: null})
+    class Service {
+    }
+
+    @NgModule({
+      providers: [Service],
+    })
+    class JitModule {
+    }
+
+    @NgModule({
+      imports: [JitModule],
+    })
+    class JitAppModule {
+    }
+
+    it('works', () => { createInjector(JitAppModule); });
+
+    it('throws an error on circular module dependencies', () => {
+      @NgModule({
+        imports: [forwardRef(() => BModule)],
+      })
+      class AModule {
+      }
+
+      @NgModule({
+        imports: [AModule],
+      })
+      class BModule {
+      }
+
+      expect(() => createInjector(AModule))
+          .toThrowError('Circular dependency: type AModule ends up importing itself.');
+    });
+
+    it('merges imports and exports', () => {
+      const TOKEN = new InjectionToken<string>('TOKEN');
+      @NgModule({
+        providers: [{provide: TOKEN, useValue: 'provided from A'}],
+      })
+      class AModule {
+      }
+      @NgModule({
+        providers: [{provide: TOKEN, useValue: 'provided from B'}],
+      })
+      class BModule {
+      }
+
+      @NgModule({
+        imports: [AModule],
+        exports: [BModule],
+      })
+      class CModule {
+      }
+
+      const injector = createInjector(CModule);
+      expect(injector.get(TOKEN)).toEqual('provided from B');
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/bazel/ng_module/BUILD.bazel b/packages/compiler-cli/integrationtest/bazel/ng_module/BUILD.bazel
new file mode 100644
index 000000000000..c411ec594ab9
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/ng_module/BUILD.bazel
@@ -0,0 +1,25 @@
+load("//packages/bazel:index.bzl", "ng_module")
+
+ng_module(
+    name = "test_module",
+    srcs = glob(["*.ts"]),
+    entry_point = "index.ts",
+    flat_module_out_file = "flat_module_filename",
+    module_name = "some_npm_module",
+    deps = ["//packages/core"],
+)
+
+load(":extract_flat_module_index.bzl", "extract_flat_module_index")
+
+extract_flat_module_index(
+    name = "flat_module_index",
+    deps = [":test_module"],
+)
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+jasmine_node_test(
+    name = "test",
+    srcs = ["spec.js"],
+    data = [":flat_module_index"],
+)
diff --git a/packages/compiler-cli/integrationtest/bazel/ng_module/child.ts b/packages/compiler-cli/integrationtest/bazel/ng_module/child.ts
new file mode 100644
index 000000000000..019518f629d6
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/ng_module/child.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
+ */
+
+import {NgModule} from '@angular/core';
+import {Parent} from './parent';
+
+@NgModule({imports: [Parent]})
+export class Child {
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/ng_module/extract_flat_module_index.bzl b/packages/compiler-cli/integrationtest/bazel/ng_module/extract_flat_module_index.bzl
new file mode 100644
index 000000000000..e222ba43c143
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/ng_module/extract_flat_module_index.bzl
@@ -0,0 +1,21 @@
+# 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
+"""Test utility to extract the "flat_module_metadata" from transitive Angular deps.
+"""
+
+def _extract_flat_module_index(ctx):
+    files = []
+    for dep in ctx.attr.deps:
+        if hasattr(dep, "angular"):
+            metadata = dep.angular.flat_module_metadata
+            files.extend([metadata.metadata_file, metadata.typings_file])
+    return [DefaultInfo(files = depset(files))]
+
+extract_flat_module_index = rule(
+    implementation = _extract_flat_module_index,
+    attrs = {
+        "deps": attr.label_list(),
+    },
+)
diff --git a/packages/compiler-cli/integrationtest/bazel/ng_module/index.ts b/packages/compiler-cli/integrationtest/bazel/ng_module/index.ts
new file mode 100644
index 000000000000..548fbc52f936
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/ng_module/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 './child';
diff --git a/packages/compiler-cli/integrationtest/bazel/ng_module/parent.ts b/packages/compiler-cli/integrationtest/bazel/ng_module/parent.ts
new file mode 100644
index 000000000000..ece48ffa2dca
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/ng_module/parent.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+
+@NgModule({})
+export class Parent {
+}
diff --git a/packages/compiler-cli/integrationtest/bazel/ng_module/spec.js b/packages/compiler-cli/integrationtest/bazel/ng_module/spec.js
new file mode 100644
index 000000000000..eb10e8124d94
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/bazel/ng_module/spec.js
@@ -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
+ */
+
+const fs = require('fs');
+const PKG = 'angular/packages/compiler-cli/integrationtest/bazel/ng_module';
+describe('flat module index', () => {
+  describe('child metadata', () => {
+    it('should have contents', () => {
+      const metadata = fs.readFileSync(
+          require.resolve(`${PKG}/flat_module_filename.metadata.json`), {encoding: 'utf-8'});
+      expect(metadata).toContain('"__symbolic":"module"');
+      expect(metadata).toContain('"__symbolic":"reference","module":"@angular/core"');
+      expect(metadata).toContain(
+          '"origins":{"Child":"./child","ɵangular_packages_compiler_cli_integrationtest_bazel_ng_module_test_module_a":"./parent"}');
+      expect(metadata).toContain('"importAs":"some_npm_module"');
+    });
+  });
+  describe('child typings', () => {
+    it('should have contents', () => {
+      const dts =
+          fs.readFileSync(require.resolve(`${PKG}/flat_module_filename.d.ts`), {encoding: 'utf-8'});
+
+      expect(dts).toContain('export * from \'./index\';');
+      expect(dts).toContain(
+          'export { Parent as ɵangular_packages_compiler_cli_integrationtest_bazel_ng_module_test_module_a } from \'./parent\';');
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/benchmarks/README.md b/packages/compiler-cli/integrationtest/benchmarks/README.md
new file mode 100644
index 000000000000..14e69f8ff6fe
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/benchmarks/README.md
@@ -0,0 +1,6 @@
+# Overview
+
+This folder will be filled with the benchmark sources
+so that we can do offline compilation for them.
+
+
diff --git a/packages/compiler-cli/integrationtest/flat_module/public-api.ts b/packages/compiler-cli/integrationtest/flat_module/public-api.ts
new file mode 100644
index 000000000000..0e955d883f13
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/flat_module/public-api.ts
@@ -0,0 +1,10 @@
+/**
+ * @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 './src/flat.component';
+export * from './src/flat.module';
diff --git a/packages/compiler-cli/integrationtest/flat_module/src/flat.component.html b/packages/compiler-cli/integrationtest/flat_module/src/flat.component.html
new file mode 100644
index 000000000000..6b1bf241a3d2
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/flat_module/src/flat.component.html
@@ -0,0 +1 @@
+<div>flat module component</div>
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/flat_module/src/flat.component.ts b/packages/compiler-cli/integrationtest/flat_module/src/flat.component.ts
new file mode 100644
index 000000000000..ea1a9deb061f
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/flat_module/src/flat.component.ts
@@ -0,0 +1,16 @@
+/**
+ * @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';
+
+@Component({
+  selector: 'flat-comp',
+  templateUrl: 'flat.component.html',
+})
+export class FlatComponent {
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/flat_module/src/flat.module.ts b/packages/compiler-cli/integrationtest/flat_module/src/flat.module.ts
new file mode 100644
index 000000000000..8ee8e3cb4596
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/flat_module/src/flat.module.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 {NgModule} from '@angular/core';
+
+import {FlatComponent} from './flat.component';
+
+@NgModule({
+  declarations: [
+    FlatComponent,
+  ],
+  exports: [
+    FlatComponent,
+  ]
+})
+export class FlatModule {
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/flat_module/tsconfig-build.json b/packages/compiler-cli/integrationtest/flat_module/tsconfig-build.json
new file mode 100644
index 000000000000..86f8050944a6
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/flat_module/tsconfig-build.json
@@ -0,0 +1,26 @@
+{
+  "angularCompilerOptions": {
+    // For TypeScript 1.8, we have to lay out generated files
+    // in the same source directory with your code.
+    "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": "../node_modules/flat_module",
+     // Prevent scanning up the directory tree for types
+    "typeRoots": ["node_modules/@types"]
+ },
+
+ "files": ["public-api.ts"]
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/app.component.css b/packages/compiler-cli/integrationtest/ngtools_src/app.component.css
new file mode 100644
index 000000000000..5cde7b922336
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/app.component.css
@@ -0,0 +1,3 @@
+:host {
+  background-color: blue;
+}
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/app.component.html b/packages/compiler-cli/integrationtest/ngtools_src/app.component.html
new file mode 100644
index 000000000000..56549a9fbad2
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/app.component.html
@@ -0,0 +1,5 @@
+<div>
+  <h1 i18n>hello world</h1>
+  <a [routerLink]="['lazy']">lazy</a>
+  <router-outlet></router-outlet>
+</div>
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/app.component.ts b/packages/compiler-cli/integrationtest/ngtools_src/app.component.ts
new file mode 100644
index 000000000000..c1a050676b3a
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/app.component.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 {Component, ViewEncapsulation} from '@angular/core';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AppComponent {
+}
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/app.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/app.module.ts
new file mode 100644
index 000000000000..e02363fc8aea
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/app.module.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 {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {RouterModule} from '@angular/router';
+
+import {AppComponent} from './app.component';
+
+@Component({selector: 'home-view', template: 'home!'})
+export class HomeView {
+}
+
+
+@NgModule({
+  declarations: [AppComponent, HomeView],
+  imports: [
+    BrowserModule, RouterModule.forRoot([
+      {path: 'lazy', loadChildren: './lazy.module#LazyModule'},
+      {path: 'feature2', loadChildren: 'feature2/feature2.module#Feature2Module'},
+      {path: '', component: HomeView}
+    ])
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/feature/feature.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/feature/feature.module.ts
new file mode 100644
index 000000000000..ade254d7f6d9
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/feature/feature.module.ts
@@ -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
+ */
+
+import {Component, NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+@Component({selector: 'feature-component', template: 'foo.html'})
+export class FeatureComponent {
+}
+
+@NgModule({
+  declarations: [FeatureComponent],
+  imports: [RouterModule.forChild([{path: '', component: FeatureComponent}])]
+})
+export class FeatureModule {
+}
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature-nested.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature-nested.module.ts
new file mode 100644
index 000000000000..87e664fdbe28
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature-nested.module.ts
@@ -0,0 +1,23 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+@Component({selector: 'lazy-feature-comp', template: 'lazy feature, nested!'})
+export class LazyFeatureNestedComponent {
+}
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: '', component: LazyFeatureNestedComponent, pathMatch: 'full'},
+  ])],
+  declarations: [LazyFeatureNestedComponent]
+})
+export class LazyFeatureNestedModule {
+}
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature.module.ts
new file mode 100644
index 000000000000..64e9bc448809
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature.module.ts
@@ -0,0 +1,27 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+@Component({selector: 'lazy-feature-comp', template: 'lazy feature!'})
+export class LazyFeatureComponent {
+}
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: '', component: LazyFeatureComponent, pathMatch: 'full'},
+    {path: 'feature', loadChildren: './feature.module#FeatureModule'}, {
+      path: 'nested-feature',
+      loadChildren: './lazy-feature-nested.module#LazyFeatureNestedModule'
+    }
+  ])],
+  declarations: [LazyFeatureComponent]
+})
+export class LazyFeatureModule {
+}
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/feature2/default.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/feature2/default.module.ts
new file mode 100644
index 000000000000..daf1c39633a0
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/feature2/default.module.ts
@@ -0,0 +1,23 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+@Component({selector: 'feature-component', template: 'foo.html'})
+export class FeatureComponent {
+}
+
+@NgModule({
+  declarations: [FeatureComponent],
+  imports: [RouterModule.forChild([
+    {path: '', component: FeatureComponent},
+  ])]
+})
+export default class DefaultModule {
+}
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/feature2/feature2.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/feature2/feature2.module.ts
new file mode 100644
index 000000000000..7e0c5f0a516e
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/feature2/feature2.module.ts
@@ -0,0 +1,25 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+@Component({selector: 'feature-component', template: 'foo.html'})
+export class FeatureComponent {
+}
+
+@NgModule({
+  declarations: [FeatureComponent],
+  imports: [RouterModule.forChild([
+    {path: '', component: FeatureComponent},
+    {path: 'd', loadChildren: './default.module'},
+    {path: 'e', loadChildren: 'feature/feature.module#FeatureModule'},
+  ])]
+})
+export class Feature2Module {
+}
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts
new file mode 100644
index 000000000000..8f1b788b1b34
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts
@@ -0,0 +1,27 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+@Component({selector: 'lazy-comp', template: 'lazy!'})
+export class LazyComponent {
+}
+
+@NgModule({
+  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 {
+}
+
+export class SecondModule {}
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/tsconfig-build.json b/packages/compiler-cli/integrationtest/ngtools_src/tsconfig-build.json
new file mode 100644
index 000000000000..1abc789b1398
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/ngtools_src/tsconfig-build.json
@@ -0,0 +1,24 @@
+{
+  "angularCompilerOptions": {
+    // For TypeScript 1.8, we have to lay out generated files
+    // in the same source directory with your code.
+    "genDir": ".",
+    "debug": true
+  },
+
+  "compilerOptions": {
+    "target": "es5",
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "moduleResolution": "node",
+    "rootDir": "",
+    "declaration": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "baseUrl": ".",
+    // don't auto-discover @types/fs-extra
+    "types": []
+  }
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/src/a/multiple_components.html b/packages/compiler-cli/integrationtest/src/a/multiple_components.html
new file mode 100644
index 000000000000..281c6866c375
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/a/multiple_components.html
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/src/a/multiple_components.ts b/packages/compiler-cli/integrationtest/src/a/multiple_components.ts
new file mode 100644
index 000000000000..eb76422ee6e6
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/a/multiple_components.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 {Component} from '@angular/core';
+
+@Component({selector: 'my-comp', template: '<div></div>'})
+export class MultipleComponentsMyComp {
+}
+
+@Component({
+  selector: 'next-comp',
+  templateUrl: './multiple_components.html',
+})
+export class NextComp {
+}
+
+// Verify that exceptions from DirectiveResolver don't propagate
+export function NotADirective(c: any): void {}
+@NotADirective
+export class HasCustomDecorator {
+}
+
+// Verify that custom decorators have metadata collected, eg Ionic
+export function Page(c: any): (f: Function) => void {
+  return NotADirective;
+}
+
+@Page({template: 'Ionic template'})
+export class AnIonicPage {
+}
diff --git a/packages/compiler-cli/integrationtest/src/animate.ts b/packages/compiler-cli/integrationtest/src/animate.ts
new file mode 100644
index 000000000000..0c746888bda4
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/animate.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
+ */
+import {AUTO_STYLE, animate, state, style, transition, trigger} from '@angular/animations';
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'animate-cmp',
+  animations: [trigger(
+      'openClose',
+      [
+        state('*', style({height: AUTO_STYLE, color: 'black', borderColor: 'black'})),
+        state('closed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})),
+        state('open', style({height: AUTO_STYLE, borderColor: 'green', color: 'green'})),
+        transition('* => *', animate('1s'))
+      ])],
+  template: `
+    <button (click)="setAsOpen()">Open</button>
+    <button (click)="setAsClosed()">Closed</button>
+    <button (click)="setAsSomethingElse()">Something Else</button>
+    <hr />
+    <div [@openClose]="stateExpression">
+      Look at this box
+    </div>
+  `
+})
+export class AnimateCmp {
+  stateExpression: string;
+  constructor() { this.setAsClosed(); }
+  setAsSomethingElse() { this.stateExpression = 'something'; }
+  setAsOpen() { this.stateExpression = 'open'; }
+  setAsClosed() { this.stateExpression = 'closed'; }
+}
diff --git a/packages/compiler-cli/integrationtest/src/basic.css b/packages/compiler-cli/integrationtest/src/basic.css
new file mode 100644
index 000000000000..517161f74c50
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/basic.css
@@ -0,0 +1,3 @@
+@import './shared.css';
+
+.green { color: green }
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/src/basic.html b/packages/compiler-cli/integrationtest/src/basic.html
new file mode 100644
index 000000000000..081304bf01f2
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/basic.html
@@ -0,0 +1,5 @@
+<div [attr.array]="[0]" [attr.map]="{a:1}" title="translate me" i18n-title="meaning|desc">{{ctxProp}}</div>
+<form><input type="button" [(ngModel)]="ctxProp" name="first"/></form>
+<my-comp *ngIf="ctxBool"></my-comp>
+<div *ngFor="let x of ctxArr" [attr.value]="x"></div>
+<p id="welcomeMessage"><!--i18n-->Welcome<!--/i18n--></p>
diff --git a/packages/compiler-cli/integrationtest/src/basic.ts b/packages/compiler-cli/integrationtest/src/basic.ts
new file mode 100644
index 000000000000..4021df9d500f
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/basic.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 {Component, Inject, LOCALE_ID, TRANSLATIONS_FORMAT} from '@angular/core';
+
+import {CUSTOM, Named} from './custom_token';
+
+@Component({
+  selector: 'basic',
+  templateUrl: './basic.html',
+  styles: ['.red { color: red }'],
+  styleUrls: ['./basic.css'],
+})
+export class BasicComp {
+  ctxProp: string;
+  ctxBool: boolean;
+  ctxArr: any[] = [];
+  constructor(
+      @Inject(LOCALE_ID) public localeId: string,
+      @Inject(TRANSLATIONS_FORMAT) public translationsFormat: string,
+      @Inject(CUSTOM) public custom: Named) {
+    this.ctxProp = 'initialValue';
+  }
+}
diff --git a/packages/compiler-cli/integrationtest/src/bootstrap.ts b/packages/compiler-cli/integrationtest/src/bootstrap.ts
new file mode 100644
index 000000000000..edbdbf6426b5
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/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 './basic';
+import {MainModuleNgFactory} from './module.ngfactory';
+
+MainModuleNgFactory.create(null).instance.appRef.bootstrap(BasicComp);
diff --git a/packages/compiler-cli/integrationtest/src/comp_using_3rdp.ts b/packages/compiler-cli/integrationtest/src/comp_using_3rdp.ts
new file mode 100644
index 000000000000..6f864a79a731
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/comp_using_3rdp.ts
@@ -0,0 +1,18 @@
+/**
+ * @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';
+
+@Component({
+  selector: 'use-third-party',
+  template: '<third-party-comp [thirdParty]="title"></third-party-comp>' +
+      '<another-third-party-comp></another-third-party-comp>',
+})
+export class ComponentUsingThirdParty {
+  title: string = 'from 3rd party';
+}
diff --git a/packages/compiler-cli/integrationtest/src/comp_using_flat_module.ts b/packages/compiler-cli/integrationtest/src/comp_using_flat_module.ts
new file mode 100644
index 000000000000..cdac5ded799a
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/comp_using_flat_module.ts
@@ -0,0 +1,16 @@
+/**
+ * @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';
+
+@Component({
+  selector: 'use-flat-module',
+  template: '<flat-comp></flat-comp>',
+})
+export class ComponentUsingFlatModule {
+}
diff --git a/packages/compiler-cli/integrationtest/src/custom_token.ts b/packages/compiler-cli/integrationtest/src/custom_token.ts
new file mode 100644
index 000000000000..698b4dd5fe2e
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/custom_token.ts
@@ -0,0 +1,13 @@
+/**
+ * @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';
+
+export interface Named { name: string; }
+
+export const CUSTOM = new InjectionToken<Named>('CUSTOM');
diff --git a/packages/compiler-cli/integrationtest/src/dep.d.ts b/packages/compiler-cli/integrationtest/src/dep.d.ts
new file mode 100644
index 000000000000..fda233c49c9d
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/dep.d.ts
@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+
+// Verify we don't try to extract metadata for .d.ts files
+export declare var a: string;
diff --git a/packages/compiler-cli/integrationtest/src/entry_components.ts b/packages/compiler-cli/integrationtest/src/entry_components.ts
new file mode 100644
index 000000000000..463ba8255454
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/entry_components.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 {ANALYZE_FOR_ENTRY_COMPONENTS, Component, ComponentFactoryResolver, Inject, InjectionToken} from '@angular/core';
+
+import {BasicComp} from './basic';
+
+@Component({
+  selector: 'cmp-entryComponents',
+  template: '<p i18n>Welcome</p>',
+  entryComponents: [BasicComp]
+})
+export class CompWithEntryComponents {
+  constructor(public cfr: ComponentFactoryResolver) {}
+}
+
+export const SOME_TOKEN = new InjectionToken('someToken');
+
+export function provideValueWithEntryComponents(value: any) {
+  return [
+    {provide: SOME_TOKEN, useValue: value},
+    {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: value, multi: true},
+  ];
+}
+
+@Component({
+  selector: 'comp-entryComponents-provider',
+  template: '',
+  providers: [provideValueWithEntryComponents([{a: 'b', component: BasicComp}])]
+})
+export class CompWithAnalyzeEntryComponentsProvider {
+  constructor(public cfr: ComponentFactoryResolver, @Inject(SOME_TOKEN) public providedValue: any) {
+  }
+}
diff --git a/packages/compiler-cli/integrationtest/src/errors.html b/packages/compiler-cli/integrationtest/src/errors.html
new file mode 100644
index 000000000000..6002658b13c0
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/errors.html
@@ -0,0 +1,2 @@
+<div>
+    <span   [title]="createError()"></span></div>
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/src/errors.ts b/packages/compiler-cli/integrationtest/src/errors.ts
new file mode 100644
index 000000000000..fc25afe56e2a
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/errors.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
+ */
+
+import {Component} from '@angular/core';
+
+@Component({selector: 'comp-with-error', templateUrl: 'errors.html'})
+export class BindingErrorComp {
+  createError() { throw new Error('Test'); }
+}
diff --git a/packages/compiler-cli/integrationtest/src/features.ts b/packages/compiler-cli/integrationtest/src/features.ts
new file mode 100644
index 000000000000..756cbd0b7928
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/features.ts
@@ -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 * as common from '@angular/common';
+import {CUSTOM_ELEMENTS_SCHEMA, Component, Directive, EventEmitter, Inject, InjectionToken, NgModule, Output, forwardRef} from '@angular/core';
+import {Observable} from 'rxjs';
+
+import {wrapInArray} from './funcs';
+
+export const SOME_INJECTON_TOKEN = new InjectionToken('injectionToken');
+
+@Component({
+  selector: 'comp-providers',
+  template: '',
+  providers: [
+    {provide: 'strToken', useValue: forwardRef(() => 'strValue')},
+    {provide: SOME_INJECTON_TOKEN, useValue: 10},
+    {provide: 'reference', useValue: common.NgIf},
+    {provide: 'complexToken', useValue: {a: 1, b: ['test', SOME_INJECTON_TOKEN]}},
+  ]
+})
+export class CompWithProviders {
+  constructor(@Inject('strToken') public ctxProp: string) {}
+}
+
+@Component({
+  selector: 'cmp-reference',
+  template: `
+    <input #a [(ngModel)]="foo" required>{{a.value}}
+    <div *ngIf="true">{{a.value}}</div>
+  `
+})
+export class CompWithReferences {
+  foo: string;
+}
+
+@Component({selector: 'cmp-pipes', template: `<div *ngIf>{{test | somePipe}}</div>`})
+export class CompUsingPipes {
+}
+
+@Component({
+  selector: 'cmp-custom-els',
+  template: `
+    <some-custom-element [someUnknownProp]="true"></some-custom-element>
+  `,
+})
+export class CompUsingCustomElements {
+}
+
+@Component({
+  selector: 'cmp-event',
+  template: `
+    <div (click)="handleDomEventVoid($event)"></div>
+    <div (click)="handleDomEventPreventDefault($event)"></div>
+    <div (dirEvent)="handleDirEvent($event)"></div>
+  `,
+})
+export class CompConsumingEvents {
+  handleDomEventVoid(e: any): void {}
+  handleDomEventPreventDefault(e: any): boolean { return false; }
+  handleDirEvent(e: any): void {}
+}
+
+@Directive({
+  selector: '[dirEvent]',
+})
+export class DirPublishingEvents {
+  @Output('dirEvent')
+  dirEvent: Observable<string> = new EventEmitter();
+}
+
+@NgModule({schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: wrapInArray(CompUsingCustomElements)})
+export class ModuleUsingCustomElements {
+}
diff --git a/packages/compiler-cli/integrationtest/src/funcs.ts b/packages/compiler-cli/integrationtest/src/funcs.ts
new file mode 100644
index 000000000000..45681da42df2
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/funcs.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 function wrapInArray(value: any): any[] {
+  return [value];
+}
\ No newline at end of file
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 000000000000..6769dd60bdf5
--- /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 000000000000..8d2bccf69864
--- /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/messages.fi.xlf b/packages/compiler-cli/integrationtest/src/messages.fi.xlf
new file mode 100644
index 000000000000..1bc59fc41f50
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/messages.fi.xlf
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
+    <file source-language="en" datatype="plaintext" original="ng2.template">
+        <body>
+            <trans-unit id="76e1eccb1b772fa9f294ef9c146ea6d0efa8a2d4" datatype="html">
+                <source>translate me</source>
+                <target>käännä teksti</target>
+                <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>tervetuloa</target>
+            </trans-unit>
+            <trans-unit id="63a85808f03b8181e36a952e0fa38202c2304862" datatype="html">
+                <source>other-3rdP-component</source>
+                <target>other-3rdP-component</target>
+            </trans-unit>
+        </body>
+    </file>
+</xliff>
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/src/module.ts b/packages/compiler-cli/integrationtest/src/module.ts
new file mode 100644
index 000000000000..3398cb2ddcb7
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/module.ts
@@ -0,0 +1,94 @@
+/**
+ * @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 {ApplicationRef, NgModule, forwardRef} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MATERIAL_SANITY_CHECKS, MdButtonModule} from '@angular/material';
+import {ServerModule} from '@angular/platform-server';
+import {FlatModule} from 'flat_module';
+// Note: don't refer to third_party_src as we want to test that
+// we can compile components from node_modules!
+import {ThirdpartyModule} from 'third_party/module';
+
+import {MultipleComponentsMyComp, NextComp} from './a/multiple_components';
+import {AnimateCmp} from './animate';
+import {BasicComp} from './basic';
+import {ComponentUsingThirdParty} from './comp_using_3rdp';
+import {ComponentUsingFlatModule} from './comp_using_flat_module';
+import {CUSTOM} from './custom_token';
+import {CompWithAnalyzeEntryComponentsProvider, CompWithEntryComponents} from './entry_components';
+import {BindingErrorComp} from './errors';
+import {CompConsumingEvents, CompUsingPipes, CompWithProviders, CompWithReferences, DirPublishingEvents, ModuleUsingCustomElements} from './features';
+import {CompUsingRootModuleDirectiveAndPipe, SomeDirectiveInRootModule, SomeLibModule, SomePipeInRootModule, SomeService} from './module_fixtures';
+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,
+    BasicComp,
+    CompConsumingEvents,
+    CompForChildQuery,
+    CompUsingPipes,
+    CompUsingRootModuleDirectiveAndPipe,
+    CompWithAnalyzeEntryComponentsProvider,
+    CompWithChildQuery,
+    CompWithDirectiveChild,
+    CompWithEntryComponents,
+    CompWithNgContent,
+    CompWithProviders,
+    CompWithReferences,
+    DirectiveForQuery,
+    DirPublishingEvents,
+    MultipleComponentsMyComp,
+    NextComp,
+    ProjectingComp,
+    SomeDirectiveInRootModule,
+    SomePipeInRootModule,
+    ComponentUsingFlatModule,
+    ComponentUsingThirdParty,
+    BindingErrorComp,
+  ],
+  imports: [
+    ServerModule,
+    FormsModule,
+    MdButtonModule,
+    ModuleUsingCustomElements,
+    SomeLibModule.withProviders(),
+    ThirdpartyModule,
+    FlatModule,
+  ],
+  providers: [
+    SomeService,
+    {provide: CUSTOM, useValue: forwardRef(() => ({name: 'some name'}))},
+    // disable sanity check for material because it throws an error when used server-side
+    // see https://github.com/angular/material2/issues/6292
+    {provide: MATERIAL_SANITY_CHECKS, useValue: false},
+  ],
+  entryComponents: [
+    AnimateCmp,
+    BasicComp,
+    CompUsingRootModuleDirectiveAndPipe,
+    CompWithAnalyzeEntryComponentsProvider,
+    CompWithChildQuery,
+    CompWithEntryComponents,
+    CompWithReferences,
+    ProjectingComp,
+    ComponentUsingThirdParty,
+    ComponentUsingFlatModule,
+    BindingErrorComp,
+  ]
+})
+export class MainModule {
+  constructor(public appRef: ApplicationRef) {}
+
+  ngDoBootstrap() {}
+}
diff --git a/packages/compiler-cli/integrationtest/src/module_fixtures.ts b/packages/compiler-cli/integrationtest/src/module_fixtures.ts
new file mode 100644
index 000000000000..18fe662ac1d0
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/module_fixtures.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 {ANALYZE_FOR_ENTRY_COMPONENTS, Component, Directive, Injectable, InjectionToken, Input, NgModule, Pipe} from '@angular/core';
+
+@Injectable()
+export class SomeService {
+  public prop = 'someValue';
+}
+
+@Injectable()
+export class ServiceUsingLibModule {
+}
+
+@Directive({selector: '[someDir]', host: {'[title]': 'someDir'}})
+export class SomeDirectiveInRootModule {
+  @Input()
+  someDir: string;
+}
+
+@Directive({selector: '[someDir]', host: {'[title]': 'someDir'}})
+export class SomeDirectiveInLibModule {
+  @Input()
+  someDir: string;
+}
+
+@Pipe({name: 'somePipe'})
+export class SomePipeInRootModule {
+  transform(value: string): any { return `transformed ${value}`; }
+}
+
+@Pipe({name: 'somePipe'})
+export class SomePipeInLibModule {
+  transform(value: string): any { return `transformed ${value}`; }
+}
+
+@Component({selector: 'comp', template: `<div  [someDir]="'someValue' | somePipe"></div>`})
+export class CompUsingRootModuleDirectiveAndPipe {
+}
+
+@Component({selector: 'comp', template: `<div  [someDir]="'someValue' | somePipe"></div>`})
+export class CompUsingLibModuleDirectiveAndPipe {
+}
+
+export const SOME_TOKEN = new InjectionToken('someToken');
+
+export function provideValueWithEntryComponents(value: any) {
+  return [
+    {provide: SOME_TOKEN, useValue: value},
+    {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: value, multi: true},
+  ];
+}
+
+@NgModule({
+  declarations: [SomeDirectiveInLibModule, SomePipeInLibModule, CompUsingLibModuleDirectiveAndPipe],
+  exports: [CompUsingLibModuleDirectiveAndPipe],
+  entryComponents: [CompUsingLibModuleDirectiveAndPipe],
+})
+export class SomeLibModule {
+  static withProviders() {
+    return {
+      ngModule: SomeLibModule,
+      providers: [
+        ServiceUsingLibModule, provideValueWithEntryComponents(
+                                   [{a: 'b', component: CompUsingLibModuleDirectiveAndPipe}])
+      ]
+    };
+  }
+}
diff --git a/packages/compiler-cli/integrationtest/src/projection.ts b/packages/compiler-cli/integrationtest/src/projection.ts
new file mode 100644
index 000000000000..35a5c0585155
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/projection.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
+ */
+
+import {Component} from '@angular/core';
+
+@Component({selector: 'comp-with-proj', template: '<ng-content></ng-content>'})
+export class CompWithNgContent {
+}
+
+@Component({
+  selector: 'main',
+  template: '<comp-with-proj><span greeting="Hello world!"></span></comp-with-proj>'
+})
+export class ProjectingComp {
+}
diff --git a/packages/compiler-cli/integrationtest/src/queries.ts b/packages/compiler-cli/integrationtest/src/queries.ts
new file mode 100644
index 000000000000..8b85bfd9fa0a
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/queries.ts
@@ -0,0 +1,36 @@
+/**
+ * @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, QueryList, ViewChild, ViewChildren} from '@angular/core';
+
+@Component({selector: 'comp-for-child-query', template: 'child'})
+export class CompForChildQuery {
+}
+
+@Component(
+    {selector: 'comp-with-child-query', template: '<comp-for-child-query></comp-for-child-query>'})
+export class CompWithChildQuery {
+  @ViewChild(CompForChildQuery) child: CompForChildQuery;
+  @ViewChildren(CompForChildQuery) children: QueryList<CompForChildQuery>;
+}
+
+@Directive({selector: '[directive-for-query]'})
+export class DirectiveForQuery {
+}
+
+@Component({
+  selector: 'comp-with-directive-child',
+  template: `<div>
+     <div *ngFor="let data of divData" directive-for-query>{{data}}</div>
+  </div>`
+})
+export class CompWithDirectiveChild {
+  @ViewChildren(DirectiveForQuery) children: QueryList<DirectiveForQuery>;
+
+  divData: string[];
+}
diff --git a/packages/compiler-cli/integrationtest/src/shared.css b/packages/compiler-cli/integrationtest/src/shared.css
new file mode 100644
index 000000000000..69ad252cce1f
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/shared.css
@@ -0,0 +1 @@
+.blue { color: blue }
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/test/all_spec.ts b/packages/compiler-cli/integrationtest/test/all_spec.ts
new file mode 100644
index 000000000000..a44aee27b91d
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/all_spec.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
+ */
+
+require('source-map-support').install();
+
+import './init';
+import './animate_spec';
+import './basic_spec';
+import './entry_components_spec';
+import './i18n_spec';
+import './ng_module_spec';
+import './projection_spec';
+import './query_spec';
+import './source_map_spec';
+import './jit_summaries_spec';
diff --git a/packages/compiler-cli/integrationtest/test/animate_spec.ts b/packages/compiler-cli/integrationtest/test/animate_spec.ts
new file mode 100644
index 000000000000..613ed66a3839
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/animate_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 './init';
+import {DebugElement} from '@angular/core';
+import {AnimateCmp} from '../src/animate';
+import {createComponent} from './util';
+
+// TODO(matsko): make this green again...
+xdescribe('template codegen output', () => {
+  function findTargetElement(elm: DebugElement): DebugElement {
+    // the open-close-container is a child of the main container
+    // if the template changes then please update the location below
+    return elm.children[4];
+  }
+
+  it('should apply the animate states to the element', (done) => {
+    const compFixture = createComponent(AnimateCmp);
+    const debugElement = compFixture.debugElement;
+
+    const targetDebugElement = findTargetElement(<DebugElement>debugElement);
+
+    compFixture.componentInstance.setAsOpen();
+    compFixture.detectChanges();
+
+    setTimeout(() => {
+      expect(targetDebugElement.styles['height']).toEqual(null);
+      expect(targetDebugElement.styles['borderColor']).toEqual('green');
+      expect(targetDebugElement.styles['color']).toEqual('green');
+
+      compFixture.componentInstance.setAsClosed();
+      compFixture.detectChanges();
+
+      setTimeout(() => {
+        expect(targetDebugElement.styles['height']).toEqual('0px');
+        expect(targetDebugElement.styles['borderColor']).toEqual('maroon');
+        expect(targetDebugElement.styles['color']).toEqual('maroon');
+        done();
+      }, 0);
+    }, 0);
+  });
+
+  it('should apply the default animate state to the element', (done) => {
+    const compFixture = createComponent(AnimateCmp);
+    const debugElement = compFixture.debugElement;
+
+    const targetDebugElement = findTargetElement(<DebugElement>debugElement);
+
+    compFixture.componentInstance.setAsSomethingElse();
+    compFixture.detectChanges();
+
+    setTimeout(() => {
+      expect(targetDebugElement.styles['height']).toEqual(null);
+      expect(targetDebugElement.styles['borderColor']).toEqual('black');
+      expect(targetDebugElement.styles['color']).toEqual('black');
+
+      compFixture.componentInstance.setAsClosed();
+      compFixture.detectChanges();
+
+      setTimeout(() => {
+        expect(targetDebugElement.styles['height']).not.toEqual(null);
+        expect(targetDebugElement.styles['borderColor']).not.toEqual('grey');
+        expect(targetDebugElement.styles['color']).not.toEqual('grey');
+        done();
+      }, 0);
+    }, 0);
+  });
+});
diff --git a/packages/compiler-cli/integrationtest/test/basic_spec.ts b/packages/compiler-cli/integrationtest/test/basic_spec.ts
new file mode 100644
index 000000000000..370585521e66
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/basic_spec.ts
@@ -0,0 +1,97 @@
+/**
+ * @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 './init';
+import * as fs from 'fs';
+import * as path from 'path';
+
+import {MultipleComponentsMyComp} from '../src/a/multiple_components';
+import {BasicComp} from '../src/basic';
+import {createComponent} from './util';
+
+describe('template codegen output', () => {
+  const outDir = 'src';
+
+  it('should lower Decorators without reflect-metadata', () => {
+    const jsOutput = path.join(outDir, 'basic.js');
+    expect(fs.existsSync(jsOutput)).toBeTruthy();
+    expect(fs.readFileSync(jsOutput, {encoding: 'utf-8'})).not.toContain('Reflect.decorate');
+  });
+
+  it('should produce metadata.json outputs', () => {
+    const metadataOutput = path.join(outDir, 'basic.metadata.json');
+    expect(fs.existsSync(metadataOutput)).toBeTruthy();
+    const output = fs.readFileSync(metadataOutput, {encoding: 'utf-8'});
+    expect(output).toContain('"decorators":');
+    expect(output).toContain('"module":"@angular/core","name":"Component"');
+  });
+
+  it('should write .d.ts files', () => {
+    const dtsOutput = path.join(outDir, 'basic.d.ts');
+    expect(fs.existsSync(dtsOutput)).toBeTruthy();
+    expect(fs.readFileSync(dtsOutput, {encoding: 'utf-8'})).toContain('Basic');
+  });
+
+  it('should write .ngfactory.js for .d.ts inputs', () => {
+    const factoryOutput = path.join('node_modules', '@angular', 'common', 'common.ngfactory.js');
+    expect(fs.existsSync(factoryOutput)).toBeTruthy();
+  });
+
+  it('should be able to create the basic component', () => {
+    const compFixture = createComponent(BasicComp);
+    expect(compFixture.componentInstance).toBeTruthy();
+  });
+
+  it('should support ngIf', () => {
+    const compFixture = createComponent(BasicComp);
+    const debugElement = compFixture.debugElement;
+    expect(debugElement.children.length).toBe(3);
+
+    compFixture.componentInstance.ctxBool = true;
+    compFixture.detectChanges();
+    expect(debugElement.children.length).toBe(4);
+    expect(debugElement.children[2].injector.get(MultipleComponentsMyComp)).toBeTruthy();
+  });
+
+  it('should support ngFor', () => {
+    const compFixture = createComponent(BasicComp);
+    const debugElement = compFixture.debugElement;
+    expect(debugElement.children.length).toBe(3);
+
+    // test NgFor
+    compFixture.componentInstance.ctxArr = [1, 2];
+    compFixture.detectChanges();
+    expect(debugElement.children.length).toBe(5);
+    expect(debugElement.children[2].attributes['value']).toBe('1');
+    expect(debugElement.children[3].attributes['value']).toBe('2');
+  });
+
+  describe('i18n', () => {
+    it('should inject the locale into the component', () => {
+      const compFixture = createComponent(BasicComp);
+      expect(compFixture.componentInstance.localeId).toEqual('fi');
+    });
+
+    it('should inject the translations format into the component', () => {
+      const compFixture = createComponent(BasicComp);
+      expect(compFixture.componentInstance.translationsFormat).toEqual('xlf');
+    });
+
+    it('should support i18n for content tags', () => {
+      const containerElement = createComponent(BasicComp).nativeElement;
+      const pElement = containerElement.querySelector('p');
+      const pText = pElement.textContent;
+      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();
+    });
+  });
+});
diff --git a/packages/compiler-cli/integrationtest/test/entry_components_spec.ts b/packages/compiler-cli/integrationtest/test/entry_components_spec.ts
new file mode 100644
index 000000000000..44ecb67b3ed2
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/entry_components_spec.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 './init';
+
+import {BasicComp} from '../src/basic';
+import {CompWithAnalyzeEntryComponentsProvider, CompWithEntryComponents} from '../src/entry_components';
+
+import {createComponent} from './util';
+
+describe('content projection', () => {
+  it('should support entryComponents in components', () => {
+    const compFixture = createComponent(CompWithEntryComponents);
+    const cf = compFixture.componentInstance.cfr.resolveComponentFactory(BasicComp);
+    expect(cf.componentType).toBe(BasicComp);
+  });
+
+  it('should support entryComponents via the ANALYZE_FOR_ENTRY_COMPONENTS provider and function providers in components',
+     () => {
+       const compFixture = createComponent(CompWithAnalyzeEntryComponentsProvider);
+       const cf = compFixture.componentInstance.cfr.resolveComponentFactory(BasicComp);
+       expect(cf.componentType).toBe(BasicComp);
+       // check that the function call that created the provider for ANALYZE_FOR_ENTRY_COMPONENTS
+       // worked.
+       expect(compFixture.componentInstance.providedValue).toEqual([
+         {a: 'b', component: BasicComp}
+       ]);
+     });
+});
diff --git a/packages/compiler-cli/integrationtest/test/forward_ref_spec.ts b/packages/compiler-cli/integrationtest/test/forward_ref_spec.ts
new file mode 100644
index 000000000000..e274e7b4f684
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/forward_ref_spec.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 './init';
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+import {CUSTOM} from '../src/custom_token';
+import {CompWithProviders} from '../src/features';
+import {MainModule} from '../src/module';
+
+import {createComponent, createModule} from './util';
+
+describe('template codegen output', () => {
+  it('should support forwardRef with useValue in components', () => {
+    const compFixture = createComponent(CompWithProviders);
+    expect(compFixture.componentInstance.ctxProp).toBe('strValue');
+  });
+
+  it('should support forwardRef with useValue in modules', () => {
+    const modRef = createModule();
+    expect(modRef.injector.get(CUSTOM).name).toBe('some name');
+  });
+});
diff --git a/packages/compiler-cli/integrationtest/test/i18n_spec.ts b/packages/compiler-cli/integrationtest/test/i18n_spec.ts
new file mode 100644
index 000000000000..0872e96660f7
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/i18n_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 './init';
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+const EXPECTED_XMB = `<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE messagebundle [
+<!ELEMENT messagebundle (msg)*>
+<!ATTLIST messagebundle class CDATA #IMPLIED>
+
+<!ELEMENT msg (#PCDATA|ph|source)*>
+<!ATTLIST msg id CDATA #IMPLIED>
+<!ATTLIST msg seq CDATA #IMPLIED>
+<!ATTLIST msg name CDATA #IMPLIED>
+<!ATTLIST msg desc CDATA #IMPLIED>
+<!ATTLIST msg meaning CDATA #IMPLIED>
+<!ATTLIST msg obsolete (obsolete) #IMPLIED>
+<!ATTLIST msg xml:space (default|preserve) "default">
+<!ATTLIST msg is_hidden CDATA #IMPLIED>
+
+<!ELEMENT source (#PCDATA)>
+
+<!ELEMENT ph (#PCDATA|ex)*>
+<!ATTLIST ph name CDATA #REQUIRED>
+
+<!ELEMENT ex (#PCDATA)>
+]>
+<messagebundle>
+  <msg id="126808141597411718"><source>node_modules/third_party/other_comp.d.ts:1,2</source>other-3rdP-component
+multi-lines</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>
+</messagebundle>
+`;
+
+const EXPECTED_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="fr" datatype="plaintext" original="ng2.template">
+    <body>
+      <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>
+      <trans-unit id="76e1eccb1b772fa9f294ef9c146ea6d0efa8a2d4" datatype="html">
+        <source>translate me</source>
+        <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>
+        <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>
+    </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="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>
+    <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>
+  </file>
+</xliff>
+`;
+
+describe('template i18n extraction output', () => {
+  const outDir = 'out';
+
+  it('should extract i18n messages as xmb', () => {
+    const xmbOutput = path.join(outDir, 'custom_file.xmb');
+    expect(fs.existsSync(xmbOutput)).toBeTruthy();
+    const xmb = fs.readFileSync(xmbOutput, {encoding: 'utf-8'});
+    expect(xmb).toEqual(EXPECTED_XMB);
+  });
+
+  it('should extract i18n messages as xliff', () => {
+    const xlfOutput = path.join(outDir, 'messages.xlf');
+    expect(fs.existsSync(xlfOutput)).toBeTruthy();
+    const xlf = fs.readFileSync(xlfOutput, {encoding: 'utf-8'});
+    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 files = fs.readdirSync(outDir);
+    files.forEach(f => expect(f).not.toMatch(/\.js$/));
+  });
+});
diff --git a/packages/compiler-cli/integrationtest/test/init.ts b/packages/compiler-cli/integrationtest/test/init.ts
new file mode 100644
index 000000000000..59e576a3c5f8
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/init.ts
@@ -0,0 +1,17 @@
+/**
+ * @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
+ */
+
+// Only needed to satisfy the check in core/src/util/decorators.ts
+// TODO(alexeagle): maybe remove that check?
+require('reflect-metadata');
+
+require('zone.js/dist/zone-node.js');
+require('zone.js/dist/long-stack-trace-zone.js');
+require('zone.js/dist/sync-test.js');
+require('zone.js/dist/proxy.js');
+require('zone.js/dist/jasmine-patch.js');
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 000000000000..2a6547c409af
--- /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
new file mode 100644
index 000000000000..4e58a8f4ea99
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/ng_module_spec.ts
@@ -0,0 +1,94 @@
+/**
+ * @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 './init';
+
+import {ComponentUsingThirdParty} from '../src/comp_using_3rdp';
+import {ComponentUsingFlatModule} from '../src/comp_using_flat_module';
+import {MainModule} from '../src/module';
+import {CompUsingLibModuleDirectiveAndPipe, CompUsingRootModuleDirectiveAndPipe, SOME_TOKEN, ServiceUsingLibModule, SomeLibModule, SomeService} from '../src/module_fixtures';
+
+import {createComponent, createModule} from './util';
+
+describe('NgModule', () => {
+  it('should support providers', () => {
+    const moduleRef = createModule();
+    expect(moduleRef.instance instanceof MainModule).toEqual(true);
+    expect(moduleRef.injector.get(MainModule) instanceof MainModule).toEqual(true);
+    expect(moduleRef.injector.get(SomeService) instanceof SomeService).toEqual(true);
+  });
+
+  it('should support entryComponents components', () => {
+    const moduleRef = createModule();
+    const cf = moduleRef.componentFactoryResolver.resolveComponentFactory(
+        CompUsingRootModuleDirectiveAndPipe);
+    expect(cf.componentType).toBe(CompUsingRootModuleDirectiveAndPipe);
+    const compRef = cf.create(moduleRef.injector);
+    expect(compRef.instance instanceof CompUsingRootModuleDirectiveAndPipe).toEqual(true);
+  });
+
+  it('should support entryComponents via the ANALYZE_FOR_ENTRY_COMPONENTS provider and function providers in components',
+     () => {
+       const moduleRef = createModule();
+       const cf = moduleRef.componentFactoryResolver.resolveComponentFactory(
+           CompUsingRootModuleDirectiveAndPipe);
+       expect(cf.componentType).toBe(CompUsingRootModuleDirectiveAndPipe);
+       // check that the function call that created the provider for ANALYZE_FOR_ENTRY_COMPONENTS
+       // worked.
+       expect(moduleRef.injector.get(SOME_TOKEN)).toEqual([
+         {a: 'b', component: CompUsingLibModuleDirectiveAndPipe}
+       ]);
+     });
+
+  describe('flat modules', () => {
+    it('should support flat module entryComponents components', () => {
+      // https://github.com/angular/angular/issues/15221
+      const fixture = createComponent(ComponentUsingFlatModule);
+      const bundleComp = fixture.nativeElement.children;
+      expect(bundleComp[0].children[0].textContent).toEqual('flat module component');
+    });
+  });
+
+  describe('third-party modules', () => {
+    // https://github.com/angular/angular/issues/11889
+    it('should support third party entryComponents components', () => {
+      const fixture = createComponent(ComponentUsingThirdParty);
+      const thirdPComps = fixture.nativeElement.children;
+      expect(thirdPComps[0].children[0].textContent).toEqual('3rdP-component');
+      expect(thirdPComps[1].children[0].textContent).toEqual(`other-3rdP-component
+multi-lines`);
+    });
+
+    // https://github.com/angular/angular/issues/12428
+    it('should support third party directives', () => {
+      const fixture = createComponent(ComponentUsingThirdParty);
+      const debugElement = fixture.debugElement;
+      fixture.detectChanges();
+      expect(debugElement.children[0].properties['title']).toEqual('from 3rd party');
+    });
+  });
+
+  it('should support module directives and pipes', () => {
+    const compFixture = createComponent(CompUsingRootModuleDirectiveAndPipe);
+    compFixture.detectChanges();
+
+    const debugElement = compFixture.debugElement;
+    expect(debugElement.children[0].properties['title']).toEqual('transformed someValue');
+  });
+
+  it('should support module directives and pipes on lib modules', () => {
+    const compFixture = createComponent(CompUsingLibModuleDirectiveAndPipe);
+    compFixture.detectChanges();
+
+    const debugElement = compFixture.debugElement;
+    expect(debugElement.children[0].properties['title']).toEqual('transformed someValue');
+
+    expect(debugElement.injector.get(SomeLibModule) instanceof SomeLibModule).toEqual(true);
+    expect(debugElement.injector.get(ServiceUsingLibModule) instanceof ServiceUsingLibModule)
+        .toEqual(true);
+  });
+});
diff --git a/packages/compiler-cli/integrationtest/test/projection_spec.ts b/packages/compiler-cli/integrationtest/test/projection_spec.ts
new file mode 100644
index 000000000000..58c2af408ba6
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/projection_spec.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 './init';
+import {By} from '@angular/platform-browser';
+import {CompWithNgContent, ProjectingComp} from '../src/projection';
+import {createComponent} from './util';
+
+describe('content projection', () => {
+  it('should support basic content projection', () => {
+    const mainCompFixture = createComponent(ProjectingComp);
+
+    const debugElement = mainCompFixture.debugElement;
+    const compWithProjection = debugElement.query(By.directive(CompWithNgContent));
+    expect(compWithProjection.children.length).toBe(1);
+    expect(compWithProjection.children[0].attributes['greeting']).toEqual('Hello world!');
+  });
+});
diff --git a/packages/compiler-cli/integrationtest/test/query_spec.ts b/packages/compiler-cli/integrationtest/test/query_spec.ts
new file mode 100644
index 000000000000..1d66f58c89a7
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/query_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 './init';
+import {QueryList} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {CompForChildQuery, CompWithChildQuery} from '../src/queries';
+import {createComponent} from './util';
+
+describe('child queries', () => {
+  it('should support compiling child queries', () => {
+    const childQueryCompFixture = createComponent(CompWithChildQuery);
+    const debugElement = childQueryCompFixture.debugElement;
+    debugElement.query(By.directive(CompWithChildQuery));
+    expect(childQueryCompFixture.componentInstance.child).toBeDefined();
+    expect(childQueryCompFixture.componentInstance.child instanceof CompForChildQuery).toBe(true);
+
+  });
+
+  it('should support compiling children queries', () => {
+    const childQueryCompFixture = createComponent(CompWithChildQuery);
+    const debugElement = childQueryCompFixture.debugElement;
+    debugElement.query(By.directive(CompWithChildQuery));
+
+    childQueryCompFixture.detectChanges();
+
+    expect(childQueryCompFixture.componentInstance.children).toBeDefined();
+    expect(childQueryCompFixture.componentInstance.children instanceof QueryList).toBe(true);
+  });
+});
diff --git a/packages/compiler-cli/integrationtest/test/source_map_spec.ts b/packages/compiler-cli/integrationtest/test/source_map_spec.ts
new file mode 100644
index 000000000000..25b4dd7b1b38
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/source_map_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 './init';
+import {BindingErrorComp} from '../src/errors';
+import {createComponent} from './util';
+
+// TODO(tbosch): source maps does not currently work with the transformer pipeline
+xdescribe('source maps', () => {
+  it('should report source location for binding errors', () => {
+    const comp = createComponent(BindingErrorComp);
+    let error: any;
+    try {
+      comp.detectChanges();
+    } catch (e) {
+      error = e;
+    }
+    const sourcePosition = getSourcePositionForStack(error.stack);
+    expect(sourcePosition.line).toBe(2);
+    expect(sourcePosition.column).toBe(13);
+    expect(sourcePosition.source.endsWith('errors.html')).toBe(true);
+  });
+});
+
+function getSourcePositionForStack(stack: string): {source: string, line: number, column: number} {
+  const htmlLocations = stack
+                            .split('\n')
+                            // e.g. at View_MyComp_0 (...html:153:40)
+                            .map(line => /\((.*\.html):(\d+):(\d+)/.exec(line) !)
+                            .filter(match => !!match)
+                            .map(match => ({
+                                   source: match[1],
+                                   line: parseInt(match[2], 10),
+                                   column: parseInt(match[3], 10)
+                                 }));
+  return htmlLocations[0];
+}
diff --git a/packages/compiler-cli/integrationtest/test/test_ngtools_api.ts b/packages/compiler-cli/integrationtest/test/test_ngtools_api.ts
new file mode 100644
index 000000000000..0c7a2f988069
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/test_ngtools_api.ts
@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+/**
+ * @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 * as path from 'path';
+import * as ts from 'typescript';
+import * as assert from 'assert';
+import {__NGTOOLS_PRIVATE_API_2, readConfiguration} from '@angular/compiler-cli';
+
+/* tslint:disable:no-console  */
+/**
+ * Main method.
+ * Standalone program that executes codegen using the ngtools API and tests that files were
+ * properly read and wrote.
+ */
+function main() {
+  console.log(`testing ngtools API...`);
+
+  Promise.resolve()
+      .then(() => lazyRoutesTest())
+      .then(() => {
+        console.log('All done!');
+        process.exit(0);
+      })
+      .catch((err) => {
+        console.error(err.stack);
+        console.error('Test failed');
+        process.exit(1);
+      });
+}
+
+function lazyRoutesTest() {
+  const basePath = path.join(__dirname, '../ngtools_src');
+  const project = path.join(basePath, 'tsconfig-build.json');
+
+  const config = readConfiguration(project);
+  const host = ts.createCompilerHost(config.options, true);
+  const program = ts.createProgram(config.rootNames, config.options, host);
+
+  config.options.basePath = basePath;
+
+  const lazyRoutes = __NGTOOLS_PRIVATE_API_2.listLazyRoutes(
+      {program, host, angularCompilerOptions: config.options, entryModule: 'app.module#AppModule'});
+
+  const expectations: {[route: string]: string} = {
+    './lazy.module#LazyModule': 'lazy.module.ts',
+    './feature/feature.module#FeatureModule': 'feature/feature.module.ts',
+    './feature/lazy-feature.module#LazyFeatureModule': 'feature/lazy-feature.module.ts',
+    './feature.module#FeatureModule': 'feature/feature.module.ts',
+    './lazy-feature-nested.module#LazyFeatureNestedModule': 'feature/lazy-feature-nested.module.ts',
+    'feature2/feature2.module#Feature2Module': 'feature2/feature2.module.ts',
+    './default.module': 'feature2/default.module.ts',
+    'feature/feature.module#FeatureModule': 'feature/feature.module.ts'
+  };
+
+  Object.keys(lazyRoutes).forEach((route: string) => {
+    assert(route in expectations, `Found a route that was not expected: "${route}".`);
+    assert(
+        lazyRoutes[route] == path.join(basePath, expectations[route]),
+        `Route "${route}" does not point to the expected absolute path ` +
+            `"${path.join(basePath, expectations[route])}". It points to "${lazyRoutes[route]}"`);
+  });
+
+  // Verify that all expectations were met.
+  assert.deepEqual(
+      Object.keys(lazyRoutes), Object.keys(expectations), `Expected routes listed to be: \n` +
+          `  ${JSON.stringify(Object.keys(expectations))}\n` +
+          `Actual:\n` +
+          `  ${JSON.stringify(Object.keys(lazyRoutes))}\n`);
+}
+
+main();
diff --git a/packages/compiler-cli/integrationtest/test/util.ts b/packages/compiler-cli/integrationtest/test/util.ts
new file mode 100644
index 000000000000..0fe1ae64d17d
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/util.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 {MainModule} from '../src/module';
+import {MainModuleNgFactory} from '../src/module.ngfactory';
+
+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 createComponent<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/README.md b/packages/compiler-cli/integrationtest/third_party_src/README.md
new file mode 100644
index 000000000000..e9b4a035ab98
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/third_party_src/README.md
@@ -0,0 +1,8 @@
+This folder emulates consuming precompiled modules and components.
+It is compiled separately from the other sources under `src`
+to only generate `*.js` / `*.d.ts` / `*.metadata.json` files,
+but no `*.ngfactory.ts` files.
+
+** WARNING **
+Do not import components/directives from here directly as we want to test that ngc still compiles 
+them when they are not imported.
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/third_party_src/comp.ts b/packages/compiler-cli/integrationtest/third_party_src/comp.ts
new file mode 100644
index 000000000000..b34d317e9c39
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/third_party_src/comp.ts
@@ -0,0 +1,16 @@
+/**
+ * @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';
+
+@Component({
+  selector: 'third-party-comp',
+  template: '<div>3rdP-component</div>',
+})
+export class ThirdPartyComponent {
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/third_party_src/directive.ts b/packages/compiler-cli/integrationtest/third_party_src/directive.ts
new file mode 100644
index 000000000000..53d2335adecd
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/third_party_src/directive.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 {Directive, Input} from '@angular/core';
+
+@Directive({
+  selector: '[thirdParty]',
+  host: {'[title]': 'thirdParty'},
+})
+export class ThirdPartyDirective {
+  @Input() thirdParty: string;
+}
diff --git a/packages/compiler-cli/integrationtest/third_party_src/module.ts b/packages/compiler-cli/integrationtest/third_party_src/module.ts
new file mode 100644
index 000000000000..05b90e9eb691
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/third_party_src/module.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {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 {
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/third_party_src/other_comp.ts b/packages/compiler-cli/integrationtest/third_party_src/other_comp.ts
new file mode 100644
index 000000000000..130baabd8f56
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/third_party_src/other_comp.ts
@@ -0,0 +1,17 @@
+/**
+ * @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';
+
+@Component({
+  selector: 'another-third-party-comp',
+  template: `<div i18n>other-3rdP-component
+multi-lines</div>`,
+})
+export class AnotherThirdpartyComponent {
+}
diff --git a/packages/compiler-cli/integrationtest/third_party_src/other_module.ts b/packages/compiler-cli/integrationtest/third_party_src/other_module.ts
new file mode 100644
index 000000000000..711a1582b963
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/third_party_src/other_module.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {AnotherThirdpartyComponent} from './other_comp';
+
+@NgModule({
+  declarations: [AnotherThirdpartyComponent],
+  exports: [AnotherThirdpartyComponent],
+})
+export class AnotherThirdPartyModule {
+}
\ 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
new file mode 100644
index 000000000000..d9f9f536c335
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/third_party_src/tsconfig-build.json
@@ -0,0 +1,21 @@
+{
+  "angularCompilerOptions": {
+    // For TypeScript 1.8, we have to lay out generated files
+    // in the same source directory with your code.
+    "skipTemplateCodegen": true
+  },
+
+  "compilerOptions": {
+    "target": "es5",
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "moduleResolution": "node",
+    "rootDir": "",
+    "declaration": true,
+    "lib": ["es6", "dom"],
+    "baseUrl": ".",
+    "outDir": "../node_modules/third_party",
+     // Prevent scanning up the directory tree for types
+    "typeRoots": ["node_modules/@types"]
+ }
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/tsconfig-build.json b/packages/compiler-cli/integrationtest/tsconfig-build.json
new file mode 100644
index 000000000000..511a721e2f2b
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/tsconfig-build.json
@@ -0,0 +1,40 @@
+{
+  "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,
+    "i18nFormat": "xlf"
+  },
+
+  "compilerOptions": {
+    "target": "es5",
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": 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/integrationtest/tsconfig-ngc-build.json b/packages/compiler-cli/integrationtest/tsconfig-ngc-build.json
new file mode 100644
index 000000000000..5c880dc22d13
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/tsconfig-ngc-build.json
@@ -0,0 +1,39 @@
+{
+  "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,
+    "strictPropertyInitialization": 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/integrationtest/tsconfig-xi18n.json b/packages/compiler-cli/integrationtest/tsconfig-xi18n.json
new file mode 100644
index 000000000000..039931f12c9e
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/tsconfig-xi18n.json
@@ -0,0 +1,34 @@
+{
+  "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
+  },
+
+  "compilerOptions": {
+    "target": "es5",
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "moduleResolution": "node",
+    "outDir": "./out",
+    "rootDir": "",
+    "declaration": true,
+    "lib": ["es6", "dom"],
+    "baseUrl": ".",
+    // Prevent scanning up the directory tree for types
+    "typeRoots": ["node_modules/@types"]
+  },
+
+  "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/integrationtest/webpack.config.js b/packages/compiler-cli/integrationtest/webpack.config.js
new file mode 100644
index 000000000000..504f93430c78
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/webpack.config.js
@@ -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
+ */
+
+module.exports = {
+  target: 'node',
+  entry: './test/all_spec.js',
+  output: {filename: './all_spec.js'},
+  resolve: {extensions: ['.js']},
+  devtool: '#source-map',
+  module: {
+    loaders:
+        [{test: /\.js$/, exclude: /node_modules/, loaders: ['source-map-loader'], enforce: 'pre'}]
+  },
+};
diff --git a/packages/compiler-cli/ngtools2.ts b/packages/compiler-cli/ngtools2.ts
new file mode 100644
index 000000000000..5d598ac228bb
--- /dev/null
+++ b/packages/compiler-cli/ngtools2.ts
@@ -0,0 +1,8 @@
+/**
+ * @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 {CompilerHost, CustomTransformers, Diagnostic, EmitFlags, Program, createCompilerHost, createProgram, formatDiagnostics} from './src/ngtools_api2';
\ No newline at end of file
diff --git a/packages/compiler-cli/package.json b/packages/compiler-cli/package.json
new file mode 100644
index 000000000000..4529592ff274
--- /dev/null
+++ b/packages/compiler-cli/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@angular/compiler-cli",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - the compiler CLI for Node.js",
+  "main": "index.js",
+  "typings": "index.d.ts",
+  "bin": {
+    "ivy-ngcc": "./src/ngcc/main-ngcc.js",
+    "ngc": "./src/main.js",
+    "ng-xi18n": "./src/extract_i18n.js"
+  },
+  "dependencies": {
+    "reflect-metadata": "^0.1.2",
+    "minimist": "^1.2.0",
+    "tsickle": "^0.32.1",
+    "chokidar": "^1.4.2",
+    "convert-source-map": "^1.5.1",
+    "magic-string": "^0.25.0",
+    "source-map": "^0.6.1"
+  },
+  "peerDependencies": {
+    "typescript": ">=2.7.2 <2.10",
+    "@angular/compiler": "0.0.0-PLACEHOLDER"
+  },
+  "engines" : {
+    "node" : ">=8.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "keywords": [
+    "angular",
+    "compiler"
+  ],
+  "contributors": [
+    "Tobias Bosch <tbosch@google.com> (https://angular.io/)",
+    "Alex Eagle <alexeagle@google.com> (https://angular.io/)"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/angular/issues"
+  },
+  "homepage": "https://github.com/angular/angular/tree/master/packages/compiler-cli",
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  }
+}
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 000000000000..3b858c2468bf
--- /dev/null
+++ b/packages/compiler-cli/src/diagnostics/expression_diagnostics.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 {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 getDefinitionOf(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 getDefinitionOf(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 getDefinitionOf(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;
+  // TODO(issue/24571): remove '!'.
+  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 references 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 000000000000..85a7ce93ed6e
--- /dev/null
+++ b/packages/compiler-cli/src/diagnostics/expression_type.ts
@@ -0,0 +1,426 @@
+/**
+ * @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 {
+  // TODO(issue/24571): remove '!'.
+  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);
+  }
+
+  // TODO(issue/24571): remove '!'.
+  private _anyType !: Symbol;
+  private get anyType(): Symbol {
+    let result = this._anyType;
+    if (!result) {
+      result = this._anyType = this.query.getBuiltinType(BuiltinType.Any);
+    }
+    return result;
+  }
+
+  // TODO(issue/24571): remove '!'.
+  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 000000000000..e900ee40f306
--- /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 `arguments.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 definition.
+ *
+ * @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/translate_diagnostics.ts b/packages/compiler-cli/src/diagnostics/translate_diagnostics.ts
new file mode 100644
index 000000000000..46d98c2177a6
--- /dev/null
+++ b/packages/compiler-cli/src/diagnostics/translate_diagnostics.ts
@@ -0,0 +1,58 @@
+/**
+ * @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';
+
+import {DEFAULT_ERROR_CODE, Diagnostic, SOURCE} from '../transformers/api';
+import {GENERATED_FILES} from '../transformers/util';
+
+export interface TypeCheckHost {
+  parseSourceSpanOf(fileName: string, line: number, character: number): ParseSourceSpan|null;
+}
+
+export function translateDiagnostics(
+    host: TypeCheckHost, untranslatedDiagnostics: ReadonlyArray<ts.Diagnostic>):
+    {ts: ts.Diagnostic[], ng: Diagnostic[]} {
+  const ts: ts.Diagnostic[] = [];
+  const ng: Diagnostic[] = [];
+
+  untranslatedDiagnostics.forEach((diagnostic) => {
+    if (diagnostic.file && diagnostic.start && GENERATED_FILES.test(diagnostic.file.fileName)) {
+      // We need to filter out diagnostics about unused functions as
+      // they are in fact referenced by nobody and only serve to surface
+      // type check errors.
+      if (diagnostic.code === /* ... is declared but never used */ 6133) {
+        return;
+      }
+      const span = sourceSpanOf(host, diagnostic.file, diagnostic.start);
+      if (span) {
+        const fileName = span.start.file.url;
+        ng.push({
+          messageText: diagnosticMessageToString(diagnostic.messageText),
+          category: diagnostic.category, span,
+          source: SOURCE,
+          code: DEFAULT_ERROR_CODE
+        });
+      }
+    } else {
+      ts.push(diagnostic);
+    }
+  });
+  return {ts, ng};
+}
+
+function sourceSpanOf(host: TypeCheckHost, source: ts.SourceFile, start: number): ParseSourceSpan|
+    null {
+  const {line, character} = ts.getLineAndCharacterOfPosition(source, start);
+  return host.parseSourceSpanOf(source.fileName, line, character);
+}
+
+function diagnosticMessageToString(message: ts.DiagnosticMessageChain | string): string {
+  return ts.flattenDiagnosticMessageText(message, '\n');
+}
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 000000000000..b55e96faf2eb
--- /dev/null
+++ b/packages/compiler-cli/src/diagnostics/typescript_symbols.ts
@@ -0,0 +1,874 @@
+/**
+ * @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} from '@angular/compiler';
+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';
+import {isVersionBetween} from './typescript_version';
+
+// 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);
+    if (node) {
+      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>();
+  // TODO(issue/24571): remove '!'.
+  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 && 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>';
+  }
+
+  public readonly kind: DeclarationKind = 'type';
+
+  public readonly language: string = 'typescript';
+
+  public readonly type: Symbol|undefined = undefined;
+
+  public readonly container: Symbol|undefined = undefined;
+
+  public readonly public: boolean = true;
+
+  get callable(): boolean { return typeCallable(this.tsType); }
+
+  get nullable(): boolean {
+    return this.context.checker.getNonNullableType(this.tsType) != this.tsType;
+  }
+
+  get definition(): Definition|undefined {
+    const symbol = this.tsType.getSymbol();
+    return symbol ? definitionFromTsSymbol(symbol) : undefined;
+  }
+
+  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;
+  // TODO(issue/24571): remove '!'.
+  private _tsType !: ts.Type;
+  // TODO(issue/24571): remove '!'.
+  private _members !: SymbolTable;
+
+  public readonly nullable: boolean = false;
+  public readonly language: string = 'typescript';
+
+  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 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 {
+  public readonly language: string = 'ng-template';
+
+  public readonly nullable: boolean = false;
+
+  public readonly public: boolean = true;
+
+  constructor(private declaration: SymbolDeclaration) {}
+
+  get name() { return this.declaration.name; }
+
+  get kind() { return this.declaration.kind; }
+
+  get container(): Symbol|undefined { return undefined; }
+
+  get type() { return this.declaration.type; }
+
+  get callable(): boolean { return this.declaration.type.callable; }
+
+
+  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; }
+}
+
+/**
+ * Indicates the lower bound TypeScript version supporting `SymbolTable` as an ES6 `Map`.
+ * For lower versions, `SymbolTable` is implemented as a dictionary
+ */
+const MIN_TS_VERSION_SUPPORTING_MAP = '2.2';
+
+export const toSymbolTableFactory = (tsVersion: string) => (symbols: ts.Symbol[]) => {
+  if (isVersionBetween(tsVersion, MIN_TS_VERSION_SUPPORTING_MAP)) {
+    // ∀ Typescript version >= 2.2, `SymbolTable` is implemented as an ES6 `Map`
+    const result = new Map<string, ts.Symbol>();
+    for (const symbol of symbols) {
+      result.set(symbol.name, symbol);
+    }
+    // First, tell the compiler that `result` is of type `any`. Then, use a second type assertion
+    // to `ts.SymbolTable`.
+    // Otherwise, `Map<string, ts.Symbol>` and `ts.SymbolTable` will be considered as incompatible
+    // types by the compiler
+    return <ts.SymbolTable>(<any>result);
+  }
+
+  // ∀ Typescript version < 2.2, `SymbolTable` is implemented as a dictionary
+  const result: {[name: string]: ts.Symbol} = {};
+  for (const symbol of symbols) {
+    result[symbol.name] = symbol;
+  }
+  return <ts.SymbolTable>(<any>result);
+};
+
+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;
+      const toSymbolTable = toSymbolTableFactory(ts.version);
+      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)); }
+}
+
+// This matches .d.ts files that look like ".../<package-name>/<package-name>.d.ts",
+const INDEX_PATTERN = /[\\/]([^\\/]+)[\\/]\1\.d\.ts$/;
+
+class PipeSymbol implements Symbol {
+  // TODO(issue/24571): remove '!'.
+  private _tsType !: ts.Type;
+  public readonly kind: DeclarationKind = 'pipe';
+  public readonly language: string = 'typescript';
+  public readonly container: Symbol|undefined = undefined;
+  public readonly callable: boolean = true;
+  public readonly nullable: boolean = false;
+  public readonly public: boolean = true;
+
+  constructor(private pipe: CompilePipeSummary, private context: TypeContext) {}
+
+  get name(): string { return this.pipe.name; }
+
+  get type(): Symbol|undefined { return new TypeWrapper(this.tsType, this.context); }
+
+  get definition(): Definition|undefined {
+    const symbol = this.tsType.getSymbol();
+    return symbol ? definitionFromTsSymbol(symbol) : undefined;
+  }
+
+  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 {
+  let sourceFile = context.program.getSourceFile(type.filePath);
+  if (!sourceFile) {
+    // This handles a case where an <packageName>/index.d.ts and a <packageName>/<packageName>.d.ts
+    // are in the same directory. If we are looking for <packageName>/<packageName> and didn't
+    // find it, look for <packageName>/index.d.ts as the program might have found that instead.
+    const p = type.filePath as string;
+    const m = p.match(INDEX_PATTERN);
+    if (m) {
+      const indexVersion = path.join(path.dirname(p), 'index.d.ts');
+      sourceFile = context.program.getSourceFile(indexVersion);
+    }
+  }
+  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 {
+  public readonly size: number = 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;
+}
diff --git a/packages/compiler-cli/src/diagnostics/typescript_version.ts b/packages/compiler-cli/src/diagnostics/typescript_version.ts
new file mode 100644
index 000000000000..3ca5b79842da
--- /dev/null
+++ b/packages/compiler-cli/src/diagnostics/typescript_version.ts
@@ -0,0 +1,85 @@
+/**
+ * @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
+ */
+
+/**
+ * Converts a `string` version into an array of numbers
+ * @example
+ * toNumbers('2.0.1'); // returns [2, 0, 1]
+ */
+export function toNumbers(value: string): number[] {
+  return value.split('.').map(Number);
+}
+
+/**
+ * Compares two arrays of positive numbers with lexicographical order in mind.
+ *
+ * However - unlike lexicographical order - for arrays of different length we consider:
+ * [1, 2, 3] = [1, 2, 3, 0] instead of [1, 2, 3] < [1, 2, 3, 0]
+ *
+ * @param a The 'left hand' array in the comparison test
+ * @param b The 'right hand' in the comparison test
+ * @returns {-1|0|1} The comparison result: 1 if a is greater, -1 if b is greater, 0 is the two
+ * arrays are equals
+ */
+export function compareNumbers(a: number[], b: number[]): -1|0|1 {
+  const max = Math.max(a.length, b.length);
+  const min = Math.min(a.length, b.length);
+
+  for (let i = 0; i < min; i++) {
+    if (a[i] > b[i]) return 1;
+    if (a[i] < b[i]) return -1;
+  }
+
+  if (min !== max) {
+    const longestArray = a.length === max ? a : b;
+
+    // The result to return in case the to arrays are considered different (1 if a is greater,
+    // -1 if b is greater)
+    const comparisonResult = a.length === max ? 1 : -1;
+
+    // Check that at least one of the remaining elements is greater than 0 to consider that the two
+    // arrays are different (e.g. [1, 0] and [1] are considered the same but not [1, 0, 1] and [1])
+    for (let i = min; i < max; i++) {
+      if (longestArray[i] > 0) {
+        return comparisonResult;
+      }
+    }
+  }
+
+  return 0;
+}
+
+/**
+ * Checks if a TypeScript version is:
+ * - greater or equal than the provided `low` version,
+ * - lower or equal than an optional `high` version.
+ *
+ * @param version The TypeScript version
+ * @param low The minimum version
+ * @param high The maximum version
+ */
+export function isVersionBetween(version: string, low: string, high?: string): boolean {
+  const tsNumbers = toNumbers(version);
+  if (high !== undefined) {
+    return compareNumbers(toNumbers(low), tsNumbers) <= 0 &&
+        compareNumbers(toNumbers(high), tsNumbers) >= 0;
+  }
+  return compareNumbers(toNumbers(low), tsNumbers) <= 0;
+}
+
+/**
+ * Compares two versions
+ *
+ * @param v1 The 'left hand' version in the comparison test
+ * @param v2 The 'right hand' version in the comparison test
+ * @returns {-1|0|1} The comparison result: 1 if v1 is greater, -1 if v2 is greater, 0 is the two
+ * versions are equals
+ */
+export function compareVersions(v1: string, v2: string): -1|0|1 {
+  return compareNumbers(toNumbers(v1), toNumbers(v2));
+}
diff --git a/packages/compiler-cli/src/extract_i18n.ts b/packages/compiler-cli/src/extract_i18n.ts
new file mode 100644
index 000000000000..7cc9bb43595d
--- /dev/null
+++ b/packages/compiler-cli/src/extract_i18n.ts
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+/**
+ * @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
+ */
+
+
+/**
+ * Extract i18n messages from source code
+ */
+// Must be imported first, because Angular decorators throw on load.
+import 'reflect-metadata';
+import * as api from './transformers/api';
+import {ParsedConfiguration} from './perform_compile';
+import {main, readCommandLineAndConfiguration} from './main';
+
+export function mainXi18n(
+    args: string[], consoleError: (msg: string) => void = console.error): number {
+  const config = readXi18nCommandLineAndConfiguration(args);
+  return main(args, consoleError, config);
+}
+
+function readXi18nCommandLineAndConfiguration(args: string[]): ParsedConfiguration {
+  const options: api.CompilerOptions = {};
+  const parsedArgs = require('minimist')(args);
+  if (parsedArgs.outFile) options.i18nOutFile = parsedArgs.outFile;
+  if (parsedArgs.i18nFormat) options.i18nOutFormat = parsedArgs.i18nFormat;
+  if (parsedArgs.locale) options.i18nOutLocale = parsedArgs.locale;
+
+  const config = readCommandLineAndConfiguration(args, options, [
+    'outFile',
+    'i18nFormat',
+    'locale',
+  ]);
+  // only emit the i18nBundle but nothing else.
+  return {...config, emitFlags: api.EmitFlags.I18nBundle};
+}
+
+// Entry point
+if (require.main === module) {
+  const args = process.argv.slice(2);
+  process.exitCode = mainXi18n(args);
+}
diff --git a/packages/compiler-cli/src/language_services.ts b/packages/compiler-cli/src/language_services.ts
new file mode 100644
index 000000000000..4f04e048c4dd
--- /dev/null
+++ b/packages/compiler-cli/src/language_services.ts
@@ -0,0 +1,23 @@
+/**
+ * @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
+ */
+
+/*
+
+The API from compiler-cli that language-service can see.
+It is important that none the exported modules require anything other than
+Angular modules and Typescript as this will indirectly add a dependency
+to the language service.
+
+*/
+export {DiagnosticTemplateInfo, ExpressionDiagnostic, getExpressionDiagnostics, getExpressionScope, getTemplateExpressionDiagnostics} from './diagnostics/expression_diagnostics';
+export {AstType, DiagnosticKind, ExpressionDiagnosticsContext, TypeDiagnostic} from './diagnostics/expression_type';
+export {BuiltinType, DeclarationKind, Definition, Location, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from './diagnostics/symbols';
+export {getClassFromStaticSymbol, getClassMembers, getClassMembersFromDeclaration, getPipesTable, getSymbolQuery} from './diagnostics/typescript_symbols';
+export {MetadataCollector, ModuleMetadata} from './metadata';
+export {CompilerOptions} from './transformers/api';
+export {MetadataReaderCache, MetadataReaderHost, createMetadataReaderCache, readMetadata} from './transformers/metadata_reader';
diff --git a/packages/compiler-cli/src/main.ts b/packages/compiler-cli/src/main.ts
new file mode 100644
index 000000000000..1e17fc9d62f4
--- /dev/null
+++ b/packages/compiler-cli/src/main.ts
@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+/**
+ * @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 * as ts from 'typescript';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as tsickle from 'tsickle';
+import * as api from './transformers/api';
+import * as ngc from './transformers/entry_points';
+import {GENERATED_FILES} from './transformers/util';
+
+import {exitCodeFromResult, performCompilation, readConfiguration, formatDiagnostics, Diagnostics, ParsedConfiguration, PerformCompilationResult, filterErrorsAndWarnings} from './perform_compile';
+import {performWatchCompilation, createPerformWatchHost} from './perform_watch';
+
+export function main(
+    args: string[], consoleError: (s: string) => void = console.error,
+    config?: NgcParsedConfiguration): number {
+  let {project, rootNames, options, errors: configErrors, watch, emitFlags} =
+      config || readNgcCommandLineAndConfiguration(args);
+  if (configErrors.length) {
+    return reportErrorsAndExit(configErrors, /*options*/ undefined, consoleError);
+  }
+  if (watch) {
+    const result = watchMode(project, options, consoleError);
+    return reportErrorsAndExit(result.firstCompileResult, options, consoleError);
+  }
+  const {diagnostics: compileDiags} = performCompilation(
+      {rootNames, options, emitFlags, emitCallback: createEmitCallback(options)});
+  return reportErrorsAndExit(compileDiags, options, consoleError);
+}
+
+
+function createEmitCallback(options: api.CompilerOptions): api.TsEmitCallback|undefined {
+  const transformDecorators = options.enableIvy !== 'ngtsc' && options.enableIvy !== 'tsc' &&
+      options.annotationsAs !== 'decorators';
+  const transformTypesToClosure = options.annotateForClosureCompiler;
+  if (!transformDecorators && !transformTypesToClosure) {
+    return undefined;
+  }
+  if (transformDecorators) {
+    // This is needed as a workaround for https://github.com/angular/tsickle/issues/635
+    // Otherwise tsickle might emit references to non imported values
+    // as TypeScript elided the import.
+    options.emitDecoratorMetadata = true;
+  }
+  const tsickleHost: Pick<
+      tsickle.TsickleHost, 'shouldSkipTsickleProcessing'|'pathToModuleName'|
+      'shouldIgnoreWarningsForPath'|'fileNameToModuleId'|'googmodule'|'untyped'|
+      'convertIndexImportShorthand'|'transformDecorators'|'transformTypesToClosure'> = {
+    shouldSkipTsickleProcessing: (fileName) =>
+                                     /\.d\.ts$/.test(fileName) || GENERATED_FILES.test(fileName),
+    pathToModuleName: (context, importPath) => '',
+    shouldIgnoreWarningsForPath: (filePath) => false,
+    fileNameToModuleId: (fileName) => fileName,
+    googmodule: false,
+    untyped: true,
+    convertIndexImportShorthand: false, transformDecorators, transformTypesToClosure,
+  };
+
+  return ({
+           program,
+           targetSourceFile,
+           writeFile,
+           cancellationToken,
+           emitOnlyDtsFiles,
+           customTransformers = {},
+           host,
+           options
+         }) =>
+             tsickle.emitWithTsickle(
+                 program, {...tsickleHost, options, host}, host, options, targetSourceFile,
+                 writeFile, cancellationToken, emitOnlyDtsFiles, {
+                   beforeTs: customTransformers.before,
+                   afterTs: customTransformers.after,
+                 });
+}
+
+export interface NgcParsedConfiguration extends ParsedConfiguration { watch?: boolean; }
+
+function readNgcCommandLineAndConfiguration(args: string[]): NgcParsedConfiguration {
+  const options: api.CompilerOptions = {};
+  const parsedArgs = require('minimist')(args);
+  if (parsedArgs.i18nFile) options.i18nInFile = parsedArgs.i18nFile;
+  if (parsedArgs.i18nFormat) options.i18nInFormat = parsedArgs.i18nFormat;
+  if (parsedArgs.locale) options.i18nInLocale = parsedArgs.locale;
+  const mt = parsedArgs.missingTranslation;
+  if (mt === 'error' || mt === 'warning' || mt === 'ignore') {
+    options.i18nInMissingTranslations = mt;
+  }
+  const config = readCommandLineAndConfiguration(
+      args, options, ['i18nFile', 'i18nFormat', 'locale', 'missingTranslation', 'watch']);
+  const watch = parsedArgs.w || parsedArgs.watch;
+  return {...config, watch};
+}
+
+export function readCommandLineAndConfiguration(
+    args: string[], existingOptions: api.CompilerOptions = {},
+    ngCmdLineOptions: string[] = []): ParsedConfiguration {
+  let cmdConfig = ts.parseCommandLine(args);
+  const project = cmdConfig.options.project || '.';
+  const cmdErrors = cmdConfig.errors.filter(e => {
+    if (typeof e.messageText === 'string') {
+      const msg = e.messageText;
+      return !ngCmdLineOptions.some(o => msg.indexOf(o) >= 0);
+    }
+    return true;
+  });
+  if (cmdErrors.length) {
+    return {
+      project,
+      rootNames: [],
+      options: cmdConfig.options,
+      errors: cmdErrors,
+      emitFlags: api.EmitFlags.Default
+    };
+  }
+  const allDiagnostics: Diagnostics = [];
+  const config = readConfiguration(project, cmdConfig.options);
+  const options = {...config.options, ...existingOptions};
+  if (options.locale) {
+    options.i18nInLocale = options.locale;
+  }
+  return {
+    project,
+    rootNames: config.rootNames, options,
+    errors: config.errors,
+    emitFlags: config.emitFlags
+  };
+}
+
+function reportErrorsAndExit(
+    allDiagnostics: Diagnostics, options?: api.CompilerOptions,
+    consoleError: (s: string) => void = console.error): number {
+  const errorsAndWarnings = filterErrorsAndWarnings(allDiagnostics);
+  if (errorsAndWarnings.length) {
+    let currentDir = options ? options.basePath : undefined;
+    const formatHost: ts.FormatDiagnosticsHost = {
+      getCurrentDirectory: () => currentDir || ts.sys.getCurrentDirectory(),
+      getCanonicalFileName: fileName => fileName,
+      getNewLine: () => ts.sys.newLine
+    };
+    consoleError(formatDiagnostics(errorsAndWarnings, formatHost));
+  }
+  return exitCodeFromResult(allDiagnostics);
+}
+
+export function watchMode(
+    project: string, options: api.CompilerOptions, consoleError: (s: string) => void) {
+  return performWatchCompilation(createPerformWatchHost(project, diagnostics => {
+    consoleError(formatDiagnostics(diagnostics));
+  }, options, options => createEmitCallback(options)));
+}
+
+// CLI entry point
+if (require.main === module) {
+  const args = process.argv.slice(2);
+  process.exitCode = main(args);
+}
diff --git a/packages/compiler-cli/src/metadata/bundle_index_host.ts b/packages/compiler-cli/src/metadata/bundle_index_host.ts
new file mode 100644
index 000000000000..17c5bda20674
--- /dev/null
+++ b/packages/compiler-cli/src/metadata/bundle_index_host.ts
@@ -0,0 +1,130 @@
+/**
+ * @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 fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {CompilerOptions} from '../transformers/api';
+import {MetadataCache} from '../transformers/metadata_cache';
+
+import {CompilerHostAdapter, MetadataBundler} from './bundler';
+import {privateEntriesToIndex} from './index_writer';
+
+const DTS = /\.d\.ts$/;
+const JS_EXT = /(\.js|)$/;
+
+function createSyntheticIndexHost<H extends ts.CompilerHost>(
+    delegate: H, syntheticIndex: {name: string, content: string, getMetadata: () => string}): H {
+  const normalSyntheticIndexName = path.normalize(syntheticIndex.name);
+
+  const newHost = Object.create(delegate);
+  newHost.fileExists = (fileName: string): boolean => {
+    return path.normalize(fileName) == normalSyntheticIndexName || delegate.fileExists(fileName);
+  };
+
+  newHost.readFile = (fileName: string) => {
+    return path.normalize(fileName) == normalSyntheticIndexName ? syntheticIndex.content :
+                                                                  delegate.readFile(fileName);
+  };
+
+  newHost.getSourceFile =
+      (fileName: string, languageVersion: ts.ScriptTarget, onError?: (message: string) => void) => {
+        if (path.normalize(fileName) == normalSyntheticIndexName) {
+          const sf = ts.createSourceFile(fileName, syntheticIndex.content, languageVersion, true);
+          if ((delegate as any).fileNameToModuleName) {
+            sf.moduleName = (delegate as any).fileNameToModuleName(fileName);
+          }
+          return sf;
+        }
+        return delegate.getSourceFile(fileName, languageVersion, onError);
+      };
+
+  newHost.writeFile =
+      (fileName: string, data: string, writeByteOrderMark: boolean,
+       onError: ((message: string) => void) | undefined,
+       sourceFiles: Readonly<ts.SourceFile>[]) => {
+        delegate.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
+        if (fileName.match(DTS) && sourceFiles && sourceFiles.length == 1 &&
+            path.normalize(sourceFiles[0].fileName) === normalSyntheticIndexName) {
+          // If we are writing the synthetic index, write the metadata along side.
+          const metadataName = fileName.replace(DTS, '.metadata.json');
+          const indexMetadata = syntheticIndex.getMetadata();
+          delegate.writeFile(metadataName, indexMetadata, writeByteOrderMark, onError, []);
+        }
+      };
+  return newHost;
+}
+
+export function createBundleIndexHost<H extends ts.CompilerHost>(
+    ngOptions: CompilerOptions, rootFiles: ReadonlyArray<string>, host: H,
+    getMetadataCache: () =>
+        MetadataCache): {host: H, indexName?: string, errors?: ts.Diagnostic[]} {
+  const files = rootFiles.filter(f => !DTS.test(f));
+  let indexFile: string|undefined;
+  if (files.length === 1) {
+    indexFile = files[0];
+  } else {
+    for (const f of files) {
+      // Assume the shortest file path called index.ts is the entry point
+      if (f.endsWith(path.sep + 'index.ts')) {
+        if (!indexFile || indexFile.length > f.length) {
+          indexFile = f;
+        }
+      }
+    }
+  }
+  if (!indexFile) {
+    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 indexModule = indexFile.replace(/\.ts$/, '');
+
+  // The operation of producing a metadata bundle happens twice - once during setup and once during
+  // the emit phase. The first time, the bundle is produced without a metadata cache, to compute the
+  // contents of the flat module index. The bundle produced during emit does use the metadata cache
+  // with associated transforms, so the metadata will have lowered expressions, resource inlining,
+  // etc.
+  const getMetadataBundle = (cache: MetadataCache | null) => {
+    const bundler = new MetadataBundler(
+        indexModule, ngOptions.flatModuleId, new CompilerHostAdapter(host, cache, ngOptions),
+        ngOptions.flatModulePrivateSymbolPrefix);
+    return bundler.getMetadataBundle();
+  };
+
+  // First, produce the bundle with no MetadataCache.
+  const metadataBundle = getMetadataBundle(/* MetadataCache */ null);
+  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 = createSyntheticIndexHost(host, {
+    name,
+    content,
+    getMetadata: () => {
+      // The second metadata bundle production happens on-demand, and uses the getMetadataCache
+      // closure to retrieve an up-to-date MetadataCache which is configured with whatever metadata
+      // transforms were used to produce the JS output.
+      const metadataBundle = getMetadataBundle(getMetadataCache());
+      return JSON.stringify(metadataBundle.metadata);
+    }
+  });
+  return {host, indexName: name};
+}
diff --git a/packages/compiler-cli/src/metadata/bundler.ts b/packages/compiler-cli/src/metadata/bundler.ts
new file mode 100644
index 000000000000..d071bc7768b0
--- /dev/null
+++ b/packages/compiler-cli/src/metadata/bundler.ts
@@ -0,0 +1,658 @@
+/**
+ * @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 path from 'path';
+import * as ts from 'typescript';
+
+import {MetadataCollector} from '../metadata/collector';
+import {ClassMetadata, ConstructorMetadata, FunctionMetadata, METADATA_VERSION, MemberMetadata, MetadataEntry, MetadataError, MetadataImportedSymbolReferenceExpression, MetadataMap, MetadataObject, MetadataSymbolicExpression, MetadataSymbolicReferenceExpression, MetadataValue, MethodMetadata, ModuleExportMetadata, ModuleMetadata, isClassMetadata, isConstructorMetadata, isFunctionMetadata, isInterfaceMetadata, isMetadataError, isMetadataGlobalReferenceExpression, isMetadataImportedSymbolReferenceExpression, isMetadataModuleReferenceExpression, isMetadataSymbolicExpression, isMethodMetadata} from '../metadata/schema';
+import {MetadataCache} from '../transformers/metadata_cache';
+
+
+
+// The character set used to produce private names.
+const PRIVATE_NAME_CHARS = 'abcdefghijklmnopqrstuvwxyz';
+
+interface Symbol {
+  module: string;
+  name: string;
+
+  // Produced by indirectly by exportAll() for symbols re-export another symbol.
+  exports?: Symbol;
+
+  // Produced by indirectly by exportAll() for symbols are re-exported by another symbol.
+  reexportedAs?: Symbol;
+
+  // Produced by canonicalizeSymbols() for all symbols. A symbol is private if it is not
+  // exported by the index.
+  isPrivate?: boolean;
+
+  // Produced by canonicalizeSymbols() for all symbols. This is the one symbol that
+  // respresents all other symbols and is the only symbol that, among all the re-exported
+  // aliases, whose fields can be trusted to contain the correct information.
+  // For private symbols this is the declaration symbol. For public symbols this is the
+  // symbol that is exported.
+  canonicalSymbol?: Symbol;
+
+  // Produced by canonicalizeSymbols() for all symbols. This the symbol that originally
+  // declared the value and should be used to fetch the value.
+  declaration?: Symbol;
+
+  // A symbol is referenced if it is exported from index or referenced by the value of
+  // 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;
+
+  // Only valid for referenced private symbols. It is the name to use to import the symbol from
+  // the bundle index. Produce by assignPrivateNames();
+  privateName?: string;
+}
+
+export interface BundleEntries { [name: string]: MetadataEntry; }
+
+export interface BundlePrivateEntry {
+  privateName: string;
+  name: string;
+  module: string;
+}
+
+export interface BundledModule {
+  metadata: ModuleMetadata;
+  privates: BundlePrivateEntry[];
+}
+
+export interface MetadataBundlerHost {
+  getMetadataFor(moduleName: string, containingFile: string): ModuleMetadata|undefined;
+}
+
+type StaticsMetadata = {
+  [name: string]: MetadataValue | FunctionMetadata;
+};
+
+export class MetadataBundler {
+  private symbolMap = new Map<string, Symbol>();
+  private metadataCache = new Map<string, ModuleMetadata|undefined>();
+  private exports = new Map<string, Symbol[]>();
+  private rootModule: string;
+  private privateSymbolPrefix: string;
+  // TODO(issue/24571): remove '!'.
+  private exported !: Set<Symbol>;
+
+  constructor(
+      private root: string, private importAs: string|undefined, private host: MetadataBundlerHost,
+      privateSymbolPrefix?: string) {
+    this.rootModule = `./${path.basename(root)}`;
+    this.privateSymbolPrefix = (privateSymbolPrefix || '').replace(/\W/g, '_');
+  }
+
+  getMetadataBundle(): BundledModule {
+    // Export the root module. This also collects the transitive closure of all values referenced by
+    // the exports.
+    const exportedSymbols = this.exportAll(this.rootModule);
+    this.canonicalizeSymbols(exportedSymbols);
+    // TODO: exports? e.g. a module re-exports a symbol from another bundle
+    const metadata = this.getEntries(exportedSymbols);
+    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
+                              }));
+    const origins = Array.from(this.symbolMap.values())
+                        .filter(s => s.referenced && !s.reexport)
+                        .reduce<{[name: string]: string}>((p, s) => {
+                          p[s.isPrivate ? s.privateName ! : s.name] = s.declaration !.module;
+                          return p;
+                        }, {});
+    const exports = this.getReExports(exportedSymbols);
+    return {
+      metadata: {
+        __symbolic: 'module',
+        version: METADATA_VERSION,
+        exports: exports.length ? exports : undefined, metadata, origins,
+        importAs: this.importAs !
+      },
+      privates
+    };
+  }
+
+  static resolveModule(importName: string, from: string): string {
+    return resolveModule(importName, from);
+  }
+
+  private getMetadata(moduleName: string): ModuleMetadata|undefined {
+    let result = this.metadataCache.get(moduleName);
+    if (!result) {
+      if (moduleName.startsWith('.')) {
+        const fullModuleName = resolveModule(moduleName, this.root);
+        result = this.host.getMetadataFor(fullModuleName, this.root);
+      }
+      this.metadataCache.set(moduleName, result);
+    }
+    return result;
+  }
+
+  private exportAll(moduleName: string): Symbol[] {
+    const module = this.getMetadata(moduleName);
+    let result = this.exports.get(moduleName);
+
+    if (result) {
+      return result;
+    }
+
+    result = [];
+
+    const exportSymbol = (exportedSymbol: Symbol, exportAs: string) => {
+      const symbol = this.symbolOf(moduleName, exportAs);
+      result !.push(symbol);
+      exportedSymbol.reexportedAs = symbol;
+      symbol.exports = exportedSymbol;
+    };
+
+    // Export all the symbols defined in this module.
+    if (module && module.metadata) {
+      for (let key in module.metadata) {
+        const data = module.metadata[key];
+        if (isMetadataImportedSymbolReferenceExpression(data)) {
+          // This is a re-export of an imported symbol. Record this as a re-export.
+          const exportFrom = resolveModule(data.module, moduleName);
+          this.exportAll(exportFrom);
+          const symbol = this.symbolOf(exportFrom, data.name);
+          exportSymbol(symbol, key);
+        } else {
+          // Record that this symbol is exported by this module.
+          result.push(this.symbolOf(moduleName, key));
+        }
+      }
+    }
+
+    // Export all the re-exports from this module
+    if (module && module.exports) {
+      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.
+        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 {
+          // Re-export all the symbols from the module
+          const exportedSymbols = this.exportAll(exportFrom);
+          for (const exportedSymbol of exportedSymbols) {
+            const name = exportedSymbol.name;
+            exportSymbol(exportedSymbol, name);
+          }
+        }
+      }
+    }
+
+    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;
+  }
+
+  /**
+   * Fill in the canonicalSymbol which is the symbol that should be imported by factories.
+   * The canonical symbol is the one exported by the index file for the bundle or definition
+   * symbol for private symbols that are not exported by bundle index.
+   */
+  private canonicalizeSymbols(exportedSymbols: Symbol[]) {
+    const symbols = Array.from(this.symbolMap.values());
+    this.exported = new Set(exportedSymbols);
+    symbols.forEach(this.canonicalizeSymbol, this);
+  }
+
+  private canonicalizeSymbol(symbol: Symbol) {
+    const rootExport = getRootExport(symbol);
+    const declaration = getSymbolDeclaration(symbol);
+    const isPrivate = !this.exported.has(rootExport);
+    const canonicalSymbol = isPrivate ? declaration : rootExport;
+    symbol.isPrivate = isPrivate;
+    symbol.declaration = declaration;
+    symbol.canonicalSymbol = canonicalSymbol;
+    symbol.reexport = declaration.reexport;
+  }
+
+  private getEntries(exportedSymbols: Symbol[]): BundleEntries {
+    const result: BundleEntries = {};
+
+    const exportedNames = new Set(exportedSymbols.map(s => s.name));
+    let privateName = 0;
+
+    function newPrivateName(prefix: string): string {
+      while (true) {
+        let digits: string[] = [];
+        let index = privateName++;
+        let base = PRIVATE_NAME_CHARS;
+        while (!digits.length || index > 0) {
+          digits.unshift(base[index % base.length]);
+          index = Math.floor(index / base.length);
+        }
+        const result = `\u0275${prefix}${digits.join('')}`;
+        if (!exportedNames.has(result)) return result;
+      }
+    }
+
+    exportedSymbols.forEach(symbol => this.convertSymbol(symbol));
+
+    const symbolsMap = new Map<string, string[]>();
+    Array.from(this.symbolMap.values()).forEach(symbol => {
+      if (symbol.referenced && !symbol.reexport) {
+        let name = symbol.name;
+        const identifier = `${symbol.declaration!.module}:${symbol.declaration !.name}`;
+        if (symbol.isPrivate && !symbol.privateName) {
+          name = newPrivateName(this.privateSymbolPrefix);
+          symbol.privateName = name;
+        }
+        if (symbolsMap.has(identifier)) {
+          const names = symbolsMap.get(identifier);
+          names !.push(name);
+        } else {
+          symbolsMap.set(identifier, [name]);
+        }
+        result[name] = symbol.value !;
+      }
+    });
+
+    // check for duplicated entries
+    symbolsMap.forEach((names: string[], identifier: string) => {
+      if (names.length > 1) {
+        const [module, declaredName] = identifier.split(':');
+        // prefer the export that uses the declared name (if any)
+        let reference = names.indexOf(declaredName);
+        if (reference === -1) {
+          reference = 0;
+        }
+
+        // keep one entry and replace the others by references
+        names.forEach((name: string, i: number) => {
+          if (i !== reference) {
+            result[name] = {__symbolic: 'reference', name: names[reference]};
+          }
+        });
+      }
+    });
+
+    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 guaranteed 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) {
+    // canonicalSymbol is ensured to be defined before this is called.
+    const canonicalSymbol = symbol.canonicalSymbol !;
+
+    if (!canonicalSymbol.referenced) {
+      canonicalSymbol.referenced = true;
+      // 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];
+        if (value && !declaration.name.startsWith('___')) {
+          canonicalSymbol.value = this.convertEntry(declaration.module, value);
+        }
+      }
+    }
+  }
+
+  private convertEntry(moduleName: string, value: MetadataEntry): MetadataEntry {
+    if (isClassMetadata(value)) {
+      return this.convertClass(moduleName, value);
+    }
+    if (isFunctionMetadata(value)) {
+      return this.convertFunction(moduleName, value);
+    }
+    if (isInterfaceMetadata(value)) {
+      return value;
+    }
+    return this.convertValue(moduleName, value);
+  }
+
+  private convertClass(moduleName: string, value: ClassMetadata): ClassMetadata {
+    return {
+      __symbolic: 'class',
+      arity: value.arity,
+      extends: this.convertExpression(moduleName, value.extends) !,
+      decorators:
+          value.decorators && value.decorators.map(d => this.convertExpression(moduleName, d) !),
+      members: this.convertMembers(moduleName, value.members !),
+      statics: value.statics && this.convertStatics(moduleName, value.statics)
+    };
+  }
+
+  private convertMembers(moduleName: string, members: MetadataMap): MetadataMap {
+    const result: MetadataMap = {};
+    for (const name in members) {
+      const value = members[name];
+      result[name] = value.map(v => this.convertMember(moduleName, v));
+    }
+    return result;
+  }
+
+  private convertMember(moduleName: string, member: MemberMetadata) {
+    const result: MemberMetadata = {__symbolic: member.__symbolic};
+    result.decorators =
+        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) !));
+      if (isConstructorMetadata(member)) {
+        if (member.parameters) {
+          (result as ConstructorMetadata).parameters =
+              member.parameters.map(p => this.convertExpression(moduleName, p));
+        }
+      }
+    }
+    return result;
+  }
+
+  private convertStatics(moduleName: string, statics: StaticsMetadata): StaticsMetadata {
+    let result: StaticsMetadata = {};
+    for (const key in statics) {
+      const value = statics[key];
+      result[key] = isFunctionMetadata(value) ? this.convertFunction(moduleName, value) : value;
+    }
+    return result;
+  }
+
+  private convertFunction(moduleName: string, value: FunctionMetadata): FunctionMetadata {
+    return {
+      __symbolic: 'function',
+      parameters: value.parameters,
+      defaults: value.defaults && value.defaults.map(v => this.convertValue(moduleName, v)),
+      value: this.convertValue(moduleName, value.value)
+    };
+  }
+
+  private convertValue(moduleName: string, value: MetadataValue): MetadataValue {
+    if (isPrimitive(value)) {
+      return value;
+    }
+    if (isMetadataError(value)) {
+      return this.convertError(moduleName, value);
+    }
+    if (isMetadataSymbolicExpression(value)) {
+      return this.convertExpression(moduleName, value) !;
+    }
+    if (Array.isArray(value)) {
+      return value.map(v => this.convertValue(moduleName, v));
+    }
+
+    // Otherwise it is a metadata object.
+    const object = value as MetadataObject;
+    const result: MetadataObject = {};
+    for (const key in object) {
+      result[key] = this.convertValue(moduleName, object[key]);
+    }
+    return result;
+  }
+
+  private convertExpression(
+      moduleName: string, value: MetadataSymbolicExpression|MetadataError|null|
+      undefined): MetadataSymbolicExpression|MetadataError|undefined|null {
+    if (value) {
+      switch (value.__symbolic) {
+        case 'error':
+          return this.convertError(moduleName, value as MetadataError);
+        case 'reference':
+          return this.convertReference(moduleName, value as MetadataSymbolicReferenceExpression);
+        default:
+          return this.convertExpressionNode(moduleName, value);
+      }
+    }
+    return value;
+  }
+
+  private convertError(module: string, value: MetadataError): MetadataError {
+    return {
+      __symbolic: 'error',
+      message: value.message,
+      line: value.line,
+      character: value.character,
+      context: value.context, module
+    };
+  }
+
+  private convertReference(moduleName: string, value: MetadataSymbolicReferenceExpression):
+      MetadataSymbolicReferenceExpression|MetadataError|undefined {
+    const createReference = (symbol: Symbol): MetadataSymbolicReferenceExpression => {
+      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.
+        this.convertSymbol(symbol);
+        return {
+          __symbolic: 'reference',
+          get name() {
+            // Resolved lazily because private names are assigned late.
+            const canonicalSymbol = symbol.canonicalSymbol !;
+            if (canonicalSymbol.isPrivate == null) {
+              throw Error('Invalid state: isPrivate was not initialized');
+            }
+            return canonicalSymbol.isPrivate ? canonicalSymbol.privateName ! : canonicalSymbol.name;
+          }
+        };
+      } else {
+        // The symbol was a re-exported symbol from another module. Return a reference to the
+        // original imported symbol.
+        return {__symbolic: 'reference', name: declaration.name, module: declaration.module};
+      }
+    };
+
+    if (isMetadataGlobalReferenceExpression(value)) {
+      const metadata = this.getMetadata(moduleName);
+      if (metadata && metadata.metadata && metadata.metadata[value.name]) {
+        // Reference to a symbol defined in the module
+        return createReference(this.canonicalSymbolOf(moduleName, value.name));
+      }
+
+      // If a reference has arguments, the arguments need to be converted.
+      if (value.arguments) {
+        return {
+          __symbolic: 'reference',
+          name: value.name,
+          arguments: value.arguments.map(a => this.convertValue(moduleName, a))
+        };
+      }
+
+      // Global references without arguments (such as to Math or JSON) are unmodified.
+      return value;
+    }
+
+    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
+      // 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.
+        const referencedModule = resolveModule(value.module, moduleName);
+        const referencedName = value.name;
+        return createReference(this.canonicalSymbolOf(referencedModule, referencedName));
+      }
+
+      // 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.
+        return {
+          __symbolic: 'reference',
+          name: value.name,
+          module: value.module,
+          arguments: value.arguments.map(a => this.convertValue(moduleName, a))
+        };
+      }
+      return value;
+    }
+
+    if (isMetadataModuleReferenceExpression(value)) {
+      // Cannot support references to bundled modules as the internal modules of a bundle are erased
+      // by the bundler.
+      if (value.module.startsWith('.')) {
+        return {
+          __symbolic: 'error',
+          message: 'Unsupported bundled module reference',
+          context: {module: value.module}
+        };
+      }
+
+      // References to unbundled modules are unmodified.
+      return value;
+    }
+  }
+
+  private convertExpressionNode(moduleName: string, value: MetadataSymbolicExpression):
+      MetadataSymbolicExpression {
+    const result: MetadataSymbolicExpression = { __symbolic: value.__symbolic } as any;
+    for (const key in value) {
+      (result as any)[key] = this.convertValue(moduleName, (value as any)[key]);
+    }
+    return result;
+  }
+
+  private symbolOf(module: string, name: string): Symbol {
+    const symbolKey = `${module}:${name}`;
+    let symbol = this.symbolMap.get(symbolKey);
+    if (!symbol) {
+      symbol = {module, name};
+      this.symbolMap.set(symbolKey, symbol);
+    }
+    return symbol;
+  }
+
+  private canonicalSymbolOf(module: string, name: string): Symbol {
+    // Ensure the module has been seen.
+    this.exportAll(module);
+    const symbol = this.symbolOf(module, name);
+    if (!symbol.canonicalSymbol) {
+      this.canonicalizeSymbol(symbol);
+    }
+    return symbol;
+  }
+}
+
+export class CompilerHostAdapter implements MetadataBundlerHost {
+  private collector = new MetadataCollector();
+
+  constructor(
+      private host: ts.CompilerHost, private cache: MetadataCache|null,
+      private options: ts.CompilerOptions) {}
+
+  getMetadataFor(fileName: string, containingFile: string): ModuleMetadata|undefined {
+    const {resolvedModule} =
+        ts.resolveModuleName(fileName, containingFile, this.options, this.host);
+
+    let sourceFile: ts.SourceFile|undefined;
+    if (resolvedModule) {
+      let {resolvedFileName} = resolvedModule;
+      if (resolvedModule.extension !== '.ts') {
+        resolvedFileName = resolvedFileName.replace(/(\.d\.ts|\.js)$/, '.ts');
+      }
+      sourceFile = this.host.getSourceFile(resolvedFileName, ts.ScriptTarget.Latest);
+    } else {
+      // If typescript is unable to resolve the file, fallback on old behavior
+      if (!this.host.fileExists(fileName + '.ts')) return undefined;
+      sourceFile = this.host.getSourceFile(fileName + '.ts', ts.ScriptTarget.Latest);
+    }
+
+    // If there is a metadata cache, use it to get the metadata for this source file. Otherwise,
+    // fall back on the locally created MetadataCollector.
+    if (!sourceFile) {
+      return undefined;
+    } else if (this.cache) {
+      return this.cache.getMetadata(sourceFile);
+    } else {
+      return this.collector.getMetadata(sourceFile);
+    }
+  }
+}
+
+function resolveModule(importName: string, from: string): string {
+  if (importName.startsWith('.') && from) {
+    let normalPath = path.normalize(path.join(path.dirname(from), importName));
+    if (!normalPath.startsWith('.') && from.startsWith('.')) {
+      // path.normalize() preserves leading '../' but not './'. This adds it back.
+      normalPath = `.${path.sep}${normalPath}`;
+    }
+    // Replace windows path delimiters with forward-slashes. Otherwise the paths are not
+    // TypeScript compatible when building the bundle.
+    return normalPath.replace(/\\/g, '/');
+  }
+  return importName;
+}
+
+function isPrimitive(o: any): o is boolean|string|number {
+  return o === null || (typeof o !== 'function' && typeof o !== 'object');
+}
+
+function getRootExport(symbol: Symbol): Symbol {
+  return symbol.reexportedAs ? getRootExport(symbol.reexportedAs) : symbol;
+}
+
+function getSymbolDeclaration(symbol: Symbol): Symbol {
+  return symbol.exports ? getSymbolDeclaration(symbol.exports) : symbol;
+}
diff --git a/packages/compiler-cli/src/metadata/collector.ts b/packages/compiler-cli/src/metadata/collector.ts
new file mode 100644
index 000000000000..bb57a773067c
--- /dev/null
+++ b/packages/compiler-cli/src/metadata/collector.ts
@@ -0,0 +1,770 @@
+/**
+ * @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 ts from 'typescript';
+
+import {Evaluator, errorSymbol, recordMapEntry} from './evaluator';
+import {ClassMetadata, ConstructorMetadata, FunctionMetadata, InterfaceMetadata, METADATA_VERSION, MemberMetadata, MetadataEntry, MetadataError, MetadataMap, MetadataSymbolicBinaryExpression, MetadataSymbolicCallExpression, MetadataSymbolicExpression, MetadataSymbolicIfExpression, MetadataSymbolicIndexExpression, MetadataSymbolicPrefixExpression, MetadataSymbolicReferenceExpression, MetadataSymbolicSelectExpression, MetadataSymbolicSpreadExpression, MetadataValue, MethodMetadata, ModuleExportMetadata, ModuleMetadata, isClassMetadata, isConstructorMetadata, isFunctionMetadata, isMetadataError, isMetadataGlobalReferenceExpression, isMetadataImportDefaultReference, isMetadataImportedSymbolReferenceExpression, isMetadataSymbolicExpression, isMetadataSymbolicReferenceExpression, isMetadataSymbolicSelectExpression, isMethodMetadata} from './schema';
+import {Symbols} from './symbols';
+
+const isStatic = (node: ts.Node) => ts.getCombinedModifierFlags(node) & ts.ModifierFlags.Static;
+
+/**
+ * A set of collector options to use when collecting metadata.
+ */
+export interface CollectorOptions {
+  /**
+   * Version of the metadata to collect.
+   */
+  version?: number;
+
+  /**
+   * Collect a hidden field "$quoted$" in objects literals that record when the key was quoted in
+   * the source.
+   */
+  quotedNames?: boolean;
+
+  /**
+   * Do not simplify invalid expressions.
+   */
+  verboseInvalidExpression?: boolean;
+
+  /**
+   * An expression substitution callback.
+   */
+  substituteExpression?: (value: MetadataValue, node: ts.Node) => MetadataValue;
+}
+
+/**
+ * Collect decorator metadata from a TypeScript module.
+ */
+export class MetadataCollector {
+  constructor(private options: CollectorOptions = {}) {}
+
+  /**
+   * 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,
+      substituteExpression?: (value: MetadataValue, node: ts.Node) => MetadataValue): ModuleMetadata
+      |undefined {
+    const locals = new Symbols(sourceFile);
+    const nodeMap =
+        new Map<MetadataValue|ClassMetadata|InterfaceMetadata|FunctionMetadata, ts.Node>();
+    const composedSubstituter = substituteExpression && this.options.substituteExpression ?
+        (value: MetadataValue, node: ts.Node) =>
+            this.options.substituteExpression !(substituteExpression(value, node), node) :
+        substituteExpression;
+    const evaluatorOptions = substituteExpression ?
+        {...this.options, substituteExpression: composedSubstituter} :
+        this.options;
+    let metadata: {[name: string]: MetadataValue | ClassMetadata | FunctionMetadata}|undefined;
+    const evaluator = new Evaluator(locals, nodeMap, evaluatorOptions, (name, value) => {
+      if (!metadata) metadata = {};
+      metadata[name] = value;
+    });
+    let exports: ModuleExportMetadata[]|undefined = undefined;
+
+    function objFromDecorator(decoratorNode: ts.Decorator): MetadataSymbolicExpression {
+      return <MetadataSymbolicExpression>evaluator.evaluateNode(decoratorNode.expression);
+    }
+
+    function recordEntry<T extends MetadataEntry>(entry: T, node: ts.Node): T {
+      if (composedSubstituter) {
+        entry = composedSubstituter(entry as MetadataValue, node) as T;
+      }
+      return recordMapEntry(entry, node, nodeMap, sourceFile);
+    }
+
+    function errorSym(
+        message: string, node?: ts.Node, context?: {[name: string]: string}): MetadataError {
+      return errorSymbol(message, node, context, sourceFile);
+    }
+
+    function maybeGetSimpleFunction(
+        functionDeclaration: ts.FunctionDeclaration |
+        ts.MethodDeclaration): {func: FunctionMetadata, name: string}|undefined {
+      if (functionDeclaration.name && functionDeclaration.name.kind == ts.SyntaxKind.Identifier) {
+        const nameNode = <ts.Identifier>functionDeclaration.name;
+        const functionName = nameNode.text;
+        const functionBody = functionDeclaration.body;
+        if (functionBody && functionBody.statements.length == 1) {
+          const statement = functionBody.statements[0];
+          if (statement.kind === ts.SyntaxKind.ReturnStatement) {
+            const returnStatement = <ts.ReturnStatement>statement;
+            if (returnStatement.expression) {
+              const func: FunctionMetadata = {
+                __symbolic: 'function',
+                parameters: namesOf(functionDeclaration.parameters),
+                value: evaluator.evaluateNode(returnStatement.expression)
+              };
+              if (functionDeclaration.parameters.some(p => p.initializer != null)) {
+                func.defaults = functionDeclaration.parameters.map(
+                    p => p.initializer && evaluator.evaluateNode(p.initializer));
+              }
+              return recordEntry({func, name: functionName}, functionDeclaration);
+            }
+          }
+        }
+      }
+    }
+
+    function classMetadataOf(classDeclaration: ts.ClassDeclaration): ClassMetadata {
+      const result: ClassMetadata = {__symbolic: 'class'};
+
+      function getDecorators(decorators: ReadonlyArray<ts.Decorator>| undefined):
+          MetadataSymbolicExpression[]|undefined {
+        if (decorators && decorators.length)
+          return decorators.map(decorator => objFromDecorator(decorator));
+        return undefined;
+      }
+
+      function referenceFrom(node: ts.Node): MetadataSymbolicReferenceExpression|MetadataError|
+          MetadataSymbolicSelectExpression {
+        const result = evaluator.evaluateNode(node);
+        if (isMetadataError(result) || isMetadataSymbolicReferenceExpression(result) ||
+            isMetadataSymbolicSelectExpression(result)) {
+          return result;
+        } else {
+          return errorSym('Symbol reference expected', node);
+        }
+      }
+
+      // Add class parents
+      if (classDeclaration.heritageClauses) {
+        classDeclaration.heritageClauses.forEach((hc) => {
+          if (hc.token === ts.SyntaxKind.ExtendsKeyword && hc.types) {
+            hc.types.forEach(type => result.extends = referenceFrom(type.expression));
+          }
+        });
+      }
+
+      // Add arity if the type is generic
+      const typeParameters = classDeclaration.typeParameters;
+      if (typeParameters && typeParameters.length) {
+        result.arity = typeParameters.length;
+      }
+
+      // Add class decorators
+      if (classDeclaration.decorators) {
+        result.decorators = getDecorators(classDeclaration.decorators);
+      }
+
+      // member decorators
+      let members: MetadataMap|null = null;
+      function recordMember(name: string, metadata: MemberMetadata) {
+        if (!members) members = {};
+        const data = members.hasOwnProperty(name) ? members[name] : [];
+        data.push(metadata);
+        members[name] = data;
+      }
+
+      // static member
+      let statics: {[name: string]: MetadataValue | FunctionMetadata}|null = null;
+      function recordStaticMember(name: string, value: MetadataValue | FunctionMetadata) {
+        if (!statics) statics = {};
+        statics[name] = value;
+      }
+
+      for (const member of classDeclaration.members) {
+        let isConstructor = false;
+        switch (member.kind) {
+          case ts.SyntaxKind.Constructor:
+          case ts.SyntaxKind.MethodDeclaration:
+            isConstructor = member.kind === ts.SyntaxKind.Constructor;
+            const method = <ts.MethodDeclaration|ts.ConstructorDeclaration>member;
+            if (isStatic(method)) {
+              const maybeFunc = maybeGetSimpleFunction(<ts.MethodDeclaration>method);
+              if (maybeFunc) {
+                recordStaticMember(maybeFunc.name, maybeFunc.func);
+              }
+              continue;
+            }
+            const methodDecorators = getDecorators(method.decorators);
+            const parameters = method.parameters;
+            const parameterDecoratorData:
+                ((MetadataSymbolicExpression | MetadataError)[] | undefined)[] = [];
+            const parametersData:
+                (MetadataSymbolicReferenceExpression | MetadataError |
+                 MetadataSymbolicSelectExpression | null)[] = [];
+            let hasDecoratorData: boolean = false;
+            let hasParameterData: boolean = false;
+            for (const parameter of parameters) {
+              const parameterData = getDecorators(parameter.decorators);
+              parameterDecoratorData.push(parameterData);
+              hasDecoratorData = hasDecoratorData || !!parameterData;
+              if (isConstructor) {
+                if (parameter.type) {
+                  parametersData.push(referenceFrom(parameter.type));
+                } else {
+                  parametersData.push(null);
+                }
+                hasParameterData = true;
+              }
+            }
+            const data: MethodMetadata = {__symbolic: isConstructor ? 'constructor' : 'method'};
+            const name = isConstructor ? '__ctor__' : evaluator.nameOf(member.name);
+            if (methodDecorators) {
+              data.decorators = methodDecorators;
+            }
+            if (hasDecoratorData) {
+              data.parameterDecorators = parameterDecoratorData;
+            }
+            if (hasParameterData) {
+              (<ConstructorMetadata>data).parameters = parametersData;
+            }
+            if (!isMetadataError(name)) {
+              recordMember(name, data);
+            }
+            break;
+          case ts.SyntaxKind.PropertyDeclaration:
+          case ts.SyntaxKind.GetAccessor:
+          case ts.SyntaxKind.SetAccessor:
+            const property = <ts.PropertyDeclaration>member;
+            if (isStatic(property)) {
+              const name = evaluator.nameOf(property.name);
+              if (!isMetadataError(name)) {
+                if (property.initializer) {
+                  const value = evaluator.evaluateNode(property.initializer);
+                  recordStaticMember(name, value);
+                } else {
+                  recordStaticMember(name, errorSym('Variable not initialized', property.name));
+                }
+              }
+            }
+            const propertyDecorators = getDecorators(property.decorators);
+            if (propertyDecorators) {
+              const name = evaluator.nameOf(property.name);
+              if (!isMetadataError(name)) {
+                recordMember(name, {__symbolic: 'property', decorators: propertyDecorators});
+              }
+            }
+            break;
+        }
+      }
+      if (members) {
+        result.members = members;
+      }
+      if (statics) {
+        result.statics = statics;
+      }
+
+      return recordEntry(result, classDeclaration);
+    }
+
+    // Collect all exported symbols from an exports clause.
+    const exportMap = new Map<string, string>();
+    ts.forEachChild(sourceFile, node => {
+      switch (node.kind) {
+        case ts.SyntaxKind.ExportDeclaration:
+          const exportDeclaration = <ts.ExportDeclaration>node;
+          const {moduleSpecifier, exportClause} = exportDeclaration;
+
+          if (!moduleSpecifier) {
+            // 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);
+            });
+          }
+      }
+    });
+
+    const isExport = (node: ts.Node) =>
+        sourceFile.isDeclarationFile || ts.getCombinedModifierFlags(node) & ts.ModifierFlags.Export;
+    const isExportedIdentifier = (identifier?: ts.Identifier) =>
+        identifier && exportMap.has(identifier.text);
+    const isExported =
+        (node: ts.FunctionDeclaration | ts.ClassDeclaration | ts.TypeAliasDeclaration |
+         ts.InterfaceDeclaration | ts.EnumDeclaration) =>
+            isExport(node) || isExportedIdentifier(node.name);
+    const exportedIdentifierName = (identifier?: ts.Identifier) =>
+        identifier && (exportMap.get(identifier.text) || identifier.text);
+    const exportedName =
+        (node: ts.FunctionDeclaration | ts.ClassDeclaration | ts.InterfaceDeclaration |
+         ts.TypeAliasDeclaration | ts.EnumDeclaration) => exportedIdentifierName(node.name);
+
+
+    // Pre-declare classes and functions
+    ts.forEachChild(sourceFile, node => {
+      switch (node.kind) {
+        case ts.SyntaxKind.ClassDeclaration:
+          const classDeclaration = <ts.ClassDeclaration>node;
+          if (classDeclaration.name) {
+            const className = classDeclaration.name.text;
+            if (isExported(classDeclaration)) {
+              locals.define(
+                  className, {__symbolic: 'reference', name: exportedName(classDeclaration)});
+            } else {
+              locals.define(
+                  className, errorSym('Reference to non-exported class', node, {className}));
+            }
+          }
+          break;
+
+        case ts.SyntaxKind.InterfaceDeclaration:
+          const interfaceDeclaration = <ts.InterfaceDeclaration>node;
+          if (interfaceDeclaration.name) {
+            const interfaceName = interfaceDeclaration.name.text;
+            // All references to interfaces should be converted to references to `any`.
+            locals.define(interfaceName, {__symbolic: 'reference', name: 'any'});
+          }
+          break;
+
+        case ts.SyntaxKind.FunctionDeclaration:
+          const functionDeclaration = <ts.FunctionDeclaration>node;
+          if (!isExported(functionDeclaration)) {
+            // Report references to this function as an error.
+            const nameNode = functionDeclaration.name;
+            if (nameNode && nameNode.text) {
+              locals.define(
+                  nameNode.text,
+                  errorSym(
+                      'Reference to a non-exported function', nameNode, {name: nameNode.text}));
+            }
+          }
+          break;
+      }
+    });
+
+    ts.forEachChild(sourceFile, node => {
+      switch (node.kind) {
+        case ts.SyntaxKind.ExportDeclaration:
+          // Record export declarations
+          const exportDeclaration = <ts.ExportDeclaration>node;
+          const {moduleSpecifier, exportClause} = exportDeclaration;
+
+          if (!moduleSpecifier) {
+            // no module specifier -> export {propName as name};
+            if (exportClause) {
+              exportClause.elements.forEach(spec => {
+                const name = spec.name.text;
+                // If the symbol was not already exported, export a reference since it is a
+                // reference to an import
+                if (!metadata || !metadata[name]) {
+                  const propNode = spec.propertyName || spec.name;
+                  const value: MetadataValue = evaluator.evaluateNode(propNode);
+                  if (!metadata) metadata = {};
+                  metadata[name] = recordEntry(value, node);
+                }
+              });
+            }
+          }
+
+          if (moduleSpecifier && moduleSpecifier.kind == ts.SyntaxKind.StringLiteral) {
+            // Ignore exports that don't have string literals as exports.
+            // This is allowed by the syntax but will be flagged as an error by the type checker.
+            const from = (<ts.StringLiteral>moduleSpecifier).text;
+            const moduleExport: ModuleExportMetadata = {from};
+            if (exportClause) {
+              moduleExport.export = exportClause.elements.map(
+                  spec => spec.propertyName ? {name: spec.propertyName.text, as: spec.name.text} :
+                                              spec.name.text);
+            }
+            if (!exports) exports = [];
+            exports.push(moduleExport);
+          }
+          break;
+        case ts.SyntaxKind.ClassDeclaration:
+          const classDeclaration = <ts.ClassDeclaration>node;
+          if (classDeclaration.name) {
+            if (isExported(classDeclaration)) {
+              const name = exportedName(classDeclaration);
+              if (name) {
+                if (!metadata) metadata = {};
+                metadata[name] = classMetadataOf(classDeclaration);
+              }
+            }
+          }
+          // Otherwise don't record metadata for the class.
+          break;
+
+        case ts.SyntaxKind.TypeAliasDeclaration:
+          const typeDeclaration = <ts.TypeAliasDeclaration>node;
+          if (typeDeclaration.name && isExported(typeDeclaration)) {
+            const name = exportedName(typeDeclaration);
+            if (name) {
+              if (!metadata) metadata = {};
+              metadata[name] = {__symbolic: 'interface'};
+            }
+          }
+          break;
+
+        case ts.SyntaxKind.InterfaceDeclaration:
+          const interfaceDeclaration = <ts.InterfaceDeclaration>node;
+          if (interfaceDeclaration.name && isExported(interfaceDeclaration)) {
+            const name = exportedName(interfaceDeclaration);
+            if (name) {
+              if (!metadata) metadata = {};
+              metadata[name] = {__symbolic: 'interface'};
+            }
+          }
+          break;
+
+        case ts.SyntaxKind.FunctionDeclaration:
+          // 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) && functionDeclaration.name) {
+            const name = exportedName(functionDeclaration);
+            const maybeFunc = maybeGetSimpleFunction(functionDeclaration);
+            if (name) {
+              if (!metadata) metadata = {};
+              metadata[name] =
+                  maybeFunc ? recordEntry(maybeFunc.func, node) : {__symbolic: 'function'};
+            }
+          }
+          break;
+
+        case ts.SyntaxKind.EnumDeclaration:
+          const enumDeclaration = <ts.EnumDeclaration>node;
+          if (isExported(enumDeclaration)) {
+            const enumValueHolder: {[name: string]: MetadataValue} = {};
+            const enumName = exportedName(enumDeclaration);
+            let nextDefaultValue: MetadataValue = 0;
+            let writtenMembers = 0;
+            for (const member of enumDeclaration.members) {
+              let enumValue: MetadataValue;
+              if (!member.initializer) {
+                enumValue = nextDefaultValue;
+              } else {
+                enumValue = evaluator.evaluateNode(member.initializer);
+              }
+              let name: string|undefined = undefined;
+              if (member.name.kind == ts.SyntaxKind.Identifier) {
+                const identifier = <ts.Identifier>member.name;
+                name = identifier.text;
+                enumValueHolder[name] = enumValue;
+                writtenMembers++;
+              }
+              if (typeof enumValue === 'number') {
+                nextDefaultValue = enumValue + 1;
+              } else if (name) {
+                nextDefaultValue = {
+                  __symbolic: 'binary',
+                  operator: '+',
+                  left: {
+                    __symbolic: 'select',
+                    expression: recordEntry({__symbolic: 'reference', name: enumName}, node), name
+                  }
+                };
+              } else {
+                nextDefaultValue =
+                    recordEntry(errorSym('Unsupported enum member name', member.name), node);
+              }
+            }
+            if (writtenMembers) {
+              if (enumName) {
+                if (!metadata) metadata = {};
+                metadata[enumName] = recordEntry(enumValueHolder, node);
+              }
+            }
+          }
+          break;
+
+        case ts.SyntaxKind.VariableStatement:
+          const variableStatement = <ts.VariableStatement>node;
+          for (const variableDeclaration of variableStatement.declarationList.declarations) {
+            if (variableDeclaration.name.kind == ts.SyntaxKind.Identifier) {
+              const nameNode = <ts.Identifier>variableDeclaration.name;
+              let varValue: MetadataValue;
+              if (variableDeclaration.initializer) {
+                varValue = evaluator.evaluateNode(variableDeclaration.initializer);
+              } else {
+                varValue = recordEntry(errorSym('Variable not initialized', nameNode), nameNode);
+              }
+              let exported = false;
+              if (isExport(variableStatement) || isExport(variableDeclaration) ||
+                  isExportedIdentifier(nameNode)) {
+                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));
+                } else {
+                  locals.define(
+                      nameNode.text,
+                      recordEntry(
+                          errorSym('Reference to a local symbol', nameNode, {name: nameNode.text}),
+                          node));
+                }
+              }
+            } else {
+              // Destructuring (or binding) declarations are not supported,
+              // var {<identifier>[, <identifier>]+} = <expression>;
+              //   or
+              // var [<identifier>[, <identifier}+] = <expression>;
+              // are not supported.
+              const report: (nameNode: ts.Node) => void = (nameNode: ts.Node) => {
+                switch (nameNode.kind) {
+                  case ts.SyntaxKind.Identifier:
+                    const name = <ts.Identifier>nameNode;
+                    const varValue = errorSym('Destructuring not supported', name);
+                    locals.define(name.text, varValue);
+                    if (isExport(node)) {
+                      if (!metadata) metadata = {};
+                      metadata[name.text] = varValue;
+                    }
+                    break;
+                  case ts.SyntaxKind.BindingElement:
+                    const bindingElement = <ts.BindingElement>nameNode;
+                    report(bindingElement.name);
+                    break;
+                  case ts.SyntaxKind.ObjectBindingPattern:
+                  case ts.SyntaxKind.ArrayBindingPattern:
+                    const bindings = <ts.BindingPattern>nameNode;
+                    (bindings as any).elements.forEach(report);
+                    break;
+                }
+              };
+              report(variableDeclaration.name);
+            }
+          }
+          break;
+      }
+    });
+
+    if (metadata || exports) {
+      if (!metadata)
+        metadata = {};
+      else if (strict) {
+        validateMetadata(sourceFile, nodeMap, metadata);
+      }
+      const result: ModuleMetadata = {
+        __symbolic: 'module',
+        version: this.options.version || METADATA_VERSION, metadata
+      };
+      if (sourceFile.moduleName) result.importAs = sourceFile.moduleName;
+      if (exports) result.exports = exports;
+      return result;
+    }
+  }
+}
+
+// This will throw if the metadata entry given contains an error node.
+function validateMetadata(
+    sourceFile: ts.SourceFile, nodeMap: Map<MetadataEntry, ts.Node>,
+    metadata: {[name: string]: MetadataEntry}) {
+  let locals: Set<string> = new Set(['Array', 'Object', 'Set', 'Map', 'string', 'number', 'any']);
+
+  function validateExpression(
+      expression: MetadataValue | MetadataSymbolicExpression | MetadataError) {
+    if (!expression) {
+      return;
+    } else if (Array.isArray(expression)) {
+      expression.forEach(validateExpression);
+    } else if (typeof expression === 'object' && !expression.hasOwnProperty('__symbolic')) {
+      Object.getOwnPropertyNames(expression).forEach(v => validateExpression((<any>expression)[v]));
+    } else if (isMetadataError(expression)) {
+      reportError(expression);
+    } else if (isMetadataGlobalReferenceExpression(expression)) {
+      if (!locals.has(expression.name)) {
+        const reference = <MetadataValue>metadata[expression.name];
+        if (reference) {
+          validateExpression(reference);
+        }
+      }
+    } else if (isFunctionMetadata(expression)) {
+      validateFunction(<any>expression);
+    } else if (isMetadataSymbolicExpression(expression)) {
+      switch (expression.__symbolic) {
+        case 'binary':
+          const binaryExpression = <MetadataSymbolicBinaryExpression>expression;
+          validateExpression(binaryExpression.left);
+          validateExpression(binaryExpression.right);
+          break;
+        case 'call':
+        case 'new':
+          const callExpression = <MetadataSymbolicCallExpression>expression;
+          validateExpression(callExpression.expression);
+          if (callExpression.arguments) callExpression.arguments.forEach(validateExpression);
+          break;
+        case 'index':
+          const indexExpression = <MetadataSymbolicIndexExpression>expression;
+          validateExpression(indexExpression.expression);
+          validateExpression(indexExpression.index);
+          break;
+        case 'pre':
+          const prefixExpression = <MetadataSymbolicPrefixExpression>expression;
+          validateExpression(prefixExpression.operand);
+          break;
+        case 'select':
+          const selectExpression = <MetadataSymbolicSelectExpression>expression;
+          validateExpression(selectExpression.expression);
+          break;
+        case 'spread':
+          const spreadExpression = <MetadataSymbolicSpreadExpression>expression;
+          validateExpression(spreadExpression.expression);
+          break;
+        case 'if':
+          const ifExpression = <MetadataSymbolicIfExpression>expression;
+          validateExpression(ifExpression.condition);
+          validateExpression(ifExpression.elseExpression);
+          validateExpression(ifExpression.thenExpression);
+          break;
+      }
+    }
+  }
+
+  function validateMember(classData: ClassMetadata, member: MemberMetadata) {
+    if (member.decorators) {
+      member.decorators.forEach(validateExpression);
+    }
+    if (isMethodMetadata(member) && member.parameterDecorators) {
+      member.parameterDecorators.forEach(validateExpression);
+    }
+    // Only validate parameters of classes for which we know that are used with our DI
+    if (classData.decorators && isConstructorMetadata(member) && member.parameters) {
+      member.parameters.forEach(validateExpression);
+    }
+  }
+
+  function validateClass(classData: ClassMetadata) {
+    if (classData.decorators) {
+      classData.decorators.forEach(validateExpression);
+    }
+    if (classData.members) {
+      Object.getOwnPropertyNames(classData.members)
+          .forEach(name => classData.members ![name].forEach((m) => validateMember(classData, m)));
+    }
+    if (classData.statics) {
+      Object.getOwnPropertyNames(classData.statics).forEach(name => {
+        const staticMember = classData.statics ![name];
+        if (isFunctionMetadata(staticMember)) {
+          validateExpression(staticMember.value);
+        } else {
+          validateExpression(staticMember);
+        }
+      });
+    }
+  }
+
+  function validateFunction(functionDeclaration: FunctionMetadata) {
+    if (functionDeclaration.value) {
+      const oldLocals = locals;
+      if (functionDeclaration.parameters) {
+        locals = new Set(oldLocals.values());
+        if (functionDeclaration.parameters)
+          functionDeclaration.parameters.forEach(n => locals.add(n));
+      }
+      validateExpression(functionDeclaration.value);
+      locals = oldLocals;
+    }
+  }
+
+  function shouldReportNode(node: ts.Node | undefined) {
+    if (node) {
+      const nodeStart = node.getStart();
+      return !(
+          node.pos != nodeStart &&
+          sourceFile.text.substring(node.pos, nodeStart).indexOf('@dynamic') >= 0);
+    }
+    return true;
+  }
+
+  function reportError(error: MetadataError) {
+    const node = nodeMap.get(error);
+    if (shouldReportNode(node)) {
+      const lineInfo = error.line != undefined ?
+          error.character != undefined ? `:${error.line + 1}:${error.character + 1}` :
+                                         `:${error.line + 1}` :
+          '';
+      throw new Error(
+          `${sourceFile.fileName}${lineInfo}: Metadata collected contains an error that will be reported at runtime: ${expandedMessage(error)}.\n  ${JSON.stringify(error)}`);
+    }
+  }
+
+  Object.getOwnPropertyNames(metadata).forEach(name => {
+    const entry = metadata[name];
+    try {
+      if (isClassMetadata(entry)) {
+        validateClass(entry);
+      }
+    } catch (e) {
+      const node = nodeMap.get(entry);
+      if (shouldReportNode(node)) {
+        if (node) {
+          const {line, character} = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+          throw new Error(
+              `${sourceFile.fileName}:${line + 1}:${character + 1}: Error encountered in metadata generated for exported symbol '${name}': \n ${e.message}`);
+        }
+        throw new Error(
+            `Error encountered in metadata generated for exported symbol ${name}: \n ${e.message}`);
+      }
+    }
+  });
+}
+
+// Collect parameter names from a function.
+function namesOf(parameters: ts.NodeArray<ts.ParameterDeclaration>): string[] {
+  const result: string[] = [];
+
+  function addNamesOf(name: ts.Identifier | ts.BindingPattern) {
+    if (name.kind == ts.SyntaxKind.Identifier) {
+      const identifier = <ts.Identifier>name;
+      result.push(identifier.text);
+    } else {
+      const bindingPattern = <ts.BindingPattern>name;
+      for (const element of bindingPattern.elements) {
+        const name = (element as any).name;
+        if (name) {
+          addNamesOf(name);
+        }
+      }
+    }
+  }
+
+  for (const parameter of parameters) {
+    addNamesOf(parameter.name);
+  }
+
+  return result;
+}
+
+function expandedMessage(error: any): string {
+  switch (error.message) {
+    case 'Reference to non-exported class':
+      if (error.context && error.context.className) {
+        return `Reference to a non-exported class ${error.context.className}. Consider exporting the class`;
+      }
+      break;
+    case 'Variable not initialized':
+      return 'Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler';
+    case 'Destructuring not supported':
+      return 'Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring';
+    case 'Could not resolve type':
+      if (error.context && error.context.typeName) {
+        return `Could not resolve type ${error.context.typeName}`;
+      }
+      break;
+    case 'Function call not supported':
+      let prefix =
+          error.context && error.context.name ? `Calling function '${error.context.name}', f` : 'F';
+      return prefix +
+          'unction calls are not supported. Consider replacing the function or lambda with a reference to an exported function';
+    case 'Reference to a local symbol':
+      if (error.context && error.context.name) {
+        return `Reference to a local (non-exported) symbol '${error.context.name}'. Consider exporting the symbol`;
+      }
+  }
+  return error.message;
+}
diff --git a/packages/compiler-cli/src/metadata/evaluator.ts b/packages/compiler-cli/src/metadata/evaluator.ts
new file mode 100644
index 000000000000..ede62060d88d
--- /dev/null
+++ b/packages/compiler-cli/src/metadata/evaluator.ts
@@ -0,0 +1,696 @@
+/**
+ * @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 ts from 'typescript';
+
+import {CollectorOptions} from './collector';
+import {ClassMetadata, FunctionMetadata, InterfaceMetadata, MetadataEntry, MetadataError, MetadataImportedSymbolReferenceExpression, MetadataSourceLocationInfo, MetadataSymbolicCallExpression, MetadataValue, isMetadataError, isMetadataGlobalReferenceExpression, isMetadataImportDefaultReference, isMetadataImportedSymbolReferenceExpression, isMetadataModuleReferenceExpression, isMetadataSymbolicReferenceExpression, isMetadataSymbolicSpreadExpression} from './schema';
+import {Symbols} from './symbols';
+
+
+
+// In TypeScript 2.1 the spread element kind was renamed.
+const spreadElementSyntaxKind: ts.SyntaxKind =
+    (ts.SyntaxKind as any).SpreadElement || (ts.SyntaxKind as any).SpreadElementExpression;
+
+function isMethodCallOf(callExpression: ts.CallExpression, memberName: string): boolean {
+  const expression = callExpression.expression;
+  if (expression.kind === ts.SyntaxKind.PropertyAccessExpression) {
+    const propertyAccessExpression = <ts.PropertyAccessExpression>expression;
+    const name = propertyAccessExpression.name;
+    if (name.kind == ts.SyntaxKind.Identifier) {
+      return name.text === memberName;
+    }
+  }
+  return false;
+}
+
+function isCallOf(callExpression: ts.CallExpression, ident: string): boolean {
+  const expression = callExpression.expression;
+  if (expression.kind === ts.SyntaxKind.Identifier) {
+    const identifier = <ts.Identifier>expression;
+    return identifier.text === ident;
+  }
+  return false;
+}
+
+/* @internal */
+export function recordMapEntry<T extends MetadataEntry>(
+    entry: T, node: ts.Node,
+    nodeMap: Map<MetadataValue|ClassMetadata|InterfaceMetadata|FunctionMetadata, ts.Node>,
+    sourceFile?: ts.SourceFile) {
+  if (!nodeMap.has(entry)) {
+    nodeMap.set(entry, node);
+    if (node && (isMetadataImportedSymbolReferenceExpression(entry) ||
+                 isMetadataImportDefaultReference(entry)) &&
+        entry.line == null) {
+      const info = sourceInfo(node, sourceFile);
+      if (info.line != null) entry.line = info.line;
+      if (info.character != null) entry.character = info.character;
+    }
+  }
+  return entry;
+}
+
+/**
+ * ts.forEachChild stops iterating children when the callback return a truthy value.
+ * This method inverts this to implement an `every` style iterator. It will return
+ * true if every call to `cb` returns `true`.
+ */
+function everyNodeChild(node: ts.Node, cb: (node: ts.Node) => boolean) {
+  return !ts.forEachChild(node, node => !cb(node));
+}
+
+export function isPrimitive(value: any): boolean {
+  return Object(value) !== value;
+}
+
+function isDefined(obj: any): boolean {
+  return obj !== undefined;
+}
+
+// import {propertyName as name} from 'place'
+// import {name} from 'place'
+export interface ImportSpecifierMetadata {
+  name: string;
+  propertyName?: string;
+}
+export interface ImportMetadata {
+  defaultName?: string;                      // import d from 'place'
+  namespace?: string;                        // import * as d from 'place'
+  namedImports?: ImportSpecifierMetadata[];  // import {a} from 'place'
+  from: string;                              // from 'place'
+}
+
+
+function getSourceFileOfNode(node: ts.Node | undefined): ts.SourceFile {
+  while (node && node.kind != ts.SyntaxKind.SourceFile) {
+    node = node.parent;
+  }
+  return <ts.SourceFile>node;
+}
+
+/* @internal */
+export function sourceInfo(
+    node: ts.Node | undefined, sourceFile: ts.SourceFile | undefined): MetadataSourceLocationInfo {
+  if (node) {
+    sourceFile = sourceFile || getSourceFileOfNode(node);
+    if (sourceFile) {
+      return ts.getLineAndCharacterOfPosition(sourceFile, node.getStart(sourceFile));
+    }
+  }
+  return {};
+}
+
+/* @internal */
+export function errorSymbol(
+    message: string, node?: ts.Node, context?: {[name: string]: string},
+    sourceFile?: ts.SourceFile): MetadataError {
+  const result: MetadataError = {__symbolic: 'error', message, ...sourceInfo(node, sourceFile)};
+  if (context) {
+    result.context = context;
+  }
+  return result;
+}
+
+/**
+ * Produce a symbolic representation of an expression folding values into their final value when
+ * possible.
+ */
+export class Evaluator {
+  constructor(
+      private symbols: Symbols, private nodeMap: Map<MetadataEntry, ts.Node>,
+      private options: CollectorOptions = {},
+      private recordExport?: (name: string, value: MetadataValue) => void) {}
+
+  nameOf(node: ts.Node|undefined): string|MetadataError {
+    if (node && node.kind == ts.SyntaxKind.Identifier) {
+      return (<ts.Identifier>node).text;
+    }
+    const result = node && this.evaluateNode(node);
+    if (isMetadataError(result) || typeof result === 'string') {
+      return result;
+    } else {
+      return errorSymbol(
+          'Name expected', node, {received: (node && node.getText()) || '<missing>'});
+    }
+  }
+
+  /**
+   * Returns true if the expression represented by `node` can be folded into a literal expression.
+   *
+   * For example, a literal is always foldable. This means that literal expressions such as `1.2`
+   * `"Some value"` `true` `false` are foldable.
+   *
+   * - An object literal is foldable if all the properties in the literal are foldable.
+   * - An array literal is foldable if all the elements are foldable.
+   * - A call is foldable if it is a call to a Array.prototype.concat or a call to CONST_EXPR.
+   * - A property access is foldable if the object is foldable.
+   * - A array index is foldable if index expression is foldable and the array is foldable.
+   * - Binary operator expressions are foldable if the left and right expressions are foldable and
+   *   it is one of '+', '-', '*', '/', '%', '||', and '&&'.
+   * - An identifier is foldable if a value can be found for its symbol in the evaluator symbol
+   *   table.
+   */
+  public isFoldable(node: ts.Node): boolean {
+    return this.isFoldableWorker(node, new Map<ts.Node, boolean>());
+  }
+
+  private isFoldableWorker(node: ts.Node|undefined, folding: Map<ts.Node, boolean>): boolean {
+    if (node) {
+      switch (node.kind) {
+        case ts.SyntaxKind.ObjectLiteralExpression:
+          return everyNodeChild(node, child => {
+            if (child.kind === ts.SyntaxKind.PropertyAssignment) {
+              const propertyAssignment = <ts.PropertyAssignment>child;
+              return this.isFoldableWorker(propertyAssignment.initializer, folding);
+            }
+            return false;
+          });
+        case ts.SyntaxKind.ArrayLiteralExpression:
+          return everyNodeChild(node, child => this.isFoldableWorker(child, folding));
+        case ts.SyntaxKind.CallExpression:
+          const callExpression = <ts.CallExpression>node;
+          // We can fold a <array>.concat(<v>).
+          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)) {
+              // It needs to be an array.
+              const arrayValue = this.evaluateNode(arrayNode);
+              if (arrayValue && Array.isArray(arrayValue)) {
+                return true;
+              }
+            }
+          }
+
+          // We can fold a call to CONST_EXPR
+          if (isCallOf(callExpression, 'CONST_EXPR') &&
+              arrayOrEmpty(callExpression.arguments).length === 1)
+            return this.isFoldableWorker(callExpression.arguments[0], folding);
+          return false;
+        case ts.SyntaxKind.NoSubstitutionTemplateLiteral:
+        case ts.SyntaxKind.StringLiteral:
+        case ts.SyntaxKind.NumericLiteral:
+        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;
+          return this.isFoldableWorker(parenthesizedExpression.expression, folding);
+        case ts.SyntaxKind.BinaryExpression:
+          const binaryExpression = <ts.BinaryExpression>node;
+          switch (binaryExpression.operatorToken.kind) {
+            case ts.SyntaxKind.PlusToken:
+            case ts.SyntaxKind.MinusToken:
+            case ts.SyntaxKind.AsteriskToken:
+            case ts.SyntaxKind.SlashToken:
+            case ts.SyntaxKind.PercentToken:
+            case ts.SyntaxKind.AmpersandAmpersandToken:
+            case ts.SyntaxKind.BarBarToken:
+              return this.isFoldableWorker(binaryExpression.left, folding) &&
+                  this.isFoldableWorker(binaryExpression.right, folding);
+            default:
+              return false;
+          }
+        case ts.SyntaxKind.PropertyAccessExpression:
+          const propertyAccessExpression = <ts.PropertyAccessExpression>node;
+          return this.isFoldableWorker(propertyAccessExpression.expression, folding);
+        case ts.SyntaxKind.ElementAccessExpression:
+          const elementAccessExpression = <ts.ElementAccessExpression>node;
+          return this.isFoldableWorker(elementAccessExpression.expression, folding) &&
+              this.isFoldableWorker(elementAccessExpression.argumentExpression, folding);
+        case ts.SyntaxKind.Identifier:
+          let identifier = <ts.Identifier>node;
+          let reference = this.symbols.resolve(identifier.text);
+          if (reference !== undefined && isPrimitive(reference)) {
+            return true;
+          }
+          break;
+        case ts.SyntaxKind.TemplateExpression:
+          const templateExpression = <ts.TemplateExpression>node;
+          return templateExpression.templateSpans.every(
+              span => this.isFoldableWorker(span.expression, folding));
+      }
+    }
+    return false;
+  }
+
+  /**
+   * 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, preferReference?: boolean): MetadataValue {
+    const t = this;
+    let error: MetadataError|undefined;
+
+    function recordEntry(entry: MetadataValue, node: ts.Node): MetadataValue {
+      if (t.options.substituteExpression) {
+        const newEntry = t.options.substituteExpression(entry, node);
+        if (t.recordExport && newEntry != entry && isMetadataGlobalReferenceExpression(newEntry)) {
+          t.recordExport(newEntry.name, entry);
+        }
+        entry = newEntry;
+      }
+      return recordMapEntry(entry, node, t.nodeMap);
+    }
+
+    function isFoldableError(value: any): value is MetadataError {
+      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);
+      }
+      if (reference && isMetadataSymbolicReferenceExpression(reference)) {
+        return recordEntry({...reference}, node);
+      }
+      return reference;
+    };
+
+    switch (node.kind) {
+      case ts.SyntaxKind.ObjectLiteralExpression:
+        let obj: {[name: string]: any} = {};
+        let quoted: string[] = [];
+        ts.forEachChild(node, child => {
+          switch (child.kind) {
+            case ts.SyntaxKind.ShorthandPropertyAssignment:
+            case ts.SyntaxKind.PropertyAssignment:
+              const assignment = <ts.PropertyAssignment|ts.ShorthandPropertyAssignment>child;
+              if (assignment.name.kind == ts.SyntaxKind.StringLiteral) {
+                const name = (assignment.name as ts.StringLiteral).text;
+                quoted.push(name);
+              }
+              const propertyName = this.nameOf(assignment.name);
+              if (isFoldableError(propertyName)) {
+                error = propertyName;
+                return true;
+              }
+              const propertyValue = isPropertyAssignment(assignment) ?
+                  this.evaluateNode(assignment.initializer, /* preferReference */ true) :
+                  resolveName(propertyName, /* preferReference */ true);
+              if (isFoldableError(propertyValue)) {
+                error = propertyValue;
+                return true;  // Stop the forEachChild.
+              } else {
+                obj[<string>propertyName] = isPropertyAssignment(assignment) ?
+                    recordEntry(propertyValue, assignment.initializer) :
+                    propertyValue;
+              }
+          }
+        });
+        if (error) return error;
+        if (this.options.quotedNames && quoted.length) {
+          obj['$quoted$'] = quoted;
+        }
+        return recordEntry(obj, node);
+      case ts.SyntaxKind.ArrayLiteralExpression:
+        let arr: MetadataValue[] = [];
+        ts.forEachChild(node, child => {
+          const value = this.evaluateNode(child, /* preferReference */ true);
+
+          // Check for error
+          if (isFoldableError(value)) {
+            error = value;
+            return true;  // Stop the forEachChild.
+          }
+
+          // Handle spread expressions
+          if (isMetadataSymbolicSpreadExpression(value)) {
+            if (Array.isArray(value.expression)) {
+              for (const spreadValue of value.expression) {
+                arr.push(spreadValue);
+              }
+              return;
+            }
+          }
+
+          arr.push(value);
+        });
+        if (error) return error;
+        return recordEntry(arr, node);
+      case spreadElementSyntaxKind:
+        let spreadExpression = this.evaluateNode((node as any).expression);
+        return recordEntry({__symbolic: 'spread', expression: spreadExpression}, node);
+      case ts.SyntaxKind.CallExpression:
+        const callExpression = <ts.CallExpression>node;
+        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 = arrayOrEmpty(callExpression.arguments).map(arg => this.evaluateNode(arg));
+        if (this.isFoldable(callExpression)) {
+          if (isMethodCallOf(callExpression, 'concat')) {
+            const arrayValue = <MetadataValue[]>this.evaluateNode(
+                (<ts.PropertyAccessExpression>callExpression.expression).expression);
+            if (isFoldableError(arrayValue)) return arrayValue;
+            return arrayValue.concat(args[0]);
+          }
+        }
+        // Always fold a CONST_EXPR even if the argument is not foldable.
+        if (isCallOf(callExpression, 'CONST_EXPR') &&
+            arrayOrEmpty(callExpression.arguments).length === 1) {
+          return recordEntry(args[0], node);
+        }
+        const expression = this.evaluateNode(callExpression.expression);
+        if (isFoldableError(expression)) {
+          return recordEntry(expression, node);
+        }
+        let result: MetadataSymbolicCallExpression = {__symbolic: 'call', expression: expression};
+        if (args && args.length) {
+          result.arguments = args;
+        }
+        return recordEntry(result, node);
+      case ts.SyntaxKind.NewExpression:
+        const newExpression = <ts.NewExpression>node;
+        const newArgs = arrayOrEmpty(newExpression.arguments).map(arg => this.evaluateNode(arg));
+        const newTarget = this.evaluateNode(newExpression.expression);
+        if (isMetadataError(newTarget)) {
+          return recordEntry(newTarget, node);
+        }
+        const call: MetadataSymbolicCallExpression = {__symbolic: 'new', expression: newTarget};
+        if (newArgs.length) {
+          call.arguments = newArgs;
+        }
+        return recordEntry(call, node);
+      case ts.SyntaxKind.PropertyAccessExpression: {
+        const propertyAccessExpression = <ts.PropertyAccessExpression>node;
+        const expression = this.evaluateNode(propertyAccessExpression.expression);
+        if (isFoldableError(expression)) {
+          return recordEntry(expression, node);
+        }
+        const member = this.nameOf(propertyAccessExpression.name);
+        if (isFoldableError(member)) {
+          return recordEntry(member, node);
+        }
+        if (expression && this.isFoldable(propertyAccessExpression.expression))
+          return (<any>expression)[<string>member];
+        if (isMetadataModuleReferenceExpression(expression)) {
+          // 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);
+        }
+        return recordEntry({__symbolic: 'select', expression, member}, node);
+      }
+      case ts.SyntaxKind.ElementAccessExpression: {
+        const elementAccessExpression = <ts.ElementAccessExpression>node;
+        const expression = this.evaluateNode(elementAccessExpression.expression);
+        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);
+        }
+        if (this.isFoldable(elementAccessExpression.expression) &&
+            this.isFoldable(elementAccessExpression.argumentExpression))
+          return (<any>expression)[<string|number>index];
+        return recordEntry({__symbolic: 'index', expression, index}, node);
+      }
+      case ts.SyntaxKind.Identifier:
+        const identifier = <ts.Identifier>node;
+        const name = identifier.text;
+        return resolveName(name, preferReference);
+      case ts.SyntaxKind.TypeReference:
+        const typeReferenceNode = <ts.TypeReferenceNode>node;
+        const typeNameNode = typeReferenceNode.typeName;
+        const getReference: (typeNameNode: ts.Identifier | ts.QualifiedName) => MetadataValue =
+            node => {
+              if (typeNameNode.kind === ts.SyntaxKind.QualifiedName) {
+                const qualifiedName = <ts.QualifiedName>node;
+                const left = this.evaluateNode(qualifiedName.left);
+                if (isMetadataModuleReferenceExpression(left)) {
+                  return recordEntry(
+                      <MetadataImportedSymbolReferenceExpression>{
+                        __symbolic: 'reference',
+                        module: left.module,
+                        name: qualifiedName.right.text
+                      },
+                      node);
+                }
+                // Record a type reference to a declared type as a select.
+                return {__symbolic: 'select', expression: left, member: qualifiedName.right.text};
+              } else {
+                const identifier = <ts.Identifier>typeNameNode;
+                const symbol = this.symbols.resolve(identifier.text);
+                if (isFoldableError(symbol) || isMetadataSymbolicReferenceExpression(symbol)) {
+                  return recordEntry(symbol, node);
+                }
+                return recordEntry(
+                    errorSymbol('Could not resolve type', node, {typeName: identifier.text}), node);
+              }
+            };
+        const typeReference = getReference(typeNameNode);
+        if (isFoldableError(typeReference)) {
+          return recordEntry(typeReference, node);
+        }
+        if (!isMetadataModuleReferenceExpression(typeReference) &&
+            typeReferenceNode.typeArguments && typeReferenceNode.typeArguments.length) {
+          const args = typeReferenceNode.typeArguments.map(element => this.evaluateNode(element));
+          // TODO: Remove typecast when upgraded to 2.0 as it will be correctly inferred.
+          // Some versions of 1.9 do not infer this correctly.
+          (<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:
+      case ts.SyntaxKind.StringLiteral:
+      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:
+        return recordEntry({__symbolic: 'reference', name: 'any'}, node);
+      case ts.SyntaxKind.StringKeyword:
+        return recordEntry({__symbolic: 'reference', name: 'string'}, node);
+      case ts.SyntaxKind.NumberKeyword:
+        return recordEntry({__symbolic: 'reference', name: 'number'}, node);
+      case ts.SyntaxKind.BooleanKeyword:
+        return recordEntry({__symbolic: 'reference', name: 'boolean'}, node);
+      case ts.SyntaxKind.ArrayType:
+        const arrayTypeNode = <ts.ArrayTypeNode>node;
+        return recordEntry(
+            {
+              __symbolic: 'reference',
+              name: 'Array',
+              arguments: [this.evaluateNode(arrayTypeNode.elementType)]
+            },
+            node);
+      case ts.SyntaxKind.NullKeyword:
+        return null;
+      case ts.SyntaxKind.TrueKeyword:
+        return true;
+      case ts.SyntaxKind.FalseKeyword:
+        return false;
+      case ts.SyntaxKind.ParenthesizedExpression:
+        const parenthesizedExpression = <ts.ParenthesizedExpression>node;
+        return this.evaluateNode(parenthesizedExpression.expression);
+      case ts.SyntaxKind.TypeAssertionExpression:
+        const typeAssertion = <ts.TypeAssertion>node;
+        return this.evaluateNode(typeAssertion.expression);
+      case ts.SyntaxKind.PrefixUnaryExpression:
+        const prefixUnaryExpression = <ts.PrefixUnaryExpression>node;
+        const operand = this.evaluateNode(prefixUnaryExpression.operand);
+        if (isDefined(operand) && isPrimitive(operand)) {
+          switch (prefixUnaryExpression.operator) {
+            case ts.SyntaxKind.PlusToken:
+              return +(operand as any);
+            case ts.SyntaxKind.MinusToken:
+              return -(operand as any);
+            case ts.SyntaxKind.TildeToken:
+              return ~(operand as any);
+            case ts.SyntaxKind.ExclamationToken:
+              return !operand;
+          }
+        }
+        let operatorText: string;
+        switch (prefixUnaryExpression.operator) {
+          case ts.SyntaxKind.PlusToken:
+            operatorText = '+';
+            break;
+          case ts.SyntaxKind.MinusToken:
+            operatorText = '-';
+            break;
+          case ts.SyntaxKind.TildeToken:
+            operatorText = '~';
+            break;
+          case ts.SyntaxKind.ExclamationToken:
+            operatorText = '!';
+            break;
+          default:
+            return undefined;
+        }
+        return recordEntry({__symbolic: 'pre', operator: operatorText, operand: operand}, node);
+      case ts.SyntaxKind.BinaryExpression:
+        const binaryExpression = <ts.BinaryExpression>node;
+        const left = this.evaluateNode(binaryExpression.left);
+        const right = this.evaluateNode(binaryExpression.right);
+        if (isDefined(left) && isDefined(right)) {
+          if (isPrimitive(left) && isPrimitive(right))
+            switch (binaryExpression.operatorToken.kind) {
+              case ts.SyntaxKind.BarBarToken:
+                return <any>left || <any>right;
+              case ts.SyntaxKind.AmpersandAmpersandToken:
+                return <any>left && <any>right;
+              case ts.SyntaxKind.AmpersandToken:
+                return <any>left & <any>right;
+              case ts.SyntaxKind.BarToken:
+                return <any>left | <any>right;
+              case ts.SyntaxKind.CaretToken:
+                return <any>left ^ <any>right;
+              case ts.SyntaxKind.EqualsEqualsToken:
+                return <any>left == <any>right;
+              case ts.SyntaxKind.ExclamationEqualsToken:
+                return <any>left != <any>right;
+              case ts.SyntaxKind.EqualsEqualsEqualsToken:
+                return <any>left === <any>right;
+              case ts.SyntaxKind.ExclamationEqualsEqualsToken:
+                return <any>left !== <any>right;
+              case ts.SyntaxKind.LessThanToken:
+                return <any>left < <any>right;
+              case ts.SyntaxKind.GreaterThanToken:
+                return <any>left > <any>right;
+              case ts.SyntaxKind.LessThanEqualsToken:
+                return <any>left <= <any>right;
+              case ts.SyntaxKind.GreaterThanEqualsToken:
+                return <any>left >= <any>right;
+              case ts.SyntaxKind.LessThanLessThanToken:
+                return (<any>left) << (<any>right);
+              case ts.SyntaxKind.GreaterThanGreaterThanToken:
+                return <any>left >> <any>right;
+              case ts.SyntaxKind.GreaterThanGreaterThanGreaterThanToken:
+                return <any>left >>> <any>right;
+              case ts.SyntaxKind.PlusToken:
+                return <any>left + <any>right;
+              case ts.SyntaxKind.MinusToken:
+                return <any>left - <any>right;
+              case ts.SyntaxKind.AsteriskToken:
+                return <any>left * <any>right;
+              case ts.SyntaxKind.SlashToken:
+                return <any>left / <any>right;
+              case ts.SyntaxKind.PercentToken:
+                return <any>left % <any>right;
+            }
+          return recordEntry(
+              {
+                __symbolic: 'binop',
+                operator: binaryExpression.operatorToken.getText(),
+                left: left,
+                right: right
+              },
+              node);
+        }
+        break;
+      case ts.SyntaxKind.ConditionalExpression:
+        const conditionalExpression = <ts.ConditionalExpression>node;
+        const condition = this.evaluateNode(conditionalExpression.condition);
+        const thenExpression = this.evaluateNode(conditionalExpression.whenTrue);
+        const elseExpression = this.evaluateNode(conditionalExpression.whenFalse);
+        if (isPrimitive(condition)) {
+          return condition ? thenExpression : elseExpression;
+        }
+        return recordEntry({__symbolic: 'if', condition, thenExpression, elseExpression}, node);
+      case ts.SyntaxKind.FunctionExpression:
+      case ts.SyntaxKind.ArrowFunction:
+        return recordEntry(errorSymbol('Lambda 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);
+  }
+}
+
+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/packages/compiler-cli/src/metadata/index.ts b/packages/compiler-cli/src/metadata/index.ts
new file mode 100644
index 000000000000..d8aa3ff8f7b9
--- /dev/null
+++ b/packages/compiler-cli/src/metadata/index.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 * from './collector';
+export * from './schema';
+export * from './bundle_index_host';
\ No newline at end of file
diff --git a/packages/compiler-cli/src/metadata/index_writer.ts b/packages/compiler-cli/src/metadata/index_writer.ts
new file mode 100644
index 000000000000..2c209f1c5bfa
--- /dev/null
+++ b/packages/compiler-cli/src/metadata/index_writer.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 {BundlePrivateEntry} from './bundler';
+
+const INDEX_HEADER = `/**
+ * Generated bundle index. Do not edit.
+ */
+`;
+
+type MapEntry = [string, BundlePrivateEntry[]];
+
+export function privateEntriesToIndex(index: string, privates: BundlePrivateEntry[]): string {
+  const results: string[] = [INDEX_HEADER];
+
+  // Export all of the index symbols.
+  results.push(`export * from '${index}';`, '');
+
+  // Simplify the exports
+  const exports = new Map<string, BundlePrivateEntry[]>();
+
+  for (const entry of privates) {
+    let entries = exports.get(entry.module);
+    if (!entries) {
+      entries = [];
+      exports.set(entry.module, entries);
+    }
+    entries.push(entry);
+  }
+
+
+  const compareEntries = compare((e: BundlePrivateEntry) => e.name);
+  const compareModules = compare((e: MapEntry) => e[0]);
+  const orderedExports =
+      Array.from(exports)
+          .map(([module, entries]) => <MapEntry>[module, entries.sort(compareEntries)])
+          .sort(compareModules);
+
+  for (const [module, entries] of orderedExports) {
+    let symbols = entries.map(e => `${e.name} as ${e.privateName}`);
+    results.push(`export {${symbols}} from '${module}';`);
+  }
+
+  return results.join('\n');
+}
+
+function compare<E, T>(select: (e: E) => T): (a: E, b: E) => number {
+  return (a, b) => {
+    const ak = select(a);
+    const bk = select(b);
+    return ak > bk ? 1 : ak < bk ? -1 : 0;
+  };
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/metadata/schema.ts b/packages/compiler-cli/src/metadata/schema.ts
new file mode 100644
index 000000000000..5a5d7d281b04
--- /dev/null
+++ b/packages/compiler-cli/src/metadata/schema.ts
@@ -0,0 +1,297 @@
+/**
+ * @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
+ */
+
+// Metadata Schema
+
+// If you make a backwards incompatible change to the schema, increment the METADTA_VERSION number.
+
+// If you make a backwards compatible change to the metadata (such as adding an option field) then
+// leave METADATA_VERSION the same. If possible, supply as many versions of the metadata that can
+// represent the semantics of the file in an array. For example, when generating a version 2 file,
+// if version 1 can accurately represent the metadata, generate both version 1 and version 2 in
+// an array.
+
+export const METADATA_VERSION = 4;
+
+export type MetadataEntry = ClassMetadata | InterfaceMetadata | FunctionMetadata | MetadataValue;
+
+export interface ModuleMetadata {
+  __symbolic: 'module';
+  version: number;
+  exports?: ModuleExportMetadata[];
+  importAs?: string;
+  metadata: {[name: string]: MetadataEntry};
+  origins?: {[name: string]: string};
+}
+export function isModuleMetadata(value: any): value is ModuleMetadata {
+  return value && value.__symbolic === 'module';
+}
+
+export interface ModuleExportMetadata {
+  export?: (string|{name: string, as: string})[];
+  from: string;
+}
+
+export interface ClassMetadata {
+  __symbolic: 'class';
+  extends?: MetadataSymbolicExpression|MetadataError;
+  arity?: number;
+  decorators?: (MetadataSymbolicExpression|MetadataError)[];
+  members?: MetadataMap;
+  statics?: {[name: string]: MetadataValue | FunctionMetadata};
+}
+export function isClassMetadata(value: any): value is ClassMetadata {
+  return value && value.__symbolic === 'class';
+}
+
+export interface InterfaceMetadata { __symbolic: 'interface'; }
+export function isInterfaceMetadata(value: any): value is InterfaceMetadata {
+  return value && value.__symbolic === 'interface';
+}
+
+export interface MetadataMap { [name: string]: MemberMetadata[]; }
+
+export interface MemberMetadata {
+  __symbolic: 'constructor'|'method'|'property';
+  decorators?: (MetadataSymbolicExpression|MetadataError)[];
+}
+export function isMemberMetadata(value: any): value is MemberMetadata {
+  if (value) {
+    switch (value.__symbolic) {
+      case 'constructor':
+      case 'method':
+      case 'property':
+        return true;
+    }
+  }
+  return false;
+}
+
+export interface MethodMetadata extends MemberMetadata {
+  __symbolic: 'constructor'|'method';
+  parameterDecorators?: ((MetadataSymbolicExpression | MetadataError)[]|undefined)[];
+}
+export function isMethodMetadata(value: any): value is MethodMetadata {
+  return value && (value.__symbolic === 'constructor' || value.__symbolic === 'method');
+}
+
+export interface ConstructorMetadata extends MethodMetadata {
+  __symbolic: 'constructor';
+  parameters?: (MetadataSymbolicExpression|MetadataError|null|undefined)[];
+}
+export function isConstructorMetadata(value: any): value is ConstructorMetadata {
+  return value && value.__symbolic === 'constructor';
+}
+
+export interface FunctionMetadata {
+  __symbolic: 'function';
+  parameters: string[];
+  defaults?: MetadataValue[];
+  value: MetadataValue;
+}
+export function isFunctionMetadata(value: any): value is FunctionMetadata {
+  return value && value.__symbolic === 'function';
+}
+
+export type MetadataValue = string | number | boolean | undefined | null | MetadataObject |
+    MetadataArray | MetadataSymbolicExpression | MetadataSymbolicReferenceExpression |
+    MetadataSymbolicBinaryExpression | MetadataSymbolicIndexExpression |
+    MetadataSymbolicCallExpression | MetadataSymbolicPrefixExpression |
+    MetadataSymbolicIfExpression | MetadataSymbolicSpreadExpression |
+    MetadataSymbolicSelectExpression | MetadataError;
+
+export interface MetadataObject { [name: string]: MetadataValue; }
+
+export interface MetadataArray { [name: number]: MetadataValue; }
+
+export type MetadataSymbolicExpression = MetadataSymbolicBinaryExpression |
+    MetadataSymbolicIndexExpression | MetadataSymbolicIndexExpression |
+    MetadataSymbolicCallExpression | MetadataSymbolicCallExpression |
+    MetadataSymbolicPrefixExpression | MetadataSymbolicIfExpression |
+    MetadataGlobalReferenceExpression | MetadataModuleReferenceExpression |
+    MetadataImportedSymbolReferenceExpression | MetadataImportedDefaultReferenceExpression |
+    MetadataSymbolicSelectExpression | MetadataSymbolicSpreadExpression;
+
+export function isMetadataSymbolicExpression(value: any): value is MetadataSymbolicExpression {
+  if (value) {
+    switch (value.__symbolic) {
+      case 'binary':
+      case 'call':
+      case 'index':
+      case 'new':
+      case 'pre':
+      case 'reference':
+      case 'select':
+      case 'spread':
+      case 'if':
+        return true;
+    }
+  }
+  return false;
+}
+
+export interface MetadataSymbolicBinaryExpression {
+  __symbolic: 'binary';
+  operator: '&&'|'||'|'|'|'^'|'&'|'=='|'!='|'==='|'!=='|'<'|'>'|'<='|'>='|'instanceof'|'in'|'as'|
+      '<<'|'>>'|'>>>'|'+'|'-'|'*'|'/'|'%'|'**';
+  left: MetadataValue;
+  right: MetadataValue;
+}
+export function isMetadataSymbolicBinaryExpression(value: any):
+    value is MetadataSymbolicBinaryExpression {
+  return value && value.__symbolic === 'binary';
+}
+
+export interface MetadataSymbolicIndexExpression {
+  __symbolic: 'index';
+  expression: MetadataValue;
+  index: MetadataValue;
+}
+export function isMetadataSymbolicIndexExpression(value: any):
+    value is MetadataSymbolicIndexExpression {
+  return value && value.__symbolic === 'index';
+}
+
+export interface MetadataSymbolicCallExpression {
+  __symbolic: 'call'|'new';
+  expression: MetadataValue;
+  arguments?: MetadataValue[];
+}
+export function isMetadataSymbolicCallExpression(value: any):
+    value is MetadataSymbolicCallExpression {
+  return value && (value.__symbolic === 'call' || value.__symbolic === 'new');
+}
+
+export interface MetadataSymbolicPrefixExpression {
+  __symbolic: 'pre';
+  operator: '+'|'-'|'~'|'!';
+  operand: MetadataValue;
+}
+export function isMetadataSymbolicPrefixExpression(value: any):
+    value is MetadataSymbolicPrefixExpression {
+  return value && value.__symbolic === 'pre';
+}
+
+export interface MetadataSymbolicIfExpression {
+  __symbolic: 'if';
+  condition: MetadataValue;
+  thenExpression: MetadataValue;
+  elseExpression: MetadataValue;
+}
+export function isMetadataSymbolicIfExpression(value: any): value is MetadataSymbolicIfExpression {
+  return value && value.__symbolic === 'if';
+}
+
+export interface MetadataSourceLocationInfo {
+  /**
+   * The line number of the error in the .ts file the metadata was created for.
+   */
+  line?: number;
+
+  /**
+   * The number of utf8 code-units from the beginning of the file of the error.
+   */
+  character?: number;
+}
+
+export interface MetadataGlobalReferenceExpression extends MetadataSourceLocationInfo {
+  __symbolic: 'reference';
+  name: string;
+  arguments?: MetadataValue[];
+}
+export function isMetadataGlobalReferenceExpression(value: any):
+    value is MetadataGlobalReferenceExpression {
+  return value && value.name && !value.module && isMetadataSymbolicReferenceExpression(value);
+}
+
+export interface MetadataModuleReferenceExpression extends MetadataSourceLocationInfo {
+  __symbolic: 'reference';
+  module: string;
+}
+export function isMetadataModuleReferenceExpression(value: any):
+    value is MetadataModuleReferenceExpression {
+  return value && value.module && !value.name && !value.default &&
+      isMetadataSymbolicReferenceExpression(value);
+}
+
+export interface MetadataImportedSymbolReferenceExpression extends MetadataSourceLocationInfo {
+  __symbolic: 'reference';
+  module: string;
+  name: string;
+  arguments?: MetadataValue[];
+}
+export function isMetadataImportedSymbolReferenceExpression(value: any):
+    value is MetadataImportedSymbolReferenceExpression {
+  return value && value.module && !!value.name && isMetadataSymbolicReferenceExpression(value);
+}
+
+export interface MetadataImportedDefaultReferenceExpression extends MetadataSourceLocationInfo {
+  __symbolic: 'reference';
+  module: string;
+  default:
+    boolean;
+    arguments?: MetadataValue[];
+}
+export function isMetadataImportDefaultReference(value: any):
+    value is MetadataImportedDefaultReferenceExpression {
+  return value && value.module && value.default && isMetadataSymbolicReferenceExpression(value);
+}
+
+export type MetadataSymbolicReferenceExpression = MetadataGlobalReferenceExpression |
+    MetadataModuleReferenceExpression | MetadataImportedSymbolReferenceExpression |
+    MetadataImportedDefaultReferenceExpression;
+export function isMetadataSymbolicReferenceExpression(value: any):
+    value is MetadataSymbolicReferenceExpression {
+  return value && value.__symbolic === 'reference';
+}
+
+export interface MetadataSymbolicSelectExpression {
+  __symbolic: 'select';
+  expression: MetadataValue;
+  member: string;
+}
+export function isMetadataSymbolicSelectExpression(value: any):
+    value is MetadataSymbolicSelectExpression {
+  return value && value.__symbolic === 'select';
+}
+
+export interface MetadataSymbolicSpreadExpression {
+  __symbolic: 'spread';
+  expression: MetadataValue;
+}
+export function isMetadataSymbolicSpreadExpression(value: any):
+    value is MetadataSymbolicSpreadExpression {
+  return value && value.__symbolic === 'spread';
+}
+
+export interface MetadataError extends MetadataSourceLocationInfo {
+  __symbolic: 'error';
+
+  /**
+   * This message should be short and relatively discriptive and should be fixed once it is created.
+   * If the reader doesn't recognize the message, it will display the message unmodified. If the
+   * reader recognizes the error message is it free to use substitute message the is more
+   * descriptive and/or localized.
+   */
+  message: string;
+
+  /**
+   * The module of the error (only used in bundled metadata)
+   */
+  module?: string;
+
+  /**
+   * Context information that can be used to generate a more descriptive error message. The content
+   * of the context is dependent on the error message.
+   */
+  context?: {[name: string]: string};
+}
+
+export function isMetadataError(value: any): value is MetadataError {
+  return value && value.__symbolic === 'error';
+}
diff --git a/packages/compiler-cli/src/metadata/symbols.ts b/packages/compiler-cli/src/metadata/symbols.ts
new file mode 100644
index 000000000000..afd7aff8271e
--- /dev/null
+++ b/packages/compiler-cli/src/metadata/symbols.ts
@@ -0,0 +1,131 @@
+/**
+ * @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 ts from 'typescript';
+
+import {MetadataSymbolicReferenceExpression, MetadataValue} from './schema';
+
+export class Symbols {
+  // TODO(issue/24571): remove '!'.
+  private _symbols !: Map<string, MetadataValue>;
+  private references = new Map<string, MetadataSymbolicReferenceExpression>();
+
+  constructor(private sourceFile: ts.SourceFile) {}
+
+  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); }
+
+  private get symbols(): Map<string, MetadataValue> {
+    let result = this._symbols;
+    if (!result) {
+      result = this._symbols = new Map<string, MetadataValue>();
+      populateBuiltins(result);
+      this.buildImports();
+    }
+    return result;
+  }
+
+  private buildImports(): void {
+    const symbols = this._symbols;
+    // Collect the imported symbols into this.symbols
+    const stripQuotes = (s: string) => s.replace(/^['"]|['"]$/g, '');
+    const visit = (node: ts.Node) => {
+      switch (node.kind) {
+        case ts.SyntaxKind.ImportEqualsDeclaration:
+          const importEqualsDeclaration = <ts.ImportEqualsDeclaration>node;
+          if (importEqualsDeclaration.moduleReference.kind ===
+              ts.SyntaxKind.ExternalModuleReference) {
+            const externalReference =
+                <ts.ExternalModuleReference>importEqualsDeclaration.moduleReference;
+            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;
+            }
+          }
+          symbols.set(
+              importEqualsDeclaration.name.text,
+              {__symbolic: 'error', message: `Unsupported import syntax`});
+          break;
+        case ts.SyntaxKind.ImportDeclaration:
+          const importDecl = <ts.ImportDeclaration>node;
+          if (!importDecl.importClause) {
+            // An `import <module-specifier>` clause which does not bring symbols into scope.
+            break;
+          }
+          if (!importDecl.moduleSpecifier.parent) {
+            // See note above in the `ImportEqualDeclaration` case.
+            importDecl.moduleSpecifier.parent = importDecl;
+            importDecl.parent = this.sourceFile;
+          }
+          const from = stripQuotes(importDecl.moduleSpecifier.getText());
+          if (importDecl.importClause.name) {
+            // An `import <identifier> form <module-specifier>` clause. Record the default symbol.
+            symbols.set(
+                importDecl.importClause.name.text,
+                {__symbolic: 'reference', module: from, default: true});
+          }
+          const bindings = importDecl.importClause.namedBindings;
+          if (bindings) {
+            switch (bindings.kind) {
+              case ts.SyntaxKind.NamedImports:
+                // An `import { [<identifier> [, <identifier>] } from <module-specifier>` clause
+                for (const binding of (<ts.NamedImports>bindings).elements) {
+                  symbols.set(binding.name.text, {
+                    __symbolic: 'reference',
+                    module: from,
+                    name: binding.propertyName ? binding.propertyName.text : binding.name.text
+                  });
+                }
+                break;
+              case ts.SyntaxKind.NamespaceImport:
+                // An `input * as <identifier> from <module-specifier>` clause.
+                symbols.set(
+                    (<ts.NamespaceImport>bindings).name.text,
+                    {__symbolic: 'reference', module: from});
+                break;
+            }
+          }
+          break;
+      }
+      ts.forEachChild(node, visit);
+    };
+    if (this.sourceFile) {
+      ts.forEachChild(this.sourceFile, visit);
+    }
+  }
+}
+
+function populateBuiltins(symbols: Map<string, MetadataValue>) {
+  // From lib.core.d.ts (all "define const")
+  ['Object', 'Function', 'String', 'Number', 'Array', 'Boolean', 'Map', 'NaN', 'Infinity', 'Math',
+   'Date', 'RegExp', 'Error', 'Error', 'EvalError', 'RangeError', 'ReferenceError', 'SyntaxError',
+   'TypeError', 'URIError', 'JSON', 'ArrayBuffer', 'DataView', 'Int8Array', 'Uint8Array',
+   'Uint8ClampedArray', 'Uint16Array', 'Int16Array', 'Int32Array', 'Uint32Array', 'Float32Array',
+   'Float64Array']
+      .forEach(name => symbols.set(name, {__symbolic: 'reference', name}));
+}
diff --git a/packages/compiler-cli/src/ngcc/BUILD.bazel b/packages/compiler-cli/src/ngcc/BUILD.bazel
new file mode 100644
index 000000000000..9b69823c8230
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/BUILD.bazel
@@ -0,0 +1,21 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "ngcc",
+    srcs = glob([
+        "*.ts",
+        "**/*.ts",
+    ]),
+    module_name = "@angular/compiler-cli/src/ngcc",
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli/src/ngtsc/annotations",
+        "//packages/compiler-cli/src/ngtsc/host",
+        "//packages/compiler-cli/src/ngtsc/metadata",
+        "//packages/compiler-cli/src/ngtsc/transform",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngcc/README.md b/packages/compiler-cli/src/ngcc/README.md
new file mode 100644
index 000000000000..6a3a3844b2c3
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/README.md
@@ -0,0 +1,30 @@
+# Angular Compatibility Compiler (ngcc)
+
+This compiler will convert `node_modules` compiled with `ngc`, into `node_modules` which
+appear to have been compiled with `ngtsc`.
+
+This conversion will allow such "legacy" packages to be used by the Ivy rendering engine.
+
+## Building
+
+The project is built using Bazel:
+
+```bash
+bazel build //packages/compiler-cli/src/ngcc
+```
+
+## Unit Testing
+
+The unit tests are built and run using Bazel:
+
+```bash
+bazel test //packages/compiler-cli/src/ngcc/test
+```
+
+## Integration Testing
+
+There are tests that check the behaviour of the overall executable:
+
+```bash
+bazel test //packages/compiler-cli/test/ngcc
+```
diff --git a/packages/compiler-cli/src/ngcc/index.ts b/packages/compiler-cli/src/ngcc/index.ts
new file mode 100644
index 000000000000..b7c62ac5220f
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/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 {mainNgcc} from './src/main';
diff --git a/packages/compiler-cli/src/ngcc/main-ngcc.ts b/packages/compiler-cli/src/ngcc/main-ngcc.ts
new file mode 100644
index 000000000000..08524a6afaad
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/main-ngcc.ts
@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+/**
+ * @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 {mainNgcc} from './src/main';
+
+// CLI entry point
+if (require.main === module) {
+  const args = process.argv.slice(2);
+  process.exitCode = mainNgcc(args);
+}
diff --git a/packages/compiler-cli/src/ngcc/src/analyzer.ts b/packages/compiler-cli/src/ngcc/src/analyzer.ts
new file mode 100644
index 000000000000..f7be4aa09246
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/analyzer.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 {ConstantPool} from '@angular/compiler';
+import * as fs from 'fs';
+import * as ts from 'typescript';
+
+import {BaseDefDecoratorHandler, ComponentDecoratorHandler, DirectiveDecoratorHandler, InjectableDecoratorHandler, NgModuleDecoratorHandler, PipeDecoratorHandler, ResourceLoader, SelectorScopeRegistry} from '../../ngtsc/annotations';
+import {Decorator} from '../../ngtsc/host';
+import {CompileResult, DecoratorHandler} from '../../ngtsc/transform';
+
+import {NgccReflectionHost} from './host/ngcc_host';
+import {ParsedClass} from './parsing/parsed_class';
+import {ParsedFile} from './parsing/parsed_file';
+import {isDefined} from './utils';
+
+export interface AnalyzedClass<A = any, M = any> extends ParsedClass {
+  handler: DecoratorHandler<A, M>;
+  analysis: any;
+  diagnostics?: ts.Diagnostic[];
+  compilation: CompileResult[];
+}
+
+export interface AnalyzedFile {
+  analyzedClasses: AnalyzedClass[];
+  sourceFile: ts.SourceFile;
+  constantPool: ConstantPool;
+}
+
+export interface MatchingHandler<A, M> {
+  handler: DecoratorHandler<A, M>;
+  match: M;
+}
+
+/**
+ * `ResourceLoader` which directly uses the filesystem to resolve resources synchronously.
+ */
+export class FileResourceLoader implements ResourceLoader {
+  load(url: string): string { return fs.readFileSync(url, 'utf8'); }
+}
+
+export class Analyzer {
+  resourceLoader = new FileResourceLoader();
+  scopeRegistry = new SelectorScopeRegistry(this.typeChecker, this.host);
+  handlers: DecoratorHandler<any, any>[] = [
+    new BaseDefDecoratorHandler(this.typeChecker, this.host),
+    new ComponentDecoratorHandler(
+        this.typeChecker, this.host, this.scopeRegistry, false, this.resourceLoader),
+    new DirectiveDecoratorHandler(this.typeChecker, this.host, this.scopeRegistry, false),
+    new InjectableDecoratorHandler(this.host, false),
+    new NgModuleDecoratorHandler(this.typeChecker, this.host, this.scopeRegistry, false),
+    new PipeDecoratorHandler(this.typeChecker, this.host, this.scopeRegistry, false),
+  ];
+
+  constructor(private typeChecker: ts.TypeChecker, private host: NgccReflectionHost) {}
+
+  /**
+   * Analyize a parsed file to generate the information about decorated classes that
+   * should be converted to use ivy definitions.
+   * @param file The file to be analysed for decorated classes.
+   */
+  analyzeFile(file: ParsedFile): AnalyzedFile {
+    const constantPool = new ConstantPool();
+    const analyzedClasses =
+        file.decoratedClasses.map(clazz => this.analyzeClass(file.sourceFile, constantPool, clazz))
+            .filter(isDefined);
+
+    return {
+      analyzedClasses,
+      sourceFile: file.sourceFile, constantPool,
+    };
+  }
+
+  protected analyzeClass(file: ts.SourceFile, pool: ConstantPool, clazz: ParsedClass): AnalyzedClass
+      |undefined {
+    const matchingHandlers = this.handlers
+                                 .map(handler => ({
+                                        handler,
+                                        match: handler.detect(clazz.declaration, clazz.decorators),
+                                      }))
+                                 .filter(isMatchingHandler);
+
+    if (matchingHandlers.length > 1) {
+      throw new Error('TODO.Diagnostic: Class has multiple Angular decorators.');
+    }
+
+    if (matchingHandlers.length === 0) {
+      return undefined;
+    }
+
+    const {handler, match} = matchingHandlers[0];
+    const {analysis, diagnostics} = handler.analyze(clazz.declaration, match);
+    let compilation = handler.compile(clazz.declaration, analysis, pool);
+    if (!Array.isArray(compilation)) {
+      compilation = [compilation];
+    }
+    return {...clazz, handler, analysis, diagnostics, compilation};
+  }
+}
+
+function isMatchingHandler<A, M>(handler: Partial<MatchingHandler<A, M>>):
+    handler is MatchingHandler<A, M> {
+  return !!handler.match;
+}
diff --git a/packages/compiler-cli/src/ngcc/src/host/esm2015_host.ts b/packages/compiler-cli/src/ngcc/src/host/esm2015_host.ts
new file mode 100644
index 000000000000..a2dff5d7df03
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/host/esm2015_host.ts
@@ -0,0 +1,425 @@
+/**
+ * @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 ts from 'typescript';
+
+import {ClassMember, ClassMemberKind, Decorator, Parameter} from '../../../ngtsc/host';
+import {TypeScriptReflectionHost, reflectObjectLiteral} from '../../../ngtsc/metadata';
+import {getNameText} from '../utils';
+import {NgccReflectionHost} from './ngcc_host';
+
+export const DECORATORS = 'decorators' as ts.__String;
+export const PROP_DECORATORS = 'propDecorators' as ts.__String;
+export const CONSTRUCTOR = '__constructor' as ts.__String;
+export const CONSTRUCTOR_PARAMS = 'ctorParameters' as ts.__String;
+
+/**
+ * Esm2015 packages contain ECMAScript 2015 classes, etc.
+ * Decorators are defined via static properties on the class. For example:
+ *
+ * ```
+ * class SomeDirective {
+ * }
+ * SomeDirective.decorators = [
+ *   { type: Directive, args: [{ selector: '[someDirective]' },] }
+ * ];
+ * SomeDirective.ctorParameters = () => [
+ *   { type: ViewContainerRef, },
+ *   { type: TemplateRef, },
+ *   { type: undefined, decorators: [{ type: Inject, args: [INJECTED_TOKEN,] },] },
+ * ];
+ * SomeDirective.propDecorators = {
+ *   "input1": [{ type: Input },],
+ *   "input2": [{ type: Input },],
+ * };
+ * ```
+ *
+ * * Classes are decorated if they have a static property called `decorators`.
+ * * Members are decorated if there is a matching key on a static property
+ *   called `propDecorators`.
+ * * Constructor parameters decorators are found on an object returned from
+ *   a static method called `ctorParameters`.
+ */
+export class Esm2015ReflectionHost extends TypeScriptReflectionHost implements NgccReflectionHost {
+  constructor(checker: ts.TypeChecker) { super(checker); }
+
+  /**
+   * Examine a declaration (for example, of a class or function) and return metadata about any
+   * decorators present on the declaration.
+   *
+   * @param declaration a TypeScript `ts.Declaration` node representing the class or function over
+   * which to reflect. For example, if the intent is to reflect the decorators of a class and the
+   * source is in ES6 format, this will be a `ts.ClassDeclaration` node. If the source is in ES5
+   * format, this might be a `ts.VariableDeclaration` as classes in ES5 are represented as the
+   * result of an IIFE execution.
+   *
+   * @returns an array of `Decorator` metadata if decorators are present on the declaration, or
+   * `null` if either no decorators were present or if the declaration is not of a decoratable type.
+   */
+  getDecoratorsOfDeclaration(declaration: ts.Declaration): Decorator[]|null {
+    const symbol = this.getClassSymbol(declaration);
+    if (symbol) {
+      if (symbol.exports && symbol.exports.has(DECORATORS)) {
+        // Symbol of the identifier for `SomeDirective.decorators`.
+        const decoratorsSymbol = symbol.exports.get(DECORATORS) !;
+        const decoratorsIdentifier = decoratorsSymbol.valueDeclaration;
+
+        if (decoratorsIdentifier && decoratorsIdentifier.parent) {
+          if (ts.isBinaryExpression(decoratorsIdentifier.parent)) {
+            // AST of the array of decorator values
+            const decoratorsArray = decoratorsIdentifier.parent.right;
+            return this.reflectDecorators(decoratorsArray);
+          }
+        }
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Examine a declaration which should be of a class, and return metadata about the members of the
+   * class.
+   *
+   * @param declaration a TypeScript `ts.Declaration` node representing the class over which to
+   * reflect. If the source is in ES6 format, this will be a `ts.ClassDeclaration` node. If the
+   * source is in ES5 format, this might be a `ts.VariableDeclaration` as classes in ES5 are
+   * represented as the result of an IIFE execution.
+   *
+   * @returns an array of `ClassMember` metadata representing the members of the class.
+   *
+   * @throws if `declaration` does not resolve to a class declaration.
+   */
+  getMembersOfClass(clazz: ts.Declaration): ClassMember[] {
+    const members: ClassMember[] = [];
+    const symbol = this.getClassSymbol(clazz);
+    if (!symbol) {
+      throw new Error(`Attempted to get members of a non-class: "${clazz.getText()}"`);
+    }
+
+    // The decorators map contains all the properties that are decorated
+    const decoratorsMap = this.getMemberDecorators(symbol);
+
+    // The member map contains all the method (instance and static); and any instance properties
+    // that are initialized in the class.
+    if (symbol.members) {
+      symbol.members.forEach((value, key) => {
+        const decorators = removeFromMap(decoratorsMap, key);
+        const member = this.reflectMember(value, decorators);
+        if (member) {
+          members.push(member);
+        }
+      });
+    }
+
+    // The static property map contains all the static properties
+    if (symbol.exports) {
+      symbol.exports.forEach((value, key) => {
+        const decorators = removeFromMap(decoratorsMap, key);
+        const member = this.reflectMember(value, decorators, true);
+        if (member) {
+          members.push(member);
+        }
+      });
+    }
+
+    // Deal with any decorated properties that were not initialized in the class
+    decoratorsMap.forEach((value, key) => {
+      members.push({
+        implementation: null,
+        decorators: value,
+        isStatic: false,
+        kind: ClassMemberKind.Property,
+        name: key,
+        nameNode: null,
+        node: null,
+        type: null,
+        value: null
+      });
+    });
+
+    return members;
+  }
+
+  /**
+   * Reflect over the constructor of a class and return metadata about its parameters.
+   *
+   * This method only looks at the constructor of a class directly and not at any inherited
+   * constructors.
+   *
+   * @param declaration a TypeScript `ts.Declaration` node representing the class over which to
+   * reflect. If the source is in ES6 format, this will be a `ts.ClassDeclaration` node. If the
+   * source is in ES5 format, this might be a `ts.VariableDeclaration` as classes in ES5 are
+   * represented as the result of an IIFE execution.
+   *
+   * @returns an array of `Parameter` metadata representing the parameters of the constructor, if
+   * a constructor exists. If the constructor exists and has 0 parameters, this array will be empty.
+   * If the class has no constructor, this method returns `null`.
+   *
+   * @throws if `declaration` does not resolve to a class declaration.
+   */
+  getConstructorParameters(clazz: ts.Declaration): Parameter[]|null {
+    const classSymbol = this.getClassSymbol(clazz);
+    if (!classSymbol) {
+      throw new Error(
+          `Attempted to get constructor parameters of a non-class: "${clazz.getText()}"`);
+    }
+    const parameterNodes = this.getConstructorParameterDeclarations(classSymbol);
+    if (parameterNodes) {
+      const parameters: Parameter[] = [];
+      const decoratorInfo = this.getConstructorDecorators(classSymbol);
+      parameterNodes.forEach((node, index) => {
+        const info = decoratorInfo[index];
+        const decorators =
+            info && info.has('decorators') && this.reflectDecorators(info.get('decorators') !) ||
+            null;
+        const type = info && info.get('type') || null;
+        const nameNode = node.name;
+        parameters.push({name: getNameText(nameNode), nameNode, type, decorators});
+      });
+      return parameters;
+    }
+    return null;
+  }
+
+  /**
+   * Find a symbol for a declaration that we think is a class.
+   * @param declaration The declaration whose symbol we are finding
+   * @returns the symbol for the declaration or `undefined` if it is not
+   * a "class" or has no symbol.
+   */
+  getClassSymbol(declaration: ts.Declaration): ts.Symbol|undefined {
+    return ts.isClassDeclaration(declaration) ?
+        declaration.name && this.checker.getSymbolAtLocation(declaration.name) :
+        undefined;
+  }
+
+  /**
+   * Member decorators are declared as static properties of the class in ES2015:
+   *
+   * ```
+   * SomeDirective.propDecorators = {
+   *   "ngForOf": [{ type: Input },],
+   *   "ngForTrackBy": [{ type: Input },],
+   *   "ngForTemplate": [{ type: Input },],
+   * };
+   * ```
+   */
+  protected getMemberDecorators(classSymbol: ts.Symbol): Map<string, Decorator[]> {
+    const memberDecorators = new Map<string, Decorator[]>();
+    if (classSymbol.exports && classSymbol.exports.has(PROP_DECORATORS)) {
+      // Symbol of the identifier for `SomeDirective.propDecorators`.
+      const propDecoratorsMap =
+          getPropertyValueFromSymbol(classSymbol.exports.get(PROP_DECORATORS) !);
+      if (propDecoratorsMap && ts.isObjectLiteralExpression(propDecoratorsMap)) {
+        const propertiesMap = reflectObjectLiteral(propDecoratorsMap);
+        propertiesMap.forEach(
+            (value, name) => { memberDecorators.set(name, this.reflectDecorators(value)); });
+      }
+    }
+    return memberDecorators;
+  }
+
+  /**
+   * Reflect over the given expression and extract decorator information.
+   * @param decoratorsArray An expression that contains decorator information.
+   */
+  protected reflectDecorators(decoratorsArray: ts.Expression): Decorator[] {
+    const decorators: Decorator[] = [];
+
+    if (ts.isArrayLiteralExpression(decoratorsArray)) {
+      // Add each decorator that is imported from `@angular/core` into the `decorators` array
+      decoratorsArray.elements.forEach(node => {
+
+        // If the decorator is not an object literal expression then we are not interested
+        if (ts.isObjectLiteralExpression(node)) {
+          // We are only interested in objects of the form: `{ type: DecoratorType, args: [...] }`
+          const decorator = reflectObjectLiteral(node);
+
+          // Is the value of the `type` property an identifier?
+          const typeIdentifier = decorator.get('type');
+          if (typeIdentifier && ts.isIdentifier(typeIdentifier)) {
+            decorators.push({
+              name: typeIdentifier.text,
+              import: this.getImportOfIdentifier(typeIdentifier), node,
+              args: getDecoratorArgs(node),
+            });
+          }
+        }
+      });
+    }
+    return decorators;
+  }
+
+  protected reflectMember(symbol: ts.Symbol, decorators?: Decorator[], isStatic?: boolean):
+      ClassMember|null {
+    let kind: ClassMemberKind|null = null;
+    let value: ts.Expression|null = null;
+    let name: string|null = null;
+    let nameNode: ts.Identifier|null = null;
+    let type = null;
+
+
+    const node = symbol.valueDeclaration || symbol.declarations && symbol.declarations[0];
+    if (!node || !isClassMemberType(node)) {
+      return null;
+    }
+
+    if (symbol.flags & ts.SymbolFlags.Method) {
+      kind = ClassMemberKind.Method;
+    } else if (symbol.flags & ts.SymbolFlags.Property) {
+      kind = ClassMemberKind.Property;
+    } else if (symbol.flags & ts.SymbolFlags.GetAccessor) {
+      kind = ClassMemberKind.Getter;
+    } else if (symbol.flags & ts.SymbolFlags.SetAccessor) {
+      kind = ClassMemberKind.Setter;
+    }
+
+    if (isStatic && isPropertyAccess(node)) {
+      name = node.name.text;
+      value = symbol.flags & ts.SymbolFlags.Property ? node.parent.right : null;
+    } else if (isThisAssignment(node)) {
+      kind = ClassMemberKind.Property;
+      name = node.left.name.text;
+      value = node.right;
+      isStatic = false;
+    } else if (ts.isConstructorDeclaration(node)) {
+      kind = ClassMemberKind.Constructor;
+      name = 'constructor';
+      isStatic = false;
+    }
+
+    if (kind === null) {
+      console.warn(`Unknown member type: "${node.getText()}`);
+      return null;
+    }
+
+    if (!name) {
+      if (isNamedDeclaration(node) && node.name && ts.isIdentifier(node.name)) {
+        name = node.name.text;
+        nameNode = node.name;
+      } else {
+        return null;
+      }
+    }
+
+    // If we have still not determined if this is a static or instance member then
+    // look for the `static` keyword on the declaration
+    if (isStatic === undefined) {
+      isStatic = node.modifiers !== undefined &&
+          node.modifiers.some(mod => mod.kind === ts.SyntaxKind.StaticKeyword);
+    }
+
+    return {
+      node,
+      implementation: node, kind, type, name, nameNode, value, isStatic,
+      decorators: decorators || []
+    };
+  }
+
+  /**
+   * Find the declarations of the constructor parameters of a class identified by its symbol.
+   * @param classSymbol the class whose parameters we want to find.
+   * @returns an array of `ts.ParameterDeclaration` objects representing each of the parameters in
+   * the
+   * class's constructor or null if there is no constructor.
+   */
+  protected getConstructorParameterDeclarations(classSymbol: ts.Symbol):
+      ts.ParameterDeclaration[]|null {
+    const constructorSymbol = classSymbol.members && classSymbol.members.get(CONSTRUCTOR);
+    if (constructorSymbol) {
+      // For some reason the constructor does not have a `valueDeclaration` ?!?
+      const constructor = constructorSymbol.declarations &&
+          constructorSymbol.declarations[0] as ts.ConstructorDeclaration;
+      if (constructor && constructor.parameters) {
+        return Array.from(constructor.parameters);
+      }
+      return [];
+    }
+    return null;
+  }
+
+  /**
+   * Constructors parameter decorators are declared in the body of static method of the class in
+   * ES2015:
+   *
+   * ```
+   * SomeDirective.ctorParameters = () => [
+   *   { type: ViewContainerRef, },
+   *   { type: TemplateRef, },
+   *   { type: IterableDiffers, },
+   *   { type: undefined, decorators: [{ type: Inject, args: [INJECTED_TOKEN,] },] },
+   * ];
+   * ```
+   */
+  protected getConstructorDecorators(classSymbol: ts.Symbol): (Map<string, ts.Expression>|null)[] {
+    if (classSymbol.exports && classSymbol.exports.has(CONSTRUCTOR_PARAMS)) {
+      const paramDecoratorsProperty =
+          getPropertyValueFromSymbol(classSymbol.exports.get(CONSTRUCTOR_PARAMS) !);
+      if (paramDecoratorsProperty && ts.isArrowFunction(paramDecoratorsProperty)) {
+        if (ts.isArrayLiteralExpression(paramDecoratorsProperty.body)) {
+          return paramDecoratorsProperty.body.elements.map(
+              element =>
+                  ts.isObjectLiteralExpression(element) ? reflectObjectLiteral(element) : null);
+        }
+      }
+    }
+    return [];
+  }
+}
+
+/**
+ * The arguments of a decorator are held in the `args` property of its declaration object.
+ */
+function getDecoratorArgs(node: ts.ObjectLiteralExpression): ts.Expression[] {
+  const argsProperty = node.properties.filter(ts.isPropertyAssignment)
+                           .find(property => getNameText(property.name) === 'args');
+  const argsExpression = argsProperty && argsProperty.initializer;
+  return argsExpression && ts.isArrayLiteralExpression(argsExpression) ?
+      Array.from(argsExpression.elements) :
+      [];
+}
+
+/**
+ * Helper method to extract the value of a property given the property's "symbol",
+ * which is actually the symbol of the identifier of the property.
+ */
+export function getPropertyValueFromSymbol(propSymbol: ts.Symbol): ts.Expression|undefined {
+  const propIdentifier = propSymbol.valueDeclaration;
+  const parent = propIdentifier && propIdentifier.parent;
+  return parent && ts.isBinaryExpression(parent) ? parent.right : undefined;
+}
+
+function removeFromMap<T>(map: Map<string, T>, key: ts.__String): T|undefined {
+  const mapKey = key as string;
+  const value = map.get(mapKey);
+  if (value !== undefined) {
+    map.delete(mapKey);
+  }
+  return value;
+}
+
+function isPropertyAccess(node: ts.Node): node is ts.PropertyAccessExpression&
+    {parent: ts.BinaryExpression} {
+  return !!node.parent && ts.isBinaryExpression(node.parent) && ts.isPropertyAccessExpression(node);
+}
+
+function isThisAssignment(node: ts.Declaration): node is ts.BinaryExpression&
+    {left: ts.PropertyAccessExpression} {
+  return ts.isBinaryExpression(node) && ts.isPropertyAccessExpression(node.left) &&
+      node.left.expression.kind === ts.SyntaxKind.ThisKeyword;
+}
+
+function isNamedDeclaration(node: ts.Declaration): node is ts.NamedDeclaration {
+  return !!(node as any).name;
+}
+
+
+function isClassMemberType(node: ts.Declaration): node is ts.ClassElement|
+    ts.PropertyAccessExpression|ts.BinaryExpression {
+  return ts.isClassElement(node) || isPropertyAccess(node) || ts.isBinaryExpression(node);
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngcc/src/host/esm5_host.ts b/packages/compiler-cli/src/ngcc/src/host/esm5_host.ts
new file mode 100644
index 000000000000..b79b13d0de20
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/host/esm5_host.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 * as ts from 'typescript';
+import {ClassMember, ClassMemberKind, Decorator} from '../../../ngtsc/host';
+import {reflectObjectLiteral} from '../../../ngtsc/metadata';
+import {CONSTRUCTOR_PARAMS, Esm2015ReflectionHost, getPropertyValueFromSymbol} from './esm2015_host';
+
+/**
+ * ESM5 packages contain ECMAScript IIFE functions that act like classes. For example:
+ *
+ * ```
+ * var CommonModule = (function () {
+ *  function CommonModule() {
+ *  }
+ *  CommonModule.decorators = [ ... ];
+ * ```
+ *
+ * * "Classes" are decorated if they have a static property called `decorators`.
+ * * Members are decorated if there is a matching key on a static property
+ *   called `propDecorators`.
+ * * Constructor parameters decorators are found on an object returned from
+ *   a static method called `ctorParameters`.
+ *
+ */
+export class Esm5ReflectionHost extends Esm2015ReflectionHost {
+  constructor(checker: ts.TypeChecker) { super(checker); }
+
+  /**
+   * Check whether the given declaration node actually represents a class.
+   */
+  isClass(node: ts.Declaration): boolean { return !!this.getClassSymbol(node); }
+
+  /**
+   * In ESM5 the implementation of a class is a function expression that is hidden inside an IIFE.
+   * So we need to dig around inside to get hold of the "class" symbol.
+   * @param declaration the top level declaration that represents an exported class.
+   */
+  getClassSymbol(declaration: ts.Declaration): ts.Symbol|undefined {
+    if (ts.isVariableDeclaration(declaration)) {
+      const iifeBody = getIifeBody(declaration);
+      if (iifeBody) {
+        const innerClassIdentifier = getReturnIdentifier(iifeBody);
+        if (innerClassIdentifier) {
+          return this.checker.getSymbolAtLocation(innerClassIdentifier);
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Find the declarations of the constructor parameters of a class identified by its symbol.
+   * In ESM5 there is no "class" so the constructor that we want is actually the declaration
+   * function itself.
+   */
+  protected getConstructorParameterDeclarations(classSymbol: ts.Symbol): ts.ParameterDeclaration[] {
+    const constructor = classSymbol.valueDeclaration as ts.FunctionDeclaration;
+    if (constructor && constructor.parameters) {
+      return Array.from(constructor.parameters);
+    }
+    return [];
+  }
+
+  /**
+   * Constructors parameter decorators are declared in the body of static method of the constructor
+   * function in ES5. Note that unlike ESM2105 this is a function expression rather than an arrow
+   * function:
+   *
+   * ```
+   * SomeDirective.ctorParameters = function() { return [
+   *   { type: ViewContainerRef, },
+   *   { type: TemplateRef, },
+   *   { type: IterableDiffers, },
+   *   { type: undefined, decorators: [{ type: Inject, args: [INJECTED_TOKEN,] },] },
+   * ]; };
+   * ```
+   */
+  protected getConstructorDecorators(classSymbol: ts.Symbol): (Map<string, ts.Expression>|null)[] {
+    const declaration = classSymbol.exports && classSymbol.exports.get(CONSTRUCTOR_PARAMS);
+    const paramDecoratorsProperty = declaration && getPropertyValueFromSymbol(declaration);
+    const returnStatement = getReturnStatement(paramDecoratorsProperty);
+    const expression = returnStatement && returnStatement.expression;
+    return expression && ts.isArrayLiteralExpression(expression) ?
+        expression.elements.map(reflectArrayElement) :
+        [];
+  }
+
+  protected reflectMember(symbol: ts.Symbol, decorators?: Decorator[], isStatic?: boolean):
+      ClassMember|null {
+    const member = super.reflectMember(symbol, decorators, isStatic);
+    if (member && member.kind === ClassMemberKind.Method && member.isStatic && member.node &&
+        ts.isPropertyAccessExpression(member.node) && member.node.parent &&
+        ts.isBinaryExpression(member.node.parent) &&
+        ts.isFunctionExpression(member.node.parent.right)) {
+      // Recompute the implementation for this member:
+      // ES5 static methods are variable declarations so the declaration is actually the
+      // initializer of the variable assignment
+      member.implementation = member.node.parent.right;
+    }
+    return member;
+  }
+}
+
+function getIifeBody(declaration: ts.VariableDeclaration): ts.Block|undefined {
+  if (!declaration.initializer || !ts.isParenthesizedExpression(declaration.initializer)) {
+    return undefined;
+  }
+  const call = declaration.initializer;
+  return ts.isCallExpression(call.expression) &&
+          ts.isFunctionExpression(call.expression.expression) ?
+      call.expression.expression.body :
+      undefined;
+}
+
+function getReturnIdentifier(body: ts.Block): ts.Identifier|undefined {
+  const returnStatement = body.statements.find(ts.isReturnStatement);
+  return returnStatement && returnStatement.expression &&
+          ts.isIdentifier(returnStatement.expression) ?
+      returnStatement.expression :
+      undefined;
+}
+
+function getReturnStatement(declaration: ts.Expression | undefined): ts.ReturnStatement|undefined {
+  return declaration && ts.isFunctionExpression(declaration) ?
+      declaration.body.statements.find(ts.isReturnStatement) :
+      undefined;
+}
+
+function reflectArrayElement(element: ts.Expression) {
+  return ts.isObjectLiteralExpression(element) ? reflectObjectLiteral(element) : null;
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngcc/src/host/ngcc_host.ts b/packages/compiler-cli/src/ngcc/src/host/ngcc_host.ts
new file mode 100644
index 000000000000..ef32c719ed7c
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/host/ngcc_host.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 ts from 'typescript';
+import {ReflectionHost} from '../../../ngtsc/host';
+
+/**
+ * A reflection host that has extra methods for looking at non-Typescript package formats
+ */
+export interface NgccReflectionHost extends ReflectionHost {
+  getClassSymbol(declaration: ts.Declaration): ts.Symbol|undefined;
+}
diff --git a/packages/compiler-cli/src/ngcc/src/main.ts b/packages/compiler-cli/src/ngcc/src/main.ts
new file mode 100644
index 000000000000..fece2d136977
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/main.ts
@@ -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
+ */
+import {resolve} from 'path';
+import {PackageTransformer} from './transform/package_transformer';
+
+export function mainNgcc(args: string[]): number {
+  const packagePath = resolve(args[0]);
+
+  // TODO: find all the package tyoes to transform
+  // TODO: error/warning logging/handling etc
+
+  const transformer = new PackageTransformer();
+  transformer.transform(packagePath, 'fesm2015');
+
+  return 0;
+}
diff --git a/packages/compiler-cli/src/ngcc/src/parsing/esm2015_parser.ts b/packages/compiler-cli/src/ngcc/src/parsing/esm2015_parser.ts
new file mode 100644
index 000000000000..a476365fc8a0
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/parsing/esm2015_parser.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 ts from 'typescript';
+
+import {NgccReflectionHost} from '../host/ngcc_host';
+import {getOriginalSymbol, isDefined} from '../utils';
+
+import {FileParser} from './file_parser';
+import {ParsedClass} from './parsed_class';
+import {ParsedFile} from './parsed_file';
+
+export class Esm2015FileParser implements FileParser {
+  checker = this.program.getTypeChecker();
+
+  constructor(protected program: ts.Program, protected host: NgccReflectionHost) {}
+
+  parseFile(file: ts.SourceFile): ParsedFile[] {
+    const moduleSymbol = this.checker.getSymbolAtLocation(file);
+    const map = new Map<ts.SourceFile, ParsedFile>();
+    if (moduleSymbol) {
+      const exportClasses = this.checker.getExportsOfModule(moduleSymbol)
+                                .map(getOriginalSymbol(this.checker))
+                                .filter(exportSymbol => exportSymbol.flags & ts.SymbolFlags.Class);
+
+      const classDeclarations = exportClasses.map(exportSymbol => exportSymbol.valueDeclaration)
+                                    .filter(isDefined)
+                                    .filter(ts.isClassDeclaration);
+
+      const decoratedClasses =
+          classDeclarations
+              .map(declaration => {
+                const decorators = this.host.getDecoratorsOfDeclaration(declaration);
+                return decorators && declaration.name &&
+                    new ParsedClass(declaration.name.text, declaration, decorators);
+              })
+              .filter(isDefined);
+
+      decoratedClasses.forEach(clazz => {
+        const file = clazz.declaration.getSourceFile();
+        if (!map.has(file)) {
+          map.set(file, new ParsedFile(file));
+        }
+        map.get(file) !.decoratedClasses.push(clazz);
+      });
+    }
+    return Array.from(map.values());
+  }
+}
diff --git a/packages/compiler-cli/src/ngcc/src/parsing/esm5_parser.ts b/packages/compiler-cli/src/ngcc/src/parsing/esm5_parser.ts
new file mode 100644
index 000000000000..e4c91de62851
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/parsing/esm5_parser.ts
@@ -0,0 +1,59 @@
+/**
+ * @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 ts from 'typescript';
+
+import {NgccReflectionHost} from '../host/ngcc_host';
+import {getNameText, getOriginalSymbol, isDefined} from '../utils';
+
+import {FileParser} from './file_parser';
+import {ParsedClass} from './parsed_class';
+import {ParsedFile} from './parsed_file';
+
+
+
+/**
+ * Parses ESM5 package files for decoratrs classes.
+ * ESM5 "classes" are actually functions wrapped by and returned
+ * from an IFEE.
+ */
+export class Esm5FileParser implements FileParser {
+  checker = this.program.getTypeChecker();
+
+  constructor(protected program: ts.Program, protected host: NgccReflectionHost) {}
+
+  parseFile(file: ts.SourceFile): ParsedFile[] {
+    const moduleSymbol = this.checker.getSymbolAtLocation(file);
+    const map = new Map<ts.SourceFile, ParsedFile>();
+    const getParsedClass = (declaration: ts.VariableDeclaration) => {
+      const decorators = this.host.getDecoratorsOfDeclaration(declaration);
+      if (decorators) {
+        return new ParsedClass(getNameText(declaration.name), declaration, decorators);
+      }
+    };
+
+    if (moduleSymbol) {
+      const classDeclarations = this.checker.getExportsOfModule(moduleSymbol)
+                                    .map(getOriginalSymbol(this.checker))
+                                    .map(exportSymbol => exportSymbol.valueDeclaration)
+                                    .filter(isDefined)
+                                    .filter(ts.isVariableDeclaration);
+
+      const decoratedClasses = classDeclarations.map(getParsedClass).filter(isDefined);
+
+      decoratedClasses.forEach(clazz => {
+        const file = clazz.declaration.getSourceFile();
+        if (!map.has(file)) {
+          map.set(file, new ParsedFile(file));
+        }
+        map.get(file) !.decoratedClasses.push(clazz);
+      });
+    }
+    return Array.from(map.values());
+  }
+}
diff --git a/packages/compiler-cli/src/ngcc/src/parsing/file_parser.ts b/packages/compiler-cli/src/ngcc/src/parsing/file_parser.ts
new file mode 100644
index 000000000000..4b73263629d1
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/parsing/file_parser.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 * as ts from 'typescript';
+import {ParsedFile} from './parsed_file';
+
+/**
+ * Classes that implement this interface can parse a file in a package to
+ * find the "declarations" (representing exported classes), that are decorated with core
+ * decorators, such as `@Component`, `@Injectable`, etc.
+ *
+ * Identifying classes can be different depending upon the format of the source file.
+ *
+ * For example:
+ *
+ * - ES2015 files contain `class Xxxx {...}` style declarations
+ * - ES5 files contain `var Xxxx = (function () { function Xxxx() { ... }; return Xxxx; })();` style
+ *   declarations
+ * - UMD have similar declarations to ES5 files but the whole thing is wrapped in IIFE module
+ * wrapper
+ *   function.
+ */
+export interface FileParser {
+  /**
+   * Parse a file to identify the decorated classes.
+   *
+   * @param file The the entry point file for identifying classes to process.
+   * @returns A `ParsedFiles` collection that holds the decorated classes and import information.
+   */
+  parseFile(file: ts.SourceFile): ParsedFile[];
+}
diff --git a/packages/compiler-cli/src/ngcc/src/parsing/parsed_class.ts b/packages/compiler-cli/src/ngcc/src/parsing/parsed_class.ts
new file mode 100644
index 000000000000..c6cad7457dff
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/parsing/parsed_class.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 * as ts from 'typescript';
+import {Decorator} from '../../../ngtsc/host';
+
+/**
+ * A simple container that holds the details of a decorated class that has been
+ * parsed out of a package.
+ */
+export class ParsedClass {
+  /**
+   * Initialize a `DecoratedClass` that was found by parsing a package.
+   * @param name The name of the class that has been found. This is mostly used
+   * for informational purposes.
+   * @param declaration The TypeScript AST node where this class is declared
+   * @param decorators The collection of decorators that have been found on this class.
+   */
+  constructor(
+      public name: string, public declaration: ts.Declaration, public decorators: Decorator[], ) {}
+}
diff --git a/packages/compiler-cli/src/ngcc/src/parsing/parsed_file.ts b/packages/compiler-cli/src/ngcc/src/parsing/parsed_file.ts
new file mode 100644
index 000000000000..117c46008204
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/parsing/parsed_file.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 ts from 'typescript';
+import {ParsedClass} from './parsed_class';
+
+/**
+ * Information about a source file that has been parsed to
+ * extract all the decorated exported classes.
+ */
+export class ParsedFile {
+  /**
+   * The decorated exported classes that have been parsed out
+   * from the file.
+   */
+  public decoratedClasses: ParsedClass[] = [];
+  constructor(public sourceFile: ts.SourceFile) {}
+}
diff --git a/packages/compiler-cli/src/ngcc/src/parsing/utils.ts b/packages/compiler-cli/src/ngcc/src/parsing/utils.ts
new file mode 100644
index 000000000000..e9270e0d8533
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/parsing/utils.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 {readFileSync} from 'fs';
+import {dirname, resolve} from 'path';
+import {find} from 'shelljs';
+
+/**
+ * Match paths to package.json files.
+ */
+const PACKAGE_JSON_REGEX = /\/package\.json$/;
+
+/**
+ * Match paths that have a `node_modules` segment at the start or in the middle.
+ */
+const NODE_MODULES_REGEX = /(?:^|\/)node_modules\//;
+
+/**
+ * Search the `rootDirectory` and its subdirectories to find package.json files.
+ * It ignores node dependencies, i.e. those under `node_modules` folders.
+ * @param rootDirectory the directory in which we should search.
+ */
+export function findAllPackageJsonFiles(rootDirectory: string): string[] {
+  // TODO(gkalpak): Investigate whether skipping `node_modules/` directories (instead of traversing
+  //                them and filtering out the results later) makes a noticeable difference.
+  const paths = Array.from(find(rootDirectory));
+  return paths.filter(
+      path => PACKAGE_JSON_REGEX.test(path) &&
+          !NODE_MODULES_REGEX.test(path.slice(rootDirectory.length)));
+}
+
+/**
+ * Identify the entry points of a package.
+ * @param packageDirectory The absolute path to the root directory that contains this package.
+ * @param format The format of the entry point within the package.
+ * @returns A collection of paths that point to entry points for this package.
+ */
+export function getEntryPoints(packageDirectory: string, format: string): string[] {
+  const packageJsonPaths = findAllPackageJsonFiles(packageDirectory);
+  return packageJsonPaths
+      .map(packageJsonPath => {
+        const entryPointPackageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+        const relativeEntryPointPath = entryPointPackageJson[format];
+        return relativeEntryPointPath && resolve(dirname(packageJsonPath), relativeEntryPointPath);
+      })
+      .filter(entryPointPath => entryPointPath);
+}
diff --git a/packages/compiler-cli/src/ngcc/src/rendering/esm2015_renderer.ts b/packages/compiler-cli/src/ngcc/src/rendering/esm2015_renderer.ts
new file mode 100644
index 000000000000..10db8b292e94
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/rendering/esm2015_renderer.ts
@@ -0,0 +1,76 @@
+/**
+ * @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 ts from 'typescript';
+import MagicString from 'magic-string';
+import {NgccReflectionHost} from '../host/ngcc_host';
+import {AnalyzedClass} from '../analyzer';
+import {Renderer} from './renderer';
+
+export class Esm2015Renderer extends Renderer {
+  constructor(protected host: NgccReflectionHost) { super(); }
+
+  /**
+   *  Add the imports at the top of the file
+   */
+  addImports(output: MagicString, imports: {name: string; as: string;}[]): void {
+    // The imports get inserted at the very top of the file.
+    imports.forEach(i => { output.appendLeft(0, `import * as ${i.as} from '${i.name}';\n`); });
+  }
+
+  addConstants(output: MagicString, constants: string, file: ts.SourceFile): void {
+    if (constants === '') {
+      return;
+    }
+    const insertionPoint = file.statements.reduce((prev, stmt) => {
+      if (ts.isImportDeclaration(stmt) || ts.isImportEqualsDeclaration(stmt) ||
+          ts.isNamespaceImport(stmt)) {
+        return stmt.getEnd();
+      }
+      return prev;
+    }, 0);
+    output.appendLeft(insertionPoint, '\n' + constants + '\n');
+  }
+
+  /**
+   * Add the definitions to each decorated class
+   */
+  addDefinitions(output: MagicString, analyzedClass: AnalyzedClass, definitions: string): void {
+    const classSymbol = this.host.getClassSymbol(analyzedClass.declaration);
+    if (!classSymbol) {
+      throw new Error(`Analyzed class does not have a valid symbol: ${analyzedClass.name}`);
+    }
+    const insertionPoint = classSymbol.valueDeclaration !.getEnd();
+    output.appendLeft(insertionPoint, '\n' + definitions);
+  }
+
+  /**
+   * Remove static decorator properties from classes
+   */
+  removeDecorators(output: MagicString, decoratorsToRemove: Map<ts.Node, ts.Node[]>): void {
+    decoratorsToRemove.forEach((nodesToRemove, containerNode) => {
+      if (ts.isArrayLiteralExpression(containerNode)) {
+        const items = containerNode.elements;
+        if (items.length === nodesToRemove.length) {
+          // remove any trailing semi-colon
+          const end = (output.slice(containerNode.getEnd(), containerNode.getEnd() + 1) === ';') ?
+              containerNode.getEnd() + 1 :
+              containerNode.getEnd();
+          output.remove(containerNode.parent !.getFullStart(), end);
+        } else {
+          nodesToRemove.forEach(node => {
+            // remove any trailing comma
+            const end = (output.slice(node.getEnd(), node.getEnd() + 1) === ',') ?
+                node.getEnd() + 1 :
+                node.getEnd();
+            output.remove(node.getFullStart(), end);
+          });
+        }
+      }
+    });
+  }
+}
diff --git a/packages/compiler-cli/src/ngcc/src/rendering/esm5_renderer.ts b/packages/compiler-cli/src/ngcc/src/rendering/esm5_renderer.ts
new file mode 100644
index 000000000000..5f5d7fdec3e9
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/rendering/esm5_renderer.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 ts from 'typescript';
+import MagicString from 'magic-string';
+import {NgccReflectionHost} from '../host/ngcc_host';
+import {AnalyzedClass, AnalyzedFile} from '../analyzer';
+import {Esm2015Renderer} from './esm2015_renderer';
+
+export class Esm5Renderer extends Esm2015Renderer {
+  constructor(host: NgccReflectionHost) { super(host); }
+}
diff --git a/packages/compiler-cli/src/ngcc/src/rendering/renderer.ts b/packages/compiler-cli/src/ngcc/src/rendering/renderer.ts
new file mode 100644
index 000000000000..974d428fb81a
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/rendering/renderer.ts
@@ -0,0 +1,262 @@
+/**
+ * @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 {dirname} from 'path';
+import * as ts from 'typescript';
+
+import MagicString from 'magic-string';
+import {commentRegex, mapFileCommentRegex, fromJSON, fromSource, fromMapFileSource, fromObject, generateMapFileComment, removeComments, removeMapFileComments, SourceMapConverter} from 'convert-source-map';
+import {SourceMapConsumer, SourceMapGenerator, RawSourceMap} from 'source-map';
+import {ConstantPool, Expression, Statement, WrappedNodeExpr, WritePropExpr} from '@angular/compiler';
+import {AnalyzedClass, AnalyzedFile} from '../analyzer';
+import {Decorator} from '../../../ngtsc/host';
+import {ImportManager, translateStatement} from '../../../ngtsc/transform';
+
+interface SourceMapInfo {
+  source: string;
+  map: SourceMapConverter|null;
+  isInline: boolean;
+}
+
+/**
+ * The results of rendering an analyzed file.
+ */
+export interface RenderResult {
+  /**
+   * The file that has been rendered.
+   */
+  file: AnalyzedFile;
+  /**
+   * The rendered source file.
+   */
+  source: FileInfo;
+  /**
+   * The rendered source map file.
+   */
+  map: FileInfo|null;
+}
+
+/**
+ * Information about a file that has been rendered.
+ */
+export interface FileInfo {
+  /**
+   * Path to where the file should be written.
+   */
+  path: string;
+  /**
+   * The contents of the file to be be written.
+   */
+  contents: string;
+}
+
+/**
+ * A base-class for rendering an `AnalyzedClass`.
+ * Package formats have output files that must be rendered differently,
+ * Concrete sub-classes must implement the `addImports`, `addDefinitions` and
+ * `removeDecorators` abstract methods.
+ */
+export abstract class Renderer {
+  /**
+   * Render the source code and source-map for an Analyzed file.
+   * @param file The analyzed file to render.
+   * @param targetPath The absolute path where the rendered file will be written.
+   */
+  renderFile(file: AnalyzedFile, targetPath: string): RenderResult {
+    const importManager = new ImportManager(false, 'ɵngcc');
+    const input = this.extractSourceMap(file.sourceFile);
+
+    const outputText = new MagicString(input.source);
+    const decoratorsToRemove = new Map<ts.Node, ts.Node[]>();
+
+    file.analyzedClasses.forEach(clazz => {
+      const renderedDefinition = renderDefinitions(file.sourceFile, clazz, importManager);
+      this.addDefinitions(outputText, clazz, renderedDefinition);
+      this.trackDecorators(clazz.decorators, decoratorsToRemove);
+    });
+
+    this.addConstants(
+        outputText, renderConstantPool(file.sourceFile, file.constantPool, importManager),
+        file.sourceFile);
+
+    this.addImports(outputText, importManager.getAllImports(file.sourceFile.fileName, null));
+    // QUESTION: do we need to remove contructor param metadata and property decorators?
+    this.removeDecorators(outputText, decoratorsToRemove);
+
+    return this.renderSourceAndMap(file, input, outputText, targetPath);
+  }
+
+  protected abstract addConstants(output: MagicString, constants: string, file: ts.SourceFile):
+      void;
+  protected abstract addImports(output: MagicString, imports: {name: string, as: string}[]): void;
+  protected abstract addDefinitions(
+      output: MagicString, analyzedClass: AnalyzedClass, definitions: string): void;
+  protected abstract removeDecorators(
+      output: MagicString, decoratorsToRemove: Map<ts.Node, ts.Node[]>): void;
+
+  /**
+   * Add the decorator nodes that are to be removed to a map
+   * So that we can tell if we should remove the entire decorator property
+   */
+  protected trackDecorators(decorators: Decorator[], decoratorsToRemove: Map<ts.Node, ts.Node[]>):
+      void {
+    decorators.forEach(dec => {
+      const decoratorArray = dec.node.parent !;
+      if (!decoratorsToRemove.has(decoratorArray)) {
+        decoratorsToRemove.set(decoratorArray, [dec.node]);
+      } else {
+        decoratorsToRemove.get(decoratorArray) !.push(dec.node);
+      }
+    });
+  }
+
+  /**
+   * Get the map from the source (note whether it is inline or external)
+   */
+  protected extractSourceMap(file: ts.SourceFile): SourceMapInfo {
+    const inline = commentRegex.test(file.text);
+    const external = mapFileCommentRegex.test(file.text);
+
+    if (inline) {
+      const inlineSourceMap = fromSource(file.text);
+      return {
+        source: removeComments(file.text).replace(/\n\n$/, '\n'),
+        map: inlineSourceMap,
+        isInline: true,
+      };
+    } else if (external) {
+      let externalSourceMap: SourceMapConverter|null = null;
+      try {
+        externalSourceMap = fromMapFileSource(file.text, dirname(file.fileName));
+      } catch (e) {
+        console.warn(e);
+      }
+      return {
+        source: removeMapFileComments(file.text).replace(/\n\n$/, '\n'),
+        map: externalSourceMap,
+        isInline: false,
+      };
+    } else {
+      return {source: file.text, map: null, isInline: false};
+    }
+  }
+
+  /**
+   * Merge the input and output source-maps, replacing the source-map comment in the output file
+   * with an appropriate source-map comment pointing to the merged source-map.
+   */
+  protected renderSourceAndMap(
+      file: AnalyzedFile, input: SourceMapInfo, output: MagicString,
+      outputPath: string): RenderResult {
+    const outputMapPath = `${outputPath}.map`;
+    const outputMap = output.generateMap({
+      source: file.sourceFile.fileName,
+      includeContent: true,
+      // hires: true // TODO: This results in accurate but huge sourcemaps. Instead we should fix
+      // the merge algorithm.
+    });
+
+    // we must set this after generation as magic string does "manipulation" on the path
+    outputMap.file = outputPath;
+
+    const mergedMap =
+        mergeSourceMaps(input.map && input.map.toObject(), JSON.parse(outputMap.toString()));
+
+    if (input.isInline) {
+      return {
+        file,
+        source: {path: outputPath, contents: `${output.toString()}\n${mergedMap.toComment()}`},
+        map: null
+      };
+    } else {
+      return {
+        file,
+        source: {
+          path: outputPath,
+          contents: `${output.toString()}\n${generateMapFileComment(outputMapPath)}`
+        },
+        map: {path: outputMapPath, contents: mergedMap.toJSON()}
+      };
+    }
+  }
+}
+
+/**
+ * Merge the two specified source-maps into a single source-map that hides the intermediate
+ * source-map.
+ * E.g. Consider these mappings:
+ *
+ * ```
+ * OLD_SRC -> OLD_MAP -> INTERMEDIATE_SRC -> NEW_MAP -> NEW_SRC
+ * ```
+ *
+ * this will be replaced with:
+ *
+ * ```
+ * OLD_SRC -> MERGED_MAP -> NEW_SRC
+ * ```
+ */
+export function mergeSourceMaps(
+    oldMap: RawSourceMap | null, newMap: RawSourceMap): SourceMapConverter {
+  if (!oldMap) {
+    return fromObject(newMap);
+  }
+  const oldMapConsumer = new SourceMapConsumer(oldMap);
+  const newMapConsumer = new SourceMapConsumer(newMap);
+  const mergedMapGenerator = SourceMapGenerator.fromSourceMap(newMapConsumer);
+  mergedMapGenerator.applySourceMap(oldMapConsumer);
+  const merged = fromJSON(mergedMapGenerator.toString());
+  return merged;
+}
+
+/**
+ * Render the constant pool as source code for the given class.
+ */
+export function renderConstantPool(
+    sourceFile: ts.SourceFile, constantPool: ConstantPool, imports: ImportManager): string {
+  const printer = ts.createPrinter();
+  return constantPool.statements.map(stmt => translateStatement(stmt, imports))
+      .map(stmt => printer.printNode(ts.EmitHint.Unspecified, stmt, sourceFile))
+      .join('\n');
+}
+
+/**
+ * Render the definitions as source code for the given class.
+ * @param sourceFile The file containing the class to process.
+ * @param clazz The class whose definitions are to be rendered.
+ * @param compilation The results of analyzing the class - this is used to generate the rendered
+ * definitions.
+ * @param imports An object that tracks the imports that are needed by the rendered definitions.
+ */
+export function renderDefinitions(
+    sourceFile: ts.SourceFile, analyzedClass: AnalyzedClass, imports: ImportManager): string {
+  const printer = ts.createPrinter();
+  const name = (analyzedClass.declaration as ts.NamedDeclaration).name !;
+  const definitions =
+      analyzedClass.compilation
+          .map(
+              c => c.statements.map(statement => translateStatement(statement, imports))
+                       .concat(translateStatement(
+                           createAssignmentStatement(name, c.name, c.initializer), imports))
+                       .map(
+                           statement =>
+                               printer.printNode(ts.EmitHint.Unspecified, statement, sourceFile))
+                       .join('\n'))
+          .join('\n');
+  return definitions;
+}
+
+/**
+ * Create an Angular AST statement node that contains the assignment of the
+ * compiled decorator to be applied to the class.
+ * @param analyzedClass The info about the class whose statement we want to create.
+ */
+function createAssignmentStatement(
+    receiverName: ts.DeclarationName, propName: string, initializer: Expression): Statement {
+  const receiver = new WrappedNodeExpr(receiverName);
+  return new WritePropExpr(receiver, propName, initializer).toStmt();
+}
diff --git a/packages/compiler-cli/src/ngcc/src/transform/package_transformer.ts b/packages/compiler-cli/src/ngcc/src/transform/package_transformer.ts
new file mode 100644
index 000000000000..ab974015c06a
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/transform/package_transformer.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 {writeFileSync} from 'fs';
+import {dirname, relative, resolve} from 'path';
+import {mkdir} from 'shelljs';
+import * as ts from 'typescript';
+
+import {Analyzer} from '../analyzer';
+import {Esm2015ReflectionHost} from '../host/esm2015_host';
+import {Esm5ReflectionHost} from '../host/esm5_host';
+import {NgccReflectionHost} from '../host/ngcc_host';
+import {Esm2015FileParser} from '../parsing/esm2015_parser';
+import {Esm5FileParser} from '../parsing/esm5_parser';
+import {FileParser} from '../parsing/file_parser';
+import {getEntryPoints} from '../parsing/utils';
+import {Esm2015Renderer} from '../rendering/esm2015_renderer';
+import {Esm5Renderer} from '../rendering/esm5_renderer';
+import {FileInfo, Renderer} from '../rendering/renderer';
+
+
+/**
+ * A Package is stored in a directory on disk and that directory can contain one or more package
+ formats - e.g. fesm2015, UMD, etc.
+ *
+ * Each of these formats exposes one or more entry points, which are source files that need to be
+ * parsed to identify the decorated exported classes that need to be analyzed and compiled by one or
+ * more `DecoratorHandler` objects.
+ *
+ * Each entry point to a package is identified by a `SourceFile` that can be parsed and analyzed
+ * to identify classes that need to be transformed; and then finally rendered and written to disk.
+
+ * The actual file which needs to be transformed depends upon the package format.
+ *
+ * - Flat file packages have all the classes in a single file.
+ * - Other packages may re-export classes from other non-entry point files.
+ * - Some formats may contain multiple "modules" in a single file.
+ */
+export class PackageTransformer {
+  transform(packagePath: string, format: string): void {
+    const sourceNodeModules = this.findNodeModulesPath(packagePath);
+    const targetNodeModules = sourceNodeModules.replace(/node_modules$/, 'node_modules_ngtsc');
+    const entryPointPaths = getEntryPoints(packagePath, format);
+    entryPointPaths.forEach(entryPointPath => {
+      const options: ts.CompilerOptions = {allowJs: true, rootDir: entryPointPath};
+      const host = ts.createCompilerHost(options);
+      const packageProgram = ts.createProgram([entryPointPath], options, host);
+      const entryPointFile = packageProgram.getSourceFile(entryPointPath) !;
+      const typeChecker = packageProgram.getTypeChecker();
+
+      const reflectionHost = this.getHost(format, packageProgram);
+      const parser = this.getFileParser(format, packageProgram, reflectionHost);
+      const analyzer = new Analyzer(typeChecker, reflectionHost);
+      const renderer = this.getRenderer(format, packageProgram, reflectionHost);
+
+      const parsedFiles = parser.parseFile(entryPointFile);
+      parsedFiles.forEach(parsedFile => {
+        const analyzedFile = analyzer.analyzeFile(parsedFile);
+        const targetPath = resolve(
+            targetNodeModules, relative(sourceNodeModules, analyzedFile.sourceFile.fileName));
+        const {source, map} = renderer.renderFile(analyzedFile, targetPath);
+        this.writeFile(source);
+        if (map) {
+          this.writeFile(map);
+        }
+      });
+    });
+  }
+
+  getHost(format: string, program: ts.Program): NgccReflectionHost {
+    switch (format) {
+      case 'esm2015':
+      case 'fesm2015':
+        return new Esm2015ReflectionHost(program.getTypeChecker());
+      case 'fesm5':
+        return new Esm5ReflectionHost(program.getTypeChecker());
+      default:
+        throw new Error(`Relection host for "${format}" not yet implemented.`);
+    }
+  }
+
+  getFileParser(format: string, program: ts.Program, host: NgccReflectionHost): FileParser {
+    switch (format) {
+      case 'esm2015':
+      case 'fesm2015':
+        return new Esm2015FileParser(program, host);
+      case 'fesm5':
+        return new Esm5FileParser(program, host);
+      default:
+        throw new Error(`File parser for "${format}" not yet implemented.`);
+    }
+  }
+
+  getRenderer(format: string, program: ts.Program, host: NgccReflectionHost): Renderer {
+    switch (format) {
+      case 'esm2015':
+      case 'fesm2015':
+        return new Esm2015Renderer(host);
+      case 'fesm5':
+        return new Esm5Renderer(host);
+      default:
+        throw new Error(`Renderer for "${format}" not yet implemented.`);
+    }
+  }
+
+  findNodeModulesPath(src: string): string {
+    while (src && !/node_modules$/.test(src)) {
+      src = dirname(src);
+    }
+    return src;
+  }
+
+  writeFile(file: FileInfo): void {
+    mkdir('-p', dirname(file.path));
+    writeFileSync(file.path, file.contents, 'utf8');
+  }
+}
diff --git a/packages/compiler-cli/src/ngcc/src/utils.ts b/packages/compiler-cli/src/ngcc/src/utils.ts
new file mode 100644
index 000000000000..425e6c9da718
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/src/utils.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 * as ts from 'typescript';
+
+export function getOriginalSymbol(checker: ts.TypeChecker): (symbol: ts.Symbol) => ts.Symbol {
+  return function(symbol: ts.Symbol) {
+    return ts.SymbolFlags.Alias & symbol.flags ? checker.getAliasedSymbol(symbol) : symbol;
+  };
+}
+
+export function isDefined<T>(value: T | undefined | null): value is T {
+  return !!value;
+}
+
+export function getNameText(name: ts.PropertyName | ts.BindingName): string {
+  return ts.isIdentifier(name) || ts.isLiteralExpression(name) ? name.text : name.getText();
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngcc/test/BUILD.bazel b/packages/compiler-cli/src/ngcc/test/BUILD.bazel
new file mode 100644
index 000000000000..5f534a566260
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/BUILD.bazel
@@ -0,0 +1,27 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob([
+        "**/*.ts",
+    ]),
+    deps = [
+        "//packages/compiler-cli/src/ngcc",
+        "//packages/compiler-cli/src/ngtsc/host",
+        "//packages/compiler-cli/src/ngtsc/testing",
+        "//packages/compiler-cli/src/ngtsc/transform",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_no_angular_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node_no_angular",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngcc/test/analyzer_spec.ts b/packages/compiler-cli/src/ngcc/test/analyzer_spec.ts
new file mode 100644
index 000000000000..96fc978071b4
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/analyzer_spec.ts
@@ -0,0 +1,113 @@
+/**
+ * @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 ts from 'typescript';
+import {Decorator} from '../../ngtsc/host';
+import {DecoratorHandler} from '../../ngtsc/transform';
+import {AnalyzedFile, Analyzer} from '../src/analyzer';
+import {Esm2015ReflectionHost} from '../src/host/esm2015_host';
+import {ParsedClass} from '../src/parsing/parsed_class';
+import {ParsedFile} from '../src/parsing/parsed_file';
+import {getDeclaration, makeProgram} from './helpers/utils';
+
+const TEST_PROGRAM = {
+  name: 'test.js',
+  contents: `
+  import {Component, Injectable} from '@angular/core';
+
+  @Component()
+  export class MyComponent {}
+
+  @Injectable()
+  export class MyService {}
+  `
+};
+
+function createTestHandler() {
+  const handler = jasmine.createSpyObj<DecoratorHandler<any, any>>('TestDecoratorHandler', [
+    'detect',
+    'analyze',
+    'compile',
+  ]);
+  // Only detect the Component decorator
+  handler.detect.and.callFake((node: ts.Declaration, decorators: Decorator[]) => {
+    if (!decorators) {
+      return undefined;
+    }
+    return decorators.find(d => d.name === 'Component');
+  });
+  // The "test" analysis is just the name of the decorator being analyzed
+  handler.analyze.and.callFake(
+      ((decl: ts.Declaration, dec: Decorator) => ({analysis: dec.name, diagnostics: null})));
+  // The "test" compilation result is just the name of the decorator being compiled
+  handler.compile.and.callFake(((decl: ts.Declaration, analysis: any) => ({analysis})));
+  return handler;
+}
+
+function createParsedFile(program: ts.Program) {
+  const file = new ParsedFile(program.getSourceFile('test.js') !);
+
+  const componentClass = getDeclaration(program, 'test.js', 'MyComponent', ts.isClassDeclaration);
+  file.decoratedClasses.push(new ParsedClass('MyComponent', {} as any, [{
+                                               name: 'Component',
+                                               import: {from: '@angular/core', name: 'Component'},
+                                               node: null as any,
+                                               args: null
+                                             }]));
+
+  const serviceClass = getDeclaration(program, 'test.js', 'MyService', ts.isClassDeclaration);
+  file.decoratedClasses.push(new ParsedClass('MyService', {} as any, [{
+                                               name: 'Injectable',
+                                               import: {from: '@angular/core', name: 'Injectable'},
+                                               node: null as any,
+                                               args: null
+                                             }]));
+
+  return file;
+}
+
+describe('Analyzer', () => {
+  describe('analyzeFile()', () => {
+    let program: ts.Program;
+    let testHandler: jasmine.SpyObj<DecoratorHandler<any, any>>;
+    let result: AnalyzedFile;
+
+    beforeEach(() => {
+      program = makeProgram(TEST_PROGRAM);
+      const file = createParsedFile(program);
+      const analyzer = new Analyzer(
+          program.getTypeChecker(), new Esm2015ReflectionHost(program.getTypeChecker()));
+      testHandler = createTestHandler();
+      analyzer.handlers = [testHandler];
+      result = analyzer.analyzeFile(file);
+    });
+
+    it('should return an object containing a reference to the original source file',
+       () => { expect(result.sourceFile).toBe(program.getSourceFile('test.js') !); });
+
+    it('should call detect on the decorator handlers with each class from the parsed file', () => {
+      expect(testHandler.detect).toHaveBeenCalledTimes(2);
+      expect(testHandler.detect.calls.allArgs()[0][1]).toEqual([jasmine.objectContaining(
+          {name: 'Component'})]);
+      expect(testHandler.detect.calls.allArgs()[1][1]).toEqual([jasmine.objectContaining(
+          {name: 'Injectable'})]);
+    });
+
+    it('should return an object containing the classes that were analyzed', () => {
+      expect(result.analyzedClasses.length).toEqual(1);
+      expect(result.analyzedClasses[0].name).toEqual('MyComponent');
+    });
+
+    it('should analyze and compile the classes that are detected', () => {
+      expect(testHandler.analyze).toHaveBeenCalledTimes(1);
+      expect(testHandler.analyze.calls.allArgs()[0][1].name).toEqual('Component');
+
+      expect(testHandler.compile).toHaveBeenCalledTimes(1);
+      expect(testHandler.compile.calls.allArgs()[0][1]).toEqual('Component');
+    });
+  });
+});
diff --git a/packages/compiler-cli/src/ngcc/test/helpers/utils.ts b/packages/compiler-cli/src/ngcc/test/helpers/utils.ts
new file mode 100644
index 000000000000..4caa1e1d2e6b
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/helpers/utils.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 * as ts from 'typescript';
+import {makeProgram as _makeProgram} from '../../../ngtsc/testing/in_memory_typescript';
+
+export {getDeclaration} from '../../../ngtsc/testing/in_memory_typescript';
+
+export function makeProgram(...files: {name: string, contents: string}[]): ts.Program {
+  return _makeProgram([getFakeCore(), ...files], {allowJs: true, checkJs: false}).program;
+}
+
+// TODO: unify this with the //packages/compiler-cli/test/ngtsc/fake_core package
+export function getFakeCore() {
+  return {
+    name: 'node_modules/@angular/core/index.ts',
+    contents: `
+      type FnWithArg<T> = (arg?: any) => T;
+
+      function callableClassDecorator(): FnWithArg<(clazz: any) => any> {
+        return null !;
+      }
+
+      function callableParamDecorator(): FnWithArg<(a: any, b: any, c: any) => void> {
+        return null !;
+      }
+
+      function makePropDecorator(): any {
+      }
+
+      export const Component = callableClassDecorator();
+      export const Directive = callableClassDecorator();
+      export const Injectable = callableClassDecorator();
+      export const NgModule = callableClassDecorator();
+
+      export const Input = makePropDecorator();
+
+      export const Inject = callableParamDecorator();
+      export const Self = callableParamDecorator();
+      export const SkipSelf = callableParamDecorator();
+      export const Optional = callableParamDecorator();
+
+      export class InjectionToken {
+        constructor(name: string) {}
+      }
+    `
+  };
+}
diff --git a/packages/compiler-cli/src/ngcc/test/host/esm2015_host_spec.ts b/packages/compiler-cli/src/ngcc/test/host/esm2015_host_spec.ts
new file mode 100644
index 000000000000..b30866ade3fe
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/host/esm2015_host_spec.ts
@@ -0,0 +1,1020 @@
+/**
+ * @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 ts from 'typescript';
+import {ClassMemberKind, Import} from '../../../ngtsc/host';
+import {Esm2015ReflectionHost} from '../../src/host/esm2015_host';
+import {getDeclaration, makeProgram} from '../helpers/utils';
+
+const SOME_DIRECTIVE_FILE = {
+  name: '/some_directive.js',
+  contents: `
+    import { Directive, Inject, InjectionToken, Input, HostListener, HostBinding } from '@angular/core';
+
+    const INJECTED_TOKEN = new InjectionToken('injected');
+    const ViewContainerRef = {};
+    const TemplateRef = {};
+
+    class SomeDirective {
+      constructor(_viewContainer, _template, injected) {
+        this.instanceProperty = 'instance';
+      }
+      instanceMethod() {}
+
+      onClick() {}
+
+      @HostBinding('class.foo')
+      get isClassFoo() { return false; }
+
+      static staticMethod() {}
+    }
+    SomeDirective.staticProperty = 'static';
+    SomeDirective.decorators = [
+      { type: Directive, args: [{ selector: '[someDirective]' },] }
+    ];
+    SomeDirective.ctorParameters = () => [
+      { type: ViewContainerRef, },
+      { type: TemplateRef, },
+      { type: undefined, decorators: [{ type: Inject, args: [INJECTED_TOKEN,] },] },
+    ];
+    SomeDirective.propDecorators = {
+      "input1": [{ type: Input },],
+      "input2": [{ type: Input },],
+      "target": [{ type: HostBinding, args: ['attr.target',] }, { type: Input },],
+      "onClick": [{ type: HostListener, args: ['click',] },],
+    };
+  `,
+};
+
+const SIMPLE_CLASS_FILE = {
+  name: '/simple_class.js',
+  contents: `
+    class EmptyClass {}
+    class NoDecoratorConstructorClass {
+      constructor(foo) {}
+    }
+  `,
+};
+
+const FOO_FUNCTION_FILE = {
+  name: '/foo_function.js',
+  contents: `
+    import { Directive } from '@angular/core';
+
+    function foo() {}
+    foo.decorators = [
+      { type: Directive, args: [{ selector: '[ignored]' },] }
+    ];
+  `,
+};
+
+const INVALID_DECORATORS_FILE = {
+  name: '/invalid_decorators.js',
+  contents: `
+    const NotArrayLiteralDecorator = {};
+    class NotArrayLiteral {
+    }
+    NotArrayLiteral.decorators = () => [
+      { type: NotArrayLiteralDecorator, args: [{ selector: '[ignored]' },] },
+    ];
+
+    const NotObjectLiteralDecorator = {};
+    class NotObjectLiteral {
+    }
+    NotObjectLiteral.decorators = [
+      "This is not an object literal",
+      { type: NotObjectLiteralDecorator },
+    ];
+
+    const NoTypePropertyDecorator1 = {};
+    const NoTypePropertyDecorator2 = {};
+    class NoTypeProperty {
+    }
+    NoTypeProperty.decorators = [
+      { notType: NoTypePropertyDecorator1 },
+      { type: NoTypePropertyDecorator2 },
+    ];
+
+    const NotIdentifierDecorator = {};
+    class NotIdentifier {
+    }
+    NotIdentifier.decorators = [
+      { type: 'StringsLiteralsAreNotIdentifiers' },
+      { type: NotIdentifierDecorator },
+    ];
+  `,
+};
+
+const INVALID_DECORATOR_ARGS_FILE = {
+  name: '/invalid_decorator_args.js',
+  contents: `
+    const NoArgsPropertyDecorator = {};
+    class NoArgsProperty {
+    }
+    NoArgsProperty.decorators = [
+      { type: NoArgsPropertyDecorator },
+    ];
+
+    const NoPropertyAssignmentDecorator = {};
+    const args = [{ selector: '[ignored]' },];
+    class NoPropertyAssignment {
+    }
+    NoPropertyAssignment.decorators = [
+      { type: NoPropertyAssignmentDecorator, args },
+    ];
+
+    const NotArrayLiteralDecorator = {};
+    class NotArrayLiteral {
+    }
+    NotArrayLiteral.decorators = [
+      { type: NotArrayLiteralDecorator, args: () => [{ selector: '[ignored]' },] },
+    ];
+  `,
+};
+
+const INVALID_PROP_DECORATORS_FILE = {
+  name: '/invalid_prop_decorators.js',
+  contents: `
+    const NotObjectLiteralDecorator = {};
+    class NotObjectLiteral {
+    }
+    NotObjectLiteral.propDecorators = () => ({
+      "prop": [{ type: NotObjectLiteralDecorator },]
+    });
+
+    const NotObjectLiteralPropDecorator = {};
+    class NotObjectLiteralProp {
+    }
+    NotObjectLiteralProp.propDecorators = {
+      "prop": [
+        "This is not an object literal",
+        { type: NotObjectLiteralPropDecorator },
+      ]
+    };
+
+    const NoTypePropertyDecorator1 = {};
+    const NoTypePropertyDecorator2 = {};
+    class NoTypeProperty {
+    }
+    NoTypeProperty.propDecorators = {
+      "prop": [
+        { notType: NoTypePropertyDecorator1 },
+        { type: NoTypePropertyDecorator2 },
+      ]
+    };
+
+    const NotIdentifierDecorator = {};
+    class NotIdentifier {
+    }
+    NotIdentifier.propDecorators = {
+      "prop": [
+        { type: 'StringsLiteralsAreNotIdentifiers' },
+        { type: NotIdentifierDecorator },
+      ]
+    };
+  `,
+};
+
+const INVALID_PROP_DECORATOR_ARGS_FILE = {
+  name: '/invalid_prop_decorator_args.js',
+  contents: `
+    const NoArgsPropertyDecorator = {};
+    class NoArgsProperty {
+    }
+    NoArgsProperty.propDecorators = {
+      "prop": [{ type: NoArgsPropertyDecorator },]
+    };
+
+    const NoPropertyAssignmentDecorator = {};
+    const args = [{ selector: '[ignored]' },];
+    class NoPropertyAssignment {
+    }
+    NoPropertyAssignment.propDecorators = {
+      "prop": [{ type: NoPropertyAssignmentDecorator, args },]
+    };
+
+    const NotArrayLiteralDecorator = {};
+    class NotArrayLiteral {
+    }
+    NotArrayLiteral.propDecorators = {
+      "prop": [{ type: NotArrayLiteralDecorator, args: () => [{ selector: '[ignored]' },] },],
+    };
+  `,
+};
+
+const INVALID_CTOR_DECORATORS_FILE = {
+  name: '/invalid_ctor_decorators.js',
+  contents: `
+    const NoParametersDecorator = {};
+    class NoParameters {
+      constructor() {
+      }
+    }
+
+    const NotArrowFunctionDecorator = {};
+    class NotArrowFunction {
+      constructor(arg1) {
+      }
+    }
+    NotArrowFunction.ctorParameters = function() {
+      return { type: 'ParamType', decorators: [{ type: NotArrowFunctionDecorator },] };
+    };
+
+    const NotArrayLiteralDecorator = {};
+    class NotArrayLiteral {
+      constructor(arg1) {
+      }
+    }
+    NotArrayLiteral.ctorParameters = () => 'StringsAreNotArrayLiterals';
+
+    const NotObjectLiteralDecorator = {};
+    class NotObjectLiteral {
+      constructor(arg1, arg2) {
+      }
+    }
+    NotObjectLiteral.ctorParameters = () => [
+      "This is not an object literal",
+      { type: 'ParamType', decorators: [{ type: NotObjectLiteralDecorator },] },
+    ];
+
+    const NoTypePropertyDecorator1 = {};
+    const NoTypePropertyDecorator2 = {};
+    class NoTypeProperty {
+      constructor(arg1, arg2) {
+      }
+    }
+    NoTypeProperty.ctorParameters = () => [
+      {
+        type: 'ParamType',
+        decorators: [
+          { notType: NoTypePropertyDecorator1 },
+          { type: NoTypePropertyDecorator2 },
+        ]
+      },
+    ];
+
+    const NotIdentifierDecorator = {};
+    class NotIdentifier {
+      constructor(arg1, arg2) {
+      }
+    }
+    NotIdentifier.ctorParameters = () => [
+      {
+        type: 'ParamType',
+        decorators: [
+          { type: 'StringsLiteralsAreNotIdentifiers' },
+          { type: NotIdentifierDecorator },
+        ]
+      },
+    ];
+  `,
+};
+
+const INVALID_CTOR_DECORATOR_ARGS_FILE = {
+  name: '/invalid_ctor_decorator_args.js',
+  contents: `
+    const NoArgsPropertyDecorator = {};
+    class NoArgsProperty {
+      constructor(arg1) {
+      }
+    }
+    NoArgsProperty.ctorParameters = () => [
+      { type: 'ParamType', decorators: [{ type: NoArgsPropertyDecorator },] },
+    ];
+
+    const NoPropertyAssignmentDecorator = {};
+    const args = [{ selector: '[ignored]' },];
+    class NoPropertyAssignment {
+      constructor(arg1) {
+      }
+    }
+    NoPropertyAssignment.ctorParameters = () => [
+      { type: 'ParamType', decorators: [{ type: NoPropertyAssignmentDecorator, args },] },
+    ];
+
+    const NotArrayLiteralDecorator = {};
+    class NotArrayLiteral {
+      constructor(arg1) {
+      }
+    }
+    NotArrayLiteral.ctorParameters = () => [
+      { type: 'ParamType', decorators: [{ type: NotArrayLiteralDecorator, args: () => [{ selector: '[ignored]' },] },] },
+    ];
+  `,
+};
+
+const IMPORTS_FILES = [
+  {
+    name: '/a.js',
+    contents: `
+      export const a = 'a';
+    `,
+  },
+  {
+    name: '/b.js',
+    contents: `
+      import {a} from './a.js';
+      import {a as foo} from './a.js';
+
+      const b = a;
+      const c = foo;
+      const d = b;
+    `,
+  },
+];
+
+const EXPORTS_FILES = [
+  {
+    name: '/a.js',
+    contents: `
+      export const a = 'a';
+    `,
+  },
+  {
+    name: '/b.js',
+    contents: `
+      import {Directive} from '@angular/core';
+      import {a} from './a';
+      import {a as foo} from './a';
+      export {Directive} from '@angular/core';
+      export {a} from './a';
+      export const b = a;
+      export const c = foo;
+      export const d = b;
+      export const e = 'e';
+      export const DirectiveX = Directive;
+      export class SomeClass {}
+    `,
+  },
+];
+
+describe('Esm2015ReflectionHost', () => {
+
+  describe('getDecoratorsOfDeclaration()', () => {
+    it('should find the decorators on a class', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+      expect(decorators).toBeDefined();
+      expect(decorators.length).toEqual(1);
+
+      const decorator = decorators[0];
+      expect(decorator.name).toEqual('Directive');
+      expect(decorator.import).toEqual({name: 'Directive', from: '@angular/core'});
+      expect(decorator.args !.map(arg => arg.getText())).toEqual([
+        '{ selector: \'[someDirective]\' }',
+      ]);
+    });
+
+    it('should return null if the symbol is not a class', () => {
+      const program = makeProgram(FOO_FUNCTION_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const functionNode =
+          getDeclaration(program, FOO_FUNCTION_FILE.name, 'foo', ts.isFunctionDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(functionNode);
+      expect(decorators).toBe(null);
+    });
+
+    it('should return null if there are no decorators', () => {
+      const program = makeProgram(SIMPLE_CLASS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SIMPLE_CLASS_FILE.name, 'EmptyClass', ts.isClassDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode);
+      expect(decorators).toBe(null);
+    });
+
+    it('should ignore `decorators` if it is not an array literal', () => {
+      const program = makeProgram(INVALID_DECORATORS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_DECORATORS_FILE.name, 'NotArrayLiteral', ts.isClassDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode);
+      expect(decorators).toEqual([]);
+    });
+
+    it('should ignore decorator elements that are not object literals', () => {
+      const program = makeProgram(INVALID_DECORATORS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_DECORATORS_FILE.name, 'NotObjectLiteral', ts.isClassDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NotObjectLiteralDecorator'}));
+    });
+
+    it('should ignore decorator elements that have no `type` property', () => {
+      const program = makeProgram(INVALID_DECORATORS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_DECORATORS_FILE.name, 'NoTypeProperty', ts.isClassDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NoTypePropertyDecorator2'}));
+    });
+
+    it('should ignore decorator elements whose `type` value is not an identifier', () => {
+      const program = makeProgram(INVALID_DECORATORS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_DECORATORS_FILE.name, 'NotIdentifier', ts.isClassDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NotIdentifierDecorator'}));
+    });
+
+    it('should use `getImportOfIdentifier()` to retrieve import info', () => {
+      const mockImportInfo = {} as Import;
+      const spy = spyOn(Esm2015ReflectionHost.prototype, 'getImportOfIdentifier')
+                      .and.returnValue(mockImportInfo);
+
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+      expect(decorators.length).toEqual(1);
+      expect(decorators[0].import).toBe(mockImportInfo);
+
+      const typeIdentifier = spy.calls.mostRecent().args[0] as ts.Identifier;
+      expect(typeIdentifier.text).toBe('Directive');
+    });
+
+    describe('(returned decorators `args`)', () => {
+      it('should be an empty array if decorator has no `args` property', () => {
+        const program = makeProgram(INVALID_DECORATOR_ARGS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_DECORATOR_ARGS_FILE.name, 'NoArgsProperty', ts.isClassDeclaration);
+        const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoArgsPropertyDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if decorator\'s `args` has no property assignment', () => {
+        const program = makeProgram(INVALID_DECORATOR_ARGS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_DECORATOR_ARGS_FILE.name, 'NoPropertyAssignment',
+            ts.isClassDeclaration);
+        const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoPropertyAssignmentDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if `args` property value is not an array literal', () => {
+        const program = makeProgram(INVALID_DECORATOR_ARGS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_DECORATOR_ARGS_FILE.name, 'NotArrayLiteral', ts.isClassDeclaration);
+        const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NotArrayLiteralDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+    });
+  });
+
+  describe('getMembersOfClass()', () => {
+    it('should find decorated properties on a class', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+      const members = host.getMembersOfClass(classNode);
+
+      const input1 = members.find(member => member.name === 'input1') !;
+      expect(input1.kind).toEqual(ClassMemberKind.Property);
+      expect(input1.isStatic).toEqual(false);
+      expect(input1.decorators !.map(d => d.name)).toEqual(['Input']);
+
+      const input2 = members.find(member => member.name === 'input2') !;
+      expect(input2.kind).toEqual(ClassMemberKind.Property);
+      expect(input2.isStatic).toEqual(false);
+      expect(input1.decorators !.map(d => d.name)).toEqual(['Input']);
+    });
+
+    it('should find non decorated properties on a class', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+      const members = host.getMembersOfClass(classNode);
+
+      const instanceProperty = members.find(member => member.name === 'instanceProperty') !;
+      expect(instanceProperty.kind).toEqual(ClassMemberKind.Property);
+      expect(instanceProperty.isStatic).toEqual(false);
+      expect(ts.isBinaryExpression(instanceProperty.implementation !)).toEqual(true);
+      expect(instanceProperty.value !.getText()).toEqual(`'instance'`);
+    });
+
+    it('should find static methods on a class', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+      debugger;
+      const members = host.getMembersOfClass(classNode);
+
+      const staticMethod = members.find(member => member.name === 'staticMethod') !;
+      expect(staticMethod.kind).toEqual(ClassMemberKind.Method);
+      expect(staticMethod.isStatic).toEqual(true);
+      expect(ts.isMethodDeclaration(staticMethod.implementation !)).toEqual(true);
+    });
+
+    it('should find static properties on a class', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+      const members = host.getMembersOfClass(classNode);
+
+      const staticProperty = members.find(member => member.name === 'staticProperty') !;
+      expect(staticProperty.kind).toEqual(ClassMemberKind.Property);
+      expect(staticProperty.isStatic).toEqual(true);
+      expect(ts.isPropertyAccessExpression(staticProperty.implementation !)).toEqual(true);
+      expect(staticProperty.value !.getText()).toEqual(`'static'`);
+    });
+
+    it('should throw if the symbol is not a class', () => {
+      const program = makeProgram(FOO_FUNCTION_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const functionNode =
+          getDeclaration(program, FOO_FUNCTION_FILE.name, 'foo', ts.isFunctionDeclaration);
+      expect(() => {
+        host.getMembersOfClass(functionNode);
+      }).toThrowError(`Attempted to get members of a non-class: "function foo() {}"`);
+    });
+
+    it('should return an empty array if there are no prop decorators', () => {
+      const program = makeProgram(SIMPLE_CLASS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SIMPLE_CLASS_FILE.name, 'EmptyClass', ts.isClassDeclaration);
+      const members = host.getMembersOfClass(classNode);
+
+      expect(members).toEqual([]);
+    });
+
+    it('should not process decorated properties in `propDecorators` if it is not an object literal',
+       () => {
+         const program = makeProgram(INVALID_PROP_DECORATORS_FILE);
+         const host = new Esm2015ReflectionHost(program.getTypeChecker());
+         const classNode = getDeclaration(
+             program, INVALID_PROP_DECORATORS_FILE.name, 'NotObjectLiteral', ts.isClassDeclaration);
+         const members = host.getMembersOfClass(classNode);
+
+         expect(members.map(member => member.name)).not.toContain('prop');
+       });
+
+    it('should ignore prop decorator elements that are not object literals', () => {
+      const program = makeProgram(INVALID_PROP_DECORATORS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_PROP_DECORATORS_FILE.name, 'NotObjectLiteralProp',
+          ts.isClassDeclaration);
+      const members = host.getMembersOfClass(classNode);
+      const prop = members.find(m => m.name === 'prop') !;
+      const decorators = prop.decorators !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({
+        name: 'NotObjectLiteralPropDecorator'
+      }));
+    });
+
+    it('should ignore prop decorator elements that have no `type` property', () => {
+      const program = makeProgram(INVALID_PROP_DECORATORS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_PROP_DECORATORS_FILE.name, 'NoTypeProperty', ts.isClassDeclaration);
+      const members = host.getMembersOfClass(classNode);
+      const prop = members.find(m => m.name === 'prop') !;
+      const decorators = prop.decorators !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NoTypePropertyDecorator2'}));
+    });
+
+    it('should ignore prop decorator elements whose `type` value is not an identifier', () => {
+      const program = makeProgram(INVALID_PROP_DECORATORS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_PROP_DECORATORS_FILE.name, 'NotIdentifier', ts.isClassDeclaration);
+      const members = host.getMembersOfClass(classNode);
+      const prop = members.find(m => m.name === 'prop') !;
+      const decorators = prop.decorators !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NotIdentifierDecorator'}));
+    });
+
+    it('should use `getImportOfIdentifier()` to retrieve import info', () => {
+      let callCount = 0;
+      const spy =
+          spyOn(Esm2015ReflectionHost.prototype, 'getImportOfIdentifier').and.callFake(() => {
+            callCount++;
+            return {name: `name${callCount}`, from: `from${callCount}`};
+          });
+
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+      const members = host.getMembersOfClass(classNode);
+
+      expect(spy).toHaveBeenCalled();
+      expect(spy.calls.allArgs().map(arg => arg[0].getText())).toEqual([
+        'Input',
+        'Input',
+        'HostBinding',
+        'Input',
+        'HostListener',
+      ]);
+
+      const index = members.findIndex(member => member.name === 'input1');
+      expect(members[index].decorators !.length).toBe(1);
+      expect(members[index].decorators ![0].import).toEqual({name: 'name1', from: 'from1'});
+    });
+
+    describe('(returned prop decorators `args`)', () => {
+      it('should be an empty array if prop decorator has no `args` property', () => {
+        const program = makeProgram(INVALID_PROP_DECORATOR_ARGS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_PROP_DECORATOR_ARGS_FILE.name, 'NoArgsProperty',
+            ts.isClassDeclaration);
+        const members = host.getMembersOfClass(classNode);
+        const prop = members.find(m => m.name === 'prop') !;
+        const decorators = prop.decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoArgsPropertyDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if prop decorator\'s `args` has no property assignment', () => {
+        const program = makeProgram(INVALID_PROP_DECORATOR_ARGS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_PROP_DECORATOR_ARGS_FILE.name, 'NoPropertyAssignment',
+            ts.isClassDeclaration);
+        const members = host.getMembersOfClass(classNode);
+        const prop = members.find(m => m.name === 'prop') !;
+        const decorators = prop.decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoPropertyAssignmentDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if `args` property value is not an array literal', () => {
+        const program = makeProgram(INVALID_PROP_DECORATOR_ARGS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_PROP_DECORATOR_ARGS_FILE.name, 'NotArrayLiteral',
+            ts.isClassDeclaration);
+        const members = host.getMembersOfClass(classNode);
+        const prop = members.find(m => m.name === 'prop') !;
+        const decorators = prop.decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NotArrayLiteralDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+    });
+  });
+
+  describe('getConstructorParameters', () => {
+    it('should find the decorated constructor parameters', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+      const parameters = host.getConstructorParameters(classNode);
+
+      expect(parameters).toBeDefined();
+      expect(parameters !.map(parameter => parameter.name)).toEqual([
+        '_viewContainer', '_template', 'injected'
+      ]);
+      expect(parameters !.map(parameter => parameter.type !.getText())).toEqual([
+        'ViewContainerRef', 'TemplateRef', 'undefined'
+      ]);
+    });
+
+    it('should throw if the symbol is not a class', () => {
+      const program = makeProgram(FOO_FUNCTION_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const functionNode =
+          getDeclaration(program, FOO_FUNCTION_FILE.name, 'foo', ts.isFunctionDeclaration);
+      expect(() => { host.getConstructorParameters(functionNode); })
+          .toThrowError(
+              'Attempted to get constructor parameters of a non-class: "function foo() {}"');
+    });
+
+    it('should return `null` if there is no constructor', () => {
+      const program = makeProgram(SIMPLE_CLASS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SIMPLE_CLASS_FILE.name, 'EmptyClass', ts.isClassDeclaration);
+      const parameters = host.getConstructorParameters(classNode);
+      expect(parameters).toBe(null);
+    });
+
+    it('should return an array even if there are no decorators', () => {
+      const program = makeProgram(SIMPLE_CLASS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SIMPLE_CLASS_FILE.name, 'NoDecoratorConstructorClass', ts.isClassDeclaration);
+      const parameters = host.getConstructorParameters(classNode);
+
+      expect(parameters).toEqual(jasmine.any(Array));
+      expect(parameters !.length).toEqual(1);
+      expect(parameters ![0].name).toEqual('foo');
+      expect(parameters ![0].decorators).toBe(null);
+    });
+
+    it('should return an empty array if there are no constructor parameters', () => {
+      const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_CTOR_DECORATORS_FILE.name, 'NoParameters', ts.isClassDeclaration);
+      const parameters = host.getConstructorParameters(classNode);
+
+      expect(parameters).toEqual([]);
+    });
+
+    it('should ignore `ctorParameters` if it is not an arrow function', () => {
+      const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_CTOR_DECORATORS_FILE.name, 'NotArrowFunction', ts.isClassDeclaration);
+      const parameters = host.getConstructorParameters(classNode);
+
+      expect(parameters !.length).toBe(1);
+      expect(parameters ![0]).toEqual(jasmine.objectContaining({
+        name: 'arg1',
+        decorators: null,
+      }));
+    });
+
+    it('should ignore `ctorParameters` if it does not return an array literal', () => {
+      const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_CTOR_DECORATORS_FILE.name, 'NotArrayLiteral', ts.isClassDeclaration);
+      const parameters = host.getConstructorParameters(classNode);
+
+      expect(parameters !.length).toBe(1);
+      expect(parameters ![0]).toEqual(jasmine.objectContaining({
+        name: 'arg1',
+        decorators: null,
+      }));
+    });
+
+    describe('(returned parameters `decorators`)', () => {
+      it('should ignore param decorator elements that are not object literals', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATORS_FILE.name, 'NotObjectLiteral', ts.isClassDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+
+        expect(parameters !.length).toBe(2);
+        expect(parameters ![0]).toEqual(jasmine.objectContaining({
+          name: 'arg1',
+          decorators: null,
+        }));
+        expect(parameters ![1]).toEqual(jasmine.objectContaining({
+          name: 'arg2',
+          decorators: jasmine.any(Array) as any
+        }));
+      });
+
+      it('should ignore param decorator elements that have no `type` property', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATORS_FILE.name, 'NoTypeProperty', ts.isClassDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        const decorators = parameters ![0].decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NoTypePropertyDecorator2'}));
+      });
+
+      it('should ignore param decorator elements whose `type` value is not an identifier', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATORS_FILE.name, 'NotIdentifier', ts.isClassDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        const decorators = parameters ![0].decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NotIdentifierDecorator'}));
+      });
+
+      it('should use `getImportOfIdentifier()` to retrieve import info', () => {
+        const mockImportInfo = {} as Import;
+        const spy = spyOn(Esm2015ReflectionHost.prototype, 'getImportOfIdentifier')
+                        .and.returnValue(mockImportInfo);
+
+        const program = makeProgram(SOME_DIRECTIVE_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        const decorators = parameters ![2].decorators !;
+
+        expect(decorators.length).toEqual(1);
+        expect(decorators[0].import).toBe(mockImportInfo);
+
+        const typeIdentifier = spy.calls.mostRecent().args[0] as ts.Identifier;
+        expect(typeIdentifier.text).toBe('Inject');
+      });
+    });
+
+    describe('(returned parameters `decorators.args`)', () => {
+      it('should be an empty array if param decorator has no `args` property', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATOR_ARGS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATOR_ARGS_FILE.name, 'NoArgsProperty',
+            ts.isClassDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        expect(parameters !.length).toBe(1);
+        const decorators = parameters ![0].decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoArgsPropertyDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if param decorator\'s `args` has no property assignment', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATOR_ARGS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATOR_ARGS_FILE.name, 'NoPropertyAssignment',
+            ts.isClassDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        const decorators = parameters ![0].decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoPropertyAssignmentDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if `args` property value is not an array literal', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATOR_ARGS_FILE);
+        const host = new Esm2015ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATOR_ARGS_FILE.name, 'NotArrayLiteral',
+            ts.isClassDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        const decorators = parameters ![0].decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NotArrayLiteralDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+    });
+  });
+
+  describe('getImportOfIdentifier', () => {
+    it('should find the import of an identifier', () => {
+      const program = makeProgram(...IMPORTS_FILES);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const variableNode =
+          getDeclaration(program, IMPORTS_FILES[1].name, 'b', ts.isVariableDeclaration);
+      const importOfIdent = host.getImportOfIdentifier(variableNode.initializer as ts.Identifier);
+
+      expect(importOfIdent).toEqual({name: 'a', from: './a.js'});
+    });
+
+    it('should find the name by which the identifier was exported, not imported', () => {
+      const program = makeProgram(...IMPORTS_FILES);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const variableNode =
+          getDeclaration(program, IMPORTS_FILES[1].name, 'c', ts.isVariableDeclaration);
+      const importOfIdent = host.getImportOfIdentifier(variableNode.initializer as ts.Identifier);
+
+      expect(importOfIdent).toEqual({name: 'a', from: './a.js'});
+    });
+
+    it('should return null if the identifier was not imported', () => {
+      const program = makeProgram(...IMPORTS_FILES);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const variableNode =
+          getDeclaration(program, IMPORTS_FILES[1].name, 'd', ts.isVariableDeclaration);
+      const importOfIdent = host.getImportOfIdentifier(variableNode.initializer as ts.Identifier);
+
+      expect(importOfIdent).toBeNull();
+    });
+  });
+
+  describe('getDeclarationOfIdentifier', () => {
+    it('should return the declaration of a locally defined identifier', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+      const ctrDecorators = host.getConstructorParameters(classNode) !;
+      const identifierOfViewContainerRef = ctrDecorators[0].type !as ts.Identifier;
+
+      const expectedDeclarationNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'ViewContainerRef', ts.isVariableDeclaration);
+      const actualDeclaration = host.getDeclarationOfIdentifier(identifierOfViewContainerRef);
+      expect(actualDeclaration).not.toBe(null);
+      expect(actualDeclaration !.node).toBe(expectedDeclarationNode);
+      expect(actualDeclaration !.viaModule).toBe(null);
+    });
+
+    it('should return the declaration of an externally defined identifier', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isClassDeclaration);
+      const classDecorators = host.getDecoratorsOfDeclaration(classNode) !;
+      const identifierOfDirective = ((classDecorators[0].node as ts.ObjectLiteralExpression)
+                                         .properties[0] as ts.PropertyAssignment)
+                                        .initializer as ts.Identifier;
+
+      const expectedDeclarationNode = getDeclaration(
+          program, 'node_modules/@angular/core/index.ts', 'Directive', ts.isVariableDeclaration);
+      const actualDeclaration = host.getDeclarationOfIdentifier(identifierOfDirective);
+      expect(actualDeclaration).not.toBe(null);
+      expect(actualDeclaration !.node).toBe(expectedDeclarationNode);
+      expect(actualDeclaration !.viaModule).toBe('@angular/core');
+    });
+  });
+
+  describe('getExportsOfModule()', () => {
+    it('should return a map of all the exports from a given module', () => {
+      const program = makeProgram(...EXPORTS_FILES);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const file = program.getSourceFile(EXPORTS_FILES[1].name) !;
+      const exportDeclarations = host.getExportsOfModule(file);
+      expect(exportDeclarations).not.toBe(null);
+      expect(Array.from(exportDeclarations !.keys())).toEqual([
+        'Directive',
+        'a',
+        'b',
+        'c',
+        'd',
+        'e',
+        'DirectiveX',
+        'SomeClass',
+      ]);
+
+      const values = Array.from(exportDeclarations !.values())
+                         .map(declaration => [declaration.node.getText(), declaration.viaModule]);
+      expect(values).toEqual([
+        // TODO clarify what is expected here...
+        // [`Directive = callableClassDecorator()`, '@angular/core'],
+        [`Directive = callableClassDecorator()`, null],
+        [`a = 'a'`, null],
+        [`b = a`, null],
+        [`c = foo`, null],
+        [`d = b`, null],
+        [`e = 'e'`, null],
+        [`DirectiveX = Directive`, null],
+        ['export class SomeClass {}', null],
+      ]);
+    });
+  });
+
+  describe('isClass()', () => {
+    it('should return true if a given node is a TS class declaration', () => {
+      const program = makeProgram(SIMPLE_CLASS_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const node =
+          getDeclaration(program, SIMPLE_CLASS_FILE.name, 'EmptyClass', ts.isClassDeclaration);
+      expect(host.isClass(node)).toBe(true);
+    });
+
+    it('should return false if a given node is a TS function declaration', () => {
+      const program = makeProgram(FOO_FUNCTION_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const node = getDeclaration(program, FOO_FUNCTION_FILE.name, 'foo', ts.isFunctionDeclaration);
+      expect(host.isClass(node)).toBe(false);
+    });
+  });
+});
diff --git a/packages/compiler-cli/src/ngcc/test/host/esm5_host_spec.ts b/packages/compiler-cli/src/ngcc/test/host/esm5_host_spec.ts
new file mode 100644
index 000000000000..92b9ab0719b6
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/host/esm5_host_spec.ts
@@ -0,0 +1,1058 @@
+/**
+ * @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 ts from 'typescript';
+import {ClassMemberKind, Import} from '../../../ngtsc/host';
+import {Esm5ReflectionHost} from '../../src/host/esm5_host';
+import {getDeclaration, makeProgram} from '../helpers/utils';
+
+const SOME_DIRECTIVE_FILE = {
+  name: '/some_directive.js',
+  contents: `
+    import { Directive, Inject, InjectionToken, Input } from '@angular/core';
+
+    var INJECTED_TOKEN = new InjectionToken('injected');
+    var ViewContainerRef = {};
+    var TemplateRef = {};
+
+    var SomeDirective = (function() {
+      function SomeDirective(_viewContainer, _template, injected) {
+        this.instanceProperty = 'instance';
+      }
+      SomeDirective.prototype = {
+        instanceMethod: function() {},
+      };
+      SomeDirective.staticMethod = function() {};
+      SomeDirective.staticProperty = 'static';
+      SomeDirective.decorators = [
+        { type: Directive, args: [{ selector: '[someDirective]' },] }
+      ];
+      SomeDirective.ctorParameters = function() { return [
+        { type: ViewContainerRef, },
+        { type: TemplateRef, },
+        { type: undefined, decorators: [{ type: Inject, args: [INJECTED_TOKEN,] },] },
+      ]; };
+      SomeDirective.propDecorators = {
+        "input1": [{ type: Input },],
+        "input2": [{ type: Input },],
+      };
+      return SomeDirective;
+    }());
+  `,
+};
+
+const SIMPLE_CLASS_FILE = {
+  name: '/simple_class.js',
+  contents: `
+    var EmptyClass = (function() {
+      function EmptyClass() {}
+      return EmptyClass;
+    }());
+    var NoDecoratorConstructorClass = (function() {
+      function NoDecoratorConstructorClass(foo) {
+      }
+      return NoDecoratorConstructorClass;
+    }());
+  `,
+};
+
+const FOO_FUNCTION_FILE = {
+  name: '/foo_function.js',
+  contents: `
+    import { Directive } from '@angular/core';
+
+    function foo() {}
+    foo.decorators = [
+      { type: Directive, args: [{ selector: '[ignored]' },] }
+    ];
+  `,
+};
+
+const INVALID_DECORATORS_FILE = {
+  name: '/invalid_decorators.js',
+  contents: `
+    var NotArrayLiteralDecorator = {};
+    var NotArrayLiteral = (function() {
+      function NotArrayLiteral() {
+      }
+      NotArrayLiteral.decorators = () => [
+        { type: NotArrayLiteralDecorator, args: [{ selector: '[ignored]' },] },
+      ];
+      return NotArrayLiteral;
+    }());
+
+    var NotObjectLiteralDecorator = {};
+    var NotObjectLiteral = (function() {
+      function NotObjectLiteral() {
+      }
+      NotObjectLiteral.decorators = [
+        "This is not an object literal",
+        { type: NotObjectLiteralDecorator },
+      ];
+      return NotObjectLiteral;
+    }());
+
+    var NoTypePropertyDecorator1 = {};
+    var NoTypePropertyDecorator2 = {};
+    var NoTypeProperty = (function() {
+      function NoTypeProperty() {
+      }
+      NoTypeProperty.decorators = [
+        { notType: NoTypePropertyDecorator1 },
+        { type: NoTypePropertyDecorator2 },
+      ];
+      return NoTypeProperty;
+    }());
+
+    var NotIdentifierDecorator = {};
+    var NotIdentifier = (function() {
+      function NotIdentifier() {
+      }
+      NotIdentifier.decorators = [
+        { type: 'StringsLiteralsAreNotIdentifiers' },
+        { type: NotIdentifierDecorator },
+      ];
+      return NotIdentifier;
+    }());
+  `,
+};
+
+const INVALID_DECORATOR_ARGS_FILE = {
+  name: '/invalid_decorator_args.js',
+  contents: `
+    var NoArgsPropertyDecorator = {};
+    var NoArgsProperty = (function() {
+      function NoArgsProperty() {
+      }
+      NoArgsProperty.decorators = [
+        { type: NoArgsPropertyDecorator },
+      ];
+      return NoArgsProperty;
+    }());
+
+    var NoPropertyAssignmentDecorator = {};
+    var args = [{ selector: '[ignored]' },];
+    var NoPropertyAssignment = (function() {
+      function NoPropertyAssignment() {
+      }
+      NoPropertyAssignment.decorators = [
+        { type: NoPropertyAssignmentDecorator, args },
+      ];
+      return NoPropertyAssignment;
+    }());
+
+    var NotArrayLiteralDecorator = {};
+    var NotArrayLiteral = (function() {
+      function NotArrayLiteral() {
+      }
+      NotArrayLiteral.decorators = [
+        { type: NotArrayLiteralDecorator, args: () => [{ selector: '[ignored]' },] },
+      ];
+      return NotArrayLiteral;
+    }());
+    `,
+};
+
+const INVALID_PROP_DECORATORS_FILE = {
+  name: '/invalid_prop_decorators.js',
+  contents: `
+    var NotObjectLiteralDecorator = {};
+    var NotObjectLiteral = (function() {
+      function NotObjectLiteral() {
+      }
+      NotObjectLiteral.propDecorators = () => ({
+        "prop": [{ type: NotObjectLiteralDecorator },]
+      });
+      return NotObjectLiteral;
+    }());
+
+    var NotObjectLiteralPropDecorator = {};
+    var NotObjectLiteralProp = (function() {
+      function NotObjectLiteralProp() {
+      }
+      NotObjectLiteralProp.propDecorators = {
+        "prop": [
+          "This is not an object literal",
+          { type: NotObjectLiteralPropDecorator },
+        ]
+      };
+      return NotObjectLiteralProp;
+    }());
+
+    var NoTypePropertyDecorator1 = {};
+    var NoTypePropertyDecorator2 = {};
+    var NoTypeProperty = (function() {
+      function NoTypeProperty() {
+      }
+      NoTypeProperty.propDecorators = {
+        "prop": [
+          { notType: NoTypePropertyDecorator1 },
+          { type: NoTypePropertyDecorator2 },
+        ]
+      };
+      return NoTypeProperty;
+    }());
+
+    var NotIdentifierDecorator = {};
+    var NotIdentifier = (function() {
+      function NotIdentifier() {
+      }
+      NotIdentifier.propDecorators = {
+        "prop": [
+          { type: 'StringsLiteralsAreNotIdentifiers' },
+          { type: NotIdentifierDecorator },
+        ]
+      };
+      return NotIdentifier;
+    }());
+    `,
+};
+
+const INVALID_PROP_DECORATOR_ARGS_FILE = {
+  name: '/invalid_prop_decorator_args.js',
+  contents: `
+    var NoArgsPropertyDecorator = {};
+    var NoArgsProperty = (function() {
+      function NoArgsProperty() {
+      }
+      NoArgsProperty.propDecorators = {
+        "prop": [{ type: NoArgsPropertyDecorator },]
+      };
+      return NoArgsProperty;
+    }());
+
+    var NoPropertyAssignmentDecorator = {};
+    var args = [{ selector: '[ignored]' },];
+    var NoPropertyAssignment = (function() {
+      function NoPropertyAssignment() {
+      }
+      NoPropertyAssignment.propDecorators = {
+        "prop": [{ type: NoPropertyAssignmentDecorator, args },]
+      };
+      return NoPropertyAssignment;
+    }());
+
+    var NotArrayLiteralDecorator = {};
+    var NotArrayLiteral = (function() {
+      function NotArrayLiteral() {
+      }
+      NotArrayLiteral.propDecorators = {
+        "prop": [{ type: NotArrayLiteralDecorator, args: () => [{ selector: '[ignored]' },] },],
+      };
+      return NotArrayLiteral;
+    }());
+    `,
+};
+
+const INVALID_CTOR_DECORATORS_FILE = {
+  name: '/invalid_ctor_decorators.js',
+  contents: `
+    var NoParametersDecorator = {};
+    var NoParameters = (function() {
+      function NoParameters() {}
+      return NoParameters;
+    }());
+
+    var ArrowFunctionDecorator = {};
+    var ArrowFunction = (function() {
+      function ArrowFunction(arg1) {
+      }
+      ArrowFunction.ctorParameters = () => [
+        { type: 'ParamType', decorators: [{ type: ArrowFunctionDecorator },] }
+      ];
+      return ArrowFunction;
+    }());
+
+    var NotArrayLiteralDecorator = {};
+    var NotArrayLiteral = (function() {
+      function NotArrayLiteral(arg1) {
+      }
+      NotArrayLiteral.ctorParameters = function() { return 'StringsAreNotArrayLiterals'; };
+      return NotArrayLiteral;
+    }());
+
+    var NotObjectLiteralDecorator = {};
+    var NotObjectLiteral = (function() {
+      function NotObjectLiteral(arg1, arg2) {
+      }
+      NotObjectLiteral.ctorParameters = function() { return [
+        "This is not an object literal",
+        { type: 'ParamType', decorators: [{ type: NotObjectLiteralDecorator },] },
+      ]; };
+      return NotObjectLiteral;
+    }());
+
+    var NoTypePropertyDecorator1 = {};
+    var NoTypePropertyDecorator2 = {};
+    var NoTypeProperty = (function() {
+      function NoTypeProperty(arg1, arg2) {
+      }
+      NoTypeProperty.ctorParameters = function() { return [
+        {
+          type: 'ParamType',
+          decorators: [
+            { notType: NoTypePropertyDecorator1 },
+            { type: NoTypePropertyDecorator2 },
+          ]
+        },
+      ]; };
+      return NoTypeProperty;
+    }());
+
+    var NotIdentifierDecorator = {};
+    var NotIdentifier = (function() {
+      function NotIdentifier(arg1, arg2) {
+      }
+      NotIdentifier.ctorParameters = function() { return [
+        {
+          type: 'ParamType',
+          decorators: [
+            { type: 'StringsLiteralsAreNotIdentifiers' },
+            { type: NotIdentifierDecorator },
+          ]
+        },
+      ]; };
+      return NotIdentifier;
+    }());
+    `,
+};
+
+const INVALID_CTOR_DECORATOR_ARGS_FILE = {
+  name: '/invalid_ctor_decorator_args.js',
+  contents: `
+    var NoArgsPropertyDecorator = {};
+    var NoArgsProperty = (function() {
+      function NoArgsProperty(arg1) {
+      }
+      NoArgsProperty.ctorParameters = function() { return [
+        { type: 'ParamType', decorators: [{ type: NoArgsPropertyDecorator },] },
+      ]; };
+      return NoArgsProperty;
+    }());
+
+    var NoPropertyAssignmentDecorator = {};
+    var args = [{ selector: '[ignored]' },];
+    var NoPropertyAssignment = (function() {
+      function NoPropertyAssignment(arg1) {
+      }
+      NoPropertyAssignment.ctorParameters = function() { return [
+        { type: 'ParamType', decorators: [{ type: NoPropertyAssignmentDecorator, args },] },
+      ]; };
+      return NoPropertyAssignment;
+    }());
+
+    var NotArrayLiteralDecorator = {};
+    var NotArrayLiteral = (function() {
+      function NotArrayLiteral(arg1) {
+      }
+      NotArrayLiteral.ctorParameters = function() { return [
+        { type: 'ParamType', decorators: [{ type: NotArrayLiteralDecorator, args: () => [{ selector: '[ignored]' },] },] },
+      ]; };
+      return NotArrayLiteral;
+    }());
+    `,
+};
+
+const IMPORTS_FILES = [
+  {
+    name: '/a.js',
+    contents: `
+      export const a = 'a';
+    `,
+  },
+  {
+    name: '/b.js',
+    contents: `
+      import {a} from './a.js';
+      import {a as foo} from './a.js';
+
+      var b = a;
+      var c = foo;
+      var d = b;
+    `,
+  },
+];
+
+const EXPORTS_FILES = [
+  {
+    name: '/a.js',
+    contents: `
+      export const a = 'a';
+    `,
+  },
+  {
+    name: '/b.js',
+    contents: `
+      import {Directive} from '@angular/core';
+      import {a} from './a';
+      import {a as foo} from './a';
+      export {Directive} from '@angular/core';
+      export {a} from './a';
+      export var b = a;
+      export var c = foo;
+      export var d = b;
+      export var e = 'e';
+      export var DirectiveX = Directive;
+      export var SomeClass = (function() {
+        function SomeClass() {}
+        return SomeClass;
+      }());
+    `,
+  },
+];
+
+describe('Esm5ReflectionHost', () => {
+
+  describe('getDecoratorsOfDeclaration()', () => {
+    it('should find the decorators on a class', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+      debugger;
+      const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+      expect(decorators).toBeDefined();
+      expect(decorators.length).toEqual(1);
+
+      const decorator = decorators[0];
+      expect(decorator.name).toEqual('Directive');
+      expect(decorator.import).toEqual({name: 'Directive', from: '@angular/core'});
+      expect(decorator.args !.map(arg => arg.getText())).toEqual([
+        '{ selector: \'[someDirective]\' }',
+      ]);
+    });
+
+    it('should return null if the symbol is not a class', () => {
+      const program = makeProgram(FOO_FUNCTION_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const functionNode =
+          getDeclaration(program, FOO_FUNCTION_FILE.name, 'foo', ts.isFunctionDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(functionNode);
+      expect(decorators).toBe(null);
+    });
+
+    it('should return null if there are no decorators', () => {
+      const program = makeProgram(SIMPLE_CLASS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SIMPLE_CLASS_FILE.name, 'EmptyClass', ts.isVariableDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode);
+      expect(decorators).toBe(null);
+    });
+
+    it('should ignore `decorators` if it is not an array literal', () => {
+      const program = makeProgram(INVALID_DECORATORS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_DECORATORS_FILE.name, 'NotArrayLiteral', ts.isVariableDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode);
+      expect(decorators).toEqual([]);
+    });
+
+    it('should ignore decorator elements that are not object literals', () => {
+      const program = makeProgram(INVALID_DECORATORS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_DECORATORS_FILE.name, 'NotObjectLiteral', ts.isVariableDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NotObjectLiteralDecorator'}));
+    });
+
+    it('should ignore decorator elements that have no `type` property', () => {
+      const program = makeProgram(INVALID_DECORATORS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_DECORATORS_FILE.name, 'NoTypeProperty', ts.isVariableDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NoTypePropertyDecorator2'}));
+    });
+
+    it('should ignore decorator elements whose `type` value is not an identifier', () => {
+      const program = makeProgram(INVALID_DECORATORS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_DECORATORS_FILE.name, 'NotIdentifier', ts.isVariableDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NotIdentifierDecorator'}));
+    });
+
+    it('should use `getImportOfIdentifier()` to retrieve import info', () => {
+      const mockImportInfo = {} as Import;
+      const spy = spyOn(Esm5ReflectionHost.prototype, 'getImportOfIdentifier')
+                      .and.returnValue(mockImportInfo);
+
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+      const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+      expect(decorators.length).toEqual(1);
+      expect(decorators[0].import).toBe(mockImportInfo);
+
+      const typeIdentifier = spy.calls.mostRecent().args[0] as ts.Identifier;
+      expect(typeIdentifier.text).toBe('Directive');
+    });
+
+    describe('(returned decorators `args`)', () => {
+      it('should be an empty array if decorator has no `args` property', () => {
+        const program = makeProgram(INVALID_DECORATOR_ARGS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_DECORATOR_ARGS_FILE.name, 'NoArgsProperty', ts.isVariableDeclaration);
+        const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoArgsPropertyDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if decorator\'s `args` has no property assignment', () => {
+        const program = makeProgram(INVALID_DECORATOR_ARGS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_DECORATOR_ARGS_FILE.name, 'NoPropertyAssignment',
+            ts.isVariableDeclaration);
+        const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoPropertyAssignmentDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if `args` property value is not an array literal', () => {
+        const program = makeProgram(INVALID_DECORATOR_ARGS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_DECORATOR_ARGS_FILE.name, 'NotArrayLiteral', ts.isVariableDeclaration);
+        const decorators = host.getDecoratorsOfDeclaration(classNode) !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NotArrayLiteralDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+    });
+  });
+
+  describe('getMembersOfClass()', () => {
+    it('should find decorated members on a class', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+      const members = host.getMembersOfClass(classNode);
+
+      const input1 = members.find(member => member.name === 'input1') !;
+      expect(input1.kind).toEqual(ClassMemberKind.Property);
+      expect(input1.isStatic).toEqual(false);
+      expect(input1.decorators !.map(d => d.name)).toEqual(['Input']);
+
+      const input2 = members.find(member => member.name === 'input2') !;
+      expect(input2.kind).toEqual(ClassMemberKind.Property);
+      expect(input2.isStatic).toEqual(false);
+      expect(input1.decorators !.map(d => d.name)).toEqual(['Input']);
+    });
+
+    it('should find non decorated properties on a class', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+      const members = host.getMembersOfClass(classNode);
+
+      const instanceProperty = members.find(member => member.name === 'instanceProperty') !;
+      expect(instanceProperty.kind).toEqual(ClassMemberKind.Property);
+      expect(instanceProperty.isStatic).toEqual(false);
+      expect(ts.isBinaryExpression(instanceProperty.implementation !)).toEqual(true);
+      expect(instanceProperty.value !.getText()).toEqual(`'instance'`);
+    });
+
+    it('should find static methods on a class', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+      debugger;
+      const members = host.getMembersOfClass(classNode);
+
+      const staticMethod = members.find(member => member.name === 'staticMethod') !;
+      expect(staticMethod.kind).toEqual(ClassMemberKind.Method);
+      expect(staticMethod.isStatic).toEqual(true);
+      expect(ts.isFunctionExpression(staticMethod.implementation !)).toEqual(true);
+    });
+
+    it('should find static properties on a class', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+      const members = host.getMembersOfClass(classNode);
+
+      const staticProperty = members.find(member => member.name === 'staticProperty') !;
+      expect(staticProperty.kind).toEqual(ClassMemberKind.Property);
+      expect(staticProperty.isStatic).toEqual(true);
+      expect(ts.isPropertyAccessExpression(staticProperty.implementation !)).toEqual(true);
+      expect(staticProperty.value !.getText()).toEqual(`'static'`);
+    });
+
+    it('should throw if the symbol is not a class', () => {
+      const program = makeProgram(FOO_FUNCTION_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const functionNode =
+          getDeclaration(program, FOO_FUNCTION_FILE.name, 'foo', ts.isFunctionDeclaration);
+      expect(() => {
+        host.getMembersOfClass(functionNode);
+      }).toThrowError(`Attempted to get members of a non-class: "function foo() {}"`);
+    });
+
+    it('should return an empty array if there are no prop decorators', () => {
+      const program = makeProgram(SIMPLE_CLASS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode =
+          getDeclaration(program, SIMPLE_CLASS_FILE.name, 'EmptyClass', ts.isVariableDeclaration);
+      const members = host.getMembersOfClass(classNode);
+
+      expect(members).toEqual([]);
+    });
+
+    it('should not process decorated properties in `propDecorators` if it is not an object literal',
+       () => {
+         const program = makeProgram(INVALID_PROP_DECORATORS_FILE);
+         const host = new Esm5ReflectionHost(program.getTypeChecker());
+         const classNode = getDeclaration(
+             program, INVALID_PROP_DECORATORS_FILE.name, 'NotObjectLiteral',
+             ts.isVariableDeclaration);
+         const members = host.getMembersOfClass(classNode);
+
+         expect(members.map(member => member.name)).not.toContain('prop');
+       });
+
+    it('should ignore prop decorator elements that are not object literals', () => {
+      const program = makeProgram(INVALID_PROP_DECORATORS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_PROP_DECORATORS_FILE.name, 'NotObjectLiteralProp',
+          ts.isVariableDeclaration);
+      const members = host.getMembersOfClass(classNode);
+      const prop = members.find(m => m.name === 'prop') !;
+      const decorators = prop.decorators !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({
+        name: 'NotObjectLiteralPropDecorator'
+      }));
+    });
+
+    it('should ignore prop decorator elements that have no `type` property', () => {
+      const program = makeProgram(INVALID_PROP_DECORATORS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_PROP_DECORATORS_FILE.name, 'NoTypeProperty', ts.isVariableDeclaration);
+      const members = host.getMembersOfClass(classNode);
+      const prop = members.find(m => m.name === 'prop') !;
+      const decorators = prop.decorators !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NoTypePropertyDecorator2'}));
+    });
+
+    it('should ignore prop decorator elements whose `type` value is not an identifier', () => {
+      const program = makeProgram(INVALID_PROP_DECORATORS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_PROP_DECORATORS_FILE.name, 'NotIdentifier', ts.isVariableDeclaration);
+      const members = host.getMembersOfClass(classNode);
+      const prop = members.find(m => m.name === 'prop') !;
+      const decorators = prop.decorators !;
+
+      expect(decorators.length).toBe(1);
+      expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NotIdentifierDecorator'}));
+    });
+
+    it('should use `getImportOfIdentifier()` to retrieve import info', () => {
+      let callCount = 0;
+      const spy = spyOn(Esm5ReflectionHost.prototype, 'getImportOfIdentifier').and.callFake(() => {
+        callCount++;
+        return {name: `name${callCount}`, from: `from${callCount}`};
+      });
+
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+      const members = host.getMembersOfClass(classNode);
+
+      expect(spy).toHaveBeenCalled();
+      spy.calls.allArgs().forEach(arg => expect(arg[0].getText()).toEqual('Input'));
+
+      const index = members.findIndex(member => member.name === 'input1');
+      expect(members[index].decorators !.length).toBe(1);
+      expect(members[index].decorators ![0].import).toEqual({name: 'name1', from: 'from1'});
+    });
+
+    describe('(returned prop decorators `args`)', () => {
+      it('should be an empty array if prop decorator has no `args` property', () => {
+        const program = makeProgram(INVALID_PROP_DECORATOR_ARGS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_PROP_DECORATOR_ARGS_FILE.name, 'NoArgsProperty',
+            ts.isVariableDeclaration);
+        const members = host.getMembersOfClass(classNode);
+        const prop = members.find(m => m.name === 'prop') !;
+        const decorators = prop.decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoArgsPropertyDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if prop decorator\'s `args` has no property assignment', () => {
+        const program = makeProgram(INVALID_PROP_DECORATOR_ARGS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_PROP_DECORATOR_ARGS_FILE.name, 'NoPropertyAssignment',
+            ts.isVariableDeclaration);
+        const members = host.getMembersOfClass(classNode);
+        const prop = members.find(m => m.name === 'prop') !;
+        const decorators = prop.decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoPropertyAssignmentDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if `args` property value is not an array literal', () => {
+        const program = makeProgram(INVALID_PROP_DECORATOR_ARGS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_PROP_DECORATOR_ARGS_FILE.name, 'NotArrayLiteral',
+            ts.isVariableDeclaration);
+        const members = host.getMembersOfClass(classNode);
+        const prop = members.find(m => m.name === 'prop') !;
+        const decorators = prop.decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NotArrayLiteralDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+    });
+  });
+
+  describe('getConstructorParameters', () => {
+    it('should find the decorated constructor parameters', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+      const parameters = host.getConstructorParameters(classNode);
+
+      expect(parameters).toBeDefined();
+      expect(parameters !.map(parameter => parameter.name)).toEqual([
+        '_viewContainer', '_template', 'injected'
+      ]);
+      expect(parameters !.map(parameter => parameter.type !.getText())).toEqual([
+        'ViewContainerRef', 'TemplateRef', 'undefined'
+      ]);
+    });
+
+    it('should throw if the symbol is not a class', () => {
+      const program = makeProgram(FOO_FUNCTION_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const functionNode =
+          getDeclaration(program, FOO_FUNCTION_FILE.name, 'foo', ts.isFunctionDeclaration);
+      expect(() => { host.getConstructorParameters(functionNode); })
+          .toThrowError(
+              'Attempted to get constructor parameters of a non-class: "function foo() {}"');
+    });
+
+    // In ES5 there is no such thing as a constructor-less class
+    // it('should return `null` if there is no constructor', () => { });
+
+    it('should return an array even if there are no decorators', () => {
+      const program = makeProgram(SIMPLE_CLASS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SIMPLE_CLASS_FILE.name, 'NoDecoratorConstructorClass', ts.isVariableDeclaration);
+      const parameters = host.getConstructorParameters(classNode);
+
+      expect(parameters).toEqual(jasmine.any(Array));
+      expect(parameters !.length).toEqual(1);
+      expect(parameters ![0].name).toEqual('foo');
+      expect(parameters ![0].decorators).toBe(null);
+    });
+
+    it('should return an empty array if there are no constructor parameters', () => {
+      const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_CTOR_DECORATORS_FILE.name, 'NoParameters', ts.isVariableDeclaration);
+      const parameters = host.getConstructorParameters(classNode);
+
+      expect(parameters).toEqual([]);
+    });
+
+    // In ES5 there are no arrow functions
+    // it('should ignore `ctorParameters` if it is an arrow function', () => { });
+
+    it('should ignore `ctorParameters` if it does not return an array literal', () => {
+      const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, INVALID_CTOR_DECORATORS_FILE.name, 'NotArrayLiteral', ts.isVariableDeclaration);
+      const parameters = host.getConstructorParameters(classNode);
+
+      expect(parameters !.length).toBe(1);
+      expect(parameters ![0]).toEqual(jasmine.objectContaining({
+        name: 'arg1',
+        decorators: null,
+      }));
+    });
+
+    describe('(returned parameters `decorators`)', () => {
+      it('should ignore param decorator elements that are not object literals', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATORS_FILE.name, 'NotObjectLiteral',
+            ts.isVariableDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+
+        expect(parameters !.length).toBe(2);
+        expect(parameters ![0]).toEqual(jasmine.objectContaining({
+          name: 'arg1',
+          decorators: null,
+        }));
+        expect(parameters ![1]).toEqual(jasmine.objectContaining({
+          name: 'arg2',
+          decorators: jasmine.any(Array) as any
+        }));
+      });
+
+      it('should ignore param decorator elements that have no `type` property', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATORS_FILE.name, 'NoTypeProperty', ts.isVariableDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        const decorators = parameters ![0].decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NoTypePropertyDecorator2'}));
+      });
+
+      it('should ignore param decorator elements whose `type` value is not an identifier', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATORS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATORS_FILE.name, 'NotIdentifier', ts.isVariableDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        const decorators = parameters ![0].decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'NotIdentifierDecorator'}));
+      });
+
+      it('should use `getImportOfIdentifier()` to retrieve import info', () => {
+        const mockImportInfo = {} as Import;
+        const spy = spyOn(Esm5ReflectionHost.prototype, 'getImportOfIdentifier')
+                        .and.returnValue(mockImportInfo);
+
+        const program = makeProgram(SOME_DIRECTIVE_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        const decorators = parameters ![2].decorators !;
+
+        expect(decorators.length).toEqual(1);
+        expect(decorators[0].import).toBe(mockImportInfo);
+
+        const typeIdentifier = spy.calls.mostRecent().args[0] as ts.Identifier;
+        expect(typeIdentifier.text).toBe('Inject');
+      });
+    });
+
+    describe('(returned parameters `decorators.args`)', () => {
+      it('should be an empty array if param decorator has no `args` property', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATOR_ARGS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATOR_ARGS_FILE.name, 'NoArgsProperty',
+            ts.isVariableDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        expect(parameters !.length).toBe(1);
+        const decorators = parameters ![0].decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoArgsPropertyDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if param decorator\'s `args` has no property assignment', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATOR_ARGS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATOR_ARGS_FILE.name, 'NoPropertyAssignment',
+            ts.isVariableDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        const decorators = parameters ![0].decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NoPropertyAssignmentDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+
+      it('should be an empty array if `args` property value is not an array literal', () => {
+        const program = makeProgram(INVALID_CTOR_DECORATOR_ARGS_FILE);
+        const host = new Esm5ReflectionHost(program.getTypeChecker());
+        const classNode = getDeclaration(
+            program, INVALID_CTOR_DECORATOR_ARGS_FILE.name, 'NotArrayLiteral',
+            ts.isVariableDeclaration);
+        const parameters = host.getConstructorParameters(classNode);
+        const decorators = parameters ![0].decorators !;
+
+        expect(decorators.length).toBe(1);
+        expect(decorators[0].name).toBe('NotArrayLiteralDecorator');
+        expect(decorators[0].args).toEqual([]);
+      });
+    });
+  });
+
+  describe('getImportOfIdentifier', () => {
+    it('should find the import of an identifier', () => {
+      const program = makeProgram(...IMPORTS_FILES);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const variableNode =
+          getDeclaration(program, IMPORTS_FILES[1].name, 'b', ts.isVariableDeclaration);
+      const importOfIdent = host.getImportOfIdentifier(variableNode.initializer as ts.Identifier);
+
+      expect(importOfIdent).toEqual({name: 'a', from: './a.js'});
+    });
+
+    it('should find the name by which the identifier was exported, not imported', () => {
+      const program = makeProgram(...IMPORTS_FILES);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const variableNode =
+          getDeclaration(program, IMPORTS_FILES[1].name, 'c', ts.isVariableDeclaration);
+      const importOfIdent = host.getImportOfIdentifier(variableNode.initializer as ts.Identifier);
+
+      expect(importOfIdent).toEqual({name: 'a', from: './a.js'});
+    });
+
+    it('should return null if the identifier was not imported', () => {
+      const program = makeProgram(...IMPORTS_FILES);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const variableNode =
+          getDeclaration(program, IMPORTS_FILES[1].name, 'd', ts.isVariableDeclaration);
+      const importOfIdent = host.getImportOfIdentifier(variableNode.initializer as ts.Identifier);
+
+      expect(importOfIdent).toBeNull();
+    });
+  });
+
+  describe('getDeclarationOfIdentifier', () => {
+    it('should return the declaration of a locally defined identifier', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+      const ctrDecorators = host.getConstructorParameters(classNode) !;
+      const identifierOfViewContainerRef = ctrDecorators[0].type !as ts.Identifier;
+
+      const expectedDeclarationNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'ViewContainerRef', ts.isVariableDeclaration);
+      const actualDeclaration = host.getDeclarationOfIdentifier(identifierOfViewContainerRef);
+      expect(actualDeclaration).not.toBe(null);
+      expect(actualDeclaration !.node).toBe(expectedDeclarationNode);
+      expect(actualDeclaration !.viaModule).toBe(null);
+    });
+
+    it('should return the declaration of an externally defined identifier', () => {
+      const program = makeProgram(SOME_DIRECTIVE_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const classNode = getDeclaration(
+          program, SOME_DIRECTIVE_FILE.name, 'SomeDirective', ts.isVariableDeclaration);
+      const classDecorators = host.getDecoratorsOfDeclaration(classNode) !;
+      const identifierOfDirective = ((classDecorators[0].node as ts.ObjectLiteralExpression)
+                                         .properties[0] as ts.PropertyAssignment)
+                                        .initializer as ts.Identifier;
+
+      const expectedDeclarationNode = getDeclaration(
+          program, 'node_modules/@angular/core/index.ts', 'Directive', ts.isVariableDeclaration);
+      const actualDeclaration = host.getDeclarationOfIdentifier(identifierOfDirective);
+      expect(actualDeclaration).not.toBe(null);
+      expect(actualDeclaration !.node).toBe(expectedDeclarationNode);
+      expect(actualDeclaration !.viaModule).toBe('@angular/core');
+    });
+  });
+
+  describe('getExportsOfModule()', () => {
+    it('should return a map of all the exports from a given module', () => {
+      const program = makeProgram(...EXPORTS_FILES);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const file = program.getSourceFile(EXPORTS_FILES[1].name) !;
+      const exportDeclarations = host.getExportsOfModule(file);
+      expect(exportDeclarations).not.toBe(null);
+      expect(Array.from(exportDeclarations !.keys())).toEqual([
+        'Directive',
+        'a',
+        'b',
+        'c',
+        'd',
+        'e',
+        'DirectiveX',
+        'SomeClass',
+      ]);
+
+      const values = Array.from(exportDeclarations !.values())
+                         .map(declaration => [declaration.node.getText(), declaration.viaModule]);
+      expect(values).toEqual([
+        // TODO: clarify what is expected here...
+        //[`Directive = callableClassDecorator()`, '@angular/core'],
+        [`Directive = callableClassDecorator()`, null],
+        [`a = 'a'`, null],
+        [`b = a`, null],
+        [`c = foo`, null],
+        [`d = b`, null],
+        [`e = 'e'`, null],
+        [`DirectiveX = Directive`, null],
+        [
+          `SomeClass = (function() {
+        function SomeClass() {}
+        return SomeClass;
+      }())`,
+          null
+        ],
+      ]);
+    });
+  });
+
+  describe('isClass()', () => {
+    it('should return true if a given node is an ES5 class declaration', () => {
+      const program = makeProgram(SIMPLE_CLASS_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const node =
+          getDeclaration(program, SIMPLE_CLASS_FILE.name, 'EmptyClass', ts.isVariableDeclaration);
+      expect(host.isClass(node)).toBe(true);
+    });
+
+    it('should return false if a given node is not an ES5 class declaration', () => {
+      const program = makeProgram(FOO_FUNCTION_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const node = getDeclaration(program, FOO_FUNCTION_FILE.name, 'foo', ts.isFunctionDeclaration);
+      expect(host.isClass(node)).toBe(false);
+    });
+  });
+});
diff --git a/packages/compiler-cli/src/ngcc/test/parser/esm2015_parser_spec.ts b/packages/compiler-cli/src/ngcc/test/parser/esm2015_parser_spec.ts
new file mode 100644
index 000000000000..4607d4a9cf0f
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/parser/esm2015_parser_spec.ts
@@ -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
+ */
+
+import * as ts from 'typescript';
+
+import {Esm2015ReflectionHost} from '../../src/host/esm2015_host';
+import {Esm2015FileParser} from '../../src/parsing/esm2015_parser';
+import {makeProgram} from '../helpers/utils';
+
+const BASIC_FILE = {
+  name: '/primary.js',
+  contents: `
+  class A {}
+  A.decorators = [
+    { type: Directive, args: [{ selector: '[a]' }] }
+  ];
+
+  class B {}
+  B.decorators = [
+    { type: Directive, args: [{ selector: '[b]' }] }
+  ];
+
+  function x() {}
+
+  function y() {}
+
+  class C {}
+
+  export { A, x, C };
+  `
+};
+
+describe('Esm2015PackageParser', () => {
+  describe('getDecoratedClasses()', () => {
+    it('should return an array of object for each class that is exported and decorated', () => {
+      const program = makeProgram(BASIC_FILE);
+      const host = new Esm2015ReflectionHost(program.getTypeChecker());
+      const parser = new Esm2015FileParser(program, host);
+
+      const parsedFiles = parser.parseFile(program.getSourceFile(BASIC_FILE.name) !);
+
+      expect(parsedFiles.length).toEqual(1);
+      const decoratedClasses = parsedFiles[0].decoratedClasses;
+      expect(decoratedClasses.length).toEqual(1);
+      const decoratedClass = decoratedClasses[0];
+      expect(decoratedClass.name).toEqual('A');
+      expect(ts.isClassDeclaration(decoratedClass.declaration)).toBeTruthy();
+      expect(decoratedClass.decorators.map(decorator => decorator.name)).toEqual(['Directive']);
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngcc/test/parser/esm5_parser_spec.ts b/packages/compiler-cli/src/ngcc/test/parser/esm5_parser_spec.ts
new file mode 100644
index 000000000000..f69ce36a78bb
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/parser/esm5_parser_spec.ts
@@ -0,0 +1,64 @@
+/**
+ * @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 ts from 'typescript';
+
+import {Esm5ReflectionHost} from '../../src/host/esm5_host';
+import {Esm5FileParser} from '../../src/parsing/esm5_parser';
+import {makeProgram} from '../helpers/utils';
+
+const BASIC_FILE = {
+  name: '/primary.js',
+  contents: `
+  var A = (function() {
+    function A() {}
+    A.decorators = [
+      { type: Directive, args: [{ selector: '[a]' }] }
+    ];
+    return A;
+  }());
+
+  var B = (function() {
+    function B() {}
+    B.decorators = [
+      { type: Directive, args: [{ selector: '[b]' }] }
+    ];
+    return B;
+  }());
+
+  function x() {}
+
+  function y() {}
+
+  var C = (function() {
+    function C() {}
+    return C;
+  });
+
+  export { A, x, C };
+  `
+};
+
+describe('Esm5FileParser', () => {
+  describe('getDecoratedClasses()', () => {
+    it('should return an array of object for each class that is exported and decorated', () => {
+      const program = makeProgram(BASIC_FILE);
+      const host = new Esm5ReflectionHost(program.getTypeChecker());
+      const parser = new Esm5FileParser(program, host);
+
+      const parsedFiles = parser.parseFile(program.getSourceFile(BASIC_FILE.name) !);
+
+      expect(parsedFiles.length).toEqual(1);
+      const decoratedClasses = parsedFiles[0].decoratedClasses;
+      expect(decoratedClasses.length).toEqual(1);
+      const decoratedClass = decoratedClasses[0];
+      expect(decoratedClass.name).toEqual('A');
+      expect(decoratedClass.decorators.map(decorator => decorator.name)).toEqual(['Directive']);
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngcc/test/parser/parser_spec.ts b/packages/compiler-cli/src/ngcc/test/parser/parser_spec.ts
new file mode 100644
index 000000000000..559fcea3f594
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/parser/parser_spec.ts
@@ -0,0 +1,124 @@
+/**
+ * @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 mockFs from 'mock-fs';
+import {findAllPackageJsonFiles, getEntryPoints} from '../../src/parsing/utils';
+
+function createMockFileSystem() {
+  mockFs({
+    '/node_modules/@angular/common': {
+      'package.json': '{ "fesm2015": "./fesm2015/common.js", "fesm5": "./fesm5/common.js" }',
+      'fesm2015': {
+        'common.js': 'DUMMY CONTENT',
+        'http.js': 'DUMMY CONTENT',
+        'http/testing.js': 'DUMMY CONTENT',
+        'testing.js': 'DUMMY CONTENT',
+      },
+      'http': {
+        'package.json': '{ "fesm2015": "../fesm2015/http.js", "fesm5": "../fesm5/http.js" }',
+        'testing': {
+          'package.json':
+              '{ "fesm2015": "../../fesm2015/http/testing.js", "fesm5": "../../fesm5/http/testing.js" }',
+        },
+      },
+      'testing': {
+        'package.json': '{ "fesm2015": "../fesm2015/testing.js", "fesm5": "../fesm5/testing.js" }',
+      },
+      'node_modules': {
+        'tslib': {
+          'package.json': '{ }',
+          'node_modules': {
+            'other-lib': {
+              'package.json': '{ }',
+            },
+          },
+        },
+      },
+    },
+    '/node_modules/@angular/other': {
+      'not-package.json': '{ "fesm2015": "./fesm2015/other.js" }',
+      'package.jsonot': '{ "fesm5": "./fesm5/other.js" }',
+    },
+    '/node_modules/@angular/other2': {
+      'node_modules_not': {
+        'lib1': {
+          'package.json': '{ }',
+        },
+      },
+      'not_node_modules': {
+        'lib2': {
+          'package.json': '{ }',
+        },
+      },
+    },
+  });
+}
+
+function restoreRealFileSystem() {
+  mockFs.restore();
+}
+
+describe('findAllPackageJsonFiles()', () => {
+  beforeEach(createMockFileSystem);
+  afterEach(restoreRealFileSystem);
+
+  it('should find the `package.json` files below the specified directory', () => {
+    const paths = findAllPackageJsonFiles('/node_modules/@angular/common');
+    expect(paths.sort()).toEqual([
+      '/node_modules/@angular/common/http/package.json',
+      '/node_modules/@angular/common/http/testing/package.json',
+      '/node_modules/@angular/common/package.json',
+      '/node_modules/@angular/common/testing/package.json',
+    ]);
+  });
+
+  it('should not find `package.json` files under `node_modules/`', () => {
+    const paths = findAllPackageJsonFiles('/node_modules/@angular/common');
+    expect(paths).not.toContain('/node_modules/@angular/common/node_modules/tslib/package.json');
+    expect(paths).not.toContain(
+        '/node_modules/@angular/common/node_modules/tslib/node_modules/other-lib/package.json');
+  });
+
+  it('should exactly match the name of `package.json` files', () => {
+    const paths = findAllPackageJsonFiles('/node_modules/@angular/other');
+    expect(paths).toEqual([]);
+  });
+
+  it('should exactly match the name of `node_modules/` directory', () => {
+    const paths = findAllPackageJsonFiles('/node_modules/@angular/other2');
+    expect(paths).toEqual([
+      '/node_modules/@angular/other2/node_modules_not/lib1/package.json',
+      '/node_modules/@angular/other2/not_node_modules/lib2/package.json',
+    ]);
+  });
+});
+
+describe('getEntryPoints()', () => {
+  beforeEach(createMockFileSystem);
+  afterEach(restoreRealFileSystem);
+
+  it('should return the paths for the specified format from each package.json', () => {
+    const paths = getEntryPoints('/node_modules/@angular/common', 'fesm2015');
+    expect(paths.sort()).toEqual([
+      '/node_modules/@angular/common/fesm2015/common.js',
+      '/node_modules/@angular/common/fesm2015/http.js',
+      '/node_modules/@angular/common/fesm2015/http/testing.js',
+      '/node_modules/@angular/common/fesm2015/testing.js',
+    ]);
+  });
+
+  it('should return an empty array if there are no matching package.json files', () => {
+    const paths = getEntryPoints('/node_modules/@angular/other', 'fesm2015');
+    expect(paths).toEqual([]);
+  });
+
+  it('should return an empty array if there are no matching formats', () => {
+    const paths = getEntryPoints('/node_modules/@angular/other', 'main');
+    expect(paths).toEqual([]);
+  });
+});
diff --git a/packages/compiler-cli/src/ngcc/test/rendering/esm2015_renderer_spec.ts b/packages/compiler-cli/src/ngcc/test/rendering/esm2015_renderer_spec.ts
new file mode 100644
index 000000000000..9bcd127c7f81
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/rendering/esm2015_renderer_spec.ts
@@ -0,0 +1,218 @@
+/**
+ * @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 ts from 'typescript';
+import MagicString from 'magic-string';
+import {makeProgram} from '../helpers/utils';
+import {Analyzer} from '../../src/analyzer';
+import {Esm2015ReflectionHost} from '../../src/host/esm2015_host';
+import {Esm2015FileParser} from '../../src/parsing/esm2015_parser';
+import {Esm2015Renderer} from '../../src/rendering/esm2015_renderer';
+
+function setup(file: {name: string, contents: string}) {
+  const program = makeProgram(file);
+  const host = new Esm2015ReflectionHost(program.getTypeChecker());
+  const parser = new Esm2015FileParser(program, host);
+  const analyzer = new Analyzer(program.getTypeChecker(), host);
+  const renderer = new Esm2015Renderer(host);
+  return {analyzer, host, parser, program, renderer};
+}
+
+function analyze(parser: Esm2015FileParser, analyzer: Analyzer, file: ts.SourceFile) {
+  const parsedFiles = parser.parseFile(file);
+  return parsedFiles.map(file => analyzer.analyzeFile(file))[0];
+}
+
+
+describe('Esm2015Renderer', () => {
+
+  describe('addImports', () => {
+    it('should insert the given imports at the start of the source file', () => {
+      const PROGRAM = {
+        name: 'some/file.js',
+        contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+export class A {}
+A.decorators = [
+  { type: Directive, args: [{ selector: '[a]' }] },
+  { type: Other }
+];
+// Some other content`
+      };
+      const {renderer} = setup(PROGRAM);
+      const output = new MagicString(PROGRAM.contents);
+      renderer.addImports(
+          output, [{name: '@angular/core', as: 'i0'}, {name: '@angular/common', as: 'i1'}]);
+      expect(output.toString())
+          .toEqual(
+              `import * as i0 from '@angular/core';\n` +
+              `import * as i1 from '@angular/common';\n` + PROGRAM.contents);
+    });
+  });
+
+
+  describe('addConstants', () => {
+    it('should insert the given constants after imports in the source file', () => {
+      const PROGRAM = {
+        name: 'some/file.js',
+        contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+export class A {}
+A.decorators = [
+  { type: Directive, args: [{ selector: '[a]' }] },
+  { type: Other }
+];
+// Some other content`
+      };
+      const {renderer, program} = setup(PROGRAM);
+      const file = program.getSourceFile('some/file.js');
+      if (file === undefined) {
+        throw new Error(`Could not find source file`);
+      }
+      const output = new MagicString(PROGRAM.contents);
+      renderer.addConstants(output, 'const x = 3;', file);
+      expect(output.toString()).toContain(`
+import {Directive} from '@angular/core';
+const x = 3;
+
+export class A {}`);
+    });
+  });
+
+
+  describe('addDefinitions', () => {
+    it('should insert the definitions directly after the class declaration', () => {
+      const PROGRAM = {
+        name: 'some/file.js',
+        contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+export class A {}
+A.decorators = [
+  { type: Directive, args: [{ selector: '[a]' }] },
+  { type: Other }
+];
+// Some other content`
+      };
+      const {analyzer, parser, program, renderer} = setup(PROGRAM);
+      const analyzedFile = analyze(parser, analyzer, program.getSourceFile(PROGRAM.name) !);
+      const output = new MagicString(PROGRAM.contents);
+      renderer.addDefinitions(output, analyzedFile.analyzedClasses[0], 'SOME DEFINITION TEXT');
+      expect(output.toString()).toEqual(`
+/* A copyright notice */
+import {Directive} from '@angular/core';
+export class A {}
+SOME DEFINITION TEXT
+A.decorators = [
+  { type: Directive, args: [{ selector: '[a]' }] },
+  { type: Other }
+];
+// Some other content`);
+    });
+
+  });
+
+
+  describe('removeDecorators', () => {
+
+    it('should delete the decorator (and following comma) that was matched in the analysis', () => {
+      const PROGRAM = {
+        name: 'some/file.js',
+        contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+export class A {}
+A.decorators = [
+  { type: Directive, args: [{ selector: '[a]' }] },
+  { type: Other }
+];
+// Some other content`
+      };
+      const {analyzer, parser, program, renderer} = setup(PROGRAM);
+      const analyzedFile = analyze(parser, analyzer, program.getSourceFile(PROGRAM.name) !);
+      const output = new MagicString(PROGRAM.contents);
+      const analyzedClass = analyzedFile.analyzedClasses[0];
+      const decoratorsToRemove = new Map<ts.Node, ts.Node[]>();
+      decoratorsToRemove.set(
+          analyzedClass.decorators[0].node.parent !, [analyzedClass.decorators[0].node]);
+      renderer.removeDecorators(output, decoratorsToRemove);
+      expect(output.toString()).toEqual(`
+/* A copyright notice */
+import {Directive} from '@angular/core';
+export class A {}
+A.decorators = [
+  { type: Other }
+];
+// Some other content`);
+    });
+
+
+    it('should delete the decorator (but cope with no trailing comma) that was matched in the analysis',
+       () => {
+         const PROGRAM = {
+           name: 'some/file.js',
+           contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+export class A {}
+A.decorators = [
+  { type: Other },
+  { type: Directive, args: [{ selector: '[a]' }] }
+];
+// Some other content`
+         };
+         const {analyzer, parser, program, renderer} = setup(PROGRAM);
+         const analyzedFile = analyze(parser, analyzer, program.getSourceFile(PROGRAM.name) !);
+         const output = new MagicString(PROGRAM.contents);
+         const analyzedClass = analyzedFile.analyzedClasses[0];
+         const decoratorsToRemove = new Map<ts.Node, ts.Node[]>();
+         decoratorsToRemove.set(
+             analyzedClass.decorators[0].node.parent !, [analyzedClass.decorators[1].node]);
+         renderer.removeDecorators(output, decoratorsToRemove);
+         expect(output.toString()).toEqual(`
+/* A copyright notice */
+import {Directive} from '@angular/core';
+export class A {}
+A.decorators = [
+  { type: Other },
+];
+// Some other content`);
+       });
+
+
+    it('should delete the decorator (and its container if there are not other decorators left) that was matched in the analysis',
+       () => {
+         const PROGRAM = {
+           name: 'some/file.js',
+           contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+export class A {}
+A.decorators = [
+  { type: Directive, args: [{ selector: '[a]' }] }
+];
+// Some other content`
+         };
+         const {analyzer, parser, program, renderer} = setup(PROGRAM);
+         const analyzedFile = analyze(parser, analyzer, program.getSourceFile(PROGRAM.name) !);
+         const output = new MagicString(PROGRAM.contents);
+         const analyzedClass = analyzedFile.analyzedClasses[0];
+         const decoratorsToRemove = new Map<ts.Node, ts.Node[]>();
+         decoratorsToRemove.set(
+             analyzedClass.decorators[0].node.parent !, [analyzedClass.decorators[0].node]);
+         renderer.removeDecorators(output, decoratorsToRemove);
+         expect(output.toString()).toEqual(`
+/* A copyright notice */
+import {Directive} from '@angular/core';
+export class A {}
+// Some other content`);
+       });
+
+  });
+});
diff --git a/packages/compiler-cli/src/ngcc/test/rendering/esm5_renderer_spec.ts b/packages/compiler-cli/src/ngcc/test/rendering/esm5_renderer_spec.ts
new file mode 100644
index 000000000000..b3ab70ac32f5
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/rendering/esm5_renderer_spec.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 * as ts from 'typescript';
+import MagicString from 'magic-string';
+import {makeProgram} from '../helpers/utils';
+import {Analyzer} from '../../src/analyzer';
+import {Esm5ReflectionHost} from '../../src/host/esm5_host';
+import {Esm5FileParser} from '../../src/parsing/esm5_parser';
+import {Esm5Renderer} from '../../src/rendering/esm5_renderer';
+
+function setup(file: {name: string, contents: string}) {
+  const program = makeProgram(file);
+  const host = new Esm5ReflectionHost(program.getTypeChecker());
+  const parser = new Esm5FileParser(program, host);
+  const analyzer = new Analyzer(program.getTypeChecker(), host);
+  const renderer = new Esm5Renderer(host);
+  return {analyzer, host, parser, program, renderer};
+}
+
+function analyze(parser: Esm5FileParser, analyzer: Analyzer, file: ts.SourceFile) {
+  const parsedFiles = parser.parseFile(file);
+  return parsedFiles.map(file => analyzer.analyzeFile(file))[0];
+}
+
+describe('Esm5Renderer', () => {
+
+  describe('addImports', () => {
+    it('should insert the given imports at the start of the source file', () => {
+      const PROGRAM = {
+        name: 'some/file.js',
+        contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+var A = (function() {
+  function A() {}
+  A.decorators = [
+    { type: Directive, args: [{ selector: '[a]' }] },
+    { type: Other }
+  ];
+  return A;
+}());
+// Some other content
+export {A};`
+      };
+      const {renderer} = setup(PROGRAM);
+      const output = new MagicString(PROGRAM.contents);
+      renderer.addImports(
+          output, [{name: '@angular/core', as: 'i0'}, {name: '@angular/common', as: 'i1'}]);
+      expect(output.toString())
+          .toEqual(
+              `import * as i0 from '@angular/core';\n` +
+              `import * as i1 from '@angular/common';\n` + PROGRAM.contents);
+    });
+  });
+
+
+  describe('addDefinitions', () => {
+    it('should insert the definitions directly after the class declaration', () => {
+      const PROGRAM = {
+        name: 'some/file.js',
+        contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+var A = (function() {
+  function A() {}
+  A.decorators = [
+    { type: Directive, args: [{ selector: '[a]' }] },
+    { type: Other }
+  ];
+  return A;
+}());
+// Some other content
+export {A};`
+      };
+      const {analyzer, parser, program, renderer} = setup(PROGRAM);
+      const analyzedFile = analyze(parser, analyzer, program.getSourceFile(PROGRAM.name) !);
+      const output = new MagicString(PROGRAM.contents);
+      renderer.addDefinitions(output, analyzedFile.analyzedClasses[0], 'SOME DEFINITION TEXT');
+      expect(output.toString()).toEqual(`
+/* A copyright notice */
+import {Directive} from '@angular/core';
+var A = (function() {
+  function A() {}
+SOME DEFINITION TEXT
+  A.decorators = [
+    { type: Directive, args: [{ selector: '[a]' }] },
+    { type: Other }
+  ];
+  return A;
+}());
+// Some other content
+export {A};`);
+    });
+
+  });
+
+
+  describe('removeDecorators', () => {
+
+    it('should delete the decorator (and following comma) that was matched in the analysis', () => {
+      const PROGRAM = {
+        name: 'some/file.js',
+        contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+var A = (function() {
+  function A() {}
+  A.decorators = [
+    { type: Directive, args: [{ selector: '[a]' }] },
+    { type: Other }
+  ];
+  return A;
+}());
+// Some other content
+export {A};`
+      };
+      const {analyzer, parser, program, renderer} = setup(PROGRAM);
+      const analyzedFile = analyze(parser, analyzer, program.getSourceFile(PROGRAM.name) !);
+      const output = new MagicString(PROGRAM.contents);
+      const analyzedClass = analyzedFile.analyzedClasses[0];
+      const decoratorsToRemove = new Map<ts.Node, ts.Node[]>();
+      decoratorsToRemove.set(
+          analyzedClass.decorators[0].node.parent !, [analyzedClass.decorators[0].node]);
+      renderer.removeDecorators(output, decoratorsToRemove);
+      expect(output.toString()).toEqual(`
+/* A copyright notice */
+import {Directive} from '@angular/core';
+var A = (function() {
+  function A() {}
+  A.decorators = [
+    { type: Other }
+  ];
+  return A;
+}());
+// Some other content
+export {A};`);
+    });
+
+
+    it('should delete the decorator (but cope with no trailing comma) that was matched in the analysis',
+       () => {
+         const PROGRAM = {
+           name: 'some/file.js',
+           contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+var A = (function() {
+  function A() {}
+  A.decorators = [
+    { type: Other },
+    { type: Directive, args: [{ selector: '[a]' }] }
+  ];
+  return A;
+}());
+// Some other content
+export {A};`
+         };
+         const {analyzer, parser, program, renderer} = setup(PROGRAM);
+         const analyzedFile = analyze(parser, analyzer, program.getSourceFile(PROGRAM.name) !);
+         const output = new MagicString(PROGRAM.contents);
+         const analyzedClass = analyzedFile.analyzedClasses[0];
+         const decoratorsToRemove = new Map<ts.Node, ts.Node[]>();
+         decoratorsToRemove.set(
+             analyzedClass.decorators[0].node.parent !, [analyzedClass.decorators[1].node]);
+         renderer.removeDecorators(output, decoratorsToRemove);
+         expect(output.toString()).toEqual(`
+/* A copyright notice */
+import {Directive} from '@angular/core';
+var A = (function() {
+  function A() {}
+  A.decorators = [
+    { type: Other },
+  ];
+  return A;
+}());
+// Some other content
+export {A};`);
+       });
+
+
+    it('should delete the decorator (and its container if there are not other decorators left) that was matched in the analysis',
+       () => {
+         const PROGRAM = {
+           name: 'some/file.js',
+           contents: `
+/* A copyright notice */
+import {Directive} from '@angular/core';
+var A = (function() {
+  function A() {}
+  A.decorators = [
+    { type: Directive, args: [{ selector: '[a]' }] }
+  ];
+  return A;
+}());
+// Some other content
+export {A};`
+         };
+         const {analyzer, parser, program, renderer} = setup(PROGRAM);
+         const analyzedFile = analyze(parser, analyzer, program.getSourceFile(PROGRAM.name) !);
+         const output = new MagicString(PROGRAM.contents);
+         const analyzedClass = analyzedFile.analyzedClasses[0];
+         const decoratorsToRemove = new Map<ts.Node, ts.Node[]>();
+         decoratorsToRemove.set(
+             analyzedClass.decorators[0].node.parent !, [analyzedClass.decorators[0].node]);
+         renderer.removeDecorators(output, decoratorsToRemove);
+         expect(output.toString()).toEqual(`
+/* A copyright notice */
+import {Directive} from '@angular/core';
+var A = (function() {
+  function A() {}
+  return A;
+}());
+// Some other content
+export {A};`);
+       });
+
+  });
+});
diff --git a/packages/compiler-cli/src/ngcc/test/rendering/renderer_spec.ts b/packages/compiler-cli/src/ngcc/test/rendering/renderer_spec.ts
new file mode 100644
index 000000000000..8b907f9278cc
--- /dev/null
+++ b/packages/compiler-cli/src/ngcc/test/rendering/renderer_spec.ts
@@ -0,0 +1,186 @@
+/**
+ * @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 fs from 'fs';
+import * as ts from 'typescript';
+
+import MagicString from 'magic-string';
+import {fromObject, generateMapFileComment} from 'convert-source-map';
+import {makeProgram} from '../helpers/utils';
+import {AnalyzedClass, Analyzer} from '../../src/analyzer';
+import {Esm2015ReflectionHost} from '../../src/host/esm2015_host';
+import {Esm2015FileParser} from '../../src/parsing/esm2015_parser';
+import {Renderer} from '../../src/rendering/renderer';
+
+class TestRenderer extends Renderer {
+  addImports(output: MagicString, imports: {name: string, as: string}[]) {
+    output.prepend('\n// ADD IMPORTS\n');
+  }
+  addConstants(output: MagicString, constants: string, file: ts.SourceFile): void {
+    output.prepend('\n// ADD CONSTANTS\n');
+  }
+  addDefinitions(output: MagicString, analyzedClass: AnalyzedClass, definitions: string) {
+    output.prepend('\n// ADD DEFINITIONS\n');
+  }
+  removeDecorators(output: MagicString, decoratorsToRemove: Map<ts.Node, ts.Node[]>) {
+    output.prepend('\n// REMOVE DECORATORS\n');
+  }
+}
+
+function createTestRenderer() {
+  const renderer = new TestRenderer();
+  spyOn(renderer, 'addImports').and.callThrough();
+  spyOn(renderer, 'addDefinitions').and.callThrough();
+  spyOn(renderer, 'removeDecorators').and.callThrough();
+  return renderer as jasmine.SpyObj<TestRenderer>;
+}
+
+function analyze(file: {name: string, contents: string}) {
+  const program = makeProgram(file);
+  const host = new Esm2015ReflectionHost(program.getTypeChecker());
+  const parser = new Esm2015FileParser(program, host);
+  const analyzer = new Analyzer(program.getTypeChecker(), host);
+
+  const parsedFiles = parser.parseFile(program.getSourceFile(file.name) !);
+  return parsedFiles.map(file => analyzer.analyzeFile(file));
+}
+
+describe('Renderer', () => {
+  const INPUT_PROGRAM = {
+    name: '/file.js',
+    contents:
+        `import { Directive } from '@angular/core';\nexport class A {\n    foo(x) {\n        return x;\n    }\n}\nA.decorators = [\n    { type: Directive, args: [{ selector: '[a]' }] }\n];\n`
+  };
+  const INPUT_PROGRAM_MAP = fromObject({
+    'version': 3,
+    'file': '/file.js',
+    'sourceRoot': '',
+    'sources': ['/file.ts'],
+    'names': [],
+    'mappings':
+        'AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,MAAM;IACF,GAAG,CAAC,CAAS;QACT,OAAO,CAAC,CAAC;IACb,CAAC;;AACM,YAAU,GAAG;IAChB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE;CACnD,CAAC',
+    'sourcesContent': [
+      'import { Directive } from \'@angular/core\';\nexport class A {\n    foo(x: string): string {\n        return x;\n    }\n    static decorators = [\n        { type: Directive, args: [{ selector: \'[a]\' }] }\n    ];\n}'
+    ]
+  });
+  const RENDERED_CONTENTS =
+      `\n// REMOVE DECORATORS\n\n// ADD IMPORTS\n\n// ADD CONSTANTS\n\n// ADD DEFINITIONS\n` +
+      INPUT_PROGRAM.contents;
+  const OUTPUT_PROGRAM_MAP = fromObject({
+    'version': 3,
+    'file': '/output_file.js',
+    'sources': ['/file.js'],
+    'sourcesContent': [
+      'import { Directive } from \'@angular/core\';\nexport class A {\n    foo(x) {\n        return x;\n    }\n}\nA.decorators = [\n    { type: Directive, args: [{ selector: \'[a]\' }] }\n];\n'
+    ],
+    'names': [],
+    'mappings': ';;;;;;;;AAAA;;;;;;;;;'
+  });
+
+  const MERGED_OUTPUT_PROGRAM_MAP = fromObject({
+    'version': 3,
+    'sources': ['/file.ts'],
+    'names': [],
+    'mappings': ';;;;;;;;AAAA',
+    'file': '/output_file.js',
+    'sourcesContent': [
+      'import { Directive } from \'@angular/core\';\nexport class A {\n    foo(x: string): string {\n        return x;\n    }\n    static decorators = [\n        { type: Directive, args: [{ selector: \'[a]\' }] }\n    ];\n}'
+    ]
+  });
+
+  describe('renderFile()', () => {
+    it('should render the modified contents; and a new map file, if the original provided no map file.',
+       () => {
+         const renderer = createTestRenderer();
+         const analyzedFiles = analyze(INPUT_PROGRAM);
+         const result = renderer.renderFile(analyzedFiles[0], '/output_file.js');
+         expect(result.source.path).toEqual('/output_file.js');
+         expect(result.source.contents)
+             .toEqual(RENDERED_CONTENTS + '\n' + generateMapFileComment('/output_file.js.map'));
+         expect(result.map !.path).toEqual('/output_file.js.map');
+         expect(result.map !.contents).toEqual(OUTPUT_PROGRAM_MAP.toJSON());
+       });
+
+    it('should call addImports with the source code and info about the core Angular library.',
+       () => {
+         const renderer = createTestRenderer();
+         const analyzedFiles = analyze(INPUT_PROGRAM);
+         renderer.renderFile(analyzedFiles[0], '/output_file.js');
+         expect(renderer.addImports.calls.first().args[0].toString()).toEqual(RENDERED_CONTENTS);
+         expect(renderer.addImports.calls.first().args[1]).toEqual([
+           {name: '@angular/core', as: 'ɵngcc0'}
+         ]);
+       });
+
+    it('should call addDefinitions with the source code, the analyzed class and the renderered definitions.',
+       () => {
+         const renderer = createTestRenderer();
+         const analyzedFile = analyze(INPUT_PROGRAM)[0];
+         renderer.renderFile(analyzedFile, '/output_file.js');
+         expect(renderer.addDefinitions.calls.first().args[0].toString())
+             .toEqual(RENDERED_CONTENTS);
+         expect(renderer.addDefinitions.calls.first().args[1])
+             .toBe(analyzedFile.analyzedClasses[0]);
+         expect(renderer.addDefinitions.calls.first().args[2])
+             .toEqual(
+                 `A.ngDirectiveDef = ɵngcc0.ɵdefineDirective({ type: A, selectors: [["", "a", ""]], factory: function A_Factory(t) { return new (t || A)(); }, features: [ɵngcc0.ɵPublicFeature] });`);
+       });
+
+    it('should call removeDecorators with the source code, a map of class decorators that have been analyzed',
+       () => {
+         const renderer = createTestRenderer();
+         const analyzedFile = analyze(INPUT_PROGRAM)[0];
+         renderer.renderFile(analyzedFile, '/output_file.js');
+         expect(renderer.removeDecorators.calls.first().args[0].toString())
+             .toEqual(RENDERED_CONTENTS);
+
+         // Each map key is the TS node of the decorator container
+         // Each map value is an array of TS nodes that are the decorators to remove
+         const map = renderer.removeDecorators.calls.first().args[1] as Map<ts.Node, ts.Node[]>;
+         const keys = Array.from(map.keys());
+         expect(keys.length).toEqual(1);
+         expect(keys[0].getText())
+             .toEqual(`[\n    { type: Directive, args: [{ selector: '[a]' }] }\n]`);
+         const values = Array.from(map.values());
+         expect(values.length).toEqual(1);
+         expect(values[0].length).toEqual(1);
+         expect(values[0][0].getText()).toEqual(`{ type: Directive, args: [{ selector: '[a]' }] }`);
+       });
+
+    it('should merge any inline source map from the original file and write the output as an inline source map',
+       () => {
+         const renderer = createTestRenderer();
+         const analyzedFiles = analyze({
+           ...INPUT_PROGRAM,
+           contents: INPUT_PROGRAM.contents + '\n' + INPUT_PROGRAM_MAP.toComment()
+         });
+         const result = renderer.renderFile(analyzedFiles[0], '/output_file.js');
+         expect(result.source.path).toEqual('/output_file.js');
+         expect(result.source.contents)
+             .toEqual(RENDERED_CONTENTS + '\n' + MERGED_OUTPUT_PROGRAM_MAP.toComment());
+         expect(result.map).toBe(null);
+       });
+
+    it('should merge any external source map from the original file and write the output to an external source map',
+       () => {
+         // Mock out reading the map file from disk
+         const readFileSyncSpy =
+             spyOn(fs, 'readFileSync').and.returnValue(INPUT_PROGRAM_MAP.toJSON());
+         const renderer = createTestRenderer();
+         const analyzedFiles = analyze({
+           ...INPUT_PROGRAM,
+           contents: INPUT_PROGRAM.contents + '\n//# sourceMappingURL=file.js.map'
+         });
+         const result = renderer.renderFile(analyzedFiles[0], '/output_file.js');
+         expect(result.source.path).toEqual('/output_file.js');
+         expect(result.source.contents)
+             .toEqual(RENDERED_CONTENTS + '\n' + generateMapFileComment('/output_file.js.map'));
+         expect(result.map !.path).toEqual('/output_file.js.map');
+         expect(result.map !.contents).toEqual(MERGED_OUTPUT_PROGRAM_MAP.toJSON());
+       });
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngtools_api.ts b/packages/compiler-cli/src/ngtools_api.ts
new file mode 100644
index 000000000000..665aed0e08bc
--- /dev/null
+++ b/packages/compiler-cli/src/ngtools_api.ts
@@ -0,0 +1,133 @@
+/**
+ * @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 is a private API for the ngtools toolkit.
+ *
+ * This API should be stable for NG 2. It can be removed in NG 4..., but should be replaced by
+ * something else.
+ */
+
+/**
+ *********************************************************************
+ * Changes to this file need to be approved by the Angular CLI team. *
+ *********************************************************************
+ */
+
+import * as ts from 'typescript';
+
+import {CompilerOptions} from './transformers/api';
+import {getOriginalReferences} from './transformers/compiler_host';
+import {createProgram} from './transformers/entry_points';
+
+export interface NgTools_InternalApi_NG2_CodeGen_Options {
+  basePath: string;
+  compilerOptions: ts.CompilerOptions;
+  program: ts.Program;
+  host: ts.CompilerHost;
+
+  angularCompilerOptions: CompilerOptions;
+
+  // i18n options.
+  i18nFormat?: string;
+  i18nFile?: string;
+  locale?: string;
+  missingTranslation?: string;
+
+  readResource: (fileName: string) => Promise<string>;
+
+  // Every new property under this line should be optional.
+}
+
+export interface NgTools_InternalApi_NG2_ListLazyRoutes_Options {
+  program: ts.Program;
+  host: ts.CompilerHost;
+  angularCompilerOptions: CompilerOptions;
+  entryModule: string;
+
+  // Every new property under this line should be optional.
+}
+
+export interface NgTools_InternalApi_NG_2_LazyRouteMap { [route: string]: string; }
+
+export interface NgTools_InternalApi_NG2_ExtractI18n_Options {
+  basePath: string;
+  compilerOptions: ts.CompilerOptions;
+  program: ts.Program;
+  host: ts.CompilerHost;
+  angularCompilerOptions: CompilerOptions;
+  i18nFormat?: string;
+  readResource: (fileName: string) => Promise<string>;
+  // Every new property under this line should be optional.
+  locale?: string;
+  outFile?: string;
+}
+
+/**
+ * @internal
+ * @deprecatd Use ngtools_api2 instead!
+ */
+export class NgTools_InternalApi_NG_2 {
+  /**
+   * @internal
+   */
+  static codeGen(options: NgTools_InternalApi_NG2_CodeGen_Options): Promise<any> {
+    throw throwNotSupportedError();
+  }
+
+  /**
+   * @internal
+   */
+  static listLazyRoutes(options: NgTools_InternalApi_NG2_ListLazyRoutes_Options):
+      NgTools_InternalApi_NG_2_LazyRouteMap {
+    // TODO(tbosch): Also throwNotSupportedError once Angular CLI 1.5.1 ships,
+    // as we only needed this to support Angular CLI 1.5.0 rc.*
+    const ngProgram = createProgram({
+      rootNames: options.program.getRootFileNames(),
+      options: {...options.angularCompilerOptions, collectAllErrors: true},
+      host: options.host
+    });
+    const lazyRoutes = ngProgram.listLazyRoutes(options.entryModule);
+
+    // reset the referencedFiles that the ng.Program added to the SourceFiles
+    // as the host might be caching the source files!
+    for (const sourceFile of options.program.getSourceFiles()) {
+      const originalReferences = getOriginalReferences(sourceFile);
+      if (originalReferences) {
+        sourceFile.referencedFiles = originalReferences;
+      }
+    }
+
+    const result: NgTools_InternalApi_NG_2_LazyRouteMap = {};
+    lazyRoutes.forEach(lazyRoute => {
+      const route = lazyRoute.route;
+      const referencedFilePath = lazyRoute.referencedModule.filePath;
+      if (result[route] && result[route] != referencedFilePath) {
+        throw new Error(
+            `Duplicated path in loadChildren detected: "${route}" is used in 2 loadChildren, ` +
+            `but they point to different modules "(${result[route]} and ` +
+            `"${referencedFilePath}"). Webpack cannot distinguish on context and would fail to ` +
+            'load the proper one.');
+      }
+      result[route] = referencedFilePath;
+    });
+
+    return result;
+  }
+
+  /**
+   * @internal
+   */
+  static extractI18n(options: NgTools_InternalApi_NG2_ExtractI18n_Options): Promise<any> {
+    throw throwNotSupportedError();
+  }
+}
+
+function throwNotSupportedError() {
+  throw new Error(`Please update @angular/cli. Angular 5+ requires at least Angular CLI 1.5+`);
+}
diff --git a/packages/compiler-cli/src/ngtools_api2.ts b/packages/compiler-cli/src/ngtools_api2.ts
new file mode 100644
index 000000000000..956f34ab270e
--- /dev/null
+++ b/packages/compiler-cli/src/ngtools_api2.ts
@@ -0,0 +1,149 @@
+/**
+ * @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 is a private API for @ngtools/webpack. This API should be stable for NG 5.
+ *
+ * It contains copies of the interfaces needed and wrapper functions to ensure that
+ * they are not broken accidentally.
+ *
+ * Once the ngc api is public and stable, this can be removed.
+ */
+
+/**
+ *********************************************************************
+ * Changes to this file need to be approved by the Angular CLI team. *
+ *********************************************************************
+ */
+
+import {ParseSourceSpan} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {formatDiagnostics as formatDiagnosticsOrig} from './perform_compile';
+import {Program as ProgramOrig} from './transformers/api';
+import {createCompilerHost as createCompilerOrig} from './transformers/compiler_host';
+import {createProgram as createProgramOrig} from './transformers/program';
+
+
+// Interfaces from ./transformers/api;
+export interface Diagnostic {
+  messageText: string;
+  span?: ParseSourceSpan;
+  category: ts.DiagnosticCategory;
+  code: number;
+  source: 'angular';
+}
+
+export interface CompilerOptions extends ts.CompilerOptions {
+  basePath?: string;
+  skipMetadataEmit?: boolean;
+  strictMetadataEmit?: boolean;
+  skipTemplateCodegen?: boolean;
+  flatModuleOutFile?: string;
+  flatModuleId?: string;
+  generateCodeForLibraries?: boolean;
+  annotateForClosureCompiler?: boolean;
+  annotationsAs?: 'decorators'|'static fields';
+  trace?: boolean;
+  disableExpressionLowering?: boolean;
+  i18nOutLocale?: string;
+  i18nOutFormat?: string;
+  i18nOutFile?: string;
+  i18nInFormat?: string;
+  i18nInLocale?: string;
+  i18nInFile?: string;
+  i18nInMissingTranslations?: 'error'|'warning'|'ignore';
+  preserveWhitespaces?: boolean;
+  disableTypeScriptVersionCheck?: boolean;
+}
+
+export interface CompilerHost extends ts.CompilerHost {
+  moduleNameToFileName?(moduleName: string, containingFile?: string): string|null;
+  fileNameToModuleName?(importedFilePath: string, containingFilePath: string): string;
+  resourceNameToFileName?(resourceName: string, containingFilePath: string): string|null;
+  toSummaryFileName?(fileName: string, referringSrcFileName: string): string;
+  fromSummaryFileName?(fileName: string, referringLibFileName: string): string;
+  readResource?(fileName: string): Promise<string>|string;
+}
+
+export enum EmitFlags {
+  DTS = 1 << 0,
+  JS = 1 << 1,
+  Metadata = 1 << 2,
+  I18nBundle = 1 << 3,
+  Codegen = 1 << 4,
+
+  Default = DTS | JS | Codegen,
+  All = DTS | JS | Metadata | I18nBundle | Codegen,
+}
+
+export interface CustomTransformers {
+  beforeTs?: ts.TransformerFactory<ts.SourceFile>[];
+  afterTs?: ts.TransformerFactory<ts.SourceFile>[];
+}
+
+export interface TsEmitArguments {
+  program: ts.Program;
+  host: CompilerHost;
+  options: CompilerOptions;
+  targetSourceFile?: ts.SourceFile;
+  writeFile?: ts.WriteFileCallback;
+  cancellationToken?: ts.CancellationToken;
+  emitOnlyDtsFiles?: boolean;
+  customTransformers?: ts.CustomTransformers;
+}
+
+export interface TsEmitCallback { (args: TsEmitArguments): ts.EmitResult; }
+
+export interface LazyRoute {
+  module: {name: string, filePath: string};
+  route: string;
+  referencedModule: {name: string, filePath: string};
+}
+
+export interface Program {
+  getTsProgram(): ts.Program;
+  getTsOptionDiagnostics(cancellationToken?: ts.CancellationToken): ReadonlyArray<ts.Diagnostic>;
+  getNgOptionDiagnostics(cancellationToken?: ts.CancellationToken): ReadonlyArray<Diagnostic>;
+  getTsSyntacticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
+      ReadonlyArray<ts.Diagnostic>;
+  getNgStructuralDiagnostics(cancellationToken?: ts.CancellationToken): ReadonlyArray<Diagnostic>;
+  getTsSemanticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
+      ReadonlyArray<ts.Diagnostic>;
+  getNgSemanticDiagnostics(fileName?: string, cancellationToken?: ts.CancellationToken):
+      ReadonlyArray<Diagnostic>;
+  loadNgStructureAsync(): Promise<void>;
+  listLazyRoutes(entryRoute?: string): LazyRoute[];
+  emit({emitFlags, cancellationToken, customTransformers, emitCallback}: {
+    emitFlags?: EmitFlags,
+    cancellationToken?: ts.CancellationToken,
+    customTransformers?: CustomTransformers,
+    emitCallback?: TsEmitCallback
+  }): ts.EmitResult;
+}
+
+// Wrapper for createProgram.
+export function createProgram(
+    {rootNames, options, host, oldProgram}:
+        {rootNames: string[], options: CompilerOptions, host: CompilerHost, oldProgram?: Program}):
+    Program {
+  return createProgramOrig({rootNames, options, host, oldProgram: oldProgram as any});
+}
+
+// Wrapper for createCompilerHost.
+export function createCompilerHost(
+    {options, tsHost = ts.createCompilerHost(options, true)}:
+        {options: CompilerOptions, tsHost?: ts.CompilerHost}): CompilerHost {
+  return createCompilerOrig({options, tsHost});
+}
+
+// Wrapper for formatDiagnostics.
+export type Diagnostics = ReadonlyArray<ts.Diagnostic|Diagnostic>;
+export function formatDiagnostics(diags: Diagnostics): string {
+  return formatDiagnosticsOrig(diags);
+}
diff --git a/packages/compiler-cli/src/ngtsc/annotations/BUILD.bazel b/packages/compiler-cli/src/ngtsc/annotations/BUILD.bazel
new file mode 100644
index 000000000000..4a0cd4bb5961
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/BUILD.bazel
@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "annotations",
+    srcs = glob([
+        "index.ts",
+        "src/**/*.ts",
+    ]),
+    module_name = "@angular/compiler-cli/src/ngtsc/annotations",
+    deps = [
+        "//packages/compiler",
+        "//packages/compiler-cli/src/ngtsc/host",
+        "//packages/compiler-cli/src/ngtsc/metadata",
+        "//packages/compiler-cli/src/ngtsc/transform",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngtsc/annotations/index.ts b/packages/compiler-cli/src/ngtsc/annotations/index.ts
new file mode 100644
index 000000000000..77a4860842a1
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/index.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {ResourceLoader} from './src/api';
+export {BaseDefDecoratorHandler} from './src/base_def';
+export {ComponentDecoratorHandler} from './src/component';
+export {DirectiveDecoratorHandler} from './src/directive';
+export {InjectableDecoratorHandler} from './src/injectable';
+export {NgModuleDecoratorHandler} from './src/ng_module';
+export {PipeDecoratorHandler} from './src/pipe';
+export {CompilationScope, SelectorScopeRegistry} from './src/selector_scope';
diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/api.ts b/packages/compiler-cli/src/ngtsc/annotations/src/api.ts
new file mode 100644
index 000000000000..32b4c3ff0044
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/src/api.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
+ */
+
+export interface ResourceLoader {
+  preload?(url: string): Promise<void>|undefined;
+  load(url: string): string;
+}
diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/base_def.ts b/packages/compiler-cli/src/ngtsc/annotations/src/base_def.ts
new file mode 100644
index 000000000000..5924bde1e23a
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/src/base_def.ts
@@ -0,0 +1,120 @@
+/**
+ * @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 {R3BaseRefMetaData, compileBaseDefFromMetadata} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {ClassMember, Decorator, ReflectionHost} from '../../host';
+import {staticallyResolve} from '../../metadata';
+import {AnalysisOutput, CompileResult, DecoratorHandler} from '../../transform';
+import {isAngularCore} from './util';
+
+function containsNgTopLevelDecorator(decorators: Decorator[] | null): boolean {
+  if (!decorators) {
+    return false;
+  }
+  return decorators.find(
+             decorator => (decorator.name === 'Component' || decorator.name === 'Directive' ||
+                           decorator.name === 'NgModule') &&
+                 isAngularCore(decorator)) !== undefined;
+}
+
+export class BaseDefDecoratorHandler implements
+    DecoratorHandler<R3BaseRefMetaData, R3BaseRefDecoratorDetection> {
+  constructor(private checker: ts.TypeChecker, private reflector: ReflectionHost, ) {}
+
+  detect(node: ts.ClassDeclaration, decorators: Decorator[]|null): R3BaseRefDecoratorDetection
+      |undefined {
+    if (containsNgTopLevelDecorator(decorators)) {
+      // If the class is already decorated by @Component or @Directive let that
+      // DecoratorHandler handle this. BaseDef is unnecessary.
+      return undefined;
+    }
+
+    let result: R3BaseRefDecoratorDetection|undefined = undefined;
+
+    this.reflector.getMembersOfClass(node).forEach(property => {
+      const {decorators} = property;
+      if (decorators) {
+        for (const decorator of decorators) {
+          const decoratorName = decorator.name;
+          if (decoratorName === 'Input' && isAngularCore(decorator)) {
+            result = result || {};
+            const inputs = result.inputs = result.inputs || [];
+            inputs.push({decorator, property});
+          } else if (decoratorName === 'Output' && isAngularCore(decorator)) {
+            result = result || {};
+            const outputs = result.outputs = result.outputs || [];
+            outputs.push({decorator, property});
+          }
+        }
+      }
+    });
+
+    return result;
+  }
+
+  analyze(node: ts.ClassDeclaration, metadata: R3BaseRefDecoratorDetection):
+      AnalysisOutput<R3BaseRefMetaData> {
+    const analysis: R3BaseRefMetaData = {};
+    if (metadata.inputs) {
+      const inputs = analysis.inputs = {} as{[key: string]: string | [string, string]};
+      metadata.inputs.forEach(({decorator, property}) => {
+        const propName = property.name;
+        const args = decorator.args;
+        let value: string|[string, string];
+        if (args && args.length > 0) {
+          const resolvedValue = staticallyResolve(args[0], this.reflector, this.checker);
+          if (typeof resolvedValue !== 'string') {
+            throw new TypeError('Input alias does not resolve to a string value');
+          }
+          value = [resolvedValue, propName];
+        } else {
+          value = propName;
+        }
+        inputs[propName] = value;
+      });
+    }
+
+    if (metadata.outputs) {
+      const outputs = analysis.outputs = {} as{[key: string]: string};
+      metadata.outputs.forEach(({decorator, property}) => {
+        const propName = property.name;
+        const args = decorator.args;
+        let value: string;
+        if (args && args.length > 0) {
+          const resolvedValue = staticallyResolve(args[0], this.reflector, this.checker);
+          if (typeof resolvedValue !== 'string') {
+            throw new TypeError('Output alias does not resolve to a string value');
+          }
+          value = resolvedValue;
+        } else {
+          value = propName;
+        }
+        outputs[propName] = value;
+      });
+    }
+
+    return {analysis};
+  }
+
+  compile(node: ts.Declaration, analysis: R3BaseRefMetaData): CompileResult[]|CompileResult {
+    const {expression, type} = compileBaseDefFromMetadata(analysis);
+
+    return {
+      name: 'ngBaseDef',
+      initializer: expression, type,
+      statements: [],
+    };
+  }
+}
+
+export interface R3BaseRefDecoratorDetection {
+  inputs?: Array<{property: ClassMember, decorator: Decorator}>;
+  outputs?: Array<{property: ClassMember, decorator: Decorator}>;
+}
diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/component.ts b/packages/compiler-cli/src/ngtsc/annotations/src/component.ts
new file mode 100644
index 000000000000..7f8805d46fe2
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/src/component.ts
@@ -0,0 +1,192 @@
+/**
+ * @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 {ConstantPool, Expression, R3ComponentMetadata, R3DirectiveMetadata, WrappedNodeExpr, compileComponentFromMetadata, makeBindingParser, parseTemplate} from '@angular/compiler';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {Decorator, ReflectionHost} from '../../host';
+import {filterToMembersWithDecorator, reflectObjectLiteral, staticallyResolve} from '../../metadata';
+import {AnalysisOutput, CompileResult, DecoratorHandler} from '../../transform';
+
+import {ResourceLoader} from './api';
+import {extractDirectiveMetadata, extractQueriesFromDecorator, queriesFromFields} from './directive';
+import {SelectorScopeRegistry} from './selector_scope';
+import {isAngularCore, unwrapExpression} from './util';
+
+const EMPTY_MAP = new Map<string, Expression>();
+
+/**
+ * `DecoratorHandler` which handles the `@Component` annotation.
+ */
+export class ComponentDecoratorHandler implements DecoratorHandler<R3ComponentMetadata, Decorator> {
+  constructor(
+      private checker: ts.TypeChecker, private reflector: ReflectionHost,
+      private scopeRegistry: SelectorScopeRegistry, private isCore: boolean,
+      private resourceLoader: ResourceLoader) {}
+
+  private literalCache = new Map<Decorator, ts.ObjectLiteralExpression>();
+
+
+  detect(node: ts.Declaration, decorators: Decorator[]|null): Decorator|undefined {
+    if (!decorators) {
+      return undefined;
+    }
+    return decorators.find(
+        decorator => decorator.name === 'Component' && (this.isCore || isAngularCore(decorator)));
+  }
+
+  preanalyze(node: ts.ClassDeclaration, decorator: Decorator): Promise<void>|undefined {
+    const meta = this._resolveLiteral(decorator);
+    const component = reflectObjectLiteral(meta);
+
+    if (this.resourceLoader.preload !== undefined && component.has('templateUrl')) {
+      const templateUrl =
+          staticallyResolve(component.get('templateUrl') !, this.reflector, this.checker);
+      if (typeof templateUrl !== 'string') {
+        throw new Error(`templateUrl should be a string`);
+      }
+      const url = path.posix.resolve(path.dirname(node.getSourceFile().fileName), templateUrl);
+      return this.resourceLoader.preload(url);
+    }
+    return undefined;
+  }
+
+  analyze(node: ts.ClassDeclaration, decorator: Decorator): AnalysisOutput<R3ComponentMetadata> {
+    const meta = this._resolveLiteral(decorator);
+    this.literalCache.delete(decorator);
+
+    // @Component inherits @Directive, so begin by extracting the @Directive metadata and building
+    // on it.
+    const directiveResult =
+        extractDirectiveMetadata(node, decorator, this.checker, this.reflector, this.isCore);
+    if (directiveResult === undefined) {
+      // `extractDirectiveMetadata` returns undefined when the @Directive has `jit: true`. In this
+      // case, compilation of the decorator is skipped. Returning an empty object signifies
+      // that no analysis was produced.
+      return {};
+    }
+
+    // Next, read the `@Component`-specific fields.
+    const {decoratedElements, decorator: component, metadata} = directiveResult;
+
+    let templateStr: string|null = null;
+    if (component.has('templateUrl')) {
+      const templateUrl =
+          staticallyResolve(component.get('templateUrl') !, this.reflector, this.checker);
+      if (typeof templateUrl !== 'string') {
+        throw new Error(`templateUrl should be a string`);
+      }
+      const url = path.posix.resolve(path.dirname(node.getSourceFile().fileName), templateUrl);
+      templateStr = this.resourceLoader.load(url);
+    } else if (component.has('template')) {
+      const templateExpr = component.get('template') !;
+      const resolvedTemplate = staticallyResolve(templateExpr, this.reflector, this.checker);
+      if (typeof resolvedTemplate !== 'string') {
+        throw new Error(`Template must statically resolve to a string: ${node.name!.text}`);
+      }
+      templateStr = resolvedTemplate;
+    } else {
+      throw new Error(`Component has no template or templateUrl`);
+    }
+
+    let preserveWhitespaces: boolean = false;
+    if (component.has('preserveWhitespaces')) {
+      const value =
+          staticallyResolve(component.get('preserveWhitespaces') !, this.reflector, this.checker);
+      if (typeof value !== 'boolean') {
+        throw new Error(`preserveWhitespaces must resolve to a boolean if present`);
+      }
+      preserveWhitespaces = value;
+    }
+
+    const template = parseTemplate(
+        templateStr, `${node.getSourceFile().fileName}#${node.name!.text}/template.html`,
+        {preserveWhitespaces});
+    if (template.errors !== undefined) {
+      throw new Error(
+          `Errors parsing template: ${template.errors.map(e => e.toString()).join(', ')}`);
+    }
+
+    // If the component has a selector, it should be registered with the `SelectorScopeRegistry` so
+    // when this component appears in an `@NgModule` scope, its selector can be determined.
+    if (metadata.selector !== null) {
+      this.scopeRegistry.registerSelector(node, metadata.selector);
+    }
+
+    // Construct the list of view queries.
+    const coreModule = this.isCore ? undefined : '@angular/core';
+    const viewChildFromFields = queriesFromFields(
+        filterToMembersWithDecorator(decoratedElements, 'ViewChild', coreModule), this.reflector,
+        this.checker);
+    const viewChildrenFromFields = queriesFromFields(
+        filterToMembersWithDecorator(decoratedElements, 'ViewChildren', coreModule), this.reflector,
+        this.checker);
+    const viewQueries = [...viewChildFromFields, ...viewChildrenFromFields];
+
+    if (component.has('queries')) {
+      const queriesFromDecorator = extractQueriesFromDecorator(
+          component.get('queries') !, this.reflector, this.checker, this.isCore);
+      viewQueries.push(...queriesFromDecorator.view);
+    }
+
+    return {
+      analysis: {
+        ...metadata,
+        template,
+        viewQueries,
+
+        // These will be replaced during the compilation step, after all `NgModule`s have been
+        // analyzed and the full compilation scope for the component can be realized.
+        pipes: EMPTY_MAP,
+        directives: EMPTY_MAP,
+        wrapDirectivesInClosure: false,
+      }
+    };
+  }
+
+  compile(node: ts.ClassDeclaration, analysis: R3ComponentMetadata, pool: ConstantPool):
+      CompileResult {
+    // Check whether this component was registered with an NgModule. If so, it should be compiled
+    // under that module's compilation scope.
+    const scope = this.scopeRegistry.lookupCompilationScope(node);
+    if (scope !== null) {
+      // Replace the empty components and directives from the analyze() step with a fully expanded
+      // scope. This is possible now because during compile() the whole compilation unit has been
+      // fully analyzed.
+      const {directives, pipes, containsForwardDecls} = scope;
+      const wrapDirectivesInClosure: boolean = !!containsForwardDecls;
+      analysis = {...analysis, directives, pipes, wrapDirectivesInClosure};
+    }
+
+    const res = compileComponentFromMetadata(analysis, pool, makeBindingParser());
+    return {
+      name: 'ngComponentDef',
+      initializer: res.expression,
+      statements: res.statements,
+      type: res.type,
+    };
+  }
+
+  private _resolveLiteral(decorator: Decorator): ts.ObjectLiteralExpression {
+    if (this.literalCache.has(decorator)) {
+      return this.literalCache.get(decorator) !;
+    }
+    if (decorator.args === null || decorator.args.length !== 1) {
+      throw new Error(`Incorrect number of arguments to @Component decorator`);
+    }
+    const meta = unwrapExpression(decorator.args[0]);
+
+    if (!ts.isObjectLiteralExpression(meta)) {
+      throw new Error(`Decorator argument must be literal.`);
+    }
+
+    this.literalCache.set(decorator, meta);
+    return meta;
+  }
+}
diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/directive.ts b/packages/compiler-cli/src/ngtsc/annotations/src/directive.ts
new file mode 100644
index 000000000000..ce32ab2feb30
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/src/directive.ts
@@ -0,0 +1,429 @@
+/**
+ * @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 {ConstantPool, Expression, R3DirectiveMetadata, R3QueryMetadata, WrappedNodeExpr, compileDirectiveFromMetadata, makeBindingParser, parseHostBindings} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {ClassMember, ClassMemberKind, Decorator, Import, ReflectionHost} from '../../host';
+import {Reference, filterToMembersWithDecorator, reflectObjectLiteral, staticallyResolve} from '../../metadata';
+import {AnalysisOutput, CompileResult, DecoratorHandler} from '../../transform';
+
+import {SelectorScopeRegistry} from './selector_scope';
+import {getConstructorDependencies, isAngularCore, unwrapExpression, unwrapForwardRef} from './util';
+
+const EMPTY_OBJECT: {[key: string]: string} = {};
+
+export class DirectiveDecoratorHandler implements DecoratorHandler<R3DirectiveMetadata, Decorator> {
+  constructor(
+      private checker: ts.TypeChecker, private reflector: ReflectionHost,
+      private scopeRegistry: SelectorScopeRegistry, private isCore: boolean) {}
+
+  detect(node: ts.Declaration, decorators: Decorator[]|null): Decorator|undefined {
+    if (!decorators) {
+      return undefined;
+    }
+    return decorators.find(
+        decorator => decorator.name === 'Directive' && (this.isCore || isAngularCore(decorator)));
+  }
+
+  analyze(node: ts.ClassDeclaration, decorator: Decorator): AnalysisOutput<R3DirectiveMetadata> {
+    const directiveResult =
+        extractDirectiveMetadata(node, decorator, this.checker, this.reflector, this.isCore);
+    const analysis = directiveResult && directiveResult.metadata;
+
+    // If the directive has a selector, it should be registered with the `SelectorScopeRegistry` so
+    // when this directive appears in an `@NgModule` scope, its selector can be determined.
+    if (analysis && analysis.selector !== null) {
+      this.scopeRegistry.registerSelector(node, analysis.selector);
+    }
+
+    return {analysis};
+  }
+
+  compile(node: ts.ClassDeclaration, analysis: R3DirectiveMetadata): CompileResult {
+    const pool = new ConstantPool();
+    const res = compileDirectiveFromMetadata(analysis, pool, makeBindingParser());
+    return {
+      name: 'ngDirectiveDef',
+      initializer: res.expression,
+      statements: pool.statements,
+      type: res.type,
+    };
+  }
+}
+
+/**
+ * Helper function to extract metadata from a `Directive` or `Component`.
+ */
+export function extractDirectiveMetadata(
+    clazz: ts.ClassDeclaration, decorator: Decorator, checker: ts.TypeChecker,
+    reflector: ReflectionHost, isCore: boolean): {
+  decorator: Map<string, ts.Expression>,
+  metadata: R3DirectiveMetadata,
+  decoratedElements: ClassMember[],
+}|undefined {
+  if (decorator.args === null || decorator.args.length !== 1) {
+    throw new Error(`Incorrect number of arguments to @${decorator.name} decorator`);
+  }
+  const meta = unwrapExpression(decorator.args[0]);
+  if (!ts.isObjectLiteralExpression(meta)) {
+    throw new Error(`Decorator argument must be literal.`);
+  }
+  const directive = reflectObjectLiteral(meta);
+
+  if (directive.has('jit')) {
+    // The only allowed value is true, so there's no need to expand further.
+    return undefined;
+  }
+
+  const members = reflector.getMembersOfClass(clazz);
+
+  // Precompute a list of ts.ClassElements that have decorators. This includes things like @Input,
+  // @Output, @HostBinding, etc.
+  const decoratedElements =
+      members.filter(member => !member.isStatic && member.decorators !== null);
+
+  const coreModule = isCore ? undefined : '@angular/core';
+
+  // Construct the map of inputs both from the @Directive/@Component
+  // decorator, and the decorated
+  // fields.
+  const inputsFromMeta = parseFieldToPropertyMapping(directive, 'inputs', reflector, checker);
+  const inputsFromFields = parseDecoratedFields(
+      filterToMembersWithDecorator(decoratedElements, 'Input', coreModule), reflector, checker);
+
+  // And outputs.
+  const outputsFromMeta = parseFieldToPropertyMapping(directive, 'outputs', reflector, checker);
+  const outputsFromFields = parseDecoratedFields(
+      filterToMembersWithDecorator(decoratedElements, 'Output', coreModule), reflector, checker);
+  // Construct the list of queries.
+  const contentChildFromFields = queriesFromFields(
+      filterToMembersWithDecorator(decoratedElements, 'ContentChild', coreModule), reflector,
+      checker);
+  const contentChildrenFromFields = queriesFromFields(
+      filterToMembersWithDecorator(decoratedElements, 'ContentChildren', coreModule), reflector,
+      checker);
+
+  const queries = [...contentChildFromFields, ...contentChildrenFromFields];
+
+  if (directive.has('queries')) {
+    const queriesFromDecorator =
+        extractQueriesFromDecorator(directive.get('queries') !, reflector, checker, isCore);
+    queries.push(...queriesFromDecorator.content);
+  }
+
+  // Parse the selector.
+  let selector = '';
+  if (directive.has('selector')) {
+    const resolved = staticallyResolve(directive.get('selector') !, reflector, checker);
+    if (typeof resolved !== 'string') {
+      throw new Error(`Selector must be a string`);
+    }
+    selector = resolved;
+  }
+
+  const host = extractHostBindings(directive, decoratedElements, reflector, checker, coreModule);
+
+  // Determine if `ngOnChanges` is a lifecycle hook defined on the component.
+  const usesOnChanges = members.some(
+      member => !member.isStatic && member.kind === ClassMemberKind.Method &&
+          member.name === 'ngOnChanges');
+
+  // Parse exportAs.
+  let exportAs: string|null = null;
+  if (directive.has('exportAs')) {
+    const resolved = staticallyResolve(directive.get('exportAs') !, reflector, checker);
+    if (typeof resolved !== 'string') {
+      throw new Error(`exportAs must be a string`);
+    }
+    exportAs = resolved;
+  }
+
+  // Detect if the component inherits from another class
+  const usesInheritance = clazz.heritageClauses !== undefined &&
+      clazz.heritageClauses.some(hc => hc.token === ts.SyntaxKind.ExtendsKeyword);
+  const metadata: R3DirectiveMetadata = {
+    name: clazz.name !.text,
+    deps: getConstructorDependencies(clazz, reflector, isCore), host,
+    lifecycle: {
+        usesOnChanges,
+    },
+    inputs: {...inputsFromMeta, ...inputsFromFields},
+    outputs: {...outputsFromMeta, ...outputsFromFields}, queries, selector,
+    type: new WrappedNodeExpr(clazz.name !),
+    typeArgumentCount: (clazz.typeParameters || []).length,
+    typeSourceSpan: null !, usesInheritance, exportAs,
+  };
+  return {decoratedElements, decorator: directive, metadata};
+}
+
+export function extractQueryMetadata(
+    name: string, args: ReadonlyArray<ts.Expression>, propertyName: string,
+    reflector: ReflectionHost, checker: ts.TypeChecker): R3QueryMetadata {
+  if (args.length === 0) {
+    throw new Error(`@${name} must have arguments`);
+  }
+  const first = name === 'ViewChild' || name === 'ContentChild';
+  const node = unwrapForwardRef(args[0], reflector);
+  const arg = staticallyResolve(node, reflector, checker);
+
+  // Extract the predicate
+  let predicate: Expression|string[]|null = null;
+  if (arg instanceof Reference) {
+    predicate = new WrappedNodeExpr(node);
+  } else if (typeof arg === 'string') {
+    predicate = [arg];
+  } else if (isStringArrayOrDie(arg, '@' + name)) {
+    predicate = arg as string[];
+  } else {
+    throw new Error(`@${name} predicate cannot be interpreted`);
+  }
+
+  // Extract the read and descendants options.
+  let read: Expression|null = null;
+  // The default value for descendants is true for every decorator except @ContentChildren.
+  let descendants: boolean = name !== 'ContentChildren';
+  if (args.length === 2) {
+    const optionsExpr = unwrapExpression(args[1]);
+    if (!ts.isObjectLiteralExpression(optionsExpr)) {
+      throw new Error(`@${name} options must be an object literal`);
+    }
+    const options = reflectObjectLiteral(optionsExpr);
+    if (options.has('read')) {
+      read = new WrappedNodeExpr(options.get('read') !);
+    }
+
+    if (options.has('descendants')) {
+      const descendantsValue = staticallyResolve(options.get('descendants') !, reflector, checker);
+      if (typeof descendantsValue !== 'boolean') {
+        throw new Error(`@${name} options.descendants must be a boolean`);
+      }
+      descendants = descendantsValue;
+    }
+  } else if (args.length > 2) {
+    // Too many arguments.
+    throw new Error(`@${name} has too many arguments`);
+  }
+
+  return {
+      propertyName, predicate, first, descendants, read,
+  };
+}
+
+export function extractQueriesFromDecorator(
+    queryData: ts.Expression, reflector: ReflectionHost, checker: ts.TypeChecker,
+    isCore: boolean): {
+  content: R3QueryMetadata[],
+  view: R3QueryMetadata[],
+} {
+  const content: R3QueryMetadata[] = [], view: R3QueryMetadata[] = [];
+  const expr = unwrapExpression(queryData);
+  if (!ts.isObjectLiteralExpression(queryData)) {
+    throw new Error(`queries metadata must be an object literal`);
+  }
+  reflectObjectLiteral(queryData).forEach((queryExpr, propertyName) => {
+    queryExpr = unwrapExpression(queryExpr);
+    if (!ts.isNewExpression(queryExpr) || !ts.isIdentifier(queryExpr.expression)) {
+      throw new Error(`query metadata must be an instance of a query type`);
+    }
+    const type = reflector.getImportOfIdentifier(queryExpr.expression);
+    if (type === null || (!isCore && type.from !== '@angular/core') ||
+        !QUERY_TYPES.has(type.name)) {
+      throw new Error(`query metadata must be an instance of a query type`);
+    }
+
+    const query = extractQueryMetadata(
+        type.name, queryExpr.arguments || [], propertyName, reflector, checker);
+    if (type.name.startsWith('Content')) {
+      content.push(query);
+    } else {
+      view.push(query);
+    }
+  });
+  return {content, view};
+}
+
+function isStringArrayOrDie(value: any, name: string): value is string[] {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+
+  for (let i = 0; i < value.length; i++) {
+    if (typeof value[i] !== 'string') {
+      throw new Error(`Failed to resolve ${name}[${i}] to a string`);
+    }
+  }
+  return true;
+}
+
+/**
+ * Interpret property mapping fields on the decorator (e.g. inputs or outputs) and return the
+ * correctly shaped metadata object.
+ */
+function parseFieldToPropertyMapping(
+    directive: Map<string, ts.Expression>, field: string, reflector: ReflectionHost,
+    checker: ts.TypeChecker): {[field: string]: string} {
+  if (!directive.has(field)) {
+    return EMPTY_OBJECT;
+  }
+
+  // Resolve the field of interest from the directive metadata to a string[].
+  const metaValues = staticallyResolve(directive.get(field) !, reflector, checker);
+  if (!isStringArrayOrDie(metaValues, field)) {
+    throw new Error(`Failed to resolve @Directive.${field}`);
+  }
+
+  return metaValues.reduce(
+      (results, value) => {
+        // Either the value is 'field' or 'field: property'. In the first case, `property` will
+        // be undefined, in which case the field name should also be used as the property name.
+        const [field, property] = value.split(':', 2).map(str => str.trim());
+        results[field] = property || field;
+        return results;
+      },
+      {} as{[field: string]: string});
+}
+
+/**
+ * Parse property decorators (e.g. `Input` or `Output`) and return the correctly shaped metadata
+ * object.
+ */
+function parseDecoratedFields(
+    fields: {member: ClassMember, decorators: Decorator[]}[], reflector: ReflectionHost,
+    checker: ts.TypeChecker): {[field: string]: string} {
+  return fields.reduce(
+      (results, field) => {
+        const fieldName = field.member.name;
+        field.decorators.forEach(decorator => {
+          // The decorator either doesn't have an argument (@Input()) in which case the property
+          // name is used, or it has one argument (@Output('named')).
+          if (decorator.args == null || decorator.args.length === 0) {
+            results[fieldName] = fieldName;
+          } else if (decorator.args.length === 1) {
+            const property = staticallyResolve(decorator.args[0], reflector, checker);
+            if (typeof property !== 'string') {
+              throw new Error(`Decorator argument must resolve to a string`);
+            }
+            results[fieldName] = property;
+          } else {
+            // Too many arguments.
+            throw new Error(
+                `Decorator must have 0 or 1 arguments, got ${decorator.args.length} argument(s)`);
+          }
+        });
+        return results;
+      },
+      {} as{[field: string]: string});
+}
+
+export function queriesFromFields(
+    fields: {member: ClassMember, decorators: Decorator[]}[], reflector: ReflectionHost,
+    checker: ts.TypeChecker): R3QueryMetadata[] {
+  return fields.map(({member, decorators}) => {
+    if (decorators.length !== 1) {
+      throw new Error(`Cannot have multiple query decorators on the same class member`);
+    } else if (!isPropertyTypeMember(member)) {
+      throw new Error(`Query decorator must go on a property-type member`);
+    }
+    const decorator = decorators[0];
+    return extractQueryMetadata(
+        decorator.name, decorator.args || [], member.name, reflector, checker);
+  });
+}
+
+function isPropertyTypeMember(member: ClassMember): boolean {
+  return member.kind === ClassMemberKind.Getter || member.kind === ClassMemberKind.Setter ||
+      member.kind === ClassMemberKind.Property;
+}
+
+type StringMap = {
+  [key: string]: string
+};
+
+function extractHostBindings(
+    metadata: Map<string, ts.Expression>, members: ClassMember[], reflector: ReflectionHost,
+    checker: ts.TypeChecker, coreModule: string | undefined): {
+  attributes: StringMap,
+  listeners: StringMap,
+  properties: StringMap,
+} {
+  let hostMetadata: StringMap = {};
+  if (metadata.has('host')) {
+    const hostMetaMap = staticallyResolve(metadata.get('host') !, reflector, checker);
+    if (!(hostMetaMap instanceof Map)) {
+      throw new Error(`Decorator host metadata must be an object`);
+    }
+    hostMetaMap.forEach((value, key) => {
+      if (typeof value !== 'string' || typeof key !== 'string') {
+        throw new Error(`Decorator host metadata must be a string -> string object, got ${value}`);
+      }
+      hostMetadata[key] = value;
+    });
+  }
+
+  const {attributes, listeners, properties, animations} = parseHostBindings(hostMetadata);
+
+  filterToMembersWithDecorator(members, 'HostBinding', coreModule)
+      .forEach(({member, decorators}) => {
+        decorators.forEach(decorator => {
+          let hostPropertyName: string = member.name;
+          if (decorator.args !== null && decorator.args.length > 0) {
+            if (decorator.args.length !== 1) {
+              throw new Error(`@HostBinding() can have at most one argument`);
+            }
+
+            const resolved = staticallyResolve(decorator.args[0], reflector, checker);
+            if (typeof resolved !== 'string') {
+              throw new Error(`@HostBinding()'s argument must be a string`);
+            }
+
+            hostPropertyName = resolved;
+          }
+
+          properties[hostPropertyName] = member.name;
+        });
+      });
+
+  filterToMembersWithDecorator(members, 'HostListener', coreModule)
+      .forEach(({member, decorators}) => {
+        decorators.forEach(decorator => {
+          let eventName: string = member.name;
+          let args: string[] = [];
+          if (decorator.args !== null && decorator.args.length > 0) {
+            if (decorator.args.length > 2) {
+              throw new Error(`@HostListener() can have at most two arguments`);
+            }
+
+            const resolved = staticallyResolve(decorator.args[0], reflector, checker);
+            if (typeof resolved !== 'string') {
+              throw new Error(`@HostListener()'s event name argument must be a string`);
+            }
+
+            eventName = resolved;
+
+            if (decorator.args.length === 2) {
+              const resolvedArgs = staticallyResolve(decorator.args[1], reflector, checker);
+              if (!isStringArrayOrDie(resolvedArgs, '@HostListener.args')) {
+                throw new Error(`@HostListener second argument must be a string array`);
+              }
+              args = resolvedArgs;
+            }
+          }
+
+          listeners[eventName] = `${member.name}(${args.join(',')})`;
+        });
+      });
+  return {attributes, properties, listeners};
+}
+
+const QUERY_TYPES = new Set([
+  'ContentChild',
+  'ContentChildren',
+  'ViewChild',
+  'ViewChildren',
+]);
diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/injectable.ts b/packages/compiler-cli/src/ngtsc/annotations/src/injectable.ts
new file mode 100644
index 000000000000..65711ed3f3c1
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/src/injectable.ts
@@ -0,0 +1,184 @@
+/**
+ * @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 {Expression, LiteralExpr, R3DependencyMetadata, R3InjectableMetadata, R3ResolvedDependencyType, WrappedNodeExpr, compileInjectable as compileIvyInjectable} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {Decorator, ReflectionHost} from '../../host';
+import {reflectObjectLiteral} from '../../metadata';
+import {AnalysisOutput, CompileResult, DecoratorHandler} from '../../transform';
+
+import {getConstructorDependencies, isAngularCore} from './util';
+
+
+/**
+ * Adapts the `compileIvyInjectable` compiler for `@Injectable` decorators to the Ivy compiler.
+ */
+export class InjectableDecoratorHandler implements
+    DecoratorHandler<R3InjectableMetadata, Decorator> {
+  constructor(private reflector: ReflectionHost, private isCore: boolean) {}
+
+  detect(node: ts.Declaration, decorators: Decorator[]|null): Decorator|undefined {
+    if (!decorators) {
+      return undefined;
+    }
+    return decorators.find(
+        decorator => decorator.name === 'Injectable' && (this.isCore || isAngularCore(decorator)));
+  }
+
+  analyze(node: ts.ClassDeclaration, decorator: Decorator): AnalysisOutput<R3InjectableMetadata> {
+    return {
+      analysis: extractInjectableMetadata(node, decorator, this.reflector, this.isCore),
+    };
+  }
+
+  compile(node: ts.ClassDeclaration, analysis: R3InjectableMetadata): CompileResult {
+    const res = compileIvyInjectable(analysis);
+    return {
+      name: 'ngInjectableDef',
+      initializer: res.expression,
+      statements: res.statements,
+      type: res.type,
+    };
+  }
+}
+
+/**
+ * Read metadata from the `@Injectable` decorator and produce the `IvyInjectableMetadata`, the input
+ * metadata needed to run `compileIvyInjectable`.
+ */
+function extractInjectableMetadata(
+    clazz: ts.ClassDeclaration, decorator: Decorator, reflector: ReflectionHost,
+    isCore: boolean): R3InjectableMetadata {
+  if (clazz.name === undefined) {
+    throw new Error(`@Injectables must have names`);
+  }
+  const name = clazz.name.text;
+  const type = new WrappedNodeExpr(clazz.name);
+  const ctorDeps = getConstructorDependencies(clazz, reflector, isCore);
+  if (decorator.args === null) {
+    throw new Error(`@Injectable must be called`);
+  }
+  if (decorator.args.length === 0) {
+    return {
+      name,
+      type,
+      providedIn: new LiteralExpr(null), ctorDeps,
+    };
+  } else if (decorator.args.length === 1) {
+    const metaNode = decorator.args[0];
+    // Firstly make sure the decorator argument is an inline literal - if not, it's illegal to
+    // transport references from one location to another. This is the problem that lowering
+    // used to solve - if this restriction proves too undesirable we can re-implement lowering.
+    if (!ts.isObjectLiteralExpression(metaNode)) {
+      throw new Error(`In Ivy, decorator metadata must be inline.`);
+    }
+
+    // Resolve the fields of the literal into a map of field name to expression.
+    const meta = reflectObjectLiteral(metaNode);
+    let providedIn: Expression = new LiteralExpr(null);
+    if (meta.has('providedIn')) {
+      providedIn = new WrappedNodeExpr(meta.get('providedIn') !);
+    }
+
+    let userDeps: R3DependencyMetadata[]|undefined = undefined;
+    if ((meta.has('useClass') || meta.has('useFactory')) && meta.has('deps')) {
+      const depsExpr = meta.get('deps') !;
+      if (!ts.isArrayLiteralExpression(depsExpr)) {
+        throw new Error(`In Ivy, deps metadata must be inline.`);
+      }
+      if (depsExpr.elements.length > 0) {
+        throw new Error(`deps not yet supported`);
+      }
+      userDeps = depsExpr.elements.map(dep => getDep(dep, reflector));
+    }
+
+    if (meta.has('useValue')) {
+      return {
+        name,
+        type,
+        ctorDeps,
+        providedIn,
+        useValue: new WrappedNodeExpr(meta.get('useValue') !)
+      };
+    } else if (meta.has('useExisting')) {
+      return {
+        name,
+        type,
+        ctorDeps,
+        providedIn,
+        useExisting: new WrappedNodeExpr(meta.get('useExisting') !)
+      };
+    } else if (meta.has('useClass')) {
+      return {
+        name,
+        type,
+        ctorDeps,
+        providedIn,
+        useClass: new WrappedNodeExpr(meta.get('useClass') !), userDeps
+      };
+    } else if (meta.has('useFactory')) {
+      // useFactory is special - the 'deps' property must be analyzed.
+      const factory = new WrappedNodeExpr(meta.get('useFactory') !);
+      return {name, type, providedIn, useFactory: factory, ctorDeps, userDeps};
+    } else {
+      return {name, type, providedIn, ctorDeps};
+    }
+  } else {
+    throw new Error(`Too many arguments to @Injectable`);
+  }
+}
+
+
+
+function getDep(dep: ts.Expression, reflector: ReflectionHost): R3DependencyMetadata {
+  const meta: R3DependencyMetadata = {
+    token: new WrappedNodeExpr(dep),
+    host: false,
+    resolved: R3ResolvedDependencyType.Token,
+    optional: false,
+    self: false,
+    skipSelf: false,
+  };
+
+  function maybeUpdateDecorator(
+      dec: ts.Identifier, reflector: ReflectionHost, token?: ts.Expression): void {
+    const source = reflector.getImportOfIdentifier(dec);
+    if (source === null || source.from !== '@angular/core') {
+      return;
+    }
+    switch (source.name) {
+      case 'Inject':
+        if (token !== undefined) {
+          meta.token = new WrappedNodeExpr(token);
+        }
+        break;
+      case 'Optional':
+        meta.optional = true;
+        break;
+      case 'SkipSelf':
+        meta.skipSelf = true;
+        break;
+      case 'Self':
+        meta.self = true;
+        break;
+    }
+  }
+
+  if (ts.isArrayLiteralExpression(dep)) {
+    dep.elements.forEach(el => {
+      if (ts.isIdentifier(el)) {
+        maybeUpdateDecorator(el, reflector);
+      } else if (ts.isNewExpression(el) && ts.isIdentifier(el.expression)) {
+        const token = el.arguments && el.arguments.length > 0 && el.arguments[0] || undefined;
+        maybeUpdateDecorator(el.expression, reflector, token);
+      }
+    });
+  }
+  return meta;
+}
diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/ng_module.ts b/packages/compiler-cli/src/ngtsc/annotations/src/ng_module.ts
new file mode 100644
index 000000000000..de80ac54b42d
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/src/ng_module.ts
@@ -0,0 +1,219 @@
+/**
+ * @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 {ConstantPool, Expression, LiteralArrayExpr, R3DirectiveMetadata, R3InjectorMetadata, R3NgModuleMetadata, WrappedNodeExpr, compileInjector, compileNgModule, makeBindingParser, parseTemplate} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {Decorator, ReflectionHost} from '../../host';
+import {Reference, ResolvedValue, reflectObjectLiteral, staticallyResolve} from '../../metadata';
+import {AnalysisOutput, CompileResult, DecoratorHandler} from '../../transform';
+
+import {SelectorScopeRegistry} from './selector_scope';
+import {getConstructorDependencies, isAngularCore, toR3Reference, unwrapExpression} from './util';
+
+export interface NgModuleAnalysis {
+  ngModuleDef: R3NgModuleMetadata;
+  ngInjectorDef: R3InjectorMetadata;
+}
+
+/**
+ * Compiles @NgModule annotations to ngModuleDef fields.
+ *
+ * TODO(alxhub): handle injector side of things as well.
+ */
+export class NgModuleDecoratorHandler implements DecoratorHandler<NgModuleAnalysis, Decorator> {
+  constructor(
+      private checker: ts.TypeChecker, private reflector: ReflectionHost,
+      private scopeRegistry: SelectorScopeRegistry, private isCore: boolean) {}
+
+  detect(node: ts.Declaration, decorators: Decorator[]|null): Decorator|undefined {
+    if (!decorators) {
+      return undefined;
+    }
+    return decorators.find(
+        decorator => decorator.name === 'NgModule' && (this.isCore || isAngularCore(decorator)));
+  }
+
+  analyze(node: ts.ClassDeclaration, decorator: Decorator): AnalysisOutput<NgModuleAnalysis> {
+    if (decorator.args === null || decorator.args.length > 1) {
+      throw new Error(`Incorrect number of arguments to @NgModule decorator`);
+    }
+
+    // @NgModule can be invoked without arguments. In case it is, pretend as if a blank object
+    // literal was specified. This simplifies the code below.
+    const meta = decorator.args.length === 1 ? unwrapExpression(decorator.args[0]) :
+                                               ts.createObjectLiteral([]);
+
+    if (!ts.isObjectLiteralExpression(meta)) {
+      throw new Error(`Decorator argument must be literal.`);
+    }
+    const ngModule = reflectObjectLiteral(meta);
+
+    if (ngModule.has('jit')) {
+      // The only allowed value is true, so there's no need to expand further.
+      return {};
+    }
+
+    // Extract the module declarations, imports, and exports.
+    let declarations: Reference[] = [];
+    if (ngModule.has('declarations')) {
+      const declarationMeta =
+          staticallyResolve(ngModule.get('declarations') !, this.reflector, this.checker);
+      declarations = resolveTypeList(declarationMeta, 'declarations');
+    }
+    let imports: Reference[] = [];
+    if (ngModule.has('imports')) {
+      const importsMeta = staticallyResolve(
+          ngModule.get('imports') !, this.reflector, this.checker,
+          ref => this._extractModuleFromModuleWithProvidersFn(ref.node));
+      imports = resolveTypeList(importsMeta, 'imports');
+    }
+    let exports: Reference[] = [];
+    if (ngModule.has('exports')) {
+      const exportsMeta = staticallyResolve(
+          ngModule.get('exports') !, this.reflector, this.checker,
+          ref => this._extractModuleFromModuleWithProvidersFn(ref.node));
+      exports = resolveTypeList(exportsMeta, 'exports');
+    }
+
+    // Register this module's information with the SelectorScopeRegistry. This ensures that during
+    // the compile() phase, the module's metadata is available for selector scope computation.
+    this.scopeRegistry.registerModule(node, {declarations, imports, exports});
+
+    const context = node.getSourceFile();
+
+    const ngModuleDef: R3NgModuleMetadata = {
+      type: new WrappedNodeExpr(node.name !),
+      bootstrap: [],
+      declarations: declarations.map(decl => toR3Reference(decl, context)),
+      exports: exports.map(exp => toR3Reference(exp, context)),
+      imports: imports.map(imp => toR3Reference(imp, context)),
+      emitInline: false,
+    };
+
+    const providers: Expression = ngModule.has('providers') ?
+        new WrappedNodeExpr(ngModule.get('providers') !) :
+        new LiteralArrayExpr([]);
+
+    const injectorImports: WrappedNodeExpr<ts.Expression>[] = [];
+    if (ngModule.has('imports')) {
+      injectorImports.push(new WrappedNodeExpr(ngModule.get('imports') !));
+    }
+    if (ngModule.has('exports')) {
+      injectorImports.push(new WrappedNodeExpr(ngModule.get('exports') !));
+    }
+
+    const ngInjectorDef: R3InjectorMetadata = {
+      name: node.name !.text,
+      type: new WrappedNodeExpr(node.name !),
+      deps: getConstructorDependencies(node, this.reflector, this.isCore), providers,
+      imports: new LiteralArrayExpr(injectorImports),
+    };
+
+    return {
+      analysis: {
+          ngModuleDef, ngInjectorDef,
+      },
+      factorySymbolName: node.name !== undefined ? node.name.text : undefined,
+    };
+  }
+
+  compile(node: ts.ClassDeclaration, analysis: NgModuleAnalysis): CompileResult[] {
+    const ngInjectorDef = compileInjector(analysis.ngInjectorDef);
+    const ngModuleDef = compileNgModule(analysis.ngModuleDef);
+    return [
+      {
+        name: 'ngModuleDef',
+        initializer: ngModuleDef.expression,
+        statements: [],
+        type: ngModuleDef.type,
+      },
+      {
+        name: 'ngInjectorDef',
+        initializer: ngInjectorDef.expression,
+        statements: [],
+        type: ngInjectorDef.type,
+      },
+    ];
+  }
+
+  /**
+   * Given a `FunctionDeclaration` or `MethodDeclaration`, check if it is typed as a
+   * `ModuleWithProviders` and return an expression referencing the module if available.
+   */
+  private _extractModuleFromModuleWithProvidersFn(node: ts.FunctionDeclaration|
+                                                  ts.MethodDeclaration): ts.Expression|null {
+    const type = node.type;
+    // Examine the type of the function to see if it's a ModuleWithProviders reference.
+    if (type === undefined || !ts.isTypeReferenceNode(type) || !ts.isIdentifier(type.typeName)) {
+      return null;
+    }
+
+    // Look at the type itself to see where it comes from.
+    const id = this.reflector.getImportOfIdentifier(type.typeName);
+
+    // If it's not named ModuleWithProviders, bail.
+    if (id === null || id.name !== 'ModuleWithProviders') {
+      return null;
+    }
+
+    // If it's not from @angular/core, bail.
+    if (!this.isCore && id.from !== '@angular/core') {
+      return null;
+    }
+
+    // If there's no type parameter specified, bail.
+    if (type.typeArguments === undefined || type.typeArguments.length !== 1) {
+      return null;
+    }
+
+    const arg = type.typeArguments[0];
+
+    // If the argument isn't an Identifier, bail.
+    if (!ts.isTypeReferenceNode(arg) || !ts.isIdentifier(arg.typeName)) {
+      return null;
+    }
+
+    return arg.typeName;
+  }
+}
+
+/**
+ * Compute a list of `Reference`s from a resolved metadata value.
+ */
+function resolveTypeList(resolvedList: ResolvedValue, name: string): Reference[] {
+  const refList: Reference[] = [];
+  if (!Array.isArray(resolvedList)) {
+    throw new Error(`Expected array when reading property ${name}`);
+  }
+
+  resolvedList.forEach((entry, idx) => {
+    // Unwrap ModuleWithProviders for modules that are locally declared (and thus static resolution
+    // was able to descend into the function and return an object literal, a Map).
+    if (entry instanceof Map && entry.has('ngModule')) {
+      entry = entry.get('ngModule') !;
+    }
+
+    if (Array.isArray(entry)) {
+      // Recurse into nested arrays.
+      refList.push(...resolveTypeList(entry, name));
+    } else if (entry instanceof Reference) {
+      if (!entry.expressable) {
+        throw new Error(`Value at position ${idx} in ${name} array is not expressable`);
+      } else if (!ts.isClassDeclaration(entry.node)) {
+        throw new Error(`Value at position ${idx} in ${name} array is not a class declaration`);
+      }
+      refList.push(entry);
+    } else {
+      // TODO(alxhub): expand ModuleWithProviders.
+      throw new Error(`Value at position ${idx} in ${name} array is not a reference: ${entry}`);
+    }
+  });
+
+  return refList;
+}
diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/pipe.ts b/packages/compiler-cli/src/ngtsc/annotations/src/pipe.ts
new file mode 100644
index 000000000000..201d7688a5f0
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/src/pipe.ts
@@ -0,0 +1,84 @@
+/**
+ * @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 {LiteralExpr, R3PipeMetadata, WrappedNodeExpr, compilePipeFromMetadata} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {Decorator, ReflectionHost} from '../../host';
+import {reflectObjectLiteral, staticallyResolve} from '../../metadata';
+import {AnalysisOutput, CompileResult, DecoratorHandler} from '../../transform';
+
+import {SelectorScopeRegistry} from './selector_scope';
+import {getConstructorDependencies, isAngularCore, unwrapExpression} from './util';
+
+export class PipeDecoratorHandler implements DecoratorHandler<R3PipeMetadata, Decorator> {
+  constructor(
+      private checker: ts.TypeChecker, private reflector: ReflectionHost,
+      private scopeRegistry: SelectorScopeRegistry, private isCore: boolean) {}
+
+  detect(node: ts.Declaration, decorators: Decorator[]|null): Decorator|undefined {
+    if (!decorators) {
+      return undefined;
+    }
+    return decorators.find(
+        decorator => decorator.name === 'Pipe' && (this.isCore || isAngularCore(decorator)));
+  }
+
+  analyze(clazz: ts.ClassDeclaration, decorator: Decorator): AnalysisOutput<R3PipeMetadata> {
+    if (clazz.name === undefined) {
+      throw new Error(`@Pipes must have names`);
+    }
+    const name = clazz.name.text;
+    const type = new WrappedNodeExpr(clazz.name);
+    if (decorator.args === null) {
+      throw new Error(`@Pipe must be called`);
+    }
+    const meta = unwrapExpression(decorator.args[0]);
+    if (!ts.isObjectLiteralExpression(meta)) {
+      throw new Error(`Decorator argument must be literal.`);
+    }
+    const pipe = reflectObjectLiteral(meta);
+
+    if (!pipe.has('name')) {
+      throw new Error(`@Pipe decorator is missing name field`);
+    }
+    const pipeName = staticallyResolve(pipe.get('name') !, this.reflector, this.checker);
+    if (typeof pipeName !== 'string') {
+      throw new Error(`@Pipe.name must be a string`);
+    }
+    this.scopeRegistry.registerPipe(clazz, pipeName);
+
+    let pure = true;
+    if (pipe.has('pure')) {
+      const pureValue = staticallyResolve(pipe.get('pure') !, this.reflector, this.checker);
+      if (typeof pureValue !== 'boolean') {
+        throw new Error(`@Pipe.pure must be a boolean`);
+      }
+      pure = pureValue;
+    }
+
+    return {
+      analysis: {
+        name,
+        type,
+        pipeName,
+        deps: getConstructorDependencies(clazz, this.reflector, this.isCore), pure,
+      }
+    };
+  }
+
+  compile(node: ts.ClassDeclaration, analysis: R3PipeMetadata): CompileResult {
+    const res = compilePipeFromMetadata(analysis);
+    return {
+      name: 'ngPipeDef',
+      initializer: res.expression,
+      statements: [],
+      type: res.type,
+    };
+  }
+}
diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/selector_scope.ts b/packages/compiler-cli/src/ngtsc/annotations/src/selector_scope.ts
new file mode 100644
index 000000000000..07e61af38a08
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/src/selector_scope.ts
@@ -0,0 +1,441 @@
+/**
+ * @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 {Expression, ExternalExpr, ExternalReference, WrappedNodeExpr} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {ReflectionHost} from '../../host';
+import {AbsoluteReference, Reference, ResolvedReference, reflectTypeEntityToDeclaration} from '../../metadata';
+import {reflectIdentifierOfDeclaration, reflectNameOfDeclaration} from '../../metadata/src/reflector';
+
+import {toR3Reference} from './util';
+
+
+
+/**
+ * Metadata extracted for a given NgModule that can be used to compute selector scopes.
+ */
+export interface ModuleData {
+  declarations: Reference[];
+  imports: Reference[];
+  exports: Reference[];
+}
+
+/**
+ * Transitively expanded maps of directives and pipes visible to a component being compiled in the
+ * context of some module.
+ */
+export interface CompilationScope<T> {
+  directives: Map<string, T>;
+  pipes: Map<string, T>;
+  containsForwardDecls?: boolean;
+}
+
+/**
+ * Both transitively expanded scopes for a given NgModule.
+ */
+interface SelectorScopes {
+  /**
+   * Set of components, directives, and pipes visible to all components being compiled in the
+   * context of some module.
+   */
+  compilation: Reference[];
+
+  /**
+   * Set of components, directives, and pipes added to the compilation scope of any module importing
+   * some module.
+   */
+  exported: Reference[];
+}
+
+/**
+ * Registry which records and correlates static analysis information of Angular types.
+ *
+ * Once a compilation unit's information is fed into the SelectorScopeRegistry, it can be asked to
+ * produce transitive `CompilationScope`s for components.
+ */
+export class SelectorScopeRegistry {
+  /**
+   *  Map of modules declared in the current compilation unit to their (local) metadata.
+   */
+  private _moduleToData = new Map<ts.Declaration, ModuleData>();
+
+  /**
+   * Map of modules to their cached `CompilationScope`s.
+   */
+  private _compilationScopeCache = new Map<ts.Declaration, CompilationScope<Reference>>();
+
+  /**
+   * Map of components/directives to their selector.
+   */
+  private _directiveToSelector = new Map<ts.Declaration, string>();
+
+  /**
+   * Map of pipes to their name.
+   */
+  private _pipeToName = new Map<ts.Declaration, string>();
+
+  /**
+   * Map of components/directives/pipes to their module.
+   */
+  private _declararedTypeToModule = new Map<ts.Declaration, ts.Declaration>();
+
+  constructor(private checker: ts.TypeChecker, private reflector: ReflectionHost) {}
+
+  /**
+   * Register a module's metadata with the registry.
+   */
+  registerModule(node: ts.Declaration, data: ModuleData): void {
+    node = ts.getOriginalNode(node) as ts.Declaration;
+
+    if (this._moduleToData.has(node)) {
+      throw new Error(`Module already registered: ${reflectNameOfDeclaration(node)}`);
+    }
+    this._moduleToData.set(node, data);
+
+    // Register all of the module's declarations in the context map as belonging to this module.
+    data.declarations.forEach(decl => {
+      this._declararedTypeToModule.set(ts.getOriginalNode(decl.node) as ts.Declaration, node);
+    });
+  }
+
+  /**
+   * Register the selector of a component or directive with the registry.
+   */
+  registerSelector(node: ts.Declaration, selector: string): void {
+    node = ts.getOriginalNode(node) as ts.Declaration;
+
+    if (this._directiveToSelector.has(node)) {
+      throw new Error(`Selector already registered: ${reflectNameOfDeclaration(node)} ${selector}`);
+    }
+    this._directiveToSelector.set(node, selector);
+  }
+
+  /**
+   * Register the name of a pipe with the registry.
+   */
+  registerPipe(node: ts.Declaration, name: string): void {
+    node = ts.getOriginalNode(node) as ts.Declaration;
+
+    this._pipeToName.set(node, name);
+  }
+
+  /**
+   * Produce the compilation scope of a component, which is determined by the module that declares
+   * it.
+   */
+  lookupCompilationScope(node: ts.Declaration): CompilationScope<Expression>|null {
+    node = ts.getOriginalNode(node) as ts.Declaration;
+
+    // If the component has no associated module, then it has no compilation scope.
+    if (!this._declararedTypeToModule.has(node)) {
+      return null;
+    }
+
+    const module = this._declararedTypeToModule.get(node) !;
+
+    // Compilation scope computation is somewhat expensive, so it's cached. Check the cache for
+    // the module.
+    if (this._compilationScopeCache.has(module)) {
+      // The compilation scope was cached.
+      const scope = this._compilationScopeCache.get(module) !;
+
+      // The scope as cached is in terms of References, not Expressions. Converting between them
+      // requires knowledge of the context file (in this case, the component node's source file).
+      return convertScopeToExpressions(scope, node);
+    }
+
+    // This is the first time the scope for this module is being computed.
+    const directives = new Map<string, Reference>();
+    const pipes = new Map<string, Reference>();
+
+    // Process the declaration scope of the module, and lookup the selector of every declared type.
+    // The initial value of ngModuleImportedFrom is 'null' which signifies that the NgModule
+    // was not imported from a .d.ts source.
+    this.lookupScopesOrDie(module !, /* ngModuleImportedFrom */ null).compilation.forEach(ref => {
+      const node = ts.getOriginalNode(ref.node) as ts.Declaration;
+
+      // Either the node represents a directive or a pipe. Look for both.
+      const selector = this.lookupDirectiveSelector(node);
+      // Only directives/components with selectors get added to the scope.
+      if (selector != null) {
+        directives.set(selector, ref);
+        return;
+      }
+
+      const name = this.lookupPipeName(node);
+      if (name != null) {
+        pipes.set(name, ref);
+      }
+    });
+
+    const scope: CompilationScope<Reference> = {directives, pipes};
+
+    // Many components may be compiled in the same scope, so cache it.
+    this._compilationScopeCache.set(node, scope);
+
+    // Convert References to Expressions in the context of the component's source file.
+    return convertScopeToExpressions(scope, node);
+  }
+
+  private lookupScopesOrDie(node: ts.Declaration, ngModuleImportedFrom: string|null):
+      SelectorScopes {
+    const result = this.lookupScopes(node, ngModuleImportedFrom);
+    if (result === null) {
+      throw new Error(`Module not found: ${reflectIdentifierOfDeclaration(node)}`);
+    }
+    return result;
+  }
+
+  /**
+   * Lookup `SelectorScopes` for a given module.
+   *
+   * This function assumes that if the given module was imported from an absolute path
+   * (`ngModuleImportedFrom`) then all of its declarations are exported at that same path, as well
+   * as imports and exports from other modules that are relatively imported.
+   */
+  private lookupScopes(node: ts.Declaration, ngModuleImportedFrom: string|null): SelectorScopes
+      |null {
+    let data: ModuleData|null = null;
+
+    // Either this module was analyzed directly, or has a precompiled ngModuleDef.
+    if (this._moduleToData.has(node)) {
+      // The module was analyzed before, and thus its data is available.
+      data = this._moduleToData.get(node) !;
+    } else {
+      // The module wasn't analyzed before, and probably has a precompiled ngModuleDef with a type
+      // annotation that specifies the needed metadata.
+      data = this._readMetadataFromCompiledClass(node, ngModuleImportedFrom);
+      // Note that data here could still be null, if the class didn't have a precompiled
+      // ngModuleDef.
+    }
+
+    if (data === null) {
+      return null;
+    }
+
+    return {
+      compilation: [
+        ...data.declarations,
+        // Expand imports to the exported scope of those imports.
+        ...flatten(data.imports.map(
+            ref => this.lookupScopesOrDie(ref.node as ts.Declaration, absoluteModuleName(ref))
+                       .exported)),
+        // And include the compilation scope of exported modules.
+        ...flatten(
+            data.exports
+                .map(ref => this.lookupScopes(ref.node as ts.Declaration, absoluteModuleName(ref)))
+                .filter((scope: SelectorScopes | null): scope is SelectorScopes => scope !== null)
+                .map(scope => scope.exported))
+      ],
+      exported: flatten(data.exports.map(ref => {
+        const scope = this.lookupScopes(ref.node as ts.Declaration, absoluteModuleName(ref));
+        if (scope !== null) {
+          return scope.exported;
+        } else {
+          return [ref];
+        }
+      })),
+    };
+  }
+
+  /**
+   * Lookup the selector of a component or directive class.
+   *
+   * Potentially this class is declared in a .d.ts file or otherwise has a manually created
+   * ngComponentDef/ngDirectiveDef. In this case, the type metadata of that definition is read
+   * to determine the selector.
+   */
+  private lookupDirectiveSelector(node: ts.Declaration): string|null {
+    if (this._directiveToSelector.has(node)) {
+      return this._directiveToSelector.get(node) !;
+    } else {
+      return this._readSelectorFromCompiledClass(node);
+    }
+  }
+
+  private lookupPipeName(node: ts.Declaration): string|null {
+    if (this._pipeToName.has(node)) {
+      return this._pipeToName.get(node) !;
+    } else {
+      return this._readNameFromCompiledClass(node);
+    }
+  }
+
+  /**
+   * Read the metadata from a class that has already been compiled somehow (either it's in a .d.ts
+   * file, or in a .ts file with a handwritten definition).
+   *
+   * @param clazz the class of interest
+   * @param ngModuleImportedFrom module specifier of the import path to assume for all declarations
+   * stemming from this module.
+   */
+  private _readMetadataFromCompiledClass(clazz: ts.Declaration, ngModuleImportedFrom: string|null):
+      ModuleData|null {
+    // This operation is explicitly not memoized, as it depends on `ngModuleImportedFrom`.
+    // TODO(alxhub): investigate caching of .d.ts module metadata.
+    const ngModuleDef = this.reflector.getMembersOfClass(clazz).find(
+        member => member.name === 'ngModuleDef' && member.isStatic);
+    if (ngModuleDef === undefined) {
+      return null;
+    } else if (
+        // Validate that the shape of the ngModuleDef type is correct.
+        ngModuleDef.type === null || !ts.isTypeReferenceNode(ngModuleDef.type) ||
+        ngModuleDef.type.typeArguments === undefined ||
+        ngModuleDef.type.typeArguments.length !== 4) {
+      return null;
+    }
+
+    // Read the ModuleData out of the type arguments.
+    const [_, declarationMetadata, importMetadata, exportMetadata] = ngModuleDef.type.typeArguments;
+    return {
+      declarations: this._extractReferencesFromType(declarationMetadata, ngModuleImportedFrom),
+      exports: this._extractReferencesFromType(exportMetadata, ngModuleImportedFrom),
+      imports: this._extractReferencesFromType(importMetadata, ngModuleImportedFrom),
+    };
+  }
+
+  /**
+   * Get the selector from type metadata for a class with a precompiled ngComponentDef or
+   * ngDirectiveDef.
+   */
+  private _readSelectorFromCompiledClass(clazz: ts.Declaration): string|null {
+    const def = this.reflector.getMembersOfClass(clazz).find(
+        field =>
+            field.isStatic && (field.name === 'ngComponentDef' || field.name === 'ngDirectiveDef'));
+    if (def === undefined) {
+      // No definition could be found.
+      return null;
+    } else if (
+        def.type === null || !ts.isTypeReferenceNode(def.type) ||
+        def.type.typeArguments === undefined || def.type.typeArguments.length !== 2) {
+      // The type metadata was the wrong shape.
+      return null;
+    }
+    const type = def.type.typeArguments[1];
+    if (!ts.isLiteralTypeNode(type) || !ts.isStringLiteral(type.literal)) {
+      // The type metadata was the wrong type.
+      return null;
+    }
+    return type.literal.text;
+  }
+
+  /**
+   * Get the selector from type metadata for a class with a precompiled ngComponentDef or
+   * ngDirectiveDef.
+   */
+  private _readNameFromCompiledClass(clazz: ts.Declaration): string|null {
+    const def = this.reflector.getMembersOfClass(clazz).find(
+        field => field.isStatic && field.name === 'ngPipeDef');
+    if (def === undefined) {
+      // No definition could be found.
+      return null;
+    } else if (
+        def.type === null || !ts.isTypeReferenceNode(def.type) ||
+        def.type.typeArguments === undefined || def.type.typeArguments.length !== 2) {
+      // The type metadata was the wrong shape.
+      return null;
+    }
+    const type = def.type.typeArguments[1];
+    if (!ts.isLiteralTypeNode(type) || !ts.isStringLiteral(type.literal)) {
+      // The type metadata was the wrong type.
+      return null;
+    }
+    return type.literal.text;
+  }
+
+  /**
+   * Process a `TypeNode` which is a tuple of references to other types, and return `Reference`s to
+   * them.
+   *
+   * This operation assumes that these types should be imported from `ngModuleImportedFrom` unless
+   * they themselves were imported from another absolute path.
+   */
+  private _extractReferencesFromType(def: ts.TypeNode, ngModuleImportedFrom: string|null):
+      Reference[] {
+    if (!ts.isTupleTypeNode(def)) {
+      return [];
+    }
+    return def.elementTypes.map(element => {
+      if (!ts.isTypeQueryNode(element)) {
+        throw new Error(`Expected TypeQueryNode`);
+      }
+      const type = element.exprName;
+      if (ngModuleImportedFrom !== null) {
+        const {node, from} = reflectTypeEntityToDeclaration(type, this.checker);
+        const moduleName = (from !== null && !from.startsWith('.') ? from : ngModuleImportedFrom);
+        const id = reflectIdentifierOfDeclaration(node);
+        return new AbsoluteReference(node, id !, moduleName, id !.text);
+      } else {
+        const {node} = reflectTypeEntityToDeclaration(type, this.checker);
+        const id = reflectIdentifierOfDeclaration(node);
+        return new ResolvedReference(node, id !);
+      }
+    });
+  }
+}
+
+function flatten<T>(array: T[][]): T[] {
+  return array.reduce((accum, subArray) => {
+    accum.push(...subArray);
+    return accum;
+  }, [] as T[]);
+}
+
+function absoluteModuleName(ref: Reference): string|null {
+  if (!(ref instanceof AbsoluteReference)) {
+    return null;
+  }
+  return ref.moduleName;
+}
+
+function convertReferenceMap(
+    map: Map<string, Reference>, context: ts.SourceFile): Map<string, Expression> {
+  return new Map<string, Expression>(Array.from(map.entries()).map(([selector, ref]): [
+    string, Expression
+  ] => [selector, toR3Reference(ref, context).value]));
+}
+
+function convertScopeToExpressions(
+    scope: CompilationScope<Reference>, context: ts.Declaration): CompilationScope<Expression> {
+  const sourceContext = ts.getOriginalNode(context).getSourceFile();
+  const directives = convertReferenceMap(scope.directives, sourceContext);
+  const pipes = convertReferenceMap(scope.pipes, sourceContext);
+  const declPointer = maybeUnwrapNameOfDeclaration(context);
+  let containsForwardDecls = false;
+  directives.forEach(expr => {
+    containsForwardDecls =
+        containsForwardDecls || isExpressionForwardReference(expr, declPointer, sourceContext);
+  });
+  !containsForwardDecls && pipes.forEach(expr => {
+    containsForwardDecls =
+        containsForwardDecls || isExpressionForwardReference(expr, declPointer, sourceContext);
+  });
+  return {directives, pipes, containsForwardDecls};
+}
+
+function isExpressionForwardReference(
+    expr: Expression, context: ts.Node, contextSource: ts.SourceFile): boolean {
+  if (isWrappedTsNodeExpr(expr)) {
+    const node = ts.getOriginalNode(expr.node);
+    return node.getSourceFile() === contextSource && context.pos < node.pos;
+  }
+  return false;
+}
+
+function isWrappedTsNodeExpr(expr: Expression): expr is WrappedNodeExpr<ts.Node> {
+  return expr instanceof WrappedNodeExpr;
+}
+
+function maybeUnwrapNameOfDeclaration(decl: ts.Declaration): ts.Declaration|ts.Identifier {
+  if ((ts.isClassDeclaration(decl) || ts.isVariableDeclaration(decl)) && decl.name !== undefined &&
+      ts.isIdentifier(decl.name)) {
+    return decl.name;
+  }
+  return decl;
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/util.ts b/packages/compiler-cli/src/ngtsc/annotations/src/util.ts
new file mode 100644
index 000000000000..21135f9233f6
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/src/util.ts
@@ -0,0 +1,179 @@
+/**
+ * @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 {Expression, R3DependencyMetadata, R3Reference, R3ResolvedDependencyType, WrappedNodeExpr} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {Decorator, ReflectionHost} from '../../host';
+import {AbsoluteReference, ImportMode, Reference} from '../../metadata';
+
+export function getConstructorDependencies(
+    clazz: ts.ClassDeclaration, reflector: ReflectionHost, isCore: boolean): R3DependencyMetadata[]|
+    null {
+  const useType: R3DependencyMetadata[] = [];
+  let ctorParams = reflector.getConstructorParameters(clazz);
+  if (ctorParams === null) {
+    if (reflector.hasBaseClass(clazz)) {
+      return null;
+    } else {
+      ctorParams = [];
+    }
+  }
+  ctorParams.forEach((param, idx) => {
+    let tokenExpr = param.type;
+    let optional = false, self = false, skipSelf = false, host = false;
+    let resolved = R3ResolvedDependencyType.Token;
+    (param.decorators || []).filter(dec => isCore || isAngularCore(dec)).forEach(dec => {
+      if (dec.name === 'Inject') {
+        if (dec.args === null || dec.args.length !== 1) {
+          throw new Error(`Unexpected number of arguments to @Inject().`);
+        }
+        tokenExpr = dec.args[0];
+      } else if (dec.name === 'Optional') {
+        optional = true;
+      } else if (dec.name === 'SkipSelf') {
+        skipSelf = true;
+      } else if (dec.name === 'Self') {
+        self = true;
+      } else if (dec.name === 'Host') {
+        host = true;
+      } else if (dec.name === 'Attribute') {
+        if (dec.args === null || dec.args.length !== 1) {
+          throw new Error(`Unexpected number of arguments to @Attribute().`);
+        }
+        tokenExpr = dec.args[0];
+        resolved = R3ResolvedDependencyType.Attribute;
+      } else {
+        throw new Error(`Unexpected decorator ${dec.name} on parameter.`);
+      }
+    });
+    if (tokenExpr === null) {
+      throw new Error(
+          `No suitable token for parameter ${param.name || idx} of class ${clazz.name!.text}`);
+    }
+    if (ts.isIdentifier(tokenExpr)) {
+      const importedSymbol = reflector.getImportOfIdentifier(tokenExpr);
+      if (importedSymbol !== null && importedSymbol.from === '@angular/core') {
+        switch (importedSymbol.name) {
+          case 'ChangeDetectorRef':
+            resolved = R3ResolvedDependencyType.ChangeDetectorRef;
+            break;
+          case 'ElementRef':
+            resolved = R3ResolvedDependencyType.ElementRef;
+            break;
+          case 'Injector':
+            resolved = R3ResolvedDependencyType.Injector;
+            break;
+          case 'TemplateRef':
+            resolved = R3ResolvedDependencyType.TemplateRef;
+            break;
+          case 'ViewContainerRef':
+            resolved = R3ResolvedDependencyType.ViewContainerRef;
+            break;
+          default:
+            // Leave as a Token or Attribute.
+        }
+      }
+    }
+    const token = new WrappedNodeExpr(tokenExpr);
+    useType.push({token, optional, self, skipSelf, host, resolved});
+  });
+  return useType;
+}
+
+export function toR3Reference(ref: Reference, context: ts.SourceFile): R3Reference {
+  const value = ref.toExpression(context, ImportMode.UseExistingImport);
+  const type = ref.toExpression(context, ImportMode.ForceNewImport);
+  if (value === null || type === null) {
+    throw new Error(`Could not refer to ${ts.SyntaxKind[ref.node.kind]}`);
+  }
+  return {value, type};
+}
+
+export function isAngularCore(decorator: Decorator): boolean {
+  return decorator.import !== null && decorator.import.from === '@angular/core';
+}
+
+/**
+ * Unwrap a `ts.Expression`, removing outer type-casts or parentheses until the expression is in its
+ * lowest level form.
+ *
+ * For example, the expression "(foo as Type)" unwraps to "foo".
+ */
+export function unwrapExpression(node: ts.Expression): ts.Expression {
+  while (ts.isAsExpression(node) || ts.isParenthesizedExpression(node)) {
+    node = node.expression;
+  }
+  return node;
+}
+
+function expandForwardRef(arg: ts.Expression): ts.Expression|null {
+  if (!ts.isArrowFunction(arg) && !ts.isFunctionExpression(arg)) {
+    return null;
+  }
+
+  const body = arg.body;
+  // Either the body is a ts.Expression directly, or a block with a single return statement.
+  if (ts.isBlock(body)) {
+    // Block body - look for a single return statement.
+    if (body.statements.length !== 1) {
+      return null;
+    }
+    const stmt = body.statements[0];
+    if (!ts.isReturnStatement(stmt) || stmt.expression === undefined) {
+      return null;
+    }
+    return stmt.expression;
+  } else {
+    // Shorthand body - return as an expression.
+    return body;
+  }
+}
+
+/**
+ * Possibly resolve a forwardRef() expression into the inner value.
+ *
+ * @param node the forwardRef() expression to resolve
+ * @param reflector a ReflectionHost
+ * @returns the resolved expression, if the original expression was a forwardRef(), or the original
+ * expression otherwise
+ */
+export function unwrapForwardRef(node: ts.Expression, reflector: ReflectionHost): ts.Expression {
+  if (!ts.isCallExpression(node) || !ts.isIdentifier(node.expression) ||
+      node.arguments.length !== 1) {
+    return node;
+  }
+  const expr = expandForwardRef(node.arguments[0]);
+  if (expr === null) {
+    return node;
+  }
+  const imp = reflector.getImportOfIdentifier(node.expression);
+  if (imp === null || imp.from !== '@angular/core' || imp.name !== 'forwardRef') {
+    return node;
+  } else {
+    return expr;
+  }
+}
+
+/**
+ * A foreign function resolver for `staticallyResolve` which unwraps forwardRef() expressions.
+ *
+ * @param ref a Reference to the declaration of the function being called (which might be
+ * forwardRef)
+ * @param args the arguments to the invocation of the forwardRef expression
+ * @returns an unwrapped argument if `ref` pointed to forwardRef, or null otherwise
+ */
+export function forwardRefResolver(
+    ref: Reference<ts.FunctionDeclaration|ts.MethodDeclaration>,
+    args: ts.Expression[]): ts.Expression|null {
+  if (!(ref instanceof AbsoluteReference) || ref.moduleName !== '@angular/core' ||
+      ref.symbolName !== 'forwardRef' || args.length !== 1) {
+    return null;
+  }
+  return expandForwardRef(args[0]);
+}
diff --git a/packages/compiler-cli/src/ngtsc/annotations/test/BUILD.bazel b/packages/compiler-cli/src/ngtsc/annotations/test/BUILD.bazel
new file mode 100644
index 000000000000..a6898c53fbc6
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/test/BUILD.bazel
@@ -0,0 +1,28 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob([
+        "**/*.ts",
+    ]),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli/src/ngtsc/annotations",
+        "//packages/compiler-cli/src/ngtsc/metadata",
+        "//packages/compiler-cli/src/ngtsc/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_no_angular_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node_no_angular",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngtsc/annotations/test/selector_scope_spec.ts b/packages/compiler-cli/src/ngtsc/annotations/test/selector_scope_spec.ts
new file mode 100644
index 000000000000..0fab44b047fd
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/test/selector_scope_spec.ts
@@ -0,0 +1,139 @@
+/**
+ * @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 ts from 'typescript';
+
+import {TypeScriptReflectionHost} from '../../metadata';
+import {AbsoluteReference, ResolvedReference} from '../../metadata/src/resolver';
+import {getDeclaration, makeProgram} from '../../testing/in_memory_typescript';
+import {NgModuleDecoratorHandler} from '../src/ng_module';
+import {SelectorScopeRegistry} from '../src/selector_scope';
+
+describe('SelectorScopeRegistry', () => {
+  it('absolute imports work', () => {
+    const {program} = makeProgram([
+      {
+        name: 'node_modules/@angular/core/index.d.ts',
+        contents: `
+        export interface NgComponentDef<A, B> {}
+        export interface NgModuleDef<A, B, C, D> {}
+      `
+      },
+      {
+        name: 'node_modules/some_library/index.d.ts',
+        contents: `
+        import {NgModuleDef} from '@angular/core';
+        import * as i0 from './component';
+        
+        export declare class SomeModule {
+          static ngModuleDef: NgModuleDef<SomeModule, [typeof i0.SomeCmp], never, [typeof i0.SomeCmp]>;
+        }
+      `
+      },
+      {
+        name: 'node_modules/some_library/component.d.ts',
+        contents: `
+        import {NgComponentDef} from '@angular/core';
+
+        export declare class SomeCmp {
+          static ngComponentDef: NgComponentDef<SomeCmp, 'some-cmp'>;
+        }
+      `
+      },
+      {
+        name: 'entry.ts',
+        contents: `
+          export class ProgramCmp {}
+          export class ProgramModule {}
+      `
+      },
+    ]);
+    const checker = program.getTypeChecker();
+    const host = new TypeScriptReflectionHost(checker);
+    const ProgramModule =
+        getDeclaration(program, 'entry.ts', 'ProgramModule', ts.isClassDeclaration);
+    const ProgramCmp = getDeclaration(program, 'entry.ts', 'ProgramCmp', ts.isClassDeclaration);
+    const SomeModule = getDeclaration(
+        program, 'node_modules/some_library/index.d.ts', 'SomeModule', ts.isClassDeclaration);
+    expect(ProgramModule).toBeDefined();
+    expect(SomeModule).toBeDefined();
+
+    const registry = new SelectorScopeRegistry(checker, host);
+
+    registry.registerModule(ProgramModule, {
+      declarations: [new ResolvedReference(ProgramCmp, ProgramCmp.name !)],
+      exports: [],
+      imports: [new AbsoluteReference(SomeModule, SomeModule.name !, 'some_library', 'SomeModule')],
+    });
+
+    registry.registerSelector(ProgramCmp, 'program-cmp');
+
+    const scope = registry.lookupCompilationScope(ProgramCmp) !;
+    expect(scope).toBeDefined();
+    expect(scope.directives).toBeDefined();
+    expect(scope.directives.size).toBe(2);
+  });
+
+  it('exports of third-party libs work', () => {
+    const {program} = makeProgram([
+      {
+        name: 'node_modules/@angular/core/index.d.ts',
+        contents: `
+        export interface NgComponentDef<A, B> {}
+        export interface NgModuleDef<A, B, C, D> {}
+      `
+      },
+      {
+        name: 'node_modules/some_library/index.d.ts',
+        contents: `
+        import {NgComponentDef, NgModuleDef} from '@angular/core';
+        
+        export declare class SomeModule {
+          static ngModuleDef: NgModuleDef<SomeModule, [typeof SomeCmp], never, [typeof SomeCmp]>;
+        }
+
+        export declare class SomeCmp {
+          static ngComponentDef: NgComponentDef<SomeCmp, 'some-cmp'>;
+        }
+      `
+      },
+      {
+        name: 'entry.ts',
+        contents: `
+          export class ProgramCmp {}
+          export class ProgramModule {}
+      `
+      },
+    ]);
+    const checker = program.getTypeChecker();
+    const host = new TypeScriptReflectionHost(checker);
+    const ProgramModule =
+        getDeclaration(program, 'entry.ts', 'ProgramModule', ts.isClassDeclaration);
+    const ProgramCmp = getDeclaration(program, 'entry.ts', 'ProgramCmp', ts.isClassDeclaration);
+    const SomeModule = getDeclaration(
+        program, 'node_modules/some_library/index.d.ts', 'SomeModule', ts.isClassDeclaration);
+    expect(ProgramModule).toBeDefined();
+    expect(SomeModule).toBeDefined();
+
+    const registry = new SelectorScopeRegistry(checker, host);
+
+    registry.registerModule(ProgramModule, {
+      declarations: [new ResolvedReference(ProgramCmp, ProgramCmp.name !)],
+      exports: [new AbsoluteReference(SomeModule, SomeModule.name !, 'some_library', 'SomeModule')],
+      imports: [],
+    });
+
+    registry.registerSelector(ProgramCmp, 'program-cmp');
+
+    debugger;
+    const scope = registry.lookupCompilationScope(ProgramCmp) !;
+    expect(scope).toBeDefined();
+    expect(scope.directives).toBeDefined();
+    expect(scope.directives.size).toBe(2);
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngtsc/annotations/test/util_spec.ts b/packages/compiler-cli/src/ngtsc/annotations/test/util_spec.ts
new file mode 100644
index 000000000000..95fc30ef1ccb
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/annotations/test/util_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 * as ts from 'typescript';
+
+import {unwrapExpression} from '../src/util';
+
+describe('ngtsc annotation utilities', () => {
+  describe('unwrapExpression', () => {
+    const obj = ts.createObjectLiteral();
+    it('should pass through an ObjectLiteralExpression',
+       () => { expect(unwrapExpression(obj)).toBe(obj); });
+
+    it('should unwrap an ObjectLiteralExpression in parentheses', () => {
+      const wrapped = ts.createParen(obj);
+      expect(unwrapExpression(wrapped)).toBe(obj);
+    });
+
+    it('should unwrap an ObjectLiteralExpression with a type cast', () => {
+      const cast = ts.createAsExpression(obj, ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword));
+      expect(unwrapExpression(cast)).toBe(obj);
+    });
+
+    it('should unwrap an ObjectLiteralExpression with a type cast in parentheses', () => {
+      const cast = ts.createAsExpression(obj, ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword));
+      const wrapped = ts.createParen(cast);
+      expect(unwrapExpression(wrapped)).toBe(obj);
+    });
+  });
+});
diff --git a/packages/compiler-cli/src/ngtsc/factories/BUILD.bazel b/packages/compiler-cli/src/ngtsc/factories/BUILD.bazel
new file mode 100644
index 000000000000..1643e63d4892
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/factories/BUILD.bazel
@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "factories",
+    srcs = glob([
+        "index.ts",
+        "src/**/*.ts",
+    ]),
+    module_name = "@angular/compiler-cli/src/ngtsc/factories",
+    deps = [
+        "//packages/compiler",
+        "//packages/compiler-cli/src/ngtsc/host",
+        "//packages/compiler-cli/src/ngtsc/metadata",
+        "//packages/compiler-cli/src/ngtsc/util",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngtsc/factories/README.md b/packages/compiler-cli/src/ngtsc/factories/README.md
new file mode 100644
index 000000000000..bf4bbc5a3106
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/factories/README.md
@@ -0,0 +1,11 @@
+Deals with the creation of generated factory files.
+
+Generated factory files create a catch-22 in ngtsc. Their contents depends on static analysis of the current program, yet they're also importable from the current program. This importability gives rise to the requirement that the contents of the generated file must be known before program creation, so that imports of it are valid. However, until the program is created, the analysis to determine the contents of the generated file cannot take place.
+
+ngc used to get away with this because the analysis phase did not depend on program creation but on the metadata collection / global analysis process.
+
+ngtsc is forced to take a different approach. A lightweight analysis pipeline which does not rely on the ts.TypeChecker (and thus can run before the program is created) is used to estimate the contents of a generated file, in a way that allows the program to be created. A transformer then operates on this estimated file during emit and replaces the estimated contents with accurate information.
+
+It is important that this estimate be an overestimate, as type-checking will always be run against the estimated file, and must succeed in every case where it would have succeeded with accurate info.
+
+This directory contains the utilities for generating, updating, and incorporating these factory files into a ts.Program.
diff --git a/packages/compiler-cli/src/ngtsc/factories/index.ts b/packages/compiler-cli/src/ngtsc/factories/index.ts
new file mode 100644
index 000000000000..b444770ea592
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/factories/index.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 {FactoryGenerator} from './src/generator';
+export {GeneratedFactoryHostWrapper} from './src/host';
+export {FactoryInfo, generatedFactoryTransform} from './src/transform';
diff --git a/packages/compiler-cli/src/ngtsc/factories/src/generator.ts b/packages/compiler-cli/src/ngtsc/factories/src/generator.ts
new file mode 100644
index 000000000000..ec1a8a3cb31b
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/factories/src/generator.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 path from 'path';
+import * as ts from 'typescript';
+
+const TS_DTS_SUFFIX = /(\.d)?\.ts$/;
+
+/**
+ * Generates ts.SourceFiles which contain variable declarations for NgFactories for every exported
+ * class of an input ts.SourceFile.
+ */
+export class FactoryGenerator {
+  factoryFor(original: ts.SourceFile, genFilePath: string): ts.SourceFile {
+    const relativePathToSource =
+        './' + path.posix.basename(original.fileName).replace(TS_DTS_SUFFIX, '');
+    // Collect a list of classes that need to have factory types emitted for them.
+    const symbolNames = original
+                            .statements
+                            // Pick out top level class declarations...
+                            .filter(ts.isClassDeclaration)
+                            // which are named, exported, and have decorators.
+                            .filter(
+                                decl => isExported(decl) && decl.decorators !== undefined &&
+                                    decl.name !== undefined)
+                            // Grab the symbol name.
+                            .map(decl => decl.name !.text);
+
+    // For each symbol name, generate a constant export of the corresponding NgFactory.
+    // This will encompass a lot of symbols which don't need factories, but that's okay
+    // because it won't miss any that do.
+    const varLines = symbolNames.map(
+        name => `export const ${name}NgFactory = new i0.ɵNgModuleFactory(${name});`);
+    const sourceText = [
+      // This might be incorrect if the current package being compiled is Angular core, but it's
+      // okay to leave in at type checking time. TypeScript can handle this reference via its path
+      // mapping, but downstream bundlers can't. If the current package is core itself, this will be
+      // replaced in the factory transformer before emit.
+      `import * as i0 from '@angular/core';`,
+      `import {${symbolNames.join(', ')}} from '${relativePathToSource}';`,
+      ...varLines,
+    ].join('\n');
+    return ts.createSourceFile(
+        genFilePath, sourceText, original.languageVersion, true, ts.ScriptKind.TS);
+  }
+
+  computeFactoryFileMap(files: ReadonlyArray<string>): Map<string, string> {
+    const map = new Map<string, string>();
+    files.filter(sourceFile => !sourceFile.endsWith('.d.ts'))
+        .forEach(sourceFile => map.set(sourceFile.replace(/\.ts$/, '.ngfactory.ts'), sourceFile));
+    return map;
+  }
+}
+
+function isExported(decl: ts.Declaration): boolean {
+  return decl.modifiers !== undefined &&
+      decl.modifiers.some(mod => mod.kind == ts.SyntaxKind.ExportKeyword);
+}
diff --git a/packages/compiler-cli/src/ngtsc/factories/src/host.ts b/packages/compiler-cli/src/ngtsc/factories/src/host.ts
new file mode 100644
index 000000000000..4e5b1e9b33da
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/factories/src/host.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 path from 'path';
+import * as ts from 'typescript';
+
+import {FactoryGenerator} from './generator';
+
+/**
+ * A wrapper around a `ts.CompilerHost` which supports generated files.
+ */
+export class GeneratedFactoryHostWrapper implements ts.CompilerHost {
+  constructor(
+      private delegate: ts.CompilerHost, private generator: FactoryGenerator,
+      private factoryToSourceMap: Map<string, string>) {}
+
+  getSourceFile(
+      fileName: string, languageVersion: ts.ScriptTarget,
+      onError?: ((message: string) => void)|undefined,
+      shouldCreateNewSourceFile?: boolean|undefined): ts.SourceFile|undefined {
+    const canonical = this.getCanonicalFileName(fileName);
+    if (this.factoryToSourceMap.has(canonical)) {
+      const sourceFileName = this.getCanonicalFileName(this.factoryToSourceMap.get(canonical) !);
+      const sourceFile = this.delegate.getSourceFile(
+          sourceFileName, languageVersion, onError, shouldCreateNewSourceFile);
+      if (sourceFile === undefined) {
+        return undefined;
+      }
+      return this.generator.factoryFor(sourceFile, fileName);
+    }
+    return this.delegate.getSourceFile(
+        fileName, languageVersion, onError, shouldCreateNewSourceFile);
+  }
+
+  getDefaultLibFileName(options: ts.CompilerOptions): string {
+    return this.delegate.getDefaultLibFileName(options);
+  }
+
+  writeFile(
+      fileName: string, data: string, writeByteOrderMark: boolean,
+      onError: ((message: string) => void)|undefined,
+      sourceFiles: ReadonlyArray<ts.SourceFile>): void {
+    return this.delegate.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
+  }
+
+  getCurrentDirectory(): string { return this.delegate.getCurrentDirectory(); }
+
+  getDirectories(path: string): string[] { return this.delegate.getDirectories(path); }
+
+  getCanonicalFileName(fileName: string): string {
+    return this.delegate.getCanonicalFileName(fileName);
+  }
+
+  useCaseSensitiveFileNames(): boolean { return this.delegate.useCaseSensitiveFileNames(); }
+
+  getNewLine(): string { return this.delegate.getNewLine(); }
+
+  fileExists(fileName: string): boolean {
+    return this.factoryToSourceMap.has(fileName) || this.delegate.fileExists(fileName);
+  }
+
+  readFile(fileName: string): string|undefined { return this.delegate.readFile(fileName); }
+}
diff --git a/packages/compiler-cli/src/ngtsc/factories/src/transform.ts b/packages/compiler-cli/src/ngtsc/factories/src/transform.ts
new file mode 100644
index 000000000000..acd0d9b7473a
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/factories/src/transform.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 * as ts from 'typescript';
+
+import {relativePathBetween} from '../../util/src/path';
+
+const STRIP_NG_FACTORY = /(.*)NgFactory$/;
+
+export interface FactoryInfo {
+  sourceFilePath: string;
+  moduleSymbolNames: Set<string>;
+}
+
+export function generatedFactoryTransform(
+    factoryMap: Map<string, FactoryInfo>,
+    coreImportsFrom: ts.SourceFile | null): ts.TransformerFactory<ts.SourceFile> {
+  return (context: ts.TransformationContext): ts.Transformer<ts.SourceFile> => {
+    return (file: ts.SourceFile): ts.SourceFile => {
+      return transformFactorySourceFile(factoryMap, context, coreImportsFrom, file);
+    };
+  };
+}
+
+function transformFactorySourceFile(
+    factoryMap: Map<string, FactoryInfo>, context: ts.TransformationContext,
+    coreImportsFrom: ts.SourceFile | null, file: ts.SourceFile): ts.SourceFile {
+  // If this is not a generated file, it won't have factory info associated with it.
+  if (!factoryMap.has(file.fileName)) {
+    // Don't transform non-generated code.
+    return file;
+  }
+
+  const {moduleSymbolNames, sourceFilePath} = factoryMap.get(file.fileName) !;
+
+  const clone = ts.getMutableClone(file);
+
+  const transformedStatements = file.statements.map(stmt => {
+    if (coreImportsFrom !== null && ts.isImportDeclaration(stmt) &&
+        ts.isStringLiteral(stmt.moduleSpecifier) && stmt.moduleSpecifier.text === '@angular/core') {
+      const path = relativePathBetween(sourceFilePath, coreImportsFrom.fileName);
+      if (path !== null) {
+        return ts.updateImportDeclaration(
+            stmt, stmt.decorators, stmt.modifiers, stmt.importClause, ts.createStringLiteral(path));
+      } else {
+        return ts.createNotEmittedStatement(stmt);
+      }
+    } else if (ts.isVariableStatement(stmt) && stmt.declarationList.declarations.length === 1) {
+      const decl = stmt.declarationList.declarations[0];
+      if (ts.isIdentifier(decl.name)) {
+        const match = STRIP_NG_FACTORY.exec(decl.name.text);
+        if (match === null || !moduleSymbolNames.has(match[1])) {
+          // Remove the given factory as it wasn't actually for an NgModule.
+          return ts.createNotEmittedStatement(stmt);
+        }
+      }
+      return stmt;
+    } else {
+      return stmt;
+    }
+  });
+  if (!transformedStatements.some(ts.isVariableStatement)) {
+    // If the resulting file has no factories, include an empty export to
+    // satisfy closure compiler.
+    transformedStatements.push(ts.createVariableStatement(
+        [ts.createModifier(ts.SyntaxKind.ExportKeyword)],
+        ts.createVariableDeclarationList(
+            [ts.createVariableDeclaration('ɵNonEmptyModule', undefined, ts.createTrue())],
+            ts.NodeFlags.Const)));
+  }
+  clone.statements = ts.createNodeArray(transformedStatements);
+  return clone;
+}
diff --git a/packages/compiler-cli/src/ngtsc/host/BUILD.bazel b/packages/compiler-cli/src/ngtsc/host/BUILD.bazel
new file mode 100644
index 000000000000..ee3883cb0858
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/host/BUILD.bazel
@@ -0,0 +1,12 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "host",
+    srcs = glob([
+        "index.ts",
+        "src/**/*.ts",
+    ]),
+    module_name = "@angular/compiler-cli/src/ngtsc/host",
+)
diff --git a/packages/compiler-cli/src/ngtsc/host/index.ts b/packages/compiler-cli/src/ngtsc/host/index.ts
new file mode 100644
index 000000000000..93a06d7a93fa
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/host/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 './src/reflection';
diff --git a/packages/compiler-cli/src/ngtsc/host/src/reflection.ts b/packages/compiler-cli/src/ngtsc/host/src/reflection.ts
new file mode 100644
index 000000000000..16b3867fb00c
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/host/src/reflection.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 * as ts from 'typescript';
+
+/**
+ * Metadata extracted from an instance of a decorator on another declaration.
+ */
+export interface Decorator {
+  /**
+   * Name by which the decorator was invoked in the user's code.
+   *
+   * This is distinct from the name by which the decorator was imported (though in practice they
+   * will usually be the same).
+   */
+  name: string;
+
+  /**
+   * `Import` by which the decorator was brought into the module in which it was invoked, or `null`
+   * if the decorator was declared in the same module and not imported.
+   */
+  import : Import | null;
+
+  /**
+   * TypeScript reference to the decorator itself.
+   */
+  node: ts.Node;
+
+  /**
+   * Arguments of the invocation of the decorator, if the decorator is invoked, or `null` otherwise.
+   */
+  args: ts.Expression[]|null;
+}
+
+/**
+ * An enumeration of possible kinds of class members.
+ */
+export enum ClassMemberKind {
+  Constructor,
+  Getter,
+  Setter,
+  Property,
+  Method,
+}
+
+/**
+ * A member of a class, such as a property, method, or constructor.
+ */
+export interface ClassMember {
+  /**
+   * TypeScript reference to the class member itself, or null if it is not applicable.
+   */
+  node: ts.Node|null;
+
+  /**
+   * Indication of which type of member this is (property, method, etc).
+   */
+  kind: ClassMemberKind;
+
+  /**
+   * TypeScript `ts.TypeNode` representing the type of the member, or `null` if not present or
+   * applicable.
+   */
+  type: ts.TypeNode|null;
+
+  /**
+   * Name of the class member.
+   */
+  name: string;
+
+  /**
+   * TypeScript `ts.Identifier` representing the name of the member, or `null` if no such node
+   * is present.
+   *
+   * The `nameNode` is useful in writing references to this member that will be correctly source-
+   * mapped back to the original file.
+   */
+  nameNode: ts.Identifier|null;
+
+  /**
+   * TypeScript `ts.Expression` which represents the value of the member.
+   *
+   * If the member is a property, this will be the property initializer if there is one, or null
+   * otherwise.
+   */
+  value: ts.Expression|null;
+
+  /**
+   * TypeScript `ts.Declaration` which represents the implementation of the member.
+   *
+   * In TypeScript code this is identical to the node, but in downleveled code this should always be
+   * the Declaration which actually represents the member's runtime value.
+   *
+   * For example, the TS code:
+   *
+   * ```
+   * class Clazz {
+   *   static get property(): string {
+   *     return 'value';
+   *   }
+   * }
+   * ```
+   *
+   * Downlevels to:
+   *
+   * ```
+   * var Clazz = (function () {
+   *   function Clazz() {
+   *   }
+   *   Object.defineProperty(Clazz, "property", {
+   *       get: function () {
+   *           return 'value';
+   *       },
+   *       enumerable: true,
+   *       configurable: true
+   *   });
+   *   return Clazz;
+   * }());
+   * ```
+   *
+   * In this example, for the property "property", the node would be the entire
+   * Object.defineProperty ExpressionStatement, but the implementation would be this
+   * FunctionDeclaration:
+   *
+   * ```
+   * function () {
+   *   return 'value';
+   * },
+   * ```
+   */
+  implementation: ts.Declaration|null;
+
+  /**
+   * Whether the member is static or not.
+   */
+  isStatic: boolean;
+
+  /**
+   * Any `Decorator`s which are present on the member, or `null` if none are present.
+   */
+  decorators: Decorator[]|null;
+}
+
+/**
+ * A parameter to a function or constructor.
+ */
+export interface Parameter {
+  /**
+   * Name of the parameter, if available.
+   *
+   * Some parameters don't have a simple string name (for example, parameters which are destructured
+   * into multiple variables). In these cases, `name` can be `null`.
+   */
+  name: string|null;
+
+  /**
+   * TypeScript `ts.BindingName` representing the name of the parameter.
+   *
+   * The `nameNode` is useful in writing references to this member that will be correctly source-
+   * mapped back to the original file.
+   */
+  nameNode: ts.BindingName;
+
+  /**
+   * TypeScript `ts.Expression` representing the type of the parameter, if the type is a simple
+   * expression type.
+   *
+   * If the type is not present or cannot be represented as an expression, `type` is `null`.
+   */
+  type: ts.Expression|null;
+
+  /**
+   * Any `Decorator`s which are present on the parameter, or `null` if none are present.
+   */
+  decorators: Decorator[]|null;
+}
+
+/**
+ * The source of an imported symbol, including the original symbol name and the module from which it
+ * was imported.
+ */
+export interface Import {
+  /**
+   * The name of the imported symbol under which it was exported (not imported).
+   */
+  name: string;
+
+  /**
+   * The module from which the symbol was imported.
+   *
+   * This could either be an absolute module name (@angular/core for example) or a relative path.
+   */
+  from: string;
+}
+
+/**
+ * The declaration of a symbol, along with information about how it was imported into the
+ * application.
+ */
+export interface Declaration {
+  /**
+   * TypeScript reference to the declaration itself.
+   */
+  node: ts.Declaration;
+
+  /**
+   * The absolute module path from which the symbol was imported into the application, if the symbol
+   * was imported via an absolute module (even through a chain of re-exports). If the symbol is part
+   * of the application and was not imported from an absolute path, this will be `null`.
+   */
+  viaModule: string|null;
+}
+
+/**
+ * Abstracts reflection operations on a TypeScript AST.
+ *
+ * Depending on the format of the code being interpreted, different concepts are represented with
+ * different syntactical structures. The `ReflectionHost` abstracts over those differences and
+ * presents a single API by which the compiler can query specific information about the AST.
+ *
+ * All operations on the `ReflectionHost` require the use of TypeScript `ts.Node`s with binding
+ * information already available (that is, nodes that come from a `ts.Program` that has been
+ * type-checked, and are not synthetically created).
+ */
+export interface ReflectionHost {
+  /**
+   * Examine a declaration (for example, of a class or function) and return metadata about any
+   * decorators present on the declaration.
+   *
+   * @param declaration a TypeScript `ts.Declaration` node representing the class or function over
+   * which to reflect. For example, if the intent is to reflect the decorators of a class and the
+   * source is in ES6 format, this will be a `ts.ClassDeclaration` node. If the source is in ES5
+   * format, this might be a `ts.VariableDeclaration` as classes in ES5 are represented as the
+   * result of an IIFE execution.
+   *
+   * @returns an array of `Decorator` metadata if decorators are present on the declaration, or
+   * `null` if either no decorators were present or if the declaration is not of a decorable type.
+   */
+  getDecoratorsOfDeclaration(declaration: ts.Declaration): Decorator[]|null;
+
+  /**
+   * Examine a declaration which should be of a class, and return metadata about the members of the
+   * class.
+   *
+   * @param declaration a TypeScript `ts.Declaration` node representing the class over which to
+   * reflect. If the source is in ES6 format, this will be a `ts.ClassDeclaration` node. If the
+   * source is in ES5 format, this might be a `ts.VariableDeclaration` as classes in ES5 are
+   * represented as the result of an IIFE execution.
+   *
+   * @returns an array of `ClassMember` metadata representing the members of the class.
+   *
+   * @throws if `declaration` does not resolve to a class declaration.
+   */
+  getMembersOfClass(clazz: ts.Declaration): ClassMember[];
+
+  /**
+   * Reflect over the constructor of a class and return metadata about its parameters.
+   *
+   * This method only looks at the constructor of a class directly and not at any inherited
+   * constructors.
+   *
+   * @param declaration a TypeScript `ts.Declaration` node representing the class over which to
+   * reflect. If the source is in ES6 format, this will be a `ts.ClassDeclaration` node. If the
+   * source is in ES5 format, this might be a `ts.VariableDeclaration` as classes in ES5 are
+   * represented as the result of an IIFE execution.
+   *
+   * @returns an array of `Parameter` metadata representing the parameters of the constructor, if
+   * a constructor exists. If the constructor exists and has 0 parameters, this array will be empty.
+   * If the class has no constructor, this method returns `null`.
+   */
+  getConstructorParameters(declaration: ts.Declaration): Parameter[]|null;
+
+  /**
+   * Determine if an identifier was imported from another module and return `Import` metadata
+   * describing its origin.
+   *
+   * @param id a TypeScript `ts.Identifer` to reflect.
+   *
+   * @returns metadata about the `Import` if the identifier was imported from another module, or
+   * `null` if the identifier doesn't resolve to an import but instead is locally defined.
+   */
+  getImportOfIdentifier(id: ts.Identifier): Import|null;
+
+  /**
+   * Trace an identifier to its declaration, if possible.
+   *
+   * This method attempts to resolve the declaration of the given identifier, tracing back through
+   * imports and re-exports until the original declaration statement is found. A `Declaration`
+   * object is returned if the original declaration is found, or `null` is returned otherwise.
+   *
+   * If the declaration is in a different module, and that module is imported via an absolute path,
+   * this method also returns the absolute path of the imported module. For example, if the code is:
+   *
+   * ```
+   * import {RouterModule} from '@angular/core';
+   *
+   * export const ROUTES = RouterModule.forRoot([...]);
+   * ```
+   *
+   * and if `getDeclarationOfIdentifier` is called on `RouterModule` in the `ROUTES` expression,
+   * then it would trace `RouterModule` via its import from `@angular/core`, and note that the
+   * definition was imported from `@angular/core` into the application where it was referenced.
+   *
+   * If the definition is re-exported several times from different absolute module names, only
+   * the first one (the one by which the application refers to the module) is returned.
+   *
+   * This module name is returned in the `viaModule` field of the `Declaration`. If The declaration
+   * is relative to the application itself and there was no import through an absolute path, then
+   * `viaModule` is `null`.
+   *
+   * @param id a TypeScript `ts.Identifier` to trace back to a declaration.
+   *
+   * @returns metadata about the `Declaration` if the original declaration is found, or `null`
+   * otherwise.
+   */
+  getDeclarationOfIdentifier(id: ts.Identifier): Declaration|null;
+
+  /**
+   * Collect the declarations exported from a module by name.
+   *
+   * Iterates over the exports of a module (including re-exports) and returns a map of export
+   * name to its `Declaration`. If an exported value is itself re-exported from another module,
+   * the `Declaration`'s `viaModule` will reflect that.
+   *
+   * @param node a TypeScript `ts.Node` representing the module (for example a `ts.SourceFile`) for
+   * which to collect exports.
+   *
+   * @returns a map of `Declaration`s for the module's exports, by name.
+   */
+  getExportsOfModule(module: ts.Node): Map<string, Declaration>|null;
+
+  /**
+   * Check whether the given declaration node actually represents a class.
+   */
+  isClass(node: ts.Declaration): boolean;
+
+  hasBaseClass(node: ts.Declaration): boolean;
+}
diff --git a/packages/compiler-cli/src/ngtsc/metadata/BUILD.bazel b/packages/compiler-cli/src/ngtsc/metadata/BUILD.bazel
new file mode 100644
index 000000000000..d782bc38786f
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/metadata/BUILD.bazel
@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "metadata",
+    srcs = glob([
+        "index.ts",
+        "src/*.ts",
+    ]),
+    module_name = "@angular/compiler-cli/src/ngtsc/metadata",
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli/src/ngtsc/host",
+        "//packages/compiler-cli/src/ngtsc/util",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngtsc/metadata/index.ts b/packages/compiler-cli/src/ngtsc/metadata/index.ts
new file mode 100644
index 000000000000..b15062c49d4c
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/metadata/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @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 {TypeScriptReflectionHost, filterToMembersWithDecorator, findMember, reflectObjectLiteral, reflectTypeEntityToDeclaration} from './src/reflector';
+export {AbsoluteReference, ImportMode, Reference, ResolvedReference, ResolvedValue, isDynamicValue, staticallyResolve} from './src/resolver';
diff --git a/packages/compiler-cli/src/ngtsc/metadata/src/reflector.ts b/packages/compiler-cli/src/ngtsc/metadata/src/reflector.ts
new file mode 100644
index 000000000000..2332fe94c1e7
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/metadata/src/reflector.ts
@@ -0,0 +1,419 @@
+/**
+ * @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 ts from 'typescript';
+
+import {ClassMember, ClassMemberKind, Declaration, Decorator, Import, Parameter, ReflectionHost} from '../../host';
+
+/**
+ * reflector.ts implements static reflection of declarations using the TypeScript `ts.TypeChecker`.
+ */
+
+export class TypeScriptReflectionHost implements ReflectionHost {
+  constructor(protected checker: ts.TypeChecker) {}
+
+  getDecoratorsOfDeclaration(declaration: ts.Declaration): Decorator[]|null {
+    if (declaration.decorators === undefined || declaration.decorators.length === 0) {
+      return null;
+    }
+    return declaration.decorators.map(decorator => this._reflectDecorator(decorator))
+        .filter((dec): dec is Decorator => dec !== null);
+  }
+
+  getMembersOfClass(declaration: ts.Declaration): ClassMember[] {
+    const clazz = castDeclarationToClassOrDie(declaration);
+    return clazz.members.map(member => this._reflectMember(member))
+        .filter((member): member is ClassMember => member !== null);
+  }
+
+  getConstructorParameters(declaration: ts.Declaration): Parameter[]|null {
+    const clazz = castDeclarationToClassOrDie(declaration);
+
+    // First, find the constructor.
+    const ctor = clazz.members.find(ts.isConstructorDeclaration);
+    if (ctor === undefined) {
+      return null;
+    }
+
+    return ctor.parameters.map(node => {
+      // The name of the parameter is easy.
+      const name = parameterName(node.name);
+
+      const decorators = this.getDecoratorsOfDeclaration(node);
+
+      // It may or may not be possible to write an expression that refers to the value side of the
+      // type named for the parameter.
+      let typeValueExpr: ts.Expression|null = null;
+
+      // It's not possible to get a value expression if the parameter doesn't even have a type.
+      if (node.type !== undefined) {
+        // It's only valid to convert a type reference to a value reference if the type actually has
+        // a
+        // value declaration associated with it.
+        const type = this.checker.getTypeFromTypeNode(node.type);
+        if (type.symbol !== undefined && type.symbol.valueDeclaration !== undefined) {
+          // The type points to a valid value declaration. Rewrite the TypeReference into an
+          // Expression
+          // which references the value pointed to by the TypeReference, if possible.
+          typeValueExpr = typeNodeToValueExpr(node.type);
+        }
+      }
+
+      return {
+        name,
+        nameNode: node.name,
+        type: typeValueExpr, decorators,
+      };
+    });
+  }
+
+  getImportOfIdentifier(id: ts.Identifier): Import|null {
+    const symbol = this.checker.getSymbolAtLocation(id);
+
+    if (symbol === undefined || symbol.declarations === undefined ||
+        symbol.declarations.length !== 1) {
+      return null;
+    }
+
+    // Ignore decorators that are defined locally (not imported).
+    const decl: ts.Declaration = symbol.declarations[0];
+    if (!ts.isImportSpecifier(decl)) {
+      return null;
+    }
+
+    // Walk back from the specifier to find the declaration, which carries the module specifier.
+    const importDecl = decl.parent !.parent !.parent !;
+
+    // The module specifier is guaranteed to be a string literal, so this should always pass.
+    if (!ts.isStringLiteral(importDecl.moduleSpecifier)) {
+      // Not allowed to happen in TypeScript ASTs.
+      return null;
+    }
+
+    // Read the module specifier.
+    const from = importDecl.moduleSpecifier.text;
+
+    // Compute the name by which the decorator was exported, not imported.
+    const name = (decl.propertyName !== undefined ? decl.propertyName : decl.name).text;
+
+    return {from, name};
+  }
+
+  getExportsOfModule(node: ts.Node): Map<string, Declaration>|null {
+    // In TypeScript code, modules are only ts.SourceFiles. Throw if the node isn't a module.
+    if (!ts.isSourceFile(node)) {
+      throw new Error(`getDeclarationsOfModule() called on non-SourceFile in TS code`);
+    }
+    const map = new Map<string, Declaration>();
+
+    // Reflect the module to a Symbol, and use getExportsOfModule() to get a list of exported
+    // Symbols.
+    const symbol = this.checker.getSymbolAtLocation(node);
+    if (symbol === undefined) {
+      return null;
+    }
+    this.checker.getExportsOfModule(symbol).forEach(exportSymbol => {
+      // Map each exported Symbol to a Declaration and add it to the map.
+      const decl = this.getDeclarationOfSymbol(exportSymbol);
+      if (decl !== null) {
+        map.set(exportSymbol.name, decl);
+      }
+    });
+    return map;
+  }
+
+  isClass(node: ts.Declaration): boolean {
+    // In TypeScript code, classes are ts.ClassDeclarations.
+    return ts.isClassDeclaration(node);
+  }
+
+  hasBaseClass(node: ts.Declaration): boolean {
+    return ts.isClassDeclaration(node) && node.heritageClauses !== undefined &&
+        node.heritageClauses.some(clause => clause.token === ts.SyntaxKind.ExtendsKeyword);
+  }
+
+  getDeclarationOfIdentifier(id: ts.Identifier): Declaration|null {
+    // Resolve the identifier to a Symbol, and return the declaration of that.
+    let symbol: ts.Symbol|undefined = this.checker.getSymbolAtLocation(id);
+    if (symbol === undefined) {
+      return null;
+    }
+    return this.getDeclarationOfSymbol(symbol);
+  }
+
+  /**
+   * Resolve a `ts.Symbol` to its declaration, keeping track of the `viaModule` along the way.
+   *
+   * @internal
+   */
+  protected getDeclarationOfSymbol(symbol: ts.Symbol): Declaration|null {
+    let viaModule: string|null = null;
+    // Look through the Symbol's immediate declarations, and see if any of them are import-type
+    // statements.
+    if (symbol.declarations !== undefined && symbol.declarations.length > 0) {
+      for (let i = 0; i < symbol.declarations.length; i++) {
+        const decl = symbol.declarations[i];
+        if (ts.isImportSpecifier(decl) && decl.parent !== undefined &&
+            decl.parent.parent !== undefined && decl.parent.parent.parent !== undefined) {
+          // Find the ImportDeclaration that imported this Symbol.
+          const importDecl = decl.parent.parent.parent;
+          // The moduleSpecifier should always be a string.
+          if (ts.isStringLiteral(importDecl.moduleSpecifier)) {
+            // Check if the moduleSpecifier is absolute. If it is, this symbol comes from an
+            // external module, and the import path becomes the viaModule.
+            const moduleSpecifier = importDecl.moduleSpecifier.text;
+            if (!moduleSpecifier.startsWith('.')) {
+              viaModule = moduleSpecifier;
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    // Now, resolve the Symbol to its declaration by following any and all aliases.
+    while (symbol.flags & ts.SymbolFlags.Alias) {
+      symbol = this.checker.getAliasedSymbol(symbol);
+    }
+
+    // Look at the resolved Symbol's declarations and pick one of them to return. Value declarations
+    // are given precedence over type declarations.
+    if (symbol.valueDeclaration !== undefined) {
+      return {
+        node: symbol.valueDeclaration,
+        viaModule,
+      };
+    } else if (symbol.declarations !== undefined && symbol.declarations.length > 0) {
+      return {
+        node: symbol.declarations[0],
+        viaModule,
+      };
+    } else {
+      return null;
+    }
+  }
+
+  private _reflectDecorator(node: ts.Decorator): Decorator|null {
+    // Attempt to resolve the decorator expression into a reference to a concrete Identifier. The
+    // expression may contain a call to a function which returns the decorator function, in which
+    // case we want to return the arguments.
+    let decoratorExpr: ts.Expression = node.expression;
+    let args: ts.Expression[]|null = null;
+
+    // Check for call expressions.
+    if (ts.isCallExpression(decoratorExpr)) {
+      args = Array.from(decoratorExpr.arguments);
+      decoratorExpr = decoratorExpr.expression;
+    }
+
+    // The final resolved decorator should be a `ts.Identifier` - if it's not, then something is
+    // wrong and the decorator can't be resolved statically.
+    if (!ts.isIdentifier(decoratorExpr)) {
+      return null;
+    }
+
+    const importDecl = this.getImportOfIdentifier(decoratorExpr);
+
+    return {
+      name: decoratorExpr.text,
+      import: importDecl, node, args,
+    };
+  }
+
+  private _reflectMember(node: ts.ClassElement): ClassMember|null {
+    let kind: ClassMemberKind|null = null;
+    let value: ts.Expression|null = null;
+    let name: string|null = null;
+    let nameNode: ts.Identifier|null = null;
+
+    if (ts.isPropertyDeclaration(node)) {
+      kind = ClassMemberKind.Property;
+      value = node.initializer || null;
+    } else if (ts.isGetAccessorDeclaration(node)) {
+      kind = ClassMemberKind.Getter;
+    } else if (ts.isSetAccessorDeclaration(node)) {
+      kind = ClassMemberKind.Setter;
+    } else if (ts.isMethodDeclaration(node)) {
+      kind = ClassMemberKind.Method;
+    } else if (ts.isConstructorDeclaration(node)) {
+      kind = ClassMemberKind.Constructor;
+    } else {
+      return null;
+    }
+
+    if (ts.isConstructorDeclaration(node)) {
+      name = 'constructor';
+    } else if (ts.isIdentifier(node.name)) {
+      name = node.name.text;
+      nameNode = node.name;
+    } else {
+      return null;
+    }
+
+    const decorators = this.getDecoratorsOfDeclaration(node);
+    const isStatic = node.modifiers !== undefined &&
+        node.modifiers.some(mod => mod.kind === ts.SyntaxKind.StaticKeyword);
+
+    return {
+      node,
+      implementation: node, kind,
+      type: node.type || null, name, nameNode, decorators, value, isStatic,
+    };
+  }
+}
+
+export function reflectNameOfDeclaration(decl: ts.Declaration): string|null {
+  const id = reflectIdentifierOfDeclaration(decl);
+  return id && id.text || null;
+}
+
+export function reflectIdentifierOfDeclaration(decl: ts.Declaration): ts.Identifier|null {
+  if (ts.isClassDeclaration(decl) || ts.isFunctionDeclaration(decl)) {
+    return decl.name || null;
+  } else if (ts.isVariableDeclaration(decl)) {
+    if (ts.isIdentifier(decl.name)) {
+      return decl.name;
+    }
+  }
+  return null;
+}
+
+export function reflectTypeEntityToDeclaration(
+    type: ts.EntityName, checker: ts.TypeChecker): {node: ts.Declaration, from: string | null} {
+  let realSymbol = checker.getSymbolAtLocation(type);
+  if (realSymbol === undefined) {
+    throw new Error(`Cannot resolve type entity to symbol`);
+  }
+  while (realSymbol.flags & ts.SymbolFlags.Alias) {
+    realSymbol = checker.getAliasedSymbol(realSymbol);
+  }
+
+  let node: ts.Declaration|null = null;
+  if (realSymbol.valueDeclaration !== undefined) {
+    node = realSymbol.valueDeclaration;
+  } else if (realSymbol.declarations !== undefined && realSymbol.declarations.length === 1) {
+    node = realSymbol.declarations[0];
+  } else {
+    throw new Error(`Cannot resolve type entity symbol to declaration`);
+  }
+
+  if (ts.isQualifiedName(type)) {
+    if (!ts.isIdentifier(type.left)) {
+      throw new Error(`Cannot handle qualified name with non-identifier lhs`);
+    }
+    const symbol = checker.getSymbolAtLocation(type.left);
+    if (symbol === undefined || symbol.declarations === undefined ||
+        symbol.declarations.length !== 1) {
+      throw new Error(`Cannot resolve qualified type entity lhs to symbol`);
+    }
+    const decl = symbol.declarations[0];
+    if (ts.isNamespaceImport(decl)) {
+      const clause = decl.parent !;
+      const importDecl = clause.parent !;
+      if (!ts.isStringLiteral(importDecl.moduleSpecifier)) {
+        throw new Error(`Module specifier is not a string`);
+      }
+      return {node, from: importDecl.moduleSpecifier.text};
+    } else {
+      throw new Error(`Unknown import type?`);
+    }
+  } else {
+    return {node, from: null};
+  }
+}
+
+export function filterToMembersWithDecorator(members: ClassMember[], name: string, module?: string):
+    {member: ClassMember, decorators: Decorator[]}[] {
+  return members.filter(member => !member.isStatic)
+      .map(member => {
+        if (member.decorators === null) {
+          return null;
+        }
+
+        const decorators = member.decorators.filter(dec => {
+          if (dec.import !== null) {
+            return dec.import.name === name && (module === undefined || dec.import.from === module);
+          } else {
+            return dec.name === name && module === undefined;
+          }
+        });
+
+        if (decorators.length === 0) {
+          return null;
+        }
+
+        return {member, decorators};
+      })
+      .filter((value): value is {member: ClassMember, decorators: Decorator[]} => value !== null);
+}
+
+export function findMember(
+    members: ClassMember[], name: string, isStatic: boolean = false): ClassMember|null {
+  return members.find(member => member.isStatic === isStatic && member.name === name) || null;
+}
+
+export function reflectObjectLiteral(node: ts.ObjectLiteralExpression): Map<string, ts.Expression> {
+  const map = new Map<string, ts.Expression>();
+  node.properties.forEach(prop => {
+    if (ts.isPropertyAssignment(prop)) {
+      const name = propertyNameToString(prop.name);
+      if (name === null) {
+        return;
+      }
+      map.set(name, prop.initializer);
+    } else if (ts.isShorthandPropertyAssignment(prop)) {
+      map.set(prop.name.text, prop.name);
+    } else {
+      return;
+    }
+  });
+  return map;
+}
+
+function castDeclarationToClassOrDie(declaration: ts.Declaration): ts.ClassDeclaration {
+  if (!ts.isClassDeclaration(declaration)) {
+    throw new Error(
+        `Reflecting on a ${ts.SyntaxKind[declaration.kind]} instead of a ClassDeclaration.`);
+  }
+  return declaration;
+}
+
+function parameterName(name: ts.BindingName): string|null {
+  if (ts.isIdentifier(name)) {
+    return name.text;
+  } else {
+    return null;
+  }
+}
+
+function typeNodeToValueExpr(node: ts.TypeNode): ts.Expression|null {
+  if (ts.isTypeReferenceNode(node)) {
+    return entityNameToValue(node.typeName);
+  } else {
+    return null;
+  }
+}
+
+function entityNameToValue(node: ts.EntityName): ts.Expression|null {
+  if (ts.isQualifiedName(node)) {
+    const left = entityNameToValue(node.left);
+    return left !== null ? ts.createPropertyAccess(left, node.right) : null;
+  } else if (ts.isIdentifier(node)) {
+    return ts.getMutableClone(node);
+  } else {
+    return null;
+  }
+}
+
+function propertyNameToString(node: ts.PropertyName): string|null {
+  if (ts.isIdentifier(node) || ts.isStringLiteral(node) || ts.isNumericLiteral(node)) {
+    return node.text;
+  } else {
+    return null;
+  }
+}
diff --git a/packages/compiler-cli/src/ngtsc/metadata/src/resolver.ts b/packages/compiler-cli/src/ngtsc/metadata/src/resolver.ts
new file mode 100644
index 000000000000..acc8ff3f17ff
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/metadata/src/resolver.ts
@@ -0,0 +1,704 @@
+/**
+ * @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
+ */
+
+/**
+ * resolver.ts implements partial computation of expressions, resolving expressions to static
+ * values where possible and returning a `DynamicValue` signal when not.
+ */
+
+import {Expression, ExternalExpr, ExternalReference, WrappedNodeExpr} from '@angular/compiler';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {ClassMemberKind, ReflectionHost} from '../../host';
+
+const TS_DTS_EXTENSION = /(\.d)?\.ts$/;
+
+/**
+ * Represents a value which cannot be determined statically.
+ *
+ * Use `isDynamicValue` to determine whether a `ResolvedValue` is a `DynamicValue`.
+ */
+export class DynamicValue {
+  /**
+   * This is needed so the "is DynamicValue" assertion of `isDynamicValue` actually has meaning.
+   *
+   * Otherwise, "is DynamicValue" is akin to "is {}" which doesn't trigger narrowing.
+   */
+  private _isDynamic = true;
+}
+
+/**
+ * An internal flyweight for `DynamicValue`. Eventually the dynamic value will carry information
+ * on the location of the node that could not be statically computed.
+ */
+const DYNAMIC_VALUE: DynamicValue = new DynamicValue();
+
+/**
+ * Used to test whether a `ResolvedValue` is a `DynamicValue`.
+ */
+export function isDynamicValue(value: any): value is DynamicValue {
+  return value === DYNAMIC_VALUE;
+}
+
+/**
+ * A value resulting from static resolution.
+ *
+ * This could be a primitive, collection type, reference to a `ts.Node` that declares a
+ * non-primitive value, or a special `DynamicValue` type which indicates the value was not
+ * available statically.
+ */
+export type ResolvedValue = number | boolean | string | null | undefined | Reference |
+    ResolvedValueArray | ResolvedValueMap | DynamicValue;
+
+/**
+ * An array of `ResolvedValue`s.
+ *
+ * This is a reified type to allow the circular reference of `ResolvedValue` -> `ResolvedValueArray`
+ * ->
+ * `ResolvedValue`.
+ */
+export interface ResolvedValueArray extends Array<ResolvedValue> {}
+
+/**
+ * A map of strings to `ResolvedValue`s.
+ *
+ * This is a reified type to allow the circular reference of `ResolvedValue` -> `ResolvedValueMap` ->
+ * `ResolvedValue`.
+ */ export interface ResolvedValueMap extends Map<string, ResolvedValue> {}
+
+/**
+ * Tracks the scope of a function body, which includes `ResolvedValue`s for the parameters of that
+ * body.
+ */
+type Scope = Map<ts.ParameterDeclaration, ResolvedValue>;
+
+export enum ImportMode {
+  UseExistingImport,
+  ForceNewImport,
+}
+
+/**
+ * A reference to a `ts.Node`.
+ *
+ * For example, if an expression evaluates to a function or class definition, it will be returned
+ * as a `Reference` (assuming references are allowed in evaluation).
+ */
+export abstract class Reference<T extends ts.Node = ts.Node> {
+  constructor(readonly node: T) {}
+
+  /**
+   * Whether an `Expression` can be generated which references the node.
+   */
+  // TODO(issue/24571): remove '!'.
+  readonly expressable !: boolean;
+
+  /**
+   * Generate an `Expression` representing this type, in the context of the given SourceFile.
+   *
+   * This could be a local variable reference, if the symbol is imported, or it could be a new
+   * import if needed.
+   */
+  abstract toExpression(context: ts.SourceFile, importMode?: ImportMode): Expression|null;
+
+  abstract addIdentifier(identifier: ts.Identifier): void;
+}
+
+/**
+ * A reference to a node only, without any ability to get an `Expression` representing that node.
+ *
+ * This is used for returning references to things like method declarations, which are not directly
+ * referenceable.
+ */
+export class NodeReference<T extends ts.Node = ts.Node> extends Reference<T> {
+  constructor(node: T, readonly moduleName: string|null) { super(node); }
+
+  toExpression(context: ts.SourceFile): null { return null; }
+
+  addIdentifier(identifier: ts.Identifier): void {}
+}
+
+/**
+ * A reference to a node which has a `ts.Identifier` and can be resolved to an `Expression`.
+ *
+ * Imports generated by `ResolvedReference`s are always relative.
+ */
+export class ResolvedReference<T extends ts.Node = ts.Node> extends Reference<T> {
+  protected identifiers: ts.Identifier[] = [];
+
+  constructor(node: T, protected primaryIdentifier: ts.Identifier) { super(node); }
+
+  readonly expressable = true;
+
+  toExpression(context: ts.SourceFile, importMode: ImportMode = ImportMode.UseExistingImport):
+      Expression {
+    const localIdentifier =
+        pickIdentifier(context, this.primaryIdentifier, this.identifiers, importMode);
+    if (localIdentifier !== null) {
+      return new WrappedNodeExpr(localIdentifier);
+    } else {
+      // Relative import from context -> this.node.getSourceFile().
+      // TODO(alxhub): investigate the impact of multiple source roots here.
+      // TODO(alxhub): investigate the need to map such paths via the Host for proper g3 support.
+      let relative =
+          path.posix.relative(path.dirname(context.fileName), this.node.getSourceFile().fileName)
+              .replace(TS_DTS_EXTENSION, '');
+
+      // path.relative() does not include the leading './'.
+      if (!relative.startsWith('.')) {
+        relative = `./${relative}`;
+      }
+
+      // path.relative() returns the empty string (converted to './' above) if the two paths are the
+      // same.
+      if (relative === './') {
+        // Same file after all.
+        return new WrappedNodeExpr(this.primaryIdentifier);
+      } else {
+        return new ExternalExpr(new ExternalReference(relative, this.primaryIdentifier.text));
+      }
+    }
+  }
+
+  addIdentifier(identifier: ts.Identifier): void { this.identifiers.push(identifier); }
+}
+
+/**
+ * A reference to a node which has a `ts.Identifer` and an expected absolute module name.
+ *
+ * An `AbsoluteReference` can be resolved to an `Expression`, and if that expression is an import
+ * the module specifier will be an absolute module name, not a relative path.
+ */
+export class AbsoluteReference extends Reference {
+  private identifiers: ts.Identifier[] = [];
+  constructor(
+      node: ts.Node, private primaryIdentifier: ts.Identifier, readonly moduleName: string,
+      readonly symbolName: string) {
+    super(node);
+  }
+
+  readonly expressable = true;
+
+  toExpression(context: ts.SourceFile, importMode: ImportMode = ImportMode.UseExistingImport):
+      Expression {
+    const localIdentifier =
+        pickIdentifier(context, this.primaryIdentifier, this.identifiers, importMode);
+    if (localIdentifier !== null) {
+      return new WrappedNodeExpr(localIdentifier);
+    } else {
+      return new ExternalExpr(new ExternalReference(this.moduleName, this.symbolName));
+    }
+  }
+
+  addIdentifier(identifier: ts.Identifier): void { this.identifiers.push(identifier); }
+}
+
+function pickIdentifier(
+    context: ts.SourceFile, primary: ts.Identifier, secondaries: ts.Identifier[],
+    mode: ImportMode): ts.Identifier|null {
+  context = ts.getOriginalNode(context) as ts.SourceFile;
+  let localIdentifier: ts.Identifier|null = null;
+  if (ts.getOriginalNode(primary).getSourceFile() === context) {
+    return primary;
+  } else if (mode === ImportMode.UseExistingImport) {
+    return secondaries.find(id => ts.getOriginalNode(id).getSourceFile() === context) || null;
+  } else {
+    return null;
+  }
+}
+
+/**
+ * Statically resolve the given `ts.Expression` into a `ResolvedValue`.
+ *
+ * @param node the expression to statically resolve if possible
+ * @param checker a `ts.TypeChecker` used to understand the expression
+ * @param foreignFunctionResolver a function which will be used whenever a "foreign function" is
+ * encountered. A foreign function is a function which has no body - usually the result of calling
+ * a function declared in another library's .d.ts file. In these cases, the foreignFunctionResolver
+ * will be called with the function's declaration, and can optionally return a `ts.Expression`
+ * (possibly extracted from the foreign function's type signature) which will be used as the result
+ * of the call.
+ * @returns a `ResolvedValue` representing the resolved value
+ */
+export function staticallyResolve(
+    node: ts.Expression, host: ReflectionHost, checker: ts.TypeChecker,
+    foreignFunctionResolver?:
+        (node: Reference<ts.FunctionDeclaration|ts.MethodDeclaration>, args: ts.Expression[]) =>
+            ts.Expression | null): ResolvedValue {
+  return new StaticInterpreter(host, checker).visit(node, {
+    absoluteModuleName: null,
+    scope: new Map<ts.ParameterDeclaration, ResolvedValue>(), foreignFunctionResolver,
+  });
+}
+
+interface BinaryOperatorDef {
+  literal: boolean;
+  op: (a: any, b: any) => ResolvedValue;
+}
+
+function literalBinaryOp(op: (a: any, b: any) => any): BinaryOperatorDef {
+  return {op, literal: true};
+}
+
+function referenceBinaryOp(op: (a: any, b: any) => any): BinaryOperatorDef {
+  return {op, literal: false};
+}
+
+const BINARY_OPERATORS = new Map<ts.SyntaxKind, BinaryOperatorDef>([
+  [ts.SyntaxKind.PlusToken, literalBinaryOp((a, b) => a + b)],
+  [ts.SyntaxKind.MinusToken, literalBinaryOp((a, b) => a - b)],
+  [ts.SyntaxKind.AsteriskToken, literalBinaryOp((a, b) => a * b)],
+  [ts.SyntaxKind.SlashToken, literalBinaryOp((a, b) => a / b)],
+  [ts.SyntaxKind.PercentToken, literalBinaryOp((a, b) => a % b)],
+  [ts.SyntaxKind.AmpersandToken, literalBinaryOp((a, b) => a & b)],
+  [ts.SyntaxKind.BarToken, literalBinaryOp((a, b) => a | b)],
+  [ts.SyntaxKind.CaretToken, literalBinaryOp((a, b) => a ^ b)],
+  [ts.SyntaxKind.LessThanToken, literalBinaryOp((a, b) => a < b)],
+  [ts.SyntaxKind.LessThanEqualsToken, literalBinaryOp((a, b) => a <= b)],
+  [ts.SyntaxKind.GreaterThanToken, literalBinaryOp((a, b) => a > b)],
+  [ts.SyntaxKind.GreaterThanEqualsToken, literalBinaryOp((a, b) => a >= b)],
+  [ts.SyntaxKind.LessThanLessThanToken, literalBinaryOp((a, b) => a << b)],
+  [ts.SyntaxKind.GreaterThanGreaterThanToken, literalBinaryOp((a, b) => a >> b)],
+  [ts.SyntaxKind.GreaterThanGreaterThanGreaterThanToken, literalBinaryOp((a, b) => a >>> b)],
+  [ts.SyntaxKind.AsteriskAsteriskToken, literalBinaryOp((a, b) => Math.pow(a, b))],
+  [ts.SyntaxKind.AmpersandAmpersandToken, referenceBinaryOp((a, b) => a && b)],
+  [ts.SyntaxKind.BarBarToken, referenceBinaryOp((a, b) => a || b)]
+]);
+
+const UNARY_OPERATORS = new Map<ts.SyntaxKind, (a: any) => any>([
+  [ts.SyntaxKind.TildeToken, a => ~a], [ts.SyntaxKind.MinusToken, a => -a],
+  [ts.SyntaxKind.PlusToken, a => +a], [ts.SyntaxKind.ExclamationToken, a => !a]
+]);
+
+interface Context {
+  absoluteModuleName: string|null;
+  scope: Scope;
+  foreignFunctionResolver?
+      (ref: Reference<ts.FunctionDeclaration|ts.MethodDeclaration|ts.FunctionExpression>,
+       args: ReadonlyArray<ts.Expression>): ts.Expression|null;
+}
+
+class StaticInterpreter {
+  constructor(private host: ReflectionHost, private checker: ts.TypeChecker) {}
+
+  visit(node: ts.Expression, context: Context): ResolvedValue {
+    return this.visitExpression(node, context);
+  }
+
+  private visitExpression(node: ts.Expression, context: Context): ResolvedValue {
+    if (node.kind === ts.SyntaxKind.TrueKeyword) {
+      return true;
+    } else if (node.kind === ts.SyntaxKind.FalseKeyword) {
+      return false;
+    } else if (ts.isStringLiteral(node)) {
+      return node.text;
+    } else if (ts.isNoSubstitutionTemplateLiteral(node)) {
+      return node.text;
+    } else if (ts.isTemplateExpression(node)) {
+      return this.visitTemplateExpression(node, context);
+    } else if (ts.isNumericLiteral(node)) {
+      return parseFloat(node.text);
+    } else if (ts.isObjectLiteralExpression(node)) {
+      return this.visitObjectLiteralExpression(node, context);
+    } else if (ts.isIdentifier(node)) {
+      return this.visitIdentifier(node, context);
+    } else if (ts.isPropertyAccessExpression(node)) {
+      return this.visitPropertyAccessExpression(node, context);
+    } else if (ts.isCallExpression(node)) {
+      return this.visitCallExpression(node, context);
+    } else if (ts.isConditionalExpression(node)) {
+      return this.visitConditionalExpression(node, context);
+    } else if (ts.isPrefixUnaryExpression(node)) {
+      return this.visitPrefixUnaryExpression(node, context);
+    } else if (ts.isBinaryExpression(node)) {
+      return this.visitBinaryExpression(node, context);
+    } else if (ts.isArrayLiteralExpression(node)) {
+      return this.visitArrayLiteralExpression(node, context);
+    } else if (ts.isParenthesizedExpression(node)) {
+      return this.visitParenthesizedExpression(node, context);
+    } else if (ts.isElementAccessExpression(node)) {
+      return this.visitElementAccessExpression(node, context);
+    } else if (ts.isAsExpression(node)) {
+      return this.visitExpression(node.expression, context);
+    } else if (ts.isNonNullExpression(node)) {
+      return this.visitExpression(node.expression, context);
+    } else if (isPossibleClassDeclaration(node) && this.host.isClass(node)) {
+      return this.visitDeclaration(node, context);
+    } else {
+      return DYNAMIC_VALUE;
+    }
+  }
+
+  private visitArrayLiteralExpression(node: ts.ArrayLiteralExpression, context: Context):
+      ResolvedValue {
+    const array: ResolvedValueArray = [];
+    for (let i = 0; i < node.elements.length; i++) {
+      const element = node.elements[i];
+      if (ts.isSpreadElement(element)) {
+        const spread = this.visitExpression(element.expression, context);
+        if (isDynamicValue(spread)) {
+          return DYNAMIC_VALUE;
+        }
+        if (!Array.isArray(spread)) {
+          throw new Error(`Unexpected value in spread expression: ${spread}`);
+        }
+
+        array.push(...spread);
+      } else {
+        const result = this.visitExpression(element, context);
+        if (isDynamicValue(result)) {
+          return DYNAMIC_VALUE;
+        }
+
+        array.push(result);
+      }
+    }
+    return array;
+  }
+
+  private visitObjectLiteralExpression(node: ts.ObjectLiteralExpression, context: Context):
+      ResolvedValue {
+    const map: ResolvedValueMap = new Map<string, ResolvedValue>();
+    for (let i = 0; i < node.properties.length; i++) {
+      const property = node.properties[i];
+      if (ts.isPropertyAssignment(property)) {
+        const name = this.stringNameFromPropertyName(property.name, context);
+
+        // Check whether the name can be determined statically.
+        if (name === undefined) {
+          return DYNAMIC_VALUE;
+        }
+
+        map.set(name, this.visitExpression(property.initializer, context));
+      } else if (ts.isShorthandPropertyAssignment(property)) {
+        const symbol = this.checker.getShorthandAssignmentValueSymbol(property);
+        if (symbol === undefined || symbol.valueDeclaration === undefined) {
+          return DYNAMIC_VALUE;
+        }
+        map.set(property.name.text, this.visitDeclaration(symbol.valueDeclaration, context));
+      } else if (ts.isSpreadAssignment(property)) {
+        const spread = this.visitExpression(property.expression, context);
+        if (isDynamicValue(spread)) {
+          return DYNAMIC_VALUE;
+        }
+        if (!(spread instanceof Map)) {
+          throw new Error(`Unexpected value in spread assignment: ${spread}`);
+        }
+        spread.forEach((value, key) => map.set(key, value));
+      } else {
+        return DYNAMIC_VALUE;
+      }
+    }
+    return map;
+  }
+
+  private visitTemplateExpression(node: ts.TemplateExpression, context: Context): ResolvedValue {
+    const pieces: string[] = [node.head.text];
+    for (let i = 0; i < node.templateSpans.length; i++) {
+      const span = node.templateSpans[i];
+      const value = this.visit(span.expression, context);
+      if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' ||
+          value == null) {
+        pieces.push(`${value}`);
+      } else {
+        return DYNAMIC_VALUE;
+      }
+      pieces.push(span.literal.text);
+    }
+    return pieces.join('');
+  }
+
+  private visitIdentifier(node: ts.Identifier, context: Context): ResolvedValue {
+    const decl = this.host.getDeclarationOfIdentifier(node);
+    if (decl === null) {
+      return DYNAMIC_VALUE;
+    }
+    const result = this.visitDeclaration(
+        decl.node, {...context, absoluteModuleName: decl.viaModule || context.absoluteModuleName});
+    if (result instanceof Reference) {
+      result.addIdentifier(node);
+    }
+    return result;
+  }
+
+  private visitDeclaration(node: ts.Declaration, context: Context): ResolvedValue {
+    if (this.host.isClass(node)) {
+      return this.getReference(node, context);
+    } else if (ts.isVariableDeclaration(node)) {
+      if (!node.initializer) {
+        return undefined;
+      }
+      return this.visitExpression(node.initializer, context);
+    } else if (ts.isParameter(node) && context.scope.has(node)) {
+      return context.scope.get(node) !;
+    } else if (ts.isExportAssignment(node)) {
+      return this.visitExpression(node.expression, context);
+    } else if (ts.isSourceFile(node)) {
+      return this.visitSourceFile(node, context);
+    } else {
+      return this.getReference(node, context);
+    }
+  }
+
+  private visitElementAccessExpression(node: ts.ElementAccessExpression, context: Context):
+      ResolvedValue {
+    const lhs = this.visitExpression(node.expression, context);
+    if (node.argumentExpression === undefined) {
+      throw new Error(`Expected argument in ElementAccessExpression`);
+    }
+    if (isDynamicValue(lhs)) {
+      return DYNAMIC_VALUE;
+    }
+    const rhs = this.visitExpression(node.argumentExpression, context);
+    if (isDynamicValue(rhs)) {
+      return DYNAMIC_VALUE;
+    }
+    if (typeof rhs !== 'string' && typeof rhs !== 'number') {
+      throw new Error(
+          `ElementAccessExpression index should be string or number, got ${typeof rhs}: ${rhs}`);
+    }
+
+    return this.accessHelper(lhs, rhs, context);
+  }
+
+  private visitPropertyAccessExpression(node: ts.PropertyAccessExpression, context: Context):
+      ResolvedValue {
+    const lhs = this.visitExpression(node.expression, context);
+    const rhs = node.name.text;
+    // TODO: handle reference to class declaration.
+    if (isDynamicValue(lhs)) {
+      return DYNAMIC_VALUE;
+    }
+
+    return this.accessHelper(lhs, rhs, context);
+  }
+
+  private visitSourceFile(node: ts.SourceFile, context: Context): ResolvedValue {
+    const declarations = this.host.getExportsOfModule(node);
+    if (declarations === null) {
+      return DYNAMIC_VALUE;
+    }
+    const map = new Map<string, ResolvedValue>();
+    declarations.forEach((decl, name) => {
+      const value = this.visitDeclaration(decl.node, {
+        ...context,
+        absoluteModuleName: decl.viaModule || context.absoluteModuleName,
+      });
+      map.set(name, value);
+    });
+    return map;
+  }
+
+  private accessHelper(lhs: ResolvedValue, rhs: string|number, context: Context): ResolvedValue {
+    const strIndex = `${rhs}`;
+    if (lhs instanceof Map) {
+      if (lhs.has(strIndex)) {
+        return lhs.get(strIndex) !;
+      } else {
+        throw new Error(`Invalid map access: [${Array.from(lhs.keys())}] dot ${rhs}`);
+      }
+    } else if (Array.isArray(lhs)) {
+      if (rhs === 'length') {
+        return lhs.length;
+      }
+      if (typeof rhs !== 'number' || !Number.isInteger(rhs)) {
+        return DYNAMIC_VALUE;
+      }
+      if (rhs < 0 || rhs >= lhs.length) {
+        throw new Error(`Index out of bounds: ${rhs} vs ${lhs.length}`);
+      }
+      return lhs[rhs];
+    } else if (lhs instanceof Reference) {
+      const ref = lhs.node;
+      if (isPossibleClassDeclaration(ref) && this.host.isClass(ref)) {
+        let absoluteModuleName = context.absoluteModuleName;
+        if (lhs instanceof NodeReference || lhs instanceof AbsoluteReference) {
+          absoluteModuleName = lhs.moduleName || absoluteModuleName;
+        }
+        let value: ResolvedValue = undefined;
+        const member = this.host.getMembersOfClass(ref).find(
+            member => member.isStatic && member.name === strIndex);
+        if (member !== undefined) {
+          if (member.value !== null) {
+            value = this.visitExpression(member.value, context);
+          } else if (member.implementation !== null) {
+            value = new NodeReference(member.implementation, absoluteModuleName);
+          } else if (member.node) {
+            value = new NodeReference(member.node, absoluteModuleName);
+          }
+        }
+        return value;
+      }
+    }
+    throw new Error(`Invalid dot property access: ${lhs} dot ${rhs}`);
+  }
+
+  private visitCallExpression(node: ts.CallExpression, context: Context): ResolvedValue {
+    const lhs = this.visitExpression(node.expression, context);
+    if (!(lhs instanceof Reference)) {
+      throw new Error(`attempting to call something that is not a function: ${lhs}`);
+    } else if (!isFunctionOrMethodReference(lhs)) {
+      throw new Error(
+          `calling something that is not a function declaration? ${ts.SyntaxKind[lhs.node.kind]} (${node.getText()})`);
+    }
+
+    const fn = lhs.node;
+
+    // If the function is foreign (declared through a d.ts file), attempt to resolve it with the
+    // foreignFunctionResolver, if one is specified.
+    if (fn.body === undefined) {
+      let expr: ts.Expression|null = null;
+      if (context.foreignFunctionResolver) {
+        expr = context.foreignFunctionResolver(lhs, node.arguments);
+      }
+      if (expr === null) {
+        throw new Error(
+            `could not resolve foreign function declaration: ${node.getSourceFile().fileName} ${(lhs.node.name as ts.Identifier).text}`);
+      }
+
+      // If the function is declared in a different file, resolve the foreign function expression
+      // using the absolute module name of that file (if any).
+      let absoluteModuleName: string|null = context.absoluteModuleName;
+      if (lhs instanceof NodeReference || lhs instanceof AbsoluteReference) {
+        absoluteModuleName = lhs.moduleName || absoluteModuleName;
+      }
+
+      return this.visitExpression(expr, {...context, absoluteModuleName});
+    }
+
+    const body = fn.body;
+    if (body.statements.length !== 1 || !ts.isReturnStatement(body.statements[0])) {
+      throw new Error('Function body must have a single return statement only.');
+    }
+    const ret = body.statements[0] as ts.ReturnStatement;
+
+    const newScope: Scope = new Map<ts.ParameterDeclaration, ResolvedValue>();
+    fn.parameters.forEach((param, index) => {
+      let value: ResolvedValue = undefined;
+      if (index < node.arguments.length) {
+        const arg = node.arguments[index];
+        value = this.visitExpression(arg, context);
+      }
+      if (value === undefined && param.initializer !== undefined) {
+        value = this.visitExpression(param.initializer, context);
+      }
+      newScope.set(param, value);
+    });
+
+    return ret.expression !== undefined ?
+        this.visitExpression(ret.expression, {...context, scope: newScope}) :
+        undefined;
+  }
+
+  private visitConditionalExpression(node: ts.ConditionalExpression, context: Context):
+      ResolvedValue {
+    const condition = this.visitExpression(node.condition, context);
+    if (isDynamicValue(condition)) {
+      return condition;
+    }
+
+    if (condition) {
+      return this.visitExpression(node.whenTrue, context);
+    } else {
+      return this.visitExpression(node.whenFalse, context);
+    }
+  }
+
+  private visitPrefixUnaryExpression(node: ts.PrefixUnaryExpression, context: Context):
+      ResolvedValue {
+    const operatorKind = node.operator;
+    if (!UNARY_OPERATORS.has(operatorKind)) {
+      throw new Error(`Unsupported prefix unary operator: ${ts.SyntaxKind[operatorKind]}`);
+    }
+
+    const op = UNARY_OPERATORS.get(operatorKind) !;
+    const value = this.visitExpression(node.operand, context);
+    return isDynamicValue(value) ? DYNAMIC_VALUE : op(value);
+  }
+
+  private visitBinaryExpression(node: ts.BinaryExpression, context: Context): ResolvedValue {
+    const tokenKind = node.operatorToken.kind;
+    if (!BINARY_OPERATORS.has(tokenKind)) {
+      throw new Error(`Unsupported binary operator: ${ts.SyntaxKind[tokenKind]}`);
+    }
+
+    const opRecord = BINARY_OPERATORS.get(tokenKind) !;
+    let lhs: ResolvedValue, rhs: ResolvedValue;
+    if (opRecord.literal) {
+      lhs = literal(this.visitExpression(node.left, context));
+      rhs = literal(this.visitExpression(node.right, context));
+    } else {
+      lhs = this.visitExpression(node.left, context);
+      rhs = this.visitExpression(node.right, context);
+    }
+
+    return isDynamicValue(lhs) || isDynamicValue(rhs) ? DYNAMIC_VALUE : opRecord.op(lhs, rhs);
+  }
+
+  private visitParenthesizedExpression(node: ts.ParenthesizedExpression, context: Context):
+      ResolvedValue {
+    return this.visitExpression(node.expression, context);
+  }
+
+  private stringNameFromPropertyName(node: ts.PropertyName, context: Context): string|undefined {
+    if (ts.isIdentifier(node) || ts.isStringLiteral(node) || ts.isNumericLiteral(node)) {
+      return node.text;
+    } else {  // ts.ComputedPropertyName
+      const literal = this.visitExpression(node.expression, context);
+      return typeof literal === 'string' ? literal : undefined;
+    }
+  }
+
+  private getReference(node: ts.Declaration, context: Context): Reference {
+    const id = identifierOfDeclaration(node);
+    if (id === undefined) {
+      throw new Error(`Don't know how to refer to ${ts.SyntaxKind[node.kind]}`);
+    }
+    if (context.absoluteModuleName !== null) {
+      // TODO(alxhub): investigate whether this can get symbol names wrong in the event of
+      // re-exports under different names.
+      return new AbsoluteReference(node, id, context.absoluteModuleName, id.text);
+    } else {
+      return new ResolvedReference(node, id);
+    }
+  }
+}
+
+function isFunctionOrMethodReference(ref: Reference<ts.Node>):
+    ref is Reference<ts.FunctionDeclaration|ts.MethodDeclaration|ts.FunctionExpression> {
+  return ts.isFunctionDeclaration(ref.node) || ts.isMethodDeclaration(ref.node);
+}
+
+function literal(value: ResolvedValue): any {
+  if (value === null || value === undefined || typeof value === 'string' ||
+      typeof value === 'number' || typeof value === 'boolean') {
+    return value;
+  }
+  if (isDynamicValue(value)) {
+    return DYNAMIC_VALUE;
+  }
+  throw new Error(`Value ${value} is not literal and cannot be used in this context.`);
+}
+
+function identifierOfDeclaration(decl: ts.Declaration): ts.Identifier|undefined {
+  if (ts.isClassDeclaration(decl)) {
+    return decl.name;
+  } else if (ts.isFunctionDeclaration(decl)) {
+    return decl.name;
+  } else if (ts.isVariableDeclaration(decl) && ts.isIdentifier(decl.name)) {
+    return decl.name;
+  } else if (ts.isShorthandPropertyAssignment(decl)) {
+    return decl.name;
+  } else {
+    return undefined;
+  }
+}
+
+function isPossibleClassDeclaration(node: ts.Node): node is ts.Declaration {
+  return ts.isClassDeclaration(node) || ts.isVariableDeclaration(node);
+}
diff --git a/packages/compiler-cli/src/ngtsc/metadata/test/BUILD.bazel b/packages/compiler-cli/src/ngtsc/metadata/test/BUILD.bazel
new file mode 100644
index 000000000000..65474c834228
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/metadata/test/BUILD.bazel
@@ -0,0 +1,28 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob([
+        "**/*.ts",
+    ]),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli/src/ngtsc/host",
+        "//packages/compiler-cli/src/ngtsc/metadata",
+        "//packages/compiler-cli/src/ngtsc/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_no_angular_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node_no_angular",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngtsc/metadata/test/reflector_spec.ts b/packages/compiler-cli/src/ngtsc/metadata/test/reflector_spec.ts
new file mode 100644
index 000000000000..47e05f0642e9
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/metadata/test/reflector_spec.ts
@@ -0,0 +1,195 @@
+/**
+ * @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 ts from 'typescript';
+
+import {Parameter} from '../../host';
+import {getDeclaration, makeProgram} from '../../testing/in_memory_typescript';
+import {TypeScriptReflectionHost} from '../src/reflector';
+
+describe('reflector', () => {
+  describe('ctor params', () => {
+    it('should reflect a single argument', () => {
+      const {program} = makeProgram([{
+        name: 'entry.ts',
+        contents: `
+            class Bar {}
+
+            class Foo {
+              constructor(bar: Bar) {}
+            }
+        `
+      }]);
+      const clazz = getDeclaration(program, 'entry.ts', 'Foo', ts.isClassDeclaration);
+      const checker = program.getTypeChecker();
+      const host = new TypeScriptReflectionHost(checker);
+      const args = host.getConstructorParameters(clazz) !;
+      expect(args.length).toBe(1);
+      expectParameter(args[0], 'bar', 'Bar');
+    });
+
+    it('should reflect a decorated argument', () => {
+      const {program} = makeProgram([
+        {
+          name: 'dec.ts',
+          contents: `
+          export function dec(target: any, key: string, index: number) {
+          }
+        `
+        },
+        {
+          name: 'entry.ts',
+          contents: `
+            import {dec} from './dec';
+            class Bar {}
+            
+            class Foo {
+              constructor(@dec bar: Bar) {}
+            }
+        `
+        }
+      ]);
+      const clazz = getDeclaration(program, 'entry.ts', 'Foo', ts.isClassDeclaration);
+      const checker = program.getTypeChecker();
+      const host = new TypeScriptReflectionHost(checker);
+      const args = host.getConstructorParameters(clazz) !;
+      expect(args.length).toBe(1);
+      expectParameter(args[0], 'bar', 'Bar', 'dec', './dec');
+    });
+
+    it('should reflect a decorated argument with a call', () => {
+      const {program} = makeProgram([
+        {
+          name: 'dec.ts',
+          contents: `
+          export function dec(target: any, key: string, index: number) {
+          }
+        `
+        },
+        {
+          name: 'entry.ts',
+          contents: `
+            import {dec} from './dec';
+            class Bar {}
+            
+            class Foo {
+              constructor(@dec bar: Bar) {}
+            }
+        `
+        }
+      ]);
+      const clazz = getDeclaration(program, 'entry.ts', 'Foo', ts.isClassDeclaration);
+      const checker = program.getTypeChecker();
+      const host = new TypeScriptReflectionHost(checker);
+      const args = host.getConstructorParameters(clazz) !;
+      expect(args.length).toBe(1);
+      expectParameter(args[0], 'bar', 'Bar', 'dec', './dec');
+    });
+
+    it('should reflect a decorated argument with an indirection', () => {
+      const {program} = makeProgram([
+        {
+          name: 'bar.ts',
+          contents: `
+          export class Bar {}
+        `
+        },
+        {
+          name: 'entry.ts',
+          contents: `
+            import {Bar} from './bar';
+            import * as star from './bar';
+            
+            class Foo {
+              constructor(bar: Bar, otherBar: star.Bar) {}
+            }
+        `
+        }
+      ]);
+      const clazz = getDeclaration(program, 'entry.ts', 'Foo', ts.isClassDeclaration);
+      const checker = program.getTypeChecker();
+      const host = new TypeScriptReflectionHost(checker);
+      const args = host.getConstructorParameters(clazz) !;
+      expect(args.length).toBe(2);
+      expectParameter(args[0], 'bar', 'Bar');
+      expectParameter(args[1], 'otherBar', 'star.Bar');
+    });
+  });
+
+  it('should reflect a re-export', () => {
+    const {program} = makeProgram([
+      {name: '/node_modules/absolute/index.ts', contents: 'export class Target {}'},
+      {name: 'local1.ts', contents: `export {Target as AliasTarget} from 'absolute';`},
+      {name: 'local2.ts', contents: `export {AliasTarget as Target} from './local1';`}, {
+        name: 'entry.ts',
+        contents: `
+          import {Target} from './local2';
+          import {Target as DirectTarget} from 'absolute';
+
+          const target = Target;
+          const directTarget = DirectTarget;
+      `
+      }
+    ]);
+    const target = getDeclaration(program, 'entry.ts', 'target', ts.isVariableDeclaration);
+    if (target.initializer === undefined || !ts.isIdentifier(target.initializer)) {
+      return fail('Unexpected initializer for target');
+    }
+    const directTarget =
+        getDeclaration(program, 'entry.ts', 'directTarget', ts.isVariableDeclaration);
+    if (directTarget.initializer === undefined || !ts.isIdentifier(directTarget.initializer)) {
+      return fail('Unexpected initializer for directTarget');
+    }
+    const Target = target.initializer;
+    const DirectTarget = directTarget.initializer;
+
+    const checker = program.getTypeChecker();
+    const host = new TypeScriptReflectionHost(checker);
+    const targetDecl = host.getDeclarationOfIdentifier(Target);
+    const directTargetDecl = host.getDeclarationOfIdentifier(DirectTarget);
+    if (targetDecl === null) {
+      return fail('No declaration found for Target');
+    } else if (directTargetDecl === null) {
+      return fail('No declaration found for DirectTarget');
+    }
+    expect(targetDecl.node.getSourceFile().fileName).toBe('/node_modules/absolute/index.ts');
+    expect(ts.isClassDeclaration(targetDecl.node)).toBe(true);
+    expect(directTargetDecl.viaModule).toBe('absolute');
+    expect(directTargetDecl.node).toBe(targetDecl.node);
+  });
+});
+
+function expectParameter(
+    param: Parameter, name: string, type?: string, decorator?: string,
+    decoratorFrom?: string): void {
+  expect(param.name !).toEqual(name);
+  if (type === undefined) {
+    expect(param.type).toBeNull();
+  } else {
+    expect(param.type).not.toBeNull();
+    expect(argExpressionToString(param.type !)).toEqual(type);
+  }
+  if (decorator !== undefined) {
+    expect(param.decorators).not.toBeNull();
+    expect(param.decorators !.length).toBeGreaterThan(0);
+    expect(param.decorators !.some(
+               dec => dec.name === decorator && dec.import !== null &&
+                   dec.import.from === decoratorFrom))
+        .toBe(true);
+  }
+}
+
+function argExpressionToString(name: ts.Node): string {
+  if (ts.isIdentifier(name)) {
+    return name.text;
+  } else if (ts.isPropertyAccessExpression(name)) {
+    return `${argExpressionToString(name.expression)}.${name.name.text}`;
+  } else {
+    throw new Error(`Unexpected node in arg expression: ${ts.SyntaxKind[name.kind]}.`);
+  }
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngtsc/metadata/test/resolver_spec.ts b/packages/compiler-cli/src/ngtsc/metadata/test/resolver_spec.ts
new file mode 100644
index 000000000000..ee34ca4501b9
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/metadata/test/resolver_spec.ts
@@ -0,0 +1,268 @@
+/**
+ * @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 {WrappedNodeExpr} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {TypeScriptReflectionHost} from '..';
+import {getDeclaration, makeProgram} from '../../testing/in_memory_typescript';
+import {AbsoluteReference, Reference, ResolvedValue, staticallyResolve} from '../src/resolver';
+
+function makeSimpleProgram(contents: string): ts.Program {
+  return makeProgram([{name: 'entry.ts', contents}]).program;
+}
+
+function makeExpression(
+    code: string, expr: string): {expression: ts.Expression, checker: ts.TypeChecker} {
+  const {program} =
+      makeProgram([{name: 'entry.ts', contents: `${code}; const target$ = ${expr};`}]);
+  const checker = program.getTypeChecker();
+  const decl = getDeclaration(program, 'entry.ts', 'target$', ts.isVariableDeclaration);
+  return {
+    expression: decl.initializer !,
+    checker,
+  };
+}
+
+function evaluate<T extends ResolvedValue>(code: string, expr: string): T {
+  const {expression, checker} = makeExpression(code, expr);
+  const host = new TypeScriptReflectionHost(checker);
+  return staticallyResolve(expression, host, checker) as T;
+}
+
+describe('ngtsc metadata', () => {
+  it('reads a file correctly', () => {
+    const {program} = makeProgram([
+      {
+        name: 'entry.ts',
+        contents: `
+      import {Y} from './other';
+      const A = Y;
+        export const X = A;
+      `
+      },
+      {
+        name: 'other.ts',
+        contents: `
+      export const Y = 'test';
+      `
+      }
+    ]);
+    const decl = getDeclaration(program, 'entry.ts', 'X', ts.isVariableDeclaration);
+    const host = new TypeScriptReflectionHost(program.getTypeChecker());
+
+    const value = staticallyResolve(decl.initializer !, host, program.getTypeChecker());
+    expect(value).toEqual('test');
+  });
+
+  it('map access works',
+     () => { expect(evaluate('const obj = {a: "test"};', 'obj.a')).toEqual('test'); });
+
+  it('function calls work', () => {
+    expect(evaluate(`function foo(bar) { return bar; }`, 'foo("test")')).toEqual('test');
+  });
+
+  it('conditionals work', () => {
+    expect(evaluate(`const x = false; const y = x ? 'true' : 'false';`, 'y')).toEqual('false');
+  });
+
+  it('addition works', () => { expect(evaluate(`const x = 1 + 2;`, 'x')).toEqual(3); });
+
+  it('static property on class works',
+     () => { expect(evaluate(`class Foo { static bar = 'test'; }`, 'Foo.bar')).toEqual('test'); });
+
+  it('static property call works', () => {
+    expect(evaluate(`class Foo { static bar(test) { return test; } }`, 'Foo.bar("test")'))
+        .toEqual('test');
+  });
+
+  it('indirected static property call works', () => {
+    expect(
+        evaluate(
+            `class Foo { static bar(test) { return test; } }; const fn = Foo.bar;`, 'fn("test")'))
+        .toEqual('test');
+  });
+
+  it('array works', () => {
+    expect(evaluate(`const x = 'test'; const y = [1, x, 2];`, 'y')).toEqual([1, 'test', 2]);
+  });
+
+  it('array spread works', () => {
+    expect(evaluate(`const a = [1, 2]; const b = [4, 5]; const c = [...a, 3, ...b];`, 'c'))
+        .toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it('&& operations work', () => {
+    expect(evaluate(`const a = 'hello', b = 'world';`, 'a && b')).toEqual('world');
+    expect(evaluate(`const a = false, b = 'world';`, 'a && b')).toEqual(false);
+    expect(evaluate(`const a = 'hello', b = 0;`, 'a && b')).toEqual(0);
+  });
+
+  it('|| operations work', () => {
+    expect(evaluate(`const a = 'hello', b = 'world';`, 'a || b')).toEqual('hello');
+    expect(evaluate(`const a = false, b = 'world';`, 'a || b')).toEqual('world');
+    expect(evaluate(`const a = 'hello', b = 0;`, 'a || b')).toEqual('hello');
+  });
+
+  it('parentheticals work',
+     () => { expect(evaluate(`const a = 3, b = 4;`, 'a * (a + b)')).toEqual(21); });
+
+  it('array access works',
+     () => { expect(evaluate(`const a = [1, 2, 3];`, 'a[1] + a[0]')).toEqual(3); });
+
+  it('array `length` property access works',
+     () => { expect(evaluate(`const a = [1, 2, 3];`, 'a[\'length\'] + 1')).toEqual(4); });
+
+  it('negation works', () => {
+    expect(evaluate(`const x = 3;`, '!x')).toEqual(false);
+    expect(evaluate(`const x = 3;`, '!!x')).toEqual(true);
+  });
+
+  it('imports work', () => {
+    const {program} = makeProgram([
+      {name: 'second.ts', contents: 'export function foo(bar) { return bar; }'},
+      {
+        name: 'entry.ts',
+        contents: `
+          import {foo} from './second';
+          const target$ = foo;
+      `
+      },
+    ]);
+    const checker = program.getTypeChecker();
+    const host = new TypeScriptReflectionHost(checker);
+    const result = getDeclaration(program, 'entry.ts', 'target$', ts.isVariableDeclaration);
+    const expr = result.initializer !;
+    const resolved = staticallyResolve(expr, host, checker);
+    if (!(resolved instanceof Reference)) {
+      return fail('Expected expression to resolve to a reference');
+    }
+    expect(ts.isFunctionDeclaration(resolved.node)).toBe(true);
+    expect(resolved.expressable).toBe(true);
+    const reference = resolved.toExpression(program.getSourceFile('entry.ts') !);
+    if (!(reference instanceof WrappedNodeExpr)) {
+      return fail('Expected expression reference to be a wrapped node');
+    }
+    if (!ts.isIdentifier(reference.node)) {
+      return fail('Expected expression to be an Identifier');
+    }
+    expect(reference.node.getSourceFile()).toEqual(program.getSourceFile('entry.ts') !);
+  });
+
+  it('absolute imports work', () => {
+    const {program} = makeProgram([
+      {name: 'node_modules/some_library/index.d.ts', contents: 'export declare function foo(bar);'},
+      {
+        name: 'entry.ts',
+        contents: `
+          import {foo} from 'some_library';
+          const target$ = foo;
+      `
+      },
+    ]);
+    const checker = program.getTypeChecker();
+    const host = new TypeScriptReflectionHost(checker);
+    const result = getDeclaration(program, 'entry.ts', 'target$', ts.isVariableDeclaration);
+    const expr = result.initializer !;
+    const resolved = staticallyResolve(expr, host, checker);
+    if (!(resolved instanceof AbsoluteReference)) {
+      return fail('Expected expression to resolve to an absolute reference');
+    }
+    expect(resolved.moduleName).toBe('some_library');
+    expect(ts.isFunctionDeclaration(resolved.node)).toBe(true);
+    expect(resolved.expressable).toBe(true);
+    const reference = resolved.toExpression(program.getSourceFile('entry.ts') !);
+    if (!(reference instanceof WrappedNodeExpr)) {
+      return fail('Expected expression reference to be a wrapped node');
+    }
+    if (!ts.isIdentifier(reference.node)) {
+      return fail('Expected expression to be an Identifier');
+    }
+    expect(reference.node.getSourceFile()).toEqual(program.getSourceFile('entry.ts') !);
+  });
+
+  it('reads values from default exports', () => {
+    const {program} = makeProgram([
+      {name: 'second.ts', contents: 'export default {property: "test"}'},
+      {
+        name: 'entry.ts',
+        contents: `
+          import mod from './second';
+          const target$ = mod.property;
+      `
+      },
+    ]);
+    const checker = program.getTypeChecker();
+    const host = new TypeScriptReflectionHost(checker);
+    const result = getDeclaration(program, 'entry.ts', 'target$', ts.isVariableDeclaration);
+    const expr = result.initializer !;
+    expect(staticallyResolve(expr, host, checker)).toEqual('test');
+  });
+
+  it('reads values from named exports', () => {
+    const {program} = makeProgram([
+      {name: 'second.ts', contents: 'export const a = {property: "test"};'},
+      {
+        name: 'entry.ts',
+        contents: `
+          import * as mod from './second';
+          const target$ = mod.a.property;
+      `
+      },
+    ]);
+    const checker = program.getTypeChecker();
+    const host = new TypeScriptReflectionHost(checker);
+    const result = getDeclaration(program, 'entry.ts', 'target$', ts.isVariableDeclaration);
+    const expr = result.initializer !;
+    expect(staticallyResolve(expr, host, checker)).toEqual('test');
+  });
+
+  it('chain of re-exports works', () => {
+    const {program} = makeProgram([
+      {name: 'const.ts', contents: 'export const value = {property: "test"};'},
+      {name: 'def.ts', contents: `import {value} from './const'; export default value;`},
+      {name: 'indirect-reexport.ts', contents: `import value from './def'; export {value};`},
+      {name: 'direct-reexport.ts', contents: `export {value} from './indirect-reexport';`},
+      {
+        name: 'entry.ts',
+        contents: `import * as mod from './direct-reexport'; const target$ = mod.value.property;`
+      },
+    ]);
+    const checker = program.getTypeChecker();
+    const host = new TypeScriptReflectionHost(checker);
+    const result = getDeclaration(program, 'entry.ts', 'target$', ts.isVariableDeclaration);
+    const expr = result.initializer !;
+    expect(staticallyResolve(expr, host, checker)).toEqual('test');
+  });
+
+  it('map spread works', () => {
+    const map: Map<string, number> = evaluate<Map<string, number>>(
+        `const a = {a: 1}; const b = {b: 2, c: 1}; const c = {...a, ...b, c: 3};`, 'c');
+
+    const obj: {[key: string]: number} = {};
+    map.forEach((value, key) => obj[key] = value);
+    expect(obj).toEqual({
+      a: 1,
+      b: 2,
+      c: 3,
+    });
+  });
+
+  it('indirected-via-object function call works', () => {
+    expect(evaluate(
+               `
+      function fn(res) { return res; }
+      const obj = {fn};
+    `,
+               'obj.fn("test")'))
+        .toEqual('test');
+  });
+
+  it('template expressions work',
+     () => { expect(evaluate('const a = 2, b = 4;', '`1${a}3${b}5`')).toEqual('12345'); });
+});
diff --git a/packages/compiler-cli/src/ngtsc/program.ts b/packages/compiler-cli/src/ngtsc/program.ts
new file mode 100644
index 000000000000..79901cf2be30
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/program.ts
@@ -0,0 +1,268 @@
+/**
+ * @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 path from 'path';
+import * as ts from 'typescript';
+
+import * as api from '../transformers/api';
+
+import {ComponentDecoratorHandler, DirectiveDecoratorHandler, InjectableDecoratorHandler, NgModuleDecoratorHandler, PipeDecoratorHandler, ResourceLoader, SelectorScopeRegistry} from './annotations';
+import {BaseDefDecoratorHandler} from './annotations/src/base_def';
+import {FactoryGenerator, FactoryInfo, GeneratedFactoryHostWrapper, generatedFactoryTransform} from './factories';
+import {TypeScriptReflectionHost} from './metadata';
+import {FileResourceLoader, HostResourceLoader} from './resource_loader';
+import {IvyCompilation, ivyTransformFactory} from './transform';
+
+export class NgtscProgram implements api.Program {
+  private tsProgram: ts.Program;
+  private resourceLoader: ResourceLoader;
+  private compilation: IvyCompilation|undefined = undefined;
+  private factoryToSourceInfo: Map<string, FactoryInfo>|null = null;
+  private sourceToFactorySymbols: Map<string, Set<string>>|null = null;
+  private host: ts.CompilerHost;
+  private _coreImportsFrom: ts.SourceFile|null|undefined = undefined;
+  private _reflector: TypeScriptReflectionHost|undefined = undefined;
+  private _isCore: boolean|undefined = undefined;
+
+
+  constructor(
+      rootNames: ReadonlyArray<string>, private options: api.CompilerOptions,
+      host: api.CompilerHost, oldProgram?: api.Program) {
+    this.resourceLoader = host.readResource !== undefined ?
+        new HostResourceLoader(host.readResource.bind(host)) :
+        new FileResourceLoader();
+    const shouldGenerateFactories = options.allowEmptyCodegenFiles || false;
+    this.host = host;
+    let rootFiles = [...rootNames];
+    if (shouldGenerateFactories) {
+      const generator = new FactoryGenerator();
+      const factoryFileMap = generator.computeFactoryFileMap(rootNames);
+      rootFiles.push(...Array.from(factoryFileMap.keys()));
+      this.factoryToSourceInfo = new Map<string, FactoryInfo>();
+      this.sourceToFactorySymbols = new Map<string, Set<string>>();
+      factoryFileMap.forEach((sourceFilePath, factoryPath) => {
+        const moduleSymbolNames = new Set<string>();
+        this.sourceToFactorySymbols !.set(sourceFilePath, moduleSymbolNames);
+        this.factoryToSourceInfo !.set(factoryPath, {sourceFilePath, moduleSymbolNames});
+      });
+      this.host = new GeneratedFactoryHostWrapper(host, generator, factoryFileMap);
+    }
+
+    this.tsProgram =
+        ts.createProgram(rootFiles, options, this.host, oldProgram && oldProgram.getTsProgram());
+  }
+
+  getTsProgram(): ts.Program { return this.tsProgram; }
+
+  getTsOptionDiagnostics(cancellationToken?: ts.CancellationToken|
+                         undefined): ReadonlyArray<ts.Diagnostic> {
+    return this.tsProgram.getOptionsDiagnostics(cancellationToken);
+  }
+
+  getNgOptionDiagnostics(cancellationToken?: ts.CancellationToken|
+                         undefined): ReadonlyArray<api.Diagnostic> {
+    return [];
+  }
+
+  getTsSyntacticDiagnostics(
+      sourceFile?: ts.SourceFile|undefined,
+      cancellationToken?: ts.CancellationToken|undefined): ReadonlyArray<ts.Diagnostic> {
+    return this.tsProgram.getSyntacticDiagnostics(sourceFile, cancellationToken);
+  }
+
+  getNgStructuralDiagnostics(cancellationToken?: ts.CancellationToken|
+                             undefined): ReadonlyArray<api.Diagnostic> {
+    return [];
+  }
+
+  getTsSemanticDiagnostics(
+      sourceFile?: ts.SourceFile|undefined,
+      cancellationToken?: ts.CancellationToken|undefined): ReadonlyArray<ts.Diagnostic> {
+    return this.tsProgram.getSemanticDiagnostics(sourceFile, cancellationToken);
+  }
+
+  getNgSemanticDiagnostics(
+      fileName?: string|undefined,
+      cancellationToken?: ts.CancellationToken|undefined): ReadonlyArray<api.Diagnostic> {
+    return [];
+  }
+
+  async loadNgStructureAsync(): Promise<void> {
+    if (this.compilation === undefined) {
+      this.compilation = this.makeCompilation();
+    }
+    await Promise.all(this.tsProgram.getSourceFiles()
+                          .filter(file => !file.fileName.endsWith('.d.ts'))
+                          .map(file => this.compilation !.analyzeAsync(file))
+                          .filter((result): result is Promise<void> => result !== undefined));
+  }
+
+  listLazyRoutes(entryRoute?: string|undefined): api.LazyRoute[] { return []; }
+
+  getLibrarySummaries(): Map<string, api.LibrarySummary> {
+    throw new Error('Method not implemented.');
+  }
+
+  getEmittedGeneratedFiles(): Map<string, GeneratedFile> {
+    throw new Error('Method not implemented.');
+  }
+
+  getEmittedSourceFiles(): Map<string, ts.SourceFile> {
+    throw new Error('Method not implemented.');
+  }
+
+  emit(opts?: {
+    emitFlags?: api.EmitFlags,
+    cancellationToken?: ts.CancellationToken,
+    customTransformers?: api.CustomTransformers,
+    emitCallback?: api.TsEmitCallback,
+    mergeEmitResultsCallback?: api.TsMergeEmitResultsCallback
+  }): ts.EmitResult {
+    const emitCallback = opts && opts.emitCallback || defaultEmitCallback;
+
+    if (this.compilation === undefined) {
+      this.compilation = this.makeCompilation();
+      this.tsProgram.getSourceFiles()
+          .filter(file => !file.fileName.endsWith('.d.ts'))
+          .forEach(file => this.compilation !.analyzeSync(file));
+    }
+
+    // Since there is no .d.ts transformation API, .d.ts files are transformed during write.
+    const writeFile: ts.WriteFileCallback =
+        (fileName: string, data: string, writeByteOrderMark: boolean,
+         onError: ((message: string) => void) | undefined,
+         sourceFiles: ReadonlyArray<ts.SourceFile>) => {
+          if (fileName.endsWith('.d.ts')) {
+            data = sourceFiles.reduce(
+                (data, sf) => this.compilation !.transformedDtsFor(sf.fileName, data, fileName),
+                data);
+          }
+          this.host.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
+        };
+
+    const transforms =
+        [ivyTransformFactory(this.compilation !, this.reflector, this.coreImportsFrom)];
+    if (this.factoryToSourceInfo !== null) {
+      transforms.push(generatedFactoryTransform(this.factoryToSourceInfo, this.coreImportsFrom));
+    }
+    // Run the emit, including a custom transformer that will downlevel the Ivy decorators in code.
+    const emitResult = emitCallback({
+      program: this.tsProgram,
+      host: this.host,
+      options: this.options,
+      emitOnlyDtsFiles: false, writeFile,
+      customTransformers: {
+        before: transforms,
+      },
+    });
+    return emitResult;
+  }
+
+  private makeCompilation(): IvyCompilation {
+    const checker = this.tsProgram.getTypeChecker();
+    const scopeRegistry = new SelectorScopeRegistry(checker, this.reflector);
+
+    // Set up the IvyCompilation, which manages state for the Ivy transformer.
+    const handlers = [
+      new BaseDefDecoratorHandler(checker, this.reflector),
+      new ComponentDecoratorHandler(
+          checker, this.reflector, scopeRegistry, this.isCore, this.resourceLoader),
+      new DirectiveDecoratorHandler(checker, this.reflector, scopeRegistry, this.isCore),
+      new InjectableDecoratorHandler(this.reflector, this.isCore),
+      new NgModuleDecoratorHandler(checker, this.reflector, scopeRegistry, this.isCore),
+      new PipeDecoratorHandler(checker, this.reflector, scopeRegistry, this.isCore),
+    ];
+
+    return new IvyCompilation(
+        handlers, checker, this.reflector, this.coreImportsFrom, this.sourceToFactorySymbols);
+  }
+
+  private get reflector(): TypeScriptReflectionHost {
+    if (this._reflector === undefined) {
+      this._reflector = new TypeScriptReflectionHost(this.tsProgram.getTypeChecker());
+    }
+    return this._reflector;
+  }
+
+  private get coreImportsFrom(): ts.SourceFile|null {
+    if (this._coreImportsFrom === undefined) {
+      this._coreImportsFrom = this.isCore && getR3SymbolsFile(this.tsProgram) || null;
+    }
+    return this._coreImportsFrom;
+  }
+
+  private get isCore(): boolean {
+    if (this._isCore === undefined) {
+      this._isCore = isAngularCorePackage(this.tsProgram);
+    }
+    return this._isCore;
+  }
+}
+
+const defaultEmitCallback: api.TsEmitCallback =
+    ({program, targetSourceFile, writeFile, cancellationToken, emitOnlyDtsFiles,
+      customTransformers}) =>
+        program.emit(
+            targetSourceFile, writeFile, cancellationToken, emitOnlyDtsFiles, customTransformers);
+
+function mergeEmitResults(emitResults: ts.EmitResult[]): ts.EmitResult {
+  const diagnostics: ts.Diagnostic[] = [];
+  let emitSkipped = false;
+  const emittedFiles: string[] = [];
+  for (const er of emitResults) {
+    diagnostics.push(...er.diagnostics);
+    emitSkipped = emitSkipped || er.emitSkipped;
+    emittedFiles.push(...(er.emittedFiles || []));
+  }
+  return {diagnostics, emitSkipped, emittedFiles};
+}
+
+/**
+ * Find the 'r3_symbols.ts' file in the given `Program`, or return `null` if it wasn't there.
+ */
+function getR3SymbolsFile(program: ts.Program): ts.SourceFile|null {
+  return program.getSourceFiles().find(file => file.fileName.indexOf('r3_symbols.ts') >= 0) || null;
+}
+
+/**
+ * Determine if the given `Program` is @angular/core.
+ */
+function isAngularCorePackage(program: ts.Program): boolean {
+  // Look for its_just_angular.ts somewhere in the program.
+  const r3Symbols = getR3SymbolsFile(program);
+  if (r3Symbols === null) {
+    return false;
+  }
+
+  // Look for the constant ITS_JUST_ANGULAR in that file.
+  return r3Symbols.statements.some(stmt => {
+    // The statement must be a variable declaration statement.
+    if (!ts.isVariableStatement(stmt)) {
+      return false;
+    }
+    // It must be exported.
+    if (stmt.modifiers === undefined ||
+        !stmt.modifiers.some(mod => mod.kind === ts.SyntaxKind.ExportKeyword)) {
+      return false;
+    }
+    // It must declare ITS_JUST_ANGULAR.
+    return stmt.declarationList.declarations.some(decl => {
+      // The declaration must match the name.
+      if (!ts.isIdentifier(decl.name) || decl.name.text !== 'ITS_JUST_ANGULAR') {
+        return false;
+      }
+      // It must initialize the variable to true.
+      if (decl.initializer === undefined || decl.initializer.kind !== ts.SyntaxKind.TrueKeyword) {
+        return false;
+      }
+      // This definition matches.
+      return true;
+    });
+  });
+}
diff --git a/packages/compiler-cli/src/ngtsc/resource_loader.ts b/packages/compiler-cli/src/ngtsc/resource_loader.ts
new file mode 100644
index 000000000000..ea54032e3cc4
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/resource_loader.ts
@@ -0,0 +1,59 @@
+/**
+ * @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 fs from 'fs';
+
+import {ResourceLoader} from './annotations';
+
+/**
+ * `ResourceLoader` which delegates to a `CompilerHost` resource loading method.
+ */
+export class HostResourceLoader implements ResourceLoader {
+  private cache = new Map<string, string>();
+  private fetching = new Set<string>();
+
+  constructor(private host: (url: string) => string | Promise<string>) {}
+
+  preload(url: string): Promise<void>|undefined {
+    if (this.cache.has(url) || this.fetching.has(url)) {
+      return undefined;
+    }
+
+    const result = this.host(url);
+    if (typeof result === 'string') {
+      this.cache.set(url, result);
+      return undefined;
+    } else {
+      this.fetching.add(url);
+      return result.then(str => {
+        this.fetching.delete(url);
+        this.cache.set(url, str);
+      });
+    }
+  }
+
+  load(url: string): string {
+    if (this.cache.has(url)) {
+      return this.cache.get(url) !;
+    }
+
+    const result = this.host(url);
+    if (typeof result !== 'string') {
+      throw new Error(`HostResourceLoader: host(${url}) returned a Promise`);
+    }
+    this.cache.set(url, result);
+    return result;
+  }
+}
+
+/**
+ * `ResourceLoader` which directly uses the filesystem to resolve resources synchronously.
+ */
+export class FileResourceLoader implements ResourceLoader {
+  load(url: string): string { return fs.readFileSync(url, 'utf8'); }
+}
diff --git a/packages/compiler-cli/src/ngtsc/testing/BUILD.bazel b/packages/compiler-cli/src/ngtsc/testing/BUILD.bazel
new file mode 100644
index 000000000000..9396da86caea
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/testing/BUILD.bazel
@@ -0,0 +1,15 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "testing",
+    testonly = 1,
+    srcs = glob([
+        "**/*.ts",
+    ]),
+    deps = [
+        "//packages:types",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngtsc/testing/in_memory_typescript.ts b/packages/compiler-cli/src/ngtsc/testing/in_memory_typescript.ts
new file mode 100644
index 000000000000..b76ab4724aef
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/testing/in_memory_typescript.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 * as path from 'path';
+import * as ts from 'typescript';
+
+export function makeProgram(
+    files: {name: string, contents: string}[],
+    options?: ts.CompilerOptions): {program: ts.Program, host: ts.CompilerHost} {
+  const host = new InMemoryHost();
+  files.forEach(file => host.writeFile(file.name, file.contents));
+
+  const rootNames = files.map(file => host.getCanonicalFileName(file.name));
+  const program = ts.createProgram(
+      rootNames, {
+        noLib: true,
+        experimentalDecorators: true,
+        moduleResolution: ts.ModuleResolutionKind.NodeJs, ...options
+      },
+      host);
+  const diags = [...program.getSyntacticDiagnostics(), ...program.getSemanticDiagnostics()];
+  if (diags.length > 0) {
+    const errors = diags.map(diagnostic => {
+      let message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
+      if (diagnostic.file) {
+        const {line, character} = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start !);
+        message = `${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`;
+      }
+      return `Error: ${message}`;
+    });
+    throw new Error(`Typescript diagnostics failed! ${errors.join(', ')}`);
+  }
+  return {program, host};
+}
+
+export class InMemoryHost implements ts.CompilerHost {
+  private fileSystem = new Map<string, string>();
+
+  getSourceFile(
+      fileName: string, languageVersion: ts.ScriptTarget,
+      onError?: ((message: string) => void)|undefined,
+      shouldCreateNewSourceFile?: boolean|undefined): ts.SourceFile|undefined {
+    const contents = this.fileSystem.get(this.getCanonicalFileName(fileName));
+    if (contents === undefined) {
+      onError && onError(`File does not exist: ${this.getCanonicalFileName(fileName)})`);
+      return undefined;
+    }
+    return ts.createSourceFile(fileName, contents, languageVersion);
+  }
+
+  getDefaultLibFileName(options: ts.CompilerOptions): string { return '/lib.d.ts'; }
+
+  writeFile(
+      fileName: string, data: string, writeByteOrderMark?: boolean,
+      onError?: ((message: string) => void)|undefined,
+      sourceFiles?: ReadonlyArray<ts.SourceFile>): void {
+    this.fileSystem.set(this.getCanonicalFileName(fileName), data);
+  }
+
+  getCurrentDirectory(): string { return '/'; }
+
+  getDirectories(dir: string): string[] {
+    const fullDir = this.getCanonicalFileName(dir) + '/';
+    const dirSet = new Set(Array
+                               // Look at all paths known to the host.
+                               .from(this.fileSystem.keys())
+                               // Filter out those that aren't under the requested directory.
+                               .filter(candidate => candidate.startsWith(fullDir))
+                               // Relativize the rest by the requested directory.
+                               .map(candidate => candidate.substr(fullDir.length))
+                               // What's left are dir/.../file.txt entries, and file.txt entries.
+                               // Get the dirname, which
+                               // yields '.' for the latter and dir/... for the former.
+                               .map(candidate => path.dirname(candidate))
+                               // Filter out the '.' entries, which were files.
+                               .filter(candidate => candidate !== '.')
+                               // Finally, split on / and grab the first entry.
+                               .map(candidate => candidate.split('/', 1)[0]));
+
+    // Get the resulting values out of the Set.
+    return Array.from(dirSet);
+  }
+
+  getCanonicalFileName(fileName: string): string {
+    return path.posix.normalize(`${this.getCurrentDirectory()}/${fileName}`);
+  }
+
+  useCaseSensitiveFileNames(): boolean { return true; }
+
+  getNewLine(): string { return '\n'; }
+
+  fileExists(fileName: string): boolean { return this.fileSystem.has(fileName); }
+
+  readFile(fileName: string): string|undefined { return this.fileSystem.get(fileName); }
+}
+
+function bindingNameEquals(node: ts.BindingName, name: string): boolean {
+  if (ts.isIdentifier(node)) {
+    return node.text === name;
+  }
+  return false;
+}
+
+export function getDeclaration<T extends ts.Declaration>(
+    program: ts.Program, fileName: string, name: string, assert: (value: any) => value is T): T {
+  const sf = program.getSourceFile(fileName);
+  if (!sf) {
+    throw new Error(`No such file: ${fileName}`);
+  }
+
+  let chosenDecl: ts.Declaration|null = null;
+
+  sf.statements.forEach(stmt => {
+    if (chosenDecl !== null) {
+      return;
+    } else if (ts.isVariableStatement(stmt)) {
+      stmt.declarationList.declarations.forEach(decl => {
+        if (bindingNameEquals(decl.name, name)) {
+          chosenDecl = decl;
+        }
+      });
+    } else if (ts.isClassDeclaration(stmt) || ts.isFunctionDeclaration(stmt)) {
+      if (stmt.name !== undefined && stmt.name.text === name) {
+        chosenDecl = stmt;
+      }
+    }
+  });
+
+  chosenDecl = chosenDecl as ts.Declaration | null;
+
+  if (chosenDecl === null) {
+    throw new Error(`No such symbol: ${name} in ${fileName}`);
+  }
+  if (!assert(chosenDecl)) {
+    throw new Error(`Symbol ${name} from ${fileName} is a ${ts.SyntaxKind[chosenDecl.kind]}`);
+  }
+
+  return chosenDecl;
+}
diff --git a/packages/compiler-cli/src/ngtsc/transform/BUILD.bazel b/packages/compiler-cli/src/ngtsc/transform/BUILD.bazel
new file mode 100644
index 000000000000..a23b780019c9
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/transform/BUILD.bazel
@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "transform",
+    srcs = glob([
+        "index.ts",
+        "src/**/*.ts",
+    ]),
+    module_name = "@angular/compiler-cli/src/ngtsc/transform",
+    deps = [
+        "//packages/compiler",
+        "//packages/compiler-cli/src/ngtsc/host",
+        "//packages/compiler-cli/src/ngtsc/metadata",
+        "//packages/compiler-cli/src/ngtsc/util",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngtsc/transform/index.ts b/packages/compiler-cli/src/ngtsc/transform/index.ts
new file mode 100644
index 000000000000..00eea48b1350
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/transform/index.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
+ */
+
+export * from './src/api';
+export {IvyCompilation} from './src/compilation';
+export {ivyTransformFactory} from './src/transform';
+export {ImportManager, translateStatement} from './src/translator';
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngtsc/transform/src/api.ts b/packages/compiler-cli/src/ngtsc/transform/src/api.ts
new file mode 100644
index 000000000000..e4d995583c9e
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/transform/src/api.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 {ConstantPool, Expression, Statement, Type} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {Decorator} from '../../host';
+
+
+/**
+ * Provides the interface between a decorator compiler from @angular/compiler and the Typescript
+ * compiler/transform.
+ *
+ * The decorator compilers in @angular/compiler do not depend on Typescript. The handler is
+ * responsible for extracting the information required to perform compilation from the decorators
+ * and Typescript source, invoking the decorator compiler, and returning the result.
+ */
+export interface DecoratorHandler<A, M> {
+  /**
+   * Scan a set of reflected decorators and determine if this handler is responsible for compilation
+   * of one of them.
+   */
+  detect(node: ts.Declaration, decorators: Decorator[]|null): M|undefined;
+
+
+  /**
+   * Asynchronously perform pre-analysis on the decorator/class combination.
+   *
+   * `preAnalyze` is optional and is not guaranteed to be called through all compilation flows. It
+   * will only be called if asynchronicity is supported in the CompilerHost.
+   */
+  preanalyze?(node: ts.Declaration, metadata: M): Promise<void>|undefined;
+
+  /**
+   * Perform analysis on the decorator/class combination, producing instructions for compilation
+   * if successful, or an array of diagnostic messages if the analysis fails or the decorator
+   * isn't valid.
+   */
+  analyze(node: ts.Declaration, metadata: M): AnalysisOutput<A>;
+
+  /**
+   * Generate a description of the field which should be added to the class, including any
+   * initialization code to be generated.
+   */
+  compile(node: ts.Declaration, analysis: A, constantPool: ConstantPool): CompileResult
+      |CompileResult[];
+}
+
+/**
+ * The output of an analysis operation, consisting of possibly an arbitrary analysis object (used as
+ * the input to code generation) and potentially diagnostics if there were errors uncovered during
+ * analysis.
+ */
+export interface AnalysisOutput<A> {
+  analysis?: A;
+  diagnostics?: ts.Diagnostic[];
+  factorySymbolName?: string;
+}
+
+/**
+ * A description of the static field to add to a class, including an initialization expression
+ * and a type for the .d.ts file.
+ */
+export interface CompileResult {
+  name: string;
+  initializer: Expression;
+  statements: Statement[];
+  type: Type;
+}
diff --git a/packages/compiler-cli/src/ngtsc/transform/src/compilation.ts b/packages/compiler-cli/src/ngtsc/transform/src/compilation.ts
new file mode 100644
index 000000000000..6789d0e807a9
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/transform/src/compilation.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
+ */
+
+import {ConstantPool} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {Decorator, ReflectionHost} from '../../host';
+import {reflectNameOfDeclaration} from '../../metadata/src/reflector';
+
+import {AnalysisOutput, CompileResult, DecoratorHandler} from './api';
+import {DtsFileTransformer} from './declaration';
+
+/**
+ * Record of an adapter which decided to emit a static field, and the analysis it performed to
+ * prepare for that operation.
+ */
+interface EmitFieldOperation<A, M> {
+  adapter: DecoratorHandler<A, M>;
+  analysis: AnalysisOutput<A>;
+  metadata: M;
+}
+
+/**
+ * Manages a compilation of Ivy decorators into static fields across an entire ts.Program.
+ *
+ * The compilation is stateful - source files are analyzed and records of the operations that need
+ * to be performed during the transform/emit process are maintained internally.
+ */
+export class IvyCompilation {
+  /**
+   * Tracks classes which have been analyzed and found to have an Ivy decorator, and the
+   * information recorded about them for later compilation.
+   */
+  private analysis = new Map<ts.Declaration, EmitFieldOperation<any, any>>();
+
+  /**
+   * Tracks factory information which needs to be generated.
+   */
+
+  /**
+   * Tracks the `DtsFileTransformer`s for each TS file that needs .d.ts transformations.
+   */
+  private dtsMap = new Map<string, DtsFileTransformer>();
+  private _diagnostics: ts.Diagnostic[] = [];
+
+
+  /**
+   * @param handlers array of `DecoratorHandler`s which will be executed against each class in the
+   * program
+   * @param checker TypeScript `TypeChecker` instance for the program
+   * @param reflector `ReflectionHost` through which all reflection operations will be performed
+   * @param coreImportsFrom a TypeScript `SourceFile` which exports symbols needed for Ivy imports
+   * when compiling @angular/core, or `null` if the current program is not @angular/core. This is
+   * `null` in most cases.
+   */
+  constructor(
+      private handlers: DecoratorHandler<any, any>[], private checker: ts.TypeChecker,
+      private reflector: ReflectionHost, private coreImportsFrom: ts.SourceFile|null,
+      private sourceToFactorySymbols: Map<string, Set<string>>|null) {}
+
+
+  analyzeSync(sf: ts.SourceFile): void { return this.analyze(sf, false); }
+
+  analyzeAsync(sf: ts.SourceFile): Promise<void>|undefined { return this.analyze(sf, true); }
+
+  /**
+   * Analyze a source file and produce diagnostics for it (if any).
+   */
+  private analyze(sf: ts.SourceFile, preanalyze: false): undefined;
+  private analyze(sf: ts.SourceFile, preanalyze: true): Promise<void>|undefined;
+  private analyze(sf: ts.SourceFile, preanalyze: boolean): Promise<void>|undefined {
+    const promises: Promise<void>[] = [];
+
+    const analyzeClass = (node: ts.Declaration): void => {
+      // The first step is to reflect the decorators.
+      const classDecorators = this.reflector.getDecoratorsOfDeclaration(node);
+
+      // Look through the DecoratorHandlers to see if any are relevant.
+      this.handlers.forEach(adapter => {
+
+        // An adapter is relevant if it matches one of the decorators on the class.
+        const metadata = adapter.detect(node, classDecorators);
+        if (metadata === undefined) {
+          return;
+        }
+
+        const completeAnalysis = () => {
+          // Check for multiple decorators on the same node. Technically speaking this
+          // could be supported, but right now it's an error.
+          if (this.analysis.has(node)) {
+            throw new Error('TODO.Diagnostic: Class has multiple Angular decorators.');
+          }
+
+          // Run analysis on the metadata. This will produce either diagnostics, an
+          // analysis result, or both.
+          const analysis = adapter.analyze(node, metadata);
+
+          if (analysis.analysis !== undefined) {
+            this.analysis.set(node, {
+              adapter,
+              analysis: analysis.analysis,
+              metadata: metadata,
+            });
+          }
+
+          if (analysis.diagnostics !== undefined) {
+            this._diagnostics.push(...analysis.diagnostics);
+          }
+
+          if (analysis.factorySymbolName !== undefined && this.sourceToFactorySymbols !== null &&
+              this.sourceToFactorySymbols.has(sf.fileName)) {
+            this.sourceToFactorySymbols.get(sf.fileName) !.add(analysis.factorySymbolName);
+          }
+        };
+
+        if (preanalyze && adapter.preanalyze !== undefined) {
+          const preanalysis = adapter.preanalyze(node, metadata);
+          if (preanalysis !== undefined) {
+            promises.push(preanalysis.then(() => completeAnalysis()));
+          } else {
+            completeAnalysis();
+          }
+        } else {
+          completeAnalysis();
+        }
+      });
+    };
+
+    const visit = (node: ts.Node): void => {
+      // Process nodes recursively, and look for class declarations with decorators.
+      if (ts.isClassDeclaration(node)) {
+        analyzeClass(node);
+      }
+      ts.forEachChild(node, visit);
+    };
+
+    visit(sf);
+
+    if (preanalyze && promises.length > 0) {
+      return Promise.all(promises).then(() => undefined);
+    } else {
+      return undefined;
+    }
+  }
+
+  /**
+   * Perform a compilation operation on the given class declaration and return instructions to an
+   * AST transformer if any are available.
+   */
+  compileIvyFieldFor(node: ts.Declaration, constantPool: ConstantPool): CompileResult[]|undefined {
+    // Look to see whether the original node was analyzed. If not, there's nothing to do.
+    const original = ts.getOriginalNode(node) as ts.Declaration;
+    if (!this.analysis.has(original)) {
+      return undefined;
+    }
+    const op = this.analysis.get(original) !;
+
+    // Run the actual compilation, which generates an Expression for the Ivy field.
+    let res: CompileResult|CompileResult[] = op.adapter.compile(node, op.analysis, constantPool);
+    if (!Array.isArray(res)) {
+      res = [res];
+    }
+
+    // Look up the .d.ts transformer for the input file and record that a field was generated,
+    // which will allow the .d.ts to be transformed later.
+    const fileName = original.getSourceFile().fileName;
+    const dtsTransformer = this.getDtsTransformer(fileName);
+    dtsTransformer.recordStaticField(reflectNameOfDeclaration(node) !, res);
+
+    // Return the instruction to the transformer so the field will be added.
+    return res;
+  }
+
+  /**
+   * Lookup the `ts.Decorator` which triggered transformation of a particular class declaration.
+   */
+  ivyDecoratorFor(node: ts.Declaration): Decorator|undefined {
+    const original = ts.getOriginalNode(node) as ts.Declaration;
+    if (!this.analysis.has(original)) {
+      return undefined;
+    }
+
+    return this.analysis.get(original) !.metadata;
+  }
+
+  /**
+   * Process a .d.ts source string and return a transformed version that incorporates the changes
+   * made to the source file.
+   */
+  transformedDtsFor(tsFileName: string, dtsOriginalSource: string, dtsPath: string): string {
+    // No need to transform if no changes have been requested to the input file.
+    if (!this.dtsMap.has(tsFileName)) {
+      return dtsOriginalSource;
+    }
+
+    // Return the transformed .d.ts source.
+    return this.dtsMap.get(tsFileName) !.transform(dtsOriginalSource, tsFileName);
+  }
+
+  get diagnostics(): ReadonlyArray<ts.Diagnostic> { return this._diagnostics; }
+
+  private getDtsTransformer(tsFileName: string): DtsFileTransformer {
+    if (!this.dtsMap.has(tsFileName)) {
+      this.dtsMap.set(tsFileName, new DtsFileTransformer(this.coreImportsFrom));
+    }
+    return this.dtsMap.get(tsFileName) !;
+  }
+}
diff --git a/packages/compiler-cli/src/ngtsc/transform/src/declaration.ts b/packages/compiler-cli/src/ngtsc/transform/src/declaration.ts
new file mode 100644
index 000000000000..fbb4cee703fc
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/transform/src/declaration.ts
@@ -0,0 +1,67 @@
+/**
+ * @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 ts from 'typescript';
+
+import {relativePathBetween} from '../../util/src/path';
+
+import {CompileResult} from './api';
+import {ImportManager, translateType} from './translator';
+
+
+
+/**
+ * Processes .d.ts file text and adds static field declarations, with types.
+ */
+export class DtsFileTransformer {
+  private ivyFields = new Map<string, CompileResult[]>();
+  private imports: ImportManager;
+
+  constructor(private coreImportsFrom: ts.SourceFile|null) {
+    this.imports = new ImportManager(coreImportsFrom !== null);
+  }
+
+  /**
+   * Track that a static field was added to the code for a class.
+   */
+  recordStaticField(name: string, decls: CompileResult[]): void { this.ivyFields.set(name, decls); }
+
+  /**
+   * Process the .d.ts text for a file and add any declarations which were recorded.
+   */
+  transform(dts: string, tsPath: string): string {
+    const dtsFile =
+        ts.createSourceFile('out.d.ts', dts, ts.ScriptTarget.Latest, false, ts.ScriptKind.TS);
+
+    for (let i = dtsFile.statements.length - 1; i >= 0; i--) {
+      const stmt = dtsFile.statements[i];
+      if (ts.isClassDeclaration(stmt) && stmt.name !== undefined &&
+          this.ivyFields.has(stmt.name.text)) {
+        const decls = this.ivyFields.get(stmt.name.text) !;
+        const before = dts.substring(0, stmt.end - 1);
+        const after = dts.substring(stmt.end - 1);
+
+        dts = before +
+            decls
+                .map(decl => {
+                  const type = translateType(decl.type, this.imports);
+                  return `    static ${decl.name}: ${type};\n`;
+                })
+                .join('') +
+            after;
+      }
+    }
+
+    const imports = this.imports.getAllImports(tsPath, this.coreImportsFrom);
+    if (imports.length !== 0) {
+      dts = imports.map(i => `import * as ${i.as} from '${i.name}';\n`).join('') + dts;
+    }
+
+    return dts;
+  }
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngtsc/transform/src/transform.ts b/packages/compiler-cli/src/ngtsc/transform/src/transform.ts
new file mode 100644
index 000000000000..429ba92b4496
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/transform/src/transform.ts
@@ -0,0 +1,246 @@
+/**
+ * @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 {ConstantPool} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {Decorator, ReflectionHost} from '../../host';
+import {relativePathBetween} from '../../util/src/path';
+import {VisitListEntryResult, Visitor, visit} from '../../util/src/visitor';
+
+import {CompileResult} from './api';
+import {IvyCompilation} from './compilation';
+import {ImportManager, translateExpression, translateStatement} from './translator';
+
+const NO_DECORATORS = new Set<ts.Decorator>();
+
+export function ivyTransformFactory(
+    compilation: IvyCompilation, reflector: ReflectionHost,
+    coreImportsFrom: ts.SourceFile | null): ts.TransformerFactory<ts.SourceFile> {
+  return (context: ts.TransformationContext): ts.Transformer<ts.SourceFile> => {
+    return (file: ts.SourceFile): ts.SourceFile => {
+      return transformIvySourceFile(compilation, context, reflector, coreImportsFrom, file);
+    };
+  };
+}
+
+class IvyVisitor extends Visitor {
+  constructor(
+      private compilation: IvyCompilation, private reflector: ReflectionHost,
+      private importManager: ImportManager, private isCore: boolean,
+      private constantPool: ConstantPool) {
+    super();
+  }
+
+  visitClassDeclaration(node: ts.ClassDeclaration):
+      VisitListEntryResult<ts.Statement, ts.ClassDeclaration> {
+    // Determine if this class has an Ivy field that needs to be added, and compile the field
+    // to an expression if so.
+    const res = this.compilation.compileIvyFieldFor(node, this.constantPool);
+
+    if (res !== undefined) {
+      // There is at least one field to add.
+      const statements: ts.Statement[] = [];
+      const members = [...node.members];
+
+      res.forEach(field => {
+        // Translate the initializer for the field into TS nodes.
+        const exprNode = translateExpression(field.initializer, this.importManager);
+
+        // Create a static property declaration for the new field.
+        const property = ts.createProperty(
+            undefined, [ts.createToken(ts.SyntaxKind.StaticKeyword)], field.name, undefined,
+            undefined, exprNode);
+
+        field.statements.map(stmt => translateStatement(stmt, this.importManager))
+            .forEach(stmt => statements.push(stmt));
+
+        members.push(property);
+      });
+
+      // Replace the class declaration with an updated version.
+      node = ts.updateClassDeclaration(
+          node,
+          // Remove the decorator which triggered this compilation, leaving the others alone.
+          maybeFilterDecorator(
+              node.decorators, this.compilation.ivyDecoratorFor(node) !.node as ts.Decorator),
+          node.modifiers, node.name, node.typeParameters, node.heritageClauses || [],
+          // Map over the class members and remove any Angular decorators from them.
+          members.map(member => this._stripAngularDecorators(member)));
+      return {node, after: statements};
+    }
+
+    return {node};
+  }
+
+  /**
+   * Return all decorators on a `Declaration` which are from @angular/core, or an empty set if none
+   * are.
+   */
+  private _angularCoreDecorators(decl: ts.Declaration): Set<ts.Decorator> {
+    const decorators = this.reflector.getDecoratorsOfDeclaration(decl);
+    if (decorators === null) {
+      return NO_DECORATORS;
+    }
+    const coreDecorators = decorators.filter(dec => this.isCore || isFromAngularCore(dec))
+                               .map(dec => dec.node as ts.Decorator);
+    if (coreDecorators.length > 0) {
+      return new Set<ts.Decorator>(coreDecorators);
+    } else {
+      return NO_DECORATORS;
+    }
+  }
+
+  /**
+   * Given a `ts.Node`, filter the decorators array and return a version containing only non-Angular
+   * decorators.
+   *
+   * If all decorators are removed (or none existed in the first place), this method returns
+   * `undefined`.
+   */
+  private _nonCoreDecoratorsOnly(node: ts.Declaration): ts.NodeArray<ts.Decorator>|undefined {
+    // Shortcut if the node has no decorators.
+    if (node.decorators === undefined) {
+      return undefined;
+    }
+    // Build a Set of the decorators on this node from @angular/core.
+    const coreDecorators = this._angularCoreDecorators(node);
+
+    if (coreDecorators.size === node.decorators.length) {
+      // If all decorators are to be removed, return `undefined`.
+      return undefined;
+    } else if (coreDecorators.size === 0) {
+      // If no decorators need to be removed, return the original decorators array.
+      return node.decorators;
+    }
+
+    // Filter out the core decorators.
+    const filtered = node.decorators.filter(dec => !coreDecorators.has(dec));
+
+    // If no decorators survive, return `undefined`. This can only happen if a core decorator is
+    // repeated on the node.
+    if (filtered.length === 0) {
+      return undefined;
+    }
+
+    // Create a new `NodeArray` with the filtered decorators that sourcemaps back to the original.
+    const array = ts.createNodeArray(filtered);
+    array.pos = node.decorators.pos;
+    array.end = node.decorators.end;
+    return array;
+  }
+
+  /**
+   * Remove Angular decorators from a `ts.Node` in a shallow manner.
+   *
+   * This will remove decorators from class elements (getters, setters, properties, methods) as well
+   * as parameters of constructors.
+   */
+  private _stripAngularDecorators<T extends ts.Node>(node: T): T {
+    if (ts.isParameter(node)) {
+      // Strip decorators from parameters (probably of the constructor).
+      node = ts.updateParameter(
+                 node, this._nonCoreDecoratorsOnly(node), node.modifiers, node.dotDotDotToken,
+                 node.name, node.questionToken, node.type, node.initializer) as T &
+          ts.ParameterDeclaration;
+    } else if (ts.isMethodDeclaration(node) && node.decorators !== undefined) {
+      // Strip decorators of methods.
+      node = ts.updateMethod(
+                 node, this._nonCoreDecoratorsOnly(node), node.modifiers, node.asteriskToken,
+                 node.name, node.questionToken, node.typeParameters, node.parameters, node.type,
+                 node.body) as T &
+          ts.MethodDeclaration;
+    } else if (ts.isPropertyDeclaration(node) && node.decorators !== undefined) {
+      // Strip decorators of properties.
+      node = ts.updateProperty(
+                 node, this._nonCoreDecoratorsOnly(node), node.modifiers, node.name,
+                 node.questionToken, node.type, node.initializer) as T &
+          ts.PropertyDeclaration;
+    } else if (ts.isGetAccessor(node)) {
+      // Strip decorators of getters.
+      node = ts.updateGetAccessor(
+                 node, this._nonCoreDecoratorsOnly(node), node.modifiers, node.name,
+                 node.parameters, node.type, node.body) as T &
+          ts.GetAccessorDeclaration;
+    } else if (ts.isSetAccessor(node)) {
+      // Strip decorators of setters.
+      node = ts.updateSetAccessor(
+                 node, this._nonCoreDecoratorsOnly(node), node.modifiers, node.name,
+                 node.parameters, node.body) as T &
+          ts.SetAccessorDeclaration;
+    } else if (ts.isConstructorDeclaration(node)) {
+      // For constructors, strip decorators of the parameters.
+      const parameters = node.parameters.map(param => this._stripAngularDecorators(param));
+      node =
+          ts.updateConstructor(node, node.decorators, node.modifiers, parameters, node.body) as T &
+          ts.ConstructorDeclaration;
+    }
+    return node;
+  }
+}
+
+/**
+ * A transformer which operates on ts.SourceFiles and applies changes from an `IvyCompilation`.
+ */
+function transformIvySourceFile(
+    compilation: IvyCompilation, context: ts.TransformationContext, reflector: ReflectionHost,
+    coreImportsFrom: ts.SourceFile | null, file: ts.SourceFile): ts.SourceFile {
+  const constantPool = new ConstantPool();
+  const importManager = new ImportManager(coreImportsFrom !== null);
+
+  // Recursively scan through the AST and perform any updates requested by the IvyCompilation.
+  const visitor =
+      new IvyVisitor(compilation, reflector, importManager, coreImportsFrom !== null, constantPool);
+  const sf = visit(file, visitor, context);
+
+  // Generate the constant statements first, as they may involve adding additional imports
+  // to the ImportManager.
+  const constants = constantPool.statements.map(stmt => translateStatement(stmt, importManager));
+
+  // Generate the import statements to prepend.
+  const addedImports = importManager.getAllImports(file.fileName, coreImportsFrom).map(i => {
+    return ts.createImportDeclaration(
+        undefined, undefined,
+        ts.createImportClause(undefined, ts.createNamespaceImport(ts.createIdentifier(i.as))),
+        ts.createLiteral(i.name));
+  });
+
+  // Filter out the existing imports and the source file body. All new statements
+  // will be inserted between them.
+  const existingImports = sf.statements.filter(stmt => isImportStatement(stmt));
+  const body = sf.statements.filter(stmt => !isImportStatement(stmt));
+
+  // Prepend imports if needed.
+  if (addedImports.length > 0) {
+    sf.statements =
+        ts.createNodeArray([...existingImports, ...addedImports, ...constants, ...body]);
+  }
+  return sf;
+}
+
+function maybeFilterDecorator(
+    decorators: ts.NodeArray<ts.Decorator>| undefined,
+    toRemove: ts.Decorator): ts.NodeArray<ts.Decorator>|undefined {
+  if (decorators === undefined) {
+    return undefined;
+  }
+  const filtered = decorators.filter(dec => ts.getOriginalNode(dec) !== toRemove);
+  if (filtered.length === 0) {
+    return undefined;
+  }
+  return ts.createNodeArray(filtered);
+}
+
+function isFromAngularCore(decorator: Decorator): boolean {
+  return decorator.import !== null && decorator.import.from === '@angular/core';
+}
+
+function isImportStatement(stmt: ts.Statement): boolean {
+  return ts.isImportDeclaration(stmt) || ts.isImportEqualsDeclaration(stmt) ||
+      ts.isNamespaceImport(stmt);
+}
diff --git a/packages/compiler-cli/src/ngtsc/transform/src/translator.ts b/packages/compiler-cli/src/ngtsc/transform/src/translator.ts
new file mode 100644
index 000000000000..dc4b69c1f268
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/transform/src/translator.ts
@@ -0,0 +1,437 @@
+/**
+ * @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 {ArrayType, AssertNotNull, BinaryOperator, BinaryOperatorExpr, BuiltinType, BuiltinTypeName, CastExpr, ClassStmt, CommaExpr, CommentStmt, ConditionalExpr, DeclareFunctionStmt, DeclareVarStmt, Expression, ExpressionStatement, ExpressionType, ExpressionVisitor, ExternalExpr, ExternalReference, FunctionExpr, IfStmt, InstantiateExpr, InvokeFunctionExpr, InvokeMethodExpr, JSDocCommentStmt, LiteralArrayExpr, LiteralExpr, LiteralMapExpr, MapType, NotExpr, ReadKeyExpr, ReadPropExpr, ReadVarExpr, ReturnStatement, Statement, StatementVisitor, StmtModifier, ThrowStmt, TryCatchStmt, Type, TypeVisitor, TypeofExpr, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {relativePathBetween} from '../../util/src/path';
+
+export class Context {
+  constructor(readonly isStatement: boolean) {}
+
+  get withExpressionMode(): Context { return this.isStatement ? new Context(false) : this; }
+
+  get withStatementMode(): Context { return this.isStatement ? new Context(true) : this; }
+}
+
+const BINARY_OPERATORS = new Map<BinaryOperator, ts.BinaryOperator>([
+  [BinaryOperator.And, ts.SyntaxKind.AmpersandAmpersandToken],
+  [BinaryOperator.Bigger, ts.SyntaxKind.GreaterThanToken],
+  [BinaryOperator.BiggerEquals, ts.SyntaxKind.GreaterThanEqualsToken],
+  [BinaryOperator.BitwiseAnd, ts.SyntaxKind.AmpersandToken],
+  [BinaryOperator.Divide, ts.SyntaxKind.SlashToken],
+  [BinaryOperator.Equals, ts.SyntaxKind.EqualsEqualsToken],
+  [BinaryOperator.Identical, ts.SyntaxKind.EqualsEqualsEqualsToken],
+  [BinaryOperator.Lower, ts.SyntaxKind.LessThanToken],
+  [BinaryOperator.LowerEquals, ts.SyntaxKind.LessThanEqualsToken],
+  [BinaryOperator.Minus, ts.SyntaxKind.MinusToken],
+  [BinaryOperator.Modulo, ts.SyntaxKind.PercentToken],
+  [BinaryOperator.Multiply, ts.SyntaxKind.AsteriskToken],
+  [BinaryOperator.NotEquals, ts.SyntaxKind.ExclamationEqualsToken],
+  [BinaryOperator.NotIdentical, ts.SyntaxKind.ExclamationEqualsEqualsToken],
+  [BinaryOperator.Or, ts.SyntaxKind.BarBarToken],
+  [BinaryOperator.Plus, ts.SyntaxKind.PlusToken],
+]);
+
+const CORE_SUPPORTED_SYMBOLS = new Set<string>([
+  'defineInjectable',
+  'defineInjector',
+  'ɵdefineNgModule',
+  'inject',
+  'ɵInjectableDef',
+  'ɵInjectorDef',
+  'ɵNgModuleDef',
+  'ɵNgModuleFactory',
+]);
+
+export class ImportManager {
+  private moduleToIndex = new Map<string, string>();
+  private nextIndex = 0;
+
+  constructor(private isCore: boolean, private prefix = 'i') {}
+
+  generateNamedImport(moduleName: string, symbol: string): string {
+    if (!this.moduleToIndex.has(moduleName)) {
+      this.moduleToIndex.set(moduleName, `${this.prefix}${this.nextIndex++}`);
+    }
+    if (this.isCore && moduleName === '@angular/core' && !CORE_SUPPORTED_SYMBOLS.has(symbol)) {
+      throw new Error(`Importing unexpected symbol ${symbol} while compiling core`);
+    }
+    return this.moduleToIndex.get(moduleName) !;
+  }
+
+  getAllImports(contextPath: string, rewriteCoreImportsTo: ts.SourceFile|null):
+      {name: string, as: string}[] {
+    return Array.from(this.moduleToIndex.keys()).map(name => {
+      const as: string|null = this.moduleToIndex.get(name) !;
+      if (rewriteCoreImportsTo !== null && name === '@angular/core') {
+        const relative = relativePathBetween(contextPath, rewriteCoreImportsTo.fileName);
+        if (relative === null) {
+          throw new Error(
+              `Failed to rewrite import inside core: ${contextPath} -> ${rewriteCoreImportsTo.fileName}`);
+        }
+        name = relative;
+      }
+      return {name, as};
+    });
+  }
+}
+
+export function translateExpression(expression: Expression, imports: ImportManager): ts.Expression {
+  return expression.visitExpression(new ExpressionTranslatorVisitor(imports), new Context(false));
+}
+
+export function translateStatement(statement: Statement, imports: ImportManager): ts.Statement {
+  return statement.visitStatement(new ExpressionTranslatorVisitor(imports), new Context(true));
+}
+
+export function translateType(type: Type, imports: ImportManager): string {
+  return type.visitType(new TypeTranslatorVisitor(imports), new Context(false));
+}
+
+class ExpressionTranslatorVisitor implements ExpressionVisitor, StatementVisitor {
+  constructor(private imports: ImportManager) {}
+
+  visitDeclareVarStmt(stmt: DeclareVarStmt, context: Context): ts.VariableStatement {
+    const nodeFlags = stmt.hasModifier(StmtModifier.Final) ? ts.NodeFlags.Const : ts.NodeFlags.None;
+    return ts.createVariableStatement(
+        undefined, ts.createVariableDeclarationList(
+                       [ts.createVariableDeclaration(
+                           stmt.name, undefined, stmt.value &&
+                               stmt.value.visitExpression(this, context.withExpressionMode))],
+                       nodeFlags));
+  }
+
+  visitDeclareFunctionStmt(stmt: DeclareFunctionStmt, context: Context): ts.FunctionDeclaration {
+    return ts.createFunctionDeclaration(
+        undefined, undefined, undefined, stmt.name, undefined,
+        stmt.params.map(param => ts.createParameter(undefined, undefined, undefined, param.name)),
+        undefined, ts.createBlock(stmt.statements.map(
+                       child => child.visitStatement(this, context.withStatementMode))));
+  }
+
+  visitExpressionStmt(stmt: ExpressionStatement, context: Context): ts.ExpressionStatement {
+    return ts.createStatement(stmt.expr.visitExpression(this, context.withStatementMode));
+  }
+
+  visitReturnStmt(stmt: ReturnStatement, context: Context): ts.ReturnStatement {
+    return ts.createReturn(stmt.value.visitExpression(this, context.withExpressionMode));
+  }
+
+  visitDeclareClassStmt(stmt: ClassStmt, context: Context) {
+    throw new Error('Method not implemented.');
+  }
+
+  visitIfStmt(stmt: IfStmt, context: Context): ts.IfStatement {
+    return ts.createIf(
+        stmt.condition.visitExpression(this, context),
+        ts.createBlock(
+            stmt.trueCase.map(child => child.visitStatement(this, context.withStatementMode))),
+        stmt.falseCase.length > 0 ?
+            ts.createBlock(stmt.falseCase.map(
+                child => child.visitStatement(this, context.withStatementMode))) :
+            undefined);
+  }
+
+  visitTryCatchStmt(stmt: TryCatchStmt, context: Context) {
+    throw new Error('Method not implemented.');
+  }
+
+  visitThrowStmt(stmt: ThrowStmt, context: Context) { throw new Error('Method not implemented.'); }
+
+  visitCommentStmt(stmt: CommentStmt, context: Context): never {
+    throw new Error('Method not implemented.');
+  }
+
+  visitJSDocCommentStmt(stmt: JSDocCommentStmt, context: Context): ts.NotEmittedStatement {
+    const commentStmt = ts.createNotEmittedStatement(ts.createLiteral(''));
+    const text = stmt.toString();
+    const kind = ts.SyntaxKind.MultiLineCommentTrivia;
+    ts.setSyntheticLeadingComments(commentStmt, [{kind, text, pos: -1, end: -1}]);
+    return commentStmt;
+  }
+
+  visitReadVarExpr(ast: ReadVarExpr, context: Context): ts.Identifier {
+    return ts.createIdentifier(ast.name !);
+  }
+
+  visitWriteVarExpr(expr: WriteVarExpr, context: Context): ts.Expression {
+    const result: ts.Expression = ts.createBinary(
+        ts.createIdentifier(expr.name), ts.SyntaxKind.EqualsToken,
+        expr.value.visitExpression(this, context));
+    return context.isStatement ? result : ts.createParen(result);
+  }
+
+  visitWriteKeyExpr(expr: WriteKeyExpr, context: Context): never {
+    throw new Error('Method not implemented.');
+  }
+
+  visitWritePropExpr(expr: WritePropExpr, context: Context): ts.BinaryExpression {
+    return ts.createBinary(
+        ts.createPropertyAccess(expr.receiver.visitExpression(this, context), expr.name),
+        ts.SyntaxKind.EqualsToken, expr.value.visitExpression(this, context));
+  }
+
+  visitInvokeMethodExpr(ast: InvokeMethodExpr, context: Context): ts.CallExpression {
+    const target = ast.receiver.visitExpression(this, context);
+    return ts.createCall(
+        ast.name !== null ? ts.createPropertyAccess(target, ast.name) : target, undefined,
+        ast.args.map(arg => arg.visitExpression(this, context)));
+  }
+
+  visitInvokeFunctionExpr(ast: InvokeFunctionExpr, context: Context): ts.CallExpression {
+    return ts.createCall(
+        ast.fn.visitExpression(this, context), undefined,
+        ast.args.map(arg => arg.visitExpression(this, context)));
+  }
+
+  visitInstantiateExpr(ast: InstantiateExpr, context: Context): ts.NewExpression {
+    return ts.createNew(
+        ast.classExpr.visitExpression(this, context), undefined,
+        ast.args.map(arg => arg.visitExpression(this, context)));
+  }
+
+  visitLiteralExpr(ast: LiteralExpr, context: Context): ts.Expression {
+    if (ast.value === undefined) {
+      return ts.createIdentifier('undefined');
+    } else if (ast.value === null) {
+      return ts.createNull();
+    } else {
+      return ts.createLiteral(ast.value);
+    }
+  }
+
+  visitExternalExpr(ast: ExternalExpr, context: Context): ts.PropertyAccessExpression {
+    if (ast.value.moduleName === null || ast.value.name === null) {
+      throw new Error(`Import unknown module or symbol ${ast.value}`);
+    }
+    return ts.createPropertyAccess(
+        ts.createIdentifier(this.imports.generateNamedImport(ast.value.moduleName, ast.value.name)),
+        ts.createIdentifier(ast.value.name));
+  }
+
+  visitConditionalExpr(ast: ConditionalExpr, context: Context): ts.ParenthesizedExpression {
+    return ts.createParen(ts.createConditional(
+        ast.condition.visitExpression(this, context), ast.trueCase.visitExpression(this, context),
+        ast.falseCase !.visitExpression(this, context)));
+  }
+
+  visitNotExpr(ast: NotExpr, context: Context): ts.PrefixUnaryExpression {
+    return ts.createPrefix(
+        ts.SyntaxKind.ExclamationToken, ast.condition.visitExpression(this, context));
+  }
+
+  visitAssertNotNullExpr(ast: AssertNotNull, context: Context): ts.NonNullExpression {
+    return ts.createNonNullExpression(ast.condition.visitExpression(this, context));
+  }
+
+  visitCastExpr(ast: CastExpr, context: Context): ts.Expression {
+    return ast.value.visitExpression(this, context);
+  }
+
+  visitFunctionExpr(ast: FunctionExpr, context: Context): ts.FunctionExpression {
+    return ts.createFunctionExpression(
+        undefined, undefined, ast.name || undefined, undefined,
+        ast.params.map(
+            param => ts.createParameter(
+                undefined, undefined, undefined, param.name, undefined, undefined, undefined)),
+        undefined, ts.createBlock(ast.statements.map(stmt => stmt.visitStatement(this, context))));
+  }
+
+  visitBinaryOperatorExpr(ast: BinaryOperatorExpr, context: Context): ts.Expression {
+    if (!BINARY_OPERATORS.has(ast.operator)) {
+      throw new Error(`Unknown binary operator: ${BinaryOperator[ast.operator]}`);
+    }
+    const binEx = ts.createBinary(
+        ast.lhs.visitExpression(this, context), BINARY_OPERATORS.get(ast.operator) !,
+        ast.rhs.visitExpression(this, context));
+    return ast.parens ? ts.createParen(binEx) : binEx;
+  }
+
+  visitReadPropExpr(ast: ReadPropExpr, context: Context): ts.PropertyAccessExpression {
+    return ts.createPropertyAccess(ast.receiver.visitExpression(this, context), ast.name);
+  }
+
+  visitReadKeyExpr(ast: ReadKeyExpr, context: Context): ts.ElementAccessExpression {
+    return ts.createElementAccess(
+        ast.receiver.visitExpression(this, context), ast.index.visitExpression(this, context));
+  }
+
+  visitLiteralArrayExpr(ast: LiteralArrayExpr, context: Context): ts.ArrayLiteralExpression {
+    return ts.createArrayLiteral(ast.entries.map(expr => expr.visitExpression(this, context)));
+  }
+
+  visitLiteralMapExpr(ast: LiteralMapExpr, context: Context): ts.ObjectLiteralExpression {
+    const entries = ast.entries.map(
+        entry => ts.createPropertyAssignment(
+            entry.quoted ? ts.createLiteral(entry.key) : ts.createIdentifier(entry.key),
+            entry.value.visitExpression(this, context)));
+    return ts.createObjectLiteral(entries);
+  }
+
+  visitCommaExpr(ast: CommaExpr, context: Context): never {
+    throw new Error('Method not implemented.');
+  }
+
+  visitWrappedNodeExpr(ast: WrappedNodeExpr<any>, context: Context): any { return ast.node; }
+
+  visitTypeofExpr(ast: TypeofExpr, context: Context): ts.TypeOfExpression {
+    return ts.createTypeOf(ast.expr.visitExpression(this, context));
+  }
+}
+
+export class TypeTranslatorVisitor implements ExpressionVisitor, TypeVisitor {
+  constructor(private imports: ImportManager) {}
+
+  visitBuiltinType(type: BuiltinType, context: Context): string {
+    switch (type.name) {
+      case BuiltinTypeName.Bool:
+        return 'boolean';
+      case BuiltinTypeName.Dynamic:
+        return 'any';
+      case BuiltinTypeName.Int:
+      case BuiltinTypeName.Number:
+        return 'number';
+      case BuiltinTypeName.String:
+        return 'string';
+      case BuiltinTypeName.None:
+        return 'never';
+      default:
+        throw new Error(`Unsupported builtin type: ${BuiltinTypeName[type.name]}`);
+    }
+  }
+
+  visitExpressionType(type: ExpressionType, context: Context): string {
+    const exprStr = type.value.visitExpression(this, context);
+    if (type.typeParams !== null) {
+      const typeSegments = type.typeParams.map(param => param.visitType(this, context));
+      return `${exprStr}<${typeSegments.join(',')}>`;
+    } else {
+      return exprStr;
+    }
+  }
+
+  visitArrayType(type: ArrayType, context: Context): string {
+    return `Array<${type.visitType(this, context)}>`;
+  }
+
+  visitMapType(type: MapType, context: Context): string {
+    if (type.valueType !== null) {
+      return `{[key: string]: ${type.valueType.visitType(this, context)}}`;
+    } else {
+      return '{[key: string]: any}';
+    }
+  }
+
+  visitReadVarExpr(ast: ReadVarExpr, context: Context): string {
+    if (ast.name === null) {
+      throw new Error(`ReadVarExpr with no variable name in type`);
+    }
+    return ast.name;
+  }
+
+  visitWriteVarExpr(expr: WriteVarExpr, context: Context): never {
+    throw new Error('Method not implemented.');
+  }
+
+  visitWriteKeyExpr(expr: WriteKeyExpr, context: Context): never {
+    throw new Error('Method not implemented.');
+  }
+
+  visitWritePropExpr(expr: WritePropExpr, context: Context): never {
+    throw new Error('Method not implemented.');
+  }
+
+  visitInvokeMethodExpr(ast: InvokeMethodExpr, context: Context): never {
+    throw new Error('Method not implemented.');
+  }
+
+  visitInvokeFunctionExpr(ast: InvokeFunctionExpr, context: Context): never {
+    throw new Error('Method not implemented.');
+  }
+
+  visitInstantiateExpr(ast: InstantiateExpr, context: Context): never {
+    throw new Error('Method not implemented.');
+  }
+
+  visitLiteralExpr(ast: LiteralExpr, context: Context): string {
+    if (typeof ast.value === 'string') {
+      const escaped = ast.value.replace(/\'/g, '\\\'');
+      return `'${escaped}'`;
+    } else {
+      return `${ast.value}`;
+    }
+  }
+
+  visitExternalExpr(ast: ExternalExpr, context: Context): string {
+    if (ast.value.moduleName === null || ast.value.name === null) {
+      throw new Error(`Import unknown module or symbol`);
+    }
+    const moduleSymbol = this.imports.generateNamedImport(ast.value.moduleName, ast.value.name);
+    const base = `${moduleSymbol}.${ast.value.name}`;
+    if (ast.typeParams !== null) {
+      const generics = ast.typeParams.map(type => type.visitType(this, context)).join(', ');
+      return `${base}<${generics}>`;
+    } else {
+      return base;
+    }
+  }
+
+  visitConditionalExpr(ast: ConditionalExpr, context: Context) {
+    throw new Error('Method not implemented.');
+  }
+
+  visitNotExpr(ast: NotExpr, context: Context) { throw new Error('Method not implemented.'); }
+
+  visitAssertNotNullExpr(ast: AssertNotNull, context: Context) {
+    throw new Error('Method not implemented.');
+  }
+
+  visitCastExpr(ast: CastExpr, context: Context) { throw new Error('Method not implemented.'); }
+
+  visitFunctionExpr(ast: FunctionExpr, context: Context) {
+    throw new Error('Method not implemented.');
+  }
+
+  visitBinaryOperatorExpr(ast: BinaryOperatorExpr, context: Context) {
+    throw new Error('Method not implemented.');
+  }
+
+  visitReadPropExpr(ast: ReadPropExpr, context: Context) {
+    throw new Error('Method not implemented.');
+  }
+
+  visitReadKeyExpr(ast: ReadKeyExpr, context: Context) {
+    throw new Error('Method not implemented.');
+  }
+
+  visitLiteralArrayExpr(ast: LiteralArrayExpr, context: Context): string {
+    const values = ast.entries.map(expr => expr.visitExpression(this, context));
+    return `[${values.join(',')}]`;
+  }
+
+  visitLiteralMapExpr(ast: LiteralMapExpr, context: Context) {
+    throw new Error('Method not implemented.');
+  }
+
+  visitCommaExpr(ast: CommaExpr, context: Context) { throw new Error('Method not implemented.'); }
+
+  visitWrappedNodeExpr(ast: WrappedNodeExpr<any>, context: Context) {
+    const node: ts.Node = ast.node;
+    if (ts.isIdentifier(node)) {
+      return node.text;
+    } else {
+      throw new Error(
+          `Unsupported WrappedNodeExpr in TypeTranslatorVisitor: ${ts.SyntaxKind[node.kind]}`);
+    }
+  }
+
+  visitTypeofExpr(ast: TypeofExpr, context: Context): string {
+    return `typeof ${ast.expr.visitExpression(this, context)}`;
+  }
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngtsc/util/BUILD.bazel b/packages/compiler-cli/src/ngtsc/util/BUILD.bazel
new file mode 100644
index 000000000000..b8c65905d354
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/util/BUILD.bazel
@@ -0,0 +1,15 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "util",
+    srcs = glob([
+        "index.ts",
+        "src/**/*.ts",
+    ]),
+    module_name = "@angular/compiler-cli/src/ngtsc/util",
+    deps = [
+        "//packages:types",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngtsc/util/src/path.ts b/packages/compiler-cli/src/ngtsc/util/src/path.ts
new file mode 100644
index 000000000000..841008339629
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/util/src/path.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 * as path from 'path';
+
+const TS_DTS_EXTENSION = /(\.d)?\.ts$/;
+
+export function relativePathBetween(from: string, to: string): string|null {
+  let relative = path.posix.relative(path.dirname(from), to).replace(TS_DTS_EXTENSION, '');
+
+  if (relative === '') {
+    return null;
+  }
+
+  // path.relative() does not include the leading './'.
+  if (!relative.startsWith('.')) {
+    relative = `./${relative}`;
+  }
+
+  return relative;
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/ngtsc/util/src/visitor.ts b/packages/compiler-cli/src/ngtsc/util/src/visitor.ts
new file mode 100644
index 000000000000..2c96f9304c96
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/util/src/visitor.ts
@@ -0,0 +1,131 @@
+/**
+ * @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 ts from 'typescript';
+
+/**
+ * Result type of visiting a node that's typically an entry in a list, which allows specifying that
+ * nodes should be added before the visited node in the output.
+ */
+export type VisitListEntryResult<B extends ts.Node, T extends B> = {
+  node: T,
+  before?: B[],
+  after?: B[],
+};
+
+/**
+ * Visit a node with the given visitor and return a transformed copy.
+ */
+export function visit<T extends ts.Node>(
+    node: T, visitor: Visitor, context: ts.TransformationContext): T {
+  return visitor._visit(node, context);
+}
+
+/**
+ * Abstract base class for visitors, which processes certain nodes specially to allow insertion
+ * of other nodes before them.
+ */
+export abstract class Visitor {
+  /**
+   * Maps statements to an array of statements that should be inserted before them.
+   */
+  private _before = new Map<ts.Node, ts.Statement[]>();
+
+  /**
+   * Maps statements to an array of statements that should be inserted after them.
+   */
+  private _after = new Map<ts.Node, ts.Statement[]>();
+
+  /**
+   * Visit a class declaration, returning at least the transformed declaration and optionally other
+   * nodes to insert before the declaration.
+   */
+  visitClassDeclaration(node: ts.ClassDeclaration):
+      VisitListEntryResult<ts.Statement, ts.ClassDeclaration> {
+    return {node};
+  }
+
+  private _visitListEntryNode<T extends ts.Statement>(
+      node: T, visitor: (node: T) => VisitListEntryResult<ts.Statement, T>): T {
+    const result = visitor(node);
+    if (result.before !== undefined) {
+      // Record that some nodes should be inserted before the given declaration. The declaration's
+      // parent's _visit call is responsible for performing this insertion.
+      this._before.set(result.node, result.before);
+    }
+    if (result.after !== undefined) {
+      // Same with nodes that should be inserted after.
+      this._after.set(result.node, result.after);
+    }
+    return result.node;
+  }
+
+  /**
+   * Visit types of nodes which don't have their own explicit visitor.
+   */
+  visitOtherNode<T extends ts.Node>(node: T): T { return node; }
+
+  /**
+   * @internal
+   */
+  _visit<T extends ts.Node>(node: T, context: ts.TransformationContext): T {
+    // First, visit the node. visitedNode starts off as `null` but should be set after visiting
+    // is completed.
+    let visitedNode: T|null = null;
+
+    node = ts.visitEachChild(node, child => this._visit(child, context), context) as T;
+
+    if (ts.isClassDeclaration(node)) {
+      visitedNode = this._visitListEntryNode(
+          node, (node: ts.ClassDeclaration) => this.visitClassDeclaration(node)) as typeof node;
+    } else {
+      visitedNode = this.visitOtherNode(node);
+    }
+
+    // If the visited node has a `statements` array then process them, maybe replacing the visited
+    // node and adding additional statements.
+    if (hasStatements(visitedNode)) {
+      visitedNode = this._maybeProcessStatements(visitedNode);
+    }
+
+    return visitedNode;
+  }
+
+  private _maybeProcessStatements<T extends ts.Node&{statements: ts.NodeArray<ts.Statement>}>(
+      node: T): T {
+    // Shortcut - if every statement doesn't require nodes to be prepended or appended,
+    // this is a no-op.
+    if (node.statements.every(stmt => !this._before.has(stmt) && !this._after.has(stmt))) {
+      return node;
+    }
+
+    // There are statements to prepend, so clone the original node.
+    const clone = ts.getMutableClone(node);
+
+    // Build a new list of statements and patch it onto the clone.
+    const newStatements: ts.Statement[] = [];
+    clone.statements.forEach(stmt => {
+      if (this._before.has(stmt)) {
+        newStatements.push(...(this._before.get(stmt) !as ts.Statement[]));
+        this._before.delete(stmt);
+      }
+      newStatements.push(stmt);
+      if (this._after.has(stmt)) {
+        newStatements.push(...(this._after.get(stmt) !as ts.Statement[]));
+        this._after.delete(stmt);
+      }
+    });
+    clone.statements = ts.createNodeArray(newStatements, node.statements.hasTrailingComma);
+    return clone;
+  }
+}
+
+function hasStatements(node: ts.Node): node is ts.Node&{statements: ts.NodeArray<ts.Statement>} {
+  const block = node as{statements?: any};
+  return block.statements !== undefined && Array.isArray(block.statements);
+}
diff --git a/packages/compiler-cli/src/ngtsc/util/test/BUILD.bazel b/packages/compiler-cli/src/ngtsc/util/test/BUILD.bazel
new file mode 100644
index 000000000000..21637b1b0358
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/util/test/BUILD.bazel
@@ -0,0 +1,26 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob([
+        "**/*.ts",
+    ]),
+    deps = [
+        "//packages:types",
+        "//packages/compiler-cli/src/ngtsc/testing",
+        "//packages/compiler-cli/src/ngtsc/util",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_no_angular_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node_no_angular",
+    ],
+)
diff --git a/packages/compiler-cli/src/ngtsc/util/test/visitor_spec.ts b/packages/compiler-cli/src/ngtsc/util/test/visitor_spec.ts
new file mode 100644
index 000000000000..9fd8641508bf
--- /dev/null
+++ b/packages/compiler-cli/src/ngtsc/util/test/visitor_spec.ts
@@ -0,0 +1,94 @@
+/**
+ * @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 ts from 'typescript';
+
+import {makeProgram} from '../../testing/in_memory_typescript';
+import {VisitListEntryResult, Visitor, visit} from '../src/visitor';
+
+class TestAstVisitor extends Visitor {
+  visitClassDeclaration(node: ts.ClassDeclaration):
+      VisitListEntryResult<ts.Statement, ts.ClassDeclaration> {
+    const name = node.name !.text;
+    const statics =
+        node.members.filter(member => (member.modifiers as ReadonlyArray<ts.Modifier>|| [
+                                      ]).some(mod => mod.kind === ts.SyntaxKind.StaticKeyword));
+    const idStatic = statics
+                         .find(
+                             el => ts.isPropertyDeclaration(el) && ts.isIdentifier(el.name) &&
+                                 el.name.text === 'id') as ts.PropertyDeclaration |
+        undefined;
+    if (idStatic !== undefined) {
+      return {
+        node,
+        before: [
+          ts.createVariableStatement(
+              undefined,
+              [
+                ts.createVariableDeclaration(`${name}_id`, undefined, idStatic.initializer),
+              ]),
+        ],
+      };
+    }
+    return {node};
+  }
+}
+
+function testTransformerFactory(context: ts.TransformationContext): ts.Transformer<ts.SourceFile> {
+  return (file: ts.SourceFile) => visit(file, new TestAstVisitor(), context);
+}
+
+describe('AST Visitor', () => {
+  it('should add a statement before class in plain file', () => {
+    const {program, host} =
+        makeProgram([{name: 'main.ts', contents: `class A { static id = 3; }`}]);
+    const sf = program.getSourceFile('main.ts') !;
+    program.emit(sf, undefined, undefined, undefined, {before: [testTransformerFactory]});
+    const main = host.readFile('/main.js');
+    expect(main).toMatch(/^var A_id = 3;/);
+  });
+
+  it('should add a statement before class inside function definition', () => {
+    const {program, host} = makeProgram([{
+      name: 'main.ts',
+      contents: `
+      export function foo() {
+        var x = 3;
+        class A { static id = 2; }
+        return A;
+      }
+    `
+    }]);
+    const sf = program.getSourceFile('main.ts') !;
+    program.emit(sf, undefined, undefined, undefined, {before: [testTransformerFactory]});
+    const main = host.readFile('/main.js');
+    expect(main).toMatch(/var x = 3;\s+var A_id = 2;\s+var A =/);
+  });
+
+  it('handles nested statements', () => {
+    const {program, host} = makeProgram([{
+      name: 'main.ts',
+      contents: `
+      export class A {
+        static id = 3;
+
+        foo() {
+          class B {
+            static id = 4;
+          }
+          return B;
+        }
+    }`
+    }]);
+    const sf = program.getSourceFile('main.ts') !;
+    program.emit(sf, undefined, undefined, undefined, {before: [testTransformerFactory]});
+    const main = host.readFile('/main.js');
+    expect(main).toMatch(/var A_id = 3;\s+var A = /);
+    expect(main).toMatch(/var B_id = 4;\s+var B = /);
+  });
+});
diff --git a/packages/compiler-cli/src/perform_compile.ts b/packages/compiler-cli/src/perform_compile.ts
new file mode 100644
index 000000000000..9335dc525b37
--- /dev/null
+++ b/packages/compiler-cli/src/perform_compile.ts
@@ -0,0 +1,280 @@
+/**
+ * @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 {Position, isSyntaxError, syntaxError} from '@angular/compiler';
+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';
+import {createMessageDiagnostic} from './transformers/util';
+
+const TS_EXT = /\.ts$/;
+
+export type Diagnostics = ReadonlyArray<ts.Diagnostic|api.Diagnostic>;
+
+export function filterErrorsAndWarnings(diagnostics: Diagnostics): Diagnostics {
+  return diagnostics.filter(d => d.category !== ts.DiagnosticCategory.Message);
+}
+
+const defaultFormatHost: ts.FormatDiagnosticsHost = {
+  getCurrentDirectory: () => ts.sys.getCurrentDirectory(),
+  getCanonicalFileName: fileName => fileName,
+  getNewLine: () => ts.sys.newLine
+};
+
+function displayFileName(fileName: string, host: ts.FormatDiagnosticsHost): string {
+  return path.relative(host.getCurrentDirectory(), host.getCanonicalFileName(fileName));
+}
+
+export function formatDiagnosticPosition(
+    position: Position, host: ts.FormatDiagnosticsHost = defaultFormatHost): string {
+  return `${displayFileName(position.fileName, host)}(${position.line + 1},${position.column+1})`;
+}
+
+export function flattenDiagnosticMessageChain(
+    chain: api.DiagnosticMessageChain, host: ts.FormatDiagnosticsHost = defaultFormatHost): string {
+  let result = chain.messageText;
+  let indent = 1;
+  let current = chain.next;
+  const newLine = host.getNewLine();
+  while (current) {
+    result += newLine;
+    for (let i = 0; i < indent; i++) {
+      result += '  ';
+    }
+    result += current.messageText;
+    const position = current.position;
+    if (position) {
+      result += ` at ${formatDiagnosticPosition(position, host)}`;
+    }
+    current = current.next;
+    indent++;
+  }
+  return result;
+}
+
+export function formatDiagnostic(
+    diagnostic: api.Diagnostic, host: ts.FormatDiagnosticsHost = defaultFormatHost) {
+  let result = '';
+  const newLine = host.getNewLine();
+  const span = diagnostic.span;
+  if (span) {
+    result += `${formatDiagnosticPosition({
+      fileName: span.start.file.url,
+      line: span.start.line,
+      column: span.start.col
+    }, host)}: `;
+  } else if (diagnostic.position) {
+    result += `${formatDiagnosticPosition(diagnostic.position, host)}: `;
+  }
+  if (diagnostic.span && diagnostic.span.details) {
+    result += `: ${diagnostic.span.details}, ${diagnostic.messageText}${newLine}`;
+  } else if (diagnostic.chain) {
+    result += `${flattenDiagnosticMessageChain(diagnostic.chain, host)}.${newLine}`;
+  } else {
+    result += `: ${diagnostic.messageText}${newLine}`;
+  }
+  return result;
+}
+
+export function formatDiagnostics(
+    diags: Diagnostics, host: ts.FormatDiagnosticsHost = defaultFormatHost): string {
+  if (diags && diags.length) {
+    return diags
+        .map(diagnostic => {
+          if (api.isTsDiagnostic(diagnostic)) {
+            return ts.formatDiagnostics([diagnostic], host);
+          } else {
+            return formatDiagnostic(diagnostic, host);
+          }
+        })
+        .join('');
+  } else {
+    return '';
+  }
+}
+
+export interface ParsedConfiguration {
+  project: string;
+  options: api.CompilerOptions;
+  rootNames: string[];
+  emitFlags: api.EmitFlags;
+  errors: Diagnostics;
+}
+
+export function calcProjectFileAndBasePath(project: string):
+    {projectFile: string, basePath: string} {
+  const projectIsDir = fs.lstatSync(project).isDirectory();
+  const projectFile = projectIsDir ? path.join(project, 'tsconfig.json') : project;
+  const projectDir = projectIsDir ? project : path.dirname(project);
+  const basePath = path.resolve(process.cwd(), projectDir);
+  return {projectFile, basePath};
+}
+
+export function createNgCompilerOptions(
+    basePath: string, config: any, tsOptions: ts.CompilerOptions): api.CompilerOptions {
+  return {...tsOptions, ...config.angularCompilerOptions, genDir: basePath, basePath};
+}
+
+export function readConfiguration(
+    project: string, existingOptions?: ts.CompilerOptions): ParsedConfiguration {
+  try {
+    const {projectFile, basePath} = calcProjectFileAndBasePath(project);
+
+    let {config, error} = ts.readConfigFile(projectFile, ts.sys.readFile);
+
+    if (error) {
+      return {
+        project,
+        errors: [error],
+        rootNames: [],
+        options: {},
+        emitFlags: api.EmitFlags.Default
+      };
+    }
+    const parseConfigHost = {
+      useCaseSensitiveFileNames: true,
+      fileExists: fs.existsSync,
+      readDirectory: ts.sys.readDirectory,
+      readFile: ts.sys.readFile
+    };
+    const parsed =
+        ts.parseJsonConfigFileContent(config, parseConfigHost, basePath, existingOptions);
+    const rootNames = parsed.fileNames.map(f => path.normalize(f));
+
+    const options = createNgCompilerOptions(basePath, config, parsed.options);
+    let emitFlags = api.EmitFlags.Default;
+    if (!(options.skipMetadataEmit || options.flatModuleOutFile)) {
+      emitFlags |= api.EmitFlags.Metadata;
+    }
+    if (options.skipTemplateCodegen) {
+      emitFlags = emitFlags & ~api.EmitFlags.Codegen;
+    }
+    return {project: projectFile, rootNames, options, errors: parsed.errors, emitFlags};
+  } catch (e) {
+    const errors: Diagnostics = [{
+      category: ts.DiagnosticCategory.Error,
+      messageText: e.stack,
+      source: api.SOURCE,
+      code: api.UNKNOWN_ERROR_CODE
+    }];
+    return {project: '', errors, rootNames: [], options: {}, emitFlags: api.EmitFlags.Default};
+  }
+}
+
+export interface PerformCompilationResult {
+  diagnostics: Diagnostics;
+  program?: api.Program;
+  emitResult?: ts.EmitResult;
+}
+
+export function exitCodeFromResult(diags: Diagnostics | undefined): number {
+  if (!diags || filterErrorsAndWarnings(diags).length === 0) {
+    // If we have a result and didn't get any errors, we succeeded.
+    return 0;
+  }
+
+  // Return 2 if any of the errors were unknown.
+  return diags.some(d => d.source === 'angular' && d.code === api.UNKNOWN_ERROR_CODE) ? 2 : 1;
+}
+
+export function performCompilation({rootNames, options, host, oldProgram, emitCallback,
+                                    mergeEmitResultsCallback,
+                                    gatherDiagnostics = defaultGatherDiagnostics,
+                                    customTransformers, emitFlags = api.EmitFlags.Default}: {
+  rootNames: string[],
+  options: api.CompilerOptions,
+  host?: api.CompilerHost,
+  oldProgram?: api.Program,
+  emitCallback?: api.TsEmitCallback,
+  mergeEmitResultsCallback?: api.TsMergeEmitResultsCallback,
+  gatherDiagnostics?: (program: api.Program) => Diagnostics,
+  customTransformers?: api.CustomTransformers,
+  emitFlags?: api.EmitFlags
+}): PerformCompilationResult {
+  let program: api.Program|undefined;
+  let emitResult: ts.EmitResult|undefined;
+  let allDiagnostics: Array<ts.Diagnostic|api.Diagnostic> = [];
+  try {
+    if (!host) {
+      host = ng.createCompilerHost({options});
+    }
+
+    program = ng.createProgram({rootNames, host, options, oldProgram});
+
+    const beforeDiags = Date.now();
+    allDiagnostics.push(...gatherDiagnostics(program !));
+    if (options.diagnostics) {
+      const afterDiags = Date.now();
+      allDiagnostics.push(
+          createMessageDiagnostic(`Time for diagnostics: ${afterDiags - beforeDiags}ms.`));
+    }
+
+    if (!hasErrors(allDiagnostics)) {
+      emitResult =
+          program !.emit({emitCallback, mergeEmitResultsCallback, customTransformers, emitFlags});
+      allDiagnostics.push(...emitResult.diagnostics);
+      return {diagnostics: allDiagnostics, program, emitResult};
+    }
+    return {diagnostics: allDiagnostics, program};
+  } catch (e) {
+    let errMsg: string;
+    let code: number;
+    if (isSyntaxError(e)) {
+      // don't report the stack for syntax errors as they are well known errors.
+      errMsg = e.message;
+      code = api.DEFAULT_ERROR_CODE;
+    } else {
+      errMsg = e.stack;
+      // It is not a syntax error we might have a program with unknown state, discard it.
+      program = undefined;
+      code = api.UNKNOWN_ERROR_CODE;
+    }
+    allDiagnostics.push(
+        {category: ts.DiagnosticCategory.Error, messageText: errMsg, code, source: api.SOURCE});
+    return {diagnostics: allDiagnostics, program};
+  }
+}
+function defaultGatherDiagnostics(program: api.Program): Diagnostics {
+  const allDiagnostics: Array<ts.Diagnostic|api.Diagnostic> = [];
+
+  function checkDiagnostics(diags: Diagnostics | undefined) {
+    if (diags) {
+      allDiagnostics.push(...diags);
+      return !hasErrors(diags);
+    }
+    return true;
+  }
+
+  let checkOtherDiagnostics = true;
+  // Check parameter diagnostics
+  checkOtherDiagnostics = checkOtherDiagnostics &&
+      checkDiagnostics([...program.getTsOptionDiagnostics(), ...program.getNgOptionDiagnostics()]);
+
+  // Check syntactic diagnostics
+  checkOtherDiagnostics =
+      checkOtherDiagnostics && checkDiagnostics(program.getTsSyntacticDiagnostics() as Diagnostics);
+
+  // Check TypeScript semantic and Angular structure diagnostics
+  checkOtherDiagnostics =
+      checkOtherDiagnostics &&
+      checkDiagnostics(
+          [...program.getTsSemanticDiagnostics(), ...program.getNgStructuralDiagnostics()]);
+
+  // Check Angular semantic diagnostics
+  checkOtherDiagnostics =
+      checkOtherDiagnostics && checkDiagnostics(program.getNgSemanticDiagnostics() as Diagnostics);
+
+  return allDiagnostics;
+}
+
+function hasErrors(diags: Diagnostics) {
+  return diags.some(d => d.category === ts.DiagnosticCategory.Error);
+}
diff --git a/packages/compiler-cli/src/perform_watch.ts b/packages/compiler-cli/src/perform_watch.ts
new file mode 100644
index 000000000000..b2b7e2faa513
--- /dev/null
+++ b/packages/compiler-cli/src/perform_watch.ts
@@ -0,0 +1,278 @@
+/**
+ * @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 chokidar from 'chokidar';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {Diagnostics, ParsedConfiguration, PerformCompilationResult, exitCodeFromResult, performCompilation, readConfiguration} from './perform_compile';
+import * as api from './transformers/api';
+import {createCompilerHost} from './transformers/entry_points';
+import {createMessageDiagnostic} from './transformers/util';
+
+function totalCompilationTimeDiagnostic(timeInMillis: number): api.Diagnostic {
+  let duration: string;
+  if (timeInMillis > 1000) {
+    duration = `${(timeInMillis / 1000).toPrecision(2)}s`;
+  } else {
+    duration = `${timeInMillis}ms`;
+  }
+  return {
+    category: ts.DiagnosticCategory.Message,
+    messageText: `Total time: ${duration}`,
+    code: api.DEFAULT_ERROR_CODE,
+    source: api.SOURCE,
+  };
+}
+
+export enum FileChangeEvent {
+  Change,
+  CreateDelete,
+  CreateDeleteDir,
+}
+
+export interface PerformWatchHost {
+  reportDiagnostics(diagnostics: Diagnostics): void;
+  readConfiguration(): ParsedConfiguration;
+  createCompilerHost(options: api.CompilerOptions): api.CompilerHost;
+  createEmitCallback(options: api.CompilerOptions): api.TsEmitCallback|undefined;
+  onFileChange(
+      options: api.CompilerOptions, listener: (event: FileChangeEvent, fileName: string) => void,
+      ready: () => void): {close: () => void};
+  setTimeout(callback: () => void, ms: number): any;
+  clearTimeout(timeoutId: any): void;
+}
+
+export function createPerformWatchHost(
+    configFileName: string, reportDiagnostics: (diagnostics: Diagnostics) => void,
+    existingOptions?: ts.CompilerOptions, createEmitCallback?: (options: api.CompilerOptions) =>
+                                              api.TsEmitCallback | undefined): PerformWatchHost {
+  return {
+    reportDiagnostics: reportDiagnostics,
+    createCompilerHost: options => createCompilerHost({options}),
+    readConfiguration: () => readConfiguration(configFileName, existingOptions),
+    createEmitCallback: options => createEmitCallback ? createEmitCallback(options) : undefined,
+    onFileChange: (options, listener, ready: () => void) => {
+      if (!options.basePath) {
+        reportDiagnostics([{
+          category: ts.DiagnosticCategory.Error,
+          messageText: 'Invalid configuration option. baseDir not specified',
+          source: api.SOURCE,
+          code: api.DEFAULT_ERROR_CODE
+        }]);
+        return {close: () => {}};
+      }
+      const watcher = chokidar.watch(options.basePath, {
+        // ignore .dotfiles, .js and .map files.
+        // can't ignore other files as we e.g. want to recompile if an `.html` file changes as well.
+        ignored: /((^[\/\\])\..)|(\.js$)|(\.map$)|(\.metadata\.json)/,
+        ignoreInitial: true,
+        persistent: true,
+      });
+      watcher.on('all', (event: string, path: string) => {
+        switch (event) {
+          case 'change':
+            listener(FileChangeEvent.Change, path);
+            break;
+          case 'unlink':
+          case 'add':
+            listener(FileChangeEvent.CreateDelete, path);
+            break;
+          case 'unlinkDir':
+          case 'addDir':
+            listener(FileChangeEvent.CreateDeleteDir, path);
+            break;
+        }
+      });
+      watcher.on('ready', ready);
+      return {close: () => watcher.close(), ready};
+    },
+    setTimeout: (ts.sys.clearTimeout && ts.sys.setTimeout) || setTimeout,
+    clearTimeout: (ts.sys.setTimeout && ts.sys.clearTimeout) || clearTimeout,
+  };
+}
+
+interface CacheEntry {
+  exists?: boolean;
+  sf?: ts.SourceFile;
+  content?: string;
+}
+
+/**
+ * The logic in this function is adapted from `tsc.ts` from TypeScript.
+ */
+export function performWatchCompilation(host: PerformWatchHost):
+    {close: () => void, ready: (cb: () => void) => void, firstCompileResult: Diagnostics} {
+  let cachedProgram: api.Program|undefined;            // Program cached from last compilation
+  let cachedCompilerHost: api.CompilerHost|undefined;  // CompilerHost cached from last compilation
+  let cachedOptions: ParsedConfiguration|undefined;  // CompilerOptions cached from last compilation
+  let timerHandleForRecompilation: any;  // Handle for 0.25s wait timer to trigger recompilation
+
+  const ingoreFilesForWatch = new Set<string>();
+  const fileCache = new Map<string, CacheEntry>();
+
+  const firstCompileResult = doCompilation();
+
+  // Watch basePath, ignoring .dotfiles
+  let resolveReadyPromise: () => void;
+  const readyPromise = new Promise(resolve => resolveReadyPromise = resolve);
+  // Note: ! is ok as options are filled after the first compilation
+  // Note: ! is ok as resolvedReadyPromise is filled by the previous call
+  const fileWatcher =
+      host.onFileChange(cachedOptions !.options, watchedFileChanged, resolveReadyPromise !);
+
+  return {close, ready: cb => readyPromise.then(cb), firstCompileResult};
+
+  function cacheEntry(fileName: string): CacheEntry {
+    fileName = path.normalize(fileName);
+    let entry = fileCache.get(fileName);
+    if (!entry) {
+      entry = {};
+      fileCache.set(fileName, entry);
+    }
+    return entry;
+  }
+
+  function close() {
+    fileWatcher.close();
+    if (timerHandleForRecompilation) {
+      host.clearTimeout(timerHandleForRecompilation);
+      timerHandleForRecompilation = undefined;
+    }
+  }
+
+  // Invoked to perform initial compilation or re-compilation in watch mode
+  function doCompilation(): Diagnostics {
+    if (!cachedOptions) {
+      cachedOptions = host.readConfiguration();
+    }
+    if (cachedOptions.errors && cachedOptions.errors.length) {
+      host.reportDiagnostics(cachedOptions.errors);
+      return cachedOptions.errors;
+    }
+    const startTime = Date.now();
+    if (!cachedCompilerHost) {
+      cachedCompilerHost = host.createCompilerHost(cachedOptions.options);
+      const originalWriteFileCallback = cachedCompilerHost.writeFile;
+      cachedCompilerHost.writeFile = function(
+          fileName: string, data: string, writeByteOrderMark: boolean,
+          onError?: (message: string) => void, sourceFiles: ReadonlyArray<ts.SourceFile> = []) {
+        ingoreFilesForWatch.add(path.normalize(fileName));
+        return originalWriteFileCallback(fileName, data, writeByteOrderMark, onError, sourceFiles);
+      };
+      const originalFileExists = cachedCompilerHost.fileExists;
+      cachedCompilerHost.fileExists = function(fileName: string) {
+        const ce = cacheEntry(fileName);
+        if (ce.exists == null) {
+          ce.exists = originalFileExists.call(this, fileName);
+        }
+        return ce.exists !;
+      };
+      const originalGetSourceFile = cachedCompilerHost.getSourceFile;
+      cachedCompilerHost.getSourceFile = function(
+          fileName: string, languageVersion: ts.ScriptTarget) {
+        const ce = cacheEntry(fileName);
+        if (!ce.sf) {
+          ce.sf = originalGetSourceFile.call(this, fileName, languageVersion);
+        }
+        return ce.sf !;
+      };
+      const originalReadFile = cachedCompilerHost.readFile;
+      cachedCompilerHost.readFile = function(fileName: string) {
+        const ce = cacheEntry(fileName);
+        if (ce.content == null) {
+          ce.content = originalReadFile.call(this, fileName);
+        }
+        return ce.content !;
+      };
+    }
+    ingoreFilesForWatch.clear();
+    const oldProgram = cachedProgram;
+    // We clear out the `cachedProgram` here as a
+    // program can only be used as `oldProgram` 1x
+    cachedProgram = undefined;
+    const compileResult = performCompilation({
+      rootNames: cachedOptions.rootNames,
+      options: cachedOptions.options,
+      host: cachedCompilerHost,
+      oldProgram: oldProgram,
+      emitCallback: host.createEmitCallback(cachedOptions.options)
+    });
+
+    if (compileResult.diagnostics.length) {
+      host.reportDiagnostics(compileResult.diagnostics);
+    }
+
+    const endTime = Date.now();
+    if (cachedOptions.options.diagnostics) {
+      const totalTime = (endTime - startTime) / 1000;
+      host.reportDiagnostics([totalCompilationTimeDiagnostic(endTime - startTime)]);
+    }
+    const exitCode = exitCodeFromResult(compileResult.diagnostics);
+    if (exitCode == 0) {
+      cachedProgram = compileResult.program;
+      host.reportDiagnostics(
+          [createMessageDiagnostic('Compilation complete. Watching for file changes.')]);
+    } else {
+      host.reportDiagnostics(
+          [createMessageDiagnostic('Compilation failed. Watching for file changes.')]);
+    }
+
+    return compileResult.diagnostics;
+  }
+
+  function resetOptions() {
+    cachedProgram = undefined;
+    cachedCompilerHost = undefined;
+    cachedOptions = undefined;
+  }
+
+  function watchedFileChanged(event: FileChangeEvent, fileName: string) {
+    if (cachedOptions && event === FileChangeEvent.Change &&
+        // TODO(chuckj): validate that this is sufficient to skip files that were written.
+        // This assumes that the file path we write is the same file path we will receive in the
+        // change notification.
+        path.normalize(fileName) === path.normalize(cachedOptions.project)) {
+      // If the configuration file changes, forget everything and start the recompilation timer
+      resetOptions();
+    } else if (
+        event === FileChangeEvent.CreateDelete || event === FileChangeEvent.CreateDeleteDir) {
+      // If a file was added or removed, reread the configuration
+      // to determine the new list of root files.
+      cachedOptions = undefined;
+    }
+
+    if (event === FileChangeEvent.CreateDeleteDir) {
+      fileCache.clear();
+    } else {
+      fileCache.delete(path.normalize(fileName));
+    }
+
+    if (!ingoreFilesForWatch.has(path.normalize(fileName))) {
+      // Ignore the file if the file is one that was written by the compiler.
+      startTimerForRecompilation();
+    }
+  }
+
+  // Upon detecting a file change, wait for 250ms and then perform a recompilation. This gives batch
+  // operations (such as saving all modified files in an editor) a chance to complete before we kick
+  // off a new compilation.
+  function startTimerForRecompilation() {
+    if (timerHandleForRecompilation) {
+      host.clearTimeout(timerHandleForRecompilation);
+    }
+    timerHandleForRecompilation = host.setTimeout(recompile, 250);
+  }
+
+  function recompile() {
+    timerHandleForRecompilation = undefined;
+    host.reportDiagnostics(
+        [createMessageDiagnostic('File change detected. Starting incremental compilation.')]);
+    doCompilation();
+  }
+}
diff --git a/packages/compiler-cli/src/transformers/api.ts b/packages/compiler-cli/src/transformers/api.ts
new file mode 100644
index 000000000000..afa15cf20b4b
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/api.ts
@@ -0,0 +1,391 @@
+/**
+ * @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, ParseSourceSpan, Position} from '@angular/compiler';
+import * as ts from 'typescript';
+
+export const DEFAULT_ERROR_CODE = 100;
+export const UNKNOWN_ERROR_CODE = 500;
+export const SOURCE = 'angular' as 'angular';
+
+export interface DiagnosticMessageChain {
+  messageText: string;
+  position?: Position;
+  next?: DiagnosticMessageChain;
+}
+
+export interface Diagnostic {
+  messageText: string;
+  span?: ParseSourceSpan;
+  position?: Position;
+  chain?: DiagnosticMessageChain;
+  category: ts.DiagnosticCategory;
+  code: number;
+  source: 'angular';
+}
+
+export function isTsDiagnostic(diagnostic: any): diagnostic is ts.Diagnostic {
+  return diagnostic != null && diagnostic.source !== 'angular';
+}
+
+export function isNgDiagnostic(diagnostic: any): diagnostic is Diagnostic {
+  return diagnostic != null && diagnostic.source === 'angular';
+}
+
+export interface CompilerOptions extends ts.CompilerOptions {
+  // NOTE: These comments and aio/content/guides/aot-compiler.md should be kept in sync.
+
+  // Write statistics about compilation (e.g. total time, ...)
+  // Note: this is the --diagnostics command line option from TS (which is @internal
+  // on ts.CompilerOptions interface).
+  diagnostics?: boolean;
+
+  // Absolute path to a directory where generated file structure is written.
+  // If unspecified, generated files will be written alongside sources.
+  // @deprecated - no effect
+  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.js or .ngstyle.js files
+  skipTemplateCodegen?: boolean;
+
+  // Always report errors when the type of a parameter supplied whose injection type cannot
+  // be determined. When this value option is not provided or is `false`, constructor
+  // parameters of classes marked with `@Injectable` whose type cannot be resolved will
+  // produce a warning. With this option `true`, they produce an error. When this option is
+  // not provided is treated as if it were `false`. In Angular 6.0, if this option is not
+  // provided, it will be treated as `true`.
+  strictInjectionParameters?: 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 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.
+  // 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;
+
+  // A prefix to insert in generated private symbols, e.g. for "my_prefix_" we
+  // would generate private symbols named like `ɵmy_prefix_a`.
+  flatModulePrivateSymbolPrefix?: 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;
+
+  // Whether to enable all type checks for templates.
+  // This will be true be default in Angular 6.
+  fullTemplateTypeCheck?: 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 lowering expressions lambdas and expressions in a reference value
+  // position.
+  disableExpressionLowering?: boolean;
+
+  // Disable TypeScript Version Check.
+  disableTypeScriptVersionCheck?: boolean;
+
+  // Locale of the application
+  i18nOutLocale?: string;
+  // Export format (xlf, xlf2 or xmb)
+  i18nOutFormat?: string;
+  // Path to the extracted message file
+  i18nOutFile?: string;
+
+  // Import format if different from `i18nFormat`
+  i18nInFormat?: string;
+  // Locale of the imported translations
+  i18nInLocale?: string;
+  // Path to the translation file
+  i18nInFile?: string;
+  // How to handle missing messages
+  i18nInMissingTranslations?: 'error'|'warning'|'ignore';
+
+  // Whether to remove blank text nodes from compiled templates. It is `false` by default starting
+  // from Angular 6.
+  preserveWhitespaces?: boolean;
+
+  /** generate all possible generated files  */
+  allowEmptyCodegenFiles?: 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 replace the `templateUrl` and `styleUrls` property in all
+   * @Component decorators with inlined contents in `template` and `styles`
+   * properties.
+   * When enabled, the .js output of ngc will have no lazy-loaded `templateUrl`
+   * or `styleUrl`s. Note that this requires that resources be available to
+   * load statically at compile-time.
+   */
+  enableResourceInlining?: boolean;
+
+  /**
+   * Tells the compiler to generate definitions using the Render3 style code generation.
+   * This option defaults to `false`.
+   *
+   * Not all features are supported with this option enabled. It is only supported
+   * for experimentation and testing of Render3 style code generation.
+   *
+   * Acceptable values are as follows:
+   *
+   * `false` - run ngc normally
+   * `true` - run ngc with its usual global analysis, but compile decorators to Ivy fields instead
+   *  of running the View Engine compilers
+   * `ngtsc` - run the ngtsc compiler instead of the normal ngc compiler
+   * `tsc` - behave like plain tsc as much as possible (used for testing JIT code)
+   *
+   * @experimental
+   */
+  enableIvy?: boolean|'ngtsc'|'tsc';
+
+  /** @internal */
+  collectAllErrors?: boolean;
+}
+
+export interface CompilerHost extends ts.CompilerHost {
+  /**
+   * 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`.
+   */
+  fileNameToModuleName?(importedFilePath: string, containingFilePath: string): string;
+  /**
+   * Converts a file path for a resource that is used in a source file or another resource
+   * into a filepath.
+   */
+  resourceNameToFileName?(resourceName: string, containingFilePath: string): string|null;
+  /**
+   * Converts a file name into a representation that should be stored in a summary file.
+   * This has to include changing the suffix as well.
+   * E.g.
+   * `some_file.ts` -> `some_file.d.ts`
+   *
+   * @param referringSrcFileName the soure file that refers to fileName
+   */
+  toSummaryFileName?(fileName: string, referringSrcFileName: string): string;
+  /**
+   * Converts a fileName that was processed by `toSummaryFileName` back into a real fileName
+   * given the fileName of the library that is referrig to it.
+   */
+  fromSummaryFileName?(fileName: string, referringLibFileName: string): string;
+  /**
+   * 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()`. Returning  `Promise<string>` outside `loadNgStructureAsync()` will
+   * cause a diagnostics diagnostic error or an exception to be thrown.
+   */
+  readResource?(fileName: string): Promise<string>|string;
+  /**
+   * Produce an AMD module name for the source file. Used in Bazel.
+   *
+   * An AMD module can have an arbitrary name, so that it is require'd by name
+   * rather than by path. See http://requirejs.org/docs/whyamd.html#namedmodules
+   */
+  amdModuleName?(sf: ts.SourceFile): string|undefined;
+}
+
+export enum EmitFlags {
+  DTS = 1 << 0,
+  JS = 1 << 1,
+  Metadata = 1 << 2,
+  I18nBundle = 1 << 3,
+  Codegen = 1 << 4,
+
+  Default = DTS | JS | Codegen,
+  All = DTS | JS | Metadata | I18nBundle | Codegen,
+}
+
+export interface CustomTransformers {
+  beforeTs?: ts.TransformerFactory<ts.SourceFile>[];
+  afterTs?: ts.TransformerFactory<ts.SourceFile>[];
+}
+
+export interface TsEmitArguments {
+  program: ts.Program;
+  host: CompilerHost;
+  options: CompilerOptions;
+  targetSourceFile?: ts.SourceFile;
+  writeFile?: ts.WriteFileCallback;
+  cancellationToken?: ts.CancellationToken;
+  emitOnlyDtsFiles?: boolean;
+  customTransformers?: ts.CustomTransformers;
+}
+
+export interface TsEmitCallback { (args: TsEmitArguments): ts.EmitResult; }
+export interface TsMergeEmitResultsCallback { (results: ts.EmitResult[]): ts.EmitResult; }
+
+export interface LibrarySummary {
+  fileName: string;
+  text: string;
+  sourceFile?: ts.SourceFile;
+}
+
+export interface LazyRoute {
+  route: string;
+  module: {name: string, filePath: string};
+  referencedModule: {name: string, filePath: string};
+}
+
+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;
+
+  /**
+   * Retrieve 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): ReadonlyArray<ts.Diagnostic>;
+
+  /**
+   * Retrieve options diagnostics for the Angular options used to create the program.
+   */
+  getNgOptionDiagnostics(cancellationToken?: ts.CancellationToken): ReadonlyArray<Diagnostic>;
+
+  /**
+   * Retrieve 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):
+      ReadonlyArray<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 structure 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): ReadonlyArray<Diagnostic>;
+
+  /**
+   * Retrieve the semantic diagnostics from TypeScript. This is equivalent to calling
+   * `getTsProgram().getSemanticDiagnostics()` directly and is included for completeness.
+   */
+  getTsSemanticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
+      ReadonlyArray<ts.Diagnostic>;
+
+  /**
+   * Retrieve the Angular semantic diagnostics.
+   *
+   * Angular structural information is required to produce these diagnostics.
+   */
+  getNgSemanticDiagnostics(fileName?: string, cancellationToken?: ts.CancellationToken):
+      ReadonlyArray<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>;
+
+  /**
+   * Returns the lazy routes in the program.
+   * @param entryRoute A reference to an NgModule like `someModule#name`. If given,
+   *              will recursively analyze routes starting from this symbol only.
+   *              Otherwise will list all routes for all NgModules in the program/
+   */
+  listLazyRoutes(entryRoute?: string): LazyRoute[];
+
+  /**
+   * Emit the files requested by emitFlags implied by the program.
+   *
+   * Angular structural information is required to emit files.
+   */
+  emit({emitFlags, cancellationToken, customTransformers, emitCallback,
+        mergeEmitResultsCallback}?: {
+    emitFlags?: EmitFlags,
+    cancellationToken?: ts.CancellationToken,
+    customTransformers?: CustomTransformers,
+    emitCallback?: TsEmitCallback,
+    mergeEmitResultsCallback?: TsMergeEmitResultsCallback
+  }): ts.EmitResult;
+
+  /**
+   * Returns the .d.ts / .ngsummary.json / .ngfactory.d.ts files of libraries that have been emitted
+   * in this program or previous programs with paths that emulate the fact that these libraries
+   * have been compiled before with no outDir.
+   */
+  getLibrarySummaries(): Map<string, LibrarySummary>;
+
+  /**
+   * @internal
+   */
+  getEmittedGeneratedFiles(): Map<string, GeneratedFile>;
+
+  /**
+   * @internal
+   */
+  getEmittedSourceFiles(): Map<string, ts.SourceFile>;
+}
diff --git a/packages/compiler-cli/src/transformers/compiler_host.ts b/packages/compiler-cli/src/transformers/compiler_host.ts
new file mode 100644
index 000000000000..eb54ffd943c8
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/compiler_host.ts
@@ -0,0 +1,650 @@
+/**
+ * @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, EmitterVisitorContext, ExternalReference, GeneratedFile, ParseSourceSpan, TypeScriptEmitter, collectExternalReferences, syntaxError} from '@angular/compiler';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {TypeCheckHost} from '../diagnostics/translate_diagnostics';
+import {METADATA_VERSION, ModuleMetadata} from '../metadata/index';
+
+import {CompilerHost, CompilerOptions, LibrarySummary} from './api';
+import {MetadataReaderHost, createMetadataReaderCache, readMetadata} from './metadata_reader';
+import {DTS, GENERATED_FILES, isInRootDir, relativeToRootDirs} from './util';
+
+const NODE_MODULES_PACKAGE_NAME = /node_modules\/((\w|-|\.)+|(@(\w|-|\.)+\/(\w|-|\.)+))/;
+const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
+
+export function createCompilerHost(
+    {options, tsHost = ts.createCompilerHost(options, true)}:
+        {options: CompilerOptions, tsHost?: ts.CompilerHost}): CompilerHost {
+  return tsHost;
+}
+
+export interface MetadataProvider {
+  getMetadata(sourceFile: ts.SourceFile): ModuleMetadata|undefined;
+}
+
+interface GenSourceFile {
+  externalReferences: Set<string>;
+  sourceFile: ts.SourceFile;
+  emitCtx: EmitterVisitorContext;
+}
+
+export interface CodeGenerator {
+  generateFile(genFileName: string, baseFileName?: string): GeneratedFile;
+  findGeneratedFileNames(fileName: string): string[];
+}
+
+function assert<T>(condition: T | null | undefined) {
+  if (!condition) {
+    // TODO(chuckjaz): do the right thing
+  }
+  return condition !;
+}
+
+/**
+ * Implements the following hosts based on an api.CompilerHost:
+ * - ts.CompilerHost to be consumed by a ts.Program
+ * - AotCompilerHost for @angular/compiler
+ * - TypeCheckHost for mapping ts errors to ng errors (via translateDiagnostics)
+ */
+export class TsCompilerAotCompilerTypeCheckHostAdapter implements ts.CompilerHost, AotCompilerHost,
+    TypeCheckHost {
+  private metadataReaderCache = createMetadataReaderCache();
+  private fileNameToModuleNameCache = new Map<string, string>();
+  private flatModuleIndexCache = new Map<string, boolean>();
+  private flatModuleIndexNames = new Set<string>();
+  private flatModuleIndexRedirectNames = new Set<string>();
+  private rootDirs: string[];
+  private moduleResolutionCache: ts.ModuleResolutionCache;
+  private originalSourceFiles = new Map<string, ts.SourceFile|null>();
+  private originalFileExistsCache = new Map<string, boolean>();
+  private generatedSourceFiles = new Map<string, GenSourceFile>();
+  private generatedCodeFor = new Map<string, string[]>();
+  private emitter = new TypeScriptEmitter();
+  private metadataReaderHost: MetadataReaderHost;
+
+  // TODO(issue/24571): remove '!'.
+  getCancellationToken !: () => ts.CancellationToken;
+  // TODO(issue/24571): remove '!'.
+  getDefaultLibLocation !: () => string;
+  // TODO(issue/24571): remove '!'.
+  trace !: (s: string) => void;
+  // TODO(issue/24571): remove '!'.
+  getDirectories !: (path: string) => string[];
+  directoryExists?: (directoryName: string) => boolean;
+
+  constructor(
+      private rootFiles: ReadonlyArray<string>, private options: CompilerOptions,
+      private context: CompilerHost, private metadataProvider: MetadataProvider,
+      private codeGenerator: CodeGenerator,
+      private librarySummaries = new Map<string, LibrarySummary>()) {
+    this.moduleResolutionCache = ts.createModuleResolutionCache(
+        this.context.getCurrentDirectory !(), this.context.getCanonicalFileName.bind(this.context));
+    const basePath = this.options.basePath !;
+    this.rootDirs =
+        (this.options.rootDirs || [this.options.basePath !]).map(p => path.resolve(basePath, p));
+    if (context.getDirectories) {
+      this.getDirectories = path => context.getDirectories !(path);
+    }
+    if (context.directoryExists) {
+      this.directoryExists = directoryName => context.directoryExists !(directoryName);
+    }
+    if (context.getCancellationToken) {
+      this.getCancellationToken = () => context.getCancellationToken !();
+    }
+    if (context.getDefaultLibLocation) {
+      this.getDefaultLibLocation = () => context.getDefaultLibLocation !();
+    }
+    if (context.trace) {
+      this.trace = s => context.trace !(s);
+    }
+    if (context.fileNameToModuleName) {
+      this.fileNameToModuleName = context.fileNameToModuleName.bind(context);
+    }
+    // Note: don't copy over context.moduleNameToFileName as we first
+    // normalize undefined containingFile to a filled containingFile.
+    if (context.resourceNameToFileName) {
+      this.resourceNameToFileName = context.resourceNameToFileName.bind(context);
+    }
+    if (context.toSummaryFileName) {
+      this.toSummaryFileName = context.toSummaryFileName.bind(context);
+    }
+    if (context.fromSummaryFileName) {
+      this.fromSummaryFileName = context.fromSummaryFileName.bind(context);
+    }
+    this.metadataReaderHost = {
+      cacheMetadata: () => true,
+      getSourceFileMetadata: (filePath) => {
+        const sf = this.getOriginalSourceFile(filePath);
+        return sf ? this.metadataProvider.getMetadata(sf) : undefined;
+      },
+      fileExists: (filePath) => this.originalFileExists(filePath),
+      readFile: (filePath) => assert(this.context.readFile(filePath)),
+    };
+  }
+
+  private resolveModuleName(moduleName: string, containingFile: string): ts.ResolvedModule
+      |undefined {
+    const rm = ts.resolveModuleName(
+                     moduleName, containingFile.replace(/\\/g, '/'), this.options, this,
+                     this.moduleResolutionCache)
+                   .resolvedModule;
+    if (rm && this.isSourceFile(rm.resolvedFileName) && DTS.test(rm.resolvedFileName)) {
+      // Case: generateCodeForLibraries = true and moduleName is
+      // a .d.ts file in a node_modules folder.
+      // Need to set isExternalLibraryImport to false so that generated files for that file
+      // are emitted.
+      rm.isExternalLibraryImport = false;
+    }
+    return rm;
+  }
+
+  // Note: We implement this method so that TypeScript and Angular share the same
+  // ts.ModuleResolutionCache
+  // and that we can tell ts.Program about our different opinion about
+  // ResolvedModule.isExternalLibraryImport
+  // (see our isSourceFile method).
+  resolveModuleNames(moduleNames: string[], containingFile: string): ts.ResolvedModule[] {
+    // TODO(tbosch): this seems to be a typing error in TypeScript,
+    // as it contains assertions that the result contains the same number of entries
+    // as the given module names.
+    return <ts.ResolvedModule[]>moduleNames.map(
+        moduleName => this.resolveModuleName(moduleName, containingFile));
+  }
+
+  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.rootFiles[0];
+    }
+    if (this.context.moduleNameToFileName) {
+      return this.context.moduleNameToFileName(m, containingFile);
+    }
+    const resolved = this.resolveModuleName(m, containingFile);
+    return resolved ? resolved.resolvedFileName : null;
+  }
+
+  /**
+   * We want a moduleId that will appear in import statements in the generated code
+   * which will be written to `containingFile`.
+   *
+   * Note that we also generate files for files in node_modules, as libraries
+   * only ship .metadata.json files but not the generated code.
+   *
+   * Logic:
+   * 1. if the importedFile and the containingFile are from the project sources
+   *    or from the same node_modules package, use a relative path
+   * 2. if the importedFile is in a node_modules package,
+   *    use a path that starts with the package name.
+   * 3. Error if the containingFile is in the node_modules package
+   *    and the importedFile is in the project soures,
+   *    as that is a violation of the principle that node_modules packages cannot
+   *    import project sources.
+   */
+  fileNameToModuleName(importedFile: string, containingFile: string): string {
+    const cacheKey = `${importedFile}:${containingFile}`;
+    let moduleName = this.fileNameToModuleNameCache.get(cacheKey);
+    if (moduleName != null) {
+      return moduleName;
+    }
+
+    const originalImportedFile = importedFile;
+    if (this.options.traceResolution) {
+      console.error(
+          'fileNameToModuleName from containingFile', containingFile, 'to importedFile',
+          importedFile);
+    }
+
+    // drop extension
+    importedFile = importedFile.replace(EXT, '');
+    const importedFilePackageName = getPackageName(importedFile);
+    const containingFilePackageName = getPackageName(containingFile);
+
+    if (importedFilePackageName === containingFilePackageName ||
+        GENERATED_FILES.test(originalImportedFile)) {
+      const rootedContainingFile = relativeToRootDirs(containingFile, this.rootDirs);
+      const rootedImportedFile = relativeToRootDirs(importedFile, this.rootDirs);
+
+      if (rootedContainingFile !== containingFile && rootedImportedFile !== importedFile) {
+        // if both files are contained in the `rootDirs`, then strip the rootDirs
+        containingFile = rootedContainingFile;
+        importedFile = rootedImportedFile;
+      }
+      moduleName = dotRelative(path.dirname(containingFile), importedFile);
+    } else if (importedFilePackageName) {
+      moduleName = stripNodeModulesPrefix(importedFile);
+      if (originalImportedFile.endsWith('.d.ts')) {
+        // the moduleName for these typings could be shortented to the npm package name
+        // if the npm package typings matches the importedFile
+        try {
+          const modulePath = importedFile.substring(0, importedFile.length - moduleName.length) +
+              importedFilePackageName;
+          const packageJson = require(modulePath + '/package.json');
+          const packageTypings = path.posix.join(modulePath, packageJson.typings);
+          if (packageTypings === originalImportedFile) {
+            moduleName = importedFilePackageName;
+          }
+        } catch (e) {
+          // the above require() will throw if there is no package.json file
+          // and this is safe to ignore and correct to keep the longer
+          // moduleName in this case
+        }
+      }
+    } else {
+      throw new Error(
+          `Trying to import a source file from a node_modules package: import ${originalImportedFile} from ${containingFile}`);
+    }
+
+    this.fileNameToModuleNameCache.set(cacheKey, moduleName);
+    return moduleName;
+  }
+
+  resourceNameToFileName(resourceName: string, containingFile: string): string|null {
+    // Note: we convert package paths into relative paths to be compatible with the the
+    // previous implementation of UrlResolver.
+    const firstChar = resourceName[0];
+    if (firstChar === '/') {
+      resourceName = resourceName.slice(1);
+    } else if (firstChar !== '.') {
+      resourceName = `./${resourceName}`;
+    }
+    const filePathWithNgResource =
+        this.moduleNameToFileName(addNgResourceSuffix(resourceName), containingFile);
+    const result = filePathWithNgResource ? stripNgResourceSuffix(filePathWithNgResource) : null;
+    // Used under Bazel to report more specific error with remediation advice
+    if (!result && (this.context as any).reportMissingResource) {
+      (this.context as any).reportMissingResource(resourceName);
+    }
+    return result;
+  }
+
+  toSummaryFileName(fileName: string, referringSrcFileName: string): string {
+    return this.fileNameToModuleName(fileName, referringSrcFileName);
+  }
+
+  fromSummaryFileName(fileName: string, referringLibFileName: string): string {
+    const resolved = this.moduleNameToFileName(fileName, referringLibFileName);
+    if (!resolved) {
+      throw new Error(`Could not resolve ${fileName} from ${referringLibFileName}`);
+    }
+    return resolved;
+  }
+
+  parseSourceSpanOf(fileName: string, line: number, character: number): ParseSourceSpan|null {
+    const data = this.generatedSourceFiles.get(fileName);
+    if (data && data.emitCtx) {
+      return data.emitCtx.spanOf(line, character);
+    }
+    return null;
+  }
+
+  private getOriginalSourceFile(
+      filePath: string, languageVersion?: ts.ScriptTarget,
+      onError?: ((message: string) => void)|undefined): ts.SourceFile|null {
+    // Note: we need the explicit check via `has` as we also cache results
+    // that were null / undefined.
+    if (this.originalSourceFiles.has(filePath)) {
+      return this.originalSourceFiles.get(filePath) !;
+    }
+    if (!languageVersion) {
+      languageVersion = this.options.target || ts.ScriptTarget.Latest;
+    }
+    // Note: This can also return undefined,
+    // as the TS typings are not correct!
+    const sf = this.context.getSourceFile(filePath, languageVersion, onError) || null;
+    this.originalSourceFiles.set(filePath, sf);
+    return sf;
+  }
+
+  updateGeneratedFile(genFile: GeneratedFile): ts.SourceFile {
+    if (!genFile.stmts) {
+      throw new Error(
+          `Invalid Argument: Expected a GenerateFile with statements. ${genFile.genFileUrl}`);
+    }
+    const oldGenFile = this.generatedSourceFiles.get(genFile.genFileUrl);
+    if (!oldGenFile) {
+      throw new Error(`Illegal State: previous GeneratedFile not found for ${genFile.genFileUrl}.`);
+    }
+    const newRefs = genFileExternalReferences(genFile);
+    const oldRefs = oldGenFile.externalReferences;
+    let refsAreEqual = oldRefs.size === newRefs.size;
+    if (refsAreEqual) {
+      newRefs.forEach(r => refsAreEqual = refsAreEqual && oldRefs.has(r));
+    }
+    if (!refsAreEqual) {
+      throw new Error(
+          `Illegal State: external references changed in ${genFile.genFileUrl}.\nOld: ${Array.from(oldRefs)}.\nNew: ${Array.from(newRefs)}`);
+    }
+    return this.addGeneratedFile(genFile, newRefs);
+  }
+
+  private addGeneratedFile(genFile: GeneratedFile, externalReferences: Set<string>): ts.SourceFile {
+    if (!genFile.stmts) {
+      throw new Error(
+          `Invalid Argument: Expected a GenerateFile with statements. ${genFile.genFileUrl}`);
+    }
+    const {sourceText, context} = this.emitter.emitStatementsAndContext(
+        genFile.genFileUrl, genFile.stmts, /* preamble */ '',
+        /* emitSourceMaps */ false);
+    const sf = ts.createSourceFile(
+        genFile.genFileUrl, sourceText, this.options.target || ts.ScriptTarget.Latest);
+    if ((this.options.module === ts.ModuleKind.AMD || this.options.module === ts.ModuleKind.UMD) &&
+        this.context.amdModuleName) {
+      const moduleName = this.context.amdModuleName(sf);
+      if (moduleName) sf.moduleName = moduleName;
+    }
+    this.generatedSourceFiles.set(genFile.genFileUrl, {
+      sourceFile: sf,
+      emitCtx: context, externalReferences,
+    });
+    return sf;
+  }
+
+  shouldGenerateFile(fileName: string): {generate: boolean, baseFileName?: string} {
+    // TODO(tbosch): allow generating files that are not in the rootDir
+    // See https://github.com/angular/angular/issues/19337
+    if (!isInRootDir(fileName, this.options)) {
+      return {generate: false};
+    }
+    const genMatch = GENERATED_FILES.exec(fileName);
+    if (!genMatch) {
+      return {generate: false};
+    }
+    const [, base, genSuffix, suffix] = genMatch;
+    if (suffix !== 'ts' && suffix !== 'tsx') {
+      return {generate: false};
+    }
+    let baseFileName: string|undefined;
+    if (genSuffix.indexOf('ngstyle') >= 0) {
+      // Note: ngstyle files have names like `afile.css.ngstyle.ts`
+      if (!this.originalFileExists(base)) {
+        return {generate: false};
+      }
+    } else {
+      // Note: on-the-fly generated files always have a `.ts` suffix,
+      // but the file from which we generated it can be a `.ts`/ `.tsx`/ `.d.ts`
+      // (see options.generateCodeForLibraries).
+      baseFileName = [`${base}.ts`, `${base}.tsx`, `${base}.d.ts`].find(
+          baseFileName => this.isSourceFile(baseFileName) && this.originalFileExists(baseFileName));
+      if (!baseFileName) {
+        return {generate: false};
+      }
+    }
+    return {generate: true, baseFileName};
+  }
+
+  shouldGenerateFilesFor(fileName: string) {
+    // TODO(tbosch): allow generating files that are not in the rootDir
+    // See https://github.com/angular/angular/issues/19337
+    return !GENERATED_FILES.test(fileName) && this.isSourceFile(fileName) &&
+        isInRootDir(fileName, this.options);
+  }
+
+  getSourceFile(
+      fileName: string, languageVersion: ts.ScriptTarget,
+      onError?: ((message: string) => void)|undefined): ts.SourceFile {
+    // Note: Don't exit early in this method to make sure
+    // we always have up to date references on the file!
+    let genFileNames: string[] = [];
+    let sf = this.getGeneratedFile(fileName);
+    if (!sf) {
+      const summary = this.librarySummaries.get(fileName);
+      if (summary) {
+        if (!summary.sourceFile) {
+          summary.sourceFile = ts.createSourceFile(
+              fileName, summary.text, this.options.target || ts.ScriptTarget.Latest);
+        }
+        sf = summary.sourceFile;
+        genFileNames = [];
+      }
+    }
+    if (!sf) {
+      sf = this.getOriginalSourceFile(fileName);
+      const cachedGenFiles = this.generatedCodeFor.get(fileName);
+      if (cachedGenFiles) {
+        genFileNames = cachedGenFiles;
+      } else {
+        if (!this.options.noResolve && this.shouldGenerateFilesFor(fileName)) {
+          genFileNames = this.codeGenerator.findGeneratedFileNames(fileName).filter(
+              fileName => this.shouldGenerateFile(fileName).generate);
+        }
+        this.generatedCodeFor.set(fileName, genFileNames);
+      }
+    }
+    if (sf) {
+      addReferencesToSourceFile(sf, genFileNames);
+    }
+    // TODO(tbosch): TypeScript's typings for getSourceFile are incorrect,
+    // as it can very well return undefined.
+    return sf !;
+  }
+
+  private getGeneratedFile(fileName: string): ts.SourceFile|null {
+    const genSrcFile = this.generatedSourceFiles.get(fileName);
+    if (genSrcFile) {
+      return genSrcFile.sourceFile;
+    }
+    const {generate, baseFileName} = this.shouldGenerateFile(fileName);
+    if (generate) {
+      const genFile = this.codeGenerator.generateFile(fileName, baseFileName);
+      return this.addGeneratedFile(genFile, genFileExternalReferences(genFile));
+    }
+    return null;
+  }
+
+  private originalFileExists(fileName: string): boolean {
+    let fileExists = this.originalFileExistsCache.get(fileName);
+    if (fileExists == null) {
+      fileExists = this.context.fileExists(fileName);
+      this.originalFileExistsCache.set(fileName, fileExists);
+    }
+    return fileExists;
+  }
+
+  fileExists(fileName: string): boolean {
+    fileName = stripNgResourceSuffix(fileName);
+    if (this.librarySummaries.has(fileName) || this.generatedSourceFiles.has(fileName)) {
+      return true;
+    }
+    if (this.shouldGenerateFile(fileName).generate) {
+      return true;
+    }
+    return this.originalFileExists(fileName);
+  }
+
+  loadSummary(filePath: string): string|null {
+    const summary = this.librarySummaries.get(filePath);
+    if (summary) {
+      return summary.text;
+    }
+    if (this.originalFileExists(filePath)) {
+      return assert(this.context.readFile(filePath));
+    }
+    return null;
+  }
+
+  isSourceFile(filePath: string): boolean {
+    // Don't generate any files nor typecheck them
+    // if skipTemplateCodegen is set and fullTemplateTypeCheck is not yet set,
+    // for backwards compatibility.
+    if (this.options.skipTemplateCodegen && !this.options.fullTemplateTypeCheck) {
+      return false;
+    }
+    // If we have a summary from a previous compilation,
+    // treat the file never as a source file.
+    if (this.librarySummaries.has(filePath)) {
+      return false;
+    }
+    if (GENERATED_FILES.test(filePath)) {
+      return false;
+    }
+    if (this.options.generateCodeForLibraries === false && DTS.test(filePath)) {
+      return false;
+    }
+    if (DTS.test(filePath)) {
+      // Check for a bundle index.
+      if (this.hasBundleIndex(filePath)) {
+        const normalFilePath = path.normalize(filePath);
+        return this.flatModuleIndexNames.has(normalFilePath) ||
+            this.flatModuleIndexRedirectNames.has(normalFilePath);
+      }
+    }
+    return true;
+  }
+
+  readFile(fileName: string) {
+    const summary = this.librarySummaries.get(fileName);
+    if (summary) {
+      return summary.text;
+    }
+    return this.context.readFile(fileName);
+  }
+
+  getMetadataFor(filePath: string): ModuleMetadata[]|undefined {
+    return readMetadata(filePath, this.metadataReaderHost, this.metadataReaderCache);
+  }
+
+  loadResource(filePath: string): Promise<string>|string {
+    if (this.context.readResource) return this.context.readResource(filePath);
+    if (!this.originalFileExists(filePath)) {
+      throw syntaxError(`Error: Resource file not found: ${filePath}`);
+    }
+    return assert(this.context.readFile(filePath));
+  }
+
+  getOutputName(filePath: string): string {
+    return path.relative(this.getCurrentDirectory(), filePath);
+  }
+
+  private hasBundleIndex(filePath: string): boolean {
+    const checkBundleIndex = (directory: string): boolean => {
+      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.
+          result = false;
+        } else {
+          // A bundle index exists if the typings .d.ts file has a metadata.json that has an
+          // importAs.
+          try {
+            const packageFile = path.join(directory, 'package.json');
+            if (this.originalFileExists(packageFile)) {
+              // Once we see a package.json file, assume false until it we find the bundle index.
+              result = false;
+              const packageContent: any = JSON.parse(assert(this.context.readFile(packageFile)));
+              if (packageContent.typings) {
+                const typings = path.normalize(path.join(directory, packageContent.typings));
+                if (DTS.test(typings)) {
+                  const metadataFile = typings.replace(DTS, '.metadata.json');
+                  if (this.originalFileExists(metadataFile)) {
+                    const metadata = JSON.parse(assert(this.context.readFile(metadataFile)));
+                    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;
+                    }
+                  }
+                }
+              }
+            } else {
+              const parent = path.dirname(directory);
+              if (parent != directory) {
+                // Try the parent directory.
+                result = checkBundleIndex(parent);
+              } else {
+                result = false;
+              }
+            }
+          } catch (e) {
+            // If we encounter any errors assume we this isn't a bundle index.
+            result = false;
+          }
+        }
+        this.flatModuleIndexCache.set(directory, result);
+      }
+      return result;
+    };
+
+    return checkBundleIndex(path.dirname(filePath));
+  }
+
+  getDefaultLibFileName = (options: ts.CompilerOptions) =>
+      this.context.getDefaultLibFileName(options)
+  getCurrentDirectory = () => this.context.getCurrentDirectory();
+  getCanonicalFileName = (fileName: string) => this.context.getCanonicalFileName(fileName);
+  useCaseSensitiveFileNames = () => this.context.useCaseSensitiveFileNames();
+  getNewLine = () => this.context.getNewLine();
+  // Make sure we do not `host.realpath()` from TS as we do not want to resolve symlinks.
+  // https://github.com/Microsoft/TypeScript/issues/9552
+  realpath = (p: string) => p;
+  writeFile = this.context.writeFile.bind(this.context);
+}
+
+function genFileExternalReferences(genFile: GeneratedFile): Set<string> {
+  return new Set(collectExternalReferences(genFile.stmts !).map(er => er.moduleName !));
+}
+
+function addReferencesToSourceFile(sf: ts.SourceFile, genFileNames: string[]) {
+  // Note: as we modify ts.SourceFiles we need to keep the original
+  // value for `referencedFiles` around in cache the original host is caching ts.SourceFiles.
+  // Note: cloning the ts.SourceFile is expensive as the nodes in have parent pointers,
+  // i.e. we would also need to clone and adjust all nodes.
+  let originalReferencedFiles: ReadonlyArray<ts.FileReference> =
+      (sf as any).originalReferencedFiles;
+  if (!originalReferencedFiles) {
+    originalReferencedFiles = sf.referencedFiles;
+    (sf as any).originalReferencedFiles = originalReferencedFiles;
+  }
+  const newReferencedFiles = [...originalReferencedFiles];
+  genFileNames.forEach(gf => newReferencedFiles.push({fileName: gf, pos: 0, end: 0}));
+  sf.referencedFiles = newReferencedFiles;
+}
+
+export function getOriginalReferences(sourceFile: ts.SourceFile): ts.FileReference[]|undefined {
+  return sourceFile && (sourceFile as any).originalReferencedFiles;
+}
+
+function 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.
+ */
+function getPackageName(filePath: string): string|null {
+  const match = NODE_MODULES_PACKAGE_NAME.exec(filePath);
+  return match ? match[1] : null;
+}
+
+function stripNodeModulesPrefix(filePath: string): string {
+  return filePath.replace(/.*node_modules\//, '');
+}
+
+function getNodeModulesPrefix(filePath: string): string|null {
+  const match = /.*node_modules\//.exec(filePath);
+  return match ? match[1] : null;
+}
+
+function stripNgResourceSuffix(fileName: string): string {
+  return fileName.replace(/\.\$ngresource\$.*/, '');
+}
+
+function addNgResourceSuffix(fileName: string): string {
+  return `${fileName}.$ngresource$`;
+}
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 000000000000..9a574fa58692
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/entry_points.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
+ */
+
+import * as ts from 'typescript';
+
+import {CompilerHost, CompilerOptions, Program} from './api';
+
+export {createCompilerHost} from './compiler_host';
+export {createProgram} from './program';
diff --git a/packages/compiler-cli/src/transformers/inline_resources.ts b/packages/compiler-cli/src/transformers/inline_resources.ts
new file mode 100644
index 000000000000..cf2a4c401c03
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/inline_resources.ts
@@ -0,0 +1,324 @@
+/**
+ * @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 ts from 'typescript';
+
+import {MetadataObject, MetadataValue, isClassMetadata, isMetadataImportedSymbolReferenceExpression, isMetadataSymbolicCallExpression} from '../metadata/index';
+
+import {MetadataTransformer, ValueTransform} from './metadata_cache';
+
+const PRECONDITIONS_TEXT =
+    'angularCompilerOptions.enableResourceInlining requires all resources to be statically resolvable.';
+
+/** A subset of members from AotCompilerHost */
+export type ResourcesHost = {
+  resourceNameToFileName(resourceName: string, containingFileName: string): string | null;
+  loadResource(path: string): Promise<string>| string;
+};
+
+export type StaticResourceLoader = {
+  get(url: string | MetadataValue): string;
+};
+
+function getResourceLoader(host: ResourcesHost, containingFileName: string): StaticResourceLoader {
+  return {
+    get(url: string | MetadataValue): string{
+      if (typeof url !== 'string') {
+        throw new Error('templateUrl and stylesUrl must be string literals. ' + PRECONDITIONS_TEXT);
+      } const fileName = host.resourceNameToFileName(url, containingFileName);
+      if (fileName) {
+        const content = host.loadResource(fileName);
+        if (typeof content !== 'string') {
+          throw new Error('Cannot handle async resource. ' + PRECONDITIONS_TEXT);
+        }
+        return content;
+      } throw new Error(`Failed to resolve ${url} from ${containingFileName}. ${PRECONDITIONS_TEXT}`);
+    }
+  };
+}
+
+export class InlineResourcesMetadataTransformer implements MetadataTransformer {
+  constructor(private host: ResourcesHost) {}
+
+  start(sourceFile: ts.SourceFile): ValueTransform|undefined {
+    const loader = getResourceLoader(this.host, sourceFile.fileName);
+    return (value: MetadataValue, node: ts.Node): MetadataValue => {
+      if (isClassMetadata(value) && ts.isClassDeclaration(node) && value.decorators) {
+        value.decorators.forEach(d => {
+          if (isMetadataSymbolicCallExpression(d) &&
+              isMetadataImportedSymbolReferenceExpression(d.expression) &&
+              d.expression.module === '@angular/core' && d.expression.name === 'Component' &&
+              d.arguments) {
+            d.arguments = d.arguments.map(this.updateDecoratorMetadata.bind(this, loader));
+          }
+        });
+      }
+      return value;
+    };
+  }
+
+  updateDecoratorMetadata(loader: StaticResourceLoader, arg: MetadataObject): MetadataObject {
+    if (arg['templateUrl']) {
+      arg['template'] = loader.get(arg['templateUrl']);
+      delete arg.templateUrl;
+    }
+
+    const styles = arg['styles'] || [];
+    const styleUrls = arg['styleUrls'] || [];
+    if (!Array.isArray(styles)) throw new Error('styles should be an array');
+    if (!Array.isArray(styleUrls)) throw new Error('styleUrls should be an array');
+
+    styles.push(...styleUrls.map(styleUrl => loader.get(styleUrl)));
+    if (styles.length > 0) {
+      arg['styles'] = styles;
+      delete arg.styleUrls;
+    }
+
+    return arg;
+  }
+}
+
+export function getInlineResourcesTransformFactory(
+    program: ts.Program, host: ResourcesHost): ts.TransformerFactory<ts.SourceFile> {
+  return (context: ts.TransformationContext) => (sourceFile: ts.SourceFile) => {
+    const loader = getResourceLoader(host, sourceFile.fileName);
+    const visitor: ts.Visitor = node => {
+      // Components are always classes; skip any other node
+      if (!ts.isClassDeclaration(node)) {
+        return node;
+      }
+
+      // Decorator case - before or without decorator downleveling
+      // @Component()
+      const newDecorators = ts.visitNodes(node.decorators, (node: ts.Decorator) => {
+        if (isComponentDecorator(node, program.getTypeChecker())) {
+          return updateDecorator(node, loader);
+        }
+        return node;
+      });
+
+      // Annotation case - after decorator downleveling
+      // static decorators: {type: Function, args?: any[]}[]
+      const newMembers = ts.visitNodes(
+          node.members,
+          (node: ts.ClassElement) => updateAnnotations(node, loader, program.getTypeChecker()));
+
+      // Create a new AST subtree with our modifications
+      return ts.updateClassDeclaration(
+          node, newDecorators, node.modifiers, node.name, node.typeParameters,
+          node.heritageClauses || [], newMembers);
+    };
+
+    return ts.visitEachChild(sourceFile, visitor, context);
+  };
+}
+
+/**
+ * Update a Decorator AST node to inline the resources
+ * @param node the @Component decorator
+ * @param loader provides access to load resources
+ */
+function updateDecorator(node: ts.Decorator, loader: StaticResourceLoader): ts.Decorator {
+  if (!ts.isCallExpression(node.expression)) {
+    // User will get an error somewhere else with bare @Component
+    return node;
+  }
+  const expr = node.expression;
+  const newArguments = updateComponentProperties(expr.arguments, loader);
+  return ts.updateDecorator(
+      node, ts.updateCall(expr, expr.expression, expr.typeArguments, newArguments));
+}
+
+/**
+ * Update an Annotations AST node to inline the resources
+ * @param node the static decorators property
+ * @param loader provides access to load resources
+ * @param typeChecker provides access to symbol table
+ */
+function updateAnnotations(
+    node: ts.ClassElement, loader: StaticResourceLoader,
+    typeChecker: ts.TypeChecker): ts.ClassElement {
+  // Looking for a member of this shape:
+  // PropertyDeclaration called decorators, with static modifier
+  // Initializer is ArrayLiteralExpression
+  // One element is the Component type, its initializer is the @angular/core Component symbol
+  // One element is the component args, its initializer is the Component arguments to change
+  // e.g.
+  //   static decorators: {type: Function, args?: any[]}[] =
+  //   [{
+  //     type: Component,
+  //     args: [{
+  //       templateUrl: './my.component.html',
+  //       styleUrls: ['./my.component.css'],
+  //     }],
+  //   }];
+  if (!ts.isPropertyDeclaration(node) ||  // ts.ModifierFlags.Static &&
+      !ts.isIdentifier(node.name) || node.name.text !== 'decorators' || !node.initializer ||
+      !ts.isArrayLiteralExpression(node.initializer)) {
+    return node;
+  }
+
+  const newAnnotations = node.initializer.elements.map(annotation => {
+    // No-op if there's a non-object-literal mixed in the decorators values
+    if (!ts.isObjectLiteralExpression(annotation)) return annotation;
+
+    const decoratorType = annotation.properties.find(p => isIdentifierNamed(p, 'type'));
+
+    // No-op if there's no 'type' property, or if it's not initialized to the Component symbol
+    if (!decoratorType || !ts.isPropertyAssignment(decoratorType) ||
+        !ts.isIdentifier(decoratorType.initializer) ||
+        !isComponentSymbol(decoratorType.initializer, typeChecker)) {
+      return annotation;
+    }
+
+    const newAnnotation = annotation.properties.map(prop => {
+      // No-op if this isn't the 'args' property or if it's not initialized to an array
+      if (!isIdentifierNamed(prop, 'args') || !ts.isPropertyAssignment(prop) ||
+          !ts.isArrayLiteralExpression(prop.initializer))
+        return prop;
+
+      const newDecoratorArgs = ts.updatePropertyAssignment(
+          prop, prop.name,
+          ts.createArrayLiteral(updateComponentProperties(prop.initializer.elements, loader)));
+
+      return newDecoratorArgs;
+    });
+
+    return ts.updateObjectLiteral(annotation, newAnnotation);
+  });
+
+  return ts.updateProperty(
+      node, node.decorators, node.modifiers, node.name, node.questionToken, node.type,
+      ts.updateArrayLiteral(node.initializer, newAnnotations));
+}
+
+function isIdentifierNamed(p: ts.ObjectLiteralElementLike, name: string): boolean {
+  return !!p.name && ts.isIdentifier(p.name) && p.name.text === name;
+}
+
+/**
+ * Check that the node we are visiting is the actual Component decorator defined in @angular/core.
+ */
+function isComponentDecorator(node: ts.Decorator, typeChecker: ts.TypeChecker): boolean {
+  if (!ts.isCallExpression(node.expression)) {
+    return false;
+  }
+  const callExpr = node.expression;
+
+  let identifier: ts.Node;
+
+  if (ts.isIdentifier(callExpr.expression)) {
+    identifier = callExpr.expression;
+  } else {
+    return false;
+  }
+  return isComponentSymbol(identifier, typeChecker);
+}
+
+function isComponentSymbol(identifier: ts.Node, typeChecker: ts.TypeChecker) {
+  // Only handle identifiers, not expressions
+  if (!ts.isIdentifier(identifier)) return false;
+
+  // NOTE: resolver.getReferencedImportDeclaration would work as well but is internal
+  const symbol = typeChecker.getSymbolAtLocation(identifier);
+
+  if (!symbol || !symbol.declarations || !symbol.declarations.length) {
+    console.error(
+        `Unable to resolve symbol '${identifier.text}' in the program, does it type-check?`);
+    return false;
+  }
+
+  const declaration = symbol.declarations[0];
+
+  if (!declaration || !ts.isImportSpecifier(declaration)) {
+    return false;
+  }
+
+  const name = (declaration.propertyName || declaration.name).text;
+  // We know that parent pointers are set because we created the SourceFile ourselves.
+  // The number of parent references here match the recursion depth at this point.
+  const moduleId =
+      (declaration.parent !.parent !.parent !.moduleSpecifier as ts.StringLiteral).text;
+  return moduleId === '@angular/core' && name === 'Component';
+}
+
+/**
+ * For each property in the object literal, if it's templateUrl or styleUrls, replace it
+ * with content.
+ * @param node the arguments to @Component() or args property of decorators: [{type:Component}]
+ * @param loader provides access to the loadResource method of the host
+ * @returns updated arguments
+ */
+function updateComponentProperties(
+    args: ts.NodeArray<ts.Expression>, loader: StaticResourceLoader): ts.NodeArray<ts.Expression> {
+  if (args.length !== 1) {
+    // User should have gotten a type-check error because @Component takes one argument
+    return args;
+  }
+  const componentArg = args[0];
+  if (!ts.isObjectLiteralExpression(componentArg)) {
+    // User should have gotten a type-check error because @Component takes an object literal
+    // argument
+    return args;
+  }
+
+  const newProperties: ts.ObjectLiteralElementLike[] = [];
+  const newStyleExprs: ts.Expression[] = [];
+  componentArg.properties.forEach(prop => {
+    if (!ts.isPropertyAssignment(prop) || ts.isComputedPropertyName(prop.name)) {
+      newProperties.push(prop);
+      return;
+    }
+
+    switch (prop.name.text) {
+      case 'styles':
+        if (!ts.isArrayLiteralExpression(prop.initializer)) {
+          throw new Error('styles takes an array argument');
+        }
+        newStyleExprs.push(...prop.initializer.elements);
+        break;
+
+      case 'styleUrls':
+        if (!ts.isArrayLiteralExpression(prop.initializer)) {
+          throw new Error('styleUrls takes an array argument');
+        }
+        newStyleExprs.push(...prop.initializer.elements.map((expr: ts.Expression) => {
+          if (!ts.isStringLiteral(expr) && !ts.isNoSubstitutionTemplateLiteral(expr)) {
+            throw new Error(
+                'Can only accept string literal arguments to styleUrls. ' + PRECONDITIONS_TEXT);
+          }
+          const styles = loader.get(expr.text);
+          return ts.createLiteral(styles);
+        }));
+        break;
+
+      case 'templateUrl':
+        if (!ts.isStringLiteral(prop.initializer) &&
+            !ts.isNoSubstitutionTemplateLiteral(prop.initializer)) {
+          throw new Error(
+              'Can only accept a string literal argument to templateUrl. ' + PRECONDITIONS_TEXT);
+        }
+        const template = loader.get(prop.initializer.text);
+        newProperties.push(ts.updatePropertyAssignment(
+            prop, ts.createIdentifier('template'), ts.createLiteral(template)));
+        break;
+
+      default:
+        newProperties.push(prop);
+    }
+  });
+
+  // Add the non-inline styles
+  if (newStyleExprs.length > 0) {
+    const newStyles = ts.createPropertyAssignment(
+        ts.createIdentifier('styles'), ts.createArrayLiteral(newStyleExprs));
+    newProperties.push(newStyles);
+  }
+
+  return ts.createNodeArray([ts.updateObjectLiteral(componentArg, newProperties)]);
+}
diff --git a/packages/compiler-cli/src/transformers/lower_expressions.ts b/packages/compiler-cli/src/transformers/lower_expressions.ts
new file mode 100644
index 000000000000..6f346b754721
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/lower_expressions.ts
@@ -0,0 +1,403 @@
+/**
+ * @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 {createLoweredSymbol, isLoweredSymbol} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {CollectorOptions, MetadataCollector, MetadataValue, ModuleMetadata, isMetadataGlobalReferenceExpression} from '../metadata/index';
+import {MetadataCache, MetadataTransformer, ValueTransform} from './metadata_cache';
+
+export interface LoweringRequest {
+  kind: ts.SyntaxKind;
+  location: number;
+  end: number;
+  name: string;
+}
+
+export type RequestLocationMap = Map<number, LoweringRequest>;
+
+const enum DeclarationOrder { BeforeStmt, AfterStmt }
+
+interface Declaration {
+  name: string;
+  node: ts.Node;
+  order: DeclarationOrder;
+}
+
+interface DeclarationInsert {
+  declarations: Declaration[];
+  relativeTo: ts.Node;
+}
+
+function toMap<T, K>(items: T[], select: (item: T) => K): Map<K, T> {
+  return new Map(items.map<[K, T]>(i => [select(i), i]));
+}
+
+// We will never lower expressions in a nested lexical scope so avoid entering them.
+// This also avoids a bug in TypeScript 2.3 where the lexical scopes get out of sync
+// when using visitEachChild.
+function isLexicalScope(node: ts.Node): boolean {
+  switch (node.kind) {
+    case ts.SyntaxKind.ArrowFunction:
+    case ts.SyntaxKind.FunctionExpression:
+    case ts.SyntaxKind.FunctionDeclaration:
+    case ts.SyntaxKind.ClassExpression:
+    case ts.SyntaxKind.ClassDeclaration:
+    case ts.SyntaxKind.FunctionType:
+    case ts.SyntaxKind.TypeLiteral:
+    case ts.SyntaxKind.ArrayType:
+      return true;
+  }
+  return false;
+}
+
+function transformSourceFile(
+    sourceFile: ts.SourceFile, requests: RequestLocationMap,
+    context: ts.TransformationContext): ts.SourceFile {
+  const inserts: DeclarationInsert[] = [];
+
+  // Calculate the range of interesting locations. The transform will only visit nodes in this
+  // range to improve the performance on large files.
+  const locations = Array.from(requests.keys());
+  const min = Math.min(...locations);
+  const max = Math.max(...locations);
+
+  // Visit nodes matching the request and synthetic nodes added by tsickle
+  function shouldVisit(pos: number, end: number): boolean {
+    return (pos <= max && end >= min) || pos == -1;
+  }
+
+  function visitSourceFile(sourceFile: ts.SourceFile): ts.SourceFile {
+    function topLevelStatement(node: ts.Statement): ts.Statement {
+      const declarations: Declaration[] = [];
+
+      function visitNode(node: ts.Node): ts.Node {
+        // Get the original node before tsickle
+        const {pos, end, kind, parent: originalParent} = ts.getOriginalNode(node);
+        const nodeRequest = requests.get(pos);
+        if (nodeRequest && nodeRequest.kind == kind && nodeRequest.end == end) {
+          // This node is requested to be rewritten as a reference to the exported name.
+          if (originalParent && originalParent.kind === ts.SyntaxKind.VariableDeclaration) {
+            // As the value represents the whole initializer of a variable declaration,
+            // just refer to that variable. This e.g. helps to preserve closure comments
+            // at the right place.
+            const varParent = originalParent as ts.VariableDeclaration;
+            if (varParent.name.kind === ts.SyntaxKind.Identifier) {
+              const varName = varParent.name.text;
+              const exportName = nodeRequest.name;
+              declarations.push({
+                name: exportName,
+                node: ts.createIdentifier(varName),
+                order: DeclarationOrder.AfterStmt
+              });
+              return node;
+            }
+          }
+          // Record that the node needs to be moved to an exported variable with the given name
+          const exportName = nodeRequest.name;
+          declarations.push({name: exportName, node, order: DeclarationOrder.BeforeStmt});
+          return ts.createIdentifier(exportName);
+        }
+        let result = node;
+        if (shouldVisit(pos, end) && !isLexicalScope(node)) {
+          result = ts.visitEachChild(node, visitNode, context);
+        }
+        return result;
+      }
+
+      // Get the original node before tsickle
+      const {pos, end} = ts.getOriginalNode(node);
+      let resultStmt: ts.Statement;
+      if (shouldVisit(pos, end)) {
+        resultStmt = ts.visitEachChild(node, visitNode, context);
+      } else {
+        resultStmt = node;
+      }
+
+      if (declarations.length) {
+        inserts.push({relativeTo: resultStmt, declarations});
+      }
+      return resultStmt;
+    }
+
+    let newStatements = sourceFile.statements.map(topLevelStatement);
+
+    if (inserts.length) {
+      // Insert the declarations relative to the rewritten statement that references them.
+      const insertMap = toMap(inserts, i => i.relativeTo);
+      const tmpStatements: ts.Statement[] = [];
+      newStatements.forEach(statement => {
+        const insert = insertMap.get(statement);
+        if (insert) {
+          const before = insert.declarations.filter(d => d.order === DeclarationOrder.BeforeStmt);
+          if (before.length) {
+            tmpStatements.push(createVariableStatementForDeclarations(before));
+          }
+          tmpStatements.push(statement);
+          const after = insert.declarations.filter(d => d.order === DeclarationOrder.AfterStmt);
+          if (after.length) {
+            tmpStatements.push(createVariableStatementForDeclarations(after));
+          }
+        } else {
+          tmpStatements.push(statement);
+        }
+      });
+
+      // Insert an exports clause to export the declarations
+      tmpStatements.push(ts.createExportDeclaration(
+          /* decorators */ undefined,
+          /* modifiers */ undefined,
+          ts.createNamedExports(
+              inserts
+                  .reduce(
+                      (accumulator, insert) => [...accumulator, ...insert.declarations],
+                      [] as Declaration[])
+                  .map(
+                      declaration => ts.createExportSpecifier(
+                          /* propertyName */ undefined, declaration.name)))));
+
+      newStatements = tmpStatements;
+    }
+    // Note: We cannot use ts.updateSourcefile here as
+    // it does not work well with decorators.
+    // See https://github.com/Microsoft/TypeScript/issues/17384
+    const newSf = ts.getMutableClone(sourceFile);
+    if (!(sourceFile.flags & ts.NodeFlags.Synthesized)) {
+      newSf.flags &= ~ts.NodeFlags.Synthesized;
+    }
+    newSf.statements = ts.setTextRange(ts.createNodeArray(newStatements), sourceFile.statements);
+    return newSf;
+  }
+
+  return visitSourceFile(sourceFile);
+}
+
+function createVariableStatementForDeclarations(declarations: Declaration[]): ts.VariableStatement {
+  const varDecls = declarations.map(
+      i => ts.createVariableDeclaration(i.name, /* type */ undefined, i.node as ts.Expression));
+  return ts.createVariableStatement(
+      /* modifiers */ undefined, ts.createVariableDeclarationList(varDecls, ts.NodeFlags.Const));
+}
+
+export function getExpressionLoweringTransformFactory(
+    requestsMap: RequestsMap, program: ts.Program): (context: ts.TransformationContext) =>
+    (sourceFile: ts.SourceFile) => ts.SourceFile {
+  // Return the factory
+  return (context: ts.TransformationContext) => (sourceFile: ts.SourceFile): ts.SourceFile => {
+    // We need to use the original SourceFile for reading metadata, and not the transformed one.
+    const originalFile = program.getSourceFile(sourceFile.fileName);
+    if (originalFile) {
+      const requests = requestsMap.getRequests(originalFile);
+      if (requests && requests.size) {
+        return transformSourceFile(sourceFile, requests, context);
+      }
+    }
+    return sourceFile;
+  };
+}
+
+export interface RequestsMap { getRequests(sourceFile: ts.SourceFile): RequestLocationMap; }
+
+interface MetadataAndLoweringRequests {
+  metadata: ModuleMetadata|undefined;
+  requests: RequestLocationMap;
+}
+
+function isEligibleForLowering(node: ts.Node | undefined): boolean {
+  if (node) {
+    switch (node.kind) {
+      case ts.SyntaxKind.SourceFile:
+      case ts.SyntaxKind.Decorator:
+        // Lower expressions that are local to the module scope or
+        // in a decorator.
+        return true;
+      case ts.SyntaxKind.ClassDeclaration:
+      case ts.SyntaxKind.InterfaceDeclaration:
+      case ts.SyntaxKind.EnumDeclaration:
+      case ts.SyntaxKind.FunctionDeclaration:
+        // Don't lower expressions in a declaration.
+        return false;
+      case ts.SyntaxKind.VariableDeclaration:
+        // Avoid lowering expressions already in an exported variable declaration
+        return (ts.getCombinedModifierFlags(node) & ts.ModifierFlags.Export) == 0;
+    }
+    return isEligibleForLowering(node.parent);
+  }
+  return true;
+}
+
+function isPrimitive(value: any): boolean {
+  return Object(value) !== value;
+}
+
+function isRewritten(value: any): boolean {
+  return isMetadataGlobalReferenceExpression(value) && isLoweredSymbol(value.name);
+}
+
+function isLiteralFieldNamed(node: ts.Node, names: Set<string>): boolean {
+  if (node.parent && node.parent.kind == ts.SyntaxKind.PropertyAssignment) {
+    const property = node.parent as ts.PropertyAssignment;
+    if (property.parent && property.parent.kind == ts.SyntaxKind.ObjectLiteralExpression &&
+        property.name && property.name.kind == ts.SyntaxKind.Identifier) {
+      const propertyName = property.name as ts.Identifier;
+      return names.has(propertyName.text);
+    }
+  }
+  return false;
+}
+
+export class LowerMetadataTransform implements RequestsMap, MetadataTransformer {
+  // TODO(issue/24571): remove '!'.
+  private cache !: MetadataCache;
+  private requests = new Map<string, RequestLocationMap>();
+  private lowerableFieldNames: Set<string>;
+
+  constructor(lowerableFieldNames: string[]) {
+    this.lowerableFieldNames = new Set<string>(lowerableFieldNames);
+  }
+
+  // RequestMap
+  getRequests(sourceFile: ts.SourceFile): RequestLocationMap {
+    let result = this.requests.get(sourceFile.fileName);
+    if (!result) {
+      // Force the metadata for this source file to be collected which
+      // will recursively call start() populating the request map;
+      this.cache.getMetadata(sourceFile);
+
+      // If we still don't have the requested metadata, the file is not a module
+      // or is a declaration file so return an empty map.
+      result = this.requests.get(sourceFile.fileName) || new Map<number, LoweringRequest>();
+    }
+    return result;
+  }
+
+  // MetadataTransformer
+  connect(cache: MetadataCache): void { this.cache = cache; }
+
+  start(sourceFile: ts.SourceFile): ValueTransform|undefined {
+    let identNumber = 0;
+    const freshIdent = () => createLoweredSymbol(identNumber++);
+    const requests = new Map<number, LoweringRequest>();
+    this.requests.set(sourceFile.fileName, requests);
+
+    const replaceNode = (node: ts.Node) => {
+      const name = freshIdent();
+      requests.set(node.pos, {name, kind: node.kind, location: node.pos, end: node.end});
+      return {__symbolic: 'reference', name};
+    };
+
+    const isExportedSymbol = (() => {
+      let exportTable: Set<string>;
+      return (node: ts.Node) => {
+        if (node.kind == ts.SyntaxKind.Identifier) {
+          const ident = node as ts.Identifier;
+
+          if (!exportTable) {
+            exportTable = createExportTableFor(sourceFile);
+          }
+          return exportTable.has(ident.text);
+        }
+        return false;
+      };
+    })();
+
+    const isExportedPropertyAccess = (node: ts.Node) => {
+      if (node.kind === ts.SyntaxKind.PropertyAccessExpression) {
+        const pae = node as ts.PropertyAccessExpression;
+        if (isExportedSymbol(pae.expression)) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    const hasLowerableParentCache = new Map<ts.Node, boolean>();
+
+    const shouldBeLowered = (node: ts.Node | undefined): boolean => {
+      if (node === undefined) {
+        return false;
+      }
+      let lowerable: boolean = false;
+      if ((node.kind === ts.SyntaxKind.ArrowFunction ||
+           node.kind === ts.SyntaxKind.FunctionExpression) &&
+          isEligibleForLowering(node)) {
+        lowerable = true;
+      } else if (
+          isLiteralFieldNamed(node, this.lowerableFieldNames) && isEligibleForLowering(node) &&
+          !isExportedSymbol(node) && !isExportedPropertyAccess(node)) {
+        lowerable = true;
+      }
+      return lowerable;
+    };
+
+    const hasLowerableParent = (node: ts.Node | undefined): boolean => {
+      if (node === undefined) {
+        return false;
+      }
+      if (!hasLowerableParentCache.has(node)) {
+        hasLowerableParentCache.set(
+            node, shouldBeLowered(node.parent) || hasLowerableParent(node.parent));
+      }
+      return hasLowerableParentCache.get(node) !;
+    };
+
+    const isLowerable = (node: ts.Node | undefined): boolean => {
+      if (node === undefined) {
+        return false;
+      }
+      return shouldBeLowered(node) && !hasLowerableParent(node);
+    };
+
+    return (value: MetadataValue, node: ts.Node): MetadataValue => {
+      if (!isPrimitive(value) && !isRewritten(value) && isLowerable(node)) {
+        return replaceNode(node);
+      }
+      return value;
+    };
+  }
+}
+
+function createExportTableFor(sourceFile: ts.SourceFile): Set<string> {
+  const exportTable = new Set<string>();
+  // Lazily collect all the exports from the source file
+  ts.forEachChild(sourceFile, function scan(node) {
+    switch (node.kind) {
+      case ts.SyntaxKind.ClassDeclaration:
+      case ts.SyntaxKind.FunctionDeclaration:
+      case ts.SyntaxKind.InterfaceDeclaration:
+        if ((ts.getCombinedModifierFlags(node) & ts.ModifierFlags.Export) != 0) {
+          const classDeclaration =
+              node as(ts.ClassDeclaration | ts.FunctionDeclaration | ts.InterfaceDeclaration);
+          const name = classDeclaration.name;
+          if (name) exportTable.add(name.text);
+        }
+        break;
+      case ts.SyntaxKind.VariableStatement:
+        const variableStatement = node as ts.VariableStatement;
+        for (const declaration of variableStatement.declarationList.declarations) {
+          scan(declaration);
+        }
+        break;
+      case ts.SyntaxKind.VariableDeclaration:
+        const variableDeclaration = node as ts.VariableDeclaration;
+        if ((ts.getCombinedModifierFlags(node) & ts.ModifierFlags.Export) != 0 &&
+            variableDeclaration.name.kind == ts.SyntaxKind.Identifier) {
+          const name = variableDeclaration.name as ts.Identifier;
+          exportTable.add(name.text);
+        }
+        break;
+      case ts.SyntaxKind.ExportDeclaration:
+        const exportDeclaration = node as ts.ExportDeclaration;
+        const {moduleSpecifier, exportClause} = exportDeclaration;
+        if (!moduleSpecifier && exportClause) {
+          exportClause.elements.forEach(spec => { exportTable.add(spec.name.text); });
+        }
+    }
+  });
+  return exportTable;
+}
diff --git a/packages/compiler-cli/src/transformers/metadata_cache.ts b/packages/compiler-cli/src/transformers/metadata_cache.ts
new file mode 100644
index 000000000000..c8846c39bd55
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/metadata_cache.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 ts from 'typescript';
+
+import {MetadataCollector, MetadataValue, ModuleMetadata} from '../metadata/index';
+
+import {MetadataProvider} from './compiler_host';
+import {TS} from './util';
+
+export type ValueTransform = (value: MetadataValue, node: ts.Node) => MetadataValue;
+
+export interface MetadataTransformer {
+  connect?(cache: MetadataCache): void;
+  start(sourceFile: ts.SourceFile): ValueTransform|undefined;
+}
+
+/**
+ * Cache, and potentially transform, metadata as it is being collected.
+ */
+export class MetadataCache implements MetadataProvider {
+  private metadataCache = new Map<string, ModuleMetadata|undefined>();
+
+  constructor(
+      private collector: MetadataCollector, private readonly strict: boolean,
+      private transformers: MetadataTransformer[]) {
+    for (let transformer of transformers) {
+      if (transformer.connect) {
+        transformer.connect(this);
+      }
+    }
+  }
+
+  getMetadata(sourceFile: ts.SourceFile): ModuleMetadata|undefined {
+    if (this.metadataCache.has(sourceFile.fileName)) {
+      return this.metadataCache.get(sourceFile.fileName);
+    }
+    let substitute: ValueTransform|undefined = undefined;
+
+    // Only process transformers on modules that are not declaration files.
+    const declarationFile = sourceFile.isDeclarationFile;
+    const moduleFile = ts.isExternalModule(sourceFile);
+    if (!declarationFile && moduleFile) {
+      for (let transform of this.transformers) {
+        const transformSubstitute = transform.start(sourceFile);
+        if (transformSubstitute) {
+          if (substitute) {
+            const previous: ValueTransform = substitute;
+            substitute = (value: MetadataValue, node: ts.Node) =>
+                transformSubstitute(previous(value, node), node);
+          } else {
+            substitute = transformSubstitute;
+          }
+        }
+      }
+    }
+
+    const isTsFile = TS.test(sourceFile.fileName);
+    const result = this.collector.getMetadata(sourceFile, this.strict && isTsFile, substitute);
+    this.metadataCache.set(sourceFile.fileName, result);
+    return result;
+  }
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/transformers/metadata_reader.ts b/packages/compiler-cli/src/transformers/metadata_reader.ts
new file mode 100644
index 000000000000..c7badeb962e5
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/metadata_reader.ts
@@ -0,0 +1,129 @@
+/**
+ * @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 ts from 'typescript';
+
+import {METADATA_VERSION, ModuleMetadata} from '../metadata';
+
+import {DTS} from './util';
+
+export interface MetadataReaderHost {
+  getSourceFileMetadata(filePath: string): ModuleMetadata|undefined;
+  cacheMetadata?(fileName: string): boolean;
+  fileExists(filePath: string): boolean;
+  readFile(filePath: string): string;
+}
+
+export interface MetadataReaderCache {
+  /**
+   * @internal
+   */
+  data: Map<string, ModuleMetadata[]|undefined>;
+}
+
+export function createMetadataReaderCache(): MetadataReaderCache {
+  const data = new Map<string, ModuleMetadata[]|undefined>();
+  return {data};
+}
+
+export function readMetadata(
+    filePath: string, host: MetadataReaderHost, cache?: MetadataReaderCache): ModuleMetadata[]|
+    undefined {
+  let metadatas = cache && cache.data.get(filePath);
+  if (metadatas) {
+    return metadatas;
+  }
+  if (host.fileExists(filePath)) {
+    // If the file doesn't exists then we cannot return metadata for the file.
+    // This will occur if the user referenced a declared module for which no file
+    // exists for the module (i.e. jQuery or angularjs).
+    if (DTS.test(filePath)) {
+      metadatas = readMetadataFile(host, filePath);
+      if (!metadatas) {
+        // If there is a .d.ts file but no metadata file we need to produce a
+        // metadata from the .d.ts file as metadata files capture reexports
+        // (starting with v3).
+        metadatas = [upgradeMetadataWithDtsData(
+            host, {'__symbolic': 'module', 'version': 1, 'metadata': {}}, filePath)];
+      }
+    } else {
+      const metadata = host.getSourceFileMetadata(filePath);
+      metadatas = metadata ? [metadata] : [];
+    }
+  }
+  if (cache && (!host.cacheMetadata || host.cacheMetadata(filePath))) {
+    cache.data.set(filePath, metadatas);
+  }
+  return metadatas;
+}
+
+
+function readMetadataFile(host: MetadataReaderHost, dtsFilePath: string): ModuleMetadata[]|
+    undefined {
+  const metadataPath = dtsFilePath.replace(DTS, '.metadata.json');
+  if (!host.fileExists(metadataPath)) {
+    return undefined;
+  }
+  try {
+    const metadataOrMetadatas = JSON.parse(host.readFile(metadataPath));
+    const metadatas: ModuleMetadata[] = metadataOrMetadatas ?
+        (Array.isArray(metadataOrMetadatas) ? metadataOrMetadatas : [metadataOrMetadatas]) :
+        [];
+    if (metadatas.length) {
+      let maxMetadata = metadatas.reduce((p, c) => p.version > c.version ? p : c);
+      if (maxMetadata.version < METADATA_VERSION) {
+        metadatas.push(upgradeMetadataWithDtsData(host, maxMetadata, dtsFilePath));
+      }
+    }
+    return metadatas;
+  } catch (e) {
+    console.error(`Failed to read JSON file ${metadataPath}`);
+    throw e;
+  }
+}
+
+function upgradeMetadataWithDtsData(
+    host: MetadataReaderHost, oldMetadata: ModuleMetadata, dtsFilePath: string): ModuleMetadata {
+  // patch v1 to v3 by adding exports and the `extends` clause.
+  // patch v3 to v4 by adding `interface` symbols for TypeAlias
+  let newMetadata: ModuleMetadata = {
+    '__symbolic': 'module',
+    'version': METADATA_VERSION,
+    'metadata': {...oldMetadata.metadata},
+  };
+  if (oldMetadata.exports) {
+    newMetadata.exports = oldMetadata.exports;
+  }
+  if (oldMetadata.importAs) {
+    newMetadata.importAs = oldMetadata.importAs;
+  }
+  if (oldMetadata.origins) {
+    newMetadata.origins = oldMetadata.origins;
+  }
+  const dtsMetadata = host.getSourceFileMetadata(dtsFilePath);
+  if (dtsMetadata) {
+    for (let prop in dtsMetadata.metadata) {
+      if (!newMetadata.metadata[prop]) {
+        newMetadata.metadata[prop] = dtsMetadata.metadata[prop];
+      }
+    }
+    if (dtsMetadata['importAs']) newMetadata['importAs'] = dtsMetadata['importAs'];
+
+    // Only copy exports from exports from metadata prior to version 3.
+    // Starting with version 3 the collector began collecting exports and
+    // this should be redundant. Also, with bundler will rewrite the exports
+    // which will hoist the exports from modules referenced indirectly causing
+    // the imports to be different than the .d.ts files and using the .d.ts file
+    // exports would cause the StaticSymbolResolver to redirect symbols to the
+    // incorrect location.
+    if ((!oldMetadata.version || oldMetadata.version < 3) && dtsMetadata.exports) {
+      newMetadata.exports = dtsMetadata.exports;
+    }
+  }
+  return newMetadata;
+}
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 000000000000..66c31a14582f
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/node_emitter.ts
@@ -0,0 +1,743 @@
+/**
+ * @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, ConditionalExpr, DeclareFunctionStmt, DeclareVarStmt, ExpressionStatement, ExpressionVisitor, ExternalExpr, ExternalReference, FunctionExpr, IfStmt, InstantiateExpr, InvokeFunctionExpr, InvokeMethodExpr, JSDocCommentStmt, LiteralArrayExpr, LiteralExpr, LiteralMapExpr, NotExpr, ParseSourceFile, ParseSourceSpan, PartialModule, ReadKeyExpr, ReadPropExpr, ReadVarExpr, ReturnStatement, Statement, StatementVisitor, StmtModifier, ThrowStmt, TryCatchStmt, TypeofExpr, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {error} from './util';
+
+export interface Node { sourceSpan: ParseSourceSpan|null; }
+
+const METHOD_THIS_NAME = 'this';
+const CATCH_ERROR_NAME = 'error';
+const CATCH_STACK_NAME = 'stack';
+const _VALID_IDENTIFIER_RE = /^[$A-Z_][0-9A-Z_$]*$/i;
+
+export class TypeScriptNodeEmitter {
+  updateSourceFile(sourceFile: ts.SourceFile, stmts: Statement[], preamble?: string):
+      [ts.SourceFile, Map<ts.Node, Node>] {
+    const converter = new NodeEmitterVisitor();
+    // [].concat flattens the result so that each `visit...` method can also return an array of
+    // stmts.
+    const statements: any[] = [].concat(
+        ...stmts.map(stmt => stmt.visitStatement(converter, null)).filter(stmt => stmt != null));
+    const preambleStmts: ts.Statement[] = [];
+    if (preamble) {
+      const commentStmt = this.createCommentStatement(sourceFile, preamble);
+      preambleStmts.push(commentStmt);
+    }
+    const sourceStatements =
+        [...preambleStmts, ...converter.getReexports(), ...converter.getImports(), ...statements];
+    converter.updateSourceMap(sourceStatements);
+    const newSourceFile = ts.updateSourceFileNode(sourceFile, sourceStatements);
+    return [newSourceFile, converter.getNodeMap()];
+  }
+
+  /** Creates a not emitted statement containing the given comment. */
+  createCommentStatement(sourceFile: ts.SourceFile, comment: string): ts.Statement {
+    if (comment.startsWith('/*') && comment.endsWith('*/')) {
+      comment = comment.substr(2, comment.length - 4);
+    }
+    const commentStmt = ts.createNotEmittedStatement(sourceFile);
+    ts.setSyntheticLeadingComments(
+        commentStmt,
+        [{kind: ts.SyntaxKind.MultiLineCommentTrivia, text: comment, pos: -1, end: -1}]);
+    ts.setEmitFlags(commentStmt, ts.EmitFlags.CustomPrologue);
+    return commentStmt;
+  }
+}
+
+/**
+ * Update the given source file to include the changes specified in module.
+ *
+ * The module parameter is treated as a partial module meaning that the statements are added to
+ * the module instead of replacing the module. Also, any classes are treated as partial classes
+ * and the included members are added to the class with the same name instead of a new class
+ * being created.
+ */
+export function updateSourceFile(
+    sourceFile: ts.SourceFile, module: PartialModule,
+    context: ts.TransformationContext): [ts.SourceFile, Map<ts.Node, Node>] {
+  const converter = new NodeEmitterVisitor();
+  converter.loadExportedVariableIdentifiers(sourceFile);
+
+  const prefixStatements = module.statements.filter(statement => !(statement instanceof ClassStmt));
+  const classes =
+      module.statements.filter(statement => statement instanceof ClassStmt) as ClassStmt[];
+  const classMap = new Map(
+      classes.map<[string, ClassStmt]>(classStatement => [classStatement.name, classStatement]));
+  const classNames = new Set(classes.map(classStatement => classStatement.name));
+
+  const prefix: ts.Statement[] =
+      prefixStatements.map(statement => statement.visitStatement(converter, sourceFile));
+
+  // Add static methods to all the classes referenced in module.
+  let newStatements = sourceFile.statements.map(node => {
+    if (node.kind == ts.SyntaxKind.ClassDeclaration) {
+      const classDeclaration = node as ts.ClassDeclaration;
+      const name = classDeclaration.name;
+      if (name) {
+        const classStatement = classMap.get(name.text);
+        if (classStatement) {
+          classNames.delete(name.text);
+          const classMemberHolder =
+              converter.visitDeclareClassStmt(classStatement) as ts.ClassDeclaration;
+          const newMethods =
+              classMemberHolder.members.filter(member => member.kind !== ts.SyntaxKind.Constructor);
+          const newMembers = [...classDeclaration.members, ...newMethods];
+
+          return ts.updateClassDeclaration(
+              classDeclaration,
+              /* decorators */ classDeclaration.decorators,
+              /* modifiers */ classDeclaration.modifiers,
+              /* name */ classDeclaration.name,
+              /* typeParameters */ classDeclaration.typeParameters,
+              /* heritageClauses */ classDeclaration.heritageClauses || [],
+              /* members */ newMembers);
+        }
+      }
+    }
+    return node;
+  });
+
+  // Validate that all the classes have been generated
+  classNames.size == 0 ||
+      error(
+          `${classNames.size == 1 ? 'Class' : 'Classes'} "${Array.from(classNames.keys()).join(', ')}" not generated`);
+
+  // Add imports to the module required by the new methods
+  const imports = converter.getImports();
+  if (imports && imports.length) {
+    // Find where the new imports should go
+    const index = firstAfter(
+        newStatements, statement => statement.kind === ts.SyntaxKind.ImportDeclaration ||
+            statement.kind === ts.SyntaxKind.ImportEqualsDeclaration);
+    newStatements =
+        [...newStatements.slice(0, index), ...imports, ...prefix, ...newStatements.slice(index)];
+  } else {
+    newStatements = [...prefix, ...newStatements];
+  }
+
+  converter.updateSourceMap(newStatements);
+  const newSourceFile = ts.updateSourceFileNode(sourceFile, newStatements);
+
+  return [newSourceFile, converter.getNodeMap()];
+}
+
+// Return the index after the first value in `a` that doesn't match the predicate after a value that
+// does or 0 if no values match.
+function firstAfter<T>(a: T[], predicate: (value: T) => boolean) {
+  let index = 0;
+  const len = a.length;
+  for (; index < len; index++) {
+    const value = a[index];
+    if (predicate(value)) break;
+  }
+  if (index >= len) return 0;
+  for (; index < len; index++) {
+    const value = a[index];
+    if (!predicate(value)) break;
+  }
+  return index;
+}
+
+// A recorded node is a subtype of the node that is marked as being recorded. This is used
+// to ensure that NodeEmitterVisitor.record has been called on all nodes returned by the
+// NodeEmitterVisitor
+export type RecordedNode<T extends ts.Node = ts.Node> = (T & { __recorded: any;}) | null;
+
+function escapeLiteral(value: string): string {
+  return value.replace(/(\"|\\)/g, '\\$1').replace(/(\n)|(\r)/g, function(v, n, r) {
+    return n ? '\\n' : '\\r';
+  });
+}
+
+function createLiteral(value: any) {
+  if (value === null) {
+    return ts.createNull();
+  } else if (value === undefined) {
+    return ts.createIdentifier('undefined');
+  } else {
+    const result = ts.createLiteral(value);
+    if (ts.isStringLiteral(result) && result.text.indexOf('\\') >= 0) {
+      // Hack to avoid problems cause indirectly by:
+      //    https://github.com/Microsoft/TypeScript/issues/20192
+      // This avoids the string escaping normally performed for a string relying on that
+      // TypeScript just emits the text raw for a numeric literal.
+      (result as any).kind = ts.SyntaxKind.NumericLiteral;
+      result.text = `"${escapeLiteral(result.text)}"`;
+    }
+    return result;
+  }
+}
+
+function isExportTypeStatement(statement: ts.Statement): boolean {
+  return !!statement.modifiers &&
+      statement.modifiers.some(mod => mod.kind === ts.SyntaxKind.ExportKeyword);
+}
+
+/**
+ * Visits an output ast and produces the corresponding TypeScript synthetic nodes.
+ */
+export 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}[]>();
+  private _templateSources = new Map<ParseSourceFile, ts.SourceMapSource>();
+  private _exportedVariableIdentifiers = new Map<string, ts.Identifier>();
+
+  /**
+   * Process the source file and collect exported identifiers that refer to variables.
+   *
+   * Only variables are collected because exported classes still exist in the module scope in
+   * CommonJS, whereas variables have their declarations moved onto the `exports` object, and all
+   * references are updated accordingly.
+   */
+  loadExportedVariableIdentifiers(sourceFile: ts.SourceFile): void {
+    sourceFile.statements.forEach(statement => {
+      if (ts.isVariableStatement(statement) && isExportTypeStatement(statement)) {
+        statement.declarationList.declarations.forEach(declaration => {
+          if (ts.isIdentifier(declaration.name)) {
+            this._exportedVariableIdentifiers.set(declaration.name.text, declaration.name);
+          }
+        });
+      }
+    });
+  }
+
+  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; }
+
+  updateSourceMap(statements: ts.Statement[]) {
+    let lastRangeStartNode: ts.Node|undefined = undefined;
+    let lastRangeEndNode: ts.Node|undefined = undefined;
+    let lastRange: ts.SourceMapRange|undefined = undefined;
+
+    const recordLastSourceRange = () => {
+      if (lastRange && lastRangeStartNode && lastRangeEndNode) {
+        if (lastRangeStartNode == lastRangeEndNode) {
+          ts.setSourceMapRange(lastRangeEndNode, lastRange);
+        } else {
+          ts.setSourceMapRange(lastRangeStartNode, lastRange);
+          // Only emit the pos for the first node emitted in the range.
+          ts.setEmitFlags(lastRangeStartNode, ts.EmitFlags.NoTrailingSourceMap);
+          ts.setSourceMapRange(lastRangeEndNode, lastRange);
+          // Only emit emit end for the last node emitted in the range.
+          ts.setEmitFlags(lastRangeEndNode, ts.EmitFlags.NoLeadingSourceMap);
+        }
+      }
+    };
+
+    const visitNode = (tsNode: ts.Node) => {
+      const ngNode = this._nodeMap.get(tsNode);
+      if (ngNode) {
+        const range = this.sourceRangeOf(ngNode);
+        if (range) {
+          if (!lastRange || range.source != lastRange.source || range.pos != lastRange.pos ||
+              range.end != lastRange.end) {
+            recordLastSourceRange();
+            lastRangeStartNode = tsNode;
+            lastRange = range;
+          }
+          lastRangeEndNode = tsNode;
+        }
+      }
+      ts.forEachChild(tsNode, visitNode);
+    };
+    statements.forEach(visitNode);
+    recordLastSourceRange();
+  }
+
+  private record<T extends ts.Node>(ngNode: Node, tsNode: T|null): RecordedNode<T> {
+    if (tsNode && !this._nodeMap.has(tsNode)) {
+      this._nodeMap.set(tsNode, ngNode);
+    }
+    return tsNode as RecordedNode<T>;
+  }
+
+  private sourceRangeOf(node: Node): ts.SourceMapRange|null {
+    if (node.sourceSpan) {
+      const span = node.sourceSpan;
+      if (span.start.file == span.end.file) {
+        const file = span.start.file;
+        if (file.url) {
+          let source = this._templateSources.get(file);
+          if (!source) {
+            source = ts.createSourceMapSource(file.url, file.content, pos => pos);
+            this._templateSources.set(file, source);
+          }
+          return {pos: span.start.offset, end: span.end.offset, source};
+        }
+      }
+    }
+    return null;
+  }
+
+  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;
+      }
+    }
+
+    const varDeclList = ts.createVariableDeclarationList([ts.createVariableDeclaration(
+        ts.createIdentifier(stmt.name),
+        /* type */ undefined,
+        (stmt.value && stmt.value.visitExpression(this, null)) || undefined)]);
+
+    if (stmt.hasModifier(StmtModifier.Exported)) {
+      // Note: We need to add an explicit variable and export declaration so that
+      // the variable can be referred in the same file as well.
+      const tsVarStmt =
+          this.record(stmt, ts.createVariableStatement(/* modifiers */[], varDeclList));
+      const exportStmt = this.record(
+          stmt, ts.createExportDeclaration(
+                    /*decorators*/ undefined, /*modifiers*/ undefined,
+                    ts.createNamedExports([ts.createExportSpecifier(stmt.name, stmt.name)])));
+      return [tsVarStmt, exportStmt];
+    }
+    return this.record(stmt, ts.createVariableStatement(this.getModifiers(stmt), varDeclList));
+  }
+
+  visitDeclareFunctionStmt(stmt: DeclareFunctionStmt) {
+    return this.record(
+        stmt, ts.createFunctionDeclaration(
+                  /* decorators */ undefined, this.getModifiers(stmt),
+                  /* asteriskToken */ 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 */ translateModifiers(field.modifiers),
+            field.name,
+            /* questionToken */ undefined,
+            /* type */ undefined,
+            field.initializer == null ? ts.createNull() :
+                                        field.initializer.visitExpression(this, null)));
+    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.createMethod(
+                                /* decorators */ undefined,
+                                /* modifiers */ translateModifiers(method.modifiers),
+                                /* 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, sourceFile: ts.SourceFile) {
+    const text = stmt.multiline ? ` ${stmt.comment} ` : ` ${stmt.comment}`;
+    return this.createCommentStmt(text, stmt.multiline, sourceFile);
+  }
+
+  visitJSDocCommentStmt(stmt: JSDocCommentStmt, sourceFile: ts.SourceFile) {
+    return this.createCommentStmt(stmt.toString(), true, sourceFile);
+  }
+
+  private createCommentStmt(text: string, multiline: boolean, sourceFile: ts.SourceFile):
+      ts.NotEmittedStatement {
+    const commentStmt = ts.createNotEmittedStatement(sourceFile);
+    const kind =
+        multiline ? ts.SyntaxKind.MultiLineCommentTrivia : ts.SyntaxKind.SingleLineCommentTrivia;
+    ts.setSyntheticLeadingComments(commentStmt, [{kind, text, pos: -1, end: -1}]);
+    return commentStmt;
+  }
+
+  // ExpressionVisitor
+  visitWrappedNodeExpr(expr: WrappedNodeExpr<any>) { return this.record(expr, expr.node); }
+
+  visitTypeofExpr(expr: TypeofExpr) {
+    const typeOf = ts.createTypeOf(expr.expr.visitExpression(this, null));
+    return this.record(expr, typeOf);
+  }
+
+  // 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.ParenthesizedExpression> {
+    // TODO {chuckj}: Review use of ! on falseCase. Should it be non-nullable?
+    return this.record(
+        expr,
+        ts.createParen(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 */ expr.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|ts.ParenthesizedExpression> {
+    let binaryOperator: ts.BinaryOperator;
+    switch (expr.operator) {
+      case BinaryOperator.And:
+        binaryOperator = ts.SyntaxKind.AmpersandAmpersandToken;
+        break;
+      case BinaryOperator.BitwiseAnd:
+        binaryOperator = ts.SyntaxKind.AmpersandToken;
+        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}`);
+    }
+    const binary = ts.createBinary(
+        expr.lhs.visitExpression(this, null), binaryOperator, expr.rhs.visitExpression(this, null));
+    return this.record(expr, expr.parens ? ts.createParen(binary) : binary);
+  }
+
+  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 || !_VALID_IDENTIFIER_RE.test(entry.key) ?
+                          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 {
+    // name can only be null during JIT which never executes this code.
+    const moduleName = value.moduleName, name = value.name !;
+    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);
+    }
+    if (prefixIdent) {
+      return ts.createPropertyAccess(prefixIdent, name);
+    } else {
+      const id = ts.createIdentifier(name);
+      if (this._exportedVariableIdentifiers.has(name)) {
+        // In order for this new identifier node to be properly rewritten in CommonJS output,
+        // it must have its original node set to a parsed instance of the same identifier.
+        ts.setOriginalNode(id, this._exportedVariableIdentifiers.get(name));
+      }
+      return id;
+    }
+  }
+}
+
+
+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');
+}
+
+function modifierFromModifier(modifier: StmtModifier): ts.Modifier {
+  switch (modifier) {
+    case StmtModifier.Exported:
+      return ts.createToken(ts.SyntaxKind.ExportKeyword);
+    case StmtModifier.Final:
+      return ts.createToken(ts.SyntaxKind.ConstKeyword);
+    case StmtModifier.Private:
+      return ts.createToken(ts.SyntaxKind.PrivateKeyword);
+    case StmtModifier.Static:
+      return ts.createToken(ts.SyntaxKind.StaticKeyword);
+  }
+  return error(`unknown statement modifier`);
+}
+
+function translateModifiers(modifiers: StmtModifier[] | null): ts.Modifier[]|undefined {
+  return modifiers == null ? undefined : modifiers !.map(modifierFromModifier);
+}
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 000000000000..0f2e4f6fb7e3
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/node_emitter_transform.ts
@@ -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 {GeneratedFile} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {TypeScriptNodeEmitter} from './node_emitter';
+import {GENERATED_FILES} from './util';
+
+function getPreamble(original: string) {
+  return `/**
+ * @fileoverview This file was generated by the Angular template compiler. Do not edit.
+ * ${original}
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
+ * tslint:disable
+ */`;
+}
+
+/**
+ * Returns a transformer that does two things for generated files (ngfactory etc):
+ * - adds a fileoverview JSDoc comment containing Closure Compiler specific "suppress"ions in JSDoc.
+ *   The new comment will contain any fileoverview comment text from the original source file this
+ *   file was generated from.
+ * - updates generated files that are not in the given map of generatedFiles to have an empty
+ *   list of statements as their body.
+ */
+export function getAngularEmitterTransformFactory(
+    generatedFiles: Map<string, GeneratedFile>, program: ts.Program): () =>
+    (sourceFile: ts.SourceFile) => ts.SourceFile {
+  return function() {
+    const emitter = new TypeScriptNodeEmitter();
+    return function(sourceFile: ts.SourceFile): ts.SourceFile {
+      const g = generatedFiles.get(sourceFile.fileName);
+      const orig = g && program.getSourceFile(g.srcFileUrl);
+      let originalComment = '';
+      if (orig) originalComment = getFileoverviewComment(orig);
+      const preamble = getPreamble(originalComment);
+      if (g && g.stmts) {
+        const orig = program.getSourceFile(g.srcFileUrl);
+        let originalComment = '';
+        if (orig) originalComment = getFileoverviewComment(orig);
+        const [newSourceFile] = emitter.updateSourceFile(sourceFile, g.stmts, preamble);
+        return newSourceFile;
+      } else if (GENERATED_FILES.test(sourceFile.fileName)) {
+        // The file should be empty, but emitter.updateSourceFile would still add imports
+        // and various minutiae.
+        // Clear out the source file entirely, only including the preamble comment, so that
+        // ngc produces an empty .js file.
+        return ts.updateSourceFileNode(
+            sourceFile, [emitter.createCommentStatement(sourceFile, preamble)]);
+      }
+      return sourceFile;
+    };
+  };
+}
+
+/**
+ * Parses and returns the comment text (without start and end markers) of a \@fileoverview comment
+ * in the given source file. Returns the empty string if no such comment can be found.
+ */
+function getFileoverviewComment(sourceFile: ts.SourceFile): string {
+  const trivia = sourceFile.getFullText().substring(0, sourceFile.getStart());
+  const leadingComments = ts.getLeadingCommentRanges(trivia, 0);
+  if (!leadingComments || leadingComments.length === 0) return '';
+  const comment = leadingComments[0];
+  if (comment.kind !== ts.SyntaxKind.MultiLineCommentTrivia) return '';
+  // Only comments separated with a \n\n from the file contents are considered file-level comments
+  // in TypeScript.
+  if (sourceFile.getFullText().substring(comment.end, comment.end + 2) !== '\n\n') return '';
+  const commentText = sourceFile.getFullText().substring(comment.pos, comment.end);
+  // Closure Compiler ignores @suppress and similar if the comment contains @license.
+  if (commentText.indexOf('@license') !== -1) return '';
+  return commentText.replace(/^\/\*\*/, '').replace(/ ?\*\/$/, '');
+}
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
new file mode 100644
index 000000000000..1df3d1b6dcd3
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -0,0 +1,1177 @@
+
+/**
+ * @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, FormattedMessageChain, GeneratedFile, MessageBundle, NgAnalyzedFile, NgAnalyzedFileWithInjectables, NgAnalyzedModules, ParseSourceSpan, PartialModule, Position, Serializer, StaticSymbol, TypeScriptEmitter, Xliff, Xliff2, Xmb, core, createAotCompiler, getParseErrors, isFormattedError, isSyntaxError} from '@angular/compiler';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {TypeCheckHost, translateDiagnostics} from '../diagnostics/translate_diagnostics';
+import {compareVersions} from '../diagnostics/typescript_version';
+import {MetadataCollector, ModuleMetadata, createBundleIndexHost} from '../metadata';
+import {NgtscProgram} from '../ngtsc/program';
+
+import {CompilerHost, CompilerOptions, CustomTransformers, DEFAULT_ERROR_CODE, Diagnostic, DiagnosticMessageChain, EmitFlags, LazyRoute, LibrarySummary, Program, SOURCE, TsEmitArguments, TsEmitCallback, TsMergeEmitResultsCallback} from './api';
+import {CodeGenerator, TsCompilerAotCompilerTypeCheckHostAdapter, getOriginalReferences} from './compiler_host';
+import {InlineResourcesMetadataTransformer, getInlineResourcesTransformFactory} from './inline_resources';
+import {LowerMetadataTransform, getExpressionLoweringTransformFactory} from './lower_expressions';
+import {MetadataCache, MetadataTransformer} from './metadata_cache';
+import {getAngularEmitterTransformFactory} from './node_emitter_transform';
+import {PartialModuleMetadataTransformer} from './r3_metadata_transform';
+import {StripDecoratorsMetadataTransformer, getDecoratorStripTransformerFactory} from './r3_strip_decorators';
+import {getAngularClassTransformerFactory} from './r3_transform';
+import {TscPassThroughProgram} from './tsc_pass_through';
+import {DTS, GENERATED_FILES, StructureIsReused, TS, createMessageDiagnostic, isInRootDir, ngToTsDiagnostic, tsStructureIsReused, userError} from './util';
+
+
+// Closure compiler transforms the form `Service.ngInjectableDef = X` into
+// `Service$ngInjectableDef = X`. To prevent this transformation, such assignments need to be
+// annotated with @nocollapse. Unfortunately, a bug in Typescript where comments aren't propagated
+// through the TS transformations precludes adding the comment via the AST. This workaround detects
+// the static assignments to R3 properties such as ngInjectableDef using a regex, as output files
+// are written, and applies the annotation through regex replacement.
+//
+// TODO(alxhub): clean up once fix for TS transformers lands in upstream
+//
+// Typescript reference issue: https://github.com/Microsoft/TypeScript/issues/22497
+
+// Pattern matching all Render3 property names.
+const R3_DEF_NAME_PATTERN = ['ngInjectableDef'].join('|');
+
+// Pattern matching `Identifier.property` where property is a Render3 property.
+const R3_DEF_ACCESS_PATTERN = `[^\\s\\.()[\\]]+\.(${R3_DEF_NAME_PATTERN})`;
+
+// Pattern matching a source line that contains a Render3 static property assignment.
+// It declares two matching groups - one for the preceding whitespace, the second for the rest
+// of the assignment expression.
+const R3_DEF_LINE_PATTERN = `^(\\s*)(${R3_DEF_ACCESS_PATTERN} = .*)$`;
+
+// Regex compilation of R3_DEF_LINE_PATTERN. Matching group 1 yields the whitespace preceding the
+// assignment, matching group 2 gives the rest of the assignment expressions.
+const R3_MATCH_DEFS = new RegExp(R3_DEF_LINE_PATTERN, 'gmu');
+
+// Replacement string that complements R3_MATCH_DEFS. It inserts `/** @nocollapse */` before the
+// assignment but after any indentation. Note that this will mess up any sourcemaps on this line
+// (though there shouldn't be any, since Render3 properties are synthetic).
+const R3_NOCOLLAPSE_DEFS = '$1\/** @nocollapse *\/ $2';
+
+/**
+ * Maximum number of files that are emitable via calling ts.Program.emit
+ * passing individual targetSourceFiles.
+ */
+const MAX_FILE_COUNT_FOR_SINGLE_FILE_EMIT = 20;
+
+
+/**
+ * Fields to lower within metadata in render2 mode.
+ */
+const LOWER_FIELDS = ['useValue', 'useFactory', 'data', 'id', 'loadChildren'];
+
+/**
+ * Fields to lower within metadata in render3 mode.
+ */
+const R3_LOWER_FIELDS = [...LOWER_FIELDS, 'providers', 'imports', 'exports'];
+
+const R3_REIFIED_DECORATORS = [
+  'Component',
+  'Directive',
+  'Injectable',
+  'NgModule',
+  'Pipe',
+];
+
+const emptyModules: NgAnalyzedModules = {
+  ngModules: [],
+  ngModuleByPipeOrDirective: new Map(),
+  files: []
+};
+
+const defaultEmitCallback: TsEmitCallback =
+    ({program, targetSourceFile, writeFile, cancellationToken, emitOnlyDtsFiles,
+      customTransformers}) =>
+        program.emit(
+            targetSourceFile, writeFile, cancellationToken, emitOnlyDtsFiles, customTransformers);
+
+/**
+ * Minimum supported TypeScript version
+ * ∀ supported typescript version v, v >= MIN_TS_VERSION
+ */
+const MIN_TS_VERSION = '2.7.2';
+
+/**
+ * Supremum of supported TypeScript versions
+ * ∀ supported typescript version v, v < MAX_TS_VERSION
+ * MAX_TS_VERSION is not considered as a supported TypeScript version
+ */
+const MAX_TS_VERSION = '2.10.0';
+
+class AngularCompilerProgram implements Program {
+  private rootNames: string[];
+  private metadataCache: MetadataCache;
+  // Metadata cache used exclusively for the flat module index
+  // TODO(issue/24571): remove '!'.
+  private flatModuleMetadataCache !: MetadataCache;
+  private loweringMetadataTransform: LowerMetadataTransform;
+  private oldProgramLibrarySummaries: Map<string, LibrarySummary>|undefined;
+  private oldProgramEmittedGeneratedFiles: Map<string, GeneratedFile>|undefined;
+  private oldProgramEmittedSourceFiles: Map<string, ts.SourceFile>|undefined;
+  // Note: This will be cleared out as soon as we create the _tsProgram
+  private oldTsProgram: ts.Program|undefined;
+  private emittedLibrarySummaries: LibrarySummary[]|undefined;
+  private emittedGeneratedFiles: GeneratedFile[]|undefined;
+  private emittedSourceFiles: ts.SourceFile[]|undefined;
+
+  // Lazily initialized fields
+  // TODO(issue/24571): remove '!'.
+  private _compiler !: AotCompiler;
+  // TODO(issue/24571): remove '!'.
+  private _hostAdapter !: TsCompilerAotCompilerTypeCheckHostAdapter;
+  // TODO(issue/24571): remove '!'.
+  private _tsProgram !: ts.Program;
+  private _analyzedModules: NgAnalyzedModules|undefined;
+  private _analyzedInjectables: NgAnalyzedFileWithInjectables[]|undefined;
+  private _structuralDiagnostics: Diagnostic[]|undefined;
+  private _programWithStubs: ts.Program|undefined;
+  private _optionsDiagnostics: Diagnostic[] = [];
+  // TODO(issue/24571): remove '!'.
+  private _reifiedDecorators !: Set<StaticSymbol>;
+
+  constructor(
+      rootNames: ReadonlyArray<string>, private options: CompilerOptions,
+      private host: CompilerHost, oldProgram?: Program) {
+    this.rootNames = [...rootNames];
+
+    checkVersion(ts.version, MIN_TS_VERSION, MAX_TS_VERSION, options.disableTypeScriptVersionCheck);
+
+    this.oldTsProgram = oldProgram ? oldProgram.getTsProgram() : undefined;
+    if (oldProgram) {
+      this.oldProgramLibrarySummaries = oldProgram.getLibrarySummaries();
+      this.oldProgramEmittedGeneratedFiles = oldProgram.getEmittedGeneratedFiles();
+      this.oldProgramEmittedSourceFiles = oldProgram.getEmittedSourceFiles();
+    }
+
+    if (options.flatModuleOutFile) {
+      const {host: bundleHost, indexName, errors} =
+          createBundleIndexHost(options, this.rootNames, host, () => this.flatModuleMetadataCache);
+      if (errors) {
+        this._optionsDiagnostics.push(...errors.map(e => ({
+                                                      category: e.category,
+                                                      messageText: e.messageText as string,
+                                                      source: SOURCE,
+                                                      code: DEFAULT_ERROR_CODE
+                                                    })));
+      } else {
+        this.rootNames.push(indexName !);
+        this.host = bundleHost;
+      }
+    }
+
+    this.loweringMetadataTransform =
+        new LowerMetadataTransform(options.enableIvy ? R3_LOWER_FIELDS : LOWER_FIELDS);
+    this.metadataCache = this.createMetadataCache([this.loweringMetadataTransform]);
+  }
+
+  private createMetadataCache(transformers: MetadataTransformer[]) {
+    return new MetadataCache(
+        new MetadataCollector({quotedNames: true}), !!this.options.strictMetadataEmit,
+        transformers);
+  }
+
+  getLibrarySummaries(): Map<string, LibrarySummary> {
+    const result = new Map<string, LibrarySummary>();
+    if (this.oldProgramLibrarySummaries) {
+      this.oldProgramLibrarySummaries.forEach((summary, fileName) => result.set(fileName, summary));
+    }
+    if (this.emittedLibrarySummaries) {
+      this.emittedLibrarySummaries.forEach(
+          (summary, fileName) => result.set(summary.fileName, summary));
+    }
+    return result;
+  }
+
+  getEmittedGeneratedFiles(): Map<string, GeneratedFile> {
+    const result = new Map<string, GeneratedFile>();
+    if (this.oldProgramEmittedGeneratedFiles) {
+      this.oldProgramEmittedGeneratedFiles.forEach(
+          (genFile, fileName) => result.set(fileName, genFile));
+    }
+    if (this.emittedGeneratedFiles) {
+      this.emittedGeneratedFiles.forEach((genFile) => result.set(genFile.genFileUrl, genFile));
+    }
+    return result;
+  }
+
+  getEmittedSourceFiles(): Map<string, ts.SourceFile> {
+    const result = new Map<string, ts.SourceFile>();
+    if (this.oldProgramEmittedSourceFiles) {
+      this.oldProgramEmittedSourceFiles.forEach((sf, fileName) => result.set(fileName, sf));
+    }
+    if (this.emittedSourceFiles) {
+      this.emittedSourceFiles.forEach((sf) => result.set(sf.fileName, sf));
+    }
+    return result;
+  }
+
+  getTsProgram(): ts.Program { return this.tsProgram; }
+
+  getTsOptionDiagnostics(cancellationToken?: ts.CancellationToken) {
+    return this.tsProgram.getOptionsDiagnostics(cancellationToken);
+  }
+
+  getNgOptionDiagnostics(cancellationToken?: ts.CancellationToken): ReadonlyArray<Diagnostic> {
+    return [...this._optionsDiagnostics, ...getNgOptionDiagnostics(this.options)];
+  }
+
+  getTsSyntacticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
+      ReadonlyArray<ts.Diagnostic> {
+    return this.tsProgram.getSyntacticDiagnostics(sourceFile, cancellationToken);
+  }
+
+  getNgStructuralDiagnostics(cancellationToken?: ts.CancellationToken): ReadonlyArray<Diagnostic> {
+    return this.structuralDiagnostics;
+  }
+
+  getTsSemanticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
+      ReadonlyArray<ts.Diagnostic> {
+    const sourceFiles = sourceFile ? [sourceFile] : this.tsProgram.getSourceFiles();
+    let diags: ts.Diagnostic[] = [];
+    sourceFiles.forEach(sf => {
+      if (!GENERATED_FILES.test(sf.fileName)) {
+        diags.push(...this.tsProgram.getSemanticDiagnostics(sf, cancellationToken));
+      }
+    });
+    return diags;
+  }
+
+  getNgSemanticDiagnostics(fileName?: string, cancellationToken?: ts.CancellationToken):
+      ReadonlyArray<Diagnostic> {
+    let diags: ts.Diagnostic[] = [];
+    this.tsProgram.getSourceFiles().forEach(sf => {
+      if (GENERATED_FILES.test(sf.fileName) && !sf.isDeclarationFile) {
+        diags.push(...this.tsProgram.getSemanticDiagnostics(sf, cancellationToken));
+      }
+    });
+    const {ng} = translateDiagnostics(this.hostAdapter, diags);
+    return ng;
+  }
+
+  loadNgStructureAsync(): Promise<void> {
+    if (this._analyzedModules) {
+      throw new Error('Angular structure already loaded');
+    }
+    return Promise.resolve()
+        .then(() => {
+          const {tmpProgram, sourceFiles, tsFiles, rootNames} = this._createProgramWithBasicStubs();
+          return this.compiler.loadFilesAsync(sourceFiles, tsFiles)
+              .then(({analyzedModules, analyzedInjectables}) => {
+                if (this._analyzedModules) {
+                  throw new Error('Angular structure loaded both synchronously and asynchronously');
+                }
+                this._updateProgramWithTypeCheckStubs(
+                    tmpProgram, analyzedModules, analyzedInjectables, rootNames);
+              });
+        })
+        .catch(e => this._createProgramOnError(e));
+  }
+
+  listLazyRoutes(route?: string): LazyRoute[] {
+    // Note: Don't analyzedModules if a route is given
+    // to be fast enough.
+    return this.compiler.listLazyRoutes(route, route ? undefined : this.analyzedModules);
+  }
+
+  emit(parameters: {
+    emitFlags?: EmitFlags,
+    cancellationToken?: ts.CancellationToken,
+    customTransformers?: CustomTransformers,
+    emitCallback?: TsEmitCallback,
+    mergeEmitResultsCallback?: TsMergeEmitResultsCallback,
+  } = {}): ts.EmitResult {
+    if (this.options.enableIvy === 'ngtsc' || this.options.enableIvy === 'tsc') {
+      throw new Error('Cannot run legacy compiler in ngtsc mode');
+    }
+    return this.options.enableIvy === true ? this._emitRender3(parameters) :
+                                             this._emitRender2(parameters);
+  }
+
+  private _annotateR3Properties(contents: string): string {
+    return contents.replace(R3_MATCH_DEFS, R3_NOCOLLAPSE_DEFS);
+  }
+
+  private _emitRender3(
+      {
+          emitFlags = EmitFlags.Default, cancellationToken, customTransformers,
+          emitCallback = defaultEmitCallback, mergeEmitResultsCallback = mergeEmitResults,
+      }: {
+        emitFlags?: EmitFlags,
+        cancellationToken?: ts.CancellationToken,
+        customTransformers?: CustomTransformers,
+        emitCallback?: TsEmitCallback,
+        mergeEmitResultsCallback?: TsMergeEmitResultsCallback,
+      } = {}): ts.EmitResult {
+    const emitStart = Date.now();
+    if ((emitFlags & (EmitFlags.JS | EmitFlags.DTS | EmitFlags.Metadata | EmitFlags.Codegen)) ===
+        0) {
+      return {emitSkipped: true, diagnostics: [], emittedFiles: []};
+    }
+
+    // analyzedModules and analyzedInjectables are created together. If one exists, so does the
+    // other.
+    const modules =
+        this.compiler.emitAllPartialModules(this.analyzedModules, this._analyzedInjectables !);
+
+    const writeTsFile: ts.WriteFileCallback =
+        (outFileName, outData, writeByteOrderMark, onError?, sourceFiles?) => {
+          const sourceFile = sourceFiles && sourceFiles.length == 1 ? sourceFiles[0] : null;
+          let genFile: GeneratedFile|undefined;
+          if (this.options.annotateForClosureCompiler && sourceFile &&
+              TS.test(sourceFile.fileName)) {
+            outData = this._annotateR3Properties(outData);
+          }
+          this.writeFile(outFileName, outData, writeByteOrderMark, onError, undefined, sourceFiles);
+        };
+
+    const emitOnlyDtsFiles = (emitFlags & (EmitFlags.DTS | EmitFlags.JS)) == EmitFlags.DTS;
+
+    const tsCustomTransformers = this.calculateTransforms(
+        /* genFiles */ undefined, /* partialModules */ modules,
+        /* stripDecorators */ this.reifiedDecorators, customTransformers);
+
+
+    // Restore the original references before we emit so TypeScript doesn't emit
+    // a reference to the .d.ts file.
+    const augmentedReferences = new Map<ts.SourceFile, ReadonlyArray<ts.FileReference>>();
+    for (const sourceFile of this.tsProgram.getSourceFiles()) {
+      const originalReferences = getOriginalReferences(sourceFile);
+      if (originalReferences) {
+        augmentedReferences.set(sourceFile, sourceFile.referencedFiles);
+        sourceFile.referencedFiles = originalReferences;
+      }
+    }
+
+    try {
+      return emitCallback({
+        program: this.tsProgram,
+        host: this.host,
+        options: this.options,
+        writeFile: writeTsFile, emitOnlyDtsFiles,
+        customTransformers: tsCustomTransformers
+      });
+    } finally {
+      // Restore the references back to the augmented value to ensure that the
+      // checks that TypeScript makes for project structure reuse will succeed.
+      for (const [sourceFile, references] of Array.from(augmentedReferences)) {
+        // TODO(chuckj): Remove any cast after updating build to 2.6
+        (sourceFile as any).referencedFiles = references;
+      }
+    }
+  }
+
+  private _emitRender2(
+      {
+          emitFlags = EmitFlags.Default, cancellationToken, customTransformers,
+          emitCallback = defaultEmitCallback, mergeEmitResultsCallback = mergeEmitResults,
+      }: {
+        emitFlags?: EmitFlags,
+        cancellationToken?: ts.CancellationToken,
+        customTransformers?: CustomTransformers,
+        emitCallback?: TsEmitCallback,
+        mergeEmitResultsCallback?: TsMergeEmitResultsCallback,
+      } = {}): ts.EmitResult {
+    const emitStart = Date.now();
+    if (emitFlags & EmitFlags.I18nBundle) {
+      const locale = this.options.i18nOutLocale || null;
+      const file = this.options.i18nOutFile || null;
+      const format = this.options.i18nOutFormat || null;
+      const bundle = this.compiler.emitMessageBundle(this.analyzedModules, locale);
+      i18nExtract(format, file, this.host, this.options, bundle);
+    }
+    if ((emitFlags & (EmitFlags.JS | EmitFlags.DTS | EmitFlags.Metadata | EmitFlags.Codegen)) ===
+        0) {
+      return {emitSkipped: true, diagnostics: [], emittedFiles: []};
+    }
+    let {genFiles, genDiags} = this.generateFilesForEmit(emitFlags);
+    if (genDiags.length) {
+      return {
+        diagnostics: genDiags,
+        emitSkipped: true,
+        emittedFiles: [],
+      };
+    }
+    this.emittedGeneratedFiles = genFiles;
+    const outSrcMapping: Array<{sourceFile: ts.SourceFile, outFileName: string}> = [];
+    const genFileByFileName = new Map<string, GeneratedFile>();
+    genFiles.forEach(genFile => genFileByFileName.set(genFile.genFileUrl, genFile));
+    this.emittedLibrarySummaries = [];
+    const emittedSourceFiles = [] as ts.SourceFile[];
+    const writeTsFile: ts.WriteFileCallback =
+        (outFileName, outData, writeByteOrderMark, onError?, sourceFiles?) => {
+          const sourceFile = sourceFiles && sourceFiles.length == 1 ? sourceFiles[0] : null;
+          let genFile: GeneratedFile|undefined;
+          if (sourceFile) {
+            outSrcMapping.push({outFileName: outFileName, sourceFile});
+            genFile = genFileByFileName.get(sourceFile.fileName);
+            if (!sourceFile.isDeclarationFile && !GENERATED_FILES.test(sourceFile.fileName)) {
+              // Note: sourceFile is the transformed sourcefile, not the original one!
+              const originalFile = this.tsProgram.getSourceFile(sourceFile.fileName);
+              if (originalFile) {
+                emittedSourceFiles.push(originalFile);
+              }
+            }
+            if (this.options.annotateForClosureCompiler && TS.test(sourceFile.fileName)) {
+              outData = this._annotateR3Properties(outData);
+            }
+          }
+          this.writeFile(outFileName, outData, writeByteOrderMark, onError, genFile, sourceFiles);
+        };
+
+    const modules = this._analyzedInjectables &&
+        this.compiler.emitAllPartialModules2(this._analyzedInjectables);
+
+    const tsCustomTransformers = this.calculateTransforms(
+        genFileByFileName, modules, /* stripDecorators */ undefined, customTransformers);
+    const emitOnlyDtsFiles = (emitFlags & (EmitFlags.DTS | EmitFlags.JS)) == EmitFlags.DTS;
+    // Restore the original references before we emit so TypeScript doesn't emit
+    // a reference to the .d.ts file.
+    const augmentedReferences = new Map<ts.SourceFile, ReadonlyArray<ts.FileReference>>();
+    for (const sourceFile of this.tsProgram.getSourceFiles()) {
+      const originalReferences = getOriginalReferences(sourceFile);
+      if (originalReferences) {
+        augmentedReferences.set(sourceFile, sourceFile.referencedFiles);
+        sourceFile.referencedFiles = originalReferences;
+      }
+    }
+    const genTsFiles: GeneratedFile[] = [];
+    const genJsonFiles: GeneratedFile[] = [];
+    genFiles.forEach(gf => {
+      if (gf.stmts) {
+        genTsFiles.push(gf);
+      }
+      if (gf.source) {
+        genJsonFiles.push(gf);
+      }
+    });
+    let emitResult: ts.EmitResult;
+    let emittedUserTsCount: number;
+    try {
+      const sourceFilesToEmit = this.getSourceFilesForEmit();
+      if (sourceFilesToEmit &&
+          (sourceFilesToEmit.length + genTsFiles.length) < MAX_FILE_COUNT_FOR_SINGLE_FILE_EMIT) {
+        const fileNamesToEmit =
+            [...sourceFilesToEmit.map(sf => sf.fileName), ...genTsFiles.map(gf => gf.genFileUrl)];
+        emitResult = mergeEmitResultsCallback(
+            fileNamesToEmit.map((fileName) => emitResult = emitCallback({
+                                  program: this.tsProgram,
+                                  host: this.host,
+                                  options: this.options,
+                                  writeFile: writeTsFile, emitOnlyDtsFiles,
+                                  customTransformers: tsCustomTransformers,
+                                  targetSourceFile: this.tsProgram.getSourceFile(fileName),
+                                })));
+        emittedUserTsCount = sourceFilesToEmit.length;
+      } else {
+        emitResult = emitCallback({
+          program: this.tsProgram,
+          host: this.host,
+          options: this.options,
+          writeFile: writeTsFile, emitOnlyDtsFiles,
+          customTransformers: tsCustomTransformers
+        });
+        emittedUserTsCount = this.tsProgram.getSourceFiles().length - genTsFiles.length;
+      }
+    } finally {
+      // Restore the references back to the augmented value to ensure that the
+      // checks that TypeScript makes for project structure reuse will succeed.
+      for (const [sourceFile, references] of Array.from(augmentedReferences)) {
+        // TODO(chuckj): Remove any cast after updating build to 2.6
+        (sourceFile as any).referencedFiles = references;
+      }
+    }
+    this.emittedSourceFiles = emittedSourceFiles;
+
+    // Match behavior of tsc: only produce emit diagnostics if it would block
+    // emit. If noEmitOnError is false, the emit will happen in spite of any
+    // errors, so we should not report them.
+    if (this.options.noEmitOnError === true) {
+      // translate the diagnostics in the emitResult as well.
+      const translatedEmitDiags = translateDiagnostics(this.hostAdapter, emitResult.diagnostics);
+      emitResult.diagnostics = translatedEmitDiags.ts.concat(
+          this.structuralDiagnostics.concat(translatedEmitDiags.ng).map(ngToTsDiagnostic));
+    }
+
+    if (!outSrcMapping.length) {
+      // if no files were emitted by TypeScript, also don't emit .json files
+      emitResult.diagnostics =
+          emitResult.diagnostics.concat([createMessageDiagnostic(`Emitted no files.`)]);
+      return emitResult;
+    }
+
+    let sampleSrcFileName: string|undefined;
+    let sampleOutFileName: string|undefined;
+    if (outSrcMapping.length) {
+      sampleSrcFileName = outSrcMapping[0].sourceFile.fileName;
+      sampleOutFileName = outSrcMapping[0].outFileName;
+    }
+    const srcToOutPath =
+        createSrcToOutPathMapper(this.options.outDir, sampleSrcFileName, sampleOutFileName);
+    if (emitFlags & EmitFlags.Codegen) {
+      genJsonFiles.forEach(gf => {
+        const outFileName = srcToOutPath(gf.genFileUrl);
+        this.writeFile(outFileName, gf.source !, false, undefined, gf);
+      });
+    }
+    let metadataJsonCount = 0;
+    if (emitFlags & EmitFlags.Metadata) {
+      this.tsProgram.getSourceFiles().forEach(sf => {
+        if (!sf.isDeclarationFile && !GENERATED_FILES.test(sf.fileName)) {
+          metadataJsonCount++;
+          const metadata = this.metadataCache.getMetadata(sf);
+          if (metadata) {
+            const metadataText = JSON.stringify([metadata]);
+            const outFileName = srcToOutPath(sf.fileName.replace(/\.tsx?$/, '.metadata.json'));
+            this.writeFile(outFileName, metadataText, false, undefined, undefined, [sf]);
+          }
+        }
+      });
+    }
+    const emitEnd = Date.now();
+    if (this.options.diagnostics) {
+      emitResult.diagnostics = emitResult.diagnostics.concat([createMessageDiagnostic([
+        `Emitted in ${emitEnd - emitStart}ms`,
+        `- ${emittedUserTsCount} user ts files`,
+        `- ${genTsFiles.length} generated ts files`,
+        `- ${genJsonFiles.length + metadataJsonCount} generated json files`,
+      ].join('\n'))]);
+    }
+
+    return emitResult;
+  }
+
+  // Private members
+  private get compiler(): AotCompiler {
+    if (!this._compiler) {
+      this._createCompiler();
+    }
+    return this._compiler !;
+  }
+
+  private get hostAdapter(): TsCompilerAotCompilerTypeCheckHostAdapter {
+    if (!this._hostAdapter) {
+      this._createCompiler();
+    }
+    return this._hostAdapter !;
+  }
+
+  private get analyzedModules(): NgAnalyzedModules {
+    if (!this._analyzedModules) {
+      this.initSync();
+    }
+    return this._analyzedModules !;
+  }
+
+  private get structuralDiagnostics(): ReadonlyArray<Diagnostic> {
+    let diagnostics = this._structuralDiagnostics;
+    if (!diagnostics) {
+      this.initSync();
+      diagnostics = (this._structuralDiagnostics = this._structuralDiagnostics || []);
+    }
+    return diagnostics;
+  }
+
+  private get tsProgram(): ts.Program {
+    if (!this._tsProgram) {
+      this.initSync();
+    }
+    return this._tsProgram !;
+  }
+
+  private get reifiedDecorators(): Set<StaticSymbol> {
+    if (!this._reifiedDecorators) {
+      const reflector = this.compiler.reflector;
+      this._reifiedDecorators = new Set(
+          R3_REIFIED_DECORATORS.map(name => reflector.findDeclaration('@angular/core', name)));
+    }
+    return this._reifiedDecorators;
+  }
+
+  private calculateTransforms(
+      genFiles: Map<string, GeneratedFile>|undefined, partialModules: PartialModule[]|undefined,
+      stripDecorators: Set<StaticSymbol>|undefined,
+      customTransformers?: CustomTransformers): ts.CustomTransformers {
+    const beforeTs: Array<ts.TransformerFactory<ts.SourceFile>> = [];
+    const metadataTransforms: MetadataTransformer[] = [];
+    const flatModuleMetadataTransforms: MetadataTransformer[] = [];
+    if (this.options.enableResourceInlining) {
+      beforeTs.push(getInlineResourcesTransformFactory(this.tsProgram, this.hostAdapter));
+      const transformer = new InlineResourcesMetadataTransformer(this.hostAdapter);
+      metadataTransforms.push(transformer);
+      flatModuleMetadataTransforms.push(transformer);
+    }
+
+    if (!this.options.disableExpressionLowering) {
+      beforeTs.push(
+          getExpressionLoweringTransformFactory(this.loweringMetadataTransform, this.tsProgram));
+      metadataTransforms.push(this.loweringMetadataTransform);
+    }
+    if (genFiles) {
+      beforeTs.push(getAngularEmitterTransformFactory(genFiles, this.getTsProgram()));
+    }
+    if (partialModules) {
+      beforeTs.push(getAngularClassTransformerFactory(partialModules));
+
+      // If we have partial modules, the cached metadata might be incorrect as it doesn't reflect
+      // the partial module transforms.
+      const transformer = new PartialModuleMetadataTransformer(partialModules);
+      metadataTransforms.push(transformer);
+      flatModuleMetadataTransforms.push(transformer);
+    }
+
+    if (stripDecorators) {
+      beforeTs.push(getDecoratorStripTransformerFactory(
+          stripDecorators, this.compiler.reflector, this.getTsProgram().getTypeChecker()));
+      const transformer =
+          new StripDecoratorsMetadataTransformer(stripDecorators, this.compiler.reflector);
+      metadataTransforms.push(transformer);
+      flatModuleMetadataTransforms.push(transformer);
+    }
+
+    if (customTransformers && customTransformers.beforeTs) {
+      beforeTs.push(...customTransformers.beforeTs);
+    }
+    if (metadataTransforms.length > 0) {
+      this.metadataCache = this.createMetadataCache(metadataTransforms);
+    }
+    if (flatModuleMetadataTransforms.length > 0) {
+      this.flatModuleMetadataCache = this.createMetadataCache(flatModuleMetadataTransforms);
+    }
+    const afterTs = customTransformers ? customTransformers.afterTs : undefined;
+    return {before: beforeTs, after: afterTs};
+  }
+
+  private initSync() {
+    if (this._analyzedModules) {
+      return;
+    }
+    try {
+      const {tmpProgram, sourceFiles, tsFiles, rootNames} = this._createProgramWithBasicStubs();
+      const {analyzedModules, analyzedInjectables} =
+          this.compiler.loadFilesSync(sourceFiles, tsFiles);
+      this._updateProgramWithTypeCheckStubs(
+          tmpProgram, analyzedModules, analyzedInjectables, rootNames);
+    } catch (e) {
+      this._createProgramOnError(e);
+    }
+  }
+
+  private _createCompiler() {
+    const codegen: CodeGenerator = {
+      generateFile: (genFileName, baseFileName) =>
+                        this._compiler.emitBasicStub(genFileName, baseFileName),
+      findGeneratedFileNames: (fileName) => this._compiler.findGeneratedFileNames(fileName),
+    };
+
+    this._hostAdapter = new TsCompilerAotCompilerTypeCheckHostAdapter(
+        this.rootNames, this.options, this.host, this.metadataCache, codegen,
+        this.oldProgramLibrarySummaries);
+    const aotOptions = getAotCompilerOptions(this.options);
+    const errorCollector = (this.options.collectAllErrors || this.options.fullTemplateTypeCheck) ?
+        (err: any) => this._addStructuralDiagnostics(err) :
+        undefined;
+    this._compiler = createAotCompiler(this._hostAdapter, aotOptions, errorCollector).compiler;
+  }
+
+  private _createProgramWithBasicStubs(): {
+    tmpProgram: ts.Program,
+    rootNames: string[],
+    sourceFiles: string[],
+    tsFiles: string[],
+  } {
+    if (this._analyzedModules) {
+      throw new Error(`Internal Error: already initialized!`);
+    }
+    // Note: This is important to not produce a memory leak!
+    const oldTsProgram = this.oldTsProgram;
+    this.oldTsProgram = undefined;
+
+    const codegen: CodeGenerator = {
+      generateFile: (genFileName, baseFileName) =>
+                        this.compiler.emitBasicStub(genFileName, baseFileName),
+      findGeneratedFileNames: (fileName) => this.compiler.findGeneratedFileNames(fileName),
+    };
+
+
+    let rootNames = [...this.rootNames];
+    if (this.options.generateCodeForLibraries !== false) {
+      // if we should generateCodeForLibraries, never include
+      // generated files in the program as otherwise we will
+      // overwrite them and typescript will report the error
+      // TS5055: Cannot write file ... because it would overwrite input file.
+      rootNames = rootNames.filter(fn => !GENERATED_FILES.test(fn));
+    }
+    if (this.options.noResolve) {
+      this.rootNames.forEach(rootName => {
+        if (this.hostAdapter.shouldGenerateFilesFor(rootName)) {
+          rootNames.push(...this.compiler.findGeneratedFileNames(rootName));
+        }
+      });
+    }
+
+    const tmpProgram = ts.createProgram(rootNames, this.options, this.hostAdapter, oldTsProgram);
+    const sourceFiles: string[] = [];
+    const tsFiles: string[] = [];
+    tmpProgram.getSourceFiles().forEach(sf => {
+      if (this.hostAdapter.isSourceFile(sf.fileName)) {
+        sourceFiles.push(sf.fileName);
+      }
+      if (TS.test(sf.fileName) && !DTS.test(sf.fileName)) {
+        tsFiles.push(sf.fileName);
+      }
+    });
+    return {tmpProgram, sourceFiles, tsFiles, rootNames};
+  }
+
+  private _updateProgramWithTypeCheckStubs(
+      tmpProgram: ts.Program, analyzedModules: NgAnalyzedModules,
+      analyzedInjectables: NgAnalyzedFileWithInjectables[], rootNames: string[]) {
+    this._analyzedModules = analyzedModules;
+    this._analyzedInjectables = analyzedInjectables;
+    tmpProgram.getSourceFiles().forEach(sf => {
+      if (sf.fileName.endsWith('.ngfactory.ts')) {
+        const {generate, baseFileName} = this.hostAdapter.shouldGenerateFile(sf.fileName);
+        if (generate) {
+          // Note: ! is ok as hostAdapter.shouldGenerateFile will always return a baseFileName
+          // for .ngfactory.ts files.
+          const genFile = this.compiler.emitTypeCheckStub(sf.fileName, baseFileName !);
+          if (genFile) {
+            this.hostAdapter.updateGeneratedFile(genFile);
+          }
+        }
+      }
+    });
+    this._tsProgram = ts.createProgram(rootNames, this.options, this.hostAdapter, tmpProgram);
+    // Note: the new ts program should be completely reusable by TypeScript as:
+    // - we cache all the files in the hostAdapter
+    // - new new stubs use the exactly same imports/exports as the old once (we assert that in
+    // hostAdapter.updateGeneratedFile).
+    if (tsStructureIsReused(tmpProgram) !== StructureIsReused.Completely) {
+      throw new Error(`Internal Error: The structure of the program changed during codegen.`);
+    }
+  }
+
+  private _createProgramOnError(e: any) {
+    // Still fill the analyzedModules and the tsProgram
+    // so that we don't cause other errors for users who e.g. want to emit the ngProgram.
+    this._analyzedModules = emptyModules;
+    this.oldTsProgram = undefined;
+    this._hostAdapter.isSourceFile = () => false;
+    this._tsProgram = ts.createProgram(this.rootNames, this.options, this.hostAdapter);
+    if (isSyntaxError(e)) {
+      this._addStructuralDiagnostics(e);
+      return;
+    }
+    throw e;
+  }
+
+  private _addStructuralDiagnostics(error: Error) {
+    const diagnostics = this._structuralDiagnostics || (this._structuralDiagnostics = []);
+    if (isSyntaxError(error)) {
+      diagnostics.push(...syntaxErrorToDiagnostics(error));
+    } else {
+      diagnostics.push({
+        messageText: error.toString(),
+        category: ts.DiagnosticCategory.Error,
+        source: SOURCE,
+        code: DEFAULT_ERROR_CODE
+      });
+    }
+  }
+
+  // Note: this returns a ts.Diagnostic so that we
+  // can return errors in a ts.EmitResult
+  private generateFilesForEmit(emitFlags: EmitFlags):
+      {genFiles: GeneratedFile[], genDiags: ts.Diagnostic[]} {
+    try {
+      if (!(emitFlags & EmitFlags.Codegen)) {
+        return {genFiles: [], genDiags: []};
+      }
+      // TODO(tbosch): allow generating files that are not in the rootDir
+      // See https://github.com/angular/angular/issues/19337
+      let genFiles = this.compiler.emitAllImpls(this.analyzedModules)
+                         .filter(genFile => isInRootDir(genFile.genFileUrl, this.options));
+      if (this.oldProgramEmittedGeneratedFiles) {
+        const oldProgramEmittedGeneratedFiles = this.oldProgramEmittedGeneratedFiles;
+        genFiles = genFiles.filter(genFile => {
+          const oldGenFile = oldProgramEmittedGeneratedFiles.get(genFile.genFileUrl);
+          return !oldGenFile || !genFile.isEquivalent(oldGenFile);
+        });
+      }
+      return {genFiles, genDiags: []};
+    } catch (e) {
+      // TODO(tbosch): check whether we can actually have syntax errors here,
+      // as we already parsed the metadata and templates before to create the type check block.
+      if (isSyntaxError(e)) {
+        const genDiags: ts.Diagnostic[] = [{
+          file: undefined,
+          start: undefined,
+          length: undefined,
+          messageText: e.message,
+          category: ts.DiagnosticCategory.Error,
+          source: SOURCE,
+          code: DEFAULT_ERROR_CODE
+        }];
+        return {genFiles: [], genDiags};
+      }
+      throw e;
+    }
+  }
+
+  /**
+   * Returns undefined if all files should be emitted.
+   */
+  private getSourceFilesForEmit(): ts.SourceFile[]|undefined {
+    // TODO(tbosch): if one of the files contains a `const enum`
+    // always emit all files -> return undefined!
+    let sourceFilesToEmit = this.tsProgram.getSourceFiles().filter(
+        sf => { return !sf.isDeclarationFile && !GENERATED_FILES.test(sf.fileName); });
+    if (this.oldProgramEmittedSourceFiles) {
+      sourceFilesToEmit = sourceFilesToEmit.filter(sf => {
+        const oldFile = this.oldProgramEmittedSourceFiles !.get(sf.fileName);
+        return sf !== oldFile;
+      });
+    }
+    return sourceFilesToEmit;
+  }
+
+  private writeFile(
+      outFileName: string, outData: string, writeByteOrderMark: boolean,
+      onError?: (message: string) => void, genFile?: GeneratedFile,
+      sourceFiles?: ReadonlyArray<ts.SourceFile>) {
+    // collect emittedLibrarySummaries
+    let baseFile: ts.SourceFile|undefined;
+    if (genFile) {
+      baseFile = this.tsProgram.getSourceFile(genFile.srcFileUrl);
+      if (baseFile) {
+        if (!this.emittedLibrarySummaries) {
+          this.emittedLibrarySummaries = [];
+        }
+        if (genFile.genFileUrl.endsWith('.ngsummary.json') && baseFile.fileName.endsWith('.d.ts')) {
+          this.emittedLibrarySummaries.push({
+            fileName: baseFile.fileName,
+            text: baseFile.text,
+            sourceFile: baseFile,
+          });
+          this.emittedLibrarySummaries.push({fileName: genFile.genFileUrl, text: outData});
+          if (!this.options.declaration) {
+            // If we don't emit declarations, still record an empty .ngfactory.d.ts file,
+            // as we might need it later on for resolving module names from summaries.
+            const ngFactoryDts =
+                genFile.genFileUrl.substring(0, genFile.genFileUrl.length - 15) + '.ngfactory.d.ts';
+            this.emittedLibrarySummaries.push({fileName: ngFactoryDts, text: ''});
+          }
+        } else if (outFileName.endsWith('.d.ts') && baseFile.fileName.endsWith('.d.ts')) {
+          const dtsSourceFilePath = genFile.genFileUrl.replace(/\.ts$/, '.d.ts');
+          // Note: Don't use sourceFiles here as the created .d.ts has a path in the outDir,
+          // but we need one that is next to the .ts file
+          this.emittedLibrarySummaries.push({fileName: dtsSourceFilePath, text: outData});
+        }
+      }
+    }
+    // Filter out generated files for which we didn't generate code.
+    // This can happen as the stub calculation is not completely exact.
+    // Note: sourceFile refers to the .ngfactory.ts / .ngsummary.ts file
+    // node_emitter_transform already set the file contents to be empty,
+    //  so this code only needs to skip the file if !allowEmptyCodegenFiles.
+    const isGenerated = GENERATED_FILES.test(outFileName);
+    if (isGenerated && !this.options.allowEmptyCodegenFiles &&
+        (!genFile || !genFile.stmts || genFile.stmts.length === 0)) {
+      return;
+    }
+    if (baseFile) {
+      sourceFiles = sourceFiles ? [...sourceFiles, baseFile] : [baseFile];
+    }
+    // TODO: remove any when TS 2.4 support is removed.
+    this.host.writeFile(outFileName, outData, writeByteOrderMark, onError, sourceFiles as any);
+  }
+}
+
+/**
+ * Checks whether a given version ∈ [minVersion, maxVersion[
+ * An error will be thrown if the following statements are simultaneously true:
+ * - the given version ∉ [minVersion, maxVersion[,
+ * - the result of the version check is not meant to be bypassed (the parameter disableVersionCheck
+ * is false)
+ *
+ * @param version The version on which the check will be performed
+ * @param minVersion The lower bound version. A valid version needs to be greater than minVersion
+ * @param maxVersion The upper bound version. A valid version needs to be strictly less than
+ * maxVersion
+ * @param disableVersionCheck Indicates whether version check should be bypassed
+ *
+ * @throws Will throw an error if the following statements are simultaneously true:
+ * - the given version ∉ [minVersion, maxVersion[,
+ * - the result of the version check is not meant to be bypassed (the parameter disableVersionCheck
+ * is false)
+ */
+export function checkVersion(
+    version: string, minVersion: string, maxVersion: string,
+    disableVersionCheck: boolean | undefined) {
+  if ((compareVersions(version, minVersion) < 0 || compareVersions(version, maxVersion) >= 0) &&
+      !disableVersionCheck) {
+    throw new Error(
+        `The Angular Compiler requires TypeScript >=${minVersion} and <${maxVersion} but ${version} was found instead.`);
+  }
+}
+
+export function createProgram({rootNames, options, host, oldProgram}: {
+  rootNames: ReadonlyArray<string>,
+  options: CompilerOptions,
+  host: CompilerHost, oldProgram?: Program
+}): Program {
+  if (options.enableIvy === 'ngtsc') {
+    return new NgtscProgram(rootNames, options, host, oldProgram);
+  } else if (options.enableIvy === 'tsc') {
+    return new TscPassThroughProgram(rootNames, options, host, oldProgram);
+  }
+  return new AngularCompilerProgram(rootNames, options, host, oldProgram);
+}
+
+// Compute the AotCompiler options
+function getAotCompilerOptions(options: CompilerOptions): AotCompilerOptions {
+  let missingTranslation = core.MissingTranslationStrategy.Warning;
+
+  switch (options.i18nInMissingTranslations) {
+    case 'ignore':
+      missingTranslation = core.MissingTranslationStrategy.Ignore;
+      break;
+    case 'error':
+      missingTranslation = core.MissingTranslationStrategy.Error;
+      break;
+  }
+
+  let translations: string = '';
+
+  if (options.i18nInFile) {
+    if (!options.i18nInLocale) {
+      throw new Error(`The translation file (${options.i18nInFile}) locale must be provided.`);
+    }
+    translations = fs.readFileSync(options.i18nInFile, 'utf8');
+  } else {
+    // No translations are provided, ignore any errors
+    // We still go through i18n to remove i18n attributes
+    missingTranslation = core.MissingTranslationStrategy.Ignore;
+  }
+
+  return {
+    locale: options.i18nInLocale,
+    i18nFormat: options.i18nInFormat || options.i18nOutFormat, translations, missingTranslation,
+    enableSummariesForJit: options.enableSummariesForJit,
+    preserveWhitespaces: options.preserveWhitespaces,
+    fullTemplateTypeCheck: options.fullTemplateTypeCheck,
+    allowEmptyCodegenFiles: options.allowEmptyCodegenFiles,
+    enableIvy: options.enableIvy,
+  };
+}
+
+function getNgOptionDiagnostics(options: CompilerOptions): ReadonlyArray<Diagnostic> {
+  if (options.annotationsAs) {
+    switch (options.annotationsAs) {
+      case 'decorators':
+      case 'static fields':
+        break;
+      default:
+        return [{
+          messageText:
+              'Angular compiler options "annotationsAs" only supports "static fields" and "decorators"',
+          category: ts.DiagnosticCategory.Error,
+          source: SOURCE,
+          code: DEFAULT_ERROR_CODE
+        }];
+    }
+  }
+  return [];
+}
+
+function normalizeSeparators(path: string): string {
+  return path.replace(/\\/g, '/');
+}
+
+/**
+ * Returns a function that can adjust a path from source path to out path,
+ * based on an existing mapping from source to out path.
+ *
+ * TODO(tbosch): talk to the TypeScript team to expose their logic for calculating the `rootDir`
+ * if none was specified.
+ *
+ * Note: This function works on normalized paths from typescript.
+ *
+ * @param outDir
+ * @param outSrcMappings
+ */
+export function createSrcToOutPathMapper(
+    outDir: string | undefined, sampleSrcFileName: string | undefined,
+    sampleOutFileName: string | undefined, host: {
+      dirname: typeof path.dirname,
+      resolve: typeof path.resolve,
+      relative: typeof path.relative
+    } = path): (srcFileName: string) => string {
+  let srcToOutPath: (srcFileName: string) => string;
+  if (outDir) {
+    let path: {} = {};  // Ensure we error if we use `path` instead of `host`.
+    if (sampleSrcFileName == null || sampleOutFileName == null) {
+      throw new Error(`Can't calculate the rootDir without a sample srcFileName / outFileName. `);
+    }
+    const srcFileDir = normalizeSeparators(host.dirname(sampleSrcFileName));
+    const outFileDir = normalizeSeparators(host.dirname(sampleOutFileName));
+    if (srcFileDir === outFileDir) {
+      return (srcFileName) => srcFileName;
+    }
+    // calculate the common suffix, stopping
+    // at `outDir`.
+    const srcDirParts = srcFileDir.split('/');
+    const outDirParts = normalizeSeparators(host.relative(outDir, outFileDir)).split('/');
+    let i = 0;
+    while (i < Math.min(srcDirParts.length, outDirParts.length) &&
+           srcDirParts[srcDirParts.length - 1 - i] === outDirParts[outDirParts.length - 1 - i])
+      i++;
+    const rootDir = srcDirParts.slice(0, srcDirParts.length - i).join('/');
+    srcToOutPath = (srcFileName) => host.resolve(outDir, host.relative(rootDir, srcFileName));
+  } else {
+    srcToOutPath = (srcFileName) => srcFileName;
+  }
+  return srcToOutPath;
+}
+
+export function i18nExtract(
+    formatName: string | null, outFile: string | null, host: ts.CompilerHost,
+    options: CompilerOptions, bundle: MessageBundle): string[] {
+  formatName = formatName || 'xlf';
+  // Checks the format and returns the extension
+  const ext = i18nGetExtension(formatName);
+  const content = i18nSerialize(bundle, formatName, options);
+  const dstFile = outFile || `messages.${ext}`;
+  const dstPath = path.resolve(options.outDir || options.basePath, dstFile);
+  host.writeFile(dstPath, content, false, undefined, []);
+  return [dstPath];
+}
+
+export function i18nSerialize(
+    bundle: MessageBundle, formatName: string, options: CompilerOptions): string {
+  const format = formatName.toLowerCase();
+  let serializer: Serializer;
+
+  switch (format) {
+    case 'xmb':
+      serializer = new Xmb();
+      break;
+    case 'xliff2':
+    case 'xlf2':
+      serializer = new Xliff2();
+      break;
+    case 'xlf':
+    case 'xliff':
+    default:
+      serializer = new Xliff();
+  }
+
+  return bundle.write(serializer, getPathNormalizer(options.basePath));
+}
+
+function getPathNormalizer(basePath?: string) {
+  // normalize source paths by removing the base path and always using "/" as a separator
+  return (sourcePath: string) => {
+    sourcePath = basePath ? path.relative(basePath, sourcePath) : sourcePath;
+    return sourcePath.split(path.sep).join('/');
+  };
+}
+
+export function i18nGetExtension(formatName: string): string {
+  const format = formatName.toLowerCase();
+
+  switch (format) {
+    case 'xmb':
+      return 'xmb';
+    case 'xlf':
+    case 'xlif':
+    case 'xliff':
+    case 'xlf2':
+    case 'xliff2':
+      return 'xlf';
+  }
+
+  throw new Error(`Unsupported format "${formatName}"`);
+}
+
+function mergeEmitResults(emitResults: ts.EmitResult[]): ts.EmitResult {
+  const diagnostics: ts.Diagnostic[] = [];
+  let emitSkipped = false;
+  const emittedFiles: string[] = [];
+  for (const er of emitResults) {
+    diagnostics.push(...er.diagnostics);
+    emitSkipped = emitSkipped || er.emitSkipped;
+    emittedFiles.push(...(er.emittedFiles || []));
+  }
+  return {diagnostics, emitSkipped, emittedFiles};
+}
+
+function diagnosticSourceOfSpan(span: ParseSourceSpan): ts.SourceFile {
+  // For diagnostics, TypeScript only uses the fileName and text properties.
+  // The redundant '()' are here is to avoid having clang-format breaking the line incorrectly.
+  return ({ fileName: span.start.file.url, text: span.start.file.content } as any);
+}
+
+function diagnosticSourceOfFileName(fileName: string, program: ts.Program): ts.SourceFile {
+  const sourceFile = program.getSourceFile(fileName);
+  if (sourceFile) return sourceFile;
+
+  // If we are reporting diagnostics for a source file that is not in the project then we need
+  // to fake a source file so the diagnostic formatting routines can emit the file name.
+  // The redundant '()' are here is to avoid having clang-format breaking the line incorrectly.
+  return ({ fileName, text: '' } as any);
+}
+
+
+function diagnosticChainFromFormattedDiagnosticChain(chain: FormattedMessageChain):
+    DiagnosticMessageChain {
+  return {
+    messageText: chain.message,
+    next: chain.next && diagnosticChainFromFormattedDiagnosticChain(chain.next),
+    position: chain.position
+  };
+}
+
+function syntaxErrorToDiagnostics(error: Error): Diagnostic[] {
+  const parserErrors = getParseErrors(error);
+  if (parserErrors && parserErrors.length) {
+    return parserErrors.map<Diagnostic>(e => ({
+                                          messageText: e.contextualMessage(),
+                                          file: diagnosticSourceOfSpan(e.span),
+                                          start: e.span.start.offset,
+                                          length: e.span.end.offset - e.span.start.offset,
+                                          category: ts.DiagnosticCategory.Error,
+                                          source: SOURCE,
+                                          code: DEFAULT_ERROR_CODE
+                                        }));
+  } else if (isFormattedError(error)) {
+    return [{
+      messageText: error.message,
+      chain: error.chain && diagnosticChainFromFormattedDiagnosticChain(error.chain),
+      category: ts.DiagnosticCategory.Error,
+      source: SOURCE,
+      code: DEFAULT_ERROR_CODE,
+      position: error.position
+    }];
+  }
+  // Produce a Diagnostic anyway since we know for sure `error` is a SyntaxError
+  return [{
+    messageText: error.message,
+    category: ts.DiagnosticCategory.Error,
+    code: DEFAULT_ERROR_CODE,
+    source: SOURCE,
+  }];
+}
diff --git a/packages/compiler-cli/src/transformers/r3_metadata_transform.ts b/packages/compiler-cli/src/transformers/r3_metadata_transform.ts
new file mode 100644
index 000000000000..ace19fea1103
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/r3_metadata_transform.ts
@@ -0,0 +1,55 @@
+/**
+ * @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 {ClassStmt, PartialModule, Statement, StmtModifier} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {MetadataCollector, MetadataValue, ModuleMetadata, isClassMetadata} from '../metadata/index';
+
+import {MetadataTransformer, ValueTransform} from './metadata_cache';
+
+export class PartialModuleMetadataTransformer implements MetadataTransformer {
+  private moduleMap: Map<string, PartialModule>;
+
+  constructor(modules: PartialModule[]) {
+    this.moduleMap = new Map(modules.map<[string, PartialModule]>(m => [m.fileName, m]));
+  }
+
+  start(sourceFile: ts.SourceFile): ValueTransform|undefined {
+    const partialModule = this.moduleMap.get(sourceFile.fileName);
+    if (partialModule) {
+      const classMap = new Map<string, ClassStmt>(
+          partialModule.statements.filter(isClassStmt).map<[string, ClassStmt]>(s => [s.name, s]));
+      if (classMap.size > 0) {
+        return (value: MetadataValue, node: ts.Node): MetadataValue => {
+          // For class metadata that is going to be transformed to have a static method ensure the
+          // metadata contains a static declaration the new static method.
+          if (isClassMetadata(value) && node.kind === ts.SyntaxKind.ClassDeclaration) {
+            const classDeclaration = node as ts.ClassDeclaration;
+            if (classDeclaration.name) {
+              const partialClass = classMap.get(classDeclaration.name.text);
+              if (partialClass) {
+                for (const field of partialClass.fields) {
+                  if (field.name && field.modifiers &&
+                      field.modifiers.some(modifier => modifier === StmtModifier.Static)) {
+                    value.statics = {...(value.statics || {}), [field.name]: {}};
+                  }
+                }
+              }
+            }
+          }
+          return value;
+        };
+      }
+    }
+  }
+}
+
+function isClassStmt(v: Statement): v is ClassStmt {
+  return v instanceof ClassStmt;
+}
diff --git a/packages/compiler-cli/src/transformers/r3_strip_decorators.ts b/packages/compiler-cli/src/transformers/r3_strip_decorators.ts
new file mode 100644
index 000000000000..c5feabee50aa
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/r3_strip_decorators.ts
@@ -0,0 +1,161 @@
+/**
+ * @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 {StaticReflector, StaticSymbol} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {MetadataValue, isClassMetadata, isMetadataImportedSymbolReferenceExpression, isMetadataSymbolicCallExpression} from '../metadata';
+
+import {MetadataTransformer, ValueTransform} from './metadata_cache';
+
+export type Transformer = (sourceFile: ts.SourceFile) => ts.SourceFile;
+export type TransformerFactory = (context: ts.TransformationContext) => Transformer;
+
+export function getDecoratorStripTransformerFactory(
+    coreDecorators: Set<StaticSymbol>, reflector: StaticReflector,
+    checker: ts.TypeChecker): TransformerFactory {
+  return function(context: ts.TransformationContext) {
+    return function(sourceFile: ts.SourceFile): ts.SourceFile {
+      const stripDecoratorsFromClassDeclaration =
+          (node: ts.ClassDeclaration): ts.ClassDeclaration => {
+            if (node.decorators === undefined) {
+              return node;
+            }
+            const decorators = node.decorators.filter(decorator => {
+              const callExpr = decorator.expression;
+              if (ts.isCallExpression(callExpr)) {
+                const id = callExpr.expression;
+                if (ts.isIdentifier(id)) {
+                  const symbol = resolveToStaticSymbol(id, sourceFile.fileName, reflector, checker);
+                  return symbol && coreDecorators.has(symbol);
+                }
+              }
+              return true;
+            });
+            if (decorators.length !== node.decorators.length) {
+              return ts.updateClassDeclaration(
+                  node, decorators, node.modifiers, node.name, node.typeParameters,
+                  node.heritageClauses || [], node.members, );
+            }
+            return node;
+          };
+
+      const stripDecoratorPropertyAssignment = (node: ts.ClassDeclaration): ts.ClassDeclaration => {
+        return ts.visitEachChild(node, member => {
+          if (!ts.isPropertyDeclaration(member) || !isDecoratorAssignment(member) ||
+              !member.initializer || !ts.isArrayLiteralExpression(member.initializer)) {
+            return member;
+          }
+
+          const newInitializer = ts.visitEachChild(member.initializer, decorator => {
+            if (!ts.isObjectLiteralExpression(decorator)) {
+              return decorator;
+            }
+            const type = lookupProperty(decorator, 'type');
+            if (!type || !ts.isIdentifier(type)) {
+              return decorator;
+            }
+            const symbol = resolveToStaticSymbol(type, sourceFile.fileName, reflector, checker);
+            if (!symbol || !coreDecorators.has(symbol)) {
+              return decorator;
+            }
+            return undefined;
+          }, context);
+
+          if (newInitializer === member.initializer) {
+            return member;
+          } else if (newInitializer.elements.length === 0) {
+            return undefined;
+          } else {
+            return ts.updateProperty(
+                member, member.decorators, member.modifiers, member.name, member.questionToken,
+                member.type, newInitializer);
+          }
+        }, context);
+      };
+
+      return ts.visitEachChild(sourceFile, stmt => {
+        if (ts.isClassDeclaration(stmt)) {
+          let decl = stmt;
+          if (stmt.decorators) {
+            decl = stripDecoratorsFromClassDeclaration(stmt);
+          }
+          return stripDecoratorPropertyAssignment(decl);
+        }
+        return stmt;
+      }, context);
+    };
+  };
+}
+
+function isDecoratorAssignment(member: ts.ClassElement): boolean {
+  if (!ts.isPropertyDeclaration(member)) {
+    return false;
+  }
+  if (!member.modifiers ||
+      !member.modifiers.some(mod => mod.kind === ts.SyntaxKind.StaticKeyword)) {
+    return false;
+  }
+  if (!ts.isIdentifier(member.name) || member.name.text !== 'decorators') {
+    return false;
+  }
+  if (!member.initializer || !ts.isArrayLiteralExpression(member.initializer)) {
+    return false;
+  }
+  return true;
+}
+
+function lookupProperty(expr: ts.ObjectLiteralExpression, prop: string): ts.Expression|undefined {
+  const decl = expr.properties.find(
+      elem => !!elem.name && ts.isIdentifier(elem.name) && elem.name.text === prop);
+  if (decl === undefined || !ts.isPropertyAssignment(decl)) {
+    return undefined;
+  }
+  return decl.initializer;
+}
+
+function resolveToStaticSymbol(
+    id: ts.Identifier, containingFile: string, reflector: StaticReflector,
+    checker: ts.TypeChecker): StaticSymbol|null {
+  const res = checker.getSymbolAtLocation(id);
+  if (!res || !res.declarations || res.declarations.length === 0) {
+    return null;
+  }
+  const decl = res.declarations[0];
+  if (!ts.isImportSpecifier(decl)) {
+    return null;
+  }
+  const moduleSpecifier = decl.parent !.parent !.parent !.moduleSpecifier;
+  if (!ts.isStringLiteral(moduleSpecifier)) {
+    return null;
+  }
+  return reflector.tryFindDeclaration(moduleSpecifier.text, id.text, containingFile);
+}
+
+export class StripDecoratorsMetadataTransformer implements MetadataTransformer {
+  constructor(private coreDecorators: Set<StaticSymbol>, private reflector: StaticReflector) {}
+
+  start(sourceFile: ts.SourceFile): ValueTransform|undefined {
+    return (value: MetadataValue, node: ts.Node): MetadataValue => {
+      if (isClassMetadata(value) && ts.isClassDeclaration(node) && value.decorators) {
+        value.decorators = value.decorators.filter(d => {
+          if (isMetadataSymbolicCallExpression(d) &&
+              isMetadataImportedSymbolReferenceExpression(d.expression)) {
+            const declaration = this.reflector.tryFindDeclaration(
+                d.expression.module, d.expression.name, sourceFile.fileName);
+            if (declaration && this.coreDecorators.has(declaration)) {
+              return false;
+            }
+          }
+          return true;
+        });
+      }
+      return value;
+    };
+  }
+}
diff --git a/packages/compiler-cli/src/transformers/r3_transform.ts b/packages/compiler-cli/src/transformers/r3_transform.ts
new file mode 100644
index 000000000000..5c21b8bc82e2
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/r3_transform.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 {PartialModule, Statement, StaticSymbol} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {updateSourceFile} from './node_emitter';
+
+export type Transformer = (sourceFile: ts.SourceFile) => ts.SourceFile;
+export type TransformerFactory = (context: ts.TransformationContext) => Transformer;
+
+/**
+ * Returns a transformer that adds the requested static methods specified by modules.
+ */
+export function getAngularClassTransformerFactory(modules: PartialModule[]): TransformerFactory {
+  if (modules.length === 0) {
+    // If no modules are specified, just return an identity transform.
+    return () => sf => sf;
+  }
+  const moduleMap = new Map(modules.map<[string, PartialModule]>(m => [m.fileName, m]));
+  return function(context: ts.TransformationContext) {
+    return function(sourceFile: ts.SourceFile): ts.SourceFile {
+      const module = moduleMap.get(sourceFile.fileName);
+      if (module && module.statements.length > 0) {
+        const [newSourceFile] = updateSourceFile(sourceFile, module, context);
+        return newSourceFile;
+      }
+      return sourceFile;
+    };
+  };
+}
diff --git a/packages/compiler-cli/src/transformers/tsc_pass_through.ts b/packages/compiler-cli/src/transformers/tsc_pass_through.ts
new file mode 100644
index 000000000000..fde85062b4de
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/tsc_pass_through.ts
@@ -0,0 +1,107 @@
+/**
+ * @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 path from 'path';
+import * as ts from 'typescript';
+
+import * as api from '../transformers/api';
+
+/**
+ * An implementation of the `Program` API which behaves like plain `tsc` and does not include any
+ * Angular-specific behavior whatsoever.
+ *
+ * This allows `ngc` to behave like `tsc` in cases where JIT code needs to be tested.
+ */
+export class TscPassThroughProgram implements api.Program {
+  private tsProgram: ts.Program;
+
+  constructor(
+      rootNames: ReadonlyArray<string>, private options: api.CompilerOptions,
+      private host: api.CompilerHost, oldProgram?: api.Program) {
+    this.tsProgram =
+        ts.createProgram(rootNames, options, host, oldProgram && oldProgram.getTsProgram());
+  }
+
+  getTsProgram(): ts.Program { return this.tsProgram; }
+
+  getTsOptionDiagnostics(cancellationToken?: ts.CancellationToken|
+                         undefined): ReadonlyArray<ts.Diagnostic> {
+    return this.tsProgram.getOptionsDiagnostics(cancellationToken);
+  }
+
+  getNgOptionDiagnostics(cancellationToken?: ts.CancellationToken|
+                         undefined): ReadonlyArray<api.Diagnostic> {
+    return [];
+  }
+
+  getTsSyntacticDiagnostics(
+      sourceFile?: ts.SourceFile|undefined,
+      cancellationToken?: ts.CancellationToken|undefined): ReadonlyArray<ts.Diagnostic> {
+    return this.tsProgram.getSyntacticDiagnostics(sourceFile, cancellationToken);
+  }
+
+  getNgStructuralDiagnostics(cancellationToken?: ts.CancellationToken|
+                             undefined): ReadonlyArray<api.Diagnostic> {
+    return [];
+  }
+
+  getTsSemanticDiagnostics(
+      sourceFile?: ts.SourceFile|undefined,
+      cancellationToken?: ts.CancellationToken|undefined): ReadonlyArray<ts.Diagnostic> {
+    return this.tsProgram.getSemanticDiagnostics(sourceFile, cancellationToken);
+  }
+
+  getNgSemanticDiagnostics(
+      fileName?: string|undefined,
+      cancellationToken?: ts.CancellationToken|undefined): ReadonlyArray<api.Diagnostic> {
+    return [];
+  }
+
+  loadNgStructureAsync(): Promise<void> { return Promise.resolve(); }
+
+  listLazyRoutes(entryRoute?: string|undefined): api.LazyRoute[] {
+    throw new Error('Method not implemented.');
+  }
+
+  getLibrarySummaries(): Map<string, api.LibrarySummary> {
+    throw new Error('Method not implemented.');
+  }
+
+  getEmittedGeneratedFiles(): Map<string, GeneratedFile> {
+    throw new Error('Method not implemented.');
+  }
+
+  getEmittedSourceFiles(): Map<string, ts.SourceFile> {
+    throw new Error('Method not implemented.');
+  }
+
+  emit(opts?: {
+    emitFlags?: api.EmitFlags,
+    cancellationToken?: ts.CancellationToken,
+    customTransformers?: api.CustomTransformers,
+    emitCallback?: api.TsEmitCallback,
+    mergeEmitResultsCallback?: api.TsMergeEmitResultsCallback
+  }): ts.EmitResult {
+    const emitCallback = opts && opts.emitCallback || defaultEmitCallback;
+
+    const emitResult = emitCallback({
+      program: this.tsProgram,
+      host: this.host,
+      options: this.options,
+      emitOnlyDtsFiles: false,
+    });
+    return emitResult;
+  }
+}
+
+const defaultEmitCallback: api.TsEmitCallback =
+    ({program, targetSourceFile, writeFile, cancellationToken, emitOnlyDtsFiles,
+      customTransformers}) =>
+        program.emit(
+            targetSourceFile, writeFile, cancellationToken, emitOnlyDtsFiles, customTransformers);
diff --git a/packages/compiler-cli/src/transformers/util.ts b/packages/compiler-cli/src/transformers/util.ts
new file mode 100644
index 000000000000..8d35326e27a2
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/util.ts
@@ -0,0 +1,89 @@
+/**
+ * @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 {syntaxError} from '@angular/compiler';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {CompilerOptions, DEFAULT_ERROR_CODE, Diagnostic, SOURCE} from './api';
+
+export const GENERATED_FILES = /(.*?)\.(ngfactory|shim\.ngstyle|ngstyle|ngsummary)\.(js|d\.ts|ts)$/;
+export const DTS = /\.d\.ts$/;
+export const TS = /^(?!.*\.d\.ts$).*\.ts$/;
+
+export const enum StructureIsReused {Not = 0, SafeModules = 1, Completely = 2}
+
+// Note: This is an internal property in TypeScript. Use it only for assertions and tests.
+export function tsStructureIsReused(program: ts.Program): StructureIsReused {
+  return (program as any).structureIsReused;
+}
+
+export function error(msg: string): never {
+  throw new Error(`Internal error: ${msg}`);
+}
+
+export function userError(msg: string): never {
+  throw syntaxError(msg);
+}
+
+export function createMessageDiagnostic(messageText: string): ts.Diagnostic&Diagnostic {
+  return {
+    file: undefined,
+    start: undefined,
+    length: undefined,
+    category: ts.DiagnosticCategory.Message, messageText,
+    code: DEFAULT_ERROR_CODE,
+    source: SOURCE,
+  };
+}
+
+export function isInRootDir(fileName: string, options: CompilerOptions) {
+  return !options.rootDir || pathStartsWithPrefix(options.rootDir, fileName);
+}
+
+export function relativeToRootDirs(filePath: string, rootDirs: string[]): string {
+  if (!filePath) return filePath;
+  for (const dir of rootDirs || []) {
+    const rel = pathStartsWithPrefix(dir, filePath);
+    if (rel) {
+      return rel;
+    }
+  }
+  return filePath;
+}
+
+function pathStartsWithPrefix(prefix: string, fullPath: string): string|null {
+  const rel = path.relative(prefix, fullPath);
+  return rel.startsWith('..') ? null : rel;
+}
+
+/**
+ * Converts a ng.Diagnostic into a ts.Diagnostic.
+ * This looses some information, and also uses an incomplete object as `file`.
+ *
+ * I.e. only use this where the API allows only a ts.Diagnostic.
+ */
+export function ngToTsDiagnostic(ng: Diagnostic): ts.Diagnostic {
+  let file: ts.SourceFile|undefined;
+  let start: number|undefined;
+  let length: number|undefined;
+  if (ng.span) {
+    // Note: We can't use a real ts.SourceFile,
+    // but we can at least mirror the properties `fileName` and `text`, which
+    // are mostly used for error reporting.
+    file = { fileName: ng.span.start.file.url, text: ng.span.start.file.content } as ts.SourceFile;
+    start = ng.span.start.offset;
+    length = ng.span.end.offset - start;
+  }
+  return {
+    file,
+    messageText: ng.messageText,
+    category: ng.category,
+    code: ng.code, start, length,
+  };
+}
diff --git a/packages/compiler-cli/src/version.ts b/packages/compiler-cli/src/version.ts
new file mode 100644
index 000000000000..0ebdb959fcf1
--- /dev/null
+++ b/packages/compiler-cli/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/compiler';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/compiler-cli/test/BUILD.bazel b/packages/compiler-cli/test/BUILD.bazel
new file mode 100644
index 000000000000..d2364a80022e
--- /dev/null
+++ b/packages/compiler-cli/test/BUILD.bazel
@@ -0,0 +1,135 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+# Uses separate test rules to allow the tests to run in parallel
+
+ts_library(
+    name = "test_utils",
+    testonly = 1,
+    srcs = [
+        "mocks.ts",
+        "test_support.ts",
+    ],
+    visibility = [
+        ":__subpackages__",
+        "//packages/language-service/test:__subpackages__",
+    ],
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+    ],
+)
+
+# extract_18n_spec
+ts_library(
+    name = "extract_i18n_lib",
+    testonly = 1,
+    srcs = [
+        "extract_i18n_spec.ts",
+    ],
+    deps = [
+        ":test_utils",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+    ],
+)
+
+jasmine_node_test(
+    name = "extract_i18n",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+        "//packages/core:npm_package",
+    ],
+    deps = [
+        ":extract_i18n_lib",
+        "//packages/common:npm_package",
+        "//packages/core",
+        "//tools/testing:node",
+    ],
+)
+
+# ngc_spec
+ts_library(
+    name = "ngc_lib",
+    testonly = 1,
+    srcs = [
+        "ngc_spec.ts",
+    ],
+    deps = [
+        ":test_utils",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+    ],
+)
+
+jasmine_node_test(
+    name = "ngc",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+        "//packages/common:npm_package",
+        "//packages/core:npm_package",
+        "//packages/platform-browser:npm_package",
+        "//packages/router:npm_package",
+    ],
+    deps = [
+        ":ngc_lib",
+        "//packages/core",
+        "//tools/testing:node",
+    ],
+)
+
+# ngctools_api_spec
+ts_library(
+    name = "ngtools_api_lib",
+    testonly = 1,
+    srcs = [
+        "ngtools_api_spec.ts",
+    ],
+    deps = [
+        ":test_utils",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+    ],
+)
+
+jasmine_node_test(
+    name = "ngtools_api",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+        "//packages/core:npm_package",
+        "//packages/router:npm_package",
+    ],
+    deps = [
+        ":ngtools_api_lib",
+        "//packages/core",
+        "//tools/testing:node",
+    ],
+)
+
+# perform_watch_spec
+ts_library(
+    name = "perform_watch_lib",
+    testonly = 1,
+    srcs = [
+        "perform_watch_spec.ts",
+    ],
+    deps = [
+        ":test_utils",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+    ],
+)
+
+jasmine_node_test(
+    name = "perform_watch",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+        "//packages/core:npm_package",
+    ],
+    deps = [
+        ":perform_watch_lib",
+        "//packages/core",
+        "//tools/testing:node",
+    ],
+)
diff --git a/packages/compiler-cli/test/compliance/BUILD.bazel b/packages/compiler-cli/test/compliance/BUILD.bazel
new file mode 100644
index 000000000000..b49764a59721
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/BUILD.bazel
@@ -0,0 +1,32 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        ["**/*.ts"],
+    ),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+        "//packages/compiler/test:test_utils",
+    ],
+)
+
+jasmine_node_test(
+    name = "compliance",
+    bootstrap = ["angular/tools/testing/init_node_no_angular_spec.js"],
+    data = [
+        "//packages/compiler-cli/test/ngtsc/fake_core:npm_package",
+    ],
+    tags = [
+        "ivy-local",
+        "ivy-only",
+    ],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node_no_angular",
+    ],
+)
diff --git a/packages/compiler-cli/test/compliance/README.md b/packages/compiler-cli/test/compliance/README.md
new file mode 100644
index 000000000000..42e76de5db73
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/README.md
@@ -0,0 +1,3 @@
+Tests in this directory should be run with:
+
+bazel test --define=compile=local  packages/compiler-cli/test/compliance:compliance
diff --git a/packages/compiler-cli/test/compliance/mock_compile.ts b/packages/compiler-cli/test/compliance/mock_compile.ts
new file mode 100644
index 000000000000..ec39a099c808
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/mock_compile.ts
@@ -0,0 +1,184 @@
+/**
+ * @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} from '@angular/compiler';
+import {escapeRegExp} from '@angular/compiler/src/util';
+import {MockCompilerHost, MockData, MockDirectory, arrayToMockDir, settings, toMockFileArray} from '@angular/compiler/test/aot/test_util';
+import * as ts from 'typescript';
+
+import {NgtscProgram} from '../../src/ngtsc/program';
+
+
+const IDENTIFIER = /[A-Za-z_$ɵ][A-Za-z0-9_$]*/;
+const OPERATOR =
+    /!|\?|%|\*|\/|\^|&&?|\|\|?|\(|\)|\{|\}|\[|\]|:|;|<=?|>=?|={1,3}|!==?|=>|\+\+?|--?|@|,|\.|\.\.\./;
+const STRING = /'[^']*'|"[^"]*"|`[\s\S]*?`/;
+const NUMBER = /\d+/;
+
+const ELLIPSIS = '…';
+const TOKEN = new RegExp(
+    `\\s*((${IDENTIFIER.source})|(${OPERATOR.source})|(${STRING.source})|${NUMBER.source}|${ELLIPSIS})`,
+    'y');
+
+type Piece = string | RegExp;
+
+const SKIP = /(?:.|\n|\r)*/;
+
+const ERROR_CONTEXT_WIDTH = 30;
+// Transform the expected output to set of tokens
+function tokenize(text: string): Piece[] {
+  TOKEN.lastIndex = 0;
+
+  let match: RegExpMatchArray|null;
+  const pieces: Piece[] = [];
+
+  while ((match = TOKEN.exec(text)) !== null) {
+    const token = match[1];
+    if (token === 'IDENT') {
+      pieces.push(IDENTIFIER);
+    } else if (token === ELLIPSIS) {
+      pieces.push(SKIP);
+    } else {
+      pieces.push(token);
+    }
+  }
+
+  if (pieces.length === 0 || TOKEN.lastIndex !== 0) {
+    const from = TOKEN.lastIndex;
+    const to = from + ERROR_CONTEXT_WIDTH;
+    throw Error(`Invalid test, no token found for '${text.substr(from, to)}...'`);
+  }
+
+  return pieces;
+}
+
+export function expectEmit(
+    source: string, expected: string, description: string,
+    assertIdentifiers?: {[name: string]: RegExp}) {
+  // turns `// ...` into `…`
+  // remove `// TODO` comment lines
+  expected = expected.replace(/\/\/\s*\.\.\./g, ELLIPSIS).replace(/\/\/\s*TODO.*?\n/g, '');
+
+  const pieces = tokenize(expected);
+  const {regexp, groups} = buildMatcher(pieces);
+  const matches = source.match(regexp);
+  if (matches === null) {
+    let last: number = 0;
+    for (let i = 1; i < pieces.length; i++) {
+      const {regexp} = buildMatcher(pieces.slice(0, i));
+      const m = source.match(regexp);
+      const expectedPiece = pieces[i - 1] == IDENTIFIER ? '<IDENT>' : pieces[i - 1];
+      if (!m) {
+        // display at most `contextLength` characters of the line preceding the error location
+        const contextLength = 50;
+        const fullContext = source.substring(source.lastIndexOf('\n', last) + 1, last);
+        const context = fullContext.length > contextLength ?
+            `...${fullContext.substr(-contextLength)}` :
+            fullContext;
+        fail(
+            `${description}: Failed to find "${expectedPiece}" after "${context}" in:\n'${source.substr(0,last)}[<---HERE expected "${expectedPiece}"]${source.substr(last)}'`);
+        return;
+      } else {
+        last = (m.index || 0) + m[0].length;
+      }
+    }
+    fail(
+        `Test helper failure: Expected expression failed but the reporting logic could not find where it failed in: ${source}`);
+  } else {
+    if (assertIdentifiers) {
+      // It might be possible to add the constraints in the original regexp (see `buildMatcher`)
+      // by transforming the assertion regexps when using anchoring, grouping, back references,
+      // flags, ...
+      //
+      // Checking identifiers after they have matched allows for a simple and flexible
+      // implementation.
+      // The overall performance are not impacted when `assertIdentifiers` is empty.
+      const ids = Object.keys(assertIdentifiers);
+      for (let i = 0; i < ids.length; i++) {
+        const id = ids[i];
+        if (groups.has(id)) {
+          const name = matches[groups.get(id) as number];
+          const regexp = assertIdentifiers[id];
+          if (!regexp.test(name)) {
+            throw Error(
+                `${description}: The matching identifier "${id}" is "${name}" which doesn't match ${regexp}`);
+          }
+        }
+      }
+    }
+  }
+}
+
+const IDENT_LIKE = /^[a-z][A-Z]/;
+const MATCHING_IDENT = /^\$.*\$$/;
+
+/*
+ * Builds a regexp that matches the given `pieces`
+ *
+ * It returns:
+ * - the `regexp` to be used to match the generated code,
+ * - the `groups` which maps `$...$` identifier to their position in the regexp matches.
+ */
+function buildMatcher(pieces: (string | RegExp)[]): {regexp: RegExp, groups: Map<string, number>} {
+  const results: string[] = [];
+  let first = true;
+  let group = 0;
+
+  const groups = new Map<string, number>();
+  for (const piece of pieces) {
+    if (!first)
+      results.push(`\\s${typeof piece === 'string' && IDENT_LIKE.test(piece) ? '+' : '*'}`);
+    first = false;
+    if (typeof piece === 'string') {
+      if (MATCHING_IDENT.test(piece)) {
+        const matchGroup = groups.get(piece);
+        if (!matchGroup) {
+          results.push('(' + IDENTIFIER.source + ')');
+          const newGroup = ++group;
+          groups.set(piece, newGroup);
+        } else {
+          results.push(`\\${matchGroup}`);
+        }
+      } else {
+        results.push(escapeRegExp(piece));
+      }
+    } else {
+      results.push('(?:' + piece.source + ')');
+    }
+  }
+  return {
+    regexp: new RegExp(results.join('')),
+    groups,
+  };
+}
+
+
+export function compile(
+    data: MockDirectory, angularFiles: MockData, options: AotCompilerOptions = {},
+    errorCollector: (error: any, fileName?: string) => void = error => { throw error;}): {
+  source: string,
+} {
+  const testFiles = toMockFileArray(data);
+  const scripts = testFiles.map(entry => entry.fileName);
+  const angularFilesArray = toMockFileArray(angularFiles);
+  const files = arrayToMockDir([...testFiles, ...angularFilesArray]);
+  const mockCompilerHost = new MockCompilerHost(scripts, files);
+
+  const program = new NgtscProgram(
+      scripts, {
+        target: ts.ScriptTarget.ES2015,
+        module: ts.ModuleKind.ES2015,
+        moduleResolution: ts.ModuleResolutionKind.NodeJs, ...options,
+      },
+      mockCompilerHost);
+  program.emit();
+  const source =
+      scripts.map(script => mockCompilerHost.readFile(script.replace(/\.ts$/, '.js'))).join('\n');
+
+  return {source};
+}
diff --git a/packages/compiler-cli/test/compliance/mock_compiler_spec.ts b/packages/compiler-cli/test/compliance/mock_compiler_spec.ts
new file mode 100644
index 000000000000..4b0e3ab4d4ae
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/mock_compiler_spec.ts
@@ -0,0 +1,217 @@
+/**
+ * @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 {setup} from '@angular/compiler/test/aot/test_util';
+import {compile, expectEmit} from './mock_compile';
+
+describe('mock_compiler', () => {
+  // This produces a MockDirectory of the file needed to compile an Angular application.
+  // This setup is performed in a beforeAll which populates the map returned.
+  const angularFiles = setup({
+    compileAngular: false,
+    compileFakeCore: true,
+    compileAnimations: false,
+  });
+
+  describe('compiling', () => {
+    // To use compile you need to supply the files in a MockDirectory that can be merged
+    // with a set of "environment" files such as the angular files.
+    it('should be able to compile a simple application', () => {
+      const files = {
+        app: {
+          'hello.component.ts': `
+            import {Component, Input} from '@angular/core';
+
+            @Component({template: 'Hello {{name}}!'})
+            export class HelloComponent {
+              @Input() name: string = 'world';
+            }
+          `,
+          'hello.module.ts': `
+            import {NgModule} from '@angular/core';
+            import {HelloComponent} from './hello.component';
+
+            @NgModule({declarations: [HelloComponent]})
+            export class HelloModule {}
+          `
+        }
+      };
+      const result = compile(files, angularFiles);
+
+      // result.source contains just the emitted factory declarations regardless of the original
+      // module.
+      expect(result.source).toContain('Hello');
+    });
+  });
+
+  describe('expecting emitted output', () => {
+    it('should be able to find a simple expression in the output', () => {
+      const files = {
+        app: {
+          'hello.component.ts': `
+            import {Component, Input} from '@angular/core';
+
+            @Component({template: 'Hello {{name}}! Your name as {{name.length}} characters'})
+            export class HelloComponent {
+              @Input() name: string = 'world';
+            }
+          `,
+          'hello.module.ts': `
+            import {NgModule} from '@angular/core';
+            import {HelloComponent} from './hello.component';
+
+            @NgModule({declarations: [HelloComponent]})
+            export class HelloModule {}
+          `
+        }
+      };
+
+      const result = compile(files, angularFiles);
+
+      // The expression can expected directly.
+      expectEmit(result.source, 'name.length', 'name length expression not found');
+
+      // Whitespace is not significant
+      expectEmit(
+          result.source, 'name   \n\n   .  \n    length',
+          'name length expression not found (whitespace)');
+    });
+  });
+
+  it('should be able to skip untested regions (… and // ...)', () => {
+    const files = {
+      app: {
+        'hello.component.ts': `
+          import {Component, Input} from '@angular/core';
+
+          @Component({template: 'Hello {{name}}! Your name as {{name.length}} characters'})
+          export class HelloComponent {
+            @Input() name: string = 'world';
+          }
+        `,
+        'hello.module.ts': `
+          import {NgModule} from '@angular/core';
+          import {HelloComponent} from './hello.component';
+
+          @NgModule({declarations: [HelloComponent]})
+          export class HelloModule {}
+        `
+      }
+    };
+
+    const result = compile(files, angularFiles);
+
+    // The special character … means anything can be generated between the two sections allowing
+    // skipping sections of the output that are not under test. The ellipsis unicode char (…) is
+    // used instead of '...' because '...' is legal JavaScript (the spread operator) and might
+    // need to be tested. `// ...` could also be used in place of `…`.
+    expectEmit(result.source, 'ctx.name … ctx.name.length', 'could not find correct length access');
+    expectEmit(
+        result.source, 'ctx.name // ... ctx.name.length', 'could not find correct length access');
+  });
+
+  it('should be able to skip TODO comments (// TODO)', () => {
+    const files = {
+      app: {
+        'hello.component.ts': `
+          import {Component, Input} from '@angular/core';
+
+          @Component({template: 'Hello!'})
+          export class HelloComponent { }
+        `,
+        'hello.module.ts': `
+          import {NgModule} from '@angular/core';
+          import {HelloComponent} from './hello.component';
+
+          @NgModule({declarations: [HelloComponent]})
+          export class HelloModule {}
+        `
+      }
+    };
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(
+        result.source, `
+    // TODO: this comment should not be taken into account
+    $r3$.ɵT(0, "Hello!");
+    // TODO: this comment should not be taken into account
+    `,
+        'todo comments should be ignored');
+  });
+
+
+  it('should be able to enforce consistent identifiers', () => {
+    const files = {
+      app: {
+        'hello.component.ts': `
+          import {Component, Input} from '@angular/core';
+
+          @Component({template: 'Hello {{name}}! Your name as {{name.length}} characters'})
+          export class HelloComponent {
+            @Input() name: string = 'world';
+          }
+        `,
+        'hello.module.ts': `
+          import {NgModule} from '@angular/core';
+          import {HelloComponent} from './hello.component';
+
+          @NgModule({declarations: [HelloComponent]})
+          export class HelloModule {}
+        `
+      }
+    };
+
+    const result = compile(files, angularFiles);
+
+    // IDENT can be used a wild card for any identifier
+    expectEmit(result.source, 'IDENT.name', 'could not find context access');
+
+    // $<ident>$ can be used as a wild-card but all the content matched by the identifiers must
+    // match each other.
+    // This is useful if the code generator is free to invent a name but should use the name
+    // consistently.
+    expectEmit(
+        result.source, '$ctx$.$name$ … $ctx$.$name$.length',
+        'could not find correct length access');
+  });
+
+  it('should be able to enforce that identifiers match a regexp', () => {
+    const files = {
+      app: {
+        'hello.component.ts': `
+          import {Component, Input} from '@angular/core';
+
+          @Component({template: 'Hello {{name}}! Your name as {{name.length}} characters'})
+          export class HelloComponent {
+            @Input() name: string = 'world';
+          }
+        `,
+        'hello.module.ts': `
+          import {NgModule} from '@angular/core';
+          import {HelloComponent} from './hello.component';
+
+          @NgModule({declarations: [HelloComponent]})
+          export class HelloModule {}
+        `
+      }
+    };
+
+    const result = compile(files, angularFiles);
+
+    // Pass: `$n$` ends with `ME` in the generated code
+    expectEmit(result.source, '$ctx$.$n$ … $ctx$.$n$.length', 'Match names', {'$n$': /ME$/i});
+
+    // Fail: `$n$` does not match `/(not)_(\1)/` in the generated code
+    expect(() => {
+      expectEmit(
+          result.source, '$ctx$.$n$ … $ctx$.$n$.length', 'Match names', {'$n$': /(not)_(\1)/});
+    }).toThrowError(/"\$n\$" is "name" which doesn't match \/\(not\)_\(\\1\)\//);
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
new file mode 100644
index 000000000000..4d87cbe64988
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
@@ -0,0 +1,2062 @@
+/**
+ * @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 {InitialStylingFlags} from '@angular/compiler/src/core';
+import {setup} from '@angular/compiler/test/aot/test_util';
+import {compile, expectEmit} from './mock_compile';
+
+
+/* These tests are codified version of the tests in compiler_canonical_spec.ts. Every
+  * test in compiler_canonical_spec.ts should have a corresponding test here.
+  */
+describe('compiler compliance', () => {
+
+  const angularFiles = setup({
+    compileAngular: false,
+    compileAnimations: false,
+    compileFakeCore: true,
+  });
+
+  describe('elements', () => {
+    it('should handle SVG', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`<div class="my-app" title="Hello"><svg><circle cx="20" cy="30" r="50"/></svg><p>test</p></div>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+        }
+      };
+
+      // The factory should look like this:
+      const factory =
+          'factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); }';
+
+      // The template should look like this (where IDENT is a wild card for an identifier):
+      const template = `
+        const $c1$ = ["title", "Hello"];
+        const $c2$ = ["my-app", ${InitialStylingFlags.VALUES_MODE}, "my-app", true];
+        const $c3$ = ["cx", "20", "cy", "30", "r", "50"];
+        …
+        template: function MyComponent_Template(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵE(0, "div", $c1$);
+            $r3$.ɵs($c2$);
+            $r3$.ɵNS();
+            $r3$.ɵE(1, "svg");
+            $r3$.ɵEe(2, "circle", $c3$);
+            $r3$.ɵe();
+            $r3$.ɵNH();
+            $r3$.ɵE(3, "p");
+            $r3$.ɵT(4, "test");
+            $r3$.ɵe();
+            $r3$.ɵe();
+          }
+        }
+      `;
+
+
+      const result = compile(files, angularFiles);
+
+      expectEmit(result.source, factory, 'Incorrect factory');
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    it('should handle MathML', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`<div class="my-app" title="Hello"><math><infinity/></math><p>test</p></div>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+        }
+      };
+
+      // The factory should look like this:
+      const factory =
+          'factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); }';
+
+      // The template should look like this (where IDENT is a wild card for an identifier):
+      const template = `
+        const $c1$ = ["title", "Hello"];
+        const $c2$ = ["my-app", ${InitialStylingFlags.VALUES_MODE}, "my-app", true];
+        …
+        template: function MyComponent_Template(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵE(0, "div", $c1$);
+            $r3$.ɵs($c2$);
+            $r3$.ɵNM();
+            $r3$.ɵE(1, "math");
+            $r3$.ɵEe(2, "infinity");
+            $r3$.ɵe();
+            $r3$.ɵNH();
+            $r3$.ɵE(3, "p");
+            $r3$.ɵT(4, "test");
+            $r3$.ɵe();
+            $r3$.ɵe();
+          }
+        }
+      `;
+
+
+      const result = compile(files, angularFiles);
+
+      expectEmit(result.source, factory, 'Incorrect factory');
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    it('should translate DOM structure', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`<div class="my-app" title="Hello">Hello <b>World</b>!</div>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+        }
+      };
+
+      // The factory should look like this:
+      const factory =
+          'factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); }';
+
+      // The template should look like this (where IDENT is a wild card for an identifier):
+      const template = `
+        const $c1$ = ["title", "Hello"];
+        const $c2$ = ["my-app", ${InitialStylingFlags.VALUES_MODE}, "my-app", true];
+        …
+        template: function MyComponent_Template(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵE(0, "div", $c1$);
+            $r3$.ɵs($c2$);
+            $r3$.ɵT(1, "Hello ");
+            $r3$.ɵE(2, "b");
+            $r3$.ɵT(3, "World");
+            $r3$.ɵe();
+            $r3$.ɵT(4, "!");
+            $r3$.ɵe();
+          }
+        }
+      `;
+
+
+      const result = compile(files, angularFiles);
+
+      expectEmit(result.source, factory, 'Incorrect factory');
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    // TODO(https://github.com/angular/angular/issues/24426): We need to support the parser actually
+    // building the proper attributes based off of xmlns atttribuates.
+    xit('should support namspaced attributes', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: 'my-component',
+                  template: \`<div xmlns:foo="http://someuri/foo" class="my-app" foo:bar="baz" title="Hello" foo:qux="quacks">Hello <b>World</b>!</div>\`
+                })
+                export class MyComponent {}
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+        }
+      };
+
+      // The factory should look like this:
+      const factory =
+          'factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); }';
+
+      // The template should look like this (where IDENT is a wild card for an identifier):
+      const template = `
+          const $c1$ = ["class", "my-app", 0, "http://someuri/foo", "foo:bar", "baz", "title", "Hello", 0, "http://someuri/foo", "foo:qux", "quacks"];
+          …
+          template: function MyComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵE(0, "div", $e0_attrs$);
+              $r3$.ɵT(1, "Hello ");
+              $r3$.ɵE(2, "b");
+              $r3$.ɵT(3, "World");
+              $r3$.ɵe();
+              $r3$.ɵT(4, "!");
+              $r3$.ɵe();
+            }
+          }
+        `;
+
+
+      const result = compile(files, angularFiles);
+
+      expectEmit(result.source, factory, 'Incorrect factory');
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    it('should support <ng-container>', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`<ng-container><span>in a </span>container</ng-container>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+        }
+      };
+
+      // The template should look like this (where IDENT is a wild card for an identifier):
+      const template = `
+          …
+          template: function MyComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              i0.ɵEC(0);
+              i0.ɵE(1, "span");
+              i0.ɵT(2, "in a ");
+              i0.ɵe();
+              i0.ɵT(3, "container");
+              i0.ɵeC();
+            }
+          }
+        `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    it('should generate elementContainerStart/End instructions for empty <ng-container>', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`<ng-container></ng-container>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+        }
+      };
+
+      // The template should look like this (where IDENT is a wild card for an identifier):
+      const template = `
+          …
+          template: function MyComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              i0.ɵEC(0);
+              i0.ɵeC();
+            }
+          }
+        `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    it('should bind to element properties', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`<div [id]="id"></div>\`
+              })
+              export class MyComponent {
+                id = 'one';
+              }
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+        }
+      };
+
+      const factory =
+          'factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); }';
+      const template = `
+        template: function MyComponent_Template(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵEe(0, "div");
+          }
+          if (rf & 2) {
+            $r3$.ɵp(0, "id", $r3$.ɵb(ctx.id));
+          }
+        }
+      `;
+
+
+      const result = compile(files, angularFiles);
+
+      expectEmit(result.source, factory, 'Incorrect factory');
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    it('should reserve slots for pure functions', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`<div
+                  [ternary]="cond ? [a] : [0]"
+                  [pipe]="value | pipe:1:2"
+                  [and]="cond && [b]"
+                  [or]="cond || [c]"
+                ></div>\`
+              })
+              export class MyComponent {
+                id = 'one';
+              }
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+        }
+      };
+
+      const factory =
+          'factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); }';
+      const template = `
+        template: function MyComponent_Template(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵEe(0, "div");
+            $r3$.ɵPp(1,"pipe");
+            $r3$.ɵrS(10);
+          }
+          if (rf & 2) {
+            $r3$.ɵp(0, "ternary", $r3$.ɵb((ctx.cond ? $r3$.ɵf1(6, _c0, ctx.a): _c1)));
+            $r3$.ɵp(0, "pipe", $r3$.ɵb($r3$.ɵpb3(1, 4, ctx.value, 1, 2)));
+            $r3$.ɵp(0, "and", $r3$.ɵb((ctx.cond && $r3$.ɵf1(8, _c0, ctx.b))));
+            $r3$.ɵp(0, "or", $r3$.ɵb((ctx.cond || $r3$.ɵf1(10, _c0, ctx.c))));
+          }
+        }
+      `;
+
+
+      const result = compile(files, angularFiles);
+
+      expectEmit(result.source, factory, 'Incorrect factory');
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    it('should bind to class and style names', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`<div [class.error]="error" [style.background-color]="color"></div>\`
+              })
+              export class MyComponent {
+                error = true;
+                color = 'red';
+              }
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+        }
+      };
+
+      const factory =
+          'factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); }';
+      const template = `
+        const _c0 = ["error"];
+        const _c1 = ["background-color"];
+        …
+        MyComponent.ngComponentDef = i0.ɵdefineComponent({type:MyComponent,selectors:[["my-component"]],
+            factory: function MyComponent_Factory(t){
+              return new (t || MyComponent)();
+            },
+            features: [$r3$.ɵPublicFeature],
+            template:function MyComponent_Template(rf,ctx){
+              if (rf & 1) {
+                $r3$.ɵE(0, "div");
+                $r3$.ɵs(_c0, _c1);
+                $r3$.ɵe();
+              }
+              if (rf & 2) {
+                $r3$.ɵsp(0, 0, ctx.color);
+                $r3$.ɵcp(0, 0, ctx.error);
+                $r3$.ɵsa(0);
+              }
+            }
+        });
+      `;
+
+
+      const result = compile(files, angularFiles);
+
+      expectEmit(result.source, factory, 'Incorrect factory');
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+  });
+
+  describe('components & directives', () => {
+    it('should instantiate directives', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, Directive, NgModule} from '@angular/core';
+
+            @Component({selector: 'child', template: 'child-view'})
+            export class ChildComponent {}
+
+            @Directive({selector: '[some-directive]'})
+            export class SomeDirective {}
+
+            @Component({selector: 'my-component', template: '<child some-directive></child>!'})
+            export class MyComponent {}
+
+            @NgModule({declarations: [ChildComponent, SomeDirective, MyComponent]})
+            export class MyModule{}
+          `
+        }
+      };
+
+      // ChildComponent definition should be:
+      const ChildComponentDefinition = `
+        ChildComponent.ngComponentDef = $r3$.ɵdefineComponent({
+          type: ChildComponent,
+          selectors: [["child"]],
+          factory: function ChildComponent_Factory(t) { return new (t || ChildComponent)(); },
+          features: [$r3$.ɵPublicFeature],
+          template: function ChildComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵT(0, "child-view");
+            }
+          }
+        });`;
+
+      // SomeDirective definition should be:
+      const SomeDirectiveDefinition = `
+        SomeDirective.ngDirectiveDef = $r3$.ɵdefineDirective({
+          type: SomeDirective,
+          selectors: [["", "some-directive", ""]],
+          factory: function SomeDirective_Factory(t) {return new (t || SomeDirective)(); },
+          features: [$r3$.ɵPublicFeature]
+        });
+      `;
+
+      // MyComponent definition should be:
+      const MyComponentDefinition = `
+        const $c1$ = ["some-directive", ""];
+        …
+        MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors: [["my-component"]],
+          factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
+          features: [$r3$.ɵPublicFeature],
+          template: function MyComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, "child", $c1$);
+              $r3$.ɵT(1, "!");
+            }
+          },
+          directives: [ChildComponent, SomeDirective]
+        });
+      `;
+
+
+      const result = compile(files, angularFiles);
+      const source = result.source;
+
+      expectEmit(source, ChildComponentDefinition, 'Incorrect ChildComponent.ngComponentDef');
+      expectEmit(source, SomeDirectiveDefinition, 'Incorrect SomeDirective.ngDirectiveDef');
+      expectEmit(source, MyComponentDefinition, 'Incorrect MyComponentDefinition.ngComponentDef');
+    });
+
+    it('should support complex selectors', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Directive, NgModule} from '@angular/core';
+
+            @Directive({selector: 'div.foo[some-directive]:not([title]):not(.baz)'})
+            export class SomeDirective {}
+
+            @Directive({selector: ':not(span[title]):not(.baz)'})
+            export class OtherDirective {}
+
+            @NgModule({declarations: [SomeDirective, OtherDirective]})
+            export class MyModule{}
+          `
+        }
+      };
+
+      // SomeDirective definition should be:
+      const SomeDirectiveDefinition = `
+        SomeDirective.ngDirectiveDef = $r3$.ɵdefineDirective({
+          type: SomeDirective,
+          selectors: [["div", "some-directive", "", 8, "foo", 3, "title", "", 9, "baz"]],
+          factory: function SomeDirective_Factory(t) {return new (t || SomeDirective)(); },
+          features: [$r3$.ɵPublicFeature]
+        });
+      `;
+
+      // OtherDirective definition should be:
+      const OtherDirectiveDefinition = `
+        OtherDirective.ngDirectiveDef = $r3$.ɵdefineDirective({
+          type: OtherDirective,
+          selectors: [["", 5, "span", "title", "", 9, "baz"]],
+          factory: function OtherDirective_Factory(t) {return new (t || OtherDirective)(); },
+          features: [$r3$.ɵPublicFeature]
+        });
+      `;
+
+      const result = compile(files, angularFiles);
+      const source = result.source;
+
+      expectEmit(source, SomeDirectiveDefinition, 'Incorrect SomeDirective.ngDirectiveDef');
+      expectEmit(source, OtherDirectiveDefinition, 'Incorrect OtherDirective.ngDirectiveDef');
+    });
+
+    it('should support host bindings', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Directive, HostBinding, NgModule} from '@angular/core';
+
+            @Directive({selector: '[hostBindingDir]'})
+            export class HostBindingDir {
+              @HostBinding('id') dirId = 'some id';
+            }
+
+            @NgModule({declarations: [HostBindingDir]})
+            export class MyModule {}
+          `
+        }
+      };
+
+      const HostBindingDirDeclaration = `
+        HostBindingDir.ngDirectiveDef = $r3$.ɵdefineDirective({
+          type: HostBindingDir,
+          selectors: [["", "hostBindingDir", ""]],
+          factory: function HostBindingDir_Factory(t) { return new (t || HostBindingDir)(); },
+          hostBindings: function HostBindingDir_HostBindings(dirIndex, elIndex) {
+            $r3$.ɵp(elIndex, "id", $r3$.ɵb($r3$.ɵd(dirIndex).dirId));
+          },
+          features: [$r3$.ɵPublicFeature]
+        });
+      `;
+
+      const result = compile(files, angularFiles);
+      const source = result.source;
+
+      expectEmit(source, HostBindingDirDeclaration, 'Invalid host binding code');
+    });
+
+    it('should support structural directives', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
+
+            @Directive({selector: '[if]'})
+            export class IfDirective {
+              constructor(template: TemplateRef<any>) { }
+            }
+
+            @Component({
+              selector: 'my-component',
+              template: '<ul #foo><li *if>{{salutation}} {{foo}}</li></ul>'
+            })
+            export class MyComponent {
+              salutation = 'Hello';
+            }
+
+            @NgModule({declarations: [IfDirective, MyComponent]})
+            export class MyModule {}
+            `
+        }
+      };
+
+      const IfDirectiveDefinition = `
+        IfDirective.ngDirectiveDef = $r3$.ɵdefineDirective({
+          type: IfDirective,
+          selectors: [["", "if", ""]],
+          factory: function IfDirective_Factory(t) { return new (t || IfDirective)($r3$.ɵinjectTemplateRef()); },
+          features: [$r3$.ɵPublicFeature]
+        });`;
+      const MyComponentDefinition = `
+        const $c1$ = ["foo", ""];
+        const $c2$ = ["if", ""];
+        function MyComponent_li_Template_2(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵE(0, "li");
+            $r3$.ɵT(1);
+            $r3$.ɵe();
+          }
+          if (rf & 2) {
+            const $myComp$ = $r3$.ɵx();
+            const $foo$ = $r3$.ɵr(1);
+            $r3$.ɵt(1, $r3$.ɵi2("", $myComp$.salutation, " ", $foo$, ""));
+          }
+        }
+        …
+        MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors: [["my-component"]],
+          factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
+          features: [$r3$.ɵPublicFeature],
+          template: function MyComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵE(0, "ul", null, $c1$);
+              $r3$.ɵC(2, MyComponent_li_Template_2, null, $c2$);
+              $r3$.ɵe();
+            }
+          },
+          directives:[IfDirective]
+        });`;
+
+      const result = compile(files, angularFiles);
+      const source = result.source;
+
+      expectEmit(source, IfDirectiveDefinition, 'Incorrect IfDirective.ngDirectiveDef');
+      expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef');
+    });
+
+    describe('value composition', () => {
+
+      it('should support array literals', () => {
+        const files = {
+          app: {
+            'spec.ts': `
+              import {Component, Input, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-comp',
+                template: \`
+                  <p>{{ names[0] }}</p>
+                  <p>{{ names[1] }}</p>
+                \`
+              })
+              export class MyComp {
+                @Input() names: string[];
+              }
+
+              @Component({
+                selector: 'my-app',
+                template: \`
+                <my-comp [names]="['Nancy', customName]"></my-comp>
+              \`
+              })
+              export class MyApp {
+                customName = 'Bess';
+              }
+
+              @NgModule({declarations: [MyComp, MyApp]})
+              export class MyModule { }
+            `
+          }
+        };
+
+        const MyAppDeclaration = `
+          const $e0_ff$ = function ($v$) { return ["Nancy", $v$]; };
+          …
+          MyApp.ngComponentDef = $r3$.ɵdefineComponent({
+            type: MyApp,
+            selectors: [["my-app"]],
+            factory: function MyApp_Factory(t) { return new (t || MyApp)(); },
+            features: [$r3$.ɵPublicFeature],
+            template: function MyApp_Template(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵEe(0, "my-comp");
+                $r3$.ɵrS(2);
+              }
+              if (rf & 2) {
+                $r3$.ɵp(0, "names", $r3$.ɵb($r3$.ɵf1(2, $e0_ff$, ctx.customName)));
+              }
+            },
+           directives: [MyComp]
+          });
+        `;
+
+        const result = compile(files, angularFiles);
+        const source = result.source;
+
+        expectEmit(source, MyAppDeclaration, 'Invalid array emit');
+      });
+
+      it('should support 9+ bindings in array literals', () => {
+        const files = {
+          app: {
+            'spec.ts': `
+              import {Component, Input, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-comp',
+                template: \`
+                  {{ names[0] }}
+                  {{ names[1] }}
+                  {{ names[3] }}
+                  {{ names[4] }}
+                  {{ names[5] }}
+                  {{ names[6] }}
+                  {{ names[7] }}
+                  {{ names[8] }}
+                  {{ names[9] }}
+                  {{ names[10] }}
+                  {{ names[11] }}
+                \`
+              })
+              export class MyComp {
+                @Input() names: string[];
+              }
+
+              @Component({
+                selector: 'my-app',
+                template: \`
+                <my-comp [names]="['start-', n0, n1, n2, n3, n4, '-middle-', n5, n6, n7, n8, '-end']">
+                </my-comp>
+              \`
+              })
+              export class MyApp {
+                n0 = 'a';
+                n1 = 'b';
+                n2 = 'c';
+                n3 = 'd';
+                n4 = 'e';
+                n5 = 'f';
+                n6 = 'g';
+                n7 = 'h';
+                n8 = 'i';
+              }
+
+              @NgModule({declarations: [MyComp, MyApp]})
+              export class MyModule {}
+              `
+          }
+        };
+
+        const MyAppDefinition = `
+          const $e0_ff$ = function ($v0$, $v1$, $v2$, $v3$, $v4$, $v5$, $v6$, $v7$, $v8$) {
+            return ["start-", $v0$, $v1$, $v2$, $v3$, $v4$, "-middle-", $v5$, $v6$, $v7$, $v8$, "-end"];
+          }
+          …
+          MyApp.ngComponentDef = $r3$.ɵdefineComponent({
+            type: MyApp,
+            selectors: [["my-app"]],
+            factory: function MyApp_Factory(t) { return new (t || MyApp)(); },
+            features: [$r3$.ɵPublicFeature],
+            template: function MyApp_Template(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵEe(0, "my-comp");
+                $r3$.ɵrS(10);
+              }
+              if (rf & 2) {
+                $r3$.ɵp(
+                    0, "names",
+                    $r3$.ɵb($r3$.ɵfV(10, $e0_ff$, [ctx.n0, ctx.n1, ctx.n2, ctx.n3, ctx.n4, ctx.n5, ctx.n6, ctx.n7, ctx.n8])));
+              }
+            },
+            directives: [MyComp]
+          });
+        `;
+
+        const result = compile(files, angularFiles);
+        const source = result.source;
+
+        expectEmit(source, MyAppDefinition, 'Invalid array binding');
+      });
+
+      it('should support object literals', () => {
+        const files = {
+          app: {
+            'spec.ts': `
+                import {Component, Input, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: 'object-comp',
+                  template: \`
+                    <p> {{ config['duration'] }} </p>
+                    <p> {{ config.animation }} </p>
+                  \`
+                })
+                export class ObjectComp {
+                  @Input() config: {[key: string]: any};
+                }
+
+                @Component({
+                  selector: 'my-app',
+                  template: \`
+                  <object-comp [config]="{'duration': 500, animation: name}"></object-comp>
+                \`
+                })
+                export class MyApp {
+                  name = 'slide';
+                }
+
+                @NgModule({declarations: [ObjectComp, MyApp]})
+                export class MyModule {}
+              `
+          }
+        };
+
+        const MyAppDefinition = `
+          const $e0_ff$ = function ($v$) { return {"duration": 500, animation: $v$}; };
+          …
+          MyApp.ngComponentDef = $r3$.ɵdefineComponent({
+            type: MyApp,
+            selectors: [["my-app"]],
+            factory: function MyApp_Factory(t) { return new (t || MyApp)(); },
+            features: [$r3$.ɵPublicFeature],
+            template: function MyApp_Template(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵEe(0, "object-comp");
+                $r3$.ɵrS(2);
+              }
+              if (rf & 2) {
+                $r3$.ɵp(0, "config", $r3$.ɵb($r3$.ɵf1(2, $e0_ff$, ctx.name)));
+              }
+            },
+            directives: [ObjectComp]
+          });
+        `;
+
+        const result = compile(files, angularFiles);
+        const source = result.source;
+
+        expectEmit(source, MyAppDefinition, 'Invalid object literal binding');
+      });
+
+      it('should support expressions nested deeply in object/array literals', () => {
+        const files = {
+          app: {
+            'spec.ts': `
+              import {Component, Input, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'nested-comp',
+                template: \`
+                  <p> {{ config.animation }} </p>
+                  <p> {{config.actions[0].opacity }} </p>
+                  <p> {{config.actions[1].duration }} </p>
+                \`
+              })
+              export class NestedComp {
+                @Input() config: {[key: string]: any};
+              }
+
+              @Component({
+                selector: 'my-app',
+                template: \`
+                <nested-comp [config]="{animation: name, actions: [{ opacity: 0, duration: 0}, {opacity: 1, duration: duration }]}">
+                </nested-comp>
+              \`
+              })
+              export class MyApp {
+                name = 'slide';
+                duration = 100;
+              }
+
+              @NgModule({declarations: [NestedComp, MyApp]})
+              export class MyModule {}
+              `
+          }
+        };
+
+        const MyAppDefinition = `
+          const $c0$ = {opacity: 0, duration: 0};
+          const $e0_ff$ = function ($v$) { return {opacity: 1, duration: $v$}; };
+          const $e0_ff_1$ = function ($v$) { return [$c0$, $v$]; };
+          const $e0_ff_2$ = function ($v1$, $v2$) { return {animation: $v1$, actions: $v2$}; };
+          …
+          MyApp.ngComponentDef = $r3$.ɵdefineComponent({
+            type: MyApp,
+            selectors: [["my-app"]],
+            factory: function MyApp_Factory(t) { return new (t || MyApp)(); },
+            features: [$r3$.ɵPublicFeature],
+            template: function MyApp_Template(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵEe(0, "nested-comp");
+                $r3$.ɵrS(7);
+              }
+              if (rf & 2) {
+                $r3$.ɵp(
+                    0, "config",
+                    $r3$.ɵb($r3$.ɵf2(7, $e0_ff_2$, ctx.name, $r3$.ɵf1(4, $e0_ff_1$, $r3$.ɵf1(2, $e0_ff$, ctx.duration)))));
+              }
+            },
+            directives: [NestedComp]
+          });
+        `;
+
+
+        const result = compile(files, angularFiles);
+        const source = result.source;
+
+        expectEmit(source, MyAppDefinition, 'Invalid array/object literal binding');
+      });
+    });
+
+    it('should support content projection', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
+
+            @Component({selector: 'simple', template: '<div><ng-content></ng-content></div>'})
+            export class SimpleComponent {}
+
+            @Component({
+              selector: 'complex',
+              template: \`
+                <div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
+                <div id="second"><ng-content select="span[title=toSecond]"></ng-content></div>\`
+              })
+            export class ComplexComponent { }
+
+            @NgModule({declarations: [SimpleComponent, ComplexComponent]})
+            export class MyModule {}
+
+            @Component({
+              selector: 'my-app',
+              template: '<simple>content</simple> <complex></complex>'
+            })
+            export class MyApp {}
+          `
+        }
+      };
+
+      const SimpleComponentDefinition = `
+        SimpleComponent.ngComponentDef = $r3$.ɵdefineComponent({
+          type: SimpleComponent,
+          selectors: [["simple"]],
+          factory: function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); },
+          features: [$r3$.ɵPublicFeature],
+          template: function SimpleComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵpD();
+              $r3$.ɵE(0, "div");
+              $r3$.ɵP(1);
+              $r3$.ɵe();
+            }
+          }
+        });`;
+
+      const ComplexComponentDefinition = `
+        const $c1$ = [[["span", "title", "tofirst"]], [["span", "title", "tosecond"]]];
+        const $c2$ = ["span[title=toFirst]", "span[title=toSecond]"];
+        const $c3$ = ["id","first"];
+        const $c4$ = ["id","second"];
+        …
+        ComplexComponent.ngComponentDef = $r3$.ɵdefineComponent({
+          type: ComplexComponent,
+          selectors: [["complex"]],
+          factory: function ComplexComponent_Factory(t) { return new (t || ComplexComponent)(); },
+          features: [$r3$.ɵPublicFeature],
+          template: function ComplexComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵpD($c1$, $c2$);
+              $r3$.ɵE(0, "div", $c3$);
+              $r3$.ɵP(1, 1);
+              $r3$.ɵe();
+              $r3$.ɵE(2, "div", $c4$);
+              $r3$.ɵP(3, 2);
+              $r3$.ɵe();
+            }
+          }
+        });
+      `;
+
+      const result = compile(files, angularFiles);
+      const source = result.source;
+
+      expectEmit(result.source, SimpleComponentDefinition, 'Incorrect SimpleComponent definition');
+      expectEmit(
+          result.source, ComplexComponentDefinition, 'Incorrect ComplexComponent definition');
+    });
+
+    describe('queries', () => {
+      const directive = {
+        'some.directive.ts': `
+          import {Directive} from '@angular/core';
+
+          @Directive({
+            selector: '[someDir]',
+          })
+          export class SomeDirective { }
+        `
+      };
+
+      it('should support view queries', () => {
+        const files = {
+          app: {
+            ...directive,
+            'view_query.component.ts': `
+            import {Component, NgModule, ViewChild} from '@angular/core';
+            import {SomeDirective} from './some.directive';
+
+            @Component({
+              selector: 'view-query-component',
+              template: \`
+              <div someDir></div>
+              \`
+            })
+            export class ViewQueryComponent {
+              @ViewChild(SomeDirective) someDir: SomeDirective;
+            }
+
+            @NgModule({declarations: [SomeDirective, ViewQueryComponent]})
+            export class MyModule {}
+          `
+          }
+        };
+
+        const ViewQueryComponentDefinition = `
+          const $e0_attrs$ = ["someDir",""];
+          …
+          ViewQueryComponent.ngComponentDef = $r3$.ɵdefineComponent({
+            type: ViewQueryComponent,
+            selectors: [["view-query-component"]],
+            factory: function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); },
+            features: [$r3$.ɵPublicFeature],
+            viewQuery: function ViewQueryComponent_Query(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵQ(0, SomeDirective, true);
+              }
+              if (rf & 2) {
+                var $tmp$;
+                ($r3$.ɵqR(($tmp$ = $r3$.ɵld(0))) && (ctx.someDir = $tmp$.first));
+              }
+            },
+            template: function ViewQueryComponent_Template(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵEe(1, "div", $e0_attrs$);
+              }
+            },
+            directives: function () { return [SomeDirective]; }
+          });`;
+
+        const result = compile(files, angularFiles);
+        const source = result.source;
+
+        expectEmit(source, ViewQueryComponentDefinition, 'Invalid ViewQuery declaration');
+      });
+
+      it('should support content queries', () => {
+        const files = {
+          app: {
+            ...directive,
+            'spec.ts': `
+            import {Component, ContentChild, ContentChildren, NgModule, QueryList} from '@angular/core';
+            import {SomeDirective} from './some.directive';
+
+            @Component({
+              selector: 'content-query-component',
+              template: \`
+                <div><ng-content></ng-content></div>
+              \`
+            })
+            export class ContentQueryComponent {
+              @ContentChild(SomeDirective) someDir: SomeDirective;
+              @ContentChildren(SomeDirective) someDirList !: QueryList<SomeDirective>;
+            }
+
+            @Component({
+              selector: 'my-app',
+              template: \`
+                <content-query-component>
+                  <div someDir></div>
+                </content-query-component>
+              \`
+            })
+            export class MyApp { }
+
+            @NgModule({declarations: [SomeDirective, ContentQueryComponent, MyApp]})
+            export class MyModule { }
+            `
+          }
+        };
+
+        const ContentQueryComponentDefinition = `
+          ContentQueryComponent.ngComponentDef = $r3$.ɵdefineComponent({
+            type: ContentQueryComponent,
+            selectors: [["content-query-component"]],
+            factory: function ContentQueryComponent_Factory(t) {
+              return new (t || ContentQueryComponent)();
+            },
+            contentQueries: function ContentQueryComponent_ContentQueries() {
+              $r3$.ɵQr($r3$.ɵQ(null, SomeDirective, true));
+              $r3$.ɵQr($r3$.ɵQ(null, SomeDirective, false));
+            },
+            contentQueriesRefresh: function ContentQueryComponent_ContentQueriesRefresh(dirIndex, queryStartIndex) {
+              const instance = $r3$.ɵd(dirIndex);
+              var $tmp$;
+              ($r3$.ɵqR(($tmp$ = $r3$.ɵql(queryStartIndex))) && ($instance$.someDir = $tmp$.first));
+              ($r3$.ɵqR(($tmp$ = $r3$.ɵql((queryStartIndex + 1)))) && ($instance$.someDirList = $tmp$));
+            },
+            features: [$r3$.ɵPublicFeature],
+            template: function ContentQueryComponent_Template(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵpD();
+                $r3$.ɵE(0, "div");
+                $r3$.ɵP(1);
+                $r3$.ɵe();
+              }
+            }
+          });`;
+
+        const result = compile(files, angularFiles);
+
+        const source = result.source;
+        expectEmit(source, ContentQueryComponentDefinition, 'Invalid ContentQuery declaration');
+      });
+    });
+
+    describe('pipes', () => {
+
+      const files = {
+        app: {
+          'spec.ts': `
+              import {Component, NgModule, Pipe, PipeTransform, OnDestroy} from '@angular/core';
+
+              @Pipe({
+                name: 'myPipe',
+                pure: false
+              })
+              export class MyPipe implements PipeTransform,
+                  OnDestroy {
+                transform(value: any, ...args: any[]) { return value; }
+                ngOnDestroy(): void {  }
+              }
+
+              @Pipe({
+                name: 'myPurePipe',
+                pure: true,
+              })
+              export class MyPurePipe implements PipeTransform {
+                transform(value: any, ...args: any[]) { return value; }
+              }
+
+              @Component({
+                selector: 'my-app',
+                template: '{{name | myPipe:size | myPurePipe:size }}<p>{{ name | myPipe:1:2:3:4:5 }}</p>'
+              })
+              export class MyApp {
+                name = 'World';
+                size = 0;
+              }
+
+              @NgModule({declarations:[MyPipe, MyPurePipe, MyApp]})
+              export class MyModule {}
+          `
+        }
+      };
+
+      it('should render pipes', () => {
+        const MyPipeDefinition = `
+            MyPipe.ngPipeDef = $r3$.ɵdefinePipe({
+              name: "myPipe",
+              type: MyPipe,
+              factory: function MyPipe_Factory(t) { return new (t || MyPipe)(); },
+              pure: false
+            });
+        `;
+
+        const MyPurePipeDefinition = `
+            MyPurePipe.ngPipeDef = $r3$.ɵdefinePipe({
+              name: "myPurePipe",
+              type: MyPurePipe,
+              factory: function MyPurePipe_Factory(t) { return new (t || MyPurePipe)(); },
+              pure: true
+            });`;
+
+        const MyAppDefinition = `
+            const $c0$ = function ($a0$) {
+              return [$a0$, 1, 2, 3, 4, 5];
+            };
+            // ...
+            MyApp.ngComponentDef = $r3$.ɵdefineComponent({
+              type: MyApp,
+              selectors: [["my-app"]],
+              factory: function MyApp_Factory(t) { return new (t || MyApp)(); },
+              features: [$r3$.ɵPublicFeature],
+              template: function MyApp_Template(rf, ctx) {
+                if (rf & 1) {
+                  $r3$.ɵT(0);
+                  $r3$.ɵPp(1, "myPurePipe");
+                  $r3$.ɵPp(2, "myPipe");
+                  $r3$.ɵE(3, "p");
+                  $r3$.ɵT(4);
+                  $r3$.ɵPp(5, "myPipe");
+                  $r3$.ɵe();
+                  $r3$.ɵrS(15);
+                }
+                if (rf & 2) {
+                  $r3$.ɵt(0, $r3$.ɵi1("", $r3$.ɵpb2(1, 3, $r3$.ɵpb2(2, 6, ctx.name, ctx.size), ctx.size), ""));
+                  $r3$.ɵt(4, $r3$.ɵi1("", $r3$.ɵpbV(5, 13 , $r3$.ɵf1(15, $c0$, ctx.name)), ""));
+                }
+              },
+              pipes: [MyPurePipe, MyPipe]
+            });`;
+
+        const result = compile(files, angularFiles);
+        const source = result.source;
+
+        expectEmit(source, MyPipeDefinition, 'Invalid pipe definition');
+        expectEmit(source, MyPurePipeDefinition, 'Invalid pure pipe definition');
+        expectEmit(source, MyAppDefinition, 'Invalid MyApp definition');
+      });
+    });
+
+    it('local reference', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, NgModule} from '@angular/core';
+
+            @Component({selector: 'my-component', template: '<input #user>Hello {{user.value}}!'})
+            export class MyComponent {}
+
+            @NgModule({declarations: [MyComponent]})
+            export class MyModule {}
+          `
+        }
+      };
+
+      const MyComponentDefinition = `
+        const $c1$ = ["user", ""];
+        …
+        MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors: [["my-component"]],
+          factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
+          features: [$r3$.ɵPublicFeature],
+          template: function MyComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, "input", null, $c1$);
+              $r3$.ɵT(2);
+            }
+            if (rf & 2) {
+              const $user$ = $r3$.ɵr(1);
+              $r3$.ɵt(2, $r3$.ɵi1("Hello ", $user$.value, "!"));
+            }
+          }
+        });
+      `;
+
+      const result = compile(files, angularFiles);
+      const source = result.source;
+
+      expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef');
+    });
+
+    it('local references in nested views', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
+
+            @Directive({selector: '[if]'})
+            export class IfDirective {
+              constructor(template: TemplateRef<any>) { }
+            }
+
+            @Component({
+              selector: 'my-component',
+              template: \`
+                <div #foo></div>
+                {{foo}}
+                <div *if>
+                  {{foo}}-{{bar}}
+                  <span *if>{{foo}}-{{bar}}-{{baz}}</span>
+                  <span #bar></span>
+                </div>
+                <div #baz></div>
+                \`
+            })
+            export class MyComponent {}
+
+            @NgModule({declarations: [IfDirective, MyComponent]})
+            export class MyModule {}
+            `
+        }
+      };
+
+      const MyComponentDefinition = `
+        const $c1$ = ["foo", ""];
+        const $c2$ = ["if", ""];
+        const $c3$ = ["baz", ""];
+        const $c4$ = ["bar", ""];
+        function MyComponent_div_span_Template_2(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵE(0, "span");
+            $r3$.ɵT(1);
+            $r3$.ɵe();
+          }
+          if (rf & 2) {
+            $r3$.ɵx();
+            const $bar$ = $r3$.ɵr(4);
+            $r3$.ɵx();
+            const $foo$ = $r3$.ɵr(1);
+            const $baz$ = $r3$.ɵr(5);
+            $r3$.ɵt(1, $r3$.ɵi3("", $foo$, "-", $bar$, "-", $baz$, ""));
+          }
+        }
+        function MyComponent_div_Template_3(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵE(0, "div");
+            $r3$.ɵT(1);
+            $r3$.ɵC(2, MyComponent_div_span_Template_2, null, $c2$);
+            $r3$.ɵEe(3, "span", null, $c4$);
+            $r3$.ɵe();
+          }
+          if (rf & 2) {
+            const $bar$ = $r3$.ɵr(4);
+            $r3$.ɵx();
+            const $foo$ = $r3$.ɵr(1);
+            $r3$.ɵt(1, $r3$.ɵi2(" ", $foo$, "-", $bar$, " "));
+          }
+        }
+        …
+        MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors: [["my-component"]],
+          factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
+          features: [$r3$.ɵPublicFeature],
+          template: function MyComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, "div", null, $c1$);
+              $r3$.ɵT(2);
+              $r3$.ɵC(3, MyComponent_div_Template_3, null, $c2$);
+              $r3$.ɵEe(4, "div", null, $c3$);
+            }
+            if (rf & 2) {
+              const $foo$ = $r3$.ɵr(1);
+              $r3$.ɵt(2, $r3$.ɵi1(" ", $foo$, " "));
+            }
+          },
+          directives:[IfDirective]
+        });`;
+
+      const result = compile(files, angularFiles);
+      const source = result.source;
+
+      expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef');
+
+    });
+
+    it('should support local refs mixed with context assignments', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`
+                  <div *ngFor="let item of items">
+                     <div #foo></div>
+                      <span *ngIf="showing">
+                        {{ foo }} - {{ item }}
+                      </span>
+                  </div>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+        }
+      };
+
+      const template = `
+      const $c0$ = ["ngFor","","ngForOf",""];
+      const $c1$ = ["foo", ""];
+      const $c2$ = ["ngIf",""];
+
+      function MyComponent_div_span_Template_3(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵE(0, "span");
+          $i0$.ɵT(1);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          const $item$ = $i0$.ɵx().$implicit;
+          const $foo$ = $i0$.ɵr(2);
+          $i0$.ɵt(1, $i0$.ɵi2(" ", $foo$, " - ", $item$, " "));
+        }
+      }
+
+      function MyComponent_div_Template_0(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵE(0, "div");
+          $i0$.ɵEe(1, "div", null, $c1$);
+          $i0$.ɵC(3, MyComponent_div_span_Template_3, null, $c2$);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          const $app$ = $i0$.ɵx();
+          $i0$.ɵp(3, "ngIf", $i0$.ɵb($app$.showing));
+        }
+      }
+
+      // ...
+      template:function MyComponent_Template(rf, ctx){
+        if (rf & 1) {
+          $i0$.ɵC(0, MyComponent_div_Template_0, null, $c0$);
+        }
+        if (rf & 2) {
+          $i0$.ɵp(0, "ngForOf", $i0$.ɵb(ctx.items));
+        }
+      }`;
+
+      const result = compile(files, angularFiles);
+
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    describe('lifecycle hooks', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, Input, NgModule} from '@angular/core';
+
+            let events: string[] = [];
+
+            @Component({selector: 'lifecycle-comp', template: ''})
+            export class LifecycleComp {
+              @Input('name') nameMin: string;
+
+              ngOnChanges() { events.push('changes' + this.nameMin); }
+
+              ngOnInit() { events.push('init' + this.nameMin); }
+              ngDoCheck() { events.push('check' + this.nameMin); }
+
+              ngAfterContentInit() { events.push('content init' + this.nameMin); }
+              ngAfterContentChecked() { events.push('content check' + this.nameMin); }
+
+              ngAfterViewInit() { events.push('view init' + this.nameMin); }
+              ngAfterViewChecked() { events.push('view check' + this.nameMin); }
+
+              ngOnDestroy() { events.push(this.nameMin); }
+            }
+
+            @Component({
+              selector: 'simple-layout',
+              template: \`
+                <lifecycle-comp [name]="name1"></lifecycle-comp>
+                <lifecycle-comp [name]="name2"></lifecycle-comp>
+              \`
+            })
+            export class SimpleLayout {
+              name1 = '1';
+              name2 = '2';
+            }
+
+            @NgModule({declarations: [LifecycleComp, SimpleLayout]})
+            export class LifecycleModule {}
+          `
+        }
+      };
+
+      it('should gen hooks with a few simple components', () => {
+        const LifecycleCompDefinition = `
+          LifecycleComp.ngComponentDef = $r3$.ɵdefineComponent({
+            type: LifecycleComp,
+            selectors: [["lifecycle-comp"]],
+            factory: function LifecycleComp_Factory(t) { return new (t || LifecycleComp)(); },
+            inputs: {nameMin: "name"},
+            features: [$r3$.ɵPublicFeature, $r3$.ɵNgOnChangesFeature],
+            template: function LifecycleComp_Template(rf, ctx) {}
+          });`;
+
+        const SimpleLayoutDefinition = `
+          SimpleLayout.ngComponentDef = $r3$.ɵdefineComponent({
+            type: SimpleLayout,
+            selectors: [["simple-layout"]],
+            factory: function SimpleLayout_Factory(t) { return new (t || SimpleLayout)(); },
+            features: [$r3$.ɵPublicFeature],
+            template: function SimpleLayout_Template(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵEe(0, "lifecycle-comp");
+                $r3$.ɵEe(1, "lifecycle-comp");
+              }
+              if (rf & 2) {
+                $r3$.ɵp(0, "name", $r3$.ɵb(ctx.name1));
+                $r3$.ɵp(1, "name", $r3$.ɵb(ctx.name2));
+              }
+            },
+            directives: [LifecycleComp]
+          });`;
+
+        const result = compile(files, angularFiles);
+        const source = result.source;
+
+        expectEmit(source, LifecycleCompDefinition, 'Invalid LifecycleComp definition');
+        expectEmit(source, SimpleLayoutDefinition, 'Invalid SimpleLayout definition');
+      });
+    });
+
+    describe('template variables', () => {
+      const shared = {
+        shared: {
+          'for_of.ts': `
+            import {Directive, Input, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core';
+
+            export interface ForOfContext {
+              $implicit: any;
+              index: number;
+              even: boolean;
+              odd: boolean;
+            }
+
+            @Directive({selector: '[forOf]'})
+            export class ForOfDirective {
+              private previous: any[];
+
+              constructor(private view: ViewContainerRef, private template: TemplateRef<any>) {}
+
+              @Input() forOf: any[];
+
+              ngOnChanges(simpleChanges: SimpleChanges) {
+                if ('forOf' in simpleChanges) {
+                  this.update();
+                }
+              }
+
+              ngDoCheck(): void {
+                const previous = this.previous;
+                const current = this.forOf;
+                if (!previous || previous.length != current.length ||
+                    previous.some((value: any, index: number) => current[index] !== previous[index])) {
+                  this.update();
+                }
+              }
+
+              private update() {
+                // TODO(chuckj): Not implemented yet
+                // this.view.clear();
+                if (this.forOf) {
+                  const current = this.forOf;
+                  for (let i = 0; i < current.length; i++) {
+                    const context = {$implicit: current[i], index: i, even: i % 2 == 0, odd: i % 2 == 1};
+                    // TODO(chuckj): Not implemented yet
+                    // this.view.createEmbeddedView(this.template, context);
+                  }
+                  this.previous = [...this.forOf];
+                }
+              }
+            }
+          `
+        }
+      };
+
+      it('should support embedded views in the SVG namespace', () => {
+        const files = {
+          app: {
+            ...shared,
+            'spec.ts': `
+                  import {Component, NgModule} from '@angular/core';
+                  import {ForOfDirective} from './shared/for_of';
+
+                  @Component({
+                    selector: 'my-component',
+                    template: \`<svg><g *for="let item of items"><circle></circle></g></svg>\`
+                  })
+                  export class MyComponent {
+                    items = [{ data: 42 }, { data: 42 }];
+                  }
+
+                  @NgModule({
+                    declarations: [MyComponent, ForOfDirective]
+                  })
+                  export class MyModule {}
+                `
+          }
+        };
+
+        // TODO(benlesh): Enforce this when the directives are specified
+        const ForDirectiveDefinition = `
+              ForOfDirective.ngDirectiveDef = $r3$.ɵdefineDirective({
+                type: ForOfDirective,
+                selectors: [["", "forOf", ""]],
+                factory: function ForOfDirective_Factory(t) {
+                  return new (t || ForOfDirective)($r3$.ɵinjectViewContainerRef(), $r3$.ɵinjectTemplateRef());
+                },
+                features: [$r3$.ɵPublicFeature, $r3$.ɵNgOnChangesFeature],
+                inputs: {forOf: "forOf"}
+              });
+            `;
+
+        const MyComponentDefinition = `
+              const $_c0$ = ["for","","forOf",""];
+              function MyComponent__svg_g_Template_1(rf, ctx) {
+                if (rf & 1) {
+                  $r3$.ɵNS();
+                  $r3$.ɵE(0,"g");
+                  $r3$.ɵEe(1,"circle");
+                  $r3$.ɵe();
+                }
+              }
+              …
+              MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+                type: MyComponent,
+                selectors: [["my-component"]],
+                factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
+                features: [$r3$.ɵPublicFeature],
+                template: function MyComponent_Template(rf, ctx){
+                  if (rf & 1) {
+                    $r3$.ɵNS();
+                    $r3$.ɵE(0,"svg");
+                    $r3$.ɵC(1,MyComponent__svg_g_Template_1,null,$_c0$);
+                    $r3$.ɵe();
+                  }
+                  if (rf & 2) { $r3$.ɵp(1,"forOf",$r3$.ɵb(ctx.items)); }
+                },
+                directives: function() { return [ForOfDirective]; }
+              });
+            `;
+
+        const result = compile(files, angularFiles);
+        const source = result.source;
+
+        // TODO(benlesh): Enforce this when the directives are specified
+        // expectEmit(source, ForDirectiveDefinition, 'Invalid directive definition');
+        expectEmit(source, MyComponentDefinition, 'Invalid component definition');
+      });
+
+      it('should support a let variable and reference', () => {
+        const files = {
+          app: {
+            ...shared,
+            'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+              import {ForOfDirective} from './shared/for_of';
+
+              @Component({
+                selector: 'my-component',
+                template: \`<ul><li *for="let item of items">{{item.name}}</li></ul>\`
+              })
+              export class MyComponent {
+                items = [{name: 'one'}, {name: 'two'}];
+              }
+
+              @NgModule({
+                declarations: [MyComponent, ForOfDirective]
+              })
+              export class MyModule {}
+            `
+          }
+        };
+
+        // TODO(chuckj): Enforce this when the directives are specified
+        const ForDirectiveDefinition = `
+          ForOfDirective.ngDirectiveDef = $r3$.ɵdefineDirective({
+            type: ForOfDirective,
+            selectors: [["", "forOf", ""]],
+            factory: function ForOfDirective_Factory(t) {
+              return new (t || ForOfDirective)($r3$.ɵinjectViewContainerRef(), $r3$.ɵinjectTemplateRef());
+            },
+            features: [$r3$.ɵPublicFeature, $r3$.ɵNgOnChangesFeature],
+            inputs: {forOf: "forOf"}
+          });
+        `;
+
+        const MyComponentDefinition = `
+          const $_c0$ = ["for","","forOf",""];
+          function MyComponent_li_Template_1(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵE(0, "li");
+              $r3$.ɵT(1);
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              const $item$ = ctx.$implicit;
+              $r3$.ɵt(1, $r3$.ɵi1("", $item$.name, ""));
+            }
+          }
+          …
+          MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+            type: MyComponent,
+            selectors: [["my-component"]],
+            factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
+            features: [$r3$.ɵPublicFeature],
+            template: function MyComponent_Template(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵE(0, "ul");
+                $r3$.ɵC(1, MyComponent_li_Template_1, null, $_c0$);
+                $r3$.ɵe();
+              }
+              if (rf & 2) {
+                $r3$.ɵp(1, "forOf", $r3$.ɵb(ctx.items));
+              }
+            },
+            directives: function() { return [ForOfDirective]; }
+          });
+        `;
+
+        const result = compile(files, angularFiles);
+        const source = result.source;
+
+        // TODO(chuckj): Enforce this when the directives are specified
+        // expectEmit(source, ForDirectiveDefinition, 'Invalid directive definition');
+        expectEmit(source, MyComponentDefinition, 'Invalid component definition');
+      });
+
+      it('should support accessing parent template variables', () => {
+        const files = {
+          app: {
+            ...shared,
+            'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+              import {ForOfDirective} from './shared/for_of';
+
+              @Component({
+                selector: 'my-component',
+                template: \`
+                <ul>
+                  <li *for="let item of items">
+                    <div>{{item.name}}</div>
+                    <ul>
+                      <li *for="let info of item.infos">
+                        {{item.name}}: {{info.description}}
+                      </li>
+                    </ul>
+                  </li>
+                </ul>\`
+              })
+              export class MyComponent {
+                items = [
+                  {name: 'one', infos: [{description: '11'}, {description: '12'}]},
+                  {name: 'two', infos: [{description: '21'}, {description: '22'}]}
+                ];
+              }
+
+              @NgModule({
+                declarations: [MyComponent, ForOfDirective]
+              })
+              export class MyModule {}
+            `
+          }
+        };
+
+        const MyComponentDefinition = `
+          const $c1$ = ["for", "", "forOf", ""];
+          function MyComponent_li_li_Template_4(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵE(0, "li");
+              $r3$.ɵT(1);
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              const $info$ = ctx.$implicit;
+              const $item$ = $r3$.ɵx().$implicit;
+              $r3$.ɵt(1, $r3$.ɵi2(" ", $item$.name, ": ", $info$.description, " "));
+            }
+          }
+
+          function MyComponent_li_Template_1(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵE(0, "li");
+              $r3$.ɵE(1, "div");
+              $r3$.ɵT(2);
+              $r3$.ɵe();
+              $r3$.ɵE(3, "ul");
+              $r3$.ɵC(4, MyComponent_li_li_Template_4, null, $c1$);
+              $r3$.ɵe();
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              const $item$ = ctx.$implicit;
+              $r3$.ɵt(2, $r3$.ɵi1("", IDENT.name, ""));
+              $r3$.ɵp(4, "forOf", $r3$.ɵb(IDENT.infos));
+            }
+          }
+
+          …
+          MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+            type: MyComponent,
+            selectors: [["my-component"]],
+            factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
+            features: [$r3$.ɵPublicFeature],
+            template: function MyComponent_Template(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵE(0, "ul");
+                $r3$.ɵC(1, MyComponent_li_Template_1, null, $c1$);
+                $r3$.ɵe();
+              }
+              if (rf & 2) {
+                $r3$.ɵp(1, "forOf", $r3$.ɵb(ctx.items));
+              }
+            },
+            directives: function () { return [ForOfDirective]; }
+          });`;
+
+        const result = compile(files, angularFiles);
+        const source = result.source;
+        expectEmit(source, MyComponentDefinition, 'Invalid component definition');
+      });
+    });
+  });
+
+  describe('inherited bare classes', () => {
+    it('should add ngBaseDef if one or more @Input is present', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, NgModule, Input} from '@angular/core';
+            export class BaseClass {
+              @Input()
+              input1 = 'test';
+
+              @Input('alias2')
+              input2 = 'whatever';
+            }
+
+            @Component({
+              selector: 'my-component',
+              template: \`<div>{{input1}} {{input2}}</div>\`
+            })
+            export class MyComponent extends BaseClass {
+            }
+
+            @NgModule({
+              declarations: [MyComponent]
+            })
+            export class MyModule {}
+          `
+        }
+      };
+      const expectedOutput = `
+      // ...
+      BaseClass.ngBaseDef = i0.ɵdefineBase({
+        inputs: {
+          input1: "input1",
+          input2: ["alias2", "input2"]
+        }
+      });
+      // ...
+      `;
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, expectedOutput, 'Invalid base definition');
+    });
+
+    it('should add ngBaseDef if one or more @Output is present', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, NgModule, Output, EventEmitter} from '@angular/core';
+            export class BaseClass {
+              @Output()
+              output1 = new EventEmitter<string>();
+
+              @Output()
+              output2 = new EventEmitter<string>();
+
+              clicked() {
+                this.output1.emit('test');
+                this.output2.emit('test');
+              }
+            }
+
+            @Component({
+              selector: 'my-component',
+              template: \`<button (click)="clicked()">Click Me</button>\`
+            })
+            export class MyComponent extends BaseClass {
+            }
+
+            @NgModule({
+              declarations: [MyComponent]
+            })
+            export class MyModule {}
+          `
+        }
+      };
+      const expectedOutput = `
+      // ...
+      BaseClass.ngBaseDef = i0.ɵdefineBase({
+        outputs: {
+          output1: "output1",
+          output2: "output2"
+        }
+      });
+      // ...
+      `;
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, expectedOutput, 'Invalid base definition');
+    });
+
+    it('should add ngBaseDef if a mixture of @Input and @Output props are present', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, NgModule, Input, Output, EventEmitter} from '@angular/core';
+            export class BaseClass {
+              @Output()
+              output1 = new EventEmitter<string>();
+
+              @Output()
+              output2 = new EventEmitter<string>();
+
+              @Input()
+              input1 = 'test';
+
+              @Input('whatever')
+              input2 = 'blah';
+
+              clicked() {
+                this.output1.emit('test');
+                this.output2.emit('test');
+              }
+            }
+
+            @Component({
+              selector: 'my-component',
+              template: \`<button (click)="clicked()">Click Me</button>\`
+            })
+            export class MyComponent extends BaseClass {
+            }
+
+            @NgModule({
+              declarations: [MyComponent]
+            })
+            export class MyModule {}
+          `
+        }
+      };
+      const expectedOutput = `
+      // ...
+      BaseClass.ngBaseDef = i0.ɵdefineBase({
+        inputs: {
+          input1: "input1",
+          input2: ["whatever", "input2"]
+        },
+        outputs: {
+          output1: "output1",
+          output2: "output2"
+        }
+      });
+      // ...
+      `;
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, expectedOutput, 'Invalid base definition');
+    });
+
+    it('should NOT add ngBaseDef if @Component is present', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, NgModule, Output, EventEmitter} from '@angular/core';
+            @Component({
+              selector: 'whatever',
+              template: '<button (click)="clicked()">Click {{input1}}</button>'
+            })
+            export class BaseClass {
+              @Output()
+              output1 = new EventEmitter<string>();
+
+              @Input()
+              input1 = 'whatever';
+
+              clicked() {
+                this.output1.emit('test');
+              }
+            }
+
+            @Component({
+              selector: 'my-component',
+              template: \`<div>What is this developer doing?</div>\`
+            })
+            export class MyComponent extends BaseClass {
+            }
+
+            @NgModule({
+              declarations: [MyComponent]
+            })
+            export class MyModule {}
+          `
+        }
+      };
+      const result = compile(files, angularFiles);
+      expect(result.source).not.toContain('ngBaseDef');
+    });
+
+    it('should NOT add ngBaseDef if @Directive is present', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, Directive, NgModule, Output, EventEmitter} from '@angular/core';
+            @Directive({
+              selector: 'whatever',
+            })
+            export class BaseClass {
+              @Output()
+              output1 = new EventEmitter<string>();
+
+              @Input()
+              input1 = 'whatever';
+
+              clicked() {
+                this.output1.emit('test');
+              }
+            }
+
+            @Component({
+              selector: 'my-component',
+              template: '<button (click)="clicked()">Click {{input1}}</button>'
+            })
+            export class MyComponent extends BaseClass {
+            }
+
+            @NgModule({
+              declarations: [MyComponent]
+            })
+            export class MyModule {}
+          `
+        }
+      };
+      const result = compile(files, angularFiles);
+      expect(result.source).not.toContain('ngBaseDef');
+    });
+  });
+});
diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts
new file mode 100644
index 000000000000..5dde3a2b3e93
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_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 {MockDirectory, setup} from '@angular/compiler/test/aot/test_util';
+import {compile, expectEmit} from './mock_compile';
+
+describe('compiler compliance: bindings', () => {
+  const angularFiles = setup({
+    compileAngular: false,
+    compileFakeCore: true,
+    compileAnimations: false,
+  });
+
+  describe('text bindings', () => {
+    it('should generate interpolation instruction', () => {
+      const files: MockDirectory = {
+        app: {
+          'example.ts': `
+          import {Component, NgModule} from '@angular/core';
+          @Component({
+            selector: 'my-component',
+            template: \`
+              <div>Hello {{ name }}</div>\`
+          })
+          export class MyComponent {
+            name = 'World';
+          }
+          @NgModule({declarations: [MyComponent]})
+          export class MyModule {}
+          `
+        }
+      };
+
+      const template = `
+      template:function MyComponent_Template(rf, $ctx$){
+        if (rf & 1) {
+          $i0$.ɵE(0, "div");
+          $i0$.ɵT(1);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          $i0$.ɵt(1, $i0$.ɵi1("Hello ", $ctx$.name, ""));
+        }
+      }`;
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect interpolated text binding');
+    });
+  });
+
+  describe('property bindings', () => {
+    it('should generate bind instruction', () => {
+      const files: MockDirectory = {
+        app: {
+          'example.ts': `
+          import {Component, NgModule} from '@angular/core';
+
+          @Component({
+            selector: 'my-app',
+            template: '<a [title]="title"></a>'
+          })
+          export class MyComponent {
+            title = 'Hello World';
+          }
+
+          @NgModule({declarations: [MyComponent]})
+          export class MyModule {}`
+        }
+      };
+
+      const template = `
+      template:function MyComponent_Template(rf, $ctx$){
+        if (rf & 1) {
+          $i0$.ɵEe(0, "a");
+        }
+        if (rf & 2) {
+          $i0$.ɵp(0, "title", $i0$.ɵb($ctx$.title));
+        }
+      }`;
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect property binding');
+    });
+
+    it('should generate interpolation instruction for {{...}} bindings', () => {
+      const files: MockDirectory = {
+        app: {
+          'example.ts': `
+          import {Component, NgModule} from '@angular/core';
+          @Component({
+            selector: 'my-component',
+            template: \`
+              <a title="Hello {{name}}"></a>\`
+          })
+          export class MyComponent {
+            name = 'World';
+          }
+          @NgModule({declarations: [MyComponent]})
+          export class MyModule {}
+          `
+        }
+      };
+
+      const template = `
+      template:function MyComponent_Template(rf, $ctx$){
+        if (rf & 1) {
+          $i0$.ɵEe(0, "a");
+        }
+        if (rf & 2) {
+          $i0$.ɵp(0, "title", $i0$.ɵi1("Hello ", $ctx$.name, ""));
+        }
+      }`;
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect interpolated property binding');
+    });
+  });
+
+});
diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_di_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_di_spec.ts
new file mode 100644
index 000000000000..3e9acc5783e2
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_di_spec.ts
@@ -0,0 +1,69 @@
+/**
+ * @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, setup} from '@angular/compiler/test/aot/test_util';
+import {compile, expectEmit} from './mock_compile';
+
+describe('compiler compliance: dependency injection', () => {
+  const angularFiles = setup({
+    compileAngular: false,
+    compileFakeCore: true,
+    compileAnimations: false,
+  });
+
+  it('should create factory methods', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, NgModule, Injectable, Attribute, Host, SkipSelf, Self, Optional} from '@angular/core';
+
+              @Injectable()
+              export class MyService {}
+
+              @Component({
+                selector: 'my-component',
+                template: \`\`
+              })
+              export class MyComponent {
+                constructor(
+                  @Attribute('name') name:string,
+                  s1: MyService, 
+                  @Host() s2: MyService,
+                  @Self() s4: MyService,
+                  @SkipSelf() s3: MyService,
+                  @Optional() s5: MyService,
+                  @Self() @Optional() s6: MyService,
+                ) {}
+              }
+
+              @NgModule({declarations: [MyComponent], providers: [MyService]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    const factory = `
+      factory: function MyComponent_Factory(t) {
+        return new (t || MyComponent)(
+          $r3$.ɵinjectAttribute('name'),
+          $r3$.ɵdirectiveInject(MyService), 
+          $r3$.ɵdirectiveInject(MyService, 1),
+          $r3$.ɵdirectiveInject(MyService, 2),
+          $r3$.ɵdirectiveInject(MyService, 4),
+          $r3$.ɵdirectiveInject(MyService, 8),
+          $r3$.ɵdirectiveInject(MyService, 10)
+        );
+      }`;
+
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, factory, 'Incorrect factory');
+  });
+
+});
diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts
new file mode 100644
index 000000000000..98884f56ead0
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts
@@ -0,0 +1,225 @@
+/**
+ * @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, setup} from '@angular/compiler/test/aot/test_util';
+import {compile, expectEmit} from './mock_compile';
+
+const TRANSLATION_NAME_REGEXP = /^MSG_[A-Z0-9]+/;
+
+describe('i18n support in the view compiler', () => {
+  const angularFiles = setup({
+    compileAngular: false,
+    compileFakeCore: true,
+    compileAnimations: false,
+  });
+
+  describe('single text nodes', () => {
+    it('should translate single text nodes with the i18n attribute', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, NgModule} from '@angular/core';
+
+            @Component({
+              selector: 'my-component',
+              template: \`
+                <div i18n>Hello world</div>
+                <div>&</div>
+                <div i18n>farewell</div>
+                <div i18n>farewell</div>
+              \`
+            })
+            export class MyComponent {}
+
+            @NgModule({declarations: [MyComponent]})
+            export class MyModule {}
+        `
+        }
+      };
+
+      const template = `
+      const $msg_1$ = goog.getMsg("Hello world");
+      const $msg_2$ = goog.getMsg("farewell");
+      …
+      template: function MyComponent_Template(rf, ctx) {
+        if (rf & 1) {
+          …
+          $r3$.ɵT(1, $msg_1$);
+          …
+          $r3$.ɵT(3,"&");
+          …
+          $r3$.ɵT(5, $msg_2$);
+          …
+          $r3$.ɵT(7, $msg_2$);
+          …
+        }
+      }
+    `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template', {
+        '$msg_1$': TRANSLATION_NAME_REGEXP,
+        '$msg_2$': TRANSLATION_NAME_REGEXP,
+      });
+    });
+
+    it('should add the meaning and description as JsDoc comments', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, NgModule} from '@angular/core';
+
+            @Component({
+              selector: 'my-component',
+              template: \`
+                <div i18n="meaning|desc@@id" i18n-title="desc" title="introduction">Hello world</div>
+              \`
+            })
+            export class MyComponent {}
+
+            @NgModule({declarations: [MyComponent]})
+            export class MyModule {}
+        `
+        }
+      };
+
+      const template = `
+      /**
+       * @desc desc
+       */
+      const $msg_1$ = goog.getMsg("introduction");
+      const $c1$ = ["title", $msg_1$];
+      …
+      /**
+       * @desc desc
+       * @meaning meaning
+       */
+      const $msg_2$ = goog.getMsg("Hello world");
+      …
+      template: function MyComponent_Template(rf, ctx) {
+        if (rf & 1) {
+          $r3$.ɵE(0, "div", $c1$);
+          $r3$.ɵT(1, $msg_2$);
+          $r3$.ɵe();
+        }
+      }
+      `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template', {
+        '$msg_1$': TRANSLATION_NAME_REGEXP,
+      });
+    });
+  });
+
+  describe('static attributes', () => {
+    it('should translate static attributes', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, NgModule} from '@angular/core';
+
+            @Component({
+              selector: 'my-component',
+              template: \`
+                <div i18n id="static" i18n-title="m|d" title="introduction"></div>
+              \`
+            })
+            export class MyComponent {}
+
+            @NgModule({declarations: [MyComponent]})
+            export class MyModule {}
+        `
+        }
+      };
+
+      const template = `
+      /**
+       * @desc d
+       * @meaning m
+       */
+      const $msg_1$ = goog.getMsg("introduction");
+      const $c1$ = ["id", "static", "title", $msg_1$];
+      …
+      template: function MyComponent_Template(rf, ctx) {
+        if (rf & 1) {
+          $r3$.ɵEe(0, "div", $c1$);
+        }
+      }
+    `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template', {
+        '$msg_1$': TRANSLATION_NAME_REGEXP,
+      });
+    });
+  });
+
+  // TODO(vicb): this feature is not supported yet
+  xdescribe('nested nodes', () => {
+    it('should generate the placeholders maps', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, NgModule} from '@angular/core';
+
+            @Component({
+              selector: 'my-component',
+              template: \`
+                <div i18n>Hello <b>{{name}}<i>!</i><i>!</i></b></div>
+                <div>Other</div>
+                <div i18n>2nd</div>
+                <div i18n><i>3rd</i></div>
+              \`
+            })
+            export class MyComponent {}
+
+            @NgModule({declarations: [MyComponent]})
+            export class MyModule {}
+        `
+        }
+      };
+
+      const template = `
+      const $r1$ = {"b":[2], "i":[4, 6]};
+      const $r2$ = {"i":[13]};
+    `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+  });
+
+  describe('errors', () => {
+    it('should throw on nested i18n sections', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+            import {Component, NgModule} from '@angular/core';
+
+            @Component({
+              selector: 'my-component',
+              template: \`
+                <div i18n><div i18n></div></div>
+              \`
+            })
+            export class MyComponent {}
+
+            @NgModule({declarations: [MyComponent]})
+            export class MyModule {}
+        `
+        }
+      };
+
+      expect(() => compile(files, angularFiles))
+          .toThrowError(
+              'Could not mark an element as translatable inside of a translatable section');
+    });
+
+  });
+});
diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_input_outputs_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_input_outputs_spec.ts
new file mode 100644
index 000000000000..06b57717af61
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_input_outputs_spec.ts
@@ -0,0 +1,89 @@
+/**
+ * @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, setup} from '@angular/compiler/test/aot/test_util';
+import {compile, expectEmit} from './mock_compile';
+
+describe('compiler compliance: listen()', () => {
+  const angularFiles = setup({
+    compileAngular: false,
+    compileFakeCore: true,
+    compileAnimations: false,
+  });
+
+  it('should create declare inputs/outputs', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, Directive, NgModule, Input, Output} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`\`
+              })
+              export class MyComponent {
+                @Input() componentInput;
+                @Input('renamedComponentInput') originalComponentInput;
+
+                @Output() componentOutput;
+                @Output('renamedComponentOutput') originalComponentOutput;
+              }
+
+              @Directive({
+                selector: '[my-directive]',
+              })
+              export class MyDirective {
+                @Input() directiveInput;
+                @Input('renamedDirectiveInput') originalDirectiveInput;
+
+                @Output() directiveOutput;
+                @Output('renamedDirectiveOutput') originalDirectiveOutput;
+              }
+
+              @NgModule({declarations: [MyComponent, MyDirective]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    const componentDef = `
+      MyComponent.ngComponentDef = IDENT.ɵdefineComponent({
+          …
+          inputs:{
+            componentInput: "componentInput",
+            originalComponentInput: "renamedComponentInput"
+          },
+          outputs: {
+            componentOutput: "componentOutput",
+            originalComponentOutput: "renamedComponentOutput"
+          }
+          …
+        });`;
+
+    const directiveDef = `
+      MyDirective.ngDirectiveDef = IDENT.ɵdefineDirective({
+        …
+        inputs:{
+          directiveInput: "directiveInput",
+          originalDirectiveInput: "renamedDirectiveInput"
+        },
+        outputs: {
+          directiveOutput: "directiveOutput",
+          originalDirectiveOutput: "renamedDirectiveOutput"
+        }
+        …
+      });`;
+
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, componentDef, 'Incorrect component definition');
+    expectEmit(result.source, directiveDef, 'Incorrect directive definition');
+  });
+
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts
new file mode 100644
index 000000000000..510e442918d3
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts
@@ -0,0 +1,178 @@
+/**
+ * @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, setup} from '@angular/compiler/test/aot/test_util';
+import {compile, expectEmit} from './mock_compile';
+
+/* These tests are codified version of the tests in compiler_canonical_spec.ts. Every
+  * test in compiler_canonical_spec.ts should have a corresponding test here.
+  */
+describe('compiler compliance: listen()', () => {
+  const angularFiles = setup({
+    compileAngular: false,
+    compileFakeCore: true,
+    compileAnimations: false,
+  });
+
+  it('should create listener instruction on element', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`<div (click)="onClick($event); 1 == 2"></div>\`
+              })
+              export class MyComponent {
+                onClick(event: any) {}
+              }
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    // The template should look like this (where IDENT is a wild card for an identifier):
+    const template = `
+        template: function MyComponent_Template(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵE(0, "div");
+            $r3$.ɵL("click", function MyComponent_Template_div_click_listener($event) {
+              ctx.onClick($event);
+              return (1 == 2);
+            });
+            $r3$.ɵe();
+          }
+        }
+        `;
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, template, 'Incorrect template');
+  });
+
+  it('should create multiple listener instructions that share a view snapshot', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`
+                  <div *ngIf="showing">
+                    <div (click)="onClick(foo)"></div>
+                    <button (click)="onClick2(bar)"></button>
+                  </div>
+
+                \`
+              })
+              export class MyComponent {
+                onClick(name: any) {}
+                onClick2(name: any) {}
+              }
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    const template = `
+        const $c0$ = ["ngIf",""];
+
+        function MyComponent_div_Template_0(rf, ctx) {
+          if (rf & 1) {
+            const $s$ = $r3$.ɵgV();
+            $r3$.ɵE(0, "div");
+            $r3$.ɵE(1, "div");
+            $r3$.ɵL("click", function MyComponent_div_Template_0_div_click_listener($event) {
+              $r3$.ɵrV($s$);
+              const $comp$ = $r3$.ɵx();
+              return $comp$.onClick($comp$.foo);
+            });
+            $r3$.ɵe();
+            $r3$.ɵE(2, "button");
+            $r3$.ɵL("click", function MyComponent_div_Template_0_button_click_listener($event) {
+              $r3$.ɵrV($s$);
+              const $comp2$ = $r3$.ɵx();
+              return $comp2$.onClick2($comp2$.bar);
+            });
+            $r3$.ɵe();
+            $r3$.ɵe();
+          }
+        }
+        // ...
+        template: function MyComponent_Template(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵC(0, MyComponent_div_Template_0, null, $c0$);
+          }
+          if (rf & 2) {
+            $i0$.ɵp(0, "ngIf", $i0$.ɵb(ctx.showing));
+          }
+        }
+        `;
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, template, 'Incorrect template');
+  });
+
+  it('local refs in listeners defined before the local refs', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+            import {Component, NgModule} from '@angular/core';
+
+            @Component({
+              selector: 'my-component',
+              template: \`
+                <button (click)="onClick(user.value)">Save</button>
+                <input #user>
+              \`
+            })
+            export class MyComponent {}
+
+            @NgModule({declarations: [MyComponent]})
+            export class MyModule {}
+          `
+      }
+    };
+
+    const MyComponentDefinition = `
+        const $c0$ = ["user", ""];
+        …
+        MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors: [["my-component"]],
+          factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
+          features: [$r3$.ɵPublicFeature],
+          template: function MyComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵE(0, "button");
+                $r3$.ɵL("click", function MyComponent_Template_button_click_listener($event) {
+                   const $user$ = $r3$.ɵr(3);
+                   return ctx.onClick($user$.value);
+                });
+                $r3$.ɵT(1, "Save");
+              $r3$.ɵe();
+              $r3$.ɵEe(2, "input", null, $c0$);
+            }
+          }
+        });
+      `;
+
+    const result = compile(files, angularFiles);
+    const source = result.source;
+
+    expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef');
+  });
+
+});
diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_spec.ts
new file mode 100644
index 000000000000..de9d39af5cdb
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_spec.ts
@@ -0,0 +1,122 @@
+/**
+ * @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, setup} from '@angular/compiler/test/aot/test_util';
+import {compile, expectEmit} from './mock_compile';
+
+describe('r3_view_compiler', () => {
+  const angularFiles = setup({
+    compileAngular: false,
+    compileFakeCore: true,
+    compileAnimations: false,
+  });
+
+  describe('hello world', () => {
+    it('should be able to generate the hello world component', () => {
+      const files: MockDirectory = {
+        app: {
+          'hello.ts': `
+           import {Component, NgModule} from '@angular/core';
+
+           @Component({
+             selector: 'hello-world',
+             template: 'Hello, world!'
+           })
+           export class HelloWorldComponent {
+
+           }
+
+           @NgModule({
+             declarations: [HelloWorldComponent]
+           })
+           export class HelloWorldModule {}
+        `
+        }
+      };
+      compile(files, angularFiles);
+    });
+  });
+
+  it('should be able to generate the example', () => {
+    const files: MockDirectory = {
+      app: {
+        'example.ts': `
+        import {Component, OnInit, OnDestroy, ElementRef, Input, NgModule} from '@angular/core';
+
+        @Component({
+          selector: 'my-app',
+          template: '<todo [data]="list"></todo>'
+        })
+        export class MyApp implements OnInit {
+
+          list: any[] = [];
+
+          constructor(public elementRef: ElementRef) {}
+
+          ngOnInit(): void {
+          }
+        }
+
+        @Component({
+          selector: 'todo',
+          template: '<ul class="list" [title]="myTitle"><li *ngFor="let item of data">{{data}}</li></ul>'
+        })
+        export class TodoComponent implements OnInit, OnDestroy {
+
+          @Input()
+          data: any[] = [];
+
+          myTitle: string;
+
+          constructor(public elementRef: ElementRef) {}
+
+          ngOnInit(): void {}
+
+          ngOnDestroy(): void {}
+        }
+
+        @NgModule({
+          declarations: [TodoComponent, MyApp],
+        })
+        export class TodoModule{}
+        `
+      }
+    };
+    const result = compile(files, angularFiles);
+    expect(result.source).toContain('@angular/core');
+  });
+
+  describe('interpolations', () => {
+    // Regression #21927
+    it('should generate a correct call to bV with more than 8 interpolations', () => {
+      const files: MockDirectory = {
+        app: {
+          'example.ts': `
+          import {Component, NgModule} from '@angular/core';
+
+          @Component({
+            selector: 'my-app',
+            template: ' {{list[0]}} {{list[1]}} {{list[2]}} {{list[3]}} {{list[4]}} {{list[5]}} {{list[6]}} {{list[7]}} {{list[8]}} '
+          })
+          export class MyApp {
+            list: any[] = [];
+          }
+
+          @NgModule({declarations: [MyApp]})
+          export class MyModule {}`
+        }
+      };
+
+      const bV_call = `$r3$.ɵiV([" ",ctx.list[0]," ",ctx.list[1]," ",ctx.list[2]," ",ctx.list[3],
+        " ",ctx.list[4]," ",ctx.list[5]," ",ctx.list[6]," ",ctx.list[7]," ",ctx.list[8],
+        " "])`;
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, bV_call, 'Incorrect bV call');
+    });
+  });
+});
diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
new file mode 100644
index 000000000000..b645468be734
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
@@ -0,0 +1,321 @@
+/**
+ * @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 {InitialStylingFlags} from '@angular/compiler/src/core';
+import {MockDirectory, setup} from '@angular/compiler/test/aot/test_util';
+
+import {compile, expectEmit} from './mock_compile';
+
+describe('compiler compliance: styling', () => {
+  const angularFiles = setup({
+    compileAngular: false,
+    compileFakeCore: true,
+    compileAnimations: false,
+  });
+
+  describe('[style] and [style.prop]', () => {
+    it('should create style instructions on the element', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: 'my-component',
+                  template: \`<div [style]="myStyleExp"></div>\`
+                })
+                export class MyComponent {
+                  myStyleExp = [{color:'red'}, {color:'blue', duration:1000}]
+                }
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+        }
+      };
+
+      const template = `
+          template: function MyComponent_Template(rf, $ctx$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, "div");
+              $r3$.ɵs(null, null, $r3$.ɵzss);
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              $r3$.ɵsm(0, null, $ctx$.myStyleExp);
+              $r3$.ɵsa(0);
+            }
+          }
+          `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    it('should place initial, multi, singular and application followed by attribute style instructions in the template code in that order',
+       () => {
+         const files = {
+           app: {
+             'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: 'my-component',
+                  template: \`<div style="opacity:1"
+                                   [attr.style]="'border-width: 10px'"
+                                   [style.width]="myWidth"
+                                   [style]="myStyleExp"
+                                   [style.height]="myHeight"></div>\`
+                })
+                export class MyComponent {
+                  myStyleExp = [{color:'red'}, {color:'blue', duration:1000}]
+                  myWidth = '100px';
+                  myHeight = '100px';
+                }
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+           }
+         };
+
+         const template = `
+          const _c0 = ["opacity","width","height",${InitialStylingFlags.VALUES_MODE},"opacity","1"];
+          …
+          MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+              type: MyComponent,
+              selectors:[["my-component"]],
+              factory:function MyComponent_Factory(t){
+                return new (t || MyComponent)();
+              },
+              features: [$r3$.ɵPublicFeature],
+              template: function MyComponent_Template(rf, $ctx$) {
+                if (rf & 1) {
+                  $r3$.ɵE(0, "div");
+                  $r3$.ɵs(null, _c0, $r3$.ɵzss);
+                  $r3$.ɵe();
+                }
+                if (rf & 2) {
+                  $r3$.ɵsm(0, null, $ctx$.myStyleExp);
+                  $r3$.ɵsp(0, 1, $ctx$.myWidth);
+                  $r3$.ɵsp(0, 2, $ctx$.myHeight);
+                  $r3$.ɵsa(0);
+                  $r3$.ɵa(0, "style", $r3$.ɵb("border-width: 10px"), $r3$.ɵzs);
+                }
+              }
+            });
+        `;
+
+         const result = compile(files, angularFiles);
+         expectEmit(result.source, template, 'Incorrect template');
+       });
+
+    it('should assign a sanitizer instance to the element style allocation instruction if any url-based properties are detected',
+       () => {
+         const files = {
+           app: {
+             'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: 'my-component',
+                  template: \`<div [style.background-image]="myImage">\`
+                })
+                export class MyComponent {
+                  myImage = 'url(foo.jpg)';
+                }
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+           }
+         };
+
+         const template = `
+          const _c0 = ["background-image"];
+          export class MyComponent {
+              constructor() {
+                  this.myImage = 'url(foo.jpg)';
+              }
+          }
+
+          MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+            type: MyComponent,
+            selectors: [["my-component"]],
+            factory: function MyComponent_Factory(t) {
+              return new (t || MyComponent)();
+            },
+            features: [$r3$.ɵPublicFeature],
+            template: function MyComponent_Template(rf, ctx) {
+              if (rf & 1) {
+                $r3$.ɵE(0, "div");
+                $r3$.ɵs(null, _c0, $r3$.ɵzss);
+                $r3$.ɵe();
+              }
+              if (rf & 2) {
+                $r3$.ɵsp(0, 0, ctx.myImage);
+                $r3$.ɵsa(0);
+              }
+            }
+          });
+        `;
+
+         const result = compile(files, angularFiles);
+         expectEmit(result.source, template, 'Incorrect template');
+       });
+  });
+
+  describe('[class]', () => {
+    it('should create class styling instructions on the element', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: 'my-component',
+                  template: \`<div [class]="myClassExp"></div>\`
+                })
+                export class MyComponent {
+                  myClassExp = {'foo':true}
+                }
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+        }
+      };
+
+      const template = `
+          template: function MyComponent_Template(rf, $ctx$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, "div");
+              $r3$.ɵs();
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              $r3$.ɵsm(0,$ctx$.myClassExp);
+              $r3$.ɵsa(0);
+            }
+          }
+          `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    it('should place initial, multi, singular and application followed by attribute class instructions in the template code in that order',
+       () => {
+         const files = {
+           app: {
+             'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: 'my-component',
+                  template: \`<div class="grape"
+                                   [attr.class]="'banana'"
+                                   [class.apple]="yesToApple"
+                                   [class]="myClassExp"
+                                   [class.orange]="yesToOrange"></div>\`
+                })
+                export class MyComponent {
+                  myClassExp = {a:true, b:true};
+                  yesToApple = true;
+                  yesToOrange = true;
+                }
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+           }
+         };
+
+         const template = `
+          const _c0 = ["grape","apple","orange",${InitialStylingFlags.VALUES_MODE},"grape",true];
+          …
+          MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+              type: MyComponent,
+              selectors:[["my-component"]],
+              factory:function MyComponent_Factory(t){
+                return new (t || MyComponent)();
+              },
+              features: [$r3$.ɵPublicFeature],
+              template: function MyComponent_Template(rf, $ctx$) {
+                if (rf & 1) {
+                  $r3$.ɵE(0, "div");
+                  $r3$.ɵs(_c0);
+                  $r3$.ɵe();
+                }
+                if (rf & 2) {
+                  $r3$.ɵsm(0, $ctx$.myClassExp);
+                  $r3$.ɵcp(0, 1, $ctx$.yesToApple);
+                  $r3$.ɵcp(0, 2, $ctx$.yesToOrange);
+                  $r3$.ɵsa(0);
+                  $r3$.ɵa(0, "class", $r3$.ɵb("banana"));
+                }
+              }
+            });
+        `;
+
+         const result = compile(files, angularFiles);
+         expectEmit(result.source, template, 'Incorrect template');
+       });
+
+    it('should not generate the styling apply instruction if there are only static style/class attributes',
+       () => {
+         const files = {
+           app: {
+             'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: 'my-component',
+                  template: \`<div class="foo"
+                                   style="width:100px"
+                                   [attr.class]="'round'"
+                                   [attr.style]="'height:100px'"></div>\`
+                })
+                export class MyComponent {}
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+           }
+         };
+
+         const template = `
+          const _c0 = ["foo",${InitialStylingFlags.VALUES_MODE},"foo",true];
+          const _c1 = ["width",${InitialStylingFlags.VALUES_MODE},"width","100px"];
+          …
+          MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+              type: MyComponent,
+              selectors:[["my-component"]],
+              factory:function MyComponent_Factory(t){
+                return new (t || MyComponent)();
+              },
+              features: [$r3$.ɵPublicFeature],
+              template: function MyComponent_Template(rf, $ctx$) {
+                if (rf & 1) {
+                  $r3$.ɵE(0, "div");
+                  $r3$.ɵs(_c0, _c1);
+                  $r3$.ɵe();
+                }
+                if (rf & 2) {
+                  $r3$.ɵa(0, "class", $r3$.ɵb("round"));
+                  $r3$.ɵa(0, "style", $r3$.ɵb("height:100px"), $r3$.ɵzs);
+                }
+              }
+            });
+        `;
+
+         const result = compile(files, angularFiles);
+         expectEmit(result.source, template, 'Incorrect template');
+       });
+  });
+});
diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts
new file mode 100644
index 000000000000..0d4c884a3e6c
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts
@@ -0,0 +1,362 @@
+/**
+ * @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 {setup} from '@angular/compiler/test/aot/test_util';
+import {compile, expectEmit} from './mock_compile';
+
+describe('compiler compliance: template', () => {
+  const angularFiles = setup({
+    compileAngular: false,
+    compileFakeCore: true,
+    compileAnimations: false,
+  });
+
+  it('should correctly bind to context in nested template', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`
+                  <ul *ngFor="let outer of items">
+                    <li *ngFor="let middle of outer.items">
+                      <div *ngFor="let inner of items"
+                           (click)="onClick(outer, middle, inner)"
+                           [title]="format(outer, middle, inner, component)"
+                           >
+                        {{format(outer, middle, inner, component)}}
+                      </div>
+                    </li>
+                  </ul>\`
+              })
+              export class MyComponent {
+                component = this;
+                format(outer: any, middle: any, inner: any) { }
+                onClick(outer: any, middle: any, inner: any) { }
+              }
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    // The template should look like this (where IDENT is a wild card for an identifier):
+    const template = `
+      const $c0$ = ["ngFor","","ngForOf",""];
+      function MyComponent_ul_li_div_Template_1(rf, ctx) {
+
+        if (rf & 1) {
+          const $s$ = $i0$.ɵgV();
+          $i0$.ɵE(0, "div");
+          $i0$.ɵL("click", function MyComponent_ul_li_div_Template_1_div_click_listener($event){
+            $i0$.ɵrV($s$);
+            const $inner$ = ctx.$implicit;
+            const $middle$ = $i0$.ɵx().$implicit;
+            const $outer$ = $i0$.ɵx().$implicit;
+            const $myComp$ = $i0$.ɵx();
+            return $myComp$.onClick($outer$, $middle$, $inner$);
+          });
+          $i0$.ɵT(1);
+          $i0$.ɵe();
+        }
+
+        if (rf & 2) {
+          const $inner1$ = ctx.$implicit;
+          const $middle1$ = $i0$.ɵx().$implicit;
+          const $outer1$ = $i0$.ɵx().$implicit;
+          const $myComp1$ = $i0$.ɵx();
+          $i0$.ɵp(0, "title", $i0$.ɵb($myComp1$.format($outer1$, $middle1$, $inner1$, $myComp1$.component)));
+          $i0$.ɵt(1, $i0$.ɵi1(" ", $myComp1$.format($outer1$, $middle1$, $inner1$, $myComp1$.component), " "));
+        }
+      }
+
+      function MyComponent_ul_li_Template_1(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵE(0, "li");
+          $i0$.ɵC(1, MyComponent_ul_li_div_Template_1, null, _c0);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          const $myComp2$ = $i0$.ɵx(2);
+          $i0$.ɵp(1, "ngForOf", $i0$.ɵb($myComp2$.items));
+        }
+      }
+
+      function MyComponent_ul_Template_0(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵE(0, "ul");
+          $i0$.ɵC(1, MyComponent_ul_li_Template_1, null, _c0);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          const $outer2$ = ctx.$implicit;
+          $i0$.ɵp(1, "ngForOf", $i0$.ɵb($outer2$.items));
+        }
+      }
+      // ...
+      template:function MyComponent_Template(rf, ctx){
+        if (rf & 1) {
+          $i0$.ɵC(0, MyComponent_ul_Template_0, null, _c0);
+        }
+        if (rf & 2) {
+          $i0$.ɵp(0, "ngForOf", $i0$.ɵb(ctx.items));
+        }
+      }`;
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, template, 'Incorrect template');
+  });
+
+  it('should support ngFor context variables', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`
+                    <span *ngFor="let item of items; index as i">
+                      {{ i }} - {{ item }}
+                    </span>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    const template = `
+      const $c0$ = ["ngFor", "", "ngForOf", ""];
+
+      function MyComponent_span_Template_0(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵE(0, "span");
+          $i0$.ɵT(1);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          const $item$ = ctx.$implicit;
+          const $i$ = ctx.index;
+          $i0$.ɵt(1, $i0$.ɵi2(" ", $i$, " - ", $item$, " "));
+        }
+      }
+      // ...
+      template:function MyComponent_Template(rf, ctx){
+        if (rf & 1) {
+          $i0$.ɵC(0, MyComponent_span_Template_0, null, _c0);
+        }
+        if (rf & 2) {
+          $i0$.ɵp(0, "ngForOf", $i0$.ɵb(ctx.items));
+        }
+      }`;
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, template, 'Incorrect template');
+  });
+
+  it('should support ngFor context variables in parent views', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`
+                  <div *ngFor="let item of items; index as i">
+                      <span *ngIf="showing">
+                        {{ i }} - {{ item }}
+                      </span>
+                  </div>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    const template = `
+      const $c0$ = ["ngFor", "", "ngForOf", ""];
+      const $c1$ = ["ngIf", ""];
+
+      function MyComponent_div_span_Template_1(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵE(0, "span");
+          $i0$.ɵT(1);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          const $div$ = $i0$.ɵx();
+          const $i$ = $div$.index;
+          const $item$ = $div$.$implicit;
+          $i0$.ɵt(1, $i0$.ɵi2(" ", $i$, " - ", $item$, " "));
+        }
+      }
+
+      function MyComponent_div_Template_0(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵE(0, "div");
+          $i0$.ɵC(1, MyComponent_div_span_Template_1, null, $c1$);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          const $app$ = $i0$.ɵx();
+          $i0$.ɵp(1, "ngIf", $i0$.ɵb($app$.showing));
+        }
+      }
+
+      // ...
+      template:function MyComponent_Template(rf, ctx){
+        if (rf & 1) {
+          $i0$.ɵC(0, MyComponent_div_Template_0, null, $c0$);
+        }
+        if (rf & 2) {
+          $i0$.ɵp(0, "ngForOf", $i0$.ɵb(ctx.items));
+        }
+      }`;
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, template, 'Incorrect template');
+  });
+
+  it('should correctly skip contexts as needed', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`
+                  <div *ngFor="let outer of items">
+                    <div *ngFor="let middle of outer.items">
+                      <div *ngFor="let inner of middle.items">
+                        {{ middle.value }} - {{ name }}
+                      </div>
+                    </div>
+                  </div>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    // The template should look like this (where IDENT is a wild card for an identifier):
+    const template = `
+      const $c0$ = ["ngFor", "", "ngForOf", ""];
+      function MyComponent_div_div_div_Template_1(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵE(0, "div");
+          $i0$.ɵT(1);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          const $middle$ = $i0$.ɵx().$implicit;
+          const $myComp$ = $i0$.ɵx(2);
+          $i0$.ɵt(1, $i0$.ɵi2(" ", $middle$.value, " - ", $myComp$.name, " "));
+        }
+      }
+
+      function MyComponent_div_div_Template_1(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵE(0, "div");
+          $i0$.ɵC(1, MyComponent_div_div_div_Template_1, null, _c0);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          const $middle$ = ctx.$implicit;
+          $i0$.ɵp(1, "ngForOf", $i0$.ɵb($middle$.items));
+        }
+      }
+
+      function MyComponent_div_Template_0(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵE(0, "div");
+          $i0$.ɵC(1, MyComponent_div_div_Template_1, null, _c0);
+          $i0$.ɵe();
+        }
+        if (rf & 2) {
+          const $outer$ = ctx.$implicit;
+          $i0$.ɵp(1, "ngForOf", $i0$.ɵb($outer$.items));
+        }
+      }
+      // ...
+      template:function MyComponent_Template(rf, ctx){
+        if (rf & 1) {
+          $i0$.ɵC(0, MyComponent_div_Template_0, null, _c0);
+        }
+        if (rf & 2) {
+          $i0$.ɵp(0, "ngForOf", $i0$.ɵb(ctx.items));
+        }
+      }`;
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, template, 'Incorrect template');
+  });
+
+  it('should support <ng-template>', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+
+              @Component({
+                selector: 'my-component',
+                template: \`
+                  <ng-template [boundAttr]="b" attr="l">
+                    some-content
+                  </ng-template>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    const template = `
+      const $c0$ = ["attr", "", "boundAttr", ""];
+
+      function Template_0(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵT(0, " some-content ");
+        }
+      }
+
+      // ...
+
+      template: function MyComponent_Template(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵC(0, Template_0, null, $c0$);
+        }
+        if (rf & 2) {
+          $i0$.ɵp(0, "boundAttr", $i0$.ɵb(ctx.b));
+        }
+      }`;
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, template, 'Incorrect template');
+  });
+});
diff --git a/packages/compiler-cli/test/diagnostics/BUILD.bazel b/packages/compiler-cli/test/diagnostics/BUILD.bazel
new file mode 100644
index 000000000000..18cc00ffc2b7
--- /dev/null
+++ b/packages/compiler-cli/test/diagnostics/BUILD.bazel
@@ -0,0 +1,121 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "mocks",
+    testonly = 1,
+    srcs = [
+        "mocks.ts",
+    ],
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+        "//packages/compiler-cli/test:test_utils",
+        "//packages/core",
+    ],
+)
+
+# check_types_spec
+ts_library(
+    name = "check_types_lib",
+    testonly = 1,
+    srcs = ["check_types_spec.ts"],
+    deps = [
+        ":mocks",
+        "//packages/compiler-cli",
+        "//packages/compiler-cli/test:test_utils",
+    ],
+)
+
+jasmine_node_test(
+    name = "check_types",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+        "//packages/common:npm_package",
+        "//packages/core:npm_package",
+    ],
+    deps = [
+        ":check_types_lib",
+        "//packages/core",
+        "//tools/testing:node",
+    ],
+)
+
+# expression_diagnostics_spec
+ts_library(
+    name = "expression_diagnostics_lib",
+    testonly = 1,
+    srcs = ["expression_diagnostics_spec.ts"],
+    deps = [
+        ":mocks",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+        "//packages/compiler-cli/test:test_utils",
+        "//packages/language-service",
+    ],
+)
+
+jasmine_node_test(
+    name = "expression_diagnostics",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+        "//packages/common:npm_package",
+        "//packages/core:npm_package",
+        "//packages/forms:npm_package",
+    ],
+    deps = [
+        ":expression_diagnostics_lib",
+        "//packages/core",
+        "//tools/testing:node",
+    ],
+)
+
+# typescript_symbols_spec
+ts_library(
+    name = "typescript_symbols_lib",
+    testonly = 1,
+    srcs = ["typescript_symbols_spec.ts"],
+    deps = [
+        ":mocks",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+        "//packages/compiler-cli/test:test_utils",
+        "//packages/compiler/test:test_utils",
+        "//packages/language-service",
+    ],
+)
+
+jasmine_node_test(
+    name = "typescript_symbols",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+    ],
+    deps = [
+        ":typescript_symbols_lib",
+        "//packages/core",
+        "//tools/testing:node",
+    ],
+)
+
+# typescript_version_spec
+ts_library(
+    name = "typescript_version_lib",
+    testonly = 1,
+    srcs = ["typescript_version_spec.ts"],
+    deps = [
+        "//packages/compiler-cli",
+        "//packages/compiler-cli/test:test_utils",
+    ],
+)
+
+jasmine_node_test(
+    name = "typescript_version",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+    ],
+    deps = [
+        ":typescript_version_lib",
+        "//tools/testing:node",
+    ],
+)
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 000000000000..57778f5880bc
--- /dev/null
+++ b/packages/compiler-cli/test/diagnostics/check_types_spec.ts
@@ -0,0 +1,914 @@
+/**
+ * @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 ng from '@angular/compiler-cli';
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {TestSupport, expectNoDiagnostics, setup} from '../test_support';
+
+type MockFiles = {
+  [fileName: string]: string
+};
+
+describe('ng type checker', () => {
+  let errorSpy: jasmine.Spy&((s: string) => void);
+  let testSupport: TestSupport;
+
+  function compileAndCheck(
+      mockDirs: MockFiles[], overrideOptions: ng.CompilerOptions = {}): ng.Diagnostics {
+    testSupport.writeFiles(...mockDirs);
+    const fileNames: string[] = [];
+    mockDirs.forEach((dir) => {
+      Object.keys(dir).forEach((fileName) => {
+        if (fileName.endsWith('.ts')) {
+          fileNames.push(path.resolve(testSupport.basePath, fileName));
+        }
+      });
+    });
+    const options = testSupport.createCompilerOptions(overrideOptions);
+    const {diagnostics} = ng.performCompilation({rootNames: fileNames, options});
+    return diagnostics;
+  }
+
+  beforeEach(() => {
+    errorSpy = jasmine.createSpy('consoleError').and.callFake(console.error);
+    testSupport = setup();
+  });
+
+  function accept(files: MockFiles = {}, overrideOptions: ng.CompilerOptions = {}) {
+    expectNoDiagnostics({}, compileAndCheck([QUICKSTART, files], overrideOptions));
+  }
+
+  function reject(
+      message: string | RegExp, location: RegExp | null, files: MockFiles,
+      overrideOptions: ng.CompilerOptions = {}) {
+    const diagnostics = compileAndCheck([QUICKSTART, files], overrideOptions);
+    if (!diagnostics || !diagnostics.length) {
+      throw new Error('Expected a diagnostic error message');
+    } else {
+      const matches: (d: ng.Diagnostic) => boolean = typeof message === 'string' ?
+          d => ng.isNgDiagnostic(d)&& d.messageText == message :
+          d => ng.isNgDiagnostic(d) && message.test(d.messageText);
+      const matchingDiagnostics = diagnostics.filter(matches) as ng.Diagnostic[];
+      if (!matchingDiagnostics || !matchingDiagnostics.length) {
+        throw new Error(
+            `Expected a diagnostics matching ${message}, received\n  ${diagnostics.map(d => d.messageText).join('\n  ')}`);
+      }
+
+      if (location) {
+        const span = matchingDiagnostics[0].span;
+        if (!span) {
+          throw new Error('Expected a sourceSpan');
+        }
+        expect(`${span.start.file.url}@${span.start.line}:${span.start.offset}`).toMatch(location);
+      }
+    }
+  }
+
+  it('should accept unmodified QuickStart', () => { accept(); });
+
+  it('should accept unmodified QuickStart with tests for unused variables', () => {
+    accept({}, {
+      strict: true,
+      noUnusedLocals: true,
+      noUnusedParameters: true,
+    });
+  });
+
+  describe('type narrowing', () => {
+    const a = (files: MockFiles, options: ng.AngularCompilerOptions = {}) => {
+      accept(files, {fullTemplateTypeCheck: true, ...options});
+    };
+
+    it('should narrow an *ngIf like directive', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener, TemplateRef, Input} from '@angular/core';
+
+        export interface Person {
+          name: string;
+        }
+
+        @Component({
+          selector: 'comp',
+          template: '<div *myIf="person"> {{person.name}} </div>'
+        })
+        export class MainComp {
+          person?: Person;
+        }
+
+        export class MyIfContext {
+          public $implicit: any = null;
+          public myIf: any = null;
+        }
+
+        @Directive({selector: '[myIf]'})
+        export class MyIf {
+          constructor(templateRef: TemplateRef<MyIfContext>) {}
+
+          @Input()
+          set myIf(condition: any) {}
+
+          static myIfTypeGuard: <T>(v: T | null | undefined | false) => v is T;
+        }
+
+        @NgModule({
+          declarations: [MainComp, MyIf],
+        })
+        export class MainModule {}`
+      });
+    });
+
+    it('should narrow a renamed *ngIf like directive', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener, TemplateRef, Input} from '@angular/core';
+
+        export interface Person {
+          name: string;
+        }
+
+        @Component({
+          selector: 'comp',
+          template: '<div *my-if="person"> {{person.name}} </div>'
+        })
+        export class MainComp {
+          person?: Person;
+        }
+
+        export class MyIfContext {
+          public $implicit: any = null;
+          public myIf: any = null;
+        }
+
+        @Directive({selector: '[my-if]'})
+        export class MyIf {
+          constructor(templateRef: TemplateRef<MyIfContext>) {}
+
+          @Input('my-if')
+          set myIf(condition: any) {}
+
+          static myIfTypeGuard: <T>(v: T | null | undefined | false) => v is T;
+        }
+
+        @NgModule({
+          declarations: [MainComp, MyIf],
+        })
+        export class MainModule {}`
+      });
+    });
+
+    it('should narrow a type in a nested *ngIf like directive', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener, TemplateRef, Input} from '@angular/core';
+
+        export interface Address {
+          street: string;
+        }
+
+        export interface Person {
+          name: string;
+          address?: Address;
+        }
+
+
+        @Component({
+          selector: 'comp',
+          template: '<div *myIf="person"> {{person.name}} <span *myIf="person.address">{{person.address.street}}</span></div>'
+        })
+        export class MainComp {
+          person?: Person;
+        }
+
+        export class MyIfContext {
+          public $implicit: any = null;
+          public myIf: any = null;
+        }
+
+        @Directive({selector: '[myIf]'})
+        export class MyIf {
+          constructor(templateRef: TemplateRef<MyIfContext>) {}
+
+          @Input()
+          set myIf(condition: any) {}
+
+          static myIfTypeGuard: <T>(v: T | null | undefined | false) => v is T;
+        }
+
+        @NgModule({
+          declarations: [MainComp, MyIf],
+        })
+        export class MainModule {}`
+      });
+    });
+
+    it('should narrow an *ngIf like directive with UseIf', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener, TemplateRef, Input} from '@angular/core';
+
+        export interface Person {
+          name: string;
+        }
+
+        @Component({
+          selector: 'comp',
+          template: '<div *myIf="person"> {{person.name}} </div>'
+        })
+        export class MainComp {
+          person?: Person;
+        }
+
+        export class MyIfContext {
+          public $implicit: any = null;
+          public myIf: any = null;
+        }
+
+        @Directive({selector: '[myIf]'})
+        export class MyIf {
+          constructor(templateRef: TemplateRef<MyIfContext>) {}
+
+          @Input()
+          set myIf(condition: any) {}
+
+          static myIfUseIfTypeGuard: void;
+        }
+
+        @NgModule({
+          declarations: [MainComp, MyIf],
+        })
+        export class MainModule {}`
+      });
+    });
+
+    it('should narrow a renamed *ngIf like directive with UseIf', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener, TemplateRef, Input} from '@angular/core';
+
+        export interface Person {
+          name: string;
+        }
+
+        @Component({
+          selector: 'comp',
+          template: '<div *my-if="person"> {{person.name}} </div>'
+        })
+        export class MainComp {
+          person?: Person;
+        }
+
+        export class MyIfContext {
+          public $implicit: any = null;
+          public myIf: any = null;
+        }
+
+        @Directive({selector: '[my-if]'})
+        export class MyIf {
+          constructor(templateRef: TemplateRef<MyIfContext>) {}
+
+          @Input('my-if')
+          set myIf(condition: any) {}
+
+          static myIfUseIfTypeGuard: void;
+        }
+
+        @NgModule({
+          declarations: [MainComp, MyIf],
+        })
+        export class MainModule {}`
+      });
+    });
+
+    it('should narrow a type in a nested *ngIf like directive with UseIf', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener, TemplateRef, Input} from '@angular/core';
+
+        export interface Address {
+          street: string;
+        }
+
+        export interface Person {
+          name: string;
+          address?: Address;
+        }
+
+
+        @Component({
+          selector: 'comp',
+          template: '<div *myIf="person"> {{person.name}} <span *myIf="person.address">{{person.address.street}}</span></div>'
+        })
+        export class MainComp {
+          person?: Person;
+        }
+
+        export class MyIfContext {
+          public $implicit: any = null;
+          public myIf: any = null;
+        }
+
+        @Directive({selector: '[myIf]'})
+        export class MyIf {
+          constructor(templateRef: TemplateRef<MyIfContext>) {}
+
+          @Input()
+          set myIf(condition: any) {}
+
+          static myIfUseIfTypeGuard: void;
+        }
+
+        @NgModule({
+          declarations: [MainComp, MyIf],
+        })
+        export class MainModule {}`
+      });
+    });
+
+    it('should narrow an *ngIf like directive with UseIf and &&', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener, TemplateRef, Input} from '@angular/core';
+
+        export interface Address {
+          street: string;
+        }
+
+        export interface Person {
+          name: string;
+        }
+
+        @Component({
+          selector: 'comp',
+          template: '<div *myIf="person && address"> {{person.name}} lives at {{address.street}} </div>'
+        })
+        export class MainComp {
+          person?: Person;
+          address?: Address;
+        }
+
+        export class MyIfContext {
+          public $implicit: any = null;
+          public myIf: any = null;
+        }
+
+        @Directive({selector: '[myIf]'})
+        export class MyIf {
+          constructor(templateRef: TemplateRef<MyIfContext>) {}
+
+          @Input()
+          set myIf(condition: any) {}
+
+          static myIfUseIfTypeGuard: void;
+        }
+
+        @NgModule({
+          declarations: [MainComp, MyIf],
+        })
+        export class MainModule {}`
+      });
+    });
+
+    it('should narrow an *ngIf like directive with UseIf and !!', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener, TemplateRef, Input} from '@angular/core';
+
+        export interface Person {
+          name: string;
+        }
+
+        @Component({
+          selector: 'comp',
+          template: '<div *myIf="!!person"> {{person.name}} </div>'
+        })
+        export class MainComp {
+          person?: Person;
+        }
+
+        export class MyIfContext {
+          public $implicit: any = null;
+          public myIf: any = null;
+        }
+
+        @Directive({selector: '[myIf]'})
+        export class MyIf {
+          constructor(templateRef: TemplateRef<MyIfContext>) {}
+
+          @Input()
+          set myIf(condition: any) {}
+
+          static myIfUseIfTypeGuard: void;
+        }
+
+        @NgModule({
+          declarations: [MainComp, MyIf],
+        })
+        export class MainModule {}`
+      });
+    });
+
+    it('should narrow an *ngIf like directive with UseIf and != null', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener, TemplateRef, Input} from '@angular/core';
+
+        export interface Person {
+          name: string;
+        }
+
+        @Component({
+          selector: 'comp',
+          template: '<div *myIf="person != null"> {{person.name}} </div>'
+        })
+        export class MainComp {
+          person: Person | null = null;
+        }
+
+        export class MyIfContext {
+          public $implicit: any = null;
+          public myIf: any = null;
+        }
+
+        @Directive({selector: '[myIf]'})
+        export class MyIf {
+          constructor(templateRef: TemplateRef<MyIfContext>) {}
+
+          @Input()
+          set myIf(condition: any) {}
+
+          static myIfUseIfTypeGuard: void;
+        }
+
+        @NgModule({
+          declarations: [MainComp, MyIf],
+        })
+        export class MainModule {}`
+      });
+    });
+
+    it('should narrow an *ngIf like directive with UseIf and != undefined', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener, TemplateRef, Input} from '@angular/core';
+
+        export interface Person {
+          name: string;
+        }
+
+        @Component({
+          selector: 'comp',
+          template: '<div *myIf="person != undefined"> {{person.name}} </div>'
+        })
+        export class MainComp {
+          person?: Person;
+        }
+
+        export class MyIfContext {
+          public $implicit: any = null;
+          public myIf: any = null;
+        }
+
+        @Directive({selector: '[myIf]'})
+        export class MyIf {
+          constructor(templateRef: TemplateRef<MyIfContext>) {}
+
+          @Input()
+          set myIf(condition: any) {}
+
+          static myIfUseIfTypeGuard: void;
+        }
+
+        @NgModule({
+          declarations: [MainComp, MyIf],
+        })
+        export class MainModule {}`
+      });
+    });
+  });
+
+  describe('casting $any', () => {
+    const a = (files: MockFiles, options: ng.AngularCompilerOptions = {}) => {
+      accept(
+          {'src/app.component.ts': '', 'src/lib.ts': '', ...files},
+          {fullTemplateTypeCheck: true, ...options});
+    };
+
+    const r =
+        (message: string | RegExp, location: RegExp | null, files: MockFiles,
+         options: ng.AngularCompilerOptions = {}) => {
+          reject(
+              message, location, {'src/app.component.ts': '', 'src/lib.ts': '', ...files},
+              {fullTemplateTypeCheck: true, ...options});
+        };
+
+    it('should allow member access of an expression', () => {
+      a({
+        'src/app.module.ts': `
+        import {NgModule, Component} from '@angular/core';
+
+        export interface Person {
+          name: string;
+        }
+
+        @Component({
+          selector: 'comp',
+          template: ' {{$any(person).address}}'
+        })
+        export class MainComp {
+          person: Person;
+        }
+
+        @NgModule({
+          declarations: [MainComp],
+        })
+        export class MainModule {
+        }`
+      });
+    });
+
+    it('should allow invalid this.member access', () => {
+      a({
+        'src/app.module.ts': `
+        import {NgModule, Component} from '@angular/core';
+
+        @Component({
+          selector: 'comp',
+          template: ' {{$any(this).missing}}'
+        })
+        export class MainComp { }
+
+        @NgModule({
+          declarations: [MainComp],
+        })
+        export class MainModule {
+        }`
+      });
+    });
+
+    it('should reject too few parameters to $any', () => {
+      r(/Invalid call to \$any, expected 1 argument but received none/, null, {
+        'src/app.module.ts': `
+        import {NgModule, Component} from '@angular/core';
+
+        @Component({
+          selector: 'comp',
+          template: ' {{$any().missing}}'
+        })
+        export class MainComp { }
+
+        @NgModule({
+          declarations: [MainComp],
+        })
+        export class MainModule {
+        }`
+      });
+    });
+
+    it('should reject too many parameters to $any', () => {
+      r(/Invalid call to \$any, expected 1 argument but received 2/, null, {
+        'src/app.module.ts': `
+        import {NgModule, Component} from '@angular/core';
+
+        export interface Person {
+          name: string;
+        }
+
+        @Component({
+          selector: 'comp',
+          template: ' {{$any(person, 12).missing}}'
+        })
+        export class MainComp {
+          person: Person;
+        }
+
+        @NgModule({
+          declarations: [MainComp],
+        })
+        export class MainModule {
+        }`
+      });
+    });
+  });
+
+  describe('core', () => {
+    const a = (files: MockFiles, options: ng.AngularCompilerOptions = {}) => {
+      accept(files, {fullTemplateTypeCheck: true, ...options});
+    };
+
+    // Regression #19905
+    it('should accept an event binding', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component, Directive, HostListener} from '@angular/core';
+
+        @Component({
+          selector: 'comp',
+          template: '<div someDir></div>'
+        })
+        export class MainComp {}
+
+        @Directive({
+          selector: '[someDir]'
+        })
+        export class SomeDirective {
+          @HostListener('click', ['$event'])
+          onClick(event: any) {}
+        }
+
+        @NgModule({
+          declarations: [MainComp, SomeDirective],
+        })
+        export class MainModule {}`
+      });
+    });
+  });
+
+  describe('common', () => {
+    const a = (files: MockFiles, options: ng.AngularCompilerOptions = {}) => {
+      accept(files, {fullTemplateTypeCheck: true, ...options});
+    };
+
+    // Regression #19905
+    it('should accept a |undefined or |null parameter for async_pipe', () => {
+      a({
+        'src/app.component.ts': '',
+        'src/lib.ts': '',
+        'src/app.module.ts': `
+        import {NgModule, Component} from '@angular/core';
+        import {CommonModule} from '@angular/common';
+
+        @Component({
+          selector: 'comp',
+          template: '<div>{{ name | async}}</div>'
+        })
+        export class MainComp {
+          name: Promise<string>|undefined;
+        }
+
+
+        @NgModule({
+          declarations: [MainComp],
+          imports: [CommonModule]
+        })
+        export class MainModule {}`
+      });
+    });
+  });
+
+  describe('with modified quickstart (fullTemplateTypeCheck: false)', () => {
+    addTests({fullTemplateTypeCheck: false});
+  });
+
+  describe('with modified quickstart (fullTemplateTypeCheck: true)', () => {
+    addTests({fullTemplateTypeCheck: true});
+  });
+
+  describe('regressions', () => {
+    // #19485
+    it('should accept if else (TemplateRef)', () => {
+      accept(
+          {
+            'src/app.component.html': `
+              <div class="text-center" *ngIf="!person; else e">
+                No person supplied.
+              </div>
+              <ng-template #e>
+                Welcome {{person.name}}!
+              <ng-template>`
+          },
+          {fullTemplateTypeCheck: true});
+    });
+  });
+
+  function addTests(config: {fullTemplateTypeCheck: boolean}) {
+    function a(template: string) { accept({'src/app.component.html': template}, config); }
+
+    function r(template: string, message: string | RegExp, location: string) {
+      reject(
+          message, new RegExp(`app\.component\.html\@${location}$`),
+          {'src/app.component.html': template}, config);
+    }
+
+    function rejectOnlyWithFullTemplateTypeCheck(
+        template: string, message: string | RegExp, location: string) {
+      if (config.fullTemplateTypeCheck) {
+        r(template, message, location);
+      } else {
+        a(template);
+      }
+    }
+
+    it('should report an invalid field access', () => {
+      r('<div>{{fame}}<div>', `Property 'fame' does not exist on type 'AppComponent'.`, '0:5');
+    });
+    it('should reject a reference to a field of a nullable',
+       () => { r('<div>{{maybePerson.name}}</div>', `Object is possibly 'undefined'.`, '0:5'); });
+    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 using a library pipe', () => { a('{{1 | libPipe}}'); });
+    it('should accept using a library directive',
+       () => { a('<div libDir #libDir="libDir">{{libDir.name}}</div>'); });
+
+    it('should accept a function call', () => { a('{{getName()}}'); });
+    it('should reject an invalid method', () => {
+      r('<div>{{getFame()}}</div>',
+        `Property 'getFame' does not exist on type 'AppComponent'. Did you mean 'getName'?`, '0:5');
+    });
+    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('<div>{{getPerson().fame}}</div>', `Property 'fame' does not exist on type 'Person'.`,
+        '0:5');
+    });
+    it('should reject an access to a nullable field of a method result', () => {
+      r('<div>{{getMaybePerson().name}}</div>', `Object is possibly 'undefined'.`, '0:5');
+    });
+    it('should accept a nullable assert of a nullable field references 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}}'); });
+
+    it('should report an invalid field access inside of an ng-template', () => {
+      rejectOnlyWithFullTemplateTypeCheck(
+          '<ng-template>{{fame}}</ng-template>',
+          `Property 'fame' does not exist on type 'AppComponent'.`, '0:13');
+    });
+    it('should report an invalid call to a pipe', () => {
+      rejectOnlyWithFullTemplateTypeCheck(
+          '<div>{{"hello" | aPipe}}</div>',
+          `Argument of type '"hello"' is not assignable to parameter of type 'number'.`, '0:5');
+    });
+    it('should report an index into a map expression', () => {
+      rejectOnlyWithFullTemplateTypeCheck(
+          '<div>{{ {a: 1}[name] }}</div>',
+          `Element implicitly has an 'any' type because type '{ a: number; }' has no index signature.`,
+          '0:5');
+    });
+    it('should report an invalid property on an exportAs directive', () => {
+      rejectOnlyWithFullTemplateTypeCheck(
+          '<div aDir #aDir="aDir">{{aDir.fname}}</div>',
+          `Property 'fname' does not exist on type 'ADirective'. Did you mean 'name'?`, '0:23');
+    });
+  }
+
+  describe('with lowered expressions', () => {
+    it('should not report lowered expressions as errors',
+       () => { expectNoDiagnostics({}, compileAndCheck([LOWERING_QUICKSTART])); });
+  });
+});
+
+function appComponentSource(): string {
+  return `
+    import {Component, Pipe, Directive} from '@angular/core';
+
+    export interface Person {
+      name: string;
+      address: Address;
+    }
+
+    export interface Address {
+      street: string;
+      city: string;
+      state: string;
+      zip: string;
+    }
+
+    @Component({
+      templateUrl: './app.component.html'
+    })
+    export class AppComponent {
+      name = 'Angular';
+      person: Person;
+      people: Person[];
+      maybePerson?: Person;
+
+      getName(): string { return this.name; }
+      getPerson(): Person { return this.person; }
+      getMaybePerson(): Person | undefined { return this.maybePerson; }
+    }
+
+    @Pipe({
+      name: 'aPipe',
+    })
+    export class APipe {
+      transform(n: number): number { return n + 1; }
+    }
+
+    @Directive({
+      selector: '[aDir]',
+      exportAs: 'aDir'
+    })
+    export class ADirective {
+      name = 'ADirective';
+    }
+  `;
+}
+
+const QUICKSTART = {
+  'src/app.component.ts': appComponentSource(),
+  'src/app.component.html': '<h1>Hello {{name}}</h1>',
+  'src/lib.ts': `
+    import {Pipe, Directive} from '@angular/core';
+
+    @Pipe({ name: 'libPipe' })
+    export class LibPipe {
+      transform(n: number): number { return n + 1; }
+    }
+
+    @Directive({
+      selector: '[libDir]',
+      exportAs: 'libDir'
+    })
+    export class LibDirective {
+      name: string;
+    }
+  `,
+  'src/app.module.ts': `
+    import { NgModule }      from '@angular/core';
+    import { CommonModule }  from '@angular/common';
+    import { AppComponent, APipe, ADirective }  from './app.component';
+    import { LibDirective, LibPipe } from './lib';
+
+    @NgModule({
+      declarations: [ LibPipe, LibDirective ],
+      exports: [ LibPipe, LibDirective ],
+    })
+    export class LibModule { }
+
+    @NgModule({
+      declarations: [ AppComponent, APipe, ADirective ],
+      bootstrap:    [ AppComponent ],
+      imports:      [ LibModule, CommonModule ]
+    })
+    export class AppModule { }
+  `
+};
+
+const LOWERING_QUICKSTART = {
+  'src/app.component.ts': appComponentSource(),
+  'src/app.component.html': '<h1>Hello {{name}}</h1>',
+  'src/app.module.ts': `
+    import { NgModule, Component }      from '@angular/core';
+
+    import { AppComponent, APipe, ADirective }  from './app.component';
+
+    class Foo {}
+
+    @Component({
+      template: '',
+      providers: [
+        {provide: 'someToken', useFactory: () => new Foo()}
+      ]
+    })
+    export class Bar {}
+
+    @NgModule({
+      declarations: [ AppComponent, APipe, ADirective, Bar ],
+      bootstrap:    [ AppComponent ]
+    })
+    export class AppModule { }
+  `
+};
+
+const tmpdir = process.env.TEST_TMPDIR || os.tmpdir();
+
+function makeTempDir(): string {
+  const id = (Math.random() * 1000000).toFixed(0);
+  const dir = path.join(tmpdir, `tmp.${id}`);
+  fs.mkdirSync(dir);
+  return dir;
+}
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 000000000000..f3e4c304a255
--- /dev/null
+++ b/packages/compiler-cli/test/diagnostics/expression_diagnostics_spec.ts
@@ -0,0 +1,243 @@
+/**
+ * @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 {CompilerHost} from '@angular/compiler-cli';
+import {ReflectorHost} from '@angular/language-service/src/reflector_host';
+import * as ts from 'typescript';
+
+import {getExpressionDiagnostics, getTemplateExpressionDiagnostics} from '../../src/diagnostics/expression_diagnostics';
+import {CompilerOptions} from '../../src/transformers/api';
+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 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: CompilerOptions = Object.create(host.getCompilationSettings());
+    options.genDir = '/dist';
+    options.basePath = '/src';
+    const symbolResolverHost = new ReflectorHost(() => program, host, options);
+    context = new DiagnosticContext(service, program, checker, symbolResolverHost);
+    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 =
+            'messages: ' + 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) {
+    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 comparisons 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 {}
+      `
+    }
+  }
+};
diff --git a/packages/compiler-cli/test/diagnostics/mocks.ts b/packages/compiler-cli/test/diagnostics/mocks.ts
new file mode 100644
index 000000000000..aa3fefbcc491
--- /dev/null
+++ b/packages/compiler-cli/test/diagnostics/mocks.ts
@@ -0,0 +1,269 @@
+/**
+ * @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, StaticSymbolResolverHost, SummaryResolver, TemplateParser, analyzeNgModules, createOfflineCompileUrlResolver} 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 {DiagnosticTemplateInfo} from '../../src/diagnostics/expression_diagnostics';
+import {getClassFromStaticSymbol, getClassMembers, getPipesTable, getSymbolQuery} from '../../src/diagnostics/typescript_symbols';
+import {Directory, MockAotContext} from '../mocks';
+import {isInBazel, setup} from '../test_support';
+
+function calculateAngularPath() {
+  if (isInBazel()) {
+    const support = setup();
+    return path.join(support.basePath, 'node_modules/@angular/*');
+  } else {
+    const moduleFilename = module.filename.replace(/\\/g, '/');
+    const distIndex = moduleFilename.indexOf('/dist/all');
+    return moduleFilename.substr(0, distIndex) + '/packages/*';
+  }
+}
+
+const realFiles = new Map<string, string>();
+
+export class MockLanguageServiceHost implements ts.LanguageServiceHost {
+  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/*': [calculateAngularPath()]}
+    };
+    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; },
+      toSummaryFileName(sourceFilePath: string) { return sourceFilePath; },
+      fromSummaryFileName(filePath: string): string{return filePath;},
+    },
+    staticSymbolCache);
+
+export class DiagnosticContext {
+  // tslint:disable
+  // TODO(issue/24571): remove '!'.
+  _analyzedModules !: NgAnalyzedModules;
+  _staticSymbolResolver: StaticSymbolResolver|undefined;
+  _reflector: StaticReflector|undefined;
+  _errors: {e: any, path?: string}[] = [];
+  _resolver: CompileMetadataResolver|undefined;
+  // TODO(issue/24571): remove '!'.
+  _refletor !: StaticReflector;
+  // tslint:enable
+
+  constructor(
+      public service: ts.LanguageService, public program: ts.Program,
+      public checker: ts.TypeChecker, public host: StaticSymbolResolverHost) {}
+
+  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, htmlParser, 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 programFiles = this.program.getSourceFiles().map(sf => sf.fileName);
+      analyzedModules = this._analyzedModules =
+          analyzeNgModules(programFiles, analyzeHost, this.staticSymbolResolver, 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);
+      if (sourceFile) {
+        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/typescript_symbols_spec.ts b/packages/compiler-cli/test/diagnostics/typescript_symbols_spec.ts
new file mode 100644
index 000000000000..bef8bd2fd3e4
--- /dev/null
+++ b/packages/compiler-cli/test/diagnostics/typescript_symbols_spec.ts
@@ -0,0 +1,123 @@
+/**
+ * @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 {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 {ReflectorHost} from '@angular/language-service/src/reflector_host';
+import * as ts from 'typescript';
+
+import {Symbol, SymbolQuery, SymbolTable} from '../../src/diagnostics/symbols';
+import {getSymbolQuery, toSymbolTableFactory} from '../../src/diagnostics/typescript_symbols';
+import {CompilerOptions} from '../../src/transformers/api';
+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: CompilerOptions = Object.create(host.getCompilationSettings());
+    options.genDir = '/dist';
+    options.basePath = '/quickstart';
+    const symbolResolverHost = new ReflectorHost(() => program, host, options);
+    context = new DiagnosticContext(service, program, checker, symbolResolverHost);
+    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();
+  });
+});
+
+describe('toSymbolTableFactory(tsVersion)', () => {
+  it('should return a Map for versions of TypeScript >= 2.2 and a dictionary otherwise', () => {
+    const a = { name: 'a' } as ts.Symbol;
+    const b = { name: 'b' } as ts.Symbol;
+
+    expect(toSymbolTableFactory('2.1')([a, b]) instanceof Map).toEqual(false);
+    expect(toSymbolTableFactory('2.4')([a, b]) instanceof Map).toEqual(true);
+
+    // Check that for the lower bound version `2.2`, toSymbolTableFactory('2.2') returns a map
+    expect(toSymbolTableFactory('2.2')([a, b]) instanceof Map).toEqual(true);
+  });
+});
+
+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/diagnostics/typescript_version_spec.ts b/packages/compiler-cli/test/diagnostics/typescript_version_spec.ts
new file mode 100644
index 000000000000..605b3e1ed79c
--- /dev/null
+++ b/packages/compiler-cli/test/diagnostics/typescript_version_spec.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 {compareNumbers, compareVersions, isVersionBetween, toNumbers} from '../../src/diagnostics/typescript_version';
+
+
+describe('toNumbers', () => {
+  it('should handle strings', () => {
+    expect(toNumbers('2')).toEqual([2]);
+    expect(toNumbers('2.1')).toEqual([2, 1]);
+    expect(toNumbers('2.0.1')).toEqual([2, 0, 1]);
+  });
+});
+
+describe('compareNumbers', () => {
+
+  it('should handle empty arrays', () => { expect(compareNumbers([], [])).toEqual(0); });
+
+  it('should handle arrays of same length', () => {
+    expect(compareNumbers([1], [3])).toEqual(-1);
+    expect(compareNumbers([3], [1])).toEqual(1);
+
+    expect(compareNumbers([1, 0], [1, 0])).toEqual(0);
+
+    expect(compareNumbers([1, 1], [1, 0])).toEqual(1);
+    expect(compareNumbers([1, 0], [1, 1])).toEqual(-1);
+
+    expect(compareNumbers([1, 0, 9], [1, 1, 0])).toEqual(-1);
+    expect(compareNumbers([1, 1, 0], [1, 0, 9])).toEqual(1);
+  });
+
+  it('should handle arrays of different length', () => {
+    expect(compareNumbers([2], [2, 1])).toEqual(-1);
+    expect(compareNumbers([2, 1], [2])).toEqual(1);
+
+    expect(compareNumbers([0, 9], [1])).toEqual(-1);
+    expect(compareNumbers([1], [0, 9])).toEqual(1);
+
+    expect(compareNumbers([2], [])).toEqual(1);
+    expect(compareNumbers([], [2])).toEqual(-1);
+
+    expect(compareNumbers([1, 0], [1, 0, 0, 0])).toEqual(0);
+  });
+});
+
+describe('isVersionBetween', () => {
+  it('should correctly check if a typescript version is within a given range', () => {
+    expect(isVersionBetween('2.7.0', '2.40')).toEqual(false);
+    expect(isVersionBetween('2.40', '2.7.0')).toEqual(true);
+
+    expect(isVersionBetween('2.7.2', '2.7.0', '2.8.0')).toEqual(true);
+
+    expect(isVersionBetween('2.7.2', '2.7.7', '2.8.0')).toEqual(false);
+  });
+});
+
+describe('compareVersions', () => {
+  it('should correctly compare versions', () => {
+    expect(compareVersions('2.7.0', '2.40')).toEqual(-1);
+    expect(compareVersions('2.40', '2.7.0')).toEqual(1);
+    expect(compareVersions('2.40', '2.40')).toEqual(0);
+    expect(compareVersions('2.40', '2.41')).toEqual(-1);
+    expect(compareVersions('2', '2.1')).toEqual(-1);
+  });
+});
diff --git a/packages/compiler-cli/test/extract_i18n_spec.ts b/packages/compiler-cli/test/extract_i18n_spec.ts
new file mode 100644
index 000000000000..3a03392b11b7
--- /dev/null
+++ b/packages/compiler-cli/test/extract_i18n_spec.ts
@@ -0,0 +1,411 @@
+/**
+ * @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 fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {mainXi18n} from '../src/extract_i18n';
+
+import {isInBazel, makeTempDir, setup} from './test_support';
+
+function getNgRootDir() {
+  const moduleFilename = module.filename.replace(/\\/g, '/');
+  const distIndex = moduleFilename.indexOf('/dist/all');
+  return moduleFilename.substr(0, distIndex);
+}
+
+const EXPECTED_XMB = `<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE messagebundle [
+<!ELEMENT messagebundle (msg)*>
+<!ATTLIST messagebundle class CDATA #IMPLIED>
+
+<!ELEMENT msg (#PCDATA|ph|source)*>
+<!ATTLIST msg id CDATA #IMPLIED>
+<!ATTLIST msg seq CDATA #IMPLIED>
+<!ATTLIST msg name CDATA #IMPLIED>
+<!ATTLIST msg desc CDATA #IMPLIED>
+<!ATTLIST msg meaning CDATA #IMPLIED>
+<!ATTLIST msg obsolete (obsolete) #IMPLIED>
+<!ATTLIST msg xml:space (default|preserve) "default">
+<!ATTLIST msg is_hidden CDATA #IMPLIED>
+
+<!ELEMENT source (#PCDATA)>
+
+<!ELEMENT ph (#PCDATA|ex)*>
+<!ATTLIST ph name CDATA #REQUIRED>
+
+<!ELEMENT ex (#PCDATA)>
+]>
+<messagebundle>
+  <msg id="8136548302122759730" desc="desc" meaning="meaning"><source>src/basic.html:1</source><source>src/comp2.ts:1</source><source>src/basic.html:1</source>translate me</msg>
+  <msg id="9038505069473852515"><source>src/basic.html:3,4</source><source>src/comp2.ts:3,4</source><source>src/comp2.ts:2,3</source><source>src/basic.html:3,4</source>
+    Welcome</msg>
+  <msg id="5611534349548281834" desc="with ICU"><source>src/icu.html:1,3</source><source>src/icu.html:5</source>{VAR_PLURAL, plural, =1 {book} other {books} }</msg>
+  <msg id="5811701742971715242" desc="with ICU and other things"><source>src/icu.html:4,6</source>
+     foo <ph name="ICU"><ex>{ count, plural, =1 {...} other {...}}</ex>{ count, plural, =1 {...} other {...}}</ph>
+    </msg>
+  <msg id="7254052530614200029" desc="with placeholders"><source>src/placeholders.html:1</source>Name: <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex>&lt;b&gt;</ph><ph name="NAME"><ex>{{
+      name // i18n(ph=&quot;name&quot;)
+    }}</ex>{{
+      name // i18n(ph=&quot;name&quot;)
+    }}</ph><ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex>&lt;/b&gt;</ph></msg>
+</messagebundle>
+`;
+
+const EXPECTED_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="fr" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="76e1eccb1b772fa9f294ef9c146ea6d0efa8a2d4" datatype="html">
+        <source>translate me</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/basic.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/comp2.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/basic.html</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="085a5ecc40cc87451d216725b2befd50866de18a" datatype="html">
+        <source>
+    Welcome</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/basic.html</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/comp2.ts</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/comp2.ts</context>
+          <context context-type="linenumber">2</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/basic.html</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="83937c05b1216e7f4c02a85454260e28fd72d1e3" datatype="html">
+        <source>{VAR_PLURAL, plural, =1 {book} other {books} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/icu.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+        <note priority="1" from="description">with ICU</note>
+      </trans-unit>
+      <trans-unit id="540c5f481129419ef21017f396b6c2d0869ca4d2" datatype="html">
+        <source>
+     foo <x id="ICU" equiv-text="{ count, plural, =1 {...} other {...}}"/>
+    </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/icu.html</context>
+          <context context-type="linenumber">4</context>
+        </context-group>
+        <note priority="1" from="description">with ICU and other things</note>
+      </trans-unit>
+      <trans-unit id="ca7678090fddd04441d63b1218177af65f23342d" datatype="html">
+        <source>{VAR_PLURAL, plural, =1 {book} other {books} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/icu.html</context>
+          <context context-type="linenumber">5</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="9311399c1ca7c75f771d77acb129e50581c6ec1f" datatype="html">
+        <source>Name: <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="NAME" equiv-text="{{
+      name // i18n(ph=&quot;name&quot;)
+    }}"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/placeholders.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+        <note priority="1" from="description">with placeholders</note>
+      </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.html:1</note>
+        <note category="location">src/comp2.ts:1</note>
+        <note category="location">src/basic.html:1</note>
+      </notes>
+      <segment>
+        <source>translate me</source>
+      </segment>
+    </unit>
+    <unit id="9038505069473852515">
+      <notes>
+        <note category="location">src/basic.html:3,4</note>
+        <note category="location">src/comp2.ts:3,4</note>
+        <note category="location">src/comp2.ts:2,3</note>
+        <note category="location">src/basic.html:3,4</note>
+      </notes>
+      <segment>
+        <source>
+    Welcome</source>
+      </segment>
+    </unit>
+    <unit id="5611534349548281834">
+      <notes>
+        <note category="description">with ICU</note>
+        <note category="location">src/icu.html:1,3</note>
+        <note category="location">src/icu.html:5</note>
+      </notes>
+      <segment>
+        <source>{VAR_PLURAL, plural, =1 {book} other {books} }</source>
+      </segment>
+    </unit>
+    <unit id="5811701742971715242">
+      <notes>
+        <note category="description">with ICU and other things</note>
+        <note category="location">src/icu.html:4,6</note>
+      </notes>
+      <segment>
+        <source>
+     foo <ph id="0" equiv="ICU" disp="{ count, plural, =1 {...} other {...}}"/>
+    </source>
+      </segment>
+    </unit>
+    <unit id="7254052530614200029">
+      <notes>
+        <note category="description">with placeholders</note>
+        <note category="location">src/placeholders.html:1</note>
+      </notes>
+      <segment>
+        <source>Name: <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"><ph id="1" equiv="NAME" disp="{{
+      name // i18n(ph=&quot;name&quot;)
+    }}"/></pc></source>
+      </segment>
+    </unit>
+  </file>
+</xliff>
+`;
+
+describe('extract_i18n command line', () => {
+  let basePath: string;
+  let outDir: string;
+  let write: (fileName: string, content: string) => void;
+  let errorSpy: jasmine.Spy&((s: string) => void);
+
+  function writeConfig(tsconfig = '{"extends": "./tsconfig-base.json"}') {
+    write('tsconfig.json', tsconfig);
+  }
+
+  beforeEach(() => {
+    errorSpy = jasmine.createSpy('consoleError').and.callFake(console.error);
+    if (isInBazel()) {
+      const support = setup();
+      write = (fileName: string, content: string) => { support.write(fileName, content); };
+      basePath = support.basePath;
+      outDir = path.join(basePath, 'built');
+    } else {
+      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'});
+      };
+      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'));
+    }
+    write('tsconfig-base.json', `{
+      "compilerOptions": {
+        "experimentalDecorators": true,
+        "skipLibCheck": true,
+        "noImplicitAny": true,
+        "types": [],
+        "outDir": "built",
+        "rootDir": ".",
+        "baseUrl": ".",
+        "declaration": true,
+        "target": "es5",
+        "module": "es2015",
+        "moduleResolution": "node",
+        "lib": ["es6", "dom"],
+        "typeRoots": ["node_modules/@types"]
+      }
+    }`);
+  });
+
+  function writeSources() {
+    const welcomeMessage = `
+    <!--i18n-->
+    Welcome<!--/i18n-->
+    `;
+    write('src/basic.html', `<div title="translate me" i18n-title="meaning|desc"></div>
+         <p id="welcomeMessage">${welcomeMessage}</p>`);
+
+    write('src/comp1.ts', `
+    import {Component} from '@angular/core';
+
+    @Component({
+      selector: 'basic',
+      templateUrl: './basic.html',
+    })
+    export class BasicCmp1 {}`);
+
+    write('src/comp2.ts', `
+    import {Component} from '@angular/core';
+
+    @Component({
+      selector: 'basic2',
+      template: \`<div title="translate me" i18n-title="meaning|desc"></div>
+      <p id="welcomeMessage">${welcomeMessage}</p>\`,
+    })
+    export class BasicCmp2 {}
+    @Component({
+      selector: 'basic4',
+      template: \`<p id="welcomeMessage">${welcomeMessage}</p>\`,
+    })
+    export class BasicCmp4 {}`);
+
+    write('src/comp3.ts', `
+    import {Component} from '@angular/core';
+
+    @Component({
+      selector: 'basic3',
+      templateUrl: './basic.html',
+    })
+    export class BasicCmp3 {}`);
+
+    write('src/placeholders.html', `<div i18n="with placeholders">Name: <b>{{
+      name // i18n(ph="name")
+    }}</b></div>`);
+
+    write('src/placeholder_cmp.ts', `
+    import {Component} from '@angular/core';
+
+    @Component({
+      selector: 'placeholders',
+      templateUrl: './placeholders.html',
+    })
+    export class PlaceholderCmp { name = 'whatever'; }`);
+
+    write('src/icu.html', `<div i18n="with ICU">{
+      count, plural, =1 {book} other {books}
+    }</div>
+    <div i18n="with ICU and other things">
+     foo { count, plural, =1 {book} other {books} }
+    </div>`);
+
+    write('src/icu_cmp.ts', `
+    import {Component} from '@angular/core';
+
+    @Component({
+      selector: 'icu',
+      templateUrl: './icu.html',
+    })
+    export class IcuCmp { count = 3; }`);
+
+    write('src/module.ts', `
+    import {NgModule} from '@angular/core';
+    import {CommonModule} from '@angular/common';
+    import {BasicCmp1} from './comp1';
+    import {BasicCmp2, BasicCmp4} from './comp2';
+    import {BasicCmp3} from './comp3';
+    import {PlaceholderCmp} from './placeholder_cmp';
+    import {IcuCmp} from './icu_cmp';
+
+    @NgModule({
+      declarations: [
+        BasicCmp1,
+        BasicCmp2,
+        BasicCmp3,
+        BasicCmp4,
+        PlaceholderCmp,
+        IcuCmp,
+      ],
+      imports: [CommonModule],
+    })
+    export class I18nModule {}
+    `);
+  }
+
+  it('should extract xmb', () => {
+    writeConfig();
+    writeSources();
+
+    const exitCode =
+        mainXi18n(['-p', basePath, '--i18nFormat=xmb', '--outFile=custom_file.xmb'], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const xmbOutput = path.join(outDir, 'custom_file.xmb');
+    expect(fs.existsSync(xmbOutput)).toBeTruthy();
+    const xmb = fs.readFileSync(xmbOutput, {encoding: 'utf-8'});
+    expect(xmb).toEqual(EXPECTED_XMB);
+  });
+
+  it('should extract xlf', () => {
+    writeConfig();
+    writeSources();
+
+    const exitCode = mainXi18n(['-p', basePath, '--i18nFormat=xlf', '--locale=fr'], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const xlfOutput = path.join(outDir, 'messages.xlf');
+    expect(fs.existsSync(xlfOutput)).toBeTruthy();
+    const xlf = fs.readFileSync(xlfOutput, {encoding: 'utf-8'});
+    expect(xlf).toEqual(EXPECTED_XLIFF);
+  });
+
+  it('should extract xlf2', () => {
+    writeConfig();
+    writeSources();
+
+    const exitCode =
+        mainXi18n(['-p', basePath, '--i18nFormat=xlf2', '--outFile=messages.xliff2.xlf'], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(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', () => {
+    writeConfig();
+    writeSources();
+
+    const exitCode =
+        mainXi18n(['-p', basePath, '--i18nFormat=xlf2', '--outFile=messages.xliff2.xlf'], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const moduleOutput = path.join(outDir, 'src', 'module.js');
+    expect(fs.existsSync(moduleOutput)).toBeFalsy();
+  });
+});
diff --git a/packages/compiler-cli/test/metadata/BUILD.bazel b/packages/compiler-cli/test/metadata/BUILD.bazel
new file mode 100644
index 000000000000..a54dd2c69d6e
--- /dev/null
+++ b/packages/compiler-cli/test/metadata/BUILD.bazel
@@ -0,0 +1,27 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+        "//packages/compiler-cli/test:test_utils",
+        "//packages/core",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+    ],
+    deps = [
+        ":test_lib",
+        "//packages/core",
+        "//tools/testing:node",
+    ],
+)
diff --git a/packages/compiler-cli/test/metadata/bundler_spec.ts b/packages/compiler-cli/test/metadata/bundler_spec.ts
new file mode 100644
index 000000000000..bf51f8370667
--- /dev/null
+++ b/packages/compiler-cli/test/metadata/bundler_spec.ts
@@ -0,0 +1,482 @@
+/**
+ * @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 path from 'path';
+import * as ts from 'typescript';
+
+import {CompilerHostAdapter, MetadataBundler, MetadataBundlerHost} from '../../src/metadata/bundler';
+import {MetadataCollector} from '../../src/metadata/collector';
+import {ClassMetadata, MetadataGlobalReferenceExpression, ModuleMetadata} from '../../src/metadata/schema';
+import {Directory, MockAotContext, MockCompilerHost} from '../mocks';
+
+describe('compiler host adapter', () => {
+
+  it('should retrieve metadata for an explicit index relative path reference', () => {
+    const context = new MockAotContext('.', SIMPLE_LIBRARY);
+    const host = new MockCompilerHost(context);
+    const options: ts.CompilerOptions = {
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+      module: ts.ModuleKind.CommonJS,
+      target: ts.ScriptTarget.ES5,
+    };
+    const adapter = new CompilerHostAdapter(host, null, options);
+    const metadata = adapter.getMetadataFor('./lib/src/two/index', '.');
+
+    expect(metadata).toBeDefined();
+    expect(Object.keys(metadata !.metadata).sort()).toEqual([
+      'PrivateTwo',
+      'TWO_CLASSES',
+      'Two',
+      'TwoMore',
+    ]);
+  });
+
+  it('should retrieve metadata for an implied index relative path reference', () => {
+    const context = new MockAotContext('.', SIMPLE_LIBRARY_WITH_IMPLIED_INDEX);
+    const host = new MockCompilerHost(context);
+    const options: ts.CompilerOptions = {
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+      module: ts.ModuleKind.CommonJS,
+      target: ts.ScriptTarget.ES5,
+    };
+    const adapter = new CompilerHostAdapter(host, null, options);
+    const metadata = adapter.getMetadataFor('./lib/src/two', '.');
+
+    expect(metadata).toBeDefined();
+    expect(Object.keys(metadata !.metadata).sort()).toEqual([
+      'PrivateTwo',
+      'TWO_CLASSES',
+      'Two',
+      'TwoMore',
+    ]);
+  });
+
+  it('should fail to retrieve metadata for an implied index with classic module resolution', () => {
+    const context = new MockAotContext('.', SIMPLE_LIBRARY_WITH_IMPLIED_INDEX);
+    const host = new MockCompilerHost(context);
+    const options: ts.CompilerOptions = {
+      moduleResolution: ts.ModuleResolutionKind.Classic,
+      module: ts.ModuleKind.CommonJS,
+      target: ts.ScriptTarget.ES5,
+    };
+    const adapter = new CompilerHostAdapter(host, null, options);
+    const metadata = adapter.getMetadataFor('./lib/src/two', '.');
+
+    expect(metadata).toBeUndefined();
+  });
+
+  it('should retrieve exports for an explicit index relative path reference', () => {
+    const context = new MockAotContext('.', SIMPLE_LIBRARY);
+    const host = new MockCompilerHost(context);
+    const options: ts.CompilerOptions = {
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+      module: ts.ModuleKind.CommonJS,
+      target: ts.ScriptTarget.ES5,
+    };
+    const adapter = new CompilerHostAdapter(host, null, options);
+    const metadata = adapter.getMetadataFor('./lib/src/index', '.');
+
+    expect(metadata).toBeDefined();
+    expect(metadata !.exports !.map(e => e.export !)
+               .reduce((prev, next) => prev.concat(next), [])
+               .sort())
+        .toEqual([
+          'ONE_CLASSES',
+          'One',
+          'OneMore',
+          'TWO_CLASSES',
+          'Two',
+          'TwoMore',
+        ]);
+  });
+
+  it('should look for .ts file when resolving metadata via a package.json "main" entry', () => {
+    const files = {
+      'lib': {
+        'one.ts': `
+          class One {}
+          class OneMore extends One {}
+          class PrivateOne {}
+          const ONE_CLASSES = [One, OneMore, PrivateOne];
+          export {One, OneMore, PrivateOne, ONE_CLASSES};
+        `,
+        'one.js': `
+          // This will throw an error if the metadata collector tries to load one.js
+        `,
+        'package.json': `
+        {
+          "main": "one"
+        }
+        `
+      }
+    };
+
+    const context = new MockAotContext('.', files);
+    const host = new MockCompilerHost(context);
+    const options: ts.CompilerOptions = {
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+      module: ts.ModuleKind.CommonJS,
+      target: ts.ScriptTarget.ES5,
+    };
+    const adapter = new CompilerHostAdapter(host, null, options);
+    const metadata = adapter.getMetadataFor('./lib', '.');
+
+    expect(metadata).toBeDefined();
+    expect(Object.keys(metadata !.metadata).sort()).toEqual([
+      'ONE_CLASSES',
+      'One',
+      'OneMore',
+      'PrivateOne',
+    ]);
+    expect(Array.isArray(metadata !.metadata !['ONE_CLASSES'])).toBeTruthy();
+  });
+
+  it('should look for non-declaration file when resolving metadata via a package.json "types" entry',
+     () => {
+       const files = {
+         'lib': {
+           'one.ts': `
+          class One {}
+          class OneMore extends One {}
+          class PrivateOne {}
+          const ONE_CLASSES = [One, OneMore, PrivateOne];
+          export {One, OneMore, PrivateOne, ONE_CLASSES};
+        `,
+           'one.d.ts': `
+          declare class One {
+          }
+          declare class OneMore extends One {
+          }
+          declare class PrivateOne {
+          }
+          declare const ONE_CLASSES: (typeof One)[];
+          export { One, OneMore, PrivateOne, ONE_CLASSES };
+        `,
+           'one.js': `
+          // This will throw an error if the metadata collector tries to load one.js
+        `,
+           'package.json': `
+        {
+          "main": "one",
+          "types": "one.d.ts"
+        }
+        `
+         }
+       };
+
+       const context = new MockAotContext('.', files);
+       const host = new MockCompilerHost(context);
+       const options: ts.CompilerOptions = {
+         moduleResolution: ts.ModuleResolutionKind.NodeJs,
+         module: ts.ModuleKind.CommonJS,
+         target: ts.ScriptTarget.ES5,
+       };
+       const adapter = new CompilerHostAdapter(host, null, options);
+       const metadata = adapter.getMetadataFor('./lib', '.');
+
+       expect(metadata).toBeDefined();
+       expect(Object.keys(metadata !.metadata).sort()).toEqual([
+         'ONE_CLASSES',
+         'One',
+         'OneMore',
+         'PrivateOne',
+       ]);
+       expect(Array.isArray(metadata !.metadata !['ONE_CLASSES'])).toBeTruthy();
+
+     });
+});
+
+describe('metadata bundler', () => {
+
+  it('should be able to bundle a simple library', () => {
+    const host = new MockStringBundlerHost('/', SIMPLE_LIBRARY);
+    const bundler = new MetadataBundler('/lib/index', undefined, host, 'prfx_');
+    const result = bundler.getMetadataBundle();
+    expect(Object.keys(result.metadata.metadata).sort()).toEqual([
+      'ONE_CLASSES', 'One', 'OneMore', 'TWO_CLASSES', 'Two', 'TwoMore', 'ɵprfx_a', 'ɵprfx_b'
+    ]);
+
+    const originalOne = './src/one';
+    const originalTwo = './src/two/index';
+    expect(Object.keys(result.metadata.origins !)
+               .sort()
+               .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},
+          {name: 'Two', value: originalTwo}, {name: 'TwoMore', value: originalTwo},
+          {name: 'ɵprfx_a', value: originalOne}, {name: 'ɵprfx_b', value: originalTwo}
+        ]);
+    expect(result.privates).toEqual([
+      {privateName: 'ɵprfx_a', name: 'PrivateOne', module: originalOne},
+      {privateName: 'ɵprfx_b', name: 'PrivateTwo', module: originalTwo}
+    ]);
+  });
+
+  it('should be able to bundle an oddly constructed library', () => {
+    const host = new MockStringBundlerHost('/', {
+      'lib': {
+        'index.ts': `
+          export * from './src/index';
+        `,
+        'src': {
+          'index.ts': `
+            export {One, OneMore, ONE_CLASSES} from './one';
+            export {Two, TwoMore, TWO_CLASSES} from './two/index';
+          `,
+          'one.ts': `
+            class One {}
+            class OneMore extends One {}
+            class PrivateOne {}
+            const ONE_CLASSES = [One, OneMore, PrivateOne];
+            export {One, OneMore, PrivateOne, ONE_CLASSES};
+          `,
+          'two': {
+            'index.ts': `
+              class Two {}
+              class TwoMore extends Two {}
+              class PrivateTwo {}
+              const TWO_CLASSES = [Two, TwoMore, PrivateTwo];
+              export {Two, TwoMore, PrivateTwo, TWO_CLASSES};
+            `
+          }
+        }
+      }
+    });
+    const bundler = new MetadataBundler('/lib/index', undefined, host);
+    const result = bundler.getMetadataBundle();
+    expect(Object.keys(result.metadata.metadata).sort()).toEqual([
+      'ONE_CLASSES', 'One', 'OneMore', 'TWO_CLASSES', 'Two', 'TwoMore', 'ɵa', 'ɵb'
+    ]);
+    expect(result.privates).toEqual([
+      {privateName: 'ɵa', name: 'PrivateOne', module: './src/one'},
+      {privateName: 'ɵb', name: 'PrivateTwo', module: './src/two/index'}
+    ]);
+  });
+
+  it('should not output windows paths in metadata', () => {
+    const host = new MockStringBundlerHost('/', {
+      'index.ts': `
+        export * from './exports/test';
+      `,
+      'exports': {'test.ts': `export class TestExport {}`}
+    });
+    const bundler = new MetadataBundler('/index', undefined, host);
+    const result = bundler.getMetadataBundle();
+
+    expect(result.metadata.origins).toEqual({'TestExport': './exports/test'});
+  });
+
+  it('should convert re-exported to the export', () => {
+    const host = new MockStringBundlerHost('/', {
+      'index.ts': `
+        export * from './bar';
+        export * from './foo';
+      `,
+      'bar.ts': `
+        import {Foo} from './foo';
+        export class Bar extends Foo {
+
+        }
+      `,
+      'foo.ts': `
+        export {Foo} from 'foo';
+      `
+    });
+    const bundler = new MetadataBundler('/index', undefined, host);
+    const result = bundler.getMetadataBundle();
+    // Expect the extends reference to refer to the imported module
+    expect((result.metadata.metadata as any).Bar.extends.module).toEqual('foo');
+    expect(result.privates).toEqual([]);
+  });
+
+  it('should treat import then export as a simple export', () => {
+    const host = new MockStringBundlerHost('/', {
+      'index.ts': `
+        export * from './a';
+        export * from './c';
+      `,
+      'a.ts': `
+        import { B } from './b';
+        export { B };
+      `,
+      'b.ts': `
+        export class B { }
+      `,
+      'c.ts': `
+        import { B } from './b';
+        export class C extends B { }
+      `
+    });
+    const bundler = new MetadataBundler('/index', undefined, host);
+    const result = bundler.getMetadataBundle();
+    expect(Object.keys(result.metadata.metadata).sort()).toEqual(['B', 'C']);
+    expect(result.privates).toEqual([]);
+  });
+
+  it('should be able to bundle a private from a un-exported module', () => {
+    const host = new MockStringBundlerHost('/', {
+      'index.ts': `
+        export * from './foo';
+      `,
+      'foo.ts': `
+        import {Bar} from './bar';
+        export class Foo extends Bar {
+
+        }
+      `,
+      'bar.ts': `
+        export class Bar {}
+      `
+    });
+    const bundler = new MetadataBundler('/index', undefined, host);
+    const result = bundler.getMetadataBundle();
+    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();
+  });
+
+  it('should be able to de-duplicate symbols of re-exported modules', () => {
+    const host = new MockStringBundlerHost('/', {
+      'public-api.ts': `
+        export {A as A2, A, B as B1, B as B2} from './src/core';
+        export {A as A3} from './src/alternate';
+      `,
+      'src': {
+        'core.ts': `
+          export class A {}
+          export class B {}
+        `,
+        'alternate.ts': `
+          export class A {}
+        `,
+      }
+    });
+
+    const bundler = new MetadataBundler('/public-api', undefined, host);
+    const result = bundler.getMetadataBundle();
+    const {A, A2, A3, B1, B2} = result.metadata.metadata as{
+      A: ClassMetadata,
+      A2: MetadataGlobalReferenceExpression,
+      A3: ClassMetadata,
+      B1: ClassMetadata,
+      B2: MetadataGlobalReferenceExpression
+    };
+    expect(A.__symbolic).toEqual('class');
+    expect(A2.__symbolic).toEqual('reference');
+    expect(A2.name).toEqual('A');
+    expect(A3.__symbolic).toEqual('class');
+    expect(B1.__symbolic).toEqual('class');
+    expect(B2.__symbolic).toEqual('reference');
+    expect(B2.name).toEqual('B1');
+  });
+});
+
+export class MockStringBundlerHost implements MetadataBundlerHost {
+  collector = new MetadataCollector();
+  adapter: CompilerHostAdapter;
+
+  constructor(private dirName: string, directory: Directory) {
+    const context = new MockAotContext(dirName, directory);
+    const host = new MockCompilerHost(context);
+    const options = {
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+      module: ts.ModuleKind.CommonJS,
+      target: ts.ScriptTarget.ES5,
+    };
+    this.adapter = new CompilerHostAdapter(host, null, options);
+  }
+
+  getMetadataFor(moduleName: string): ModuleMetadata|undefined {
+    return this.adapter.getMetadataFor(moduleName, this.dirName);
+  }
+}
+
+export const SIMPLE_LIBRARY = {
+  'lib': {
+    'index.ts': `
+      export * from './src/index';
+    `,
+    'src': {
+      'index.ts': `
+        export {One, OneMore, ONE_CLASSES} from './one';
+        export {Two, TwoMore, TWO_CLASSES} from './two/index';
+      `,
+      'one.ts': `
+        export class One {}
+        export class OneMore extends One {}
+        export class PrivateOne {}
+        export const ONE_CLASSES = [One, OneMore, PrivateOne];
+      `,
+      'two': {
+        'index.ts': `
+          export class Two {}
+          export class TwoMore extends Two {}
+          export class PrivateTwo {}
+          export const TWO_CLASSES = [Two, TwoMore, PrivateTwo];
+        `
+      }
+    }
+  }
+};
+
+export const SIMPLE_LIBRARY_WITH_IMPLIED_INDEX = {
+  'lib': {
+    'index.ts': `
+      export * from './src';
+    `,
+    'src': {
+      'index.ts': `
+        export {One, OneMore, ONE_CLASSES} from './one';
+        export {Two, TwoMore, TWO_CLASSES} from './two';
+      `,
+      'one.ts': `
+        export class One {}
+        export class OneMore extends One {}
+        export class PrivateOne {}
+        export const ONE_CLASSES = [One, OneMore, PrivateOne];
+      `,
+      'two': {
+        'index.ts': `
+          export class Two {}
+          export class TwoMore extends Two {}
+          export class PrivateTwo {}
+          export const TWO_CLASSES = [Two, TwoMore, PrivateTwo];
+        `
+      }
+    }
+  }
+};
diff --git a/packages/compiler-cli/test/metadata/collector_spec.ts b/packages/compiler-cli/test/metadata/collector_spec.ts
new file mode 100644
index 000000000000..138473d7f124
--- /dev/null
+++ b/packages/compiler-cli/test/metadata/collector_spec.ts
@@ -0,0 +1,1634 @@
+/**
+ * @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 ts from 'typescript';
+
+import {MetadataCollector} from '../../src/metadata/collector';
+import {ClassMetadata, ConstructorMetadata, METADATA_VERSION, MetadataEntry, MetadataMap, MetadataSymbolicExpression, ModuleMetadata, isClassMetadata, isMetadataGlobalReferenceExpression} from '../../src/metadata/schema';
+
+import {Directory, Host, expectValidSources} from './typescript.mocks';
+
+describe('Collector', () => {
+  const documentRegistry = ts.createDocumentRegistry();
+  let host: Host;
+  let service: ts.LanguageService;
+  let program: ts.Program;
+  let collector: MetadataCollector;
+
+  beforeEach(() => {
+    host = new Host(FILES, [
+      '/app/app.component.ts',    '/app/cases-data.ts',
+      '/app/error-cases.ts',      '/promise.ts',
+      '/unsupported-1.ts',        '/unsupported-2.ts',
+      '/unsupported-3.ts',        'class-arity.ts',
+      'declarations.d.ts',        'import-star.ts',
+      'exported-classes.ts',      'exported-functions.ts',
+      'exported-enum.ts',         'exported-type.ts',
+      'exported-consts.ts',       'local-symbol-ref.ts',
+      'local-function-ref.ts',    'local-symbol-ref-func.ts',
+      'private-enum.ts',          're-exports.ts',
+      're-exports-2.ts',          'export-as.d.ts',
+      'named-module.d.ts',        'static-field-reference.ts',
+      'static-method.ts',         'static-method-call.ts',
+      'static-method-with-if.ts', 'static-method-with-default.ts',
+      'class-inheritance.ts',     'class-inheritance-parent.ts',
+      'interface-reference.ts'
+    ]);
+    service = ts.createLanguageService(host, documentRegistry);
+    program = service.getProgram();
+    collector = new MetadataCollector({quotedNames: true});
+  });
+
+  it('should not have errors in test data', () => { expectValidSources(service, program); });
+
+  it('should return undefined for modules that have no metadata', () => {
+    const sourceFile = program.getSourceFile('app/empty.ts') !;
+    const metadata = collector.getMetadata(sourceFile);
+    expect(metadata).toBeUndefined();
+  });
+
+  it('should treat all symbols of .d.ts files as exported', () => {
+    const sourceFile = program.getSourceFile('declarations.d.ts') !;
+    const metadata = collector.getMetadata(sourceFile);
+    expect(metadata).toEqual({
+      __symbolic: 'module',
+      version: METADATA_VERSION,
+      metadata: {
+        DeclaredClass: {__symbolic: 'class'},
+        declaredFn: {__symbolic: 'function'},
+      }
+    });
+  });
+
+  it('should return an interface reference for types', () => {
+    const sourceFile = program.getSourceFile('/exported-type.ts') !;
+    const metadata = collector.getMetadata(sourceFile);
+    expect(metadata).toEqual({
+      __symbolic: 'module',
+      version: METADATA_VERSION,
+      metadata: {SomeType: {__symbolic: 'interface'}}
+    });
+  });
+
+  it('should return an interface reference for interfaces', () => {
+    const sourceFile = program.getSourceFile('app/hero.ts') !;
+    const metadata = collector.getMetadata(sourceFile);
+    expect(metadata).toEqual({
+      __symbolic: 'module',
+      version: METADATA_VERSION,
+      metadata: {Hero: {__symbolic: 'interface'}}
+    });
+  });
+
+  it('should preserve module names from TypeScript sources', () => {
+    const sourceFile = program.getSourceFile('named-module.d.ts') !;
+    const metadata = collector.getMetadata(sourceFile);
+    expect(metadata !['importAs']).toEqual('some-named-module');
+  });
+
+  it('should be able to collect a simple component\'s metadata', () => {
+    const sourceFile = program.getSourceFile('app/hero-detail.component.ts') !;
+    const metadata = collector.getMetadata(sourceFile);
+    expect(metadata).toEqual({
+      __symbolic: 'module',
+      version: METADATA_VERSION,
+      metadata: {
+        HeroDetailComponent: {
+          __symbolic: 'class',
+          decorators: [{
+            __symbolic: 'call',
+            expression: {
+              __symbolic: 'reference',
+              module: 'angular2/core',
+              name: 'Component',
+              line: 4,
+              character: 7
+            },
+            arguments: [{
+              selector: 'my-hero-detail',
+              template: `
+        <div *ngIf="hero">
+          <h2>{{hero.name}} details!</h2>
+          <div><label>id: </label>{{hero.id}}</div>
+          <div>
+            <label>name: </label>
+            <input [(ngModel)]="hero.name" placeholder="name"/>
+          </div>
+        </div>
+      `
+            }]
+          }],
+          members: {
+            hero: [{
+              __symbolic: 'property',
+              decorators: [{
+                __symbolic: 'call',
+                expression: {
+                  __symbolic: 'reference',
+                  module: 'angular2/core',
+                  name: 'Input',
+                  line: 18,
+                  character: 9
+                }
+              }]
+            }]
+          }
+        }
+      }
+    });
+  });
+
+  it('should be able to get a more complicated component\'s metadata', () => {
+    const sourceFile = program.getSourceFile('/app/app.component.ts') !;
+    const metadata = collector.getMetadata(sourceFile);
+    expect(metadata).toEqual({
+      __symbolic: 'module',
+      version: METADATA_VERSION,
+      metadata: {
+        AppComponent: {
+          __symbolic: 'class',
+          decorators: [{
+            __symbolic: 'call',
+            expression: {
+              __symbolic: 'reference',
+              module: 'angular2/core',
+              name: 'Component',
+              line: 9,
+              character: 7
+            },
+            arguments: [{
+              selector: 'my-app',
+              template: `
+        <h2>My Heroes</h2>
+        <ul class="heroes">
+          <li *ngFor="#hero of heroes"
+            (click)="onSelect(hero)"
+            [class.selected]="hero === selectedHero">
+            <span class="badge">{{hero.id | lowercase}}</span> {{hero.name | uppercase}}
+          </li>
+        </ul>
+        <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+        `,
+              directives: [
+                {
+                  __symbolic: 'reference',
+                  module: './hero-detail.component',
+                  name: 'HeroDetailComponent',
+                  line: 22,
+                  character: 21
+                },
+                {
+                  __symbolic: 'reference',
+                  module: 'angular2/common',
+                  name: 'NgFor',
+                  line: 22,
+                  character: 42
+                }
+              ],
+              providers: [{
+                __symbolic: 'reference',
+                module: './hero.service',
+                default: true,
+                line: 23,
+                character: 20
+              }],
+              pipes: [
+                {
+                  __symbolic: 'reference',
+                  module: 'angular2/common',
+                  name: 'LowerCasePipe',
+                  line: 24,
+                  character: 16
+                },
+                {
+                  __symbolic: 'reference',
+                  module: 'angular2/common',
+                  name: 'UpperCasePipe',
+                  line: 24,
+                  character: 38
+                }
+              ]
+            }]
+          }],
+          members: {
+            __ctor__: [{
+              __symbolic: 'constructor',
+              parameters: [{
+                __symbolic: 'reference',
+                module: './hero.service',
+                default: true,
+                line: 31,
+                character: 42
+              }]
+            }],
+            onSelect: [{__symbolic: 'method'}],
+            ngOnInit: [{__symbolic: 'method'}],
+            getHeroes: [{__symbolic: 'method'}]
+          }
+        }
+      }
+    });
+  });
+
+  it('should return the values of exported variables', () => {
+    const sourceFile = program.getSourceFile('/app/mock-heroes.ts') !;
+    const metadata = collector.getMetadata(sourceFile);
+    expect(metadata).toEqual({
+      __symbolic: 'module',
+      version: METADATA_VERSION,
+      metadata: {
+        HEROES: [
+          {'id': 11, 'name': 'Mr. Nice', '$quoted$': ['id', 'name']},
+          {'id': 12, 'name': 'Narco', '$quoted$': ['id', 'name']},
+          {'id': 13, 'name': 'Bombasto', '$quoted$': ['id', 'name']},
+          {'id': 14, 'name': 'Celeritas', '$quoted$': ['id', 'name']},
+          {'id': 15, 'name': 'Magneta', '$quoted$': ['id', 'name']},
+          {'id': 16, 'name': 'RubberMan', '$quoted$': ['id', 'name']},
+          {'id': 17, 'name': 'Dynama', '$quoted$': ['id', 'name']},
+          {'id': 18, 'name': 'Dr IQ', '$quoted$': ['id', 'name']},
+          {'id': 19, 'name': 'Magma', '$quoted$': ['id', 'name']},
+          {'id': 20, 'name': 'Tornado', '$quoted$': ['id', 'name']}
+        ]
+      }
+    });
+  });
+
+  let casesFile: ts.SourceFile;
+  let casesMetadata: ModuleMetadata;
+
+  beforeEach(() => {
+    casesFile = program.getSourceFile('/app/cases-data.ts') !;
+    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__'] as ConstructorMetadata[];
+    expect(ctorData).toEqual([{
+      __symbolic: 'constructor',
+      parameters: [{__symbolic: 'reference', name: 'any'} as MetadataSymbolicExpression]
+    }]);
+  });
+
+  it('should record annotations on set and get declarations', () => {
+    const propertyData = (line: number) => ({
+      name: [{
+        __symbolic: 'property',
+        decorators: [{
+          __symbolic: 'call',
+          expression:
+              {__symbolic: 'reference', module: 'angular2/core', name: 'Input', line, character: 9},
+          arguments: ['firstName']
+        }]
+      }]
+    } as any as MetadataMap);  // TODO: Review use of `any` here (#19904)
+
+    const caseGetProp = <ClassMetadata>casesMetadata.metadata['GetProp'];
+    expect(caseGetProp.members).toEqual(propertyData(11));
+    const caseSetProp = <ClassMetadata>casesMetadata.metadata['SetProp'];
+    expect(caseSetProp.members).toEqual(propertyData(19));
+    const caseFullProp = <ClassMetadata>casesMetadata.metadata['FullProp'];
+    expect(caseFullProp.members).toEqual(propertyData(27));
+  });
+
+  it('should record references to parameterized types', () => {
+    const casesForIn = <ClassMetadata>casesMetadata.metadata['NgFor'];
+    expect(casesForIn).toEqual({
+      __symbolic: 'class', decorators: [{
+        __symbolic: 'call',
+        expression: {
+          __symbolic: 'reference',
+          module: 'angular2/core',
+          name: 'Injectable',
+          line: 40,
+          character: 7
+        }
+      }],
+          members: {
+            __ctor__: [{
+              __symbolic: 'constructor',
+              parameters: [{
+                __symbolic: 'reference',
+                name: 'ClassReference',
+                arguments: [{__symbolic: 'reference', name: 'NgForRow'}]
+              }]
+            }]
+          }
+    } as any as ClassMetadata);  // TODO: Review use of `any` here (#19904)
+  });
+
+  it('should report errors for destructured imports', () => {
+    const unsupported1 = program.getSourceFile('/unsupported-1.ts') !;
+    const metadata = collector.getMetadata(unsupported1);
+    expect(metadata).toEqual({
+      __symbolic: 'module',
+      version: METADATA_VERSION,
+      metadata: {
+        a: {__symbolic: 'error', message: 'Destructuring not supported', line: 1, character: 16},
+        b: {__symbolic: 'error', message: 'Destructuring not supported', line: 1, character: 19},
+        c: {__symbolic: 'error', message: 'Destructuring not supported', line: 2, character: 16},
+        d: {__symbolic: 'error', message: 'Destructuring not supported', line: 2, character: 19},
+        e: {__symbolic: 'error', message: 'Variable not initialized', line: 3, character: 15}
+      }
+    });
+  });
+
+  it('should report an error for references to unexpected types', () => {
+    const unsupported1 = program.getSourceFile('/unsupported-2.ts') !;
+    const metadata = collector.getMetadata(unsupported1) !;
+    const barClass = <ClassMetadata>metadata.metadata['Bar'];
+    const ctor = <ConstructorMetadata>barClass.members !['__ctor__'][0];
+    const parameter = ctor.parameters ![0];
+    expect(parameter).toEqual({
+      __symbolic: 'error',
+      message: 'Reference to non-exported class',
+      line: 3,
+      character: 4,
+      context: {className: 'Foo'}
+    });
+  });
+
+  it('should be able to handle import star type references', () => {
+    const importStar = program.getSourceFile('/import-star.ts') !;
+    const metadata = collector.getMetadata(importStar) !;
+    const someClass = <ClassMetadata>metadata.metadata['SomeClass'];
+    const ctor = <ConstructorMetadata>someClass.members !['__ctor__'][0];
+    const parameters = ctor.parameters;
+    expect(parameters).toEqual([{
+      __symbolic: 'reference', module: 'angular2/common', name: 'NgFor', line: 6, character: 29
+    } as MetadataSymbolicExpression]);
+  });
+
+  it('should record all exported classes', () => {
+    const sourceFile = program.getSourceFile('/exported-classes.ts') !;
+    const metadata = collector.getMetadata(sourceFile);
+    expect(metadata).toEqual({
+      __symbolic: 'module',
+      version: METADATA_VERSION,
+      metadata: {
+        SimpleClass: {__symbolic: 'class'},
+        AbstractClass: {__symbolic: 'class'},
+        DeclaredClass: {__symbolic: 'class'}
+      }
+    });
+  });
+
+  it('should be able to record functions', () => {
+    const exportedFunctions = program.getSourceFile('/exported-functions.ts') !;
+    const metadata = collector.getMetadata(exportedFunctions);
+    expect(metadata).toEqual({
+      __symbolic: 'module',
+      version: METADATA_VERSION,
+      metadata: {
+        one: {
+          __symbolic: 'function',
+          parameters: ['a', 'b', 'c'],
+          value: {
+            a: {__symbolic: 'reference', name: 'a'},
+            b: {__symbolic: 'reference', name: 'b'},
+            c: {__symbolic: 'reference', name: 'c'}
+          }
+        },
+        two: {
+          __symbolic: 'function',
+          parameters: ['a', 'b', 'c'],
+          value: {
+            a: {__symbolic: 'reference', name: 'a'},
+            b: {__symbolic: 'reference', name: 'b'},
+            c: {__symbolic: 'reference', name: 'c'}
+          }
+        },
+        three: {
+          __symbolic: 'function',
+          parameters: ['a', 'b', 'c'],
+          value: [
+            {__symbolic: 'reference', name: 'a'}, {__symbolic: 'reference', name: 'b'},
+            {__symbolic: 'reference', name: 'c'}
+          ]
+        },
+        supportsState: {
+          __symbolic: 'function',
+          parameters: [],
+          value: {
+            __symbolic: 'pre',
+            operator: '!',
+            operand: {
+              __symbolic: 'pre',
+              operator: '!',
+              operand: {
+                __symbolic: 'select',
+                expression: {
+                  __symbolic: 'select',
+                  expression: {__symbolic: 'reference', name: 'window'},
+                  member: 'history'
+                },
+                member: 'pushState'
+              }
+            }
+          }
+        },
+        complexFn: {__symbolic: 'function'},
+        declaredFn: {__symbolic: 'function'}
+      }
+    });
+  });
+
+  it('should be able to handle import star type references', () => {
+    const importStar = program.getSourceFile('/import-star.ts') !;
+    const metadata = collector.getMetadata(importStar) !;
+    const someClass = <ClassMetadata>metadata.metadata['SomeClass'];
+    const ctor = <ConstructorMetadata>someClass.members !['__ctor__'][0];
+    const parameters = ctor.parameters;
+    expect(parameters).toEqual([{
+      __symbolic: 'reference', module: 'angular2/common', name: 'NgFor', line: 6, character: 29
+    } as MetadataSymbolicExpression]);
+  });
+
+  it('should be able to collect the value of an enum', () => {
+    const enumSource = program.getSourceFile('/exported-enum.ts') !;
+    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 publicEnum: any = metadata.metadata['PublicEnum'];
+    const privateEnum: any = metadata.metadata['PrivateEnum'];
+    expect(publicEnum).toEqual({a: 0, b: 1, c: 2});
+    expect(privateEnum).toBeUndefined();
+  });
+
+  it('should be able to collect enums initialized from consts', () => {
+    const enumSource = program.getSourceFile('/exported-enum.ts') !;
+    const metadata = collector.getMetadata(enumSource) !;
+    const complexEnum: any = metadata.metadata['ComplexEnum'];
+    expect(complexEnum).toEqual({
+      A: 0,
+      B: 1,
+      C: 30,
+      D: 40,
+      E: {
+        __symbolic: 'reference',
+        module: './exported-consts',
+        name: 'constValue',
+        line: 5,
+        character: 75
+      }
+    });
+  });
+
+  it('should be able to collect a simple static method', () => {
+    const staticSource = program.getSourceFile('/static-method.ts') !;
+    const metadata = collector.getMetadata(staticSource) !;
+    expect(metadata).toBeDefined();
+    const classData = <ClassMetadata>metadata.metadata['MyModule'];
+    expect(classData).toBeDefined();
+    expect(classData.statics).toEqual({
+      with: {
+        __symbolic: 'function',
+        parameters: ['comp'],
+        value: [
+          {__symbolic: 'reference', name: 'MyModule'},
+          {provider: 'a', useValue: {__symbolic: 'reference', name: 'comp'}}
+        ]
+      }
+    });
+  });
+
+  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) !;
+    expect(metadata).toBeDefined();
+    const classData = <ClassMetadata>metadata.metadata['Foo'];
+    expect(classData).toBeDefined();
+    expect(classData.decorators).toEqual([{
+      __symbolic: 'call',
+      expression: {
+        __symbolic: 'reference',
+        module: 'angular2/core',
+        name: 'Component',
+        line: 4,
+        character: 5
+      },
+      arguments: [{
+        providers: {
+          __symbolic: 'call',
+          expression: {
+            __symbolic: 'select',
+            expression: {
+              __symbolic: 'reference',
+              module: './static-method',
+              name: 'MyModule',
+              line: 5,
+              character: 17
+            },
+            member: 'with'
+          },
+          arguments: ['a']
+        }
+      }]
+    }] as any as MetadataSymbolicExpression[]);  // TODO: Review use of `any` here (#19904)
+  });
+
+  it('should be able to collect a static field', () => {
+    const staticSource = program.getSourceFile('/static-field.ts') !;
+    const metadata = collector.getMetadata(staticSource) !;
+    expect(metadata).toBeDefined();
+    const classData = <ClassMetadata>metadata.metadata['MyModule'];
+    expect(classData).toBeDefined();
+    expect(classData.statics).toEqual({VALUE: 'Some string'});
+  });
+
+  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) !;
+    expect(metadata).toBeDefined();
+    const classData = <ClassMetadata>metadata.metadata['Foo'];
+    expect(classData).toBeDefined();
+    expect(classData.decorators).toEqual([{
+      __symbolic: 'call',
+      expression: {
+        __symbolic: 'reference',
+        module: 'angular2/core',
+        name: 'Component',
+        line: 4,
+        character: 5
+      },
+      arguments: [{
+        providers: [{
+          provide: 'a',
+          useValue: {
+            __symbolic: 'select',
+            expression: {
+              __symbolic: 'reference',
+              module: './static-field',
+              name: 'MyModule',
+              line: 5,
+              character: 45
+            },
+            member: 'VALUE'
+          }
+        }]
+      }]
+    }] as any as MetadataSymbolicExpression[]);  // TODO: Review use of `any` here (#19904)
+  });
+
+  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) !;
+    expect(metadata).toBeDefined();
+    const classData = <ClassMetadata>metadata.metadata['MyModule'];
+    expect(classData).toBeDefined();
+    expect(classData.statics).toEqual({
+      with: {
+        __symbolic: 'function',
+        parameters: ['cond'],
+        value: [
+          {__symbolic: 'reference', name: 'MyModule'}, {
+            provider: 'a',
+            useValue: {
+              __symbolic: 'if',
+              condition: {__symbolic: 'reference', name: 'cond'},
+              thenExpression: '1',
+              elseExpression: '2'
+            }
+          }
+        ]
+      }
+    });
+  });
+
+  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) !;
+    expect(metadata).toBeDefined();
+    const classData = <ClassMetadata>metadata.metadata['MyModule'];
+    expect(classData).toBeDefined();
+    expect(classData.statics).toEqual({
+      with: {
+        __symbolic: 'function',
+        parameters: ['comp', 'foo', 'bar'],
+        defaults: [undefined, true, false],
+        value: [
+          {__symbolic: 'reference', name: 'MyModule'}, {
+            __symbolic: 'if',
+            condition: {__symbolic: 'reference', name: 'foo'},
+            thenExpression: {provider: 'a', useValue: {__symbolic: 'reference', name: 'comp'}},
+            elseExpression: {provider: 'b', useValue: {__symbolic: 'reference', name: 'comp'}}
+          },
+          {
+            __symbolic: 'if',
+            condition: {__symbolic: 'reference', name: 'bar'},
+            thenExpression: {provider: 'c', useValue: {__symbolic: 'reference', name: 'comp'}},
+            elseExpression: {provider: 'd', useValue: {__symbolic: 'reference', name: 'comp'}}
+          }
+        ]
+      }
+    });
+  });
+
+  it('should be able to collect re-exported symbols', () => {
+    const source = program.getSourceFile('/re-exports.ts') !;
+    const metadata = collector.getMetadata(source) !;
+    expect(metadata.exports).toEqual([
+      {from: './static-field', export: ['MyModule']},
+      {from: './static-field-reference', export: [{name: 'Foo', as: 'OtherModule'}]},
+      {from: 'angular2/core'}
+    ]);
+  });
+
+  it('should be able to collect a export as symbol', () => {
+    const source = program.getSourceFile('export-as.d.ts') !;
+    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) !;
+    expect(metadata.metadata).toEqual({
+      MyClass: Object({__symbolic: 'class'}),
+      OtherModule: {
+        __symbolic: 'reference',
+        module: './static-field-reference',
+        name: 'Foo',
+        line: 4,
+        character: 12
+      },
+      MyOtherModule: {
+        __symbolic: 'reference',
+        module: './static-field',
+        name: 'MyModule',
+        line: 4,
+        character: 25
+      }
+    });
+  });
+
+  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) !;
+    expect(metadata.metadata).toEqual({
+      REQUIRED_VALIDATOR: {
+        __symbolic: 'error',
+        message: 'Reference to a local symbol',
+        line: 3,
+        character: 8,
+        context: {name: 'REQUIRED'}
+      },
+      SomeComponent: {
+        __symbolic: 'class',
+        decorators: [{
+          __symbolic: 'call',
+          expression: {
+            __symbolic: 'reference',
+            module: 'angular2/core',
+            name: 'Component',
+            line: 11,
+            character: 5
+          },
+          arguments: [{providers: [{__symbolic: 'reference', name: 'REQUIRED_VALIDATOR'}]}]
+        }]
+      }
+    });
+  });
+
+  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) !;
+    expect(metadata.metadata).toEqual({
+      REQUIRED_VALIDATOR: {
+        __symbolic: 'error',
+        message: 'Reference to a non-exported function',
+        line: 3,
+        character: 13,
+        context: {name: 'required'}
+      },
+      SomeComponent: {
+        __symbolic: 'class',
+        decorators: [{
+          __symbolic: 'call',
+          expression: {
+            __symbolic: 'reference',
+            module: 'angular2/core',
+            name: 'Component',
+            line: 11,
+            character: 5
+          },
+          arguments: [{providers: [{__symbolic: 'reference', name: 'REQUIRED_VALIDATOR'}]}]
+        }]
+      }
+    });
+  });
+
+  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) !;
+    expect(metadata.metadata).toEqual({
+      foo: {
+        __symbolic: 'function',
+        parameters: ['index'],
+        value: {
+          __symbolic: 'error',
+          message: 'Reference to a local symbol',
+          line: 1,
+          character: 8,
+          context: {name: 'localSymbol'}
+        }
+      }
+    });
+  });
+
+  it('should collect any for interface parameter reference', () => {
+    const source = program.getSourceFile('/interface-reference.ts') !;
+    const metadata = collector.getMetadata(source) !;
+    expect((metadata.metadata['SomeClass'] as ClassMetadata).members).toEqual({
+      __ctor__: [{
+        __symbolic: 'constructor',
+        parameterDecorators: [[{
+          __symbolic: 'call',
+          expression: {
+            __symbolic: 'reference',
+            module: 'angular2/core',
+            name: 'Inject',
+            line: 6,
+            character: 19
+          },
+          arguments: ['a']
+        }]],
+        parameters: [{__symbolic: 'reference', name: 'any'}]
+      }]
+    } as any as MetadataMap);  // TODO: Review use of `any` here (#19904)
+  });
+
+  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',
+          line: 0,
+          character: 68,
+        }
+      });
+    });
+
+    it('should simplify a redundant template', () => {
+      e('`${external}`', 'import {external} from "./external";').toEqual({
+        __symbolic: 'reference',
+        module: './external',
+        name: 'external',
+        line: 0,
+        character: 59
+      });
+    });
+
+    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',
+                line: 0,
+                character: 63
+              }
+            },
+            right: ', bar:'
+          },
+          right:
+              {__symbolic: 'reference', module: './external', name: 'bar', line: 0, character: 75}
+        },
+        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', line: 3, character: 24},
+          {__symbolic: 'reference', module: './foo', name: 'Foo', line: 3, character: 24},
+          {__symbolic: 'reference', module: './foo', name: 'Foo', line: 3, character: 24},
+          {__symbolic: 'reference', module: './foo', name: 'Foo', line: 3, character: 24},
+          {__symbolic: 'reference', module: './foo', name: 'Foo', line: 3, character: 24}
+        ]
+      }]
+    } as any as MetadataMap);  // TODO: Review use of `any` here (#19904)
+  });
+
+  it('should treat exported class expressions as a class', () => {
+    const source = ts.createSourceFile(
+        '', `
+    export const InjectionToken: {new<T>(desc: string): InjectionToken<T>;} = class {
+      constructor(protected _desc: string) {}
+
+      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') !;
+      expect(() => collector.getMetadata(source, true)).toThrowError(/Reference to a local symbol/);
+    });
+
+    it('should throw if an error if collecting a reference to a non-exported function', () => {
+      const source = program.getSourceFile('/local-function-ref.ts') !;
+      expect(() => collector.getMetadata(source, true))
+          .toThrowError(/Reference to a non-exported function/);
+    });
+
+    it('should throw for references to unexpected types', () => {
+      const unsupported2 = program.getSourceFile('/unsupported-2.ts') !;
+      expect(() => collector.getMetadata(unsupported2, true))
+          .toThrowError(/Reference to non-exported class/);
+    });
+
+    it('should throw for errors in a static method', () => {
+      const unsupported3 = program.getSourceFile('/unsupported-3.ts') !;
+      expect(() => collector.getMetadata(unsupported3, true))
+          .toThrowError(/Reference to a non-exported class/);
+    });
+  });
+
+  describe('with invalid input', () => {
+    it('should not throw with a class with no name', () => {
+      const fileName = '/invalid-class.ts';
+      override(fileName, 'export class');
+      const invalidClass = program.getSourceFile(fileName) !;
+      expect(() => collector.getMetadata(invalidClass)).not.toThrow();
+    });
+
+    it('should not throw with a function with no name', () => {
+      const fileName = '/invalid-function.ts';
+      override(fileName, 'export function');
+      const invalidFunction = program.getSourceFile(fileName) !;
+      expect(() => collector.getMetadata(invalidFunction)).not.toThrow();
+    });
+  });
+
+  describe('inheritance', () => {
+    it('should record `extends` clauses for declared classes', () => {
+      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') !) !;
+      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') !) !;
+      expect(metadata.metadata['ChildClassOtherFile']).toEqual({
+        __symbolic: 'class',
+        extends: {
+          __symbolic: 'reference',
+          module: './class-inheritance-parent',
+          name: 'ParentClassFromOtherFile',
+          line: 9,
+          character: 45,
+        }
+      });
+    });
+
+    function expectClass(entry: MetadataEntry): entry is ClassMetadata {
+      const result = isClassMetadata(entry);
+      expect(result).toBeTruthy();
+      return result;
+    }
+
+    it('should collect the correct arity for a class', () => {
+      const metadata = collector.getMetadata(program.getSourceFile('/class-arity.ts') !) !;
+
+      const zero = metadata.metadata['Zero'];
+      if (expectClass(zero)) expect(zero.arity).toBeUndefined();
+      const one = metadata.metadata['One'];
+      if (expectClass(one)) expect(one.arity).toBe(1);
+      const two = metadata.metadata['Two'];
+      if (expectClass(two)) expect(two.arity).toBe(2);
+      const three = metadata.metadata['Three'];
+      if (expectClass(three)) expect(three.arity).toBe(3);
+      const nine = metadata.metadata['Nine'];
+      if (expectClass(nine)) expect(nine.arity).toBe(9);
+    });
+  });
+
+  describe('regression', () => {
+    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 collect type guards', () => {
+      const metadata = collectSource(`
+        import {Directive, Input, TemplateRef} from '@angular/core';
+
+        @Directive({selector: '[myIf]'})
+        export class MyIf {
+
+          constructor(private templateRef: TemplateRef) {}
+
+          @Input() myIf: any;
+
+          static typeGuard: <T>(v: T | null | undefined): v is T;
+        }
+      `);
+
+      expect((metadata.metadata.MyIf as any).statics.typeGuard)
+          .not.toBeUndefined('typeGuard was not collected');
+    });
+
+  });
+
+  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'}]}
+      });
+    });
+  });
+
+  describe('substitutions', () => {
+    const lambdaTemp = 'lambdaTemp';
+
+    it('should be able to substitute a lambda', () => {
+      const source = createSource(`
+        const b = 1;
+        export const a = () => b;
+      `);
+      const metadata = collector.getMetadata(source, /* strict */ false, (value, node) => {
+        if (node.kind === ts.SyntaxKind.ArrowFunction) {
+          return {__symbolic: 'reference', name: lambdaTemp};
+        }
+        return value;
+      });
+      expect(metadata !.metadata['a']).toEqual({__symbolic: 'reference', name: lambdaTemp});
+    });
+
+    it('should compose substitution functions', () => {
+      const collector = new MetadataCollector({
+        substituteExpression: (value, node) => isMetadataGlobalReferenceExpression(value) &&
+                value.name == lambdaTemp ?
+            {__symbolic: 'reference', name: value.name + '2'} :
+            value
+      });
+      const source = createSource(`
+        const b = 1;
+        export const a = () => b;
+      `);
+      const metadata = collector.getMetadata(source, /* strict */ false, (value, node) => {
+        if (node.kind === ts.SyntaxKind.ArrowFunction) {
+          return {__symbolic: 'reference', name: lambdaTemp};
+        }
+        return value;
+      });
+      expect(metadata !.metadata['a']).toEqual({__symbolic: 'reference', name: lambdaTemp + '2'});
+    });
+  });
+
+  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
+const FILES: Directory = {
+  'app': {
+    'app.component.ts': `
+      import {Component as MyComponent, OnInit} from 'angular2/core';
+      import * as common from 'angular2/common';
+      import {Hero} from './hero';
+      import {HeroDetailComponent} from './hero-detail.component';
+      import HeroService from './hero.service';
+      // thrown away
+      import 'angular2/core';
+
+      @MyComponent({
+        selector: 'my-app',
+        template:` +
+        '`' +
+        `
+        <h2>My Heroes</h2>
+        <ul class="heroes">
+          <li *ngFor="#hero of heroes"
+            (click)="onSelect(hero)"
+            [class.selected]="hero === selectedHero">
+            <span class="badge">{{hero.id | lowercase}}</span> {{hero.name | uppercase}}
+          </li>
+        </ul>
+        <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+        ` +
+        '`' +
+        `,
+        directives: [HeroDetailComponent, common.NgFor],
+        providers: [HeroService],
+        pipes: [common.LowerCasePipe, common.UpperCasePipe]
+      })
+      export class AppComponent implements OnInit {
+        public title = 'Tour of Heroes';
+        public heroes: Hero[];
+        public selectedHero: Hero;
+
+        constructor(private _heroService: HeroService) { }
+
+        onSelect(hero: Hero) { this.selectedHero = hero; }
+
+        ngOnInit() {
+            this.getHeroes()
+        }
+
+        getHeroes() {
+          this._heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
+        }
+      }`,
+    'hero.ts': `
+      export interface Hero {
+        id: number;
+        name: string;
+      }`,
+    'empty.ts': ``,
+    'hero-detail.component.ts': `
+      import {Component, Input} from 'angular2/core';
+      import {Hero} from './hero';
+
+      @Component({
+        selector: 'my-hero-detail',
+        template: ` +
+        '`' +
+        `
+        <div *ngIf="hero">
+          <h2>{{hero.name}} details!</h2>
+          <div><label>id: </label>{{hero.id}}</div>
+          <div>
+            <label>name: </label>
+            <input [(ngModel)]="hero.name" placeholder="name"/>
+          </div>
+        </div>
+      ` +
+        '`' +
+        `,
+      })
+      export class HeroDetailComponent {
+        @Input() public hero: Hero;
+      }`,
+    'mock-heroes.ts': `
+      import {Hero as 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"}
+      ];`,
+    'default-exporter.ts': `
+      let a: string;
+      export default a;
+    `,
+    'hero.service.ts': `
+      import {Injectable} from 'angular2/core';
+      import {HEROES} from './mock-heroes';
+      import {Hero} from './hero';
+
+      @Injectable()
+      class HeroService {
+          getHeros() {
+              return Promise.resolve(HEROES);
+          }
+
+          getHeroesSlowly() {
+              return new Promise<Hero[]>(resolve =>
+                setTimeout(()=>resolve(HEROES), 2000)); // 2 seconds
+          }
+      }
+      export default HeroService;`,
+    'cases-data.ts': `
+      import {Injectable, Input} from 'angular2/core';
+
+      @Injectable()
+      export class CaseAny {
+        constructor(param: any) {}
+      }
+
+      @Injectable()
+      export class GetProp {
+        private _name: string;
+        @Input('firstName') get name(): string {
+          return this._name;
+        }
+      }
+
+      @Injectable()
+      export class SetProp {
+        private _name: string;
+        @Input('firstName') set name(value: string) {
+          this._name = value;
+        }
+      }
+
+      @Injectable()
+      export class FullProp {
+        private _name: string;
+        @Input('firstName') get name(): string {
+          return this._name;
+        }
+        set name(value: string) {
+          this._name = value;
+        }
+      }
+
+      export class ClassReference<T> { }
+      export class NgForRow {
+
+      }
+
+      @Injectable()
+      export class NgFor {
+        constructor (public ref: ClassReference<NgForRow>) {}
+      }
+     `,
+    'error-cases.ts': `
+      import HeroService from './hero.service';
+
+      export class CaseCtor {
+        constructor(private _heroService: HeroService) { }
+      }
+    `
+  },
+  'promise.ts': `
+    interface PromiseLike<T> {
+        then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => TResult | PromiseLike<TResult>): PromiseLike<TResult>;
+        then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => void): PromiseLike<TResult>;
+    }
+
+    interface Promise<T> {
+        then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<TResult>;
+        then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => void): Promise<TResult>;
+        catch(onrejected?: (reason: any) => T | PromiseLike<T>): Promise<T>;
+        catch(onrejected?: (reason: any) => void): Promise<T>;
+    }
+
+    interface PromiseConstructor {
+        prototype: Promise<any>;
+        new <T>(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;
+        reject(reason: any): Promise<void>;
+        reject<T>(reason: any): Promise<T>;
+        resolve<T>(value: T | PromiseLike<T>): Promise<T>;
+        resolve(): Promise<void>;
+    }
+
+    declare var Promise: PromiseConstructor;
+  `,
+  'class-arity.ts': `
+    export class Zero {}
+    export class One<T> {}
+    export class Two<T, V> {}
+    export class Three<T1, T2, T3> {}
+    export class Nine<T1, T2, T3, T4, T5, T6, T7, T8, T9> {}
+  `,
+  'unsupported-1.ts': `
+    export let {a, b} = {a: 1, b: 2};
+    export let [c, d] = [1, 2];
+    export let e;
+  `,
+  'unsupported-2.ts': `
+    import {Injectable} from 'angular2/core';
+
+    class Foo {}
+
+    @Injectable()
+    export class Bar {
+      constructor(private f: Foo) {}
+    }
+  `,
+  'unsupported-3.ts': `
+    class Foo {}
+
+    export class SomeClass {
+      static someStatic() {
+        return Foo;
+      }
+    }
+  `,
+  'interface-reference.ts': `
+    import {Injectable, Inject} from 'angular2/core';
+    export interface Test {}
+
+    @Injectable()
+    export class SomeClass {
+      constructor(@Inject("a") test: Test) {}
+    }
+  `,
+  'import-star.ts': `
+    import {Injectable} from 'angular2/core';
+    import * as common from 'angular2/common';
+
+    @Injectable()
+    export class SomeClass {
+      constructor(private f: common.NgFor) {}
+    }
+  `,
+  'declarations.d.ts': `
+    declare class DeclaredClass {}
+    declare function declaredFn();
+  `,
+  'exported-classes.ts': `
+    export class SimpleClass {}
+    export abstract class AbstractClass {}
+    export declare class DeclaredClass {}
+  `,
+  'class-inheritance-parent.ts': `
+    export class ParentClassFromOtherFile {}
+  `,
+  'class-inheritance.ts': `
+    import {ParentClassFromOtherFile} from './class-inheritance-parent';
+
+    export class ParentClass {}
+
+    export declare class DeclaredChildClass extends ParentClass {}
+
+    export class ChildClassSameFile extends ParentClass {}
+
+    export class ChildClassOtherFile extends ParentClassFromOtherFile {}
+  `,
+  'exported-functions.ts': `
+    export function one(a: string, b: string, c: string) {
+      return {a: a, b: b, c: c};
+    }
+    export function two(a: string, b: string, c: string) {
+      return {a, b, c};
+    }
+    export function three({a, b, c}: {a: string, b: string, c: string}) {
+      return [a, b, c];
+    }
+    export function supportsState(): boolean {
+     return !!window.history.pushState;
+    }
+    export function complexFn(x: any): boolean {
+      if (x) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+    export declare function declaredFn();
+  `,
+  'exported-type.ts': `
+    export type SomeType = 'a' | 'b';
+  `,
+  'exported-enum.ts': `
+    import {constValue} from './exported-consts';
+
+    export const someValue = 30;
+    export enum SomeEnum { A, B, C = 100, D };
+    export enum ComplexEnum { A, B, C = someValue, D = someValue + 10, E = constValue };
+  `,
+  'exported-consts.ts': `
+    export const constValue = 100;
+  `,
+  'static-method.ts': `
+    export class MyModule {
+      static with(comp: any): any[] {
+        return [
+          MyModule,
+          { provider: 'a', useValue: comp }
+        ];
+      }
+    }
+  `,
+  'static-method-with-default.ts': `
+    export class MyModule {
+      static with(comp: any, foo: boolean = true, bar: boolean = false): any[] {
+        return [
+          MyModule,
+          foo ? { provider: 'a', useValue: comp } : {provider: 'b', useValue: comp},
+          bar ? { provider: 'c', useValue: comp } : {provider: 'd', useValue: comp}
+        ];
+      }
+    }
+  `,
+  'static-method-call.ts': `
+    import {Component} from 'angular2/core';
+    import {MyModule} from './static-method';
+
+    @Component({
+      providers: MyModule.with('a')
+    })
+    export class Foo { }
+  `,
+  'static-field.ts': `
+    export class MyModule {
+      static VALUE = 'Some string';
+    }
+  `,
+  'static-field-reference.ts': `
+    import {Component} from 'angular2/core';
+    import {MyModule} from './static-field';
+
+    @Component({
+      providers: [ { provide: 'a', useValue: MyModule.VALUE } ]
+    })
+    export class Foo { }
+  `,
+  'static-method-with-if.ts': `
+    export class MyModule {
+      static with(cond: boolean): any[] {
+        return [
+          MyModule,
+          { provider: 'a', useValue: cond ? '1' : '2' }
+        ];
+      }
+    }
+  `,
+  're-exports.ts': `
+    export {MyModule} from './static-field';
+    export {Foo as OtherModule} from './static-field-reference';
+    export * from 'angular2/core';
+  `,
+  're-exports-2.ts': `
+    import {MyModule} from './static-field';
+    import {Foo as OtherModule} from './static-field-reference';
+    class MyClass {}
+    export {OtherModule, MyModule as MyOtherModule, MyClass};
+  `,
+  'export-as.d.ts': `
+     declare function someFunction(): void;
+     export { someFunction as SomeFunction };
+ `,
+  'named-module.d.ts': `
+    /// <amd-module name="some-named-module" />
+    export type SomeType = 'a';
+  `,
+  'local-symbol-ref.ts': `
+    import {Component, Validators} from 'angular2/core';
+
+    var REQUIRED;
+
+    export const REQUIRED_VALIDATOR: any = {
+      provide: 'SomeToken',
+      useValue: REQUIRED,
+      multi: true
+    };
+
+    @Component({
+      providers: [REQUIRED_VALIDATOR]
+    })
+    export class SomeComponent {}
+  `,
+  'private-enum.ts': `
+    export enum PublicEnum { a, b, c }
+    enum PrivateEnum { e, f, g }
+  `,
+  'local-function-ref.ts': `
+    import {Component, Validators} from 'angular2/core';
+
+    function required() {}
+
+    export const REQUIRED_VALIDATOR: any = {
+      provide: 'SomeToken',
+      useValue: required,
+      multi: true
+    };
+
+    @Component({
+      providers: [REQUIRED_VALIDATOR]
+    })
+    export class SomeComponent {}
+  `,
+  'local-symbol-ref-func.ts': `
+    var localSymbol: any[];
+
+    export function foo(index: number): string {
+      return localSymbol[index];
+    }
+  `,
+  'node_modules': {
+    'angular2': {
+      'core.d.ts': `
+          export interface Type extends Function { }
+          export interface TypeDecorator {
+              <T extends Type>(type: T): T;
+              (target: Object, propertyKey?: string | symbol, parameterIndex?: number): void;
+              annotations: any[];
+          }
+          export interface ComponentDecorator extends TypeDecorator { }
+          export interface ComponentFactory {
+              (obj: {
+                  selector?: string;
+                  inputs?: string[];
+                  outputs?: string[];
+                  properties?: string[];
+                  events?: string[];
+                  host?: {
+                      [key: string]: string;
+                  };
+                  bindings?: any[];
+                  providers?: any[];
+                  exportAs?: string;
+                  moduleId?: string;
+                  queries?: {
+                      [key: string]: any;
+                  };
+                  viewBindings?: any[];
+                  viewProviders?: any[];
+                  templateUrl?: string;
+                  template?: string;
+                  styleUrls?: string[];
+                  styles?: string[];
+                  directives?: Array<Type | any[]>;
+                  pipes?: Array<Type | any[]>;
+              }): ComponentDecorator;
+          }
+          export declare var Component: ComponentFactory;
+          export interface InputFactory {
+              (bindingPropertyName?: string): any;
+              new (bindingPropertyName?: string): any;
+          }
+          export declare var Input: InputFactory;
+          export interface InjectableFactory {
+              (): any;
+          }
+          export declare var Injectable: InjectableFactory;
+          export interface InjectFactory {
+            (binding?: any): any;
+            new (binding?: any): any;
+          }
+          export declare var Inject: InjectFactory;
+          export interface OnInit {
+              ngOnInit(): any;
+          }
+          export class Validators {
+            static required(): void;
+          }
+      `,
+      'common.d.ts': `
+        export declare class NgFor {
+            ngForOf: any;
+            ngForTemplate: any;
+            ngDoCheck(): void;
+        }
+        export declare class LowerCasePipe  {
+          transform(value: string, args?: any[]): string;
+        }
+        export declare class UpperCasePipe {
+            transform(value: string, args?: any[]): string;
+        }
+      `
+    }
+  }
+};
+
+function createSource(text: string): ts.SourceFile {
+  return ts.createSourceFile('', text, ts.ScriptTarget.Latest, true);
+}
diff --git a/packages/compiler-cli/test/metadata/evaluator_spec.ts b/packages/compiler-cli/test/metadata/evaluator_spec.ts
new file mode 100644
index 000000000000..efb88c7d9d6f
--- /dev/null
+++ b/packages/compiler-cli/test/metadata/evaluator_spec.ts
@@ -0,0 +1,374 @@
+/**
+ * @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 fs from 'fs';
+import * as ts from 'typescript';
+
+import {Evaluator} from '../../src/metadata/evaluator';
+import {Symbols} from '../../src/metadata/symbols';
+
+import {Directory, Host, expectNoDiagnostics, findVar, findVarInitializer} from './typescript.mocks';
+
+describe('Evaluator', () => {
+  const documentRegistry = ts.createDocumentRegistry();
+  let host: ts.LanguageServiceHost;
+  let service: ts.LanguageService;
+  let program: ts.Program;
+  let typeChecker: ts.TypeChecker;
+  let symbols: Symbols;
+  let evaluator: Evaluator;
+
+  beforeEach(() => {
+    host = new Host(FILES, [
+      'expressions.ts', 'consts.ts', 'const_expr.ts', 'forwardRef.ts', 'classes.ts',
+      'newExpression.ts', 'errors.ts', 'declared.ts'
+    ]);
+    service = ts.createLanguageService(host, documentRegistry);
+    program = service.getProgram();
+    typeChecker = program.getTypeChecker();
+    symbols = new Symbols(null as any as ts.SourceFile);
+    evaluator = new Evaluator(symbols, new Map());
+  });
+
+  it('should not have typescript errors in test data', () => {
+    expectNoDiagnostics(service.getCompilerOptionsDiagnostics());
+    for (const sourceFile of program.getSourceFiles()) {
+      expectNoDiagnostics(service.getSyntacticDiagnostics(sourceFile.fileName));
+      if (sourceFile.fileName != 'errors.ts') {
+        // Skip errors.ts because we it has intentional semantic errors that we are testing for.
+        expectNoDiagnostics(service.getSemanticDiagnostics(sourceFile.fileName));
+      }
+    }
+  });
+
+  it('should be able to fold literal expressions', () => {
+    const consts = program.getSourceFile('consts.ts') !;
+    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', () => {
+    const expressions = program.getSourceFile('expressions.ts') !;
+    symbols.define('someName', 'some-name');
+    symbols.define('someBool', true);
+    symbols.define('one', 1);
+    symbols.define('two', 2);
+    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(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(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', () => {
+    const expressions = program.getSourceFile('expressions.ts') !;
+    symbols.define('someName', 'some-name');
+    symbols.define('someBool', true);
+    symbols.define('one', 1);
+    symbols.define('two', 2);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'three'))).toBe(3);
+    symbols.define('three', 3);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'four'))).toBe(4);
+    symbols.define('four', 4);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'obj')))
+        .toEqual({one: 1, two: 2, three: 3, four: 4});
+    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(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(findVarInitializer(expressions, 'bNotEqual')))
+        .toEqual(1 != <any>'1');
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bIdentical')))
+        .toEqual(1 === <any>'1');
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bNotIdentical')))
+        .toEqual(1 !== <any>'1');
+    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(findVarInitializer(expressions, 'bGreaterThanEqual')))
+        .toEqual(1 >= 2);
+    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(findVarInitializer(expressions, 'recursiveA')))
+        .toEqual({__symbolic: 'reference', name: 'recursiveB'});
+    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(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(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(findVarInitializer(newExpression, 'someValue'))).toEqual({
+      __symbolic: 'new',
+      expression:
+          {__symbolic: 'reference', name: 'Value', module: './classes', line: 4, character: 33},
+      arguments: ['name', 12]
+    });
+    expect(evaluator.evaluateNode(findVarInitializer(newExpression, 'complex'))).toEqual({
+      __symbolic: 'new',
+      expression:
+          {__symbolic: 'reference', name: 'Value', module: './classes', line: 5, character: 42},
+      arguments: ['name', 12]
+    });
+  });
+
+  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({
+      __symbolic: 'select',
+      expression: {__symbolic: 'reference', name: 'Foo'},
+      member: 'A'
+    });
+  });
+
+  it('should return errors for unsupported expressions', () => {
+    const errors = program.getSourceFile('errors.ts') !;
+    const fDecl = findVar(errors, 'f') !;
+    expect(evaluator.evaluateNode(fDecl.initializer !))
+        .toEqual({__symbolic: 'error', message: 'Lambda not supported', line: 1, character: 12});
+    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({
+      __symbolic: 'error',
+      message: 'Name expected',
+      line: 3,
+      character: 14,
+      context: {received: '1'}
+    });
+    const tDecl = findVar(errors, 't') !;
+    expect(evaluator.evaluateNode(tDecl.initializer !)).toEqual({
+      __symbolic: 'error',
+      message: 'Expression form not supported',
+      line: 4,
+      character: 12
+    });
+  });
+
+  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]);
+  });
+
+  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([
+      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'}});
+  });
+
+  describe('with substitution', () => {
+    let evaluator: Evaluator;
+    const lambdaTemp = 'lambdaTemp';
+
+    beforeEach(() => {
+      evaluator = new Evaluator(symbols, new Map(), {
+        substituteExpression: (value, node) => {
+          if (node.kind == ts.SyntaxKind.ArrowFunction) {
+            return {__symbolic: 'reference', name: lambdaTemp};
+          }
+          return value;
+        }
+      });
+    });
+
+    it('should be able to substitute a lambda with a reference', () => {
+      const source = sourceFileOf(`
+        var b = 1;
+        export var a = () => b;
+      `);
+      const expr = findVar(source, 'a');
+      expect(evaluator.evaluateNode(expr !.initializer !))
+          .toEqual({__symbolic: 'reference', name: lambdaTemp});
+    });
+
+    it('should be able to substitute a lambda in an expression', () => {
+      const source = sourceFileOf(`
+        var b = 1;
+        export var a = [
+          { provide: 'someValue': useFactory: () => b }
+        ];
+      `);
+      const expr = findVar(source, 'a');
+      expect(evaluator.evaluateNode(expr !.initializer !)).toEqual([
+        {provide: 'someValue', useFactory: {__symbolic: 'reference', name: lambdaTemp}}
+      ]);
+    });
+  });
+});
+
+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}) {
+      return function(fn: Function) { }
+    }
+    `,
+  'classes.ts': `
+    export class Value {
+      constructor(public name: string, public value: any) {}
+    }
+  `,
+  'consts.ts': `
+    export var someName = 'some-name';
+    export var someBool = true;
+    export var one = 1;
+    export var two = 2;
+    export var arrImport = [1, 2, 3, 4];
+  `,
+  'expressions.ts': `
+    import {arrImport} from './consts';
+
+    export var someName = 'some-name';
+    export var someBool = true;
+    export var one = 1;
+    export var two = 2;
+
+    export var three = one + two;
+    export var four = two * two;
+    export var obj = { one: one, two: two, three: three, four: four };
+    export var arr = [one, two, three, four];
+    export var bTrue = someBool;
+    export var bFalse = !someBool;
+    export var bAnd = someBool && someBool;
+    export var bOr = someBool || someBool;
+    export var nDiv = four / two;
+    export var nMod = (four + one) % two;
+
+    export var bLOr = false || true;             // true
+    export var bLAnd = true && true;             // true
+    export var bBOr = 0x11 | 0x22;               // 0x33
+    export var bBAnd = 0x11 & 0x03;              // 0x01
+    export var bXor = 0x11 ^ 0x21;               // 0x20
+    export var bEqual = 1 == <any>"1";           // true
+    export var bNotEqual = 1 != <any>"1";        // false
+    export var bIdentical = 1 === <any>"1";      // false
+    export var bNotIdentical = 1 !== <any>"1";   // true
+    export var bLessThan = 1 < 2;                // true
+    export var bGreaterThan = 1 > 2;             // false
+    export var bLessThanEqual = 1 <= 2;          // true
+    export var bGreaterThanEqual = 1 >= 2;       // false
+    export var bShiftLeft = 1 << 2;              // 0x04
+    export var bShiftRight = -1 >> 2;            // -1
+    export var bShiftRightU = -1 >>> 2;          // 0x3fffffff
+
+    export var arrSpread = [0, ...arr, 5];
+
+    export var arrSpreadRef = [0, ...arrImport, 5];
+
+    export var recursiveA = recursiveB;
+    export var recursiveB = recursiveA;
+  `,
+  'A.ts': `
+    import {Pipe} from './directives';
+
+    @Pipe({name: 'A', pure: false})
+    export class A {}`,
+  'B.ts': `
+    import {Pipe} from './directives';
+    import {someName, someBool} from './consts';
+
+    @Pipe({name: someName, pure: someBool})
+    export class B {}`,
+  'const_expr.ts': `
+    function CONST_EXPR(value: any) { return value; }
+    export var bTrue = CONST_EXPR(true);
+    export var bFalse = CONST_EXPR(false);
+  `,
+  'forwardRef.ts': `
+    function forwardRef(value: any) { return value; }
+    export var bTrue = forwardRef(() => true);
+    export var bFalse = forwardRef(() => false);
+  `,
+  'newExpression.ts': `
+    import {Value} from './classes';
+    function CONST_EXPR(value: any) { return value; }
+    function forwardRef(value: any) { return value; }
+    export const someValue = new Value("name", 12);
+    export const complex = CONST_EXPR(new Value("name", forwardRef(() => 12)));
+  `,
+  'errors.ts': `
+    let f = () => 1;
+    let e: NotFound;
+    let s = { 1: 1, 2: 2 };
+    let t = typeof 12;
+  `,
+  'declared.ts': `
+    declare namespace Foo {
+      type A = string;
+    }
+
+    let a: Foo.A = 'some value';
+  `
+};
diff --git a/packages/compiler-cli/test/metadata/index_writer_spec.ts b/packages/compiler-cli/test/metadata/index_writer_spec.ts
new file mode 100644
index 000000000000..ee0678d6ac02
--- /dev/null
+++ b/packages/compiler-cli/test/metadata/index_writer_spec.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 {MetadataBundler} from '../../src/metadata/bundler';
+import {MetadataCollector} from '../../src/metadata/collector';
+import {privateEntriesToIndex} from '../../src/metadata/index_writer';
+
+import {MockStringBundlerHost, SIMPLE_LIBRARY} from './bundler_spec';
+
+describe('index_writer', () => {
+  it('should be able to write the index of a simple library', () => {
+    const host = new MockStringBundlerHost('/', SIMPLE_LIBRARY);
+    const bundler = new MetadataBundler('/lib/index', undefined, host);
+    const bundle = bundler.getMetadataBundle();
+    const result = privateEntriesToIndex('./index', bundle.privates);
+    expect(result).toContain(`export * from './index';`);
+    expect(result).toContain(`export {PrivateOne as ɵa} from './src/one';`);
+    expect(result).toContain(`export {PrivateTwo as ɵb} from './src/two/index';`);
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/test/metadata/symbols_spec.ts b/packages/compiler-cli/test/metadata/symbols_spec.ts
new file mode 100644
index 000000000000..36b8157b41cc
--- /dev/null
+++ b/packages/compiler-cli/test/metadata/symbols_spec.ts
@@ -0,0 +1,134 @@
+/**
+ * @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 ts from 'typescript';
+
+import {isMetadataGlobalReferenceExpression} from '../../src/metadata/schema';
+import {Symbols} from '../../src/metadata/symbols';
+
+import {Directory, Host, expectNoDiagnostics} from './typescript.mocks';
+
+describe('Symbols', () => {
+  let symbols: Symbols;
+  const someValue = 'some-value';
+
+  beforeEach(() => symbols = new Symbols(null as any as ts.SourceFile));
+
+  it('should be able to add a symbol', () => symbols.define('someSymbol', someValue));
+
+  beforeEach(() => symbols.define('someSymbol', someValue));
+
+  it('should be able to `has` a symbol', () => expect(symbols.has('someSymbol')).toBeTruthy());
+  it('should be able to `get` a symbol value',
+     () => expect(symbols.resolve('someSymbol')).toBe(someValue));
+  it('should be able to `get` a symbol value',
+     () => expect(symbols.resolve('someSymbol')).toBe(someValue));
+  it('should be able to determine symbol is missing',
+     () => expect(symbols.has('missingSymbol')).toBeFalsy());
+  it('should return undefined from `get` for a missing symbol',
+     () => expect(symbols.resolve('missingSymbol')).toBeUndefined());
+
+  let host: ts.LanguageServiceHost;
+  let service: ts.LanguageService;
+  let program: ts.Program;
+  let expressions: ts.SourceFile;
+  let imports: ts.SourceFile;
+
+  beforeEach(() => {
+    host = new Host(FILES, ['consts.ts', 'expressions.ts', 'imports.ts']);
+    service = ts.createLanguageService(host);
+    program = service.getProgram();
+    expressions = program.getSourceFile('expressions.ts') !;
+    imports = program.getSourceFile('imports.ts') !;
+  });
+
+  it('should not have syntax errors in the test sources', () => {
+    expectNoDiagnostics(service.getCompilerOptionsDiagnostics());
+    for (const sourceFile of program.getSourceFiles()) {
+      expectNoDiagnostics(service.getSyntacticDiagnostics(sourceFile.fileName));
+    }
+  });
+
+  it('should be able to find the source files', () => {
+    expect(expressions).toBeDefined();
+    expect(imports).toBeDefined();
+  });
+
+  it('should be able to create symbols for a source file', () => {
+    const symbols = new Symbols(expressions);
+    expect(symbols).toBeDefined();
+  });
+
+
+  it('should be able to find symbols in expression', () => {
+    const symbols = new Symbols(expressions);
+    expect(symbols.has('someName')).toBeTruthy();
+    expect(symbols.resolve('someName'))
+        .toEqual({__symbolic: 'reference', module: './consts', name: 'someName'});
+    expect(symbols.has('someBool')).toBeTruthy();
+    expect(symbols.resolve('someBool'))
+        .toEqual({__symbolic: 'reference', module: './consts', name: 'someBool'});
+  });
+
+  it('should be able to detect a * import', () => {
+    const symbols = new Symbols(imports);
+    expect(symbols.resolve('b')).toEqual({__symbolic: 'reference', module: 'b'});
+  });
+
+  it('should be able to detect importing a default export', () => {
+    const symbols = new Symbols(imports);
+    expect(symbols.resolve('d')).toEqual({__symbolic: 'reference', module: 'd', default: true});
+  });
+
+  it('should be able to import a renamed symbol', () => {
+    const symbols = new Symbols(imports);
+    expect(symbols.resolve('g')).toEqual({__symbolic: 'reference', name: 'f', module: 'f'});
+  });
+
+  it('should be able to resolve any symbol in core global scope', () => {
+    const core = (program.getSourceFiles() as ts.SourceFile[])
+                     .find(source => source.fileName.endsWith('lib.d.ts'));
+    expect(core).toBeDefined();
+    const visit = (node: ts.Node): boolean => {
+      switch (node.kind) {
+        case ts.SyntaxKind.VariableStatement:
+        case ts.SyntaxKind.VariableDeclarationList:
+          return !!ts.forEachChild(node, visit);
+        case ts.SyntaxKind.VariableDeclaration:
+          const variableDeclaration = <ts.VariableDeclaration>node;
+          const nameNode = <ts.Identifier>variableDeclaration.name;
+          const name = nameNode.text;
+          const result = symbols.resolve(name);
+          expect(isMetadataGlobalReferenceExpression(result) && result.name).toEqual(name);
+
+          // Ignore everything after Float64Array as it is IE specific.
+          return name === 'Float64Array';
+      }
+      return false;
+    };
+    ts.forEachChild(core !, visit);
+  });
+});
+
+const FILES: Directory = {
+  'consts.ts': `
+    export var someName = 'some-name';
+    export var someBool = true;
+    export var one = 1;
+    export var two = 2;
+  `,
+  'expressions.ts': `
+    import {someName, someBool, one, two} from './consts';
+  `,
+  'imports.ts': `
+    import * as b from 'b';
+    import 'c';
+    import d from 'd';
+    import {f as g} from 'f';
+  `
+};
diff --git a/packages/compiler-cli/test/metadata/typescript.mocks.ts b/packages/compiler-cli/test/metadata/typescript.mocks.ts
new file mode 100644
index 000000000000..43521908d26b
--- /dev/null
+++ b/packages/compiler-cli/test/metadata/typescript.mocks.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
+ */
+
+import * as fs from 'fs';
+import * as ts from 'typescript';
+
+export interface Directory { [name: string]: (Directory|string); }
+
+export class Host implements ts.LanguageServiceHost {
+  private overrides = new Map<string, string>();
+  private version = 1;
+
+  constructor(private directory: Directory, private scripts: string[]) {}
+
+  getCompilationSettings(): ts.CompilerOptions {
+    return {
+      experimentalDecorators: true,
+      module: ts.ModuleKind.CommonJS,
+      target: ts.ScriptTarget.ES5
+    };
+  }
+
+  getScriptFileNames(): string[] { return this.scripts; }
+
+  getScriptVersion(fileName: string): string { return this.version.toString(); }
+
+  getScriptSnapshot(fileName: string): ts.IScriptSnapshot|undefined {
+    const content = this.getFileContent(fileName);
+    if (content) return ts.ScriptSnapshot.fromString(content);
+  }
+
+  fileExists(fileName: string): boolean { return this.getFileContent(fileName) != null; }
+
+  getCurrentDirectory(): string { return '/'; }
+
+  getDefaultLibFileName(options: ts.CompilerOptions): string { return 'lib.d.ts'; }
+
+  overrideFile(fileName: string, content: string) {
+    this.overrides.set(fileName, content);
+    this.version++;
+  }
+
+  addFile(fileName: string) {
+    this.scripts.push(fileName);
+    this.version++;
+  }
+
+  private getFileContent(fileName: string): string|undefined {
+    if (this.overrides.has(fileName)) {
+      return this.overrides.get(fileName);
+    }
+    if (fileName.endsWith('lib.d.ts')) {
+      return fs.readFileSync(ts.getDefaultLibFilePath(this.getCompilationSettings()), 'utf8');
+    }
+    const current = open(this.directory, fileName);
+    if (typeof current === 'string') return current;
+  }
+}
+
+export function open(directory: Directory, fileName: string): Directory|string|undefined {
+  // Path might be normalized by the current node environment. But it could also happen that this
+  // path directly comes from the compiler in POSIX format. Support both separators for development.
+  const names = fileName.split(/[\\/]/);
+  let current: Directory|string = directory;
+  if (names.length && names[0] === '') names.shift();
+  for (const name of names) {
+    if (!current || typeof current === 'string') return undefined;
+    current = current[name];
+  }
+  return current;
+}
+
+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 as any as ts.SourceFile; }
+  getChildCount(sourceFile?: ts.SourceFile): number { return 0; }
+  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; }
+  getEnd(): number { return 0; }
+  getWidth(sourceFile?: ts.SourceFile): number { return 0; }
+  getFullWidth(): number { return 0; }
+  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 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 | undefined,
+      cbNodeArray?: (nodes: ts.NodeArray<ts.Node>) => T | undefined): T|undefined {
+    return undefined;
+  }
+}
+
+export class MockIdentifier extends MockNode implements ts.Identifier {
+  public text: string;
+  // TODO(issue/24571): remove '!'.
+  public escapedText !: ts.__String;
+  // tslint:disable
+  public _declarationBrand: any;
+  public _primaryExpressionBrand: any;
+  public _memberExpressionBrand: any;
+  public _leftHandSideExpressionBrand: any;
+  public _incrementExpressionBrand: any;
+  public _unaryExpressionBrand: any;
+  public _expressionBrand: any;
+  public _updateExpressionBrand: any;
+  // tslint:enable
+
+  constructor(
+      public name: string, public kind: ts.SyntaxKind.Identifier = ts.SyntaxKind.Identifier,
+      flags: ts.NodeFlags = 0, pos: number = 0, end: number = 0) {
+    super(kind, flags, pos, end);
+    this.text = name;
+  }
+}
+
+export class MockVariableDeclaration extends MockNode implements ts.VariableDeclaration {
+  // tslint:disable-next-line
+  public _declarationBrand: any;
+
+  constructor(
+      public name: ts.Identifier,
+      public kind: ts.SyntaxKind.VariableDeclaration = ts.SyntaxKind.VariableDeclaration,
+      flags: ts.NodeFlags = 0, pos: number = 0, end: number = 0) {
+    super(kind, flags, pos, end);
+  }
+
+  static of (name: string): MockVariableDeclaration {
+    return new MockVariableDeclaration(new MockIdentifier(name));
+  }
+}
+
+export class MockSymbol implements ts.Symbol {
+  // TODO(issue/24571): remove '!'.
+  public escapedName !: ts.__String;
+  constructor(
+      public name: string, private node: ts.Declaration = MockVariableDeclaration.of(name),
+      public flags: ts.SymbolFlags = 0) {}
+
+  getFlags(): ts.SymbolFlags { return this.flags; }
+  getName(): string { return this.name; }
+  getEscapedName(): ts.__String { return this.escapedName; }
+  getDeclarations(): ts.Declaration[] { return [this.node]; }
+  getDocumentationComment(): ts.SymbolDisplayPart[] { return []; }
+  // TODO(vicb): removed in TS 2.2
+  getJsDocTags(): any[] { return []; }
+
+  static of (name: string): MockSymbol { return new MockSymbol(name); }
+}
+
+export function expectNoDiagnostics(diagnostics: ts.Diagnostic[]) {
+  for (const diagnostic of diagnostics) {
+    const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
+    if (diagnostic.file && diagnostic.start) {
+      const {line, character} = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+      // tslint:disable-next-line:no-console
+      console.log(`${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`);
+    } else {
+      // tslint:disable-next-line:no-console
+      console.log(message);
+    }
+  }
+  expect(diagnostics.length).toBe(0);
+}
+
+export function expectValidSources(service: ts.LanguageService, program: ts.Program) {
+  expectNoDiagnostics(service.getCompilerOptionsDiagnostics());
+  for (const sourceFile of program.getSourceFiles()) {
+    expectNoDiagnostics(service.getSyntacticDiagnostics(sourceFile.fileName));
+    expectNoDiagnostics(service.getSemanticDiagnostics(sourceFile.fileName));
+  }
+}
+
+export function allChildren<T>(node: ts.Node, cb: (node: ts.Node) => T | undefined): T|undefined {
+  return ts.forEachChild(node, child => cb(node) || allChildren(child, cb));
+}
+
+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|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 | 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 {
+  return node.kind === ts.SyntaxKind.VariableDeclaration;
+}
diff --git a/packages/compiler-cli/test/mocks.ts b/packages/compiler-cli/test/mocks.ts
new file mode 100644
index 000000000000..a1ac68edd530
--- /dev/null
+++ b/packages/compiler-cli/test/mocks.ts
@@ -0,0 +1,152 @@
+/**
+ * @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 ts from 'typescript';
+
+export type Entry = string | Directory;
+
+export interface Directory { [name: string]: Entry; }
+
+export class MockAotContext {
+  private files: Entry[];
+
+  constructor(public currentDirectory: string, ...files: Entry[]) { this.files = files; }
+
+  fileExists(fileName: string): boolean { return typeof this.getEntry(fileName) === 'string'; }
+
+  directoryExists(path: string): boolean {
+    return path === this.currentDirectory || typeof this.getEntry(path) === 'object';
+  }
+
+  readFile(fileName: string): string {
+    const data = this.getEntry(fileName);
+    if (typeof data === 'string') {
+      return data;
+    }
+    return undefined !;
+  }
+
+  readResource(fileName: string): Promise<string> {
+    const result = this.readFile(fileName);
+    if (result == null) {
+      return Promise.reject(new Error(`Resource not found: ${fileName}`));
+    }
+    return Promise.resolve(result);
+  }
+
+  writeFile(fileName: string, data: string): void {
+    const parts = fileName.split('/');
+    const name = parts.pop() !;
+    const entry = this.getEntry(parts);
+    if (entry && typeof entry !== 'string') {
+      entry[name] = data;
+    }
+  }
+
+  assumeFileExists(fileName: string): void { this.writeFile(fileName, ''); }
+
+  getEntry(fileName: string|string[]): Entry|undefined {
+    let parts = typeof fileName === 'string' ? fileName.split('/') : fileName;
+    if (parts[0]) {
+      parts = this.currentDirectory.split('/').concat(parts);
+    }
+    parts.shift();
+    parts = normalize(parts);
+    return first(this.files, files => getEntryFromFiles(parts, files));
+  }
+
+  getDirectories(path: string): string[] {
+    const dir = this.getEntry(path);
+    if (typeof dir !== 'object') {
+      return [];
+    } else {
+      return Object.keys(dir).filter(key => typeof dir[key] === 'object');
+    }
+  }
+
+  override(files: Entry) { return new MockAotContext(this.currentDirectory, files, ...this.files); }
+}
+
+function first<T>(a: T[], cb: (value: T) => T | undefined): T|undefined {
+  for (const value of a) {
+    const result = cb(value);
+    if (result != null) return result;
+  }
+}
+
+function getEntryFromFiles(parts: string[], files: Entry) {
+  let current = files;
+  while (parts.length) {
+    const part = parts.shift() !;
+    if (typeof current === 'string') {
+      return undefined;
+    }
+    const next = (<Directory>current)[part];
+    if (next === undefined) {
+      return undefined;
+    }
+    current = next;
+  }
+  return current;
+}
+
+function normalize(parts: string[]): string[] {
+  const result: string[] = [];
+  while (parts.length) {
+    const part = parts.shift() !;
+    switch (part) {
+      case '.':
+        break;
+      case '..':
+        result.pop();
+        break;
+      default:
+        result.push(part);
+    }
+  }
+  return result;
+}
+
+export class MockCompilerHost implements ts.CompilerHost {
+  constructor(private context: MockAotContext) {}
+
+  fileExists(fileName: string): boolean { return this.context.fileExists(fileName); }
+
+  readFile(fileName: string): string { return this.context.readFile(fileName); }
+
+  directoryExists(directoryName: string): boolean {
+    return this.context.directoryExists(directoryName);
+  }
+
+  getSourceFile(
+      fileName: string, languageVersion: ts.ScriptTarget,
+      onError?: (message: string) => void): ts.SourceFile {
+    const sourceText = this.context.readFile(fileName);
+    if (sourceText != null) {
+      return ts.createSourceFile(fileName, sourceText, languageVersion);
+    } else {
+      return undefined !;
+    }
+  }
+
+  getDefaultLibFileName(options: ts.CompilerOptions): string {
+    return ts.getDefaultLibFileName(options);
+  }
+
+  writeFile: ts.WriteFileCallback = (fileName, text) => { this.context.writeFile(fileName, text); };
+
+  getCurrentDirectory(): string { return this.context.currentDirectory; }
+
+  getCanonicalFileName(fileName: string): string { return fileName; }
+
+  useCaseSensitiveFileNames(): boolean { return false; }
+
+  getNewLine(): string { return '\n'; }
+
+  getDirectories(path: string): string[] { return this.context.getDirectories(path); }
+}
diff --git a/packages/compiler-cli/test/ngc_spec.ts b/packages/compiler-cli/test/ngc_spec.ts
new file mode 100644
index 000000000000..ca4d822aa0dc
--- /dev/null
+++ b/packages/compiler-cli/test/ngc_spec.ts
@@ -0,0 +1,2451 @@
+/**
+ * @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 fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {main, readCommandLineAndConfiguration, watchMode} from '../src/main';
+
+import {isInBazel, makeTempDir, setup} from './test_support';
+
+function getNgRootDir() {
+  const moduleFilename = module.filename.replace(/\\/g, '/');
+  const distIndex = moduleFilename.indexOf('/dist/all');
+  return moduleFilename.substr(0, distIndex);
+}
+
+describe('ngc transformer command-line', () => {
+  let basePath: string;
+  let outDir: string;
+  let write: (fileName: string, content: string) => void;
+  let errorSpy: jasmine.Spy&((s: string) => void);
+
+  function shouldExist(fileName: string) {
+    if (!fs.existsSync(path.resolve(outDir, fileName))) {
+      throw new Error(`Expected ${fileName} to be emitted (outDir: ${outDir})`);
+    }
+  }
+
+  function shouldNotExist(fileName: string) {
+    if (fs.existsSync(path.resolve(outDir, fileName))) {
+      throw new Error(`Did not expect ${fileName} to be emitted (outDir: ${outDir})`);
+    }
+  }
+
+  function writeConfig(tsconfig: string = '{"extends": "./tsconfig-base.json"}') {
+    write('tsconfig.json', tsconfig);
+  }
+
+  beforeEach(() => {
+    errorSpy = jasmine.createSpy('consoleError').and.callFake(console.error);
+    if (isInBazel) {
+      const support = setup();
+      basePath = support.basePath;
+      outDir = path.join(basePath, 'built');
+      process.chdir(basePath);
+      write = (fileName: string, content: string) => { support.write(fileName, content); };
+    } else {
+      basePath = makeTempDir();
+      process.chdir(basePath);
+      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'});
+      };
+      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'));
+    }
+    write('tsconfig-base.json', `{
+      "compilerOptions": {
+        "experimentalDecorators": true,
+        "skipLibCheck": true,
+        "noImplicitAny": true,
+        "types": [],
+        "outDir": "built",
+        "rootDir": ".",
+        "baseUrl": ".",
+        "declaration": true,
+        "target": "es5",
+        "module": "es2015",
+        "moduleResolution": "node",
+        "lib": ["es6", "dom"],
+        "typeRoots": ["node_modules/@types"]
+      }
+    }`);
+  });
+
+  it('should compile without errors', () => {
+    writeConfig();
+    write('test.ts', 'export const A = 1;');
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+  });
+
+  describe('errors', () => {
+
+    beforeEach(() => { errorSpy.and.stub(); });
+
+    it('should not print the stack trace if user input file does not exist', () => {
+      writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "files": ["test.ts"]
+      }`);
+
+      const exitCode = main(['-p', basePath], errorSpy);
+      expect(errorSpy).toHaveBeenCalledWith(
+          `error TS6053: File '` + path.join(basePath, 'test.ts') + `' not found.` +
+          '\n');
+      expect(exitCode).toEqual(1);
+    });
+
+    it('should not print the stack trace if user input file is malformed', () => {
+      writeConfig();
+      write('test.ts', 'foo;');
+
+      const exitCode = main(['-p', basePath], errorSpy);
+      expect(errorSpy).toHaveBeenCalledWith(
+          `test.ts(1,1): error TS2304: Cannot find name 'foo'.` +
+          '\n');
+      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 exitCode = main(['-p', basePath], errorSpy);
+      expect(errorSpy).toHaveBeenCalledWith(
+          `test.ts(1,23): error TS2307: Cannot find module './not-exist-deps'.` +
+          '\n');
+      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 exitCode = main(['-p', basePath], errorSpy);
+      expect(errorSpy).toHaveBeenCalledWith(
+          `test.ts(1,9): error TS2305: Module '"` + path.join(basePath, 'empty-deps') +
+          `"' has no exported member 'MyClass'.` +
+          '\n');
+      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 exitCode = main(['-p', basePath], errorSpy);
+      expect(errorSpy).toHaveBeenCalledWith(
+          'test.ts(3,9): error TS2349: Cannot invoke an expression whose type lacks a call signature. ' +
+          'Type \'String\' has no compatible call signatures.\n');
+      expect(exitCode).toEqual(1);
+    });
+
+    it('should print the stack trace on compiler internal errors', () => {
+      write('test.ts', 'export const A = 1;');
+
+      const exitCode = main(['-p', 'not-exist'], errorSpy);
+      expect(errorSpy).toHaveBeenCalledTimes(1);
+      expect(errorSpy.calls.mostRecent().args[0]).toContain('no such file or directory');
+      expect(errorSpy.calls.mostRecent().args[0]).toContain('at Object.fs.lstatSync');
+      expect(exitCode).toEqual(2);
+    });
+
+    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 exitCode = main(['-p', basePath], errorSpy);
+      expect(errorSpy).toHaveBeenCalledTimes(1);
+      expect(errorSpy.calls.mostRecent().args[0]).toContain('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 exitCode = main(['-p', basePath], errorSpy);
+      expect(errorSpy).toHaveBeenCalledTimes(1);
+      expect(errorSpy.calls.mostRecent().args[0]).toContain('my.component.html(1,5):');
+      expect(errorSpy.calls.mostRecent().args[0])
+          .toContain(`Property 'unknownProp' does not exist on type 'MyComp'`);
+
+      expect(exitCode).toEqual(1);
+    });
+  });
+
+  describe('compile ngfactory files', () => {
+
+    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], errorSpy);
+      expect(exitCode).toEqual(0);
+
+      expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngfactory.js'))).toBe(true);
+
+      if (isInBazel()) {
+        // In bazel we use the packaged version so the factory is at the root and we
+        // get the flattened factory.
+        expect(fs.existsSync(
+                   path.resolve(outDir, 'node_modules', '@angular', 'core', 'core.ngfactory.js')))
+            .toBe(true);
+      } else {
+        expect(fs.existsSync(path.resolve(
+                   outDir, 'node_modules', '@angular', 'core', 'src',
+                   'application_module.ngfactory.js')))
+            .toBe(true);
+      }
+    });
+
+    describe('comments', () => {
+      function compileAndRead(contents: string) {
+        writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"],
+          "angularCompilerOptions": {"allowEmptyCodegenFiles": true}
+        }`);
+        write('mymodule.ts', contents);
+
+        const exitCode = main(['-p', basePath], errorSpy);
+        expect(exitCode).toEqual(0);
+
+        const modPath = path.resolve(outDir, 'mymodule.ngfactory.js');
+        expect(fs.existsSync(modPath)).toBe(true);
+        return fs.readFileSync(modPath, {encoding: 'UTF-8'});
+      }
+
+      it('should be added', () => {
+        const contents = compileAndRead(`
+        import {CommonModule} from '@angular/common';
+        import {NgModule} from '@angular/core';
+
+        @NgModule({
+          imports: [CommonModule]
+        })
+        export class MyModule {}
+      `);
+        expect(contents).toContain('@fileoverview');
+        expect(contents).toContain('generated by the Angular template compiler');
+        expect(contents).toContain('@suppress {suspiciousCode');
+      });
+
+      it('should be merged with existing fileoverview comments', () => {
+        const contents = compileAndRead(`/** Hello world. */
+
+        import {CommonModule} from '@angular/common';
+        import {NgModule} from '@angular/core';
+
+        @NgModule({
+          imports: [CommonModule]
+        })
+        export class MyModule {}
+      `);
+        expect(contents).toContain('Hello world.');
+      });
+
+      it('should only pick file comments', () => {
+        const contents = compileAndRead(`
+          /** Comment on class. */
+          class MyClass {
+
+          }
+        `);
+        expect(contents).toContain('@fileoverview');
+        expect(contents).not.toContain('Comment on class.');
+      });
+
+      it('should not be merged with @license comments', () => {
+        const contents = compileAndRead(`/** @license Some license. */
+
+        import {CommonModule} from '@angular/common';
+        import {NgModule} from '@angular/core';
+
+        @NgModule({
+          imports: [CommonModule]
+        })
+        export class MyModule {}
+      `);
+        expect(contents).toContain('@fileoverview');
+        expect(contents).not.toContain('@license');
+      });
+
+      it('should be included in empty files', () => {
+        const contents = compileAndRead(`/** My comment. */
+
+        import {Inject, Injectable, Optional} from '@angular/core';
+
+        @Injectable()
+        export class NotAnAngularComponent {}
+      `);
+        expect(contents).toContain('My comment');
+      });
+    });
+
+    it('should compile with an 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')], errorSpy);
+      expect(exitCode).toEqual(0);
+      expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngfactory.js'))).toBe(true);
+      if (isInBazel()) {
+        // In bazel we use the packaged version so the factory is at the root and we
+        // get the flattened factory.
+        expect(fs.existsSync(
+                   path.resolve(outDir, 'node_modules', '@angular', 'core', 'core.ngfactory.js')))
+            .toBe(true);
+      } else {
+        expect(fs.existsSync(path.resolve(
+                   outDir, 'node_modules', '@angular', 'core', 'src',
+                   'application_module.ngfactory.js')))
+            .toBe(true);
+      }
+    });
+
+    describe(`emit generated files depending on the source file`, () => {
+      const modules = ['comp', 'directive', 'module'];
+      beforeEach(() => {
+        write('src/comp.ts', `
+              import {Component, ViewEncapsulation} from '@angular/core';
+
+              @Component({
+                selector: 'comp-a',
+                template: 'A',
+                styleUrls: ['plain.css'],
+                encapsulation: ViewEncapsulation.None
+              })
+              export class CompA {
+              }
+
+              @Component({
+                selector: 'comp-b',
+                template: 'B',
+                styleUrls: ['emulated.css']
+              })
+              export class CompB {
+              }`);
+        write('src/plain.css', 'div {}');
+        write('src/emulated.css', 'div {}');
+        write('src/directive.ts', `
+              import {Directive, Input} from '@angular/core';
+
+              @Directive({
+                selector: '[someDir]',
+                host: {'[title]': 'someProp'},
+              })
+              export class SomeDirective {
+                @Input() someProp: string;
+              }`);
+        write('src/module.ts', `
+              import {NgModule} from '@angular/core';
+
+              import {CompA, CompB} from './comp';
+              import {SomeDirective} from './directive';
+
+              @NgModule({
+                declarations: [
+                  CompA, CompB,
+                  SomeDirective,
+                ],
+                exports: [
+                  CompA, CompB,
+                  SomeDirective,
+                ],
+              })
+              export class SomeModule {
+              }`);
+      });
+
+      function expectJsDtsMetadataJsonToExist() {
+        modules.forEach(moduleName => {
+          shouldExist(moduleName + '.js');
+          shouldExist(moduleName + '.d.ts');
+          shouldExist(moduleName + '.metadata.json');
+        });
+      }
+
+      function expectAllGeneratedFilesToExist(enableSummariesForJit = true) {
+        modules.forEach(moduleName => {
+          if (/module|comp/.test(moduleName)) {
+            shouldExist(moduleName + '.ngfactory.js');
+            shouldExist(moduleName + '.ngfactory.d.ts');
+          } else {
+            shouldNotExist(moduleName + '.ngfactory.js');
+            shouldNotExist(moduleName + '.ngfactory.d.ts');
+          }
+          if (enableSummariesForJit) {
+            shouldExist(moduleName + '.ngsummary.js');
+            shouldExist(moduleName + '.ngsummary.d.ts');
+          } else {
+            shouldNotExist(moduleName + '.ngsummary.js');
+            shouldNotExist(moduleName + '.ngsummary.d.ts');
+          }
+          shouldExist(moduleName + '.ngsummary.json');
+          shouldNotExist(moduleName + '.ngfactory.metadata.json');
+          shouldNotExist(moduleName + '.ngsummary.metadata.json');
+        });
+        shouldExist('plain.css.ngstyle.js');
+        shouldExist('plain.css.ngstyle.d.ts');
+        shouldExist('emulated.css.shim.ngstyle.js');
+        shouldExist('emulated.css.shim.ngstyle.d.ts');
+      }
+
+      it('should emit generated files from sources with summariesForJit', () => {
+        writeConfig(`{
+            "extends": "./tsconfig-base.json",
+            "angularCompilerOptions": {
+              "enableSummariesForJit": true
+            },
+            "include": ["src/**/*.ts"]
+          }`);
+        const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+        expect(exitCode).toEqual(0);
+        outDir = path.resolve(basePath, 'built', 'src');
+        expectJsDtsMetadataJsonToExist();
+        expectAllGeneratedFilesToExist(true);
+      });
+
+      it('should not emit generated files from sources without summariesForJit', () => {
+        writeConfig(`{
+            "extends": "./tsconfig-base.json",
+            "angularCompilerOptions": {
+              "enableSummariesForJit": false
+            },
+            "include": ["src/**/*.ts"]
+          }`);
+        const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+        expect(exitCode).toEqual(0);
+        outDir = path.resolve(basePath, 'built', 'src');
+        expectJsDtsMetadataJsonToExist();
+        expectAllGeneratedFilesToExist(false);
+      });
+
+      it('should emit generated files from libraries', () => {
+        // first only generate .d.ts / .js / .metadata.json files
+        writeConfig(`{
+            "extends": "./tsconfig-base.json",
+            "angularCompilerOptions": {
+              "skipTemplateCodegen": true
+            },
+            "compilerOptions": {
+              "outDir": "lib"
+            },
+            "include": ["src/**/*.ts"]
+          }`);
+        let exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+        expect(exitCode).toEqual(0);
+        outDir = path.resolve(basePath, 'lib', 'src');
+        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');
+          shouldNotExist(moduleName + '.ngfactory.metadata.json');
+          shouldNotExist(moduleName + '.ngsummary.metadata.json');
+        });
+        shouldNotExist('src/plain.css.ngstyle.js');
+        shouldNotExist('src/plain.css.ngstyle.d.ts');
+        shouldNotExist('src/emulated.css.shim.ngstyle.js');
+        shouldNotExist('src/emulated.css.shim.ngstyle.d.ts');
+        // Then compile again, using the previous .metadata.json as input.
+        writeConfig(`{
+            "extends": "./tsconfig-base.json",
+            "angularCompilerOptions": {
+              "skipTemplateCodegen": false,
+              "enableSummariesForJit": true
+            },
+            "compilerOptions": {
+              "outDir": "built"
+            },
+            "include": ["lib/**/*.d.ts"]
+          }`);
+        write('lib/src/plain.css', 'div {}');
+        write('lib/src/emulated.css', 'div {}');
+        exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+        expect(exitCode).toEqual(0);
+        outDir = path.resolve(basePath, 'built', 'lib', 'src');
+        expectAllGeneratedFilesToExist();
+      });
+    });
+
+    describe('closure', () => {
+      it('should not generate closure specific code by default', () => {
+        writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"]
+        }`);
+        write('mymodule.ts', `
+        import {NgModule, Component} from '@angular/core';
+
+        @Component({template: ''})
+        export class MyComp {}
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+      `);
+
+        const exitCode = main(['-p', basePath], errorSpy);
+        expect(exitCode).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).not.toContain('@fileoverview added by tsickle');
+        expect(mymoduleSource).toContain('MyComp.decorators = [');
+      });
+
+      it('should add closure annotations', () => {
+        writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "angularCompilerOptions": {
+            "annotateForClosureCompiler": true
+          },
+          "files": ["mymodule.ts"]
+        }`);
+        write('mymodule.ts', `
+        import {NgModule, Component} from '@angular/core';
+
+        @Component({template: ''})
+        export class MyComp {
+          fn(p: any) {}
+        }
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+      `);
+
+        const exitCode = main(['-p', basePath], errorSpy);
+        expect(exitCode).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).toContain('@fileoverview added by tsickle');
+        expect(mymoduleSource).toContain('@param {?} p');
+      });
+
+      it('should add metadata as decorators', () => {
+        writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "compilerOptions": {
+            "emitDecoratorMetadata": true
+          },
+          "angularCompilerOptions": {
+            "annotationsAs": "decorators"
+          },
+          "files": ["mymodule.ts"]
+        }`);
+        write('aclass.ts', `export class AClass {}`);
+        write('mymodule.ts', `
+          import {NgModule} from '@angular/core';
+          import {AClass} from './aclass';
+
+          @NgModule({declarations: []})
+          export class MyModule {
+            constructor(importedClass: AClass) {}
+          }
+        `);
+
+        const exitCode = main(['-p', basePath], errorSpy);
+        expect(exitCode).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).toContain('MyModule = __decorate([');
+        expect(mymoduleSource).toContain(`import { AClass } from './aclass';`);
+        expect(mymoduleSource).toContain(`__metadata("design:paramtypes", [AClass])`);
+      });
+
+      it('should add metadata as static fields', () => {
+        // Note: Don't specify emitDecoratorMetadata here on purpose,
+        // as regression test for https://github.com/angular/angular/issues/19916.
+        writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "compilerOptions": {
+            "emitDecoratorMetadata": false
+          },
+          "angularCompilerOptions": {
+            "annotationsAs": "static fields"
+          },
+          "files": ["mymodule.ts"]
+        }`);
+        write('aclass.ts', `export class AClass {}`);
+        write('mymodule.ts', `
+          import {NgModule} from '@angular/core';
+          import {AClass} from './aclass';
+
+          @NgModule({declarations: []})
+          export class MyModule {
+            constructor(importedClass: AClass) {}
+          }
+        `);
+
+        const exitCode = main(['-p', basePath], errorSpy);
+        expect(exitCode).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).not.toContain('__decorate');
+        expect(mymoduleSource).toContain('args: [{ declarations: [] },] }');
+        expect(mymoduleSource).not.toContain(`__metadata`);
+        expect(mymoduleSource).toContain(`import { AClass } from './aclass';`);
+        expect(mymoduleSource).toContain(`{ type: AClass }`);
+      });
+    });
+
+    it('should not rewrite imports when annotating with closure', () => {
+      writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "compilerOptions": {
+          "paths": {
+            "submodule": ["./src/submodule/public_api.ts"]
+          }
+        },
+        "angularCompilerOptions": {
+          "annotateForClosureCompiler": true
+        },
+        "files": ["mymodule.ts"]
+      }`);
+      write('src/test.txt', ' ');
+      write('src/submodule/public_api.ts', `
+        export const A = 1;
+      `);
+      write('mymodule.ts', `
+        import {NgModule, Component} from '@angular/core';
+        import {A} from 'submodule';
+
+        @Component({template: ''})
+        export class MyComp {
+          fn(p: any) { return A; }
+        }
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+    `);
+
+      const exitCode = main(['-p', basePath], errorSpy);
+      expect(exitCode).toEqual(0);
+      const mymodulejs = path.resolve(outDir, 'mymodule.js');
+      const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+      expect(mymoduleSource).toContain(`import { A } from 'submodule'`);
+    });
+
+    describe('expression lowering', () => {
+      beforeEach(() => {
+        writeConfig(`{
+            "extends": "./tsconfig-base.json",
+            "files": ["mymodule.ts"]
+          }`);
+      });
+
+      function compile(): number {
+        errorSpy.calls.reset();
+        const result = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+        expect(errorSpy).not.toHaveBeenCalled();
+        return result;
+      }
+
+      it('should be able to lower a lambda expression in a provider', () => {
+        write('mymodule.ts', `
+          import {CommonModule} from '@angular/common';
+          import {NgModule} from '@angular/core';
+
+          class Foo {}
+
+          @NgModule({
+            imports: [CommonModule],
+            providers: [{provide: 'someToken', useFactory: () => new Foo()}]
+          })
+          export class MyModule {}
+        `);
+        expect(compile()).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).toContain('var ɵ0 = function () { return new Foo(); }');
+        expect(mymoduleSource).toContain('export { ɵ0');
+
+        const mymodulefactory = path.resolve(outDir, 'mymodule.ngfactory.js');
+        const mymodulefactorySource = fs.readFileSync(mymodulefactory, 'utf8');
+        expect(mymodulefactorySource).toContain('"someToken", i1.ɵ0');
+      });
+
+      it('should be able to lower a function expression in a provider', () => {
+        write('mymodule.ts', `
+          import {CommonModule} from '@angular/common';
+          import {NgModule} from '@angular/core';
+
+          class Foo {}
+
+          @NgModule({
+            imports: [CommonModule],
+            providers: [{provide: 'someToken', useFactory: function() {return new Foo();}}]
+          })
+          export class MyModule {}
+        `);
+        expect(compile()).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).toContain('var ɵ0 = function () { return new Foo(); }');
+        expect(mymoduleSource).toContain('export { ɵ0');
+
+        const mymodulefactory = path.resolve(outDir, 'mymodule.ngfactory.js');
+        const mymodulefactorySource = fs.readFileSync(mymodulefactory, 'utf8');
+        expect(mymodulefactorySource).toContain('"someToken", i1.ɵ0');
+      });
+
+      it('should able to lower multiple expressions', () => {
+        write('mymodule.ts', `
+          import {CommonModule} from '@angular/common';
+          import {NgModule} from '@angular/core';
+
+          class Foo {}
+
+          @NgModule({
+            imports: [CommonModule],
+            providers: [
+              {provide: 'someToken', useFactory: () => new Foo()},
+              {provide: 'someToken', useFactory: () => new Foo()},
+              {provide: 'someToken', useFactory: () => new Foo()},
+              {provide: 'someToken', useFactory: () => new Foo()}
+            ]
+          })
+          export class MyModule {}
+        `);
+        expect(compile()).toEqual(0);
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).toContain('ɵ0 = function () { return new Foo(); }');
+        expect(mymoduleSource).toContain('ɵ1 = function () { return new Foo(); }');
+        expect(mymoduleSource).toContain('ɵ2 = function () { return new Foo(); }');
+        expect(mymoduleSource).toContain('ɵ3 = function () { return new Foo(); }');
+        expect(mymoduleSource).toContain('export { ɵ0, ɵ1, ɵ2, ɵ3');
+      });
+
+      it('should be able to lower an indirect expression', () => {
+        write('mymodule.ts', `
+          import {CommonModule} from '@angular/common';
+          import {NgModule} from '@angular/core';
+
+          class Foo {}
+
+          const factory = () => new Foo();
+
+          @NgModule({
+            imports: [CommonModule],
+            providers: [{provide: 'someToken', useFactory: factory}]
+          })
+          export class MyModule {}
+        `);
+        expect(compile()).toEqual(0, 'Compile failed');
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).toContain('var factory = function () { return new Foo(); }');
+        expect(mymoduleSource).toContain('var ɵ0 = factory;');
+        expect(mymoduleSource).toContain('export { ɵ0 };');
+      });
+
+      it('should not lower a lambda that is already exported', () => {
+        write('mymodule.ts', `
+          import {CommonModule} from '@angular/common';
+          import {NgModule} from '@angular/core';
+
+          export class Foo {}
+
+          export const factory = () => new Foo();
+
+          @NgModule({
+            imports: [CommonModule],
+            providers: [{provide: 'someToken', useFactory: factory}]
+          })
+          export class MyModule {}
+        `);
+        expect(compile()).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).not.toContain('ɵ0');
+      });
+
+      it('should lower an NgModule id', () => {
+        write('mymodule.ts', `
+          import {NgModule} from '@angular/core';
+
+          @NgModule({
+            id: (() => 'test')(),
+          })
+          export class MyModule {}
+        `);
+        expect(compile()).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).toContain('id: ɵ0');
+        expect(mymoduleSource).toMatch(/ɵ0 = .*'test'/);
+      });
+
+      it('should lower loadChildren', () => {
+        write('mymodule.ts', `
+          import {Component, NgModule} from '@angular/core';
+          import {RouterModule} from '@angular/router';
+          
+          export function foo(): string {
+            console.log('side-effect');
+            return 'test';
+          }
+
+          @Component({
+            selector: 'route',
+            template: 'route',
+          })
+          export class Route {}
+
+          @NgModule({
+            declarations: [Route],
+            imports: [
+              RouterModule.forRoot([
+                {path: '', pathMatch: 'full', component: Route, loadChildren: foo()}
+              ]),
+            ]
+          })
+          export class MyModule {}
+        `);
+        expect(compile()).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).toContain('loadChildren: ɵ0');
+        expect(mymoduleSource).toMatch(/ɵ0 = .*foo\(\)/);
+      });
+
+      it('should be able to lower supported expressions', () => {
+        writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["module.ts"]
+        }`);
+        write('module.ts', `
+          import {NgModule, InjectionToken} from '@angular/core';
+          import {AppComponent} from './app';
+
+          export interface Info {
+            route: string;
+            data: string;
+          }
+
+          export const T1 = new InjectionToken<string>('t1');
+          export const T2 = new InjectionToken<string>('t2');
+          export const T3 = new InjectionToken<number>('t3');
+          export const T4 = new InjectionToken<Info[]>('t4');
+
+          enum SomeEnum {
+            OK,
+            Cancel
+          }
+
+          function calculateString() {
+            return 'someValue';
+          }
+
+          const routeLikeData = [{
+             route: '/home',
+             data: calculateString()
+          }];
+
+          @NgModule({
+            declarations: [AppComponent],
+            providers: [
+              { provide: T1, useValue: calculateString() },
+              { provide: T2, useFactory: () => 'someValue' },
+              { provide: T3, useValue: SomeEnum.OK },
+              { provide: T4, useValue: routeLikeData }
+            ]
+          })
+          export class MyModule {}
+        `);
+        write('app.ts', `
+          import {Component, Inject} from '@angular/core';
+          import * as m from './module';
+
+          @Component({
+            selector: 'my-app',
+            template: ''
+          })
+          export class AppComponent {
+            constructor(
+              @Inject(m.T1) private t1: string,
+              @Inject(m.T2) private t2: string,
+              @Inject(m.T3) private t3: number,
+              @Inject(m.T4) private t4: m.Info[],
+            ) {}
+          }
+        `);
+
+        expect(main(['-p', basePath], errorSpy)).toBe(0);
+        shouldExist('module.js');
+      });
+
+      it('should allow to use lowering with export *', () => {
+        write('mymodule.ts', `
+          import {NgModule} from '@angular/core';
+
+          export * from './util';
+
+          // Note: the lambda will be lowered into an exported expression
+          @NgModule({providers: [{provide: 'aToken', useValue: () => 2}]})
+          export class MyModule {}
+        `);
+        write('util.ts', `
+          // Note: The lambda will be lowered into an exported expression
+          const x = () => 2;
+
+          export const y = x;
+        `);
+
+        expect(compile()).toEqual(0);
+
+        const mymoduleSource = fs.readFileSync(path.resolve(outDir, 'mymodule.js'), 'utf8');
+        expect(mymoduleSource).toContain('ɵ0');
+
+        const utilSource = fs.readFileSync(path.resolve(outDir, 'util.js'), 'utf8');
+        expect(utilSource).toContain('ɵ0');
+
+        const mymoduleNgFactoryJs =
+            fs.readFileSync(path.resolve(outDir, 'mymodule.ngfactory.js'), 'utf8');
+        // check that the generated code refers to ɵ0 from mymodule, and not from util!
+        expect(mymoduleNgFactoryJs).toContain(`import * as i1 from "./mymodule"`);
+        expect(mymoduleNgFactoryJs).toContain(`"aToken", i1.ɵ0`);
+      });
+    });
+
+    function writeFlatModule(outFile: string) {
+      writeConfig(`
+      {
+        "extends": "./tsconfig-base.json",
+        "angularCompilerOptions": {
+          "flatModuleId": "flat_module",
+          "flatModuleOutFile": "${outFile}",
+          "skipTemplateCodegen": true,
+          "enableResourceInlining": true
+        },
+        "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 {
+        }`);
+    }
+
+    it('should be able to generate a flat module library', () => {
+      writeFlatModule('index.js');
+
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+      expect(exitCode).toEqual(0);
+      shouldExist('index.js');
+      shouldExist('index.metadata.json');
+    });
+
+    it('should downlevel templates in flat module metadata', () => {
+      writeFlatModule('index.js');
+
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+      expect(exitCode).toEqual(0);
+      shouldExist('index.js');
+      shouldExist('index.metadata.json');
+
+      const metadataPath = path.resolve(outDir, 'index.metadata.json');
+      const metadataSource = fs.readFileSync(metadataPath, 'utf8');
+      expect(metadataSource).not.toContain('templateUrl');
+      expect(metadataSource).toContain('<div>flat module component</div>');
+    });
+
+    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')], errorSpy)).toBe(0);
+      });
+    });
+
+    it('should be able to compile multiple libraries with summaries', () => {
+      // Note: we need to emit the generated code for the libraries
+      // into the node_modules, as that is the only way that we
+      // currently support when using summaries.
+      // TODO(tbosch): add support for `paths` to our CompilerHost.fileNameToModuleName
+      // and then use `paths` here instead of writing to node_modules.
+
+      // Angular
+      write('tsconfig-ng.json', `{
+          "extends": "./tsconfig-base.json",
+          "angularCompilerOptions": {
+            "generateCodeForLibraries": true,
+            "enableSummariesForJit": true
+          },
+          "compilerOptions": {
+            "outDir": "."
+          },
+          "include": ["node_modules/@angular/core/**/*"],
+          "exclude": [
+            "node_modules/@angular/core/test/**",
+            "node_modules/@angular/core/testing/**"
+          ]
+        }`);
+
+      // Lib 1
+      write('lib1/tsconfig-lib1.json', `{
+          "extends": "../tsconfig-base.json",
+          "angularCompilerOptions": {
+            "generateCodeForLibraries": false,
+            "enableSummariesForJit": true
+          },
+          "compilerOptions": {
+            "rootDir": ".",
+            "outDir": "../node_modules/lib1_built"
+          }
+        }`);
+      write('lib1/module.ts', `
+          import {NgModule} from '@angular/core';
+
+          export function someFactory(): any { return null; }
+
+          @NgModule({
+            providers: [{provide: 'foo', useFactory: someFactory}]
+          })
+          export class Module {}
+        `);
+      write('lib1/class1.ts', `export class Class1 {}`);
+
+      // Lib 2
+      write('lib2/tsconfig-lib2.json', `{
+          "extends": "../tsconfig-base.json",
+          "angularCompilerOptions": {
+            "generateCodeForLibraries": false,
+            "enableSummariesForJit": true
+          },
+          "compilerOptions": {
+            "rootDir": ".",
+            "outDir": "../node_modules/lib2_built"
+          }
+        }`);
+      write('lib2/module.ts', `
+          export {Module} from 'lib1_built/module';
+        `);
+      write('lib2/class2.ts', `
+        import {Class1} from 'lib1_built/class1';
+
+        export class Class2 {
+          constructor(class1: Class1) {}
+        }
+      `);
+
+      // Application
+      write('app/tsconfig-app.json', `{
+          "extends": "../tsconfig-base.json",
+          "angularCompilerOptions": {
+            "generateCodeForLibraries": false,
+            "enableSummariesForJit": true
+          },
+          "compilerOptions": {
+            "rootDir": ".",
+            "outDir": "../built/app"
+          }
+        }`);
+      write('app/main.ts', `
+          import {NgModule, Inject} from '@angular/core';
+          import {Module} from 'lib2_built/module';
+
+          @NgModule({
+            imports: [Module]
+          })
+          export class AppModule {
+            constructor(@Inject('foo') public foo: any) {}
+          }
+        `);
+
+      if (!isInBazel()) {
+        // This is not necessary in bazel as it uses the npm_package
+        expect(main(['-p', path.join(basePath, 'tsconfig-ng.json')], errorSpy)).toBe(0);
+      }
+      expect(main(['-p', path.join(basePath, 'lib1', 'tsconfig-lib1.json')], errorSpy)).toBe(0);
+      expect(main(['-p', path.join(basePath, 'lib2', 'tsconfig-lib2.json')], errorSpy)).toBe(0);
+      expect(main(['-p', path.join(basePath, 'app', 'tsconfig-app.json')], errorSpy)).toBe(0);
+
+      // library 1
+      // make `shouldExist` / `shouldNotExist` relative to `node_modules`
+      outDir = path.resolve(basePath, 'node_modules');
+      shouldExist('lib1_built/module.js');
+      shouldExist('lib1_built/module.ngsummary.json');
+      shouldExist('lib1_built/module.ngsummary.js');
+      shouldExist('lib1_built/module.ngsummary.d.ts');
+      shouldExist('lib1_built/module.ngfactory.js');
+      shouldExist('lib1_built/module.ngfactory.d.ts');
+
+      // library 2
+      // make `shouldExist` / `shouldNotExist` relative to `node_modules`
+      outDir = path.resolve(basePath, 'node_modules');
+      shouldExist('lib2_built/module.js');
+      shouldExist('lib2_built/module.ngsummary.json');
+      shouldExist('lib2_built/module.ngsummary.js');
+      shouldExist('lib2_built/module.ngsummary.d.ts');
+      shouldExist('lib2_built/module.ngfactory.js');
+      shouldExist('lib2_built/module.ngfactory.d.ts');
+
+      shouldExist('lib2_built/class2.ngsummary.json');
+      shouldNotExist('lib2_built/class2.ngsummary.js');
+      shouldNotExist('lib2_built/class2.ngsummary.d.ts');
+      shouldExist('lib2_built/class2.ngfactory.js');
+      shouldExist('lib2_built/class2.ngfactory.d.ts');
+
+      // app
+      // make `shouldExist` / `shouldNotExist` relative to `built`
+      outDir = path.resolve(basePath, 'built');
+      shouldExist('app/main.js');
+    });
+
+    if (!isInBazel()) {
+      // This is an unnecessary test bazel as it always uses flat modules
+      it('should be able to compile libraries with summaries and flat modules', () => {
+        writeFiles();
+        compile();
+
+        // libraries
+        // make `shouldExist` / `shouldNotExist` relative to `node_modules`
+        outDir = path.resolve(basePath, 'node_modules');
+        shouldExist('flat_module/index.ngfactory.js');
+        shouldExist('flat_module/index.ngsummary.json');
+
+        // app
+        // make `shouldExist` / `shouldNotExist` relative to `built`
+        outDir = path.resolve(basePath, 'built');
+        shouldExist('app/main.ngfactory.js');
+
+        const factory = fs.readFileSync(path.resolve(outDir, 'app/main.ngfactory.js')).toString();
+        // reference to the module itself
+        expect(factory).toMatch(/from "flat_module"/);
+        // no reference to a deep file
+        expect(factory).not.toMatch(/from "flat_module\//);
+
+        function writeFiles() {
+          createFlatModuleInNodeModules();
+
+          // Angular + flat module
+          write('tsconfig-lib.json', `{
+            "extends": "./tsconfig-base.json",
+            "angularCompilerOptions": {
+              "generateCodeForLibraries": true
+            },
+            "compilerOptions": {
+              "outDir": "."
+            },
+            "include": ["node_modules/@angular/core/**/*", "node_modules/flat_module/**/*"],
+            "exclude": [
+              "node_modules/@angular/core/test/**",
+              "node_modules/@angular/core/testing/**"
+            ]
+          }`);
+
+          // Application
+          write('app/tsconfig-app.json', `{
+            "extends": "../tsconfig-base.json",
+            "angularCompilerOptions": {
+              "generateCodeForLibraries": false
+            },
+            "compilerOptions": {
+              "rootDir": ".",
+              "outDir": "../built/app"
+            }
+          }`);
+          write('app/main.ts', `
+            import {NgModule} from '@angular/core';
+            import {FlatModule} from 'flat_module';
+
+            @NgModule({
+              imports: [FlatModule]
+            })
+            export class AppModule {}
+          `);
+        }
+
+        function createFlatModuleInNodeModules() {
+          // compile the flat module
+          writeFlatModule('index.js');
+          expect(main(['-p', basePath], errorSpy)).toBe(0);
+
+          // move the flat module output into node_modules
+          const flatModuleNodeModulesPath = path.resolve(basePath, 'node_modules', 'flat_module');
+          fs.renameSync(outDir, flatModuleNodeModulesPath);
+          fs.renameSync(
+              path.resolve(basePath, 'src/flat.component.html'),
+              path.resolve(flatModuleNodeModulesPath, 'src/flat.component.html'));
+          // and remove the sources.
+          fs.renameSync(path.resolve(basePath, 'src'), path.resolve(basePath, 'flat_module_src'));
+          fs.unlinkSync(path.resolve(basePath, 'public-api.ts'));
+
+          // add a flatModuleIndexRedirect
+          write('node_modules/flat_module/redirect.metadata.json', `{
+            "__symbolic": "module",
+            "version": 3,
+            "metadata": {},
+            "exports": [
+              {
+                "from": "./index"
+              }
+            ],
+            "flatModuleIndexRedirect": true,
+            "importAs": "flat_module"
+          }`);
+          write('node_modules/flat_module/redirect.d.ts', `export * from './index';`);
+          // add a package.json to use the redirect
+          write('node_modules/flat_module/package.json', `{"typings": "./redirect.d.ts"}`);
+        }
+
+        function compile() {
+          expect(main(['-p', path.join(basePath, 'tsconfig-lib.json')], errorSpy)).toBe(0);
+          expect(main(['-p', path.join(basePath, 'app', 'tsconfig-app.json')], errorSpy)).toBe(0);
+        }
+      });
+    }
+
+    describe('enableResourceInlining', () => {
+      it('should inline templateUrl and styleUrl in JS and metadata', () => {
+        writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"],
+          "angularCompilerOptions": {
+            "enableResourceInlining": true
+          }
+        }`);
+        write('my.component.ts', `
+        import {Component} from '@angular/core';
+        @Component({
+          templateUrl: './my.component.html',
+          styleUrls: ['./my.component.css'],
+        })
+        export class MyComp {}
+      `);
+        write('my.component.html', `<h1>Some template content</h1>`);
+        write('my.component.css', `h1 {color: blue}`);
+        write('mymodule.ts', `
+        import {NgModule} from '@angular/core';
+        import {MyComp} from './my.component';
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+      `);
+
+        const exitCode = main(['-p', basePath]);
+        expect(exitCode).toEqual(0);
+        outDir = path.resolve(basePath, 'built');
+        const outputJs = fs.readFileSync(path.join(outDir, 'my.component.js'), {encoding: 'utf-8'});
+        expect(outputJs).not.toContain('templateUrl');
+        expect(outputJs).not.toContain('styleUrls');
+        expect(outputJs).toContain('Some template content');
+        expect(outputJs).toContain('color: blue');
+
+        const outputMetadata =
+            fs.readFileSync(path.join(outDir, 'my.component.metadata.json'), {encoding: 'utf-8'});
+        expect(outputMetadata).not.toContain('templateUrl');
+        expect(outputMetadata).not.toContain('styleUrls');
+        expect(outputMetadata).toContain('Some template content');
+        expect(outputMetadata).toContain('color: blue');
+      });
+    });
+  });
+
+
+  describe('expression lowering', () => {
+    const shouldExist = (fileName: string) => {
+      if (!fs.existsSync(path.resolve(basePath, fileName))) {
+        throw new Error(`Expected ${fileName} to be emitted (basePath: ${basePath})`);
+      }
+    };
+
+    it('should be able to lower supported expressions', () => {
+      writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "files": ["module.ts"]
+      }`);
+      write('module.ts', `
+        import {NgModule, InjectionToken} from '@angular/core';
+        import {AppComponent} from './app';
+
+        export interface Info {
+          route: string;
+          data: string;
+        }
+
+        export const T1 = new InjectionToken<string>('t1');
+        export const T2 = new InjectionToken<string>('t2');
+        export const T3 = new InjectionToken<number>('t3');
+        export const T4 = new InjectionToken<Info[]>('t4');
+
+        enum SomeEnum {
+          OK,
+          Cancel
+        }
+
+        function calculateString() {
+          return 'someValue';
+        }
+
+        const routeLikeData = [{
+           route: '/home',
+           data: calculateString()
+        }];
+
+        @NgModule({
+          declarations: [AppComponent],
+          providers: [
+            { provide: T1, useValue: calculateString() },
+            { provide: T2, useFactory: () => 'someValue' },
+            { provide: T3, useValue: SomeEnum.OK },
+            { provide: T4, useValue: routeLikeData }
+          ]
+        })
+        export class MyModule {}
+      `);
+      write('app.ts', `
+        import {Component, Inject} from '@angular/core';
+        import * as m from './module';
+
+        @Component({
+          selector: 'my-app',
+          template: ''
+        })
+        export class AppComponent {
+          constructor(
+            @Inject(m.T1) private t1: string,
+            @Inject(m.T2) private t2: string,
+            @Inject(m.T3) private t3: number,
+            @Inject(m.T4) private t4: m.Info[],
+          ) {}
+        }
+      `);
+
+      expect(main(['-p', basePath], s => {})).toBe(0);
+      shouldExist('built/module.js');
+    });
+  });
+
+  describe('watch mode', () => {
+    let timer: (() => void)|undefined = undefined;
+    let results: ((message: string) => void)|undefined = undefined;
+    let originalTimeout: number;
+
+    function trigger() {
+      const delay = 1000;
+      setTimeout(() => {
+        const t = timer;
+        timer = undefined;
+        if (!t) {
+          fail('Unexpected state. Timer was not set.');
+        } else {
+          t();
+        }
+      }, delay);
+    }
+
+    function whenResults(): Promise<string> {
+      return new Promise(resolve => {
+        results = message => {
+          resolve(message);
+          results = undefined;
+        };
+      });
+    }
+
+    function errorSpy(message: string): void {
+      if (results) results(message);
+    }
+
+    beforeEach(() => {
+      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+      jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+      const timerToken = 100;
+      spyOn(ts.sys, 'setTimeout').and.callFake((callback: () => void) => {
+        timer = callback;
+        return timerToken;
+      });
+      spyOn(ts.sys, 'clearTimeout').and.callFake((token: number) => {
+        if (token == timerToken) {
+          timer = undefined;
+        }
+      });
+
+      write('greet.html', `<p class="greeting"> Hello {{name}}!</p>`);
+      write('greet.css', `p.greeting { color: #eee }`);
+      write('greet.ts', `
+        import {Component, Input} from '@angular/core';
+
+        @Component({
+          selector: 'greet',
+          templateUrl: 'greet.html',
+          styleUrls: ['greet.css']
+        })
+        export class Greet {
+          @Input()
+          name: string;
+        }
+      `);
+
+      write('app.ts', `
+        import {Component} from '@angular/core'
+
+        @Component({
+          selector: 'my-app',
+          template: \`
+            <div>
+              <greet [name]='name'></greet>
+            </div>
+          \`,
+        })
+        export class App {
+          name:string;
+          constructor() {
+            this.name = \`Angular!\`
+          }
+        }`);
+
+      write('module.ts', `
+        import {NgModule} from '@angular/core';
+        import {Greet} from './greet';
+        import {App} from './app';
+
+        @NgModule({
+          declarations: [Greet, App]
+        })
+        export class MyModule {}
+      `);
+    });
+
+    afterEach(() => { jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout; });
+
+    function writeAppConfig(location: string) {
+      writeConfig(`{
+            "extends": "./tsconfig-base.json",
+            "compilerOptions": {
+              "outDir": "${location}"
+            }
+          }`);
+    }
+
+    function expectRecompile(cb: () => void) {
+      return (done: DoneFn) => {
+        writeAppConfig('dist');
+        const config = readCommandLineAndConfiguration(['-p', basePath]);
+        const compile = watchMode(config.project, config.options, errorSpy);
+
+        return new Promise(resolve => {
+          compile.ready(() => {
+            cb();
+
+            // Allow the watch callbacks to occur and trigger the timer.
+            trigger();
+
+            // Expect the file to trigger a result.
+            whenResults().then(message => {
+              expect(message).toMatch(/File change detected/);
+              compile.close();
+              done();
+              resolve();
+            });
+          });
+        });
+      };
+    }
+
+    it('should recompile when config file changes', expectRecompile(() => writeAppConfig('dist2')));
+
+    it('should recompile when a ts file changes', expectRecompile(() => {
+         write('greet.ts', `
+          import {Component, Input} from '@angular/core';
+
+          @Component({
+            selector: 'greet',
+            templateUrl: 'greet.html',
+            styleUrls: ['greet.css'],
+          })
+          export class Greet {
+            @Input()
+            name: string;
+            age: number;
+          }
+        `);
+       }));
+
+    it('should recompile when the html file changes',
+       expectRecompile(() => { write('greet.html', '<p> Hello {{name}} again!</p>'); }));
+
+    it('should recompile when the css file changes',
+       expectRecompile(() => { write('greet.css', `p.greeting { color: blue }`); }));
+  });
+
+  describe('regressions', () => {
+    //#20479
+    it('should not generate an invalid metadata file', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "files": ["lib.ts"],
+        "angularCompilerOptions": {
+          "skipTemplateCodegen": true
+        }
+      }`);
+      write('src/lib.ts', `
+        export namespace A{
+          export class C1 {
+          }
+          export interface I1{
+          }
+        }`);
+      expect(main(['-p', path.join(basePath, 'src/tsconfig.json')])).toBe(0);
+      shouldNotExist('src/lib.metadata.json');
+    });
+
+    //#19544
+    it('should recognize @NgModule() directive with a redundant @Injectable()', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "compilerOptions": {
+          "outDir": "../dist",
+          "rootDir": ".",
+          "rootDirs": [
+            ".",
+            "../dist"
+          ]
+        },
+        "files": ["test-module.ts"]
+      }`);
+      write('src/test.component.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '<p>hello</p>',
+        })
+        export class TestComponent {}
+      `);
+      write('src/test-module.ts', `
+        import {Injectable, NgModule} from '@angular/core';
+        import {TestComponent} from './test.component';
+
+        @NgModule({declarations: [TestComponent]})
+        @Injectable()
+        export class TestModule {}
+      `);
+      const messages: string[] = [];
+      const exitCode =
+          main(['-p', path.join(basePath, 'src/tsconfig.json')], message => messages.push(message));
+      expect(exitCode).toBe(0, 'Compile failed unexpectedly.\n  ' + messages.join('\n  '));
+    });
+
+    // #19765
+    it('should not report an error when the resolved .css file is in outside rootDir', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "compilerOptions": {
+          "outDir": "../dist",
+          "rootDir": ".",
+          "rootDirs": [
+            ".",
+            "../dist"
+          ]
+        },
+        "files": ["test-module.ts"]
+      }`);
+      write('src/lib/test.component.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '<p>hello</p>',
+          styleUrls: ['./test.component.css']
+        })
+        export class TestComponent {}
+      `);
+      write('dist/dummy.txt', '');  // Force dist to be created
+      write('dist/lib/test.component.css', `
+        p { color: blue }
+      `);
+      write('src/test-module.ts', `
+        import {NgModule} from '@angular/core';
+        import {TestComponent} from './lib/test.component';
+
+        @NgModule({declarations: [TestComponent]})
+        export class TestModule {}
+      `);
+      const messages: string[] = [];
+      const exitCode =
+          main(['-p', path.join(basePath, 'src/tsconfig.json')], message => messages.push(message));
+      expect(exitCode).toBe(0, 'Compile failed unexpectedly.\n  ' + messages.join('\n  '));
+    });
+
+    it('should emit all structural errors', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "files": ["test-module.ts"]
+      }`);
+      write('src/lib/indirect2.ts', `
+        declare var f: any;
+        export const t2 = f\`<p>hello</p>\`;
+      `);
+      write('src/lib/indirect1.ts', `
+        import {t2} from './indirect2';
+        export const t1 = t2 + ' ';
+      `);
+      write('src/lib/test.component.ts', `
+        import {Component} from '@angular/core';
+        import {t1} from './indirect1';
+
+        @Component({
+          template: t1
+        })
+        export class TestComponent {}
+      `);
+      write('src/test-module.ts', `
+        import {NgModule} from '@angular/core';
+        import {TestComponent} from './lib/test.component';
+
+        @NgModule({declarations: [TestComponent]})
+        export class TestModule {}
+      `);
+      const messages: string[] = [];
+      const exitCode =
+          main(['-p', path.join(basePath, 'src/tsconfig.json')], message => messages.push(message));
+      expect(exitCode).toBe(1, 'Compile was expected to fail');
+      expect(messages[0]).toContain('Tagged template expressions are not supported in metadata');
+    });
+
+    // Regression: #20076
+    it('should report template error messages', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "files": ["test-module.ts"]
+      }`);
+      write('src/lib/test.component.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '{{thing.?stuff}}'
+        })
+        export class TestComponent {
+          thing: string;
+        }
+      `);
+      write('src/test-module.ts', `
+        import {NgModule} from '@angular/core';
+        import {TestComponent} from './lib/test.component';
+
+        @NgModule({declarations: [TestComponent]})
+        export class TestModule {}
+      `);
+      const messages: string[] = [];
+      const exitCode =
+          main(['-p', path.join(basePath, 'src/tsconfig.json')], message => messages.push(message));
+      expect(exitCode).toBe(1, 'Compile was expected to fail');
+      expect(messages[0]).toContain('Parser Error: Unexpected token');
+    });
+
+    // Regression test for #19979
+    it('should not stack overflow on a recursive module export', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "files": ["test-module.ts"]
+      }`);
+
+      write('src/test-module.ts', `
+        import {Component, NgModule} from '@angular/core';
+
+        @Component({
+          template: 'Hello'
+        })
+        export class MyFaultyComponent {}
+
+        @NgModule({
+          exports: [MyFaultyModule],
+          declarations: [MyFaultyComponent],
+          providers: [],
+        })
+        export class MyFaultyModule { }
+      `);
+      const messages: string[] = [];
+      expect(
+          main(['-p', path.join(basePath, 'src/tsconfig.json')], message => messages.push(message)))
+          .toBe(1, 'Compile was expected to fail');
+      expect(messages[0]).toContain(`module 'MyFaultyModule' is exported recursively`);
+    });
+
+    // Regression test for #19979
+    it('should not stack overflow on a recursive module import', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "files": ["test-module.ts"]
+      }`);
+
+      write('src/test-module.ts', `
+        import {Component, NgModule, forwardRef} from '@angular/core';
+
+        @Component({
+          template: 'Hello'
+        })
+        export class MyFaultyComponent {}
+
+        @NgModule({
+          imports: [forwardRef(() => MyFaultyModule)]
+        })
+        export class MyFaultyImport {}
+
+        @NgModule({
+          imports: [MyFaultyImport],
+          declarations: [MyFaultyComponent]
+        })
+        export class MyFaultyModule { }
+      `);
+      const messages: string[] = [];
+      expect(
+          main(['-p', path.join(basePath, 'src/tsconfig.json')], message => messages.push(message)))
+          .toBe(1, 'Compile was expected to fail');
+      expect(messages[0]).toContain(`is imported recursively by the module 'MyFaultyImport`);
+    });
+
+    // Regression test for #21273
+    it('should not report errors for unknown property annotations', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "files": ["test-module.ts"]
+      }`);
+
+      write('src/test-decorator.ts', `
+        export function Convert(p: any): any {
+          // Make sur this doesn't look like a macro function
+          var r = p;
+          return r;
+        }
+      `);
+      write('src/test-module.ts', `
+        import {Component, Input, NgModule} from '@angular/core';
+        import {Convert} from './test-decorator';
+
+        @Component({template: '{{name}}'})
+        export class TestComponent {
+          @Input() @Convert(convert) name: string;
+        }
+
+        function convert(n: any) { return n; }
+
+        @NgModule({declarations: [TestComponent]})
+        export class TestModule {}
+      `);
+      const messages: string[] = [];
+      expect(
+          main(['-p', path.join(basePath, 'src/tsconfig.json')], message => messages.push(message)))
+          .toBe(0, `Compile failed:\n ${messages.join('\n    ')}`);
+    });
+
+    it('should allow using 2 classes with the same name in declarations with noEmitOnError=true',
+       () => {
+         write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "compilerOptions": {
+          "noEmitOnError": true
+        },
+        "files": ["test-module.ts"]
+      }`);
+         function writeComp(fileName: string) {
+           write(fileName, `
+        import {Component} from '@angular/core';
+
+        @Component({selector: 'comp', template: ''})
+        export class TestComponent {}
+      `);
+         }
+         writeComp('src/comp1.ts');
+         writeComp('src/comp2.ts');
+         write('src/test-module.ts', `
+        import {NgModule} from '@angular/core';
+        import {TestComponent as Comp1} from './comp1';
+        import {TestComponent as Comp2} from './comp2';
+
+        @NgModule({
+          declarations: [Comp1, Comp2],
+        })
+        export class MyModule {}
+      `);
+         expect(main(['-p', path.join(basePath, 'src/tsconfig.json')])).toBe(0);
+       });
+
+    it('should not type check a .js files from node_modules with allowJs', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "compilerOptions": {
+          "noEmitOnError": true,
+          "allowJs": true,
+          "declaration": false
+        },
+        "files": ["test-module.ts"]
+      }`);
+      write('src/test-module.ts', `
+        import {Component, NgModule} from '@angular/core';
+        import 'my-library';
+
+        @Component({
+          template: 'hello'
+        })
+        export class HelloCmp {}
+
+        @NgModule({
+          declarations: [HelloCmp],
+        })
+        export class MyModule {}
+      `);
+      write('src/node_modules/t.txt', ``);
+      write('src/node_modules/my-library/index.js', `
+        export someVar = 1;
+        export someOtherVar = undefined + 1;
+      `);
+      expect(main(['-p', path.join(basePath, 'src/tsconfig.json')])).toBe(0);
+    });
+  });
+
+  describe('formatted messages', () => {
+    it('should emit a formatted error message for a structural error', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "files": ["test-module.ts"]
+      }`);
+      write('src/lib/indirect2.ts', `
+        declare var f: any;
+
+        export const t2 = f\`<p>hello</p>\`;
+      `);
+      write('src/lib/indirect1.ts', `
+        import {t2} from './indirect2';
+        export const t1 = t2 + ' ';
+      `);
+      write('src/lib/test.component.ts', `
+        import {Component} from '@angular/core';
+        import {t1} from './indirect1';
+
+        @Component({
+          template: t1,
+          styleUrls: ['./test.component.css']
+        })
+        export class TestComponent {}
+      `);
+      write('src/test-module.ts', `
+        import {NgModule} from '@angular/core';
+        import {TestComponent} from './lib/test.component';
+
+        @NgModule({declarations: [TestComponent]})
+        export class TestModule {}
+      `);
+      const messages: string[] = [];
+      const exitCode =
+          main(['-p', path.join(basePath, 'src/tsconfig.json')], message => messages.push(message));
+      expect(exitCode).toBe(1, 'Compile was expected to fail');
+      expect(messages[0])
+          .toEqual(`lib/test.component.ts(6,21): Error during template compile of 'TestComponent'
+  Tagged template expressions are not supported in metadata in 't1'
+    't1' references 't2' at lib/indirect1.ts(3,27)
+      't2' contains the error at lib/indirect2.ts(4,27).
+`);
+    });
+  });
+
+  describe('ivy', () => {
+    function emittedFile(name: string): string {
+      const outputName = path.resolve(outDir, name);
+      expect(fs.existsSync(outputName)).toBe(true);
+      return fs.readFileSync(outputName, {encoding: 'UTF-8'});
+    }
+
+    it('should emit the hello world example', () => {
+      write('tsconfig.json', `{
+        "extends": "./tsconfig-base.json",
+        "files": ["hello-world.ts"],
+        "angularCompilerOptions": {
+          "enableIvy": true
+        }
+      }`);
+
+      write('hello-world.ts', `
+        import {Component, NgModule} from '@angular/core';
+
+        @Component({
+          selector: 'hello-world',
+          template: 'Hello, world!'
+        })
+        export class HelloWorldComponent {
+
+        }
+
+        @NgModule({
+          declarations: [HelloWorldComponent]
+        })
+        export class HelloWorldModule {}
+      `);
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')]);
+      expect(exitCode).toBe(0, 'Compile failed');
+      expect(emittedFile('hello-world.js')).toContain('ngComponentDef');
+      expect(emittedFile('hello-world.js')).toContain('HelloWorldComponent_Factory');
+    });
+
+    it('should emit an injection of a string token', () => {
+      write('tsconfig.json', `{
+        "extends": "./tsconfig-base.json",
+        "files": ["hello-world.ts"],
+        "angularCompilerOptions": {
+          "enableIvy": true
+        }
+      }`);
+
+      write('hello-world.ts', `
+        import {Component, Inject, NgModule} from '@angular/core';
+
+        @Component({
+          selector: 'hello-world',
+          template: 'Hello, world!'
+        })
+        export class HelloWorldComponent {
+          constructor (@Inject('test') private test: string) {}
+        }
+
+        @NgModule({
+          declarations: [HelloWorldComponent],
+          providers: [
+            {provide: 'test', useValue: 'test'}
+          ]
+        })
+        export class HelloWorldModule {}
+      `);
+      const errors: string[] = [];
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], msg => errors.push(msg));
+      expect(exitCode).toBe(0, `Compile failed:\n${errors.join('\n  ')}`);
+      expect(emittedFile('hello-world.js')).toContain('ngComponentDef');
+    });
+
+    it('should emit an example that uses the E() instruction', () => {
+      write('tsconfig.json', `{
+        "extends": "./tsconfig-base.json",
+        "files": ["hello-world.ts"],
+        "angularCompilerOptions": {
+          "enableIvy": true
+        }
+      }`);
+
+      write('hello-world.ts', `
+        import {Component, NgModule} from '@angular/core';
+
+        @Component({
+          selector: 'hello-world',
+          template: '<h1><div style="text-align:center"> Hello, {{name}}! </div></h1> '
+        })
+        export class HelloWorldComponent {
+          name = 'World';
+        }
+
+        @NgModule({declarations: [HelloWorldComponent]})
+        export class HelloWorldModule {}
+      `);
+      const errors: string[] = [];
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], msg => errors.push(msg));
+      expect(exitCode).toBe(0, `Compile failed:\n${errors.join('\n  ')}`);
+      expect(emittedFile('hello-world.js')).toContain('ngComponentDef');
+    });
+  });
+
+  describe('tree shakeable services', () => {
+
+    function compileService(source: string): string {
+      write('service.ts', source);
+
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+      expect(exitCode).toEqual(0);
+
+      const servicePath = path.resolve(outDir, 'service.js');
+      return fs.readFileSync(servicePath, 'utf8');
+    }
+
+    beforeEach(() => {
+      writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "files": ["service.ts"]
+      }`);
+      write('module.ts', `
+        import {NgModule} from '@angular/core';
+
+        @NgModule({})
+        export class Module {}
+      `);
+    });
+
+    describe(`doesn't break existing injectables`, () => {
+      it('on simple services', () => {
+        const source = compileService(`
+        import {Injectable, NgModule} from '@angular/core';
+
+        @Injectable()
+        export class Service {
+          constructor(public param: string) {}
+        }
+
+        @NgModule({
+          providers: [{provide: Service, useValue: new Service('test')}],
+        })
+        export class ServiceModule {}
+        `);
+        expect(source).not.toMatch(/ngInjectableDef/);
+      });
+      it('on a service with a base class service', () => {
+        const source = compileService(`
+        import {Injectable, NgModule} from '@angular/core';
+
+        @Injectable()
+        export class Dep {}
+
+        export class Base {
+          constructor(private dep: Dep) {}
+        }
+        @Injectable()
+        export class Service extends Base {}
+
+        @NgModule({
+          providers: [Service],
+        })
+        export class ServiceModule {}
+        `);
+        expect(source).not.toMatch(/ngInjectableDef/);
+      });
+    });
+
+    it('compiles a basic InjectableDef', () => {
+      const source = compileService(`
+        import {Injectable} from '@angular/core';
+        import {Module} from './module';
+
+        @Injectable({
+          providedIn: Module,
+        })
+        export class Service {}
+      `);
+      expect(source).toMatch(/ngInjectableDef = .+\.defineInjectable\(/);
+      expect(source).toMatch(/ngInjectableDef.*token: Service/);
+      expect(source).toMatch(/ngInjectableDef.*providedIn: .+\.Module/);
+    });
+
+    it('ngInjectableDef in es5 mode is annotated @nocollapse when closure options are enabled',
+       () => {
+         writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "angularCompilerOptions": {
+          "annotateForClosureCompiler": true
+        },
+        "files": ["service.ts"]
+      }`);
+         const source = compileService(`
+        import {Injectable} from '@angular/core';
+        import {Module} from './module';
+
+        @Injectable({
+          providedIn: Module,
+        })
+        export class Service {}
+      `);
+         expect(source).toMatch(/\/\*\* @nocollapse \*\/ Service\.ngInjectableDef =/);
+       });
+
+    it('compiles a useValue InjectableDef', () => {
+      const source = compileService(`
+        import {Injectable} from '@angular/core';
+        import {Module} from './module';
+
+        export const CONST_SERVICE: Service = null;
+
+        @Injectable({
+          providedIn: Module,
+          useValue: CONST_SERVICE
+        })
+        export class Service {}
+      `);
+      expect(source).toMatch(/ngInjectableDef.*return CONST_SERVICE/);
+    });
+
+    it('compiles a useExisting InjectableDef', () => {
+      const source = compileService(`
+        import {Injectable} from '@angular/core';
+        import {Module} from './module';
+
+        @Injectable()
+        export class Existing {}
+
+        @Injectable({
+          providedIn: Module,
+          useExisting: Existing,
+        })
+        export class Service {}
+      `);
+      expect(source).toMatch(/ngInjectableDef.*return ..\.inject\(Existing\)/);
+    });
+
+    it('compiles a useFactory InjectableDef with optional dep', () => {
+      const source = compileService(`
+        import {Injectable, Optional} from '@angular/core';
+        import {Module} from './module';
+
+        @Injectable()
+        export class Existing {}
+
+        @Injectable({
+          providedIn: Module,
+          useFactory: (existing: Existing|null) => new Service(existing),
+          deps: [[new Optional(), Existing]],
+        })
+        export class Service {
+          constructor(e: Existing|null) {}
+        }
+      `);
+      expect(source).toMatch(/ngInjectableDef.*return ..\(..\.inject\(Existing, 8\)/);
+    });
+
+    it('compiles a useFactory InjectableDef with skip-self dep', () => {
+      const source = compileService(`
+        import {Injectable, SkipSelf} from '@angular/core';
+        import {Module} from './module';
+
+        @Injectable()
+        export class Existing {}
+
+        @Injectable({
+          providedIn: Module,
+          useFactory: (existing: Existing) => new Service(existing),
+          deps: [[new SkipSelf(), Existing]],
+        })
+        export class Service {
+          constructor(e: Existing) {}
+        }
+      `);
+      expect(source).toMatch(/ngInjectableDef.*return ..\(..\.inject\(Existing, 4\)/);
+    });
+
+    it('compiles a service that depends on a token', () => {
+      const source = compileService(`
+        import {Inject, Injectable, InjectionToken} from '@angular/core';
+        import {Module} from './module';
+
+        export const TOKEN = new InjectionToken('desc', {providedIn: Module, factory: () => true});
+
+        @Injectable({
+          providedIn: Module,
+        })
+        export class Service {
+          constructor(@Inject(TOKEN) value: boolean) {}
+        }
+      `);
+      expect(source).toMatch(/ngInjectableDef = .+\.defineInjectable\(/);
+      expect(source).toMatch(/ngInjectableDef.*token: Service/);
+      expect(source).toMatch(/ngInjectableDef.*providedIn: .+\.Module/);
+    });
+
+    it('generates exports.* references when outputting commonjs', () => {
+      writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "compilerOptions": {
+          "module": "commonjs"
+        },
+        "files": ["service.ts"]
+      }`);
+      const source = compileService(`
+        import {Inject, Injectable, InjectionToken} from '@angular/core';
+        import {Module} from './module';
+
+        export const TOKEN = new InjectionToken<string>('test token', {
+          providedIn: 'root',
+          factory: () => 'this is a test',
+        });
+
+        @Injectable({providedIn: 'root'})
+        export class Service {
+          constructor(@Inject(TOKEN) token: any) {}
+        }
+      `);
+      expect(source).toMatch(/new Service\(i0\.inject\(exports\.TOKEN\)\);/);
+    });
+  });
+
+  describe('ngInjectorDef', () => {
+    it('is applied with lowered metadata', () => {
+      writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "files": ["module.ts"],
+        "angularCompilerOptions": {
+          "enableIvy": true,
+          "skipTemplateCodegen": true
+        }
+      }`);
+      write('module.ts', `
+        import {Injectable, NgModule} from '@angular/core';
+
+        @Injectable()
+        export class ServiceA {}
+
+        @Injectable()
+        export class ServiceB {}
+
+        @NgModule()
+        export class Exported {}
+
+        @NgModule({
+          providers: [ServiceA]
+        })
+        export class Imported {
+          static forRoot() {
+           console.log('not statically analyzable');
+            return {
+              ngModule: Imported,
+              providers: [] as any,
+            };
+          }
+        }
+
+        @NgModule({
+          providers: [ServiceA, ServiceB],
+          imports: [Imported.forRoot()],
+          exports: [Exported],
+        })
+        export class Module {}
+      `);
+
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+      expect(exitCode).toEqual(0);
+
+      const modulePath = path.resolve(outDir, 'module.js');
+      const moduleSource = fs.readFileSync(modulePath, 'utf8');
+      expect(moduleSource)
+          .toContain('var ɵ1 = [ServiceA, ServiceB], ɵ2 = [Imported.forRoot()], ɵ3 = [Exported];');
+      expect(moduleSource)
+          .toContain(
+              'Imported.ngInjectorDef = i0.defineInjector({ factory: function Imported_Factory() { return new Imported(); }, providers: ɵ0, imports: [] });');
+      expect(moduleSource)
+          .toContain(
+              'Module.ngInjectorDef = i0.defineInjector({ factory: function Module_Factory() { return new Module(); }, providers: ɵ1, imports: [ɵ2, ɵ3] });');
+    });
+
+    it('strips decorator in ivy mode', () => {
+      writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "files": ["service.ts"],
+        "angularCompilerOptions": {
+          "enableIvy": true
+        }
+      }`);
+      write('service.ts', `
+        import {Injectable, Self} from '@angular/core';  
+
+        @Injectable()
+        export class ServiceA {}
+
+        @Injectable()
+        @Self()
+        export class ServiceB {}
+      `);
+
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+      expect(exitCode).toEqual(0);
+
+      const modulePath = path.resolve(outDir, 'service.js');
+      const moduleSource = fs.readFileSync(modulePath, 'utf8');
+      expect(moduleSource).not.toMatch(/ServiceA\.decorators =/);
+      expect(moduleSource).toMatch(/ServiceB\.decorators =/);
+      expect(moduleSource).toMatch(/type: Self/);
+      expect(moduleSource).not.toMatch(/type: Injectable/);
+    });
+
+    it('rewrites Injector to INJECTOR in Ivy factory functions ', () => {
+      writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "files": ["service.ts"],
+        "angularCompilerOptions": {
+          "enableIvy": true
+        }
+      }`);
+
+      write('service.ts', `
+        import {Injectable, Injector} from '@angular/core';
+
+        @Injectable()
+        export class Service {
+          constructor(private injector: Injector) {}
+        }
+      `);
+
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+      expect(exitCode).toEqual(0);
+
+      const modulePath = path.resolve(outDir, 'service.js');
+      const moduleSource = fs.readFileSync(modulePath, 'utf8');
+      expect(moduleSource).not.toMatch(/inject\(i0\.Injector/);
+      expect(moduleSource).toMatch(/inject\(i0\.INJECTOR/);
+    });
+  });
+
+  it('libraries should not break strictMetadataEmit', () => {
+    // first only generate .d.ts / .js / .metadata.json files
+    writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "angularCompilerOptions": {
+          "skipTemplateCodegen": true,
+          "strictMetadataEmit": true,
+          "fullTemplateTypeCheck": true
+        },
+        "compilerOptions": {
+          "outDir": "lib"
+        },
+        "files": ["main.ts", "test.d.ts"]
+      }`);
+    write('main.ts', `
+        import {Test} from './test';
+        export const bar = Test.bar;
+    `);
+    write('test.d.ts', `
+        declare export class Test {
+          static bar: string;
+        }
+    `);
+    let exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+    expect(exitCode).toEqual(0);
+  });
+});
diff --git a/packages/compiler-cli/test/ngcc/BUILD.bazel b/packages/compiler-cli/test/ngcc/BUILD.bazel
new file mode 100644
index 000000000000..9745a3f6bd12
--- /dev/null
+++ b/packages/compiler-cli/test/ngcc/BUILD.bazel
@@ -0,0 +1,28 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+# Integration tests
+ts_library(
+    name = "ngcc_lib",
+    testonly = 1,
+    srcs = glob([
+        "**/*_spec.ts",
+    ]),
+    deps = [
+        "//packages/compiler-cli/src/ngcc",
+        "//packages/compiler-cli/test:test_utils",
+    ],
+)
+
+jasmine_node_test(
+    name = "ngcc",
+    bootstrap = ["angular/tools/testing/init_node_no_angular_spec.js"],
+    data = [
+        "//packages/common:npm_package",
+        "//packages/core:npm_package",
+    ],
+    deps = [
+        ":ngcc_lib",
+        "//tools/testing:node_no_angular",
+    ],
+)
diff --git a/packages/compiler-cli/test/ngcc/ngcc_spec.ts b/packages/compiler-cli/test/ngcc/ngcc_spec.ts
new file mode 100644
index 000000000000..aab460be005c
--- /dev/null
+++ b/packages/compiler-cli/test/ngcc/ngcc_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 * as fs from 'fs';
+import * as path from 'path';
+import {cat, find} from 'shelljs';
+
+import {mainNgcc} from '../../src/ngcc/src/main';
+
+import {TestSupport, isInBazel, setup} from '../test_support';
+
+function setupNodeModules(support: TestSupport): void {
+  const corePath = path.join(process.env.TEST_SRCDIR, 'angular/packages/core/npm_package');
+  const commonPath = path.join(process.env.TEST_SRCDIR, 'angular/packages/common/npm_package');
+
+  const nodeModulesPath = path.join(support.basePath, 'node_modules');
+  const angularCoreDirectory = path.join(nodeModulesPath, '@angular/core');
+  const angularCommonDirectory = path.join(nodeModulesPath, '@angular/common');
+
+  // fs.symlinkSync(corePath, angularCoreDirectory);
+  // fs.symlinkSync(commonPath, angularCommonDirectory);
+}
+
+describe('ngcc behavioral tests', () => {
+  if (!isInBazel()) {
+    // These tests should be excluded from the non-Bazel build.
+    return;
+  }
+
+  let basePath: string;
+  let outDir: string;
+  let write: (fileName: string, content: string) => void;
+  let errorSpy: jasmine.Spy&((s: string) => void);
+
+  function shouldExist(fileName: string) {
+    if (!fs.existsSync(path.resolve(outDir, fileName))) {
+      throw new Error(`Expected ${fileName} to be emitted (outDir: ${outDir})`);
+    }
+  }
+
+  function shouldNotExist(fileName: string) {
+    if (fs.existsSync(path.resolve(outDir, fileName))) {
+      throw new Error(`Did not expect ${fileName} to be emitted (outDir: ${outDir})`);
+    }
+  }
+
+  function getContents(fileName: string): string {
+    shouldExist(fileName);
+    const modulePath = path.resolve(outDir, fileName);
+    return fs.readFileSync(modulePath, 'utf8');
+  }
+
+  function writeConfig(
+      tsconfig: string =
+          '{"extends": "./tsconfig-base.json", "angularCompilerOptions": {"enableIvy": "ngtsc"}}') {
+    write('tsconfig.json', tsconfig);
+  }
+
+  beforeEach(() => {
+    errorSpy = jasmine.createSpy('consoleError').and.callFake(console.error);
+    const support = setup();
+    basePath = support.basePath;
+    outDir = path.join(basePath, 'built');
+    process.chdir(basePath);
+    write = (fileName: string, content: string) => { support.write(fileName, content); };
+
+    setupNodeModules(support);
+  });
+
+  it('should run ngcc without errors', () => {
+    const nodeModulesPath = path.join(basePath, 'node_modules');
+    console.error(nodeModulesPath);
+    const commonPath = path.join(nodeModulesPath, '@angular/common');
+    const exitCode = mainNgcc([commonPath]);
+
+    console.warn(find('node_modules_ngtsc').filter(p => p.endsWith('.js') || p.endsWith('map')));
+
+    console.warn(cat('node_modules_ngtsc/@angular/common/fesm2015/common.js').stdout);
+    console.warn(cat('node_modules_ngtsc/@angular/common/fesm2015/common.js.map').stdout);
+
+    expect(exitCode).toBe(0);
+  });
+});
diff --git a/packages/compiler-cli/test/ngtools_api_spec.ts b/packages/compiler-cli/test/ngtools_api_spec.ts
new file mode 100644
index 000000000000..bab62130151f
--- /dev/null
+++ b/packages/compiler-cli/test/ngtools_api_spec.ts
@@ -0,0 +1,89 @@
+/**
+ * @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 {__NGTOOLS_PRIVATE_API_2 as NgTools_InternalApi_NG_2} from '@angular/compiler-cli';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {TestSupport, setup} from './test_support';
+
+describe('ngtools_api (deprecated)', () => {
+  let testSupport: TestSupport;
+
+  beforeEach(() => { testSupport = setup(); });
+
+  function createProgram(rootNames: string[]) {
+    const options = testSupport.createCompilerOptions();
+    const host = ts.createCompilerHost(options, true);
+    const program =
+        ts.createProgram(rootNames.map(p => path.resolve(testSupport.basePath, p)), options, host);
+    return {program, host, options};
+  }
+
+  function writeSomeRoutes() {
+    testSupport.writeFiles({
+      'src/main.ts': `
+        import {NgModule, Component} from '@angular/core';
+        import {RouterModule} from '@angular/router';
+
+        // Component with metadata errors.
+        @Component(() => {if (1==1) return null as any;})
+        export class ErrorComp2 {}
+
+        @NgModule({
+          declarations: [ErrorComp2, NonExistentComp],
+          imports: [RouterModule.forRoot([{loadChildren: './child#ChildModule'}])]
+        })
+        export class MainModule {}
+      `,
+      'src/child.ts': `
+        import {NgModule} from '@angular/core';
+        import {RouterModule} from '@angular/router';
+
+        @NgModule({
+          imports: [RouterModule.forChild([{loadChildren: './child2#ChildModule2'}])]
+        })
+        export class ChildModule {}
+      `,
+      'src/child2.ts': `
+        import {NgModule} from '@angular/core';
+
+        @NgModule()
+        export class ChildModule2 {}
+      `,
+    });
+  }
+
+  it('should list lazy routes recursively', () => {
+    writeSomeRoutes();
+    const {program, host, options} = createProgram(['src/main.ts']);
+    const routes = NgTools_InternalApi_NG_2.listLazyRoutes({
+      program,
+      host,
+      angularCompilerOptions: options,
+      entryModule: 'src/main#MainModule',
+    });
+    expect(routes).toEqual({
+      './child#ChildModule': path.resolve(testSupport.basePath, 'src/child.ts'),
+      './child2#ChildModule2': path.resolve(testSupport.basePath, 'src/child2.ts'),
+    });
+  });
+
+  it('should allow to emit the program after analyzing routes', () => {
+    writeSomeRoutes();
+    const {program, host, options} = createProgram(['src/main.ts']);
+    NgTools_InternalApi_NG_2.listLazyRoutes({
+      program,
+      host,
+      angularCompilerOptions: options,
+      entryModule: 'src/main#MainModule',
+    });
+    program.emit();
+    testSupport.shouldExist('built/src/main.js');
+  });
+});
diff --git a/packages/compiler-cli/test/ngtsc/BUILD.bazel b/packages/compiler-cli/test/ngtsc/BUILD.bazel
new file mode 100644
index 000000000000..dfa3f80bfab2
--- /dev/null
+++ b/packages/compiler-cli/test/ngtsc/BUILD.bazel
@@ -0,0 +1,27 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "ngtsc_lib",
+    testonly = 1,
+    srcs = [
+        "ngtsc_spec.ts",
+    ],
+    deps = [
+        "//packages/compiler",
+        "//packages/compiler-cli",
+        "//packages/compiler-cli/test:test_utils",
+    ],
+)
+
+jasmine_node_test(
+    name = "ngtsc",
+    bootstrap = ["angular/tools/testing/init_node_no_angular_spec.js"],
+    data = [
+        "//packages/compiler-cli/test/ngtsc/fake_core:npm_package",
+    ],
+    deps = [
+        ":ngtsc_lib",
+        "//tools/testing:node_no_angular",
+    ],
+)
diff --git a/packages/compiler-cli/test/ngtsc/fake_core/BUILD.bazel b/packages/compiler-cli/test/ngtsc/fake_core/BUILD.bazel
new file mode 100644
index 000000000000..b8af5238a307
--- /dev/null
+++ b/packages/compiler-cli/test/ngtsc/fake_core/BUILD.bazel
@@ -0,0 +1,22 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_package", "ts_library")
+
+ts_library(
+    name = "fake_core",
+    srcs = [
+        "index.ts",
+    ],
+    module_name = "@angular/core",
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+    ],
+    entry_point = "packages/fake_core/index.js",
+    deps = [
+        ":fake_core",
+    ],
+)
diff --git a/packages/compiler-cli/test/ngtsc/fake_core/README.md b/packages/compiler-cli/test/ngtsc/fake_core/README.md
new file mode 100644
index 000000000000..48869a674d18
--- /dev/null
+++ b/packages/compiler-cli/test/ngtsc/fake_core/README.md
@@ -0,0 +1,13 @@
+`fake_core` is a library designed to expose some of the same symbols as `@angular/core`, without
+requiring compilation of the whole of `@angular/core`. This enables unit tests for the compiler to
+be written without incurring long rebuilds for every change.
+
+* `@angular/core` is compiled with `@angular/compiler-cli`, and therefore has an implicit dependency
+on it. Therefore core must be rebuilt if the compiler changes.
+* Tests for the compiler which intend to build code that depends on `@angular/core` must have
+a data dependency on `@angular/core`. Therefore core must be built to run the compiler tests, and
+thus rebuilt if the compiler changes.
+
+This rebuild cycle is expensive and slow. `fake_core` avoids this by exposing a subset of the
+`@angular/core` API, which enables applications to be built by the ngtsc compiler without
+needing a full version of core present at compile time.
diff --git a/packages/compiler-cli/test/ngtsc/fake_core/index.ts b/packages/compiler-cli/test/ngtsc/fake_core/index.ts
new file mode 100644
index 000000000000..89e622ae45ce
--- /dev/null
+++ b/packages/compiler-cli/test/ngtsc/fake_core/index.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 FnWithArg<T> {
+  (...args: any[]): T;
+  new (...args: any[]): T;
+}
+
+function callableClassDecorator(): FnWithArg<(clazz: any) => any> {
+  return null !;
+}
+
+function callableParamDecorator(): FnWithArg<(a: any, b: any, c: any) => void> {
+  return null !;
+}
+
+function callablePropDecorator(): FnWithArg<(a: any, b: any) => any> {
+  return null !;
+}
+
+export const Component = callableClassDecorator();
+export const Directive = callableClassDecorator();
+export const Injectable = callableClassDecorator();
+export const NgModule = callableClassDecorator();
+export const Pipe = callableClassDecorator();
+
+export const Attribute = callableParamDecorator();
+export const Inject = callableParamDecorator();
+export const Self = callableParamDecorator();
+export const SkipSelf = callableParamDecorator();
+export const Optional = callableParamDecorator();
+
+export const ContentChild = callablePropDecorator();
+export const ContentChildren = callablePropDecorator();
+export const HostBinding = callablePropDecorator();
+export const HostListener = callablePropDecorator();
+export const ViewChild = callablePropDecorator();
+export const ViewChildren = callablePropDecorator();
+
+export type ModuleWithProviders<T> = any;
+
+export class ChangeDetectorRef {}
+export class ElementRef {}
+export class Injector {}
+export class TemplateRef<T = any> {}
+export class ViewContainerRef {}
+export class ɵNgModuleFactory<T> {
+  constructor(public clazz: T) {}
+}
+
+export function forwardRef<T>(fn: () => T): T {
+  return fn();
+}
+
+export interface SimpleChanges { [propName: string]: any; }
\ No newline at end of file
diff --git a/packages/compiler-cli/test/ngtsc/fake_core/package.json b/packages/compiler-cli/test/ngtsc/fake_core/package.json
new file mode 100644
index 000000000000..e26b2be3d85a
--- /dev/null
+++ b/packages/compiler-cli/test/ngtsc/fake_core/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@angular/core",
+  "version": "0.0.0-FAKE-FOR-TESTS",
+  "description": "Fake version of core for ngtsc tests",
+  "main": "./bundles/fake_core.umd.js",
+  "module": "./fesm5/fake_core.js",
+  "es2015": "./fesm2015/fake_core.js",
+  "esm5": "./esm5/index.js",
+  "esm2015": "./esm2015/index.js",
+  "fesm5": "./fesm5/fake_core.js",
+  "fesm2015": "./fesm2015/fake_core.js",
+  "typings": "./index.d.ts"
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
new file mode 100644
index 000000000000..1ea954a64bf0
--- /dev/null
+++ b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
@@ -0,0 +1,750 @@
+/**
+ * @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 fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {main, readCommandLineAndConfiguration, watchMode} from '../../src/main';
+import {TestSupport, isInBazel, makeTempDir, setup} from '../test_support';
+
+function setupFakeCore(support: TestSupport): void {
+  const fakeCore = path.join(
+      process.env.TEST_SRCDIR, 'angular/packages/compiler-cli/test/ngtsc/fake_core/npm_package');
+
+  const nodeModulesPath = path.join(support.basePath, 'node_modules');
+  const angularCoreDirectory = path.join(nodeModulesPath, '@angular/core');
+
+  fs.symlinkSync(fakeCore, angularCoreDirectory);
+}
+
+function getNgRootDir() {
+  const moduleFilename = module.filename.replace(/\\/g, '/');
+  const distIndex = moduleFilename.indexOf('/dist/all');
+  return moduleFilename.substr(0, distIndex);
+}
+
+describe('ngtsc behavioral tests', () => {
+  if (!isInBazel()) {
+    // These tests should be excluded from the non-Bazel build.
+    return;
+  }
+
+  let basePath: string;
+  let outDir: string;
+  let write: (fileName: string, content: string) => void;
+  let errorSpy: jasmine.Spy&((s: string) => void);
+
+  function shouldExist(fileName: string) {
+    if (!fs.existsSync(path.resolve(outDir, fileName))) {
+      throw new Error(`Expected ${fileName} to be emitted (outDir: ${outDir})`);
+    }
+  }
+
+  function shouldNotExist(fileName: string) {
+    if (fs.existsSync(path.resolve(outDir, fileName))) {
+      throw new Error(`Did not expect ${fileName} to be emitted (outDir: ${outDir})`);
+    }
+  }
+
+  function getContents(fileName: string): string {
+    shouldExist(fileName);
+    const modulePath = path.resolve(outDir, fileName);
+    return fs.readFileSync(modulePath, 'utf8');
+  }
+
+  function writeConfig(extraOpts: {[key: string]: string | boolean} = {}): void {
+    const opts = JSON.stringify({...extraOpts, 'enableIvy': 'ngtsc'});
+    const tsconfig: string =
+        `{"extends": "./tsconfig-base.json", "angularCompilerOptions": ${opts}}`;
+    write('tsconfig.json', tsconfig);
+  }
+
+  beforeEach(() => {
+    errorSpy = jasmine.createSpy('consoleError').and.callFake(console.error);
+    const support = setup();
+    basePath = support.basePath;
+    outDir = path.join(basePath, 'built');
+    process.chdir(basePath);
+    write = (fileName: string, content: string) => { support.write(fileName, content); };
+
+    setupFakeCore(support);
+    write('tsconfig-base.json', `{
+      "compilerOptions": {
+        "experimentalDecorators": true,
+        "skipLibCheck": true,
+        "noImplicitAny": true,
+        "types": [],
+        "outDir": "built",
+        "rootDir": ".",
+        "baseUrl": ".",
+        "declaration": true,
+        "target": "es5",
+        "module": "es2015",
+        "moduleResolution": "node",
+        "lib": ["es6", "dom"],
+        "typeRoots": ["node_modules/@types"]
+      },
+      "angularCompilerOptions": {
+        "enableIvy": "ngtsc"
+      }
+    }`);
+  });
+
+  it('should compile Injectables without errors', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Injectable} from '@angular/core';
+
+        @Injectable()
+        export class Dep {}
+
+        @Injectable()
+        export class Service {
+          constructor(dep: Dep) {}
+        }
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain('Dep.ngInjectableDef =');
+    expect(jsContents).toContain('Service.ngInjectableDef =');
+    expect(jsContents).not.toContain('__decorate');
+    const dtsContents = getContents('test.d.ts');
+    expect(dtsContents).toContain('static ngInjectableDef: i0.ɵInjectableDef<Dep>;');
+    expect(dtsContents).toContain('static ngInjectableDef: i0.ɵInjectableDef<Service>;');
+  });
+
+  it('should compile Components without errors', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          selector: 'test-cmp',
+          template: 'this is a test',
+        })
+        export class TestCmp {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain('TestCmp.ngComponentDef = i0.ɵdefineComponent');
+    expect(jsContents).not.toContain('__decorate');
+
+    const dtsContents = getContents('test.d.ts');
+    expect(dtsContents).toContain('static ngComponentDef: i0.ɵComponentDef<TestCmp, \'test-cmp\'>');
+  });
+
+  it('should compile Components without errors', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          selector: 'test-cmp',
+          templateUrl: './dir/test.html',
+        })
+        export class TestCmp {}
+    `);
+    write('dir/test.html', '<p>Hello World</p>');
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain('Hello World');
+  });
+
+  it('should compile NgModules without errors', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Component, NgModule} from '@angular/core';
+
+        @Component({
+          selector: 'test-cmp',
+          template: 'this is a test',
+        })
+        export class TestCmp {}
+
+        @NgModule({
+          declarations: [TestCmp],
+        })
+        export class TestModule {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    expect(jsContents)
+        .toContain(
+            'i0.ɵdefineNgModule({ type: TestModule, bootstrap: [], ' +
+            'declarations: [TestCmp], imports: [], exports: [] })');
+
+    const dtsContents = getContents('test.d.ts');
+    expect(dtsContents).toContain('static ngComponentDef: i0.ɵComponentDef<TestCmp, \'test-cmp\'>');
+    expect(dtsContents)
+        .toContain(
+            'static ngModuleDef: i0.ɵNgModuleDef<TestModule, [typeof TestCmp], never, never>');
+    expect(dtsContents).not.toContain('__decorate');
+  });
+
+  it('should compile NgModules with services without errors', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Component, NgModule} from '@angular/core';
+
+        export class Token {}
+
+        @NgModule({})
+        export class OtherModule {}
+
+        @Component({
+          selector: 'test-cmp',
+          template: 'this is a test',
+        })
+        export class TestCmp {}
+
+        @NgModule({
+          declarations: [TestCmp],
+          providers: [{provide: Token, useValue: 'test'}],
+          imports: [OtherModule],
+        })
+        export class TestModule {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain('i0.ɵdefineNgModule({ type: TestModule,');
+    expect(jsContents)
+        .toContain(
+            `TestModule.ngInjectorDef = i0.defineInjector({ factory: ` +
+            `function TestModule_Factory(t) { return new (t || TestModule)(); }, providers: [{ provide: ` +
+            `Token, useValue: 'test' }], imports: [[OtherModule]] });`);
+
+    const dtsContents = getContents('test.d.ts');
+    expect(dtsContents)
+        .toContain(
+            'static ngModuleDef: i0.ɵNgModuleDef<TestModule, [typeof TestCmp], [typeof OtherModule], never>');
+    expect(dtsContents).toContain('static ngInjectorDef: i0.ɵInjectorDef');
+  });
+
+  it('should compile NgModules with references to local components', () => {
+    writeConfig();
+    write('test.ts', `
+      import {NgModule} from '@angular/core';
+      import {Foo} from './foo';
+
+      @NgModule({
+        declarations: [Foo],
+      })
+      export class FooModule {}
+    `);
+    write('foo.ts', `
+      import {Component} from '@angular/core';
+      @Component({selector: 'foo', template: ''})
+      export class Foo {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    const dtsContents = getContents('test.d.ts');
+
+    expect(jsContents).toContain('import { Foo } from \'./foo\';');
+    expect(jsContents).not.toMatch(/as i[0-9] from '.\/foo'/);
+    expect(dtsContents).toContain('as i1 from \'./foo\';');
+  });
+
+  it('should compile NgModules with references to absolute components', () => {
+    writeConfig();
+    write('test.ts', `
+      import {NgModule} from '@angular/core';
+      import {Foo} from 'foo';
+
+      @NgModule({
+        declarations: [Foo],
+      })
+      export class FooModule {}
+    `);
+    write('node_modules/foo/index.d.ts', `
+      import * as i0 from '@angular/core';
+      export class Foo {
+        static ngComponentDef: i0.ɵComponentDef<Foo, 'foo'>;
+      }
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    const dtsContents = getContents('test.d.ts');
+
+    expect(jsContents).toContain('import { Foo } from \'foo\';');
+    expect(jsContents).not.toMatch(/as i[0-9] from 'foo'/);
+    expect(dtsContents).toContain('as i1 from \'foo\';');
+  });
+
+  it('should compile Pipes without errors', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Pipe} from '@angular/core';
+
+        @Pipe({
+          name: 'test-pipe',
+          pure: false,
+        })
+        export class TestPipe {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    const dtsContents = getContents('test.d.ts');
+
+    expect(jsContents)
+        .toContain(
+            'TestPipe.ngPipeDef = i0.ɵdefinePipe({ name: "test-pipe", type: TestPipe, ' +
+            'factory: function TestPipe_Factory(t) { return new (t || TestPipe)(); }, pure: false })');
+    expect(dtsContents).toContain('static ngPipeDef: i0.ɵPipeDef<TestPipe, \'test-pipe\'>;');
+  });
+
+  it('should compile pure Pipes without errors', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Pipe} from '@angular/core';
+
+        @Pipe({
+          name: 'test-pipe',
+        })
+        export class TestPipe {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    const dtsContents = getContents('test.d.ts');
+
+    expect(jsContents)
+        .toContain(
+            'TestPipe.ngPipeDef = i0.ɵdefinePipe({ name: "test-pipe", type: TestPipe, ' +
+            'factory: function TestPipe_Factory(t) { return new (t || TestPipe)(); }, pure: true })');
+    expect(dtsContents).toContain('static ngPipeDef: i0.ɵPipeDef<TestPipe, \'test-pipe\'>;');
+  });
+
+  it('should compile Pipes with dependencies', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Pipe} from '@angular/core';
+
+        export class Dep {}
+
+        @Pipe({
+          name: 'test-pipe',
+          pure: false,
+        })
+        export class TestPipe {
+          constructor(dep: Dep) {}
+        }
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain('return new (t || TestPipe)(i0.ɵdirectiveInject(Dep));');
+  });
+
+  it('should include @Pipes in @NgModule scopes', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Component, NgModule, Pipe} from '@angular/core';
+
+        @Pipe({name: 'test'})
+        export class TestPipe {}
+
+        @Component({selector: 'test-cmp', template: '{{value | test}}'})
+        export class TestCmp {}
+
+        @NgModule({declarations: [TestPipe, TestCmp]})
+        export class TestModule {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain('pipes: [TestPipe]');
+
+    const dtsContents = getContents('test.d.ts');
+    expect(dtsContents)
+        .toContain('i0.ɵNgModuleDef<TestModule, [typeof TestPipe,typeof TestCmp], never, never>');
+  });
+
+  it('should unwrap a ModuleWithProviders function if a generic type is provided for it', () => {
+    writeConfig();
+    write(`test.ts`, `
+        import {NgModule} from '@angular/core';
+        import {RouterModule} from 'router';
+
+        @NgModule({imports: [RouterModule.forRoot()]})
+        export class TestModule {}
+    `);
+
+    write('node_modules/router/index.d.ts', `
+        import {ModuleWithProviders} from '@angular/core';
+
+        declare class RouterModule {
+          static forRoot(): ModuleWithProviders<RouterModule>;
+        }
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain('imports: [[RouterModule.forRoot()]]');
+
+    const dtsContents = getContents('test.d.ts');
+    expect(dtsContents).toContain(`import * as i1 from 'router';`);
+    expect(dtsContents)
+        .toContain('i0.ɵNgModuleDef<TestModule, never, [typeof i1.RouterModule], never>');
+  });
+
+  it('should inject special types according to the metadata', () => {
+    writeConfig();
+    write(`test.ts`, `
+        import {
+          Attribute,
+          ChangeDetectorRef,
+          Component,
+          ElementRef,
+          Injector,
+          TemplateRef,
+          ViewContainerRef,
+        } from '@angular/core';
+
+        @Component({
+          selector: 'test',
+          template: 'Test',
+        })
+        class FooCmp {
+          constructor(
+            @Attribute("test") attr: string,
+            cdr: ChangeDetectorRef,
+            er: ElementRef,
+            i: Injector,
+            tr: TemplateRef,
+            vcr: ViewContainerRef,
+          ) {}
+        }
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+    const jsContents = getContents('test.js');
+    expect(jsContents)
+        .toContain(
+            `factory: function FooCmp_Factory(t) { return new (t || FooCmp)(i0.ɵinjectAttribute("test"), i0.ɵinjectChangeDetectorRef(), i0.ɵinjectElementRef(), i0.ɵdirectiveInject(i0.INJECTOR), i0.ɵinjectTemplateRef(), i0.ɵinjectViewContainerRef()); }`);
+  });
+
+  it('should generate queries for components', () => {
+    writeConfig();
+    write(`test.ts`, `
+        import {Component, ContentChild, ContentChildren, TemplateRef, ViewChild} from '@angular/core';
+
+        @Component({
+          selector: 'test',
+          template: '<div #foo></div>',
+          queries: {
+            'mview': new ViewChild('test1'),
+            'mcontent': new ContentChild('test2'),
+          }
+        })
+        class FooCmp {
+          @ContentChild('bar', {read: TemplateRef}) child: any;
+          @ContentChildren(TemplateRef) children: any;
+          get aview(): any { return null; }
+          @ViewChild('accessor') set aview(value: any) {}
+        }
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain(`i0.ɵQ(null, ["bar"], true, TemplateRef)`);
+    expect(jsContents).toContain(`i0.ɵQ(null, TemplateRef, false)`);
+    expect(jsContents).toContain(`i0.ɵQ(null, ["test2"], true)`);
+    expect(jsContents).toContain(`i0.ɵQ(0, ["accessor"], true)`);
+    expect(jsContents).toContain(`i0.ɵQ(1, ["test1"], true)`);
+  });
+
+  it('should handle queries that use forwardRef', () => {
+    writeConfig();
+    write(`test.ts`, `
+        import {Component, ContentChild, TemplateRef, ViewContainerRef, forwardRef} from '@angular/core';
+
+        @Component({
+          selector: 'test',
+          template: '<div #foo></div>',
+        })
+        class FooCmp {
+          @ContentChild(forwardRef(() => TemplateRef)) child: any;
+
+          @ContentChild(forwardRef(function() { return ViewContainerRef; })) child2: any;
+        }
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain(`i0.ɵQ(null, TemplateRef, true)`);
+    expect(jsContents).toContain(`i0.ɵQ(null, ViewContainerRef, true)`);
+  });
+
+  it('should generate host bindings for directives', () => {
+    writeConfig();
+    write(`test.ts`, `
+        import {Component, HostBinding, HostListener, TemplateRef} from '@angular/core';
+
+        @Component({
+          selector: 'test',
+          template: 'Test',
+          host: {
+            '[attr.hello]': 'foo',
+            '(click)': 'onClick($event)',
+            '[prop]': 'bar',
+          },
+        })
+        class FooCmp {
+          onClick(event: any): void {}
+
+          @HostBinding('class.someclass')
+          get someClass(): boolean { return false; }
+
+          @HostListener('onChange', ['arg'])
+          onChange(event: any, arg: any): void {}
+        }
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain(`i0.ɵp(elIndex, "attr.hello", i0.ɵb(i0.ɵd(dirIndex).foo));`);
+    expect(jsContents).toContain(`i0.ɵp(elIndex, "prop", i0.ɵb(i0.ɵd(dirIndex).bar));`);
+    expect(jsContents)
+        .toContain('i0.ɵp(elIndex, "class.someclass", i0.ɵb(i0.ɵd(dirIndex).someClass))');
+    expect(jsContents).toContain('i0.ɵd(dirIndex).onClick($event)');
+    expect(jsContents).toContain('i0.ɵd(dirIndex).onChange(i0.ɵd(dirIndex).arg)');
+  });
+
+  it('should correctly recognize local symbols', () => {
+    writeConfig();
+    write('module.ts', `
+        import {NgModule} from '@angular/core';
+        import {Dir, Comp} from './test';
+
+        @NgModule({
+          declarations: [Dir, Comp],
+          exports: [Dir, Comp],
+        })
+        class Module {}
+    `);
+    write(`test.ts`, `
+        import {Component, Directive} from '@angular/core';
+
+        @Directive({
+          selector: '[dir]',
+        })
+        export class Dir {}
+
+        @Component({
+          selector: 'test',
+          template: '<div dir>Test</div>',
+        })
+        export class Comp {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+    const jsContents = getContents('test.js');
+    expect(jsContents).not.toMatch(/import \* as i[0-9] from ['"].\/test['"]/);
+  });
+
+  it('should generate exportAs declarations', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Component, Directive} from '@angular/core';
+
+        @Directive({
+          selector: '[test]',
+          exportAs: 'foo',
+        })
+        class Dir {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const jsContents = getContents('test.js');
+    expect(jsContents).toContain(`exportAs: "foo"`);
+  });
+
+  it('should generate correct factory stubs for a test module', () => {
+    writeConfig({'allowEmptyCodegenFiles': true});
+
+    write('test.ts', `
+        import {Injectable, NgModule} from '@angular/core';
+
+        @Injectable()
+        export class NotAModule {}
+
+        @NgModule({})
+        export class TestModule {}
+    `);
+
+    write('empty.ts', `
+        import {Injectable} from '@angular/core';
+
+        @Injectable()
+        export class NotAModule {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+
+    const factoryContents = getContents('test.ngfactory.js');
+    expect(factoryContents).toContain(`import * as i0 from '@angular/core';`);
+    expect(factoryContents).toContain(`import { NotAModule, TestModule } from './test';`);
+    expect(factoryContents)
+        .toContain(`export var TestModuleNgFactory = new i0.ɵNgModuleFactory(TestModule);`);
+    expect(factoryContents).not.toContain(`NotAModuleNgFactory`);
+    expect(factoryContents).not.toContain('ɵNonEmptyModule');
+
+    const emptyFactory = getContents('empty.ngfactory.js');
+    expect(emptyFactory).toContain(`import * as i0 from '@angular/core';`);
+    expect(emptyFactory).toContain(`export var ɵNonEmptyModule = true;`);
+  });
+
+  it('should compile a banana-in-a-box inside of a template', () => {
+    writeConfig();
+    write('test.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '<div *tmpl [(bananaInABox)]="prop"></div>',
+          selector: 'test'
+        })
+        class TestCmp {}
+    `);
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+  });
+
+  it('generates inherited factory definitions', () => {
+    writeConfig();
+    write(`test.ts`, `
+        import {Injectable} from '@angular/core';
+
+        class Dep {}
+
+        @Injectable()
+        class Base {
+          constructor(dep: Dep) {}
+        }
+
+        @Injectable()
+        class Child extends Base {}
+
+        @Injectable()
+        class GrandChild extends Child {
+          constructor() {
+            super(null!);
+          }
+        }
+    `);
+
+
+    const exitCode = main(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
+    const jsContents = getContents('test.js');
+
+    expect(jsContents)
+        .toContain('function Base_Factory(t) { return new (t || Base)(i0.inject(Dep)); }');
+    expect(jsContents).toContain('var ɵChild_BaseFactory = i0.ɵgetInheritedFactory(Child)');
+    expect(jsContents)
+        .toContain('function Child_Factory(t) { return ɵChild_BaseFactory((t || Child)); }');
+    expect(jsContents)
+        .toContain('function GrandChild_Factory(t) { return new (t || GrandChild)(); }');
+  });
+
+  it('should wrap "directives" in component metadata in a closure when forward references are present',
+     () => {
+       writeConfig();
+       write('test.ts', `
+        import {Component, NgModule} from '@angular/core';
+
+        @Component({
+          selector: 'cmp-a',
+          template: '<cmp-b></cmp-b>',
+        })
+        class CmpA {}
+
+        @Component({
+          selector: 'cmp-b',
+          template: 'This is B',
+        })
+        class CmpB {}
+
+        @NgModule({
+          declarations: [CmpA, CmpB],
+        })
+        class Module {}
+    `);
+
+       const exitCode = main(['-p', basePath], errorSpy);
+       expect(errorSpy).not.toHaveBeenCalled();
+       expect(exitCode).toBe(0);
+
+       const jsContents = getContents('test.js');
+       expect(jsContents).toContain('directives: function () { return [CmpB]; }');
+     });
+});
diff --git a/packages/compiler-cli/test/perform_watch_spec.ts b/packages/compiler-cli/test/perform_watch_spec.ts
new file mode 100644
index 000000000000..76de99d25f71
--- /dev/null
+++ b/packages/compiler-cli/test/perform_watch_spec.ts
@@ -0,0 +1,205 @@
+/**
+ * @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 fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import * as ng from '../index';
+import {FileChangeEvent, performWatchCompilation} from '../src/perform_watch';
+
+import {TestSupport, expectNoDiagnostics, setup} from './test_support';
+
+describe('perform watch', () => {
+  let testSupport: TestSupport;
+  let outDir: string;
+
+  beforeEach(() => {
+    testSupport = setup();
+    outDir = path.resolve(testSupport.basePath, 'outDir');
+  });
+
+  function createConfig(): ng.ParsedConfiguration {
+    const options = testSupport.createCompilerOptions({outDir});
+    return {
+      options,
+      rootNames: [path.resolve(testSupport.basePath, 'src/index.ts')],
+      project: path.resolve(testSupport.basePath, 'src/tsconfig.json'),
+      emitFlags: ng.EmitFlags.Default,
+      errors: []
+    };
+  }
+
+  it('should compile files during the initial run', () => {
+    const config = createConfig();
+    const host = new MockWatchHost(config);
+
+    testSupport.writeFiles({
+      'src/main.ts': createModuleAndCompSource('main'),
+      'src/index.ts': `export * from './main'; `,
+    });
+
+    const watchResult = performWatchCompilation(host);
+    expectNoDiagnostics(config.options, watchResult.firstCompileResult);
+
+    expect(fs.existsSync(path.resolve(outDir, 'src', 'main.ngfactory.js'))).toBe(true);
+  });
+
+  it('should cache files on subsequent runs', () => {
+    const config = createConfig();
+    const host = new MockWatchHost(config);
+    let fileExistsSpy: jasmine.Spy;
+    let getSourceFileSpy: jasmine.Spy;
+    host.createCompilerHost = (options: ng.CompilerOptions) => {
+      const ngHost = ng.createCompilerHost({options});
+      fileExistsSpy = spyOn(ngHost, 'fileExists').and.callThrough();
+      getSourceFileSpy = spyOn(ngHost, 'getSourceFile').and.callThrough();
+      return ngHost;
+    };
+
+    testSupport.writeFiles({
+      'src/main.ts': createModuleAndCompSource('main'),
+      'src/util.ts': `export const x = 1;`,
+      'src/index.ts': `
+        export * from './main';
+        export * from './util';
+      `,
+    });
+
+    const mainTsPath = path.resolve(testSupport.basePath, 'src', 'main.ts');
+    const utilTsPath = path.resolve(testSupport.basePath, 'src', 'util.ts');
+    const mainNgFactory = path.resolve(outDir, 'src', 'main.ngfactory.js');
+    performWatchCompilation(host);
+    expect(fs.existsSync(mainNgFactory)).toBe(true);
+    expect(fileExistsSpy !).toHaveBeenCalledWith(mainTsPath);
+    expect(fileExistsSpy !).toHaveBeenCalledWith(utilTsPath);
+    expect(getSourceFileSpy !).toHaveBeenCalledWith(mainTsPath, ts.ScriptTarget.ES5);
+    expect(getSourceFileSpy !).toHaveBeenCalledWith(utilTsPath, ts.ScriptTarget.ES5);
+
+    fileExistsSpy !.calls.reset();
+    getSourceFileSpy !.calls.reset();
+
+    // trigger a single file change
+    // -> all other files should be cached
+    host.triggerFileChange(FileChangeEvent.Change, utilTsPath);
+    expectNoDiagnostics(config.options, host.diagnostics);
+
+    expect(fileExistsSpy !).not.toHaveBeenCalledWith(mainTsPath);
+    expect(fileExistsSpy !).toHaveBeenCalledWith(utilTsPath);
+    expect(getSourceFileSpy !).not.toHaveBeenCalledWith(mainTsPath, ts.ScriptTarget.ES5);
+    expect(getSourceFileSpy !).toHaveBeenCalledWith(utilTsPath, ts.ScriptTarget.ES5);
+
+    // trigger a folder change
+    // -> nothing should be cached
+    host.triggerFileChange(
+        FileChangeEvent.CreateDeleteDir, path.resolve(testSupport.basePath, 'src'));
+    expectNoDiagnostics(config.options, host.diagnostics);
+
+    expect(fileExistsSpy !).toHaveBeenCalledWith(mainTsPath);
+    expect(fileExistsSpy !).toHaveBeenCalledWith(utilTsPath);
+    expect(getSourceFileSpy !).toHaveBeenCalledWith(mainTsPath, ts.ScriptTarget.ES5);
+    expect(getSourceFileSpy !).toHaveBeenCalledWith(utilTsPath, ts.ScriptTarget.ES5);
+  });
+
+  it('should recover from static analysis errors', () => {
+    const config = createConfig();
+    const host = new MockWatchHost(config);
+
+    const okFileContent = `
+      import {NgModule} from '@angular/core';
+
+      @NgModule()
+      export class MyModule {}
+    `;
+    const errorFileContent = `
+      import {NgModule} from '@angular/core';
+
+      @NgModule((() => (1===1 ? null as any : null as any)) as any)
+      export class MyModule {}
+    `;
+    const indexTsPath = path.resolve(testSupport.basePath, 'src', 'index.ts');
+
+    testSupport.write(indexTsPath, okFileContent);
+
+    performWatchCompilation(host);
+    expectNoDiagnostics(config.options, host.diagnostics);
+
+    // Do it multiple times as the watch mode switches internal modes.
+    // E.g. from regular compile to using summaries, ...
+    for (let i = 0; i < 3; i++) {
+      host.diagnostics = [];
+      testSupport.write(indexTsPath, okFileContent);
+      host.triggerFileChange(FileChangeEvent.Change, indexTsPath);
+      expectNoDiagnostics(config.options, host.diagnostics);
+
+      host.diagnostics = [];
+      testSupport.write(indexTsPath, errorFileContent);
+      host.triggerFileChange(FileChangeEvent.Change, indexTsPath);
+
+      const errDiags = host.diagnostics.filter(d => d.category === ts.DiagnosticCategory.Error);
+      expect(errDiags.length).toBe(1);
+      expect(errDiags[0].messageText).toContain('Function expressions are not supported');
+    }
+  });
+});
+
+function createModuleAndCompSource(prefix: string, template: string = prefix + 'template') {
+  const templateEntry =
+      template.endsWith('.html') ? `templateUrl: '${template}'` : `template: \`${template}\``;
+  return `
+    import {Component, NgModule} from '@angular/core';
+
+    @Component({selector: '${prefix}', ${templateEntry}})
+    export class ${prefix}Comp {}
+
+    @NgModule({declarations: [${prefix}Comp]})
+    export class ${prefix}Module {}
+  `;
+}
+
+class MockWatchHost {
+  nextTimeoutListenerId = 1;
+  timeoutListeners: {[id: string]: (() => void)} = {};
+  fileChangeListeners: Array<((event: FileChangeEvent, fileName: string) => void)|null> = [];
+  diagnostics: ng.Diagnostic[] = [];
+  constructor(public config: ng.ParsedConfiguration) {}
+
+  reportDiagnostics(diags: ng.Diagnostics) { this.diagnostics.push(...(diags as ng.Diagnostic[])); }
+  readConfiguration() { return this.config; }
+  createCompilerHost(options: ng.CompilerOptions) { return ng.createCompilerHost({options}); }
+  createEmitCallback() { return undefined; }
+  onFileChange(
+      options: ng.CompilerOptions, listener: (event: FileChangeEvent, fileName: string) => void,
+      ready: () => void) {
+    const id = this.fileChangeListeners.length;
+    this.fileChangeListeners.push(listener);
+    ready();
+    return {
+      close: () => this.fileChangeListeners[id] = null,
+    };
+  }
+  setTimeout(callback: () => void): any {
+    const id = this.nextTimeoutListenerId++;
+    this.timeoutListeners[id] = callback;
+    return id;
+  }
+  clearTimeout(timeoutId: any): void { delete this.timeoutListeners[timeoutId]; }
+  flushTimeouts() {
+    const listeners = this.timeoutListeners;
+    this.timeoutListeners = {};
+    Object.keys(listeners).forEach(id => listeners[id]());
+  }
+  triggerFileChange(event: FileChangeEvent, fileName: string) {
+    this.fileChangeListeners.forEach(listener => {
+      if (listener) {
+        listener(event, fileName);
+      }
+    });
+    this.flushTimeouts();
+  }
+}
diff --git a/packages/compiler-cli/test/test_support.ts b/packages/compiler-cli/test/test_support.ts
new file mode 100644
index 000000000000..022e82fd4094
--- /dev/null
+++ b/packages/compiler-cli/test/test_support.ts
@@ -0,0 +1,179 @@
+/**
+ * @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 fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import * as ts from 'typescript';
+import * as ng from '../index';
+
+// TEST_TMPDIR is set by bazel.
+const tmpdir = process.env.TEST_TMPDIR || os.tmpdir();
+
+function getNgRootDir() {
+  const moduleFilename = module.filename.replace(/\\/g, '/');
+  const distIndex = moduleFilename.indexOf('/dist/all');
+  return moduleFilename.substr(0, distIndex);
+}
+
+export function writeTempFile(name: string, contents: string): string {
+  const id = (Math.random() * 1000000).toFixed(0);
+  const fn = path.join(tmpdir, `tmp.${id}.${name}`);
+  fs.writeFileSync(fn, contents);
+  return fn;
+}
+
+export function makeTempDir(): string {
+  let dir: string;
+  while (true) {
+    const id = (Math.random() * 1000000).toFixed(0);
+    dir = path.join(tmpdir, `tmp.${id}`);
+    if (!fs.existsSync(dir)) break;
+  }
+  fs.mkdirSync(dir);
+  return dir;
+}
+
+export interface TestSupport {
+  basePath: string;
+  write(fileName: string, content: string): void;
+  writeFiles(...mockDirs: {[fileName: string]: string}[]): void;
+  createCompilerOptions(overrideOptions?: ng.CompilerOptions): ng.CompilerOptions;
+  shouldExist(fileName: string): void;
+  shouldNotExist(fileName: string): void;
+}
+
+function createTestSupportFor(basePath: string) {
+  return {basePath, write, writeFiles, createCompilerOptions, shouldExist, shouldNotExist};
+
+  function write(fileName: string, content: string) {
+    const dir = path.dirname(fileName);
+    if (dir != '.') {
+      const newDir = path.resolve(basePath, dir);
+      if (!fs.existsSync(newDir)) fs.mkdirSync(newDir);
+    }
+    fs.writeFileSync(path.resolve(basePath, fileName), content, {encoding: 'utf-8'});
+  }
+
+  function writeFiles(...mockDirs: {[fileName: string]: string}[]) {
+    mockDirs.forEach(
+        (dir) => { Object.keys(dir).forEach((fileName) => { write(fileName, dir[fileName]); }); });
+  }
+
+  function createCompilerOptions(overrideOptions: ng.CompilerOptions = {}): ng.CompilerOptions {
+    return {
+      basePath,
+      'experimentalDecorators': true,
+      'skipLibCheck': true,
+      'strict': true,
+      'strictPropertyInitialization': false,
+      'types': [],
+      'outDir': path.resolve(basePath, 'built'),
+      'rootDir': basePath,
+      'baseUrl': basePath,
+      'declaration': true,
+      'target': ts.ScriptTarget.ES5,
+      'module': ts.ModuleKind.ES2015,
+      'moduleResolution': ts.ModuleResolutionKind.NodeJs,
+      'lib': [
+        path.resolve(basePath, 'node_modules/typescript/lib/lib.es6.d.ts'),
+      ],
+      ...overrideOptions,
+    };
+  }
+
+  function shouldExist(fileName: string) {
+    if (!fs.existsSync(path.resolve(basePath, fileName))) {
+      throw new Error(`Expected ${fileName} to be emitted (basePath: ${basePath})`);
+    }
+  }
+
+  function shouldNotExist(fileName: string) {
+    if (fs.existsSync(path.resolve(basePath, fileName))) {
+      throw new Error(`Did not expect ${fileName} to be emitted (basePath: ${basePath})`);
+    }
+  }
+}
+
+export function setupBazelTo(basePath: string) {
+  const sources = process.env.TEST_SRCDIR;
+  const packages = path.join(sources, 'angular/packages');
+  const nodeModulesPath = path.join(basePath, 'node_modules');
+  const angularDirectory = path.join(nodeModulesPath, '@angular');
+  fs.mkdirSync(nodeModulesPath);
+
+  // Link the built angular packages
+  fs.mkdirSync(angularDirectory);
+  const packageNames = fs.readdirSync(packages).filter(
+      name => fs.statSync(path.join(packages, name)).isDirectory() &&
+          fs.existsSync(path.join(packages, name, 'npm_package')));
+  for (const pkg of packageNames) {
+    fs.symlinkSync(path.join(packages, `${pkg}/npm_package`), path.join(angularDirectory, pkg));
+  }
+
+  // Link rxjs
+  const rxjsSource = path.join(sources, 'rxjs');
+  const rxjsDest = path.join(nodeModulesPath, 'rxjs');
+  if (fs.existsSync(rxjsSource)) {
+    fs.symlinkSync(rxjsSource, rxjsDest);
+  }
+
+  // Link typescript
+  const typescriptSource =
+      path.join(sources, 'angular/external/angular_deps/node_modules/typescript');
+  const typescriptDest = path.join(nodeModulesPath, 'typescript');
+  if (fs.existsSync(typescriptSource)) {
+    fs.symlinkSync(typescriptSource, typescriptDest);
+  }
+}
+
+function setupBazel(): TestSupport {
+  const basePath = makeTempDir();
+  setupBazelTo(basePath);
+  return createTestSupportFor(basePath);
+}
+
+function setupTestSh(): TestSupport {
+  const basePath = makeTempDir();
+
+  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'));
+  fs.symlinkSync(
+      path.resolve(ngRootDir, 'node_modules', 'typescript'),
+      path.resolve(nodeModulesPath, 'typescript'));
+
+  return createTestSupportFor(basePath);
+}
+
+export function isInBazel() {
+  return process.env.TEST_SRCDIR != null;
+}
+
+export function setup(): TestSupport {
+  return isInBazel() ? setupBazel() : setupTestSh();
+}
+
+export function expectNoDiagnostics(options: ng.CompilerOptions, diags: ng.Diagnostics) {
+  const errorDiags = diags.filter(d => d.category !== ts.DiagnosticCategory.Message);
+  if (errorDiags.length) {
+    throw new Error(`Expected no diagnostics: ${ng.formatDiagnostics(errorDiags)}`);
+  }
+}
+
+export function expectNoDiagnosticsInProgram(options: ng.CompilerOptions, p: ng.Program) {
+  expectNoDiagnostics(options, [
+    ...p.getNgStructuralDiagnostics(), ...p.getTsSemanticDiagnostics(),
+    ...p.getNgSemanticDiagnostics()
+  ]);
+}
diff --git a/packages/compiler-cli/test/transformers/BUILD.bazel b/packages/compiler-cli/test/transformers/BUILD.bazel
new file mode 100644
index 000000000000..d42c5275163e
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/BUILD.bazel
@@ -0,0 +1,32 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+        "//packages/compiler-cli/test:test_utils",
+        "//packages/compiler/test:test_utils",
+        "//packages/core",
+        "//packages/platform-browser",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+        "//packages/common:npm_package",
+        "//packages/core:npm_package",
+        "//packages/router:npm_package",
+    ],
+    deps = [
+        ":test_lib",
+        "//packages/core",
+        "//tools/testing:node",
+    ],
+)
diff --git a/packages/compiler-cli/test/transformers/compiler_host_spec.ts b/packages/compiler-cli/test/transformers/compiler_host_spec.ts
new file mode 100644
index 000000000000..357bdc543f36
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/compiler_host_spec.ts
@@ -0,0 +1,350 @@
+/**
+ * @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 ts from 'typescript';
+
+import {MetadataCollector} from '../../src/metadata/collector';
+import {CompilerHost, CompilerOptions, LibrarySummary} from '../../src/transformers/api';
+import {TsCompilerAotCompilerTypeCheckHostAdapter, createCompilerHost} from '../../src/transformers/compiler_host';
+import {Directory, Entry, MockAotContext, MockCompilerHost} from '../mocks';
+
+const dummyModule = 'export let foo: any[];';
+const aGeneratedFile = new compiler.GeneratedFile(
+    '/tmp/src/index.ts', '/tmp/src/index.ngfactory.ts',
+    [new compiler.DeclareVarStmt('x', new compiler.LiteralExpr(1))]);
+const aGeneratedFileText = `var x:any = 1;\n`;
+
+describe('NgCompilerHost', () => {
+  let codeGenerator: {generateFile: jasmine.Spy; findGeneratedFileNames: jasmine.Spy;};
+
+  beforeEach(() => {
+    codeGenerator = {
+      generateFile: jasmine.createSpy('generateFile').and.returnValue(null),
+      findGeneratedFileNames: jasmine.createSpy('findGeneratedFileNames').and.returnValue([]),
+    };
+  });
+
+  function createNgHost({files = {}}: {files?: Directory} = {}): CompilerHost {
+    const context = new MockAotContext('/tmp/', files);
+    return new MockCompilerHost(context) as ts.CompilerHost;
+  }
+
+  function createHost({
+    files = {},
+    options = {
+      basePath: '/tmp',
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+    },
+    rootNames = ['/tmp/index.ts'],
+    ngHost = createNgHost({files}),
+    librarySummaries = [],
+  }: {
+    files?: Directory,
+    options?: CompilerOptions,
+    rootNames?: string[],
+    ngHost?: CompilerHost,
+    librarySummaries?: LibrarySummary[]
+  } = {}) {
+    return new TsCompilerAotCompilerTypeCheckHostAdapter(
+        rootNames, options, ngHost, new MetadataCollector(), codeGenerator,
+        new Map(librarySummaries.map(entry => [entry.fileName, entry] as[string, LibrarySummary])));
+  }
+
+  describe('fileNameToModuleName', () => {
+    let host: TsCompilerAotCompilerTypeCheckHostAdapter;
+    beforeEach(() => { host = createHost(); });
+
+    it('should use a package import when accessing a package from a source file', () => {
+      expect(host.fileNameToModuleName('/tmp/node_modules/@angular/core.d.ts', '/tmp/main.ts'))
+          .toBe('@angular/core');
+    });
+
+    it('should allow an import o a package whose name contains dot (e.g. @angular.io)', () => {
+      expect(host.fileNameToModuleName('/tmp/node_modules/@angular.io/core.d.ts', '/tmp/main.ts'))
+          .toBe('@angular.io/core');
+    });
+
+    it('should use a package import when accessing a package from another package', () => {
+      expect(host.fileNameToModuleName(
+                 '/tmp/node_modules/mod1/index.d.ts', '/tmp/node_modules/mod2/index.d.ts'))
+          .toBe('mod1/index');
+      expect(host.fileNameToModuleName(
+                 '/tmp/node_modules/@angular/core/index.d.ts',
+                 '/tmp/node_modules/@angular/common/index.d.ts'))
+          .toBe('@angular/core/index');
+    });
+
+    it('should use a relative import when accessing a file in the same package', () => {
+      expect(host.fileNameToModuleName(
+                 '/tmp/node_modules/mod/a/child.d.ts', '/tmp/node_modules/mod/index.d.ts'))
+          .toBe('./a/child');
+      expect(host.fileNameToModuleName(
+                 '/tmp/node_modules/@angular/core/src/core.d.ts',
+                 '/tmp/node_modules/@angular/core/index.d.ts'))
+          .toBe('./src/core');
+    });
+
+    it('should use a relative import when accessing a source file from a source file', () => {
+      expect(host.fileNameToModuleName('/tmp/src/a/child.ts', '/tmp/src/index.ts'))
+          .toBe('./a/child');
+    });
+
+    it('should use a relative import when accessing generated files, even if crossing packages',
+       () => {
+         expect(host.fileNameToModuleName(
+                    '/tmp/node_modules/mod2/b.ngfactory.d.ts',
+                    '/tmp/node_modules/mod1/a.ngfactory.d.ts'))
+             .toBe('../mod2/b.ngfactory');
+       });
+
+    it('should support multiple rootDirs when accessing a source file form a source file', () => {
+      const hostWithMultipleRoots = createHost({
+        options: {
+          basePath: '/tmp/',
+          rootDirs: [
+            'src/a',
+            'src/b',
+          ]
+        }
+      });
+      // both files are in the rootDirs
+      expect(hostWithMultipleRoots.fileNameToModuleName('/tmp/src/b/b.ts', '/tmp/src/a/a.ts'))
+          .toBe('./b');
+
+      // one file is not in the rootDirs
+      expect(hostWithMultipleRoots.fileNameToModuleName('/tmp/src/c/c.ts', '/tmp/src/a/a.ts'))
+          .toBe('../c/c');
+    });
+
+    it('should error if accessing a source file from a package', () => {
+      expect(
+          () => host.fileNameToModuleName(
+              '/tmp/src/a/child.ts', '/tmp/node_modules/@angular/core.d.ts'))
+          .toThrowError(
+              'Trying to import a source file from a node_modules package: ' +
+              'import /tmp/src/a/child.ts from /tmp/node_modules/@angular/core.d.ts');
+    });
+
+    it('should use the provided implementation if any', () => {
+      const ngHost = createNgHost();
+      ngHost.fileNameToModuleName = () => 'someResult';
+      const host = createHost({ngHost});
+      expect(host.fileNameToModuleName('a', 'b')).toBe('someResult');
+    });
+  });
+
+  describe('moduleNameToFileName', () => {
+    it('should resolve an import using the containing file', () => {
+      const host = createHost({files: {'tmp': {'src': {'a': {'child.d.ts': dummyModule}}}}});
+      expect(host.moduleNameToFileName('./a/child', '/tmp/src/index.ts'))
+          .toBe('/tmp/src/a/child.d.ts');
+    });
+
+    it('should allow to skip the containing file for package imports', () => {
+      const host =
+          createHost({files: {'tmp': {'node_modules': {'@core': {'index.d.ts': dummyModule}}}}});
+      expect(host.moduleNameToFileName('@core/index')).toBe('/tmp/node_modules/@core/index.d.ts');
+    });
+
+    it('should use the provided implementation if any', () => {
+      const ngHost = createNgHost();
+      ngHost.moduleNameToFileName = () => 'someResult';
+      const host = createHost({ngHost});
+      expect(host.moduleNameToFileName('a', 'b')).toBe('someResult');
+    });
+
+    it('should work well with windows paths', () => {
+      const host = createHost({
+        rootNames: ['\\tmp\\index.ts'],
+        options: {basePath: '\\tmp'},
+        files: {'tmp': {'node_modules': {'@core': {'index.d.ts': dummyModule}}}}
+      });
+      expect(host.moduleNameToFileName('@core/index')).toBe('/tmp/node_modules/@core/index.d.ts');
+    });
+  });
+
+  describe('resourceNameToFileName', () => {
+    it('should resolve a relative import', () => {
+      const host = createHost({files: {'tmp': {'src': {'a': {'child.html': '<div>'}}}}});
+      expect(host.resourceNameToFileName('./a/child.html', '/tmp/src/index.ts'))
+          .toBe('/tmp/src/a/child.html');
+
+      expect(host.resourceNameToFileName('./a/non-existing.html', '/tmp/src/index.ts')).toBe(null);
+    });
+
+    it('should resolve package paths as relative paths', () => {
+      const host = createHost({files: {'tmp': {'src': {'a': {'child.html': '<div>'}}}}});
+      expect(host.resourceNameToFileName('a/child.html', '/tmp/src/index.ts'))
+          .toBe('/tmp/src/a/child.html');
+    });
+
+    it('should resolve absolute paths as package paths', () => {
+      const host = createHost({files: {'tmp': {'node_modules': {'a': {'child.html': '<div>'}}}}});
+      expect(host.resourceNameToFileName('/a/child.html', ''))
+          .toBe('/tmp/node_modules/a/child.html');
+    });
+
+    it('should use the provided implementation if any', () => {
+      const ngHost = createNgHost();
+      ngHost.resourceNameToFileName = () => 'someResult';
+      const host = createHost({ngHost});
+      expect(host.resourceNameToFileName('a', 'b')).toBe('someResult');
+    });
+
+  });
+
+  describe('getSourceFile', () => {
+    it('should cache source files by name', () => {
+      const host = createHost({files: {'tmp': {'src': {'index.ts': ``}}}});
+
+      const sf1 = host.getSourceFile('/tmp/src/index.ts', ts.ScriptTarget.Latest);
+      const sf2 = host.getSourceFile('/tmp/src/index.ts', ts.ScriptTarget.Latest);
+      expect(sf1).toBe(sf2);
+    });
+
+    it('should generate code when asking for the base name and add it as referencedFiles', () => {
+      codeGenerator.findGeneratedFileNames.and.returnValue(['/tmp/src/index.ngfactory.ts']);
+      codeGenerator.generateFile.and.returnValue(aGeneratedFile);
+      const host = createHost({
+        files: {
+          'tmp': {
+            'src': {
+              'index.ts': `
+              /// <reference path="main.ts"/>
+            `
+            }
+          }
+        }
+      });
+
+      const sf = host.getSourceFile('/tmp/src/index.ts', ts.ScriptTarget.Latest);
+      expect(sf.referencedFiles[0].fileName).toBe('main.ts');
+      expect(sf.referencedFiles[1].fileName).toBe('/tmp/src/index.ngfactory.ts');
+
+      const genSf = host.getSourceFile('/tmp/src/index.ngfactory.ts', ts.ScriptTarget.Latest);
+      expect(genSf.text).toBe(aGeneratedFileText);
+
+      // the codegen should have been cached
+      expect(codeGenerator.generateFile).toHaveBeenCalledTimes(1);
+      expect(codeGenerator.findGeneratedFileNames).toHaveBeenCalledTimes(1);
+    });
+
+    it('should generate code when asking for the generated name first', () => {
+      codeGenerator.findGeneratedFileNames.and.returnValue(['/tmp/src/index.ngfactory.ts']);
+      codeGenerator.generateFile.and.returnValue(aGeneratedFile);
+      const host = createHost({
+        files: {
+          'tmp': {
+            'src': {
+              'index.ts': `
+              /// <reference path="main.ts"/>
+            `
+            }
+          }
+        }
+      });
+
+      const genSf = host.getSourceFile('/tmp/src/index.ngfactory.ts', ts.ScriptTarget.Latest);
+      expect(genSf.text).toBe(aGeneratedFileText);
+
+      const sf = host.getSourceFile('/tmp/src/index.ts', ts.ScriptTarget.Latest);
+      expect(sf.referencedFiles[0].fileName).toBe('main.ts');
+      expect(sf.referencedFiles[1].fileName).toBe('/tmp/src/index.ngfactory.ts');
+
+      // the codegen should have been cached
+      expect(codeGenerator.generateFile).toHaveBeenCalledTimes(1);
+      expect(codeGenerator.findGeneratedFileNames).toHaveBeenCalledTimes(1);
+    });
+
+    it('should clear old generated references if the original host cached them', () => {
+      codeGenerator.findGeneratedFileNames.and.returnValue(['/tmp/src/index.ngfactory.ts']);
+
+      const sfText = `
+          /// <reference path="main.ts"/>
+      `;
+      const ngHost = createNgHost({files: {'tmp': {'src': {'index.ts': sfText}}}});
+      const sf = ts.createSourceFile('/tmp/src/index.ts', sfText, ts.ScriptTarget.Latest);
+      ngHost.getSourceFile = () => sf;
+
+      codeGenerator.findGeneratedFileNames.and.returnValue(['/tmp/src/index.ngfactory.ts']);
+      codeGenerator.generateFile.and.returnValue(
+          new compiler.GeneratedFile('/tmp/src/index.ts', '/tmp/src/index.ngfactory.ts', []));
+      const host1 = createHost({ngHost});
+
+      host1.getSourceFile('/tmp/src/index.ts', ts.ScriptTarget.Latest);
+      expect(sf.referencedFiles.length).toBe(2);
+      expect(sf.referencedFiles[0].fileName).toBe('main.ts');
+      expect(sf.referencedFiles[1].fileName).toBe('/tmp/src/index.ngfactory.ts');
+
+      codeGenerator.findGeneratedFileNames.and.returnValue([]);
+      codeGenerator.generateFile.and.returnValue(null);
+      const host2 = createHost({ngHost});
+
+      host2.getSourceFile('/tmp/src/index.ts', ts.ScriptTarget.Latest);
+      expect(sf.referencedFiles.length).toBe(1);
+      expect(sf.referencedFiles[0].fileName).toBe('main.ts');
+    });
+
+    it('should generate for tsx files', () => {
+      codeGenerator.findGeneratedFileNames.and.returnValue(['/tmp/src/index.ngfactory.ts']);
+      codeGenerator.generateFile.and.returnValue(aGeneratedFile);
+      const host = createHost({files: {'tmp': {'src': {'index.tsx': ``}}}});
+
+      const genSf = host.getSourceFile('/tmp/src/index.ngfactory.ts', ts.ScriptTarget.Latest);
+      expect(genSf.text).toBe(aGeneratedFileText);
+
+      const sf = host.getSourceFile('/tmp/src/index.tsx', ts.ScriptTarget.Latest);
+      expect(sf.referencedFiles[0].fileName).toBe('/tmp/src/index.ngfactory.ts');
+
+      // the codegen should have been cached
+      expect(codeGenerator.generateFile).toHaveBeenCalledTimes(1);
+      expect(codeGenerator.findGeneratedFileNames).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('updateSourceFile', () => {
+    it('should update source files', () => {
+      codeGenerator.findGeneratedFileNames.and.returnValue(['/tmp/src/index.ngfactory.ts']);
+      codeGenerator.generateFile.and.returnValue(aGeneratedFile);
+      const host = createHost({files: {'tmp': {'src': {'index.ts': ''}}}});
+
+      let genSf = host.getSourceFile('/tmp/src/index.ngfactory.ts', ts.ScriptTarget.Latest);
+      expect(genSf.text).toBe(aGeneratedFileText);
+
+      host.updateGeneratedFile(new compiler.GeneratedFile(
+          '/tmp/src/index.ts', '/tmp/src/index.ngfactory.ts',
+          [new compiler.DeclareVarStmt('x', new compiler.LiteralExpr(2))]));
+      genSf = host.getSourceFile('/tmp/src/index.ngfactory.ts', ts.ScriptTarget.Latest);
+      expect(genSf.text).toBe(`var x:any = 2;\n`);
+    });
+
+    it('should error if the imports changed', () => {
+      codeGenerator.findGeneratedFileNames.and.returnValue(['/tmp/src/index.ngfactory.ts']);
+      codeGenerator.generateFile.and.returnValue(new compiler.GeneratedFile(
+          '/tmp/src/index.ts', '/tmp/src/index.ngfactory.ts',
+          [new compiler.DeclareVarStmt(
+              'x',
+              new compiler.ExternalExpr(new compiler.ExternalReference('aModule', 'aName')))]));
+      const host = createHost({files: {'tmp': {'src': {'index.ts': ''}}}});
+
+      host.getSourceFile('/tmp/src/index.ngfactory.ts', ts.ScriptTarget.Latest);
+
+      expect(
+          () => host.updateGeneratedFile(new compiler.GeneratedFile(
+              '/tmp/src/index.ts', '/tmp/src/index.ngfactory.ts',
+              [new compiler.DeclareVarStmt(
+                  'x', new compiler.ExternalExpr(
+                           new compiler.ExternalReference('otherModule', 'aName')))])))
+          .toThrowError([
+            `Illegal State: external references changed in /tmp/src/index.ngfactory.ts.`,
+            `Old: aModule.`, `New: otherModule`
+          ].join('\n'));
+    });
+  });
+});
diff --git a/packages/compiler-cli/test/transformers/inline_resources_spec.ts b/packages/compiler-cli/test/transformers/inline_resources_spec.ts
new file mode 100644
index 000000000000..290dbb4929bd
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/inline_resources_spec.ts
@@ -0,0 +1,196 @@
+/**
+ * @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 ts from 'typescript';
+
+import {MetadataCollector, isClassMetadata} from '../../src/metadata/index';
+import {InlineResourcesMetadataTransformer, getInlineResourcesTransformFactory} from '../../src/transformers/inline_resources';
+import {MetadataCache} from '../../src/transformers/metadata_cache';
+import {MockAotContext, MockCompilerHost} from '../mocks';
+
+describe('inline resources transformer', () => {
+  describe('decorator input', () => {
+    describe('should not touch unrecognized decorators', () => {
+      it('Not from @angular/core', () => {
+        expect(convert(`declare const Component: Function;
+          @Component({templateUrl: './thing.html'}) class Foo {}`))
+            .toContain('templateUrl');
+      });
+      it('missing @ sign', () => {
+        expect(convert(`import {Component} from '@angular/core';
+          Component({templateUrl: './thing.html'}) class Foo {}`))
+            .toContain('templateUrl');
+      });
+      it('too many arguments to @Component', () => {
+        expect(convert(`import {Component} from '@angular/core';
+          @Component(1, {templateUrl: './thing.html'}) class Foo {}`))
+            .toContain('templateUrl');
+      });
+      it('wrong argument type to @Component', () => {
+        expect(convert(`import {Component} from '@angular/core';
+          @Component([{templateUrl: './thing.html'}]) class Foo {}`))
+            .toContain('templateUrl');
+      });
+    });
+
+    it('should replace templateUrl', () => {
+      const actual = convert(`import {Component} from '@angular/core';
+        @Component({
+          templateUrl: './thing.html',
+	        otherProp: 3,
+	      }) export class Foo {}`);
+      expect(actual).not.toContain('templateUrl:');
+      expect(actual.replace(/\s+/g, ' '))
+          .toContain(
+              'Foo = __decorate([ core_1.Component({ template: "Some template", otherProp: 3 }) ], Foo)');
+    });
+    it('should allow different quotes', () => {
+      const actual = convert(`import {Component} from '@angular/core';
+        @Component({"templateUrl": \`./thing.html\`}) export class Foo {}`);
+      expect(actual).not.toContain('templateUrl:');
+      expect(actual).toContain('{ template: "Some template" }');
+    });
+    it('should replace styleUrls', () => {
+      const actual = convert(`import {Component} from '@angular/core';
+        @Component({
+          styleUrls: ['./thing1.css', './thing2.css'],
+        })
+        export class Foo {}`);
+      expect(actual).not.toContain('styleUrls:');
+      expect(actual).toContain('styles: [".some_style {}", ".some_other_style {}"]');
+    });
+    it('should preserve existing styles', () => {
+      const actual = convert(`import {Component} from '@angular/core';
+        @Component({
+          styles: ['h1 { color: blue }'],
+          styleUrls: ['./thing1.css'],
+        })
+        export class Foo {}`);
+      expect(actual).not.toContain('styleUrls:');
+      expect(actual).toContain(`styles: ['h1 { color: blue }', ".some_style {}"]`);
+    });
+    it('should handle empty styleUrls', () => {
+      const actual = convert(`import {Component} from '@angular/core';
+        @Component({styleUrls: [], styles: []}) export class Foo {}`);
+      expect(actual).not.toContain('styleUrls:');
+      expect(actual).not.toContain('styles:');
+    });
+  });
+  describe('annotation input', () => {
+    it('should replace templateUrl', () => {
+      const actual = convert(`import {Component} from '@angular/core';
+      declare const NotComponent: Function;
+
+      export class Foo {
+        static decorators: {type: Function, args?: any[]}[] = [
+          {
+            type: NotComponent,
+            args: [],
+          },{
+            type: Component,
+            args: [{
+              templateUrl: './thing.html'
+          }],
+        }];
+      }
+    `);
+      expect(actual).not.toContain('templateUrl:');
+      expect(actual.replace(/\s+/g, ' '))
+          .toMatch(
+              /Foo\.decorators = [{ .*type: core_1\.Component, args: [{ template: "Some template" }]/);
+    });
+    it('should replace styleUrls', () => {
+      const actual = convert(`import {Component} from '@angular/core';
+      declare const NotComponent: Function;
+
+      export class Foo {
+        static decorators: {type: Function, args?: any[]}[] = [{
+          type: Component,
+          args: [{
+            styleUrls: ['./thing1.css', './thing2.css'],
+          }],
+        }];
+      }
+    `);
+      expect(actual).not.toContain('styleUrls:');
+      expect(actual.replace(/\s+/g, ' '))
+          .toMatch(
+              /Foo\.decorators = [{ .*type: core_1\.Component, args: [{ style: "Some template" }]/);
+    });
+  });
+});
+
+describe('metadata transformer', () => {
+  it('should transform decorators', () => {
+    const source = `import {Component} from '@angular/core';
+      @Component({
+        templateUrl: './thing.html',
+        styleUrls: ['./thing1.css', './thing2.css'],
+        styles: ['h1 { color: red }'],
+      })
+      export class Foo {}
+    `;
+    const sourceFile = ts.createSourceFile(
+        'someFile.ts', source, ts.ScriptTarget.Latest, /* setParentNodes */ true);
+    const cache = new MetadataCache(
+        new MetadataCollector(), /* strict */ true,
+        [new InlineResourcesMetadataTransformer(
+            {loadResource, resourceNameToFileName: (u: string) => u})]);
+    const metadata = cache.getMetadata(sourceFile);
+    expect(metadata).toBeDefined('Expected metadata from test source file');
+    if (metadata) {
+      const classData = metadata.metadata['Foo'];
+      expect(classData && isClassMetadata(classData))
+          .toBeDefined(`Expected metadata to contain data for Foo`);
+      if (classData && isClassMetadata(classData)) {
+        expect(JSON.stringify(classData)).not.toContain('templateUrl');
+        expect(JSON.stringify(classData)).toContain('"template":"Some template"');
+        expect(JSON.stringify(classData)).not.toContain('styleUrls');
+        expect(JSON.stringify(classData))
+            .toContain('"styles":["h1 { color: red }",".some_style {}",".some_other_style {}"]');
+      }
+    }
+  });
+});
+
+function loadResource(path: string): Promise<string>|string {
+  if (path === './thing.html') return 'Some template';
+  if (path === './thing1.css') return '.some_style {}';
+  if (path === './thing2.css') return '.some_other_style {}';
+  throw new Error('No fake data for path ' + path);
+}
+
+function convert(source: string) {
+  const baseFileName = 'someFile';
+  const moduleName = '/' + baseFileName;
+  const fileName = moduleName + '.ts';
+  const context = new MockAotContext('/', {[baseFileName + '.ts']: source});
+  const host = new MockCompilerHost(context);
+
+  const sourceFile =
+      ts.createSourceFile(fileName, source, ts.ScriptTarget.Latest, /* setParentNodes */ true);
+  const program = ts.createProgram(
+      [fileName], {
+        module: ts.ModuleKind.CommonJS,
+        target: ts.ScriptTarget.ES2017,
+      },
+      host);
+  const moduleSourceFile = program.getSourceFile(fileName);
+  const transformers: ts.CustomTransformers = {
+    before: [getInlineResourcesTransformFactory(
+        program, {loadResource, resourceNameToFileName: (u: string) => u})]
+  };
+  let result = '';
+  const emitResult = program.emit(
+      moduleSourceFile, (emittedFileName, data, writeByteOrderMark, onError, sourceFiles) => {
+        if (fileName.startsWith(moduleName)) {
+          result = data;
+        }
+      }, undefined, undefined, transformers);
+  return result;
+}
diff --git a/packages/compiler-cli/test/transformers/lower_expressions_spec.ts b/packages/compiler-cli/test/transformers/lower_expressions_spec.ts
new file mode 100644
index 000000000000..da873f8f0b29
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/lower_expressions_spec.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 * as ts from 'typescript';
+
+import {MetadataCollector, ModuleMetadata} from '../../src/metadata/index';
+import {LowerMetadataTransform, LoweringRequest, RequestLocationMap, getExpressionLoweringTransformFactory} from '../../src/transformers/lower_expressions';
+import {MetadataCache} from '../../src/transformers/metadata_cache';
+import {Directory, MockAotContext, MockCompilerHost} from '../mocks';
+
+const DEFAULT_FIELDS_TO_LOWER = ['useFactory', 'useValue', 'data'];
+
+describe('Expression lowering', () => {
+  describe('transform', () => {
+    it('should be able to lower a simple expression', () => {
+      expect(convert('const a = 1 +◊b: 2◊;')).toBe('const b = 2; const a = 1 + b; export { b };');
+    });
+
+    it('should be able to lower an expression in a decorator', () => {
+      expect(convert(`
+          import {Component} from '@angular/core';
+
+          @Component({
+            provider: [{provide: 'someToken', useFactory:◊l: () => null◊}]
+          })
+          class MyClass {}
+      `)).toContain('const l = () => null; exports.l = l;');
+    });
+
+    it('should be able to export a variable if the whole value is lowered', () => {
+      expect(convert('/*a*/ const a =◊b: () => null◊;'))
+          .toBe('/*a*/ const a = () => null; const b = a; export { b };');
+    });
+  });
+
+  describe('collector', () => {
+    it('should request a lowering for useValue', () => {
+      const collected = collect(`
+        import {Component} from '@angular/core';
+
+        enum SomeEnum {
+          OK,
+          NotOK
+        }
+
+        @Component({
+          provider: [{provide: 'someToken', useValue:◊enum: SomeEnum.OK◊}]
+        })
+        export class MyClass {}
+      `);
+      expect(collected.requests.has(collected.annotations[0].start))
+          .toBeTruthy('did not find the useValue');
+    });
+
+    it('should not request a lowering for useValue with a reference to a static property', () => {
+      const collected = collect(`
+        import {Component} from '@angular/core';
+
+        @Component({
+          provider: [{provide: 'someToken', useValue:◊value: MyClass.someMethod◊}]
+        })
+        export class MyClass {
+          static someMethod() {}
+        }
+      `);
+      expect(collected.requests.size).toBe(0);
+    });
+
+    it('should request a lowering for useFactory', () => {
+      const collected = collect(`
+        import {Component} from '@angular/core';
+
+        @Component({
+          provider: [{provide: 'someToken', useFactory:◊lambda: () => null◊}]
+        })
+        export class MyClass {}
+      `);
+      expect(collected.requests.has(collected.annotations[0].start))
+          .toBeTruthy('did not find the useFactory');
+    });
+
+    it('should request a lowering for data', () => {
+      const collected = collect(`
+        import {Component} from '@angular/core';
+
+        enum SomeEnum {
+          OK,
+          NotOK
+        }
+
+        @Component({
+          provider: [{provide: 'someToken', data:◊enum: SomeEnum.OK◊}]
+        })
+        export class MyClass {}
+      `);
+      expect(collected.requests.has(collected.annotations[0].start))
+          .toBeTruthy('did not find the data field');
+    });
+
+    it('should not lower a non-module', () => {
+      const collected = collect(`
+          declare const global: any;
+          const ngDevMode: boolean = (function(global: any) {
+            return global.ngDevMode = true;
+          })(typeof window != 'undefined' && window || typeof self != 'undefined' && self || typeof global != 'undefined' && global);
+       `);
+      expect(collected.requests.size).toBe(0, 'unexpected rewriting');
+    });
+
+    it('should throw a validation exception for invalid files', () => {
+      const cache = new MetadataCache(
+          new MetadataCollector({}), /* strict */ true,
+          [new LowerMetadataTransform(DEFAULT_FIELDS_TO_LOWER)]);
+      const sourceFile = ts.createSourceFile(
+          'foo.ts', `
+        import {Injectable} from '@angular/core';
+
+        class SomeLocalClass {}
+        @Injectable()
+        export class SomeClass {
+          constructor(a: SomeLocalClass) {}
+        }
+      `,
+          ts.ScriptTarget.Latest, true);
+      expect(() => cache.getMetadata(sourceFile)).toThrow();
+    });
+
+    it('should not report validation errors on a .d.ts file', () => {
+      const cache = new MetadataCache(
+          new MetadataCollector({}), /* strict */ true,
+          [new LowerMetadataTransform(DEFAULT_FIELDS_TO_LOWER)]);
+      const dtsFile = ts.createSourceFile(
+          'foo.d.ts', `
+        import {Injectable} from '@angular/core';
+
+        class SomeLocalClass {}
+        @Injectable()
+        export class SomeClass {
+          constructor(a: SomeLocalClass) {}
+        }
+      `,
+          ts.ScriptTarget.Latest, true);
+      expect(() => cache.getMetadata(dtsFile)).not.toThrow();
+    });
+  });
+});
+
+// Helpers
+
+interface Annotation {
+  start: number;
+  length: number;
+  name: string;
+}
+
+function getAnnotations(annotatedSource: string):
+    {unannotatedSource: string, annotations: Annotation[]} {
+  const annotations: {start: number, length: number, name: string}[] = [];
+  let adjustment = 0;
+  const unannotatedSource = annotatedSource.replace(
+      /◊([a-zA-Z]+):(.*)◊/g,
+      (text: string, name: string, source: string, index: number): string => {
+        annotations.push({start: index + adjustment, length: source.length, name});
+        adjustment -= text.length - source.length;
+        return source;
+      });
+  return {unannotatedSource, annotations};
+}
+
+// Transform helpers
+
+function convert(annotatedSource: string) {
+  const {annotations, unannotatedSource} = getAnnotations(annotatedSource);
+
+  const baseFileName = 'someFile';
+  const moduleName = '/' + baseFileName;
+  const fileName = moduleName + '.ts';
+  const context = new MockAotContext('/', {[baseFileName + '.ts']: unannotatedSource});
+  const host = new MockCompilerHost(context);
+
+  const sourceFile = ts.createSourceFile(
+      fileName, unannotatedSource, ts.ScriptTarget.Latest, /* setParentNodes */ true);
+  const requests = new Map<number, LoweringRequest>();
+
+  for (const annotation of annotations) {
+    const node = findNode(sourceFile, annotation.start, annotation.length);
+    if (!node) throw new Error('Invalid test specification. Could not find the node to substitute');
+    const location = node.pos;
+    requests.set(location, {name: annotation.name, kind: node.kind, location, end: node.end});
+  }
+
+  const program = ts.createProgram(
+      [fileName], {module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2017}, host);
+  const moduleSourceFile = program.getSourceFile(fileName) !;
+  const transformers: ts.CustomTransformers = {
+    before: [getExpressionLoweringTransformFactory(
+        {
+          getRequests(sourceFile: ts.SourceFile): RequestLocationMap{
+            if (sourceFile.fileName == moduleSourceFile.fileName) {
+              return requests;
+            } else {return new Map();}
+          }
+        },
+        program)]
+  };
+  let result: string = '';
+  const emitResult = program.emit(
+      moduleSourceFile, (emittedFileName, data, writeByteOrderMark, onError, sourceFiles) => {
+        if (fileName.startsWith(moduleName)) {
+          result = data;
+        }
+      }, undefined, undefined, transformers);
+  return normalizeResult(result);
+}
+
+function findNode(node: ts.Node, start: number, length: number): ts.Node|undefined {
+  function find(node: ts.Node): ts.Node|undefined {
+    if (node.getFullStart() == start && node.getEnd() == start + length) {
+      return node;
+    }
+    if (node.getFullStart() <= start && node.getEnd() >= start + length) {
+      return ts.forEachChild(node, find);
+    }
+  }
+  return ts.forEachChild(node, find);
+}
+
+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, '');
+}
+
+// Collector helpers
+
+function collect(annotatedSource: string) {
+  const {annotations, unannotatedSource} = getAnnotations(annotatedSource);
+  const transformer = new LowerMetadataTransform(DEFAULT_FIELDS_TO_LOWER);
+  const cache = new MetadataCache(new MetadataCollector({}), false, [transformer]);
+  const sourceFile = ts.createSourceFile(
+      'someName.ts', unannotatedSource, ts.ScriptTarget.Latest, /* setParentNodes */ true);
+  return {
+    metadata: cache.getMetadata(sourceFile),
+    requests: transformer.getRequests(sourceFile), annotations
+  };
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/test/transformers/metadata_reader_spec.ts b/packages/compiler-cli/test/transformers/metadata_reader_spec.ts
new file mode 100644
index 000000000000..306c215483d5
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/metadata_reader_spec.ts
@@ -0,0 +1,177 @@
+/**
+ * @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 ts from 'typescript';
+
+import {METADATA_VERSION, MetadataCollector, ModuleMetadata} from '../../src/metadata';
+import {MetadataReaderHost, readMetadata} from '../../src/transformers/metadata_reader';
+import {Directory, Entry, MockAotContext} from '../mocks';
+
+describe('metadata reader', () => {
+  let host: MetadataReaderHost;
+
+  beforeEach(() => {
+    const context = new MockAotContext('/tmp/src', clone(FILES));
+    const metadataCollector = new MetadataCollector();
+    host = {
+      fileExists: (fileName) => context.fileExists(fileName),
+      readFile: (fileName) => context.readFile(fileName),
+      getSourceFileMetadata: (fileName) => {
+        const sourceText = context.readFile(fileName);
+        return sourceText != null ?
+            metadataCollector.getMetadata(
+                ts.createSourceFile(fileName, sourceText, ts.ScriptTarget.Latest)) :
+            undefined;
+      },
+    };
+  });
+
+
+  it('should be able to read a metadata file', () => {
+    expect(readMetadata('node_modules/@angular/core.d.ts', host)).toEqual([
+      {__symbolic: 'module', version: METADATA_VERSION, metadata: {foo: {__symbolic: 'class'}}}
+    ]);
+  });
+
+  it('should be able to read metadata from an otherwise unused .d.ts file ', () => {
+    expect(readMetadata('node_modules/@angular/unused.d.ts', host)).toEqual([dummyMetadata]);
+  });
+
+  it('should be able to read empty metadata ',
+     () => { expect(readMetadata('node_modules/@angular/empty.d.ts', host)).toEqual([]); });
+
+  it('should return undefined for missing modules',
+     () => { expect(readMetadata('node_modules/@angular/missing.d.ts', host)).toBeUndefined(); });
+
+  it(`should add missing v${METADATA_VERSION} metadata from v1 metadata and .d.ts files`, () => {
+    expect(readMetadata('metadata_versions/v1.d.ts', host)).toEqual([
+      {__symbolic: 'module', version: 1, metadata: {foo: {__symbolic: 'class'}}}, {
+        __symbolic: 'module',
+        version: METADATA_VERSION,
+        metadata: {
+          foo: {__symbolic: 'class'},
+          aType: {__symbolic: 'interface'},
+          Bar: {__symbolic: 'class', members: {ngOnInit: [{__symbolic: 'method'}]}},
+          BarChild: {__symbolic: 'class', extends: {__symbolic: 'reference', name: 'Bar'}},
+          ReExport: {__symbolic: 'reference', module: './lib/utils2', name: 'ReExport'},
+        },
+        exports: [{from: './lib/utils2', export: ['Export']}],
+      }
+    ]);
+  });
+
+  it(`should upgrade a missing metadata file into v${METADATA_VERSION}`, () => {
+    expect(readMetadata('metadata_versions/v1_empty.d.ts', host)).toEqual([{
+      __symbolic: 'module',
+      version: METADATA_VERSION,
+      metadata: {},
+      exports: [{from: './lib/utils'}]
+    }]);
+  });
+
+  it(`should upgrade v3 metadata into v${METADATA_VERSION}`, () => {
+    expect(readMetadata('metadata_versions/v3.d.ts', host)).toEqual([
+      {__symbolic: 'module', version: 3, metadata: {foo: {__symbolic: 'class'}}}, {
+        __symbolic: 'module',
+        version: METADATA_VERSION,
+        metadata: {
+          foo: {__symbolic: 'class'},
+          aType: {__symbolic: 'interface'},
+          Bar: {__symbolic: 'class', members: {ngOnInit: [{__symbolic: 'method'}]}},
+          BarChild: {__symbolic: 'class', extends: {__symbolic: 'reference', name: 'Bar'}},
+          ReExport: {__symbolic: 'reference', module: './lib/utils2', name: 'ReExport'},
+        }
+        // Note: exports is missing because it was elided in the original.
+      }
+    ]);
+  });
+});
+
+const dummyModule = 'export let foo: any[];';
+const dummyMetadata: ModuleMetadata = {
+  __symbolic: 'module',
+  version: METADATA_VERSION,
+  metadata:
+      {foo: {__symbolic: 'error', message: 'Variable not initialized', line: 0, character: 11}}
+};
+const FILES: Entry = {
+  'tmp': {
+    'src': {
+      'main.ts': `
+        import * as c from '@angular/core';
+        import * as r from '@angular/router';
+        import * as u from './lib/utils';
+        import * as cs from './lib/collections';
+        import * as u2 from './lib2/utils2';
+      `,
+      'lib': {
+        'utils.ts': dummyModule,
+        'collections.ts': dummyModule,
+      },
+      'lib2': {'utils2.ts': dummyModule},
+      'node_modules': {
+        '@angular': {
+          'core.d.ts': dummyModule,
+          'core.metadata.json':
+              `{"__symbolic":"module", "version": ${METADATA_VERSION}, "metadata": {"foo": {"__symbolic": "class"}}}`,
+          'router': {'index.d.ts': dummyModule, 'src': {'providers.d.ts': dummyModule}},
+          'unused.d.ts': dummyModule,
+          'empty.d.ts': 'export declare var a: string;',
+          'empty.metadata.json': '[]',
+        }
+      },
+      'metadata_versions': {
+        'v1.d.ts': `
+          import {ReExport} from './lib/utils2';
+          export {ReExport};
+
+          export {Export} from './lib/utils2';
+
+          export type aType = number;
+
+          export declare class Bar {
+            ngOnInit() {}
+          }
+          export declare class BarChild extends Bar {}
+        `,
+        'v1.metadata.json':
+            `{"__symbolic":"module", "version": 1, "metadata": {"foo": {"__symbolic": "class"}}}`,
+        'v1_empty.d.ts': `
+          export * from './lib/utils';
+        `,
+        'v3.d.ts': `
+          import {ReExport} from './lib/utils2';
+          export {ReExport};
+
+          export {Export} from './lib/utils2';
+
+          export type aType = number;
+
+          export declare class Bar {
+            ngOnInit() {}
+          }
+          export declare class BarChild extends Bar {}
+        `,
+        'v3.metadata.json':
+            `{"__symbolic":"module", "version": 3, "metadata": {"foo": {"__symbolic": "class"}}}`,
+      }
+    }
+  }
+};
+
+function clone(entry: Entry): Entry {
+  if (typeof entry === 'string') {
+    return entry;
+  } else {
+    const result: Directory = {};
+    for (const name in entry) {
+      result[name] = clone(entry[name]);
+    }
+    return result;
+  }
+}
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 000000000000..9fdbe6ccbb00
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/node_emitter_spec.ts
@@ -0,0 +1,577 @@
+/**
+ * @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 {ParseLocation, ParseSourceFile, ParseSourceSpan} from '@angular/compiler';
+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 sourceMap = require('source-map');
+
+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[], format: Format = Format.Flat, 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, format);
+  }
+
+  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(`var someVar = 1; exports.someVar = someVar;`);
+  });
+
+  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('var someVar = someLocalId; exports.someVar = someVar;');
+    });
+
+    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"); var someVar = i0.someExternalId; exports.someVar = someVar;`);
+    });
+
+    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: 'b', value: o.literal('b'), quoted: true},
+                       {key: '*', value: o.literal('star'), quoted: false},
+                     ]).toStmt())
+               .replace(/\s+/gm, ''))
+        .toEqual(`({someKey:1,a:"a","b":"b","*":"star"});`);
+
+    // Regressions #22774
+    expect(emitStmt(o.literal('\\0025BC').toStmt())).toEqual('"\\\\0025BC";');
+    expect(emitStmt(o.literal('"some value"').toStmt())).toEqual('"\\"some value\\"";');
+    expect(emitStmt(o.literal('"some \\0025BC value"').toStmt()))
+        .toEqual('"\\"some \\\\0025BC value\\"";');
+    expect(emitStmt(o.literal('\n \\0025BC \n ').toStmt())).toEqual('"\\n \\\\0025BC \\n ";');
+    expect(emitStmt(o.literal('\r \\0025BC \r ').toStmt())).toEqual('"\\r \\\\0025BC \\r ";');
+  });
+
+  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(someVar.conditional(o.variable('trueCase'), o.variable('falseCase'))
+                        .conditional(o.variable('trueCase'), o.variable('falseCase'))
+                        .toStmt()))
+        .toEqual('((someVar ? trueCase : falseCase) ? 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.plus(rhs).multiply(rhs).toStmt())).toEqual('((lhs + rhs) * 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) { }`);
+  });
+
+  describe('comments', () => {
+    it('should support a preamble', () => {
+      expect(emitStmt(o.variable('a').toStmt(), Format.Flat, '/* SomePreamble */'))
+          .toBe('/* SomePreamble */ a;');
+    });
+
+    it('should support singleline comments',
+       () => { expect(emitStmt(new o.CommentStmt('Simple comment'))).toBe('// Simple comment'); });
+
+    it('should support multiline comments', () => {
+      expect(emitStmt(new o.CommentStmt('Multiline comment', true)))
+          .toBe('/* Multiline comment */');
+      expect(emitStmt(new o.CommentStmt(`Multiline\ncomment`, true), Format.Raw))
+          .toBe(`/* Multiline\ncomment */`);
+    });
+
+    describe('JSDoc comments', () => {
+      it('should be supported', () => {
+        expect(emitStmt(new o.JSDocCommentStmt([{text: 'Intro comment'}]), Format.Raw))
+            .toBe(`/**\n * Intro comment\n */`);
+        expect(emitStmt(
+                   new o.JSDocCommentStmt([{tagName: o.JSDocTagName.Desc, text: 'description'}]),
+                   Format.Raw))
+            .toBe(`/**\n * @desc description\n */`);
+        expect(emitStmt(
+                   new o.JSDocCommentStmt([
+                     {text: 'Intro comment'},
+                     {tagName: o.JSDocTagName.Desc, text: 'description'},
+                     {tagName: o.JSDocTagName.Id, text: '{number} identifier 123'},
+                   ]),
+                   Format.Raw))
+            .toBe(
+                `/**\n * Intro comment\n * @desc description\n * @id {number} identifier 123\n */`);
+      });
+
+      it('should escape @ in the text', () => {
+        expect(emitStmt(new o.JSDocCommentStmt([{text: 'email@google.com'}]), Format.Raw))
+            .toBe(`/**\n * email\\@google.com\n */`);
+      });
+
+      it('should not allow /* and */ in the text', () => {
+        expect(() => emitStmt(new o.JSDocCommentStmt([{text: 'some text /* */'}]), Format.Raw))
+            .toThrowError(`JSDoc text cannot contain "/*" and "*/"`);
+      });
+    });
+  });
+
+  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;');
+  });
+
+  describe('source maps', () => {
+    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,
+            sourceMap: true,
+            inlineSourceMap: true,
+            inlineSources: true,
+          },
+          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 result;
+    }
+
+    function mappingItemsOf(text: string) {
+      // find the source map:
+      const sourceMapMatch = /sourceMappingURL\=data\:application\/json;base64,(.*)$/.exec(text);
+      const sourceMapBase64 = sourceMapMatch ![1];
+      const sourceMapBuffer = Buffer.from(sourceMapBase64, 'base64');
+      const sourceMapText = sourceMapBuffer.toString('utf8');
+      const sourceMapParsed = JSON.parse(sourceMapText);
+      const consumer = new sourceMap.SourceMapConsumer(sourceMapParsed);
+      const mappings: any[] = [];
+      consumer.eachMapping((mapping: any) => { mappings.push(mapping); });
+      return mappings;
+    }
+
+    it('should produce a source map that maps back to the source', () => {
+      const statement = someVar.set(o.literal(1)).toDeclStmt();
+      const text = '<my-comp> a = 1 </my-comp>';
+      const sourceName = '/some/file.html';
+      const sourceUrl = '../some/file.html';
+      const file = new ParseSourceFile(text, sourceName);
+      const start = new ParseLocation(file, 0, 0, 0);
+      const end = new ParseLocation(file, text.length, 0, text.length);
+      statement.sourceSpan = new ParseSourceSpan(start, end);
+
+      const result = emitStmt(statement);
+      const mappings = mappingItemsOf(result);
+
+      expect(mappings).toEqual([
+        {
+          source: sourceUrl,
+          generatedLine: 3,
+          generatedColumn: 0,
+          originalLine: 1,
+          originalColumn: 0,
+          name: null !  // TODO: Review use of `!` here (#19904)
+        },
+        {
+          source: sourceUrl,
+          generatedLine: 3,
+          generatedColumn: 16,
+          originalLine: 1,
+          originalColumn: 26,
+          name: null !  // TODO: Review use of `!` here (#19904)
+        }
+      ]);
+    });
+
+    it('should produce a mapping per range instead of a mapping per node', () => {
+      const text = '<my-comp> a = 1 </my-comp>';
+      const sourceName = '/some/file.html';
+      const sourceUrl = '../some/file.html';
+      const file = new ParseSourceFile(text, sourceName);
+      const start = new ParseLocation(file, 0, 0, 0);
+      const end = new ParseLocation(file, text.length, 0, text.length);
+      const stmt = (loc: number) => {
+        const start = new ParseLocation(file, loc, 0, loc);
+        const end = new ParseLocation(file, loc + 1, 0, loc + 1);
+        const span = new ParseSourceSpan(start, end);
+        return someVar
+            .set(new o.BinaryOperatorExpr(
+                o.BinaryOperator.Plus, o.literal(loc, null, span), o.literal(loc, null, span), null,
+                span))
+            .toDeclStmt();
+      };
+      const stmts = [1, 2, 3, 4, 5, 6].map(stmt);
+      const result = emitStmt(stmts);
+      const mappings = mappingItemsOf(result);
+
+      // The span is used in three different nodes but should only be emitted at most twice
+      // (once for the start and once for the end of a span).
+      const maxDup = Math.max(
+          ...Array.from(countsOfDuplicatesMap(mappings.map(m => m.originalColumn)).values()));
+      expect(maxDup <= 2).toBeTruthy('A redundant range was emitted');
+    });
+  });
+});
+
+function countsOfDuplicatesMap<T>(a: T[]): Map<T, number> {
+  const result = new Map<T, number>();
+  for (const item of a) {
+    result.set(item, (result.get(item) || 0) + 1);
+  }
+  return result;
+}
+
+const FILES: Directory = {
+  somePackage: {'someGenFile.ts': `export var a: number;`}
+};
+
+const enum Format { Raw, Flat }
+
+function normalizeResult(result: string, format: Format): string {
+  // Remove TypeScript prefixes
+  let res = result.replace('"use strict";', ' ')
+                .replace('exports.__esModule = true;', ' ')
+                .replace('Object.defineProperty(exports, "__esModule", { value: true });', ' ');
+
+  // Remove new lines
+  // Squish adjacent spaces
+  if (format === Format.Flat) {
+    return res.replace(/\n/g, ' ').replace(/ +/g, ' ').replace(/^ /g, '').replace(/ $/g, '');
+  }
+
+  // Remove prefix and postfix spaces
+  return res.trim();
+}
diff --git a/packages/compiler-cli/test/transformers/program_spec.ts b/packages/compiler-cli/test/transformers/program_spec.ts
new file mode 100644
index 000000000000..7a9304327761
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/program_spec.ts
@@ -0,0 +1,1085 @@
+/**
+ * @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 ng from '@angular/compiler-cli';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {formatDiagnostics} from '../../src/perform_compile';
+import {CompilerHost, EmitFlags, LazyRoute} from '../../src/transformers/api';
+import {checkVersion, createSrcToOutPathMapper} from '../../src/transformers/program';
+import {GENERATED_FILES, StructureIsReused, tsStructureIsReused} from '../../src/transformers/util';
+import {TestSupport, expectNoDiagnosticsInProgram, isInBazel, setup} from '../test_support';
+
+describe('ng program', () => {
+  let testSupport: TestSupport;
+  let errorSpy: jasmine.Spy&((s: string) => void);
+
+  beforeEach(() => {
+    errorSpy = jasmine.createSpy('consoleError').and.callFake(console.error);
+    testSupport = setup();
+  });
+
+  function createModuleAndCompSource(prefix: string, template: string = prefix + 'template') {
+    const templateEntry =
+        template.endsWith('.html') ? `templateUrl: '${template}'` : `template: \`${template}\``;
+    return `
+      import {Component, NgModule} from '@angular/core';
+
+      @Component({selector: '${prefix}', ${templateEntry}})
+      export class ${prefix}Comp {}
+
+      @NgModule({declarations: [${prefix}Comp]})
+      export class ${prefix}Module {}
+    `;
+  }
+
+  function compileLib(libName: string) {
+    testSupport.writeFiles({
+      [`${libName}_src/index.ts`]: createModuleAndCompSource(libName),
+    });
+    const options = testSupport.createCompilerOptions();
+    const program = ng.createProgram({
+      rootNames: [path.resolve(testSupport.basePath, `${libName}_src/index.ts`)],
+      options,
+      host: ng.createCompilerHost({options}),
+    });
+    expectNoDiagnosticsInProgram(options, program);
+    fs.symlinkSync(
+        path.resolve(testSupport.basePath, 'built', `${libName}_src`),
+        path.resolve(testSupport.basePath, 'node_modules', libName));
+    program.emit({emitFlags: ng.EmitFlags.DTS | ng.EmitFlags.JS | ng.EmitFlags.Metadata});
+  }
+
+  function compile(
+      oldProgram?: ng.Program, overrideOptions?: ng.CompilerOptions, rootNames?: string[],
+      host?: CompilerHost): {program: ng.Program, emitResult: ts.EmitResult} {
+    const options = testSupport.createCompilerOptions(overrideOptions);
+    if (!rootNames) {
+      rootNames = [path.resolve(testSupport.basePath, 'src/index.ts')];
+    }
+    if (!host) {
+      host = ng.createCompilerHost({options});
+    }
+    const program = ng.createProgram({
+      rootNames: rootNames,
+      options,
+      host,
+      oldProgram,
+    });
+    expectNoDiagnosticsInProgram(options, program);
+    const emitResult = program.emit();
+    return {emitResult, program};
+  }
+
+  function resolveFiles(rootNames: string[]) {
+    const preOptions = testSupport.createCompilerOptions();
+    const preHost = ts.createCompilerHost(preOptions);
+    // don't resolve symlinks
+    preHost.realpath = (f) => f;
+    const preProgram = ts.createProgram(rootNames, preOptions, preHost);
+    return preProgram.getSourceFiles().map(sf => sf.fileName);
+  }
+
+  describe('reuse of old program', () => {
+    it('should reuse generated code for libraries from old programs', () => {
+      compileLib('lib');
+      testSupport.writeFiles({
+        'src/main.ts': createModuleAndCompSource('main'),
+        'src/index.ts': `
+            export * from './main';
+            export * from 'lib/index';
+          `
+      });
+      const p1 = compile().program;
+      expect(p1.getTsProgram().getSourceFiles().some(
+                 sf => /node_modules\/lib\/.*\.ngfactory\.ts$/.test(sf.fileName)))
+          .toBe(true);
+      expect(p1.getTsProgram().getSourceFiles().some(
+                 sf => /node_modules\/lib2\/.*\.ngfactory.*$/.test(sf.fileName)))
+          .toBe(false);
+      const p2 = compile(p1).program;
+      expect(p2.getTsProgram().getSourceFiles().some(
+                 sf => /node_modules\/lib\/.*\.ngfactory.*$/.test(sf.fileName)))
+          .toBe(false);
+      expect(p2.getTsProgram().getSourceFiles().some(
+                 sf => /node_modules\/lib2\/.*\.ngfactory.*$/.test(sf.fileName)))
+          .toBe(false);
+
+      // import a library for which we didn't generate code before
+      compileLib('lib2');
+      testSupport.writeFiles({
+        'src/index.ts': `
+          export * from './main';
+          export * from 'lib/index';
+          export * from 'lib2/index';
+        `,
+      });
+      const p3 = compile(p2).program;
+      expect(p3.getTsProgram().getSourceFiles().some(
+                 sf => /node_modules\/lib\/.*\.ngfactory.*$/.test(sf.fileName)))
+          .toBe(false);
+      expect(p3.getTsProgram().getSourceFiles().some(
+                 sf => /node_modules\/lib2\/.*\.ngfactory\.ts$/.test(sf.fileName)))
+          .toBe(true);
+
+      const p4 = compile(p3).program;
+      expect(p4.getTsProgram().getSourceFiles().some(
+                 sf => /node_modules\/lib\/.*\.ngfactory.*$/.test(sf.fileName)))
+          .toBe(false);
+      expect(p4.getTsProgram().getSourceFiles().some(
+                 sf => /node_modules\/lib2\/.*\.ngfactory.*$/.test(sf.fileName)))
+          .toBe(false);
+    });
+
+    // Note: this is the case for watch mode with declaration:false
+    it('should reuse generated code from libraries from old programs with declaration:false',
+       () => {
+         compileLib('lib');
+
+         testSupport.writeFiles({
+           'src/main.ts': createModuleAndCompSource('main'),
+           'src/index.ts': `
+            export * from './main';
+            export * from 'lib/index';
+          `
+         });
+         const p1 = compile(undefined, {declaration: false}).program;
+         expect(p1.getTsProgram().getSourceFiles().some(
+                    sf => /node_modules\/lib\/.*\.ngfactory\.ts$/.test(sf.fileName)))
+             .toBe(true);
+         expect(p1.getTsProgram().getSourceFiles().some(
+                    sf => /node_modules\/lib2\/.*\.ngfactory.*$/.test(sf.fileName)))
+             .toBe(false);
+         const p2 = compile(p1, {declaration: false}).program;
+         expect(p2.getTsProgram().getSourceFiles().some(
+                    sf => /node_modules\/lib\/.*\.ngfactory.*$/.test(sf.fileName)))
+             .toBe(false);
+         expect(p2.getTsProgram().getSourceFiles().some(
+                    sf => /node_modules\/lib2\/.*\.ngfactory.*$/.test(sf.fileName)))
+             .toBe(false);
+       });
+
+    it('should only emit changed files', () => {
+      testSupport.writeFiles({
+        'src/index.ts': createModuleAndCompSource('comp', 'index.html'),
+        'src/index.html': `Start`
+      });
+      const options: ng.CompilerOptions = {declaration: false};
+      const host = ng.createCompilerHost({options});
+      const originalGetSourceFile = host.getSourceFile;
+      const fileCache = new Map<string, ts.SourceFile>();
+      host.getSourceFile = (fileName: string) => {
+        if (fileCache.has(fileName)) {
+          return fileCache.get(fileName);
+        }
+        const sf = originalGetSourceFile.call(host, fileName);
+        fileCache.set(fileName, sf);
+        return sf;
+      };
+
+      const written = new Map<string, string>();
+      host.writeFile = (fileName: string, data: string) => written.set(fileName, data);
+
+      // compile libraries
+      const p1 = compile(undefined, options, undefined, host).program;
+
+      // compile without libraries
+      const p2 = compile(p1, options, undefined, host).program;
+      expect(written.has(path.resolve(testSupport.basePath, 'built/src/index.js'))).toBe(true);
+      let ngFactoryContent =
+          written.get(path.resolve(testSupport.basePath, 'built/src/index.ngfactory.js'));
+      expect(ngFactoryContent).toMatch(/Start/);
+
+      // no change -> no emit
+      written.clear();
+      const p3 = compile(p2, options, undefined, host).program;
+      expect(written.size).toBe(0);
+
+      // change a user file
+      written.clear();
+      fileCache.delete(path.resolve(testSupport.basePath, 'src/index.ts'));
+      const p4 = compile(p3, options, undefined, host).program;
+      expect(written.size).toBe(1);
+      expect(written.has(path.resolve(testSupport.basePath, 'built/src/index.js'))).toBe(true);
+
+      // change a file that is input to generated files
+      written.clear();
+      testSupport.writeFiles({'src/index.html': 'Hello'});
+      const p5 = compile(p4, options, undefined, host).program;
+      expect(written.size).toBe(1);
+      ngFactoryContent =
+          written.get(path.resolve(testSupport.basePath, 'built/src/index.ngfactory.js'));
+      expect(ngFactoryContent).toMatch(/Hello/);
+
+      // change a file and create an intermediate program that is not emitted
+      written.clear();
+      fileCache.delete(path.resolve(testSupport.basePath, 'src/index.ts'));
+      const p6 = ng.createProgram({
+        rootNames: [path.resolve(testSupport.basePath, 'src/index.ts')],
+        options: testSupport.createCompilerOptions(options), host,
+        oldProgram: p5
+      });
+      const p7 = compile(p6, options, undefined, host).program;
+      expect(written.size).toBe(1);
+    });
+
+    it('should set emitSkipped to false for full and incremental emit', () => {
+      testSupport.writeFiles({
+        'src/index.ts': createModuleAndCompSource('main'),
+      });
+      const {emitResult: emitResult1, program: p1} = compile();
+      expect(emitResult1.emitSkipped).toBe(false);
+      const {emitResult: emitResult2, program: p2} = compile(p1);
+      expect(emitResult2.emitSkipped).toBe(false);
+      const {emitResult: emitResult3, program: p3} = compile(p2);
+      expect(emitResult3.emitSkipped).toBe(false);
+    });
+
+    it('should store library summaries on emit', () => {
+      compileLib('lib');
+      testSupport.writeFiles({
+        'src/main.ts': createModuleAndCompSource('main'),
+        'src/index.ts': `
+            export * from './main';
+            export * from 'lib/index';
+          `
+      });
+      const p1 = compile().program;
+      expect(Array.from(p1.getLibrarySummaries().values())
+                 .some(sf => /node_modules\/lib\/index\.ngfactory\.d\.ts$/.test(sf.fileName)))
+          .toBe(true);
+      expect(Array.from(p1.getLibrarySummaries().values())
+                 .some(sf => /node_modules\/lib\/index\.ngsummary\.json$/.test(sf.fileName)))
+          .toBe(true);
+      expect(Array.from(p1.getLibrarySummaries().values())
+                 .some(sf => /node_modules\/lib\/index\.d\.ts$/.test(sf.fileName)))
+          .toBe(true);
+
+      expect(Array.from(p1.getLibrarySummaries().values())
+                 .some(sf => /src\/main.*$/.test(sf.fileName)))
+          .toBe(false);
+    });
+
+    if (!isInBazel()) {
+      it('should reuse the old ts program completely if nothing changed', () => {
+        testSupport.writeFiles({'src/index.ts': createModuleAndCompSource('main')});
+        // Note: the second compile drops factories for library files,
+        // and therefore changes the structure again
+        const p1 = compile().program;
+        const p2 = compile(p1).program;
+        compile(p2);
+        expect(tsStructureIsReused(p2.getTsProgram())).toBe(StructureIsReused.Completely);
+      });
+
+      it('should reuse the old ts program completely if a template or a ts file changed', () => {
+        testSupport.writeFiles({
+          'src/main.ts': createModuleAndCompSource('main', 'main.html'),
+          'src/main.html': `Some template`,
+          'src/util.ts': `export const x = 1`,
+          'src/index.ts': `
+            export * from './main';
+            export * from './util';
+          `
+        });
+        // Note: the second compile drops factories for library files,
+        // and therefore changes the structure again
+        const p1 = compile().program;
+        const p2 = compile(p1).program;
+        testSupport.writeFiles({
+          'src/main.html': `Another template`,
+          'src/util.ts': `export const x = 2`,
+        });
+        compile(p2);
+        expect(tsStructureIsReused(p2.getTsProgram())).toBe(StructureIsReused.Completely);
+      });
+
+      it('should not reuse the old ts program if an import changed', () => {
+        testSupport.writeFiles({
+          'src/main.ts': createModuleAndCompSource('main'),
+          'src/util.ts': `export const x = 1`,
+          'src/index.ts': `
+            export * from './main';
+            export * from './util';
+          `
+        });
+        // Note: the second compile drops factories for library files,
+        // and therefore changes the structure again
+        const p1 = compile().program;
+        const p2 = compile(p1).program;
+        testSupport.writeFiles(
+            {'src/util.ts': `import {Injectable} from '@angular/core'; export const x = 1;`});
+        compile(p2);
+        expect(tsStructureIsReused(p2.getTsProgram())).toBe(StructureIsReused.SafeModules);
+      });
+    }
+
+  });
+
+  it('should not typecheck templates if skipTemplateCodegen is set but fullTemplateTypeCheck is not',
+     () => {
+       testSupport.writeFiles({
+         'src/main.ts': `
+        import {NgModule} from '@angular/core';
+
+        @NgModule((() => {if (1==1) return null as any;}) as any)
+        export class SomeClassWithInvalidMetadata {}
+      `,
+       });
+       const options = testSupport.createCompilerOptions({skipTemplateCodegen: true});
+       const host = ng.createCompilerHost({options});
+       const program = ng.createProgram(
+           {rootNames: [path.resolve(testSupport.basePath, 'src/main.ts')], options, host});
+       expectNoDiagnosticsInProgram(options, program);
+       const emitResult = program.emit({emitFlags: EmitFlags.All});
+       expect(emitResult.diagnostics.length).toBe(0);
+
+       testSupport.shouldExist('built/src/main.metadata.json');
+     });
+
+  it('should typecheck templates if skipTemplateCodegen and fullTemplateTypeCheck is set', () => {
+    testSupport.writeFiles({
+      'src/main.ts': createModuleAndCompSource('main', `{{nonExistent}}`),
+    });
+    const options = testSupport.createCompilerOptions({
+      skipTemplateCodegen: true,
+      fullTemplateTypeCheck: true,
+    });
+    const host = ng.createCompilerHost({options});
+    const program = ng.createProgram(
+        {rootNames: [path.resolve(testSupport.basePath, 'src/main.ts')], options, host});
+    const diags = program.getNgSemanticDiagnostics();
+    expect(diags.length).toBe(1);
+    expect(diags[0].messageText).toBe(`Property 'nonExistent' does not exist on type 'mainComp'.`);
+  });
+
+  it('should be able to use asynchronously loaded resources', (done) => {
+    testSupport.writeFiles({
+      'src/main.ts': createModuleAndCompSource('main', 'main.html'),
+      // Note: we need to be able to resolve the template synchronously,
+      // only the content is delivered asynchronously.
+      'src/main.html': '',
+    });
+    const options = testSupport.createCompilerOptions();
+    const host = ng.createCompilerHost({options});
+    host.readResource = () => Promise.resolve('Hello world!');
+    const program = ng.createProgram(
+        {rootNames: [path.resolve(testSupport.basePath, 'src/main.ts')], options, host});
+    program.loadNgStructureAsync().then(() => {
+      program.emit();
+      const ngFactoryPath = path.resolve(testSupport.basePath, 'built/src/main.ngfactory.js');
+      const factory = fs.readFileSync(ngFactoryPath, 'utf8');
+      expect(factory).toContain('Hello world!');
+      done();
+    });
+  });
+
+  it('should work with noResolve', () => {
+    // create a temporary ts program to get the list of all files from angular...
+    testSupport.writeFiles({
+      'src/main.ts': createModuleAndCompSource('main'),
+    });
+    const allRootNames = resolveFiles([path.resolve(testSupport.basePath, 'src/main.ts')]);
+
+    // now do the actual test with noResolve
+    const program = compile(undefined, {noResolve: true}, allRootNames);
+
+    testSupport.shouldExist('built/src/main.ngfactory.js');
+    testSupport.shouldExist('built/src/main.ngfactory.d.ts');
+  });
+
+  it('should work with tsx files', () => {
+    // create a temporary ts program to get the list of all files from angular...
+    testSupport.writeFiles({
+      'src/main.tsx': createModuleAndCompSource('main'),
+    });
+    const allRootNames = resolveFiles([path.resolve(testSupport.basePath, 'src/main.tsx')]);
+
+    const program = compile(undefined, {jsx: ts.JsxEmit.React}, allRootNames);
+
+    testSupport.shouldExist('built/src/main.js');
+    testSupport.shouldExist('built/src/main.d.ts');
+    testSupport.shouldExist('built/src/main.ngfactory.js');
+    testSupport.shouldExist('built/src/main.ngfactory.d.ts');
+    testSupport.shouldExist('built/src/main.ngsummary.json');
+  });
+
+  it('should emit also empty generated files depending on the options', () => {
+    testSupport.writeFiles({
+      'src/main.ts': `
+        import {Component, NgModule} from '@angular/core';
+
+        @Component({selector: 'main', template: '', styleUrls: ['main.css']})
+        export class MainComp {}
+
+        @NgModule({declarations: [MainComp]})
+        export class MainModule {}
+      `,
+      'src/main.css': ``,
+      'src/util.ts': 'export const x = 1;',
+      'src/index.ts': `
+        export * from './util';
+        export * from './main';
+      `,
+    });
+    const options = testSupport.createCompilerOptions({
+      allowEmptyCodegenFiles: true,
+      enableSummariesForJit: true,
+    });
+    const host = ng.createCompilerHost({options});
+    const written = new Map < string, {
+      original: ReadonlyArray<ts.SourceFile>|undefined;
+      data: string;
+    }
+    > ();
+
+    host.writeFile =
+        (fileName: string, data: string, writeByteOrderMark: boolean,
+         onError: (message: string) => void|undefined,
+         sourceFiles: ReadonlyArray<ts.SourceFile>) => {
+          written.set(fileName, {original: sourceFiles, data});
+        };
+    const program = ng.createProgram(
+        {rootNames: [path.resolve(testSupport.basePath, 'src/index.ts')], options, host});
+    program.emit();
+
+    const enum ShouldBe { Empty, EmptyExport, NoneEmpty }
+    function assertGenFile(
+        fileName: string, checks: {originalFileName: string, shouldBe: ShouldBe}) {
+      const writeData = written.get(path.join(testSupport.basePath, fileName));
+      expect(writeData).toBeTruthy();
+      expect(writeData !.original !.some(
+                 sf => sf.fileName === path.join(testSupport.basePath, checks.originalFileName)))
+          .toBe(true);
+      switch (checks.shouldBe) {
+        case ShouldBe.Empty:
+          expect(writeData !.data).toMatch(/^(\s*\/\*([^*]|\*[^/])*\*\/\s*)?$/);
+          break;
+        case ShouldBe.EmptyExport:
+          expect(writeData !.data)
+              .toMatch(/^((\s*\/\*([^*]|\*[^/])*\*\/\s*)|(\s*export\s*{\s*}\s*;\s*)|())$/);
+          break;
+        case ShouldBe.NoneEmpty:
+          expect(writeData !.data).not.toBe('');
+          break;
+      }
+    }
+
+    assertGenFile(
+        'built/src/util.ngfactory.js', {originalFileName: 'src/util.ts', shouldBe: ShouldBe.Empty});
+    assertGenFile(
+        'built/src/util.ngfactory.d.ts',
+        {originalFileName: 'src/util.ts', shouldBe: ShouldBe.EmptyExport});
+    assertGenFile(
+        'built/src/util.ngsummary.js', {originalFileName: 'src/util.ts', shouldBe: ShouldBe.Empty});
+    assertGenFile(
+        'built/src/util.ngsummary.d.ts',
+        {originalFileName: 'src/util.ts', shouldBe: ShouldBe.EmptyExport});
+    assertGenFile(
+        'built/src/util.ngsummary.json',
+        {originalFileName: 'src/util.ts', shouldBe: ShouldBe.NoneEmpty});
+
+    // Note: we always fill non shim and shim style files as they might
+    // be shared by component with and without ViewEncapsulation.
+    assertGenFile(
+        'built/src/main.css.ngstyle.js',
+        {originalFileName: 'src/main.ts', shouldBe: ShouldBe.NoneEmpty});
+    assertGenFile(
+        'built/src/main.css.ngstyle.d.ts',
+        {originalFileName: 'src/main.ts', shouldBe: ShouldBe.EmptyExport});
+    // Note: this file is not empty as we actually generated code for it
+    assertGenFile(
+        'built/src/main.css.shim.ngstyle.js',
+        {originalFileName: 'src/main.ts', shouldBe: ShouldBe.NoneEmpty});
+    assertGenFile(
+        'built/src/main.css.shim.ngstyle.d.ts',
+        {originalFileName: 'src/main.ts', shouldBe: ShouldBe.EmptyExport});
+  });
+
+  it('should not emit /// references in .d.ts files', () => {
+    testSupport.writeFiles({
+      'src/main.ts': createModuleAndCompSource('main'),
+    });
+    compile(undefined, {declaration: true}, [path.resolve(testSupport.basePath, 'src/main.ts')]);
+
+    const dts =
+        fs.readFileSync(path.resolve(testSupport.basePath, 'built', 'src', 'main.d.ts')).toString();
+    expect(dts).toMatch('export declare class');
+    expect(dts).not.toMatch('///');
+  });
+
+  it('should not emit generated files whose sources are outside of the rootDir', () => {
+    testSupport.writeFiles({
+      'src/main.ts': createModuleAndCompSource('main'),
+      'src/index.ts': `
+          export * from './main';
+        `
+    });
+    const options =
+        testSupport.createCompilerOptions({rootDir: path.resolve(testSupport.basePath, 'src')});
+    const host = ng.createCompilerHost({options});
+    const writtenFileNames: string[] = [];
+    const oldWriteFile = host.writeFile;
+    host.writeFile = (fileName, data, writeByteOrderMark, onError, sourceFiles) => {
+      writtenFileNames.push(fileName);
+      oldWriteFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
+    };
+
+    compile(/*oldProgram*/ undefined, options, /*rootNames*/ undefined, host);
+
+    // no emit for files from node_modules as they are outside of rootDir
+    expect(writtenFileNames.some(f => /node_modules/.test(f))).toBe(false);
+
+    // emit all gen files for files under src/
+    testSupport.shouldExist('built/main.js');
+    testSupport.shouldExist('built/main.d.ts');
+    testSupport.shouldExist('built/main.ngfactory.js');
+    testSupport.shouldExist('built/main.ngfactory.d.ts');
+    testSupport.shouldExist('built/main.ngsummary.json');
+  });
+
+  describe('createSrcToOutPathMapper', () => {
+    it('should return identity mapping if no outDir is present', () => {
+      const mapper = createSrcToOutPathMapper(undefined, undefined, undefined);
+      expect(mapper('/tmp/b/y.js')).toBe('/tmp/b/y.js');
+    });
+
+    it('should return identity mapping if first src and out fileName have same dir', () => {
+      const mapper = createSrcToOutPathMapper('/tmp', '/tmp/a/x.ts', '/tmp/a/x.js');
+      expect(mapper('/tmp/b/y.js')).toBe('/tmp/b/y.js');
+    });
+
+    it('should adjust the filename if the outDir is inside of the rootDir', () => {
+      const mapper = createSrcToOutPathMapper('/tmp/out', '/tmp/a/x.ts', '/tmp/out/a/x.js');
+      expect(mapper('/tmp/b/y.js')).toBe('/tmp/out/b/y.js');
+    });
+
+    it('should adjust the filename if the outDir is outside of the rootDir', () => {
+      const mapper = createSrcToOutPathMapper('/out', '/tmp/a/x.ts', '/out/a/x.js');
+      expect(mapper('/tmp/b/y.js')).toBe('/out/b/y.js');
+    });
+
+    it('should adjust the filename if the common prefix of sampleSrc and sampleOut is outside of outDir',
+       () => {
+         const mapper =
+             createSrcToOutPathMapper('/dist/common', '/src/common/x.ts', '/dist/common/x.js');
+         expect(mapper('/src/common/y.js')).toBe('/dist/common/y.js');
+       });
+
+    it('should work on windows with normalized paths', () => {
+      const mapper =
+          createSrcToOutPathMapper('c:/tmp/out', 'c:/tmp/a/x.ts', 'c:/tmp/out/a/x.js', path.win32);
+      expect(mapper('c:/tmp/b/y.js')).toBe('c:\\tmp\\out\\b\\y.js');
+    });
+
+    it('should work on windows with non-normalized paths', () => {
+      const mapper = createSrcToOutPathMapper(
+          'c:\\tmp\\out', 'c:\\tmp\\a\\x.ts', 'c:\\tmp\\out\\a\\x.js', path.win32);
+      expect(mapper('c:\\tmp\\b\\y.js')).toBe('c:\\tmp\\out\\b\\y.js');
+    });
+  });
+
+  describe('listLazyRoutes', () => {
+    function writeSomeRoutes() {
+      testSupport.writeFiles({
+        'src/main.ts': `
+          import {NgModule} from '@angular/core';
+          import {RouterModule} from '@angular/router';
+
+          @NgModule({
+            imports: [RouterModule.forRoot([{loadChildren: './child#ChildModule'}])]
+          })
+          export class MainModule {}
+        `,
+        'src/child.ts': `
+          import {NgModule} from '@angular/core';
+          import {RouterModule} from '@angular/router';
+
+          @NgModule({
+            imports: [RouterModule.forChild([{loadChildren: './child2#ChildModule2'}])]
+          })
+          export class ChildModule {}
+        `,
+        'src/child2.ts': `
+          import {NgModule} from '@angular/core';
+
+          @NgModule()
+          export class ChildModule2 {}
+        `,
+      });
+    }
+
+    function createProgram(rootNames: string[], overrideOptions: ng.CompilerOptions = {}) {
+      const options = testSupport.createCompilerOptions(overrideOptions);
+      const host = ng.createCompilerHost({options});
+      const program = ng.createProgram(
+          {rootNames: rootNames.map(p => path.resolve(testSupport.basePath, p)), options, host});
+      return {program, options};
+    }
+
+    function normalizeRoutes(lazyRoutes: LazyRoute[]) {
+      return lazyRoutes.map(
+          r => ({
+            route: r.route,
+            module: {name: r.module.name, filePath: r.module.filePath},
+            referencedModule:
+                {name: r.referencedModule.name, filePath: r.referencedModule.filePath},
+          }));
+    }
+
+    it('should list all lazyRoutes', () => {
+      writeSomeRoutes();
+      const {program, options} = createProgram(['src/main.ts', 'src/child.ts', 'src/child2.ts']);
+      expectNoDiagnosticsInProgram(options, program);
+      expect(normalizeRoutes(program.listLazyRoutes())).toEqual([
+        {
+          module: {name: 'MainModule', filePath: path.resolve(testSupport.basePath, 'src/main.ts')},
+          referencedModule:
+              {name: 'ChildModule', filePath: path.resolve(testSupport.basePath, 'src/child.ts')},
+          route: './child#ChildModule'
+        },
+        {
+          module:
+              {name: 'ChildModule', filePath: path.resolve(testSupport.basePath, 'src/child.ts')},
+          referencedModule:
+              {name: 'ChildModule2', filePath: path.resolve(testSupport.basePath, 'src/child2.ts')},
+          route: './child2#ChildModule2'
+        },
+      ]);
+    });
+
+    it('should emit correctly after listing lazyRoutes', () => {
+      testSupport.writeFiles({
+        'src/main.ts': `
+          import {NgModule} from '@angular/core';
+          import {RouterModule} from '@angular/router';
+
+          @NgModule({
+            imports: [RouterModule.forRoot([{loadChildren: './lazy/lazy#LazyModule'}])]
+          })
+          export class MainModule {}
+        `,
+        'src/lazy/lazy.ts': `
+          import {NgModule} from '@angular/core';
+
+          @NgModule()
+          export class ChildModule {}
+        `,
+      });
+      const {program, options} = createProgram(['src/main.ts', 'src/lazy/lazy.ts']);
+      expectNoDiagnosticsInProgram(options, program);
+      program.listLazyRoutes();
+      program.emit();
+
+      const ngFactoryPath = path.resolve(testSupport.basePath, 'built/src/lazy/lazy.ngfactory.js');
+      const lazyNgFactory = fs.readFileSync(ngFactoryPath, 'utf8');
+
+      expect(lazyNgFactory).toContain('import * as i1 from "./lazy";');
+    });
+
+    it('should list lazyRoutes given an entryRoute recursively', () => {
+      writeSomeRoutes();
+      const {program, options} = createProgram(['src/main.ts']);
+      expectNoDiagnosticsInProgram(options, program);
+      expect(normalizeRoutes(program.listLazyRoutes('src/main#MainModule'))).toEqual([
+        {
+          module: {name: 'MainModule', filePath: path.resolve(testSupport.basePath, 'src/main.ts')},
+          referencedModule:
+              {name: 'ChildModule', filePath: path.resolve(testSupport.basePath, 'src/child.ts')},
+          route: './child#ChildModule'
+        },
+        {
+          module:
+              {name: 'ChildModule', filePath: path.resolve(testSupport.basePath, 'src/child.ts')},
+          referencedModule:
+              {name: 'ChildModule2', filePath: path.resolve(testSupport.basePath, 'src/child2.ts')},
+          route: './child2#ChildModule2'
+        },
+      ]);
+
+      expect(normalizeRoutes(program.listLazyRoutes('src/child#ChildModule'))).toEqual([
+        {
+          module:
+              {name: 'ChildModule', filePath: path.resolve(testSupport.basePath, 'src/child.ts')},
+          referencedModule:
+              {name: 'ChildModule2', filePath: path.resolve(testSupport.basePath, 'src/child2.ts')},
+          route: './child2#ChildModule2'
+        },
+      ]);
+    });
+
+    it('should list lazyRoutes pointing to a default export', () => {
+      testSupport.writeFiles({
+        'src/main.ts': `
+          import {NgModule} from '@angular/core';
+          import {RouterModule} from '@angular/router';
+
+          @NgModule({
+            imports: [RouterModule.forRoot([{loadChildren: './child'}])]
+          })
+          export class MainModule {}
+        `,
+        'src/child.ts': `
+          import {NgModule} from '@angular/core';
+
+          @NgModule()
+          export default class ChildModule {}
+        `,
+      });
+      const {program, options} = createProgram(['src/main.ts']);
+      expect(normalizeRoutes(program.listLazyRoutes('src/main#MainModule'))).toEqual([
+        {
+          module: {name: 'MainModule', filePath: path.resolve(testSupport.basePath, 'src/main.ts')},
+          referencedModule: {
+            name: undefined as any as string,  // TODO: Review use of `any` here (#19904)
+            filePath: path.resolve(testSupport.basePath, 'src/child.ts')
+          },
+          route: './child'
+        },
+      ]);
+    });
+
+    it('should list lazyRoutes from imported modules', () => {
+      testSupport.writeFiles({
+        'src/main.ts': `
+          import {NgModule} from '@angular/core';
+          import {RouterModule} from '@angular/router';
+          import {NestedMainModule} from './nested/main';
+
+          @NgModule({
+            imports: [
+              RouterModule.forRoot([{loadChildren: './child#ChildModule'}]),
+              NestedMainModule,
+            ]
+          })
+          export class MainModule {}
+        `,
+        'src/child.ts': `
+          import {NgModule} from '@angular/core';
+
+          @NgModule()
+          export class ChildModule {}
+        `,
+        'src/nested/main.ts': `
+          import {NgModule} from '@angular/core';
+          import {RouterModule} from '@angular/router';
+
+          @NgModule({
+            imports: [RouterModule.forChild([{loadChildren: './child#NestedChildModule'}])]
+          })
+          export class NestedMainModule {}
+        `,
+        'src/nested/child.ts': `
+          import {NgModule} from '@angular/core';
+
+          @NgModule()
+          export class NestedChildModule {}
+        `,
+      });
+      const {program, options} = createProgram(['src/main.ts']);
+      expect(normalizeRoutes(program.listLazyRoutes('src/main#MainModule'))).toEqual([
+        {
+          module: {
+            name: 'NestedMainModule',
+            filePath: path.resolve(testSupport.basePath, 'src/nested/main.ts')
+          },
+          referencedModule: {
+            name: 'NestedChildModule',
+            filePath: path.resolve(testSupport.basePath, 'src/nested/child.ts')
+          },
+          route: './child#NestedChildModule'
+        },
+        {
+          module: {name: 'MainModule', filePath: path.resolve(testSupport.basePath, 'src/main.ts')},
+          referencedModule:
+              {name: 'ChildModule', filePath: path.resolve(testSupport.basePath, 'src/child.ts')},
+          route: './child#ChildModule'
+        },
+      ]);
+    });
+
+    it('should dedupe lazyRoutes given an entryRoute', () => {
+      writeSomeRoutes();
+      testSupport.writeFiles({
+        'src/index.ts': `
+          import {NgModule} from '@angular/core';
+          import {RouterModule} from '@angular/router';
+
+          @NgModule({
+            imports: [
+              RouterModule.forRoot([{loadChildren: './main#MainModule'}]),
+              RouterModule.forRoot([{loadChildren: './child#ChildModule'}]),
+            ]
+          })
+          export class MainModule {}
+        `,
+      });
+      const {program, options} = createProgram(['src/index.ts']);
+      expectNoDiagnosticsInProgram(options, program);
+      expect(normalizeRoutes(program.listLazyRoutes('src/main#MainModule'))).toEqual([
+        {
+          module: {name: 'MainModule', filePath: path.resolve(testSupport.basePath, 'src/main.ts')},
+          referencedModule:
+              {name: 'ChildModule', filePath: path.resolve(testSupport.basePath, 'src/child.ts')},
+          route: './child#ChildModule'
+        },
+        {
+          module:
+              {name: 'ChildModule', filePath: path.resolve(testSupport.basePath, 'src/child.ts')},
+          referencedModule:
+              {name: 'ChildModule2', filePath: path.resolve(testSupport.basePath, 'src/child2.ts')},
+          route: './child2#ChildModule2'
+        },
+      ]);
+    });
+
+    it('should list lazyRoutes given an entryRoute even with static errors', () => {
+      testSupport.writeFiles({
+        'src/main.ts': `
+          import {NgModule, Component} from '@angular/core';
+          import {RouterModule} from '@angular/router';
+
+          @Component({
+            selector: 'url-comp',
+            // Non existent external template
+            templateUrl: 'non-existent.html',
+          })
+          export class ErrorComp {}
+
+          @Component({
+            selector: 'err-comp',
+            // Error in template
+            template: '<input/>{{',
+          })
+          export class ErrorComp2 {}
+
+          // Component with metadata errors.
+          @Component(() => {if (1==1) return null as any;})
+          export class ErrorComp3 {}
+
+          // Unused component
+          @Component({
+            selector: 'unused-comp',
+            template: ''
+          })
+          export class UnusedComp {}
+
+          @NgModule({
+            declarations: [ErrorComp, ErrorComp2, ErrorComp3, NonExistentComp],
+            imports: [RouterModule.forRoot([{loadChildren: './child#ChildModule'}])]
+          })
+          export class MainModule {}
+
+          @NgModule({
+            // Component used in 2 NgModules
+            declarations: [ErrorComp],
+          })
+          export class Mod2 {}
+        `,
+        'src/child.ts': `
+          import {NgModule} from '@angular/core';
+
+          @NgModule()
+          export class ChildModule {}
+        `,
+      });
+      const program = createProgram(['src/main.ts'], {collectAllErrors: true}).program;
+      expect(normalizeRoutes(program.listLazyRoutes('src/main#MainModule'))).toEqual([{
+        module: {name: 'MainModule', filePath: path.resolve(testSupport.basePath, 'src/main.ts')},
+        referencedModule:
+            {name: 'ChildModule', filePath: path.resolve(testSupport.basePath, 'src/child.ts')},
+        route: './child#ChildModule'
+      }]);
+    });
+  });
+
+  it('should report errors for ts and ng errors on emit with noEmitOnError=true', () => {
+    testSupport.writeFiles({
+      'src/main.ts': `
+        import {Component, NgModule} from '@angular/core';
+
+        // Ts error
+        let x: string = 1;
+
+        // Ng error
+        @Component({selector: 'comp', templateUrl: './main.html'})
+        export class MyComp {}
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+        `,
+      'src/main.html': '{{nonExistent}}'
+    });
+    const options = testSupport.createCompilerOptions({noEmitOnError: true});
+    const host = ng.createCompilerHost({options});
+    const program1 = ng.createProgram(
+        {rootNames: [path.resolve(testSupport.basePath, 'src/main.ts')], options, host});
+    const errorDiags =
+        program1.emit().diagnostics.filter(d => d.category === ts.DiagnosticCategory.Error);
+    expect(formatDiagnostics(errorDiags))
+        .toContain(`src/main.ts(5,13): error TS2322: Type '1' is not assignable to type 'string'.`);
+    expect(formatDiagnostics(errorDiags))
+        .toContain(
+            `src/main.html(1,1): error TS100: Property 'nonExistent' does not exist on type 'MyComp'.`);
+  });
+
+  it('should not report emit errors with noEmitOnError=false', () => {
+    testSupport.writeFiles({
+      'src/main.ts': `
+        @NgModule()
+      `
+    });
+    const options = testSupport.createCompilerOptions({noEmitOnError: false});
+    const host = ng.createCompilerHost({options});
+    const program1 = ng.createProgram(
+        {rootNames: [path.resolve(testSupport.basePath, 'src/main.ts')], options, host});
+    expect(program1.emit().diagnostics.length).toBe(0);
+  });
+
+  describe('errors', () => {
+    const fileWithStructuralError = `
+      import {NgModule} from '@angular/core';
+
+      @NgModule(() => (1===1 ? null as any : null as any))
+      export class MyModule {}
+    `;
+    const fileWithGoodContent = `
+      import {NgModule} from '@angular/core';
+
+      @NgModule()
+      export class MyModule {}
+    `;
+
+    it('should not throw on structural errors but collect them', () => {
+      testSupport.write('src/index.ts', fileWithStructuralError);
+
+      const options = testSupport.createCompilerOptions();
+      const host = ng.createCompilerHost({options});
+      const program = ng.createProgram(
+          {rootNames: [path.resolve(testSupport.basePath, 'src/index.ts')], options, host});
+
+      const structuralErrors = program.getNgStructuralDiagnostics();
+      expect(structuralErrors.length).toBe(1);
+      expect(structuralErrors[0].messageText).toContain('Function expressions are not supported');
+    });
+
+    it('should not throw on structural errors but collect them (loadNgStructureAsync)', (done) => {
+      testSupport.write('src/index.ts', fileWithStructuralError);
+
+      const options = testSupport.createCompilerOptions();
+      const host = ng.createCompilerHost({options});
+      const program = ng.createProgram(
+          {rootNames: [path.resolve(testSupport.basePath, 'src/index.ts')], options, host});
+      program.loadNgStructureAsync().then(() => {
+        const structuralErrors = program.getNgStructuralDiagnostics();
+        expect(structuralErrors.length).toBe(1);
+        expect(structuralErrors[0].messageText).toContain('Function expressions are not supported');
+        done();
+      });
+    });
+
+    it('should include non-formatted errors (e.g. invalid templateUrl)', () => {
+      testSupport.write('src/index.ts', `
+        import {Component, NgModule} from '@angular/core';
+
+        @Component({
+          selector: 'my-component',
+          templateUrl: 'template.html',   // invalid template url
+        })
+        export class MyComponent {}
+
+        @NgModule({
+          declarations: [MyComponent]
+        })
+        export class MyModule {}
+      `);
+
+      const options = testSupport.createCompilerOptions();
+      const host = ng.createCompilerHost({options});
+      const program = ng.createProgram({
+        rootNames: [path.resolve(testSupport.basePath, 'src/index.ts')],
+        options,
+        host,
+      });
+
+      const structuralErrors = program.getNgStructuralDiagnostics();
+      expect(structuralErrors.length).toBe(1);
+      expect(structuralErrors[0].messageText).toContain('Couldn\'t resolve resource template.html');
+    });
+
+    it('should be able report structural errors with noResolve:true and generateCodeForLibraries:false ' +
+           'even if getSourceFile throws for non existent files',
+       () => {
+         testSupport.write('src/index.ts', fileWithGoodContent);
+
+         // compile angular and produce .ngsummary.json / ngfactory.d.ts files
+         compile();
+
+         testSupport.write('src/ok.ts', fileWithGoodContent);
+         testSupport.write('src/error.ts', fileWithStructuralError);
+
+         // Make sure the ok.ts file is before the error.ts file,
+         // so we added a .ngfactory.ts file for it.
+         const allRootNames = resolveFiles(
+             ['src/ok.ts', 'src/error.ts'].map(fn => path.resolve(testSupport.basePath, fn)));
+
+         const options = testSupport.createCompilerOptions({
+           noResolve: true,
+           generateCodeForLibraries: false,
+         });
+         const host = ng.createCompilerHost({options});
+         const originalGetSourceFile = host.getSourceFile;
+         host.getSourceFile =
+             (fileName: string, languageVersion: ts.ScriptTarget,
+              onError?: ((message: string) => void) | undefined): ts.SourceFile => {
+               // We should never try to load .ngfactory.ts files
+               if (fileName.match(/\.ngfactory\.ts$/)) {
+                 throw new Error(`Non existent ngfactory file: ` + fileName);
+               }
+               return originalGetSourceFile.call(host, fileName, languageVersion, onError);
+             };
+         const program = ng.createProgram({rootNames: allRootNames, options, host});
+         const structuralErrors = program.getNgStructuralDiagnostics();
+         expect(structuralErrors.length).toBe(1);
+         expect(structuralErrors[0].messageText)
+             .toContain('Function expressions are not supported');
+       });
+  });
+
+  describe('checkVersion', () => {
+    const MIN_TS_VERSION = '2.7.2';
+    const MAX_TS_VERSION = '2.8.0';
+
+    const versionError = (version: string) =>
+        `The Angular Compiler requires TypeScript >=${MIN_TS_VERSION} and <${MAX_TS_VERSION} but ${version} was found instead.`;
+
+    it('should not throw when a supported TypeScript version is used', () => {
+      expect(() => checkVersion('2.7.2', MIN_TS_VERSION, MAX_TS_VERSION, undefined)).not.toThrow();
+      expect(() => checkVersion('2.7.2', MIN_TS_VERSION, MAX_TS_VERSION, false)).not.toThrow();
+      expect(() => checkVersion('2.7.2', MIN_TS_VERSION, MAX_TS_VERSION, true)).not.toThrow();
+    });
+
+    it('should handle a TypeScript version < the minimum supported one', () => {
+      expect(() => checkVersion('2.4.1', MIN_TS_VERSION, MAX_TS_VERSION, undefined))
+          .toThrowError(versionError('2.4.1'));
+      expect(() => checkVersion('2.4.1', MIN_TS_VERSION, MAX_TS_VERSION, false))
+          .toThrowError(versionError('2.4.1'));
+      expect(() => checkVersion('2.4.1', MIN_TS_VERSION, MAX_TS_VERSION, true)).not.toThrow();
+    });
+
+    it('should handle a TypeScript version > the maximum supported one', () => {
+      expect(() => checkVersion('2.9.0', MIN_TS_VERSION, MAX_TS_VERSION, undefined))
+          .toThrowError(versionError('2.9.0'));
+      expect(() => checkVersion('2.9.0', MIN_TS_VERSION, MAX_TS_VERSION, false))
+          .toThrowError(versionError('2.9.0'));
+      expect(() => checkVersion('2.9.0', MIN_TS_VERSION, MAX_TS_VERSION, true)).not.toThrow();
+    });
+  });
+
+});
diff --git a/packages/compiler-cli/test/transformers/r3_metadata_transform_spec.ts b/packages/compiler-cli/test/transformers/r3_metadata_transform_spec.ts
new file mode 100644
index 000000000000..47b1d23dfb23
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/r3_metadata_transform_spec.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 {ClassField, ClassMethod, ClassStmt, PartialModule, Statement, StmtModifier} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {MetadataCollector, isClassMetadata} from '../../src/metadata/index';
+import {MetadataCache} from '../../src/transformers/metadata_cache';
+import {PartialModuleMetadataTransformer} from '../../src/transformers/r3_metadata_transform';
+
+describe('r3_transform_spec', () => {
+
+  it('should add a static method to collected metadata', () => {
+    const fileName = '/some/directory/someFileName.ts';
+    const className = 'SomeClass';
+    const newFieldName = 'newStaticField';
+    const source = `
+      export class ${className} {
+        myMethod(): void {}
+      }
+    `;
+
+    const sourceFile =
+        ts.createSourceFile(fileName, source, ts.ScriptTarget.Latest, /* setParentNodes */ true);
+    const partialModule: PartialModule = {
+      fileName,
+      statements: [new ClassStmt(
+          className, /* parent */ null, /* fields */[new ClassField(
+              /* name */ newFieldName, /* type */ null, /* modifiers */[StmtModifier.Static])],
+          /* getters */[],
+          /* constructorMethod */ new ClassMethod(/* name */ null, /* params */[], /* body */[]),
+          /* methods */[])]
+    };
+
+    const cache = new MetadataCache(
+        new MetadataCollector(), /* strict */ true,
+        [new PartialModuleMetadataTransformer([partialModule])]);
+    const metadata = cache.getMetadata(sourceFile);
+    expect(metadata).toBeDefined('Expected metadata from test source file');
+    if (metadata) {
+      const classData = metadata.metadata[className];
+      expect(classData && isClassMetadata(classData))
+          .toBeDefined(`Expected metadata to contain data for "${className}"`);
+      if (classData && isClassMetadata(classData)) {
+        const statics = classData.statics;
+        expect(statics).toBeDefined(`Expected "${className}" metadata to contain statics`);
+        if (statics) {
+          expect(statics[newFieldName]).toEqual({}, 'Expected new field to recorded as a function');
+        }
+      }
+    }
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/test/transformers/r3_transform_spec.ts b/packages/compiler-cli/test/transformers/r3_transform_spec.ts
new file mode 100644
index 000000000000..778db8104899
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/r3_transform_spec.ts
@@ -0,0 +1,163 @@
+/**
+ * @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 {PartialModule} from '@angular/compiler';
+import * as o from '@angular/compiler/src/output/output_ast';
+import {MockAotCompilerHost} from '@angular/compiler/test/aot/test_util';
+import {initDomAdapter} from '@angular/platform-browser/src/browser';
+import * as ts from 'typescript';
+
+import {getAngularClassTransformerFactory} from '../../src/transformers/r3_transform';
+import {Directory, MockAotContext, MockCompilerHost} from '../mocks';
+
+const someGenFilePath = '/somePackage/someGenFile';
+const someGenFileName = someGenFilePath + '.ts';
+
+describe('r3_transform_spec', () => {
+  let context: MockAotContext;
+  let host: MockCompilerHost;
+
+  beforeEach(() => {
+    context = new MockAotContext('/', FILES);
+    host = new MockCompilerHost(context);
+  });
+
+  it('should be able to generate a simple identity function', () => {
+    expect(emitStaticMethod(new o.ReturnStatement(o.variable('v')), ['v']))
+        .toContain('static someMethod(v) { return v; }');
+  });
+
+  it('should be able to generate a static field declaration',
+     () => { expect(emitStaticField(o.literal(10))).toContain('SomeClass.someField = 10'); });
+
+  it('should be able to import a symbol', () => {
+    expect(emitStaticMethod(new o.ReturnStatement(
+               o.importExpr(new o.ExternalReference('@angular/core', 'Component')))))
+        .toContain('static someMethod() { return i0.Component; } }');
+  });
+
+  it('should be able to modify multiple classes in the same module', () => {
+    const result = emit(getAngularClassTransformerFactory([{
+      fileName: someGenFileName,
+      statements: [
+        classMethod(new o.ReturnStatement(o.variable('v')), ['v'], 'someMethod', 'SomeClass'),
+        classMethod(
+            new o.ReturnStatement(o.variable('v')), ['v'], 'someOtherMethod', 'SomeOtherClass')
+      ]
+    }]));
+    expect(result).toContain('static someMethod(v) { return v; }');
+    expect(result).toContain('static someOtherMethod(v) { return v; }');
+  });
+
+  it('should insert imports after existing imports', () => {
+    context = context.override({
+      somePackage: {
+        'someGenFile.ts': `
+        import {Component} from '@angular/core';
+
+        @Component({selector: 'some-class', template: 'hello!'})
+        export class SomeClass {}
+
+        export class SomeOtherClass {}
+      `
+      }
+    });
+    host = new MockCompilerHost(context);
+
+    expect(emitStaticMethod(new o.ReturnStatement(
+               o.importExpr(new o.ExternalReference('@angular/core', 'Component')))))
+        .toContain('const core_1 = require("@angular/core"); const i0 = require("@angular/core");');
+  });
+
+  function emit(factory: ts.TransformerFactory<ts.SourceFile>): string {
+    let result: string = '';
+    const program = ts.createProgram(
+        [someGenFileName], {module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2017}, host);
+    const moduleSourceFile = program.getSourceFile(someGenFileName);
+    const transformers: ts.CustomTransformers = {before: [factory]};
+    const emitResult = program.emit(
+        moduleSourceFile, (fileName, data, writeByteOrderMark, onError, sourceFiles) => {
+          if (fileName.startsWith(someGenFilePath)) {
+            result = data;
+          }
+        }, undefined, undefined, transformers);
+    return normalizeResult(result);
+  }
+
+  function emitStaticMethod(
+      stmt: o.Statement | o.Statement[], parameters: string[] = [],
+      methodName: string = 'someMethod', className: string = 'SomeClass'): string {
+    const module: PartialModule = {
+      fileName: someGenFileName,
+      statements: [classMethod(stmt, parameters, methodName, className)]
+    };
+    return emit(getAngularClassTransformerFactory([module]));
+  }
+
+  function emitStaticField(
+      initializer: o.Expression, fieldName: string = 'someField',
+      className: string = 'SomeClass'): string {
+    const module: PartialModule = {
+      fileName: someGenFileName,
+      statements: [classField(initializer, fieldName, className)]
+    };
+    return emit(getAngularClassTransformerFactory([module]));
+  }
+});
+
+const FILES: Directory = {
+  somePackage: {
+    'someGenFile.ts': `
+
+  export class SomeClass {}
+
+  export class SomeOtherClass {}
+`
+  }
+};
+
+function classMethod(
+    stmt: o.Statement | o.Statement[], parameters: string[] = [], methodName: string = 'someMethod',
+    className: string = 'SomeClass'): o.ClassStmt {
+  const statements = Array.isArray(stmt) ? stmt : [stmt];
+  return new o.ClassStmt(
+      /* name */ className,
+      /* parent */ null,
+      /* fields */[],
+      /* getters */[],
+      /* constructorMethod */ new o.ClassMethod(null, [], []),
+      /* methods */[new o.ClassMethod(
+          methodName, parameters.map(name => new o.FnParam(name)), statements, null,
+          [o.StmtModifier.Static])]);
+}
+
+function classField(
+    initializer: o.Expression, fieldName: string = 'someField',
+    className: string = 'SomeClass'): o.ClassStmt {
+  return new o.ClassStmt(
+      /* name */ className,
+      /* parent */ null,
+      /* fields */[new o.ClassField(fieldName, null, [o.StmtModifier.Static], initializer)],
+      /* getters */[],
+      /* constructorMethod */ new o.ClassMethod(null, [], []),
+      /* methods */[]);
+}
+
+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
new file mode 100644
index 000000000000..6c4bddb6bfeb
--- /dev/null
+++ b/packages/compiler-cli/tsconfig-build.json
@@ -0,0 +1,36 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "module": "commonjs",
+    "stripInternal": false,
+    "target": "es2015",
+    "lib": [
+      "es2015"
+    ],
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/compiler": ["../../dist/packages/compiler"]
+    },
+    "outDir": "../../dist/packages/compiler-cli"
+  },
+  "bazelOptions": {
+    "suppressTsconfigOverrideWarnings": true
+  },
+
+  "exclude": [
+    "integrationtest"
+  ],
+
+  "files": [
+    "index.ts",
+    "ngtools2.ts",
+    "src/main.ts",
+    "src/extract_i18n.ts",
+    "src/language_services.ts",
+    "../../node_modules/@types/node/index.d.ts",
+    "../../node_modules/@types/jasmine/index.d.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ]
+}
diff --git a/packages/compiler-cli/tsconfig-tools.json b/packages/compiler-cli/tsconfig-tools.json
new file mode 100644
index 000000000000..752f6bf1edd2
--- /dev/null
+++ b/packages/compiler-cli/tsconfig-tools.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig-build.json",
+
+  "compilerOptions": {
+    "outDir": "../../dist/tools/@angular/compiler-cli",
+    "paths": {
+      "@angular/compiler": ["../../dist/tools/@angular/compiler"]
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/tsconfig.json b/packages/compiler-cli/tsconfig.json
new file mode 100644
index 000000000000..1c2a64202435
--- /dev/null
+++ b/packages/compiler-cli/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "target": "es2015",
+        "lib": [
+            "es2015"
+        ],
+        "types": [
+          "jasmine"
+        ]
+    }
+}
diff --git a/packages/compiler/BUILD.bazel b/packages/compiler/BUILD.bazel
new file mode 100644
index 000000000000..08269e2b51d9
--- /dev/null
+++ b/packages/compiler/BUILD.bazel
@@ -0,0 +1,33 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_package", "ts_library")
+
+ts_library(
+    name = "compiler",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/compiler",
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "//packages/compiler/testing:package.json",
+    ],
+    entry_point = "packages/compiler/compiler.js",
+    include_devmode_srcs = True,
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "release-with-framework",
+    ],
+    deps = [
+        ":compiler",
+        "//packages/compiler/testing",
+    ],
+)
diff --git a/packages/compiler/compiler.ts b/packages/compiler/compiler.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/compiler/compiler.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';
diff --git a/packages/compiler/design/architecture.md b/packages/compiler/design/architecture.md
new file mode 100644
index 000000000000..396e0dcfecb2
--- /dev/null
+++ b/packages/compiler/design/architecture.md
@@ -0,0 +1,477 @@
+# DESIGN DOC(Ivy): Compiler Architecture
+
+AUTHOR: arick@, chuckj@
+Status: Draft
+
+## Overview
+
+This document details the new architecture of the Angular compiler in a post-Ivy world, as well as the compatibility functionality needed for the ecosystem to gradually migrate to Ivy without breaking changes. This compatibility ensures Ivy and non-Ivy libraries can coexist during the migration period.
+
+### The Ivy Compilation Model
+
+Broadly speaking, The Ivy model is that Angular decorators (`@Injectable`, etc) are compiled to static properties on the classes (`ngInjectableDef`). This operation must take place without global program knowledge, and in most cases only with knowledge of that single decorator.
+
+The one exception is `@Component`, which requires knowledge of the metadata from the `@NgModule` which declares the component in order to properly generate the `ngComponentDef`. In particular, the selectors which are applicable during compilation of a component template are determined by the module that declares that component, and the transitive closure of the exports of that module's imports.
+
+Going forward, this will be the model by which Angular code will be compiled, shipped to NPM, and eventually bundled into applications.
+
+### Existing code on NPM
+
+Existing Angular libraries exist on NPM today and are distributed in the Angular Package Format, which details the artifacts shipped. Today this includes compiled `.js` files in both ES2015 and ESM (ES5 + ES2015 modules) flavors, `.d.ts` files, and `.metadata.json` files. The `.js` files have the Angular decorator information removed, and the `.metadata.json` files preserve the decorator metadata in an alternate format.
+
+### High Level Proposal
+
+We will produce two compiler entry-points, `ngtsc` and `ngcc`.
+
+`ngtsc` will be an Typescript-to-Javascript transpiler that reifies Angular decorators into static properties. It is a minimal wrapper around `tsc` which includes a set of Angular transforms. While Ivy is experimental, `ngc` operates as `ngtsc` when the `angularCompilerOption` `enableIvy` flag is set to `true` in the `tsconfig.json` file for the project.
+
+`ngcc` (which stands for Angular compatibility compiler) is designed to process code coming from NPM and produce the equivalent Ivy version, as if the code was compiled with `ngtsc`. It will operate given a `node_modules` directory and a set of packages to compile, and will produce an equivalent directory from which the Ivy equivalents of those modules can be read. `ngcc` is a separate script entry point to `@angular/compiler-cli`.
+
+`ngcc` can also be run as part of a code loader (e.g. for Webpack) to transpile packages being read from `node_modules` on-demand.
+
+## Detailed Design
+
+### Ivy Compilation Model
+
+The overall architecture of `ngtsc` it is a set of transformers that adjust what is emitted by TypeScript for a TypeScript program. Angular transforms both the `.js` files and the `.d.ts` files to reflect the content of Angular decorators that are then erased. This transformation is done file by file with no global knowledge except during the type-checking and for reference inversion discussed below.
+
+For example, the following class declaration:
+
+```ts
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'greet',
+  template: '<div> Hello, {{name}}! </div>'
+})
+export class GreetComponent {
+  @Input() name: string;
+}
+```
+
+will normally be translated this into something like,
+
+```js
+const tslib_1 = require("tslib");
+const core_1 = require("@angular/core");
+let GreetComponent = class GreetComponent {
+};
+tslib_1.__decorate([
+    core_1.Input(),
+    tslib_1.__metadata("design:type", String)
+], GreetComponent.prototype, "name", void 0);
+GreetComponent = tslib_1.__decorate([
+    core_1.Component({
+        selector: 'greet',
+        template: '<div> Hello, {{name}}! </div>'
+    })
+], GreetComponent);
+```
+
+which translates the decorator into a form that is is executed at runtime. A `.d.ts` file is also emitted that might look something like
+
+```ts
+export class GreetComponent {
+  name: string;
+}
+```
+
+In `ngtsc` this is instead emitted as,
+
+```js
+const i0 = require("@angular/core");
+class GreetComponent {}
+GreetComponent.ngComponentDef = i0.ɵdefineComponent({
+    type: GreetComponent,
+    tag: 'greet',
+    factory: () => new GreetComponent(),
+    template: function (rf, ctx) {
+        if (rf & RenderFlags.Create) {
+            i0.ɵE(0, 'div');
+            i0.ɵT(1);
+            i0.ɵe();
+        }
+        if (rf & RenderFlags.Update) {
+            i0.ɵt(1, i0.ɵi1('Hello ', ctx.name, '!'));
+        }
+    }
+});
+```
+
+and the `.d.ts` contains:
+
+```ts
+import * as i0 from '@angular/core';
+export class GreetComponent {
+  static ngComponentDef: i0.NgComponentDef<
+    GreetComponent, 
+    'greet', 
+    {input: 'input'}
+  >;
+}
+```
+
+The information needed by reference inversion and type-checking is included in 
+the type declaration of the `ngComponentDef` in the `.d.ts`.
+
+#### TypeScript architecture
+
+The overall architecure of TypeScript is:
+
+                                                                    |------------|
+                               |----------------------------------> | TypeScript |
+                               |                                    |   .d.ts    |
+                               |                                    |------------|
+                               |
+    |------------|          |-----|               |-----|           |------------|
+    | TypeScript | -parse-> | AST | ->transform-> | AST | ->print-> | JavaScript |
+    |   source   |    |     |-----|       |       |-----|           |   source   |
+    |------------|    |        |          |                         |------------|
+                      |    type-check     |          
+                      |        |          |         
+                      |        v          |        
+                      |    |--------|     |                        
+                      |--> | errors | <---|                         
+                           |--------|
+
+The parse step is a traditional recursive descent parser, augmented to support incremental parsing, that emits an abstract syntax tree (AST). 
+
+The type-checker construct a symbol table and then performs type analysis of every expression in the file, reporting errors it finds. This process not extended or modified by `ngtsc`.
+
+The transform step is a set of AST to AST transformations that perform various tasks such as, removing type declarations, lowering module and class declarations to ES5, converting `async` methods to state-machines, etc. 
+
+#### Extension points
+
+TypeScript supports the following extension points to alter its output. You can,
+
+1. Modify the TypeScript source it sees (`CompilerHost.getSourceFile`)
+2. Alter the list of transforms (`CustomTransformers`)
+3. Intercept the the output before it is written (`WriteFileCallback`)
+
+It is not recommended to alter the source code as this complicates the managing of source maps, makes it difficult to support incremental parsing, and is not supported by TypeScript's language service plug-in model.
+
+#### Angular Extensions
+
+Angular transforms the `.js` output by adding Angular specific transforms to the list of transforms executed by TypeScript.
+
+As of TypeScript 2.7, there is no similar transformer pipe-line for `.d.ts` files so the .d.ts files will be altered during the `WriteFileCallback`.
+
+#### Decorator Reification
+
+Angular supports the following class decorators:
+
+- `@Component`
+- `@Directive`
+- `@Injectable`
+- `@NgModule`
+- `@Pipe`
+
+There are also a list of helper decorators that make the `@Component` and `@Directive` easier to use such as `@Input`, `@Output`, etc.; as well as a set of decorators that help `@Injectable` classes customize the injector such as `@Inject` and `@SkipSelf`.
+
+Each of the class decorators can be thought of as class transformers that take the declared class and transform it, possibly using information from the helper decorators, to produce an Angular class. The JIT compiler performs this transformation at runtime. The AoT compiler performs this transformation at compile time.
+
+Each of the class decorators' class transformer creates a corresponding static member on the class that describes to the runtime how to use the class. For example, the `@Component` decorator creates an `ngComponentDef` static member, `@Directive` create an `ngDirectiveDef`, etc. Internally, these class transformers are called a "Compiler". Most of the compilers are straight forward translations of the metadata specified in the decorator to the information provided in the corresponding definition and, therefore, do not require anything outside the source file to perform the conversion. However, the component, during production builds and for type checking a template require the module scope of the component which requires information from other files in the program.
+
+#### Compiler design
+
+Each "Compiler" which transforms a single decorator into a static field will operate as a "pure function". Given input metadata about a particular type and decorator, it will produce an object describing the field to be added to the type, as well as the initializer value for that field (in Output AST format).
+
+A Compiler must not depend on any inputs not directly passed to it (for example, it must not scan sources or metadata for other symbols). This restriction is important for two reasons:
+
+1. It helps to enforce the Ivy locality principle, since all inputs to the Compiler will be visible.
+2. It protects against incorrect builds during `--watch` mode, since the dependencies between files will be easily traceable.
+
+Compilers will also not take Typescript nodes directly as input, but will operate against information extracted from TS sources by the transformer. In addition to helping enforce the rules above, this restriction also enables Compilers to run at runtime during JIT mode.
+
+For example, the input to the `@Component` compiler will be:
+
+* A reference to the class of the component.
+* The template and style resources of the component.
+* The selector of the component.
+* A selector map for the module to which the component belongs.
+
+#### Need for static value resolution
+
+During some parts of compilation, the compiler will need to statically interpret particular values in the AST, especially values from the decorator metadata. This is a complex problem. For example, while this form of a component is common:
+
+```javascript
+@Component({
+  selector: 'foo-cmp',
+  templateUrl: 'templates/foo.html',
+})
+export class Foo {}
+```
+
+The following is also permitted:
+
+```javascript
+export const TEMPLATE_BASE = 'templates/';
+
+export function getTemplateUrl(cmp: string): string {
+  return TEMPLATE_BASE + cmp + '.html';
+}
+
+export const FOO_SELECTOR = 'foo-cmp';
+export const FOO_TEMPLATE_URL = getTemplateUrl('foo');
+
+@Component({
+  selector: FOO_SELECTOR,
+  templateUrl: FOO_TEMPLATE_URL,
+})
+export class Foo {}
+```
+
+`ngc` has a metadata system which attempts to statically understand the "value side" of a program. This allowed it to follow the references and evaluate the expressions required to understand that `FOO_TEMPLATE_URL` evaluates statically to `templates/foo.html`. `ngtsc` will need a similar capability, though the design will be different.
+
+The `ngtsc` metadata evaluator will be built as a partial Typescript interpreter, which visits Typescript nodes and evaluates expressions statically. This allows metadata evaluation to happen on demand. It will have some restrictions that aren't present in the `ngc` model - in particular, evaluation will not cross `node_module` boundaries.
+
+#### Compiling a template
+
+A template is compiled in `TemplateCompiler` by performing the following:
+
+1. Tokenizes the template 
+2. Parses the tokens into an HTML AST
+3. Converts the HTML AST into an Angular Template AST.
+4. Translates the Angular Template AST to a template function
+
+The Angular Template AST transformed and annotated version of the HTML AST that does the following:
+
+1. Converts Angular template syntax short-cuts such as `*ngFor` and `[name]` into the their canonical versions, (<ng-template> and `bind-name`).
+2. Collects references (`#` attribute) and variables (`let-` attributes).
+3. Parses and converts binding expressions in the binding expression AST using the variables and references collected
+
+As part of this conversion an exhaustive list of selector targets is also produced that describes the potential targets of the selectors of any component, directive or pipe. For the purpose of this document, the name of the pipe is treated as a pipe selector and the expression reference in a binding expression is a potential target of that selector. This list is used in reference inversion discussed below.
+
+The `TemplateCompiler` can produce a template function from a string without additional information. However, correct interpretation of that string requires a selector scope discussed below. The selector scope is built at runtime allowing the runtime to use a function built from just a string as long as it is given a selector scope (e.g. an NgModule) to use during instantiation.
+
+#### The selector problem 
+
+To interpret the content of a template, the runtime needs to know what component and directives to apply to the element and what pipes are referenced by binding expressions. The list of candidate components, directives and pipes are determined by the `NgModule` in which the component is declared. Since the module and component are in separate source files, mapping which components, directives and pipes referenced is left to the runtime. Unfortunately, this leads to a tree-shaking problem. Since there no direct link between the component and types the component references then all components, directives and pipes declared in the module, and any module imported from the module, must be available at runtime or risk the template failing to be interpreted correctly. Including everything can lead to a very large program which contains many components the application doesn't actually use.
+
+The process of removing unused code is traditionally referred to as "tree-shaking". To determine what codes is necessary to include, a tree-shakers produces the transitive closure of all the code referenced by the bootstrap function. If the bootstrap code references a module then the tree-shaker will include everything imported or declared into the module.
+
+This problem can be avoided if the component would contain a list of the components, directives, and pipes on which it depends allowing the module to be ignored altogether. The program then need only contain the types the initial component rendered depends on and on any types those dependencies require.
+
+The process of determining this list is called reference inversion because it inverts the link from the module (which hold the dependencies) to component into a link from the component to its dependencies.
+
+##### Reference inversion in practice
+
+The View Compiler will optionally be able to perform the step of "reference inversion". If this option is elected (likely with a command-line option), the View Compiler must receive as input the selector scope for the component, indicating all of the directives and pipes that are in scope for the component. It scans the component's template, and filters the list of all directives and pipes in scope down to those which match elements in the template. This list is then reified into an instruction call which will patch it onto the component's definition.
+
+#### Flowing module & selector metadata via types (reference inversion)
+
+Reference inversion is an optional step of the compiler that can be used during production builds that prepares the Angular classes for tree-shaking.
+
+The process of reference inversion is to turn the list of selector targets produced by the template compiler to the list of types on which it depends. This mapping requires a selector scope which contains a mapping of CSS selectors declared in components, directives, and pipe names and their corresponding class. To produce this list for a module you do the following,
+
+1. Add all the type declared in the `declarations` field.
+2. For each module that is imported.
+    - Add the exported components, directives, and pipes
+    - Repeat these sub-steps for with each exported module
+
+For each type in the list produced above, parse the selector and convert them all into a selector matcher that, given a target, produces the type that matches the selector. This is referred to as the selector scope.
+
+Given a selector scope, a dependency list is formed by producing the set of types that are matched in selector scope from the selector target list produced by the template compiler.
+
+##### Finding a components module.
+
+A component's module can be found by using the TypeScript language service's `findReferences`. If one of the references is to a class declaration with an `@NgModule` annotation, process the class as described above to produce the selector scope. If the class is the declaration list of the `@NgModule` then use the scope produce for that module.
+
+When processing the `@NgModule` class, the type references can be found using the program's `checker` `getSymbolAtLocation` (potentially calling `getAliasedSymbol` if it is an alias symbol, `SymbolFlags.Alias`) and then using `Symbol`'s `declarations` field to get the list of declarations nodes (there should only be one for a `class`, there can be several for an `interface`).
+
+##### DTS modification
+
+As mentioned, TypeScript has no built in transformation pipeline for .d.ts files. Transformers can process the parsed AST and add/delete/modify nodes, but the type information emitted in the .d.ts files is purely from the initial AST, not the transformed AST. Thus, if the changes made by transformers are to be reflected in the .d.ts output, this must happen via some other mechanism.
+
+This leaves option 3 from above (`WriteFileCallback`) as the only point where .d.ts modification is possible. We will parse the .d.ts file as it's written and use the indices in the AST to coordinate insertion and deletion operations to fix up the generated types.
+
+#### Type checking a template
+
+A model very similar to the Renderer2 style of code generation can be used to generate type-check blocks for every template declared in a module. The module for type-checking can be similar to that used in `type_check_compiler.ts` for the Renderer2 AST. `type_check_compiler.ts` just emits all the binding expressions in a way that can be type-checked, calculating the correct implicit target and guarded by the correct type guards.
+
+Global type information is required for calculating type guards and for determining pipe calls.
+
+Type guards require determining which directives apply to an element to determine if any have a type guard.
+
+Correctly typing an expression that includes a pipe requires determining the result type of the `transform` method of the type.
+
+Additionally, more advanced type-checking as described in [Type Checking Templates](https://goo.gl/Q3tSgP) also requires determining the types of the directives that apply to an element as well as how the attributes map to the properties of the directives.
+
+The types of directives can be found using a selector scope as described for reference inversion. Once a selector scope is produced, the component and directives that apply to an element can be determined from the selector scope. The `.d.ts` changes described above also includes the attribute to property maps. The `TypeGuard`s are recorded as static fields that are included in the `.d.ts` file of the directive.
+
+#### Overall ngtsc architecture
+
+##### Compilation flow
+
+When `ngtsc` starts running, it first parses the `tsconfig.json` file and then creates a `ts.Program`. Several things need to happen before the transforms described above can run:
+
+* Metadata must be collected for input source files which contain decorators.
+* Resource files listed in `@Component` decorators must be resolved asynchronously. The CLI, for example, may wish to run Webpack to produce the `.css` input to the `styleUrls` property of an `@Component`.
+* Diagnostics must be run, which creates the `TypeChecker` and touches every node in the program (a decently expensive operation).
+
+Because resource loading is asynchronous (and in particular, may actually be concurrent via subprocesses), it's desirable to kick off as much resource loading as possible before doing anything expensive.
+
+Thus, the compiler flow looks like:
+
+1. Create the `ts.Program`
+2. Scan source files for top-level declarations which have trivially detectable `@Component` annotations. This avoids creating the `TypeChecker`.
+    * For each such declaration that has a `templateUrl` or `styleUrls`, kick off resource loading for that URL and add the `Promise` to a queue.
+3. Get diagnostics and report any initial error messages. At this point, the `TypeChecker` is primed.
+4. Do a thorough scan for `@Component` annotations, using the `TypeChecker` and the metadata system to resolve any complex expressions.
+5. Wait on all resources to be resolved.
+6. Calculate the set of transforms which need to be applied.
+7. Kick off Tsickle emit, which runs the transforms.
+8. During the emit callback for .d.ts files, re-parse the emitted .d.ts and merge in any requested changes from the Angular compiler.
+
+##### Resource loading
+
+Before the transformers can run, `templateUrl` and `styleUrls` need to be asynchronously resolved to their string contents. This resolution will happen via a Host interface which the compiler will expect to be implemented.
+
+```javascript
+interface NgtscCompilerHost extends ts.CompilerHost {
+  loadResource(path: string): Promise<string>;
+}
+```
+
+In the `ngtsc` CLI, this interface will be implemented using a plain read from the filesystem. Another consumer of the `ngtsc` API may wish to implement custom resource loading. For example, `@angular/cli` will invoke webpack on the resource paths to produce the result.
+
+##### Tsickle
+
+###### Special design considerations
+
+Currently, the design of Tsickle necessitates special consideration for its integration into `ngtsc`. Tsickle masquerades as a set of transformers, and has a particular API for triggering emit. As a transformer, Tsickle expects to be able to serialize the AST it's given to code strings (that is, it expects to be able to call `.getText()` on any given input node). This restriction means that transformers which run before Tsickle cannot introduce new synthetic nodes in the AST (for example, they cannot create new static properties on classes).
+
+Tsickle also currently converts `ts.Decorator` nodes into static properties on a class, an operation known as decorator down-leveling.
+
+###### Plan for Tsickle
+
+Because of the serialization restriction, Tsickle must run first, before the Angular transformer. However, the Angular transformer will operate against `ts.Decorator` nodes, not Tsickle's downleveled format. The Angular transformer will also remove the decorator nodes during compilation, so there is no need for Tsickle decorator downleveling. Thus, Tsickle's downlevel can be disabled for `ngtsc`.
+
+So the Angular transformer will run after the Tsickle transforms, but before the Typescript transforms.
+
+##### Watch mode
+
+`ngtsc` will support TypeScript's `--watch` mode for incremental compilation. Interally, watch mode is implemented via reuse of a `ts.Program` from the previous compile. When a `ts.Program` is reused, TypeScript determines which source files need to be re-typechecked and re-emitted, and performs those operations.
+
+This mode works for the Angular transformer and most of the decorator compilers, because they operate only using the metadata from one particular file. The exception is the `@Component` decorator, which requires the selector scope for the module in which the component is declared in. Effectively, this means that all components within a selector scope must be recompiled together, as any changes to the component selectors or type names, for example, will invalidate the compilation of all templates of all components in the scope. Since TypeScript will not track these changes, it's the responsibility of `ngtsc` to ensure the re-compilation of the right set of files.
+
+`ngtsc` will do this by tracking the set of source files included in each module scope within its `ts.Program`. When an old `ts.Program` is reused, the previous program's selector scope records can be used to determine whether any of the included files have changed, and thus whether re-compilation of components in the scope is necessary. In the future, this tracking can be improved to reduce the number of false positives by tracking the specific data which would trigger recompiles instead of conservatively triggering on any file modifications.
+
+### The compatibility compiler
+
+#### The compatibility problem
+
+Not all Angular code is compiled at the same time. Applications have dependencies on shared libraries, and those libraries are published on NPM in their compiled form and not as Typescript source code. Even if an application is built using `ngtsc`, its dependencies may not have been.
+
+If a particular library was not compiled with `ngtsc`, it does not have reified decorator properties in its `.js` distribution as described above. Linking it against a dependency that was not compiled in the same way will fail at runtime.
+
+#### Converting pre-Ivy code
+
+Since Ivy code can only be linked against other Ivy code, to build the application all pre-Ivy dependencies from NPM must be converted to Ivy dependencies. This transformation must happen as a precursor to running `ngtsc` on the application, and future compilation and linking operations need to be made against this transformed version of the dependencies.
+
+It is possible to transpile non-Ivy code in the Angular Package Format (v6) into Ivy code, even though the `.js` files no longer contain the decorator information. This works because the Angular Package Format includes `.metadata.json` files for each `.js` file. These metadata files contain information that was present in the Typescript source but was removed during transpilation to Javascript, and this information is sufficient to generate patched `.js` files which add the Ivy static properties to decorated classes.
+
+#### Metadata from APF
+
+The `.metadata.json` files currently being shipped to NPM includes, among other information, the arguments to the Angular decorators which `ngtsc` downlevels to static properties. For example, the `.metadata.json` file for `CommonModule` contains the information for its `NgModule` decorator which was originally present in the Typescript source:
+
+```json
+"CommonModule": {
+  "__symbolic": "class",
+  "decorators": [{
+    "__symbolic": "call",
+    "expression": {
+      "__symbolic": "reference",
+      "module": "@angular/core",
+      "name": "NgModule",
+      "line": 22,
+      "character": 1
+    },
+    "arguments": [{
+      "declarations": [...],
+      "exports": [...],
+      "providers": [...]
+    }]
+  }]
+}
+```
+
+#### ngcc operation
+
+`ngcc` will by default scan `node_modules` and produce Ivy-compatible versions of every package it discovers built using Angular Package Format (APF). It detects the APF by looking for the presence of a `.metadata.json` file alongside the package's `module` entrypoint.
+
+Alternatively, `ngcc` can be initiated by passing the name of a single NPM package. It will begin converting that package, and recurse into any dependencies of that package that it discovers which have not yet been converted.
+
+The output of `ngcc` is a directory called `ngcc_node_modules` by default, but can be renamed based on an option. Its structure mirrors that of `node_modules`, and the packages that are converted have the non-transpiled files copied verbatim - `package.json`, etc are all preserved in the output. Only the `.js` and `.d.ts` files are changed, and the `.metadata.json` files are removed.
+
+An example directory layout would be:
+
+```
+# input
+node_modules/
+  ng-dep/
+    package.json
+    index.js (pre-ivy)
+    index.d.ts (pre-ivy)
+    index.metadata.json
+    other.js
+
+# output
+ngcc_node_modules
+  ng-dep/
+    package.json
+    index.js (ivy compatible)
+    index.d.ts (ivy-compatible)
+    other.js (copied verbatim)
+```
+
+#### Operation as a loader
+
+`ngcc` can be called as a standalone entrypoint, but it can also be integrated into the dependency loading operation of a bundler such as Rollup or Webpack. In this mode, the `ngcc` API can be used to read a file originally in `node_modules`. If the file is from a package which has not yet been converted, `ngcc` will convert the package and its dependencies before returning the file's contents.
+
+In this mode, the on-disk `ngcc_node_modules` directory functions as a cache. If the file being requested has previously been converted, its contents will be read from `ngcc_node_modules`.
+
+#### Compilation Model
+
+`ngtsc` operates using a pipeline of different transformations, each one processing a different Angular decorator and converting it into a static property on the type being decorated. `ngcc` is architected to reuse as much of that process as possible.
+
+Compiling a package in `ngcc` involves the following steps:
+
+1. Parse the JS files of the package with the Typescript parser.
+2. Invoke the `StaticReflector` system from the legacy `@angular/compiler` to parse the `.metadata.json` files.
+3. Run through each Angular decorator in the Ivy system and compile:
+    1. Use the JS AST plus the information from the `StaticReflector` to construct the input to the annotation's Compiler.
+    2. Run the annotation's Compiler which will produce a partial class and its type declaration.
+    3. Extract the static property definition from the partial class.
+4. Combine the compiler outputs with the JS AST to produce the resulting `.js` and `.d.ts` files, and write them to disk.
+5. Copy over all other files.
+
+#### Merging with JS output
+
+At first glance it is desirable for each Compiler's output to be patched into the AST for the modules being compiled, and then to generate the resulting JS code and sourcemaps using Typescript's emit on the AST. This is undesirable for several reasons:
+
+* The round-trip through the Typescript parser and emitter might subtly change the input JS code - dropping comments, reformatting code, etc. This is not ideal, as users expect the input code to remain as unchanged as possible.
+* It isn't possible in Typescript to directly emit without going through any of Typescript's own transformations. This may cause expressions to be reformatted, code to be downleveled, and requires configuration of an output module system into which the code will be transformed.
+
+For these reasons, `ngcc` will not use the TS emitter to produce the final patched `.js` files. Instead, the JS text will be manipulated directly, with the help of the `magic-string` or similar library to ensure the changes are reflected in the output sourcemaps. The AST which is parsed from the JS files contains position information of all the types in the JS source, and this information can be used to determine the correct insertion points for the Ivy static fields.
+
+Similarly, the `.d.ts` files will be parsed by the TS parser, and the information used to determine the insertion points of typing information that needs to be added to individual types (as well as associated imports).
+
+##### Module systems
+
+The Angular Package Format includes more than one copy of a package's code. At minimum, it includes one ESM5 (ES5 code in ES Modules) entrypoint, one ES2015 entrypoint, and one UMD entrypoint. Some libraries _not_ following the package format may still work in the Angular CLI, if they export code that can be loaded by Webpack.
+
+Thus, `ngcc` will have two approaches for dealing with packages on NPM.
+
+1. APF Path: libraries following the Angular package format will have their source code updated to contain Ivy definitions. This ensures tree-shaking will work properly.
+2. Compatibility Path: libraries where `ngcc` cannot determine how to safely modify the existing code will have a patching operation applied. This patching operation produces a "wrapper" file for each file containing an Angular entity, which re-exports patched versions of the Angular entities. This is not compatible with tree-shaking, but will work for libraries which `ngcc` cannot otherwise understand. A warning will be printed to notify the user they should update the version of the library if possible.
+
+For example, if a library ships with commonjs-only code or a UMD bundle that `ngcc` isn't able to patch directly, it can generate patching wrappers instead of modifying the input code.
+
+### Language Service
+
+The `@angular/language-service` is mostly out of scope for this document, and will be treated in a separate design document. However, it's worth a consideration here as the architecture of the compiler impacts the language service's design.
+
+A Language Service is an analysis engine that integrates into an IDE such as Visual Studio Code. It processes code and provides static analysis information regarding that code, as well as enables specific IDE operations such as code completion, tracing of references, and refactoring. The `@angular/language-service` is a wrapper around the Typescript language service (much as `ngtsc` wraps `tsc`) and extends the analysis of Typescript with a specific understanding of Angular concepts. In particular, it also understands the Angular Template Syntax and can bridge between the component class in Typescript and expressions in the templates.
+
+To provide code completion and other intelligence around template contents, the Angular Language Service must have a similar understanding of the template contents as the `ngtsc` compiler - it must know the selector map associated with the component, and the metadata of each directive or pipe used in the template. Whether the language service consumes the output of `ngcc` or reuses its metadata transformation logic, the data it needs will be available.
diff --git a/packages/compiler/design/separate_compilation.md b/packages/compiler/design/separate_compilation.md
new file mode 100644
index 000000000000..914d1c70d93a
--- /dev/null
+++ b/packages/compiler/design/separate_compilation.md
@@ -0,0 +1,827 @@
+# DESIGN DOC (Ivy): Separate Compilation
+
+AUTHOR: chuckj@
+
+## Background
+
+### Angular 5 (Renderer2)
+
+In 5.0 and prior versions of Angular the compiler performs whole program
+analysis and generates template and injector definitions that are using
+this global knowledge to flatten injector scope definitions, inline
+directives into the component, pre-calculate queries, pre-calculate
+content projection, etc. This global knowledge requires that module and
+component factories are generated as a final global step when compiling
+a module. If any of the transitive information changed then all factories
+need to be regenerated.
+
+Separate component and module compilation is supported only at the module
+definition level and only from source. That is, npm packages must contain
+the metadata necessary to generate the factories, they cannot contain,
+themselves, the generated factories. This is because, if any of there
+dependencies change, their factories would be invalid preventing them from
+using version ranges in their dependencies. To support producing factories
+from compiled source (already translated by TypeScript into JavaScript)
+libraries include metadata that describe the content of the the Angular
+decorators.
+
+This document refers to this style of code generation as Renderer2 after the
+name of the renderer class it uses at runtime.
+
+### Angular Ivy
+
+In Ivy, the runtime is crafted in a way that allows for separate compilation
+by performing at runtime much of what was previously pre-calculated by
+compiler. This allows the definition of components to change without
+requiring modules and components that depend on them being recompiled.
+
+The mental model of Ivy is that the decorator is the compiler. That is
+the decorator can be thought of as parameters to a class transformer that
+transforms the class by generating definitions based on the decorator
+parameters. An `@Component` decorator transforms the class by adding
+an `ngComponentDef` static property, `@Directive` adds `ngDirectiveDef`,
+`@Pipe` adds `ngPipeDef`, etc. In most cases values supplied to the
+decorator is sufficient to generate the definition. However, in the case of
+interpreting the template, the compiler needs to know the selector defined for
+each component, directive and pipe that are in scope of the template. The
+purpose of this document is to define the information is needed by the
+compiler and how that information is serialized to be discovered and
+used by subsequent calls to `ngc`.
+
+This document refers to this style of code generation as ivy after the code
+name of the project to create it. It would be more consistent to refer to it
+as Renderer3 that looks too similar to Renderer2.
+
+## Information needed
+
+The information available across compilations in Angular 5 is represented in
+the  compiler by a summary description. For example, components and directives
+are represented by the [`CompileDirectiveSummary`](https://github.com/angular/angular/blob/d3827a0017fd5ff5ac0f6de8a19692ce47bf91b4/packages/compiler/src/compile_metadata.ts#L257).
+The following table shows where this information ends up in an ivy compiled
+class:
+
+### `CompileDirectiveSummary`
+
+| field               | destination           |
+|---------------------|-----------------------|
+| `type`              | implicit              |
+| `isComponent`       | `ngComponentDef`      |
+| `selector`          | `ngModuleScope`       |
+| `exportAs`          | `ngDirectiveDef`      |
+| `inputs`            | `ngDirectiveDef`      |
+| `outputs`           | `ngDirectiveDef`      |
+| `hostListeners`     | `ngDirectiveDef`      |
+| `hostProperties`    | `ngDirectiveDef`      |
+| `hostAttributes`    | `ngDirectiveDef`      |
+| `providers`         | `ngInjectorDef`       |
+| `viewProviders`     | `ngComponentDef`      |
+| `queries`           | `ngDirectiveDef`      |
+| `guards`            | not used              |
+| `viewQueries`       | `ngComponentDef`      |
+| `entryComponents`   | not used              |
+| `changeDetection`   | `ngComponentDef`      |
+| `template`          | `ngComponentDef`      |
+| `componentViewType` | not used              |
+| `renderType`        | not used              |
+| `componentFactory`  | not used              |
+
+Only one definition is generated per class. All components are directives so a
+`ngComponentDef` contains all the `ngDirectiveDef` information. All directives
+are injectable so `ngComponentDef` and `ngDirectiveDef` contain `ngInjectableDef`
+information.
+
+For `CompilePipeSummary` the table looks like:
+
+#### `CompilePipeSummary`
+
+| field               | destination           |
+|---------------------|-----------------------|
+| `type`              | implicit              |
+| `name`              | `ngModuleScope`       |
+| `pure`              | `ngPipeDef`           |
+
+The only pieces of information that are not generated into the definition are
+the directive selector and the pipe name as they go into the module scope.
+
+The information needed to build an `ngModuleScope` needs to be communicated
+from the directive and pipe to the module that declares them.
+
+## Metadata
+
+### Angular 5
+
+Angular 5 uses `.metadata.json` files to store information that is directly
+inferred from the `.ts` files and include value information that is not
+included in the `.d.ts` file produced by TypeScript. Because only exports for
+types are included in `.d.ts` files and might not include the exports necessary
+for values, the metadata includes export clauses from the `.ts` file.
+
+When a module is flattened into a FESM (Flat ECMAScript Module), a flat
+metadata file is also produced which is the metadata for all symbols exported
+from the module index. The metadata represents what the `.metadata.json` file
+would look like if all the symbols were declared in the index instead of
+reexported from the index.
+
+### Angular Ivy
+
+The metadata for a class in ivy is transformed to be what the metadata of the
+transformed .js file produced by the ivy compiler would be. For example, a
+component's `@Component` is removed by the compiler and replaced by a `ngComponentDef`.
+The `.metadata.json` file is similarly transformed but the content of the
+value assigned is elided (e.g. `"ngComponentDef": {}`). The compiler doesn't
+record the selector declared for a component but it is needed to produce the
+`ngModuleScope` so the information is recorded as if a static field
+`ngSelector` was declared on class with the value of the `selector` field
+from the `@Component` or `@Directive` decorator.
+
+The following transformations are performed:
+
+#### `@Component`
+
+The metadata for a component is transformed by:
+
+1. Removing the `@Component` directive.
+2. Add  `"ngComponentDef": {}` static field.
+3. Add `"ngSelector": <selector-value>` static field.
+
+##### Example
+
+*my.component.ts*
+```ts
+@Component({
+  selector: 'my-comp',
+  template: `<h1>Hello, {{name}}!</h1>`
+})
+export class MyComponent {
+  @Input() name: string;
+}
+```
+
+*my.component.js*
+```js
+export class MyComponent {
+  name: string;
+  static ngComponentDef = defineComponent({...});
+}
+```
+
+*my.component.metadata.json*
+```json
+{
+  "__symbolic": "module",
+  "version": 4,
+  "metadata": {
+    "MyComponent": {
+      "__symbolic": "class",
+      "statics": {
+        "ngComponentDef": {},
+        "ngSelector": "my-comp"
+      }
+    }
+  }
+}
+```
+
+Note that this is exactly what is produced if the transform had been done
+manually or by some other compiler before `ngc` compiler is invoked. That is
+this model has the advantage that there is no magic introduced by the compiler
+as it treats classes annotated by `@Component` identically to those produced
+manually.
+
+#### `@Directive`
+
+The metadata for a directive is transformed by:
+
+1. Removing the `@Directive` directive.
+2. Add  `"ngDirectiveDef": {}` static field.
+3. Add `"ngSelector": <selector-value>` static field.
+
+##### example
+
+*my.directive.ts*
+
+```ts
+@Directive({selector: '[my-dir]'})
+export class MyDirective {
+  @HostBinding('id') dirId = 'some id';
+}
+```
+
+*my.directive.js*
+```js
+export class MyDirective {
+  constructor() {
+    this.dirId = 'some id';
+  }
+  static ngDirectiveDef = defineDirective({...});
+}
+```
+
+*my.directive.metadata.json*
+```json
+{
+  "__symbolic": "module",
+  "version": 4,
+  "metadata": {
+    "MyDirective": {
+      "__symbolic": "class",
+      "statics": {
+        "ngDirectiveDef": {},
+        "ngSelector": "[my-dir]"
+      }
+    }
+  }
+}
+```
+
+#### `@Pipe`
+
+The metadata for a pipe is transformed by:
+
+1. Removing the `@Pipe` directive.
+2. Add  `"ngPipeDef": {}` static field.
+3. Add `"ngSelector": <name-value>` static field.
+
+##### example
+
+*my.pipe.ts*
+```ts
+@Pipe({name: 'myPipe'})
+export class MyPipe implements PipeTransform {
+  transform(...) ...
+}
+```
+
+*my.pipe.js*
+```js
+export class MyPipe {
+  transform(...) ...
+  static ngPipeDef = definePipe({...});
+}
+```
+
+*my.pipe.metadata.json*
+```json
+{
+  "__symbolic": "module",
+  "version": 4,
+  "metadata": {
+    "MyPipe": {
+      "__symbolic": "class",
+      "statics": {
+        "ngPipeDef": {},
+        "ngSelector": "myPipe"
+      }
+    }
+  }
+}
+```
+
+#### `@NgModule`
+
+The metadata for a module is transformed by:
+
+1. Remove the `@NgModule` directive.
+2. Add  `"ngInjectorDef": {}` static field.
+3. Add `"ngModuleScope": <module-scope>` static field.
+
+The scope value is an array the following type:
+
+```ts
+export type ModuleScope = ModuleScopeEntry[];
+
+export interface ModuleDirectiveEntry {
+  type: Type;
+  selector: string;
+}
+
+export interface ModulePipeEntry {
+  type: Type;
+  name: string;
+  isPipe: true;
+}
+
+export interface ModuleExportEntry {
+  type: Type;
+  isModule: true;
+}
+
+type ModuleScopeEntry = ModuleDirectiveEntry | ModulePipeEntry | ModuleExportEntry;
+```
+
+where the `type` values are generated as references.
+
+##### example
+
+*my.module.ts*
+```ts
+@NgModule({
+  imports: [CommonModule, UtilityModule],
+  declarations: [MyComponent, MyDirective, MyPipe],
+  exports: [MyComponent, MyDirective, MyPipe, UtilityModule],
+  providers: [{
+    provide: Service, useClass: ServiceImpl
+  }]
+})
+export class MyModule {}
+```
+
+*my.module.js*
+```js
+export class MyModule {
+  static ngInjectorDef = defineInjector(...);
+}
+```
+
+*my.module.metadata.json*
+```json
+{
+  "__symbolic": "module",
+  "version": 4,
+  "metadata": {
+    "MyModule": {
+      "__symbolic": "class",
+      "statics": {
+        "ngInjectorDef": {},
+        "ngModuleScope": [
+          {
+            "type": {
+              "__symbolic": "reference",
+              "module": "./my.component",
+              "name": "MyComponent"
+            },
+            "selector": "my-comp"
+          },
+          {
+            "type": {
+              "__symbolic": "reference",
+              "module": "./my.directive",
+              "name": "MyDirective"
+            },
+            "selector": "[my-dir]"
+          },
+          {
+            "type": {
+              "__symbolic": "reference",
+              "module": "./my.pipe",
+              "name": "MyPipe"
+            },
+            "name": "myPipe",
+            "isPipe": true
+          },
+          {
+            "type": {
+              "__symbolic": "reference",
+              "module": "./utility.module",
+              "name": "UtilityModule"
+            },
+            "isModule": true
+          }
+        ]
+      }
+    }
+  }
+}
+```
+
+Note that this is identical to what would have been generated if the this was
+manually written as:
+
+```ts
+export class MyModule {
+  static ngInjectorDef = defineInjector({
+    providers: [{
+      provide: Service, useClass: ServiceImpl
+    }],
+    imports: [CommonModule, UtilityModule]
+  });
+  static ngModuleScope = [{
+    type: MyComponent,
+    selector: 'my-comp'
+  }, {
+    type: MyDirective,
+    selector: '[my-dir]'
+  }, {
+    type: MyPipe,
+    name: 'myPipe'
+  }, {
+    type: UtilityModule,
+    isModule: true
+  }];
+}
+```
+
+except for the call to `defineInjector` would generate a `{ __symbolic: 'error' }`
+value which is ignored by the ivy compiler. This allows the system to ignore
+the difference between manually and mechanically created module definitions.
+
+
+## Manual Considerations
+
+With this proposal, the compiler treats manually and mechanically generated
+Angular definitions identically. This allows flexibility not only in the future
+for how the declarations are mechanically produced it also allows alternative
+mechanism to generate declarations be easily explored without altering the
+compiler or dependent tool chain. It also allows third-party code generators
+with possibly different component syntaxes to generate a component fully
+understood by the compiler.
+
+Unfortunately, however, manually generated modules contain references to
+classes that might not be necessary at runtime. Manually or third-party
+components can get the same payload properties of an Angular generated
+component by annotating the `ngSelector` and `ngModuleScope` properties with
+`// @__BUILD_OPTIMIZER_REMOVE_` comment which will cause the build optimizer
+to remove the declaration.
+
+##### example
+
+For example the above manually created module would have better payload
+properties by including a `// @__BUILD_OPTIMIZER_REMOVE_` comment:
+
+```ts
+export class MyModule {
+  static ngInjectorDef = defineInjector({
+    providers: [{
+      provide: Service, useClass: ServiceImpl
+    }],
+    imports: [CommonModule, UtilityModule]
+  });
+
+  // @__BUILD_OPTIMIZER_REMOVE_
+  static ngModuleScope = [{
+    type: MyComponent,
+    selector: 'my-comp'
+  }, {
+    type: MyDirective,
+    selector: '[my-dir]'
+  }, {
+    type: MyPipe,
+    name: 'myPipe'
+  }, {
+    type: UtilityModule,
+    isModule: true
+  }];
+}
+```
+
+## `ngc` output (non-Bazel)
+
+The cases that `ngc` handle are producing an application and producing a
+reusable library used in an application.
+
+### Application output
+
+The output of the ivy compiler only optionally generates the factories
+generated by the Renderer2 style output of Angular 5.0. In ivy, the information
+that was generated in factories is now generated in Angular as a definition
+that is generated as a static field on the Angular decorated class.
+
+Renderer2 requires that, when building the final application, all factories for
+all libraries also be generated. In ivy, the definitions are generated when
+the library is compiled.
+
+The ivy compile can adapt Renderer2 target libraries by generating the factories
+for them and back-patching, at runtime, the static property into the class.
+
+#### Back-patching module (`"renderer2BackPatching"`)
+
+When an application contains Renderer2 target libraries the ivy definitions
+need to be back-patch onto the component, directive, module, pipe, and
+injectable classes.
+
+If the Angular compiler option `"renderer2BackPatching"` is enabled, the
+compiler will generate an `angular.back-patch` module into the root output
+directory of the project. If `"generateRenderer2Factories"` is set to `true`
+then the default value for `"renderer2BackPatching"` is `true` and it is an
+error for it to be `false`. `"renderer2BackPatching"` is ignored if `"enableIvy"`
+is `false`.
+
+`angular.back-patch` exports a function per `@NgModule` for the entire
+application, including previously compiled libraries. The name of the function
+is determined by name of the imported module with all non alphanumeric
+character, including '`/`' and '`.`', replaced by '`_`'.
+
+The back-patch functions will call the back-patch function of any module they
+import. This means that only the application's module and lazy loaded modules
+back-patching functions needs to be called. If using the Renderer2 module factory
+instances, this is performed automatically when the first application module
+instance is created.
+
+#### Renderer2 Factories (`"generateRenderer2Factories"`)
+
+`ngc` can generate an implementation of `NgModuleFactory` in the same location
+that Angular 5.0 would generate it. This implementation of `NgModuleFactory`
+will back-patch the Renderer2 style classes when the first module instance is
+created by calling the correct back-patching function generated in the`angular.back-patch`
+module.
+
+Renderer2 style factories are created when the `"generateRenderer2Factories"`
+Angular compiler option is `true`. Setting `"generateRenderer2Factories"` implies
+`"renderer2BackPatching"` is also `true` and it is an error to explicitly set it
+to `false`. `"generateRenderer2Factories"` is ignored if `"enableIvy"` is
+`false`.
+
+When this option is `true` a factory module is created with the same public API
+at the same location as Angular 5.0 whenever Angular 5.0 would have generated a
+factory.
+
+### Recommended options
+
+The recommended options for producing a ivy application are
+
+| option                         | value    |             |
+|--------------------------------|----------|-------------|
+| `"enableIvy"`                  | `true`   | required    |
+| `"generateRenderer2Factories"` | `true`   | implied     |
+| `"renderer2BackPatching"`      | `true`   | implied     |
+| `"generateCodeForLibraries"`   | `true`   | default     |
+| `"annotationsAs"`              | `remove` | implied     |
+| `"preserveWhitespaces"`        | `false`  | default     |
+| `"skipMetadataEmit"`           | `true`   | default     |
+| `"strictMetadataEmit"`         | `false`  | implied     |
+| `"skipTemplateCodegen"`        |          | ignored     |
+
+The options marked "implied" are implied by other options having the
+recommended value and do not need to be explicitly set. Options marked
+"default" also do not need to be set explicitly.
+
+## Library output
+
+Building an ivy library with `ngc` differs from Renderer2 in that the
+declarations are included in the generated output and should be included in the
+package published to `npm`. The `.metadata.json` files still need to be
+included but they are transformed as described below.
+
+### Transforming metadata
+
+As described above, when the compiler adds the declaration to the class it will
+also transform the `.metadata.json` file to reflect the new static fields added
+to the class.
+
+Once the static fields are added to the metadata, the ivy compiler no longer
+needs the the information in the decorator. When `"enableIvy"` is `true` this
+information is removed from the `.metadata.json` file.
+
+### Recommended options
+
+The recommended options for producing a ivy library are:
+
+| option                         | value    |             |
+|--------------------------------|----------|-------------|
+| `"enableIvy"`                  | `true`   | required    |
+| `"generateRenderer2Factories"` | `false`  |             |
+| `"renderer2BackPatching"`      | `false`  | default     |
+| `"generateCodeForLibraries"`   | `false`  |             |
+| `"annotationsAs"`              | `remove` | implied     |
+| `"preserveWhitespaces"`        | `false`  | default     |
+| `"skipMetadataEmit"`           | `false`  |             |
+| `"strictMetadataEmit"`         | `true `  |             |
+| `"skipTemplateCodegen"`        |          | ignored     |
+
+The options marked "implied" are implied by other options having the
+recommended value and do not need to be explicitly set. Options marked
+"default" also do not need to be set explicitly.
+
+## Simplified options
+
+The default Angular Compiler options default to, mostly, the recommended set of
+options but the options necessary to set for specific targets are not clear and
+mixing them can produce nonsensical results. The `"target"` option can be used
+to simplify the setting of the compiler options to the recommended values
+depending on the target:
+
+| target            | option                         | value        |             |
+|-------------------|--------------------------------|--------------|-------------|
+| `"application"`   | `"generateRenderer2Factories"` | `true`       | enforced    |
+|                   | `"renderer2BackPatching"`      | `true`       | enforced    |
+|                   | `"generateCodeForLibraries"`   | `true`       |             |
+|                   | `"annotationsAs"`              | `remove`     |             |
+|                   | `"preserveWhitespaces"`        | `false`      |             |
+|                   | `"skipMetadataEmit"`           | `false`      |             |
+|                   | `"strictMetadataEmit"`         | `true`       |             |
+|                   | `"skipTemplateCodegen"`        | `false`      |             |
+|                   | `"fullTemplateTypeCheck"`      | `true`       |             |
+|                   |                                |              |             |
+| `"library"`       | `"generateRenderer2Factories"` | `false`      | enforced    |
+|                   | `"renderer2BackPatching"`      | `false`      | enforced    |
+|                   | `"generateCodeForLibraries"`   | `false`      | enforced    |
+|                   | `"annotationsAs"`              | `decorators` |             |
+|                   | `"preserveWhitespaces"`        | `false`      |             |
+|                   | `"skipMetadataEmit"`           | `false`      | enforced    |
+|                   | `"strictMetadataEmit"`         | `true`       |             |
+|                   | `"skipTemplateCodegen"`        | `false`      | enforced    |
+|                   | `"fullTemplateTypeCheck"`      | `true`       |             |
+|                   |                                |              |             |
+| `"package"`       | `"flatModuleOutFile"`          |              | required    |
+|                   | `"flatModuleId"`               |              | required    |
+|                   | `"enableIvy"`                  | `false`      | enforced    |
+|                   | `"generateRenderer2Factories"` | `false`      | enforced    |
+|                   | `"renderer2BackPatching"`      | `false`      | enforced    |
+|                   | `"generateCodeForLibraries"`   | `false`      | enforced    |
+|                   | `"annotationsAs"`              | `remove`     |             |
+|                   | `"preserveWhitespaces"`        | `false`      |             |
+|                   | `"skipMetadataEmit"`           | `false`      | enforced    |
+|                   | `"strictMetadataEmit"`         | `true`       |             |
+|                   | `"skipTemplateCodegen"`        | `false`      | enforced    |
+|                   | `"fullTemplateTypeCheck"`      | `true`       |             |
+
+Options that are marked "enforced" are reported as an error if they are
+explicitly set to a value different from what is specified here. The options
+marked "required" are required to be set and an error message is displayed if
+no value is supplied but no default is provided.
+
+The purpose of the "application" target is for the options used when the `ngc`
+invocation contains the root application module. Lazy loaded modules should
+also be considered "application" targets.
+
+The purpose of the "library" target is for are all `ngc` invocations that do
+not contain the root application module or a lazy loaded module.
+
+The purpose of the "package" target is to produce a library package that will
+be an entry point for an npm package. Each entry point should be separately
+compiled using a "package" target.
+
+##### example - application
+
+To produce a Renderer2 application the options would look like,
+
+```json
+{
+  "compileOptions": {
+    ...
+  },
+  "angularCompilerOptions": {
+    "target": "application"
+  }
+}
+```
+
+alternately, since the recommended `"application"` options are the default
+values, the `"angularCompilerOptions"` can be out.
+
+##### example - library
+
+To produce a Renderer2 library the options would look like,
+
+```json
+{
+  "compileOptions": {
+    ...
+  },
+  "angularCompilerOptions": {
+    "target": "library"
+  }
+}
+```
+
+##### example - package
+
+To produce a Renderer2 package the options would look like,
+
+```json
+{
+  "compileOptions": {
+    ...
+  },
+  "angularCompilerOptions": {
+    "target": "package"
+  }
+}
+```
+
+##### example - ivy application
+
+To produce an ivy application the options would look like,
+
+```json
+{
+  "compileOptions": {
+    ...
+  },
+  "angularCompilerOptions": {
+    "target": "application",
+    "enableIvy": true
+  }
+}
+```
+
+##### example - ivy library
+
+To produce an ivy library the options would look like,
+
+```json
+{
+  "compileOptions": {
+    ...
+  },
+  "angularCompilerOptions": {
+    "target": "library",
+    "enableIvy": true
+  }
+}
+```
+
+##### example - ivy package
+
+Ivy packages are not supported in Angular 6.0 as they are not recommended in
+npm packages as they would only be usable if in ivy application where an ivy
+application. Ivy application support Renderer2 libraries so npm packages
+should all be Renderer2 libraries.
+
+## `ng_module` output (Bazel)
+
+The `ng_module` rule describes the source necessary to produce a Angular
+library that is reusable and composable into an application.
+
+### Angular 5.0
+
+The `ng_module` rule invokes `ngc`[<sup>1<sup>](#ngc_wrapped) to produce
+the Angular output. However, `ng_module` uses a feature, the `.ngsummary.json`
+file, not normally used and is often difficult to configure correctly.
+
+The `.ngsummary.json` describes all the information that is necessary for
+the compiler to use a generated factory. It is produced by actions defined
+in the `ng_module` rule and is consumed by actions defined by `ng_module`
+rules that depend on other `ng_module` rules.
+
+### Angular Ivy
+
+The `ng_module` rule will still use `ngc` to produce the Angular output but,
+when producing ivy output, it no longer will need the `.ngsummary.json` file.
+
+#### `ng_experimental_ivy_srcs`
+
+The `ng_experimental_ivy_srcs` can be used as use to cause the ivy versions of
+files to be generated. It is intended the sole dependency of a `ts_dev_server`
+rule and the `ts_dev_server` sources move to `ng_experimental_iv_srcs`.
+
+#### `ng_module` ivy output
+
+The `ng_module` is able to provide the ivy version of the `.js` files which
+will be generated with as `.ivy.js` for the development sources and `.ivy.closure.js`
+for the production sources.
+
+The `ng_module` rule will also generate a `angular.back_patch.js` and `.closure.js`
+files and a `module_scope.json` file. The type of the `module_scope.json` file will
+be:
+
+```ts
+interface ModuleScopeSummary {
+  [moduleName: string]: ModuleScopeEntry[];
+}
+```
+
+where `moduleName` is the name of the as it would appear in an import statement
+in a `.ts` file at the same relative location in the source tree. All the
+references in this file are also relative this location.
+
+##### example
+
+The following is a typical Angular application build in bazel:
+
+*src/BUILD.bazel*
+```py
+ng_module(
+  name = "src",
+  srcs = glob(["*.ts"]),
+  deps= ["//common/component"],
+)
+
+ts_dev_server(
+  name = "server",
+  srcs = ":src",
+)
+```
+
+To use produce an ivy version you would add:
+
+```py
+ng_experimental_ivy_srcs(
+  name = "ivy_srcs",
+  srcs = ":src",
+)
+
+ts_dev_server(
+  name = "server_ivy",
+  srcs = [":ivy_srcs"]
+)
+```
+
+To serve the Renderer2 version, you would run:
+
+```sh
+bazel run :server
+```
+
+to serve the ivy version you would run
+
+```sh
+bazel run :server_ivy
+```
+
+The `ng_experimental_ivy_srcs` rule is only needed when ivy is experimental. Once ivy
+is released the `ng_experimental_ivy_srcs`, dependent rules, can be removed.
+
+---
+<a name="myfootnote1"><sup>1</sup></a> More correctly, it calls `performCompilation`
+from the `@angular/compiler-cli` which is what `ngc` does too.
diff --git a/packages/compiler/index.ts b/packages/compiler/index.ts
new file mode 100644
index 000000000000..da6c41adeeef
--- /dev/null
+++ b/packages/compiler/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 './compiler';
diff --git a/packages/compiler/package.json b/packages/compiler/package.json
new file mode 100644
index 000000000000..bb7d8a1961db
--- /dev/null
+++ b/packages/compiler/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@angular/compiler",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - the compiler library",
+  "main": "./bundles/compiler.umd.js",
+  "module": "./fesm5/compiler.js",
+  "es2015": "./fesm2015/compiler.js",
+  "esm5": "./esm5/compiler.js",
+  "esm2015": "./esm2015/compiler.js",
+  "fesm5": "./fesm5/compiler.js",
+  "fesm2015": "./fesm2015/compiler.js",
+  "typings": "./compiler.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/compiler/public_api.ts b/packages/compiler/public_api.ts
new file mode 100644
index 000000000000..13abd58d2632
--- /dev/null
+++ b/packages/compiler/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/compiler';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/compiler/rollup.config.js b/packages/compiler/rollup.config.js
new file mode 100644
index 000000000000..a735cc2adca0
--- /dev/null
+++ b/packages/compiler/rollup.config.js
@@ -0,0 +1,27 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  'rxjs': 'rxjs',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/compiler/fesm5/compiler.js',
+  dest: '../../dist/packages-dist/compiler/bundles/compiler.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/compiler'},
+  moduleName: 'ng.compiler',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/compiler/src/aot/compiler.ts b/packages/compiler/src/aot/compiler.ts
new file mode 100644
index 000000000000..f76e0fe06cce
--- /dev/null
+++ b/packages/compiler/src/aot/compiler.ts
@@ -0,0 +1,993 @@
+/**
+ * @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 {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileInjectableMetadata, CompileNgModuleMetadata, CompilePipeMetadata, CompilePipeSummary, CompileProviderMetadata, CompileShallowModuleMetadata, CompileStylesheetMetadata, CompileTypeMetadata, CompileTypeSummary, componentFactoryName, flatten, identifierName, templateSourceUrl} from '../compile_metadata';
+import {CompilerConfig} from '../config';
+import {ConstantPool} from '../constant_pool';
+import {ViewEncapsulation} from '../core';
+import {MessageBundle} from '../i18n/message_bundle';
+import {Identifiers, createTokenForExternalReference} from '../identifiers';
+import {InjectableCompiler} from '../injectable_compiler';
+import {CompileMetadataResolver} from '../metadata_resolver';
+import * as html from '../ml_parser/ast';
+import {HtmlParser} from '../ml_parser/html_parser';
+import {removeWhitespaces} from '../ml_parser/html_whitespaces';
+import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../ml_parser/interpolation_config';
+import {NgModuleCompiler} from '../ng_module_compiler';
+import {OutputEmitter} from '../output/abstract_emitter';
+import * as o from '../output/output_ast';
+import {ParseError} from '../parse_util';
+import {compileNgModuleFromRender2 as compileR3Module} from '../render3/r3_module_compiler';
+import {compilePipeFromRender2 as compileR3Pipe} from '../render3/r3_pipe_compiler';
+import {htmlAstToRender3Ast} from '../render3/r3_template_transform';
+import {compileComponentFromRender2 as compileR3Component, compileDirectiveFromRender2 as compileR3Directive} from '../render3/view/compiler';
+import {DomElementSchemaRegistry} from '../schema/dom_element_schema_registry';
+import {CompiledStylesheet, StyleCompiler} from '../style_compiler';
+import {SummaryResolver} from '../summary_resolver';
+import {BindingParser} from '../template_parser/binding_parser';
+import {TemplateAst} from '../template_parser/template_ast';
+import {TemplateParser} from '../template_parser/template_parser';
+import {OutputContext, ValueVisitor, error, syntaxError, visitValue} from '../util';
+import {TypeCheckCompiler} from '../view_compiler/type_check_compiler';
+import {ViewCompileResult, ViewCompiler} from '../view_compiler/view_compiler';
+
+import {AotCompilerHost} from './compiler_host';
+import {AotCompilerOptions} from './compiler_options';
+import {GeneratedFile} from './generated_file';
+import {LazyRoute, listLazyRoutes, parseLazyRoute} from './lazy_routes';
+import {PartialModule} from './partial_module';
+import {StaticReflector} from './static_reflector';
+import {StaticSymbol} from './static_symbol';
+import {StaticSymbolResolver} from './static_symbol_resolver';
+import {createForJitStub, serializeSummaries} from './summary_serializer';
+import {ngfactoryFilePath, normalizeGenFileSuffix, splitTypescriptSuffix, summaryFileName, summaryForJitFileName} from './util';
+
+const enum StubEmitFlags { Basic = 1 << 0, TypeCheck = 1 << 1, All = TypeCheck | Basic }
+
+export class AotCompiler {
+  private _templateAstCache =
+      new Map<StaticSymbol, {template: TemplateAst[], pipes: CompilePipeSummary[]}>();
+  private _analyzedFiles = new Map<string, NgAnalyzedFile>();
+  private _analyzedFilesForInjectables = new Map<string, NgAnalyzedFileWithInjectables>();
+
+  constructor(
+      private _config: CompilerConfig, private _options: AotCompilerOptions,
+      private _host: AotCompilerHost, readonly reflector: StaticReflector,
+      private _metadataResolver: CompileMetadataResolver, private _templateParser: TemplateParser,
+      private _styleCompiler: StyleCompiler, private _viewCompiler: ViewCompiler,
+      private _typeCheckCompiler: TypeCheckCompiler, private _ngModuleCompiler: NgModuleCompiler,
+      private _injectableCompiler: InjectableCompiler, private _outputEmitter: OutputEmitter,
+      private _summaryResolver: SummaryResolver<StaticSymbol>,
+      private _symbolResolver: StaticSymbolResolver) {}
+
+  clearCache() { this._metadataResolver.clearCache(); }
+
+  analyzeModulesSync(rootFiles: string[]): NgAnalyzedModules {
+    const analyzeResult = analyzeAndValidateNgModules(
+        rootFiles, this._host, this._symbolResolver, this._metadataResolver);
+    analyzeResult.ngModules.forEach(
+        ngModule => this._metadataResolver.loadNgModuleDirectiveAndPipeMetadata(
+            ngModule.type.reference, true));
+    return analyzeResult;
+  }
+
+  analyzeModulesAsync(rootFiles: string[]): Promise<NgAnalyzedModules> {
+    const analyzeResult = analyzeAndValidateNgModules(
+        rootFiles, this._host, this._symbolResolver, this._metadataResolver);
+    return Promise
+        .all(analyzeResult.ngModules.map(
+            ngModule => this._metadataResolver.loadNgModuleDirectiveAndPipeMetadata(
+                ngModule.type.reference, false)))
+        .then(() => analyzeResult);
+  }
+
+  private _analyzeFile(fileName: string): NgAnalyzedFile {
+    let analyzedFile = this._analyzedFiles.get(fileName);
+    if (!analyzedFile) {
+      analyzedFile =
+          analyzeFile(this._host, this._symbolResolver, this._metadataResolver, fileName);
+      this._analyzedFiles.set(fileName, analyzedFile);
+    }
+    return analyzedFile;
+  }
+
+  private _analyzeFileForInjectables(fileName: string): NgAnalyzedFileWithInjectables {
+    let analyzedFile = this._analyzedFilesForInjectables.get(fileName);
+    if (!analyzedFile) {
+      analyzedFile = analyzeFileForInjectables(
+          this._host, this._symbolResolver, this._metadataResolver, fileName);
+      this._analyzedFilesForInjectables.set(fileName, analyzedFile);
+    }
+    return analyzedFile;
+  }
+
+  findGeneratedFileNames(fileName: string): string[] {
+    const genFileNames: string[] = [];
+    const file = this._analyzeFile(fileName);
+    // Make sure we create a .ngfactory if we have a injectable/directive/pipe/NgModule
+    // or a reference to a non source file.
+    // Note: This is overestimating the required .ngfactory files as the real calculation is harder.
+    // Only do this for StubEmitFlags.Basic, as adding a type check block
+    // does not change this file (as we generate type check blocks based on NgModules).
+    if (this._options.allowEmptyCodegenFiles || file.directives.length || file.pipes.length ||
+        file.injectables.length || file.ngModules.length || file.exportsNonSourceFiles) {
+      genFileNames.push(ngfactoryFilePath(file.fileName, true));
+      if (this._options.enableSummariesForJit) {
+        genFileNames.push(summaryForJitFileName(file.fileName, true));
+      }
+    }
+    const fileSuffix = normalizeGenFileSuffix(splitTypescriptSuffix(file.fileName, true)[1]);
+    file.directives.forEach((dirSymbol) => {
+      const compMeta =
+          this._metadataResolver.getNonNormalizedDirectiveMetadata(dirSymbol) !.metadata;
+      if (!compMeta.isComponent) {
+        return;
+      }
+      // Note: compMeta is a component and therefore template is non null.
+      compMeta.template !.styleUrls.forEach((styleUrl) => {
+        const normalizedUrl = this._host.resourceNameToFileName(styleUrl, file.fileName);
+        if (!normalizedUrl) {
+          throw syntaxError(`Couldn't resolve resource ${styleUrl} relative to ${file.fileName}`);
+        }
+        const needsShim = (compMeta.template !.encapsulation ||
+                           this._config.defaultEncapsulation) === ViewEncapsulation.Emulated;
+        genFileNames.push(_stylesModuleUrl(normalizedUrl, needsShim, fileSuffix));
+        if (this._options.allowEmptyCodegenFiles) {
+          genFileNames.push(_stylesModuleUrl(normalizedUrl, !needsShim, fileSuffix));
+        }
+      });
+    });
+    return genFileNames;
+  }
+
+  emitBasicStub(genFileName: string, originalFileName?: string): GeneratedFile {
+    const outputCtx = this._createOutputContext(genFileName);
+    if (genFileName.endsWith('.ngfactory.ts')) {
+      if (!originalFileName) {
+        throw new Error(
+            `Assertion error: require the original file for .ngfactory.ts stubs. File: ${genFileName}`);
+      }
+      const originalFile = this._analyzeFile(originalFileName);
+      this._createNgFactoryStub(outputCtx, originalFile, StubEmitFlags.Basic);
+    } else if (genFileName.endsWith('.ngsummary.ts')) {
+      if (this._options.enableSummariesForJit) {
+        if (!originalFileName) {
+          throw new Error(
+              `Assertion error: require the original file for .ngsummary.ts stubs. File: ${genFileName}`);
+        }
+        const originalFile = this._analyzeFile(originalFileName);
+        _createEmptyStub(outputCtx);
+        originalFile.ngModules.forEach(ngModule => {
+          // create exports that user code can reference
+          createForJitStub(outputCtx, ngModule.type.reference);
+        });
+      }
+    } else if (genFileName.endsWith('.ngstyle.ts')) {
+      _createEmptyStub(outputCtx);
+    }
+    // Note: for the stubs, we don't need a property srcFileUrl,
+    // as later on in emitAllImpls we will create the proper GeneratedFiles with the
+    // correct srcFileUrl.
+    // This is good as e.g. for .ngstyle.ts files we can't derive
+    // the url of components based on the genFileUrl.
+    return this._codegenSourceModule('unknown', outputCtx);
+  }
+
+  emitTypeCheckStub(genFileName: string, originalFileName: string): GeneratedFile|null {
+    const originalFile = this._analyzeFile(originalFileName);
+    const outputCtx = this._createOutputContext(genFileName);
+    if (genFileName.endsWith('.ngfactory.ts')) {
+      this._createNgFactoryStub(outputCtx, originalFile, StubEmitFlags.TypeCheck);
+    }
+    return outputCtx.statements.length > 0 ?
+        this._codegenSourceModule(originalFile.fileName, outputCtx) :
+        null;
+  }
+
+  loadFilesAsync(fileNames: string[], tsFiles: string[]): Promise<
+      {analyzedModules: NgAnalyzedModules, analyzedInjectables: NgAnalyzedFileWithInjectables[]}> {
+    const files = fileNames.map(fileName => this._analyzeFile(fileName));
+    const loadingPromises: Promise<NgAnalyzedModules>[] = [];
+    files.forEach(
+        file => file.ngModules.forEach(
+            ngModule =>
+                loadingPromises.push(this._metadataResolver.loadNgModuleDirectiveAndPipeMetadata(
+                    ngModule.type.reference, false))));
+    const analyzedInjectables = tsFiles.map(tsFile => this._analyzeFileForInjectables(tsFile));
+    return Promise.all(loadingPromises).then(_ => ({
+                                               analyzedModules: mergeAndValidateNgFiles(files),
+                                               analyzedInjectables: analyzedInjectables,
+                                             }));
+  }
+
+  loadFilesSync(fileNames: string[], tsFiles: string[]):
+      {analyzedModules: NgAnalyzedModules, analyzedInjectables: NgAnalyzedFileWithInjectables[]} {
+    const files = fileNames.map(fileName => this._analyzeFile(fileName));
+    files.forEach(
+        file => file.ngModules.forEach(
+            ngModule => this._metadataResolver.loadNgModuleDirectiveAndPipeMetadata(
+                ngModule.type.reference, true)));
+    const analyzedInjectables = tsFiles.map(tsFile => this._analyzeFileForInjectables(tsFile));
+    return {
+      analyzedModules: mergeAndValidateNgFiles(files),
+      analyzedInjectables: analyzedInjectables,
+    };
+  }
+
+  private _createNgFactoryStub(
+      outputCtx: OutputContext, file: NgAnalyzedFile, emitFlags: StubEmitFlags) {
+    let componentId = 0;
+    file.ngModules.forEach((ngModuleMeta, ngModuleIndex) => {
+      // Note: the code below needs to executed for StubEmitFlags.Basic and StubEmitFlags.TypeCheck,
+      // so we don't change the .ngfactory file too much when adding the type-check block.
+
+      // create exports that user code can reference
+      this._ngModuleCompiler.createStub(outputCtx, ngModuleMeta.type.reference);
+
+      // add references to the symbols from the metadata.
+      // These can be used by the type check block for components,
+      // and they also cause TypeScript to include these files into the program too,
+      // which will make them part of the analyzedFiles.
+      const externalReferences: StaticSymbol[] = [
+        // Add references that are available from all the modules and imports.
+        ...ngModuleMeta.transitiveModule.directives.map(d => d.reference),
+        ...ngModuleMeta.transitiveModule.pipes.map(d => d.reference),
+        ...ngModuleMeta.importedModules.map(m => m.type.reference),
+        ...ngModuleMeta.exportedModules.map(m => m.type.reference),
+
+        // Add references that might be inserted by the template compiler.
+        ...this._externalIdentifierReferences([Identifiers.TemplateRef, Identifiers.ElementRef]),
+      ];
+
+      const externalReferenceVars = new Map<any, string>();
+      externalReferences.forEach((ref, typeIndex) => {
+        externalReferenceVars.set(ref, `_decl${ngModuleIndex}_${typeIndex}`);
+      });
+      externalReferenceVars.forEach((varName, reference) => {
+        outputCtx.statements.push(
+            o.variable(varName)
+                .set(o.NULL_EXPR.cast(o.DYNAMIC_TYPE))
+                .toDeclStmt(o.expressionType(outputCtx.importExpr(
+                    reference, /* typeParams */ null, /* useSummaries */ false))));
+      });
+
+      if (emitFlags & StubEmitFlags.TypeCheck) {
+        // add the type-check block for all components of the NgModule
+        ngModuleMeta.declaredDirectives.forEach((dirId) => {
+          const compMeta = this._metadataResolver.getDirectiveMetadata(dirId.reference);
+          if (!compMeta.isComponent) {
+            return;
+          }
+          componentId++;
+          this._createTypeCheckBlock(
+              outputCtx, `${compMeta.type.reference.name}_Host_${componentId}`, ngModuleMeta,
+              this._metadataResolver.getHostComponentMetadata(compMeta), [compMeta.type],
+              externalReferenceVars);
+          this._createTypeCheckBlock(
+              outputCtx, `${compMeta.type.reference.name}_${componentId}`, ngModuleMeta, compMeta,
+              ngModuleMeta.transitiveModule.directives, externalReferenceVars);
+        });
+      }
+    });
+
+    if (outputCtx.statements.length === 0) {
+      _createEmptyStub(outputCtx);
+    }
+  }
+
+  private _externalIdentifierReferences(references: o.ExternalReference[]): StaticSymbol[] {
+    const result: StaticSymbol[] = [];
+    for (let reference of references) {
+      const token = createTokenForExternalReference(this.reflector, reference);
+      if (token.identifier) {
+        result.push(token.identifier.reference);
+      }
+    }
+    return result;
+  }
+
+  private _createTypeCheckBlock(
+      ctx: OutputContext, componentId: string, moduleMeta: CompileNgModuleMetadata,
+      compMeta: CompileDirectiveMetadata, directives: CompileIdentifierMetadata[],
+      externalReferenceVars: Map<any, string>) {
+    const {template: parsedTemplate, pipes: usedPipes} =
+        this._parseTemplate(compMeta, moduleMeta, directives);
+    ctx.statements.push(...this._typeCheckCompiler.compileComponent(
+        componentId, compMeta, parsedTemplate, usedPipes, externalReferenceVars, ctx));
+  }
+
+  emitMessageBundle(analyzeResult: NgAnalyzedModules, locale: string|null): MessageBundle {
+    const errors: ParseError[] = [];
+    const htmlParser = new HtmlParser();
+
+    // TODO(vicb): implicit tags & attributes
+    const messageBundle = new MessageBundle(htmlParser, [], {}, locale);
+
+    analyzeResult.files.forEach(file => {
+      const compMetas: CompileDirectiveMetadata[] = [];
+      file.directives.forEach(directiveType => {
+        const dirMeta = this._metadataResolver.getDirectiveMetadata(directiveType);
+        if (dirMeta && dirMeta.isComponent) {
+          compMetas.push(dirMeta);
+        }
+      });
+      compMetas.forEach(compMeta => {
+        const html = compMeta.template !.template !;
+        // Template URL points to either an HTML or TS file depending on whether
+        // the file is used with `templateUrl:` or `template:`, respectively.
+        const templateUrl = compMeta.template !.templateUrl !;
+        const interpolationConfig =
+            InterpolationConfig.fromArray(compMeta.template !.interpolation);
+        errors.push(...messageBundle.updateFromTemplate(html, templateUrl, interpolationConfig) !);
+      });
+    });
+
+    if (errors.length) {
+      throw new Error(errors.map(e => e.toString()).join('\n'));
+    }
+
+    return messageBundle;
+  }
+
+  emitAllPartialModules(
+      {ngModuleByPipeOrDirective, files}: NgAnalyzedModules,
+      r3Files: NgAnalyzedFileWithInjectables[]): PartialModule[] {
+    const contextMap = new Map<string, OutputContext>();
+
+    const getContext = (fileName: string): OutputContext => {
+      if (!contextMap.has(fileName)) {
+        contextMap.set(fileName, this._createOutputContext(fileName));
+      }
+      return contextMap.get(fileName) !;
+    };
+
+    files.forEach(
+        file => this._compilePartialModule(
+            file.fileName, ngModuleByPipeOrDirective, file.directives, file.pipes, file.ngModules,
+            file.injectables, getContext(file.fileName)));
+    r3Files.forEach(
+        file => this._compileShallowModules(
+            file.fileName, file.shallowModules, getContext(file.fileName)));
+
+    return Array.from(contextMap.values())
+        .map(context => ({
+               fileName: context.genFilePath,
+               statements: [...context.constantPool.statements, ...context.statements],
+             }));
+  }
+
+  private _compileShallowModules(
+      fileName: string, shallowModules: CompileShallowModuleMetadata[],
+      context: OutputContext): void {
+    shallowModules.forEach(module => compileR3Module(context, module, this._injectableCompiler));
+  }
+
+  private _compilePartialModule(
+      fileName: string, ngModuleByPipeOrDirective: Map<StaticSymbol, CompileNgModuleMetadata>,
+      directives: StaticSymbol[], pipes: StaticSymbol[], ngModules: CompileNgModuleMetadata[],
+      injectables: CompileInjectableMetadata[], context: OutputContext): void {
+    const errors: ParseError[] = [];
+
+    const schemaRegistry = new DomElementSchemaRegistry();
+    const hostBindingParser = new BindingParser(
+        this._templateParser.expressionParser, DEFAULT_INTERPOLATION_CONFIG, schemaRegistry, [],
+        errors);
+
+    // Process all components and directives
+    directives.forEach(directiveType => {
+      const directiveMetadata = this._metadataResolver.getDirectiveMetadata(directiveType);
+      if (directiveMetadata.isComponent) {
+        const module = ngModuleByPipeOrDirective.get(directiveType) !;
+        module ||
+            error(
+                `Cannot determine the module for component '${identifierName(directiveMetadata.type)}'`);
+
+        let htmlAst = directiveMetadata.template !.htmlAst !;
+        const preserveWhitespaces = directiveMetadata !.template !.preserveWhitespaces;
+
+        if (!preserveWhitespaces) {
+          htmlAst = removeWhitespaces(htmlAst);
+        }
+        const render3Ast = htmlAstToRender3Ast(htmlAst.rootNodes, hostBindingParser);
+
+        // Map of StaticType by directive selectors
+        const directiveTypeBySel = new Map<string, any>();
+
+        const directives = module.transitiveModule.directives.map(
+            dir => this._metadataResolver.getDirectiveSummary(dir.reference));
+
+        directives.forEach(directive => {
+          if (directive.selector) {
+            directiveTypeBySel.set(directive.selector, directive.type.reference);
+          }
+        });
+
+        // Map of StaticType by pipe names
+        const pipeTypeByName = new Map<string, any>();
+
+        const pipes = module.transitiveModule.pipes.map(
+            pipe => this._metadataResolver.getPipeSummary(pipe.reference));
+
+        pipes.forEach(pipe => { pipeTypeByName.set(pipe.name, pipe.type.reference); });
+
+        compileR3Component(
+            context, directiveMetadata, render3Ast, this.reflector, hostBindingParser,
+            directiveTypeBySel, pipeTypeByName);
+      } else {
+        compileR3Directive(context, directiveMetadata, this.reflector, hostBindingParser);
+      }
+    });
+
+    pipes.forEach(pipeType => {
+      const pipeMetadata = this._metadataResolver.getPipeMetadata(pipeType);
+      if (pipeMetadata) {
+        compileR3Pipe(context, pipeMetadata, this.reflector);
+      }
+    });
+
+    injectables.forEach(injectable => this._injectableCompiler.compile(injectable, context));
+  }
+
+  emitAllPartialModules2(files: NgAnalyzedFileWithInjectables[]): PartialModule[] {
+    // Using reduce like this is a select many pattern (where map is a select pattern)
+    return files.reduce<PartialModule[]>((r, file) => {
+      r.push(...this._emitPartialModule2(file.fileName, file.injectables));
+      return r;
+    }, []);
+  }
+
+  private _emitPartialModule2(fileName: string, injectables: CompileInjectableMetadata[]):
+      PartialModule[] {
+    const context = this._createOutputContext(fileName);
+
+    injectables.forEach(injectable => this._injectableCompiler.compile(injectable, context));
+
+    if (context.statements && context.statements.length > 0) {
+      return [{fileName, statements: [...context.constantPool.statements, ...context.statements]}];
+    }
+    return [];
+  }
+
+  emitAllImpls(analyzeResult: NgAnalyzedModules): GeneratedFile[] {
+    const {ngModuleByPipeOrDirective, files} = analyzeResult;
+    const sourceModules = files.map(
+        file => this._compileImplFile(
+            file.fileName, ngModuleByPipeOrDirective, file.directives, file.pipes, file.ngModules,
+            file.injectables));
+    return flatten(sourceModules);
+  }
+
+  private _compileImplFile(
+      srcFileUrl: string, ngModuleByPipeOrDirective: Map<StaticSymbol, CompileNgModuleMetadata>,
+      directives: StaticSymbol[], pipes: StaticSymbol[], ngModules: CompileNgModuleMetadata[],
+      injectables: CompileInjectableMetadata[]): GeneratedFile[] {
+    const fileSuffix = normalizeGenFileSuffix(splitTypescriptSuffix(srcFileUrl, true)[1]);
+    const generatedFiles: GeneratedFile[] = [];
+
+    const outputCtx = this._createOutputContext(ngfactoryFilePath(srcFileUrl, true));
+
+    generatedFiles.push(
+        ...this._createSummary(srcFileUrl, directives, pipes, ngModules, injectables, outputCtx));
+
+    // compile all ng modules
+    ngModules.forEach((ngModuleMeta) => this._compileModule(outputCtx, ngModuleMeta));
+
+    // compile components
+    directives.forEach((dirType) => {
+      const compMeta = this._metadataResolver.getDirectiveMetadata(<any>dirType);
+      if (!compMeta.isComponent) {
+        return;
+      }
+      const ngModule = ngModuleByPipeOrDirective.get(dirType);
+      if (!ngModule) {
+        throw new Error(
+            `Internal Error: cannot determine the module for component ${identifierName(compMeta.type)}!`);
+      }
+
+      // compile styles
+      const componentStylesheet = this._styleCompiler.compileComponent(outputCtx, compMeta);
+      // Note: compMeta is a component and therefore template is non null.
+      compMeta.template !.externalStylesheets.forEach((stylesheetMeta) => {
+        // Note: fill non shim and shim style files as they might
+        // be shared by component with and without ViewEncapsulation.
+        const shim = this._styleCompiler.needsStyleShim(compMeta);
+        generatedFiles.push(
+            this._codegenStyles(srcFileUrl, compMeta, stylesheetMeta, shim, fileSuffix));
+        if (this._options.allowEmptyCodegenFiles) {
+          generatedFiles.push(
+              this._codegenStyles(srcFileUrl, compMeta, stylesheetMeta, !shim, fileSuffix));
+        }
+      });
+
+      // compile components
+      const compViewVars = this._compileComponent(
+          outputCtx, compMeta, ngModule, ngModule.transitiveModule.directives, componentStylesheet,
+          fileSuffix);
+      this._compileComponentFactory(outputCtx, compMeta, ngModule, fileSuffix);
+    });
+    if (outputCtx.statements.length > 0 || this._options.allowEmptyCodegenFiles) {
+      const srcModule = this._codegenSourceModule(srcFileUrl, outputCtx);
+      generatedFiles.unshift(srcModule);
+    }
+    return generatedFiles;
+  }
+
+  private _createSummary(
+      srcFileName: string, directives: StaticSymbol[], pipes: StaticSymbol[],
+      ngModules: CompileNgModuleMetadata[], injectables: CompileInjectableMetadata[],
+      ngFactoryCtx: OutputContext): GeneratedFile[] {
+    const symbolSummaries = this._symbolResolver.getSymbolsOf(srcFileName)
+                                .map(symbol => this._symbolResolver.resolveSymbol(symbol));
+    const typeData: {
+      summary: CompileTypeSummary,
+      metadata: CompileNgModuleMetadata | CompileDirectiveMetadata | CompilePipeMetadata |
+          CompileTypeMetadata
+    }[] =
+        [
+          ...ngModules.map(
+              meta => ({
+                summary: this._metadataResolver.getNgModuleSummary(meta.type.reference) !,
+                metadata: this._metadataResolver.getNgModuleMetadata(meta.type.reference) !
+              })),
+          ...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.symbol) !,
+                metadata: this._metadataResolver.getInjectableSummary(ref.symbol) !.type
+              }))
+        ];
+    const forJitOutputCtx = this._options.enableSummariesForJit ?
+        this._createOutputContext(summaryForJitFileName(srcFileName, true)) :
+        null;
+    const {json, exportAs} = serializeSummaries(
+        srcFileName, forJitOutputCtx, this._summaryResolver, this._symbolResolver, symbolSummaries,
+        typeData);
+    exportAs.forEach((entry) => {
+      ngFactoryCtx.statements.push(
+          o.variable(entry.exportAs).set(ngFactoryCtx.importExpr(entry.symbol)).toDeclStmt(null, [
+            o.StmtModifier.Exported
+          ]));
+    });
+    const summaryJson = new GeneratedFile(srcFileName, summaryFileName(srcFileName), json);
+    const result = [summaryJson];
+    if (forJitOutputCtx) {
+      result.push(this._codegenSourceModule(srcFileName, forJitOutputCtx));
+    }
+    return result;
+  }
+
+  private _compileModule(outputCtx: OutputContext, ngModule: CompileNgModuleMetadata): void {
+    const providers: CompileProviderMetadata[] = [];
+
+    if (this._options.locale) {
+      const normalizedLocale = this._options.locale.replace(/_/g, '-');
+      providers.push({
+        token: createTokenForExternalReference(this.reflector, Identifiers.LOCALE_ID),
+        useValue: normalizedLocale,
+      });
+    }
+
+    if (this._options.i18nFormat) {
+      providers.push({
+        token: createTokenForExternalReference(this.reflector, Identifiers.TRANSLATIONS_FORMAT),
+        useValue: this._options.i18nFormat
+      });
+    }
+
+    this._ngModuleCompiler.compile(outputCtx, ngModule, providers);
+  }
+
+  private _compileComponentFactory(
+      outputCtx: OutputContext, compMeta: CompileDirectiveMetadata,
+      ngModule: CompileNgModuleMetadata, fileSuffix: string): void {
+    const hostMeta = this._metadataResolver.getHostComponentMetadata(compMeta);
+    const hostViewFactoryVar =
+        this._compileComponent(outputCtx, hostMeta, ngModule, [compMeta.type], null, fileSuffix)
+            .viewClassVar;
+    const compFactoryVar = componentFactoryName(compMeta.type.reference);
+    const inputsExprs: o.LiteralMapEntry[] = [];
+    for (let propName in compMeta.inputs) {
+      const templateName = compMeta.inputs[propName];
+      // Don't quote so that the key gets minified...
+      inputsExprs.push(new o.LiteralMapEntry(propName, o.literal(templateName), false));
+    }
+    const outputsExprs: o.LiteralMapEntry[] = [];
+    for (let propName in compMeta.outputs) {
+      const templateName = compMeta.outputs[propName];
+      // Don't quote so that the key gets minified...
+      outputsExprs.push(new o.LiteralMapEntry(propName, o.literal(templateName), false));
+    }
+
+    outputCtx.statements.push(
+        o.variable(compFactoryVar)
+            .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(
+                  compMeta.template !.ngContentSelectors.map(selector => o.literal(selector)))
+            ]))
+            .toDeclStmt(
+                o.importType(
+                    Identifiers.ComponentFactory,
+                    [o.expressionType(outputCtx.importExpr(compMeta.type.reference)) !],
+                    [o.TypeModifier.Const]),
+                [o.StmtModifier.Final, o.StmtModifier.Exported]));
+  }
+
+  private _compileComponent(
+      outputCtx: OutputContext, compMeta: CompileDirectiveMetadata,
+      ngModule: CompileNgModuleMetadata, directiveIdentifiers: CompileIdentifierMetadata[],
+      componentStyles: CompiledStylesheet|null, fileSuffix: string): ViewCompileResult {
+    const {template: parsedTemplate, pipes: usedPipes} =
+        this._parseTemplate(compMeta, ngModule, directiveIdentifiers);
+    const stylesExpr = componentStyles ? o.variable(componentStyles.stylesVar) : o.literalArr([]);
+    const viewResult = this._viewCompiler.compileComponent(
+        outputCtx, compMeta, parsedTemplate, stylesExpr, usedPipes);
+    if (componentStyles) {
+      _resolveStyleStatements(
+          this._symbolResolver, componentStyles, this._styleCompiler.needsStyleShim(compMeta),
+          fileSuffix);
+    }
+    return viewResult;
+  }
+
+  private _parseTemplate(
+      compMeta: CompileDirectiveMetadata, ngModule: CompileNgModuleMetadata,
+      directiveIdentifiers: CompileIdentifierMetadata[]):
+      {template: TemplateAst[], pipes: CompilePipeSummary[]} {
+    if (this._templateAstCache.has(compMeta.type.reference)) {
+      return this._templateAstCache.get(compMeta.type.reference) !;
+    }
+    const preserveWhitespaces = compMeta !.template !.preserveWhitespaces;
+    const directives =
+        directiveIdentifiers.map(dir => this._metadataResolver.getDirectiveSummary(dir.reference));
+    const pipes = ngModule.transitiveModule.pipes.map(
+        pipe => this._metadataResolver.getPipeSummary(pipe.reference));
+    const result = this._templateParser.parse(
+        compMeta, compMeta.template !.htmlAst !, directives, pipes, ngModule.schemas,
+        templateSourceUrl(ngModule.type, compMeta, compMeta.template !), preserveWhitespaces);
+    this._templateAstCache.set(compMeta.type.reference, result);
+    return result;
+  }
+
+  private _createOutputContext(genFilePath: string): OutputContext {
+    const importExpr =
+        (symbol: StaticSymbol, typeParams: o.Type[] | null = null,
+         useSummaries: boolean = true) => {
+          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, useSummaries) || symbol;
+          const importModule = this._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._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, constantPool: new ConstantPool()};
+  }
+
+  private _fileNameToModuleName(importedFilePath: string, containingFilePath: string): string {
+    return this._summaryResolver.getKnownModuleName(importedFilePath) ||
+        this._symbolResolver.getKnownModuleName(importedFilePath) ||
+        this._host.fileNameToModuleName(importedFilePath, containingFilePath);
+  }
+
+  private _codegenStyles(
+      srcFileUrl: string, compMeta: CompileDirectiveMetadata,
+      stylesheetMetadata: CompileStylesheetMetadata, isShimmed: boolean,
+      fileSuffix: string): GeneratedFile {
+    const outputCtx = this._createOutputContext(
+        _stylesModuleUrl(stylesheetMetadata.moduleUrl !, isShimmed, fileSuffix));
+    const compiledStylesheet =
+        this._styleCompiler.compileStyles(outputCtx, compMeta, stylesheetMetadata, isShimmed);
+    _resolveStyleStatements(this._symbolResolver, compiledStylesheet, isShimmed, fileSuffix);
+    return this._codegenSourceModule(srcFileUrl, outputCtx);
+  }
+
+  private _codegenSourceModule(srcFileUrl: string, ctx: OutputContext): GeneratedFile {
+    return new GeneratedFile(srcFileUrl, ctx.genFilePath, ctx.statements);
+  }
+
+  listLazyRoutes(entryRoute?: string, analyzedModules?: NgAnalyzedModules): LazyRoute[] {
+    const self = this;
+    if (entryRoute) {
+      const symbol = parseLazyRoute(entryRoute, this.reflector).referencedModule;
+      return visitLazyRoute(symbol);
+    } else if (analyzedModules) {
+      const allLazyRoutes: LazyRoute[] = [];
+      for (const ngModule of analyzedModules.ngModules) {
+        const lazyRoutes = listLazyRoutes(ngModule, this.reflector);
+        for (const lazyRoute of lazyRoutes) {
+          allLazyRoutes.push(lazyRoute);
+        }
+      }
+      return allLazyRoutes;
+    } else {
+      throw new Error(`Either route or analyzedModules has to be specified!`);
+    }
+
+    function visitLazyRoute(
+        symbol: StaticSymbol, seenRoutes = new Set<StaticSymbol>(),
+        allLazyRoutes: LazyRoute[] = []): LazyRoute[] {
+      // Support pointing to default exports, but stop recursing there,
+      // as the StaticReflector does not yet support default exports.
+      if (seenRoutes.has(symbol) || !symbol.name) {
+        return allLazyRoutes;
+      }
+      seenRoutes.add(symbol);
+      const lazyRoutes = listLazyRoutes(
+          self._metadataResolver.getNgModuleMetadata(symbol, true) !, self.reflector);
+      for (const lazyRoute of lazyRoutes) {
+        allLazyRoutes.push(lazyRoute);
+        visitLazyRoute(lazyRoute.referencedModule, seenRoutes, allLazyRoutes);
+      }
+      return allLazyRoutes;
+    }
+  }
+}
+
+function _createEmptyStub(outputCtx: OutputContext) {
+  // Note: We need to produce at least one import statement so that
+  // TypeScript knows that the file is an es6 module. Otherwise our generated
+  // exports / imports won't be emitted properly by TypeScript.
+  outputCtx.statements.push(o.importExpr(Identifiers.ComponentFactory).toStmt());
+}
+
+
+function _resolveStyleStatements(
+    symbolResolver: StaticSymbolResolver, compileResult: CompiledStylesheet, needsShim: boolean,
+    fileSuffix: string): void {
+  compileResult.dependencies.forEach((dep) => {
+    dep.setValue(symbolResolver.getStaticSymbol(
+        _stylesModuleUrl(dep.moduleUrl, needsShim, fileSuffix), dep.name));
+  });
+}
+
+function _stylesModuleUrl(stylesheetUrl: string, shim: boolean, suffix: string): string {
+  return `${stylesheetUrl}${shim ? '.shim' : ''}.ngstyle${suffix}`;
+}
+
+export interface NgAnalyzedModules {
+  ngModules: CompileNgModuleMetadata[];
+  ngModuleByPipeOrDirective: Map<StaticSymbol, CompileNgModuleMetadata>;
+  files: NgAnalyzedFile[];
+  symbolsMissingModule?: StaticSymbol[];
+}
+
+export interface NgAnalyzedFileWithInjectables {
+  fileName: string;
+  injectables: CompileInjectableMetadata[];
+  shallowModules: CompileShallowModuleMetadata[];
+}
+
+export interface NgAnalyzedFile {
+  fileName: string;
+  directives: StaticSymbol[];
+  pipes: StaticSymbol[];
+  ngModules: CompileNgModuleMetadata[];
+  injectables: CompileInjectableMetadata[];
+  exportsNonSourceFiles: boolean;
+}
+
+export interface NgAnalyzeModulesHost { isSourceFile(filePath: string): boolean; }
+
+export function analyzeNgModules(
+    fileNames: string[], host: NgAnalyzeModulesHost, staticSymbolResolver: StaticSymbolResolver,
+    metadataResolver: CompileMetadataResolver): NgAnalyzedModules {
+  const files = _analyzeFilesIncludingNonProgramFiles(
+      fileNames, host, staticSymbolResolver, metadataResolver);
+  return mergeAnalyzedFiles(files);
+}
+
+export function analyzeAndValidateNgModules(
+    fileNames: string[], host: NgAnalyzeModulesHost, staticSymbolResolver: StaticSymbolResolver,
+    metadataResolver: CompileMetadataResolver): NgAnalyzedModules {
+  return validateAnalyzedModules(
+      analyzeNgModules(fileNames, host, staticSymbolResolver, metadataResolver));
+}
+
+function validateAnalyzedModules(analyzedModules: NgAnalyzedModules): NgAnalyzedModules {
+  if (analyzedModules.symbolsMissingModule && analyzedModules.symbolsMissingModule.length) {
+    const messages = analyzedModules.symbolsMissingModule.map(
+        s =>
+            `Cannot determine the module for class ${s.name} in ${s.filePath}! Add ${s.name} to the NgModule to fix it.`);
+    throw syntaxError(messages.join('\n'));
+  }
+  return analyzedModules;
+}
+
+// Analyzes all of the program files,
+// including files that are not part of the program
+// but are referenced by an NgModule.
+function _analyzeFilesIncludingNonProgramFiles(
+    fileNames: string[], host: NgAnalyzeModulesHost, staticSymbolResolver: StaticSymbolResolver,
+    metadataResolver: CompileMetadataResolver): NgAnalyzedFile[] {
+  const seenFiles = new Set<string>();
+  const files: NgAnalyzedFile[] = [];
+
+  const visitFile = (fileName: string) => {
+    if (seenFiles.has(fileName) || !host.isSourceFile(fileName)) {
+      return false;
+    }
+    seenFiles.add(fileName);
+    const analyzedFile = analyzeFile(host, staticSymbolResolver, metadataResolver, fileName);
+    files.push(analyzedFile);
+    analyzedFile.ngModules.forEach(ngModule => {
+      ngModule.transitiveModule.modules.forEach(modMeta => visitFile(modMeta.reference.filePath));
+    });
+  };
+  fileNames.forEach((fileName) => visitFile(fileName));
+  return files;
+}
+
+export function analyzeFile(
+    host: NgAnalyzeModulesHost, staticSymbolResolver: StaticSymbolResolver,
+    metadataResolver: CompileMetadataResolver, fileName: string): NgAnalyzedFile {
+  const directives: StaticSymbol[] = [];
+  const pipes: StaticSymbol[] = [];
+  const injectables: CompileInjectableMetadata[] = [];
+  const ngModules: CompileNgModuleMetadata[] = [];
+  const hasDecorators = staticSymbolResolver.hasDecorators(fileName);
+  let exportsNonSourceFiles = false;
+  // Don't analyze .d.ts files that have no decorators as a shortcut
+  // to speed up the analysis. This prevents us from
+  // resolving the references in these files.
+  // Note: exportsNonSourceFiles is only needed when compiling with summaries,
+  // which is not the case when .d.ts files are treated as input files.
+  if (!fileName.endsWith('.d.ts') || hasDecorators) {
+    staticSymbolResolver.getSymbolsOf(fileName).forEach((symbol) => {
+      const resolvedSymbol = staticSymbolResolver.resolveSymbol(symbol);
+      const symbolMeta = resolvedSymbol.metadata;
+      if (!symbolMeta || symbolMeta.__symbolic === 'error') {
+        return;
+      }
+      let isNgSymbol = false;
+      if (symbolMeta.__symbolic === 'class') {
+        if (metadataResolver.isDirective(symbol)) {
+          isNgSymbol = true;
+          directives.push(symbol);
+        } else if (metadataResolver.isPipe(symbol)) {
+          isNgSymbol = true;
+          pipes.push(symbol);
+        } else if (metadataResolver.isNgModule(symbol)) {
+          const ngModule = metadataResolver.getNgModuleMetadata(symbol, false);
+          if (ngModule) {
+            isNgSymbol = true;
+            ngModules.push(ngModule);
+          }
+        } else if (metadataResolver.isInjectable(symbol)) {
+          isNgSymbol = true;
+          const injectable = metadataResolver.getInjectableMetadata(symbol, null, false);
+          if (injectable) {
+            injectables.push(injectable);
+          }
+        }
+      }
+      if (!isNgSymbol) {
+        exportsNonSourceFiles =
+            exportsNonSourceFiles || isValueExportingNonSourceFile(host, symbolMeta);
+      }
+    });
+  }
+  return {
+      fileName, directives, pipes, ngModules, injectables, exportsNonSourceFiles,
+  };
+}
+
+export function analyzeFileForInjectables(
+    host: NgAnalyzeModulesHost, staticSymbolResolver: StaticSymbolResolver,
+    metadataResolver: CompileMetadataResolver, fileName: string): NgAnalyzedFileWithInjectables {
+  const injectables: CompileInjectableMetadata[] = [];
+  const shallowModules: CompileShallowModuleMetadata[] = [];
+  if (staticSymbolResolver.hasDecorators(fileName)) {
+    staticSymbolResolver.getSymbolsOf(fileName).forEach((symbol) => {
+      const resolvedSymbol = staticSymbolResolver.resolveSymbol(symbol);
+      const symbolMeta = resolvedSymbol.metadata;
+      if (!symbolMeta || symbolMeta.__symbolic === 'error') {
+        return;
+      }
+      if (symbolMeta.__symbolic === 'class') {
+        if (metadataResolver.isInjectable(symbol)) {
+          const injectable = metadataResolver.getInjectableMetadata(symbol, null, false);
+          if (injectable) {
+            injectables.push(injectable);
+          }
+        } else if (metadataResolver.isNgModule(symbol)) {
+          const module = metadataResolver.getShallowModuleMetadata(symbol);
+          if (module) {
+            shallowModules.push(module);
+          }
+        }
+      }
+    });
+  }
+  return {fileName, injectables, shallowModules};
+}
+
+function isValueExportingNonSourceFile(host: NgAnalyzeModulesHost, metadata: any): boolean {
+  let exportsNonSourceFiles = false;
+
+  class Visitor implements ValueVisitor {
+    visitArray(arr: any[], context: any): any { arr.forEach(v => visitValue(v, this, context)); }
+    visitStringMap(map: {[key: string]: any}, context: any): any {
+      Object.keys(map).forEach((key) => visitValue(map[key], this, context));
+    }
+    visitPrimitive(value: any, context: any): any {}
+    visitOther(value: any, context: any): any {
+      if (value instanceof StaticSymbol && !host.isSourceFile(value.filePath)) {
+        exportsNonSourceFiles = true;
+      }
+    }
+  }
+
+  visitValue(metadata, new Visitor(), null);
+  return exportsNonSourceFiles;
+}
+
+export function mergeAnalyzedFiles(analyzedFiles: NgAnalyzedFile[]): NgAnalyzedModules {
+  const allNgModules: CompileNgModuleMetadata[] = [];
+  const ngModuleByPipeOrDirective = new Map<StaticSymbol, CompileNgModuleMetadata>();
+  const allPipesAndDirectives = new Set<StaticSymbol>();
+
+  analyzedFiles.forEach(af => {
+    af.ngModules.forEach(ngModule => {
+      allNgModules.push(ngModule);
+      ngModule.declaredDirectives.forEach(
+          d => ngModuleByPipeOrDirective.set(d.reference, ngModule));
+      ngModule.declaredPipes.forEach(p => ngModuleByPipeOrDirective.set(p.reference, ngModule));
+    });
+    af.directives.forEach(d => allPipesAndDirectives.add(d));
+    af.pipes.forEach(p => allPipesAndDirectives.add(p));
+  });
+
+  const symbolsMissingModule: StaticSymbol[] = [];
+  allPipesAndDirectives.forEach(ref => {
+    if (!ngModuleByPipeOrDirective.has(ref)) {
+      symbolsMissingModule.push(ref);
+    }
+  });
+  return {
+    ngModules: allNgModules,
+    ngModuleByPipeOrDirective,
+    symbolsMissingModule,
+    files: analyzedFiles
+  };
+}
+
+function mergeAndValidateNgFiles(files: NgAnalyzedFile[]): NgAnalyzedModules {
+  return validateAnalyzedModules(mergeAnalyzedFiles(files));
+}
diff --git a/packages/compiler/src/aot/compiler_factory.ts b/packages/compiler/src/aot/compiler_factory.ts
new file mode 100644
index 000000000000..6122764f4384
--- /dev/null
+++ b/packages/compiler/src/aot/compiler_factory.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 {CompilerConfig} from '../config';
+import {MissingTranslationStrategy, ViewEncapsulation} from '../core';
+import {DirectiveNormalizer} from '../directive_normalizer';
+import {DirectiveResolver} from '../directive_resolver';
+import {Lexer} from '../expression_parser/lexer';
+import {Parser} from '../expression_parser/parser';
+import {I18NHtmlParser} from '../i18n/i18n_html_parser';
+import {InjectableCompiler} from '../injectable_compiler';
+import {CompileMetadataResolver} from '../metadata_resolver';
+import {HtmlParser} from '../ml_parser/html_parser';
+import {NgModuleCompiler} from '../ng_module_compiler';
+import {NgModuleResolver} from '../ng_module_resolver';
+import {TypeScriptEmitter} from '../output/ts_emitter';
+import {PipeResolver} from '../pipe_resolver';
+import {DomElementSchemaRegistry} from '../schema/dom_element_schema_registry';
+import {StyleCompiler} from '../style_compiler';
+import {TemplateParser} from '../template_parser/template_parser';
+import {UrlResolver} from '../url_resolver';
+import {syntaxError} from '../util';
+import {TypeCheckCompiler} from '../view_compiler/type_check_compiler';
+import {ViewCompiler} from '../view_compiler/view_compiler';
+
+import {AotCompiler} from './compiler';
+import {AotCompilerHost} from './compiler_host';
+import {AotCompilerOptions} from './compiler_options';
+import {StaticReflector} from './static_reflector';
+import {StaticSymbol, StaticSymbolCache} from './static_symbol';
+import {StaticSymbolResolver} from './static_symbol_resolver';
+import {AotSummaryResolver} from './summary_resolver';
+
+export function createAotUrlResolver(host: {
+  resourceNameToFileName(resourceName: string, containingFileName: string): string | null;
+}): UrlResolver {
+  return {
+    resolve: (basePath: string, url: string) => {
+      const filePath = host.resourceNameToFileName(url, basePath);
+      if (!filePath) {
+        throw syntaxError(`Couldn't resolve resource ${url} from ${basePath}`);
+      }
+      return filePath;
+    }
+  };
+}
+
+/**
+ * Creates a new AotCompiler based on options and a host.
+ */
+export function createAotCompiler(
+    compilerHost: AotCompilerHost, options: AotCompilerOptions,
+    errorCollector?: (error: any, type?: any) =>
+        void): {compiler: AotCompiler, reflector: StaticReflector} {
+  let translations: string = options.translations || '';
+
+  const urlResolver = createAotUrlResolver(compilerHost);
+  const symbolCache = new StaticSymbolCache();
+  const summaryResolver = new AotSummaryResolver(compilerHost, symbolCache);
+  const symbolResolver = new StaticSymbolResolver(compilerHost, symbolCache, summaryResolver);
+  const staticReflector =
+      new StaticReflector(summaryResolver, symbolResolver, [], [], errorCollector);
+  let htmlParser: I18NHtmlParser;
+  if (!!options.enableIvy) {
+    // Ivy handles i18n at the compiler level so we must use a regular parser
+    htmlParser = new HtmlParser() as I18NHtmlParser;
+  } else {
+    htmlParser = new I18NHtmlParser(
+        new HtmlParser(), translations, options.i18nFormat, options.missingTranslation, console);
+  }
+  const config = new CompilerConfig({
+    defaultEncapsulation: ViewEncapsulation.Emulated,
+    useJit: false,
+    missingTranslation: options.missingTranslation,
+    preserveWhitespaces: options.preserveWhitespaces,
+    strictInjectionParameters: options.strictInjectionParameters,
+  });
+  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, staticReflector, expressionParser, elementSchemaRegistry, htmlParser, console, []);
+  const resolver = new CompileMetadataResolver(
+      config, htmlParser, new NgModuleResolver(staticReflector),
+      new DirectiveResolver(staticReflector), new PipeResolver(staticReflector), summaryResolver,
+      elementSchemaRegistry, normalizer, console, symbolCache, staticReflector, errorCollector);
+  // TODO(vicb): do not pass options.i18nFormat here
+  const viewCompiler = new ViewCompiler(staticReflector);
+  const typeCheckCompiler = new TypeCheckCompiler(options, staticReflector);
+  const compiler = new AotCompiler(
+      config, options, compilerHost, staticReflector, resolver, tmplParser,
+      new StyleCompiler(urlResolver), viewCompiler, typeCheckCompiler,
+      new NgModuleCompiler(staticReflector),
+      new InjectableCompiler(staticReflector, !!options.enableIvy), new TypeScriptEmitter(),
+      summaryResolver, symbolResolver);
+  return {compiler, reflector: staticReflector};
+}
diff --git a/packages/compiler/src/aot/compiler_host.ts b/packages/compiler/src/aot/compiler_host.ts
new file mode 100644
index 000000000000..9cf72642e990
--- /dev/null
+++ b/packages/compiler/src/aot/compiler_host.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 {StaticSymbolResolverHost} from './static_symbol_resolver';
+import {AotSummaryResolverHost} from './summary_resolver';
+
+/**
+ * The host of the AotCompiler disconnects the implementation from TypeScript / other language
+ * 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;
+  /**
+   * Converts a path that refers to a resource into an absolute filePath
+   * that can be later on used for loading the resource via `loadResource.
+   */
+  resourceNameToFileName(resourceName: string, containingFileName: string): string|null;
+  /**
+   * Loads a resource (e.g. html / css)
+   */
+  loadResource(path: string): Promise<string>|string;
+}
diff --git a/packages/compiler/src/aot/compiler_options.ts b/packages/compiler/src/aot/compiler_options.ts
new file mode 100644
index 000000000000..e4d7d1682e1a
--- /dev/null
+++ b/packages/compiler/src/aot/compiler_options.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 {MissingTranslationStrategy} from '../core';
+
+export interface AotCompilerOptions {
+  locale?: string;
+  i18nFormat?: string;
+  translations?: string;
+  missingTranslation?: MissingTranslationStrategy;
+  enableSummariesForJit?: boolean;
+  preserveWhitespaces?: boolean;
+  fullTemplateTypeCheck?: boolean;
+  allowEmptyCodegenFiles?: boolean;
+  strictInjectionParameters?: boolean;
+  enableIvy?: boolean|'ngtsc'|'tsc';
+}
diff --git a/packages/compiler/src/aot/formatted_error.ts b/packages/compiler/src/aot/formatted_error.ts
new file mode 100644
index 000000000000..ffe2d1f4161e
--- /dev/null
+++ b/packages/compiler/src/aot/formatted_error.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 {syntaxError} from '../util';
+
+export interface Position {
+  fileName: string;
+  line: number;
+  column: number;
+}
+
+export interface FormattedMessageChain {
+  message: string;
+  position?: Position;
+  next?: FormattedMessageChain;
+}
+
+export type FormattedError = Error & {
+  chain: FormattedMessageChain;
+  position?: Position;
+};
+
+const FORMATTED_MESSAGE = 'ngFormattedMessage';
+
+function indentStr(level: number): string {
+  if (level <= 0) return '';
+  if (level < 6) return ['', ' ', '  ', '   ', '    ', '     '][level];
+  const half = indentStr(Math.floor(level / 2));
+  return half + half + (level % 2 === 1 ? ' ' : '');
+}
+
+function formatChain(chain: FormattedMessageChain | undefined, indent: number = 0): string {
+  if (!chain) return '';
+  const position = chain.position ?
+      `${chain.position.fileName}(${chain.position.line+1},${chain.position.column+1})` :
+      '';
+  const prefix = position && indent === 0 ? `${position}: ` : '';
+  const postfix = position && indent !== 0 ? ` at ${position}` : '';
+  const message = `${prefix}${chain.message}${postfix}`;
+
+  return `${indentStr(indent)}${message}${(chain.next && ('\n' + formatChain(chain.next, indent + 2))) || ''}`;
+}
+
+export function formattedError(chain: FormattedMessageChain): FormattedError {
+  const message = formatChain(chain) + '.';
+  const error = syntaxError(message) as FormattedError;
+  (error as any)[FORMATTED_MESSAGE] = true;
+  error.chain = chain;
+  error.position = chain.position;
+  return error;
+}
+
+export function isFormattedError(error: Error): error is FormattedError {
+  return !!(error as any)[FORMATTED_MESSAGE];
+}
diff --git a/packages/compiler/src/aot/generated_file.ts b/packages/compiler/src/aot/generated_file.ts
new file mode 100644
index 000000000000..0973fbaa60fc
--- /dev/null
+++ b/packages/compiler/src/aot/generated_file.ts
@@ -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
+ */
+
+import {Statement, areAllEquivalent} from '../output/output_ast';
+import {TypeScriptEmitter} from '../output/ts_emitter';
+
+export class GeneratedFile {
+  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;
+    }
+  }
+
+  isEquivalent(other: GeneratedFile): boolean {
+    if (this.genFileUrl !== other.genFileUrl) {
+      return false;
+    }
+    if (this.source) {
+      return this.source === other.source;
+    }
+    if (other.stmts == null) {
+      return false;
+    }
+    // Note: the constructor guarantees that if this.source is not filled,
+    // then this.stmts is.
+    return areAllEquivalent(this.stmts !, other.stmts !);
+  }
+}
+
+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(file.genFileUrl, file.stmts, preamble);
+}
diff --git a/packages/compiler/src/aot/lazy_routes.ts b/packages/compiler/src/aot/lazy_routes.ts
new file mode 100644
index 000000000000..ab32b34d1ca5
--- /dev/null
+++ b/packages/compiler/src/aot/lazy_routes.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 {CompileNgModuleMetadata, tokenReference} from '../compile_metadata';
+import {Route} from '../core';
+import {CompileMetadataResolver} from '../metadata_resolver';
+
+import {AotCompilerHost} from './compiler_host';
+import {StaticReflector} from './static_reflector';
+import {StaticSymbol} from './static_symbol';
+
+export interface LazyRoute {
+  module: StaticSymbol;
+  route: string;
+  referencedModule: StaticSymbol;
+}
+
+export function listLazyRoutes(
+    moduleMeta: CompileNgModuleMetadata, reflector: StaticReflector): LazyRoute[] {
+  const allLazyRoutes: LazyRoute[] = [];
+  for (const {provider, module} of moduleMeta.transitiveModule.providers) {
+    if (tokenReference(provider.token) === reflector.ROUTES) {
+      const loadChildren = _collectLoadChildren(provider.useValue);
+      for (const route of loadChildren) {
+        allLazyRoutes.push(parseLazyRoute(route, reflector, module.reference));
+      }
+    }
+  }
+  return allLazyRoutes;
+}
+
+function _collectLoadChildren(routes: string | Route | Route[], target: string[] = []): string[] {
+  if (typeof routes === 'string') {
+    target.push(routes);
+  } else if (Array.isArray(routes)) {
+    for (const route of routes) {
+      _collectLoadChildren(route, target);
+    }
+  } else if (routes.loadChildren) {
+    _collectLoadChildren(routes.loadChildren, target);
+  } else if (routes.children) {
+    _collectLoadChildren(routes.children, target);
+  }
+  return target;
+}
+
+export function parseLazyRoute(
+    route: string, reflector: StaticReflector, module?: StaticSymbol): LazyRoute {
+  const [routePath, routeName] = route.split('#');
+  const referencedModule = reflector.resolveExternalReference(
+      {
+        moduleName: routePath,
+        name: routeName,
+      },
+      module ? module.filePath : undefined);
+  return {route: route, module: module || referencedModule, referencedModule};
+}
diff --git a/packages/compiler/src/aot/partial_module.ts b/packages/compiler/src/aot/partial_module.ts
new file mode 100644
index 000000000000..7e205bfdf67d
--- /dev/null
+++ b/packages/compiler/src/aot/partial_module.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
+ */
+
+import * as o from '../output/output_ast';
+
+export interface PartialModule {
+  fileName: string;
+  statements: o.Statement[];
+}
diff --git a/packages/compiler/src/aot/static_reflector.ts b/packages/compiler/src/aot/static_reflector.ts
new file mode 100644
index 000000000000..3e678729372f
--- /dev/null
+++ b/packages/compiler/src/aot/static_reflector.ts
@@ -0,0 +1,1060 @@
+/**
+ * @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 {CompileSummaryKind} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
+import {MetadataFactory, createAttribute, createComponent, createContentChild, createContentChildren, createDirective, createHost, createHostBinding, createHostListener, createInject, createInjectable, createInput, createNgModule, createOptional, createOutput, createPipe, createSelf, createSkipSelf, createViewChild, createViewChildren} from '../core';
+import * as o from '../output/output_ast';
+import {SummaryResolver} from '../summary_resolver';
+import {syntaxError} from '../util';
+
+import {FormattedMessageChain, formattedError} from './formatted_error';
+import {StaticSymbol} from './static_symbol';
+import {StaticSymbolResolver} from './static_symbol_resolver';
+
+const ANGULAR_CORE = '@angular/core';
+const ANGULAR_ROUTER = '@angular/router';
+
+const HIDDEN_KEY = /^\$.*\$$/;
+
+const IGNORE = {
+  __symbolic: 'ignore'
+};
+
+const USE_VALUE = 'useValue';
+const PROVIDE = 'provide';
+const REFERENCE_SET = new Set([USE_VALUE, 'useFactory', 'data', 'id', 'loadChildren']);
+const TYPEGUARD_POSTFIX = 'TypeGuard';
+const USE_IF = 'UseIf';
+
+function shouldIgnore(value: any): boolean {
+  return value && value.__symbolic == 'ignore';
+}
+
+/**
+ * A static reflector implements enough of the Reflector API that is necessary to compile
+ * templates statically.
+ */
+export class StaticReflector implements CompileReflector {
+  private annotationCache = new Map<StaticSymbol, any[]>();
+  private shallowAnnotationCache = new Map<StaticSymbol, any[]>();
+  private propertyCache = new Map<StaticSymbol, {[key: string]: any[]}>();
+  private parameterCache = new Map<StaticSymbol, any[]>();
+  private methodCache = new Map<StaticSymbol, {[key: string]: boolean}>();
+  private staticCache = new Map<StaticSymbol, string[]>();
+  private conversionMap = new Map<StaticSymbol, (context: StaticSymbol, args: any[]) => any>();
+  private resolvedExternalReferences = new Map<string, StaticSymbol>();
+  // TODO(issue/24571): remove '!'.
+  private injectionToken !: StaticSymbol;
+  // TODO(issue/24571): remove '!'.
+  private opaqueToken !: StaticSymbol;
+  // TODO(issue/24571): remove '!'.
+  ROUTES !: StaticSymbol;
+  // TODO(issue/24571): remove '!'.
+  private ANALYZE_FOR_ENTRY_COMPONENTS !: StaticSymbol;
+  private annotationForParentClassWithSummaryKind =
+      new Map<CompileSummaryKind, MetadataFactory<any>[]>();
+
+  constructor(
+      private summaryResolver: SummaryResolver<StaticSymbol>,
+      private symbolResolver: StaticSymbolResolver,
+      knownMetadataClasses: {name: string, filePath: string, ctor: any}[] = [],
+      knownMetadataFunctions: {name: string, filePath: string, fn: any}[] = [],
+      private errorRecorder?: (error: any, fileName?: string) => void) {
+    this.initializeConversionMap();
+    knownMetadataClasses.forEach(
+        (kc) => this._registerDecoratorOrConstructor(
+            this.getStaticSymbol(kc.filePath, kc.name), kc.ctor));
+    knownMetadataFunctions.forEach(
+        (kf) => this._registerFunction(this.getStaticSymbol(kf.filePath, kf.name), kf.fn));
+    this.annotationForParentClassWithSummaryKind.set(
+        CompileSummaryKind.Directive, [createDirective, createComponent]);
+    this.annotationForParentClassWithSummaryKind.set(CompileSummaryKind.Pipe, [createPipe]);
+    this.annotationForParentClassWithSummaryKind.set(CompileSummaryKind.NgModule, [createNgModule]);
+    this.annotationForParentClassWithSummaryKind.set(
+        CompileSummaryKind.Injectable,
+        [createInjectable, createPipe, createDirective, createComponent, createNgModule]);
+  }
+
+  componentModuleUrl(typeOrFunc: StaticSymbol): string {
+    const staticSymbol = this.findSymbolDeclaration(typeOrFunc);
+    return this.symbolResolver.getResourcePath(staticSymbol);
+  }
+
+  resolveExternalReference(ref: o.ExternalReference, containingFile?: string): StaticSymbol {
+    let key: string|undefined = undefined;
+    if (!containingFile) {
+      key = `${ref.moduleName}:${ref.name}`;
+      const declarationSymbol = this.resolvedExternalReferences.get(key);
+      if (declarationSymbol) return declarationSymbol;
+    }
+    const refSymbol =
+        this.symbolResolver.getSymbolByModule(ref.moduleName !, ref.name !, containingFile);
+    const declarationSymbol = this.findSymbolDeclaration(refSymbol);
+    if (!containingFile) {
+      this.symbolResolver.recordModuleNameForFileName(refSymbol.filePath, ref.moduleName !);
+      this.symbolResolver.recordImportAs(declarationSymbol, refSymbol);
+    }
+    if (key) {
+      this.resolvedExternalReferences.set(key, declarationSymbol);
+    }
+    return declarationSymbol;
+  }
+
+  findDeclaration(moduleUrl: string, name: string, containingFile?: string): StaticSymbol {
+    return this.findSymbolDeclaration(
+        this.symbolResolver.getSymbolByModule(moduleUrl, name, containingFile));
+  }
+
+  tryFindDeclaration(moduleUrl: string, name: string, containingFile?: string): StaticSymbol {
+    return this.symbolResolver.ignoreErrorsFor(
+        () => this.findDeclaration(moduleUrl, name, containingFile));
+  }
+
+  findSymbolDeclaration(symbol: StaticSymbol): StaticSymbol {
+    const resolvedSymbol = this.symbolResolver.resolveSymbol(symbol);
+    if (resolvedSymbol) {
+      let resolvedMetadata = resolvedSymbol.metadata;
+      if (resolvedMetadata && resolvedMetadata.__symbolic === 'resolved') {
+        resolvedMetadata = resolvedMetadata.symbol;
+      }
+      if (resolvedMetadata instanceof StaticSymbol) {
+        return this.findSymbolDeclaration(resolvedSymbol.metadata);
+      }
+    }
+    return symbol;
+  }
+
+  public tryAnnotations(type: StaticSymbol): any[] {
+    const originalRecorder = this.errorRecorder;
+    this.errorRecorder = (error: any, fileName: string) => {};
+    try {
+      return this.annotations(type);
+    } finally {
+      this.errorRecorder = originalRecorder;
+    }
+  }
+
+  public annotations(type: StaticSymbol): any[] {
+    return this._annotations(
+        type, (type: StaticSymbol, decorators: any) => this.simplify(type, decorators),
+        this.annotationCache);
+  }
+
+  public shallowAnnotations(type: StaticSymbol): any[] {
+    return this._annotations(
+        type, (type: StaticSymbol, decorators: any) => this.simplify(type, decorators, true),
+        this.shallowAnnotationCache);
+  }
+
+  private _annotations(
+      type: StaticSymbol, simplify: (type: StaticSymbol, decorators: any) => any,
+      annotationCache: Map<StaticSymbol, any[]>): any[] {
+    let annotations = annotationCache.get(type);
+    if (!annotations) {
+      annotations = [];
+      const classMetadata = this.getTypeMetadata(type);
+      const parentType = this.findParentType(type, classMetadata);
+      if (parentType) {
+        const parentAnnotations = this.annotations(parentType);
+        annotations.push(...parentAnnotations);
+      }
+      let ownAnnotations: any[] = [];
+      if (classMetadata['decorators']) {
+        ownAnnotations = simplify(type, classMetadata['decorators']);
+        if (ownAnnotations) {
+          annotations.push(...ownAnnotations);
+        }
+      }
+      if (parentType && !this.summaryResolver.isLibraryFile(type.filePath) &&
+          this.summaryResolver.isLibraryFile(parentType.filePath)) {
+        const summary = this.summaryResolver.resolveSummary(parentType);
+        if (summary && summary.type) {
+          const requiredAnnotationTypes =
+              this.annotationForParentClassWithSummaryKind.get(summary.type.summaryKind !) !;
+          const typeHasRequiredAnnotation = requiredAnnotationTypes.some(
+              (requiredType) => ownAnnotations.some(ann => requiredType.isTypeOf(ann)));
+          if (!typeHasRequiredAnnotation) {
+            this.reportError(
+                formatMetadataError(
+                    metadataError(
+                        `Class ${type.name} in ${type.filePath} extends from a ${CompileSummaryKind[summary.type.summaryKind!]} in another compilation unit without duplicating the decorator`,
+                        /* summary */ undefined,
+                        `Please add a ${requiredAnnotationTypes.map((type) => type.ngMetadataName).join(' or ')} decorator to the class`),
+                    type),
+                type);
+          }
+        }
+      }
+      annotationCache.set(type, annotations.filter(ann => !!ann));
+    }
+    return annotations;
+  }
+
+  public propMetadata(type: StaticSymbol): {[key: string]: any[]} {
+    let propMetadata = this.propertyCache.get(type);
+    if (!propMetadata) {
+      const classMetadata = this.getTypeMetadata(type);
+      propMetadata = {};
+      const parentType = this.findParentType(type, classMetadata);
+      if (parentType) {
+        const parentPropMetadata = this.propMetadata(parentType);
+        Object.keys(parentPropMetadata).forEach((parentProp) => {
+          propMetadata ![parentProp] = parentPropMetadata[parentProp];
+        });
+      }
+
+      const members = classMetadata['members'] || {};
+      Object.keys(members).forEach((propName) => {
+        const propData = members[propName];
+        const prop = (<any[]>propData)
+                         .find(a => a['__symbolic'] == 'property' || a['__symbolic'] == 'method');
+        const decorators: any[] = [];
+        if (propMetadata ![propName]) {
+          decorators.push(...propMetadata ![propName]);
+        }
+        propMetadata ![propName] = decorators;
+        if (prop && prop['decorators']) {
+          decorators.push(...this.simplify(type, prop['decorators']));
+        }
+      });
+      this.propertyCache.set(type, propMetadata);
+    }
+    return propMetadata;
+  }
+
+  public parameters(type: StaticSymbol): any[] {
+    if (!(type instanceof StaticSymbol)) {
+      this.reportError(
+          new Error(`parameters received ${JSON.stringify(type)} which is not a StaticSymbol`),
+          type);
+      return [];
+    }
+    try {
+      let parameters = this.parameterCache.get(type);
+      if (!parameters) {
+        const classMetadata = this.getTypeMetadata(type);
+        const parentType = this.findParentType(type, classMetadata);
+        const members = classMetadata ? classMetadata['members'] : null;
+        const ctorData = members ? members['__ctor__'] : null;
+        if (ctorData) {
+          const ctor = (<any[]>ctorData).find(a => a['__symbolic'] == 'constructor');
+          const rawParameterTypes = <any[]>ctor['parameters'] || [];
+          const parameterDecorators = <any[]>this.simplify(type, ctor['parameterDecorators'] || []);
+          parameters = [];
+          rawParameterTypes.forEach((rawParamType, index) => {
+            const nestedResult: any[] = [];
+            const paramType = this.trySimplify(type, rawParamType);
+            if (paramType) nestedResult.push(paramType);
+            const decorators = parameterDecorators ? parameterDecorators[index] : null;
+            if (decorators) {
+              nestedResult.push(...decorators);
+            }
+            parameters !.push(nestedResult);
+          });
+        } else if (parentType) {
+          parameters = this.parameters(parentType);
+        }
+        if (!parameters) {
+          parameters = [];
+        }
+        this.parameterCache.set(type, parameters);
+      }
+      return parameters;
+    } catch (e) {
+      console.error(`Failed on type ${JSON.stringify(type)} with error ${e}`);
+      throw e;
+    }
+  }
+
+  private _methodNames(type: any): {[key: string]: boolean} {
+    let methodNames = this.methodCache.get(type);
+    if (!methodNames) {
+      const classMetadata = this.getTypeMetadata(type);
+      methodNames = {};
+      const parentType = this.findParentType(type, classMetadata);
+      if (parentType) {
+        const parentMethodNames = this._methodNames(parentType);
+        Object.keys(parentMethodNames).forEach((parentProp) => {
+          methodNames ![parentProp] = parentMethodNames[parentProp];
+        });
+      }
+
+      const members = classMetadata['members'] || {};
+      Object.keys(members).forEach((propName) => {
+        const propData = members[propName];
+        const isMethod = (<any[]>propData).some(a => a['__symbolic'] == 'method');
+        methodNames ![propName] = methodNames ![propName] || isMethod;
+      });
+      this.methodCache.set(type, methodNames);
+    }
+    return methodNames;
+  }
+
+  private _staticMembers(type: StaticSymbol): string[] {
+    let staticMembers = this.staticCache.get(type);
+    if (!staticMembers) {
+      const classMetadata = this.getTypeMetadata(type);
+      const staticMemberData = classMetadata['statics'] || {};
+      staticMembers = Object.keys(staticMemberData);
+      this.staticCache.set(type, staticMembers);
+    }
+    return staticMembers;
+  }
+
+
+  private findParentType(type: StaticSymbol, classMetadata: any): StaticSymbol|undefined {
+    const parentType = this.trySimplify(type, classMetadata['extends']);
+    if (parentType instanceof StaticSymbol) {
+      return parentType;
+    }
+  }
+
+  hasLifecycleHook(type: any, lcProperty: string): boolean {
+    if (!(type instanceof StaticSymbol)) {
+      this.reportError(
+          new Error(
+              `hasLifecycleHook received ${JSON.stringify(type)} which is not a StaticSymbol`),
+          type);
+    }
+    try {
+      return !!this._methodNames(type)[lcProperty];
+    } catch (e) {
+      console.error(`Failed on type ${JSON.stringify(type)} with error ${e}`);
+      throw e;
+    }
+  }
+
+  guards(type: any): {[key: string]: StaticSymbol} {
+    if (!(type instanceof StaticSymbol)) {
+      this.reportError(
+          new Error(`guards received ${JSON.stringify(type)} which is not a StaticSymbol`), type);
+      return {};
+    }
+    const staticMembers = this._staticMembers(type);
+    const result: {[key: string]: StaticSymbol} = {};
+    for (let name of staticMembers) {
+      if (name.endsWith(TYPEGUARD_POSTFIX)) {
+        let property = name.substr(0, name.length - TYPEGUARD_POSTFIX.length);
+        let value: any;
+        if (property.endsWith(USE_IF)) {
+          property = name.substr(0, property.length - USE_IF.length);
+          value = USE_IF;
+        } else {
+          value = this.getStaticSymbol(type.filePath, type.name, [name]);
+        }
+        result[property] = value;
+      }
+    }
+    return result;
+  }
+
+  private _registerDecoratorOrConstructor(type: StaticSymbol, ctor: any): void {
+    this.conversionMap.set(type, (context: StaticSymbol, args: any[]) => new ctor(...args));
+  }
+
+  private _registerFunction(type: StaticSymbol, fn: any): void {
+    this.conversionMap.set(type, (context: StaticSymbol, args: any[]) => fn.apply(undefined, args));
+  }
+
+  private initializeConversionMap(): void {
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Injectable'), createInjectable);
+    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'), createHost);
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Self'), createSelf);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'SkipSelf'), createSkipSelf);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Inject'), createInject);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Optional'), createOptional);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Attribute'), createAttribute);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'ContentChild'), createContentChild);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'ContentChildren'), createContentChildren);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'ViewChild'), createViewChild);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'ViewChildren'), createViewChildren);
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Input'), createInput);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Output'), createOutput);
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Pipe'), createPipe);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'HostBinding'), createHostBinding);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'HostListener'), createHostListener);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Directive'), createDirective);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Component'), createComponent);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'NgModule'), createNgModule);
+
+    // Note: Some metadata classes can be used directly with Provider.deps.
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Host'), createHost);
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Self'), createSelf);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'SkipSelf'), createSkipSelf);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Optional'), createOptional);
+  }
+
+  /**
+   * getStaticSymbol produces a Type whose metadata is known but whose implementation is not loaded.
+   * All types passed to the StaticResolver should be pseudo-types returned by this method.
+   *
+   * @param declarationFile the absolute path of the file where the symbol is declared
+   * @param name the name of the type.
+   */
+  getStaticSymbol(declarationFile: string, name: string, members?: string[]): StaticSymbol {
+    return this.symbolResolver.getStaticSymbol(declarationFile, name, members);
+  }
+
+  /**
+   * Simplify but discard any errors
+   */
+  private trySimplify(context: StaticSymbol, value: any): any {
+    const originalRecorder = this.errorRecorder;
+    this.errorRecorder = (error: any, fileName: string) => {};
+    const result = this.simplify(context, value);
+    this.errorRecorder = originalRecorder;
+    return result;
+  }
+
+  /** @internal */
+  public simplify(context: StaticSymbol, value: any, lazy: boolean = false): any {
+    const self = this;
+    let scope = BindingScope.empty;
+    const calling = new Map<StaticSymbol, boolean>();
+    const rootContext = context;
+
+    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;
+      }
+
+      function simplifyEagerly(value: any): any {
+        return simplifyInContext(context, value, depth, 0);
+      }
+
+      function simplifyLazily(value: any): any {
+        return simplifyInContext(context, value, depth, references + 1);
+      }
+
+      function simplifyNested(nestedContext: StaticSymbol, value: any): any {
+        if (nestedContext === context) {
+          // If the context hasn't changed let the exception propagate unmodified.
+          return simplifyInContext(nestedContext, value, depth + 1, references);
+        }
+        try {
+          return simplifyInContext(nestedContext, value, depth + 1, references);
+        } catch (e) {
+          if (isMetadataError(e)) {
+            // Propagate the message text up but add a message to the chain that explains how we got
+            // here.
+            // e.chain implies e.symbol
+            const summaryMsg = e.chain ? 'references \'' + e.symbol !.name + '\'' : errorSummary(e);
+            const summary = `'${nestedContext.name}' ${summaryMsg}`;
+            const chain = {message: summary, position: e.position, next: e.chain};
+            // TODO(chuckj): retrieve the position information indirectly from the collectors node
+            // map if the metadata is from a .ts file.
+            self.error(
+                {
+                  message: e.message,
+                  advise: e.advise,
+                  context: e.context, chain,
+                  symbol: nestedContext
+                },
+                context);
+          } else {
+            // It is probably an internal error.
+            throw e;
+          }
+        }
+      }
+
+      function simplifyCall(
+          functionSymbol: StaticSymbol, targetFunction: any, args: any[], targetExpression: any) {
+        if (targetFunction && targetFunction['__symbolic'] == 'function') {
+          if (calling.get(functionSymbol)) {
+            self.error(
+                {
+                  message: 'Recursion is not supported',
+                  summary: `called '${functionSymbol.name}' recursively`,
+                  value: targetFunction
+                },
+                functionSymbol);
+          }
+          try {
+            const value = targetFunction['value'];
+            if (value && (depth != 0 || value.__symbolic != 'error')) {
+              const parameters: string[] = targetFunction['parameters'];
+              const defaults: any[] = targetFunction.defaults;
+              args = args.map(arg => simplifyNested(context, arg))
+                         .map(arg => shouldIgnore(arg) ? undefined : arg);
+              if (defaults && defaults.length > args.length) {
+                args.push(...defaults.slice(args.length).map((value: any) => simplify(value)));
+              }
+              calling.set(functionSymbol, true);
+              const functionScope = BindingScope.build();
+              for (let i = 0; i < parameters.length; i++) {
+                functionScope.define(parameters[i], args[i]);
+              }
+              const oldScope = scope;
+              let result: any;
+              try {
+                scope = functionScope.done();
+                result = simplifyNested(functionSymbol, value);
+              } finally {
+                scope = oldScope;
+              }
+              return result;
+            }
+          } finally {
+            calling.delete(functionSymbol);
+          }
+        }
+
+        if (depth === 0) {
+          // If depth is 0 we are evaluating the top level expression that is describing element
+          // decorator. In this case, it is a decorator we don't understand, such as a custom
+          // non-angular decorator, and we should just ignore it.
+          return IGNORE;
+        }
+        let position: Position|undefined = undefined;
+        if (targetExpression && targetExpression.__symbolic == 'resolved') {
+          const line = targetExpression.line;
+          const character = targetExpression.character;
+          const fileName = targetExpression.fileName;
+          if (fileName != null && line != null && character != null) {
+            position = {fileName, line, column: character};
+          }
+        }
+        self.error(
+            {
+              message: FUNCTION_CALL_NOT_SUPPORTED,
+              context: functionSymbol,
+              value: targetFunction, position
+            },
+            context);
+      }
+
+      function simplify(expression: any): any {
+        if (isPrimitive(expression)) {
+          return expression;
+        }
+        if (expression instanceof Array) {
+          const result: any[] = [];
+          for (const item of (<any>expression)) {
+            // Check for a spread expression
+            if (item && item.__symbolic === 'spread') {
+              // We call with references as 0 because we require the actual value and cannot
+              // tolerate a reference here.
+              const spreadArray = simplifyEagerly(item.expression);
+              if (Array.isArray(spreadArray)) {
+                for (const spreadItem of spreadArray) {
+                  result.push(spreadItem);
+                }
+                continue;
+              }
+            }
+            const value = simplify(item);
+            if (shouldIgnore(value)) {
+              continue;
+            }
+            result.push(value);
+          }
+          return result;
+        }
+        if (expression instanceof StaticSymbol) {
+          // Stop simplification at builtin symbols or if we are in a reference context and
+          // the symbol doesn't have members.
+          if (expression === self.injectionToken || self.conversionMap.has(expression) ||
+              (references > 0 && !expression.members.length)) {
+            return expression;
+          } else {
+            const staticSymbol = expression;
+            const declarationValue = resolveReferenceValue(staticSymbol);
+            if (declarationValue != null) {
+              return simplifyNested(staticSymbol, declarationValue);
+            } else {
+              return staticSymbol;
+            }
+          }
+        }
+        if (expression) {
+          if (expression['__symbolic']) {
+            let staticSymbol: StaticSymbol;
+            switch (expression['__symbolic']) {
+              case 'binop':
+                let left = simplify(expression['left']);
+                if (shouldIgnore(left)) return left;
+                let right = simplify(expression['right']);
+                if (shouldIgnore(right)) return right;
+                switch (expression['operator']) {
+                  case '&&':
+                    return left && right;
+                  case '||':
+                    return left || right;
+                  case '|':
+                    return left | right;
+                  case '^':
+                    return left ^ right;
+                  case '&':
+                    return left & right;
+                  case '==':
+                    return left == right;
+                  case '!=':
+                    return left != right;
+                  case '===':
+                    return left === right;
+                  case '!==':
+                    return left !== right;
+                  case '<':
+                    return left < right;
+                  case '>':
+                    return left > right;
+                  case '<=':
+                    return left <= right;
+                  case '>=':
+                    return left >= right;
+                  case '<<':
+                    return left << right;
+                  case '>>':
+                    return left >> right;
+                  case '+':
+                    return left + right;
+                  case '-':
+                    return left - right;
+                  case '*':
+                    return left * right;
+                  case '/':
+                    return left / right;
+                  case '%':
+                    return left % right;
+                }
+                return null;
+              case 'if':
+                let condition = simplify(expression['condition']);
+                return condition ? simplify(expression['thenExpression']) :
+                                   simplify(expression['elseExpression']);
+              case 'pre':
+                let operand = simplify(expression['operand']);
+                if (shouldIgnore(operand)) return operand;
+                switch (expression['operator']) {
+                  case '+':
+                    return operand;
+                  case '-':
+                    return -operand;
+                  case '!':
+                    return !operand;
+                  case '~':
+                    return ~operand;
+                }
+                return null;
+              case 'index':
+                let indexTarget = simplifyEagerly(expression['expression']);
+                let index = simplifyEagerly(expression['index']);
+                if (indexTarget && isPrimitive(index)) return indexTarget[index];
+                return null;
+              case 'select':
+                const member = expression['member'];
+                let selectContext = context;
+                let selectTarget = simplify(expression['expression']);
+                if (selectTarget instanceof StaticSymbol) {
+                  const members = selectTarget.members.concat(member);
+                  selectContext =
+                      self.getStaticSymbol(selectTarget.filePath, selectTarget.name, members);
+                  const declarationValue = resolveReferenceValue(selectContext);
+                  if (declarationValue != null) {
+                    return simplifyNested(selectContext, declarationValue);
+                  } else {
+                    return selectContext;
+                  }
+                }
+                if (selectTarget && isPrimitive(member))
+                  return simplifyNested(selectContext, selectTarget[member]);
+                return null;
+              case 'reference':
+                // Note: This only has to deal with variable references, as symbol references have
+                // been converted into 'resolved'
+                // in the StaticSymbolResolver.
+                const name: string = expression['name'];
+                const localValue = scope.resolve(name);
+                if (localValue != BindingScope.missing) {
+                  return localValue;
+                }
+                break;
+              case 'resolved':
+                try {
+                  return simplify(expression.symbol);
+                } catch (e) {
+                  // If an error is reported evaluating the symbol record the position of the
+                  // reference in the error so it can
+                  // be reported in the error message generated from the exception.
+                  if (isMetadataError(e) && expression.fileName != null &&
+                      expression.line != null && expression.character != null) {
+                    e.position = {
+                      fileName: expression.fileName,
+                      line: expression.line,
+                      column: expression.character
+                    };
+                  }
+                  throw e;
+                }
+              case 'class':
+                return context;
+              case 'function':
+                return context;
+              case 'new':
+              case 'call':
+                // Determine if the function is a built-in conversion
+                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,
+                    // but rather return the symbol to which the InjectionToken is assigned to.
+
+                    // OpaqueToken is supported too as it is required by the language service to
+                    // support v4 and prior versions of Angular.
+                    return context;
+                  }
+                  const argExpressions: any[] = expression['arguments'] || [];
+                  let converter = self.conversionMap.get(staticSymbol);
+                  if (converter) {
+                    const args = argExpressions.map(arg => simplifyNested(context, arg))
+                                     .map(arg => shouldIgnore(arg) ? undefined : arg);
+                    return converter(context, args);
+                  } else {
+                    // Determine if the function is one we can simplify.
+                    const targetFunction = resolveReferenceValue(staticSymbol);
+                    return simplifyCall(
+                        staticSymbol, targetFunction, argExpressions, expression['expression']);
+                  }
+                }
+                return IGNORE;
+              case 'error':
+                let message = expression.message;
+                if (expression['line'] != null) {
+                  self.error(
+                      {
+                        message,
+                        context: expression.context,
+                        value: expression,
+                        position: {
+                          fileName: expression['fileName'],
+                          line: expression['line'],
+                          column: expression['character']
+                        }
+                      },
+                      context);
+                } else {
+                  self.error({message, context: expression.context}, context);
+                }
+                return IGNORE;
+              case 'ignore':
+                return expression;
+            }
+            return null;
+          }
+          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 simplifyLazily(value);
+            }
+            return simplify(value);
+          });
+        }
+        return IGNORE;
+      }
+
+      return simplify(value);
+    }
+
+    let result: any;
+    try {
+      result = simplifyInContext(context, value, 0, lazy ? 1 : 0);
+    } catch (e) {
+      if (this.errorRecorder) {
+        this.reportError(e, context);
+      } else {
+        throw formatMetadataError(e, context);
+      }
+    }
+    if (shouldIgnore(result)) {
+      return undefined;
+    }
+    return result;
+  }
+
+  private getTypeMetadata(type: StaticSymbol): {[key: string]: any} {
+    const resolvedSymbol = this.symbolResolver.resolveSymbol(type);
+    return resolvedSymbol && resolvedSymbol.metadata ? resolvedSymbol.metadata :
+                                                       {__symbolic: 'class'};
+  }
+
+  private reportError(error: Error, context: StaticSymbol, path?: string) {
+    if (this.errorRecorder) {
+      this.errorRecorder(
+          formatMetadataError(error, context), (context && context.filePath) || path);
+    } else {
+      throw error;
+    }
+  }
+
+  private error(
+      {message, summary, advise, position, context, value, symbol, chain}: {
+        message: string,
+        summary?: string,
+        advise?: string,
+        position?: Position,
+        context?: any,
+        value?: any,
+        symbol?: StaticSymbol,
+        chain?: MetadataMessageChain
+      },
+      reportingContext: StaticSymbol) {
+    this.reportError(
+        metadataError(message, summary, advise, position, symbol, context, chain),
+        reportingContext);
+  }
+}
+
+interface Position {
+  fileName: string;
+  line: number;
+  column: number;
+}
+
+interface MetadataMessageChain {
+  message: string;
+  summary?: string;
+  position?: Position;
+  context?: any;
+  symbol?: StaticSymbol;
+  next?: MetadataMessageChain;
+}
+
+type MetadataError = Error & {
+  position?: Position;
+  advise?: string;
+  summary?: string;
+  context?: any;
+  symbol?: StaticSymbol;
+  chain?: MetadataMessageChain;
+};
+
+const METADATA_ERROR = 'ngMetadataError';
+
+function metadataError(
+    message: string, summary?: string, advise?: string, position?: Position, symbol?: StaticSymbol,
+    context?: any, chain?: MetadataMessageChain): MetadataError {
+  const error = syntaxError(message) as MetadataError;
+  (error as any)[METADATA_ERROR] = true;
+  if (advise) error.advise = advise;
+  if (position) error.position = position;
+  if (summary) error.summary = summary;
+  if (context) error.context = context;
+  if (chain) error.chain = chain;
+  if (symbol) error.symbol = symbol;
+  return error;
+}
+
+function isMetadataError(error: Error): error is MetadataError {
+  return !!(error as any)[METADATA_ERROR];
+}
+
+const REFERENCE_TO_NONEXPORTED_CLASS = 'Reference to non-exported class';
+const VARIABLE_NOT_INITIALIZED = 'Variable not initialized';
+const DESTRUCTURE_NOT_SUPPORTED = 'Destructuring not supported';
+const COULD_NOT_RESOLVE_TYPE = 'Could not resolve type';
+const FUNCTION_CALL_NOT_SUPPORTED = 'Function call not supported';
+const REFERENCE_TO_LOCAL_SYMBOL = 'Reference to a local symbol';
+const LAMBDA_NOT_SUPPORTED = 'Lambda not supported';
+
+function expandedMessage(message: string, context: any): string {
+  switch (message) {
+    case REFERENCE_TO_NONEXPORTED_CLASS:
+      if (context && context.className) {
+        return `References to a non-exported class are not supported in decorators but ${context.className} was referenced.`;
+      }
+      break;
+    case VARIABLE_NOT_INITIALIZED:
+      return 'Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler';
+    case DESTRUCTURE_NOT_SUPPORTED:
+      return 'Referencing an exported destructured variable or constant is not supported in decorators and this value is needed by the template compiler';
+    case COULD_NOT_RESOLVE_TYPE:
+      if (context && context.typeName) {
+        return `Could not resolve type ${context.typeName}`;
+      }
+      break;
+    case FUNCTION_CALL_NOT_SUPPORTED:
+      if (context && context.name) {
+        return `Function calls are not supported in decorators but '${context.name}' was called`;
+      }
+      return 'Function calls are not supported in decorators';
+    case REFERENCE_TO_LOCAL_SYMBOL:
+      if (context && context.name) {
+        return `Reference to a local (non-exported) symbols are not supported in decorators but '${context.name}' was referenced`;
+      }
+      break;
+    case LAMBDA_NOT_SUPPORTED:
+      return `Function expressions are not supported in decorators`;
+  }
+  return message;
+}
+
+function messageAdvise(message: string, context: any): string|undefined {
+  switch (message) {
+    case REFERENCE_TO_NONEXPORTED_CLASS:
+      if (context && context.className) {
+        return `Consider exporting '${context.className}'`;
+      }
+      break;
+    case DESTRUCTURE_NOT_SUPPORTED:
+      return 'Consider simplifying to avoid destructuring';
+    case REFERENCE_TO_LOCAL_SYMBOL:
+      if (context && context.name) {
+        return `Consider exporting '${context.name}'`;
+      }
+      break;
+    case LAMBDA_NOT_SUPPORTED:
+      return `Consider changing the function expression into an exported function`;
+  }
+  return undefined;
+}
+
+function errorSummary(error: MetadataError): string {
+  if (error.summary) {
+    return error.summary;
+  }
+  switch (error.message) {
+    case REFERENCE_TO_NONEXPORTED_CLASS:
+      if (error.context && error.context.className) {
+        return `references non-exported class ${error.context.className}`;
+      }
+      break;
+    case VARIABLE_NOT_INITIALIZED:
+      return 'is not initialized';
+    case DESTRUCTURE_NOT_SUPPORTED:
+      return 'is a destructured variable';
+    case COULD_NOT_RESOLVE_TYPE:
+      return 'could not be resolved';
+    case FUNCTION_CALL_NOT_SUPPORTED:
+      if (error.context && error.context.name) {
+        return `calls '${error.context.name}'`;
+      }
+      return `calls a function`;
+    case REFERENCE_TO_LOCAL_SYMBOL:
+      if (error.context && error.context.name) {
+        return `references local variable ${error.context.name}`;
+      }
+      return `references a local variable`;
+  }
+  return 'contains the error';
+}
+
+function mapStringMap(input: {[key: string]: any}, transform: (value: any, key: string) => any):
+    {[key: string]: any} {
+  if (!input) return {};
+  const result: {[key: string]: any} = {};
+  Object.keys(input).forEach((key) => {
+    const value = transform(input[key], key);
+    if (!shouldIgnore(value)) {
+      if (HIDDEN_KEY.test(key)) {
+        Object.defineProperty(result, key, {enumerable: false, configurable: true, value: value});
+      } else {
+        result[key] = value;
+      }
+    }
+  });
+  return result;
+}
+
+function isPrimitive(o: any): boolean {
+  return o === null || (typeof o !== 'function' && typeof o !== 'object');
+}
+
+interface BindingScopeBuilder {
+  define(name: string, value: any): BindingScopeBuilder;
+  done(): BindingScope;
+}
+
+abstract class BindingScope {
+  abstract resolve(name: string): any;
+  public static missing = {};
+  public static empty: BindingScope = {resolve: name => BindingScope.missing};
+
+  public static build(): BindingScopeBuilder {
+    const current = new Map<string, any>();
+    return {
+      define: function(name, value) {
+        current.set(name, value);
+        return this;
+      },
+      done: function() {
+        return current.size > 0 ? new PopulatedScope(current) : BindingScope.empty;
+      }
+    };
+  }
+}
+
+class PopulatedScope extends BindingScope {
+  constructor(private bindings: Map<string, any>) { super(); }
+
+  resolve(name: string): any {
+    return this.bindings.has(name) ? this.bindings.get(name) : BindingScope.missing;
+  }
+}
+
+function formatMetadataMessageChain(
+    chain: MetadataMessageChain, advise: string | undefined): FormattedMessageChain {
+  const expanded = expandedMessage(chain.message, chain.context);
+  const nesting = chain.symbol ? ` in '${chain.symbol.name}'` : '';
+  const message = `${expanded}${nesting}`;
+  const position = chain.position;
+  const next: FormattedMessageChain|undefined = chain.next ?
+      formatMetadataMessageChain(chain.next, advise) :
+      advise ? {message: advise} : undefined;
+  return {message, position, next};
+}
+
+function formatMetadataError(e: Error, context: StaticSymbol): Error {
+  if (isMetadataError(e)) {
+    // Produce a formatted version of the and leaving enough information in the original error
+    // to recover the formatting information to eventually produce a diagnostic error message.
+    const position = e.position;
+    const chain: MetadataMessageChain = {
+      message: `Error during template compile of '${context.name}'`,
+      position: position,
+      next: {message: e.message, next: e.chain, context: e.context, symbol: e.symbol}
+    };
+    const advise = e.advise || messageAdvise(e.message, e.context);
+    return formattedError(formatMetadataMessageChain(chain, advise));
+  }
+  return e;
+}
diff --git a/packages/compiler/src/aot/static_symbol.ts b/packages/compiler/src/aot/static_symbol.ts
new file mode 100644
index 000000000000..cb47dd9e67f4
--- /dev/null
+++ b/packages/compiler/src/aot/static_symbol.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 token representing the a reference to a static type.
+ *
+ * This token is unique for a filePath and name and can be used as a hash table key.
+ */
+export class StaticSymbol {
+  constructor(public filePath: string, public name: string, public members: string[]) {}
+
+  assertNoMembers() {
+    if (this.members.length) {
+      throw new Error(
+          `Illegal state: symbol without members expected, but got ${JSON.stringify(this)}.`);
+    }
+  }
+}
+
+/**
+ * A cache of static symbol used by the StaticReflector to return the same symbol for the
+ * same symbol values.
+ */
+export class StaticSymbolCache {
+  private cache = new Map<string, StaticSymbol>();
+
+  get(declarationFile: string, name: string, members?: string[]): StaticSymbol {
+    members = members || [];
+    const memberSuffix = members.length ? `.${ members.join('.')}` : '';
+    const key = `"${declarationFile}".${name}${memberSuffix}`;
+    let result = this.cache.get(key);
+    if (!result) {
+      result = new StaticSymbol(declarationFile, name, members);
+      this.cache.set(key, result);
+    }
+    return result;
+  }
+}
\ No newline at end of file
diff --git a/packages/compiler/src/aot/static_symbol_resolver.ts b/packages/compiler/src/aot/static_symbol_resolver.ts
new file mode 100644
index 000000000000..65f0e8a0495c
--- /dev/null
+++ b/packages/compiler/src/aot/static_symbol_resolver.ts
@@ -0,0 +1,549 @@
+/**
+ * @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 {SummaryResolver} from '../summary_resolver';
+import {ValueTransformer, visitValue} from '../util';
+
+import {StaticSymbol, StaticSymbolCache} from './static_symbol';
+import {isGeneratedFile, stripSummaryForJitFileSuffix, stripSummaryForJitNameSuffix, summaryForJitFileName, summaryForJitName} from './util';
+
+const TS = /^(?!.*\.d\.ts$).*\.ts$/;
+
+export class ResolvedStaticSymbol {
+  constructor(public symbol: StaticSymbol, public metadata: any) {}
+}
+
+/**
+ * The host of the SymbolResolverHost disconnects the implementation from TypeScript / other
+ * language
+ * services and from underlying file systems.
+ */
+export interface StaticSymbolResolverHost {
+  /**
+   * Return a ModuleMetadata for the given module.
+   * Angular CLI will produce this metadata for a module whenever a .d.ts files is
+   * produced and the module has exported variables or classes with decorators. Module metadata can
+   * also be produced directly from TypeScript sources by using MetadataCollector in tools/metadata.
+   *
+   * @param modulePath is a string identifier for a module as an absolute path.
+   * @returns the metadata for the given module.
+   */
+  getMetadataFor(modulePath: string): {[key: string]: any}[]|undefined;
+
+  /**
+   * 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;
+
+  /**
+   * Get a file suitable for display to the user that should be relative to the project directory
+   * or the current directory.
+   */
+  getOutputName(filePath: string): string;
+}
+
+const SUPPORTED_SCHEMA_VERSION = 4;
+
+/**
+ * This class is responsible for loading metadata per symbol,
+ * and normalizing references between symbols.
+ *
+ * Internally, it only uses symbols without members,
+ * and deduces the values for symbols with members based
+ * on these symbols.
+ */
+export class StaticSymbolResolver {
+  private metadataCache = new Map<string, {[key: string]: any}>();
+  // Note: this will only contain StaticSymbols without members!
+  private resolvedSymbols = new Map<StaticSymbol, ResolvedStaticSymbol>();
+  private resolvedFilePaths = new Set<string>();
+  // Note: this will only contain StaticSymbols without members!
+  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,
+      private summaryResolver: SummaryResolver<StaticSymbol>,
+      private errorRecorder?: (error: any, fileName?: string) => void) {}
+
+  resolveSymbol(staticSymbol: StaticSymbol): ResolvedStaticSymbol {
+    if (staticSymbol.members.length > 0) {
+      return this._resolveSymbolMembers(staticSymbol) !;
+    }
+    // Note: always ask for a summary first,
+    // as we might have read shallow metadata via a .d.ts file
+    // for the symbol.
+    const resultFromSummary = this._resolveSymbolFromSummary(staticSymbol) !;
+    if (resultFromSummary) {
+      return resultFromSummary;
+    }
+    const resultFromCache = this.resolvedSymbols.get(staticSymbol);
+    if (resultFromCache) {
+      return resultFromCache;
+    }
+    // Note: Some users use libraries that were not compiled with ngc, i.e. they don't
+    // have summaries, only .d.ts files. So we always need to check both, the summary
+    // and metadata.
+    this._createSymbolsOf(staticSymbol.filePath);
+    return this.resolvedSymbols.get(staticSymbol) !;
+  }
+
+  /**
+   * getImportAs produces a symbol that can be used to import the given symbol.
+   * The import might be different than the symbol if the symbol is exported from
+   * a library with a summary; in which case we want to import the symbol from the
+   * ngfactory re-export instead of directly to avoid introducing a direct dependency
+   * on an otherwise indirect dependency.
+   *
+   * @param staticSymbol the symbol for which to generate a import symbol
+   */
+  getImportAs(staticSymbol: StaticSymbol, useSummaries: boolean = true): StaticSymbol|null {
+    if (staticSymbol.members.length) {
+      const baseSymbol = this.getStaticSymbol(staticSymbol.filePath, staticSymbol.name);
+      const baseImportAs = this.getImportAs(baseSymbol, useSummaries);
+      return baseImportAs ?
+          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, useSummaries);
+      return baseImportAs ?
+          this.getStaticSymbol(
+              summaryForJitFileName(baseImportAs.filePath), summaryForJitName(baseImportAs.name),
+              baseSymbol.members) :
+          null;
+    }
+    let result = (useSummaries && this.summaryResolver.getImportAs(staticSymbol)) || null;
+    if (!result) {
+      result = this.importAs.get(staticSymbol) !;
+    }
+    return result;
+  }
+
+  /**
+   * getResourcePath produces the path to the original location of the symbol and should
+   * be used to determine the relative location of resource references recorded in
+   * symbol metadata.
+   */
+  getResourcePath(staticSymbol: StaticSymbol): string {
+    return this.symbolResourcePaths.get(staticSymbol) || staticSymbol.filePath;
+  }
+
+  /**
+   * getTypeArity returns the number of generic type parameters the given symbol
+   * has. If the symbol is not a type the result is null.
+   */
+  getTypeArity(staticSymbol: StaticSymbol): number|null {
+    // 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 (isGeneratedFile(staticSymbol.filePath)) {
+      return null;
+    }
+    let resolvedSymbol = unwrapResolvedMetadata(this.resolveSymbol(staticSymbol));
+    while (resolvedSymbol && resolvedSymbol.metadata instanceof StaticSymbol) {
+      resolvedSymbol = unwrapResolvedMetadata(this.resolveSymbol(resolvedSymbol.metadata));
+    }
+    return (resolvedSymbol && resolvedSymbol.metadata && resolvedSymbol.metadata.arity) || null;
+  }
+
+  getKnownModuleName(filePath: string): string|null {
+    return this.knownFileNameToModuleNames.get(filePath) || null;
+  }
+
+  recordImportAs(sourceSymbol: StaticSymbol, targetSymbol: StaticSymbol) {
+    sourceSymbol.assertNoMembers();
+    targetSymbol.assertNoMembers();
+    this.importAs.set(sourceSymbol, targetSymbol);
+  }
+
+  recordModuleNameForFileName(fileName: string, moduleName: string) {
+    this.knownFileNameToModuleNames.set(fileName, moduleName);
+  }
+
+  /**
+   * Invalidate all information derived from the given file.
+   *
+   * @param fileName the file to invalidate
+   */
+  invalidateFile(fileName: string) {
+    this.metadataCache.delete(fileName);
+    this.resolvedFilePaths.delete(fileName);
+    const symbols = this.symbolFromFile.get(fileName);
+    if (symbols) {
+      this.symbolFromFile.delete(fileName);
+      for (const symbol of symbols) {
+        this.resolvedSymbols.delete(symbol);
+        this.importAs.delete(symbol);
+        this.symbolResourcePaths.delete(symbol);
+      }
+    }
+  }
+
+  /* @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 =
+        this.resolveSymbol(this.getStaticSymbol(staticSymbol.filePath, staticSymbol.name));
+    if (!baseResolvedSymbol) {
+      return null;
+    }
+    let baseMetadata = unwrapResolvedMetadata(baseResolvedSymbol.metadata);
+    if (baseMetadata instanceof StaticSymbol) {
+      return new ResolvedStaticSymbol(
+          staticSymbol, this.getStaticSymbol(baseMetadata.filePath, baseMetadata.name, members));
+    } else if (baseMetadata && baseMetadata.__symbolic === 'class') {
+      if (baseMetadata.statics && members.length === 1) {
+        return new ResolvedStaticSymbol(staticSymbol, baseMetadata.statics[members[0]]);
+      }
+    } else {
+      let value = baseMetadata;
+      for (let i = 0; i < members.length && value; i++) {
+        value = value[members[i]];
+      }
+      return new ResolvedStaticSymbol(staticSymbol, value);
+    }
+    return null;
+  }
+
+  private _resolveSymbolFromSummary(staticSymbol: StaticSymbol): ResolvedStaticSymbol|null {
+    const summary = this.summaryResolver.resolveSummary(staticSymbol);
+    return summary ? new ResolvedStaticSymbol(staticSymbol, summary.metadata) : null;
+  }
+
+  /**
+   * getStaticSymbol produces a Type whose metadata is known but whose implementation is not loaded.
+   * All types passed to the StaticResolver should be pseudo-types returned by this method.
+   *
+   * @param declarationFile the absolute path of the file where the symbol is declared
+   * @param name the name of the type.
+   * @param members a symbol for a static member of the named type
+   */
+  getStaticSymbol(declarationFile: string, name: string, members?: string[]): StaticSymbol {
+    return this.staticSymbolCache.get(declarationFile, name, members);
+  }
+
+  /**
+   * hasDecorators checks a file's metadata for the presence of decorators without evaluating the
+   * metadata.
+   *
+   * @param filePath the absolute path to examine for decorators.
+   * @returns true if any class in the file has a decorator.
+   */
+  hasDecorators(filePath: string): boolean {
+    const metadata = this.getModuleMetadata(filePath);
+    if (metadata['metadata']) {
+      return Object.keys(metadata['metadata']).some((metadataKey) => {
+        const entry = metadata['metadata'][metadataKey];
+        return entry && entry.__symbolic === 'class' && entry.decorators;
+      });
+    }
+    return false;
+  }
+
+  getSymbolsOf(filePath: string): StaticSymbol[] {
+    const summarySymbols = this.summaryResolver.getSymbolsOf(filePath);
+    if (summarySymbols) {
+      return summarySymbols;
+    }
+    // Note: Some users use libraries that were not compiled with ngc, i.e. they don't
+    // have summaries, only .d.ts files, but `summaryResolver.isLibraryFile` returns true.
+    this._createSymbolsOf(filePath);
+    const metadataSymbols: StaticSymbol[] = [];
+    this.resolvedSymbols.forEach((resolvedSymbol) => {
+      if (resolvedSymbol.symbol.filePath === filePath) {
+        metadataSymbols.push(resolvedSymbol.symbol);
+      }
+    });
+    return metadataSymbols;
+  }
+
+  private _createSymbolsOf(filePath: string) {
+    if (this.resolvedFilePaths.has(filePath)) {
+      return;
+    }
+    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']);
+    }
+    // handle the symbols in one of the re-export location
+    if (metadata['exports']) {
+      for (const moduleExport of metadata['exports']) {
+        // handle the symbols in the list of explicitly re-exported symbols.
+        if (moduleExport.export) {
+          moduleExport.export.forEach((exportSymbol: any) => {
+            let symbolName: string;
+            if (typeof exportSymbol === 'string') {
+              symbolName = exportSymbol;
+            } else {
+              symbolName = exportSymbol.as;
+            }
+            symbolName = unescapeIdentifier(symbolName);
+            let symName = symbolName;
+            if (typeof exportSymbol !== 'string') {
+              symName = unescapeIdentifier(exportSymbol.name);
+            }
+            const resolvedModule = this.resolveModule(moduleExport.from, filePath);
+            if (resolvedModule) {
+              const targetSymbol = this.getStaticSymbol(resolvedModule, symName);
+              const sourceSymbol = this.getStaticSymbol(filePath, symbolName);
+              resolvedSymbols.push(this.createExport(sourceSymbol, targetSymbol));
+            }
+          });
+        } else {
+          // handle the symbols via export * directives.
+          const resolvedModule = this.resolveModule(moduleExport.from, filePath);
+          if (resolvedModule) {
+            const nestedExports = this.getSymbolsOf(resolvedModule);
+            nestedExports.forEach((targetSymbol) => {
+              const sourceSymbol = this.getStaticSymbol(filePath, targetSymbol.name);
+              resolvedSymbols.push(this.createExport(sourceSymbol, targetSymbol));
+            });
+          }
+        }
+      }
+    }
+
+    // handle the actual metadata. Has to be after the exports
+    // as there might be collisions in the names, and we want the symbols
+    // of the current module to win ofter reexports.
+    if (metadata['metadata']) {
+      // handle direct declarations of the symbol
+      const topLevelSymbolNames =
+          new Set<string>(Object.keys(metadata['metadata']).map(unescapeIdentifier));
+      const origins: {[index: string]: string} = metadata['origins'] || {};
+      Object.keys(metadata['metadata']).forEach((metadataKey) => {
+        const symbolMeta = metadata['metadata'][metadataKey];
+        const name = unescapeIdentifier(metadataKey);
+
+        const symbol = this.getStaticSymbol(filePath, name);
+
+        const origin = origins.hasOwnProperty(metadataKey) && origins[metadataKey];
+        if (origin) {
+          // If the symbol is from a bundled index, use the declaration location of the
+          // symbol so relative references (such as './my.html') will be calculated
+          // correctly.
+          const originFilePath = this.resolveModule(origin, filePath);
+          if (!originFilePath) {
+            this.reportError(
+                new Error(`Couldn't resolve original symbol for ${origin} from ${filePath}`));
+          } else {
+            this.symbolResourcePaths.set(symbol, originFilePath);
+          }
+        }
+        resolvedSymbols.push(
+            this.createResolvedSymbol(symbol, filePath, topLevelSymbolNames, symbolMeta));
+      });
+    }
+    resolvedSymbols.forEach(
+        (resolvedSymbol) => this.resolvedSymbols.set(resolvedSymbol.symbol, resolvedSymbol));
+    this.symbolFromFile.set(filePath, resolvedSymbols.map(resolvedSymbol => resolvedSymbol.symbol));
+  }
+
+  private createResolvedSymbol(
+      sourceSymbol: StaticSymbol, topLevelPath: string, topLevelSymbolNames: Set<string>,
+      metadata: any): ResolvedStaticSymbol {
+    // For classes that don't have Angular summaries / metadata,
+    // we only keep their arity, but nothing else
+    // (e.g. their constructor parameters).
+    // We do this to prevent introducing deep imports
+    // as we didn't generate .ngfactory.ts files with proper reexports.
+    const isTsFile = TS.test(sourceSymbol.filePath);
+    if (this.summaryResolver.isLibraryFile(sourceSymbol.filePath) && !isTsFile && metadata &&
+        metadata['__symbolic'] === 'class') {
+      const transformedMeta = {__symbolic: 'class', arity: metadata.arity};
+      return new ResolvedStaticSymbol(sourceSymbol, transformedMeta);
+    }
+
+    let _originalFileMemo: string|undefined;
+    const getOriginalName: () => string = () => {
+      if (!_originalFileMemo) {
+        // Guess what the original file name is from the reference. If it has a `.d.ts` extension
+        // replace it with `.ts`. If it already has `.ts` just leave it in place. If it doesn't have
+        // .ts or .d.ts, append `.ts'. Also, if it is in `node_modules`, trim the `node_module`
+        // location as it is not important to finding the file.
+        _originalFileMemo =
+            this.host.getOutputName(topLevelPath.replace(/((\.ts)|(\.d\.ts)|)$/, '.ts')
+                                        .replace(/^.*node_modules[/\\]/, ''));
+      }
+      return _originalFileMemo;
+    };
+
+    const self = this;
+
+    class ReferenceTransformer extends ValueTransformer {
+      visitStringMap(map: {[key: string]: any}, functionParams: string[]): any {
+        const symbolic = map['__symbolic'];
+        if (symbolic === 'function') {
+          const oldLen = functionParams.length;
+          functionParams.push(...(map['parameters'] || []));
+          const result = super.visitStringMap(map, functionParams);
+          functionParams.length = oldLen;
+          return result;
+        } else if (symbolic === 'reference') {
+          const module = map['module'];
+          const name = map['name'] ? unescapeIdentifier(map['name']) : map['name'];
+          if (!name) {
+            return null;
+          }
+          let filePath: string;
+          if (module) {
+            filePath = self.resolveModule(module, sourceSymbol.filePath) !;
+            if (!filePath) {
+              return {
+                __symbolic: 'error',
+                message: `Could not resolve ${module} relative to ${sourceSymbol.filePath}.`,
+                line: map.line,
+                character: map.character,
+                fileName: getOriginalName()
+              };
+            }
+            return {
+              __symbolic: 'resolved',
+              symbol: self.getStaticSymbol(filePath, name),
+              line: map.line,
+              character: map.character,
+              fileName: getOriginalName()
+            };
+          } else if (functionParams.indexOf(name) >= 0) {
+            // reference to a function parameter
+            return {__symbolic: 'reference', name: name};
+          } else {
+            if (topLevelSymbolNames.has(name)) {
+              return self.getStaticSymbol(topLevelPath, name);
+            }
+            // ambient value
+            null;
+          }
+        } else if (symbolic === 'error') {
+          return {...map, fileName: getOriginalName()};
+        } else {
+          return super.visitStringMap(map, functionParams);
+        }
+      }
+    }
+    const transformedMeta = visitValue(metadata, new ReferenceTransformer(), []);
+    let unwrappedTransformedMeta = unwrapResolvedMetadata(transformedMeta);
+    if (unwrappedTransformedMeta instanceof StaticSymbol) {
+      return this.createExport(sourceSymbol, unwrappedTransformedMeta);
+    }
+    return new ResolvedStaticSymbol(sourceSymbol, transformedMeta);
+  }
+
+  private createExport(sourceSymbol: StaticSymbol, targetSymbol: StaticSymbol):
+      ResolvedStaticSymbol {
+    sourceSymbol.assertNoMembers();
+    targetSymbol.assertNoMembers();
+    if (this.summaryResolver.isLibraryFile(sourceSymbol.filePath) &&
+        this.summaryResolver.isLibraryFile(targetSymbol.filePath)) {
+      // This case is for an ng library importing symbols from a plain ts library
+      // transitively.
+      // Note: We rely on the fact that we discover symbols in the direction
+      // from source files to library files
+      this.importAs.set(targetSymbol, this.getImportAs(sourceSymbol) || sourceSymbol);
+    }
+    return new ResolvedStaticSymbol(sourceSymbol, targetSymbol);
+  }
+
+  private reportError(error: Error, context?: StaticSymbol, path?: string) {
+    if (this.errorRecorder) {
+      this.errorRecorder(error, (context && context.filePath) || path);
+    } else {
+      throw error;
+    }
+  }
+
+  /**
+   * @param module an absolute path to a module file.
+   */
+  private getModuleMetadata(module: string): {[key: string]: any} {
+    let moduleMetadata = this.metadataCache.get(module);
+    if (!moduleMetadata) {
+      const moduleMetadatas = this.host.getMetadataFor(module);
+      if (moduleMetadatas) {
+        let maxVersion = -1;
+        moduleMetadatas.forEach((md) => {
+          if (md && md['version'] > maxVersion) {
+            maxVersion = md['version'];
+            moduleMetadata = md;
+          }
+        });
+      }
+      if (!moduleMetadata) {
+        moduleMetadata =
+            {__symbolic: 'module', version: SUPPORTED_SCHEMA_VERSION, module: module, metadata: {}};
+      }
+      if (moduleMetadata['version'] != SUPPORTED_SCHEMA_VERSION) {
+        const errorMessage = moduleMetadata['version'] == 2 ?
+            `Unsupported metadata version ${moduleMetadata['version']} for module ${module}. This module should be compiled with a newer version of ngc` :
+            `Metadata version mismatch for module ${module}, found version ${moduleMetadata['version']}, expected ${SUPPORTED_SCHEMA_VERSION}`;
+        this.reportError(new Error(errorMessage));
+      }
+      this.metadataCache.set(module, moduleMetadata);
+    }
+    return moduleMetadata;
+  }
+
+
+  getSymbolByModule(module: string, symbolName: string, containingFile?: string): StaticSymbol {
+    const filePath = this.resolveModule(module, containingFile);
+    if (!filePath) {
+      this.reportError(
+          new Error(`Could not resolve module ${module}${containingFile ? ' relative to ' +
+            containingFile : ''}`));
+      return this.getStaticSymbol(`ERROR:${module}`, symbolName);
+    }
+    return this.getStaticSymbol(filePath, symbolName);
+  }
+
+  private resolveModule(module: string, containingFile?: string): string|null {
+    try {
+      return this.host.moduleNameToFileName(module, containingFile);
+    } catch (e) {
+      console.error(`Could not resolve module '${module}' relative to file ${containingFile}`);
+      this.reportError(e, undefined, containingFile);
+    }
+    return null;
+  }
+}
+
+// Remove extra underscore from escaped identifier.
+// See https://github.com/Microsoft/TypeScript/blob/master/src/compiler/utilities.ts
+export function unescapeIdentifier(identifier: string): string {
+  return identifier.startsWith('___') ? identifier.substr(1) : identifier;
+}
+
+export function unwrapResolvedMetadata(metadata: any): any {
+  if (metadata && metadata.__symbolic === 'resolved') {
+    return metadata.symbol;
+  }
+  return metadata;
+}
\ No newline at end of file
diff --git a/packages/compiler/src/aot/summary_resolver.ts b/packages/compiler/src/aot/summary_resolver.ts
new file mode 100644
index 000000000000..28bf5fac6693
--- /dev/null
+++ b/packages/compiler/src/aot/summary_resolver.ts
@@ -0,0 +1,138 @@
+/**
+ * @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 {Summary, SummaryResolver} from '../summary_resolver';
+
+import {StaticSymbol, StaticSymbolCache} from './static_symbol';
+import {deserializeSummaries} from './summary_serializer';
+import {stripGeneratedFileSuffix, summaryFileName} from './util';
+
+export interface AotSummaryResolverHost {
+  /**
+   * Loads an NgModule/Directive/Pipe summary file
+   */
+  loadSummary(filePath: string): string|null;
+
+  /**
+   * Returns whether a file is a source file or not.
+   */
+  isSourceFile(sourceFilePath: string): boolean;
+  /**
+   * Converts a file name into a representation that should be stored in a summary file.
+   * This has to include changing the suffix as well.
+   * E.g.
+   * `some_file.ts` -> `some_file.d.ts`
+   *
+   * @param referringSrcFileName the soure file that refers to fileName
+   */
+  toSummaryFileName(fileName: string, referringSrcFileName: string): string;
+
+  /**
+   * Converts a fileName that was processed by `toSummaryFileName` back into a real fileName
+   * given the fileName of the library that is referrig to it.
+   */
+  fromSummaryFileName(fileName: string, referringLibFileName: string): string;
+}
+
+export class AotSummaryResolver implements SummaryResolver<StaticSymbol> {
+  // Note: this will only contain StaticSymbols without members!
+  private summaryCache = new Map<StaticSymbol, Summary<StaticSymbol>>();
+  private loadedFilePaths = new Map<string, boolean>();
+  // Note: this will only contain StaticSymbols without members!
+  private importAs = new Map<StaticSymbol, StaticSymbol>();
+  private knownFileNameToModuleNames = new Map<string, string>();
+
+  constructor(private host: AotSummaryResolverHost, private staticSymbolCache: StaticSymbolCache) {}
+
+  isLibraryFile(filePath: string): boolean {
+    // 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(stripGeneratedFileSuffix(filePath));
+  }
+
+  toSummaryFileName(filePath: string, referringSrcFileName: string) {
+    return this.host.toSummaryFileName(filePath, referringSrcFileName);
+  }
+
+  fromSummaryFileName(fileName: string, referringLibFileName: string) {
+    return this.host.fromSummaryFileName(fileName, referringLibFileName);
+  }
+
+  resolveSummary(staticSymbol: StaticSymbol): Summary<StaticSymbol>|null {
+    const rootSymbol = staticSymbol.members.length ?
+        this.staticSymbolCache.get(staticSymbol.filePath, staticSymbol.name) :
+        staticSymbol;
+    let summary = this.summaryCache.get(rootSymbol);
+    if (!summary) {
+      this._loadSummaryFile(staticSymbol.filePath);
+      summary = this.summaryCache.get(staticSymbol) !;
+    }
+    return (rootSymbol === staticSymbol && summary) || null;
+  }
+
+  getSymbolsOf(filePath: string): StaticSymbol[]|null {
+    if (this._loadSummaryFile(filePath)) {
+      return Array.from(this.summaryCache.keys()).filter((symbol) => symbol.filePath === filePath);
+    }
+    return null;
+  }
+
+  getImportAs(staticSymbol: StaticSymbol): StaticSymbol {
+    staticSymbol.assertNoMembers();
+    return this.importAs.get(staticSymbol) !;
+  }
+
+  /**
+   * Converts a file path to a module name that can be used as an `import`.
+   */
+  getKnownModuleName(importedFilePath: string): string|null {
+    return this.knownFileNameToModuleNames.get(importedFilePath) || null;
+  }
+
+  addSummary(summary: Summary<StaticSymbol>) { this.summaryCache.set(summary.symbol, summary); }
+
+  private _loadSummaryFile(filePath: string): boolean {
+    let hasSummary = this.loadedFilePaths.get(filePath);
+    if (hasSummary != null) {
+      return hasSummary;
+    }
+    let json: string|null = null;
+    if (this.isLibraryFile(filePath)) {
+      const summaryFilePath = summaryFileName(filePath);
+      try {
+        json = this.host.loadSummary(summaryFilePath);
+      } catch (e) {
+        console.error(`Error loading summary file ${summaryFilePath}`);
+        throw e;
+      }
+    }
+    hasSummary = json != null;
+    this.loadedFilePaths.set(filePath, hasSummary);
+    if (json) {
+      const {moduleName, summaries, importAs} =
+          deserializeSummaries(this.staticSymbolCache, this, filePath, json);
+      summaries.forEach((summary) => this.summaryCache.set(summary.symbol, summary));
+      if (moduleName) {
+        this.knownFileNameToModuleNames.set(filePath, moduleName);
+        if (filePath.endsWith('.d.ts')) {
+          // Also add entries to map the ngfactory & ngsummary files to their module names.
+          // This is necessary to resolve ngfactory & ngsummary files to their AMD module
+          // names when building angular with Bazel from source downstream.
+          // See https://github.com/bazelbuild/rules_typescript/pull/223 for context.
+          this.knownFileNameToModuleNames.set(
+              filePath.replace(/\.d\.ts$/, '.ngfactory.d.ts'), moduleName + '.ngfactory');
+          this.knownFileNameToModuleNames.set(
+              filePath.replace(/\.d\.ts$/, '.ngsummary.d.ts'), moduleName + '.ngsummary');
+        }
+      }
+      importAs.forEach((importAs) => { this.importAs.set(importAs.symbol, importAs.importAs); });
+    }
+    return hasSummary;
+  }
+}
diff --git a/packages/compiler/src/aot/summary_serializer.ts b/packages/compiler/src/aot/summary_serializer.ts
new file mode 100644
index 000000000000..1b6d44885d79
--- /dev/null
+++ b/packages/compiler/src/aot/summary_serializer.ts
@@ -0,0 +1,481 @@
+/**
+ * @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 {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 {OutputContext, ValueTransformer, ValueVisitor, visitValue} from '../util';
+
+import {StaticSymbol, StaticSymbolCache} from './static_symbol';
+import {ResolvedStaticSymbol, StaticSymbolResolver, unwrapResolvedMetadata} from './static_symbol_resolver';
+import {isLoweredSymbol, ngfactoryFilePath, summaryForJitFileName, summaryForJitName} from './util';
+
+export function serializeSummaries(
+    srcFileName: string, forJitCtx: OutputContext | null,
+    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, srcFileName);
+
+  // 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) => toJsonSerializer.addSummary(
+          {symbol: resolvedSymbol.symbol, metadata: resolvedSymbol.metadata}));
+
+  // Add type summaries.
+  types.forEach(({summary, metadata}) => {
+    toJsonSerializer.addSummary(
+        {symbol: summary.type.reference, metadata: undefined, type: summary});
+  });
+  const {json, exportAs} = toJsonSerializer.serialize();
+  if (forJitCtx) {
+    const forJitSerializer = new ForJitSerializer(forJitCtx, symbolResolver, summaryResolver);
+    types.forEach(({summary, metadata}) => { forJitSerializer.addSourceType(summary, metadata); });
+    toJsonSerializer.unprocessedSymbolSummariesBySymbol.forEach((summary) => {
+      if (summaryResolver.isLibraryFile(summary.symbol.filePath) && summary.type) {
+        forJitSerializer.addLibType(summary.type);
+      }
+    });
+    forJitSerializer.serialize(exportAs);
+  }
+  return {json, exportAs};
+}
+
+export function deserializeSummaries(
+    symbolCache: StaticSymbolCache, summaryResolver: SummaryResolver<StaticSymbol>,
+    libraryFileName: string, json: string): {
+  moduleName: string | null,
+  summaries: Summary<StaticSymbol>[],
+  importAs: {symbol: StaticSymbol, importAs: StaticSymbol}[]
+} {
+  const deserializer = new FromJsonDeserializer(symbolCache, summaryResolver);
+  return deserializer.deserialize(libraryFileName, json);
+}
+
+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
+      ]));
+}
+
+const enum SerializationFlags {
+  None = 0,
+  ResolveValue = 1,
+}
+
+class ToJsonSerializer extends ValueTransformer {
+  // Note: This only contains symbols without members.
+  private symbols: StaticSymbol[] = [];
+  private indexBySymbol = new Map<StaticSymbol, number>();
+  private reexportedBy = new Map<StaticSymbol, StaticSymbol>();
+  // This now contains a `__symbol: number` in the place of
+  // StaticSymbols, but otherwise has the same shape as the original objects.
+  private processedSummaryBySymbol = new Map<StaticSymbol, any>();
+  private processedSummaries: any[] = [];
+  private moduleName: string|null;
+
+  unprocessedSymbolSummariesBySymbol = new Map<StaticSymbol, Summary<StaticSymbol>>();
+
+  constructor(
+      private symbolResolver: StaticSymbolResolver,
+      private summaryResolver: SummaryResolver<StaticSymbol>, private srcFileName: string) {
+    super();
+    this.moduleName = symbolResolver.getKnownModuleName(srcFileName);
+  }
+
+  addSummary(summary: Summary<StaticSymbol>) {
+    let unprocessedSummary = this.unprocessedSymbolSummariesBySymbol.get(summary.symbol);
+    let processedSummary = this.processedSummaryBySymbol.get(summary.symbol);
+    if (!unprocessedSummary) {
+      unprocessedSummary = {symbol: summary.symbol, metadata: undefined};
+      this.unprocessedSymbolSummariesBySymbol.set(summary.symbol, unprocessedSummary);
+      processedSummary = {symbol: this.processValue(summary.symbol, SerializationFlags.None)};
+      this.processedSummaries.push(processedSummary);
+      this.processedSummaryBySymbol.set(summary.symbol, processedSummary);
+    }
+    if (!unprocessedSummary.metadata && summary.metadata) {
+      let metadata = summary.metadata || {};
+      if (metadata.__symbolic === 'class') {
+        // For classes, we keep everything except their class decorators.
+        // We need to keep e.g. the ctor args, method names, method decorators
+        // so that the class can be extended in another compilation unit.
+        // We don't keep the class decorators as
+        // 1) they refer to data
+        //   that should not cause a rebuild of downstream compilation units
+        //   (e.g. inline templates of @Component, or @NgModule.declarations)
+        // 2) their data is already captured in TypeSummaries, e.g. DirectiveSummary.
+        const clone: {[key: string]: any} = {};
+        Object.keys(metadata).forEach((propName) => {
+          if (propName !== 'decorators') {
+            clone[propName] = metadata[propName];
+          }
+        });
+        metadata = clone;
+      } else if (isCall(metadata)) {
+        if (!isFunctionCall(metadata) && !isMethodCallOnVariable(metadata)) {
+          // Don't store complex calls as we won't be able to simplify them anyways later on.
+          metadata = {
+            __symbolic: 'error',
+            message: 'Complex function calls are not supported.',
+          };
+        }
+      }
+      // Note: We need to keep storing ctor calls for e.g.
+      // `export const x = new InjectionToken(...)`
+      unprocessedSummary.metadata = metadata;
+      processedSummary.metadata = this.processValue(metadata, SerializationFlags.ResolveValue);
+      if (metadata instanceof StaticSymbol &&
+          this.summaryResolver.isLibraryFile(metadata.filePath)) {
+        const declarationSymbol = this.symbols[this.indexBySymbol.get(metadata) !];
+        if (!isLoweredSymbol(declarationSymbol.name)) {
+          // Note: symbols that were introduced during codegen in the user file can have a reexport
+          // if a user used `export *`. However, we can't rely on this as tsickle will change
+          // `export *` into named exports, using only the information from the typechecker.
+          // As we introduce the new symbols after typecheck, Tsickle does not know about them,
+          // and omits them when expanding `export *`.
+          // So we have to keep reexporting these symbols manually via .ngfactory files.
+          this.reexportedBy.set(declarationSymbol, summary.symbol);
+        }
+      }
+    }
+    if (!unprocessedSummary.type && summary.type) {
+      unprocessedSummary.type = summary.type;
+      // 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).
+      processedSummary.type = this.processValue(summary.type, SerializationFlags.None);
+      // except for reexported directives / pipes, so we need to store
+      // their summaries explicitly.
+      if (summary.type.summaryKind === CompileSummaryKind.NgModule) {
+        const ngModuleSummary = <CompileNgModuleSummary>summary.type;
+        ngModuleSummary.exportedDirectives.concat(ngModuleSummary.exportedPipes).forEach((id) => {
+          const symbol: StaticSymbol = id.reference;
+          if (this.summaryResolver.isLibraryFile(symbol.filePath) &&
+              !this.unprocessedSymbolSummariesBySymbol.has(symbol)) {
+            const summary = this.summaryResolver.resolveSummary(symbol);
+            if (summary) {
+              this.addSummary(summary);
+            }
+          }
+        });
+      }
+    }
+  }
+
+  serialize(): {json: string, exportAs: {symbol: StaticSymbol, exportAs: string}[]} {
+    const exportAs: {symbol: StaticSymbol, exportAs: string}[] = [];
+    const json = JSON.stringify({
+      moduleName: this.moduleName,
+      summaries: this.processedSummaries,
+      symbols: this.symbols.map((symbol, index) => {
+        symbol.assertNoMembers();
+        let importAs: string|number = undefined !;
+        if (this.summaryResolver.isLibraryFile(symbol.filePath)) {
+          const reexportSymbol = this.reexportedBy.get(symbol);
+          if (reexportSymbol) {
+            importAs = this.indexBySymbol.get(reexportSymbol) !;
+          } else {
+            const summary = this.unprocessedSymbolSummariesBySymbol.get(symbol);
+            if (!summary || !summary.metadata || summary.metadata.__symbolic !== 'interface') {
+              importAs = `${symbol.name}_${index}`;
+              exportAs.push({symbol, exportAs: importAs});
+            }
+          }
+        }
+        return {
+          __symbol: index,
+          name: symbol.name,
+          filePath: this.summaryResolver.toSummaryFileName(symbol.filePath, this.srcFileName),
+          importAs: importAs
+        };
+      })
+    });
+    return {json, exportAs};
+  }
+
+  private processValue(value: any, flags: SerializationFlags): any {
+    return visitValue(value, this, flags);
+  }
+
+  visitOther(value: any, context: any): any {
+    if (value instanceof StaticSymbol) {
+      let baseSymbol = this.symbolResolver.getStaticSymbol(value.filePath, value.name);
+      const index = this.visitStaticSymbol(baseSymbol, context);
+      return {__symbol: index, members: value.members};
+    }
+  }
+
+  /**
+   * Strip line and character numbers from ngsummaries.
+   * Emitting them causes white spaces changes to retrigger upstream
+   * recompilations in bazel.
+   * TODO: find out a way to have line and character numbers in errors without
+   * excessive recompilation in bazel.
+   */
+  visitStringMap(map: {[key: string]: any}, context: any): any {
+    if (map['__symbolic'] === 'resolved') {
+      return visitValue(map.symbol, this, context);
+    }
+    if (map['__symbolic'] === 'error') {
+      delete map['line'];
+      delete map['character'];
+    }
+    return super.visitStringMap(map, context);
+  }
+
+  /**
+   * Returns null if the options.resolveValue is true, and the summary for the symbol
+   * resolved to a type or could not be resolved.
+   */
+  private visitStaticSymbol(baseSymbol: StaticSymbol, flags: SerializationFlags): number {
+    let index: number|undefined|null = this.indexBySymbol.get(baseSymbol);
+    let summary: Summary<StaticSymbol>|null = null;
+    if (flags & SerializationFlags.ResolveValue &&
+        this.summaryResolver.isLibraryFile(baseSymbol.filePath)) {
+      if (this.unprocessedSymbolSummariesBySymbol.has(baseSymbol)) {
+        // the summary for this symbol was already added
+        // -> nothing to do.
+        return index !;
+      }
+      summary = this.loadSummary(baseSymbol);
+      if (summary && summary.metadata instanceof StaticSymbol) {
+        // The summary is a reexport
+        index = this.visitStaticSymbol(summary.metadata, flags);
+        // reset the summary as it is just a reexport, so we don't want to store it.
+        summary = null;
+      }
+    } else if (index != null) {
+      // Note: == on purpose to compare with undefined!
+      // No summary and the symbol is already added -> nothing to do.
+      return index;
+    }
+    // Note: == on purpose to compare with undefined!
+    if (index == null) {
+      index = this.symbols.length;
+      this.symbols.push(baseSymbol);
+    }
+    this.indexBySymbol.set(baseSymbol, index);
+    if (summary) {
+      this.addSummary(summary);
+    }
+    return index;
+  }
+
+  private loadSummary(symbol: StaticSymbol): Summary<StaticSymbol>|null {
+    let summary = this.summaryResolver.resolveSummary(symbol);
+    if (!summary) {
+      // some symbols might originate from a plain typescript library
+      // that just exported .d.ts and .metadata.json files, i.e. where no summary
+      // files were created.
+      const resolvedSymbol = this.symbolResolver.resolveSymbol(symbol);
+      if (resolvedSymbol) {
+        summary = {symbol: resolvedSymbol.symbol, metadata: resolvedSymbol.metadata};
+      }
+    }
+    return summary;
+  }
+}
+
+class ForJitSerializer {
+  private data: Array<{
+    summary: CompileTypeSummary,
+    metadata: CompileNgModuleMetadata|CompileDirectiveMetadata|CompilePipeMetadata|
+    CompileTypeMetadata|null,
+    isLibrary: boolean
+  }> = [];
+
+  constructor(
+      private outputCtx: OutputContext, private symbolResolver: StaticSymbolResolver,
+      private summaryResolver: SummaryResolver<StaticSymbol>) {}
+
+  addSourceType(
+      summary: CompileTypeSummary, metadata: CompileNgModuleMetadata|CompileDirectiveMetadata|
+      CompilePipeMetadata|CompileTypeMetadata) {
+    this.data.push({summary, metadata, isLibrary: false});
+  }
+
+  addLibType(summary: CompileTypeSummary) {
+    this.data.push({summary, metadata: null, isLibrary: true});
+  }
+
+  serialize(exportAsArr: {symbol: StaticSymbol, exportAs: string}[]): void {
+    const exportAsBySymbol = new Map<StaticSymbol, string>();
+    for (const {symbol, exportAs} of exportAsArr) {
+      exportAsBySymbol.set(symbol, exportAs);
+    }
+    const ngModuleSymbols = new Set<StaticSymbol>();
+
+    for (const {summary, metadata, isLibrary} of this.data) {
+      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;
+        for (const mod of modSummary.modules) {
+          ngModuleSymbols.add(mod.reference);
+        }
+      }
+      if (!isLibrary) {
+        const fnName = summaryForJitName(summary.type.reference.name);
+        createSummaryForJitFunction(
+            this.outputCtx, summary.type.reference,
+            this.serializeSummaryWithDeps(summary, metadata !));
+      }
+    }
+
+    ngModuleSymbols.forEach((ngModuleSymbol) => {
+      if (this.summaryResolver.isLibraryFile(ngModuleSymbol.filePath)) {
+        let exportAs = exportAsBySymbol.get(ngModuleSymbol) || ngModuleSymbol.name;
+        const jitExportAsName = summaryForJitName(exportAs);
+        this.outputCtx.statements.push(o.variable(jitExportAsName)
+                                           .set(this.serializeSummaryRef(ngModuleSymbol))
+                                           .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 {
+  // TODO(issue/24571): remove '!'.
+  private symbols !: StaticSymbol[];
+
+  constructor(
+      private symbolCache: StaticSymbolCache,
+      private summaryResolver: SummaryResolver<StaticSymbol>) {
+    super();
+  }
+
+  deserialize(libraryFileName: string, json: string): {
+    moduleName: string | null,
+    summaries: Summary<StaticSymbol>[],
+    importAs: {symbol: StaticSymbol, importAs: StaticSymbol}[]
+  } {
+    const data: {moduleName: string | null, summaries: any[], symbols: any[]} = JSON.parse(json);
+    const allImportAs: {symbol: StaticSymbol, importAs: StaticSymbol}[] = [];
+    this.symbols = data.symbols.map(
+        (serializedSymbol) => this.symbolCache.get(
+            this.summaryResolver.fromSummaryFileName(serializedSymbol.filePath, libraryFileName),
+            serializedSymbol.name));
+    data.symbols.forEach((serializedSymbol, index) => {
+      const symbol = this.symbols[index];
+      const importAs = serializedSymbol.importAs;
+      if (typeof importAs === 'number') {
+        allImportAs.push({symbol, importAs: this.symbols[importAs]});
+      } else if (typeof importAs === 'string') {
+        allImportAs.push(
+            {symbol, importAs: this.symbolCache.get(ngfactoryFilePath(libraryFileName), importAs)});
+      }
+    });
+    const summaries = visitValue(data.summaries, this, null) as Summary<StaticSymbol>[];
+    return {moduleName: data.moduleName, summaries, importAs: allImportAs};
+  }
+
+  visitStringMap(map: {[key: string]: any}, context: any): any {
+    if ('__symbol' in map) {
+      const baseSymbol = this.symbols[map['__symbol']];
+      const members = map['members'];
+      return members.length ? this.symbolCache.get(baseSymbol.filePath, baseSymbol.name, members) :
+                              baseSymbol;
+    } else {
+      return super.visitStringMap(map, context);
+    }
+  }
+}
+
+function isCall(metadata: any): boolean {
+  return metadata && metadata.__symbolic === 'call';
+}
+
+function isFunctionCall(metadata: any): boolean {
+  return isCall(metadata) && unwrapResolvedMetadata(metadata.expression) instanceof StaticSymbol;
+}
+
+function isMethodCallOnVariable(metadata: any): boolean {
+  return isCall(metadata) && metadata.expression && metadata.expression.__symbolic === 'select' &&
+      unwrapResolvedMetadata(metadata.expression.expression) instanceof StaticSymbol;
+}
diff --git a/packages/compiler/src/aot/util.ts b/packages/compiler/src/aot/util.ts
new file mode 100644
index 000000000000..568dd57ad02b
--- /dev/null
+++ b/packages/compiler/src/aot/util.ts
@@ -0,0 +1,75 @@
+/**
+ * @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 STRIP_SRC_FILE_SUFFIXES = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
+const GENERATED_FILE = /\.ngfactory\.|\.ngsummary\./;
+const JIT_SUMMARY_FILE = /\.ngsummary\./;
+const JIT_SUMMARY_NAME = /NgSummary$/;
+
+export function ngfactoryFilePath(filePath: string, forceSourceFile = false): string {
+  const urlWithSuffix = splitTypescriptSuffix(filePath, forceSourceFile);
+  return `${urlWithSuffix[0]}.ngfactory${normalizeGenFileSuffix(urlWithSuffix[1])}`;
+}
+
+export function stripGeneratedFileSuffix(filePath: string): string {
+  return filePath.replace(GENERATED_FILE, '.');
+}
+
+export function isGeneratedFile(filePath: string): boolean {
+  return GENERATED_FILE.test(filePath);
+}
+
+export function splitTypescriptSuffix(path: string, forceSourceFile = false): string[] {
+  if (path.endsWith('.d.ts')) {
+    return [path.slice(0, -5), forceSourceFile ? '.ts' : '.d.ts'];
+  }
+
+  const lastDot = path.lastIndexOf('.');
+
+  if (lastDot !== -1) {
+    return [path.substring(0, lastDot), path.substring(lastDot)];
+  }
+
+  return [path, ''];
+}
+
+export function normalizeGenFileSuffix(srcFileSuffix: string): string {
+  return srcFileSuffix === '.tsx' ? '.ts' : srcFileSuffix;
+}
+
+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, '');
+}
+
+const LOWERED_SYMBOL = /\u0275\d+/;
+
+export function isLoweredSymbol(name: string) {
+  return LOWERED_SYMBOL.test(name);
+}
+
+export function createLoweredSymbol(id: number): string {
+  return `\u0275${id}`;
+}
diff --git a/packages/compiler/src/assertions.ts b/packages/compiler/src/assertions.ts
new file mode 100644
index 000000000000..2b3736e0e100
--- /dev/null
+++ b/packages/compiler/src/assertions.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 function assertArrayOfStrings(identifier: string, value: any) {
+  if (value == null) {
+    return;
+  }
+  if (!Array.isArray(value)) {
+    throw new Error(`Expected '${identifier}' to be an array of strings.`);
+  }
+  for (let i = 0; i < value.length; i += 1) {
+    if (typeof value[i] !== 'string') {
+      throw new Error(`Expected '${identifier}' to be an array of strings.`);
+    }
+  }
+}
+
+const INTERPOLATION_BLACKLIST_REGEXPS = [
+  /^\s*$/,        // empty
+  /[<>]/,         // html tag
+  /^[{}]$/,       // i18n expansion
+  /&(#|[a-z])/i,  // character reference,
+  /^\/\//,        // comment
+];
+
+export function assertInterpolationSymbols(identifier: string, value: any): void {
+  if (value != null && !(Array.isArray(value) && value.length == 2)) {
+    throw new Error(`Expected '${identifier}' to be an array, [start, end].`);
+  } else if (value != null) {
+    const start = value[0] as string;
+    const end = value[1] as string;
+    // black list checking
+    INTERPOLATION_BLACKLIST_REGEXPS.forEach(regexp => {
+      if (regexp.test(start) || regexp.test(end)) {
+        throw new Error(`['${start}', '${end}'] contains unusable interpolation symbol.`);
+      }
+    });
+  }
+}
diff --git a/packages/compiler/src/ast_path.ts b/packages/compiler/src/ast_path.ts
new file mode 100644
index 000000000000..cb019a47ebdb
--- /dev/null
+++ b/packages/compiler/src/ast_path.ts
@@ -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
+ */
+
+/**
+ * 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 expression `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[], 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|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 {
+    for (let i = this.path.length - 1; i >= 0; i--) {
+      let item = this.path[i];
+      if (item instanceof ctor) return <N>item;
+    }
+  }
+
+  push(node: T) { this.path.push(node); }
+
+  pop(): T { return this.path.pop() !; }
+}
diff --git a/packages/compiler/src/chars.ts b/packages/compiler/src/chars.ts
new file mode 100644
index 000000000000..4e510a2d58bc
--- /dev/null
+++ b/packages/compiler/src/chars.ts
@@ -0,0 +1,89 @@
+/**
+ * @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 const $EOF = 0;
+export const $TAB = 9;
+export const $LF = 10;
+export const $VTAB = 11;
+export const $FF = 12;
+export const $CR = 13;
+export const $SPACE = 32;
+export const $BANG = 33;
+export const $DQ = 34;
+export const $HASH = 35;
+export const $$ = 36;
+export const $PERCENT = 37;
+export const $AMPERSAND = 38;
+export const $SQ = 39;
+export const $LPAREN = 40;
+export const $RPAREN = 41;
+export const $STAR = 42;
+export const $PLUS = 43;
+export const $COMMA = 44;
+export const $MINUS = 45;
+export const $PERIOD = 46;
+export const $SLASH = 47;
+export const $COLON = 58;
+export const $SEMICOLON = 59;
+export const $LT = 60;
+export const $EQ = 61;
+export const $GT = 62;
+export const $QUESTION = 63;
+
+export const $0 = 48;
+export const $9 = 57;
+
+export const $A = 65;
+export const $E = 69;
+export const $F = 70;
+export const $X = 88;
+export const $Z = 90;
+
+export const $LBRACKET = 91;
+export const $BACKSLASH = 92;
+export const $RBRACKET = 93;
+export const $CARET = 94;
+export const $_ = 95;
+
+export const $a = 97;
+export const $e = 101;
+export const $f = 102;
+export const $n = 110;
+export const $r = 114;
+export const $t = 116;
+export const $u = 117;
+export const $v = 118;
+export const $x = 120;
+export const $z = 122;
+
+export const $LBRACE = 123;
+export const $BAR = 124;
+export const $RBRACE = 125;
+export const $NBSP = 160;
+
+export const $PIPE = 124;
+export const $TILDA = 126;
+export const $AT = 64;
+
+export const $BT = 96;
+
+export function isWhitespace(code: number): boolean {
+  return (code >= $TAB && code <= $SPACE) || (code == $NBSP);
+}
+
+export function isDigit(code: number): boolean {
+  return $0 <= code && code <= $9;
+}
+
+export function isAsciiLetter(code: number): boolean {
+  return code >= $a && code <= $z || code >= $A && code <= $Z;
+}
+
+export function isAsciiHexDigit(code: number): boolean {
+  return code >= $a && code <= $f || code >= $A && code <= $F || isDigit(code);
+}
diff --git a/packages/compiler/src/compile_metadata.ts b/packages/compiler/src/compile_metadata.ts
new file mode 100644
index 000000000000..faf8737b4d04
--- /dev/null
+++ b/packages/compiler/src/compile_metadata.ts
@@ -0,0 +1,740 @@
+/**
+ * @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';
+import {ChangeDetectionStrategy, SchemaMetadata, Type, ViewEncapsulation} from './core';
+import {LifecycleHooks} from './lifecycle_reflector';
+import {ParseTreeResult as HtmlParseTreeResult} from './ml_parser/parser';
+import {splitAtColon, stringify} from './util';
+
+// group 0: "[prop] or (event) or @trigger"
+// group 1: "prop" from "[prop]"
+// group 2: "event" from "(event)"
+// group 3: "@trigger" from "@trigger"
+const HOST_REG_EXP = /^(?:(?:\[([^\]]+)\])|(?:\(([^\)]+)\)))|(\@[-\w]+)$/;
+
+export function sanitizeIdentifier(name: string): string {
+  return name.replace(/\W/g, '_');
+}
+
+let _anonymousTypeIndex = 0;
+
+export function identifierName(compileIdentifier: CompileIdentifierMetadata | null | undefined):
+    string|null {
+  if (!compileIdentifier || !compileIdentifier.reference) {
+    return null;
+  }
+  const ref = compileIdentifier.reference;
+  if (ref instanceof StaticSymbol) {
+    return ref.name;
+  }
+  if (ref['__anonymousType']) {
+    return ref['__anonymousType'];
+  }
+  let identifier = stringify(ref);
+  if (identifier.indexOf('(') >= 0) {
+    // case: anonymous functions!
+    identifier = `anonymous_${_anonymousTypeIndex++}`;
+    ref['__anonymousType'] = identifier;
+  } else {
+    identifier = sanitizeIdentifier(identifier);
+  }
+  return identifier;
+}
+
+export function identifierModuleUrl(compileIdentifier: CompileIdentifierMetadata): string {
+  const ref = compileIdentifier.reference;
+  if (ref instanceof StaticSymbol) {
+    return ref.filePath;
+  }
+  // Runtime type
+  return `./${stringify(ref)}`;
+}
+
+export function viewClassName(compType: any, embeddedTemplateIndex: number): string {
+  return `View_${identifierName({reference: compType})}_${embeddedTemplateIndex}`;
+}
+
+export function rendererTypeName(compType: any): string {
+  return `RenderType_${identifierName({reference: compType})}`;
+}
+
+export function hostViewClassName(compType: any): string {
+  return `HostView_${identifierName({reference: compType})}`;
+}
+
+export function componentFactoryName(compType: any): string {
+  return `${identifierName({reference: compType})}NgFactory`;
+}
+
+export interface ProxyClass { setDelegate(delegate: any): void; }
+
+export interface CompileIdentifierMetadata { reference: any; }
+
+export enum CompileSummaryKind {
+  Pipe,
+  Directive,
+  NgModule,
+  Injectable
+}
+
+/**
+ * A CompileSummary is the data needed to use a directive / pipe / module
+ * in other modules / components. However, this data is not enough to compile
+ * the directive / module itself.
+ */
+export interface CompileTypeSummary {
+  summaryKind: CompileSummaryKind|null;
+  type: CompileTypeMetadata;
+}
+
+export interface CompileDiDependencyMetadata {
+  isAttribute?: boolean;
+  isSelf?: boolean;
+  isHost?: boolean;
+  isSkipSelf?: boolean;
+  isOptional?: boolean;
+  isValue?: boolean;
+  token?: CompileTokenMetadata;
+  value?: any;
+}
+
+export interface CompileProviderMetadata {
+  token: CompileTokenMetadata;
+  useClass?: CompileTypeMetadata;
+  useValue?: any;
+  useExisting?: CompileTokenMetadata;
+  useFactory?: CompileFactoryMetadata;
+  deps?: CompileDiDependencyMetadata[];
+  multi?: boolean;
+}
+
+export interface CompileFactoryMetadata extends CompileIdentifierMetadata {
+  diDeps: CompileDiDependencyMetadata[];
+  reference: any;
+}
+
+export function tokenName(token: CompileTokenMetadata) {
+  return token.value != null ? sanitizeIdentifier(token.value) : identifierName(token.identifier);
+}
+
+export function tokenReference(token: CompileTokenMetadata) {
+  if (token.identifier != null) {
+    return token.identifier.reference;
+  } else {
+    return token.value;
+  }
+}
+
+export interface CompileTokenMetadata {
+  value?: any;
+  identifier?: CompileIdentifierMetadata|CompileTypeMetadata;
+}
+
+export interface CompileInjectableMetadata {
+  symbol: StaticSymbol;
+  type: CompileTypeMetadata;
+
+  providedIn?: StaticSymbol;
+
+  useValue?: any;
+  useClass?: StaticSymbol;
+  useExisting?: StaticSymbol;
+  useFactory?: StaticSymbol;
+  deps?: any[];
+}
+
+/**
+ * Metadata regarding compilation of a type.
+ */
+export interface CompileTypeMetadata extends CompileIdentifierMetadata {
+  diDeps: CompileDiDependencyMetadata[];
+  lifecycleHooks: LifecycleHooks[];
+  reference: any;
+}
+
+export interface CompileQueryMetadata {
+  selectors: Array<CompileTokenMetadata>;
+  descendants: boolean;
+  first: boolean;
+  propertyName: string;
+  read: CompileTokenMetadata;
+}
+
+/**
+ * Metadata about a stylesheet
+ */
+export class CompileStylesheetMetadata {
+  moduleUrl: string|null;
+  styles: string[];
+  styleUrls: string[];
+  constructor(
+      {moduleUrl, styles,
+       styleUrls}: {moduleUrl?: string, styles?: string[], styleUrls?: string[]} = {}) {
+    this.moduleUrl = moduleUrl || null;
+    this.styles = _normalizeArray(styles);
+    this.styleUrls = _normalizeArray(styleUrls);
+  }
+}
+
+/**
+ * Summary Metadata regarding compilation of a template.
+ */
+export interface CompileTemplateSummary {
+  ngContentSelectors: string[];
+  encapsulation: ViewEncapsulation|null;
+}
+
+/**
+ * Metadata regarding compilation of a template.
+ */
+export class CompileTemplateMetadata {
+  encapsulation: ViewEncapsulation|null;
+  template: string|null;
+  templateUrl: string|null;
+  htmlAst: HtmlParseTreeResult|null;
+  isInline: boolean;
+  styles: string[];
+  styleUrls: string[];
+  externalStylesheets: CompileStylesheetMetadata[];
+  animations: any[];
+  ngContentSelectors: string[];
+  interpolation: [string, string]|null;
+  preserveWhitespaces: boolean;
+  constructor({encapsulation, template, templateUrl, htmlAst, styles, styleUrls,
+               externalStylesheets, animations, ngContentSelectors, interpolation, isInline,
+               preserveWhitespaces}: {
+    encapsulation: ViewEncapsulation | null,
+    template: string|null,
+    templateUrl: string|null,
+    htmlAst: HtmlParseTreeResult|null,
+    styles: string[],
+    styleUrls: string[],
+    externalStylesheets: CompileStylesheetMetadata[],
+    ngContentSelectors: string[],
+    animations: any[],
+    interpolation: [string, string]|null,
+    isInline: boolean,
+    preserveWhitespaces: boolean
+  }) {
+    this.encapsulation = encapsulation;
+    this.template = template;
+    this.templateUrl = templateUrl;
+    this.htmlAst = htmlAst;
+    this.styles = _normalizeArray(styles);
+    this.styleUrls = _normalizeArray(styleUrls);
+    this.externalStylesheets = _normalizeArray(externalStylesheets);
+    this.animations = animations ? flatten(animations) : [];
+    this.ngContentSelectors = ngContentSelectors || [];
+    if (interpolation && interpolation.length != 2) {
+      throw new Error(`'interpolation' should have a start and an end symbol.`);
+    }
+    this.interpolation = interpolation;
+    this.isInline = isInline;
+    this.preserveWhitespaces = preserveWhitespaces;
+  }
+
+  toSummary(): CompileTemplateSummary {
+    return {
+      ngContentSelectors: this.ngContentSelectors,
+      encapsulation: this.encapsulation,
+    };
+  }
+}
+
+export interface CompileEntryComponentMetadata {
+  componentType: any;
+  componentFactory: StaticSymbol|object;
+}
+
+// Note: This should only use interfaces as nested data types
+// as we need to be able to serialize this from/to JSON!
+export interface CompileDirectiveSummary extends CompileTypeSummary {
+  type: CompileTypeMetadata;
+  isComponent: boolean;
+  selector: string|null;
+  exportAs: string|null;
+  inputs: {[key: string]: string};
+  outputs: {[key: string]: string};
+  hostListeners: {[key: string]: string};
+  hostProperties: {[key: string]: string};
+  hostAttributes: {[key: string]: string};
+  providers: CompileProviderMetadata[];
+  viewProviders: CompileProviderMetadata[];
+  queries: CompileQueryMetadata[];
+  guards: {[key: string]: any};
+  viewQueries: CompileQueryMetadata[];
+  entryComponents: CompileEntryComponentMetadata[];
+  changeDetection: ChangeDetectionStrategy|null;
+  template: CompileTemplateSummary|null;
+  componentViewType: StaticSymbol|ProxyClass|null;
+  rendererType: StaticSymbol|object|null;
+  componentFactory: StaticSymbol|object|null;
+}
+
+/**
+ * Metadata regarding compilation of a directive.
+ */
+export class CompileDirectiveMetadata {
+  static create({isHost, type, isComponent, selector, exportAs, changeDetection, inputs, outputs,
+                 host, providers, viewProviders, queries, guards, viewQueries, entryComponents,
+                 template, componentViewType, rendererType, componentFactory}: {
+    isHost: boolean,
+    type: CompileTypeMetadata,
+    isComponent: boolean,
+    selector: string|null,
+    exportAs: string|null,
+    changeDetection: ChangeDetectionStrategy|null,
+    inputs: string[],
+    outputs: string[],
+    host: {[key: string]: string},
+    providers: CompileProviderMetadata[],
+    viewProviders: CompileProviderMetadata[],
+    queries: CompileQueryMetadata[],
+    guards: {[key: string]: any};
+    viewQueries: CompileQueryMetadata[],
+    entryComponents: CompileEntryComponentMetadata[],
+    template: CompileTemplateMetadata,
+    componentViewType: StaticSymbol|ProxyClass|null,
+    rendererType: StaticSymbol|object|null,
+    componentFactory: StaticSymbol|object|null,
+  }): CompileDirectiveMetadata {
+    const hostListeners: {[key: string]: string} = {};
+    const hostProperties: {[key: string]: string} = {};
+    const hostAttributes: {[key: string]: string} = {};
+    if (host != null) {
+      Object.keys(host).forEach(key => {
+        const value = host[key];
+        const matches = key.match(HOST_REG_EXP);
+        if (matches === null) {
+          hostAttributes[key] = value;
+        } else if (matches[1] != null) {
+          hostProperties[matches[1]] = value;
+        } else if (matches[2] != null) {
+          hostListeners[matches[2]] = value;
+        }
+      });
+    }
+    const inputsMap: {[key: string]: string} = {};
+    if (inputs != null) {
+      inputs.forEach((bindConfig: string) => {
+        // canonical syntax: `dirProp: elProp`
+        // if there is no `:`, use dirProp = elProp
+        const parts = splitAtColon(bindConfig, [bindConfig, bindConfig]);
+        inputsMap[parts[0]] = parts[1];
+      });
+    }
+    const outputsMap: {[key: string]: string} = {};
+    if (outputs != null) {
+      outputs.forEach((bindConfig: string) => {
+        // canonical syntax: `dirProp: elProp`
+        // if there is no `:`, use dirProp = elProp
+        const parts = splitAtColon(bindConfig, [bindConfig, bindConfig]);
+        outputsMap[parts[0]] = parts[1];
+      });
+    }
+
+    return new CompileDirectiveMetadata({
+      isHost,
+      type,
+      isComponent: !!isComponent, selector, exportAs, changeDetection,
+      inputs: inputsMap,
+      outputs: outputsMap,
+      hostListeners,
+      hostProperties,
+      hostAttributes,
+      providers,
+      viewProviders,
+      queries,
+      guards,
+      viewQueries,
+      entryComponents,
+      template,
+      componentViewType,
+      rendererType,
+      componentFactory,
+    });
+  }
+  isHost: boolean;
+  type: CompileTypeMetadata;
+  isComponent: boolean;
+  selector: string|null;
+  exportAs: string|null;
+  changeDetection: ChangeDetectionStrategy|null;
+  inputs: {[key: string]: string};
+  outputs: {[key: string]: string};
+  hostListeners: {[key: string]: string};
+  hostProperties: {[key: string]: string};
+  hostAttributes: {[key: string]: string};
+  providers: CompileProviderMetadata[];
+  viewProviders: CompileProviderMetadata[];
+  queries: CompileQueryMetadata[];
+  guards: {[key: string]: any};
+  viewQueries: CompileQueryMetadata[];
+  entryComponents: CompileEntryComponentMetadata[];
+
+  template: CompileTemplateMetadata|null;
+
+  componentViewType: StaticSymbol|ProxyClass|null;
+  rendererType: StaticSymbol|object|null;
+  componentFactory: StaticSymbol|object|null;
+
+  constructor({isHost,
+               type,
+               isComponent,
+               selector,
+               exportAs,
+               changeDetection,
+               inputs,
+               outputs,
+               hostListeners,
+               hostProperties,
+               hostAttributes,
+               providers,
+               viewProviders,
+               queries,
+               guards,
+               viewQueries,
+               entryComponents,
+               template,
+               componentViewType,
+               rendererType,
+               componentFactory}: {
+    isHost: boolean,
+    type: CompileTypeMetadata,
+    isComponent: boolean,
+    selector: string|null,
+    exportAs: string|null,
+    changeDetection: ChangeDetectionStrategy|null,
+    inputs: {[key: string]: string},
+    outputs: {[key: string]: string},
+    hostListeners: {[key: string]: string},
+    hostProperties: {[key: string]: string},
+    hostAttributes: {[key: string]: string},
+    providers: CompileProviderMetadata[],
+    viewProviders: CompileProviderMetadata[],
+    queries: CompileQueryMetadata[],
+    guards: {[key: string]: any},
+    viewQueries: CompileQueryMetadata[],
+    entryComponents: CompileEntryComponentMetadata[],
+    template: CompileTemplateMetadata|null,
+    componentViewType: StaticSymbol|ProxyClass|null,
+    rendererType: StaticSymbol|object|null,
+    componentFactory: StaticSymbol|object|null,
+  }) {
+    this.isHost = !!isHost;
+    this.type = type;
+    this.isComponent = isComponent;
+    this.selector = selector;
+    this.exportAs = exportAs;
+    this.changeDetection = changeDetection;
+    this.inputs = inputs;
+    this.outputs = outputs;
+    this.hostListeners = hostListeners;
+    this.hostProperties = hostProperties;
+    this.hostAttributes = hostAttributes;
+    this.providers = _normalizeArray(providers);
+    this.viewProviders = _normalizeArray(viewProviders);
+    this.queries = _normalizeArray(queries);
+    this.guards = guards;
+    this.viewQueries = _normalizeArray(viewQueries);
+    this.entryComponents = _normalizeArray(entryComponents);
+    this.template = template;
+
+    this.componentViewType = componentViewType;
+    this.rendererType = rendererType;
+    this.componentFactory = componentFactory;
+  }
+
+  toSummary(): CompileDirectiveSummary {
+    return {
+      summaryKind: CompileSummaryKind.Directive,
+      type: this.type,
+      isComponent: this.isComponent,
+      selector: this.selector,
+      exportAs: this.exportAs,
+      inputs: this.inputs,
+      outputs: this.outputs,
+      hostListeners: this.hostListeners,
+      hostProperties: this.hostProperties,
+      hostAttributes: this.hostAttributes,
+      providers: this.providers,
+      viewProviders: this.viewProviders,
+      queries: this.queries,
+      guards: this.guards,
+      viewQueries: this.viewQueries,
+      entryComponents: this.entryComponents,
+      changeDetection: this.changeDetection,
+      template: this.template && this.template.toSummary(),
+      componentViewType: this.componentViewType,
+      rendererType: this.rendererType,
+      componentFactory: this.componentFactory
+    };
+  }
+}
+
+export interface CompilePipeSummary extends CompileTypeSummary {
+  type: CompileTypeMetadata;
+  name: string;
+  pure: boolean;
+}
+
+export class CompilePipeMetadata {
+  type: CompileTypeMetadata;
+  name: string;
+  pure: boolean;
+
+  constructor({type, name, pure}: {
+    type: CompileTypeMetadata,
+    name: string,
+    pure: boolean,
+  }) {
+    this.type = type;
+    this.name = name;
+    this.pure = !!pure;
+  }
+
+  toSummary(): CompilePipeSummary {
+    return {
+      summaryKind: CompileSummaryKind.Pipe,
+      type: this.type,
+      name: this.name,
+      pure: this.pure
+    };
+  }
+}
+
+// Note: This should only use interfaces as nested data types
+// as we need to be able to serialize this from/to JSON!
+export interface CompileNgModuleSummary extends CompileTypeSummary {
+  type: CompileTypeMetadata;
+
+  // Note: This is transitive over the exported modules.
+  exportedDirectives: CompileIdentifierMetadata[];
+  // Note: This is transitive over the exported modules.
+  exportedPipes: CompileIdentifierMetadata[];
+
+  // Note: This is transitive.
+  entryComponents: CompileEntryComponentMetadata[];
+  // Note: This is transitive.
+  providers: {provider: CompileProviderMetadata, module: CompileIdentifierMetadata}[];
+  // Note: This is transitive.
+  modules: CompileTypeMetadata[];
+}
+
+export class CompileShallowModuleMetadata {
+  // TODO(issue/24571): remove '!'.
+  type !: CompileTypeMetadata;
+
+  rawExports: any;
+  rawImports: any;
+  rawProviders: any;
+}
+
+/**
+ * Metadata regarding compilation of a module.
+ */
+export class CompileNgModuleMetadata {
+  type: CompileTypeMetadata;
+  declaredDirectives: CompileIdentifierMetadata[];
+  exportedDirectives: CompileIdentifierMetadata[];
+  declaredPipes: CompileIdentifierMetadata[];
+
+  exportedPipes: CompileIdentifierMetadata[];
+  entryComponents: CompileEntryComponentMetadata[];
+  bootstrapComponents: CompileIdentifierMetadata[];
+  providers: CompileProviderMetadata[];
+
+  importedModules: CompileNgModuleSummary[];
+  exportedModules: CompileNgModuleSummary[];
+  schemas: SchemaMetadata[];
+  id: string|null;
+
+  transitiveModule: TransitiveCompileNgModuleMetadata;
+
+  constructor({type, providers, declaredDirectives, exportedDirectives, declaredPipes,
+               exportedPipes, entryComponents, bootstrapComponents, importedModules,
+               exportedModules, schemas, transitiveModule, id}: {
+    type: CompileTypeMetadata,
+    providers: CompileProviderMetadata[],
+    declaredDirectives: CompileIdentifierMetadata[],
+    exportedDirectives: CompileIdentifierMetadata[],
+    declaredPipes: CompileIdentifierMetadata[],
+    exportedPipes: CompileIdentifierMetadata[],
+    entryComponents: CompileEntryComponentMetadata[],
+    bootstrapComponents: CompileIdentifierMetadata[],
+    importedModules: CompileNgModuleSummary[],
+    exportedModules: CompileNgModuleSummary[],
+    transitiveModule: TransitiveCompileNgModuleMetadata,
+    schemas: SchemaMetadata[],
+    id: string|null
+  }) {
+    this.type = type || null;
+    this.declaredDirectives = _normalizeArray(declaredDirectives);
+    this.exportedDirectives = _normalizeArray(exportedDirectives);
+    this.declaredPipes = _normalizeArray(declaredPipes);
+    this.exportedPipes = _normalizeArray(exportedPipes);
+    this.providers = _normalizeArray(providers);
+    this.entryComponents = _normalizeArray(entryComponents);
+    this.bootstrapComponents = _normalizeArray(bootstrapComponents);
+    this.importedModules = _normalizeArray(importedModules);
+    this.exportedModules = _normalizeArray(exportedModules);
+    this.schemas = _normalizeArray(schemas);
+    this.id = id || null;
+    this.transitiveModule = transitiveModule || null;
+  }
+
+  toSummary(): CompileNgModuleSummary {
+    const module = this.transitiveModule !;
+    return {
+      summaryKind: CompileSummaryKind.NgModule,
+      type: this.type,
+      entryComponents: module.entryComponents,
+      providers: module.providers,
+      modules: module.modules,
+      exportedDirectives: module.exportedDirectives,
+      exportedPipes: module.exportedPipes
+    };
+  }
+}
+
+export class TransitiveCompileNgModuleMetadata {
+  directivesSet = new Set<any>();
+  directives: CompileIdentifierMetadata[] = [];
+  exportedDirectivesSet = new Set<any>();
+  exportedDirectives: CompileIdentifierMetadata[] = [];
+  pipesSet = new Set<any>();
+  pipes: CompileIdentifierMetadata[] = [];
+  exportedPipesSet = new Set<any>();
+  exportedPipes: CompileIdentifierMetadata[] = [];
+  modulesSet = new Set<any>();
+  modules: CompileTypeMetadata[] = [];
+  entryComponentsSet = new Set<any>();
+  entryComponents: CompileEntryComponentMetadata[] = [];
+
+  providers: {provider: CompileProviderMetadata, module: CompileIdentifierMetadata}[] = [];
+
+  addProvider(provider: CompileProviderMetadata, module: CompileIdentifierMetadata) {
+    this.providers.push({provider: provider, module: module});
+  }
+
+  addDirective(id: CompileIdentifierMetadata) {
+    if (!this.directivesSet.has(id.reference)) {
+      this.directivesSet.add(id.reference);
+      this.directives.push(id);
+    }
+  }
+  addExportedDirective(id: CompileIdentifierMetadata) {
+    if (!this.exportedDirectivesSet.has(id.reference)) {
+      this.exportedDirectivesSet.add(id.reference);
+      this.exportedDirectives.push(id);
+    }
+  }
+  addPipe(id: CompileIdentifierMetadata) {
+    if (!this.pipesSet.has(id.reference)) {
+      this.pipesSet.add(id.reference);
+      this.pipes.push(id);
+    }
+  }
+  addExportedPipe(id: CompileIdentifierMetadata) {
+    if (!this.exportedPipesSet.has(id.reference)) {
+      this.exportedPipesSet.add(id.reference);
+      this.exportedPipes.push(id);
+    }
+  }
+  addModule(id: CompileTypeMetadata) {
+    if (!this.modulesSet.has(id.reference)) {
+      this.modulesSet.add(id.reference);
+      this.modules.push(id);
+    }
+  }
+  addEntryComponent(ec: CompileEntryComponentMetadata) {
+    if (!this.entryComponentsSet.has(ec.componentType)) {
+      this.entryComponentsSet.add(ec.componentType);
+      this.entryComponents.push(ec);
+    }
+  }
+}
+
+function _normalizeArray(obj: any[] | undefined | null): any[] {
+  return obj || [];
+}
+
+export class ProviderMeta {
+  token: any;
+  useClass: Type|null;
+  useValue: any;
+  useExisting: any;
+  useFactory: Function|null;
+  dependencies: Object[]|null;
+  multi: boolean;
+
+  constructor(token: any, {useClass, useValue, useExisting, useFactory, deps, multi}: {
+    useClass?: Type,
+    useValue?: any,
+    useExisting?: any,
+    useFactory?: Function|null,
+    deps?: Object[]|null,
+    multi?: boolean
+  }) {
+    this.token = token;
+    this.useClass = useClass || null;
+    this.useValue = useValue;
+    this.useExisting = useExisting;
+    this.useFactory = useFactory || null;
+    this.dependencies = deps || null;
+    this.multi = !!multi;
+  }
+}
+
+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);
+  }, []);
+}
+
+function jitSourceUrl(url: string) {
+  // Note: We need 3 "/" so that ng shows up as a separate domain
+  // in the chrome dev tools.
+  return url.replace(/(\w+:\/\/[\w:-]+)?(\/+)?/, 'ng:///');
+}
+
+export function templateSourceUrl(
+    ngModuleType: CompileIdentifierMetadata, compMeta: {type: CompileIdentifierMetadata},
+    templateMeta: {isInline: boolean, templateUrl: string | null}) {
+  let url: string;
+  if (templateMeta.isInline) {
+    if (compMeta.type.reference instanceof StaticSymbol) {
+      // Note: a .ts file might contain multiple components with inline templates,
+      // so we need to give them unique urls, as these will be used for sourcemaps.
+      url = `${compMeta.type.reference.filePath}.${compMeta.type.reference.name}.html`;
+    } else {
+      url = `${identifierName(ngModuleType)}/${identifierName(compMeta.type)}.html`;
+    }
+  } else {
+    url = templateMeta.templateUrl !;
+  }
+  return compMeta.type.reference instanceof StaticSymbol ? url : jitSourceUrl(url);
+}
+
+export function sharedStylesheetJitUrl(meta: CompileStylesheetMetadata, id: number) {
+  const pathParts = meta.moduleUrl !.split(/\/\\/g);
+  const baseName = pathParts[pathParts.length - 1];
+  return jitSourceUrl(`css/${id}${baseName}.ngstyle.js`);
+}
+
+export function ngModuleJitUrl(moduleMeta: CompileNgModuleMetadata): string {
+  return jitSourceUrl(`${identifierName(moduleMeta.type)}/module.ngfactory.js`);
+}
+
+export function templateJitUrl(
+    ngModuleType: CompileIdentifierMetadata, compMeta: CompileDirectiveMetadata): string {
+  return jitSourceUrl(
+      `${identifierName(ngModuleType)}/${identifierName(compMeta.type)}.ngfactory.js`);
+}
diff --git a/packages/compiler/src/compile_reflector.ts b/packages/compiler/src/compile_reflector.ts
new file mode 100644
index 000000000000..c6ffc9fed4b3
--- /dev/null
+++ b/packages/compiler/src/compile_reflector.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 './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 shallowAnnotations(typeOrFunc: /*Type*/ any): any[];
+  abstract tryAnnotations(typeOrFunc: /*Type*/ any): any[];
+  abstract propMetadata(typeOrFunc: /*Type*/ any): {[key: string]: any[]};
+  abstract hasLifecycleHook(type: any, lcProperty: string): boolean;
+  abstract guards(typeOrFunc: /* Type */ any): {[key: string]: any};
+  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
new file mode 100644
index 000000000000..75d0e561f7f6
--- /dev/null
+++ b/packages/compiler/src/compiler.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 APIs of the compiler package.
+ *
+ * <div class="callout is-critical">
+ *   <header>Unstable APIs</header>
+ *   <p>
+ *     All compiler apis are currently considered experimental and private!
+ *   </p>
+ *   <p>
+ *     We expect the APIs in this package to keep on changing. Do not rely on them.
+ *   </p>
+ * </div>
+ */
+
+import * as core from './core';
+
+export {core};
+
+export * from './version';
+export * from './template_parser/template_ast';
+export {CompilerConfig, preserveWhitespacesDefault} from './config';
+export * from './compile_metadata';
+export * from './aot/compiler_factory';
+export * from './aot/compiler';
+export * from './aot/generated_file';
+export * from './aot/compiler_options';
+export * from './aot/compiler_host';
+export * from './aot/formatted_error';
+export * from './aot/partial_module';
+export * from './aot/static_reflector';
+export * from './aot/static_symbol';
+export * from './aot/static_symbol_resolver';
+export * from './aot/summary_resolver';
+export {isLoweredSymbol, createLoweredSymbol} from './aot/util';
+export {LazyRoute} from './aot/lazy_routes';
+export * from './ast_path';
+export * from './summary_resolver';
+export {Identifiers} from './identifiers';
+export {JitCompiler} from './jit/compiler';
+export * from './compile_reflector';
+export * from './url_resolver';
+export * from './resource_loader';
+export {ConstantPool} from './constant_pool';
+export {DirectiveResolver} from './directive_resolver';
+export {PipeResolver} from './pipe_resolver';
+export {NgModuleResolver} from './ng_module_resolver';
+export {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from './ml_parser/interpolation_config';
+export * from './schema/element_schema_registry';
+export * from './i18n/index';
+export * from './directive_normalizer';
+export * from './expression_parser/ast';
+export * from './expression_parser/lexer';
+export * from './expression_parser/parser';
+export * from './metadata_resolver';
+export * from './ml_parser/ast';
+export * from './ml_parser/html_parser';
+export * from './ml_parser/html_tags';
+export * from './ml_parser/interpolation_config';
+export * from './ml_parser/tags';
+export {NgModuleCompiler} from './ng_module_compiler';
+export {ArrayType, AssertNotNull, BinaryOperator, BinaryOperatorExpr, BuiltinMethod, BuiltinType, BuiltinTypeName, BuiltinVar, CastExpr, ClassField, ClassMethod, ClassStmt, CommaExpr, CommentStmt, ConditionalExpr, DeclareFunctionStmt, DeclareVarStmt, Expression, ExpressionStatement, ExpressionType, ExpressionVisitor, ExternalExpr, ExternalReference, FunctionExpr, IfStmt, InstantiateExpr, InvokeFunctionExpr, InvokeMethodExpr, JSDocCommentStmt, LiteralArrayExpr, LiteralExpr, LiteralMapExpr, MapType, NotExpr, ReadKeyExpr, ReadPropExpr, ReadVarExpr, ReturnStatement, StatementVisitor, ThrowStmt, TryCatchStmt, Type, TypeVisitor, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr, StmtModifier, Statement, TypeofExpr, collectExternalReferences} 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';
+export * from './selector';
+export * from './style_compiler';
+export * from './template_parser/template_parser';
+export {ViewCompiler} from './view_compiler/view_compiler';
+export {getParseErrors, isSyntaxError, syntaxError, Version} from './util';
+export {SourceMap} from './output/source_map';
+export * from './injectable_compiler_2';
+export * from './render3/view/api';
+export {jitExpression} from './render3/r3_jit';
+export {R3DependencyMetadata, R3FactoryMetadata, R3ResolvedDependencyType} from './render3/r3_factory';
+export {compileInjector, compileNgModule, R3InjectorMetadata, R3NgModuleMetadata} from './render3/r3_module_compiler';
+export {compilePipeFromMetadata, R3PipeMetadata} from './render3/r3_pipe_compiler';
+export {makeBindingParser, parseTemplate} from './render3/view/template';
+export {R3Reference} from './render3/util';
+export {compileBaseDefFromMetadata, R3BaseRefMetaData, compileComponentFromMetadata, compileDirectiveFromMetadata, parseHostBindings} from './render3/view/compiler';
+// 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
new file mode 100644
index 000000000000..84d3c8639e25
--- /dev/null
+++ b/packages/compiler/src/compiler_util/expression_converter.ts
@@ -0,0 +1,708 @@
+/**
+ * @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 cdAst from '../expression_parser/ast';
+import {Identifiers} from '../identifiers';
+import * as o from '../output/output_ast';
+
+export class EventHandlerVars { static event = o.variable('$event'); }
+
+export interface LocalResolver { getLocal(name: string): o.Expression|null; }
+
+export class ConvertActionBindingResult {
+  /**
+   * Store statements which are render3 compatible.
+   */
+  render3Stmts: o.Statement[];
+  constructor(
+      /**
+       * Render2 compatible statements,
+       */
+      public stmts: o.Statement[],
+      /**
+       * Variable name used with render2 compatible statements.
+       */
+      public allowDefault: o.ReadVarExpr) {
+    /**
+     * This is bit of a hack. It converts statements which render2 expects to statements which are
+     * expected by render3.
+     *
+     * Example: `<div click="doSomething($event)">` will generate:
+     *
+     * Render3:
+     * ```
+     * const pd_b:any = ((<any>ctx.doSomething($event)) !== false);
+     * return pd_b;
+     * ```
+     *
+     * but render2 expects:
+     * ```
+     * return ctx.doSomething($event);
+     * ```
+     */
+    // TODO(misko): remove this hack once we no longer support ViewEngine.
+    this.render3Stmts = stmts.map((statement: o.Statement) => {
+      if (statement instanceof o.DeclareVarStmt && statement.name == allowDefault.name &&
+          statement.value instanceof o.BinaryOperatorExpr) {
+        const lhs = statement.value.lhs as o.CastExpr;
+        return new o.ReturnStatement(lhs.value);
+      }
+      return statement;
+    });
+  }
+}
+
+export type InterpolationFunction = (args: o.Expression[]) => o.Expression;
+
+/**
+ * Converts the given expression AST into an executable output AST, assuming the expression is
+ * used in an action binding (e.g. an event handler).
+ */
+export function convertActionBinding(
+    localResolver: LocalResolver | null, implicitReceiver: o.Expression, action: cdAst.AST,
+    bindingId: string, interpolationFunction?: InterpolationFunction): ConvertActionBindingResult {
+  if (!localResolver) {
+    localResolver = new DefaultLocalResolver();
+  }
+  const actionWithoutBuiltins = convertPropertyBindingBuiltins(
+      {
+        createLiteralArrayConverter: (argCount: number) => {
+          // Note: no caching for literal arrays in actions.
+          return (args: o.Expression[]) => o.literalArr(args);
+        },
+        createLiteralMapConverter: (keys: {key: string, quoted: boolean}[]) => {
+          // Note: no caching for literal maps in actions.
+          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}`);
+        }
+      },
+      action);
+
+  const visitor =
+      new _AstToIrVisitor(localResolver, implicitReceiver, bindingId, interpolationFunction);
+  const actionStmts: o.Statement[] = [];
+  flattenStatements(actionWithoutBuiltins.visit(visitor, _Mode.Statement), actionStmts);
+  prependTemporaryDecls(visitor.temporaryCount, bindingId, actionStmts);
+  const lastIndex = actionStmts.length - 1;
+  let preventDefaultVar: o.ReadVarExpr = null !;
+  if (lastIndex >= 0) {
+    const lastStatement = actionStmts[lastIndex];
+    const returnExpr = convertStmtIntoExpression(lastStatement);
+    if (returnExpr) {
+      // Note: We need to cast the result of the method call to dynamic,
+      // as it might be a void method!
+      preventDefaultVar = createPreventDefaultVar(bindingId);
+      actionStmts[lastIndex] =
+          preventDefaultVar.set(returnExpr.cast(o.DYNAMIC_TYPE).notIdentical(o.literal(false)))
+              .toDeclStmt(null, [o.StmtModifier.Final]);
+    }
+  }
+  return new ConvertActionBindingResult(actionStmts, preventDefaultVar);
+}
+
+export interface BuiltinConverter { (args: o.Expression[]): o.Expression; }
+
+export interface BuiltinConverterFactory {
+  createLiteralArrayConverter(argCount: number): BuiltinConverter;
+  createLiteralMapConverter(keys: {key: string, quoted: boolean}[]): BuiltinConverter;
+  createPipeConverter(name: string, argCount: number): BuiltinConverter;
+}
+
+export function convertPropertyBindingBuiltins(
+    converterFactory: BuiltinConverterFactory, ast: cdAst.AST): cdAst.AST {
+  return convertBuiltins(converterFactory, ast);
+}
+
+export class ConvertPropertyBindingResult {
+  constructor(public stmts: o.Statement[], public currValExpr: o.Expression) {}
+}
+
+export enum BindingForm {
+  // The general form of binding expression, supports all expressions.
+  General,
+
+  // Try to generate a simple binding (no temporaries or statements)
+  // otherwise generate a general binding
+  TrySimple,
+}
+
+/**
+ * Converts the given expression AST into an executable output AST, assuming the expression
+ * is used in property binding. The expression has to be preprocessed via
+ * `convertPropertyBindingBuiltins`.
+ */
+export function convertPropertyBinding(
+    localResolver: LocalResolver | null, implicitReceiver: o.Expression,
+    expressionWithoutBuiltins: cdAst.AST, bindingId: string, form: BindingForm,
+    interpolationFunction?: InterpolationFunction): ConvertPropertyBindingResult {
+  if (!localResolver) {
+    localResolver = new DefaultLocalResolver();
+  }
+  const currValExpr = createCurrValueExpr(bindingId);
+  const stmts: o.Statement[] = [];
+  const visitor =
+      new _AstToIrVisitor(localResolver, implicitReceiver, bindingId, interpolationFunction);
+  const outputExpr: o.Expression = expressionWithoutBuiltins.visit(visitor, _Mode.Expression);
+
+  if (visitor.temporaryCount) {
+    for (let i = 0; i < visitor.temporaryCount; i++) {
+      stmts.push(temporaryDeclaration(bindingId, i));
+    }
+  } else if (form == BindingForm.TrySimple) {
+    return new ConvertPropertyBindingResult([], outputExpr);
+  }
+
+  stmts.push(currValExpr.set(outputExpr).toDeclStmt(o.DYNAMIC_TYPE, [o.StmtModifier.Final]));
+  return new ConvertPropertyBindingResult(stmts, currValExpr);
+}
+
+function convertBuiltins(converterFactory: BuiltinConverterFactory, ast: cdAst.AST): cdAst.AST {
+  const visitor = new _BuiltinAstConverter(converterFactory);
+  return ast.visit(visitor);
+}
+
+function temporaryName(bindingId: string, temporaryNumber: number): string {
+  return `tmp_${bindingId}_${temporaryNumber}`;
+}
+
+export function temporaryDeclaration(bindingId: string, temporaryNumber: number): o.Statement {
+  return new o.DeclareVarStmt(temporaryName(bindingId, temporaryNumber), o.NULL_EXPR);
+}
+
+function prependTemporaryDecls(
+    temporaryCount: number, bindingId: string, statements: o.Statement[]) {
+  for (let i = temporaryCount - 1; i >= 0; i--) {
+    statements.unshift(temporaryDeclaration(bindingId, i));
+  }
+}
+
+enum _Mode {
+  Statement,
+  Expression
+}
+
+function ensureStatementMode(mode: _Mode, ast: cdAst.AST) {
+  if (mode !== _Mode.Statement) {
+    throw new Error(`Expected a statement, but saw ${ast}`);
+  }
+}
+
+function ensureExpressionMode(mode: _Mode, ast: cdAst.AST) {
+  if (mode !== _Mode.Expression) {
+    throw new Error(`Expected an expression, but saw ${ast}`);
+  }
+}
+
+function convertToStatementIfNeeded(mode: _Mode, expr: o.Expression): o.Expression|o.Statement {
+  if (mode === _Mode.Statement) {
+    return expr.toStmt();
+  } else {
+    return expr;
+  }
+}
+
+class _BuiltinAstConverter extends cdAst.AstTransformer {
+  constructor(private _converterFactory: BuiltinConverterFactory) { super(); }
+  visitPipe(ast: cdAst.BindingPipe, context: any): any {
+    const args = [ast.exp, ...ast.args].map(ast => ast.visit(this, context));
+    return new BuiltinFunctionCall(
+        ast.span, args, this._converterFactory.createPipeConverter(ast.name, args.length));
+  }
+  visitLiteralArray(ast: cdAst.LiteralArray, context: any): any {
+    const args = ast.expressions.map(ast => ast.visit(this, context));
+    return new BuiltinFunctionCall(
+        ast.span, args, this._converterFactory.createLiteralArrayConverter(ast.expressions.length));
+  }
+  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));
+  }
+}
+
+class _AstToIrVisitor implements cdAst.AstVisitor {
+  private _nodeMap = new Map<cdAst.AST, cdAst.AST>();
+  private _resultMap = new Map<cdAst.AST, o.Expression>();
+  private _currentTemporary: number = 0;
+  public temporaryCount: number = 0;
+
+  constructor(
+      private _localResolver: LocalResolver, private _implicitReceiver: o.Expression,
+      private bindingId: string, private interpolationFunction: InterpolationFunction|undefined) {}
+
+  visitBinary(ast: cdAst.Binary, mode: _Mode): any {
+    let op: o.BinaryOperator;
+    switch (ast.operation) {
+      case '+':
+        op = o.BinaryOperator.Plus;
+        break;
+      case '-':
+        op = o.BinaryOperator.Minus;
+        break;
+      case '*':
+        op = o.BinaryOperator.Multiply;
+        break;
+      case '/':
+        op = o.BinaryOperator.Divide;
+        break;
+      case '%':
+        op = o.BinaryOperator.Modulo;
+        break;
+      case '&&':
+        op = o.BinaryOperator.And;
+        break;
+      case '||':
+        op = o.BinaryOperator.Or;
+        break;
+      case '==':
+        op = o.BinaryOperator.Equals;
+        break;
+      case '!=':
+        op = o.BinaryOperator.NotEquals;
+        break;
+      case '===':
+        op = o.BinaryOperator.Identical;
+        break;
+      case '!==':
+        op = o.BinaryOperator.NotIdentical;
+        break;
+      case '<':
+        op = o.BinaryOperator.Lower;
+        break;
+      case '>':
+        op = o.BinaryOperator.Bigger;
+        break;
+      case '<=':
+        op = o.BinaryOperator.LowerEquals;
+        break;
+      case '>=':
+        op = o.BinaryOperator.BiggerEquals;
+        break;
+      default:
+        throw new Error(`Unsupported operation ${ast.operation}`);
+    }
+
+    return convertToStatementIfNeeded(
+        mode,
+        new o.BinaryOperatorExpr(
+            op, this._visit(ast.left, _Mode.Expression), this._visit(ast.right, _Mode.Expression)));
+  }
+
+  visitChain(ast: cdAst.Chain, mode: _Mode): any {
+    ensureStatementMode(mode, ast);
+    return this.visitAll(ast.expressions, mode);
+  }
+
+  visitConditional(ast: cdAst.Conditional, mode: _Mode): any {
+    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)));
+  }
+
+  visitPipe(ast: cdAst.BindingPipe, mode: _Mode): any {
+    throw new Error(
+        `Illegal state: Pipes should have been converted into functions. Pipe: ${ast.name}`);
+  }
+
+  visitFunctionCall(ast: cdAst.FunctionCall, mode: _Mode): any {
+    const convertedArgs = this.visitAll(ast.args, _Mode.Expression);
+    let fnResult: o.Expression;
+    if (ast instanceof BuiltinFunctionCall) {
+      fnResult = ast.converter(convertedArgs);
+    } else {
+      fnResult = this._visit(ast.target !, _Mode.Expression).callFn(convertedArgs);
+    }
+    return convertToStatementIfNeeded(mode, fnResult);
+  }
+
+  visitImplicitReceiver(ast: cdAst.ImplicitReceiver, mode: _Mode): any {
+    ensureExpressionMode(mode, ast);
+    return this._implicitReceiver;
+  }
+
+  visitInterpolation(ast: cdAst.Interpolation, mode: _Mode): any {
+    ensureExpressionMode(mode, ast);
+    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(o.literal(ast.strings[ast.strings.length - 1]));
+
+    if (this.interpolationFunction) {
+      return this.interpolationFunction(args);
+    }
+    return ast.expressions.length <= 9 ?
+        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 {
+    const leftMostSafe = this.leftMostSafeNode(ast);
+    if (leftMostSafe) {
+      return this.convertSafeAccess(ast, leftMostSafe, mode);
+    } else {
+      return convertToStatementIfNeeded(
+          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);
+    return convertToStatementIfNeeded(mode, obj.key(key).set(value));
+  }
+
+  visitLiteralArray(ast: cdAst.LiteralArray, mode: _Mode): any {
+    throw new Error(`Illegal State: literal arrays should have been converted into functions`);
+  }
+
+  visitLiteralMap(ast: cdAst.LiteralMap, mode: _Mode): any {
+    throw new Error(`Illegal State: literal maps should have been converted into functions`);
+  }
+
+  visitLiteralPrimitive(ast: cdAst.LiteralPrimitive, mode: _Mode): any {
+    // For literal values of null, undefined, true, or false allow type interference
+    // to infer the type.
+    const type =
+        ast.value === null || ast.value === undefined || ast.value === true || ast.value === true ?
+        o.INFERRED_TYPE :
+        undefined;
+    return convertToStatementIfNeeded(mode, o.literal(ast.value, type));
+  }
+
+  private _getLocal(name: string): o.Expression|null { return this._localResolver.getLocal(name); }
+
+  visitMethodCall(ast: cdAst.MethodCall, mode: _Mode): any {
+    if (ast.receiver instanceof cdAst.ImplicitReceiver && ast.name == '$any') {
+      const args = this.visitAll(ast.args, _Mode.Expression) as any[];
+      if (args.length != 1) {
+        throw new Error(
+            `Invalid call to $any, expected 1 argument but received ${args.length || 'none'}`);
+      }
+      return (args[0] as o.Expression).cast(o.DYNAMIC_TYPE);
+    }
+
+    const leftMostSafe = this.leftMostSafeNode(ast);
+    if (leftMostSafe) {
+      return this.convertSafeAccess(ast, leftMostSafe, mode);
+    } else {
+      const args = this.visitAll(ast.args, _Mode.Expression);
+      let result: any = null;
+      const receiver = this._visit(ast.receiver, _Mode.Expression);
+      if (receiver === this._implicitReceiver) {
+        const varExpr = this._getLocal(ast.name);
+        if (varExpr) {
+          result = varExpr.callFn(args);
+        }
+      }
+      if (result == null) {
+        result = receiver.callMethod(ast.name, args);
+      }
+      return convertToStatementIfNeeded(mode, result);
+    }
+  }
+
+  visitPrefixNot(ast: cdAst.PrefixNot, mode: _Mode): any {
+    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 {
+    const leftMostSafe = this.leftMostSafeNode(ast);
+    if (leftMostSafe) {
+      return this.convertSafeAccess(ast, leftMostSafe, mode);
+    } else {
+      let result: any = null;
+      const receiver = this._visit(ast.receiver, _Mode.Expression);
+      if (receiver === this._implicitReceiver) {
+        result = this._getLocal(ast.name);
+      }
+      if (result == null) {
+        result = receiver.prop(ast.name);
+      }
+      return convertToStatementIfNeeded(mode, result);
+    }
+  }
+
+  visitPropertyWrite(ast: cdAst.PropertyWrite, mode: _Mode): any {
+    const receiver: o.Expression = this._visit(ast.receiver, _Mode.Expression);
+
+    let varExpr: o.ReadPropExpr|null = null;
+    if (receiver === this._implicitReceiver) {
+      const localExpr = this._getLocal(ast.name);
+      if (localExpr) {
+        if (localExpr instanceof o.ReadPropExpr) {
+          // If the local variable is a property read expression, it's a reference
+          // to a 'context.property' value and will be used as the target of the
+          // write expression.
+          varExpr = localExpr;
+        } else {
+          // Otherwise it's an error.
+          throw new Error('Cannot assign to a reference or variable!');
+        }
+      }
+    }
+    // If no local expression could be produced, use the original receiver's
+    // property as the target.
+    if (varExpr === null) {
+      varExpr = receiver.prop(ast.name);
+    }
+    return convertToStatementIfNeeded(mode, varExpr.set(this._visit(ast.value, _Mode.Expression)));
+  }
+
+  visitSafePropertyRead(ast: cdAst.SafePropertyRead, mode: _Mode): any {
+    return this.convertSafeAccess(ast, this.leftMostSafeNode(ast), mode);
+  }
+
+  visitSafeMethodCall(ast: cdAst.SafeMethodCall, mode: _Mode): any {
+    return this.convertSafeAccess(ast, this.leftMostSafeNode(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!
+        Statement: ${ast.uninterpretedExpression} located at ${ast.location}`);
+  }
+
+  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);
+  }
+
+  private convertSafeAccess(
+      ast: cdAst.AST, leftMostSafe: cdAst.SafeMethodCall|cdAst.SafePropertyRead, mode: _Mode): any {
+    // If the expression contains a safe access node on the left it needs to be converted to
+    // an expression that guards the access to the member by checking the receiver for blank. As
+    // execution proceeds from left to right, the left most part of the expression must be guarded
+    // first but, because member access is left associative, the right side of the expression is at
+    // the top of the AST. The desired result requires lifting a copy of the the left part of the
+    // expression up to test it for blank before generating the unguarded version.
+
+    // Consider, for example the following expression: a?.b.c?.d.e
+
+    // This results in the ast:
+    //         .
+    //        / \
+    //       ?.   e
+    //      /  \
+    //     .    d
+    //    / \
+    //   ?.  c
+    //  /  \
+    // a    b
+
+    // The following tree should be generated:
+    //
+    //        /---- ? ----\
+    //       /      |      \
+    //     a   /--- ? ---\  null
+    //        /     |     \
+    //       .      .     null
+    //      / \    / \
+    //     .  c   .   e
+    //    / \    / \
+    //   a   b  ,   d
+    //         / \
+    //        .   c
+    //       / \
+    //      a   b
+    //
+    // 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 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
+      // temporary variable to avoid calling stateful or impure code more than once.
+      temporary = this.allocateTemporary();
+
+      // Preserve the result in the temporary variable
+      guardedExpression = temporary.set(guardedExpression);
+
+      // Ensure all further references to the guarded expression refer to the temporary instead.
+      this._resultMap.set(leftMostSafe.receiver, temporary);
+    }
+    const condition = guardedExpression.isBlank();
+
+    // Convert the ast to an unguarded access to the receiver's member. The map will substitute
+    // leftMostNode with its unguarded version in the call to `this.visit()`.
+    if (leftMostSafe instanceof cdAst.SafeMethodCall) {
+      this._nodeMap.set(
+          leftMostSafe,
+          new cdAst.MethodCall(
+              leftMostSafe.span, leftMostSafe.receiver, leftMostSafe.name, leftMostSafe.args));
+    } else {
+      this._nodeMap.set(
+          leftMostSafe,
+          new cdAst.PropertyRead(leftMostSafe.span, leftMostSafe.receiver, leftMostSafe.name));
+    }
+
+    // Recursively convert the node now without the guarded member access.
+    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.
+    this._nodeMap.delete(leftMostSafe);
+
+    // If we allocated a temporary, release it.
+    if (temporary) {
+      this.releaseTemporary(temporary);
+    }
+
+    // Produce the conditional
+    return convertToStatementIfNeeded(mode, condition.conditional(o.literal(null), access));
+  }
+
+  // Given a expression of the form a?.b.c?.d.e the the left most safe node is
+  // the (a?.b). The . and ?. are left associative thus can be rewritten as:
+  // ((((a?.c).b).c)?.d).e. This returns the most deeply nested safe read or
+  // safe method call as this needs be transform initially to:
+  //   a == null ? null : a.c.b.c?.d.e
+  // then to:
+  //   a == null ? null : a.b.c == null ? null : a.b.c.d.e
+  private leftMostSafeNode(ast: cdAst.AST): cdAst.SafePropertyRead|cdAst.SafeMethodCall {
+    const visit = (visitor: cdAst.AstVisitor, ast: cdAst.AST): any => {
+      return (this._nodeMap.get(ast) || ast).visit(visitor);
+    };
+    return ast.visit({
+      visitBinary(ast: cdAst.Binary) { return null; },
+      visitChain(ast: cdAst.Chain) { return null; },
+      visitConditional(ast: cdAst.Conditional) { return null; },
+      visitFunctionCall(ast: cdAst.FunctionCall) { return null; },
+      visitImplicitReceiver(ast: cdAst.ImplicitReceiver) { return null; },
+      visitInterpolation(ast: cdAst.Interpolation) { return null; },
+      visitKeyedRead(ast: cdAst.KeyedRead) { return visit(this, ast.obj); },
+      visitKeyedWrite(ast: cdAst.KeyedWrite) { return null; },
+      visitLiteralArray(ast: cdAst.LiteralArray) { return null; },
+      visitLiteralMap(ast: cdAst.LiteralMap) { return null; },
+      visitLiteralPrimitive(ast: cdAst.LiteralPrimitive) { return null; },
+      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; },
+      visitSafeMethodCall(ast: cdAst.SafeMethodCall) { return visit(this, ast.receiver) || ast; },
+      visitSafePropertyRead(ast: cdAst.SafePropertyRead) {
+        return visit(this, ast.receiver) || ast;
+      }
+    });
+  }
+
+  // Returns true of the AST includes a method or a pipe indicating that, if the
+  // expression is used as the target of a safe property or method access then
+  // the expression should be stored into a temporary variable.
+  private needsTemporary(ast: cdAst.AST): boolean {
+    const visit = (visitor: cdAst.AstVisitor, ast: cdAst.AST): boolean => {
+      return ast && (this._nodeMap.get(ast) || ast).visit(visitor);
+    };
+    const visitSome = (visitor: cdAst.AstVisitor, ast: cdAst.AST[]): boolean => {
+      return ast.some(ast => visit(visitor, ast));
+    };
+    return ast.visit({
+      visitBinary(ast: cdAst.Binary):
+          boolean{return visit(this, ast.left) || visit(this, ast.right);},
+      visitChain(ast: cdAst.Chain) { return false; },
+      visitConditional(ast: cdAst.Conditional):
+          boolean{return visit(this, ast.condition) || visit(this, ast.trueExp) ||
+                      visit(this, ast.falseExp);},
+      visitFunctionCall(ast: cdAst.FunctionCall) { return true; },
+      visitImplicitReceiver(ast: cdAst.ImplicitReceiver) { return false; },
+      visitInterpolation(ast: cdAst.Interpolation) { return visitSome(this, ast.expressions); },
+      visitKeyedRead(ast: cdAst.KeyedRead) { return false; },
+      visitKeyedWrite(ast: cdAst.KeyedWrite) { return false; },
+      visitLiteralArray(ast: cdAst.LiteralArray) { return true; },
+      visitLiteralMap(ast: cdAst.LiteralMap) { return true; },
+      visitLiteralPrimitive(ast: cdAst.LiteralPrimitive) { return false; },
+      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; },
+      visitSafeMethodCall(ast: cdAst.SafeMethodCall) { return true; },
+      visitSafePropertyRead(ast: cdAst.SafePropertyRead) { return false; }
+    });
+  }
+
+  private allocateTemporary(): o.ReadVarExpr {
+    const tempNumber = this._currentTemporary++;
+    this.temporaryCount = Math.max(this._currentTemporary, this.temporaryCount);
+    return new o.ReadVarExpr(temporaryName(this.bindingId, tempNumber));
+  }
+
+  private releaseTemporary(temporary: o.ReadVarExpr) {
+    this._currentTemporary--;
+    if (temporary.name != temporaryName(this.bindingId, this._currentTemporary)) {
+      throw new Error(`Temporary ${temporary.name} released out of order`);
+    }
+  }
+}
+
+function flattenStatements(arg: any, output: o.Statement[]) {
+  if (Array.isArray(arg)) {
+    (<any[]>arg).forEach((entry) => flattenStatements(entry, output));
+  } else {
+    output.push(arg);
+  }
+}
+
+class DefaultLocalResolver implements LocalResolver {
+  getLocal(name: string): o.Expression|null {
+    if (name === EventHandlerVars.event.name) {
+      return EventHandlerVars.event;
+    }
+    return null;
+  }
+}
+
+function createCurrValueExpr(bindingId: string): o.ReadVarExpr {
+  return o.variable(`currVal_${bindingId}`);  // fix syntax highlighting: `
+}
+
+function createPreventDefaultVar(bindingId: string): o.ReadVarExpr {
+  return o.variable(`pd_${bindingId}`);
+}
+
+function convertStmtIntoExpression(stmt: o.Statement): o.Expression|null {
+  if (stmt instanceof o.ExpressionStatement) {
+    return stmt.expr;
+  } else if (stmt instanceof o.ReturnStatement) {
+    return stmt.value;
+  }
+  return null;
+}
+
+export class BuiltinFunctionCall extends cdAst.FunctionCall {
+  constructor(span: cdAst.ParseSpan, public args: cdAst.AST[], public converter: BuiltinConverter) {
+    super(span, null, args);
+  }
+}
diff --git a/packages/compiler/src/config.ts b/packages/compiler/src/config.ts
new file mode 100644
index 000000000000..4ffb52715c05
--- /dev/null
+++ b/packages/compiler/src/config.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
+ */
+
+import {CompileIdentifierMetadata} from './compile_metadata';
+import {MissingTranslationStrategy, ViewEncapsulation} from './core';
+import {Identifiers} from './identifiers';
+import * as o from './output/output_ast';
+import {noUndefined} from './util';
+
+export class CompilerConfig {
+  public defaultEncapsulation: ViewEncapsulation|null;
+  public useJit: boolean;
+  public jitDevMode: boolean;
+  public missingTranslation: MissingTranslationStrategy|null;
+  public preserveWhitespaces: boolean;
+  public strictInjectionParameters: boolean;
+
+  constructor(
+      {defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, jitDevMode = false,
+       missingTranslation = null, preserveWhitespaces, strictInjectionParameters}: {
+        defaultEncapsulation?: ViewEncapsulation,
+        useJit?: boolean,
+        jitDevMode?: boolean,
+        missingTranslation?: MissingTranslationStrategy,
+        preserveWhitespaces?: boolean,
+        strictInjectionParameters?: boolean,
+      } = {}) {
+    this.defaultEncapsulation = defaultEncapsulation;
+    this.useJit = !!useJit;
+    this.jitDevMode = !!jitDevMode;
+    this.missingTranslation = missingTranslation;
+    this.preserveWhitespaces = preserveWhitespacesDefault(noUndefined(preserveWhitespaces));
+    this.strictInjectionParameters = strictInjectionParameters === true;
+  }
+}
+
+export function preserveWhitespacesDefault(
+    preserveWhitespacesOption: boolean | null, defaultSetting = false): boolean {
+  return preserveWhitespacesOption === null ? defaultSetting : preserveWhitespacesOption;
+}
diff --git a/packages/compiler/src/constant_pool.ts b/packages/compiler/src/constant_pool.ts
new file mode 100644
index 000000000000..aa95cd0a8a68
--- /dev/null
+++ b/packages/compiler/src/constant_pool.ts
@@ -0,0 +1,347 @@
+/**
+ * @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 './output/output_ast';
+import {OutputContext, error} from './util';
+
+const CONSTANT_PREFIX = '_c';
+
+// Closure variables holding messages must be named `MSG_[A-Z0-9]+`
+const TRANSLATION_PREFIX = 'MSG_';
+
+export const enum DefinitionKind {Injector, Directive, Component, Pipe}
+
+/**
+ * Closure uses `goog.getMsg(message)` to lookup translations
+ */
+const GOOG_GET_MSG = 'goog.getMsg';
+
+/**
+ * Context to use when producing a key.
+ *
+ * This ensures we see the constant not the reference variable when producing
+ * a key.
+ */
+const KEY_CONTEXT = {};
+
+/**
+ * A node that is a place-holder that allows the node to be replaced when the actual
+ * node is known.
+ *
+ * This allows the constant pool to change an expression from a direct reference to
+ * a constant to a shared constant. It returns a fix-up node that is later allowed to
+ * change the referenced expression.
+ */
+class FixupExpression extends o.Expression {
+  private original: o.Expression;
+
+  // TODO(issue/24571): remove '!'.
+  shared !: boolean;
+
+  constructor(public resolved: o.Expression) {
+    super(resolved.type);
+    this.original = resolved;
+  }
+
+  visitExpression(visitor: o.ExpressionVisitor, context: any): any {
+    if (context === KEY_CONTEXT) {
+      // When producing a key we want to traverse the constant not the
+      // variable used to refer to it.
+      return this.original.visitExpression(visitor, context);
+    } else {
+      return this.resolved.visitExpression(visitor, context);
+    }
+  }
+
+  isEquivalent(e: o.Expression): boolean {
+    return e instanceof FixupExpression && this.resolved.isEquivalent(e.resolved);
+  }
+
+  isConstant() { return true; }
+
+  fixup(expression: o.Expression) {
+    this.resolved = expression;
+    this.shared = true;
+  }
+}
+
+/**
+ * A constant pool allows a code emitter to share constant in an output context.
+ *
+ * The constant pool also supports sharing access to ivy definitions references.
+ */
+export class ConstantPool {
+  statements: o.Statement[] = [];
+  private translations = new Map<string, o.Expression>();
+  private literals = new Map<string, FixupExpression>();
+  private literalFactories = new Map<string, o.Expression>();
+  private injectorDefinitions = new Map<any, FixupExpression>();
+  private directiveDefinitions = new Map<any, FixupExpression>();
+  private componentDefinitions = new Map<any, FixupExpression>();
+  private pipeDefinitions = new Map<any, FixupExpression>();
+
+  private nextNameIndex = 0;
+
+  getConstLiteral(literal: o.Expression, forceShared?: boolean): o.Expression {
+    if (literal instanceof o.LiteralExpr || literal instanceof FixupExpression) {
+      // Do no put simple literals into the constant pool or try to produce a constant for a
+      // reference to a constant.
+      return literal;
+    }
+    const key = this.keyOf(literal);
+    let fixup = this.literals.get(key);
+    let newValue = false;
+    if (!fixup) {
+      fixup = new FixupExpression(literal);
+      this.literals.set(key, fixup);
+      newValue = true;
+    }
+
+    if ((!newValue && !fixup.shared) || (newValue && forceShared)) {
+      // Replace the expression with a variable
+      const name = this.freshName();
+      this.statements.push(
+          o.variable(name).set(literal).toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
+      fixup.fixup(o.variable(name));
+    }
+
+    return fixup;
+  }
+
+  // Generates closure specific code for translation.
+  //
+  // ```
+  // /**
+  //  * @desc description?
+  //  * @meaning meaning?
+  //  */
+  // const MSG_XYZ = goog.getMsg('message');
+  // ```
+  getTranslation(message: string, meta: {description?: string, meaning?: string}): o.Expression {
+    // The identity of an i18n message depends on the message and its meaning
+    const key = meta.meaning ? `${message}\u0000\u0000${meta.meaning}` : message;
+
+    const exp = this.translations.get(key);
+
+    if (exp) {
+      return exp;
+    }
+
+    const docStmt = i18nMetaToDocStmt(meta);
+    if (docStmt) {
+      this.statements.push(docStmt);
+    }
+
+    // Call closure to get the translation
+    const variable = o.variable(this.freshTranslationName());
+    const fnCall = o.variable(GOOG_GET_MSG).callFn([o.literal(message)]);
+    const msgStmt = variable.set(fnCall).toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]);
+    this.statements.push(msgStmt);
+
+    this.translations.set(key, variable);
+    return variable;
+  }
+
+  getDefinition(type: any, kind: DefinitionKind, ctx: OutputContext, forceShared: boolean = false):
+      o.Expression {
+    const definitions = this.definitionsOf(kind);
+    let fixup = definitions.get(type);
+    let newValue = false;
+    if (!fixup) {
+      const property = this.propertyNameOf(kind);
+      fixup = new FixupExpression(ctx.importExpr(type).prop(property));
+      definitions.set(type, fixup);
+      newValue = true;
+    }
+
+    if ((!newValue && !fixup.shared) || (newValue && forceShared)) {
+      const name = this.freshName();
+      this.statements.push(
+          o.variable(name).set(fixup.resolved).toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
+      fixup.fixup(o.variable(name));
+    }
+    return fixup;
+  }
+
+  getLiteralFactory(literal: o.LiteralArrayExpr|o.LiteralMapExpr):
+      {literalFactory: o.Expression, literalFactoryArguments: o.Expression[]} {
+    // Create a pure function that builds an array of a mix of constant  and variable expressions
+    if (literal instanceof o.LiteralArrayExpr) {
+      const argumentsForKey = literal.entries.map(e => e.isConstant() ? e : o.literal(null));
+      const key = this.keyOf(o.literalArr(argumentsForKey));
+      return this._getLiteralFactory(key, literal.entries, entries => o.literalArr(entries));
+    } else {
+      const expressionForKey = o.literalMap(
+          literal.entries.map(e => ({
+                                key: e.key,
+                                value: e.value.isConstant() ? e.value : o.literal(null),
+                                quoted: e.quoted
+                              })));
+      const key = this.keyOf(expressionForKey);
+      return this._getLiteralFactory(
+          key, literal.entries.map(e => e.value),
+          entries => o.literalMap(entries.map((value, index) => ({
+                                                key: literal.entries[index].key,
+                                                value,
+                                                quoted: literal.entries[index].quoted
+                                              }))));
+    }
+  }
+
+  private _getLiteralFactory(
+      key: string, values: o.Expression[], resultMap: (parameters: o.Expression[]) => o.Expression):
+      {literalFactory: o.Expression, literalFactoryArguments: o.Expression[]} {
+    let literalFactory = this.literalFactories.get(key);
+    const literalFactoryArguments = values.filter((e => !e.isConstant()));
+    if (!literalFactory) {
+      const resultExpressions = values.map(
+          (e, index) => e.isConstant() ? this.getConstLiteral(e, true) : o.variable(`a${index}`));
+      const parameters =
+          resultExpressions.filter(isVariable).map(e => new o.FnParam(e.name !, o.DYNAMIC_TYPE));
+      const pureFunctionDeclaration =
+          o.fn(parameters, [new o.ReturnStatement(resultMap(resultExpressions))], o.INFERRED_TYPE);
+      const name = this.freshName();
+      this.statements.push(
+          o.variable(name).set(pureFunctionDeclaration).toDeclStmt(o.INFERRED_TYPE, [
+            o.StmtModifier.Final
+          ]));
+      literalFactory = o.variable(name);
+      this.literalFactories.set(key, literalFactory);
+    }
+    return {literalFactory, literalFactoryArguments};
+  }
+
+  /**
+   * Produce a unique name.
+   *
+   * The name might be unique among different prefixes if any of the prefixes end in
+   * a digit so the prefix should be a constant string (not based on user input) and
+   * must not end in a digit.
+   */
+  uniqueName(prefix: string): string { return `${prefix}${this.nextNameIndex++}`; }
+
+  private definitionsOf(kind: DefinitionKind): Map<any, FixupExpression> {
+    switch (kind) {
+      case DefinitionKind.Component:
+        return this.componentDefinitions;
+      case DefinitionKind.Directive:
+        return this.directiveDefinitions;
+      case DefinitionKind.Injector:
+        return this.injectorDefinitions;
+      case DefinitionKind.Pipe:
+        return this.pipeDefinitions;
+    }
+    error(`Unknown definition kind ${kind}`);
+    return this.componentDefinitions;
+  }
+
+  public propertyNameOf(kind: DefinitionKind): string {
+    switch (kind) {
+      case DefinitionKind.Component:
+        return 'ngComponentDef';
+      case DefinitionKind.Directive:
+        return 'ngDirectiveDef';
+      case DefinitionKind.Injector:
+        return 'ngInjectorDef';
+      case DefinitionKind.Pipe:
+        return 'ngPipeDef';
+    }
+    error(`Unknown definition kind ${kind}`);
+    return '<unknown>';
+  }
+
+  private freshName(): string { return this.uniqueName(CONSTANT_PREFIX); }
+
+  private freshTranslationName(): string {
+    return this.uniqueName(TRANSLATION_PREFIX).toUpperCase();
+  }
+
+  private keyOf(expression: o.Expression) {
+    return expression.visitExpression(new KeyVisitor(), KEY_CONTEXT);
+  }
+}
+
+/**
+ * Visitor used to determine if 2 expressions are equivalent and can be shared in the
+ * `ConstantPool`.
+ *
+ * When the id (string) generated by the visitor is equal, expressions are considered equivalent.
+ */
+class KeyVisitor implements o.ExpressionVisitor {
+  visitLiteralExpr(ast: o.LiteralExpr): string {
+    return `${typeof ast.value === 'string' ? '"' + ast.value + '"' : ast.value}`;
+  }
+
+  visitLiteralArrayExpr(ast: o.LiteralArrayExpr, context: object): string {
+    return `[${ast.entries.map(entry => entry.visitExpression(this, context)).join(',')}]`;
+  }
+
+  visitLiteralMapExpr(ast: o.LiteralMapExpr, context: object): string {
+    const mapKey = (entry: o.LiteralMapEntry) => {
+      const quote = entry.quoted ? '"' : '';
+      return `${quote}${entry.key}${quote}`;
+    };
+    const mapEntry = (entry: o.LiteralMapEntry) =>
+        `${mapKey(entry)}:${entry.value.visitExpression(this, context)}`;
+    return `{${ast.entries.map(mapEntry).join(',')}`;
+  }
+
+  visitExternalExpr(ast: o.ExternalExpr): string {
+    return ast.value.moduleName ? `EX:${ast.value.moduleName}:${ast.value.name}` :
+                                  `EX:${ast.value.runtime.name}`;
+  }
+
+  visitReadVarExpr(node: o.ReadVarExpr) { return `VAR:${node.name}`; }
+
+  visitTypeofExpr(node: o.TypeofExpr, context: any): string {
+    return `TYPEOF:${node.expr.visitExpression(this, context)}`;
+  }
+
+  visitWrappedNodeExpr = invalid;
+  visitWriteVarExpr = invalid;
+  visitWriteKeyExpr = invalid;
+  visitWritePropExpr = invalid;
+  visitInvokeMethodExpr = invalid;
+  visitInvokeFunctionExpr = invalid;
+  visitInstantiateExpr = invalid;
+  visitConditionalExpr = invalid;
+  visitNotExpr = invalid;
+  visitAssertNotNullExpr = invalid;
+  visitCastExpr = invalid;
+  visitFunctionExpr = invalid;
+  visitBinaryOperatorExpr = invalid;
+  visitReadPropExpr = invalid;
+  visitReadKeyExpr = invalid;
+  visitCommaExpr = invalid;
+}
+
+function invalid<T>(arg: o.Expression | o.Statement): never {
+  throw new Error(
+      `Invalid state: Visitor ${this.constructor.name} doesn't handle ${arg.constructor.name}`);
+}
+
+function isVariable(e: o.Expression): e is o.ReadVarExpr {
+  return e instanceof o.ReadVarExpr;
+}
+
+// Converts i18n meta informations for a message (description, meaning) to a JsDoc statement
+// formatted as expected by the Closure compiler.
+function i18nMetaToDocStmt(meta: {description?: string, id?: string, meaning?: string}):
+    o.JSDocCommentStmt|null {
+  const tags: o.JSDocTag[] = [];
+
+  if (meta.description) {
+    tags.push({tagName: o.JSDocTagName.Desc, text: meta.description});
+  }
+
+  if (meta.meaning) {
+    tags.push({tagName: o.JSDocTagName.Meaning, text: meta.meaning});
+  }
+
+  return tags.length == 0 ? null : new o.JSDocCommentStmt(tags);
+}
diff --git a/packages/compiler/src/core.ts b/packages/compiler/src/core.ts
new file mode 100644
index 000000000000..e34aa4c1c096
--- /dev/null
+++ b/packages/compiler/src/core.ts
@@ -0,0 +1,385 @@
+/**
+ * @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
+ */
+
+// Attention:
+// This file duplicates types and values from @angular/core
+// so that we are able to make @angular/compiler independent of @angular/core.
+// This is important to prevent a build cycle, as @angular/core needs to
+// be compiled with the compiler.
+
+import {CssSelector} from './selector';
+
+export interface Inject { token: any; }
+export const createInject = makeMetadataFactory<Inject>('Inject', (token: any) => ({token}));
+export const createInjectionToken = makeMetadataFactory<object>(
+    'InjectionToken', (desc: string) => ({_desc: desc, ngInjectableDef: undefined}));
+
+export interface Attribute { attributeName?: string; }
+export const createAttribute =
+    makeMetadataFactory<Attribute>('Attribute', (attributeName?: string) => ({attributeName}));
+
+export interface Query {
+  descendants: boolean;
+  first: boolean;
+  read: any;
+  isViewQuery: boolean;
+  selector: any;
+}
+
+export const createContentChildren = makeMetadataFactory<Query>(
+    'ContentChildren',
+    (selector?: any, data: any = {}) =>
+        ({selector, first: false, isViewQuery: false, descendants: false, ...data}));
+export const createContentChild = makeMetadataFactory<Query>(
+    'ContentChild', (selector?: any, data: any = {}) =>
+                        ({selector, first: true, isViewQuery: false, descendants: true, ...data}));
+export const createViewChildren = makeMetadataFactory<Query>(
+    'ViewChildren', (selector?: any, data: any = {}) =>
+                        ({selector, first: false, isViewQuery: true, descendants: true, ...data}));
+export const createViewChild = makeMetadataFactory<Query>(
+    'ViewChild', (selector: any, data: any) =>
+                     ({selector, first: true, isViewQuery: true, descendants: true, ...data}));
+
+export interface Directive {
+  selector?: string;
+  inputs?: string[];
+  outputs?: string[];
+  host?: {[key: string]: string};
+  providers?: Provider[];
+  exportAs?: string;
+  queries?: {[key: string]: any};
+  guards?: {[key: string]: any};
+}
+export const createDirective =
+    makeMetadataFactory<Directive>('Directive', (dir: Directive = {}) => dir);
+
+export interface Component extends Directive {
+  changeDetection?: ChangeDetectionStrategy;
+  viewProviders?: Provider[];
+  moduleId?: string;
+  templateUrl?: string;
+  template?: string;
+  styleUrls?: string[];
+  styles?: string[];
+  animations?: any[];
+  encapsulation?: ViewEncapsulation;
+  interpolation?: [string, string];
+  entryComponents?: Array<Type|any[]>;
+  preserveWhitespaces?: boolean;
+}
+export enum ViewEncapsulation {
+  Emulated = 0,
+  Native = 1,
+  None = 2,
+  ShadowDom = 3
+}
+
+export enum ChangeDetectionStrategy {
+  OnPush = 0,
+  Default = 1
+}
+
+export const createComponent = makeMetadataFactory<Component>(
+    'Component', (c: Component = {}) => ({changeDetection: ChangeDetectionStrategy.Default, ...c}));
+
+export interface Pipe {
+  name: string;
+  pure?: boolean;
+}
+export const createPipe = makeMetadataFactory<Pipe>('Pipe', (p: Pipe) => ({pure: true, ...p}));
+
+export interface Input { bindingPropertyName?: string; }
+export const createInput =
+    makeMetadataFactory<Input>('Input', (bindingPropertyName?: string) => ({bindingPropertyName}));
+
+export interface Output { bindingPropertyName?: string; }
+export const createOutput = makeMetadataFactory<Output>(
+    'Output', (bindingPropertyName?: string) => ({bindingPropertyName}));
+
+export interface HostBinding { hostPropertyName?: string; }
+export const createHostBinding = makeMetadataFactory<HostBinding>(
+    'HostBinding', (hostPropertyName?: string) => ({hostPropertyName}));
+
+export interface HostListener {
+  eventName?: string;
+  args?: string[];
+}
+export const createHostListener = makeMetadataFactory<HostListener>(
+    'HostListener', (eventName?: string, args?: string[]) => ({eventName, args}));
+
+export interface NgModule {
+  providers?: Provider[];
+  declarations?: Array<Type|any[]>;
+  imports?: Array<Type|ModuleWithProviders|any[]>;
+  exports?: Array<Type|any[]>;
+  entryComponents?: Array<Type|any[]>;
+  bootstrap?: Array<Type|any[]>;
+  schemas?: Array<SchemaMetadata|any[]>;
+  id?: string;
+}
+export const createNgModule =
+    makeMetadataFactory<NgModule>('NgModule', (ngModule: NgModule) => ngModule);
+
+export interface ModuleWithProviders {
+  ngModule: Type;
+  providers?: Provider[];
+}
+export interface Injectable {
+  providedIn?: Type|'root'|any;
+  useClass?: Type|any;
+  useExisting?: Type|any;
+  useValue?: any;
+  useFactory?: Type|any;
+  deps?: Array<Type|any[]>;
+}
+export const createInjectable =
+    makeMetadataFactory('Injectable', (injectable: Injectable = {}) => injectable);
+export interface SchemaMetadata { name: string; }
+
+export const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata = {
+  name: 'custom-elements'
+};
+
+export const NO_ERRORS_SCHEMA: SchemaMetadata = {
+  name: 'no-errors-schema'
+};
+
+export const createOptional = makeMetadataFactory('Optional');
+export const createSelf = makeMetadataFactory('Self');
+export const createSkipSelf = makeMetadataFactory('SkipSelf');
+export const createHost = makeMetadataFactory('Host');
+
+export interface Type extends Function { new (...args: any[]): any; }
+export const Type = Function;
+
+export enum SecurityContext {
+  NONE = 0,
+  HTML = 1,
+  STYLE = 2,
+  SCRIPT = 3,
+  URL = 4,
+  RESOURCE_URL = 5,
+}
+
+export type Provider = any;
+
+export const enum NodeFlags {
+  None = 0,
+  TypeElement = 1 << 0,
+  TypeText = 1 << 1,
+  ProjectedTemplate = 1 << 2,
+  CatRenderNode = TypeElement | TypeText,
+  TypeNgContent = 1 << 3,
+  TypePipe = 1 << 4,
+  TypePureArray = 1 << 5,
+  TypePureObject = 1 << 6,
+  TypePurePipe = 1 << 7,
+  CatPureExpression = TypePureArray | TypePureObject | TypePurePipe,
+  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,
+  TypeModuleProvider = 1 << 30,
+  CatQuery = TypeContentQuery | TypeViewQuery,
+
+  // mutually exclusive values...
+  Types = CatRenderNode | TypeNgContent | TypePipe | CatPureExpression | CatProvider | CatQuery
+}
+
+export const enum DepFlags {
+  None = 0,
+  SkipSelf = 1 << 0,
+  Optional = 1 << 1,
+  Self = 1 << 2,
+  Value = 1 << 3,
+}
+
+/**
+ * Injection flags for DI.
+ */
+export const enum InjectFlags {
+  Default = 0,
+
+  /**
+   * Specifies that an injector should retrieve a dependency from any injector until reaching the
+   * host element of the current component. (Only used with Element Injector)
+   */
+  Host = 1 << 0,
+  /** Don't descend into ancestors of the node requesting injection. */
+  Self = 1 << 1,
+  /** Skip the node that is requesting injection. */
+  SkipSelf = 1 << 2,
+  /** Inject `defaultValue` instead if token not found. */
+  Optional = 1 << 3,
+}
+
+export const enum ArgumentType {Inline = 0, Dynamic = 1}
+
+export const enum BindingFlags {
+  TypeElementAttribute = 1 << 0,
+  TypeElementClass = 1 << 1,
+  TypeElementStyle = 1 << 2,
+  TypeProperty = 1 << 3,
+  SyntheticProperty = 1 << 4,
+  SyntheticHostProperty = 1 << 5,
+  CatSyntheticProperty = SyntheticProperty | SyntheticHostProperty,
+
+  // mutually exclusive values...
+  Types = TypeElementAttribute | TypeElementClass | TypeElementStyle | TypeProperty
+}
+
+export const enum QueryBindingType {First = 0, All = 1}
+
+export const enum QueryValueType {
+  ElementRef = 0,
+  RenderElement = 1,
+  TemplateRef = 2,
+  ViewContainerRef = 3,
+  Provider = 4
+}
+
+export const enum ViewFlags {
+  None = 0,
+  OnPush = 1 << 1,
+}
+
+export enum MissingTranslationStrategy {
+  Error = 0,
+  Warning = 1,
+  Ignore = 2,
+}
+
+export interface MetadataFactory<T> {
+  (...args: any[]): T;
+  isTypeOf(obj: any): obj is T;
+  ngMetadataName: string;
+}
+
+function makeMetadataFactory<T>(name: string, props?: (...args: any[]) => T): MetadataFactory<T> {
+  const factory: any = (...args: any[]) => {
+    const values = props ? props(...args) : {};
+    return {
+      ngMetadataName: name,
+      ...values,
+    };
+  };
+  factory.isTypeOf = (obj: any) => obj && obj.ngMetadataName === name;
+  factory.ngMetadataName = name;
+  return factory;
+}
+
+export interface Route {
+  children?: Route[];
+  loadChildren?: string|Type|any;
+}
+
+/**
+ * Flags used to generate R3-style CSS Selectors. They are pasted from
+ * core/src/render3/projection.ts because they cannot be referenced directly.
+ */
+export const enum SelectorFlags {
+  /** Indicates this is the beginning of a new negative selector */
+  NOT = 0b0001,
+
+  /** Mode for matching attributes */
+  ATTRIBUTE = 0b0010,
+
+  /** Mode for matching tag names */
+  ELEMENT = 0b0100,
+
+  /** Mode for matching class names */
+  CLASS = 0b1000,
+}
+
+// These are a copy the CSS types from core/src/render3/interfaces/projection.ts
+// They are duplicated here as they cannot be directly referenced from core.
+export type R3CssSelector = (string | SelectorFlags)[];
+export type R3CssSelectorList = R3CssSelector[];
+
+function parserSelectorToSimpleSelector(selector: CssSelector): R3CssSelector {
+  const classes = selector.classNames && selector.classNames.length ?
+      [SelectorFlags.CLASS, ...selector.classNames] :
+      [];
+  const elementName = selector.element && selector.element !== '*' ? selector.element : '';
+  return [elementName, ...selector.attrs, ...classes];
+}
+
+function parserSelectorToNegativeSelector(selector: CssSelector): R3CssSelector {
+  const classes = selector.classNames && selector.classNames.length ?
+      [SelectorFlags.CLASS, ...selector.classNames] :
+      [];
+
+  if (selector.element) {
+    return [
+      SelectorFlags.NOT | SelectorFlags.ELEMENT, selector.element, ...selector.attrs, ...classes
+    ];
+  } else if (selector.attrs.length) {
+    return [SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, ...selector.attrs, ...classes];
+  } else {
+    return selector.classNames && selector.classNames.length ?
+        [SelectorFlags.NOT | SelectorFlags.CLASS, ...selector.classNames] :
+        [];
+  }
+}
+
+function parserSelectorToR3Selector(selector: CssSelector): R3CssSelector {
+  const positive = parserSelectorToSimpleSelector(selector);
+
+  const negative: R3CssSelectorList = selector.notSelectors && selector.notSelectors.length ?
+      selector.notSelectors.map(notSelector => parserSelectorToNegativeSelector(notSelector)) :
+      [];
+
+  return positive.concat(...negative);
+}
+
+export function parseSelectorToR3Selector(selector: string): R3CssSelectorList {
+  const selectors = CssSelector.parse(selector);
+  return selectors.map(parserSelectorToR3Selector);
+}
+
+// Pasted from render3/interfaces/definition since it cannot be referenced directly
+/**
+ * Flags passed into template functions to determine which blocks (i.e. creation, update)
+ * should be executed.
+ *
+ * Typically, a template runs both the creation block and the update block on initialization and
+ * subsequent runs only execute the update block. However, dynamically created views require that
+ * the creation block be executed separately from the update block (for backwards compat).
+ */
+export const enum RenderFlags {
+  /* Whether to run the creation block (e.g. create elements and directives) */
+  Create = 0b01,
+
+  /* Whether to run the update block (e.g. refresh bindings) */
+  Update = 0b10
+}
+
+export const enum InitialStylingFlags {
+  VALUES_MODE = 0b1,
+}
diff --git a/packages/compiler/src/css_parser/css_ast.ts b/packages/compiler/src/css_parser/css_ast.ts
new file mode 100644
index 000000000000..b217b089b657
--- /dev/null
+++ b/packages/compiler/src/css_parser/css_ast.ts
@@ -0,0 +1,248 @@
+/**
+ * @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 {ParseLocation, ParseSourceSpan} from '../parse_util';
+
+import {CssToken, CssTokenType} from './css_lexer';
+
+export enum BlockType {
+  Import,
+  Charset,
+  Namespace,
+  Supports,
+  Keyframes,
+  MediaQuery,
+  Selector,
+  FontFace,
+  Page,
+  Document,
+  Viewport,
+  Unsupported
+}
+
+export interface CssAstVisitor {
+  visitCssValue(ast: CssStyleValueAst, context?: any): any;
+  visitCssInlineRule(ast: CssInlineRuleAst, context?: any): any;
+  visitCssAtRulePredicate(ast: CssAtRulePredicateAst, context?: any): any;
+  visitCssKeyframeRule(ast: CssKeyframeRuleAst, context?: any): any;
+  visitCssKeyframeDefinition(ast: CssKeyframeDefinitionAst, context?: any): any;
+  visitCssMediaQueryRule(ast: CssMediaQueryRuleAst, context?: any): any;
+  visitCssSelectorRule(ast: CssSelectorRuleAst, context?: any): any;
+  visitCssSelector(ast: CssSelectorAst, context?: any): any;
+  visitCssSimpleSelector(ast: CssSimpleSelectorAst, context?: any): any;
+  visitCssPseudoSelector(ast: CssPseudoSelectorAst, context?: any): any;
+  visitCssDefinition(ast: CssDefinitionAst, context?: any): any;
+  visitCssBlock(ast: CssBlockAst, context?: any): any;
+  visitCssStylesBlock(ast: CssStylesBlockAst, context?: any): any;
+  visitCssStyleSheet(ast: CssStyleSheetAst, context?: any): any;
+  visitCssUnknownRule(ast: CssUnknownRuleAst, context?: any): any;
+  visitCssUnknownTokenList(ast: CssUnknownTokenListAst, context?: any): any;
+}
+
+export abstract class CssAst {
+  constructor(public location: ParseSourceSpan) {}
+  get start(): ParseLocation { return this.location.start; }
+  get end(): ParseLocation { return this.location.end; }
+  abstract visit(visitor: CssAstVisitor, context?: any): any;
+}
+
+export class CssStyleValueAst extends CssAst {
+  constructor(location: ParseSourceSpan, public tokens: CssToken[], public strValue: string) {
+    super(location);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any { return visitor.visitCssValue(this); }
+}
+
+export abstract class CssRuleAst extends CssAst {
+  constructor(location: ParseSourceSpan) { super(location); }
+}
+
+export class CssBlockRuleAst extends CssRuleAst {
+  constructor(
+      public location: ParseSourceSpan, public type: BlockType, public block: CssBlockAst,
+      public name: CssToken|null = null) {
+    super(location);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssBlock(this.block, context);
+  }
+}
+
+export class CssKeyframeRuleAst extends CssBlockRuleAst {
+  constructor(location: ParseSourceSpan, name: CssToken, block: CssBlockAst) {
+    super(location, BlockType.Keyframes, block, name);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssKeyframeRule(this, context);
+  }
+}
+
+export class CssKeyframeDefinitionAst extends CssBlockRuleAst {
+  constructor(location: ParseSourceSpan, public steps: CssToken[], block: CssBlockAst) {
+    super(location, BlockType.Keyframes, block, mergeTokens(steps, ','));
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssKeyframeDefinition(this, context);
+  }
+}
+
+export class CssBlockDefinitionRuleAst extends CssBlockRuleAst {
+  constructor(
+      location: ParseSourceSpan, public strValue: string, type: BlockType,
+      public query: CssAtRulePredicateAst, block: CssBlockAst) {
+    super(location, type, block);
+    const firstCssToken: CssToken = query.tokens[0];
+    this.name = new CssToken(
+        firstCssToken.index, firstCssToken.column, firstCssToken.line, CssTokenType.Identifier,
+        this.strValue);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssBlock(this.block, context);
+  }
+}
+
+export class CssMediaQueryRuleAst extends CssBlockDefinitionRuleAst {
+  constructor(
+      location: ParseSourceSpan, strValue: string, query: CssAtRulePredicateAst,
+      block: CssBlockAst) {
+    super(location, strValue, BlockType.MediaQuery, query, block);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssMediaQueryRule(this, context);
+  }
+}
+
+export class CssAtRulePredicateAst extends CssAst {
+  constructor(location: ParseSourceSpan, public strValue: string, public tokens: CssToken[]) {
+    super(location);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssAtRulePredicate(this, context);
+  }
+}
+
+export class CssInlineRuleAst extends CssRuleAst {
+  constructor(location: ParseSourceSpan, public type: BlockType, public value: CssStyleValueAst) {
+    super(location);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssInlineRule(this, context);
+  }
+}
+
+export class CssSelectorRuleAst extends CssBlockRuleAst {
+  public strValue: string;
+
+  constructor(location: ParseSourceSpan, public selectors: CssSelectorAst[], block: CssBlockAst) {
+    super(location, BlockType.Selector, block);
+    this.strValue = selectors.map(selector => selector.strValue).join(',');
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssSelectorRule(this, context);
+  }
+}
+
+export class CssDefinitionAst extends CssAst {
+  constructor(
+      location: ParseSourceSpan, public property: CssToken, public value: CssStyleValueAst) {
+    super(location);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssDefinition(this, context);
+  }
+}
+
+export abstract class CssSelectorPartAst extends CssAst {
+  constructor(location: ParseSourceSpan) { super(location); }
+}
+
+export class CssSelectorAst extends CssSelectorPartAst {
+  public strValue: string;
+  constructor(location: ParseSourceSpan, public selectorParts: CssSimpleSelectorAst[]) {
+    super(location);
+    this.strValue = selectorParts.map(part => part.strValue).join('');
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssSelector(this, context);
+  }
+}
+
+export class CssSimpleSelectorAst extends CssSelectorPartAst {
+  constructor(
+      location: ParseSourceSpan, public tokens: CssToken[], public strValue: string,
+      public pseudoSelectors: CssPseudoSelectorAst[], public operator: CssToken) {
+    super(location);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssSimpleSelector(this, context);
+  }
+}
+
+export class CssPseudoSelectorAst extends CssSelectorPartAst {
+  constructor(
+      location: ParseSourceSpan, public strValue: string, public name: string,
+      public tokens: CssToken[], public innerSelectors: CssSelectorAst[]) {
+    super(location);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssPseudoSelector(this, context);
+  }
+}
+
+export class CssBlockAst extends CssAst {
+  constructor(location: ParseSourceSpan, public entries: CssAst[]) { super(location); }
+  visit(visitor: CssAstVisitor, context?: any): any { return visitor.visitCssBlock(this, context); }
+}
+
+/*
+ a style block is different from a standard block because it contains
+ css prop:value definitions. A regular block can contain a list of Ast entries.
+ */
+export class CssStylesBlockAst extends CssBlockAst {
+  constructor(location: ParseSourceSpan, public definitions: CssDefinitionAst[]) {
+    super(location, definitions);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssStylesBlock(this, context);
+  }
+}
+
+export class CssStyleSheetAst extends CssAst {
+  constructor(location: ParseSourceSpan, public rules: CssAst[]) { super(location); }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssStyleSheet(this, context);
+  }
+}
+
+export class CssUnknownRuleAst extends CssRuleAst {
+  constructor(location: ParseSourceSpan, public ruleName: string, public tokens: CssToken[]) {
+    super(location);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssUnknownRule(this, context);
+  }
+}
+
+export class CssUnknownTokenListAst extends CssRuleAst {
+  constructor(location: ParseSourceSpan, public name: string, public tokens: CssToken[]) {
+    super(location);
+  }
+  visit(visitor: CssAstVisitor, context?: any): any {
+    return visitor.visitCssUnknownTokenList(this, context);
+  }
+}
+
+export function mergeTokens(tokens: CssToken[], separator: string = ''): CssToken {
+  const mainToken = tokens[0];
+  let str = mainToken.strValue;
+  for (let i = 1; i < tokens.length; i++) {
+    str += separator + tokens[i].strValue;
+  }
+
+  return new CssToken(mainToken.index, mainToken.column, mainToken.line, mainToken.type, str);
+}
diff --git a/packages/compiler/src/css_parser/css_lexer.ts b/packages/compiler/src/css_parser/css_lexer.ts
new file mode 100644
index 000000000000..ea574dbf9540
--- /dev/null
+++ b/packages/compiler/src/css_parser/css_lexer.ts
@@ -0,0 +1,722 @@
+/**
+ * @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 chars from '../chars';
+
+export enum CssTokenType {
+  EOF,
+  String,
+  Comment,
+  Identifier,
+  Number,
+  IdentifierOrNumber,
+  AtKeyword,
+  Character,
+  Whitespace,
+  Invalid
+}
+
+export enum CssLexerMode {
+  ALL,
+  ALL_TRACK_WS,
+  SELECTOR,
+  PSEUDO_SELECTOR,
+  PSEUDO_SELECTOR_WITH_ARGUMENTS,
+  ATTRIBUTE_SELECTOR,
+  AT_RULE_QUERY,
+  MEDIA_QUERY,
+  BLOCK,
+  KEYFRAME_BLOCK,
+  STYLE_BLOCK,
+  STYLE_VALUE,
+  STYLE_VALUE_FUNCTION,
+  STYLE_CALC_FUNCTION
+}
+
+export class LexedCssResult {
+  constructor(public error: Error|null, public token: CssToken) {}
+}
+
+export function generateErrorMessage(
+    input: string, message: string, errorValue: string, index: number, row: number,
+    column: number): string {
+  return `${message} at column ${row}:${column} in expression [` +
+      findProblemCode(input, errorValue, index, column) + ']';
+}
+
+export function findProblemCode(
+    input: string, errorValue: string, index: number, column: number): string {
+  let endOfProblemLine = index;
+  let current = charCode(input, index);
+  while (current > 0 && !isNewline(current)) {
+    current = charCode(input, ++endOfProblemLine);
+  }
+  const choppedString = input.substring(0, endOfProblemLine);
+  let pointerPadding = '';
+  for (let i = 0; i < column; i++) {
+    pointerPadding += ' ';
+  }
+  let pointerString = '';
+  for (let i = 0; i < errorValue.length; i++) {
+    pointerString += '^';
+  }
+  return choppedString + '\n' + pointerPadding + pointerString + '\n';
+}
+
+export class CssToken {
+  numValue: number;
+  constructor(
+      public index: number, public column: number, public line: number, public type: CssTokenType,
+      public strValue: string) {
+    this.numValue = charCode(strValue, 0);
+  }
+}
+
+export class CssLexer {
+  scan(text: string, trackComments: boolean = false): CssScanner {
+    return new CssScanner(text, trackComments);
+  }
+}
+
+export function cssScannerError(token: CssToken, message: string): Error {
+  const error = Error('CssParseError: ' + message);
+  (error as any)[ERROR_RAW_MESSAGE] = message;
+  (error as any)[ERROR_TOKEN] = token;
+  return error;
+}
+
+const ERROR_TOKEN = 'ngToken';
+const ERROR_RAW_MESSAGE = 'ngRawMessage';
+
+export function getRawMessage(error: Error): string {
+  return (error as any)[ERROR_RAW_MESSAGE];
+}
+
+export function getToken(error: Error): CssToken {
+  return (error as any)[ERROR_TOKEN];
+}
+
+function _trackWhitespace(mode: CssLexerMode) {
+  switch (mode) {
+    case CssLexerMode.SELECTOR:
+    case CssLexerMode.PSEUDO_SELECTOR:
+    case CssLexerMode.ALL_TRACK_WS:
+    case CssLexerMode.STYLE_VALUE:
+      return true;
+
+    default:
+      return false;
+  }
+}
+
+export class CssScanner {
+  // TODO(issue/24571): remove '!'.
+  peek !: number;
+  peekPeek: number;
+  length: number = 0;
+  index: number = -1;
+  column: number = -1;
+  line: number = 0;
+
+  /** @internal */
+  _currentMode: CssLexerMode = CssLexerMode.BLOCK;
+  /** @internal */
+  _currentError: Error|null = null;
+
+  constructor(public input: string, private _trackComments: boolean = false) {
+    this.length = this.input.length;
+    this.peekPeek = this.peekAt(0);
+    this.advance();
+  }
+
+  getMode(): CssLexerMode { return this._currentMode; }
+
+  setMode(mode: CssLexerMode) {
+    if (this._currentMode != mode) {
+      if (_trackWhitespace(this._currentMode) && !_trackWhitespace(mode)) {
+        this.consumeWhitespace();
+      }
+      this._currentMode = mode;
+    }
+  }
+
+  advance(): void {
+    if (isNewline(this.peek)) {
+      this.column = 0;
+      this.line++;
+    } else {
+      this.column++;
+    }
+
+    this.index++;
+    this.peek = this.peekPeek;
+    this.peekPeek = this.peekAt(this.index + 1);
+  }
+
+  peekAt(index: number): number {
+    return index >= this.length ? chars.$EOF : this.input.charCodeAt(index);
+  }
+
+  consumeEmptyStatements(): void {
+    this.consumeWhitespace();
+    while (this.peek == chars.$SEMICOLON) {
+      this.advance();
+      this.consumeWhitespace();
+    }
+  }
+
+  consumeWhitespace(): void {
+    while (chars.isWhitespace(this.peek) || isNewline(this.peek)) {
+      this.advance();
+      if (!this._trackComments && isCommentStart(this.peek, this.peekPeek)) {
+        this.advance();  // /
+        this.advance();  // *
+        while (!isCommentEnd(this.peek, this.peekPeek)) {
+          if (this.peek == chars.$EOF) {
+            this.error('Unterminated comment');
+          }
+          this.advance();
+        }
+        this.advance();  // *
+        this.advance();  // /
+      }
+    }
+  }
+
+  consume(type: CssTokenType, value: string|null = null): LexedCssResult {
+    const mode = this._currentMode;
+
+    this.setMode(_trackWhitespace(mode) ? CssLexerMode.ALL_TRACK_WS : CssLexerMode.ALL);
+
+    const previousIndex = this.index;
+    const previousLine = this.line;
+    const previousColumn = this.column;
+
+    let next: CssToken = undefined !;
+    const output = this.scan();
+    if (output != null) {
+      // just incase the inner scan method returned an error
+      if (output.error != null) {
+        this.setMode(mode);
+        return output;
+      }
+
+      next = output.token;
+    }
+
+    if (next == null) {
+      next = new CssToken(this.index, this.column, this.line, CssTokenType.EOF, 'end of file');
+    }
+
+    let isMatchingType: boolean = false;
+    if (type == CssTokenType.IdentifierOrNumber) {
+      // TODO (matsko): implement array traversal for lookup here
+      isMatchingType = next.type == CssTokenType.Number || next.type == CssTokenType.Identifier;
+    } else {
+      isMatchingType = next.type == type;
+    }
+
+    // before throwing the error we need to bring back the former
+    // mode so that the parser can recover...
+    this.setMode(mode);
+
+    let error: Error|null = null;
+    if (!isMatchingType || (value != null && value != next.strValue)) {
+      let errorMessage =
+          CssTokenType[next.type] + ' does not match expected ' + CssTokenType[type] + ' value';
+
+      if (value != null) {
+        errorMessage += ' ("' + next.strValue + '" should match "' + value + '")';
+      }
+
+      error = cssScannerError(
+          next, generateErrorMessage(
+                    this.input, errorMessage, next.strValue, previousIndex, previousLine,
+                    previousColumn));
+    }
+
+    return new LexedCssResult(error, next);
+  }
+
+
+  scan(): LexedCssResult|null {
+    const trackWS = _trackWhitespace(this._currentMode);
+    if (this.index == 0 && !trackWS) {  // first scan
+      this.consumeWhitespace();
+    }
+
+    const token = this._scan();
+    if (token == null) return null;
+
+    const error = this._currentError !;
+    this._currentError = null;
+
+    if (!trackWS) {
+      this.consumeWhitespace();
+    }
+    return new LexedCssResult(error, token);
+  }
+
+  /** @internal */
+  _scan(): CssToken|null {
+    let peek = this.peek;
+    let peekPeek = this.peekPeek;
+    if (peek == chars.$EOF) return null;
+
+    if (isCommentStart(peek, peekPeek)) {
+      // even if comments are not tracked we still lex the
+      // comment so we can move the pointer forward
+      const commentToken = this.scanComment();
+      if (this._trackComments) {
+        return commentToken;
+      }
+    }
+
+    if (_trackWhitespace(this._currentMode) && (chars.isWhitespace(peek) || isNewline(peek))) {
+      return this.scanWhitespace();
+    }
+
+    peek = this.peek;
+    peekPeek = this.peekPeek;
+    if (peek == chars.$EOF) return null;
+
+    if (isStringStart(peek, peekPeek)) {
+      return this.scanString();
+    }
+
+    // something like url(cool)
+    if (this._currentMode == CssLexerMode.STYLE_VALUE_FUNCTION) {
+      return this.scanCssValueFunction();
+    }
+
+    const isModifier = peek == chars.$PLUS || peek == chars.$MINUS;
+    const digitA = isModifier ? false : chars.isDigit(peek);
+    const digitB = chars.isDigit(peekPeek);
+    if (digitA || (isModifier && (peekPeek == chars.$PERIOD || digitB)) ||
+        (peek == chars.$PERIOD && digitB)) {
+      return this.scanNumber();
+    }
+
+    if (peek == chars.$AT) {
+      return this.scanAtExpression();
+    }
+
+    if (isIdentifierStart(peek, peekPeek)) {
+      return this.scanIdentifier();
+    }
+
+    if (isValidCssCharacter(peek, this._currentMode)) {
+      return this.scanCharacter();
+    }
+
+    return this.error(`Unexpected character [${String.fromCharCode(peek)}]`);
+  }
+
+  scanComment(): CssToken|null {
+    if (this.assertCondition(
+            isCommentStart(this.peek, this.peekPeek), 'Expected comment start value')) {
+      return null;
+    }
+
+    const start = this.index;
+    const startingColumn = this.column;
+    const startingLine = this.line;
+
+    this.advance();  // /
+    this.advance();  // *
+
+    while (!isCommentEnd(this.peek, this.peekPeek)) {
+      if (this.peek == chars.$EOF) {
+        this.error('Unterminated comment');
+      }
+      this.advance();
+    }
+
+    this.advance();  // *
+    this.advance();  // /
+
+    const str = this.input.substring(start, this.index);
+    return new CssToken(start, startingColumn, startingLine, CssTokenType.Comment, str);
+  }
+
+  scanWhitespace(): CssToken {
+    const start = this.index;
+    const startingColumn = this.column;
+    const startingLine = this.line;
+    while (chars.isWhitespace(this.peek) && this.peek != chars.$EOF) {
+      this.advance();
+    }
+    const str = this.input.substring(start, this.index);
+    return new CssToken(start, startingColumn, startingLine, CssTokenType.Whitespace, str);
+  }
+
+  scanString(): CssToken|null {
+    if (this.assertCondition(
+            isStringStart(this.peek, this.peekPeek), 'Unexpected non-string starting value')) {
+      return null;
+    }
+
+    const target = this.peek;
+    const start = this.index;
+    const startingColumn = this.column;
+    const startingLine = this.line;
+    let previous = target;
+    this.advance();
+
+    while (!isCharMatch(target, previous, this.peek)) {
+      if (this.peek == chars.$EOF || isNewline(this.peek)) {
+        this.error('Unterminated quote');
+      }
+      previous = this.peek;
+      this.advance();
+    }
+
+    if (this.assertCondition(this.peek == target, 'Unterminated quote')) {
+      return null;
+    }
+    this.advance();
+
+    const str = this.input.substring(start, this.index);
+    return new CssToken(start, startingColumn, startingLine, CssTokenType.String, str);
+  }
+
+  scanNumber(): CssToken {
+    const start = this.index;
+    const startingColumn = this.column;
+    if (this.peek == chars.$PLUS || this.peek == chars.$MINUS) {
+      this.advance();
+    }
+    let periodUsed = false;
+    while (chars.isDigit(this.peek) || this.peek == chars.$PERIOD) {
+      if (this.peek == chars.$PERIOD) {
+        if (periodUsed) {
+          this.error('Unexpected use of a second period value');
+        }
+        periodUsed = true;
+      }
+      this.advance();
+    }
+    const strValue = this.input.substring(start, this.index);
+    return new CssToken(start, startingColumn, this.line, CssTokenType.Number, strValue);
+  }
+
+  scanIdentifier(): CssToken|null {
+    if (this.assertCondition(
+            isIdentifierStart(this.peek, this.peekPeek), 'Expected identifier starting value')) {
+      return null;
+    }
+
+    const start = this.index;
+    const startingColumn = this.column;
+    while (isIdentifierPart(this.peek)) {
+      this.advance();
+    }
+    const strValue = this.input.substring(start, this.index);
+    return new CssToken(start, startingColumn, this.line, CssTokenType.Identifier, strValue);
+  }
+
+  scanCssValueFunction(): CssToken {
+    const start = this.index;
+    const startingColumn = this.column;
+    let parenBalance = 1;
+    while (this.peek != chars.$EOF && parenBalance > 0) {
+      this.advance();
+      if (this.peek == chars.$LPAREN) {
+        parenBalance++;
+      } else if (this.peek == chars.$RPAREN) {
+        parenBalance--;
+      }
+    }
+    const strValue = this.input.substring(start, this.index);
+    return new CssToken(start, startingColumn, this.line, CssTokenType.Identifier, strValue);
+  }
+
+  scanCharacter(): CssToken|null {
+    const start = this.index;
+    const startingColumn = this.column;
+    if (this.assertCondition(
+            isValidCssCharacter(this.peek, this._currentMode),
+            charStr(this.peek) + ' is not a valid CSS character')) {
+      return null;
+    }
+
+    const c = this.input.substring(start, start + 1);
+    this.advance();
+
+    return new CssToken(start, startingColumn, this.line, CssTokenType.Character, c);
+  }
+
+  scanAtExpression(): CssToken|null {
+    if (this.assertCondition(this.peek == chars.$AT, 'Expected @ value')) {
+      return null;
+    }
+
+    const start = this.index;
+    const startingColumn = this.column;
+    this.advance();
+    if (isIdentifierStart(this.peek, this.peekPeek)) {
+      const ident = this.scanIdentifier() !;
+      const strValue = '@' + ident.strValue;
+      return new CssToken(start, startingColumn, this.line, CssTokenType.AtKeyword, strValue);
+    } else {
+      return this.scanCharacter();
+    }
+  }
+
+  assertCondition(status: boolean, errorMessage: string): boolean {
+    if (!status) {
+      this.error(errorMessage);
+      return true;
+    }
+    return false;
+  }
+
+  error(message: string, errorTokenValue: string|null = null, doNotAdvance: boolean = false):
+      CssToken {
+    const index: number = this.index;
+    const column: number = this.column;
+    const line: number = this.line;
+    errorTokenValue = errorTokenValue || String.fromCharCode(this.peek);
+    const invalidToken = new CssToken(index, column, line, CssTokenType.Invalid, errorTokenValue);
+    const errorMessage =
+        generateErrorMessage(this.input, message, errorTokenValue, index, line, column);
+    if (!doNotAdvance) {
+      this.advance();
+    }
+    this._currentError = cssScannerError(invalidToken, errorMessage);
+    return invalidToken;
+  }
+}
+
+function isCharMatch(target: number, previous: number, code: number): boolean {
+  return code == target && previous != chars.$BACKSLASH;
+}
+
+function isCommentStart(code: number, next: number): boolean {
+  return code == chars.$SLASH && next == chars.$STAR;
+}
+
+function isCommentEnd(code: number, next: number): boolean {
+  return code == chars.$STAR && next == chars.$SLASH;
+}
+
+function isStringStart(code: number, next: number): boolean {
+  let target = code;
+  if (target == chars.$BACKSLASH) {
+    target = next;
+  }
+  return target == chars.$DQ || target == chars.$SQ;
+}
+
+function isIdentifierStart(code: number, next: number): boolean {
+  let target = code;
+  if (target == chars.$MINUS) {
+    target = next;
+  }
+
+  return chars.isAsciiLetter(target) || target == chars.$BACKSLASH || target == chars.$MINUS ||
+      target == chars.$_;
+}
+
+function isIdentifierPart(target: number): boolean {
+  return chars.isAsciiLetter(target) || target == chars.$BACKSLASH || target == chars.$MINUS ||
+      target == chars.$_ || chars.isDigit(target);
+}
+
+function isValidPseudoSelectorCharacter(code: number): boolean {
+  switch (code) {
+    case chars.$LPAREN:
+    case chars.$RPAREN:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isValidKeyframeBlockCharacter(code: number): boolean {
+  return code == chars.$PERCENT;
+}
+
+function isValidAttributeSelectorCharacter(code: number): boolean {
+  // value^*|$~=something
+  switch (code) {
+    case chars.$$:
+    case chars.$PIPE:
+    case chars.$CARET:
+    case chars.$TILDA:
+    case chars.$STAR:
+    case chars.$EQ:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isValidSelectorCharacter(code: number): boolean {
+  // selector [ key   = value ]
+  // IDENT    C IDENT C IDENT C
+  // #id, .class, *+~>
+  // tag:PSEUDO
+  switch (code) {
+    case chars.$HASH:
+    case chars.$PERIOD:
+    case chars.$TILDA:
+    case chars.$STAR:
+    case chars.$PLUS:
+    case chars.$GT:
+    case chars.$COLON:
+    case chars.$PIPE:
+    case chars.$COMMA:
+    case chars.$LBRACKET:
+    case chars.$RBRACKET:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isValidStyleBlockCharacter(code: number): boolean {
+  // key:value;
+  // key:calc(something ... )
+  switch (code) {
+    case chars.$HASH:
+    case chars.$SEMICOLON:
+    case chars.$COLON:
+    case chars.$PERCENT:
+    case chars.$SLASH:
+    case chars.$BACKSLASH:
+    case chars.$BANG:
+    case chars.$PERIOD:
+    case chars.$LPAREN:
+    case chars.$RPAREN:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isValidMediaQueryRuleCharacter(code: number): boolean {
+  // (min-width: 7.5em) and (orientation: landscape)
+  switch (code) {
+    case chars.$LPAREN:
+    case chars.$RPAREN:
+    case chars.$COLON:
+    case chars.$PERCENT:
+    case chars.$PERIOD:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isValidAtRuleCharacter(code: number): boolean {
+  // @document url(http://www.w3.org/page?something=on#hash),
+  switch (code) {
+    case chars.$LPAREN:
+    case chars.$RPAREN:
+    case chars.$COLON:
+    case chars.$PERCENT:
+    case chars.$PERIOD:
+    case chars.$SLASH:
+    case chars.$BACKSLASH:
+    case chars.$HASH:
+    case chars.$EQ:
+    case chars.$QUESTION:
+    case chars.$AMPERSAND:
+    case chars.$STAR:
+    case chars.$COMMA:
+    case chars.$MINUS:
+    case chars.$PLUS:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isValidStyleFunctionCharacter(code: number): boolean {
+  switch (code) {
+    case chars.$PERIOD:
+    case chars.$MINUS:
+    case chars.$PLUS:
+    case chars.$STAR:
+    case chars.$SLASH:
+    case chars.$LPAREN:
+    case chars.$RPAREN:
+    case chars.$COMMA:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isValidBlockCharacter(code: number): boolean {
+  // @something { }
+  // IDENT
+  return code == chars.$AT;
+}
+
+function isValidCssCharacter(code: number, mode: CssLexerMode): boolean {
+  switch (mode) {
+    case CssLexerMode.ALL:
+    case CssLexerMode.ALL_TRACK_WS:
+      return true;
+
+    case CssLexerMode.SELECTOR:
+      return isValidSelectorCharacter(code);
+
+    case CssLexerMode.PSEUDO_SELECTOR_WITH_ARGUMENTS:
+      return isValidPseudoSelectorCharacter(code);
+
+    case CssLexerMode.ATTRIBUTE_SELECTOR:
+      return isValidAttributeSelectorCharacter(code);
+
+    case CssLexerMode.MEDIA_QUERY:
+      return isValidMediaQueryRuleCharacter(code);
+
+    case CssLexerMode.AT_RULE_QUERY:
+      return isValidAtRuleCharacter(code);
+
+    case CssLexerMode.KEYFRAME_BLOCK:
+      return isValidKeyframeBlockCharacter(code);
+
+    case CssLexerMode.STYLE_BLOCK:
+    case CssLexerMode.STYLE_VALUE:
+      return isValidStyleBlockCharacter(code);
+
+    case CssLexerMode.STYLE_CALC_FUNCTION:
+      return isValidStyleFunctionCharacter(code);
+
+    case CssLexerMode.BLOCK:
+      return isValidBlockCharacter(code);
+
+    default:
+      return false;
+  }
+}
+
+function charCode(input: string, index: number): number {
+  return index >= input.length ? chars.$EOF : input.charCodeAt(index);
+}
+
+function charStr(code: number): string {
+  return String.fromCharCode(code);
+}
+
+export function isNewline(code: number): boolean {
+  switch (code) {
+    case chars.$FF:
+    case chars.$CR:
+    case chars.$LF:
+    case chars.$VTAB:
+      return true;
+
+    default:
+      return false;
+  }
+}
diff --git a/packages/compiler/src/css_parser/css_parser.ts b/packages/compiler/src/css_parser/css_parser.ts
new file mode 100644
index 000000000000..2650e3deecb0
--- /dev/null
+++ b/packages/compiler/src/css_parser/css_parser.ts
@@ -0,0 +1,903 @@
+/**
+ * @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 chars from '../chars';
+import {ParseError, ParseLocation, ParseSourceFile, ParseSourceSpan} from '../parse_util';
+
+import {BlockType, CssAst, CssAtRulePredicateAst, CssBlockAst, CssBlockDefinitionRuleAst, CssBlockRuleAst, CssDefinitionAst, CssInlineRuleAst, CssKeyframeDefinitionAst, CssKeyframeRuleAst, CssMediaQueryRuleAst, CssPseudoSelectorAst, CssRuleAst, CssSelectorAst, CssSelectorRuleAst, CssSimpleSelectorAst, CssStyleSheetAst, CssStyleValueAst, CssStylesBlockAst, CssUnknownRuleAst, CssUnknownTokenListAst, mergeTokens} from './css_ast';
+import {CssLexer, CssLexerMode, CssScanner, CssToken, CssTokenType, generateErrorMessage, getRawMessage, isNewline} from './css_lexer';
+
+const SPACE_OPERATOR = ' ';
+
+export {CssToken} from './css_lexer';
+export {BlockType} from './css_ast';
+
+const SLASH_CHARACTER = '/';
+const GT_CHARACTER = '>';
+const TRIPLE_GT_OPERATOR_STR = '>>>';
+const DEEP_OPERATOR_STR = '/deep/';
+
+const EOF_DELIM_FLAG = 1;
+const RBRACE_DELIM_FLAG = 2;
+const LBRACE_DELIM_FLAG = 4;
+const COMMA_DELIM_FLAG = 8;
+const COLON_DELIM_FLAG = 16;
+const SEMICOLON_DELIM_FLAG = 32;
+const NEWLINE_DELIM_FLAG = 64;
+const RPAREN_DELIM_FLAG = 128;
+const LPAREN_DELIM_FLAG = 256;
+const SPACE_DELIM_FLAG = 512;
+
+function _pseudoSelectorSupportsInnerSelectors(name: string): boolean {
+  return ['not', 'host', 'host-context'].indexOf(name) >= 0;
+}
+
+function isSelectorOperatorCharacter(code: number): boolean {
+  switch (code) {
+    case chars.$SLASH:
+    case chars.$TILDA:
+    case chars.$PLUS:
+    case chars.$GT:
+      return true;
+    default:
+      return chars.isWhitespace(code);
+  }
+}
+
+function getDelimFromCharacter(code: number): number {
+  switch (code) {
+    case chars.$EOF:
+      return EOF_DELIM_FLAG;
+    case chars.$COMMA:
+      return COMMA_DELIM_FLAG;
+    case chars.$COLON:
+      return COLON_DELIM_FLAG;
+    case chars.$SEMICOLON:
+      return SEMICOLON_DELIM_FLAG;
+    case chars.$RBRACE:
+      return RBRACE_DELIM_FLAG;
+    case chars.$LBRACE:
+      return LBRACE_DELIM_FLAG;
+    case chars.$RPAREN:
+      return RPAREN_DELIM_FLAG;
+    case chars.$SPACE:
+    case chars.$TAB:
+      return SPACE_DELIM_FLAG;
+    default:
+      return isNewline(code) ? NEWLINE_DELIM_FLAG : 0;
+  }
+}
+
+function characterContainsDelimiter(code: number, delimiters: number): boolean {
+  return (getDelimFromCharacter(code) & delimiters) > 0;
+}
+
+export class ParsedCssResult {
+  constructor(public errors: CssParseError[], public ast: CssStyleSheetAst) {}
+}
+
+export class CssParser {
+  private _errors: CssParseError[] = [];
+  // TODO(issue/24571): remove '!'.
+  private _file !: ParseSourceFile;
+  // TODO(issue/24571): remove '!'.
+  private _scanner !: CssScanner;
+  // TODO(issue/24571): remove '!'.
+  private _lastToken !: CssToken;
+
+  /**
+   * @param css the CSS code that will be parsed
+   * @param url the name of the CSS file containing the CSS source code
+   */
+  parse(css: string, url: string): ParsedCssResult {
+    const lexer = new CssLexer();
+    this._file = new ParseSourceFile(css, url);
+    this._scanner = lexer.scan(css, false);
+
+    const ast = this._parseStyleSheet(EOF_DELIM_FLAG);
+
+    const errors = this._errors;
+    this._errors = [];
+
+    const result = new ParsedCssResult(errors, ast);
+    this._file = null as any;
+    this._scanner = null as any;
+    return result;
+  }
+
+  /** @internal */
+  _parseStyleSheet(delimiters: number): CssStyleSheetAst {
+    const results: CssRuleAst[] = [];
+    this._scanner.consumeEmptyStatements();
+    while (this._scanner.peek != chars.$EOF) {
+      this._scanner.setMode(CssLexerMode.BLOCK);
+      results.push(this._parseRule(delimiters));
+    }
+    let span: ParseSourceSpan|null = null;
+    if (results.length > 0) {
+      const firstRule = results[0];
+      // we collect the last token like so incase there was an
+      // EOF token that was emitted sometime during the lexing
+      span = this._generateSourceSpan(firstRule, this._lastToken);
+    }
+    return new CssStyleSheetAst(span !, results);
+  }
+
+  /** @internal */
+  _getSourceContent(): string { return this._scanner != null ? this._scanner.input : ''; }
+
+  /** @internal */
+  _extractSourceContent(start: number, end: number): string {
+    return this._getSourceContent().substring(start, end + 1);
+  }
+
+  /** @internal */
+  _generateSourceSpan(start: CssToken|CssAst, end: CssToken|CssAst|null = null): ParseSourceSpan {
+    let startLoc: ParseLocation;
+    if (start instanceof CssAst) {
+      startLoc = start.location.start;
+    } else {
+      let token = start;
+      if (token == null) {
+        // the data here is invalid, however, if and when this does
+        // occur, any other errors associated with this will be collected
+        token = this._lastToken;
+      }
+      startLoc = new ParseLocation(this._file, token.index, token.line, token.column);
+    }
+
+    if (end == null) {
+      end = this._lastToken;
+    }
+
+    let endLine: number = -1;
+    let endColumn: number = -1;
+    let endIndex: number = -1;
+    if (end instanceof CssAst) {
+      endLine = end.location.end.line !;
+      endColumn = end.location.end.col !;
+      endIndex = end.location.end.offset !;
+    } else if (end instanceof CssToken) {
+      endLine = end.line;
+      endColumn = end.column;
+      endIndex = end.index;
+    }
+
+    const endLoc = new ParseLocation(this._file, endIndex, endLine, endColumn);
+    return new ParseSourceSpan(startLoc, endLoc);
+  }
+
+  /** @internal */
+  _resolveBlockType(token: CssToken): BlockType {
+    switch (token.strValue) {
+      case '@-o-keyframes':
+      case '@-moz-keyframes':
+      case '@-webkit-keyframes':
+      case '@keyframes':
+        return BlockType.Keyframes;
+
+      case '@charset':
+        return BlockType.Charset;
+
+      case '@import':
+        return BlockType.Import;
+
+      case '@namespace':
+        return BlockType.Namespace;
+
+      case '@page':
+        return BlockType.Page;
+
+      case '@document':
+        return BlockType.Document;
+
+      case '@media':
+        return BlockType.MediaQuery;
+
+      case '@font-face':
+        return BlockType.FontFace;
+
+      case '@viewport':
+        return BlockType.Viewport;
+
+      case '@supports':
+        return BlockType.Supports;
+
+      default:
+        return BlockType.Unsupported;
+    }
+  }
+
+  /** @internal */
+  _parseRule(delimiters: number): CssRuleAst {
+    if (this._scanner.peek == chars.$AT) {
+      return this._parseAtRule(delimiters);
+    }
+    return this._parseSelectorRule(delimiters);
+  }
+
+  /** @internal */
+  _parseAtRule(delimiters: number): CssRuleAst {
+    const start = this._getScannerIndex();
+
+    this._scanner.setMode(CssLexerMode.BLOCK);
+    const token = this._scan();
+    const startToken = token;
+
+    this._assertCondition(
+        token.type == CssTokenType.AtKeyword,
+        `The CSS Rule ${token.strValue} is not a valid [@] rule.`, token);
+
+    let block: CssBlockAst;
+    const type = this._resolveBlockType(token);
+    let span: ParseSourceSpan;
+    let tokens: CssToken[];
+    let endToken: CssToken;
+    let end: number;
+    let strValue: string;
+    let query: CssAtRulePredicateAst;
+    switch (type) {
+      case BlockType.Charset:
+      case BlockType.Namespace:
+      case BlockType.Import:
+        let value = this._parseValue(delimiters);
+        this._scanner.setMode(CssLexerMode.BLOCK);
+        this._scanner.consumeEmptyStatements();
+        span = this._generateSourceSpan(startToken, value);
+        return new CssInlineRuleAst(span, type, value);
+
+      case BlockType.Viewport:
+      case BlockType.FontFace:
+        block = this._parseStyleBlock(delimiters) !;
+        span = this._generateSourceSpan(startToken, block);
+        return new CssBlockRuleAst(span, type, block);
+
+      case BlockType.Keyframes:
+        tokens = this._collectUntilDelim(delimiters | RBRACE_DELIM_FLAG | LBRACE_DELIM_FLAG);
+        // keyframes only have one identifier name
+        let name = tokens[0];
+        block = this._parseKeyframeBlock(delimiters);
+        span = this._generateSourceSpan(startToken, block);
+        return new CssKeyframeRuleAst(span, name, block);
+
+      case BlockType.MediaQuery:
+        this._scanner.setMode(CssLexerMode.MEDIA_QUERY);
+        tokens = this._collectUntilDelim(delimiters | RBRACE_DELIM_FLAG | LBRACE_DELIM_FLAG);
+        endToken = tokens[tokens.length - 1];
+        // we do not track the whitespace after the mediaQuery predicate ends
+        // so we have to calculate the end string value on our own
+        end = endToken.index + endToken.strValue.length - 1;
+        strValue = this._extractSourceContent(start, end);
+        span = this._generateSourceSpan(startToken, endToken);
+        query = new CssAtRulePredicateAst(span, strValue, tokens);
+        block = this._parseBlock(delimiters);
+        strValue = this._extractSourceContent(start, this._getScannerIndex() - 1);
+        span = this._generateSourceSpan(startToken, block);
+        return new CssMediaQueryRuleAst(span, strValue, query, block);
+
+      case BlockType.Document:
+      case BlockType.Supports:
+      case BlockType.Page:
+        this._scanner.setMode(CssLexerMode.AT_RULE_QUERY);
+        tokens = this._collectUntilDelim(delimiters | RBRACE_DELIM_FLAG | LBRACE_DELIM_FLAG);
+        endToken = tokens[tokens.length - 1];
+        // we do not track the whitespace after this block rule predicate ends
+        // so we have to calculate the end string value on our own
+        end = endToken.index + endToken.strValue.length - 1;
+        strValue = this._extractSourceContent(start, end);
+        span = this._generateSourceSpan(startToken, tokens[tokens.length - 1]);
+        query = new CssAtRulePredicateAst(span, strValue, tokens);
+        block = this._parseBlock(delimiters);
+        strValue = this._extractSourceContent(start, block.end.offset !);
+        span = this._generateSourceSpan(startToken, block);
+        return new CssBlockDefinitionRuleAst(span, strValue, type, query, block);
+
+      // if a custom @rule { ... } is used it should still tokenize the insides
+      default:
+        let listOfTokens: CssToken[] = [];
+        let tokenName = token.strValue;
+        this._scanner.setMode(CssLexerMode.ALL);
+        this._error(
+            generateErrorMessage(
+                this._getSourceContent(),
+                `The CSS "at" rule "${tokenName}" is not allowed to used here`, token.strValue,
+                token.index, token.line, token.column),
+            token);
+
+        this._collectUntilDelim(delimiters | LBRACE_DELIM_FLAG | SEMICOLON_DELIM_FLAG)
+            .forEach((token) => { listOfTokens.push(token); });
+        if (this._scanner.peek == chars.$LBRACE) {
+          listOfTokens.push(this._consume(CssTokenType.Character, '{'));
+          this._collectUntilDelim(delimiters | RBRACE_DELIM_FLAG | LBRACE_DELIM_FLAG)
+              .forEach((token) => { listOfTokens.push(token); });
+          listOfTokens.push(this._consume(CssTokenType.Character, '}'));
+        }
+        endToken = listOfTokens[listOfTokens.length - 1];
+        span = this._generateSourceSpan(startToken, endToken);
+        return new CssUnknownRuleAst(span, tokenName, listOfTokens);
+    }
+  }
+
+  /** @internal */
+  _parseSelectorRule(delimiters: number): CssRuleAst {
+    const start = this._getScannerIndex();
+    const selectors = this._parseSelectors(delimiters);
+    const block = this._parseStyleBlock(delimiters);
+    let ruleAst: CssRuleAst;
+    let span: ParseSourceSpan;
+    const startSelector = selectors[0];
+    if (block != null) {
+      span = this._generateSourceSpan(startSelector, block);
+      ruleAst = new CssSelectorRuleAst(span, selectors, block);
+    } else {
+      const name = this._extractSourceContent(start, this._getScannerIndex() - 1);
+      const innerTokens: CssToken[] = [];
+      selectors.forEach((selector: CssSelectorAst) => {
+        selector.selectorParts.forEach((part: CssSimpleSelectorAst) => {
+          part.tokens.forEach((token: CssToken) => { innerTokens.push(token); });
+        });
+      });
+      const endToken = innerTokens[innerTokens.length - 1];
+      span = this._generateSourceSpan(startSelector, endToken);
+      ruleAst = new CssUnknownTokenListAst(span, name, innerTokens);
+    }
+    this._scanner.setMode(CssLexerMode.BLOCK);
+    this._scanner.consumeEmptyStatements();
+    return ruleAst;
+  }
+
+  /** @internal */
+  _parseSelectors(delimiters: number): CssSelectorAst[] {
+    delimiters |= LBRACE_DELIM_FLAG | SEMICOLON_DELIM_FLAG;
+
+    const selectors: CssSelectorAst[] = [];
+    let isParsingSelectors = true;
+    while (isParsingSelectors) {
+      selectors.push(this._parseSelector(delimiters));
+
+      isParsingSelectors = !characterContainsDelimiter(this._scanner.peek, delimiters);
+
+      if (isParsingSelectors) {
+        this._consume(CssTokenType.Character, ',');
+        isParsingSelectors = !characterContainsDelimiter(this._scanner.peek, delimiters);
+        if (isParsingSelectors) {
+          this._scanner.consumeWhitespace();
+        }
+      }
+    }
+
+    return selectors;
+  }
+
+  /** @internal */
+  _scan(): CssToken {
+    const output = this._scanner.scan() !;
+    const token = output.token;
+    const error = output.error;
+    if (error != null) {
+      this._error(getRawMessage(error), token);
+    }
+    this._lastToken = token;
+    return token;
+  }
+
+  /** @internal */
+  _getScannerIndex(): number { return this._scanner.index; }
+
+  /** @internal */
+  _consume(type: CssTokenType, value: string|null = null): CssToken {
+    const output = this._scanner.consume(type, value);
+    const token = output.token;
+    const error = output.error;
+    if (error != null) {
+      this._error(getRawMessage(error), token);
+    }
+    this._lastToken = token;
+    return token;
+  }
+
+  /** @internal */
+  _parseKeyframeBlock(delimiters: number): CssBlockAst {
+    delimiters |= RBRACE_DELIM_FLAG;
+    this._scanner.setMode(CssLexerMode.KEYFRAME_BLOCK);
+
+    const startToken = this._consume(CssTokenType.Character, '{');
+
+    const definitions: CssKeyframeDefinitionAst[] = [];
+    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
+      definitions.push(this._parseKeyframeDefinition(delimiters));
+    }
+
+    const endToken = this._consume(CssTokenType.Character, '}');
+
+    const span = this._generateSourceSpan(startToken, endToken);
+    return new CssBlockAst(span, definitions);
+  }
+
+  /** @internal */
+  _parseKeyframeDefinition(delimiters: number): CssKeyframeDefinitionAst {
+    const start = this._getScannerIndex();
+    const stepTokens: CssToken[] = [];
+    delimiters |= LBRACE_DELIM_FLAG;
+    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
+      stepTokens.push(this._parseKeyframeLabel(delimiters | COMMA_DELIM_FLAG));
+      if (this._scanner.peek != chars.$LBRACE) {
+        this._consume(CssTokenType.Character, ',');
+      }
+    }
+    const stylesBlock = this._parseStyleBlock(delimiters | RBRACE_DELIM_FLAG);
+    const span = this._generateSourceSpan(stepTokens[0], stylesBlock);
+    const ast = new CssKeyframeDefinitionAst(span, stepTokens, stylesBlock !);
+
+    this._scanner.setMode(CssLexerMode.BLOCK);
+    return ast;
+  }
+
+  /** @internal */
+  _parseKeyframeLabel(delimiters: number): CssToken {
+    this._scanner.setMode(CssLexerMode.KEYFRAME_BLOCK);
+    return mergeTokens(this._collectUntilDelim(delimiters));
+  }
+
+  /** @internal */
+  _parsePseudoSelector(delimiters: number): CssPseudoSelectorAst {
+    const start = this._getScannerIndex();
+
+    delimiters &= ~COMMA_DELIM_FLAG;
+
+    // we keep the original value since we may use it to recurse when :not, :host are used
+    const startingDelims = delimiters;
+
+    const startToken = this._consume(CssTokenType.Character, ':');
+    const tokens = [startToken];
+
+    if (this._scanner.peek == chars.$COLON) {  // ::something
+      tokens.push(this._consume(CssTokenType.Character, ':'));
+    }
+
+    const innerSelectors: CssSelectorAst[] = [];
+
+    this._scanner.setMode(CssLexerMode.PSEUDO_SELECTOR);
+
+    // host, host-context, lang, not, nth-child are all identifiers
+    const pseudoSelectorToken = this._consume(CssTokenType.Identifier);
+    const pseudoSelectorName = pseudoSelectorToken.strValue;
+    tokens.push(pseudoSelectorToken);
+
+    // host(), lang(), nth-child(), etc...
+    if (this._scanner.peek == chars.$LPAREN) {
+      this._scanner.setMode(CssLexerMode.PSEUDO_SELECTOR_WITH_ARGUMENTS);
+
+      const openParenToken = this._consume(CssTokenType.Character, '(');
+      tokens.push(openParenToken);
+
+      // :host(innerSelector(s)), :not(selector), etc...
+      if (_pseudoSelectorSupportsInnerSelectors(pseudoSelectorName)) {
+        let innerDelims = startingDelims | LPAREN_DELIM_FLAG | RPAREN_DELIM_FLAG;
+        if (pseudoSelectorName == 'not') {
+          // the inner selector inside of :not(...) can only be one
+          // CSS selector (no commas allowed) ... This is according
+          // to the CSS specification
+          innerDelims |= COMMA_DELIM_FLAG;
+        }
+
+        // :host(a, b, c) {
+        this._parseSelectors(innerDelims).forEach((selector, index) => {
+          innerSelectors.push(selector);
+        });
+      } else {
+        // this branch is for things like "en-us, 2k + 1, etc..."
+        // which all end up in pseudoSelectors like :lang, :nth-child, etc..
+        const innerValueDelims = delimiters | LBRACE_DELIM_FLAG | COLON_DELIM_FLAG |
+            RPAREN_DELIM_FLAG | LPAREN_DELIM_FLAG;
+        while (!characterContainsDelimiter(this._scanner.peek, innerValueDelims)) {
+          const token = this._scan();
+          tokens.push(token);
+        }
+      }
+
+      const closeParenToken = this._consume(CssTokenType.Character, ')');
+      tokens.push(closeParenToken);
+    }
+
+    const end = this._getScannerIndex() - 1;
+    const strValue = this._extractSourceContent(start, end);
+
+    const endToken = tokens[tokens.length - 1];
+    const span = this._generateSourceSpan(startToken, endToken);
+    return new CssPseudoSelectorAst(span, strValue, pseudoSelectorName, tokens, innerSelectors);
+  }
+
+  /** @internal */
+  _parseSimpleSelector(delimiters: number): CssSimpleSelectorAst {
+    const start = this._getScannerIndex();
+
+    delimiters |= COMMA_DELIM_FLAG;
+
+    this._scanner.setMode(CssLexerMode.SELECTOR);
+    const selectorCssTokens: CssToken[] = [];
+    const pseudoSelectors: CssPseudoSelectorAst[] = [];
+
+    let previousToken: CssToken = undefined !;
+
+    const selectorPartDelimiters = delimiters | SPACE_DELIM_FLAG;
+    let loopOverSelector = !characterContainsDelimiter(this._scanner.peek, selectorPartDelimiters);
+
+    let hasAttributeError = false;
+    while (loopOverSelector) {
+      const peek = this._scanner.peek;
+
+      switch (peek) {
+        case chars.$COLON:
+          let innerPseudo = this._parsePseudoSelector(delimiters);
+          pseudoSelectors.push(innerPseudo);
+          this._scanner.setMode(CssLexerMode.SELECTOR);
+          break;
+
+        case chars.$LBRACKET:
+          // we set the mode after the scan because attribute mode does not
+          // allow attribute [] values. And this also will catch any errors
+          // if an extra "[" is used inside.
+          selectorCssTokens.push(this._scan());
+          this._scanner.setMode(CssLexerMode.ATTRIBUTE_SELECTOR);
+          break;
+
+        case chars.$RBRACKET:
+          if (this._scanner.getMode() != CssLexerMode.ATTRIBUTE_SELECTOR) {
+            hasAttributeError = true;
+          }
+          // we set the mode early because attribute mode does not
+          // allow attribute [] values
+          this._scanner.setMode(CssLexerMode.SELECTOR);
+          selectorCssTokens.push(this._scan());
+          break;
+
+        default:
+          if (isSelectorOperatorCharacter(peek)) {
+            loopOverSelector = false;
+            continue;
+          }
+
+          let token = this._scan();
+          previousToken = token;
+          selectorCssTokens.push(token);
+          break;
+      }
+
+      loopOverSelector = !characterContainsDelimiter(this._scanner.peek, selectorPartDelimiters);
+    }
+
+    hasAttributeError =
+        hasAttributeError || this._scanner.getMode() == CssLexerMode.ATTRIBUTE_SELECTOR;
+    if (hasAttributeError) {
+      this._error(
+          `Unbalanced CSS attribute selector at column ${previousToken.line}:${previousToken.column}`,
+          previousToken);
+    }
+
+    let end = this._getScannerIndex() - 1;
+
+    // this happens if the selector is not directly followed by
+    // a comma or curly brace without a space in between
+    let operator: CssToken|null = null;
+    let operatorScanCount = 0;
+    let lastOperatorToken: CssToken|null = null;
+    if (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
+      while (operator == null && !characterContainsDelimiter(this._scanner.peek, delimiters) &&
+             isSelectorOperatorCharacter(this._scanner.peek)) {
+        let token = this._scan();
+        const tokenOperator = token.strValue;
+        operatorScanCount++;
+        lastOperatorToken = token;
+        if (tokenOperator != SPACE_OPERATOR) {
+          switch (tokenOperator) {
+            case SLASH_CHARACTER:
+              // /deep/ operator
+              let deepToken = this._consume(CssTokenType.Identifier);
+              let deepSlash = this._consume(CssTokenType.Character);
+              let index = lastOperatorToken.index;
+              let line = lastOperatorToken.line;
+              let column = lastOperatorToken.column;
+              if (deepToken != null && deepToken.strValue.toLowerCase() == 'deep' &&
+                  deepSlash.strValue == SLASH_CHARACTER) {
+                token = new CssToken(
+                    lastOperatorToken.index, lastOperatorToken.column, lastOperatorToken.line,
+                    CssTokenType.Identifier, DEEP_OPERATOR_STR);
+              } else {
+                const text = SLASH_CHARACTER + deepToken.strValue + deepSlash.strValue;
+                this._error(
+                    generateErrorMessage(
+                        this._getSourceContent(), `${text} is an invalid CSS operator`, text, index,
+                        line, column),
+                    lastOperatorToken);
+                token = new CssToken(index, column, line, CssTokenType.Invalid, text);
+              }
+              break;
+
+            case GT_CHARACTER:
+              // >>> operator
+              if (this._scanner.peek == chars.$GT && this._scanner.peekPeek == chars.$GT) {
+                this._consume(CssTokenType.Character, GT_CHARACTER);
+                this._consume(CssTokenType.Character, GT_CHARACTER);
+                token = new CssToken(
+                    lastOperatorToken.index, lastOperatorToken.column, lastOperatorToken.line,
+                    CssTokenType.Identifier, TRIPLE_GT_OPERATOR_STR);
+              }
+              break;
+          }
+
+          operator = token;
+        }
+      }
+
+      // so long as there is an operator then we can have an
+      // ending value that is beyond the selector value ...
+      // otherwise it's just a bunch of trailing whitespace
+      if (operator != null) {
+        end = operator.index;
+      }
+    }
+
+    this._scanner.consumeWhitespace();
+
+    const strValue = this._extractSourceContent(start, end);
+
+    // if we do come across one or more spaces inside of
+    // the operators loop then an empty space is still a
+    // valid operator to use if something else was not found
+    if (operator == null && operatorScanCount > 0 && this._scanner.peek != chars.$LBRACE) {
+      operator = lastOperatorToken;
+    }
+
+    // please note that `endToken` is reassigned multiple times below
+    // so please do not optimize the if statements into if/elseif
+    let startTokenOrAst: CssToken|CssAst|null = null;
+    let endTokenOrAst: CssToken|CssAst|null = null;
+    if (selectorCssTokens.length > 0) {
+      startTokenOrAst = startTokenOrAst || selectorCssTokens[0];
+      endTokenOrAst = selectorCssTokens[selectorCssTokens.length - 1];
+    }
+    if (pseudoSelectors.length > 0) {
+      startTokenOrAst = startTokenOrAst || pseudoSelectors[0];
+      endTokenOrAst = pseudoSelectors[pseudoSelectors.length - 1];
+    }
+    if (operator != null) {
+      startTokenOrAst = startTokenOrAst || operator;
+      endTokenOrAst = operator;
+    }
+
+    const span = this._generateSourceSpan(startTokenOrAst !, endTokenOrAst);
+    return new CssSimpleSelectorAst(span, selectorCssTokens, strValue, pseudoSelectors, operator !);
+  }
+
+  /** @internal */
+  _parseSelector(delimiters: number): CssSelectorAst {
+    delimiters |= COMMA_DELIM_FLAG;
+    this._scanner.setMode(CssLexerMode.SELECTOR);
+
+    const simpleSelectors: CssSimpleSelectorAst[] = [];
+    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
+      simpleSelectors.push(this._parseSimpleSelector(delimiters));
+      this._scanner.consumeWhitespace();
+    }
+
+    const firstSelector = simpleSelectors[0];
+    const lastSelector = simpleSelectors[simpleSelectors.length - 1];
+    const span = this._generateSourceSpan(firstSelector, lastSelector);
+    return new CssSelectorAst(span, simpleSelectors);
+  }
+
+  /** @internal */
+  _parseValue(delimiters: number): CssStyleValueAst {
+    delimiters |= RBRACE_DELIM_FLAG | SEMICOLON_DELIM_FLAG | NEWLINE_DELIM_FLAG;
+
+    this._scanner.setMode(CssLexerMode.STYLE_VALUE);
+    const start = this._getScannerIndex();
+
+    const tokens: CssToken[] = [];
+    let wsStr = '';
+    let previous: CssToken = undefined !;
+    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
+      let token: CssToken;
+      if (previous != null && previous.type == CssTokenType.Identifier &&
+          this._scanner.peek == chars.$LPAREN) {
+        token = this._consume(CssTokenType.Character, '(');
+        tokens.push(token);
+
+        this._scanner.setMode(CssLexerMode.STYLE_VALUE_FUNCTION);
+
+        token = this._scan();
+        tokens.push(token);
+
+        this._scanner.setMode(CssLexerMode.STYLE_VALUE);
+
+        token = this._consume(CssTokenType.Character, ')');
+        tokens.push(token);
+      } else {
+        token = this._scan();
+        if (token.type == CssTokenType.Whitespace) {
+          wsStr += token.strValue;
+        } else {
+          wsStr = '';
+          tokens.push(token);
+        }
+      }
+      previous = token;
+    }
+
+    const end = this._getScannerIndex() - 1;
+    this._scanner.consumeWhitespace();
+
+    const code = this._scanner.peek;
+    if (code == chars.$SEMICOLON) {
+      this._consume(CssTokenType.Character, ';');
+    } else if (code != chars.$RBRACE) {
+      this._error(
+          generateErrorMessage(
+              this._getSourceContent(), `The CSS key/value definition did not end with a semicolon`,
+              previous.strValue, previous.index, previous.line, previous.column),
+          previous);
+    }
+
+    const strValue = this._extractSourceContent(start, end);
+    const startToken = tokens[0];
+    const endToken = tokens[tokens.length - 1];
+    const span = this._generateSourceSpan(startToken, endToken);
+    return new CssStyleValueAst(span, tokens, strValue);
+  }
+
+  /** @internal */
+  _collectUntilDelim(delimiters: number, assertType: CssTokenType|null = null): CssToken[] {
+    const tokens: CssToken[] = [];
+    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
+      const val = assertType != null ? this._consume(assertType) : this._scan();
+      tokens.push(val);
+    }
+    return tokens;
+  }
+
+  /** @internal */
+  _parseBlock(delimiters: number): CssBlockAst {
+    delimiters |= RBRACE_DELIM_FLAG;
+
+    this._scanner.setMode(CssLexerMode.BLOCK);
+
+    const startToken = this._consume(CssTokenType.Character, '{');
+    this._scanner.consumeEmptyStatements();
+
+    const results: CssRuleAst[] = [];
+    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
+      results.push(this._parseRule(delimiters));
+    }
+
+    const endToken = this._consume(CssTokenType.Character, '}');
+
+    this._scanner.setMode(CssLexerMode.BLOCK);
+    this._scanner.consumeEmptyStatements();
+
+    const span = this._generateSourceSpan(startToken, endToken);
+    return new CssBlockAst(span, results);
+  }
+
+  /** @internal */
+  _parseStyleBlock(delimiters: number): CssStylesBlockAst|null {
+    delimiters |= RBRACE_DELIM_FLAG | LBRACE_DELIM_FLAG;
+
+    this._scanner.setMode(CssLexerMode.STYLE_BLOCK);
+
+    const startToken = this._consume(CssTokenType.Character, '{');
+    if (startToken.numValue != chars.$LBRACE) {
+      return null;
+    }
+
+    const definitions: CssDefinitionAst[] = [];
+    this._scanner.consumeEmptyStatements();
+
+    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
+      definitions.push(this._parseDefinition(delimiters));
+      this._scanner.consumeEmptyStatements();
+    }
+
+    const endToken = this._consume(CssTokenType.Character, '}');
+
+    this._scanner.setMode(CssLexerMode.STYLE_BLOCK);
+    this._scanner.consumeEmptyStatements();
+
+    const span = this._generateSourceSpan(startToken, endToken);
+    return new CssStylesBlockAst(span, definitions);
+  }
+
+  /** @internal */
+  _parseDefinition(delimiters: number): CssDefinitionAst {
+    this._scanner.setMode(CssLexerMode.STYLE_BLOCK);
+
+    let prop = this._consume(CssTokenType.Identifier);
+    let parseValue: boolean = false;
+    let value: CssStyleValueAst|null = null;
+    let endToken: CssToken|CssStyleValueAst = prop;
+
+    // the colon value separates the prop from the style.
+    // there are a few cases as to what could happen if it
+    // is missing
+    switch (this._scanner.peek) {
+      case chars.$SEMICOLON:
+      case chars.$RBRACE:
+      case chars.$EOF:
+        parseValue = false;
+        break;
+
+      default:
+        let propStr = [prop.strValue];
+        if (this._scanner.peek != chars.$COLON) {
+          // this will throw the error
+          const nextValue = this._consume(CssTokenType.Character, ':');
+          propStr.push(nextValue.strValue);
+
+          const remainingTokens = this._collectUntilDelim(
+              delimiters | COLON_DELIM_FLAG | SEMICOLON_DELIM_FLAG, CssTokenType.Identifier);
+          if (remainingTokens.length > 0) {
+            remainingTokens.forEach((token) => { propStr.push(token.strValue); });
+          }
+
+          endToken = prop =
+              new CssToken(prop.index, prop.column, prop.line, prop.type, propStr.join(' '));
+        }
+
+        // this means we've reached the end of the definition and/or block
+        if (this._scanner.peek == chars.$COLON) {
+          this._consume(CssTokenType.Character, ':');
+          parseValue = true;
+        }
+        break;
+    }
+
+    if (parseValue) {
+      value = this._parseValue(delimiters);
+      endToken = value;
+    } else {
+      this._error(
+          generateErrorMessage(
+              this._getSourceContent(), `The CSS property was not paired with a style value`,
+              prop.strValue, prop.index, prop.line, prop.column),
+          prop);
+    }
+
+    const span = this._generateSourceSpan(prop, endToken);
+    return new CssDefinitionAst(span, prop, value !);
+  }
+
+  /** @internal */
+  _assertCondition(status: boolean, errorMessage: string, problemToken: CssToken): boolean {
+    if (!status) {
+      this._error(errorMessage, problemToken);
+      return true;
+    }
+    return false;
+  }
+
+  /** @internal */
+  _error(message: string, problemToken: CssToken) {
+    const length = problemToken.strValue.length;
+    const error = CssParseError.create(
+        this._file, 0, problemToken.line, problemToken.column, length, message);
+    this._errors.push(error);
+  }
+}
+
+export class CssParseError extends ParseError {
+  static create(
+      file: ParseSourceFile, offset: number, line: number, col: number, length: number,
+      errMsg: string): CssParseError {
+    const start = new ParseLocation(file, offset, line, col);
+    const end = new ParseLocation(file, offset, line, col + length);
+    const span = new ParseSourceSpan(start, end);
+    return new CssParseError(span, 'CSS Parse Error: ' + errMsg);
+  }
+
+  constructor(span: ParseSourceSpan, message: string) { super(span, message); }
+}
diff --git a/packages/compiler/src/directive_normalizer.ts b/packages/compiler/src/directive_normalizer.ts
new file mode 100644
index 000000000000..06613f361ff7
--- /dev/null
+++ b/packages/compiler/src/directive_normalizer.ts
@@ -0,0 +1,310 @@
+/**
+ * @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 {CompileDirectiveMetadata, CompileStylesheetMetadata, CompileTemplateMetadata, templateSourceUrl} from './compile_metadata';
+import {CompilerConfig, preserveWhitespacesDefault} from './config';
+import {ViewEncapsulation} from './core';
+import * as html from './ml_parser/ast';
+import {HtmlParser} from './ml_parser/html_parser';
+import {InterpolationConfig} from './ml_parser/interpolation_config';
+import {ParseTreeResult as HtmlParseTreeResult} from './ml_parser/parser';
+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 {SyncAsync, isDefined, stringify, syntaxError} from './util';
+
+export interface PrenormalizedTemplateMetadata {
+  ngModuleType: any;
+  componentType: any;
+  moduleUrl: string;
+  template: string|null;
+  templateUrl: string|null;
+  styles: string[];
+  styleUrls: string[];
+  interpolation: [string, string]|null;
+  encapsulation: ViewEncapsulation|null;
+  animations: any[];
+  preserveWhitespaces: boolean|null;
+}
+
+export class DirectiveNormalizer {
+  private _resourceLoaderCache = new Map<string, SyncAsync<string>>();
+
+  constructor(
+      private _resourceLoader: ResourceLoader, private _urlResolver: UrlResolver,
+      private _htmlParser: HtmlParser, private _config: CompilerConfig) {}
+
+  clearCache(): void { this._resourceLoaderCache.clear(); }
+
+  clearCacheFor(normalizedDirective: CompileDirectiveMetadata): void {
+    if (!normalizedDirective.isComponent) {
+      return;
+    }
+    const template = normalizedDirective.template !;
+    this._resourceLoaderCache.delete(template.templateUrl !);
+    template.externalStylesheets.forEach(
+        (stylesheet) => { this._resourceLoaderCache.delete(stylesheet.moduleUrl !); });
+  }
+
+  private _fetch(url: string): SyncAsync<string> {
+    let result = this._resourceLoaderCache.get(url);
+    if (!result) {
+      result = this._resourceLoader.get(url);
+      this._resourceLoaderCache.set(url, result);
+    }
+    return result;
+  }
+
+  normalizeTemplate(prenormData: PrenormalizedTemplateMetadata):
+      SyncAsync<CompileTemplateMetadata> {
+    if (isDefined(prenormData.template)) {
+      if (isDefined(prenormData.templateUrl)) {
+        throw syntaxError(
+            `'${stringify(prenormData.componentType)}' component cannot define both template and templateUrl`);
+      }
+      if (typeof prenormData.template !== 'string') {
+        throw syntaxError(
+            `The template specified for component ${stringify(prenormData.componentType)} is not a string`);
+      }
+    } else if (isDefined(prenormData.templateUrl)) {
+      if (typeof prenormData.templateUrl !== 'string') {
+        throw syntaxError(
+            `The templateUrl specified for component ${stringify(prenormData.componentType)} is not a string`);
+      }
+    } else {
+      throw syntaxError(
+          `No template specified for component ${stringify(prenormData.componentType)}`);
+    }
+
+    if (isDefined(prenormData.preserveWhitespaces) &&
+        typeof prenormData.preserveWhitespaces !== 'boolean') {
+      throw syntaxError(
+          `The preserveWhitespaces option for component ${stringify(prenormData.componentType)} must be a boolean`);
+    }
+
+    return SyncAsync.then(
+        this._preParseTemplate(prenormData),
+        (preparsedTemplate) => this._normalizeTemplateMetadata(prenormData, preparsedTemplate));
+  }
+
+  private _preParseTemplate(prenomData: PrenormalizedTemplateMetadata):
+      SyncAsync<PreparsedTemplate> {
+    let template: SyncAsync<string>;
+    let templateUrl: string;
+    if (prenomData.template != null) {
+      template = prenomData.template;
+      templateUrl = prenomData.moduleUrl;
+    } else {
+      templateUrl = this._urlResolver.resolve(prenomData.moduleUrl, prenomData.templateUrl !);
+      template = this._fetch(templateUrl);
+    }
+    return SyncAsync.then(
+        template, (template) => this._preparseLoadedTemplate(prenomData, template, templateUrl));
+  }
+
+  private _preparseLoadedTemplate(
+      prenormData: PrenormalizedTemplateMetadata, template: string,
+      templateAbsUrl: string): PreparsedTemplate {
+    const isInline = !!prenormData.template;
+    const interpolationConfig = InterpolationConfig.fromArray(prenormData.interpolation !);
+    const rootNodesAndErrors = this._htmlParser.parse(
+        template,
+        templateSourceUrl(
+            {reference: prenormData.ngModuleType}, {type: {reference: prenormData.componentType}},
+            {isInline, templateUrl: templateAbsUrl}),
+        true, interpolationConfig);
+    if (rootNodesAndErrors.errors.length > 0) {
+      const errorString = rootNodesAndErrors.errors.join('\n');
+      throw syntaxError(`Template parse errors:\n${errorString}`);
+    }
+
+    const templateMetadataStyles = this._normalizeStylesheet(new CompileStylesheetMetadata(
+        {styles: prenormData.styles, moduleUrl: prenormData.moduleUrl}));
+
+    const visitor = new TemplatePreparseVisitor();
+    html.visitAll(visitor, rootNodesAndErrors.rootNodes);
+    const templateStyles = this._normalizeStylesheet(new CompileStylesheetMetadata(
+        {styles: visitor.styles, styleUrls: visitor.styleUrls, moduleUrl: templateAbsUrl}));
+
+    const styles = templateMetadataStyles.styles.concat(templateStyles.styles);
+
+    const inlineStyleUrls = templateMetadataStyles.styleUrls.concat(templateStyles.styleUrls);
+    const styleUrls = this
+                          ._normalizeStylesheet(new CompileStylesheetMetadata(
+                              {styleUrls: prenormData.styleUrls, moduleUrl: prenormData.moduleUrl}))
+                          .styleUrls;
+    return {
+      template,
+      templateUrl: templateAbsUrl, isInline,
+      htmlAst: rootNodesAndErrors, styles, inlineStyleUrls, styleUrls,
+      ngContentSelectors: visitor.ngContentSelectors,
+    };
+  }
+
+  private _normalizeTemplateMetadata(
+      prenormData: PrenormalizedTemplateMetadata,
+      preparsedTemplate: PreparsedTemplate): SyncAsync<CompileTemplateMetadata> {
+    return SyncAsync.then(
+        this._loadMissingExternalStylesheets(
+            preparsedTemplate.styleUrls.concat(preparsedTemplate.inlineStyleUrls)),
+        (externalStylesheets) => this._normalizeLoadedTemplateMetadata(
+            prenormData, preparsedTemplate, externalStylesheets));
+  }
+
+  private _normalizeLoadedTemplateMetadata(
+      prenormData: PrenormalizedTemplateMetadata, preparsedTemplate: PreparsedTemplate,
+      stylesheets: Map<string, CompileStylesheetMetadata>): CompileTemplateMetadata {
+    // Algorithm:
+    // - produce exactly 1 entry per original styleUrl in
+    // CompileTemplateMetadata.externalStylesheets with all styles inlined
+    // - inline all styles that are referenced by the template into CompileTemplateMetadata.styles.
+    // Reason: be able to determine how many stylesheets there are even without loading
+    // the template nor the stylesheets, so we can create a stub for TypeScript always synchronously
+    // (as resource loading may be async)
+
+    const styles = [...preparsedTemplate.styles];
+    this._inlineStyles(preparsedTemplate.inlineStyleUrls, stylesheets, styles);
+    const styleUrls = preparsedTemplate.styleUrls;
+
+    const externalStylesheets = styleUrls.map(styleUrl => {
+      const stylesheet = stylesheets.get(styleUrl) !;
+      const styles = [...stylesheet.styles];
+      this._inlineStyles(stylesheet.styleUrls, stylesheets, styles);
+      return new CompileStylesheetMetadata({moduleUrl: styleUrl, styles: styles});
+    });
+
+    let encapsulation = prenormData.encapsulation;
+    if (encapsulation == null) {
+      encapsulation = this._config.defaultEncapsulation;
+    }
+    if (encapsulation === ViewEncapsulation.Emulated && styles.length === 0 &&
+        styleUrls.length === 0) {
+      encapsulation = ViewEncapsulation.None;
+    }
+    return new CompileTemplateMetadata({
+      encapsulation,
+      template: preparsedTemplate.template,
+      templateUrl: preparsedTemplate.templateUrl,
+      htmlAst: preparsedTemplate.htmlAst, styles, styleUrls,
+      ngContentSelectors: preparsedTemplate.ngContentSelectors,
+      animations: prenormData.animations,
+      interpolation: prenormData.interpolation,
+      isInline: preparsedTemplate.isInline, externalStylesheets,
+      preserveWhitespaces: preserveWhitespacesDefault(
+          prenormData.preserveWhitespaces, this._config.preserveWhitespaces),
+    });
+  }
+
+  private _inlineStyles(
+      styleUrls: string[], stylesheets: Map<string, CompileStylesheetMetadata>,
+      targetStyles: string[]) {
+    styleUrls.forEach(styleUrl => {
+      const stylesheet = stylesheets.get(styleUrl) !;
+      stylesheet.styles.forEach(style => targetStyles.push(style));
+      this._inlineStyles(stylesheet.styleUrls, stylesheets, targetStyles);
+    });
+  }
+
+  private _loadMissingExternalStylesheets(
+      styleUrls: string[],
+      loadedStylesheets:
+          Map<string, CompileStylesheetMetadata> = new Map<string, CompileStylesheetMetadata>()):
+      SyncAsync<Map<string, 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);
+                                  }))),
+        (_) => loadedStylesheets);
+  }
+
+  private _normalizeStylesheet(stylesheet: CompileStylesheetMetadata): CompileStylesheetMetadata {
+    const moduleUrl = stylesheet.moduleUrl !;
+    const allStyleUrls = stylesheet.styleUrls.filter(isStyleUrlResolvable)
+                             .map(url => this._urlResolver.resolve(moduleUrl, url));
+
+    const allStyles = stylesheet.styles.map(style => {
+      const styleWithImports = extractStyleUrls(this._urlResolver, moduleUrl, style);
+      allStyleUrls.push(...styleWithImports.styleUrls);
+      return styleWithImports.style;
+    });
+
+    return new CompileStylesheetMetadata(
+        {styles: allStyles, styleUrls: allStyleUrls, moduleUrl: moduleUrl});
+  }
+}
+
+interface PreparsedTemplate {
+  template: string;
+  templateUrl: string;
+  isInline: boolean;
+  htmlAst: HtmlParseTreeResult;
+  styles: string[];
+  inlineStyleUrls: string[];
+  styleUrls: string[];
+  ngContentSelectors: string[];
+}
+
+class TemplatePreparseVisitor implements html.Visitor {
+  ngContentSelectors: string[] = [];
+  styles: string[] = [];
+  styleUrls: string[] = [];
+  ngNonBindableStackCount: number = 0;
+
+  visitElement(ast: html.Element, context: any): any {
+    const preparsedElement = preparseElement(ast);
+    switch (preparsedElement.type) {
+      case PreparsedElementType.NG_CONTENT:
+        if (this.ngNonBindableStackCount === 0) {
+          this.ngContentSelectors.push(preparsedElement.selectAttr);
+        }
+        break;
+      case PreparsedElementType.STYLE:
+        let textContent = '';
+        ast.children.forEach(child => {
+          if (child instanceof html.Text) {
+            textContent += child.value;
+          }
+        });
+        this.styles.push(textContent);
+        break;
+      case PreparsedElementType.STYLESHEET:
+        this.styleUrls.push(preparsedElement.hrefAttr);
+        break;
+      default:
+        break;
+    }
+    if (preparsedElement.nonBindable) {
+      this.ngNonBindableStackCount++;
+    }
+    html.visitAll(this, ast.children);
+    if (preparsedElement.nonBindable) {
+      this.ngNonBindableStackCount--;
+    }
+    return null;
+  }
+
+  visitExpansion(ast: html.Expansion, context: any): any { html.visitAll(this, ast.cases); }
+
+  visitExpansionCase(ast: html.ExpansionCase, context: any): any {
+    html.visitAll(this, ast.expression);
+  }
+
+  visitComment(ast: html.Comment, context: any): any { return null; }
+  visitAttribute(ast: html.Attribute, context: any): any { return null; }
+  visitText(ast: html.Text, context: any): any { return null; }
+}
diff --git a/packages/compiler/src/directive_resolver.ts b/packages/compiler/src/directive_resolver.ts
new file mode 100644
index 000000000000..be786b4a9bb4
--- /dev/null
+++ b/packages/compiler/src/directive_resolver.ts
@@ -0,0 +1,188 @@
+/**
+ * @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 {CompileReflector} from './compile_reflector';
+import {Component, Directive, Type, createComponent, createContentChild, createContentChildren, createDirective, createHostBinding, createHostListener, createInput, createOutput, createViewChild, createViewChildren} from './core';
+import {resolveForwardRef, splitAtColon, stringify} from './util';
+
+const QUERY_METADATA_IDENTIFIERS = [
+  createViewChild,
+  createViewChildren,
+  createContentChild,
+  createContentChildren,
+];
+
+/*
+ * Resolve a `Type` for {@link Directive}.
+ *
+ * This interface can be overridden by the application developer to create custom behavior.
+ *
+ * See {@link Compiler}
+ */
+export class DirectiveResolver {
+  constructor(private _reflector: CompileReflector) {}
+
+  isDirective(type: Type) {
+    const typeMetadata = this._reflector.annotations(resolveForwardRef(type));
+    return typeMetadata && typeMetadata.some(isDirectiveMetadata);
+  }
+
+  /**
+   * Return {@link Directive} for a given `Type`.
+   */
+  resolve(type: Type): Directive;
+  resolve(type: Type, throwIfNotFound: true): Directive;
+  resolve(type: Type, throwIfNotFound: boolean): Directive|null;
+  resolve(type: Type, throwIfNotFound = true): Directive|null {
+    const typeMetadata = this._reflector.annotations(resolveForwardRef(type));
+    if (typeMetadata) {
+      const metadata = findLast(typeMetadata, isDirectiveMetadata);
+      if (metadata) {
+        const propertyMetadata = this._reflector.propMetadata(type);
+        const guards = this._reflector.guards(type);
+        return this._mergeWithPropertyMetadata(metadata, propertyMetadata, guards, type);
+      }
+    }
+
+    if (throwIfNotFound) {
+      throw new Error(`No Directive annotation found on ${stringify(type)}`);
+    }
+
+    return null;
+  }
+
+  private _mergeWithPropertyMetadata(
+      dm: Directive, propertyMetadata: {[key: string]: any[]}, guards: {[key: string]: any},
+      directiveType: Type): Directive {
+    const inputs: string[] = [];
+    const outputs: string[] = [];
+    const host: {[key: string]: string} = {};
+    const queries: {[key: string]: any} = {};
+    Object.keys(propertyMetadata).forEach((propName: string) => {
+      const input = findLast(propertyMetadata[propName], (a) => createInput.isTypeOf(a));
+      if (input) {
+        if (input.bindingPropertyName) {
+          inputs.push(`${propName}: ${input.bindingPropertyName}`);
+        } else {
+          inputs.push(propName);
+        }
+      }
+      const output = findLast(propertyMetadata[propName], (a) => createOutput.isTypeOf(a));
+      if (output) {
+        if (output.bindingPropertyName) {
+          outputs.push(`${propName}: ${output.bindingPropertyName}`);
+        } else {
+          outputs.push(propName);
+        }
+      }
+      const hostBindings = propertyMetadata[propName].filter(a => createHostBinding.isTypeOf(a));
+      hostBindings.forEach(hostBinding => {
+        if (hostBinding.hostPropertyName) {
+          const startWith = hostBinding.hostPropertyName[0];
+          if (startWith === '(') {
+            throw new Error(`@HostBinding can not bind to events. Use @HostListener instead.`);
+          } else if (startWith === '[') {
+            throw new Error(
+                `@HostBinding parameter should be a property name, 'class.<name>', or 'attr.<name>'.`);
+          }
+          host[`[${hostBinding.hostPropertyName}]`] = propName;
+        } else {
+          host[`[${propName}]`] = propName;
+        }
+      });
+      const hostListeners = propertyMetadata[propName].filter(a => createHostListener.isTypeOf(a));
+      hostListeners.forEach(hostListener => {
+        const args = hostListener.args || [];
+        host[`(${hostListener.eventName})`] = `${propName}(${args.join(',')})`;
+      });
+      const query = findLast(
+          propertyMetadata[propName], (a) => QUERY_METADATA_IDENTIFIERS.some(i => i.isTypeOf(a)));
+      if (query) {
+        queries[propName] = query;
+      }
+    });
+    return this._merge(dm, inputs, outputs, host, queries, guards, directiveType);
+  }
+
+  private _extractPublicName(def: string) { return splitAtColon(def, [null !, def])[1].trim(); }
+
+  private _dedupeBindings(bindings: string[]): string[] {
+    const names = new Set<string>();
+    const publicNames = new Set<string>();
+    const reversedResult: string[] = [];
+    // go last to first to allow later entries to overwrite previous entries
+    for (let i = bindings.length - 1; i >= 0; i--) {
+      const binding = bindings[i];
+      const name = this._extractPublicName(binding);
+      publicNames.add(name);
+      if (!names.has(name)) {
+        names.add(name);
+        reversedResult.push(binding);
+      }
+    }
+    return reversedResult.reverse();
+  }
+
+  private _merge(
+      directive: Directive, inputs: string[], outputs: string[], host: {[key: string]: string},
+      queries: {[key: string]: any}, guards: {[key: string]: any}, directiveType: Type): Directive {
+    const mergedInputs =
+        this._dedupeBindings(directive.inputs ? directive.inputs.concat(inputs) : inputs);
+    const mergedOutputs =
+        this._dedupeBindings(directive.outputs ? directive.outputs.concat(outputs) : outputs);
+    const mergedHost = directive.host ? {...directive.host, ...host} : host;
+    const mergedQueries = directive.queries ? {...directive.queries, ...queries} : queries;
+    if (createComponent.isTypeOf(directive)) {
+      const comp = directive as Component;
+      return createComponent({
+        selector: comp.selector,
+        inputs: mergedInputs,
+        outputs: mergedOutputs,
+        host: mergedHost,
+        exportAs: comp.exportAs,
+        moduleId: comp.moduleId,
+        queries: mergedQueries,
+        changeDetection: comp.changeDetection,
+        providers: comp.providers,
+        viewProviders: comp.viewProviders,
+        entryComponents: comp.entryComponents,
+        template: comp.template,
+        templateUrl: comp.templateUrl,
+        styles: comp.styles,
+        styleUrls: comp.styleUrls,
+        encapsulation: comp.encapsulation,
+        animations: comp.animations,
+        interpolation: comp.interpolation,
+        preserveWhitespaces: directive.preserveWhitespaces,
+      });
+    } else {
+      return createDirective({
+        selector: directive.selector,
+        inputs: mergedInputs,
+        outputs: mergedOutputs,
+        host: mergedHost,
+        exportAs: directive.exportAs,
+        queries: mergedQueries,
+        providers: directive.providers, guards
+      });
+    }
+  }
+}
+
+function isDirectiveMetadata(type: any): type is Directive {
+  return createDirective.isTypeOf(type) || createComponent.isTypeOf(type);
+}
+
+export function findLast<T>(arr: T[], condition: (value: T) => boolean): T|null {
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (condition(arr[i])) {
+      return arr[i];
+    }
+  }
+  return null;
+}
diff --git a/packages/compiler/src/expression_parser/ast.ts b/packages/compiler/src/expression_parser/ast.ts
new file mode 100644
index 000000000000..c511a4dc23eb
--- /dev/null
+++ b/packages/compiler/src/expression_parser/ast.ts
@@ -0,0 +1,725 @@
+/**
+ * @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 {SecurityContext} from '../core';
+import {ParseSourceSpan} from '../parse_util';
+
+export class ParserError {
+  public message: string;
+  constructor(
+      message: string, public input: string, public errLocation: string, public ctxLocation?: any) {
+    this.message = `Parser Error: ${message} ${errLocation} [${input}] in ${ctxLocation}`;
+  }
+}
+
+export class ParseSpan {
+  constructor(public start: number, public end: number) {}
+}
+
+export class AST {
+  constructor(public span: ParseSpan) {}
+  visit(visitor: AstVisitor, context: any = null): any { return null; }
+  toString(): string { return 'AST'; }
+}
+
+/**
+ * Represents a quoted expression of the form:
+ *
+ * quote = prefix `:` uninterpretedExpression
+ * prefix = identifier
+ * uninterpretedExpression = arbitrary string
+ *
+ * A quoted expression is meant to be pre-processed by an AST transformer that
+ * converts it into another AST that no longer contains quoted expressions.
+ * It is meant to allow third-party developers to extend Angular template
+ * expression language. The `uninterpretedExpression` part of the quote is
+ * therefore not interpreted by the Angular's own expression parser.
+ */
+export class Quote extends AST {
+  constructor(
+      span: ParseSpan, public prefix: string, public uninterpretedExpression: string,
+      public location: any) {
+    super(span);
+  }
+  visit(visitor: AstVisitor, context: any = null): any { return visitor.visitQuote(this, context); }
+  toString(): string { return 'Quote'; }
+}
+
+export class EmptyExpr extends AST {
+  visit(visitor: AstVisitor, context: any = null) {
+    // do nothing
+  }
+}
+
+export class ImplicitReceiver extends AST {
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitImplicitReceiver(this, context);
+  }
+}
+
+/**
+ * Multiple expressions separated by a semicolon.
+ */
+export class Chain extends AST {
+  constructor(span: ParseSpan, public expressions: any[]) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any { return visitor.visitChain(this, context); }
+}
+
+export class Conditional extends AST {
+  constructor(span: ParseSpan, public condition: AST, public trueExp: AST, public falseExp: AST) {
+    super(span);
+  }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitConditional(this, context);
+  }
+}
+
+export class PropertyRead extends AST {
+  constructor(span: ParseSpan, public receiver: AST, public name: string) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitPropertyRead(this, context);
+  }
+}
+
+export class PropertyWrite extends AST {
+  constructor(span: ParseSpan, public receiver: AST, public name: string, public value: AST) {
+    super(span);
+  }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitPropertyWrite(this, context);
+  }
+}
+
+export class SafePropertyRead extends AST {
+  constructor(span: ParseSpan, public receiver: AST, public name: string) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitSafePropertyRead(this, context);
+  }
+}
+
+export class KeyedRead extends AST {
+  constructor(span: ParseSpan, public obj: AST, public key: AST) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitKeyedRead(this, context);
+  }
+}
+
+export class KeyedWrite extends AST {
+  constructor(span: ParseSpan, public obj: AST, public key: AST, public value: AST) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitKeyedWrite(this, context);
+  }
+}
+
+export class BindingPipe extends AST {
+  constructor(span: ParseSpan, public exp: AST, public name: string, public args: any[]) {
+    super(span);
+  }
+  visit(visitor: AstVisitor, context: any = null): any { return visitor.visitPipe(this, context); }
+}
+
+export class LiteralPrimitive extends AST {
+  constructor(span: ParseSpan, public value: any) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitLiteralPrimitive(this, context);
+  }
+}
+
+export class LiteralArray extends AST {
+  constructor(span: ParseSpan, public expressions: any[]) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitLiteralArray(this, context);
+  }
+}
+
+export type LiteralMapKey = {
+  key: string; quoted: boolean;
+};
+
+export class LiteralMap extends AST {
+  constructor(span: ParseSpan, public keys: LiteralMapKey[], public values: any[]) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitLiteralMap(this, context);
+  }
+}
+
+export class Interpolation extends AST {
+  constructor(span: ParseSpan, public strings: any[], public expressions: any[]) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitInterpolation(this, context);
+  }
+}
+
+export class Binary extends AST {
+  constructor(span: ParseSpan, public operation: string, public left: AST, public right: AST) {
+    super(span);
+  }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitBinary(this, context);
+  }
+}
+
+export class PrefixNot extends AST {
+  constructor(span: ParseSpan, public expression: AST) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitPrefixNot(this, context);
+  }
+}
+
+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);
+  }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitMethodCall(this, context);
+  }
+}
+
+export class SafeMethodCall extends AST {
+  constructor(span: ParseSpan, public receiver: AST, public name: string, public args: any[]) {
+    super(span);
+  }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitSafeMethodCall(this, context);
+  }
+}
+
+export class FunctionCall extends AST {
+  constructor(span: ParseSpan, public target: AST|null, public args: any[]) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitFunctionCall(this, context);
+  }
+}
+
+export class ASTWithSource extends AST {
+  constructor(
+      public ast: AST, public source: string|null, public location: string,
+      public errors: ParserError[]) {
+    super(new ParseSpan(0, source == null ? 0 : source.length));
+  }
+  visit(visitor: AstVisitor, context: any = null): any { return this.ast.visit(visitor, context); }
+  toString(): string { return `${this.source} in ${this.location}`; }
+}
+
+export class TemplateBinding {
+  constructor(
+      public span: ParseSpan, public key: string, public keyIsVar: boolean, public name: string,
+      public expression: ASTWithSource|null) {}
+}
+
+export interface 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;
+  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 {
+  visitBinary(ast: Binary, context: any): any {
+    ast.left.visit(this);
+    ast.right.visit(this);
+    return null;
+  }
+  visitChain(ast: Chain, context: any): any { return this.visitAll(ast.expressions, context); }
+  visitConditional(ast: Conditional, context: any): any {
+    ast.condition.visit(this);
+    ast.trueExp.visit(this);
+    ast.falseExp.visit(this);
+    return null;
+  }
+  visitPipe(ast: BindingPipe, context: any): any {
+    ast.exp.visit(this);
+    this.visitAll(ast.args, context);
+    return null;
+  }
+  visitFunctionCall(ast: FunctionCall, context: any): any {
+    ast.target !.visit(this);
+    this.visitAll(ast.args, context);
+    return null;
+  }
+  visitImplicitReceiver(ast: ImplicitReceiver, context: any): any { return null; }
+  visitInterpolation(ast: Interpolation, context: any): any {
+    return this.visitAll(ast.expressions, context);
+  }
+  visitKeyedRead(ast: KeyedRead, context: any): any {
+    ast.obj.visit(this);
+    ast.key.visit(this);
+    return null;
+  }
+  visitKeyedWrite(ast: KeyedWrite, context: any): any {
+    ast.obj.visit(this);
+    ast.key.visit(this);
+    ast.value.visit(this);
+    return null;
+  }
+  visitLiteralArray(ast: LiteralArray, context: any): any {
+    return this.visitAll(ast.expressions, context);
+  }
+  visitLiteralMap(ast: LiteralMap, context: any): any { return this.visitAll(ast.values, context); }
+  visitLiteralPrimitive(ast: LiteralPrimitive, context: any): any { return null; }
+  visitMethodCall(ast: MethodCall, context: any): any {
+    ast.receiver.visit(this);
+    return this.visitAll(ast.args, context);
+  }
+  visitPrefixNot(ast: PrefixNot, context: any): any {
+    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;
+  }
+  visitPropertyWrite(ast: PropertyWrite, context: any): any {
+    ast.receiver.visit(this);
+    ast.value.visit(this);
+    return null;
+  }
+  visitSafePropertyRead(ast: SafePropertyRead, context: any): any {
+    ast.receiver.visit(this);
+    return null;
+  }
+  visitSafeMethodCall(ast: SafeMethodCall, context: any): any {
+    ast.receiver.visit(this);
+    return this.visitAll(ast.args, context);
+  }
+  visitAll(asts: AST[], context: any): any {
+    asts.forEach(ast => ast.visit(this, context));
+    return null;
+  }
+  visitQuote(ast: Quote, context: any): any { return null; }
+}
+
+export class AstTransformer implements AstVisitor {
+  visitImplicitReceiver(ast: ImplicitReceiver, context: any): AST { return ast; }
+
+  visitInterpolation(ast: Interpolation, context: any): AST {
+    return new Interpolation(ast.span, ast.strings, this.visitAll(ast.expressions));
+  }
+
+  visitLiteralPrimitive(ast: LiteralPrimitive, context: any): AST {
+    return new LiteralPrimitive(ast.span, ast.value);
+  }
+
+  visitPropertyRead(ast: PropertyRead, context: any): AST {
+    return new PropertyRead(ast.span, ast.receiver.visit(this), ast.name);
+  }
+
+  visitPropertyWrite(ast: PropertyWrite, context: any): AST {
+    return new PropertyWrite(ast.span, ast.receiver.visit(this), ast.name, ast.value.visit(this));
+  }
+
+  visitSafePropertyRead(ast: SafePropertyRead, context: any): AST {
+    return new SafePropertyRead(ast.span, ast.receiver.visit(this), ast.name);
+  }
+
+  visitMethodCall(ast: MethodCall, context: any): AST {
+    return new MethodCall(ast.span, ast.receiver.visit(this), ast.name, this.visitAll(ast.args));
+  }
+
+  visitSafeMethodCall(ast: SafeMethodCall, context: any): AST {
+    return new SafeMethodCall(
+        ast.span, ast.receiver.visit(this), ast.name, this.visitAll(ast.args));
+  }
+
+  visitFunctionCall(ast: FunctionCall, context: any): AST {
+    return new FunctionCall(ast.span, ast.target !.visit(this), this.visitAll(ast.args));
+  }
+
+  visitLiteralArray(ast: LiteralArray, context: any): AST {
+    return new LiteralArray(ast.span, this.visitAll(ast.expressions));
+  }
+
+  visitLiteralMap(ast: LiteralMap, context: any): AST {
+    return new LiteralMap(ast.span, ast.keys, this.visitAll(ast.values));
+  }
+
+  visitBinary(ast: Binary, context: any): AST {
+    return new Binary(ast.span, ast.operation, ast.left.visit(this), ast.right.visit(this));
+  }
+
+  visitPrefixNot(ast: PrefixNot, context: any): AST {
+    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));
+  }
+
+  visitPipe(ast: BindingPipe, context: any): AST {
+    return new BindingPipe(ast.span, ast.exp.visit(this), ast.name, this.visitAll(ast.args));
+  }
+
+  visitKeyedRead(ast: KeyedRead, context: any): AST {
+    return new KeyedRead(ast.span, ast.obj.visit(this), ast.key.visit(this));
+  }
+
+  visitKeyedWrite(ast: KeyedWrite, context: any): AST {
+    return new KeyedWrite(
+        ast.span, ast.obj.visit(this), ast.key.visit(this), ast.value.visit(this));
+  }
+
+  visitAll(asts: any[]): any[] {
+    const res = new Array(asts.length);
+    for (let i = 0; i < asts.length; ++i) {
+      res[i] = asts[i].visit(this);
+    }
+    return res;
+  }
+
+  visitChain(ast: Chain, context: any): AST {
+    return new Chain(ast.span, this.visitAll(ast.expressions));
+  }
+
+  visitQuote(ast: Quote, context: any): AST {
+    return new Quote(ast.span, ast.prefix, ast.uninterpretedExpression, ast.location);
+  }
+}
+
+// A transformer that only creates new nodes if the transformer makes a change or
+// a change is made a child node.
+export class AstMemoryEfficientTransformer implements AstVisitor {
+  visitImplicitReceiver(ast: ImplicitReceiver, context: any): AST { return ast; }
+
+  visitInterpolation(ast: Interpolation, context: any): Interpolation {
+    const expressions = this.visitAll(ast.expressions);
+    if (expressions !== ast.expressions)
+      return new Interpolation(ast.span, ast.strings, expressions);
+    return ast;
+  }
+
+  visitLiteralPrimitive(ast: LiteralPrimitive, context: any): AST { return ast; }
+
+  visitPropertyRead(ast: PropertyRead, context: any): AST {
+    const receiver = ast.receiver.visit(this);
+    if (receiver !== ast.receiver) {
+      return new PropertyRead(ast.span, receiver, ast.name);
+    }
+    return ast;
+  }
+
+  visitPropertyWrite(ast: PropertyWrite, context: any): AST {
+    const receiver = ast.receiver.visit(this);
+    const value = ast.value.visit(this);
+    if (receiver !== ast.receiver || value !== ast.value) {
+      return new PropertyWrite(ast.span, receiver, ast.name, value);
+    }
+    return ast;
+  }
+
+  visitSafePropertyRead(ast: SafePropertyRead, context: any): AST {
+    const receiver = ast.receiver.visit(this);
+    if (receiver !== ast.receiver) {
+      return new SafePropertyRead(ast.span, receiver, ast.name);
+    }
+    return ast;
+  }
+
+  visitMethodCall(ast: MethodCall, context: any): AST {
+    const receiver = ast.receiver.visit(this);
+    if (receiver !== ast.receiver) {
+      return new MethodCall(ast.span, receiver, ast.name, this.visitAll(ast.args));
+    }
+    return ast;
+  }
+
+  visitSafeMethodCall(ast: SafeMethodCall, context: any): AST {
+    const receiver = ast.receiver.visit(this);
+    const args = this.visitAll(ast.args);
+    if (receiver !== ast.receiver || args !== ast.args) {
+      return new SafeMethodCall(ast.span, receiver, ast.name, args);
+    }
+    return ast;
+  }
+
+  visitFunctionCall(ast: FunctionCall, context: any): AST {
+    const target = ast.target && ast.target.visit(this);
+    const args = this.visitAll(ast.args);
+    if (target !== ast.target || args !== ast.args) {
+      return new FunctionCall(ast.span, target, args);
+    }
+    return ast;
+  }
+
+  visitLiteralArray(ast: LiteralArray, context: any): AST {
+    const expressions = this.visitAll(ast.expressions);
+    if (expressions !== ast.expressions) {
+      return new LiteralArray(ast.span, expressions);
+    }
+    return ast;
+  }
+
+  visitLiteralMap(ast: LiteralMap, context: any): AST {
+    const values = this.visitAll(ast.values);
+    if (values !== ast.values) {
+      return new LiteralMap(ast.span, ast.keys, values);
+    }
+    return ast;
+  }
+
+  visitBinary(ast: Binary, context: any): AST {
+    const left = ast.left.visit(this);
+    const right = ast.right.visit(this);
+    if (left !== ast.left || right !== ast.right) {
+      return new Binary(ast.span, ast.operation, left, right);
+    }
+    return ast;
+  }
+
+  visitPrefixNot(ast: PrefixNot, context: any): AST {
+    const expression = ast.expression.visit(this);
+    if (expression !== ast.expression) {
+      return new PrefixNot(ast.span, expression);
+    }
+    return ast;
+  }
+
+  visitNonNullAssert(ast: NonNullAssert, context: any): AST {
+    const expression = ast.expression.visit(this);
+    if (expression !== ast.expression) {
+      return new NonNullAssert(ast.span, expression);
+    }
+    return ast;
+  }
+
+  visitConditional(ast: Conditional, context: any): AST {
+    const condition = ast.condition.visit(this);
+    const trueExp = ast.trueExp.visit(this);
+    const falseExp = ast.falseExp.visit(this);
+    if (condition !== ast.condition || trueExp !== ast.trueExp || falseExp !== falseExp) {
+      return new Conditional(ast.span, condition, trueExp, falseExp);
+    }
+    return ast;
+  }
+
+  visitPipe(ast: BindingPipe, context: any): AST {
+    const exp = ast.exp.visit(this);
+    const args = this.visitAll(ast.args);
+    if (exp !== ast.exp || args !== ast.args) {
+      return new BindingPipe(ast.span, exp, ast.name, args);
+    }
+    return ast;
+  }
+
+  visitKeyedRead(ast: KeyedRead, context: any): AST {
+    const obj = ast.obj.visit(this);
+    const key = ast.key.visit(this);
+    if (obj !== ast.obj || key !== ast.key) {
+      return new KeyedRead(ast.span, obj, key);
+    }
+    return ast;
+  }
+
+  visitKeyedWrite(ast: KeyedWrite, context: any): AST {
+    const obj = ast.obj.visit(this);
+    const key = ast.key.visit(this);
+    const value = ast.value.visit(this);
+    if (obj !== ast.obj || key !== ast.key || value !== ast.value) {
+      return new KeyedWrite(ast.span, obj, key, value);
+    }
+    return ast;
+  }
+
+  visitAll(asts: any[]): any[] {
+    const res = new Array(asts.length);
+    let modified = false;
+    for (let i = 0; i < asts.length; ++i) {
+      const original = asts[i];
+      const value = original.visit(this);
+      res[i] = value;
+      modified = modified || value !== original;
+    }
+    return modified ? res : asts;
+  }
+
+  visitChain(ast: Chain, context: any): AST {
+    const expressions = this.visitAll(ast.expressions);
+    if (expressions !== ast.expressions) {
+      return new Chain(ast.span, expressions);
+    }
+    return ast;
+  }
+
+  visitQuote(ast: Quote, context: any): AST { return ast; }
+}
+
+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); },
+  });
+}
+
+
+// Bindings
+
+export class ParsedProperty {
+  public readonly isLiteral: boolean;
+  public readonly isAnimation: boolean;
+
+  constructor(
+      public name: string, public expression: ASTWithSource, public type: ParsedPropertyType,
+      public sourceSpan: ParseSourceSpan) {
+    this.isLiteral = this.type === ParsedPropertyType.LITERAL_ATTR;
+    this.isAnimation = this.type === ParsedPropertyType.ANIMATION;
+  }
+}
+
+export enum ParsedPropertyType {
+  DEFAULT,
+  LITERAL_ATTR,
+  ANIMATION
+}
+
+export const enum ParsedEventType {
+  // DOM or Directive event
+  Regular,
+  // Animation specific event
+  Animation,
+}
+
+export class ParsedEvent {
+  // Regular events have a target
+  // Animation events have a phase
+  constructor(
+      public name: string, public targetOrPhase: string, public type: ParsedEventType,
+      public handler: AST, public sourceSpan: ParseSourceSpan) {}
+}
+
+export class ParsedVariable {
+  constructor(public name: string, public value: string, public sourceSpan: ParseSourceSpan) {}
+}
+
+export const enum BindingType {
+  // A regular binding to a property (e.g. `[property]="expression"`).
+  Property,
+  // A binding to an element attribute (e.g. `[attr.name]="expression"`).
+  Attribute,
+  // A binding to a CSS class (e.g. `[class.name]="condition"`).
+  Class,
+  // A binding to a style rule (e.g. `[style.rule]="expression"`).
+  Style,
+  // A binding to an animation reference (e.g. `[animate.key]="expression"`).
+  Animation,
+}
+
+export class BoundElementProperty {
+  constructor(
+      public name: string, public type: BindingType, public securityContext: SecurityContext,
+      public value: AST, public unit: string|null, public sourceSpan: ParseSourceSpan) {}
+}
diff --git a/packages/compiler/src/expression_parser/lexer.ts b/packages/compiler/src/expression_parser/lexer.ts
new file mode 100644
index 000000000000..cc485ea7913d
--- /dev/null
+++ b/packages/compiler/src/expression_parser/lexer.ts
@@ -0,0 +1,391 @@
+/**
+ * @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 chars from '../chars';
+
+export enum TokenType {
+  Character,
+  Identifier,
+  Keyword,
+  String,
+  Operator,
+  Number,
+  Error
+}
+
+const KEYWORDS = ['var', 'let', 'as', 'null', 'undefined', 'true', 'false', 'if', 'else', 'this'];
+
+export class Lexer {
+  tokenize(text: string): Token[] {
+    const scanner = new _Scanner(text);
+    const tokens: Token[] = [];
+    let token = scanner.scanToken();
+    while (token != null) {
+      tokens.push(token);
+      token = scanner.scanToken();
+    }
+    return tokens;
+  }
+}
+
+export class Token {
+  constructor(
+      public index: number, public type: TokenType, public numValue: number,
+      public strValue: string) {}
+
+  isCharacter(code: number): boolean {
+    return this.type == TokenType.Character && this.numValue == code;
+  }
+
+  isNumber(): boolean { return this.type == TokenType.Number; }
+
+  isString(): boolean { return this.type == TokenType.String; }
+
+  isOperator(operater: string): boolean {
+    return this.type == TokenType.Operator && this.strValue == operater;
+  }
+
+  isIdentifier(): boolean { return this.type == TokenType.Identifier; }
+
+  isKeyword(): boolean { return this.type == TokenType.Keyword; }
+
+  isKeywordLet(): boolean { return this.type == TokenType.Keyword && this.strValue == 'let'; }
+
+  isKeywordAs(): boolean { return this.type == TokenType.Keyword && this.strValue == 'as'; }
+
+  isKeywordNull(): boolean { return this.type == TokenType.Keyword && this.strValue == 'null'; }
+
+  isKeywordUndefined(): boolean {
+    return this.type == TokenType.Keyword && this.strValue == 'undefined';
+  }
+
+  isKeywordTrue(): boolean { return this.type == TokenType.Keyword && this.strValue == 'true'; }
+
+  isKeywordFalse(): boolean { return this.type == TokenType.Keyword && this.strValue == 'false'; }
+
+  isKeywordThis(): boolean { return this.type == TokenType.Keyword && this.strValue == 'this'; }
+
+  isError(): boolean { return this.type == TokenType.Error; }
+
+  toNumber(): number { return this.type == TokenType.Number ? this.numValue : -1; }
+
+  toString(): string|null {
+    switch (this.type) {
+      case TokenType.Character:
+      case TokenType.Identifier:
+      case TokenType.Keyword:
+      case TokenType.Operator:
+      case TokenType.String:
+      case TokenType.Error:
+        return this.strValue;
+      case TokenType.Number:
+        return this.numValue.toString();
+      default:
+        return null;
+    }
+  }
+}
+
+function newCharacterToken(index: number, code: number): Token {
+  return new Token(index, TokenType.Character, code, String.fromCharCode(code));
+}
+
+function newIdentifierToken(index: number, text: string): Token {
+  return new Token(index, TokenType.Identifier, 0, text);
+}
+
+function newKeywordToken(index: number, text: string): Token {
+  return new Token(index, TokenType.Keyword, 0, text);
+}
+
+function newOperatorToken(index: number, text: string): Token {
+  return new Token(index, TokenType.Operator, 0, text);
+}
+
+function newStringToken(index: number, text: string): Token {
+  return new Token(index, TokenType.String, 0, text);
+}
+
+function newNumberToken(index: number, n: number): Token {
+  return new Token(index, TokenType.Number, n, '');
+}
+
+function newErrorToken(index: number, message: string): Token {
+  return new Token(index, TokenType.Error, 0, message);
+}
+
+export const EOF: Token = new Token(-1, TokenType.Character, 0, '');
+
+class _Scanner {
+  length: number;
+  peek: number = 0;
+  index: number = -1;
+
+  constructor(public input: string) {
+    this.length = input.length;
+    this.advance();
+  }
+
+  advance() {
+    this.peek = ++this.index >= this.length ? chars.$EOF : this.input.charCodeAt(this.index);
+  }
+
+  scanToken(): Token|null {
+    const input = this.input, length = this.length;
+    let peek = this.peek, index = this.index;
+
+    // Skip whitespace.
+    while (peek <= chars.$SPACE) {
+      if (++index >= length) {
+        peek = chars.$EOF;
+        break;
+      } else {
+        peek = input.charCodeAt(index);
+      }
+    }
+
+    this.peek = peek;
+    this.index = index;
+
+    if (index >= length) {
+      return null;
+    }
+
+    // Handle identifiers and numbers.
+    if (isIdentifierStart(peek)) return this.scanIdentifier();
+    if (chars.isDigit(peek)) return this.scanNumber(index);
+
+    const start: number = index;
+    switch (peek) {
+      case chars.$PERIOD:
+        this.advance();
+        return chars.isDigit(this.peek) ? this.scanNumber(start) :
+                                          newCharacterToken(start, chars.$PERIOD);
+      case chars.$LPAREN:
+      case chars.$RPAREN:
+      case chars.$LBRACE:
+      case chars.$RBRACE:
+      case chars.$LBRACKET:
+      case chars.$RBRACKET:
+      case chars.$COMMA:
+      case chars.$COLON:
+      case chars.$SEMICOLON:
+        return this.scanCharacter(start, peek);
+      case chars.$SQ:
+      case chars.$DQ:
+        return this.scanString();
+      case chars.$HASH:
+      case chars.$PLUS:
+      case chars.$MINUS:
+      case chars.$STAR:
+      case chars.$SLASH:
+      case chars.$PERCENT:
+      case chars.$CARET:
+        return this.scanOperator(start, String.fromCharCode(peek));
+      case chars.$QUESTION:
+        return this.scanComplexOperator(start, '?', chars.$PERIOD, '.');
+      case chars.$LT:
+      case chars.$GT:
+        return this.scanComplexOperator(start, String.fromCharCode(peek), chars.$EQ, '=');
+      case chars.$BANG:
+      case chars.$EQ:
+        return this.scanComplexOperator(
+            start, String.fromCharCode(peek), chars.$EQ, '=', chars.$EQ, '=');
+      case chars.$AMPERSAND:
+        return this.scanComplexOperator(start, '&', chars.$AMPERSAND, '&');
+      case chars.$BAR:
+        return this.scanComplexOperator(start, '|', chars.$BAR, '|');
+      case chars.$NBSP:
+        while (chars.isWhitespace(this.peek)) this.advance();
+        return this.scanToken();
+    }
+
+    this.advance();
+    return this.error(`Unexpected character [${String.fromCharCode(peek)}]`, 0);
+  }
+
+  scanCharacter(start: number, code: number): Token {
+    this.advance();
+    return newCharacterToken(start, code);
+  }
+
+
+  scanOperator(start: number, str: string): Token {
+    this.advance();
+    return newOperatorToken(start, str);
+  }
+
+  /**
+   * Tokenize a 2/3 char long operator
+   *
+   * @param start start index in the expression
+   * @param one first symbol (always part of the operator)
+   * @param twoCode code point for the second symbol
+   * @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)
+   */
+  scanComplexOperator(
+      start: number, one: string, twoCode: number, two: string, threeCode?: number,
+      three?: string): Token {
+    this.advance();
+    let str: string = one;
+    if (this.peek == twoCode) {
+      this.advance();
+      str += two;
+    }
+    if (threeCode != null && this.peek == threeCode) {
+      this.advance();
+      str += three;
+    }
+    return newOperatorToken(start, str);
+  }
+
+  scanIdentifier(): Token {
+    const start: number = this.index;
+    this.advance();
+    while (isIdentifierPart(this.peek)) this.advance();
+    const str: string = this.input.substring(start, this.index);
+    return KEYWORDS.indexOf(str) > -1 ? newKeywordToken(start, str) :
+                                        newIdentifierToken(start, str);
+  }
+
+  scanNumber(start: number): Token {
+    let simple: boolean = (this.index === start);
+    this.advance();  // Skip initial digit.
+    while (true) {
+      if (chars.isDigit(this.peek)) {
+        // Do nothing.
+      } else if (this.peek == chars.$PERIOD) {
+        simple = false;
+      } else if (isExponentStart(this.peek)) {
+        this.advance();
+        if (isExponentSign(this.peek)) this.advance();
+        if (!chars.isDigit(this.peek)) return this.error('Invalid exponent', -1);
+        simple = false;
+      } else {
+        break;
+      }
+      this.advance();
+    }
+    const str: string = this.input.substring(start, this.index);
+    const value: number = simple ? parseIntAutoRadix(str) : parseFloat(str);
+    return newNumberToken(start, value);
+  }
+
+  scanString(): Token {
+    const start: number = this.index;
+    const quote: number = this.peek;
+    this.advance();  // Skip initial quote.
+
+    let buffer: string = '';
+    let marker: number = this.index;
+    const input: string = this.input;
+
+    while (this.peek != quote) {
+      if (this.peek == chars.$BACKSLASH) {
+        buffer += input.substring(marker, this.index);
+        this.advance();
+        let unescapedCode: number;
+        // Workaround for TS2.1-introduced type strictness
+        this.peek = this.peek;
+        if (this.peek == chars.$u) {
+          // 4 character hex code for unicode character.
+          const hex: string = input.substring(this.index + 1, this.index + 5);
+          if (/^[0-9a-f]+$/i.test(hex)) {
+            unescapedCode = parseInt(hex, 16);
+          } else {
+            return this.error(`Invalid unicode escape [\\u${hex}]`, 0);
+          }
+          for (let i: number = 0; i < 5; i++) {
+            this.advance();
+          }
+        } else {
+          unescapedCode = unescape(this.peek);
+          this.advance();
+        }
+        buffer += String.fromCharCode(unescapedCode);
+        marker = this.index;
+      } else if (this.peek == chars.$EOF) {
+        return this.error('Unterminated quote', 0);
+      } else {
+        this.advance();
+      }
+    }
+
+    const last: string = input.substring(marker, this.index);
+    this.advance();  // Skip terminating quote.
+
+    return newStringToken(start, buffer + last);
+  }
+
+  error(message: string, offset: number): Token {
+    const position: number = this.index + offset;
+    return newErrorToken(
+        position, `Lexer Error: ${message} at column ${position} in expression [${this.input}]`);
+  }
+}
+
+function isIdentifierStart(code: number): boolean {
+  return (chars.$a <= code && code <= chars.$z) || (chars.$A <= code && code <= chars.$Z) ||
+      (code == chars.$_) || (code == chars.$$);
+}
+
+export function isIdentifier(input: string): boolean {
+  if (input.length == 0) return false;
+  const scanner = new _Scanner(input);
+  if (!isIdentifierStart(scanner.peek)) return false;
+  scanner.advance();
+  while (scanner.peek !== chars.$EOF) {
+    if (!isIdentifierPart(scanner.peek)) return false;
+    scanner.advance();
+  }
+  return true;
+}
+
+function isIdentifierPart(code: number): boolean {
+  return chars.isAsciiLetter(code) || chars.isDigit(code) || (code == chars.$_) ||
+      (code == chars.$$);
+}
+
+function isExponentStart(code: number): boolean {
+  return code == chars.$e || code == chars.$E;
+}
+
+function isExponentSign(code: number): boolean {
+  return code == chars.$MINUS || code == chars.$PLUS;
+}
+
+export function isQuote(code: number): boolean {
+  return code === chars.$SQ || code === chars.$DQ || code === chars.$BT;
+}
+
+function unescape(code: number): number {
+  switch (code) {
+    case chars.$n:
+      return chars.$LF;
+    case chars.$f:
+      return chars.$FF;
+    case chars.$r:
+      return chars.$CR;
+    case chars.$t:
+      return chars.$TAB;
+    case chars.$v:
+      return chars.$VTAB;
+    default:
+      return code;
+  }
+}
+
+function parseIntAutoRadix(text: string): number {
+  const result: number = parseInt(text);
+  if (isNaN(result)) {
+    throw new Error('Invalid integer literal when parsing ' + text);
+  }
+  return result;
+}
diff --git a/packages/compiler/src/expression_parser/parser.ts b/packages/compiler/src/expression_parser/parser.ts
new file mode 100644
index 000000000000..c6be7f5886ea
--- /dev/null
+++ b/packages/compiler/src/expression_parser/parser.ts
@@ -0,0 +1,827 @@
+/**
+ * @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 chars from '../chars';
+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, 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[]) {}
+}
+
+export class TemplateBindingParseResult {
+  constructor(
+      public templateBindings: TemplateBinding[], public warnings: string[],
+      public errors: ParserError[]) {}
+}
+
+function _createInterpolateRegExp(config: InterpolationConfig): RegExp {
+  const pattern = escapeRegExp(config.start) + '([\\s\\S]*?)' + escapeRegExp(config.end);
+  return new RegExp(pattern, 'g');
+}
+
+export class Parser {
+  private errors: ParserError[] = [];
+
+  constructor(private _lexer: Lexer) {}
+
+  parseAction(
+      input: string, location: any,
+      interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): ASTWithSource {
+    this._checkNoInterpolation(input, location, interpolationConfig);
+    const sourceToLex = this._stripComments(input);
+    const tokens = this._lexer.tokenize(this._stripComments(input));
+    const ast = new _ParseAST(
+                    input, location, tokens, sourceToLex.length, true, this.errors,
+                    input.length - sourceToLex.length)
+                    .parseChain();
+    return new ASTWithSource(ast, input, location, this.errors);
+  }
+
+  parseBinding(
+      input: string, location: any,
+      interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): ASTWithSource {
+    const ast = this._parseBindingAst(input, location, interpolationConfig);
+    return new ASTWithSource(ast, input, location, this.errors);
+  }
+
+  parseSimpleBinding(
+      input: string, location: string,
+      interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): ASTWithSource {
+    const ast = this._parseBindingAst(input, location, interpolationConfig);
+    const errors = SimpleExpressionChecker.check(ast);
+    if (errors.length > 0) {
+      this._reportError(
+          `Host binding expression cannot contain ${errors.join(' ')}`, input, location);
+    }
+    return new ASTWithSource(ast, input, location, this.errors);
+  }
+
+  private _reportError(message: string, input: string, errLocation: string, ctxLocation?: any) {
+    this.errors.push(new ParserError(message, input, errLocation, ctxLocation));
+  }
+
+  private _parseBindingAst(
+      input: string, location: string, interpolationConfig: InterpolationConfig): AST {
+    // Quotes expressions use 3rd-party expression language. We don't want to use
+    // our lexer or parser for that, so we check for that ahead of time.
+    const quote = this._parseQuote(input, location);
+
+    if (quote != null) {
+      return quote;
+    }
+
+    this._checkNoInterpolation(input, location, interpolationConfig);
+    const sourceToLex = this._stripComments(input);
+    const tokens = this._lexer.tokenize(sourceToLex);
+    return new _ParseAST(
+               input, location, tokens, sourceToLex.length, false, this.errors,
+               input.length - sourceToLex.length)
+        .parseChain();
+  }
+
+  private _parseQuote(input: string|null, location: any): AST|null {
+    if (input == null) return null;
+    const prefixSeparatorIndex = input.indexOf(':');
+    if (prefixSeparatorIndex == -1) return null;
+    const prefix = input.substring(0, prefixSeparatorIndex).trim();
+    if (!isIdentifier(prefix)) return null;
+    const uninterpretedExpression = input.substring(prefixSeparatorIndex + 1);
+    return new Quote(new ParseSpan(0, input.length), prefix, uninterpretedExpression, location);
+  }
+
+  parseTemplateBindings(tplKey: string, tplValue: string, location: any):
+      TemplateBindingParseResult {
+    const tokens = this._lexer.tokenize(tplValue);
+    return new _ParseAST(tplValue, location, tokens, tplValue.length, false, this.errors, 0)
+        .parseTemplateBindings(tplKey);
+  }
+
+  parseInterpolation(
+      input: string, location: any,
+      interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): ASTWithSource|null {
+    const split = this.splitInterpolation(input, location, interpolationConfig);
+    if (split == null) return null;
+
+    const expressions: AST[] = [];
+
+    for (let i = 0; i < split.expressions.length; ++i) {
+      const expressionText = split.expressions[i];
+      const sourceToLex = this._stripComments(expressionText);
+      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))
+                      .parseChain();
+      expressions.push(ast);
+    }
+
+    return new ASTWithSource(
+        new Interpolation(
+            new ParseSpan(0, input == null ? 0 : input.length), split.strings, expressions),
+        input, location, this.errors);
+  }
+
+  splitInterpolation(
+      input: string, location: string,
+      interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): SplitInterpolation
+      |null {
+    const regexp = _createInterpolateRegExp(interpolationConfig);
+    const parts = input.split(regexp);
+    if (parts.length <= 1) {
+      return null;
+    }
+    const strings: string[] = [];
+    const expressions: string[] = [];
+    const offsets: number[] = [];
+    let offset = 0;
+    for (let i = 0; i < parts.length; i++) {
+      const part: string = parts[i];
+      if (i % 2 === 0) {
+        // fixed string
+        strings.push(part);
+        offset += part.length;
+      } else if (part.trim().length > 0) {
+        offset += interpolationConfig.start.length;
+        expressions.push(part);
+        offsets.push(offset);
+        offset += part.length + interpolationConfig.end.length;
+      } else {
+        this._reportError(
+            'Blank expressions are not allowed in interpolated strings', input,
+            `at column ${this._findInterpolationErrorColumn(parts, i, interpolationConfig)} in`,
+            location);
+        expressions.push('$implict');
+        offsets.push(offset);
+      }
+    }
+    return new SplitInterpolation(strings, expressions, offsets);
+  }
+
+  wrapLiteralPrimitive(input: string|null, location: any): ASTWithSource {
+    return new ASTWithSource(
+        new LiteralPrimitive(new ParseSpan(0, input == null ? 0 : input.length), input), input,
+        location, this.errors);
+  }
+
+  private _stripComments(input: string): string {
+    const i = this._commentStart(input);
+    return i != null ? input.substring(0, i).trim() : input;
+  }
+
+  private _commentStart(input: string): number|null {
+    let outerQuote: number|null = null;
+    for (let i = 0; i < input.length - 1; i++) {
+      const char = input.charCodeAt(i);
+      const nextChar = input.charCodeAt(i + 1);
+
+      if (char === chars.$SLASH && nextChar == chars.$SLASH && outerQuote == null) return i;
+
+      if (outerQuote === char) {
+        outerQuote = null;
+      } else if (outerQuote == null && isQuote(char)) {
+        outerQuote = char;
+      }
+    }
+    return null;
+  }
+
+  private _checkNoInterpolation(
+      input: string, location: any, interpolationConfig: InterpolationConfig): void {
+    const regexp = _createInterpolateRegExp(interpolationConfig);
+    const parts = input.split(regexp);
+    if (parts.length > 1) {
+      this._reportError(
+          `Got interpolation (${interpolationConfig.start}${interpolationConfig.end}) where expression was expected`,
+          input,
+          `at column ${this._findInterpolationErrorColumn(parts, 1, interpolationConfig)} in`,
+          location);
+    }
+  }
+
+  private _findInterpolationErrorColumn(
+      parts: string[], partInErrIdx: number, interpolationConfig: InterpolationConfig): number {
+    let errLocation = '';
+    for (let j = 0; j < partInErrIdx; j++) {
+      errLocation += j % 2 === 0 ?
+          parts[j] :
+          `${interpolationConfig.start}${parts[j]}${interpolationConfig.end}`;
+    }
+
+    return errLocation.length;
+  }
+}
+
+export class _ParseAST {
+  private rparensExpected = 0;
+  private rbracketsExpected = 0;
+  private rbracesExpected = 0;
+
+  index: number = 0;
+
+  constructor(
+      public input: string, public location: any, public tokens: Token[],
+      public inputLength: number, public parseAction: boolean, private errors: ParserError[],
+      private offset: number) {}
+
+  peek(offset: number): Token {
+    const i = this.index + offset;
+    return i < this.tokens.length ? this.tokens[i] : EOF;
+  }
+
+  get next(): Token { return this.peek(0); }
+
+  get inputIndex(): number {
+    return (this.index < this.tokens.length) ? this.next.index + this.offset :
+                                               this.inputLength + this.offset;
+  }
+
+  span(start: number) { return new ParseSpan(start, this.inputIndex); }
+
+  advance() { this.index++; }
+
+  optionalCharacter(code: number): boolean {
+    if (this.next.isCharacter(code)) {
+      this.advance();
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  peekKeywordLet(): boolean { return this.next.isKeywordLet(); }
+  peekKeywordAs(): boolean { return this.next.isKeywordAs(); }
+
+  expectCharacter(code: number) {
+    if (this.optionalCharacter(code)) return;
+    this.error(`Missing expected ${String.fromCharCode(code)}`);
+  }
+
+  optionalOperator(op: string): boolean {
+    if (this.next.isOperator(op)) {
+      this.advance();
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  expectOperator(operator: string) {
+    if (this.optionalOperator(operator)) return;
+    this.error(`Missing expected operator ${operator}`);
+  }
+
+  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() as string;
+  }
+
+  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() as string;
+  }
+
+  parseChain(): AST {
+    const exprs: AST[] = [];
+    const start = this.inputIndex;
+    while (this.index < this.tokens.length) {
+      const expr = this.parsePipe();
+      exprs.push(expr);
+
+      if (this.optionalCharacter(chars.$SEMICOLON)) {
+        if (!this.parseAction) {
+          this.error('Binding expression cannot contain chained expression');
+        }
+        while (this.optionalCharacter(chars.$SEMICOLON)) {
+        }  // read all semicolons
+      } else if (this.index < this.tokens.length) {
+        this.error(`Unexpected token '${this.next}'`);
+      }
+    }
+    if (exprs.length == 0) return new EmptyExpr(this.span(start));
+    if (exprs.length == 1) return exprs[0];
+    return new Chain(this.span(start), exprs);
+  }
+
+  parsePipe(): AST {
+    let result = this.parseExpression();
+    if (this.optionalOperator('|')) {
+      if (this.parseAction) {
+        this.error('Cannot have a pipe in an action expression');
+      }
+
+      do {
+        const name = this.expectIdentifierOrKeyword();
+        const args: AST[] = [];
+        while (this.optionalCharacter(chars.$COLON)) {
+          args.push(this.parseExpression());
+        }
+        result = new BindingPipe(this.span(result.span.start), result, name, args);
+      } while (this.optionalOperator('|'));
+    }
+
+    return result;
+  }
+
+  parseExpression(): AST { return this.parseConditional(); }
+
+  parseConditional(): AST {
+    const start = this.inputIndex;
+    const result = this.parseLogicalOr();
+
+    if (this.optionalOperator('?')) {
+      const yes = this.parsePipe();
+      let no: AST;
+      if (!this.optionalCharacter(chars.$COLON)) {
+        const end = this.inputIndex;
+        const expression = this.input.substring(start, end);
+        this.error(`Conditional expression ${expression} requires all 3 expressions`);
+        no = new EmptyExpr(this.span(start));
+      } else {
+        no = this.parsePipe();
+      }
+      return new Conditional(this.span(start), result, yes, no);
+    } else {
+      return result;
+    }
+  }
+
+  parseLogicalOr(): AST {
+    // '||'
+    let result = this.parseLogicalAnd();
+    while (this.optionalOperator('||')) {
+      const right = this.parseLogicalAnd();
+      result = new Binary(this.span(result.span.start), '||', result, right);
+    }
+    return result;
+  }
+
+  parseLogicalAnd(): AST {
+    // '&&'
+    let result = this.parseEquality();
+    while (this.optionalOperator('&&')) {
+      const right = this.parseEquality();
+      result = new Binary(this.span(result.span.start), '&&', result, right);
+    }
+    return result;
+  }
+
+  parseEquality(): AST {
+    // '==','!=','===','!=='
+    let result = this.parseRelational();
+    while (this.next.type == TokenType.Operator) {
+      const operator = this.next.strValue;
+      switch (operator) {
+        case '==':
+        case '===':
+        case '!=':
+        case '!==':
+          this.advance();
+          const right = this.parseRelational();
+          result = new Binary(this.span(result.span.start), operator, result, right);
+          continue;
+      }
+      break;
+    }
+    return result;
+  }
+
+  parseRelational(): AST {
+    // '<', '>', '<=', '>='
+    let result = this.parseAdditive();
+    while (this.next.type == TokenType.Operator) {
+      const operator = this.next.strValue;
+      switch (operator) {
+        case '<':
+        case '>':
+        case '<=':
+        case '>=':
+          this.advance();
+          const right = this.parseAdditive();
+          result = new Binary(this.span(result.span.start), operator, result, right);
+          continue;
+      }
+      break;
+    }
+    return result;
+  }
+
+  parseAdditive(): AST {
+    // '+', '-'
+    let result = this.parseMultiplicative();
+    while (this.next.type == TokenType.Operator) {
+      const operator = this.next.strValue;
+      switch (operator) {
+        case '+':
+        case '-':
+          this.advance();
+          let right = this.parseMultiplicative();
+          result = new Binary(this.span(result.span.start), operator, result, right);
+          continue;
+      }
+      break;
+    }
+    return result;
+  }
+
+  parseMultiplicative(): AST {
+    // '*', '%', '/'
+    let result = this.parsePrefix();
+    while (this.next.type == TokenType.Operator) {
+      const operator = this.next.strValue;
+      switch (operator) {
+        case '*':
+        case '%':
+        case '/':
+          this.advance();
+          let right = this.parsePrefix();
+          result = new Binary(this.span(result.span.start), operator, result, right);
+          continue;
+      }
+      break;
+    }
+    return result;
+  }
+
+  parsePrefix(): AST {
+    if (this.next.type == TokenType.Operator) {
+      const start = this.inputIndex;
+      const operator = this.next.strValue;
+      let result: AST;
+      switch (operator) {
+        case '+':
+          this.advance();
+          result = this.parsePrefix();
+          return new Binary(
+              this.span(start), '-', result, new LiteralPrimitive(new ParseSpan(start, start), 0));
+        case '-':
+          this.advance();
+          result = this.parsePrefix();
+          return new Binary(
+              this.span(start), operator, new LiteralPrimitive(new ParseSpan(start, start), 0),
+              result);
+        case '!':
+          this.advance();
+          result = this.parsePrefix();
+          return new PrefixNot(this.span(start), result);
+      }
+    }
+    return this.parseCallChain();
+  }
+
+  parseCallChain(): AST {
+    let result = this.parsePrimary();
+    while (true) {
+      if (this.optionalCharacter(chars.$PERIOD)) {
+        result = this.parseAccessMemberOrMethodCall(result, false);
+
+      } else if (this.optionalOperator('?.')) {
+        result = this.parseAccessMemberOrMethodCall(result, true);
+
+      } else if (this.optionalCharacter(chars.$LBRACKET)) {
+        this.rbracketsExpected++;
+        const key = this.parsePipe();
+        this.rbracketsExpected--;
+        this.expectCharacter(chars.$RBRACKET);
+        if (this.optionalOperator('=')) {
+          const value = this.parseConditional();
+          result = new KeyedWrite(this.span(result.span.start), result, key, value);
+        } else {
+          result = new KeyedRead(this.span(result.span.start), result, key);
+        }
+
+      } else if (this.optionalCharacter(chars.$LPAREN)) {
+        this.rparensExpected++;
+        const args = this.parseCallArguments();
+        this.rparensExpected--;
+        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;
+      }
+    }
+  }
+
+  parsePrimary(): AST {
+    const start = this.inputIndex;
+    if (this.optionalCharacter(chars.$LPAREN)) {
+      this.rparensExpected++;
+      const result = this.parsePipe();
+      this.rparensExpected--;
+      this.expectCharacter(chars.$RPAREN);
+      return result;
+
+    } else if (this.next.isKeywordNull()) {
+      this.advance();
+      return new LiteralPrimitive(this.span(start), null);
+
+    } else if (this.next.isKeywordUndefined()) {
+      this.advance();
+      return new LiteralPrimitive(this.span(start), void 0);
+
+    } else if (this.next.isKeywordTrue()) {
+      this.advance();
+      return new LiteralPrimitive(this.span(start), true);
+
+    } else if (this.next.isKeywordFalse()) {
+      this.advance();
+      return new LiteralPrimitive(this.span(start), false);
+
+    } else if (this.next.isKeywordThis()) {
+      this.advance();
+      return new ImplicitReceiver(this.span(start));
+
+    } else if (this.optionalCharacter(chars.$LBRACKET)) {
+      this.rbracketsExpected++;
+      const elements = this.parseExpressionList(chars.$RBRACKET);
+      this.rbracketsExpected--;
+      this.expectCharacter(chars.$RBRACKET);
+      return new LiteralArray(this.span(start), elements);
+
+    } else if (this.next.isCharacter(chars.$LBRACE)) {
+      return this.parseLiteralMap();
+
+    } else if (this.next.isIdentifier()) {
+      return this.parseAccessMemberOrMethodCall(new ImplicitReceiver(this.span(start)), false);
+
+    } else if (this.next.isNumber()) {
+      const value = this.next.toNumber();
+      this.advance();
+      return new LiteralPrimitive(this.span(start), value);
+
+    } else if (this.next.isString()) {
+      const literalValue = this.next.toString();
+      this.advance();
+      return new LiteralPrimitive(this.span(start), literalValue);
+
+    } else if (this.index >= this.tokens.length) {
+      this.error(`Unexpected end of expression: ${this.input}`);
+      return new EmptyExpr(this.span(start));
+    } else {
+      this.error(`Unexpected token ${this.next}`);
+      return new EmptyExpr(this.span(start));
+    }
+  }
+
+  parseExpressionList(terminator: number): AST[] {
+    const result: AST[] = [];
+    if (!this.next.isCharacter(terminator)) {
+      do {
+        result.push(this.parsePipe());
+      } while (this.optionalCharacter(chars.$COMMA));
+    }
+    return result;
+  }
+
+  parseLiteralMap(): LiteralMap {
+    const keys: LiteralMapKey[] = [];
+    const values: AST[] = [];
+    const start = this.inputIndex;
+    this.expectCharacter(chars.$LBRACE);
+    if (!this.optionalCharacter(chars.$RBRACE)) {
+      this.rbracesExpected++;
+      do {
+        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));
+      this.rbracesExpected--;
+      this.expectCharacter(chars.$RBRACE);
+    }
+    return new LiteralMap(this.span(start), keys, values);
+  }
+
+  parseAccessMemberOrMethodCall(receiver: AST, isSafe: boolean = false): AST {
+    const start = receiver.span.start;
+    const id = this.expectIdentifierOrKeyword();
+
+    if (this.optionalCharacter(chars.$LPAREN)) {
+      this.rparensExpected++;
+      const args = this.parseCallArguments();
+      this.expectCharacter(chars.$RPAREN);
+      this.rparensExpected--;
+      const span = this.span(start);
+      return isSafe ? new SafeMethodCall(span, receiver, id, args) :
+                      new MethodCall(span, receiver, id, args);
+
+    } else {
+      if (isSafe) {
+        if (this.optionalOperator('=')) {
+          this.error('The \'?.\' operator cannot be used in the assignment');
+          return new EmptyExpr(this.span(start));
+        } else {
+          return new SafePropertyRead(this.span(start), receiver, id);
+        }
+      } else {
+        if (this.optionalOperator('=')) {
+          if (!this.parseAction) {
+            this.error('Bindings cannot contain assignments');
+            return new EmptyExpr(this.span(start));
+          }
+
+          const value = this.parseConditional();
+          return new PropertyWrite(this.span(start), receiver, id, value);
+        } else {
+          return new PropertyRead(this.span(start), receiver, id);
+        }
+      }
+    }
+  }
+
+  parseCallArguments(): BindingPipe[] {
+    if (this.next.isCharacter(chars.$RPAREN)) return [];
+    const positionals: AST[] = [];
+    do {
+      positionals.push(this.parsePipe());
+    } while (this.optionalCharacter(chars.$COMMA));
+    return positionals as BindingPipe[];
+  }
+
+  /**
+   * An identifier, a keyword, a string with an optional `-` in between.
+   */
+  expectTemplateBindingKey(): string {
+    let result = '';
+    let operatorFound = false;
+    do {
+      result += this.expectIdentifierOrKeywordOrString();
+      operatorFound = this.optionalOperator('-');
+      if (operatorFound) {
+        result += '-';
+      }
+    } while (operatorFound);
+
+    return result.toString();
+  }
+
+  // Parses the AST for `<some-tag *tplKey=AST>`
+  parseTemplateBindings(tplKey: string): TemplateBindingParseResult {
+    let firstBinding = true;
+    const bindings: TemplateBinding[] = [];
+    const warnings: string[] = [];
+    do {
+      const start = this.inputIndex;
+      let rawKey: string;
+      let key: string;
+      let isVar: boolean = false;
+      if (firstBinding) {
+        rawKey = key = tplKey;
+        firstBinding = false;
+      } else {
+        isVar = this.peekKeywordLet();
+        if (isVar) this.advance();
+        rawKey = this.expectTemplateBindingKey();
+        key = isVar ? rawKey : tplKey + rawKey[0].toUpperCase() + rawKey.substring(1);
+        this.optionalCharacter(chars.$COLON);
+      }
+
+      let name: string = null !;
+      let expression: ASTWithSource|null = null;
+      if (isVar) {
+        if (this.optionalOperator('=')) {
+          name = this.expectTemplateBindingKey();
+        } else {
+          name = '\$implicit';
+        }
+      } else if (this.peekKeywordAs()) {
+        this.advance();  // consume `as`
+        name = rawKey;
+        key = this.expectTemplateBindingKey();  // read local var name
+        isVar = true;
+      } else if (this.next !== EOF && !this.peekKeywordLet()) {
+        const start = this.inputIndex;
+        const ast = this.parsePipe();
+        const source = this.input.substring(start - this.offset, this.inputIndex - this.offset);
+        expression = new ASTWithSource(ast, source, this.location, this.errors);
+      }
+
+      bindings.push(new TemplateBinding(this.span(start), key, isVar, name, expression));
+      if (this.peekKeywordAs() && !isVar) {
+        const letStart = this.inputIndex;
+        this.advance();                                   // consume `as`
+        const letName = this.expectTemplateBindingKey();  // read local var name
+        bindings.push(new TemplateBinding(this.span(letStart), letName, true, key, null !));
+      }
+      if (!this.optionalCharacter(chars.$SEMICOLON)) {
+        this.optionalCharacter(chars.$COMMA);
+      }
+    } while (this.index < this.tokens.length);
+
+    return new TemplateBindingParseResult(bindings, warnings, this.errors);
+  }
+
+  error(message: string, index: number|null = null) {
+    this.errors.push(new ParserError(message, this.input, this.locationText(index), this.location));
+    this.skip();
+  }
+
+  private locationText(index: number|null = null) {
+    if (index == null) index = this.index;
+    return (index < this.tokens.length) ? `at column ${this.tokens[index].index + 1} in` :
+                                          `at the end of the expression`;
+  }
+
+  // Error recovery should skip tokens until it encounters a recovery point. skip() treats
+  // the end of input and a ';' as unconditionally a recovery point. It also treats ')',
+  // '}' and ']' as conditional recovery points if one of calling productions is expecting
+  // one of these symbols. This allows skip() to recover from errors such as '(a.) + 1' allowing
+  // more of the AST to be retained (it doesn't skip any tokens as the ')' is retained because
+  // of the '(' begins an '(' <expr> ')' production). The recovery points of grouping symbols
+  // must be conditional as they must be skipped if none of the calling productions are not
+  // expecting the closing token else we will never make progress in the case of an
+  // extraneous group closing symbol (such as a stray ')'). This is not the case for ';' because
+  // parseChain() is always the root production and it expects a ';'.
+
+  // If a production expects one of these token it increments the corresponding nesting count,
+  // and then decrements it just prior to checking if the token is in the input.
+  private skip() {
+    let n = this.next;
+    while (this.index < this.tokens.length && !n.isCharacter(chars.$SEMICOLON) &&
+           (this.rparensExpected <= 0 || !n.isCharacter(chars.$RPAREN)) &&
+           (this.rbracesExpected <= 0 || !n.isCharacter(chars.$RBRACE)) &&
+           (this.rbracketsExpected <= 0 || !n.isCharacter(chars.$RBRACKET))) {
+      if (this.next.isError()) {
+        this.errors.push(new ParserError(
+            this.next.toString() !, this.input, this.locationText(), this.location));
+      }
+      this.advance();
+      n = this.next;
+    }
+  }
+}
+
+class SimpleExpressionChecker implements AstVisitor {
+  static check(ast: AST): string[] {
+    const s = new SimpleExpressionChecker();
+    ast.visit(s);
+    return s.errors;
+  }
+
+  errors: string[] = [];
+
+  visitImplicitReceiver(ast: ImplicitReceiver, context: any) {}
+
+  visitInterpolation(ast: Interpolation, context: any) {}
+
+  visitLiteralPrimitive(ast: LiteralPrimitive, context: any) {}
+
+  visitPropertyRead(ast: PropertyRead, context: any) {}
+
+  visitPropertyWrite(ast: PropertyWrite, context: any) {}
+
+  visitSafePropertyRead(ast: SafePropertyRead, context: any) {}
+
+  visitMethodCall(ast: MethodCall, context: any) {}
+
+  visitSafeMethodCall(ast: SafeMethodCall, context: any) {}
+
+  visitFunctionCall(ast: FunctionCall, context: any) {}
+
+  visitLiteralArray(ast: LiteralArray, context: any) { this.visitAll(ast.expressions); }
+
+  visitLiteralMap(ast: LiteralMap, context: any) { this.visitAll(ast.values); }
+
+  visitBinary(ast: Binary, context: any) {}
+
+  visitPrefixNot(ast: PrefixNot, context: any) {}
+
+  visitNonNullAssert(ast: NonNullAssert, context: any) {}
+
+  visitConditional(ast: Conditional, context: any) {}
+
+  visitPipe(ast: BindingPipe, context: any) { this.errors.push('pipes'); }
+
+  visitKeyedRead(ast: KeyedRead, context: any) {}
+
+  visitKeyedWrite(ast: KeyedWrite, context: any) {}
+
+  visitAll(asts: any[]): any[] { return asts.map(node => node.visit(this)); }
+
+  visitChain(ast: Chain, context: any) {}
+
+  visitQuote(ast: Quote, context: any) {}
+}
diff --git a/packages/compiler/src/i18n/digest.ts b/packages/compiler/src/i18n/digest.ts
new file mode 100644
index 000000000000..c60b853fb274
--- /dev/null
+++ b/packages/compiler/src/i18n/digest.ts
@@ -0,0 +1,337 @@
+/**
+ * @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 {utf8Encode} from '../util';
+
+import * as i18n from './i18n_ast';
+
+export function digest(message: i18n.Message): string {
+  return message.id || sha1(serializeNodes(message.nodes).join('') + `[${message.meaning}]`);
+}
+
+export function decimalDigest(message: i18n.Message): string {
+  if (message.id) {
+    return message.id;
+  }
+
+  const visitor = new _SerializerIgnoreIcuExpVisitor();
+  const parts = message.nodes.map(a => a.visit(visitor, null));
+  return computeMsgId(parts.join(''), message.meaning);
+}
+
+/**
+ * Serialize the i18n ast to something xml-like in order to generate an UID.
+ *
+ * The visitor is also used in the i18n parser tests
+ *
+ * @internal
+ */
+class _SerializerVisitor implements i18n.Visitor {
+  visitText(text: i18n.Text, context: any): any { return text.value; }
+
+  visitContainer(container: i18n.Container, context: any): any {
+    return `[${container.children.map(child => child.visit(this)).join(', ')}]`;
+  }
+
+  visitIcu(icu: i18n.Icu, context: any): any {
+    const strCases =
+        Object.keys(icu.cases).map((k: string) => `${k} {${icu.cases[k].visit(this)}}`);
+    return `{${icu.expression}, ${icu.type}, ${strCases.join(', ')}}`;
+  }
+
+  visitTagPlaceholder(ph: i18n.TagPlaceholder, context: any): any {
+    return ph.isVoid ?
+        `<ph tag name="${ph.startName}"/>` :
+        `<ph tag name="${ph.startName}">${ph.children.map(child => child.visit(this)).join(', ')}</ph name="${ph.closeName}">`;
+  }
+
+  visitPlaceholder(ph: i18n.Placeholder, context: any): any {
+    return ph.value ? `<ph name="${ph.name}">${ph.value}</ph>` : `<ph name="${ph.name}"/>`;
+  }
+
+  visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): any {
+    return `<ph icu name="${ph.name}">${ph.value.visit(this)}</ph>`;
+  }
+}
+
+const serializerVisitor = new _SerializerVisitor();
+
+export function serializeNodes(nodes: i18n.Node[]): string[] {
+  return nodes.map(a => a.visit(serializerVisitor, null));
+}
+
+/**
+ * Serialize the i18n ast to something xml-like in order to generate an UID.
+ *
+ * Ignore the ICU expressions so that message IDs stays identical if only the expression changes.
+ *
+ * @internal
+ */
+class _SerializerIgnoreIcuExpVisitor extends _SerializerVisitor {
+  visitIcu(icu: i18n.Icu, context: any): any {
+    let strCases = Object.keys(icu.cases).map((k: string) => `${k} {${icu.cases[k].visit(this)}}`);
+    // Do not take the expression into account
+    return `{${icu.type}, ${strCases.join(', ')}}`;
+  }
+}
+
+/**
+ * Compute the SHA1 of the given string
+ *
+ * see http://csrc.nist.gov/publications/fips/fips180-4/fips-180-4.pdf
+ *
+ * WARNING: this function has not been designed not tested with security in mind.
+ *          DO NOT USE IT IN A SECURITY SENSITIVE CONTEXT.
+ */
+export function sha1(str: string): string {
+  const utf8 = utf8Encode(str);
+  const words32 = stringToWords32(utf8, Endian.Big);
+  const len = utf8.length * 8;
+
+  const w = new Array(80);
+  let [a, b, c, d, e]: number[] = [0x67452301, 0xefcdab89, 0x98badcfe, 0x10325476, 0xc3d2e1f0];
+
+  words32[len >> 5] |= 0x80 << (24 - len % 32);
+  words32[((len + 64 >> 9) << 4) + 15] = len;
+
+  for (let i = 0; i < words32.length; i += 16) {
+    const [h0, h1, h2, h3, h4]: number[] = [a, b, c, d, e];
+
+    for (let j = 0; j < 80; j++) {
+      if (j < 16) {
+        w[j] = words32[i + j];
+      } else {
+        w[j] = rol32(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1);
+      }
+
+      const [f, k] = fk(j, b, c, d);
+      const temp = [rol32(a, 5), f, e, k, w[j]].reduce(add32);
+      [e, d, c, b, a] = [d, c, rol32(b, 30), a, temp];
+    }
+
+    [a, b, c, d, e] = [add32(a, h0), add32(b, h1), add32(c, h2), add32(d, h3), add32(e, h4)];
+  }
+
+  return byteStringToHexString(words32ToByteString([a, b, c, d, e]));
+}
+
+function fk(index: number, b: number, c: number, d: number): [number, number] {
+  if (index < 20) {
+    return [(b & c) | (~b & d), 0x5a827999];
+  }
+
+  if (index < 40) {
+    return [b ^ c ^ d, 0x6ed9eba1];
+  }
+
+  if (index < 60) {
+    return [(b & c) | (b & d) | (c & d), 0x8f1bbcdc];
+  }
+
+  return [b ^ c ^ d, 0xca62c1d6];
+}
+
+/**
+ * Compute the fingerprint of the given string
+ *
+ * The output is 64 bit number encoded as a decimal string
+ *
+ * based on:
+ * https://github.com/google/closure-compiler/blob/master/src/com/google/javascript/jscomp/GoogleJsMessageIdGenerator.java
+ */
+export function fingerprint(str: string): [number, number] {
+  const utf8 = utf8Encode(str);
+
+  let [hi, lo] = [hash32(utf8, 0), hash32(utf8, 102072)];
+
+  if (hi == 0 && (lo == 0 || lo == 1)) {
+    hi = hi ^ 0x130f9bef;
+    lo = lo ^ -0x6b5f56d8;
+  }
+
+  return [hi, lo];
+}
+
+export function computeMsgId(msg: string, meaning: string): string {
+  let [hi, lo] = fingerprint(msg);
+
+  if (meaning) {
+    const [him, lom] = fingerprint(meaning);
+    [hi, lo] = add64(rol64([hi, lo], 1), [him, lom]);
+  }
+
+  return byteStringToDecString(words32ToByteString([hi & 0x7fffffff, lo]));
+}
+
+function hash32(str: string, c: number): number {
+  let [a, b] = [0x9e3779b9, 0x9e3779b9];
+  let i: number;
+
+  const len = str.length;
+
+  for (i = 0; i + 12 <= len; i += 12) {
+    a = add32(a, wordAt(str, i, Endian.Little));
+    b = add32(b, wordAt(str, i + 4, Endian.Little));
+    c = add32(c, wordAt(str, i + 8, Endian.Little));
+    [a, b, c] = mix([a, b, c]);
+  }
+
+  a = add32(a, wordAt(str, i, Endian.Little));
+  b = add32(b, wordAt(str, i + 4, Endian.Little));
+  // the first byte of c is reserved for the length
+  c = add32(c, len);
+  c = add32(c, wordAt(str, i + 8, Endian.Little) << 8);
+
+  return mix([a, b, c])[2];
+}
+
+// clang-format off
+function mix([a, b, c]: [number, number, number]): [number, number, number] {
+  a = sub32(a, b); a = sub32(a, c); a ^= c >>> 13;
+  b = sub32(b, c); b = sub32(b, a); b ^= a << 8;
+  c = sub32(c, a); c = sub32(c, b); c ^= b >>> 13;
+  a = sub32(a, b); a = sub32(a, c); a ^= c >>> 12;
+  b = sub32(b, c); b = sub32(b, a); b ^= a << 16;
+  c = sub32(c, a); c = sub32(c, b); c ^= b >>> 5;
+  a = sub32(a, b); a = sub32(a, c); a ^= c >>> 3;
+  b = sub32(b, c); b = sub32(b, a); b ^= a << 10;
+  c = sub32(c, a); c = sub32(c, b); c ^= b >>> 15;
+  return [a, b, c];
+}
+// clang-format on
+
+// Utils
+
+enum Endian {
+  Little,
+  Big,
+}
+
+function add32(a: number, b: number): number {
+  return add32to64(a, b)[1];
+}
+
+function add32to64(a: number, b: number): [number, number] {
+  const low = (a & 0xffff) + (b & 0xffff);
+  const high = (a >>> 16) + (b >>> 16) + (low >>> 16);
+  return [high >>> 16, (high << 16) | (low & 0xffff)];
+}
+
+function add64([ah, al]: [number, number], [bh, bl]: [number, number]): [number, number] {
+  const [carry, l] = add32to64(al, bl);
+  const h = add32(add32(ah, bh), carry);
+  return [h, l];
+}
+
+function sub32(a: number, b: number): number {
+  const low = (a & 0xffff) - (b & 0xffff);
+  const high = (a >> 16) - (b >> 16) + (low >> 16);
+  return (high << 16) | (low & 0xffff);
+}
+
+// Rotate a 32b number left `count` position
+function rol32(a: number, count: number): number {
+  return (a << count) | (a >>> (32 - count));
+}
+
+// Rotate a 64b number left `count` position
+function rol64([hi, lo]: [number, number], count: number): [number, number] {
+  const h = (hi << count) | (lo >>> (32 - count));
+  const l = (lo << count) | (hi >>> (32 - count));
+  return [h, l];
+}
+
+function stringToWords32(str: string, endian: Endian): number[] {
+  const words32 = Array((str.length + 3) >>> 2);
+
+  for (let i = 0; i < words32.length; i++) {
+    words32[i] = wordAt(str, i * 4, endian);
+  }
+
+  return words32;
+}
+
+function byteAt(str: string, index: number): number {
+  return index >= str.length ? 0 : str.charCodeAt(index) & 0xff;
+}
+
+function wordAt(str: string, index: number, endian: Endian): number {
+  let word = 0;
+  if (endian === Endian.Big) {
+    for (let i = 0; i < 4; i++) {
+      word += byteAt(str, index + i) << (24 - 8 * i);
+    }
+  } else {
+    for (let i = 0; i < 4; i++) {
+      word += byteAt(str, index + i) << 8 * i;
+    }
+  }
+  return word;
+}
+
+function words32ToByteString(words32: number[]): string {
+  return words32.reduce((str, word) => str + word32ToByteString(word), '');
+}
+
+function word32ToByteString(word: number): string {
+  let str = '';
+  for (let i = 0; i < 4; i++) {
+    str += String.fromCharCode((word >>> 8 * (3 - i)) & 0xff);
+  }
+  return str;
+}
+
+function byteStringToHexString(str: string): string {
+  let hex: string = '';
+  for (let i = 0; i < str.length; i++) {
+    const b = byteAt(str, i);
+    hex += (b >>> 4).toString(16) + (b & 0x0f).toString(16);
+  }
+  return hex.toLowerCase();
+}
+
+// based on http://www.danvk.org/hex2dec.html (JS can not handle more than 56b)
+function byteStringToDecString(str: string): string {
+  let decimal = '';
+  let toThePower = '1';
+
+  for (let i = str.length - 1; i >= 0; i--) {
+    decimal = addBigInt(decimal, numberTimesBigInt(byteAt(str, i), toThePower));
+    toThePower = numberTimesBigInt(256, toThePower);
+  }
+
+  return decimal.split('').reverse().join('');
+}
+
+// x and y decimal, lowest significant digit first
+function addBigInt(x: string, y: string): string {
+  let sum = '';
+  const len = Math.max(x.length, y.length);
+  for (let i = 0, carry = 0; i < len || carry; i++) {
+    const tmpSum = carry + +(x[i] || 0) + +(y[i] || 0);
+    if (tmpSum >= 10) {
+      carry = 1;
+      sum += tmpSum - 10;
+    } else {
+      carry = 0;
+      sum += tmpSum;
+    }
+  }
+
+  return sum;
+}
+
+function numberTimesBigInt(num: number, b: string): string {
+  let product = '';
+  let bToThePower = b;
+  for (; num !== 0; num = num >>> 1) {
+    if (num & 1) product = addBigInt(product, bToThePower);
+    bToThePower = addBigInt(bToThePower, bToThePower);
+  }
+  return product;
+}
diff --git a/packages/compiler/src/i18n/extractor.ts b/packages/compiler/src/i18n/extractor.ts
new file mode 100644
index 000000000000..8b950feb6d10
--- /dev/null
+++ b/packages/compiler/src/i18n/extractor.ts
@@ -0,0 +1,124 @@
+/**
+ * @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
+ */
+
+
+/**
+ * Extract i18n messages from source code
+ */
+import {analyzeAndValidateNgModules} from '../aot/compiler';
+import {createAotUrlResolver} from '../aot/compiler_factory';
+import {StaticReflector} from '../aot/static_reflector';
+import {StaticSymbolCache} from '../aot/static_symbol';
+import {StaticSymbolResolver, StaticSymbolResolverHost} from '../aot/static_symbol_resolver';
+import {AotSummaryResolver, AotSummaryResolverHost} from '../aot/summary_resolver';
+import {CompileDirectiveMetadata} from '../compile_metadata';
+import {CompilerConfig} from '../config';
+import {ViewEncapsulation} from '../core';
+import {DirectiveNormalizer} from '../directive_normalizer';
+import {DirectiveResolver} from '../directive_resolver';
+import {CompileMetadataResolver} from '../metadata_resolver';
+import {HtmlParser} from '../ml_parser/html_parser';
+import {InterpolationConfig} from '../ml_parser/interpolation_config';
+import {NgModuleResolver} from '../ng_module_resolver';
+import {ParseError} from '../parse_util';
+import {PipeResolver} from '../pipe_resolver';
+import {DomElementSchemaRegistry} from '../schema/dom_element_schema_registry';
+import {syntaxError} from '../util';
+
+import {MessageBundle} from './message_bundle';
+
+
+
+/**
+ * The host of the Extractor disconnects the implementation from TypeScript / other language
+ * services and from underlying file systems.
+ */
+export interface ExtractorHost extends StaticSymbolResolverHost, AotSummaryResolverHost {
+  /**
+   * Converts a path that refers to a resource into an absolute filePath
+   * that can be lateron used for loading the resource via `loadResource.
+   */
+  resourceNameToFileName(path: string, containingFile: string): string|null;
+  /**
+   * Loads a resource (e.g. html / css)
+   */
+  loadResource(path: string): Promise<string>|string;
+}
+
+export class Extractor {
+  constructor(
+      public host: ExtractorHost, private staticSymbolResolver: StaticSymbolResolver,
+      private messageBundle: MessageBundle, private metadataResolver: CompileMetadataResolver) {}
+
+  extract(rootFiles: string[]): Promise<MessageBundle> {
+    const {files, ngModules} = analyzeAndValidateNgModules(
+        rootFiles, this.host, this.staticSymbolResolver, this.metadataResolver);
+    return Promise
+        .all(ngModules.map(
+            ngModule => this.metadataResolver.loadNgModuleDirectiveAndPipeMetadata(
+                ngModule.type.reference, false)))
+        .then(() => {
+          const errors: ParseError[] = [];
+
+          files.forEach(file => {
+            const compMetas: CompileDirectiveMetadata[] = [];
+            file.directives.forEach(directiveType => {
+              const dirMeta = this.metadataResolver.getDirectiveMetadata(directiveType);
+              if (dirMeta && dirMeta.isComponent) {
+                compMetas.push(dirMeta);
+              }
+            });
+            compMetas.forEach(compMeta => {
+              const html = compMeta.template !.template !;
+              // Template URL points to either an HTML or TS file depending on
+              // whether the file is used with `templateUrl:` or `template:`,
+              // respectively.
+              const templateUrl = compMeta.template !.templateUrl !;
+              const interpolationConfig =
+                  InterpolationConfig.fromArray(compMeta.template !.interpolation);
+              errors.push(...this.messageBundle.updateFromTemplate(
+                  html, templateUrl, interpolationConfig) !);
+            });
+          });
+
+          if (errors.length) {
+            throw new Error(errors.map(e => e.toString()).join('\n'));
+          }
+
+          return this.messageBundle;
+        });
+  }
+
+  static create(host: ExtractorHost, locale: string|null):
+      {extractor: Extractor, staticReflector: StaticReflector} {
+    const htmlParser = new HtmlParser();
+
+    const urlResolver = createAotUrlResolver(host);
+    const symbolCache = new StaticSymbolCache();
+    const summaryResolver = new AotSummaryResolver(host, symbolCache);
+    const staticSymbolResolver = new StaticSymbolResolver(host, symbolCache, summaryResolver);
+    const staticReflector = new StaticReflector(summaryResolver, staticSymbolResolver);
+
+    const config =
+        new CompilerConfig({defaultEncapsulation: ViewEncapsulation.Emulated, useJit: false});
+
+    const normalizer = new DirectiveNormalizer(
+        {get: (url: string) => host.loadResource(url)}, urlResolver, htmlParser, config);
+    const elementSchemaRegistry = new DomElementSchemaRegistry();
+    const resolver = new CompileMetadataResolver(
+        config, htmlParser, new NgModuleResolver(staticReflector),
+        new DirectiveResolver(staticReflector), new PipeResolver(staticReflector), summaryResolver,
+        elementSchemaRegistry, normalizer, console, symbolCache, staticReflector);
+
+    // TODO(vicb): implicit tags & attributes
+    const messageBundle = new MessageBundle(htmlParser, [], {}, locale);
+
+    const extractor = new Extractor(host, staticSymbolResolver, messageBundle, resolver);
+    return {extractor, staticReflector};
+  }
+}
diff --git a/packages/compiler/src/i18n/extractor_merger.ts b/packages/compiler/src/i18n/extractor_merger.ts
new file mode 100644
index 000000000000..4d37f489dacc
--- /dev/null
+++ b/packages/compiler/src/i18n/extractor_merger.ts
@@ -0,0 +1,521 @@
+/**
+ * @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 html from '../ml_parser/ast';
+import {InterpolationConfig} from '../ml_parser/interpolation_config';
+import {ParseTreeResult} from '../ml_parser/parser';
+import * as i18n from './i18n_ast';
+import {createI18nMessageFactory} from './i18n_parser';
+import {I18nError} from './parse_util';
+import {TranslationBundle} from './translation_bundle';
+
+const _I18N_ATTR = 'i18n';
+const _I18N_ATTR_PREFIX = 'i18n-';
+const _I18N_COMMENT_PREFIX_REGEXP = /^i18n:?/;
+const MEANING_SEPARATOR = '|';
+const ID_SEPARATOR = '@@';
+let i18nCommentsWarned = false;
+
+/**
+ * Extract translatable messages from an html AST
+ */
+export function extractMessages(
+    nodes: html.Node[], interpolationConfig: InterpolationConfig, implicitTags: string[],
+    implicitAttrs: {[k: string]: string[]}): ExtractionResult {
+  const visitor = new _Visitor(implicitTags, implicitAttrs);
+  return visitor.extract(nodes, interpolationConfig);
+}
+
+export function mergeTranslations(
+    nodes: html.Node[], translations: TranslationBundle, interpolationConfig: InterpolationConfig,
+    implicitTags: string[], implicitAttrs: {[k: string]: string[]}): ParseTreeResult {
+  const visitor = new _Visitor(implicitTags, implicitAttrs);
+  return visitor.merge(nodes, translations, interpolationConfig);
+}
+
+export class ExtractionResult {
+  constructor(public messages: i18n.Message[], public errors: I18nError[]) {}
+}
+
+enum _VisitorMode {
+  Extract,
+  Merge
+}
+
+/**
+ * This Visitor is used:
+ * 1. to extract all the translatable strings from an html AST (see `extract()`),
+ * 2. to replace the translatable strings with the actual translations (see `merge()`)
+ *
+ * @internal
+ */
+class _Visitor implements html.Visitor {
+  // TODO(issue/24571): remove '!'.
+  private _depth !: number;
+
+  // <el i18n>...</el>
+  // TODO(issue/24571): remove '!'.
+  private _inI18nNode !: boolean;
+  // TODO(issue/24571): remove '!'.
+  private _inImplicitNode !: boolean;
+
+  // <!--i18n-->...<!--/i18n-->
+  // TODO(issue/24571): remove '!'.
+  private _inI18nBlock !: boolean;
+  // TODO(issue/24571): remove '!'.
+  private _blockMeaningAndDesc !: string;
+  // TODO(issue/24571): remove '!'.
+  private _blockChildren !: html.Node[];
+  // TODO(issue/24571): remove '!'.
+  private _blockStartDepth !: number;
+
+  // {<icu message>}
+  // TODO(issue/24571): remove '!'.
+  private _inIcu !: boolean;
+
+  // set to void 0 when not in a section
+  private _msgCountAtSectionStart: number|undefined;
+  // TODO(issue/24571): remove '!'.
+  private _errors !: I18nError[];
+  // TODO(issue/24571): remove '!'.
+  private _mode !: _VisitorMode;
+
+  // _VisitorMode.Extract only
+  // TODO(issue/24571): remove '!'.
+  private _messages !: i18n.Message[];
+
+  // _VisitorMode.Merge only
+  // TODO(issue/24571): remove '!'.
+  private _translations !: TranslationBundle;
+  // TODO(issue/24571): remove '!'.
+  private _createI18nMessage !: (
+      msg: html.Node[], meaning: string, description: string, id: string) => i18n.Message;
+
+
+  constructor(private _implicitTags: string[], private _implicitAttrs: {[k: string]: string[]}) {}
+
+  /**
+   * Extracts the messages from the tree
+   */
+  extract(nodes: html.Node[], interpolationConfig: InterpolationConfig): ExtractionResult {
+    this._init(_VisitorMode.Extract, interpolationConfig);
+
+    nodes.forEach(node => node.visit(this, null));
+
+    if (this._inI18nBlock) {
+      this._reportError(nodes[nodes.length - 1], 'Unclosed block');
+    }
+
+    return new ExtractionResult(this._messages, this._errors);
+  }
+
+  /**
+   * Returns a tree where all translatable nodes are translated
+   */
+  merge(
+      nodes: html.Node[], translations: TranslationBundle,
+      interpolationConfig: InterpolationConfig): ParseTreeResult {
+    this._init(_VisitorMode.Merge, interpolationConfig);
+    this._translations = translations;
+
+    // Construct a single fake root element
+    const wrapper = new html.Element('wrapper', [], nodes, undefined !, undefined, undefined);
+
+    const translatedNode = wrapper.visit(this, null);
+
+    if (this._inI18nBlock) {
+      this._reportError(nodes[nodes.length - 1], 'Unclosed block');
+    }
+
+    return new ParseTreeResult(translatedNode.children, this._errors);
+  }
+
+  visitExpansionCase(icuCase: html.ExpansionCase, context: any): any {
+    // Parse cases for translatable html attributes
+    const expression = html.visitAll(this, icuCase.expression, context);
+
+    if (this._mode === _VisitorMode.Merge) {
+      return new html.ExpansionCase(
+          icuCase.value, expression, icuCase.sourceSpan, icuCase.valueSourceSpan,
+          icuCase.expSourceSpan);
+    }
+  }
+
+  visitExpansion(icu: html.Expansion, context: any): html.Expansion {
+    this._mayBeAddBlockChildren(icu);
+
+    const wasInIcu = this._inIcu;
+
+    if (!this._inIcu) {
+      // nested ICU messages should not be extracted but top-level translated as a whole
+      if (this._isInTranslatableSection) {
+        this._addMessage([icu]);
+      }
+      this._inIcu = true;
+    }
+
+    const cases = html.visitAll(this, icu.cases, context);
+
+    if (this._mode === _VisitorMode.Merge) {
+      icu = new html.Expansion(
+          icu.switchValue, icu.type, cases, icu.sourceSpan, icu.switchValueSourceSpan);
+    }
+
+    this._inIcu = wasInIcu;
+
+    return icu;
+  }
+
+  visitComment(comment: html.Comment, context: any): any {
+    const isOpening = _isOpeningComment(comment);
+
+    if (isOpening && this._isInTranslatableSection) {
+      this._reportError(comment, 'Could not start a block inside a translatable section');
+      return;
+    }
+
+    const isClosing = _isClosingComment(comment);
+
+    if (isClosing && !this._inI18nBlock) {
+      this._reportError(comment, 'Trying to close an unopened block');
+      return;
+    }
+
+    if (!this._inI18nNode && !this._inIcu) {
+      if (!this._inI18nBlock) {
+        if (isOpening) {
+          // deprecated from v5 you should use <ng-container i18n> instead of i18n comments
+          if (!i18nCommentsWarned && <any>console && <any>console.warn) {
+            i18nCommentsWarned = true;
+            const details = comment.sourceSpan.details ? `, ${comment.sourceSpan.details}` : '';
+            // TODO(ocombe): use a log service once there is a public one available
+            console.warn(
+                `I18n comments are deprecated, use an <ng-container> element instead (${comment.sourceSpan.start}${details})`);
+          }
+          this._inI18nBlock = true;
+          this._blockStartDepth = this._depth;
+          this._blockChildren = [];
+          this._blockMeaningAndDesc =
+              comment.value !.replace(_I18N_COMMENT_PREFIX_REGEXP, '').trim();
+          this._openTranslatableSection(comment);
+        }
+      } else {
+        if (isClosing) {
+          if (this._depth == this._blockStartDepth) {
+            this._closeTranslatableSection(comment, this._blockChildren);
+            this._inI18nBlock = false;
+            const message = this._addMessage(this._blockChildren, this._blockMeaningAndDesc) !;
+            // merge attributes in sections
+            const nodes = this._translateMessage(comment, message);
+            return html.visitAll(this, nodes);
+          } else {
+            this._reportError(comment, 'I18N blocks should not cross element boundaries');
+            return;
+          }
+        }
+      }
+    }
+  }
+
+  visitText(text: html.Text, context: any): html.Text {
+    if (this._isInTranslatableSection) {
+      this._mayBeAddBlockChildren(text);
+    }
+    return text;
+  }
+
+  visitElement(el: html.Element, context: any): html.Element|null {
+    this._mayBeAddBlockChildren(el);
+    this._depth++;
+    const wasInI18nNode = this._inI18nNode;
+    const wasInImplicitNode = this._inImplicitNode;
+    let childNodes: html.Node[] = [];
+    let translatedChildNodes: html.Node[] = undefined !;
+
+    // Extract:
+    // - top level nodes with the (implicit) "i18n" attribute if not already in a section
+    // - ICU messages
+    const i18nAttr = _getI18nAttr(el);
+    const i18nMeta = i18nAttr ? i18nAttr.value : '';
+    const isImplicit = this._implicitTags.some(tag => el.name === tag) && !this._inIcu &&
+        !this._isInTranslatableSection;
+    const isTopLevelImplicit = !wasInImplicitNode && isImplicit;
+    this._inImplicitNode = wasInImplicitNode || isImplicit;
+
+    if (!this._isInTranslatableSection && !this._inIcu) {
+      if (i18nAttr || isTopLevelImplicit) {
+        this._inI18nNode = true;
+        const message = this._addMessage(el.children, i18nMeta) !;
+        translatedChildNodes = this._translateMessage(el, message);
+      }
+
+      if (this._mode == _VisitorMode.Extract) {
+        const isTranslatable = i18nAttr || isTopLevelImplicit;
+        if (isTranslatable) this._openTranslatableSection(el);
+        html.visitAll(this, el.children);
+        if (isTranslatable) this._closeTranslatableSection(el, el.children);
+      }
+    } else {
+      if (i18nAttr || isTopLevelImplicit) {
+        this._reportError(
+            el, 'Could not mark an element as translatable inside a translatable section');
+      }
+
+      if (this._mode == _VisitorMode.Extract) {
+        // Descend into child nodes for extraction
+        html.visitAll(this, el.children);
+      }
+    }
+
+    if (this._mode === _VisitorMode.Merge) {
+      const visitNodes = translatedChildNodes || el.children;
+      visitNodes.forEach(child => {
+        const visited = child.visit(this, context);
+        if (visited && !this._isInTranslatableSection) {
+          // Do not add the children from translatable sections (= i18n blocks here)
+          // They will be added later in this loop when the block closes (i.e. on `<!-- /i18n -->`)
+          childNodes = childNodes.concat(visited);
+        }
+      });
+    }
+
+    this._visitAttributesOf(el);
+
+    this._depth--;
+    this._inI18nNode = wasInI18nNode;
+    this._inImplicitNode = wasInImplicitNode;
+
+    if (this._mode === _VisitorMode.Merge) {
+      const translatedAttrs = this._translateAttributes(el);
+      return new html.Element(
+          el.name, translatedAttrs, childNodes, el.sourceSpan, el.startSourceSpan,
+          el.endSourceSpan);
+    }
+    return null;
+  }
+
+  visitAttribute(attribute: html.Attribute, context: any): any {
+    throw new Error('unreachable code');
+  }
+
+  private _init(mode: _VisitorMode, interpolationConfig: InterpolationConfig): void {
+    this._mode = mode;
+    this._inI18nBlock = false;
+    this._inI18nNode = false;
+    this._depth = 0;
+    this._inIcu = false;
+    this._msgCountAtSectionStart = undefined;
+    this._errors = [];
+    this._messages = [];
+    this._inImplicitNode = false;
+    this._createI18nMessage = createI18nMessageFactory(interpolationConfig);
+  }
+
+  // looks for translatable attributes
+  private _visitAttributesOf(el: html.Element): void {
+    const explicitAttrNameToValue: {[k: string]: string} = {};
+    const implicitAttrNames: string[] = this._implicitAttrs[el.name] || [];
+
+    el.attrs.filter(attr => attr.name.startsWith(_I18N_ATTR_PREFIX))
+        .forEach(
+            attr => explicitAttrNameToValue[attr.name.slice(_I18N_ATTR_PREFIX.length)] =
+                attr.value);
+
+    el.attrs.forEach(attr => {
+      if (attr.name in explicitAttrNameToValue) {
+        this._addMessage([attr], explicitAttrNameToValue[attr.name]);
+      } else if (implicitAttrNames.some(name => attr.name === name)) {
+        this._addMessage([attr]);
+      }
+    });
+  }
+
+  // add a translatable message
+  private _addMessage(ast: html.Node[], msgMeta?: string): i18n.Message|null {
+    if (ast.length == 0 ||
+        ast.length == 1 && ast[0] instanceof html.Attribute && !(<html.Attribute>ast[0]).value) {
+      // Do not create empty messages
+      return null;
+    }
+
+    const {meaning, description, id} = _parseMessageMeta(msgMeta);
+    const message = this._createI18nMessage(ast, meaning, description, id);
+    this._messages.push(message);
+    return message;
+  }
+
+  // Translates the given message given the `TranslationBundle`
+  // This is used for translating elements / blocks - see `_translateAttributes` for attributes
+  // no-op when called in extraction mode (returns [])
+  private _translateMessage(el: html.Node, message: i18n.Message): html.Node[] {
+    if (message && this._mode === _VisitorMode.Merge) {
+      const nodes = this._translations.get(message);
+
+      if (nodes) {
+        return nodes;
+      }
+
+      this._reportError(
+          el, `Translation unavailable for message id="${this._translations.digest(message)}"`);
+    }
+
+    return [];
+  }
+
+  // translate the attributes of an element and remove i18n specific attributes
+  private _translateAttributes(el: html.Element): html.Attribute[] {
+    const attributes = el.attrs;
+    const i18nParsedMessageMeta:
+        {[name: string]: {meaning: string, description: string, id: string}} = {};
+
+    attributes.forEach(attr => {
+      if (attr.name.startsWith(_I18N_ATTR_PREFIX)) {
+        i18nParsedMessageMeta[attr.name.slice(_I18N_ATTR_PREFIX.length)] =
+            _parseMessageMeta(attr.value);
+      }
+    });
+
+    const translatedAttributes: html.Attribute[] = [];
+
+    attributes.forEach((attr) => {
+      if (attr.name === _I18N_ATTR || attr.name.startsWith(_I18N_ATTR_PREFIX)) {
+        // strip i18n specific attributes
+        return;
+      }
+
+      if (attr.value && attr.value != '' && i18nParsedMessageMeta.hasOwnProperty(attr.name)) {
+        const {meaning, description, id} = i18nParsedMessageMeta[attr.name];
+        const message: i18n.Message = this._createI18nMessage([attr], meaning, description, id);
+        const nodes = this._translations.get(message);
+        if (nodes) {
+          if (nodes.length == 0) {
+            translatedAttributes.push(new html.Attribute(attr.name, '', attr.sourceSpan));
+          } else if (nodes[0] instanceof html.Text) {
+            const value = (nodes[0] as html.Text).value;
+            translatedAttributes.push(new html.Attribute(attr.name, value, attr.sourceSpan));
+          } else {
+            this._reportError(
+                el,
+                `Unexpected translation for attribute "${attr.name}" (id="${id || this._translations.digest(message)}")`);
+          }
+        } else {
+          this._reportError(
+              el,
+              `Translation unavailable for attribute "${attr.name}" (id="${id || this._translations.digest(message)}")`);
+        }
+      } else {
+        translatedAttributes.push(attr);
+      }
+    });
+
+    return translatedAttributes;
+  }
+
+
+  /**
+   * Add the node as a child of the block when:
+   * - we are in a block,
+   * - we are not inside a ICU message (those are handled separately),
+   * - the node is a "direct child" of the block
+   */
+  private _mayBeAddBlockChildren(node: html.Node): void {
+    if (this._inI18nBlock && !this._inIcu && this._depth == this._blockStartDepth) {
+      this._blockChildren.push(node);
+    }
+  }
+
+  /**
+   * Marks the start of a section, see `_closeTranslatableSection`
+   */
+  private _openTranslatableSection(node: html.Node): void {
+    if (this._isInTranslatableSection) {
+      this._reportError(node, 'Unexpected section start');
+    } else {
+      this._msgCountAtSectionStart = this._messages.length;
+    }
+  }
+
+  /**
+   * A translatable section could be:
+   * - the content of translatable element,
+   * - nodes between `<!-- i18n -->` and `<!-- /i18n -->` comments
+   */
+  private get _isInTranslatableSection(): boolean {
+    return this._msgCountAtSectionStart !== void 0;
+  }
+
+  /**
+   * Terminates a section.
+   *
+   * If a section has only one significant children (comments not significant) then we should not
+   * keep the message from this children:
+   *
+   * `<p i18n="meaning|description">{ICU message}</p>` would produce two messages:
+   * - one for the <p> content with meaning and description,
+   * - another one for the ICU message.
+   *
+   * In this case the last message is discarded as it contains less information (the AST is
+   * otherwise identical).
+   *
+   * Note that we should still keep messages extracted from attributes inside the section (ie in the
+   * ICU message here)
+   */
+  private _closeTranslatableSection(node: html.Node, directChildren: html.Node[]): void {
+    if (!this._isInTranslatableSection) {
+      this._reportError(node, 'Unexpected section end');
+      return;
+    }
+
+    const startIndex = this._msgCountAtSectionStart;
+    const significantChildren: number = directChildren.reduce(
+        (count: number, node: html.Node): number => count + (node instanceof html.Comment ? 0 : 1),
+        0);
+
+    if (significantChildren == 1) {
+      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);
+          break;
+        }
+      }
+    }
+
+    this._msgCountAtSectionStart = undefined;
+  }
+
+  private _reportError(node: html.Node, msg: string): void {
+    this._errors.push(new I18nError(node.sourceSpan !, msg));
+  }
+}
+
+function _isOpeningComment(n: html.Node): boolean {
+  return !!(n instanceof html.Comment && n.value && n.value.startsWith('i18n'));
+}
+
+function _isClosingComment(n: html.Node): boolean {
+  return !!(n instanceof html.Comment && n.value && n.value === '/i18n');
+}
+
+function _getI18nAttr(p: html.Element): html.Attribute|null {
+  return p.attrs.find(attr => attr.name === _I18N_ATTR) || null;
+}
+
+function _parseMessageMeta(i18n?: string): {meaning: string, description: string, id: string} {
+  if (!i18n) return {meaning: '', description: '', id: ''};
+
+  const idIndex = i18n.indexOf(ID_SEPARATOR);
+  const descIndex = i18n.indexOf(MEANING_SEPARATOR);
+  const [meaningAndDesc, id] =
+      (idIndex > -1) ? [i18n.slice(0, idIndex), i18n.slice(idIndex + 2)] : [i18n, ''];
+  const [meaning, description] = (descIndex > -1) ?
+      [meaningAndDesc.slice(0, descIndex), meaningAndDesc.slice(descIndex + 1)] :
+      ['', meaningAndDesc];
+
+  return {meaning, description, id};
+}
diff --git a/packages/compiler/src/i18n/i18n_ast.ts b/packages/compiler/src/i18n/i18n_ast.ts
new file mode 100644
index 000000000000..fd2fd93034bd
--- /dev/null
+++ b/packages/compiler/src/i18n/i18n_ast.ts
@@ -0,0 +1,158 @@
+/**
+ * @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';
+
+export class Message {
+  sources: MessageSpan[];
+
+  /**
+   * @param nodes message AST
+   * @param placeholders maps placeholder names to static content
+   * @param placeholderToMessage maps placeholder names to messages (used for nested ICU messages)
+   * @param meaning
+   * @param description
+   * @param id
+   */
+  constructor(
+      public nodes: Node[], public placeholders: {[phName: string]: string},
+      public placeholderToMessage: {[phName: string]: Message}, public meaning: 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 {
+  sourceSpan: ParseSourceSpan;
+  visit(visitor: Visitor, context?: any): any;
+}
+
+export class Text implements Node {
+  constructor(public value: string, public sourceSpan: ParseSourceSpan) {}
+
+  visit(visitor: Visitor, context?: any): any { return visitor.visitText(this, context); }
+}
+
+// TODO(vicb): do we really need this node (vs an array) ?
+export class Container implements Node {
+  constructor(public children: Node[], public sourceSpan: ParseSourceSpan) {}
+
+  visit(visitor: Visitor, context?: any): any { return visitor.visitContainer(this, context); }
+}
+
+export class Icu implements Node {
+  // TODO(issue/24571): remove '!'.
+  public expressionPlaceholder !: string;
+  constructor(
+      public expression: string, public type: string, public cases: {[k: string]: Node},
+      public sourceSpan: ParseSourceSpan) {}
+
+  visit(visitor: Visitor, context?: any): any { return visitor.visitIcu(this, context); }
+}
+
+export class TagPlaceholder implements Node {
+  constructor(
+      public tag: string, public attrs: {[k: string]: string}, public startName: string,
+      public closeName: string, public children: Node[], public isVoid: boolean,
+      public sourceSpan: ParseSourceSpan) {}
+
+  visit(visitor: Visitor, context?: any): any { return visitor.visitTagPlaceholder(this, context); }
+}
+
+export class Placeholder implements Node {
+  constructor(public value: string, public name: string, public sourceSpan: ParseSourceSpan) {}
+
+  visit(visitor: Visitor, context?: any): any { return visitor.visitPlaceholder(this, context); }
+}
+
+export class IcuPlaceholder implements Node {
+  constructor(public value: Icu, public name: string, public sourceSpan: ParseSourceSpan) {}
+
+  visit(visitor: Visitor, context?: any): any { return visitor.visitIcuPlaceholder(this, context); }
+}
+
+export interface Visitor {
+  visitText(text: Text, context?: any): any;
+  visitContainer(container: Container, context?: any): any;
+  visitIcu(icu: Icu, context?: any): any;
+  visitTagPlaceholder(ph: TagPlaceholder, context?: any): any;
+  visitPlaceholder(ph: Placeholder, context?: any): any;
+  visitIcuPlaceholder(ph: IcuPlaceholder, context?: any): any;
+}
+
+// Clone the AST
+export class CloneVisitor implements Visitor {
+  visitText(text: Text, context?: any): Text { return new Text(text.value, text.sourceSpan); }
+
+  visitContainer(container: Container, context?: any): Container {
+    const children = container.children.map(n => n.visit(this, context));
+    return new Container(children, container.sourceSpan);
+  }
+
+  visitIcu(icu: Icu, context?: any): Icu {
+    const cases: {[k: string]: Node} = {};
+    Object.keys(icu.cases).forEach(key => cases[key] = icu.cases[key].visit(this, context));
+    const msg = new Icu(icu.expression, icu.type, cases, icu.sourceSpan);
+    msg.expressionPlaceholder = icu.expressionPlaceholder;
+    return msg;
+  }
+
+  visitTagPlaceholder(ph: TagPlaceholder, context?: any): TagPlaceholder {
+    const children = ph.children.map(n => n.visit(this, context));
+    return new TagPlaceholder(
+        ph.tag, ph.attrs, ph.startName, ph.closeName, children, ph.isVoid, ph.sourceSpan);
+  }
+
+  visitPlaceholder(ph: Placeholder, context?: any): Placeholder {
+    return new Placeholder(ph.value, ph.name, ph.sourceSpan);
+  }
+
+  visitIcuPlaceholder(ph: IcuPlaceholder, context?: any): IcuPlaceholder {
+    return new IcuPlaceholder(ph.value, ph.name, ph.sourceSpan);
+  }
+}
+
+// Visit all the nodes recursively
+export class RecurseVisitor implements Visitor {
+  visitText(text: Text, context?: any): any {}
+
+  visitContainer(container: Container, context?: any): any {
+    container.children.forEach(child => child.visit(this));
+  }
+
+  visitIcu(icu: Icu, context?: any): any {
+    Object.keys(icu.cases).forEach(k => { icu.cases[k].visit(this); });
+  }
+
+  visitTagPlaceholder(ph: TagPlaceholder, context?: any): any {
+    ph.children.forEach(child => child.visit(this));
+  }
+
+  visitPlaceholder(ph: Placeholder, context?: any): any {}
+
+  visitIcuPlaceholder(ph: IcuPlaceholder, context?: any): any {}
+}
diff --git a/packages/compiler/src/i18n/i18n_html_parser.ts b/packages/compiler/src/i18n/i18n_html_parser.ts
new file mode 100644
index 000000000000..b0c3397c030d
--- /dev/null
+++ b/packages/compiler/src/i18n/i18n_html_parser.ts
@@ -0,0 +1,75 @@
+/**
+ * @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 {MissingTranslationStrategy} from '../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 {Console} from '../util';
+
+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';
+
+export class I18NHtmlParser implements HtmlParser {
+  // @override
+  getTagDefinition: any;
+
+  private _translationBundle: TranslationBundle;
+
+  constructor(
+      private _htmlParser: HtmlParser, translations?: string, translationsFormat?: string,
+      missingTranslation: MissingTranslationStrategy = MissingTranslationStrategy.Warning,
+      console?: Console) {
+    if (translations) {
+      const serializer = createSerializer(translationsFormat);
+      this._translationBundle =
+          TranslationBundle.load(translations, 'i18n', serializer, missingTranslation, console);
+    } else {
+      this._translationBundle =
+          new TranslationBundle({}, null, digest, undefined, missingTranslation, console);
+    }
+  }
+
+  parse(
+      source: string, url: string, parseExpansionForms: boolean = false,
+      interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): ParseTreeResult {
+    const parseResult =
+        this._htmlParser.parse(source, url, parseExpansionForms, interpolationConfig);
+
+    if (parseResult.errors.length) {
+      return new ParseTreeResult(parseResult.rootNodes, parseResult.errors);
+    }
+
+    return mergeTranslations(
+        parseResult.rootNodes, this._translationBundle, interpolationConfig, [], {});
+  }
+}
+
+function createSerializer(format?: string): Serializer {
+  format = (format || 'xlf').toLowerCase();
+
+  switch (format) {
+    case 'xmb':
+      return new Xmb();
+    case 'xtb':
+      return new Xtb();
+    case 'xliff2':
+    case 'xlf2':
+      return new Xliff2();
+    case 'xliff':
+    case 'xlf':
+    default:
+      return new Xliff();
+  }
+}
diff --git a/packages/compiler/src/i18n/i18n_parser.ts b/packages/compiler/src/i18n/i18n_parser.ts
new file mode 100644
index 000000000000..815d58c2ffa3
--- /dev/null
+++ b/packages/compiler/src/i18n/i18n_parser.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 {Lexer as ExpressionLexer} from '../expression_parser/lexer';
+import {Parser as ExpressionParser} from '../expression_parser/parser';
+import * as html from '../ml_parser/ast';
+import {getHtmlTagDefinition} from '../ml_parser/html_tags';
+import {InterpolationConfig} from '../ml_parser/interpolation_config';
+import {ParseSourceSpan} from '../parse_util';
+
+import * as i18n from './i18n_ast';
+import {PlaceholderRegistry} from './serializers/placeholder';
+
+const _expParser = new ExpressionParser(new ExpressionLexer());
+
+/**
+ * Returns a function converting html nodes to an i18n Message given an interpolationConfig
+ */
+export function createI18nMessageFactory(interpolationConfig: InterpolationConfig): (
+    nodes: html.Node[], meaning: string, description: string, id: string) => i18n.Message {
+  const visitor = new _I18nVisitor(_expParser, interpolationConfig);
+
+  return (nodes: html.Node[], meaning: string, description: string, id: string) =>
+             visitor.toI18nMessage(nodes, meaning, description, id);
+}
+
+class _I18nVisitor implements html.Visitor {
+  // TODO(issue/24571): remove '!'.
+  private _isIcu !: boolean;
+  // TODO(issue/24571): remove '!'.
+  private _icuDepth !: number;
+  // TODO(issue/24571): remove '!'.
+  private _placeholderRegistry !: PlaceholderRegistry;
+  // TODO(issue/24571): remove '!'.
+  private _placeholderToContent !: {[phName: string]: string};
+  // TODO(issue/24571): remove '!'.
+  private _placeholderToMessage !: {[phName: string]: i18n.Message};
+
+  constructor(
+      private _expressionParser: ExpressionParser,
+      private _interpolationConfig: InterpolationConfig) {}
+
+  public toI18nMessage(nodes: html.Node[], meaning: string, description: string, id: string):
+      i18n.Message {
+    this._isIcu = nodes.length == 1 && nodes[0] instanceof html.Expansion;
+    this._icuDepth = 0;
+    this._placeholderRegistry = new PlaceholderRegistry();
+    this._placeholderToContent = {};
+    this._placeholderToMessage = {};
+
+    const i18nodes: i18n.Node[] = html.visitAll(this, nodes, {});
+
+    return new i18n.Message(
+        i18nodes, this._placeholderToContent, this._placeholderToMessage, meaning, description, id);
+  }
+
+  visitElement(el: html.Element, context: any): i18n.Node {
+    const children = html.visitAll(this, el.children);
+    const attrs: {[k: string]: string} = {};
+    el.attrs.forEach(attr => {
+      // Do not visit the attributes, translatable ones are top-level ASTs
+      attrs[attr.name] = attr.value;
+    });
+
+    const isVoid: boolean = getHtmlTagDefinition(el.name).isVoid;
+    const startPhName =
+        this._placeholderRegistry.getStartTagPlaceholderName(el.name, attrs, isVoid);
+    this._placeholderToContent[startPhName] = el.sourceSpan !.toString();
+
+    let closePhName = '';
+
+    if (!isVoid) {
+      closePhName = this._placeholderRegistry.getCloseTagPlaceholderName(el.name);
+      this._placeholderToContent[closePhName] = `</${el.name}>`;
+    }
+
+    return new i18n.TagPlaceholder(
+        el.name, attrs, startPhName, closePhName, children, isVoid, el.sourceSpan !);
+  }
+
+  visitAttribute(attribute: html.Attribute, context: any): i18n.Node {
+    return this._visitTextWithInterpolation(attribute.value, attribute.sourceSpan);
+  }
+
+  visitText(text: html.Text, context: any): i18n.Node {
+    return this._visitTextWithInterpolation(text.value, text.sourceSpan !);
+  }
+
+  visitComment(comment: html.Comment, context: any): i18n.Node|null { return null; }
+
+  visitExpansion(icu: html.Expansion, context: any): i18n.Node {
+    this._icuDepth++;
+    const i18nIcuCases: {[k: string]: i18n.Node} = {};
+    const i18nIcu = new i18n.Icu(icu.switchValue, icu.type, i18nIcuCases, icu.sourceSpan);
+    icu.cases.forEach((caze): void => {
+      i18nIcuCases[caze.value] = new i18n.Container(
+          caze.expression.map((node) => node.visit(this, {})), caze.expSourceSpan);
+    });
+    this._icuDepth--;
+
+    if (this._isIcu || this._icuDepth > 0) {
+      // Returns an ICU node when:
+      // - the message (vs a part of the message) is an ICU message, or
+      // - the ICU message is nested.
+      const expPh = this._placeholderRegistry.getUniquePlaceholder(`VAR_${icu.type}`);
+      i18nIcu.expressionPlaceholder = expPh;
+      this._placeholderToContent[expPh] = icu.switchValue;
+
+      return i18nIcu;
+    }
+
+    // Else returns a placeholder
+    // ICU placeholders should not be replaced with their original content but with the their
+    // translations. We need to create a new visitor (they are not re-entrant) to compute the
+    // message id.
+    // TODO(vicb): add a html.Node -> i18n.Message cache to avoid having to re-create the msg
+    const phName = this._placeholderRegistry.getPlaceholderName('ICU', icu.sourceSpan.toString());
+    const visitor = new _I18nVisitor(this._expressionParser, this._interpolationConfig);
+    this._placeholderToMessage[phName] = visitor.toI18nMessage([icu], '', '', '');
+    return new i18n.IcuPlaceholder(i18nIcu, phName, icu.sourceSpan);
+  }
+
+  visitExpansionCase(icuCase: html.ExpansionCase, context: any): i18n.Node {
+    throw new Error('Unreachable code');
+  }
+
+  private _visitTextWithInterpolation(text: string, sourceSpan: ParseSourceSpan): i18n.Node {
+    const splitInterpolation = this._expressionParser.splitInterpolation(
+        text, sourceSpan.start.toString(), this._interpolationConfig);
+
+    if (!splitInterpolation) {
+      // No expression, return a single text
+      return new i18n.Text(text, sourceSpan);
+    }
+
+    // Return a group of text + expressions
+    const nodes: i18n.Node[] = [];
+    const container = new i18n.Container(nodes, sourceSpan);
+    const {start: sDelimiter, end: eDelimiter} = this._interpolationConfig;
+
+    for (let i = 0; i < splitInterpolation.strings.length - 1; i++) {
+      const expression = splitInterpolation.expressions[i];
+      const baseName = _extractPlaceholderName(expression) || 'INTERPOLATION';
+      const phName = this._placeholderRegistry.getPlaceholderName(baseName, expression);
+
+      if (splitInterpolation.strings[i].length) {
+        // No need to add empty strings
+        nodes.push(new i18n.Text(splitInterpolation.strings[i], sourceSpan));
+      }
+
+      nodes.push(new i18n.Placeholder(expression, phName, sourceSpan));
+      this._placeholderToContent[phName] = sDelimiter + expression + eDelimiter;
+    }
+
+    // The last index contains no expression
+    const lastStringIdx = splitInterpolation.strings.length - 1;
+    if (splitInterpolation.strings[lastStringIdx].length) {
+      nodes.push(new i18n.Text(splitInterpolation.strings[lastStringIdx], sourceSpan));
+    }
+    return container;
+  }
+}
+
+const _CUSTOM_PH_EXP =
+    /\/\/[\s\S]*i18n[\s\S]*\([\s\S]*ph[\s\S]*=[\s\S]*("|')([\s\S]*?)\1[\s\S]*\)/g;
+
+function _extractPlaceholderName(input: string): string {
+  return input.split(_CUSTOM_PH_EXP)[2];
+}
diff --git a/packages/compiler/src/i18n/index.ts b/packages/compiler/src/i18n/index.ts
new file mode 100644
index 000000000000..f47e971fd86e
--- /dev/null
+++ b/packages/compiler/src/i18n/index.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {Extractor, ExtractorHost} from './extractor';
+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
new file mode 100644
index 000000000000..e685478367f2
--- /dev/null
+++ b/packages/compiler/src/i18n/message_bundle.ts
@@ -0,0 +1,104 @@
+/**
+ * @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 {HtmlParser} from '../ml_parser/html_parser';
+import {InterpolationConfig} from '../ml_parser/interpolation_config';
+import {ParseError} from '../parse_util';
+
+import {extractMessages} from './extractor_merger';
+import * as i18n from './i18n_ast';
+import {PlaceholderMapper, Serializer} from './serializers/serializer';
+
+
+/**
+ * A container for message extracted from the templates.
+ */
+export class MessageBundle {
+  private _messages: i18n.Message[] = [];
+
+  constructor(
+      private _htmlParser: HtmlParser, private _implicitTags: string[],
+      private _implicitAttrs: {[k: string]: string[]}, private _locale: string|null = null) {}
+
+  updateFromTemplate(html: string, url: string, interpolationConfig: InterpolationConfig):
+      ParseError[] {
+    const htmlParserResult = this._htmlParser.parse(html, url, true, interpolationConfig);
+
+    if (htmlParserResult.errors.length) {
+      return htmlParserResult.errors;
+    }
+
+    const i18nParserResult = extractMessages(
+        htmlParserResult.rootNodes, interpolationConfig, this._implicitTags, this._implicitAttrs);
+
+    if (i18nParserResult.errors.length) {
+      return i18nParserResult.errors;
+    }
+
+    this._messages.push(...i18nParserResult.messages);
+    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, filterSources?: (path: string) => string): string {
+    const messages: {[id: string]: i18n.Message} = {};
+    const mapperVisitor = new MapPlaceholderNames();
+
+    // Deduplicate messages based on their ID
+    this._messages.forEach(message => {
+      const id = serializer.digest(message);
+      if (!messages.hasOwnProperty(id)) {
+        messages[id] = message;
+      } else {
+        messages[id].sources.push(...message.sources);
+      }
+    });
+
+    // Transform placeholder names using the serializer mapping
+    const msgList = Object.keys(messages).map(id => {
+      const mapper = serializer.createNameMapper(messages[id]);
+      const src = messages[id];
+      const nodes = mapper ? mapperVisitor.convert(src.nodes, mapper) : src.nodes;
+      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);
+  }
+}
+
+// Transform an i18n AST by renaming the placeholder nodes with the given mapper
+class MapPlaceholderNames extends i18n.CloneVisitor {
+  convert(nodes: i18n.Node[], mapper: PlaceholderMapper): i18n.Node[] {
+    return mapper ? nodes.map(n => n.visit(this, mapper)) : nodes;
+  }
+
+  visitTagPlaceholder(ph: i18n.TagPlaceholder, mapper: PlaceholderMapper): i18n.TagPlaceholder {
+    const startName = mapper.toPublicName(ph.startName) !;
+    const closeName = ph.closeName ? mapper.toPublicName(ph.closeName) ! : ph.closeName;
+    const children = ph.children.map(n => n.visit(this, mapper));
+    return new i18n.TagPlaceholder(
+        ph.tag, ph.attrs, startName, closeName, children, ph.isVoid, ph.sourceSpan);
+  }
+
+  visitPlaceholder(ph: i18n.Placeholder, mapper: PlaceholderMapper): i18n.Placeholder {
+    return new i18n.Placeholder(ph.value, mapper.toPublicName(ph.name) !, ph.sourceSpan);
+  }
+
+  visitIcuPlaceholder(ph: i18n.IcuPlaceholder, mapper: PlaceholderMapper): i18n.IcuPlaceholder {
+    return new i18n.IcuPlaceholder(ph.value, mapper.toPublicName(ph.name) !, ph.sourceSpan);
+  }
+}
diff --git a/packages/compiler/src/i18n/parse_util.ts b/packages/compiler/src/i18n/parse_util.ts
new file mode 100644
index 000000000000..37acd859ac61
--- /dev/null
+++ b/packages/compiler/src/i18n/parse_util.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {ParseError, ParseSourceSpan} from '../parse_util';
+
+/**
+ * An i18n error.
+ */
+export class I18nError extends ParseError {
+  constructor(span: ParseSourceSpan, msg: string) { super(span, msg); }
+}
diff --git a/packages/compiler/src/i18n/serializers/placeholder.ts b/packages/compiler/src/i18n/serializers/placeholder.ts
new file mode 100644
index 000000000000..def0996964c6
--- /dev/null
+++ b/packages/compiler/src/i18n/serializers/placeholder.ts
@@ -0,0 +1,122 @@
+/**
+ * @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 TAG_TO_PLACEHOLDER_NAMES: {[k: string]: string} = {
+  'A': 'LINK',
+  'B': 'BOLD_TEXT',
+  'BR': 'LINE_BREAK',
+  'EM': 'EMPHASISED_TEXT',
+  'H1': 'HEADING_LEVEL1',
+  'H2': 'HEADING_LEVEL2',
+  'H3': 'HEADING_LEVEL3',
+  'H4': 'HEADING_LEVEL4',
+  'H5': 'HEADING_LEVEL5',
+  'H6': 'HEADING_LEVEL6',
+  'HR': 'HORIZONTAL_RULE',
+  'I': 'ITALIC_TEXT',
+  'LI': 'LIST_ITEM',
+  'LINK': 'MEDIA_LINK',
+  'OL': 'ORDERED_LIST',
+  'P': 'PARAGRAPH',
+  'Q': 'QUOTATION',
+  'S': 'STRIKETHROUGH_TEXT',
+  'SMALL': 'SMALL_TEXT',
+  'SUB': 'SUBSTRIPT',
+  'SUP': 'SUPERSCRIPT',
+  'TBODY': 'TABLE_BODY',
+  'TD': 'TABLE_CELL',
+  'TFOOT': 'TABLE_FOOTER',
+  'TH': 'TABLE_HEADER_CELL',
+  'THEAD': 'TABLE_HEADER',
+  'TR': 'TABLE_ROW',
+  'TT': 'MONOSPACED_TEXT',
+  'U': 'UNDERLINED_TEXT',
+  'UL': 'UNORDERED_LIST',
+};
+
+/**
+ * Creates unique names for placeholder with different content.
+ *
+ * Returns the same placeholder name when the content is identical.
+ */
+export class PlaceholderRegistry {
+  // Count the occurrence of the base name top generate a unique name
+  private _placeHolderNameCounts: {[k: string]: number} = {};
+  // Maps signature to placeholder names
+  private _signatureToName: {[k: string]: string} = {};
+
+  getStartTagPlaceholderName(tag: string, attrs: {[k: string]: string}, isVoid: boolean): string {
+    const signature = this._hashTag(tag, attrs, isVoid);
+    if (this._signatureToName[signature]) {
+      return this._signatureToName[signature];
+    }
+
+    const upperTag = tag.toUpperCase();
+    const baseName = TAG_TO_PLACEHOLDER_NAMES[upperTag] || `TAG_${upperTag}`;
+    const name = this._generateUniqueName(isVoid ? baseName : `START_${baseName}`);
+
+    this._signatureToName[signature] = name;
+
+    return name;
+  }
+
+  getCloseTagPlaceholderName(tag: string): string {
+    const signature = this._hashClosingTag(tag);
+    if (this._signatureToName[signature]) {
+      return this._signatureToName[signature];
+    }
+
+    const upperTag = tag.toUpperCase();
+    const baseName = TAG_TO_PLACEHOLDER_NAMES[upperTag] || `TAG_${upperTag}`;
+    const name = this._generateUniqueName(`CLOSE_${baseName}`);
+
+    this._signatureToName[signature] = name;
+
+    return name;
+  }
+
+  getPlaceholderName(name: string, content: string): string {
+    const upperName = name.toUpperCase();
+    const signature = `PH: ${upperName}=${content}`;
+    if (this._signatureToName[signature]) {
+      return this._signatureToName[signature];
+    }
+
+    const uniqueName = this._generateUniqueName(upperName);
+    this._signatureToName[signature] = uniqueName;
+
+    return uniqueName;
+  }
+
+  getUniquePlaceholder(name: string): string {
+    return this._generateUniqueName(name.toUpperCase());
+  }
+
+  // Generate a hash for a tag - does not take attribute order into account
+  private _hashTag(tag: string, attrs: {[k: string]: string}, isVoid: boolean): string {
+    const start = `<${tag}`;
+    const strAttrs = Object.keys(attrs).sort().map((name) => ` ${name}=${attrs[name]}`).join('');
+    const end = isVoid ? '/>' : `></${tag}>`;
+
+    return start + strAttrs + end;
+  }
+
+  private _hashClosingTag(tag: string): string { return this._hashTag(`/${tag}`, {}, false); }
+
+  private _generateUniqueName(base: string): string {
+    const seen = this._placeHolderNameCounts.hasOwnProperty(base);
+    if (!seen) {
+      this._placeHolderNameCounts[base] = 1;
+      return base;
+    }
+
+    const id = this._placeHolderNameCounts[base];
+    this._placeHolderNameCounts[base] = id + 1;
+    return `${base}_${id}`;
+  }
+}
diff --git a/packages/compiler/src/i18n/serializers/serializer.ts b/packages/compiler/src/i18n/serializers/serializer.ts
new file mode 100644
index 000000000000..4fb7dc8aee6c
--- /dev/null
+++ b/packages/compiler/src/i18n/serializers/serializer.ts
@@ -0,0 +1,98 @@
+/**
+ * @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 i18n from '../i18n_ast';
+
+export abstract class Serializer {
+  // - The `placeholders` and `placeholderToMessage` properties are irrelevant in the input messages
+  // - The `id` contains the message id that the serializer is expected to use
+  // - Placeholder names are already map to public names using the provided mapper
+  abstract write(messages: i18n.Message[], locale: string|null): string;
+
+  abstract load(content: string, url: string):
+      {locale: string | null, i18nNodesByMsgId: {[msgId: string]: i18n.Node[]}};
+
+  abstract digest(message: i18n.Message): string;
+
+  // Creates a name mapper, see `PlaceholderMapper`
+  // Returning `null` means that no name mapping is used.
+  createNameMapper(message: i18n.Message): PlaceholderMapper|null { return null; }
+}
+
+/**
+ * A `PlaceholderMapper` converts placeholder names from internal to serialized representation and
+ * back.
+ *
+ * It should be used for serialization format that put constraints on the placeholder names.
+ */
+export interface PlaceholderMapper {
+  toPublicName(internalName: string): string|null;
+
+  toInternalName(publicName: string): string|null;
+}
+
+/**
+ * A simple mapper that take a function to transform an internal name to a public name
+ */
+export class SimplePlaceholderMapper extends i18n.RecurseVisitor implements PlaceholderMapper {
+  private internalToPublic: {[k: string]: string} = {};
+  private publicToNextId: {[k: string]: number} = {};
+  private publicToInternal: {[k: string]: string} = {};
+
+  // create a mapping from the message
+  constructor(message: i18n.Message, private mapName: (name: string) => string) {
+    super();
+    message.nodes.forEach(node => node.visit(this));
+  }
+
+  toPublicName(internalName: string): string|null {
+    return this.internalToPublic.hasOwnProperty(internalName) ?
+        this.internalToPublic[internalName] :
+        null;
+  }
+
+  toInternalName(publicName: string): string|null {
+    return this.publicToInternal.hasOwnProperty(publicName) ? this.publicToInternal[publicName] :
+                                                              null;
+  }
+
+  visitText(text: i18n.Text, context?: any): any { return null; }
+
+  visitTagPlaceholder(ph: i18n.TagPlaceholder, context?: any): any {
+    this.visitPlaceholderName(ph.startName);
+    super.visitTagPlaceholder(ph, context);
+    this.visitPlaceholderName(ph.closeName);
+  }
+
+  visitPlaceholder(ph: i18n.Placeholder, context?: any): any { this.visitPlaceholderName(ph.name); }
+
+  visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): any {
+    this.visitPlaceholderName(ph.name);
+  }
+
+  // XMB placeholders could only contains A-Z, 0-9 and _
+  private visitPlaceholderName(internalName: string): void {
+    if (!internalName || this.internalToPublic.hasOwnProperty(internalName)) {
+      return;
+    }
+
+    let publicName = this.mapName(internalName);
+
+    if (this.publicToInternal.hasOwnProperty(publicName)) {
+      // Create a new XMB when it has already been used
+      const nextId = this.publicToNextId[publicName];
+      this.publicToNextId[publicName] = nextId + 1;
+      publicName = `${publicName}_${nextId}`;
+    } else {
+      this.publicToNextId[publicName] = 1;
+    }
+
+    this.internalToPublic[internalName] = publicName;
+    this.publicToInternal[publicName] = internalName;
+  }
+}
diff --git a/packages/compiler/src/i18n/serializers/xliff.ts b/packages/compiler/src/i18n/serializers/xliff.ts
new file mode 100644
index 000000000000..e1efddd9d5bc
--- /dev/null
+++ b/packages/compiler/src/i18n/serializers/xliff.ts
@@ -0,0 +1,340 @@
+/**
+ * @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 {digest} 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 = '1.2';
+const _XMLNS = 'urn:oasis:names:tc:xliff:document:1.2';
+// TODO(vicb): make this a param (s/_/-/)
+const _DEFAULT_SOURCE_LANG = 'en';
+const _PLACEHOLDER_TAG = 'x';
+const _MARKER_TAG = 'mrk';
+
+const _FILE_TAG = 'file';
+const _SOURCE_TAG = 'source';
+const _SEGMENT_SOURCE_TAG = 'seg-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
+export class Xliff extends Serializer {
+  write(messages: i18n.Message[], locale: string|null): string {
+    const visitor = new _WriteVisitor();
+    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)),
+          ...contextTags);
+
+      if (message.description) {
+        transUnit.children.push(
+            new xml.CR(8),
+            new xml.Tag(
+                'note', {priority: '1', from: 'description'}, [new xml.Text(message.description)]));
+      }
+
+      if (message.meaning) {
+        transUnit.children.push(
+            new xml.CR(8),
+            new xml.Tag('note', {priority: '1', from: 'meaning'}, [new xml.Text(message.meaning)]));
+      }
+
+      transUnit.children.push(new xml.CR(6));
+
+      transUnits.push(new xml.CR(6), transUnit);
+    });
+
+    const body = new xml.Tag('body', {}, [...transUnits, new xml.CR(4)]);
+    const file = new xml.Tag(
+        'file', {
+          'source-language': locale || _DEFAULT_SOURCE_LANG,
+          datatype: 'plaintext',
+          original: 'ng2.template',
+        },
+        [new xml.CR(4), body, new xml.CR(2)]);
+    const xliff = new xml.Tag(
+        'xliff', {version: _VERSION, xmlns: _XMLNS}, [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 xliffParser = new XliffParser();
+    const {locale, msgIdToHtml, errors} = xliffParser.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(`xliff parse errors:\n${errors.join('\n')}`);
+    }
+
+    return {locale: locale !, i18nNodesByMsgId};
+  }
+
+  digest(message: i18n.Message): string { return digest(message); }
+}
+
+class _WriteVisitor implements i18n.Visitor {
+  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 ctype = getCtypeForTag(ph.tag);
+
+    if (ph.isVoid) {
+      // void tags have no children nor closing tags
+      return [new xml.Tag(
+          _PLACEHOLDER_TAG, {id: ph.startName, ctype, 'equiv-text': `<${ph.tag}/>`})];
+    }
+
+    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, 'equiv-text': `{{${ph.value}}}`})];
+  }
+
+  visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): xml.Node[] {
+    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[] {
+    return [].concat(...nodes.map(node => node.visit(this)));
+  }
+}
+
+// TODO(vicb): add error management (structure)
+// Extract messages as xml nodes from the xliff file
+class XliffParser implements ml.Visitor {
+  // TODO(issue/24571): remove '!'.
+  private _unitMlString !: string | null;
+  // TODO(issue/24571): remove '!'.
+  private _errors !: I18nError[];
+  // TODO(issue/24571): remove '!'.
+  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;
+
+      // ignore those tags
+      case _SOURCE_TAG:
+      case _SEGMENT_SOURCE_TAG:
+        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 _FILE_TAG:
+        const localeAttr = element.attrs.find((attr) => attr.name === 'target-language');
+        if (localeAttr) {
+          this._locale = localeAttr.value;
+        }
+        ml.visitAll(this, element.children, null);
+        break;
+
+      default:
+        // TODO(vicb): assert file structure, xliff version
+        // For now only recurse on unhandled nodes
+        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 {
+  // TODO(issue/24571): remove '!'.
+  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: 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.Placeholder|ml.Node[]|null {
+    if (el.name === _PLACEHOLDER_TAG) {
+      const nameAttr = el.attrs.find((attr) => attr.name === 'id');
+      if (nameAttr) {
+        return new i18n.Placeholder('', nameAttr.value, el.sourceSpan !);
+      }
+
+      this._addError(el, `<${_PLACEHOLDER_TAG}> misses the "id" attribute`);
+      return null;
+    }
+
+    if (el.name === _MARKER_TAG) {
+      return [].concat(...ml.visitAll(this, el.children));
+    }
+
+    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: 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 getCtypeForTag(tag: string): string {
+  switch (tag.toLowerCase()) {
+    case 'br':
+      return 'lb';
+    case 'img':
+      return 'image';
+    default:
+      return `x-${tag}`;
+  }
+}
diff --git a/packages/compiler/src/i18n/serializers/xliff2.ts b/packages/compiler/src/i18n/serializers/xliff2.ts
new file mode 100644
index 000000000000..f43382349fb3
--- /dev/null
+++ b/packages/compiler/src/i18n/serializers/xliff2.ts
@@ -0,0 +1,390 @@
+/**
+ * @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 _MARKER_TAG = 'mrk';
+
+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 {
+  // TODO(issue/24571): remove '!'.
+  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 {
+  // TODO(issue/24571): remove '!'.
+  private _unitMlString !: string | null;
+  // TODO(issue/24571): remove '!'.
+  private _errors !: I18nError[];
+  // TODO(issue/24571): remove '!'.
+  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 {
+  // TODO(issue/24571): remove '!'.
+  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;
+      case _MARKER_TAG:
+        return [].concat(...ml.visitAll(this, el.children));
+      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
new file mode 100644
index 000000000000..eeddddc869e3
--- /dev/null
+++ b/packages/compiler/src/i18n/serializers/xmb.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 {decimalDigest} from '../digest';
+import * as i18n from '../i18n_ast';
+
+import {PlaceholderMapper, Serializer, SimplePlaceholderMapper} from './serializer';
+import * as xml from './xml_helper';
+
+const _MESSAGES_TAG = 'messagebundle';
+const _MESSAGE_TAG = 'msg';
+const _PLACEHOLDER_TAG = 'ph';
+const _EXAMPLE_TAG = 'ex';
+const _SOURCE_TAG = 'source';
+
+const _DOCTYPE = `<!ELEMENT messagebundle (msg)*>
+<!ATTLIST messagebundle class CDATA #IMPLIED>
+
+<!ELEMENT msg (#PCDATA|ph|source)*>
+<!ATTLIST msg id CDATA #IMPLIED>
+<!ATTLIST msg seq CDATA #IMPLIED>
+<!ATTLIST msg name CDATA #IMPLIED>
+<!ATTLIST msg desc CDATA #IMPLIED>
+<!ATTLIST msg meaning CDATA #IMPLIED>
+<!ATTLIST msg obsolete (obsolete) #IMPLIED>
+<!ATTLIST msg xml:space (default|preserve) "default">
+<!ATTLIST msg is_hidden CDATA #IMPLIED>
+
+<!ELEMENT source (#PCDATA)>
+
+<!ELEMENT ph (#PCDATA|ex)*>
+<!ATTLIST ph name CDATA #REQUIRED>
+
+<!ELEMENT ex (#PCDATA)>`;
+
+export class Xmb extends Serializer {
+  write(messages: i18n.Message[], locale: string|null): string {
+    const exampleVisitor = new ExampleVisitor();
+    const visitor = new _Visitor();
+    let rootNode = new xml.Tag(_MESSAGES_TAG);
+
+    messages.forEach(message => {
+      const attrs: {[k: string]: string} = {id: message.id};
+
+      if (message.description) {
+        attrs['desc'] = message.description;
+      }
+
+      if (message.meaning) {
+        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, [...sourceTags, ...visitor.serialize(message.nodes)]));
+    });
+
+    rootNode.children.push(new xml.CR());
+
+    return xml.serialize([
+      new xml.Declaration({version: '1.0', encoding: 'UTF-8'}),
+      new xml.CR(),
+      new xml.Doctype(_MESSAGES_TAG, _DOCTYPE),
+      new xml.CR(),
+      exampleVisitor.addDefaultExamples(rootNode),
+      new xml.CR(),
+    ]);
+  }
+
+  load(content: string, url: string):
+      {locale: string, i18nNodesByMsgId: {[msgId: string]: i18n.Node[]}} {
+    throw new Error('Unsupported');
+  }
+
+  digest(message: i18n.Message): string { return digest(message); }
+
+
+  createNameMapper(message: i18n.Message): PlaceholderMapper {
+    return new SimplePlaceholderMapper(message, toPublicName);
+  }
+}
+
+class _Visitor implements i18n.Visitor {
+  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 startTagAsText = new xml.Text(`<${ph.tag}>`);
+    const startEx = new xml.Tag(_EXAMPLE_TAG, {}, [startTagAsText]);
+    // TC requires PH to have a non empty EX, and uses the text node to show the "original" value.
+    const startTagPh =
+        new xml.Tag(_PLACEHOLDER_TAG, {name: ph.startName}, [startEx, startTagAsText]);
+    if (ph.isVoid) {
+      // void tags have no children nor closing tags
+      return [startTagPh];
+    }
+
+    const closeTagAsText = new xml.Text(`</${ph.tag}>`);
+    const closeEx = new xml.Tag(_EXAMPLE_TAG, {}, [closeTagAsText]);
+    // TC requires PH to have a non empty EX, and uses the text node to show the "original" value.
+    const closeTagPh =
+        new xml.Tag(_PLACEHOLDER_TAG, {name: ph.closeName}, [closeEx, closeTagAsText]);
+
+    return [startTagPh, ...this.serialize(ph.children), closeTagPh];
+  }
+
+  visitPlaceholder(ph: i18n.Placeholder, context?: any): xml.Node[] {
+    const interpolationAsText = new xml.Text(`{{${ph.value}}}`);
+    // Example tag needs to be not-empty for TC.
+    const exTag = new xml.Tag(_EXAMPLE_TAG, {}, [interpolationAsText]);
+    return [
+      // TC requires PH to have a non empty EX, and uses the text node to show the "original" value.
+      new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name}, [exTag, interpolationAsText])
+    ];
+  }
+
+  visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): xml.Node[] {
+    const icuExpression = ph.value.expression;
+    const icuType = ph.value.type;
+    const icuCases = Object.keys(ph.value.cases).map((value: string) => value + ' {...}').join(' ');
+    const icuAsText = new xml.Text(`{${icuExpression}, ${icuType}, ${icuCases}}`);
+    const exTag = new xml.Tag(_EXAMPLE_TAG, {}, [icuAsText]);
+    return [
+      // TC requires PH to have a non empty EX, and uses the text node to show the "original" value.
+      new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name}, [exTag, icuAsText])
+    ];
+  }
+
+  serialize(nodes: i18n.Node[]): xml.Node[] {
+    return [].concat(...nodes.map(node => node.visit(this)));
+  }
+}
+
+export function digest(message: i18n.Message): string {
+  return decimalDigest(message);
+}
+
+// TC requires at least one non-empty example on placeholders
+class ExampleVisitor implements xml.IVisitor {
+  addDefaultExamples(node: xml.Node): xml.Node {
+    node.visit(this);
+    return node;
+  }
+
+  visitTag(tag: xml.Tag): void {
+    if (tag.name === _PLACEHOLDER_TAG) {
+      if (!tag.children || tag.children.length == 0) {
+        const exText = new xml.Text(tag.attrs['name'] || '...');
+        tag.children = [new xml.Tag(_EXAMPLE_TAG, {}, [exText])];
+      }
+    } else if (tag.children) {
+      tag.children.forEach(node => node.visit(this));
+    }
+  }
+
+  visitText(text: xml.Text): void {}
+  visitDeclaration(decl: xml.Declaration): void {}
+  visitDoctype(doctype: xml.Doctype): void {}
+}
+
+// XMB/XTB placeholders can only contain A-Z, 0-9 and _
+export function toPublicName(internalName: string): string {
+  return internalName.toUpperCase().replace(/[^A-Z0-9_]/g, '_');
+}
diff --git a/packages/compiler/src/i18n/serializers/xml_helper.ts b/packages/compiler/src/i18n/serializers/xml_helper.ts
new file mode 100644
index 000000000000..27a8d10c5a8f
--- /dev/null
+++ b/packages/compiler/src/i18n/serializers/xml_helper.ts
@@ -0,0 +1,107 @@
+/**
+ * @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 interface IVisitor {
+  visitTag(tag: Tag): any;
+  visitText(text: Text): any;
+  visitDeclaration(decl: Declaration): any;
+  visitDoctype(doctype: Doctype): any;
+}
+
+class _Visitor implements IVisitor {
+  visitTag(tag: Tag): string {
+    const strAttrs = this._serializeAttributes(tag.attrs);
+
+    if (tag.children.length == 0) {
+      return `<${tag.name}${strAttrs}/>`;
+    }
+
+    const strChildren = tag.children.map(node => node.visit(this));
+    return `<${tag.name}${strAttrs}>${strChildren.join('')}</${tag.name}>`;
+  }
+
+  visitText(text: Text): string { return text.value; }
+
+  visitDeclaration(decl: Declaration): string {
+    return `<?xml${this._serializeAttributes(decl.attrs)} ?>`;
+  }
+
+  private _serializeAttributes(attrs: {[k: string]: string}) {
+    const strAttrs = Object.keys(attrs).map((name: string) => `${name}="${attrs[name]}"`).join(' ');
+    return strAttrs.length > 0 ? ' ' + strAttrs : '';
+  }
+
+  visitDoctype(doctype: Doctype): any {
+    return `<!DOCTYPE ${doctype.rootTag} [\n${doctype.dtd}\n]>`;
+  }
+}
+
+const _visitor = new _Visitor();
+
+export function serialize(nodes: Node[]): string {
+  return nodes.map((node: Node): string => node.visit(_visitor)).join('');
+}
+
+export interface Node { visit(visitor: IVisitor): any; }
+
+export class Declaration implements Node {
+  public attrs: {[k: string]: string} = {};
+
+  constructor(unescapedAttrs: {[k: string]: string}) {
+    Object.keys(unescapedAttrs).forEach((k: string) => {
+      this.attrs[k] = escapeXml(unescapedAttrs[k]);
+    });
+  }
+
+  visit(visitor: IVisitor): any { return visitor.visitDeclaration(this); }
+}
+
+export class Doctype implements Node {
+  constructor(public rootTag: string, public dtd: string) {}
+
+  visit(visitor: IVisitor): any { return visitor.visitDoctype(this); }
+}
+
+export class Tag implements Node {
+  public attrs: {[k: string]: string} = {};
+
+  constructor(
+      public name: string, unescapedAttrs: {[k: string]: string} = {},
+      public children: Node[] = []) {
+    Object.keys(unescapedAttrs).forEach((k: string) => {
+      this.attrs[k] = escapeXml(unescapedAttrs[k]);
+    });
+  }
+
+  visit(visitor: IVisitor): any { return visitor.visitTag(this); }
+}
+
+export class Text implements Node {
+  value: string;
+  constructor(unescapedValue: string) { this.value = escapeXml(unescapedValue); }
+
+  visit(visitor: IVisitor): any { return visitor.visitText(this); }
+}
+
+export class CR extends Text {
+  constructor(ws: number = 0) { super(`\n${new Array(ws + 1).join(' ')}`); }
+}
+
+const _ESCAPED_CHARS: [RegExp, string][] = [
+  [/&/g, '&amp;'],
+  [/"/g, '&quot;'],
+  [/'/g, '&apos;'],
+  [/</g, '&lt;'],
+  [/>/g, '&gt;'],
+];
+
+// Escape `_ESCAPED_CHARS` characters in the given text with encoded entities
+export function escapeXml(text: string): string {
+  return _ESCAPED_CHARS.reduce(
+      (text: string, entry: [RegExp, string]) => text.replace(entry[0], entry[1]), text);
+}
diff --git a/packages/compiler/src/i18n/serializers/xtb.ts b/packages/compiler/src/i18n/serializers/xtb.ts
new file mode 100644
index 000000000000..c544bc9d7038
--- /dev/null
+++ b/packages/compiler/src/i18n/serializers/xtb.ts
@@ -0,0 +1,215 @@
+/**
+ * @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 * as i18n from '../i18n_ast';
+import {I18nError} from '../parse_util';
+
+import {PlaceholderMapper, Serializer, SimplePlaceholderMapper} from './serializer';
+import {digest, toPublicName} from './xmb';
+
+const _TRANSLATIONS_TAG = 'translationbundle';
+const _TRANSLATION_TAG = 'translation';
+const _PLACEHOLDER_TAG = 'ph';
+
+export class Xtb extends Serializer {
+  write(messages: i18n.Message[], locale: string|null): string { throw new Error('Unsupported'); }
+
+  load(content: string, url: string):
+      {locale: string, i18nNodesByMsgId: {[msgId: string]: i18n.Node[]}} {
+    // xtb to xml nodes
+    const xtbParser = new XtbParser();
+    const {locale, msgIdToHtml, errors} = xtbParser.parse(content, url);
+
+    // xml nodes to i18n nodes
+    const i18nNodesByMsgId: {[msgId: string]: i18n.Node[]} = {};
+    const converter = new XmlToI18n();
+
+    // Because we should be able to load xtb files that rely on features not supported by angular,
+    // we need to delay the conversion of html to i18n nodes so that non angular messages are not
+    // converted
+    Object.keys(msgIdToHtml).forEach(msgId => {
+      const valueFn = function() {
+        const {i18nNodes, errors} = converter.convert(msgIdToHtml[msgId], url);
+        if (errors.length) {
+          throw new Error(`xtb parse errors:\n${errors.join('\n')}`);
+        }
+        return i18nNodes;
+      };
+      createLazyProperty(i18nNodesByMsgId, msgId, valueFn);
+    });
+
+    if (errors.length) {
+      throw new Error(`xtb parse errors:\n${errors.join('\n')}`);
+    }
+
+    return {locale: locale !, i18nNodesByMsgId};
+  }
+
+  digest(message: i18n.Message): string { return digest(message); }
+
+  createNameMapper(message: i18n.Message): PlaceholderMapper {
+    return new SimplePlaceholderMapper(message, toPublicName);
+  }
+}
+
+function createLazyProperty(messages: any, id: string, valueFn: () => any) {
+  Object.defineProperty(messages, id, {
+    configurable: true,
+    enumerable: true,
+    get: function() {
+      const value = valueFn();
+      Object.defineProperty(messages, id, {enumerable: true, value});
+      return value;
+    },
+    set: _ => { throw new Error('Could not overwrite an XTB translation'); },
+  });
+}
+
+// Extract messages as xml nodes from the xtb file
+class XtbParser implements ml.Visitor {
+  // TODO(issue/24571): remove '!'.
+  private _bundleDepth !: number;
+  // TODO(issue/24571): remove '!'.
+  private _errors !: I18nError[];
+  // TODO(issue/24571): remove '!'.
+  private _msgIdToHtml !: {[msgId: string]: string};
+  private _locale: string|null = null;
+
+  parse(xtb: string, url: string) {
+    this._bundleDepth = 0;
+    this._msgIdToHtml = {};
+
+    // We can not parse the ICU messages at this point as some messages might not originate
+    // from Angular that could not be lex'd.
+    const xml = new XmlParser().parse(xtb, url, false);
+
+    this._errors = xml.errors;
+    ml.visitAll(this, xml.rootNodes);
+
+    return {
+      msgIdToHtml: this._msgIdToHtml,
+      errors: this._errors,
+      locale: this._locale,
+    };
+  }
+
+  visitElement(element: ml.Element, context: any): any {
+    switch (element.name) {
+      case _TRANSLATIONS_TAG:
+        this._bundleDepth++;
+        if (this._bundleDepth > 1) {
+          this._addError(element, `<${_TRANSLATIONS_TAG}> elements can not be nested`);
+        }
+        const langAttr = element.attrs.find((attr) => attr.name === 'lang');
+        if (langAttr) {
+          this._locale = langAttr.value;
+        }
+        ml.visitAll(this, element.children, null);
+        this._bundleDepth--;
+        break;
+
+      case _TRANSLATION_TAG:
+        const idAttr = element.attrs.find((attr) => attr.name === 'id');
+        if (!idAttr) {
+          this._addError(element, `<${_TRANSLATION_TAG}> misses the "id" attribute`);
+        } else {
+          const id = idAttr.value;
+          if (this._msgIdToHtml.hasOwnProperty(id)) {
+            this._addError(element, `Duplicated translations for msg ${id}`);
+          } else {
+            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._msgIdToHtml[id] = innerText;
+          }
+        }
+        break;
+
+      default:
+        this._addError(element, 'Unexpected tag');
+    }
+  }
+
+  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 (xtb syntax) to i18n nodes
+class XmlToI18n implements ml.Visitor {
+  // TODO(issue/24571): remove '!'.
+  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 ?
+        [] :
+        ml.visitAll(this, xmlIcu.rootNodes);
+
+    return {
+      i18nNodes,
+      errors: this._errors,
+    };
+  }
+
+  visitText(text: ml.Text, context: any) { return new i18n.Text(text.value, text.sourceSpan !); }
+
+  visitExpansion(icu: ml.Expansion, context: any) {
+    const caseMap: {[value: string]: i18n.Node} = {};
+
+    ml.visitAll(this, icu.cases).forEach(c => {
+      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: ml.visitAll(this, icuCase.expression),
+    };
+  }
+
+  visitElement(el: ml.Element, context: any): i18n.Placeholder|null {
+    if (el.name === _PLACEHOLDER_TAG) {
+      const nameAttr = el.attrs.find((attr) => attr.name === 'name');
+      if (nameAttr) {
+        return new i18n.Placeholder('', nameAttr.value, el.sourceSpan !);
+      }
+
+      this._addError(el, `<${_PLACEHOLDER_TAG}> misses the "name" attribute`);
+    } else {
+      this._addError(el, `Unexpected tag`);
+    }
+    return null;
+  }
+
+  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));
+  }
+}
diff --git a/packages/compiler/src/i18n/translation_bundle.ts b/packages/compiler/src/i18n/translation_bundle.ts
new file mode 100644
index 000000000000..cb6fb4f01c53
--- /dev/null
+++ b/packages/compiler/src/i18n/translation_bundle.ts
@@ -0,0 +1,197 @@
+/**
+ * @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 {MissingTranslationStrategy} from '../core';
+import * as html from '../ml_parser/ast';
+import {HtmlParser} from '../ml_parser/html_parser';
+import {Console} from '../util';
+
+import * as i18n from './i18n_ast';
+import {I18nError} from './parse_util';
+import {PlaceholderMapper, Serializer} from './serializers/serializer';
+import {escapeXml} from './serializers/xml_helper';
+
+
+/**
+ * A container for translated messages
+ */
+export class TranslationBundle {
+  private _i18nToHtml: I18nToHtmlVisitor;
+
+  constructor(
+      private _i18nNodesByMsgId: {[msgId: string]: i18n.Node[]} = {}, locale: string|null,
+      public digest: (m: i18n.Message) => string,
+      public mapperFactory?: (m: i18n.Message) => PlaceholderMapper,
+      missingTranslationStrategy: MissingTranslationStrategy = MissingTranslationStrategy.Warning,
+      console?: Console) {
+    this._i18nToHtml = new I18nToHtmlVisitor(
+        _i18nNodesByMsgId, locale, digest, mapperFactory !, missingTranslationStrategy, console);
+  }
+
+  // Creates a `TranslationBundle` by parsing the given `content` with the `serializer`.
+  static load(
+      content: string, url: string, serializer: Serializer,
+      missingTranslationStrategy: MissingTranslationStrategy,
+      console?: Console): TranslationBundle {
+    const {locale, i18nNodesByMsgId} = serializer.load(content, url);
+    const digestFn = (m: i18n.Message) => serializer.digest(m);
+    const mapperFactory = (m: i18n.Message) => serializer.createNameMapper(m) !;
+    return new TranslationBundle(
+        i18nNodesByMsgId, locale, digestFn, mapperFactory, missingTranslationStrategy, console);
+  }
+
+  // Returns the translation as HTML nodes from the given source message.
+  get(srcMsg: i18n.Message): html.Node[] {
+    const html = this._i18nToHtml.convert(srcMsg);
+
+    if (html.errors.length) {
+      throw new Error(html.errors.join('\n'));
+    }
+
+    return html.nodes;
+  }
+
+  has(srcMsg: i18n.Message): boolean { return this.digest(srcMsg) in this._i18nNodesByMsgId; }
+}
+
+class I18nToHtmlVisitor implements i18n.Visitor {
+  // TODO(issue/24571): remove '!'.
+  private _srcMsg !: i18n.Message;
+  private _contextStack: {msg: i18n.Message, mapper: (name: string) => string}[] = [];
+  private _errors: I18nError[] = [];
+  // TODO(issue/24571): remove '!'.
+  private _mapper !: (name: string) => string;
+
+  constructor(
+      private _i18nNodesByMsgId: {[msgId: string]: i18n.Node[]} = {}, private _locale: string|null,
+      private _digest: (m: i18n.Message) => string,
+      private _mapperFactory: (m: i18n.Message) => PlaceholderMapper,
+      private _missingTranslationStrategy: MissingTranslationStrategy, private _console?: Console) {
+  }
+
+  convert(srcMsg: i18n.Message): {nodes: html.Node[], errors: I18nError[]} {
+    this._contextStack.length = 0;
+    this._errors.length = 0;
+
+    // i18n to text
+    const text = this._convertToText(srcMsg);
+
+    // text to html
+    const url = srcMsg.nodes[0].sourceSpan.start.file.url;
+    const html = new HtmlParser().parse(text, url, true);
+
+    return {
+      nodes: html.rootNodes,
+      errors: [...this._errors, ...html.errors],
+    };
+  }
+
+  visitText(text: i18n.Text, context?: any): string {
+    // `convert()` uses an `HtmlParser` to return `html.Node`s
+    // we should then make sure that any special characters are escaped
+    return escapeXml(text.value);
+  }
+
+  visitContainer(container: i18n.Container, context?: any): any {
+    return container.children.map(n => n.visit(this)).join('');
+  }
+
+  visitIcu(icu: i18n.Icu, context?: any): any {
+    const cases = Object.keys(icu.cases).map(k => `${k} {${icu.cases[k].visit(this)}}`);
+
+    // TODO(vicb): Once all format switch to using expression placeholders
+    // we should throw when the placeholder is not in the source message
+    const exp = this._srcMsg.placeholders.hasOwnProperty(icu.expression) ?
+        this._srcMsg.placeholders[icu.expression] :
+        icu.expression;
+
+    return `{${exp}, ${icu.type}, ${cases.join(' ')}}`;
+  }
+
+  visitPlaceholder(ph: i18n.Placeholder, context?: any): string {
+    const phName = this._mapper(ph.name);
+    if (this._srcMsg.placeholders.hasOwnProperty(phName)) {
+      return this._srcMsg.placeholders[phName];
+    }
+
+    if (this._srcMsg.placeholderToMessage.hasOwnProperty(phName)) {
+      return this._convertToText(this._srcMsg.placeholderToMessage[phName]);
+    }
+
+    this._addError(ph, `Unknown placeholder "${ph.name}"`);
+    return '';
+  }
+
+  // Loaded message contains only placeholders (vs tag and icu placeholders).
+  // However when a translation can not be found, we need to serialize the source message
+  // which can contain tag placeholders
+  visitTagPlaceholder(ph: i18n.TagPlaceholder, context?: any): string {
+    const tag = `${ph.tag}`;
+    const attrs = Object.keys(ph.attrs).map(name => `${name}="${ph.attrs[name]}"`).join(' ');
+    if (ph.isVoid) {
+      return `<${tag} ${attrs}/>`;
+    }
+    const children = ph.children.map((c: i18n.Node) => c.visit(this)).join('');
+    return `<${tag} ${attrs}>${children}</${tag}>`;
+  }
+
+  // Loaded message contains only placeholders (vs tag and icu placeholders).
+  // However when a translation can not be found, we need to serialize the source message
+  // which can contain tag placeholders
+  visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): string {
+    // An ICU placeholder references the source message to be serialized
+    return this._convertToText(this._srcMsg.placeholderToMessage[ph.name]);
+  }
+
+  /**
+   * Convert a source message to a translated text string:
+   * - text nodes are replaced with their translation,
+   * - placeholders are replaced with their content,
+   * - ICU nodes are converted to ICU expressions.
+   */
+  private _convertToText(srcMsg: i18n.Message): string {
+    const id = this._digest(srcMsg);
+    const mapper = this._mapperFactory ? this._mapperFactory(srcMsg) : null;
+    let nodes: i18n.Node[];
+
+    this._contextStack.push({msg: this._srcMsg, mapper: this._mapper});
+    this._srcMsg = srcMsg;
+
+    if (this._i18nNodesByMsgId.hasOwnProperty(id)) {
+      // When there is a translation use its nodes as the source
+      // And create a mapper to convert serialized placeholder names to internal names
+      nodes = this._i18nNodesByMsgId[id];
+      this._mapper = (name: string) => mapper ? mapper.toInternalName(name) ! : name;
+    } else {
+      // When no translation has been found
+      // - report an error / a warning / nothing,
+      // - use the nodes from the original message
+      // - placeholders are already internal and need no mapper
+      if (this._missingTranslationStrategy === MissingTranslationStrategy.Error) {
+        const ctx = this._locale ? ` for locale "${this._locale}"` : '';
+        this._addError(srcMsg.nodes[0], `Missing translation for message "${id}"${ctx}`);
+      } else if (
+          this._console &&
+          this._missingTranslationStrategy === MissingTranslationStrategy.Warning) {
+        const ctx = this._locale ? ` for locale "${this._locale}"` : '';
+        this._console.warn(`Missing translation for message "${id}"${ctx}`);
+      }
+      nodes = srcMsg.nodes;
+      this._mapper = (name: string) => name;
+    }
+    const text = nodes.map(node => node.visit(this)).join('');
+    const context = this._contextStack.pop() !;
+    this._srcMsg = context.msg;
+    this._mapper = context.mapper;
+    return text;
+  }
+
+  private _addError(el: i18n.Node, msg: string) {
+    this._errors.push(new I18nError(el.sourceSpan, msg));
+  }
+}
diff --git a/packages/compiler/src/identifiers.ts b/packages/compiler/src/identifiers.ts
new file mode 100644
index 000000000000..121f97f21b46
--- /dev/null
+++ b/packages/compiler/src/identifiers.ts
@@ -0,0 +1,134 @@
+/**
+ * @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 {CompileTokenMetadata} from './compile_metadata';
+import {CompileReflector} from './compile_reflector';
+import * as o from './output/output_ast';
+
+const CORE = '@angular/core';
+
+export class Identifiers {
+  static ANALYZE_FOR_ENTRY_COMPONENTS: o.ExternalReference = {
+    name: 'ANALYZE_FOR_ENTRY_COMPONENTS',
+    moduleName: CORE,
+
+  };
+  static ElementRef: o.ExternalReference = {name: 'ElementRef', moduleName: CORE};
+  static NgModuleRef: o.ExternalReference = {name: 'NgModuleRef', moduleName: CORE};
+  static ViewContainerRef: o.ExternalReference = {name: 'ViewContainerRef', moduleName: CORE};
+  static ChangeDetectorRef: o.ExternalReference = {
+    name: 'ChangeDetectorRef',
+    moduleName: CORE,
+
+  };
+  static QueryList: o.ExternalReference = {name: 'QueryList', moduleName: CORE};
+  static TemplateRef: o.ExternalReference = {name: 'TemplateRef', moduleName: CORE};
+  static CodegenComponentFactoryResolver: o.ExternalReference = {
+    name: 'ɵCodegenComponentFactoryResolver',
+    moduleName: CORE,
+
+  };
+  static ComponentFactoryResolver: o.ExternalReference = {
+    name: 'ComponentFactoryResolver',
+    moduleName: CORE,
+
+  };
+  static ComponentFactory: o.ExternalReference = {name: 'ComponentFactory', moduleName: CORE};
+  static ComponentRef: o.ExternalReference = {name: 'ComponentRef', moduleName: CORE};
+  static NgModuleFactory: o.ExternalReference = {name: 'NgModuleFactory', moduleName: CORE};
+  static createModuleFactory: o.ExternalReference = {
+    name: 'ɵcmf',
+    moduleName: CORE,
+
+  };
+  static moduleDef: o.ExternalReference = {
+    name: 'ɵmod',
+    moduleName: CORE,
+
+  };
+  static moduleProviderDef: o.ExternalReference = {
+    name: 'ɵmpd',
+    moduleName: CORE,
+
+  };
+  static RegisterModuleFactoryFn: o.ExternalReference = {
+    name: 'ɵregisterModuleFactory',
+    moduleName: CORE,
+
+  };
+  static inject: o.ExternalReference = {name: 'inject', moduleName: CORE};
+  static INJECTOR: o.ExternalReference = {name: 'INJECTOR', moduleName: CORE};
+  static Injector: o.ExternalReference = {name: 'Injector', moduleName: CORE};
+  static defineInjectable: o.ExternalReference = {name: 'defineInjectable', moduleName: CORE};
+  static InjectableDef: o.ExternalReference = {name: 'ɵInjectableDef', moduleName: CORE};
+  static ViewEncapsulation: o.ExternalReference = {
+    name: 'ViewEncapsulation',
+    moduleName: CORE,
+
+  };
+  static ChangeDetectionStrategy: o.ExternalReference = {
+    name: 'ChangeDetectionStrategy',
+    moduleName: CORE,
+
+  };
+  static SecurityContext: o.ExternalReference = {
+    name: 'SecurityContext',
+    moduleName: CORE,
+
+  };
+  static LOCALE_ID: o.ExternalReference = {name: 'LOCALE_ID', moduleName: CORE};
+  static TRANSLATIONS_FORMAT: o.ExternalReference = {
+    name: 'TRANSLATIONS_FORMAT',
+    moduleName: CORE,
+
+  };
+  static inlineInterpolate: o.ExternalReference = {
+    name: 'ɵinlineInterpolate',
+    moduleName: CORE,
+  };
+  static interpolate: o.ExternalReference = {name: 'ɵinterpolate', moduleName: CORE};
+  static EMPTY_ARRAY: o.ExternalReference = {name: 'ɵEMPTY_ARRAY', moduleName: CORE};
+  static EMPTY_MAP: o.ExternalReference = {name: 'ɵEMPTY_MAP', moduleName: CORE};
+  static Renderer: o.ExternalReference = {name: 'Renderer', moduleName: CORE};
+  static viewDef: o.ExternalReference = {name: 'ɵvid', moduleName: CORE};
+  static elementDef: o.ExternalReference = {name: 'ɵeld', moduleName: CORE};
+  static anchorDef: o.ExternalReference = {name: 'ɵand', moduleName: CORE};
+  static textDef: o.ExternalReference = {name: 'ɵted', moduleName: CORE};
+  static directiveDef: o.ExternalReference = {name: 'ɵdid', moduleName: CORE};
+  static providerDef: o.ExternalReference = {name: 'ɵprd', moduleName: CORE};
+  static queryDef: o.ExternalReference = {name: 'ɵqud', moduleName: CORE};
+  static pureArrayDef: o.ExternalReference = {name: 'ɵpad', moduleName: CORE};
+  static pureObjectDef: o.ExternalReference = {name: 'ɵpod', moduleName: CORE};
+  static purePipeDef: o.ExternalReference = {name: 'ɵppd', moduleName: CORE};
+  static pipeDef: o.ExternalReference = {name: 'ɵpid', moduleName: CORE};
+  static nodeValue: o.ExternalReference = {name: 'ɵnov', moduleName: CORE};
+  static ngContentDef: o.ExternalReference = {name: 'ɵncd', moduleName: CORE};
+  static unwrapValue: o.ExternalReference = {name: 'ɵunv', moduleName: CORE};
+  static createRendererType2: o.ExternalReference = {name: 'ɵcrt', moduleName: CORE};
+  // type only
+  static RendererType2: o.ExternalReference = {
+    name: 'RendererType2',
+    moduleName: CORE,
+
+  };
+  // type only
+  static ViewDefinition: o.ExternalReference = {
+    name: 'ɵViewDefinition',
+    moduleName: CORE,
+  };
+  static createComponentFactory: o.ExternalReference = {name: 'ɵccf', moduleName: CORE};
+}
+
+export function createTokenForReference(reference: any): CompileTokenMetadata {
+  return {identifier: {reference: reference}};
+}
+
+export function createTokenForExternalReference(
+    reflector: CompileReflector, reference: o.ExternalReference): CompileTokenMetadata {
+  return createTokenForReference(reflector.resolveExternalReference(reference));
+}
diff --git a/packages/compiler/src/injectable_compiler.ts b/packages/compiler/src/injectable_compiler.ts
new file mode 100644
index 000000000000..8d07ed0fbd5e
--- /dev/null
+++ b/packages/compiler/src/injectable_compiler.ts
@@ -0,0 +1,136 @@
+/**
+ * @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';
+import {CompileInjectableMetadata, CompileNgModuleMetadata, CompileProviderMetadata, identifierName} from './compile_metadata';
+import {CompileReflector} from './compile_reflector';
+import {InjectFlags, NodeFlags} from './core';
+import {Identifiers} from './identifiers';
+import * as o from './output/output_ast';
+import {convertValueToOutputAst} from './output/value_util';
+import {typeSourceSpan} from './parse_util';
+import {NgModuleProviderAnalyzer} from './provider_analyzer';
+import {OutputContext} from './util';
+import {componentFactoryResolverProviderDef, depDef, providerDef} from './view_compiler/provider_compiler';
+
+type MapEntry = {
+  key: string,
+  quoted: boolean,
+  value: o.Expression
+};
+type MapLiteral = MapEntry[];
+
+function mapEntry(key: string, value: o.Expression): MapEntry {
+  return {key, value, quoted: false};
+}
+
+export class InjectableCompiler {
+  private tokenInjector: StaticSymbol;
+  constructor(private reflector: CompileReflector, private alwaysGenerateDef: boolean) {
+    this.tokenInjector = reflector.resolveExternalReference(Identifiers.Injector);
+  }
+
+  private depsArray(deps: any[], ctx: OutputContext): o.Expression[] {
+    return deps.map(dep => {
+      let token = dep;
+      let args = [token];
+      let flags: InjectFlags = InjectFlags.Default;
+      if (Array.isArray(dep)) {
+        for (let i = 0; i < dep.length; i++) {
+          const v = dep[i];
+          if (v) {
+            if (v.ngMetadataName === 'Optional') {
+              flags |= InjectFlags.Optional;
+            } else if (v.ngMetadataName === 'SkipSelf') {
+              flags |= InjectFlags.SkipSelf;
+            } else if (v.ngMetadataName === 'Self') {
+              flags |= InjectFlags.Self;
+            } else if (v.ngMetadataName === 'Inject') {
+              token = v.token;
+            } else {
+              token = v;
+            }
+          }
+        }
+      }
+
+      let tokenExpr: o.Expression;
+      if (typeof token === 'string') {
+        tokenExpr = o.literal(token);
+      } else if (token === this.tokenInjector) {
+        tokenExpr = o.importExpr(Identifiers.INJECTOR);
+      } else {
+        tokenExpr = ctx.importExpr(token);
+      }
+
+      if (flags !== InjectFlags.Default) {
+        args = [tokenExpr, o.literal(flags)];
+      } else {
+        args = [tokenExpr];
+      }
+      return o.importExpr(Identifiers.inject).callFn(args);
+    });
+  }
+
+  factoryFor(injectable: CompileInjectableMetadata, ctx: OutputContext): o.Expression {
+    let retValue: o.Expression;
+    if (injectable.useExisting) {
+      retValue = o.importExpr(Identifiers.inject).callFn([ctx.importExpr(injectable.useExisting)]);
+    } else if (injectable.useFactory) {
+      const deps = injectable.deps || [];
+      if (deps.length > 0) {
+        retValue = ctx.importExpr(injectable.useFactory).callFn(this.depsArray(deps, ctx));
+      } else {
+        return ctx.importExpr(injectable.useFactory);
+      }
+    } else if (injectable.useValue) {
+      retValue = convertValueToOutputAst(ctx, injectable.useValue);
+    } else {
+      const clazz = injectable.useClass || injectable.symbol;
+      const depArgs = this.depsArray(this.reflector.parameters(clazz), ctx);
+      retValue = new o.InstantiateExpr(ctx.importExpr(clazz), depArgs);
+    }
+    return o.fn(
+        [], [new o.ReturnStatement(retValue)], undefined, undefined,
+        injectable.symbol.name + '_Factory');
+  }
+
+  injectableDef(injectable: CompileInjectableMetadata, ctx: OutputContext): o.Expression {
+    let providedIn: o.Expression = o.NULL_EXPR;
+    if (injectable.providedIn !== undefined) {
+      if (injectable.providedIn === null) {
+        providedIn = o.NULL_EXPR;
+      } else if (typeof injectable.providedIn === 'string') {
+        providedIn = o.literal(injectable.providedIn);
+      } else {
+        providedIn = ctx.importExpr(injectable.providedIn);
+      }
+    }
+    const def: MapLiteral = [
+      mapEntry('factory', this.factoryFor(injectable, ctx)),
+      mapEntry('token', ctx.importExpr(injectable.type.reference)),
+      mapEntry('providedIn', providedIn),
+    ];
+    return o.importExpr(Identifiers.defineInjectable).callFn([o.literalMap(def)]);
+  }
+
+  compile(injectable: CompileInjectableMetadata, ctx: OutputContext): void {
+    if (this.alwaysGenerateDef || injectable.providedIn !== undefined) {
+      const className = identifierName(injectable.type) !;
+      const clazz = new o.ClassStmt(
+          className, null,
+          [
+            new o.ClassField(
+                'ngInjectableDef', o.INFERRED_TYPE, [o.StmtModifier.Static],
+                this.injectableDef(injectable, ctx)),
+          ],
+          [], new o.ClassMethod(null, [], []), []);
+      ctx.statements.push(clazz);
+    }
+  }
+}
diff --git a/packages/compiler/src/injectable_compiler_2.ts b/packages/compiler/src/injectable_compiler_2.ts
new file mode 100644
index 000000000000..e2b5845254d7
--- /dev/null
+++ b/packages/compiler/src/injectable_compiler_2.ts
@@ -0,0 +1,111 @@
+/**
+ * @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 {InjectFlags} from './core';
+import {Identifiers} from './identifiers';
+import * as o from './output/output_ast';
+import {R3DependencyMetadata, R3FactoryDelegateType, R3FactoryMetadata, compileFactoryFunction} from './render3/r3_factory';
+import {mapToMapExpression} from './render3/util';
+
+export interface InjectableDef {
+  expression: o.Expression;
+  type: o.Type;
+  statements: o.Statement[];
+}
+
+export interface R3InjectableMetadata {
+  name: string;
+  type: o.Expression;
+  ctorDeps: R3DependencyMetadata[]|null;
+  providedIn: o.Expression;
+  useClass?: o.Expression;
+  useFactory?: o.Expression;
+  useExisting?: o.Expression;
+  useValue?: o.Expression;
+  userDeps?: R3DependencyMetadata[];
+}
+
+export function compileInjectable(meta: R3InjectableMetadata): InjectableDef {
+  let result: {factory: o.Expression, statements: o.Statement[]}|null = null;
+
+  function makeFn(ret: o.Expression): o.Expression {
+    return o.fn([], [new o.ReturnStatement(ret)], undefined, undefined, `${meta.name}_Factory`);
+  }
+
+  const factoryMeta = {
+    name: meta.name,
+    type: meta.type,
+    deps: meta.ctorDeps,
+    injectFn: Identifiers.inject,
+  };
+
+  if (meta.useClass !== undefined) {
+    // meta.useClass has two modes of operation. Either deps are specified, in which case `new` is
+    // used to instantiate the class with dependencies injected, or deps are not specified and
+    // the factory of the class is used to instantiate it.
+    //
+    // A special case exists for useClass: Type where Type is the injectable type itself, in which
+    // case omitting deps just uses the constructor dependencies instead.
+
+    const useClassOnSelf = meta.useClass.isEquivalent(meta.type);
+    const deps = meta.userDeps || (useClassOnSelf && meta.ctorDeps) || undefined;
+
+    if (deps !== undefined) {
+      // factory: () => new meta.useClass(...deps)
+      result = compileFactoryFunction({
+        ...factoryMeta,
+        delegate: meta.useClass,
+        delegateDeps: deps,
+        delegateType: R3FactoryDelegateType.Class,
+      });
+    } else {
+      result = compileFactoryFunction({
+        ...factoryMeta,
+        delegate: meta.useClass,
+        delegateType: R3FactoryDelegateType.Factory,
+      });
+    }
+  } else if (meta.useFactory !== undefined) {
+    result = compileFactoryFunction({
+      ...factoryMeta,
+      delegate: meta.useFactory,
+      delegateDeps: meta.userDeps || [],
+      delegateType: R3FactoryDelegateType.Function,
+    });
+  } else if (meta.useValue !== undefined) {
+    // Note: it's safe to use `meta.useValue` instead of the `USE_VALUE in meta` check used for
+    // client code because meta.useValue is an Expression which will be defined even if the actual
+    // value is undefined.
+    result = compileFactoryFunction({
+      ...factoryMeta,
+      expression: meta.useValue,
+    });
+  } else if (meta.useExisting !== undefined) {
+    // useExisting is an `inject` call on the existing token.
+    result = compileFactoryFunction({
+      ...factoryMeta,
+      expression: o.importExpr(Identifiers.inject).callFn([meta.useExisting]),
+    });
+  } else {
+    result = compileFactoryFunction(factoryMeta);
+  }
+
+  const token = meta.type;
+  const providedIn = meta.providedIn;
+
+  const expression = o.importExpr(Identifiers.defineInjectable).callFn([mapToMapExpression(
+      {token, factory: result.factory, providedIn})]);
+  const type = new o.ExpressionType(
+      o.importExpr(Identifiers.InjectableDef, [new o.ExpressionType(meta.type)]));
+
+  return {
+    expression,
+    type,
+    statements: result.statements,
+  };
+}
diff --git a/packages/compiler/src/jit/compiler.ts b/packages/compiler/src/jit/compiler.ts
new file mode 100644
index 000000000000..814d5b557c52
--- /dev/null
+++ b/packages/compiler/src/jit/compiler.ts
@@ -0,0 +1,360 @@
+/**
+ * @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 {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompilePipeSummary, CompileProviderMetadata, CompileStylesheetMetadata, CompileTypeSummary, ProviderMeta, ProxyClass, identifierName, ngModuleJitUrl, sharedStylesheetJitUrl, templateJitUrl, templateSourceUrl} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
+import {CompilerConfig} from '../config';
+import {ConstantPool} from '../constant_pool';
+import {Type} from '../core';
+import {CompileMetadataResolver} from '../metadata_resolver';
+import {NgModuleCompiler} from '../ng_module_compiler';
+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 {TemplateAst} from '../template_parser/template_ast';
+import {TemplateParser} from '../template_parser/template_parser';
+import {Console, OutputContext, SyncAsync, stringify} from '../util';
+import {ViewCompiler} from '../view_compiler/view_compiler';
+
+export interface ModuleWithComponentFactories {
+  ngModuleFactory: object;
+  componentFactories: object[];
+}
+
+/**
+ * An internal module of the Angular compiler that begins with component types,
+ * extracts templates, and eventually produces a compiled version of the component
+ * ready for linking into an application.
+ *
+ * @security  When compiling templates at runtime, you must ensure that the entire template comes
+ * from a trusted source. Attacker-controlled data introduced by a template could expose your
+ * application to XSS risks.  For more detail, see the [Security Guide](http://g.co/ng/security).
+ */
+export class JitCompiler {
+  private _compiledTemplateCache = new Map<Type, CompiledTemplate>();
+  private _compiledHostTemplateCache = new Map<Type, CompiledTemplate>();
+  private _compiledDirectiveWrapperCache = new Map<Type, Type>();
+  private _compiledNgModuleCache = new Map<Type, object>();
+  private _sharedStylesheetCount = 0;
+  private _addedAotSummaries = new Set<() => any[]>();
+
+  constructor(
+      private _metadataResolver: CompileMetadataResolver, private _templateParser: TemplateParser,
+      private _styleCompiler: StyleCompiler, private _viewCompiler: ViewCompiler,
+      private _ngModuleCompiler: NgModuleCompiler, private _summaryResolver: SummaryResolver<Type>,
+      private _reflector: CompileReflector, private _compilerConfig: CompilerConfig,
+      private _console: Console,
+      private getExtraNgModuleProviders: (ngModule: any) => CompileProviderMetadata[]) {}
+
+  compileModuleSync(moduleType: Type): object {
+    return SyncAsync.assertSync(this._compileModuleAndComponents(moduleType, true));
+  }
+
+  compileModuleAsync(moduleType: Type): Promise<object> {
+    return Promise.resolve(this._compileModuleAndComponents(moduleType, false));
+  }
+
+  compileModuleAndAllComponentsSync(moduleType: Type): ModuleWithComponentFactories {
+    return SyncAsync.assertSync(this._compileModuleAndAllComponents(moduleType, true));
+  }
+
+  compileModuleAndAllComponentsAsync(moduleType: Type): Promise<ModuleWithComponentFactories> {
+    return Promise.resolve(this._compileModuleAndAllComponents(moduleType, false));
+  }
+
+  getComponentFactory(component: Type): object {
+    const summary = this._metadataResolver.getDirectiveSummary(component);
+    return summary.componentFactory as object;
+  }
+
+  loadAotSummaries(summaries: () => any[]) {
+    this.clearCache();
+    this._addAotSummaries(summaries);
+  }
+
+  private _addAotSummaries(fn: () => any[]) {
+    if (this._addedAotSummaries.has(fn)) {
+      return;
+    }
+    this._addedAotSummaries.add(fn);
+    const summaries = fn();
+    for (let i = 0; i < summaries.length; i++) {
+      const entry = summaries[i];
+      if (typeof entry === 'function') {
+        this._addAotSummaries(entry);
+      } else {
+        const summary = entry as CompileTypeSummary;
+        this._summaryResolver.addSummary(
+            {symbol: summary.type.reference, metadata: null, type: summary});
+      }
+    }
+  }
+
+  hasAotSummary(ref: Type) { return !!this._summaryResolver.resolveSummary(ref); }
+
+  private _filterJitIdentifiers(ids: CompileIdentifierMetadata[]): any[] {
+    return ids.map(mod => mod.reference).filter((ref) => !this.hasAotSummary(ref));
+  }
+
+  private _compileModuleAndComponents(moduleType: Type, isSync: boolean): SyncAsync<object> {
+    return SyncAsync.then(this._loadModules(moduleType, isSync), () => {
+      this._compileComponents(moduleType, null);
+      return this._compileModule(moduleType);
+    });
+  }
+
+  private _compileModuleAndAllComponents(moduleType: Type, isSync: boolean):
+      SyncAsync<ModuleWithComponentFactories> {
+    return SyncAsync.then(this._loadModules(moduleType, isSync), () => {
+      const componentFactories: object[] = [];
+      this._compileComponents(moduleType, componentFactories);
+      return {
+        ngModuleFactory: this._compileModule(moduleType),
+        componentFactories: componentFactories
+      };
+    });
+  }
+
+  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 SyncAsync.all(loading);
+  }
+
+  private _compileModule(moduleType: Type): object {
+    let ngModuleFactory = this._compiledNgModuleCache.get(moduleType) !;
+    if (!ngModuleFactory) {
+      const moduleMeta = this._metadataResolver.getNgModuleMetadata(moduleType) !;
+      // Always provide a bound Compiler
+      const extraProviders = this.getExtraNgModuleProviders(moduleMeta.type.reference);
+      const outputCtx = createOutputContext();
+      const compileResult = this._ngModuleCompiler.compile(outputCtx, moduleMeta, extraProviders);
+      ngModuleFactory = this._interpretOrJit(
+          ngModuleJitUrl(moduleMeta), outputCtx.statements)[compileResult.ngModuleFactoryVar];
+      this._compiledNgModuleCache.set(moduleMeta.type.reference, ngModuleFactory);
+    }
+    return ngModuleFactory;
+  }
+
+  /**
+   * @internal
+   */
+  _compileComponents(mainModule: Type, allComponentFactories: object[]|null) {
+    const ngModule = this._metadataResolver.getNgModuleMetadata(mainModule) !;
+    const moduleByJitDirective = new Map<any, CompileNgModuleMetadata>();
+    const templates = new Set<CompiledTemplate>();
+
+    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) {
+            const template =
+                this._createCompiledHostTemplate(dirMeta.type.reference, localModuleMeta);
+            templates.add(template);
+            allComponentFactories.push(dirMeta.componentFactory as object);
+          }
+        }
+      });
+    });
+    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 = moduleByJitDirective.get(entryComponentType.componentType) !;
+            templates.add(
+                this._createCompiledHostTemplate(entryComponentType.componentType, moduleMeta));
+          });
+        }
+      });
+      localModuleMeta.entryComponents.forEach((entryComponentType) => {
+        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));
+  }
+
+  clearCacheFor(type: Type) {
+    this._compiledNgModuleCache.delete(type);
+    this._metadataResolver.clearCacheFor(type);
+    this._compiledHostTemplateCache.delete(type);
+    const compiledTemplate = this._compiledTemplateCache.get(type);
+    if (compiledTemplate) {
+      this._compiledTemplateCache.delete(type);
+    }
+  }
+
+  clearCache(): void {
+    // Note: don't clear the _addedAotSummaries, as they don't change!
+    this._metadataResolver.clearCache();
+    this._compiledTemplateCache.clear();
+    this._compiledHostTemplateCache.clear();
+    this._compiledNgModuleCache.clear();
+  }
+
+  private _createCompiledHostTemplate(compType: Type, ngModule: CompileNgModuleMetadata):
+      CompiledTemplate {
+    if (!ngModule) {
+      throw new Error(
+          `Component ${stringify(compType)} is not part of any NgModule or the module has not been imported into your module.`);
+    }
+    let compiledTemplate = this._compiledHostTemplateCache.get(compType);
+    if (!compiledTemplate) {
+      const compMeta = this._metadataResolver.getDirectiveMetadata(compType);
+      assertComponent(compMeta);
+
+      const hostMeta = this._metadataResolver.getHostComponentMetadata(
+          compMeta, (compMeta.componentFactory as any).viewDefFactory);
+      compiledTemplate =
+          new CompiledTemplate(true, compMeta.type, hostMeta, ngModule, [compMeta.type]);
+      this._compiledHostTemplateCache.set(compType, compiledTemplate);
+    }
+    return compiledTemplate;
+  }
+
+  private _createCompiledTemplate(
+      compMeta: CompileDirectiveMetadata, ngModule: CompileNgModuleMetadata): CompiledTemplate {
+    let compiledTemplate = this._compiledTemplateCache.get(compMeta.type.reference);
+    if (!compiledTemplate) {
+      assertComponent(compMeta);
+      compiledTemplate = new CompiledTemplate(
+          false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives);
+      this._compiledTemplateCache.set(compMeta.type.reference, compiledTemplate);
+    }
+    return compiledTemplate;
+  }
+
+  private _compileTemplate(template: CompiledTemplate) {
+    if (template.isCompiled) {
+      return;
+    }
+    const compMeta = template.compMeta;
+    const externalStylesheetsByModuleUrl = new Map<string, CompiledStylesheet>();
+    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 pipes = template.ngModule.transitiveModule.pipes.map(
+        pipe => this._metadataResolver.getPipeSummary(pipe.reference));
+    const {template: parsedTemplate, pipes: usedPipes} =
+        this._parseTemplate(compMeta, template.ngModule, template.directives);
+    const compileResult = this._viewCompiler.compileComponent(
+        outputContext, compMeta, parsedTemplate, ir.variable(componentStylesheet.stylesVar),
+        usedPipes);
+    const evalResult = this._interpretOrJit(
+        templateJitUrl(template.ngModule.type, template.compMeta), outputContext.statements);
+    const viewClass = evalResult[compileResult.viewClassVar];
+    const rendererType = evalResult[compileResult.rendererTypeVar];
+    template.compiled(viewClass, rendererType);
+  }
+
+  private _parseTemplate(
+      compMeta: CompileDirectiveMetadata, ngModule: CompileNgModuleMetadata,
+      directiveIdentifiers: CompileIdentifierMetadata[]):
+      {template: TemplateAst[], pipes: CompilePipeSummary[]} {
+    // Note: ! is ok here as components always have a template.
+    const preserveWhitespaces = compMeta.template !.preserveWhitespaces;
+    const directives =
+        directiveIdentifiers.map(dir => this._metadataResolver.getDirectiveSummary(dir.reference));
+    const pipes = ngModule.transitiveModule.pipes.map(
+        pipe => this._metadataResolver.getPipeSummary(pipe.reference));
+    return this._templateParser.parse(
+        compMeta, compMeta.template !.htmlAst !, directives, pipes, ngModule.schemas,
+        templateSourceUrl(ngModule.type, compMeta, compMeta.template !), preserveWhitespaces);
+  }
+
+  private _resolveStylesCompileResult(
+      result: CompiledStylesheet, externalStylesheetsByModuleUrl: Map<string, CompiledStylesheet>) {
+    result.dependencies.forEach((dep, i) => {
+      const nestedCompileResult = externalStylesheetsByModuleUrl.get(dep.moduleUrl) !;
+      const nestedStylesArr = this._resolveAndEvalStylesCompileResult(
+          nestedCompileResult, externalStylesheetsByModuleUrl);
+      dep.setValue(nestedStylesArr);
+    });
+  }
+
+  private _resolveAndEvalStylesCompileResult(
+      result: CompiledStylesheet,
+      externalStylesheetsByModuleUrl: Map<string, CompiledStylesheet>): string[] {
+    this._resolveStylesCompileResult(result, externalStylesheetsByModuleUrl);
+    return this._interpretOrJit(
+        sharedStylesheetJitUrl(result.meta, this._sharedStylesheetCount++),
+        result.outputCtx.statements)[result.stylesVar];
+  }
+
+  private _interpretOrJit(sourceUrl: string, statements: ir.Statement[]): any {
+    if (!this._compilerConfig.useJit) {
+      return interpretStatements(statements, this._reflector);
+    } else {
+      return jitStatements(sourceUrl, statements, this._reflector, this._compilerConfig.jitDevMode);
+    }
+  }
+}
+
+class CompiledTemplate {
+  private _viewClass: Function = null !;
+  isCompiled = false;
+
+  constructor(
+      public isHost: boolean, public compType: CompileIdentifierMetadata,
+      public compMeta: CompileDirectiveMetadata, public ngModule: CompileNgModuleMetadata,
+      public directives: CompileIdentifierMetadata[]) {}
+
+  compiled(viewClass: Function, rendererType: any) {
+    this._viewClass = viewClass;
+    (<ProxyClass>this.compMeta.componentViewType).setDelegate(viewClass);
+    for (let prop in rendererType) {
+      (<any>this.compMeta.rendererType)[prop] = rendererType[prop];
+    }
+    this.isCompiled = true;
+  }
+}
+
+function assertComponent(meta: CompileDirectiveMetadata) {
+  if (!meta.isComponent) {
+    throw new Error(
+        `Could not compile '${identifierName(meta.type)}' because it is not a component.`);
+  }
+}
+
+function createOutputContext(): OutputContext {
+  const importExpr = (symbol: any) =>
+      ir.importExpr({name: identifierName(symbol), moduleName: null, runtime: symbol});
+  return {statements: [], genFilePath: '', importExpr, constantPool: new ConstantPool()};
+}
diff --git a/packages/compiler/src/lifecycle_reflector.ts b/packages/compiler/src/lifecycle_reflector.ts
new file mode 100644
index 000000000000..769a35045548
--- /dev/null
+++ b/packages/compiler/src/lifecycle_reflector.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 {CompileReflector} from './compile_reflector';
+
+export enum LifecycleHooks {
+  OnInit,
+  OnDestroy,
+  DoCheck,
+  OnChanges,
+  AfterContentInit,
+  AfterContentChecked,
+  AfterViewInit,
+  AfterViewChecked
+}
+
+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:
+      return 'ngOnInit';
+    case LifecycleHooks.OnDestroy:
+      return 'ngOnDestroy';
+    case LifecycleHooks.DoCheck:
+      return 'ngDoCheck';
+    case LifecycleHooks.OnChanges:
+      return 'ngOnChanges';
+    case LifecycleHooks.AfterContentInit:
+      return 'ngAfterContentInit';
+    case LifecycleHooks.AfterContentChecked:
+      return 'ngAfterContentChecked';
+    case LifecycleHooks.AfterViewInit:
+      return 'ngAfterViewInit';
+    case LifecycleHooks.AfterViewChecked:
+      return 'ngAfterViewChecked';
+    default:
+      // This default case is not needed by TypeScript compiler, as the switch is exhaustive.
+      // However Closure Compiler does not understand that and reports an error in typed mode.
+      // The `throw new Error` below works around the problem, and the unexpected: never variable
+      // makes sure tsc still checks this code is unreachable.
+      const unexpected: never = hook;
+      throw new Error(`unexpected ${unexpected}`);
+  }
+}
diff --git a/packages/compiler/src/metadata_resolver.ts b/packages/compiler/src/metadata_resolver.ts
new file mode 100644
index 000000000000..af1c0f1a9d3c
--- /dev/null
+++ b/packages/compiler/src/metadata_resolver.ts
@@ -0,0 +1,1231 @@
+/**
+ * @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, 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 {ChangeDetectionStrategy, Component, Directive, Injectable, ModuleWithProviders, Provider, Query, SchemaMetadata, Type, ViewEncapsulation, createAttribute, createComponent, createHost, createInject, createInjectable, createInjectionToken, createNgModule, createOptional, createSelf, createSkipSelf} from './core';
+import {DirectiveNormalizer} from './directive_normalizer';
+import {DirectiveResolver, findLast} from './directive_resolver';
+import {Identifiers} from './identifiers';
+import {getAllLifecycleHooks} from './lifecycle_reflector';
+import {HtmlParser} from './ml_parser/html_parser';
+import {NgModuleResolver} from './ng_module_resolver';
+import {PipeResolver} from './pipe_resolver';
+import {ElementSchemaRegistry} from './schema/element_schema_registry';
+import {CssSelector} from './selector';
+import {SummaryResolver} from './summary_resolver';
+import {Console, SyncAsync, ValueTransformer, isPromise, noUndefined, resolveForwardRef, stringify, syntaxError, visitValue} from './util';
+
+export type ErrorCollector = (error: any, type?: any) => void;
+
+export const ERROR_COMPONENT_TYPE = 'ngComponentType';
+
+// Design notes:
+// - don't lazily create metadata:
+//   For some metadata, we need to do async work sometimes,
+//   so the user has to kick off this loading.
+//   But we want to report errors even when the async work is
+//   not required to check that the user would have been able
+//   to wait correctly.
+export class CompileMetadataResolver {
+  private _nonNormalizedDirectiveCache =
+      new Map<Type, {annotation: Directive, metadata: cpl.CompileDirectiveMetadata}>();
+  private _directiveCache = new Map<Type, cpl.CompileDirectiveMetadata>();
+  private _summaryCache = new Map<Type, cpl.CompileTypeSummary|null>();
+  private _pipeCache = new Map<Type, cpl.CompilePipeMetadata>();
+  private _ngModuleCache = new Map<Type, cpl.CompileNgModuleMetadata>();
+  private _ngModuleOfTypes = new Map<Type, Type>();
+  private _shallowModuleCache = new Map<Type, cpl.CompileShallowModuleMetadata>();
+
+  constructor(
+      private _config: CompilerConfig, private _htmlParser: HtmlParser,
+      private _ngModuleResolver: NgModuleResolver, private _directiveResolver: DirectiveResolver,
+      private _pipeResolver: PipeResolver, private _summaryResolver: SummaryResolver<any>,
+      private _schemaRegistry: ElementSchemaRegistry,
+      private _directiveNormalizer: DirectiveNormalizer, private _console: Console,
+      private _staticSymbolCache: StaticSymbolCache, private _reflector: CompileReflector,
+      private _errorCollector?: ErrorCollector) {}
+
+  getReflector(): CompileReflector { return this._reflector; }
+
+  clearCacheFor(type: Type) {
+    const dirMeta = this._directiveCache.get(type);
+    this._directiveCache.delete(type);
+    this._nonNormalizedDirectiveCache.delete(type);
+    this._summaryCache.delete(type);
+    this._pipeCache.delete(type);
+    this._ngModuleOfTypes.delete(type);
+    // Clear all of the NgModule as they contain transitive information!
+    this._ngModuleCache.clear();
+    if (dirMeta) {
+      this._directiveNormalizer.clearCacheFor(dirMeta);
+    }
+  }
+
+  clearCache(): void {
+    this._directiveCache.clear();
+    this._nonNormalizedDirectiveCache.clear();
+    this._summaryCache.clear();
+    this._pipeCache.clear();
+    this._ngModuleCache.clear();
+    this._ngModuleOfTypes.clear();
+    this._directiveNormalizer.clearCache();
+  }
+
+  private _createProxyClass(baseType: any, name: string): cpl.ProxyClass {
+    let delegate: any = null;
+    const proxyClass: cpl.ProxyClass = <any>function() {
+      if (!delegate) {
+        throw new Error(
+            `Illegal state: Class ${name} for type ${stringify(baseType)} is not compiled yet!`);
+      }
+      return delegate.apply(this, arguments);
+    };
+    proxyClass.setDelegate = (d) => {
+      delegate = d;
+      (<any>proxyClass).prototype = d.prototype;
+    };
+    // Make stringify work correctly
+    (<any>proxyClass).overriddenName = name;
+    return proxyClass;
+  }
+
+  private getGeneratedClass(dirType: any, name: string): StaticSymbol|cpl.ProxyClass {
+    if (dirType instanceof StaticSymbol) {
+      return this._staticSymbolCache.get(ngfactoryFilePath(dirType.filePath), name);
+    } else {
+      return this._createProxyClass(dirType, name);
+    }
+  }
+
+  private getComponentViewClass(dirType: any): StaticSymbol|cpl.ProxyClass {
+    return this.getGeneratedClass(dirType, cpl.viewClassName(dirType, 0));
+  }
+
+  getHostComponentViewClass(dirType: any): StaticSymbol|cpl.ProxyClass {
+    return this.getGeneratedClass(dirType, cpl.hostViewClassName(dirType));
+  }
+
+  getHostComponentType(dirType: any): StaticSymbol|cpl.ProxyClass {
+    const name = `${cpl.identifierName({reference: dirType})}_Host`;
+    if (dirType instanceof StaticSymbol) {
+      return this._staticSymbolCache.get(dirType.filePath, name);
+    }
+
+    return this._createProxyClass(dirType, name);
+  }
+
+  private getRendererType(dirType: any): StaticSymbol|object {
+    if (dirType instanceof StaticSymbol) {
+      return this._staticSymbolCache.get(
+          ngfactoryFilePath(dirType.filePath), cpl.rendererTypeName(dirType));
+    } else {
+      // returning an object as proxy,
+      // that we fill later during runtime compilation.
+      return <any>{};
+    }
+  }
+
+  private getComponentFactory(
+      selector: string, dirType: any, inputs: {[key: string]: string}|null,
+      outputs: {[key: string]: string}): StaticSymbol|object {
+    if (dirType instanceof StaticSymbol) {
+      return this._staticSymbolCache.get(
+          ngfactoryFilePath(dirType.filePath), cpl.componentFactoryName(dirType));
+    } else {
+      const hostView = this.getHostComponentViewClass(dirType);
+      // Note: ngContentSelectors will be filled later once the template is
+      // loaded.
+      const createComponentFactory =
+          this._reflector.resolveExternalReference(Identifiers.createComponentFactory);
+      return createComponentFactory(selector, dirType, <any>hostView, inputs, outputs, []);
+    }
+  }
+
+  private initComponentFactory(factory: StaticSymbol|object, ngContentSelectors: string[]) {
+    if (!(factory instanceof StaticSymbol)) {
+      (factory as any).ngContentSelectors.push(...ngContentSelectors);
+    }
+  }
+
+  private _loadSummary(type: any, kind: cpl.CompileSummaryKind): cpl.CompileTypeSummary|null {
+    let typeSummary = this._summaryCache.get(type);
+    if (!typeSummary) {
+      const summary = this._summaryResolver.resolveSummary(type);
+      typeSummary = summary ? summary.type : null;
+      this._summaryCache.set(type, typeSummary || null);
+    }
+    return typeSummary && typeSummary.summaryKind === kind ? typeSummary : null;
+  }
+
+  getHostComponentMetadata(
+      compMeta: cpl.CompileDirectiveMetadata,
+      hostViewType?: StaticSymbol|cpl.ProxyClass): cpl.CompileDirectiveMetadata {
+    const hostType = this.getHostComponentType(compMeta.type.reference);
+    if (!hostViewType) {
+      hostViewType = this.getHostComponentViewClass(hostType);
+    }
+    // Note: ! is ok here as this method should only be called with normalized directive
+    // metadata, which always fills in the selector.
+    const template = CssSelector.parse(compMeta.selector !)[0].getMatchingElementTemplate();
+    const templateUrl = '';
+    const htmlAst = this._htmlParser.parse(template, templateUrl);
+    return cpl.CompileDirectiveMetadata.create({
+      isHost: true,
+      type: {reference: hostType, diDeps: [], lifecycleHooks: []},
+      template: new cpl.CompileTemplateMetadata({
+        encapsulation: ViewEncapsulation.None,
+        template,
+        templateUrl,
+        htmlAst,
+        styles: [],
+        styleUrls: [],
+        ngContentSelectors: [],
+        animations: [],
+        isInline: true,
+        externalStylesheets: [],
+        interpolation: null,
+        preserveWhitespaces: false,
+      }),
+      exportAs: null,
+      changeDetection: ChangeDetectionStrategy.Default,
+      inputs: [],
+      outputs: [],
+      host: {},
+      isComponent: true,
+      selector: '*',
+      providers: [],
+      viewProviders: [],
+      queries: [],
+      guards: {},
+      viewQueries: [],
+      componentViewType: hostViewType,
+      rendererType:
+          {id: '__Host__', encapsulation: ViewEncapsulation.None, styles: [], data: {}} as object,
+      entryComponents: [],
+      componentFactory: null
+    });
+  }
+
+  loadDirectiveMetadata(ngModuleType: any, directiveType: any, isSync: boolean): SyncAsync<null> {
+    if (this._directiveCache.has(directiveType)) {
+      return null;
+    }
+    directiveType = resolveForwardRef(directiveType);
+    const {annotation, metadata} = this.getNonNormalizedDirectiveMetadata(directiveType) !;
+
+    const createDirectiveMetadata = (templateMetadata: cpl.CompileTemplateMetadata | null) => {
+      const normalizedDirMeta = new cpl.CompileDirectiveMetadata({
+        isHost: false,
+        type: metadata.type,
+        isComponent: metadata.isComponent,
+        selector: metadata.selector,
+        exportAs: metadata.exportAs,
+        changeDetection: metadata.changeDetection,
+        inputs: metadata.inputs,
+        outputs: metadata.outputs,
+        hostListeners: metadata.hostListeners,
+        hostProperties: metadata.hostProperties,
+        hostAttributes: metadata.hostAttributes,
+        providers: metadata.providers,
+        viewProviders: metadata.viewProviders,
+        queries: metadata.queries,
+        guards: metadata.guards,
+        viewQueries: metadata.viewQueries,
+        entryComponents: metadata.entryComponents,
+        componentViewType: metadata.componentViewType,
+        rendererType: metadata.rendererType,
+        componentFactory: metadata.componentFactory,
+        template: templateMetadata
+      });
+      if (templateMetadata) {
+        this.initComponentFactory(metadata.componentFactory !, templateMetadata.ngContentSelectors);
+      }
+      this._directiveCache.set(directiveType, normalizedDirMeta);
+      this._summaryCache.set(directiveType, normalizedDirMeta.toSummary());
+      return null;
+    };
+
+    if (metadata.isComponent) {
+      const template = metadata.template !;
+      const templateMeta = this._directiveNormalizer.normalizeTemplate({
+        ngModuleType,
+        componentType: directiveType,
+        moduleUrl: this._reflector.componentModuleUrl(directiveType, annotation),
+        encapsulation: template.encapsulation,
+        template: template.template,
+        templateUrl: template.templateUrl,
+        styles: template.styles,
+        styleUrls: template.styleUrls,
+        animations: template.animations,
+        interpolation: template.interpolation,
+        preserveWhitespaces: template.preserveWhitespaces
+      });
+      if (isPromise(templateMeta) && isSync) {
+        this._reportError(componentStillLoadingError(directiveType), directiveType);
+        return null;
+      }
+      return SyncAsync.then(templateMeta, createDirectiveMetadata);
+    } else {
+      // directive
+      createDirectiveMetadata(null);
+      return null;
+    }
+  }
+
+  getNonNormalizedDirectiveMetadata(directiveType: any):
+      {annotation: Directive, metadata: cpl.CompileDirectiveMetadata}|null {
+    directiveType = resolveForwardRef(directiveType);
+    if (!directiveType) {
+      return null;
+    }
+    let cacheEntry = this._nonNormalizedDirectiveCache.get(directiveType);
+    if (cacheEntry) {
+      return cacheEntry;
+    }
+    const dirMeta = this._directiveResolver.resolve(directiveType, false);
+    if (!dirMeta) {
+      return null;
+    }
+    let nonNormalizedTemplateMetadata: cpl.CompileTemplateMetadata = undefined !;
+
+    if (createComponent.isTypeOf(dirMeta)) {
+      // component
+      const compMeta = dirMeta as Component;
+      assertArrayOfStrings('styles', compMeta.styles);
+      assertArrayOfStrings('styleUrls', compMeta.styleUrls);
+      assertInterpolationSymbols('interpolation', compMeta.interpolation);
+
+      const animations = compMeta.animations;
+
+      nonNormalizedTemplateMetadata = new cpl.CompileTemplateMetadata({
+        encapsulation: noUndefined(compMeta.encapsulation),
+        template: noUndefined(compMeta.template),
+        templateUrl: noUndefined(compMeta.templateUrl),
+        htmlAst: null,
+        styles: compMeta.styles || [],
+        styleUrls: compMeta.styleUrls || [],
+        animations: animations || [],
+        interpolation: noUndefined(compMeta.interpolation),
+        isInline: !!compMeta.template,
+        externalStylesheets: [],
+        ngContentSelectors: [],
+        preserveWhitespaces: noUndefined(dirMeta.preserveWhitespaces),
+      });
+    }
+
+    let changeDetectionStrategy: ChangeDetectionStrategy = null !;
+    let viewProviders: cpl.CompileProviderMetadata[] = [];
+    let entryComponentMetadata: cpl.CompileEntryComponentMetadata[] = [];
+    let selector = dirMeta.selector;
+
+    if (createComponent.isTypeOf(dirMeta)) {
+      // Component
+      const compMeta = dirMeta as Component;
+      changeDetectionStrategy = compMeta.changeDetection !;
+      if (compMeta.viewProviders) {
+        viewProviders = this._getProvidersMetadata(
+            compMeta.viewProviders, entryComponentMetadata,
+            `viewProviders for "${stringifyType(directiveType)}"`, [], directiveType);
+      }
+      if (compMeta.entryComponents) {
+        entryComponentMetadata = flattenAndDedupeArray(compMeta.entryComponents)
+                                     .map((type) => this._getEntryComponentMetadata(type) !)
+                                     .concat(entryComponentMetadata);
+      }
+      if (!selector) {
+        selector = this._schemaRegistry.getDefaultComponentElementName();
+      }
+    } else {
+      // Directive
+      if (!selector) {
+        this._reportError(
+            syntaxError(
+                `Directive ${stringifyType(directiveType)} has no selector, please add it!`),
+            directiveType);
+        selector = 'error';
+      }
+    }
+
+    let providers: cpl.CompileProviderMetadata[] = [];
+    if (dirMeta.providers != null) {
+      providers = this._getProvidersMetadata(
+          dirMeta.providers, entryComponentMetadata,
+          `providers for "${stringifyType(directiveType)}"`, [], directiveType);
+    }
+    let queries: cpl.CompileQueryMetadata[] = [];
+    let viewQueries: cpl.CompileQueryMetadata[] = [];
+    if (dirMeta.queries != null) {
+      queries = this._getQueriesMetadata(dirMeta.queries, false, directiveType);
+      viewQueries = this._getQueriesMetadata(dirMeta.queries, true, directiveType);
+    }
+
+    const metadata = cpl.CompileDirectiveMetadata.create({
+      isHost: false,
+      selector: selector,
+      exportAs: noUndefined(dirMeta.exportAs),
+      isComponent: !!nonNormalizedTemplateMetadata,
+      type: this._getTypeMetadata(directiveType),
+      template: nonNormalizedTemplateMetadata,
+      changeDetection: changeDetectionStrategy,
+      inputs: dirMeta.inputs || [],
+      outputs: dirMeta.outputs || [],
+      host: dirMeta.host || {},
+      providers: providers || [],
+      viewProviders: viewProviders || [],
+      queries: queries || [],
+      guards: dirMeta.guards || {},
+      viewQueries: viewQueries || [],
+      entryComponents: entryComponentMetadata,
+      componentViewType: nonNormalizedTemplateMetadata ? this.getComponentViewClass(directiveType) :
+                                                         null,
+      rendererType: nonNormalizedTemplateMetadata ? this.getRendererType(directiveType) : null,
+      componentFactory: null
+    });
+    if (nonNormalizedTemplateMetadata) {
+      metadata.componentFactory =
+          this.getComponentFactory(selector, directiveType, metadata.inputs, metadata.outputs);
+    }
+    cacheEntry = {metadata, annotation: dirMeta};
+    this._nonNormalizedDirectiveCache.set(directiveType, cacheEntry);
+    return cacheEntry;
+  }
+
+  /**
+   * Gets the metadata for the given directive.
+   * This assumes `loadNgModuleDirectiveAndPipeMetadata` has been called first.
+   */
+  getDirectiveMetadata(directiveType: any): cpl.CompileDirectiveMetadata {
+    const dirMeta = this._directiveCache.get(directiveType) !;
+    if (!dirMeta) {
+      this._reportError(
+          syntaxError(
+              `Illegal state: getDirectiveMetadata can only be called after loadNgModuleDirectiveAndPipeMetadata for a module that declares it. Directive ${stringifyType(directiveType)}.`),
+          directiveType);
+    }
+    return dirMeta;
+  }
+
+  getDirectiveSummary(dirType: any): cpl.CompileDirectiveSummary {
+    const dirSummary =
+        <cpl.CompileDirectiveSummary>this._loadSummary(dirType, cpl.CompileSummaryKind.Directive);
+    if (!dirSummary) {
+      this._reportError(
+          syntaxError(
+              `Illegal state: Could not load the summary for directive ${stringifyType(dirType)}.`),
+          dirType);
+    }
+    return dirSummary;
+  }
+
+  isDirective(type: any) {
+    return !!this._loadSummary(type, cpl.CompileSummaryKind.Directive) ||
+        this._directiveResolver.isDirective(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, alreadyCollecting: Set<any>|null = null):
+      cpl.CompileNgModuleSummary|null {
+    let moduleSummary: cpl.CompileNgModuleSummary|null =
+        <cpl.CompileNgModuleSummary>this._loadSummary(moduleType, cpl.CompileSummaryKind.NgModule);
+    if (!moduleSummary) {
+      const moduleMeta = this.getNgModuleMetadata(moduleType, false, alreadyCollecting);
+      moduleSummary = moduleMeta ? moduleMeta.toSummary() : null;
+      if (moduleSummary) {
+        this._summaryCache.set(moduleType, moduleSummary);
+      }
+    }
+    return moduleSummary;
+  }
+
+  /**
+   * Loads the declared directives and pipes of an NgModule.
+   */
+  loadNgModuleDirectiveAndPipeMetadata(moduleType: any, isSync: boolean, throwIfNotFound = true):
+      Promise<any> {
+    const ngModule = this.getNgModuleMetadata(moduleType, throwIfNotFound);
+    const loading: Promise<any>[] = [];
+    if (ngModule) {
+      ngModule.declaredDirectives.forEach((id) => {
+        const promise = this.loadDirectiveMetadata(moduleType, id.reference, isSync);
+        if (promise) {
+          loading.push(promise);
+        }
+      });
+      ngModule.declaredPipes.forEach((id) => this._loadPipeMetadata(id.reference));
+    }
+    return Promise.all(loading);
+  }
+
+  getShallowModuleMetadata(moduleType: any): cpl.CompileShallowModuleMetadata|null {
+    let compileMeta = this._shallowModuleCache.get(moduleType);
+    if (compileMeta) {
+      return compileMeta;
+    }
+
+    const ngModuleMeta =
+        findLast(this._reflector.shallowAnnotations(moduleType), createNgModule.isTypeOf);
+
+    compileMeta = {
+      type: this._getTypeMetadata(moduleType),
+      rawExports: ngModuleMeta.exports,
+      rawImports: ngModuleMeta.imports,
+      rawProviders: ngModuleMeta.providers,
+    };
+
+    this._shallowModuleCache.set(moduleType, compileMeta);
+    return compileMeta;
+  }
+
+  getNgModuleMetadata(
+      moduleType: any, throwIfNotFound = true,
+      alreadyCollecting: Set<any>|null = null): cpl.CompileNgModuleMetadata|null {
+    moduleType = resolveForwardRef(moduleType);
+    let compileMeta = this._ngModuleCache.get(moduleType);
+    if (compileMeta) {
+      return compileMeta;
+    }
+    const meta = this._ngModuleResolver.resolve(moduleType, throwIfNotFound);
+    if (!meta) {
+      return null;
+    }
+    const declaredDirectives: cpl.CompileIdentifierMetadata[] = [];
+    const exportedNonModuleIdentifiers: cpl.CompileIdentifierMetadata[] = [];
+    const declaredPipes: cpl.CompileIdentifierMetadata[] = [];
+    const importedModules: cpl.CompileNgModuleSummary[] = [];
+    const exportedModules: cpl.CompileNgModuleSummary[] = [];
+    const providers: cpl.CompileProviderMetadata[] = [];
+    const entryComponents: cpl.CompileEntryComponentMetadata[] = [];
+    const bootstrapComponents: cpl.CompileIdentifierMetadata[] = [];
+    const schemas: SchemaMetadata[] = [];
+
+    if (meta.imports) {
+      flattenAndDedupeArray(meta.imports).forEach((importedType) => {
+        let importedModuleType: Type = undefined !;
+        if (isValidType(importedType)) {
+          importedModuleType = importedType;
+        } else if (importedType && importedType.ngModule) {
+          const moduleWithProviders: ModuleWithProviders = importedType;
+          importedModuleType = moduleWithProviders.ngModule;
+          if (moduleWithProviders.providers) {
+            providers.push(...this._getProvidersMetadata(
+                moduleWithProviders.providers, entryComponents,
+                `provider for the NgModule '${stringifyType(importedModuleType)}'`, [],
+                importedType));
+          }
+        }
+
+        if (importedModuleType) {
+          if (this._checkSelfImport(moduleType, importedModuleType)) return;
+          if (!alreadyCollecting) alreadyCollecting = new Set();
+          if (alreadyCollecting.has(importedModuleType)) {
+            this._reportError(
+                syntaxError(
+                    `${this._getTypeDescriptor(importedModuleType)} '${stringifyType(importedType)}' is imported recursively by the module '${stringifyType(moduleType)}'.`),
+                moduleType);
+            return;
+          }
+          alreadyCollecting.add(importedModuleType);
+          const importedModuleSummary =
+              this.getNgModuleSummary(importedModuleType, alreadyCollecting);
+          alreadyCollecting.delete(importedModuleType);
+          if (!importedModuleSummary) {
+            this._reportError(
+                syntaxError(
+                    `Unexpected ${this._getTypeDescriptor(importedType)} '${stringifyType(importedType)}' imported by the module '${stringifyType(moduleType)}'. Please add a @NgModule annotation.`),
+                moduleType);
+            return;
+          }
+          importedModules.push(importedModuleSummary);
+        } else {
+          this._reportError(
+              syntaxError(
+                  `Unexpected value '${stringifyType(importedType)}' imported by the module '${stringifyType(moduleType)}'`),
+              moduleType);
+          return;
+        }
+      });
+    }
+
+    if (meta.exports) {
+      flattenAndDedupeArray(meta.exports).forEach((exportedType) => {
+        if (!isValidType(exportedType)) {
+          this._reportError(
+              syntaxError(
+                  `Unexpected value '${stringifyType(exportedType)}' exported by the module '${stringifyType(moduleType)}'`),
+              moduleType);
+          return;
+        }
+        if (!alreadyCollecting) alreadyCollecting = new Set();
+        if (alreadyCollecting.has(exportedType)) {
+          this._reportError(
+              syntaxError(
+                  `${this._getTypeDescriptor(exportedType)} '${stringify(exportedType)}' is exported recursively by the module '${stringifyType(moduleType)}'`),
+              moduleType);
+          return;
+        }
+        alreadyCollecting.add(exportedType);
+        const exportedModuleSummary = this.getNgModuleSummary(exportedType, alreadyCollecting);
+        alreadyCollecting.delete(exportedType);
+        if (exportedModuleSummary) {
+          exportedModules.push(exportedModuleSummary);
+        } else {
+          exportedNonModuleIdentifiers.push(this._getIdentifierMetadata(exportedType));
+        }
+      });
+    }
+
+    // Note: This will be modified later, so we rely on
+    // getting a new instance every time!
+    const transitiveModule = this._getTransitiveNgModuleMetadata(importedModules, exportedModules);
+    if (meta.declarations) {
+      flattenAndDedupeArray(meta.declarations).forEach((declaredType) => {
+        if (!isValidType(declaredType)) {
+          this._reportError(
+              syntaxError(
+                  `Unexpected value '${stringifyType(declaredType)}' declared by the module '${stringifyType(moduleType)}'`),
+              moduleType);
+          return;
+        }
+        const declaredIdentifier = this._getIdentifierMetadata(declaredType);
+        if (this.isDirective(declaredType)) {
+          transitiveModule.addDirective(declaredIdentifier);
+          declaredDirectives.push(declaredIdentifier);
+          this._addTypeToModule(declaredType, moduleType);
+        } else if (this.isPipe(declaredType)) {
+          transitiveModule.addPipe(declaredIdentifier);
+          transitiveModule.pipes.push(declaredIdentifier);
+          declaredPipes.push(declaredIdentifier);
+          this._addTypeToModule(declaredType, moduleType);
+        } else {
+          this._reportError(
+              syntaxError(
+                  `Unexpected ${this._getTypeDescriptor(declaredType)} '${stringifyType(declaredType)}' declared by the module '${stringifyType(moduleType)}'. Please add a @Pipe/@Directive/@Component annotation.`),
+              moduleType);
+          return;
+        }
+      });
+    }
+
+    const exportedDirectives: cpl.CompileIdentifierMetadata[] = [];
+    const exportedPipes: cpl.CompileIdentifierMetadata[] = [];
+    exportedNonModuleIdentifiers.forEach((exportedId) => {
+      if (transitiveModule.directivesSet.has(exportedId.reference)) {
+        exportedDirectives.push(exportedId);
+        transitiveModule.addExportedDirective(exportedId);
+      } else if (transitiveModule.pipesSet.has(exportedId.reference)) {
+        exportedPipes.push(exportedId);
+        transitiveModule.addExportedPipe(exportedId);
+      } else {
+        this._reportError(
+            syntaxError(
+                `Can't export ${this._getTypeDescriptor(exportedId.reference)} ${stringifyType(exportedId.reference)} from ${stringifyType(moduleType)} as it was neither declared nor imported!`),
+            moduleType);
+        return;
+      }
+    });
+
+    // The providers of the module have to go last
+    // so that they overwrite any other provider we already added.
+    if (meta.providers) {
+      providers.push(...this._getProvidersMetadata(
+          meta.providers, entryComponents,
+          `provider for the NgModule '${stringifyType(moduleType)}'`, [], moduleType));
+    }
+
+    if (meta.entryComponents) {
+      entryComponents.push(...flattenAndDedupeArray(meta.entryComponents)
+                               .map(type => this._getEntryComponentMetadata(type) !));
+    }
+
+    if (meta.bootstrap) {
+      flattenAndDedupeArray(meta.bootstrap).forEach(type => {
+        if (!isValidType(type)) {
+          this._reportError(
+              syntaxError(
+                  `Unexpected value '${stringifyType(type)}' used in the bootstrap property of module '${stringifyType(moduleType)}'`),
+              moduleType);
+          return;
+        }
+        bootstrapComponents.push(this._getIdentifierMetadata(type));
+      });
+    }
+
+    entryComponents.push(
+        ...bootstrapComponents.map(type => this._getEntryComponentMetadata(type.reference) !));
+
+    if (meta.schemas) {
+      schemas.push(...flattenAndDedupeArray(meta.schemas));
+    }
+
+    compileMeta = new cpl.CompileNgModuleMetadata({
+      type: this._getTypeMetadata(moduleType),
+      providers,
+      entryComponents,
+      bootstrapComponents,
+      schemas,
+      declaredDirectives,
+      exportedDirectives,
+      declaredPipes,
+      exportedPipes,
+      importedModules,
+      exportedModules,
+      transitiveModule,
+      id: meta.id || null,
+    });
+
+    entryComponents.forEach((id) => transitiveModule.addEntryComponent(id));
+    providers.forEach((provider) => transitiveModule.addProvider(provider, compileMeta !.type));
+    transitiveModule.addModule(compileMeta.type);
+    this._ngModuleCache.set(moduleType, compileMeta);
+    return compileMeta;
+  }
+
+  private _checkSelfImport(moduleType: Type, importedModuleType: Type): boolean {
+    if (moduleType === importedModuleType) {
+      this._reportError(
+          syntaxError(`'${stringifyType(moduleType)}' module can't import itself`), moduleType);
+      return true;
+    }
+    return false;
+  }
+
+  private _getTypeDescriptor(type: Type): string {
+    if (isValidType(type)) {
+      if (this.isDirective(type)) {
+        return 'directive';
+      }
+
+      if (this.isPipe(type)) {
+        return 'pipe';
+      }
+
+      if (this.isNgModule(type)) {
+        return 'module';
+      }
+    }
+
+    if ((type as any).provide) {
+      return 'provider';
+    }
+
+    return 'value';
+  }
+
+
+  private _addTypeToModule(type: Type, moduleType: Type) {
+    const oldModule = this._ngModuleOfTypes.get(type);
+    if (oldModule && oldModule !== moduleType) {
+      this._reportError(
+          syntaxError(
+              `Type ${stringifyType(type)} is part of the declarations of 2 modules: ${stringifyType(oldModule)} and ${stringifyType(moduleType)}! ` +
+              `Please consider moving ${stringifyType(type)} to a higher module that imports ${stringifyType(oldModule)} and ${stringifyType(moduleType)}. ` +
+              `You can also create a new NgModule that exports and includes ${stringifyType(type)} then import that NgModule in ${stringifyType(oldModule)} and ${stringifyType(moduleType)}.`),
+          moduleType);
+      return;
+    }
+    this._ngModuleOfTypes.set(type, moduleType);
+  }
+
+  private _getTransitiveNgModuleMetadata(
+      importedModules: cpl.CompileNgModuleSummary[],
+      exportedModules: cpl.CompileNgModuleSummary[]): cpl.TransitiveCompileNgModuleMetadata {
+    // collect `providers` / `entryComponents` from all imported and all exported modules
+    const result = new cpl.TransitiveCompileNgModuleMetadata();
+    const modulesByToken = new Map<any, Set<any>>();
+    importedModules.concat(exportedModules).forEach((modSummary) => {
+      modSummary.modules.forEach((mod) => result.addModule(mod));
+      modSummary.entryComponents.forEach((comp) => result.addEntryComponent(comp));
+      const addedTokens = new Set<any>();
+      modSummary.providers.forEach((entry) => {
+        const tokenRef = cpl.tokenReference(entry.provider.token);
+        let prevModules = modulesByToken.get(tokenRef);
+        if (!prevModules) {
+          prevModules = new Set<any>();
+          modulesByToken.set(tokenRef, prevModules);
+        }
+        const moduleRef = entry.module.reference;
+        // Note: the providers of one module may still contain multiple providers
+        // per token (e.g. for multi providers), and we need to preserve these.
+        if (addedTokens.has(tokenRef) || !prevModules.has(moduleRef)) {
+          prevModules.add(moduleRef);
+          addedTokens.add(tokenRef);
+          result.addProvider(entry.provider, entry.module);
+        }
+      });
+    });
+    exportedModules.forEach((modSummary) => {
+      modSummary.exportedDirectives.forEach((id) => result.addExportedDirective(id));
+      modSummary.exportedPipes.forEach((id) => result.addExportedPipe(id));
+    });
+    importedModules.forEach((modSummary) => {
+      modSummary.exportedDirectives.forEach((id) => result.addDirective(id));
+      modSummary.exportedPipes.forEach((id) => result.addPipe(id));
+    });
+    return result;
+  }
+
+  private _getIdentifierMetadata(type: Type): cpl.CompileIdentifierMetadata {
+    type = resolveForwardRef(type);
+    return {reference: type};
+  }
+
+  isInjectable(type: any): boolean {
+    const annotations = this._reflector.tryAnnotations(type);
+    return annotations.some(ann => createInjectable.isTypeOf(ann));
+  }
+
+  getInjectableSummary(type: any): cpl.CompileTypeSummary {
+    return {
+      summaryKind: cpl.CompileSummaryKind.Injectable,
+      type: this._getTypeMetadata(type, null, false)
+    };
+  }
+
+  getInjectableMetadata(
+      type: any, dependencies: any[]|null = null,
+      throwOnUnknownDeps: boolean = true): cpl.CompileInjectableMetadata|null {
+    const typeSummary = this._loadSummary(type, cpl.CompileSummaryKind.Injectable);
+    const typeMetadata = typeSummary ?
+        typeSummary.type :
+        this._getTypeMetadata(type, dependencies, throwOnUnknownDeps);
+
+    const annotations: Injectable[] =
+        this._reflector.annotations(type).filter(ann => createInjectable.isTypeOf(ann));
+
+    if (annotations.length === 0) {
+      return null;
+    }
+
+    const meta = annotations[annotations.length - 1];
+    return {
+      symbol: type,
+      type: typeMetadata,
+      providedIn: meta.providedIn,
+      useValue: meta.useValue,
+      useClass: meta.useClass,
+      useExisting: meta.useExisting,
+      useFactory: meta.useFactory,
+      deps: meta.deps,
+    };
+  }
+
+  private _getTypeMetadata(type: Type, dependencies: any[]|null = null, throwOnUnknownDeps = true):
+      cpl.CompileTypeMetadata {
+    const identifier = this._getIdentifierMetadata(type);
+    return {
+      reference: identifier.reference,
+      diDeps: this._getDependenciesMetadata(identifier.reference, dependencies, throwOnUnknownDeps),
+      lifecycleHooks: getAllLifecycleHooks(this._reflector, identifier.reference),
+    };
+  }
+
+  private _getFactoryMetadata(factory: Function, dependencies: any[]|null = null):
+      cpl.CompileFactoryMetadata {
+    factory = resolveForwardRef(factory);
+    return {reference: factory, diDeps: this._getDependenciesMetadata(factory, dependencies)};
+  }
+
+  /**
+   * Gets the metadata for the given pipe.
+   * This assumes `loadNgModuleDirectiveAndPipeMetadata` has been called first.
+   */
+  getPipeMetadata(pipeType: any): cpl.CompilePipeMetadata|null {
+    const pipeMeta = this._pipeCache.get(pipeType);
+    if (!pipeMeta) {
+      this._reportError(
+          syntaxError(
+              `Illegal state: getPipeMetadata can only be called after loadNgModuleDirectiveAndPipeMetadata for a module that declares it. Pipe ${stringifyType(pipeType)}.`),
+          pipeType);
+    }
+    return pipeMeta || null;
+  }
+
+  getPipeSummary(pipeType: any): cpl.CompilePipeSummary {
+    const pipeSummary =
+        <cpl.CompilePipeSummary>this._loadSummary(pipeType, cpl.CompileSummaryKind.Pipe);
+    if (!pipeSummary) {
+      this._reportError(
+          syntaxError(
+              `Illegal state: Could not load the summary for pipe ${stringifyType(pipeType)}.`),
+          pipeType);
+    }
+    return pipeSummary;
+  }
+
+  getOrLoadPipeMetadata(pipeType: any): cpl.CompilePipeMetadata {
+    let pipeMeta = this._pipeCache.get(pipeType);
+    if (!pipeMeta) {
+      pipeMeta = this._loadPipeMetadata(pipeType);
+    }
+    return pipeMeta;
+  }
+
+  private _loadPipeMetadata(pipeType: any): cpl.CompilePipeMetadata {
+    pipeType = resolveForwardRef(pipeType);
+    const pipeAnnotation = this._pipeResolver.resolve(pipeType) !;
+
+    const pipeMeta = new cpl.CompilePipeMetadata({
+      type: this._getTypeMetadata(pipeType),
+      name: pipeAnnotation.name,
+      pure: !!pipeAnnotation.pure
+    });
+    this._pipeCache.set(pipeType, pipeMeta);
+    this._summaryCache.set(pipeType, pipeMeta.toSummary());
+    return pipeMeta;
+  }
+
+  private _getDependenciesMetadata(
+      typeOrFunc: Type|Function, dependencies: any[]|null,
+      throwOnUnknownDeps = true): cpl.CompileDiDependencyMetadata[] {
+    let hasUnknownDeps = false;
+    const params = dependencies || this._reflector.parameters(typeOrFunc) || [];
+
+    const dependenciesMetadata: cpl.CompileDiDependencyMetadata[] = params.map((param) => {
+      let isAttribute = false;
+      let isHost = false;
+      let isSelf = false;
+      let isSkipSelf = false;
+      let isOptional = false;
+      let token: any = null;
+      if (Array.isArray(param)) {
+        param.forEach((paramEntry) => {
+          if (createHost.isTypeOf(paramEntry)) {
+            isHost = true;
+          } else if (createSelf.isTypeOf(paramEntry)) {
+            isSelf = true;
+          } else if (createSkipSelf.isTypeOf(paramEntry)) {
+            isSkipSelf = true;
+          } else if (createOptional.isTypeOf(paramEntry)) {
+            isOptional = true;
+          } else if (createAttribute.isTypeOf(paramEntry)) {
+            isAttribute = true;
+            token = paramEntry.attributeName;
+          } else if (createInject.isTypeOf(paramEntry)) {
+            token = paramEntry.token;
+          } else if (
+              createInjectionToken.isTypeOf(paramEntry) || paramEntry instanceof StaticSymbol) {
+            token = paramEntry;
+          } else if (isValidType(paramEntry) && token == null) {
+            token = paramEntry;
+          }
+        });
+      } else {
+        token = param;
+      }
+      if (token == null) {
+        hasUnknownDeps = true;
+        return null !;
+      }
+
+      return {
+        isAttribute,
+        isHost,
+        isSelf,
+        isSkipSelf,
+        isOptional,
+        token: this._getTokenMetadata(token)
+      };
+
+    });
+
+    if (hasUnknownDeps) {
+      const depsTokens =
+          dependenciesMetadata.map((dep) => dep ? stringifyType(dep.token) : '?').join(', ');
+      const message =
+          `Can't resolve all parameters for ${stringifyType(typeOrFunc)}: (${depsTokens}).`;
+      if (throwOnUnknownDeps || this._config.strictInjectionParameters) {
+        this._reportError(syntaxError(message), typeOrFunc);
+      } else {
+        this._console.warn(`Warning: ${message} This will become an error in Angular v6.x`);
+      }
+    }
+
+    return dependenciesMetadata;
+  }
+
+  private _getTokenMetadata(token: any): cpl.CompileTokenMetadata {
+    token = resolveForwardRef(token);
+    let compileToken: cpl.CompileTokenMetadata;
+    if (typeof token === 'string') {
+      compileToken = {value: token};
+    } else {
+      compileToken = {identifier: {reference: token}};
+    }
+    return compileToken;
+  }
+
+  private _getProvidersMetadata(
+      providers: Provider[], targetEntryComponents: cpl.CompileEntryComponentMetadata[],
+      debugInfo?: string, compileProviders: cpl.CompileProviderMetadata[] = [],
+      type?: any): cpl.CompileProviderMetadata[] {
+    providers.forEach((provider: any, providerIdx: number) => {
+      if (Array.isArray(provider)) {
+        this._getProvidersMetadata(provider, targetEntryComponents, debugInfo, compileProviders);
+      } else {
+        provider = resolveForwardRef(provider);
+        let providerMeta: cpl.ProviderMeta = undefined !;
+        if (provider && typeof provider === 'object' && provider.hasOwnProperty('provide')) {
+          this._validateProvider(provider);
+          providerMeta = new cpl.ProviderMeta(provider.provide, provider);
+        } else if (isValidType(provider)) {
+          providerMeta = new cpl.ProviderMeta(provider, {useClass: provider});
+        } else if (provider === void 0) {
+          this._reportError(syntaxError(
+              `Encountered undefined provider! Usually this means you have a circular dependencies. This might be caused by using 'barrel' index.ts files.`));
+          return;
+        } else {
+          const providersInfo =
+              (<string[]>providers.reduce(
+                   (soFar: string[], seenProvider: any, seenProviderIdx: number) => {
+                     if (seenProviderIdx < providerIdx) {
+                       soFar.push(`${stringifyType(seenProvider)}`);
+                     } else if (seenProviderIdx == providerIdx) {
+                       soFar.push(`?${stringifyType(seenProvider)}?`);
+                     } else if (seenProviderIdx == providerIdx + 1) {
+                       soFar.push('...');
+                     }
+                     return soFar;
+                   },
+                   []))
+                  .join(', ');
+          this._reportError(
+              syntaxError(
+                  `Invalid ${debugInfo ? debugInfo : 'provider'} - only instances of Provider and Type are allowed, got: [${providersInfo}]`),
+              type);
+          return;
+        }
+        if (providerMeta.token ===
+            this._reflector.resolveExternalReference(Identifiers.ANALYZE_FOR_ENTRY_COMPONENTS)) {
+          targetEntryComponents.push(...this._getEntryComponentsFromProvider(providerMeta, type));
+        } else {
+          compileProviders.push(this.getProviderMetadata(providerMeta));
+        }
+      }
+    });
+    return compileProviders;
+  }
+
+  private _validateProvider(provider: any): void {
+    if (provider.hasOwnProperty('useClass') && provider.useClass == null) {
+      this._reportError(syntaxError(
+          `Invalid provider for ${stringifyType(provider.provide)}. useClass cannot be ${provider.useClass}.
+           Usually it happens when:
+           1. There's a circular dependency (might be caused by using index.ts (barrel) files).
+           2. Class was used before it was declared. Use forwardRef in this case.`));
+    }
+  }
+
+  private _getEntryComponentsFromProvider(provider: cpl.ProviderMeta, type?: any):
+      cpl.CompileEntryComponentMetadata[] {
+    const components: cpl.CompileEntryComponentMetadata[] = [];
+    const collectedIdentifiers: cpl.CompileIdentifierMetadata[] = [];
+
+    if (provider.useFactory || provider.useExisting || provider.useClass) {
+      this._reportError(
+          syntaxError(`The ANALYZE_FOR_ENTRY_COMPONENTS token only supports useValue!`), type);
+      return [];
+    }
+
+    if (!provider.multi) {
+      this._reportError(
+          syntaxError(`The ANALYZE_FOR_ENTRY_COMPONENTS token only supports 'multi = true'!`),
+          type);
+      return [];
+    }
+
+    extractIdentifiers(provider.useValue, collectedIdentifiers);
+    collectedIdentifiers.forEach((identifier) => {
+      const entry = this._getEntryComponentMetadata(identifier.reference, false);
+      if (entry) {
+        components.push(entry);
+      }
+    });
+    return components;
+  }
+
+  private _getEntryComponentMetadata(dirType: any, throwIfNotFound = true):
+      cpl.CompileEntryComponentMetadata|null {
+    const dirMeta = this.getNonNormalizedDirectiveMetadata(dirType);
+    if (dirMeta && dirMeta.metadata.isComponent) {
+      return {componentType: dirType, componentFactory: dirMeta.metadata.componentFactory !};
+    }
+    const dirSummary =
+        <cpl.CompileDirectiveSummary>this._loadSummary(dirType, cpl.CompileSummaryKind.Directive);
+    if (dirSummary && dirSummary.isComponent) {
+      return {componentType: dirType, componentFactory: dirSummary.componentFactory !};
+    }
+    if (throwIfNotFound) {
+      throw syntaxError(`${dirType.name} cannot be used as an entry component.`);
+    }
+    return null;
+  }
+
+  private _getInjectableTypeMetadata(type: Type, dependencies: any[]|null = null):
+      cpl.CompileTypeMetadata {
+    const typeSummary = this._loadSummary(type, cpl.CompileSummaryKind.Injectable);
+    if (typeSummary) {
+      return typeSummary.type;
+    }
+    return this._getTypeMetadata(type, dependencies);
+  }
+
+  getProviderMetadata(provider: cpl.ProviderMeta): cpl.CompileProviderMetadata {
+    let compileDeps: cpl.CompileDiDependencyMetadata[] = undefined !;
+    let compileTypeMetadata: cpl.CompileTypeMetadata = null !;
+    let compileFactoryMetadata: cpl.CompileFactoryMetadata = null !;
+    let token: cpl.CompileTokenMetadata = this._getTokenMetadata(provider.token);
+
+    if (provider.useClass) {
+      compileTypeMetadata =
+          this._getInjectableTypeMetadata(provider.useClass, provider.dependencies);
+      compileDeps = compileTypeMetadata.diDeps;
+      if (provider.token === provider.useClass) {
+        // use the compileTypeMetadata as it contains information about lifecycleHooks...
+        token = {identifier: compileTypeMetadata};
+      }
+    } else if (provider.useFactory) {
+      compileFactoryMetadata = this._getFactoryMetadata(provider.useFactory, provider.dependencies);
+      compileDeps = compileFactoryMetadata.diDeps;
+    }
+
+    return {
+      token: token,
+      useClass: compileTypeMetadata,
+      useValue: provider.useValue,
+      useFactory: compileFactoryMetadata,
+      useExisting: provider.useExisting ? this._getTokenMetadata(provider.useExisting) : undefined,
+      deps: compileDeps,
+      multi: provider.multi
+    };
+  }
+
+  private _getQueriesMetadata(
+      queries: {[key: string]: Query}, isViewQuery: boolean,
+      directiveType: Type): cpl.CompileQueryMetadata[] {
+    const res: cpl.CompileQueryMetadata[] = [];
+
+    Object.keys(queries).forEach((propertyName: string) => {
+      const query = queries[propertyName];
+      if (query.isViewQuery === isViewQuery) {
+        res.push(this._getQueryMetadata(query, propertyName, directiveType));
+      }
+    });
+
+    return res;
+  }
+
+  private _queryVarBindings(selector: any): string[] { return selector.split(/\s*,\s*/); }
+
+  private _getQueryMetadata(q: Query, propertyName: string, typeOrFunc: Type|Function):
+      cpl.CompileQueryMetadata {
+    let selectors: cpl.CompileTokenMetadata[];
+    if (typeof q.selector === 'string') {
+      selectors =
+          this._queryVarBindings(q.selector).map(varName => this._getTokenMetadata(varName));
+    } else {
+      if (!q.selector) {
+        this._reportError(
+            syntaxError(
+                `Can't construct a query for the property "${propertyName}" of "${stringifyType(typeOrFunc)}" since the query selector wasn't defined.`),
+            typeOrFunc);
+        selectors = [];
+      } else {
+        selectors = [this._getTokenMetadata(q.selector)];
+      }
+    }
+
+    return {
+      selectors,
+      first: q.first,
+      descendants: q.descendants, propertyName,
+      read: q.read ? this._getTokenMetadata(q.read) : null !
+    };
+  }
+
+  private _reportError(error: any, type?: any, otherType?: any) {
+    if (this._errorCollector) {
+      this._errorCollector(error, type);
+      if (otherType) {
+        this._errorCollector(error, otherType);
+      }
+    } else {
+      throw error;
+    }
+  }
+}
+
+function flattenArray(tree: any[], out: Array<any> = []): Array<any> {
+  if (tree) {
+    for (let i = 0; i < tree.length; i++) {
+      const item = resolveForwardRef(tree[i]);
+      if (Array.isArray(item)) {
+        flattenArray(item, out);
+      } else {
+        out.push(item);
+      }
+    }
+  }
+  return out;
+}
+
+function dedupeArray(array: any[]): Array<any> {
+  if (array) {
+    return Array.from(new Set(array));
+  }
+  return [];
+}
+
+function flattenAndDedupeArray(tree: any[]): Array<any> {
+  return dedupeArray(flattenArray(tree));
+}
+
+function isValidType(value: any): boolean {
+  return (value instanceof StaticSymbol) || (value instanceof Type);
+}
+
+function extractIdentifiers(value: any, targetIdentifiers: cpl.CompileIdentifierMetadata[]) {
+  visitValue(value, new _CompileValueConverter(), targetIdentifiers);
+}
+
+class _CompileValueConverter extends ValueTransformer {
+  visitOther(value: any, targetIdentifiers: cpl.CompileIdentifierMetadata[]): any {
+    targetIdentifiers.push({reference: value});
+  }
+}
+
+function stringifyType(type: any): string {
+  if (type instanceof StaticSymbol) {
+    return `${type.name} in ${type.filePath}`;
+  } else {
+    return stringify(type);
+  }
+}
+
+/**
+ * Indicates that a component is still being loaded in a synchronous compile.
+ */
+function componentStillLoadingError(compType: Type) {
+  const error =
+      Error(`Can't compile synchronously as ${stringify(compType)} is still being loaded!`);
+  (error as any)[ERROR_COMPONENT_TYPE] = compType;
+  return error;
+}
diff --git a/packages/compiler/src/ml_parser/ast.ts b/packages/compiler/src/ml_parser/ast.ts
new file mode 100644
index 000000000000..3bd8742fedbc
--- /dev/null
+++ b/packages/compiler/src/ml_parser/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 {AstPath} from '../ast_path';
+import {ParseSourceSpan} from '../parse_util';
+
+export interface Node {
+  sourceSpan: ParseSourceSpan;
+  visit(visitor: Visitor, context: any): any;
+}
+
+export class Text implements Node {
+  constructor(public value: string, public sourceSpan: ParseSourceSpan) {}
+  visit(visitor: Visitor, context: any): any { return visitor.visitText(this, context); }
+}
+
+export class Expansion implements Node {
+  constructor(
+      public switchValue: string, public type: string, public cases: ExpansionCase[],
+      public sourceSpan: ParseSourceSpan, public switchValueSourceSpan: ParseSourceSpan) {}
+  visit(visitor: Visitor, context: any): any { return visitor.visitExpansion(this, context); }
+}
+
+export class ExpansionCase implements Node {
+  constructor(
+      public value: string, public expression: Node[], public sourceSpan: ParseSourceSpan,
+      public valueSourceSpan: ParseSourceSpan, public expSourceSpan: ParseSourceSpan) {}
+
+  visit(visitor: Visitor, context: any): any { return visitor.visitExpansionCase(this, context); }
+}
+
+export class Attribute implements Node {
+  constructor(
+      public name: string, public value: string, public sourceSpan: ParseSourceSpan,
+      public valueSpan?: ParseSourceSpan) {}
+  visit(visitor: Visitor, context: any): any { return visitor.visitAttribute(this, context); }
+}
+
+export class Element implements Node {
+  constructor(
+      public name: string, public attrs: Attribute[], public children: Node[],
+      public sourceSpan: ParseSourceSpan, public startSourceSpan: ParseSourceSpan|null = null,
+      public endSourceSpan: ParseSourceSpan|null = null) {}
+  visit(visitor: Visitor, context: any): any { return visitor.visitElement(this, context); }
+}
+
+export class Comment implements Node {
+  constructor(public value: string|null, public sourceSpan: ParseSourceSpan) {}
+  visit(visitor: Visitor, context: any): any { return visitor.visitComment(this, context); }
+}
+
+export interface Visitor {
+  // Returning a truthy value from `visit()` will prevent `visitAll()` from the call to the typed
+  // method and result returned will become the result included in `visitAll()`s result array.
+  visit?(node: Node, context: any): any;
+
+  visitElement(element: Element, context: any): any;
+  visitAttribute(attribute: Attribute, context: any): any;
+  visitText(text: Text, context: any): any;
+  visitComment(comment: Comment, context: any): any;
+  visitExpansion(expansion: Expansion, context: any): any;
+  visitExpansionCase(expansionCase: ExpansionCase, context: any): any;
+}
+
+export function visitAll(visitor: Visitor, nodes: Node[], context: any = null): any[] {
+  const result: any[] = [];
+
+  const visit = visitor.visit ?
+      (ast: Node) => visitor.visit !(ast, context) || ast.visit(visitor, context) :
+      (ast: Node) => ast.visit(visitor, context);
+  nodes.forEach(ast => {
+    const astResult = visit(ast);
+    if (astResult) {
+      result.push(astResult);
+    }
+  });
+  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/html_parser.ts b/packages/compiler/src/ml_parser/html_parser.ts
new file mode 100644
index 000000000000..60702f25b046
--- /dev/null
+++ b/packages/compiler/src/ml_parser/html_parser.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 {getHtmlTagDefinition} from './html_tags';
+import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from './interpolation_config';
+import {ParseTreeResult, Parser} from './parser';
+
+export {ParseTreeResult, TreeError} from './parser';
+
+export class HtmlParser extends Parser {
+  constructor() { super(getHtmlTagDefinition); }
+
+  parse(
+      source: string, url: string, parseExpansionForms: boolean = false,
+      interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): ParseTreeResult {
+    return super.parse(source, url, parseExpansionForms, interpolationConfig);
+  }
+}
diff --git a/packages/compiler/src/ml_parser/html_tags.ts b/packages/compiler/src/ml_parser/html_tags.ts
new file mode 100644
index 000000000000..9d3da64f4eb2
--- /dev/null
+++ b/packages/compiler/src/ml_parser/html_tags.ts
@@ -0,0 +1,131 @@
+/**
+ * @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 {TagContentType, TagDefinition} from './tags';
+
+export class HtmlTagDefinition implements TagDefinition {
+  private closedByChildren: {[key: string]: boolean} = {};
+
+  closedByParent: boolean = false;
+  // TODO(issue/24571): remove '!'.
+  requiredParents !: {[key: string]: boolean};
+  // TODO(issue/24571): remove '!'.
+  parentToAdd !: string;
+  implicitNamespacePrefix: string|null;
+  contentType: TagContentType;
+  isVoid: boolean;
+  ignoreFirstLf: boolean;
+  canSelfClose: boolean = false;
+
+  constructor(
+      {closedByChildren, requiredParents, implicitNamespacePrefix,
+       contentType = TagContentType.PARSABLE_DATA, closedByParent = false, isVoid = false,
+       ignoreFirstLf = false}: {
+        closedByChildren?: string[],
+        closedByParent?: boolean,
+        requiredParents?: string[],
+        implicitNamespacePrefix?: string,
+        contentType?: TagContentType,
+        isVoid?: boolean,
+        ignoreFirstLf?: boolean
+      } = {}) {
+    if (closedByChildren && closedByChildren.length > 0) {
+      closedByChildren.forEach(tagName => this.closedByChildren[tagName] = true);
+    }
+    this.isVoid = isVoid;
+    this.closedByParent = closedByParent || isVoid;
+    if (requiredParents && requiredParents.length > 0) {
+      this.requiredParents = {};
+      // The first parent is the list is automatically when none of the listed parents are present
+      this.parentToAdd = requiredParents[0];
+      requiredParents.forEach(tagName => this.requiredParents[tagName] = true);
+    }
+    this.implicitNamespacePrefix = implicitNamespacePrefix || null;
+    this.contentType = contentType;
+    this.ignoreFirstLf = ignoreFirstLf;
+  }
+
+  requireExtraParent(currentParent: string): boolean {
+    if (!this.requiredParents) {
+      return false;
+    }
+
+    if (!currentParent) {
+      return true;
+    }
+
+    const lcParent = currentParent.toLowerCase();
+    const isParentTemplate = lcParent === 'template' || currentParent === 'ng-template';
+    return !isParentTemplate && this.requiredParents[lcParent] != true;
+  }
+
+  isClosedByChild(name: string): boolean {
+    return this.isVoid || name.toLowerCase() in this.closedByChildren;
+  }
+}
+
+// see http://www.w3.org/TR/html51/syntax.html#optional-tags
+// This implementation does not fully conform to the HTML5 spec.
+const TAG_DEFINITIONS: {[key: string]: HtmlTagDefinition} = {
+  'base': new HtmlTagDefinition({isVoid: true}),
+  'meta': new HtmlTagDefinition({isVoid: true}),
+  'area': new HtmlTagDefinition({isVoid: true}),
+  'embed': new HtmlTagDefinition({isVoid: true}),
+  'link': new HtmlTagDefinition({isVoid: true}),
+  'img': new HtmlTagDefinition({isVoid: true}),
+  'input': new HtmlTagDefinition({isVoid: true}),
+  'param': new HtmlTagDefinition({isVoid: true}),
+  'hr': new HtmlTagDefinition({isVoid: true}),
+  'br': new HtmlTagDefinition({isVoid: true}),
+  'source': new HtmlTagDefinition({isVoid: true}),
+  'track': new HtmlTagDefinition({isVoid: true}),
+  'wbr': new HtmlTagDefinition({isVoid: true}),
+  'p': new HtmlTagDefinition({
+    closedByChildren: [
+      'address', 'article', 'aside', 'blockquote', 'div', 'dl',      'fieldset', 'footer', 'form',
+      'h1',      'h2',      'h3',    'h4',         'h5',  'h6',      'header',   'hgroup', 'hr',
+      'main',    'nav',     'ol',    'p',          'pre', 'section', 'table',    'ul'
+    ],
+    closedByParent: true
+  }),
+  'thead': new HtmlTagDefinition({closedByChildren: ['tbody', 'tfoot']}),
+  'tbody': new HtmlTagDefinition({closedByChildren: ['tbody', 'tfoot'], closedByParent: true}),
+  'tfoot': new HtmlTagDefinition({closedByChildren: ['tbody'], closedByParent: true}),
+  'tr': new HtmlTagDefinition({
+    closedByChildren: ['tr'],
+    requiredParents: ['tbody', 'tfoot', 'thead'],
+    closedByParent: true
+  }),
+  'td': new HtmlTagDefinition({closedByChildren: ['td', 'th'], closedByParent: true}),
+  'th': new HtmlTagDefinition({closedByChildren: ['td', 'th'], closedByParent: true}),
+  'col': new HtmlTagDefinition({requiredParents: ['colgroup'], isVoid: true}),
+  'svg': new HtmlTagDefinition({implicitNamespacePrefix: 'svg'}),
+  'math': new HtmlTagDefinition({implicitNamespacePrefix: 'math'}),
+  'li': new HtmlTagDefinition({closedByChildren: ['li'], closedByParent: true}),
+  'dt': new HtmlTagDefinition({closedByChildren: ['dt', 'dd']}),
+  'dd': new HtmlTagDefinition({closedByChildren: ['dt', 'dd'], closedByParent: true}),
+  'rb': new HtmlTagDefinition({closedByChildren: ['rb', 'rt', 'rtc', 'rp'], closedByParent: true}),
+  'rt': new HtmlTagDefinition({closedByChildren: ['rb', 'rt', 'rtc', 'rp'], closedByParent: true}),
+  'rtc': new HtmlTagDefinition({closedByChildren: ['rb', 'rtc', 'rp'], closedByParent: true}),
+  'rp': new HtmlTagDefinition({closedByChildren: ['rb', 'rt', 'rtc', 'rp'], closedByParent: true}),
+  'optgroup': new HtmlTagDefinition({closedByChildren: ['optgroup'], closedByParent: true}),
+  'option': new HtmlTagDefinition({closedByChildren: ['option', 'optgroup'], closedByParent: true}),
+  'pre': new HtmlTagDefinition({ignoreFirstLf: true}),
+  'listing': new HtmlTagDefinition({ignoreFirstLf: true}),
+  'style': new HtmlTagDefinition({contentType: TagContentType.RAW_TEXT}),
+  'script': new HtmlTagDefinition({contentType: TagContentType.RAW_TEXT}),
+  'title': new HtmlTagDefinition({contentType: TagContentType.ESCAPABLE_RAW_TEXT}),
+  'textarea':
+      new HtmlTagDefinition({contentType: TagContentType.ESCAPABLE_RAW_TEXT, ignoreFirstLf: true}),
+};
+
+const _DEFAULT_TAG_DEFINITION = new HtmlTagDefinition();
+
+export function getHtmlTagDefinition(tagName: string): HtmlTagDefinition {
+  return TAG_DEFINITIONS[tagName.toLowerCase()] || _DEFAULT_TAG_DEFINITION;
+}
diff --git a/packages/compiler/src/ml_parser/html_whitespaces.ts b/packages/compiler/src/ml_parser/html_whitespaces.ts
new file mode 100644
index 000000000000..f948a8481de8
--- /dev/null
+++ b/packages/compiler/src/ml_parser/html_whitespaces.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 * as html from './ast';
+import {ParseTreeResult} from './parser';
+import {NGSP_UNICODE} from './tags';
+
+export const PRESERVE_WS_ATTR_NAME = 'ngPreserveWhitespaces';
+
+const SKIP_WS_TRIM_TAGS = new Set(['pre', 'template', 'textarea', 'script', 'style']);
+
+// Equivalent to \s with \u00a0 (non-breaking space) excluded.
+// Based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
+const WS_CHARS = ' \f\n\r\t\v\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff';
+const NO_WS_REGEXP = new RegExp(`[^${WS_CHARS}]`);
+const WS_REPLACE_REGEXP = new RegExp(`[${WS_CHARS}]{2,}`, 'g');
+
+function hasPreserveWhitespacesAttr(attrs: html.Attribute[]): boolean {
+  return attrs.some((attr: html.Attribute) => attr.name === PRESERVE_WS_ATTR_NAME);
+}
+
+/**
+ * Angular Dart introduced &ngsp; as a placeholder for non-removable space, see:
+ * https://github.com/dart-lang/angular/blob/0bb611387d29d65b5af7f9d2515ab571fd3fbee4/_tests/test/compiler/preserve_whitespace_test.dart#L25-L32
+ * In Angular Dart &ngsp; is converted to the 0xE500 PUA (Private Use Areas) unicode character
+ * and later on replaced by a space. We are re-implementing the same idea here.
+ */
+export function replaceNgsp(value: string): string {
+  // lexer is replacing the &ngsp; pseudo-entity with NGSP_UNICODE
+  return value.replace(new RegExp(NGSP_UNICODE, 'g'), ' ');
+}
+
+/**
+ * This visitor can walk HTML parse tree and remove / trim text nodes using the following rules:
+ * - consider spaces, tabs and new lines as whitespace characters;
+ * - drop text nodes consisting of whitespace characters only;
+ * - for all other text nodes replace consecutive whitespace characters with one space;
+ * - convert &ngsp; pseudo-entity to a single space;
+ *
+ * Removal and trimming of whitespaces have positive performance impact (less code to generate
+ * while compiling templates, faster view creation). At the same time it can be "destructive"
+ * in some cases (whitespaces can influence layout). Because of the potential of breaking layout
+ * this visitor is not activated by default in Angular 5 and people need to explicitly opt-in for
+ * whitespace removal. The default option for whitespace removal will be revisited in Angular 6
+ * and might be changed to "on" by default.
+ */
+export class WhitespaceVisitor implements html.Visitor {
+  visitElement(element: html.Element, context: any): any {
+    if (SKIP_WS_TRIM_TAGS.has(element.name) || hasPreserveWhitespacesAttr(element.attrs)) {
+      // don't descent into elements where we need to preserve whitespaces
+      // but still visit all attributes to eliminate one used as a market to preserve WS
+      return new html.Element(
+          element.name, html.visitAll(this, element.attrs), element.children, element.sourceSpan,
+          element.startSourceSpan, element.endSourceSpan);
+    }
+
+    return new html.Element(
+        element.name, element.attrs, html.visitAll(this, element.children), element.sourceSpan,
+        element.startSourceSpan, element.endSourceSpan);
+  }
+
+  visitAttribute(attribute: html.Attribute, context: any): any {
+    return attribute.name !== PRESERVE_WS_ATTR_NAME ? attribute : null;
+  }
+
+  visitText(text: html.Text, context: any): any {
+    const isNotBlank = text.value.match(NO_WS_REGEXP);
+
+    if (isNotBlank) {
+      return new html.Text(
+          replaceNgsp(text.value).replace(WS_REPLACE_REGEXP, ' '), text.sourceSpan);
+    }
+
+    return null;
+  }
+
+  visitComment(comment: html.Comment, context: any): any { return comment; }
+
+  visitExpansion(expansion: html.Expansion, context: any): any { return expansion; }
+
+  visitExpansionCase(expansionCase: html.ExpansionCase, context: any): any { return expansionCase; }
+}
+
+export function removeWhitespaces(htmlAstWithErrors: ParseTreeResult): ParseTreeResult {
+  return new ParseTreeResult(
+      html.visitAll(new WhitespaceVisitor(), htmlAstWithErrors.rootNodes),
+      htmlAstWithErrors.errors);
+}
diff --git a/packages/compiler/src/ml_parser/icu_ast_expander.ts b/packages/compiler/src/ml_parser/icu_ast_expander.ts
new file mode 100644
index 000000000000..3e7d5d15ac84
--- /dev/null
+++ b/packages/compiler/src/ml_parser/icu_ast_expander.ts
@@ -0,0 +1,125 @@
+/**
+ * @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 {ParseError, ParseSourceSpan} from '../parse_util';
+
+import * as html from './ast';
+
+// http://cldr.unicode.org/index/cldr-spec/plural-rules
+const PLURAL_CASES: string[] = ['zero', 'one', 'two', 'few', 'many', 'other'];
+
+/**
+ * Expands special forms into elements.
+ *
+ * For example,
+ *
+ * ```
+ * { messages.length, plural,
+ *   =0 {zero}
+ *   =1 {one}
+ *   other {more than one}
+ * }
+ * ```
+ *
+ * will be expanded into
+ *
+ * ```
+ * <ng-container [ngPlural]="messages.length">
+ *   <ng-template ngPluralCase="=0">zero</ng-template>
+ *   <ng-template ngPluralCase="=1">one</ng-template>
+ *   <ng-template ngPluralCase="other">more than one</ng-template>
+ * </ng-container>
+ * ```
+ */
+export function expandNodes(nodes: html.Node[]): ExpansionResult {
+  const expander = new _Expander();
+  return new ExpansionResult(html.visitAll(expander, nodes), expander.isExpanded, expander.errors);
+}
+
+export class ExpansionResult {
+  constructor(public nodes: html.Node[], public expanded: boolean, public errors: ParseError[]) {}
+}
+
+export class ExpansionError extends ParseError {
+  constructor(span: ParseSourceSpan, errorMsg: string) { super(span, errorMsg); }
+}
+
+/**
+ * Expand expansion forms (plural, select) to directives
+ *
+ * @internal
+ */
+class _Expander implements html.Visitor {
+  isExpanded: boolean = false;
+  errors: ParseError[] = [];
+
+  visitElement(element: html.Element, context: any): any {
+    return new html.Element(
+        element.name, element.attrs, html.visitAll(this, element.children), element.sourceSpan,
+        element.startSourceSpan, element.endSourceSpan);
+  }
+
+  visitAttribute(attribute: html.Attribute, context: any): any { return attribute; }
+
+  visitText(text: html.Text, context: any): any { return text; }
+
+  visitComment(comment: html.Comment, context: any): any { return comment; }
+
+  visitExpansion(icu: html.Expansion, context: any): any {
+    this.isExpanded = true;
+    return icu.type == 'plural' ? _expandPluralForm(icu, this.errors) :
+                                  _expandDefaultForm(icu, this.errors);
+  }
+
+  visitExpansionCase(icuCase: html.ExpansionCase, context: any): any {
+    throw new Error('Should not be reached');
+  }
+}
+
+// Plural forms are expanded to `NgPlural` and `NgPluralCase`s
+function _expandPluralForm(ast: html.Expansion, errors: ParseError[]): html.Element {
+  const children = ast.cases.map(c => {
+    if (PLURAL_CASES.indexOf(c.value) == -1 && !c.value.match(/^=\d+$/)) {
+      errors.push(new ExpansionError(
+          c.valueSourceSpan,
+          `Plural cases should be "=<number>" or one of ${PLURAL_CASES.join(", ")}`));
+    }
+
+    const expansionResult = expandNodes(c.expression);
+    errors.push(...expansionResult.errors);
+
+    return new html.Element(
+        `ng-template`, [new html.Attribute('ngPluralCase', `${c.value}`, c.valueSourceSpan)],
+        expansionResult.nodes, c.sourceSpan, c.sourceSpan, c.sourceSpan);
+  });
+  const switchAttr = new html.Attribute('[ngPlural]', ast.switchValue, ast.switchValueSourceSpan);
+  return new html.Element(
+      'ng-container', [switchAttr], children, ast.sourceSpan, ast.sourceSpan, ast.sourceSpan);
+}
+
+// ICU messages (excluding plural form) are expanded to `NgSwitch`  and `NgSwitchCase`s
+function _expandDefaultForm(ast: html.Expansion, errors: ParseError[]): html.Element {
+  const children = ast.cases.map(c => {
+    const expansionResult = expandNodes(c.expression);
+    errors.push(...expansionResult.errors);
+
+    if (c.value === 'other') {
+      // other is the default case when no values match
+      return new html.Element(
+          `ng-template`, [new html.Attribute('ngSwitchDefault', '', c.valueSourceSpan)],
+          expansionResult.nodes, c.sourceSpan, c.sourceSpan, c.sourceSpan);
+    }
+
+    return new html.Element(
+        `ng-template`, [new html.Attribute('ngSwitchCase', `${c.value}`, c.valueSourceSpan)],
+        expansionResult.nodes, c.sourceSpan, c.sourceSpan, c.sourceSpan);
+  });
+  const switchAttr = new html.Attribute('[ngSwitch]', ast.switchValue, ast.switchValueSourceSpan);
+  return new html.Element(
+      'ng-container', [switchAttr], children, ast.sourceSpan, ast.sourceSpan, ast.sourceSpan);
+}
diff --git a/packages/compiler/src/ml_parser/interpolation_config.ts b/packages/compiler/src/ml_parser/interpolation_config.ts
new file mode 100644
index 000000000000..ff82082e5efd
--- /dev/null
+++ b/packages/compiler/src/ml_parser/interpolation_config.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 {assertInterpolationSymbols} from '../assertions';
+
+export class InterpolationConfig {
+  static fromArray(markers: [string, string]|null): InterpolationConfig {
+    if (!markers) {
+      return DEFAULT_INTERPOLATION_CONFIG;
+    }
+
+    assertInterpolationSymbols('interpolation', markers);
+    return new InterpolationConfig(markers[0], markers[1]);
+  }
+
+  constructor(public start: string, public end: string) {}
+}
+
+export const DEFAULT_INTERPOLATION_CONFIG: InterpolationConfig =
+    new InterpolationConfig('{{', '}}');
diff --git a/packages/compiler/src/ml_parser/lexer.ts b/packages/compiler/src/ml_parser/lexer.ts
new file mode 100644
index 000000000000..22fd6fc9947e
--- /dev/null
+++ b/packages/compiler/src/ml_parser/lexer.ts
@@ -0,0 +1,715 @@
+/**
+ * @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 chars from '../chars';
+import {ParseError, ParseLocation, ParseSourceFile, ParseSourceSpan} from '../parse_util';
+
+import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from './interpolation_config';
+import {NAMED_ENTITIES, TagContentType, TagDefinition} from './tags';
+
+export enum TokenType {
+  TAG_OPEN_START,
+  TAG_OPEN_END,
+  TAG_OPEN_END_VOID,
+  TAG_CLOSE,
+  TEXT,
+  ESCAPABLE_RAW_TEXT,
+  RAW_TEXT,
+  COMMENT_START,
+  COMMENT_END,
+  CDATA_START,
+  CDATA_END,
+  ATTR_NAME,
+  ATTR_VALUE,
+  DOC_TYPE,
+  EXPANSION_FORM_START,
+  EXPANSION_CASE_VALUE,
+  EXPANSION_CASE_EXP_START,
+  EXPANSION_CASE_EXP_END,
+  EXPANSION_FORM_END,
+  EOF
+}
+
+export class Token {
+  constructor(public type: TokenType, public parts: string[], public sourceSpan: ParseSourceSpan) {}
+}
+
+export class TokenError extends ParseError {
+  constructor(errorMsg: string, public tokenType: TokenType, span: ParseSourceSpan) {
+    super(span, errorMsg);
+  }
+}
+
+export class TokenizeResult {
+  constructor(public tokens: Token[], public errors: TokenError[]) {}
+}
+
+export function tokenize(
+    source: string, url: string, getTagDefinition: (tagName: string) => TagDefinition,
+    tokenizeExpansionForms: boolean = false,
+    interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): TokenizeResult {
+  return new _Tokenizer(
+             new ParseSourceFile(source, url), getTagDefinition, tokenizeExpansionForms,
+             interpolationConfig)
+      .tokenize();
+}
+
+const _CR_OR_CRLF_REGEXP = /\r\n?/g;
+
+function _unexpectedCharacterErrorMsg(charCode: number): string {
+  const char = charCode === chars.$EOF ? 'EOF' : String.fromCharCode(charCode);
+  return `Unexpected character "${char}"`;
+}
+
+function _unknownEntityErrorMsg(entitySrc: string): string {
+  return `Unknown entity "${entitySrc}" - use the "&#<decimal>;" or  "&#x<hex>;" syntax`;
+}
+
+class _ControlFlowError {
+  constructor(public error: TokenError) {}
+}
+
+// See http://www.w3.org/TR/html51/syntax.html#writing
+class _Tokenizer {
+  private _input: string;
+  private _length: number;
+  // Note: this is always lowercase!
+  private _peek: number = -1;
+  private _nextPeek: number = -1;
+  private _index: number = -1;
+  private _line: number = 0;
+  private _column: number = -1;
+  // TODO(issue/24571): remove '!'.
+  private _currentTokenStart !: ParseLocation;
+  // TODO(issue/24571): remove '!'.
+  private _currentTokenType !: TokenType;
+  private _expansionCaseStack: TokenType[] = [];
+  private _inInterpolation: boolean = false;
+
+  tokens: Token[] = [];
+  errors: TokenError[] = [];
+
+  /**
+   * @param _file The html source
+   * @param _getTagDefinition
+   * @param _tokenizeIcu Whether to tokenize ICU messages (considered as text nodes when false)
+   * @param _interpolationConfig
+   */
+  constructor(
+      private _file: ParseSourceFile, private _getTagDefinition: (tagName: string) => TagDefinition,
+      private _tokenizeIcu: boolean,
+      private _interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG) {
+    this._input = _file.content;
+    this._length = _file.content.length;
+    this._advance();
+  }
+
+  private _processCarriageReturns(content: string): string {
+    // http://www.w3.org/TR/html5/syntax.html#preprocessing-the-input-stream
+    // In order to keep the original position in the source, we can not
+    // pre-process it.
+    // Instead CRs are processed right before instantiating the tokens.
+    return content.replace(_CR_OR_CRLF_REGEXP, '\n');
+  }
+
+  tokenize(): TokenizeResult {
+    while (this._peek !== chars.$EOF) {
+      const start = this._getLocation();
+      try {
+        if (this._attemptCharCode(chars.$LT)) {
+          if (this._attemptCharCode(chars.$BANG)) {
+            if (this._attemptCharCode(chars.$LBRACKET)) {
+              this._consumeCdata(start);
+            } else if (this._attemptCharCode(chars.$MINUS)) {
+              this._consumeComment(start);
+            } else {
+              this._consumeDocType(start);
+            }
+          } else if (this._attemptCharCode(chars.$SLASH)) {
+            this._consumeTagClose(start);
+          } else {
+            this._consumeTagOpen(start);
+          }
+        } else if (!(this._tokenizeIcu && this._tokenizeExpansionForm())) {
+          this._consumeText();
+        }
+      } catch (e) {
+        if (e instanceof _ControlFlowError) {
+          this.errors.push(e.error);
+        } else {
+          throw e;
+        }
+      }
+    }
+    this._beginToken(TokenType.EOF);
+    this._endToken([]);
+    return new TokenizeResult(mergeTextTokens(this.tokens), this.errors);
+  }
+
+  /**
+   * @returns whether an ICU token has been created
+   * @internal
+   */
+  private _tokenizeExpansionForm(): boolean {
+    if (isExpansionFormStart(this._input, this._index, this._interpolationConfig)) {
+      this._consumeExpansionFormStart();
+      return true;
+    }
+
+    if (isExpansionCaseStart(this._peek) && this._isInExpansionForm()) {
+      this._consumeExpansionCaseStart();
+      return true;
+    }
+
+    if (this._peek === chars.$RBRACE) {
+      if (this._isInExpansionCase()) {
+        this._consumeExpansionCaseEnd();
+        return true;
+      }
+
+      if (this._isInExpansionForm()) {
+        this._consumeExpansionFormEnd();
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private _getLocation(): ParseLocation {
+    return new ParseLocation(this._file, this._index, this._line, this._column);
+  }
+
+  private _getSpan(
+      start: ParseLocation = this._getLocation(),
+      end: ParseLocation = this._getLocation()): ParseSourceSpan {
+    return new ParseSourceSpan(start, end);
+  }
+
+  private _beginToken(type: TokenType, start: ParseLocation = this._getLocation()) {
+    this._currentTokenStart = start;
+    this._currentTokenType = type;
+  }
+
+  private _endToken(parts: string[], end: ParseLocation = this._getLocation()): Token {
+    const token =
+        new Token(this._currentTokenType, parts, new ParseSourceSpan(this._currentTokenStart, end));
+    this.tokens.push(token);
+    this._currentTokenStart = null !;
+    this._currentTokenType = null !;
+    return token;
+  }
+
+  private _createError(msg: string, span: ParseSourceSpan): _ControlFlowError {
+    if (this._isInExpansionForm()) {
+      msg += ` (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)`;
+    }
+    const error = new TokenError(msg, this._currentTokenType, span);
+    this._currentTokenStart = null !;
+    this._currentTokenType = null !;
+    return new _ControlFlowError(error);
+  }
+
+  private _advance() {
+    if (this._index >= this._length) {
+      throw this._createError(_unexpectedCharacterErrorMsg(chars.$EOF), this._getSpan());
+    }
+    if (this._peek === chars.$LF) {
+      this._line++;
+      this._column = 0;
+    } else if (this._peek !== chars.$LF && this._peek !== chars.$CR) {
+      this._column++;
+    }
+    this._index++;
+    this._peek = this._index >= this._length ? chars.$EOF : this._input.charCodeAt(this._index);
+    this._nextPeek =
+        this._index + 1 >= this._length ? chars.$EOF : this._input.charCodeAt(this._index + 1);
+  }
+
+  private _attemptCharCode(charCode: number): boolean {
+    if (this._peek === charCode) {
+      this._advance();
+      return true;
+    }
+    return false;
+  }
+
+  private _attemptCharCodeCaseInsensitive(charCode: number): boolean {
+    if (compareCharCodeCaseInsensitive(this._peek, charCode)) {
+      this._advance();
+      return true;
+    }
+    return false;
+  }
+
+  private _requireCharCode(charCode: number) {
+    const location = this._getLocation();
+    if (!this._attemptCharCode(charCode)) {
+      throw this._createError(
+          _unexpectedCharacterErrorMsg(this._peek), this._getSpan(location, location));
+    }
+  }
+
+  private _attemptStr(chars: string): boolean {
+    const len = chars.length;
+    if (this._index + len > this._length) {
+      return false;
+    }
+    const initialPosition = this._savePosition();
+    for (let i = 0; i < len; i++) {
+      if (!this._attemptCharCode(chars.charCodeAt(i))) {
+        // If attempting to parse the string fails, we want to reset the parser
+        // to where it was before the attempt
+        this._restorePosition(initialPosition);
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private _attemptStrCaseInsensitive(chars: string): boolean {
+    for (let i = 0; i < chars.length; i++) {
+      if (!this._attemptCharCodeCaseInsensitive(chars.charCodeAt(i))) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private _requireStr(chars: string) {
+    const location = this._getLocation();
+    if (!this._attemptStr(chars)) {
+      throw this._createError(_unexpectedCharacterErrorMsg(this._peek), this._getSpan(location));
+    }
+  }
+
+  private _attemptCharCodeUntilFn(predicate: (code: number) => boolean) {
+    while (!predicate(this._peek)) {
+      this._advance();
+    }
+  }
+
+  private _requireCharCodeUntilFn(predicate: (code: number) => boolean, len: number) {
+    const start = this._getLocation();
+    this._attemptCharCodeUntilFn(predicate);
+    if (this._index - start.offset < len) {
+      throw this._createError(
+          _unexpectedCharacterErrorMsg(this._peek), this._getSpan(start, start));
+    }
+  }
+
+  private _attemptUntilChar(char: number) {
+    while (this._peek !== char) {
+      this._advance();
+    }
+  }
+
+  private _readChar(decodeEntities: boolean): string {
+    if (decodeEntities && this._peek === chars.$AMPERSAND) {
+      return this._decodeEntity();
+    } else {
+      const index = this._index;
+      this._advance();
+      return this._input[index];
+    }
+  }
+
+  private _decodeEntity(): string {
+    const start = this._getLocation();
+    this._advance();
+    if (this._attemptCharCode(chars.$HASH)) {
+      const isHex = this._attemptCharCode(chars.$x) || this._attemptCharCode(chars.$X);
+      const numberStart = this._getLocation().offset;
+      this._attemptCharCodeUntilFn(isDigitEntityEnd);
+      if (this._peek != chars.$SEMICOLON) {
+        throw this._createError(_unexpectedCharacterErrorMsg(this._peek), this._getSpan());
+      }
+      this._advance();
+      const strNum = this._input.substring(numberStart, this._index - 1);
+      try {
+        const charCode = parseInt(strNum, isHex ? 16 : 10);
+        return String.fromCharCode(charCode);
+      } catch (e) {
+        const entity = this._input.substring(start.offset + 1, this._index - 1);
+        throw this._createError(_unknownEntityErrorMsg(entity), this._getSpan(start));
+      }
+    } else {
+      const startPosition = this._savePosition();
+      this._attemptCharCodeUntilFn(isNamedEntityEnd);
+      if (this._peek != chars.$SEMICOLON) {
+        this._restorePosition(startPosition);
+        return '&';
+      }
+      this._advance();
+      const name = this._input.substring(start.offset + 1, this._index - 1);
+      const char = NAMED_ENTITIES[name];
+      if (!char) {
+        throw this._createError(_unknownEntityErrorMsg(name), this._getSpan(start));
+      }
+      return char;
+    }
+  }
+
+  private _consumeRawText(
+      decodeEntities: boolean, firstCharOfEnd: number, attemptEndRest: () => boolean): Token {
+    let tagCloseStart: ParseLocation;
+    const textStart = this._getLocation();
+    this._beginToken(decodeEntities ? TokenType.ESCAPABLE_RAW_TEXT : TokenType.RAW_TEXT, textStart);
+    const parts: string[] = [];
+    while (true) {
+      tagCloseStart = this._getLocation();
+      if (this._attemptCharCode(firstCharOfEnd) && attemptEndRest()) {
+        break;
+      }
+      if (this._index > tagCloseStart.offset) {
+        // add the characters consumed by the previous if statement to the output
+        parts.push(this._input.substring(tagCloseStart.offset, this._index));
+      }
+      while (this._peek !== firstCharOfEnd) {
+        parts.push(this._readChar(decodeEntities));
+      }
+    }
+    return this._endToken([this._processCarriageReturns(parts.join(''))], tagCloseStart);
+  }
+
+  private _consumeComment(start: ParseLocation) {
+    this._beginToken(TokenType.COMMENT_START, start);
+    this._requireCharCode(chars.$MINUS);
+    this._endToken([]);
+    const textToken = this._consumeRawText(false, chars.$MINUS, () => this._attemptStr('->'));
+    this._beginToken(TokenType.COMMENT_END, textToken.sourceSpan.end);
+    this._endToken([]);
+  }
+
+  private _consumeCdata(start: ParseLocation) {
+    this._beginToken(TokenType.CDATA_START, start);
+    this._requireStr('CDATA[');
+    this._endToken([]);
+    const textToken = this._consumeRawText(false, chars.$RBRACKET, () => this._attemptStr(']>'));
+    this._beginToken(TokenType.CDATA_END, textToken.sourceSpan.end);
+    this._endToken([]);
+  }
+
+  private _consumeDocType(start: ParseLocation) {
+    this._beginToken(TokenType.DOC_TYPE, start);
+    this._attemptUntilChar(chars.$GT);
+    this._advance();
+    this._endToken([this._input.substring(start.offset + 2, this._index - 1)]);
+  }
+
+  private _consumePrefixAndName(): string[] {
+    const nameOrPrefixStart = this._index;
+    let prefix: string = null !;
+    while (this._peek !== chars.$COLON && !isPrefixEnd(this._peek)) {
+      this._advance();
+    }
+    let nameStart: number;
+    if (this._peek === chars.$COLON) {
+      this._advance();
+      prefix = this._input.substring(nameOrPrefixStart, this._index - 1);
+      nameStart = this._index;
+    } else {
+      nameStart = nameOrPrefixStart;
+    }
+    this._requireCharCodeUntilFn(isNameEnd, this._index === nameStart ? 1 : 0);
+    const name = this._input.substring(nameStart, this._index);
+    return [prefix, name];
+  }
+
+  private _consumeTagOpen(start: ParseLocation) {
+    const savedPos = this._savePosition();
+    let tagName: string;
+    let lowercaseTagName: string;
+    try {
+      if (!chars.isAsciiLetter(this._peek)) {
+        throw this._createError(_unexpectedCharacterErrorMsg(this._peek), this._getSpan());
+      }
+      const nameStart = this._index;
+      this._consumeTagOpenStart(start);
+      tagName = this._input.substring(nameStart, this._index);
+      lowercaseTagName = tagName.toLowerCase();
+      this._attemptCharCodeUntilFn(isNotWhitespace);
+      while (this._peek !== chars.$SLASH && this._peek !== chars.$GT) {
+        this._consumeAttributeName();
+        this._attemptCharCodeUntilFn(isNotWhitespace);
+        if (this._attemptCharCode(chars.$EQ)) {
+          this._attemptCharCodeUntilFn(isNotWhitespace);
+          this._consumeAttributeValue();
+        }
+        this._attemptCharCodeUntilFn(isNotWhitespace);
+      }
+      this._consumeTagOpenEnd();
+    } catch (e) {
+      if (e instanceof _ControlFlowError) {
+        // When the start tag is invalid, assume we want a "<"
+        this._restorePosition(savedPos);
+        // Back to back text tokens are merged at the end
+        this._beginToken(TokenType.TEXT, start);
+        this._endToken(['<']);
+        return;
+      }
+
+      throw e;
+    }
+
+    const contentTokenType = this._getTagDefinition(tagName).contentType;
+
+    if (contentTokenType === TagContentType.RAW_TEXT) {
+      this._consumeRawTextWithTagClose(lowercaseTagName, false);
+    } else if (contentTokenType === TagContentType.ESCAPABLE_RAW_TEXT) {
+      this._consumeRawTextWithTagClose(lowercaseTagName, true);
+    }
+  }
+
+  private _consumeRawTextWithTagClose(lowercaseTagName: string, decodeEntities: boolean) {
+    const textToken = this._consumeRawText(decodeEntities, chars.$LT, () => {
+      if (!this._attemptCharCode(chars.$SLASH)) return false;
+      this._attemptCharCodeUntilFn(isNotWhitespace);
+      if (!this._attemptStrCaseInsensitive(lowercaseTagName)) return false;
+      this._attemptCharCodeUntilFn(isNotWhitespace);
+      return this._attemptCharCode(chars.$GT);
+    });
+    this._beginToken(TokenType.TAG_CLOSE, textToken.sourceSpan.end);
+    this._endToken([null !, lowercaseTagName]);
+  }
+
+  private _consumeTagOpenStart(start: ParseLocation) {
+    this._beginToken(TokenType.TAG_OPEN_START, start);
+    const parts = this._consumePrefixAndName();
+    this._endToken(parts);
+  }
+
+  private _consumeAttributeName() {
+    this._beginToken(TokenType.ATTR_NAME);
+    const prefixAndName = this._consumePrefixAndName();
+    this._endToken(prefixAndName);
+  }
+
+  private _consumeAttributeValue() {
+    this._beginToken(TokenType.ATTR_VALUE);
+    let value: string;
+    if (this._peek === chars.$SQ || this._peek === chars.$DQ) {
+      const quoteChar = this._peek;
+      this._advance();
+      const parts: string[] = [];
+      while (this._peek !== quoteChar) {
+        parts.push(this._readChar(true));
+      }
+      value = parts.join('');
+      this._advance();
+    } else {
+      const valueStart = this._index;
+      this._requireCharCodeUntilFn(isNameEnd, 1);
+      value = this._input.substring(valueStart, this._index);
+    }
+    this._endToken([this._processCarriageReturns(value)]);
+  }
+
+  private _consumeTagOpenEnd() {
+    const tokenType =
+        this._attemptCharCode(chars.$SLASH) ? TokenType.TAG_OPEN_END_VOID : TokenType.TAG_OPEN_END;
+    this._beginToken(tokenType);
+    this._requireCharCode(chars.$GT);
+    this._endToken([]);
+  }
+
+  private _consumeTagClose(start: ParseLocation) {
+    this._beginToken(TokenType.TAG_CLOSE, start);
+    this._attemptCharCodeUntilFn(isNotWhitespace);
+    const prefixAndName = this._consumePrefixAndName();
+    this._attemptCharCodeUntilFn(isNotWhitespace);
+    this._requireCharCode(chars.$GT);
+    this._endToken(prefixAndName);
+  }
+
+  private _consumeExpansionFormStart() {
+    this._beginToken(TokenType.EXPANSION_FORM_START, this._getLocation());
+    this._requireCharCode(chars.$LBRACE);
+    this._endToken([]);
+
+    this._expansionCaseStack.push(TokenType.EXPANSION_FORM_START);
+
+    this._beginToken(TokenType.RAW_TEXT, this._getLocation());
+    const condition = this._readUntil(chars.$COMMA);
+    this._endToken([condition], this._getLocation());
+    this._requireCharCode(chars.$COMMA);
+    this._attemptCharCodeUntilFn(isNotWhitespace);
+
+    this._beginToken(TokenType.RAW_TEXT, this._getLocation());
+    const type = this._readUntil(chars.$COMMA);
+    this._endToken([type], this._getLocation());
+    this._requireCharCode(chars.$COMMA);
+    this._attemptCharCodeUntilFn(isNotWhitespace);
+  }
+
+  private _consumeExpansionCaseStart() {
+    this._beginToken(TokenType.EXPANSION_CASE_VALUE, this._getLocation());
+    const value = this._readUntil(chars.$LBRACE).trim();
+    this._endToken([value], this._getLocation());
+    this._attemptCharCodeUntilFn(isNotWhitespace);
+
+    this._beginToken(TokenType.EXPANSION_CASE_EXP_START, this._getLocation());
+    this._requireCharCode(chars.$LBRACE);
+    this._endToken([], this._getLocation());
+    this._attemptCharCodeUntilFn(isNotWhitespace);
+
+    this._expansionCaseStack.push(TokenType.EXPANSION_CASE_EXP_START);
+  }
+
+  private _consumeExpansionCaseEnd() {
+    this._beginToken(TokenType.EXPANSION_CASE_EXP_END, this._getLocation());
+    this._requireCharCode(chars.$RBRACE);
+    this._endToken([], this._getLocation());
+    this._attemptCharCodeUntilFn(isNotWhitespace);
+
+    this._expansionCaseStack.pop();
+  }
+
+  private _consumeExpansionFormEnd() {
+    this._beginToken(TokenType.EXPANSION_FORM_END, this._getLocation());
+    this._requireCharCode(chars.$RBRACE);
+    this._endToken([]);
+
+    this._expansionCaseStack.pop();
+  }
+
+  private _consumeText() {
+    const start = this._getLocation();
+    this._beginToken(TokenType.TEXT, start);
+    const parts: string[] = [];
+
+    do {
+      if (this._interpolationConfig && this._attemptStr(this._interpolationConfig.start)) {
+        parts.push(this._interpolationConfig.start);
+        this._inInterpolation = true;
+      } else if (
+          this._interpolationConfig && this._inInterpolation &&
+          this._attemptStr(this._interpolationConfig.end)) {
+        parts.push(this._interpolationConfig.end);
+        this._inInterpolation = false;
+      } else {
+        parts.push(this._readChar(true));
+      }
+    } while (!this._isTextEnd());
+
+    this._endToken([this._processCarriageReturns(parts.join(''))]);
+  }
+
+  private _isTextEnd(): boolean {
+    if (this._peek === chars.$LT || this._peek === chars.$EOF) {
+      return true;
+    }
+
+    if (this._tokenizeIcu && !this._inInterpolation) {
+      if (isExpansionFormStart(this._input, this._index, this._interpolationConfig)) {
+        // start of an expansion form
+        return true;
+      }
+
+      if (this._peek === chars.$RBRACE && this._isInExpansionCase()) {
+        // end of and expansion case
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private _savePosition(): [number, number, number, number, number] {
+    return [this._peek, this._index, this._column, this._line, this.tokens.length];
+  }
+
+  private _readUntil(char: number): string {
+    const start = this._index;
+    this._attemptUntilChar(char);
+    return this._input.substring(start, this._index);
+  }
+
+  private _restorePosition(position: [number, number, number, number, number]): void {
+    this._peek = position[0];
+    this._index = position[1];
+    this._column = position[2];
+    this._line = position[3];
+    const nbTokens = position[4];
+    if (nbTokens < this.tokens.length) {
+      // remove any extra tokens
+      this.tokens = this.tokens.slice(0, nbTokens);
+    }
+  }
+
+  private _isInExpansionCase(): boolean {
+    return this._expansionCaseStack.length > 0 &&
+        this._expansionCaseStack[this._expansionCaseStack.length - 1] ===
+        TokenType.EXPANSION_CASE_EXP_START;
+  }
+
+  private _isInExpansionForm(): boolean {
+    return this._expansionCaseStack.length > 0 &&
+        this._expansionCaseStack[this._expansionCaseStack.length - 1] ===
+        TokenType.EXPANSION_FORM_START;
+  }
+}
+
+function isNotWhitespace(code: number): boolean {
+  return !chars.isWhitespace(code) || code === chars.$EOF;
+}
+
+function isNameEnd(code: number): boolean {
+  return chars.isWhitespace(code) || code === chars.$GT || code === chars.$SLASH ||
+      code === chars.$SQ || code === chars.$DQ || code === chars.$EQ;
+}
+
+function isPrefixEnd(code: number): boolean {
+  return (code < chars.$a || chars.$z < code) && (code < chars.$A || chars.$Z < code) &&
+      (code < chars.$0 || code > chars.$9);
+}
+
+function isDigitEntityEnd(code: number): boolean {
+  return code == chars.$SEMICOLON || code == chars.$EOF || !chars.isAsciiHexDigit(code);
+}
+
+function isNamedEntityEnd(code: number): boolean {
+  return code == chars.$SEMICOLON || code == chars.$EOF || !chars.isAsciiLetter(code);
+}
+
+function isExpansionFormStart(
+    input: string, offset: number, interpolationConfig: InterpolationConfig): boolean {
+  const isInterpolationStart =
+      interpolationConfig ? input.indexOf(interpolationConfig.start, offset) == offset : false;
+
+  return input.charCodeAt(offset) == chars.$LBRACE && !isInterpolationStart;
+}
+
+function isExpansionCaseStart(peek: number): boolean {
+  return peek === chars.$EQ || chars.isAsciiLetter(peek) || chars.isDigit(peek);
+}
+
+function compareCharCodeCaseInsensitive(code1: number, code2: number): boolean {
+  return toUpperCaseCharCode(code1) == toUpperCaseCharCode(code2);
+}
+
+function toUpperCaseCharCode(code: number): number {
+  return code >= chars.$a && code <= chars.$z ? code - chars.$a + chars.$A : code;
+}
+
+function mergeTextTokens(srcTokens: Token[]): Token[] {
+  const dstTokens: Token[] = [];
+  let lastDstToken: Token|undefined = undefined;
+  for (let i = 0; i < srcTokens.length; i++) {
+    const token = srcTokens[i];
+    if (lastDstToken && lastDstToken.type == TokenType.TEXT && token.type == TokenType.TEXT) {
+      lastDstToken.parts[0] += token.parts[0];
+      lastDstToken.sourceSpan.end = token.sourceSpan.end;
+    } else {
+      lastDstToken = token;
+      dstTokens.push(lastDstToken);
+    }
+  }
+
+  return dstTokens;
+}
diff --git a/packages/compiler/src/ml_parser/parser.ts b/packages/compiler/src/ml_parser/parser.ts
new file mode 100644
index 000000000000..3a06bc182dfa
--- /dev/null
+++ b/packages/compiler/src/ml_parser/parser.ts
@@ -0,0 +1,415 @@
+/**
+ * @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 {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, isNgContainer, mergeNsAndName} from './tags';
+
+export class TreeError extends ParseError {
+  static create(elementName: string|null, span: ParseSourceSpan, msg: string): TreeError {
+    return new TreeError(elementName, span, msg);
+  }
+
+  constructor(public elementName: string|null, span: ParseSourceSpan, msg: string) {
+    super(span, msg);
+  }
+}
+
+export class ParseTreeResult {
+  constructor(public rootNodes: html.Node[], public errors: ParseError[]) {}
+}
+
+export class Parser {
+  constructor(public getTagDefinition: (tagName: string) => TagDefinition) {}
+
+  parse(
+      source: string, url: string, parseExpansionForms: boolean = false,
+      interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): ParseTreeResult {
+    const tokensAndErrors =
+        lex.tokenize(source, url, this.getTagDefinition, parseExpansionForms, interpolationConfig);
+
+    const treeAndErrors = new _TreeBuilder(tokensAndErrors.tokens, this.getTagDefinition).build();
+
+    return new ParseTreeResult(
+        treeAndErrors.rootNodes,
+        (<ParseError[]>tokensAndErrors.errors).concat(treeAndErrors.errors));
+  }
+}
+
+class _TreeBuilder {
+  private _index: number = -1;
+  // TODO(issue/24571): remove '!'.
+  private _peek !: lex.Token;
+
+  private _rootNodes: html.Node[] = [];
+  private _errors: TreeError[] = [];
+
+  private _elementStack: html.Element[] = [];
+
+  constructor(
+      private tokens: lex.Token[], private getTagDefinition: (tagName: string) => TagDefinition) {
+    this._advance();
+  }
+
+  build(): ParseTreeResult {
+    while (this._peek.type !== lex.TokenType.EOF) {
+      if (this._peek.type === lex.TokenType.TAG_OPEN_START) {
+        this._consumeStartTag(this._advance());
+      } else if (this._peek.type === lex.TokenType.TAG_CLOSE) {
+        this._consumeEndTag(this._advance());
+      } else if (this._peek.type === lex.TokenType.CDATA_START) {
+        this._closeVoidElement();
+        this._consumeCdata(this._advance());
+      } else if (this._peek.type === lex.TokenType.COMMENT_START) {
+        this._closeVoidElement();
+        this._consumeComment(this._advance());
+      } else if (
+          this._peek.type === lex.TokenType.TEXT || this._peek.type === lex.TokenType.RAW_TEXT ||
+          this._peek.type === lex.TokenType.ESCAPABLE_RAW_TEXT) {
+        this._closeVoidElement();
+        this._consumeText(this._advance());
+      } else if (this._peek.type === lex.TokenType.EXPANSION_FORM_START) {
+        this._consumeExpansion(this._advance());
+      } else {
+        // Skip all other tokens...
+        this._advance();
+      }
+    }
+    return new ParseTreeResult(this._rootNodes, this._errors);
+  }
+
+  private _advance(): lex.Token {
+    const prev = this._peek;
+    if (this._index < this.tokens.length - 1) {
+      // Note: there is always an EOF token at the end
+      this._index++;
+    }
+    this._peek = this.tokens[this._index];
+    return prev;
+  }
+
+  private _advanceIf(type: lex.TokenType): lex.Token|null {
+    if (this._peek.type === type) {
+      return this._advance();
+    }
+    return null;
+  }
+
+  private _consumeCdata(startToken: lex.Token) {
+    this._consumeText(this._advance());
+    this._advanceIf(lex.TokenType.CDATA_END);
+  }
+
+  private _consumeComment(token: lex.Token) {
+    const text = this._advanceIf(lex.TokenType.RAW_TEXT);
+    this._advanceIf(lex.TokenType.COMMENT_END);
+    const value = text != null ? text.parts[0].trim() : null;
+    this._addToParent(new html.Comment(value, token.sourceSpan));
+  }
+
+  private _consumeExpansion(token: lex.Token) {
+    const switchValue = this._advance();
+
+    const type = this._advance();
+    const cases: html.ExpansionCase[] = [];
+
+    // read =
+    while (this._peek.type === lex.TokenType.EXPANSION_CASE_VALUE) {
+      const expCase = this._parseExpansionCase();
+      if (!expCase) return;  // error
+      cases.push(expCase);
+    }
+
+    // read the final }
+    if (this._peek.type !== lex.TokenType.EXPANSION_FORM_END) {
+      this._errors.push(
+          TreeError.create(null, this._peek.sourceSpan, `Invalid ICU message. Missing '}'.`));
+      return;
+    }
+    const sourceSpan = new ParseSourceSpan(token.sourceSpan.start, this._peek.sourceSpan.end);
+    this._addToParent(new html.Expansion(
+        switchValue.parts[0], type.parts[0], cases, sourceSpan, switchValue.sourceSpan));
+
+    this._advance();
+  }
+
+  private _parseExpansionCase(): html.ExpansionCase|null {
+    const value = this._advance();
+
+    // read {
+    if (this._peek.type !== lex.TokenType.EXPANSION_CASE_EXP_START) {
+      this._errors.push(
+          TreeError.create(null, this._peek.sourceSpan, `Invalid ICU message. Missing '{'.`));
+      return null;
+    }
+
+    // read until }
+    const start = this._advance();
+
+    const exp = this._collectExpansionExpTokens(start);
+    if (!exp) return null;
+
+    const end = this._advance();
+    exp.push(new lex.Token(lex.TokenType.EOF, [], end.sourceSpan));
+
+    // parse everything in between { and }
+    const parsedExp = new _TreeBuilder(exp, this.getTagDefinition).build();
+    if (parsedExp.errors.length > 0) {
+      this._errors = this._errors.concat(<TreeError[]>parsedExp.errors);
+      return null;
+    }
+
+    const sourceSpan = new ParseSourceSpan(value.sourceSpan.start, end.sourceSpan.end);
+    const expSourceSpan = new ParseSourceSpan(start.sourceSpan.start, end.sourceSpan.end);
+    return new html.ExpansionCase(
+        value.parts[0], parsedExp.rootNodes, sourceSpan, value.sourceSpan, expSourceSpan);
+  }
+
+  private _collectExpansionExpTokens(start: lex.Token): lex.Token[]|null {
+    const exp: lex.Token[] = [];
+    const expansionFormStack = [lex.TokenType.EXPANSION_CASE_EXP_START];
+
+    while (true) {
+      if (this._peek.type === lex.TokenType.EXPANSION_FORM_START ||
+          this._peek.type === lex.TokenType.EXPANSION_CASE_EXP_START) {
+        expansionFormStack.push(this._peek.type);
+      }
+
+      if (this._peek.type === lex.TokenType.EXPANSION_CASE_EXP_END) {
+        if (lastOnStack(expansionFormStack, lex.TokenType.EXPANSION_CASE_EXP_START)) {
+          expansionFormStack.pop();
+          if (expansionFormStack.length == 0) return exp;
+
+        } else {
+          this._errors.push(
+              TreeError.create(null, start.sourceSpan, `Invalid ICU message. Missing '}'.`));
+          return null;
+        }
+      }
+
+      if (this._peek.type === lex.TokenType.EXPANSION_FORM_END) {
+        if (lastOnStack(expansionFormStack, lex.TokenType.EXPANSION_FORM_START)) {
+          expansionFormStack.pop();
+        } else {
+          this._errors.push(
+              TreeError.create(null, start.sourceSpan, `Invalid ICU message. Missing '}'.`));
+          return null;
+        }
+      }
+
+      if (this._peek.type === lex.TokenType.EOF) {
+        this._errors.push(
+            TreeError.create(null, start.sourceSpan, `Invalid ICU message. Missing '}'.`));
+        return null;
+      }
+
+      exp.push(this._advance());
+    }
+  }
+
+  private _consumeText(token: lex.Token) {
+    let text = token.parts[0];
+    if (text.length > 0 && text[0] == '\n') {
+      const parent = this._getParentElement();
+      if (parent != null && parent.children.length == 0 &&
+          this.getTagDefinition(parent.name).ignoreFirstLf) {
+        text = text.substring(1);
+      }
+    }
+
+    if (text.length > 0) {
+      this._addToParent(new html.Text(text, token.sourceSpan));
+    }
+  }
+
+  private _closeVoidElement(): void {
+    const el = this._getParentElement();
+    if (el && this.getTagDefinition(el.name).isVoid) {
+      this._elementStack.pop();
+    }
+  }
+
+  private _consumeStartTag(startTagToken: lex.Token) {
+    const prefix = startTagToken.parts[0];
+    const name = startTagToken.parts[1];
+    const attrs: html.Attribute[] = [];
+    while (this._peek.type === lex.TokenType.ATTR_NAME) {
+      attrs.push(this._consumeAttr(this._advance()));
+    }
+    const fullName = this._getElementFullName(prefix, name, this._getParentElement());
+    let selfClosing = false;
+    // Note: There could have been a tokenizer error
+    // so that we don't get a token for the end tag...
+    if (this._peek.type === lex.TokenType.TAG_OPEN_END_VOID) {
+      this._advance();
+      selfClosing = true;
+      const tagDef = this.getTagDefinition(fullName);
+      if (!(tagDef.canSelfClose || getNsPrefix(fullName) !== null || tagDef.isVoid)) {
+        this._errors.push(TreeError.create(
+            fullName, startTagToken.sourceSpan,
+            `Only void and foreign elements can be self closed "${startTagToken.parts[1]}"`));
+      }
+    } else if (this._peek.type === lex.TokenType.TAG_OPEN_END) {
+      this._advance();
+      selfClosing = false;
+    }
+    const end = this._peek.sourceSpan.start;
+    const span = new ParseSourceSpan(startTagToken.sourceSpan.start, end);
+    const el = new html.Element(fullName, attrs, [], span, span, undefined);
+    this._pushElement(el);
+    if (selfClosing) {
+      this._popElement(fullName);
+      el.endSourceSpan = span;
+    }
+  }
+
+  private _pushElement(el: html.Element) {
+    const parentEl = this._getParentElement();
+
+    if (parentEl && this.getTagDefinition(parentEl.name).isClosedByChild(el.name)) {
+      this._elementStack.pop();
+    }
+
+    const tagDef = this.getTagDefinition(el.name);
+    const {parent, container} = this._getParentElementSkippingContainers();
+
+    if (parent && tagDef.requireExtraParent(parent.name)) {
+      const newParent = new html.Element(
+          tagDef.parentToAdd, [], [], el.sourceSpan, el.startSourceSpan, el.endSourceSpan);
+      this._insertBeforeContainer(parent, container, newParent);
+    }
+
+    this._addToParent(el);
+    this._elementStack.push(el);
+  }
+
+  private _consumeEndTag(endTagToken: lex.Token) {
+    const fullName = this._getElementFullName(
+        endTagToken.parts[0], endTagToken.parts[1], this._getParentElement());
+
+    if (this._getParentElement()) {
+      this._getParentElement() !.endSourceSpan = endTagToken.sourceSpan;
+    }
+
+    if (this.getTagDefinition(fullName).isVoid) {
+      this._errors.push(TreeError.create(
+          fullName, endTagToken.sourceSpan,
+          `Void elements do not have end tags "${endTagToken.parts[1]}"`));
+    } else if (!this._popElement(fullName)) {
+      const errMsg =
+          `Unexpected closing tag "${fullName}". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags`;
+      this._errors.push(TreeError.create(fullName, endTagToken.sourceSpan, errMsg));
+    }
+  }
+
+  private _popElement(fullName: string): boolean {
+    for (let stackIndex = this._elementStack.length - 1; stackIndex >= 0; stackIndex--) {
+      const el = this._elementStack[stackIndex];
+      if (el.name == fullName) {
+        this._elementStack.splice(stackIndex, this._elementStack.length - stackIndex);
+        return true;
+      }
+
+      if (!this.getTagDefinition(el.name).closedByParent) {
+        return false;
+      }
+    }
+    return false;
+  }
+
+  private _consumeAttr(attrName: lex.Token): html.Attribute {
+    const fullName = mergeNsAndName(attrName.parts[0], attrName.parts[1]);
+    let end = attrName.sourceSpan.end;
+    let value = '';
+    let valueSpan: ParseSourceSpan = undefined !;
+    if (this._peek.type === lex.TokenType.ATTR_VALUE) {
+      const valueToken = this._advance();
+      value = valueToken.parts[0];
+      end = valueToken.sourceSpan.end;
+      valueSpan = valueToken.sourceSpan;
+    }
+    return new html.Attribute(
+        fullName, value, new ParseSourceSpan(attrName.sourceSpan.start, end), valueSpan);
+  }
+
+  private _getParentElement(): html.Element|null {
+    return this._elementStack.length > 0 ? this._elementStack[this._elementStack.length - 1] : null;
+  }
+
+  /**
+   * Returns the parent in the DOM and the container.
+   *
+   * `<ng-container>` elements are skipped as they are not rendered as DOM element.
+   */
+  private _getParentElementSkippingContainers():
+      {parent: html.Element | null, container: html.Element|null} {
+    let container: html.Element|null = null;
+
+    for (let i = this._elementStack.length - 1; i >= 0; i--) {
+      if (!isNgContainer(this._elementStack[i].name)) {
+        return {parent: this._elementStack[i], container};
+      }
+      container = this._elementStack[i];
+    }
+
+    return {parent: null, container};
+  }
+
+  private _addToParent(node: html.Node) {
+    const parent = this._getParentElement();
+    if (parent != null) {
+      parent.children.push(node);
+    } else {
+      this._rootNodes.push(node);
+    }
+  }
+
+  /**
+   * Insert a node between the parent and the container.
+   * When no container is given, the node is appended as a child of the parent.
+   * Also updates the element stack accordingly.
+   *
+   * @internal
+   */
+  private _insertBeforeContainer(
+      parent: html.Element, container: html.Element|null, node: html.Element) {
+    if (!container) {
+      this._addToParent(node);
+      this._elementStack.push(node);
+    } else {
+      if (parent) {
+        // replace the container with the new node in the children
+        const index = parent.children.indexOf(container);
+        parent.children[index] = node;
+      } else {
+        this._rootNodes.push(node);
+      }
+      node.children.push(container);
+      this._elementStack.splice(this._elementStack.indexOf(container), 0, node);
+    }
+  }
+
+  private _getElementFullName(prefix: string, localName: string, parentElement: html.Element|null):
+      string {
+    if (prefix == null) {
+      prefix = this.getTagDefinition(localName).implicitNamespacePrefix !;
+      if (prefix == null && parentElement != null) {
+        prefix = getNsPrefix(parentElement.name);
+      }
+    }
+
+    return mergeNsAndName(prefix, localName);
+  }
+}
+
+function lastOnStack(stack: any[], element: any): boolean {
+  return stack.length > 0 && stack[stack.length - 1] === element;
+}
diff --git a/packages/compiler/src/ml_parser/tags.ts b/packages/compiler/src/ml_parser/tags.ts
new file mode 100644
index 000000000000..6428f9df454c
--- /dev/null
+++ b/packages/compiler/src/ml_parser/tags.ts
@@ -0,0 +1,333 @@
+/**
+ * @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 enum TagContentType {
+  RAW_TEXT,
+  ESCAPABLE_RAW_TEXT,
+  PARSABLE_DATA
+}
+
+export interface TagDefinition {
+  closedByParent: boolean;
+  requiredParents: {[key: string]: boolean};
+  parentToAdd: string;
+  implicitNamespacePrefix: string|null;
+  contentType: TagContentType;
+  isVoid: boolean;
+  ignoreFirstLf: boolean;
+  canSelfClose: boolean;
+
+  requireExtraParent(currentParent: string): boolean;
+
+  isClosedByChild(name: string): boolean;
+}
+
+export function splitNsName(elementName: string): [string | null, string] {
+  if (elementName[0] != ':') {
+    return [null, elementName];
+  }
+
+  const colonIndex = elementName.indexOf(':', 1);
+
+  if (colonIndex == -1) {
+    throw new Error(`Unsupported format "${elementName}" expecting ":namespace:name"`);
+  }
+
+  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|null {
+  return fullName === null ? null : splitNsName(fullName)[0];
+}
+
+export function mergeNsAndName(prefix: string, localName: string): string {
+  return prefix ? `:${prefix}:${localName}` : localName;
+}
+
+// see http://www.w3.org/TR/html51/syntax.html#named-character-references
+// see https://html.spec.whatwg.org/multipage/entities.json
+// This list is not exhaustive to keep the compiler footprint low.
+// The `&#123;` / `&#x1ab;` syntax should be used when the named character reference does not
+// exist.
+export const NAMED_ENTITIES: {[k: string]: string} = {
+  'Aacute': '\u00C1',
+  'aacute': '\u00E1',
+  'Acirc': '\u00C2',
+  'acirc': '\u00E2',
+  'acute': '\u00B4',
+  'AElig': '\u00C6',
+  'aelig': '\u00E6',
+  'Agrave': '\u00C0',
+  'agrave': '\u00E0',
+  'alefsym': '\u2135',
+  'Alpha': '\u0391',
+  'alpha': '\u03B1',
+  'amp': '&',
+  'and': '\u2227',
+  'ang': '\u2220',
+  'apos': '\u0027',
+  'Aring': '\u00C5',
+  'aring': '\u00E5',
+  'asymp': '\u2248',
+  'Atilde': '\u00C3',
+  'atilde': '\u00E3',
+  'Auml': '\u00C4',
+  'auml': '\u00E4',
+  'bdquo': '\u201E',
+  'Beta': '\u0392',
+  'beta': '\u03B2',
+  'brvbar': '\u00A6',
+  'bull': '\u2022',
+  'cap': '\u2229',
+  'Ccedil': '\u00C7',
+  'ccedil': '\u00E7',
+  'cedil': '\u00B8',
+  'cent': '\u00A2',
+  'Chi': '\u03A7',
+  'chi': '\u03C7',
+  'circ': '\u02C6',
+  'clubs': '\u2663',
+  'cong': '\u2245',
+  'copy': '\u00A9',
+  'crarr': '\u21B5',
+  'cup': '\u222A',
+  'curren': '\u00A4',
+  'dagger': '\u2020',
+  'Dagger': '\u2021',
+  'darr': '\u2193',
+  'dArr': '\u21D3',
+  'deg': '\u00B0',
+  'Delta': '\u0394',
+  'delta': '\u03B4',
+  'diams': '\u2666',
+  'divide': '\u00F7',
+  'Eacute': '\u00C9',
+  'eacute': '\u00E9',
+  'Ecirc': '\u00CA',
+  'ecirc': '\u00EA',
+  'Egrave': '\u00C8',
+  'egrave': '\u00E8',
+  'empty': '\u2205',
+  'emsp': '\u2003',
+  'ensp': '\u2002',
+  'Epsilon': '\u0395',
+  'epsilon': '\u03B5',
+  'equiv': '\u2261',
+  'Eta': '\u0397',
+  'eta': '\u03B7',
+  'ETH': '\u00D0',
+  'eth': '\u00F0',
+  'Euml': '\u00CB',
+  'euml': '\u00EB',
+  'euro': '\u20AC',
+  'exist': '\u2203',
+  'fnof': '\u0192',
+  'forall': '\u2200',
+  'frac12': '\u00BD',
+  'frac14': '\u00BC',
+  'frac34': '\u00BE',
+  'frasl': '\u2044',
+  'Gamma': '\u0393',
+  'gamma': '\u03B3',
+  'ge': '\u2265',
+  'gt': '>',
+  'harr': '\u2194',
+  'hArr': '\u21D4',
+  'hearts': '\u2665',
+  'hellip': '\u2026',
+  'Iacute': '\u00CD',
+  'iacute': '\u00ED',
+  'Icirc': '\u00CE',
+  'icirc': '\u00EE',
+  'iexcl': '\u00A1',
+  'Igrave': '\u00CC',
+  'igrave': '\u00EC',
+  'image': '\u2111',
+  'infin': '\u221E',
+  'int': '\u222B',
+  'Iota': '\u0399',
+  'iota': '\u03B9',
+  'iquest': '\u00BF',
+  'isin': '\u2208',
+  'Iuml': '\u00CF',
+  'iuml': '\u00EF',
+  'Kappa': '\u039A',
+  'kappa': '\u03BA',
+  'Lambda': '\u039B',
+  'lambda': '\u03BB',
+  'lang': '\u27E8',
+  'laquo': '\u00AB',
+  'larr': '\u2190',
+  'lArr': '\u21D0',
+  'lceil': '\u2308',
+  'ldquo': '\u201C',
+  'le': '\u2264',
+  'lfloor': '\u230A',
+  'lowast': '\u2217',
+  'loz': '\u25CA',
+  'lrm': '\u200E',
+  'lsaquo': '\u2039',
+  'lsquo': '\u2018',
+  'lt': '<',
+  'macr': '\u00AF',
+  'mdash': '\u2014',
+  'micro': '\u00B5',
+  'middot': '\u00B7',
+  'minus': '\u2212',
+  'Mu': '\u039C',
+  'mu': '\u03BC',
+  'nabla': '\u2207',
+  'nbsp': '\u00A0',
+  'ndash': '\u2013',
+  'ne': '\u2260',
+  'ni': '\u220B',
+  'not': '\u00AC',
+  'notin': '\u2209',
+  'nsub': '\u2284',
+  'Ntilde': '\u00D1',
+  'ntilde': '\u00F1',
+  'Nu': '\u039D',
+  'nu': '\u03BD',
+  'Oacute': '\u00D3',
+  'oacute': '\u00F3',
+  'Ocirc': '\u00D4',
+  'ocirc': '\u00F4',
+  'OElig': '\u0152',
+  'oelig': '\u0153',
+  'Ograve': '\u00D2',
+  'ograve': '\u00F2',
+  'oline': '\u203E',
+  'Omega': '\u03A9',
+  'omega': '\u03C9',
+  'Omicron': '\u039F',
+  'omicron': '\u03BF',
+  'oplus': '\u2295',
+  'or': '\u2228',
+  'ordf': '\u00AA',
+  'ordm': '\u00BA',
+  'Oslash': '\u00D8',
+  'oslash': '\u00F8',
+  'Otilde': '\u00D5',
+  'otilde': '\u00F5',
+  'otimes': '\u2297',
+  'Ouml': '\u00D6',
+  'ouml': '\u00F6',
+  'para': '\u00B6',
+  'permil': '\u2030',
+  'perp': '\u22A5',
+  'Phi': '\u03A6',
+  'phi': '\u03C6',
+  'Pi': '\u03A0',
+  'pi': '\u03C0',
+  'piv': '\u03D6',
+  'plusmn': '\u00B1',
+  'pound': '\u00A3',
+  'prime': '\u2032',
+  'Prime': '\u2033',
+  'prod': '\u220F',
+  'prop': '\u221D',
+  'Psi': '\u03A8',
+  'psi': '\u03C8',
+  'quot': '\u0022',
+  'radic': '\u221A',
+  'rang': '\u27E9',
+  'raquo': '\u00BB',
+  'rarr': '\u2192',
+  'rArr': '\u21D2',
+  'rceil': '\u2309',
+  'rdquo': '\u201D',
+  'real': '\u211C',
+  'reg': '\u00AE',
+  'rfloor': '\u230B',
+  'Rho': '\u03A1',
+  'rho': '\u03C1',
+  'rlm': '\u200F',
+  'rsaquo': '\u203A',
+  'rsquo': '\u2019',
+  'sbquo': '\u201A',
+  'Scaron': '\u0160',
+  'scaron': '\u0161',
+  'sdot': '\u22C5',
+  'sect': '\u00A7',
+  'shy': '\u00AD',
+  'Sigma': '\u03A3',
+  'sigma': '\u03C3',
+  'sigmaf': '\u03C2',
+  'sim': '\u223C',
+  'spades': '\u2660',
+  'sub': '\u2282',
+  'sube': '\u2286',
+  'sum': '\u2211',
+  'sup': '\u2283',
+  'sup1': '\u00B9',
+  'sup2': '\u00B2',
+  'sup3': '\u00B3',
+  'supe': '\u2287',
+  'szlig': '\u00DF',
+  'Tau': '\u03A4',
+  'tau': '\u03C4',
+  'there4': '\u2234',
+  'Theta': '\u0398',
+  'theta': '\u03B8',
+  'thetasym': '\u03D1',
+  'thinsp': '\u2009',
+  'THORN': '\u00DE',
+  'thorn': '\u00FE',
+  'tilde': '\u02DC',
+  'times': '\u00D7',
+  'trade': '\u2122',
+  'Uacute': '\u00DA',
+  'uacute': '\u00FA',
+  'uarr': '\u2191',
+  'uArr': '\u21D1',
+  'Ucirc': '\u00DB',
+  'ucirc': '\u00FB',
+  'Ugrave': '\u00D9',
+  'ugrave': '\u00F9',
+  'uml': '\u00A8',
+  'upsih': '\u03D2',
+  'Upsilon': '\u03A5',
+  'upsilon': '\u03C5',
+  'Uuml': '\u00DC',
+  'uuml': '\u00FC',
+  'weierp': '\u2118',
+  'Xi': '\u039E',
+  'xi': '\u03BE',
+  'Yacute': '\u00DD',
+  'yacute': '\u00FD',
+  'yen': '\u00A5',
+  'yuml': '\u00FF',
+  'Yuml': '\u0178',
+  'Zeta': '\u0396',
+  'zeta': '\u03B6',
+  'zwj': '\u200D',
+  'zwnj': '\u200C',
+};
+
+// The &ngsp; pseudo-entity is denoting a space. see:
+// https://github.com/dart-lang/angular/blob/0bb611387d29d65b5af7f9d2515ab571fd3fbee4/_tests/test/compiler/preserve_whitespace_test.dart
+export const NGSP_UNICODE = '\uE500';
+
+NAMED_ENTITIES['ngsp'] = NGSP_UNICODE;
diff --git a/packages/compiler/src/ml_parser/xml_parser.ts b/packages/compiler/src/ml_parser/xml_parser.ts
new file mode 100644
index 000000000000..57f49eb105a7
--- /dev/null
+++ b/packages/compiler/src/ml_parser/xml_parser.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
+ */
+
+import {ParseTreeResult, Parser} from './parser';
+import {getXmlTagDefinition} from './xml_tags';
+
+export {ParseTreeResult, TreeError} from './parser';
+
+export class XmlParser extends Parser {
+  constructor() { super(getXmlTagDefinition); }
+
+  parse(source: string, url: string, parseExpansionForms: boolean = false): ParseTreeResult {
+    return super.parse(source, url, parseExpansionForms);
+  }
+}
diff --git a/packages/compiler/src/ml_parser/xml_tags.ts b/packages/compiler/src/ml_parser/xml_tags.ts
new file mode 100644
index 000000000000..ab52c15dd18b
--- /dev/null
+++ b/packages/compiler/src/ml_parser/xml_tags.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 {TagContentType, TagDefinition} from './tags';
+
+export class XmlTagDefinition implements TagDefinition {
+  closedByParent: boolean = false;
+  // TODO(issue/24571): remove '!'.
+  requiredParents !: {[key: string]: boolean};
+  // TODO(issue/24571): remove '!'.
+  parentToAdd !: string;
+  // TODO(issue/24571): remove '!'.
+  implicitNamespacePrefix !: string;
+  contentType: TagContentType = TagContentType.PARSABLE_DATA;
+  isVoid: boolean = false;
+  ignoreFirstLf: boolean = false;
+  canSelfClose: boolean = true;
+
+  requireExtraParent(currentParent: string): boolean { return false; }
+
+  isClosedByChild(name: string): boolean { return false; }
+}
+
+const _TAG_DEFINITION = new XmlTagDefinition();
+
+export function getXmlTagDefinition(tagName: string): XmlTagDefinition {
+  return _TAG_DEFINITION;
+}
diff --git a/packages/compiler/src/ng_module_compiler.ts b/packages/compiler/src/ng_module_compiler.ts
new file mode 100644
index 000000000000..6ff46bcb765b
--- /dev/null
+++ b/packages/compiler/src/ng_module_compiler.ts
@@ -0,0 +1,86 @@
+/**
+ * @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 {CompileNgModuleMetadata, CompileProviderMetadata, identifierName} from './compile_metadata';
+import {CompileReflector} from './compile_reflector';
+import {NodeFlags} from './core';
+import {Identifiers} from './identifiers';
+import * as o from './output/output_ast';
+import {typeSourceSpan} from './parse_util';
+import {NgModuleProviderAnalyzer} from './provider_analyzer';
+import {OutputContext} from './util';
+import {componentFactoryResolverProviderDef, depDef, providerDef} from './view_compiler/provider_compiler';
+
+export class NgModuleCompileResult {
+  constructor(public ngModuleFactoryVar: string) {}
+}
+
+const LOG_VAR = o.variable('_l');
+
+export class NgModuleCompiler {
+  constructor(private reflector: CompileReflector) {}
+  compile(
+      ctx: OutputContext, ngModuleMeta: CompileNgModuleMetadata,
+      extraProviders: CompileProviderMetadata[]): NgModuleCompileResult {
+    const sourceSpan = typeSourceSpan('NgModule', ngModuleMeta.type);
+    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 ngModuleFactoryVar = `${identifierName(ngModuleMeta.type)}NgFactory`;
+    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
+        ]));
+
+    if (ngModuleMeta.id) {
+      const id = typeof ngModuleMeta.id === 'string' ? o.literal(ngModuleMeta.id) :
+                                                       ctx.importExpr(ngModuleMeta.id);
+      const registerFactoryStmt = o.importExpr(Identifiers.RegisterModuleFactoryFn)
+                                      .callFn([id, o.variable(ngModuleFactoryVar)])
+                                      .toStmt();
+      ctx.statements.push(registerFactoryStmt);
+    }
+
+    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);
+  }
+}
diff --git a/packages/compiler/src/ng_module_resolver.ts b/packages/compiler/src/ng_module_resolver.ts
new file mode 100644
index 000000000000..6996f376a145
--- /dev/null
+++ b/packages/compiler/src/ng_module_resolver.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 {CompileReflector} from './compile_reflector';
+import {NgModule, Type, createNgModule} from './core';
+import {findLast} from './directive_resolver';
+import {stringify} from './util';
+
+
+/**
+ * Resolves types to {@link NgModule}.
+ */
+export class NgModuleResolver {
+  constructor(private _reflector: CompileReflector) {}
+
+  isNgModule(type: any) { return this._reflector.annotations(type).some(createNgModule.isTypeOf); }
+
+  resolve(type: Type, throwIfNotFound = true): NgModule|null {
+    const ngModuleMeta: NgModule =
+        findLast(this._reflector.annotations(type), createNgModule.isTypeOf);
+
+    if (ngModuleMeta) {
+      return ngModuleMeta;
+    } else {
+      if (throwIfNotFound) {
+        throw new Error(`No NgModule metadata found for '${stringify(type)}'.`);
+      }
+      return null;
+    }
+  }
+}
diff --git a/packages/compiler/src/output/abstract_emitter.ts b/packages/compiler/src/output/abstract_emitter.ts
new file mode 100644
index 000000000000..ac26cdba21b6
--- /dev/null
+++ b/packages/compiler/src/output/abstract_emitter.ts
@@ -0,0 +1,547 @@
+/**
+ * @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';
+import {SourceMapGenerator} from './source_map';
+
+const _SINGLE_QUOTE_ESCAPE_STRING_RE = /'|\\|\n|\r|\$/g;
+const _LEGAL_IDENTIFIER_RE = /^[$A-Z_][0-9A-Z_$]*$/i;
+const _INDENT_WITH = '  ';
+export const CATCH_ERROR_VAR = o.variable('error', null, null);
+export const CATCH_STACK_VAR = o.variable('stack', null, null);
+
+export interface OutputEmitter {
+  emitStatements(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(): EmitterVisitorContext { return new EmitterVisitorContext(0); }
+
+  private _lines: _EmittedLine[];
+  private _classes: o.ClassStmt[] = [];
+  private _preambleLineCount = 0;
+
+  constructor(private _indent: number) { this._lines = [new _EmittedLine(_indent)]; }
+
+  private get _currentLine(): _EmittedLine { return this._lines[this._lines.length - 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) {
+      this._lines.push(new _EmittedLine(this._indent));
+    }
+  }
+
+  removeEmptyLastLine() {
+    if (this.lineIsEmpty()) {
+      this._lines.pop();
+    }
+  }
+
+  incIndent() {
+    this._indent++;
+    if (this.lineIsEmpty()) {
+      this._currentLine.indent = this._indent;
+    }
+  }
+
+  decIndent() {
+    this._indent--;
+    if (this.lineIsEmpty()) {
+      this._currentLine.indent = this._indent;
+    }
+  }
+
+  pushClass(clazz: o.ClassStmt) { this._classes.push(clazz); }
+
+  popClass(): o.ClassStmt { return this._classes.pop() !; }
+
+  get currentClass(): o.ClassStmt|null {
+    return this._classes.length > 0 ? this._classes[this._classes.length - 1] : null;
+  }
+
+  toSource(): string {
+    return this.sourceLines
+        .map(l => l.parts.length > 0 ? _createIndent(l.indent) + l.parts.join('') : '')
+        .join('\n');
+  }
+
+  toSourceMapGenerator(genFilePath: string, startsAtLine: number = 0): SourceMapGenerator {
+    const map = new SourceMapGenerator(genFilePath);
+
+    let firstOffsetMapped = false;
+    const mapFirstOffsetIfNeeded = () => {
+      if (!firstOffsetMapped) {
+        // Add a single space so that tools won't try to load the file from disk.
+        // Note: We are using virtual urls like `ng:///`, so we have to
+        // provide a content here.
+        map.addSource(genFilePath, ' ').addMapping(0, genFilePath, 0, 0);
+        firstOffsetMapped = true;
+      }
+    };
+
+    for (let i = 0; i < startsAtLine; i++) {
+      map.addLine();
+      mapFirstOffsetIfNeeded();
+    }
+
+    this.sourceLines.forEach((line, lineIdx) => {
+      map.addLine();
+
+      const spans = line.srcSpans;
+      const parts = line.parts;
+      let col0 = line.indent * _INDENT_WITH.length;
+      let spanIdx = 0;
+      // skip leading parts without source spans
+      while (spanIdx < spans.length && !spans[spanIdx]) {
+        col0 += parts[spanIdx].length;
+        spanIdx++;
+      }
+      if (spanIdx < spans.length && lineIdx === 0 && col0 === 0) {
+        firstOffsetMapped = true;
+      } else {
+        mapFirstOffsetIfNeeded();
+      }
+
+      while (spanIdx < spans.length) {
+        const span = spans[spanIdx] !;
+        const source = span.start.file;
+        const sourceLine = span.start.line;
+        const sourceCol = span.start.col;
+        map.addSource(source.url, source.content)
+            .addMapping(col0, source.url, sourceLine, sourceCol);
+
+        col0 += parts[spanIdx].length;
+        spanIdx++;
+
+        // assign parts without span or the same span to the previous segment
+        while (spanIdx < spans.length && (span === spans[spanIdx] || !spans[spanIdx])) {
+          col0 += parts[spanIdx].length;
+          spanIdx++;
+        }
+      }
+    });
+
+    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 - _createIndent(emittedLine.indent).length;
+      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);
+    }
+    return this._lines;
+  }
+}
+
+export abstract class AbstractEmitterVisitor implements o.StatementVisitor, o.ExpressionVisitor {
+  constructor(private _escapeDollarInStrings: boolean) {}
+
+  visitExpressionStmt(stmt: o.ExpressionStatement, ctx: EmitterVisitorContext): any {
+    stmt.expr.visitExpression(this, ctx);
+    ctx.println(stmt, ';');
+    return null;
+  }
+
+  visitReturnStmt(stmt: o.ReturnStatement, ctx: EmitterVisitorContext): any {
+    ctx.print(stmt, `return `);
+    stmt.value.visitExpression(this, ctx);
+    ctx.println(stmt, ';');
+    return null;
+  }
+
+  abstract visitCastExpr(ast: o.CastExpr, context: any): any;
+
+  abstract visitDeclareClassStmt(stmt: o.ClassStmt, ctx: EmitterVisitorContext): any;
+
+  visitIfStmt(stmt: o.IfStmt, ctx: EmitterVisitorContext): any {
+    ctx.print(stmt, `if (`);
+    stmt.condition.visitExpression(this, ctx);
+    ctx.print(stmt, `) {`);
+    const hasElseCase = stmt.falseCase != null && stmt.falseCase.length > 0;
+    if (stmt.trueCase.length <= 1 && !hasElseCase) {
+      ctx.print(stmt, ` `);
+      this.visitAllStatements(stmt.trueCase, ctx);
+      ctx.removeEmptyLastLine();
+      ctx.print(stmt, ` `);
+    } else {
+      ctx.println();
+      ctx.incIndent();
+      this.visitAllStatements(stmt.trueCase, ctx);
+      ctx.decIndent();
+      if (hasElseCase) {
+        ctx.println(stmt, `} else {`);
+        ctx.incIndent();
+        this.visitAllStatements(stmt.falseCase, ctx);
+        ctx.decIndent();
+      }
+    }
+    ctx.println(stmt, `}`);
+    return null;
+  }
+
+  abstract visitTryCatchStmt(stmt: o.TryCatchStmt, ctx: EmitterVisitorContext): any;
+
+  visitThrowStmt(stmt: o.ThrowStmt, ctx: EmitterVisitorContext): any {
+    ctx.print(stmt, `throw `);
+    stmt.error.visitExpression(this, ctx);
+    ctx.println(stmt, `;`);
+    return null;
+  }
+  visitCommentStmt(stmt: o.CommentStmt, ctx: EmitterVisitorContext): any {
+    if (stmt.multiline) {
+      ctx.println(stmt, `/* ${stmt.comment} */`);
+    } else {
+      stmt.comment.split('\n').forEach((line) => { ctx.println(stmt, `// ${line}`); });
+    }
+    return null;
+  }
+  visitJSDocCommentStmt(stmt: o.JSDocCommentStmt, ctx: EmitterVisitorContext) {
+    ctx.println(stmt, `/*${stmt.toString()}*/`);
+    return null;
+  }
+
+  abstract visitDeclareVarStmt(stmt: o.DeclareVarStmt, ctx: EmitterVisitorContext): any;
+
+  visitWriteVarExpr(expr: o.WriteVarExpr, ctx: EmitterVisitorContext): any {
+    const lineWasEmpty = ctx.lineIsEmpty();
+    if (!lineWasEmpty) {
+      ctx.print(expr, '(');
+    }
+    ctx.print(expr, `${expr.name} = `);
+    expr.value.visitExpression(this, ctx);
+    if (!lineWasEmpty) {
+      ctx.print(expr, ')');
+    }
+    return null;
+  }
+  visitWriteKeyExpr(expr: o.WriteKeyExpr, ctx: EmitterVisitorContext): any {
+    const lineWasEmpty = ctx.lineIsEmpty();
+    if (!lineWasEmpty) {
+      ctx.print(expr, '(');
+    }
+    expr.receiver.visitExpression(this, ctx);
+    ctx.print(expr, `[`);
+    expr.index.visitExpression(this, ctx);
+    ctx.print(expr, `] = `);
+    expr.value.visitExpression(this, ctx);
+    if (!lineWasEmpty) {
+      ctx.print(expr, ')');
+    }
+    return null;
+  }
+  visitWritePropExpr(expr: o.WritePropExpr, ctx: EmitterVisitorContext): any {
+    const lineWasEmpty = ctx.lineIsEmpty();
+    if (!lineWasEmpty) {
+      ctx.print(expr, '(');
+    }
+    expr.receiver.visitExpression(this, ctx);
+    ctx.print(expr, `.${expr.name} = `);
+    expr.value.visitExpression(this, ctx);
+    if (!lineWasEmpty) {
+      ctx.print(expr, ')');
+    }
+    return null;
+  }
+  visitInvokeMethodExpr(expr: o.InvokeMethodExpr, ctx: EmitterVisitorContext): any {
+    expr.receiver.visitExpression(this, ctx);
+    let name = expr.name;
+    if (expr.builtin != null) {
+      name = this.getBuiltinMethodName(expr.builtin);
+      if (name == null) {
+        // some builtins just mean to skip the call.
+        return null;
+      }
+    }
+    ctx.print(expr, `.${name}(`);
+    this.visitAllExpressions(expr.args, ctx, `,`);
+    ctx.print(expr, `)`);
+    return null;
+  }
+
+  abstract getBuiltinMethodName(method: o.BuiltinMethod): string;
+
+  visitInvokeFunctionExpr(expr: o.InvokeFunctionExpr, ctx: EmitterVisitorContext): any {
+    expr.fn.visitExpression(this, ctx);
+    ctx.print(expr, `(`);
+    this.visitAllExpressions(expr.args, ctx, ',');
+    ctx.print(expr, `)`);
+    return null;
+  }
+  visitWrappedNodeExpr(ast: o.WrappedNodeExpr<any>, ctx: EmitterVisitorContext): any {
+    throw new Error('Abstract emitter cannot visit WrappedNodeExpr.');
+  }
+  visitTypeofExpr(expr: o.TypeofExpr, ctx: EmitterVisitorContext): any {
+    ctx.print(expr, 'typeof ');
+    expr.expr.visitExpression(this, ctx);
+  }
+  visitReadVarExpr(ast: o.ReadVarExpr, ctx: EmitterVisitorContext): any {
+    let varName = ast.name !;
+    if (ast.builtin != null) {
+      switch (ast.builtin) {
+        case o.BuiltinVar.Super:
+          varName = 'super';
+          break;
+        case o.BuiltinVar.This:
+          varName = 'this';
+          break;
+        case o.BuiltinVar.CatchError:
+          varName = CATCH_ERROR_VAR.name !;
+          break;
+        case o.BuiltinVar.CatchStack:
+          varName = CATCH_STACK_VAR.name !;
+          break;
+        default:
+          throw new Error(`Unknown builtin variable ${ast.builtin}`);
+      }
+    }
+    ctx.print(ast, varName);
+    return null;
+  }
+  visitInstantiateExpr(ast: o.InstantiateExpr, ctx: EmitterVisitorContext): any {
+    ctx.print(ast, `new `);
+    ast.classExpr.visitExpression(this, ctx);
+    ctx.print(ast, `(`);
+    this.visitAllExpressions(ast.args, ctx, ',');
+    ctx.print(ast, `)`);
+    return null;
+  }
+
+  visitLiteralExpr(ast: o.LiteralExpr, ctx: EmitterVisitorContext): any {
+    const value = ast.value;
+    if (typeof value === 'string') {
+      ctx.print(ast, escapeIdentifier(value, this._escapeDollarInStrings));
+    } else {
+      ctx.print(ast, `${value}`);
+    }
+    return null;
+  }
+
+  abstract visitExternalExpr(ast: o.ExternalExpr, ctx: EmitterVisitorContext): any;
+
+  visitConditionalExpr(ast: o.ConditionalExpr, ctx: EmitterVisitorContext): any {
+    ctx.print(ast, `(`);
+    ast.condition.visitExpression(this, ctx);
+    ctx.print(ast, '? ');
+    ast.trueCase.visitExpression(this, ctx);
+    ctx.print(ast, ': ');
+    ast.falseCase !.visitExpression(this, ctx);
+    ctx.print(ast, `)`);
+    return null;
+  }
+  visitNotExpr(ast: o.NotExpr, ctx: EmitterVisitorContext): any {
+    ctx.print(ast, '!');
+    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;
+
+  visitBinaryOperatorExpr(ast: o.BinaryOperatorExpr, ctx: EmitterVisitorContext): any {
+    let opStr: string;
+    switch (ast.operator) {
+      case o.BinaryOperator.Equals:
+        opStr = '==';
+        break;
+      case o.BinaryOperator.Identical:
+        opStr = '===';
+        break;
+      case o.BinaryOperator.NotEquals:
+        opStr = '!=';
+        break;
+      case o.BinaryOperator.NotIdentical:
+        opStr = '!==';
+        break;
+      case o.BinaryOperator.And:
+        opStr = '&&';
+        break;
+      case o.BinaryOperator.BitwiseAnd:
+        opStr = '&';
+        break;
+      case o.BinaryOperator.Or:
+        opStr = '||';
+        break;
+      case o.BinaryOperator.Plus:
+        opStr = '+';
+        break;
+      case o.BinaryOperator.Minus:
+        opStr = '-';
+        break;
+      case o.BinaryOperator.Divide:
+        opStr = '/';
+        break;
+      case o.BinaryOperator.Multiply:
+        opStr = '*';
+        break;
+      case o.BinaryOperator.Modulo:
+        opStr = '%';
+        break;
+      case o.BinaryOperator.Lower:
+        opStr = '<';
+        break;
+      case o.BinaryOperator.LowerEquals:
+        opStr = '<=';
+        break;
+      case o.BinaryOperator.Bigger:
+        opStr = '>';
+        break;
+      case o.BinaryOperator.BiggerEquals:
+        opStr = '>=';
+        break;
+      default:
+        throw new Error(`Unknown operator ${ast.operator}`);
+    }
+    if (ast.parens) ctx.print(ast, `(`);
+    ast.lhs.visitExpression(this, ctx);
+    ctx.print(ast, ` ${opStr} `);
+    ast.rhs.visitExpression(this, ctx);
+    if (ast.parens) ctx.print(ast, `)`);
+    return null;
+  }
+
+  visitReadPropExpr(ast: o.ReadPropExpr, ctx: EmitterVisitorContext): any {
+    ast.receiver.visitExpression(this, ctx);
+    ctx.print(ast, `.`);
+    ctx.print(ast, ast.name);
+    return null;
+  }
+  visitReadKeyExpr(ast: o.ReadKeyExpr, ctx: EmitterVisitorContext): any {
+    ast.receiver.visitExpression(this, ctx);
+    ctx.print(ast, `[`);
+    ast.index.visitExpression(this, ctx);
+    ctx.print(ast, `]`);
+    return null;
+  }
+  visitLiteralArrayExpr(ast: o.LiteralArrayExpr, ctx: EmitterVisitorContext): any {
+    ctx.print(ast, `[`);
+    this.visitAllExpressions(ast.entries, ctx, ',');
+    ctx.print(ast, `]`);
+    return null;
+  }
+  visitLiteralMapExpr(ast: o.LiteralMapExpr, ctx: EmitterVisitorContext): any {
+    ctx.print(ast, `{`);
+    this.visitAllObjects(entry => {
+      ctx.print(ast, `${escapeIdentifier(entry.key, this._escapeDollarInStrings, entry.quoted)}:`);
+      entry.value.visitExpression(this, ctx);
+    }, ast.entries, ctx, ',');
+    ctx.print(ast, `}`);
+    return null;
+  }
+  visitCommaExpr(ast: o.CommaExpr, ctx: EmitterVisitorContext): any {
+    ctx.print(ast, '(');
+    this.visitAllExpressions(ast.parts, ctx, ',');
+    ctx.print(ast, ')');
+    return null;
+  }
+  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): void {
+    let incrementedIndent = false;
+    for (let i = 0; i < expressions.length; i++) {
+      if (i > 0) {
+        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 (incrementedIndent) {
+      // continuation are marked with double indent.
+      ctx.decIndent();
+      ctx.decIndent();
+    }
+  }
+
+  visitAllStatements(statements: o.Statement[], ctx: EmitterVisitorContext): void {
+    statements.forEach((stmt) => stmt.visitStatement(this, ctx));
+  }
+}
+
+export function escapeIdentifier(
+    input: string, escapeDollar: boolean, alwaysQuote: boolean = true): any {
+  if (input == null) {
+    return null;
+  }
+  const body = input.replace(_SINGLE_QUOTE_ESCAPE_STRING_RE, (...match: string[]) => {
+    if (match[0] == '$') {
+      return escapeDollar ? '\\$' : '$';
+    } else if (match[0] == '\n') {
+      return '\\n';
+    } else if (match[0] == '\r') {
+      return '\\r';
+    } else {
+      return `\\${match[0]}`;
+    }
+  });
+  const requiresQuotes = alwaysQuote || !_LEGAL_IDENTIFIER_RE.test(body);
+  return requiresQuotes ? `'${body}'` : body;
+}
+
+function _createIndent(count: number): string {
+  let res = '';
+  for (let i = 0; i < count; i++) {
+    res += _INDENT_WITH;
+  }
+  return res;
+}
diff --git a/packages/compiler/src/output/abstract_js_emitter.ts b/packages/compiler/src/output/abstract_js_emitter.ts
new file mode 100644
index 000000000000..621a67af4089
--- /dev/null
+++ b/packages/compiler/src/output/abstract_js_emitter.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 {AbstractEmitterVisitor, CATCH_ERROR_VAR, CATCH_STACK_VAR, EmitterVisitorContext} from './abstract_emitter';
+import * as o from './output_ast';
+
+export abstract class AbstractJsEmitterVisitor extends AbstractEmitterVisitor {
+  constructor() { super(false); }
+  visitDeclareClassStmt(stmt: o.ClassStmt, ctx: EmitterVisitorContext): any {
+    ctx.pushClass(stmt);
+    this._visitClassConstructor(stmt, ctx);
+
+    if (stmt.parent != null) {
+      ctx.print(stmt, `${stmt.name}.prototype = Object.create(`);
+      stmt.parent.visitExpression(this, ctx);
+      ctx.println(stmt, `.prototype);`);
+    }
+    stmt.getters.forEach((getter) => this._visitClassGetter(stmt, getter, ctx));
+    stmt.methods.forEach((method) => this._visitClassMethod(stmt, method, ctx));
+    ctx.popClass();
+    return null;
+  }
+
+  private _visitClassConstructor(stmt: o.ClassStmt, ctx: EmitterVisitorContext) {
+    ctx.print(stmt, `function ${stmt.name}(`);
+    if (stmt.constructorMethod != null) {
+      this._visitParams(stmt.constructorMethod.params, ctx);
+    }
+    ctx.println(stmt, `) {`);
+    ctx.incIndent();
+    if (stmt.constructorMethod != null) {
+      if (stmt.constructorMethod.body.length > 0) {
+        ctx.println(stmt, `var self = this;`);
+        this.visitAllStatements(stmt.constructorMethod.body, ctx);
+      }
+    }
+    ctx.decIndent();
+    ctx.println(stmt, `}`);
+  }
+
+  private _visitClassGetter(stmt: o.ClassStmt, getter: o.ClassGetter, ctx: EmitterVisitorContext) {
+    ctx.println(
+        stmt,
+        `Object.defineProperty(${stmt.name}.prototype, '${getter.name}', { get: function() {`);
+    ctx.incIndent();
+    if (getter.body.length > 0) {
+      ctx.println(stmt, `var self = this;`);
+      this.visitAllStatements(getter.body, ctx);
+    }
+    ctx.decIndent();
+    ctx.println(stmt, `}});`);
+  }
+
+  private _visitClassMethod(stmt: o.ClassStmt, method: o.ClassMethod, ctx: EmitterVisitorContext) {
+    ctx.print(stmt, `${stmt.name}.prototype.${method.name} = function(`);
+    this._visitParams(method.params, ctx);
+    ctx.println(stmt, `) {`);
+    ctx.incIndent();
+    if (method.body.length > 0) {
+      ctx.println(stmt, `var self = this;`);
+      this.visitAllStatements(method.body, ctx);
+    }
+    ctx.decIndent();
+    ctx.println(stmt, `};`);
+  }
+
+  visitWrappedNodeExpr(ast: o.WrappedNodeExpr<any>, ctx: EmitterVisitorContext): any {
+    throw new Error('Cannot emit a WrappedNodeExpr in Javascript.');
+  }
+
+  visitReadVarExpr(ast: o.ReadVarExpr, ctx: EmitterVisitorContext): string|null {
+    if (ast.builtin === o.BuiltinVar.This) {
+      ctx.print(ast, 'self');
+    } else if (ast.builtin === o.BuiltinVar.Super) {
+      throw new Error(
+          `'super' needs to be handled at a parent ast node, not at the variable level!`);
+    } else {
+      super.visitReadVarExpr(ast, ctx);
+    }
+    return null;
+  }
+  visitDeclareVarStmt(stmt: o.DeclareVarStmt, ctx: EmitterVisitorContext): any {
+    ctx.print(stmt, `var ${stmt.name}`);
+    if (stmt.value) {
+      ctx.print(stmt, ' = ');
+      stmt.value.visitExpression(this, ctx);
+    }
+    ctx.println(stmt, `;`);
+    return null;
+  }
+  visitCastExpr(ast: o.CastExpr, ctx: EmitterVisitorContext): any {
+    ast.value.visitExpression(this, ctx);
+    return null;
+  }
+  visitInvokeFunctionExpr(expr: o.InvokeFunctionExpr, ctx: EmitterVisitorContext): string|null {
+    const fnExpr = expr.fn;
+    if (fnExpr instanceof o.ReadVarExpr && fnExpr.builtin === o.BuiltinVar.Super) {
+      ctx.currentClass !.parent !.visitExpression(this, ctx);
+      ctx.print(expr, `.call(this`);
+      if (expr.args.length > 0) {
+        ctx.print(expr, `, `);
+        this.visitAllExpressions(expr.args, ctx, ',');
+      }
+      ctx.print(expr, `)`);
+    } else {
+      super.visitInvokeFunctionExpr(expr, ctx);
+    }
+    return null;
+  }
+  visitFunctionExpr(ast: o.FunctionExpr, ctx: EmitterVisitorContext): any {
+    ctx.print(ast, `function${ast.name ? ' ' + ast.name : ''}(`);
+    this._visitParams(ast.params, ctx);
+    ctx.println(ast, `) {`);
+    ctx.incIndent();
+    this.visitAllStatements(ast.statements, ctx);
+    ctx.decIndent();
+    ctx.print(ast, `}`);
+    return null;
+  }
+  visitDeclareFunctionStmt(stmt: o.DeclareFunctionStmt, ctx: EmitterVisitorContext): any {
+    ctx.print(stmt, `function ${stmt.name}(`);
+    this._visitParams(stmt.params, ctx);
+    ctx.println(stmt, `) {`);
+    ctx.incIndent();
+    this.visitAllStatements(stmt.statements, ctx);
+    ctx.decIndent();
+    ctx.println(stmt, `}`);
+    return null;
+  }
+  visitTryCatchStmt(stmt: o.TryCatchStmt, ctx: EmitterVisitorContext): any {
+    ctx.println(stmt, `try {`);
+    ctx.incIndent();
+    this.visitAllStatements(stmt.bodyStmts, ctx);
+    ctx.decIndent();
+    ctx.println(stmt, `} catch (${CATCH_ERROR_VAR.name}) {`);
+    ctx.incIndent();
+    const catchStmts =
+        [<o.Statement>CATCH_STACK_VAR.set(CATCH_ERROR_VAR.prop('stack')).toDeclStmt(null, [
+          o.StmtModifier.Final
+        ])].concat(stmt.catchStmts);
+    this.visitAllStatements(catchStmts, ctx);
+    ctx.decIndent();
+    ctx.println(stmt, `}`);
+    return null;
+  }
+
+  private _visitParams(params: o.FnParam[], ctx: EmitterVisitorContext): void {
+    this.visitAllObjects(param => ctx.print(null, param.name), params, ctx, ',');
+  }
+
+  getBuiltinMethodName(method: o.BuiltinMethod): string {
+    let name: string;
+    switch (method) {
+      case o.BuiltinMethod.ConcatArray:
+        name = 'concat';
+        break;
+      case o.BuiltinMethod.SubscribeObservable:
+        name = 'subscribe';
+        break;
+      case o.BuiltinMethod.Bind:
+        name = 'bind';
+        break;
+      default:
+        throw new Error(`Unknown builtin method: ${method}`);
+    }
+    return name;
+  }
+}
diff --git a/packages/compiler/src/output/js_emitter.ts b/packages/compiler/src/output/js_emitter.ts
new file mode 100644
index 000000000000..16ae3138e74a
--- /dev/null
+++ b/packages/compiler/src/output/js_emitter.ts
@@ -0,0 +1,82 @@
+/**
+ * @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';
+import {CompileIdentifierMetadata} from '../compile_metadata';
+
+import {EmitterVisitorContext, OutputEmitter} from './abstract_emitter';
+import {AbstractJsEmitterVisitor} from './abstract_js_emitter';
+import * as o from './output_ast';
+
+export class JavaScriptEmitter implements OutputEmitter {
+  emitStatements(genFilePath: string, stmts: o.Statement[], preamble: string = ''): string {
+    const converter = new JsEmitterVisitor();
+    const ctx = EmitterVisitorContext.createRoot();
+    converter.visitAllStatements(stmts, ctx);
+
+    const preambleLines = preamble ? preamble.split('\n') : [];
+    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('${importedModuleName}');`);
+    });
+
+    const sm = ctx.toSourceMapGenerator(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');
+  }
+}
+
+class JsEmitterVisitor extends AbstractJsEmitterVisitor {
+  importsWithPrefixes = new Map<string, string>();
+
+  visitExternalExpr(ast: o.ExternalExpr, ctx: EmitterVisitorContext): any {
+    const {name, moduleName} = ast.value;
+    if (moduleName) {
+      let prefix = this.importsWithPrefixes.get(moduleName);
+      if (prefix == null) {
+        prefix = `i${this.importsWithPrefixes.size}`;
+        this.importsWithPrefixes.set(moduleName, prefix);
+      }
+      ctx.print(ast, `${prefix}.`);
+    }
+    ctx.print(ast, name !);
+    return null;
+  }
+  visitDeclareVarStmt(stmt: o.DeclareVarStmt, ctx: EmitterVisitorContext): any {
+    super.visitDeclareVarStmt(stmt, ctx);
+    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 (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 (stmt.hasModifier(o.StmtModifier.Exported)) {
+      ctx.println(stmt, exportVar(stmt.name));
+    }
+    return null;
+  }
+}
+
+function exportVar(varName: string): string {
+  return `Object.defineProperty(exports, '${varName}', { get: function() { return ${varName}; }});`;
+}
diff --git a/packages/compiler/src/output/map_util.ts b/packages/compiler/src/output/map_util.ts
new file mode 100644
index 000000000000..359702bfc60f
--- /dev/null
+++ b/packages/compiler/src/output/map_util.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 * as o from './output_ast';
+
+export type MapEntry = {
+  key: string,
+  quoted: boolean,
+  value: o.Expression
+};
+
+export type MapLiteral = MapEntry[];
+
+export function mapEntry(key: string, value: o.Expression): MapEntry {
+  return {key, value, quoted: false};
+}
+
+export function mapLiteral(obj: {[key: string]: o.Expression}): o.Expression {
+  return o.literalMap(Object.keys(obj).map(key => ({
+                                             key,
+                                             quoted: false,
+                                             value: obj[key],
+                                           })));
+}
diff --git a/packages/compiler/src/output/output_ast.ts b/packages/compiler/src/output/output_ast.ts
new file mode 100644
index 000000000000..7ab277540082
--- /dev/null
+++ b/packages/compiler/src/output/output_ast.ts
@@ -0,0 +1,1612 @@
+/**
+ * @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 {error} from '../util';
+
+//// Types
+export enum TypeModifier {
+  Const
+}
+
+export abstract class Type {
+  constructor(public modifiers: TypeModifier[]|null = null) {
+    if (!modifiers) {
+      this.modifiers = [];
+    }
+  }
+  abstract visitType(visitor: TypeVisitor, context: any): any;
+
+  hasModifier(modifier: TypeModifier): boolean { return this.modifiers !.indexOf(modifier) !== -1; }
+}
+
+export enum BuiltinTypeName {
+  Dynamic,
+  Bool,
+  String,
+  Int,
+  Number,
+  Function,
+  Inferred,
+  None,
+}
+
+export class BuiltinType extends Type {
+  constructor(public name: BuiltinTypeName, modifiers: TypeModifier[]|null = null) {
+    super(modifiers);
+  }
+  visitType(visitor: TypeVisitor, context: any): any {
+    return visitor.visitBuiltinType(this, context);
+  }
+}
+
+export class ExpressionType extends Type {
+  constructor(
+      public value: Expression, modifiers: TypeModifier[]|null = null,
+      public typeParams: Type[]|null = null) {
+    super(modifiers);
+  }
+  visitType(visitor: TypeVisitor, context: any): any {
+    return visitor.visitExpressionType(this, context);
+  }
+}
+
+
+export class ArrayType extends Type {
+  constructor(public of : Type, modifiers: TypeModifier[]|null = null) { super(modifiers); }
+  visitType(visitor: TypeVisitor, context: any): any {
+    return visitor.visitArrayType(this, context);
+  }
+}
+
+
+export class MapType extends Type {
+  public valueType: Type|null;
+  constructor(valueType: Type|null|undefined, modifiers: TypeModifier[]|null = null) {
+    super(modifiers);
+    this.valueType = valueType || null;
+  }
+  visitType(visitor: TypeVisitor, context: any): any { return visitor.visitMapType(this, context); }
+}
+
+export const DYNAMIC_TYPE = new BuiltinType(BuiltinTypeName.Dynamic);
+export const INFERRED_TYPE = new BuiltinType(BuiltinTypeName.Inferred);
+export const BOOL_TYPE = new BuiltinType(BuiltinTypeName.Bool);
+export const INT_TYPE = new BuiltinType(BuiltinTypeName.Int);
+export const NUMBER_TYPE = new BuiltinType(BuiltinTypeName.Number);
+export const STRING_TYPE = new BuiltinType(BuiltinTypeName.String);
+export const FUNCTION_TYPE = new BuiltinType(BuiltinTypeName.Function);
+export const NONE_TYPE = new BuiltinType(BuiltinTypeName.None);
+
+export interface TypeVisitor {
+  visitBuiltinType(type: BuiltinType, context: any): any;
+  visitExpressionType(type: ExpressionType, context: any): any;
+  visitArrayType(type: ArrayType, context: any): any;
+  visitMapType(type: MapType, context: any): any;
+}
+
+///// Expressions
+
+export enum BinaryOperator {
+  Equals,
+  NotEquals,
+  Identical,
+  NotIdentical,
+  Minus,
+  Plus,
+  Divide,
+  Multiply,
+  Modulo,
+  And,
+  Or,
+  BitwiseAnd,
+  Lower,
+  LowerEquals,
+  Bigger,
+  BiggerEquals
+}
+
+export function nullSafeIsEquivalent<T extends{isEquivalent(other: T): boolean}>(
+    base: T | null, other: T | null) {
+  if (base == null || other == null) {
+    return base == other;
+  }
+  return base.isEquivalent(other);
+}
+
+export function areAllEquivalent<T extends{isEquivalent(other: T): boolean}>(
+    base: T[], other: T[]) {
+  const len = base.length;
+  if (len !== other.length) {
+    return false;
+  }
+  for (let i = 0; i < len; i++) {
+    if (!base[i].isEquivalent(other[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export abstract class Expression {
+  public type: Type|null;
+  public sourceSpan: ParseSourceSpan|null;
+
+  constructor(type: Type|null|undefined, sourceSpan?: ParseSourceSpan|null) {
+    this.type = type || null;
+    this.sourceSpan = sourceSpan || null;
+  }
+
+  abstract visitExpression(visitor: ExpressionVisitor, context: any): any;
+
+  /**
+   * Calculates whether this expression produces the same value as the given expression.
+   * Note: We don't check Types nor ParseSourceSpans nor function arguments.
+   */
+  abstract isEquivalent(e: Expression): boolean;
+
+  /**
+   * Return true if the expression is constant.
+   */
+  abstract isConstant(): boolean;
+
+  prop(name: string, sourceSpan?: ParseSourceSpan|null): ReadPropExpr {
+    return new ReadPropExpr(this, name, null, sourceSpan);
+  }
+
+  key(index: Expression, type?: Type|null, sourceSpan?: ParseSourceSpan|null): ReadKeyExpr {
+    return new ReadKeyExpr(this, index, type, sourceSpan);
+  }
+
+  callMethod(name: string|BuiltinMethod, params: Expression[], sourceSpan?: ParseSourceSpan|null):
+      InvokeMethodExpr {
+    return new InvokeMethodExpr(this, name, params, null, sourceSpan);
+  }
+
+  callFn(params: Expression[], sourceSpan?: ParseSourceSpan|null): InvokeFunctionExpr {
+    return new InvokeFunctionExpr(this, params, null, sourceSpan);
+  }
+
+  instantiate(params: Expression[], type?: Type|null, sourceSpan?: ParseSourceSpan|null):
+      InstantiateExpr {
+    return new InstantiateExpr(this, params, type, sourceSpan);
+  }
+
+  conditional(
+      trueCase: Expression, falseCase: Expression|null = null,
+      sourceSpan?: ParseSourceSpan|null): ConditionalExpr {
+    return new ConditionalExpr(this, trueCase, falseCase, null, sourceSpan);
+  }
+
+  equals(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.Equals, this, rhs, null, sourceSpan);
+  }
+  notEquals(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.NotEquals, this, rhs, null, sourceSpan);
+  }
+  identical(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.Identical, this, rhs, null, sourceSpan);
+  }
+  notIdentical(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.NotIdentical, this, rhs, null, sourceSpan);
+  }
+  minus(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.Minus, this, rhs, null, sourceSpan);
+  }
+  plus(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.Plus, this, rhs, null, sourceSpan);
+  }
+  divide(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.Divide, this, rhs, null, sourceSpan);
+  }
+  multiply(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.Multiply, this, rhs, null, sourceSpan);
+  }
+  modulo(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.Modulo, this, rhs, null, sourceSpan);
+  }
+  and(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.And, this, rhs, null, sourceSpan);
+  }
+  bitwiseAnd(rhs: Expression, sourceSpan?: ParseSourceSpan|null, parens: boolean = true):
+      BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.BitwiseAnd, this, rhs, null, sourceSpan, parens);
+  }
+  or(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.Or, this, rhs, null, sourceSpan);
+  }
+  lower(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.Lower, this, rhs, null, sourceSpan);
+  }
+  lowerEquals(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.LowerEquals, this, rhs, null, sourceSpan);
+  }
+  bigger(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.Bigger, this, rhs, null, sourceSpan);
+  }
+  biggerEquals(rhs: Expression, sourceSpan?: ParseSourceSpan|null): BinaryOperatorExpr {
+    return new BinaryOperatorExpr(BinaryOperator.BiggerEquals, this, rhs, null, sourceSpan);
+  }
+  isBlank(sourceSpan?: ParseSourceSpan|null): Expression {
+    // Note: We use equals by purpose here to compare to null and undefined in JS.
+    // We use the typed null to allow strictNullChecks to narrow types.
+    return this.equals(TYPED_NULL_EXPR, sourceSpan);
+  }
+  cast(type: Type, sourceSpan?: ParseSourceSpan|null): Expression {
+    return new CastExpr(this, type, sourceSpan);
+  }
+
+  toStmt(): Statement { return new ExpressionStatement(this, null); }
+}
+
+export enum BuiltinVar {
+  This,
+  Super,
+  CatchError,
+  CatchStack
+}
+
+export class ReadVarExpr extends Expression {
+  public name: string|null;
+  public builtin: BuiltinVar|null;
+
+  constructor(name: string|BuiltinVar, type?: Type|null, sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+    if (typeof name === 'string') {
+      this.name = name;
+      this.builtin = null;
+    } else {
+      this.name = null;
+      this.builtin = name;
+    }
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof ReadVarExpr && this.name === e.name && this.builtin === e.builtin;
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitReadVarExpr(this, context);
+  }
+
+  set(value: Expression): WriteVarExpr {
+    if (!this.name) {
+      throw new Error(`Built in variable ${this.builtin} can not be assigned to.`);
+    }
+    return new WriteVarExpr(this.name, value, null, this.sourceSpan);
+  }
+}
+
+export class TypeofExpr extends Expression {
+  constructor(public expr: Expression, type?: Type|null, sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+  }
+
+  visitExpression(visitor: ExpressionVisitor, context: any) {
+    return visitor.visitTypeofExpr(this, context);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof TypeofExpr && e.expr.isEquivalent(this.expr);
+  }
+
+  isConstant(): boolean { return this.expr.isConstant(); }
+}
+
+export class WrappedNodeExpr<T> extends Expression {
+  constructor(public node: T, type?: Type|null, sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof WrappedNodeExpr && this.node === e.node;
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitWrappedNodeExpr(this, context);
+  }
+}
+
+export class WriteVarExpr extends Expression {
+  public value: Expression;
+  constructor(
+      public name: string, value: Expression, type?: Type|null, sourceSpan?: ParseSourceSpan|null) {
+    super(type || value.type, sourceSpan);
+    this.value = value;
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof WriteVarExpr && this.name === e.name && this.value.isEquivalent(e.value);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitWriteVarExpr(this, context);
+  }
+
+  toDeclStmt(type?: Type|null, modifiers?: StmtModifier[]|null): DeclareVarStmt {
+    return new DeclareVarStmt(this.name, this.value, type, modifiers, this.sourceSpan);
+  }
+
+  toConstDecl(): DeclareVarStmt { return this.toDeclStmt(INFERRED_TYPE, [StmtModifier.Final]); }
+}
+
+
+export class WriteKeyExpr extends Expression {
+  public value: Expression;
+  constructor(
+      public receiver: Expression, public index: Expression, value: Expression, type?: Type|null,
+      sourceSpan?: ParseSourceSpan|null) {
+    super(type || value.type, sourceSpan);
+    this.value = value;
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof WriteKeyExpr && this.receiver.isEquivalent(e.receiver) &&
+        this.index.isEquivalent(e.index) && this.value.isEquivalent(e.value);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitWriteKeyExpr(this, context);
+  }
+}
+
+
+export class WritePropExpr extends Expression {
+  public value: Expression;
+  constructor(
+      public receiver: Expression, public name: string, value: Expression, type?: Type|null,
+      sourceSpan?: ParseSourceSpan|null) {
+    super(type || value.type, sourceSpan);
+    this.value = value;
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof WritePropExpr && this.receiver.isEquivalent(e.receiver) &&
+        this.name === e.name && this.value.isEquivalent(e.value);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitWritePropExpr(this, context);
+  }
+}
+
+export enum BuiltinMethod {
+  ConcatArray,
+  SubscribeObservable,
+  Bind
+}
+
+export class InvokeMethodExpr extends Expression {
+  public name: string|null;
+  public builtin: BuiltinMethod|null;
+  constructor(
+      public receiver: Expression, method: string|BuiltinMethod, public args: Expression[],
+      type?: Type|null, sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+    if (typeof method === 'string') {
+      this.name = method;
+      this.builtin = null;
+    } else {
+      this.name = null;
+      this.builtin = <BuiltinMethod>method;
+    }
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof InvokeMethodExpr && this.receiver.isEquivalent(e.receiver) &&
+        this.name === e.name && this.builtin === e.builtin && areAllEquivalent(this.args, e.args);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitInvokeMethodExpr(this, context);
+  }
+}
+
+
+export class InvokeFunctionExpr extends Expression {
+  constructor(
+      public fn: Expression, public args: Expression[], type?: Type|null,
+      sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof InvokeFunctionExpr && this.fn.isEquivalent(e.fn) &&
+        areAllEquivalent(this.args, e.args);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitInvokeFunctionExpr(this, context);
+  }
+}
+
+
+export class InstantiateExpr extends Expression {
+  constructor(
+      public classExpr: Expression, public args: Expression[], type?: Type|null,
+      sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof InstantiateExpr && this.classExpr.isEquivalent(e.classExpr) &&
+        areAllEquivalent(this.args, e.args);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitInstantiateExpr(this, context);
+  }
+}
+
+
+export class LiteralExpr extends Expression {
+  constructor(
+      public value: number|string|boolean|null|undefined, type?: Type|null,
+      sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof LiteralExpr && this.value === e.value;
+  }
+
+  isConstant() { return true; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitLiteralExpr(this, context);
+  }
+}
+
+
+export class ExternalExpr extends Expression {
+  constructor(
+      public value: ExternalReference, type?: Type|null, public typeParams: Type[]|null = null,
+      sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof ExternalExpr && this.value.name === e.value.name &&
+        this.value.moduleName === e.value.moduleName && this.value.runtime === e.value.runtime;
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitExternalExpr(this, context);
+  }
+}
+
+export class ExternalReference {
+  constructor(public moduleName: string|null, public name: string|null, public runtime?: any|null) {
+  }
+  // Note: no isEquivalent method here as we use this as an interface too.
+}
+
+export class ConditionalExpr extends Expression {
+  public trueCase: Expression;
+
+  constructor(
+      public condition: Expression, trueCase: Expression, public falseCase: Expression|null = null,
+      type?: Type|null, sourceSpan?: ParseSourceSpan|null) {
+    super(type || trueCase.type, sourceSpan);
+    this.trueCase = trueCase;
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof ConditionalExpr && this.condition.isEquivalent(e.condition) &&
+        this.trueCase.isEquivalent(e.trueCase) && nullSafeIsEquivalent(this.falseCase, e.falseCase);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitConditionalExpr(this, context);
+  }
+}
+
+
+export class NotExpr extends Expression {
+  constructor(public condition: Expression, sourceSpan?: ParseSourceSpan|null) {
+    super(BOOL_TYPE, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof NotExpr && this.condition.isEquivalent(e.condition);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitNotExpr(this, context);
+  }
+}
+
+export class AssertNotNull extends Expression {
+  constructor(public condition: Expression, sourceSpan?: ParseSourceSpan|null) {
+    super(condition.type, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof AssertNotNull && this.condition.isEquivalent(e.condition);
+  }
+
+  isConstant() { return false; }
+
+  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);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof CastExpr && this.value.isEquivalent(e.value);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitCastExpr(this, context);
+  }
+}
+
+
+export class FnParam {
+  constructor(public name: string, public type: Type|null = null) {}
+
+  isEquivalent(param: FnParam): boolean { return this.name === param.name; }
+}
+
+
+export class FunctionExpr extends Expression {
+  constructor(
+      public params: FnParam[], public statements: Statement[], type?: Type|null,
+      sourceSpan?: ParseSourceSpan|null, public name?: string|null) {
+    super(type, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof FunctionExpr && areAllEquivalent(this.params, e.params) &&
+        areAllEquivalent(this.statements, e.statements);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitFunctionExpr(this, context);
+  }
+
+  toDeclStmt(name: string, modifiers: StmtModifier[]|null = null): DeclareFunctionStmt {
+    return new DeclareFunctionStmt(
+        name, this.params, this.statements, this.type, modifiers, this.sourceSpan);
+  }
+}
+
+
+export class BinaryOperatorExpr extends Expression {
+  public lhs: Expression;
+  constructor(
+      public operator: BinaryOperator, lhs: Expression, public rhs: Expression, type?: Type|null,
+      sourceSpan?: ParseSourceSpan|null, public parens: boolean = true) {
+    super(type || lhs.type, sourceSpan);
+    this.lhs = lhs;
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof BinaryOperatorExpr && this.operator === e.operator &&
+        this.lhs.isEquivalent(e.lhs) && this.rhs.isEquivalent(e.rhs);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitBinaryOperatorExpr(this, context);
+  }
+}
+
+
+export class ReadPropExpr extends Expression {
+  constructor(
+      public receiver: Expression, public name: string, type?: Type|null,
+      sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof ReadPropExpr && this.receiver.isEquivalent(e.receiver) &&
+        this.name === e.name;
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitReadPropExpr(this, context);
+  }
+
+  set(value: Expression): WritePropExpr {
+    return new WritePropExpr(this.receiver, this.name, value, null, this.sourceSpan);
+  }
+}
+
+
+export class ReadKeyExpr extends Expression {
+  constructor(
+      public receiver: Expression, public index: Expression, type?: Type|null,
+      sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof ReadKeyExpr && this.receiver.isEquivalent(e.receiver) &&
+        this.index.isEquivalent(e.index);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitReadKeyExpr(this, context);
+  }
+
+  set(value: Expression): WriteKeyExpr {
+    return new WriteKeyExpr(this.receiver, this.index, value, null, this.sourceSpan);
+  }
+}
+
+
+export class LiteralArrayExpr extends Expression {
+  public entries: Expression[];
+  constructor(entries: Expression[], type?: Type|null, sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+    this.entries = entries;
+  }
+
+  isConstant() { return this.entries.every(e => e.isConstant()); }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof LiteralArrayExpr && areAllEquivalent(this.entries, e.entries);
+  }
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitLiteralArrayExpr(this, context);
+  }
+}
+
+export class LiteralMapEntry {
+  constructor(public key: string, public value: Expression, public quoted: boolean) {}
+  isEquivalent(e: LiteralMapEntry): boolean {
+    return this.key === e.key && this.value.isEquivalent(e.value);
+  }
+}
+
+export class LiteralMapExpr extends Expression {
+  public valueType: Type|null = null;
+  constructor(
+      public entries: LiteralMapEntry[], type?: MapType|null, sourceSpan?: ParseSourceSpan|null) {
+    super(type, sourceSpan);
+    if (type) {
+      this.valueType = type.valueType;
+    }
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof LiteralMapExpr && areAllEquivalent(this.entries, e.entries);
+  }
+
+  isConstant() { return this.entries.every(e => e.value.isConstant()); }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitLiteralMapExpr(this, context);
+  }
+}
+
+export class CommaExpr extends Expression {
+  constructor(public parts: Expression[], sourceSpan?: ParseSourceSpan|null) {
+    super(parts[parts.length - 1].type, sourceSpan);
+  }
+
+  isEquivalent(e: Expression): boolean {
+    return e instanceof CommaExpr && areAllEquivalent(this.parts, e.parts);
+  }
+
+  isConstant() { return false; }
+
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitCommaExpr(this, context);
+  }
+}
+
+export interface ExpressionVisitor {
+  visitReadVarExpr(ast: ReadVarExpr, context: any): any;
+  visitWriteVarExpr(expr: WriteVarExpr, context: any): any;
+  visitWriteKeyExpr(expr: WriteKeyExpr, context: any): any;
+  visitWritePropExpr(expr: WritePropExpr, context: any): any;
+  visitInvokeMethodExpr(ast: InvokeMethodExpr, context: any): any;
+  visitInvokeFunctionExpr(ast: InvokeFunctionExpr, context: any): any;
+  visitInstantiateExpr(ast: InstantiateExpr, context: any): any;
+  visitLiteralExpr(ast: LiteralExpr, context: any): any;
+  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;
+  visitReadPropExpr(ast: ReadPropExpr, context: any): any;
+  visitReadKeyExpr(ast: ReadKeyExpr, context: any): any;
+  visitLiteralArrayExpr(ast: LiteralArrayExpr, context: any): any;
+  visitLiteralMapExpr(ast: LiteralMapExpr, context: any): any;
+  visitCommaExpr(ast: CommaExpr, context: any): any;
+  visitWrappedNodeExpr(ast: WrappedNodeExpr<any>, context: any): any;
+  visitTypeofExpr(ast: TypeofExpr, context: any): any;
+}
+
+export const THIS_EXPR = new ReadVarExpr(BuiltinVar.This, null, null);
+export const SUPER_EXPR = new ReadVarExpr(BuiltinVar.Super, null, null);
+export const CATCH_ERROR_VAR = new ReadVarExpr(BuiltinVar.CatchError, null, null);
+export const CATCH_STACK_VAR = new ReadVarExpr(BuiltinVar.CatchStack, null, null);
+export const NULL_EXPR = new LiteralExpr(null, null, null);
+export const TYPED_NULL_EXPR = new LiteralExpr(null, INFERRED_TYPE, null);
+
+//// Statements
+export enum StmtModifier {
+  Final,
+  Private,
+  Exported,
+  Static,
+}
+
+export abstract class Statement {
+  public modifiers: StmtModifier[];
+  public sourceSpan: ParseSourceSpan|null;
+  constructor(modifiers?: StmtModifier[]|null, sourceSpan?: ParseSourceSpan|null) {
+    this.modifiers = modifiers || [];
+    this.sourceSpan = sourceSpan || null;
+  }
+  /**
+   * Calculates whether this statement produces the same value as the given statement.
+   * Note: We don't check Types nor ParseSourceSpans nor function arguments.
+   */
+  abstract isEquivalent(stmt: Statement): boolean;
+
+  abstract visitStatement(visitor: StatementVisitor, context: any): any;
+
+  hasModifier(modifier: StmtModifier): boolean { return this.modifiers !.indexOf(modifier) !== -1; }
+}
+
+
+export class DeclareVarStmt extends Statement {
+  public type: Type|null;
+  constructor(
+      public name: string, public value?: Expression, type?: Type|null,
+      modifiers: StmtModifier[]|null = null, sourceSpan?: ParseSourceSpan|null) {
+    super(modifiers, sourceSpan);
+    this.type = type || (value && value.type) || null;
+  }
+  isEquivalent(stmt: Statement): boolean {
+    return stmt instanceof DeclareVarStmt && this.name === stmt.name &&
+        (this.value ? !!stmt.value && this.value.isEquivalent(stmt.value) : !stmt.value);
+  }
+  visitStatement(visitor: StatementVisitor, context: any): any {
+    return visitor.visitDeclareVarStmt(this, context);
+  }
+}
+
+export class DeclareFunctionStmt extends Statement {
+  public type: Type|null;
+  constructor(
+      public name: string, public params: FnParam[], public statements: Statement[],
+      type?: Type|null, modifiers: StmtModifier[]|null = null, sourceSpan?: ParseSourceSpan|null) {
+    super(modifiers, sourceSpan);
+    this.type = type || null;
+  }
+  isEquivalent(stmt: Statement): boolean {
+    return stmt instanceof DeclareFunctionStmt && areAllEquivalent(this.params, stmt.params) &&
+        areAllEquivalent(this.statements, stmt.statements);
+  }
+
+  visitStatement(visitor: StatementVisitor, context: any): any {
+    return visitor.visitDeclareFunctionStmt(this, context);
+  }
+}
+
+export class ExpressionStatement extends Statement {
+  constructor(public expr: Expression, sourceSpan?: ParseSourceSpan|null) {
+    super(null, sourceSpan);
+  }
+  isEquivalent(stmt: Statement): boolean {
+    return stmt instanceof ExpressionStatement && this.expr.isEquivalent(stmt.expr);
+  }
+
+  visitStatement(visitor: StatementVisitor, context: any): any {
+    return visitor.visitExpressionStmt(this, context);
+  }
+}
+
+
+export class ReturnStatement extends Statement {
+  constructor(public value: Expression, sourceSpan?: ParseSourceSpan|null) {
+    super(null, sourceSpan);
+  }
+  isEquivalent(stmt: Statement): boolean {
+    return stmt instanceof ReturnStatement && this.value.isEquivalent(stmt.value);
+  }
+  visitStatement(visitor: StatementVisitor, context: any): any {
+    return visitor.visitReturnStmt(this, context);
+  }
+}
+
+export class AbstractClassPart {
+  public type: Type|null;
+  constructor(type: Type|null|undefined, public modifiers: StmtModifier[]|null) {
+    if (!modifiers) {
+      this.modifiers = [];
+    }
+    this.type = type || null;
+  }
+  hasModifier(modifier: StmtModifier): boolean { return this.modifiers !.indexOf(modifier) !== -1; }
+}
+
+export class ClassField extends AbstractClassPart {
+  constructor(
+      public name: string, type?: Type|null, modifiers: StmtModifier[]|null = null,
+      public initializer?: Expression) {
+    super(type, modifiers);
+  }
+  isEquivalent(f: ClassField) { return this.name === f.name; }
+}
+
+
+export class ClassMethod extends AbstractClassPart {
+  constructor(
+      public name: string|null, public params: FnParam[], public body: Statement[],
+      type?: Type|null, modifiers: StmtModifier[]|null = null) {
+    super(type, modifiers);
+  }
+  isEquivalent(m: ClassMethod) {
+    return this.name === m.name && areAllEquivalent(this.body, m.body);
+  }
+}
+
+
+export class ClassGetter extends AbstractClassPart {
+  constructor(
+      public name: string, public body: Statement[], type?: Type|null,
+      modifiers: StmtModifier[]|null = null) {
+    super(type, modifiers);
+  }
+  isEquivalent(m: ClassGetter) {
+    return this.name === m.name && areAllEquivalent(this.body, m.body);
+  }
+}
+
+
+export class ClassStmt extends Statement {
+  constructor(
+      public name: string, public parent: Expression|null, public fields: ClassField[],
+      public getters: ClassGetter[], public constructorMethod: ClassMethod,
+      public methods: ClassMethod[], modifiers: StmtModifier[]|null = null,
+      sourceSpan?: ParseSourceSpan|null) {
+    super(modifiers, sourceSpan);
+  }
+  isEquivalent(stmt: Statement): boolean {
+    return stmt instanceof ClassStmt && this.name === stmt.name &&
+        nullSafeIsEquivalent(this.parent, stmt.parent) &&
+        areAllEquivalent(this.fields, stmt.fields) &&
+        areAllEquivalent(this.getters, stmt.getters) &&
+        this.constructorMethod.isEquivalent(stmt.constructorMethod) &&
+        areAllEquivalent(this.methods, stmt.methods);
+  }
+  visitStatement(visitor: StatementVisitor, context: any): any {
+    return visitor.visitDeclareClassStmt(this, context);
+  }
+}
+
+
+export class IfStmt extends Statement {
+  constructor(
+      public condition: Expression, public trueCase: Statement[],
+      public falseCase: Statement[] = [], sourceSpan?: ParseSourceSpan|null) {
+    super(null, sourceSpan);
+  }
+  isEquivalent(stmt: Statement): boolean {
+    return stmt instanceof IfStmt && this.condition.isEquivalent(stmt.condition) &&
+        areAllEquivalent(this.trueCase, stmt.trueCase) &&
+        areAllEquivalent(this.falseCase, stmt.falseCase);
+  }
+  visitStatement(visitor: StatementVisitor, context: any): any {
+    return visitor.visitIfStmt(this, context);
+  }
+}
+
+export class CommentStmt extends Statement {
+  constructor(public comment: string, public multiline = false, sourceSpan?: ParseSourceSpan|null) {
+    super(null, sourceSpan);
+  }
+  isEquivalent(stmt: Statement): boolean { return stmt instanceof CommentStmt; }
+  visitStatement(visitor: StatementVisitor, context: any): any {
+    return visitor.visitCommentStmt(this, context);
+  }
+}
+
+export class JSDocCommentStmt extends Statement {
+  constructor(public tags: JSDocTag[] = [], sourceSpan?: ParseSourceSpan|null) {
+    super(null, sourceSpan);
+  }
+  isEquivalent(stmt: Statement): boolean {
+    return stmt instanceof JSDocCommentStmt && this.toString() === stmt.toString();
+  }
+  visitStatement(visitor: StatementVisitor, context: any): any {
+    return visitor.visitJSDocCommentStmt(this, context);
+  }
+  toString(): string { return serializeTags(this.tags); }
+}
+
+export class TryCatchStmt extends Statement {
+  constructor(
+      public bodyStmts: Statement[], public catchStmts: Statement[],
+      sourceSpan?: ParseSourceSpan|null) {
+    super(null, sourceSpan);
+  }
+  isEquivalent(stmt: Statement): boolean {
+    return stmt instanceof TryCatchStmt && areAllEquivalent(this.bodyStmts, stmt.bodyStmts) &&
+        areAllEquivalent(this.catchStmts, stmt.catchStmts);
+  }
+  visitStatement(visitor: StatementVisitor, context: any): any {
+    return visitor.visitTryCatchStmt(this, context);
+  }
+}
+
+
+export class ThrowStmt extends Statement {
+  constructor(public error: Expression, sourceSpan?: ParseSourceSpan|null) {
+    super(null, sourceSpan);
+  }
+  isEquivalent(stmt: ThrowStmt): boolean {
+    return stmt instanceof TryCatchStmt && this.error.isEquivalent(stmt.error);
+  }
+  visitStatement(visitor: StatementVisitor, context: any): any {
+    return visitor.visitThrowStmt(this, context);
+  }
+}
+
+export interface StatementVisitor {
+  visitDeclareVarStmt(stmt: DeclareVarStmt, context: any): any;
+  visitDeclareFunctionStmt(stmt: DeclareFunctionStmt, context: any): any;
+  visitExpressionStmt(stmt: ExpressionStatement, context: any): any;
+  visitReturnStmt(stmt: ReturnStatement, context: any): any;
+  visitDeclareClassStmt(stmt: ClassStmt, context: any): any;
+  visitIfStmt(stmt: IfStmt, context: any): any;
+  visitTryCatchStmt(stmt: TryCatchStmt, context: any): any;
+  visitThrowStmt(stmt: ThrowStmt, context: any): any;
+  visitCommentStmt(stmt: CommentStmt, context: any): any;
+  visitJSDocCommentStmt(stmt: JSDocCommentStmt, context: any): any;
+}
+
+export class AstTransformer implements StatementVisitor, ExpressionVisitor {
+  transformExpr(expr: Expression, context: any): Expression { return expr; }
+
+  transformStmt(stmt: Statement, context: any): Statement { return stmt; }
+
+  visitReadVarExpr(ast: ReadVarExpr, context: any): any { return this.transformExpr(ast, context); }
+
+  visitWrappedNodeExpr(ast: WrappedNodeExpr<any>, context: any): any {
+    return this.transformExpr(ast, context);
+  }
+
+  visitTypeofExpr(expr: TypeofExpr, context: any): any {
+    return this.transformExpr(
+        new TypeofExpr(expr.expr.visitExpression(this, context), expr.type, expr.sourceSpan),
+        context);
+  }
+
+  visitWriteVarExpr(expr: WriteVarExpr, context: any): any {
+    return this.transformExpr(
+        new WriteVarExpr(
+            expr.name, expr.value.visitExpression(this, context), expr.type, expr.sourceSpan),
+        context);
+  }
+
+  visitWriteKeyExpr(expr: WriteKeyExpr, context: any): any {
+    return this.transformExpr(
+        new WriteKeyExpr(
+            expr.receiver.visitExpression(this, context), expr.index.visitExpression(this, context),
+            expr.value.visitExpression(this, context), expr.type, expr.sourceSpan),
+        context);
+  }
+
+  visitWritePropExpr(expr: WritePropExpr, context: any): any {
+    return this.transformExpr(
+        new WritePropExpr(
+            expr.receiver.visitExpression(this, context), expr.name,
+            expr.value.visitExpression(this, context), expr.type, expr.sourceSpan),
+        context);
+  }
+
+  visitInvokeMethodExpr(ast: InvokeMethodExpr, context: any): any {
+    const method = ast.builtin || ast.name;
+    return this.transformExpr(
+        new InvokeMethodExpr(
+            ast.receiver.visitExpression(this, context), method !,
+            this.visitAllExpressions(ast.args, context), ast.type, ast.sourceSpan),
+        context);
+  }
+
+  visitInvokeFunctionExpr(ast: InvokeFunctionExpr, context: any): any {
+    return this.transformExpr(
+        new InvokeFunctionExpr(
+            ast.fn.visitExpression(this, context), this.visitAllExpressions(ast.args, context),
+            ast.type, ast.sourceSpan),
+        context);
+  }
+
+  visitInstantiateExpr(ast: InstantiateExpr, context: any): any {
+    return this.transformExpr(
+        new InstantiateExpr(
+            ast.classExpr.visitExpression(this, context),
+            this.visitAllExpressions(ast.args, context), ast.type, ast.sourceSpan),
+        context);
+  }
+
+  visitLiteralExpr(ast: LiteralExpr, context: any): any { return this.transformExpr(ast, context); }
+
+  visitExternalExpr(ast: ExternalExpr, context: any): any {
+    return this.transformExpr(ast, context);
+  }
+
+  visitConditionalExpr(ast: ConditionalExpr, context: any): any {
+    return this.transformExpr(
+        new ConditionalExpr(
+            ast.condition.visitExpression(this, context),
+            ast.trueCase.visitExpression(this, context),
+            ast.falseCase !.visitExpression(this, context), ast.type, ast.sourceSpan),
+        context);
+  }
+
+  visitNotExpr(ast: NotExpr, context: any): any {
+    return this.transformExpr(
+        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);
+  }
+
+  visitFunctionExpr(ast: FunctionExpr, context: any): any {
+    return this.transformExpr(
+        new FunctionExpr(
+            ast.params, this.visitAllStatements(ast.statements, context), ast.type, ast.sourceSpan),
+        context);
+  }
+
+  visitBinaryOperatorExpr(ast: BinaryOperatorExpr, context: any): any {
+    return this.transformExpr(
+        new BinaryOperatorExpr(
+            ast.operator, ast.lhs.visitExpression(this, context),
+            ast.rhs.visitExpression(this, context), ast.type, ast.sourceSpan),
+        context);
+  }
+
+  visitReadPropExpr(ast: ReadPropExpr, context: any): any {
+    return this.transformExpr(
+        new ReadPropExpr(
+            ast.receiver.visitExpression(this, context), ast.name, ast.type, ast.sourceSpan),
+        context);
+  }
+
+  visitReadKeyExpr(ast: ReadKeyExpr, context: any): any {
+    return this.transformExpr(
+        new ReadKeyExpr(
+            ast.receiver.visitExpression(this, context), ast.index.visitExpression(this, context),
+            ast.type, ast.sourceSpan),
+        context);
+  }
+
+  visitLiteralArrayExpr(ast: LiteralArrayExpr, context: any): any {
+    return this.transformExpr(
+        new LiteralArrayExpr(
+            this.visitAllExpressions(ast.entries, context), ast.type, ast.sourceSpan),
+        context);
+  }
+
+  visitLiteralMapExpr(ast: LiteralMapExpr, context: any): any {
+    const entries = ast.entries.map(
+        (entry): LiteralMapEntry => new LiteralMapEntry(
+            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);
+  }
+  visitCommaExpr(ast: CommaExpr, context: any): any {
+    return this.transformExpr(
+        new CommaExpr(this.visitAllExpressions(ast.parts, context), ast.sourceSpan), context);
+  }
+  visitAllExpressions(exprs: Expression[], context: any): Expression[] {
+    return exprs.map(expr => expr.visitExpression(this, context));
+  }
+
+  visitDeclareVarStmt(stmt: DeclareVarStmt, context: any): any {
+    const value = stmt.value && stmt.value.visitExpression(this, context);
+    return this.transformStmt(
+        new DeclareVarStmt(stmt.name, value, stmt.type, stmt.modifiers, stmt.sourceSpan), context);
+  }
+  visitDeclareFunctionStmt(stmt: DeclareFunctionStmt, context: any): any {
+    return this.transformStmt(
+        new DeclareFunctionStmt(
+            stmt.name, stmt.params, this.visitAllStatements(stmt.statements, context), stmt.type,
+            stmt.modifiers, stmt.sourceSpan),
+        context);
+  }
+
+  visitExpressionStmt(stmt: ExpressionStatement, context: any): any {
+    return this.transformStmt(
+        new ExpressionStatement(stmt.expr.visitExpression(this, context), stmt.sourceSpan),
+        context);
+  }
+
+  visitReturnStmt(stmt: ReturnStatement, context: any): any {
+    return this.transformStmt(
+        new ReturnStatement(stmt.value.visitExpression(this, context), stmt.sourceSpan), context);
+  }
+
+  visitDeclareClassStmt(stmt: ClassStmt, context: any): any {
+    const parent = stmt.parent !.visitExpression(this, context);
+    const getters = stmt.getters.map(
+        getter => new ClassGetter(
+            getter.name, this.visitAllStatements(getter.body, context), getter.type,
+            getter.modifiers));
+    const ctorMethod = stmt.constructorMethod &&
+        new ClassMethod(stmt.constructorMethod.name, stmt.constructorMethod.params,
+                        this.visitAllStatements(stmt.constructorMethod.body, context),
+                        stmt.constructorMethod.type, stmt.constructorMethod.modifiers);
+    const methods = stmt.methods.map(
+        method => new ClassMethod(
+            method.name, method.params, this.visitAllStatements(method.body, context), method.type,
+            method.modifiers));
+    return this.transformStmt(
+        new ClassStmt(
+            stmt.name, parent, stmt.fields, getters, ctorMethod, methods, stmt.modifiers,
+            stmt.sourceSpan),
+        context);
+  }
+
+  visitIfStmt(stmt: IfStmt, context: any): any {
+    return this.transformStmt(
+        new IfStmt(
+            stmt.condition.visitExpression(this, context),
+            this.visitAllStatements(stmt.trueCase, context),
+            this.visitAllStatements(stmt.falseCase, context), stmt.sourceSpan),
+        context);
+  }
+
+  visitTryCatchStmt(stmt: TryCatchStmt, context: any): any {
+    return this.transformStmt(
+        new TryCatchStmt(
+            this.visitAllStatements(stmt.bodyStmts, context),
+            this.visitAllStatements(stmt.catchStmts, context), stmt.sourceSpan),
+        context);
+  }
+
+  visitThrowStmt(stmt: ThrowStmt, context: any): any {
+    return this.transformStmt(
+        new ThrowStmt(stmt.error.visitExpression(this, context), stmt.sourceSpan), context);
+  }
+
+  visitCommentStmt(stmt: CommentStmt, context: any): any {
+    return this.transformStmt(stmt, context);
+  }
+
+  visitJSDocCommentStmt(stmt: JSDocCommentStmt, context: any): any {
+    return this.transformStmt(stmt, context);
+  }
+
+  visitAllStatements(stmts: Statement[], context: any): Statement[] {
+    return stmts.map(stmt => stmt.visitStatement(this, context));
+  }
+}
+
+
+export class RecursiveAstVisitor implements StatementVisitor, ExpressionVisitor {
+  visitType(ast: Type, context: any): any { return ast; }
+  visitExpression(ast: Expression, context: any): any {
+    if (ast.type) {
+      ast.type.visitType(this, context);
+    }
+    return ast;
+  }
+  visitBuiltinType(type: BuiltinType, context: any): any { return this.visitType(type, context); }
+  visitExpressionType(type: ExpressionType, context: any): any {
+    type.value.visitExpression(this, context);
+    if (type.typeParams !== null) {
+      type.typeParams.forEach(param => this.visitType(param, context));
+    }
+    return this.visitType(type, context);
+  }
+  visitArrayType(type: ArrayType, context: any): any { return this.visitType(type, context); }
+  visitMapType(type: MapType, context: any): any { return this.visitType(type, context); }
+  visitWrappedNodeExpr(ast: WrappedNodeExpr<any>, context: any): any { return ast; }
+  visitTypeofExpr(ast: TypeofExpr, context: any): any { return this.visitExpression(ast, context); }
+  visitReadVarExpr(ast: ReadVarExpr, context: any): any {
+    return this.visitExpression(ast, context);
+  }
+  visitWriteVarExpr(ast: WriteVarExpr, context: any): any {
+    ast.value.visitExpression(this, context);
+    return this.visitExpression(ast, context);
+  }
+  visitWriteKeyExpr(ast: WriteKeyExpr, context: any): any {
+    ast.receiver.visitExpression(this, context);
+    ast.index.visitExpression(this, context);
+    ast.value.visitExpression(this, context);
+    return this.visitExpression(ast, context);
+  }
+  visitWritePropExpr(ast: WritePropExpr, context: any): any {
+    ast.receiver.visitExpression(this, context);
+    ast.value.visitExpression(this, context);
+    return this.visitExpression(ast, context);
+  }
+  visitInvokeMethodExpr(ast: InvokeMethodExpr, context: any): any {
+    ast.receiver.visitExpression(this, context);
+    this.visitAllExpressions(ast.args, context);
+    return this.visitExpression(ast, context);
+  }
+  visitInvokeFunctionExpr(ast: InvokeFunctionExpr, context: any): any {
+    ast.fn.visitExpression(this, context);
+    this.visitAllExpressions(ast.args, context);
+    return this.visitExpression(ast, context);
+  }
+  visitInstantiateExpr(ast: InstantiateExpr, context: any): any {
+    ast.classExpr.visitExpression(this, context);
+    this.visitAllExpressions(ast.args, context);
+    return this.visitExpression(ast, context);
+  }
+  visitLiteralExpr(ast: LiteralExpr, context: any): any {
+    return this.visitExpression(ast, context);
+  }
+  visitExternalExpr(ast: ExternalExpr, context: any): any {
+    if (ast.typeParams) {
+      ast.typeParams.forEach(type => type.visitType(this, context));
+    }
+    return this.visitExpression(ast, context);
+  }
+  visitConditionalExpr(ast: ConditionalExpr, context: any): any {
+    ast.condition.visitExpression(this, context);
+    ast.trueCase.visitExpression(this, context);
+    ast.falseCase !.visitExpression(this, context);
+    return this.visitExpression(ast, context);
+  }
+  visitNotExpr(ast: NotExpr, context: any): any {
+    ast.condition.visitExpression(this, context);
+    return this.visitExpression(ast, context);
+  }
+  visitAssertNotNullExpr(ast: AssertNotNull, context: any): any {
+    ast.condition.visitExpression(this, context);
+    return this.visitExpression(ast, context);
+  }
+  visitCastExpr(ast: CastExpr, context: any): any {
+    ast.value.visitExpression(this, context);
+    return this.visitExpression(ast, context);
+  }
+  visitFunctionExpr(ast: FunctionExpr, context: any): any {
+    this.visitAllStatements(ast.statements, context);
+    return this.visitExpression(ast, context);
+  }
+  visitBinaryOperatorExpr(ast: BinaryOperatorExpr, context: any): any {
+    ast.lhs.visitExpression(this, context);
+    ast.rhs.visitExpression(this, context);
+    return this.visitExpression(ast, context);
+  }
+  visitReadPropExpr(ast: ReadPropExpr, context: any): any {
+    ast.receiver.visitExpression(this, context);
+    return this.visitExpression(ast, context);
+  }
+  visitReadKeyExpr(ast: ReadKeyExpr, context: any): any {
+    ast.receiver.visitExpression(this, context);
+    ast.index.visitExpression(this, context);
+    return this.visitExpression(ast, context);
+  }
+  visitLiteralArrayExpr(ast: LiteralArrayExpr, context: any): any {
+    this.visitAllExpressions(ast.entries, context);
+    return this.visitExpression(ast, context);
+  }
+  visitLiteralMapExpr(ast: LiteralMapExpr, context: any): any {
+    ast.entries.forEach((entry) => entry.value.visitExpression(this, context));
+    return this.visitExpression(ast, context);
+  }
+  visitCommaExpr(ast: CommaExpr, context: any): any {
+    this.visitAllExpressions(ast.parts, context);
+    return this.visitExpression(ast, context);
+  }
+  visitAllExpressions(exprs: Expression[], context: any): void {
+    exprs.forEach(expr => expr.visitExpression(this, context));
+  }
+
+  visitDeclareVarStmt(stmt: DeclareVarStmt, context: any): any {
+    if (stmt.value) {
+      stmt.value.visitExpression(this, context);
+    }
+    if (stmt.type) {
+      stmt.type.visitType(this, context);
+    }
+    return stmt;
+  }
+  visitDeclareFunctionStmt(stmt: DeclareFunctionStmt, context: any): any {
+    this.visitAllStatements(stmt.statements, context);
+    if (stmt.type) {
+      stmt.type.visitType(this, context);
+    }
+    return stmt;
+  }
+  visitExpressionStmt(stmt: ExpressionStatement, context: any): any {
+    stmt.expr.visitExpression(this, context);
+    return stmt;
+  }
+  visitReturnStmt(stmt: ReturnStatement, context: any): any {
+    stmt.value.visitExpression(this, context);
+    return stmt;
+  }
+  visitDeclareClassStmt(stmt: ClassStmt, context: any): any {
+    stmt.parent !.visitExpression(this, context);
+    stmt.getters.forEach(getter => this.visitAllStatements(getter.body, context));
+    if (stmt.constructorMethod) {
+      this.visitAllStatements(stmt.constructorMethod.body, context);
+    }
+    stmt.methods.forEach(method => this.visitAllStatements(method.body, context));
+    return stmt;
+  }
+  visitIfStmt(stmt: IfStmt, context: any): any {
+    stmt.condition.visitExpression(this, context);
+    this.visitAllStatements(stmt.trueCase, context);
+    this.visitAllStatements(stmt.falseCase, context);
+    return stmt;
+  }
+  visitTryCatchStmt(stmt: TryCatchStmt, context: any): any {
+    this.visitAllStatements(stmt.bodyStmts, context);
+    this.visitAllStatements(stmt.catchStmts, context);
+    return stmt;
+  }
+  visitThrowStmt(stmt: ThrowStmt, context: any): any {
+    stmt.error.visitExpression(this, context);
+    return stmt;
+  }
+  visitCommentStmt(stmt: CommentStmt, context: any): any { return stmt; }
+  visitJSDocCommentStmt(stmt: JSDocCommentStmt, context: any): any { return stmt; }
+  visitAllStatements(stmts: Statement[], context: any): void {
+    stmts.forEach(stmt => stmt.visitStatement(this, context));
+  }
+}
+
+export function findReadVarNames(stmts: Statement[]): Set<string> {
+  const visitor = new _ReadVarVisitor();
+  visitor.visitAllStatements(stmts, null);
+  return visitor.varNames;
+}
+
+class _ReadVarVisitor extends RecursiveAstVisitor {
+  varNames = new Set<string>();
+  visitDeclareFunctionStmt(stmt: DeclareFunctionStmt, context: any): any {
+    // Don't descend into nested functions
+    return stmt;
+  }
+  visitDeclareClassStmt(stmt: ClassStmt, context: any): any {
+    // Don't descend into nested classes
+    return stmt;
+  }
+  visitReadVarExpr(ast: ReadVarExpr, context: any): any {
+    if (ast.name) {
+      this.varNames.add(ast.name);
+    }
+    return null;
+  }
+}
+
+export function collectExternalReferences(stmts: Statement[]): ExternalReference[] {
+  const visitor = new _FindExternalReferencesVisitor();
+  visitor.visitAllStatements(stmts, null);
+  return visitor.externalReferences;
+}
+
+class _FindExternalReferencesVisitor extends RecursiveAstVisitor {
+  externalReferences: ExternalReference[] = [];
+  visitExternalExpr(e: ExternalExpr, context: any) {
+    this.externalReferences.push(e.value);
+    return super.visitExternalExpr(e, context);
+  }
+}
+
+export function applySourceSpanToStatementIfNeeded(
+    stmt: Statement, sourceSpan: ParseSourceSpan | null): Statement {
+  if (!sourceSpan) {
+    return stmt;
+  }
+  const transformer = new _ApplySourceSpanTransformer(sourceSpan);
+  return stmt.visitStatement(transformer, null);
+}
+
+export function applySourceSpanToExpressionIfNeeded(
+    expr: Expression, sourceSpan: ParseSourceSpan | null): Expression {
+  if (!sourceSpan) {
+    return expr;
+  }
+  const transformer = new _ApplySourceSpanTransformer(sourceSpan);
+  return expr.visitExpression(transformer, null);
+}
+
+class _ApplySourceSpanTransformer extends AstTransformer {
+  constructor(private sourceSpan: ParseSourceSpan) { super(); }
+  private _clone(obj: any): any {
+    const clone = Object.create(obj.constructor.prototype);
+    for (let prop in obj) {
+      clone[prop] = obj[prop];
+    }
+    return clone;
+  }
+
+  transformExpr(expr: Expression, context: any): Expression {
+    if (!expr.sourceSpan) {
+      expr = this._clone(expr);
+      expr.sourceSpan = this.sourceSpan;
+    }
+    return expr;
+  }
+
+  transformStmt(stmt: Statement, context: any): Statement {
+    if (!stmt.sourceSpan) {
+      stmt = this._clone(stmt);
+      stmt.sourceSpan = this.sourceSpan;
+    }
+    return stmt;
+  }
+}
+
+export function variable(
+    name: string, type?: Type | null, sourceSpan?: ParseSourceSpan | null): ReadVarExpr {
+  return new ReadVarExpr(name, type, sourceSpan);
+}
+
+export function importExpr(
+    id: ExternalReference, typeParams: Type[] | null = null,
+    sourceSpan?: ParseSourceSpan | null): ExternalExpr {
+  return new ExternalExpr(id, null, typeParams, sourceSpan);
+}
+
+export function importType(
+    id: ExternalReference, typeParams: Type[] | null = null,
+    typeModifiers: TypeModifier[] | null = null): ExpressionType|null {
+  return id != null ? expressionType(importExpr(id, typeParams, null), typeModifiers) : null;
+}
+
+export function expressionType(
+    expr: Expression, typeModifiers: TypeModifier[] | null = null,
+    typeParams: Type[] | null = null): ExpressionType {
+  return new ExpressionType(expr, typeModifiers, typeParams);
+}
+
+export function typeofExpr(expr: Expression) {
+  return new TypeofExpr(expr);
+}
+
+export function literalArr(
+    values: Expression[], type?: Type | null,
+    sourceSpan?: ParseSourceSpan | null): LiteralArrayExpr {
+  return new LiteralArrayExpr(values, type, sourceSpan);
+}
+
+export function literalMap(
+    values: {key: string, quoted: boolean, value: Expression}[],
+    type: MapType | null = null): LiteralMapExpr {
+  return new LiteralMapExpr(
+      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,
+    name?: string | null): FunctionExpr {
+  return new FunctionExpr(params, body, type, sourceSpan, name);
+}
+
+export function ifStmt(condition: Expression, thenClause: Statement[], elseClause?: Statement[]) {
+  return new IfStmt(condition, thenClause, elseClause);
+}
+
+export function literal(
+    value: any, type?: Type | null, sourceSpan?: ParseSourceSpan | null): LiteralExpr {
+  return new LiteralExpr(value, type, sourceSpan);
+}
+
+export function isNull(exp: Expression): boolean {
+  return exp instanceof LiteralExpr && exp.value === null;
+}
+
+// The list of JSDoc tags that we currently support. Extend it if needed.
+export const enum JSDocTagName {
+  Desc = 'desc',
+  Id = 'id',
+  Meaning = 'meaning',
+}
+
+/*
+ * TypeScript has an API for JSDoc already, but it's not exposed.
+ * https://github.com/Microsoft/TypeScript/issues/7393
+ * For now we create types that are similar to theirs so that migrating
+ * to their API will be easier. See e.g. `ts.JSDocTag` and `ts.JSDocComment`.
+ */
+export type JSDocTag = {
+  // `tagName` is e.g. "param" in an `@param` declaration
+  tagName: JSDocTagName | string,
+  // Any remaining text on the tag, e.g. the description
+  text?: string,
+} | {
+  // no `tagName` for plain text documentation that occurs before any `@param` lines
+  tagName?: undefined,
+  text: string,
+};
+
+/*
+ * Serializes a `Tag` into a string.
+ * Returns a string like " @foo {bar} baz" (note the leading whitespace before `@foo`).
+ */
+function tagToString(tag: JSDocTag): string {
+  let out = '';
+  if (tag.tagName) {
+    out += ` @${tag.tagName}`;
+  }
+  if (tag.text) {
+    if (tag.text.match(/\/\*|\*\//)) {
+      throw new Error('JSDoc text cannot contain "/*" and "*/"');
+    }
+    out += ' ' + tag.text.replace(/@/g, '\\@');
+  }
+  return out;
+}
+
+function serializeTags(tags: JSDocTag[]): string {
+  if (tags.length === 0) return '';
+
+  let out = '*\n';
+  for (const tag of tags) {
+    out += ' *';
+    // If the tagToString is multi-line, insert " * " prefixes on subsequent lines.
+    out += tagToString(tag).replace(/\n/g, '\n * ');
+    out += '\n';
+  }
+  out += ' ';
+  return out;
+}
diff --git a/packages/compiler/src/output/output_interpreter.ts b/packages/compiler/src/output/output_interpreter.ts
new file mode 100644
index 000000000000..7f63f7bb6c75
--- /dev/null
+++ b/packages/compiler/src/output/output_interpreter.ts
@@ -0,0 +1,359 @@
+/**
+ * @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 {CompileReflector} from '../compile_reflector';
+
+import * as o from './output_ast';
+import {debugOutputAstAsTypeScript} from './ts_emitter';
+
+export function interpretStatements(
+    statements: o.Statement[], reflector: CompileReflector): {[key: string]: any} {
+  const ctx = new _ExecutionContext(null, null, null, new Map<string, any>());
+  const visitor = new StatementInterpreter(reflector);
+  visitor.visitAllStatements(statements, ctx);
+  const result: {[key: string]: any} = {};
+  ctx.exports.forEach((exportName) => { result[exportName] = ctx.vars.get(exportName); });
+  return result;
+}
+
+function _executeFunctionStatements(
+    varNames: string[], varValues: any[], statements: o.Statement[], ctx: _ExecutionContext,
+    visitor: StatementInterpreter): any {
+  const childCtx = ctx.createChildWihtLocalVars();
+  for (let i = 0; i < varNames.length; i++) {
+    childCtx.vars.set(varNames[i], varValues[i]);
+  }
+  const result = visitor.visitAllStatements(statements, childCtx);
+  return result ? result.value : null;
+}
+
+class _ExecutionContext {
+  exports: string[] = [];
+
+  constructor(
+      public parent: _ExecutionContext|null, public instance: any, public className: string|null,
+      public vars: Map<string, any>) {}
+
+  createChildWihtLocalVars(): _ExecutionContext {
+    return new _ExecutionContext(this, this.instance, this.className, new Map<string, any>());
+  }
+}
+
+class ReturnValue {
+  constructor(public value: any) {}
+}
+
+function createDynamicClass(
+    _classStmt: o.ClassStmt, _ctx: _ExecutionContext, _visitor: StatementInterpreter): Function {
+  const propertyDescriptors: {[key: string]: any} = {};
+
+  _classStmt.getters.forEach((getter: o.ClassGetter) => {
+    // Note: use `function` instead of arrow function to capture `this`
+    propertyDescriptors[getter.name] = {
+      configurable: false,
+      get: function() {
+        const instanceCtx = new _ExecutionContext(_ctx, this, _classStmt.name, _ctx.vars);
+        return _executeFunctionStatements([], [], getter.body, instanceCtx, _visitor);
+      }
+    };
+  });
+  _classStmt.methods.forEach(function(method: o.ClassMethod) {
+    const paramNames = method.params.map(param => param.name);
+    // Note: use `function` instead of arrow function to capture `this`
+    propertyDescriptors[method.name !] = {
+      writable: false,
+      configurable: false,
+      value: function(...args: any[]) {
+        const instanceCtx = new _ExecutionContext(_ctx, this, _classStmt.name, _ctx.vars);
+        return _executeFunctionStatements(paramNames, args, method.body, instanceCtx, _visitor);
+      }
+    };
+  });
+
+  const ctorParamNames = _classStmt.constructorMethod.params.map(param => param.name);
+  // Note: use `function` instead of arrow function to capture `this`
+  const ctor = function(...args: any[]) {
+    const instanceCtx = new _ExecutionContext(_ctx, this, _classStmt.name, _ctx.vars);
+    _classStmt.fields.forEach((field) => { this[field.name] = undefined; });
+    _executeFunctionStatements(
+        ctorParamNames, args, _classStmt.constructorMethod.body, instanceCtx, _visitor);
+  };
+  const superClass = _classStmt.parent ? _classStmt.parent.visitExpression(_visitor, _ctx) : Object;
+  ctor.prototype = Object.create(superClass.prototype, propertyDescriptors);
+  return ctor;
+}
+
+class StatementInterpreter implements o.StatementVisitor, o.ExpressionVisitor {
+  constructor(private reflector: CompileReflector) {}
+  debugAst(ast: o.Expression|o.Statement|o.Type): string { return debugOutputAstAsTypeScript(ast); }
+
+  visitDeclareVarStmt(stmt: o.DeclareVarStmt, ctx: _ExecutionContext): any {
+    const initialValue = stmt.value ? stmt.value.visitExpression(this, ctx) : undefined;
+    ctx.vars.set(stmt.name, initialValue);
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
+      ctx.exports.push(stmt.name);
+    }
+    return null;
+  }
+  visitWriteVarExpr(expr: o.WriteVarExpr, ctx: _ExecutionContext): any {
+    const value = expr.value.visitExpression(this, ctx);
+    let currCtx = ctx;
+    while (currCtx != null) {
+      if (currCtx.vars.has(expr.name)) {
+        currCtx.vars.set(expr.name, value);
+        return value;
+      }
+      currCtx = currCtx.parent !;
+    }
+    throw new Error(`Not declared variable ${expr.name}`);
+  }
+  visitWrappedNodeExpr(ast: o.WrappedNodeExpr<any>, ctx: _ExecutionContext): never {
+    throw new Error('Cannot interpret a WrappedNodeExpr.');
+  }
+  visitTypeofExpr(ast: o.TypeofExpr, ctx: _ExecutionContext): never {
+    throw new Error('Cannot interpret a TypeofExpr');
+  }
+  visitReadVarExpr(ast: o.ReadVarExpr, ctx: _ExecutionContext): any {
+    let varName = ast.name !;
+    if (ast.builtin != null) {
+      switch (ast.builtin) {
+        case o.BuiltinVar.Super:
+          return ctx.instance.__proto__;
+        case o.BuiltinVar.This:
+          return ctx.instance;
+        case o.BuiltinVar.CatchError:
+          varName = CATCH_ERROR_VAR;
+          break;
+        case o.BuiltinVar.CatchStack:
+          varName = CATCH_STACK_VAR;
+          break;
+        default:
+          throw new Error(`Unknown builtin variable ${ast.builtin}`);
+      }
+    }
+    let currCtx = ctx;
+    while (currCtx != null) {
+      if (currCtx.vars.has(varName)) {
+        return currCtx.vars.get(varName);
+      }
+      currCtx = currCtx.parent !;
+    }
+    throw new Error(`Not declared variable ${varName}`);
+  }
+  visitWriteKeyExpr(expr: o.WriteKeyExpr, ctx: _ExecutionContext): any {
+    const receiver = expr.receiver.visitExpression(this, ctx);
+    const index = expr.index.visitExpression(this, ctx);
+    const value = expr.value.visitExpression(this, ctx);
+    receiver[index] = value;
+    return value;
+  }
+  visitWritePropExpr(expr: o.WritePropExpr, ctx: _ExecutionContext): any {
+    const receiver = expr.receiver.visitExpression(this, ctx);
+    const value = expr.value.visitExpression(this, ctx);
+    receiver[expr.name] = value;
+    return value;
+  }
+
+  visitInvokeMethodExpr(expr: o.InvokeMethodExpr, ctx: _ExecutionContext): any {
+    const receiver = expr.receiver.visitExpression(this, ctx);
+    const args = this.visitAllExpressions(expr.args, ctx);
+    let result: any;
+    if (expr.builtin != null) {
+      switch (expr.builtin) {
+        case o.BuiltinMethod.ConcatArray:
+          result = receiver.concat(...args);
+          break;
+        case o.BuiltinMethod.SubscribeObservable:
+          result = receiver.subscribe({next: args[0]});
+          break;
+        case o.BuiltinMethod.Bind:
+          result = receiver.bind(...args);
+          break;
+        default:
+          throw new Error(`Unknown builtin method ${expr.builtin}`);
+      }
+    } else {
+      result = receiver[expr.name !].apply(receiver, args);
+    }
+    return result;
+  }
+  visitInvokeFunctionExpr(stmt: o.InvokeFunctionExpr, ctx: _ExecutionContext): any {
+    const args = this.visitAllExpressions(stmt.args, ctx);
+    const fnExpr = stmt.fn;
+    if (fnExpr instanceof o.ReadVarExpr && fnExpr.builtin === o.BuiltinVar.Super) {
+      ctx.instance.constructor.prototype.constructor.apply(ctx.instance, args);
+      return null;
+    } else {
+      const fn = stmt.fn.visitExpression(this, ctx);
+      return fn.apply(null, args);
+    }
+  }
+  visitReturnStmt(stmt: o.ReturnStatement, ctx: _ExecutionContext): any {
+    return new ReturnValue(stmt.value.visitExpression(this, ctx));
+  }
+  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 {
+    return stmt.expr.visitExpression(this, ctx);
+  }
+  visitIfStmt(stmt: o.IfStmt, ctx: _ExecutionContext): any {
+    const condition = stmt.condition.visitExpression(this, ctx);
+    if (condition) {
+      return this.visitAllStatements(stmt.trueCase, ctx);
+    } else if (stmt.falseCase != null) {
+      return this.visitAllStatements(stmt.falseCase, ctx);
+    }
+    return null;
+  }
+  visitTryCatchStmt(stmt: o.TryCatchStmt, ctx: _ExecutionContext): any {
+    try {
+      return this.visitAllStatements(stmt.bodyStmts, ctx);
+    } catch (e) {
+      const childCtx = ctx.createChildWihtLocalVars();
+      childCtx.vars.set(CATCH_ERROR_VAR, e);
+      childCtx.vars.set(CATCH_STACK_VAR, e.stack);
+      return this.visitAllStatements(stmt.catchStmts, childCtx);
+    }
+  }
+  visitThrowStmt(stmt: o.ThrowStmt, ctx: _ExecutionContext): any {
+    throw stmt.error.visitExpression(this, ctx);
+  }
+  visitCommentStmt(stmt: o.CommentStmt, context?: any): any { return null; }
+  visitJSDocCommentStmt(stmt: o.JSDocCommentStmt, context?: any): any { return null; }
+  visitInstantiateExpr(ast: o.InstantiateExpr, ctx: _ExecutionContext): any {
+    const args = this.visitAllExpressions(ast.args, ctx);
+    const clazz = ast.classExpr.visitExpression(this, ctx);
+    return new clazz(...args);
+  }
+  visitLiteralExpr(ast: o.LiteralExpr, ctx: _ExecutionContext): any { return ast.value; }
+  visitExternalExpr(ast: o.ExternalExpr, ctx: _ExecutionContext): any {
+    return this.reflector.resolveExternalReference(ast.value);
+  }
+  visitConditionalExpr(ast: o.ConditionalExpr, ctx: _ExecutionContext): any {
+    if (ast.condition.visitExpression(this, ctx)) {
+      return ast.trueCase.visitExpression(this, ctx);
+    } else if (ast.falseCase != null) {
+      return ast.falseCase.visitExpression(this, ctx);
+    }
+    return null;
+  }
+  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);
+  }
+  visitFunctionExpr(ast: o.FunctionExpr, ctx: _ExecutionContext): any {
+    const paramNames = ast.params.map((param) => param.name);
+    return _declareFn(paramNames, ast.statements, ctx, this);
+  }
+  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 {
+    const lhs = () => ast.lhs.visitExpression(this, ctx);
+    const rhs = () => ast.rhs.visitExpression(this, ctx);
+
+    switch (ast.operator) {
+      case o.BinaryOperator.Equals:
+        return lhs() == rhs();
+      case o.BinaryOperator.Identical:
+        return lhs() === rhs();
+      case o.BinaryOperator.NotEquals:
+        return lhs() != rhs();
+      case o.BinaryOperator.NotIdentical:
+        return lhs() !== rhs();
+      case o.BinaryOperator.And:
+        return lhs() && rhs();
+      case o.BinaryOperator.Or:
+        return lhs() || rhs();
+      case o.BinaryOperator.Plus:
+        return lhs() + rhs();
+      case o.BinaryOperator.Minus:
+        return lhs() - rhs();
+      case o.BinaryOperator.Divide:
+        return lhs() / rhs();
+      case o.BinaryOperator.Multiply:
+        return lhs() * rhs();
+      case o.BinaryOperator.Modulo:
+        return lhs() % rhs();
+      case o.BinaryOperator.Lower:
+        return lhs() < rhs();
+      case o.BinaryOperator.LowerEquals:
+        return lhs() <= rhs();
+      case o.BinaryOperator.Bigger:
+        return lhs() > rhs();
+      case o.BinaryOperator.BiggerEquals:
+        return lhs() >= rhs();
+      default:
+        throw new Error(`Unknown operator ${ast.operator}`);
+    }
+  }
+  visitReadPropExpr(ast: o.ReadPropExpr, ctx: _ExecutionContext): any {
+    let result: any;
+    const receiver = ast.receiver.visitExpression(this, ctx);
+    result = receiver[ast.name];
+    return result;
+  }
+  visitReadKeyExpr(ast: o.ReadKeyExpr, ctx: _ExecutionContext): any {
+    const receiver = ast.receiver.visitExpression(this, ctx);
+    const prop = ast.index.visitExpression(this, ctx);
+    return receiver[prop];
+  }
+  visitLiteralArrayExpr(ast: o.LiteralArrayExpr, ctx: _ExecutionContext): any {
+    return this.visitAllExpressions(ast.entries, ctx);
+  }
+  visitLiteralMapExpr(ast: o.LiteralMapExpr, ctx: _ExecutionContext): any {
+    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 {
+    const values = this.visitAllExpressions(ast.parts, context);
+    return values[values.length - 1];
+  }
+  visitAllExpressions(expressions: o.Expression[], ctx: _ExecutionContext): any {
+    return expressions.map((expr) => expr.visitExpression(this, ctx));
+  }
+
+  visitAllStatements(statements: o.Statement[], ctx: _ExecutionContext): ReturnValue|null {
+    for (let i = 0; i < statements.length; i++) {
+      const stmt = statements[i];
+      const val = stmt.visitStatement(this, ctx);
+      if (val instanceof ReturnValue) {
+        return val;
+      }
+    }
+    return null;
+  }
+}
+
+function _declareFn(
+    varNames: string[], statements: o.Statement[], ctx: _ExecutionContext,
+    visitor: StatementInterpreter): Function {
+  return (...args: any[]) => _executeFunctionStatements(varNames, args, statements, ctx, visitor);
+}
+
+const CATCH_ERROR_VAR = 'error';
+const CATCH_STACK_VAR = 'stack';
diff --git a/packages/compiler/src/output/output_jit.ts b/packages/compiler/src/output/output_jit.ts
new file mode 100644
index 000000000000..3c077aa911c5
--- /dev/null
+++ b/packages/compiler/src/output/output_jit.ts
@@ -0,0 +1,112 @@
+/**
+ * @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 {identifierName} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
+
+import {EmitterVisitorContext} from './abstract_emitter';
+import {AbstractJsEmitterVisitor} from './abstract_js_emitter';
+import * as o from './output_ast';
+
+function evalExpression(
+    sourceUrl: string, ctx: EmitterVisitorContext, vars: {[key: string]: any},
+    createSourceMap: boolean): any {
+  let fnBody = `${ctx.toSource()}\n//# sourceURL=${sourceUrl}`;
+  const fnArgNames: string[] = [];
+  const fnArgValues: any[] = [];
+  for (const argName in vars) {
+    fnArgNames.push(argName);
+    fnArgValues.push(vars[argName]);
+  }
+  if (createSourceMap) {
+    // using `new Function(...)` generates a header, 1 line of no arguments, 2 lines otherwise
+    // E.g. ```
+    // function anonymous(a,b,c
+    // /**/) { ... }```
+    // We don't want to hard code this fact, so we auto detect it via an empty function first.
+    const emptyFn = new Function(...fnArgNames.concat('return null;')).toString();
+    const headerLines = emptyFn.slice(0, emptyFn.indexOf('return null;')).split('\n').length - 1;
+    fnBody += `\n${ctx.toSourceMapGenerator(sourceUrl, headerLines).toJsComment()}`;
+  }
+  return new Function(...fnArgNames.concat(fnBody))(...fnArgValues);
+}
+
+export function jitStatements(
+    sourceUrl: string, statements: o.Statement[], reflector: CompileReflector,
+    createSourceMaps: boolean): {[key: string]: any} {
+  const converter = new JitEmitterVisitor(reflector);
+  const ctx = EmitterVisitorContext.createRoot();
+  converter.visitAllStatements(statements, ctx);
+  converter.createReturnStmt(ctx);
+  return evalExpression(sourceUrl, ctx, converter.getArgs(), createSourceMaps);
+}
+
+export class JitEmitterVisitor extends AbstractJsEmitterVisitor {
+  private _evalArgNames: string[] = [];
+  private _evalArgValues: any[] = [];
+  private _evalExportedVars: string[] = [];
+
+  constructor(private reflector: CompileReflector) { super(); }
+
+  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} = {};
+    for (let i = 0; i < this._evalArgNames.length; i++) {
+      result[this._evalArgNames[i]] = this._evalArgValues[i];
+    }
+    return result;
+  }
+
+  visitExternalExpr(ast: o.ExternalExpr, ctx: EmitterVisitorContext): any {
+    this._emitReferenceToExternal(ast, this.reflector.resolveExternalReference(ast.value), ctx);
+    return null;
+  }
+
+  visitWrappedNodeExpr(ast: o.WrappedNodeExpr<any>, ctx: EmitterVisitorContext): any {
+    this._emitReferenceToExternal(ast, ast.node, ctx);
+    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);
+  }
+
+  private _emitReferenceToExternal(ast: o.Expression, value: any, ctx: EmitterVisitorContext):
+      void {
+    let id = this._evalArgValues.indexOf(value);
+    if (id === -1) {
+      id = this._evalArgValues.length;
+      this._evalArgValues.push(value);
+      const name = identifierName({reference: value}) || 'val';
+      this._evalArgNames.push(`jit_${name}_${id}`);
+    }
+    ctx.print(ast, this._evalArgNames[id]);
+  }
+}
diff --git a/packages/compiler/src/output/source_map.ts b/packages/compiler/src/output/source_map.ts
new file mode 100644
index 000000000000..595e94221c96
--- /dev/null
+++ b/packages/compiler/src/output/source_map.ts
@@ -0,0 +1,186 @@
+/**
+ * @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 {utf8Encode} from '../util';
+
+// https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit
+const VERSION = 3;
+
+const JS_B64_PREFIX = '# sourceMappingURL=data:application/json;base64,';
+
+type Segment = {
+  col0: number,
+  sourceUrl?: string,
+  sourceLine0?: number,
+  sourceCol0?: number,
+};
+
+export type SourceMap = {
+  version: number,
+  file?: string,
+  sourceRoot: string,
+  sources: string[],
+  sourcesContent: (string | null)[],
+  mappings: string,
+};
+
+export class SourceMapGenerator {
+  private sourcesContent: Map<string, string|null> = new Map();
+  private lines: Segment[][] = [];
+  private lastCol0: number = 0;
+  private hasMappings = false;
+
+  constructor(private file: string|null = null) {}
+
+  // The content is `null` when the content is expected to be loaded using the URL
+  addSource(url: string, content: string|null = null): this {
+    if (!this.sourcesContent.has(url)) {
+      this.sourcesContent.set(url, content);
+    }
+    return this;
+  }
+
+  addLine(): this {
+    this.lines.push([]);
+    this.lastCol0 = 0;
+    return this;
+  }
+
+  addMapping(col0: number, sourceUrl?: string, sourceLine0?: number, sourceCol0?: number): this {
+    if (!this.currentLine) {
+      throw new Error(`A line must be added before mappings can be added`);
+    }
+    if (sourceUrl != null && !this.sourcesContent.has(sourceUrl)) {
+      throw new Error(`Unknown source file "${sourceUrl}"`);
+    }
+    if (col0 == null) {
+      throw new Error(`The column in the generated code must be provided`);
+    }
+    if (col0 < this.lastCol0) {
+      throw new Error(`Mapping should be added in output order`);
+    }
+    if (sourceUrl && (sourceLine0 == null || sourceCol0 == null)) {
+      throw new Error(`The source location must be provided when a source url is provided`);
+    }
+
+    this.hasMappings = true;
+    this.lastCol0 = col0;
+    this.currentLine.push({col0, sourceUrl, sourceLine0, sourceCol0});
+    return this;
+  }
+
+  private get currentLine(): Segment[]|null { return this.lines.slice(-1)[0]; }
+
+  toJSON(): SourceMap|null {
+    if (!this.hasMappings) {
+      return null;
+    }
+
+    const sourcesIndex = new Map<string, number>();
+    const sources: string[] = [];
+    const sourcesContent: (string | null)[] = [];
+
+    Array.from(this.sourcesContent.keys()).forEach((url: string, i: number) => {
+      sourcesIndex.set(url, i);
+      sources.push(url);
+      sourcesContent.push(this.sourcesContent.get(url) || null);
+    });
+
+    let mappings: string = '';
+    let lastCol0: number = 0;
+    let lastSourceIndex: number = 0;
+    let lastSourceLine0: number = 0;
+    let lastSourceCol0: number = 0;
+
+    this.lines.forEach(segments => {
+      lastCol0 = 0;
+
+      mappings += segments
+                      .map(segment => {
+                        // zero-based starting column of the line in the generated code
+                        let segAsStr = toBase64VLQ(segment.col0 - lastCol0);
+                        lastCol0 = segment.col0;
+
+                        if (segment.sourceUrl != null) {
+                          // zero-based index into the “sources” list
+                          segAsStr +=
+                              toBase64VLQ(sourcesIndex.get(segment.sourceUrl) ! - lastSourceIndex);
+                          lastSourceIndex = sourcesIndex.get(segment.sourceUrl) !;
+                          // the zero-based starting line in the original source
+                          segAsStr += toBase64VLQ(segment.sourceLine0 ! - lastSourceLine0);
+                          lastSourceLine0 = segment.sourceLine0 !;
+                          // the zero-based starting column in the original source
+                          segAsStr += toBase64VLQ(segment.sourceCol0 ! - lastSourceCol0);
+                          lastSourceCol0 = segment.sourceCol0 !;
+                        }
+
+                        return segAsStr;
+                      })
+                      .join(',');
+      mappings += ';';
+    });
+
+    mappings = mappings.slice(0, -1);
+
+    return {
+      'file': this.file || '',
+      'version': VERSION,
+      'sourceRoot': '',
+      'sources': sources,
+      'sourcesContent': sourcesContent,
+      'mappings': mappings,
+    };
+  }
+
+  toJsComment(): string {
+    return this.hasMappings ? '//' + JS_B64_PREFIX + toBase64String(JSON.stringify(this, null, 0)) :
+                              '';
+  }
+}
+
+export function toBase64String(value: string): string {
+  let b64 = '';
+  value = utf8Encode(value);
+  for (let i = 0; i < value.length;) {
+    const i1 = value.charCodeAt(i++);
+    const i2 = value.charCodeAt(i++);
+    const i3 = value.charCodeAt(i++);
+    b64 += toBase64Digit(i1 >> 2);
+    b64 += toBase64Digit(((i1 & 3) << 4) | (isNaN(i2) ? 0 : i2 >> 4));
+    b64 += isNaN(i2) ? '=' : toBase64Digit(((i2 & 15) << 2) | (i3 >> 6));
+    b64 += isNaN(i2) || isNaN(i3) ? '=' : toBase64Digit(i3 & 63);
+  }
+
+  return b64;
+}
+
+function toBase64VLQ(value: number): string {
+  value = value < 0 ? ((-value) << 1) + 1 : value << 1;
+
+  let out = '';
+  do {
+    let digit = value & 31;
+    value = value >> 5;
+    if (value > 0) {
+      digit = digit | 32;
+    }
+    out += toBase64Digit(digit);
+  } while (value > 0);
+
+  return out;
+}
+
+const B64_DIGITS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+
+function toBase64Digit(value: number): string {
+  if (value < 0 || value >= 64) {
+    throw new Error(`Can only encode value in the range [0, 63]`);
+  }
+
+  return B64_DIGITS[value];
+}
diff --git a/packages/compiler/src/output/ts_emitter.ts b/packages/compiler/src/output/ts_emitter.ts
new file mode 100644
index 000000000000..e82a3258e085
--- /dev/null
+++ b/packages/compiler/src/output/ts_emitter.ts
@@ -0,0 +1,448 @@
+/**
+ * @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';
+import {CompileIdentifierMetadata} from '../compile_metadata';
+
+import {AbstractEmitterVisitor, CATCH_ERROR_VAR, CATCH_STACK_VAR, EmitterVisitorContext, OutputEmitter} from './abstract_emitter';
+import * as o from './output_ast';
+
+const _debugFilePath = '/debug/lib';
+
+export function debugOutputAstAsTypeScript(ast: o.Statement | o.Expression | o.Type | any[]):
+    string {
+  const converter = new _TsEmitterVisitor();
+  const ctx = EmitterVisitorContext.createRoot();
+  const asts: any[] = Array.isArray(ast) ? ast : [ast];
+
+  asts.forEach((ast) => {
+    if (ast instanceof o.Statement) {
+      ast.visitStatement(converter, ctx);
+    } else if (ast instanceof o.Expression) {
+      ast.visitExpression(converter, ctx);
+    } else if (ast instanceof o.Type) {
+      ast.visitType(converter, ctx);
+    } else {
+      throw new Error(`Don't know how to print debug info for ${ast}`);
+    }
+  });
+  return ctx.toSource();
+}
+
+export type ReferenceFilter = (reference: o.ExternalReference) => boolean;
+
+export class TypeScriptEmitter implements OutputEmitter {
+  emitStatementsAndContext(
+      genFilePath: string, stmts: o.Statement[], preamble: string = '',
+      emitSourceMaps: boolean = true, referenceFilter?: ReferenceFilter,
+      importFilter?: ReferenceFilter): {sourceText: string, context: EmitterVisitorContext} {
+    const converter = new _TsEmitterVisitor(referenceFilter, importFilter);
+
+    const ctx = EmitterVisitorContext.createRoot();
+
+    converter.visitAllStatements(stmts, ctx);
+
+    const preambleLines = preamble ? preamble.split('\n') : [];
+    converter.reexports.forEach((reexports, exportedModuleName) => {
+      const reexportsCode =
+          reexports.map(reexport => `${reexport.name} as ${reexport.as}`).join(',');
+      preambleLines.push(`export {${reexportsCode}} from '${exportedModuleName}';`);
+    });
+
+    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 '${importedModuleName}';`);
+    });
+
+    const sm = emitSourceMaps ?
+        ctx.toSourceMapGenerator(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('');
+    }
+    ctx.setPreambleLineCount(preambleLines.length);
+    return {sourceText: lines.join('\n'), context: ctx};
+  }
+
+  emitStatements(genFilePath: string, stmts: o.Statement[], preamble: string = '') {
+    return this.emitStatementsAndContext(genFilePath, stmts, preamble).sourceText;
+  }
+}
+
+
+class _TsEmitterVisitor extends AbstractEmitterVisitor implements o.TypeVisitor {
+  private typeExpression = 0;
+
+  constructor(private referenceFilter?: ReferenceFilter, private importFilter?: ReferenceFilter) {
+    super(false);
+  }
+
+  importsWithPrefixes = new Map<string, string>();
+  reexports = new Map<string, {name: string, as: string}[]>();
+
+  visitType(t: o.Type|null, ctx: EmitterVisitorContext, defaultType: string = 'any') {
+    if (t) {
+      this.typeExpression++;
+      t.visitType(this, ctx);
+      this.typeExpression--;
+    } else {
+      ctx.print(null, defaultType);
+    }
+  }
+
+  visitLiteralExpr(ast: o.LiteralExpr, ctx: EmitterVisitorContext): any {
+    const value = ast.value;
+    if (value == null && ast.type != o.INFERRED_TYPE) {
+      ctx.print(ast, `(${value} as any)`);
+      return null;
+    }
+    return super.visitLiteralExpr(ast, ctx);
+  }
+
+
+  // Temporary workaround to support strictNullCheck enabled consumers of ngc emit.
+  // In SNC mode, [] have the type never[], so we cast here to any[].
+  // TODO: narrow the cast to a more explicit type, or use a pattern that does not
+  // start with [].concat. see https://github.com/angular/angular/pull/11846
+  visitLiteralArrayExpr(ast: o.LiteralArrayExpr, ctx: EmitterVisitorContext): any {
+    if (ast.entries.length === 0) {
+      ctx.print(ast, '(');
+    }
+    const result = super.visitLiteralArrayExpr(ast, ctx);
+    if (ast.entries.length === 0) {
+      ctx.print(ast, ' as any[])');
+    }
+    return result;
+  }
+
+  visitExternalExpr(ast: o.ExternalExpr, ctx: EmitterVisitorContext): any {
+    this._visitIdentifier(ast.value, ast.typeParams, ctx);
+    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 (stmt.hasModifier(o.StmtModifier.Exported) && stmt.value instanceof o.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;
+      }
+    }
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
+      ctx.print(stmt, `export `);
+    }
+    if (stmt.hasModifier(o.StmtModifier.Final)) {
+      ctx.print(stmt, `const`);
+    } else {
+      ctx.print(stmt, `var`);
+    }
+    ctx.print(stmt, ` ${stmt.name}`);
+    this._printColonType(stmt.type, ctx);
+    if (stmt.value) {
+      ctx.print(stmt, ` = `);
+      stmt.value.visitExpression(this, ctx);
+    }
+    ctx.println(stmt, `;`);
+    return null;
+  }
+
+  visitWrappedNodeExpr(ast: o.WrappedNodeExpr<any>, ctx: EmitterVisitorContext): never {
+    throw new Error('Cannot visit a WrappedNodeExpr when outputting Typescript.');
+  }
+
+  visitCastExpr(ast: o.CastExpr, ctx: EmitterVisitorContext): any {
+    ctx.print(ast, `(<`);
+    ast.type !.visitType(this, ctx);
+    ctx.print(ast, `>`);
+    ast.value.visitExpression(this, ctx);
+    ctx.print(ast, `)`);
+    return null;
+  }
+
+  visitInstantiateExpr(ast: o.InstantiateExpr, ctx: EmitterVisitorContext): any {
+    ctx.print(ast, `new `);
+    this.typeExpression++;
+    ast.classExpr.visitExpression(this, ctx);
+    this.typeExpression--;
+    ctx.print(ast, `(`);
+    this.visitAllExpressions(ast.args, ctx, ',');
+    ctx.print(ast, `)`);
+    return null;
+  }
+
+  visitDeclareClassStmt(stmt: o.ClassStmt, ctx: EmitterVisitorContext): any {
+    ctx.pushClass(stmt);
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
+      ctx.print(stmt, `export `);
+    }
+    ctx.print(stmt, `class ${stmt.name}`);
+    if (stmt.parent != null) {
+      ctx.print(stmt, ` extends `);
+      this.typeExpression++;
+      stmt.parent.visitExpression(this, ctx);
+      this.typeExpression--;
+    }
+    ctx.println(stmt, ` {`);
+    ctx.incIndent();
+    stmt.fields.forEach((field) => this._visitClassField(field, ctx));
+    if (stmt.constructorMethod != null) {
+      this._visitClassConstructor(stmt, ctx);
+    }
+    stmt.getters.forEach((getter) => this._visitClassGetter(getter, ctx));
+    stmt.methods.forEach((method) => this._visitClassMethod(method, ctx));
+    ctx.decIndent();
+    ctx.println(stmt, `}`);
+    ctx.popClass();
+    return null;
+  }
+
+  private _visitClassField(field: o.ClassField, ctx: EmitterVisitorContext) {
+    if (field.hasModifier(o.StmtModifier.Private)) {
+      // comment out as a workaround for #10967
+      ctx.print(null, `/*private*/ `);
+    }
+    if (field.hasModifier(o.StmtModifier.Static)) {
+      ctx.print(null, 'static ');
+    }
+    ctx.print(null, field.name);
+    this._printColonType(field.type, ctx);
+    if (field.initializer) {
+      ctx.print(null, ' = ');
+      field.initializer.visitExpression(this, ctx);
+    }
+    ctx.println(null, `;`);
+  }
+
+  private _visitClassGetter(getter: o.ClassGetter, ctx: EmitterVisitorContext) {
+    if (getter.hasModifier(o.StmtModifier.Private)) {
+      ctx.print(null, `private `);
+    }
+    ctx.print(null, `get ${getter.name}()`);
+    this._printColonType(getter.type, ctx);
+    ctx.println(null, ` {`);
+    ctx.incIndent();
+    this.visitAllStatements(getter.body, ctx);
+    ctx.decIndent();
+    ctx.println(null, `}`);
+  }
+
+  private _visitClassConstructor(stmt: o.ClassStmt, ctx: EmitterVisitorContext) {
+    ctx.print(stmt, `constructor(`);
+    this._visitParams(stmt.constructorMethod.params, ctx);
+    ctx.println(stmt, `) {`);
+    ctx.incIndent();
+    this.visitAllStatements(stmt.constructorMethod.body, ctx);
+    ctx.decIndent();
+    ctx.println(stmt, `}`);
+  }
+
+  private _visitClassMethod(method: o.ClassMethod, ctx: EmitterVisitorContext) {
+    if (method.hasModifier(o.StmtModifier.Private)) {
+      ctx.print(null, `private `);
+    }
+    ctx.print(null, `${method.name}(`);
+    this._visitParams(method.params, ctx);
+    ctx.print(null, `)`);
+    this._printColonType(method.type, ctx, 'void');
+    ctx.println(null, ` {`);
+    ctx.incIndent();
+    this.visitAllStatements(method.body, ctx);
+    ctx.decIndent();
+    ctx.println(null, `}`);
+  }
+
+  visitFunctionExpr(ast: o.FunctionExpr, ctx: EmitterVisitorContext): any {
+    if (ast.name) {
+      ctx.print(ast, 'function ');
+      ctx.print(ast, ast.name);
+    }
+    ctx.print(ast, `(`);
+    this._visitParams(ast.params, ctx);
+    ctx.print(ast, `)`);
+    this._printColonType(ast.type, ctx, 'void');
+    if (!ast.name) {
+      ctx.print(ast, ` => `);
+    }
+    ctx.println(ast, '{');
+    ctx.incIndent();
+    this.visitAllStatements(ast.statements, ctx);
+    ctx.decIndent();
+    ctx.print(ast, `}`);
+
+    return null;
+  }
+
+  visitDeclareFunctionStmt(stmt: o.DeclareFunctionStmt, ctx: EmitterVisitorContext): any {
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
+      ctx.print(stmt, `export `);
+    }
+    ctx.print(stmt, `function ${stmt.name}(`);
+    this._visitParams(stmt.params, ctx);
+    ctx.print(stmt, `)`);
+    this._printColonType(stmt.type, ctx, 'void');
+    ctx.println(stmt, ` {`);
+    ctx.incIndent();
+    this.visitAllStatements(stmt.statements, ctx);
+    ctx.decIndent();
+    ctx.println(stmt, `}`);
+    return null;
+  }
+
+  visitTryCatchStmt(stmt: o.TryCatchStmt, ctx: EmitterVisitorContext): any {
+    ctx.println(stmt, `try {`);
+    ctx.incIndent();
+    this.visitAllStatements(stmt.bodyStmts, ctx);
+    ctx.decIndent();
+    ctx.println(stmt, `} catch (${CATCH_ERROR_VAR.name}) {`);
+    ctx.incIndent();
+    const catchStmts =
+        [<o.Statement>CATCH_STACK_VAR.set(CATCH_ERROR_VAR.prop('stack', null)).toDeclStmt(null, [
+          o.StmtModifier.Final
+        ])].concat(stmt.catchStmts);
+    this.visitAllStatements(catchStmts, ctx);
+    ctx.decIndent();
+    ctx.println(stmt, `}`);
+    return null;
+  }
+
+  visitBuiltinType(type: o.BuiltinType, ctx: EmitterVisitorContext): any {
+    let typeStr: string;
+    switch (type.name) {
+      case o.BuiltinTypeName.Bool:
+        typeStr = 'boolean';
+        break;
+      case o.BuiltinTypeName.Dynamic:
+        typeStr = 'any';
+        break;
+      case o.BuiltinTypeName.Function:
+        typeStr = 'Function';
+        break;
+      case o.BuiltinTypeName.Number:
+        typeStr = 'number';
+        break;
+      case o.BuiltinTypeName.Int:
+        typeStr = 'number';
+        break;
+      case o.BuiltinTypeName.String:
+        typeStr = 'string';
+        break;
+      case o.BuiltinTypeName.None:
+        typeStr = 'never';
+        break;
+      default:
+        throw new Error(`Unsupported builtin type ${type.name}`);
+    }
+    ctx.print(null, typeStr);
+    return null;
+  }
+
+  visitExpressionType(ast: o.ExpressionType, ctx: EmitterVisitorContext): any {
+    ast.value.visitExpression(this, ctx);
+    if (ast.typeParams !== null) {
+      ctx.print(null, '<');
+      this.visitAllObjects(type => this.visitType(type, ctx), ast.typeParams, ctx, ',');
+      ctx.print(null, '>');
+    }
+    return null;
+  }
+
+  visitArrayType(type: o.ArrayType, ctx: EmitterVisitorContext): any {
+    this.visitType(type.of, ctx);
+    ctx.print(null, `[]`);
+    return null;
+  }
+
+  visitMapType(type: o.MapType, ctx: EmitterVisitorContext): any {
+    ctx.print(null, `{[key: string]:`);
+    this.visitType(type.valueType, ctx);
+    ctx.print(null, `}`);
+    return null;
+  }
+
+  getBuiltinMethodName(method: o.BuiltinMethod): string {
+    let name: string;
+    switch (method) {
+      case o.BuiltinMethod.ConcatArray:
+        name = 'concat';
+        break;
+      case o.BuiltinMethod.SubscribeObservable:
+        name = 'subscribe';
+        break;
+      case o.BuiltinMethod.Bind:
+        name = 'bind';
+        break;
+      default:
+        throw new Error(`Unknown builtin method: ${method}`);
+    }
+    return name;
+  }
+
+  private _visitParams(params: o.FnParam[], ctx: EmitterVisitorContext): void {
+    this.visitAllObjects(param => {
+      ctx.print(null, param.name);
+      this._printColonType(param.type, ctx);
+    }, params, ctx, ',');
+  }
+
+  private _visitIdentifier(
+      value: o.ExternalReference, typeParams: o.Type[]|null, ctx: EmitterVisitorContext): void {
+    const {name, moduleName} = value;
+    if (this.referenceFilter && this.referenceFilter(value)) {
+      ctx.print(null, '(null as any)');
+      return;
+    }
+    if (moduleName && (!this.importFilter || !this.importFilter(value))) {
+      let prefix = this.importsWithPrefixes.get(moduleName);
+      if (prefix == null) {
+        prefix = `i${this.importsWithPrefixes.size}`;
+        this.importsWithPrefixes.set(moduleName, prefix);
+      }
+      ctx.print(null, `${prefix}.`);
+    }
+    ctx.print(null, name !);
+
+    if (this.typeExpression > 0) {
+      // 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 suppliedParameters = typeParams || [];
+      if (suppliedParameters.length > 0) {
+        ctx.print(null, `<`);
+        this.visitAllObjects(type => type.visitType(this, ctx), typeParams !, ctx, ',');
+        ctx.print(null, `>`);
+      }
+    }
+  }
+
+  private _printColonType(type: o.Type|null, ctx: EmitterVisitorContext, defaultType?: string) {
+    if (type !== o.INFERRED_TYPE) {
+      ctx.print(null, ':');
+      this.visitType(type, ctx, defaultType);
+    }
+  }
+}
diff --git a/packages/compiler/src/output/value_util.ts b/packages/compiler/src/output/value_util.ts
new file mode 100644
index 000000000000..c043800a6f35
--- /dev/null
+++ b/packages/compiler/src/output/value_util.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 {OutputContext, ValueTransformer, visitValue} from '../util';
+
+import * as o from './output_ast';
+
+export const QUOTED_KEYS = '$quoted$';
+
+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);
+  }
+
+  visitStringMap(map: {[key: string]: any}, type: o.MapType): o.Expression {
+    const entries: o.LiteralMapEntry[] = [];
+    const quotedSet = new Set<string>(map && map[QUOTED_KEYS]);
+    Object.keys(map).forEach(key => {
+      entries.push(
+          new o.LiteralMapEntry(key, visitValue(map[key], this, null), quotedSet.has(key)));
+    });
+    return new o.LiteralMapExpr(entries, type);
+  }
+
+  visitPrimitive(value: any, type: o.Type): o.Expression { return o.literal(value, type); }
+
+  visitOther(value: any, type: o.Type): o.Expression {
+    if (value instanceof o.Expression) {
+      return value;
+    } else {
+      return this.ctx.importExpr(value);
+    }
+  }
+}
diff --git a/packages/compiler/src/parse_util.ts b/packages/compiler/src/parse_util.ts
new file mode 100644
index 000000000000..12dd1fb4e5e4
--- /dev/null
+++ b/packages/compiler/src/parse_util.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 * as chars from './chars';
+import {CompileIdentifierMetadata, identifierModuleUrl, identifierName} from './compile_metadata';
+import {error} from './util';
+
+export class ParseLocation {
+  constructor(
+      public file: ParseSourceFile, public offset: number, public line: number,
+      public col: number) {}
+
+  toString(): string {
+    return this.offset != null ? `${this.file.url}@${this.line}:${this.col}` : this.file.url;
+  }
+
+  moveBy(delta: number): ParseLocation {
+    const source = this.file.content;
+    const len = source.length;
+    let offset = this.offset;
+    let line = this.line;
+    let col = this.col;
+    while (offset > 0 && delta < 0) {
+      offset--;
+      delta++;
+      const ch = source.charCodeAt(offset);
+      if (ch == chars.$LF) {
+        line--;
+        const priorLine = source.substr(0, offset - 1).lastIndexOf(String.fromCharCode(chars.$LF));
+        col = priorLine > 0 ? offset - priorLine : offset;
+      } else {
+        col--;
+      }
+    }
+    while (offset < len && delta > 0) {
+      const ch = source.charCodeAt(offset);
+      offset++;
+      delta--;
+      if (ch == chars.$LF) {
+        line++;
+        col = 0;
+      } else {
+        col++;
+      }
+    }
+    return new ParseLocation(this.file, offset, line, col);
+  }
+
+  // Return the source around the location
+  // Up to `maxChars` or `maxLines` on each side of the location
+  getContext(maxChars: number, maxLines: number): {before: string, after: string}|null {
+    const content = this.file.content;
+    let startOffset = this.offset;
+
+    if (startOffset != null) {
+      if (startOffset > content.length - 1) {
+        startOffset = content.length - 1;
+      }
+      let endOffset = startOffset;
+      let ctxChars = 0;
+      let ctxLines = 0;
+
+      while (ctxChars < maxChars && startOffset > 0) {
+        startOffset--;
+        ctxChars++;
+        if (content[startOffset] == '\n') {
+          if (++ctxLines == maxLines) {
+            break;
+          }
+        }
+      }
+
+      ctxChars = 0;
+      ctxLines = 0;
+      while (ctxChars < maxChars && endOffset < content.length - 1) {
+        endOffset++;
+        ctxChars++;
+        if (content[endOffset] == '\n') {
+          if (++ctxLines == maxLines) {
+            break;
+          }
+        }
+      }
+
+      return {
+        before: content.substring(startOffset, this.offset),
+        after: content.substring(this.offset, endOffset + 1),
+      };
+    }
+
+    return null;
+  }
+}
+
+export class ParseSourceFile {
+  constructor(public content: string, public url: string) {}
+}
+
+export class ParseSourceSpan {
+  constructor(
+      public start: ParseLocation, public end: ParseLocation, public details: string|null = null) {}
+
+  toString(): string {
+    return this.start.file.content.substring(this.start.offset, this.end.offset);
+  }
+}
+
+export enum ParseErrorLevel {
+  WARNING,
+  ERROR,
+}
+
+export class ParseError {
+  constructor(
+      public span: ParseSourceSpan, public msg: string,
+      public level: ParseErrorLevel = ParseErrorLevel.ERROR) {}
+
+  contextualMessage(): string {
+    const ctx = this.span.start.getContext(100, 3);
+    return ctx ? `${this.msg} ("${ctx.before}[${ParseErrorLevel[this.level]} ->]${ctx.after}")` :
+                 this.msg;
+  }
+
+  toString(): string {
+    const details = this.span.details ? `, ${this.span.details}` : '';
+    return `${this.contextualMessage()}: ${this.span.start}${details}`;
+  }
+}
+
+export function typeSourceSpan(kind: string, type: CompileIdentifierMetadata): ParseSourceSpan {
+  const moduleUrl = identifierModuleUrl(type);
+  const sourceFileName = moduleUrl != null ? `in ${kind} ${identifierName(type)} in ${moduleUrl}` :
+                                             `in ${kind} ${identifierName(type)}`;
+  const sourceFile = new ParseSourceFile('', sourceFileName);
+  return new ParseSourceSpan(
+      new ParseLocation(sourceFile, -1, -1, -1), new ParseLocation(sourceFile, -1, -1, -1));
+}
diff --git a/packages/compiler/src/pipe_resolver.ts b/packages/compiler/src/pipe_resolver.ts
new file mode 100644
index 000000000000..4f15e9a3ee12
--- /dev/null
+++ b/packages/compiler/src/pipe_resolver.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
+ */
+
+import {CompileReflector} from './compile_reflector';
+import {Pipe, Type, createPipe} from './core';
+import {findLast} from './directive_resolver';
+import {resolveForwardRef, stringify} from './util';
+
+/**
+ * Resolve a `Type` for {@link Pipe}.
+ *
+ * This interface can be overridden by the application developer to create custom behavior.
+ *
+ * See {@link Compiler}
+ */
+export class PipeResolver {
+  constructor(private _reflector: CompileReflector) {}
+
+  isPipe(type: Type) {
+    const typeMetadata = this._reflector.annotations(resolveForwardRef(type));
+    return typeMetadata && typeMetadata.some(createPipe.isTypeOf);
+  }
+
+  /**
+   * Return {@link Pipe} for a given `Type`.
+   */
+  resolve(type: Type, throwIfNotFound = true): Pipe|null {
+    const metas = this._reflector.annotations(resolveForwardRef(type));
+    if (metas) {
+      const annotation = findLast(metas, createPipe.isTypeOf);
+      if (annotation) {
+        return annotation;
+      }
+    }
+    if (throwIfNotFound) {
+      throw new Error(`No Pipe decorator found on ${stringify(type)}`);
+    }
+    return null;
+  }
+}
diff --git a/packages/compiler/src/provider_analyzer.ts b/packages/compiler/src/provider_analyzer.ts
new file mode 100644
index 000000000000..f4b335957a7b
--- /dev/null
+++ b/packages/compiler/src/provider_analyzer.ts
@@ -0,0 +1,537 @@
+/**
+ * @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 {CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileDirectiveSummary, CompileNgModuleMetadata, CompileProviderMetadata, CompileQueryMetadata, CompileTokenMetadata, CompileTypeMetadata, tokenName, tokenReference} from './compile_metadata';
+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';
+
+export class ProviderError extends ParseError {
+  constructor(message: string, span: ParseSourceSpan) { super(span, message); }
+}
+
+export interface QueryWithId {
+  meta: CompileQueryMetadata;
+  queryId: number;
+}
+
+export class ProviderViewContext {
+  /**
+   * @internal
+   */
+  viewQueries: Map<any, QueryWithId[]>;
+  /**
+   * @internal
+   */
+  viewProviders: Map<any, boolean>;
+  errors: ProviderError[] = [];
+
+  constructor(public reflector: CompileReflector, public component: CompileDirectiveMetadata) {
+    this.viewQueries = _getViewQueries(component);
+    this.viewProviders = new Map<any, boolean>();
+    component.viewProviders.forEach((provider) => {
+      if (this.viewProviders.get(tokenReference(provider.token)) == null) {
+        this.viewProviders.set(tokenReference(provider.token), true);
+      }
+    });
+  }
+}
+
+export class ProviderElementContext {
+  private _contentQueries: Map<any, QueryWithId[]>;
+
+  private _transformedProviders = new Map<any, ProviderAst>();
+  private _seenProviders = new Map<any, boolean>();
+  private _allProviders: Map<any, ProviderAst>;
+  private _attrs: {[key: string]: string};
+  private _queriedTokens = new Map<any, QueryMatch[]>();
+
+  public readonly transformedHasViewContainer: boolean = false;
+
+  constructor(
+      public viewContext: ProviderViewContext, private _parent: ProviderElementContext,
+      private _isViewRoot: boolean, private _directiveAsts: DirectiveAst[], attrs: AttrAst[],
+      refs: ReferenceAst[], isTemplate: boolean, contentQueryStartId: number,
+      private _sourceSpan: ParseSourceSpan) {
+    this._attrs = {};
+    attrs.forEach((attrAst) => this._attrs[attrAst.name] = attrAst.value);
+    const directivesMeta = _directiveAsts.map(directiveAst => directiveAst.directive);
+    this._allProviders =
+        _resolveProvidersFromDirectives(directivesMeta, _sourceSpan, viewContext.errors);
+    this._contentQueries = _getContentQueries(contentQueryStartId, directivesMeta);
+    Array.from(this._allProviders.values()).forEach((provider) => {
+      this._addQueryReadsTo(provider.token, provider.token, this._queriedTokens);
+    });
+    if (isTemplate) {
+      const templateRefId =
+          createTokenForExternalReference(this.viewContext.reflector, Identifiers.TemplateRef);
+      this._addQueryReadsTo(templateRefId, templateRefId, this._queriedTokens);
+    }
+    refs.forEach((refAst) => {
+      let defaultQueryValue = refAst.value ||
+          createTokenForExternalReference(this.viewContext.reflector, Identifiers.ElementRef);
+      this._addQueryReadsTo({value: refAst.name}, defaultQueryValue, this._queriedTokens);
+    });
+    if (this._queriedTokens.get(
+            this.viewContext.reflector.resolveExternalReference(Identifiers.ViewContainerRef))) {
+      this.transformedHasViewContainer = true;
+    }
+
+    // create the providers that we know are eager first
+    Array.from(this._allProviders.values()).forEach((provider) => {
+      const eager = provider.eager || this._queriedTokens.get(tokenReference(provider.token));
+      if (eager) {
+        this._getOrCreateLocalProvider(provider.providerType, provider.token, true);
+      }
+    });
+  }
+
+  afterElement() {
+    // collect lazy providers
+    Array.from(this._allProviders.values()).forEach((provider) => {
+      this._getOrCreateLocalProvider(provider.providerType, provider.token, false);
+    });
+  }
+
+  get transformProviders(): ProviderAst[] {
+    // 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[] {
+    const sortedProviderTypes = this.transformProviders.map(provider => provider.token.identifier);
+    const sortedDirectives = this._directiveAsts.slice();
+    sortedDirectives.sort(
+        (dir1, dir2) => sortedProviderTypes.indexOf(dir1.directive.type) -
+            sortedProviderTypes.indexOf(dir2.directive.type));
+    return sortedDirectives;
+  }
+
+  get queryMatches(): QueryMatch[] {
+    const allMatches: QueryMatch[] = [];
+    this._queriedTokens.forEach((matches: QueryMatch[]) => { allMatches.push(...matches); });
+    return allMatches;
+  }
+
+  private _addQueryReadsTo(
+      token: CompileTokenMetadata, defaultValue: CompileTokenMetadata,
+      queryReadTokens: Map<any, QueryMatch[]>) {
+    this._getQueriesFor(token).forEach((query) => {
+      const queryValue = query.meta.read || defaultValue;
+      const tokenRef = tokenReference(queryValue);
+      let queryMatches = queryReadTokens.get(tokenRef);
+      if (!queryMatches) {
+        queryMatches = [];
+        queryReadTokens.set(tokenRef, queryMatches);
+      }
+      queryMatches.push({queryId: query.queryId, value: queryValue});
+    });
+  }
+
+  private _getQueriesFor(token: CompileTokenMetadata): QueryWithId[] {
+    const result: QueryWithId[] = [];
+    let currentEl: ProviderElementContext = this;
+    let distance = 0;
+    let queries: QueryWithId[]|undefined;
+    while (currentEl !== null) {
+      queries = currentEl._contentQueries.get(tokenReference(token));
+      if (queries) {
+        result.push(...queries.filter((query) => query.meta.descendants || distance <= 1));
+      }
+      if (currentEl._directiveAsts.length > 0) {
+        distance++;
+      }
+      currentEl = currentEl._parent;
+    }
+    queries = this.viewContext.viewQueries.get(tokenReference(token));
+    if (queries) {
+      result.push(...queries);
+    }
+    return result;
+  }
+
+
+  private _getOrCreateLocalProvider(
+      requestingProviderType: ProviderAstType, token: CompileTokenMetadata,
+      eager: boolean): ProviderAst|null {
+    const resolvedProvider = this._allProviders.get(tokenReference(token));
+    if (!resolvedProvider || ((requestingProviderType === ProviderAstType.Directive ||
+                               requestingProviderType === ProviderAstType.PublicService) &&
+                              resolvedProvider.providerType === ProviderAstType.PrivateService) ||
+        ((requestingProviderType === ProviderAstType.PrivateService ||
+          requestingProviderType === ProviderAstType.PublicService) &&
+         resolvedProvider.providerType === ProviderAstType.Builtin)) {
+      return null;
+    }
+    let transformedProviderAst = this._transformedProviders.get(tokenReference(token));
+    if (transformedProviderAst) {
+      return transformedProviderAst;
+    }
+    if (this._seenProviders.get(tokenReference(token)) != null) {
+      this.viewContext.errors.push(new ProviderError(
+          `Cannot instantiate cyclic dependency! ${tokenName(token)}`, this._sourceSpan));
+      return null;
+    }
+    this._seenProviders.set(tokenReference(token), true);
+    const transformedProviders = resolvedProvider.providers.map((provider) => {
+      let transformedUseValue = provider.useValue;
+      let transformedUseExisting = provider.useExisting !;
+      let transformedDeps: CompileDiDependencyMetadata[] = undefined !;
+      if (provider.useExisting != null) {
+        const existingDiDep = this._getDependency(
+            resolvedProvider.providerType, {token: provider.useExisting}, eager) !;
+        if (existingDiDep.token != null) {
+          transformedUseExisting = existingDiDep.token;
+        } else {
+          transformedUseExisting = null !;
+          transformedUseValue = existingDiDep.value;
+        }
+      } else if (provider.useFactory) {
+        const deps = provider.deps || provider.useFactory.diDeps;
+        transformedDeps =
+            deps.map((dep) => this._getDependency(resolvedProvider.providerType, dep, eager) !);
+      } else if (provider.useClass) {
+        const deps = provider.deps || provider.useClass.diDeps;
+        transformedDeps =
+            deps.map((dep) => this._getDependency(resolvedProvider.providerType, dep, eager) !);
+      }
+      return _transformProvider(provider, {
+        useExisting: transformedUseExisting,
+        useValue: transformedUseValue,
+        deps: transformedDeps
+      });
+    });
+    transformedProviderAst =
+        _transformProviderAst(resolvedProvider, {eager: eager, providers: transformedProviders});
+    this._transformedProviders.set(tokenReference(token), transformedProviderAst);
+    return transformedProviderAst;
+  }
+
+  private _getLocalDependency(
+      requestingProviderType: ProviderAstType, dep: CompileDiDependencyMetadata,
+      eager: boolean = false): CompileDiDependencyMetadata|null {
+    if (dep.isAttribute) {
+      const attrValue = this._attrs[dep.token !.value];
+      return {isValue: true, value: attrValue == null ? null : attrValue};
+    }
+
+    if (dep.token != null) {
+      // access builtints
+      if ((requestingProviderType === ProviderAstType.Directive ||
+           requestingProviderType === ProviderAstType.Component)) {
+        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) ===
+            this.viewContext.reflector.resolveExternalReference(Identifiers.ViewContainerRef)) {
+          (this as{transformedHasViewContainer: boolean}).transformedHasViewContainer = true;
+        }
+      }
+      // access the injector
+      if (tokenReference(dep.token) ===
+          this.viewContext.reflector.resolveExternalReference(Identifiers.Injector)) {
+        return dep;
+      }
+      // access providers
+      if (this._getOrCreateLocalProvider(requestingProviderType, dep.token, eager) != null) {
+        return dep;
+      }
+    }
+    return null;
+  }
+
+  private _getDependency(
+      requestingProviderType: ProviderAstType, dep: CompileDiDependencyMetadata,
+      eager: boolean = false): CompileDiDependencyMetadata|null {
+    let currElement: ProviderElementContext = this;
+    let currEager: boolean = eager;
+    let result: CompileDiDependencyMetadata|null = null;
+    if (!dep.isSkipSelf) {
+      result = this._getLocalDependency(requestingProviderType, dep, eager);
+    }
+    if (dep.isSelf) {
+      if (!result && dep.isOptional) {
+        result = {isValue: true, value: null};
+      }
+    } else {
+      // check parent elements
+      while (!result && currElement._parent) {
+        const prevElement = currElement;
+        currElement = currElement._parent;
+        if (prevElement._isViewRoot) {
+          currEager = false;
+        }
+        result = currElement._getLocalDependency(ProviderAstType.PublicService, dep, currEager);
+      }
+      // check @Host restriction
+      if (!result) {
+        if (!dep.isHost || this.viewContext.component.isHost ||
+            this.viewContext.component.type.reference === tokenReference(dep.token !) ||
+            this.viewContext.viewProviders.get(tokenReference(dep.token !)) != null) {
+          result = dep;
+        } else {
+          result = dep.isOptional ? {isValue: true, value: null} : null;
+        }
+      }
+    }
+    if (!result) {
+      this.viewContext.errors.push(
+          new ProviderError(`No provider for ${tokenName(dep.token!)}`, this._sourceSpan));
+    }
+    return result;
+  }
+}
+
+
+export class NgModuleProviderAnalyzer {
+  private _transformedProviders = new Map<any, ProviderAst>();
+  private _seenProviders = new Map<any, boolean>();
+  private _allProviders: Map<any, ProviderAst>;
+  private _errors: ProviderError[] = [];
+
+  constructor(
+      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};
+      _resolveProviders(
+          [ngModuleProvider], ProviderAstType.PublicService, true, sourceSpan, this._errors,
+          this._allProviders, /* isModule */ true);
+    });
+    _resolveProviders(
+        ngModule.transitiveModule.providers.map(entry => entry.provider).concat(extraProviders),
+        ProviderAstType.PublicService, false, sourceSpan, this._errors, this._allProviders,
+        /* isModule */ false);
+  }
+
+  parse(): ProviderAst[] {
+    Array.from(this._allProviders.values()).forEach((provider) => {
+      this._getOrCreateLocalProvider(provider.token, provider.eager);
+    });
+    if (this._errors.length > 0) {
+      const errorString = this._errors.join('\n');
+      throw new Error(`Provider parse errors:\n${errorString}`);
+    }
+    // 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 {
+    const resolvedProvider = this._allProviders.get(tokenReference(token));
+    if (!resolvedProvider) {
+      return null;
+    }
+    let transformedProviderAst = this._transformedProviders.get(tokenReference(token));
+    if (transformedProviderAst) {
+      return transformedProviderAst;
+    }
+    if (this._seenProviders.get(tokenReference(token)) != null) {
+      this._errors.push(new ProviderError(
+          `Cannot instantiate cyclic dependency! ${tokenName(token)}`,
+          resolvedProvider.sourceSpan));
+      return null;
+    }
+    this._seenProviders.set(tokenReference(token), true);
+    const transformedProviders = resolvedProvider.providers.map((provider) => {
+      let transformedUseValue = provider.useValue;
+      let transformedUseExisting = provider.useExisting !;
+      let transformedDeps: CompileDiDependencyMetadata[] = undefined !;
+      if (provider.useExisting != null) {
+        const existingDiDep =
+            this._getDependency({token: provider.useExisting}, eager, resolvedProvider.sourceSpan);
+        if (existingDiDep.token != null) {
+          transformedUseExisting = existingDiDep.token;
+        } else {
+          transformedUseExisting = null !;
+          transformedUseValue = existingDiDep.value;
+        }
+      } else if (provider.useFactory) {
+        const deps = provider.deps || provider.useFactory.diDeps;
+        transformedDeps =
+            deps.map((dep) => this._getDependency(dep, eager, resolvedProvider.sourceSpan));
+      } else if (provider.useClass) {
+        const deps = provider.deps || provider.useClass.diDeps;
+        transformedDeps =
+            deps.map((dep) => this._getDependency(dep, eager, resolvedProvider.sourceSpan));
+      }
+      return _transformProvider(provider, {
+        useExisting: transformedUseExisting,
+        useValue: transformedUseValue,
+        deps: transformedDeps
+      });
+    });
+    transformedProviderAst =
+        _transformProviderAst(resolvedProvider, {eager: eager, providers: transformedProviders});
+    this._transformedProviders.set(tokenReference(token), transformedProviderAst);
+    return transformedProviderAst;
+  }
+
+  private _getDependency(
+      dep: CompileDiDependencyMetadata, eager: boolean = false,
+      requestorSourceSpan: ParseSourceSpan): CompileDiDependencyMetadata {
+    let foundLocal = false;
+    if (!dep.isSkipSelf && dep.token != null) {
+      // access the injector
+      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) {
+        foundLocal = true;
+      }
+    }
+    return dep;
+  }
+}
+
+function _transformProvider(
+    provider: CompileProviderMetadata,
+    {useExisting, useValue, deps}:
+        {useExisting: CompileTokenMetadata, useValue: any, deps: CompileDiDependencyMetadata[]}) {
+  return {
+    token: provider.token,
+    useClass: provider.useClass,
+    useExisting: useExisting,
+    useFactory: provider.useFactory,
+    useValue: useValue,
+    deps: deps,
+    multi: provider.multi
+  };
+}
+
+function _transformProviderAst(
+    provider: ProviderAst,
+    {eager, providers}: {eager: boolean, providers: CompileProviderMetadata[]}): ProviderAst {
+  return new ProviderAst(
+      provider.token, provider.multiProvider, provider.eager || eager, providers,
+      provider.providerType, provider.lifecycleHooks, provider.sourceSpan, provider.isModule);
+}
+
+function _resolveProvidersFromDirectives(
+    directives: CompileDirectiveSummary[], sourceSpan: ParseSourceSpan,
+    targetErrors: ParseError[]): Map<any, ProviderAst> {
+  const providersByToken = new Map<any, ProviderAst>();
+  directives.forEach((directive) => {
+    const dirProvider:
+        CompileProviderMetadata = {token: {identifier: directive.type}, useClass: directive.type};
+    _resolveProviders(
+        [dirProvider],
+        directive.isComponent ? ProviderAstType.Component : ProviderAstType.Directive, true,
+        sourceSpan, targetErrors, providersByToken, /* isModule */ false);
+  });
+
+  // Note: directives need to be able to overwrite providers of a component!
+  const directivesWithComponentFirst =
+      directives.filter(dir => dir.isComponent).concat(directives.filter(dir => !dir.isComponent));
+  directivesWithComponentFirst.forEach((directive) => {
+    _resolveProviders(
+        directive.providers, ProviderAstType.PublicService, false, sourceSpan, targetErrors,
+        providersByToken, /* isModule */ false);
+    _resolveProviders(
+        directive.viewProviders, ProviderAstType.PrivateService, false, sourceSpan, targetErrors,
+        providersByToken, /* isModule */ false);
+  });
+  return providersByToken;
+}
+
+function _resolveProviders(
+    providers: CompileProviderMetadata[], providerType: ProviderAstType, eager: boolean,
+    sourceSpan: ParseSourceSpan, targetErrors: ParseError[],
+    targetProvidersByToken: Map<any, ProviderAst>, isModule: boolean) {
+  providers.forEach((provider) => {
+    let resolvedProvider = targetProvidersByToken.get(tokenReference(provider.token));
+    if (resolvedProvider != null && !!resolvedProvider.multiProvider !== !!provider.multi) {
+      targetErrors.push(new ProviderError(
+          `Mixing multi and non multi provider is not possible for token ${tokenName(resolvedProvider.token)}`,
+          sourceSpan));
+    }
+    if (!resolvedProvider) {
+      const lifecycleHooks = provider.token.identifier &&
+              (<CompileTypeMetadata>provider.token.identifier).lifecycleHooks ?
+          (<CompileTypeMetadata>provider.token.identifier).lifecycleHooks :
+          [];
+      const isUseValue = !(provider.useClass || provider.useExisting || provider.useFactory);
+      resolvedProvider = new ProviderAst(
+          provider.token, !!provider.multi, eager || isUseValue, [provider], providerType,
+          lifecycleHooks, sourceSpan, isModule);
+      targetProvidersByToken.set(tokenReference(provider.token), resolvedProvider);
+    } else {
+      if (!provider.multi) {
+        resolvedProvider.providers.length = 0;
+      }
+      resolvedProvider.providers.push(provider);
+    }
+  });
+}
+
+
+function _getViewQueries(component: CompileDirectiveMetadata): Map<any, QueryWithId[]> {
+  // Note: queries start with id 1 so we can use the number in a Bloom filter!
+  let viewQueryId = 1;
+  const viewQueries = new Map<any, QueryWithId[]>();
+  if (component.viewQueries) {
+    component.viewQueries.forEach(
+        (query) => _addQueryToTokenMap(viewQueries, {meta: query, queryId: viewQueryId++}));
+  }
+  return viewQueries;
+}
+
+function _getContentQueries(
+    contentQueryStartId: number, directives: CompileDirectiveSummary[]): Map<any, QueryWithId[]> {
+  let contentQueryId = contentQueryStartId;
+  const contentQueries = new Map<any, QueryWithId[]>();
+  directives.forEach((directive, directiveIndex) => {
+    if (directive.queries) {
+      directive.queries.forEach(
+          (query) => _addQueryToTokenMap(contentQueries, {meta: query, queryId: contentQueryId++}));
+    }
+  });
+  return contentQueries;
+}
+
+function _addQueryToTokenMap(map: Map<any, QueryWithId[]>, query: QueryWithId) {
+  query.meta.selectors.forEach((token: CompileTokenMetadata) => {
+    let entry = map.get(tokenReference(token));
+    if (!entry) {
+      entry = [];
+      map.set(tokenReference(token), entry);
+    }
+    entry.push(query);
+  });
+}
diff --git a/packages/compiler/src/render3/r3_ast.ts b/packages/compiler/src/render3/r3_ast.ts
new file mode 100644
index 000000000000..52767919ade0
--- /dev/null
+++ b/packages/compiler/src/render3/r3_ast.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 {SecurityContext} from '../core';
+import {AST, BindingType, BoundElementProperty, ParsedEvent, ParsedEventType} from '../expression_parser/ast';
+import {ParseSourceSpan} from '../parse_util';
+
+export interface Node {
+  sourceSpan: ParseSourceSpan;
+  visit<Result>(visitor: Visitor<Result>): Result;
+}
+
+export class Text implements Node {
+  constructor(public value: string, public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitText(this); }
+}
+
+export class BoundText implements Node {
+  constructor(public value: AST, public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitBoundText(this); }
+}
+
+export class TextAttribute implements Node {
+  constructor(
+      public name: string, public value: string, public sourceSpan: ParseSourceSpan,
+      public valueSpan?: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitTextAttribute(this); }
+}
+
+export class BoundAttribute implements Node {
+  constructor(
+      public name: string, public type: BindingType, public securityContext: SecurityContext,
+      public value: AST, public unit: string|null, public sourceSpan: ParseSourceSpan) {}
+
+  static fromBoundElementProperty(prop: BoundElementProperty) {
+    return new BoundAttribute(
+        prop.name, prop.type, prop.securityContext, prop.value, prop.unit, prop.sourceSpan);
+  }
+
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitBoundAttribute(this); }
+}
+
+export class BoundEvent implements Node {
+  constructor(
+      public name: string, public handler: AST, public target: string|null,
+      public phase: string|null, public sourceSpan: ParseSourceSpan) {}
+
+  static fromParsedEvent(event: ParsedEvent) {
+    const target: string|null = event.type === ParsedEventType.Regular ? event.targetOrPhase : null;
+    const phase: string|null =
+        event.type === ParsedEventType.Animation ? event.targetOrPhase : null;
+    return new BoundEvent(event.name, event.handler, target, phase, event.sourceSpan);
+  }
+
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitBoundEvent(this); }
+}
+
+export class Element implements Node {
+  constructor(
+      public name: string, public attributes: TextAttribute[], public inputs: BoundAttribute[],
+      public outputs: BoundEvent[], public children: Node[], public references: Reference[],
+      public sourceSpan: ParseSourceSpan, public startSourceSpan: ParseSourceSpan|null,
+      public endSourceSpan: ParseSourceSpan|null) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitElement(this); }
+}
+
+export class Template implements Node {
+  constructor(
+      public attributes: TextAttribute[], public inputs: BoundAttribute[], public children: Node[],
+      public references: Reference[], public variables: Variable[],
+      public sourceSpan: ParseSourceSpan, public startSourceSpan: ParseSourceSpan|null,
+      public endSourceSpan: ParseSourceSpan|null) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitTemplate(this); }
+}
+
+export class Content implements Node {
+  constructor(
+      public selectorIndex: number, public attributes: TextAttribute[],
+      public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitContent(this); }
+}
+
+export class Variable implements Node {
+  constructor(public name: string, public value: string, public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitVariable(this); }
+}
+
+export class Reference implements Node {
+  constructor(public name: string, public value: string, public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitReference(this); }
+}
+
+export interface Visitor<Result = any> {
+  // Returning a truthy value from `visit()` will prevent `visitAll()` from the call to the typed
+  // method and result returned will become the result included in `visitAll()`s result array.
+  visit?(node: Node): Result;
+
+  visitElement(element: Element): Result;
+  visitTemplate(template: Template): Result;
+  visitContent(content: Content): Result;
+  visitVariable(variable: Variable): Result;
+  visitReference(reference: Reference): Result;
+  visitTextAttribute(attribute: TextAttribute): Result;
+  visitBoundAttribute(attribute: BoundAttribute): Result;
+  visitBoundEvent(attribute: BoundEvent): Result;
+  visitText(text: Text): Result;
+  visitBoundText(text: BoundText): Result;
+}
+
+export class NullVisitor implements Visitor<void> {
+  visitElement(element: Element): void {}
+  visitTemplate(template: Template): void {}
+  visitContent(content: Content): void {}
+  visitVariable(variable: Variable): void {}
+  visitReference(reference: Reference): void {}
+  visitTextAttribute(attribute: TextAttribute): void {}
+  visitBoundAttribute(attribute: BoundAttribute): void {}
+  visitBoundEvent(attribute: BoundEvent): void {}
+  visitText(text: Text): void {}
+  visitBoundText(text: BoundText): void {}
+}
+
+export class RecursiveVisitor implements Visitor<void> {
+  visitElement(element: Element): void {
+    visitAll(this, element.attributes);
+    visitAll(this, element.children);
+    visitAll(this, element.references);
+  }
+  visitTemplate(template: Template): void {
+    visitAll(this, template.attributes);
+    visitAll(this, template.children);
+    visitAll(this, template.references);
+    visitAll(this, template.variables);
+  }
+  visitContent(content: Content): void {}
+  visitVariable(variable: Variable): void {}
+  visitReference(reference: Reference): void {}
+  visitTextAttribute(attribute: TextAttribute): void {}
+  visitBoundAttribute(attribute: BoundAttribute): void {}
+  visitBoundEvent(attribute: BoundEvent): void {}
+  visitText(text: Text): void {}
+  visitBoundText(text: BoundText): void {}
+}
+
+export class TransformVisitor implements Visitor<Node> {
+  visitElement(element: Element): Node {
+    const newAttributes = transformAll(this, element.attributes);
+    const newInputs = transformAll(this, element.inputs);
+    const newOutputs = transformAll(this, element.outputs);
+    const newChildren = transformAll(this, element.children);
+    const newReferences = transformAll(this, element.references);
+    if (newAttributes != element.attributes || newInputs != element.inputs ||
+        newOutputs != element.outputs || newChildren != element.children ||
+        newReferences != element.references) {
+      return new Element(
+          element.name, newAttributes, newInputs, newOutputs, newChildren, newReferences,
+          element.sourceSpan, element.startSourceSpan, element.endSourceSpan);
+    }
+    return element;
+  }
+
+  visitTemplate(template: Template): Node {
+    const newAttributes = transformAll(this, template.attributes);
+    const newInputs = transformAll(this, template.inputs);
+    const newChildren = transformAll(this, template.children);
+    const newReferences = transformAll(this, template.references);
+    const newVariables = transformAll(this, template.variables);
+    if (newAttributes != template.attributes || newInputs != template.inputs ||
+        newChildren != template.children || newVariables != template.variables ||
+        newReferences != template.references) {
+      return new Template(
+          newAttributes, newInputs, newChildren, newReferences, newVariables, template.sourceSpan,
+          template.startSourceSpan, template.endSourceSpan);
+    }
+    return template;
+  }
+
+  visitContent(content: Content): Node { return content; }
+
+  visitVariable(variable: Variable): Node { return variable; }
+  visitReference(reference: Reference): Node { return reference; }
+  visitTextAttribute(attribute: TextAttribute): Node { return attribute; }
+  visitBoundAttribute(attribute: BoundAttribute): Node { return attribute; }
+  visitBoundEvent(attribute: BoundEvent): Node { return attribute; }
+  visitText(text: Text): Node { return text; }
+  visitBoundText(text: BoundText): Node { return text; }
+}
+
+export function visitAll<Result>(visitor: Visitor<Result>, nodes: Node[]): Result[] {
+  const result: Result[] = [];
+  if (visitor.visit) {
+    for (const node of nodes) {
+      const newNode = visitor.visit(node) || node.visit(visitor);
+    }
+  } else {
+    for (const node of nodes) {
+      const newNode = node.visit(visitor);
+      if (newNode) {
+        result.push(newNode);
+      }
+    }
+  }
+  return result;
+}
+
+export function transformAll<Result extends Node>(
+    visitor: Visitor<Node>, nodes: Result[]): Result[] {
+  const result: Result[] = [];
+  let changed = false;
+  for (const node of nodes) {
+    const newNode = node.visit(visitor);
+    if (newNode) {
+      result.push(newNode as Result);
+    }
+    changed = changed || newNode != node;
+  }
+  return changed ? result : nodes;
+}
\ No newline at end of file
diff --git a/packages/compiler/src/render3/r3_factory.ts b/packages/compiler/src/render3/r3_factory.ts
new file mode 100644
index 000000000000..b07f91a9257f
--- /dev/null
+++ b/packages/compiler/src/render3/r3_factory.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 '../aot/static_symbol';
+import {CompileTypeMetadata, tokenReference} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
+import {InjectFlags} from '../core';
+import {Identifiers} from '../identifiers';
+import * as o from '../output/output_ast';
+import {Identifiers as R3} from '../render3/r3_identifiers';
+import {OutputContext} from '../util';
+
+import {MEANING_SEPARATOR, unsupported} from './view/util';
+
+
+/**
+ * Metadata required by the factory generator to generate a `factory` function for a type.
+ */
+export interface R3ConstructorFactoryMetadata {
+  /**
+   * String name of the type being generated (used to name the factory function).
+   */
+  name: string;
+
+  /**
+   * An expression representing the function (or constructor) which will instantiate the requested
+   * type.
+   *
+   * This could be a reference to a constructor type, or to a user-defined factory function. The
+   * `useNew` property determines whether it will be called as a constructor or not.
+   */
+  type: o.Expression;
+
+  /**
+   * Regardless of whether `fnOrClass` is a constructor function or a user-defined factory, it
+   * may have 0 or more parameters, which will be injected according to the `R3DependencyMetadata`
+   * for those parameters. If this is `null`, then the type's constructor is nonexistent and will
+   * be inherited from `fnOrClass` which is interpreted as the current type.
+   */
+  deps: R3DependencyMetadata[]|null;
+
+  /**
+   * An expression for the function which will be used to inject dependencies. The API of this
+   * function could be different, and other options control how it will be invoked.
+   */
+  injectFn: o.ExternalReference;
+}
+
+export enum R3FactoryDelegateType {
+  Class,
+  Function,
+  Factory,
+}
+
+export interface R3DelegatedFactoryMetadata extends R3ConstructorFactoryMetadata {
+  delegate: o.Expression;
+  delegateType: R3FactoryDelegateType.Factory;
+}
+
+export interface R3DelegatedFnOrClassMetadata extends R3ConstructorFactoryMetadata {
+  delegate: o.Expression;
+  delegateType: R3FactoryDelegateType.Class|R3FactoryDelegateType.Function;
+  delegateDeps: R3DependencyMetadata[];
+}
+
+export interface R3ExpressionFactoryMetadata extends R3ConstructorFactoryMetadata {
+  expression: o.Expression;
+}
+
+export type R3FactoryMetadata = R3ConstructorFactoryMetadata | R3DelegatedFactoryMetadata |
+    R3DelegatedFnOrClassMetadata | R3ExpressionFactoryMetadata;
+
+/**
+ * Resolved type of a dependency.
+ *
+ * Occasionally, dependencies will have special significance which is known statically. In that
+ * case the `R3ResolvedDependencyType` informs the factory generator that a particular dependency
+ * should be generated specially (usually by calling a special injection function instead of the
+ * standard one).
+ */
+export enum R3ResolvedDependencyType {
+  /**
+   * A normal token dependency.
+   */
+  Token = 0,
+
+  /**
+   * The dependency is for an attribute.
+   *
+   * The token expression is a string representing the attribute name.
+   */
+  Attribute = 1,
+
+  /**
+   * The dependency is for the `Injector` type itself.
+   */
+  Injector = 2,
+
+  /**
+   * The dependency is for `ElementRef`.
+   */
+  ElementRef = 3,
+
+  /**
+   * The dependency is for `TemplateRef`.
+   */
+  TemplateRef = 4,
+
+  /**
+   * The dependency is for `ViewContainerRef`.
+   */
+  ViewContainerRef = 5,
+
+  /**
+   * The dependency is for `ChangeDetectorRef`.
+   */
+  ChangeDetectorRef = 6,
+}
+
+/**
+ * Metadata representing a single dependency to be injected into a constructor or function call.
+ */
+export interface R3DependencyMetadata {
+  /**
+   * An expression representing the token or value to be injected.
+   */
+  token: o.Expression;
+
+  /**
+   * An enum indicating whether this dependency has special meaning to Angular and needs to be
+   * injected specially.
+   */
+  resolved: R3ResolvedDependencyType;
+
+  /**
+   * Whether the dependency has an @Host qualifier.
+   */
+  host: boolean;
+
+  /**
+   * Whether the dependency has an @Optional qualifier.
+   */
+  optional: boolean;
+
+  /**
+   * Whether the dependency has an @Self qualifier.
+   */
+  self: boolean;
+
+  /**
+   * Whether the dependency has an @SkipSelf qualifier.
+   */
+  skipSelf: boolean;
+}
+
+/**
+ * Construct a factory function expression for the given `R3FactoryMetadata`.
+ */
+export function compileFactoryFunction(meta: R3FactoryMetadata):
+    {factory: o.Expression, statements: o.Statement[]} {
+  const t = o.variable('t');
+  const statements: o.Statement[] = [];
+
+  // The type to instantiate via constructor invocation. If there is no delegated factory, meaning
+  // this type is always created by constructor invocation, then this is the type-to-create
+  // parameter provided by the user (t) if specified, or the current type if not. If there is a
+  // delegated factory (which is used to create the current type) then this is only the type-to-
+  // create parameter (t).
+  const typeForCtor =
+      !isDelegatedMetadata(meta) ? new o.BinaryOperatorExpr(o.BinaryOperator.Or, t, meta.type) : t;
+
+  let ctorExpr: o.Expression|null = null;
+  if (meta.deps !== null) {
+    // There is a constructor (either explicitly or implicitly defined).
+    ctorExpr = new o.InstantiateExpr(typeForCtor, injectDependencies(meta.deps, meta.injectFn));
+  } else {
+    const baseFactory = o.variable(`ɵ${meta.name}_BaseFactory`);
+    const getInheritedFactory = o.importExpr(R3.getInheritedFactory);
+    const baseFactoryStmt = baseFactory.set(getInheritedFactory.callFn([meta.type]))
+                                .toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]);
+    statements.push(baseFactoryStmt);
+
+    // There is no constructor, use the base class' factory to construct typeForCtor.
+    ctorExpr = baseFactory.callFn([typeForCtor]);
+  }
+  const ctorExprFinal = ctorExpr;
+
+  const body: o.Statement[] = [];
+  let retExpr: o.Expression|null = null;
+
+  function makeConditionalFactory(nonCtorExpr: o.Expression): o.ReadVarExpr {
+    const r = o.variable('r');
+    body.push(r.set(o.NULL_EXPR).toDeclStmt());
+    body.push(o.ifStmt(t, [r.set(ctorExprFinal).toStmt()], [r.set(nonCtorExpr).toStmt()]));
+    return r;
+  }
+
+  if (isDelegatedMetadata(meta) && meta.delegateType === R3FactoryDelegateType.Factory) {
+    const delegateFactory = o.variable(`ɵ${meta.name}_BaseFactory`);
+    const getFactoryOf = o.importExpr(R3.getFactoryOf);
+    if (meta.delegate.isEquivalent(meta.type)) {
+      throw new Error(`Illegal state: compiling factory that delegates to itself`);
+    }
+    const delegateFactoryStmt = delegateFactory.set(getFactoryOf.callFn([meta.delegate]))
+                                    .toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]);
+
+    statements.push(delegateFactoryStmt);
+    const r = makeConditionalFactory(delegateFactory.callFn([]));
+    retExpr = r;
+  } else if (isDelegatedMetadata(meta)) {
+    // This type is created with a delegated factory. If a type parameter is not specified, call
+    // the factory instead.
+    const delegateArgs = injectDependencies(meta.delegateDeps, meta.injectFn);
+    // Either call `new delegate(...)` or `delegate(...)` depending on meta.useNewForDelegate.
+    const factoryExpr = new (
+        meta.delegateType === R3FactoryDelegateType.Class ?
+            o.InstantiateExpr :
+            o.InvokeFunctionExpr)(meta.delegate, delegateArgs);
+    retExpr = makeConditionalFactory(factoryExpr);
+  } else if (isExpressionFactoryMetadata(meta)) {
+    // TODO(alxhub): decide whether to lower the value here or in the caller
+    retExpr = makeConditionalFactory(meta.expression);
+  } else {
+    retExpr = ctorExpr;
+  }
+
+  return {
+    factory: o.fn(
+        [new o.FnParam('t', o.DYNAMIC_TYPE)], [...body, new o.ReturnStatement(retExpr)],
+        o.INFERRED_TYPE, undefined, `${meta.name}_Factory`),
+    statements,
+  };
+}
+
+function injectDependencies(
+    deps: R3DependencyMetadata[], injectFn: o.ExternalReference): o.Expression[] {
+  return deps.map(dep => compileInjectDependency(dep, injectFn));
+}
+
+function compileInjectDependency(
+    dep: R3DependencyMetadata, injectFn: o.ExternalReference): o.Expression {
+  // Interpret the dependency according to its resolved type.
+  switch (dep.resolved) {
+    case R3ResolvedDependencyType.Token:
+    case R3ResolvedDependencyType.Injector: {
+      // Build up the injection flags according to the metadata.
+      const flags = InjectFlags.Default | (dep.self ? InjectFlags.Self : 0) |
+          (dep.skipSelf ? InjectFlags.SkipSelf : 0) | (dep.host ? InjectFlags.Host : 0) |
+          (dep.optional ? InjectFlags.Optional : 0);
+      // Determine the token used for injection. In almost all cases this is the given token, but
+      // if the dependency is resolved to the `Injector` then the special `INJECTOR` token is used
+      // instead.
+      let token: o.Expression = dep.token;
+      if (dep.resolved === R3ResolvedDependencyType.Injector) {
+        token = o.importExpr(Identifiers.INJECTOR);
+      }
+
+      // Build up the arguments to the injectFn call.
+      const injectArgs = [token];
+      // If this dependency is optional or otherwise has non-default flags, then additional
+      // parameters describing how to inject the dependency must be passed to the inject function
+      // that's being used.
+      if (flags !== InjectFlags.Default || dep.optional) {
+        injectArgs.push(o.literal(flags));
+      }
+      return o.importExpr(injectFn).callFn(injectArgs);
+    }
+    case R3ResolvedDependencyType.Attribute:
+      // In the case of attributes, the attribute name in question is given as the token.
+      return o.importExpr(R3.injectAttribute).callFn([dep.token]);
+    case R3ResolvedDependencyType.ElementRef:
+      return o.importExpr(R3.injectElementRef).callFn([]);
+    case R3ResolvedDependencyType.TemplateRef:
+      return o.importExpr(R3.injectTemplateRef).callFn([]);
+    case R3ResolvedDependencyType.ViewContainerRef:
+      return o.importExpr(R3.injectViewContainerRef).callFn([]);
+    case R3ResolvedDependencyType.ChangeDetectorRef:
+      return o.importExpr(R3.injectChangeDetectorRef).callFn([]);
+    default:
+      return unsupported(
+          `Unknown R3ResolvedDependencyType: ${R3ResolvedDependencyType[dep.resolved]}`);
+  }
+}
+
+/**
+ * A helper function useful for extracting `R3DependencyMetadata` from a Render2
+ * `CompileTypeMetadata` instance.
+ */
+export function dependenciesFromGlobalMetadata(
+    type: CompileTypeMetadata, outputCtx: OutputContext,
+    reflector: CompileReflector): R3DependencyMetadata[] {
+  // Use the `CompileReflector` to look up references to some well-known Angular types. These will
+  // be compared with the token to statically determine whether the token has significance to
+  // Angular, and set the correct `R3ResolvedDependencyType` as a result.
+  const elementRef = reflector.resolveExternalReference(Identifiers.ElementRef);
+  const templateRef = reflector.resolveExternalReference(Identifiers.TemplateRef);
+  const viewContainerRef = reflector.resolveExternalReference(Identifiers.ViewContainerRef);
+  const injectorRef = reflector.resolveExternalReference(Identifiers.Injector);
+
+  // Iterate through the type's DI dependencies and produce `R3DependencyMetadata` for each of them.
+  const deps: R3DependencyMetadata[] = [];
+  for (let dependency of type.diDeps) {
+    if (dependency.token) {
+      const tokenRef = tokenReference(dependency.token);
+      let resolved: R3ResolvedDependencyType = R3ResolvedDependencyType.Token;
+      if (tokenRef === elementRef) {
+        resolved = R3ResolvedDependencyType.ElementRef;
+      } else if (tokenRef === templateRef) {
+        resolved = R3ResolvedDependencyType.TemplateRef;
+      } else if (tokenRef === viewContainerRef) {
+        resolved = R3ResolvedDependencyType.ViewContainerRef;
+      } else if (tokenRef === injectorRef) {
+        resolved = R3ResolvedDependencyType.Injector;
+      } else if (dependency.isAttribute) {
+        resolved = R3ResolvedDependencyType.Attribute;
+      }
+
+      // In the case of most dependencies, the token will be a reference to a type. Sometimes,
+      // however, it can be a string, in the case of older Angular code or @Attribute injection.
+      const token =
+          tokenRef instanceof StaticSymbol ? outputCtx.importExpr(tokenRef) : o.literal(tokenRef);
+
+      // Construct the dependency.
+      deps.push({
+        token,
+        resolved,
+        host: !!dependency.isHost,
+        optional: !!dependency.isOptional,
+        self: !!dependency.isSelf,
+        skipSelf: !!dependency.isSkipSelf,
+      });
+    } else {
+      unsupported('dependency without a token');
+    }
+  }
+
+  return deps;
+}
+
+function isDelegatedMetadata(meta: R3FactoryMetadata): meta is R3DelegatedFactoryMetadata|
+    R3DelegatedFnOrClassMetadata {
+  return (meta as any).delegateType !== undefined;
+}
+
+function isExpressionFactoryMetadata(meta: R3FactoryMetadata): meta is R3ExpressionFactoryMetadata {
+  return (meta as any).expression !== undefined;
+}
\ No newline at end of file
diff --git a/packages/compiler/src/render3/r3_identifiers.ts b/packages/compiler/src/render3/r3_identifiers.ts
new file mode 100644
index 000000000000..b18f49bd990e
--- /dev/null
+++ b/packages/compiler/src/render3/r3_identifiers.ts
@@ -0,0 +1,196 @@
+/**
+ * @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 '../output/output_ast';
+
+const CORE = '@angular/core';
+
+export class Identifiers {
+  /* Methods */
+  static NEW_METHOD = 'factory';
+  static TRANSFORM_METHOD = 'transform';
+  static PATCH_DEPS = 'patchedDeps';
+
+  /* Instructions */
+  static namespaceHTML: o.ExternalReference = {name: 'ɵNH', moduleName: CORE};
+
+  static namespaceMathML: o.ExternalReference = {name: 'ɵNM', moduleName: CORE};
+
+  static namespaceSVG: o.ExternalReference = {name: 'ɵNS', moduleName: CORE};
+
+  static element: o.ExternalReference = {name: 'ɵEe', moduleName: CORE};
+
+  static elementStart: o.ExternalReference = {name: 'ɵE', moduleName: CORE};
+
+  static elementEnd: o.ExternalReference = {name: 'ɵe', moduleName: CORE};
+
+  static elementProperty: o.ExternalReference = {name: 'ɵp', moduleName: CORE};
+
+  static elementAttribute: o.ExternalReference = {name: 'ɵa', moduleName: CORE};
+
+  static elementClassProp: o.ExternalReference = {name: 'ɵcp', moduleName: CORE};
+
+  static elementContainerStart: o.ExternalReference = {name: 'ɵEC', moduleName: CORE};
+
+  static elementContainerEnd: o.ExternalReference = {name: 'ɵeC', moduleName: CORE};
+
+  static elementStyling: o.ExternalReference = {name: 'ɵs', moduleName: CORE};
+
+  static elementStylingMap: o.ExternalReference = {name: 'ɵsm', moduleName: CORE};
+
+  static elementStyleProp: o.ExternalReference = {name: 'ɵsp', moduleName: CORE};
+
+  static elementStylingApply: o.ExternalReference = {name: 'ɵsa', moduleName: CORE};
+
+  static containerCreate: o.ExternalReference = {name: 'ɵC', moduleName: CORE};
+
+  static nextContext: o.ExternalReference = {name: 'ɵx', moduleName: CORE};
+
+  static text: o.ExternalReference = {name: 'ɵT', moduleName: CORE};
+
+  static textBinding: o.ExternalReference = {name: 'ɵt', moduleName: CORE};
+
+  static bind: o.ExternalReference = {name: 'ɵb', moduleName: CORE};
+
+  static getCurrentView: o.ExternalReference = {name: 'ɵgV', moduleName: CORE};
+
+  static restoreView: o.ExternalReference = {name: 'ɵrV', moduleName: CORE};
+
+  static interpolation1: o.ExternalReference = {name: 'ɵi1', moduleName: CORE};
+  static interpolation2: o.ExternalReference = {name: 'ɵi2', moduleName: CORE};
+  static interpolation3: o.ExternalReference = {name: 'ɵi3', moduleName: CORE};
+  static interpolation4: o.ExternalReference = {name: 'ɵi4', moduleName: CORE};
+  static interpolation5: o.ExternalReference = {name: 'ɵi5', moduleName: CORE};
+  static interpolation6: o.ExternalReference = {name: 'ɵi6', moduleName: CORE};
+  static interpolation7: o.ExternalReference = {name: 'ɵi7', moduleName: CORE};
+  static interpolation8: o.ExternalReference = {name: 'ɵi8', moduleName: CORE};
+  static interpolationV: o.ExternalReference = {name: 'ɵiV', moduleName: CORE};
+
+  static pureFunction0: o.ExternalReference = {name: 'ɵf0', moduleName: CORE};
+  static pureFunction1: o.ExternalReference = {name: 'ɵf1', moduleName: CORE};
+  static pureFunction2: o.ExternalReference = {name: 'ɵf2', moduleName: CORE};
+  static pureFunction3: o.ExternalReference = {name: 'ɵf3', moduleName: CORE};
+  static pureFunction4: o.ExternalReference = {name: 'ɵf4', moduleName: CORE};
+  static pureFunction5: o.ExternalReference = {name: 'ɵf5', moduleName: CORE};
+  static pureFunction6: o.ExternalReference = {name: 'ɵf6', moduleName: CORE};
+  static pureFunction7: o.ExternalReference = {name: 'ɵf7', moduleName: CORE};
+  static pureFunction8: o.ExternalReference = {name: 'ɵf8', moduleName: CORE};
+  static pureFunctionV: o.ExternalReference = {name: 'ɵfV', moduleName: CORE};
+
+  static pipeBind1: o.ExternalReference = {name: 'ɵpb1', moduleName: CORE};
+  static pipeBind2: o.ExternalReference = {name: 'ɵpb2', moduleName: CORE};
+  static pipeBind3: o.ExternalReference = {name: 'ɵpb3', moduleName: CORE};
+  static pipeBind4: o.ExternalReference = {name: 'ɵpb4', moduleName: CORE};
+  static pipeBindV: o.ExternalReference = {name: 'ɵpbV', moduleName: CORE};
+
+  static load: o.ExternalReference = {name: 'ɵld', moduleName: CORE};
+  static loadDirective: o.ExternalReference = {name: 'ɵd', moduleName: CORE};
+  static loadQueryList: o.ExternalReference = {name: 'ɵql', moduleName: CORE};
+
+  static pipe: o.ExternalReference = {name: 'ɵPp', moduleName: CORE};
+
+  static projection: o.ExternalReference = {name: 'ɵP', moduleName: CORE};
+  static projectionDef: o.ExternalReference = {name: 'ɵpD', moduleName: CORE};
+
+  static reference: o.ExternalReference = {name: 'ɵr', moduleName: CORE};
+
+  static inject: o.ExternalReference = {name: 'inject', moduleName: CORE};
+
+  static injectAttribute: o.ExternalReference = {name: 'ɵinjectAttribute', moduleName: CORE};
+
+  static injectElementRef: o.ExternalReference = {name: 'ɵinjectElementRef', moduleName: CORE};
+
+  static injectTemplateRef: o.ExternalReference = {name: 'ɵinjectTemplateRef', moduleName: CORE};
+
+  static injectViewContainerRef:
+      o.ExternalReference = {name: 'ɵinjectViewContainerRef', moduleName: CORE};
+
+  static injectChangeDetectorRef:
+      o.ExternalReference = {name: 'ɵinjectChangeDetectorRef', moduleName: CORE};
+
+  static directiveInject: o.ExternalReference = {name: 'ɵdirectiveInject', moduleName: CORE};
+
+  static defineBase: o.ExternalReference = {name: 'ɵdefineBase', moduleName: CORE};
+
+  static BaseDef: o.ExternalReference = {
+    name: 'ɵBaseDef',
+    moduleName: CORE,
+  };
+
+  static defineComponent: o.ExternalReference = {name: 'ɵdefineComponent', moduleName: CORE};
+
+  static ComponentDef: o.ExternalReference = {
+    name: 'ɵComponentDef',
+    moduleName: CORE,
+  };
+
+  static defineDirective: o.ExternalReference = {
+    name: 'ɵdefineDirective',
+    moduleName: CORE,
+  };
+
+  static DirectiveDef: o.ExternalReference = {
+    name: 'ɵDirectiveDef',
+    moduleName: CORE,
+  };
+
+  static InjectorDef: o.ExternalReference = {
+    name: 'ɵInjectorDef',
+    moduleName: CORE,
+  };
+
+  static defineInjector: o.ExternalReference = {
+    name: 'defineInjector',
+    moduleName: CORE,
+  };
+
+  static NgModuleDef: o.ExternalReference = {
+    name: 'ɵNgModuleDef',
+    moduleName: CORE,
+  };
+
+  static defineNgModule: o.ExternalReference = {name: 'ɵdefineNgModule', moduleName: CORE};
+
+  static PipeDef: o.ExternalReference = {name: 'ɵPipeDef', moduleName: CORE};
+
+  static definePipe: o.ExternalReference = {name: 'ɵdefinePipe', moduleName: CORE};
+
+  static query: o.ExternalReference = {name: 'ɵQ', moduleName: CORE};
+  static queryRefresh: o.ExternalReference = {name: 'ɵqR', moduleName: CORE};
+  static registerContentQuery: o.ExternalReference = {name: 'ɵQr', moduleName: CORE};
+
+  static NgOnChangesFeature: o.ExternalReference = {name: 'ɵNgOnChangesFeature', moduleName: CORE};
+
+  static InheritDefinitionFeature:
+      o.ExternalReference = {name: 'ɵInheritDefinitionFeature', moduleName: CORE};
+
+  static PublicFeature: o.ExternalReference = {name: 'ɵPublicFeature', moduleName: CORE};
+
+  static listener: o.ExternalReference = {name: 'ɵL', moduleName: CORE};
+
+  static getFactoryOf: o.ExternalReference = {
+    name: 'ɵgetFactoryOf',
+    moduleName: CORE,
+  };
+
+  static getInheritedFactory: o.ExternalReference = {
+    name: 'ɵgetInheritedFactory',
+    moduleName: CORE,
+  };
+
+  // Reserve slots for pure functions
+  static reserveSlots: o.ExternalReference = {name: 'ɵrS', moduleName: CORE};
+
+  // sanitization-related functions
+  static sanitizeHtml: o.ExternalReference = {name: 'ɵzh', moduleName: CORE};
+  static sanitizeStyle: o.ExternalReference = {name: 'ɵzs', moduleName: CORE};
+  static defaultStyleSanitizer: o.ExternalReference = {name: 'ɵzss', moduleName: CORE};
+  static sanitizeResourceUrl: o.ExternalReference = {name: 'ɵzr', moduleName: CORE};
+  static sanitizeScript: o.ExternalReference = {name: 'ɵzc', moduleName: CORE};
+  static sanitizeUrl: o.ExternalReference = {name: 'ɵzu', moduleName: CORE};
+}
diff --git a/packages/compiler/src/render3/r3_jit.ts b/packages/compiler/src/render3/r3_jit.ts
new file mode 100644
index 000000000000..2626dbbdbe36
--- /dev/null
+++ b/packages/compiler/src/render3/r3_jit.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 {CompileReflector} from '../compile_reflector';
+import {ConstantPool} from '../constant_pool';
+import * as o from '../output/output_ast';
+import {jitStatements} from '../output/output_jit';
+
+/**
+ * Implementation of `CompileReflector` which resolves references to @angular/core
+ * symbols at runtime, according to a consumer-provided mapping.
+ *
+ * Only supports `resolveExternalReference`, all other methods throw.
+ */
+class R3JitReflector implements CompileReflector {
+  constructor(private context: {[key: string]: any}) {}
+
+  resolveExternalReference(ref: o.ExternalReference): any {
+    // This reflector only handles @angular/core imports.
+    if (ref.moduleName !== '@angular/core') {
+      throw new Error(
+          `Cannot resolve external reference to ${ref.moduleName}, only references to @angular/core are supported.`);
+    }
+    if (!this.context.hasOwnProperty(ref.name !)) {
+      throw new Error(`No value provided for @angular/core symbol '${ref.name!}'.`);
+    }
+    return this.context[ref.name !];
+  }
+
+  parameters(typeOrFunc: any): any[][] { throw new Error('Not implemented.'); }
+
+  annotations(typeOrFunc: any): any[] { throw new Error('Not implemented.'); }
+
+  shallowAnnotations(typeOrFunc: any): any[] { throw new Error('Not implemented.'); }
+
+  tryAnnotations(typeOrFunc: any): any[] { throw new Error('Not implemented.'); }
+
+  propMetadata(typeOrFunc: any): {[key: string]: any[];} { throw new Error('Not implemented.'); }
+
+  hasLifecycleHook(type: any, lcProperty: string): boolean { throw new Error('Not implemented.'); }
+
+  guards(typeOrFunc: any): {[key: string]: any;} { throw new Error('Not implemented.'); }
+
+  componentModuleUrl(type: any, cmpMetadata: any): string { throw new Error('Not implemented.'); }
+}
+
+/**
+ * JIT compiles an expression and returns the result of executing that expression.
+ *
+ * @param def the definition which will be compiled and executed to get the value to patch
+ * @param context an object map of @angular/core symbol names to symbols which will be available in
+ * the context of the compiled expression
+ * @param sourceUrl a URL to use for the source map of the compiled expression
+ * @param constantPool an optional `ConstantPool` which contains constants used in the expression
+ */
+export function jitExpression(
+    def: o.Expression, context: {[key: string]: any}, sourceUrl: string,
+    preStatements: o.Statement[]): any {
+  // The ConstantPool may contain Statements which declare variables used in the final expression.
+  // Therefore, its statements need to precede the actual JIT operation. The final statement is a
+  // declaration of $def which is set to the expression being compiled.
+  const statements: o.Statement[] = [
+    ...preStatements,
+    new o.DeclareVarStmt('$def', def, undefined, [o.StmtModifier.Exported]),
+  ];
+
+  const res = jitStatements(sourceUrl, statements, new R3JitReflector(context), false);
+  return res['$def'];
+}
diff --git a/packages/compiler/src/render3/r3_module_compiler.ts b/packages/compiler/src/render3/r3_module_compiler.ts
new file mode 100644
index 000000000000..f27fbd2b1bd3
--- /dev/null
+++ b/packages/compiler/src/render3/r3_module_compiler.ts
@@ -0,0 +1,155 @@
+/**
+ * @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';
+import {CompileShallowModuleMetadata, identifierName} from '../compile_metadata';
+import {InjectableCompiler} from '../injectable_compiler';
+import {mapLiteral} from '../output/map_util';
+import * as o from '../output/output_ast';
+import {OutputContext} from '../util';
+
+import {R3DependencyMetadata, compileFactoryFunction} from './r3_factory';
+import {Identifiers as R3} from './r3_identifiers';
+import {R3Reference, convertMetaToOutput, mapToMapExpression} from './util';
+
+export interface R3NgModuleDef {
+  expression: o.Expression;
+  type: o.Type;
+  additionalStatements: o.Statement[];
+}
+
+/**
+ * Metadata required by the module compiler to generate a `ngModuleDef` for a type.
+ */
+export interface R3NgModuleMetadata {
+  /**
+   * An expression representing the module type being compiled.
+   */
+  type: o.Expression;
+
+  /**
+   * An array of expressions representing the bootstrap components specified by the module.
+   */
+  bootstrap: o.Expression[];
+
+  /**
+   * An array of expressions representing the directives and pipes declared by the module.
+   */
+  declarations: R3Reference[];
+
+  /**
+   * An array of expressions representing the imports of the module.
+   */
+  imports: R3Reference[];
+
+  /**
+   * An array of expressions representing the exports of the module.
+   */
+  exports: R3Reference[];
+
+  /**
+   * Whether to emit the selector scope values (declarations, imports, exports) inline into the
+   * module definition, or to generate additional statements which patch them on. Inline emission
+   * does not allow components to be tree-shaken, but is useful for JIT mode.
+   */
+  emitInline: boolean;
+}
+
+/**
+ * Construct an `R3NgModuleDef` for the given `R3NgModuleMetadata`.
+ */
+export function compileNgModule(meta: R3NgModuleMetadata): R3NgModuleDef {
+  const {type: moduleType, bootstrap, declarations, imports, exports} = meta;
+  const expression = o.importExpr(R3.defineNgModule).callFn([mapToMapExpression({
+    type: moduleType,
+    bootstrap: o.literalArr(bootstrap),
+    declarations: o.literalArr(declarations.map(ref => ref.value)),
+    imports: o.literalArr(imports.map(ref => ref.value)),
+    exports: o.literalArr(exports.map(ref => ref.value)),
+  })]);
+
+  const type = new o.ExpressionType(o.importExpr(R3.NgModuleDef, [
+    new o.ExpressionType(moduleType), tupleTypeOf(declarations), tupleTypeOf(imports),
+    tupleTypeOf(exports)
+  ]));
+
+  const additionalStatements: o.Statement[] = [];
+  return {expression, type, additionalStatements};
+}
+
+export interface R3InjectorDef {
+  expression: o.Expression;
+  type: o.Type;
+  statements: o.Statement[];
+}
+
+export interface R3InjectorMetadata {
+  name: string;
+  type: o.Expression;
+  deps: R3DependencyMetadata[]|null;
+  providers: o.Expression;
+  imports: o.Expression;
+}
+
+export function compileInjector(meta: R3InjectorMetadata): R3InjectorDef {
+  const result = compileFactoryFunction({
+    name: meta.name,
+    type: meta.type,
+    deps: meta.deps,
+    injectFn: R3.inject,
+  });
+  const expression = o.importExpr(R3.defineInjector).callFn([mapToMapExpression({
+    factory: result.factory,
+    providers: meta.providers,
+    imports: meta.imports,
+  })]);
+  const type =
+      new o.ExpressionType(o.importExpr(R3.InjectorDef, [new o.ExpressionType(meta.type)]));
+  return {expression, type, statements: result.statements};
+}
+
+// TODO(alxhub): integrate this with `compileNgModule`. Currently the two are separate operations.
+export function compileNgModuleFromRender2(
+    ctx: OutputContext, ngModule: CompileShallowModuleMetadata,
+    injectableCompiler: InjectableCompiler): void {
+  const className = identifierName(ngModule.type) !;
+
+  const rawImports = ngModule.rawImports ? [ngModule.rawImports] : [];
+  const rawExports = ngModule.rawExports ? [ngModule.rawExports] : [];
+
+  const injectorDefArg = mapLiteral({
+    'factory':
+        injectableCompiler.factoryFor({type: ngModule.type, symbol: ngModule.type.reference}, ctx),
+    'providers': convertMetaToOutput(ngModule.rawProviders, ctx),
+    'imports': convertMetaToOutput([...rawImports, ...rawExports], ctx),
+  });
+
+  const injectorDef = o.importExpr(R3.defineInjector).callFn([injectorDefArg]);
+
+  ctx.statements.push(new o.ClassStmt(
+      /* name */ className,
+      /* parent */ null,
+      /* fields */[new o.ClassField(
+          /* name */ 'ngInjectorDef',
+          /* type */ o.INFERRED_TYPE,
+          /* modifiers */[o.StmtModifier.Static],
+          /* initializer */ injectorDef, )],
+      /* getters */[],
+      /* constructorMethod */ new o.ClassMethod(null, [], []),
+      /* methods */[]));
+}
+
+function accessExportScope(module: o.Expression): o.Expression {
+  const selectorScope = new o.ReadPropExpr(module, 'ngModuleDef');
+  return new o.ReadPropExpr(selectorScope, 'exported');
+}
+
+function tupleTypeOf(exp: R3Reference[]): o.Type {
+  const types = exp.map(ref => o.typeofExpr(ref.type));
+  return exp.length > 0 ? o.expressionType(o.literalArr(types)) : o.NONE_TYPE;
+}
\ No newline at end of file
diff --git a/packages/compiler/src/render3/r3_module_factory_compiler.ts b/packages/compiler/src/render3/r3_module_factory_compiler.ts
new file mode 100644
index 000000000000..a6e64a7455ec
--- /dev/null
+++ b/packages/compiler/src/render3/r3_module_factory_compiler.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
+ */
+
+import {CompileNgModuleMetadata, CompileTypeMetadata, identifierName} from '../compile_metadata';
+import {CompileMetadataResolver} from '../metadata_resolver';
+import * as o from '../output/output_ast';
+import {OutputContext} from '../util';
+
+import {Identifiers as R3} from './r3_identifiers';
+
+/**
+ * Write a Renderer2 compatibility module factory to the output context.
+ */
+export function compileModuleFactory(
+    outputCtx: OutputContext, module: CompileNgModuleMetadata,
+    backPatchReferenceOf: (module: CompileTypeMetadata) => o.Expression,
+    resolver: CompileMetadataResolver) {
+  const ngModuleFactoryVar = `${identifierName(module.type)}NgFactory`;
+
+  const parentInjector = 'parentInjector';
+  const createFunction = o.fn(
+      [new o.FnParam(parentInjector, o.DYNAMIC_TYPE)],
+      [new o.IfStmt(
+          o.THIS_EXPR.prop(R3.PATCH_DEPS).notIdentical(o.literal(true, o.INFERRED_TYPE)),
+          [
+            o.THIS_EXPR.prop(R3.PATCH_DEPS).set(o.literal(true, o.INFERRED_TYPE)).toStmt(),
+            backPatchReferenceOf(module.type).callFn([]).toStmt()
+          ])],
+      o.INFERRED_TYPE, null, `${ngModuleFactoryVar}_Create`);
+
+  const moduleFactoryLiteral = o.literalMap([
+    {key: 'moduleType', value: outputCtx.importExpr(module.type.reference), quoted: false},
+    {key: 'create', value: createFunction, quoted: false}
+  ]);
+
+  outputCtx.statements.push(
+      o.variable(ngModuleFactoryVar).set(moduleFactoryLiteral).toDeclStmt(o.DYNAMIC_TYPE, [
+        o.StmtModifier.Exported, o.StmtModifier.Final
+      ]));
+}
diff --git a/packages/compiler/src/render3/r3_pipe_compiler.ts b/packages/compiler/src/render3/r3_pipe_compiler.ts
new file mode 100644
index 000000000000..569b8ab6bbcb
--- /dev/null
+++ b/packages/compiler/src/render3/r3_pipe_compiler.ts
@@ -0,0 +1,95 @@
+/**
+ * @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 {CompilePipeMetadata, identifierName} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
+import {DefinitionKind} from '../constant_pool';
+import * as o from '../output/output_ast';
+import {OutputContext, error} from '../util';
+
+import {R3DependencyMetadata, compileFactoryFunction, dependenciesFromGlobalMetadata} from './r3_factory';
+import {Identifiers as R3} from './r3_identifiers';
+
+export interface R3PipeMetadata {
+  name: string;
+  type: o.Expression;
+  pipeName: string;
+  deps: R3DependencyMetadata[]|null;
+  pure: boolean;
+}
+
+export interface R3PipeDef {
+  expression: o.Expression;
+  type: o.Type;
+  statements: o.Statement[];
+}
+
+export function compilePipeFromMetadata(metadata: R3PipeMetadata) {
+  const definitionMapValues: {key: string, quoted: boolean, value: o.Expression}[] = [];
+
+  // e.g. `name: 'myPipe'`
+  definitionMapValues.push({key: 'name', value: o.literal(metadata.pipeName), quoted: false});
+
+  // e.g. `type: MyPipe`
+  definitionMapValues.push({key: 'type', value: metadata.type, quoted: false});
+
+  const templateFactory = compileFactoryFunction({
+    name: metadata.name,
+    type: metadata.type,
+    deps: metadata.deps,
+    injectFn: R3.directiveInject,
+  });
+  definitionMapValues.push({key: 'factory', value: templateFactory.factory, quoted: false});
+
+  // e.g. `pure: true`
+  definitionMapValues.push({key: 'pure', value: o.literal(metadata.pure), quoted: false});
+
+  const expression = o.importExpr(R3.definePipe).callFn([o.literalMap(definitionMapValues)]);
+  const type = new o.ExpressionType(o.importExpr(R3.PipeDef, [
+    new o.ExpressionType(metadata.type),
+    new o.ExpressionType(new o.LiteralExpr(metadata.pipeName)),
+  ]));
+  return {expression, type, statements: templateFactory.statements};
+}
+
+/**
+ * Write a pipe definition to the output context.
+ */
+export function compilePipeFromRender2(
+    outputCtx: OutputContext, pipe: CompilePipeMetadata, reflector: CompileReflector) {
+  const definitionMapValues: {key: string, quoted: boolean, value: o.Expression}[] = [];
+
+  const name = identifierName(pipe.type);
+  if (!name) {
+    return error(`Cannot resolve the name of ${pipe.type}`);
+  }
+
+  const metadata: R3PipeMetadata = {
+    name,
+    pipeName: pipe.name,
+    type: outputCtx.importExpr(pipe.type.reference),
+    deps: dependenciesFromGlobalMetadata(pipe.type, outputCtx, reflector),
+    pure: pipe.pure,
+  };
+
+  const res = compilePipeFromMetadata(metadata);
+
+  const definitionField = outputCtx.constantPool.propertyNameOf(DefinitionKind.Pipe);
+
+  outputCtx.statements.push(new o.ClassStmt(
+      /* name */ name,
+      /* parent */ null,
+      /* fields */[new o.ClassField(
+          /* name */ definitionField,
+          /* type */ o.INFERRED_TYPE,
+          /* modifiers */[o.StmtModifier.Static],
+          /* initializer */ res.expression)],
+      /* getters */[],
+      /* constructorMethod */ new o.ClassMethod(null, [], []),
+      /* methods */[]));
+}
diff --git a/packages/compiler/src/render3/r3_template_transform.ts b/packages/compiler/src/render3/r3_template_transform.ts
new file mode 100644
index 000000000000..22c31d8bcb4c
--- /dev/null
+++ b/packages/compiler/src/render3/r3_template_transform.ts
@@ -0,0 +1,384 @@
+/**
+ * @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 {ParsedEvent, ParsedProperty, ParsedVariable} from '../expression_parser/ast';
+import * as html from '../ml_parser/ast';
+import {replaceNgsp} from '../ml_parser/html_whitespaces';
+import {isNgTemplate} from '../ml_parser/tags';
+import {ParseError, ParseErrorLevel, ParseSourceSpan} from '../parse_util';
+import {isStyleUrlResolvable} from '../style_url_resolver';
+import {BindingParser} from '../template_parser/binding_parser';
+import {PreparsedElementType, preparseElement} from '../template_parser/template_preparser';
+import {syntaxError} from '../util';
+
+import * as t from './r3_ast';
+
+
+const BIND_NAME_REGEXP =
+    /^(?:(?:(?:(bind-)|(let-)|(ref-|#)|(on-)|(bindon-)|(@))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/;
+
+// Group 1 = "bind-"
+const KW_BIND_IDX = 1;
+// Group 2 = "let-"
+const KW_LET_IDX = 2;
+// Group 3 = "ref-/#"
+const KW_REF_IDX = 3;
+// Group 4 = "on-"
+const KW_ON_IDX = 4;
+// Group 5 = "bindon-"
+const KW_BINDON_IDX = 5;
+// Group 6 = "@"
+const KW_AT_IDX = 6;
+// Group 7 = the identifier after "bind-", "let-", "ref-/#", "on-", "bindon-" or "@"
+const IDENT_KW_IDX = 7;
+// Group 8 = identifier inside [()]
+const IDENT_BANANA_BOX_IDX = 8;
+// Group 9 = identifier inside []
+const IDENT_PROPERTY_IDX = 9;
+// Group 10 = identifier inside ()
+const IDENT_EVENT_IDX = 10;
+
+const TEMPLATE_ATTR_PREFIX = '*';
+// Default selector used by `<ng-content>` if none specified
+const DEFAULT_CONTENT_SELECTOR = '*';
+
+// Result of the html AST to Ivy AST transformation
+export type Render3ParseResult = {
+  nodes: t.Node[]; errors: ParseError[];
+  // Any non default (empty or '*') selector found in the template
+  ngContentSelectors: string[];
+  // Wether the template contains any `<ng-content>`
+  hasNgContent: boolean;
+};
+
+export function htmlAstToRender3Ast(
+    htmlNodes: html.Node[], bindingParser: BindingParser): Render3ParseResult {
+  const transformer = new HtmlAstToIvyAst(bindingParser);
+  const ivyNodes = html.visitAll(transformer, htmlNodes);
+
+  // Errors might originate in either the binding parser or the html to ivy transformer
+  const allErrors = bindingParser.errors.concat(transformer.errors);
+  const errors: ParseError[] = allErrors.filter(e => e.level === ParseErrorLevel.ERROR);
+
+  if (errors.length > 0) {
+    const errorString = errors.join('\n');
+    throw syntaxError(`Template parse errors:\n${errorString}`, errors);
+  }
+
+  return {
+    nodes: ivyNodes,
+    errors: allErrors,
+    ngContentSelectors: transformer.ngContentSelectors,
+    hasNgContent: transformer.hasNgContent,
+  };
+}
+
+class HtmlAstToIvyAst implements html.Visitor {
+  errors: ParseError[] = [];
+  // Selectors for the `ng-content` tags. Only non `*` selectors are recorded here
+  ngContentSelectors: string[] = [];
+  // Any `<ng-content>` in the template ?
+  hasNgContent = false;
+
+  constructor(private bindingParser: BindingParser) {}
+
+  // HTML visitor
+  visitElement(element: html.Element): t.Node|null {
+    const preparsedElement = preparseElement(element);
+    if (preparsedElement.type === PreparsedElementType.SCRIPT ||
+        preparsedElement.type === PreparsedElementType.STYLE) {
+      // Skipping <script> for security reasons
+      // Skipping <style> as we already processed them
+      // in the StyleCompiler
+      return null;
+    }
+    if (preparsedElement.type === PreparsedElementType.STYLESHEET &&
+        isStyleUrlResolvable(preparsedElement.hrefAttr)) {
+      // Skipping stylesheets with either relative urls or package scheme as we already processed
+      // them in the StyleCompiler
+      return null;
+    }
+
+    // Whether the element is a `<ng-template>`
+    const isTemplateElement = isNgTemplate(element.name);
+
+    const parsedProperties: ParsedProperty[] = [];
+    const boundEvents: t.BoundEvent[] = [];
+    const variables: t.Variable[] = [];
+    const references: t.Reference[] = [];
+    const attributes: t.TextAttribute[] = [];
+
+    const templateParsedProperties: ParsedProperty[] = [];
+    const templateVariables: t.Variable[] = [];
+
+    // Whether the element has any *-attribute
+    let elementHasInlineTemplate = false;
+
+    for (const attribute of element.attrs) {
+      let hasBinding = false;
+      const normalizedName = normalizeAttributeName(attribute.name);
+
+      // `*attr` defines template bindings
+      let isTemplateBinding = false;
+
+      if (normalizedName.startsWith(TEMPLATE_ATTR_PREFIX)) {
+        // *-attributes
+        if (elementHasInlineTemplate) {
+          this.reportError(
+              `Can't have multiple template bindings on one element. Use only one attribute prefixed with *`,
+              attribute.sourceSpan);
+        }
+        isTemplateBinding = true;
+        elementHasInlineTemplate = true;
+        const templateValue = attribute.value;
+        const templateKey = normalizedName.substring(TEMPLATE_ATTR_PREFIX.length);
+
+        const parsedVariables: ParsedVariable[] = [];
+        this.bindingParser.parseInlineTemplateBinding(
+            templateKey, templateValue, attribute.sourceSpan, [], templateParsedProperties,
+            parsedVariables);
+        templateVariables.push(
+            ...parsedVariables.map(v => new t.Variable(v.name, v.value, v.sourceSpan)));
+      } else {
+        // Check for variables, events, property bindings, interpolation
+        hasBinding = this.parseAttribute(
+            isTemplateElement, attribute, [], parsedProperties, boundEvents, variables, references);
+      }
+
+      if (!hasBinding && !isTemplateBinding) {
+        // don't include the bindings as attributes as well in the AST
+        attributes.push(this.visitAttribute(attribute) as t.TextAttribute);
+      }
+    }
+
+    const children: t.Node[] =
+        html.visitAll(preparsedElement.nonBindable ? NON_BINDABLE_VISITOR : this, element.children);
+
+    let parsedElement: t.Node|undefined;
+    if (preparsedElement.type === PreparsedElementType.NG_CONTENT) {
+      // `<ng-content>`
+      this.hasNgContent = true;
+
+      if (element.children && !element.children.every(isEmptyTextNode)) {
+        this.reportError(`<ng-content> element cannot have content.`, element.sourceSpan);
+      }
+
+      const selector = preparsedElement.selectAttr;
+
+      let attributes: t.TextAttribute[] =
+          element.attrs.map(attribute => this.visitAttribute(attribute));
+
+      const selectorIndex =
+          selector === DEFAULT_CONTENT_SELECTOR ? 0 : this.ngContentSelectors.push(selector);
+      parsedElement = new t.Content(selectorIndex, attributes, element.sourceSpan);
+    } else if (isTemplateElement) {
+      // `<ng-template>`
+      const attrs = this.extractAttributes(element.name, parsedProperties);
+
+      parsedElement = new t.Template(
+          attributes, attrs.bound, children, references, variables, element.sourceSpan,
+          element.startSourceSpan, element.endSourceSpan);
+    } else {
+      const attrs = this.extractAttributes(element.name, parsedProperties);
+
+      parsedElement = new t.Element(
+          element.name, attributes, attrs.bound, boundEvents, children, references,
+          element.sourceSpan, element.startSourceSpan, element.endSourceSpan);
+    }
+
+    if (elementHasInlineTemplate) {
+      const attrs = this.extractAttributes('ng-template', templateParsedProperties);
+      parsedElement = new t.Template(
+          attrs.literal, attrs.bound, [parsedElement], [], templateVariables, element.sourceSpan,
+          element.startSourceSpan, element.endSourceSpan);
+    }
+    return parsedElement;
+  }
+
+  visitAttribute(attribute: html.Attribute): t.TextAttribute {
+    return new t.TextAttribute(
+        attribute.name, attribute.value, attribute.sourceSpan, attribute.valueSpan);
+  }
+
+  visitText(text: html.Text): t.Node {
+    const valueNoNgsp = replaceNgsp(text.value);
+    const expr = this.bindingParser.parseInterpolation(valueNoNgsp, text.sourceSpan);
+    return expr ? new t.BoundText(expr, text.sourceSpan) : new t.Text(valueNoNgsp, text.sourceSpan);
+  }
+
+  visitComment(comment: html.Comment): null { return null; }
+
+  visitExpansion(expansion: html.Expansion): null { return null; }
+
+  visitExpansionCase(expansionCase: html.ExpansionCase): null { return null; }
+
+  // convert view engine `ParsedProperty` to a format suitable for IVY
+  private extractAttributes(elementName: string, properties: ParsedProperty[]):
+      {bound: t.BoundAttribute[], literal: t.TextAttribute[]} {
+    const bound: t.BoundAttribute[] = [];
+    const literal: t.TextAttribute[] = [];
+
+    properties.forEach(prop => {
+      if (prop.isLiteral) {
+        literal.push(new t.TextAttribute(prop.name, prop.expression.source || '', prop.sourceSpan));
+      } else {
+        const bep = this.bindingParser.createBoundElementProperty(elementName, prop);
+        bound.push(t.BoundAttribute.fromBoundElementProperty(bep));
+      }
+    });
+
+    return {bound, literal};
+  }
+
+  private parseAttribute(
+      isTemplateElement: boolean, attribute: html.Attribute, matchableAttributes: string[][],
+      parsedProperties: ParsedProperty[], boundEvents: t.BoundEvent[], variables: t.Variable[],
+      references: t.Reference[]) {
+    const name = normalizeAttributeName(attribute.name);
+    const value = attribute.value;
+    const srcSpan = attribute.sourceSpan;
+
+    const bindParts = name.match(BIND_NAME_REGEXP);
+    let hasBinding = false;
+
+    if (bindParts) {
+      hasBinding = true;
+      if (bindParts[KW_BIND_IDX] != null) {
+        this.bindingParser.parsePropertyBinding(
+            bindParts[IDENT_KW_IDX], value, false, srcSpan, matchableAttributes, parsedProperties);
+
+      } else if (bindParts[KW_LET_IDX]) {
+        if (isTemplateElement) {
+          const identifier = bindParts[IDENT_KW_IDX];
+          this.parseVariable(identifier, value, srcSpan, variables);
+        } else {
+          this.reportError(`"let-" is only supported on ng-template elements.`, srcSpan);
+        }
+
+      } else if (bindParts[KW_REF_IDX]) {
+        const identifier = bindParts[IDENT_KW_IDX];
+        this.parseReference(identifier, value, srcSpan, references);
+
+      } else if (bindParts[KW_ON_IDX]) {
+        const events: ParsedEvent[] = [];
+        this.bindingParser.parseEvent(
+            bindParts[IDENT_KW_IDX], value, srcSpan, matchableAttributes, events);
+        addEvents(events, boundEvents);
+      } else if (bindParts[KW_BINDON_IDX]) {
+        this.bindingParser.parsePropertyBinding(
+            bindParts[IDENT_KW_IDX], value, false, srcSpan, matchableAttributes, parsedProperties);
+        this.parseAssignmentEvent(
+            bindParts[IDENT_KW_IDX], value, srcSpan, matchableAttributes, boundEvents);
+      } else if (bindParts[KW_AT_IDX]) {
+        this.bindingParser.parseLiteralAttr(
+            name, value, srcSpan, matchableAttributes, parsedProperties);
+
+      } else if (bindParts[IDENT_BANANA_BOX_IDX]) {
+        this.bindingParser.parsePropertyBinding(
+            bindParts[IDENT_BANANA_BOX_IDX], value, false, srcSpan, matchableAttributes,
+            parsedProperties);
+        this.parseAssignmentEvent(
+            bindParts[IDENT_BANANA_BOX_IDX], value, srcSpan, matchableAttributes, boundEvents);
+
+      } else if (bindParts[IDENT_PROPERTY_IDX]) {
+        this.bindingParser.parsePropertyBinding(
+            bindParts[IDENT_PROPERTY_IDX], value, false, srcSpan, matchableAttributes,
+            parsedProperties);
+
+      } else if (bindParts[IDENT_EVENT_IDX]) {
+        const events: ParsedEvent[] = [];
+        this.bindingParser.parseEvent(
+            bindParts[IDENT_EVENT_IDX], value, srcSpan, matchableAttributes, events);
+        addEvents(events, boundEvents);
+      }
+    } else {
+      hasBinding = this.bindingParser.parsePropertyInterpolation(
+          name, value, srcSpan, matchableAttributes, parsedProperties);
+    }
+
+    return hasBinding;
+  }
+
+  private parseVariable(
+      identifier: string, value: string, sourceSpan: ParseSourceSpan, variables: t.Variable[]) {
+    if (identifier.indexOf('-') > -1) {
+      this.reportError(`"-" is not allowed in variable names`, sourceSpan);
+    }
+    variables.push(new t.Variable(identifier, value, sourceSpan));
+  }
+
+  private parseReference(
+      identifier: string, value: string, sourceSpan: ParseSourceSpan, references: t.Reference[]) {
+    if (identifier.indexOf('-') > -1) {
+      this.reportError(`"-" is not allowed in reference names`, sourceSpan);
+    }
+
+    references.push(new t.Reference(identifier, value, sourceSpan));
+  }
+
+  private parseAssignmentEvent(
+      name: string, expression: string, sourceSpan: ParseSourceSpan,
+      targetMatchableAttrs: string[][], boundEvents: t.BoundEvent[]) {
+    const events: ParsedEvent[] = [];
+    this.bindingParser.parseEvent(
+        `${name}Change`, `${expression}=$event`, sourceSpan, targetMatchableAttrs, events);
+    addEvents(events, boundEvents);
+  }
+
+  private reportError(
+      message: string, sourceSpan: ParseSourceSpan,
+      level: ParseErrorLevel = ParseErrorLevel.ERROR) {
+    this.errors.push(new ParseError(sourceSpan, message, level));
+  }
+}
+
+class NonBindableVisitor implements html.Visitor {
+  visitElement(ast: html.Element): t.Element|null {
+    const preparsedElement = preparseElement(ast);
+    if (preparsedElement.type === PreparsedElementType.SCRIPT ||
+        preparsedElement.type === PreparsedElementType.STYLE ||
+        preparsedElement.type === PreparsedElementType.STYLESHEET) {
+      // Skipping <script> for security reasons
+      // Skipping <style> and stylesheets as we already processed them
+      // in the StyleCompiler
+      return null;
+    }
+
+    const children: t.Node[] = html.visitAll(this, ast.children, null);
+    return new t.Element(
+        ast.name, html.visitAll(this, ast.attrs) as t.TextAttribute[],
+        /* inputs */[], /* outputs */[], children,  /* references */[], ast.sourceSpan,
+        ast.startSourceSpan, ast.endSourceSpan);
+  }
+
+  visitComment(comment: html.Comment): any { return null; }
+
+  visitAttribute(attribute: html.Attribute): t.TextAttribute {
+    return new t.TextAttribute(attribute.name, attribute.value, attribute.sourceSpan);
+  }
+
+  visitText(text: html.Text): t.Text { return new t.Text(text.value, text.sourceSpan); }
+
+  visitExpansion(expansion: html.Expansion): any { return null; }
+
+  visitExpansionCase(expansionCase: html.ExpansionCase): any { return null; }
+}
+
+const NON_BINDABLE_VISITOR = new NonBindableVisitor();
+
+function normalizeAttributeName(attrName: string): string {
+  return /^data-/i.test(attrName) ? attrName.substring(5) : attrName;
+}
+
+function addEvents(events: ParsedEvent[], boundEvents: t.BoundEvent[]) {
+  boundEvents.push(...events.map(e => t.BoundEvent.fromParsedEvent(e)));
+}
+
+function isEmptyTextNode(node: html.Node): boolean {
+  return node instanceof html.Text && node.value.trim().length == 0;
+}
diff --git a/packages/compiler/src/render3/r3_types.ts b/packages/compiler/src/render3/r3_types.ts
new file mode 100644
index 000000000000..1111f902d4fb
--- /dev/null
+++ b/packages/compiler/src/render3/r3_types.ts
@@ -0,0 +1,17 @@
+/**
+ * @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
+ */
+
+/**
+ * Comment to insert above back-patch
+ */
+export const BUILD_OPTIMIZER_COLOCATE = '@__BUILD_OPTIMIZER_COLOCATE__';
+
+/**
+ * Comment to mark removable expressions
+ */
+export const BUILD_OPTIMIZER_REMOVE = '@__BUILD_OPTIMIZER_REMOVE__';
diff --git a/packages/compiler/src/render3/util.ts b/packages/compiler/src/render3/util.ts
new file mode 100644
index 000000000000..c006c298f531
--- /dev/null
+++ b/packages/compiler/src/render3/util.ts
@@ -0,0 +1,54 @@
+/**
+ * @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';
+import * as o from '../output/output_ast';
+import {OutputContext} from '../util';
+
+/**
+ * Convert an object map with `Expression` values into a `LiteralMapExpr`.
+ */
+export function mapToMapExpression(map: {[key: string]: o.Expression}): o.LiteralMapExpr {
+  const result = Object.keys(map).map(key => ({key, value: map[key], quoted: false}));
+  return o.literalMap(result);
+}
+
+/**
+ * Convert metadata into an `Expression` in the given `OutputContext`.
+ *
+ * This operation will handle arrays, references to symbols, or literal `null` or `undefined`.
+ */
+export function convertMetaToOutput(meta: any, ctx: OutputContext): o.Expression {
+  if (Array.isArray(meta)) {
+    return o.literalArr(meta.map(entry => convertMetaToOutput(entry, ctx)));
+  }
+  if (meta instanceof StaticSymbol) {
+    return ctx.importExpr(meta);
+  }
+  if (meta == null) {
+    return o.literal(meta);
+  }
+
+  throw new Error(`Internal error: Unsupported or unknown metadata: ${meta}`);
+}
+
+export function typeWithParameters(type: o.Expression, numParams: number): o.ExpressionType {
+  let params: o.Type[]|null = null;
+  if (numParams > 0) {
+    params = [];
+    for (let i = 0; i < numParams; i++) {
+      params.push(o.DYNAMIC_TYPE);
+    }
+  }
+  return o.expressionType(type, null, params);
+}
+
+export interface R3Reference {
+  value: o.Expression;
+  type: o.Expression;
+}
diff --git a/packages/compiler/src/render3/view/api.ts b/packages/compiler/src/render3/view/api.ts
new file mode 100644
index 000000000000..aca42ed37f26
--- /dev/null
+++ b/packages/compiler/src/render3/view/api.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 * as o from '../../output/output_ast';
+import {ParseSourceSpan} from '../../parse_util';
+import * as t from '../r3_ast';
+import {R3DependencyMetadata} from '../r3_factory';
+
+/**
+ * Information needed to compile a directive for the render3 runtime.
+ */
+export interface R3DirectiveMetadata {
+  /**
+   * Name of the directive type.
+   */
+  name: string;
+
+  /**
+   * An expression representing a reference to the directive itself.
+   */
+  type: o.Expression;
+
+  /**
+   * Number of generic type parameters of the type itself.
+   */
+  typeArgumentCount: number;
+
+  /**
+   * A source span for the directive type.
+   */
+  typeSourceSpan: ParseSourceSpan;
+
+  /**
+   * Dependencies of the directive's constructor.
+   */
+  deps: R3DependencyMetadata[]|null;
+
+  /**
+   * Unparsed selector of the directive, or `null` if there was no selector.
+   */
+  selector: string|null;
+
+  /**
+   * Information about the content queries made by the directive.
+   */
+  queries: R3QueryMetadata[];
+
+  /**
+   * Mappings indicating how the directive interacts with its host element (host bindings,
+   * listeners, etc).
+   */
+  host: {
+    /**
+     * A mapping of attribute binding keys to unparsed expressions.
+     */
+    attributes: {[key: string]: string};
+
+    /**
+     * A mapping of event binding keys to unparsed expressions.
+     */
+    listeners: {[key: string]: string};
+
+    /**
+     * A mapping of property binding keys to unparsed expressions.
+     */
+    properties: {[key: string]: string};
+  };
+
+  /**
+   * Information about usage of specific lifecycle events which require special treatment in the
+   * code generator.
+   */
+  lifecycle: {
+    /**
+     * Whether the directive uses NgOnChanges.
+     */
+    usesOnChanges: boolean;
+  };
+
+  /**
+   * A mapping of input field names to the property names.
+   */
+  inputs: {[field: string]: string};
+
+  /**
+   * A mapping of output field names to the property names.
+   */
+  outputs: {[field: string]: string};
+
+  /**
+   * Whether or not the component or directive inherits from another class
+   */
+  usesInheritance: boolean;
+
+  /**
+   * Reference name under which to export the directive's type in a template,
+   * if any.
+   */
+  exportAs: string|null;
+}
+
+/**
+ * Information needed to compile a component for the render3 runtime.
+ */
+export interface R3ComponentMetadata extends R3DirectiveMetadata {
+  /**
+   * Information about the component's template.
+   */
+  template: {
+    /**
+     * Parsed nodes of the template.
+     */
+    nodes: t.Node[];
+
+    /**
+     * Whether the template includes <ng-content> tags.
+     */
+    hasNgContent: boolean;
+
+    /**
+     * Selectors found in the <ng-content> tags in the template.
+     */
+    ngContentSelectors: string[];
+  };
+
+  /**
+   * Information about the view queries made by the component.
+   */
+  viewQueries: R3QueryMetadata[];
+
+  /**
+   * A map of pipe names to an expression referencing the pipe type which are in the scope of the
+   * compilation.
+   */
+  pipes: Map<string, o.Expression>;
+
+  /**
+   * A map of directive selectors to an expression referencing the directive type which are in the
+   * scope of the compilation.
+   */
+  directives: Map<string, o.Expression>;
+
+  /**
+   * Whether to wrap the 'directives' array, if one is generated, in a closure.
+   *
+   * This is done when the directives contain forward references.
+   */
+  wrapDirectivesInClosure: boolean;
+}
+
+/**
+ * Information needed to compile a query (view or content).
+ */
+export interface R3QueryMetadata {
+  /**
+   * Name of the property on the class to update with query results.
+   */
+  propertyName: string;
+
+  /**
+   * Whether to read only the first matching result, or an array of results.
+   */
+  first: boolean;
+
+  /**
+   * Either an expression representing a type for the query predicate, or a set of string selectors.
+   */
+  predicate: o.Expression|string[];
+
+  /**
+   * Whether to include only direct children or all descendants.
+   */
+  descendants: boolean;
+
+  /**
+   * An expression representing a type to read from each matched node, or null if the node itself
+   * is to be returned.
+   */
+  read: o.Expression|null;
+}
+
+/**
+ * Output of render3 directive compilation.
+ */
+export interface R3DirectiveDef {
+  expression: o.Expression;
+  type: o.Type;
+  statements: o.Statement[];
+}
+
+/**
+ * Output of render3 component compilation.
+ */
+export interface R3ComponentDef {
+  expression: o.Expression;
+  type: o.Type;
+  statements: o.Statement[];
+}
diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts
new file mode 100644
index 000000000000..950b3669642d
--- /dev/null
+++ b/packages/compiler/src/render3/view/compiler.ts
@@ -0,0 +1,621 @@
+/**
+ * @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';
+import {CompileDirectiveMetadata, CompileDirectiveSummary, CompileQueryMetadata, CompileTokenMetadata, identifierName, sanitizeIdentifier} from '../../compile_metadata';
+import {CompileReflector} from '../../compile_reflector';
+import {BindingForm, convertActionBinding, convertPropertyBinding} from '../../compiler_util/expression_converter';
+import {ConstantPool, DefinitionKind} from '../../constant_pool';
+import * as core from '../../core';
+import {LifecycleHooks} from '../../lifecycle_reflector';
+import * as o from '../../output/output_ast';
+import {typeSourceSpan} from '../../parse_util';
+import {CssSelector, SelectorMatcher} from '../../selector';
+import {BindingParser} from '../../template_parser/binding_parser';
+import {OutputContext, error} from '../../util';
+import {compileFactoryFunction, dependenciesFromGlobalMetadata} from '../r3_factory';
+import {Identifiers as R3} from '../r3_identifiers';
+import {Render3ParseResult} from '../r3_template_transform';
+import {typeWithParameters} from '../util';
+
+import {R3ComponentDef, R3ComponentMetadata, R3DirectiveDef, R3DirectiveMetadata, R3QueryMetadata} from './api';
+import {BindingScope, TemplateDefinitionBuilder, renderFlagCheckIfStmt} from './template';
+import {CONTEXT_NAME, DefinitionMap, RENDER_FLAGS, TEMPORARY_NAME, asLiteral, conditionallyCreateMapObjectLiteral, getQueryPredicate, temporaryAllocator} from './util';
+
+function baseDirectiveFields(
+    meta: R3DirectiveMetadata, constantPool: ConstantPool,
+    bindingParser: BindingParser): {definitionMap: DefinitionMap, statements: o.Statement[]} {
+  const definitionMap = new DefinitionMap();
+
+  // e.g. `type: MyDirective`
+  definitionMap.set('type', meta.type);
+
+  // e.g. `selectors: [['', 'someDir', '']]`
+  definitionMap.set('selectors', createDirectiveSelector(meta.selector !));
+
+
+  // e.g. `factory: () => new MyApp(injectElementRef())`
+  const result = compileFactoryFunction({
+    name: meta.name,
+    type: meta.type,
+    deps: meta.deps,
+    injectFn: R3.directiveInject,
+  });
+  definitionMap.set('factory', result.factory);
+
+  definitionMap.set('contentQueries', createContentQueriesFunction(meta, constantPool));
+
+  definitionMap.set('contentQueriesRefresh', createContentQueriesRefreshFunction(meta));
+
+  // e.g. `hostBindings: (dirIndex, elIndex) => { ... }
+  definitionMap.set('hostBindings', createHostBindingsFunction(meta, bindingParser));
+
+  // e.g. `attributes: ['role', 'listbox']`
+  definitionMap.set('attributes', createHostAttributesArray(meta));
+
+  // e.g 'inputs: {a: 'a'}`
+  definitionMap.set('inputs', conditionallyCreateMapObjectLiteral(meta.inputs));
+
+  // e.g 'outputs: {a: 'a'}`
+  definitionMap.set('outputs', conditionallyCreateMapObjectLiteral(meta.outputs));
+
+  // e.g. `features: [NgOnChangesFeature]`
+  const features: o.Expression[] = [];
+
+  // TODO: add `PublicFeature` so that directives get registered to the DI - make this configurable
+  features.push(o.importExpr(R3.PublicFeature));
+
+  if (meta.usesInheritance) {
+    features.push(o.importExpr(R3.InheritDefinitionFeature));
+  }
+  if (meta.lifecycle.usesOnChanges) {
+    features.push(o.importExpr(R3.NgOnChangesFeature));
+  }
+  if (features.length) {
+    definitionMap.set('features', o.literalArr(features));
+  }
+  if (meta.exportAs !== null) {
+    definitionMap.set('exportAs', o.literal(meta.exportAs));
+  }
+
+  return {definitionMap, statements: result.statements};
+}
+
+/**
+ * Compile a directive for the render3 runtime as defined by the `R3DirectiveMetadata`.
+ */
+export function compileDirectiveFromMetadata(
+    meta: R3DirectiveMetadata, constantPool: ConstantPool,
+    bindingParser: BindingParser): R3DirectiveDef {
+  const {definitionMap, statements} = baseDirectiveFields(meta, constantPool, bindingParser);
+  const expression = o.importExpr(R3.defineDirective).callFn([definitionMap.toLiteralMap()]);
+
+  // On the type side, remove newlines from the selector as it will need to fit into a TypeScript
+  // string literal, which must be on one line.
+  const selectorForType = (meta.selector || '').replace(/\n/g, '');
+
+  const type = new o.ExpressionType(o.importExpr(R3.DirectiveDef, [
+    typeWithParameters(meta.type, meta.typeArgumentCount),
+    new o.ExpressionType(o.literal(selectorForType))
+  ]));
+  return {expression, type, statements};
+}
+
+export interface R3BaseRefMetaData {
+  inputs?: {[key: string]: string | [string, string]};
+  outputs?: {[key: string]: string};
+}
+
+/**
+ * Compile a base definition for the render3 runtime as defined by {@link R3BaseRefMetadata}
+ * @param meta the metadata used for compilation.
+ */
+export function compileBaseDefFromMetadata(meta: R3BaseRefMetaData) {
+  const definitionMap = new DefinitionMap();
+  if (meta.inputs) {
+    const inputs = meta.inputs;
+    const inputsMap = Object.keys(inputs).map(key => {
+      const v = inputs[key];
+      const value = Array.isArray(v) ? o.literalArr(v.map(vx => o.literal(vx))) : o.literal(v);
+      return {key, value, quoted: false};
+    });
+    definitionMap.set('inputs', o.literalMap(inputsMap));
+  }
+  if (meta.outputs) {
+    const outputs = meta.outputs;
+    const outputsMap = Object.keys(outputs).map(key => {
+      const value = o.literal(outputs[key]);
+      return {key, value, quoted: false};
+    });
+    definitionMap.set('outputs', o.literalMap(outputsMap));
+  }
+
+  const expression = o.importExpr(R3.defineBase).callFn([definitionMap.toLiteralMap()]);
+
+  const type = new o.ExpressionType(o.importExpr(R3.BaseDef));
+
+  return {expression, type};
+}
+
+/**
+ * Compile a component for the render3 runtime as defined by the `R3ComponentMetadata`.
+ */
+export function compileComponentFromMetadata(
+    meta: R3ComponentMetadata, constantPool: ConstantPool,
+    bindingParser: BindingParser): R3ComponentDef {
+  const {definitionMap, statements} = baseDirectiveFields(meta, constantPool, bindingParser);
+
+  const selector = meta.selector && CssSelector.parse(meta.selector);
+  const firstSelector = selector && selector[0];
+
+  // e.g. `attr: ["class", ".my.app"]`
+  // This is optional an only included if the first selector of a component specifies attributes.
+  if (firstSelector) {
+    const selectorAttributes = firstSelector.getAttrs();
+    if (selectorAttributes.length) {
+      definitionMap.set(
+          'attrs', constantPool.getConstLiteral(
+                       o.literalArr(selectorAttributes.map(
+                           value => value != null ? o.literal(value) : o.literal(undefined))),
+                       /* forceShared */ true));
+    }
+  }
+
+  // Generate the CSS matcher that recognize directive
+  let directiveMatcher: SelectorMatcher|null = null;
+
+  if (meta.directives.size) {
+    const matcher = new SelectorMatcher();
+    meta.directives.forEach((expression, selector: string) => {
+      matcher.addSelectables(CssSelector.parse(selector), expression);
+    });
+    directiveMatcher = matcher;
+  }
+
+  if (meta.viewQueries.length) {
+    definitionMap.set('viewQuery', createViewQueriesFunction(meta, constantPool));
+  }
+
+  // e.g. `template: function MyComponent_Template(_ctx, _cm) {...}`
+  const templateTypeName = meta.name;
+  const templateName = templateTypeName ? `${templateTypeName}_Template` : null;
+
+  const directivesUsed = new Set<o.Expression>();
+  const pipesUsed = new Set<o.Expression>();
+
+  const template = meta.template;
+  const templateFunctionExpression =
+      new TemplateDefinitionBuilder(
+          constantPool, BindingScope.ROOT_SCOPE, 0, templateTypeName, templateName,
+          meta.viewQueries, directiveMatcher, directivesUsed, meta.pipes, pipesUsed,
+          R3.namespaceHTML)
+          .buildTemplateFunction(
+              template.nodes, [], template.hasNgContent, template.ngContentSelectors);
+
+  definitionMap.set('template', templateFunctionExpression);
+
+  // e.g. `directives: [MyDirective]`
+  if (directivesUsed.size) {
+    let directivesExpr: o.Expression = o.literalArr(Array.from(directivesUsed));
+    if (meta.wrapDirectivesInClosure) {
+      directivesExpr = o.fn([], [new o.ReturnStatement(directivesExpr)]);
+    }
+    definitionMap.set('directives', directivesExpr);
+  }
+
+  // e.g. `pipes: [MyPipe]`
+  if (pipesUsed.size) {
+    definitionMap.set('pipes', o.literalArr(Array.from(pipesUsed)));
+  }
+
+  // On the type side, remove newlines from the selector as it will need to fit into a TypeScript
+  // string literal, which must be on one line.
+  const selectorForType = (meta.selector || '').replace(/\n/g, '');
+
+  const expression = o.importExpr(R3.defineComponent).callFn([definitionMap.toLiteralMap()]);
+  const type = new o.ExpressionType(o.importExpr(R3.ComponentDef, [
+    typeWithParameters(meta.type, meta.typeArgumentCount),
+    new o.ExpressionType(o.literal(selectorForType))
+  ]));
+
+  return {expression, type, statements};
+}
+
+/**
+ * A wrapper around `compileDirective` which depends on render2 global analysis data as its input
+ * instead of the `R3DirectiveMetadata`.
+ *
+ * `R3DirectiveMetadata` is computed from `CompileDirectiveMetadata` and other statically reflected
+ * information.
+ */
+export function compileDirectiveFromRender2(
+    outputCtx: OutputContext, directive: CompileDirectiveMetadata, reflector: CompileReflector,
+    bindingParser: BindingParser) {
+  const name = identifierName(directive.type) !;
+  name || error(`Cannot resolver the name of ${directive.type}`);
+
+  const definitionField = outputCtx.constantPool.propertyNameOf(DefinitionKind.Directive);
+
+  const meta = directiveMetadataFromGlobalMetadata(directive, outputCtx, reflector);
+  const res = compileDirectiveFromMetadata(meta, outputCtx.constantPool, bindingParser);
+
+  // Create the partial class to be merged with the actual class.
+  outputCtx.statements.push(new o.ClassStmt(
+      name, null,
+      [new o.ClassField(definitionField, o.INFERRED_TYPE, [o.StmtModifier.Static], res.expression)],
+      [], new o.ClassMethod(null, [], []), []));
+}
+
+/**
+ * A wrapper around `compileComponent` which depends on render2 global analysis data as its input
+ * instead of the `R3DirectiveMetadata`.
+ *
+ * `R3ComponentMetadata` is computed from `CompileDirectiveMetadata` and other statically reflected
+ * information.
+ */
+export function compileComponentFromRender2(
+    outputCtx: OutputContext, component: CompileDirectiveMetadata, render3Ast: Render3ParseResult,
+    reflector: CompileReflector, bindingParser: BindingParser, directiveTypeBySel: Map<string, any>,
+    pipeTypeByName: Map<string, any>) {
+  const name = identifierName(component.type) !;
+  name || error(`Cannot resolver the name of ${component.type}`);
+
+  const definitionField = outputCtx.constantPool.propertyNameOf(DefinitionKind.Component);
+
+  const summary = component.toSummary();
+
+  // Compute the R3ComponentMetadata from the CompileDirectiveMetadata
+  const meta: R3ComponentMetadata = {
+    ...directiveMetadataFromGlobalMetadata(component, outputCtx, reflector),
+    selector: component.selector,
+    template: {
+      nodes: render3Ast.nodes,
+      hasNgContent: render3Ast.hasNgContent,
+      ngContentSelectors: render3Ast.ngContentSelectors,
+    },
+    directives: typeMapToExpressionMap(directiveTypeBySel, outputCtx),
+    pipes: typeMapToExpressionMap(pipeTypeByName, outputCtx),
+    viewQueries: queriesFromGlobalMetadata(component.viewQueries, outputCtx),
+    wrapDirectivesInClosure: false,
+  };
+  const res = compileComponentFromMetadata(meta, outputCtx.constantPool, bindingParser);
+
+  // Create the partial class to be merged with the actual class.
+  outputCtx.statements.push(new o.ClassStmt(
+      name, null,
+      [new o.ClassField(definitionField, o.INFERRED_TYPE, [o.StmtModifier.Static], res.expression)],
+      [], new o.ClassMethod(null, [], []), []));
+}
+
+/**
+ * Compute `R3DirectiveMetadata` given `CompileDirectiveMetadata` and a `CompileReflector`.
+ */
+function directiveMetadataFromGlobalMetadata(
+    directive: CompileDirectiveMetadata, outputCtx: OutputContext,
+    reflector: CompileReflector): R3DirectiveMetadata {
+  const summary = directive.toSummary();
+  const name = identifierName(directive.type) !;
+  name || error(`Cannot resolver the name of ${directive.type}`);
+
+  return {
+    name,
+    type: outputCtx.importExpr(directive.type.reference),
+    typeArgumentCount: 0,
+    typeSourceSpan:
+        typeSourceSpan(directive.isComponent ? 'Component' : 'Directive', directive.type),
+    selector: directive.selector,
+    deps: dependenciesFromGlobalMetadata(directive.type, outputCtx, reflector),
+    queries: queriesFromGlobalMetadata(directive.queries, outputCtx),
+    lifecycle: {
+      usesOnChanges:
+          directive.type.lifecycleHooks.some(lifecycle => lifecycle == LifecycleHooks.OnChanges),
+    },
+    host: {
+      attributes: directive.hostAttributes,
+      listeners: summary.hostListeners,
+      properties: summary.hostProperties,
+    },
+    inputs: directive.inputs,
+    outputs: directive.outputs,
+    usesInheritance: false,
+    exportAs: null,
+  };
+}
+
+/**
+ * Convert `CompileQueryMetadata` into `R3QueryMetadata`.
+ */
+function queriesFromGlobalMetadata(
+    queries: CompileQueryMetadata[], outputCtx: OutputContext): R3QueryMetadata[] {
+  return queries.map(query => {
+    let read: o.Expression|null = null;
+    if (query.read && query.read.identifier) {
+      read = outputCtx.importExpr(query.read.identifier.reference);
+    }
+    return {
+      propertyName: query.propertyName,
+      first: query.first,
+      predicate: selectorsFromGlobalMetadata(query.selectors, outputCtx),
+      descendants: query.descendants, read,
+    };
+  });
+}
+
+/**
+ * Convert `CompileTokenMetadata` for query selectors into either an expression for a predicate
+ * type, or a list of string predicates.
+ */
+function selectorsFromGlobalMetadata(
+    selectors: CompileTokenMetadata[], outputCtx: OutputContext): o.Expression|string[] {
+  if (selectors.length > 1 || (selectors.length == 1 && selectors[0].value)) {
+    const selectorStrings = selectors.map(value => value.value as string);
+    selectorStrings.some(value => !value) &&
+        error('Found a type among the string selectors expected');
+    return outputCtx.constantPool.getConstLiteral(
+        o.literalArr(selectorStrings.map(value => o.literal(value))));
+  }
+
+  if (selectors.length == 1) {
+    const first = selectors[0];
+    if (first.identifier) {
+      return outputCtx.importExpr(first.identifier.reference);
+    }
+  }
+
+  error('Unexpected query form');
+  return o.NULL_EXPR;
+}
+
+function createQueryDefinition(
+    query: R3QueryMetadata, constantPool: ConstantPool, idx: number | null): o.Expression {
+  const predicate = getQueryPredicate(query, constantPool);
+
+  // e.g. r3.Q(null, somePredicate, false) or r3.Q(0, ['div'], false)
+  const parameters = [
+    o.literal(idx, o.INFERRED_TYPE),
+    predicate,
+    o.literal(query.descendants),
+  ];
+
+  if (query.read) {
+    parameters.push(query.read);
+  }
+
+  return o.importExpr(R3.query).callFn(parameters);
+}
+
+// Turn a directive selector into an R3-compatible selector for directive def
+function createDirectiveSelector(selector: string): o.Expression {
+  return asLiteral(core.parseSelectorToR3Selector(selector));
+}
+
+function createHostAttributesArray(meta: R3DirectiveMetadata): o.Expression|null {
+  const values: o.Expression[] = [];
+  const attributes = meta.host.attributes;
+  for (let key of Object.getOwnPropertyNames(attributes)) {
+    const value = attributes[key];
+    values.push(o.literal(key), o.literal(value));
+  }
+  if (values.length > 0) {
+    return o.literalArr(values);
+  }
+  return null;
+}
+
+// Return a contentQueries function or null if one is not necessary.
+function createContentQueriesFunction(
+    meta: R3DirectiveMetadata, constantPool: ConstantPool): o.Expression|null {
+  if (meta.queries.length) {
+    const statements: o.Statement[] = meta.queries.map((query: R3QueryMetadata) => {
+      const queryDefinition = createQueryDefinition(query, constantPool, null);
+      return o.importExpr(R3.registerContentQuery).callFn([queryDefinition]).toStmt();
+    });
+    const typeName = meta.name;
+    return o.fn(
+        [], statements, o.INFERRED_TYPE, null, typeName ? `${typeName}_ContentQueries` : null);
+  }
+
+  return null;
+}
+
+// Return a contentQueriesRefresh function or null if one is not necessary.
+function createContentQueriesRefreshFunction(meta: R3DirectiveMetadata): o.Expression|null {
+  if (meta.queries.length > 0) {
+    const statements: o.Statement[] = [];
+    const typeName = meta.name;
+    const parameters = [
+      new o.FnParam('dirIndex', o.NUMBER_TYPE),
+      new o.FnParam('queryStartIndex', o.NUMBER_TYPE),
+    ];
+    const directiveInstanceVar = o.variable('instance');
+    // var $tmp$: any;
+    const temporary = temporaryAllocator(statements, TEMPORARY_NAME);
+
+    // const $instance$ = $r3$.ɵd(dirIndex);
+    statements.push(
+        directiveInstanceVar.set(o.importExpr(R3.loadDirective).callFn([o.variable('dirIndex')]))
+            .toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
+
+    meta.queries.forEach((query: R3QueryMetadata, idx: number) => {
+      const loadQLArg = o.variable('queryStartIndex');
+      const getQueryList = o.importExpr(R3.loadQueryList).callFn([
+        idx > 0 ? loadQLArg.plus(o.literal(idx)) : loadQLArg
+      ]);
+      const assignToTemporary = temporary().set(getQueryList);
+      const callQueryRefresh = o.importExpr(R3.queryRefresh).callFn([assignToTemporary]);
+
+      const updateDirective = directiveInstanceVar.prop(query.propertyName)
+                                  .set(query.first ? temporary().prop('first') : temporary());
+      const refreshQueryAndUpdateDirective = callQueryRefresh.and(updateDirective);
+
+      statements.push(refreshQueryAndUpdateDirective.toStmt());
+    });
+
+    return o.fn(
+        parameters, statements, o.INFERRED_TYPE, null,
+        typeName ? `${typeName}_ContentQueriesRefresh` : null);
+  }
+
+  return null;
+}
+
+// Define and update any view queries
+function createViewQueriesFunction(
+    meta: R3ComponentMetadata, constantPool: ConstantPool): o.Expression {
+  const createStatements: o.Statement[] = [];
+  const updateStatements: o.Statement[] = [];
+  const tempAllocator = temporaryAllocator(updateStatements, TEMPORARY_NAME);
+
+  for (let i = 0; i < meta.viewQueries.length; i++) {
+    const query = meta.viewQueries[i];
+
+    // creation, e.g. r3.Q(0, somePredicate, true);
+    const queryDefinition = createQueryDefinition(query, constantPool, i);
+    createStatements.push(queryDefinition.toStmt());
+
+    // update, e.g. (r3.qR(tmp = r3.ɵld(0)) && (ctx.someDir = tmp));
+    const temporary = tempAllocator();
+    const getQueryList = o.importExpr(R3.load).callFn([o.literal(i)]);
+    const refresh = o.importExpr(R3.queryRefresh).callFn([temporary.set(getQueryList)]);
+    const updateDirective = o.variable(CONTEXT_NAME)
+                                .prop(query.propertyName)
+                                .set(query.first ? temporary.prop('first') : temporary);
+    updateStatements.push(refresh.and(updateDirective).toStmt());
+  }
+
+  const viewQueryFnName = meta.name ? `${meta.name}_Query` : null;
+  return o.fn(
+      [new o.FnParam(RENDER_FLAGS, o.NUMBER_TYPE), new o.FnParam(CONTEXT_NAME, null)],
+      [
+        renderFlagCheckIfStmt(core.RenderFlags.Create, createStatements),
+        renderFlagCheckIfStmt(core.RenderFlags.Update, updateStatements)
+      ],
+      o.INFERRED_TYPE, null, viewQueryFnName);
+}
+
+// Return a host binding function or null if one is not necessary.
+function createHostBindingsFunction(
+    meta: R3DirectiveMetadata, bindingParser: BindingParser): o.Expression|null {
+  const statements: o.Statement[] = [];
+
+  const hostBindingSourceSpan = meta.typeSourceSpan;
+
+  const directiveSummary = metadataAsSummary(meta);
+
+  // Calculate the host property bindings
+  const bindings = bindingParser.createBoundHostProperties(directiveSummary, hostBindingSourceSpan);
+  const bindingContext = o.importExpr(R3.loadDirective).callFn([o.variable('dirIndex')]);
+  if (bindings) {
+    for (const binding of bindings) {
+      const bindingExpr = convertPropertyBinding(
+          null, bindingContext, binding.expression, 'b', BindingForm.TrySimple,
+          () => error('Unexpected interpolation'));
+      statements.push(...bindingExpr.stmts);
+      statements.push(o.importExpr(R3.elementProperty)
+                          .callFn([
+                            o.variable('elIndex'),
+                            o.literal(binding.name),
+                            o.importExpr(R3.bind).callFn([bindingExpr.currValExpr]),
+                          ])
+                          .toStmt());
+    }
+  }
+
+  // Calculate host event bindings
+  const eventBindings =
+      bindingParser.createDirectiveHostEventAsts(directiveSummary, hostBindingSourceSpan);
+  if (eventBindings) {
+    for (const binding of eventBindings) {
+      const bindingExpr = convertActionBinding(
+          null, bindingContext, binding.handler, 'b', () => error('Unexpected interpolation'));
+      const bindingName = binding.name && sanitizeIdentifier(binding.name);
+      const typeName = meta.name;
+      const functionName =
+          typeName && bindingName ? `${typeName}_${bindingName}_HostBindingHandler` : null;
+      const handler = o.fn(
+          [new o.FnParam('$event', o.DYNAMIC_TYPE)],
+          [...bindingExpr.stmts, new o.ReturnStatement(bindingExpr.allowDefault)], o.INFERRED_TYPE,
+          null, functionName);
+      statements.push(
+          o.importExpr(R3.listener).callFn([o.literal(binding.name), handler]).toStmt());
+    }
+  }
+
+  if (statements.length > 0) {
+    const typeName = meta.name;
+    return o.fn(
+        [
+          new o.FnParam('dirIndex', o.NUMBER_TYPE),
+          new o.FnParam('elIndex', o.NUMBER_TYPE),
+        ],
+        statements, o.INFERRED_TYPE, null, typeName ? `${typeName}_HostBindings` : null);
+  }
+
+  return null;
+}
+
+function metadataAsSummary(meta: R3DirectiveMetadata): CompileDirectiveSummary {
+  // clang-format off
+  return {
+    hostAttributes: meta.host.attributes,
+    hostListeners: meta.host.listeners,
+    hostProperties: meta.host.properties,
+  } as CompileDirectiveSummary;
+  // clang-format on
+}
+
+
+function typeMapToExpressionMap(
+    map: Map<string, StaticSymbol>, outputCtx: OutputContext): Map<string, o.Expression> {
+  // Convert each map entry into another entry where the value is an expression importing the type.
+  const entries = Array.from(map).map(
+      ([key, type]): [string, o.Expression] => [key, outputCtx.importExpr(type)]);
+  return new Map(entries);
+}
+
+const HOST_REG_EXP = /^(?:(?:\[([^\]]+)\])|(?:\(([^\)]+)\)))|(\@[-\w]+)$/;
+
+// Represents the groups in the above regex.
+const enum HostBindingGroup {
+  // group 1: "prop" from "[prop]"
+  Property = 1,
+
+  // group 2: "event" from "(event)"
+  Event = 2,
+
+  // group 3: "@trigger" from "@trigger"
+  Animation = 3,
+}
+
+export function parseHostBindings(host: {[key: string]: string}): {
+  attributes: {[key: string]: string},
+  listeners: {[key: string]: string},
+  properties: {[key: string]: string},
+  animations: {[key: string]: string},
+} {
+  const attributes: {[key: string]: string} = {};
+  const listeners: {[key: string]: string} = {};
+  const properties: {[key: string]: string} = {};
+  const animations: {[key: string]: string} = {};
+
+  Object.keys(host).forEach(key => {
+    const value = host[key];
+    const matches = key.match(HOST_REG_EXP);
+    if (matches === null) {
+      attributes[key] = value;
+    } else if (matches[HostBindingGroup.Property] != null) {
+      properties[matches[HostBindingGroup.Property]] = value;
+    } else if (matches[HostBindingGroup.Event] != null) {
+      listeners[matches[HostBindingGroup.Event]] = value;
+    } else if (matches[HostBindingGroup.Animation] != null) {
+      animations[matches[HostBindingGroup.Animation]] = value;
+    }
+  });
+
+  return {attributes, listeners, properties, animations};
+}
diff --git a/packages/compiler/src/render3/view/styling.ts b/packages/compiler/src/render3/view/styling.ts
new file mode 100644
index 000000000000..d9b02f4b8eee
--- /dev/null
+++ b/packages/compiler/src/render3/view/styling.ts
@@ -0,0 +1,111 @@
+/**
+ * @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 enum Char {
+  OpenParen = 40,
+  CloseParen = 41,
+  Colon = 58,
+  Semicolon = 59,
+  BackSlash = 92,
+  QuoteNone = 0,  // indicating we are not inside a quote
+  QuoteDouble = 34,
+  QuoteSingle = 39,
+}
+
+
+/**
+ * Parses string representation of a style and converts it into object literal.
+ *
+ * @param value string representation of style as used in the `style` attribute in HTML.
+ *   Example: `color: red; height: auto`.
+ * @returns an object literal. `{ color: 'red', height: 'auto'}`.
+ */
+export function parseStyle(value: string): {[key: string]: any} {
+  const styles: {[key: string]: any} = {};
+
+  let i = 0;
+  let parenDepth = 0;
+  let quote: Char = Char.QuoteNone;
+  let valueStart = 0;
+  let propStart = 0;
+  let currentProp: string|null = null;
+  let valueHasQuotes = false;
+  while (i < value.length) {
+    const token = value.charCodeAt(i++) as Char;
+    switch (token) {
+      case Char.OpenParen:
+        parenDepth++;
+        break;
+      case Char.CloseParen:
+        parenDepth--;
+        break;
+      case Char.QuoteSingle:
+        // valueStart needs to be there since prop values don't
+        // have quotes in CSS
+        valueHasQuotes = valueHasQuotes || valueStart > 0;
+        if (quote === Char.QuoteNone) {
+          quote = Char.QuoteSingle;
+        } else if (quote === Char.QuoteSingle && value.charCodeAt(i - 1) !== Char.BackSlash) {
+          quote = Char.QuoteNone;
+        }
+        break;
+      case Char.QuoteDouble:
+        // same logic as above
+        valueHasQuotes = valueHasQuotes || valueStart > 0;
+        if (quote === Char.QuoteNone) {
+          quote = Char.QuoteDouble;
+        } else if (quote === Char.QuoteDouble && value.charCodeAt(i - 1) !== Char.BackSlash) {
+          quote = Char.QuoteNone;
+        }
+        break;
+      case Char.Colon:
+        if (!currentProp && parenDepth === 0 && quote === Char.QuoteNone) {
+          currentProp = hyphenate(value.substring(propStart, i - 1).trim());
+          valueStart = i;
+        }
+        break;
+      case Char.Semicolon:
+        if (currentProp && valueStart > 0 && parenDepth === 0 && quote === Char.QuoteNone) {
+          const styleVal = value.substring(valueStart, i - 1).trim();
+          styles[currentProp] = valueHasQuotes ? stripUnnecessaryQuotes(styleVal) : styleVal;
+          propStart = i;
+          valueStart = 0;
+          currentProp = null;
+          valueHasQuotes = false;
+        }
+        break;
+    }
+  }
+
+  if (currentProp && valueStart) {
+    const styleVal = value.substr(valueStart).trim();
+    styles[currentProp] = valueHasQuotes ? stripUnnecessaryQuotes(styleVal) : styleVal;
+  }
+
+  return styles;
+}
+
+export function stripUnnecessaryQuotes(value: string): string {
+  const qS = value.charCodeAt(0);
+  const qE = value.charCodeAt(value.length - 1);
+  if (qS == qE && (qS == Char.QuoteSingle || qS == Char.QuoteDouble)) {
+    const tempValue = value.substring(1, value.length - 1);
+    // special case to avoid using a multi-quoted string that was just chomped
+    // (e.g. `font-family: "Verdana", "sans-serif"`)
+    if (tempValue.indexOf('\'') == -1 && tempValue.indexOf('"') == -1) {
+      value = tempValue;
+    }
+  }
+  return value;
+}
+
+export function hyphenate(value: string): string {
+  return value.replace(/[a-z][A-Z]/g, v => {
+                return v.charAt(0) + '-' + v.charAt(1);
+              }).toLowerCase();
+}
diff --git a/packages/compiler/src/render3/view/template.ts b/packages/compiler/src/render3/view/template.ts
new file mode 100644
index 000000000000..be1add72d9ed
--- /dev/null
+++ b/packages/compiler/src/render3/view/template.ts
@@ -0,0 +1,1312 @@
+/**
+ * @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 {flatten, sanitizeIdentifier} from '../../compile_metadata';
+import {BindingForm, BuiltinFunctionCall, LocalResolver, convertActionBinding, convertPropertyBinding} from '../../compiler_util/expression_converter';
+import {ConstantPool} from '../../constant_pool';
+import * as core from '../../core';
+import {AST, AstMemoryEfficientTransformer, BindingPipe, BindingType, FunctionCall, ImplicitReceiver, Interpolation, LiteralArray, LiteralMap, LiteralPrimitive, PropertyRead} from '../../expression_parser/ast';
+import {Lexer} from '../../expression_parser/lexer';
+import {Parser} from '../../expression_parser/parser';
+import * as html from '../../ml_parser/ast';
+import {HtmlParser} from '../../ml_parser/html_parser';
+import {WhitespaceVisitor} from '../../ml_parser/html_whitespaces';
+import {DEFAULT_INTERPOLATION_CONFIG} from '../../ml_parser/interpolation_config';
+import {isNgContainer as checkIsNgContainer, splitNsName} from '../../ml_parser/tags';
+import * as o from '../../output/output_ast';
+import {ParseError, ParseSourceSpan} from '../../parse_util';
+import {DomElementSchemaRegistry} from '../../schema/dom_element_schema_registry';
+import {CssSelector, SelectorMatcher} from '../../selector';
+import {BindingParser} from '../../template_parser/binding_parser';
+import {error} from '../../util';
+import * as t from '../r3_ast';
+import {Identifiers as R3} from '../r3_identifiers';
+import {htmlAstToRender3Ast} from '../r3_template_transform';
+
+import {R3QueryMetadata} from './api';
+import {parseStyle} from './styling';
+import {CONTEXT_NAME, I18N_ATTR, I18N_ATTR_PREFIX, ID_SEPARATOR, IMPLICIT_REFERENCE, MEANING_SEPARATOR, REFERENCE_PREFIX, RENDER_FLAGS, asLiteral, invalid, mapToExpression, trimTrailingNulls, unsupported} from './util';
+
+function mapBindingToInstruction(type: BindingType): o.ExternalReference|undefined {
+  switch (type) {
+    case BindingType.Property:
+      return R3.elementProperty;
+    case BindingType.Attribute:
+      return R3.elementAttribute;
+    case BindingType.Class:
+      return R3.elementClassProp;
+    default:
+      return undefined;
+  }
+}
+
+//  if (rf & flags) { .. }
+export function renderFlagCheckIfStmt(
+    flags: core.RenderFlags, statements: o.Statement[]): o.IfStmt {
+  return o.ifStmt(o.variable(RENDER_FLAGS).bitwiseAnd(o.literal(flags), null, false), statements);
+}
+
+export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver {
+  private _dataIndex = 0;
+  private _bindingContext = 0;
+  private _prefixCode: o.Statement[] = [];
+  /**
+   * List of callbacks to generate creation mode instructions. We store them here as we process
+   * the template so bindings in listeners are resolved only once all nodes have been visited.
+   * This ensures all local refs and context variables are available for matching.
+   */
+  private _creationCodeFns: (() => o.Statement)[] = [];
+  /**
+   * List of callbacks to generate update mode instructions. We store them here as we process
+   * the template so bindings are resolved only once all nodes have been visited. This ensures
+   * all local refs and context variables are available for matching.
+   */
+  private _updateCodeFns: (() => o.Statement)[] = [];
+  /** Temporary variable declarations generated from visiting pipes, literals, etc. */
+  private _tempVariables: o.Statement[] = [];
+  /**
+   * List of callbacks to build nested templates. Nested templates must not be visited until
+   * after the parent template has finished visiting all of its nodes. This ensures that all
+   * local ref bindings in nested templates are able to find local ref values if the refs
+   * are defined after the template declaration.
+   */
+  private _nestedTemplateFns: (() => void)[] = [];
+  /**
+   * This scope contains local variables declared in the update mode block of the template.
+   * (e.g. refs and context vars in bindings)
+   */
+  private _bindingScope: BindingScope;
+  private _valueConverter: ValueConverter;
+  private _unsupported = unsupported;
+
+  // Whether we are inside a translatable element (`<p i18n>... somewhere here ... </p>)
+  private _inI18nSection: boolean = false;
+  private _i18nSectionIndex = -1;
+  // Maps of placeholder to node indexes for each of the i18n section
+  private _phToNodeIdxes: {[phName: string]: number[]}[] = [{}];
+
+  // Number of slots to reserve for pureFunctions
+  private _pureFunctionSlots = 0;
+
+  constructor(
+      private constantPool: ConstantPool, parentBindingScope: BindingScope, private level = 0,
+      private contextName: string|null, private templateName: string|null,
+      private viewQueries: R3QueryMetadata[], private directiveMatcher: SelectorMatcher|null,
+      private directives: Set<o.Expression>, private pipeTypeByName: Map<string, o.Expression>,
+      private pipes: Set<o.Expression>, private _namespace: o.ExternalReference) {
+    // view queries can take up space in data and allocation happens earlier (in the "viewQuery"
+    // function)
+    this._dataIndex = viewQueries.length;
+
+    this._bindingScope = parentBindingScope.nestedScope(level);
+
+    this._valueConverter = new ValueConverter(
+        constantPool, () => this.allocateDataSlot(),
+        (numSlots: number): number => this._pureFunctionSlots += numSlots,
+        (name, localName, slot, value: o.ReadVarExpr) => {
+          const pipeType = pipeTypeByName.get(name);
+          if (pipeType) {
+            this.pipes.add(pipeType);
+          }
+          this._bindingScope.set(this.level, localName, value);
+          this.creationInstruction(null, R3.pipe, [o.literal(slot), o.literal(name)]);
+        });
+  }
+
+  registerContextVariables(variable: t.Variable) {
+    const scopedName = this._bindingScope.freshReferenceName();
+    const retrievalLevel = this.level;
+    const lhs = o.variable(variable.name + scopedName);
+    this._bindingScope.set(
+        retrievalLevel, variable.name, lhs, DeclarationPriority.CONTEXT,
+        (scope: BindingScope, relativeLevel: number) => {
+          let rhs: o.Expression;
+          if (scope.bindingLevel === retrievalLevel) {
+            // e.g. ctx
+            rhs = o.variable(CONTEXT_NAME);
+          } else {
+            const sharedCtxVar = scope.getSharedContextName(retrievalLevel);
+            // e.g. ctx_r0   OR  x(2);
+            rhs = sharedCtxVar ? sharedCtxVar : generateNextContextExpr(relativeLevel);
+          }
+          // e.g. const $item$ = x(2).$implicit;
+          return [lhs.set(rhs.prop(variable.value || IMPLICIT_REFERENCE)).toConstDecl()];
+        });
+  }
+
+  buildTemplateFunction(
+      nodes: t.Node[], variables: t.Variable[], hasNgContent: boolean = false,
+      ngContentSelectors: string[] = []): o.FunctionExpr {
+    if (this._namespace !== R3.namespaceHTML) {
+      this.creationInstruction(null, this._namespace);
+    }
+
+    // Create variable bindings
+    variables.forEach(v => this.registerContextVariables(v));
+
+    // Output a `ProjectionDef` instruction when some `<ng-content>` are present
+    if (hasNgContent) {
+      const parameters: o.Expression[] = [];
+
+      // Only selectors with a non-default value are generated
+      if (ngContentSelectors.length > 1) {
+        const r3Selectors = ngContentSelectors.map(s => core.parseSelectorToR3Selector(s));
+        // `projectionDef` needs both the parsed and raw value of the selectors
+        const parsed = this.constantPool.getConstLiteral(asLiteral(r3Selectors), true);
+        const unParsed = this.constantPool.getConstLiteral(asLiteral(ngContentSelectors), true);
+        parameters.push(parsed, unParsed);
+      }
+
+      this.creationInstruction(null, R3.projectionDef, parameters);
+    }
+
+    // This is the initial pass through the nodes of this template. In this pass, we
+    // queue all creation mode and update mode instructions for generation in the second
+    // pass. It's necessary to separate the passes to ensure local refs are defined before
+    // resolving bindings.
+    t.visitAll(this, nodes);
+
+    // Generate all the creation mode instructions (e.g. resolve bindings in listeners)
+    const creationStatements = this._creationCodeFns.map((fn: () => o.Statement) => fn());
+
+    // Generate all the update mode instructions (e.g. resolve property or text bindings)
+    const updateStatements = this._updateCodeFns.map((fn: () => o.Statement) => fn());
+
+    // To count slots for the reserveSlots() instruction, all bindings must have been visited.
+    if (this._pureFunctionSlots > 0) {
+      creationStatements.push(
+          instruction(null, R3.reserveSlots, [o.literal(this._pureFunctionSlots)]).toStmt());
+    }
+
+    //  Variable declaration must occur after binding resolution so we can generate context
+    //  instructions that build on each other. e.g. const b = x().$implicit(); const b = x();
+    const creationVariables = this._bindingScope.viewSnapshotStatements();
+    const updateVariables = this._bindingScope.variableDeclarations().concat(this._tempVariables);
+
+    const creationBlock = creationStatements.length > 0 ?
+        [renderFlagCheckIfStmt(
+            core.RenderFlags.Create, creationVariables.concat(creationStatements))] :
+        [];
+
+    const updateBlock = updateStatements.length > 0 ?
+        [renderFlagCheckIfStmt(core.RenderFlags.Update, updateVariables.concat(updateStatements))] :
+        [];
+
+    // Generate maps of placeholder name to node indexes
+    // TODO(vicb): This is a WIP, not fully supported yet
+    for (const phToNodeIdx of this._phToNodeIdxes) {
+      if (Object.keys(phToNodeIdx).length > 0) {
+        const scopedName = this._bindingScope.freshReferenceName();
+        const phMap = o.variable(scopedName).set(mapToExpression(phToNodeIdx, true)).toConstDecl();
+
+        this._prefixCode.push(phMap);
+      }
+    }
+
+    this._nestedTemplateFns.forEach(buildTemplateFn => buildTemplateFn());
+
+    return o.fn(
+        // i.e. (rf: RenderFlags, ctx: any)
+        [new o.FnParam(RENDER_FLAGS, o.NUMBER_TYPE), new o.FnParam(CONTEXT_NAME, null)],
+        [
+          // Temporary variable declarations for query refresh (i.e. let _t: any;)
+          ...this._prefixCode,
+          // Creating mode (i.e. if (rf & RenderFlags.Create) { ... })
+          ...creationBlock,
+          // Binding and refresh mode (i.e. if (rf & RenderFlags.Update) {...})
+          ...updateBlock,
+        ],
+        o.INFERRED_TYPE, null, this.templateName);
+  }
+
+  // LocalResolver
+  getLocal(name: string): o.Expression|null { return this._bindingScope.get(name); }
+
+  visitContent(ngContent: t.Content) {
+    const slot = this.allocateDataSlot();
+    const selectorIndex = ngContent.selectorIndex;
+    const parameters: o.Expression[] = [o.literal(slot)];
+
+    const attributeAsList: string[] = [];
+
+    ngContent.attributes.forEach((attribute) => {
+      const name = attribute.name;
+      if (name !== 'select') {
+        attributeAsList.push(name, attribute.value);
+      }
+    });
+
+    if (attributeAsList.length > 0) {
+      parameters.push(o.literal(selectorIndex), asLiteral(attributeAsList));
+    } else if (selectorIndex !== 0) {
+      parameters.push(o.literal(selectorIndex));
+    }
+
+    this.creationInstruction(ngContent.sourceSpan, R3.projection, parameters);
+  }
+
+
+  getNamespaceInstruction(namespaceKey: string|null) {
+    switch (namespaceKey) {
+      case 'math':
+        return R3.namespaceMathML;
+      case 'svg':
+        return R3.namespaceSVG;
+      default:
+        return R3.namespaceHTML;
+    }
+  }
+
+  addNamespaceInstruction(nsInstruction: o.ExternalReference, element: t.Element) {
+    this._namespace = nsInstruction;
+    this.creationInstruction(element.sourceSpan, nsInstruction);
+  }
+
+  visitElement(element: t.Element) {
+    const elementIndex = this.allocateDataSlot();
+    const wasInI18nSection = this._inI18nSection;
+
+    const outputAttrs: {[name: string]: string} = {};
+    const attrI18nMetas: {[name: string]: string} = {};
+    let i18nMeta: string = '';
+
+    const [namespaceKey, elementName] = splitNsName(element.name);
+    const isNgContainer = checkIsNgContainer(element.name);
+
+    // Elements inside i18n sections are replaced with placeholders
+    // TODO(vicb): nested elements are a WIP in this phase
+    if (this._inI18nSection) {
+      const phName = element.name.toLowerCase();
+      if (!this._phToNodeIdxes[this._i18nSectionIndex][phName]) {
+        this._phToNodeIdxes[this._i18nSectionIndex][phName] = [];
+      }
+      this._phToNodeIdxes[this._i18nSectionIndex][phName].push(elementIndex);
+    }
+
+    // Handle i18n attributes
+    for (const attr of element.attributes) {
+      const name = attr.name;
+      const value = attr.value;
+      if (name === I18N_ATTR) {
+        if (this._inI18nSection) {
+          throw new Error(
+              `Could not mark an element as translatable inside of a translatable section`);
+        }
+        this._inI18nSection = true;
+        this._i18nSectionIndex++;
+        this._phToNodeIdxes[this._i18nSectionIndex] = {};
+        i18nMeta = value;
+      } else if (name.startsWith(I18N_ATTR_PREFIX)) {
+        attrI18nMetas[name.slice(I18N_ATTR_PREFIX.length)] = value;
+      } else {
+        outputAttrs[name] = value;
+      }
+    }
+
+    // Match directives on non i18n attributes
+    if (this.directiveMatcher) {
+      const selector = createCssSelector(element.name, outputAttrs);
+      this.directiveMatcher.match(
+          selector, (sel: CssSelector, staticType: any) => { this.directives.add(staticType); });
+    }
+
+    // Regular element or ng-container creation mode
+    const parameters: o.Expression[] = [o.literal(elementIndex)];
+    if (!isNgContainer) {
+      parameters.push(o.literal(elementName));
+    }
+
+    // Add the attributes
+    const attributes: o.Expression[] = [];
+    const initialStyleDeclarations: o.Expression[] = [];
+    const initialClassDeclarations: o.Expression[] = [];
+
+    const styleInputs: t.BoundAttribute[] = [];
+    const classInputs: t.BoundAttribute[] = [];
+    const allOtherInputs: t.BoundAttribute[] = [];
+
+    element.inputs.forEach((input: t.BoundAttribute) => {
+      switch (input.type) {
+        // [attr.style] or [attr.class] should not be treated as styling-based
+        // bindings since they are intended to be written directly to the attr
+        // and therefore will skip all style/class resolution that is present
+        // with style="", [style]="" and [style.prop]="", class="",
+        // [class.prop]="". [class]="" assignments
+        case BindingType.Property:
+          if (input.name == 'style') {
+            // this should always go first in the compilation (for [style])
+            styleInputs.splice(0, 0, input);
+          } else if (isClassBinding(input)) {
+            // this should always go first in the compilation (for [class])
+            classInputs.splice(0, 0, input);
+          } else {
+            allOtherInputs.push(input);
+          }
+          break;
+        case BindingType.Style:
+          styleInputs.push(input);
+          break;
+        case BindingType.Class:
+          classInputs.push(input);
+          break;
+        default:
+          allOtherInputs.push(input);
+          break;
+      }
+    });
+
+    let currStyleIndex = 0;
+    let currClassIndex = 0;
+    let staticStylesMap: {[key: string]: any}|null = null;
+    let staticClassesMap: {[key: string]: boolean}|null = null;
+    const stylesIndexMap: {[key: string]: number} = {};
+    const classesIndexMap: {[key: string]: number} = {};
+    Object.getOwnPropertyNames(outputAttrs).forEach(name => {
+      const value = outputAttrs[name];
+      if (name == 'style') {
+        staticStylesMap = parseStyle(value);
+        Object.keys(staticStylesMap).forEach(prop => { stylesIndexMap[prop] = currStyleIndex++; });
+      } else if (name == 'class') {
+        staticClassesMap = {};
+        value.split(/\s+/g).forEach(className => {
+          classesIndexMap[className] = currClassIndex++;
+          staticClassesMap ![className] = true;
+        });
+      } else {
+        attributes.push(o.literal(name));
+        if (attrI18nMetas.hasOwnProperty(name)) {
+          const meta = parseI18nMeta(attrI18nMetas[name]);
+          const variable = this.constantPool.getTranslation(value, meta);
+          attributes.push(variable);
+        } else {
+          attributes.push(o.literal(value));
+        }
+      }
+    });
+
+    let hasMapBasedStyling = false;
+    for (let i = 0; i < styleInputs.length; i++) {
+      const input = styleInputs[i];
+      const isMapBasedStyleBinding = i === 0 && input.name === 'style';
+      if (isMapBasedStyleBinding) {
+        hasMapBasedStyling = true;
+      } else if (!stylesIndexMap.hasOwnProperty(input.name)) {
+        stylesIndexMap[input.name] = currStyleIndex++;
+      }
+    }
+
+    for (let i = 0; i < classInputs.length; i++) {
+      const input = classInputs[i];
+      const isMapBasedClassBinding = i === 0 && isClassBinding(input);
+      if (!isMapBasedClassBinding && !stylesIndexMap.hasOwnProperty(input.name)) {
+        classesIndexMap[input.name] = currClassIndex++;
+      }
+    }
+
+    // in the event that a [style] binding is used then sanitization will
+    // always be imported because it is not possible to know ahead of time
+    // whether style bindings will use or not use any sanitizable properties
+    // that isStyleSanitizable() will detect
+    let useDefaultStyleSanitizer = hasMapBasedStyling;
+
+    // this will build the instructions so that they fall into the following syntax
+    // => [prop1, prop2, prop3, 0, prop1, value1, prop2, value2]
+    Object.keys(stylesIndexMap).forEach(prop => {
+      useDefaultStyleSanitizer = useDefaultStyleSanitizer || isStyleSanitizable(prop);
+      initialStyleDeclarations.push(o.literal(prop));
+    });
+
+    if (staticStylesMap) {
+      initialStyleDeclarations.push(o.literal(core.InitialStylingFlags.VALUES_MODE));
+
+      Object.keys(staticStylesMap).forEach(prop => {
+        initialStyleDeclarations.push(o.literal(prop));
+        const value = staticStylesMap ![prop];
+        initialStyleDeclarations.push(o.literal(value));
+      });
+    }
+
+    Object.keys(classesIndexMap).forEach(prop => {
+      initialClassDeclarations.push(o.literal(prop));
+    });
+
+    if (staticClassesMap) {
+      initialClassDeclarations.push(o.literal(core.InitialStylingFlags.VALUES_MODE));
+
+      Object.keys(staticClassesMap).forEach(className => {
+        initialClassDeclarations.push(o.literal(className));
+        initialClassDeclarations.push(o.literal(true));
+      });
+    }
+
+    const hasStylingInstructions = initialStyleDeclarations.length || styleInputs.length ||
+        initialClassDeclarations.length || classInputs.length;
+
+    const attrArg: o.Expression = attributes.length > 0 ?
+        this.constantPool.getConstLiteral(o.literalArr(attributes), true) :
+        o.TYPED_NULL_EXPR;
+    parameters.push(attrArg);
+
+    if (element.references && element.references.length > 0) {
+      const references = flatten(element.references.map(reference => {
+        const slot = this.allocateDataSlot();
+        // Generate the update temporary.
+        const variableName = this._bindingScope.freshReferenceName();
+        const retrievalLevel = this.level;
+        const lhs = o.variable(variableName);
+        this._bindingScope.set(
+            retrievalLevel, reference.name, lhs, DeclarationPriority.DEFAULT,
+            (scope: BindingScope, relativeLevel: number) => {
+              // e.g. x(2);
+              const nextContextStmt =
+                  relativeLevel > 0 ? [generateNextContextExpr(relativeLevel).toStmt()] : [];
+
+              // e.g. const $foo$ = r(1);
+              const refExpr = lhs.set(o.importExpr(R3.reference).callFn([o.literal(slot)]));
+              return nextContextStmt.concat(refExpr.toConstDecl());
+            });
+        return [reference.name, reference.value];
+      }));
+      parameters.push(this.constantPool.getConstLiteral(asLiteral(references), true));
+    } else {
+      parameters.push(o.TYPED_NULL_EXPR);
+    }
+
+    const wasInNamespace = this._namespace;
+    const currentNamespace = this.getNamespaceInstruction(namespaceKey);
+
+    // If the namespace is changing now, include an instruction to change it
+    // during element creation.
+    if (currentNamespace !== wasInNamespace) {
+      this.addNamespaceInstruction(currentNamespace, element);
+    }
+
+    const implicit = o.variable(CONTEXT_NAME);
+
+    const createSelfClosingInstruction = !hasStylingInstructions && !isNgContainer &&
+        element.children.length === 0 && element.outputs.length === 0;
+
+    if (createSelfClosingInstruction) {
+      this.creationInstruction(element.sourceSpan, R3.element, trimTrailingNulls(parameters));
+    } else {
+      this.creationInstruction(
+          element.sourceSpan, isNgContainer ? R3.elementContainerStart : R3.elementStart,
+          trimTrailingNulls(parameters));
+
+      // initial styling for static style="..." attributes
+      if (hasStylingInstructions) {
+        const paramsList: (o.Expression)[] = [];
+
+        if (initialClassDeclarations.length) {
+          // the template compiler handles initial class styling (e.g. class="foo") values
+          // in a special command called `elementClass` so that the initial class
+          // can be processed during runtime. These initial class values are bound to
+          // a constant because the inital class values do not change (since they're static).
+          paramsList.push(
+              this.constantPool.getConstLiteral(o.literalArr(initialClassDeclarations), true));
+        } else if (initialStyleDeclarations.length || useDefaultStyleSanitizer) {
+          // no point in having an extra `null` value unless there are follow-up params
+          paramsList.push(o.NULL_EXPR);
+        }
+
+        if (initialStyleDeclarations.length) {
+          // the template compiler handles initial style (e.g. style="foo") values
+          // in a special command called `elementStyle` so that the initial styles
+          // can be processed during runtime. These initial styles values are bound to
+          // a constant because the inital style values do not change (since they're static).
+          paramsList.push(
+              this.constantPool.getConstLiteral(o.literalArr(initialStyleDeclarations), true));
+        } else if (useDefaultStyleSanitizer) {
+          // no point in having an extra `null` value unless there are follow-up params
+          paramsList.push(o.NULL_EXPR);
+        }
+
+        if (useDefaultStyleSanitizer) {
+          paramsList.push(o.importExpr(R3.defaultStyleSanitizer));
+        }
+
+        this.creationInstruction(null, R3.elementStyling, paramsList);
+      }
+
+      // Generate Listeners (outputs)
+      element.outputs.forEach((outputAst: t.BoundEvent) => {
+        const elName = sanitizeIdentifier(element.name);
+        const evName = sanitizeIdentifier(outputAst.name);
+        const functionName = `${this.templateName}_${elName}_${evName}_listener`;
+
+        this.creationInstruction(outputAst.sourceSpan, R3.listener, () => {
+          const listenerScope = this._bindingScope.nestedScope(this._bindingScope.bindingLevel);
+
+          const bindingExpr = convertActionBinding(
+              listenerScope, implicit, outputAst.handler, 'b',
+              () => error('Unexpected interpolation'));
+
+          const statements = [
+            ...listenerScope.restoreViewStatement(), ...listenerScope.variableDeclarations(),
+            ...bindingExpr.render3Stmts
+          ];
+
+          const handler = o.fn(
+              [new o.FnParam('$event', o.DYNAMIC_TYPE)], statements, o.INFERRED_TYPE, null,
+              functionName);
+
+          return [o.literal(outputAst.name), handler];
+        });
+      });
+    }
+
+    if ((styleInputs.length || classInputs.length) && hasStylingInstructions) {
+      const indexLiteral = o.literal(elementIndex);
+
+      const firstStyle = styleInputs[0];
+      const mapBasedStyleInput = firstStyle && firstStyle.name == 'style' ? firstStyle : null;
+
+      const firstClass = classInputs[0];
+      const mapBasedClassInput = firstClass && isClassBinding(firstClass) ? firstClass : null;
+
+      const stylingInput = mapBasedStyleInput || mapBasedClassInput;
+      if (stylingInput) {
+        const params: o.Expression[] = [];
+        let value: AST;
+        if (mapBasedClassInput) {
+          value = mapBasedClassInput.value.visit(this._valueConverter);
+        } else if (mapBasedStyleInput) {
+          params.push(o.NULL_EXPR);
+        }
+
+        if (mapBasedStyleInput) {
+          value = mapBasedStyleInput.value.visit(this._valueConverter);
+        }
+
+        this.updateInstruction(stylingInput.sourceSpan, R3.elementStylingMap, () => {
+          params.push(this.convertPropertyBinding(implicit, value, true));
+          return [indexLiteral, ...params];
+        });
+      }
+
+      let lastInputCommand: t.BoundAttribute|null = null;
+      if (styleInputs.length) {
+        let i = mapBasedStyleInput ? 1 : 0;
+        for (i; i < styleInputs.length; i++) {
+          const input = styleInputs[i];
+          const params: any[] = [];
+          const sanitizationRef = resolveSanitizationFn(input, input.securityContext);
+          if (sanitizationRef) params.push(sanitizationRef);
+
+          const key = input.name;
+          const styleIndex: number = stylesIndexMap[key] !;
+          const value = input.value.visit(this._valueConverter);
+          this.updateInstruction(input.sourceSpan, R3.elementStyleProp, () => {
+            return [
+              indexLiteral, o.literal(styleIndex),
+              this.convertPropertyBinding(implicit, value, true), ...params
+            ];
+          });
+        }
+
+        lastInputCommand = styleInputs[styleInputs.length - 1];
+      }
+
+      if (classInputs.length) {
+        let i = mapBasedClassInput ? 1 : 0;
+        for (i; i < classInputs.length; i++) {
+          const input = classInputs[i];
+          const params: any[] = [];
+          const sanitizationRef = resolveSanitizationFn(input, input.securityContext);
+          if (sanitizationRef) params.push(sanitizationRef);
+
+          const key = input.name;
+          const classIndex: number = classesIndexMap[key] !;
+          const value = input.value.visit(this._valueConverter);
+          this.updateInstruction(input.sourceSpan, R3.elementClassProp, () => {
+            return [
+              indexLiteral, o.literal(classIndex),
+              this.convertPropertyBinding(implicit, value, true), ...params
+            ];
+          });
+        }
+
+        lastInputCommand = classInputs[classInputs.length - 1];
+      }
+
+      this.updateInstruction(lastInputCommand !.sourceSpan, R3.elementStylingApply, [indexLiteral]);
+    }
+
+    // Generate element input bindings
+    allOtherInputs.forEach((input: t.BoundAttribute) => {
+      if (input.type === BindingType.Animation) {
+        console.error('warning: animation bindings not yet supported');
+        return;
+      }
+
+      const instruction = mapBindingToInstruction(input.type);
+      if (instruction) {
+        const params: any[] = [];
+        const sanitizationRef = resolveSanitizationFn(input, input.securityContext);
+        if (sanitizationRef) params.push(sanitizationRef);
+
+        // TODO(chuckj): runtime: security context?
+        const value = input.value.visit(this._valueConverter);
+        this.updateInstruction(input.sourceSpan, instruction, () => {
+          return [
+            o.literal(elementIndex), o.literal(input.name),
+            this.convertPropertyBinding(implicit, value), ...params
+          ];
+        });
+      } else {
+        this._unsupported(`binding type ${input.type}`);
+      }
+    });
+
+    // Traverse element child nodes
+    if (this._inI18nSection && element.children.length == 1 &&
+        element.children[0] instanceof t.Text) {
+      const text = element.children[0] as t.Text;
+      this.visitSingleI18nTextChild(text, i18nMeta);
+    } else {
+      t.visitAll(this, element.children);
+    }
+
+    if (!createSelfClosingInstruction) {
+      // Finish element construction mode.
+      this.creationInstruction(
+          element.endSourceSpan || element.sourceSpan,
+          isNgContainer ? R3.elementContainerEnd : R3.elementEnd);
+    }
+
+    // Restore the state before exiting this node
+    this._inI18nSection = wasInI18nSection;
+  }
+
+  visitTemplate(template: t.Template) {
+    const templateIndex = this.allocateDataSlot();
+
+    let elName = '';
+    if (template.children.length === 1 && template.children[0] instanceof t.Element) {
+      // When the template as a single child, derive the context name from the tag
+      elName = sanitizeIdentifier((template.children[0] as t.Element).name);
+    }
+
+    const contextName = elName ? `${this.contextName}_${elName}` : '';
+
+    const templateName =
+        contextName ? `${contextName}_Template_${templateIndex}` : `Template_${templateIndex}`;
+
+    const parameters: o.Expression[] = [
+      o.literal(templateIndex),
+      o.variable(templateName),
+      o.TYPED_NULL_EXPR,
+    ];
+
+    // Match directives on both attributes and bound properties
+    const attributeNames: o.Expression[] = [];
+    const attributeMap: {[name: string]: string} = {};
+
+    template.attributes.forEach(a => {
+      attributeNames.push(asLiteral(a.name), asLiteral(''));
+      attributeMap[a.name] = a.value;
+    });
+
+    template.inputs.forEach(i => {
+      attributeNames.push(asLiteral(i.name), asLiteral(''));
+      attributeMap[i.name] = '';
+    });
+
+    if (this.directiveMatcher) {
+      const selector = createCssSelector('ng-template', attributeMap);
+      this.directiveMatcher.match(
+          selector, (cssSelector, staticType) => { this.directives.add(staticType); });
+    }
+
+    if (attributeNames.length) {
+      parameters.push(this.constantPool.getConstLiteral(o.literalArr(attributeNames), true));
+    }
+
+    // e.g. C(1, C1Template)
+    this.creationInstruction(
+        template.sourceSpan, R3.containerCreate, trimTrailingNulls(parameters));
+
+    // e.g. p(1, 'forOf', ɵb(ctx.items));
+    const context = o.variable(CONTEXT_NAME);
+    template.inputs.forEach(input => {
+      const value = input.value.visit(this._valueConverter);
+      this.updateInstruction(template.sourceSpan, R3.elementProperty, () => {
+        return [
+          o.literal(templateIndex), o.literal(input.name),
+          this.convertPropertyBinding(context, value)
+        ];
+      });
+    });
+
+    // Create the template function
+    const templateVisitor = new TemplateDefinitionBuilder(
+        this.constantPool, this._bindingScope, this.level + 1, contextName, templateName, [],
+        this.directiveMatcher, this.directives, this.pipeTypeByName, this.pipes, this._namespace);
+
+    // Nested templates must not be visited until after their parent templates have completed
+    // processing, so they are queued here until after the initial pass. Otherwise, we wouldn't
+    // be able to support bindings in nested templates to local refs that occur after the
+    // template definition. e.g. <div *ngIf="showing"> {{ foo }} </div>  <div #foo></div>
+    this._nestedTemplateFns.push(() => {
+      const templateFunctionExpr =
+          templateVisitor.buildTemplateFunction(template.children, template.variables);
+      this.constantPool.statements.push(templateFunctionExpr.toDeclStmt(templateName, null));
+    });
+  }
+
+  // These should be handled in the template or element directly.
+  readonly visitReference = invalid;
+  readonly visitVariable = invalid;
+  readonly visitTextAttribute = invalid;
+  readonly visitBoundAttribute = invalid;
+  readonly visitBoundEvent = invalid;
+
+  visitBoundText(text: t.BoundText) {
+    const nodeIndex = this.allocateDataSlot();
+
+    this.creationInstruction(text.sourceSpan, R3.text, [o.literal(nodeIndex)]);
+
+    const value = text.value.visit(this._valueConverter);
+    this.updateInstruction(
+        text.sourceSpan, R3.textBinding,
+        () => [o.literal(nodeIndex), this.convertPropertyBinding(o.variable(CONTEXT_NAME), value)]);
+  }
+
+  visitText(text: t.Text) {
+    this.creationInstruction(
+        text.sourceSpan, R3.text, [o.literal(this.allocateDataSlot()), o.literal(text.value)]);
+  }
+
+  // When the content of the element is a single text node the translation can be inlined:
+  //
+  // `<p i18n="desc|mean">some content</p>`
+  // compiles to
+  // ```
+  // /**
+  // * @desc desc
+  // * @meaning mean
+  // */
+  // const MSG_XYZ = goog.getMsg('some content');
+  // i0.ɵT(1, MSG_XYZ);
+  // ```
+  visitSingleI18nTextChild(text: t.Text, i18nMeta: string) {
+    const meta = parseI18nMeta(i18nMeta);
+    const variable = this.constantPool.getTranslation(text.value, meta);
+    this.creationInstruction(
+        text.sourceSpan, R3.text, [o.literal(this.allocateDataSlot()), variable]);
+  }
+
+  private allocateDataSlot() { return this._dataIndex++; }
+  private bindingContext() { return `${this._bindingContext++}`; }
+
+  // Bindings must only be resolved after all local refs have been visited, so all
+  // instructions are queued in callbacks that execute once the initial pass has completed.
+  // Otherwise, we wouldn't be able to support local refs that are defined after their
+  // bindings. e.g. {{ foo }} <div #foo></div>
+  private instructionFn(
+      fns: (() => o.Statement)[], span: ParseSourceSpan|null, reference: o.ExternalReference,
+      paramsOrFn: o.Expression[]|(() => o.Expression[])): void {
+    fns.push(() => {
+      const params = Array.isArray(paramsOrFn) ? paramsOrFn : paramsOrFn();
+      return instruction(span, reference, params).toStmt();
+    });
+  }
+
+  private creationInstruction(
+      span: ParseSourceSpan|null, reference: o.ExternalReference,
+      paramsOrFn?: o.Expression[]|(() => o.Expression[])) {
+    this.instructionFn(this._creationCodeFns, span, reference, paramsOrFn || []);
+  }
+
+  private updateInstruction(
+      span: ParseSourceSpan|null, reference: o.ExternalReference,
+      paramsOrFn?: o.Expression[]|(() => o.Expression[])) {
+    this.instructionFn(this._updateCodeFns, span, reference, paramsOrFn || []);
+  }
+
+  private convertPropertyBinding(implicit: o.Expression, value: AST, skipBindFn?: boolean):
+      o.Expression {
+    const interpolationFn =
+        value instanceof Interpolation ? interpolate : () => error('Unexpected interpolation');
+
+    const convertedPropertyBinding = convertPropertyBinding(
+        this, implicit, value, this.bindingContext(), BindingForm.TrySimple, interpolationFn);
+    this._tempVariables.push(...convertedPropertyBinding.stmts);
+
+    const valExpr = convertedPropertyBinding.currValExpr;
+    return value instanceof Interpolation || skipBindFn ? valExpr :
+                                                          o.importExpr(R3.bind).callFn([valExpr]);
+  }
+}
+
+class ValueConverter extends AstMemoryEfficientTransformer {
+  constructor(
+      private constantPool: ConstantPool, private allocateSlot: () => number,
+      private allocatePureFunctionSlots: (numSlots: number) => number,
+      private definePipe:
+          (name: string, localName: string, slot: number, value: o.Expression) => void) {
+    super();
+  }
+
+  // AstMemoryEfficientTransformer
+  visitPipe(pipe: BindingPipe, context: any): AST {
+    // Allocate a slot to create the pipe
+    const slot = this.allocateSlot();
+    const slotPseudoLocal = `PIPE:${slot}`;
+    // Allocate one slot for the result plus one slot per pipe argument
+    const pureFunctionSlot = this.allocatePureFunctionSlots(2 + pipe.args.length);
+    const target = new PropertyRead(pipe.span, new ImplicitReceiver(pipe.span), slotPseudoLocal);
+    const {identifier, isVarLength} = pipeBindingCallInfo(pipe.args);
+    this.definePipe(pipe.name, slotPseudoLocal, slot, o.importExpr(identifier));
+    const args: AST[] = [pipe.exp, ...pipe.args];
+    const convertedArgs: AST[] =
+        isVarLength ? this.visitAll([new LiteralArray(pipe.span, args)]) : this.visitAll(args);
+
+    return new FunctionCall(pipe.span, target, [
+      new LiteralPrimitive(pipe.span, slot),
+      new LiteralPrimitive(pipe.span, pureFunctionSlot),
+      ...convertedArgs,
+    ]);
+  }
+
+  visitLiteralArray(array: LiteralArray, context: any): AST {
+    return new BuiltinFunctionCall(array.span, this.visitAll(array.expressions), values => {
+      // If the literal has calculated (non-literal) elements transform it into
+      // calls to literal factories that compose the literal and will cache intermediate
+      // values. Otherwise, just return an literal array that contains the values.
+      const literal = o.literalArr(values);
+      return values.every(a => a.isConstant()) ?
+          this.constantPool.getConstLiteral(literal, true) :
+          getLiteralFactory(this.constantPool, literal, this.allocatePureFunctionSlots);
+    });
+  }
+
+  visitLiteralMap(map: LiteralMap, context: any): AST {
+    return new BuiltinFunctionCall(map.span, this.visitAll(map.values), values => {
+      // If the literal has calculated (non-literal) elements  transform it into
+      // calls to literal factories that compose the literal and will cache intermediate
+      // values. Otherwise, just return an literal array that contains the values.
+      const literal = o.literalMap(values.map(
+          (value, index) => ({key: map.keys[index].key, value, quoted: map.keys[index].quoted})));
+      return values.every(a => a.isConstant()) ?
+          this.constantPool.getConstLiteral(literal, true) :
+          getLiteralFactory(this.constantPool, literal, this.allocatePureFunctionSlots);
+    });
+  }
+}
+
+// Pipes always have at least one parameter, the value they operate on
+const pipeBindingIdentifiers = [R3.pipeBind1, R3.pipeBind2, R3.pipeBind3, R3.pipeBind4];
+
+function pipeBindingCallInfo(args: o.Expression[]) {
+  const identifier = pipeBindingIdentifiers[args.length];
+  return {
+    identifier: identifier || R3.pipeBindV,
+    isVarLength: !identifier,
+  };
+}
+
+const pureFunctionIdentifiers = [
+  R3.pureFunction0, R3.pureFunction1, R3.pureFunction2, R3.pureFunction3, R3.pureFunction4,
+  R3.pureFunction5, R3.pureFunction6, R3.pureFunction7, R3.pureFunction8
+];
+
+function pureFunctionCallInfo(args: o.Expression[]) {
+  const identifier = pureFunctionIdentifiers[args.length];
+  return {
+    identifier: identifier || R3.pureFunctionV,
+    isVarLength: !identifier,
+  };
+}
+
+function instruction(
+    span: ParseSourceSpan | null, reference: o.ExternalReference,
+    params: o.Expression[]): o.Expression {
+  return o.importExpr(reference, null, span).callFn(params, span);
+}
+
+// e.g. x(2);
+function generateNextContextExpr(relativeLevelDiff: number): o.Expression {
+  return o.importExpr(R3.nextContext)
+      .callFn(relativeLevelDiff > 1 ? [o.literal(relativeLevelDiff)] : []);
+}
+
+function getLiteralFactory(
+    constantPool: ConstantPool, literal: o.LiteralArrayExpr | o.LiteralMapExpr,
+    allocateSlots: (numSlots: number) => number): o.Expression {
+  const {literalFactory, literalFactoryArguments} = constantPool.getLiteralFactory(literal);
+  // Allocate 1 slot for the result plus 1 per argument
+  const startSlot = allocateSlots(1 + literalFactoryArguments.length);
+  literalFactoryArguments.length > 0 || error(`Expected arguments to a literal factory function`);
+  const {identifier, isVarLength} = pureFunctionCallInfo(literalFactoryArguments);
+
+  // Literal factories are pure functions that only need to be re-invoked when the parameters
+  // change.
+  const args = [
+    o.literal(startSlot),
+    literalFactory,
+  ];
+
+  if (isVarLength) {
+    args.push(o.literalArr(literalFactoryArguments));
+  } else {
+    args.push(...literalFactoryArguments);
+  }
+
+  return o.importExpr(identifier).callFn(args);
+}
+
+/**
+ * Function which is executed whenever a variable is referenced for the first time in a given
+ * scope.
+ *
+ * It is expected that the function creates the `const localName = expression`; statement.
+ */
+export type DeclareLocalVarCallback = (scope: BindingScope, relativeLevel: number) => o.Statement[];
+
+/** The prefix used to get a shared context in BindingScope's map. */
+const SHARED_CONTEXT_KEY = '$$shared_ctx$$';
+
+/**
+ * This is used when one refers to variable such as: 'let abc = x(2).$implicit`.
+ * - key to the map is the string literal `"abc"`.
+ * - value `retrievalLevel` is the level from which this value can be retrieved, which is 2 levels
+ * up in example.
+ * - value `lhs` is the left hand side which is an AST representing `abc`.
+ * - value `declareLocalCallback` is a callback that is invoked when declaring the local.
+ * - value `declare` is true if this value needs to be declared.
+ * - value `priority` dictates the sorting priority of this var declaration compared
+ * to other var declarations on the same retrieval level. For example, if there is a
+ * context variable and a local ref accessing the same parent view, the context var
+ * declaration should always come before the local ref declaration.
+ */
+type BindingData = {
+  retrievalLevel: number; lhs: o.ReadVarExpr; declareLocalCallback?: DeclareLocalVarCallback;
+  declare: boolean;
+  priority: number;
+};
+
+/**
+ * The sorting priority of a local variable declaration. Higher numbers
+ * mean the declaration will appear first in the generated code.
+ */
+const enum DeclarationPriority { DEFAULT = 0, CONTEXT = 1, SHARED_CONTEXT = 2 }
+
+export class BindingScope implements LocalResolver {
+  /** Keeps a map from local variables to their BindingData. */
+  private map = new Map<string, BindingData>();
+  private referenceNameIndex = 0;
+  private restoreViewVariable: o.ReadVarExpr|null = null;
+
+  static ROOT_SCOPE = new BindingScope().set(0, '$event', o.variable('$event'));
+
+  private constructor(public bindingLevel: number = 0, private parent: BindingScope|null = null) {}
+
+  get(name: string): o.Expression|null {
+    let current: BindingScope|null = this;
+    while (current) {
+      let value = current.map.get(name);
+      if (value != null) {
+        if (current !== this) {
+          // make a local copy and reset the `declare` state
+          value = {
+            retrievalLevel: value.retrievalLevel,
+            lhs: value.lhs,
+            declareLocalCallback: value.declareLocalCallback,
+            declare: false,
+            priority: value.priority
+          };
+
+          // Cache the value locally.
+          this.map.set(name, value);
+          // Possibly generate a shared context var
+          this.maybeGenerateSharedContextVar(value);
+          this.maybeRestoreView(value.retrievalLevel);
+        }
+
+        if (value.declareLocalCallback && !value.declare) {
+          value.declare = true;
+        }
+        return value.lhs;
+      }
+      current = current.parent;
+    }
+
+    // If we get to this point, we are looking for a property on the top level component
+    // - If level === 0, we are on the top and don't need to re-declare `ctx`.
+    // - If level > 0, we are in an embedded view. We need to retrieve the name of the
+    // local var we used to store the component context, e.g. const $comp$ = x();
+    return this.bindingLevel === 0 ? null : this.getComponentProperty(name);
+  }
+
+  /**
+   * Create a local variable for later reference.
+   *
+   * @param retrievalLevel The level from which this value can be retrieved
+   * @param name Name of the variable.
+   * @param lhs AST representing the left hand side of the `let lhs = rhs;`.
+   * @param priority The sorting priority of this var
+   * @param declareLocalCallback The callback to invoke when declaring this local var
+   */
+  set(retrievalLevel: number, name: string, lhs: o.ReadVarExpr,
+      priority: number = DeclarationPriority.DEFAULT,
+      declareLocalCallback?: DeclareLocalVarCallback): BindingScope {
+    !this.map.has(name) ||
+        error(`The name ${name} is already defined in scope to be ${this.map.get(name)}`);
+    this.map.set(name, {
+      retrievalLevel: retrievalLevel,
+      lhs: lhs,
+      declare: false,
+      declareLocalCallback: declareLocalCallback,
+      priority: priority
+    });
+    return this;
+  }
+
+  getLocal(name: string): (o.Expression|null) { return this.get(name); }
+
+  nestedScope(level: number): BindingScope {
+    const newScope = new BindingScope(level, this);
+    if (level > 0) newScope.generateSharedContextVar(0);
+    return newScope;
+  }
+
+  getSharedContextName(retrievalLevel: number): o.ReadVarExpr|null {
+    const sharedCtxObj = this.map.get(SHARED_CONTEXT_KEY + retrievalLevel);
+    return sharedCtxObj && sharedCtxObj.declare ? sharedCtxObj.lhs : null;
+  }
+
+  maybeGenerateSharedContextVar(value: BindingData) {
+    if (value.priority === DeclarationPriority.CONTEXT) {
+      const sharedCtxObj = this.map.get(SHARED_CONTEXT_KEY + value.retrievalLevel);
+      if (sharedCtxObj) {
+        sharedCtxObj.declare = true;
+      } else {
+        this.generateSharedContextVar(value.retrievalLevel);
+      }
+    }
+  }
+
+  generateSharedContextVar(retrievalLevel: number) {
+    const lhs = o.variable(CONTEXT_NAME + this.freshReferenceName());
+    this.map.set(SHARED_CONTEXT_KEY + retrievalLevel, {
+      retrievalLevel: retrievalLevel,
+      lhs: lhs,
+      declareLocalCallback: (scope: BindingScope, relativeLevel: number) => {
+        // const ctx_r0 = x(2);
+        return [lhs.set(generateNextContextExpr(relativeLevel)).toConstDecl()];
+      },
+      declare: false,
+      priority: DeclarationPriority.SHARED_CONTEXT
+    });
+  }
+
+  getComponentProperty(name: string): o.Expression {
+    const componentValue = this.map.get(SHARED_CONTEXT_KEY + 0) !;
+    componentValue.declare = true;
+    this.maybeRestoreView(0);
+    return componentValue.lhs.prop(name);
+  }
+
+  maybeRestoreView(retrievalLevel: number) {
+    if (this.isListenerScope() && retrievalLevel < this.bindingLevel) {
+      if (!this.parent !.restoreViewVariable) {
+        // parent saves variable to generate a shared `const $s$ = gV();` instruction
+        this.parent !.restoreViewVariable = o.variable(this.parent !.freshReferenceName());
+      }
+      this.restoreViewVariable = this.parent !.restoreViewVariable;
+    }
+  }
+
+  restoreViewStatement(): o.Statement[] {
+    // rV($state$);
+    return this.restoreViewVariable ?
+        [instruction(null, R3.restoreView, [this.restoreViewVariable]).toStmt()] :
+        [];
+  }
+
+  viewSnapshotStatements(): o.Statement[] {
+    // const $state$ = gV();
+    const getCurrentViewInstruction = instruction(null, R3.getCurrentView, []);
+    return this.restoreViewVariable ?
+        [this.restoreViewVariable.set(getCurrentViewInstruction).toConstDecl()] :
+        [];
+  }
+
+  isListenerScope() { return this.parent && this.parent.bindingLevel === this.bindingLevel; }
+
+  variableDeclarations(): o.Statement[] {
+    let currentContextLevel = 0;
+    return Array.from(this.map.values())
+        .filter(value => value.declare)
+        .sort((a, b) => b.retrievalLevel - a.retrievalLevel || b.priority - a.priority)
+        .reduce((stmts: o.Statement[], value: BindingData) => {
+          const levelDiff = this.bindingLevel - value.retrievalLevel;
+          const currStmts = value.declareLocalCallback !(this, levelDiff - currentContextLevel);
+          currentContextLevel = levelDiff;
+          return stmts.concat(currStmts);
+        }, []) as o.Statement[];
+  }
+
+
+  freshReferenceName(): string {
+    let current: BindingScope = this;
+    // Find the top scope as it maintains the global reference count
+    while (current.parent) current = current.parent;
+    const ref = `${REFERENCE_PREFIX}${current.referenceNameIndex++}`;
+    return ref;
+  }
+}
+
+/**
+ * Creates a `CssSelector` given a tag name and a map of attributes
+ */
+function createCssSelector(tag: string, attributes: {[name: string]: string}): CssSelector {
+  const cssSelector = new CssSelector();
+
+  cssSelector.setElement(tag);
+
+  Object.getOwnPropertyNames(attributes).forEach((name) => {
+    const value = attributes[name];
+
+    cssSelector.addAttribute(name, value);
+    if (name.toLowerCase() === 'class') {
+      const classes = value.trim().split(/\s+/g);
+      classes.forEach(className => cssSelector.addClassName(className));
+    }
+  });
+
+  return cssSelector;
+}
+
+// Parse i18n metas like:
+// - "@@id",
+// - "description[@@id]",
+// - "meaning|description[@@id]"
+function parseI18nMeta(i18n?: string): {description?: string, id?: string, meaning?: string} {
+  let meaning: string|undefined;
+  let description: string|undefined;
+  let id: string|undefined;
+
+  if (i18n) {
+    // TODO(vicb): figure out how to force a message ID with closure ?
+    const idIndex = i18n.indexOf(ID_SEPARATOR);
+
+    const descIndex = i18n.indexOf(MEANING_SEPARATOR);
+    let meaningAndDesc: string;
+    [meaningAndDesc, id] =
+        (idIndex > -1) ? [i18n.slice(0, idIndex), i18n.slice(idIndex + 2)] : [i18n, ''];
+    [meaning, description] = (descIndex > -1) ?
+        [meaningAndDesc.slice(0, descIndex), meaningAndDesc.slice(descIndex + 1)] :
+        ['', meaningAndDesc];
+  }
+
+  return {description, id, meaning};
+}
+
+function interpolate(args: o.Expression[]): o.Expression {
+  args = args.slice(1);  // Ignore the length prefix added for render2
+  switch (args.length) {
+    case 3:
+      return o.importExpr(R3.interpolation1).callFn(args);
+    case 5:
+      return o.importExpr(R3.interpolation2).callFn(args);
+    case 7:
+      return o.importExpr(R3.interpolation3).callFn(args);
+    case 9:
+      return o.importExpr(R3.interpolation4).callFn(args);
+    case 11:
+      return o.importExpr(R3.interpolation5).callFn(args);
+    case 13:
+      return o.importExpr(R3.interpolation6).callFn(args);
+    case 15:
+      return o.importExpr(R3.interpolation7).callFn(args);
+    case 17:
+      return o.importExpr(R3.interpolation8).callFn(args);
+  }
+  (args.length >= 19 && args.length % 2 == 1) ||
+      error(`Invalid interpolation argument length ${args.length}`);
+  return o.importExpr(R3.interpolationV).callFn([o.literalArr(args)]);
+}
+
+/**
+ * Parse a template into render3 `Node`s and additional metadata, with no other dependencies.
+ *
+ * @param template text of the template to parse
+ * @param templateUrl URL to use for source mapping of the parsed template
+ */
+export function parseTemplate(
+    template: string, templateUrl: string, options: {preserveWhitespaces?: boolean} = {}):
+    {errors?: ParseError[], nodes: t.Node[], hasNgContent: boolean, ngContentSelectors: string[]} {
+  const bindingParser = makeBindingParser();
+  const htmlParser = new HtmlParser();
+  const parseResult = htmlParser.parse(template, templateUrl);
+
+  if (parseResult.errors && parseResult.errors.length > 0) {
+    return {errors: parseResult.errors, nodes: [], hasNgContent: false, ngContentSelectors: []};
+  }
+
+  let rootNodes: html.Node[] = parseResult.rootNodes;
+  if (!options.preserveWhitespaces) {
+    rootNodes = html.visitAll(new WhitespaceVisitor(), rootNodes);
+  }
+
+  const {nodes, hasNgContent, ngContentSelectors, errors} =
+      htmlAstToRender3Ast(rootNodes, bindingParser);
+  if (errors && errors.length > 0) {
+    return {errors, nodes: [], hasNgContent: false, ngContentSelectors: []};
+  }
+
+  return {nodes, hasNgContent, ngContentSelectors};
+}
+
+/**
+ * Construct a `BindingParser` with a default configuration.
+ */
+export function makeBindingParser(): BindingParser {
+  return new BindingParser(
+      new Parser(new Lexer()), DEFAULT_INTERPOLATION_CONFIG, new DomElementSchemaRegistry(), null,
+      []);
+}
+
+function isClassBinding(input: t.BoundAttribute): boolean {
+  return input.name == 'className' || input.name == 'class';
+}
+
+function resolveSanitizationFn(input: t.BoundAttribute, context: core.SecurityContext) {
+  switch (context) {
+    case core.SecurityContext.HTML:
+      return o.importExpr(R3.sanitizeHtml);
+    case core.SecurityContext.SCRIPT:
+      return o.importExpr(R3.sanitizeScript);
+    case core.SecurityContext.STYLE:
+      // the compiler does not fill in an instruction for [style.prop?] binding
+      // values because the style algorithm knows internally what props are subject
+      // to sanitization (only [attr.style] values are explicitly sanitized)
+      return input.type === BindingType.Attribute ? o.importExpr(R3.sanitizeStyle) : null;
+    case core.SecurityContext.URL:
+      return o.importExpr(R3.sanitizeUrl);
+    case core.SecurityContext.RESOURCE_URL:
+      return o.importExpr(R3.sanitizeResourceUrl);
+    default:
+      return null;
+  }
+}
+
+function isStyleSanitizable(prop: string): boolean {
+  switch (prop) {
+    case 'background-image':
+    case 'background':
+    case 'border-image':
+    case 'filter':
+    case 'list-style':
+    case 'list-style-image':
+      return true;
+  }
+  return false;
+}
diff --git a/packages/compiler/src/render3/view/util.ts b/packages/compiler/src/render3/view/util.ts
new file mode 100644
index 000000000000..20e548515aa1
--- /dev/null
+++ b/packages/compiler/src/render3/view/util.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 {ConstantPool} from '../../constant_pool';
+import * as o from '../../output/output_ast';
+import * as t from '../r3_ast';
+
+import {R3QueryMetadata} from './api';
+
+/** Name of the temporary to use during data binding */
+export const TEMPORARY_NAME = '_t';
+
+/** Name of the context parameter passed into a template function */
+export const CONTEXT_NAME = 'ctx';
+
+/** Name of the RenderFlag passed into a template function */
+export const RENDER_FLAGS = 'rf';
+
+/** The prefix reference variables */
+export const REFERENCE_PREFIX = '_r';
+
+/** The name of the implicit context reference */
+export const IMPLICIT_REFERENCE = '$implicit';
+
+/** Name of the i18n attributes **/
+export const I18N_ATTR = 'i18n';
+export const I18N_ATTR_PREFIX = 'i18n-';
+
+/** I18n separators for metadata **/
+export const MEANING_SEPARATOR = '|';
+export const ID_SEPARATOR = '@@';
+
+/**
+ * Creates an allocator for a temporary variable.
+ *
+ * A variable declaration is added to the statements the first time the allocator is invoked.
+ */
+export function temporaryAllocator(statements: o.Statement[], name: string): () => o.ReadVarExpr {
+  let temp: o.ReadVarExpr|null = null;
+  return () => {
+    if (!temp) {
+      statements.push(new o.DeclareVarStmt(TEMPORARY_NAME, undefined, o.DYNAMIC_TYPE));
+      temp = o.variable(name);
+    }
+    return temp;
+  };
+}
+
+
+export function unsupported(feature: string): never {
+  if (this) {
+    throw new Error(`Builder ${this.constructor.name} doesn't support ${feature} yet`);
+  }
+  throw new Error(`Feature ${feature} is not supported yet`);
+}
+
+export function invalid<T>(arg: o.Expression | o.Statement | t.Node): never {
+  throw new Error(
+      `Invalid state: Visitor ${this.constructor.name} doesn't handle ${o.constructor.name}`);
+}
+
+export function asLiteral(value: any): o.Expression {
+  if (Array.isArray(value)) {
+    return o.literalArr(value.map(asLiteral));
+  }
+  return o.literal(value, o.INFERRED_TYPE);
+}
+
+export function conditionallyCreateMapObjectLiteral(keys: {[key: string]: string}): o.Expression|
+    null {
+  if (Object.getOwnPropertyNames(keys).length > 0) {
+    return mapToExpression(keys);
+  }
+  return null;
+}
+
+export function mapToExpression(map: {[key: string]: any}, quoted = false): o.Expression {
+  return o.literalMap(
+      Object.getOwnPropertyNames(map).map(key => ({key, quoted, value: asLiteral(map[key])})));
+}
+
+/**
+ *  Remove trailing null nodes as they are implied.
+ */
+export function trimTrailingNulls(parameters: o.Expression[]): o.Expression[] {
+  while (o.isNull(parameters[parameters.length - 1])) {
+    parameters.pop();
+  }
+  return parameters;
+}
+
+export function getQueryPredicate(
+    query: R3QueryMetadata, constantPool: ConstantPool): o.Expression {
+  if (Array.isArray(query.predicate)) {
+    return constantPool.getConstLiteral(
+        o.literalArr(query.predicate.map(selector => o.literal(selector) as o.Expression)));
+  } else {
+    return query.predicate;
+  }
+}
+
+export function noop() {}
+
+export class DefinitionMap {
+  values: {key: string, quoted: boolean, value: o.Expression}[] = [];
+
+  set(key: string, value: o.Expression|null): void {
+    if (value) {
+      this.values.push({key, value, quoted: false});
+    }
+  }
+
+  toLiteralMap(): o.LiteralMapExpr { return o.literalMap(this.values); }
+}
diff --git a/packages/compiler/src/resource_loader.ts b/packages/compiler/src/resource_loader.ts
new file mode 100644
index 000000000000..a0237cd17bb0
--- /dev/null
+++ b/packages/compiler/src/resource_loader.ts
@@ -0,0 +1,15 @@
+/**
+ * @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
+ */
+
+/**
+ * An interface for retrieving documents by URL that the compiler uses
+ * to load templates.
+ */
+export class ResourceLoader {
+  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
new file mode 100644
index 000000000000..7382670a94a1
--- /dev/null
+++ b/packages/compiler/src/schema/dom_element_schema_registry.ts
@@ -0,0 +1,440 @@
+/**
+ * @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 {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SchemaMetadata, SecurityContext} from '../core';
+
+import {isNgContainer, isNgContent} from '../ml_parser/tags';
+import {dashCaseToCamelCase} from '../util';
+
+import {SECURITY_SCHEMA} from './dom_security_schema';
+import {ElementSchemaRegistry} from './element_schema_registry';
+
+const BOOLEAN = 'boolean';
+const NUMBER = 'number';
+const STRING = 'string';
+const OBJECT = 'object';
+
+/**
+ * This array represents the DOM schema. It encodes inheritance, properties, and events.
+ *
+ * ## Overview
+ *
+ * Each line represents one kind of element. The `element_inheritance` and properties are joined
+ * using `element_inheritance|properties` syntax.
+ *
+ * ## Element Inheritance
+ *
+ * The `element_inheritance` can be further subdivided as `element1,element2,...^parentElement`.
+ * Here the individual elements are separated by `,` (commas). Every element in the list
+ * has identical properties.
+ *
+ * An `element` may inherit additional properties from `parentElement` If no `^parentElement` is
+ * specified then `""` (blank) element is assumed.
+ *
+ * NOTE: The blank element inherits from root `[Element]` element, the super element of all
+ * elements.
+ *
+ * NOTE an element prefix such as `:svg:` has no special meaning to the schema.
+ *
+ * ## Properties
+ *
+ * Each element has a set of properties separated by `,` (commas). Each property can be prefixed
+ * by a special character designating its type:
+ *
+ * - (no prefix): property is a string.
+ * - `*`: property represents an event.
+ * - `!`: property is a boolean.
+ * - `#`: property is a number.
+ * - `%`: property is an object.
+ *
+ * ## Query
+ *
+ * The class creates an internal squas representation which allows to easily answer the query of
+ * if a given property exist on a given element.
+ *
+ * NOTE: We don't yet support querying for types or events.
+ * NOTE: This schema is auto extracted from `schema_extractor.ts` located in the test folder,
+ *       see dom_element_schema_registry_spec.ts
+ */
+
+// =================================================================================================
+// =================================================================================================
+// =========== S T O P   -  S T O P   -  S T O P   -  S T O P   -  S T O P   -  S T O P  ===========
+// =================================================================================================
+// =================================================================================================
+//
+//                       DO NOT EDIT THIS DOM SCHEMA WITHOUT A SECURITY REVIEW!
+//
+// Newly added properties must be security reviewed and assigned an appropriate SecurityContext in
+// dom_security_schema.ts. Reach out to mprobst & rjamet for details.
+//
+// =================================================================================================
+
+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',
+  'for': 'htmlFor',
+  'formaction': 'formAction',
+  'innerHtml': 'innerHTML',
+  'readonly': 'readOnly',
+  'tabindex': 'tabIndex',
+};
+
+export class DomElementSchemaRegistry extends ElementSchemaRegistry {
+  private _schema: {[element: string]: {[property: string]: string}} = {};
+
+  constructor() {
+    super();
+    SCHEMA.forEach(encodedType => {
+      const type: {[property: string]: string} = {};
+      const [strType, strProperties] = encodedType.split('|');
+      const properties = strProperties.split(',');
+      const [typeNames, superName] = strType.split('^');
+      typeNames.split(',').forEach(tag => this._schema[tag.toLowerCase()] = type);
+      const superType = superName && this._schema[superName.toLowerCase()];
+      if (superType) {
+        Object.keys(superType).forEach((prop: string) => { type[prop] = superType[prop]; });
+      }
+      properties.forEach((property: string) => {
+        if (property.length > 0) {
+          switch (property[0]) {
+            case '*':
+              // We don't yet support events.
+              // If ever allowing to bind to events, GO THROUGH A SECURITY REVIEW, allowing events
+              // will
+              // almost certainly introduce bad XSS vulnerabilities.
+              // type[property.substring(1)] = EVENT;
+              break;
+            case '!':
+              type[property.substring(1)] = BOOLEAN;
+              break;
+            case '#':
+              type[property.substring(1)] = NUMBER;
+              break;
+            case '%':
+              type[property.substring(1)] = OBJECT;
+              break;
+            default:
+              type[property] = STRING;
+          }
+        }
+      });
+    });
+  }
+
+  hasProperty(tagName: string, propName: string, schemaMetas: SchemaMetadata[]): boolean {
+    if (schemaMetas.some((schema) => schema.name === NO_ERRORS_SCHEMA.name)) {
+      return true;
+    }
+
+    if (tagName.indexOf('-') > -1) {
+      if (isNgContainer(tagName) || isNgContent(tagName)) {
+        return false;
+      }
+
+      if (schemaMetas.some((schema) => schema.name === CUSTOM_ELEMENTS_SCHEMA.name)) {
+        // Can't tell now as we don't know which properties a custom element will get
+        // once it is instantiated
+        return true;
+      }
+    }
+
+    const elementProperties = this._schema[tagName.toLowerCase()] || this._schema['unknown'];
+    return !!elementProperties[propName];
+  }
+
+  hasElement(tagName: string, schemaMetas: SchemaMetadata[]): boolean {
+    if (schemaMetas.some((schema) => schema.name === NO_ERRORS_SCHEMA.name)) {
+      return true;
+    }
+
+    if (tagName.indexOf('-') > -1) {
+      if (isNgContainer(tagName) || isNgContent(tagName)) {
+        return true;
+      }
+
+      if (schemaMetas.some((schema) => schema.name === CUSTOM_ELEMENTS_SCHEMA.name)) {
+        // Allow any custom elements
+        return true;
+      }
+    }
+
+    return !!this._schema[tagName.toLowerCase()];
+  }
+
+  /**
+   * securityContext returns the security context for the given property on the given DOM tag.
+   *
+   * Tag and property name are statically known and cannot change at runtime, i.e. it is not
+   * possible to bind a value into a changing attribute or tag name.
+   *
+   * The filtering is white list based. All attributes in the schema above are assumed to have the
+   * 'NONE' security context, i.e. that they are safe inert string values. Only specific well known
+   * attack vectors are assigned their appropriate context.
+   */
+  securityContext(tagName: string, propName: string, isAttribute: boolean): SecurityContext {
+    if (isAttribute) {
+      // NB: For security purposes, use the mapped property name, not the attribute name.
+      propName = this.getMappedPropName(propName);
+    }
+
+    // Make sure comparisons are case insensitive, so that case differences between attribute and
+    // property names do not have a security impact.
+    tagName = tagName.toLowerCase();
+    propName = propName.toLowerCase();
+    let ctx = SECURITY_SCHEMA[tagName + '|' + propName];
+    if (ctx) {
+      return ctx;
+    }
+    ctx = SECURITY_SCHEMA['*|' + propName];
+    return ctx ? ctx : SecurityContext.NONE;
+  }
+
+  getMappedPropName(propName: string): string { return _ATTR_TO_PROP[propName] || propName; }
+
+  getDefaultComponentElementName(): string { return 'ng-component'; }
+
+  validateProperty(name: string): {error: boolean, msg?: string} {
+    if (name.toLowerCase().startsWith('on')) {
+      const msg = `Binding to event property '${name}' is disallowed for security reasons, ` +
+          `please use (${name.slice(2)})=...` +
+          `\nIf '${name}' is a directive input, make sure the directive is imported by the` +
+          ` current module.`;
+      return {error: true, msg: msg};
+    } else {
+      return {error: false};
+    }
+  }
+
+  validateAttribute(name: string): {error: boolean, msg?: string} {
+    if (name.toLowerCase().startsWith('on')) {
+      const msg = `Binding to event attribute '${name}' is disallowed for security reasons, ` +
+          `please use (${name.slice(2)})=...`;
+      return {error: true, msg: msg};
+    } else {
+      return {error: false};
+    }
+  }
+
+  allKnownElementNames(): string[] { return Object.keys(this._schema); }
+
+  normalizeAnimationStyleProperty(propName: string): string {
+    return dashCaseToCamelCase(propName);
+  }
+
+  normalizeAnimationStyleValue(camelCaseProp: string, userProvidedProp: string, val: string|number):
+      {error: string, value: string} {
+    let unit: string = '';
+    const strVal = val.toString().trim();
+    let errorMsg: string = null !;
+
+    if (_isPixelDimensionStyle(camelCaseProp) && val !== 0 && val !== '0') {
+      if (typeof val === 'number') {
+        unit = 'px';
+      } else {
+        const valAndSuffixMatch = val.match(/^[+-]?[\d\.]+([a-z]*)$/);
+        if (valAndSuffixMatch && valAndSuffixMatch[1].length == 0) {
+          errorMsg = `Please provide a CSS unit value for ${userProvidedProp}:${val}`;
+        }
+      }
+    }
+    return {error: errorMsg, value: strVal + unit};
+  }
+}
+
+function _isPixelDimensionStyle(prop: string): boolean {
+  switch (prop) {
+    case 'width':
+    case 'height':
+    case 'minWidth':
+    case 'minHeight':
+    case 'maxWidth':
+    case 'maxHeight':
+    case 'left':
+    case 'top':
+    case 'bottom':
+    case 'right':
+    case 'fontSize':
+    case 'outlineWidth':
+    case 'outlineOffset':
+    case 'paddingTop':
+    case 'paddingLeft':
+    case 'paddingBottom':
+    case 'paddingRight':
+    case 'marginTop':
+    case 'marginLeft':
+    case 'marginBottom':
+    case 'marginRight':
+    case 'borderRadius':
+    case 'borderWidth':
+    case 'borderTopWidth':
+    case 'borderLeftWidth':
+    case 'borderRightWidth':
+    case 'borderBottomWidth':
+    case 'textIndent':
+      return true;
+
+    default:
+      return false;
+  }
+}
diff --git a/packages/compiler/src/schema/dom_security_schema.ts b/packages/compiler/src/schema/dom_security_schema.ts
new file mode 100644
index 000000000000..0843a9584073
--- /dev/null
+++ b/packages/compiler/src/schema/dom_security_schema.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 {SecurityContext} from '../core';
+
+// =================================================================================================
+// =================================================================================================
+// =========== S T O P   -  S T O P   -  S T O P   -  S T O P   -  S T O P   -  S T O P  ===========
+// =================================================================================================
+// =================================================================================================
+//
+//        DO NOT EDIT THIS LIST OF SECURITY SENSITIVE PROPERTIES WITHOUT A SECURITY REVIEW!
+//                               Reach out to mprobst for details.
+//
+// =================================================================================================
+
+/** Map from tagName|propertyName SecurityContext. Properties applying to all tags use '*'. */
+export const SECURITY_SCHEMA: {[k: string]: SecurityContext} = {};
+
+function registerContext(ctx: SecurityContext, specs: string[]) {
+  for (const spec of specs) SECURITY_SCHEMA[spec.toLowerCase()] = ctx;
+}
+
+// Case is insignificant below, all element and attribute names are lower-cased for lookup.
+
+registerContext(SecurityContext.HTML, [
+  'iframe|srcdoc',
+  '*|innerHTML',
+  '*|outerHTML',
+]);
+registerContext(SecurityContext.STYLE, ['*|style']);
+// NB: no SCRIPT contexts here, they are never allowed due to the parser stripping them.
+registerContext(SecurityContext.URL, [
+  '*|formAction', 'area|href',       'area|ping',       'audio|src',    'a|href',
+  'a|ping',       'blockquote|cite', 'body|background', 'del|cite',     'form|action',
+  'img|src',      'img|srcset',      'input|src',       'ins|cite',     'q|cite',
+  'source|src',   'source|srcset',   'track|src',       'video|poster', 'video|src',
+]);
+registerContext(SecurityContext.RESOURCE_URL, [
+  'applet|code',
+  'applet|codebase',
+  'base|href',
+  'embed|src',
+  'frame|src',
+  'head|profile',
+  'html|manifest',
+  'iframe|src',
+  'link|href',
+  'media|src',
+  'object|codebase',
+  'object|data',
+  'script|src',
+]);
diff --git a/packages/compiler/src/schema/element_schema_registry.ts b/packages/compiler/src/schema/element_schema_registry.ts
new file mode 100644
index 000000000000..ce856f2ece39
--- /dev/null
+++ b/packages/compiler/src/schema/element_schema_registry.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 {SchemaMetadata, SecurityContext} from '../core';
+
+export abstract class ElementSchemaRegistry {
+  abstract hasProperty(tagName: string, propName: string, schemaMetas: SchemaMetadata[]): boolean;
+  abstract hasElement(tagName: string, schemaMetas: SchemaMetadata[]): boolean;
+  abstract securityContext(elementName: string, propName: string, isAttribute: boolean):
+      SecurityContext;
+  abstract allKnownElementNames(): string[];
+  abstract getMappedPropName(propName: string): string;
+  abstract getDefaultComponentElementName(): string;
+  abstract validateProperty(name: string): {error: boolean, msg?: string};
+  abstract validateAttribute(name: string): {error: boolean, msg?: string};
+  abstract normalizeAnimationStyleProperty(propName: string): string;
+  abstract normalizeAnimationStyleValue(
+      camelCaseProp: string, userProvidedProp: string,
+      val: string|number): {error: string, value: string};
+}
diff --git a/packages/compiler/src/selector.ts b/packages/compiler/src/selector.ts
new file mode 100644
index 000000000000..6a69c2ff0be1
--- /dev/null
+++ b/packages/compiler/src/selector.ts
@@ -0,0 +1,390 @@
+/**
+ * @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 {getHtmlTagDefinition} from './ml_parser/html_tags';
+
+const _SELECTOR_REGEXP = new RegExp(
+    '(\\:not\\()|' +           //":not("
+        '([-\\w]+)|' +         // "tag"
+        '(?:\\.([-\\w]+))|' +  // ".class"
+        // "-" should appear first in the regexp below as FF31 parses "[.-\w]" as a range
+        '(?:\\[([-.\\w*]+)(?:=([\"\']?)([^\\]\"\']*)\\5)?\\])|' +  // "[name]", "[name=value]",
+                                                                   // "[name="value"]",
+                                                                   // "[name='value']"
+        '(\\))|' +                                                 // ")"
+        '(\\s*,\\s*)',                                             // ","
+    'g');
+
+/**
+ * A css selector contains an element name,
+ * css classes and attribute/value pairs with the purpose
+ * of selecting subsets out of them.
+ */
+export class CssSelector {
+  element: string|null = null;
+  classNames: string[] = [];
+  /**
+   * The selectors are encoded in pairs where:
+   * - even locations are attribute names
+   * - odd locations are attribute values.
+   *
+   * Example:
+   * Selector: `[key1=value1][key2]` would parse to:
+   * ```
+   * ['key1', 'value1', 'key2', '']
+   * ```
+   */
+  attrs: string[] = [];
+  notSelectors: CssSelector[] = [];
+
+  static parse(selector: string): CssSelector[] {
+    const results: CssSelector[] = [];
+    const _addResult = (res: CssSelector[], cssSel: CssSelector) => {
+      if (cssSel.notSelectors.length > 0 && !cssSel.element && cssSel.classNames.length == 0 &&
+          cssSel.attrs.length == 0) {
+        cssSel.element = '*';
+      }
+      res.push(cssSel);
+    };
+    let cssSelector = new CssSelector();
+    let match: string[]|null;
+    let current = cssSelector;
+    let inNot = false;
+    _SELECTOR_REGEXP.lastIndex = 0;
+    while (match = _SELECTOR_REGEXP.exec(selector)) {
+      if (match[1]) {
+        if (inNot) {
+          throw new Error('Nesting :not is not allowed in a selector');
+        }
+        inNot = true;
+        current = new CssSelector();
+        cssSelector.notSelectors.push(current);
+      }
+      if (match[2]) {
+        current.setElement(match[2]);
+      }
+      if (match[3]) {
+        current.addClassName(match[3]);
+      }
+      if (match[4]) {
+        current.addAttribute(match[4], match[6]);
+      }
+      if (match[7]) {
+        inNot = false;
+        current = cssSelector;
+      }
+      if (match[8]) {
+        if (inNot) {
+          throw new Error('Multiple selectors in :not are not supported');
+        }
+        _addResult(results, cssSelector);
+        cssSelector = current = new CssSelector();
+      }
+    }
+    _addResult(results, cssSelector);
+    return results;
+  }
+
+  isElementSelector(): boolean {
+    return this.hasElementSelector() && this.classNames.length == 0 && this.attrs.length == 0 &&
+        this.notSelectors.length === 0;
+  }
+
+  hasElementSelector(): boolean { return !!this.element; }
+
+  setElement(element: string|null = null) { this.element = element; }
+
+  /** Gets a template string for an element that matches the selector. */
+  getMatchingElementTemplate(): string {
+    const tagName = this.element || 'div';
+    const classAttr = this.classNames.length > 0 ? ` class="${this.classNames.join(' ')}"` : '';
+
+    let attrs = '';
+    for (let i = 0; i < this.attrs.length; i += 2) {
+      const attrName = this.attrs[i];
+      const attrValue = this.attrs[i + 1] !== '' ? `="${this.attrs[i + 1]}"` : '';
+      attrs += ` ${attrName}${attrValue}`;
+    }
+
+    return getHtmlTagDefinition(tagName).isVoid ? `<${tagName}${classAttr}${attrs}/>` :
+                                                  `<${tagName}${classAttr}${attrs}></${tagName}>`;
+  }
+
+  getAttrs(): string[] {
+    const result: string[] = [];
+    if (this.classNames.length > 0) {
+      result.push('class', this.classNames.join(' '));
+    }
+    return result.concat(this.attrs);
+  }
+
+  addAttribute(name: string, value: string = '') {
+    this.attrs.push(name, value && value.toLowerCase() || '');
+  }
+
+  addClassName(name: string) { this.classNames.push(name.toLowerCase()); }
+
+  toString(): string {
+    let res: string = this.element || '';
+    if (this.classNames) {
+      this.classNames.forEach(klass => res += `.${klass}`);
+    }
+    if (this.attrs) {
+      for (let i = 0; i < this.attrs.length; i += 2) {
+        const name = this.attrs[i];
+        const value = this.attrs[i + 1];
+        res += `[${name}${value ? '=' + value : ''}]`;
+      }
+    }
+    this.notSelectors.forEach(notSelector => res += `:not(${notSelector})`);
+    return res;
+  }
+}
+
+/**
+ * Reads a list of CssSelectors and allows to calculate which ones
+ * are contained in a given CssSelector.
+ */
+export class SelectorMatcher {
+  static createNotMatcher(notSelectors: CssSelector[]): SelectorMatcher {
+    const notMatcher = new SelectorMatcher();
+    notMatcher.addSelectables(notSelectors, null);
+    return notMatcher;
+  }
+
+  private _elementMap = new Map<string, SelectorContext[]>();
+  private _elementPartialMap = new Map<string, SelectorMatcher>();
+  private _classMap = new Map<string, SelectorContext[]>();
+  private _classPartialMap = new Map<string, SelectorMatcher>();
+  private _attrValueMap = new Map<string, Map<string, SelectorContext[]>>();
+  private _attrValuePartialMap = new Map<string, Map<string, SelectorMatcher>>();
+  private _listContexts: SelectorListContext[] = [];
+
+  addSelectables(cssSelectors: CssSelector[], callbackCtxt?: any) {
+    let listContext: SelectorListContext = null !;
+    if (cssSelectors.length > 1) {
+      listContext = new SelectorListContext(cssSelectors);
+      this._listContexts.push(listContext);
+    }
+    for (let i = 0; i < cssSelectors.length; i++) {
+      this._addSelectable(cssSelectors[i], callbackCtxt, listContext);
+    }
+  }
+
+  /**
+   * Add an object that can be found later on by calling `match`.
+   * @param cssSelector A css selector
+   * @param callbackCtxt An opaque object that will be given to the callback of the `match` function
+   */
+  private _addSelectable(
+      cssSelector: CssSelector, callbackCtxt: any, listContext: SelectorListContext) {
+    let matcher: SelectorMatcher = this;
+    const element = cssSelector.element;
+    const classNames = cssSelector.classNames;
+    const attrs = cssSelector.attrs;
+    const selectable = new SelectorContext(cssSelector, callbackCtxt, listContext);
+
+    if (element) {
+      const isTerminal = attrs.length === 0 && classNames.length === 0;
+      if (isTerminal) {
+        this._addTerminal(matcher._elementMap, element, selectable);
+      } else {
+        matcher = this._addPartial(matcher._elementPartialMap, element);
+      }
+    }
+
+    if (classNames) {
+      for (let i = 0; i < classNames.length; i++) {
+        const isTerminal = attrs.length === 0 && i === classNames.length - 1;
+        const className = classNames[i];
+        if (isTerminal) {
+          this._addTerminal(matcher._classMap, className, selectable);
+        } else {
+          matcher = this._addPartial(matcher._classPartialMap, className);
+        }
+      }
+    }
+
+    if (attrs) {
+      for (let i = 0; i < attrs.length; i += 2) {
+        const isTerminal = i === attrs.length - 2;
+        const name = attrs[i];
+        const value = attrs[i + 1];
+        if (isTerminal) {
+          const terminalMap = matcher._attrValueMap;
+          let terminalValuesMap = terminalMap.get(name);
+          if (!terminalValuesMap) {
+            terminalValuesMap = new Map<string, SelectorContext[]>();
+            terminalMap.set(name, terminalValuesMap);
+          }
+          this._addTerminal(terminalValuesMap, value, selectable);
+        } else {
+          const partialMap = matcher._attrValuePartialMap;
+          let partialValuesMap = partialMap.get(name);
+          if (!partialValuesMap) {
+            partialValuesMap = new Map<string, SelectorMatcher>();
+            partialMap.set(name, partialValuesMap);
+          }
+          matcher = this._addPartial(partialValuesMap, value);
+        }
+      }
+    }
+  }
+
+  private _addTerminal(
+      map: Map<string, SelectorContext[]>, name: string, selectable: SelectorContext) {
+    let terminalList = map.get(name);
+    if (!terminalList) {
+      terminalList = [];
+      map.set(name, terminalList);
+    }
+    terminalList.push(selectable);
+  }
+
+  private _addPartial(map: Map<string, SelectorMatcher>, name: string): SelectorMatcher {
+    let matcher = map.get(name);
+    if (!matcher) {
+      matcher = new SelectorMatcher();
+      map.set(name, matcher);
+    }
+    return matcher;
+  }
+
+  /**
+   * Find the objects that have been added via `addSelectable`
+   * whose css selector is contained in the given css selector.
+   * @param cssSelector A css selector
+   * @param matchedCallback This callback will be called with the object handed into `addSelectable`
+   * @return boolean true if a match was found
+  */
+  match(cssSelector: CssSelector, matchedCallback: ((c: CssSelector, a: any) => void)|null):
+      boolean {
+    let result = false;
+    const element = cssSelector.element !;
+    const classNames = cssSelector.classNames;
+    const attrs = cssSelector.attrs;
+
+    for (let i = 0; i < this._listContexts.length; i++) {
+      this._listContexts[i].alreadyMatched = false;
+    }
+
+    result = this._matchTerminal(this._elementMap, element, cssSelector, matchedCallback) || result;
+    result = this._matchPartial(this._elementPartialMap, element, cssSelector, matchedCallback) ||
+        result;
+
+    if (classNames) {
+      for (let i = 0; i < classNames.length; i++) {
+        const className = classNames[i];
+        result =
+            this._matchTerminal(this._classMap, className, cssSelector, matchedCallback) || result;
+        result =
+            this._matchPartial(this._classPartialMap, className, cssSelector, matchedCallback) ||
+            result;
+      }
+    }
+
+    if (attrs) {
+      for (let i = 0; i < attrs.length; i += 2) {
+        const name = attrs[i];
+        const value = attrs[i + 1];
+
+        const terminalValuesMap = this._attrValueMap.get(name) !;
+        if (value) {
+          result =
+              this._matchTerminal(terminalValuesMap, '', cssSelector, matchedCallback) || result;
+        }
+        result =
+            this._matchTerminal(terminalValuesMap, value, cssSelector, matchedCallback) || result;
+
+        const partialValuesMap = this._attrValuePartialMap.get(name) !;
+        if (value) {
+          result = this._matchPartial(partialValuesMap, '', cssSelector, matchedCallback) || result;
+        }
+        result =
+            this._matchPartial(partialValuesMap, value, cssSelector, matchedCallback) || result;
+      }
+    }
+    return result;
+  }
+
+  /** @internal */
+  _matchTerminal(
+      map: Map<string, SelectorContext[]>, name: string, cssSelector: CssSelector,
+      matchedCallback: ((c: CssSelector, a: any) => void)|null): boolean {
+    if (!map || typeof name !== 'string') {
+      return false;
+    }
+
+    let selectables: SelectorContext[] = map.get(name) || [];
+    const starSelectables: SelectorContext[] = map.get('*') !;
+    if (starSelectables) {
+      selectables = selectables.concat(starSelectables);
+    }
+    if (selectables.length === 0) {
+      return false;
+    }
+    let selectable: SelectorContext;
+    let result = false;
+    for (let i = 0; i < selectables.length; i++) {
+      selectable = selectables[i];
+      result = selectable.finalize(cssSelector, matchedCallback) || result;
+    }
+    return result;
+  }
+
+  /** @internal */
+  _matchPartial(
+      map: Map<string, SelectorMatcher>, name: string, cssSelector: CssSelector,
+      matchedCallback: ((c: CssSelector, a: any) => void)|null): boolean {
+    if (!map || typeof name !== 'string') {
+      return false;
+    }
+
+    const nestedSelector = map.get(name);
+    if (!nestedSelector) {
+      return false;
+    }
+    // TODO(perf): get rid of recursion and measure again
+    // TODO(perf): don't pass the whole selector into the recursion,
+    // but only the not processed parts
+    return nestedSelector.match(cssSelector, matchedCallback);
+  }
+}
+
+
+export class SelectorListContext {
+  alreadyMatched: boolean = false;
+
+  constructor(public selectors: CssSelector[]) {}
+}
+
+// Store context to pass back selector and context when a selector is matched
+export class SelectorContext {
+  notSelectors: CssSelector[];
+
+  constructor(
+      public selector: CssSelector, public cbContext: any,
+      public listContext: SelectorListContext) {
+    this.notSelectors = selector.notSelectors;
+  }
+
+  finalize(cssSelector: CssSelector, callback: ((c: CssSelector, a: any) => void)|null): boolean {
+    let result = true;
+    if (this.notSelectors.length > 0 && (!this.listContext || !this.listContext.alreadyMatched)) {
+      const notMatcher = SelectorMatcher.createNotMatcher(this.notSelectors);
+      result = !notMatcher.match(cssSelector, null);
+    }
+    if (result && callback && (!this.listContext || !this.listContext.alreadyMatched)) {
+      if (this.listContext) {
+        this.listContext.alreadyMatched = true;
+      }
+      callback(this.selector, this.cbContext);
+    }
+    return result;
+  }
+}
diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
new file mode 100644
index 000000000000..c65e6883bf01
--- /dev/null
+++ b/packages/compiler/src/shadow_css.ts
@@ -0,0 +1,617 @@
+/**
+ * @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 a port of shadowCSS from webcomponents.js to TypeScript.
+ *
+ * Please make sure to keep to edits in sync with the source file.
+ *
+ * Source:
+ * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+ *
+ * The original file level comment is reproduced below
+ */
+
+/*
+  This is a limited shim for ShadowDOM css styling.
+  https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#styles
+
+  The intention here is to support only the styling features which can be
+  relatively simply implemented. The goal is to allow users to avoid the
+  most obvious pitfalls and do so without compromising performance significantly.
+  For ShadowDOM styling that's not covered here, a set of best practices
+  can be provided that should allow users to accomplish more complex styling.
+
+  The following is a list of specific ShadowDOM styling features and a brief
+  discussion of the approach used to shim.
+
+  Shimmed features:
+
+  * :host, :host-context: ShadowDOM allows styling of the shadowRoot's host
+  element using the :host rule. To shim this feature, the :host styles are
+  reformatted and prefixed with a given scope name and promoted to a
+  document level stylesheet.
+  For example, given a scope name of .foo, a rule like this:
+
+    :host {
+        background: red;
+      }
+    }
+
+  becomes:
+
+    .foo {
+      background: red;
+    }
+
+  * encapsulation: Styles defined within ShadowDOM, apply only to
+  dom inside the ShadowDOM. Polymer uses one of two techniques to implement
+  this feature.
+
+  By default, rules are prefixed with the host element tag name
+  as a descendant selector. This ensures styling does not leak out of the 'top'
+  of the element's ShadowDOM. For example,
+
+  div {
+      font-weight: bold;
+    }
+
+  becomes:
+
+  x-foo div {
+      font-weight: bold;
+    }
+
+  becomes:
+
+
+  Alternatively, if WebComponents.ShadowCSS.strictStyling is set to true then
+  selectors are scoped by adding an attribute selector suffix to each
+  simple selector that contains the host element tag name. Each element
+  in the element's ShadowDOM template is also given the scope attribute.
+  Thus, these rules match only elements that have the scope attribute.
+  For example, given a scope name of x-foo, a rule like this:
+
+    div {
+      font-weight: bold;
+    }
+
+  becomes:
+
+    div[x-foo] {
+      font-weight: bold;
+    }
+
+  Note that elements that are dynamically added to a scope must have the scope
+  selector added to them manually.
+
+  * upper/lower bound encapsulation: Styles which are defined outside a
+  shadowRoot should not cross the ShadowDOM boundary and should not apply
+  inside a shadowRoot.
+
+  This styling behavior is not emulated. Some possible ways to do this that
+  were rejected due to complexity and/or performance concerns include: (1) reset
+  every possible property for every possible selector for a given scope name;
+  (2) re-implement css in javascript.
+
+  As an alternative, users should make sure to use selectors
+  specific to the scope in which they are working.
+
+  * ::distributed: This behavior is not emulated. It's often not necessary
+  to style the contents of a specific insertion point and instead, descendants
+  of the host element can be styled selectively. Users can also create an
+  extra node around an insertion point and style that node's contents
+  via descendent selectors. For example, with a shadowRoot like this:
+
+    <style>
+      ::content(div) {
+        background: red;
+      }
+    </style>
+    <content></content>
+
+  could become:
+
+    <style>
+      / *@polyfill .content-container div * /
+      ::content(div) {
+        background: red;
+      }
+    </style>
+    <div class="content-container">
+      <content></content>
+    </div>
+
+  Note the use of @polyfill in the comment above a ShadowDOM specific style
+  declaration. This is a directive to the styling shim to use the selector
+  in comments in lieu of the next selector when running under polyfill.
+*/
+
+export class ShadowCss {
+  strictStyling: boolean = true;
+
+  constructor() {}
+
+  /*
+  * Shim some cssText with the given selector. Returns cssText that can
+  * be included in the document via WebComponents.ShadowCSS.addCssToDocument(css).
+  *
+  * When strictStyling is true:
+  * - selector is the attribute added to all elements inside the host,
+  * - hostSelector is the attribute added to the host itself.
+  */
+  shimCssText(cssText: string, selector: string, hostSelector: string = ''): string {
+    const commentsWithHash = extractCommentsWithHash(cssText);
+    cssText = stripComments(cssText);
+    cssText = this._insertDirectives(cssText);
+
+    const scopedCssText = this._scopeCssText(cssText, selector, hostSelector);
+    return [scopedCssText, ...commentsWithHash].join('\n');
+  }
+
+  private _insertDirectives(cssText: string): string {
+    cssText = this._insertPolyfillDirectivesInCssText(cssText);
+    return this._insertPolyfillRulesInCssText(cssText);
+  }
+
+  /*
+   * Process styles to convert native ShadowDOM rules that will trip
+   * up the css parser; we rely on decorating the stylesheet with inert rules.
+   *
+   * For example, we convert this rule:
+   *
+   * polyfill-next-selector { content: ':host menu-item'; }
+   * ::content menu-item {
+   *
+   * to this:
+   *
+   * scopeName menu-item {
+   *
+  **/
+  private _insertPolyfillDirectivesInCssText(cssText: string): string {
+    // Difference with webcomponents.js: does not handle comments
+    return cssText.replace(
+        _cssContentNextSelectorRe, function(...m: string[]) { return m[2] + '{'; });
+  }
+
+  /*
+   * Process styles to add rules which will only apply under the polyfill
+   *
+   * For example, we convert this rule:
+   *
+   * polyfill-rule {
+   *   content: ':host menu-item';
+   * ...
+   * }
+   *
+   * to this:
+   *
+   * scopeName menu-item {...}
+   *
+  **/
+  private _insertPolyfillRulesInCssText(cssText: string): string {
+    // Difference with webcomponents.js: does not handle comments
+    return cssText.replace(_cssContentRuleRe, (...m: string[]) => {
+      const rule = m[0].replace(m[1], '').replace(m[2], '');
+      return m[4] + rule;
+    });
+  }
+
+  /* Ensure styles are scoped. Pseudo-scoping takes a rule like:
+   *
+   *  .foo {... }
+   *
+   *  and converts this to
+   *
+   *  scopeName .foo { ... }
+  */
+  private _scopeCssText(cssText: string, scopeSelector: string, hostSelector: string): string {
+    const unscopedRules = this._extractUnscopedRulesFromCssText(cssText);
+    // replace :host and :host-context -shadowcsshost and -shadowcsshost respectively
+    cssText = this._insertPolyfillHostInCssText(cssText);
+    cssText = this._convertColonHost(cssText);
+    cssText = this._convertColonHostContext(cssText);
+    cssText = this._convertShadowDOMSelectors(cssText);
+    if (scopeSelector) {
+      cssText = this._scopeSelectors(cssText, scopeSelector, hostSelector);
+    }
+    cssText = cssText + '\n' + unscopedRules;
+    return cssText.trim();
+  }
+
+  /*
+   * Process styles to add rules which will only apply under the polyfill
+   * and do not process via CSSOM. (CSSOM is destructive to rules on rare
+   * occasions, e.g. -webkit-calc on Safari.)
+   * For example, we convert this rule:
+   *
+   * @polyfill-unscoped-rule {
+   *   content: 'menu-item';
+   * ... }
+   *
+   * to this:
+   *
+   * menu-item {...}
+   *
+  **/
+  private _extractUnscopedRulesFromCssText(cssText: string): string {
+    // Difference with webcomponents.js: does not handle comments
+    let r = '';
+    let m: RegExpExecArray|null;
+    _cssContentUnscopedRuleRe.lastIndex = 0;
+    while ((m = _cssContentUnscopedRuleRe.exec(cssText)) !== null) {
+      const rule = m[0].replace(m[2], '').replace(m[1], m[4]);
+      r += rule + '\n\n';
+    }
+    return r;
+  }
+
+  /*
+   * convert a rule like :host(.foo) > .bar { }
+   *
+   * to
+   *
+   * .foo<scopeName> > .bar
+  */
+  private _convertColonHost(cssText: string): string {
+    return this._convertColonRule(cssText, _cssColonHostRe, this._colonHostPartReplacer);
+  }
+
+  /*
+   * convert a rule like :host-context(.foo) > .bar { }
+   *
+   * to
+   *
+   * .foo<scopeName> > .bar, .foo scopeName > .bar { }
+   *
+   * and
+   *
+   * :host-context(.foo:host) .bar { ... }
+   *
+   * to
+   *
+   * .foo<scopeName> .bar { ... }
+  */
+  private _convertColonHostContext(cssText: string): string {
+    return this._convertColonRule(
+        cssText, _cssColonHostContextRe, this._colonHostContextPartReplacer);
+  }
+
+  private _convertColonRule(cssText: string, regExp: RegExp, partReplacer: Function): string {
+    // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
+    return cssText.replace(regExp, function(...m: string[]) {
+      if (m[2]) {
+        const parts = m[2].split(',');
+        const r: string[] = [];
+        for (let i = 0; i < parts.length; i++) {
+          const p = parts[i].trim();
+          if (!p) break;
+          r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
+        }
+        return r.join(',');
+      } else {
+        return _polyfillHostNoCombinator + m[3];
+      }
+    });
+  }
+
+  private _colonHostContextPartReplacer(host: string, part: string, suffix: string): string {
+    if (part.indexOf(_polyfillHost) > -1) {
+      return this._colonHostPartReplacer(host, part, suffix);
+    } else {
+      return host + part + suffix + ', ' + part + ' ' + host + suffix;
+    }
+  }
+
+  private _colonHostPartReplacer(host: string, part: string, suffix: string): string {
+    return host + part.replace(_polyfillHost, '') + suffix;
+  }
+
+  /*
+   * Convert combinators like ::shadow and pseudo-elements like ::content
+   * by replacing with space.
+  */
+  private _convertShadowDOMSelectors(cssText: string): string {
+    return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
+  }
+
+  // change a selector like 'div' to 'name div'
+  private _scopeSelectors(cssText: string, scopeSelector: string, hostSelector: string): string {
+    return processRules(cssText, (rule: CssRule) => {
+      let selector = rule.selector;
+      let content = rule.content;
+      if (rule.selector[0] != '@') {
+        selector =
+            this._scopeSelector(rule.selector, scopeSelector, hostSelector, this.strictStyling);
+      } else if (
+          rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
+          rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
+        content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
+      }
+      return new CssRule(selector, content);
+    });
+  }
+
+  private _scopeSelector(
+      selector: string, scopeSelector: string, hostSelector: string, strict: boolean): string {
+    return selector.split(',')
+        .map(part => part.trim().split(_shadowDeepSelectors))
+        .map((deepParts) => {
+          const [shallowPart, ...otherParts] = deepParts;
+          const applyScope = (shallowPart: string) => {
+            if (this._selectorNeedsScoping(shallowPart, scopeSelector)) {
+              return strict ?
+                  this._applyStrictSelectorScope(shallowPart, scopeSelector, hostSelector) :
+                  this._applySelectorScope(shallowPart, scopeSelector, hostSelector);
+            } else {
+              return shallowPart;
+            }
+          };
+          return [applyScope(shallowPart), ...otherParts].join(' ');
+        })
+        .join(', ');
+  }
+
+  private _selectorNeedsScoping(selector: string, scopeSelector: string): boolean {
+    const re = this._makeScopeMatcher(scopeSelector);
+    return !re.test(selector);
+  }
+
+  private _makeScopeMatcher(scopeSelector: string): RegExp {
+    const lre = /\[/g;
+    const rre = /\]/g;
+    scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
+    return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
+  }
+
+  private _applySelectorScope(selector: string, scopeSelector: string, hostSelector: string):
+      string {
+    // Difference from webcomponents.js: scopeSelector could not be an array
+    return this._applySimpleSelectorScope(selector, scopeSelector, hostSelector);
+  }
+
+  // scope via name and [is=name]
+  private _applySimpleSelectorScope(selector: string, scopeSelector: string, hostSelector: string):
+      string {
+    // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
+    _polyfillHostRe.lastIndex = 0;
+    if (_polyfillHostRe.test(selector)) {
+      const replaceBy = this.strictStyling ? `[${hostSelector}]` : scopeSelector;
+      return selector
+          .replace(
+              _polyfillHostNoCombinatorRe,
+              (hnc, selector) => {
+                return selector.replace(
+                    /([^:]*)(:*)(.*)/,
+                    (_: string, before: string, colon: string, after: string) => {
+                      return before + replaceBy + colon + after;
+                    });
+              })
+          .replace(_polyfillHostRe, replaceBy + ' ');
+    }
+
+    return scopeSelector + ' ' + selector;
+  }
+
+  // return a selector with [name] suffix on each simple selector
+  // e.g. .foo.bar > .zot becomes .foo[name].bar[name] > .zot[name]  /** @internal */
+  private _applyStrictSelectorScope(selector: string, scopeSelector: string, hostSelector: string):
+      string {
+    const isRe = /\[is=([^\]]*)\]/g;
+    scopeSelector = scopeSelector.replace(isRe, (_: string, ...parts: string[]) => parts[0]);
+
+    const attrName = '[' + scopeSelector + ']';
+
+    const _scopeSelectorPart = (p: string) => {
+      let scopedP = p.trim();
+
+      if (!scopedP) {
+        return '';
+      }
+
+      if (p.indexOf(_polyfillHostNoCombinator) > -1) {
+        scopedP = this._applySimpleSelectorScope(p, scopeSelector, hostSelector);
+      } else {
+        // remove :host since it should be unnecessary
+        const t = p.replace(_polyfillHostRe, '');
+        if (t.length > 0) {
+          const matches = t.match(/([^:]*)(:*)(.*)/);
+          if (matches) {
+            scopedP = matches[1] + attrName + matches[2] + matches[3];
+          }
+        }
+      }
+
+      return scopedP;
+    };
+
+    const safeContent = new SafeSelector(selector);
+    selector = safeContent.content();
+
+    let scopedSelector = '';
+    let startIndex = 0;
+    let res: RegExpExecArray|null;
+    const sep = /( |>|\+|~(?!=))\s*/g;
+
+    // If a selector appears before :host it should not be shimmed as it
+    // matches on ancestor elements and not on elements in the host's shadow
+    // `:host-context(div)` is transformed to
+    // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`
+    // the `div` is not part of the component in the 2nd selectors and should not be scoped.
+    // Historically `component-tag:host` was matching the component so we also want to preserve
+    // this behavior to avoid breaking legacy apps (it should not match).
+    // The behavior should be:
+    // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)
+    // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a
+    //   `:host-context(tag)`)
+    const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
+    // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present
+    let shouldScope = !hasHost;
+
+    while ((res = sep.exec(selector)) !== null) {
+      const separator = res[1];
+      const part = selector.slice(startIndex, res.index).trim();
+      shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+      const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;
+      scopedSelector += `${scopedPart} ${separator} `;
+      startIndex = sep.lastIndex;
+    }
+
+    const part = selector.substring(startIndex);
+    shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+    scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
+
+    // replace the placeholders with their original values
+    return safeContent.restore(scopedSelector);
+  }
+
+  private _insertPolyfillHostInCssText(selector: string): string {
+    return selector.replace(_colonHostContextRe, _polyfillHostContext)
+        .replace(_colonHostRe, _polyfillHost);
+  }
+}
+
+class SafeSelector {
+  private placeholders: string[] = [];
+  private index = 0;
+  private _content: string;
+
+  constructor(selector: string) {
+    // Replaces attribute selectors with placeholders.
+    // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
+    selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
+      const replaceBy = `__ph-${this.index}__`;
+      this.placeholders.push(keep);
+      this.index++;
+      return replaceBy;
+    });
+
+    // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
+    // WS and "+" would otherwise be interpreted as selector separators.
+    this._content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+      const replaceBy = `__ph-${this.index}__`;
+      this.placeholders.push(exp);
+      this.index++;
+      return pseudo + replaceBy;
+    });
+  }
+
+  restore(content: string): string {
+    return content.replace(/__ph-(\d+)__/g, (ph, index) => this.placeholders[+index]);
+  }
+
+  content(): string { return this._content; }
+}
+
+const _cssContentNextSelectorRe =
+    /polyfill-next-selector[^}]*content:[\s]*?(['"])(.*?)\1[;\s]*}([^{]*?){/gim;
+const _cssContentRuleRe = /(polyfill-rule)[^}]*(content:[\s]*(['"])(.*?)\3)[;\s]*[^}]*}/gim;
+const _cssContentUnscopedRuleRe =
+    /(polyfill-unscoped-rule)[^}]*(content:[\s]*(['"])(.*?)\3)[;\s]*[^}]*}/gim;
+const _polyfillHost = '-shadowcsshost';
+// note: :host-context pre-processed to -shadowcsshostcontext.
+const _polyfillHostContext = '-shadowcsscontext';
+const _parenSuffix = ')(?:\\((' +
+    '(?:\\([^)(]*\\)|[^)(]*)+?' +
+    ')\\))?([^,{]*)';
+const _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
+const _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
+const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
+const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
+const _shadowDOMSelectorsRe = [
+  /::shadow/g,
+  /::content/g,
+  // Deprecated selectors
+  /\/shadow-deep\//g,
+  /\/shadow\//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;
+const _colonHostContextRe = /:host-context/gim;
+
+const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
+
+function stripComments(input: string): string {
+  return input.replace(_commentRe, '');
+}
+
+const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
+
+function extractCommentsWithHash(input: string): string[] {
+  return input.match(_commentWithHashRe) || [];
+}
+
+const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
+const _curlyRe = /([{}])/g;
+const OPEN_CURLY = '{';
+const CLOSE_CURLY = '}';
+const BLOCK_PLACEHOLDER = '%BLOCK%';
+
+export class CssRule {
+  constructor(public selector: string, public content: string) {}
+}
+
+export function processRules(input: string, ruleCallback: (rule: CssRule) => CssRule): string {
+  const inputWithEscapedBlocks = escapeBlocks(input);
+  let nextBlockIndex = 0;
+  return inputWithEscapedBlocks.escapedString.replace(_ruleRe, function(...m: string[]) {
+    const selector = m[2];
+    let content = '';
+    let suffix = m[4];
+    let contentPrefix = '';
+    if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
+      content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
+      suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
+      contentPrefix = '{';
+    }
+    const rule = ruleCallback(new CssRule(selector, content));
+    return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
+  });
+}
+
+class StringWithEscapedBlocks {
+  constructor(public escapedString: string, public blocks: string[]) {}
+}
+
+function escapeBlocks(input: string): StringWithEscapedBlocks {
+  const inputParts = input.split(_curlyRe);
+  const resultParts: string[] = [];
+  const escapedBlocks: string[] = [];
+  let bracketCount = 0;
+  let currentBlockParts: string[] = [];
+  for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
+    const part = inputParts[partIndex];
+    if (part == CLOSE_CURLY) {
+      bracketCount--;
+    }
+    if (bracketCount > 0) {
+      currentBlockParts.push(part);
+    } else {
+      if (currentBlockParts.length > 0) {
+        escapedBlocks.push(currentBlockParts.join(''));
+        resultParts.push(BLOCK_PLACEHOLDER);
+        currentBlockParts = [];
+      }
+      resultParts.push(part);
+    }
+    if (part == OPEN_CURLY) {
+      bracketCount++;
+    }
+  }
+  if (currentBlockParts.length > 0) {
+    escapedBlocks.push(currentBlockParts.join(''));
+    resultParts.push(BLOCK_PLACEHOLDER);
+  }
+  return new StringWithEscapedBlocks(resultParts.join(''), escapedBlocks);
+}
diff --git a/packages/compiler/src/style_compiler.ts b/packages/compiler/src/style_compiler.ts
new file mode 100644
index 000000000000..666c501a3ee5
--- /dev/null
+++ b/packages/compiler/src/style_compiler.ts
@@ -0,0 +1,98 @@
+/**
+ * @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 {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileStylesheetMetadata, identifierModuleUrl, identifierName} from './compile_metadata';
+import {ViewEncapsulation} from './core';
+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}`;
+const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;
+
+export class StylesCompileDependency {
+  constructor(
+      public name: string, public moduleUrl: string, public setValue: (value: any) => void) {}
+}
+
+export class CompiledStylesheet {
+  constructor(
+      public outputCtx: OutputContext, public stylesVar: string,
+      public dependencies: StylesCompileDependency[], public isShimmed: boolean,
+      public meta: CompileStylesheetMetadata) {}
+}
+
+export class StyleCompiler {
+  private _shadowCss: ShadowCss = new ShadowCss();
+
+  constructor(private _urlResolver: UrlResolver) {}
+
+  compileComponent(outputCtx: OutputContext, comp: CompileDirectiveMetadata): CompiledStylesheet {
+    const template = comp.template !;
+    return this._compileStyles(
+        outputCtx, comp, new CompileStylesheetMetadata({
+          styles: template.styles,
+          styleUrls: template.styleUrls,
+          moduleUrl: identifierModuleUrl(comp.type)
+        }),
+        this.needsStyleShim(comp), true);
+  }
+
+  compileStyles(
+      outputCtx: OutputContext, comp: CompileDirectiveMetadata,
+      stylesheet: CompileStylesheetMetadata,
+      shim: boolean = this.needsStyleShim(comp)): CompiledStylesheet {
+    return this._compileStyles(outputCtx, comp, stylesheet, shim, false);
+  }
+
+  needsStyleShim(comp: CompileDirectiveMetadata): boolean {
+    return comp.template !.encapsulation === ViewEncapsulation.Emulated;
+  }
+
+  private _compileStyles(
+      outputCtx: OutputContext, comp: CompileDirectiveMetadata,
+      stylesheet: CompileStylesheetMetadata, shim: boolean,
+      isComponentStylesheet: boolean): CompiledStylesheet {
+    const styleExpressions: o.Expression[] =
+        stylesheet.styles.map(plainStyle => o.literal(this._shimIfNeeded(plainStyle, shim)));
+    const dependencies: StylesCompileDependency[] = [];
+    stylesheet.styleUrls.forEach((styleUrl) => {
+      const exprIndex = styleExpressions.length;
+      // Note: This placeholder will be filled later.
+      styleExpressions.push(null !);
+      dependencies.push(new StylesCompileDependency(
+          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, 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 {
+    return shim ? this._shadowCss.shimCssText(style, CONTENT_ATTR, HOST_ATTR) : style;
+  }
+}
+
+function getStylesVarName(component: CompileDirectiveMetadata | null): string {
+  let result = `styles`;
+  if (component) {
+    result += `_${identifierName(component.type)}`;
+  }
+  return result;
+}
diff --git a/packages/compiler/src/style_url_resolver.ts b/packages/compiler/src/style_url_resolver.ts
new file mode 100644
index 000000000000..844871ee0aab
--- /dev/null
+++ b/packages/compiler/src/style_url_resolver.ts
@@ -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
+ */
+
+// Some of the code comes from WebComponents.JS
+// https://github.com/webcomponents/webcomponentsjs/blob/master/src/HTMLImports/path.js
+
+import {UrlResolver} from './url_resolver';
+
+export class StyleWithImports {
+  constructor(public style: string, public styleUrls: string[]) {}
+}
+
+export function isStyleUrlResolvable(url: string): boolean {
+  if (url == null || url.length === 0 || url[0] == '/') return false;
+  const schemeMatch = url.match(URL_WITH_SCHEMA_REGEXP);
+  return schemeMatch === null || schemeMatch[1] == 'package' || schemeMatch[1] == 'asset';
+}
+
+/**
+ * Rewrites stylesheets by resolving and removing the @import urls that
+ * are either relative or don't have a `package:` scheme
+ */
+export function extractStyleUrls(
+    resolver: UrlResolver, baseUrl: string, cssText: string): StyleWithImports {
+  const foundUrls: string[] = [];
+
+  const modifiedCssText = cssText.replace(CSS_STRIPPABLE_COMMENT_REGEXP, '')
+                              .replace(CSS_IMPORT_REGEXP, (...m: string[]) => {
+                                const url = m[1] || m[2];
+                                if (!isStyleUrlResolvable(url)) {
+                                  // Do not attempt to resolve non-package absolute URLs with URI
+                                  // scheme
+                                  return m[0];
+                                }
+                                foundUrls.push(resolver.resolve(baseUrl, url));
+                                return '';
+                              });
+  return new StyleWithImports(modifiedCssText, foundUrls);
+}
+
+const CSS_IMPORT_REGEXP = /@import\s+(?:url\()?\s*(?:(?:['"]([^'"]*))|([^;\)\s]*))[^;]*;?/g;
+const CSS_STRIPPABLE_COMMENT_REGEXP = /\/\*(?!#\s*(?:sourceURL|sourceMappingURL)=)[\s\S]+?\*\//g;
+const URL_WITH_SCHEMA_REGEXP = /^([^:/?#]+):/;
diff --git a/packages/compiler/src/summary_resolver.ts b/packages/compiler/src/summary_resolver.ts
new file mode 100644
index 000000000000..38d7dda3a07f
--- /dev/null
+++ b/packages/compiler/src/summary_resolver.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 {CompileTypeSummary} from './compile_metadata';
+import {Type} from './core';
+
+export interface Summary<T> {
+  symbol: T;
+  metadata: any;
+  type?: CompileTypeSummary;
+}
+
+export abstract class SummaryResolver<T> {
+  abstract isLibraryFile(fileName: string): boolean;
+  abstract toSummaryFileName(fileName: string, referringSrcFileName: string): string;
+  abstract fromSummaryFileName(fileName: string, referringLibFileName: string): string;
+  abstract resolveSummary(reference: T): Summary<T>|null;
+  abstract getSymbolsOf(filePath: string): T[]|null;
+  abstract getImportAs(reference: T): T;
+  abstract getKnownModuleName(fileName: string): string|null;
+  abstract addSummary(summary: Summary<T>): void;
+}
+
+export class JitSummaryResolver implements SummaryResolver<Type> {
+  private _summaries = new Map<Type, Summary<Type>>();
+
+  isLibraryFile(): boolean { return false; }
+  toSummaryFileName(fileName: string): string { return fileName; }
+  fromSummaryFileName(fileName: string): string { return fileName; }
+  resolveSummary(reference: Type): Summary<Type>|null {
+    return this._summaries.get(reference) || null;
+  }
+  getSymbolsOf(): Type[] { return []; }
+  getImportAs(reference: Type): Type { return reference; }
+  getKnownModuleName(fileName: string) { return null; }
+  addSummary(summary: Summary<Type>) { 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
new file mode 100644
index 000000000000..44d6c0951aea
--- /dev/null
+++ b/packages/compiler/src/template_parser/binding_parser.ts
@@ -0,0 +1,441 @@
+/**
+ * @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 {CompileDirectiveSummary, CompilePipeSummary} from '../compile_metadata';
+import {SecurityContext} from '../core';
+import {ASTWithSource, BindingPipe, BindingType, BoundElementProperty, EmptyExpr, ParsedEvent, ParsedEventType, ParsedProperty, ParsedPropertyType, ParsedVariable, ParserError, RecursiveAstVisitor, TemplateBinding} from '../expression_parser/ast';
+import {Parser} from '../expression_parser/parser';
+import {InterpolationConfig} from '../ml_parser/interpolation_config';
+import {mergeNsAndName} from '../ml_parser/tags';
+import {ParseError, ParseErrorLevel, ParseSourceSpan} from '../parse_util';
+import {ElementSchemaRegistry} from '../schema/element_schema_registry';
+import {CssSelector} from '../selector';
+import {splitAtColon, splitAtPeriod} from '../util';
+
+const PROPERTY_PARTS_SEPARATOR = '.';
+const ATTRIBUTE_PREFIX = 'attr';
+const CLASS_PREFIX = 'class';
+const STYLE_PREFIX = 'style';
+
+const ANIMATE_PROP_PREFIX = 'animate-';
+
+/**
+ * Parses bindings in templates and in the directive host area.
+ */
+export class BindingParser {
+  pipesByName: Map<string, CompilePipeSummary>|null = null;
+
+  private _usedPipes: Map<string, CompilePipeSummary> = new Map();
+
+  constructor(
+      private _exprParser: Parser, private _interpolationConfig: InterpolationConfig,
+      private _schemaRegistry: ElementSchemaRegistry, pipes: CompilePipeSummary[]|null,
+      public errors: ParseError[]) {
+    // When the `pipes` parameter is `null`, do not check for used pipes
+    // This is used in IVY when we might not know the available pipes at compile time
+    if (pipes) {
+      const pipesByName: Map<string, CompilePipeSummary> = new Map();
+      pipes.forEach(pipe => pipesByName.set(pipe.name, pipe));
+      this.pipesByName = pipesByName;
+    }
+  }
+
+  getUsedPipes(): CompilePipeSummary[] { return Array.from(this._usedPipes.values()); }
+
+  createBoundHostProperties(dirMeta: CompileDirectiveSummary, sourceSpan: ParseSourceSpan):
+      ParsedProperty[]|null {
+    if (dirMeta.hostProperties) {
+      const boundProps: ParsedProperty[] = [];
+      Object.keys(dirMeta.hostProperties).forEach(propName => {
+        const expression = dirMeta.hostProperties[propName];
+        if (typeof expression === 'string') {
+          this.parsePropertyBinding(propName, expression, true, sourceSpan, [], boundProps);
+        } else {
+          this._reportError(
+              `Value of the host property binding "${propName}" needs to be a string representing an expression but got "${expression}" (${typeof expression})`,
+              sourceSpan);
+        }
+      });
+      return boundProps;
+    }
+    return null;
+  }
+
+  createDirectiveHostPropertyAsts(
+      dirMeta: CompileDirectiveSummary, elementSelector: string,
+      sourceSpan: ParseSourceSpan): BoundElementProperty[]|null {
+    const boundProps = this.createBoundHostProperties(dirMeta, sourceSpan);
+    return boundProps &&
+        boundProps.map((prop) => this.createBoundElementProperty(elementSelector, prop));
+  }
+
+  createDirectiveHostEventAsts(dirMeta: CompileDirectiveSummary, sourceSpan: ParseSourceSpan):
+      ParsedEvent[]|null {
+    if (dirMeta.hostListeners) {
+      const targetEvents: ParsedEvent[] = [];
+      Object.keys(dirMeta.hostListeners).forEach(propName => {
+        const expression = dirMeta.hostListeners[propName];
+        if (typeof expression === 'string') {
+          this.parseEvent(propName, expression, sourceSpan, [], targetEvents);
+        } else {
+          this._reportError(
+              `Value of the host listener "${propName}" needs to be a string representing an expression but got "${expression}" (${typeof expression})`,
+              sourceSpan);
+        }
+      });
+      return targetEvents;
+    }
+    return null;
+  }
+
+  parseInterpolation(value: string, sourceSpan: ParseSourceSpan): ASTWithSource {
+    const sourceInfo = sourceSpan.start.toString();
+
+    try {
+      const ast =
+          this._exprParser.parseInterpolation(value, sourceInfo, this._interpolationConfig) !;
+      if (ast) this._reportExpressionParserErrors(ast.errors, sourceSpan);
+      this._checkPipes(ast, sourceSpan);
+      return ast;
+    } catch (e) {
+      this._reportError(`${e}`, sourceSpan);
+      return this._exprParser.wrapLiteralPrimitive('ERROR', sourceInfo);
+    }
+  }
+
+  // Parse an inline template binding. ie `<tag *tplKey="<tplValue>">`
+  parseInlineTemplateBinding(
+      tplKey: string, tplValue: string, sourceSpan: ParseSourceSpan,
+      targetMatchableAttrs: string[][], targetProps: ParsedProperty[],
+      targetVars: ParsedVariable[]) {
+    const bindings = this._parseTemplateBindings(tplKey, tplValue, sourceSpan);
+
+    for (let i = 0; i < bindings.length; i++) {
+      const binding = bindings[i];
+      if (binding.keyIsVar) {
+        targetVars.push(new ParsedVariable(binding.key, binding.name, sourceSpan));
+      } else if (binding.expression) {
+        this._parsePropertyAst(
+            binding.key, binding.expression, sourceSpan, targetMatchableAttrs, targetProps);
+      } else {
+        targetMatchableAttrs.push([binding.key, '']);
+        this.parseLiteralAttr(binding.key, null, sourceSpan, targetMatchableAttrs, targetProps);
+      }
+    }
+  }
+
+  private _parseTemplateBindings(tplKey: string, tplValue: string, sourceSpan: ParseSourceSpan):
+      TemplateBinding[] {
+    const sourceInfo = sourceSpan.start.toString();
+
+    try {
+      const bindingsResult = this._exprParser.parseTemplateBindings(tplKey, tplValue, sourceInfo);
+      this._reportExpressionParserErrors(bindingsResult.errors, sourceSpan);
+      bindingsResult.templateBindings.forEach((binding) => {
+        if (binding.expression) {
+          this._checkPipes(binding.expression, sourceSpan);
+        }
+      });
+      bindingsResult.warnings.forEach(
+          (warning) => { this._reportError(warning, sourceSpan, ParseErrorLevel.WARNING); });
+      return bindingsResult.templateBindings;
+    } catch (e) {
+      this._reportError(`${e}`, sourceSpan);
+      return [];
+    }
+  }
+
+  parseLiteralAttr(
+      name: string, value: string|null, sourceSpan: ParseSourceSpan,
+      targetMatchableAttrs: string[][], targetProps: ParsedProperty[]) {
+    if (isAnimationLabel(name)) {
+      name = name.substring(1);
+      if (value) {
+        this._reportError(
+            `Assigning animation triggers via @prop="exp" attributes with an expression is invalid.` +
+                ` Use property bindings (e.g. [@prop]="exp") or use an attribute without a value (e.g. @prop) instead.`,
+            sourceSpan, ParseErrorLevel.ERROR);
+      }
+      this._parseAnimation(name, value, sourceSpan, targetMatchableAttrs, targetProps);
+    } else {
+      targetProps.push(new ParsedProperty(
+          name, this._exprParser.wrapLiteralPrimitive(value, ''), ParsedPropertyType.LITERAL_ATTR,
+          sourceSpan));
+    }
+  }
+
+  parsePropertyBinding(
+      name: string, expression: string, isHost: boolean, sourceSpan: ParseSourceSpan,
+      targetMatchableAttrs: string[][], targetProps: ParsedProperty[]) {
+    let isAnimationProp = false;
+    if (name.startsWith(ANIMATE_PROP_PREFIX)) {
+      isAnimationProp = true;
+      name = name.substring(ANIMATE_PROP_PREFIX.length);
+    } else if (isAnimationLabel(name)) {
+      isAnimationProp = true;
+      name = name.substring(1);
+    }
+
+    if (isAnimationProp) {
+      this._parseAnimation(name, expression, sourceSpan, targetMatchableAttrs, targetProps);
+    } else {
+      this._parsePropertyAst(
+          name, this._parseBinding(expression, isHost, sourceSpan), sourceSpan,
+          targetMatchableAttrs, targetProps);
+    }
+  }
+
+  parsePropertyInterpolation(
+      name: string, value: string, sourceSpan: ParseSourceSpan, targetMatchableAttrs: string[][],
+      targetProps: ParsedProperty[]): boolean {
+    const expr = this.parseInterpolation(value, sourceSpan);
+    if (expr) {
+      this._parsePropertyAst(name, expr, sourceSpan, targetMatchableAttrs, targetProps);
+      return true;
+    }
+    return false;
+  }
+
+  private _parsePropertyAst(
+      name: string, ast: ASTWithSource, sourceSpan: ParseSourceSpan,
+      targetMatchableAttrs: string[][], targetProps: ParsedProperty[]) {
+    targetMatchableAttrs.push([name, ast.source !]);
+    targetProps.push(new ParsedProperty(name, ast, ParsedPropertyType.DEFAULT, sourceSpan));
+  }
+
+  private _parseAnimation(
+      name: string, expression: string|null, sourceSpan: ParseSourceSpan,
+      targetMatchableAttrs: string[][], targetProps: ParsedProperty[]) {
+    // This will occur when a @trigger is not paired with an expression.
+    // For animations it is valid to not have an expression since */void
+    // states will be applied by angular when the element is attached/detached
+    const ast = this._parseBinding(expression || 'undefined', false, sourceSpan);
+    targetMatchableAttrs.push([name, ast.source !]);
+    targetProps.push(new ParsedProperty(name, ast, ParsedPropertyType.ANIMATION, sourceSpan));
+  }
+
+  private _parseBinding(value: string, isHostBinding: boolean, sourceSpan: ParseSourceSpan):
+      ASTWithSource {
+    const sourceInfo = (sourceSpan && sourceSpan.start || '(unknown)').toString();
+
+    try {
+      const ast = isHostBinding ?
+          this._exprParser.parseSimpleBinding(value, sourceInfo, this._interpolationConfig) :
+          this._exprParser.parseBinding(value, sourceInfo, this._interpolationConfig);
+      if (ast) this._reportExpressionParserErrors(ast.errors, sourceSpan);
+      this._checkPipes(ast, sourceSpan);
+      return ast;
+    } catch (e) {
+      this._reportError(`${e}`, sourceSpan);
+      return this._exprParser.wrapLiteralPrimitive('ERROR', sourceInfo);
+    }
+  }
+
+  createBoundElementProperty(elementSelector: string, boundProp: ParsedProperty):
+      BoundElementProperty {
+    if (boundProp.isAnimation) {
+      return new BoundElementProperty(
+          boundProp.name, BindingType.Animation, SecurityContext.NONE, boundProp.expression, null,
+          boundProp.sourceSpan);
+    }
+
+    let unit: string|null = null;
+    let bindingType: BindingType = undefined !;
+    let boundPropertyName: string|null = null;
+    const parts = boundProp.name.split(PROPERTY_PARTS_SEPARATOR);
+    let securityContexts: SecurityContext[] = undefined !;
+
+    // Check check for special cases (prefix style, attr, class)
+    if (parts.length > 1) {
+      if (parts[0] == ATTRIBUTE_PREFIX) {
+        boundPropertyName = parts[1];
+        this._validatePropertyOrAttributeName(boundPropertyName, boundProp.sourceSpan, true);
+        securityContexts = calcPossibleSecurityContexts(
+            this._schemaRegistry, elementSelector, boundPropertyName, true);
+
+        const nsSeparatorIdx = boundPropertyName.indexOf(':');
+        if (nsSeparatorIdx > -1) {
+          const ns = boundPropertyName.substring(0, nsSeparatorIdx);
+          const name = boundPropertyName.substring(nsSeparatorIdx + 1);
+          boundPropertyName = mergeNsAndName(ns, name);
+        }
+
+        bindingType = BindingType.Attribute;
+      } else if (parts[0] == CLASS_PREFIX) {
+        boundPropertyName = parts[1];
+        bindingType = BindingType.Class;
+        securityContexts = [SecurityContext.NONE];
+      } else if (parts[0] == STYLE_PREFIX) {
+        unit = parts.length > 2 ? parts[2] : null;
+        boundPropertyName = parts[1];
+        bindingType = BindingType.Style;
+        securityContexts = [SecurityContext.STYLE];
+      }
+    }
+
+    // If not a special case, use the full property name
+    if (boundPropertyName === null) {
+      boundPropertyName = this._schemaRegistry.getMappedPropName(boundProp.name);
+      securityContexts = calcPossibleSecurityContexts(
+          this._schemaRegistry, elementSelector, boundPropertyName, false);
+      bindingType = BindingType.Property;
+      this._validatePropertyOrAttributeName(boundPropertyName, boundProp.sourceSpan, false);
+    }
+
+    return new BoundElementProperty(
+        boundPropertyName, bindingType, securityContexts[0], boundProp.expression, unit,
+        boundProp.sourceSpan);
+  }
+
+  parseEvent(
+      name: string, expression: string, sourceSpan: ParseSourceSpan,
+      targetMatchableAttrs: string[][], targetEvents: ParsedEvent[]) {
+    if (isAnimationLabel(name)) {
+      name = name.substr(1);
+      this._parseAnimationEvent(name, expression, sourceSpan, targetEvents);
+    } else {
+      this._parseRegularEvent(name, expression, sourceSpan, targetMatchableAttrs, targetEvents);
+    }
+  }
+
+  private _parseAnimationEvent(
+      name: string, expression: string, sourceSpan: ParseSourceSpan, targetEvents: ParsedEvent[]) {
+    const matches = splitAtPeriod(name, [name, '']);
+    const eventName = matches[0];
+    const phase = matches[1].toLowerCase();
+    if (phase) {
+      switch (phase) {
+        case 'start':
+        case 'done':
+          const ast = this._parseAction(expression, sourceSpan);
+          targetEvents.push(
+              new ParsedEvent(eventName, phase, ParsedEventType.Animation, ast, sourceSpan));
+          break;
+
+        default:
+          this._reportError(
+              `The provided animation output phase value "${phase}" for "@${eventName}" is not supported (use start or done)`,
+              sourceSpan);
+          break;
+      }
+    } else {
+      this._reportError(
+          `The animation trigger output event (@${eventName}) is missing its phase value name (start or done are currently supported)`,
+          sourceSpan);
+    }
+  }
+
+  private _parseRegularEvent(
+      name: string, expression: string, sourceSpan: ParseSourceSpan,
+      targetMatchableAttrs: string[][], targetEvents: ParsedEvent[]) {
+    // long format: 'target: eventName'
+    const [target, eventName] = splitAtColon(name, [null !, name]);
+    const ast = this._parseAction(expression, sourceSpan);
+    targetMatchableAttrs.push([name !, ast.source !]);
+    targetEvents.push(new ParsedEvent(eventName, target, ParsedEventType.Regular, ast, sourceSpan));
+    // Don't detect directives for event names for now,
+    // so don't add the event name to the matchableAttrs
+  }
+
+  private _parseAction(value: string, sourceSpan: ParseSourceSpan): ASTWithSource {
+    const sourceInfo = (sourceSpan && sourceSpan.start || '(unknown').toString();
+
+    try {
+      const ast = this._exprParser.parseAction(value, sourceInfo, this._interpolationConfig);
+      if (ast) {
+        this._reportExpressionParserErrors(ast.errors, sourceSpan);
+      }
+      if (!ast || ast.ast instanceof EmptyExpr) {
+        this._reportError(`Empty expressions are not allowed`, sourceSpan);
+        return this._exprParser.wrapLiteralPrimitive('ERROR', sourceInfo);
+      }
+      this._checkPipes(ast, sourceSpan);
+      return ast;
+    } catch (e) {
+      this._reportError(`${e}`, sourceSpan);
+      return this._exprParser.wrapLiteralPrimitive('ERROR', sourceInfo);
+    }
+  }
+
+  private _reportError(
+      message: string, sourceSpan: ParseSourceSpan,
+      level: ParseErrorLevel = ParseErrorLevel.ERROR) {
+    this.errors.push(new ParseError(sourceSpan, message, level));
+  }
+
+  private _reportExpressionParserErrors(errors: ParserError[], sourceSpan: ParseSourceSpan) {
+    for (const error of errors) {
+      this._reportError(error.message, sourceSpan);
+    }
+  }
+
+  // Make sure all the used pipes are known in `this.pipesByName`
+  private _checkPipes(ast: ASTWithSource, sourceSpan: ParseSourceSpan): void {
+    if (ast && this.pipesByName) {
+      const collector = new PipeCollector();
+      ast.visit(collector);
+      collector.pipes.forEach((ast, pipeName) => {
+        const pipeMeta = this.pipesByName !.get(pipeName);
+        if (!pipeMeta) {
+          this._reportError(
+              `The pipe '${pipeName}' could not be found`,
+              new ParseSourceSpan(
+                  sourceSpan.start.moveBy(ast.span.start), sourceSpan.start.moveBy(ast.span.end)));
+        } else {
+          this._usedPipes.set(pipeName, pipeMeta);
+        }
+      });
+    }
+  }
+
+  /**
+   * @param propName the name of the property / attribute
+   * @param sourceSpan
+   * @param isAttr true when binding to an attribute
+   */
+  private _validatePropertyOrAttributeName(
+      propName: string, sourceSpan: ParseSourceSpan, isAttr: boolean): void {
+    const report = isAttr ? this._schemaRegistry.validateAttribute(propName) :
+                            this._schemaRegistry.validateProperty(propName);
+    if (report.error) {
+      this._reportError(report.msg !, sourceSpan, ParseErrorLevel.ERROR);
+    }
+  }
+}
+
+export class PipeCollector extends RecursiveAstVisitor {
+  pipes = new Map<string, BindingPipe>();
+  visitPipe(ast: BindingPipe, context: any): any {
+    this.pipes.set(ast.name, ast);
+    ast.exp.visit(this);
+    this.visitAll(ast.args, context);
+    return null;
+  }
+}
+
+function isAnimationLabel(name: string): boolean {
+  return name[0] == '@';
+}
+
+export function calcPossibleSecurityContexts(
+    registry: ElementSchemaRegistry, selector: string, propName: string,
+    isAttribute: boolean): SecurityContext[] {
+  const ctxs: SecurityContext[] = [];
+  CssSelector.parse(selector).forEach((selector) => {
+    const elementNames = selector.element ? [selector.element] : registry.allKnownElementNames();
+    const notElementNames =
+        new Set(selector.notSelectors.filter(selector => selector.isElementSelector())
+                    .map((selector) => selector.element));
+    const possibleElementNames =
+        elementNames.filter(elementName => !notElementNames.has(elementName));
+
+    ctxs.push(...possibleElementNames.map(
+        elementName => registry.securityContext(elementName, propName, isAttribute)));
+  });
+  return ctxs.length === 0 ? [SecurityContext.NONE] : Array.from(new Set(ctxs)).sort();
+}
diff --git a/packages/compiler/src/template_parser/template_ast.ts b/packages/compiler/src/template_parser/template_ast.ts
new file mode 100644
index 000000000000..df201b676601
--- /dev/null
+++ b/packages/compiler/src/template_parser/template_ast.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 {AstPath} from '../ast_path';
+import {CompileDirectiveSummary, CompileProviderMetadata, CompileTokenMetadata} from '../compile_metadata';
+import {SecurityContext} from '../core';
+import {AST, BindingType, BoundElementProperty, ParsedEvent, ParsedEventType, ParsedVariable} 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.
+ */
+export interface TemplateAst {
+  /**
+   * The source span from which this node was parsed.
+   */
+  sourceSpan: ParseSourceSpan;
+
+  /**
+   * Visit this node and possibly transform it.
+   */
+  visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+/**
+ * A segment of text within the template.
+ */
+export class TextAst implements TemplateAst {
+  constructor(
+      public value: string, public ngContentIndex: number, public sourceSpan: ParseSourceSpan) {}
+  visit(visitor: TemplateAstVisitor, context: any): any { return visitor.visitText(this, context); }
+}
+
+/**
+ * A bound expression within the text of a template.
+ */
+export class BoundTextAst implements TemplateAst {
+  constructor(
+      public value: AST, public ngContentIndex: number, public sourceSpan: ParseSourceSpan) {}
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    return visitor.visitBoundText(this, context);
+  }
+}
+
+/**
+ * A plain attribute on an element.
+ */
+export class AttrAst implements TemplateAst {
+  constructor(public name: string, public value: string, public sourceSpan: ParseSourceSpan) {}
+  visit(visitor: TemplateAstVisitor, context: any): any { return visitor.visitAttr(this, context); }
+}
+
+export const enum PropertyBindingType {
+  // A normal binding to a property (e.g. `[property]="expression"`).
+  Property,
+  // A binding to an element attribute (e.g. `[attr.name]="expression"`).
+  Attribute,
+  // A binding to a CSS class (e.g. `[class.name]="condition"`).
+  Class,
+  // A binding to a style rule (e.g. `[style.rule]="expression"`).
+  Style,
+  // A binding to an animation reference (e.g. `[animate.key]="expression"`).
+  Animation,
+}
+
+const BoundPropertyMapping = {
+  [BindingType.Animation]: PropertyBindingType.Animation,
+  [BindingType.Attribute]: PropertyBindingType.Attribute,
+  [BindingType.Class]: PropertyBindingType.Class,
+  [BindingType.Property]: PropertyBindingType.Property,
+  [BindingType.Style]: PropertyBindingType.Style,
+};
+
+/**
+ * A binding for an element property (e.g. `[property]="expression"`) or an animation trigger (e.g.
+ * `[@trigger]="stateExp"`)
+ */
+export class BoundElementPropertyAst implements TemplateAst {
+  readonly isAnimation: boolean;
+
+  constructor(
+      public name: string, public type: PropertyBindingType,
+      public securityContext: SecurityContext, public value: AST, public unit: string|null,
+      public sourceSpan: ParseSourceSpan) {
+    this.isAnimation = this.type === PropertyBindingType.Animation;
+  }
+
+  static fromBoundProperty(prop: BoundElementProperty) {
+    const type = BoundPropertyMapping[prop.type];
+    return new BoundElementPropertyAst(
+        prop.name, type, prop.securityContext, prop.value, prop.unit, prop.sourceSpan);
+  }
+
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    return visitor.visitElementProperty(this, context);
+  }
+}
+
+/**
+ * A binding for an element event (e.g. `(event)="handler()"`) or an animation trigger event (e.g.
+ * `(@trigger.phase)="callback($event)"`).
+ */
+export class BoundEventAst implements TemplateAst {
+  readonly fullName: string;
+  readonly isAnimation: boolean;
+
+  constructor(
+      public name: string, public target: string|null, public phase: string|null,
+      public handler: AST, public sourceSpan: ParseSourceSpan) {
+    this.fullName = BoundEventAst.calcFullName(this.name, this.target, this.phase);
+    this.isAnimation = !!this.phase;
+  }
+
+  static calcFullName(name: string, target: string|null, phase: string|null): string {
+    if (target) {
+      return `${target}:${name}`;
+    }
+    if (phase) {
+      return `@${name}.${phase}`;
+    }
+
+    return name;
+  }
+
+  static fromParsedEvent(event: ParsedEvent) {
+    const target: string|null = event.type === ParsedEventType.Regular ? event.targetOrPhase : null;
+    const phase: string|null =
+        event.type === ParsedEventType.Animation ? event.targetOrPhase : null;
+    return new BoundEventAst(event.name, target, phase, event.handler, event.sourceSpan);
+  }
+
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    return visitor.visitEvent(this, context);
+  }
+}
+
+/**
+ * A reference declaration on an element (e.g. `let someName="expression"`).
+ */
+export class ReferenceAst implements TemplateAst {
+  constructor(
+      public name: string, public value: CompileTokenMetadata, public originalValue: string,
+      public sourceSpan: ParseSourceSpan) {}
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    return visitor.visitReference(this, context);
+  }
+}
+
+/**
+ * A variable declaration on a <ng-template> (e.g. `var-someName="someLocalName"`).
+ */
+export class VariableAst implements TemplateAst {
+  constructor(public name: string, public value: string, public sourceSpan: ParseSourceSpan) {}
+
+  static fromParsedVariable(v: ParsedVariable) {
+    return new VariableAst(v.name, v.value, v.sourceSpan);
+  }
+
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    return visitor.visitVariable(this, context);
+  }
+}
+
+/**
+ * An element declaration in a template.
+ */
+export class ElementAst implements TemplateAst {
+  constructor(
+      public name: string, public attrs: AttrAst[], public inputs: BoundElementPropertyAst[],
+      public outputs: BoundEventAst[], public references: ReferenceAst[],
+      public directives: DirectiveAst[], public providers: ProviderAst[],
+      public hasViewContainer: boolean, public queryMatches: QueryMatch[],
+      public children: TemplateAst[], public ngContentIndex: number|null,
+      public sourceSpan: ParseSourceSpan, public endSourceSpan: ParseSourceSpan|null) {}
+
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    return visitor.visitElement(this, context);
+  }
+}
+
+/**
+ * A `<ng-template>` element included in an Angular template.
+ */
+export class EmbeddedTemplateAst implements TemplateAst {
+  constructor(
+      public attrs: AttrAst[], public outputs: BoundEventAst[], public references: ReferenceAst[],
+      public variables: VariableAst[], public directives: DirectiveAst[],
+      public providers: ProviderAst[], public hasViewContainer: boolean,
+      public queryMatches: QueryMatch[], public children: TemplateAst[],
+      public ngContentIndex: number, public sourceSpan: ParseSourceSpan) {}
+
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    return visitor.visitEmbeddedTemplate(this, context);
+  }
+}
+
+/**
+ * A directive property with a bound value (e.g. `*ngIf="condition").
+ */
+export class BoundDirectivePropertyAst implements TemplateAst {
+  constructor(
+      public directiveName: string, public templateName: string, public value: AST,
+      public sourceSpan: ParseSourceSpan) {}
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    return visitor.visitDirectiveProperty(this, context);
+  }
+}
+
+/**
+ * A directive declared on an element.
+ */
+export class DirectiveAst implements TemplateAst {
+  constructor(
+      public directive: CompileDirectiveSummary, public inputs: BoundDirectivePropertyAst[],
+      public hostProperties: BoundElementPropertyAst[], public hostEvents: BoundEventAst[],
+      public contentQueryStartId: number, public sourceSpan: ParseSourceSpan) {}
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    return visitor.visitDirective(this, context);
+  }
+}
+
+/**
+ * A provider declared on an element
+ */
+export class ProviderAst implements TemplateAst {
+  constructor(
+      public token: CompileTokenMetadata, public multiProvider: boolean, public eager: boolean,
+      public providers: CompileProviderMetadata[], public providerType: ProviderAstType,
+      public lifecycleHooks: LifecycleHooks[], public sourceSpan: ParseSourceSpan,
+      readonly isModule: boolean) {}
+
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    // No visit method in the visitor for now...
+    return null;
+  }
+}
+
+export enum ProviderAstType {
+  PublicService,
+  PrivateService,
+  Component,
+  Directive,
+  Builtin
+}
+
+/**
+ * Position where content is to be projected (instance of `<ng-content>` in a template).
+ */
+export class NgContentAst implements TemplateAst {
+  constructor(
+      public index: number, public ngContentIndex: number, public sourceSpan: ParseSourceSpan) {}
+  visit(visitor: TemplateAstVisitor, context: any): any {
+    return visitor.visitNgContent(this, context);
+  }
+}
+
+export interface QueryMatch {
+  queryId: number;
+  value: CompileTokenMetadata;
+}
+
+/**
+ * A visitor for {@link TemplateAst} trees that will process each node.
+ */
+export interface TemplateAstVisitor {
+  // Returning a truthy value from `visit()` will prevent `templateVisitAll()` from the call to
+  // the typed method and result returned will become the result included in `visitAll()`s
+  // result array.
+  visit?(ast: TemplateAst, context: any): any;
+
+  visitNgContent(ast: NgContentAst, context: any): any;
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any;
+  visitElement(ast: ElementAst, 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;
+  visitDirective(ast: DirectiveAst, context: any): any;
+  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}.
+ */
+export function templateVisitAll(
+    visitor: TemplateAstVisitor, asts: TemplateAst[], context: any = null): any[] {
+  const result: any[] = [];
+  const visit = visitor.visit ?
+      (ast: TemplateAst) => visitor.visit !(ast, context) || ast.visit(visitor, context) :
+      (ast: TemplateAst) => ast.visit(visitor, context);
+  asts.forEach(ast => {
+    const astResult = visit(ast);
+    if (astResult) {
+      result.push(astResult);
+    }
+  });
+  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
new file mode 100644
index 000000000000..e7a26c865f68
--- /dev/null
+++ b/packages/compiler/src/template_parser/template_parser.ts
@@ -0,0 +1,894 @@
+/**
+ * @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 {CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeSummary, CompileTokenMetadata, CompileTypeMetadata, identifierName} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
+import {CompilerConfig} from '../config';
+import {SchemaMetadata} from '../core';
+import {AST, ASTWithSource, EmptyExpr, ParsedEvent, ParsedProperty, ParsedVariable} from '../expression_parser/ast';
+import {Parser} from '../expression_parser/parser';
+import {Identifiers, createTokenForExternalReference, createTokenForReference} from '../identifiers';
+import * as html from '../ml_parser/ast';
+import {HtmlParser, ParseTreeResult} from '../ml_parser/html_parser';
+import {removeWhitespaces, replaceNgsp} from '../ml_parser/html_whitespaces';
+import {expandNodes} from '../ml_parser/icu_ast_expander';
+import {InterpolationConfig} from '../ml_parser/interpolation_config';
+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 {Console, syntaxError} from '../util';
+
+import {BindingParser} from './binding_parser';
+import * as t from './template_ast';
+import {PreparsedElementType, preparseElement} from './template_preparser';
+
+const BIND_NAME_REGEXP =
+    /^(?:(?:(?:(bind-)|(let-)|(ref-|#)|(on-)|(bindon-)|(@))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/;
+
+// Group 1 = "bind-"
+const KW_BIND_IDX = 1;
+// Group 2 = "let-"
+const KW_LET_IDX = 2;
+// Group 3 = "ref-/#"
+const KW_REF_IDX = 3;
+// Group 4 = "on-"
+const KW_ON_IDX = 4;
+// Group 5 = "bindon-"
+const KW_BINDON_IDX = 5;
+// Group 6 = "@"
+const KW_AT_IDX = 6;
+// Group 7 = the identifier after "bind-", "let-", "ref-/#", "on-", "bindon-" or "@"
+const IDENT_KW_IDX = 7;
+// Group 8 = identifier inside [()]
+const IDENT_BANANA_BOX_IDX = 8;
+// Group 9 = identifier inside []
+const IDENT_PROPERTY_IDX = 9;
+// Group 10 = identifier inside ()
+const IDENT_EVENT_IDX = 10;
+
+const TEMPLATE_ATTR_PREFIX = '*';
+const CLASS_ATTR = 'class';
+
+const TEXT_CSS_SELECTOR = CssSelector.parse('*')[0];
+
+export class TemplateParseError extends ParseError {
+  constructor(message: string, span: ParseSourceSpan, level: ParseErrorLevel) {
+    super(span, message, level);
+  }
+}
+
+export class TemplateParseResult {
+  constructor(
+      public templateAst?: t.TemplateAst[], public usedPipes?: CompilePipeSummary[],
+      public errors?: ParseError[]) {}
+}
+
+export class TemplateParser {
+  constructor(
+      private _config: CompilerConfig, private _reflector: CompileReflector,
+      private _exprParser: Parser, private _schemaRegistry: ElementSchemaRegistry,
+      private _htmlParser: HtmlParser, private _console: Console,
+      public transforms: t.TemplateAstVisitor[]) {}
+
+  public get expressionParser() { return this._exprParser; }
+
+  parse(
+      component: CompileDirectiveMetadata, template: string|ParseTreeResult,
+      directives: CompileDirectiveSummary[], pipes: CompilePipeSummary[], schemas: SchemaMetadata[],
+      templateUrl: string,
+      preserveWhitespaces: boolean): {template: t.TemplateAst[], pipes: CompilePipeSummary[]} {
+    const result = this.tryParse(
+        component, template, directives, pipes, schemas, templateUrl, preserveWhitespaces);
+    const warnings = result.errors !.filter(error => error.level === ParseErrorLevel.WARNING);
+
+    const errors = result.errors !.filter(error => error.level === ParseErrorLevel.ERROR);
+
+    if (warnings.length > 0) {
+      this._console.warn(`Template parse warnings:\n${warnings.join('\n')}`);
+    }
+
+    if (errors.length > 0) {
+      const errorString = errors.join('\n');
+      throw syntaxError(`Template parse errors:\n${errorString}`, errors);
+    }
+
+    return {template: result.templateAst !, pipes: result.usedPipes !};
+  }
+
+  tryParse(
+      component: CompileDirectiveMetadata, template: string|ParseTreeResult,
+      directives: CompileDirectiveSummary[], pipes: CompilePipeSummary[], schemas: SchemaMetadata[],
+      templateUrl: string, preserveWhitespaces: boolean): TemplateParseResult {
+    let htmlParseResult = typeof template === 'string' ?
+        this._htmlParser !.parse(
+            template, templateUrl, true, this.getInterpolationConfig(component)) :
+        template;
+
+    if (!preserveWhitespaces) {
+      htmlParseResult = removeWhitespaces(htmlParseResult);
+    }
+
+    return this.tryParseHtml(
+        this.expandHtml(htmlParseResult), component, directives, pipes, schemas);
+  }
+
+  tryParseHtml(
+      htmlAstWithErrors: ParseTreeResult, component: CompileDirectiveMetadata,
+      directives: CompileDirectiveSummary[], pipes: CompilePipeSummary[],
+      schemas: SchemaMetadata[]): TemplateParseResult {
+    let result: t.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(this._reflector, component);
+      let interpolationConfig: InterpolationConfig = undefined !;
+      if (component.template && component.template.interpolation) {
+        interpolationConfig = {
+          start: component.template.interpolation[0],
+          end: component.template.interpolation[1]
+        };
+      }
+      const bindingParser = new BindingParser(
+          this._exprParser, interpolationConfig !, this._schemaRegistry, uniqPipes, errors);
+      const parseVisitor = new TemplateParseVisitor(
+          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());
+    } else {
+      result = [];
+    }
+    this._assertNoReferenceDuplicationOnTemplate(result, errors);
+
+    if (errors.length > 0) {
+      return new TemplateParseResult(result, usedPipes, errors);
+    }
+
+    if (this.transforms) {
+      this.transforms.forEach(
+          (transform: t.TemplateAstVisitor) => { result = t.templateVisitAll(transform, result); });
+    }
+
+    return new TemplateParseResult(result, usedPipes, errors);
+  }
+
+  expandHtml(htmlAstWithErrors: ParseTreeResult, forced: boolean = false): ParseTreeResult {
+    const errors: ParseError[] = htmlAstWithErrors.errors;
+
+    if (errors.length == 0 || forced) {
+      // Transform ICU messages to angular directives
+      const expandedHtmlAst = expandNodes(htmlAstWithErrors.rootNodes);
+      errors.push(...expandedHtmlAst.errors);
+      htmlAstWithErrors = new ParseTreeResult(expandedHtmlAst.nodes, errors);
+    }
+    return htmlAstWithErrors;
+  }
+
+  getInterpolationConfig(component: CompileDirectiveMetadata): InterpolationConfig|undefined {
+    if (component.template) {
+      return InterpolationConfig.fromArray(component.template.interpolation);
+    }
+    return undefined;
+  }
+
+  /** @internal */
+  _assertNoReferenceDuplicationOnTemplate(result: t.TemplateAst[], errors: TemplateParseError[]):
+      void {
+    const existingReferences: string[] = [];
+
+    result.filter(element => !!(<any>element).references)
+        .forEach(element => (<any>element).references.forEach((reference: t.ReferenceAst) => {
+          const name = reference.name;
+          if (existingReferences.indexOf(name) < 0) {
+            existingReferences.push(name);
+          } else {
+            const error = new TemplateParseError(
+                `Reference "#${name}" is defined several times`, reference.sourceSpan,
+                ParseErrorLevel.ERROR);
+            errors.push(error);
+          }
+        }));
+  }
+}
+
+class TemplateParseVisitor implements html.Visitor {
+  selectorMatcher = new SelectorMatcher();
+  directivesIndex = new Map<CompileDirectiveSummary, number>();
+  ngContentCount = 0;
+  contentQueryStartId: number;
+
+  constructor(
+      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) => {
+      const selector = CssSelector.parse(directive.selector !);
+      this.selectorMatcher.addSelectables(selector, directive);
+      this.directivesIndex.set(directive, index);
+    });
+  }
+
+  visitExpansion(expansion: html.Expansion, context: any): any { return null; }
+
+  visitExpansionCase(expansionCase: html.ExpansionCase, context: any): any { return null; }
+
+  visitText(text: html.Text, parent: ElementContext): any {
+    const ngContentIndex = parent.findNgContentIndex(TEXT_CSS_SELECTOR) !;
+    const valueNoNgsp = replaceNgsp(text.value);
+    const expr = this._bindingParser.parseInterpolation(valueNoNgsp, text.sourceSpan !);
+    return expr ? new t.BoundTextAst(expr, ngContentIndex, text.sourceSpan !) :
+                  new t.TextAst(valueNoNgsp, ngContentIndex, text.sourceSpan !);
+  }
+
+  visitAttribute(attribute: html.Attribute, context: any): any {
+    return new t.AttrAst(attribute.name, attribute.value, attribute.sourceSpan);
+  }
+
+  visitComment(comment: html.Comment, context: any): any { return null; }
+
+  visitElement(element: html.Element, parent: ElementContext): any {
+    const queryStartIndex = this.contentQueryStartId;
+    const elName = element.name;
+    const preparsedElement = preparseElement(element);
+    if (preparsedElement.type === PreparsedElementType.SCRIPT ||
+        preparsedElement.type === PreparsedElementType.STYLE) {
+      // Skipping <script> for security reasons
+      // Skipping <style> as we already processed them
+      // in the StyleCompiler
+      return null;
+    }
+    if (preparsedElement.type === PreparsedElementType.STYLESHEET &&
+        isStyleUrlResolvable(preparsedElement.hrefAttr)) {
+      // Skipping stylesheets with either relative urls or package scheme as we already processed
+      // them in the StyleCompiler
+      return null;
+    }
+
+    const matchableAttrs: [string, string][] = [];
+    const elementOrDirectiveProps: ParsedProperty[] = [];
+    const elementOrDirectiveRefs: ElementOrDirectiveRef[] = [];
+    const elementVars: t.VariableAst[] = [];
+    const events: t.BoundEventAst[] = [];
+
+    const templateElementOrDirectiveProps: ParsedProperty[] = [];
+    const templateMatchableAttrs: [string, string][] = [];
+    const templateElementVars: t.VariableAst[] = [];
+
+    let hasInlineTemplates = false;
+    const attrs: t.AttrAst[] = [];
+    const isTemplateElement = isNgTemplate(element.name);
+
+    element.attrs.forEach(attr => {
+      const parsedVariables: ParsedVariable[] = [];
+      const hasBinding = this._parseAttr(
+          isTemplateElement, attr, matchableAttrs, elementOrDirectiveProps, events,
+          elementOrDirectiveRefs, elementVars);
+      elementVars.push(...parsedVariables.map(v => t.VariableAst.fromParsedVariable(v)));
+
+      let templateValue: string|undefined;
+      let templateKey: string|undefined;
+      const normalizedName = this._normalizeAttributeName(attr.name);
+
+      if (normalizedName.startsWith(TEMPLATE_ATTR_PREFIX)) {
+        templateValue = attr.value;
+        templateKey = normalizedName.substring(TEMPLATE_ATTR_PREFIX.length);
+      }
+
+      const hasTemplateBinding = templateValue != null;
+      if (hasTemplateBinding) {
+        if (hasInlineTemplates) {
+          this._reportError(
+              `Can't have multiple template bindings on one element. Use only one attribute prefixed with *`,
+              attr.sourceSpan);
+        }
+        hasInlineTemplates = true;
+        const parsedVariables: ParsedVariable[] = [];
+        this._bindingParser.parseInlineTemplateBinding(
+            templateKey !, templateValue !, attr.sourceSpan, templateMatchableAttrs,
+            templateElementOrDirectiveProps, parsedVariables);
+        templateElementVars.push(...parsedVariables.map(v => t.VariableAst.fromParsedVariable(v)));
+      }
+
+      if (!hasBinding && !hasTemplateBinding) {
+        // don't include the bindings as attributes as well in the AST
+        attrs.push(this.visitAttribute(attr, null));
+        matchableAttrs.push([attr.name, attr.value]);
+      }
+    });
+
+    const elementCssSelector = createElementCssSelector(elName, matchableAttrs);
+    const {directives: directiveMetas, matchElement} =
+        this._parseDirectives(this.selectorMatcher, elementCssSelector);
+    const references: t.ReferenceAst[] = [];
+    const boundDirectivePropNames = new Set<string>();
+    const directiveAsts = this._createDirectiveAsts(
+        isTemplateElement, element.name, directiveMetas, elementOrDirectiveProps,
+        elementOrDirectiveRefs, element.sourceSpan !, references, boundDirectivePropNames);
+    const elementProps: t.BoundElementPropertyAst[] = this._createElementPropertyAsts(
+        element.name, elementOrDirectiveProps, boundDirectivePropNames);
+    const isViewRoot = parent.isTemplateElement || hasInlineTemplates;
+
+    const providerContext = new ProviderElementContext(
+        this.providerViewContext, parent.providerContext !, isViewRoot, directiveAsts, attrs,
+        references, isTemplateElement, queryStartIndex, element.sourceSpan !);
+
+    const children: t.TemplateAst[] = html.visitAll(
+        preparsedElement.nonBindable ? NON_BINDABLE_VISITOR : this, element.children,
+        ElementContext.create(
+            isTemplateElement, directiveAsts,
+            isTemplateElement ? parent.providerContext ! : providerContext));
+    providerContext.afterElement();
+    // Override the actual selector when the `ngProjectAs` attribute is provided
+    const projectionSelector = preparsedElement.projectAs != '' ?
+        CssSelector.parse(preparsedElement.projectAs)[0] :
+        elementCssSelector;
+    const ngContentIndex = parent.findNgContentIndex(projectionSelector) !;
+    let parsedElement: t.TemplateAst;
+
+    if (preparsedElement.type === PreparsedElementType.NG_CONTENT) {
+      // `<ng-content>` element
+      if (element.children && !element.children.every(_isEmptyTextNode)) {
+        this._reportError(`<ng-content> element cannot have content.`, element.sourceSpan !);
+      }
+
+      parsedElement = new t.NgContentAst(
+          this.ngContentCount++, hasInlineTemplates ? null ! : ngContentIndex,
+          element.sourceSpan !);
+    } else if (isTemplateElement) {
+      // `<ng-template>` element
+      this._assertAllEventsPublishedByDirectives(directiveAsts, events);
+      this._assertNoComponentsNorElementBindingsOnTemplate(
+          directiveAsts, elementProps, element.sourceSpan !);
+
+      parsedElement = new t.EmbeddedTemplateAst(
+          attrs, events, references, elementVars, providerContext.transformedDirectiveAsts,
+          providerContext.transformProviders, providerContext.transformedHasViewContainer,
+          providerContext.queryMatches, children, hasInlineTemplates ? null ! : ngContentIndex,
+          element.sourceSpan !);
+    } else {
+      // element other than `<ng-content>` and `<ng-template>`
+      this._assertElementExists(matchElement, element);
+      this._assertOnlyOneComponent(directiveAsts, element.sourceSpan !);
+
+      const ngContentIndex =
+          hasInlineTemplates ? null : parent.findNgContentIndex(projectionSelector);
+      parsedElement = new t.ElementAst(
+          elName, attrs, elementProps, events, references, providerContext.transformedDirectiveAsts,
+          providerContext.transformProviders, providerContext.transformedHasViewContainer,
+          providerContext.queryMatches, children, hasInlineTemplates ? null : ngContentIndex,
+          element.sourceSpan, element.endSourceSpan || null);
+    }
+
+    if (hasInlineTemplates) {
+      // The element as a *-attribute
+      const templateQueryStartIndex = this.contentQueryStartId;
+      const templateSelector = createElementCssSelector('ng-template', templateMatchableAttrs);
+      const {directives} = this._parseDirectives(this.selectorMatcher, templateSelector);
+      const templateBoundDirectivePropNames = new Set<string>();
+      const templateDirectiveAsts = this._createDirectiveAsts(
+          true, elName, directives, templateElementOrDirectiveProps, [], element.sourceSpan !, [],
+          templateBoundDirectivePropNames);
+      const templateElementProps: t.BoundElementPropertyAst[] = this._createElementPropertyAsts(
+          elName, templateElementOrDirectiveProps, templateBoundDirectivePropNames);
+      this._assertNoComponentsNorElementBindingsOnTemplate(
+          templateDirectiveAsts, templateElementProps, element.sourceSpan !);
+      const templateProviderContext = new ProviderElementContext(
+          this.providerViewContext, parent.providerContext !, parent.isTemplateElement,
+          templateDirectiveAsts, [], [], true, templateQueryStartIndex, element.sourceSpan !);
+      templateProviderContext.afterElement();
+
+      parsedElement = new t.EmbeddedTemplateAst(
+          [], [], [], templateElementVars, templateProviderContext.transformedDirectiveAsts,
+          templateProviderContext.transformProviders,
+          templateProviderContext.transformedHasViewContainer, templateProviderContext.queryMatches,
+          [parsedElement], ngContentIndex, element.sourceSpan !);
+    }
+
+    return parsedElement;
+  }
+
+  private _parseAttr(
+      isTemplateElement: boolean, attr: html.Attribute, targetMatchableAttrs: string[][],
+      targetProps: ParsedProperty[], targetEvents: t.BoundEventAst[],
+      targetRefs: ElementOrDirectiveRef[], targetVars: t.VariableAst[]): boolean {
+    const name = this._normalizeAttributeName(attr.name);
+    const value = attr.value;
+    const srcSpan = attr.sourceSpan;
+
+    const boundEvents: ParsedEvent[] = [];
+    const bindParts = name.match(BIND_NAME_REGEXP);
+    let hasBinding = false;
+
+    if (bindParts !== null) {
+      hasBinding = true;
+      if (bindParts[KW_BIND_IDX] != null) {
+        this._bindingParser.parsePropertyBinding(
+            bindParts[IDENT_KW_IDX], value, false, srcSpan, targetMatchableAttrs, targetProps);
+
+      } else if (bindParts[KW_LET_IDX]) {
+        if (isTemplateElement) {
+          const identifier = bindParts[IDENT_KW_IDX];
+          this._parseVariable(identifier, value, srcSpan, targetVars);
+        } else {
+          this._reportError(`"let-" is only supported on ng-template elements.`, srcSpan);
+        }
+
+      } else if (bindParts[KW_REF_IDX]) {
+        const identifier = bindParts[IDENT_KW_IDX];
+        this._parseReference(identifier, value, srcSpan, targetRefs);
+
+      } else if (bindParts[KW_ON_IDX]) {
+        this._bindingParser.parseEvent(
+            bindParts[IDENT_KW_IDX], value, srcSpan, targetMatchableAttrs, boundEvents);
+
+      } else if (bindParts[KW_BINDON_IDX]) {
+        this._bindingParser.parsePropertyBinding(
+            bindParts[IDENT_KW_IDX], value, false, srcSpan, targetMatchableAttrs, targetProps);
+        this._parseAssignmentEvent(
+            bindParts[IDENT_KW_IDX], value, srcSpan, targetMatchableAttrs, boundEvents);
+
+      } else if (bindParts[KW_AT_IDX]) {
+        this._bindingParser.parseLiteralAttr(
+            name, value, srcSpan, targetMatchableAttrs, targetProps);
+
+      } else if (bindParts[IDENT_BANANA_BOX_IDX]) {
+        this._bindingParser.parsePropertyBinding(
+            bindParts[IDENT_BANANA_BOX_IDX], value, false, srcSpan, targetMatchableAttrs,
+            targetProps);
+        this._parseAssignmentEvent(
+            bindParts[IDENT_BANANA_BOX_IDX], value, srcSpan, targetMatchableAttrs, boundEvents);
+
+      } else if (bindParts[IDENT_PROPERTY_IDX]) {
+        this._bindingParser.parsePropertyBinding(
+            bindParts[IDENT_PROPERTY_IDX], value, false, srcSpan, targetMatchableAttrs,
+            targetProps);
+
+      } else if (bindParts[IDENT_EVENT_IDX]) {
+        this._bindingParser.parseEvent(
+            bindParts[IDENT_EVENT_IDX], value, srcSpan, targetMatchableAttrs, boundEvents);
+      }
+    } else {
+      hasBinding = this._bindingParser.parsePropertyInterpolation(
+          name, value, srcSpan, targetMatchableAttrs, targetProps);
+    }
+
+    if (!hasBinding) {
+      this._bindingParser.parseLiteralAttr(name, value, srcSpan, targetMatchableAttrs, targetProps);
+    }
+
+    targetEvents.push(...boundEvents.map(e => t.BoundEventAst.fromParsedEvent(e)));
+
+    return hasBinding;
+  }
+
+  private _normalizeAttributeName(attrName: string): string {
+    return /^data-/i.test(attrName) ? attrName.substring(5) : attrName;
+  }
+
+  private _parseVariable(
+      identifier: string, value: string, sourceSpan: ParseSourceSpan, targetVars: t.VariableAst[]) {
+    if (identifier.indexOf('-') > -1) {
+      this._reportError(`"-" is not allowed in variable names`, sourceSpan);
+    }
+
+    targetVars.push(new t.VariableAst(identifier, value, sourceSpan));
+  }
+
+  private _parseReference(
+      identifier: string, value: string, sourceSpan: ParseSourceSpan,
+      targetRefs: ElementOrDirectiveRef[]) {
+    if (identifier.indexOf('-') > -1) {
+      this._reportError(`"-" is not allowed in reference names`, sourceSpan);
+    }
+
+    targetRefs.push(new ElementOrDirectiveRef(identifier, value, sourceSpan));
+  }
+
+  private _parseAssignmentEvent(
+      name: string, expression: string, sourceSpan: ParseSourceSpan,
+      targetMatchableAttrs: string[][], targetEvents: ParsedEvent[]) {
+    this._bindingParser.parseEvent(
+        `${name}Change`, `${expression}=$event`, sourceSpan, targetMatchableAttrs, targetEvents);
+  }
+
+  private _parseDirectives(selectorMatcher: SelectorMatcher, elementCssSelector: CssSelector):
+      {directives: CompileDirectiveSummary[], matchElement: boolean} {
+    // Need to sort the directives so that we get consistent results throughout,
+    // as selectorMatcher uses Maps inside.
+    // Also deduplicate directives as they might match more than one time!
+    const directives = new Array(this.directivesIndex.size);
+    // Whether any directive selector matches on the element name
+    let matchElement = false;
+
+    selectorMatcher.match(elementCssSelector, (selector, directive) => {
+      directives[this.directivesIndex.get(directive) !] = directive;
+      matchElement = matchElement || selector.hasElementSelector();
+    });
+
+    return {
+      directives: directives.filter(dir => !!dir),
+      matchElement,
+    };
+  }
+
+  private _createDirectiveAsts(
+      isTemplateElement: boolean, elementName: string, directives: CompileDirectiveSummary[],
+      props: ParsedProperty[], elementOrDirectiveRefs: ElementOrDirectiveRef[],
+      elementSourceSpan: ParseSourceSpan, targetReferences: t.ReferenceAst[],
+      targetBoundDirectivePropNames: Set<string>): t.DirectiveAst[] {
+    const matchedReferences = new Set<string>();
+    let component: CompileDirectiveSummary = null !;
+
+    const directiveAsts = directives.map((directive) => {
+      const sourceSpan = new ParseSourceSpan(
+          elementSourceSpan.start, elementSourceSpan.end,
+          `Directive ${identifierName(directive.type)}`);
+
+      if (directive.isComponent) {
+        component = directive;
+      }
+      const directiveProperties: t.BoundDirectivePropertyAst[] = [];
+      const boundProperties =
+          this._bindingParser.createDirectiveHostPropertyAsts(directive, elementName, sourceSpan) !;
+
+      let hostProperties =
+          boundProperties.map(prop => t.BoundElementPropertyAst.fromBoundProperty(prop));
+      // Note: We need to check the host properties here as well,
+      // as we don't know the element name in the DirectiveWrapperCompiler yet.
+      hostProperties = this._checkPropertiesInSchema(elementName, hostProperties);
+      const parsedEvents =
+          this._bindingParser.createDirectiveHostEventAsts(directive, sourceSpan) !;
+      this._createDirectivePropertyAsts(
+          directive.inputs, props, directiveProperties, targetBoundDirectivePropNames);
+      elementOrDirectiveRefs.forEach((elOrDirRef) => {
+        if ((elOrDirRef.value.length === 0 && directive.isComponent) ||
+            (elOrDirRef.isReferenceToDirective(directive))) {
+          targetReferences.push(new t.ReferenceAst(
+              elOrDirRef.name, createTokenForReference(directive.type.reference), elOrDirRef.value,
+              elOrDirRef.sourceSpan));
+          matchedReferences.add(elOrDirRef.name);
+        }
+      });
+      const hostEvents = parsedEvents.map(e => t.BoundEventAst.fromParsedEvent(e));
+      const contentQueryStartId = this.contentQueryStartId;
+      this.contentQueryStartId += directive.queries.length;
+      return new t.DirectiveAst(
+          directive, directiveProperties, hostProperties, hostEvents, contentQueryStartId,
+          sourceSpan);
+    });
+
+    elementOrDirectiveRefs.forEach((elOrDirRef) => {
+      if (elOrDirRef.value.length > 0) {
+        if (!matchedReferences.has(elOrDirRef.name)) {
+          this._reportError(
+              `There is no directive with "exportAs" set to "${elOrDirRef.value}"`,
+              elOrDirRef.sourceSpan);
+        }
+      } else if (!component) {
+        let refToken: CompileTokenMetadata = null !;
+        if (isTemplateElement) {
+          refToken = createTokenForExternalReference(this.reflector, Identifiers.TemplateRef);
+        }
+        targetReferences.push(
+            new t.ReferenceAst(elOrDirRef.name, refToken, elOrDirRef.value, elOrDirRef.sourceSpan));
+      }
+    });
+    return directiveAsts;
+  }
+
+  private _createDirectivePropertyAsts(
+      directiveProperties: {[key: string]: string}, boundProps: ParsedProperty[],
+      targetBoundDirectiveProps: t.BoundDirectivePropertyAst[],
+      targetBoundDirectivePropNames: Set<string>) {
+    if (directiveProperties) {
+      const boundPropsByName = new Map<string, ParsedProperty>();
+      boundProps.forEach(boundProp => {
+        const prevValue = boundPropsByName.get(boundProp.name);
+        if (!prevValue || prevValue.isLiteral) {
+          // give [a]="b" a higher precedence than a="b" on the same element
+          boundPropsByName.set(boundProp.name, boundProp);
+        }
+      });
+
+      Object.keys(directiveProperties).forEach(dirProp => {
+        const elProp = directiveProperties[dirProp];
+        const boundProp = boundPropsByName.get(elProp);
+
+        // Bindings are optional, so this binding only needs to be set up if an expression is given.
+        if (boundProp) {
+          targetBoundDirectivePropNames.add(boundProp.name);
+          if (!isEmptyExpression(boundProp.expression)) {
+            targetBoundDirectiveProps.push(new t.BoundDirectivePropertyAst(
+                dirProp, boundProp.name, boundProp.expression, boundProp.sourceSpan));
+          }
+        }
+      });
+    }
+  }
+
+  private _createElementPropertyAsts(
+      elementName: string, props: ParsedProperty[],
+      boundDirectivePropNames: Set<string>): t.BoundElementPropertyAst[] {
+    const boundElementProps: t.BoundElementPropertyAst[] = [];
+
+    props.forEach((prop: ParsedProperty) => {
+      if (!prop.isLiteral && !boundDirectivePropNames.has(prop.name)) {
+        const boundProp = this._bindingParser.createBoundElementProperty(elementName, prop);
+        boundElementProps.push(t.BoundElementPropertyAst.fromBoundProperty(boundProp));
+      }
+    });
+    return this._checkPropertiesInSchema(elementName, boundElementProps);
+  }
+
+  private _findComponentDirectives(directives: t.DirectiveAst[]): t.DirectiveAst[] {
+    return directives.filter(directive => directive.directive.isComponent);
+  }
+
+  private _findComponentDirectiveNames(directives: t.DirectiveAst[]): string[] {
+    return this._findComponentDirectives(directives)
+        .map(directive => identifierName(directive.directive.type) !);
+  }
+
+  private _assertOnlyOneComponent(directives: t.DirectiveAst[], sourceSpan: ParseSourceSpan) {
+    const componentTypeNames = this._findComponentDirectiveNames(directives);
+    if (componentTypeNames.length > 1) {
+      this._reportError(
+          `More than one component matched on this element.\n` +
+              `Make sure that only one component's selector can match a given element.\n` +
+              `Conflicting components: ${componentTypeNames.join(',')}`,
+          sourceSpan);
+    }
+  }
+
+  /**
+   * Make sure that non-angular tags conform to the schemas.
+   *
+   * Note: An element is considered an angular tag when at least one directive selector matches the
+   * tag name.
+   *
+   * @param matchElement Whether any directive has matched on the tag name
+   * @param element the html element
+   */
+  private _assertElementExists(matchElement: boolean, element: html.Element) {
+    const elName = element.name.replace(/^:xhtml:/, '');
+
+    if (!matchElement && !this._schemaRegistry.hasElement(elName, this._schemas)) {
+      let errorMsg = `'${elName}' is not a known element:\n`;
+      errorMsg +=
+          `1. If '${elName}' is an Angular component, then verify that it is part of this module.\n`;
+      if (elName.indexOf('-') > -1) {
+        errorMsg +=
+            `2. If '${elName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.`;
+      } else {
+        errorMsg +=
+            `2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`;
+      }
+      this._reportError(errorMsg, element.sourceSpan !);
+    }
+  }
+
+  private _assertNoComponentsNorElementBindingsOnTemplate(
+      directives: t.DirectiveAst[], elementProps: t.BoundElementPropertyAst[],
+      sourceSpan: ParseSourceSpan) {
+    const componentTypeNames: string[] = this._findComponentDirectiveNames(directives);
+    if (componentTypeNames.length > 0) {
+      this._reportError(
+          `Components on an embedded template: ${componentTypeNames.join(',')}`, sourceSpan);
+    }
+    elementProps.forEach(prop => {
+      this._reportError(
+          `Property binding ${prop.name} not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".`,
+          sourceSpan);
+    });
+  }
+
+  private _assertAllEventsPublishedByDirectives(
+      directives: t.DirectiveAst[], events: t.BoundEventAst[]) {
+    const allDirectiveEvents = new Set<string>();
+
+    directives.forEach(directive => {
+      Object.keys(directive.directive.outputs).forEach(k => {
+        const eventName = directive.directive.outputs[k];
+        allDirectiveEvents.add(eventName);
+      });
+    });
+
+    events.forEach(event => {
+      if (event.target != null || !allDirectiveEvents.has(event.name)) {
+        this._reportError(
+            `Event binding ${event.fullName} not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations".`,
+            event.sourceSpan);
+      }
+    });
+  }
+
+  private _checkPropertiesInSchema(elementName: string, boundProps: t.BoundElementPropertyAst[]):
+      t.BoundElementPropertyAst[] {
+    // Note: We can't filter out empty expressions before this method,
+    // as we still want to validate them!
+    return boundProps.filter((boundProp) => {
+      if (boundProp.type === t.PropertyBindingType.Property &&
+          !this._schemaRegistry.hasProperty(elementName, boundProp.name, this._schemas)) {
+        let errorMsg =
+            `Can't bind to '${boundProp.name}' since it isn't a known property of '${elementName}'.`;
+        if (elementName.startsWith('ng-')) {
+          errorMsg +=
+              `\n1. If '${boundProp.name}' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.` +
+              `\n2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`;
+        } else if (elementName.indexOf('-') > -1) {
+          errorMsg +=
+              `\n1. If '${elementName}' is an Angular component and it has '${boundProp.name}' input, then verify that it is part of this module.` +
+              `\n2. If '${elementName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.` +
+              `\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`;
+        }
+        this._reportError(errorMsg, boundProp.sourceSpan);
+      }
+      return !isEmptyExpression(boundProp.value);
+    });
+  }
+
+  private _reportError(
+      message: string, sourceSpan: ParseSourceSpan,
+      level: ParseErrorLevel = ParseErrorLevel.ERROR) {
+    this._targetErrors.push(new ParseError(sourceSpan, message, level));
+  }
+}
+
+class NonBindableVisitor implements html.Visitor {
+  visitElement(ast: html.Element, parent: ElementContext): t.ElementAst|null {
+    const preparsedElement = preparseElement(ast);
+    if (preparsedElement.type === PreparsedElementType.SCRIPT ||
+        preparsedElement.type === PreparsedElementType.STYLE ||
+        preparsedElement.type === PreparsedElementType.STYLESHEET) {
+      // Skipping <script> for security reasons
+      // Skipping <style> and stylesheets as we already processed them
+      // in the StyleCompiler
+      return null;
+    }
+
+    const attrNameAndValues = ast.attrs.map((attr): [string, string] => [attr.name, attr.value]);
+    const selector = createElementCssSelector(ast.name, attrNameAndValues);
+    const ngContentIndex = parent.findNgContentIndex(selector);
+    const children: t.TemplateAst[] = html.visitAll(this, ast.children, EMPTY_ELEMENT_CONTEXT);
+    return new t.ElementAst(
+        ast.name, html.visitAll(this, ast.attrs), [], [], [], [], [], false, [], children,
+        ngContentIndex, ast.sourceSpan, ast.endSourceSpan);
+  }
+  visitComment(comment: html.Comment, context: any): any { return null; }
+
+  visitAttribute(attribute: html.Attribute, context: any): t.AttrAst {
+    return new t.AttrAst(attribute.name, attribute.value, attribute.sourceSpan);
+  }
+
+  visitText(text: html.Text, parent: ElementContext): t.TextAst {
+    const ngContentIndex = parent.findNgContentIndex(TEXT_CSS_SELECTOR) !;
+    return new t.TextAst(text.value, ngContentIndex, text.sourceSpan !);
+  }
+
+  visitExpansion(expansion: html.Expansion, context: any): any { return expansion; }
+
+  visitExpansionCase(expansionCase: html.ExpansionCase, context: any): any { return expansionCase; }
+}
+
+/**
+ * A reference to an element or directive in a template. E.g., the reference in this template:
+ *
+ * <div #myMenu="coolMenu">
+ *
+ * would be {name: 'myMenu', value: 'coolMenu', sourceSpan: ...}
+ */
+class ElementOrDirectiveRef {
+  constructor(public name: string, public value: string, public sourceSpan: ParseSourceSpan) {}
+
+  /** Gets whether this is a reference to the given directive. */
+  isReferenceToDirective(directive: CompileDirectiveSummary) {
+    return splitExportAs(directive.exportAs).indexOf(this.value) !== -1;
+  }
+}
+
+/** Splits a raw, potentially comma-delimited `exportAs` value into an array of names. */
+function splitExportAs(exportAs: string | null): string[] {
+  return exportAs ? exportAs.split(',').map(e => e.trim()) : [];
+}
+
+export function splitClasses(classAttrValue: string): string[] {
+  return classAttrValue.trim().split(/\s+/g);
+}
+
+class ElementContext {
+  static create(
+      isTemplateElement: boolean, directives: t.DirectiveAst[],
+      providerContext: ProviderElementContext): ElementContext {
+    const matcher = new SelectorMatcher();
+    let wildcardNgContentIndex: number = null !;
+    const component = directives.find(directive => directive.directive.isComponent);
+    if (component) {
+      const ngContentSelectors = component.directive.template !.ngContentSelectors;
+      for (let i = 0; i < ngContentSelectors.length; i++) {
+        const selector = ngContentSelectors[i];
+        if (selector === '*') {
+          wildcardNgContentIndex = i;
+        } else {
+          matcher.addSelectables(CssSelector.parse(ngContentSelectors[i]), i);
+        }
+      }
+    }
+    return new ElementContext(isTemplateElement, matcher, wildcardNgContentIndex, providerContext);
+  }
+  constructor(
+      public isTemplateElement: boolean, private _ngContentIndexMatcher: SelectorMatcher,
+      private _wildcardNgContentIndex: number|null,
+      public providerContext: ProviderElementContext|null) {}
+
+  findNgContentIndex(selector: CssSelector): number|null {
+    const ngContentIndices: number[] = [];
+    this._ngContentIndexMatcher.match(
+        selector, (selector, ngContentIndex) => { ngContentIndices.push(ngContentIndex); });
+    ngContentIndices.sort();
+    if (this._wildcardNgContentIndex != null) {
+      ngContentIndices.push(this._wildcardNgContentIndex);
+    }
+    return ngContentIndices.length > 0 ? ngContentIndices[0] : null;
+  }
+}
+
+export function createElementCssSelector(
+    elementName: string, attributes: [string, string][]): CssSelector {
+  const cssSelector = new CssSelector();
+  const elNameNoNs = splitNsName(elementName)[1];
+
+  cssSelector.setElement(elNameNoNs);
+
+  for (let i = 0; i < attributes.length; i++) {
+    const attrName = attributes[i][0];
+    const attrNameNoNs = splitNsName(attrName)[1];
+    const attrValue = attributes[i][1];
+
+    cssSelector.addAttribute(attrNameNoNs, attrValue);
+    if (attrName.toLowerCase() == CLASS_ATTR) {
+      const classes = splitClasses(attrValue);
+      classes.forEach(className => cssSelector.addClassName(className));
+    }
+  }
+  return cssSelector;
+}
+
+const EMPTY_ELEMENT_CONTEXT = new ElementContext(true, new SelectorMatcher(), null, null);
+const NON_BINDABLE_VISITOR = new NonBindableVisitor();
+
+function _isEmptyTextNode(node: html.Node): boolean {
+  return node instanceof html.Text && node.value.trim().length == 0;
+}
+
+export function removeSummaryDuplicates<T extends{type: CompileTypeMetadata}>(items: T[]): T[] {
+  const map = new Map<any, T>();
+
+  items.forEach((item) => {
+    if (!map.get(item.type.reference)) {
+      map.set(item.type.reference, item);
+    }
+  });
+
+  return Array.from(map.values());
+}
+
+function isEmptyExpression(ast: AST): boolean {
+  if (ast instanceof ASTWithSource) {
+    ast = ast.ast;
+  }
+  return ast instanceof EmptyExpr;
+}
\ No newline at end of file
diff --git a/packages/compiler/src/template_parser/template_preparser.ts b/packages/compiler/src/template_parser/template_preparser.ts
new file mode 100644
index 000000000000..d76d53b2314e
--- /dev/null
+++ b/packages/compiler/src/template_parser/template_preparser.ts
@@ -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 * as html from '../ml_parser/ast';
+import {isNgContent} from '../ml_parser/tags';
+
+const NG_CONTENT_SELECT_ATTR = 'select';
+const LINK_ELEMENT = 'link';
+const LINK_STYLE_REL_ATTR = 'rel';
+const LINK_STYLE_HREF_ATTR = 'href';
+const LINK_STYLE_REL_VALUE = 'stylesheet';
+const STYLE_ELEMENT = 'style';
+const SCRIPT_ELEMENT = 'script';
+const NG_NON_BINDABLE_ATTR = 'ngNonBindable';
+const NG_PROJECT_AS = 'ngProjectAs';
+
+export function preparseElement(ast: html.Element): PreparsedElement {
+  let selectAttr: string = null !;
+  let hrefAttr: string = null !;
+  let relAttr: string = null !;
+  let nonBindable = false;
+  let projectAs = '';
+  ast.attrs.forEach(attr => {
+    const lcAttrName = attr.name.toLowerCase();
+    if (lcAttrName == NG_CONTENT_SELECT_ATTR) {
+      selectAttr = attr.value;
+    } else if (lcAttrName == LINK_STYLE_HREF_ATTR) {
+      hrefAttr = attr.value;
+    } else if (lcAttrName == LINK_STYLE_REL_ATTR) {
+      relAttr = attr.value;
+    } else if (attr.name == NG_NON_BINDABLE_ATTR) {
+      nonBindable = true;
+    } else if (attr.name == NG_PROJECT_AS) {
+      if (attr.value.length > 0) {
+        projectAs = attr.value;
+      }
+    }
+  });
+  selectAttr = normalizeNgContentSelect(selectAttr);
+  const nodeName = ast.name.toLowerCase();
+  let type = PreparsedElementType.OTHER;
+  if (isNgContent(nodeName)) {
+    type = PreparsedElementType.NG_CONTENT;
+  } else if (nodeName == STYLE_ELEMENT) {
+    type = PreparsedElementType.STYLE;
+  } else if (nodeName == SCRIPT_ELEMENT) {
+    type = PreparsedElementType.SCRIPT;
+  } else if (nodeName == LINK_ELEMENT && relAttr == LINK_STYLE_REL_VALUE) {
+    type = PreparsedElementType.STYLESHEET;
+  }
+  return new PreparsedElement(type, selectAttr, hrefAttr, nonBindable, projectAs);
+}
+
+export enum PreparsedElementType {
+  NG_CONTENT,
+  STYLE,
+  STYLESHEET,
+  SCRIPT,
+  OTHER
+}
+
+export class PreparsedElement {
+  constructor(
+      public type: PreparsedElementType, public selectAttr: string, public hrefAttr: string,
+      public nonBindable: boolean, public projectAs: string) {}
+}
+
+
+function normalizeNgContentSelect(selectAttr: string): string {
+  if (selectAttr === null || selectAttr.length === 0) {
+    return '*';
+  }
+  return selectAttr;
+}
diff --git a/packages/compiler/src/url_resolver.ts b/packages/compiler/src/url_resolver.ts
new file mode 100644
index 000000000000..3f819309c0c6
--- /dev/null
+++ b/packages/compiler/src/url_resolver.ts
@@ -0,0 +1,339 @@
+/**
+ * @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
+ */
+
+/**
+ * Create a {@link UrlResolver} with no package prefix.
+ */
+export function createUrlResolverWithoutPackagePrefix(): UrlResolver {
+  return new UrlResolver();
+}
+
+export function createOfflineCompileUrlResolver(): UrlResolver {
+  return new UrlResolver('.');
+}
+
+/**
+ * Used by the {@link Compiler} when resolving HTML and CSS template URLs.
+ *
+ * This class can be overridden by the application developer to create custom behavior.
+ *
+ * See {@link Compiler}
+ *
+ * ## Example
+ *
+ * {@example compiler/ts/url_resolver/url_resolver.ts region='url_resolver'}
+ *
+ * @security  When compiling templates at runtime, you must
+ * ensure that the entire template comes from a trusted source.
+ * Attacker-controlled data introduced by a template could expose your
+ * application to XSS risks. For more detail, see the [Security Guide](http://g.co/ng/security).
+ */
+export interface UrlResolver { resolve(baseUrl: string, url: string): string; }
+
+export interface UrlResolverCtor { new (packagePrefix?: string|null): UrlResolver; }
+
+export const UrlResolver: UrlResolverCtor = class UrlResolverImpl {
+  constructor(private _packagePrefix: string|null = null) {}
+
+  /**
+   * Resolves the `url` given the `baseUrl`:
+   * - when the `url` is null, the `baseUrl` is returned,
+   * - if `url` is relative ('path/to/here', './path/to/here'), the resolved url is a combination of
+   * `baseUrl` and `url`,
+   * - if `url` is absolute (it has a scheme: 'http://', 'https://' or start with '/'), the `url` is
+   * returned as is (ignoring the `baseUrl`)
+   */
+  resolve(baseUrl: string, url: string): string {
+    let resolvedUrl = url;
+    if (baseUrl != null && baseUrl.length > 0) {
+      resolvedUrl = _resolveUrl(baseUrl, resolvedUrl);
+    }
+    const resolvedParts = _split(resolvedUrl);
+    let prefix = this._packagePrefix;
+    if (prefix != null && resolvedParts != null &&
+        resolvedParts[_ComponentIndex.Scheme] == 'package') {
+      let path = resolvedParts[_ComponentIndex.Path];
+      prefix = prefix.replace(/\/+$/, '');
+      path = path.replace(/^\/+/, '');
+      return `${prefix}/${path}`;
+    }
+    return resolvedUrl;
+  }
+};
+
+/**
+ * Extract the scheme of a URL.
+ */
+export function getUrlScheme(url: string): string {
+  const match = _split(url);
+  return (match && match[_ComponentIndex.Scheme]) || '';
+}
+
+// The code below is adapted from Traceur:
+// https://github.com/google/traceur-compiler/blob/9511c1dafa972bf0de1202a8a863bad02f0f95a8/src/runtime/url.js
+
+/**
+ * Builds a URI string from already-encoded parts.
+ *
+ * No encoding is performed.  Any component may be omitted as either null or
+ * undefined.
+ *
+ * @param opt_scheme The scheme such as 'http'.
+ * @param opt_userInfo The user name before the '@'.
+ * @param opt_domain The domain such as 'www.google.com', already
+ *     URI-encoded.
+ * @param opt_port The port number.
+ * @param opt_path The path, already URI-encoded.  If it is not
+ *     empty, it must begin with a slash.
+ * @param opt_queryData The URI-encoded query data.
+ * @param opt_fragment The URI-encoded fragment identifier.
+ * @return The fully combined URI.
+ */
+function _buildFromEncodedParts(
+    opt_scheme?: string, opt_userInfo?: string, opt_domain?: string, opt_port?: string,
+    opt_path?: string, opt_queryData?: string, opt_fragment?: string): string {
+  const out: string[] = [];
+
+  if (opt_scheme != null) {
+    out.push(opt_scheme + ':');
+  }
+
+  if (opt_domain != null) {
+    out.push('//');
+
+    if (opt_userInfo != null) {
+      out.push(opt_userInfo + '@');
+    }
+
+    out.push(opt_domain);
+
+    if (opt_port != null) {
+      out.push(':' + opt_port);
+    }
+  }
+
+  if (opt_path != null) {
+    out.push(opt_path);
+  }
+
+  if (opt_queryData != null) {
+    out.push('?' + opt_queryData);
+  }
+
+  if (opt_fragment != null) {
+    out.push('#' + opt_fragment);
+  }
+
+  return out.join('');
+}
+
+/**
+ * A regular expression for breaking a URI into its component parts.
+ *
+ * {@link http://www.gbiv.com/protocols/uri/rfc/rfc3986.html#RFC2234} says
+ * As the "first-match-wins" algorithm is identical to the "greedy"
+ * disambiguation method used by POSIX regular expressions, it is natural and
+ * commonplace to use a regular expression for parsing the potential five
+ * components of a URI reference.
+ *
+ * The following line is the regular expression for breaking-down a
+ * well-formed URI reference into its components.
+ *
+ * <pre>
+ * ^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
+ *  12            3  4          5       6  7        8 9
+ * </pre>
+ *
+ * The numbers in the second line above are only to assist readability; they
+ * indicate the reference points for each subexpression (i.e., each paired
+ * parenthesis). We refer to the value matched for subexpression <n> as $<n>.
+ * For example, matching the above expression to
+ * <pre>
+ *     http://www.ics.uci.edu/pub/ietf/uri/#Related
+ * </pre>
+ * results in the following subexpression matches:
+ * <pre>
+ *    $1 = http:
+ *    $2 = http
+ *    $3 = //www.ics.uci.edu
+ *    $4 = www.ics.uci.edu
+ *    $5 = /pub/ietf/uri/
+ *    $6 = <undefined>
+ *    $7 = <undefined>
+ *    $8 = #Related
+ *    $9 = Related
+ * </pre>
+ * where <undefined> indicates that the component is not present, as is the
+ * case for the query component in the above example. Therefore, we can
+ * determine the value of the five components as
+ * <pre>
+ *    scheme    = $2
+ *    authority = $4
+ *    path      = $5
+ *    query     = $7
+ *    fragment  = $9
+ * </pre>
+ *
+ * The regular expression has been modified slightly to expose the
+ * userInfo, domain, and port separately from the authority.
+ * The modified version yields
+ * <pre>
+ *    $1 = http              scheme
+ *    $2 = <undefined>       userInfo -\
+ *    $3 = www.ics.uci.edu   domain     | authority
+ *    $4 = <undefined>       port     -/
+ *    $5 = /pub/ietf/uri/    path
+ *    $6 = <undefined>       query without ?
+ *    $7 = Related           fragment without #
+ * </pre>
+ * @internal
+ */
+const _splitRe = new RegExp(
+    '^' +
+    '(?:' +
+    '([^:/?#.]+)' +  // scheme - ignore special characters
+                     // used by other URL parts such as :,
+                     // ?, /, #, and .
+    ':)?' +
+    '(?://' +
+    '(?:([^/?#]*)@)?' +                  // userInfo
+    '([\\w\\d\\-\\u0100-\\uffff.%]*)' +  // domain - restrict to letters,
+                                         // digits, dashes, dots, percent
+                                         // escapes, and unicode characters.
+    '(?::([0-9]+))?' +                   // port
+    ')?' +
+    '([^?#]+)?' +        // path
+    '(?:\\?([^#]*))?' +  // query
+    '(?:#(.*))?' +       // fragment
+    '$');
+
+/**
+ * The index of each URI component in the return value of goog.uri.utils.split.
+ * @enum {number}
+ */
+enum _ComponentIndex {
+  Scheme = 1,
+  UserInfo,
+  Domain,
+  Port,
+  Path,
+  QueryData,
+  Fragment
+}
+
+/**
+ * Splits a URI into its component parts.
+ *
+ * Each component can be accessed via the component indices; for example:
+ * <pre>
+ * goog.uri.utils.split(someStr)[goog.uri.utils.CompontentIndex.QUERY_DATA];
+ * </pre>
+ *
+ * @param uri The URI string to examine.
+ * @return Each component still URI-encoded.
+ *     Each component that is present will contain the encoded value, whereas
+ *     components that are not present will be undefined or empty, depending
+ *     on the browser's regular expression implementation.  Never null, since
+ *     arbitrary strings may still look like path names.
+ */
+function _split(uri: string): Array<string|any> {
+  return uri.match(_splitRe) !;
+}
+
+/**
+  * Removes dot segments in given path component, as described in
+  * RFC 3986, section 5.2.4.
+  *
+  * @param path A non-empty path component.
+  * @return Path component with removed dot segments.
+  */
+function _removeDotSegments(path: string): string {
+  if (path == '/') return '/';
+
+  const leadingSlash = path[0] == '/' ? '/' : '';
+  const trailingSlash = path[path.length - 1] === '/' ? '/' : '';
+  const segments = path.split('/');
+
+  const out: string[] = [];
+  let up = 0;
+  for (let pos = 0; pos < segments.length; pos++) {
+    const segment = segments[pos];
+    switch (segment) {
+      case '':
+      case '.':
+        break;
+      case '..':
+        if (out.length > 0) {
+          out.pop();
+        } else {
+          up++;
+        }
+        break;
+      default:
+        out.push(segment);
+    }
+  }
+
+  if (leadingSlash == '') {
+    while (up-- > 0) {
+      out.unshift('..');
+    }
+
+    if (out.length === 0) out.push('.');
+  }
+
+  return leadingSlash + out.join('/') + trailingSlash;
+}
+
+/**
+ * Takes an array of the parts from split and canonicalizes the path part
+ * and then joins all the parts.
+ */
+function _joinAndCanonicalizePath(parts: any[]): string {
+  let path = parts[_ComponentIndex.Path];
+  path = path == null ? '' : _removeDotSegments(path);
+  parts[_ComponentIndex.Path] = path;
+
+  return _buildFromEncodedParts(
+      parts[_ComponentIndex.Scheme], parts[_ComponentIndex.UserInfo], parts[_ComponentIndex.Domain],
+      parts[_ComponentIndex.Port], path, parts[_ComponentIndex.QueryData],
+      parts[_ComponentIndex.Fragment]);
+}
+
+/**
+ * Resolves a URL.
+ * @param base The URL acting as the base URL.
+ * @param to The URL to resolve.
+ */
+function _resolveUrl(base: string, url: string): string {
+  const parts = _split(encodeURI(url));
+  const baseParts = _split(base);
+
+  if (parts[_ComponentIndex.Scheme] != null) {
+    return _joinAndCanonicalizePath(parts);
+  } else {
+    parts[_ComponentIndex.Scheme] = baseParts[_ComponentIndex.Scheme];
+  }
+
+  for (let i = _ComponentIndex.Scheme; i <= _ComponentIndex.Port; i++) {
+    if (parts[i] == null) {
+      parts[i] = baseParts[i];
+    }
+  }
+
+  if (parts[_ComponentIndex.Path][0] == '/') {
+    return _joinAndCanonicalizePath(parts);
+  }
+
+  let path = baseParts[_ComponentIndex.Path];
+  if (path == null) path = '/';
+  const index = path.lastIndexOf('/');
+  path = path.substring(0, index + 1) + parts[_ComponentIndex.Path];
+  parts[_ComponentIndex.Path] = path;
+  return _joinAndCanonicalizePath(parts);
+}
diff --git a/packages/compiler/src/util.ts b/packages/compiler/src/util.ts
new file mode 100644
index 000000000000..cb167e14fe37
--- /dev/null
+++ b/packages/compiler/src/util.ts
@@ -0,0 +1,235 @@
+/**
+ * @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 {ConstantPool} from './constant_pool';
+
+import * as o from './output/output_ast';
+import {ParseError} from './parse_util';
+
+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 splitAtColon(input: string, defaultValues: string[]): string[] {
+  return _splitAt(input, ':', defaultValues);
+}
+
+export function splitAtPeriod(input: string, defaultValues: string[]): string[] {
+  return _splitAt(input, '.', defaultValues);
+}
+
+function _splitAt(input: string, character: string, defaultValues: string[]): string[] {
+  const characterIndex = input.indexOf(character);
+  if (characterIndex == -1) return defaultValues;
+  return [input.slice(0, characterIndex).trim(), input.slice(characterIndex + 1).trim()];
+}
+
+export function visitValue(value: any, visitor: ValueVisitor, context: any): any {
+  if (Array.isArray(value)) {
+    return visitor.visitArray(<any[]>value, context);
+  }
+
+  if (isStrictStringMap(value)) {
+    return visitor.visitStringMap(<{[key: string]: any}>value, context);
+  }
+
+  if (value == null || typeof value == 'string' || typeof value == 'number' ||
+      typeof value == 'boolean') {
+    return visitor.visitPrimitive(value, context);
+  }
+
+  return visitor.visitOther(value, context);
+}
+
+export function isDefined(val: any): boolean {
+  return val !== null && val !== undefined;
+}
+
+export function noUndefined<T>(val: T | undefined): T {
+  return val === undefined ? null ! : val;
+}
+
+export interface ValueVisitor {
+  visitArray(arr: any[], context: any): any;
+  visitStringMap(map: {[key: string]: any}, context: any): any;
+  visitPrimitive(value: any, context: any): any;
+  visitOther(value: any, context: any): any;
+}
+
+export class ValueTransformer implements ValueVisitor {
+  visitArray(arr: any[], context: any): any {
+    return arr.map(value => visitValue(value, this, context));
+  }
+  visitStringMap(map: {[key: string]: any}, context: any): any {
+    const result: {[key: string]: any} = {};
+    Object.keys(map).forEach(key => { result[key] = visitValue(map[key], this, context); });
+    return result;
+  }
+  visitPrimitive(value: any, context: any): any { return value; }
+  visitOther(value: any, context: any): any { return value; }
+}
+
+export type SyncAsync<T> = T | Promise<T>;
+
+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 error(msg: string): never {
+  throw new Error(`Internal Error: ${msg}`);
+}
+
+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] || [];
+}
+
+// Escape characters that have a special meaning in Regular Expressions
+export function escapeRegExp(s: string): string {
+  return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
+}
+
+const STRING_MAP_PROTO = Object.getPrototypeOf({});
+function isStrictStringMap(obj: any): boolean {
+  return typeof obj === 'object' && obj !== null && Object.getPrototypeOf(obj) === STRING_MAP_PROTO;
+}
+
+export function utf8Encode(str: string): string {
+  let encoded = '';
+  for (let index = 0; index < str.length; index++) {
+    let codePoint = str.charCodeAt(index);
+
+    // decode surrogate
+    // see https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+    if (codePoint >= 0xd800 && codePoint <= 0xdbff && str.length > (index + 1)) {
+      const low = str.charCodeAt(index + 1);
+      if (low >= 0xdc00 && low <= 0xdfff) {
+        index++;
+        codePoint = ((codePoint - 0xd800) << 10) + low - 0xdc00 + 0x10000;
+      }
+    }
+
+    if (codePoint <= 0x7f) {
+      encoded += String.fromCharCode(codePoint);
+    } else if (codePoint <= 0x7ff) {
+      encoded += String.fromCharCode(((codePoint >> 6) & 0x1F) | 0xc0, (codePoint & 0x3f) | 0x80);
+    } else if (codePoint <= 0xffff) {
+      encoded += String.fromCharCode(
+          (codePoint >> 12) | 0xe0, ((codePoint >> 6) & 0x3f) | 0x80, (codePoint & 0x3f) | 0x80);
+    } else if (codePoint <= 0x1fffff) {
+      encoded += String.fromCharCode(
+          ((codePoint >> 18) & 0x07) | 0xf0, ((codePoint >> 12) & 0x3f) | 0x80,
+          ((codePoint >> 6) & 0x3f) | 0x80, (codePoint & 0x3f) | 0x80);
+    }
+  }
+
+  return encoded;
+}
+
+export interface OutputContext {
+  genFilePath: string;
+  statements: o.Statement[];
+  constantPool: ConstantPool;
+  importExpr(reference: any, typeParams?: o.Type[]|null, useSummaries?: boolean): o.Expression;
+}
+
+export function stringify(token: any): string {
+  if (typeof token === 'string') {
+    return token;
+  }
+
+  if (token instanceof Array) {
+    return '[' + token.map(stringify).join(', ') + ']';
+  }
+
+  if (token == null) {
+    return '' + token;
+  }
+
+  if (token.overriddenName) {
+    return `${token.overriddenName}`;
+  }
+
+  if (token.name) {
+    return `${token.name}`;
+  }
+
+  // WARNING: do not try to `JSON.stringify(token)` here
+  // see https://github.com/angular/angular/issues/23440
+  const res = token.toString();
+
+  if (res == null) {
+    return '' + res;
+  }
+
+  const newLineIndex = res.indexOf('\n');
+  return newLineIndex === -1 ? res : res.substring(0, newLineIndex);
+}
+
+/**
+ * Lazily retrieves the reference value from a forwardRef.
+ */
+export function resolveForwardRef(type: any): any {
+  if (typeof type === 'function' && type.hasOwnProperty('__forward_ref__')) {
+    return type();
+  } else {
+    return type;
+  }
+}
+
+/**
+ * Determine if the argument is shaped like a Promise
+ */
+export function isPromise(obj: any): obj is Promise<any> {
+  // allow any Promise/A+ compliant thenable.
+  // It's up to the caller to ensure that obj.then conforms to the spec
+  return !!obj && typeof obj.then === 'function';
+}
+
+export class Version {
+  public readonly major: string;
+  public readonly minor: string;
+  public readonly patch: string;
+
+  constructor(public full: string) {
+    const splits = full.split('.');
+    this.major = splits[0];
+    this.minor = splits[1];
+    this.patch = splits.slice(2).join('.');
+  }
+}
+
+export interface Console {
+  log(message: string): void;
+  warn(message: string): void;
+}
diff --git a/packages/compiler/src/version.ts b/packages/compiler/src/version.ts
new file mode 100644
index 000000000000..16aee9de05e3
--- /dev/null
+++ b/packages/compiler/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from './util';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
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 000000000000..baa833cd53b0
--- /dev/null
+++ b/packages/compiler/src/view_compiler/provider_compiler.ts
@@ -0,0 +1,208 @@
+/**
+ * @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 {CompileDiDependencyMetadata, CompileEntryComponentMetadata, CompileProviderMetadata, CompileTokenMetadata} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
+import {DepFlags, NodeFlags} from '../core';
+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;
+  }
+  if (providerAst.isModule) {
+    flags |= NodeFlags.TypeModuleProvider;
+  }
+  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, 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.isSelf) {
+    flags |= DepFlags.Self;
+  }
+  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/type_check_compiler.ts b/packages/compiler/src/view_compiler/type_check_compiler.ts
new file mode 100644
index 000000000000..8d5bfeb6a7e3
--- /dev/null
+++ b/packages/compiler/src/view_compiler/type_check_compiler.ts
@@ -0,0 +1,363 @@
+/**
+ * @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} from '../aot/compiler_options';
+import {StaticReflector} from '../aot/static_reflector';
+import {StaticSymbol} from '../aot/static_symbol';
+import {CompileDiDependencyMetadata, CompileDirectiveMetadata, CompilePipeSummary} from '../compile_metadata';
+import {BindingForm, BuiltinConverter, EventHandlerVars, LocalResolver, convertActionBinding, convertPropertyBinding, convertPropertyBindingBuiltins} from '../compiler_util/expression_converter';
+import {AST, ASTWithSource, Interpolation} from '../expression_parser/ast';
+import {Identifiers} from '../identifiers';
+import * as o from '../output/output_ast';
+import {convertValueToOutputAst} from '../output/value_util';
+import {ParseSourceSpan} from '../parse_util';
+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';
+
+
+/**
+ * Generates code that is used to type check templates.
+ */
+export class TypeCheckCompiler {
+  constructor(private options: AotCompilerOptions, private reflector: StaticReflector) {}
+
+  /**
+   * Important notes:
+   * - This must not produce new `import` statements, but only refer to types outside
+   *   of the file via the variables provided via externalReferenceVars.
+   *   This allows Typescript to reuse the old program's structure as no imports have changed.
+   * - This must not produce any exports, as this would pollute the .d.ts file
+   *   and also violate the point above.
+   */
+  compileComponent(
+      componentId: string, component: CompileDirectiveMetadata, template: TemplateAst[],
+      usedPipes: CompilePipeSummary[], externalReferenceVars: Map<StaticSymbol, string>,
+      ctx: OutputContext): o.Statement[] {
+    const pipes = new Map<string, StaticSymbol>();
+    usedPipes.forEach(p => pipes.set(p.name, p.type.reference));
+    let embeddedViewCount = 0;
+    const viewBuilderFactory =
+        (parent: ViewBuilder | null, guards: GuardExpression[]): ViewBuilder => {
+          const embeddedViewIndex = embeddedViewCount++;
+          return new ViewBuilder(
+              this.options, this.reflector, externalReferenceVars, parent, component.type.reference,
+              component.isHost, embeddedViewIndex, pipes, guards, ctx, viewBuilderFactory);
+        };
+
+    const visitor = viewBuilderFactory(null, []);
+    visitor.visitAll([], template);
+
+    return visitor.build(componentId);
+  }
+}
+
+interface GuardExpression {
+  guard: StaticSymbol;
+  useIf: boolean;
+  expression: Expression;
+}
+
+interface ViewBuilderFactory {
+  (parent: ViewBuilder, guards: GuardExpression[]): ViewBuilder;
+}
+
+// Note: This is used as key in Map and should therefore be
+// unique per value.
+type OutputVarType = o.BuiltinTypeName | StaticSymbol;
+
+interface Expression {
+  context: OutputVarType;
+  sourceSpan: ParseSourceSpan;
+  value: AST;
+}
+
+const DYNAMIC_VAR_NAME = '_any';
+
+class TypeCheckLocalResolver implements LocalResolver {
+  getLocal(name: string): o.Expression|null {
+    if (name === EventHandlerVars.event.name) {
+      // References to the event should not be type-checked.
+      // TODO(chuckj): determine a better type for the event.
+      return o.variable(DYNAMIC_VAR_NAME);
+    }
+    return null;
+  }
+}
+
+const defaultResolver = new TypeCheckLocalResolver();
+
+class ViewBuilder implements TemplateAstVisitor, LocalResolver {
+  private refOutputVars = new Map<string, OutputVarType>();
+  private variables: VariableAst[] = [];
+  private children: ViewBuilder[] = [];
+  private updates: Expression[] = [];
+  private actions: Expression[] = [];
+
+  constructor(
+      private options: AotCompilerOptions, private reflector: StaticReflector,
+      private externalReferenceVars: Map<StaticSymbol, string>, private parent: ViewBuilder|null,
+      private component: StaticSymbol, private isHostComponent: boolean,
+      private embeddedViewIndex: number, private pipes: Map<string, StaticSymbol>,
+      private guards: GuardExpression[], private ctx: OutputContext,
+      private viewBuilderFactory: ViewBuilderFactory) {}
+
+  private getOutputVar(type: o.BuiltinTypeName|StaticSymbol): string {
+    let varName: string|undefined;
+    if (type === this.component && this.isHostComponent) {
+      varName = DYNAMIC_VAR_NAME;
+    } else if (type instanceof StaticSymbol) {
+      varName = this.externalReferenceVars.get(type);
+    } else {
+      varName = DYNAMIC_VAR_NAME;
+    }
+    if (!varName) {
+      throw new Error(
+          `Illegal State: referring to a type without a variable ${JSON.stringify(type)}`);
+    }
+    return varName;
+  }
+
+  private getTypeGuardExpressions(ast: EmbeddedTemplateAst): GuardExpression[] {
+    const result = [...this.guards];
+    for (let directive of ast.directives) {
+      for (let input of directive.inputs) {
+        const guard = directive.directive.guards[input.directiveName];
+        if (guard) {
+          const useIf = guard === 'UseIf';
+          result.push({
+            guard,
+            useIf,
+            expression: {context: this.component, value: input.value} as Expression
+          });
+        }
+      }
+    }
+    return result;
+  }
+
+  visitAll(variables: VariableAst[], astNodes: TemplateAst[]) {
+    this.variables = variables;
+    templateVisitAll(this, astNodes);
+  }
+
+  build(componentId: string, targetStatements: o.Statement[] = []): o.Statement[] {
+    this.children.forEach((child) => child.build(componentId, targetStatements));
+    let viewStmts: o.Statement[] =
+        [o.variable(DYNAMIC_VAR_NAME).set(o.NULL_EXPR).toDeclStmt(o.DYNAMIC_TYPE)];
+    let bindingCount = 0;
+    this.updates.forEach((expression) => {
+      const {sourceSpan, context, value} = this.preprocessUpdateExpression(expression);
+      const bindingId = `${bindingCount++}`;
+      const nameResolver = context === this.component ? this : defaultResolver;
+      const {stmts, currValExpr} = convertPropertyBinding(
+          nameResolver, o.variable(this.getOutputVar(context)), value, bindingId,
+          BindingForm.General);
+      stmts.push(new o.ExpressionStatement(currValExpr));
+      viewStmts.push(...stmts.map(
+          (stmt: o.Statement) => o.applySourceSpanToStatementIfNeeded(stmt, sourceSpan)));
+    });
+
+    this.actions.forEach(({sourceSpan, context, value}) => {
+      const bindingId = `${bindingCount++}`;
+      const nameResolver = context === this.component ? this : defaultResolver;
+      const {stmts} = convertActionBinding(
+          nameResolver, o.variable(this.getOutputVar(context)), value, bindingId);
+      viewStmts.push(...stmts.map(
+          (stmt: o.Statement) => o.applySourceSpanToStatementIfNeeded(stmt, sourceSpan)));
+    });
+
+    if (this.guards.length) {
+      let guardExpression: o.Expression|undefined = undefined;
+      for (const guard of this.guards) {
+        const {context, value} = this.preprocessUpdateExpression(guard.expression);
+        const bindingId = `${bindingCount++}`;
+        const nameResolver = context === this.component ? this : defaultResolver;
+        // We only support support simple expressions and ignore others as they
+        // are unlikely to affect type narrowing.
+        const {stmts, currValExpr} = convertPropertyBinding(
+            nameResolver, o.variable(this.getOutputVar(context)), value, bindingId,
+            BindingForm.TrySimple);
+        if (stmts.length == 0) {
+          const guardClause =
+              guard.useIf ? currValExpr : this.ctx.importExpr(guard.guard).callFn([currValExpr]);
+          guardExpression = guardExpression ? guardExpression.and(guardClause) : guardClause;
+        }
+      }
+      if (guardExpression) {
+        viewStmts = [new o.IfStmt(guardExpression, viewStmts)];
+      }
+    }
+
+    const viewName = `_View_${componentId}_${this.embeddedViewIndex}`;
+    const viewFactory = new o.DeclareFunctionStmt(viewName, [], viewStmts);
+    targetStatements.push(viewFactory);
+    return targetStatements;
+  }
+
+  visitBoundText(ast: BoundTextAst, context: any): any {
+    const astWithSource = <ASTWithSource>ast.value;
+    const inter = <Interpolation>astWithSource.ast;
+
+    inter.expressions.forEach(
+        (expr) =>
+            this.updates.push({context: this.component, value: expr, sourceSpan: ast.sourceSpan}));
+  }
+
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
+    this.visitElementOrTemplate(ast);
+    // Note: The old view compiler used to use an `any` type
+    // for the context in any embedded view.
+    // We keep this behaivor behind a flag for now.
+    if (this.options.fullTemplateTypeCheck) {
+      // Find any applicable type guards. For example, NgIf has a type guard on ngIf
+      // (see NgIf.ngIfTypeGuard) that can be used to indicate that a template is only
+      // stamped out if ngIf is truthy so any bindings in the template can assume that,
+      // if a nullable type is used for ngIf, that expression is not null or undefined.
+      const guards = this.getTypeGuardExpressions(ast);
+      const childVisitor = this.viewBuilderFactory(this, guards);
+      this.children.push(childVisitor);
+      childVisitor.visitAll(ast.variables, ast.children);
+    }
+  }
+
+  visitElement(ast: ElementAst, context: any): any {
+    this.visitElementOrTemplate(ast);
+
+    let inputDefs: o.Expression[] = [];
+    let updateRendererExpressions: Expression[] = [];
+    let outputDefs: o.Expression[] = [];
+    ast.inputs.forEach((inputAst) => {
+      this.updates.push(
+          {context: this.component, value: inputAst.value, sourceSpan: inputAst.sourceSpan});
+    });
+
+    templateVisitAll(this, ast.children);
+  }
+
+  private visitElementOrTemplate(ast: {
+    outputs: BoundEventAst[],
+    directives: DirectiveAst[],
+    references: ReferenceAst[],
+  }) {
+    ast.directives.forEach((dirAst) => { this.visitDirective(dirAst); });
+
+    ast.references.forEach((ref) => {
+      let outputVarType: OutputVarType = null !;
+      // Note: The old view compiler used to use an `any` type
+      // for directives exposed via `exportAs`.
+      // We keep this behaivor behind a flag for now.
+      if (ref.value && ref.value.identifier && this.options.fullTemplateTypeCheck) {
+        outputVarType = ref.value.identifier.reference;
+      } else {
+        outputVarType = o.BuiltinTypeName.Dynamic;
+      }
+      this.refOutputVars.set(ref.name, outputVarType);
+    });
+    ast.outputs.forEach((outputAst) => {
+      this.actions.push(
+          {context: this.component, value: outputAst.handler, sourceSpan: outputAst.sourceSpan});
+    });
+  }
+
+  visitDirective(dirAst: DirectiveAst) {
+    const dirType = dirAst.directive.type.reference;
+    dirAst.inputs.forEach(
+        (input) => this.updates.push(
+            {context: this.component, value: input.value, sourceSpan: input.sourceSpan}));
+    // Note: The old view compiler used to use an `any` type
+    // for expressions in host properties / events.
+    // We keep this behaivor behind a flag for now.
+    if (this.options.fullTemplateTypeCheck) {
+      dirAst.hostProperties.forEach(
+          (inputAst) => this.updates.push(
+              {context: dirType, value: inputAst.value, sourceSpan: inputAst.sourceSpan}));
+      dirAst.hostEvents.forEach((hostEventAst) => this.actions.push({
+        context: dirType,
+        value: hostEventAst.handler,
+        sourceSpan: hostEventAst.sourceSpan
+      }));
+    }
+  }
+
+  getLocal(name: string): o.Expression|null {
+    if (name == EventHandlerVars.event.name) {
+      return o.variable(this.getOutputVar(o.BuiltinTypeName.Dynamic));
+    }
+    for (let currBuilder: ViewBuilder|null = this; currBuilder; currBuilder = currBuilder.parent) {
+      let outputVarType: OutputVarType|undefined;
+      // check references
+      outputVarType = currBuilder.refOutputVars.get(name);
+      if (outputVarType == null) {
+        // check variables
+        const varAst = currBuilder.variables.find((varAst) => varAst.name === name);
+        if (varAst) {
+          outputVarType = o.BuiltinTypeName.Dynamic;
+        }
+      }
+      if (outputVarType != null) {
+        return o.variable(this.getOutputVar(outputVarType));
+      }
+    }
+    return null;
+  }
+
+  private pipeOutputVar(name: string): string {
+    const pipe = this.pipes.get(name);
+    if (!pipe) {
+      throw new Error(
+          `Illegal State: Could not find pipe ${name} in template of ${this.component}`);
+    }
+    return this.getOutputVar(pipe);
+  }
+
+  private preprocessUpdateExpression(expression: Expression): Expression {
+    return {
+      sourceSpan: expression.sourceSpan,
+      context: expression.context,
+      value: convertPropertyBindingBuiltins(
+          {
+            createLiteralArrayConverter: (argCount: number) => (args: o.Expression[]) => {
+              const arr = o.literalArr(args);
+              // Note: The old view compiler used to use an `any` type
+              // for arrays.
+              return this.options.fullTemplateTypeCheck ? arr : arr.cast(o.DYNAMIC_TYPE);
+            },
+            createLiteralMapConverter:
+                (keys: {key: string, quoted: boolean}[]) => (values: o.Expression[]) => {
+                  const entries = keys.map((k, i) => ({
+                                             key: k.key,
+                                             value: values[i],
+                                             quoted: k.quoted,
+                                           }));
+                  const map = o.literalMap(entries);
+                  // Note: The old view compiler used to use an `any` type
+                  // for maps.
+                  return this.options.fullTemplateTypeCheck ? map : map.cast(o.DYNAMIC_TYPE);
+                },
+            createPipeConverter: (name: string, argCount: number) => (args: o.Expression[]) => {
+              // Note: The old view compiler used to use an `any` type
+              // for pipes.
+              const pipeExpr = this.options.fullTemplateTypeCheck ?
+                  o.variable(this.pipeOutputVar(name)) :
+                  o.variable(this.getOutputVar(o.BuiltinTypeName.Dynamic));
+              return pipeExpr.callMethod('transform', args);
+            },
+          },
+          expression.value)
+    };
+  }
+
+  visitNgContent(ast: NgContentAst, context: any): any {}
+  visitText(ast: TextAst, context: any): any {}
+  visitDirectiveProperty(ast: BoundDirectivePropertyAst, 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 {}
+}
diff --git a/packages/compiler/src/view_compiler/view_compiler.ts b/packages/compiler/src/view_compiler/view_compiler.ts
new file mode 100644
index 000000000000..3fbe01806feb
--- /dev/null
+++ b/packages/compiler/src/view_compiler/view_compiler.ts
@@ -0,0 +1,1098 @@
+/**
+ * @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 {CompileDirectiveMetadata, CompilePipeSummary, rendererTypeName, tokenReference, viewClassName} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
+import {BindingForm, BuiltinConverter, EventHandlerVars, LocalResolver, convertActionBinding, convertPropertyBinding, convertPropertyBindingBuiltins} from '../compiler_util/expression_converter';
+import {ArgumentType, BindingFlags, ChangeDetectionStrategy, NodeFlags, QueryBindingType, QueryValueType, ViewFlags} from '../core';
+import {AST, ASTWithSource, Interpolation} from '../expression_parser/ast';
+import {Identifiers} from '../identifiers';
+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 {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, PropertyBindingType, ProviderAst, 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';
+const IMPLICIT_TEMPLATE_VAR = '\$implicit';
+
+export class ViewCompileResult {
+  constructor(public viewClassVar: string, public rendererTypeVar: string) {}
+}
+
+export class ViewCompiler {
+  constructor(private _reflector: CompileReflector) {}
+
+  compileComponent(
+      outputCtx: OutputContext, component: CompileDirectiveMetadata, template: TemplateAst[],
+      styles: o.Expression, usedPipes: CompilePipeSummary[]): ViewCompileResult {
+    let embeddedViewCount = 0;
+    const staticQueryIds = findStaticQueryIds(template);
+
+    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(outputCtx, template.animations), true));
+      }
+
+      const renderComponentVar = o.variable(rendererTypeName(component.type.reference));
+      renderComponentVarName = renderComponentVar.name !;
+      outputCtx.statements.push(
+          renderComponentVar
+              .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(Identifiers.RendererType2),
+                  [o.StmtModifier.Final, o.StmtModifier.Exported]));
+    }
+
+    const viewBuilderFactory = (parent: ViewBuilder | null): ViewBuilder => {
+      const embeddedViewIndex = embeddedViewCount++;
+      return new ViewBuilder(
+          this._reflector, outputCtx, parent, component, embeddedViewIndex, usedPipes,
+          staticQueryIds, viewBuilderFactory);
+    };
+
+    const visitor = viewBuilderFactory(null);
+    visitor.visitAll([], template);
+
+    outputCtx.statements.push(...visitor.build());
+
+    return new ViewCompileResult(visitor.viewName, renderComponentVarName);
+  }
+}
+
+interface ViewBuilderFactory {
+  (parent: ViewBuilder): ViewBuilder;
+}
+
+interface UpdateExpression {
+  context: o.Expression;
+  nodeIndex: number;
+  bindingIndex: number;
+  sourceSpan: ParseSourceSpan;
+  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 EVENT_NAME_VAR = o.variable('en');
+const ALLOW_DEFAULT_VAR = o.variable(`ad`);
+
+class ViewBuilder implements TemplateAstVisitor, LocalResolver {
+  private compType: o.Type;
+  private nodes: (() => {
+    sourceSpan: ParseSourceSpan | null,
+    nodeDef: o.Expression,
+    nodeFlags: NodeFlags, updateDirectives?: UpdateExpression[], updateRenderer?: UpdateExpression[]
+  })[] = [];
+  private purePipeNodeIndices: {[pipeName: string]: number} = Object.create(null);
+  // Need Object.create so that we don't have builtin values...
+  private refNodeIndices: {[refName: string]: number} = Object.create(null);
+  private variables: VariableAst[] = [];
+  private children: ViewBuilder[] = [];
+
+  public readonly viewName: string;
+
+  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>,
+      private viewBuilderFactory: ViewBuilderFactory) {
+    // 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.expressionType(outputCtx.importExpr(this.component.type.reference)) !;
+    this.viewName = viewClassName(this.component.type.reference, this.embeddedViewIndex);
+  }
+
+  visitAll(variables: VariableAst[], astNodes: TemplateAst[]) {
+    this.variables = variables;
+    // create the pipes for the pure pipes immediately, so that we know their indices.
+    if (!this.parent) {
+      this.usedPipes.forEach((pipe) => {
+        if (pipe.pure) {
+          this.purePipeNodeIndices[pipe.name] = this._createPipe(null, pipe);
+        }
+      });
+    }
+
+    if (!this.parent) {
+      const queryIds = staticViewQueryIds(this.staticQueryIds);
+      this.component.viewQueries.forEach((query, queryIndex) => {
+        // Note: queries start with id 1 so we can use the number in a Bloom filter!
+        const queryId = queryIndex + 1;
+        const bindingType = query.first ? QueryBindingType.First : QueryBindingType.All;
+        const flags =
+            NodeFlags.TypeViewQuery | calcStaticDynamicQueryFlags(queryIds, queryId, query.first);
+        this.nodes.push(() => ({
+                          sourceSpan: null,
+                          nodeFlags: flags,
+                          nodeDef: o.importExpr(Identifiers.queryDef).callFn([
+                            o.literal(flags), o.literal(queryId),
+                            new o.LiteralMapExpr([new o.LiteralMapEntry(
+                                query.propertyName, o.literal(bindingType), false)])
+                          ])
+                        }));
+      });
+    }
+    templateVisitAll(this, astNodes);
+    if (this.parent && (astNodes.length === 0 || needsAdditionalRootNode(astNodes))) {
+      // if the view is an embedded view, then we need to add an additional root node in some cases
+      this.nodes.push(() => ({
+                        sourceSpan: null,
+                        nodeFlags: NodeFlags.TypeElement,
+                        nodeDef: o.importExpr(Identifiers.anchorDef).callFn([
+                          o.literal(NodeFlags.None), o.NULL_EXPR, o.NULL_EXPR, o.literal(0)
+                        ])
+                      }));
+    }
+  }
+
+  build(targetStatements: o.Statement[] = []): o.Statement[] {
+    this.children.forEach((child) => child.build(targetStatements));
+
+    const {updateRendererStmts, updateDirectivesStmts, nodeDefExprs} =
+        this._createNodeExpressions();
+
+    const updateRendererFn = this._createUpdateFn(updateRendererStmts);
+    const updateDirectivesFn = this._createUpdateFn(updateDirectivesStmts);
+
+
+    let viewFlags = ViewFlags.None;
+    if (!this.parent && this.component.changeDetection === ChangeDetectionStrategy.OnPush) {
+      viewFlags |= ViewFlags.OnPush;
+    }
+    const viewFactory = new o.DeclareFunctionStmt(
+        this.viewName, [new o.FnParam(LOG_VAR.name !)],
+        [new o.ReturnStatement(o.importExpr(Identifiers.viewDef).callFn([
+          o.literal(viewFlags),
+          o.literalArr(nodeDefExprs),
+          updateDirectivesFn,
+          updateRendererFn,
+        ]))],
+        o.importType(Identifiers.ViewDefinition),
+        this.embeddedViewIndex === 0 ? [o.StmtModifier.Exported] : []);
+
+    targetStatements.push(viewFactory);
+    return targetStatements;
+  }
+
+  private _createUpdateFn(updateStmts: o.Statement[]): o.Expression {
+    let updateFn: o.Expression;
+    if (updateStmts.length > 0) {
+      const preStmts: o.Statement[] = [];
+      if (!this.component.isHost && o.findReadVarNames(updateStmts).has(COMP_VAR.name !)) {
+        preStmts.push(COMP_VAR.set(VIEW_VAR.prop('component')).toDeclStmt(this.compType));
+      }
+      updateFn = o.fn(
+          [
+            new o.FnParam(CHECK_VAR.name !, o.INFERRED_TYPE),
+            new o.FnParam(VIEW_VAR.name !, o.INFERRED_TYPE)
+          ],
+          [...preStmts, ...updateStmts], o.INFERRED_TYPE);
+    } else {
+      updateFn = o.NULL_EXPR;
+    }
+    return updateFn;
+  }
+
+  visitNgContent(ast: NgContentAst, context: any): any {
+    // ngContentDef(ngContentIndex: number, index: number): NodeDef;
+    this.nodes.push(() => ({
+                      sourceSpan: ast.sourceSpan,
+                      nodeFlags: NodeFlags.TypeNgContent,
+                      nodeDef: o.importExpr(Identifiers.ngContentDef).callFn([
+                        o.literal(ast.ngContentIndex), o.literal(ast.index)
+                      ])
+                    }));
+  }
+
+  visitText(ast: TextAst, context: any): any {
+    // Static text nodes have no check function
+    const checkIndex = -1;
+    this.nodes.push(() => ({
+                      sourceSpan: ast.sourceSpan,
+                      nodeFlags: NodeFlags.TypeText,
+                      nodeDef: o.importExpr(Identifiers.textDef).callFn([
+                        o.literal(checkIndex),
+                        o.literal(ast.ngContentIndex),
+                        o.literalArr([o.literal(ast.value)]),
+                      ])
+                    }));
+  }
+
+  visitBoundText(ast: BoundTextAst, context: any): any {
+    const nodeIndex = this.nodes.length;
+    // reserve the space in the nodeDefs array
+    this.nodes.push(null !);
+
+    const astWithSource = <ASTWithSource>ast.value;
+    const inter = <Interpolation>astWithSource.ast;
+
+    const updateRendererExpressions = inter.expressions.map(
+        (expr, bindingIndex) => this._preprocessUpdateExpression(
+            {nodeIndex, bindingIndex, sourceSpan: ast.sourceSpan, context: COMP_VAR, value: expr}));
+
+    // Check index is the same as the node index during compilation
+    // They might only differ at runtime
+    const checkIndex = nodeIndex;
+
+    this.nodes[nodeIndex] = () => ({
+      sourceSpan: ast.sourceSpan,
+      nodeFlags: NodeFlags.TypeText,
+      nodeDef: o.importExpr(Identifiers.textDef).callFn([
+        o.literal(checkIndex),
+        o.literal(ast.ngContentIndex),
+        o.literalArr(inter.strings.map(s => o.literal(s))),
+      ]),
+      updateRenderer: updateRendererExpressions
+    });
+  }
+
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
+    const nodeIndex = this.nodes.length;
+    // reserve the space in the nodeDefs array
+    this.nodes.push(null !);
+
+    const {flags, queryMatchesExpr, hostEvents} = this._visitElementOrTemplate(nodeIndex, ast);
+
+    const childVisitor = this.viewBuilderFactory(this);
+    this.children.push(childVisitor);
+    childVisitor.visitAll(ast.variables, ast.children);
+
+    const childCount = this.nodes.length - nodeIndex - 1;
+
+    // anchorDef(
+    //   flags: NodeFlags, matchedQueries: [string, QueryValueType][], ngContentIndex: number,
+    //   childCount: number, handleEventFn?: ElementHandleEventFn, templateFactory?:
+    //   ViewDefinitionFactory): NodeDef;
+    this.nodes[nodeIndex] = () => ({
+      sourceSpan: ast.sourceSpan,
+      nodeFlags: NodeFlags.TypeElement | flags,
+      nodeDef: o.importExpr(Identifiers.anchorDef).callFn([
+        o.literal(flags),
+        queryMatchesExpr,
+        o.literal(ast.ngContentIndex),
+        o.literal(childCount),
+        this._createElementHandleEventFn(nodeIndex, hostEvents),
+        o.variable(childVisitor.viewName),
+      ])
+    });
+  }
+
+  visitElement(ast: ElementAst, context: any): any {
+    const nodeIndex = this.nodes.length;
+    // reserve the space in the nodeDefs array so we can add children
+    this.nodes.push(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);
+
+    let inputDefs: o.Expression[] = [];
+    let updateRendererExpressions: UpdateExpression[] = [];
+    let outputDefs: o.Expression[] = [];
+    if (elName) {
+      const hostBindings: any[] = ast.inputs
+                                      .map((inputAst) => ({
+                                             context: COMP_VAR as o.Expression,
+                                             inputAst,
+                                             dirAst: null as any,
+                                           }))
+                                      .concat(dirHostBindings);
+      if (hostBindings.length) {
+        updateRendererExpressions =
+            hostBindings.map((hostBinding, bindingIndex) => this._preprocessUpdateExpression({
+              context: hostBinding.context,
+              nodeIndex,
+              bindingIndex,
+              sourceSpan: hostBinding.inputAst.sourceSpan,
+              value: hostBinding.inputAst.value
+            }));
+        inputDefs = hostBindings.map(
+            hostBinding => elementBindingDef(hostBinding.inputAst, hostBinding.dirAst));
+      }
+      outputDefs = usedEvents.map(
+          ([target, eventName]) => o.literalArr([o.literal(target), o.literal(eventName)]));
+    }
+
+    templateVisitAll(this, ast.children);
+
+    const childCount = this.nodes.length - nodeIndex - 1;
+
+    const compAst = ast.directives.find(dirAst => dirAst.directive.isComponent);
+    let compRendererType = o.NULL_EXPR as o.Expression;
+    let compView = o.NULL_EXPR as o.Expression;
+    if (compAst) {
+      compView = this.outputCtx.importExpr(compAst.directive.componentViewType);
+      compRendererType = this.outputCtx.importExpr(compAst.directive.rendererType);
+    }
+
+    // Check index is the same as the node index during compilation
+    // They might only differ at runtime
+    const checkIndex = nodeIndex;
+
+    this.nodes[nodeIndex] = () => ({
+      sourceSpan: ast.sourceSpan,
+      nodeFlags: NodeFlags.TypeElement | flags,
+      nodeDef: o.importExpr(Identifiers.elementDef).callFn([
+        o.literal(checkIndex),
+        o.literal(flags),
+        queryMatchesExpr,
+        o.literal(ast.ngContentIndex),
+        o.literal(childCount),
+        o.literal(elName),
+        elName ? fixedAttrsDef(ast) : o.NULL_EXPR,
+        inputDefs.length ? o.literalArr(inputDefs) : o.NULL_EXPR,
+        outputDefs.length ? o.literalArr(outputDefs) : o.NULL_EXPR,
+        this._createElementHandleEventFn(nodeIndex, hostEvents),
+        compView,
+        compRendererType,
+      ]),
+      updateRenderer: updateRendererExpressions
+    });
+  }
+
+  private _visitElementOrTemplate(nodeIndex: number, ast: {
+    hasViewContainer: boolean,
+    outputs: BoundEventAst[],
+    directives: DirectiveAst[],
+    providers: ProviderAst[],
+    references: ReferenceAst[],
+    queryMatches: QueryMatch[]
+  }): {
+    flags: NodeFlags,
+    usedEvents: [string | null, string][],
+    queryMatchesExpr: o.Expression,
+    hostBindings:
+        {context: o.Expression, inputAst: BoundElementPropertyAst, dirAst: DirectiveAst}[],
+    hostEvents: {context: o.Expression, eventAst: BoundEventAst, dirAst: DirectiveAst}[],
+  } {
+    let flags = NodeFlags.None;
+    if (ast.hasViewContainer) {
+      flags |= NodeFlags.EmbeddedViews;
+    }
+    const usedEvents = new Map<string, [string | null, string]>();
+    ast.outputs.forEach((event) => {
+      const {name, target} = elementEventNameAndTarget(event, null);
+      usedEvents.set(elementEventFullName(target, name), [target, name]);
+    });
+    ast.directives.forEach((dirAst) => {
+      dirAst.hostEvents.forEach((event) => {
+        const {name, target} = elementEventNameAndTarget(event, dirAst);
+        usedEvents.set(elementEventFullName(target, name), [target, name]);
+      });
+    });
+    const hostBindings:
+        {context: o.Expression, inputAst: BoundElementPropertyAst, dirAst: DirectiveAst}[] = [];
+    const hostEvents: {context: o.Expression, eventAst: BoundEventAst, dirAst: DirectiveAst}[] = [];
+    this._visitComponentFactoryResolverProvider(ast.directives);
+
+    ast.providers.forEach((providerAst, providerIndex) => {
+      let dirAst: DirectiveAst = undefined !;
+      let dirIndex: number = undefined !;
+      ast.directives.forEach((localDirAst, i) => {
+        if (localDirAst.directive.type.reference === tokenReference(providerAst.token)) {
+          dirAst = localDirAst;
+          dirIndex = i;
+        }
+      });
+      if (dirAst) {
+        const {hostBindings: dirHostBindings, hostEvents: dirHostEvents} = this._visitDirective(
+            providerAst, dirAst, dirIndex, nodeIndex, ast.references, ast.queryMatches, usedEvents,
+            this.staticQueryIds.get(<any>ast) !);
+        hostBindings.push(...dirHostBindings);
+        hostEvents.push(...dirHostEvents);
+      } else {
+        this._visitProvider(providerAst, ast.queryMatches);
+      }
+    });
+
+    let queryMatchExprs: o.Expression[] = [];
+    ast.queryMatches.forEach((match) => {
+      let valueType: QueryValueType = undefined !;
+      if (tokenReference(match.value) ===
+          this.reflector.resolveExternalReference(Identifiers.ElementRef)) {
+        valueType = QueryValueType.ElementRef;
+      } else if (
+          tokenReference(match.value) ===
+          this.reflector.resolveExternalReference(Identifiers.ViewContainerRef)) {
+        valueType = QueryValueType.ViewContainerRef;
+      } else if (
+          tokenReference(match.value) ===
+          this.reflector.resolveExternalReference(Identifiers.TemplateRef)) {
+        valueType = QueryValueType.TemplateRef;
+      }
+      if (valueType != null) {
+        queryMatchExprs.push(o.literalArr([o.literal(match.queryId), o.literal(valueType)]));
+      }
+    });
+    ast.references.forEach((ref) => {
+      let valueType: QueryValueType = undefined !;
+      if (!ref.value) {
+        valueType = QueryValueType.RenderElement;
+      } else if (
+          tokenReference(ref.value) ===
+          this.reflector.resolveExternalReference(Identifiers.TemplateRef)) {
+        valueType = QueryValueType.TemplateRef;
+      }
+      if (valueType != null) {
+        this.refNodeIndices[ref.name] = nodeIndex;
+        queryMatchExprs.push(o.literalArr([o.literal(ref.name), o.literal(valueType)]));
+      }
+    });
+    ast.outputs.forEach((outputAst) => {
+      hostEvents.push({context: COMP_VAR, eventAst: outputAst, dirAst: null !});
+    });
+
+    return {
+      flags,
+      usedEvents: Array.from(usedEvents.values()),
+      queryMatchesExpr: queryMatchExprs.length ? o.literalArr(queryMatchExprs) : o.NULL_EXPR,
+      hostBindings,
+      hostEvents: hostEvents
+    };
+  }
+
+  private _visitDirective(
+      providerAst: ProviderAst, dirAst: DirectiveAst, directiveIndex: number,
+      elementNodeIndex: number, refs: ReferenceAst[], queryMatches: QueryMatch[],
+      usedEvents: Map<string, any>, queryIds: StaticAndDynamicQueryIds): {
+    hostBindings:
+        {context: o.Expression, inputAst: BoundElementPropertyAst, dirAst: DirectiveAst}[],
+    hostEvents: {context: o.Expression, eventAst: BoundEventAst, dirAst: DirectiveAst}[]
+  } {
+    const nodeIndex = this.nodes.length;
+    // reserve the space in the nodeDefs array so we can add children
+    this.nodes.push(null !);
+
+    dirAst.directive.queries.forEach((query, queryIndex) => {
+      const queryId = dirAst.contentQueryStartId + queryIndex;
+      const flags =
+          NodeFlags.TypeContentQuery | calcStaticDynamicQueryFlags(queryIds, queryId, query.first);
+      const bindingType = query.first ? QueryBindingType.First : QueryBindingType.All;
+      this.nodes.push(() => ({
+                        sourceSpan: dirAst.sourceSpan,
+                        nodeFlags: flags,
+                        nodeDef: o.importExpr(Identifiers.queryDef).callFn([
+                          o.literal(flags), o.literal(queryId),
+                          new o.LiteralMapExpr([new o.LiteralMapEntry(
+                              query.propertyName, o.literal(bindingType), false)])
+                        ]),
+                      }));
+    });
+
+    // Note: the operation below might also create new nodeDefs,
+    // but we don't want them to be a child of a directive,
+    // as they might be a provider/pipe on their own.
+    // I.e. we only allow queries as children of directives nodes.
+    const childCount = this.nodes.length - nodeIndex - 1;
+
+    let {flags, queryMatchExprs, providerExpr, depsExpr} =
+        this._visitProviderOrDirective(providerAst, queryMatches);
+
+    refs.forEach((ref) => {
+      if (ref.value && tokenReference(ref.value) === tokenReference(providerAst.token)) {
+        this.refNodeIndices[ref.name] = nodeIndex;
+        queryMatchExprs.push(
+            o.literalArr([o.literal(ref.name), o.literal(QueryValueType.Provider)]));
+      }
+    });
+
+    if (dirAst.directive.isComponent) {
+      flags |= NodeFlags.Component;
+    }
+
+    const inputDefs = dirAst.inputs.map((inputAst, inputIndex) => {
+      const mapValue = o.literalArr([o.literal(inputIndex), o.literal(inputAst.directiveName)]);
+      // Note: it's important to not quote the key so that we can capture renames by minifiers!
+      return new o.LiteralMapEntry(inputAst.directiveName, mapValue, false);
+    });
+
+    const outputDefs: o.LiteralMapEntry[] = [];
+    const dirMeta = dirAst.directive;
+    Object.keys(dirMeta.outputs).forEach((propName) => {
+      const eventName = dirMeta.outputs[propName];
+      if (usedEvents.has(eventName)) {
+        // Note: it's important to not quote the key so that we can capture renames by minifiers!
+        outputDefs.push(new o.LiteralMapEntry(propName, o.literal(eventName), false));
+      }
+    });
+    let updateDirectiveExpressions: UpdateExpression[] = [];
+    if (dirAst.inputs.length || (flags & (NodeFlags.DoCheck | NodeFlags.OnInit)) > 0) {
+      updateDirectiveExpressions =
+          dirAst.inputs.map((input, bindingIndex) => this._preprocessUpdateExpression({
+            nodeIndex,
+            bindingIndex,
+            sourceSpan: input.sourceSpan,
+            context: COMP_VAR,
+            value: input.value
+          }));
+    }
+
+    const dirContextExpr =
+        o.importExpr(Identifiers.nodeValue).callFn([VIEW_VAR, o.literal(nodeIndex)]);
+    const hostBindings = dirAst.hostProperties.map((inputAst) => ({
+                                                     context: dirContextExpr,
+                                                     dirAst,
+                                                     inputAst,
+                                                   }));
+    const hostEvents = dirAst.hostEvents.map((hostEventAst) => ({
+                                               context: dirContextExpr,
+                                               eventAst: hostEventAst, dirAst,
+                                             }));
+
+    // Check index is the same as the node index during compilation
+    // They might only differ at runtime
+    const checkIndex = nodeIndex;
+
+    this.nodes[nodeIndex] = () => ({
+      sourceSpan: dirAst.sourceSpan,
+      nodeFlags: NodeFlags.TypeDirective | flags,
+      nodeDef: o.importExpr(Identifiers.directiveDef).callFn([
+        o.literal(checkIndex),
+        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,
+        outputDefs.length ? new o.LiteralMapExpr(outputDefs) : o.NULL_EXPR,
+      ]),
+      updateDirectives: updateDirectiveExpressions,
+      directive: dirAst.directive.type,
+    });
+
+    return {hostBindings, hostEvents};
+  }
+
+  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;
+    // providerDef(
+    //   flags: NodeFlags, matchedQueries: [string, QueryValueType][], token:any,
+    //   value: any, deps: ([DepFlags, any] | any)[]): NodeDef;
+    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;
+    let queryMatchExprs: o.Expression[] = [];
+
+    queryMatches.forEach((match) => {
+      if (tokenReference(match.value) === tokenReference(providerAst.token)) {
+        queryMatchExprs.push(
+            o.literalArr([o.literal(match.queryId), o.literal(QueryValueType.Provider)]));
+      }
+    });
+    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 {
+    if (name == EventHandlerVars.event.name) {
+      return EventHandlerVars.event;
+    }
+    let currViewExpr: o.Expression = VIEW_VAR;
+    for (let currBuilder: ViewBuilder|null = this; currBuilder; currBuilder = currBuilder.parent,
+                          currViewExpr = currViewExpr.prop('parent').cast(o.DYNAMIC_TYPE)) {
+      // check references
+      const refNodeIndex = currBuilder.refNodeIndices[name];
+      if (refNodeIndex != null) {
+        return o.importExpr(Identifiers.nodeValue).callFn([currViewExpr, o.literal(refNodeIndex)]);
+      }
+
+      // check variables
+      const varAst = currBuilder.variables.find((varAst) => varAst.name === name);
+      if (varAst) {
+        const varValue = varAst.value || IMPLICIT_TEMPLATE_VAR;
+        return currViewExpr.prop('context').prop(varValue);
+      }
+    }
+    return null;
+  }
+
+  private _createLiteralArrayConverter(sourceSpan: ParseSourceSpan, argCount: number):
+      BuiltinConverter {
+    if (argCount === 0) {
+      const valueExpr = o.importExpr(Identifiers.EMPTY_ARRAY);
+      return () => valueExpr;
+    }
+
+    const checkIndex = this.nodes.length;
+
+    this.nodes.push(() => ({
+                      sourceSpan,
+                      nodeFlags: NodeFlags.TypePureArray,
+                      nodeDef: o.importExpr(Identifiers.pureArrayDef).callFn([
+                        o.literal(checkIndex),
+                        o.literal(argCount),
+                      ])
+                    }));
+
+    return (args: o.Expression[]) => callCheckStmt(checkIndex, args);
+  }
+
+  private _createLiteralMapConverter(
+      sourceSpan: ParseSourceSpan, keys: {key: string, quoted: boolean}[]): BuiltinConverter {
+    if (keys.length === 0) {
+      const valueExpr = o.importExpr(Identifiers.EMPTY_MAP);
+      return () => valueExpr;
+    }
+
+    const map = o.literalMap(keys.map((e, i) => ({...e, value: o.literal(i)})));
+    const checkIndex = this.nodes.length;
+    this.nodes.push(() => ({
+                      sourceSpan,
+                      nodeFlags: NodeFlags.TypePureObject,
+                      nodeDef: o.importExpr(Identifiers.pureObjectDef).callFn([
+                        o.literal(checkIndex),
+                        map,
+                      ])
+                    }));
+
+    return (args: o.Expression[]) => callCheckStmt(checkIndex, args);
+  }
+
+  private _createPipeConverter(expression: UpdateExpression, name: string, argCount: number):
+      BuiltinConverter {
+    const pipe = this.usedPipes.find((pipeSummary) => pipeSummary.name === name) !;
+    if (pipe.pure) {
+      const checkIndex = this.nodes.length;
+      this.nodes.push(() => ({
+                        sourceSpan: expression.sourceSpan,
+                        nodeFlags: NodeFlags.TypePurePipe,
+                        nodeDef: o.importExpr(Identifiers.purePipeDef).callFn([
+                          o.literal(checkIndex),
+                          o.literal(argCount),
+                        ])
+                      }));
+
+      // find underlying pipe in the component view
+      let compViewExpr: o.Expression = VIEW_VAR;
+      let compBuilder: ViewBuilder = this;
+      while (compBuilder.parent) {
+        compBuilder = compBuilder.parent;
+        compViewExpr = compViewExpr.prop('parent').cast(o.DYNAMIC_TYPE);
+      }
+      const pipeNodeIndex = compBuilder.purePipeNodeIndices[name];
+      const pipeValueExpr: o.Expression =
+          o.importExpr(Identifiers.nodeValue).callFn([compViewExpr, o.literal(pipeNodeIndex)]);
+
+      return (args: o.Expression[]) => callUnwrapValue(
+                 expression.nodeIndex, expression.bindingIndex,
+                 callCheckStmt(checkIndex, [pipeValueExpr].concat(args)));
+    } else {
+      const nodeIndex = this._createPipe(expression.sourceSpan, pipe);
+      const nodeValueExpr =
+          o.importExpr(Identifiers.nodeValue).callFn([VIEW_VAR, o.literal(nodeIndex)]);
+
+      return (args: o.Expression[]) => callUnwrapValue(
+                 expression.nodeIndex, expression.bindingIndex,
+                 nodeValueExpr.callMethod('transform', args));
+    }
+  }
+
+  private _createPipe(sourceSpan: ParseSourceSpan|null, pipe: CompilePipeSummary): number {
+    const nodeIndex = this.nodes.length;
+    let flags = NodeFlags.None;
+    pipe.type.lifecycleHooks.forEach((lifecycleHook) => {
+      // for pipes, we only support ngOnDestroy
+      if (lifecycleHook === LifecycleHooks.OnDestroy) {
+        flags |= lifecycleHookToNodeFlag(lifecycleHook);
+      }
+    });
+
+    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(Identifiers.pipeDef).callFn([
+            o.literal(flags), this.outputCtx.importExpr(pipe.type.reference), o.literalArr(depExprs)
+          ])
+        }));
+    return nodeIndex;
+  }
+
+  /**
+   * For the AST in `UpdateExpression.value`:
+   * - create nodes for pipes, literal arrays and, literal maps,
+   * - update the AST to replace pipes, literal arrays and, literal maps with calls to check fn.
+   *
+   * WARNING: This might create new nodeDefs (for pipes and literal arrays and literal maps)!
+   */
+  private _preprocessUpdateExpression(expression: UpdateExpression): UpdateExpression {
+    return {
+      nodeIndex: expression.nodeIndex,
+      bindingIndex: expression.bindingIndex,
+      sourceSpan: expression.sourceSpan,
+      context: expression.context,
+      value: convertPropertyBindingBuiltins(
+          {
+            createLiteralArrayConverter: (argCount: number) => this._createLiteralArrayConverter(
+                                             expression.sourceSpan, argCount),
+            createLiteralMapConverter:
+                (keys: {key: string, quoted: boolean}[]) =>
+                    this._createLiteralMapConverter(expression.sourceSpan, keys),
+            createPipeConverter: (name: string, argCount: number) =>
+                                     this._createPipeConverter(expression, name, argCount)
+          },
+          expression.value)
+    };
+  }
+
+  private _createNodeExpressions(): {
+    updateRendererStmts: o.Statement[],
+    updateDirectivesStmts: o.Statement[],
+    nodeDefExprs: o.Expression[]
+  } {
+    const self = this;
+    let updateBindingCount = 0;
+    const updateRendererStmts: o.Statement[] = [];
+    const updateDirectivesStmts: o.Statement[] = [];
+    const nodeDefExprs = this.nodes.map((factory, nodeIndex) => {
+      const {nodeDef, nodeFlags, updateDirectives, updateRenderer, sourceSpan} = factory();
+      if (updateRenderer) {
+        updateRendererStmts.push(
+            ...createUpdateStatements(nodeIndex, sourceSpan, updateRenderer, false));
+      }
+      if (updateDirectives) {
+        updateDirectivesStmts.push(...createUpdateStatements(
+            nodeIndex, sourceSpan, updateDirectives,
+            (nodeFlags & (NodeFlags.DoCheck | NodeFlags.OnInit)) > 0));
+      }
+      // We use a comma expression to call the log function before
+      // the nodeDef function, but still use the result of the nodeDef function
+      // as the value.
+      // Note: We only add the logger to elements / text nodes,
+      // so we don't generate too much code.
+      const logWithNodeDef = nodeFlags & NodeFlags.CatRenderNode ?
+          new o.CommaExpr([LOG_VAR.callFn([]).callFn([]), nodeDef]) :
+          nodeDef;
+      return o.applySourceSpanToExpressionIfNeeded(logWithNodeDef, sourceSpan);
+    });
+    return {updateRendererStmts, updateDirectivesStmts, nodeDefExprs};
+
+    function createUpdateStatements(
+        nodeIndex: number, sourceSpan: ParseSourceSpan | null, expressions: UpdateExpression[],
+        allowEmptyExprs: boolean): o.Statement[] {
+      const updateStmts: o.Statement[] = [];
+      const exprs = expressions.map(({sourceSpan, context, value}) => {
+        const bindingId = `${updateBindingCount++}`;
+        const nameResolver = context === COMP_VAR ? self : null;
+        const {stmts, currValExpr} =
+            convertPropertyBinding(nameResolver, context, value, bindingId, BindingForm.General);
+        updateStmts.push(...stmts.map(
+            (stmt: o.Statement) => o.applySourceSpanToStatementIfNeeded(stmt, sourceSpan)));
+        return o.applySourceSpanToExpressionIfNeeded(currValExpr, sourceSpan);
+      });
+      if (expressions.length || allowEmptyExprs) {
+        updateStmts.push(o.applySourceSpanToStatementIfNeeded(
+            callCheckStmt(nodeIndex, exprs).toStmt(), sourceSpan));
+      }
+      return updateStmts;
+    }
+  }
+
+  private _createElementHandleEventFn(
+      nodeIndex: number,
+      handlers: {context: o.Expression, eventAst: BoundEventAst, dirAst: DirectiveAst}[]) {
+    const handleEventStmts: o.Statement[] = [];
+    let handleEventBindingCount = 0;
+    handlers.forEach(({context, eventAst, dirAst}) => {
+      const bindingId = `${handleEventBindingCount++}`;
+      const nameResolver = context === COMP_VAR ? this : null;
+      const {stmts, allowDefault} =
+          convertActionBinding(nameResolver, context, eventAst.handler, bindingId);
+      const trueStmts = stmts;
+      if (allowDefault) {
+        trueStmts.push(ALLOW_DEFAULT_VAR.set(allowDefault.and(ALLOW_DEFAULT_VAR)).toStmt());
+      }
+      const {target: eventTarget, name: eventName} = elementEventNameAndTarget(eventAst, dirAst);
+      const fullEventName = elementEventFullName(eventTarget, eventName);
+      handleEventStmts.push(o.applySourceSpanToStatementIfNeeded(
+          new o.IfStmt(o.literal(fullEventName).identical(EVENT_NAME_VAR), trueStmts),
+          eventAst.sourceSpan));
+    });
+    let handleEventFn: o.Expression;
+    if (handleEventStmts.length > 0) {
+      const preStmts: o.Statement[] =
+          [ALLOW_DEFAULT_VAR.set(o.literal(true)).toDeclStmt(o.BOOL_TYPE)];
+      if (!this.component.isHost && o.findReadVarNames(handleEventStmts).has(COMP_VAR.name !)) {
+        preStmts.push(COMP_VAR.set(VIEW_VAR.prop('component')).toDeclStmt(this.compType));
+      }
+      handleEventFn = o.fn(
+          [
+            new o.FnParam(VIEW_VAR.name !, o.INFERRED_TYPE),
+            new o.FnParam(EVENT_NAME_VAR.name !, o.INFERRED_TYPE),
+            new o.FnParam(EventHandlerVars.event.name !, o.INFERRED_TYPE)
+          ],
+          [...preStmts, ...handleEventStmts, new o.ReturnStatement(ALLOW_DEFAULT_VAR)],
+          o.INFERRED_TYPE);
+    } else {
+      handleEventFn = o.NULL_EXPR;
+    }
+    return handleEventFn;
+  }
+
+  visitDirective(ast: DirectiveAst, context: {usedEvents: Set<string>}): any {}
+  visitDirectiveProperty(ast: BoundDirectivePropertyAst, 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 {}
+}
+
+function needsAdditionalRootNode(astNodes: TemplateAst[]): boolean {
+  const lastAstNode = astNodes[astNodes.length - 1];
+  if (lastAstNode instanceof EmbeddedTemplateAst) {
+    return lastAstNode.hasViewContainer;
+  }
+
+  if (lastAstNode instanceof ElementAst) {
+    if (isNgContainer(lastAstNode.name) && lastAstNode.children.length) {
+      return needsAdditionalRootNode(lastAstNode.children);
+    }
+    return lastAstNode.hasViewContainer;
+  }
+
+  return lastAstNode instanceof NgContentAst;
+}
+
+
+function elementBindingDef(inputAst: BoundElementPropertyAst, dirAst: DirectiveAst): o.Expression {
+  const inputType = inputAst.type;
+  switch (inputType) {
+    case PropertyBindingType.Attribute:
+      return o.literalArr([
+        o.literal(BindingFlags.TypeElementAttribute), o.literal(inputAst.name),
+        o.literal(inputAst.securityContext)
+      ]);
+    case PropertyBindingType.Property:
+      return o.literalArr([
+        o.literal(BindingFlags.TypeProperty), o.literal(inputAst.name),
+        o.literal(inputAst.securityContext)
+      ]);
+    case PropertyBindingType.Animation:
+      const bindingType = BindingFlags.TypeProperty |
+          (dirAst && dirAst.directive.isComponent ? BindingFlags.SyntheticHostProperty :
+                                                    BindingFlags.SyntheticProperty);
+      return o.literalArr([
+        o.literal(bindingType), o.literal('@' + inputAst.name), o.literal(inputAst.securityContext)
+      ]);
+    case PropertyBindingType.Class:
+      return o.literalArr(
+          [o.literal(BindingFlags.TypeElementClass), o.literal(inputAst.name), o.NULL_EXPR]);
+    case PropertyBindingType.Style:
+      return o.literalArr([
+        o.literal(BindingFlags.TypeElementStyle), o.literal(inputAst.name), o.literal(inputAst.unit)
+      ]);
+    default:
+      // This default case is not needed by TypeScript compiler, as the switch is exhaustive.
+      // However Closure Compiler does not understand that and reports an error in typed mode.
+      // The `throw new Error` below works around the problem, and the unexpected: never variable
+      // makes sure tsc still checks this code is unreachable.
+      const unexpected: never = inputType;
+      throw new Error(`unexpected ${unexpected}`);
+  }
+}
+
+
+function fixedAttrsDef(elementAst: ElementAst): o.Expression {
+  const mapResult: {[key: string]: string} = Object.create(null);
+  elementAst.attrs.forEach(attrAst => { mapResult[attrAst.name] = attrAst.value; });
+  elementAst.directives.forEach(dirAst => {
+    Object.keys(dirAst.directive.hostAttributes).forEach(name => {
+      const value = dirAst.directive.hostAttributes[name];
+      const prevValue = mapResult[name];
+      mapResult[name] = prevValue != null ? mergeAttributeValue(name, prevValue, value) : value;
+    });
+  });
+  // 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(
+      (attrName) => o.literalArr([o.literal(attrName), o.literal(mapResult[attrName])])));
+}
+
+function mergeAttributeValue(attrName: string, attrValue1: string, attrValue2: string): string {
+  if (attrName == CLASS_ATTR || attrName == STYLE_ATTR) {
+    return `${attrValue1} ${attrValue2}`;
+  } else {
+    return attrValue2;
+  }
+}
+
+function callCheckStmt(nodeIndex: number, exprs: o.Expression[]): o.Expression {
+  if (exprs.length > 10) {
+    return CHECK_VAR.callFn(
+        [VIEW_VAR, o.literal(nodeIndex), o.literal(ArgumentType.Dynamic), o.literalArr(exprs)]);
+  } else {
+    return CHECK_VAR.callFn(
+        [VIEW_VAR, o.literal(nodeIndex), o.literal(ArgumentType.Inline), ...exprs]);
+  }
+}
+
+function callUnwrapValue(nodeIndex: number, bindingIdx: number, expr: o.Expression): o.Expression {
+  return o.importExpr(Identifiers.unwrapValue).callFn([
+    VIEW_VAR, o.literal(nodeIndex), o.literal(bindingIdx), expr
+  ]);
+}
+
+interface StaticAndDynamicQueryIds {
+  staticQueryIds: Set<number>;
+  dynamicQueryIds: Set<number>;
+}
+
+
+function findStaticQueryIds(
+    nodes: TemplateAst[], result = new Map<TemplateAst, StaticAndDynamicQueryIds>()):
+    Map<TemplateAst, StaticAndDynamicQueryIds> {
+  nodes.forEach((node) => {
+    const staticQueryIds = new Set<number>();
+    const dynamicQueryIds = new Set<number>();
+    let queryMatches: QueryMatch[] = undefined !;
+    if (node instanceof ElementAst) {
+      findStaticQueryIds(node.children, result);
+      node.children.forEach((child) => {
+        const childData = result.get(child) !;
+        childData.staticQueryIds.forEach(queryId => staticQueryIds.add(queryId));
+        childData.dynamicQueryIds.forEach(queryId => dynamicQueryIds.add(queryId));
+      });
+      queryMatches = node.queryMatches;
+    } else if (node instanceof EmbeddedTemplateAst) {
+      findStaticQueryIds(node.children, result);
+      node.children.forEach((child) => {
+        const childData = result.get(child) !;
+        childData.staticQueryIds.forEach(queryId => dynamicQueryIds.add(queryId));
+        childData.dynamicQueryIds.forEach(queryId => dynamicQueryIds.add(queryId));
+      });
+      queryMatches = node.queryMatches;
+    }
+    if (queryMatches) {
+      queryMatches.forEach((match) => staticQueryIds.add(match.queryId));
+    }
+    dynamicQueryIds.forEach(queryId => staticQueryIds.delete(queryId));
+    result.set(node, {staticQueryIds, dynamicQueryIds});
+  });
+  return result;
+}
+
+function staticViewQueryIds(nodeStaticQueryIds: Map<TemplateAst, StaticAndDynamicQueryIds>):
+    StaticAndDynamicQueryIds {
+  const staticQueryIds = new Set<number>();
+  const dynamicQueryIds = new Set<number>();
+  Array.from(nodeStaticQueryIds.values()).forEach((entry) => {
+    entry.staticQueryIds.forEach(queryId => staticQueryIds.add(queryId));
+    entry.dynamicQueryIds.forEach(queryId => dynamicQueryIds.add(queryId));
+  });
+  dynamicQueryIds.forEach(queryId => staticQueryIds.delete(queryId));
+  return {staticQueryIds, dynamicQueryIds};
+}
+
+function elementEventNameAndTarget(
+    eventAst: BoundEventAst, dirAst: DirectiveAst | null): {name: string, target: string | null} {
+  if (eventAst.isAnimation) {
+    return {
+      name: `@${eventAst.name}.${eventAst.phase}`,
+      target: dirAst && dirAst.directive.isComponent ? 'component' : null
+    };
+  } else {
+    return eventAst;
+  }
+}
+
+function calcStaticDynamicQueryFlags(
+    queryIds: StaticAndDynamicQueryIds, queryId: number, isFirst: boolean) {
+  let flags = NodeFlags.None;
+  // Note: We only make queries static that query for a single item.
+  // This is because of backwards compatibility with the old view compiler...
+  if (isFirst && (queryIds.staticQueryIds.has(queryId) || !queryIds.dynamicQueryIds.has(queryId))) {
+    flags |= NodeFlags.StaticQuery;
+  } else {
+    flags |= NodeFlags.DynamicQuery;
+  }
+  return flags;
+}
+
+export function elementEventFullName(target: string | null, name: string): string {
+  return target ? `${target}:${name}` : name;
+}
diff --git a/packages/compiler/test/BUILD.bazel b/packages/compiler/test/BUILD.bazel
new file mode 100644
index 000000000000..fb32cbad435f
--- /dev/null
+++ b/packages/compiler/test/BUILD.bazel
@@ -0,0 +1,88 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+# Test that should only be run in node
+NODE_ONLY = [
+    "**/*_node_only_spec.ts",
+    "aot/**/*.ts",
+]
+
+UTILS = [
+    "aot/test_util.ts",
+]
+
+ts_library(
+    name = "test_utils",
+    srcs = UTILS,
+    visibility = [
+        "//packages/compiler-cli/test:__subpackages__",
+        "//packages/compiler/test:__subpackages__",
+    ],
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+    ],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = NODE_ONLY + UTILS,
+    ),
+    deps = [
+        "//packages:types",
+        "//packages/common",
+        "//packages/compiler",
+        "//packages/compiler/test/expression_parser/utils",
+        "//packages/compiler/testing",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser/testing",
+    ],
+)
+
+ts_library(
+    name = "test_node_only_lib",
+    testonly = 1,
+    srcs = glob(
+        NODE_ONLY,
+        exclude = UTILS,
+    ),
+    deps = [
+        ":test_lib",
+        ":test_utils",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+        "//packages/compiler/test/expression_parser/utils",
+        "//packages/compiler/testing",
+        "//packages/core",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+        "//packages/animations:npm_package",
+        "//packages/common:npm_package",
+        "//packages/core:npm_package",
+    ],
+    deps = [
+        ":test_lib",
+        ":test_node_only_lib",
+        "//packages/core",
+        "//tools/testing:node",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/compiler/test/aot/README.md b/packages/compiler/test/aot/README.md
new file mode 100644
index 000000000000..7c522a139603
--- /dev/null
+++ b/packages/compiler/test/aot/README.md
@@ -0,0 +1 @@
+Tests in this directory are excluded from running in the browser and only run in node.
\ No newline at end of file
diff --git a/packages/compiler/test/aot/compiler_spec.ts b/packages/compiler/test/aot/compiler_spec.ts
new file mode 100644
index 000000000000..6de379786afe
--- /dev/null
+++ b/packages/compiler/test/aot/compiler_spec.ts
@@ -0,0 +1,1086 @@
+/**
+ * @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, GeneratedFile, StaticSymbolCache, StaticSymbolResolver, toTypeScript} from '@angular/compiler';
+import {MetadataBundler} from '@angular/compiler-cli/src/metadata/bundler';
+import {privateEntriesToIndex} from '@angular/compiler-cli/src/metadata/index_writer';
+import {extractSourceMap, originalPositionFor} from '@angular/compiler/testing/src/output/source_map_util';
+import {NodeFlags} from '@angular/core/src/view/index';
+import * as ts from 'typescript';
+
+import {EmittingCompilerHost, MockAotCompilerHost, MockCompilerHost, MockDirectory, MockMetadataBundlerHost, arrayToMockDir, compile, expectNoDiagnostics, isInBazel, settings, setup, toMockFileArray} from './test_util';
+
+describe('compiler (unbundled Angular)', () => {
+  let angularFiles = setup();
+
+  describe('Quickstart', () => {
+    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();
+    });
+  });
+
+  describe('aot source mapping', () => {
+    const componentPath = '/app/app.component.ts';
+    const ngFactoryPath = '/app/app.component.ngfactory.ts';
+
+    let rootDir: MockDirectory;
+    let appDir: MockDirectory;
+
+    beforeEach(() => {
+      appDir = {
+        'app.module.ts': `
+              import { NgModule }      from '@angular/core';
+
+              import { AppComponent }  from './app.component';
+
+              @NgModule({
+                declarations: [ AppComponent ],
+                bootstrap:    [ AppComponent ]
+              })
+              export class AppModule { }
+            `
+      };
+      rootDir = {'app': appDir};
+    });
+
+    function compileApp(): GeneratedFile {
+      const {genFiles} = compile([rootDir, angularFiles]);
+      return genFiles.find(
+          genFile => genFile.srcFileUrl === componentPath && genFile.genFileUrl.endsWith('.ts'));
+    }
+
+    function findLineAndColumn(
+        file: string, token: string): {line: number | null, column: number | null} {
+      const index = file.indexOf(token);
+      if (index === -1) {
+        return {line: null, column: null};
+      }
+      const linesUntilToken = file.slice(0, index).split('\n');
+      const line = linesUntilToken.length;
+      const column = linesUntilToken[linesUntilToken.length - 1].length;
+      return {line, column};
+    }
+
+    function createComponentSource(componentDecorator: string) {
+      return `
+        import { NgModule, Component } from '@angular/core';
+
+        @Component({
+          ${componentDecorator}
+        })
+        export class AppComponent {
+          someMethod() {}
+        }
+      `;
+    }
+
+    describe('inline templates', () => {
+      const ngUrl = `${componentPath}.AppComponent.html`;
+
+      function templateDecorator(template: string) { return `template: \`${template}\`,`; }
+
+      declareTests({ngUrl, templateDecorator});
+    });
+
+    describe('external templates', () => {
+      const ngUrl = '/app/app.component.html';
+      const templateUrl = '/app/app.component.html';
+
+      function templateDecorator(template: string) {
+        appDir['app.component.html'] = template;
+        return `templateUrl: 'app.component.html',`;
+      }
+
+      declareTests({ngUrl, templateDecorator});
+    });
+
+    function declareTests({ngUrl, templateDecorator}:
+                              {ngUrl: string, templateDecorator: (template: string) => string}) {
+      it('should use the right source url in html parse errors', () => {
+        appDir['app.component.ts'] = createComponentSource(templateDecorator('<div>\n  </error>'));
+
+        expect(() => compileApp())
+            .toThrowError(new RegExp(`Template parse errors[\\s\\S]*${ngUrl}@1:2`));
+      });
+
+      it('should use the right source url in template parse errors', () => {
+        appDir['app.component.ts'] =
+            createComponentSource(templateDecorator('<div>\n  <div unknown="{{ctxProp}}"></div>'));
+
+        expect(() => compileApp())
+            .toThrowError(new RegExp(`Template parse errors[\\s\\S]*${ngUrl}@1:7`));
+      });
+
+      it('should create a sourceMap for the template', () => {
+        const template = 'Hello World!';
+
+        appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
+
+        const genFile = compileApp();
+        const genSource = toTypeScript(genFile);
+        const sourceMap = extractSourceMap(genSource) !;
+        expect(sourceMap.file).toEqual(genFile.genFileUrl);
+
+        // Note: the generated file also contains code that is not mapped to
+        // the template (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(ngFactoryPath);
+        expect(sourceMap.sourcesContent[sourceIndex]).toBe(' ');
+      });
+
+      it('should map elements correctly to the source', () => {
+        const template = '<div>\n   <span></span></div>';
+
+        appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
+
+        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', () => {
+        const template = `<div>\n   <span [title]="someMethod()"></span></div>`;
+
+        appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
+
+        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', () => {
+        const template = `<div>\n   <span (click)="someMethod()"></span></div>`;
+
+        appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
+
+        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 factory file', () => {
+        appDir['app.component.ts'] = createComponentSource(templateDecorator('Hello World!'));
+
+        const genFile = compileApp();
+        const genSource = toTypeScript(genFile);
+        const sourceMap = extractSourceMap(genSource) !;
+        expect(originalPositionFor(sourceMap, {line: 1, column: 0}))
+            .toEqual({line: 1, column: 0, source: ngFactoryPath});
+      });
+    }
+  });
+
+  describe('errors', () => {
+    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()
+                export class MyService {
+                  constructor(a: boolean) {}
+                }
+              `
+        }
+      };
+      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 v6.x`);
+
+    });
+
+    it('should error if not all arguments of an @Injectable class can be resolved if strictInjectionParameters is true',
+       () => {
+         const FILES: MockDirectory = {
+           app: {
+             'app.ts': `
+                import {Injectable} from '@angular/core';
+
+                @Injectable()
+                export class MyService {
+                  constructor(a: boolean) {}
+                }
+              `
+           }
+         };
+         const warnSpy = spyOn(console, 'warn');
+         expect(() => compile([FILES, angularFiles], {strictInjectionParameters: true}))
+             .toThrowError(`Can't resolve all parameters for MyService in /app/app.ts: (?).`);
+         expect(warnSpy).not.toHaveBeenCalled();
+       });
+
+    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 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: '' })
+              export class AppComponent {}
+
+              @NgModule({ declarations: [ AppComponent ] })
+              export class AppModule { }
+            `
+      }
+    };
+    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', () => {
+      const FILES: MockDirectory = {
+        app: {
+          'app.ts': `
+                import {Component, NgModule, Input, Output} from '@angular/core';
+
+                @Component({
+                  selector: 'my-comp',
+                  template: '<ng-content></ng-content><ng-content select="child"></ng-content>'
+                })
+                export class MyComp {
+                  @Input('aInputName')
+                  aInputProp: string;
+
+                  @Output('aOutputName')
+                  aOutputProp: any;
+                }
+
+                @NgModule({
+                  declarations: [MyComp]
+                })
+                export class MyModule {}
+              `
+        }
+      };
+      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', () => {
+      const FILES: MockDirectory = {
+        app: {
+          'app.ts': `
+                import { NgModule, Component } from '@angular/core';
+
+                @Component({ template: '' })
+                export class AppComponent {}
+
+                @NgModule({ declarations: [ AppComponent ] })
+                export class AppModule { }
+              `
+        }
+      };
+      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('summaries', () => {
+    let angularSummaryFiles: MockDirectory;
+    beforeAll(() => {
+      angularSummaryFiles = compile(angularFiles, {useSummaries: false, emit: true}).outDir;
+    });
+
+    inheritanceWithSummariesSpecs(() => angularSummaryFiles);
+
+    it('should not reexport type symbols mentioned in constructors', () => {
+      const libInput: MockDirectory = {
+        'lib': {
+          'base.ts': `
+            export class AValue {}
+            export type AType = {};
+
+            export class AClass {
+              constructor(a: AType, b: AValue) {}
+            }
+          `
+        }
+      };
+      const appInput: MockDirectory = {
+        'app': {
+          'main.ts': `
+            export {AClass} from '../lib/base';
+          `
+        }
+      };
+
+      const {outDir: libOutDir} = compile([libInput, angularSummaryFiles], {useSummaries: true});
+      const {genFiles: appGenFiles} =
+          compile([appInput, libOutDir, angularSummaryFiles], {useSummaries: true});
+      const appNgFactory = appGenFiles.find((f) => f.genFileUrl === '/app/main.ngfactory.ts');
+      const appNgFactoryTs = toTypeScript(appNgFactory);
+      expect(appNgFactoryTs).not.toContain('AType');
+      expect(appNgFactoryTs).toContain('AValue');
+    });
+
+    it('should not reexport complex function calls', () => {
+      const libInput: MockDirectory = {
+        'lib': {
+          'base.ts': `
+            export class AClass {
+              constructor(arg: any) {}
+
+              static create(arg: any = null): AClass { return new AClass(arg); }
+
+              call(arg: any) {}
+            }
+
+            export function simple(arg: any) { return [arg]; }
+
+            export const ctor_arg = {};
+            export const ctor_call = new AClass(ctor_arg);
+
+            export const static_arg = {};
+            export const static_call = AClass.create(static_arg);
+
+            export const complex_arg = {};
+            export const complex_call = AClass.create().call(complex_arg);
+
+            export const simple_arg = {};
+            export const simple_call = simple(simple_arg);
+          `
+        }
+      };
+      const appInput: MockDirectory = {
+        'app': {
+          'main.ts': `
+            import {ctor_call, static_call, complex_call, simple_call} from '../lib/base';
+
+            export const calls = [ctor_call, static_call, complex_call, simple_call];
+          `,
+        }
+      };
+
+      const {outDir: libOutDir} = compile([libInput, angularSummaryFiles], {useSummaries: true});
+      const {genFiles: appGenFiles} =
+          compile([appInput, libOutDir, angularSummaryFiles], {useSummaries: true});
+      const appNgFactory = appGenFiles.find((f) => f.genFileUrl === '/app/main.ngfactory.ts');
+      const appNgFactoryTs = toTypeScript(appNgFactory);
+
+      // metadata of ctor calls is preserved, so we reexport the argument
+      expect(appNgFactoryTs).toContain('ctor_arg');
+      expect(appNgFactoryTs).toContain('ctor_call');
+
+      // metadata of static calls is preserved, so we reexport the argument
+      expect(appNgFactoryTs).toContain('static_arg');
+      expect(appNgFactoryTs).toContain('AClass');
+      expect(appNgFactoryTs).toContain('static_call');
+
+      // metadata of complex calls is elided, so we don't reexport the argument
+      expect(appNgFactoryTs).not.toContain('complex_arg');
+      expect(appNgFactoryTs).toContain('complex_call');
+
+      // metadata of simple calls is preserved, so we reexport the argument
+      expect(appNgFactoryTs).toContain('simple_arg');
+      expect(appNgFactoryTs).toContain('simple_call');
+    });
+
+    it('should not reexport already exported symbols except for lowered symbols', () => {
+      const libInput: MockDirectory = {
+        'lib': {
+          'base.ts': `
+            export const exportedVar = 1;
+
+            // A symbol introduced by lowering expressions
+            export const ɵ1 = 'lowered symbol';
+          `
+        }
+      };
+      const appInput: MockDirectory = {
+        'app': {
+          'main.ts': `export * from '../lib/base';`,
+        }
+      };
+
+      const {outDir: libOutDir} = compile([libInput, angularSummaryFiles], {useSummaries: true});
+      const {genFiles: appGenFiles} =
+          compile([appInput, libOutDir, angularSummaryFiles], {useSummaries: true});
+      const appNgFactory = appGenFiles.find((f) => f.genFileUrl === '/app/main.ngfactory.ts');
+      const appNgFactoryTs = toTypeScript(appNgFactory);
+
+      // we don't need to reexport exported symbols via the .ngfactory
+      // as we can refer to them via the reexport.
+      expect(appNgFactoryTs).not.toContain('exportedVar');
+
+      // although ɵ1 is reexported via `export *`, we still need to reexport it
+      // via the .ngfactory as tsickle expands `export *` into named exports,
+      // and doesn't know about our lowered symbols as we introduce them
+      // after the typecheck phase.
+      expect(appNgFactoryTs).toContain('ɵ1');
+    });
+  });
+
+  function inheritanceWithSummariesSpecs(getAngularSummaryFiles: () => MockDirectory) {
+    function compileParentAndChild(
+        {parentClassDecorator, parentModuleDecorator, childClassDecorator, childModuleDecorator}: {
+          parentClassDecorator: string,
+          parentModuleDecorator: string,
+          childClassDecorator: string,
+          childModuleDecorator: string
+        }) {
+      const libInput: MockDirectory = {
+        'lib': {
+          'base.ts': `
+              import {Injectable, Pipe, Directive, Component, NgModule} from '@angular/core';
+
+              ${parentClassDecorator}
+              export class Base {}
+
+              ${parentModuleDecorator}
+              export class BaseModule {}
+            `
+        }
+      };
+      const appInput: MockDirectory = {
+        'app': {
+          'main.ts': `
+              import {Injectable, Pipe, Directive, Component, NgModule} from '@angular/core';
+              import {Base} from '../lib/base';
+
+              ${childClassDecorator}
+              export class Extends extends Base {}
+
+              ${childModuleDecorator}
+              export class MyModule {}
+            `
+        }
+      };
+
+      const {outDir: libOutDir} =
+          compile([libInput, getAngularSummaryFiles()], {useSummaries: true});
+      const {genFiles} =
+          compile([libOutDir, appInput, getAngularSummaryFiles()], {useSummaries: true});
+      return genFiles.find(gf => gf.srcFileUrl === '/app/main.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 {
+              constructor(a: AParam) {}
+              ngOnDestroy() {}
+            }
+          `
+        }
+      };
+      const appInput: MockDirectory = {
+        'app': {
+          'main.ts': `
+            import {NgModule, Component} from '@angular/core';
+            import {Base} from '../lib/base';
+
+            @Component({template: ''})
+            export class Extends extends Base {}
+
+            @NgModule({
+              declarations: [Extends]
+            })
+            export class MyModule {}
+          `
+        }
+      };
+
+      const {outDir: libOutDir} =
+          compile([libInput, getAngularSummaryFiles()], {useSummaries: true});
+      const {genFiles} =
+          compile([libOutDir, appInput, getAngularSummaryFiles()], {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',
+       () => {
+         const lib1Input: MockDirectory = {
+           'lib1': {
+             'base.ts': `
+            export class AParam {}
+
+            export class Base {
+              constructor(a: AParam) {}
+              ngOnDestroy() {}
+            }
+          `
+           }
+         };
+
+         const lib2Input: MockDirectory = {
+           'lib2': {
+             'middle.ts': `
+            import {Base} from '../lib1/base';
+            export class Middle extends Base {}
+          `
+           }
+         };
+
+
+         const appInput: MockDirectory = {
+           'app': {
+             'main.ts': `
+            import {NgModule, Component} from '@angular/core';
+            import {Middle} from '../lib2/middle';
+
+            @Component({template: ''})
+            export class Extends extends Middle {}
+
+            @NgModule({
+              declarations: [Extends]
+            })
+            export class MyModule {}
+          `
+           }
+         };
+         const {outDir: lib1OutDir} =
+             compile([lib1Input, getAngularSummaryFiles()], {useSummaries: true});
+         const {outDir: lib2OutDir} =
+             compile([lib1OutDir, lib2Input, getAngularSummaryFiles()], {useSummaries: true});
+         const {genFiles} =
+             compile([lib2OutDir, appInput, getAngularSummaryFiles()], {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', () => {
+        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', () => {
+        expect(() => compileParentAndChild({
+                 parentClassDecorator: '@Injectable()',
+                 parentModuleDecorator: '@NgModule({providers: [Base]})',
+                 childClassDecorator: '',
+                 childModuleDecorator: '@NgModule({providers: [Extends]})',
+               }))
+            .toThrowError(`Error during template compile of 'Extends'
+  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', () => {
+        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', () => {
+        expect(() => compileParentAndChild({
+                 parentClassDecorator: `@Component({template: ''})`,
+                 parentModuleDecorator: '@NgModule({declarations: [Base]})',
+                 childClassDecorator: '',
+                 childModuleDecorator: '@NgModule({declarations: [Extends]})',
+               }))
+            .toThrowError(`Error during template compile of 'Extends'
+  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', () => {
+        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', () => {
+        expect(() => compileParentAndChild({
+                 parentClassDecorator: `@Directive({selector: '[someDir]'})`,
+                 parentModuleDecorator: '@NgModule({declarations: [Base]})',
+                 childClassDecorator: '',
+                 childModuleDecorator: '@NgModule({declarations: [Extends]})',
+               }))
+            .toThrowError(`Error during template compile of 'Extends'
+  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', () => {
+        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', () => {
+        expect(() => compileParentAndChild({
+                 parentClassDecorator: `@Pipe({name: 'somePipe'})`,
+                 parentModuleDecorator: '@NgModule({declarations: [Base]})',
+                 childClassDecorator: '',
+                 childModuleDecorator: '@NgModule({declarations: [Extends]})',
+               }))
+            .toThrowError(`Error during template compile of 'Extends'
+  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', () => {
+        const mainNgFactory = compileParentAndChild({
+          parentClassDecorator: `@NgModule()`,
+          parentModuleDecorator: '',
+          childClassDecorator: `@NgModule()`,
+          childModuleDecorator: '',
+        });
+        expect(mainNgFactory).toBeTruthy();
+      });
+
+      it('should error if the child class has no matching decorator', () => {
+        expect(() => compileParentAndChild({
+                 parentClassDecorator: `@NgModule()`,
+                 parentModuleDecorator: '',
+                 childClassDecorator: '',
+                 childModuleDecorator: '',
+               }))
+            .toThrowError(`Error during template compile of 'Extends'
+  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)', () => {
+  let angularFiles: Map<string, string> = setup();
+
+  beforeAll(() => {
+    if (!isInBazel()) {
+      // If we are not using Bazel then we need to build these files explicitly
+      const emittingHost = new EmittingCompilerHost(['@angular/core/index'], {emitMetadata: false});
+
+      // Create the metadata bundled
+      const indexModule = emittingHost.effectiveName('@angular/core/index');
+      const bundler = new MetadataBundler(
+          indexModule, '@angular/core', new MockMetadataBundlerHost(emittingHost));
+      const bundle = bundler.getMetadataBundle();
+      const metadata = JSON.stringify(bundle.metadata, null, ' ');
+      const bundleIndexSource = privateEntriesToIndex('./index', bundle.privates);
+      emittingHost.override('@angular/core/bundle_index.ts', bundleIndexSource);
+      emittingHost.addWrittenFile(
+          '@angular/core/package.json', JSON.stringify({typings: 'bundle_index.d.ts'}));
+      emittingHost.addWrittenFile('@angular/core/bundle_index.metadata.json', metadata);
+
+      // Emit the sources
+      const bundleIndexName = emittingHost.effectiveName('@angular/core/bundle_index.ts');
+      const emittingProgram = ts.createProgram([bundleIndexName], settings, emittingHost);
+      emittingProgram.emit();
+      angularFiles = emittingHost.writtenAngularFiles();
+    }
+  });
+
+  describe('Quickstart', () => {
+    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 support tsx', () => {
+      const tsOptions = {jsx: ts.JsxEmit.React};
+      const {genFiles} =
+          compile([QUICKSTART_TSX, angularFiles], /* options */ undefined, tsOptions);
+      expect(genFiles.find(f => /app\.component\.ngfactory\.ts/.test(f.genFileUrl))).toBeDefined();
+      expect(genFiles.find(f => /app\.module\.ngfactory\.ts/.test(f.genFileUrl))).toBeDefined();
+    });
+  });
+
+  describe('Bundled library', () => {
+    let libraryFiles: MockDirectory;
+
+    beforeAll(() => {
+      // Emit the library bundle
+      const emittingHost =
+          new EmittingCompilerHost(['/bolder/index.ts'], {emitMetadata: false, mockData: LIBRARY});
+
+      if (isInBazel()) {
+        // In bazel we can just add the angular files from the ones read during setup.
+        emittingHost.addFiles(angularFiles);
+      }
+
+      // Create the metadata bundled
+      const indexModule = '/bolder/public-api';
+      const bundler =
+          new MetadataBundler(indexModule, 'bolder', new MockMetadataBundlerHost(emittingHost));
+      const bundle = bundler.getMetadataBundle();
+      const metadata = JSON.stringify(bundle.metadata, null, ' ');
+      const bundleIndexSource = privateEntriesToIndex('./public-api', bundle.privates);
+      emittingHost.override('/bolder/index.ts', bundleIndexSource);
+      emittingHost.addWrittenFile('/bolder/index.metadata.json', metadata);
+
+      // Emit the sources
+      const emittingProgram = ts.createProgram(['/bolder/index.ts'], settings, emittingHost);
+      emittingProgram.emit();
+      const libFiles = emittingHost.written;
+
+      // Copy the .html file
+      const htmlFileName = '/bolder/src/bolder.component.html';
+      libFiles.set(htmlFileName, emittingHost.readFile(htmlFileName));
+
+      libraryFiles = arrayToMockDir(toMockFileArray(libFiles).map(
+          ({fileName, content}) => ({fileName: `/node_modules${fileName}`, content})));
+    });
+
+    it('should compile', () => compile([LIBRARY_USING_APP, libraryFiles, angularFiles]));
+  });
+});
+
+
+const QUICKSTART: MockDirectory = {
+  quickstart: {
+    app: {
+      'app.component.ts': `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '<h1>Hello {{name}}</h1>'
+        })
+        export class AppComponent {
+          name = 'Angular';
+        }
+      `,
+      '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 { }
+      `,
+      // #15420
+      'utils.ts': `
+        export function toString(value: any): string {
+          return  '';
+        }
+      `
+    }
+  }
+};
+
+const QUICKSTART_TSX: MockDirectory = {
+  quickstart: {
+    app: {
+      // #20555
+      'app.component.tsx': `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '<h1>Hello {{name}}</h1>'
+        })
+        export class AppComponent {
+          name = 'Angular';
+        }
+      `,
+      'app.module.ts': `
+        import { NgModule }      from '@angular/core';
+        import { AppComponent }  from './app.component';
+
+        @NgModule({
+          declarations: [ AppComponent ],
+          bootstrap:    [ AppComponent ]
+        })
+        export class AppModule { }
+      `
+    }
+  }
+};
+
+const LIBRARY: MockDirectory = {
+  bolder: {
+    'public-api.ts': `
+      export * from './src/bolder.component';
+      export * from './src/bolder.module';
+      export {BolderModule as ReExportedModule} from './src/bolder.module';
+    `,
+    src: {
+      'bolder.component.ts': `
+        import {Component, Input} from '@angular/core';
+
+        @Component({
+          selector: 'bolder',
+          templateUrl: './bolder.component.html'
+        })
+        export class BolderComponent {
+          @Input() data: string;
+        }
+      `,
+      'bolder.component.html': `
+        <b>{{data}}</b>
+      `,
+      'bolder.module.ts': `
+        import {NgModule} from '@angular/core';
+        import {BolderComponent} from './bolder.component';
+
+        @NgModule({
+          declarations: [BolderComponent],
+          exports: [BolderComponent]
+        })
+        export class BolderModule {}
+      `
+    }
+  }
+};
+
+const LIBRARY_USING_APP: MockDirectory = {
+  'lib-user': {
+    app: {
+      'app.component.ts': `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '<h1>Hello <bolder [data]="name"></bolder></h1>'
+        })
+        export class AppComponent {
+          name = 'Angular';
+        }
+      `,
+      'app.module.ts': `
+        import { NgModule }      from '@angular/core';
+        import { BolderModule }  from 'bolder';
+
+        import { AppComponent }  from './app.component';
+
+        @NgModule({
+          declarations: [ AppComponent ],
+          bootstrap:    [ AppComponent ],
+          imports:      [ BolderModule ]
+        })
+        export class AppModule { }
+      `
+    }
+  }
+};
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 000000000000..699a484d3d23
--- /dev/null
+++ b/packages/compiler/test/aot/jit_summaries_spec.ts
@@ -0,0 +1,350 @@
+/**
+ * @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();
+  let angularSummaryFiles: MockDirectory;
+
+  beforeEach(() => {
+    angularSummaryFiles = compile(angularFiles, {useSummaries: false, emit: true}).outDir;
+  });
+
+  function compileApp(rootDir: MockDirectory, options: {useSummaries?: boolean} = {}):
+      {genFiles: GeneratedFile[], outDir: MockDirectory} {
+    return compile(
+        [rootDir, options.useSummaries ? angularSummaryFiles : 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 ' +
+         'across 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 000000000000..8c768559a133
--- /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
new file mode 100644
index 000000000000..a2eb19614287
--- /dev/null
+++ b/packages/compiler/test/aot/static_reflector_spec.ts
@@ -0,0 +1,1703 @@
+/**
+ * @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 {StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, StaticSymbolResolverHost, core as compilerCore} from '@angular/compiler';
+import {CollectorOptions, METADATA_VERSION} from '@angular/compiler-cli';
+
+import {MockStaticSymbolResolverHost, MockSummaryResolver} from './static_symbol_resolver_spec';
+
+describe('StaticReflector', () => {
+  let noContext: StaticSymbol;
+  let host: StaticSymbolResolverHost;
+  let symbolResolver: StaticSymbolResolver;
+  let reflector: StaticReflector;
+
+  function init(
+      testData: {[key: string]: any} = DEFAULT_TEST_DATA,
+      decorators: {name: string, filePath: string, ctor: any}[] = [],
+      errorRecorder?: (error: any, fileName: string) => void, collectorOptions?: CollectorOptions) {
+    const symbolCache = new StaticSymbolCache();
+    host = new MockStaticSymbolResolverHost(testData, collectorOptions);
+    const summaryResolver = new MockSummaryResolver([]);
+    spyOn(summaryResolver, 'isLibraryFile').and.returnValue(false);
+    symbolResolver = new StaticSymbolResolver(host, symbolCache, summaryResolver, errorRecorder);
+    reflector = new StaticReflector(summaryResolver, symbolResolver, decorators, [], errorRecorder);
+    noContext = reflector.getStaticSymbol('', '');
+  }
+
+  beforeEach(() => init());
+
+  function simplify(context: StaticSymbol, value: any) {
+    return (reflector as any).simplify(context, value);
+  }
+
+  it('should get annotations for NgFor', () => {
+    const NgFor = reflector.findDeclaration('@angular/common/src/directives/ng_for', 'NgFor');
+    const annotations = reflector.annotations(NgFor);
+    expect(annotations.length).toEqual(1);
+    const annotation = annotations[0];
+    expect(annotation.selector).toEqual('[ngFor][ngForOf]');
+    expect(annotation.inputs).toEqual(['ngForTrackBy', 'ngForOf', 'ngForTemplate']);
+  });
+
+  it('should get constructor for NgFor', () => {
+    const NgFor = reflector.findDeclaration('@angular/common/src/directives/ng_for', 'NgFor');
+    const ViewContainerRef = reflector.findDeclaration('@angular/core', 'ViewContainerRef');
+    const TemplateRef = reflector.findDeclaration('@angular/core', 'TemplateRef');
+    const IterableDiffers = reflector.findDeclaration('@angular/core', 'IterableDiffers');
+    const ChangeDetectorRef = reflector.findDeclaration('@angular/core', 'ChangeDetectorRef');
+
+    const parameters = reflector.parameters(NgFor);
+    expect(parameters).toEqual([
+      [ViewContainerRef], [TemplateRef], [IterableDiffers], [ChangeDetectorRef]
+    ]);
+  });
+
+  it('should get annotations for HeroDetailComponent', () => {
+    const HeroDetailComponent =
+        reflector.findDeclaration('src/app/hero-detail.component', 'HeroDetailComponent');
+    const annotations = reflector.annotations(HeroDetailComponent);
+    expect(annotations.length).toEqual(1);
+    const annotation = annotations[0];
+    expect(annotation.selector).toEqual('my-hero-detail');
+  });
+
+  it('should get and empty annotation list for an unknown class', () => {
+    const UnknownClass = reflector.findDeclaration('src/app/app.component', 'UnknownClass');
+    const annotations = reflector.annotations(UnknownClass);
+    expect(annotations).toEqual([]);
+  });
+
+  it('should get and empty annotation list for a symbol with null value', () => {
+    init({
+      '/tmp/test.ts': `
+        export var x = null;
+      `
+    });
+    const annotations = reflector.annotations(reflector.getStaticSymbol('/tmp/test.ts', 'x'));
+    expect(annotations).toEqual([]);
+  });
+
+  it('should get propMetadata for HeroDetailComponent', () => {
+    const HeroDetailComponent =
+        reflector.findDeclaration('src/app/hero-detail.component', 'HeroDetailComponent');
+    const props = reflector.propMetadata(HeroDetailComponent);
+    expect(props['hero']).toBeTruthy();
+    expect(props['onMouseOver']).toEqual([compilerCore.createHostListener(
+        'mouseover', ['$event'])]);
+  });
+
+  it('should get an empty object from propMetadata for an unknown class', () => {
+    const UnknownClass = reflector.findDeclaration('src/app/app.component', 'UnknownClass');
+    const properties = reflector.propMetadata(UnknownClass);
+    expect(properties).toEqual({});
+  });
+
+  it('should get empty parameters list for an unknown class ', () => {
+    const UnknownClass = reflector.findDeclaration('src/app/app.component', 'UnknownClass');
+    const parameters = reflector.parameters(UnknownClass);
+    expect(parameters).toEqual([]);
+  });
+
+  it('should provide context for errors reported by the collector', () => {
+    const SomeClass = reflector.findDeclaration('src/error-reporting', 'SomeClass');
+    expect(() => reflector.annotations(SomeClass))
+        .toThrow(new Error(`Error during template compile of 'SomeClass'
+  A reasonable error message in 'Link1'
+    'Link1' references 'Link2'
+      'Link2' references 'ErrorSym'
+        'ErrorSym' contains the error at /tmp/src/error-references.ts(13,34).`));
+  });
+
+  it('should simplify primitive into itself', () => {
+    expect(simplify(noContext, 1)).toBe(1);
+    expect(simplify(noContext, true)).toBe(true);
+    expect(simplify(noContext, 'some value')).toBe('some value');
+  });
+
+  it('should simplify a static symbol into itself', () => {
+    const staticSymbol = reflector.getStaticSymbol('', '');
+    expect(simplify(noContext, staticSymbol)).toBe(staticSymbol);
+  });
+
+  it('should simplify an array into a copy of the array', () => {
+    expect(simplify(noContext, [1, 2, 3])).toEqual([1, 2, 3]);
+  });
+
+  it('should simplify an object to a copy of the object', () => {
+    const expr = {a: 1, b: 2, c: 3};
+    expect(simplify(noContext, expr)).toEqual(expr);
+  });
+
+  it('should simplify &&', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '&&', left: true, right: true})))
+        .toBe(true);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '&&', left: true, right: false})))
+        .toBe(false);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '&&', left: false, right: true})))
+        .toBe(false);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '&&', left: false, right: false})))
+        .toBe(false);
+  });
+
+  it('should simplify ||', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '||', left: true, right: true})))
+        .toBe(true);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '||', left: true, right: false})))
+        .toBe(true);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '||', left: false, right: true})))
+        .toBe(true);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '||', left: false, right: false})))
+        .toBe(false);
+  });
+
+  it('should simplify &', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '&', left: 0x22, right: 0x0F})))
+        .toBe(0x22 & 0x0F);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '&', left: 0x22, right: 0xF0})))
+        .toBe(0x22 & 0xF0);
+  });
+
+  it('should simplify |', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '|', left: 0x22, right: 0x0F})))
+        .toBe(0x22 | 0x0F);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '|', left: 0x22, right: 0xF0})))
+        .toBe(0x22 | 0xF0);
+  });
+
+  it('should simplify ^', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '|', left: 0x22, right: 0x0F})))
+        .toBe(0x22 | 0x0F);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '|', left: 0x22, right: 0xF0})))
+        .toBe(0x22 | 0xF0);
+  });
+
+  it('should simplify ==', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '==', left: 0x22, right: 0x22})))
+        .toBe(0x22 == 0x22);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '==', left: 0x22, right: 0xF0})))
+        .toBe(0x22 as any == 0xF0);
+  });
+
+  it('should simplify !=', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '!=', left: 0x22, right: 0x22})))
+        .toBe(0x22 != 0x22);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '!=', left: 0x22, right: 0xF0})))
+        .toBe(0x22 as any != 0xF0);
+  });
+
+  it('should simplify ===', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '===', left: 0x22, right: 0x22})))
+        .toBe(0x22 === 0x22);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '===', left: 0x22, right: 0xF0})))
+        .toBe(0x22 as any === 0xF0);
+  });
+
+  it('should simplify !==', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '!==', left: 0x22, right: 0x22})))
+        .toBe(0x22 !== 0x22);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '!==', left: 0x22, right: 0xF0})))
+        .toBe(0x22 as any !== 0xF0);
+  });
+
+  it('should simplify >', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '>', left: 1, right: 1})))
+        .toBe(1 > 1);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '>', left: 1, right: 0})))
+        .toBe(1 > 0);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '>', left: 0, right: 1})))
+        .toBe(0 > 1);
+  });
+
+  it('should simplify >=', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '>=', left: 1, right: 1})))
+        .toBe(1 >= 1);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '>=', left: 1, right: 0})))
+        .toBe(1 >= 0);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '>=', left: 0, right: 1})))
+        .toBe(0 >= 1);
+  });
+
+  it('should simplify <=', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '<=', left: 1, right: 1})))
+        .toBe(1 <= 1);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '<=', left: 1, right: 0})))
+        .toBe(1 <= 0);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '<=', left: 0, right: 1})))
+        .toBe(0 <= 1);
+  });
+
+  it('should simplify <', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '<', left: 1, right: 1})))
+        .toBe(1 < 1);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '<', left: 1, right: 0})))
+        .toBe(1 < 0);
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '<', left: 0, right: 1})))
+        .toBe(0 < 1);
+  });
+
+  it('should simplify <<', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '<<', left: 0x55, right: 2})))
+        .toBe(0x55 << 2);
+  });
+
+  it('should simplify >>', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '>>', left: 0x55, right: 2})))
+        .toBe(0x55 >> 2);
+  });
+
+  it('should simplify +', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '+', left: 0x55, right: 2})))
+        .toBe(0x55 + 2);
+  });
+
+  it('should simplify -', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '-', left: 0x55, right: 2})))
+        .toBe(0x55 - 2);
+  });
+
+  it('should simplify *', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '*', left: 0x55, right: 2})))
+        .toBe(0x55 * 2);
+  });
+
+  it('should simplify /', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '/', left: 0x55, right: 2})))
+        .toBe(0x55 / 2);
+  });
+
+  it('should simplify %', () => {
+    expect(simplify(noContext, ({__symbolic: 'binop', operator: '%', left: 0x55, right: 2})))
+        .toBe(0x55 % 2);
+  });
+
+  it('should simplify prefix -', () => {
+    expect(simplify(noContext, ({__symbolic: 'pre', operator: '-', operand: 2}))).toBe(-2);
+  });
+
+  it('should simplify prefix ~', () => {
+    expect(simplify(noContext, ({__symbolic: 'pre', operator: '~', operand: 2}))).toBe(~2);
+  });
+
+  it('should simplify prefix !', () => {
+    expect(simplify(noContext, ({__symbolic: 'pre', operator: '!', operand: true}))).toBe(!true);
+    expect(simplify(noContext, ({__symbolic: 'pre', operator: '!', operand: false}))).toBe(!false);
+  });
+
+  it('should simplify an array index', () => {
+    expect(simplify(noContext, ({__symbolic: 'index', expression: [1, 2, 3], index: 2}))).toBe(3);
+  });
+
+  it('should simplify an object index', () => {
+    const expr = {__symbolic: 'select', expression: {a: 1, b: 2, c: 3}, member: 'b'};
+    expect(simplify(noContext, expr)).toBe(2);
+  });
+
+  it('should simplify a file reference', () => {
+    expect(simplify(
+               reflector.getStaticSymbol('/src/cases', ''),
+               reflector.getStaticSymbol('/src/extern.d.ts', 's')))
+        .toEqual('s');
+  });
+
+  it('should simplify a non existing reference as a static symbol', () => {
+    expect(simplify(
+               reflector.getStaticSymbol('/src/cases', ''),
+               reflector.getStaticSymbol('/src/extern.d.ts', 'nonExisting')))
+        .toEqual(reflector.getStaticSymbol('/src/extern.d.ts', 'nonExisting'));
+  });
+
+  it('should simplify a function reference as a static symbol', () => {
+    expect(simplify(
+               reflector.getStaticSymbol('/src/cases', 'myFunction'),
+               ({__symbolic: 'function', parameters: ['a'], value: []})))
+        .toEqual(reflector.getStaticSymbol('/src/cases', 'myFunction'));
+  });
+
+  it('should simplify values initialized with a function call', () => {
+    expect(simplify(
+               reflector.getStaticSymbol('/tmp/src/function-reference.ts', ''),
+               reflector.getStaticSymbol('/tmp/src/function-reference.ts', 'one')))
+        .toEqual(['some-value']);
+    expect(simplify(
+               reflector.getStaticSymbol('/tmp/src/function-reference.ts', ''),
+               reflector.getStaticSymbol('/tmp/src/function-reference.ts', 'three')))
+        .toEqual(3);
+  });
+
+  it('should error on direct recursive calls', () => {
+    expect(
+        () => simplify(
+            reflector.getStaticSymbol('/tmp/src/function-reference.ts', 'MyComp'),
+            reflector.getStaticSymbol('/tmp/src/function-reference.ts', 'recursion')))
+        .toThrow(new Error(`Error during template compile of 'MyComp'
+  Recursion is not supported in 'recursion'
+    'recursion' references 'recursive'
+      'recursive' called 'recursive' recursively.`));
+  });
+
+  it('should throw a SyntaxError without stack trace when the required resource cannot be resolved',
+     () => {
+       expect(
+           () => simplify(
+               reflector.getStaticSymbol('/tmp/src/function-reference.ts', 'AppModule'), ({
+                 __symbolic: 'error',
+                 message:
+                     'Could not resolve ./does-not-exist.component relative to /tmp/src/function-reference.ts'
+               })))
+           .toThrowError(`Error during template compile of 'AppModule'
+  Could not resolve ./does-not-exist.component relative to /tmp/src/function-reference.ts.`);
+     });
+
+  it('should record data about the error in the exception', () => {
+    let threw = false;
+    try {
+      const metadata = host.getMetadataFor('/tmp/src/invalid-metadata.ts') !;
+      expect(metadata).toBeDefined();
+      const moduleMetadata: any = metadata[0]['metadata'];
+      expect(moduleMetadata).toBeDefined();
+      const classData: any = moduleMetadata['InvalidMetadata'];
+      expect(classData).toBeDefined();
+      simplify(
+          reflector.getStaticSymbol('/tmp/src/invalid-metadata.ts', ''),
+          classData.decorators[0].arguments);
+    } catch (e) {
+      expect(e.position).toBeDefined();
+      threw = true;
+    }
+    expect(threw).toBe(true);
+  });
+
+  it('should error on indirect recursive calls', () => {
+    expect(
+        () => simplify(
+            reflector.getStaticSymbol('/tmp/src/function-reference.ts', 'MyComp'),
+            reflector.getStaticSymbol('/tmp/src/function-reference.ts', 'indirectRecursion')))
+        .toThrow(new Error(`Error during template compile of 'MyComp'
+  Recursion is not supported in 'indirectRecursion'
+    'indirectRecursion' references 'indirectRecursion1'
+      'indirectRecursion1' references 'indirectRecursion2'
+        'indirectRecursion2' called 'indirectRecursion1' recursively.`));
+  });
+
+  it('should simplify a spread expression', () => {
+    expect(simplify(
+               reflector.getStaticSymbol('/tmp/src/spread.ts', ''),
+               reflector.getStaticSymbol('/tmp/src/spread.ts', 'spread')))
+        .toEqual([0, 1, 2, 3, 4, 5]);
+  });
+
+  it('should be able to get metadata for a class containing a custom decorator', () => {
+    const props = reflector.propMetadata(
+        reflector.getStaticSymbol('/tmp/src/custom-decorator-reference.ts', 'Foo'));
+    expect(props).toEqual({foo: []});
+  });
+
+  it('should read ctor parameters with forwardRef', () => {
+    const src = '/tmp/src/forward-ref.ts';
+    const dep = reflector.getStaticSymbol(src, 'Dep');
+    const props = reflector.parameters(reflector.getStaticSymbol(src, 'Forward'));
+    expect(props).toEqual([[dep, compilerCore.createInject(dep)]]);
+  });
+
+  it('should report an error for invalid function calls', () => {
+    expect(
+        () => reflector.annotations(
+            reflector.getStaticSymbol('/tmp/src/invalid-calls.ts', 'MyComponent')))
+        .toThrow(new Error(
+            `/tmp/src/invalid-calls.ts(8,29): Error during template compile of 'MyComponent'
+  Function calls are not supported in decorators but 'someFunction' was called.`));
+  });
+
+  it('should be able to get metadata for a class containing a static method call', () => {
+    const annotations = reflector.annotations(
+        reflector.getStaticSymbol('/tmp/src/static-method-call.ts', 'MyComponent'));
+    expect(annotations.length).toBe(1);
+    expect(annotations[0].providers).toEqual({provider: 'a', useValue: 100});
+  });
+
+  it('should be able to get metadata for a class containing a static field reference', () => {
+    const annotations = reflector.annotations(
+        reflector.getStaticSymbol('/tmp/src/static-field-reference.ts', 'Foo'));
+    expect(annotations.length).toBe(1);
+    expect(annotations[0].providers).toEqual([{provider: 'a', useValue: 'Some string'}]);
+  });
+
+  it('should be able to get the metadata for a class calling a method with a conditional expression',
+     () => {
+       const annotations = reflector.annotations(
+           reflector.getStaticSymbol('/tmp/src/static-method-call.ts', 'MyCondComponent'));
+       expect(annotations.length).toBe(1);
+       expect(annotations[0].providers).toEqual([
+         [{provider: 'a', useValue: '1'}], [{provider: 'a', useValue: '2'}]
+       ]);
+     });
+
+  it('should be able to get metadata for a class with nested method calls', () => {
+    const annotations = reflector.annotations(
+        reflector.getStaticSymbol('/tmp/src/static-method-call.ts', 'MyFactoryComponent'));
+    expect(annotations.length).toBe(1);
+    expect(annotations[0].providers).toEqual({
+      provide: 'c',
+      useFactory:
+          reflector.getStaticSymbol('/tmp/src/static-method.ts', 'AnotherModule', ['someFactory'])
+    });
+  });
+
+  it('should be able to get the metadata for a class calling a method with default parameters',
+     () => {
+       const annotations = reflector.annotations(
+           reflector.getStaticSymbol('/tmp/src/static-method-call.ts', 'MyDefaultsComponent'));
+       expect(annotations.length).toBe(1);
+       expect(annotations[0].providers).toEqual([['a', true, false]]);
+     });
+
+  it('should be able to get metadata with a reference to a static method', () => {
+    const annotations = reflector.annotations(
+        reflector.getStaticSymbol('/tmp/src/static-method-ref.ts', 'MethodReference'));
+    expect(annotations.length).toBe(1);
+    expect(annotations[0].providers[0].useValue.members[0]).toEqual('staticMethod');
+  });
+
+  it('should be able to get metadata for a class calling a macro function', () => {
+    const annotations = reflector.annotations(
+        reflector.getStaticSymbol('/tmp/src/call-macro-function.ts', 'MyComponent'));
+    expect(annotations.length).toBe(1);
+    expect(annotations[0].providers.useValue).toBe(100);
+  });
+
+  it('should be able to get metadata for a class calling a nested macro function', () => {
+    const annotations = reflector.annotations(
+        reflector.getStaticSymbol('/tmp/src/call-macro-function.ts', 'MyComponentNested'));
+    expect(annotations.length).toBe(1);
+    expect(annotations[0].providers.useValue.useValue).toBe(100);
+  });
+
+  // #13605
+  it('should not throw on unknown decorators', () => {
+    const data = Object.create(DEFAULT_TEST_DATA);
+    const file = '/tmp/src/app.component.ts';
+    data[file] = `
+      import { Component } from '@angular/core';
+
+      export const enum TypeEnum {
+        type
+      }
+
+      export function MyValidationDecorator(p1: any, p2: any): any {
+        return null;
+      }
+
+      export function ValidationFunction(a1: any): any {
+        return null;
+      }
+
+      @Component({
+        selector: 'my-app',
+        template: "<h1>Hello {{name}}</h1>",
+      })
+      export class AppComponent  {
+        name = 'Angular';
+
+        @MyValidationDecorator( TypeEnum.type, ValidationFunction({option: 'value'}))
+        myClassProp: number;
+    }`;
+    init(data);
+    const appComponent = reflector.getStaticSymbol(file, 'AppComponent');
+    expect(() => reflector.propMetadata(appComponent)).not.toThrow();
+  });
+
+  it('should not throw with an invalid extends', () => {
+    const data = Object.create(DEFAULT_TEST_DATA);
+    const file = '/tmp/src/invalid-component.ts';
+    data[file] = `
+        import {Component} from '@angular/core';
+
+        function InvalidParent() {
+          return InvalidParent;
+        }
+
+        @Component({
+          selector: 'tmp',
+          template: '',
+        })
+        export class BadComponent extends InvalidParent() {
+
+        }
+      `;
+    init(data);
+    const badComponent = reflector.getStaticSymbol(file, 'BadComponent');
+    expect(reflector.propMetadata(badComponent)).toEqual({});
+    expect(reflector.parameters(badComponent)).toEqual([]);
+    expect(reflector.hasLifecycleHook(badComponent, 'onDestroy')).toEqual(false);
+  });
+
+  it('should produce a annotation even if it contains errors', () => {
+    const data = Object.create(DEFAULT_TEST_DATA);
+    const file = '/tmp/src/invalid-component.ts';
+    data[file] = `
+        import {Component} from '@angular/core';
+
+        @Component({
+          selector: 'tmp',
+          template: () => {},
+          providers: [1, 2, (() => {}), 3, !(() => {}), 4, 5, (() => {}) + (() => {}), 6, 7]
+        })
+        export class BadComponent {
+
+        }
+      `;
+    init(data, [], () => {}, {verboseInvalidExpression: true});
+
+    const badComponent = reflector.getStaticSymbol(file, 'BadComponent');
+    const annotations = reflector.annotations(badComponent);
+    const annotation = annotations[0];
+    expect(annotation.selector).toEqual('tmp');
+    expect(annotation.template).toBeUndefined();
+    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(compilerCore.createInject.isTypeOf(parameters[0][0])).toBe(true);
+  });
+
+  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) {}
+    }
+
+    class ParamDecorator {
+      constructor(public value: any) {}
+    }
+
+    class PropDecorator {
+      constructor(public value: any) {}
+    }
+
+    function initWithDecorator(testData: {[key: string]: any}) {
+      testData['/tmp/src/decorator.ts'] = `
+            export function ClassDecorator(): any {}
+            export function ParamDecorator(): any {}
+            export function PropDecorator(): any {}
+      `;
+      init(testData, [
+        {filePath: '/tmp/src/decorator.ts', name: 'ClassDecorator', ctor: ClassDecorator},
+        {filePath: '/tmp/src/decorator.ts', name: 'ParamDecorator', ctor: ParamDecorator},
+        {filePath: '/tmp/src/decorator.ts', name: 'PropDecorator', ctor: PropDecorator}
+      ]);
+    }
+
+    it('should inherit annotations', () => {
+      initWithDecorator({
+        '/tmp/src/main.ts': `
+            import {ClassDecorator} from './decorator';
+
+            @ClassDecorator('parent')
+            export class Parent {}
+
+            @ClassDecorator('child')
+            export class Child extends Parent {}
+
+            export class ChildNoDecorators extends Parent {}
+
+            export class ChildInvalidParent extends a.InvalidParent {}
+          `
+      });
+
+      // Check that metadata for Parent was not changed!
+      expect(reflector.annotations(reflector.getStaticSymbol('/tmp/src/main.ts', 'Parent')))
+          .toEqual([new ClassDecorator('parent')]);
+
+      expect(reflector.annotations(reflector.getStaticSymbol('/tmp/src/main.ts', 'Child')))
+          .toEqual([new ClassDecorator('parent'), new ClassDecorator('child')]);
+
+      expect(
+          reflector.annotations(reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildNoDecorators')))
+          .toEqual([new ClassDecorator('parent')]);
+
+      expect(reflector.annotations(
+                 reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildInvalidParent')))
+          .toEqual([]);
+    });
+
+    it('should inherit parameters', () => {
+      initWithDecorator({
+        '/tmp/src/main.ts': `
+            import {ParamDecorator} from './decorator';
+
+            export class A {}
+            export class B {}
+            export class C {}
+
+            export class Parent {
+              constructor(@ParamDecorator('a') a: A, @ParamDecorator('b') b: B) {}
+            }
+
+            export class Child extends Parent {}
+
+            export class ChildWithCtor extends Parent {
+              constructor(@ParamDecorator('c') c: C) {}
+            }
+
+            export class ChildInvalidParent extends a.InvalidParent {}
+          `
+      });
+
+      // Check that metadata for Parent was not changed!
+      expect(reflector.parameters(reflector.getStaticSymbol('/tmp/src/main.ts', 'Parent')))
+          .toEqual([
+            [reflector.getStaticSymbol('/tmp/src/main.ts', 'A'), new ParamDecorator('a')],
+            [reflector.getStaticSymbol('/tmp/src/main.ts', 'B'), new ParamDecorator('b')]
+          ]);
+
+      expect(reflector.parameters(reflector.getStaticSymbol('/tmp/src/main.ts', 'Child'))).toEqual([
+        [reflector.getStaticSymbol('/tmp/src/main.ts', 'A'), new ParamDecorator('a')],
+        [reflector.getStaticSymbol('/tmp/src/main.ts', 'B'), new ParamDecorator('b')]
+      ]);
+
+      expect(reflector.parameters(reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildWithCtor')))
+          .toEqual([[reflector.getStaticSymbol('/tmp/src/main.ts', 'C'), new ParamDecorator('c')]]);
+
+      expect(
+          reflector.parameters(reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildInvalidParent')))
+          .toEqual([]);
+    });
+
+    it('should inherit property metadata', () => {
+      initWithDecorator({
+        '/tmp/src/main.ts': `
+            import {PropDecorator} from './decorator';
+
+            export class A {}
+            export class B {}
+            export class C {}
+
+            export class Parent {
+              @PropDecorator('a')
+              a: A;
+              @PropDecorator('b1')
+              b: B;
+            }
+
+            export class Child extends Parent {
+              @PropDecorator('b2')
+              b: B;
+              @PropDecorator('c')
+              c: C;
+            }
+
+            export class ChildInvalidParent extends a.InvalidParent {}
+          `
+      });
+
+      // Check that metadata for Parent was not changed!
+      expect(reflector.propMetadata(reflector.getStaticSymbol('/tmp/src/main.ts', 'Parent')))
+          .toEqual({
+            'a': [new PropDecorator('a')],
+            'b': [new PropDecorator('b1')],
+          });
+
+      expect(reflector.propMetadata(reflector.getStaticSymbol('/tmp/src/main.ts', 'Child')))
+          .toEqual({
+            'a': [new PropDecorator('a')],
+            'b': [new PropDecorator('b1'), new PropDecorator('b2')],
+            'c': [new PropDecorator('c')]
+          });
+
+      expect(reflector.propMetadata(
+                 reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildInvalidParent')))
+          .toEqual({});
+    });
+
+    it('should inherit lifecycle hooks', () => {
+      initWithDecorator({
+        '/tmp/src/main.ts': `
+            export class Parent {
+              hook1() {}
+              hook2() {}
+            }
+
+            export class Child extends Parent {
+              hook2() {}
+              hook3() {}
+            }
+
+            export class ChildInvalidParent extends a.InvalidParent {}
+          `
+      });
+
+      function hooks(symbol: StaticSymbol, names: string[]): boolean[] {
+        return names.map(name => reflector.hasLifecycleHook(symbol, name));
+      }
+
+      // Check that metadata for Parent was not changed!
+      expect(hooks(reflector.getStaticSymbol('/tmp/src/main.ts', 'Parent'), [
+        'hook1', 'hook2', 'hook3'
+      ])).toEqual([true, true, false]);
+
+      expect(hooks(reflector.getStaticSymbol('/tmp/src/main.ts', 'Child'), [
+        'hook1', 'hook2', 'hook3'
+      ])).toEqual([true, true, true]);
+
+      expect(hooks(reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildInvalidParent'), [
+        'hook1', 'hook2', 'hook3'
+      ])).toEqual([false, false, false]);
+    });
+
+    it('should allow inheritance from expressions', () => {
+      initWithDecorator({
+        '/tmp/src/main.ts': `
+            export function metaClass() { return null; };
+            export class Child extends metaClass() {}
+          `
+      });
+
+      expect(reflector.annotations(reflector.getStaticSymbol('/tmp/src/main.ts', 'Child')))
+          .toEqual([]);
+    });
+
+    it('should allow inheritance from functions', () => {
+      initWithDecorator({
+        '/tmp/src/main.ts': `
+            export let ctor: {new(): T} = function() { return null; }
+            export class Child extends ctor {}
+          `
+      });
+
+      expect(reflector.annotations(reflector.getStaticSymbol('/tmp/src/main.ts', 'Child')))
+          .toEqual([]);
+    });
+
+    it('should support constructor parameters with @Inject and an interface type', () => {
+      const data = Object.create(DEFAULT_TEST_DATA);
+      const file = '/tmp/src/inject_interface.ts';
+      data[file] = `
+        import {Injectable, Inject} from '@angular/core';
+        import {F} from './f';
+
+        export interface InjectedInterface {
+
+        }
+
+        export class Token {}
+
+        @Injectable()
+        export class SomeClass {
+          constructor (@Inject(Token) injected: InjectedInterface, t: Token, @Inject(Token) f: F) {}
+        }
+      `;
+
+      init(data);
+
+      expect(reflector.parameters(reflector.getStaticSymbol(file, 'SomeClass'))[0].length)
+          .toEqual(1);
+    });
+  });
+
+  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'));
+    });
+  });
+
+  // Regression #18170
+  it('should continue to aggresively evaluate enum member accessors', () => {
+    const data = Object.create(DEFAULT_TEST_DATA);
+    const file = '/tmp/src/my_component.ts';
+    data[file] = `
+      import {Component} from '@angular/core';
+      import {intermediate} from './index';
+
+      @Component({
+        template: '<div></div>',
+        providers: [{provide: 'foo', useValue: [...intermediate]}]
+      })
+      export class MyComponent { }
+    `;
+    data['/tmp/src/intermediate.ts'] = `
+      import {MyEnum} from './indirect';
+      export const intermediate = [{
+        data: {
+          c: [MyEnum.Value]
+        }
+      }];`;
+    data['/tmp/src/index.ts'] = `export * from './intermediate';`;
+    data['/tmp/src/indirect.ts'] = `export * from './consts';`;
+    data['/tmp/src/consts.ts'] = `
+      export enum MyEnum {
+        Value = 3
+      }
+    `;
+    init(data);
+
+    expect(reflector.annotations(reflector.getStaticSymbol(file, 'MyComponent'))[0]
+               .providers[0]
+               .useValue)
+        .toEqual([{data: {c: [3]}}]);
+  });
+
+  // Regression #18170
+  it('should evaluate enums and statics that are 0', () => {
+    const data = Object.create(DEFAULT_TEST_DATA);
+    const file = '/tmp/src/my_component.ts';
+    data[file] = `
+      import {Component} from '@angular/core';
+      import {provideRoutes} from './macro';
+      import {MyEnum, MyClass} from './consts';
+
+      @Component({
+        template: '<div></div>',
+        providers: [provideRoutes({
+          path: 'foo',
+          data: {
+            e: MyEnum.Value
+          }
+        })]
+      })
+      export class MyComponent { }
+    `;
+    data['/tmp/src/macro.ts'] = `
+      import {ANALYZE_FOR_ENTRY_COMPONENTS, ROUTES} from '@angular/core';
+
+      export interface Route {
+        path?: string;
+        data?: any;
+      }
+      export type Routes = Route[];
+      export function provideRoutes(routes: Routes): any {
+        return [
+          {provide: ANALYZE_FOR_ENTRY_COMPONENTS, multi: true, useValue: routes},
+          {provide: ROUTES, multi: true, useValue: routes},
+        ];
+      }
+    `;
+    data['/tmp/src/consts.ts'] = `
+      export enum MyEnum {
+        Value = 0,
+      }
+    `;
+    init(data);
+    expect(reflector.annotations(reflector.getStaticSymbol(file, 'MyComponent'))[0]
+               .providers[0][0]
+               .useValue)
+        .toEqual({path: 'foo', data: {e: 0}});
+  });
+
+  // Regression #18170
+  it('should eagerly evaluate enums selects', () => {
+    const data = Object.create(DEFAULT_TEST_DATA);
+    const file = '/tmp/src/my_component.ts';
+    data[file] = `
+      import {Component} from '@angular/core';
+      import {provideRoutes} from './macro';
+      import {E} from './indirect';
+
+      @Component({
+        template: '<div></div>',
+        providers: [provideRoutes({
+          path: 'foo',
+          data: {
+            e: E.Value,
+          }
+        })]
+      })
+      export class MyComponent { }
+    `;
+    data['/tmp/src/macro.ts'] = `
+      import {ANALYZE_FOR_ENTRY_COMPONENTS, ROUTES} from '@angular/core';
+
+      export interface Route {
+        path?: string;
+        data?: any;
+      }
+      export type Routes = Route[];
+      export function provideRoutes(routes: Routes): any {
+        return [
+          {provide: ANALYZE_FOR_ENTRY_COMPONENTS, multi: true, useValue: routes},
+          {provide: ROUTES, multi: true, useValue: routes},
+        ];
+      }
+    `;
+    data['/tmp/src/indirect.ts'] = `
+      import {MyEnum} from './consts';
+
+      export const E = MyEnum;
+    `,
+    data['/tmp/src/consts.ts'] = `
+      export enum MyEnum {
+        Value = 1,
+      }
+    `;
+    init(data);
+    expect(reflector.annotations(reflector.getStaticSymbol(file, 'MyComponent'))[0]
+               .providers[0][0]
+               .useValue)
+        .toEqual({path: 'foo', data: {e: 1}});
+  });
+
+  // Regression #18170
+  it('should aggressively evaluate array indexes', () => {
+    const data = Object.create(DEFAULT_TEST_DATA);
+    const file = '/tmp/src/my_component.ts';
+    data[file] = `
+      import {Component} from '@angular/core';
+      import {provideRoutes} from './macro';
+      import {E} from './indirect';
+
+      @Component({
+        template: '<div></div>',
+        providers: [provideRoutes({
+          path: 'foo',
+          data: {
+            e: E[E[E[1]]],
+          }
+        })]
+      })
+      export class MyComponent { }
+    `;
+    data['/tmp/src/macro.ts'] = `
+      import {ANALYZE_FOR_ENTRY_COMPONENTS, ROUTES} from '@angular/core';
+
+      export interface Route {
+        path?: string;
+        data?: any;
+      }
+      export type Routes = Route[];
+      export function provideRoutes(routes: Routes): any {
+        return [
+          {provide: ANALYZE_FOR_ENTRY_COMPONENTS, multi: true, useValue: routes},
+          {provide: ROUTES, multi: true, useValue: routes},
+        ];
+      }
+    `;
+    data['/tmp/src/indirect.ts'] = `
+      import {A} from './consts';
+
+      export const E = A;
+    `,
+    data['/tmp/src/consts.ts'] = `
+      export const A = [0, 1];
+    `;
+    init(data);
+    expect(reflector.annotations(reflector.getStaticSymbol(file, 'MyComponent'))[0]
+               .providers[0][0]
+               .useValue)
+        .toEqual({path: 'foo', data: {e: 1}});
+  });
+
+  describe('resolveExternalReference', () => {
+    it('should register modules names in the StaticSymbolResolver if no containingFile is given',
+       () => {
+         init({
+           '/tmp/root.ts': ``,
+           '/tmp/a.ts': `export const x = 1;`,
+         });
+         let symbol = reflector.resolveExternalReference(
+             {moduleName: './a', name: 'x', runtime: null}, '/tmp/root.ts');
+         expect(symbolResolver.getKnownModuleName(symbol.filePath)).toBeFalsy();
+
+         symbol = reflector.resolveExternalReference({moduleName: 'a', name: 'x', runtime: null});
+         expect(symbolResolver.getKnownModuleName(symbol.filePath)).toBe('a');
+       });
+  });
+
+  describe('formatted error reporting', () => {
+    describe('function calls', () => {
+      const fileName = '/tmp/src/invalid/components.ts';
+      beforeEach(() => {
+        const localData = {
+          '/tmp/src/invalid/function-call.ts': `
+        import {functionToCall} from 'some-module';
+        export const CALL_FUNCTION = functionToCall();
+    `,
+          '/tmp/src/invalid/indirect.ts': `
+        import {CALL_FUNCTION} from './function-call';
+
+        export const INDIRECT_CALL_FUNCTION = CALL_FUNCTION + 1;
+    `,
+          '/tmp/src/invalid/two-levels-indirect.ts': `
+        import {INDIRECT_CALL_FUNCTION} from './indirect';
+
+        export const TWO_LEVELS_INDIRECT_CALL_FUNCTION = INDIRECT_CALL_FUNCTION + 1;
+    `,
+          '/tmp/src/invalid/components.ts': `
+        import {functionToCall} from 'some-module';
+        import {Component} from '@angular/core';
+        import {CALL_FUNCTION} from './function-call';
+        import {INDIRECT_CALL_FUNCTION} from './indirect';
+        import {TWO_LEVELS_INDIRECT_CALL_FUNCTION} from './two-levels-indirect';
+
+        @Component({
+          value: functionToCall()
+        })
+        export class CallImportedFunction {}
+
+        @Component({
+          value: CALL_FUNCTION
+        })
+        export class ReferenceCalledFunction {}
+
+        @Component({
+          value: INDIRECT_CALL_FUNCTION
+        })
+        export class IndirectReferenceCalledFunction {}
+
+        @Component({
+          value: TWO_LEVELS_INDIRECT_CALL_FUNCTION
+        })
+        export class TwoLevelsIndirectReferenceCalledFunction {}
+    `
+        };
+        init({...DEFAULT_TEST_DATA, ...localData});
+      });
+
+      it('should report a formatted error for a direct function call', () => {
+        expect(() => {
+          return reflector.annotations(reflector.getStaticSymbol(fileName, 'CallImportedFunction'));
+        })
+            .toThrowError(
+                `/tmp/src/invalid/components.ts(9,18): Error during template compile of 'CallImportedFunction'
+  Function calls are not supported in decorators but 'functionToCall' was called.`);
+      });
+
+      it('should report a formatted error for a reference to a function call', () => {
+        expect(() => {
+          return reflector.annotations(
+              reflector.getStaticSymbol(fileName, 'ReferenceCalledFunction'));
+        })
+            .toThrowError(
+                `/tmp/src/invalid/components.ts(14,18): Error during template compile of 'ReferenceCalledFunction'
+  Function calls are not supported in decorators but 'functionToCall' was called in 'CALL_FUNCTION'
+    'CALL_FUNCTION' calls 'functionToCall' at /tmp/src/invalid/function-call.ts(3,38).`);
+      });
+
+      it('should report a formatted error for an indirect reference to a function call', () => {
+        expect(() => {
+          return reflector.annotations(
+              reflector.getStaticSymbol(fileName, 'IndirectReferenceCalledFunction'));
+        })
+            .toThrowError(
+                `/tmp/src/invalid/components.ts(19,18): Error during template compile of 'IndirectReferenceCalledFunction'
+  Function calls are not supported in decorators but 'functionToCall' was called in 'INDIRECT_CALL_FUNCTION'
+    'INDIRECT_CALL_FUNCTION' references 'CALL_FUNCTION' at /tmp/src/invalid/indirect.ts(4,47)
+      'CALL_FUNCTION' calls 'functionToCall' at /tmp/src/invalid/function-call.ts(3,38).`);
+      });
+
+      it('should report a formatted error for a double-indirect reference to a function call', () => {
+        expect(() => {
+          return reflector.annotations(
+              reflector.getStaticSymbol(fileName, 'TwoLevelsIndirectReferenceCalledFunction'));
+        })
+            .toThrowError(
+                `/tmp/src/invalid/components.ts(24,18): Error during template compile of 'TwoLevelsIndirectReferenceCalledFunction'
+  Function calls are not supported in decorators but 'functionToCall' was called in 'TWO_LEVELS_INDIRECT_CALL_FUNCTION'
+    'TWO_LEVELS_INDIRECT_CALL_FUNCTION' references 'INDIRECT_CALL_FUNCTION' at /tmp/src/invalid/two-levels-indirect.ts(4,58)
+      'INDIRECT_CALL_FUNCTION' references 'CALL_FUNCTION' at /tmp/src/invalid/indirect.ts(4,47)
+        'CALL_FUNCTION' calls 'functionToCall' at /tmp/src/invalid/function-call.ts(3,38).`);
+      });
+    });
+
+    describe('macro functions', () => {
+      const fileName = '/tmp/src/invalid/components.ts';
+      beforeEach(() => {
+        const localData = {
+          '/tmp/src/invalid/function-call.ts': `
+        import {functionToCall} from 'some-module';
+        export const CALL_FUNCTION = functionToCall();
+    `,
+          '/tmp/src/invalid/indirect.ts': `
+        import {CALL_FUNCTION} from './function-call';
+
+        export const INDIRECT_CALL_FUNCTION = CALL_FUNCTION + 1;
+    `,
+          '/tmp/src/invalid/macros.ts': `
+        export function someMacro(value: any) {
+          return [ { provide: 'key', value: value } ];
+        }
+    `,
+          '/tmp/src/invalid/components.ts': `
+        import {Component} from '@angular/core';
+        import {functionToCall} from 'some-module';
+        import {someMacro} from './macros';
+        import {CALL_FUNCTION} from './function-call';
+        import {INDIRECT_CALL_FUNCTION} from './indirect';
+
+        @Component({
+          template: someMacro(functionToCall())
+        })
+        export class DirectCall {}
+
+        @Component({
+          template: someMacro(CALL_FUNCTION)
+        })
+        export class IndirectCall {}
+
+        @Component({
+          template: someMacro(INDIRECT_CALL_FUNCTION)
+        })
+        export class DoubleIndirectCall {}
+    `
+        };
+        init({...DEFAULT_TEST_DATA, ...localData});
+      });
+
+      it('should report a formatted error for a direct function call', () => {
+        expect(() => {
+          return reflector.annotations(reflector.getStaticSymbol(fileName, 'DirectCall'));
+        })
+            .toThrowError(
+                `/tmp/src/invalid/components.ts(9,31): Error during template compile of 'DirectCall'
+  Function calls are not supported in decorators but 'functionToCall' was called.`);
+      });
+
+      it('should report a formatted error for a reference to a function call', () => {
+        expect(() => {
+          return reflector.annotations(reflector.getStaticSymbol(fileName, 'IndirectCall'));
+        })
+            .toThrowError(
+                `/tmp/src/invalid/components.ts(14,31): Error during template compile of 'IndirectCall'
+  Function calls are not supported in decorators but 'functionToCall' was called in 'CALL_FUNCTION'
+    'CALL_FUNCTION' calls 'functionToCall' at /tmp/src/invalid/function-call.ts(3,38).`);
+      });
+
+      it('should report a formatted error for an indirect refernece to a function call', () => {
+        expect(() => {
+          return reflector.annotations(reflector.getStaticSymbol(fileName, 'DoubleIndirectCall'));
+        })
+            .toThrowError(
+                `/tmp/src/invalid/components.ts(19,31): Error during template compile of 'DoubleIndirectCall'
+  Function calls are not supported in decorators but 'functionToCall' was called in 'INDIRECT_CALL_FUNCTION'
+    'INDIRECT_CALL_FUNCTION' references 'CALL_FUNCTION' at /tmp/src/invalid/indirect.ts(4,47)
+      'CALL_FUNCTION' calls 'functionToCall' at /tmp/src/invalid/function-call.ts(3,38).`);
+      });
+    });
+
+    describe('and give advice', () => {
+      // If in a reference expression, advice the user to replace with a reference.
+      const fileName = '/tmp/src/invalid/components.ts';
+
+      function collectError(symbol: string): string {
+        try {
+          reflector.annotations(reflector.getStaticSymbol(fileName, symbol));
+        } catch (e) {
+          return e.message;
+        }
+        fail('Expected an exception to be thrown');
+        return '';
+      }
+
+      function initWith(content: string) {
+        init({
+          ...DEFAULT_TEST_DATA,
+          [fileName]: `import {Component} from '@angular/core';\n${content}`
+        });
+      }
+
+      it('should advise exorting a local', () => {
+        initWith(`const f: string; @Component({value: f}) export class MyComp {}`);
+        expect(collectError('MyComp')).toContain(`Consider exporting 'f'`);
+      });
+
+      it('should advise export a class', () => {
+        initWith('class Foo {} @Component({value: Foo}) export class MyComp {}');
+        expect(collectError('MyComp')).toContain(`Consider exporting 'Foo'`);
+      });
+
+      it('should advise avoiding destructuring', () => {
+        initWith(
+            'export const {foo, bar} = {foo: 1, bar: 2}; @Component({value: foo}) export class MyComp {}');
+        expect(collectError('MyComp')).toContain(`Consider simplifying to avoid destructuring`);
+      });
+
+      it('should advise converting an arrow function into an exported function', () => {
+        initWith('@Component({value: () => true}) export class MyComp {}');
+        expect(collectError('MyComp'))
+            .toContain(`Consider changing the function expression into an exported function`);
+      });
+
+      it('should advise converting a function expression into an exported function', () => {
+        initWith('@Component({value: function () { return true; }}) export class MyComp {}');
+        expect(collectError('MyComp'))
+            .toContain(`Consider changing the function expression into an exported function`);
+      });
+    });
+  });
+});
+
+const DEFAULT_TEST_DATA: {[key: string]: any} = {
+  '/tmp/@angular/common/src/forms-deprecated/directives.d.ts': [{
+    '__symbolic': 'module',
+    'version': METADATA_VERSION,
+    'metadata': {
+      'FORM_DIRECTIVES': [{
+        '__symbolic': 'reference',
+        'name': 'NgFor',
+        'module': '@angular/common/src/directives/ng_for'
+      }]
+    }
+  }],
+  '/tmp/@angular/common/src/directives/ng_for.d.ts': {
+    '__symbolic': 'module',
+    'version': METADATA_VERSION,
+    'metadata': {
+      'NgFor': {
+        '__symbolic': 'class',
+        'decorators': [{
+          '__symbolic': 'call',
+          'expression': {'__symbolic': 'reference', 'name': 'Directive', 'module': '@angular/core'},
+          'arguments': [{
+            'selector': '[ngFor][ngForOf]',
+            'inputs': ['ngForTrackBy', 'ngForOf', 'ngForTemplate']
+          }]
+        }],
+        'members': {
+          '__ctor__': [{
+            '__symbolic': 'constructor',
+            'parameters': [
+              {'__symbolic': 'reference', 'module': '@angular/core', 'name': 'ViewContainerRef'},
+              {'__symbolic': 'reference', 'module': '@angular/core', 'name': 'TemplateRef'},
+              {'__symbolic': 'reference', 'module': '@angular/core', 'name': 'IterableDiffers'}, {
+                '__symbolic': 'reference',
+                'module': '@angular/core',
+                'name': 'ChangeDetectorRef'
+              }
+            ]
+          }]
+        }
+      }
+    }
+  },
+  '/tmp/@angular/core/src/linker/view_container_ref.d.ts':
+      {version: METADATA_VERSION, 'metadata': {'ViewContainerRef': {'__symbolic': 'class'}}},
+  '/tmp/@angular/core/src/linker/template_ref.d.ts': {
+    version: METADATA_VERSION,
+    'module': './template_ref',
+    'metadata': {'TemplateRef': {'__symbolic': 'class'}}
+  },
+  '/tmp/@angular/core/src/change_detection/differs/iterable_differs.d.ts':
+      {version: METADATA_VERSION, 'metadata': {'IterableDiffers': {'__symbolic': 'class'}}},
+  '/tmp/@angular/core/src/change_detection/change_detector_ref.d.ts':
+      {version: METADATA_VERSION, 'metadata': {'ChangeDetectorRef': {'__symbolic': 'class'}}},
+  '/tmp/src/app/hero-detail.component.d.ts': {
+    '__symbolic': 'module',
+    'version': METADATA_VERSION,
+    'metadata': {
+      'HeroDetailComponent': {
+        '__symbolic': 'class',
+        'decorators': [{
+          '__symbolic': 'call',
+          'expression': {'__symbolic': 'reference', 'name': 'Component', 'module': '@angular/core'},
+          'arguments': [{
+            'selector': 'my-hero-detail',
+            'template':
+                '\n  <div *ngIf="hero">\n    <h2>{{hero.name}} details!</h2>\n    <div><label>id: </label>{{hero.id}}</div>\n    <div>\n      <label>name: </label>\n      <input [(ngModel)]="hero.name" placeholder="name"/>\n    </div>\n  </div>\n',
+          }]
+        }],
+        'members': {
+          'hero': [{
+            '__symbolic': 'property',
+            'decorators': [{
+              '__symbolic': 'call',
+              'expression':
+                  {'__symbolic': 'reference', 'name': 'Input', 'module': '@angular/core'}
+            }]
+          }],
+          'onMouseOver': [{
+            '__symbolic': 'method',
+            'decorators': [{
+              '__symbolic': 'call',
+              'expression':
+                  {'__symbolic': 'reference', 'module': '@angular/core', 'name': 'HostListener'},
+              'arguments': ['mouseover', ['$event']]
+            }]
+          }]
+        }
+      }
+    }
+  },
+  '/src/extern.d.ts': {'__symbolic': 'module', 'version': METADATA_VERSION, metadata: {s: 's'}},
+  '/tmp/src/error-reporting.d.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {
+      SomeClass: {
+        __symbolic: 'class',
+        decorators: [{
+          __symbolic: 'call',
+          expression: {__symbolic: 'reference', name: 'Component', module: '@angular/core'},
+          arguments: [{
+            entryComponents: [{
+              __symbolic: 'reference',
+              module: 'src/error-references',
+              name: 'Link1',
+            }]
+          }]
+        }],
+      }
+    }
+  },
+  '/tmp/src/error-references.d.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {
+      Link1: {__symbolic: 'reference', module: 'src/error-references', name: 'Link2'},
+      Link2: {__symbolic: 'reference', module: 'src/error-references', name: 'ErrorSym'},
+      ErrorSym:
+          {__symbolic: 'error', message: 'A reasonable error message', line: 12, character: 33}
+    }
+  },
+  '/tmp/src/function-declaration.d.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {
+      one: {
+        __symbolic: 'function',
+        parameters: ['a'],
+        value: [{__symbolic: 'reference', name: 'a'}]
+      },
+      add: {
+        __symbolic: 'function',
+        parameters: ['a', 'b'],
+        value: {
+          __symbolic: 'binop',
+          operator: '+',
+          left: {__symbolic: 'reference', name: 'a'},
+          right: {
+            __symbolic: 'binop',
+            operator: '+',
+            left: {__symbolic: 'reference', name: 'b'},
+            right: {__symbolic: 'reference', name: 'oneLiteral'}
+          }
+        }
+      },
+      oneLiteral: 1
+    }
+  },
+  '/tmp/src/function-reference.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {
+      one: {
+        __symbolic: 'call',
+        expression: {__symbolic: 'reference', module: './function-declaration', name: 'one'},
+        arguments: ['some-value']
+      },
+      three: {
+        __symbolic: 'call',
+        expression: {__symbolic: 'reference', module: './function-declaration', name: 'add'},
+        arguments: [1, 1]
+      },
+      recursion: {
+        __symbolic: 'call',
+        expression: {__symbolic: 'reference', module: './function-recursive', name: 'recursive'},
+        arguments: [1]
+      },
+      indirectRecursion: {
+        __symbolic: 'call',
+        expression:
+            {__symbolic: 'reference', module: './function-recursive', name: 'indirectRecursion1'},
+        arguments: [1]
+      }
+    }
+  },
+  '/tmp/src/function-recursive.d.ts': {
+    __symbolic: 'modules',
+    version: METADATA_VERSION,
+    metadata: {
+      recursive: {
+        __symbolic: 'function',
+        parameters: ['a'],
+        value: {
+          __symbolic: 'call',
+          expression: {
+            __symbolic: 'reference',
+            module: './function-recursive',
+            name: 'recursive',
+          },
+          arguments: [{__symbolic: 'reference', name: 'a'}]
+        }
+      },
+      indirectRecursion1: {
+        __symbolic: 'function',
+        parameters: ['a'],
+        value: {
+          __symbolic: 'call',
+          expression: {
+            __symbolic: 'reference',
+            module: './function-recursive',
+            name: 'indirectRecursion2',
+          },
+          arguments: [{__symbolic: 'reference', name: 'a'}]
+        }
+      },
+      indirectRecursion2: {
+        __symbolic: 'function',
+        parameters: ['a'],
+        value: {
+          __symbolic: 'call',
+          expression: {
+            __symbolic: 'reference',
+            module: './function-recursive',
+            name: 'indirectRecursion1',
+          },
+          arguments: [{__symbolic: 'reference', name: 'a'}]
+        }
+      }
+    },
+  },
+  '/tmp/src/spread.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {spread: [0, {__symbolic: 'spread', expression: [1, 2, 3, 4]}, 5]}
+  },
+  '/tmp/src/custom-decorator.ts': `
+        export function CustomDecorator(): any {
+          return () => {};
+        }
+      `,
+  '/tmp/src/custom-decorator-reference.ts': `
+        import {CustomDecorator} from './custom-decorator';
+
+        @CustomDecorator()
+        export class Foo {
+          @CustomDecorator() get foo(): string { return ''; }
+        }
+      `,
+  '/tmp/src/invalid-call-definitions.ts': `
+        export function someFunction(a: any) {
+          if (Array.isArray(a)) {
+            return a;
+          }
+          return undefined;
+        }
+      `,
+  '/tmp/src/invalid-calls.ts': `
+        import {someFunction} from './nvalid-call-definitions.ts';
+        import {Component} from '@angular/core';
+        import {NgIf} from '@angular/common';
+
+        @Component({
+          selector: 'my-component',
+          entryComponents: [someFunction([NgIf])]
+        })
+        export class MyComponent {}
+
+        @someFunction()
+        @Component({
+          selector: 'my-component',
+          entryComponents: [NgIf]
+        })
+        export class MyOtherComponent { }
+      `,
+  '/tmp/src/static-method.ts': `
+        import {Component} from '@angular/core/src/metadata';
+
+        @Component({
+          selector: 'stub'
+        })
+        export class MyModule {
+          static with(data: any) {
+            return { provider: 'a', useValue: data }
+          }
+          static condMethod(cond: boolean) {
+            return [{ provider: 'a', useValue: cond ? '1' : '2'}];
+          }
+          static defaultsMethod(a, b = true, c = false) {
+            return [a, b, c];
+          }
+          static withFactory() {
+            return { provide: 'c', useFactory: AnotherModule.someFactory };
+          }
+        }
+
+        export class AnotherModule {
+          static someFactory() {
+            return 'e';
+          }
+        }
+      `,
+  '/tmp/src/static-method-call.ts': `
+        import {Component} from '@angular/core';
+        import {MyModule} from './static-method';
+
+        @Component({
+          providers: MyModule.with(100)
+        })
+        export class MyComponent { }
+
+        @Component({
+          providers: [MyModule.condMethod(true), MyModule.condMethod(false)]
+        })
+        export class MyCondComponent { }
+
+        @Component({
+          providers: [MyModule.defaultsMethod('a')]
+        })
+        export class MyDefaultsComponent { }
+
+        @Component({
+          providers: MyModule.withFactory()
+        })
+        export class MyFactoryComponent { }
+      `,
+  '/tmp/src/static-field.ts': `
+        import {Injectable} from '@angular/core';
+
+        @Injectable()
+        export class MyModule {
+          static VALUE = 'Some string';
+        }
+      `,
+  '/tmp/src/macro-function.ts': `
+        export function v(value: any) {
+          return { provide: 'a', useValue: value };
+        }
+      `,
+  '/tmp/src/call-macro-function.ts': `
+        import {Component} from '@angular/core';
+        import {v} from './macro-function';
+
+        @Component({
+          providers: v(100)
+        })
+        export class MyComponent { }
+
+        @Component({
+          providers: v(v(100))
+        })
+        export class MyComponentNested { }
+      `,
+  '/tmp/src/static-field-reference.ts': `
+        import {Component} from '@angular/core';
+        import {MyModule} from './static-field';
+
+        @Component({
+          providers: [ { provider: 'a', useValue: MyModule.VALUE } ]
+        })
+        export class Foo { }
+      `,
+  '/tmp/src/static-method-def.ts': `
+        export class ClassWithStatics {
+          static staticMethod() {}
+        }
+      `,
+  '/tmp/src/static-method-ref.ts': `
+        import {Component} from '@angular/core';
+        import {ClassWithStatics} from './static-method-def';
+
+        @Component({
+          providers: [ { provider: 'a', useValue: ClassWithStatics.staticMethod}]
+        })
+        export class MethodReference {
+
+        }
+      `,
+  '/tmp/src/invalid-metadata.ts': `
+        import {Component} from '@angular/core';
+
+        @Component({
+          providers: [ { provider: 'a', useValue: (() => 1)() }]
+        })
+        export class InvalidMetadata {}
+      `,
+  '/tmp/src/forward-ref.ts': `
+        import {forwardRef} from '@angular/core';
+        import {Component} from '@angular/core';
+        import {Inject} from '@angular/core';
+        @Component({})
+        export class Forward {
+          constructor(@Inject(forwardRef(() => Dep)) d: Dep) {}
+        }
+        export class Dep {
+          @Input f: Forward;
+        }
+      `,
+};
diff --git a/packages/compiler/test/aot/static_symbol_resolver_spec.ts b/packages/compiler/test/aot/static_symbol_resolver_spec.ts
new file mode 100644
index 000000000000..1c30215e7028
--- /dev/null
+++ b/packages/compiler/test/aot/static_symbol_resolver_spec.ts
@@ -0,0 +1,577 @@
+/**
+ * @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, StaticSymbolCache, StaticSymbolResolver, StaticSymbolResolverHost, Summary, SummaryResolver} from '@angular/compiler';
+import {CollectorOptions, METADATA_VERSION} from '@angular/compiler-cli';
+import {MetadataCollector} from '@angular/compiler-cli/src/metadata/collector';
+import * as ts from 'typescript';
+
+// This matches .ts files but not .d.ts files.
+const TS_EXT = /(^.|(?!\.d)..)\.ts$/;
+
+describe('StaticSymbolResolver', () => {
+  const noContext = new StaticSymbol('', '', []);
+  let host: StaticSymbolResolverHost;
+  let symbolResolver: StaticSymbolResolver;
+  let symbolCache: StaticSymbolCache;
+
+  beforeEach(() => { symbolCache = new StaticSymbolCache(); });
+
+  function init(
+      testData: {[key: string]: any} = DEFAULT_TEST_DATA, summaries: Summary<StaticSymbol>[] = [],
+      summaryImportAs: {symbol: StaticSymbol, importAs: StaticSymbol}[] = []) {
+    host = new MockStaticSymbolResolverHost(testData);
+    symbolResolver = new StaticSymbolResolver(
+        host, symbolCache, new MockSummaryResolver(summaries, summaryImportAs));
+  }
+
+  beforeEach(() => init());
+
+  it('should throw an exception for unsupported metadata versions', () => {
+    expect(
+        () => symbolResolver.resolveSymbol(
+            symbolResolver.getSymbolByModule('src/version-error', 'e')))
+        .toThrow(new Error(
+            `Metadata version mismatch for module /tmp/src/version-error.d.ts, found version 100, expected ${METADATA_VERSION}`));
+  });
+
+  it('should throw an exception for version 2 metadata', () => {
+    expect(
+        () => symbolResolver.resolveSymbol(
+            symbolResolver.getSymbolByModule('src/version-2-error', 'e')))
+        .toThrowError(
+            'Unsupported metadata version 2 for module /tmp/src/version-2-error.d.ts. This module should be compiled with a newer version of ngc');
+  });
+
+  it('should be produce the same symbol if asked twice', () => {
+    const foo1 = symbolResolver.getStaticSymbol('main.ts', 'foo');
+    const foo2 = symbolResolver.getStaticSymbol('main.ts', 'foo');
+    expect(foo1).toBe(foo2);
+  });
+
+  it('should be able to produce a symbol for a module with no file', () => {
+    expect(symbolResolver.getStaticSymbol('angularjs', 'SomeAngularSymbol')).toBeDefined();
+  });
+
+  it('should be able to split the metadata per symbol', () => {
+    init({
+      '/tmp/src/test.ts': `
+        export var a = 1;
+        export var b = 2;
+      `
+    });
+    expect(symbolResolver.resolveSymbol(symbolResolver.getStaticSymbol('/tmp/src/test.ts', 'a'))
+               .metadata)
+        .toBe(1);
+    expect(symbolResolver.resolveSymbol(symbolResolver.getStaticSymbol('/tmp/src/test.ts', 'b'))
+               .metadata)
+        .toBe(2);
+  });
+
+  it('should be able to resolve static symbols with members', () => {
+    init({
+      '/tmp/src/test.ts': `
+        export {exportedObj} from './export';
+
+        export var obj = {a: 1};
+        export class SomeClass {
+          static someField = 2;
+        }
+      `,
+      '/tmp/src/export.ts': `
+        export var exportedObj = {};
+      `,
+    });
+    expect(symbolResolver
+               .resolveSymbol(symbolResolver.getStaticSymbol('/tmp/src/test.ts', 'obj', ['a']))
+               .metadata)
+        .toBe(1);
+    expect(symbolResolver
+               .resolveSymbol(
+                   symbolResolver.getStaticSymbol('/tmp/src/test.ts', 'SomeClass', ['someField']))
+               .metadata)
+        .toBe(2);
+    expect(symbolResolver
+               .resolveSymbol(symbolResolver.getStaticSymbol(
+                   '/tmp/src/test.ts', 'exportedObj', ['someMember']))
+               .metadata)
+        .toBe(symbolResolver.getStaticSymbol('/tmp/src/export.ts', 'exportedObj', ['someMember']));
+  });
+
+  it('should use summaries in resolveSymbol and prefer them over regular metadata', () => {
+    const symbolA = symbolCache.get('/test.ts', 'a');
+    const symbolB = symbolCache.get('/test.ts', 'b');
+    const symbolC = symbolCache.get('/test.ts', 'c');
+    init({'/test.ts': 'export var a = 2; export var b = 2; export var c = 2;'}, [
+      {symbol: symbolA, metadata: 1},
+      {symbol: symbolB, metadata: 1},
+    ]);
+    // reading the metadata of a symbol without a summary first,
+    // to test whether summaries are still preferred after this.
+    expect(symbolResolver.resolveSymbol(symbolC).metadata).toBe(2);
+    expect(symbolResolver.resolveSymbol(symbolA).metadata).toBe(1);
+    expect(symbolResolver.resolveSymbol(symbolB).metadata).toBe(1);
+  });
+
+  it('should be able to get all exported symbols of a file', () => {
+    expect(symbolResolver.getSymbolsOf('/tmp/src/reexport/src/origin1.d.ts')).toEqual([
+      symbolResolver.getStaticSymbol('/tmp/src/reexport/src/origin1.d.ts', 'One'),
+      symbolResolver.getStaticSymbol('/tmp/src/reexport/src/origin1.d.ts', 'Two'),
+      symbolResolver.getStaticSymbol('/tmp/src/reexport/src/origin1.d.ts', 'Three'),
+      symbolResolver.getStaticSymbol('/tmp/src/reexport/src/origin1.d.ts', 'Six'),
+    ]);
+  });
+
+  it('should be able to get all reexported symbols of a file', () => {
+    expect(symbolResolver.getSymbolsOf('/tmp/src/reexport/reexport.d.ts')).toEqual([
+      symbolResolver.getStaticSymbol('/tmp/src/reexport/reexport.d.ts', 'One'),
+      symbolResolver.getStaticSymbol('/tmp/src/reexport/reexport.d.ts', 'Two'),
+      symbolResolver.getStaticSymbol('/tmp/src/reexport/reexport.d.ts', 'Four'),
+      symbolResolver.getStaticSymbol('/tmp/src/reexport/reexport.d.ts', 'Six'),
+      symbolResolver.getStaticSymbol('/tmp/src/reexport/reexport.d.ts', 'Five'),
+      symbolResolver.getStaticSymbol('/tmp/src/reexport/reexport.d.ts', 'Thirty'),
+    ]);
+  });
+
+  it('should read the exported symbols of a file from the summary and ignore exports in the source',
+     () => {
+       const someSymbol = symbolCache.get('/test.ts', 'a');
+       init(
+           {'/test.ts': 'export var b = 2'},
+           [{symbol: symbolCache.get('/test.ts', 'a'), metadata: 1}]);
+       expect(symbolResolver.getSymbolsOf('/test.ts')).toEqual([symbolCache.get('/test.ts', 'a')]);
+     });
+
+  describe('importAs', () => {
+
+    it('should calculate importAs relationship for non source files without summaries', () => {
+      init(
+          {
+            '/test.d.ts': [{
+              '__symbolic': 'module',
+              'version': METADATA_VERSION,
+              'metadata': {
+                'a': {'__symbolic': 'reference', 'name': 'b', 'module': './test2'},
+              }
+            }],
+            '/test2.d.ts': [{
+              '__symbolic': 'module',
+              'version': METADATA_VERSION,
+              'metadata': {
+                'b': {'__symbolic': 'reference', 'name': 'c', 'module': './test3'},
+              }
+            }]
+          },
+          []);
+      symbolResolver.getSymbolsOf('/test.d.ts');
+      symbolResolver.getSymbolsOf('/test2.d.ts');
+
+      expect(symbolResolver.getImportAs(symbolCache.get('/test2.d.ts', 'b')))
+          .toBe(symbolCache.get('/test.d.ts', 'a'));
+      expect(symbolResolver.getImportAs(symbolCache.get('/test3.d.ts', 'c')))
+          .toBe(symbolCache.get('/test.d.ts', 'a'));
+    });
+
+    it('should calculate importAs relationship for non source files with summaries', () => {
+      init(
+          {
+            '/test.ts': `
+          export {a} from './test2';
+        `
+          },
+          [], [{
+            symbol: symbolCache.get('/test2.d.ts', 'a'),
+            importAs: symbolCache.get('/test3.d.ts', 'b')
+          }]);
+      symbolResolver.getSymbolsOf('/test.ts');
+
+      expect(symbolResolver.getImportAs(symbolCache.get('/test2.d.ts', 'a')))
+          .toBe(symbolCache.get('/test3.d.ts', 'b'));
+    });
+
+    it('should ignore summaries for inputAs if requested', () => {
+      init(
+          {
+            '/test.ts': `
+        export {a} from './test2';
+      `
+          },
+          [], [{
+            symbol: symbolCache.get('/test2.d.ts', 'a'),
+            importAs: symbolCache.get('/test3.d.ts', 'b')
+          }]);
+
+      symbolResolver.getSymbolsOf('/test.ts');
+
+      expect(
+          symbolResolver.getImportAs(symbolCache.get('/test2.d.ts', 'a'), /* useSummaries */ false))
+          .toBeUndefined();
+    });
+
+    it('should calculate importAs for symbols with members based on importAs for symbols without',
+       () => {
+         init(
+             {
+               '/test.ts': `
+          export {a} from './test2';
+        `
+             },
+             [], [{
+               symbol: symbolCache.get('/test2.d.ts', 'a'),
+               importAs: symbolCache.get('/test3.d.ts', 'b')
+             }]);
+         symbolResolver.getSymbolsOf('/test.ts');
+
+         expect(symbolResolver.getImportAs(symbolCache.get('/test2.d.ts', 'a', ['someMember'])))
+             .toBe(symbolCache.get('/test3.d.ts', 'b', ['someMember']));
+       });
+
+  });
+
+  it('should replace references by StaticSymbols', () => {
+    init({
+      '/test.ts': `
+        import {b, y} from './test2';
+        export var a = b;
+        export var x = [y];
+
+        export function simpleFn(fnArg) {
+          return [a, y, fnArg];
+        }
+      `,
+      '/test2.ts': `
+        export var b;
+        export var y;
+      `
+    });
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', 'a')).metadata)
+        .toEqual(symbolCache.get('/test2.ts', 'b'));
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', 'x')).metadata).toEqual([{
+      __symbolic: 'resolved',
+      symbol: symbolCache.get('/test2.ts', 'y'),
+      line: 3,
+      character: 24,
+      fileName: '/test.ts'
+    }]);
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', 'simpleFn')).metadata).toEqual({
+      __symbolic: 'function',
+      parameters: ['fnArg'],
+      value: [
+        symbolCache.get('/test.ts', 'a'), {
+          __symbolic: 'resolved',
+          symbol: symbolCache.get('/test2.ts', 'y'),
+          line: 6,
+          character: 21,
+          fileName: '/test.ts'
+        },
+        {__symbolic: 'reference', name: 'fnArg'}
+      ]
+    });
+  });
+
+  it('should ignore module references without a name', () => {
+    init({
+      '/test.ts': `
+        import Default from './test2';
+        export {Default};
+      `
+    });
+
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', 'Default')).metadata)
+        .toBeFalsy();
+  });
+
+  it('should fill references to ambient symbols with undefined', () => {
+    init({
+      '/test.ts': `
+        export var y = 1;
+        export var z = [window, z];
+      `
+    });
+
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', 'z')).metadata).toEqual([
+      undefined, symbolCache.get('/test.ts', 'z')
+    ]);
+  });
+
+  it('should allow to use symbols with __', () => {
+    init({
+      '/test.ts': `
+        export {__a__ as __b__} from './test2';
+        import {__c__} from './test2';
+
+        export var __x__ = 1;
+        export var __y__ = __c__;
+      `
+    });
+
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', '__x__')).metadata).toBe(1);
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', '__y__')).metadata)
+        .toBe(symbolCache.get('/test2.d.ts', '__c__'));
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', '__b__')).metadata)
+        .toBe(symbolCache.get('/test2.d.ts', '__a__'));
+
+    expect(symbolResolver.getSymbolsOf('/test.ts')).toEqual([
+      symbolCache.get('/test.ts', '__b__'),
+      symbolCache.get('/test.ts', '__x__'),
+      symbolCache.get('/test.ts', '__y__'),
+    ]);
+  });
+
+  it('should only use the arity for classes from libraries without summaries', () => {
+    init({
+      '/test.d.ts': [{
+        '__symbolic': 'module',
+        'version': METADATA_VERSION,
+        'metadata': {
+          'AParam': {__symbolic: 'class'},
+          'AClass': {
+            __symbolic: 'class',
+            arity: 1,
+            members: {
+              __ctor__: [{
+                __symbolic: 'constructor',
+                parameters: [symbolCache.get('/test.d.ts', 'AParam')]
+              }]
+            }
+          }
+        }
+      }]
+    });
+
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.d.ts', 'AClass')).metadata)
+        .toEqual({__symbolic: 'class', arity: 1});
+  });
+
+  it('should be able to trace a named export', () => {
+    const symbol = symbolResolver
+                       .resolveSymbol(symbolResolver.getSymbolByModule(
+                           './reexport/reexport', 'One', '/tmp/src/main.ts'))
+                       .metadata;
+    expect(symbol.name).toEqual('One');
+    expect(symbol.filePath).toEqual('/tmp/src/reexport/src/origin1.d.ts');
+  });
+
+  it('should be able to trace a renamed export', () => {
+    const symbol = symbolResolver
+                       .resolveSymbol(symbolResolver.getSymbolByModule(
+                           './reexport/reexport', 'Four', '/tmp/src/main.ts'))
+                       .metadata;
+    expect(symbol.name).toEqual('Three');
+    expect(symbol.filePath).toEqual('/tmp/src/reexport/src/origin1.d.ts');
+  });
+
+  it('should be able to trace an export * export', () => {
+    const symbol = symbolResolver
+                       .resolveSymbol(symbolResolver.getSymbolByModule(
+                           './reexport/reexport', 'Five', '/tmp/src/main.ts'))
+                       .metadata;
+    expect(symbol.name).toEqual('Five');
+    expect(symbol.filePath).toEqual('/tmp/src/reexport/src/origin5.d.ts');
+  });
+
+  it('should be able to trace a multi-level re-export', () => {
+    const symbol1 = symbolResolver
+                        .resolveSymbol(symbolResolver.getSymbolByModule(
+                            './reexport/reexport', 'Thirty', '/tmp/src/main.ts'))
+                        .metadata;
+    expect(symbol1.name).toEqual('Thirty');
+    expect(symbol1.filePath).toEqual('/tmp/src/reexport/src/reexport2.d.ts');
+    const symbol2 = symbolResolver.resolveSymbol(symbol1).metadata;
+    expect(symbol2.name).toEqual('Thirty');
+    expect(symbol2.filePath).toEqual('/tmp/src/reexport/src/origin30.d.ts');
+  });
+
+  it('should prefer names in the file over reexports', () => {
+    const metadata = symbolResolver
+                         .resolveSymbol(symbolResolver.getSymbolByModule(
+                             './reexport/reexport', 'Six', '/tmp/src/main.ts'))
+                         .metadata;
+    expect(metadata.__symbolic).toBe('class');
+  });
+
+  it('should cache tracing a named export', () => {
+    const moduleNameToFileNameSpy = spyOn(host, 'moduleNameToFileName').and.callThrough();
+    const getMetadataForSpy = spyOn(host, 'getMetadataFor').and.callThrough();
+    symbolResolver.resolveSymbol(
+        symbolResolver.getSymbolByModule('./reexport/reexport', 'One', '/tmp/src/main.ts'));
+    moduleNameToFileNameSpy.calls.reset();
+    getMetadataForSpy.calls.reset();
+
+    const symbol = symbolResolver
+                       .resolveSymbol(symbolResolver.getSymbolByModule(
+                           './reexport/reexport', 'One', '/tmp/src/main.ts'))
+                       .metadata;
+    expect(moduleNameToFileNameSpy.calls.count()).toBe(1);
+    expect(getMetadataForSpy.calls.count()).toBe(0);
+    expect(symbol.name).toEqual('One');
+    expect(symbol.filePath).toEqual('/tmp/src/reexport/src/origin1.d.ts');
+  });
+
+});
+
+export class MockSummaryResolver implements SummaryResolver<StaticSymbol> {
+  constructor(private summaries: Summary<StaticSymbol>[] = [], private importAs: {
+    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);
+  }
+  getSymbolsOf(filePath: string): StaticSymbol[]|null {
+    const symbols = this.summaries.filter(summary => summary.symbol.filePath === filePath)
+                        .map(summary => summary.symbol);
+    return symbols.length ? symbols : null;
+  }
+  getImportAs(symbol: StaticSymbol): StaticSymbol {
+    const entry = this.importAs.find(entry => entry.symbol === symbol);
+    return entry ? entry.importAs : undefined !;
+  }
+  getKnownModuleName(fileName: string): string|null { return null; }
+  isLibraryFile(filePath: string): boolean { return filePath.endsWith('.d.ts'); }
+  toSummaryFileName(filePath: string): string { return filePath.replace(/(\.d)?\.ts$/, '.d.ts'); }
+  fromSummaryFileName(filePath: string): string { return filePath; }
+}
+
+export class MockStaticSymbolResolverHost implements StaticSymbolResolverHost {
+  private collector: MetadataCollector;
+
+  constructor(private data: {[key: string]: any}, collectorOptions?: CollectorOptions) {
+    this.collector = new MetadataCollector(collectorOptions);
+  }
+
+  // In tests, assume that symbols are not re-exported
+  moduleNameToFileName(modulePath: string, containingFile?: string): string {
+    function splitPath(path: string): string[] { return path.split(/\/|\\/g); }
+
+    function resolvePath(pathParts: string[]): string {
+      const result: string[] = [];
+      pathParts.forEach((part, index) => {
+        switch (part) {
+          case '':
+          case '.':
+            if (index > 0) return;
+            break;
+          case '..':
+            if (index > 0 && result.length != 0) result.pop();
+            return;
+        }
+        result.push(part);
+      });
+      return result.join('/');
+    }
+
+    function pathTo(from: string, to: string): string {
+      let result = to;
+      if (to.startsWith('.')) {
+        const fromParts = splitPath(from);
+        fromParts.pop();  // remove the file name.
+        const toParts = splitPath(to);
+        result = resolvePath(fromParts.concat(toParts));
+      }
+      return result;
+    }
+
+    if (modulePath.indexOf('.') === 0) {
+      const baseName = pathTo(containingFile !, modulePath);
+      const tsName = baseName + '.ts';
+      if (this._getMetadataFor(tsName)) {
+        return tsName;
+      }
+      return baseName + '.d.ts';
+    }
+    if (modulePath == 'unresolved') {
+      return undefined !;
+    }
+    return '/tmp/' + modulePath + '.d.ts';
+  }
+
+  getMetadataFor(moduleId: string): any { return this._getMetadataFor(moduleId); }
+
+  getOutputName(filePath: string): string { return filePath; }
+
+  private _getMetadataFor(filePath: string): any {
+    if (this.data[filePath] && filePath.match(TS_EXT)) {
+      const text = this.data[filePath];
+      if (typeof text === 'string') {
+        const sf = ts.createSourceFile(
+            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 => {
+                    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)];
+      }
+    }
+    const result = this.data[filePath];
+    if (result) {
+      return Array.isArray(result) ? result : [result];
+    } else {
+      return null;
+    }
+  }
+}
+
+const DEFAULT_TEST_DATA: {[key: string]: any} = {
+  '/tmp/src/version-error.d.ts': {'__symbolic': 'module', 'version': 100, metadata: {e: 's'}},
+  '/tmp/src/version-2-error.d.ts': {'__symbolic': 'module', 'version': 2, metadata: {e: 's'}},
+  '/tmp/src/reexport/reexport.d.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {
+      Six: {__symbolic: 'class'},
+    },
+    exports: [
+      {from: './src/origin1', export: ['One', 'Two', {name: 'Three', as: 'Four'}, 'Six']},
+      {from: './src/origin5'}, {from: './src/reexport2'}
+    ]
+  },
+  '/tmp/src/reexport/src/origin1.d.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {
+      One: {__symbolic: 'class'},
+      Two: {__symbolic: 'class'},
+      Three: {__symbolic: 'class'},
+      Six: {__symbolic: 'class'},
+    },
+  },
+  '/tmp/src/reexport/src/origin5.d.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {
+      Five: {__symbolic: 'class'},
+    },
+  },
+  '/tmp/src/reexport/src/origin30.d.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {
+      Thirty: {__symbolic: 'class'},
+    },
+  },
+  '/tmp/src/reexport/src/originNone.d.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {},
+  },
+  '/tmp/src/reexport/src/reexport2.d.ts': {
+    __symbolic: 'module',
+    version: METADATA_VERSION,
+    metadata: {},
+    exports: [{from: './originNone'}, {from: './origin30'}]
+  }
+};
diff --git a/packages/compiler/test/aot/summary_resolver_spec.ts b/packages/compiler/test/aot/summary_resolver_spec.ts
new file mode 100644
index 000000000000..75ad8f4195e4
--- /dev/null
+++ b/packages/compiler/test/aot/summary_resolver_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 {AotSummaryResolver, AotSummaryResolverHost, CompileSummaryKind, CompileTypeSummary, ResolvedStaticSymbol, StaticSymbol, StaticSymbolCache, StaticSymbolResolver} from '@angular/compiler';
+import {deserializeSummaries, serializeSummaries} from '@angular/compiler/src/aot/summary_serializer';
+import {ConstantPool} from '@angular/compiler/src/constant_pool';
+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';
+
+const EXT = /(\.d)?\.ts$/;
+
+{
+  describe('AotSummaryResolver', () => {
+    let summaryResolver: AotSummaryResolver;
+    let symbolCache: StaticSymbolCache;
+    let host: MockAotSummaryResolverHost;
+
+    beforeEach(() => { symbolCache = new StaticSymbolCache(); });
+
+    function init(summaries: {[filePath: string]: string} = {}) {
+      host = new MockAotSummaryResolverHost(summaries);
+      summaryResolver = new AotSummaryResolver(host, symbolCache);
+    }
+
+    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(
+                 'someFile.ts', 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}])});
+      expect(summaryResolver.resolveSummary(asymbol)).toEqual({symbol: asymbol, metadata: 1});
+    });
+
+    it('should not load summaries for source files', () => {
+      init({});
+      spyOn(host, 'loadSummary').and.callThrough();
+
+      expect(summaryResolver.resolveSummary(symbolCache.get('/a.ts', 'a'))).toBeFalsy();
+      expect(host.loadSummary).not.toHaveBeenCalled();
+    });
+
+    it('should cache summaries', () => {
+      const asymbol = symbolCache.get('/a.d.ts', 'a');
+      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}])});
+      expect(summaryResolver.getSymbolsOf('/a.d.ts')).toEqual([asymbol]);
+    });
+
+    it('should fill importAs for deep symbols', () => {
+      const libSymbol = symbolCache.get('/lib.d.ts', 'Lib');
+      const srcSymbol = symbolCache.get('/src.ts', 'Src');
+      init({
+        '/src.ngsummary.json':
+            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.d.ts', 'Lib_1'));
+    });
+
+    describe('isLibraryFile', () => {
+      it('should use host.isSourceFile to calculate the result', () => {
+        init();
+        expect(summaryResolver.isLibraryFile('someFile.ts')).toBe(false);
+        expect(summaryResolver.isLibraryFile('someFile.d.ts')).toBe(true);
+      });
+
+      it('should calculate the result for generated files based on the result for non generated files',
+         () => {
+           init();
+           spyOn(host, 'isSourceFile').and.callThrough();
+           expect(summaryResolver.isLibraryFile('someFile.ngfactory.ts')).toBe(false);
+           expect(host.isSourceFile).toHaveBeenCalledWith('someFile.ts');
+         });
+    });
+
+    describe('regression', () => {
+      // #18170
+      it('should support resolving symbol with members ', () => {
+        init();
+        expect(summaryResolver.resolveSummary(symbolCache.get('/src.d.ts', 'Src', ['One', 'Two'])))
+            .toBeNull();
+      });
+    });
+  });
+}
+
+
+export class MockAotSummaryResolverHost implements AotSummaryResolverHost {
+  constructor(private summaries: {[fileName: string]: string}) {}
+
+  fileNameToModuleName(fileName: string): string {
+    return './' + path.basename(fileName).replace(EXT, '');
+  }
+
+  toSummaryFileName(sourceFileName: string): string {
+    return sourceFileName.replace(EXT, '') + '.d.ts';
+  }
+
+  fromSummaryFileName(filePath: string): string { return filePath; }
+
+  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,
+    constantPool: new ConstantPool()
+  };
+}
\ 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
new file mode 100644
index 000000000000..26cae7dd97dd
--- /dev/null
+++ b/packages/compiler/test/aot/summary_serializer_spec.ts
@@ -0,0 +1,470 @@
+/**
+ * @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, AotSummaryResolverHost, CompileSummaryKind, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, StaticSymbolResolverHost} from '@angular/compiler';
+import {METADATA_VERSION} from '@angular/compiler-cli';
+import {deserializeSummaries, serializeSummaries} from '@angular/compiler/src/aot/summary_serializer';
+import {summaryFileName} from '@angular/compiler/src/aot/util';
+
+import {MockStaticSymbolResolverHost} from './static_symbol_resolver_spec';
+import {MockAotSummaryResolverHost, createMockOutputContext} from './summary_resolver_spec';
+
+
+{
+  describe('summary serializer', () => {
+    let summaryResolver: AotSummaryResolver;
+    let symbolResolver: StaticSymbolResolver;
+    let symbolCache: StaticSymbolCache;
+    let host: MockAotSummaryResolverHost;
+
+    beforeEach(() => { symbolCache = new StaticSymbolCache(); });
+
+    function init(
+        summaries: {[filePath: string]: string} = {}, metadata: {[key: string]: any} = {}) {
+      host = new MockAotSummaryResolverHost(summaries);
+      summaryResolver = new AotSummaryResolver(host, symbolCache);
+      symbolResolver = new StaticSymbolResolver(
+          new MockStaticSymbolResolverHost(metadata), symbolCache, summaryResolver);
+    }
+
+    describe('summaryFileName', () => {
+      it('should add .ngsummary.json to the filename', () => {
+        init();
+        expect(summaryFileName('a.ts')).toBe('a.ngsummary.json');
+        expect(summaryFileName('a.d.ts')).toBe('a.ngsummary.json');
+        expect(summaryFileName('a.js')).toBe('a.ngsummary.json');
+      });
+    });
+
+    it('should serialize various data correctly', () => {
+      init();
+      const serializedData = serializeSummaries(
+          'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
+          [
+            {
+              symbol: symbolCache.get('/tmp/some_values.ts', 'Values'),
+              metadata: {
+                aNumber: 1,
+                aString: 'hello',
+                anArray: [1, 2],
+                aStaticSymbol: symbolCache.get('/tmp/some_symbol.ts', 'someName'),
+                aStaticSymbolWithMembers:
+                    symbolCache.get('/tmp/some_symbol.ts', 'someName', ['someMember']),
+              }
+            },
+            {
+              symbol: symbolCache.get('/tmp/some_service.ts', 'SomeService'),
+              metadata: {
+                __symbolic: 'class',
+                members: {'aMethod': {__symbolic: 'function'}},
+                statics: {aStatic: true},
+                decorators: ['aDecoratorData']
+              }
+            }
+          ],
+          [{
+            summary: {
+              summaryKind: CompileSummaryKind.Injectable,
+              type: {
+                reference: symbolCache.get('/tmp/some_service.ts', 'SomeService'),
+              }
+            } as any,
+            metadata: null as any
+          }]);
+
+
+      const summaries =
+          deserializeSummaries(symbolCache, summaryResolver, 'someFile.d.ts', serializedData.json)
+              .summaries;
+      expect(summaries.length).toBe(2);
+
+      // Note: change from .ts to .d.ts is expected
+      expect(summaries[0].symbol).toBe(symbolCache.get('/tmp/some_values.d.ts', 'Values'));
+      expect(summaries[0].metadata).toEqual({
+        aNumber: 1,
+        aString: 'hello',
+        anArray: [1, 2],
+        aStaticSymbol: symbolCache.get('/tmp/some_symbol.d.ts', 'someName'),
+        aStaticSymbolWithMembers:
+            symbolCache.get('/tmp/some_symbol.d.ts', 'someName', ['someMember'])
+      });
+
+      expect(summaries[1].symbol).toBe(symbolCache.get('/tmp/some_service.d.ts', 'SomeService'));
+      // serialization should drop class decorators
+      expect(summaries[1].metadata).toEqual({
+        __symbolic: 'class',
+        members: {aMethod: {__symbolic: 'function'}},
+        statics: {aStatic: true}
+      });
+      expect(summaries[1].type !.type.reference)
+          .toBe(symbolCache.get('/tmp/some_service.d.ts', 'SomeService'));
+    });
+
+    it('should automatically add exported directives / pipes of NgModules that are not source files',
+       () => {
+         init();
+         const externalSerialized = serializeSummaries(
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
+             [
+               {symbol: symbolCache.get('/tmp/external.ts', 'SomeExternalPipe'), metadata: null},
+               {symbol: symbolCache.get('/tmp/external.ts', 'SomeExternalDir'), metadata: null},
+             ],
+             [
+               {
+                 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(
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
+             [
+               {symbol: symbolCache.get('/tmp/some_module.ts', 'SomeModule'), metadata: null},
+             ],
+             [{
+               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, summaryResolver, 'someFile.d.ts', serialized.json)
+                 .summaries;
+         init({
+           '/tmp/some_module.ngsummary.json': serialized.json,
+         });
+
+         const serializedReexport = serializeSummaries(
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
+             [
+               {
+                 symbol: symbolCache.get('/tmp/some_reexport.ts', 'ReexportModule'),
+                 metadata: symbolCache.get('/tmp/some_module.d.ts', 'SomeModule')
+               },
+             ],
+             []);
+
+         expect(summaries.length).toBe(3);
+         expect(summaries[0].symbol).toBe(symbolCache.get('/tmp/some_module.d.ts', 'SomeModule'));
+         expect(summaries[1].symbol).toBe(symbolCache.get('/tmp/external.d.ts', 'SomeExternalDir'));
+         expect(summaries[2].symbol)
+             .toBe(symbolCache.get('/tmp/external.d.ts', 'SomeExternalPipe'));
+
+         const reexportSummaries =
+             deserializeSummaries(
+                 symbolCache, summaryResolver, 'someFile.d.ts', serializedReexport.json)
+                 .summaries;
+         expect(reexportSummaries.length).toBe(4);
+         expect(reexportSummaries[0].symbol)
+             .toBe(symbolCache.get('/tmp/some_reexport.d.ts', 'ReexportModule'));
+         expect(reexportSummaries[1].symbol)
+             .toBe(symbolCache.get('/tmp/some_module.d.ts', 'SomeModule'));
+         expect(reexportSummaries[2].symbol)
+             .toBe(symbolCache.get('/tmp/external.d.ts', 'SomeExternalDir'));
+         expect(reexportSummaries[3].symbol)
+             .toBe(symbolCache.get('/tmp/external.d.ts', 'SomeExternalPipe'));
+       });
+
+    it('should automatically add the metadata of referenced symbols that are not in the source files',
+       () => {
+         init();
+         const externalSerialized = serializeSummaries(
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
+             [
+               {
+                 symbol: symbolCache.get('/tmp/external.ts', 'PROVIDERS'),
+                 metadata: [symbolCache.get('/tmp/external_svc.ts', 'SomeService')]
+               },
+               {
+                 symbol: symbolCache.get('/tmp/external_svc.ts', 'SomeService'),
+                 metadata: {__symbolic: 'class'}
+               },
+               // Note: This is an important usecase when using ng1 and ng2 together via
+               // goog.module.
+               // In these cases, users write the following to get a referrable symbol in metadata
+               // collection:
+               //   import UsernameService from 'goog:somePackage.UsernameService';
+               //   export {UsernameService};
+               {
+                 symbol: symbolCache.get('/tmp/external.ts', 'ReexportNonExistent'),
+                 metadata: symbolCache.get('/tmp/external.ts', 'NonExistent'),
+               }
+             ],
+             [{
+               summary: {
+                 summaryKind: CompileSummaryKind.Injectable,
+                 type: {
+                   reference: symbolCache.get('/tmp/external_svc.ts', 'SomeService'),
+                 }
+               } as any,
+               metadata: null as any
+             }]);
+         init(
+             {
+               '/tmp/external.ngsummary.json': externalSerialized.json,
+             },
+             {
+               '/tmp/local.ts': `
+          export var local = 'a';
+        `,
+               '/tmp/non_summary.d.ts':
+                   {__symbolic: 'module', version: METADATA_VERSION, metadata: {'external': 'b'}}
+             });
+         const serialized = serializeSummaries(
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver, [{
+               symbol: symbolCache.get('/tmp/test.ts', 'main'),
+               metadata: {
+                 local: symbolCache.get('/tmp/local.ts', 'local'),
+                 external: symbolCache.get('/tmp/external.d.ts', 'PROVIDERS'),
+                 externalNonSummary: symbolCache.get('/tmp/non_summary.d.ts', 'external'),
+                 reexportNonExistent: symbolCache.get('/tmp/external.ts', 'ReexportNonExistent'),
+               }
+             }],
+             []);
+
+         const summaries =
+             deserializeSummaries(symbolCache, summaryResolver, 'someFile.d.ts', serialized.json)
+                 .summaries;
+         // Note: local should not show up!
+         expect(summaries.length).toBe(4);
+         expect(summaries[0].symbol).toBe(symbolCache.get('/tmp/test.d.ts', 'main'));
+         expect(summaries[0].metadata).toEqual({
+           local: symbolCache.get('/tmp/local.d.ts', 'local'),
+           external: symbolCache.get('/tmp/external.d.ts', 'PROVIDERS'),
+           externalNonSummary: symbolCache.get('/tmp/non_summary.d.ts', 'external'),
+           reexportNonExistent: symbolCache.get('/tmp/external.d.ts', 'ReexportNonExistent'),
+         });
+         expect(summaries[1].symbol).toBe(symbolCache.get('/tmp/external.d.ts', 'PROVIDERS'));
+         expect(summaries[1].metadata).toEqual([symbolCache.get(
+             '/tmp/external_svc.d.ts', 'SomeService')]);
+         // SomService is a transitive dep, but should have been serialized as well.
+         expect(summaries[2].symbol).toBe(symbolCache.get('/tmp/external_svc.d.ts', 'SomeService'));
+         expect(summaries[2].type !.type.reference)
+             .toBe(symbolCache.get('/tmp/external_svc.d.ts', 'SomeService'));
+         // there was no summary for non_summary, but it should have
+         // been serialized as well.
+         expect(summaries[3].symbol).toBe(symbolCache.get('/tmp/non_summary.d.ts', 'external'));
+         expect(summaries[3].metadata).toEqual('b');
+       });
+
+    it('should resolve reexported values in libraries', () => {
+      init();
+      const externalSerialized = serializeSummaries(
+          'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
+          [
+            {symbol: symbolCache.get('/tmp/external.ts', 'value'), metadata: 'someString'},
+            {
+              symbol: symbolCache.get('/tmp/external.ts', 'reexportValue'),
+              metadata: symbolCache.get('/tmp/external.ts', 'value')
+            },
+          ],
+          []);
+      init({
+        '/tmp/external.ngsummary.json': externalSerialized.json,
+      });
+      const serialized = serializeSummaries(
+          'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
+          [
+            {
+              symbol: symbolCache.get('/tmp/test.ts', 'mainValue'),
+              metadata: symbolCache.get('/tmp/external.d.ts', 'reexportValue'),
+            },
+          ],
+          []);
+
+      const summaries =
+          deserializeSummaries(symbolCache, summaryResolver, 'someFile.d.ts', serialized.json)
+              .summaries;
+      expect(summaries.length).toBe(2);
+      expect(summaries[0].symbol).toBe(symbolCache.get('/tmp/test.d.ts', 'mainValue'));
+      expect(summaries[0].metadata).toBe(symbolCache.get('/tmp/external.d.ts', 'value'));
+      expect(summaries[1].symbol).toBe(symbolCache.get('/tmp/external.d.ts', 'value'));
+      expect(summaries[1].metadata).toBe('someString');
+    });
+
+    it('should not create "importAs" names for ctor arguments which are types of reexported classes in libraries',
+       () => {
+         init();
+         const externalSerialized = serializeSummaries(
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
+             [
+               {
+                 symbol: symbolCache.get('/tmp/external.ts', 'type'),
+                 metadata: {__symbolic: 'interface'}
+               },
+               {
+                 symbol: symbolCache.get('/tmp/external.ts', 'value'),
+                 metadata: {__symbolic: 'class'}
+               },
+               {
+                 symbol: symbolCache.get('/tmp/external.ts', 'reexportClass'),
+                 metadata: {
+                   __symbolic: 'class',
+                   'members': {
+                     '__ctor__': [{
+                       '__symbolic': 'constructor',
+                       'parameters': [
+                         symbolCache.get('/tmp/external.ts', 'type'),
+                         symbolCache.get('/tmp/external.ts', 'value'),
+                       ]
+                     }]
+                   }
+
+                 }
+               },
+             ],
+             []);
+         expect(externalSerialized.exportAs).toEqual([]);
+         init({
+           '/tmp/external.ngsummary.json': externalSerialized.json,
+         });
+         const serialized = serializeSummaries(
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver, [{
+               symbol: symbolCache.get('/tmp/test.ts', 'mainClass'),
+               metadata: symbolCache.get('/tmp/external.d.ts', 'reexportClass'),
+             }],
+             []);
+         const importAs =
+             deserializeSummaries(symbolCache, summaryResolver, 'someFile.d.ts', serialized.json)
+                 .importAs;
+         expect(importAs).toEqual([
+           {
+             symbol: symbolCache.get('/tmp/external.d.ts', 'reexportClass'),
+             importAs: symbolCache.get('/tmp/test.d.ts', 'mainClass'),
+           },
+           {
+             symbol: symbolCache.get('/tmp/external.d.ts', 'value'),
+             importAs: symbolCache.get('someFile.ngfactory.d.ts', 'value_3'),
+           }
+         ]);
+       });
+
+    it('should use existing reexports for "importAs" for symbols of libraries', () => {
+      init();
+      const externalSerialized = serializeSummaries(
+          'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
+          [
+            {symbol: symbolCache.get('/tmp/external.ts', 'value'), metadata: 'aValue'},
+            {
+              symbol: symbolCache.get('/tmp/external.ts', 'reexportValue'),
+              metadata: symbolCache.get('/tmp/external.ts', 'value')
+            },
+          ],
+          []);
+      expect(externalSerialized.exportAs).toEqual([]);
+      init({
+        '/tmp/external.ngsummary.json': externalSerialized.json,
+      });
+      const serialized = serializeSummaries(
+          'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver, [{
+            symbol: symbolCache.get('/tmp/test.ts', 'mainValue'),
+            metadata: symbolCache.get('/tmp/external.d.ts', 'reexportValue'),
+          }],
+          []);
+      expect(serialized.exportAs).toEqual([]);
+      const importAs =
+          deserializeSummaries(symbolCache, summaryResolver, 'someFile.d.ts', serialized.json)
+              .importAs;
+      expect(importAs).toEqual([{
+        symbol: symbolCache.get('/tmp/external.d.ts', 'value'),
+        importAs: symbolCache.get('/tmp/test.d.ts', 'mainValue'),
+      }]);
+    });
+
+    it('should create reexports in the ngfactory for symbols of libraries', () => {
+      init();
+      const serialized = serializeSummaries(
+          'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver, [{
+            symbol: symbolCache.get('/tmp/test.ts', 'main'),
+            metadata: [
+              symbolCache.get('/tmp/external.d.ts', 'lib'),
+              symbolCache.get('/tmp/external.d.ts', 'lib', ['someMember']),
+            ]
+          }],
+          []);
+      // Note: no entry for the symbol with members!
+      expect(serialized.exportAs).toEqual([
+        {symbol: symbolCache.get('/tmp/external.d.ts', 'lib'), exportAs: 'lib_1'}
+      ]);
+
+      const deserialized =
+          deserializeSummaries(symbolCache, summaryResolver, 'someFile.d.ts', serialized.json);
+      // Note: no entry for the symbol with members!
+      expect(deserialized.importAs).toEqual([{
+        symbol: symbolCache.get('/tmp/external.d.ts', 'lib'),
+        importAs: symbolCache.get('someFile.ngfactory.d.ts', 'lib_1')
+      }]);
+    });
+
+    describe('with resolved symbols', () => {
+      it('should be able to serialize a call', () => {
+        init();
+        const serialized = serializeSummaries(
+            'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver, [{
+              symbol: symbolCache.get('/tmp/test.ts', 'main'),
+              metadata: {
+                __symbolic: 'call',
+                expression:
+                    {__symbolic: 'resolved', symbol: symbolCache.get('/tmp/test2.ts', 'ref')}
+              }
+            }],
+            []);
+        expect(serialized.json).not.toContain('error');
+      });
+
+      it('should be able to serialize a call to a method', () => {
+        init();
+        const serialized = serializeSummaries(
+            'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver, [{
+              symbol: symbolCache.get('/tmp/test.ts', 'main'),
+              metadata: {
+                __symbolic: 'call',
+                expression: {
+                  __symbolic: 'select',
+                  expression:
+                      {__symbolic: 'resolved', symbol: symbolCache.get('/tmp/test2.ts', 'ref')},
+                  name: 'foo'
+                }
+              }
+            }],
+            []);
+        expect(serialized.json).not.toContain('error');
+      });
+    });
+  });
+}
diff --git a/packages/compiler/test/aot/test_util.ts b/packages/compiler/test/aot/test_util.ts
new file mode 100644
index 000000000000..ce969725efdf
--- /dev/null
+++ b/packages/compiler/test/aot/test_util.ts
@@ -0,0 +1,847 @@
+/**
+ * @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, AotCompilerOptions, GeneratedFile, createAotCompiler, toTypeScript} from '@angular/compiler';
+import {MetadataBundlerHost} from '@angular/compiler-cli/src/metadata/bundler';
+import {MetadataCollector} from '@angular/compiler-cli/src/metadata/collector';
+import {ModuleMetadata} from '@angular/compiler-cli/src/metadata/index';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+export interface MetadataProvider { getMetadata(source: ts.SourceFile): ModuleMetadata|undefined; }
+
+let nodeModulesPath: string;
+let angularSourcePath: string;
+let rootPath: string;
+
+calcPathsOnDisc();
+
+export type MockFileOrDirectory = string | MockDirectory;
+
+export type MockDirectory = {
+  [name: string]: MockFileOrDirectory | undefined;
+};
+
+export function isDirectory(data: MockFileOrDirectory | undefined): data is MockDirectory {
+  return typeof data !== 'string';
+}
+
+const NODE_MODULES = '/node_modules/';
+const IS_GENERATED = /\.(ngfactory|ngstyle)$/;
+const angularts = /@angular\/(\w|\/|-)+\.tsx?$/;
+const rxjs = /\/rxjs\//;
+const tsxfile = /\.tsx$/;
+export const settings: ts.CompilerOptions = {
+  target: ts.ScriptTarget.ES5,
+  declaration: true,
+  module: ts.ModuleKind.CommonJS,
+  moduleResolution: ts.ModuleResolutionKind.NodeJs,
+  emitDecoratorMetadata: true,
+  experimentalDecorators: true,
+  removeComments: false,
+  noImplicitAny: false,
+  skipLibCheck: true,
+  strictNullChecks: true,
+  lib: ['lib.es2015.d.ts', 'lib.dom.d.ts'],
+  types: []
+};
+
+export interface EmitterOptions {
+  emitMetadata: boolean;
+  mockData?: MockDirectory;
+  context?: Map<string, string>;
+}
+
+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 addedFiles = new Map<string, string>();
+  private writtenFiles = new Map<string, string>();
+  private scriptNames: string[];
+  private root = '/';
+  private collector = new MetadataCollector();
+  private cachedAddedDirectories: Set<string>|undefined;
+
+  constructor(scriptNames: string[], private options: EmitterOptions) {
+    // 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 || this.root;
+    if (options.context) {
+      this.addedFiles = mergeMaps(options.context);
+    }
+  }
+
+  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) {
+    const scriptName = this.effectiveName(fileName);
+    this.addedFiles.set(scriptName, content);
+    this.cachedAddedDirectories = undefined;
+    this.scriptNames.push(scriptName);
+  }
+
+  public override(fileName: string, content: string) {
+    const scriptName = this.effectiveName(fileName);
+    this.addedFiles.set(scriptName, content);
+    this.cachedAddedDirectories = undefined;
+  }
+
+  public addFiles(map: Map<string, string>) {
+    for (const [name, content] of Array.from(map.entries())) {
+      this.addedFiles.set(name, content);
+    }
+  }
+
+  public addWrittenFile(fileName: string, content: string) {
+    this.writtenFiles.set(this.effectiveName(fileName), content);
+  }
+
+  public getWrittenFiles(): {name: string, content: string}[] {
+    return Array.from(this.writtenFiles).map(f => ({name: f[0], content: f[1]}));
+  }
+
+  public get scripts(): string[] { return this.scriptNames; }
+
+  public get written(): Map<string, string> { return this.writtenFiles; }
+
+  public effectiveName(fileName: string): string {
+    const prefix = '@angular/';
+    return angularSourcePath && fileName.startsWith(prefix) ?
+        path.join(angularSourcePath, fileName.substr(prefix.length)) :
+        fileName;
+  }
+
+  // ts.ModuleResolutionHost
+  fileExists(fileName: string): boolean {
+    return this.addedFiles.has(fileName) || open(fileName, this.options.mockData) != null ||
+        fs.existsSync(fileName);
+  }
+
+  readFile(fileName: string): string {
+    const result = this.addedFiles.get(fileName) || open(fileName, this.options.mockData);
+    if (result) return result;
+
+    let basename = path.basename(fileName);
+    if (/^lib.*\.d\.ts$/.test(basename)) {
+      let libPath = ts.getDefaultLibFilePath(settings);
+      return fs.readFileSync(path.join(path.dirname(libPath), basename), 'utf8');
+    }
+    return fs.readFileSync(fileName, 'utf8');
+  }
+
+  directoryExists(directoryName: string): boolean {
+    return directoryExists(directoryName, this.options.mockData) ||
+        this.getAddedDirectories().has(directoryName) ||
+        (fs.existsSync(directoryName) && fs.statSync(directoryName).isDirectory());
+  }
+
+  getCurrentDirectory(): string { return this.root; }
+
+  getDirectories(dir: string): string[] {
+    const result = open(dir, this.options.mockData);
+    if (result && typeof result !== 'string') {
+      return Object.keys(result);
+    }
+    return fs.readdirSync(dir).filter(p => {
+      const name = path.join(dir, p);
+      const stat = fs.statSync(name);
+      return stat && stat.isDirectory();
+    });
+  }
+
+  // ts.CompilerHost
+  getSourceFile(
+      fileName: string, languageVersion: ts.ScriptTarget,
+      onError?: (message: string) => void): ts.SourceFile {
+    const content = this.readFile(fileName);
+    if (content) {
+      return ts.createSourceFile(fileName, content, languageVersion, /* setParentNodes */ true);
+    }
+    throw new Error(`File not found '${fileName}'.`);
+  }
+
+  getDefaultLibFileName(options: ts.CompilerOptions): string { return 'lib.d.ts'; }
+
+  writeFile: ts.WriteFileCallback =
+      (fileName: string, data: string, writeByteOrderMark: boolean,
+       onError?: (message: string) => void, sourceFiles?: ReadonlyArray<ts.SourceFile>) => {
+        this.addWrittenFile(fileName, data);
+        if (this.options.emitMetadata && sourceFiles && sourceFiles.length && DTS.test(fileName)) {
+          const metadataFilePath = fileName.replace(DTS, '.metadata.json');
+          const metadata = this.collector.getMetadata(sourceFiles[0]);
+          if (metadata) {
+            this.addWrittenFile(metadataFilePath, JSON.stringify(metadata));
+          }
+        }
+      }
+
+  getCanonicalFileName(fileName: string): string {
+    return fileName;
+  }
+  useCaseSensitiveFileNames(): boolean { return false; }
+  getNewLine(): string { return '\n'; }
+
+  private getAddedDirectories(): Set<string> {
+    let result = this.cachedAddedDirectories;
+    if (!result) {
+      const newCache = new Set<string>();
+      const addFile = (fileName: string) => {
+        const directory = fileName.substr(0, fileName.lastIndexOf('/'));
+        if (!newCache.has(directory)) {
+          newCache.add(directory);
+          addFile(directory);
+        }
+      };
+      Array.from(this.addedFiles.keys()).forEach(addFile);
+      this.cachedAddedDirectories = result = newCache;
+    }
+    return result;
+  }
+}
+
+export class MockCompilerHost implements ts.CompilerHost {
+  scriptNames: string[];
+
+  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: MockDirectory) {
+    this.scriptNames = scriptNames.slice(0);
+  }
+
+  // Test API
+  override(fileName: string, content: string) {
+    if (content) {
+      this.overrides.set(fileName, content);
+    } else {
+      this.overrides.delete(fileName);
+    }
+    this.sourceFiles.delete(fileName);
+  }
+
+  addScript(fileName: string, content: string) {
+    this.overrides.set(fileName, content);
+    this.scriptNames.push(fileName);
+    this.sourceFiles.delete(fileName);
+  }
+
+  assumeFileExists(fileName: string) { this.assumeExists.add(fileName); }
+
+  remove(files: string[]) {
+    // Remove the files from the list of scripts.
+    const fileSet = new Set(files);
+    this.scriptNames = this.scriptNames.filter(f => fileSet.has(f));
+
+    // Remove files from written files
+    files.forEach(f => this.writtenFiles.delete(f));
+  }
+
+  // ts.ModuleResolutionHost
+  fileExists(fileName: string): boolean {
+    if (this.overrides.has(fileName) || this.writtenFiles.has(fileName) ||
+        this.assumeExists.has(fileName)) {
+      return true;
+    }
+    const effectiveName = this.getEffectiveName(fileName);
+    if (effectiveName == fileName) {
+      return open(fileName, this.data) != null;
+    }
+    if (fileName.match(rxjs)) {
+      return fs.existsSync(effectiveName);
+    }
+    return false;
+  }
+
+  readFile(fileName: string): string { return this.getFileContent(fileName) !; }
+
+  trace(s: string): void { this.traces.push(s); }
+
+  getCurrentDirectory(): string { return '/'; }
+
+  getDirectories(dir: string): string[] {
+    const effectiveName = this.getEffectiveName(dir);
+    if (effectiveName === dir) {
+      const data = find(dir, this.data);
+      if (isDirectory(data)) {
+        return Object.keys(data).filter(k => isDirectory(data[k]));
+      }
+    }
+    return [];
+  }
+
+  // ts.CompilerHost
+  getSourceFile(
+      fileName: string, languageVersion: ts.ScriptTarget,
+      onError?: (message: string) => void): ts.SourceFile {
+    let result = this.sourceFiles.get(fileName);
+    if (!result) {
+      const content = this.getFileContent(fileName);
+      if (content) {
+        result = ts.createSourceFile(fileName, content, languageVersion);
+        this.sourceFiles.set(fileName, result);
+      }
+    }
+    return result !;
+  }
+
+  getDefaultLibFileName(options: ts.CompilerOptions): string { return 'lib.d.ts'; }
+
+  writeFile: ts.WriteFileCallback =
+      (fileName: string, data: string, writeByteOrderMark: boolean) => {
+        this.writtenFiles.set(fileName, data);
+        this.sourceFiles.delete(fileName);
+      }
+
+  getCanonicalFileName(fileName: string): string {
+    return fileName;
+  }
+  useCaseSensitiveFileNames(): boolean { return false; }
+  getNewLine(): string { return '\n'; }
+
+  // Private methods
+  private getFileContent(fileName: string): string|undefined {
+    if (this.overrides.has(fileName)) {
+      return this.overrides.get(fileName);
+    }
+    if (this.writtenFiles.has(fileName)) {
+      return this.writtenFiles.get(fileName);
+    }
+    let basename = path.basename(fileName);
+    if (/^lib.*\.d\.ts$/.test(basename)) {
+      let libPath = ts.getDefaultLibFilePath(settings);
+      return fs.readFileSync(path.join(path.dirname(libPath), basename), 'utf8');
+    }
+    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 rxjs = '/rxjs';
+    if (name.startsWith('/' + node_modules)) {
+      if (nodeModulesPath && name.startsWith('/' + node_modules + rxjs)) {
+        return path.join(nodeModulesPath, name.substr(node_modules.length + 1));
+      }
+    }
+    return name;
+  }
+}
+
+const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
+const DTS = /\.d\.ts$/;
+const GENERATED_FILES = /\.ngfactory\.ts$|\.ngstyle\.ts$/;
+
+export class MockAotCompilerHost implements AotCompilerHost {
+  private metadataVisible: boolean = true;
+  private dtsAreSource: boolean = true;
+  private resolveModuleNameHost: ts.ModuleResolutionHost;
+
+  constructor(
+      private tsHost: MockCompilerHost,
+      private metadataProvider: MetadataProvider = new MetadataCollector()) {
+    this.resolveModuleNameHost = Object.create(tsHost);
+    this.resolveModuleNameHost.fileExists = (fileName) => {
+      fileName = stripNgResourceSuffix(fileName);
+      return tsHost.fileExists(fileName);
+    };
+  }
+
+  hideMetadata() { this.metadataVisible = false; }
+
+  tsFilesOnly() { this.dtsAreSource = false; }
+
+  // StaticSymbolResolverHost
+  getMetadataFor(modulePath: string): {[key: string]: any}[]|undefined {
+    if (!this.tsHost.fileExists(modulePath)) {
+      return undefined;
+    }
+    if (DTS.test(modulePath)) {
+      if (this.metadataVisible) {
+        const metadataPath = modulePath.replace(DTS, '.metadata.json');
+        if (this.tsHost.fileExists(metadataPath)) {
+          let result = JSON.parse(this.tsHost.readFile(metadataPath));
+          return Array.isArray(result) ? result : [result];
+        }
+      }
+    } else {
+      const sf = this.tsHost.getSourceFile(modulePath, ts.ScriptTarget.Latest);
+      const metadata = this.metadataProvider.getMetadata(sf);
+      return metadata ? [metadata] : [];
+    }
+    return undefined;
+  }
+
+  moduleNameToFileName(moduleName: string, containingFile: string): string|null {
+    if (!containingFile || !containingFile.length) {
+      if (moduleName.indexOf('.') === 0) {
+        throw new Error('Resolution of relative paths requires a containing file.');
+      }
+      // Any containing file gives the same result for absolute imports
+      containingFile = path.join('/', 'index.ts');
+    }
+    moduleName = moduleName.replace(EXT, '');
+    const resolved = ts.resolveModuleName(
+                           moduleName, containingFile.replace(/\\/g, '/'),
+                           {baseDir: '/', genDir: '/'}, this.resolveModuleNameHost)
+                         .resolvedModule;
+    return resolved ? resolved.resolvedFileName : null;
+  }
+
+  getOutputName(filePath: string) { return filePath; }
+
+  resourceNameToFileName(resourceName: string, containingFile: string) {
+    // Note: we convert package paths into relative paths to be compatible with the the
+    // previous implementation of UrlResolver.
+    if (resourceName && resourceName.charAt(0) !== '.' && !path.isAbsolute(resourceName)) {
+      resourceName = `./${resourceName}`;
+    }
+    const filePathWithNgResource =
+        this.moduleNameToFileName(addNgResourceSuffix(resourceName), containingFile);
+    return filePathWithNgResource ? stripNgResourceSuffix(filePathWithNgResource) : null;
+  }
+
+  // AotSummaryResolverHost
+  loadSummary(filePath: string): string|null { return this.tsHost.readFile(filePath); }
+
+  isSourceFile(sourceFilePath: string): boolean {
+    return !GENERATED_FILES.test(sourceFilePath) &&
+        (this.dtsAreSource || !DTS.test(sourceFilePath));
+  }
+
+  toSummaryFileName(filePath: string): string { return filePath.replace(EXT, '') + '.d.ts'; }
+
+  fromSummaryFileName(filePath: string): string { return filePath; }
+
+  // AotCompilerHost
+  fileNameToModuleName(importedFile: string, containingFile: string): string {
+    return importedFile.replace(EXT, '');
+  }
+
+  loadResource(path: string): string {
+    if (this.tsHost.fileExists(path)) {
+      return this.tsHost.readFile(path);
+    } else {
+      throw new Error(`Resource ${path} not found.`);
+    }
+  }
+}
+
+export class MockMetadataBundlerHost implements MetadataBundlerHost {
+  private collector = new MetadataCollector();
+
+  constructor(private host: ts.CompilerHost) {}
+
+  getMetadataFor(moduleName: string): ModuleMetadata|undefined {
+    const source = this.host.getSourceFile(moduleName + '.ts', ts.ScriptTarget.Latest);
+    return source && this.collector.getMetadata(source);
+  }
+}
+
+function find(fileName: string, data: MockFileOrDirectory | undefined): MockFileOrDirectory|
+    undefined {
+  if (!data) return undefined;
+  const names = fileName.split('/');
+  if (names.length && !names[0].length) names.shift();
+  let current: MockFileOrDirectory|undefined = data;
+  for (const name of names) {
+    if (typeof current !== 'object') {
+      return undefined;
+    }
+    current = current[name];
+  }
+  return current;
+}
+
+function open(fileName: string, data: MockFileOrDirectory | undefined): string|undefined {
+  let result = find(fileName, data);
+  if (typeof result === 'string') {
+    return result;
+  }
+  return undefined;
+}
+
+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/injectable';
+  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';
+`;
+
+function readBazelWrittenFilesFrom(
+    bazelPackageRoot: string, packageName: string, map: Map<string, string>,
+    skip: (name: string, fullName: string) => boolean = () => false) {
+  function processDirectory(dir: string, dest: string) {
+    const entries = fs.readdirSync(dir);
+    for (const name of entries) {
+      const fullName = path.join(dir, name);
+      const destName = path.join(dest, name);
+      const stat = fs.statSync(fullName);
+      if (!skip(name, fullName)) {
+        if (stat.isDirectory()) {
+          processDirectory(fullName, destName);
+        } else {
+          const content = fs.readFileSync(fullName, 'utf8');
+          map.set(destName, content);
+        }
+      }
+    }
+  }
+  try {
+    processDirectory(bazelPackageRoot, path.join('/node_modules/@angular', packageName));
+  } catch (e) {
+    console.error(
+        `Consider adding //packages/${packageName} as a data dependency in the BUILD.bazel rule for the failing test`);
+    throw e;
+  }
+}
+
+export function isInBazel(): boolean {
+  return process.env.TEST_SRCDIR != null;
+}
+
+export function setup(options: {
+  compileAngular: boolean,
+  compileFakeCore?: boolean,
+  compileAnimations: boolean, compileCommon?: boolean
+} = {
+  compileAngular: true,
+  compileAnimations: true,
+  compileCommon: false,
+  compileFakeCore: false,
+}) {
+  let angularFiles = new Map<string, string>();
+
+  beforeAll(() => {
+    const sources = process.env.TEST_SRCDIR;
+    if (sources) {
+      // If running under bazel then we get the compiled version of the files from the bazel package
+      // output.
+      const bundles = new Set([
+        'bundles', 'esm2015', 'esm5', 'testing', 'testing.d.ts', 'testing.metadata.json', 'browser',
+        'browser.d.ts'
+      ]);
+      const skipDirs = (name: string) => bundles.has(name);
+      if (options.compileAngular) {
+        // If this fails please add //packages/core:npm_package as a test data dependency.
+        readBazelWrittenFilesFrom(
+            path.join(sources, 'angular/packages/core/npm_package'), 'core', angularFiles,
+            skipDirs);
+      }
+      if (options.compileFakeCore) {
+        readBazelWrittenFilesFrom(
+            path.join(sources, 'angular/packages/compiler-cli/test/ngtsc/fake_core/npm_package'),
+            'core', angularFiles, skipDirs);
+      }
+      if (options.compileAnimations) {
+        // If this fails please add //packages/animations:npm_package as a test data dependency.
+        readBazelWrittenFilesFrom(
+            path.join(sources, 'angular/packages/animations/npm_package'), 'animations',
+            angularFiles, skipDirs);
+      }
+      if (options.compileCommon) {
+        // If this fails please add //packages/common:npm_package as a test data dependency.
+        readBazelWrittenFilesFrom(
+            path.join(sources, 'angular/packages/common/npm_package'), 'common', angularFiles,
+            skipDirs);
+      }
+      return;
+    }
+
+    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.compileCommon) {
+      const emittingHost =
+          new EmittingCompilerHost(['@angular/common/index.ts'], {emitMetadata: true});
+      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: ReadonlyArray<ts.Diagnostic>) {
+    if (diagnostics && diagnostics.length) {
+      throw new Error(
+          'Errors from TypeScript:\n' +
+          diagnostics
+              .map(
+                  d =>
+                      `${fileInfo(d)}${ts.flattenDiagnosticMessageText(d.messageText, '\n')}${lineInfo(d)}`)
+              .join(' \n'));
+    }
+  }
+  expectNoDiagnostics(program.getOptionsDiagnostics());
+  expectNoDiagnostics(program.getSyntacticDiagnostics());
+  expectNoDiagnostics(program.getSemanticDiagnostics());
+}
+
+export function isSource(fileName: string): boolean {
+  return !isDts(fileName) && /\.ts$/.test(fileName);
+}
+
+function isDts(fileName: string): boolean {
+  return /\.d.ts$/.test(fileName);
+}
+
+function isSourceOrDts(fileName: string): boolean {
+  return /\.ts$/.test(fileName);
+}
+
+export function compile(
+    rootDirs: MockData, options: {
+      emit?: boolean,
+      useSummaries?: boolean,
+      preCompile?: (program: ts.Program) => void,
+      postCompile?: (program: ts.Program) => void,
+    }& 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(options.useSummaries ? isSource : isSourceOrDts);
+
+  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, (err) => { throw err; });
+  const analyzedModules =
+      compiler.analyzeModulesSync(program.getSourceFiles().map(sf => sf.fileName));
+  const genFiles = 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) {
+    const dtsFilesWithGenFiles = new Set<string>(genFiles.map(gf => gf.srcFileUrl).filter(isDts));
+    outDir =
+        arrayToMockDir(toMockFileArray([host.writtenFiles, host.overrides])
+                           .filter((entry) => !isSource(entry.fileName))
+                           .concat(rootDirArr.filter(e => dtsFilesWithGenFiles.has(e.fileName))));
+  }
+  return {genFiles, outDir};
+}
+
+function stripNgResourceSuffix(fileName: string): string {
+  return fileName.replace(/\.\$ngresource\$.*/, '');
+}
+
+function addNgResourceSuffix(fileName: string): string {
+  return `${fileName}.$ngresource$`;
+}
+
+function extractFileNames(directory: MockDirectory): string[] {
+  const result: string[] = [];
+  const scan = (directory: MockDirectory, prefix: string) => {
+    for (let name of Object.getOwnPropertyNames(directory)) {
+      const entry = directory[name];
+      const fileName = `${prefix}/${name}`;
+      if (typeof entry === 'string') {
+        result.push(fileName);
+      } else if (entry) {
+        scan(entry, fileName);
+      }
+    }
+  };
+  scan(directory, '');
+  return result;
+}
+
+export function emitLibrary(
+    context: Map<string, string>, mockData: MockDirectory,
+    scriptFiles?: string[]): Map<string, string> {
+  const emittingHost = new EmittingCompilerHost(
+      scriptFiles || extractFileNames(mockData), {emitMetadata: true, mockData, context});
+  const emittingProgram = ts.createProgram(emittingHost.scripts, settings, emittingHost);
+  expectNoDiagnostics(emittingProgram);
+  emittingProgram.emit();
+  return emittingHost.written;
+}
+
+export function mergeMaps<K, V>(...maps: Map<K, V>[]): Map<K, V> {
+  const result = new Map<K, V>();
+
+  for (const map of maps) {
+    for (const [key, value] of Array.from(map.entries())) {
+      result.set(key, value);
+    }
+  }
+
+  return result;
+}
diff --git a/packages/compiler/test/config_spec.ts b/packages/compiler/test/config_spec.ts
new file mode 100644
index 000000000000..459e80cf60b1
--- /dev/null
+++ b/packages/compiler/test/config_spec.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {MissingTranslationStrategy} from '@angular/core';
+import {CompilerConfig, preserveWhitespacesDefault} from '../src/config';
+
+{
+  describe('compiler config', () => {
+    it('should set missing translation strategy', () => {
+      const config = new CompilerConfig({missingTranslation: MissingTranslationStrategy.Error});
+      expect(config.missingTranslation).toEqual(MissingTranslationStrategy.Error);
+    });
+  });
+
+  describe('preserveWhitespacesDefault', () => {
+    it('should return the default `false` setting when no preserveWhitespacesOption are provided',
+       () => { expect(preserveWhitespacesDefault(null)).toEqual(false); });
+    it('should return the preserveWhitespacesOption when provided as a parameter', () => {
+      expect(preserveWhitespacesDefault(true)).toEqual(true);
+      expect(preserveWhitespacesDefault(false)).toEqual(false);
+    });
+  });
+}
diff --git a/packages/compiler/test/core_spec.ts b/packages/compiler/test/core_spec.ts
new file mode 100644
index 000000000000..f5864584cc5c
--- /dev/null
+++ b/packages/compiler/test/core_spec.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 {core as compilerCore} from '@angular/compiler';
+import * as core from '@angular/core';
+
+{
+  describe('compiler core', () => {
+    it('Attribute should be equal', () => {
+      typeExtends<compilerCore.Attribute, core.Attribute>();
+      typeExtends<core.Attribute, compilerCore.Attribute>();
+      compareRuntimeShape(new core.Attribute('someName'), compilerCore.createAttribute('someName'));
+    });
+
+    it('Inject should be equal', () => {
+      typeExtends<compilerCore.Inject, core.Inject>();
+      typeExtends<core.Inject, compilerCore.Inject>();
+      compareRuntimeShape(new core.Inject('someName'), compilerCore.createInject('someName'));
+    });
+
+    it('Query should be equal', () => {
+      typeExtends<compilerCore.Query, core.Query>();
+      typeExtends<core.Query, compilerCore.Query>();
+      compareRuntimeShape(
+          new core.ContentChild('someSelector'), compilerCore.createContentChild('someSelector'));
+      compareRuntimeShape(
+          new core.ContentChild('someSelector', {read: 'someRead'}),
+          compilerCore.createContentChild('someSelector', {read: 'someRead'}));
+      compareRuntimeShape(
+          new core.ContentChildren('someSelector'),
+          compilerCore.createContentChildren('someSelector'));
+      compareRuntimeShape(
+          new core.ContentChildren('someSelector', {read: 'someRead', descendants: false}),
+          compilerCore.createContentChildren(
+              'someSelector', {read: 'someRead', descendants: false}));
+      compareRuntimeShape(
+          new core.ViewChild('someSelector'), compilerCore.createViewChild('someSelector'));
+      compareRuntimeShape(
+          new core.ViewChild('someSelector', {read: 'someRead'}),
+          compilerCore.createViewChild('someSelector', {read: 'someRead'}));
+      compareRuntimeShape(
+          new core.ViewChildren('someSelector'), compilerCore.createViewChildren('someSelector'));
+      compareRuntimeShape(
+          new core.ViewChildren('someSelector', {read: 'someRead'}),
+          compilerCore.createViewChildren('someSelector', {read: 'someRead'}));
+    });
+
+    it('Directive should be equal', () => {
+      typeExtends<compilerCore.Directive, core.Directive>();
+      typeExtends<core.Directive, compilerCore.Directive>();
+      compareRuntimeShape(new core.Directive({}), compilerCore.createDirective({}));
+    });
+
+    it('Component should be equal', () => {
+      typeExtends<compilerCore.Component, core.Component>();
+      typeExtends<core.Component, compilerCore.Component>();
+      compareRuntimeShape(new core.Component({}), compilerCore.createComponent({}));
+    });
+
+    it('Pipe should be equal', () => {
+      typeExtends<compilerCore.Pipe, core.Pipe>();
+      typeExtends<core.Pipe, compilerCore.Pipe>();
+      compareRuntimeShape(
+          new core.Pipe({name: 'someName'}), compilerCore.createPipe({name: 'someName'}));
+    });
+
+    it('NgModule should be equal', () => {
+      typeExtends<compilerCore.NgModule, core.NgModule>();
+      typeExtends<core.NgModule, compilerCore.NgModule>();
+      compareRuntimeShape(new core.NgModule({}), compilerCore.createNgModule({}));
+    });
+
+    it('marker metadata should be equal', () => {
+      compareRuntimeShape(new core.Injectable(), compilerCore.createInjectable());
+      compareRuntimeShape(new core.Optional(), compilerCore.createOptional());
+      compareRuntimeShape(new core.Self(), compilerCore.createSelf());
+      compareRuntimeShape(new core.SkipSelf(), compilerCore.createSkipSelf());
+      compareRuntimeShape(new core.Host(), compilerCore.createHost());
+    });
+
+    it('InjectionToken should be equal', () => {
+      compareRuntimeShape(
+          new core.InjectionToken('someName'), compilerCore.createInjectionToken('someName'));
+    });
+
+    it('non const enums should be equal', () => {
+      typeExtends<compilerCore.ViewEncapsulation, core.ViewEncapsulation>();
+      typeExtends<core.ViewEncapsulation, compilerCore.ViewEncapsulation>();
+
+      typeExtends<compilerCore.ChangeDetectionStrategy, core.ChangeDetectionStrategy>();
+      typeExtends<core.ChangeDetectionStrategy, compilerCore.ChangeDetectionStrategy>();
+
+      typeExtends<compilerCore.SecurityContext, core.SecurityContext>();
+      typeExtends<core.SecurityContext, compilerCore.SecurityContext>();
+
+      typeExtends<compilerCore.MissingTranslationStrategy, core.MissingTranslationStrategy>();
+      typeExtends<core.MissingTranslationStrategy, compilerCore.MissingTranslationStrategy>();
+    });
+
+    it('const enums should be equal', () => {
+      const expectToBe = (val1: any, val2: any) => expect(val1).toBe(val2);
+
+      expectToBe(compilerCore.NodeFlags.None, core.ɵNodeFlags.None);
+      expectToBe(compilerCore.NodeFlags.TypeElement, core.ɵNodeFlags.TypeElement);
+      expectToBe(compilerCore.NodeFlags.TypeText, core.ɵNodeFlags.TypeText);
+      expectToBe(compilerCore.NodeFlags.ProjectedTemplate, core.ɵNodeFlags.ProjectedTemplate);
+      expectToBe(compilerCore.NodeFlags.CatRenderNode, core.ɵNodeFlags.CatRenderNode);
+      expectToBe(compilerCore.NodeFlags.TypeNgContent, core.ɵNodeFlags.TypeNgContent);
+      expectToBe(compilerCore.NodeFlags.TypePipe, core.ɵNodeFlags.TypePipe);
+      expectToBe(compilerCore.NodeFlags.TypePureArray, core.ɵNodeFlags.TypePureArray);
+      expectToBe(compilerCore.NodeFlags.TypePureObject, core.ɵNodeFlags.TypePureObject);
+      expectToBe(compilerCore.NodeFlags.TypePurePipe, core.ɵNodeFlags.TypePurePipe);
+      expectToBe(compilerCore.NodeFlags.CatPureExpression, core.ɵNodeFlags.CatPureExpression);
+      expectToBe(compilerCore.NodeFlags.TypeValueProvider, core.ɵNodeFlags.TypeValueProvider);
+      expectToBe(compilerCore.NodeFlags.TypeClassProvider, core.ɵNodeFlags.TypeClassProvider);
+      expectToBe(compilerCore.NodeFlags.TypeFactoryProvider, core.ɵNodeFlags.TypeFactoryProvider);
+      expectToBe(
+          compilerCore.NodeFlags.TypeUseExistingProvider, core.ɵNodeFlags.TypeUseExistingProvider);
+      expectToBe(compilerCore.NodeFlags.LazyProvider, core.ɵNodeFlags.LazyProvider);
+      expectToBe(compilerCore.NodeFlags.PrivateProvider, core.ɵNodeFlags.PrivateProvider);
+      expectToBe(compilerCore.NodeFlags.TypeDirective, core.ɵNodeFlags.TypeDirective);
+      expectToBe(compilerCore.NodeFlags.Component, core.ɵNodeFlags.Component);
+      expectToBe(
+          compilerCore.NodeFlags.CatProviderNoDirective, core.ɵNodeFlags.CatProviderNoDirective);
+      expectToBe(compilerCore.NodeFlags.CatProvider, core.ɵNodeFlags.CatProvider);
+      expectToBe(compilerCore.NodeFlags.OnInit, core.ɵNodeFlags.OnInit);
+      expectToBe(compilerCore.NodeFlags.OnDestroy, core.ɵNodeFlags.OnDestroy);
+      expectToBe(compilerCore.NodeFlags.DoCheck, core.ɵNodeFlags.DoCheck);
+      expectToBe(compilerCore.NodeFlags.OnChanges, core.ɵNodeFlags.OnChanges);
+      expectToBe(compilerCore.NodeFlags.AfterContentInit, core.ɵNodeFlags.AfterContentInit);
+      expectToBe(compilerCore.NodeFlags.AfterContentChecked, core.ɵNodeFlags.AfterContentChecked);
+      expectToBe(compilerCore.NodeFlags.AfterViewInit, core.ɵNodeFlags.AfterViewInit);
+      expectToBe(compilerCore.NodeFlags.AfterViewChecked, core.ɵNodeFlags.AfterViewChecked);
+      expectToBe(compilerCore.NodeFlags.EmbeddedViews, core.ɵNodeFlags.EmbeddedViews);
+      expectToBe(compilerCore.NodeFlags.ComponentView, core.ɵNodeFlags.ComponentView);
+      expectToBe(compilerCore.NodeFlags.TypeContentQuery, core.ɵNodeFlags.TypeContentQuery);
+      expectToBe(compilerCore.NodeFlags.TypeViewQuery, core.ɵNodeFlags.TypeViewQuery);
+      expectToBe(compilerCore.NodeFlags.StaticQuery, core.ɵNodeFlags.StaticQuery);
+      expectToBe(compilerCore.NodeFlags.DynamicQuery, core.ɵNodeFlags.DynamicQuery);
+      expectToBe(compilerCore.NodeFlags.CatQuery, core.ɵNodeFlags.CatQuery);
+      expectToBe(compilerCore.NodeFlags.Types, core.ɵNodeFlags.Types);
+
+      expectToBe(compilerCore.DepFlags.None, core.ɵDepFlags.None);
+      expectToBe(compilerCore.DepFlags.SkipSelf, core.ɵDepFlags.SkipSelf);
+      expectToBe(compilerCore.DepFlags.Optional, core.ɵDepFlags.Optional);
+      expectToBe(compilerCore.DepFlags.Value, core.ɵDepFlags.Value);
+
+      expectToBe(compilerCore.InjectFlags.Default, core.InjectFlags.Default);
+      expectToBe(compilerCore.InjectFlags.SkipSelf, core.InjectFlags.SkipSelf);
+      expectToBe(compilerCore.InjectFlags.Self, core.InjectFlags.Self);
+
+
+      expectToBe(compilerCore.ArgumentType.Inline, core.ɵArgumentType.Inline);
+      expectToBe(compilerCore.ArgumentType.Dynamic, core.ɵArgumentType.Dynamic);
+
+      expectToBe(
+          compilerCore.BindingFlags.TypeElementAttribute, core.ɵBindingFlags.TypeElementAttribute);
+      expectToBe(compilerCore.BindingFlags.TypeElementClass, core.ɵBindingFlags.TypeElementClass);
+      expectToBe(compilerCore.BindingFlags.TypeElementStyle, core.ɵBindingFlags.TypeElementStyle);
+      expectToBe(compilerCore.BindingFlags.TypeProperty, core.ɵBindingFlags.TypeProperty);
+      expectToBe(compilerCore.BindingFlags.SyntheticProperty, core.ɵBindingFlags.SyntheticProperty);
+      expectToBe(
+          compilerCore.BindingFlags.SyntheticHostProperty,
+          core.ɵBindingFlags.SyntheticHostProperty);
+      expectToBe(
+          compilerCore.BindingFlags.CatSyntheticProperty, core.ɵBindingFlags.CatSyntheticProperty);
+      expectToBe(compilerCore.BindingFlags.Types, core.ɵBindingFlags.Types);
+
+      expectToBe(compilerCore.QueryBindingType.First, core.ɵQueryBindingType.First);
+      expectToBe(compilerCore.QueryBindingType.All, core.ɵQueryBindingType.All);
+
+      expectToBe(compilerCore.QueryValueType.ElementRef, core.ɵQueryValueType.ElementRef);
+      expectToBe(compilerCore.QueryValueType.RenderElement, core.ɵQueryValueType.RenderElement);
+      expectToBe(compilerCore.QueryValueType.TemplateRef, core.ɵQueryValueType.TemplateRef);
+      expectToBe(
+          compilerCore.QueryValueType.ViewContainerRef, core.ɵQueryValueType.ViewContainerRef);
+      expectToBe(compilerCore.QueryValueType.Provider, core.ɵQueryValueType.Provider);
+
+      expectToBe(compilerCore.ViewFlags.None, core.ɵViewFlags.None);
+      expectToBe(compilerCore.ViewFlags.OnPush, core.ɵViewFlags.OnPush);
+    });
+  });
+}
+
+function compareRuntimeShape(a: any, b: any) {
+  const keys = metadataKeys(a);
+  expect(keys).toEqual(metadataKeys(b));
+  keys.forEach(key => { expect(a[key]).toBe(b[key]); });
+  // Need to check 'ngMetadataName' separately, as this is
+  // on the prototype in @angular/core, but a regular property in @angular/compiler.
+  expect(a.ngMetadataName).toBe(b.ngMetadataName);
+}
+
+function metadataKeys(a: any): string[] {
+  return Object.keys(a).filter(prop => prop !== 'ngMetadataName' && !prop.startsWith('_')).sort();
+}
+
+function typeExtends<T1 extends T2, T2>() {}
diff --git a/packages/compiler/test/css_parser/css_lexer_spec.ts b/packages/compiler/test/css_parser/css_lexer_spec.ts
new file mode 100644
index 000000000000..64a44d6c6400
--- /dev/null
+++ b/packages/compiler/test/css_parser/css_lexer_spec.ts
@@ -0,0 +1,376 @@
+/**
+ * @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 {describe, expect, it} from '../../../core/testing/src/testing_internal';
+import {CssLexer, CssLexerMode, CssToken, CssTokenType, cssScannerError, getRawMessage, getToken} from '../../src/css_parser/css_lexer';
+
+(function() {
+  function tokenize(
+      code: string, trackComments: boolean = false,
+      mode: CssLexerMode = CssLexerMode.ALL): CssToken[] {
+    const scanner = new CssLexer().scan(code, trackComments);
+    scanner.setMode(mode);
+
+    const tokens: CssToken[] = [];
+    let output = scanner.scan();
+    while (output != null) {
+      const error = output.error;
+      if (error != null) {
+        throw cssScannerError(getToken(error), getRawMessage(error));
+      }
+      tokens.push(output.token);
+      output = scanner.scan();
+    }
+
+    return tokens;
+  }
+
+  describe('CssLexer', () => {
+    it('should lex newline characters as whitespace when whitespace mode is on', () => {
+      const newlines = ['\n', '\r\n', '\r', '\f'];
+      newlines.forEach((line) => {
+        const token = tokenize(line, false, CssLexerMode.ALL_TRACK_WS)[0];
+        expect(token.type).toEqual(CssTokenType.Whitespace);
+      });
+    });
+
+    it('should combined newline characters as one newline token when whitespace mode is on', () => {
+      const newlines = ['\n', '\r\n', '\r', '\f'].join('');
+      const tokens = tokenize(newlines, false, CssLexerMode.ALL_TRACK_WS);
+      expect(tokens.length).toEqual(1);
+      expect(tokens[0].type).toEqual(CssTokenType.Whitespace);
+    });
+
+    it('should not consider whitespace or newline values at all when whitespace mode is off',
+       () => {
+         const newlines = ['\n', '\r\n', '\r', '\f'].join('');
+         const tokens = tokenize(newlines);
+         expect(tokens.length).toEqual(0);
+       });
+
+    it('should lex simple selectors and their inner properties', () => {
+      const cssCode = '\n' +
+          '  .selector { my-prop: my-value; }\n';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Character);
+      expect(tokens[0].strValue).toEqual('.');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[1].strValue).toEqual('selector');
+
+      expect(tokens[2].type).toEqual(CssTokenType.Character);
+      expect(tokens[2].strValue).toEqual('{');
+
+      expect(tokens[3].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[3].strValue).toEqual('my-prop');
+
+      expect(tokens[4].type).toEqual(CssTokenType.Character);
+      expect(tokens[4].strValue).toEqual(':');
+
+      expect(tokens[5].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[5].strValue).toEqual('my-value');
+
+      expect(tokens[6].type).toEqual(CssTokenType.Character);
+      expect(tokens[6].strValue).toEqual(';');
+
+      expect(tokens[7].type).toEqual(CssTokenType.Character);
+      expect(tokens[7].strValue).toEqual('}');
+    });
+
+    it('should capture the column and line values for each token', () => {
+      const cssCode = '#id {\n' +
+          '  prop:value;\n' +
+          '}';
+
+      const tokens = tokenize(cssCode);
+
+      // #
+      expect(tokens[0].type).toEqual(CssTokenType.Character);
+      expect(tokens[0].column).toEqual(0);
+      expect(tokens[0].line).toEqual(0);
+
+      // id
+      expect(tokens[1].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[1].column).toEqual(1);
+      expect(tokens[1].line).toEqual(0);
+
+      // {
+      expect(tokens[2].type).toEqual(CssTokenType.Character);
+      expect(tokens[2].column).toEqual(4);
+      expect(tokens[2].line).toEqual(0);
+
+      // prop
+      expect(tokens[3].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[3].column).toEqual(2);
+      expect(tokens[3].line).toEqual(1);
+
+      // :
+      expect(tokens[4].type).toEqual(CssTokenType.Character);
+      expect(tokens[4].column).toEqual(6);
+      expect(tokens[4].line).toEqual(1);
+
+      // value
+      expect(tokens[5].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[5].column).toEqual(7);
+      expect(tokens[5].line).toEqual(1);
+
+      // ;
+      expect(tokens[6].type).toEqual(CssTokenType.Character);
+      expect(tokens[6].column).toEqual(12);
+      expect(tokens[6].line).toEqual(1);
+
+      // }
+      expect(tokens[7].type).toEqual(CssTokenType.Character);
+      expect(tokens[7].column).toEqual(0);
+      expect(tokens[7].line).toEqual(2);
+    });
+
+    it('should lex quoted strings and escape accordingly', () => {
+      const cssCode = 'prop: \'some { value } \\\' that is quoted\'';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[1].type).toEqual(CssTokenType.Character);
+      expect(tokens[2].type).toEqual(CssTokenType.String);
+      expect(tokens[2].strValue).toEqual('\'some { value } \\\' that is quoted\'');
+    });
+
+    it('should treat attribute operators as regular characters', () => {
+      tokenize('^|~+*').forEach((token) => { expect(token.type).toEqual(CssTokenType.Character); });
+    });
+
+    it('should lex numbers properly and set them as numbers', () => {
+      const cssCode = '0 1 -2 3.0 -4.001';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Number);
+      expect(tokens[0].strValue).toEqual('0');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Number);
+      expect(tokens[1].strValue).toEqual('1');
+
+      expect(tokens[2].type).toEqual(CssTokenType.Number);
+      expect(tokens[2].strValue).toEqual('-2');
+
+      expect(tokens[3].type).toEqual(CssTokenType.Number);
+      expect(tokens[3].strValue).toEqual('3.0');
+
+      expect(tokens[4].type).toEqual(CssTokenType.Number);
+      expect(tokens[4].strValue).toEqual('-4.001');
+    });
+
+    it('should lex @keywords', () => {
+      const cssCode = '@import()@something';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.AtKeyword);
+      expect(tokens[0].strValue).toEqual('@import');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Character);
+      expect(tokens[1].strValue).toEqual('(');
+
+      expect(tokens[2].type).toEqual(CssTokenType.Character);
+      expect(tokens[2].strValue).toEqual(')');
+
+      expect(tokens[3].type).toEqual(CssTokenType.AtKeyword);
+      expect(tokens[3].strValue).toEqual('@something');
+    });
+
+    it('should still lex a number even if it has a dimension suffix', () => {
+      const cssCode = '40% is 40 percent';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Number);
+      expect(tokens[0].strValue).toEqual('40');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Character);
+      expect(tokens[1].strValue).toEqual('%');
+
+      expect(tokens[2].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[2].strValue).toEqual('is');
+
+      expect(tokens[3].type).toEqual(CssTokenType.Number);
+      expect(tokens[3].strValue).toEqual('40');
+    });
+
+    it('should allow escaped character and unicode character-strings in CSS selectors', () => {
+      const cssCode = '\\123456 .some\\thing \{\}';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[0].strValue).toEqual('\\123456');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Character);
+      expect(tokens[2].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[2].strValue).toEqual('some\\thing');
+    });
+
+    it('should distinguish identifiers and numbers from special characters', () => {
+      const cssCode = 'one*two=-4+three-4-equals_value$';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[0].strValue).toEqual('one');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Character);
+      expect(tokens[1].strValue).toEqual('*');
+
+      expect(tokens[2].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[2].strValue).toEqual('two');
+
+      expect(tokens[3].type).toEqual(CssTokenType.Character);
+      expect(tokens[3].strValue).toEqual('=');
+
+      expect(tokens[4].type).toEqual(CssTokenType.Number);
+      expect(tokens[4].strValue).toEqual('-4');
+
+      expect(tokens[5].type).toEqual(CssTokenType.Character);
+      expect(tokens[5].strValue).toEqual('+');
+
+      expect(tokens[6].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[6].strValue).toEqual('three-4-equals_value');
+
+      expect(tokens[7].type).toEqual(CssTokenType.Character);
+      expect(tokens[7].strValue).toEqual('$');
+    });
+
+    it('should filter out comments and whitespace by default', () => {
+      const cssCode = '.selector /* comment */ { /* value */ }';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].strValue).toEqual('.');
+      expect(tokens[1].strValue).toEqual('selector');
+      expect(tokens[2].strValue).toEqual('{');
+      expect(tokens[3].strValue).toEqual('}');
+    });
+
+    it('should track comments when the flag is set to true', () => {
+      const cssCode = '.selector /* comment */ { /* value */ }';
+      const trackComments = true;
+      const tokens = tokenize(cssCode, trackComments, CssLexerMode.ALL_TRACK_WS);
+
+      expect(tokens[0].strValue).toEqual('.');
+      expect(tokens[1].strValue).toEqual('selector');
+      expect(tokens[2].strValue).toEqual(' ');
+
+      expect(tokens[3].type).toEqual(CssTokenType.Comment);
+      expect(tokens[3].strValue).toEqual('/* comment */');
+
+      expect(tokens[4].strValue).toEqual(' ');
+      expect(tokens[5].strValue).toEqual('{');
+      expect(tokens[6].strValue).toEqual(' ');
+
+      expect(tokens[7].type).toEqual(CssTokenType.Comment);
+      expect(tokens[7].strValue).toEqual('/* value */');
+    });
+
+    describe('Selector Mode', () => {
+      it('should throw an error if a selector is being parsed while in the wrong mode', () => {
+        const cssCode = '.class > tag';
+
+        let capturedMessage: string|null = null;
+        try {
+          tokenize(cssCode, false, CssLexerMode.STYLE_BLOCK);
+        } catch (e) {
+          capturedMessage = getRawMessage(e);
+        }
+
+        expect(capturedMessage).toMatch(/Unexpected character \[\>\] at column 0:7 in expression/g);
+
+        capturedMessage = null;
+        try {
+          tokenize(cssCode, false, CssLexerMode.SELECTOR);
+        } catch (e) {
+          capturedMessage = getRawMessage(e);
+        }
+
+        expect(capturedMessage).toEqual(null);
+      });
+    });
+
+    describe('Attribute Mode', () => {
+      it('should consider attribute selectors as valid input and throw when an invalid modifier is used',
+         () => {
+           function tokenizeAttr(modifier: string) {
+             const cssCode = 'value' + modifier + '=\'something\'';
+             return tokenize(cssCode, false, CssLexerMode.ATTRIBUTE_SELECTOR);
+           }
+
+           expect(tokenizeAttr('*').length).toEqual(4);
+           expect(tokenizeAttr('|').length).toEqual(4);
+           expect(tokenizeAttr('^').length).toEqual(4);
+           expect(tokenizeAttr('$').length).toEqual(4);
+           expect(tokenizeAttr('~').length).toEqual(4);
+           expect(tokenizeAttr('').length).toEqual(3);
+
+           expect(() => { tokenizeAttr('+'); }).toThrow();
+         });
+    });
+
+    describe('Media Query Mode', () => {
+      it('should validate media queries with a reduced subset of valid characters', () => {
+        function tokenizeQuery(code: string) {
+          return tokenize(code, false, CssLexerMode.MEDIA_QUERY);
+        }
+
+        // the reason why the numbers are so high is because MediaQueries keep
+        // track of the whitespace values
+        expect(tokenizeQuery('(prop: value)').length).toEqual(5);
+        expect(tokenizeQuery('(prop: value) and (prop2: value2)').length).toEqual(11);
+        expect(tokenizeQuery('tv and (prop: value)').length).toEqual(7);
+        expect(tokenizeQuery('print and ((prop: value) or (prop2: value2))').length).toEqual(15);
+        expect(tokenizeQuery('(content: \'something $ crazy inside &\')').length).toEqual(5);
+
+        expect(() => { tokenizeQuery('(max-height: 10 + 20)'); }).toThrow();
+
+        expect(() => { tokenizeQuery('(max-height: fifty < 100)'); }).toThrow();
+      });
+    });
+
+    describe('Pseudo Selector Mode', () => {
+      it('should validate pseudo selector identifiers with a reduced subset of valid characters',
+         () => {
+           function tokenizePseudo(code: string, withArgs = false): CssToken[] {
+             const mode = withArgs ? CssLexerMode.PSEUDO_SELECTOR_WITH_ARGUMENTS :
+                                     CssLexerMode.PSEUDO_SELECTOR;
+             return tokenize(code, false, mode);
+           }
+
+           expect(tokenizePseudo('hover').length).toEqual(1);
+           expect(tokenizePseudo('focus').length).toEqual(1);
+           expect(tokenizePseudo('lang(en-us)', true).length).toEqual(4);
+
+           expect(() => { tokenizePseudo('lang(something:broken)', true); }).toThrow();
+
+           expect(() => { tokenizePseudo('not(.selector)', true); }).toThrow();
+         });
+    });
+
+    describe(
+        'Style Block Mode', () => {
+          it('should style blocks with a reduced subset of valid characters',
+             () => {
+               function tokenizeStyles(code: string) {
+                 return tokenize(code, false, CssLexerMode.STYLE_BLOCK);
+               }
+
+               expect(tokenizeStyles(`
+          key: value;
+          prop: 100;
+          style: value3!important;
+        `).length).toEqual(14);
+
+               expect(() => tokenizeStyles(` key$: value; `)).toThrow();
+               expect(() => tokenizeStyles(` key: value$; `)).toThrow();
+               expect(() => tokenizeStyles(` key: value + 10; `)).toThrow();
+               expect(() => tokenizeStyles(` key: &value; `)).toThrow();
+             });
+        });
+  });
+})();
diff --git a/packages/compiler/test/css_parser/css_parser_spec.ts b/packages/compiler/test/css_parser/css_parser_spec.ts
new file mode 100644
index 000000000000..670a48264b3b
--- /dev/null
+++ b/packages/compiler/test/css_parser/css_parser_spec.ts
@@ -0,0 +1,802 @@
+/**
+ * @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 {describe, expect, it} from '../../../core/testing/src/testing_internal';
+import {CssBlockAst, CssBlockDefinitionRuleAst, CssBlockRuleAst, CssDefinitionAst, CssInlineRuleAst, CssKeyframeDefinitionAst, CssKeyframeRuleAst, CssMediaQueryRuleAst, CssSelectorRuleAst, CssStyleSheetAst, CssStyleValueAst} from '../../src/css_parser/css_ast';
+import {BlockType, CssParseError, CssParser, CssToken, ParsedCssResult} from '../../src/css_parser/css_parser';
+import {ParseLocation} from '../../src/parse_util';
+
+export function assertTokens(tokens: CssToken[], valuesArr: string[]) {
+  for (let i = 0; i < tokens.length; i++) {
+    expect(tokens[i].strValue == valuesArr[i]);
+  }
+}
+
+{
+  describe('CssParser', () => {
+    function parse(css: string): ParsedCssResult {
+      return new CssParser().parse(css, 'some-fake-css-file.css');
+    }
+
+    function makeAst(css: string): CssStyleSheetAst {
+      const output = parse(css);
+      const errors = output.errors;
+      if (errors.length > 0) {
+        throw new Error(errors.map((error: CssParseError) => error.msg).join(', '));
+      }
+      return output.ast;
+    }
+
+    it('should parse CSS into a stylesheet Ast', () => {
+      const styles = '.selector { prop: value123; }';
+
+      const ast = makeAst(styles);
+      expect(ast.rules.length).toEqual(1);
+
+      const rule = <CssSelectorRuleAst>ast.rules[0];
+      const selector = rule.selectors[0];
+      expect(selector.strValue).toEqual('.selector');
+
+      const block: CssBlockAst = rule.block;
+      expect(block.entries.length).toEqual(1);
+
+      const definition = <CssDefinitionAst>block.entries[0];
+      expect(definition.property.strValue).toEqual('prop');
+
+      const value = <CssStyleValueAst>definition.value;
+      expect(value.tokens[0].strValue).toEqual('value123');
+    });
+
+    it('should parse multiple CSS selectors sharing the same set of styles', () => {
+      const styles = `
+        .class, #id, tag, [attr], key + value, * value, :-moz-any-link {
+          prop: value123;
+        }
+      `;
+
+      const ast = makeAst(styles);
+      expect(ast.rules.length).toEqual(1);
+
+      const rule = <CssSelectorRuleAst>ast.rules[0];
+      expect(rule.selectors.length).toBe(7);
+
+      const classRule = rule.selectors[0];
+      const idRule = rule.selectors[1];
+      const tagRule = rule.selectors[2];
+      const attrRule = rule.selectors[3];
+      const plusOpRule = rule.selectors[4];
+      const starOpRule = rule.selectors[5];
+      const mozRule = rule.selectors[6];
+
+      assertTokens(classRule.selectorParts[0].tokens, ['.', 'class']);
+      assertTokens(idRule.selectorParts[0].tokens, ['.', 'class']);
+      assertTokens(attrRule.selectorParts[0].tokens, ['[', 'attr', ']']);
+
+      assertTokens(plusOpRule.selectorParts[0].tokens, ['key']);
+      expect(plusOpRule.selectorParts[0].operator.strValue).toEqual('+');
+      assertTokens(plusOpRule.selectorParts[1].tokens, ['value']);
+
+      assertTokens(starOpRule.selectorParts[0].tokens, ['*']);
+      assertTokens(starOpRule.selectorParts[1].tokens, ['value']);
+
+      assertTokens(mozRule.selectorParts[0].pseudoSelectors[0].tokens, [':', '-moz-any-link']);
+
+      const style1 = <CssDefinitionAst>rule.block.entries[0];
+      expect(style1.property.strValue).toEqual('prop');
+      assertTokens(style1.value.tokens, ['value123']);
+    });
+
+    it('should parse keyframe rules', () => {
+      const styles = `
+        @keyframes rotateMe {
+          from {
+            transform: rotate(-360deg);
+          }
+          50% {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `;
+
+      const ast = makeAst(styles);
+      expect(ast.rules.length).toEqual(1);
+
+      const rule = <CssKeyframeRuleAst>ast.rules[0];
+      expect(rule.name !.strValue).toEqual('rotateMe');
+
+      const block = <CssBlockAst>rule.block;
+      const fromRule = <CssKeyframeDefinitionAst>block.entries[0];
+
+      expect(fromRule.name !.strValue).toEqual('from');
+      const fromStyle = <CssDefinitionAst>(<CssBlockAst>fromRule.block).entries[0];
+      expect(fromStyle.property.strValue).toEqual('transform');
+      assertTokens(fromStyle.value.tokens, ['rotate', '(', '-360', 'deg', ')']);
+
+      const midRule = <CssKeyframeDefinitionAst>block.entries[1];
+
+      expect(midRule.name !.strValue).toEqual('50%');
+      const midStyle = <CssDefinitionAst>(<CssBlockAst>midRule.block).entries[0];
+      expect(midStyle.property.strValue).toEqual('transform');
+      assertTokens(midStyle.value.tokens, ['rotate', '(', '0', 'deg', ')']);
+
+      const toRule = <CssKeyframeDefinitionAst>block.entries[2];
+
+      expect(toRule.name !.strValue).toEqual('to');
+      const toStyle = <CssDefinitionAst>(<CssBlockAst>toRule.block).entries[0];
+      expect(toStyle.property.strValue).toEqual('transform');
+      assertTokens(toStyle.value.tokens, ['rotate', '(', '360', 'deg', ')']);
+    });
+
+    it('should parse media queries into a stylesheet Ast', () => {
+      const styles = `
+        @media all and (max-width:100px) {
+          .selector {
+            prop: value123;
+          }
+        }
+      `;
+
+      const ast = makeAst(styles);
+      expect(ast.rules.length).toEqual(1);
+
+      const rule = <CssMediaQueryRuleAst>ast.rules[0];
+      assertTokens(rule.query.tokens, ['all', 'and', '(', 'max-width', ':', '100', 'px', ')']);
+
+      const block = <CssBlockAst>rule.block;
+      expect(block.entries.length).toEqual(1);
+
+      const rule2 = <CssSelectorRuleAst>block.entries[0];
+      expect(rule2.selectors[0].strValue).toEqual('.selector');
+
+      const block2 = <CssBlockAst>rule2.block;
+      expect(block2.entries.length).toEqual(1);
+    });
+
+    it('should parse inline CSS values', () => {
+      const styles = `
+        @import url('remote.css');
+        @charset "UTF-8";
+        @namespace ng url(http://angular.io/namespace/ng);
+      `;
+
+      const ast = makeAst(styles);
+
+      const importRule = <CssInlineRuleAst>ast.rules[0];
+      expect(importRule.type).toEqual(BlockType.Import);
+      assertTokens(importRule.value.tokens, ['url', '(', 'remote', '.', 'css', ')']);
+
+      const charsetRule = <CssInlineRuleAst>ast.rules[1];
+      expect(charsetRule.type).toEqual(BlockType.Charset);
+      assertTokens(charsetRule.value.tokens, ['UTF-8']);
+
+      const namespaceRule = <CssInlineRuleAst>ast.rules[2];
+      expect(namespaceRule.type).toEqual(BlockType.Namespace);
+      assertTokens(
+          namespaceRule.value.tokens, ['ng', 'url', '(', 'http://angular.io/namespace/ng', ')']);
+    });
+
+    it('should parse CSS values that contain functions and leave the inner function data untokenized',
+       () => {
+         const styles = `
+        .class {
+          background: url(matias.css);
+          animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+          height: calc(100% - 50px);
+          background-image: linear-gradient( 45deg, rgba(100, 0, 0, 0.5), black );
+        }
+      `;
+
+         const ast = makeAst(styles);
+         expect(ast.rules.length).toEqual(1);
+
+         const defs = (<CssSelectorRuleAst>ast.rules[0]).block.entries;
+         expect(defs.length).toEqual(4);
+
+         assertTokens((<CssDefinitionAst>defs[0]).value.tokens, ['url', '(', 'matias.css', ')']);
+         assertTokens(
+             (<CssDefinitionAst>defs[1]).value.tokens,
+             ['cubic-bezier', '(', '0.755, 0.050, 0.855, 0.060', ')']);
+         assertTokens((<CssDefinitionAst>defs[2]).value.tokens, ['calc', '(', '100% - 50px', ')']);
+         assertTokens(
+             (<CssDefinitionAst>defs[3]).value.tokens,
+             ['linear-gradient', '(', '45deg, rgba(100, 0, 0, 0.5), black', ')']);
+       });
+
+    it('should parse un-named block-level CSS values', () => {
+      const styles = `
+        @font-face {
+          font-family: "Matias";
+          font-weight: bold;
+          src: url(font-face.ttf);
+        }
+        @viewport {
+          max-width: 100px;
+          min-height: 1000px;
+        }
+      `;
+
+      const ast = makeAst(styles);
+
+      const fontFaceRule = <CssBlockRuleAst>ast.rules[0];
+      expect(fontFaceRule.type).toEqual(BlockType.FontFace);
+      expect(fontFaceRule.block.entries.length).toEqual(3);
+
+      const viewportRule = <CssBlockRuleAst>ast.rules[1];
+      expect(viewportRule.type).toEqual(BlockType.Viewport);
+      expect(viewportRule.block.entries.length).toEqual(2);
+    });
+
+    it('should parse multiple levels of semicolons', () => {
+      const styles = `
+        ;;;
+        @import url('something something')
+        ;;;;;;;;
+        ;;;;;;;;
+        ;@font-face {
+          ;src   :   url(font-face.ttf);;;;;;;;
+          ;;;-webkit-animation:my-animation
+        };;;
+        @media all and (max-width:100px)
+        {;
+          .selector {prop: value123;};
+          ;.selector2{prop:1}}
+      `;
+
+      const ast = makeAst(styles);
+
+      const importRule = <CssInlineRuleAst>ast.rules[0];
+      expect(importRule.type).toEqual(BlockType.Import);
+      assertTokens(importRule.value.tokens, ['url', '(', 'something something', ')']);
+
+      const fontFaceRule = <CssBlockRuleAst>ast.rules[1];
+      expect(fontFaceRule.type).toEqual(BlockType.FontFace);
+      expect(fontFaceRule.block.entries.length).toEqual(2);
+
+      const mediaQueryRule = <CssMediaQueryRuleAst>ast.rules[2];
+      assertTokens(
+          mediaQueryRule.query.tokens, ['all', 'and', '(', 'max-width', ':', '100', 'px', ')']);
+      expect(mediaQueryRule.block.entries.length).toEqual(2);
+    });
+
+    it('should throw an error if an unknown @value block rule is parsed', () => {
+      const styles = `
+        @matias { hello: there; }
+      `;
+
+      expect(() => {
+        makeAst(styles);
+      }).toThrowError(/^CSS Parse Error: The CSS "at" rule "@matias" is not allowed to used here/g);
+    });
+
+    it('should parse empty rules', () => {
+      const styles = `
+        .empty-rule { }
+        .somewhat-empty-rule { /* property: value; */ }
+        .non-empty-rule { property: value; }
+      `;
+
+      const ast = makeAst(styles);
+
+      const rules = ast.rules;
+      expect((<CssSelectorRuleAst>rules[0]).block.entries.length).toEqual(0);
+      expect((<CssSelectorRuleAst>rules[1]).block.entries.length).toEqual(0);
+      expect((<CssSelectorRuleAst>rules[2]).block.entries.length).toEqual(1);
+    });
+
+    it('should parse the @document rule', () => {
+      const styles = `
+        @document url(http://www.w3.org/),
+                       url-prefix(http://www.w3.org/Style/),
+                       domain(mozilla.org),
+                       regexp("https:.*")
+        {
+          /* CSS rules here apply to:
+             - The page "http://www.w3.org/".
+             - Any page whose URL begins with "http://www.w3.org/Style/"
+             - Any page whose URL's host is "mozilla.org" or ends with
+               ".mozilla.org"
+             - Any page whose URL starts with "https:" */
+
+          /* make the above-mentioned pages really ugly */
+          body {
+            color: purple;
+            background: yellow;
+          }
+        }
+      `;
+
+      const ast = makeAst(styles);
+
+      const rules = ast.rules;
+      const documentRule = <CssBlockDefinitionRuleAst>rules[0];
+      expect(documentRule.type).toEqual(BlockType.Document);
+
+      const rule = <CssSelectorRuleAst>documentRule.block.entries[0];
+      expect(rule.strValue).toEqual('body');
+    });
+
+    it('should parse the @page rule', () => {
+      const styles = `
+        @page one {
+          .selector { prop: value; }
+        }
+        @page two {
+          .selector2 { prop: value2; }
+        }
+      `;
+
+      const ast = makeAst(styles);
+
+      const rules = ast.rules;
+
+      const pageRule1 = <CssBlockDefinitionRuleAst>rules[0];
+      expect(pageRule1.query.strValue).toEqual('@page one');
+      expect(pageRule1.query.tokens[0].strValue).toEqual('one');
+      expect(pageRule1.type).toEqual(BlockType.Page);
+
+      const pageRule2 = <CssBlockDefinitionRuleAst>rules[1];
+      expect(pageRule2.query.strValue).toEqual('@page two');
+      expect(pageRule2.query.tokens[0].strValue).toEqual('two');
+      expect(pageRule2.type).toEqual(BlockType.Page);
+
+      const selectorOne = <CssSelectorRuleAst>pageRule1.block.entries[0];
+      expect(selectorOne.strValue).toEqual('.selector');
+
+      const selectorTwo = <CssSelectorRuleAst>pageRule2.block.entries[0];
+      expect(selectorTwo.strValue).toEqual('.selector2');
+    });
+
+    it('should parse the @supports rule', () => {
+      const styles = `
+        @supports (animation-name: "rotate") {
+          a:hover { animation: rotate 1s; }
+        }
+      `;
+
+      const ast = makeAst(styles);
+
+      const rules = ast.rules;
+
+      const supportsRule = <CssBlockDefinitionRuleAst>rules[0];
+      assertTokens(supportsRule.query.tokens, ['(', 'animation-name', ':', 'rotate', ')']);
+      expect(supportsRule.type).toEqual(BlockType.Supports);
+
+      const selectorOne = <CssSelectorRuleAst>supportsRule.block.entries[0];
+      expect(selectorOne.strValue).toEqual('a:hover');
+    });
+
+    it('should collect multiple errors during parsing', () => {
+      const styles = `
+        .class$value { something: something }
+        @custom { something: something }
+        #id { cool^: value }
+      `;
+
+      const output = parse(styles);
+      expect(output.errors.length).toEqual(3);
+    });
+
+    it('should recover from selector errors and continue parsing', () => {
+      const styles = `
+        tag& { key: value; }
+        .%tag { key: value; }
+        #tag$ { key: value; }
+      `;
+
+      const output = parse(styles);
+      const errors = output.errors;
+      const ast = output.ast;
+
+      expect(errors.length).toEqual(3);
+
+      expect(ast.rules.length).toEqual(3);
+
+      const rule1 = <CssSelectorRuleAst>ast.rules[0];
+      expect(rule1.selectors[0].strValue).toEqual('tag&');
+      expect(rule1.block.entries.length).toEqual(1);
+
+      const rule2 = <CssSelectorRuleAst>ast.rules[1];
+      expect(rule2.selectors[0].strValue).toEqual('.%tag');
+      expect(rule2.block.entries.length).toEqual(1);
+
+      const rule3 = <CssSelectorRuleAst>ast.rules[2];
+      expect(rule3.selectors[0].strValue).toEqual('#tag$');
+      expect(rule3.block.entries.length).toEqual(1);
+    });
+
+    it('should throw an error when parsing invalid CSS Selectors', () => {
+      const styles = '.class[[prop%=value}] { style: val; }';
+      const output = parse(styles);
+      const errors = output.errors;
+
+      expect(errors.length).toEqual(3);
+
+      expect(errors[0].msg).toMatch(/Unexpected character \[\[\] at column 0:7/g);
+
+      expect(errors[1].msg).toMatch(/Unexpected character \[%\] at column 0:12/g);
+
+      expect(errors[2].msg).toMatch(/Unexpected character \[}\] at column 0:19/g);
+    });
+
+    it('should throw an error if an attribute selector is not closed properly', () => {
+      const styles = '.class[prop=value { style: val; }';
+      const output = parse(styles);
+      const errors = output.errors;
+
+      expect(errors[0].msg).toMatch(/Unbalanced CSS attribute selector at column 0:12/g);
+    });
+
+    it('should throw an error if a pseudo function selector is not closed properly', () => {
+      const styles = 'body:lang(en { key:value; }';
+      const output = parse(styles);
+      const errors = output.errors;
+
+      expect(errors[0].msg)
+          .toMatch(/Character does not match expected Character value \("{" should match "\)"\)/);
+    });
+
+    it('should raise an error when a semi colon is missing from a CSS style/pair that isn\'t the last entry',
+       () => {
+         const styles = `.class {
+        color: red
+        background: blue
+      }`;
+
+         const output = parse(styles);
+         const errors = output.errors;
+
+         expect(errors.length).toEqual(1);
+
+         expect(errors[0].msg)
+             .toMatch(/The CSS key\/value definition did not end with a semicolon at column 1:15/g);
+       });
+
+    it('should parse the inner value of a :not() pseudo-selector as a CSS selector', () => {
+      const styles = `div:not(.ignore-this-div) {
+        prop: value;
+      }`;
+
+      const output = parse(styles);
+      const errors = output.errors;
+      const ast = output.ast;
+
+      expect(errors.length).toEqual(0);
+
+      const rule1 = <CssSelectorRuleAst>ast.rules[0];
+      expect(rule1.selectors.length).toEqual(1);
+
+      const simpleSelector = rule1.selectors[0].selectorParts[0];
+      assertTokens(simpleSelector.tokens, ['div']);
+
+      const pseudoSelector = simpleSelector.pseudoSelectors[0];
+      expect(pseudoSelector.name).toEqual('not');
+      assertTokens(pseudoSelector.tokens, ['.', 'ignore-this-div']);
+    });
+
+    it('should parse the inner selectors of a :host-context selector', () => {
+      const styles = `body > :host-context(.a, .b, .c:hover) {
+        prop: value;
+      }`;
+
+      const output = parse(styles);
+      const errors = output.errors;
+      const ast = output.ast;
+
+      expect(errors.length).toEqual(0);
+
+      const rule1 = <CssSelectorRuleAst>ast.rules[0];
+      expect(rule1.selectors.length).toEqual(1);
+
+      const simpleSelector = rule1.selectors[0].selectorParts[1];
+      const innerSelectors = simpleSelector.pseudoSelectors[0].innerSelectors;
+
+      assertTokens(innerSelectors[0].selectorParts[0].tokens, ['.', 'a']);
+      assertTokens(innerSelectors[1].selectorParts[0].tokens, ['.', 'b']);
+
+      const finalSelector = innerSelectors[2].selectorParts[0];
+      assertTokens(finalSelector.tokens, ['.', 'c', ':', 'hover']);
+      assertTokens(finalSelector.pseudoSelectors[0].tokens, [':', 'hover']);
+    });
+
+    it('should raise parse errors when CSS key/value pairs are invalid', () => {
+      const styles = `.class {
+        background color: value;
+        color: value
+        font-size;
+        font-weight
+      }`;
+
+      const output = parse(styles);
+      const errors = output.errors;
+
+      expect(errors.length).toEqual(4);
+
+      expect(errors[0].msg)
+          .toMatch(
+              /Identifier does not match expected Character value \("color" should match ":"\) at column 1:19/g);
+
+      expect(errors[1].msg)
+          .toMatch(/The CSS key\/value definition did not end with a semicolon at column 2:15/g);
+
+      expect(errors[2].msg)
+          .toMatch(/The CSS property was not paired with a style value at column 3:8/g);
+
+      expect(errors[3].msg)
+          .toMatch(/The CSS property was not paired with a style value at column 4:8/g);
+    });
+
+    it('should recover from CSS key/value parse errors', () => {
+      const styles = `
+        .problem-class { background color: red; color: white; }
+        .good-boy-class { background-color: red; color: white; }
+       `;
+
+      const output = parse(styles);
+      const ast = output.ast;
+
+      expect(ast.rules.length).toEqual(2);
+
+      const rule1 = <CssSelectorRuleAst>ast.rules[0];
+      expect(rule1.block.entries.length).toEqual(2);
+
+      const style1 = <CssDefinitionAst>rule1.block.entries[0];
+      expect(style1.property.strValue).toEqual('background color');
+      assertTokens(style1.value.tokens, ['red']);
+
+      const style2 = <CssDefinitionAst>rule1.block.entries[1];
+      expect(style2.property.strValue).toEqual('color');
+      assertTokens(style2.value.tokens, ['white']);
+    });
+
+    describe('location offsets', () => {
+      let styles: string;
+
+      function assertMatchesOffsetAndChar(
+          location: ParseLocation, expectedOffset: number, expectedChar: string): void {
+        expect(location.offset).toEqual(expectedOffset);
+        expect(styles[expectedOffset]).toEqual(expectedChar);
+      }
+
+      it('should collect the source span location of each AST node with regular selectors', () => {
+        styles = '.problem-class { border-top-right: 1px; color: white; }\n';
+        styles += '#good-boy-rule_ { background-color: #fe4; color: teal; }';
+
+        const output = parse(styles);
+        const ast = output.ast;
+        assertMatchesOffsetAndChar(ast.location.start, 0, '.');
+        assertMatchesOffsetAndChar(ast.location.end, 111, '}');
+
+        const rule1 = <CssSelectorRuleAst>ast.rules[0];
+        assertMatchesOffsetAndChar(rule1.location.start, 0, '.');
+        assertMatchesOffsetAndChar(rule1.location.end, 54, '}');
+
+        const rule2 = <CssSelectorRuleAst>ast.rules[1];
+        assertMatchesOffsetAndChar(rule2.location.start, 56, '#');
+        assertMatchesOffsetAndChar(rule2.location.end, 111, '}');
+
+        const selector1 = rule1.selectors[0];
+        assertMatchesOffsetAndChar(selector1.location.start, 0, '.');
+        assertMatchesOffsetAndChar(selector1.location.end, 1, 'p');  // problem-class
+
+        const selector2 = rule2.selectors[0];
+        assertMatchesOffsetAndChar(selector2.location.start, 56, '#');
+        assertMatchesOffsetAndChar(selector2.location.end, 57, 'g');  // good-boy-rule_
+
+        const block1 = rule1.block;
+        assertMatchesOffsetAndChar(block1.location.start, 15, '{');
+        assertMatchesOffsetAndChar(block1.location.end, 54, '}');
+
+        const block2 = rule2.block;
+        assertMatchesOffsetAndChar(block2.location.start, 72, '{');
+        assertMatchesOffsetAndChar(block2.location.end, 111, '}');
+
+        const block1def1 = <CssDefinitionAst>block1.entries[0];
+        assertMatchesOffsetAndChar(block1def1.location.start, 17, 'b');  // border-top-right
+        assertMatchesOffsetAndChar(block1def1.location.end, 36, 'p');    // px
+
+        const block1def2 = <CssDefinitionAst>block1.entries[1];
+        assertMatchesOffsetAndChar(block1def2.location.start, 40, 'c');  // color
+        assertMatchesOffsetAndChar(block1def2.location.end, 47, 'w');    // white
+
+        const block2def1 = <CssDefinitionAst>block2.entries[0];
+        assertMatchesOffsetAndChar(block2def1.location.start, 74, 'b');  // background-color
+        assertMatchesOffsetAndChar(block2def1.location.end, 93, 'f');    // fe4
+
+        const block2def2 = <CssDefinitionAst>block2.entries[1];
+        assertMatchesOffsetAndChar(block2def2.location.start, 98, 'c');  // color
+        assertMatchesOffsetAndChar(block2def2.location.end, 105, 't');   // teal
+
+        const block1value1 = block1def1.value;
+        assertMatchesOffsetAndChar(block1value1.location.start, 35, '1');
+        assertMatchesOffsetAndChar(block1value1.location.end, 36, 'p');
+
+        const block1value2 = block1def2.value;
+        assertMatchesOffsetAndChar(block1value2.location.start, 47, 'w');
+        assertMatchesOffsetAndChar(block1value2.location.end, 47, 'w');
+
+        const block2value1 = block2def1.value;
+        assertMatchesOffsetAndChar(block2value1.location.start, 92, '#');
+        assertMatchesOffsetAndChar(block2value1.location.end, 93, 'f');
+
+        const block2value2 = block2def2.value;
+        assertMatchesOffsetAndChar(block2value2.location.start, 105, 't');
+        assertMatchesOffsetAndChar(block2value2.location.end, 105, 't');
+      });
+
+      it('should collect the source span location of each AST node with media query data', () => {
+        styles = '@media (all and max-width: 100px) { a { display:none; } }';
+
+        const output = parse(styles);
+        const ast = output.ast;
+
+        const mediaQuery = <CssMediaQueryRuleAst>ast.rules[0];
+        assertMatchesOffsetAndChar(mediaQuery.location.start, 0, '@');
+        assertMatchesOffsetAndChar(mediaQuery.location.end, 56, '}');
+
+        const predicate = mediaQuery.query;
+        assertMatchesOffsetAndChar(predicate.location.start, 0, '@');
+        assertMatchesOffsetAndChar(predicate.location.end, 32, ')');
+
+        const rule = <CssSelectorRuleAst>mediaQuery.block.entries[0];
+        assertMatchesOffsetAndChar(rule.location.start, 36, 'a');
+        assertMatchesOffsetAndChar(rule.location.end, 54, '}');
+      });
+
+      it('should collect the source span location of each AST node with keyframe data', () => {
+        styles = '@keyframes rotateAndZoomOut { ';
+        styles += 'from { transform: rotate(0deg); } ';
+        styles += '100% { transform: rotate(360deg) scale(2); }';
+        styles += '}';
+
+        const output = parse(styles);
+        const ast = output.ast;
+
+        const keyframes = <CssKeyframeRuleAst>ast.rules[0];
+        assertMatchesOffsetAndChar(keyframes.location.start, 0, '@');
+        assertMatchesOffsetAndChar(keyframes.location.end, 108, '}');
+
+        const step1 = <CssKeyframeDefinitionAst>keyframes.block.entries[0];
+        assertMatchesOffsetAndChar(step1.location.start, 30, 'f');
+        assertMatchesOffsetAndChar(step1.location.end, 62, '}');
+
+        const step2 = <CssKeyframeDefinitionAst>keyframes.block.entries[1];
+        assertMatchesOffsetAndChar(step2.location.start, 64, '1');
+        assertMatchesOffsetAndChar(step2.location.end, 107, '}');
+      });
+
+      it('should collect the source span location of each AST node with an inline rule', () => {
+        styles = '@import url(something.css)';
+
+        const output = parse(styles);
+        const ast = output.ast;
+
+        const rule = <CssInlineRuleAst>ast.rules[0];
+        assertMatchesOffsetAndChar(rule.location.start, 0, '@');
+        assertMatchesOffsetAndChar(rule.location.end, 25, ')');
+
+        const value = rule.value;
+        assertMatchesOffsetAndChar(value.location.start, 8, 'u');
+        assertMatchesOffsetAndChar(value.location.end, 25, ')');
+      });
+
+      it('should property collect the start/end locations with an invalid stylesheet', () => {
+        styles = '#id { something: value';
+
+        const output = parse(styles);
+        const ast = output.ast;
+
+        assertMatchesOffsetAndChar(ast.location.start, 0, '#');
+        assertMatchesOffsetAndChar(ast.location.end, 22, undefined !);
+      });
+    });
+
+    it('should parse minified CSS content properly', () => {
+      // this code was taken from the angular.io webpage's CSS code
+      const styles = `
+.is-hidden{display:none!important}
+.is-visible{display:block!important}
+.is-visually-hidden{height:1px;width:1px;overflow:hidden;opacity:0.01;position:absolute;bottom:0;right:0;z-index:1}
+.grid-fluid,.grid-fixed{margin:0 auto}
+.grid-fluid .c1,.grid-fixed .c1,.grid-fluid .c2,.grid-fixed .c2,.grid-fluid .c3,.grid-fixed .c3,.grid-fluid .c4,.grid-fixed .c4,.grid-fluid .c5,.grid-fixed .c5,.grid-fluid .c6,.grid-fixed .c6,.grid-fluid .c7,.grid-fixed .c7,.grid-fluid .c8,.grid-fixed .c8,.grid-fluid .c9,.grid-fixed .c9,.grid-fluid .c10,.grid-fixed .c10,.grid-fluid .c11,.grid-fixed .c11,.grid-fluid .c12,.grid-fixed .c12{display:inline;float:left}
+.grid-fluid .c1.grid-right,.grid-fixed .c1.grid-right,.grid-fluid .c2.grid-right,.grid-fixed .c2.grid-right,.grid-fluid .c3.grid-right,.grid-fixed .c3.grid-right,.grid-fluid .c4.grid-right,.grid-fixed .c4.grid-right,.grid-fluid .c5.grid-right,.grid-fixed .c5.grid-right,.grid-fluid .c6.grid-right,.grid-fixed .c6.grid-right,.grid-fluid .c7.grid-right,.grid-fixed .c7.grid-right,.grid-fluid .c8.grid-right,.grid-fixed .c8.grid-right,.grid-fluid .c9.grid-right,.grid-fixed .c9.grid-right,.grid-fluid .c10.grid-right,.grid-fixed .c10.grid-right,.grid-fluid .c11.grid-right,.grid-fixed .c11.grid-right,.grid-fluid .c12.grid-right,.grid-fixed .c12.grid-right{float:right}
+.grid-fluid .c1.nb,.grid-fixed .c1.nb,.grid-fluid .c2.nb,.grid-fixed .c2.nb,.grid-fluid .c3.nb,.grid-fixed .c3.nb,.grid-fluid .c4.nb,.grid-fixed .c4.nb,.grid-fluid .c5.nb,.grid-fixed .c5.nb,.grid-fluid .c6.nb,.grid-fixed .c6.nb,.grid-fluid .c7.nb,.grid-fixed .c7.nb,.grid-fluid .c8.nb,.grid-fixed .c8.nb,.grid-fluid .c9.nb,.grid-fixed .c9.nb,.grid-fluid .c10.nb,.grid-fixed .c10.nb,.grid-fluid .c11.nb,.grid-fixed .c11.nb,.grid-fluid .c12.nb,.grid-fixed .c12.nb{margin-left:0}
+.grid-fluid .c1.na,.grid-fixed .c1.na,.grid-fluid .c2.na,.grid-fixed .c2.na,.grid-fluid .c3.na,.grid-fixed .c3.na,.grid-fluid .c4.na,.grid-fixed .c4.na,.grid-fluid .c5.na,.grid-fixed .c5.na,.grid-fluid .c6.na,.grid-fixed .c6.na,.grid-fluid .c7.na,.grid-fixed .c7.na,.grid-fluid .c8.na,.grid-fixed .c8.na,.grid-fluid .c9.na,.grid-fixed .c9.na,.grid-fluid .c10.na,.grid-fixed .c10.na,.grid-fluid .c11.na,.grid-fixed .c11.na,.grid-fluid .c12.na,.grid-fixed .c12.na{margin-right:0}
+       `;
+
+      const output = parse(styles);
+      const errors = output.errors;
+      expect(errors.length).toEqual(0);
+
+      const ast = output.ast;
+      expect(ast.rules.length).toEqual(8);
+    });
+
+    it('should parse a snippet of keyframe code from animate.css properly', () => {
+      // this code was taken from the angular.io webpage's CSS code
+      const styles = `
+@charset "UTF-8";
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.5.1
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2016 Daniel Eden
+ */
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY,
+.animated.bounceIn,
+.animated.bounceOut {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+@-webkit-keyframes bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -webkit-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0,-4px,0);
+    transform: translate3d(0,-4px,0);
+  }
+}
+       `;
+
+      const output = parse(styles);
+      const errors = output.errors;
+      expect(errors.length).toEqual(0);
+
+      const ast = output.ast;
+      expect(ast.rules.length).toEqual(6);
+
+      const finalRule = <CssBlockRuleAst>ast.rules[ast.rules.length - 1];
+      expect(finalRule.type).toEqual(BlockType.Keyframes);
+      expect(finalRule.block.entries.length).toEqual(4);
+    });
+  });
+}
diff --git a/packages/compiler/test/css_parser/css_visitor_spec.ts b/packages/compiler/test/css_parser/css_visitor_spec.ts
new file mode 100644
index 000000000000..5a36459264e6
--- /dev/null
+++ b/packages/compiler/test/css_parser/css_visitor_spec.ts
@@ -0,0 +1,322 @@
+/**
+ * @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 {beforeEach, describe, expect, it} from '../../../core/testing/src/testing_internal';
+import {CssAst, CssAstVisitor, CssAtRulePredicateAst, CssBlockAst, CssDefinitionAst, CssInlineRuleAst, CssKeyframeDefinitionAst, CssKeyframeRuleAst, CssMediaQueryRuleAst, CssPseudoSelectorAst, CssRuleAst, CssSelectorAst, CssSelectorRuleAst, CssSimpleSelectorAst, CssStyleSheetAst, CssStyleValueAst, CssStylesBlockAst, CssUnknownRuleAst, CssUnknownTokenListAst} from '../../src/css_parser/css_ast';
+import {BlockType, CssParseError, CssParser, CssToken} from '../../src/css_parser/css_parser';
+
+function _assertTokens(tokens: CssToken[], valuesArr: string[]): void {
+  expect(tokens.length).toEqual(valuesArr.length);
+  for (let i = 0; i < tokens.length; i++) {
+    expect(tokens[i].strValue == valuesArr[i]);
+  }
+}
+
+class MyVisitor implements CssAstVisitor {
+  captures: {[key: string]: any[]} = {};
+
+  /**
+   * @internal
+   */
+  _capture(method: string, ast: CssAst, context: any) {
+    this.captures[method] = this.captures[method] || [];
+    this.captures[method].push([ast, context]);
+  }
+
+  constructor(ast: CssStyleSheetAst, context: any) { ast.visit(this, context); }
+
+  visitCssValue(ast: CssStyleValueAst, context: any): void {
+    this._capture('visitCssValue', ast, context);
+  }
+
+  visitCssInlineRule(ast: CssInlineRuleAst, context: any): void {
+    this._capture('visitCssInlineRule', ast, context);
+  }
+
+  visitCssAtRulePredicate(ast: CssAtRulePredicateAst, context: any): void {
+    this._capture('visitCssAtRulePredicate', ast, context);
+  }
+
+  visitCssKeyframeRule(ast: CssKeyframeRuleAst, context: any): void {
+    this._capture('visitCssKeyframeRule', ast, context);
+    ast.block.visit(this, context);
+  }
+
+  visitCssKeyframeDefinition(ast: CssKeyframeDefinitionAst, context: any): void {
+    this._capture('visitCssKeyframeDefinition', ast, context);
+    ast.block.visit(this, context);
+  }
+
+  visitCssMediaQueryRule(ast: CssMediaQueryRuleAst, context: any): void {
+    this._capture('visitCssMediaQueryRule', ast, context);
+    ast.query.visit(this, context);
+    ast.block.visit(this, context);
+  }
+
+  visitCssSelectorRule(ast: CssSelectorRuleAst, context: any): void {
+    this._capture('visitCssSelectorRule', ast, context);
+    ast.selectors.forEach((selAst: CssSelectorAst) => { selAst.visit(this, context); });
+    ast.block.visit(this, context);
+  }
+
+  visitCssSelector(ast: CssSelectorAst, context: any): void {
+    this._capture('visitCssSelector', ast, context);
+    ast.selectorParts.forEach(
+        (simpleAst: CssSimpleSelectorAst) => { simpleAst.visit(this, context); });
+  }
+
+  visitCssSimpleSelector(ast: CssSimpleSelectorAst, context: any): void {
+    this._capture('visitCssSimpleSelector', ast, context);
+    ast.pseudoSelectors.forEach(
+        (pseudoAst: CssPseudoSelectorAst) => { pseudoAst.visit(this, context); });
+  }
+
+  visitCssDefinition(ast: CssDefinitionAst, context: any): void {
+    this._capture('visitCssDefinition', ast, context);
+    ast.value.visit(this, context);
+  }
+
+  visitCssBlock(ast: CssBlockAst, context: any): void {
+    this._capture('visitCssBlock', ast, context);
+    ast.entries.forEach((entryAst: CssAst) => { entryAst.visit(this, context); });
+  }
+
+  visitCssStylesBlock(ast: CssStylesBlockAst, context: any): void {
+    this._capture('visitCssStylesBlock', ast, context);
+    ast.definitions.forEach(
+        (definitionAst: CssDefinitionAst) => { definitionAst.visit(this, context); });
+  }
+
+  visitCssStyleSheet(ast: CssStyleSheetAst, context: any): void {
+    this._capture('visitCssStyleSheet', ast, context);
+    ast.rules.forEach((ruleAst: CssRuleAst) => { ruleAst.visit(this, context); });
+  }
+
+  visitCssUnknownRule(ast: CssUnknownRuleAst, context: any): void {
+    this._capture('visitCssUnknownRule', ast, context);
+  }
+
+  visitCssUnknownTokenList(ast: CssUnknownTokenListAst, context: any): void {
+    this._capture('visitCssUnknownTokenList', ast, context);
+  }
+
+  visitCssPseudoSelector(ast: CssPseudoSelectorAst, context: any): void {
+    this._capture('visitCssPseudoSelector', ast, context);
+  }
+}
+
+function _getCaptureAst(capture: any[], index = 0): CssAst {
+  return <CssAst>capture[index][0];
+}
+
+(function() {
+  function parse(cssCode: string, ignoreErrors: boolean = false) {
+    const output = new CssParser().parse(cssCode, 'some-fake-css-file.css');
+    const errors = output.errors;
+    if (errors.length > 0 && !ignoreErrors) {
+      throw new Error(errors.map((error: CssParseError) => error.msg).join(', '));
+    }
+    return output.ast;
+  }
+
+  describe('CSS parsing and visiting', () => {
+    let ast: CssStyleSheetAst;
+    const context = {};
+
+    beforeEach(() => {
+      const cssCode = `
+        .rule1 { prop1: value1 }
+        .rule2 { prop2: value2 }
+
+        @media all (max-width: 100px) {
+          #id { prop3 :value3; }
+        }
+
+        @import url(file.css);
+
+        @keyframes rotate {
+          from {
+            prop4: value4;
+          }
+          50%, 100% {
+            prop5: value5;
+          }
+        }
+      `;
+      ast = parse(cssCode);
+    });
+
+    it('should parse and visit a stylesheet', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssStyleSheet'];
+
+      expect(captures.length).toEqual(1);
+
+      const capture = captures[0];
+      expect(capture[0]).toEqual(ast);
+      expect(capture[1]).toEqual(context);
+    });
+
+    it('should parse and visit each of the stylesheet selectors', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssSelectorRule'];
+
+      expect(captures.length).toEqual(3);
+
+      const rule1 = <CssSelectorRuleAst>_getCaptureAst(captures, 0);
+      expect(rule1).toEqual(ast.rules[0] as CssSelectorRuleAst);
+
+      const firstSelector = rule1.selectors[0];
+      const firstSimpleSelector = firstSelector.selectorParts[0];
+      _assertTokens(firstSimpleSelector.tokens, ['.', 'rule1']);
+
+      const rule2 = <CssSelectorRuleAst>_getCaptureAst(captures, 1);
+      expect(rule2).toEqual(ast.rules[1] as CssSelectorRuleAst);
+
+      const secondSelector = rule2.selectors[0];
+      const secondSimpleSelector = secondSelector.selectorParts[0];
+      _assertTokens(secondSimpleSelector.tokens, ['.', 'rule2']);
+
+      const rule3 = <CssSelectorRuleAst>_getCaptureAst(captures, 2);
+      expect(rule3).toEqual(
+          (ast.rules[2] as CssSelectorRuleAst).block.entries[0] as CssSelectorRuleAst);
+
+      const thirdSelector = rule3.selectors[0];
+      const thirdSimpleSelector = thirdSelector.selectorParts[0];
+      _assertTokens(thirdSimpleSelector.tokens, ['#', 'rule3']);
+    });
+
+    it('should parse and visit each of the stylesheet style key/value definitions', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssDefinition'];
+
+      expect(captures.length).toEqual(5);
+
+      const def1 = <CssDefinitionAst>_getCaptureAst(captures, 0);
+      expect(def1.property.strValue).toEqual('prop1');
+      expect(def1.value.tokens[0].strValue).toEqual('value1');
+
+      const def2 = <CssDefinitionAst>_getCaptureAst(captures, 1);
+      expect(def2.property.strValue).toEqual('prop2');
+      expect(def2.value.tokens[0].strValue).toEqual('value2');
+
+      const def3 = <CssDefinitionAst>_getCaptureAst(captures, 2);
+      expect(def3.property.strValue).toEqual('prop3');
+      expect(def3.value.tokens[0].strValue).toEqual('value3');
+
+      const def4 = <CssDefinitionAst>_getCaptureAst(captures, 3);
+      expect(def4.property.strValue).toEqual('prop4');
+      expect(def4.value.tokens[0].strValue).toEqual('value4');
+
+      const def5 = <CssDefinitionAst>_getCaptureAst(captures, 4);
+      expect(def5.property.strValue).toEqual('prop5');
+      expect(def5.value.tokens[0].strValue).toEqual('value5');
+    });
+
+    it('should parse and visit the associated media query values', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssMediaQueryRule'];
+
+      expect(captures.length).toEqual(1);
+
+      const query1 = <CssMediaQueryRuleAst>_getCaptureAst(captures, 0);
+      _assertTokens(query1.query.tokens, ['all', 'and', '(', 'max-width', '100', 'px', ')']);
+      expect(query1.block.entries.length).toEqual(1);
+    });
+
+    it('should capture the media query predicate', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssAtRulePredicate'];
+
+      expect(captures.length).toEqual(1);
+
+      const predicate = <CssAtRulePredicateAst>_getCaptureAst(captures, 0);
+      expect(predicate.strValue).toEqual('@media all (max-width: 100px)');
+    });
+
+    it('should parse and visit the associated "@inline" rule values', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssInlineRule'];
+
+      expect(captures.length).toEqual(1);
+
+      const inline1 = <CssInlineRuleAst>_getCaptureAst(captures, 0);
+      expect(inline1.type).toEqual(BlockType.Import);
+      _assertTokens(inline1.value.tokens, ['url', '(', 'file.css', ')']);
+    });
+
+    it('should parse and visit the keyframe blocks', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssKeyframeRule'];
+
+      expect(captures.length).toEqual(1);
+
+      const keyframe1 = <CssKeyframeRuleAst>_getCaptureAst(captures, 0);
+      expect(keyframe1.name !.strValue).toEqual('rotate');
+      expect(keyframe1.block.entries.length).toEqual(2);
+    });
+
+    it('should parse and visit the associated keyframe rules', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssKeyframeDefinition'];
+
+      expect(captures.length).toEqual(2);
+
+      const def1 = <CssKeyframeDefinitionAst>_getCaptureAst(captures, 0);
+      _assertTokens(def1.steps, ['from']);
+      expect(def1.block.entries.length).toEqual(1);
+
+      const def2 = <CssKeyframeDefinitionAst>_getCaptureAst(captures, 1);
+      _assertTokens(def2.steps, ['50%', '100%']);
+      expect(def2.block.entries.length).toEqual(1);
+    });
+
+    it('should visit an unknown `@` rule', () => {
+      const cssCode = `
+        @someUnknownRule param {
+          one two three
+        }
+      `;
+      ast = parse(cssCode, true);
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssUnknownRule'];
+
+      expect(captures.length).toEqual(1);
+
+      const rule = <CssUnknownRuleAst>_getCaptureAst(captures, 0);
+      expect(rule.ruleName).toEqual('@someUnknownRule');
+
+      _assertTokens(rule.tokens, ['param', '{', 'one', 'two', 'three', '}']);
+    });
+
+    it('should collect an invalid list of tokens before a valid selector', () => {
+      const cssCode = 'one two three four five; selector { }';
+      ast = parse(cssCode, true);
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssUnknownTokenList'];
+
+      expect(captures.length).toEqual(1);
+
+      const rule = <CssUnknownTokenListAst>_getCaptureAst(captures, 0);
+      _assertTokens(rule.tokens, ['one', 'two', 'three', 'four', 'five']);
+    });
+
+    it('should collect an invalid list of tokens after a valid selector', () => {
+      const cssCode = 'selector { } six seven eight';
+      ast = parse(cssCode, true);
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssUnknownTokenList'];
+
+      expect(captures.length).toEqual(1);
+
+      const rule = <CssUnknownTokenListAst>_getCaptureAst(captures, 0);
+      _assertTokens(rule.tokens, ['six', 'seven', 'eight']);
+    });
+  });
+})();
diff --git a/packages/compiler/test/directive_lifecycle_spec.ts b/packages/compiler/test/directive_lifecycle_spec.ts
new file mode 100644
index 000000000000..a4bd85928f4b
--- /dev/null
+++ b/packages/compiler/test/directive_lifecycle_spec.ts
@@ -0,0 +1,136 @@
+/**
+ * @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 {LifecycleHooks as Hooks, hasLifecycleHook as hasLifecycleHookImpl} from '@angular/compiler/src/lifecycle_reflector';
+import {SimpleChanges} from '@angular/core';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+function hasLifecycleHook(hook: Hooks, directive: any): boolean {
+  return hasLifecycleHookImpl(new JitReflector(), hook, directive);
+}
+
+{
+  describe('Create Directive', () => {
+    describe('lifecycle', () => {
+
+      describe('ngOnChanges', () => {
+        it('should be true when the directive has the ngOnChanges method', () => {
+          expect(hasLifecycleHook(Hooks.OnChanges, DirectiveWithOnChangesMethod)).toBe(true);
+        });
+
+        it('should be false otherwise',
+           () => { expect(hasLifecycleHook(Hooks.OnChanges, DirectiveNoHooks)).toBe(false); });
+      });
+
+      describe('ngOnDestroy', () => {
+        it('should be true when the directive has the ngOnDestroy method', () => {
+          expect(hasLifecycleHook(Hooks.OnDestroy, DirectiveWithOnDestroyMethod)).toBe(true);
+        });
+
+        it('should be false otherwise',
+           () => { expect(hasLifecycleHook(Hooks.OnDestroy, DirectiveNoHooks)).toBe(false); });
+      });
+
+      describe('ngOnInit', () => {
+        it('should be true when the directive has the ngOnInit method',
+           () => { expect(hasLifecycleHook(Hooks.OnInit, DirectiveWithOnInitMethod)).toBe(true); });
+
+        it('should be false otherwise',
+           () => { expect(hasLifecycleHook(Hooks.OnInit, DirectiveNoHooks)).toBe(false); });
+      });
+
+      describe('ngDoCheck', () => {
+        it('should be true when the directive has the ngDoCheck method', () => {
+          expect(hasLifecycleHook(Hooks.DoCheck, DirectiveWithOnCheckMethod)).toBe(true);
+        });
+
+        it('should be false otherwise',
+           () => { expect(hasLifecycleHook(Hooks.DoCheck, DirectiveNoHooks)).toBe(false); });
+      });
+
+      describe('ngAfterContentInit', () => {
+        it('should be true when the directive has the ngAfterContentInit method', () => {
+          expect(hasLifecycleHook(Hooks.AfterContentInit, DirectiveWithAfterContentInitMethod))
+              .toBe(true);
+        });
+
+        it('should be false otherwise', () => {
+          expect(hasLifecycleHook(Hooks.AfterContentInit, DirectiveNoHooks)).toBe(false);
+        });
+      });
+
+      describe('ngAfterContentChecked', () => {
+        it('should be true when the directive has the ngAfterContentChecked method', () => {
+          expect(
+              hasLifecycleHook(Hooks.AfterContentChecked, DirectiveWithAfterContentCheckedMethod))
+              .toBe(true);
+        });
+
+        it('should be false otherwise', () => {
+          expect(hasLifecycleHook(Hooks.AfterContentChecked, DirectiveNoHooks)).toBe(false);
+        });
+      });
+
+
+      describe('ngAfterViewInit', () => {
+        it('should be true when the directive has the ngAfterViewInit method', () => {
+          expect(hasLifecycleHook(Hooks.AfterViewInit, DirectiveWithAfterViewInitMethod))
+              .toBe(true);
+        });
+
+        it('should be false otherwise',
+           () => { expect(hasLifecycleHook(Hooks.AfterViewInit, DirectiveNoHooks)).toBe(false); });
+      });
+
+      describe('ngAfterViewChecked', () => {
+        it('should be true when the directive has the ngAfterViewChecked method', () => {
+          expect(hasLifecycleHook(Hooks.AfterViewChecked, DirectiveWithAfterViewCheckedMethod))
+              .toBe(true);
+        });
+
+        it('should be false otherwise', () => {
+          expect(hasLifecycleHook(Hooks.AfterViewChecked, DirectiveNoHooks)).toBe(false);
+        });
+      });
+    });
+  });
+}
+
+class DirectiveNoHooks {}
+
+class DirectiveWithOnChangesMethod {
+  ngOnChanges(_: SimpleChanges) {}
+}
+
+class DirectiveWithOnInitMethod {
+  ngOnInit() {}
+}
+
+class DirectiveWithOnCheckMethod {
+  ngDoCheck() {}
+}
+
+class DirectiveWithOnDestroyMethod {
+  ngOnDestroy() {}
+}
+
+class DirectiveWithAfterContentInitMethod {
+  ngAfterContentInit() {}
+}
+
+class DirectiveWithAfterContentCheckedMethod {
+  ngAfterContentChecked() {}
+}
+
+class DirectiveWithAfterViewInitMethod {
+  ngAfterViewInit() {}
+}
+
+class DirectiveWithAfterViewCheckedMethod {
+  ngAfterViewChecked() {}
+}
diff --git a/packages/compiler/test/directive_normalizer_spec.ts b/packages/compiler/test/directive_normalizer_spec.ts
new file mode 100644
index 000000000000..34bd29d809fc
--- /dev/null
+++ b/packages/compiler/test/directive_normalizer_spec.ts
@@ -0,0 +1,405 @@
+/**
+ * @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 {CompileStylesheetMetadata, CompileTemplateMetadata} from '@angular/compiler/src/compile_metadata';
+import {CompilerConfig, preserveWhitespacesDefault} from '@angular/compiler/src/config';
+import {DirectiveNormalizer} from '@angular/compiler/src/directive_normalizer';
+import {ResourceLoader} from '@angular/compiler/src/resource_loader';
+import {ViewEncapsulation} from '@angular/core/src/metadata/view';
+import {TestBed, inject} from '@angular/core/testing';
+
+import {noUndefined} from '../src/util';
+
+import {TEST_COMPILER_PROVIDERS} from './test_bindings';
+
+const SOME_MODULE_URL = 'package:some/module/a.js';
+const SOME_HTTP_MODULE_URL = 'http://some/module/a.js';
+
+function normalizeTemplate(normalizer: DirectiveNormalizer, o: {
+  moduleUrl?: string; template?: string | null; templateUrl?: string | null; styles?: string[];
+  styleUrls?: string[];
+  interpolation?: [string, string] | null;
+  encapsulation?: ViewEncapsulation | null;
+  animations?: any[];
+  preserveWhitespaces?: boolean | null;
+}) {
+  return normalizer.normalizeTemplate({
+    ngModuleType: null,
+    componentType: SomeComp,
+    moduleUrl: noUndefined(o.moduleUrl || SOME_MODULE_URL),
+    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),
+    preserveWhitespaces: noUndefined(o.preserveWhitespaces),
+  });
+}
+
+{
+  describe('DirectiveNormalizer', () => {
+    let resourceLoaderSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      resourceLoaderSpy =
+          jasmine.createSpy('get').and.callFake((url: string) => `resource(${url})`);
+      const resourceLoader = {get: resourceLoaderSpy};
+      TestBed.configureCompiler({
+        providers:
+            [...TEST_COMPILER_PROVIDERS, {provide: ResourceLoader, useValue: resourceLoader}]
+      });
+    });
+
+    describe('normalizeTemplate', () => {
+      it('should throw if no template was specified',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           expect(() => normalizeTemplate(normalizer, {}))
+               .toThrowError('No template specified for component SomeComp');
+         }));
+      it('should throw if template is not a string',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           expect(() => normalizeTemplate(normalizer, {template: <any>{}}))
+               .toThrowError('The template specified for component SomeComp is not a string');
+         }));
+      it('should throw if templateUrl is not a string',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           expect(() => normalizeTemplate(normalizer, {templateUrl: <any>{}}))
+               .toThrowError('The templateUrl specified for component SomeComp is not a string');
+         }));
+      it('should throw if both template and templateUrl are defined',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           expect(() => normalizeTemplate(normalizer, {
+                    template: '',
+                    templateUrl: '',
+                  }))
+               .toThrowError(`'SomeComp' component cannot define both template and templateUrl`);
+         }));
+      it('should throw if preserveWhitespaces is not a boolean',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           expect(() => normalizeTemplate(normalizer, {
+                    template: '',
+                    preserveWhitespaces: <any>'WRONG',
+                  }))
+               .toThrowError(
+                   'The preserveWhitespaces option for component SomeComp must be a boolean');
+         }));
+
+    });
+
+    describe('inline template', () => {
+
+      it('should store the template',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: 'a',
+           });
+           expect(template.template).toEqual('a');
+           expect(template.templateUrl).toEqual('package:some/module/a.js');
+           expect(template.isInline).toBe(true);
+         }));
+
+      it('should resolve styles on the annotation against the moduleUrl',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(
+               normalizer, {template: '', styleUrls: ['test.css']});
+           expect(template.styleUrls).toEqual(['package:some/module/test.css']);
+         }));
+
+      it('should resolve styles in the template against the moduleUrl and add them to the styles',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '<style>template @import test.css</style>',
+             styles: ['direct'],
+           });
+           expect(template.styles).toEqual([
+             'direct', 'template ', 'resource(package:some/module/test.css)'
+           ]);
+         }));
+
+      it('should use ViewEncapsulation.Emulated by default',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(
+               normalizer, {template: '', styleUrls: ['test.css']});
+           expect(template.encapsulation).toEqual(ViewEncapsulation.Emulated);
+         }));
+
+      it('should use default encapsulation provided by CompilerConfig',
+         inject(
+             [CompilerConfig, DirectiveNormalizer],
+             (config: CompilerConfig, normalizer: DirectiveNormalizer) => {
+               config.defaultEncapsulation = ViewEncapsulation.None;
+               const template = <CompileTemplateMetadata>normalizeTemplate(
+                   normalizer, {template: '', styleUrls: ['test.css']});
+               expect(template.encapsulation).toEqual(ViewEncapsulation.None);
+             }));
+    });
+
+    it('should load a template from a url that is resolved against moduleUrl',
+       inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+         const template = <CompileTemplateMetadata>normalizeTemplate(
+             normalizer, {templateUrl: 'sometplurl.html', styleUrls: ['test.css']});
+         expect(template.template).toEqual('resource(package:some/module/sometplurl.html)');
+         expect(template.templateUrl).toEqual('package:some/module/sometplurl.html');
+         expect(template.isInline).toBe(false);
+       }));
+
+    it('should resolve styles on the annotation against the moduleUrl',
+       inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+         const template = <CompileTemplateMetadata>normalizeTemplate(
+             normalizer, {templateUrl: 'tpl/sometplurl.html', styleUrls: ['test.css']});
+         expect(template.styleUrls).toEqual(['package:some/module/test.css']);
+       }));
+
+    it('should resolve styles in the template against the templateUrl and add them to the styles',
+       inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+         resourceLoaderSpy.and.callFake((url: string) => {
+           switch (url) {
+             case 'package:some/module/tpl/sometplurl.html':
+               return '<style>template @import test.css</style>';
+             default:
+               return `resource(${url})`;
+           }
+         });
+         const template = <CompileTemplateMetadata>normalizeTemplate(
+             normalizer, {templateUrl: 'tpl/sometplurl.html', styles: ['direct']});
+         expect(template.styles).toEqual([
+           'direct', 'template ', 'resource(package:some/module/tpl/test.css)'
+         ]);
+       }));
+
+    describe('externalStylesheets', () => {
+
+      it('should load an external stylesheet',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(
+               normalizer, {template: '', styleUrls: ['package:some/module/test.css']});
+           expect(template.externalStylesheets.length).toBe(1);
+           expect(template.externalStylesheets[0]).toEqual(new CompileStylesheetMetadata({
+             moduleUrl: 'package:some/module/test.css',
+             styles: ['resource(package:some/module/test.css)'],
+           }));
+         }));
+
+      it('should load stylesheets referenced by external stylesheets and inline them',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           resourceLoaderSpy.and.callFake((url: string) => {
+             switch (url) {
+               case 'package:some/module/test.css':
+                 return 'a@import "test2.css"';
+               case 'package:some/module/test2.css':
+                 return 'b';
+               default:
+                 throw new Error(`Unexpected url ${url}`);
+             }
+           });
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '',
+             styleUrls: ['package:some/module/test.css'],
+           });
+           expect(template.externalStylesheets.length).toBe(1);
+           expect(template.externalStylesheets[0])
+               .toEqual(new CompileStylesheetMetadata(
+                   {moduleUrl: 'package:some/module/test.css', styles: ['a', 'b'], styleUrls: []}));
+         }));
+    });
+
+    describe('caching', () => {
+      it('should work for templateUrl',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const prenormMeta = {
+             templateUrl: 'cmp.html',
+           };
+           const template1 = <CompileTemplateMetadata>normalizeTemplate(normalizer, prenormMeta);
+           const template2 = <CompileTemplateMetadata>normalizeTemplate(normalizer, prenormMeta);
+           expect(template1.template).toEqual('resource(package:some/module/cmp.html)');
+           expect(template2.template).toEqual('resource(package:some/module/cmp.html)');
+
+           expect(resourceLoaderSpy).toHaveBeenCalledTimes(1);
+         }));
+
+    });
+
+    describe('normalizeLoadedTemplate', () => {
+      it('should store the viewEncapsulation in the result',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const viewEncapsulation = ViewEncapsulation.Native;
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             encapsulation: viewEncapsulation,
+             template: '',
+           });
+           expect(template.encapsulation).toBe(viewEncapsulation);
+         }));
+
+      it('should use preserveWhitespaces setting from compiler config if none provided',
+         inject(
+             [DirectiveNormalizer, CompilerConfig],
+             (normalizer: DirectiveNormalizer, config: CompilerConfig) => {
+               const template =
+                   <CompileTemplateMetadata>normalizeTemplate(normalizer, {template: ''});
+               expect(template.preserveWhitespaces).toBe(config.preserveWhitespaces);
+             }));
+
+      it('should store the preserveWhitespaces=false in the result',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(
+               normalizer, {preserveWhitespaces: false, template: ''});
+           expect(template.preserveWhitespaces).toBe(false);
+         }));
+
+      it('should store the preserveWhitespaces=true in the result',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(
+               normalizer, {preserveWhitespaces: true, template: ''});
+           expect(template.preserveWhitespaces).toBe(true);
+         }));
+
+      it('should keep the template as html',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: 'a',
+           });
+           expect(template.template).toEqual('a');
+         }));
+
+      it('should collect ngContent',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '<ng-content select="a"></ng-content>',
+           });
+           expect(template.ngContentSelectors).toEqual(['a']);
+         }));
+
+      it('should normalize ngContent wildcard selector',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template:
+                 '<ng-content></ng-content><ng-content select></ng-content><ng-content select="*"></ng-content>',
+           });
+           expect(template.ngContentSelectors).toEqual(['*', '*', '*']);
+         }));
+
+      it('should collect top level styles in the template',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '<style>a</style>',
+           });
+           expect(template.styles).toEqual(['a']);
+         }));
+
+      it('should collect styles inside elements',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '<div><style>a</style></div>',
+           });
+           expect(template.styles).toEqual(['a']);
+         }));
+
+      it('should collect styleUrls in the template and add them to the styles',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '<link rel="stylesheet" href="aUrl">',
+           });
+           expect(template.styles).toEqual(['resource(package:some/module/aUrl)']);
+           expect(template.styleUrls).toEqual([]);
+         }));
+
+      it('should collect styleUrls in elements and add them to the styles',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '<div><link rel="stylesheet" href="aUrl"></div>',
+           });
+           expect(template.styles).toEqual(['resource(package:some/module/aUrl)']);
+           expect(template.styleUrls).toEqual([]);
+         }));
+
+      it('should ignore link elements with non stylesheet rel attribute',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '<link href="b" rel="a">',
+           });
+           expect(template.styleUrls).toEqual([]);
+         }));
+
+      it('should ignore link elements with absolute urls but non package: scheme',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '<link href="http://some/external.css" rel="stylesheet">',
+           });
+           expect(template.styleUrls).toEqual([]);
+         }));
+
+      it('should extract @import style urls and add them to the styles',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             styles: ['@import "test.css";'],
+             template: '',
+           });
+           expect(template.styles).toEqual(['', 'resource(package:some/module/test.css)']);
+           expect(template.styleUrls).toEqual([]);
+         }));
+
+      it('should not resolve relative urls in inline styles',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             styles: ['.foo{background-image: url(\'double.jpg\');'],
+             template: '',
+           });
+           expect(template.styles).toEqual(['.foo{background-image: url(\'double.jpg\');']);
+         }));
+
+      it('should resolve relative style urls in styleUrls',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             styleUrls: ['test.css'],
+             template: '',
+           });
+           expect(template.styles).toEqual([]);
+           expect(template.styleUrls).toEqual(['package:some/module/test.css']);
+         }));
+
+      it('should resolve relative style urls in styleUrls with http directive url',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             moduleUrl: SOME_HTTP_MODULE_URL,
+             styleUrls: ['test.css'],
+             template: '',
+           });
+           expect(template.styles).toEqual([]);
+           expect(template.styleUrls).toEqual(['http://some/module/test.css']);
+         }));
+
+      it('should normalize ViewEncapsulation.Emulated to ViewEncapsulation.None if there are no styles nor stylesheets',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             encapsulation: ViewEncapsulation.Emulated,
+             template: '',
+           });
+           expect(template.encapsulation).toEqual(ViewEncapsulation.None);
+         }));
+
+      it('should ignore ng-content in elements with ngNonBindable',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '<div ngNonBindable><ng-content select="a"></ng-content></div>',
+           });
+           expect(template.ngContentSelectors).toEqual([]);
+         }));
+
+      it('should still collect <style> in elements with ngNonBindable',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template = <CompileTemplateMetadata>normalizeTemplate(normalizer, {
+             template: '<div ngNonBindable><style>div {color:red}</style></div>',
+           });
+           expect(template.styles).toEqual(['div {color:red}']);
+         }));
+    });
+  });
+}
+
+class SomeComp {}
diff --git a/packages/compiler/test/directive_resolver_mock_spec.ts b/packages/compiler/test/directive_resolver_mock_spec.ts
new file mode 100644
index 000000000000..dc1a82cff98c
--- /dev/null
+++ b/packages/compiler/test/directive_resolver_mock_spec.ts
@@ -0,0 +1,54 @@
+/**
+ * @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, Injector} from '@angular/core';
+import {TestBed, inject} from '@angular/core/testing';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+import {MockDirectiveResolver} from '../testing';
+
+{
+  describe('MockDirectiveResolver', () => {
+    let dirResolver: MockDirectiveResolver;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+          {declarations: [SomeDirective, SomeOtherDirective, SomeComponent]});
+    });
+
+    beforeEach(inject([Injector], (injector: Injector) => {
+      dirResolver = new MockDirectiveResolver(new JitReflector());
+    }));
+
+    describe('Directive overriding', () => {
+      it('should fallback to the default DirectiveResolver when templates are not overridden',
+         () => {
+           const ngModule = dirResolver.resolve(SomeComponent);
+           expect(ngModule.selector).toEqual('cmp');
+         });
+
+      it('should allow overriding the @Directive', () => {
+        dirResolver.setDirective(SomeComponent, new Component({selector: 'someOtherSelector'}));
+        const metadata = dirResolver.resolve(SomeComponent);
+        expect(metadata.selector).toEqual('someOtherSelector');
+      });
+    });
+  });
+}
+
+@Directive({selector: 'some-directive'})
+class SomeDirective {
+}
+
+@Component({selector: 'cmp', template: 'template'})
+class SomeComponent {
+}
+
+@Directive({selector: 'some-other-directive'})
+class SomeOtherDirective {
+}
diff --git a/packages/compiler/test/directive_resolver_spec.ts b/packages/compiler/test/directive_resolver_spec.ts
new file mode 100644
index 000000000000..4d211643f97d
--- /dev/null
+++ b/packages/compiler/test/directive_resolver_spec.ts
@@ -0,0 +1,455 @@
+/**
+ * @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 {core} 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 {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+@Directive({selector: 'someDirective'})
+class SomeDirective {
+}
+
+@Directive({selector: 'someDirective', inputs: ['c']})
+class SomeDirectiveWithInputs {
+  @Input() a: any;
+  @Input('renamed') b: any;
+  c: any;
+}
+
+@Directive({selector: 'someDirective', outputs: ['c']})
+class SomeDirectiveWithOutputs {
+  @Output() a: any;
+  @Output('renamed') b: any;
+  c: any;
+}
+
+@Directive({selector: 'someDirective'})
+class SomeDirectiveWithSetterProps {
+  @Input('renamed')
+  set a(value: any) {}
+}
+
+@Directive({selector: 'someDirective'})
+class SomeDirectiveWithGetterOutputs {
+  @Output('renamed')
+  get a(): any { return null; }
+}
+
+@Directive({selector: 'someDirective', host: {'[c]': 'c'}})
+class SomeDirectiveWithHostBindings {
+  @HostBinding() a: any;
+  @HostBinding('renamed') b: any;
+  c: any;
+}
+
+@Directive({selector: 'someDirective', host: {'(c)': 'onC()'}})
+class SomeDirectiveWithHostListeners {
+  @HostListener('a')
+  onA() {}
+  @HostListener('b', ['$event.value'])
+  onB(value: any) {}
+}
+
+@Directive({selector: 'someDirective', queries: {'cs': new ContentChildren('c')}})
+class SomeDirectiveWithContentChildren {
+  @ContentChildren('a') as: any;
+  c: any;
+}
+
+@Directive({selector: 'someDirective', queries: {'cs': new ViewChildren('c')}})
+class SomeDirectiveWithViewChildren {
+  @ViewChildren('a') as: any;
+  c: any;
+}
+
+@Directive({selector: 'someDirective', queries: {'c': new ContentChild('c')}})
+class SomeDirectiveWithContentChild {
+  @ContentChild('a') a: any;
+  c: any;
+}
+
+@Directive({selector: 'someDirective', queries: {'c': new ViewChild('c')}})
+class SomeDirectiveWithViewChild {
+  @ViewChild('a') a: any;
+  c: any;
+}
+
+@Component({
+  selector: 'sample',
+  template: 'some template',
+  styles: ['some styles'],
+  preserveWhitespaces: true
+})
+class ComponentWithTemplate {
+}
+
+@Directive({
+  selector: 'someDirective',
+  host: {'[decorator]': 'decorator'},
+  inputs: ['decorator'],
+})
+class SomeDirectiveWithSameHostBindingAndInput {
+  @Input() @HostBinding() prop: any;
+}
+
+@Directive({selector: 'someDirective'})
+class SomeDirectiveWithMalformedHostBinding1 {
+  @HostBinding('(a)')
+  onA() {}
+}
+
+@Directive({selector: 'someDirective'})
+class SomeDirectiveWithMalformedHostBinding2 {
+  @HostBinding('[a]')
+  onA() {}
+}
+
+class SomeDirectiveWithoutMetadata {}
+
+{
+  describe('DirectiveResolver', () => {
+    let resolver: DirectiveResolver;
+
+    beforeEach(() => { resolver = new DirectiveResolver(new JitReflector()); });
+
+    it('should read out the Directive metadata', () => {
+      const directiveMetadata = resolver.resolve(SomeDirective);
+      expect(directiveMetadata).toEqual(core.createDirective({
+        selector: 'someDirective',
+        inputs: [],
+        outputs: [],
+        host: {},
+        queries: {},
+        guards: {},
+        exportAs: undefined,
+        providers: undefined
+      }));
+    });
+
+    it('should throw if not matching metadata is found', () => {
+      expect(() => {
+        resolver.resolve(SomeDirectiveWithoutMetadata);
+      }).toThrowError('No Directive annotation found on SomeDirectiveWithoutMetadata');
+    });
+
+    it('should support inheriting the Directive metadata', function() {
+      @Directive({selector: 'p'})
+      class Parent {
+      }
+
+      class ChildNoDecorator extends Parent {}
+
+      @Directive({selector: 'c'})
+      class ChildWithDecorator extends Parent {
+      }
+
+      expect(resolver.resolve(ChildNoDecorator)).toEqual(core.createDirective({
+        selector: 'p',
+        inputs: [],
+        outputs: [],
+        host: {},
+        queries: {},
+        guards: {},
+        exportAs: undefined,
+        providers: undefined
+      }));
+
+      expect(resolver.resolve(ChildWithDecorator)).toEqual(core.createDirective({
+        selector: 'c',
+        inputs: [],
+        outputs: [],
+        host: {},
+        queries: {},
+        guards: {},
+        exportAs: undefined,
+        providers: undefined
+      }));
+    });
+
+    describe('inputs', () => {
+      it('should append directive inputs', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithInputs);
+        expect(directiveMetadata.inputs).toEqual(['c', 'a', 'b: renamed']);
+      });
+
+      it('should work with getters and setters', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithSetterProps);
+        expect(directiveMetadata.inputs).toEqual(['a: renamed']);
+      });
+
+      it('should remove duplicate inputs', () => {
+        @Directive({selector: 'someDirective', inputs: ['a', 'a']})
+        class SomeDirectiveWithDuplicateInputs {
+        }
+
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithDuplicateInputs);
+        expect(directiveMetadata.inputs).toEqual(['a']);
+      });
+
+      it('should use the last input if duplicate inputs (with rename)', () => {
+        @Directive({selector: 'someDirective', inputs: ['a', 'localA: a']})
+        class SomeDirectiveWithDuplicateInputs {
+        }
+
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithDuplicateInputs);
+        expect(directiveMetadata.inputs).toEqual(['localA: a']);
+      });
+
+      it('should prefer @Input over @Directive.inputs', () => {
+        @Directive({selector: 'someDirective', inputs: ['a']})
+        class SomeDirectiveWithDuplicateInputs {
+          @Input('a')
+          propA: any;
+        }
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithDuplicateInputs);
+        expect(directiveMetadata.inputs).toEqual(['propA: a']);
+      });
+
+      it('should support inheriting inputs', () => {
+        @Directive({selector: 'p'})
+        class Parent {
+          @Input()
+          p1: any;
+          @Input('p21')
+          p2: any;
+        }
+
+        class Child extends Parent {
+          @Input('p22')
+          p2: any;
+          @Input()
+          p3: any;
+        }
+
+        const directiveMetadata = resolver.resolve(Child);
+        expect(directiveMetadata.inputs).toEqual(['p1', 'p2: p22', 'p3']);
+      });
+    });
+
+    describe('outputs', () => {
+      it('should append directive outputs', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithOutputs);
+        expect(directiveMetadata.outputs).toEqual(['c', 'a', 'b: renamed']);
+      });
+
+      it('should work with getters and setters', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithGetterOutputs);
+        expect(directiveMetadata.outputs).toEqual(['a: renamed']);
+      });
+
+      it('should remove duplicate outputs', () => {
+        @Directive({selector: 'someDirective', outputs: ['a', 'a']})
+        class SomeDirectiveWithDuplicateOutputs {
+        }
+
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithDuplicateOutputs);
+        expect(directiveMetadata.outputs).toEqual(['a']);
+      });
+
+      it('should use the last output if duplicate outputs (with rename)', () => {
+        @Directive({selector: 'someDirective', outputs: ['a', 'localA: a']})
+        class SomeDirectiveWithDuplicateOutputs {
+        }
+
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithDuplicateOutputs);
+        expect(directiveMetadata.outputs).toEqual(['localA: a']);
+      });
+
+      it('should prefer @Output over @Directive.outputs', () => {
+        @Directive({selector: 'someDirective', outputs: ['a']})
+        class SomeDirectiveWithDuplicateOutputs {
+          @Output('a')
+          propA: any;
+        }
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithDuplicateOutputs);
+        expect(directiveMetadata.outputs).toEqual(['propA: a']);
+      });
+
+      it('should support inheriting outputs', () => {
+        @Directive({selector: 'p'})
+        class Parent {
+          @Output()
+          p1: any;
+          @Output('p21')
+          p2: any;
+        }
+
+        class Child extends Parent {
+          @Output('p22')
+          p2: any;
+          @Output()
+          p3: any;
+        }
+
+        const directiveMetadata = resolver.resolve(Child);
+        expect(directiveMetadata.outputs).toEqual(['p1', 'p2: p22', 'p3']);
+      });
+    });
+
+    describe('host', () => {
+      it('should append host bindings', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithHostBindings);
+        expect(directiveMetadata.host).toEqual({'[c]': 'c', '[a]': 'a', '[renamed]': 'b'});
+      });
+
+      it('should append host binding and input on the same property', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithSameHostBindingAndInput);
+        expect(directiveMetadata.host).toEqual({'[decorator]': 'decorator', '[prop]': 'prop'});
+        expect(directiveMetadata.inputs).toEqual(['decorator', 'prop']);
+      });
+
+      it('should append host listeners', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithHostListeners);
+        expect(directiveMetadata.host)
+            .toEqual({'(c)': 'onC()', '(a)': 'onA()', '(b)': 'onB($event.value)'});
+      });
+
+      it('should throw when @HostBinding name starts with "("', () => {
+        expect(() => resolver.resolve(SomeDirectiveWithMalformedHostBinding1))
+            .toThrowError('@HostBinding can not bind to events. Use @HostListener instead.');
+      });
+
+      it('should throw when @HostBinding name starts with "["', () => {
+        expect(() => resolver.resolve(SomeDirectiveWithMalformedHostBinding2))
+            .toThrowError(
+                `@HostBinding parameter should be a property name, 'class.<name>', or 'attr.<name>'.`);
+      });
+
+      it('should support inheriting host bindings', () => {
+        @Directive({selector: 'p'})
+        class Parent {
+          @HostBinding()
+          p1: any;
+          @HostBinding('p21')
+          p2: any;
+        }
+
+        class Child extends Parent {
+          @HostBinding('p22')
+          p2: any;
+          @HostBinding()
+          p3: any;
+        }
+
+        const directiveMetadata = resolver.resolve(Child);
+        expect(directiveMetadata.host)
+            .toEqual({'[p1]': 'p1', '[p21]': 'p2', '[p22]': 'p2', '[p3]': 'p3'});
+      });
+
+      it('should support inheriting host listeners', () => {
+        @Directive({selector: 'p'})
+        class Parent {
+          @HostListener('p1')
+          p1() {}
+          @HostListener('p21')
+          p2() {}
+        }
+
+        class Child extends Parent {
+          @HostListener('p22')
+          p2() {}
+          @HostListener('p3')
+          p3() {}
+        }
+
+        const directiveMetadata = resolver.resolve(Child);
+        expect(directiveMetadata.host)
+            .toEqual({'(p1)': 'p1()', '(p21)': 'p2()', '(p22)': 'p2()', '(p3)': 'p3()'});
+      });
+
+      it('should combine host bindings and listeners during inheritance', () => {
+        @Directive({selector: 'p'})
+        class Parent {
+          @HostListener('p11') @HostListener('p12')
+          p1() {}
+
+          @HostBinding('p21') @HostBinding('p22')
+          p2: any;
+        }
+
+        class Child extends Parent {
+          @HostListener('c1')
+          p1() {}
+
+          @HostBinding('c2')
+          p2: any;
+        }
+
+        const directiveMetadata = resolver.resolve(Child);
+        expect(directiveMetadata.host).toEqual({
+          '(p11)': 'p1()',
+          '(p12)': 'p1()',
+          '(c1)': 'p1()',
+          '[p21]': 'p2',
+          '[p22]': 'p2',
+          '[c2]': 'p2'
+        });
+      });
+    });
+
+    describe('queries', () => {
+      it('should append ContentChildren', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithContentChildren);
+        expect(directiveMetadata.queries)
+            .toEqual({'cs': new ContentChildren('c'), 'as': new ContentChildren('a')});
+      });
+
+      it('should append ViewChildren', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithViewChildren);
+        expect(directiveMetadata.queries)
+            .toEqual({'cs': new ViewChildren('c'), 'as': new ViewChildren('a')});
+      });
+
+      it('should append ContentChild', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithContentChild);
+        expect(directiveMetadata.queries)
+            .toEqual({'c': new ContentChild('c'), 'a': new ContentChild('a')});
+      });
+
+      it('should append ViewChild', () => {
+        const directiveMetadata = resolver.resolve(SomeDirectiveWithViewChild);
+        expect(directiveMetadata.queries)
+            .toEqual({'c': new ViewChild('c'), 'a': new ViewChild('a')});
+      });
+
+      it('should support inheriting queries', () => {
+        @Directive({selector: 'p'})
+        class Parent {
+          @ContentChild('p1')
+          p1: any;
+          @ContentChild('p21')
+          p2: any;
+        }
+
+        class Child extends Parent {
+          @ContentChild('p22')
+          p2: any;
+          @ContentChild('p3')
+          p3: any;
+        }
+
+        const directiveMetadata = resolver.resolve(Child);
+        expect(directiveMetadata.queries).toEqual({
+          'p1': new ContentChild('p1'),
+          'p2': new ContentChild('p22'),
+          'p3': new ContentChild('p3')
+        });
+      });
+    });
+
+    describe('Component', () => {
+      it('should read out the template related metadata from the Component metadata', () => {
+        const compMetadata: Component = resolver.resolve(ComponentWithTemplate);
+        expect(compMetadata.template).toEqual('some template');
+        expect(compMetadata.styles).toEqual(['some styles']);
+        expect(compMetadata.preserveWhitespaces).toBe(true);
+      });
+    });
+  });
+}
diff --git a/packages/compiler/test/expression_parser/lexer_spec.ts b/packages/compiler/test/expression_parser/lexer_spec.ts
new file mode 100644
index 000000000000..2072748e1da9
--- /dev/null
+++ b/packages/compiler/test/expression_parser/lexer_spec.ts
@@ -0,0 +1,248 @@
+/**
+ * @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 {Lexer, Token} from '@angular/compiler/src/expression_parser/lexer';
+
+function lex(text: string): any[] {
+  return new Lexer().tokenize(text);
+}
+
+function expectToken(token: any, index: number) {
+  expect(token instanceof Token).toBe(true);
+  expect(token.index).toEqual(index);
+}
+
+function expectCharacterToken(token: any, index: number, character: string) {
+  expect(character.length).toBe(1);
+  expectToken(token, index);
+  expect(token.isCharacter(character.charCodeAt(0))).toBe(true);
+}
+
+function expectOperatorToken(token: any, index: number, operator: string) {
+  expectToken(token, index);
+  expect(token.isOperator(operator)).toBe(true);
+}
+
+function expectNumberToken(token: any, index: number, n: number) {
+  expectToken(token, index);
+  expect(token.isNumber()).toBe(true);
+  expect(token.toNumber()).toEqual(n);
+}
+
+function expectStringToken(token: any, index: number, str: string) {
+  expectToken(token, index);
+  expect(token.isString()).toBe(true);
+  expect(token.toString()).toEqual(str);
+}
+
+function expectIdentifierToken(token: any, index: number, identifier: string) {
+  expectToken(token, index);
+  expect(token.isIdentifier()).toBe(true);
+  expect(token.toString()).toEqual(identifier);
+}
+
+function expectKeywordToken(token: any, index: number, keyword: string) {
+  expectToken(token, index);
+  expect(token.isKeyword()).toBe(true);
+  expect(token.toString()).toEqual(keyword);
+}
+
+function expectErrorToken(token: Token, index: any, message: string) {
+  expectToken(token, index);
+  expect(token.isError()).toBe(true);
+  expect(token.toString()).toEqual(message);
+}
+
+{
+  describe('lexer', () => {
+    describe('token', () => {
+      it('should tokenize a simple identifier', () => {
+        const tokens: number[] = lex('j');
+        expect(tokens.length).toEqual(1);
+        expectIdentifierToken(tokens[0], 0, 'j');
+      });
+
+      it('should tokenize "this"', () => {
+        const tokens: number[] = lex('this');
+        expect(tokens.length).toEqual(1);
+        expectKeywordToken(tokens[0], 0, 'this');
+      });
+
+      it('should tokenize a dotted identifier', () => {
+        const tokens: number[] = lex('j.k');
+        expect(tokens.length).toEqual(3);
+        expectIdentifierToken(tokens[0], 0, 'j');
+        expectCharacterToken(tokens[1], 1, '.');
+        expectIdentifierToken(tokens[2], 2, 'k');
+      });
+
+      it('should tokenize an operator', () => {
+        const tokens: number[] = lex('j-k');
+        expect(tokens.length).toEqual(3);
+        expectOperatorToken(tokens[1], 1, '-');
+      });
+
+      it('should tokenize an indexed operator', () => {
+        const tokens: number[] = lex('j[k]');
+        expect(tokens.length).toEqual(4);
+        expectCharacterToken(tokens[1], 1, '[');
+        expectCharacterToken(tokens[3], 3, ']');
+      });
+
+      it('should tokenize numbers', () => {
+        const tokens: number[] = lex('88');
+        expect(tokens.length).toEqual(1);
+        expectNumberToken(tokens[0], 0, 88);
+      });
+
+      it('should tokenize numbers within index ops',
+         () => { expectNumberToken(lex('a[22]')[2], 2, 22); });
+
+      it('should tokenize simple quoted strings',
+         () => { expectStringToken(lex('"a"')[0], 0, 'a'); });
+
+      it('should tokenize quoted strings with escaped quotes',
+         () => { expectStringToken(lex('"a\\""')[0], 0, 'a"'); });
+
+      it('should tokenize a string', () => {
+        const tokens: Token[] = lex('j-a.bc[22]+1.3|f:\'a\\\'c\':"d\\"e"');
+        expectIdentifierToken(tokens[0], 0, 'j');
+        expectOperatorToken(tokens[1], 1, '-');
+        expectIdentifierToken(tokens[2], 2, 'a');
+        expectCharacterToken(tokens[3], 3, '.');
+        expectIdentifierToken(tokens[4], 4, 'bc');
+        expectCharacterToken(tokens[5], 6, '[');
+        expectNumberToken(tokens[6], 7, 22);
+        expectCharacterToken(tokens[7], 9, ']');
+        expectOperatorToken(tokens[8], 10, '+');
+        expectNumberToken(tokens[9], 11, 1.3);
+        expectOperatorToken(tokens[10], 14, '|');
+        expectIdentifierToken(tokens[11], 15, 'f');
+        expectCharacterToken(tokens[12], 16, ':');
+        expectStringToken(tokens[13], 17, 'a\'c');
+        expectCharacterToken(tokens[14], 23, ':');
+        expectStringToken(tokens[15], 24, 'd"e');
+      });
+
+      it('should tokenize undefined', () => {
+        const tokens: Token[] = lex('undefined');
+        expectKeywordToken(tokens[0], 0, 'undefined');
+        expect(tokens[0].isKeywordUndefined()).toBe(true);
+      });
+
+      it('should ignore whitespace', () => {
+        const tokens: Token[] = lex('a \t \n \r b');
+        expectIdentifierToken(tokens[0], 0, 'a');
+        expectIdentifierToken(tokens[1], 8, 'b');
+      });
+
+      it('should tokenize quoted string', () => {
+        const str = '[\'\\\'\', "\\""]';
+        const tokens: Token[] = lex(str);
+        expectStringToken(tokens[1], 1, '\'');
+        expectStringToken(tokens[3], 7, '"');
+      });
+
+      it('should tokenize escaped quoted string', () => {
+        const str = '"\\"\\n\\f\\r\\t\\v\\u00A0"';
+        const tokens: Token[] = lex(str);
+        expect(tokens.length).toEqual(1);
+        expect(tokens[0].toString()).toEqual('"\n\f\r\t\v\u00A0');
+      });
+
+      it('should tokenize unicode', () => {
+        const tokens: Token[] = lex('"\\u00A0"');
+        expect(tokens.length).toEqual(1);
+        expect(tokens[0].toString()).toEqual('\u00a0');
+      });
+
+      it('should tokenize relation', () => {
+        const tokens: Token[] = lex('! == != < > <= >= === !==');
+        expectOperatorToken(tokens[0], 0, '!');
+        expectOperatorToken(tokens[1], 2, '==');
+        expectOperatorToken(tokens[2], 5, '!=');
+        expectOperatorToken(tokens[3], 8, '<');
+        expectOperatorToken(tokens[4], 10, '>');
+        expectOperatorToken(tokens[5], 12, '<=');
+        expectOperatorToken(tokens[6], 15, '>=');
+        expectOperatorToken(tokens[7], 18, '===');
+        expectOperatorToken(tokens[8], 22, '!==');
+      });
+
+      it('should tokenize statements', () => {
+        const tokens: Token[] = lex('a;b;');
+        expectIdentifierToken(tokens[0], 0, 'a');
+        expectCharacterToken(tokens[1], 1, ';');
+        expectIdentifierToken(tokens[2], 2, 'b');
+        expectCharacterToken(tokens[3], 3, ';');
+      });
+
+      it('should tokenize function invocation', () => {
+        const tokens: Token[] = lex('a()');
+        expectIdentifierToken(tokens[0], 0, 'a');
+        expectCharacterToken(tokens[1], 1, '(');
+        expectCharacterToken(tokens[2], 2, ')');
+      });
+
+      it('should tokenize simple method invocations', () => {
+        const tokens: Token[] = lex('a.method()');
+        expectIdentifierToken(tokens[2], 2, 'method');
+      });
+
+      it('should tokenize method invocation', () => {
+        const tokens: Token[] = lex('a.b.c (d) - e.f()');
+        expectIdentifierToken(tokens[0], 0, 'a');
+        expectCharacterToken(tokens[1], 1, '.');
+        expectIdentifierToken(tokens[2], 2, 'b');
+        expectCharacterToken(tokens[3], 3, '.');
+        expectIdentifierToken(tokens[4], 4, 'c');
+        expectCharacterToken(tokens[5], 6, '(');
+        expectIdentifierToken(tokens[6], 7, 'd');
+        expectCharacterToken(tokens[7], 8, ')');
+        expectOperatorToken(tokens[8], 10, '-');
+        expectIdentifierToken(tokens[9], 12, 'e');
+        expectCharacterToken(tokens[10], 13, '.');
+        expectIdentifierToken(tokens[11], 14, 'f');
+        expectCharacterToken(tokens[12], 15, '(');
+        expectCharacterToken(tokens[13], 16, ')');
+      });
+
+      it('should tokenize number', () => { expectNumberToken(lex('0.5')[0], 0, 0.5); });
+
+      it('should tokenize number with exponent', () => {
+        let tokens: Token[] = lex('0.5E-10');
+        expect(tokens.length).toEqual(1);
+        expectNumberToken(tokens[0], 0, 0.5E-10);
+        tokens = lex('0.5E+10');
+        expectNumberToken(tokens[0], 0, 0.5E+10);
+      });
+
+      it('should return exception for invalid exponent', () => {
+        expectErrorToken(
+            lex('0.5E-')[0], 4, 'Lexer Error: Invalid exponent at column 4 in expression [0.5E-]');
+
+        expectErrorToken(
+            lex('0.5E-A')[0], 4,
+            'Lexer Error: Invalid exponent at column 4 in expression [0.5E-A]');
+      });
+
+      it('should tokenize number starting with a dot',
+         () => { expectNumberToken(lex('.5')[0], 0, 0.5); });
+
+      it('should throw error on invalid unicode', () => {
+        expectErrorToken(
+            lex('\'\\u1\'\'bla\'')[0], 2,
+            'Lexer Error: Invalid unicode escape [\\u1\'\'b] at column 2 in expression [\'\\u1\'\'bla\']');
+      });
+
+      it('should tokenize hash as operator', () => { expectOperatorToken(lex('#')[0], 0, '#'); });
+
+      it('should tokenize ?. as operator', () => { expectOperatorToken(lex('?.')[0], 0, '?.'); });
+    });
+  });
+}
diff --git a/packages/compiler/test/expression_parser/parser_spec.ts b/packages/compiler/test/expression_parser/parser_spec.ts
new file mode 100644
index 000000000000..e028ea9c3e3b
--- /dev/null
+++ b/packages/compiler/test/expression_parser/parser_spec.ts
@@ -0,0 +1,598 @@
+/**
+ * @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 {ASTWithSource, BindingPipe, Interpolation, ParserError, TemplateBinding} from '@angular/compiler/src/expression_parser/ast';
+import {Lexer} from '@angular/compiler/src/expression_parser/lexer';
+import {Parser, SplitInterpolation, TemplateBindingParseResult} from '@angular/compiler/src/expression_parser/parser';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+
+import {unparse} from './utils/unparser';
+import {validate} from './utils/validator';
+
+describe('parser', () => {
+  describe('parseAction', () => {
+    it('should parse numbers', () => { checkAction('1'); });
+
+    it('should parse strings', () => {
+      checkAction('\'1\'', '"1"');
+      checkAction('"1"');
+    });
+
+    it('should parse null', () => { checkAction('null'); });
+
+    it('should parse undefined', () => { checkAction('undefined'); });
+
+    it('should parse unary - expressions', () => {
+      checkAction('-1', '0 - 1');
+      checkAction('+1', '1 - 0');
+      checkAction(`-'1'`, `0 - "1"`);
+      checkAction(`+'1'`, `"1" - 0`);
+    });
+
+    it('should parse unary ! expressions', () => {
+      checkAction('!true');
+      checkAction('!!true');
+      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'); });
+
+    it('should parse additive expressions', () => { checkAction('3 + 6 - 2'); });
+
+    it('should parse relational expressions', () => {
+      checkAction('2 < 3');
+      checkAction('2 > 3');
+      checkAction('2 <= 2');
+      checkAction('2 >= 2');
+    });
+
+    it('should parse equality expressions', () => {
+      checkAction('2 == 3');
+      checkAction('2 != 3');
+    });
+
+    it('should parse strict equality expressions', () => {
+      checkAction('2 === 3');
+      checkAction('2 !== 3');
+    });
+
+    it('should parse expressions', () => {
+      checkAction('true && true');
+      checkAction('true || false');
+    });
+
+    it('should parse grouped expressions', () => { checkAction('(1 + 2) * 3', '1 + 2 * 3'); });
+
+    it('should ignore comments in expressions', () => { checkAction('a //comment', 'a'); });
+
+    it('should retain // in string literals',
+       () => { checkAction(`"http://www.google.com"`, `"http://www.google.com"`); });
+
+    it('should parse an empty string', () => { checkAction(''); });
+
+    describe('literals', () => {
+      it('should parse array', () => {
+        checkAction('[1][0]');
+        checkAction('[[1]][0][0]');
+        checkAction('[]');
+        checkAction('[].length');
+        checkAction('[1, 2].length');
+      });
+
+      it('should parse map', () => {
+        checkAction('{}');
+        checkAction('{a: 1, "b": 2}[2]');
+        checkAction('{}["a"]');
+      });
+
+      it('should only allow identifier, string, or keyword as map key', () => {
+        expectActionError('{(:0}', 'expected identifier, keyword, or string');
+        expectActionError('{1234:0}', 'expected identifier, keyword, or string');
+      });
+    });
+
+    describe('member access', () => {
+      it('should parse field access', () => {
+        checkAction('a');
+        checkAction('this.a', 'a');
+        checkAction('a.a');
+      });
+
+      it('should only allow identifier or keyword as member names', () => {
+        expectActionError('x.(', 'identifier or keyword');
+        expectActionError('x. 1234', 'identifier or keyword');
+        expectActionError('x."foo"', 'identifier or keyword');
+      });
+
+      it('should parse safe field access', () => {
+        checkAction('a?.a');
+        checkAction('a.a?.a');
+      });
+    });
+
+    describe('method calls', () => {
+      it('should parse method calls', () => {
+        checkAction('fn()');
+        checkAction('add(1, 2)');
+        checkAction('a.add(1, 2)');
+        checkAction('fn().add(1, 2)');
+      });
+    });
+
+    describe('functional calls', () => {
+      it('should parse function calls', () => { checkAction('fn()(1, 2)'); });
+    });
+
+    describe('conditional', () => {
+      it('should parse ternary/conditional expressions', () => {
+        checkAction('7 == 3 + 4 ? 10 : 20');
+        checkAction('false ? 10 : 20');
+      });
+
+      it('should report incorrect ternary operator syntax', () => {
+        expectActionError('true?1', 'Conditional expression true?1 requires all 3 expressions');
+      });
+    });
+
+    describe('assignment', () => {
+      it('should support field assignments', () => {
+        checkAction('a = 12');
+        checkAction('a.a.a = 123');
+        checkAction('a = 123; b = 234;');
+      });
+
+      it('should report on safe field assignments',
+         () => { expectActionError('a?.a = 123', 'cannot be used in the assignment'); });
+
+      it('should support array updates', () => { checkAction('a[0] = 200'); });
+    });
+
+    it('should error when using pipes',
+       () => { expectActionError('x|blah', 'Cannot have a pipe'); });
+
+    it('should store the source in the result',
+       () => { expect(parseAction('someExpr', 'someExpr')); });
+
+    it('should store the passed-in location',
+       () => { expect(parseAction('someExpr', 'location').location).toBe('location'); });
+
+    it('should report when encountering interpolation', () => {
+      expectActionError('{{a()}}', 'Got interpolation ({{}}) where expression was expected');
+    });
+  });
+
+  describe('general error handling', () => {
+    it('should report an unexpected token',
+       () => { expectActionError('[1,2] trac', 'Unexpected token \'trac\''); });
+
+    it('should report reasonable error for unconsumed tokens',
+       () => { expectActionError(')', 'Unexpected token ) at column 1 in [)]'); });
+
+    it('should report a missing expected token', () => {
+      expectActionError('a(b', 'Missing expected ) at the end of the expression [a(b]');
+    });
+  });
+
+  describe('parseBinding', () => {
+    describe('pipes', () => {
+      it('should parse pipes', () => {
+        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": 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)');
+        checkBinding('a | b:c | d', '((a | b:c) | d)');
+        checkBinding('a | b:(c | d)', '(a | b:(c | d))');
+      });
+
+      it('should only allow identifier or keyword as formatter names', () => {
+        expectBindingError('"Foo"|(', 'identifier or keyword');
+        expectBindingError('"Foo"|1234', 'identifier or keyword');
+        expectBindingError('"Foo"|"uppercase"', 'identifier or keyword');
+      });
+
+      it('should parse quoted expressions', () => { checkBinding('a:b', 'a:b'); });
+
+      it('should not crash when prefix part is not tokenizable',
+         () => { checkBinding('"a:b"', '"a:b"'); });
+
+      it('should ignore whitespace around quote prefix', () => { checkBinding(' a :b', 'a:b'); });
+
+      it('should refuse prefixes that are not single identifiers', () => {
+        expectBindingError('a + b:c', '');
+        expectBindingError('1:c', '');
+      });
+    });
+
+    it('should store the source in the result',
+       () => { expect(parseBinding('someExpr').source).toBe('someExpr'); });
+
+    it('should store the passed-in location',
+       () => { expect(parseBinding('someExpr', 'location').location).toBe('location'); });
+
+    it('should report chain expressions',
+       () => { expectError(parseBinding('1;2'), 'contain chained expression'); });
+
+    it('should report assignment',
+       () => { expectError(parseBinding('a=2'), 'contain assignments'); });
+
+    it('should report when encountering interpolation', () => {
+      expectBindingError('{{a.b}}', 'Got interpolation ({{}}) where expression was expected');
+    });
+
+    it('should parse conditional expression', () => { checkBinding('a < b ? a : b'); });
+
+    it('should ignore comments in bindings', () => { checkBinding('a //comment', 'a'); });
+
+    it('should retain // in string literals',
+       () => { checkBinding(`"http://www.google.com"`, `"http://www.google.com"`); });
+
+    it('should retain // in : microsyntax', () => { checkBinding('one:a//b', 'one:a//b'); });
+
+  });
+
+  describe('parseTemplateBindings', () => {
+
+    function keys(templateBindings: any[]) { return templateBindings.map(binding => binding.key); }
+
+    function keyValues(templateBindings: any[]) {
+      return templateBindings.map(binding => {
+        if (binding.keyIsVar) {
+          return 'let ' + binding.key + (binding.name == null ? '=null' : '=' + binding.name);
+        } else {
+          return binding.key + (binding.expression == null ? '' : `=${binding.expression}`);
+        }
+      });
+    }
+
+    function keySpans(source: string, templateBindings: TemplateBinding[]) {
+      return templateBindings.map(
+          binding => source.substring(binding.span.start, binding.span.end));
+    }
+
+    function exprSources(templateBindings: any[]) {
+      return templateBindings.map(
+          binding => binding.expression != null ? binding.expression.source : null);
+    }
+
+    it('should parse a key without a value',
+       () => { expect(keys(parseTemplateBindings('a', ''))).toEqual(['a']); });
+
+    it('should allow string including dashes as keys', () => {
+      let bindings = parseTemplateBindings('a', 'b');
+      expect(keys(bindings)).toEqual(['a']);
+
+      bindings = parseTemplateBindings('a-b', 'c');
+      expect(keys(bindings)).toEqual(['a-b']);
+    });
+
+    it('should detect expressions as value', () => {
+      let bindings = parseTemplateBindings('a', 'b');
+      expect(exprSources(bindings)).toEqual(['b']);
+
+      bindings = parseTemplateBindings('a', '1+1');
+      expect(exprSources(bindings)).toEqual(['1+1']);
+    });
+
+    it('should detect names as value', () => {
+      const bindings = parseTemplateBindings('a', 'let b');
+      expect(keyValues(bindings)).toEqual(['a', 'let b=$implicit']);
+    });
+
+    it('should allow space and colon as separators', () => {
+      let bindings = parseTemplateBindings('a', 'b');
+      expect(keys(bindings)).toEqual(['a']);
+      expect(exprSources(bindings)).toEqual(['b']);
+    });
+
+    it('should allow multiple pairs', () => {
+      const bindings = parseTemplateBindings('a', '1 b 2');
+      expect(keys(bindings)).toEqual(['a', 'aB']);
+      expect(exprSources(bindings)).toEqual(['1 ', '2']);
+    });
+
+    it('should store the sources in the result', () => {
+      const bindings = parseTemplateBindings('a', '1,b 2');
+      expect(bindings[0].expression !.source).toEqual('1');
+      expect(bindings[1].expression !.source).toEqual('2');
+    });
+
+    it('should store the passed-in location', () => {
+      const bindings = parseTemplateBindings('a', '1,b 2', 'location');
+      expect(bindings[0].expression !.location).toEqual('location');
+    });
+
+    it('should support let notation', () => {
+      let bindings = parseTemplateBindings('key', 'let i');
+      expect(keyValues(bindings)).toEqual(['key', 'let i=$implicit']);
+
+      bindings = parseTemplateBindings('key', 'let a; let b');
+      expect(keyValues(bindings)).toEqual([
+        'key',
+        'let a=$implicit',
+        'let b=$implicit',
+      ]);
+
+      bindings = parseTemplateBindings('key', 'let a; let b;');
+      expect(keyValues(bindings)).toEqual([
+        'key',
+        'let a=$implicit',
+        'let b=$implicit',
+      ]);
+
+      bindings = parseTemplateBindings('key', 'let i-a = k-a');
+      expect(keyValues(bindings)).toEqual([
+        'key',
+        'let i-a=k-a',
+      ]);
+
+      bindings = parseTemplateBindings('key', 'let item; let i = k');
+      expect(keyValues(bindings)).toEqual([
+        'key',
+        'let item=$implicit',
+        'let i=k',
+      ]);
+
+      bindings = parseTemplateBindings('directive', 'let item in expr; let a = b', 'location');
+      expect(keyValues(bindings)).toEqual([
+        'directive',
+        'let item=$implicit',
+        'directiveIn=expr in location',
+        'let a=b',
+      ]);
+    });
+
+    it('should support as notation', () => {
+      let bindings = parseTemplateBindings('ngIf', 'exp as local', 'location');
+      expect(keyValues(bindings)).toEqual(['ngIf=exp  in location', 'let local=ngIf']);
+
+      bindings = parseTemplateBindings('ngFor', 'let item of items as iter; index as i', 'L');
+      expect(keyValues(bindings)).toEqual([
+        'ngFor', 'let item=$implicit', 'ngForOf=items  in L', 'let iter=ngForOf', 'let i=index'
+      ]);
+    });
+
+    it('should parse pipes', () => {
+      const bindings = parseTemplateBindings('key', 'value|pipe');
+      const ast = bindings[0].expression !.ast;
+      expect(ast).toBeAnInstanceOf(BindingPipe);
+    });
+
+    describe('spans', () => {
+      it('should should support let', () => {
+        const source = 'let i';
+        expect(keySpans(source, parseTemplateBindings('key', 'let i'))).toEqual(['', 'let i']);
+      });
+
+      it('should support multiple lets', () => {
+        const source = 'let item; let i=index; let e=even;';
+        expect(keySpans(source, parseTemplateBindings('key', source))).toEqual([
+          '', 'let item', 'let i=index', 'let e=even'
+        ]);
+      });
+
+      it('should support a prefix', () => {
+        const source = 'let person of people';
+        const prefix = 'ngFor';
+        const bindings = parseTemplateBindings(prefix, source);
+        expect(keyValues(bindings)).toEqual([
+          'ngFor', 'let person=$implicit', 'ngForOf=people in null'
+        ]);
+        expect(keySpans(source, bindings)).toEqual(['', 'let person ', 'of people']);
+      });
+    });
+  });
+
+  describe('parseInterpolation', () => {
+    it('should return null if no interpolation',
+       () => { expect(parseInterpolation('nothing')).toBe(null); });
+
+    it('should parse no prefix/suffix interpolation', () => {
+      const ast = parseInterpolation('{{a}}') !.ast as Interpolation;
+      expect(ast.strings).toEqual(['', '']);
+      expect(ast.expressions.length).toEqual(1);
+      expect(ast.expressions[0].name).toEqual('a');
+    });
+
+    it('should parse prefix/suffix with multiple interpolation', () => {
+      const originalExp = 'before {{ a }} middle {{ b }} after';
+      const ast = parseInterpolation(originalExp) !.ast;
+      expect(unparse(ast)).toEqual(originalExp);
+      validate(ast);
+    });
+
+    it('should report empty interpolation expressions', () => {
+      expectError(
+          parseInterpolation('{{}}') !,
+          'Blank expressions are not allowed in interpolated strings');
+
+      expectError(
+          parseInterpolation('foo {{  }}') !,
+          'Parser Error: Blank expressions are not allowed in interpolated strings');
+    });
+
+    it('should parse conditional expression', () => { checkInterpolation('{{ a < b ? a : b }}'); });
+
+    it('should parse expression with newline characters', () => {
+      checkInterpolation(`{{ 'foo' +\n 'bar' +\r 'baz' }}`, `{{ "foo" + "bar" + "baz" }}`);
+    });
+
+    it('should support custom interpolation', () => {
+      const parser = new Parser(new Lexer());
+      const ast = parser.parseInterpolation('{% a %}', null, {start: '{%', end: '%}'}) !.ast as any;
+      expect(ast.strings).toEqual(['', '']);
+      expect(ast.expressions.length).toEqual(1);
+      expect(ast.expressions[0].name).toEqual('a');
+    });
+
+    describe('comments', () => {
+      it('should ignore comments in interpolation expressions',
+         () => { checkInterpolation('{{a //comment}}', '{{ a }}'); });
+
+      it('should retain // in single quote strings', () => {
+        checkInterpolation(`{{ 'http://www.google.com' }}`, `{{ "http://www.google.com" }}`);
+      });
+
+      it('should retain // in double quote strings', () => {
+        checkInterpolation(`{{ "http://www.google.com" }}`, `{{ "http://www.google.com" }}`);
+      });
+
+      it('should ignore comments after string literals',
+         () => { checkInterpolation(`{{ "a//b" //comment }}`, `{{ "a//b" }}`); });
+
+      it('should retain // in complex strings', () => {
+        checkInterpolation(
+            `{{"//a\'//b\`//c\`//d\'//e" //comment}}`, `{{ "//a\'//b\`//c\`//d\'//e" }}`);
+      });
+
+      it('should retain // in nested, unterminated strings',
+         () => { checkInterpolation(`{{ "a\'b\`" //comment}}`, `{{ "a\'b\`" }}`); });
+    });
+
+  });
+
+  describe('parseSimpleBinding', () => {
+    it('should parse a field access', () => {
+      const p = parseSimpleBinding('name');
+      expect(unparse(p)).toEqual('name');
+      validate(p);
+    });
+
+    it('should report when encountering pipes', () => {
+      expectError(
+          validate(parseSimpleBinding('a | somePipe')),
+          'Host binding expression cannot contain pipes');
+    });
+
+    it('should report when encountering interpolation', () => {
+      expectError(
+          validate(parseSimpleBinding('{{exp}}')),
+          'Got interpolation ({{}}) where expression was expected');
+    });
+
+    it('should report when encountering field write', () => {
+      expectError(validate(parseSimpleBinding('a = b')), 'Bindings cannot contain assignments');
+    });
+  });
+
+  describe('wrapLiteralPrimitive', () => {
+    it('should wrap a literal primitive', () => {
+      expect(unparse(validate(createParser().wrapLiteralPrimitive('foo', null)))).toEqual('"foo"');
+    });
+  });
+
+  describe('error recovery', () => {
+    function recover(text: string, expected?: string) {
+      const expr = validate(parseAction(text));
+      expect(unparse(expr)).toEqual(expected || text);
+    }
+    it('should be able to recover from an extra paren', () => recover('((a)))', 'a'));
+    it('should be able to recover from an extra bracket', () => recover('[[a]]]', '[[a]]'));
+    it('should be able to recover from a missing )', () => recover('(a;b', 'a; b;'));
+    it('should be able to recover from a missing ]', () => recover('[a,b', '[a, b]'));
+    it('should be able to recover from a missing selector', () => recover('a.'));
+    it('should be able to recover from a missing selector in a array literal',
+       () => recover('[[a.], b, c]'));
+  });
+
+  describe('offsets', () => {
+    it('should retain the offsets of an interpolation', () => {
+      const interpolations = splitInterpolation('{{a}}  {{b}}  {{c}}') !;
+      expect(interpolations.offsets).toEqual([2, 9, 16]);
+    });
+
+    it('should retain the offsets into the expression AST of interpolations', () => {
+      const source = parseInterpolation('{{a}}  {{b}}  {{c}}') !;
+      const interpolation = source.ast as Interpolation;
+      expect(interpolation.expressions.map(e => e.span.start)).toEqual([2, 9, 16]);
+    });
+  });
+});
+
+function createParser() {
+  return new Parser(new Lexer());
+}
+
+function parseAction(text: string, location: any = null): ASTWithSource {
+  return createParser().parseAction(text, location);
+}
+
+function parseBinding(text: string, location: any = null): ASTWithSource {
+  return createParser().parseBinding(text, location);
+}
+
+function parseTemplateBindingsResult(
+    key: string, value: string, location: any = null): TemplateBindingParseResult {
+  return createParser().parseTemplateBindings(key, value, location);
+}
+function parseTemplateBindings(
+    key: string, value: string, location: any = null): TemplateBinding[] {
+  return parseTemplateBindingsResult(key, value, location).templateBindings;
+}
+
+function parseInterpolation(text: string, location: any = null): ASTWithSource|null {
+  return createParser().parseInterpolation(text, location);
+}
+
+function splitInterpolation(text: string, location: any = null): SplitInterpolation|null {
+  return createParser().splitInterpolation(text, location);
+}
+
+function parseSimpleBinding(text: string, location: any = null): ASTWithSource {
+  return createParser().parseSimpleBinding(text, location);
+}
+
+function checkInterpolation(exp: string, expected?: string) {
+  const ast = parseInterpolation(exp) !;
+  if (expected == null) expected = exp;
+  expect(unparse(ast)).toEqual(expected);
+  validate(ast);
+}
+
+function checkBinding(exp: string, expected?: string) {
+  const ast = parseBinding(exp);
+  if (expected == null) expected = exp;
+  expect(unparse(ast)).toEqual(expected);
+  validate(ast);
+}
+
+function checkAction(exp: string, expected?: string) {
+  const ast = parseAction(exp);
+  if (expected == null) expected = exp;
+  expect(unparse(ast)).toEqual(expected);
+  validate(ast);
+}
+
+function expectError(ast: {errors: ParserError[]}, message: string) {
+  for (const error of ast.errors) {
+    if (error.message.indexOf(message) >= 0) {
+      return;
+    }
+  }
+  const errMsgs = ast.errors.map(err => err.message).join('\n');
+  throw Error(
+      `Expected an error containing "${message}" to be reported, but got the errors:\n` + errMsgs);
+}
+
+function expectActionError(text: string, message: string) {
+  expectError(validate(parseAction(text)), message);
+}
+
+function expectBindingError(text: string, message: string) {
+  expectError(validate(parseBinding(text)), message);
+}
\ No newline at end of file
diff --git a/packages/compiler/test/expression_parser/utils/BUILD.bazel b/packages/compiler/test/expression_parser/utils/BUILD.bazel
new file mode 100644
index 000000000000..3030462016d5
--- /dev/null
+++ b/packages/compiler/test/expression_parser/utils/BUILD.bazel
@@ -0,0 +1,15 @@
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "utils",
+    testonly = 1,
+    srcs = glob(
+        ["*.ts"],
+    ),
+    visibility = [
+        "//packages/compiler/test:__subpackages__",
+    ],
+    deps = [
+        "//packages/compiler",
+    ],
+)
diff --git a/packages/compiler/test/expression_parser/utils/unparser.ts b/packages/compiler/test/expression_parser/utils/unparser.ts
new file mode 100644
index 000000000000..e5ea2f9f89ba
--- /dev/null
+++ b/packages/compiler/test/expression_parser/utils/unparser.ts
@@ -0,0 +1,197 @@
+/**
+ * @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} from '../../../src/expression_parser/ast';
+import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../../../src/ml_parser/interpolation_config';
+
+class Unparser implements AstVisitor {
+  private static _quoteRegExp = /"/g;
+  // TODO(issue/24571): remove '!'.
+  private _expression !: string;
+  // TODO(issue/24571): remove '!'.
+  private _interpolationConfig !: InterpolationConfig;
+
+  unparse(ast: AST, interpolationConfig: InterpolationConfig) {
+    this._expression = '';
+    this._interpolationConfig = interpolationConfig;
+    this._visit(ast);
+    return this._expression;
+  }
+
+  visitPropertyRead(ast: PropertyRead, context: any) {
+    this._visit(ast.receiver);
+    this._expression += ast.receiver instanceof ImplicitReceiver ? `${ast.name}` : `.${ast.name}`;
+  }
+
+  visitPropertyWrite(ast: PropertyWrite, context: any) {
+    this._visit(ast.receiver);
+    this._expression +=
+        ast.receiver instanceof ImplicitReceiver ? `${ast.name} = ` : `.${ast.name} = `;
+    this._visit(ast.value);
+  }
+
+  visitBinary(ast: Binary, context: any) {
+    this._visit(ast.left);
+    this._expression += ` ${ast.operation} `;
+    this._visit(ast.right);
+  }
+
+  visitChain(ast: Chain, context: any) {
+    const len = ast.expressions.length;
+    for (let i = 0; i < len; i++) {
+      this._visit(ast.expressions[i]);
+      this._expression += i == len - 1 ? ';' : '; ';
+    }
+  }
+
+  visitConditional(ast: Conditional, context: any) {
+    this._visit(ast.condition);
+    this._expression += ' ? ';
+    this._visit(ast.trueExp);
+    this._expression += ' : ';
+    this._visit(ast.falseExp);
+  }
+
+  visitPipe(ast: BindingPipe, context: any) {
+    this._expression += '(';
+    this._visit(ast.exp);
+    this._expression += ` | ${ast.name}`;
+    ast.args.forEach(arg => {
+      this._expression += ':';
+      this._visit(arg);
+    });
+    this._expression += ')';
+  }
+
+  visitFunctionCall(ast: FunctionCall, context: any) {
+    this._visit(ast.target !);
+    this._expression += '(';
+    let isFirst = true;
+    ast.args.forEach(arg => {
+      if (!isFirst) this._expression += ', ';
+      isFirst = false;
+      this._visit(arg);
+    });
+    this._expression += ')';
+  }
+
+  visitImplicitReceiver(ast: ImplicitReceiver, context: any) {}
+
+  visitInterpolation(ast: Interpolation, context: any) {
+    for (let i = 0; i < ast.strings.length; i++) {
+      this._expression += ast.strings[i];
+      if (i < ast.expressions.length) {
+        this._expression += `${this._interpolationConfig.start} `;
+        this._visit(ast.expressions[i]);
+        this._expression += ` ${this._interpolationConfig.end}`;
+      }
+    }
+  }
+
+  visitKeyedRead(ast: KeyedRead, context: any) {
+    this._visit(ast.obj);
+    this._expression += '[';
+    this._visit(ast.key);
+    this._expression += ']';
+  }
+
+  visitKeyedWrite(ast: KeyedWrite, context: any) {
+    this._visit(ast.obj);
+    this._expression += '[';
+    this._visit(ast.key);
+    this._expression += '] = ';
+    this._visit(ast.value);
+  }
+
+  visitLiteralArray(ast: LiteralArray, context: any) {
+    this._expression += '[';
+    let isFirst = true;
+    ast.expressions.forEach(expression => {
+      if (!isFirst) this._expression += ', ';
+      isFirst = false;
+      this._visit(expression);
+    });
+
+    this._expression += ']';
+  }
+
+  visitLiteralMap(ast: LiteralMap, context: any) {
+    this._expression += '{';
+    let isFirst = true;
+    for (let i = 0; i < ast.keys.length; i++) {
+      if (!isFirst) this._expression += ', ';
+      isFirst = false;
+      const key = ast.keys[i];
+      this._expression += key.quoted ? JSON.stringify(key.key) : key.key;
+      this._expression += ': ';
+      this._visit(ast.values[i]);
+    }
+
+    this._expression += '}';
+  }
+
+  visitLiteralPrimitive(ast: LiteralPrimitive, context: any) {
+    if (typeof ast.value === 'string') {
+      this._expression += `"${ast.value.replace( Unparser._quoteRegExp,  '\"')}"`;
+    } else {
+      this._expression += `${ast.value}`;
+    }
+  }
+
+  visitMethodCall(ast: MethodCall, context: any) {
+    this._visit(ast.receiver);
+    this._expression += ast.receiver instanceof ImplicitReceiver ? `${ast.name}(` : `.${ast.name}(`;
+    let isFirst = true;
+    ast.args.forEach(arg => {
+      if (!isFirst) this._expression += ', ';
+      isFirst = false;
+      this._visit(arg);
+    });
+    this._expression += ')';
+  }
+
+  visitPrefixNot(ast: PrefixNot, context: any) {
+    this._expression += '!';
+    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}`;
+  }
+
+  visitSafeMethodCall(ast: SafeMethodCall, context: any) {
+    this._visit(ast.receiver);
+    this._expression += `?.${ast.name}(`;
+    let isFirst = true;
+    ast.args.forEach(arg => {
+      if (!isFirst) this._expression += ', ';
+      isFirst = false;
+      this._visit(arg);
+    });
+    this._expression += ')';
+  }
+
+  visitQuote(ast: Quote, context: any) {
+    this._expression += `${ast.prefix}:${ast.uninterpretedExpression}`;
+  }
+
+  private _visit(ast: AST) { ast.visit(this); }
+}
+
+const sharedUnparser = new Unparser();
+
+export function unparse(
+    ast: AST, interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): string {
+  return sharedUnparser.unparse(ast, interpolationConfig);
+}
diff --git a/packages/compiler/test/expression_parser/utils/validator.ts b/packages/compiler/test/expression_parser/utils/validator.ts
new file mode 100644
index 000000000000..cfdc851da572
--- /dev/null
+++ b/packages/compiler/test/expression_parser/utils/validator.ts
@@ -0,0 +1,123 @@
+/**
+ * @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, Binary, BindingPipe, Chain, Conditional, FunctionCall, ImplicitReceiver, Interpolation, KeyedRead, KeyedWrite, LiteralArray, LiteralMap, LiteralPrimitive, MethodCall, ParseSpan, PrefixNot, PropertyRead, PropertyWrite, Quote, RecursiveAstVisitor, SafeMethodCall, SafePropertyRead} from '../../../src/expression_parser/ast';
+
+import {unparse} from './unparser';
+
+class ASTValidator extends RecursiveAstVisitor {
+  private parentSpan: ParseSpan|undefined;
+
+  visit(ast: AST) {
+    this.parentSpan = undefined;
+    ast.visit(this);
+  }
+
+  validate(ast: AST, cb: () => void): void {
+    if (!inSpan(ast.span, this.parentSpan)) {
+      if (this.parentSpan) {
+        const parentSpan = this.parentSpan as ParseSpan;
+        throw Error(
+            `Invalid AST span [expected (${ast.span.start}, ${ast.span.end}) to be in (${parentSpan.start},  ${parentSpan.end}) for ${unparse(ast)}`);
+      } else {
+        throw Error(`Invalid root AST span for ${unparse(ast)}`);
+      }
+    }
+    const oldParent = this.parentSpan;
+    this.parentSpan = ast.span;
+    cb();
+    this.parentSpan = oldParent;
+  }
+
+  visitBinary(ast: Binary, context: any): any {
+    this.validate(ast, () => super.visitBinary(ast, context));
+  }
+
+  visitChain(ast: Chain, context: any): any {
+    this.validate(ast, () => super.visitChain(ast, context));
+  }
+
+  visitConditional(ast: Conditional, context: any): any {
+    this.validate(ast, () => super.visitConditional(ast, context));
+  }
+
+  visitFunctionCall(ast: FunctionCall, context: any): any {
+    this.validate(ast, () => super.visitFunctionCall(ast, context));
+  }
+
+  visitImplicitReceiver(ast: ImplicitReceiver, context: any): any {
+    this.validate(ast, () => super.visitImplicitReceiver(ast, context));
+  }
+
+  visitInterpolation(ast: Interpolation, context: any): any {
+    this.validate(ast, () => super.visitInterpolation(ast, context));
+  }
+
+  visitKeyedRead(ast: KeyedRead, context: any): any {
+    this.validate(ast, () => super.visitKeyedRead(ast, context));
+  }
+
+  visitKeyedWrite(ast: KeyedWrite, context: any): any {
+    this.validate(ast, () => super.visitKeyedWrite(ast, context));
+  }
+
+  visitLiteralArray(ast: LiteralArray, context: any): any {
+    this.validate(ast, () => super.visitLiteralArray(ast, context));
+  }
+
+  visitLiteralMap(ast: LiteralMap, context: any): any {
+    this.validate(ast, () => super.visitLiteralMap(ast, context));
+  }
+
+  visitLiteralPrimitive(ast: LiteralPrimitive, context: any): any {
+    this.validate(ast, () => super.visitLiteralPrimitive(ast, context));
+  }
+
+  visitMethodCall(ast: MethodCall, context: any): any {
+    this.validate(ast, () => super.visitMethodCall(ast, context));
+  }
+
+  visitPipe(ast: BindingPipe, context: any): any {
+    this.validate(ast, () => super.visitPipe(ast, context));
+  }
+
+  visitPrefixNot(ast: PrefixNot, context: any): any {
+    this.validate(ast, () => super.visitPrefixNot(ast, context));
+  }
+
+  visitPropertyRead(ast: PropertyRead, context: any): any {
+    this.validate(ast, () => super.visitPropertyRead(ast, context));
+  }
+
+  visitPropertyWrite(ast: PropertyWrite, context: any): any {
+    this.validate(ast, () => super.visitPropertyWrite(ast, context));
+  }
+
+  visitQuote(ast: Quote, context: any): any {
+    this.validate(ast, () => super.visitQuote(ast, context));
+  }
+
+  visitSafeMethodCall(ast: SafeMethodCall, context: any): any {
+    this.validate(ast, () => super.visitSafeMethodCall(ast, context));
+  }
+
+  visitSafePropertyRead(ast: SafePropertyRead, context: any): any {
+    this.validate(ast, () => super.visitSafePropertyRead(ast, context));
+  }
+}
+
+function inSpan(span: ParseSpan, parentSpan: ParseSpan | undefined): parentSpan is ParseSpan {
+  return !parentSpan || (span.start >= parentSpan.start && span.end <= parentSpan.end);
+}
+
+const sharedValidator = new ASTValidator();
+
+export function validate<T extends AST>(ast: T): T {
+  sharedValidator.visit(ast);
+  return ast;
+}
diff --git a/packages/compiler/test/i18n/digest_spec.ts b/packages/compiler/test/i18n/digest_spec.ts
new file mode 100644
index 000000000000..22bd7b6eb6f1
--- /dev/null
+++ b/packages/compiler/test/i18n/digest_spec.ts
@@ -0,0 +1,120 @@
+/**
+ * @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 {computeMsgId, digest, sha1} from '../../src/i18n/digest';
+
+{
+  describe('digest', () => {
+    describe('digest', () => {
+      it('must return the ID if it\'s explicit', () => {
+        expect(digest({
+          id: 'i',
+          nodes: [],
+          placeholders: {},
+          placeholderToMessage: {},
+          meaning: '',
+          description: '',
+          sources: [],
+        })).toEqual('i');
+      });
+    });
+
+    describe('sha1', () => {
+      it('should work on empty strings',
+         () => { expect(sha1('')).toEqual('da39a3ee5e6b4b0d3255bfef95601890afd80709'); });
+
+      it('should returns the sha1 of "hello world"',
+         () => { expect(sha1('abc')).toEqual('a9993e364706816aba3e25717850c26c9cd0d89d'); });
+
+      it('should returns the sha1 of unicode strings',
+         () => { expect(sha1('你好，世界')).toEqual('3becb03b015ed48050611c8d7afe4b88f70d5a20'); });
+
+      it('should support arbitrary string size', () => {
+        // node.js reference code:
+        //
+        // var crypto = require('crypto');
+        //
+        // function sha1(string) {
+        //   var shasum = crypto.createHash('sha1');
+        //   shasum.update(string, 'utf8');
+        //   return shasum.digest('hex', 'utf8');
+        // }
+        //
+        // var prefix = `你好，世界`;
+        // var result = sha1(prefix);
+        // for (var size = prefix.length; size < 5000; size += 101) {
+        //   result = prefix + sha1(result);
+        //   while (result.length < size) {
+        //     result += result;
+        //   }
+        //   result = result.slice(-size);
+        // }
+        //
+        // console.log(sha1(result));
+        const prefix = `你好，世界`;
+        let result = sha1(prefix);
+        for (let size = prefix.length; size < 5000; size += 101) {
+          result = prefix + sha1(result);
+          while (result.length < size) {
+            result += result;
+          }
+          result = result.slice(-size);
+        }
+        expect(sha1(result)).toEqual('24c2dae5c1ac6f604dbe670a60290d7ce6320b45');
+      });
+    });
+
+    describe('decimal fingerprint', () => {
+      it('should work on well known inputs w/o meaning', () => {
+        const fixtures: {[msg: string]: string} = {
+          '  Spaced  Out  ': '3976450302996657536',
+          'Last Name': '4407559560004943843',
+          'First Name': '6028371114637047813',
+          'View': '2509141182388535183',
+          'START_BOLDNUMEND_BOLD of START_BOLDmillionsEND_BOLD': '29997634073898638',
+          'The customer\'s credit card was authorized for AMOUNT and passed all risk checks.':
+              '6836487644149622036',
+          'Hello world!': '3022994926184248873',
+          'Jalape\u00f1o': '8054366208386598941',
+          'The set of SET_NAME is {XXX, ...}.': '135956960462609535',
+          'NAME took a trip to DESTINATION.': '768490705511913603',
+          'by AUTHOR (YEAR)': '7036633296476174078',
+          '': '4416290763660062288',
+        };
+
+        Object.keys(fixtures).forEach(
+            msg => { expect(computeMsgId(msg, '')).toEqual(fixtures[msg]); });
+      });
+
+      it('should work on well known inputs with meaning', () => {
+        const fixtures: {[msg: string]: [string, string]} = {
+          '7790835225175622807': ['Last Name', 'Gmail UI'],
+          '1809086297585054940': ['First Name', 'Gmail UI'],
+          '3993998469942805487': ['View', 'Gmail UI'],
+        };
+
+        Object.keys(fixtures).forEach(
+            id => { expect(computeMsgId(fixtures[id][0], fixtures[id][1])).toEqual(id); });
+      });
+
+      it('should support arbitrary string size', () => {
+        const prefix = `你好，世界`;
+        let result = computeMsgId(prefix, '');
+        for (let size = prefix.length; size < 5000; size += 101) {
+          result = prefix + computeMsgId(result, '');
+          while (result.length < size) {
+            result += result;
+          }
+          result = result.slice(-size);
+        }
+        expect(computeMsgId(result, '')).toEqual('2122606631351252558');
+      });
+
+    });
+  });
+}
diff --git a/packages/compiler/test/i18n/extractor_merger_spec.ts b/packages/compiler/test/i18n/extractor_merger_spec.ts
new file mode 100644
index 000000000000..55f8c45225f8
--- /dev/null
+++ b/packages/compiler/test/i18n/extractor_merger_spec.ts
@@ -0,0 +1,572 @@
+/**
+ * @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 {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';
+import * as i18n from '../../src/i18n/i18n_ast';
+import {TranslationBundle} from '../../src/i18n/translation_bundle';
+import * as html from '../../src/ml_parser/ast';
+import {serializeNodes as serializeHtmlNodes} from '../ml_parser/ast_serializer_spec';
+
+{
+  describe('Extractor', () => {
+    describe('elements', () => {
+      it('should extract from elements', () => {
+        expect(extract('<div i18n="m|d|e">text<span>nested</span></div>')).toEqual([
+          [
+            ['text', '<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm', 'd|e',
+            ''
+          ],
+        ]);
+      });
+
+      it('should extract from attributes', () => {
+        expect(
+            extract(
+                '<div i18n="m1|d1"><span i18n-title="m2|d2" title="single child">nested</span></div>'))
+            .toEqual([
+              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm1', 'd1', ''],
+              [['single child'], 'm2', 'd2', ''],
+            ]);
+      });
+
+      it('should extract from attributes with id', () => {
+        expect(
+            extract(
+                '<div i18n="m1|d1@@i1"><span i18n-title="m2|d2@@i2" title="single child">nested</span></div>'))
+            .toEqual([
+              [
+                ['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm1', 'd1',
+                'i1'
+              ],
+              [['single child'], 'm2', 'd2', 'i2'],
+            ]);
+      });
+
+      it('should extract from attributes without meaning and with id', () => {
+        expect(
+            extract(
+                '<div i18n="d1@@i1"><span i18n-title="d2@@i2" title="single child">nested</span></div>'))
+            .toEqual([
+              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], '', 'd1', 'i1'],
+              [['single child'], '', 'd2', 'i2'],
+            ]);
+      });
+
+      it('should extract from attributes with id only', () => {
+        expect(
+            extract(
+                '<div i18n="@@i1"><span i18n-title="@@i2" title="single child">nested</span></div>'))
+            .toEqual([
+              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], '', '', 'i1'],
+              [['single child'], '', '', 'i2'],
+            ]);
+      });
+
+
+      it('should extract from ICU messages', () => {
+        expect(
+            extract(
+                '<div i18n="m|d">{count, plural, =0 { <p i18n-title i18n-desc title="title" desc="desc"></p>}}</div>'))
+            .toEqual([
+              [
+                [
+                  '{count, plural, =0 {[<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">]}}'
+                ],
+                'm', 'd', ''
+              ],
+              [['title'], '', '', ''],
+              [['desc'], '', '', ''],
+            ]);
+      });
+
+      it('should not create a message for empty elements',
+         () => { expect(extract('<div i18n="m|d"></div>')).toEqual([]); });
+
+      it('should ignore implicit elements in translatable elements', () => {
+        expect(extract('<div i18n="m|d"><p></p></div>', ['p'])).toEqual([
+          [['<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">'], 'm', 'd', '']
+        ]);
+      });
+    });
+
+    describe('blocks', () => {
+      it('should extract from blocks', () => {
+        expect(extract(`<!-- i18n: meaning1|desc1 -->message1<!-- /i18n -->
+         <!-- i18n: desc2 -->message2<!-- /i18n -->
+         <!-- i18n -->message3<!-- /i18n -->
+         <!-- i18n: meaning4|desc4@@id4 -->message4<!-- /i18n -->
+         <!-- i18n: @@id5 -->message5<!-- /i18n -->`))
+            .toEqual([
+              [['message1'], 'meaning1', 'desc1', ''], [['message2'], '', 'desc2', ''],
+              [['message3'], '', '', ''], [['message4'], 'meaning4', 'desc4', 'id4'],
+              [['message5'], '', '', 'id5']
+            ]);
+      });
+
+      it('should ignore implicit elements in blocks', () => {
+        expect(extract('<!-- i18n:m|d --><p></p><!-- /i18n -->', ['p'])).toEqual([
+          [['<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">'], 'm', 'd', '']
+        ]);
+      });
+
+
+      it('should extract siblings', () => {
+        expect(
+            extract(
+                `<!-- i18n -->text<p>html<b>nested</b></p>{count, plural, =0 {<span>html</span>}}{{interp}}<!-- /i18n -->`))
+            .toEqual([
+              [
+                [
+                  '{count, plural, =0 {[<ph tag name="START_TAG_SPAN">html</ph name="CLOSE_TAG_SPAN">]}}'
+                ],
+                '', '', ''
+              ],
+              [
+                [
+                  'text', '<ph tag name="START_PARAGRAPH">html, <ph tag' +
+                      ' name="START_BOLD_TEXT">nested</ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">',
+                  '<ph icu name="ICU">{count, plural, =0 {[<ph tag' +
+                      ' name="START_TAG_SPAN">html</ph name="CLOSE_TAG_SPAN">]}}</ph>',
+                  '[<ph name="INTERPOLATION">interp</ph>]'
+                ],
+                '', '', ''
+              ],
+            ]);
+      });
+
+      it('should ignore other comments', () => {
+        expect(extract(`<!-- i18n: meaning1|desc1@@id1 --><!-- other -->message1<!-- /i18n -->`))
+            .toEqual([
+              [['message1'], 'meaning1', 'desc1', 'id1'],
+            ]);
+      });
+
+      it('should not create a message for empty blocks',
+         () => { expect(extract(`<!-- i18n: meaning1|desc1 --><!-- /i18n -->`)).toEqual([]); });
+    });
+
+    describe('ICU messages', () => {
+      it('should extract ICU messages from translatable elements', () => {
+        // single message when ICU is the only children
+        expect(extract('<div i18n="m|d">{count, plural, =0 {text}}</div>')).toEqual([
+          [['{count, plural, =0 {[text]}}'], 'm', 'd', ''],
+        ]);
+
+        // single message when ICU is the only (implicit) children
+        expect(extract('<div>{count, plural, =0 {text}}</div>', ['div'])).toEqual([
+          [['{count, plural, =0 {[text]}}'], '', '', ''],
+        ]);
+
+        // one message for the element content and one message for the ICU
+        expect(extract('<div i18n="m|d@@i">before{count, plural, =0 {text}}after</div>')).toEqual([
+          [
+            ['before', '<ph icu name="ICU">{count, plural, =0 {[text]}}</ph>', 'after'], 'm', 'd',
+            'i'
+          ],
+          [['{count, plural, =0 {[text]}}'], '', '', ''],
+        ]);
+      });
+
+      it('should extract ICU messages from translatable block', () => {
+        // single message when ICU is the only children
+        expect(extract('<!-- i18n:m|d -->{count, plural, =0 {text}}<!-- /i18n -->')).toEqual([
+          [['{count, plural, =0 {[text]}}'], 'm', 'd', ''],
+        ]);
+
+        // one message for the block content and one message for the ICU
+        expect(extract('<!-- i18n:m|d -->before{count, plural, =0 {text}}after<!-- /i18n -->'))
+            .toEqual([
+              [['{count, plural, =0 {[text]}}'], '', '', ''],
+              [
+                ['before', '<ph icu name="ICU">{count, plural, =0 {[text]}}</ph>', 'after'], 'm',
+                'd', ''
+              ],
+            ]);
+      });
+
+      it('should not extract ICU messages outside of i18n sections',
+         () => { expect(extract('{count, plural, =0 {text}}')).toEqual([]); });
+
+      it('should ignore nested ICU messages', () => {
+        expect(extract('<div i18n="m|d">{count, plural, =0 { {sex, select, male {m}} }}</div>'))
+            .toEqual([
+              [['{count, plural, =0 {[{sex, select, male {[m]}},  ]}}'], 'm', 'd', ''],
+            ]);
+      });
+
+      it('should ignore implicit elements in non translatable ICU messages', () => {
+        expect(extract(
+                   '<div i18n="m|d@@i">{count, plural, =0 { {sex, select, male {<p>ignore</p>}}' +
+                       ' }}</div>',
+                   ['p']))
+            .toEqual([[
+              [
+                '{count, plural, =0 {[{sex, select, male {[<ph tag name="START_PARAGRAPH">ignore</ph name="CLOSE_PARAGRAPH">]}},  ]}}'
+              ],
+              'm', 'd', 'i'
+            ]]);
+      });
+
+      it('should ignore implicit elements in non translatable ICU messages', () => {
+        expect(extract('{count, plural, =0 { {sex, select, male {<p>ignore</p>}} }}', ['p']))
+            .toEqual([]);
+      });
+    });
+
+    describe('attributes', () => {
+      it('should extract from attributes outside of translatable sections', () => {
+        expect(extract('<div i18n-title="m|d@@i" title="msg"></div>')).toEqual([
+          [['msg'], 'm', 'd', 'i'],
+        ]);
+      });
+
+      it('should extract from attributes in translatable elements', () => {
+        expect(extract('<div i18n><p><b i18n-title="m|d@@i" title="msg"></b></p></div>')).toEqual([
+          [
+            ['<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph' +
+             ' name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'],
+            '', '', ''
+          ],
+          [['msg'], 'm', 'd', 'i'],
+        ]);
+      });
+
+      it('should extract from attributes in translatable blocks', () => {
+        expect(extract('<!-- i18n --><p><b i18n-title="m|d" title="msg"></b></p><!-- /i18n -->'))
+            .toEqual([
+              [['msg'], 'm', 'd', ''],
+              [
+                ['<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph' +
+                 ' name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'],
+                '', '', ''
+              ],
+            ]);
+      });
+
+      it('should extract from attributes in translatable ICUs', () => {
+        expect(extract(`<!-- i18n -->{count, plural, =0 {<p><b i18n-title="m|d@@i"
+                 title="msg"></b></p>}}<!-- /i18n -->`))
+            .toEqual([
+              [['msg'], 'm', 'd', 'i'],
+              [
+                [
+                  '{count, plural, =0 {[<ph tag name="START_PARAGRAPH"><ph tag' +
+                  ' name="START_BOLD_TEXT"></ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">]}}'
+                ],
+                '', '', ''
+              ],
+            ]);
+      });
+
+      it('should extract from attributes in non translatable ICUs', () => {
+        expect(extract('{count, plural, =0 {<p><b i18n-title="m|d" title="msg"></b></p>}}'))
+            .toEqual([
+              [['msg'], 'm', 'd', ''],
+            ]);
+      });
+
+      it('should not create a message for empty attributes',
+         () => { expect(extract('<div i18n-title="m|d" title></div>')).toEqual([]); });
+    });
+
+    describe('implicit elements', () => {
+      it('should extract from implicit elements', () => {
+        expect(extract('<b>bold</b><i>italic</i>', ['b'])).toEqual([
+          [['bold'], '', '', ''],
+        ]);
+      });
+
+      it('should allow nested implicit elements', () => {
+        let result: any[] = undefined !;
+
+        expect(() => {
+          result = extract('<div>outer<div>inner</div></div>', ['div']);
+        }).not.toThrow();
+
+        expect(result).toEqual([
+          [['outer', '<ph tag name="START_TAG_DIV">inner</ph name="CLOSE_TAG_DIV">'], '', '', ''],
+        ]);
+      });
+
+    });
+
+    describe('implicit attributes', () => {
+      it('should extract implicit attributes', () => {
+        expect(extract('<b title="bb">bold</b><i title="ii">italic</i>', [], {'b': ['title']}))
+            .toEqual([
+              [['bb'], '', '', ''],
+            ]);
+      });
+    });
+
+    describe('errors', () => {
+      describe('elements', () => {
+        it('should report nested translatable elements', () => {
+          expect(extractErrors(`<p i18n><b i18n></b></p>`)).toEqual([
+            ['Could not mark an element as translatable inside a translatable section', '<b i18n>'],
+          ]);
+        });
+
+        it('should report translatable elements in implicit elements', () => {
+          expect(extractErrors(`<p><b i18n></b></p>`, ['p'])).toEqual([
+            ['Could not mark an element as translatable inside a translatable section', '<b i18n>'],
+          ]);
+        });
+
+        it('should report translatable elements in translatable blocks', () => {
+          expect(extractErrors(`<!-- i18n --><b i18n></b><!-- /i18n -->`)).toEqual([
+            ['Could not mark an element as translatable inside a translatable section', '<b i18n>'],
+          ]);
+        });
+      });
+
+      describe('blocks', () => {
+        it('should report nested blocks', () => {
+          expect(extractErrors(`<!-- i18n --><!-- i18n --><!-- /i18n --><!-- /i18n -->`)).toEqual([
+            ['Could not start a block inside a translatable section', '<!--'],
+            ['Trying to close an unopened block', '<!--'],
+          ]);
+
+        });
+
+        it('should report unclosed blocks', () => {
+          expect(extractErrors(`<!-- i18n -->`)).toEqual([
+            ['Unclosed block', '<!--'],
+          ]);
+        });
+
+        it('should report translatable blocks in translatable elements', () => {
+          expect(extractErrors(`<p i18n><!-- i18n --><!-- /i18n --></p>`)).toEqual([
+            ['Could not start a block inside a translatable section', '<!--'],
+            ['Trying to close an unopened block', '<!--'],
+          ]);
+        });
+
+        it('should report translatable blocks in implicit elements', () => {
+          expect(extractErrors(`<p><!-- i18n --><!-- /i18n --></p>`, ['p'])).toEqual([
+            ['Could not start a block inside a translatable section', '<!--'],
+            ['Trying to close an unopened block', '<!--'],
+          ]);
+        });
+
+        it('should report when start and end of a block are not at the same level', () => {
+          expect(extractErrors(`<!-- i18n --><p><!-- /i18n --></p>`)).toEqual([
+            ['I18N blocks should not cross element boundaries', '<!--'],
+            ['Unclosed block', '<p>'],
+          ]);
+
+          expect(extractErrors(`<p><!-- i18n --></p><!-- /i18n -->`)).toEqual([
+            ['I18N blocks should not cross element boundaries', '<!--'],
+            ['Unclosed block', '<!--'],
+          ]);
+        });
+      });
+    });
+  });
+
+  describe('Merger', () => {
+    describe('elements', () => {
+      it('should merge elements', () => {
+        const HTML = `<p i18n="m|d">foo</p>`;
+        expect(fakeTranslate(HTML)).toEqual('<p>**foo**</p>');
+      });
+
+      it('should merge nested elements', () => {
+        const HTML = `<div>before<p i18n="m|d">foo</p><!-- comment --></div>`;
+        expect(fakeTranslate(HTML)).toEqual('<div>before<p>**foo**</p></div>');
+      });
+
+      it('should merge empty messages', () => {
+        const HTML = `<div i18n>some element</div>`;
+        const htmlNodes: html.Node[] = parseHtml(HTML);
+        const messages: i18n.Message[] =
+            extractMessages(htmlNodes, DEFAULT_INTERPOLATION_CONFIG, [], {}).messages;
+
+        expect(messages.length).toEqual(1);
+        const i18nMsgMap: {[id: string]: i18n.Node[]} = {};
+        i18nMsgMap[digest(messages[0])] = [];
+        const translations = new TranslationBundle(i18nMsgMap, null, digest);
+
+        const output =
+            mergeTranslations(htmlNodes, translations, DEFAULT_INTERPOLATION_CONFIG, [], {});
+        expect(output.errors).toEqual([]);
+
+        expect(serializeHtmlNodes(output.rootNodes).join('')).toEqual(`<div></div>`);
+      });
+    });
+
+    describe('blocks', () => {
+      it('should console.warn if we use i18n comments', () => {
+        // TODO(ocombe): expect a warning message when we have a proper log service
+        extract('<!-- i18n --><p><b i18n-title="m|d" title="msg"></b></p><!-- /i18n -->');
+      });
+
+      it('should merge blocks', () => {
+        const HTML = `before<!-- i18n --><p>foo</p><span><i>bar</i></span><!-- /i18n -->after`;
+        expect(fakeTranslate(HTML))
+            .toEqual(
+                'before**[ph tag name="START_PARAGRAPH">foo[/ph name="CLOSE_PARAGRAPH">[ph tag' +
+                ' name="START_TAG_SPAN">[ph tag name="START_ITALIC_TEXT">bar[/ph' +
+                ' name="CLOSE_ITALIC_TEXT">[/ph name="CLOSE_TAG_SPAN">**after');
+      });
+
+      it('should merge nested blocks', () => {
+        const HTML =
+            `<div>before<!-- i18n --><p>foo</p><span><i>bar</i></span><!-- /i18n -->after</div>`;
+        expect(fakeTranslate(HTML))
+            .toEqual(
+                '<div>before**[ph tag name="START_PARAGRAPH">foo[/ph name="CLOSE_PARAGRAPH">[ph' +
+                ' tag name="START_TAG_SPAN">[ph tag name="START_ITALIC_TEXT">bar[/ph' +
+                ' name="CLOSE_ITALIC_TEXT">[/ph name="CLOSE_TAG_SPAN">**after</div>');
+      });
+    });
+
+    describe('attributes', () => {
+      it('should merge attributes', () => {
+        const HTML = `<p i18n-title="m|d" title="foo"></p>`;
+        expect(fakeTranslate(HTML)).toEqual('<p title="**foo**"></p>');
+      });
+
+      it('should merge attributes with ids', () => {
+        const HTML = `<p i18n-title="@@id" title="foo"></p>`;
+        expect(fakeTranslate(HTML)).toEqual('<p title="**foo**"></p>');
+      });
+
+      it('should merge nested attributes', () => {
+        const HTML = `<div>{count, plural, =0 {<p i18n-title title="foo"></p>}}</div>`;
+        expect(fakeTranslate(HTML))
+            .toEqual('<div>{count, plural, =0 {<p title="**foo**"></p>}}</div>');
+      });
+
+      it('should merge attributes without values', () => {
+        const HTML = `<p i18n-title="m|d" title=""></p>`;
+        expect(fakeTranslate(HTML)).toEqual('<p title=""></p>');
+      });
+
+      it('should merge empty attributes', () => {
+        const HTML = `<div i18n-title title="some attribute">some element</div>`;
+        const htmlNodes: html.Node[] = parseHtml(HTML);
+        const messages: i18n.Message[] =
+            extractMessages(htmlNodes, DEFAULT_INTERPOLATION_CONFIG, [], {}).messages;
+
+        expect(messages.length).toEqual(1);
+        const i18nMsgMap: {[id: string]: i18n.Node[]} = {};
+        i18nMsgMap[digest(messages[0])] = [];
+        const translations = new TranslationBundle(i18nMsgMap, null, digest);
+
+        const output =
+            mergeTranslations(htmlNodes, translations, DEFAULT_INTERPOLATION_CONFIG, [], {});
+        expect(output.errors).toEqual([]);
+
+        expect(serializeHtmlNodes(output.rootNodes).join(''))
+            .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>');
+      });
+    });
+  });
+}
+
+function parseHtml(html: string): html.Node[] {
+  const htmlParser = new HtmlParser();
+  const parseResult = htmlParser.parse(html, 'extractor spec', true);
+  if (parseResult.errors.length > 1) {
+    throw new Error(`unexpected parse errors: ${parseResult.errors.join('\n')}`);
+  }
+  return parseResult.rootNodes;
+}
+
+function fakeTranslate(
+    content: string, implicitTags: string[] = [],
+    implicitAttrs: {[k: string]: string[]} = {}): string {
+  const htmlNodes: html.Node[] = parseHtml(content);
+  const messages: i18n.Message[] =
+      extractMessages(htmlNodes, DEFAULT_INTERPOLATION_CONFIG, implicitTags, implicitAttrs)
+          .messages;
+
+  const i18nMsgMap: {[id: string]: i18n.Node[]} = {};
+
+  messages.forEach(message => {
+    const id = digest(message);
+    const text = serializeI18nNodes(message.nodes).join('').replace(/</g, '[');
+    i18nMsgMap[id] = [new i18n.Text(`**${text}**`, null !)];
+  });
+
+  const translationBundle = new TranslationBundle(i18nMsgMap, null, digest);
+  const output = mergeTranslations(
+      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('');
+}
+
+function extract(
+    html: string, implicitTags: string[] = [],
+    implicitAttrs: {[k: string]: string[]} = {}): [string[], string, string, string][] {
+  const result =
+      extractMessages(parseHtml(html), DEFAULT_INTERPOLATION_CONFIG, implicitTags, implicitAttrs);
+
+  if (result.errors.length > 0) {
+    throw new Error(`unexpected errors: ${result.errors.join('\n')}`);
+  }
+
+  // clang-format off
+  // https://github.com/angular/clang-format/issues/35
+  return result.messages.map(
+    message => [serializeI18nNodes(message.nodes), message.meaning, message.description, message.id]) as [string[], string, string, string][];
+  // clang-format on
+}
+
+function extractErrors(
+    html: string, implicitTags: string[] = [], implicitAttrs: {[k: string]: string[]} = {}): any[] {
+  const errors =
+      extractMessages(parseHtml(html), DEFAULT_INTERPOLATION_CONFIG, implicitTags, implicitAttrs)
+          .errors;
+
+  return errors.map((e): [string, string] => [e.msg, e.span.toString()]);
+}
diff --git a/packages/compiler/test/i18n/i18n_html_parser_spec.ts b/packages/compiler/test/i18n/i18n_html_parser_spec.ts
new file mode 100644
index 000000000000..e4edccc85bcb
--- /dev/null
+++ b/packages/compiler/test/i18n/i18n_html_parser_spec.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 {I18NHtmlParser} from '@angular/compiler/src/i18n/i18n_html_parser';
+import {TranslationBundle} from '@angular/compiler/src/i18n/translation_bundle';
+import {HtmlParser} from '@angular/compiler/src/ml_parser/html_parser';
+import {ParseTreeResult} from '@angular/compiler/src/ml_parser/parser';
+
+{
+  describe('I18N html parser', () => {
+    // https://github.com/angular/angular/issues/14322
+    it('should parse the translations only once', () => {
+      const transBundle = new TranslationBundle({}, null, () => 'id');
+      spyOn(TranslationBundle, 'load').and.returnValue(transBundle);
+      const htmlParser = new HtmlParser();
+      const i18nHtmlParser = new I18NHtmlParser(htmlParser, 'translations');
+
+      expect(TranslationBundle.load).toHaveBeenCalledTimes(1);
+
+      i18nHtmlParser.parse('source', 'url');
+      i18nHtmlParser.parse('source', 'url');
+      expect(TranslationBundle.load).toHaveBeenCalledTimes(1);
+    });
+
+  });
+}
diff --git a/packages/compiler/test/i18n/i18n_parser_spec.ts b/packages/compiler/test/i18n/i18n_parser_spec.ts
new file mode 100644
index 000000000000..4b9994ee2725
--- /dev/null
+++ b/packages/compiler/test/i18n/i18n_parser_spec.ts
@@ -0,0 +1,341 @@
+/**
+ * @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 {digest, serializeNodes} from '@angular/compiler/src/i18n/digest';
+import {extractMessages} from '@angular/compiler/src/i18n/extractor_merger';
+import {Message} from '@angular/compiler/src/i18n/i18n_ast';
+import {HtmlParser} from '@angular/compiler/src/ml_parser/html_parser';
+import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/interpolation_config';
+
+{
+  describe('I18nParser', () => {
+
+    describe('elements', () => {
+      it('should extract from elements', () => {
+        expect(_humanizeMessages('<div i18n="m|d">text</div>')).toEqual([
+          [['text'], 'm', 'd'],
+        ]);
+      });
+
+      it('should extract from nested elements', () => {
+        expect(_humanizeMessages('<div i18n="m|d">text<span><b>nested</b></span></div>')).toEqual([
+          [
+            [
+              'text',
+              '<ph tag name="START_TAG_SPAN"><ph tag name="START_BOLD_TEXT">nested</ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_TAG_SPAN">'
+            ],
+            'm', 'd'
+          ],
+        ]);
+      });
+
+      it('should not create a message for empty elements',
+         () => { expect(_humanizeMessages('<div i18n="m|d"></div>')).toEqual([]); });
+
+      it('should not create a message for plain elements',
+         () => { expect(_humanizeMessages('<div></div>')).toEqual([]); });
+
+      it('should suppoprt void elements', () => {
+        expect(_humanizeMessages('<div i18n="m|d"><p><br></p></div>')).toEqual([
+          [
+            [
+              '<ph tag name="START_PARAGRAPH"><ph tag name="LINE_BREAK"/></ph name="CLOSE_PARAGRAPH">'
+            ],
+            'm', 'd'
+          ],
+        ]);
+      });
+    });
+
+    describe('attributes', () => {
+      it('should extract from attributes outside of translatable section', () => {
+        expect(_humanizeMessages('<div i18n-title="m|d" title="msg"></div>')).toEqual([
+          [['msg'], 'm', 'd'],
+        ]);
+      });
+
+      it('should extract from attributes in translatable element', () => {
+        expect(_humanizeMessages('<div i18n><p><b i18n-title="m|d" title="msg"></b></p></div>'))
+            .toEqual([
+              [
+                [
+                  '<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'
+                ],
+                '', ''
+              ],
+              [['msg'], 'm', 'd'],
+            ]);
+      });
+
+      it('should extract from attributes in translatable block', () => {
+        expect(_humanizeMessages(
+                   '<!-- i18n --><p><b i18n-title="m|d" title="msg"></b></p><!-- /i18n -->'))
+            .toEqual([
+              [['msg'], 'm', 'd'],
+              [
+                [
+                  '<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'
+                ],
+                '', ''
+              ],
+            ]);
+      });
+
+      it('should extract from attributes in translatable ICU', () => {
+        expect(
+            _humanizeMessages(
+                '<!-- i18n -->{count, plural, =0 {<p><b i18n-title="m|d" title="msg"></b></p>}}<!-- /i18n -->'))
+            .toEqual([
+              [['msg'], 'm', 'd'],
+              [
+                [
+                  '{count, plural, =0 {[<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">]}}'
+                ],
+                '', ''
+              ],
+            ]);
+      });
+
+      it('should extract from attributes in non translatable ICU', () => {
+        expect(
+            _humanizeMessages('{count, plural, =0 {<p><b i18n-title="m|d" title="msg"></b></p>}}'))
+            .toEqual([
+              [['msg'], 'm', 'd'],
+            ]);
+      });
+
+      it('should not create a message for empty attributes',
+         () => { expect(_humanizeMessages('<div i18n-title="m|d" title></div>')).toEqual([]); });
+    });
+
+    describe('interpolation', () => {
+      it('should replace interpolation with placeholder', () => {
+        expect(_humanizeMessages('<div i18n="m|d">before{{ exp }}after</div>')).toEqual([
+          [['[before, <ph name="INTERPOLATION"> exp </ph>, after]'], 'm', 'd'],
+        ]);
+      });
+
+      it('should support named interpolation', () => {
+        expect(_humanizeMessages('<div i18n="m|d">before{{ exp //i18n(ph="teSt") }}after</div>'))
+            .toEqual([
+              [['[before, <ph name="TEST"> exp //i18n(ph="teSt") </ph>, after]'], 'm', 'd'],
+            ]);
+
+        expect(
+            _humanizeMessages('<div i18n=\'m|d\'>before{{ exp //i18n(ph=\'teSt\') }}after</div>'))
+            .toEqual([
+              [[`[before, <ph name="TEST"> exp //i18n(ph='teSt') </ph>, after]`], 'm', 'd'],
+            ]);
+      });
+    });
+
+    describe('blocks', () => {
+      it('should extract from blocks', () => {
+        expect(_humanizeMessages(`<!-- i18n: meaning1|desc1 -->message1<!-- /i18n -->
+         <!-- i18n: desc2 -->message2<!-- /i18n -->
+         <!-- i18n -->message3<!-- /i18n -->`))
+            .toEqual([
+              [['message1'], 'meaning1', 'desc1'],
+              [['message2'], '', 'desc2'],
+              [['message3'], '', ''],
+            ]);
+      });
+
+      it('should extract all siblings', () => {
+        expect(_humanizeMessages(`<!-- i18n -->text<p>html<b>nested</b></p><!-- /i18n -->`)).toEqual([
+          [
+            [
+              'text',
+              '<ph tag name="START_PARAGRAPH">html, <ph tag name="START_BOLD_TEXT">nested</ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'
+            ],
+            '', ''
+          ],
+        ]);
+      });
+    });
+
+    describe('ICU messages', () => {
+      it('should extract as ICU when single child of an element', () => {
+        expect(_humanizeMessages('<div i18n="m|d">{count, plural, =0 {zero}}</div>')).toEqual([
+          [['{count, plural, =0 {[zero]}}'], 'm', 'd'],
+        ]);
+      });
+
+      it('should extract as ICU + ph when not single child of an element', () => {
+        expect(_humanizeMessages('<div i18n="m|d">b{count, plural, =0 {zero}}a</div>')).toEqual([
+          [['b', '<ph icu name="ICU">{count, plural, =0 {[zero]}}</ph>', 'a'], 'm', 'd'],
+          [['{count, plural, =0 {[zero]}}'], '', ''],
+        ]);
+      });
+
+      it('should extract as ICU when single child of a block', () => {
+        expect(_humanizeMessages('<!-- i18n:m|d -->{count, plural, =0 {zero}}<!-- /i18n -->'))
+            .toEqual([
+              [['{count, plural, =0 {[zero]}}'], 'm', 'd'],
+            ]);
+      });
+
+      it('should extract as ICU + ph when not single child of a block', () => {
+        expect(_humanizeMessages('<!-- i18n:m|d -->b{count, plural, =0 {zero}}a<!-- /i18n -->'))
+            .toEqual([
+              [['{count, plural, =0 {[zero]}}'], '', ''],
+              [['b', '<ph icu name="ICU">{count, plural, =0 {[zero]}}</ph>', 'a'], 'm', 'd'],
+            ]);
+      });
+
+      it('should not extract nested ICU messages', () => {
+        expect(_humanizeMessages(
+                   '<div i18n="m|d">b{count, plural, =0 {{sex, select, male {m}}}}a</div>'))
+            .toEqual([
+              [
+                [
+                  'b', '<ph icu name="ICU">{count, plural, =0 {[{sex, select, male {[m]}}]}}</ph>',
+                  'a'
+                ],
+                'm', 'd'
+              ],
+              [['{count, plural, =0 {[{sex, select, male {[m]}}]}}'], '', ''],
+            ]);
+      });
+    });
+
+    describe('implicit elements', () => {
+      it('should extract from implicit elements', () => {
+        expect(_humanizeMessages('<b>bold</b><i>italic</i>', ['b'])).toEqual([
+          [['bold'], '', ''],
+        ]);
+      });
+    });
+
+    describe('implicit attributes', () => {
+      it('should extract implicit attributes', () => {
+        expect(_humanizeMessages(
+                   '<b title="bb">bold</b><i title="ii">italic</i>', [], {'b': ['title']}))
+            .toEqual([
+              [['bb'], '', ''],
+            ]);
+      });
+    });
+
+    describe('placeholders', () => {
+      it('should reuse the same placeholder name for tags', () => {
+        const html = '<div i18n="m|d"><p>one</p><p>two</p><p other>three</p></div>';
+        expect(_humanizeMessages(html)).toEqual([
+          [
+            [
+              '<ph tag name="START_PARAGRAPH">one</ph name="CLOSE_PARAGRAPH">',
+              '<ph tag name="START_PARAGRAPH">two</ph name="CLOSE_PARAGRAPH">',
+              '<ph tag name="START_PARAGRAPH_1">three</ph name="CLOSE_PARAGRAPH">',
+            ],
+            'm', 'd'
+          ],
+        ]);
+
+        expect(_humanizePlaceholders(html)).toEqual([
+          'START_PARAGRAPH=<p>, CLOSE_PARAGRAPH=</p>, START_PARAGRAPH_1=<p other>',
+        ]);
+
+      });
+
+      it('should reuse the same placeholder name for interpolations', () => {
+        const html = '<div i18n="m|d">{{ a }}{{ a }}{{ b }}</div>';
+        expect(_humanizeMessages(html)).toEqual([
+          [
+            [
+              '[<ph name="INTERPOLATION"> a </ph>, <ph name="INTERPOLATION"> a </ph>, <ph name="INTERPOLATION_1"> b </ph>]'
+            ],
+            'm', 'd'
+          ],
+        ]);
+
+        expect(_humanizePlaceholders(html)).toEqual([
+          'INTERPOLATION={{ a }}, INTERPOLATION_1={{ b }}',
+        ]);
+      });
+
+      it('should reuse the same placeholder name for icu messages', () => {
+        const html =
+            '<div i18n="m|d">{count, plural, =0 {0}}{count, plural, =0 {0}}{count, plural, =1 {1}}</div>';
+
+        expect(_humanizeMessages(html)).toEqual([
+          [
+            [
+              '<ph icu name="ICU">{count, plural, =0 {[0]}}</ph>',
+              '<ph icu name="ICU">{count, plural, =0 {[0]}}</ph>',
+              '<ph icu name="ICU_1">{count, plural, =1 {[1]}}</ph>',
+            ],
+            'm', 'd'
+          ],
+          [['{count, plural, =0 {[0]}}'], '', ''],
+          [['{count, plural, =0 {[0]}}'], '', ''],
+          [['{count, plural, =1 {[1]}}'], '', ''],
+        ]);
+
+        expect(_humanizePlaceholders(html)).toEqual([
+          '',
+          'VAR_PLURAL=count',
+          'VAR_PLURAL=count',
+          'VAR_PLURAL=count',
+        ]);
+
+        expect(_humanizePlaceholdersToMessage(html)).toEqual([
+          'ICU=f0f76923009914f1b05f41042a5c7231b9496504, ICU_1=73693d1f78d0fc882f0bcbce4cb31a0aa1995cfe',
+          '',
+          '',
+          '',
+        ]);
+
+      });
+    });
+  });
+}
+
+export function _humanizeMessages(
+    html: string, implicitTags: string[] = [],
+    implicitAttrs: {[k: string]: string[]} = {}): [string[], string, string][] {
+  // clang-format off
+  // https://github.com/angular/clang-format/issues/35
+  return _extractMessages(html, implicitTags, implicitAttrs).map(
+    message => [serializeNodes(message.nodes), message.meaning, message.description, ]) as [string[], string, string][];
+  // clang-format on
+}
+
+function _humanizePlaceholders(
+    html: string, implicitTags: string[] = [],
+    implicitAttrs: {[k: string]: string[]} = {}): string[] {
+  // clang-format off
+  // https://github.com/angular/clang-format/issues/35
+  return _extractMessages(html, implicitTags, implicitAttrs).map(
+    msg => Object.keys(msg.placeholders).map((name) => `${name}=${msg.placeholders[name]}`).join(', '));
+  // clang-format on
+}
+
+function _humanizePlaceholdersToMessage(
+    html: string, implicitTags: string[] = [],
+    implicitAttrs: {[k: string]: string[]} = {}): string[] {
+  // clang-format off
+  // https://github.com/angular/clang-format/issues/35
+  return _extractMessages(html, implicitTags, implicitAttrs).map(
+    msg => Object.keys(msg.placeholderToMessage).map(k => `${k}=${digest(msg.placeholderToMessage[k])}`).join(', '));
+  // clang-format on
+}
+
+
+export function _extractMessages(
+    html: string, implicitTags: string[] = [],
+    implicitAttrs: {[k: string]: string[]} = {}): Message[] {
+  const htmlParser = new HtmlParser();
+  const parseResult = htmlParser.parse(html, 'extractor spec', true);
+  if (parseResult.errors.length > 1) {
+    throw Error(`unexpected parse errors: ${parseResult.errors.join('\n')}`);
+  }
+
+  return extractMessages(
+             parseResult.rootNodes, DEFAULT_INTERPOLATION_CONFIG, implicitTags, implicitAttrs)
+      .messages;
+}
diff --git a/packages/compiler/test/i18n/integration_common.ts b/packages/compiler/test/i18n/integration_common.ts
new file mode 100644
index 000000000000..2b59094aae5f
--- /dev/null
+++ b/packages/compiler/test/i18n/integration_common.ts
@@ -0,0 +1,167 @@
+/**
+ * @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 {Component, DebugElement} from '@angular/core';
+import {ComponentFixture} from '@angular/core/testing';
+
+import {By} from '@angular/platform-browser/src/dom/debug/by';
+import {stringifyElement} from '@angular/platform-browser/testing/src/browser_util';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+@Component({
+  selector: 'i18n-cmp',
+  template: '',
+})
+export class I18nComponent {
+  // TODO(issue/24571): remove '!'.
+  count !: number;
+  // TODO(issue/24571): remove '!'.
+  sex !: string;
+  // TODO(issue/24571): remove '!'.
+  sexB !: string;
+  response: any = {getItemsList: (): any[] => []};
+}
+
+export class FrLocalization extends NgLocalization {
+  public static PROVIDE = {provide: NgLocalization, useClass: FrLocalization, deps: []};
+  getPluralCategory(value: number): string {
+    switch (value) {
+      case 0:
+      case 1:
+        return 'one';
+      default:
+        return 'other';
+    }
+  }
+}
+
+export function validateHtml(
+    tb: ComponentFixture<I18nComponent>, cmp: I18nComponent, el: DebugElement) {
+  expectHtml(el, 'h1').toBe('<h1>attributs i18n sur les balises</h1>');
+  expectHtml(el, '#i18n-1').toBe('<div id="i18n-1"><p>imbriqué</p></div>');
+  expectHtml(el, '#i18n-2').toBe('<div id="i18n-2"><p>imbriqué</p></div>');
+  expectHtml(el, '#i18n-3').toBe('<div id="i18n-3"><p><i>avec des espaces réservés</i></p></div>');
+  expectHtml(el, '#i18n-3b')
+      .toBe(
+          '<div id="i18n-3b"><p><i class="preserved-on-placeholders">avec des espaces réservés</i></p></div>');
+  expectHtml(el, '#i18n-4')
+      .toBe('<p data-html="<b>gras</b>" id="i18n-4" title="sur des balises non traductibles"></p>');
+  expectHtml(el, '#i18n-5').toBe('<p id="i18n-5" title="sur des balises traductibles"></p>');
+  expectHtml(el, '#i18n-6').toBe('<p id="i18n-6" title=""></p>');
+
+  cmp.count = 0;
+  tb.detectChanges();
+  expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('zero');
+  expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('zero');
+  cmp.count = 1;
+  tb.detectChanges();
+  expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('un');
+  expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('un');
+  expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('un');
+  cmp.count = 2;
+  tb.detectChanges();
+  expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('deux');
+  expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('deux');
+  expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('deux');
+  cmp.count = 3;
+  tb.detectChanges();
+  expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('beaucoup');
+  expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('beaucoup');
+  expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('beaucoup');
+
+  cmp.sex = 'male';
+  cmp.sexB = 'female';
+  tb.detectChanges();
+  expect(el.query(By.css('#i18n-8')).nativeElement).toHaveText('homme');
+  expect(el.query(By.css('#i18n-8b')).nativeElement).toHaveText('femme');
+  cmp.sex = 'female';
+  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();
+  expectHtml(el, '#i18n-9').toEqual('<div id="i18n-9">count = 123</div>');
+
+  cmp.sex = 'f';
+  tb.detectChanges();
+  expectHtml(el, '#i18n-10').toEqual('<div id="i18n-10">sexe = f</div>');
+
+  expectHtml(el, '#i18n-11').toEqual('<div id="i18n-11">custom name</div>');
+  expectHtml(el, '#i18n-12').toEqual('<h1 id="i18n-12">Balises dans les commentaires html</h1>');
+  expectHtml(el, '#i18n-13').toBe('<div id="i18n-13" title="dans une section traductible"></div>');
+  expectHtml(el, '#i18n-15').toMatch(/ca <b>devrait<\/b> marcher/);
+  expectHtml(el, '#i18n-16').toMatch(/avec un ID explicite/);
+  expectHtml(el, '#i18n-18')
+      .toEqual('<div id="i18n-18">FOO<a title="dans une section traductible">BAR</a></div>');
+}
+
+function expectHtml(el: DebugElement, cssSelector: string): any {
+  return expect(stringifyElement(el.query(By.css(cssSelector)).nativeElement));
+}
+
+export const HTML = `
+<div>
+    <h1 i18n>i18n attribute on tags</h1>
+
+    <div id="i18n-1"><p i18n>nested</p></div>
+
+    <div id="i18n-2"><p i18n="different meaning|">nested</p></div>
+
+    <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" i18n-data-html data-html="<b>bold</b>"></p>
+        <p id="i18n-5" i18n i18n-title title="on translatable node"></p>
+        <p id="i18n-6" i18n-title title></p>
+    </div>
+
+    <!-- no ph below because the ICU node is the only child of the div, i.e. no text nodes -->
+    <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, male {m} female {f} other {other}}
+    </div>
+    <div i18n id="i18n-8b">
+        {sexB, select, male {m} female {f}}
+    </div>
+
+    <div i18n id="i18n-9">{{ "count = " + count }}</div>
+    <div i18n id="i18n-10">sex = {{ sex }}</div>
+    <div i18n id="i18n-11">{{ "custom name" //i18n(ph="CUSTOM_NAME") }}</div>
+</div>
+
+<!-- i18n -->
+    <h1 id="i18n-12" >Markers in html comments</h1>
+    <div id="i18n-13" i18n-title title="in a translatable section"></div>
+    <div id="i18n-14">{count, plural, =0 {zero} =1 {one} =2 {two} other {<b>many</b>}}</div>
+<!-- /i18n -->
+
+<div id="i18n-15"><ng-container i18n>it <b>should</b> work</ng-container></div>
+
+<div id="i18n-16" i18n="@@i18n16">with an explicit ID</div>
+<div id="i18n-17" i18n="@@i18n17">{count, plural, =0 {zero} =1 {one} =2 {two} other {<b>many</b>}}</div>
+
+<!-- make sure that ICU messages are not treated as text nodes -->
+<div i18n="desc">{
+    response.getItemsList().length,
+    plural,
+    =0 {Found no results}
+    =1 {Found one result}
+    other {Found {{response.getItemsList().length}} results}
+}</div>
+
+<div i18n id="i18n-18">foo<a i18n-title title="in a translatable section">bar</a></div>
+
+<div i18n>{{ 'test' //i18n(ph="map name") }}</div>
+`;
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 000000000000..e7f82d09ccd6
--- /dev/null
+++ b/packages/compiler/test/i18n/integration_xliff2_spec.ts
@@ -0,0 +1,430 @@
+/**
+ * @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';
+
+{
+  describe('i18n XLIFF 2.0 integration spec', () => {
+
+    beforeEach(async(() => {
+      TestBed.configureCompiler({
+        providers: [
+          SpyResourceLoader.PROVIDE,
+          FrLocalization.PROVIDE,
+          {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="2174788525135228764">
+      <segment>
+        <source>&lt;b&gt;bold&lt;/b&gt;</source>
+        <target>&lt;b&gt;gras&lt;/b&gt;</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="703464324060964421">
+      <segment>
+        <source>
+        <ph id="0" equiv="ICU" disp="{sex, select, other {...} male {...} female {...}}"/>
+    </source>
+        <target><ph id="0" equiv="ICU" disp="{sex, select, other {...} male {...} female {...}}"/></target>
+      </segment>
+    </unit>
+    <unit id="5430374139308914421">
+      <notes>
+        <note category="location">file.ts:23</note>
+      </notes>
+      <segment>
+        <source>{VAR_SELECT, select, other {other} male {m} female {female} }</source>
+        <target>{VAR_SELECT, select, other {autre} male {homme} female {femme} }</target>
+      </segment>
+    </unit>
+    <unit id="1300564767229037107">
+      <notes>
+        <note category="location">file.ts:25,27</note>
+      </notes>
+      <segment>
+        <source>
+        <ph id="0" equiv="ICU" disp="{sexB, select, male {...} female {...}}"/>
+    </source>
+      <target><ph id="0" equiv="ICU" disp="{sexB, select, male {...} female {...}}"/></target>
+      </segment>
+    </unit>
+    <unit id="2500580913783245106">
+      <segment>
+        <source>{VAR_SELECT, select, male {m} female {f} }</source>
+        <target>{VAR_SELECT, select, male {homme} female {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="2329001734457059408">
+      <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="2174788525135228764">
+      <notes>
+        <note category="location">file.ts:14</note>
+      </notes>
+      <segment>
+        <source>&lt;b&gt;bold&lt;/b&gt;</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="703464324060964421">
+      <notes>
+        <note category="location">file.ts:22,24</note>
+      </notes>
+      <segment>
+        <source>
+        <ph id="0" equiv="ICU" disp="{sex, select, male {...} female {...} other {...}}"/>
+    </source>
+      </segment>
+    </unit>
+    <unit id="5430374139308914421">
+      <notes>
+        <note category="location">file.ts:23</note>
+      </notes>
+      <segment>
+        <source>{VAR_SELECT, select, male {m} female {f} other {other} }</source>
+      </segment>
+    </unit>
+    <unit id="1300564767229037107">
+      <notes>
+        <note category="location">file.ts:25,27</note>
+      </notes>
+      <segment>
+        <source>
+        <ph id="0" equiv="ICU" disp="{sexB, select, male {...} female {...}}"/>
+    </source>
+      </segment>
+    </unit>
+    <unit id="2500580913783245106">
+      <notes>
+        <note category="location">file.ts:26</note>
+      </notes>
+      <segment>
+        <source>{VAR_SELECT, select, male {m} female {f} }</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="2329001734457059408">
+      <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
new file mode 100644
index 000000000000..5c8daf498440
--- /dev/null
+++ b/packages/compiler/test/i18n/integration_xliff_spec.ts
@@ -0,0 +1,364 @@
+/**
+ * @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 {Xliff} from '@angular/compiler/src/i18n/serializers/xliff';
+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';
+
+{
+  describe('i18n XLIFF integration spec', () => {
+
+    beforeEach(async(() => {
+      TestBed.configureCompiler({
+        providers: [
+          SpyResourceLoader.PROVIDE,
+          FrLocalization.PROVIDE,
+          {provide: TRANSLATIONS, useValue: XLIFF_TOMERGE},
+          {provide: TRANSLATIONS_FORMAT, useValue: 'xliff'},
+        ]
+      });
+
+      TestBed.configureTestingModule({declarations: [I18nComponent]});
+    }));
+
+    it('should extract from templates', () => {
+      const catalog = new MessageBundle(new HtmlParser, [], {});
+      const serializer = new Xliff();
+      catalog.updateFromTemplate(HTML, 'file.ts', DEFAULT_INTERPOLATION_CONFIG);
+
+      expect(catalog.write(serializer)).toContain(XLIFF_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 XLIFF_TOMERGE = `
+      <trans-unit id="3cb04208df1c2f62553ed48e75939cf7107f9dad" datatype="html">
+        <source>i18n attribute on tags</source>
+        <target>attributs i18n sur les balises</target>
+      </trans-unit>
+      <trans-unit id="52895b1221effb3f3585b689f049d2784d714952" datatype="html">
+        <source>nested</source>
+        <target>imbriqué</target>
+      </trans-unit>
+      <trans-unit id="88d5f22050a9df477ee5646153558b3a4862d47e" datatype="html">
+        <source>nested</source>
+        <target>imbriqué</target>
+        <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" 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>
+      </trans-unit>
+      <trans-unit id="480aaeeea1570bc1dde6b8404e380dee11ed0759" datatype="html">
+        <source>&lt;b&gt;bold&lt;/b&gt;</source>
+        <target>&lt;b&gt;gras&lt;/b&gt;</target>
+      </trans-unit>
+      <trans-unit id="67162b5af5f15fd0eb6480c88688dafdf952b93a" datatype="html">
+        <source>on translatable node</source>
+        <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" 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="49feb201083cbd2c8bfc48a4ae11f105fb984876" datatype="html">
+        <source>
+        <x id="ICU" equiv-text="{sex, select, male {...} female {...}}"/>
+    </source>
+        <target><x id="ICU"/></target>
+      </trans-unit>
+      <trans-unit id="f3be30eb9a18f6e336cc3ca4dd66bbc3a35c5f97" datatype="html">
+        <source>{VAR_SELECT, select, other {other} male {m} female {f} }</source>
+        <target>{VAR_SELECT, select, other {autre} male {homme} female {femme}}</target>
+      </trans-unit>
+      <trans-unit id="cc16e9745fa0b95b2ebc2f18b47ed8e64fe5f0f9" datatype="html">
+        <source>
+        <x id="ICU" equiv-text="{sexB, select, m {...} f {...}}"/>
+    </source>
+        <target><x id="ICU"/></target>
+      </trans-unit>
+      <trans-unit id="4573f2edb0329d69afc2ab8c73c71e2f8b08f807" datatype="html">
+        <source>{VAR_SELECT, select, male {m} female {f} }</source>
+        <target>{VAR_SELECT, select, male {homme} female {femme} }</target>
+      </trans-unit>
+      <trans-unit id="d9879678f727b244bc7c7e20f22b63d98cb14890" datatype="html">
+        <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" equiv-text="{{ sex }}"/></source>
+        <target>sexe = <x id="INTERPOLATION"/></target>
+      </trans-unit>
+      <trans-unit id="a46f833b1fe6ca49e8b97c18f4b7ea0b930c9383" datatype="html">
+        <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">
+        <source>in a translatable section</source>
+        <target>dans une section traductible</target>
+      </trans-unit>
+      <trans-unit id="7f6272480ea8e7ffab548da885ab8105ee2caa93" datatype="html">
+        <source>
+    <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_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" 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">
+        <source>with an explicit ID</source>
+        <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" 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" 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" 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" 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>
+        <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>
+        <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>
+        <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" 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>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">14</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="480aaeeea1570bc1dde6b8404e380dee11ed0759" datatype="html">
+        <source>&lt;b&gt;bold&lt;/b&gt;</source>
+        <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>
+        <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" 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="49feb201083cbd2c8bfc48a4ae11f105fb984876" datatype="html">
+        <source>
+        <x id="ICU" equiv-text="{sex, select, male {...} female {...} other {...}}"/>
+    </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">22</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="f3be30eb9a18f6e336cc3ca4dd66bbc3a35c5f97" datatype="html">
+        <source>{VAR_SELECT, select, male {m} female {f} other {other} }</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="cc16e9745fa0b95b2ebc2f18b47ed8e64fe5f0f9" datatype="html">
+        <source>
+        <x id="ICU" equiv-text="{sexB, select, male {...} female {...}}"/>
+    </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">25</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="4573f2edb0329d69afc2ab8c73c71e2f8b08f807" datatype="html">
+        <source>{VAR_SELECT, select, male {m} female {f} }</source>
+        <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" 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" 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" 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>
+        <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="7f6272480ea8e7ffab548da885ab8105ee2caa93" datatype="html">
+        <source>
+    <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>
+        <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" 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>
+        <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" 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" 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" 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" 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
new file mode 100644
index 000000000000..59853bb23348
--- /dev/null
+++ b/packages/compiler/test/i18n/integration_xmb_xtb_spec.ts
@@ -0,0 +1,122 @@
+/**
+ * @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 {Xmb} from '@angular/compiler/src/i18n/serializers/xmb';
+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';
+
+{
+  describe('i18n XMB/XTB integration spec', () => {
+
+    beforeEach(async(() => {
+      TestBed.configureCompiler({
+        providers: [
+          SpyResourceLoader.PROVIDE,
+          FrLocalization.PROVIDE,
+          {provide: TRANSLATIONS, useValue: XTB},
+          {provide: TRANSLATIONS_FORMAT, useValue: 'xtb'},
+        ]
+      });
+
+      TestBed.configureTestingModule({declarations: [I18nComponent]});
+    }));
+
+    it('should extract from templates', () => {
+      const catalog = new MessageBundle(new HtmlParser, [], {});
+      const serializer = new Xmb();
+      catalog.updateFromTemplate(HTML, 'file.ts', DEFAULT_INTERPOLATION_CONFIG);
+
+      expect(catalog.write(serializer)).toContain(XMB);
+    });
+
+    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 XTB = `
+<translationbundle>
+  <translation id="615790887472569365">attributs i18n sur les balises</translation>
+  <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="2174788525135228764">&lt;b&gt;gras&lt;/b&gt;</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="703464324060964421"><ph name="ICU"/></translation>
+  <translation id="5430374139308914421">{VAR_SELECT, select, male {homme} female {femme} other {autre}}</translation>
+  <translation id="1300564767229037107"><ph name="ICU"/></translation>
+  <translation id="2500580913783245106">{VAR_SELECT, select, male {homme} female {femme}}</translation>
+  <translation id="4851788426695310455"><ph name="INTERPOLATION"/></translation>
+  <translation id="9013357158046221374">sexe = <ph name="INTERPOLATION"/></translation>
+  <translation id="8324617391167353662"><ph name="CUSTOM_NAME"/></translation>
+  <translation id="7685649297917455806">dans une section traductible</translation>
+  <translation id="2329001734457059408">
+    <ph name="START_HEADING_LEVEL1"/>Balises dans les commentaires html<ph name="CLOSE_HEADING_LEVEL1"/>
+    <ph name="START_TAG_DIV"/><ph name="CLOSE_TAG_DIV"/>
+    <ph name="START_TAG_DIV_1"/><ph name="ICU"/><ph name="CLOSE_TAG_DIV"></ph>
+</translation>
+  <translation id="1491627405349178954">ca <ph name="START_BOLD_TEXT"/>devrait<ph name="CLOSE_BOLD_TEXT"/> marcher</translation>
+  <translation id="i18n16">avec un ID explicite</translation>
+  <translation id="i18n17">{VAR_PLURAL, plural, =0 {zero} =1 {un} =2 {deux} other {<ph
+  name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>beaucoup<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</translation>
+  <translation id="4085484936881858615">{VAR_PLURAL, plural, =0 {Pas de réponse} =1 {une réponse} other {<ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph> réponse} }</translation>
+  <translation id="4035252431381981115">FOO<ph name="START_LINK"><ex>&lt;a&gt;</ex></ph>BAR<ph name="CLOSE_LINK"><ex>&lt;/a&gt;</ex></ph></translation>
+  <translation id="5339604010413301604"><ph name="MAP_NAME"><ex>MAP_NAME</ex></ph></translation>
+</translationbundle>`;
+
+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>&lt;i&gt;</ph>with placeholders<ph name="CLOSE_ITALIC_TEXT"><ex>&lt;/i&gt;</ex>&lt;/i&gt;</ph></msg>
+  <msg id="5415448997399451992"><source>file.ts:11</source><ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex>&lt;div&gt;</ph>with <ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex>&lt;div&gt;</ph>nested<ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex>&lt;/div&gt;</ph> placeholders<ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex>&lt;/div&gt;</ph></msg>
+  <msg id="5525133077318024839"><source>file.ts:14</source>on not translatable node</msg>
+  <msg id="2174788525135228764"><source>file.ts:14</source>&lt;b&gt;bold&lt;/b&gt;</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>&lt;b&gt;</ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex>&lt;/b&gt;</ph>} }</msg>
+  <msg id="703464324060964421"><source>file.ts:22,24</source>
+        <ph name="ICU"><ex>{sex, select, male {...} female {...} other {...}}</ex>{sex, select, male {...} female {...} other {...}}</ph>
+    </msg>
+  <msg id="5430374139308914421"><source>file.ts:23</source>{VAR_SELECT, select, male {m} female {f} other {other} }</msg>
+  <msg id="1300564767229037107"><source>file.ts:25,27</source>
+        <ph name="ICU"><ex>{sexB, select, male {...} female {...}}</ex>{sexB, select, male {...} female {...}}</ph>
+    </msg>
+  <msg id="2500580913783245106"><source>file.ts:26</source>{VAR_SELECT, select, male {m} female {f} }</msg>
+  <msg id="4851788426695310455"><source>file.ts:29</source><ph name="INTERPOLATION"><ex>{{ &quot;count = &quot; + count }}</ex>{{ &quot;count = &quot; + count }}</ph></msg>
+  <msg id="9013357158046221374"><source>file.ts:30</source>sex = <ph name="INTERPOLATION"><ex>{{ sex }}</ex>{{ sex }}</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>{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}</ph></msg>
+  <msg id="7685649297917455806"><source>file.ts:36</source><source>file.ts:54</source>in a translatable section</msg>
+  <msg id="2329001734457059408"><source>file.ts:34,38</source>
+    <ph name="START_HEADING_LEVEL1"><ex>&lt;h1&gt;</ex>&lt;h1&gt;</ph>Markers in html comments<ph name="CLOSE_HEADING_LEVEL1"><ex>&lt;/h1&gt;</ex>&lt;/h1&gt;</ph>
+    <ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex>&lt;div&gt;</ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex>&lt;/div&gt;</ph>
+    <ph name="START_TAG_DIV_1"><ex>&lt;div&gt;</ex>&lt;div&gt;</ph><ph name="ICU"><ex>{count, plural, =0 {...} =1 {...} =2 {...} other {...}}</ex>{count, plural, =0 {...} =1 {...} =2 {...} other {...}}</ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex>&lt;/div&gt;</ph>
+</msg>
+  <msg id="1491627405349178954"><source>file.ts:40</source>it <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex>&lt;b&gt;</ph>should<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex>&lt;/b&gt;</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>&lt;b&gt;</ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex>&lt;/b&gt;</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>{{response.getItemsList().length}}</ph> results} }</msg>
+  <msg id="4035252431381981115"><source>file.ts:54</source>foo<ph name="START_LINK"><ex>&lt;a&gt;</ex>&lt;a&gt;</ph>bar<ph name="CLOSE_LINK"><ex>&lt;/a&gt;</ex>&lt;/a&gt;</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>{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}</ph></msg>`;
diff --git a/packages/compiler/test/i18n/message_bundle_spec.ts b/packages/compiler/test/i18n/message_bundle_spec.ts
new file mode 100644
index 000000000000..ef9cbde561b7
--- /dev/null
+++ b/packages/compiler/test/i18n/message_bundle_spec.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 {serializeNodes} from '../../src/i18n/digest';
+import * as i18n from '../../src/i18n/i18n_ast';
+import {MessageBundle} from '../../src/i18n/message_bundle';
+import {Serializer} from '../../src/i18n/serializers/serializer';
+import {HtmlParser} from '../../src/ml_parser/html_parser';
+import {DEFAULT_INTERPOLATION_CONFIG} from '../../src/ml_parser/interpolation_config';
+
+{
+  describe('MessageBundle', () => {
+    describe('Messages', () => {
+      let messages: MessageBundle;
+
+      beforeEach(() => { messages = new MessageBundle(new HtmlParser, [], {}); });
+
+      it('should extract the message to the catalog', () => {
+        messages.updateFromTemplate(
+            '<p i18n="m|d">Translate Me</p>', 'url', DEFAULT_INTERPOLATION_CONFIG);
+        expect(humanizeMessages(messages)).toEqual([
+          'Translate Me (m|d)',
+        ]);
+      });
+
+      it('should extract and dedup messages', () => {
+        messages.updateFromTemplate(
+            '<p i18n="m|d@@1">Translate Me</p><p i18n="@@2">Translate Me</p><p i18n="@@2">Translate Me</p>',
+            'url', DEFAULT_INTERPOLATION_CONFIG);
+        expect(humanizeMessages(messages)).toEqual([
+          'Translate Me (m|d)',
+          'Translate Me (|)',
+        ]);
+      });
+    });
+  });
+}
+
+class _TestSerializer extends Serializer {
+  write(messages: i18n.Message[]): string {
+    return messages.map(msg => `${serializeNodes(msg.nodes)} (${msg.meaning}|${msg.description})`)
+        .join('//');
+  }
+
+  load(content: string, url: string):
+      {locale: string | null, i18nNodesByMsgId: {[id: string]: i18n.Node[]}} {
+    return {locale: null, i18nNodesByMsgId: {}};
+  }
+
+  digest(msg: i18n.Message): string { return msg.id || `default`; }
+}
+
+function humanizeMessages(catalog: MessageBundle): string[] {
+  return catalog.write(new _TestSerializer()).split('//');
+}
diff --git a/packages/compiler/test/i18n/serializers/i18n_ast_spec.ts b/packages/compiler/test/i18n/serializers/i18n_ast_spec.ts
new file mode 100644
index 000000000000..3edf6951a500
--- /dev/null
+++ b/packages/compiler/test/i18n/serializers/i18n_ast_spec.ts
@@ -0,0 +1,66 @@
+/**
+ * @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 i18n from '@angular/compiler/src/i18n/i18n_ast';
+
+import {serializeNodes} from '../../../src/i18n/digest';
+import {_extractMessages} from '../i18n_parser_spec';
+
+{
+  describe('i18n AST', () => {
+    describe('CloneVisitor', () => {
+      it('should clone an AST', () => {
+        const messages = _extractMessages(
+            '<div i18n="m|d">b{count, plural, =0 {{sex, select, male {m}}}}a</div>');
+        const nodes = messages[0].nodes;
+        const text = serializeNodes(nodes).join('');
+        expect(text).toEqual(
+            'b<ph icu name="ICU">{count, plural, =0 {[{sex, select, male {[m]}}]}}</ph>a');
+        const visitor = new i18n.CloneVisitor();
+        const cloneNodes = nodes.map(n => n.visit(visitor));
+        expect(serializeNodes(nodes)).toEqual(serializeNodes(cloneNodes));
+        nodes.forEach((n: i18n.Node, i: number) => {
+          expect(n).toEqual(cloneNodes[i]);
+          expect(n).not.toBe(cloneNodes[i]);
+        });
+      });
+    });
+
+    describe('RecurseVisitor', () => {
+      it('should visit all nodes', () => {
+        const visitor = new RecurseVisitor();
+        const container = new i18n.Container(
+            [
+              new i18n.Text('', null !),
+              new i18n.Placeholder('', '', null !),
+              new i18n.IcuPlaceholder(null !, '', null !),
+            ],
+            null !);
+        const tag = new i18n.TagPlaceholder('', {}, '', '', [container], false, null !);
+        const icu = new i18n.Icu('', '', {tag}, null !);
+
+        icu.visit(visitor);
+        expect(visitor.textCount).toEqual(1);
+        expect(visitor.phCount).toEqual(1);
+        expect(visitor.icuPhCount).toEqual(1);
+      });
+    });
+  });
+}
+
+class RecurseVisitor extends i18n.RecurseVisitor {
+  textCount = 0;
+  phCount = 0;
+  icuPhCount = 0;
+
+  visitText(text: i18n.Text, context?: any): any { this.textCount++; }
+
+  visitPlaceholder(ph: i18n.Placeholder, context?: any): any { this.phCount++; }
+
+  visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): any { this.icuPhCount++; }
+}
diff --git a/packages/compiler/test/i18n/serializers/placeholder_spec.ts b/packages/compiler/test/i18n/serializers/placeholder_spec.ts
new file mode 100644
index 000000000000..e3aa205d176c
--- /dev/null
+++ b/packages/compiler/test/i18n/serializers/placeholder_spec.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 {PlaceholderRegistry} from '../../../src/i18n/serializers/placeholder';
+
+{
+  describe('PlaceholderRegistry', () => {
+    let reg: PlaceholderRegistry;
+
+    beforeEach(() => { reg = new PlaceholderRegistry(); });
+
+    describe('tag placeholder', () => {
+      it('should generate names for well known tags', () => {
+        expect(reg.getStartTagPlaceholderName('p', {}, false)).toEqual('START_PARAGRAPH');
+        expect(reg.getCloseTagPlaceholderName('p')).toEqual('CLOSE_PARAGRAPH');
+      });
+
+      it('should generate names for custom tags', () => {
+        expect(reg.getStartTagPlaceholderName('my-cmp', {}, false)).toEqual('START_TAG_MY-CMP');
+        expect(reg.getCloseTagPlaceholderName('my-cmp')).toEqual('CLOSE_TAG_MY-CMP');
+      });
+
+      it('should generate the same name for the same tag', () => {
+        expect(reg.getStartTagPlaceholderName('p', {}, false)).toEqual('START_PARAGRAPH');
+        expect(reg.getStartTagPlaceholderName('p', {}, false)).toEqual('START_PARAGRAPH');
+      });
+
+      it('should be case sensitive for tag name', () => {
+        expect(reg.getStartTagPlaceholderName('p', {}, false)).toEqual('START_PARAGRAPH');
+        expect(reg.getStartTagPlaceholderName('P', {}, false)).toEqual('START_PARAGRAPH_1');
+        expect(reg.getCloseTagPlaceholderName('p')).toEqual('CLOSE_PARAGRAPH');
+        expect(reg.getCloseTagPlaceholderName('P')).toEqual('CLOSE_PARAGRAPH_1');
+      });
+
+      it('should generate the same name for the same tag with the same attributes', () => {
+        expect(reg.getStartTagPlaceholderName('p', {foo: 'a', bar: 'b'}, false))
+            .toEqual('START_PARAGRAPH');
+        expect(reg.getStartTagPlaceholderName('p', {foo: 'a', bar: 'b'}, false))
+            .toEqual('START_PARAGRAPH');
+        expect(reg.getStartTagPlaceholderName('p', {bar: 'b', foo: 'a'}, false))
+            .toEqual('START_PARAGRAPH');
+      });
+
+      it('should generate different names for the same tag with different attributes', () => {
+        expect(reg.getStartTagPlaceholderName('p', {foo: 'a', bar: 'b'}, false))
+            .toEqual('START_PARAGRAPH');
+        expect(reg.getStartTagPlaceholderName('p', {foo: 'a'}, false)).toEqual('START_PARAGRAPH_1');
+      });
+
+      it('should be case sensitive for attributes', () => {
+        expect(reg.getStartTagPlaceholderName('p', {foo: 'a', bar: 'b'}, false))
+            .toEqual('START_PARAGRAPH');
+        expect(reg.getStartTagPlaceholderName('p', {fOo: 'a', bar: 'b'}, false))
+            .toEqual('START_PARAGRAPH_1');
+        expect(reg.getStartTagPlaceholderName('p', {fOo: 'a', bAr: 'b'}, false))
+            .toEqual('START_PARAGRAPH_2');
+      });
+
+      it('should support void tags', () => {
+        expect(reg.getStartTagPlaceholderName('p', {}, true)).toEqual('PARAGRAPH');
+        expect(reg.getStartTagPlaceholderName('p', {}, true)).toEqual('PARAGRAPH');
+        expect(reg.getStartTagPlaceholderName('p', {other: 'true'}, true)).toEqual('PARAGRAPH_1');
+      });
+    });
+
+    describe('arbitrary placeholders', () => {
+      it('should generate the same name given the same name and content', () => {
+        expect(reg.getPlaceholderName('name', 'content')).toEqual('NAME');
+        expect(reg.getPlaceholderName('name', 'content')).toEqual('NAME');
+      });
+
+      it('should generate a different name given different content', () => {
+        expect(reg.getPlaceholderName('name', 'content1')).toEqual('NAME');
+        expect(reg.getPlaceholderName('name', 'content2')).toEqual('NAME_1');
+        expect(reg.getPlaceholderName('name', 'content3')).toEqual('NAME_2');
+      });
+
+      it('should generate a different name given different names', () => {
+        expect(reg.getPlaceholderName('name1', 'content')).toEqual('NAME1');
+        expect(reg.getPlaceholderName('name2', 'content')).toEqual('NAME2');
+      });
+
+    });
+  });
+}
\ No newline at end of file
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 000000000000..027bdc5bdce2
--- /dev/null
+++ b/packages/compiler/test/i18n/serializers/xliff2_spec.ts
@@ -0,0 +1,436 @@
+/**
+ * @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>
+    <unit id="mrk-test">
+     <notes>
+      <note id="n1" appliesTo="target">Please check the translation for 'namespace'. On also can use 'espace de nom',but I think most technical manuals use the English term.</note>
+     </notes>
+     <segment>
+      <source>You use your own namespace.</source>
+      <target>Vous pouvez utiliser votre propre <mrk id="m1" type="comment" ref="#n1">namespace</mrk>.</target>
+     </segment>
+    </unit>
+    <unit id="mrk-test2">
+     <notes>
+      <note id="n1" appliesTo="target">Please check the translation for 'namespace'. On also can use 'espace de nom',but I think most technical manuals use the English term.</note>
+     </notes>
+     <segment>
+      <source>You use your own namespace.</source>
+      <target>Vous pouvez utiliser <mrk id="m1" type="comment" ref="#n1">votre propre <mrk id="m2" type="comment" ref="#n1">namespace</mrk></mrk>.</target>
+     </segment>
+    </unit>
+  </file>
+</xliff>
+`;
+
+(function() {
+  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`,
+          'mrk-test': 'Vous pouvez utiliser votre propre namespace.',
+          'mrk-test2': 'Vous pouvez utiliser votre propre namespace.'
+        });
+      });
+
+      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
new file mode 100644
index 000000000000..87c153b63357
--- /dev/null
+++ b/packages/compiler/test/i18n/serializers/xliff_spec.ts
@@ -0,0 +1,400 @@
+/**
+ * @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 {Xliff} from '../../../src/i18n/serializers/xliff';
+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">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>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="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="983775b9a51ce14b036be72d4cfd65d68d64e231" datatype="html">
+        <source>translatable attribute</source>
+        <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" 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" 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>
+        <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>
+        <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>
+        <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" 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" 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="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>
+</xliff>
+`;
+
+const LOAD_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" target-language="fr" datatype="plaintext" original="ng2.template">
+    <body>
+      <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>
+        <target>{VAR_PLURAL, plural, =0 {<x id="START_PARAGRAPH" ctype="x-p"/>TEST<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} }</target>
+      </trans-unit>
+      <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="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>
+      <trans-unit id="mrk-test">
+        <source>First sentence.</source>
+        <seg-source>
+          <invalid-tag>Should not be parsed</invalid-tag>
+        </seg-source>
+        <target>Translated <mrk mtype="seg" mid="1">first sentence</mrk>.</target>
+      </trans-unit>
+      <trans-unit id="mrk-test2">
+        <source>First sentence. Second sentence.</source>
+        <seg-source>
+          <invalid-tag>Should not be parsed</invalid-tag>
+        </seg-source>
+        <target>Translated <mrk mtype="seg" mid="1"><mrk mtype="seg" mid="2">first</mrk> sentence</mrk>.</target>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>
+`;
+
+(function() {
+  const serializer = new Xliff();
+
+  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 serializer', () => {
+    describe('write', () => {
+      it('should write a valid xliff file', () => { expect(toXliff(HTML)).toEqual(WRITE_XLIFF); });
+      it('should write a valid xliff file with a source language',
+         () => { expect(toXliff(HTML, 'fr')).toContain('file source-language="fr"'); });
+    });
+
+    describe('load', () => {
+      it('should load XLIFF files', () => {
+        expect(loadAsMap(LOAD_XLIFF)).toEqual({
+          '983775b9a51ce14b036be72d4cfd65d68d64e231': 'etubirtta elbatalsnart',
+          'ec1d033f2436133c14ab038286c4f5df4697484a':
+              '<ph name="INTERPOLATION"/> footnemele elbatalsnart <ph name="START_BOLD_TEXT"/>sredlohecalp htiw<ph name="CLOSE_BOLD_TEXT"/>',
+          'e2ccf3d131b15f54aa1fcf1314b1ca77c14bfcc2':
+              '{VAR_PLURAL, plural, =0 {[<ph name="START_PARAGRAPH"/>, TEST, <ph name="CLOSE_PARAGRAPH"/>]}}',
+          'db3e0a6a5a96481f60aec61d98c3eecddef5ac23': 'oof',
+          'i': 'toto',
+          'bar': 'tata',
+          'd7fa2d59aaedcaa5309f13028c59af8c85b8c49d':
+              '<ph name="START_TAG_DIV"/><ph name="CLOSE_TAG_DIV"/><ph name="TAG_IMG"/><ph name="LINE_BREAK"/>',
+          'empty target': '',
+          'baz':
+              '{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`,
+          'mrk-test': 'Translated first sentence.',
+          'mrk-test2': 'Translated first sentence.'
+        });
+      });
+
+      it('should return the target locale',
+         () => { expect(serializer.load(LOAD_XLIFF, 'url').locale).toEqual('fr'); });
+
+
+      describe('structure errors', () => {
+        it('should throw when a trans-unit has no translation', () => {
+          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="missingtarget">
+        <source/>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>`;
+
+          expect(() => {
+            loadAsMap(XLIFF);
+          }).toThrowError(/Message missingtarget misses a translation/);
+        });
+
+
+        it('should throw when a trans-unit has no id attribute', () => {
+          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 datatype="html">
+        <source/>
+        <target/>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>`;
+
+          expect(() => {
+            loadAsMap(XLIFF);
+          }).toThrowError(/<trans-unit> misses the "id" attribute/);
+        });
+
+        it('should throw on duplicate trans-unit id', () => {
+          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>
+      <trans-unit id="deadbeef">
+        <source/>
+        <target/>
+      </trans-unit>
+    </body>
+  </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="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" datatype="html">
+        <source/>
+        <target><b>msg should contain only ph tags</b></target>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>`;
+
+          expect(() => { loadAsMap(XLIFF); })
+              .toThrowError(
+                  new RegExp(escapeRegExp(`[ERROR ->]<b>msg should contain only ph tags</b>`)));
+        });
+
+        it('should throw when a placeholder misses an id attribute', () => {
+          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" datatype="html">
+        <source/>
+        <target><x/></target>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>`;
+
+          expect(() => {
+            loadAsMap(XLIFF);
+          }).toThrowError(new RegExp(escapeRegExp(`<x> misses the "id" attribute`)));
+        });
+
+      });
+    });
+  });
+})();
diff --git a/packages/compiler/test/i18n/serializers/xmb_spec.ts b/packages/compiler/test/i18n/serializers/xmb_spec.ts
new file mode 100644
index 000000000000..68a8f47db133
--- /dev/null
+++ b/packages/compiler/test/i18n/serializers/xmb_spec.ts
@@ -0,0 +1,86 @@
+/**
+ * @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 {MessageBundle} from '@angular/compiler/src/i18n/message_bundle';
+import {Xmb} from '@angular/compiler/src/i18n/serializers/xmb';
+import {HtmlParser} from '@angular/compiler/src/ml_parser/html_parser';
+import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/interpolation_config';
+
+{
+  describe('XMB serializer', () => {
+    const HTML = `
+<p>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">foo</p>
+<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>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 [
+<!ELEMENT messagebundle (msg)*>
+<!ATTLIST messagebundle class CDATA #IMPLIED>
+
+<!ELEMENT msg (#PCDATA|ph|source)*>
+<!ATTLIST msg id CDATA #IMPLIED>
+<!ATTLIST msg seq CDATA #IMPLIED>
+<!ATTLIST msg name CDATA #IMPLIED>
+<!ATTLIST msg desc CDATA #IMPLIED>
+<!ATTLIST msg meaning CDATA #IMPLIED>
+<!ATTLIST msg obsolete (obsolete) #IMPLIED>
+<!ATTLIST msg xml:space (default|preserve) "default">
+<!ATTLIST msg is_hidden CDATA #IMPLIED>
+
+<!ELEMENT source (#PCDATA)>
+
+<!ELEMENT ph (#PCDATA|ex)*>
+<!ATTLIST ph name CDATA #REQUIRED>
+
+<!ELEMENT ex (#PCDATA)>
+]>
+<messagebundle>
+  <msg id="7056919470098446707"><source>file.ts:3</source>translatable element <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex>&lt;b&gt;</ph>with placeholders<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex>&lt;/b&gt;</ph> <ph name="INTERPOLATION"><ex>{{ interpolation}}</ex>{{ interpolation}}</ph></msg>
+  <msg id="2981514368455622387"><source>file.ts:4</source>{VAR_PLURAL, plural, =0 {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex>&lt;p&gt;</ph>test<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex>&lt;/p&gt;</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>&lt;p&gt;</ph>deeply nested<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex>&lt;/p&gt;</ph>} } } }</msg>
+  <msg id="6997386649824869937"><source>file.ts:9</source>Test: <ph name="ICU"><ex>{ count, plural, =0 {...} =other {...}}</ex>{ count, plural, =0 {...} =other {...}}</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>&lt;p&gt;</ph>deeply nested<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex>&lt;/p&gt;</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, 'file.ts')).toEqual(XMB);
+      // the locale is not specified in the xmb file
+      expect(toXmb(HTML, 'file.ts', 'fr')).toEqual(XMB);
+    });
+
+    it('should throw when trying to load an xmb file', () => {
+      expect(() => {
+        const serializer = new Xmb();
+        serializer.load(XMB, 'url');
+      }).toThrowError(/Unsupported/);
+    });
+  });
+}
+
+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, url, DEFAULT_INTERPOLATION_CONFIG);
+
+  return catalog.write(serializer);
+}
diff --git a/packages/compiler/test/i18n/serializers/xml_helper_spec.ts b/packages/compiler/test/i18n/serializers/xml_helper_spec.ts
new file mode 100644
index 000000000000..d8e4016048f5
--- /dev/null
+++ b/packages/compiler/test/i18n/serializers/xml_helper_spec.ts
@@ -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
+ */
+
+import * as xml from '../../../src/i18n/serializers/xml_helper';
+
+{
+  describe('XML helper', () => {
+    it('should serialize XML declaration', () => {
+      expect(xml.serialize([new xml.Declaration({version: '1.0'})]))
+          .toEqual('<?xml version="1.0" ?>');
+    });
+
+    it('should serialize text node',
+       () => { expect(xml.serialize([new xml.Text('foo bar')])).toEqual('foo bar'); });
+
+    it('should escape text nodes',
+       () => { expect(xml.serialize([new xml.Text('<>')])).toEqual('&lt;&gt;'); });
+
+    it('should serialize xml nodes without children', () => {
+      expect(xml.serialize([new xml.Tag('el', {foo: 'bar'}, [])])).toEqual('<el foo="bar"/>');
+    });
+
+    it('should serialize xml nodes with children', () => {
+      expect(xml.serialize([
+        new xml.Tag('parent', {}, [new xml.Tag('child', {}, [new xml.Text('content')])])
+      ])).toEqual('<parent><child>content</child></parent>');
+    });
+
+    it('should serialize node lists', () => {
+      expect(xml.serialize([
+        new xml.Tag('el', {order: '0'}, []),
+        new xml.Tag('el', {order: '1'}, []),
+      ])).toEqual('<el order="0"/><el order="1"/>');
+    });
+
+    it('should escape attribute values', () => {
+      expect(xml.serialize([new xml.Tag('el', {foo: '<">'}, [])]))
+          .toEqual('<el foo="&lt;&quot;&gt;"/>');
+    });
+
+  });
+}
\ No newline at end of file
diff --git a/packages/compiler/test/i18n/serializers/xtb_spec.ts b/packages/compiler/test/i18n/serializers/xtb_spec.ts
new file mode 100644
index 000000000000..d162fc9739b4
--- /dev/null
+++ b/packages/compiler/test/i18n/serializers/xtb_spec.ts
@@ -0,0 +1,192 @@
+/**
+ * @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 * as i18n from '../../../src/i18n/i18n_ast';
+import {Xtb} from '../../../src/i18n/serializers/xtb';
+
+
+{
+  describe('XTB serializer', () => {
+    const serializer = new Xtb();
+
+    function loadAsMap(xtb: string): {[id: string]: string} {
+      const {i18nNodesByMsgId} = serializer.load(xtb, 'url');
+      const msgMap: {[id: string]: string} = {};
+      Object.keys(i18nNodesByMsgId).forEach(id => {
+        msgMap[id] = serializeNodes(i18nNodesByMsgId[id]).join('');
+      });
+      return msgMap;
+    }
+
+    describe('load', () => {
+      it('should load XTB files with a doctype', () => {
+        const XTB = `<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE translationbundle [<!ELEMENT translationbundle (translation)*>
+<!ATTLIST translationbundle lang CDATA #REQUIRED>
+
+<!ELEMENT translation (#PCDATA|ph)*>
+<!ATTLIST translation id CDATA #REQUIRED>
+
+<!ELEMENT ph EMPTY>
+<!ATTLIST ph name CDATA #REQUIRED>
+]>
+<translationbundle>
+  <translation id="8841459487341224498">rab</translation>
+</translationbundle>`;
+
+        expect(loadAsMap(XTB)).toEqual({'8841459487341224498': 'rab'});
+      });
+
+      it('should load XTB files without placeholders', () => {
+        const XTB = `<?xml version="1.0" encoding="UTF-8"?>
+<translationbundle>
+  <translation id="8841459487341224498">rab</translation>
+</translationbundle>`;
+
+        expect(loadAsMap(XTB)).toEqual({'8841459487341224498': 'rab'});
+      });
+
+      it('should return the target locale', () => {
+        const XTB = `<?xml version="1.0" encoding="UTF-8"?>
+<translationbundle lang='fr'>
+  <translation id="8841459487341224498">rab</translation>
+</translationbundle>`;
+
+        expect(serializer.load(XTB, 'url').locale).toEqual('fr');
+      });
+
+      it('should load XTB files with placeholders', () => {
+        const XTB = `<?xml version="1.0" encoding="UTF-8"?>
+<translationbundle>
+  <translation id="8877975308926375834"><ph name="START_PARAGRAPH"/>rab<ph name="CLOSE_PARAGRAPH"/></translation>
+</translationbundle>`;
+
+        expect(loadAsMap(XTB)).toEqual({
+          '8877975308926375834': '<ph name="START_PARAGRAPH"/>rab<ph name="CLOSE_PARAGRAPH"/>'
+        });
+      });
+
+      it('should replace ICU placeholders with their translations', () => {
+        const XTB = `<?xml version="1.0" encoding="UTF-8" ?>
+<translationbundle>
+  <translation id="7717087045075616176">*<ph name="ICU"/>*</translation>
+  <translation id="5115002811911870583">{VAR_PLURAL, plural, =1 {<ph name="START_PARAGRAPH"/>rab<ph name="CLOSE_PARAGRAPH"/>}}</translation>
+</translationbundle>`;
+
+        expect(loadAsMap(XTB)).toEqual({
+          '7717087045075616176': `*<ph name="ICU"/>*`,
+          '5115002811911870583':
+              `{VAR_PLURAL, plural, =1 {[<ph name="START_PARAGRAPH"/>, rab, <ph name="CLOSE_PARAGRAPH"/>]}}`,
+        });
+      });
+
+      it('should load complex XTB files', () => {
+        const XTB = `<?xml version="1.0" encoding="UTF-8" ?>
+<translationbundle>
+  <translation id="8281795707202401639"><ph name="INTERPOLATION"/><ph name="START_BOLD_TEXT"/>rab<ph name="CLOSE_BOLD_TEXT"/> oof</translation>
+  <translation id="5115002811911870583">{VAR_PLURAL, plural, =1 {<ph name="START_PARAGRAPH"/>rab<ph name="CLOSE_PARAGRAPH"/>}}</translation>
+  <translation id="130772889486467622">oof</translation>
+  <translation id="4739316421648347533">{VAR_PLURAL, plural, =1 {{VAR_GENDER, gender, male {<ph name="START_PARAGRAPH"/>rab<ph name="CLOSE_PARAGRAPH"/>}} }}</translation>
+</translationbundle>`;
+
+        expect(loadAsMap(XTB)).toEqual({
+          '8281795707202401639':
+              `<ph name="INTERPOLATION"/><ph name="START_BOLD_TEXT"/>rab<ph name="CLOSE_BOLD_TEXT"/> oof`,
+          '5115002811911870583':
+              `{VAR_PLURAL, plural, =1 {[<ph name="START_PARAGRAPH"/>, rab, <ph name="CLOSE_PARAGRAPH"/>]}}`,
+          '130772889486467622': `oof`,
+          '4739316421648347533':
+              `{VAR_PLURAL, plural, =1 {[{VAR_GENDER, gender, male {[<ph name="START_PARAGRAPH"/>, rab, <ph name="CLOSE_PARAGRAPH"/>]}},  ]}}`,
+        });
+      });
+    });
+
+    describe('errors', () => {
+      it('should be able to parse non-angular xtb files without error', () => {
+        const XTB = `<?xml version="1.0" encoding="UTF-8" ?>
+<translationbundle>
+  <translation id="angular">is great</translation>
+  <translation id="non angular">is <invalid>less</invalid> {count, plural, =0 {{GREAT}}}</translation>
+</translationbundle>`;
+
+        // Invalid messages should not cause the parser to throw
+        let i18nNodesByMsgId: {[id: string]: i18n.Node[]} = undefined !;
+        expect(() => {
+          i18nNodesByMsgId = serializer.load(XTB, 'url').i18nNodesByMsgId;
+        }).not.toThrow();
+
+        expect(Object.keys(i18nNodesByMsgId).length).toEqual(2);
+        expect(serializeNodes(i18nNodesByMsgId['angular']).join('')).toEqual('is great');
+        // Messages that contain unsupported feature should throw on access
+        expect(() => {
+          const read = i18nNodesByMsgId['non angular'];
+        }).toThrowError(/xtb parse errors/);
+      });
+
+      it('should throw on nested <translationbundle>', () => {
+        const XTB =
+            '<translationbundle><translationbundle></translationbundle></translationbundle>';
+
+        expect(() => {
+          loadAsMap(XTB);
+        }).toThrowError(/<translationbundle> elements can not be nested/);
+      });
+
+      it('should throw when a <translation> has no id attribute', () => {
+        const XTB = `<translationbundle>
+  <translation></translation>
+</translationbundle>`;
+
+        expect(() => { loadAsMap(XTB); }).toThrowError(/<translation> misses the "id" attribute/);
+      });
+
+      it('should throw when a placeholder has no name attribute', () => {
+        const XTB = `<translationbundle>
+  <translation id="1186013544048295927"><ph /></translation>
+</translationbundle>`;
+
+        expect(() => { loadAsMap(XTB); }).toThrowError(/<ph> misses the "name" attribute/);
+      });
+
+      it('should throw on unknown xtb tags', () => {
+        const XTB = `<what></what>`;
+
+        expect(() => {
+          loadAsMap(XTB);
+        }).toThrowError(new RegExp(escapeRegExp(`Unexpected tag ("[ERROR ->]<what></what>")`)));
+      });
+
+      it('should throw on unknown message tags', () => {
+        const XTB = `<translationbundle>
+  <translation id="1186013544048295927"><b>msg should contain only ph tags</b></translation>
+</translationbundle>`;
+
+        expect(() => { loadAsMap(XTB); })
+            .toThrowError(
+                new RegExp(escapeRegExp(`[ERROR ->]<b>msg should contain only ph tags</b>`)));
+      });
+
+      it('should throw on duplicate message id', () => {
+        const XTB = `<translationbundle>
+  <translation id="1186013544048295927">msg1</translation>
+  <translation id="1186013544048295927">msg2</translation>
+</translationbundle>`;
+
+        expect(() => {
+          loadAsMap(XTB);
+        }).toThrowError(/Duplicated translations for msg 1186013544048295927/);
+      });
+
+      it('should throw when trying to save an xtb file',
+         () => { expect(() => { serializer.write([], null); }).toThrowError(/Unsupported/); });
+
+    });
+  });
+}
diff --git a/packages/compiler/test/i18n/translation_bundle_spec.ts b/packages/compiler/test/i18n/translation_bundle_spec.ts
new file mode 100644
index 000000000000..cac903ecca40
--- /dev/null
+++ b/packages/compiler/test/i18n/translation_bundle_spec.ts
@@ -0,0 +1,169 @@
+/**
+ * @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 {MissingTranslationStrategy} from '@angular/core';
+
+import * as i18n from '../../src/i18n/i18n_ast';
+import {TranslationBundle} from '../../src/i18n/translation_bundle';
+import * as html from '../../src/ml_parser/ast';
+import {ParseLocation, ParseSourceFile, ParseSourceSpan} from '../../src/parse_util';
+import {serializeNodes} from '../ml_parser/ast_serializer_spec';
+
+import {_extractMessages} from './i18n_parser_spec';
+
+{
+  describe('TranslationBundle', () => {
+    const file = new ParseSourceFile('content', 'url');
+    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 text', () => {
+      const msgMap = {foo: [new i18n.Text('bar', null !)]};
+      const tb = new TranslationBundle(msgMap, null, (_) => 'foo');
+      const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+      expect(serializeNodes(tb.get(msg))).toEqual(['bar']);
+    });
+
+    it('should translate html-like plain text', () => {
+      const msgMap = {foo: [new i18n.Text('<p>bar</p>', null !)]};
+      const tb = new TranslationBundle(msgMap, null, (_) => 'foo');
+      const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+      const nodes = tb.get(msg);
+      expect(nodes.length).toEqual(1);
+      const textNode: html.Text = nodes[0] as any;
+      expect(textNode instanceof html.Text).toEqual(true);
+      expect(textNode.value).toBe('<p>bar</p>');
+    });
+
+    it('should translate a message with placeholder', () => {
+      const msgMap = {
+        foo: [
+          new i18n.Text('bar', null !),
+          new i18n.Placeholder('', 'ph1', null !),
+        ]
+      };
+      const phMap = {
+        ph1: '*phContent*',
+      };
+      const tb = new TranslationBundle(msgMap, null, (_) => 'foo');
+      const msg = new i18n.Message([srcNode], phMap, {}, 'm', 'd', 'i');
+      expect(serializeNodes(tb.get(msg))).toEqual(['bar*phContent*']);
+    });
+
+    it('should translate a message with placeholder referencing messages', () => {
+      const msgMap = {
+        foo: [
+          new i18n.Text('--', null !),
+          new i18n.Placeholder('', 'ph1', null !),
+          new i18n.Text('++', null !),
+        ],
+        ref: [
+          new i18n.Text('*refMsg*', null !),
+        ],
+      };
+      const refMsg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+      const msg = new i18n.Message([srcNode], {}, {ph1: refMsg}, 'm', 'd', 'i');
+      let count = 0;
+      const digest = (_: any) => count++ ? 'ref' : 'foo';
+      const tb = new TranslationBundle(msgMap, null, digest);
+
+      expect(serializeNodes(tb.get(msg))).toEqual(['--*refMsg*++']);
+    });
+
+    it('should use the original message or throw when a translation is not found', () => {
+      const src =
+          `<some-tag>some text{{ some_expression }}</some-tag>{count, plural, =0 {no} few {a <b>few</b>}}`;
+      const messages = _extractMessages(`<div i18n>${src}</div>`);
+
+      const digest = (_: any) => `no matching id`;
+      // Empty message map -> use source messages in Ignore mode
+      let tb = new TranslationBundle({}, null, digest, null !, MissingTranslationStrategy.Ignore);
+      expect(serializeNodes(tb.get(messages[0])).join('')).toEqual(src);
+      // Empty message map -> use source messages in Warning mode
+      tb = new TranslationBundle({}, null, digest, null !, MissingTranslationStrategy.Warning);
+      expect(serializeNodes(tb.get(messages[0])).join('')).toEqual(src);
+      // Empty message map -> throw in Error mode
+      tb = new TranslationBundle({}, null, digest, null !, MissingTranslationStrategy.Error);
+      expect(() => serializeNodes(tb.get(messages[0])).join('')).toThrow();
+    });
+
+    describe('errors reporting', () => {
+      it('should report unknown placeholders', () => {
+        const msgMap = {
+          foo: [
+            new i18n.Text('bar', null !),
+            new i18n.Placeholder('', 'ph1', span),
+          ]
+        };
+        const tb = new TranslationBundle(msgMap, null, (_) => 'foo');
+        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+        expect(() => tb.get(msg)).toThrowError(/Unknown placeholder/);
+      });
+
+      it('should report missing translation', () => {
+        const tb =
+            new TranslationBundle({}, null, (_) => 'foo', null !, MissingTranslationStrategy.Error);
+        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+        expect(() => tb.get(msg)).toThrowError(/Missing translation for message "foo"/);
+      });
+
+      it('should report missing translation with MissingTranslationStrategy.Warning', () => {
+        const log: string[] = [];
+        const console = {
+          log: (msg: string) => { throw `unexpected`; },
+          warn: (msg: string) => log.push(msg),
+        };
+
+        const tb = new TranslationBundle(
+            {}, 'en', (_) => 'foo', null !, MissingTranslationStrategy.Warning, console);
+        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+
+        expect(() => tb.get(msg)).not.toThrowError();
+        expect(log.length).toEqual(1);
+        expect(log[0]).toMatch(/Missing translation for message "foo" for locale "en"/);
+      });
+
+      it('should not report missing translation with MissingTranslationStrategy.Ignore', () => {
+        const tb = new TranslationBundle(
+            {}, null, (_) => 'foo', null !, MissingTranslationStrategy.Ignore);
+        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+        expect(() => tb.get(msg)).not.toThrowError();
+      });
+
+      it('should report missing referenced message', () => {
+        const msgMap = {
+          foo: [new i18n.Placeholder('', 'ph1', span)],
+        };
+        const refMsg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+        const msg = new i18n.Message([srcNode], {}, {ph1: refMsg}, 'm', 'd', 'i');
+        let count = 0;
+        const digest = (_: any) => count++ ? 'ref' : 'foo';
+        const tb =
+            new TranslationBundle(msgMap, null, digest, null !, MissingTranslationStrategy.Error);
+        expect(() => tb.get(msg)).toThrowError(/Missing translation for message "ref"/);
+      });
+
+      it('should report invalid translated html', () => {
+        const msgMap = {
+          foo: [
+            new i18n.Text('text', null !),
+            new i18n.Placeholder('', 'ph1', null !),
+          ]
+        };
+        const phMap = {
+          ph1: '</b>',
+        };
+        const tb = new TranslationBundle(msgMap, null, (_) => 'foo');
+        const msg = new i18n.Message([srcNode], phMap, {}, 'm', 'd', 'i');
+        expect(() => tb.get(msg)).toThrowError(/Unexpected closing tag "b"/);
+      });
+    });
+  });
+}
diff --git a/packages/compiler/test/integration_spec.ts b/packages/compiler/test/integration_spec.ts
new file mode 100644
index 000000000000..da7f870600df
--- /dev/null
+++ b/packages/compiler/test/integration_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 {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 {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('integration tests', () => {
+    let fixture: ComponentFixture<TestComponent>;
+
+    describe('directives', () => {
+      it('should support dotted selectors', async(() => {
+           @Directive({selector: '[dot.name]'})
+           class MyDir {
+             // TODO(issue/24571): remove '!'.
+             @Input('dot.name') value !: string;
+           }
+
+           TestBed.configureTestingModule({
+             declarations: [
+               MyDir,
+               TestComponent,
+             ],
+           });
+
+           const template = `<div [dot.name]="'foo'"></div>`;
+           fixture = createTestComponent(template);
+           fixture.detectChanges();
+           const myDir = fixture.debugElement.query(By.directive(MyDir)).injector.get(MyDir);
+           expect(myDir.value).toEqual('foo');
+         }));
+    });
+
+    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');
+           }));
+      }
+    });
+  });
+}
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+}
+
+function createTestComponent(template: string): ComponentFixture<TestComponent> {
+  return TestBed.overrideComponent(TestComponent, {set: {template: template}})
+      .createComponent(TestComponent);
+}
diff --git a/packages/compiler/test/metadata_resolver_fixture.ts b/packages/compiler/test/metadata_resolver_fixture.ts
new file mode 100644
index 000000000000..cc8f2a7bd01e
--- /dev/null
+++ b/packages/compiler/test/metadata_resolver_fixture.ts
@@ -0,0 +1,13 @@
+/**
+ * @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';
+
+@Component({styles: <any>('foo'), template: ''})
+export class MalformedStylesComponent {
+}
diff --git a/packages/compiler/test/metadata_resolver_spec.ts b/packages/compiler/test/metadata_resolver_spec.ts
new file mode 100644
index 000000000000..2ef89defb0be
--- /dev/null
+++ b/packages/compiler/test/metadata_resolver_spec.ts
@@ -0,0 +1,524 @@
+/**
+ * @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 {LIFECYCLE_HOOKS_VALUES, LifecycleHooks} from '@angular/compiler/src/lifecycle_reflector';
+import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, Component, Directive, DoCheck, Injectable, NgModule, OnChanges, OnDestroy, OnInit, Pipe, SimpleChanges, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
+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';
+import {TEST_COMPILER_PROVIDERS} from './test_bindings';
+
+{
+  describe('CompileMetadataResolver', () => {
+    beforeEach(() => { TestBed.configureCompiler({providers: TEST_COMPILER_PROVIDERS}); });
+
+    it('should throw on the getDirectiveMetadata/getPipeMetadata methods if the module has not been loaded yet',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({})
+         class SomeModule {
+         }
+
+         @Pipe({name: 'pipe'})
+         class SomePipe {
+         }
+
+         expect(() => resolver.getDirectiveMetadata(ComponentWithEverythingInline))
+             .toThrowError(/Illegal state/);
+         expect(() => resolver.getPipeMetadata(SomePipe)).toThrowError(/Illegal state/);
+       }));
+
+    it('should read metadata in sync for components with inline resources',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({declarations: [ComponentWithEverythingInline]})
+         class SomeModule {
+         }
+         resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true);
+
+         const meta = resolver.getDirectiveMetadata(ComponentWithEverythingInline);
+         expect(meta.selector).toEqual('someSelector');
+         expect(meta.exportAs).toEqual('someExportAs');
+         expect(meta.isComponent).toBe(true);
+         expect(meta.type.reference).toBe(ComponentWithEverythingInline);
+         expect(identifierName(meta.type)).toEqual(stringify(ComponentWithEverythingInline));
+         expect(meta.type.lifecycleHooks).toEqual(LIFECYCLE_HOOKS_VALUES);
+         expect(meta.changeDetection).toBe(ChangeDetectionStrategy.Default);
+         expect(meta.inputs).toEqual({'someProp': 'someProp'});
+         expect(meta.outputs).toEqual({'someEvent': 'someEvent'});
+         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(['{{', '}}']);
+       }));
+
+    it('should throw when reading metadata for component with external resources when sync=true is passed',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({declarations: [ComponentWithExternalResources]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(
+                 `Can't compile synchronously as ${stringify(ComponentWithExternalResources)} is still being loaded!`);
+       }));
+
+    it('should read external metadata when sync=false',
+       async(inject(
+           [CompileMetadataResolver, ResourceLoader],
+           (resolver: CompileMetadataResolver, resourceLoader: MockResourceLoader) => {
+             @NgModule({declarations: [ComponentWithExternalResources]})
+             class SomeModule {
+             }
+
+             resourceLoader.when('someTemplateUrl', 'someTemplate');
+             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');
+             });
+             resourceLoader.flush();
+           })));
+
+    it('should use `./` as base url for templates during runtime compilation if no moduleId is given',
+       async(inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @Component({selector: 'someComponent', templateUrl: 'someUrl'})
+         class ComponentWithoutModuleId {
+         }
+
+
+         @NgModule({declarations: [ComponentWithoutModuleId]})
+         class SomeModule {
+         }
+
+         resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, false).then(() => {
+           const value: string =
+               resolver.getDirectiveMetadata(ComponentWithoutModuleId).template !.templateUrl !;
+           const expectedEndValue = './someUrl';
+           expect(value.endsWith(expectedEndValue)).toBe(true);
+         });
+       })));
+
+    it('should throw when the moduleId is not a string',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({declarations: [ComponentWithInvalidModuleId]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(
+                 `moduleId should be a string in "ComponentWithInvalidModuleId". 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.`);
+       }));
+
+
+    it('should throw when metadata is incorrectly typed',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({declarations: [MalformedStylesComponent]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(`Expected 'styles' to be an array of strings.`);
+       }));
+
+    it('should throw with descriptive error message when a module imports itself',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({imports: [SomeModule]})
+         class SomeModule {
+         }
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(`'SomeModule' module can't import itself`);
+       }));
+
+    it('should throw with descriptive error message when provider token can not be resolved',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({declarations: [MyBrokenComp1]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(`Can't resolve all parameters for MyBrokenComp1: (?).`);
+       }));
+
+    it('should throw with descriptive error message when a directive is passed to imports',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({imports: [ComponentWithoutModuleId]})
+         class ModuleWithImportedComponent {
+         }
+         expect(
+             () => resolver.loadNgModuleDirectiveAndPipeMetadata(ModuleWithImportedComponent, true))
+             .toThrowError(
+                 `Unexpected directive 'ComponentWithoutModuleId' imported by the module 'ModuleWithImportedComponent'. Please add a @NgModule annotation.`);
+       }));
+
+    it('should throw with descriptive error message when a pipe is passed to imports',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @Pipe({name: 'somePipe'})
+         class SomePipe {
+         }
+         @NgModule({imports: [SomePipe]})
+         class ModuleWithImportedPipe {
+         }
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(ModuleWithImportedPipe, true))
+             .toThrowError(
+                 `Unexpected pipe 'SomePipe' imported by the module 'ModuleWithImportedPipe'. Please add a @NgModule annotation.`);
+       }));
+
+    it('should throw with descriptive error message when a module is passed to declarations',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({})
+         class SomeModule {
+         }
+         @NgModule({declarations: [SomeModule]})
+         class ModuleWithDeclaredModule {
+         }
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(ModuleWithDeclaredModule, true))
+             .toThrowError(
+                 `Unexpected module 'SomeModule' declared by the module 'ModuleWithDeclaredModule'. Please add a @Pipe/@Directive/@Component annotation.`);
+       }));
+
+    it('should throw with descriptive error message when a declared pipe is missing annotation',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         class SomePipe {}
+         @NgModule({declarations: [SomePipe]})
+         class ModuleWithDeclaredModule {
+         }
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(ModuleWithDeclaredModule, true))
+             .toThrowError(
+                 `Unexpected value 'SomePipe' declared by the module 'ModuleWithDeclaredModule'. Please add a @Pipe/@Directive/@Component annotation.`);
+       }));
+
+    it('should throw with descriptive error message when an imported module is missing annotation',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         class SomeModule {}
+         @NgModule({imports: [SomeModule]})
+         class ModuleWithImportedModule {
+         }
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(ModuleWithImportedModule, true))
+             .toThrowError(
+                 `Unexpected value 'SomeModule' imported by the module 'ModuleWithImportedModule'. Please add a @NgModule annotation.`);
+       }));
+
+    it('should throw with descriptive error message when null is passed to declarations',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({declarations: [null !]})
+         class ModuleWithNullDeclared {
+         }
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(ModuleWithNullDeclared, true))
+             .toThrowError(
+                 `Unexpected value 'null' declared by the module 'ModuleWithNullDeclared'`);
+       }));
+
+    it('should throw with descriptive error message when null is passed to imports',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({imports: [null !]})
+         class ModuleWithNullImported {
+         }
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(ModuleWithNullImported, true))
+             .toThrowError(
+                 `Unexpected value 'null' imported by the module 'ModuleWithNullImported'`);
+       }));
+
+
+    it('should throw with descriptive error message when a param token of a dependency is undefined',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({declarations: [MyBrokenComp2]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(`Can't resolve all parameters for NonAnnotatedService: (?).`);
+       }));
+
+    it('should throw with descriptive error message when encounter invalid provider',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({providers: [{provide: SimpleService, useClass: undefined !}]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(/Invalid provider for SimpleService. useClass cannot be undefined./);
+       }));
+
+    it('should throw with descriptive error message when provider is undefined',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({providers: [undefined !]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(/Encountered undefined provider!/);
+       }));
+
+    it('should throw with descriptive error message when one of providers is not present',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({declarations: [MyBrokenComp3]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(
+                 `Invalid providers for "MyBrokenComp3" - only instances of Provider and Type are allowed, got: [SimpleService, ?null?, ...]`);
+       }));
+
+    it('should throw with descriptive error message when one of viewProviders is not present',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({declarations: [MyBrokenComp4]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(
+                 `Invalid viewProviders for "MyBrokenComp4" - only instances of Provider and Type are allowed, got: [?null?, ...]`);
+       }));
+
+    it('should throw with descriptive error message when null or undefined is passed to module bootstrap',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({bootstrap: [null !]})
+         class ModuleWithNullBootstrap {
+         }
+         @NgModule({bootstrap: [undefined !]})
+         class ModuleWithUndefinedBootstrap {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(ModuleWithNullBootstrap, true))
+             .toThrowError(
+                 `Unexpected value 'null' used in the bootstrap property of module 'ModuleWithNullBootstrap'`);
+         expect(
+             () =>
+                 resolver.loadNgModuleDirectiveAndPipeMetadata(ModuleWithUndefinedBootstrap, true))
+             .toThrowError(
+                 `Unexpected value 'undefined' used in the bootstrap property of module 'ModuleWithUndefinedBootstrap'`);
+       }));
+
+    it('should throw an error when the interpolation config has invalid symbols',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({declarations: [ComponentWithInvalidInterpolation1]})
+         class Module1 {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(Module1, true))
+             .toThrowError(`[' ', ' '] contains unusable interpolation symbol.`);
+
+         @NgModule({declarations: [ComponentWithInvalidInterpolation2]})
+         class Module2 {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(Module2, true))
+             .toThrowError(`['{', '}'] contains unusable interpolation symbol.`);
+
+         @NgModule({declarations: [ComponentWithInvalidInterpolation3]})
+         class Module3 {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(Module3, true))
+             .toThrowError(`['<%', '%>'] contains unusable interpolation symbol.`);
+
+         @NgModule({declarations: [ComponentWithInvalidInterpolation4]})
+         class Module4 {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(Module4, true))
+             .toThrowError(`['&#', '}}'] contains unusable interpolation symbol.`);
+
+         @NgModule({declarations: [ComponentWithInvalidInterpolation5]})
+         class Module5 {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(Module5, true))
+             .toThrowError(`['&lbrace;', '}}'] contains unusable interpolation symbol.`);
+       }));
+
+    it(`should throw an error when a Pipe is added to module's bootstrap list`,
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+
+         @Pipe({name: 'pipe'})
+         class MyPipe {
+         }
+
+         @NgModule({declarations: [MyPipe], bootstrap: [MyPipe]})
+         class ModuleWithPipeInBootstrap {
+         }
+
+         expect(() => resolver.getNgModuleMetadata(ModuleWithPipeInBootstrap))
+             .toThrowError(`MyPipe cannot be used as an entry component.`);
+       }));
+
+    it(`should throw an error when a Service is added to module's bootstrap list`,
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+
+         @NgModule({declarations: [], bootstrap: [SimpleService]})
+         class ModuleWithServiceInBootstrap {
+         }
+
+         expect(() => resolver.getNgModuleMetadata(ModuleWithServiceInBootstrap))
+             .toThrowError(`SimpleService cannot be used as an entry component.`);
+       }));
+
+    it(`should throw an error when a Directive is added to module's bootstrap list`,
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+
+         @Directive({selector: 'directive'})
+         class MyDirective {
+         }
+
+         @NgModule({declarations: [], bootstrap: [MyDirective]})
+         class ModuleWithDirectiveInBootstrap {
+         }
+
+         expect(() => resolver.getNgModuleMetadata(ModuleWithDirectiveInBootstrap))
+             .toThrowError(`MyDirective cannot be used as an entry component.`);
+       }));
+
+    it(`should not throw an error when a Component is added to module's bootstrap list`,
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+
+         @Component({template: ''})
+         class MyComp {
+         }
+
+         @NgModule({declarations: [MyComp], bootstrap: [MyComp]})
+         class ModuleWithComponentInBootstrap {
+         }
+
+         expect(() => resolver.getNgModuleMetadata(ModuleWithComponentInBootstrap)).not.toThrow();
+       }));
+
+    // #20049
+    it('should throw a reasonable message when an invalid import is given',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({imports: [{ngModule: true as any}]})
+         class InvalidModule {
+         }
+
+         expect(() => { resolver.getNgModuleMetadata(InvalidModule); })
+             .toThrowError(
+                 `Unexpected value '[object Object]' imported by the module 'InvalidModule'. Please add a @NgModule annotation.`);
+       }));
+  });
+
+  it('should dedupe declarations in NgModule',
+     inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+
+       @Component({template: ''})
+       class MyComp {
+       }
+
+       @NgModule({declarations: [MyComp, MyComp]})
+       class MyModule {
+       }
+
+       const modMeta = resolver.getNgModuleMetadata(MyModule) !;
+       expect(modMeta.declaredDirectives.length).toBe(1);
+       expect(modMeta.declaredDirectives[0].reference).toBe(MyComp);
+     }));
+}
+
+@Component({selector: 'someComponent', template: ''})
+class ComponentWithoutModuleId {
+}
+
+@Component({selector: 'someComponent', template: '', moduleId: <any>0})
+class ComponentWithInvalidModuleId {
+}
+
+@Component({
+  selector: 'someSelector',
+  templateUrl: 'someTemplateUrl',
+  styleUrls: ['someStyleUrl'],
+})
+class ComponentWithExternalResources {
+}
+
+@Component({
+  selector: 'someSelector',
+  inputs: ['someProp'],
+  outputs: ['someEvent'],
+  host: {
+    '[someHostProp]': 'someHostPropExpr',
+    '(someHostListener)': 'someHostListenerExpr',
+    'someHostAttr': 'someHostAttrValue'
+  },
+  exportAs: 'someExportAs',
+  moduleId: 'someModuleId',
+  changeDetection: ChangeDetectionStrategy.Default,
+  template: 'someTemplate',
+  encapsulation: ViewEncapsulation.Emulated,
+  styles: ['someStyle'],
+  interpolation: ['{{', '}}']
+})
+class ComponentWithEverythingInline implements OnChanges,
+    OnInit, DoCheck, OnDestroy, AfterContentInit, AfterContentChecked, AfterViewInit,
+    AfterViewChecked {
+  ngOnChanges(changes: SimpleChanges): void {}
+  ngOnInit(): void {}
+  ngDoCheck(): void {}
+  ngOnDestroy(): void {}
+  ngAfterContentInit(): void {}
+  ngAfterContentChecked(): void {}
+  ngAfterViewInit(): void {}
+  ngAfterViewChecked(): void {}
+}
+
+@Component({selector: 'my-broken-comp', template: ''})
+class MyBrokenComp1 {
+  constructor(public dependency: any) {}
+}
+
+class NonAnnotatedService {
+  constructor(dep: any) {}
+}
+
+@Component({selector: 'my-broken-comp', template: '', providers: [NonAnnotatedService]})
+class MyBrokenComp2 {
+  constructor(dependency: NonAnnotatedService) {}
+}
+
+@Injectable()
+class SimpleService {
+}
+
+@Component({selector: 'my-broken-comp', template: '', providers: [SimpleService, null !, [null]]})
+class MyBrokenComp3 {
+}
+
+@Component(
+    {selector: 'my-broken-comp', template: '', viewProviders: [null !, SimpleService, [null]]})
+class MyBrokenComp4 {
+}
+
+@Component({selector: 'someSelector', template: '', interpolation: [' ', ' ']})
+class ComponentWithInvalidInterpolation1 {
+}
+
+@Component({selector: 'someSelector', template: '', interpolation: ['{', '}']})
+class ComponentWithInvalidInterpolation2 {
+}
+
+@Component({selector: 'someSelector', template: '', interpolation: ['<%', '%>']})
+class ComponentWithInvalidInterpolation3 {
+}
+
+@Component({selector: 'someSelector', template: '', interpolation: ['&#', '}}']})
+class ComponentWithInvalidInterpolation4 {
+}
+
+@Component({selector: 'someSelector', template: '', interpolation: ['&lbrace;', '}}']})
+class ComponentWithInvalidInterpolation5 {
+}
diff --git a/packages/compiler/test/ml_parser/ast_serializer_spec.ts b/packages/compiler/test/ml_parser/ast_serializer_spec.ts
new file mode 100644
index 000000000000..2c0fb9870040
--- /dev/null
+++ b/packages/compiler/test/ml_parser/ast_serializer_spec.ts
@@ -0,0 +1,100 @@
+/**
+ * @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 html from '@angular/compiler/src/ml_parser/ast';
+import {HtmlParser} from '@angular/compiler/src/ml_parser/html_parser';
+import {getHtmlTagDefinition} from '@angular/compiler/src/ml_parser/html_tags';
+
+{
+  describe('Node serializer', () => {
+    let parser: HtmlParser;
+
+    beforeEach(() => { parser = new HtmlParser(); });
+
+    it('should support element', () => {
+      const html = '<p></p>';
+      const ast = parser.parse(html, 'url');
+      expect(serializeNodes(ast.rootNodes)).toEqual([html]);
+    });
+
+    it('should support attributes', () => {
+      const html = '<p k="value"></p>';
+      const ast = parser.parse(html, 'url');
+      expect(serializeNodes(ast.rootNodes)).toEqual([html]);
+    });
+
+    it('should support text', () => {
+      const html = 'some text';
+      const ast = parser.parse(html, 'url');
+      expect(serializeNodes(ast.rootNodes)).toEqual([html]);
+    });
+
+    it('should support expansion', () => {
+      const html = '{number, plural, =0 {none} =1 {one} other {many}}';
+      const ast = parser.parse(html, 'url', true);
+      expect(serializeNodes(ast.rootNodes)).toEqual([html]);
+    });
+
+    it('should support comment', () => {
+      const html = '<!--comment-->';
+      const ast = parser.parse(html, 'url', true);
+      expect(serializeNodes(ast.rootNodes)).toEqual([html]);
+    });
+
+    it('should support nesting', () => {
+      const html = `<div i18n="meaning|desc">
+        <span>{{ interpolation }}</span>
+        <!--comment-->
+        <p expansion="true">
+          {number, plural, =0 {{sex, select, other {<b>?</b>}}}}
+        </p>                            
+      </div>`;
+      const ast = parser.parse(html, 'url', true);
+      expect(serializeNodes(ast.rootNodes)).toEqual([html]);
+    });
+  });
+}
+
+class _SerializerVisitor implements html.Visitor {
+  visitElement(element: html.Element, context: any): any {
+    if (getHtmlTagDefinition(element.name).isVoid) {
+      return `<${element.name}${this._visitAll(element.attrs, ' ')}/>`;
+    }
+
+    return `<${element.name}${this._visitAll(element.attrs, ' ')}>${this._visitAll(element.children)}</${element.name}>`;
+  }
+
+  visitAttribute(attribute: html.Attribute, context: any): any {
+    return `${attribute.name}="${attribute.value}"`;
+  }
+
+  visitText(text: html.Text, context: any): any { return text.value; }
+
+  visitComment(comment: html.Comment, context: any): any { return `<!--${comment.value}-->`; }
+
+  visitExpansion(expansion: html.Expansion, context: any): any {
+    return `{${expansion.switchValue}, ${expansion.type},${this._visitAll(expansion.cases)}}`;
+  }
+
+  visitExpansionCase(expansionCase: html.ExpansionCase, context: any): any {
+    return ` ${expansionCase.value} {${this._visitAll(expansionCase.expression)}}`;
+  }
+
+  private _visitAll(nodes: html.Node[], join: string = ''): string {
+    if (nodes.length == 0) {
+      return '';
+    }
+    return join + nodes.map(a => a.visit(this, null)).join(join);
+  }
+}
+
+const serializerVisitor = new _SerializerVisitor();
+
+export function serializeNodes(nodes: html.Node[]): string[] {
+  return nodes.map(node => node.visit(serializerVisitor, null));
+}
diff --git a/packages/compiler/test/ml_parser/ast_spec_utils.ts b/packages/compiler/test/ml_parser/ast_spec_utils.ts
new file mode 100644
index 000000000000..4432c2eb98ec
--- /dev/null
+++ b/packages/compiler/test/ml_parser/ast_spec_utils.ts
@@ -0,0 +1,84 @@
+/**
+ * @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 html from '../../src/ml_parser/ast';
+import {ParseTreeResult} from '../../src/ml_parser/html_parser';
+import {ParseLocation} from '../../src/parse_util';
+
+export function humanizeDom(parseResult: ParseTreeResult, addSourceSpan: boolean = false): any[] {
+  if (parseResult.errors.length > 0) {
+    const errorString = parseResult.errors.join('\n');
+    throw new Error(`Unexpected parse errors:\n${errorString}`);
+  }
+
+  return humanizeNodes(parseResult.rootNodes, addSourceSpan);
+}
+
+export function humanizeDomSourceSpans(parseResult: ParseTreeResult): any[] {
+  return humanizeDom(parseResult, true);
+}
+
+export function humanizeNodes(nodes: html.Node[], addSourceSpan: boolean = false): any[] {
+  const humanizer = new _Humanizer(addSourceSpan);
+  html.visitAll(humanizer, nodes);
+  return humanizer.result;
+}
+
+export function humanizeLineColumn(location: ParseLocation): string {
+  return `${location.line}:${location.col}`;
+}
+
+class _Humanizer implements html.Visitor {
+  result: any[] = [];
+  elDepth: number = 0;
+
+  constructor(private includeSourceSpan: boolean) {}
+
+  visitElement(element: html.Element, context: any): any {
+    const res = this._appendContext(element, [html.Element, element.name, this.elDepth++]);
+    this.result.push(res);
+    html.visitAll(this, element.attrs);
+    html.visitAll(this, element.children);
+    this.elDepth--;
+  }
+
+  visitAttribute(attribute: html.Attribute, context: any): any {
+    const res = this._appendContext(attribute, [html.Attribute, attribute.name, attribute.value]);
+    this.result.push(res);
+  }
+
+  visitText(text: html.Text, context: any): any {
+    const res = this._appendContext(text, [html.Text, text.value, this.elDepth]);
+    this.result.push(res);
+  }
+
+  visitComment(comment: html.Comment, context: any): any {
+    const res = this._appendContext(comment, [html.Comment, comment.value, this.elDepth]);
+    this.result.push(res);
+  }
+
+  visitExpansion(expansion: html.Expansion, context: any): any {
+    const res = this._appendContext(
+        expansion, [html.Expansion, expansion.switchValue, expansion.type, this.elDepth++]);
+    this.result.push(res);
+    html.visitAll(this, expansion.cases);
+    this.elDepth--;
+  }
+
+  visitExpansionCase(expansionCase: html.ExpansionCase, context: any): any {
+    const res =
+        this._appendContext(expansionCase, [html.ExpansionCase, expansionCase.value, this.elDepth]);
+    this.result.push(res);
+  }
+
+  private _appendContext(ast: html.Node, input: any[]): any[] {
+    if (!this.includeSourceSpan) return input;
+    input.push(ast.sourceSpan !.toString());
+    return input;
+  }
+}
diff --git a/packages/compiler/test/ml_parser/html_parser_spec.ts b/packages/compiler/test/ml_parser/html_parser_spec.ts
new file mode 100644
index 000000000000..23bbc0168c64
--- /dev/null
+++ b/packages/compiler/test/ml_parser/html_parser_spec.ts
@@ -0,0 +1,564 @@
+/**
+ * @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 html from '../../src/ml_parser/ast';
+import {HtmlParser, ParseTreeResult, TreeError} from '../../src/ml_parser/html_parser';
+import {TokenType} from '../../src/ml_parser/lexer';
+import {ParseError} from '../../src/parse_util';
+
+import {humanizeDom, humanizeDomSourceSpans, humanizeLineColumn} from './ast_spec_utils';
+
+{
+  describe('HtmlParser', () => {
+    let parser: HtmlParser;
+
+    beforeEach(() => { parser = new HtmlParser(); });
+
+    describe('parse', () => {
+      describe('text nodes', () => {
+        it('should parse root level text nodes', () => {
+          expect(humanizeDom(parser.parse('a', 'TestComp'))).toEqual([[html.Text, 'a', 0]]);
+        });
+
+        it('should parse text nodes inside regular elements', () => {
+          expect(humanizeDom(parser.parse('<div>a</div>', 'TestComp'))).toEqual([
+            [html.Element, 'div', 0], [html.Text, 'a', 1]
+          ]);
+        });
+
+        it('should parse text nodes inside <ng-template> elements', () => {
+          expect(humanizeDom(parser.parse('<ng-template>a</ng-template>', 'TestComp'))).toEqual([
+            [html.Element, 'ng-template', 0], [html.Text, 'a', 1]
+          ]);
+        });
+
+        it('should parse CDATA', () => {
+          expect(humanizeDom(parser.parse('<![CDATA[text]]>', 'TestComp'))).toEqual([
+            [html.Text, 'text', 0]
+          ]);
+        });
+      });
+
+      describe('elements', () => {
+        it('should parse root level elements', () => {
+          expect(humanizeDom(parser.parse('<div></div>', 'TestComp'))).toEqual([
+            [html.Element, 'div', 0]
+          ]);
+        });
+
+        it('should parse elements inside of regular elements', () => {
+          expect(humanizeDom(parser.parse('<div><span></span></div>', 'TestComp'))).toEqual([
+            [html.Element, 'div', 0], [html.Element, 'span', 1]
+          ]);
+        });
+
+        it('should parse elements inside  <ng-template> elements', () => {
+          expect(humanizeDom(parser.parse('<ng-template><span></span></ng-template>', 'TestComp')))
+              .toEqual([[html.Element, 'ng-template', 0], [html.Element, 'span', 1]]);
+        });
+
+        it('should support void elements', () => {
+          expect(humanizeDom(parser.parse('<link rel="author license" href="/about">', 'TestComp')))
+              .toEqual([
+                [html.Element, 'link', 0],
+                [html.Attribute, 'rel', 'author license'],
+                [html.Attribute, 'href', '/about'],
+              ]);
+        });
+
+        it('should not error on void elements from HTML5 spec',
+           () => {  // http://www.w3.org/TR/html-markup/syntax.html#syntax-elements without:
+             // <base> - it can be present in head only
+             // <meta> - it can be present in head only
+             // <command> - obsolete
+             // <keygen> - obsolete
+             ['<map><area></map>', '<div><br></div>', '<colgroup><col></colgroup>',
+              '<div><embed></div>', '<div><hr></div>', '<div><img></div>', '<div><input></div>',
+              '<object><param>/<object>', '<audio><source></audio>', '<audio><track></audio>',
+              '<p><wbr></p>',
+             ].forEach((html) => { expect(parser.parse(html, 'TestComp').errors).toEqual([]); });
+           });
+
+        it('should close void elements on text nodes', () => {
+          expect(humanizeDom(parser.parse('<p>before<br>after</p>', 'TestComp'))).toEqual([
+            [html.Element, 'p', 0],
+            [html.Text, 'before', 1],
+            [html.Element, 'br', 1],
+            [html.Text, 'after', 1],
+          ]);
+        });
+
+        it('should support optional end tags', () => {
+          expect(humanizeDom(parser.parse('<div><p>1<p>2</div>', 'TestComp'))).toEqual([
+            [html.Element, 'div', 0],
+            [html.Element, 'p', 1],
+            [html.Text, '1', 2],
+            [html.Element, 'p', 1],
+            [html.Text, '2', 2],
+          ]);
+        });
+
+        it('should support nested elements', () => {
+          expect(humanizeDom(parser.parse('<ul><li><ul><li></li></ul></li></ul>', 'TestComp')))
+              .toEqual([
+                [html.Element, 'ul', 0],
+                [html.Element, 'li', 1],
+                [html.Element, 'ul', 2],
+                [html.Element, 'li', 3],
+              ]);
+        });
+
+        it('should add the requiredParent', () => {
+          expect(
+              humanizeDom(parser.parse(
+                  '<table><thead><tr head></tr></thead><tr noparent></tr><tbody><tr body></tr></tbody><tfoot><tr foot></tr></tfoot></table>',
+                  'TestComp')))
+              .toEqual([
+                [html.Element, 'table', 0],
+                [html.Element, 'thead', 1],
+                [html.Element, 'tr', 2],
+                [html.Attribute, 'head', ''],
+                [html.Element, 'tbody', 1],
+                [html.Element, 'tr', 2],
+                [html.Attribute, 'noparent', ''],
+                [html.Element, 'tbody', 1],
+                [html.Element, 'tr', 2],
+                [html.Attribute, 'body', ''],
+                [html.Element, 'tfoot', 1],
+                [html.Element, 'tr', 2],
+                [html.Attribute, 'foot', ''],
+              ]);
+        });
+
+        it('should append the required parent considering ng-container', () => {
+          expect(humanizeDom(parser.parse(
+                     '<table><ng-container><tr></tr></ng-container></table>', 'TestComp')))
+              .toEqual([
+                [html.Element, 'table', 0],
+                [html.Element, 'tbody', 1],
+                [html.Element, 'ng-container', 2],
+                [html.Element, 'tr', 3],
+              ]);
+        });
+
+        it('should append the required parent considering top level ng-container', () => {
+          expect(humanizeDom(
+                     parser.parse('<ng-container><tr></tr></ng-container><p></p>', 'TestComp')))
+              .toEqual([
+                [html.Element, 'ng-container', 0],
+                [html.Element, 'tr', 1],
+                [html.Element, 'p', 0],
+              ]);
+        });
+
+        it('should special case ng-container when adding a required parent', () => {
+          expect(humanizeDom(parser.parse(
+                     '<table><thead><ng-container><tr></tr></ng-container></thead></table>',
+                     'TestComp')))
+              .toEqual([
+                [html.Element, 'table', 0],
+                [html.Element, 'thead', 1],
+                [html.Element, 'ng-container', 2],
+                [html.Element, 'tr', 3],
+              ]);
+        });
+
+        it('should not add the requiredParent when the parent is a <ng-template>', () => {
+          expect(humanizeDom(parser.parse('<ng-template><tr></tr></ng-template>', 'TestComp')))
+              .toEqual([
+                [html.Element, 'ng-template', 0],
+                [html.Element, 'tr', 1],
+              ]);
+        });
+
+        // https://github.com/angular/angular/issues/5967
+        it('should not add the requiredParent to a template root element', () => {
+          expect(humanizeDom(parser.parse('<tr></tr>', 'TestComp'))).toEqual([
+            [html.Element, 'tr', 0],
+          ]);
+        });
+
+        it('should support explicit namespace', () => {
+          expect(humanizeDom(parser.parse('<myns:div></myns:div>', 'TestComp'))).toEqual([
+            [html.Element, ':myns:div', 0]
+          ]);
+        });
+
+        it('should support implicit namespace', () => {
+          expect(humanizeDom(parser.parse('<svg></svg>', 'TestComp'))).toEqual([
+            [html.Element, ':svg:svg', 0]
+          ]);
+        });
+
+        it('should propagate the namespace', () => {
+          expect(humanizeDom(parser.parse('<myns:div><p></p></myns:div>', 'TestComp'))).toEqual([
+            [html.Element, ':myns:div', 0],
+            [html.Element, ':myns:p', 1],
+          ]);
+        });
+
+        it('should match closing tags case sensitive', () => {
+          const errors = parser.parse('<DiV><P></p></dIv>', 'TestComp').errors;
+          expect(errors.length).toEqual(2);
+          expect(humanizeErrors(errors)).toEqual([
+            [
+              'p',
+              'Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags',
+              '0:8'
+            ],
+            [
+              'dIv',
+              'Unexpected closing tag "dIv". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags',
+              '0:12'
+            ],
+          ]);
+        });
+
+        it('should support self closing void elements', () => {
+          expect(humanizeDom(parser.parse('<input />', 'TestComp'))).toEqual([
+            [html.Element, 'input', 0]
+          ]);
+        });
+
+        it('should support self closing foreign elements', () => {
+          expect(humanizeDom(parser.parse('<math />', 'TestComp'))).toEqual([
+            [html.Element, ':math:math', 0]
+          ]);
+        });
+
+        it('should ignore LF immediately after textarea, pre and listing', () => {
+          expect(humanizeDom(parser.parse(
+                     '<p>\n</p><textarea>\n</textarea><pre>\n\n</pre><listing>\n\n</listing>',
+                     'TestComp')))
+              .toEqual([
+                [html.Element, 'p', 0],
+                [html.Text, '\n', 1],
+                [html.Element, 'textarea', 0],
+                [html.Element, 'pre', 0],
+                [html.Text, '\n', 1],
+                [html.Element, 'listing', 0],
+                [html.Text, '\n', 1],
+              ]);
+        });
+
+      });
+
+      describe('attributes', () => {
+        it('should parse attributes on regular elements case sensitive', () => {
+          expect(humanizeDom(parser.parse('<div kEy="v" key2=v2></div>', 'TestComp'))).toEqual([
+            [html.Element, 'div', 0],
+            [html.Attribute, 'kEy', 'v'],
+            [html.Attribute, 'key2', 'v2'],
+          ]);
+        });
+
+        it('should parse attributes without values', () => {
+          expect(humanizeDom(parser.parse('<div k></div>', 'TestComp'))).toEqual([
+            [html.Element, 'div', 0],
+            [html.Attribute, 'k', ''],
+          ]);
+        });
+
+        it('should parse attributes on svg elements case sensitive', () => {
+          expect(humanizeDom(parser.parse('<svg viewBox="0"></svg>', 'TestComp'))).toEqual([
+            [html.Element, ':svg:svg', 0],
+            [html.Attribute, 'viewBox', '0'],
+          ]);
+        });
+
+        it('should parse attributes on <ng-template> elements', () => {
+          expect(humanizeDom(parser.parse('<ng-template k="v"></ng-template>', 'TestComp')))
+              .toEqual([
+                [html.Element, 'ng-template', 0],
+                [html.Attribute, 'k', 'v'],
+              ]);
+        });
+
+        it('should support namespace', () => {
+          expect(humanizeDom(parser.parse('<svg:use xlink:href="Port" />', 'TestComp'))).toEqual([
+            [html.Element, ':svg:use', 0],
+            [html.Attribute, ':xlink:href', 'Port'],
+          ]);
+        });
+      });
+
+      describe('comments', () => {
+        it('should preserve comments', () => {
+          expect(humanizeDom(parser.parse('<!-- comment --><div></div>', 'TestComp'))).toEqual([
+            [html.Comment, 'comment', 0],
+            [html.Element, 'div', 0],
+          ]);
+        });
+      });
+
+      describe('expansion forms', () => {
+        it('should parse out expansion forms', () => {
+          const parsed = parser.parse(
+              `<div>before{messages.length, plural, =0 {You have <b>no</b> messages} =1 {One {{message}}}}after</div>`,
+              'TestComp', true);
+
+          expect(humanizeDom(parsed)).toEqual([
+            [html.Element, 'div', 0],
+            [html.Text, 'before', 1],
+            [html.Expansion, 'messages.length', 'plural', 1],
+            [html.ExpansionCase, '=0', 2],
+            [html.ExpansionCase, '=1', 2],
+            [html.Text, 'after', 1],
+          ]);
+          const cases = (<any>parsed.rootNodes[0]).children[1].cases;
+
+          expect(humanizeDom(new ParseTreeResult(cases[0].expression, []))).toEqual([
+            [html.Text, 'You have ', 0],
+            [html.Element, 'b', 0],
+            [html.Text, 'no', 1],
+            [html.Text, ' messages', 0],
+          ]);
+
+          expect(humanizeDom(new ParseTreeResult(cases[1].expression, [
+          ]))).toEqual([[html.Text, 'One {{message}}', 0]]);
+        });
+
+        it('should parse out expansion forms', () => {
+          const parsed =
+              parser.parse(`<div><span>{a, plural, =0 {b}}</span></div>`, 'TestComp', true);
+
+          expect(humanizeDom(parsed)).toEqual([
+            [html.Element, 'div', 0],
+            [html.Element, 'span', 1],
+            [html.Expansion, 'a', 'plural', 2],
+            [html.ExpansionCase, '=0', 3],
+          ]);
+        });
+
+        it('should parse out nested expansion forms', () => {
+          const parsed = parser.parse(
+              `{messages.length, plural, =0 { {p.gender, select, male {m}} }}`, 'TestComp', true);
+          expect(humanizeDom(parsed)).toEqual([
+            [html.Expansion, 'messages.length', 'plural', 0],
+            [html.ExpansionCase, '=0', 1],
+          ]);
+
+          const firstCase = (<any>parsed.rootNodes[0]).cases[0];
+
+          expect(humanizeDom(new ParseTreeResult(firstCase.expression, []))).toEqual([
+            [html.Expansion, 'p.gender', 'select', 0],
+            [html.ExpansionCase, 'male', 1],
+            [html.Text, ' ', 0],
+          ]);
+        });
+
+        it('should error when expansion form is not closed', () => {
+          const p = parser.parse(`{messages.length, plural, =0 {one}`, 'TestComp', true);
+          expect(humanizeErrors(p.errors)).toEqual([
+            [null, 'Invalid ICU message. Missing \'}\'.', '0:34']
+          ]);
+        });
+
+        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([
+            [null, 'Invalid ICU message. Missing \'}\'.', '0:29']
+          ]);
+        });
+
+        it('should error when invalid html in the case', () => {
+          const p = parser.parse(`{messages.length, plural, =0 {<b/>}`, 'TestComp', true);
+          expect(humanizeErrors(p.errors)).toEqual([
+            ['b', 'Only void and foreign elements can be self closed "b"', '0:30']
+          ]);
+        });
+      });
+
+      describe('source spans', () => {
+        it('should store the location', () => {
+          expect(humanizeDomSourceSpans(parser.parse(
+                     '<div [prop]="v1" (e)="do()" attr="v2" noValue>\na\n</div>', 'TestComp')))
+              .toEqual([
+                [html.Element, 'div', 0, '<div [prop]="v1" (e)="do()" attr="v2" noValue>'],
+                [html.Attribute, '[prop]', 'v1', '[prop]="v1"'],
+                [html.Attribute, '(e)', 'do()', '(e)="do()"'],
+                [html.Attribute, 'attr', 'v2', 'attr="v2"'],
+                [html.Attribute, 'noValue', '', 'noValue'],
+                [html.Text, '\na\n', 1, '\na\n'],
+              ]);
+        });
+
+        it('should set the start and end source spans', () => {
+          const node = <html.Element>parser.parse('<div>a</div>', 'TestComp').rootNodes[0];
+
+          expect(node.startSourceSpan !.start.offset).toEqual(0);
+          expect(node.startSourceSpan !.end.offset).toEqual(5);
+
+          expect(node.endSourceSpan !.start.offset).toEqual(6);
+          expect(node.endSourceSpan !.end.offset).toEqual(12);
+        });
+
+        it('should support expansion form', () => {
+          expect(humanizeDomSourceSpans(
+                     parser.parse('<div>{count, plural, =0 {msg}}</div>', 'TestComp', true)))
+              .toEqual([
+                [html.Element, 'div', 0, '<div>'],
+                [html.Expansion, 'count', 'plural', 1, '{count, plural, =0 {msg}}'],
+                [html.ExpansionCase, '=0', 2, '=0 {msg}'],
+              ]);
+        });
+
+        it('should not report a value span for an attribute without a value', () => {
+          const ast = parser.parse('<div bar></div>', 'TestComp');
+          expect((ast.rootNodes[0] as html.Element).attrs[0].valueSpan).toBeUndefined();
+        });
+
+        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);
+          expect(attr.valueSpan !.end.offset).toEqual(13);
+        });
+      });
+
+      describe('visitor', () => {
+        it('should visit text nodes', () => {
+          const result = humanizeDom(parser.parse('text', 'TestComp'));
+          expect(result).toEqual([[html.Text, 'text', 0]]);
+        });
+
+        it('should visit element nodes', () => {
+          const result = humanizeDom(parser.parse('<div></div>', 'TestComp'));
+          expect(result).toEqual([[html.Element, 'div', 0]]);
+        });
+
+        it('should visit attribute nodes', () => {
+          const result = humanizeDom(parser.parse('<div id="foo"></div>', 'TestComp'));
+          expect(result).toContain([html.Attribute, 'id', 'foo']);
+        });
+
+        it('should visit all nodes', () => {
+          const result =
+              parser.parse('<div id="foo"><span id="bar">a</span><span>b</span></div>', 'TestComp');
+          const accumulator: html.Node[] = [];
+          const visitor = new class {
+            visit(node: html.Node, context: any) { accumulator.push(node); }
+            visitElement(element: html.Element, context: any): any {
+              html.visitAll(this, element.attrs);
+              html.visitAll(this, element.children);
+            }
+            visitAttribute(attribute: html.Attribute, context: any): any {}
+            visitText(text: html.Text, context: any): any {}
+            visitComment(comment: html.Comment, context: any): any {}
+            visitExpansion(expansion: html.Expansion, context: any): any {
+              html.visitAll(this, expansion.cases);
+            }
+            visitExpansionCase(expansionCase: html.ExpansionCase, context: any): any {}
+          };
+
+          html.visitAll(visitor, result.rootNodes);
+          expect(accumulator.map(n => n.constructor)).toEqual([
+            html.Element, html.Attribute, html.Element, html.Attribute, html.Text, html.Element,
+            html.Text
+          ]);
+        });
+
+        it('should skip typed visit if visit() returns a truthy value', () => {
+          const visitor = new class {
+            visit(node: html.Node, context: any) { return true; }
+            visitElement(element: html.Element, context: any): any { throw Error('Unexpected'); }
+            visitAttribute(attribute: html.Attribute, context: any): any {
+              throw Error('Unexpected');
+            }
+            visitText(text: html.Text, context: any): any { throw Error('Unexpected'); }
+            visitComment(comment: html.Comment, context: any): any { throw Error('Unexpected'); }
+            visitExpansion(expansion: html.Expansion, context: any): any {
+              throw Error('Unexpected');
+            }
+            visitExpansionCase(expansionCase: html.ExpansionCase, context: any): any {
+              throw Error('Unexpected');
+            }
+          };
+          const result = parser.parse('<div id="foo"></div><div id="bar"></div>', 'TestComp');
+          const traversal = html.visitAll(visitor, result.rootNodes);
+          expect(traversal).toEqual([true, true]);
+        });
+      });
+
+      describe('errors', () => {
+        it('should report unexpected closing tags', () => {
+          const errors = parser.parse('<div></p></div>', 'TestComp').errors;
+          expect(errors.length).toEqual(1);
+          expect(humanizeErrors(errors)).toEqual([[
+            'p',
+            'Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags',
+            '0:5'
+          ]]);
+        });
+
+        it('should report subsequent open tags without proper close tag', () => {
+          const errors = parser.parse('<div</div>', 'TestComp').errors;
+          expect(errors.length).toEqual(1);
+          expect(humanizeErrors(errors)).toEqual([[
+            'div',
+            'Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags',
+            '0:4'
+          ]]);
+        });
+
+        it('should report closing tag for void elements', () => {
+          const errors = parser.parse('<input></input>', 'TestComp').errors;
+          expect(errors.length).toEqual(1);
+          expect(humanizeErrors(errors)).toEqual([
+            ['input', 'Void elements do not have end tags "input"', '0:7']
+          ]);
+        });
+
+        it('should report self closing html element', () => {
+          const errors = parser.parse('<p />', 'TestComp').errors;
+          expect(errors.length).toEqual(1);
+          expect(humanizeErrors(errors)).toEqual([
+            ['p', 'Only void and foreign elements can be self closed "p"', '0:0']
+          ]);
+        });
+
+        it('should report self closing custom element', () => {
+          const errors = parser.parse('<my-cmp />', 'TestComp').errors;
+          expect(errors.length).toEqual(1);
+          expect(humanizeErrors(errors)).toEqual([
+            ['my-cmp', 'Only void and foreign elements can be self closed "my-cmp"', '0:0']
+          ]);
+        });
+
+        it('should also report lexer errors', () => {
+          const errors = parser.parse('<!-err--><div></p></div>', 'TestComp').errors;
+          expect(errors.length).toEqual(2);
+          expect(humanizeErrors(errors)).toEqual([
+            [TokenType.COMMENT_START, 'Unexpected character "e"', '0:3'],
+            [
+              'p',
+              'Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags',
+              '0:14'
+            ]
+          ]);
+        });
+      });
+    });
+  });
+}
+
+export function humanizeErrors(errors: ParseError[]): any[] {
+  return errors.map(e => {
+    if (e instanceof TreeError) {
+      // Parser errors
+      return [<any>e.elementName, e.msg, humanizeLineColumn(e.span.start)];
+    }
+    // Tokenizer errors
+    return [(<any>e).tokenType, e.msg, humanizeLineColumn(e.span.start)];
+  });
+}
diff --git a/packages/compiler/test/ml_parser/html_whitespaces_spec.ts b/packages/compiler/test/ml_parser/html_whitespaces_spec.ts
new file mode 100644
index 000000000000..8da58983537f
--- /dev/null
+++ b/packages/compiler/test/ml_parser/html_whitespaces_spec.ts
@@ -0,0 +1,128 @@
+/**
+ * @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 html from '../../src/ml_parser/ast';
+import {HtmlParser} from '../../src/ml_parser/html_parser';
+import {PRESERVE_WS_ATTR_NAME, removeWhitespaces} from '../../src/ml_parser/html_whitespaces';
+
+import {humanizeDom} from './ast_spec_utils';
+
+{
+  describe('removeWhitespaces', () => {
+
+    function parseAndRemoveWS(template: string): any[] {
+      return humanizeDom(removeWhitespaces(new HtmlParser().parse(template, 'TestComp')));
+    }
+
+    it('should remove blank text nodes', () => {
+      expect(parseAndRemoveWS(' ')).toEqual([]);
+      expect(parseAndRemoveWS('\n')).toEqual([]);
+      expect(parseAndRemoveWS('\t')).toEqual([]);
+      expect(parseAndRemoveWS('    \t    \n ')).toEqual([]);
+    });
+
+    it('should remove whitespaces (space, tab, new line) between elements', () => {
+      expect(parseAndRemoveWS('<br>  <br>\t<br>\n<br>')).toEqual([
+        [html.Element, 'br', 0],
+        [html.Element, 'br', 0],
+        [html.Element, 'br', 0],
+        [html.Element, 'br', 0],
+      ]);
+    });
+
+    it('should remove whitespaces from child text nodes', () => {
+      expect(parseAndRemoveWS('<div><span> </span></div>')).toEqual([
+        [html.Element, 'div', 0],
+        [html.Element, 'span', 1],
+      ]);
+    });
+
+    it('should remove whitespaces from the beginning and end of a template', () => {
+      expect(parseAndRemoveWS(` <br>\t`)).toEqual([
+        [html.Element, 'br', 0],
+      ]);
+    });
+
+    it('should convert &ngsp; to a space and preserve it', () => {
+      expect(parseAndRemoveWS('<div><span>foo</span>&ngsp;<span>bar</span></div>')).toEqual([
+        [html.Element, 'div', 0],
+        [html.Element, 'span', 1],
+        [html.Text, 'foo', 2],
+        [html.Text, ' ', 1],
+        [html.Element, 'span', 1],
+        [html.Text, 'bar', 2],
+      ]);
+    });
+
+    it('should replace multiple whitespaces with one space', () => {
+      expect(parseAndRemoveWS('\n\n\nfoo\t\t\t')).toEqual([[html.Text, ' foo ', 0]]);
+      expect(parseAndRemoveWS('   \n foo  \t ')).toEqual([[html.Text, ' foo ', 0]]);
+    });
+
+    it('should not replace &nbsp;', () => {
+      expect(parseAndRemoveWS('&nbsp;')).toEqual([[html.Text, '\u00a0', 0]]);
+    });
+
+    it('should not replace sequences of &nbsp;', () => {
+      expect(parseAndRemoveWS('&nbsp;&nbsp;foo&nbsp;&nbsp;')).toEqual([
+        [html.Text, '\u00a0\u00a0foo\u00a0\u00a0', 0]
+      ]);
+    });
+
+    it('should not replace single tab and newline with spaces', () => {
+      expect(parseAndRemoveWS('\nfoo')).toEqual([[html.Text, '\nfoo', 0]]);
+      expect(parseAndRemoveWS('\tfoo')).toEqual([[html.Text, '\tfoo', 0]]);
+    });
+
+    it('should preserve single whitespaces between interpolations', () => {
+      expect(parseAndRemoveWS(`{{fooExp}} {{barExp}}`)).toEqual([
+        [html.Text, '{{fooExp}} {{barExp}}', 0],
+      ]);
+      expect(parseAndRemoveWS(`{{fooExp}}\t{{barExp}}`)).toEqual([
+        [html.Text, '{{fooExp}}\t{{barExp}}', 0],
+      ]);
+      expect(parseAndRemoveWS(`{{fooExp}}\n{{barExp}}`)).toEqual([
+        [html.Text, '{{fooExp}}\n{{barExp}}', 0],
+      ]);
+    });
+
+    it('should preserve whitespaces around interpolations', () => {
+      expect(parseAndRemoveWS(` {{exp}} `)).toEqual([
+        [html.Text, ' {{exp}} ', 0],
+      ]);
+    });
+
+    it('should preserve whitespaces inside <pre> elements', () => {
+      expect(parseAndRemoveWS(`<pre><strong>foo</strong>\n<strong>bar</strong></pre>`)).toEqual([
+        [html.Element, 'pre', 0],
+        [html.Element, 'strong', 1],
+        [html.Text, 'foo', 2],
+        [html.Text, '\n', 1],
+        [html.Element, 'strong', 1],
+        [html.Text, 'bar', 2],
+      ]);
+    });
+
+    it('should skip whitespace trimming in <textarea>', () => {
+      expect(parseAndRemoveWS(`<textarea>foo\n\n  bar</textarea>`)).toEqual([
+        [html.Element, 'textarea', 0],
+        [html.Text, 'foo\n\n  bar', 1],
+      ]);
+    });
+
+    it(`should preserve whitespaces inside elements annotated with ${PRESERVE_WS_ATTR_NAME}`,
+       () => {
+         expect(parseAndRemoveWS(`<div ${PRESERVE_WS_ATTR_NAME}><img> <img></div>`)).toEqual([
+           [html.Element, 'div', 0],
+           [html.Element, 'img', 1],
+           [html.Text, ' ', 1],
+           [html.Element, 'img', 1],
+         ]);
+       });
+  });
+}
diff --git a/packages/compiler/test/ml_parser/icu_ast_expander_spec.ts b/packages/compiler/test/ml_parser/icu_ast_expander_spec.ts
new file mode 100644
index 000000000000..e74e1a4d259f
--- /dev/null
+++ b/packages/compiler/test/ml_parser/icu_ast_expander_spec.ts
@@ -0,0 +1,124 @@
+/**
+ * @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 html from '../../src/ml_parser/ast';
+import {HtmlParser} from '../../src/ml_parser/html_parser';
+import {ExpansionResult, expandNodes} from '../../src/ml_parser/icu_ast_expander';
+import {ParseError} from '../../src/parse_util';
+
+import {humanizeNodes} from './ast_spec_utils';
+
+{
+  describe('Expander', () => {
+    function expand(template: string): ExpansionResult {
+      const htmlParser = new HtmlParser();
+      const res = htmlParser.parse(template, 'url', true);
+      return expandNodes(res.rootNodes);
+    }
+
+    it('should handle the plural expansion form', () => {
+      const res = expand(`{messages.length, plural,=0 {zero<b>bold</b>}}`);
+
+      expect(humanizeNodes(res.nodes)).toEqual([
+        [html.Element, 'ng-container', 0],
+        [html.Attribute, '[ngPlural]', 'messages.length'],
+        [html.Element, 'ng-template', 1],
+        [html.Attribute, 'ngPluralCase', '=0'],
+        [html.Text, 'zero', 2],
+        [html.Element, 'b', 2],
+        [html.Text, 'bold', 3],
+      ]);
+    });
+
+    it('should handle nested expansion forms', () => {
+      const res = expand(`{messages.length, plural, =0 { {p.gender, select, male {m}} }}`);
+
+      expect(humanizeNodes(res.nodes)).toEqual([
+        [html.Element, 'ng-container', 0],
+        [html.Attribute, '[ngPlural]', 'messages.length'],
+        [html.Element, 'ng-template', 1],
+        [html.Attribute, 'ngPluralCase', '=0'],
+        [html.Element, 'ng-container', 2],
+        [html.Attribute, '[ngSwitch]', 'p.gender'],
+        [html.Element, 'ng-template', 3],
+        [html.Attribute, 'ngSwitchCase', 'male'],
+        [html.Text, 'm', 4],
+        [html.Text, ' ', 2],
+      ]);
+    });
+
+    it('should correctly set source code positions', () => {
+      const nodes = expand(`{messages.length, plural,=0 {<b>bold</b>}}`).nodes;
+
+      const container: html.Element = <html.Element>nodes[0];
+      expect(container.sourceSpan !.start.col).toEqual(0);
+      expect(container.sourceSpan !.end.col).toEqual(42);
+      expect(container.startSourceSpan !.start.col).toEqual(0);
+      expect(container.startSourceSpan !.end.col).toEqual(42);
+      expect(container.endSourceSpan !.start.col).toEqual(0);
+      expect(container.endSourceSpan !.end.col).toEqual(42);
+
+      const switchExp = container.attrs[0];
+      expect(switchExp.sourceSpan.start.col).toEqual(1);
+      expect(switchExp.sourceSpan.end.col).toEqual(16);
+
+      const template: html.Element = <html.Element>container.children[0];
+      expect(template.sourceSpan !.start.col).toEqual(25);
+      expect(template.sourceSpan !.end.col).toEqual(41);
+
+      const switchCheck = template.attrs[0];
+      expect(switchCheck.sourceSpan.start.col).toEqual(25);
+      expect(switchCheck.sourceSpan.end.col).toEqual(28);
+
+      const b: html.Element = <html.Element>template.children[0];
+      expect(b.sourceSpan !.start.col).toEqual(29);
+      expect(b.endSourceSpan !.end.col).toEqual(40);
+    });
+
+    it('should handle other special forms', () => {
+      const res = expand(`{person.gender, select, male {m} other {default}}`);
+
+      expect(humanizeNodes(res.nodes)).toEqual([
+        [html.Element, 'ng-container', 0],
+        [html.Attribute, '[ngSwitch]', 'person.gender'],
+        [html.Element, 'ng-template', 1],
+        [html.Attribute, 'ngSwitchCase', 'male'],
+        [html.Text, 'm', 2],
+        [html.Element, 'ng-template', 1],
+        [html.Attribute, 'ngSwitchDefault', ''],
+        [html.Text, 'default', 2],
+      ]);
+    });
+
+    it('should parse an expansion form as a tag single child', () => {
+      const res = expand(`<div><span>{a, b, =4 {c}}</span></div>`);
+
+      expect(humanizeNodes(res.nodes)).toEqual([
+        [html.Element, 'div', 0],
+        [html.Element, 'span', 1],
+        [html.Element, 'ng-container', 2],
+        [html.Attribute, '[ngSwitch]', 'a'],
+        [html.Element, 'ng-template', 3],
+        [html.Attribute, 'ngSwitchCase', '=4'],
+        [html.Text, 'c', 4],
+      ]);
+    });
+
+    describe('errors', () => {
+      it('should error on unknown plural cases', () => {
+        expect(humanizeErrors(expand('{n, plural, unknown {-}}').errors)).toEqual([
+          `Plural cases should be "=<number>" or one of zero, one, two, few, many, other`,
+        ]);
+      });
+    });
+  });
+}
+
+function humanizeErrors(errors: ParseError[]): string[] {
+  return errors.map(error => error.msg);
+}
diff --git a/packages/compiler/test/ml_parser/lexer_spec.ts b/packages/compiler/test/ml_parser/lexer_spec.ts
new file mode 100644
index 000000000000..f2fe62a1d594
--- /dev/null
+++ b/packages/compiler/test/ml_parser/lexer_spec.ts
@@ -0,0 +1,830 @@
+/**
+ * @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 {getHtmlTagDefinition} from '../../src/ml_parser/html_tags';
+import {InterpolationConfig} from '../../src/ml_parser/interpolation_config';
+import * as lex from '../../src/ml_parser/lexer';
+import {ParseLocation, ParseSourceFile, ParseSourceSpan} from '../../src/parse_util';
+
+{
+  describe('HtmlLexer', () => {
+    describe('line/column numbers', () => {
+      it('should work without newlines', () => {
+        expect(tokenizeAndHumanizeLineColumn('<t>a</t>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, '0:0'],
+          [lex.TokenType.TAG_OPEN_END, '0:2'],
+          [lex.TokenType.TEXT, '0:3'],
+          [lex.TokenType.TAG_CLOSE, '0:4'],
+          [lex.TokenType.EOF, '0:8'],
+        ]);
+      });
+
+      it('should work with one newline', () => {
+        expect(tokenizeAndHumanizeLineColumn('<t>\na</t>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, '0:0'],
+          [lex.TokenType.TAG_OPEN_END, '0:2'],
+          [lex.TokenType.TEXT, '0:3'],
+          [lex.TokenType.TAG_CLOSE, '1:1'],
+          [lex.TokenType.EOF, '1:5'],
+        ]);
+      });
+
+      it('should work with multiple newlines', () => {
+        expect(tokenizeAndHumanizeLineColumn('<t\n>\na</t>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, '0:0'],
+          [lex.TokenType.TAG_OPEN_END, '1:0'],
+          [lex.TokenType.TEXT, '1:1'],
+          [lex.TokenType.TAG_CLOSE, '2:1'],
+          [lex.TokenType.EOF, '2:5'],
+        ]);
+      });
+
+      it('should work with CR and LF', () => {
+        expect(tokenizeAndHumanizeLineColumn('<t\n>\r\na\r</t>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, '0:0'],
+          [lex.TokenType.TAG_OPEN_END, '1:0'],
+          [lex.TokenType.TEXT, '1:1'],
+          [lex.TokenType.TAG_CLOSE, '2:1'],
+          [lex.TokenType.EOF, '2:5'],
+        ]);
+      });
+    });
+
+    describe('comments', () => {
+      it('should parse comments', () => {
+        expect(tokenizeAndHumanizeParts('<!--t\ne\rs\r\nt-->')).toEqual([
+          [lex.TokenType.COMMENT_START],
+          [lex.TokenType.RAW_TEXT, 't\ne\ns\nt'],
+          [lex.TokenType.COMMENT_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should store the locations', () => {
+        expect(tokenizeAndHumanizeSourceSpans('<!--t\ne\rs\r\nt-->')).toEqual([
+          [lex.TokenType.COMMENT_START, '<!--'],
+          [lex.TokenType.RAW_TEXT, 't\ne\rs\r\nt'],
+          [lex.TokenType.COMMENT_END, '-->'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+
+      it('should report <!- without -', () => {
+        expect(tokenizeAndHumanizeErrors('<!-a')).toEqual([
+          [lex.TokenType.COMMENT_START, 'Unexpected character "a"', '0:3']
+        ]);
+      });
+
+      it('should report missing end comment', () => {
+        expect(tokenizeAndHumanizeErrors('<!--')).toEqual([
+          [lex.TokenType.RAW_TEXT, 'Unexpected character "EOF"', '0:4']
+        ]);
+      });
+
+      it('should accept comments finishing by too many dashes (even number)', () => {
+        expect(tokenizeAndHumanizeSourceSpans('<!-- test ---->')).toEqual([
+          [lex.TokenType.COMMENT_START, '<!--'],
+          [lex.TokenType.RAW_TEXT, ' test --'],
+          [lex.TokenType.COMMENT_END, '-->'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+
+      it('should accept comments finishing by too many dashes (odd number)', () => {
+        expect(tokenizeAndHumanizeSourceSpans('<!-- test --->')).toEqual([
+          [lex.TokenType.COMMENT_START, '<!--'],
+          [lex.TokenType.RAW_TEXT, ' test -'],
+          [lex.TokenType.COMMENT_END, '-->'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+    });
+
+    describe('doctype', () => {
+      it('should parse doctypes', () => {
+        expect(tokenizeAndHumanizeParts('<!doctype html>')).toEqual([
+          [lex.TokenType.DOC_TYPE, 'doctype html'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should store the locations', () => {
+        expect(tokenizeAndHumanizeSourceSpans('<!doctype html>')).toEqual([
+          [lex.TokenType.DOC_TYPE, '<!doctype html>'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+
+      it('should report missing end doctype', () => {
+        expect(tokenizeAndHumanizeErrors('<!')).toEqual([
+          [lex.TokenType.DOC_TYPE, 'Unexpected character "EOF"', '0:2']
+        ]);
+      });
+    });
+
+    describe('CDATA', () => {
+      it('should parse CDATA', () => {
+        expect(tokenizeAndHumanizeParts('<![CDATA[t\ne\rs\r\nt]]>')).toEqual([
+          [lex.TokenType.CDATA_START],
+          [lex.TokenType.RAW_TEXT, 't\ne\ns\nt'],
+          [lex.TokenType.CDATA_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should store the locations', () => {
+        expect(tokenizeAndHumanizeSourceSpans('<![CDATA[t\ne\rs\r\nt]]>')).toEqual([
+          [lex.TokenType.CDATA_START, '<![CDATA['],
+          [lex.TokenType.RAW_TEXT, 't\ne\rs\r\nt'],
+          [lex.TokenType.CDATA_END, ']]>'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+
+      it('should report <![ without CDATA[', () => {
+        expect(tokenizeAndHumanizeErrors('<![a')).toEqual([
+          [lex.TokenType.CDATA_START, 'Unexpected character "a"', '0:3']
+        ]);
+      });
+
+      it('should report missing end cdata', () => {
+        expect(tokenizeAndHumanizeErrors('<![CDATA[')).toEqual([
+          [lex.TokenType.RAW_TEXT, 'Unexpected character "EOF"', '0:9']
+        ]);
+      });
+    });
+
+    describe('open tags', () => {
+      it('should parse open tags without prefix', () => {
+        expect(tokenizeAndHumanizeParts('<test>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'test'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse namespace prefix', () => {
+        expect(tokenizeAndHumanizeParts('<ns1:test>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, 'ns1', 'test'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse void tags', () => {
+        expect(tokenizeAndHumanizeParts('<test/>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'test'],
+          [lex.TokenType.TAG_OPEN_END_VOID],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should allow whitespace after the tag name', () => {
+        expect(tokenizeAndHumanizeParts('<test >')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'test'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should store the locations', () => {
+        expect(tokenizeAndHumanizeSourceSpans('<test>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, '<test'],
+          [lex.TokenType.TAG_OPEN_END, '>'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+
+    });
+
+    describe('attributes', () => {
+      it('should parse attributes without prefix', () => {
+        expect(tokenizeAndHumanizeParts('<t a>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, 'a'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse attributes with interpolation', () => {
+        expect(tokenizeAndHumanizeParts('<t a="{{v}}" b="s{{m}}e" c="s{{m//c}}e">')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, 'a'],
+          [lex.TokenType.ATTR_VALUE, '{{v}}'],
+          [lex.TokenType.ATTR_NAME, null, 'b'],
+          [lex.TokenType.ATTR_VALUE, 's{{m}}e'],
+          [lex.TokenType.ATTR_NAME, null, 'c'],
+          [lex.TokenType.ATTR_VALUE, 's{{m//c}}e'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse attributes with prefix', () => {
+        expect(tokenizeAndHumanizeParts('<t ns1:a>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, 'ns1', 'a'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse attributes whose prefix is not valid', () => {
+        expect(tokenizeAndHumanizeParts('<t (ns1:a)>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, '(ns1:a)'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse attributes with single quote value', () => {
+        expect(tokenizeAndHumanizeParts('<t a=\'b\'>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, 'a'],
+          [lex.TokenType.ATTR_VALUE, 'b'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse attributes with double quote value', () => {
+        expect(tokenizeAndHumanizeParts('<t a="b">')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, 'a'],
+          [lex.TokenType.ATTR_VALUE, 'b'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse attributes with unquoted value', () => {
+        expect(tokenizeAndHumanizeParts('<t a=b>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, 'a'],
+          [lex.TokenType.ATTR_VALUE, 'b'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should allow whitespace', () => {
+        expect(tokenizeAndHumanizeParts('<t a = b >')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, 'a'],
+          [lex.TokenType.ATTR_VALUE, 'b'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse attributes with entities in values', () => {
+        expect(tokenizeAndHumanizeParts('<t a="&#65;&#x41;">')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, 'a'],
+          [lex.TokenType.ATTR_VALUE, 'AA'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should not decode entities without trailing ";"', () => {
+        expect(tokenizeAndHumanizeParts('<t a="&amp" b="c&&d">')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, 'a'],
+          [lex.TokenType.ATTR_VALUE, '&amp'],
+          [lex.TokenType.ATTR_NAME, null, 'b'],
+          [lex.TokenType.ATTR_VALUE, 'c&&d'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse attributes with "&" in values', () => {
+        expect(tokenizeAndHumanizeParts('<t a="b && c &">')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, 'a'],
+          [lex.TokenType.ATTR_VALUE, 'b && c &'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse values with CR and LF', () => {
+        expect(tokenizeAndHumanizeParts('<t a=\'t\ne\rs\r\nt\'>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 't'],
+          [lex.TokenType.ATTR_NAME, null, 'a'],
+          [lex.TokenType.ATTR_VALUE, 't\ne\ns\nt'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should store the locations', () => {
+        expect(tokenizeAndHumanizeSourceSpans('<t a=b>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, '<t'],
+          [lex.TokenType.ATTR_NAME, 'a'],
+          [lex.TokenType.ATTR_VALUE, 'b'],
+          [lex.TokenType.TAG_OPEN_END, '>'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+
+    });
+
+    describe('closing tags', () => {
+      it('should parse closing tags without prefix', () => {
+        expect(tokenizeAndHumanizeParts('</test>')).toEqual([
+          [lex.TokenType.TAG_CLOSE, null, 'test'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse closing tags with prefix', () => {
+        expect(tokenizeAndHumanizeParts('</ns1:test>')).toEqual([
+          [lex.TokenType.TAG_CLOSE, 'ns1', 'test'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should allow whitespace', () => {
+        expect(tokenizeAndHumanizeParts('</ test >')).toEqual([
+          [lex.TokenType.TAG_CLOSE, null, 'test'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should store the locations', () => {
+        expect(tokenizeAndHumanizeSourceSpans('</test>')).toEqual([
+          [lex.TokenType.TAG_CLOSE, '</test>'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+
+      it('should report missing name after </', () => {
+        expect(tokenizeAndHumanizeErrors('</')).toEqual([
+          [lex.TokenType.TAG_CLOSE, 'Unexpected character "EOF"', '0:2']
+        ]);
+      });
+
+      it('should report missing >', () => {
+        expect(tokenizeAndHumanizeErrors('</test')).toEqual([
+          [lex.TokenType.TAG_CLOSE, 'Unexpected character "EOF"', '0:6']
+        ]);
+      });
+    });
+
+    describe('entities', () => {
+      it('should parse named entities', () => {
+        expect(tokenizeAndHumanizeParts('a&amp;b')).toEqual([
+          [lex.TokenType.TEXT, 'a&b'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse hexadecimal entities', () => {
+        expect(tokenizeAndHumanizeParts('&#x41;&#X41;')).toEqual([
+          [lex.TokenType.TEXT, 'AA'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse decimal entities', () => {
+        expect(tokenizeAndHumanizeParts('&#65;')).toEqual([
+          [lex.TokenType.TEXT, 'A'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should store the locations', () => {
+        expect(tokenizeAndHumanizeSourceSpans('a&amp;b')).toEqual([
+          [lex.TokenType.TEXT, 'a&amp;b'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+
+      it('should report malformed/unknown entities', () => {
+        expect(tokenizeAndHumanizeErrors('&tbo;')).toEqual([[
+          lex.TokenType.TEXT,
+          'Unknown entity "tbo" - use the "&#<decimal>;" or  "&#x<hex>;" syntax', '0:0'
+        ]]);
+        expect(tokenizeAndHumanizeErrors('&#asdf;')).toEqual([
+          [lex.TokenType.TEXT, 'Unexpected character "s"', '0:3']
+        ]);
+        expect(tokenizeAndHumanizeErrors('&#xasdf;')).toEqual([
+          [lex.TokenType.TEXT, 'Unexpected character "s"', '0:4']
+        ]);
+
+        expect(tokenizeAndHumanizeErrors('&#xABC')).toEqual([
+          [lex.TokenType.TEXT, 'Unexpected character "EOF"', '0:6']
+        ]);
+      });
+    });
+
+    describe('regular text', () => {
+      it('should parse text', () => {
+        expect(tokenizeAndHumanizeParts('a')).toEqual([
+          [lex.TokenType.TEXT, 'a'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse interpolation', () => {
+        expect(tokenizeAndHumanizeParts('{{ a }}b{{ c // comment }}')).toEqual([
+          [lex.TokenType.TEXT, '{{ a }}b{{ c // comment }}'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse interpolation with custom markers', () => {
+        expect(tokenizeAndHumanizeParts('{% a %}', null !, {start: '{%', end: '%}'})).toEqual([
+          [lex.TokenType.TEXT, '{% a %}'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should handle CR & LF', () => {
+        expect(tokenizeAndHumanizeParts('t\ne\rs\r\nt')).toEqual([
+          [lex.TokenType.TEXT, 't\ne\ns\nt'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse entities', () => {
+        expect(tokenizeAndHumanizeParts('a&amp;b')).toEqual([
+          [lex.TokenType.TEXT, 'a&b'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse text starting with "&"', () => {
+        expect(tokenizeAndHumanizeParts('a && b &')).toEqual([
+          [lex.TokenType.TEXT, 'a && b &'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should store the locations', () => {
+        expect(tokenizeAndHumanizeSourceSpans('a')).toEqual([
+          [lex.TokenType.TEXT, 'a'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+
+      it('should allow "<" in text nodes', () => {
+        expect(tokenizeAndHumanizeParts('{{ a < b ? c : d }}')).toEqual([
+          [lex.TokenType.TEXT, '{{ a < b ? c : d }}'],
+          [lex.TokenType.EOF],
+        ]);
+
+        expect(tokenizeAndHumanizeSourceSpans('<p>a<b</p>')).toEqual([
+          [lex.TokenType.TAG_OPEN_START, '<p'],
+          [lex.TokenType.TAG_OPEN_END, '>'],
+          [lex.TokenType.TEXT, 'a<b'],
+          [lex.TokenType.TAG_CLOSE, '</p>'],
+          [lex.TokenType.EOF, ''],
+        ]);
+
+        expect(tokenizeAndHumanizeParts('< a>')).toEqual([
+          [lex.TokenType.TEXT, '< a>'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse valid start tag in interpolation', () => {
+        expect(tokenizeAndHumanizeParts('{{ a <b && c > d }}')).toEqual([
+          [lex.TokenType.TEXT, '{{ a '],
+          [lex.TokenType.TAG_OPEN_START, null, 'b'],
+          [lex.TokenType.ATTR_NAME, null, '&&'],
+          [lex.TokenType.ATTR_NAME, null, 'c'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.TEXT, ' d }}'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should be able to escape {', () => {
+        expect(tokenizeAndHumanizeParts('{{ "{" }}')).toEqual([
+          [lex.TokenType.TEXT, '{{ "{" }}'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should be able to escape {{', () => {
+        expect(tokenizeAndHumanizeParts('{{ "{{" }}')).toEqual([
+          [lex.TokenType.TEXT, '{{ "{{" }}'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should treat expansion form as text when they are not parsed', () => {
+        expect(tokenizeAndHumanizeParts('<span>{a, b, =4 {c}}</span>', false)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'span'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.TEXT, '{a, b, =4 {c}}'],
+          [lex.TokenType.TAG_CLOSE, null, 'span'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+    });
+
+    describe('raw text', () => {
+      it('should parse text', () => {
+        expect(tokenizeAndHumanizeParts(`<script>t\ne\rs\r\nt</script>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'script'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.RAW_TEXT, 't\ne\ns\nt'],
+          [lex.TokenType.TAG_CLOSE, null, 'script'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should not detect entities', () => {
+        expect(tokenizeAndHumanizeParts(`<script>&amp;</SCRIPT>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'script'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.RAW_TEXT, '&amp;'],
+          [lex.TokenType.TAG_CLOSE, null, 'script'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should ignore other opening tags', () => {
+        expect(tokenizeAndHumanizeParts(`<script>a<div></script>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'script'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.RAW_TEXT, 'a<div>'],
+          [lex.TokenType.TAG_CLOSE, null, 'script'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should ignore other closing tags', () => {
+        expect(tokenizeAndHumanizeParts(`<script>a</test></script>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'script'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.RAW_TEXT, 'a</test>'],
+          [lex.TokenType.TAG_CLOSE, null, 'script'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should store the locations', () => {
+        expect(tokenizeAndHumanizeSourceSpans(`<script>a</script>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, '<script'],
+          [lex.TokenType.TAG_OPEN_END, '>'],
+          [lex.TokenType.RAW_TEXT, 'a'],
+          [lex.TokenType.TAG_CLOSE, '</script>'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+    });
+
+    describe('escapable raw text', () => {
+      it('should parse text', () => {
+        expect(tokenizeAndHumanizeParts(`<title>t\ne\rs\r\nt</title>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'title'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.ESCAPABLE_RAW_TEXT, 't\ne\ns\nt'],
+          [lex.TokenType.TAG_CLOSE, null, 'title'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should detect entities', () => {
+        expect(tokenizeAndHumanizeParts(`<title>&amp;</title>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'title'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.ESCAPABLE_RAW_TEXT, '&'],
+          [lex.TokenType.TAG_CLOSE, null, 'title'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should ignore other opening tags', () => {
+        expect(tokenizeAndHumanizeParts(`<title>a<div></title>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'title'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.ESCAPABLE_RAW_TEXT, 'a<div>'],
+          [lex.TokenType.TAG_CLOSE, null, 'title'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should ignore other closing tags', () => {
+        expect(tokenizeAndHumanizeParts(`<title>a</test></title>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'title'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.ESCAPABLE_RAW_TEXT, 'a</test>'],
+          [lex.TokenType.TAG_CLOSE, null, 'title'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should store the locations', () => {
+        expect(tokenizeAndHumanizeSourceSpans(`<title>a</title>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, '<title'],
+          [lex.TokenType.TAG_OPEN_END, '>'],
+          [lex.TokenType.ESCAPABLE_RAW_TEXT, 'a'],
+          [lex.TokenType.TAG_CLOSE, '</title>'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+
+    });
+
+    describe('expansion forms', () => {
+      it('should parse an expansion form', () => {
+        expect(tokenizeAndHumanizeParts('{one.two, three, =4 {four} =5 {five} foo {bar} }', true))
+            .toEqual([
+              [lex.TokenType.EXPANSION_FORM_START],
+              [lex.TokenType.RAW_TEXT, 'one.two'],
+              [lex.TokenType.RAW_TEXT, 'three'],
+              [lex.TokenType.EXPANSION_CASE_VALUE, '=4'],
+              [lex.TokenType.EXPANSION_CASE_EXP_START],
+              [lex.TokenType.TEXT, 'four'],
+              [lex.TokenType.EXPANSION_CASE_EXP_END],
+              [lex.TokenType.EXPANSION_CASE_VALUE, '=5'],
+              [lex.TokenType.EXPANSION_CASE_EXP_START],
+              [lex.TokenType.TEXT, 'five'],
+              [lex.TokenType.EXPANSION_CASE_EXP_END],
+              [lex.TokenType.EXPANSION_CASE_VALUE, 'foo'],
+              [lex.TokenType.EXPANSION_CASE_EXP_START],
+              [lex.TokenType.TEXT, 'bar'],
+              [lex.TokenType.EXPANSION_CASE_EXP_END],
+              [lex.TokenType.EXPANSION_FORM_END],
+              [lex.TokenType.EOF],
+            ]);
+      });
+
+      it('should parse an expansion form with text elements surrounding it', () => {
+        expect(tokenizeAndHumanizeParts('before{one.two, three, =4 {four}}after', true)).toEqual([
+          [lex.TokenType.TEXT, 'before'],
+          [lex.TokenType.EXPANSION_FORM_START],
+          [lex.TokenType.RAW_TEXT, 'one.two'],
+          [lex.TokenType.RAW_TEXT, 'three'],
+          [lex.TokenType.EXPANSION_CASE_VALUE, '=4'],
+          [lex.TokenType.EXPANSION_CASE_EXP_START],
+          [lex.TokenType.TEXT, 'four'],
+          [lex.TokenType.EXPANSION_CASE_EXP_END],
+          [lex.TokenType.EXPANSION_FORM_END],
+          [lex.TokenType.TEXT, 'after'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse an expansion form as a tag single child', () => {
+        expect(tokenizeAndHumanizeParts('<div><span>{a, b, =4 {c}}</span></div>', true)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, null, 'div'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.TAG_OPEN_START, null, 'span'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.EXPANSION_FORM_START],
+          [lex.TokenType.RAW_TEXT, 'a'],
+          [lex.TokenType.RAW_TEXT, 'b'],
+          [lex.TokenType.EXPANSION_CASE_VALUE, '=4'],
+          [lex.TokenType.EXPANSION_CASE_EXP_START],
+          [lex.TokenType.TEXT, 'c'],
+          [lex.TokenType.EXPANSION_CASE_EXP_END],
+          [lex.TokenType.EXPANSION_FORM_END],
+          [lex.TokenType.TAG_CLOSE, null, 'span'],
+          [lex.TokenType.TAG_CLOSE, null, 'div'],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse an expansion forms with elements in it', () => {
+        expect(tokenizeAndHumanizeParts('{one.two, three, =4 {four <b>a</b>}}', true)).toEqual([
+          [lex.TokenType.EXPANSION_FORM_START],
+          [lex.TokenType.RAW_TEXT, 'one.two'],
+          [lex.TokenType.RAW_TEXT, 'three'],
+          [lex.TokenType.EXPANSION_CASE_VALUE, '=4'],
+          [lex.TokenType.EXPANSION_CASE_EXP_START],
+          [lex.TokenType.TEXT, 'four '],
+          [lex.TokenType.TAG_OPEN_START, null, 'b'],
+          [lex.TokenType.TAG_OPEN_END],
+          [lex.TokenType.TEXT, 'a'],
+          [lex.TokenType.TAG_CLOSE, null, 'b'],
+          [lex.TokenType.EXPANSION_CASE_EXP_END],
+          [lex.TokenType.EXPANSION_FORM_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse an expansion forms containing an interpolation', () => {
+        expect(tokenizeAndHumanizeParts('{one.two, three, =4 {four {{a}}}}', true)).toEqual([
+          [lex.TokenType.EXPANSION_FORM_START],
+          [lex.TokenType.RAW_TEXT, 'one.two'],
+          [lex.TokenType.RAW_TEXT, 'three'],
+          [lex.TokenType.EXPANSION_CASE_VALUE, '=4'],
+          [lex.TokenType.EXPANSION_CASE_EXP_START],
+          [lex.TokenType.TEXT, 'four {{a}}'],
+          [lex.TokenType.EXPANSION_CASE_EXP_END],
+          [lex.TokenType.EXPANSION_FORM_END],
+          [lex.TokenType.EOF],
+        ]);
+      });
+
+      it('should parse nested expansion forms', () => {
+        expect(tokenizeAndHumanizeParts(`{one.two, three, =4 { {xx, yy, =x {one}} }}`, true))
+            .toEqual([
+              [lex.TokenType.EXPANSION_FORM_START],
+              [lex.TokenType.RAW_TEXT, 'one.two'],
+              [lex.TokenType.RAW_TEXT, 'three'],
+              [lex.TokenType.EXPANSION_CASE_VALUE, '=4'],
+              [lex.TokenType.EXPANSION_CASE_EXP_START],
+              [lex.TokenType.EXPANSION_FORM_START],
+              [lex.TokenType.RAW_TEXT, 'xx'],
+              [lex.TokenType.RAW_TEXT, 'yy'],
+              [lex.TokenType.EXPANSION_CASE_VALUE, '=x'],
+              [lex.TokenType.EXPANSION_CASE_EXP_START],
+              [lex.TokenType.TEXT, 'one'],
+              [lex.TokenType.EXPANSION_CASE_EXP_END],
+              [lex.TokenType.EXPANSION_FORM_END],
+              [lex.TokenType.TEXT, ' '],
+              [lex.TokenType.EXPANSION_CASE_EXP_END],
+              [lex.TokenType.EXPANSION_FORM_END],
+              [lex.TokenType.EOF],
+            ]);
+      });
+    });
+
+    describe('errors', () => {
+      it('should report unescaped "{" on error', () => {
+        expect(tokenizeAndHumanizeErrors(`<p>before { after</p>`, true)).toEqual([[
+          lex.TokenType.RAW_TEXT,
+          `Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)`,
+          '0:21',
+        ]]);
+      });
+
+      it('should include 2 lines of context in message', () => {
+        const src = '111\n222\n333\nE\n444\n555\n666\n';
+        const file = new ParseSourceFile(src, 'file://');
+        const location = new ParseLocation(file, 12, 123, 456);
+        const span = new ParseSourceSpan(location, location);
+        const error = new lex.TokenError('**ERROR**', null !, span);
+        expect(error.toString())
+            .toEqual(`**ERROR** ("\n222\n333\n[ERROR ->]E\n444\n555\n"): file://@123:456`);
+      });
+    });
+
+    describe('unicode characters', () => {
+      it('should support unicode characters', () => {
+        expect(tokenizeAndHumanizeSourceSpans(`<p>İ</p>`)).toEqual([
+          [lex.TokenType.TAG_OPEN_START, '<p'],
+          [lex.TokenType.TAG_OPEN_END, '>'],
+          [lex.TokenType.TEXT, 'İ'],
+          [lex.TokenType.TAG_CLOSE, '</p>'],
+          [lex.TokenType.EOF, ''],
+        ]);
+      });
+    });
+
+  });
+}
+
+function tokenizeWithoutErrors(
+    input: string, tokenizeExpansionForms: boolean = false,
+    interpolationConfig?: InterpolationConfig): lex.Token[] {
+  const tokenizeResult = lex.tokenize(
+      input, 'someUrl', getHtmlTagDefinition, tokenizeExpansionForms, interpolationConfig);
+
+  if (tokenizeResult.errors.length > 0) {
+    const errorString = tokenizeResult.errors.join('\n');
+    throw new Error(`Unexpected parse errors:\n${errorString}`);
+  }
+
+  return tokenizeResult.tokens;
+}
+
+function tokenizeAndHumanizeParts(
+    input: string, tokenizeExpansionForms: boolean = false,
+    interpolationConfig?: InterpolationConfig): any[] {
+  return tokenizeWithoutErrors(input, tokenizeExpansionForms, interpolationConfig)
+      .map(token => [<any>token.type].concat(token.parts));
+}
+
+function tokenizeAndHumanizeSourceSpans(input: string): any[] {
+  return tokenizeWithoutErrors(input).map(token => [<any>token.type, token.sourceSpan.toString()]);
+}
+
+function humanizeLineColumn(location: ParseLocation): string {
+  return `${location.line}:${location.col}`;
+}
+
+function tokenizeAndHumanizeLineColumn(input: string): any[] {
+  return tokenizeWithoutErrors(input).map(
+      token => [<any>token.type, humanizeLineColumn(token.sourceSpan.start)]);
+}
+
+function tokenizeAndHumanizeErrors(input: string, tokenizeExpansionForms: boolean = false): any[] {
+  return lex.tokenize(input, 'someUrl', getHtmlTagDefinition, tokenizeExpansionForms)
+      .errors.map(e => [<any>e.tokenType, e.msg, humanizeLineColumn(e.span.start)]);
+}
diff --git a/packages/compiler/test/ng_module_resolver_mock_spec.ts b/packages/compiler/test/ng_module_resolver_mock_spec.ts
new file mode 100644
index 000000000000..00a2df52ccf9
--- /dev/null
+++ b/packages/compiler/test/ng_module_resolver_mock_spec.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 {Injector, NgModule} from '@angular/core';
+import {beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+import {MockNgModuleResolver} from '../testing';
+
+{
+  describe('MockNgModuleResolver', () => {
+    let ngModuleResolver: MockNgModuleResolver;
+
+    beforeEach(inject([Injector], (injector: Injector) => {
+      ngModuleResolver = new MockNgModuleResolver(new JitReflector());
+    }));
+
+    describe('NgModule overriding', () => {
+      it('should fallback to the default NgModuleResolver when templates are not overridden',
+         () => {
+           const ngModule = ngModuleResolver.resolve(SomeNgModule);
+           expect(ngModule.declarations).toEqual([SomeDirective]);
+         });
+
+      it('should allow overriding the @NgModule', () => {
+        ngModuleResolver.setNgModule(
+            SomeNgModule, new NgModule({declarations: [SomeOtherDirective]}));
+        const ngModule = ngModuleResolver.resolve(SomeNgModule);
+        expect(ngModule.declarations).toEqual([SomeOtherDirective]);
+      });
+    });
+  });
+}
+
+class SomeDirective {}
+
+class SomeOtherDirective {}
+
+@NgModule({declarations: [SomeDirective]})
+class SomeNgModule {
+}
diff --git a/packages/compiler/test/ng_module_resolver_spec.ts b/packages/compiler/test/ng_module_resolver_spec.ts
new file mode 100644
index 000000000000..d9b019c520be
--- /dev/null
+++ b/packages/compiler/test/ng_module_resolver_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 {NgModuleResolver} from '@angular/compiler/src/ng_module_resolver';
+import {ɵstringify as stringify} from '@angular/core';
+import {NgModule} from '@angular/core/src/metadata';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+class SomeClass1 {}
+class SomeClass2 {}
+class SomeClass3 {}
+class SomeClass4 {}
+class SomeClass5 {}
+
+@NgModule({
+  declarations: [SomeClass1],
+  imports: [SomeClass2],
+  exports: [SomeClass3],
+  providers: [SomeClass4],
+  entryComponents: [SomeClass5]
+})
+class SomeModule {
+}
+
+class SimpleClass {}
+
+{
+  describe('NgModuleResolver', () => {
+    let resolver: NgModuleResolver;
+
+    beforeEach(() => { resolver = new NgModuleResolver(new JitReflector()); });
+
+    it('should read out the metadata from the class', () => {
+      const moduleMetadata = resolver.resolve(SomeModule);
+      expect(moduleMetadata).toEqual(new NgModule({
+        declarations: [SomeClass1],
+        imports: [SomeClass2],
+        exports: [SomeClass3],
+        providers: [SomeClass4],
+        entryComponents: [SomeClass5]
+      }));
+    });
+
+    it('should throw when simple class has no NgModule decorator', () => {
+      expect(() => resolver.resolve(SimpleClass))
+          .toThrowError(`No NgModule metadata found for '${stringify(SimpleClass)}'.`);
+    });
+
+    it('should support inheriting the metadata', function() {
+      @NgModule({id: 'p'})
+      class Parent {
+      }
+
+      class ChildNoDecorator extends Parent {}
+
+      @NgModule({id: 'c'})
+      class ChildWithDecorator extends Parent {
+      }
+
+      expect(resolver.resolve(ChildNoDecorator)).toEqual(new NgModule({id: 'p'}));
+
+      expect(resolver.resolve(ChildWithDecorator)).toEqual(new NgModule({id: 'c'}));
+    });
+
+  });
+}
diff --git a/packages/compiler/test/output/abstract_emitter_node_only_spec.ts b/packages/compiler/test/output/abstract_emitter_node_only_spec.ts
new file mode 100644
index 000000000000..d70410d491b2
--- /dev/null
+++ b/packages/compiler/test/output/abstract_emitter_node_only_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 {ParseLocation, ParseSourceFile, ParseSourceSpan} from '@angular/compiler';
+import {EmitterVisitorContext} from '@angular/compiler/src/output/abstract_emitter';
+import {SourceMap} from '@angular/compiler/src/output/source_map';
+import {extractSourceMap, originalPositionFor} from '@angular/compiler/testing/src/output/source_map_util';
+
+{
+  describe('AbstractEmitter', () => {
+    describe('EmitterVisitorContext', () => {
+      const fileA = new ParseSourceFile('a0a1a2a3a4a5a6a7a8a9', 'a.js');
+      const fileB = new ParseSourceFile('b0b1b2b3b4b5b6b7b8b9', 'b.js');
+      let ctx: EmitterVisitorContext;
+
+      beforeEach(() => { ctx = EmitterVisitorContext.createRoot(); });
+
+      it('should add source files to the source map', () => {
+        ctx.print(createSourceSpan(fileA, 0), 'o0');
+        ctx.print(createSourceSpan(fileA, 1), 'o1');
+        ctx.print(createSourceSpan(fileB, 0), 'o2');
+        ctx.print(createSourceSpan(fileB, 1), 'o3');
+        const sm = ctx.toSourceMapGenerator('o.ts').toJSON() !;
+        expect(sm.sources).toEqual([fileA.url, fileB.url]);
+        expect(sm.sourcesContent).toEqual([fileA.content, fileB.content]);
+      });
+
+      it('should generate a valid mapping', () => {
+        ctx.print(createSourceSpan(fileA, 0), 'fileA-0');
+        ctx.println(createSourceSpan(fileB, 1), 'fileB-1');
+        ctx.print(createSourceSpan(fileA, 2), 'fileA-2');
+
+        expectMap(ctx, 0, 0, 'a.js', 0, 0);
+        expectMap(ctx, 0, 7, 'b.js', 0, 2);
+        expectMap(ctx, 1, 0, 'a.js', 0, 4);
+      });
+
+      it('should be able to shift the content', () => {
+        ctx.print(createSourceSpan(fileA, 0), 'fileA-0');
+
+        const sm = ctx.toSourceMapGenerator('o.ts', 10).toJSON() !;
+        expect(originalPositionFor(sm, {line: 11, column: 0})).toEqual({
+          line: 1,
+          column: 0,
+          source: 'a.js',
+        });
+      });
+
+      it('should use the default source file for the first character', () => {
+        ctx.print(null, 'fileA-0');
+        expectMap(ctx, 0, 0, 'o.ts', 0, 0);
+      });
+
+      it('should use an explicit mapping for the first character', () => {
+        ctx.print(createSourceSpan(fileA, 0), 'fileA-0');
+        expectMap(ctx, 0, 0, 'a.js', 0, 0);
+      });
+
+      it('should map leading segment without span', () => {
+        ctx.print(null, '....');
+        ctx.print(createSourceSpan(fileA, 0), 'fileA-0');
+
+        expectMap(ctx, 0, 0, 'o.ts', 0, 0);
+        expectMap(ctx, 0, 4, 'a.js', 0, 0);
+        expect(nbSegmentsPerLine(ctx)).toEqual([2]);
+      });
+
+      it('should handle indent', () => {
+        ctx.incIndent();
+        ctx.println(createSourceSpan(fileA, 0), 'fileA-0');
+        ctx.incIndent();
+        ctx.println(createSourceSpan(fileA, 1), 'fileA-1');
+        ctx.decIndent();
+        ctx.println(createSourceSpan(fileA, 2), 'fileA-2');
+
+        expectMap(ctx, 0, 0, 'o.ts', 0, 0);
+        expectMap(ctx, 0, 2, 'a.js', 0, 0);
+        expectMap(ctx, 1, 0);
+        expectMap(ctx, 1, 2);
+        expectMap(ctx, 1, 4, 'a.js', 0, 2);
+        expectMap(ctx, 2, 0);
+        expectMap(ctx, 2, 2, 'a.js', 0, 4);
+
+        expect(nbSegmentsPerLine(ctx)).toEqual([2, 1, 1]);
+      });
+
+      it('should coalesce identical span', () => {
+        const span = createSourceSpan(fileA, 0);
+        ctx.print(span, 'fileA-0');
+        ctx.print(null, '...');
+        ctx.print(span, 'fileA-0');
+        ctx.print(createSourceSpan(fileB, 0), 'fileB-0');
+
+        expectMap(ctx, 0, 0, 'a.js', 0, 0);
+        expectMap(ctx, 0, 7, 'a.js', 0, 0);
+        expectMap(ctx, 0, 10, 'a.js', 0, 0);
+        expectMap(ctx, 0, 17, 'b.js', 0, 0);
+
+        expect(nbSegmentsPerLine(ctx)).toEqual([2]);
+      });
+    });
+  });
+}
+
+
+// All lines / columns indexes are 0-based
+// Note: source-map line indexes are 1-based, column 0-based
+function expectMap(
+    ctx: EmitterVisitorContext, genLine: number, genCol: number, source: string | null = null,
+    srcLine: number | null = null, srcCol: number | null = null) {
+  const sm = ctx.toSourceMapGenerator('o.ts').toJSON() !;
+  const genPosition = {line: genLine + 1, column: genCol};
+  const origPosition = originalPositionFor(sm, genPosition);
+  // TODO: Review use of `any` here (#19904)
+  expect(origPosition.source as any).toEqual(source);
+  expect(origPosition.line as any).toEqual(srcLine === null ? null : srcLine + 1);
+  expect(origPosition.column as any).toEqual(srcCol);
+}
+
+// returns the number of segments per line
+function nbSegmentsPerLine(ctx: EmitterVisitorContext) {
+  const sm = ctx.toSourceMapGenerator('o.ts').toJSON() !;
+  const lines = sm.mappings.split(';');
+  return lines.map(l => {
+    const m = l.match(/,/g);
+    return m === null ? 1 : m.length + 1;
+  });
+}
+
+function createSourceSpan(file: ParseSourceFile, idx: number) {
+  const col = 2 * idx;
+  const start = new ParseLocation(file, col, 0, col);
+  const end = new ParseLocation(file, col + 2, 0, col + 2);
+  const sourceSpan = new ParseSourceSpan(start, end);
+  return {sourceSpan};
+}
diff --git a/packages/compiler/test/output/abstract_emitter_spec.ts b/packages/compiler/test/output/abstract_emitter_spec.ts
new file mode 100644
index 000000000000..d28b439ff1b6
--- /dev/null
+++ b/packages/compiler/test/output/abstract_emitter_spec.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 {escapeIdentifier} from '@angular/compiler/src/output/abstract_emitter';
+
+{
+  describe('AbstractEmitter', () => {
+    describe('escapeIdentifier', () => {
+      it('should escape single quotes',
+         () => { expect(escapeIdentifier(`'`, false)).toEqual(`'\\''`); });
+
+      it('should escape backslash',
+         () => { expect(escapeIdentifier('\\', false)).toEqual(`'\\\\'`); });
+
+      it('should escape newlines',
+         () => { expect(escapeIdentifier('\n', false)).toEqual(`'\\n'`); });
+
+      it('should escape carriage returns',
+         () => { expect(escapeIdentifier('\r', false)).toEqual(`'\\r'`); });
+
+      it('should escape $', () => { expect(escapeIdentifier('$', true)).toEqual(`'\\$'`); });
+      it('should not escape $', () => { expect(escapeIdentifier('$', false)).toEqual(`'$'`); });
+      it('should add quotes for non-identifiers',
+         () => { expect(escapeIdentifier('==', false, false)).toEqual(`'=='`); });
+      it('does not escape class (but it probably should)',
+         () => { expect(escapeIdentifier('class', false, false)).toEqual('class'); });
+    });
+  });
+}
+
+export function stripSourceMapAndNewLine(source: string): string {
+  if (source.endsWith('\n')) {
+    source = source.substring(0, source.length - 1);
+  }
+  const smi = source.lastIndexOf('\n//#');
+  if (smi == -1) return source;
+  return source.slice(0, smi);
+}
\ No newline at end of file
diff --git a/packages/compiler/test/output/js_emitter_node_only_spec.ts b/packages/compiler/test/output/js_emitter_node_only_spec.ts
new file mode 100644
index 000000000000..1ec2bb4e3ce4
--- /dev/null
+++ b/packages/compiler/test/output/js_emitter_node_only_spec.ts
@@ -0,0 +1,49 @@
+/**
+ * @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/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 {SourceMap} from '@angular/compiler/src/output/source_map';
+import {ParseLocation, ParseSourceFile, ParseSourceSpan} from '@angular/compiler/src/parse_util';
+
+import {extractSourceMap, originalPositionFor} from '@angular/compiler/testing/src/output/source_map_util';
+
+const someGenFilePath = 'somePackage/someGenFile';
+
+{
+  describe('JavaScriptEmitter', () => {
+    let emitter: JavaScriptEmitter;
+    let someVar: o.ReadVarExpr;
+
+    beforeEach(() => { emitter = new JavaScriptEmitter(); });
+
+    function emitSourceMap(stmt: o.Statement | o.Statement[], preamble?: string): SourceMap {
+      const stmts = Array.isArray(stmt) ? stmt : [stmt];
+      const source = emitter.emitStatements(someGenFilePath, stmts, preamble);
+      return extractSourceMap(source) !;
+    }
+
+    describe('source maps', () => {
+      it('should emit an inline source map', () => {
+        const source = new ParseSourceFile(';;;var', 'in.js');
+        const startLocation = new ParseLocation(source, 0, 0, 3);
+        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 */');
+
+        expect(sm.sources).toEqual([someGenFilePath, 'in.js']);
+        expect(sm.sourcesContent).toEqual([' ', ';;;var']);
+        expect(originalPositionFor(sm, {line: 3, column: 0}))
+            .toEqual({line: 1, column: 3, source: 'in.js'});
+      });
+    });
+  });
+}
diff --git a/packages/compiler/test/output/js_emitter_spec.ts b/packages/compiler/test/output/js_emitter_spec.ts
new file mode 100644
index 000000000000..184cb615e91d
--- /dev/null
+++ b/packages/compiler/test/output/js_emitter_spec.ts
@@ -0,0 +1,308 @@
+/**
+ * @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/src/aot/static_symbol';
+import {JavaScriptEmitter} from '@angular/compiler/src/output/js_emitter';
+import * as o from '@angular/compiler/src/output/output_ast';
+
+import {stripSourceMapAndNewLine} from './abstract_emitter_spec';
+
+const someGenFilePath = 'somePackage/someGenFile';
+const anotherModuleUrl = 'somePackage/someOtherPath';
+
+const sameModuleIdentifier = new o.ExternalReference(null, 'someLocalId', null);
+
+const externalModuleIdentifier = new o.ExternalReference(anotherModuleUrl, 'someExternalId', null);
+
+{
+  // Note supported features of our OutputAstin JavaScript / ES5:
+  // - types
+  // - declaring fields
+
+  describe('JavaScriptEmitter', () => {
+    let emitter: JavaScriptEmitter;
+    let someVar: o.ReadVarExpr;
+
+    beforeEach(() => {
+      emitter = new JavaScriptEmitter();
+      someVar = o.variable('someVar');
+    });
+
+    function emitStmt(stmt: o.Statement, preamble?: string): string {
+      const source = emitter.emitStatements(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(null, [o.StmtModifier.Exported])))
+          .toEqual([
+            'var someVar = 1;',
+            `Object.defineProperty(exports, 'someVar', { get: function() { return someVar; }});`
+          ].join('\n'));
+    });
+
+    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 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 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', () => {
+      expect(emitStmt(o.literal(null).toStmt())).toEqual('null;');
+      expect(emitStmt(o.literal(undefined).toStmt())).toEqual('undefined;');
+    });
+
+    it('should support external identifiers', () => {
+      expect(emitStmt(o.importExpr(sameModuleIdentifier).toStmt())).toEqual('someLocalId;');
+      expect(emitStmt(o.importExpr(externalModuleIdentifier).toStmt())).toEqual([
+        `var i0 = re` +
+            `quire('somePackage/someOtherPath');`,
+        `i0.someExternalId;`
+      ].join('\n'));
+    });
+
+    it('should support operators', () => {
+      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);');
+
+      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() {', '};'].join('\n'));
+      expect(emitStmt(o.fn([], [new o.ReturnStatement(o.literal(1))]).toStmt())).toEqual([
+        'function() {', '  return 1;\n};'
+      ].join('\n'));
+      expect(emitStmt(o.fn([new o.FnParam('param1')], []).toStmt())).toEqual([
+        'function(param1) {', '};'
+      ].join('\n'));
+    });
+
+    it('should support function statements', () => {
+      expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], [
+      ]))).toEqual(['function 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'));
+      expect(emitStmt(new o.DeclareFunctionStmt('someFn', [new o.FnParam('param1')], [
+      ]))).toEqual(['function someFn(param1) {', '}'].join('\n'));
+    });
+
+    it('should support comments', () => {
+      expect(emitStmt(new o.CommentStmt('a\nb'))).toEqual(['// a', '// b'].join('\n'));
+    });
+
+    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(); }'
+      ].join('\n'));
+      expect(emitStmt(new o.IfStmt(o.variable('cond'), [trueCase], [falseCase]))).toEqual([
+        'if (cond) {', '  trueCase();', '} else {', '  falseCase();', '}'
+      ].join('\n'));
+    });
+
+    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);', '}'
+      ].join('\n'));
+    });
+
+    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(['function SomeClass() {', '}'].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [], null !, [], [o.StmtModifier.Exported])))
+            .toEqual([
+              'function SomeClass() {', '}',
+              `Object.defineProperty(exports, 'SomeClass', { get: function() { return SomeClass; }});`
+            ].join('\n'));
+        expect(emitStmt(
+                   new o.ClassStmt('SomeClass', o.variable('SomeSuperClass'), [], [], null !, [])))
+            .toEqual([
+              'function SomeClass() {', '}',
+              'SomeClass.prototype = Object.create(SomeSuperClass.prototype);'
+            ].join('\n'));
+      });
+
+      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(['function SomeClass() {', '}'].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [],
+                   new o.ClassMethod(null !, [new o.FnParam('someParam')], []), [])))
+            .toEqual(['function SomeClass(someParam) {', '}'].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', o.variable('SomeSuperClass'), [], [],
+                   new o.ClassMethod(null !, [], [superCall]), [])))
+            .toEqual([
+              'function SomeClass() {', '  var self = this;',
+              '  SomeSuperClass.call(this, someParam);', '}',
+              'SomeClass.prototype = Object.create(SomeSuperClass.prototype);'
+            ].join('\n'));
+        expect(
+            emitStmt(new o.ClassStmt(
+                'SomeClass', null !, [], [], new o.ClassMethod(null !, [], [callSomeMethod]), [])))
+            .toEqual([
+              'function SomeClass() {', '  var self = this;', '  self.someMethod();', '}'
+            ].join('\n'));
+      });
+
+      it('should support declaring getters', () => {
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [new o.ClassGetter('someGetter', [])], null !, [])))
+            .toEqual([
+              'function SomeClass() {', '}',
+              `Object.defineProperty(SomeClass.prototype, 'someGetter', { get: function() {`, `}});`
+            ].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [new o.ClassGetter('someGetter', [callSomeMethod])],
+                   null !, [])))
+            .toEqual([
+              'function SomeClass() {', '}',
+              `Object.defineProperty(SomeClass.prototype, 'someGetter', { get: function() {`,
+              `  var self = this;`, `  self.someMethod();`, `}});`
+            ].join('\n'));
+      });
+
+      it('should support methods', () => {
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [], null !, [new o.ClassMethod('someMethod', [], [])])))
+            .toEqual([
+              'function SomeClass() {', '}', 'SomeClass.prototype.someMethod = function() {', '};'
+            ].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [], null !,
+                   [new o.ClassMethod('someMethod', [new o.FnParam('someParam')], [])])))
+            .toEqual([
+              'function SomeClass() {', '}',
+              'SomeClass.prototype.someMethod = function(someParam) {', '};'
+            ].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [], null !,
+                   [new o.ClassMethod('someMethod', [], [callSomeMethod])])))
+            .toEqual([
+              'function SomeClass() {', '}', 'SomeClass.prototype.someMethod = function() {',
+              '  var self = this;', '  self.someMethod();', '};'
+            ].join('\n'));
+      });
+    });
+
+    it('should support a preamble', () => {
+      expect(emitStmt(o.variable('a').toStmt(), '/* SomePreamble */')).toBe([
+        '/* SomePreamble */', 'a;'
+      ].join('\n'));
+    });
+  });
+}
diff --git a/packages/compiler/test/output/output_ast_spec.ts b/packages/compiler/test/output/output_ast_spec.ts
new file mode 100644
index 000000000000..2af2adaa99e0
--- /dev/null
+++ b/packages/compiler/test/output/output_ast_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 * as o from '../../src/output/output_ast';
+
+{
+  describe('OutputAst', () => {
+    describe('collectExternalReferences', () => {
+      it('should find expressions of variable types', () => {
+        const ref1 = new o.ExternalReference('aModule', 'name1');
+        const ref2 = new o.ExternalReference('aModule', 'name2');
+        const stmt =
+            o.variable('test').set(o.NULL_EXPR).toDeclStmt(o.importType(ref1, [o.importType(
+                                                                                  ref2) !]));
+
+        expect(o.collectExternalReferences([stmt])).toEqual([ref1, ref2]);
+      });
+    });
+
+    describe('comments', () => {
+      it('different JSDocCommentStmt should not be equivalent', () => {
+        const comment1 = new o.JSDocCommentStmt([{text: 'text'}]);
+        const comment2 = new o.JSDocCommentStmt([{text: 'text2'}]);
+        const comment3 = new o.JSDocCommentStmt([{tagName: o.JSDocTagName.Desc, text: 'text2'}]);
+        const comment4 = new o.JSDocCommentStmt([{text: 'text2'}, {text: 'text3'}]);
+
+        expect(comment1.isEquivalent(comment2)).toBeFalsy();
+        expect(comment1.isEquivalent(comment3)).toBeFalsy();
+        expect(comment1.isEquivalent(comment4)).toBeFalsy();
+        expect(comment2.isEquivalent(comment3)).toBeFalsy();
+        expect(comment2.isEquivalent(comment4)).toBeFalsy();
+        expect(comment3.isEquivalent(comment4)).toBeFalsy();
+        expect(comment1.isEquivalent(comment1)).toBeTruthy();
+      });
+    });
+  });
+}
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 000000000000..ccdeed559f58
--- /dev/null
+++ b/packages/compiler/test/output/output_jit_spec.ts
@@ -0,0 +1,36 @@
+/**
+ * @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';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+const anotherModuleUrl = 'somePackage/someOtherPath';
+
+{
+  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(new JitReflector());
+        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/source_map_spec.ts b/packages/compiler/test/output/source_map_spec.ts
new file mode 100644
index 000000000000..ea76893e115b
--- /dev/null
+++ b/packages/compiler/test/output/source_map_spec.ts
@@ -0,0 +1,130 @@
+/**
+ * @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 {SourceMapGenerator, toBase64String} from '@angular/compiler/src/output/source_map';
+
+{
+  describe('source map generation', () => {
+    describe('generation', () => {
+      it('should generate a valid source map', () => {
+        const map = new SourceMapGenerator('out.js')
+                        .addSource('a.js', null)
+                        .addLine()
+                        .addMapping(0, 'a.js', 0, 0)
+                        .addMapping(4, 'a.js', 0, 6)
+                        .addMapping(5, 'a.js', 0, 7)
+                        .addMapping(8, 'a.js', 0, 22)
+                        .addMapping(9, 'a.js', 0, 23)
+                        .addMapping(10, 'a.js', 0, 24)
+                        .addLine()
+                        .addMapping(0, 'a.js', 1, 0)
+                        .addMapping(4, 'a.js', 1, 6)
+                        .addMapping(5, 'a.js', 1, 7)
+                        .addMapping(8, 'a.js', 1, 10)
+                        .addMapping(9, 'a.js', 1, 11)
+                        .addMapping(10, 'a.js', 1, 12)
+                        .addLine()
+                        .addMapping(0, 'a.js', 3, 0)
+                        .addMapping(2, 'a.js', 3, 2)
+                        .addMapping(3, 'a.js', 3, 3)
+                        .addMapping(10, 'a.js', 3, 10)
+                        .addMapping(11, 'a.js', 3, 11)
+                        .addMapping(21, 'a.js', 3, 11)
+                        .addMapping(22, 'a.js', 3, 12)
+                        .addLine()
+                        .addMapping(4, 'a.js', 4, 4)
+                        .addMapping(11, 'a.js', 4, 11)
+                        .addMapping(12, 'a.js', 4, 12)
+                        .addMapping(15, 'a.js', 4, 15)
+                        .addMapping(16, 'a.js', 4, 16)
+                        .addMapping(21, 'a.js', 4, 21)
+                        .addMapping(22, 'a.js', 4, 22)
+                        .addMapping(23, 'a.js', 4, 23)
+                        .addLine()
+                        .addMapping(0, 'a.js', 5, 0)
+                        .addMapping(1, 'a.js', 5, 1)
+                        .addMapping(2, 'a.js', 5, 2)
+                        .addMapping(3, 'a.js', 5, 2);
+
+        // Generated with https://sokra.github.io/source-map-visualization using a TS source map
+        expect(map.toJSON() !.mappings)
+            .toEqual(
+                'AAAA,IAAM,CAAC,GAAe,CAAC,CAAC;AACxB,IAAM,CAAC,GAAG,CAAC,CAAC;AAEZ,EAAE,CAAC,OAAO,CAAC,UAAA,CAAC;IACR,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC,CAAC,CAAA');
+      });
+
+      it('should include the files and their contents', () => {
+        const map = new SourceMapGenerator('out.js')
+                        .addSource('inline.ts', 'inline')
+                        .addSource('inline.ts', 'inline')  // make sur the sources are dedup
+                        .addSource('url.ts', null)
+                        .addLine()
+                        .addMapping(0, 'inline.ts', 0, 0)
+                        .toJSON() !;
+
+        expect(map.file).toEqual('out.js');
+        expect(map.sources).toEqual(['inline.ts', 'url.ts']);
+        expect(map.sourcesContent).toEqual(['inline', null]);
+      });
+
+      it('should not generate source maps when there is no mapping', () => {
+        const smg = new SourceMapGenerator('out.js').addSource('inline.ts', 'inline').addLine();
+
+        expect(smg.toJSON()).toEqual(null);
+        expect(smg.toJsComment()).toEqual('');
+      });
+    });
+
+    describe('encodeB64String', () => {
+      it('should return the b64 encoded value', () => {
+        [['', ''], ['a', 'YQ=='], ['Foo', 'Rm9v'], ['Foo1', 'Rm9vMQ=='], ['Foo12', 'Rm9vMTI='],
+         ['Foo123', 'Rm9vMTIz'],
+        ].forEach(([src, b64]) => expect(toBase64String(src)).toEqual(b64));
+      });
+    });
+
+    describe('errors', () => {
+      it('should throw when mappings are added out of order', () => {
+        expect(() => {
+          new SourceMapGenerator('out.js')
+              .addSource('in.js')
+              .addLine()
+              .addMapping(10, 'in.js', 0, 0)
+              .addMapping(0, 'in.js', 0, 0);
+        }).toThrowError('Mapping should be added in output order');
+      });
+
+      it('should throw when adding segments before any line is created', () => {
+        expect(() => {
+          new SourceMapGenerator('out.js').addSource('in.js').addMapping(0, 'in.js', 0, 0);
+        }).toThrowError('A line must be added before mappings can be added');
+      });
+
+      it('should throw when adding segments referencing unknown sources', () => {
+        expect(() => {
+          new SourceMapGenerator('out.js').addSource('in.js').addLine().addMapping(
+              0, 'in_.js', 0, 0);
+        }).toThrowError('Unknown source file "in_.js"');
+      });
+
+      it('should throw when adding segments without column', () => {
+        expect(() => {
+          new SourceMapGenerator('out.js').addSource('in.js').addLine().addMapping(null !);
+        }).toThrowError('The column in the generated code must be provided');
+      });
+
+      it('should throw when adding segments with a source url but no position', () => {
+        expect(() => {
+          new SourceMapGenerator('out.js').addSource('in.js').addLine().addMapping(0, 'in.js');
+        }).toThrowError('The source location must be provided when a source url is provided');
+        expect(() => {
+          new SourceMapGenerator('out.js').addSource('in.js').addLine().addMapping(0, 'in.js', 0);
+        }).toThrowError('The source location must be provided when a source url is provided');
+      });
+    });
+  });
+}
diff --git a/packages/compiler/test/output/ts_emitter_node_only_spec.ts b/packages/compiler/test/output/ts_emitter_node_only_spec.ts
new file mode 100644
index 000000000000..b1ce420096ea
--- /dev/null
+++ b/packages/compiler/test/output/ts_emitter_node_only_spec.ts
@@ -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
+ */
+
+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 {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';
+
+import {extractSourceMap, originalPositionFor} from '@angular/compiler/testing/src/output/source_map_util';
+
+const someGenFilePath = 'somePackage/someGenFile';
+
+{
+  // Not supported features of our OutputAst in TS:
+  // - real `const` like in Dart
+  // - final fields
+
+  describe('TypeScriptEmitter', () => {
+    let emitter: TypeScriptEmitter;
+    let someVar: o.ReadVarExpr;
+
+    beforeEach(() => {
+      emitter = new TypeScriptEmitter();
+      someVar = o.variable('someVar');
+    });
+
+    function emitSourceMap(stmt: o.Statement | o.Statement[], preamble?: string): SourceMap {
+      const stmts = Array.isArray(stmt) ? stmt : [stmt];
+      const source = emitter.emitStatements(someGenFilePath, stmts, preamble);
+      return extractSourceMap(source) !;
+    }
+
+    describe('source maps', () => {
+      it('should emit an inline source map', () => {
+        const source = new ParseSourceFile(';;;var', 'in.js');
+        const startLocation = new ParseLocation(source, 0, 0, 3);
+        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 */');
+
+        expect(sm.sources).toEqual([someGenFilePath, 'in.js']);
+        expect(sm.sourcesContent).toEqual([' ', ';;;var']);
+        expect(originalPositionFor(sm, {line: 3, column: 0}))
+            .toEqual({line: 1, column: 3, source: 'in.js'});
+      });
+    });
+  });
+}
diff --git a/packages/compiler/test/output/ts_emitter_spec.ts b/packages/compiler/test/output/ts_emitter_spec.ts
new file mode 100644
index 000000000000..e9f3c41a49c4
--- /dev/null
+++ b/packages/compiler/test/output/ts_emitter_spec.ts
@@ -0,0 +1,492 @@
+/**
+ * @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/src/aot/static_symbol';
+import * as o from '@angular/compiler/src/output/output_ast';
+import {TypeScriptEmitter} from '@angular/compiler/src/output/ts_emitter';
+import {ParseLocation, ParseSourceFile, ParseSourceSpan} from '@angular/compiler/src/parse_util';
+import {stripSourceMapAndNewLine} from './abstract_emitter_spec';
+
+const someGenFilePath = 'somePackage/someGenFile';
+const anotherModuleUrl = 'somePackage/someOtherPath';
+
+const sameModuleIdentifier = new o.ExternalReference(null, 'someLocalId', null);
+
+const externalModuleIdentifier = new o.ExternalReference(anotherModuleUrl, 'someExternalId', null);
+
+{
+  // Not supported features of our OutputAst in TS:
+  // - real `const` like in Dart
+  // - final fields
+
+  describe('TypeScriptEmitter', () => {
+    let emitter: TypeScriptEmitter;
+    let someVar: o.ReadVarExpr;
+
+    beforeEach(() => {
+      emitter = new TypeScriptEmitter();
+      someVar = o.variable('someVar', null, null);
+    });
+
+    function emitStmt(stmt: o.Statement | o.Statement[], preamble?: string): string {
+      const stmts = Array.isArray(stmt) ? stmt : [stmt];
+      const source = emitter.emitStatements(someGenFilePath, stmts, preamble);
+      return stripSourceMapAndNewLine(source);
+    }
+
+    it('should declare variables', () => {
+      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(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;`);
+      expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(o.INFERRED_TYPE)))
+          .toEqual(`var 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('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 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, [o.StmtModifier.Exported])))
+            .toEqual([
+              `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(null, [o.StmtModifier.Exported])))
+            .toEqual([
+              `export {someExternalId as someVar} from 'somePackage/someOtherPath';`, ``
+            ].join('\n'));
+      });
+
+      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([
+              `export {someExternalId as someVar,someExternalId2 as someVar2} from 'somePackage/someOtherPath';`,
+              ``
+            ].join('\n'));
+      });
+    });
+
+    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 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 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', () => {
+      expect(emitStmt(o.literal(null).toStmt())).toEqual('(null as any);');
+      expect(emitStmt(o.literal(undefined).toStmt())).toEqual('(undefined as any);');
+      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([
+        `import * as i0 from 'somePackage/someOtherPath';`, `i0.someExternalId;`
+      ].join('\n'));
+    });
+
+    it('should support operators', () => {
+      const lhs = o.variable('lhs');
+      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);');
+
+      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(['():void => {', '};'].join('\n'));
+      expect(emitStmt(o.fn([], [new o.ReturnStatement(o.literal(1))], o.INT_TYPE).toStmt()))
+          .toEqual(['():number => {', '  return 1;\n};'].join('\n'));
+      expect(emitStmt(o.fn([new o.FnParam('param1', o.INT_TYPE)], []).toStmt())).toEqual([
+        '(param1:number):void => {', '};'
+      ].join('\n'));
+    });
+
+    it('should support function statements', () => {
+      expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], [
+      ]))).toEqual(['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'));
+      expect(emitStmt(new o.DeclareFunctionStmt('someFn', [new o.FnParam('param1', o.INT_TYPE)], [
+      ]))).toEqual(['function someFn(param1:number):void {', '}'].join('\n'));
+    });
+
+    it('should support comments', () => {
+      expect(emitStmt(new o.CommentStmt('a\nb'))).toEqual(['// a', '// b'].join('\n'));
+    });
+
+    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(); }'
+      ].join('\n'));
+      expect(emitStmt(new o.IfStmt(o.variable('cond'), [trueCase], [falseCase]))).toEqual([
+        'if (cond) {', '  trueCase();', '} else {', '  falseCase();', '}'
+      ].join('\n'));
+    });
+
+    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) {', '  const stack:any = error.stack;',
+        '  catchFn(error,stack);', '}'
+      ].join('\n'));
+    });
+
+    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 {', '}'].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'));
+      });
+
+      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() {', '  }', '}'].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [],
+                   new o.ClassMethod(null !, [new o.FnParam('someParam', o.INT_TYPE)], []), [])))
+            .toEqual(
+                ['class SomeClass {', '  constructor(someParam:number) {', '  }', '}'].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [], new o.ClassMethod(null !, [], [superCall]), [])))
+            .toEqual([
+              'class SomeClass {', '  constructor() {', '    super(someParam);', '  }', '}'
+            ].join('\n'));
+        expect(
+            emitStmt(new o.ClassStmt(
+                'SomeClass', null !, [], [], new o.ClassMethod(null !, [], [callSomeMethod]), [])))
+            .toEqual([
+              'class SomeClass {', '  constructor() {', '    this.someMethod();', '  }', '}'
+            ].join('\n'));
+      });
+
+      it('should support declaring fields', () => {
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [new o.ClassField('someField')], [], null !, [])))
+            .toEqual(['class SomeClass {', '  someField:any;', '}'].join('\n'));
+        expect(
+            emitStmt(new o.ClassStmt(
+                'SomeClass', null !, [new o.ClassField('someField', o.INT_TYPE)], [], null !, [])))
+            .toEqual(['class SomeClass {', '  someField:number;', '}'].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !,
+                   [new o.ClassField('someField', o.INT_TYPE, [o.StmtModifier.Private])], [],
+                   null !, [])))
+            .toEqual(['class SomeClass {', '  /*private*/ someField:number;', '}'].join('\n'));
+      });
+
+      it('should support declaring getters', () => {
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [new o.ClassGetter('someGetter', [])], null !, [])))
+            .toEqual(['class SomeClass {', '  get someGetter():any {', '  }', '}'].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [new o.ClassGetter('someGetter', [], o.INT_TYPE)],
+                   null !, [])))
+            .toEqual(['class SomeClass {', '  get someGetter():number {', '  }', '}'].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [new o.ClassGetter('someGetter', [callSomeMethod])],
+                   null !, [])))
+            .toEqual([
+              'class SomeClass {', '  get someGetter():any {', '    this.someMethod();', '  }', '}'
+            ].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [],
+                   [new o.ClassGetter('someGetter', [], null !, [o.StmtModifier.Private])], null !,
+                   [])))
+            .toEqual(
+                ['class SomeClass {', '  private get someGetter():any {', '  }', '}'].join('\n'));
+      });
+
+      it('should support methods', () => {
+        expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [
+          new o.ClassMethod('someMethod', [], [])
+        ]))).toEqual(['class SomeClass {', '  someMethod():void {', '  }', '}'].join('\n'));
+        expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [
+          new o.ClassMethod('someMethod', [], [], o.INT_TYPE)
+        ]))).toEqual(['class SomeClass {', '  someMethod():number {', '  }', '}'].join('\n'));
+        expect(
+            emitStmt(new o.ClassStmt(
+                'SomeClass', null !, [], [], null !,
+                [new o.ClassMethod('someMethod', [new o.FnParam('someParam', o.INT_TYPE)], [])])))
+            .toEqual([
+              'class SomeClass {', '  someMethod(someParam:number):void {', '  }', '}'
+            ].join('\n'));
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [], null !,
+                   [new o.ClassMethod('someMethod', [], [callSomeMethod])])))
+            .toEqual([
+              'class SomeClass {', '  someMethod():void {', '    this.someMethod();', '  }', '}'
+            ].join('\n'));
+      });
+    });
+
+    it('should support builtin types', () => {
+      const writeVarExpr = o.variable('a').set(o.NULL_EXPR);
+      expect(emitStmt(writeVarExpr.toDeclStmt(o.DYNAMIC_TYPE)))
+          .toEqual('var a:any = (null as any);');
+      expect(emitStmt(writeVarExpr.toDeclStmt(o.BOOL_TYPE)))
+          .toEqual('var a:boolean = (null as any);');
+      expect(emitStmt(writeVarExpr.toDeclStmt(o.INT_TYPE)))
+          .toEqual('var a:number = (null as any);');
+      expect(emitStmt(writeVarExpr.toDeclStmt(o.NUMBER_TYPE)))
+          .toEqual('var a:number = (null as any);');
+      expect(emitStmt(writeVarExpr.toDeclStmt(o.STRING_TYPE)))
+          .toEqual('var a:string = (null as any);');
+      expect(emitStmt(writeVarExpr.toDeclStmt(o.FUNCTION_TYPE)))
+          .toEqual('var a:Function = (null as any);');
+    });
+
+    it('should support external types', () => {
+      const writeVarExpr = o.variable('a').set(o.NULL_EXPR);
+      expect(emitStmt(writeVarExpr.toDeclStmt(o.importType(sameModuleIdentifier))))
+          .toEqual('var a:someLocalId = (null as any);');
+      expect(emitStmt(writeVarExpr.toDeclStmt(o.importType(externalModuleIdentifier)))).toEqual([
+        `import * as i0 from 'somePackage/someOtherPath';`,
+        `var a:i0.someExternalId = (null as any);`
+      ].join('\n'));
+    });
+
+    it('should support expression types', () => {
+      expect(
+          emitStmt(o.variable('a').set(o.NULL_EXPR).toDeclStmt(o.expressionType(o.variable('b')))))
+          .toEqual('var a:b = (null as any);');
+    });
+
+    it('should support expressions with type parameters', () => {
+      expect(emitStmt(o.variable('a')
+                          .set(o.NULL_EXPR)
+                          .toDeclStmt(o.importType(externalModuleIdentifier, [o.STRING_TYPE]))))
+          .toEqual([
+            `import * as i0 from 'somePackage/someOtherPath';`,
+            `var a:i0.someExternalId<string> = (null as any);`
+          ].join('\n'));
+    });
+
+    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:any[] = (null as any);');
+      expect(emitStmt(writeVarExpr.toDeclStmt(new o.ArrayType(o.INT_TYPE))))
+          .toEqual('var a:number[] = (null as any);');
+
+      expect(emitStmt(writeVarExpr.toDeclStmt(new o.MapType(null))))
+          .toEqual('var a:{[key: string]:any} = (null as any);');
+      expect(emitStmt(writeVarExpr.toDeclStmt(new o.MapType(o.INT_TYPE))))
+          .toEqual('var a:{[key: string]:number} = (null as any);');
+    });
+
+    describe('comments', () => {
+      it('should support a preamble', () => {
+        expect(emitStmt(o.variable('a').toStmt(), '/* SomePreamble */')).toBe([
+          '/* SomePreamble */', 'a;'
+        ].join('\n'));
+      });
+
+      it('should support singleline comments', () => {
+        expect(emitStmt(new o.CommentStmt('Simple comment'))).toBe('// Simple comment');
+      });
+
+      it('should support multiline comments', () => {
+        expect(emitStmt(new o.CommentStmt('Multiline comment', true)))
+            .toBe('/* Multiline comment */');
+        expect(emitStmt(new o.CommentStmt(`Multiline\ncomment`, true)))
+            .toBe(`/* Multiline\ncomment */`);
+      });
+
+      it('should support JSDoc comments', () => {
+        expect(emitStmt(new o.JSDocCommentStmt([{text: 'Intro comment'}])))
+            .toBe(`/**\n * Intro comment\n */`);
+        expect(emitStmt(new o.JSDocCommentStmt([
+          {tagName: o.JSDocTagName.Desc, text: 'description'}
+        ]))).toBe(`/**\n * @desc description\n */`);
+        expect(emitStmt(new o.JSDocCommentStmt([
+          {text: 'Intro comment'},
+          {tagName: o.JSDocTagName.Desc, text: 'description'},
+          {tagName: o.JSDocTagName.Id, text: '{number} identifier 123'},
+        ])))
+            .toBe(
+                `/**\n * Intro comment\n * @desc description\n * @id {number} identifier 123\n */`);
+      });
+    });
+
+    describe('emitter context', () => {
+      it('should be able to back to the generating span', () => {
+        const file = new ParseSourceFile('some content', 'a.ts');
+        const returnSpan = new ParseSourceSpan(
+            new ParseLocation(file, 100, 10, 10), new ParseLocation(file, 200, 20, 10));
+        const referenceSpan = new ParseSourceSpan(
+            new ParseLocation(file, 150, 15, 10), new ParseLocation(file, 175, 17, 10));
+        const statements = [new o.ClassStmt(
+            'SomeClass', null, [], [], new o.ClassMethod(null, [], []),
+            [new o.ClassMethod('someMethod', [new o.FnParam('a', o.INT_TYPE)], [
+              o.variable('someVar', o.INT_TYPE).set(o.literal(0)).toDeclStmt(),
+              new o.ReturnStatement(o.variable('someVar', null, referenceSpan), returnSpan)
+            ])])];
+        const {sourceText, context} =
+            emitter.emitStatementsAndContext('a.ts', statements, '/* some preamble /*\n\n');
+        const spanOf = (text: string, after: number = 0) => {
+          const location = sourceText.indexOf(text, after);
+          const {line, col} = calculateLineCol(sourceText, location);
+          return context.spanOf(line, col);
+        };
+        const returnLoc = sourceText.indexOf('return');
+        expect(spanOf('return someVar')).toEqual(returnSpan, 'return span calculated incorrectly');
+        expect(spanOf(';', returnLoc)).toEqual(returnSpan, 'reference span calculated incorrectly');
+        expect(spanOf('someVar', returnLoc))
+            .toEqual(referenceSpan, 'return span calculated incorrectly');
+      });
+    });
+  });
+}
+
+function calculateLineCol(text: string, offset: number): {line: number, col: number} {
+  const lines = text.split('\n');
+  let line = 0;
+  for (let cur = 0; cur < text.length; line++) {
+    const next = cur + lines[line].length + 1;
+    if (next > offset) {
+      return {line, col: offset - cur};
+    }
+    cur = next;
+  }
+  return {line, col: 0};
+}
diff --git a/packages/compiler/test/parse_util_spec.ts b/packages/compiler/test/parse_util_spec.ts
new file mode 100644
index 000000000000..87420ea83d21
--- /dev/null
+++ b/packages/compiler/test/parse_util_spec.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 {ParseError, ParseErrorLevel, ParseLocation, ParseSourceFile, ParseSourceSpan} from '../src/parse_util';
+
+{
+  describe('ParseError', () => {
+    it('should reflect the level in the message', () => {
+      const file = new ParseSourceFile(`foo\nbar\nfoo`, 'url');
+      const start = new ParseLocation(file, 4, 1, 0);
+      const end = new ParseLocation(file, 6, 1, 2);
+      const span = new ParseSourceSpan(start, end);
+
+      const fatal = new ParseError(span, 'fatal', ParseErrorLevel.ERROR);
+      expect(fatal.toString()).toEqual('fatal ("foo\n[ERROR ->]bar\nfoo"): url@1:0');
+
+      const warning = new ParseError(span, 'warning', ParseErrorLevel.WARNING);
+      expect(warning.toString()).toEqual('warning ("foo\n[WARNING ->]bar\nfoo"): url@1:0');
+    });
+  });
+}
\ No newline at end of file
diff --git a/packages/compiler/test/pipe_resolver_mock_spec.ts b/packages/compiler/test/pipe_resolver_mock_spec.ts
new file mode 100644
index 000000000000..d7ae2ee6c11d
--- /dev/null
+++ b/packages/compiler/test/pipe_resolver_mock_spec.ts
@@ -0,0 +1,40 @@
+/**
+ * @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, Pipe} from '@angular/core';
+import {inject} from '@angular/core/testing';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+import {MockPipeResolver} from '../testing';
+
+{
+  describe('MockPipeResolver', () => {
+    let pipeResolver: MockPipeResolver;
+
+    beforeEach(inject([Injector], (injector: Injector) => {
+      pipeResolver = new MockPipeResolver(new JitReflector());
+    }));
+
+    describe('Pipe overriding', () => {
+      it('should fallback to the default PipeResolver when templates are not overridden', () => {
+        const pipe = pipeResolver.resolve(SomePipe);
+        expect(pipe.name).toEqual('somePipe');
+      });
+
+      it('should allow overriding the @Pipe', () => {
+        pipeResolver.setPipe(SomePipe, new Pipe({name: 'someOtherName'}));
+        const pipe = pipeResolver.resolve(SomePipe);
+        expect(pipe.name).toEqual('someOtherName');
+      });
+    });
+  });
+}
+
+@Pipe({name: 'somePipe'})
+class SomePipe {
+}
diff --git a/packages/compiler/test/pipe_resolver_spec.ts b/packages/compiler/test/pipe_resolver_spec.ts
new file mode 100644
index 000000000000..e33897310785
--- /dev/null
+++ b/packages/compiler/test/pipe_resolver_spec.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 {PipeResolver} from '@angular/compiler/src/pipe_resolver';
+import {ɵstringify as stringify} from '@angular/core';
+import {Pipe} from '@angular/core/src/metadata';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+@Pipe({name: 'somePipe', pure: true})
+class SomePipe {
+}
+
+class SimpleClass {}
+
+{
+  describe('PipeResolver', () => {
+    let resolver: PipeResolver;
+
+    beforeEach(() => { resolver = new PipeResolver(new JitReflector()); });
+
+    it('should read out the metadata from the class', () => {
+      const moduleMetadata = resolver.resolve(SomePipe);
+      expect(moduleMetadata).toEqual(new Pipe({name: 'somePipe', pure: true}));
+    });
+
+    it('should throw when simple class has no pipe decorator', () => {
+      expect(() => resolver.resolve(SimpleClass))
+          .toThrowError(`No Pipe decorator found on ${stringify(SimpleClass)}`);
+    });
+
+    it('should support inheriting the metadata', function() {
+      @Pipe({name: 'p'})
+      class Parent {
+      }
+
+      class ChildNoDecorator extends Parent {}
+
+      @Pipe({name: 'c'})
+      class ChildWithDecorator extends Parent {
+      }
+
+      expect(resolver.resolve(ChildNoDecorator)).toEqual(new Pipe({name: 'p'}));
+
+      expect(resolver.resolve(ChildWithDecorator)).toEqual(new Pipe({name: 'c'}));
+    });
+
+  });
+}
diff --git a/packages/compiler/test/render3/BUILD.bazel b/packages/compiler/test/render3/BUILD.bazel
new file mode 100644
index 000000000000..48af3bc5925d
--- /dev/null
+++ b/packages/compiler/test/render3/BUILD.bazel
@@ -0,0 +1,27 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        ["**/*.ts"],
+    ),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler/test:test_utils",
+        "//packages/compiler/test/expression_parser/utils",
+        "//packages/compiler/testing",
+        "//packages/core",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
diff --git a/packages/compiler/test/render3/README.md b/packages/compiler/test/render3/README.md
new file mode 100644
index 000000000000..7c522a139603
--- /dev/null
+++ b/packages/compiler/test/render3/README.md
@@ -0,0 +1 @@
+Tests in this directory are excluded from running in the browser and only run in node.
\ No newline at end of file
diff --git a/packages/compiler/test/render3/r3_template_transform_spec.ts b/packages/compiler/test/render3/r3_template_transform_spec.ts
new file mode 100644
index 000000000000..ee9fa5bc631d
--- /dev/null
+++ b/packages/compiler/test/render3/r3_template_transform_spec.ts
@@ -0,0 +1,547 @@
+/**
+ * @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 {BindingType} from '../../src/expression_parser/ast';
+import {Lexer} from '../../src/expression_parser/lexer';
+import {Parser} from '../../src/expression_parser/parser';
+import {HtmlParser} from '../../src/ml_parser/html_parser';
+import {DEFAULT_INTERPOLATION_CONFIG} from '../../src/ml_parser/interpolation_config';
+import * as t from '../../src/render3/r3_ast';
+import {Render3ParseResult, htmlAstToRender3Ast} from '../../src/render3/r3_template_transform';
+import {BindingParser} from '../../src/template_parser/binding_parser';
+import {MockSchemaRegistry} from '../../testing';
+import {unparse} from '../expression_parser/utils/unparser';
+
+
+// Parse an html string to IVY specific info
+function parse(html: string): Render3ParseResult {
+  const htmlParser = new HtmlParser();
+
+  const parseResult = htmlParser.parse(html, 'path:://to/template', true);
+
+  if (parseResult.errors.length > 0) {
+    const msg = parseResult.errors.map(e => e.toString()).join('\n');
+    throw new Error(msg);
+  }
+
+  const htmlNodes = parseResult.rootNodes;
+  const expressionParser = new Parser(new Lexer());
+  const schemaRegistry = new MockSchemaRegistry(
+      {'invalidProp': false}, {'mappedAttr': 'mappedProp'}, {'unknown': false, 'un-known': false},
+      ['onEvent'], ['onEvent']);
+  const bindingParser =
+      new BindingParser(expressionParser, DEFAULT_INTERPOLATION_CONFIG, schemaRegistry, null, []);
+  return htmlAstToRender3Ast(htmlNodes, bindingParser);
+}
+
+// Transform an IVY AST to a flat list of nodes to ease testing
+class R3AstHumanizer implements t.Visitor<void> {
+  result: any[] = [];
+
+  visitElement(element: t.Element) {
+    this.result.push(['Element', element.name]);
+    this.visitAll([
+      element.attributes,
+      element.inputs,
+      element.outputs,
+      element.references,
+      element.children,
+    ]);
+  }
+
+  visitTemplate(template: t.Template) {
+    this.result.push(['Template']);
+    this.visitAll([
+      template.attributes,
+      template.inputs,
+      template.references,
+      template.variables,
+      template.children,
+    ]);
+  }
+
+  visitContent(content: t.Content) {
+    this.result.push(['Content', content.selectorIndex]);
+    t.visitAll(this, content.attributes);
+  }
+
+  visitVariable(variable: t.Variable) {
+    this.result.push(['Variable', variable.name, variable.value]);
+  }
+
+  visitReference(reference: t.Reference) {
+    this.result.push(['Reference', reference.name, reference.value]);
+  }
+
+  visitTextAttribute(attribute: t.TextAttribute) {
+    this.result.push(['TextAttribute', attribute.name, attribute.value]);
+  }
+
+  visitBoundAttribute(attribute: t.BoundAttribute) {
+    this.result.push([
+      'BoundAttribute',
+      attribute.type,
+      attribute.name,
+      unparse(attribute.value),
+    ]);
+  }
+
+  visitBoundEvent(event: t.BoundEvent) {
+    this.result.push([
+      'BoundEvent',
+      event.name,
+      event.target,
+      unparse(event.handler),
+    ]);
+  }
+
+  visitText(text: t.Text) { this.result.push(['Text', text.value]); }
+
+  visitBoundText(text: t.BoundText) { this.result.push(['BoundText', unparse(text.value)]); }
+
+  private visitAll(nodes: t.Node[][]) { nodes.forEach(node => t.visitAll(this, node)); }
+}
+
+function expectFromHtml(html: string) {
+  const res = parse(html);
+  return expectFromR3Nodes(res.nodes);
+}
+
+function expectFromR3Nodes(nodes: t.Node[]) {
+  const humanizer = new R3AstHumanizer();
+  t.visitAll(humanizer, nodes);
+  return expect(humanizer.result);
+}
+
+describe('R3 template transform', () => {
+  describe('Nodes without binding', () => {
+    it('should parse text nodes', () => {
+      expectFromHtml('a').toEqual([
+        ['Text', 'a'],
+      ]);
+    });
+
+    it('should parse elements with attributes', () => {
+      expectFromHtml('<div a=b></div>').toEqual([
+        ['Element', 'div'],
+        ['TextAttribute', 'a', 'b'],
+      ]);
+    });
+
+    it('should parse ngContent', () => {
+      const res = parse('<ng-content select="a"></ng-content>');
+      expect(res.hasNgContent).toEqual(true);
+      expect(res.ngContentSelectors).toEqual(['a']);
+      expectFromR3Nodes(res.nodes).toEqual([
+        ['Content', 1],
+        ['TextAttribute', 'select', 'a'],
+      ]);
+    });
+
+    it('should parse ngContent when it contains WS only', () => {
+      expectFromHtml('<ng-content select="a">    \n   </ng-content>').toEqual([
+        ['Content', 1],
+        ['TextAttribute', 'select', 'a'],
+      ]);
+    });
+
+    it('should parse ngContent regardless the namespace', () => {
+      expectFromHtml('<svg><ng-content select="a"></ng-content></svg>').toEqual([
+        ['Element', ':svg:svg'],
+        ['Content', 1],
+        ['TextAttribute', 'select', 'a'],
+      ]);
+    });
+  });
+
+  describe('Bound text nodes', () => {
+    it('should parse bound text nodes', () => {
+      expectFromHtml('{{a}}').toEqual([
+        ['BoundText', '{{ a }}'],
+      ]);
+    });
+  });
+
+  describe('Bound attributes', () => {
+    it('should parse mixed case bound properties', () => {
+      expectFromHtml('<div [someProp]="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Property, 'someProp', 'v'],
+      ]);
+    });
+
+    it('should parse bound properties via bind- ', () => {
+      expectFromHtml('<div bind-prop="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Property, 'prop', 'v'],
+      ]);
+    });
+
+    it('should parse bound properties via {{...}}', () => {
+      expectFromHtml('<div prop="{{v}}"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Property, 'prop', '{{ v }}'],
+      ]);
+    });
+
+    it('should parse dash case bound properties', () => {
+      expectFromHtml('<div [some-prop]="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Property, 'some-prop', 'v'],
+      ]);
+    });
+
+    it('should parse dotted name bound properties', () => {
+      expectFromHtml('<div [d.ot]="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Property, 'd.ot', 'v'],
+      ]);
+    });
+
+    it('should normalize property names via the element schema', () => {
+      expectFromHtml('<div [mappedAttr]="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Property, 'mappedProp', 'v'],
+      ]);
+    });
+
+    it('should parse mixed case bound attributes', () => {
+      expectFromHtml('<div [attr.someAttr]="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Attribute, 'someAttr', 'v'],
+      ]);
+    });
+
+    it('should parse and dash case bound classes', () => {
+      expectFromHtml('<div [class.some-class]="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Class, 'some-class', 'v'],
+      ]);
+    });
+
+    it('should parse mixed case bound classes', () => {
+      expectFromHtml('<div [class.someClass]="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Class, 'someClass', 'v'],
+      ]);
+    });
+
+    it('should parse mixed case bound styles', () => {
+      expectFromHtml('<div [style.someStyle]="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Style, 'someStyle', 'v'],
+      ]);
+    });
+  });
+
+  describe('templates', () => {
+    it('should support * directives', () => {
+      expectFromHtml('<div *ngIf></div>').toEqual([
+        ['Template'],
+        ['TextAttribute', 'ngIf', ''],
+        ['Element', 'div'],
+      ]);
+    });
+
+    it('should support <ng-template>', () => {
+      expectFromHtml('<ng-template></ng-template>').toEqual([
+        ['Template'],
+      ]);
+    });
+
+    it('should support <ng-template> regardless the namespace', () => {
+      expectFromHtml('<svg><ng-template></ng-template></svg>').toEqual([
+        ['Element', ':svg:svg'],
+        ['Template'],
+      ]);
+    });
+
+    it('should support reference via #...', () => {
+      expectFromHtml('<ng-template #a></ng-template>').toEqual([
+        ['Template'],
+        ['Reference', 'a', ''],
+      ]);
+    });
+
+    it('should support reference via ref-...', () => {
+      expectFromHtml('<ng-template ref-a></ng-template>').toEqual([
+        ['Template'],
+        ['Reference', 'a', ''],
+      ]);
+    });
+
+    it('should parse variables via let-...', () => {
+      expectFromHtml('<ng-template let-a="b"></ng-template>').toEqual([
+        ['Template'],
+        ['Variable', 'a', 'b'],
+      ]);
+    });
+
+    it('should parse attributes', () => {
+      expectFromHtml('<ng-template k1="v1" k2="v2"></ng-template>').toEqual([
+        ['Template'],
+        ['TextAttribute', 'k1', 'v1'],
+        ['TextAttribute', 'k2', 'v2'],
+      ]);
+    });
+
+    it('should parse bound attributes', () => {
+      expectFromHtml('<ng-template [k1]="v1" [k2]="v2"></ng-template>').toEqual([
+        ['Template'],
+        ['BoundAttribute', BindingType.Property, 'k1', 'v1'],
+        ['BoundAttribute', BindingType.Property, 'k2', 'v2'],
+      ]);
+    });
+  });
+
+  describe('inline templates', () => {
+    it('should support attribute and bound attributes', () => {
+      expectFromHtml('<div *ngFor="item of items"></div>').toEqual([
+        ['Template'],
+        ['BoundAttribute', BindingType.Property, 'ngFor', 'item'],
+        ['BoundAttribute', BindingType.Property, 'ngForOf', 'items'],
+        ['Element', 'div'],
+      ]);
+    });
+
+    it('should parse variables via let ...', () => {
+      expectFromHtml('<div *ngIf="let a=b"></div>').toEqual([
+        ['Template'],
+        ['TextAttribute', 'ngIf', ''],
+        ['Variable', 'a', 'b'],
+        ['Element', 'div'],
+      ]);
+    });
+
+    it('should parse variables via as ...', () => {
+      expectFromHtml('<div *ngIf="expr as local"></div>').toEqual([
+        ['Template'],
+        ['BoundAttribute', BindingType.Property, 'ngIf', 'expr'],
+        ['Variable', 'local', 'ngIf'],
+        ['Element', 'div'],
+      ]);
+    });
+  });
+
+  describe('events', () => {
+    it('should parse bound events with a target', () => {
+      expectFromHtml('<div (window:event)="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundEvent', 'event', 'window', 'v'],
+      ]);
+    });
+
+    it('should parse event names case sensitive', () => {
+      expectFromHtml('<div (some-event)="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundEvent', 'some-event', null, 'v'],
+      ]);
+      expectFromHtml('<div (someEvent)="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundEvent', 'someEvent', null, 'v'],
+      ]);
+    });
+
+    it('should parse bound events via on-', () => {
+      expectFromHtml('<div on-event="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundEvent', 'event', null, 'v'],
+      ]);
+    });
+
+    it('should parse bound events and properties via [(...)]', () => {
+      expectFromHtml('<div [(prop)]="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Property, 'prop', 'v'],
+        ['BoundEvent', 'propChange', null, 'v = $event'],
+      ]);
+    });
+
+    it('should parse bound events and properties via bindon-', () => {
+      expectFromHtml('<div bindon-prop="v"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Property, 'prop', 'v'],
+        ['BoundEvent', 'propChange', null, 'v = $event'],
+      ]);
+    });
+
+    it('should report an error on empty expression', () => {
+      expect(() => parse('<div (event)="">')).toThrowError(/Empty expressions are not allowed/);
+      expect(() => parse('<div (event)="   ">')).toThrowError(/Empty expressions are not allowed/);
+    });
+  });
+
+  describe('references', () => {
+    it('should parse references via #...', () => {
+      expectFromHtml('<div #a></div>').toEqual([
+        ['Element', 'div'],
+        ['Reference', 'a', ''],
+      ]);
+    });
+
+    it('should parse references via ref-', () => {
+      expectFromHtml('<div ref-a></div>').toEqual([
+        ['Element', 'div'],
+        ['Reference', 'a', ''],
+      ]);
+    });
+
+    it('should parse camel case references', () => {
+      expectFromHtml('<div #someA></div>').toEqual([
+        ['Element', 'div'],
+        ['Reference', 'someA', ''],
+      ]);
+    });
+  });
+
+  describe('ng-content', () => {
+    it('should parse ngContent without selector', () => {
+      const res = parse('<ng-content></ng-content>');
+      expect(res.hasNgContent).toEqual(true);
+      expect(res.ngContentSelectors).toEqual([]);
+      expectFromR3Nodes(res.nodes).toEqual([
+        ['Content', 0],
+      ]);
+    });
+
+    it('should parse ngContent with a * selector', () => {
+      const res = parse('<ng-content></ng-content>');
+      const selectors = [''];
+      expect(res.hasNgContent).toEqual(true);
+      expect(res.ngContentSelectors).toEqual([]);
+      expectFromR3Nodes(res.nodes).toEqual([
+        ['Content', 0],
+      ]);
+    });
+
+    it('should parse ngContent with a specific selector', () => {
+      const res = parse('<ng-content select="tag[attribute]"></ng-content>');
+      const selectors = ['', 'tag[attribute]'];
+      expect(res.hasNgContent).toEqual(true);
+      expect(res.ngContentSelectors).toEqual(['tag[attribute]']);
+      expectFromR3Nodes(res.nodes).toEqual([
+        ['Content', 1],
+        ['TextAttribute', 'select', selectors[1]],
+      ]);
+    });
+
+    it('should parse ngContent with a selector', () => {
+      const res = parse(
+          '<ng-content select="a"></ng-content><ng-content></ng-content><ng-content select="b"></ng-content>');
+      const selectors = ['', 'a', 'b'];
+      expect(res.hasNgContent).toEqual(true);
+      expect(res.ngContentSelectors).toEqual(['a', 'b']);
+      expectFromR3Nodes(res.nodes).toEqual([
+        ['Content', 1],
+        ['TextAttribute', 'select', selectors[1]],
+        ['Content', 0],
+        ['Content', 2],
+        ['TextAttribute', 'select', selectors[2]],
+      ]);
+    });
+
+    it('should parse ngProjectAs as an attribute', () => {
+      const res = parse('<ng-content ngProjectAs="a"></ng-content>');
+      expect(res.hasNgContent).toEqual(true);
+      expect(res.ngContentSelectors).toEqual([]);
+      expectFromR3Nodes(res.nodes).toEqual([
+        ['Content', 0],
+        ['TextAttribute', 'ngProjectAs', 'a'],
+      ]);
+    });
+  });
+
+  describe('Ignored elements', () => {
+    it('should ignore <script> elements', () => {
+      expectFromHtml('<script></script>a').toEqual([
+        ['Text', 'a'],
+      ]);
+    });
+
+    it('should ignore <style> elements', () => {
+      expectFromHtml('<style></style>a').toEqual([
+        ['Text', 'a'],
+      ]);
+    });
+  });
+
+  describe('<link rel="stylesheet">', () => {
+    it('should keep <link rel="stylesheet"> elements if they have an absolute url', () => {
+      expectFromHtml('<link rel="stylesheet" href="http://someurl">').toEqual([
+        ['Element', 'link'],
+        ['TextAttribute', 'rel', 'stylesheet'],
+        ['TextAttribute', 'href', 'http://someurl'],
+      ]);
+      expectFromHtml('<link REL="stylesheet" href="http://someurl">').toEqual([
+        ['Element', 'link'],
+        ['TextAttribute', 'REL', 'stylesheet'],
+        ['TextAttribute', 'href', 'http://someurl'],
+      ]);
+    });
+
+    it('should keep <link rel="stylesheet"> elements if they have no uri', () => {
+      expectFromHtml('<link rel="stylesheet">').toEqual([
+        ['Element', 'link'],
+        ['TextAttribute', 'rel', 'stylesheet'],
+      ]);
+      expectFromHtml('<link REL="stylesheet">').toEqual([
+        ['Element', 'link'],
+        ['TextAttribute', 'REL', 'stylesheet'],
+      ]);
+    });
+
+    it('should ignore <link rel="stylesheet"> elements if they have a relative uri', () => {
+      expectFromHtml('<link rel="stylesheet" href="./other.css">').toEqual([]);
+      expectFromHtml('<link REL="stylesheet" HREF="./other.css">').toEqual([]);
+    });
+  });
+
+  describe('ngNonBindable', () => {
+    it('should ignore bindings on children of elements with ngNonBindable', () => {
+      expectFromHtml('<div ngNonBindable>{{b}}</div>').toEqual([
+        ['Element', 'div'],
+        ['TextAttribute', 'ngNonBindable', ''],
+        ['Text', '{{b}}'],
+      ]);
+    });
+
+    it('should keep nested children of elements with ngNonBindable', () => {
+      expectFromHtml('<div ngNonBindable><span>{{b}}</span></div>').toEqual([
+        ['Element', 'div'],
+        ['TextAttribute', 'ngNonBindable', ''],
+        ['Element', 'span'],
+        ['Text', '{{b}}'],
+      ]);
+    });
+
+    it('should ignore <script> elements inside of elements with ngNonBindable', () => {
+      expectFromHtml('<div ngNonBindable><script></script>a</div>').toEqual([
+        ['Element', 'div'],
+        ['TextAttribute', 'ngNonBindable', ''],
+        ['Text', 'a'],
+      ]);
+    });
+
+    it('should ignore <style> elements inside of elements with ngNonBindable', () => {
+      expectFromHtml('<div ngNonBindable><style></style>a</div>').toEqual([
+        ['Element', 'div'],
+        ['TextAttribute', 'ngNonBindable', ''],
+        ['Text', 'a'],
+      ]);
+    });
+
+    it('should ignore <link rel="stylesheet"> elements inside of elements with ngNonBindable',
+       () => {
+         expectFromHtml('<div ngNonBindable><link rel="stylesheet">a</div>').toEqual([
+           ['Element', 'div'],
+           ['TextAttribute', 'ngNonBindable', ''],
+           ['Text', 'a'],
+         ]);
+       });
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler/test/render3/styling_spec.ts b/packages/compiler/test/render3/styling_spec.ts
new file mode 100644
index 000000000000..82d7dc71ffd3
--- /dev/null
+++ b/packages/compiler/test/render3/styling_spec.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 {hyphenate, parseStyle, stripUnnecessaryQuotes} from '../../src/render3/view/styling';
+
+describe('inline css style parsing', () => {
+  it('should parse empty or blank strings', () => {
+    const result1 = parseStyle('');
+    expect(result1).toEqual({});
+
+    const result2 = parseStyle('    ');
+    expect(result2).toEqual({});
+  });
+
+  it('should parse a string into a key/value map', () => {
+    const result = parseStyle('width:100px;height:200px;opacity:0');
+    expect(result).toEqual({width: '100px', height: '200px', opacity: '0'});
+  });
+
+  it('should trim values and properties', () => {
+    const result = parseStyle('width :333px ; height:666px    ; opacity: 0.5;');
+    expect(result).toEqual({width: '333px', height: '666px', opacity: '0.5'});
+  });
+
+  it('should chomp out start/end quotes', () => {
+    const result = parseStyle(
+        'content: "foo"; opacity: \'0.5\'; font-family: "Verdana", Helvetica, "sans-serif"');
+    expect(result).toEqual(
+        {content: 'foo', opacity: '0.5', 'font-family': '"Verdana", Helvetica, "sans-serif"'});
+  });
+
+  it('should not mess up with quoted strings that contain [:;] values', () => {
+    const result = parseStyle('content: "foo; man: guy"; width: 100px');
+    expect(result).toEqual({content: 'foo; man: guy', width: '100px'});
+  });
+
+  it('should not mess up with quoted strings that contain inner quote values', () => {
+    const quoteStr = '"one \'two\' three \"four\" five"';
+    const result = parseStyle(`content: ${quoteStr}; width: 123px`);
+    expect(result).toEqual({content: quoteStr, width: '123px'});
+  });
+
+  it('should respect parenthesis that are placed within a style', () => {
+    const result = parseStyle('background-image: url("foo.jpg")');
+    expect(result).toEqual({'background-image': 'url("foo.jpg")'});
+  });
+
+  it('should respect multi-level parenthesis that contain special [:;] characters', () => {
+    const result = parseStyle('color: rgba(calc(50 * 4), var(--cool), :5;); height: 100px;');
+    expect(result).toEqual({color: 'rgba(calc(50 * 4), var(--cool), :5;)', height: '100px'});
+  });
+
+  it('should hyphenate style properties from camel case', () => {
+    const result = parseStyle('borderWidth: 200px');
+    expect(result).toEqual({
+      'border-width': '200px',
+    });
+  });
+
+  describe('quote chomping', () => {
+    it('should remove the start and end quotes', () => {
+      expect(stripUnnecessaryQuotes('\'foo bar\'')).toEqual('foo bar');
+      expect(stripUnnecessaryQuotes('"foo bar"')).toEqual('foo bar');
+    });
+
+    it('should not remove quotes if the quotes are not at the start and end', () => {
+      expect(stripUnnecessaryQuotes('foo bar')).toEqual('foo bar');
+      expect(stripUnnecessaryQuotes('   foo bar   ')).toEqual('   foo bar   ');
+      expect(stripUnnecessaryQuotes('\'foo\' bar')).toEqual('\'foo\' bar');
+      expect(stripUnnecessaryQuotes('foo "bar"')).toEqual('foo "bar"');
+    });
+
+    it('should not remove quotes if there are inner quotes', () => {
+      const str = '"Verdana", "Helvetica"';
+      expect(stripUnnecessaryQuotes(str)).toEqual(str);
+    });
+  });
+
+  describe('camelCasing => hyphenation', () => {
+    it('should convert a camel-cased value to a hyphenated value', () => {
+      expect(hyphenate('fooBar')).toEqual('foo-bar');
+      expect(hyphenate('fooBarMan')).toEqual('foo-bar-man');
+      expect(hyphenate('-fooBar-man')).toEqual('-foo-bar-man');
+    });
+
+    it('should make everything lowercase',
+       () => { expect(hyphenate('-WebkitAnimation')).toEqual('-webkit-animation'); });
+  });
+});
diff --git a/packages/compiler/test/resource_loader_mock_spec.ts b/packages/compiler/test/resource_loader_mock_spec.ts
new file mode 100644
index 000000000000..760ff5fce08d
--- /dev/null
+++ b/packages/compiler/test/resource_loader_mock_spec.ts
@@ -0,0 +1,114 @@
+/**
+ * @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 {MockResourceLoader} from '@angular/compiler/testing/src/resource_loader_mock';
+import {AsyncTestCompleter, beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+{
+  describe('MockResourceLoader', () => {
+    let resourceLoader: MockResourceLoader;
+
+    beforeEach(() => { resourceLoader = new MockResourceLoader(); });
+
+    function expectResponse(
+        request: Promise<string>, url: string, response: string, done: () => void = null !) {
+      function onResponse(text: string): string {
+        if (response === null) {
+          throw `Unexpected response ${url} -> ${text}`;
+        } else {
+          expect(text).toEqual(response);
+          if (done != null) done();
+        }
+        return text;
+      }
+
+      function onError(error: string): string {
+        if (response !== null) {
+          throw `Unexpected error ${url}`;
+        } else {
+          expect(error).toEqual(`Failed to load ${url}`);
+          if (done != null) done();
+        }
+        return error;
+      }
+
+      request.then(onResponse, onError);
+    }
+
+    it('should return a response from the definitions',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const url = '/foo';
+         const response = 'bar';
+         resourceLoader.when(url, response);
+         expectResponse(resourceLoader.get(url), url, response, () => async.done());
+         resourceLoader.flush();
+       }));
+
+    it('should return an error from the definitions',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const url = '/foo';
+         const response: string = null !;
+         resourceLoader.when(url, response);
+         expectResponse(resourceLoader.get(url), url, response, () => async.done());
+         resourceLoader.flush();
+       }));
+
+    it('should return a response from the expectations',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const url = '/foo';
+         const response = 'bar';
+         resourceLoader.expect(url, response);
+         expectResponse(resourceLoader.get(url), url, response, () => async.done());
+         resourceLoader.flush();
+       }));
+
+    it('should return an error from the expectations',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const url = '/foo';
+         const response: string = null !;
+         resourceLoader.expect(url, response);
+         expectResponse(resourceLoader.get(url), url, response, () => async.done());
+         resourceLoader.flush();
+       }));
+
+    it('should not reuse expectations', () => {
+      const url = '/foo';
+      const response = 'bar';
+      resourceLoader.expect(url, response);
+      resourceLoader.get(url);
+      resourceLoader.get(url);
+      expect(() => { resourceLoader.flush(); }).toThrowError('Unexpected request /foo');
+    });
+
+    it('should return expectations before definitions',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const url = '/foo';
+         resourceLoader.when(url, 'when');
+         resourceLoader.expect(url, 'expect');
+         expectResponse(resourceLoader.get(url), url, 'expect');
+         expectResponse(resourceLoader.get(url), url, 'when', () => async.done());
+         resourceLoader.flush();
+       }));
+
+    it('should throw when there is no definitions or expectations', () => {
+      resourceLoader.get('/foo');
+      expect(() => { resourceLoader.flush(); }).toThrowError('Unexpected request /foo');
+    });
+
+    it('should throw when flush is called without any pending requests', () => {
+      expect(() => { resourceLoader.flush(); }).toThrowError('No pending requests to flush');
+    });
+
+    it('should throw on unsatisfied expectations', () => {
+      resourceLoader.expect('/foo', 'bar');
+      resourceLoader.when('/bar', 'foo');
+      resourceLoader.get('/bar');
+      expect(() => { resourceLoader.flush(); }).toThrowError('Unsatisfied requests: /foo');
+    });
+  });
+}
diff --git a/packages/compiler/test/runtime_compiler_spec.ts b/packages/compiler/test/runtime_compiler_spec.ts
new file mode 100644
index 000000000000..47423395bd6f
--- /dev/null
+++ b/packages/compiler/test/runtime_compiler_spec.ts
@@ -0,0 +1,166 @@
+/**
+ * @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 {DirectiveResolver, ResourceLoader} from '@angular/compiler';
+import {Compiler, Component, Injector, NgModule, NgModuleFactory, ɵstringify as stringify} from '@angular/core';
+import {TestBed, async, fakeAsync, inject, tick} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+import {MockDirectiveResolver} from '../testing';
+import {SpyResourceLoader} from './spies';
+
+@Component({selector: 'child-cmp'})
+class ChildComp {
+}
+
+@Component({selector: 'some-cmp', template: 'someComp'})
+class SomeComp {
+}
+
+@Component({selector: 'some-cmp', templateUrl: './someTpl'})
+class SomeCompWithUrlTemplate {
+}
+
+{
+  describe('RuntimeCompiler', () => {
+
+    describe('compilerComponentSync', () => {
+      describe('never resolving loader', () => {
+        class StubResourceLoader {
+          get(url: string) { return new Promise(() => {}); }
+        }
+
+        beforeEach(() => {
+          TestBed.configureCompiler(
+              {providers: [{provide: ResourceLoader, useClass: StubResourceLoader, deps: []}]});
+        });
+
+        it('should throw when using a templateUrl that has not been compiled before', async(() => {
+             TestBed.configureTestingModule({declarations: [SomeCompWithUrlTemplate]});
+             TestBed.compileComponents().then(() => {
+               expect(() => TestBed.createComponent(SomeCompWithUrlTemplate))
+                   .toThrowError(
+                       `Can't compile synchronously as ${stringify(SomeCompWithUrlTemplate)} is still being loaded!`);
+             });
+           }));
+
+        it('should throw when using a templateUrl in a nested component that has not been compiled before',
+           () => {
+             TestBed.configureTestingModule({declarations: [SomeComp, ChildComp]});
+             TestBed.overrideComponent(ChildComp, {set: {templateUrl: '/someTpl.html'}});
+             TestBed.overrideComponent(SomeComp, {set: {template: '<child-cmp></child-cmp>'}});
+             TestBed.compileComponents().then(() => {
+               expect(() => TestBed.createComponent(SomeComp))
+                   .toThrowError(
+                       `Can't compile synchronously as ${stringify(ChildComp)} is still being loaded!`);
+             });
+           });
+      });
+
+      describe('resolving loader', () => {
+        class StubResourceLoader {
+          get(url: string) { return Promise.resolve('hello'); }
+        }
+
+        beforeEach(() => {
+          TestBed.configureCompiler(
+              {providers: [{provide: ResourceLoader, useClass: StubResourceLoader, deps: []}]});
+        });
+
+        it('should allow to use templateUrl components that have been loaded before', async(() => {
+             TestBed.configureTestingModule({declarations: [SomeCompWithUrlTemplate]});
+             TestBed.compileComponents().then(() => {
+               const fixture = TestBed.createComponent(SomeCompWithUrlTemplate);
+               expect(fixture.nativeElement).toHaveText('hello');
+             });
+           }));
+      });
+    });
+  });
+
+  describe('RuntimeCompiler', () => {
+    let compiler: Compiler;
+    let resourceLoader: SpyResourceLoader;
+    let dirResolver: MockDirectiveResolver;
+    let injector: Injector;
+
+    beforeEach(() => { TestBed.configureCompiler({providers: [SpyResourceLoader.PROVIDE]}); });
+
+    beforeEach(fakeAsync(inject(
+        [Compiler, ResourceLoader, DirectiveResolver, Injector],
+        (_compiler: Compiler, _resourceLoader: SpyResourceLoader,
+         _dirResolver: MockDirectiveResolver, _injector: Injector) => {
+          compiler = _compiler;
+          resourceLoader = _resourceLoader;
+          dirResolver = _dirResolver;
+          injector = _injector;
+        })));
+
+    describe('compileModuleAsync', () => {
+      it('should allow to use templateUrl components', fakeAsync(() => {
+           @NgModule({
+             declarations: [SomeCompWithUrlTemplate],
+             entryComponents: [SomeCompWithUrlTemplate]
+           })
+           class SomeModule {
+           }
+
+           resourceLoader.spy('get').and.callFake(() => Promise.resolve('hello'));
+           let ngModuleFactory: NgModuleFactory<any> = undefined !;
+           compiler.compileModuleAsync(SomeModule).then((f) => ngModuleFactory = f);
+           tick();
+           expect(ngModuleFactory.moduleType).toBe(SomeModule);
+         }));
+    });
+
+    describe('compileModuleSync', () => {
+      it('should throw when using a templateUrl that has not been compiled before', () => {
+        @NgModule(
+            {declarations: [SomeCompWithUrlTemplate], entryComponents: [SomeCompWithUrlTemplate]})
+        class SomeModule {
+        }
+
+        resourceLoader.spy('get').and.callFake(() => Promise.resolve(''));
+        expect(() => compiler.compileModuleSync(SomeModule))
+            .toThrowError(
+                `Can't compile synchronously as ${stringify(SomeCompWithUrlTemplate)} is still being loaded!`);
+      });
+
+      it('should throw when using a templateUrl in a nested component that has not been compiled before',
+         () => {
+           @NgModule({declarations: [SomeComp, ChildComp], entryComponents: [SomeComp]})
+           class SomeModule {
+           }
+
+           resourceLoader.spy('get').and.callFake(() => Promise.resolve(''));
+           dirResolver.setDirective(SomeComp, new Component({selector: 'some-cmp', template: ''}));
+           dirResolver.setDirective(
+               ChildComp, new Component({selector: 'child-cmp', templateUrl: '/someTpl.html'}));
+           expect(() => compiler.compileModuleSync(SomeModule))
+               .toThrowError(
+                   `Can't compile synchronously as ${stringify(ChildComp)} is still being loaded!`);
+         });
+
+      it('should allow to use templateUrl components that have been loaded before',
+         fakeAsync(() => {
+           @NgModule({
+             declarations: [SomeCompWithUrlTemplate],
+             entryComponents: [SomeCompWithUrlTemplate]
+           })
+           class SomeModule {
+           }
+
+           resourceLoader.spy('get').and.callFake(() => Promise.resolve('hello'));
+           compiler.compileModuleAsync(SomeModule);
+           tick();
+
+           const ngModuleFactory = compiler.compileModuleSync(SomeModule);
+           expect(ngModuleFactory).toBeTruthy();
+         }));
+    });
+  });
+}
diff --git a/packages/compiler/test/schema/dom_element_schema_registry_spec.ts b/packages/compiler/test/schema/dom_element_schema_registry_spec.ts
new file mode 100644
index 000000000000..7c6b98c67c4b
--- /dev/null
+++ b/packages/compiler/test/schema/dom_element_schema_registry_spec.ts
@@ -0,0 +1,236 @@
+/**
+ * @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 {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry';
+import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SecurityContext} from '@angular/core';
+import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
+import {Element} from '../../src/ml_parser/ast';
+import {HtmlParser} from '../../src/ml_parser/html_parser';
+
+import {extractSchema} from './schema_extractor';
+
+{
+  describe('DOMElementSchema', () => {
+    let registry: DomElementSchemaRegistry;
+    beforeEach(() => { registry = new DomElementSchemaRegistry(); });
+
+    it('should detect elements', () => {
+      expect(registry.hasElement('div', [])).toBeTruthy();
+      expect(registry.hasElement('b', [])).toBeTruthy();
+      expect(registry.hasElement('ng-container', [])).toBeTruthy();
+      expect(registry.hasElement('ng-content', [])).toBeTruthy();
+
+      expect(registry.hasElement('my-cmp', [])).toBeFalsy();
+      expect(registry.hasElement('abc', [])).toBeFalsy();
+    });
+
+    // https://github.com/angular/angular/issues/11219
+    it('should detect elements missing from chrome', () => {
+      expect(registry.hasElement('data', [])).toBeTruthy();
+      expect(registry.hasElement('menuitem', [])).toBeTruthy();
+      expect(registry.hasElement('summary', [])).toBeTruthy();
+      expect(registry.hasElement('time', [])).toBeTruthy();
+    });
+
+    it('should detect properties on regular elements', () => {
+      expect(registry.hasProperty('div', 'id', [])).toBeTruthy();
+      expect(registry.hasProperty('div', 'title', [])).toBeTruthy();
+      expect(registry.hasProperty('h1', 'align', [])).toBeTruthy();
+      expect(registry.hasProperty('h2', 'align', [])).toBeTruthy();
+      expect(registry.hasProperty('h3', 'align', [])).toBeTruthy();
+      expect(registry.hasProperty('h4', 'align', [])).toBeTruthy();
+      expect(registry.hasProperty('h5', 'align', [])).toBeTruthy();
+      expect(registry.hasProperty('h6', 'align', [])).toBeTruthy();
+      expect(registry.hasProperty('h7', 'align', [])).toBeFalsy();
+      expect(registry.hasProperty('textarea', 'disabled', [])).toBeTruthy();
+      expect(registry.hasProperty('input', 'disabled', [])).toBeTruthy();
+      expect(registry.hasProperty('div', 'unknown', [])).toBeFalsy();
+    });
+
+    // https://github.com/angular/angular/issues/11219
+    it('should detect properties on elements missing from Chrome', () => {
+      expect(registry.hasProperty('data', 'value', [])).toBeTruthy();
+
+      expect(registry.hasProperty('menuitem', 'type', [])).toBeTruthy();
+      expect(registry.hasProperty('menuitem', 'default', [])).toBeTruthy();
+
+      expect(registry.hasProperty('time', 'dateTime', [])).toBeTruthy();
+    });
+
+    it('should detect different kinds of types', () => {
+      // inheritance: video => media => [HTMLElement] => [Element]
+      expect(registry.hasProperty('video', 'className', [])).toBeTruthy();   // from [Element]
+      expect(registry.hasProperty('video', 'id', [])).toBeTruthy();          // string
+      expect(registry.hasProperty('video', 'scrollLeft', [])).toBeTruthy();  // number
+      expect(registry.hasProperty('video', 'height', [])).toBeTruthy();      // number
+      expect(registry.hasProperty('video', 'autoplay', [])).toBeTruthy();    // boolean
+      expect(registry.hasProperty('video', 'classList', [])).toBeTruthy();   // object
+      // from *; but events are not properties
+      expect(registry.hasProperty('video', 'click', [])).toBeFalsy();
+    });
+
+    it('should treat custom elements as an unknown element by default', () => {
+      expect(registry.hasProperty('custom-like', 'unknown', [])).toBe(false);
+      expect(registry.hasProperty('custom-like', 'className', [])).toBeTruthy();
+      expect(registry.hasProperty('custom-like', 'style', [])).toBeTruthy();
+      expect(registry.hasProperty('custom-like', 'id', [])).toBeTruthy();
+    });
+
+    it('should return true for custom-like elements if the CUSTOM_ELEMENTS_SCHEMA was used', () => {
+      expect(registry.hasProperty('custom-like', 'unknown', [CUSTOM_ELEMENTS_SCHEMA])).toBeTruthy();
+
+      expect(registry.hasElement('custom-like', [CUSTOM_ELEMENTS_SCHEMA])).toBeTruthy();
+    });
+
+    it('should return true for all elements if the NO_ERRORS_SCHEMA was used', () => {
+      expect(registry.hasProperty('custom-like', 'unknown', [NO_ERRORS_SCHEMA])).toBeTruthy();
+      expect(registry.hasProperty('a', 'unknown', [NO_ERRORS_SCHEMA])).toBeTruthy();
+
+      expect(registry.hasElement('custom-like', [NO_ERRORS_SCHEMA])).toBeTruthy();
+      expect(registry.hasElement('unknown', [NO_ERRORS_SCHEMA])).toBeTruthy();
+    });
+
+    it('should re-map property names that are specified in DOM facade',
+       () => { expect(registry.getMappedPropName('readonly')).toEqual('readOnly'); });
+
+    it('should not re-map property names that are not specified in DOM facade', () => {
+      expect(registry.getMappedPropName('title')).toEqual('title');
+      expect(registry.getMappedPropName('exotic-unknown')).toEqual('exotic-unknown');
+    });
+
+    it('should return an error message when asserting event properties', () => {
+      let report = registry.validateProperty('onClick');
+      expect(report.error).toBeTruthy();
+      expect(report.msg)
+          .toEqual(
+              `Binding to event property 'onClick' is disallowed for security reasons, please use (Click)=...
+If 'onClick' is a directive input, make sure the directive is imported by the current module.`);
+
+      report = registry.validateProperty('onAnything');
+      expect(report.error).toBeTruthy();
+      expect(report.msg)
+          .toEqual(
+              `Binding to event property 'onAnything' is disallowed for security reasons, please use (Anything)=...
+If 'onAnything' is a directive input, make sure the directive is imported by the current module.`);
+    });
+
+    it('should return an error message when asserting event attributes', () => {
+      let report = registry.validateAttribute('onClick');
+      expect(report.error).toBeTruthy();
+      expect(report.msg)
+          .toEqual(
+              `Binding to event attribute 'onClick' is disallowed for security reasons, please use (Click)=...`);
+
+      report = registry.validateAttribute('onAnything');
+      expect(report.error).toBeTruthy();
+      expect(report.msg)
+          .toEqual(
+              `Binding to event attribute 'onAnything' is disallowed for security reasons, please use (Anything)=...`);
+    });
+
+    it('should not return an error message when asserting non-event properties or attributes',
+       () => {
+         let report = registry.validateProperty('title');
+         expect(report.error).toBeFalsy();
+         expect(report.msg).not.toBeDefined();
+
+         report = registry.validateProperty('exotic-unknown');
+         expect(report.error).toBeFalsy();
+         expect(report.msg).not.toBeDefined();
+       });
+
+    it('should return security contexts for elements', () => {
+      expect(registry.securityContext('iframe', 'srcdoc', false)).toBe(SecurityContext.HTML);
+      expect(registry.securityContext('p', 'innerHTML', false)).toBe(SecurityContext.HTML);
+      expect(registry.securityContext('a', 'href', false)).toBe(SecurityContext.URL);
+      expect(registry.securityContext('a', 'style', false)).toBe(SecurityContext.STYLE);
+      expect(registry.securityContext('ins', 'cite', false)).toBe(SecurityContext.URL);
+      expect(registry.securityContext('base', 'href', false)).toBe(SecurityContext.RESOURCE_URL);
+    });
+
+    it('should detect properties on namespaced elements', () => {
+      const htmlAst = new HtmlParser().parse('<svg:style>', 'TestComp');
+      const nodeName = (<Element>htmlAst.rootNodes[0]).name;
+      expect(registry.hasProperty(nodeName, 'type', [])).toBeTruthy();
+    });
+
+    it('should check security contexts case insensitive', () => {
+      expect(registry.securityContext('p', 'iNnErHtMl', false)).toBe(SecurityContext.HTML);
+      expect(registry.securityContext('p', 'formaction', false)).toBe(SecurityContext.URL);
+      expect(registry.securityContext('p', 'formAction', false)).toBe(SecurityContext.URL);
+    });
+
+    it('should check security contexts for attributes', () => {
+      expect(registry.securityContext('p', 'innerHtml', true)).toBe(SecurityContext.HTML);
+      expect(registry.securityContext('p', 'formaction', true)).toBe(SecurityContext.URL);
+    });
+
+    describe('Angular custom elements', () => {
+      it('should support <ng-container>',
+         () => { expect(registry.hasProperty('ng-container', 'id', [])).toBeFalsy(); });
+
+      it('should support <ng-content>', () => {
+        expect(registry.hasProperty('ng-content', 'id', [])).toBeFalsy();
+        expect(registry.hasProperty('ng-content', 'select', [])).toBeFalsy();
+      });
+    });
+
+    if (browserDetection.isChromeDesktop) {
+      it('generate a new schema', () => {
+        let schema = '\n';
+        extractSchema() !.forEach(
+            (props, name) => { schema += `'${name}|${props.join(',')}',\n`; });
+        // Uncomment this line to see:
+        // the generated schema which can then be pasted to the DomElementSchemaRegistry
+        // console.log(schema);
+      });
+    }
+
+    describe('normalizeAnimationStyleProperty', () => {
+      it('should normalize the given CSS property to camelCase', () => {
+        expect(registry.normalizeAnimationStyleProperty('border-radius')).toBe('borderRadius');
+        expect(registry.normalizeAnimationStyleProperty('zIndex')).toBe('zIndex');
+        expect(registry.normalizeAnimationStyleProperty('-webkit-animation'))
+            .toBe('WebkitAnimation');
+      });
+    });
+
+    describe('normalizeAnimationStyleValue', () => {
+      it('should normalize the given dimensional CSS style value to contain a PX value when numeric',
+         () => {
+           expect(
+               registry.normalizeAnimationStyleValue('borderRadius', 'border-radius', 10)['value'])
+               .toBe('10px');
+         });
+
+      it('should not normalize any values that are of zero', () => {
+        expect(registry.normalizeAnimationStyleValue('opacity', 'opacity', 0)['value']).toBe('0');
+        expect(registry.normalizeAnimationStyleValue('width', 'width', 0)['value']).toBe('0');
+      });
+
+      it('should retain the given dimensional CSS style value\'s unit if it already exists', () => {
+        expect(
+            registry.normalizeAnimationStyleValue('borderRadius', 'border-radius', '10em')['value'])
+            .toBe('10em');
+      });
+
+      it('should trim the provided CSS style value', () => {
+        expect(registry.normalizeAnimationStyleValue('color', 'color', '   red ')['value'])
+            .toBe('red');
+      });
+
+      it('should stringify all non dimensional numeric style values', () => {
+        expect(registry.normalizeAnimationStyleValue('zIndex', 'zIndex', 10)['value']).toBe('10');
+        expect(registry.normalizeAnimationStyleValue('opacity', 'opacity', 0.5)['value'])
+            .toBe('0.5');
+      });
+    });
+  });
+}
diff --git a/packages/compiler/test/schema/schema_extractor.ts b/packages/compiler/test/schema/schema_extractor.ts
new file mode 100644
index 000000000000..533ca59a6a39
--- /dev/null
+++ b/packages/compiler/test/schema/schema_extractor.ts
@@ -0,0 +1,281 @@
+/**
+ * @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 SVG_PREFIX = ':svg:';
+
+// Element | Node interfaces
+// see https://developer.mozilla.org/en-US/docs/Web/API/Element
+// see https://developer.mozilla.org/en-US/docs/Web/API/Node
+const ELEMENT_IF = '[Element]';
+// HTMLElement interface
+// see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
+const HTMLELEMENT_IF = '[HTMLElement]';
+
+const HTMLELEMENT_TAGS =
+    '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';
+
+const ALL_HTML_TAGS =
+    // https://www.w3.org/TR/html5/index.html
+    'a,abbr,address,area,article,aside,audio,b,base,bdi,bdo,blockquote,body,br,button,canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hr,html,i,iframe,img,input,ins,kbd,keygen,label,legend,li,link,main,map,mark,meta,meter,nav,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rb,rp,rt,rtc,ruby,s,samp,script,section,select,small,source,span,strong,style,sub,sup,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,track,u,ul,var,video,wbr,' +
+    // https://html.spec.whatwg.org/
+    'details,summary,menu,menuitem';
+
+// 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;
+const document: any = typeof _G['document'] == 'object' ? _G['document'] : null;
+
+export function extractSchema(): Map<string, string[]>|null {
+  if (!document) return null;
+  const SVGGraphicsElement = _G['SVGGraphicsElement'];
+  if (!SVGGraphicsElement) return null;
+
+  const element = document.createElement('video');
+  const descMap: Map<string, string[]> = new Map();
+  const visited: {[name: string]: boolean} = {};
+
+  // HTML top level
+  extractProperties(Node, element, visited, descMap, ELEMENT_IF, '');
+  extractProperties(Element, element, visited, descMap, ELEMENT_IF, '');
+  extractProperties(HTMLElement, element, visited, descMap, HTMLELEMENT_IF, ELEMENT_IF);
+  extractProperties(HTMLElement, element, visited, descMap, HTMLELEMENT_TAGS, HTMLELEMENT_IF);
+  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);
+  extractProperties(
+      SVGAnimationElement, svgAnimation, visited, descMap, SVG_PREFIX + 'animation', SVG_PREFIX);
+  extractProperties(
+      SVGGeometryElement, svgPath, visited, descMap, SVG_PREFIX + 'geometry', SVG_PREFIX);
+  extractProperties(
+      SVGComponentTransferFunctionElement, svgFeFuncA, visited, descMap,
+      SVG_PREFIX + 'componentTransferFunction', SVG_PREFIX);
+  extractProperties(
+      SVGGradientElement, svgGradient, visited, descMap, SVG_PREFIX + 'gradient', SVG_PREFIX);
+  extractProperties(
+      SVGTextContentElement, svgText, visited, descMap, SVG_PREFIX + 'textContent',
+      SVG_PREFIX + 'graphics');
+  extractProperties(
+      SVGTextPositioningElement, svgText, visited, descMap, SVG_PREFIX + 'textPositioning',
+      SVG_PREFIX + 'textContent');
+
+  // Get all element types
+  const types = Object.getOwnPropertyNames(window).filter(k => /^(HTML|SVG).*?Element$/.test(k));
+
+  types.sort();
+
+  types.forEach(type => { extractRecursiveProperties(visited, descMap, (window as any)[type]); });
+
+  // Add elements missed by Chrome auto-detection
+  Object.keys(MISSING_FROM_CHROME).forEach(elHierarchy => {
+    descMap.set(elHierarchy, MISSING_FROM_CHROME[elHierarchy]);
+  });
+
+  assertNoMissingTags(descMap);
+
+  return descMap;
+}
+
+function assertNoMissingTags(descMap: Map<string, string[]>): void {
+  const extractedTags: string[] = [];
+
+  Array.from(descMap.keys()).forEach((key: string) => {
+    extractedTags.push(...key.split('|')[0].split('^')[0].split(','));
+  });
+
+  const missingTags = ALL_HTML_TAGS.split(',').filter(tag => extractedTags.indexOf(tag) == -1);
+
+  if (missingTags.length) {
+    throw new Error(`DOM schema misses tags: ${missingTags.join(',')}`);
+  }
+}
+
+function extractRecursiveProperties(
+    visited: {[name: string]: boolean}, descMap: Map<string, string[]>, type: Function): string {
+  const name = extractName(type) !;
+
+  if (visited[name]) {
+    return name;
+  }
+
+  let superName: string;
+  switch (name) {
+    case ELEMENT_IF:
+      // ELEMENT_IF is the top most interface (Element | Node)
+      superName = '';
+      break;
+    case HTMLELEMENT_IF:
+      superName = ELEMENT_IF;
+      break;
+    default:
+      superName =
+          extractRecursiveProperties(visited, descMap, type.prototype.__proto__.constructor);
+  }
+
+  let instance: HTMLElement|null = null;
+  name.split(',').forEach(tagName => {
+    instance = type['name'].startsWith('SVG') ?
+        document.createElementNS('http://www.w3.org/2000/svg', tagName.replace(SVG_PREFIX, '')) :
+        document.createElement(tagName);
+
+    let htmlType: Function;
+
+    switch (tagName) {
+      case 'cite':
+        // <cite> interface is `HTMLQuoteElement`
+        htmlType = HTMLElement;
+        break;
+      default:
+        htmlType = type;
+    }
+
+    if (!(instance instanceof htmlType)) {
+      throw new Error(`Tag <${tagName}> is not an instance of ${htmlType['name']}`);
+    }
+  });
+
+  extractProperties(type, instance, visited, descMap, name, superName);
+
+  return name;
+}
+
+function extractProperties(
+    type: Function, instance: any, visited: {[name: string]: boolean},
+    descMap: Map<string, string[]>, name: string, superName: string) {
+  if (!type) return;
+
+  visited[name] = true;
+
+  const fullName = name + (superName ? '^' + superName : '');
+
+  const props: string[] = descMap.has(fullName) ? descMap.get(fullName) ! : [];
+
+  const prototype = type.prototype;
+  const keys = Object.getOwnPropertyNames(prototype);
+
+  keys.sort();
+  keys.forEach((name) => {
+    if (name.startsWith('on')) {
+      props.push('*' + name.substr(2));
+    } else {
+      const typeCh = _TYPE_MNEMONICS[typeof instance[name]];
+      const descriptor = Object.getOwnPropertyDescriptor(prototype, name);
+      const isSetter = descriptor && descriptor.set;
+      if (typeCh !== void 0 && !name.startsWith('webkit') && isSetter) {
+        props.push(typeCh + name);
+      }
+    }
+  });
+
+  // There is no point in using `Node.nodeValue`, filter it out
+  descMap.set(fullName, type === Node ? props.filter(p => p != '%nodeValue') : props);
+}
+
+function extractName(type: Function): string|null {
+  let name = type['name'];
+
+  // The polyfill @webcomponents/custom-element/src/native-shim.js overrides the
+  // window.HTMLElement and does not have the name property. Check if this is the
+  // case and if so, set the name manually.
+  if (name === '' && type === HTMLElement) {
+    name = 'HTMLElement';
+  }
+
+  switch (name) {
+    // see https://www.w3.org/TR/html5/index.html
+    // TODO(vicb): generate this map from all the element types
+    case 'Element':
+      return ELEMENT_IF;
+    case 'HTMLElement':
+      return HTMLELEMENT_IF;
+    case 'HTMLImageElement':
+      return 'img';
+    case 'HTMLAnchorElement':
+      return 'a';
+    case 'HTMLDListElement':
+      return 'dl';
+    case 'HTMLDirectoryElement':
+      return 'dir';
+    case 'HTMLHeadingElement':
+      return 'h1,h2,h3,h4,h5,h6';
+    case 'HTMLModElement':
+      return 'ins,del';
+    case 'HTMLOListElement':
+      return 'ol';
+    case 'HTMLParagraphElement':
+      return 'p';
+    case 'HTMLQuoteElement':
+      return 'q,blockquote,cite';
+    case 'HTMLTableCaptionElement':
+      return 'caption';
+    case 'HTMLTableCellElement':
+      return 'th,td';
+    case 'HTMLTableColElement':
+      return 'col,colgroup';
+    case 'HTMLTableRowElement':
+      return 'tr';
+    case 'HTMLTableSectionElement':
+      return 'tfoot,thead,tbody';
+    case 'HTMLUListElement':
+      return 'ul';
+    case 'SVGGraphicsElement':
+      return SVG_PREFIX + 'graphics';
+    case 'SVGMPathElement':
+      return SVG_PREFIX + 'mpath';
+    case 'SVGSVGElement':
+      return SVG_PREFIX + 'svg';
+    case 'SVGTSpanElement':
+      return SVG_PREFIX + 'tspan';
+    default:
+      const isSVG = name.startsWith('SVG');
+      if (name.startsWith('HTML') || isSVG) {
+        name = name.replace('HTML', '').replace('SVG', '').replace('Element', '');
+        if (isSVG && name.startsWith('FE')) {
+          name = 'fe' + name.substring(2);
+        } else if (name) {
+          name = name.charAt(0).toLowerCase() + name.substring(1);
+        }
+        return isSVG ? SVG_PREFIX + name : name.toLowerCase();
+      }
+  }
+
+  return null;
+}
+
+const _TYPE_MNEMONICS: {[type: string]: string} = {
+  'string': '',
+  'number': '#',
+  'boolean': '!',
+  'object': '%',
+};
diff --git a/packages/compiler/test/selector_spec.ts b/packages/compiler/test/selector_spec.ts
new file mode 100644
index 000000000000..8b5e64a37829
--- /dev/null
+++ b/packages/compiler/test/selector_spec.ts
@@ -0,0 +1,460 @@
+/**
+ * @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 {CssSelector, SelectorMatcher} from '@angular/compiler/src/selector';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {el} from '@angular/platform-browser/testing/src/browser_util';
+
+{
+  describe('SelectorMatcher', () => {
+    let matcher: SelectorMatcher;
+    let selectableCollector: (selector: CssSelector, context: any) => void;
+    let s1: any[], s2: any[], s3: any[], s4: any[];
+    let matched: any[];
+
+    function reset() { matched = []; }
+
+    beforeEach(() => {
+      reset();
+      s1 = s2 = s3 = s4 = null !;
+      selectableCollector =
+          (selector: CssSelector, context: any) => { matched.push(selector, context); };
+      matcher = new SelectorMatcher();
+    });
+
+    it('should select by element name case sensitive', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('someTag'), 1);
+
+      expect(matcher.match(getSelectorFor({tag: 'SOMEOTHERTAG'}), selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(matcher.match(getSelectorFor({tag: 'SOMETAG'}), selectableCollector)).toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(matcher.match(getSelectorFor({tag: 'someTag'}), selectableCollector)).toEqual(true);
+      expect(matched).toEqual([s1[0], 1]);
+    });
+
+    it('should select by class name case insensitive', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('.someClass'), 1);
+      matcher.addSelectables(s2 = CssSelector.parse('.someClass.class2'), 2);
+
+      expect(matcher.match(getSelectorFor({classes: 'SOMEOTHERCLASS'}), selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(matcher.match(getSelectorFor({classes: 'SOMECLASS'}), selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1]);
+
+      reset();
+      expect(matcher.match(getSelectorFor({classes: 'someClass class2'}), selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
+    });
+
+    it('should not throw for class name "constructor"', () => {
+      expect(matcher.match(getSelectorFor({classes: 'constructor'}), selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+    });
+
+    it('should select by attr name case sensitive independent of the value', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('[someAttr]'), 1);
+      matcher.addSelectables(s2 = CssSelector.parse('[someAttr][someAttr2]'), 2);
+
+      expect(matcher.match(getSelectorFor({attrs: [['SOMEOTHERATTR', '']]}), selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(matcher.match(getSelectorFor({attrs: [['SOMEATTR', '']]}), selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(
+          matcher.match(getSelectorFor({attrs: [['SOMEATTR', 'someValue']]}), selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(
+          matcher.match(
+              getSelectorFor({attrs: [['someAttr', ''], ['someAttr2', '']]}), selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
+
+      reset();
+      expect(matcher.match(
+                 getSelectorFor({attrs: [['someAttr', 'someValue'], ['someAttr2', '']]}),
+                 selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
+
+      reset();
+      expect(matcher.match(
+                 getSelectorFor({attrs: [['someAttr2', ''], ['someAttr', 'someValue']]}),
+                 selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
+
+      reset();
+      expect(matcher.match(
+                 getSelectorFor({attrs: [['someAttr2', 'someValue'], ['someAttr', '']]}),
+                 selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
+    });
+
+    it('should support "." in attribute names', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('[foo.bar]'), 1);
+
+      expect(matcher.match(getSelectorFor({attrs: [['barfoo', '']]}), selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      reset();
+      expect(matcher.match(getSelectorFor({attrs: [['foo.bar', '']]}), selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1]);
+    });
+
+    it('should select by attr name only once if the value is from the DOM', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('[some-decor]'), 1);
+
+      const elementSelector = new CssSelector();
+      const element = el('<div attr></div>');
+      const empty = getDOM().getAttribute(element, 'attr') !;
+      elementSelector.addAttribute('some-decor', empty);
+      matcher.match(elementSelector, selectableCollector);
+      expect(matched).toEqual([s1[0], 1]);
+    });
+
+    it('should select by attr name case sensitive and value case insensitive', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('[someAttr=someValue]'), 1);
+
+      expect(matcher.match(
+                 getSelectorFor({attrs: [['SOMEATTR', 'SOMEOTHERATTR']]}), selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(
+          matcher.match(getSelectorFor({attrs: [['SOMEATTR', 'SOMEVALUE']]}), selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(
+          matcher.match(getSelectorFor({attrs: [['someAttr', 'SOMEVALUE']]}), selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1]);
+    });
+
+    it('should select by element name, class name and attribute name with value', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('someTag.someClass[someAttr=someValue]'), 1);
+
+      expect(
+          matcher.match(
+              getSelectorFor(
+                  {tag: 'someOtherTag', classes: 'someOtherClass', attrs: [['someOtherAttr', '']]}),
+              selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(matcher.match(
+                 getSelectorFor(
+                     {tag: 'someTag', classes: 'someOtherClass', attrs: [['someOtherAttr', '']]}),
+                 selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(matcher.match(
+                 getSelectorFor(
+                     {tag: 'someTag', classes: 'someClass', attrs: [['someOtherAttr', '']]}),
+                 selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(matcher.match(
+                 getSelectorFor({tag: 'someTag', classes: 'someClass', attrs: [['someAttr', '']]}),
+                 selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(matcher.match(
+                 getSelectorFor(
+                     {tag: 'someTag', classes: 'someClass', attrs: [['someAttr', 'someValue']]}),
+                 selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1]);
+    });
+
+    it('should select by many attributes and independent of the value', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('input[type=text][control]'), 1);
+
+      const cssSelector = new CssSelector();
+      cssSelector.setElement('input');
+      cssSelector.addAttribute('type', 'text');
+      cssSelector.addAttribute('control', 'one');
+
+      expect(matcher.match(cssSelector, selectableCollector)).toEqual(true);
+      expect(matched).toEqual([s1[0], 1]);
+    });
+
+    it('should select independent of the order in the css selector', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('[someAttr].someClass'), 1);
+      matcher.addSelectables(s2 = CssSelector.parse('.someClass[someAttr]'), 2);
+      matcher.addSelectables(s3 = CssSelector.parse('.class1.class2'), 3);
+      matcher.addSelectables(s4 = CssSelector.parse('.class2.class1'), 4);
+
+      expect(matcher.match(CssSelector.parse('[someAttr].someClass')[0], selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
+
+      reset();
+      expect(matcher.match(CssSelector.parse('.someClass[someAttr]')[0], selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1, s2[0], 2]);
+
+      reset();
+      expect(matcher.match(CssSelector.parse('.class1.class2')[0], selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s3[0], 3, s4[0], 4]);
+
+      reset();
+      expect(matcher.match(CssSelector.parse('.class2.class1')[0], selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s4[0], 4, s3[0], 3]);
+    });
+
+    it('should not select with a matching :not selector', () => {
+      matcher.addSelectables(CssSelector.parse('p:not(.someClass)'), 1);
+      matcher.addSelectables(CssSelector.parse('p:not([someAttr])'), 2);
+      matcher.addSelectables(CssSelector.parse(':not(.someClass)'), 3);
+      matcher.addSelectables(CssSelector.parse(':not(p)'), 4);
+      matcher.addSelectables(CssSelector.parse(':not(p[someAttr])'), 5);
+
+      expect(matcher.match(
+                 getSelectorFor({tag: 'p', classes: 'someClass', attrs: [['someAttr', '']]}),
+                 selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+    });
+
+    it('should select with a non matching :not selector', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('p:not(.someClass)'), 1);
+      matcher.addSelectables(s2 = CssSelector.parse('p:not(.someOtherClass[someAttr])'), 2);
+      matcher.addSelectables(s3 = CssSelector.parse(':not(.someClass)'), 3);
+      matcher.addSelectables(s4 = CssSelector.parse(':not(.someOtherClass[someAttr])'), 4);
+
+      expect(
+          matcher.match(
+              getSelectorFor({tag: 'p', attrs: [['someOtherAttr', '']], classes: 'someOtherClass'}),
+              selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1, s2[0], 2, s3[0], 3, s4[0], 4]);
+    });
+
+    it('should match * with :not selector', () => {
+      matcher.addSelectables(CssSelector.parse(':not([a])'), 1);
+      expect(matcher.match(getSelectorFor({tag: 'div'}), () => {})).toEqual(true);
+    });
+
+    it('should match with multiple :not selectors', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('div:not([a]):not([b])'), 1);
+      expect(matcher.match(getSelectorFor({tag: 'div', attrs: [['a', '']]}), selectableCollector))
+          .toBe(false);
+      expect(matcher.match(getSelectorFor({tag: 'div', attrs: [['b', '']]}), selectableCollector))
+          .toBe(false);
+      expect(matcher.match(getSelectorFor({tag: 'div', attrs: [['c', '']]}), selectableCollector))
+          .toBe(true);
+    });
+
+    it('should select with one match in a list', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('input[type=text], textbox'), 1);
+
+      expect(matcher.match(getSelectorFor({tag: 'textbox'}), selectableCollector)).toEqual(true);
+      expect(matched).toEqual([s1[1], 1]);
+
+      reset();
+      expect(matcher.match(
+                 getSelectorFor({tag: 'input', attrs: [['type', 'text']]}), selectableCollector))
+          .toEqual(true);
+      expect(matched).toEqual([s1[0], 1]);
+    });
+
+    it('should not select twice with two matches in a list', () => {
+      matcher.addSelectables(s1 = CssSelector.parse('input, .someClass'), 1);
+
+      expect(
+          matcher.match(getSelectorFor({tag: 'input', classes: 'someclass'}), selectableCollector))
+          .toEqual(true);
+      expect(matched.length).toEqual(2);
+      expect(matched).toEqual([s1[0], 1]);
+    });
+  });
+
+  describe('CssSelector.parse', () => {
+    it('should detect element names', () => {
+      const cssSelector = CssSelector.parse('sometag')[0];
+      expect(cssSelector.element).toEqual('sometag');
+      expect(cssSelector.toString()).toEqual('sometag');
+    });
+
+    it('should detect class names', () => {
+      const cssSelector = CssSelector.parse('.someClass')[0];
+      expect(cssSelector.classNames).toEqual(['someclass']);
+
+      expect(cssSelector.toString()).toEqual('.someclass');
+    });
+
+    it('should detect attr names', () => {
+      const cssSelector = CssSelector.parse('[attrname]')[0];
+      expect(cssSelector.attrs).toEqual(['attrname', '']);
+
+      expect(cssSelector.toString()).toEqual('[attrname]');
+    });
+
+    it('should detect attr values', () => {
+      const cssSelector = CssSelector.parse('[attrname=attrvalue]')[0];
+      expect(cssSelector.attrs).toEqual(['attrname', 'attrvalue']);
+      expect(cssSelector.toString()).toEqual('[attrname=attrvalue]');
+    });
+
+    it('should detect attr values with double quotes', () => {
+      const cssSelector = CssSelector.parse('[attrname="attrvalue"]')[0];
+      expect(cssSelector.attrs).toEqual(['attrname', 'attrvalue']);
+      expect(cssSelector.toString()).toEqual('[attrname=attrvalue]');
+    });
+
+    it('should detect attr values with single quotes', () => {
+      const cssSelector = CssSelector.parse('[attrname=\'attrvalue\']')[0];
+      expect(cssSelector.attrs).toEqual(['attrname', 'attrvalue']);
+      expect(cssSelector.toString()).toEqual('[attrname=attrvalue]');
+    });
+
+    it('should detect multiple parts', () => {
+      const cssSelector = CssSelector.parse('sometag[attrname=attrvalue].someclass')[0];
+      expect(cssSelector.element).toEqual('sometag');
+      expect(cssSelector.attrs).toEqual(['attrname', 'attrvalue']);
+      expect(cssSelector.classNames).toEqual(['someclass']);
+
+      expect(cssSelector.toString()).toEqual('sometag.someclass[attrname=attrvalue]');
+    });
+
+    it('should detect multiple attributes', () => {
+      const cssSelector = CssSelector.parse('input[type=text][control]')[0];
+      expect(cssSelector.element).toEqual('input');
+      expect(cssSelector.attrs).toEqual(['type', 'text', 'control', '']);
+
+      expect(cssSelector.toString()).toEqual('input[type=text][control]');
+    });
+
+    it('should detect :not', () => {
+      const cssSelector = CssSelector.parse('sometag:not([attrname=attrvalue].someclass)')[0];
+      expect(cssSelector.element).toEqual('sometag');
+      expect(cssSelector.attrs.length).toEqual(0);
+      expect(cssSelector.classNames.length).toEqual(0);
+
+      const notSelector = cssSelector.notSelectors[0];
+      expect(notSelector.element).toEqual(null);
+      expect(notSelector.attrs).toEqual(['attrname', 'attrvalue']);
+      expect(notSelector.classNames).toEqual(['someclass']);
+
+      expect(cssSelector.toString()).toEqual('sometag:not(.someclass[attrname=attrvalue])');
+    });
+
+    it('should detect :not without truthy', () => {
+      const cssSelector = CssSelector.parse(':not([attrname=attrvalue].someclass)')[0];
+      expect(cssSelector.element).toEqual('*');
+
+      const notSelector = cssSelector.notSelectors[0];
+      expect(notSelector.attrs).toEqual(['attrname', 'attrvalue']);
+      expect(notSelector.classNames).toEqual(['someclass']);
+
+      expect(cssSelector.toString()).toEqual('*:not(.someclass[attrname=attrvalue])');
+    });
+
+    it('should throw when nested :not', () => {
+      expect(() => {
+        CssSelector.parse('sometag:not(:not([attrname=attrvalue].someclass))')[0];
+      }).toThrowError('Nesting :not is not allowed in a selector');
+    });
+
+    it('should throw when multiple selectors in :not', () => {
+      expect(() => {
+        CssSelector.parse('sometag:not(a,b)');
+      }).toThrowError('Multiple selectors in :not are not supported');
+    });
+
+    it('should detect lists of selectors', () => {
+      const cssSelectors = CssSelector.parse('.someclass,[attrname=attrvalue], sometag');
+      expect(cssSelectors.length).toEqual(3);
+
+      expect(cssSelectors[0].classNames).toEqual(['someclass']);
+      expect(cssSelectors[1].attrs).toEqual(['attrname', 'attrvalue']);
+      expect(cssSelectors[2].element).toEqual('sometag');
+    });
+
+    it('should detect lists of selectors with :not', () => {
+      const cssSelectors =
+          CssSelector.parse('input[type=text], :not(textarea), textbox:not(.special)');
+      expect(cssSelectors.length).toEqual(3);
+
+      expect(cssSelectors[0].element).toEqual('input');
+      expect(cssSelectors[0].attrs).toEqual(['type', 'text']);
+
+      expect(cssSelectors[1].element).toEqual('*');
+      expect(cssSelectors[1].notSelectors[0].element).toEqual('textarea');
+
+      expect(cssSelectors[2].element).toEqual('textbox');
+      expect(cssSelectors[2].notSelectors[0].classNames).toEqual(['special']);
+    });
+  });
+
+  describe('CssSelector.getMatchingElementTemplate', () => {
+    it('should create an element with a tagName, classes, and attributes with the correct casing',
+       () => {
+         const selector = CssSelector.parse('Blink.neon.hotpink[Sweet][Dismissable=false]')[0];
+         const template = selector.getMatchingElementTemplate();
+
+         expect(template).toEqual('<Blink class="neon hotpink" Sweet Dismissable="false"></Blink>');
+       });
+
+    it('should create an element without a tag name', () => {
+      const selector = CssSelector.parse('[fancy]')[0];
+      const template = selector.getMatchingElementTemplate();
+
+      expect(template).toEqual('<div fancy></div>');
+    });
+
+    it('should ignore :not selectors', () => {
+      const selector = CssSelector.parse('grape:not(.red)')[0];
+      const template = selector.getMatchingElementTemplate();
+
+      expect(template).toEqual('<grape></grape>');
+    });
+
+    it('should support void tags', () => {
+      const selector = CssSelector.parse('input[fancy]')[0];
+      const template = selector.getMatchingElementTemplate();
+      expect(template).toEqual('<input fancy/>');
+    });
+  });
+}
+
+function getSelectorFor(
+    {tag = '', attrs = [], classes = ''}: {tag?: string, attrs?: any[], classes?: string} = {}):
+    CssSelector {
+  const selector = new CssSelector();
+  selector.setElement(tag);
+
+  attrs.forEach(nameValue => { selector.addAttribute(nameValue[0], nameValue[1]); });
+
+  classes.trim().split(/\s+/g).forEach(cName => { selector.addClassName(cName); });
+
+  return selector;
+}
diff --git a/packages/compiler/test/shadow_css_spec.ts b/packages/compiler/test/shadow_css_spec.ts
new file mode 100644
index 000000000000..8bf0cd85e266
--- /dev/null
+++ b/packages/compiler/test/shadow_css_spec.ts
@@ -0,0 +1,360 @@
+/**
+ * @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 {CssRule, ShadowCss, processRules} from '@angular/compiler/src/shadow_css';
+import {normalizeCSS} from '@angular/platform-browser/testing/src/browser_util';
+
+{
+  describe('ShadowCss', function() {
+
+    function s(css: string, contentAttr: string, hostAttr: string = '') {
+      const shadowCss = new ShadowCss();
+      const shim = shadowCss.shimCssText(css, contentAttr, hostAttr);
+      const nlRegexp = /\n/g;
+      return normalizeCSS(shim.replace(nlRegexp, ''));
+    }
+
+    it('should handle empty string', () => { expect(s('', 'contenta')).toEqual(''); });
+
+    it('should add an attribute to every rule', () => {
+      const css = 'one {color: red;}two {color: red;}';
+      const expected = 'one[contenta] {color:red;}two[contenta] {color:red;}';
+      expect(s(css, 'contenta')).toEqual(expected);
+    });
+
+    it('should handle invalid css', () => {
+      const css = 'one {color: red;}garbage';
+      const expected = 'one[contenta] {color:red;}garbage';
+      expect(s(css, 'contenta')).toEqual(expected);
+    });
+
+    it('should add an attribute to every selector', () => {
+      const css = 'one, two {color: red;}';
+      const expected = 'one[contenta], two[contenta] {color:red;}';
+      expect(s(css, 'contenta')).toEqual(expected);
+    });
+
+    it('should support newlines in the selector and content ', () => {
+      const css = 'one, \ntwo {\ncolor: red;}';
+      const expected = 'one[contenta], two[contenta] {color:red;}';
+      expect(s(css, 'contenta')).toEqual(expected);
+    });
+
+    it('should handle media rules', () => {
+      const css = '@media screen and (max-width:800px, max-height:100%) {div {font-size:50px;}}';
+      const expected =
+          '@media screen and (max-width:800px, max-height:100%) {div[contenta] {font-size:50px;}}';
+      expect(s(css, 'contenta')).toEqual(expected);
+    });
+
+    it('should handle page rules', () => {
+      const css = '@page {div {font-size:50px;}}';
+      const expected = '@page {div[contenta] {font-size:50px;}}';
+      expect(s(css, 'contenta')).toEqual(expected);
+    });
+
+    it('should handle document rules', () => {
+      const css = '@document url(http://www.w3.org/) {div {font-size:50px;}}';
+      const expected = '@document url(http://www.w3.org/) {div[contenta] {font-size:50px;}}';
+      expect(s(css, 'contenta')).toEqual(expected);
+    });
+
+    it('should handle media rules with simple rules', () => {
+      const css = '@media screen and (max-width: 800px) {div {font-size: 50px;}} div {}';
+      const expected =
+          '@media screen and (max-width:800px) {div[contenta] {font-size:50px;}} div[contenta] {}';
+      expect(s(css, 'contenta')).toEqual(expected);
+    });
+
+    it('should handle support rules', () => {
+      const css = '@supports (display: flex) {section {display: flex;}}';
+      const expected = '@supports (display:flex) {section[contenta] {display:flex;}}';
+      expect(s(css, 'contenta')).toEqual(expected);
+    });
+
+    // Check that the browser supports unprefixed CSS animation
+    it('should handle keyframes rules', () => {
+      const css = '@keyframes foo {0% {transform:translate(-50%) scaleX(0);}}';
+      expect(s(css, 'contenta')).toEqual(css);
+    });
+
+    it('should handle -webkit-keyframes rules', () => {
+      const css = '@-webkit-keyframes foo {0% {-webkit-transform:translate(-50%) scaleX(0);}}';
+      expect(s(css, 'contenta')).toEqual(css);
+    });
+
+    it('should handle complicated selectors', () => {
+      expect(s('one::before {}', 'contenta')).toEqual('one[contenta]::before {}');
+      expect(s('one two {}', 'contenta')).toEqual('one[contenta] two[contenta] {}');
+      expect(s('one > two {}', 'contenta')).toEqual('one[contenta] > two[contenta] {}');
+      expect(s('one + two {}', 'contenta')).toEqual('one[contenta] + two[contenta] {}');
+      expect(s('one ~ two {}', 'contenta')).toEqual('one[contenta] ~ two[contenta] {}');
+      const res = s('.one.two > three {}', 'contenta');  // IE swap classes
+      expect(
+          res == '.one.two[contenta] > three[contenta] {}' ||
+          res == '.two.one[contenta] > three[contenta] {}')
+          .toEqual(true);
+      expect(s('one[attr="value"] {}', 'contenta')).toEqual('one[attr="value"][contenta] {}');
+      expect(s('one[attr=value] {}', 'contenta')).toEqual('one[attr="value"][contenta] {}');
+      expect(s('one[attr^="value"] {}', 'contenta')).toEqual('one[attr^="value"][contenta] {}');
+      expect(s('one[attr$="value"] {}', 'contenta')).toEqual('one[attr$="value"][contenta] {}');
+      expect(s('one[attr*="value"] {}', 'contenta')).toEqual('one[attr*="value"][contenta] {}');
+      expect(s('one[attr|="value"] {}', 'contenta')).toEqual('one[attr|="value"][contenta] {}');
+      expect(s('one[attr~="value"] {}', 'contenta')).toEqual('one[attr~="value"][contenta] {}');
+      expect(s('one[attr="va lue"] {}', 'contenta')).toEqual('one[attr="va lue"][contenta] {}');
+      expect(s('one[attr] {}', 'contenta')).toEqual('one[attr][contenta] {}');
+      expect(s('[is="one"] {}', 'contenta')).toEqual('[is="one"][contenta] {}');
+    });
+
+    describe((':host'), () => {
+      it('should handle no context',
+         () => { expect(s(':host {}', 'contenta', 'a-host')).toEqual('[a-host] {}'); });
+
+      it('should handle tag selector',
+         () => { expect(s(':host(ul) {}', 'contenta', 'a-host')).toEqual('ul[a-host] {}'); });
+
+      it('should handle class selector',
+         () => { expect(s(':host(.x) {}', 'contenta', 'a-host')).toEqual('.x[a-host] {}'); });
+
+      it('should handle attribute selector', () => {
+        expect(s(':host([a="b"]) {}', 'contenta', 'a-host')).toEqual('[a="b"][a-host] {}');
+        expect(s(':host([a=b]) {}', 'contenta', 'a-host')).toEqual('[a="b"][a-host] {}');
+      });
+
+      it('should handle multiple tag selectors', () => {
+        expect(s(':host(ul,li) {}', 'contenta', 'a-host')).toEqual('ul[a-host], li[a-host] {}');
+        expect(s(':host(ul,li) > .z {}', 'contenta', 'a-host'))
+            .toEqual('ul[a-host] > .z[contenta], li[a-host] > .z[contenta] {}');
+      });
+
+      it('should handle multiple class selectors', () => {
+        expect(s(':host(.x,.y) {}', 'contenta', 'a-host')).toEqual('.x[a-host], .y[a-host] {}');
+        expect(s(':host(.x,.y) > .z {}', 'contenta', 'a-host'))
+            .toEqual('.x[a-host] > .z[contenta], .y[a-host] > .z[contenta] {}');
+      });
+
+      it('should handle multiple attribute selectors', () => {
+        expect(s(':host([a="b"],[c=d]) {}', 'contenta', 'a-host'))
+            .toEqual('[a="b"][a-host], [c="d"][a-host] {}');
+      });
+
+      it('should handle pseudo selectors', () => {
+        expect(s(':host(:before) {}', 'contenta', 'a-host')).toEqual('[a-host]:before {}');
+        expect(s(':host:before {}', 'contenta', 'a-host')).toEqual('[a-host]:before {}');
+        expect(s(':host:nth-child(8n+1) {}', 'contenta', 'a-host'))
+            .toEqual('[a-host]:nth-child(8n+1) {}');
+        expect(s(':host:nth-of-type(8n+1) {}', 'contenta', 'a-host'))
+            .toEqual('[a-host]:nth-of-type(8n+1) {}');
+        expect(s(':host(.class):before {}', 'contenta', 'a-host'))
+            .toEqual('.class[a-host]:before {}');
+        expect(s(':host.class:before {}', 'contenta', 'a-host'))
+            .toEqual('.class[a-host]:before {}');
+        expect(s(':host(:not(p)):before {}', 'contenta', 'a-host'))
+            .toEqual('[a-host]:not(p):before {}');
+      });
+
+      // see b/63672152
+      it('should handle unexpected selectors in the most reasonable way', () => {
+        expect(s('cmp:host {}', 'contenta', 'a-host')).toEqual('cmp[a-host] {}');
+        expect(s('cmp:host >>> {}', 'contenta', 'a-host')).toEqual('cmp[a-host] {}');
+        expect(s('cmp:host child {}', 'contenta', 'a-host'))
+            .toEqual('cmp[a-host] child[contenta] {}');
+        expect(s('cmp:host >>> child {}', 'contenta', 'a-host')).toEqual('cmp[a-host] child {}');
+        expect(s('cmp :host {}', 'contenta', 'a-host')).toEqual('cmp [a-host] {}');
+        expect(s('cmp :host >>> {}', 'contenta', 'a-host')).toEqual('cmp [a-host] {}');
+        expect(s('cmp :host child {}', 'contenta', 'a-host'))
+            .toEqual('cmp [a-host] child[contenta] {}');
+        expect(s('cmp :host >>> child {}', 'contenta', 'a-host')).toEqual('cmp [a-host] child {}');
+      });
+    });
+
+    describe((':host-context'), () => {
+      it('should handle tag selector', () => {
+        expect(s(':host-context(div) {}', 'contenta', 'a-host'))
+            .toEqual('div[a-host], div [a-host] {}');
+        expect(s(':host-context(ul) > .y {}', 'contenta', 'a-host'))
+            .toEqual('ul[a-host] > .y[contenta], ul [a-host] > .y[contenta] {}');
+      });
+
+      it('should handle class selector', () => {
+        expect(s(':host-context(.x) {}', 'contenta', 'a-host'))
+            .toEqual('.x[a-host], .x [a-host] {}');
+
+        expect(s(':host-context(.x) > .y {}', 'contenta', 'a-host'))
+            .toEqual('.x[a-host] > .y[contenta], .x [a-host] > .y[contenta] {}');
+      });
+
+      it('should handle attribute selector', () => {
+        expect(s(':host-context([a="b"]) {}', 'contenta', 'a-host'))
+            .toEqual('[a="b"][a-host], [a="b"] [a-host] {}');
+        expect(s(':host-context([a=b]) {}', 'contenta', 'a-host'))
+            .toEqual('[a=b][a-host], [a="b"] [a-host] {}');
+      });
+    });
+
+    it('should support polyfill-next-selector', () => {
+      let css = s('polyfill-next-selector {content: \'x > y\'} z {}', 'contenta');
+      expect(css).toEqual('x[contenta] > y[contenta]{}');
+
+      css = s('polyfill-next-selector {content: "x > y"} z {}', 'contenta');
+      expect(css).toEqual('x[contenta] > y[contenta]{}');
+
+      css = s(`polyfill-next-selector {content: 'button[priority="1"]'} z {}`, 'contenta');
+      expect(css).toEqual('button[priority="1"][contenta]{}');
+    });
+
+    it('should support polyfill-unscoped-rule', () => {
+      let css = s('polyfill-unscoped-rule {content: \'#menu > .bar\';color: blue;}', 'contenta');
+      expect(css).toContain('#menu > .bar {;color:blue;}');
+
+      css = s('polyfill-unscoped-rule {content: "#menu > .bar";color: blue;}', 'contenta');
+      expect(css).toContain('#menu > .bar {;color:blue;}');
+
+      css = s(`polyfill-unscoped-rule {content: 'button[priority="1"]'}`, 'contenta');
+      expect(css).toContain('button[priority="1"] {}');
+    });
+
+    it('should support multiple instances polyfill-unscoped-rule', () => {
+      const css =
+          s('polyfill-unscoped-rule {content: \'foo\';color: blue;}' +
+                'polyfill-unscoped-rule {content: \'bar\';color: blue;}',
+            'contenta');
+      expect(css).toContain('foo {;color:blue;}');
+      expect(css).toContain('bar {;color:blue;}');
+    });
+
+    it('should support polyfill-rule', () => {
+      let css = s('polyfill-rule {content: \':host.foo .bar\';color: blue;}', 'contenta', 'a-host');
+      expect(css).toEqual('.foo[a-host] .bar[contenta] {;color:blue;}');
+
+      css = s('polyfill-rule {content: ":host.foo .bar";color:blue;}', 'contenta', 'a-host');
+      expect(css).toEqual('.foo[a-host] .bar[contenta] {;color:blue;}');
+
+      css = s(`polyfill-rule {content: 'button[priority="1"]'}`, 'contenta', 'a-host');
+      expect(css).toEqual('button[priority="1"][contenta] {}');
+    });
+
+    it('should handle ::shadow', () => {
+      const css = s('x::shadow > y {}', 'contenta');
+      expect(css).toEqual('x[contenta] > y[contenta] {}');
+    });
+
+    it('should handle /deep/', () => {
+      const css = s('x /deep/ y {}', 'contenta');
+      expect(css).toEqual('x[contenta] y {}');
+    });
+
+    it('should handle >>>', () => {
+      const css = s('x >>> y {}', 'contenta');
+      expect(css).toEqual('x[contenta] y {}');
+    });
+
+    it('should handle ::ng-deep', () => {
+      let css = '::ng-deep y {}';
+      expect(s(css, 'contenta')).toEqual('y {}');
+      css = 'x ::ng-deep y {}';
+      expect(s(css, 'contenta')).toEqual('x[contenta] y {}');
+      css = ':host > ::ng-deep .x {}';
+      expect(s(css, 'contenta', 'h')).toEqual('[h] > .x {}');
+      css = ':host ::ng-deep > .x {}';
+      expect(s(css, 'contenta', 'h')).toEqual('[h] > .x {}');
+      css = ':host > ::ng-deep > .x {}';
+      expect(s(css, 'contenta', '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, 'contenta');
+      expect(css).toEqual(styleStr);
+    });
+
+    it('should shim rules after @import', () => {
+      const styleStr = '@import url("a"); div {}';
+      const css = s(styleStr, 'contenta');
+      expect(css).toEqual('@import url("a"); div[contenta] {}');
+    });
+
+    it('should leave calc() unchanged', () => {
+      const styleStr = 'div {height:calc(100% - 55px);}';
+      const css = s(styleStr, 'contenta');
+      expect(css).toEqual('div[contenta] {height:calc(100% - 55px);}');
+    });
+
+    it('should strip comments',
+       () => { expect(s('/* x */b {c}', 'contenta')).toEqual('b[contenta] {c}'); });
+
+    it('should ignore special characters in comments',
+       () => { expect(s('/* {;, */b {c}', 'contenta')).toEqual('b[contenta] {c}'); });
+
+    it('should support multiline comments',
+       () => { expect(s('/* \n */b {c}', 'contenta')).toEqual('b[contenta] {c}'); });
+
+    it('should keep sourceMappingURL comments', () => {
+      expect(s('b {c}/*# sourceMappingURL=data:x */', 'contenta'))
+          .toEqual('b[contenta] {c}/*# sourceMappingURL=data:x */');
+      expect(s('b {c}/* #sourceMappingURL=data:x */', 'contenta'))
+          .toEqual('b[contenta] {c}/* #sourceMappingURL=data:x */');
+    });
+
+    it('should keep sourceURL comments', () => {
+      expect(s('/*# sourceMappingURL=data:x */b {c}/*# sourceURL=xxx */', 'contenta'))
+          .toEqual('b[contenta] {c}/*# sourceMappingURL=data:x *//*# sourceURL=xxx */');
+    });
+  });
+
+  describe('processRules', () => {
+    describe('parse rules', () => {
+      function captureRules(input: string): CssRule[] {
+        const result: CssRule[] = [];
+        processRules(input, (cssRule) => {
+          result.push(cssRule);
+          return cssRule;
+        });
+        return result;
+      }
+
+      it('should work with empty css', () => { expect(captureRules('')).toEqual([]); });
+
+      it('should capture a rule without body',
+         () => { expect(captureRules('a;')).toEqual([new CssRule('a', '')]); });
+
+      it('should capture css rules with body',
+         () => { expect(captureRules('a {b}')).toEqual([new CssRule('a', 'b')]); });
+
+      it('should capture css rules with nested rules', () => {
+        expect(captureRules('a {b {c}} d {e}')).toEqual([
+          new CssRule('a', 'b {c}'),
+          new CssRule('d', 'e'),
+        ]);
+      });
+
+      it('should capture multiple rules where some have no body', () => {
+        expect(captureRules('@import a ; b {c}')).toEqual([
+          new CssRule('@import a', ''),
+          new CssRule('b', 'c'),
+        ]);
+      });
+    });
+
+    describe('modify rules', () => {
+      it('should allow to change the selector while preserving whitespaces', () => {
+        expect(processRules(
+                   '@import a; b {c {d}} e {f}',
+                   (cssRule: CssRule) => new CssRule(cssRule.selector + '2', cssRule.content)))
+            .toEqual('@import a2; b2 {c {d}} e2 {f}');
+      });
+
+      it('should allow to change the content', () => {
+        expect(processRules(
+                   'a {b}',
+                   (cssRule: CssRule) => new CssRule(cssRule.selector, cssRule.content + '2')))
+            .toEqual('a {b2}');
+      });
+    });
+  });
+}
diff --git a/packages/compiler/test/spies.ts b/packages/compiler/test/spies.ts
new file mode 100644
index 000000000000..54c2263c4ad9
--- /dev/null
+++ b/packages/compiler/test/spies.ts
@@ -0,0 +1,16 @@
+/**
+ * @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/src/resource_loader';
+
+import {SpyObject} from '@angular/core/testing/src/testing_internal';
+
+export class SpyResourceLoader extends SpyObject {
+  public static PROVIDE = {provide: ResourceLoader, useClass: SpyResourceLoader, deps: []};
+  constructor() { super(ResourceLoader); }
+}
diff --git a/packages/compiler/test/style_url_resolver_spec.ts b/packages/compiler/test/style_url_resolver_spec.ts
new file mode 100644
index 000000000000..ef8aebdb5c6f
--- /dev/null
+++ b/packages/compiler/test/style_url_resolver_spec.ts
@@ -0,0 +1,136 @@
+/**
+ * @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 {extractStyleUrls, isStyleUrlResolvable} from '@angular/compiler/src/style_url_resolver';
+import {UrlResolver} from '@angular/compiler/src/url_resolver';
+
+{
+  describe('extractStyleUrls', () => {
+    let urlResolver: UrlResolver;
+
+    beforeEach(() => { urlResolver = new UrlResolver(); });
+
+    it('should not resolve "url()" urls', () => {
+      const css = `
+      .foo {
+        background-image: url("double.jpg");
+        background-image: url('simple.jpg');
+        background-image: url(noquote.jpg);
+      }`;
+      const resolvedCss = extractStyleUrls(urlResolver, 'http://ng.io', css).style;
+      expect(resolvedCss).toEqual(css);
+    });
+
+    it('should extract "@import" urls', () => {
+      const css = `
+      @import '1.css';
+      @import "2.css";
+      `;
+      const styleWithImports = extractStyleUrls(urlResolver, 'http://ng.io', css);
+      expect(styleWithImports.style.trim()).toEqual('');
+      expect(styleWithImports.styleUrls).toEqual(['http://ng.io/1.css', 'http://ng.io/2.css']);
+    });
+
+    it('should ignore "@import" in comments', () => {
+      const css = `
+      @import '1.css';
+      /*@import '2.css';*/
+      /*
+      @import '3.css';
+      */
+      `;
+      const styleWithImports = extractStyleUrls(urlResolver, 'http://ng.io', css);
+      expect(styleWithImports.style.trim()).toEqual('');
+      expect(styleWithImports.styleUrls).toContain('http://ng.io/1.css');
+      expect(styleWithImports.styleUrls).not.toContain('http://ng.io/2.css');
+      expect(styleWithImports.styleUrls).not.toContain('http://ng.io/3.css');
+    });
+
+    it('should keep /*# sourceURL... */ and /*# sourceMappingURL... */ comments', () => {
+      const css =
+          `/*regular comment*/\n/*# sourceURL=.... */\n/*# sourceMappingURL=... *//*#sourceMappingURL=... */`;
+      const styleWithSourceMaps = extractStyleUrls(urlResolver, 'http://ng.io', css);
+      expect(styleWithSourceMaps.style.trim())
+          .toEqual('/*# sourceURL=.... */\n/*# sourceMappingURL=... *//*#sourceMappingURL=... */');
+    });
+
+    it('should extract "@import url()" urls', () => {
+      const css = `
+      @import url('3.css');
+      @import url("4.css");
+      @import url(5.css);
+      `;
+      const styleWithImports = extractStyleUrls(urlResolver, 'http://ng.io', css);
+      expect(styleWithImports.style.trim()).toEqual('');
+      expect(styleWithImports.styleUrls).toEqual([
+        'http://ng.io/3.css', 'http://ng.io/4.css', 'http://ng.io/5.css'
+      ]);
+    });
+
+    it('should extract "@import urls and keep rules in the same line', () => {
+      const css = `@import url('some.css');div {color: red};`;
+      const styleWithImports = extractStyleUrls(urlResolver, 'http://ng.io', css);
+      expect(styleWithImports.style.trim()).toEqual('div {color: red};');
+      expect(styleWithImports.styleUrls).toEqual(['http://ng.io/some.css']);
+    });
+
+    it('should extract media query in "@import"', () => {
+      const css = `
+      @import 'print1.css' print;
+      @import url(print2.css) print;
+      `;
+      const styleWithImports = extractStyleUrls(urlResolver, 'http://ng.io', css);
+      expect(styleWithImports.style.trim()).toEqual('');
+      expect(styleWithImports.styleUrls).toEqual([
+        'http://ng.io/print1.css', 'http://ng.io/print2.css'
+      ]);
+    });
+
+    it('should leave absolute non-package @import urls intact', () => {
+      const css = `@import url('http://server.com/some.css');`;
+      const styleWithImports = extractStyleUrls(urlResolver, 'http://ng.io', css);
+      expect(styleWithImports.style.trim()).toEqual(`@import url('http://server.com/some.css');`);
+      expect(styleWithImports.styleUrls).toEqual([]);
+    });
+
+    it('should resolve package @import urls', () => {
+      const css = `@import url('package:a/b/some.css');`;
+      const styleWithImports = extractStyleUrls(new FakeUrlResolver(), 'http://ng.io', css);
+      expect(styleWithImports.style.trim()).toEqual(``);
+      expect(styleWithImports.styleUrls).toEqual(['fake_resolved_url']);
+    });
+
+  });
+
+  describe('isStyleUrlResolvable', () => {
+    it('should resolve relative urls',
+       () => { expect(isStyleUrlResolvable('someUrl.css')).toBe(true); });
+
+    it('should resolve package: urls',
+       () => { expect(isStyleUrlResolvable('package:someUrl.css')).toBe(true); });
+
+    it('should not resolve empty urls', () => {
+      expect(isStyleUrlResolvable(null !)).toBe(false);
+      expect(isStyleUrlResolvable('')).toBe(false);
+    });
+
+    it('should not resolve urls with other schema',
+       () => { expect(isStyleUrlResolvable('http://otherurl')).toBe(false); });
+
+    it('should not resolve urls with absolute paths', () => {
+      expect(isStyleUrlResolvable('/otherurl')).toBe(false);
+      expect(isStyleUrlResolvable('//otherurl')).toBe(false);
+    });
+  });
+}
+
+class FakeUrlResolver extends UrlResolver {
+  constructor() { super(); }
+
+  resolve(baseUrl: string, url: string): string { return 'fake_resolved_url'; }
+}
diff --git a/packages/compiler/test/template_parser/binding_parser_spec.ts b/packages/compiler/test/template_parser/binding_parser_spec.ts
new file mode 100644
index 000000000000..77656c6bc488
--- /dev/null
+++ b/packages/compiler/test/template_parser/binding_parser_spec.ts
@@ -0,0 +1,59 @@
+/**
+ * @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 {SecurityContext} from '@angular/core';
+import {inject} from '@angular/core/testing';
+
+import {ElementSchemaRegistry} from '../../src/schema/element_schema_registry';
+import {calcPossibleSecurityContexts} from '../../src/template_parser/binding_parser';
+
+{
+  describe('BindingParser', () => {
+    let registry: ElementSchemaRegistry;
+
+    beforeEach(inject(
+        [ElementSchemaRegistry], (_registry: ElementSchemaRegistry) => { registry = _registry; }));
+
+    describe('possibleSecurityContexts', () => {
+      function hrefSecurityContexts(selector: string) {
+        return calcPossibleSecurityContexts(registry, selector, 'href', false);
+      }
+
+      it('should return a single security context if the selector as an element name',
+         () => { expect(hrefSecurityContexts('a')).toEqual([SecurityContext.URL]); });
+
+      it('should return the possible security contexts if the selector has no element name', () => {
+        expect(hrefSecurityContexts('[myDir]')).toEqual([
+          SecurityContext.NONE, SecurityContext.URL, SecurityContext.RESOURCE_URL
+        ]);
+      });
+
+      it('should exclude possible elements via :not', () => {
+        expect(hrefSecurityContexts('[myDir]:not(link):not(base)')).toEqual([
+          SecurityContext.NONE, SecurityContext.URL
+        ]);
+      });
+
+      it('should not exclude possible narrowed elements via :not', () => {
+        expect(hrefSecurityContexts('[myDir]:not(link.someClass):not(base.someClass)')).toEqual([
+          SecurityContext.NONE, SecurityContext.URL, SecurityContext.RESOURCE_URL
+        ]);
+      });
+
+      it('should return SecurityContext.NONE if there are no possible elements',
+         () => { expect(hrefSecurityContexts('img:not(img)')).toEqual([SecurityContext.NONE]); });
+
+      it('should return the union of the possible security contexts if multiple selectors are specified',
+         () => {
+           expect(calcPossibleSecurityContexts(registry, 'a,link', 'href', false)).toEqual([
+             SecurityContext.URL, SecurityContext.RESOURCE_URL
+           ]);
+         });
+    });
+  });
+}
\ No newline at end of file
diff --git a/packages/compiler/test/template_parser/template_parser_spec.ts b/packages/compiler/test/template_parser/template_parser_spec.ts
new file mode 100644
index 000000000000..fc0834d9d9b6
--- /dev/null
+++ b/packages/compiler/test/template_parser/template_parser_spec.ts
@@ -0,0 +1,2290 @@
+/**
+ * @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 {CompileQueryMetadata, CompilerConfig, ProxyClass, StaticSymbol, preserveWhitespacesDefault} from '@angular/compiler';
+import {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';
+import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, PropertyBindingType, ProviderAstType, ReferenceAst, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from '@angular/compiler/src/template_parser/template_ast';
+import {TemplateParser, splitClasses} from '@angular/compiler/src/template_parser/template_parser';
+import {ChangeDetectionStrategy, ComponentFactory, RendererType2, SchemaMetadata, SecurityContext, ViewEncapsulation} from '@angular/core';
+import {Console} from '@angular/core/src/console';
+import {TestBed, inject} from '@angular/core/testing';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
+
+import {CompileEntryComponentMetadata, CompileStylesheetMetadata} from '../../src/compile_metadata';
+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';
+import {unparse} from '../expression_parser/utils/unparser';
+import {TEST_COMPILER_PROVIDERS} from '../test_bindings';
+
+const someModuleUrl = 'package:someModule';
+
+const MOCK_SCHEMA_REGISTRY = [{
+  provide: ElementSchemaRegistry,
+  useValue: new MockSchemaRegistry(
+      {'invalidProp': false}, {'mappedAttr': 'mappedProp'}, {'unknown': false, 'un-known': false},
+      ['onEvent'], ['onEvent']),
+}];
+
+function createTypeMeta({reference, diDeps}: {reference: any, diDeps?: any[]}):
+    CompileTypeMetadata {
+  return {reference: reference, diDeps: diDeps || [], lifecycleHooks: []};
+}
+
+function compileDirectiveMetadataCreate(
+    {isHost, type, isComponent, selector, exportAs, changeDetection, inputs, outputs, host,
+     providers, viewProviders, queries, guards, viewQueries, entryComponents, template,
+     componentViewType, rendererType}: {
+      isHost?: boolean,
+      type?: CompileTypeMetadata,
+      isComponent?: boolean,
+      selector?: string | null,
+      exportAs?: string | null,
+      changeDetection?: ChangeDetectionStrategy | null,
+      inputs?: string[],
+      outputs?: string[],
+      host?: {[key: string]: string},
+      providers?: CompileProviderMetadata[] | null,
+      viewProviders?: CompileProviderMetadata[] | null,
+      queries?: CompileQueryMetadata[] | null,
+      guards?: {[key: string]: any},
+      viewQueries?: CompileQueryMetadata[],
+      entryComponents?: CompileEntryComponentMetadata[],
+      template?: CompileTemplateMetadata,
+      componentViewType?: StaticSymbol | ProxyClass | null,
+      rendererType?: StaticSymbol | RendererType2 | null,
+    }) {
+  return CompileDirectiveMetadata.create({
+    isHost: !!isHost,
+    type: noUndefined(type) !,
+    isComponent: !!isComponent,
+    selector: noUndefined(selector),
+    exportAs: noUndefined(exportAs),
+    changeDetection: null,
+    inputs: inputs || [],
+    outputs: outputs || [],
+    host: host || {},
+    providers: providers || [],
+    viewProviders: viewProviders || [],
+    queries: queries || [],
+    guards: guards || {},
+    viewQueries: viewQueries || [],
+    entryComponents: entryComponents || [],
+    template: noUndefined(template) !,
+    componentViewType: noUndefined(componentViewType),
+    rendererType: noUndefined(rendererType),
+    componentFactory: null,
+  });
+}
+
+function compileTemplateMetadata({encapsulation, template, templateUrl, styles, styleUrls,
+                                  externalStylesheets, animations, ngContentSelectors,
+                                  interpolation, isInline, preserveWhitespaces}: {
+  encapsulation?: ViewEncapsulation | null,
+  template?: string | null,
+  templateUrl?: string | null,
+  styles?: string[],
+  styleUrls?: string[],
+  externalStylesheets?: CompileStylesheetMetadata[],
+  ngContentSelectors?: string[],
+  animations?: any[],
+  interpolation?: [string, string] | null,
+  isInline?: boolean,
+  preserveWhitespaces?: boolean | null,
+}): CompileTemplateMetadata {
+  return new CompileTemplateMetadata({
+    encapsulation: noUndefined(encapsulation),
+    template: noUndefined(template),
+    templateUrl: noUndefined(templateUrl),
+    htmlAst: null,
+    styles: styles || [],
+    styleUrls: styleUrls || [],
+    externalStylesheets: externalStylesheets || [],
+    animations: animations || [],
+    ngContentSelectors: ngContentSelectors || [],
+    interpolation: noUndefined(interpolation),
+    isInline: !!isInline,
+    preserveWhitespaces: preserveWhitespacesDefault(noUndefined(preserveWhitespaces)),
+  });
+}
+
+
+function humanizeTplAst(
+    templateAsts: TemplateAst[], interpolationConfig?: InterpolationConfig): any[] {
+  const humanizer = new TemplateHumanizer(false, interpolationConfig);
+  templateVisitAll(humanizer, templateAsts);
+  return humanizer.result;
+}
+
+function humanizeTplAstSourceSpans(
+    templateAsts: TemplateAst[], interpolationConfig?: InterpolationConfig): any[] {
+  const humanizer = new TemplateHumanizer(true, interpolationConfig);
+  templateVisitAll(humanizer, templateAsts);
+  return humanizer.result;
+}
+
+class TemplateHumanizer implements TemplateAstVisitor {
+  result: any[] = [];
+
+  constructor(
+      private includeSourceSpan: boolean,
+      private interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG) {}
+
+  visitNgContent(ast: NgContentAst, context: any): any {
+    const res = [NgContentAst];
+    this.result.push(this._appendSourceSpan(ast, res));
+    return null;
+  }
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
+    const res = [EmbeddedTemplateAst];
+    this.result.push(this._appendSourceSpan(ast, res));
+    templateVisitAll(this, ast.attrs);
+    templateVisitAll(this, ast.outputs);
+    templateVisitAll(this, ast.references);
+    templateVisitAll(this, ast.variables);
+    templateVisitAll(this, ast.directives);
+    templateVisitAll(this, ast.children);
+    return null;
+  }
+  visitElement(ast: ElementAst, context: any): any {
+    const res = [ElementAst, ast.name];
+    this.result.push(this._appendSourceSpan(ast, res));
+    templateVisitAll(this, ast.attrs);
+    templateVisitAll(this, ast.inputs);
+    templateVisitAll(this, ast.outputs);
+    templateVisitAll(this, ast.references);
+    templateVisitAll(this, ast.directives);
+    templateVisitAll(this, ast.children);
+    return null;
+  }
+  visitReference(ast: ReferenceAst, context: any): any {
+    const res = [ReferenceAst, ast.name, ast.value];
+    this.result.push(this._appendSourceSpan(ast, res));
+    return null;
+  }
+  visitVariable(ast: VariableAst, context: any): any {
+    const res = [VariableAst, ast.name, ast.value];
+    this.result.push(this._appendSourceSpan(ast, res));
+    return null;
+  }
+  visitEvent(ast: BoundEventAst, context: any): any {
+    const res =
+        [BoundEventAst, ast.name, ast.target, unparse(ast.handler, this.interpolationConfig)];
+    this.result.push(this._appendSourceSpan(ast, res));
+    return null;
+  }
+  visitElementProperty(ast: BoundElementPropertyAst, context: any): any {
+    const res = [
+      BoundElementPropertyAst, ast.type, ast.name, unparse(ast.value, this.interpolationConfig),
+      ast.unit
+    ];
+    this.result.push(this._appendSourceSpan(ast, res));
+    return null;
+  }
+  visitAttr(ast: AttrAst, context: any): any {
+    const res = [AttrAst, ast.name, ast.value];
+    this.result.push(this._appendSourceSpan(ast, res));
+    return null;
+  }
+  visitBoundText(ast: BoundTextAst, context: any): any {
+    const res = [BoundTextAst, unparse(ast.value, this.interpolationConfig)];
+    this.result.push(this._appendSourceSpan(ast, res));
+    return null;
+  }
+  visitText(ast: TextAst, context: any): any {
+    const res = [TextAst, ast.value];
+    this.result.push(this._appendSourceSpan(ast, res));
+    return null;
+  }
+  visitDirective(ast: DirectiveAst, context: any): any {
+    const res = [DirectiveAst, ast.directive];
+    this.result.push(this._appendSourceSpan(ast, res));
+    templateVisitAll(this, ast.inputs);
+    templateVisitAll(this, ast.hostProperties);
+    templateVisitAll(this, ast.hostEvents);
+    return null;
+  }
+  visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any {
+    const res = [
+      BoundDirectivePropertyAst, ast.directiveName, unparse(ast.value, this.interpolationConfig)
+    ];
+    this.result.push(this._appendSourceSpan(ast, res));
+    return null;
+  }
+
+  private _appendSourceSpan(ast: TemplateAst, input: any[]): any[] {
+    if (!this.includeSourceSpan) return input;
+    input.push(ast.sourceSpan !.toString());
+    return input;
+  }
+}
+
+function humanizeContentProjection(templateAsts: TemplateAst[]): any[] {
+  const humanizer = new TemplateContentProjectionHumanizer();
+  templateVisitAll(humanizer, templateAsts);
+  return humanizer.result;
+}
+
+class TemplateContentProjectionHumanizer implements TemplateAstVisitor {
+  result: any[] = [];
+  visitNgContent(ast: NgContentAst, context: any): any {
+    this.result.push(['ng-content', ast.ngContentIndex]);
+    return null;
+  }
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
+    this.result.push(['template', ast.ngContentIndex]);
+    templateVisitAll(this, ast.children);
+    return null;
+  }
+  visitElement(ast: ElementAst, context: any): any {
+    this.result.push([ast.name, ast.ngContentIndex]);
+    templateVisitAll(this, ast.children);
+    return null;
+  }
+  visitReference(ast: ReferenceAst, context: any): any { return null; }
+  visitVariable(ast: VariableAst, context: any): any { return null; }
+  visitEvent(ast: BoundEventAst, context: any): any { return null; }
+  visitElementProperty(ast: BoundElementPropertyAst, context: any): any { return null; }
+  visitAttr(ast: AttrAst, context: any): any { return null; }
+  visitBoundText(ast: BoundTextAst, context: any): any {
+    this.result.push([`#text(${unparse(ast.value)})`, ast.ngContentIndex]);
+    return null;
+  }
+  visitText(ast: TextAst, context: any): any {
+    this.result.push([`#text(${ast.value})`, ast.ngContentIndex]);
+    return null;
+  }
+  visitDirective(ast: DirectiveAst, context: any): any { return null; }
+  visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any { return null; }
+}
+
+class ThrowingVisitor implements TemplateAstVisitor {
+  visitNgContent(ast: NgContentAst, context: any): any { throw 'not implemented'; }
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any { throw 'not implemented'; }
+  visitElement(ast: ElementAst, context: any): any { throw 'not implemented'; }
+  visitReference(ast: ReferenceAst, context: any): any { throw 'not implemented'; }
+  visitVariable(ast: VariableAst, context: any): any { throw 'not implemented'; }
+  visitEvent(ast: BoundEventAst, context: any): any { throw 'not implemented'; }
+  visitElementProperty(ast: BoundElementPropertyAst, context: any): any { throw 'not implemented'; }
+  visitAttr(ast: AttrAst, context: any): any { throw 'not implemented'; }
+  visitBoundText(ast: BoundTextAst, context: any): any { throw 'not implemented'; }
+  visitText(ast: TextAst, context: any): any { throw 'not implemented'; }
+  visitDirective(ast: DirectiveAst, context: any): any { throw 'not implemented'; }
+  visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any {
+    throw 'not implemented';
+  }
+}
+
+class FooAstTransformer extends ThrowingVisitor {
+  visitElement(ast: ElementAst, context: any): any {
+    if (ast.name != 'div') return ast;
+    return new ElementAst(
+        'foo', [], [], [], [], [], [], false, [], [], ast.ngContentIndex, ast.sourceSpan,
+        ast.endSourceSpan);
+  }
+}
+
+class BarAstTransformer extends FooAstTransformer {
+  visitElement(ast: ElementAst, context: any): any {
+    if (ast.name != 'foo') return ast;
+    return new ElementAst(
+        'bar', [], [], [], [], [], [], false, [], [], ast.ngContentIndex, ast.sourceSpan,
+        ast.endSourceSpan);
+  }
+}
+
+class NullVisitor implements TemplateAstVisitor {
+  visitNgContent(ast: NgContentAst, context: any): any {}
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {}
+  visitElement(ast: ElementAst, 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 {}
+  visitDirective(ast: DirectiveAst, context: any): any {}
+  visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any {}
+}
+
+class ArrayConsole implements Console {
+  logs: string[] = [];
+  warnings: string[] = [];
+  log(msg: string) { this.logs.push(msg); }
+  warn(msg: string) { this.warnings.push(msg); }
+}
+
+
+(function() {
+  let ngIf: CompileDirectiveSummary;
+  let parse: (
+      template: string, directives: CompileDirectiveSummary[], pipes?: CompilePipeSummary[],
+      schemas?: SchemaMetadata[], preserveWhitespaces?: boolean) => TemplateAst[];
+  let console: ArrayConsole;
+
+  function configureCompiler() {
+    console = new ArrayConsole();
+    beforeEach(() => {
+      TestBed.configureCompiler({
+        providers: [
+          {provide: Console, useValue: console},
+        ],
+      });
+    });
+  }
+
+  function commonBeforeEach() {
+    beforeEach(inject([TemplateParser], (parser: TemplateParser) => {
+      const someAnimation = ['someAnimation'];
+      const someTemplate = compileTemplateMetadata({animations: [someAnimation]});
+      const component = compileDirectiveMetadataCreate({
+        isHost: false,
+        selector: 'root',
+        template: someTemplate,
+        type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Root'}}),
+        isComponent: true
+      });
+      ngIf = compileDirectiveMetadataCreate({
+               selector: '[ngIf]',
+               template: someTemplate,
+               type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'NgIf'}}),
+               inputs: ['ngIf']
+             }).toSummary();
+
+      parse =
+          (template: string, directives: CompileDirectiveSummary[],
+           pipes: CompilePipeSummary[] | null = null, schemas: SchemaMetadata[] = [],
+           preserveWhitespaces = true): TemplateAst[] => {
+            if (pipes === null) {
+              pipes = [];
+            }
+            return parser
+                .parse(
+                    component, template, directives, pipes, schemas, 'TestComp',
+                    preserveWhitespaces)
+                .template;
+          };
+    }));
+  }
+
+  describe('TemplateAstVisitor', () => {
+    function expectVisitedNode(visitor: TemplateAstVisitor, node: TemplateAst) {
+      expect(node.visit(visitor, null)).toEqual(node);
+    }
+
+    it('should visit NgContentAst', () => {
+      expectVisitedNode(
+          new class extends
+          NullVisitor{visitNgContent(ast: NgContentAst, context: any): any{return ast;}},
+          new NgContentAst(0, 0, null !));
+    });
+
+    it('should visit EmbeddedTemplateAst', () => {
+      expectVisitedNode(
+          new class extends NullVisitor{
+            visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any) { return ast; }
+          },
+          new EmbeddedTemplateAst([], [], [], [], [], [], false, [], [], 0, null !));
+    });
+
+    it('should visit ElementAst', () => {
+      expectVisitedNode(
+          new class extends
+          NullVisitor{visitElement(ast: ElementAst, context: any) { return ast; }},
+          new ElementAst('foo', [], [], [], [], [], [], false, [], [], 0, null !, null !));
+    });
+
+    it('should visit RefererenceAst', () => {
+      expectVisitedNode(
+          new class extends
+          NullVisitor{visitReference(ast: ReferenceAst, context: any): any{return ast;}},
+          new ReferenceAst('foo', null !, null !, null !));
+    });
+
+    it('should visit VariableAst', () => {
+      expectVisitedNode(
+          new class extends
+          NullVisitor{visitVariable(ast: VariableAst, context: any): any{return ast;}},
+          new VariableAst('foo', 'bar', null !));
+    });
+
+    it('should visit BoundEventAst', () => {
+      expectVisitedNode(
+          new class extends
+          NullVisitor{visitEvent(ast: BoundEventAst, context: any): any{return ast;}},
+          new BoundEventAst('foo', 'bar', 'goo', null !, null !));
+    });
+
+    it('should visit BoundElementPropertyAst', () => {
+      expectVisitedNode(
+          new class extends NullVisitor{
+            visitElementProperty(ast: BoundElementPropertyAst, context: any): any{return ast;}
+          },
+          new BoundElementPropertyAst('foo', null !, null !, null !, 'bar', null !));
+    });
+
+    it('should visit AttrAst', () => {
+      expectVisitedNode(
+          new class extends NullVisitor{visitAttr(ast: AttrAst, context: any): any{return ast;}},
+          new AttrAst('foo', 'bar', null !));
+    });
+
+    it('should visit BoundTextAst', () => {
+      expectVisitedNode(
+          new class extends
+          NullVisitor{visitBoundText(ast: BoundTextAst, context: any): any{return ast;}},
+          new BoundTextAst(null !, 0, null !));
+    });
+
+    it('should visit TextAst', () => {
+      expectVisitedNode(
+          new class extends NullVisitor{visitText(ast: TextAst, context: any): any{return ast;}},
+          new TextAst('foo', 0, null !));
+    });
+
+    it('should visit DirectiveAst', () => {
+      expectVisitedNode(
+          new class extends
+          NullVisitor{visitDirective(ast: DirectiveAst, context: any): any{return ast;}},
+          new DirectiveAst(null !, [], [], [], 0, null !));
+    });
+
+    it('should visit DirectiveAst', () => {
+      expectVisitedNode(
+          new class extends NullVisitor{
+            visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any{return ast;}
+          },
+          new BoundDirectivePropertyAst('foo', 'bar', null !, null !));
+    });
+
+    it('should skip the typed call of a visitor if visit() returns a truthy value', () => {
+      const visitor = new class extends ThrowingVisitor {
+        visit(ast: TemplateAst, context: any): any { return true; }
+      };
+      const nodes: TemplateAst[] = [
+        new NgContentAst(0, 0, null !),
+        new EmbeddedTemplateAst([], [], [], [], [], [], false, [], [], 0, null !),
+        new ElementAst('foo', [], [], [], [], [], [], false, [], [], 0, null !, null !),
+        new ReferenceAst('foo', null !, 'bar', null !), new VariableAst('foo', 'bar', null !),
+        new BoundEventAst('foo', 'bar', 'goo', null !, null !),
+        new BoundElementPropertyAst('foo', null !, null !, null !, 'bar', null !),
+        new AttrAst('foo', 'bar', null !), new BoundTextAst(null !, 0, null !),
+        new TextAst('foo', 0, null !), new DirectiveAst(null !, [], [], [], 0, null !),
+        new BoundDirectivePropertyAst('foo', 'bar', null !, null !)
+      ];
+      const result = templateVisitAll(visitor, nodes, null);
+      expect(result).toEqual(new Array(nodes.length).fill(true));
+    });
+  });
+
+  describe('TemplateParser Security', () => {
+    // Semi-integration test to make sure TemplateParser properly sets the security context.
+    // Uses the actual DomElementSchemaRegistry.
+    beforeEach(() => {
+      TestBed.configureCompiler({
+        providers: [
+          TEST_COMPILER_PROVIDERS,
+          {provide: ElementSchemaRegistry, useClass: DomElementSchemaRegistry, deps: []}
+        ]
+      });
+    });
+
+    configureCompiler();
+    commonBeforeEach();
+
+    describe('security context', () => {
+      function secContext(tpl: string): SecurityContext {
+        const ast = parse(tpl, []);
+        const propBinding = (<ElementAst>ast[0]).inputs[0];
+        return propBinding.securityContext;
+      }
+
+      it('should set for properties', () => {
+        expect(secContext('<div [title]="v">')).toBe(SecurityContext.NONE);
+        expect(secContext('<div [innerHTML]="v">')).toBe(SecurityContext.HTML);
+      });
+      it('should set for property value bindings',
+         () => { expect(secContext('<div innerHTML="{{v}}">')).toBe(SecurityContext.HTML); });
+      it('should set for attributes', () => {
+        expect(secContext('<a [attr.href]="v">')).toBe(SecurityContext.URL);
+        // NB: attributes below need to change case.
+        expect(secContext('<a [attr.innerHtml]="v">')).toBe(SecurityContext.HTML);
+        expect(secContext('<a [attr.formaction]="v">')).toBe(SecurityContext.URL);
+      });
+      it('should set for style', () => {
+        expect(secContext('<a [style.backgroundColor]="v">')).toBe(SecurityContext.STYLE);
+      });
+    });
+  });
+
+  describe('TemplateParser', () => {
+    beforeEach(() => {
+      TestBed.configureCompiler({providers: [TEST_COMPILER_PROVIDERS, MOCK_SCHEMA_REGISTRY]});
+    });
+
+    configureCompiler();
+    commonBeforeEach();
+
+    describe('parse', () => {
+      describe('nodes without bindings', () => {
+
+        it('should parse text nodes', () => {
+          expect(humanizeTplAst(parse('a', []))).toEqual([[TextAst, 'a']]);
+        });
+
+        it('should parse elements with attributes', () => {
+          expect(humanizeTplAst(parse('<div a=b>', [
+          ]))).toEqual([[ElementAst, 'div'], [AttrAst, 'a', 'b']]);
+        });
+      });
+
+      it('should parse ngContent', () => {
+        const parsed = parse('<ng-content select="a"></ng-content>', []);
+        expect(humanizeTplAst(parsed)).toEqual([[NgContentAst]]);
+      });
+
+      it('should parse ngContent when it contains WS only', () => {
+        const parsed = parse('<ng-content select="a">    \n   </ng-content>', []);
+        expect(humanizeTplAst(parsed)).toEqual([[NgContentAst]]);
+      });
+
+      it('should parse ngContent regardless the namespace', () => {
+        const parsed = parse('<svg><ng-content></ng-content></svg>', []);
+        expect(humanizeTplAst(parsed)).toEqual([
+          [ElementAst, ':svg:svg'],
+          [NgContentAst],
+        ]);
+      });
+
+      it('should parse bound text nodes', () => {
+        expect(humanizeTplAst(parse('{{a}}', []))).toEqual([[BoundTextAst, '{{ a }}']]);
+      });
+
+      it('should parse with custom interpolation config',
+         inject([TemplateParser], (parser: TemplateParser) => {
+           const component = CompileDirectiveMetadata.create({
+             selector: 'test',
+             type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Test'}}),
+             isComponent: true,
+             template: new CompileTemplateMetadata({
+               interpolation: ['{%', '%}'],
+               isInline: false,
+               animations: [],
+               template: null,
+               templateUrl: null,
+               htmlAst: null,
+               ngContentSelectors: [],
+               externalStylesheets: [],
+               styleUrls: [],
+               styles: [],
+               encapsulation: null,
+               preserveWhitespaces: preserveWhitespacesDefault(null),
+             }),
+             isHost: false,
+             exportAs: null,
+             changeDetection: null,
+             inputs: [],
+             outputs: [],
+             host: {},
+             providers: [],
+             viewProviders: [],
+             queries: [],
+             guards: {},
+             viewQueries: [],
+             entryComponents: [],
+             componentViewType: null,
+             rendererType: null,
+             componentFactory: null
+
+           });
+           expect(humanizeTplAst(
+                      parser.parse(component, '{%a%}', [], [], [], 'TestComp', true).template,
+                      {start: '{%', end: '%}'}))
+               .toEqual([[BoundTextAst, '{% a %}']]);
+         }));
+
+      describe('bound properties', () => {
+
+        it('should parse mixed case bound properties', () => {
+          expect(humanizeTplAst(parse('<div [someProp]="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null]
+          ]);
+        });
+
+        it('should parse dash case bound properties', () => {
+          expect(humanizeTplAst(parse('<div [some-prop]="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Property, 'some-prop', 'v', null]
+          ]);
+        });
+
+        it('should parse dotted name bound properties', () => {
+          expect(humanizeTplAst(parse('<div [dot.name]="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Property, 'dot.name', 'v', null]
+          ]);
+        });
+
+        it('should normalize property names via the element schema', () => {
+          expect(humanizeTplAst(parse('<div [mappedAttr]="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null]
+          ]);
+        });
+
+        it('should parse mixed case bound attributes', () => {
+          expect(humanizeTplAst(parse('<div [attr.someAttr]="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
+          ]);
+        });
+
+        it('should parse and dash case bound classes', () => {
+          expect(humanizeTplAst(parse('<div [class.some-class]="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null]
+          ]);
+        });
+
+        it('should parse mixed case bound classes', () => {
+          expect(humanizeTplAst(parse('<div [class.someClass]="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Class, 'someClass', 'v', null]
+          ]);
+        });
+
+        it('should parse mixed case bound styles', () => {
+          expect(humanizeTplAst(parse('<div [style.someStyle]="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
+          ]);
+        });
+
+        describe('errors', () => {
+          it('should throw error when binding to an unknown property', () => {
+            expect(() => parse('<my-component [invalidProp]="bar"></my-component>', []))
+                .toThrowError(`Template parse errors:
+Can't bind to 'invalidProp' since it isn't a known property of 'my-component'.
+1. If 'my-component' is an Angular component and it has 'invalidProp' input, then verify that it is part of this module.
+2. If 'my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
+3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<my-component [ERROR ->][invalidProp]="bar"></my-component>"): TestComp@0:14`);
+          });
+
+          it('should throw error when binding to an unknown property of ng-container', () => {
+            expect(() => parse('<ng-container [invalidProp]="bar"></ng-container>', []))
+                .toThrowError(
+                    `Template parse errors:
+Can't bind to 'invalidProp' since it isn't a known property of 'ng-container'.
+1. If 'invalidProp' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
+2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.` +
+                    ` ("<ng-container [ERROR ->][invalidProp]="bar"></ng-container>"): TestComp@0:14`);
+          });
+
+          it('should throw error when binding to an unknown element w/o bindings', () => {
+            expect(() => parse('<unknown></unknown>', [])).toThrowError(`Template parse errors:
+'unknown' is not a known element:
+1. If 'unknown' is an Angular component, then verify that it is part of this module.
+2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]<unknown></unknown>"): TestComp@0:0`);
+          });
+
+          it('should throw error when binding to an unknown custom element w/o bindings', () => {
+            expect(() => parse('<un-known></un-known>', [])).toThrowError(`Template parse errors:
+'un-known' is not a known element:
+1. If 'un-known' is an Angular component, then verify that it is part of this module.
+2. If 'un-known' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<un-known></un-known>"): TestComp@0:0`);
+          });
+
+          it('should throw error when binding to an invalid property', () => {
+            expect(() => parse('<my-component [onEvent]="bar"></my-component>', []))
+                .toThrowError(`Template parse errors:
+Binding to property 'onEvent' is disallowed for security reasons ("<my-component [ERROR ->][onEvent]="bar"></my-component>"): TestComp@0:14`);
+          });
+
+          it('should throw error when binding to an invalid attribute', () => {
+            expect(() => parse('<my-component [attr.onEvent]="bar"></my-component>', []))
+                .toThrowError(`Template parse errors:
+Binding to attribute 'onEvent' is disallowed for security reasons ("<my-component [ERROR ->][attr.onEvent]="bar"></my-component>"): TestComp@0:14`);
+          });
+        });
+
+        it('should parse bound properties via [...] and not report them as attributes', () => {
+          expect(humanizeTplAst(parse('<div [prop]="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
+          ]);
+        });
+
+        it('should parse bound properties via bind- and not report them as attributes', () => {
+          expect(humanizeTplAst(parse('<div bind-prop="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
+          ]);
+        });
+
+        it('should parse bound properties via {{...}} and not report them as attributes', () => {
+          expect(humanizeTplAst(parse('<div prop="{{v}}">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', '{{ v }}', null]
+          ]);
+        });
+
+        it('should parse bound properties via bind-animate- and not report them as attributes',
+           () => {
+             expect(humanizeTplAst(parse('<div bind-animate-someAnimation="value2">', [], [], [])))
+                 .toEqual([
+                   [ElementAst, 'div'],
+                   [
+                     BoundElementPropertyAst, PropertyBindingType.Animation, 'someAnimation',
+                     'value2', null
+                   ]
+                 ]);
+           });
+
+        it('should throw an error when parsing detects non-bound properties via @ that contain a value',
+           () => {
+             expect(() => { parse('<div @someAnimation="value2">', [], [], []); })
+                 .toThrowError(
+                     /Assigning animation triggers via @prop="exp" attributes with an expression is invalid. Use property bindings \(e.g. \[@prop\]="exp"\) or use an attribute without a value \(e.g. @prop\) instead. \("<div \[ERROR ->\]@someAnimation="value2">"\): TestComp@0:5/);
+           });
+
+        it('should not issue a warning when host attributes contain a valid property-bound animation trigger',
+           () => {
+             const animationEntries = ['prop'];
+             const dirA = compileDirectiveMetadataCreate({
+                            selector: 'div',
+                            template: compileTemplateMetadata({animations: animationEntries}),
+                            type: createTypeMeta({
+                              reference: {filePath: someModuleUrl, name: 'DirA'},
+                            }),
+                            host: {'[@prop]': 'expr'}
+                          }).toSummary();
+
+             humanizeTplAst(parse('<div></div>', [dirA]));
+             expect(console.warnings.length).toEqual(0);
+           });
+
+        it('should throw descriptive error when a host binding is not a string expression', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: 'broken',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         host: {'[class.foo]': null !}
+                       }).toSummary();
+
+          expect(() => { parse('<broken></broken>', [dirA]); })
+              .toThrowError(
+                  `Template parse errors:\nValue of the host property binding "class.foo" needs to be a string representing an expression but got "null" (object) ("[ERROR ->]<broken></broken>"): TestComp@0:0, Directive DirA`);
+        });
+
+        it('should throw descriptive error when a host event is not a string expression', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: 'broken',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         host: {'(click)': null !}
+                       }).toSummary();
+
+          expect(() => { parse('<broken></broken>', [dirA]); })
+              .toThrowError(
+                  `Template parse errors:\nValue of the host listener "click" needs to be a string representing an expression but got "null" (object) ("[ERROR ->]<broken></broken>"): TestComp@0:0, Directive DirA`);
+        });
+
+        it('should not issue a warning when an animation property is bound without an expression',
+           () => {
+             humanizeTplAst(parse('<div @someAnimation>', [], [], []));
+             expect(console.warnings.length).toEqual(0);
+           });
+
+        it('should parse bound properties via [@] and not report them as attributes', () => {
+          expect(humanizeTplAst(parse('<div [@someAnimation]="value2">', [], [], []))).toEqual([
+            [ElementAst, 'div'],
+            [
+              BoundElementPropertyAst, PropertyBindingType.Animation, 'someAnimation', 'value2',
+              null
+            ]
+          ]);
+        });
+
+        it('should support * directives', () => {
+          expect(humanizeTplAst(parse('<div *ngIf>', [ngIf]))).toEqual([
+            [EmbeddedTemplateAst],
+            [DirectiveAst, ngIf],
+            [BoundDirectivePropertyAst, 'ngIf', 'null'],
+            [ElementAst, 'div'],
+          ]);
+        });
+
+        it('should support <ng-template>', () => {
+          expect(humanizeTplAst(parse('<ng-template>', []))).toEqual([
+            [EmbeddedTemplateAst],
+          ]);
+        });
+
+        it('should treat <template> as a regular tag', () => {
+          expect(humanizeTplAst(parse('<template>', []))).toEqual([
+            [ElementAst, 'template'],
+          ]);
+        });
+
+        it('should not special case the template attribute', () => {
+          expect(humanizeTplAst(parse('<p template="ngFor">', []))).toEqual([
+            [ElementAst, 'p'],
+            [AttrAst, 'template', 'ngFor'],
+          ]);
+        });
+
+      });
+
+      describe('events', () => {
+
+        it('should parse bound events with a target', () => {
+          expect(humanizeTplAst(parse('<div (window:event)="v">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundEventAst, 'event', 'window', 'v'],
+          ]);
+        });
+
+        it('should report an error on empty expression', () => {
+          expect(() => parse('<div (event)="">', []))
+              .toThrowError(/Empty expressions are not allowed/);
+
+          expect(() => parse('<div (event)="  ">', []))
+              .toThrowError(/Empty expressions are not allowed/);
+        });
+
+        it('should parse bound events via (...) and not report them as attributes', () => {
+          expect(humanizeTplAst(parse('<div (event)="v">', [
+          ]))).toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
+        });
+
+        it('should parse event names case sensitive', () => {
+          expect(humanizeTplAst(parse('<div (some-event)="v">', [
+          ]))).toEqual([[ElementAst, 'div'], [BoundEventAst, 'some-event', null, 'v']]);
+          expect(humanizeTplAst(parse('<div (someEvent)="v">', [
+          ]))).toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]);
+        });
+
+        it('should parse bound events via on- and not report them as attributes', () => {
+          expect(humanizeTplAst(parse('<div on-event="v">', [
+          ]))).toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
+        });
+
+        it('should allow events on explicit embedded templates that are emitted by a directive',
+           () => {
+             const dirA =
+                 compileDirectiveMetadataCreate({
+                   selector: 'ng-template',
+                   outputs: ['e'],
+                   type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}})
+                 }).toSummary();
+
+             expect(humanizeTplAst(parse('<ng-template (e)="f"></ng-template>', [dirA]))).toEqual([
+               [EmbeddedTemplateAst],
+               [BoundEventAst, 'e', null, 'f'],
+               [DirectiveAst, dirA],
+             ]);
+           });
+      });
+
+      describe('bindon', () => {
+        it('should parse bound events and properties via [(...)] and not report them as attributes',
+           () => {
+             expect(humanizeTplAst(parse('<div [(prop)]="v">', []))).toEqual([
+               [ElementAst, 'div'],
+               [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
+               [BoundEventAst, 'propChange', null, 'v = $event']
+             ]);
+           });
+
+        it('should parse bound events and properties via bindon- and not report them as attributes',
+           () => {
+             expect(humanizeTplAst(parse('<div bindon-prop="v">', []))).toEqual([
+               [ElementAst, 'div'],
+               [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
+               [BoundEventAst, 'propChange', null, 'v = $event']
+             ]);
+           });
+
+      });
+
+      describe('directives', () => {
+        it('should order directives by the directives array in the View and match them only once',
+           () => {
+             const dirA =
+                 compileDirectiveMetadataCreate({
+                   selector: '[a]',
+                   type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}})
+                 }).toSummary();
+             const dirB =
+                 compileDirectiveMetadataCreate({
+                   selector: '[b]',
+                   type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirB'}})
+                 }).toSummary();
+             const dirC =
+                 compileDirectiveMetadataCreate({
+                   selector: '[c]',
+                   type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirC'}})
+                 }).toSummary();
+             expect(humanizeTplAst(parse('<div a c b a b>', [dirA, dirB, dirC]))).toEqual([
+               [ElementAst, 'div'], [AttrAst, 'a', ''], [AttrAst, 'c', ''], [AttrAst, 'b', ''],
+               [AttrAst, 'a', ''], [AttrAst, 'b', ''], [DirectiveAst, dirA], [DirectiveAst, dirB],
+               [DirectiveAst, dirC]
+             ]);
+           });
+
+        it('should parse directive dotted properties', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: '[dot.name]',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         inputs: ['localName: dot.name'],
+                       }).toSummary();
+
+          expect(humanizeTplAst(parse('<div [dot.name]="expr"></div>', [dirA]))).toEqual([
+            [ElementAst, 'div'],
+            [DirectiveAst, dirA],
+            [BoundDirectivePropertyAst, 'localName', 'expr'],
+          ]);
+        });
+
+        it('should locate directives in property bindings', () => {
+          const dirA =
+              compileDirectiveMetadataCreate({
+                selector: '[a=b]',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}})
+              }).toSummary();
+          const dirB =
+              compileDirectiveMetadataCreate({
+                selector: '[b]',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirB'}})
+              }).toSummary();
+          expect(humanizeTplAst(parse('<div [a]="b">', [dirA, dirB]))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'b', null],
+            [DirectiveAst, dirA]
+          ]);
+        });
+
+        it('should locate directives in inline templates', () => {
+          const dirTemplate =
+              compileDirectiveMetadataCreate({
+                selector: 'ng-template',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'onTemplate'}})
+              }).toSummary();
+          expect(humanizeTplAst(parse('<div *ngIf="cond">', [ngIf, dirTemplate]))).toEqual([
+            [EmbeddedTemplateAst],
+            [DirectiveAst, ngIf],
+            [BoundDirectivePropertyAst, 'ngIf', 'cond'],
+            [DirectiveAst, dirTemplate],
+            [ElementAst, 'div'],
+          ]);
+        });
+
+        it('should locate directives in event bindings', () => {
+          const dirA =
+              compileDirectiveMetadataCreate({
+                selector: '[a]',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirB'}})
+              }).toSummary();
+
+          expect(humanizeTplAst(parse('<div (a)="b">', [dirA]))).toEqual([
+            [ElementAst, 'div'], [BoundEventAst, 'a', null, 'b'], [DirectiveAst, dirA]
+          ]);
+        });
+
+        it('should parse directive host properties', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: 'div',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         host: {'[a]': 'expr'}
+                       }).toSummary();
+          expect(humanizeTplAst(parse('<div></div>', [dirA]))).toEqual([
+            [ElementAst, 'div'], [DirectiveAst, dirA],
+            [BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'expr', null]
+          ]);
+        });
+
+        it('should parse directive host listeners', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: 'div',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         host: {'(a)': 'expr'}
+                       }).toSummary();
+          expect(humanizeTplAst(parse('<div></div>', [dirA]))).toEqual([
+            [ElementAst, 'div'], [DirectiveAst, dirA], [BoundEventAst, 'a', null, 'expr']
+          ]);
+        });
+
+        it('should parse directive properties', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: 'div',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         inputs: ['aProp']
+                       }).toSummary();
+          expect(humanizeTplAst(parse('<div [aProp]="expr"></div>', [dirA]))).toEqual([
+            [ElementAst, 'div'], [DirectiveAst, dirA],
+            [BoundDirectivePropertyAst, 'aProp', 'expr']
+          ]);
+        });
+
+        it('should parse renamed directive properties', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: 'div',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         inputs: ['b:a']
+                       }).toSummary();
+          expect(humanizeTplAst(parse('<div [a]="expr"></div>', [dirA]))).toEqual([
+            [ElementAst, 'div'], [DirectiveAst, dirA], [BoundDirectivePropertyAst, 'b', 'expr']
+          ]);
+        });
+
+        it('should parse literal directive properties', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: 'div',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         inputs: ['a']
+                       }).toSummary();
+          expect(humanizeTplAst(parse('<div a="literal"></div>', [dirA]))).toEqual([
+            [ElementAst, 'div'], [AttrAst, 'a', 'literal'], [DirectiveAst, dirA],
+            [BoundDirectivePropertyAst, 'a', '"literal"']
+          ]);
+        });
+
+        it('should favor explicit bound properties over literal properties', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: 'div',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         inputs: ['a']
+                       }).toSummary();
+          expect(humanizeTplAst(parse('<div a="literal" [a]="\'literal2\'"></div>', [dirA])))
+              .toEqual([
+                [ElementAst, 'div'], [AttrAst, 'a', 'literal'], [DirectiveAst, dirA],
+                [BoundDirectivePropertyAst, 'a', '"literal2"']
+              ]);
+        });
+
+        it('should support optional directive properties', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: 'div',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         inputs: ['a']
+                       }).toSummary();
+          expect(humanizeTplAst(parse('<div></div>', [dirA]))).toEqual([
+            [ElementAst, 'div'], [DirectiveAst, dirA]
+          ]);
+        });
+
+      });
+
+      describe('providers', () => {
+        let nextProviderId: number;
+
+        function createToken(value: string): CompileTokenMetadata {
+          let token: CompileTokenMetadata;
+          if (value.startsWith('type:')) {
+            const name = value.substring(5);
+            token = {identifier: createTypeMeta({reference: <any>name})};
+          } else {
+            token = {value: value};
+          }
+          return token;
+        }
+
+        function createDep(value: string): CompileDiDependencyMetadata {
+          let isOptional = false;
+          if (value.startsWith('optional:')) {
+            isOptional = true;
+            value = value.substring(9);
+          }
+          let isSelf = false;
+          if (value.startsWith('self:')) {
+            isSelf = true;
+            value = value.substring(5);
+          }
+          let isHost = false;
+          if (value.startsWith('host:')) {
+            isHost = true;
+            value = value.substring(5);
+          }
+          return {
+            token: createToken(value),
+            isOptional: isOptional,
+            isSelf: isSelf,
+            isHost: isHost
+          };
+        }
+
+        function createProvider(
+            token: string, {multi = false, deps = []}: {multi?: boolean, deps?: string[]} = {}):
+            CompileProviderMetadata {
+          const compileToken = createToken(token);
+          return {
+            token: compileToken,
+            multi: multi,
+            useClass: createTypeMeta({reference: tokenReference(compileToken)}),
+            deps: deps.map(createDep),
+            useExisting: undefined,
+            useFactory: undefined,
+            useValue: undefined
+          };
+        }
+
+        function createDir(
+            selector: string, {providers = null, viewProviders = null, deps = [], queries = []}: {
+              providers?: CompileProviderMetadata[],
+              viewProviders?: CompileProviderMetadata[],
+              deps?: string[],
+              queries?: string[]
+            } = {}): CompileDirectiveSummary {
+          const isComponent = !selector.startsWith('[');
+          return compileDirectiveMetadataCreate({
+                   selector: selector,
+                   type: createTypeMeta({
+                     reference: <any>selector,
+                     diDeps: deps.map(createDep),
+                   }),
+                   isComponent: isComponent,
+                   template: compileTemplateMetadata({ngContentSelectors: []}),
+                   providers: providers,
+                   viewProviders: viewProviders,
+                   queries: queries.map((value) => {
+                     return {
+                       selectors: [createToken(value)],
+                       descendants: false,
+                       first: false,
+                       propertyName: 'test',
+                       read: undefined !
+                     };
+                   })
+                 })
+              .toSummary();
+        }
+
+        beforeEach(() => { nextProviderId = 0; });
+
+        it('should provide a component', () => {
+          const comp = createDir('my-comp');
+          const elAst: ElementAst = <ElementAst>parse('<my-comp>', [comp])[0];
+          expect(elAst.providers.length).toBe(1);
+          expect(elAst.providers[0].providerType).toBe(ProviderAstType.Component);
+          expect(elAst.providers[0].providers[0].useClass).toBe(comp.type);
+        });
+
+        it('should provide a directive', () => {
+          const dirA = createDir('[dirA]');
+          const elAst: ElementAst = <ElementAst>parse('<div dirA>', [dirA])[0];
+          expect(elAst.providers.length).toBe(1);
+          expect(elAst.providers[0].providerType).toBe(ProviderAstType.Directive);
+          expect(elAst.providers[0].providers[0].useClass).toBe(dirA.type);
+        });
+
+        it('should use the public providers of a directive', () => {
+          const provider = createProvider('service');
+          const dirA = createDir('[dirA]', {providers: [provider]});
+          const elAst: ElementAst = <ElementAst>parse('<div dirA>', [dirA])[0];
+          expect(elAst.providers.length).toBe(2);
+          expect(elAst.providers[0].providerType).toBe(ProviderAstType.PublicService);
+          expect(elAst.providers[0].providers).toEqual([provider]);
+        });
+
+        it('should use the private providers of a component', () => {
+          const provider = createProvider('service');
+          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[0].providerType).toBe(ProviderAstType.PrivateService);
+          expect(elAst.providers[0].providers).toEqual([provider]);
+        });
+
+        it('should support multi providers', () => {
+          const provider0 = createProvider('service0', {multi: true});
+          const provider1 = createProvider('service1', {multi: true});
+          const provider2 = createProvider('service0', {multi: true});
+          const dirA = createDir('[dirA]', {providers: [provider0, provider1]});
+          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[0].providers).toEqual([provider0, provider2]);
+          expect(elAst.providers[1].providers).toEqual([provider1]);
+        });
+
+        it('should overwrite non multi providers', () => {
+          const provider1 = createProvider('service0');
+          const provider2 = createProvider('service1');
+          const provider3 = createProvider('service0');
+          const dirA = createDir('[dirA]', {providers: [provider1, provider2]});
+          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[0].providers).toEqual([provider3]);
+          expect(elAst.providers[1].providers).toEqual([provider2]);
+        });
+
+        it('should overwrite component providers by directive providers', () => {
+          const compProvider = createProvider('service0');
+          const dirProvider = createProvider('service0');
+          const comp = createDir('my-comp', {providers: [compProvider]});
+          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[0].providers).toEqual([dirProvider]);
+        });
+
+        it('should overwrite view providers by directive providers', () => {
+          const viewProvider = createProvider('service0');
+          const dirProvider = createProvider('service0');
+          const comp = createDir('my-comp', {viewProviders: [viewProvider]});
+          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[0].providers).toEqual([dirProvider]);
+        });
+
+        it('should overwrite directives by providers', () => {
+          const dirProvider = createProvider('type:my-comp');
+          const comp = createDir('my-comp', {providers: [dirProvider]});
+          const elAst: ElementAst = <ElementAst>parse('<my-comp>', [comp])[0];
+          expect(elAst.providers.length).toBe(1);
+          expect(elAst.providers[0].providers).toEqual([dirProvider]);
+        });
+
+        it('if mixing multi and non multi providers', () => {
+          const provider0 = createProvider('service0');
+          const provider1 = createProvider('service0', {multi: true});
+          const dirA = createDir('[dirA]', {providers: [provider0]});
+          const dirB = createDir('[dirB]', {providers: [provider1]});
+          expect(() => parse('<div dirA dirB>', [dirA, dirB]))
+              .toThrowError(
+                  `Template parse errors:\n` +
+                  `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, 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[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', () => {
+          const dir0 = createDir('[dir0]', {deps: ['type:my-comp']});
+          const dir1 = createDir('[dir1]', {deps: ['type:[dir0]']});
+          const dir2 = createDir('[dir2]', {deps: ['type:[dir1]']});
+          const comp = createDir('my-comp');
+          const elAst: ElementAst =
+              <ElementAst>parse('<my-comp dir2 dir0 dir1>', [comp, dir2, dir0, dir1])[0];
+          expect(elAst.providers.length).toBe(4);
+          expect(elAst.directives[0].directive).toBe(comp);
+          expect(elAst.directives[1].directive).toBe(dir0);
+          expect(elAst.directives[2].directive).toBe(dir1);
+          expect(elAst.directives[3].directive).toBe(dir2);
+        });
+
+        it('should mark directives and dependencies of directives as eager', () => {
+          const provider0 = createProvider('service0');
+          const provider1 = createProvider('service1');
+          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[1].providers).toEqual([provider0]);
+          expect(elAst.providers[1].eager).toBe(true);
+          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', () => {
+          const provider0 = createProvider('service0');
+          const provider1 = createProvider('service1');
+          const dirA = createDir('[dirA]', {providers: [provider0, provider1]});
+          const dirB = createDir('[dirB]', {deps: ['service0']});
+          const elAst: ElementAst =
+              <ElementAst>parse('<div dirA><div dirB></div></div>', [dirA, dirB])[0];
+          expect(elAst.providers.length).toBe(3);
+          expect(elAst.providers[1].providers[0].useClass).toEqual(dirA.type);
+          expect(elAst.providers[1].eager).toBe(true);
+          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', () => {
+          const provider0 = createProvider('service0');
+          const provider1 = createProvider('service1');
+          const dirA =
+              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[1].providers[0].useClass).toEqual(dirA.type);
+          expect(elAst.providers[1].eager).toBe(true);
+          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', () => {
+          const provider0 = createProvider('service0');
+          const dirA = createDir('[dirA]', {providers: [provider0]});
+          const dirB = createDir('[dirB]', {deps: ['service0']});
+          const elAst: ElementAst =
+              <ElementAst>parse('<div dirA><div *ngIf dirB></div></div>', [dirA, dirB])[0];
+          expect(elAst.providers.length).toBe(2);
+          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', () => {
+          const dirA = createDir('[dirA]', {deps: ['self:provider0']});
+          expect(() => parse('<div dirA></div>', [dirA]))
+              .toThrowError(
+                  'Template parse errors:\nNo provider for provider0 ("[ERROR ->]<div dirA></div>"): TestComp@0:0');
+        });
+
+        it('should change missing @Self() that are optional to nulls', () => {
+          const dirA = createDir('[dirA]', {deps: ['optional:self:provider0']});
+          const elAst: ElementAst = <ElementAst>parse('<div dirA></div>', [dirA])[0];
+          expect(elAst.providers[0].providers[0].deps ![0].isValue).toBe(true);
+          expect(elAst.providers[0].providers[0].deps ![0].value).toBe(null);
+        });
+
+        it('should report missing @Host() deps as errors', () => {
+          const dirA = createDir('[dirA]', {deps: ['host:provider0']});
+          expect(() => parse('<div dirA></div>', [dirA]))
+              .toThrowError(
+                  'Template parse errors:\nNo provider for provider0 ("[ERROR ->]<div dirA></div>"): TestComp@0:0');
+        });
+
+        it('should change missing @Host() that are optional to nulls', () => {
+          const dirA = createDir('[dirA]', {deps: ['optional:host:provider0']});
+          const elAst: ElementAst = <ElementAst>parse('<div dirA></div>', [dirA])[0];
+          expect(elAst.providers[0].providers[0].deps ![0].isValue).toBe(true);
+          expect(elAst.providers[0].providers[0].deps ![0].value).toBe(null);
+        });
+      });
+
+      describe('references', () => {
+
+        it('should parse references via #... and not report them as attributes', () => {
+          expect(humanizeTplAst(parse('<div #a>', [
+          ]))).toEqual([[ElementAst, 'div'], [ReferenceAst, 'a', null]]);
+        });
+
+        it('should parse references via ref-... and not report them as attributes', () => {
+          expect(humanizeTplAst(parse('<div ref-a>', [
+          ]))).toEqual([[ElementAst, 'div'], [ReferenceAst, 'a', null]]);
+        });
+
+        it('should parse camel case references', () => {
+          expect(humanizeTplAst(parse('<div ref-someA>', [
+          ]))).toEqual([[ElementAst, 'div'], [ReferenceAst, 'someA', null]]);
+        });
+
+        it('should assign references with empty value to the element', () => {
+          expect(humanizeTplAst(parse('<div #a></div>', [
+          ]))).toEqual([[ElementAst, 'div'], [ReferenceAst, 'a', null]]);
+        });
+
+        it('should assign references to directives via exportAs', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: '[a]',
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         exportAs: 'dirA'
+                       }).toSummary();
+          expect(humanizeTplAst(parse('<div a #a="dirA"></div>', [dirA]))).toEqual([
+            [ElementAst, 'div'],
+            [AttrAst, 'a', ''],
+            [ReferenceAst, 'a', createTokenForReference(dirA.type.reference)],
+            [DirectiveAst, dirA],
+          ]);
+        });
+
+        it('should assign references to directives via exportAs with multiple names', () => {
+          const pizzaTestDirective =
+              compileDirectiveMetadataCreate({
+                selector: 'pizza-test',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Pizza'}}),
+                exportAs: 'pizza, cheeseSauceBread'
+              }).toSummary();
+
+          const template = '<pizza-test #food="pizza" #yum="cheeseSauceBread"></pizza-test>';
+
+          expect(humanizeTplAst(parse(template, [pizzaTestDirective]))).toEqual([
+            [ElementAst, 'pizza-test'],
+            [ReferenceAst, 'food', createTokenForReference(pizzaTestDirective.type.reference)],
+            [ReferenceAst, 'yum', createTokenForReference(pizzaTestDirective.type.reference)],
+            [DirectiveAst, pizzaTestDirective],
+          ]);
+        });
+
+        it('should report references with values that don\'t match a directive as errors', () => {
+          expect(() => parse('<div #a="dirA"></div>', [])).toThrowError(`Template parse errors:
+There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"></div>"): TestComp@0:5`);
+        });
+
+        it('should report invalid reference names', () => {
+          expect(() => parse('<div #a-b></div>', [])).toThrowError(`Template parse errors:
+"-" is not allowed in reference names ("<div [ERROR ->]#a-b></div>"): TestComp@0:5`);
+        });
+
+        it('should report variables as errors', () => {
+          expect(() => parse('<div let-a></div>', [])).toThrowError(`Template parse errors:
+"let-" is only supported on ng-template elements. ("<div [ERROR ->]let-a></div>"): TestComp@0:5`);
+        });
+
+        it('should report duplicate reference names', () => {
+          expect(() => parse('<div #a></div><div #a></div>', []))
+              .toThrowError(`Template parse errors:
+Reference "#a" is defined several times ("<div #a></div><div [ERROR ->]#a></div>"): TestComp@0:19`);
+
+        });
+
+        it('should report duplicate reference names when using multiple exportAs names', () => {
+          const pizzaDirective =
+              compileDirectiveMetadataCreate({
+                selector: '[dessert-pizza]',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Pizza'}}),
+                exportAs: 'dessertPizza, chocolate'
+              }).toSummary();
+
+          const chocolateDirective =
+              compileDirectiveMetadataCreate({
+                selector: '[chocolate]',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Chocolate'}}),
+                exportAs: 'chocolate'
+              }).toSummary();
+
+          const template = '<div dessert-pizza chocolate #snack="chocolate"></div>';
+          const compileTemplate = () => parse(template, [pizzaDirective, chocolateDirective]);
+          const duplicateReferenceError = 'Template parse errors:\n' +
+              'Reference "#snack" is defined several times ' +
+              '("<div dessert-pizza chocolate [ERROR ->]#snack="chocolate"></div>")' +
+              ': TestComp@0:29';
+
+          expect(compileTemplate).toThrowError(duplicateReferenceError);
+        });
+
+        it('should not throw error when there is same reference name in different templates',
+           () => {
+             expect(() => parse('<div #a><ng-template #a><span>OK</span></ng-template></div>', []))
+                 .not.toThrowError();
+           });
+
+        it('should assign references with empty value to components', () => {
+          const dirA = compileDirectiveMetadataCreate({
+                         selector: '[a]',
+                         isComponent: true,
+                         type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                         exportAs: 'dirA',
+                         template: compileTemplateMetadata({ngContentSelectors: []})
+                       }).toSummary();
+          expect(humanizeTplAst(parse('<div a #a></div>', [dirA]))).toEqual([
+            [ElementAst, 'div'],
+            [AttrAst, 'a', ''],
+            [ReferenceAst, 'a', createTokenForReference(dirA.type.reference)],
+            [DirectiveAst, dirA],
+          ]);
+        });
+
+        it('should not locate directives in references', () => {
+          const dirA =
+              compileDirectiveMetadataCreate({
+                selector: '[a]',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}})
+              }).toSummary();
+          expect(humanizeTplAst(parse('<div ref-a>', [dirA]))).toEqual([
+            [ElementAst, 'div'], [ReferenceAst, 'a', null]
+          ]);
+        });
+      });
+
+      describe('explicit templates', () => {
+        let reflector: JitReflector;
+
+        beforeEach(() => { reflector = new JitReflector(); });
+
+        it('should create embedded templates for <ng-template> elements', () => {
+          expect(humanizeTplAst(parse('<ng-template></ng-template>', [
+          ]))).toEqual([[EmbeddedTemplateAst]]);
+        });
+
+        it('should create embedded templates for <ng-template> elements regardless the namespace',
+           () => {
+             expect(humanizeTplAst(parse('<svg><ng-template></ng-template></svg>', []))).toEqual([
+               [ElementAst, ':svg:svg'],
+               [EmbeddedTemplateAst],
+             ]);
+           });
+
+        it('should support references via #...', () => {
+          expect(humanizeTplAst(parse('<ng-template #a>', []))).toEqual([
+            [EmbeddedTemplateAst],
+            [
+              ReferenceAst, 'a', createTokenForExternalReference(reflector, Identifiers.TemplateRef)
+            ],
+          ]);
+        });
+
+        it('should support references via ref-...', () => {
+          expect(humanizeTplAst(parse('<ng-template ref-a>', []))).toEqual([
+            [EmbeddedTemplateAst],
+            [
+              ReferenceAst, 'a', createTokenForExternalReference(reflector, Identifiers.TemplateRef)
+            ]
+          ]);
+        });
+
+        it('should parse variables via let-...', () => {
+          expect(humanizeTplAst(parse('<ng-template let-a="b">', []))).toEqual([
+            [EmbeddedTemplateAst],
+            [VariableAst, 'a', 'b'],
+          ]);
+        });
+
+        it('should not locate directives in variables', () => {
+          const dirA =
+              compileDirectiveMetadataCreate({
+                selector: '[a]',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}})
+              }).toSummary();
+          expect(humanizeTplAst(parse('<ng-template let-a="b"></ng-template>', [dirA]))).toEqual([
+            [EmbeddedTemplateAst],
+            [VariableAst, 'a', 'b'],
+          ]);
+        });
+
+      });
+
+      describe('inline templates', () => {
+        it('should report an error on variables declared with #', () => {
+          expect(() => humanizeTplAst(parse('<div *ngIf="#a=b">', [])))
+              .toThrowError(/Parser Error: Unexpected token # at column 1/);
+        });
+
+        it('should parse variables via let ...', () => {
+          const targetAst = [
+            [EmbeddedTemplateAst],
+            [VariableAst, 'a', 'b'],
+            [ElementAst, 'div'],
+          ];
+
+          expect(humanizeTplAst(parse('<div *ngIf="let a=b">', []))).toEqual(targetAst);
+
+          expect(humanizeTplAst(parse('<div data-*ngIf="let a=b">', []))).toEqual(targetAst);
+        });
+
+        it('should parse variables via as ...', () => {
+          const targetAst = [
+            [EmbeddedTemplateAst],
+            [VariableAst, 'local', 'ngIf'],
+            [DirectiveAst, ngIf],
+            [BoundDirectivePropertyAst, 'ngIf', 'expr'],
+            [ElementAst, 'div'],
+          ];
+
+          expect(humanizeTplAst(parse('<div *ngIf="expr as local">', [ngIf]))).toEqual(targetAst);
+        });
+
+        describe('directives', () => {
+          it('should locate directives in property bindings', () => {
+            const dirA =
+                compileDirectiveMetadataCreate({
+                  selector: '[a=b]',
+                  type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                  inputs: ['a']
+                }).toSummary();
+            const dirB =
+                compileDirectiveMetadataCreate({
+                  selector: '[b]',
+                  type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirB'}})
+                }).toSummary();
+            expect(humanizeTplAst(parse('<div *a="b" b>', [dirA, dirB]))).toEqual([
+              [EmbeddedTemplateAst], [DirectiveAst, dirA], [BoundDirectivePropertyAst, 'a', 'b'],
+              [ElementAst, 'div'], [AttrAst, 'b', ''], [DirectiveAst, dirB]
+            ]);
+          });
+
+          it('should not locate directives in variables', () => {
+            const dirA =
+                compileDirectiveMetadataCreate({
+                  selector: '[a]',
+                  type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}})
+                }).toSummary();
+            expect(
+                humanizeTplAst(parse('<ng-template let-a="b"><div></div></ng-template>', [dirA])))
+                .toEqual([
+                  [EmbeddedTemplateAst],
+                  [VariableAst, 'a', 'b'],
+                  [ElementAst, 'div'],
+                ]);
+          });
+
+          it('should not locate directives in references', () => {
+            const dirA =
+                compileDirectiveMetadataCreate({
+                  selector: '[a]',
+                  type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}})
+                }).toSummary();
+            expect(humanizeTplAst(parse('<div ref-a>', [dirA]))).toEqual([
+              [ElementAst, 'div'], [ReferenceAst, 'a', null]
+            ]);
+          });
+
+        });
+
+
+        it('should work with *... and use the attribute name as property binding name', () => {
+          expect(humanizeTplAst(parse('<div *ngIf="test">', [ngIf]))).toEqual([
+            [EmbeddedTemplateAst],
+            [DirectiveAst, ngIf],
+            [BoundDirectivePropertyAst, 'ngIf', 'test'],
+            [ElementAst, 'div'],
+
+          ]);
+
+          // https://github.com/angular/angular/issues/13800
+          expect(humanizeTplAst(parse('<div *ngIf="-1">', [ngIf]))).toEqual([
+            [EmbeddedTemplateAst],
+            [DirectiveAst, ngIf],
+            [BoundDirectivePropertyAst, 'ngIf', '0 - 1'],
+            [ElementAst, 'div'],
+          ]);
+        });
+
+        it('should work with *... and empty value', () => {
+          expect(humanizeTplAst(parse('<div *ngIf>', [ngIf]))).toEqual([
+            [EmbeddedTemplateAst],
+            [DirectiveAst, ngIf],
+            [BoundDirectivePropertyAst, 'ngIf', 'null'],
+            [ElementAst, 'div'],
+          ]);
+        });
+      });
+    });
+
+    describe('content projection', () => {
+      let compCounter: number;
+      beforeEach(() => { compCounter = 0; });
+
+      function createComp(selector: string, ngContentSelectors: string[]): CompileDirectiveSummary {
+        return compileDirectiveMetadataCreate({
+                 selector: selector,
+                 isComponent: true,
+                 type: createTypeMeta(
+                     {reference: {filePath: someModuleUrl, name: `SomeComp${compCounter++}`}}),
+                 template: compileTemplateMetadata({ngContentSelectors: ngContentSelectors})
+               })
+            .toSummary();
+      }
+
+      function createDir(selector: string): CompileDirectiveSummary {
+        return compileDirectiveMetadataCreate({
+                 selector: selector,
+                 type: createTypeMeta(
+                     {reference: {filePath: someModuleUrl, name: `SomeDir${compCounter++}`}})
+               })
+            .toSummary();
+      }
+
+      describe('project text nodes', () => {
+        it('should project text nodes with wildcard selector', () => {
+          expect(humanizeContentProjection(parse('<div>hello</div>', [createComp('div', ['*'])])))
+              .toEqual([
+                ['div', null],
+                ['#text(hello)', 0],
+              ]);
+        });
+      });
+
+      describe('project elements', () => {
+        it('should project elements with wildcard selector', () => {
+          expect(humanizeContentProjection(parse('<div><span></span></div>', [
+            createComp('div', ['*'])
+          ]))).toEqual([['div', null], ['span', 0]]);
+        });
+
+        it('should project elements with css selector', () => {
+          expect(humanizeContentProjection(
+                     parse('<div><a x></a><b></b></div>', [createComp('div', ['a[x]'])])))
+              .toEqual([
+                ['div', null],
+                ['a', 0],
+                ['b', null],
+              ]);
+        });
+      });
+
+      describe('embedded templates', () => {
+        it('should project embedded templates with wildcard selector', () => {
+          expect(humanizeContentProjection(
+                     parse('<div><ng-template></ng-template></div>', [createComp('div', ['*'])])))
+              .toEqual([
+                ['div', null],
+                ['template', 0],
+              ]);
+        });
+
+        it('should project embedded templates with css selector', () => {
+          expect(humanizeContentProjection(parse(
+                     '<div><ng-template x></ng-template><ng-template></ng-template></div>',
+                     [createComp('div', ['ng-template[x]'])])))
+              .toEqual([
+                ['div', null],
+                ['template', 0],
+                ['template', null],
+              ]);
+        });
+      });
+
+      describe('ng-content', () => {
+        it('should project ng-content with wildcard selector', () => {
+          expect(humanizeContentProjection(parse('<div><ng-content></ng-content></div>', [
+            createComp('div', ['*'])
+          ]))).toEqual([['div', null], ['ng-content', 0]]);
+        });
+
+        it('should project ng-content with css selector', () => {
+          expect(humanizeContentProjection(parse(
+                     '<div><ng-content x></ng-content><ng-content></ng-content></div>',
+                     [createComp('div', ['ng-content[x]'])])))
+              .toEqual([['div', null], ['ng-content', 0], ['ng-content', null]]);
+        });
+      });
+
+      it('should project into the first matching ng-content', () => {
+        expect(humanizeContentProjection(parse('<div>hello<b></b><a></a></div>', [
+          createComp('div', ['a', 'b', '*'])
+        ]))).toEqual([['div', null], ['#text(hello)', 2], ['b', 1], ['a', 0]]);
+      });
+
+      it('should project into wildcard ng-content last', () => {
+        expect(humanizeContentProjection(parse('<div>hello<a></a></div>', [
+          createComp('div', ['*', 'a'])
+        ]))).toEqual([['div', null], ['#text(hello)', 0], ['a', 1]]);
+      });
+
+      it('should only project direct child nodes', () => {
+        expect(humanizeContentProjection(parse('<div><span><a></a></span><a></a></div>', [
+          createComp('div', ['a'])
+        ]))).toEqual([['div', null], ['span', null], ['a', null], ['a', 0]]);
+      });
+
+      it('should project nodes of nested components', () => {
+        expect(humanizeContentProjection(parse('<a><b>hello</b></a>', [
+          createComp('a', ['*']), createComp('b', ['*'])
+        ]))).toEqual([['a', null], ['b', 0], ['#text(hello)', 0]]);
+      });
+
+      it('should project children of components with ngNonBindable', () => {
+        expect(humanizeContentProjection(parse('<div ngNonBindable>{{hello}}<span></span></div>', [
+          createComp('div', ['*'])
+        ]))).toEqual([['div', null], ['#text({{hello}})', 0], ['span', 0]]);
+      });
+
+      it('should match the element when there is an inline template', () => {
+        expect(humanizeContentProjection(parse('<div><b *ngIf="cond"></b></div>', [
+          createComp('div', ['a', 'b']), ngIf
+        ]))).toEqual([['div', null], ['template', 1], ['b', null]]);
+      });
+
+      describe('ngProjectAs', () => {
+        it('should override elements', () => {
+          expect(humanizeContentProjection(parse('<div><a ngProjectAs="b"></a></div>', [
+            createComp('div', ['a', 'b'])
+          ]))).toEqual([['div', null], ['a', 1]]);
+        });
+
+        it('should override <ng-content>', () => {
+          expect(humanizeContentProjection(parse(
+                     '<div><ng-content ngProjectAs="b"></ng-content></div>',
+                     [createComp('div', ['ng-content', 'b'])])))
+              .toEqual([['div', null], ['ng-content', 1]]);
+        });
+
+        it('should override <ng-template>', () => {
+          expect(humanizeContentProjection(parse(
+                     '<div><ng-template ngProjectAs="b"></ng-template></div>',
+                     [createComp('div', ['template', 'b'])])))
+              .toEqual([
+                ['div', null],
+                ['template', 1],
+              ]);
+        });
+
+        it('should override inline templates', () => {
+          expect(humanizeContentProjection(parse(
+                     '<div><a *ngIf="cond" ngProjectAs="b"></a></div>',
+                     [createComp('div', ['a', 'b']), ngIf])))
+              .toEqual([
+                ['div', null],
+                ['template', 1],
+                ['a', null],
+              ]);
+        });
+      });
+
+      it('should support other directives before the component', () => {
+        expect(humanizeContentProjection(parse('<div>hello</div>', [
+          createDir('div'), createComp('div', ['*'])
+        ]))).toEqual([['div', null], ['#text(hello)', 0]]);
+      });
+    });
+
+    describe('splitClasses', () => {
+      it('should keep an empty class', () => { expect(splitClasses('a')).toEqual(['a']); });
+
+      it('should split 2 classes', () => { expect(splitClasses('a b')).toEqual(['a', 'b']); });
+
+      it('should trim classes', () => { expect(splitClasses(' a  b ')).toEqual(['a', 'b']); });
+    });
+
+    describe('error cases', () => {
+      it('should report when ng-content has non WS content', () => {
+        expect(() => parse('<ng-content>content</ng-content>', []))
+            .toThrowError(
+                `Template parse errors:\n` +
+                `<ng-content> element cannot have content. ("[ERROR ->]<ng-content>content</ng-content>"): TestComp@0:0`);
+      });
+
+      it('should treat *attr on a template element as valid',
+         () => { expect(() => parse('<ng-template *ngIf>', [])).not.toThrowError(); });
+
+      it('should report when multiple *attrs are used on the same element', () => {
+        expect(() => parse('<div *ngIf *ngFor>', [])).toThrowError(`Template parse errors:
+Can't have multiple template bindings on one element. Use only one attribute prefixed with * ("<div *ngIf [ERROR ->]*ngFor>"): TestComp@0:11`);
+      });
+
+
+      it('should report invalid property names', () => {
+        expect(() => parse('<div [invalidProp]></div>', [])).toThrowError(`Template parse errors:
+Can't bind to 'invalidProp' since it isn't a known property of 'div'. ("<div [ERROR ->][invalidProp]></div>"): TestComp@0:5`);
+      });
+
+      it('should report invalid host property names', () => {
+        const dirA = compileDirectiveMetadataCreate({
+                       selector: 'div',
+                       type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                       host: {'[invalidProp]': 'someProp'}
+                     }).toSummary();
+        expect(() => parse('<div></div>', [dirA])).toThrowError(`Template parse errors:
+Can't bind to 'invalidProp' since it isn't a known property of 'div'. ("[ERROR ->]<div></div>"): TestComp@0:0, Directive DirA`);
+      });
+
+      it('should report errors in expressions', () => {
+        expect(() => parse('<div [prop]="a b"></div>', [])).toThrowError(`Template parse errors:
+Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp@0:5 ("<div [ERROR ->][prop]="a b"></div>"): TestComp@0:5`);
+      });
+
+      it('should not throw on invalid property names if the property is used by a directive',
+         () => {
+           const dirA =
+               compileDirectiveMetadataCreate({
+                 selector: 'div',
+                 type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                 inputs: ['invalidProp']
+               }).toSummary();
+           expect(() => parse('<div [invalid-prop]></div>', [dirA])).not.toThrow();
+         });
+
+      it('should not allow more than 1 component per element', () => {
+        const dirA = compileDirectiveMetadataCreate({
+                       selector: 'div',
+                       isComponent: true,
+                       type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                       template: compileTemplateMetadata({ngContentSelectors: []})
+                     }).toSummary();
+        const dirB = compileDirectiveMetadataCreate({
+                       selector: 'div',
+                       isComponent: true,
+                       type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirB'}}),
+                       template: compileTemplateMetadata({ngContentSelectors: []})
+                     }).toSummary();
+        expect(() => parse('<div>', [dirB, dirA]))
+            .toThrowError(
+                `Template parse errors:\n` +
+                `More than one component matched on this element.\n` +
+                `Make sure that only one component's selector can match a given element.\n` +
+                `Conflicting components: DirB,DirA ("[ERROR ->]<div>"): TestComp@0:0`);
+      });
+
+      it('should not allow components or element bindings nor dom events on explicit embedded templates',
+         () => {
+           const dirA =
+               compileDirectiveMetadataCreate({
+                 selector: '[a]',
+                 isComponent: true,
+                 type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                 template: compileTemplateMetadata({ngContentSelectors: []})
+               }).toSummary();
+
+           expect(() => parse('<ng-template [a]="b" (e)="f"></ng-template>', [dirA]))
+               .toThrowError(`Template parse errors:
+Event binding e not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("<ng-template [a]="b" [ERROR ->](e)="f"></ng-template>"): TestComp@0:21
+Components on an embedded template: DirA ("[ERROR ->]<ng-template [a]="b" (e)="f"></ng-template>"): TestComp@0:0
+Property binding a not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("[ERROR ->]<ng-template [a]="b" (e)="f"></ng-template>"): TestComp@0:0`);
+         });
+
+      it('should not allow components or element bindings on inline embedded templates', () => {
+        const dirA = compileDirectiveMetadataCreate({
+                       selector: '[a]',
+                       isComponent: true,
+                       type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                       template: compileTemplateMetadata({ngContentSelectors: []})
+                     }).toSummary();
+        expect(() => parse('<div *a="b"></div>', [dirA])).toThrowError(`Template parse errors:
+Components on an embedded template: DirA ("[ERROR ->]<div *a="b"></div>"): TestComp@0:0
+Property binding a not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("[ERROR ->]<div *a="b"></div>"): TestComp@0:0`);
+      });
+    });
+
+    describe('ignore elements', () => {
+      it('should ignore <script> elements', () => {
+        expect(humanizeTplAst(parse('<script></script>a', []))).toEqual([[TextAst, 'a']]);
+
+      });
+
+      it('should ignore <style> elements', () => {
+        expect(humanizeTplAst(parse('<style></style>a', []))).toEqual([[TextAst, 'a']]);
+      });
+
+      describe('<link rel="stylesheet">', () => {
+
+        it('should keep <link rel="stylesheet"> elements if they have an absolute url', () => {
+          expect(humanizeTplAst(parse('<link rel="stylesheet" href="http://someurl">a', [])))
+              .toEqual([
+                [ElementAst, 'link'], [AttrAst, 'rel', 'stylesheet'],
+                [AttrAst, 'href', 'http://someurl'], [TextAst, 'a']
+              ]);
+        });
+
+        it('should keep <link rel="stylesheet"> elements if they have no uri', () => {
+          expect(humanizeTplAst(parse('<link rel="stylesheet">a', [
+          ]))).toEqual([[ElementAst, 'link'], [AttrAst, 'rel', 'stylesheet'], [TextAst, 'a']]);
+          expect(humanizeTplAst(parse('<link REL="stylesheet">a', [
+          ]))).toEqual([[ElementAst, 'link'], [AttrAst, 'REL', 'stylesheet'], [TextAst, 'a']]);
+        });
+
+        it('should ignore <link rel="stylesheet"> elements if they have a relative uri', () => {
+          expect(humanizeTplAst(parse('<link rel="stylesheet" href="./other.css">a', [
+          ]))).toEqual([[TextAst, 'a']]);
+          expect(humanizeTplAst(parse('<link rel="stylesheet" HREF="./other.css">a', [
+          ]))).toEqual([[TextAst, 'a']]);
+        });
+
+        it('should ignore <link rel="stylesheet"> elements if they have a package: uri', () => {
+          expect(humanizeTplAst(parse('<link rel="stylesheet" href="package:somePackage">a', [
+          ]))).toEqual([[TextAst, 'a']]);
+        });
+
+      });
+
+      it('should ignore bindings on children of elements with ngNonBindable', () => {
+        expect(humanizeTplAst(parse('<div ngNonBindable>{{b}}</div>', [
+        ]))).toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, '{{b}}']]);
+      });
+
+      it('should keep nested children of elements with ngNonBindable', () => {
+        expect(humanizeTplAst(parse('<div ngNonBindable><span>{{b}}</span></div>', []))).toEqual([
+          [ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [ElementAst, 'span'],
+          [TextAst, '{{b}}']
+        ]);
+      });
+
+      it('should ignore <script> elements inside of elements with ngNonBindable', () => {
+        expect(humanizeTplAst(parse('<div ngNonBindable><script></script>a</div>', [
+        ]))).toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
+      });
+
+      it('should ignore <style> elements inside of elements with ngNonBindable', () => {
+        expect(humanizeTplAst(parse('<div ngNonBindable><style></style>a</div>', [
+        ]))).toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
+      });
+
+      it('should ignore <link rel="stylesheet"> elements inside of elements with ngNonBindable',
+         () => {
+           expect(humanizeTplAst(parse('<div ngNonBindable><link rel="stylesheet">a</div>', [
+           ]))).toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
+         });
+
+      it('should convert <ng-content> elements into regular elements inside of elements with ngNonBindable',
+         () => {
+           expect(humanizeTplAst(parse('<div ngNonBindable><ng-content></ng-content>a</div>', [])))
+               .toEqual([
+                 [ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [ElementAst, 'ng-content'],
+                 [TextAst, 'a']
+               ]);
+         });
+
+    });
+
+    describe('source spans', () => {
+      it('should support ng-content', () => {
+        const parsed = parse('<ng-content select="a">', []);
+        expect(humanizeTplAstSourceSpans(parsed)).toEqual([
+          [NgContentAst, '<ng-content select="a">']
+        ]);
+      });
+
+      it('should support embedded template', () => {
+        expect(humanizeTplAstSourceSpans(parse('<ng-template></ng-template>', [
+        ]))).toEqual([[EmbeddedTemplateAst, '<ng-template>']]);
+      });
+
+      it('should support element and attributes', () => {
+        expect(humanizeTplAstSourceSpans(parse('<div key=value>', []))).toEqual([
+          [ElementAst, 'div', '<div key=value>'], [AttrAst, 'key', 'value', 'key=value']
+        ]);
+
+      });
+
+      it('should support references', () => {
+        expect(humanizeTplAstSourceSpans(parse('<div #a></div>', [
+        ]))).toEqual([[ElementAst, 'div', '<div #a>'], [ReferenceAst, 'a', null, '#a']]);
+      });
+
+      it('should support variables', () => {
+        expect(humanizeTplAstSourceSpans(parse('<ng-template let-a="b"></ng-template>', [])))
+            .toEqual([
+              [EmbeddedTemplateAst, '<ng-template let-a="b">'],
+              [VariableAst, 'a', 'b', 'let-a="b"'],
+            ]);
+      });
+
+      it('should support events', () => {
+        expect(humanizeTplAstSourceSpans(parse('<div (window:event)="v">', []))).toEqual([
+          [ElementAst, 'div', '<div (window:event)="v">'],
+          [BoundEventAst, 'event', 'window', 'v', '(window:event)="v"']
+        ]);
+
+      });
+
+      it('should support element property', () => {
+        expect(humanizeTplAstSourceSpans(parse('<div [someProp]="v">', []))).toEqual([
+          [ElementAst, 'div', '<div [someProp]="v">'],
+          [
+            BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null,
+            '[someProp]="v"'
+          ]
+        ]);
+      });
+
+      it('should support bound text', () => {
+        expect(humanizeTplAstSourceSpans(parse('{{a}}', [
+        ]))).toEqual([[BoundTextAst, '{{ a }}', '{{a}}']]);
+      });
+
+      it('should support text nodes', () => {
+        expect(humanizeTplAstSourceSpans(parse('a', []))).toEqual([[TextAst, 'a', 'a']]);
+      });
+
+      it('should support directive', () => {
+        const dirA = compileDirectiveMetadataCreate({
+                       selector: '[a]',
+                       type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}})
+                     }).toSummary();
+        const comp = compileDirectiveMetadataCreate({
+                       selector: 'div',
+                       isComponent: true,
+                       type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'ZComp'}}),
+                       template: compileTemplateMetadata({ngContentSelectors: []})
+                     }).toSummary();
+        expect(humanizeTplAstSourceSpans(parse('<div a>', [dirA, comp]))).toEqual([
+          [ElementAst, 'div', '<div a>'], [AttrAst, 'a', '', 'a'], [DirectiveAst, dirA, '<div a>'],
+          [DirectiveAst, comp, '<div a>']
+        ]);
+      });
+
+      it('should support directive in namespace', () => {
+        const tagSel =
+            compileDirectiveMetadataCreate({
+              selector: 'circle',
+              type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'elDir'}})
+            }).toSummary();
+        const attrSel =
+            compileDirectiveMetadataCreate({
+              selector: '[href]',
+              type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'attrDir'}})
+            }).toSummary();
+
+        expect(humanizeTplAstSourceSpans(
+                   parse('<svg><circle /><use xlink:href="Port" /></svg>', [tagSel, attrSel])))
+            .toEqual([
+              [ElementAst, ':svg:svg', '<svg>'],
+              [ElementAst, ':svg:circle', '<circle />'],
+              [DirectiveAst, tagSel, '<circle />'],
+              [ElementAst, ':svg:use', '<use xlink:href="Port" />'],
+              [AttrAst, ':xlink:href', 'Port', 'xlink:href="Port"'],
+              [DirectiveAst, attrSel, '<use xlink:href="Port" />'],
+            ]);
+      });
+
+      it('should support directive property', () => {
+        const dirA = compileDirectiveMetadataCreate({
+                       selector: 'div',
+                       type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+                       inputs: ['aProp']
+                     }).toSummary();
+        expect(humanizeTplAstSourceSpans(parse('<div [aProp]="foo"></div>', [dirA]))).toEqual([
+          [ElementAst, 'div', '<div [aProp]="foo">'], [DirectiveAst, dirA, '<div [aProp]="foo">'],
+          [BoundDirectivePropertyAst, 'aProp', 'foo', '[aProp]="foo"']
+        ]);
+      });
+
+      it('should support endSourceSpan for elements', () => {
+        const tagSel =
+            compileDirectiveMetadataCreate({
+              selector: 'circle',
+              type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'elDir'}})
+            }).toSummary();
+        const result = parse('<circle></circle>', [tagSel]);
+        const circle = result[0] as ElementAst;
+        expect(circle.endSourceSpan).toBeDefined();
+        expect(circle.endSourceSpan !.start.offset).toBe(8);
+        expect(circle.endSourceSpan !.end.offset).toBe(17);
+      });
+
+      it('should report undefined for endSourceSpan for elements without an end-tag', () => {
+        const ulSel =
+            compileDirectiveMetadataCreate({
+              selector: 'ul',
+              type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'ulDir'}})
+            }).toSummary();
+        const liSel =
+            compileDirectiveMetadataCreate({
+              selector: 'li',
+              type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'liDir'}})
+            }).toSummary();
+        const result = parse('<ul><li><li></ul>', [ulSel, liSel]);
+        const ul = result[0] as ElementAst;
+        const li = ul.children[0] as ElementAst;
+        expect(li.endSourceSpan).toBe(null);
+      });
+    });
+
+    describe('pipes', () => {
+      it('should allow pipes that have been defined as dependencies', () => {
+        const testPipe =
+            new CompilePipeMetadata({
+              name: 'test',
+              type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'DirA'}}),
+              pure: false
+            }).toSummary();
+        expect(() => parse('{{a | test}}', [], [testPipe])).not.toThrow();
+      });
+
+      it('should report pipes as error that have not been defined as dependencies', () => {
+        expect(() => parse('{{a | test}}', [])).toThrowError(`Template parse errors:
+The pipe 'test' could not be found ("{{[ERROR ->]a | test}}"): TestComp@0:2`);
+      });
+
+    });
+
+    describe('ICU messages', () => {
+      it('should expand plural messages', () => {
+        const shortForm = '{ count, plural, =0 {small} many {big} }';
+        const expandedForm = '<ng-container [ngPlural]="count">' +
+            '<ng-template ngPluralCase="=0">small</ng-template>' +
+            '<ng-template ngPluralCase="many">big</ng-template>' +
+            '</ng-container>';
+
+        expect(humanizeTplAst(parse(shortForm, []))).toEqual(humanizeTplAst(parse(expandedForm, [
+        ])));
+      });
+
+      it('should expand select messages', () => {
+        const shortForm = '{ sex, select, female {foo} other {bar} }';
+        const expandedForm = '<ng-container [ngSwitch]="sex">' +
+            '<ng-template ngSwitchCase="female">foo</ng-template>' +
+            '<ng-template ngSwitchDefault>bar</ng-template>' +
+            '</ng-container>';
+
+        expect(humanizeTplAst(parse(shortForm, []))).toEqual(humanizeTplAst(parse(expandedForm, [
+        ])));
+      });
+
+      it('should be possible to escape ICU messages', () => {
+        const escapedForm = 'escaped {{ "{" }}  }';
+
+        expect(humanizeTplAst(parse(escapedForm, []))).toEqual([
+          [BoundTextAst, 'escaped {{ "{" }}  }'],
+        ]);
+      });
+    });
+  });
+
+  describe('whitespaces removal', () => {
+
+    beforeEach(() => {
+      TestBed.configureCompiler({providers: [TEST_COMPILER_PROVIDERS, MOCK_SCHEMA_REGISTRY]});
+    });
+
+    commonBeforeEach();
+
+    it('should not remove whitespaces by default', () => {
+      expect(humanizeTplAst(parse(' <br>  <br>\t<br>\n<br> ', []))).toEqual([
+        [TextAst, ' '],
+        [ElementAst, 'br'],
+        [TextAst, '  '],
+        [ElementAst, 'br'],
+        [TextAst, '\t'],
+        [ElementAst, 'br'],
+        [TextAst, '\n'],
+        [ElementAst, 'br'],
+        [TextAst, ' '],
+      ]);
+    });
+
+    it('should replace each &ngsp; with a space when preserveWhitespaces is true', () => {
+      expect(humanizeTplAst(parse('foo&ngsp;&ngsp;&ngsp;bar', [], [], [], true))).toEqual([
+        [TextAst, 'foo   bar'],
+      ]);
+    });
+
+    it('should replace every &ngsp; with a single space when preserveWhitespaces is false', () => {
+      expect(humanizeTplAst(parse('foo&ngsp;&ngsp;&ngsp;bar', [], [], [], false))).toEqual([
+        [TextAst, 'foo bar'],
+      ]);
+    });
+
+    it('should remove whitespaces when explicitly requested', () => {
+      expect(humanizeTplAst(parse(' <br>  <br>\t<br>\n<br> ', [], [], [], false))).toEqual([
+        [ElementAst, 'br'],
+        [ElementAst, 'br'],
+        [ElementAst, 'br'],
+        [ElementAst, 'br'],
+      ]);
+    });
+
+    it('should remove whitespace between ICU expansions when not preserving whitespaces', () => {
+      const shortForm = '{ count, plural, =0 {small} many {big} }';
+      const expandedForm = '<ng-container [ngPlural]="count">' +
+          '<ng-template ngPluralCase="=0">small</ng-template>' +
+          '<ng-template ngPluralCase="many">big</ng-template>' +
+          '</ng-container>';
+      const humanizedExpandedForm = humanizeTplAst(parse(expandedForm, []));
+
+      // ICU expansions are converted to `<ng-container>` tags and all blank text nodes are reomved
+      // so any whitespace between ICU exansions are removed as well
+      expect(humanizeTplAst(parse(`${shortForm} ${shortForm}`, [], [], [], false))).toEqual([
+        ...humanizedExpandedForm, ...humanizedExpandedForm
+      ]);
+    });
+  });
+
+})();
diff --git a/packages/compiler/test/template_parser/template_preparser_spec.ts b/packages/compiler/test/template_parser/template_preparser_spec.ts
new file mode 100644
index 000000000000..a5fd04163263
--- /dev/null
+++ b/packages/compiler/test/template_parser/template_preparser_spec.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 {beforeEach, describe, expect, inject, it} from '../../../core/testing/src/testing_internal';
+import {Element} from '../../src/ml_parser/ast';
+import {HtmlParser} from '../../src/ml_parser/html_parser';
+import {PreparsedElement, PreparsedElementType, preparseElement} from '../../src/template_parser/template_preparser';
+
+{
+  describe('preparseElement', () => {
+    let htmlParser: HtmlParser;
+    beforeEach(inject([HtmlParser], (_htmlParser: HtmlParser) => { htmlParser = _htmlParser; }));
+
+    function preparse(html: string): PreparsedElement {
+      return preparseElement(htmlParser.parse(html, 'TestComp').rootNodes[0] as Element);
+    }
+
+    it('should detect script elements', inject([HtmlParser], (htmlParser: HtmlParser) => {
+         expect(preparse('<script>').type).toBe(PreparsedElementType.SCRIPT);
+       }));
+
+    it('should detect style elements', inject([HtmlParser], (htmlParser: HtmlParser) => {
+         expect(preparse('<style>').type).toBe(PreparsedElementType.STYLE);
+       }));
+
+    it('should detect stylesheet elements', inject([HtmlParser], (htmlParser: HtmlParser) => {
+         expect(preparse('<link rel="stylesheet">').type).toBe(PreparsedElementType.STYLESHEET);
+         expect(preparse('<link rel="stylesheet" href="someUrl">').hrefAttr).toEqual('someUrl');
+         expect(preparse('<link rel="someRel">').type).toBe(PreparsedElementType.OTHER);
+       }));
+
+    it('should detect ng-content elements', inject([HtmlParser], (htmlParser: HtmlParser) => {
+         expect(preparse('<ng-content>').type).toBe(PreparsedElementType.NG_CONTENT);
+       }));
+
+    it('should normalize ng-content.select attribute',
+       inject([HtmlParser], (htmlParser: HtmlParser) => {
+         expect(preparse('<ng-content>').selectAttr).toEqual('*');
+         expect(preparse('<ng-content select>').selectAttr).toEqual('*');
+         expect(preparse('<ng-content select="*">').selectAttr).toEqual('*');
+       }));
+
+    it('should extract ngProjectAs value', () => {
+      expect(preparse('<p ngProjectAs="el[attr].class"></p>').projectAs).toEqual('el[attr].class');
+    });
+  });
+}
diff --git a/packages/compiler/test/test_bindings.ts b/packages/compiler/test/test_bindings.ts
new file mode 100644
index 000000000000..3618a4e58af0
--- /dev/null
+++ b/packages/compiler/test/test_bindings.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 {ElementSchemaRegistry, ResourceLoader, UrlResolver} from '@angular/compiler';
+import {MockResourceLoader} from '@angular/compiler/testing/src/resource_loader_mock';
+import {MockSchemaRegistry} from '@angular/compiler/testing/src/schema_registry_mock';
+import {Provider} from '@angular/core';
+
+export function createUrlResolverWithoutPackagePrefix(): UrlResolver {
+  return new UrlResolver();
+}
+
+// This provider is put here just so that we can access it from multiple
+// internal test packages.
+// TODO: get rid of it or move to a separate @angular/internal_testing package
+export const TEST_COMPILER_PROVIDERS: Provider[] = [
+  {provide: ElementSchemaRegistry, useValue: new MockSchemaRegistry({}, {}, {}, [], [])},
+  {provide: ResourceLoader, useClass: MockResourceLoader, deps: []},
+  {provide: UrlResolver, useFactory: createUrlResolverWithoutPackagePrefix, deps: []}
+];
diff --git a/packages/compiler/test/url_resolver_spec.ts b/packages/compiler/test/url_resolver_spec.ts
new file mode 100644
index 000000000000..c6dc97c8a36f
--- /dev/null
+++ b/packages/compiler/test/url_resolver_spec.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 {UrlResolver, createOfflineCompileUrlResolver} from '@angular/compiler/src/url_resolver';
+import {beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
+{
+  describe('UrlResolver', () => {
+    let resolver = new UrlResolver();
+
+    describe('absolute base url', () => {
+      it('should add a relative path to the base url', () => {
+        expect(resolver.resolve('http://www.foo.com', 'bar')).toEqual('http://www.foo.com/bar');
+        expect(resolver.resolve('http://www.foo.com/', 'bar')).toEqual('http://www.foo.com/bar');
+        expect(resolver.resolve('http://www.foo.com', './bar')).toEqual('http://www.foo.com/bar');
+        expect(resolver.resolve('http://www.foo.com/', './bar')).toEqual('http://www.foo.com/bar');
+      });
+
+      it('should replace the base path', () => {
+        expect(resolver.resolve('http://www.foo.com/baz', 'bar')).toEqual('http://www.foo.com/bar');
+        expect(resolver.resolve('http://www.foo.com/baz', './bar'))
+            .toEqual('http://www.foo.com/bar');
+      });
+
+      it('should append to the base path', () => {
+        expect(resolver.resolve('http://www.foo.com/baz/', 'bar'))
+            .toEqual('http://www.foo.com/baz/bar');
+        expect(resolver.resolve('http://www.foo.com/baz/', './bar'))
+            .toEqual('http://www.foo.com/baz/bar');
+      });
+
+      it('should support ".." in the path', () => {
+        expect(resolver.resolve('http://www.foo.com/baz/', '../bar'))
+            .toEqual('http://www.foo.com/bar');
+        expect(resolver.resolve('http://www.foo.com/1/2/3/', '../../bar'))
+            .toEqual('http://www.foo.com/1/bar');
+        expect(resolver.resolve('http://www.foo.com/1/2/3/', '../biz/bar'))
+            .toEqual('http://www.foo.com/1/2/biz/bar');
+        expect(resolver.resolve('http://www.foo.com/1/2/baz', '../../bar'))
+            .toEqual('http://www.foo.com/bar');
+      });
+
+      it('should ignore the base path when the url has a scheme', () => {
+        expect(resolver.resolve('http://www.foo.com', 'http://www.bar.com'))
+            .toEqual('http://www.bar.com');
+      });
+
+      it('should support absolute urls', () => {
+        expect(resolver.resolve('http://www.foo.com', '/bar')).toEqual('http://www.foo.com/bar');
+        expect(resolver.resolve('http://www.foo.com/', '/bar')).toEqual('http://www.foo.com/bar');
+        expect(resolver.resolve('http://www.foo.com/baz', '/bar'))
+            .toEqual('http://www.foo.com/bar');
+        expect(resolver.resolve('http://www.foo.com/baz/', '/bar'))
+            .toEqual('http://www.foo.com/bar');
+      });
+    });
+
+    describe('relative base url', () => {
+      it('should add a relative path to the base url', () => {
+        expect(resolver.resolve('foo/', './bar')).toEqual('foo/bar');
+        expect(resolver.resolve('foo/baz', './bar')).toEqual('foo/bar');
+        expect(resolver.resolve('foo/baz', 'bar')).toEqual('foo/bar');
+
+      });
+
+      it('should support ".." in the path', () => {
+        expect(resolver.resolve('foo/baz', '../bar')).toEqual('bar');
+        expect(resolver.resolve('foo/baz', '../biz/bar')).toEqual('biz/bar');
+      });
+
+      it('should support absolute urls', () => {
+        expect(resolver.resolve('foo/baz', '/bar')).toEqual('/bar');
+        expect(resolver.resolve('foo/baz/', '/bar')).toEqual('/bar');
+      });
+
+      it('should not resolve urls against the baseUrl when the url contains a scheme', () => {
+        resolver = new UrlResolver('my_packages_dir');
+        expect(resolver.resolve('base/', 'package:file')).toEqual('my_packages_dir/file');
+        expect(resolver.resolve('base/', 'http:super_file')).toEqual('http:super_file');
+        expect(resolver.resolve('base/', './mega_file')).toEqual('base/mega_file');
+      });
+    });
+
+    describe('packages', () => {
+      it('should resolve a url based on the application package', () => {
+        resolver = new UrlResolver('my_packages_dir');
+        expect(resolver.resolve(null !, 'package:some/dir/file.txt'))
+            .toEqual('my_packages_dir/some/dir/file.txt');
+        expect(resolver.resolve(null !, 'some/dir/file.txt')).toEqual('some/dir/file.txt');
+      });
+
+      it('should contain a default value of "/" when nothing is provided',
+         inject([UrlResolver], (resolver: UrlResolver) => {
+           expect(resolver.resolve(null !, 'package:file')).toEqual('/file');
+         }));
+
+      it('should resolve a package value when present within the baseurl', () => {
+        resolver = new UrlResolver('/my_special_dir');
+        expect(resolver.resolve('package:some_dir/', 'matias.html'))
+            .toEqual('/my_special_dir/some_dir/matias.html');
+      });
+    });
+
+    describe('corner and error cases', () => {
+      it('should encode URLs before resolving',
+         () => {
+           expect(resolver.resolve('foo/baz', `<p #p>Hello
+        </p>`)).toEqual('foo/%3Cp%20#p%3EHello%0A%20%20%20%20%20%20%20%20%3C/p%3E');
+         });
+    });
+  });
+}
diff --git a/packages/compiler/test/util_spec.ts b/packages/compiler/test/util_spec.ts
new file mode 100644
index 000000000000..188c6c37390e
--- /dev/null
+++ b/packages/compiler/test/util_spec.ts
@@ -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 {fakeAsync} from '@angular/core/testing/src/fake_async';
+import {SyncAsync, escapeRegExp, splitAtColon, utf8Encode} from '../src/util';
+
+{
+  describe('util', () => {
+    describe('splitAtColon', () => {
+      it('should split when a single ":" is present', () => {
+        expect(splitAtColon('a:b', [])).toEqual(['a', 'b']);
+      });
+
+      it('should trim parts', () => { expect(splitAtColon(' a : b ', [])).toEqual(['a', 'b']); });
+
+      it('should support multiple ":"', () => {
+        expect(splitAtColon('a:b:c', [])).toEqual(['a', 'b:c']);
+      });
+
+      it('should use the default value when no ":" is present', () => {
+        expect(splitAtColon('ab', ['c', 'd'])).toEqual(['c', 'd']);
+      });
+    });
+
+    describe('RegExp', () => {
+      it('should escape regexp', () => {
+        expect(new RegExp(escapeRegExp('b')).exec('abc')).toBeTruthy();
+        expect(new RegExp(escapeRegExp('b')).exec('adc')).toBeFalsy();
+        expect(new RegExp(escapeRegExp('a.b')).exec('a.b')).toBeTruthy();
+        expect(new RegExp(escapeRegExp('a.b')).exec('axb')).toBeFalsy();
+      });
+    });
+
+    describe('utf8encode', () => {
+      // tests from https://github.com/mathiasbynens/wtf-8
+      it('should encode to utf8', () => {
+        const tests = [
+          ['abc', 'abc'],
+          // // 1-byte
+          ['\0', '\0'],
+          // // 2-byte
+          ['\u0080', '\xc2\x80'],
+          ['\u05ca', '\xd7\x8a'],
+          ['\u07ff', '\xdf\xbf'],
+          // // 3-byte
+          ['\u0800', '\xe0\xa0\x80'],
+          ['\u2c3c', '\xe2\xb0\xbc'],
+          ['\uffff', '\xef\xbf\xbf'],
+          // //4-byte
+          ['\uD800\uDC00', '\xF0\x90\x80\x80'],
+          ['\uD834\uDF06', '\xF0\x9D\x8C\x86'],
+          ['\uDBFF\uDFFF', '\xF4\x8F\xBF\xBF'],
+          // unmatched surrogate halves
+          // high surrogates: 0xD800 to 0xDBFF
+          ['\uD800', '\xED\xA0\x80'],
+          ['\uD800\uD800', '\xED\xA0\x80\xED\xA0\x80'],
+          ['\uD800A', '\xED\xA0\x80A'],
+          ['\uD800\uD834\uDF06\uD800', '\xED\xA0\x80\xF0\x9D\x8C\x86\xED\xA0\x80'],
+          ['\uD9AF', '\xED\xA6\xAF'],
+          ['\uDBFF', '\xED\xAF\xBF'],
+          // low surrogates: 0xDC00 to 0xDFFF
+          ['\uDC00', '\xED\xB0\x80'],
+          ['\uDC00\uDC00', '\xED\xB0\x80\xED\xB0\x80'],
+          ['\uDC00A', '\xED\xB0\x80A'],
+          ['\uDC00\uD834\uDF06\uDC00', '\xED\xB0\x80\xF0\x9D\x8C\x86\xED\xB0\x80'],
+          ['\uDEEE', '\xED\xBB\xAE'],
+          ['\uDFFF', '\xED\xBF\xBF'],
+        ];
+        tests.forEach(
+            ([input, output]: [string, string]) => { expect(utf8Encode(input)).toEqual(output); });
+      });
+    });
+  });
+}
\ No newline at end of file
diff --git a/packages/compiler/testing/BUILD.bazel b/packages/compiler/testing/BUILD.bazel
new file mode 100644
index 000000000000..a368fb056f0e
--- /dev/null
+++ b/packages/compiler/testing/BUILD.bazel
@@ -0,0 +1,19 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["testing.ts"],
+    ),
+    module_name = "@angular/compiler/testing",
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/core",
+    ],
+)
diff --git a/packages/compiler/testing/index.ts b/packages/compiler/testing/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/compiler/testing/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';
diff --git a/packages/compiler/testing/package.json b/packages/compiler/testing/package.json
new file mode 100644
index 000000000000..6031eb27b5db
--- /dev/null
+++ b/packages/compiler/testing/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/compiler/testing",
+  "typings": "./testing.d.ts",
+  "main": "../bundles/compiler-testing.umd.js",
+  "module": "../fesm5/testing.js",
+  "es2015": "../fesm2015/testing.js",
+  "esm5": "../esm5/testing/testing.js",
+  "esm2015": "../esm2015/testing/testing.js",
+  "fesm5": "../fesm5/testing.js",
+  "fesm2015": "../fesm2015/testing.js"
+}
diff --git a/packages/compiler/testing/public_api.ts b/packages/compiler/testing/public_api.ts
new file mode 100644
index 000000000000..e95d9f8ef071
--- /dev/null
+++ b/packages/compiler/testing/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/testing';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/compiler/testing/rollup.config.js b/packages/compiler/testing/rollup.config.js
new file mode 100644
index 000000000000..a3a721103198
--- /dev/null
+++ b/packages/compiler/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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/core/testing': 'ng.core.testing',
+  '@angular/compiler': 'ng.compiler',
+  'rxjs': 'rxjs',
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/compiler/fesm5/testing.js',
+  dest: '../../../dist/packages-dist/compiler/bundles/compiler-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/compiler/testing'},
+  moduleName: 'ng.compiler.testing',
+  plugins: [resolve(), sourcemaps()],
+  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
new file mode 100644
index 000000000000..f3de0fe888c7
--- /dev/null
+++ b/packages/compiler/testing/src/directive_resolver_mock.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 {CompileReflector, DirectiveResolver, core} from '@angular/compiler';
+
+/**
+ * An implementation of {@link DirectiveResolver} that allows overriding
+ * various properties of directives.
+ */
+export class MockDirectiveResolver extends DirectiveResolver {
+  private _directives = new Map<core.Type, core.Directive>();
+
+  constructor(reflector: CompileReflector) { super(reflector); }
+
+  resolve(type: core.Type): core.Directive;
+  resolve(type: core.Type, throwIfNotFound: true): core.Directive;
+  resolve(type: core.Type, throwIfNotFound: boolean): core.Directive|null;
+  resolve(type: core.Type, throwIfNotFound = true): core.Directive|null {
+    return this._directives.get(type) || super.resolve(type, throwIfNotFound);
+  }
+
+  /**
+   * Overrides the {@link core.Directive} for a directive.
+   */
+  setDirective(type: core.Type, metadata: core.Directive): void {
+    this._directives.set(type, metadata);
+  }
+}
diff --git a/packages/compiler/testing/src/ng_module_resolver_mock.ts b/packages/compiler/testing/src/ng_module_resolver_mock.ts
new file mode 100644
index 000000000000..619435c9e442
--- /dev/null
+++ b/packages/compiler/testing/src/ng_module_resolver_mock.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 {CompileReflector, NgModuleResolver, core} from '@angular/compiler';
+
+export class MockNgModuleResolver extends NgModuleResolver {
+  private _ngModules = new Map<core.Type, core.NgModule>();
+
+  constructor(reflector: CompileReflector) { super(reflector); }
+
+  /**
+   * Overrides the {@link NgModule} for a module.
+   */
+  setNgModule(type: core.Type, metadata: core.NgModule): void {
+    this._ngModules.set(type, metadata);
+  }
+
+  /**
+   * Returns the {@link NgModule} for a module:
+   * - Set the {@link NgModule} to the overridden view when it exists or fallback to the
+   * default
+   * `NgModuleResolver`, see `setNgModule`.
+   */
+  resolve(type: core.Type, throwIfNotFound = true): core.NgModule {
+    return this._ngModules.get(type) || super.resolve(type, throwIfNotFound) !;
+  }
+}
diff --git a/packages/compiler/testing/src/output/source_map_util.ts b/packages/compiler/testing/src/output/source_map_util.ts
new file mode 100644
index 000000000000..6280d0393a8d
--- /dev/null
+++ b/packages/compiler/testing/src/output/source_map_util.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 {SourceMap} from '@angular/compiler';
+const b64 = require('base64-js');
+const SourceMapConsumer = require('source-map').SourceMapConsumer;
+
+export interface SourceLocation {
+  line: number;
+  column: number;
+  source: string;
+}
+
+export function originalPositionFor(
+    sourceMap: SourceMap,
+    genPosition: {line: number | null, column: number | null}): SourceLocation {
+  const smc = new SourceMapConsumer(sourceMap);
+  // Note: We don't return the original object as it also contains a `name` property
+  // which is always null and we don't want to include that in our assertions...
+  const {line, column, source} = smc.originalPositionFor(genPosition);
+  return {line, column, source};
+}
+
+export function extractSourceMap(source: string): SourceMap|null {
+  let idx = source.lastIndexOf('\n//#');
+  if (idx == -1) return null;
+  const smComment = source.slice(idx).trim();
+  const smB64 = smComment.split('sourceMappingURL=data:application/json;base64,')[1];
+  return smB64 ? JSON.parse(decodeB64String(smB64)) : null;
+}
+
+function decodeB64String(s: string): string {
+  return b64.toByteArray(s).reduce((s: string, c: number) => s + String.fromCharCode(c), '');
+}
diff --git a/packages/compiler/testing/src/pipe_resolver_mock.ts b/packages/compiler/testing/src/pipe_resolver_mock.ts
new file mode 100644
index 000000000000..36fb91667a60
--- /dev/null
+++ b/packages/compiler/testing/src/pipe_resolver_mock.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 {CompileReflector, PipeResolver, core} from '@angular/compiler';
+
+export class MockPipeResolver extends PipeResolver {
+  private _pipes = new Map<core.Type, core.Pipe>();
+
+  constructor(refector: CompileReflector) { super(refector); }
+
+  /**
+   * Overrides the {@link Pipe} for a pipe.
+   */
+  setPipe(type: core.Type, metadata: core.Pipe): void { this._pipes.set(type, metadata); }
+
+  /**
+   * Returns the {@link Pipe} for a pipe:
+   * - Set the {@link Pipe} to the overridden view when it exists or fallback to the
+   * default
+   * `PipeResolver`, see `setPipe`.
+   */
+  resolve(type: core.Type, throwIfNotFound = true): core.Pipe {
+    let metadata = this._pipes.get(type);
+    if (!metadata) {
+      metadata = super.resolve(type, throwIfNotFound) !;
+    }
+    return metadata;
+  }
+}
diff --git a/packages/compiler/testing/src/resource_loader_mock.ts b/packages/compiler/testing/src/resource_loader_mock.ts
new file mode 100644
index 000000000000..e64c74496048
--- /dev/null
+++ b/packages/compiler/testing/src/resource_loader_mock.ts
@@ -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
+ */
+
+import {ResourceLoader} from '@angular/compiler';
+
+/**
+ * A mock implementation of {@link ResourceLoader} that allows outgoing requests to be mocked
+ * and responded to within a single test, without going to the network.
+ */
+export class MockResourceLoader extends ResourceLoader {
+  private _expectations: _Expectation[] = [];
+  private _definitions = new Map<string, string>();
+  private _requests: _PendingRequest[] = [];
+
+  get(url: string): Promise<string> {
+    const request = new _PendingRequest(url);
+    this._requests.push(request);
+    return request.getPromise();
+  }
+
+  hasPendingRequests() { return !!this._requests.length; }
+
+  /**
+   * Add an expectation for the given URL. Incoming requests will be checked against
+   * the next expectation (in FIFO order). The `verifyNoOutstandingExpectations` method
+   * can be used to check if any expectations have not yet been met.
+   *
+   * The response given will be returned if the expectation matches.
+   */
+  expect(url: string, response: string) {
+    const expectation = new _Expectation(url, response);
+    this._expectations.push(expectation);
+  }
+
+  /**
+   * Add a definition for the given URL to return the given response. Unlike expectations,
+   * definitions have no order and will satisfy any matching request at any time. Also
+   * unlike expectations, unused definitions do not cause `verifyNoOutstandingExpectations`
+   * to return an error.
+   */
+  when(url: string, response: string) { this._definitions.set(url, response); }
+
+  /**
+   * Process pending requests and verify there are no outstanding expectations. Also fails
+   * if no requests are pending.
+   */
+  flush() {
+    if (this._requests.length === 0) {
+      throw new Error('No pending requests to flush');
+    }
+
+    do {
+      this._processRequest(this._requests.shift() !);
+    } while (this._requests.length > 0);
+
+    this.verifyNoOutstandingExpectations();
+  }
+
+  /**
+   * Throw an exception if any expectations have not been satisfied.
+   */
+  verifyNoOutstandingExpectations() {
+    if (this._expectations.length === 0) return;
+
+    const urls: string[] = [];
+    for (let i = 0; i < this._expectations.length; i++) {
+      const expectation = this._expectations[i];
+      urls.push(expectation.url);
+    }
+
+    throw new Error(`Unsatisfied requests: ${urls.join(', ')}`);
+  }
+
+  private _processRequest(request: _PendingRequest) {
+    const url = request.url;
+
+    if (this._expectations.length > 0) {
+      const expectation = this._expectations[0];
+      if (expectation.url == url) {
+        remove(this._expectations, expectation);
+        request.complete(expectation.response);
+        return;
+      }
+    }
+
+    if (this._definitions.has(url)) {
+      const response = this._definitions.get(url);
+      request.complete(response == null ? null : response);
+      return;
+    }
+
+    throw new Error(`Unexpected request ${url}`);
+  }
+}
+
+class _PendingRequest {
+  // TODO(issue/24571): remove '!'.
+  resolve !: (result: string) => void;
+  // TODO(issue/24571): remove '!'.
+  reject !: (error: any) => void;
+  promise: Promise<string>;
+
+  constructor(public url: string) {
+    this.promise = new Promise((res, rej) => {
+      this.resolve = res;
+      this.reject = rej;
+    });
+  }
+
+  complete(response: string|null) {
+    if (response == null) {
+      this.reject(`Failed to load ${this.url}`);
+    } else {
+      this.resolve(response);
+    }
+  }
+
+  getPromise(): Promise<string> { return this.promise; }
+}
+
+class _Expectation {
+  url: string;
+  response: string;
+  constructor(url: string, response: string) {
+    this.url = url;
+    this.response = response;
+  }
+}
+
+function remove<T>(list: T[], el: T): void {
+  const index = list.indexOf(el);
+  if (index > -1) {
+    list.splice(index, 1);
+  }
+}
diff --git a/packages/compiler/testing/src/schema_registry_mock.ts b/packages/compiler/testing/src/schema_registry_mock.ts
new file mode 100644
index 000000000000..b1c5b25ccfe0
--- /dev/null
+++ b/packages/compiler/testing/src/schema_registry_mock.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 {ElementSchemaRegistry, core} from '@angular/compiler';
+
+export class MockSchemaRegistry implements ElementSchemaRegistry {
+  constructor(
+      public existingProperties: {[key: string]: boolean},
+      public attrPropMapping: {[key: string]: string},
+      public existingElements: {[key: string]: boolean}, public invalidProperties: Array<string>,
+      public invalidAttributes: Array<string>) {}
+
+  hasProperty(tagName: string, property: string, schemas: core.SchemaMetadata[]): boolean {
+    const value = this.existingProperties[property];
+    return value === void 0 ? true : value;
+  }
+
+  hasElement(tagName: string, schemaMetas: core.SchemaMetadata[]): boolean {
+    const value = this.existingElements[tagName.toLowerCase()];
+    return value === void 0 ? true : value;
+  }
+
+  allKnownElementNames(): string[] { return Object.keys(this.existingElements); }
+
+  securityContext(selector: string, property: string, isAttribute: boolean): core.SecurityContext {
+    return core.SecurityContext.NONE;
+  }
+
+  getMappedPropName(attrName: string): string { return this.attrPropMapping[attrName] || attrName; }
+
+  getDefaultComponentElementName(): string { return 'ng-component'; }
+
+  validateProperty(name: string): {error: boolean, msg?: string} {
+    if (this.invalidProperties.indexOf(name) > -1) {
+      return {error: true, msg: `Binding to property '${name}' is disallowed for security reasons`};
+    } else {
+      return {error: false};
+    }
+  }
+
+  validateAttribute(name: string): {error: boolean, msg?: string} {
+    if (this.invalidAttributes.indexOf(name) > -1) {
+      return {
+        error: true,
+        msg: `Binding to attribute '${name}' is disallowed for security reasons`
+      };
+    } else {
+      return {error: false};
+    }
+  }
+
+  normalizeAnimationStyleProperty(propName: string): string { return propName; }
+  normalizeAnimationStyleValue(camelCaseProp: string, userProvidedProp: string, val: string|number):
+      {error: string, value: string} {
+    return {error: null !, value: val.toString()};
+  }
+}
diff --git a/packages/compiler/testing/src/testing.ts b/packages/compiler/testing/src/testing.ts
new file mode 100644
index 000000000000..cc89dd3f7507
--- /dev/null
+++ b/packages/compiler/testing/src/testing.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 APIs of the compiler package.
+ *
+ * <div class="callout is-critical">
+ *   <header>Unstable APIs</header>
+ *   <p>
+ *     All compiler apis are currently considered experimental and private!
+ *   </p>
+ *   <p>
+ *     We expect the APIs in this package to keep on changing. Do not rely on them.
+ *   </p>
+ * </div>
+ */
+export * from './resource_loader_mock';
+export * from './schema_registry_mock';
+export * from './directive_resolver_mock';
+export * from './ng_module_resolver_mock';
+export * from './pipe_resolver_mock';
diff --git a/packages/compiler/testing/testing.ts b/packages/compiler/testing/testing.ts
new file mode 100644
index 000000000000..ca39d26dcdb8
--- /dev/null
+++ b/packages/compiler/testing/testing.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/compiler/testing/tsconfig-build.json b/packages/compiler/testing/tsconfig-build.json
new file mode 100644
index 000000000000..48f35ad78610
--- /dev/null
+++ b/packages/compiler/testing/tsconfig-build.json
@@ -0,0 +1,24 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/compiler": ["../../../dist/packages/compiler"],
+      "@angular/core": ["../../../dist/packages/core"]
+    },
+    "outDir": "../../../dist/packages/compiler"
+  },
+
+  "files": [
+    "testing.ts",
+    "../../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipMetadataEmit": true,
+    "skipTemplateCodegen": true
+  }
+}
diff --git a/packages/compiler/tsconfig-build.json b/packages/compiler/tsconfig-build.json
new file mode 100644
index 000000000000..d59d031f3b30
--- /dev/null
+++ b/packages/compiler/tsconfig-build.json
@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "stripInternal": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "outDir": "../../dist/packages/compiler",
+    "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": []
+  },
+  "files": [
+    "index.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipMetadataEmit": true,
+    "skipTemplateCodegen": true
+  }
+}
diff --git a/packages/compiler/tsconfig-tools.json b/packages/compiler/tsconfig-tools.json
new file mode 100644
index 000000000000..e45b55988db7
--- /dev/null
+++ b/packages/compiler/tsconfig-tools.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig-build.json",
+
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "outDir": "../../dist/tools/@angular/compiler"
+  }
+}
\ No newline at end of file
diff --git a/packages/core/BUILD.bazel b/packages/core/BUILD.bazel
new file mode 100644
index 000000000000..5dbdbfbe4b69
--- /dev/null
+++ b/packages/core/BUILD.bazel
@@ -0,0 +1,60 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "core",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+        exclude = ["src/ivy_switch.ts"],
+    ) + [
+        ":ivy_switch",
+    ],
+    module_name = "@angular/core",
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "@rxjs",
+        "@rxjs//operators",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = glob(["**/*.externs.js"]) + [
+        "package.json",
+        "//packages/core/testing:package.json",
+    ],
+    entry_point = "packages/core/index.js",
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "release-with-framework",
+    ],
+    deps = [
+        ":core",
+        "//packages/core/testing",
+    ],
+)
+
+## Controls if Ivy is enabled. (Temporary target until we permanently switch over to Ivy)
+##
+## This file generates `src/ivy_switch.ts` file which reexports symbols for `ViewEngine` or `Ivy.`
+## - append `--define=compile=legacy` (default) to `bazel` command to reexport `./ivy_switch_legacy`
+##   and use `ViewEngine`
+## - append `--define=compile=jit` to `bazel` command to rexport `./ivy_switch_jit` and use `Ivy`
+## - append `--define=compile=local` to `bazel` command to rexport `./ivy_switch_jit` and use `Ivy`
+##   in the local analysis mode. (run as part of `ngtsc`)
+##
+## NOTE: `--define=compile=jit` works with any `bazel` command or target across the repo.
+##
+## See: `//tools/bazel.rc` where `--define=ivy=false` is defined as default.
+## See: `./src/ivy_switch.ts` for more details.
+genrule(
+    name = "ivy_switch",
+    outs = ["src/ivy_switch.ts"],
+    cmd = "echo export '*' from \"'./ivy_switch_$(compile)';\" > $@",
+)
diff --git a/packages/core/index.ts b/packages/core/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/core/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';
diff --git a/packages/core/package.json b/packages/core/package.json
new file mode 100644
index 000000000000..4c2a656abee6
--- /dev/null
+++ b/packages/core/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@angular/core",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - the core framework",
+  "main": "./bundles/core.umd.js",
+  "module": "./fesm5/core.js",
+  "es2015": "./fesm2015/core.js",
+  "esm5": "./esm5/core.js",
+  "esm2015": "./esm2015/core.js",
+  "fesm5": "./fesm5/core.js",
+  "fesm2015": "./fesm2015/core.js",
+  "typings": "./core.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "rxjs": "^6.0.0",
+    "zone.js": "~0.8.26"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/core/public_api.ts b/packages/core/public_api.ts
new file mode 100644
index 000000000000..2a53f74cdfa6
--- /dev/null
+++ b/packages/core/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/core';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/core/rollup.config.js b/packages/core/rollup.config.js
new file mode 100644
index 000000000000..93e50a257897
--- /dev/null
+++ b/packages/core/rollup.config.js
@@ -0,0 +1,28 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/compiler': 'ng.compiler',
+  'rxjs': 'rxjs',
+  'rxjs/operators': 'rxjs.operators',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/core/fesm5/core.js',
+  dest: '../../dist/packages-dist/core/bundles/core.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/core'},
+  moduleName: 'ng.core',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/core/src/application_init.ts b/packages/core/src/application_init.ts
new file mode 100644
index 000000000000..f04d5181e4b9
--- /dev/null
+++ b/packages/core/src/application_init.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 {isPromise} from '../src/util/lang';
+
+import {Inject, Injectable, InjectionToken, Optional} from './di';
+
+
+/**
+ * A function that will be executed when an application is initialized.
+ */
+export const APP_INITIALIZER = new InjectionToken<Array<() => void>>('Application Initializer');
+
+/**
+ * A class that reflects the state of running {@link APP_INITIALIZER}s.
+ */
+@Injectable()
+export class ApplicationInitStatus {
+  // TODO(issue/24571): remove '!'.
+  private resolve !: Function;
+  // TODO(issue/24571): remove '!'.
+  private reject !: Function;
+  private initialized = false;
+  public readonly donePromise: Promise<any>;
+  public readonly done = false;
+
+  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>[] = [];
+
+    const complete = () => {
+      (this as{done: boolean}).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);
+        }
+      }
+    }
+
+    Promise.all(asyncInitPromises).then(() => { complete(); }).catch(e => { this.reject(e); });
+
+    if (asyncInitPromises.length === 0) {
+      complete();
+    }
+    this.initialized = true;
+  }
+}
diff --git a/packages/core/src/application_module.ts b/packages/core/src/application_module.ts
new file mode 100644
index 000000000000..4cbd10b24b0b
--- /dev/null
+++ b/packages/core/src/application_module.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 {APP_INITIALIZER, ApplicationInitStatus} from './application_init';
+import {ApplicationRef} from './application_ref';
+import {APP_ID_RANDOM_PROVIDER} from './application_tokens';
+import {IterableDiffers, KeyValueDiffers, defaultIterableDiffers, defaultKeyValueDiffers} from './change_detection/change_detection';
+import {Console} from './console';
+import {InjectionToken, Injector, StaticProvider} from './di';
+import {Inject, Optional, SkipSelf} from './di/metadata';
+import {ErrorHandler} from './error_handler';
+import {LOCALE_ID} from './i18n/tokens';
+import {ComponentFactoryResolver} from './linker';
+import {Compiler} from './linker/compiler';
+import {NgModule} from './metadata';
+import {NgZone} from './zone';
+
+export function _iterableDiffersFactory() {
+  return defaultIterableDiffers;
+}
+
+export function _keyValueDiffersFactory() {
+  return defaultKeyValueDiffers;
+}
+
+export function _localeFactory(locale?: string): string {
+  return locale || 'en-US';
+}
+
+export const APPLICATION_MODULE_PROVIDERS: StaticProvider[] = [
+  {
+    provide: ApplicationRef,
+    useClass: ApplicationRef,
+    deps:
+        [NgZone, Console, Injector, ErrorHandler, ComponentFactoryResolver, ApplicationInitStatus]
+  },
+  {
+    provide: ApplicationInitStatus,
+    useClass: ApplicationInitStatus,
+    deps: [[new Optional(), APP_INITIALIZER]]
+  },
+  {provide: Compiler, useClass: Compiler, deps: []},
+  APP_ID_RANDOM_PROVIDER,
+  {provide: IterableDiffers, useFactory: _iterableDiffersFactory, deps: []},
+  {provide: KeyValueDiffers, useFactory: _keyValueDiffersFactory, deps: []},
+  {
+    provide: LOCALE_ID,
+    useFactory: _localeFactory,
+    deps: [[new Inject(LOCALE_ID), new Optional(), new SkipSelf()]]
+  },
+];
+
+/**
+ * This module includes the providers of @angular/core that are needed
+ * to bootstrap components via `ApplicationRef`.
+ *
+ * @experimental
+ */
+@NgModule({providers: APPLICATION_MODULE_PROVIDERS})
+export class ApplicationModule {
+  // Inject ApplicationRef to make it eager...
+  constructor(appRef: ApplicationRef) {}
+}
diff --git a/packages/core/src/application_ref.ts b/packages/core/src/application_ref.ts
new file mode 100644
index 000000000000..9ec754f3ab30
--- /dev/null
+++ b/packages/core/src/application_ref.ts
@@ -0,0 +1,583 @@
+/**
+ * @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, Observer, Subscription, merge} from 'rxjs';
+import {share} from 'rxjs/operators';
+
+import {ErrorHandler} from '../src/error_handler';
+import {scheduleMicroTask, stringify} from '../src/util';
+import {isPromise} from '../src/util/lang';
+
+import {ApplicationInitStatus} from './application_init';
+import {APP_BOOTSTRAP_LISTENER, PLATFORM_INITIALIZER} from './application_tokens';
+import {Console} from './console';
+import {Injectable, InjectionToken, Injector, StaticProvider} from './di';
+import {CompilerFactory, CompilerOptions} from './linker/compiler';
+import {ComponentFactory, ComponentRef} from './linker/component_factory';
+import {ComponentFactoryBoundToModule, ComponentFactoryResolver} from './linker/component_factory_resolver';
+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';
+import {Type} from './type';
+import {NgZone, NoopNgZone} from './zone/ng_zone';
+
+let _devMode: boolean = true;
+let _runModeLocked: boolean = false;
+let _platform: PlatformRef;
+
+export const ALLOW_MULTIPLE_PLATFORMS = new InjectionToken<boolean>('AllowMultipleToken');
+
+/**
+ * Disable Angular's development mode, which turns off assertions and other
+ * checks within the framework.
+ *
+ * One important assertion this disables verifies that a change detection pass
+ * does not result in additional changes to any bindings (also known as
+ * unidirectional data flow).
+ *
+ *
+ */
+export function enableProdMode(): void {
+  if (_runModeLocked) {
+    throw new Error('Cannot enable prod mode after platform setup.');
+  }
+  _devMode = false;
+}
+
+/**
+ * Returns whether Angular is in development mode. After called once,
+ * the value is locked and won't change any more.
+ *
+ * By default, this is true, unless a user calls `enableProdMode` before calling this.
+ *
+ * @experimental APIs related to application bootstrap are currently under review.
+ */
+export function isDevMode(): boolean {
+  _runModeLocked = true;
+  return _devMode;
+}
+
+/**
+ * A token for third-party components that can register themselves with NgProbe.
+ *
+ * @experimental
+ */
+export class NgProbeToken {
+  constructor(public name: string, public token: any) {}
+}
+
+/**
+ * Creates a platform.
+ * Platforms have to be eagerly created via this function.
+ *
+ * @experimental APIs related to application bootstrap are currently under review.
+ */
+export function createPlatform(injector: Injector): PlatformRef {
+  if (_platform && !_platform.destroyed &&
+      !_platform.injector.get(ALLOW_MULTIPLE_PLATFORMS, false)) {
+    throw new Error(
+        'There can be only one platform. Destroy the previous one to create a new one.');
+  }
+  _platform = injector.get(PlatformRef);
+  const inits = injector.get(PLATFORM_INITIALIZER, null);
+  if (inits) inits.forEach((init: any) => init());
+  return _platform;
+}
+
+/**
+ * Creates a factory for a platform
+ *
+ * @experimental APIs related to application bootstrap are currently under review.
+ */
+export function createPlatformFactory(
+    parentPlatformFactory: ((extraProviders?: StaticProvider[]) => PlatformRef) | null,
+    name: string, providers: StaticProvider[] = []): (extraProviders?: StaticProvider[]) =>
+    PlatformRef {
+  const desc = `Platform: ${name}`;
+  const marker = new InjectionToken(desc);
+  return (extraProviders: StaticProvider[] = []) => {
+    let platform = getPlatform();
+    if (!platform || platform.injector.get(ALLOW_MULTIPLE_PLATFORMS, false)) {
+      if (parentPlatformFactory) {
+        parentPlatformFactory(
+            providers.concat(extraProviders).concat({provide: marker, useValue: true}));
+      } else {
+        const injectedProviders: StaticProvider[] =
+            providers.concat(extraProviders).concat({provide: marker, useValue: true});
+        createPlatform(Injector.create({providers: injectedProviders, name: desc}));
+      }
+    }
+    return assertPlatform(marker);
+  };
+}
+
+/**
+ * Checks that there currently is a platform which contains the given token as a provider.
+ *
+ * @experimental APIs related to application bootstrap are currently under review.
+ */
+export function assertPlatform(requiredToken: any): PlatformRef {
+  const platform = getPlatform();
+
+  if (!platform) {
+    throw new Error('No platform exists!');
+  }
+
+  if (!platform.injector.get(requiredToken, null)) {
+    throw new Error(
+        'A platform with a different configuration has been created. Please destroy it first.');
+  }
+
+  return platform;
+}
+
+/**
+ * Destroy the existing platform.
+ *
+ * @experimental APIs related to application bootstrap are currently under review.
+ */
+export function destroyPlatform(): void {
+  if (_platform && !_platform.destroyed) {
+    _platform.destroy();
+  }
+}
+
+/**
+ * Returns the current platform.
+ *
+ * @experimental APIs related to application bootstrap are currently under review.
+ */
+export function getPlatform(): PlatformRef|null {
+  return _platform && !_platform.destroyed ? _platform : null;
+}
+
+/**
+ * Provides additional options to the bootstraping process.
+ *
+ *
+ */
+export interface BootstrapOptions {
+  /**
+   * Optionally specify which `NgZone` should be used.
+   *
+   * - Provide your own `NgZone` instance.
+   * - `zone.js` - Use default `NgZone` which requires `Zone.js`.
+   * - `noop` - Use `NoopNgZone` which does nothing.
+   */
+  ngZone?: NgZone|'zone.js'|'noop';
+}
+
+/**
+ * The Angular platform is the entry point for Angular on a web page. Each page
+ * 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 a platform is created via a platform factory
+ * (e.g. {@link platformBrowser}), or explicitly by calling the {@link createPlatform} function.
+ */
+@Injectable()
+export class PlatformRef {
+  private _modules: NgModuleRef<any>[] = [];
+  private _destroyListeners: Function[] = [];
+  private _destroyed: boolean = false;
+
+  /** @internal */
+  constructor(private _injector: Injector) {}
+
+  /**
+   * Creates an instance of an `@NgModule` for the given platform
+   * for offline compilation.
+   *
+   * @usageNotes
+   * ### Simple Example
+   *
+   * ```typescript
+   * my_module.ts:
+   *
+   * @NgModule({
+   *   imports: [BrowserModule]
+   * })
+   * class MyModule {}
+   *
+   * main.ts:
+   * import {MyModuleNgFactory} from './my_module.ngfactory';
+   * import {platformBrowser} from '@angular/platform-browser';
+   *
+   * let moduleRef = platformBrowser().bootstrapModuleFactory(MyModuleNgFactory);
+   * ```
+   *
+   * @experimental APIs related to application bootstrap are currently under review.
+   */
+  bootstrapModuleFactory<M>(moduleFactory: NgModuleFactory<M>, options?: BootstrapOptions):
+      Promise<NgModuleRef<M>> {
+    // Note: We need to create the NgZone _before_ we instantiate the module,
+    // as instantiating the module creates some providers eagerly.
+    // So we create a mini parent injector that just contains the new NgZone and
+    // pass that as parent to the NgModuleFactory.
+    const ngZoneOption = options ? options.ngZone : undefined;
+    const ngZone = getNgZone(ngZoneOption);
+    const providers: StaticProvider[] = [{provide: NgZone, useValue: ngZone}];
+    // Attention: Don't use ApplicationRef.run here,
+    // as we want to be sure that all possible constructor calls are inside `ngZone.run`!
+    return ngZone.run(() => {
+      const ngZoneInjector = Injector.create(
+          {providers: providers, parent: this.injector, name: moduleFactory.moduleType.name});
+      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 !.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;
+        });
+      });
+    });
+  }
+
+  /**
+   * Creates an instance of an `@NgModule` for a given platform using the given runtime compiler.
+   *
+   * @usageNotes
+   * ### Simple Example
+   *
+   * ```typescript
+   * @NgModule({
+   *   imports: [BrowserModule]
+   * })
+   * class MyModule {}
+   *
+   * let moduleRef = platformBrowser().bootstrapModule(MyModule);
+   * ```
+   *
+   */
+  bootstrapModule<M>(
+      moduleType: Type<M>, compilerOptions: (CompilerOptions&BootstrapOptions)|
+      Array<CompilerOptions&BootstrapOptions> = []): Promise<NgModuleRef<M>> {
+    const compilerFactory: CompilerFactory = this.injector.get(CompilerFactory);
+    const options = optionsReducer({}, compilerOptions);
+    const compiler = compilerFactory.createCompiler([options]);
+
+    return compiler.compileModuleAsync(moduleType)
+        .then((moduleFactory) => this.bootstrapModuleFactory(moduleFactory, options));
+  }
+
+  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 {
+      throw new Error(
+          `The module ${stringify(moduleRef.instance.constructor)} was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. ` +
+          `Please define one of these.`);
+    }
+    this._modules.push(moduleRef);
+  }
+
+  /**
+   * Register a listener to be called when the platform is disposed.
+   */
+  onDestroy(callback: () => void): void { this._destroyListeners.push(callback); }
+
+  /**
+   * Retrieve the platform {@link Injector}, which is the parent injector for
+   * every Angular application on the page and provides singleton providers.
+   */
+  get injector(): Injector { return this._injector; }
+
+  /**
+   * Destroy the Angular platform and all Angular applications on the page.
+   */
+  destroy() {
+    if (this._destroyed) {
+      throw new Error('The platform has already been destroyed!');
+    }
+    this._modules.slice().forEach(module => module.destroy());
+    this._destroyListeners.forEach(listener => listener());
+    this._destroyed = true;
+  }
+
+  get destroyed() { return this._destroyed; }
+}
+
+function getNgZone(ngZoneOption?: NgZone | 'zone.js' | 'noop'): NgZone {
+  let ngZone: NgZone;
+
+  if (ngZoneOption === 'noop') {
+    ngZone = new NoopNgZone();
+  } else {
+    ngZone = (ngZoneOption === 'zone.js' ? undefined : ngZoneOption) ||
+        new NgZone({enableLongStackTrace: isDevMode()});
+  }
+  return ngZone;
+}
+
+function _callAndReportToErrorHandler(
+    errorHandler: ErrorHandler, ngZone: NgZone, callback: () => any): any {
+  try {
+    const result = callback();
+    if (isPromise(result)) {
+      return result.catch((e: any) => {
+        ngZone.runOutsideAngular(() => errorHandler.handleError(e));
+        // rethrow as the exception handler might not do it
+        throw e;
+      });
+    }
+
+    return result;
+  } catch (e) {
+    ngZone.runOutsideAngular(() => errorHandler.handleError(e));
+    // rethrow as the exception handler might not do it
+    throw e;
+  }
+}
+
+function optionsReducer<T extends Object>(dst: any, objs: T | T[]): T {
+  if (Array.isArray(objs)) {
+    dst = objs.reduce(optionsReducer, dst);
+  } else {
+    dst = {...dst, ...(objs as any)};
+  }
+  return dst;
+}
+
+/**
+ * A reference to an Angular application running on a page.
+ */
+@Injectable()
+export class ApplicationRef {
+  /** @internal */
+  static _tickScope: WtfScopeFn = wtfCreateScope('ApplicationRef#tick()');
+  private _bootstrapListeners: ((compRef: ComponentRef<any>) => void)[] = [];
+  private _views: InternalViewRef[] = [];
+  private _runningTick: boolean = false;
+  private _enforceNoNewChanges: boolean = false;
+  private _stable = true;
+
+  /**
+   * Get a list of component types registered to this application.
+   * This list is populated even before the component is created.
+   */
+  public readonly componentTypes: Type<any>[] = [];
+
+  /**
+   * Get a list of components registered to this application.
+   */
+  public readonly components: ComponentRef<any>[] = [];
+
+  /**
+   * Returns an Observable that indicates when the application is stable or unstable.
+   */
+  // TODO(issue/24571): remove '!'.
+  public readonly isStable !: Observable<boolean>;
+
+  /** @internal */
+  constructor(
+      private _zone: NgZone, private _console: Console, private _injector: Injector,
+      private _exceptionHandler: ErrorHandler,
+      private _componentFactoryResolver: ComponentFactoryResolver,
+      private _initStatus: ApplicationInitStatus) {
+    this._enforceNoNewChanges = isDevMode();
+
+    this._zone.onMicrotaskEmpty.subscribe(
+        {next: () => { this._zone.run(() => { this.tick(); }); }});
+
+    const isCurrentlyStable = new Observable<boolean>((observer: Observer<boolean>) => {
+      this._stable = this._zone.isStable && !this._zone.hasPendingMacrotasks &&
+          !this._zone.hasPendingMicrotasks;
+      this._zone.runOutsideAngular(() => {
+        observer.next(this._stable);
+        observer.complete();
+      });
+    });
+
+    const isStable = new Observable<boolean>((observer: Observer<boolean>) => {
+      // Create the subscription to onStable outside the Angular Zone so that
+      // the callback is run outside the Angular Zone.
+      let stableSub: Subscription;
+      this._zone.runOutsideAngular(() => {
+        stableSub = this._zone.onStable.subscribe(() => {
+          NgZone.assertNotInAngularZone();
+
+          // Check whether there are no pending macro/micro tasks in the next tick
+          // to allow for NgZone to update the state.
+          scheduleMicroTask(() => {
+            if (!this._stable && !this._zone.hasPendingMacrotasks &&
+                !this._zone.hasPendingMicrotasks) {
+              this._stable = true;
+              observer.next(true);
+            }
+          });
+        });
+      });
+
+      const unstableSub: Subscription = this._zone.onUnstable.subscribe(() => {
+        NgZone.assertInAngularZone();
+        if (this._stable) {
+          this._stable = false;
+          this._zone.runOutsideAngular(() => { observer.next(false); });
+        }
+      });
+
+      return () => {
+        stableSub.unsubscribe();
+        unstableSub.unsubscribe();
+      };
+    });
+
+    (this as{isStable: Observable<boolean>}).isStable =
+        merge(isCurrentlyStable, isStable.pipe(share()));
+  }
+
+  /**
+   * Bootstrap a new component at the root level of the application.
+   *
+   * @usageNotes
+   * ### Bootstrap process
+   *
+   * When bootstrapping a new root component into an application, Angular mounts the
+   * 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'}
+   */
+  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.');
+    }
+    let componentFactory: ComponentFactory<C>;
+    if (componentOrFactory instanceof ComponentFactory) {
+      componentFactory = componentOrFactory;
+    } else {
+      componentFactory =
+          this._componentFactoryResolver.resolveComponentFactory(componentOrFactory) !;
+    }
+    this.componentTypes.push(componentFactory.componentType);
+
+    // Create a factory associated with the current module if it's not bound to some other
+    const ngModule = componentFactory instanceof ComponentFactoryBoundToModule ?
+        null :
+        this._injector.get(NgModuleRef);
+    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);
+    if (testability) {
+      compRef.injector.get(TestabilityRegistry)
+          .registerApplication(compRef.location.nativeElement, testability);
+    }
+
+    this._loadComponent(compRef);
+    if (isDevMode()) {
+      this._console.log(
+          `Angular is running in the development mode. Call enableProdMode() to enable the production mode.`);
+    }
+    return compRef;
+  }
+
+  /**
+   * Invoke this method to explicitly process change detection and its side-effects.
+   *
+   * In development mode, `tick()` also performs a second change detection cycle to ensure that no
+   * further changes are detected. If additional changes are picked up during this second cycle,
+   * bindings in the app have side-effects that cannot be resolved in a single change detection
+   * pass.
+   * In this case, Angular throws an error, since an Angular application can only have one change
+   * detection pass during which all change detection must complete.
+   */
+  tick(): void {
+    if (this._runningTick) {
+      throw new Error('ApplicationRef.tick is called recursively');
+    }
+
+    const scope = ApplicationRef._tickScope();
+    try {
+      this._runningTick = true;
+      this._views.forEach((view) => view.detectChanges());
+      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);
+    }
+  }
+
+  /**
+   * Attaches a view so that it will be dirty checked.
+   * The view will be automatically detached when it is destroyed.
+   * This will throw if the view is already attached to a ViewContainer.
+   */
+  attachView(viewRef: ViewRef): void {
+    const view = (viewRef as InternalViewRef);
+    this._views.push(view);
+    view.attachToAppRef(this);
+  }
+
+  /**
+   * Detaches a view from dirty checking again.
+   */
+  detachView(viewRef: ViewRef): void {
+    const view = (viewRef as InternalViewRef);
+    remove(this._views, view);
+    view.detachFromAppRef();
+  }
+
+  private _loadComponent(componentRef: ComponentRef<any>): void {
+    this.attachView(componentRef.hostView);
+    this.tick();
+    this.components.push(componentRef);
+    // Get the listeners lazily to prevent DI cycles.
+    const listeners =
+        this._injector.get(APP_BOOTSTRAP_LISTENER, []).concat(this._bootstrapListeners);
+    listeners.forEach((listener) => listener(componentRef));
+  }
+
+  private _unloadComponent(componentRef: ComponentRef<any>): void {
+    this.detachView(componentRef.hostView);
+    remove(this.components, componentRef);
+  }
+
+  /** @internal */
+  ngOnDestroy() {
+    // TODO(alxhub): Dispose of the NgZone.
+    this._views.slice().forEach((view) => view.destroy());
+  }
+
+  /**
+   * Returns the number of attached views.
+   */
+  get viewCount() { return this._views.length; }
+}
+
+function remove<T>(list: T[], el: T): void {
+  const index = list.indexOf(el);
+  if (index > -1) {
+    list.splice(index, 1);
+  }
+}
diff --git a/packages/core/src/application_tokens.ts b/packages/core/src/application_tokens.ts
new file mode 100644
index 000000000000..71467c16b887
--- /dev/null
+++ b/packages/core/src/application_tokens.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 './di';
+import {ComponentRef} from './linker/component_factory';
+
+
+/**
+ * A DI Token representing a unique string id assigned to the application by Angular and used
+ * primarily for prefixing application attributes and CSS styles when
+ * {@link ViewEncapsulation#Emulated ViewEncapsulation.Emulated} is being used.
+ *
+ * If you need to avoid randomly generated value to be used as an application id, you can provide
+ * a custom value via a DI provider <!-- TODO: provider --> configuring the root {@link Injector}
+ * using this token.
+ * @experimental
+ */
+export const APP_ID = new InjectionToken<string>('AppId');
+
+export function _appIdRandomProviderFactory() {
+  return `${_randomChar()}${_randomChar()}${_randomChar()}`;
+}
+
+/**
+ * Providers that will generate a random APP_ID_TOKEN.
+ * @experimental
+ */
+export const APP_ID_RANDOM_PROVIDER = {
+  provide: APP_ID,
+  useFactory: _appIdRandomProviderFactory,
+  deps: <any[]>[],
+};
+
+function _randomChar(): string {
+  return String.fromCharCode(97 + Math.floor(Math.random() * 25));
+}
+
+/**
+ * A function that will be executed when a platform is initialized.
+ * @experimental
+ */
+export const PLATFORM_INITIALIZER = new InjectionToken<Array<() => void>>('Platform Initializer');
+
+/**
+ * A token that indicates an opaque platform id.
+ * @experimental
+ */
+export const PLATFORM_ID = new InjectionToken<Object>('Platform ID');
+
+/**
+ * All callbacks provided via this token will be called for every component that is bootstrapped.
+ * Signature of the callback:
+ *
+ * `(componentRef: ComponentRef) => void`.
+ *
+ * @experimental
+ */
+export const APP_BOOTSTRAP_LISTENER =
+    new InjectionToken<Array<(compRef: ComponentRef<any>) => void>>('appBootstrapListener');
+
+/**
+ * A token which indicates the root directory of the application
+ * @experimental
+ */
+export const PACKAGE_ROOT_URL = new InjectionToken<string>('Application Packages Root URL');
diff --git a/packages/core/src/change_detection.ts b/packages/core/src/change_detection.ts
new file mode 100644
index 000000000000..8fd31eb47baa
--- /dev/null
+++ b/packages/core/src/change_detection.ts
@@ -0,0 +1,15 @@
+/**
+ * @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
+ * Change detection enables data binding in Angular.
+ */
+
+export {ChangeDetectionStrategy, ChangeDetectorRef, CollectionChangeRecord, DefaultIterableDiffer, IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, IterableDiffers, KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDifferFactory, KeyValueDiffers, NgIterable, PipeTransform, SimpleChange, SimpleChanges, TrackByFunction, WrappedValue} from './change_detection/change_detection';
diff --git a/packages/core/src/change_detection/change_detection.ts b/packages/core/src/change_detection/change_detection.ts
new file mode 100644
index 000000000000..f8dc1f18acfe
--- /dev/null
+++ b/packages/core/src/change_detection/change_detection.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 {DefaultIterableDifferFactory} from './differs/default_iterable_differ';
+import {DefaultKeyValueDifferFactory} from './differs/default_keyvalue_differ';
+import {IterableDifferFactory, IterableDiffers} from './differs/iterable_differs';
+import {KeyValueDifferFactory, KeyValueDiffers} from './differs/keyvalue_differs';
+
+export {SimpleChanges} from '../metadata/lifecycle_hooks';
+export {SimpleChange, WrappedValue, devModeEqual} from './change_detection_util';
+export {ChangeDetectorRef} from './change_detector_ref';
+export {ChangeDetectionStrategy, ChangeDetectorStatus, isDefaultChangeDetectionStrategy} from './constants';
+export {DefaultIterableDifferFactory} from './differs/default_iterable_differ';
+export {DefaultIterableDiffer} from './differs/default_iterable_differ';
+export {DefaultKeyValueDifferFactory} from './differs/default_keyvalue_differ';
+export {CollectionChangeRecord, IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, IterableDiffers, NgIterable, TrackByFunction} from './differs/iterable_differs';
+export {KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDifferFactory, KeyValueDiffers} from './differs/keyvalue_differs';
+export {PipeTransform} from './pipe_transform';
+
+
+
+/**
+ * Structural diffing for `Object`s and `Map`s.
+ */
+const keyValDiff: KeyValueDifferFactory[] = [new DefaultKeyValueDifferFactory()];
+
+/**
+ * Structural diffing for `Iterable` types such as `Array`s.
+ */
+const iterableDiff: IterableDifferFactory[] = [new DefaultIterableDifferFactory()];
+
+export const defaultIterableDiffers = new IterableDiffers(iterableDiff);
+
+export const defaultKeyValueDiffers = new KeyValueDiffers(keyValDiff);
diff --git a/packages/core/src/change_detection/change_detection_util.ts b/packages/core/src/change_detection/change_detection_util.ts
new file mode 100644
index 000000000000..c0f179efbb69
--- /dev/null
+++ b/packages/core/src/change_detection/change_detection_util.ts
@@ -0,0 +1,115 @@
+/**
+ * @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 {getSymbolIterator, looseIdentical} from '../util';
+
+export function devModeEqual(a: any, b: any): boolean {
+  const isListLikeIterableA = isListLikeIterable(a);
+  const isListLikeIterableB = isListLikeIterable(b);
+  if (isListLikeIterableA && isListLikeIterableB) {
+    return areIterablesEqual(a, b, devModeEqual);
+  } else {
+    const isAObject = a && (typeof a === 'object' || typeof a === 'function');
+    const isBObject = b && (typeof b === 'object' || typeof b === 'function');
+    if (!isListLikeIterableA && isAObject && !isListLikeIterableB && isBObject) {
+      return true;
+    } else {
+      return looseIdentical(a, b);
+    }
+  }
+}
+
+/**
+ * Indicates that the result of a {@link Pipe} transformation has changed even though the
+ * reference has not changed.
+ *
+ * Wrapped values are unwrapped automatically during the change detection, and the unwrapped value
+ * is stored.
+ *
+ * Example:
+ *
+ * ```
+ * if (this._latestValue === this._latestReturnedValue) {
+ *    return this._latestReturnedValue;
+ *  } else {
+ *    this._latestReturnedValue = this._latestValue;
+ *    return WrappedValue.wrap(this._latestValue); // this will force update
+ *  }
+ * ```
+ *
+ */
+export class WrappedValue {
+  /** @deprecated from 5.3, use `unwrap()` instead - will switch to protected */
+  wrapped: any;
+
+  constructor(value: any) { this.wrapped = value; }
+
+  /** Creates a wrapped value. */
+  static wrap(value: any): WrappedValue { return new WrappedValue(value); }
+
+  /**
+   * Returns the underlying value of a wrapped value.
+   * Returns the given `value` when it is not wrapped.
+   **/
+  static unwrap(value: any): any { return WrappedValue.isWrapped(value) ? value.wrapped : value; }
+
+  /** Returns true if `value` is a wrapped value. */
+  static isWrapped(value: any): value is WrappedValue { return value instanceof WrappedValue; }
+}
+
+/**
+ * Represents a basic change from a previous to a new value.
+ *
+ */
+export class SimpleChange {
+  constructor(public previousValue: any, public currentValue: any, public firstChange: boolean) {}
+
+  /**
+   * Check whether the new value is the first value assigned.
+   */
+  isFirstChange(): boolean { return this.firstChange; }
+}
+
+export function isListLikeIterable(obj: any): boolean {
+  if (!isJsObject(obj)) return false;
+  return Array.isArray(obj) ||
+      (!(obj instanceof Map) &&      // JS Map are iterables but return entries as [k, v]
+       getSymbolIterator() in obj);  // JS Iterable have a Symbol.iterator prop
+}
+
+export function areIterablesEqual(
+    a: any, b: any, comparator: (a: any, b: any) => boolean): boolean {
+  const iterator1 = a[getSymbolIterator()]();
+  const iterator2 = b[getSymbolIterator()]();
+
+  while (true) {
+    const item1 = iterator1.next();
+    const item2 = iterator2.next();
+    if (item1.done && item2.done) return true;
+    if (item1.done || item2.done) return false;
+    if (!comparator(item1.value, item2.value)) return false;
+  }
+}
+
+export function iterateListLike(obj: any, fn: (p: any) => any) {
+  if (Array.isArray(obj)) {
+    for (let i = 0; i < obj.length; i++) {
+      fn(obj[i]);
+    }
+  } else {
+    const iterator = obj[getSymbolIterator()]();
+    let item: any;
+    while (!((item = iterator.next()).done)) {
+      fn(item.value);
+    }
+  }
+}
+
+export function isJsObject(o: any): boolean {
+  return o !== null && (typeof o === 'function' || typeof o === 'object');
+}
diff --git a/packages/core/src/change_detection/change_detector_ref.ts b/packages/core/src/change_detection/change_detector_ref.ts
new file mode 100644
index 000000000000..49cdaf425d4b
--- /dev/null
+++ b/packages/core/src/change_detection/change_detector_ref.ts
@@ -0,0 +1,106 @@
+/**
+ * @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
+ */
+
+/**
+ * Base class for Angular Views, provides change detection functionality.
+ * A change-detection tree collects all views that are to be checked for changes.
+ * Use the methods to add and remove views from the tree, initiate change-detection,
+ * and explicitly mark views as _dirty_, meaning that they have changed and need to be rerendered.
+ *
+ * @usageNotes
+ *
+ * The following examples demonstrate how to modify default change-detection behavior
+ * to perform explicit detection when needed.
+ *
+ * ### Use `markForCheck()` with `CheckOnce` strategy
+ *
+ * The following example sets the `OnPush` change-detection strategy for a component
+ * (`CheckOnce`, rather than the default `CheckAlways`), then forces a second check
+ * after an interval. See [live demo](http://plnkr.co/edit/GC512b?p=preview).
+ *
+ * <code-example path="core/ts/change_detect/change-detection.ts"
+ * region="mark-for-check"></code-example>
+ *
+ * ### Detach change detector to limit how often check occurs
+ *
+ * The following example defines a component with a large list of read-only data
+ * that is expected to change constantly, many times per second.
+ * To improve performance, we want to check and update the list
+ * less often than the changes actually occur. To do that, we detach
+ * the component's change detector and perform an explicit local check every five seconds.
+ *
+ * <code-example path="core/ts/change_detect/change-detection.ts" region="detach"></code-example>
+ *
+ *
+ * ### Reattaching a detached component
+ *
+ * The following example creates a component displaying live data.
+ * The component detaches its change detector from the main change detector tree
+ * when the `live` property is set to false, and reattaches it when the property
+ * becomes true.
+ *
+ * <code-example path="core/ts/change_detect/change-detection.ts" region="detach"></code-example>
+ *
+ */
+export abstract class ChangeDetectorRef {
+  /**
+   * When a view uses the {@link ChangeDetectionStrategy#OnPush OnPush} (checkOnce)
+   * change detection strategy, explicitly marks the view as changed so that
+   * it can be checked again.
+   *
+   * Components are normally marked as dirty (in need of rerendering) when inputs
+   * have changed or events have fired in the view. Call this method to ensure that
+   * a component is checked even if these triggers have not occured.
+   *
+   * <!-- TODO: Add a link to a chapter on OnPush components -->
+   *
+   */
+  abstract markForCheck(): void;
+
+  /**
+   * Detaches this view from the change-detection tree.
+   * A detached view is  not checked until it is reattached.
+   * Use in combination with `detectChanges()` to implement local change detection checks.
+   *
+   * Detached views are not checked during change detection runs until they are
+   * re-attached, even if they are marked as dirty.
+   *
+   * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
+   * <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
+   *
+   */
+  abstract detach(): void;
+
+  /**
+   * Checks this view and its children. Use in combination with {@link ChangeDetectorRef#detach
+   * detach}
+   * to implement local change detection checks.
+   *
+   * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
+   * <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
+   *
+   */
+  abstract detectChanges(): void;
+
+  /**
+   * Checks the change detector and its children, and throws if any changes are detected.
+   *
+   * Use in development mode to verify that running change detection doesn't introduce
+   * other changes.
+   */
+  abstract checkNoChanges(): void;
+
+  /**
+   * Re-attaches the previously detached view to the change detection tree.
+   * Views are attached to the tree by default.
+   *
+   * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
+   *
+   */
+  abstract reattach(): void;
+}
diff --git a/packages/core/src/change_detection/constants.ts b/packages/core/src/change_detection/constants.ts
new file mode 100644
index 000000000000..3713b0f5a563
--- /dev/null
+++ b/packages/core/src/change_detection/constants.ts
@@ -0,0 +1,83 @@
+/**
+ * @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
+ */
+
+
+/**
+ * The strategy that the default change detector uses to detect changes.
+ * When set, takes effect the next time change detection is triggered.
+ *
+ */
+export enum ChangeDetectionStrategy {
+  /**
+   * Use the `CheckOnce` strategy, meaning that automatic change detection is deactivated
+   * until reactivated by setting the strategy to `Default` (`CheckAlways`).
+   * Change detection can still be explictly invoked.
+   */
+  OnPush = 0,
+
+  /**
+   * Use the default `CheckAlways` strategy, in which change detection is automatic until
+   * explicitly deactivated.
+   */
+  Default = 1,
+}
+
+/**
+ * Defines the possible states of the default change detector.
+ * @see `ChangeDetectorRef`
+ */
+export enum ChangeDetectorStatus {
+  /**
+   * A state in which, after calling `detectChanges()`, the change detector
+   * state becomes `Checked`, and must be explicitly invoked or reactivated.
+   */
+  CheckOnce,
+
+  /**
+   * A state in which change detection is skipped until the change detector mode
+   * becomes `CheckOnce`.
+   */
+  Checked,
+
+  /**
+   * A state in which change detection continues automatically until explictly
+   * deactivated.
+   */
+  CheckAlways,
+
+  /**
+   * A state in which a change detector sub tree is not a part of the main tree and
+   * should be skipped.
+   */
+  Detached,
+
+  /**
+   * Indicates that the change detector encountered an error checking a binding
+   * or calling a directive lifecycle method and is now in an inconsistent state. Change
+   * detectors in this state do not detect changes.
+   */
+  Errored,
+
+  /**
+   * Indicates that the change detector has been destroyed.
+   */
+  Destroyed,
+}
+
+/**
+ * Reports whether a given strategy is currently the default for change detection.
+ * @param changeDetectionStrategy The strategy to check.
+ * @returns True if the given strategy is the current default, false otherwise.
+ * @see `ChangeDetectorStatus`
+ * @see `ChangeDetectorRef` 
+ */
+export function isDefaultChangeDetectionStrategy(changeDetectionStrategy: ChangeDetectionStrategy):
+    boolean {
+  return changeDetectionStrategy == null ||
+      changeDetectionStrategy === ChangeDetectionStrategy.Default;
+}
diff --git a/packages/core/src/change_detection/differs/default_iterable_differ.ts b/packages/core/src/change_detection/differs/default_iterable_differ.ts
new file mode 100644
index 000000000000..bf67045dc218
--- /dev/null
+++ b/packages/core/src/change_detection/differs/default_iterable_differ.ts
@@ -0,0 +1,718 @@
+/**
+ * @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 {looseIdentical, stringify} from '../../util';
+import {isListLikeIterable, iterateListLike} from '../change_detection_util';
+import {IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, NgIterable, TrackByFunction} from './iterable_differs';
+
+
+export class DefaultIterableDifferFactory implements IterableDifferFactory {
+  constructor() {}
+  supports(obj: Object|null|undefined): boolean { return isListLikeIterable(obj); }
+
+  create<V>(trackByFn?: TrackByFunction<V>): DefaultIterableDiffer<V> {
+    return new DefaultIterableDiffer<V>(trackByFn);
+  }
+}
+
+const trackByIdentity = (index: number, item: any) => item;
+
+/**
+ * @deprecated v4.0.0 - Should not be part of public API.
+ */
+export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChanges<V> {
+  public readonly length: number = 0;
+  // TODO(issue/24571): remove '!'.
+  public readonly collection !: V[] | Iterable<V>| null;
+  // Keeps track of the used records at any point in time (during & across `_check()` calls)
+  private _linkedRecords: _DuplicateMap<V>|null = null;
+  // Keeps track of the removed records at any point in time during `_check()` calls.
+  private _unlinkedRecords: _DuplicateMap<V>|null = null;
+  private _previousItHead: IterableChangeRecord_<V>|null = null;
+  private _itHead: IterableChangeRecord_<V>|null = null;
+  private _itTail: IterableChangeRecord_<V>|null = null;
+  private _additionsHead: IterableChangeRecord_<V>|null = null;
+  private _additionsTail: IterableChangeRecord_<V>|null = null;
+  private _movesHead: IterableChangeRecord_<V>|null = null;
+  private _movesTail: IterableChangeRecord_<V>|null = null;
+  private _removalsHead: IterableChangeRecord_<V>|null = null;
+  private _removalsTail: IterableChangeRecord_<V>|null = null;
+  // Keeps track of records where custom track by is the same, but item identity has changed
+  private _identityChangesHead: IterableChangeRecord_<V>|null = null;
+  private _identityChangesTail: IterableChangeRecord_<V>|null = null;
+  private _trackByFn: TrackByFunction<V>;
+
+  constructor(trackByFn?: TrackByFunction<V>) { this._trackByFn = trackByFn || trackByIdentity; }
+
+  forEachItem(fn: (record: IterableChangeRecord_<V>) => void) {
+    let record: IterableChangeRecord_<V>|null;
+    for (record = this._itHead; record !== null; record = record._next) {
+      fn(record);
+    }
+  }
+
+  forEachOperation(
+      fn: (item: IterableChangeRecord<V>, previousIndex: number|null, currentIndex: number|null) =>
+          void) {
+    let nextIt = this._itHead;
+    let nextRemove = this._removalsHead;
+    let addRemoveOffset = 0;
+    let moveOffsets: number[]|null = null;
+    while (nextIt || nextRemove) {
+      // Figure out which is the next record to process
+      // Order: remove, add, move
+      const record: IterableChangeRecord<V> = !nextRemove ||
+              nextIt &&
+                  nextIt.currentIndex ! <
+                      getPreviousIndex(nextRemove, addRemoveOffset, moveOffsets) ?
+          nextIt ! :
+          nextRemove;
+      const adjPreviousIndex = getPreviousIndex(record, addRemoveOffset, moveOffsets);
+      const currentIndex = record.currentIndex;
+
+      // consume the item, and adjust the addRemoveOffset and update moveDistance if necessary
+      if (record === nextRemove) {
+        addRemoveOffset--;
+        nextRemove = nextRemove._nextRemoved;
+      } else {
+        nextIt = nextIt !._next;
+        if (record.previousIndex == null) {
+          addRemoveOffset++;
+        } else {
+          // INVARIANT:  currentIndex < previousIndex
+          if (!moveOffsets) moveOffsets = [];
+          const localMovePreviousIndex = adjPreviousIndex - addRemoveOffset;
+          const localCurrentIndex = currentIndex ! - addRemoveOffset;
+          if (localMovePreviousIndex != localCurrentIndex) {
+            for (let i = 0; i < localMovePreviousIndex; i++) {
+              const offset = i < moveOffsets.length ? moveOffsets[i] : (moveOffsets[i] = 0);
+              const index = offset + i;
+              if (localCurrentIndex <= index && index < localMovePreviousIndex) {
+                moveOffsets[i] = offset + 1;
+              }
+            }
+            const previousIndex = record.previousIndex;
+            moveOffsets[previousIndex] = localCurrentIndex - localMovePreviousIndex;
+          }
+        }
+      }
+
+      if (adjPreviousIndex !== currentIndex) {
+        fn(record, adjPreviousIndex, currentIndex);
+      }
+    }
+  }
+
+  forEachPreviousItem(fn: (record: IterableChangeRecord_<V>) => void) {
+    let record: IterableChangeRecord_<V>|null;
+    for (record = this._previousItHead; record !== null; record = record._nextPrevious) {
+      fn(record);
+    }
+  }
+
+  forEachAddedItem(fn: (record: IterableChangeRecord_<V>) => void) {
+    let record: IterableChangeRecord_<V>|null;
+    for (record = this._additionsHead; record !== null; record = record._nextAdded) {
+      fn(record);
+    }
+  }
+
+  forEachMovedItem(fn: (record: IterableChangeRecord_<V>) => void) {
+    let record: IterableChangeRecord_<V>|null;
+    for (record = this._movesHead; record !== null; record = record._nextMoved) {
+      fn(record);
+    }
+  }
+
+  forEachRemovedItem(fn: (record: IterableChangeRecord_<V>) => void) {
+    let record: IterableChangeRecord_<V>|null;
+    for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
+      fn(record);
+    }
+  }
+
+  forEachIdentityChange(fn: (record: IterableChangeRecord_<V>) => void) {
+    let record: IterableChangeRecord_<V>|null;
+    for (record = this._identityChangesHead; record !== null; record = record._nextIdentityChange) {
+      fn(record);
+    }
+  }
+
+  diff(collection: NgIterable<V>): DefaultIterableDiffer<V>|null {
+    if (collection == null) collection = [];
+    if (!isListLikeIterable(collection)) {
+      throw new Error(
+          `Error trying to diff '${stringify(collection)}'. Only arrays and iterables are allowed`);
+    }
+
+    if (this.check(collection)) {
+      return this;
+    } else {
+      return null;
+    }
+  }
+
+  onDestroy() {}
+
+  check(collection: NgIterable<V>): boolean {
+    this._reset();
+
+    let record: IterableChangeRecord_<V>|null = this._itHead;
+    let mayBeDirty: boolean = false;
+    let index: number;
+    let item: V;
+    let itemTrackBy: any;
+    if (Array.isArray(collection)) {
+      (this as{length: number}).length = collection.length;
+
+      for (let index = 0; index < this.length; index++) {
+        item = collection[index];
+        itemTrackBy = this._trackByFn(index, item);
+        if (record === null || !looseIdentical(record.trackById, itemTrackBy)) {
+          record = this._mismatch(record, item, itemTrackBy, index);
+          mayBeDirty = true;
+        } else {
+          if (mayBeDirty) {
+            // TODO(misko): can we limit this to duplicates only?
+            record = this._verifyReinsertion(record, item, itemTrackBy, index);
+          }
+          if (!looseIdentical(record.item, item)) this._addIdentityChange(record, item);
+        }
+
+        record = record._next;
+      }
+    } else {
+      index = 0;
+      iterateListLike(collection, (item: V) => {
+        itemTrackBy = this._trackByFn(index, item);
+        if (record === null || !looseIdentical(record.trackById, itemTrackBy)) {
+          record = this._mismatch(record, item, itemTrackBy, index);
+          mayBeDirty = true;
+        } else {
+          if (mayBeDirty) {
+            // TODO(misko): can we limit this to duplicates only?
+            record = this._verifyReinsertion(record, item, itemTrackBy, index);
+          }
+          if (!looseIdentical(record.item, item)) this._addIdentityChange(record, item);
+        }
+        record = record._next;
+        index++;
+      });
+      (this as{length: number}).length = index;
+    }
+
+    this._truncate(record);
+    (this as{collection: V[] | Iterable<V>}).collection = collection;
+    return this.isDirty;
+  }
+
+  /* CollectionChanges is considered dirty if it has any additions, moves, removals, or identity
+   * changes.
+   */
+  get isDirty(): boolean {
+    return this._additionsHead !== null || this._movesHead !== null ||
+        this._removalsHead !== null || this._identityChangesHead !== null;
+  }
+
+  /**
+   * Reset the state of the change objects to show no changes. This means set previousKey to
+   * currentKey, and clear all of the queues (additions, moves, removals).
+   * Set the previousIndexes of moved and added items to their currentIndexes
+   * Reset the list of additions, moves and removals
+   *
+   * @internal
+   */
+  _reset() {
+    if (this.isDirty) {
+      let record: IterableChangeRecord_<V>|null;
+      let nextRecord: IterableChangeRecord_<V>|null;
+
+      for (record = this._previousItHead = this._itHead; record !== null; record = record._next) {
+        record._nextPrevious = record._next;
+      }
+
+      for (record = this._additionsHead; record !== null; record = record._nextAdded) {
+        record.previousIndex = record.currentIndex;
+      }
+      this._additionsHead = this._additionsTail = null;
+
+      for (record = this._movesHead; record !== null; record = nextRecord) {
+        record.previousIndex = record.currentIndex;
+        nextRecord = record._nextMoved;
+      }
+      this._movesHead = this._movesTail = null;
+      this._removalsHead = this._removalsTail = null;
+      this._identityChangesHead = this._identityChangesTail = null;
+
+      // TODO(vicb): when assert gets supported
+      // assert(!this.isDirty);
+    }
+  }
+
+  /**
+   * This is the core function which handles differences between collections.
+   *
+   * - `record` is the record which we saw at this position last time. If null then it is a new
+   *   item.
+   * - `item` is the current item in the collection
+   * - `index` is the position of the item in the collection
+   *
+   * @internal
+   */
+  _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>|null;
+
+    if (record === null) {
+      previousRecord = this._itTail;
+    } else {
+      previousRecord = record._prev;
+      // Remove the record from the collection since we know it does not match the item.
+      this._remove(record);
+    }
+
+    // Attempt to see if we have seen the item before.
+    record = this._linkedRecords === null ? null : this._linkedRecords.get(itemTrackBy, index);
+    if (record !== null) {
+      // We have seen this before, we need to move it forward in the collection.
+      // But first we need to check if identity changed, so we can update in view if necessary
+      if (!looseIdentical(record.item, item)) this._addIdentityChange(record, item);
+
+      this._moveAfter(record, previousRecord, index);
+    } else {
+      // Never seen it, check evicted list.
+      record = this._unlinkedRecords === null ? null : this._unlinkedRecords.get(itemTrackBy, null);
+      if (record !== null) {
+        // It is an item which we have evicted earlier: reinsert it back into the list.
+        // But first we need to check if identity changed, so we can update in view if necessary
+        if (!looseIdentical(record.item, item)) this._addIdentityChange(record, item);
+
+        this._reinsertAfter(record, previousRecord, index);
+      } else {
+        // It is a new item: add it.
+        record =
+            this._addAfter(new IterableChangeRecord_<V>(item, itemTrackBy), previousRecord, index);
+      }
+    }
+    return record;
+  }
+
+  /**
+   * This check is only needed if an array contains duplicates. (Short circuit of nothing dirty)
+   *
+   * Use case: `[a, a]` => `[b, a, a]`
+   *
+   * If we did not have this check then the insertion of `b` would:
+   *   1) evict first `a`
+   *   2) insert `b` at `0` index.
+   *   3) leave `a` at index `1` as is. <-- this is wrong!
+   *   3) reinsert `a` at index 2. <-- this is wrong!
+   *
+   * The correct behavior is:
+   *   1) evict first `a`
+   *   2) insert `b` at `0` index.
+   *   3) reinsert `a` at index 1.
+   *   3) move `a` at from `1` to `2`.
+   *
+   *
+   * Double check that we have not evicted a duplicate item. We need to check if the item type may
+   * have already been removed:
+   * The insertion of b will evict the first 'a'. If we don't reinsert it now it will be reinserted
+   * at the end. Which will show up as the two 'a's switching position. This is incorrect, since a
+   * better way to think of it is as insert of 'b' rather then switch 'a' with 'b' and then add 'a'
+   * at the end.
+   *
+   * @internal
+   */
+  _verifyReinsertion(record: IterableChangeRecord_<V>, item: V, itemTrackBy: any, index: number):
+      IterableChangeRecord_<V> {
+    let reinsertRecord: IterableChangeRecord_<V>|null =
+        this._unlinkedRecords === null ? null : this._unlinkedRecords.get(itemTrackBy, null);
+    if (reinsertRecord !== null) {
+      record = this._reinsertAfter(reinsertRecord, record._prev !, index);
+    } else if (record.currentIndex != index) {
+      record.currentIndex = index;
+      this._addToMoves(record, index);
+    }
+    return record;
+  }
+
+  /**
+   * Get rid of any excess {@link IterableChangeRecord_}s from the previous collection
+   *
+   * - `record` The first excess {@link IterableChangeRecord_}.
+   *
+   * @internal
+   */
+  _truncate(record: IterableChangeRecord_<V>|null) {
+    // Anything after that needs to be removed;
+    while (record !== null) {
+      const nextRecord: IterableChangeRecord_<V>|null = record._next;
+      this._addToRemovals(this._unlink(record));
+      record = nextRecord;
+    }
+    if (this._unlinkedRecords !== null) {
+      this._unlinkedRecords.clear();
+    }
+
+    if (this._additionsTail !== null) {
+      this._additionsTail._nextAdded = null;
+    }
+    if (this._movesTail !== null) {
+      this._movesTail._nextMoved = null;
+    }
+    if (this._itTail !== null) {
+      this._itTail._next = null;
+    }
+    if (this._removalsTail !== null) {
+      this._removalsTail._nextRemoved = null;
+    }
+    if (this._identityChangesTail !== null) {
+      this._identityChangesTail._nextIdentityChange = null;
+    }
+  }
+
+  /** @internal */
+  _reinsertAfter(
+      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
+      index: number): IterableChangeRecord_<V> {
+    if (this._unlinkedRecords !== null) {
+      this._unlinkedRecords.remove(record);
+    }
+    const prev = record._prevRemoved;
+    const next = record._nextRemoved;
+
+    if (prev === null) {
+      this._removalsHead = next;
+    } else {
+      prev._nextRemoved = next;
+    }
+    if (next === null) {
+      this._removalsTail = prev;
+    } else {
+      next._prevRemoved = prev;
+    }
+
+    this._insertAfter(record, prevRecord, index);
+    this._addToMoves(record, index);
+    return record;
+  }
+
+  /** @internal */
+  _moveAfter(
+      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
+      index: number): IterableChangeRecord_<V> {
+    this._unlink(record);
+    this._insertAfter(record, prevRecord, index);
+    this._addToMoves(record, index);
+    return record;
+  }
+
+  /** @internal */
+  _addAfter(
+      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
+      index: number): IterableChangeRecord_<V> {
+    this._insertAfter(record, prevRecord, index);
+
+    if (this._additionsTail === null) {
+      // TODO(vicb):
+      // assert(this._additionsHead === null);
+      this._additionsTail = this._additionsHead = record;
+    } else {
+      // TODO(vicb):
+      // assert(_additionsTail._nextAdded === null);
+      // assert(record._nextAdded === null);
+      this._additionsTail = this._additionsTail._nextAdded = record;
+    }
+    return record;
+  }
+
+  /** @internal */
+  _insertAfter(
+      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
+      index: number): IterableChangeRecord_<V> {
+    // TODO(vicb):
+    // assert(record != prevRecord);
+    // assert(record._next === null);
+    // assert(record._prev === null);
+
+    const next: IterableChangeRecord_<V>|null =
+        prevRecord === null ? this._itHead : prevRecord._next;
+    // TODO(vicb):
+    // assert(next != record);
+    // assert(prevRecord != record);
+    record._next = next;
+    record._prev = prevRecord;
+    if (next === null) {
+      this._itTail = record;
+    } else {
+      next._prev = record;
+    }
+    if (prevRecord === null) {
+      this._itHead = record;
+    } else {
+      prevRecord._next = record;
+    }
+
+    if (this._linkedRecords === null) {
+      this._linkedRecords = new _DuplicateMap<V>();
+    }
+    this._linkedRecords.put(record);
+
+    record.currentIndex = index;
+    return record;
+  }
+
+  /** @internal */
+  _remove(record: IterableChangeRecord_<V>): IterableChangeRecord_<V> {
+    return this._addToRemovals(this._unlink(record));
+  }
+
+  /** @internal */
+  _unlink(record: IterableChangeRecord_<V>): IterableChangeRecord_<V> {
+    if (this._linkedRecords !== null) {
+      this._linkedRecords.remove(record);
+    }
+
+    const prev = record._prev;
+    const next = record._next;
+
+    // TODO(vicb):
+    // assert((record._prev = null) === null);
+    // assert((record._next = null) === null);
+
+    if (prev === null) {
+      this._itHead = next;
+    } else {
+      prev._next = next;
+    }
+    if (next === null) {
+      this._itTail = prev;
+    } else {
+      next._prev = prev;
+    }
+
+    return record;
+  }
+
+  /** @internal */
+  _addToMoves(record: IterableChangeRecord_<V>, toIndex: number): IterableChangeRecord_<V> {
+    // TODO(vicb):
+    // assert(record._nextMoved === null);
+
+    if (record.previousIndex === toIndex) {
+      return record;
+    }
+
+    if (this._movesTail === null) {
+      // TODO(vicb):
+      // assert(_movesHead === null);
+      this._movesTail = this._movesHead = record;
+    } else {
+      // TODO(vicb):
+      // assert(_movesTail._nextMoved === null);
+      this._movesTail = this._movesTail._nextMoved = record;
+    }
+
+    return record;
+  }
+
+  private _addToRemovals(record: IterableChangeRecord_<V>): IterableChangeRecord_<V> {
+    if (this._unlinkedRecords === null) {
+      this._unlinkedRecords = new _DuplicateMap<V>();
+    }
+    this._unlinkedRecords.put(record);
+    record.currentIndex = null;
+    record._nextRemoved = null;
+
+    if (this._removalsTail === null) {
+      // TODO(vicb):
+      // assert(_removalsHead === null);
+      this._removalsTail = this._removalsHead = record;
+      record._prevRemoved = null;
+    } else {
+      // TODO(vicb):
+      // assert(_removalsTail._nextRemoved === null);
+      // assert(record._nextRemoved === null);
+      record._prevRemoved = this._removalsTail;
+      this._removalsTail = this._removalsTail._nextRemoved = record;
+    }
+    return record;
+  }
+
+  /** @internal */
+  _addIdentityChange(record: IterableChangeRecord_<V>, item: V) {
+    record.item = item;
+    if (this._identityChangesTail === null) {
+      this._identityChangesTail = this._identityChangesHead = record;
+    } else {
+      this._identityChangesTail = this._identityChangesTail._nextIdentityChange = record;
+    }
+    return record;
+  }
+}
+
+export class IterableChangeRecord_<V> implements IterableChangeRecord<V> {
+  currentIndex: number|null = null;
+  previousIndex: number|null = null;
+
+  /** @internal */
+  _nextPrevious: IterableChangeRecord_<V>|null = null;
+  /** @internal */
+  _prev: IterableChangeRecord_<V>|null = null;
+  /** @internal */
+  _next: IterableChangeRecord_<V>|null = null;
+  /** @internal */
+  _prevDup: IterableChangeRecord_<V>|null = null;
+  /** @internal */
+  _nextDup: IterableChangeRecord_<V>|null = null;
+  /** @internal */
+  _prevRemoved: IterableChangeRecord_<V>|null = null;
+  /** @internal */
+  _nextRemoved: IterableChangeRecord_<V>|null = null;
+  /** @internal */
+  _nextAdded: IterableChangeRecord_<V>|null = null;
+  /** @internal */
+  _nextMoved: IterableChangeRecord_<V>|null = null;
+  /** @internal */
+  _nextIdentityChange: IterableChangeRecord_<V>|null = null;
+
+
+  constructor(public item: V, public trackById: any) {}
+}
+
+// A linked list of CollectionChangeRecords with the same IterableChangeRecord_.item
+class _DuplicateItemRecordList<V> {
+  /** @internal */
+  _head: IterableChangeRecord_<V>|null = null;
+  /** @internal */
+  _tail: IterableChangeRecord_<V>|null = null;
+
+  /**
+   * Append the record to the list of duplicates.
+   *
+   * Note: by design all records in the list of duplicates hold the same value in record.item.
+   */
+  add(record: IterableChangeRecord_<V>): void {
+    if (this._head === null) {
+      this._head = this._tail = record;
+      record._nextDup = null;
+      record._prevDup = null;
+    } else {
+      // TODO(vicb):
+      // assert(record.item ==  _head.item ||
+      //       record.item is num && record.item.isNaN && _head.item is num && _head.item.isNaN);
+      this._tail !._nextDup = record;
+      record._prevDup = this._tail;
+      record._nextDup = null;
+      this._tail = record;
+    }
+  }
+
+  // Returns a IterableChangeRecord_ having IterableChangeRecord_.trackById == trackById and
+  // 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 ((atOrAfterIndex === null || atOrAfterIndex <= record.currentIndex !) &&
+          looseIdentical(record.trackById, trackById)) {
+        return record;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Remove one {@link IterableChangeRecord_} from the list of duplicates.
+   *
+   * Returns whether the list of duplicates is empty.
+   */
+  remove(record: IterableChangeRecord_<V>): boolean {
+    // TODO(vicb):
+    // assert(() {
+    //  // verify that the record being removed is in the list.
+    //  for (IterableChangeRecord_ cursor = _head; cursor != null; cursor = cursor._nextDup) {
+    //    if (identical(cursor, record)) return true;
+    //  }
+    //  return false;
+    //});
+
+    const prev: IterableChangeRecord_<V>|null = record._prevDup;
+    const next: IterableChangeRecord_<V>|null = record._nextDup;
+    if (prev === null) {
+      this._head = next;
+    } else {
+      prev._nextDup = next;
+    }
+    if (next === null) {
+      this._tail = prev;
+    } else {
+      next._prevDup = prev;
+    }
+    return this._head === null;
+  }
+}
+
+class _DuplicateMap<V> {
+  map = new Map<any, _DuplicateItemRecordList<V>>();
+
+  put(record: IterableChangeRecord_<V>) {
+    const key = record.trackById;
+
+    let duplicates = this.map.get(key);
+    if (!duplicates) {
+      duplicates = new _DuplicateItemRecordList<V>();
+      this.map.set(key, duplicates);
+    }
+    duplicates.add(record);
+  }
+
+  /**
+   * Retrieve the `value` using key. Because the IterableChangeRecord_ value may be one which we
+   * 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 second `a`.
+   */
+  get(trackById: any, atOrAfterIndex: number|null): IterableChangeRecord_<V>|null {
+    const key = trackById;
+    const recordList = this.map.get(key);
+    return recordList ? recordList.get(trackById, atOrAfterIndex) : null;
+  }
+
+  /**
+   * Removes a {@link IterableChangeRecord_} from the list of duplicates.
+   *
+   * The list of duplicates also is removed from the map if it gets empty.
+   */
+  remove(record: IterableChangeRecord_<V>): IterableChangeRecord_<V> {
+    const key = record.trackById;
+    const recordList: _DuplicateItemRecordList<V> = this.map.get(key) !;
+    // Remove the list of duplicates when it gets empty
+    if (recordList.remove(record)) {
+      this.map.delete(key);
+    }
+    return record;
+  }
+
+  get isEmpty(): boolean { return this.map.size === 0; }
+
+  clear() { this.map.clear(); }
+}
+
+function getPreviousIndex(
+    item: any, addRemoveOffset: number, moveOffsets: number[] | null): number {
+  const previousIndex = item.previousIndex;
+  if (previousIndex === null) return previousIndex;
+  let moveOffset = 0;
+  if (moveOffsets && previousIndex < moveOffsets.length) {
+    moveOffset = moveOffsets[previousIndex];
+  }
+  return previousIndex + addRemoveOffset + moveOffset;
+}
diff --git a/packages/core/src/change_detection/differs/default_keyvalue_differ.ts b/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
new file mode 100644
index 000000000000..3408c7ad0f00
--- /dev/null
+++ b/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
@@ -0,0 +1,280 @@
+/**
+ * @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 {looseIdentical, stringify} from '../../util';
+import {isJsObject} from '../change_detection_util';
+import {KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDifferFactory} from './keyvalue_differs';
+
+
+export class DefaultKeyValueDifferFactory<K, V> implements KeyValueDifferFactory {
+  constructor() {}
+  supports(obj: any): boolean { return obj instanceof Map || isJsObject(obj); }
+
+  create<K, V>(): KeyValueDiffer<K, V> { return new DefaultKeyValueDiffer<K, V>(); }
+}
+
+export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyValueChanges<K, V> {
+  private _records = new Map<K, KeyValueChangeRecord_<K, V>>();
+  private _mapHead: KeyValueChangeRecord_<K, V>|null = null;
+  // _appendAfter is used in the check loop
+  private _appendAfter: KeyValueChangeRecord_<K, V>|null = null;
+  private _previousMapHead: KeyValueChangeRecord_<K, V>|null = null;
+  private _changesHead: KeyValueChangeRecord_<K, V>|null = null;
+  private _changesTail: KeyValueChangeRecord_<K, V>|null = null;
+  private _additionsHead: KeyValueChangeRecord_<K, V>|null = null;
+  private _additionsTail: KeyValueChangeRecord_<K, V>|null = null;
+  private _removalsHead: KeyValueChangeRecord_<K, V>|null = null;
+  private _removalsTail: KeyValueChangeRecord_<K, V>|null = null;
+
+  get isDirty(): boolean {
+    return this._additionsHead !== null || this._changesHead !== null ||
+        this._removalsHead !== null;
+  }
+
+  forEachItem(fn: (r: KeyValueChangeRecord<K, V>) => void) {
+    let record: KeyValueChangeRecord_<K, V>|null;
+    for (record = this._mapHead; record !== null; record = record._next) {
+      fn(record);
+    }
+  }
+
+  forEachPreviousItem(fn: (r: KeyValueChangeRecord<K, V>) => void) {
+    let record: KeyValueChangeRecord_<K, V>|null;
+    for (record = this._previousMapHead; record !== null; record = record._nextPrevious) {
+      fn(record);
+    }
+  }
+
+  forEachChangedItem(fn: (r: KeyValueChangeRecord<K, V>) => void) {
+    let record: KeyValueChangeRecord_<K, V>|null;
+    for (record = this._changesHead; record !== null; record = record._nextChanged) {
+      fn(record);
+    }
+  }
+
+  forEachAddedItem(fn: (r: KeyValueChangeRecord<K, V>) => void) {
+    let record: KeyValueChangeRecord_<K, V>|null;
+    for (record = this._additionsHead; record !== null; record = record._nextAdded) {
+      fn(record);
+    }
+  }
+
+  forEachRemovedItem(fn: (r: KeyValueChangeRecord<K, V>) => void) {
+    let record: KeyValueChangeRecord_<K, V>|null;
+    for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
+      fn(record);
+    }
+  }
+
+  diff(map?: Map<any, any>|{[k: string]: any}|null): any {
+    if (!map) {
+      map = new Map();
+    } else if (!(map instanceof Map || isJsObject(map))) {
+      throw new Error(
+          `Error trying to diff '${stringify(map)}'. Only maps and objects are allowed`);
+    }
+
+    return this.check(map) ? this : null;
+  }
+
+  onDestroy() {}
+
+  /**
+   * Check the current state of the map vs the previous.
+   * The algorithm is optimised for when the keys do no change.
+   */
+  check(map: Map<any, any>|{[k: string]: any}): boolean {
+    this._reset();
+
+    let insertBefore = this._mapHead;
+    this._appendAfter = null;
+
+    this._forEach(map, (value: any, key: any) => {
+      if (insertBefore && insertBefore.key === key) {
+        this._maybeAddToChanges(insertBefore, value);
+        this._appendAfter = insertBefore;
+        insertBefore = insertBefore._next;
+      } else {
+        const record = this._getOrCreateRecordForKey(key, value);
+        insertBefore = this._insertBeforeOrAppend(insertBefore, record);
+      }
+    });
+
+    // Items remaining at the end of the list have been deleted
+    if (insertBefore) {
+      if (insertBefore._prev) {
+        insertBefore._prev._next = null;
+      }
+
+      this._removalsHead = insertBefore;
+
+      for (let record: KeyValueChangeRecord_<K, V>|null = insertBefore; record !== null;
+           record = record._nextRemoved) {
+        if (record === this._mapHead) {
+          this._mapHead = null;
+        }
+        this._records.delete(record.key);
+        record._nextRemoved = record._next;
+        record.previousValue = record.currentValue;
+        record.currentValue = null;
+        record._prev = null;
+        record._next = null;
+      }
+    }
+
+    // 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;
+  }
+
+  /**
+   * Inserts a record before `before` or append at the end of the list when `before` is null.
+   *
+   * Notes:
+   * - This method appends at `this._appendAfter`,
+   * - This method updates `this._appendAfter`,
+   * - The return value is the new value for the insertion pointer.
+   */
+  private _insertBeforeOrAppend(
+      before: KeyValueChangeRecord_<K, V>|null,
+      record: KeyValueChangeRecord_<K, V>): KeyValueChangeRecord_<K, V>|null {
+    if (before) {
+      const prev = before._prev;
+      record._next = before;
+      record._prev = prev;
+      before._prev = record;
+      if (prev) {
+        prev._next = record;
+      }
+      if (before === this._mapHead) {
+        this._mapHead = record;
+      }
+
+      this._appendAfter = before;
+      return before;
+    }
+
+    if (this._appendAfter) {
+      this._appendAfter._next = record;
+      record._prev = this._appendAfter;
+    } else {
+      this._mapHead = record;
+    }
+
+    this._appendAfter = record;
+    return null;
+  }
+
+  private _getOrCreateRecordForKey(key: K, value: V): KeyValueChangeRecord_<K, V> {
+    if (this._records.has(key)) {
+      const record = this._records.get(key) !;
+      this._maybeAddToChanges(record, value);
+      const prev = record._prev;
+      const next = record._next;
+      if (prev) {
+        prev._next = next;
+      }
+      if (next) {
+        next._prev = prev;
+      }
+      record._next = null;
+      record._prev = null;
+
+      return record;
+    }
+
+    const record = new KeyValueChangeRecord_<K, V>(key);
+    this._records.set(key, record);
+    record.currentValue = value;
+    this._addToAdditions(record);
+    return record;
+  }
+
+  /** @internal */
+  _reset() {
+    if (this.isDirty) {
+      let record: KeyValueChangeRecord_<K, V>|null;
+      // let `_previousMapHead` contain the state of the map before the changes
+      this._previousMapHead = this._mapHead;
+      for (record = this._previousMapHead; record !== null; record = record._next) {
+        record._nextPrevious = record._next;
+      }
+
+      // Update `record.previousValue` with the value of the item before the changes
+      // We need to update all changed items (that's those which have been added and changed)
+      for (record = this._changesHead; record !== null; record = record._nextChanged) {
+        record.previousValue = record.currentValue;
+      }
+      for (record = this._additionsHead; record != null; record = record._nextAdded) {
+        record.previousValue = record.currentValue;
+      }
+
+      this._changesHead = this._changesTail = null;
+      this._additionsHead = this._additionsTail = null;
+      this._removalsHead = null;
+    }
+  }
+
+  // Add the record or a given key to the list of changes only when the value has actually changed
+  private _maybeAddToChanges(record: KeyValueChangeRecord_<K, V>, newValue: any): void {
+    if (!looseIdentical(newValue, record.currentValue)) {
+      record.previousValue = record.currentValue;
+      record.currentValue = newValue;
+      this._addToChanges(record);
+    }
+  }
+
+  private _addToAdditions(record: KeyValueChangeRecord_<K, V>) {
+    if (this._additionsHead === null) {
+      this._additionsHead = this._additionsTail = record;
+    } else {
+      this._additionsTail !._nextAdded = record;
+      this._additionsTail = record;
+    }
+  }
+
+  private _addToChanges(record: KeyValueChangeRecord_<K, V>) {
+    if (this._changesHead === null) {
+      this._changesHead = this._changesTail = record;
+    } else {
+      this._changesTail !._nextChanged = record;
+      this._changesTail = record;
+    }
+  }
+
+  /** @internal */
+  private _forEach<K, V>(obj: Map<K, V>|{[k: string]: V}, fn: (v: V, k: any) => void) {
+    if (obj instanceof Map) {
+      obj.forEach(fn);
+    } else {
+      Object.keys(obj).forEach(k => fn(obj[k], k));
+    }
+  }
+}
+
+class KeyValueChangeRecord_<K, V> implements KeyValueChangeRecord<K, V> {
+  previousValue: V|null = null;
+  currentValue: V|null = null;
+
+  /** @internal */
+  _nextPrevious: KeyValueChangeRecord_<K, V>|null = null;
+  /** @internal */
+  _next: KeyValueChangeRecord_<K, V>|null = null;
+  /** @internal */
+  _prev: KeyValueChangeRecord_<K, V>|null = null;
+  /** @internal */
+  _nextAdded: KeyValueChangeRecord_<K, V>|null = null;
+  /** @internal */
+  _nextRemoved: KeyValueChangeRecord_<K, V>|null = null;
+  /** @internal */
+  _nextChanged: KeyValueChangeRecord_<K, V>|null = null;
+
+  constructor(public key: K) {}
+}
diff --git a/packages/core/src/change_detection/differs/iterable_differs.ts b/packages/core/src/change_detection/differs/iterable_differs.ts
new file mode 100644
index 000000000000..1c7ede12138a
--- /dev/null
+++ b/packages/core/src/change_detection/differs/iterable_differs.ts
@@ -0,0 +1,210 @@
+/**
+ * @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 {defineInjectable} from '../../di/defs';
+import {Optional, SkipSelf} from '../../di/metadata';
+import {StaticProvider} from '../../di/provider';
+import {DefaultIterableDifferFactory} from '../differs/default_iterable_differ';
+
+
+/**
+ * A type describing supported iterable types.
+ *
+ *
+ */
+export type NgIterable<T> = Array<T>| Iterable<T>;
+
+/**
+ * A strategy for tracking changes over time to an iterable. Used by {@link NgForOf} to
+ * respond to changes in an iterable by effecting equivalent changes in the DOM.
+ *
+ *
+ */
+export interface IterableDiffer<V> {
+  /**
+   * Compute a difference between the previous state and the new `object` state.
+   *
+   * @param object containing the new value.
+   * @returns an object describing the difference. The return value is only valid until the next
+   * `diff()` invocation.
+   */
+  diff(object: NgIterable<V>): IterableChanges<V>|null;
+}
+
+/**
+ * An object describing the changes in the `Iterable` collection since last time
+ * `IterableDiffer#diff()` was invoked.
+ *
+ *
+ */
+export interface IterableChanges<V> {
+  /**
+   * Iterate over all changes. `IterableChangeRecord` will contain information about changes
+   * to each item.
+   */
+  forEachItem(fn: (record: IterableChangeRecord<V>) => void): void;
+
+  /**
+   * Iterate over a set of operations which when applied to the original `Iterable` will produce the
+   * new `Iterable`.
+   *
+   * NOTE: These are not necessarily the actual operations which were applied to the original
+   * `Iterable`, rather these are a set of computed operations which may not be the same as the
+   * ones applied.
+   *
+   * @param record A change which needs to be applied
+   * @param previousIndex The `IterableChangeRecord#previousIndex` of the `record` refers to the
+   *        original `Iterable` location, where as `previousIndex` refers to the transient location
+   *        of the item, after applying the operations up to this point.
+   * @param currentIndex The `IterableChangeRecord#currentIndex` of the `record` refers to the
+   *        original `Iterable` location, where as `currentIndex` refers to the transient location
+   *        of the item, after applying the operations up to this point.
+   */
+  forEachOperation(
+      fn:
+          (record: IterableChangeRecord<V>, previousIndex: number|null,
+           currentIndex: number|null) => void): void;
+
+  /**
+   * Iterate over changes in the order of original `Iterable` showing where the original items
+   * have moved.
+   */
+  forEachPreviousItem(fn: (record: IterableChangeRecord<V>) => void): void;
+
+  /** Iterate over all added items. */
+  forEachAddedItem(fn: (record: IterableChangeRecord<V>) => void): void;
+
+  /** Iterate over all moved items. */
+  forEachMovedItem(fn: (record: IterableChangeRecord<V>) => void): void;
+
+  /** Iterate over all removed items. */
+  forEachRemovedItem(fn: (record: IterableChangeRecord<V>) => void): void;
+
+  /** Iterate over all items which had their identity (as computed by the `TrackByFunction`)
+   * changed. */
+  forEachIdentityChange(fn: (record: IterableChangeRecord<V>) => void): void;
+}
+
+/**
+ * Record representing the item change information.
+ *
+ *
+ */
+export interface IterableChangeRecord<V> {
+  /** Current index of the item in `Iterable` or null if removed. */
+  readonly currentIndex: number|null;
+
+  /** Previous index of the item in `Iterable` or null if added. */
+  readonly previousIndex: number|null;
+
+  /** The item. */
+  readonly item: V;
+
+  /** Track by identity as computed by the `TrackByFunction`. */
+  readonly trackById: any;
+}
+
+/**
+ * @deprecated v4.0.0 - Use IterableChangeRecord instead.
+ */
+export interface CollectionChangeRecord<V> extends IterableChangeRecord<V> {}
+
+/**
+ * An optional function passed into {@link NgForOf} that defines how to track
+ * items in an iterable (e.g. fby index or id)
+ *
+ *
+ */
+export interface TrackByFunction<T> { (index: number, item: T): any; }
+
+/**
+ * Provides a factory for {@link IterableDiffer}.
+ *
+ *
+ */
+export interface IterableDifferFactory {
+  supports(objects: any): boolean;
+  create<V>(trackByFn?: TrackByFunction<V>): IterableDiffer<V>;
+}
+
+/**
+ * A repository of different iterable diffing strategies used by NgFor, NgClass, and others.
+ *
+ */
+export class IterableDiffers {
+  static ngInjectableDef = defineInjectable({
+    providedIn: 'root',
+    factory: () => new IterableDiffers([new DefaultIterableDifferFactory()])
+  });
+
+  /**
+   * @deprecated v4.0.0 - Should be private
+   */
+  factories: IterableDifferFactory[];
+  constructor(factories: IterableDifferFactory[]) { this.factories = factories; }
+
+  static create(factories: IterableDifferFactory[], parent?: IterableDiffers): IterableDiffers {
+    if (parent != null) {
+      const copied = parent.factories.slice();
+      factories = factories.concat(copied);
+    }
+
+    return new IterableDiffers(factories);
+  }
+
+  /**
+   * Takes an array of {@link IterableDifferFactory} and returns a provider used to extend the
+   * inherited {@link IterableDiffers} instance with the provided factories and return a new
+   * {@link IterableDiffers} instance.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * The following example shows how to extend an existing list of factories,
+   * which will only be applied to the injector for this component and its children.
+   * This step is all that's required to make a new {@link IterableDiffer} available.
+   *
+   * ```
+   * @Component({
+   *   viewProviders: [
+   *     IterableDiffers.extend([new ImmutableListDiffer()])
+   *   ]
+   * })
+   * ```
+   */
+  static extend(factories: IterableDifferFactory[]): StaticProvider {
+    return {
+      provide: IterableDiffers,
+      useFactory: (parent: IterableDiffers) => {
+        if (!parent) {
+          // Typically would occur when calling IterableDiffers.extend inside of dependencies passed
+          // to
+          // bootstrap(), which would override default pipes instead of extending them.
+          throw new Error('Cannot extend IterableDiffers without a parent injector');
+        }
+        return IterableDiffers.create(factories, parent);
+      },
+      // Dependency technically isn't optional, but we can provide a better error message this way.
+      deps: [[IterableDiffers, new SkipSelf(), new Optional()]]
+    };
+  }
+
+  find(iterable: any): IterableDifferFactory {
+    const factory = this.factories.find(f => f.supports(iterable));
+    if (factory != null) {
+      return factory;
+    } else {
+      throw new Error(
+          `Cannot find a differ supporting object '${iterable}' of type '${getTypeNameForDebugging(iterable)}'`);
+    }
+  }
+}
+
+export function getTypeNameForDebugging(type: any): string {
+  return type['name'] || typeof type;
+}
diff --git a/packages/core/src/change_detection/differs/keyvalue_differs.ts b/packages/core/src/change_detection/differs/keyvalue_differs.ts
new file mode 100644
index 000000000000..47dcaf81b609
--- /dev/null
+++ b/packages/core/src/change_detection/differs/keyvalue_differs.ts
@@ -0,0 +1,176 @@
+/**
+ * @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 {Optional, SkipSelf, StaticProvider} from '../../di';
+
+
+/**
+ * A differ that tracks changes made to an object over time.
+ *
+ *
+ */
+export interface KeyValueDiffer<K, V> {
+  /**
+   * Compute a difference between the previous state and the new `object` state.
+   *
+   * @param object containing the new value.
+   * @returns an object describing the difference. The return value is only valid until the next
+   * `diff()` invocation.
+   */
+  diff(object: Map<K, V>): KeyValueChanges<K, V>|null;
+
+  /**
+   * Compute a difference between the previous state and the new `object` state.
+   *
+   * @param object containing the new value.
+   * @returns an object describing the difference. The return value is only valid until the next
+   * `diff()` invocation.
+   */
+  diff(object: {[key: string]: V}): KeyValueChanges<string, V>|null;
+  // TODO(TS2.1): diff<KP extends string>(this: KeyValueDiffer<KP, V>, object: Record<KP, V>):
+  // KeyValueDiffer<KP, V>;
+}
+
+/**
+ * An object describing the changes in the `Map` or `{[k:string]: string}` since last time
+ * `KeyValueDiffer#diff()` was invoked.
+ *
+ *
+ */
+export interface KeyValueChanges<K, V> {
+  /**
+   * Iterate over all changes. `KeyValueChangeRecord` will contain information about changes
+   * to each item.
+   */
+  forEachItem(fn: (r: KeyValueChangeRecord<K, V>) => void): void;
+
+  /**
+   * Iterate over changes in the order of original Map showing where the original items
+   * have moved.
+   */
+  forEachPreviousItem(fn: (r: KeyValueChangeRecord<K, V>) => void): void;
+
+  /**
+   * Iterate over all keys for which values have changed.
+   */
+  forEachChangedItem(fn: (r: KeyValueChangeRecord<K, V>) => void): void;
+
+  /**
+   * Iterate over all added items.
+   */
+  forEachAddedItem(fn: (r: KeyValueChangeRecord<K, V>) => void): void;
+
+  /**
+   * Iterate over all removed items.
+   */
+  forEachRemovedItem(fn: (r: KeyValueChangeRecord<K, V>) => void): void;
+}
+
+/**
+ * Record representing the item change information.
+ *
+ *
+ */
+export interface KeyValueChangeRecord<K, V> {
+  /**
+   * Current key in the Map.
+   */
+  readonly key: K;
+
+  /**
+   * Current value for the key or `null` if removed.
+   */
+  readonly currentValue: V|null;
+
+  /**
+   * Previous value for the key or `null` if added.
+   */
+  readonly previousValue: V|null;
+}
+
+/**
+ * Provides a factory for {@link KeyValueDiffer}.
+ *
+ *
+ */
+export interface KeyValueDifferFactory {
+  /**
+   * Test to see if the differ knows how to diff this kind of object.
+   */
+  supports(objects: any): boolean;
+
+  /**
+   * Create a `KeyValueDiffer`.
+   */
+  create<K, V>(): KeyValueDiffer<K, V>;
+}
+
+/**
+ * A repository of different Map diffing strategies used by NgClass, NgStyle, and others.
+ *
+ */
+export class KeyValueDiffers {
+  /**
+   * @deprecated v4.0.0 - Should be private.
+   */
+  factories: KeyValueDifferFactory[];
+
+  constructor(factories: KeyValueDifferFactory[]) { this.factories = factories; }
+
+  static create<S>(factories: KeyValueDifferFactory[], parent?: KeyValueDiffers): KeyValueDiffers {
+    if (parent) {
+      const copied = parent.factories.slice();
+      factories = factories.concat(copied);
+    }
+    return new KeyValueDiffers(factories);
+  }
+
+  /**
+   * Takes an array of {@link KeyValueDifferFactory} and returns a provider used to extend the
+   * inherited {@link KeyValueDiffers} instance with the provided factories and return a new
+   * {@link KeyValueDiffers} instance.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * The following example shows how to extend an existing list of factories,
+   * which will only be applied to the injector for this component and its children.
+   * This step is all that's required to make a new {@link KeyValueDiffer} available.
+   *
+   * ```
+   * @Component({
+   *   viewProviders: [
+   *     KeyValueDiffers.extend([new ImmutableMapDiffer()])
+   *   ]
+   * })
+   * ```
+   */
+  static extend<S>(factories: KeyValueDifferFactory[]): StaticProvider {
+    return {
+      provide: KeyValueDiffers,
+      useFactory: (parent: KeyValueDiffers) => {
+        if (!parent) {
+          // Typically would occur when calling KeyValueDiffers.extend inside of dependencies passed
+          // to bootstrap(), which would override default pipes instead of extending them.
+          throw new Error('Cannot extend KeyValueDiffers without a parent injector');
+        }
+        return KeyValueDiffers.create(factories, parent);
+      },
+      // Dependency technically isn't optional, but we can provide a better error message this way.
+      deps: [[KeyValueDiffers, new SkipSelf(), new Optional()]]
+    };
+  }
+
+  find(kv: any): KeyValueDifferFactory {
+    const factory = this.factories.find(f => f.supports(kv));
+    if (factory) {
+      return factory;
+    }
+    throw new Error(`Cannot find a differ supporting object '${kv}'`);
+  }
+}
diff --git a/packages/core/src/change_detection/pipe_transform.ts b/packages/core/src/change_detection/pipe_transform.ts
new file mode 100644
index 000000000000..740581d6ac2c
--- /dev/null
+++ b/packages/core/src/change_detection/pipe_transform.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
+ */
+
+/**
+ * To create a Pipe, you must implement this interface.
+ *
+ * Angular invokes the `transform` method with the value of a binding
+ * as the first argument, and any parameters as the second argument in list form.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * The `RepeatPipe` below repeats the value as many times as indicated by the first argument:
+ *
+ * ```
+ * import {Pipe, PipeTransform} from '@angular/core';
+ *
+ * @Pipe({name: 'repeat'})
+ * export class RepeatPipe implements PipeTransform {
+ *   transform(value: any, times: number) {
+ *     return value.repeat(times);
+ *   }
+ * }
+ * ```
+ *
+ * Invoking `{{ 'ok' | repeat:3 }}` in a template produces `okokok`.
+ *
+ *
+ */
+export interface PipeTransform { transform(value: any, ...args: any[]): any; }
diff --git a/packages/core/src/codegen_private_exports.ts b/packages/core/src/codegen_private_exports.ts
new file mode 100644
index 000000000000..bddc41e14dd6
--- /dev/null
+++ b/packages/core/src/codegen_private_exports.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 {CodegenComponentFactoryResolver as ɵCodegenComponentFactoryResolver} from './linker/component_factory_resolver';
+export {registerModuleFactory as ɵregisterModuleFactory} from './linker/ng_module_factory_loader';
+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/console.ts b/packages/core/src/console.ts
new file mode 100644
index 000000000000..bc30a29fb8ec
--- /dev/null
+++ b/packages/core/src/console.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 {Injectable} from './di';
+
+@Injectable()
+export class Console {
+  log(message: string): void {
+    // tslint:disable-next-line:no-console
+    console.log(message);
+  }
+  // Note: for reporting errors use `DOM.logError()` as it is platform specific
+  warn(message: string): void {
+    // tslint:disable-next-line:no-console
+    console.warn(message);
+  }
+}
diff --git a/packages/core/src/core.externs.js b/packages/core/src/core.externs.js
new file mode 100644
index 000000000000..936424081b51
--- /dev/null
+++ b/packages/core/src/core.externs.js
@@ -0,0 +1,18 @@
+/**
+ * @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
+ *
+ * @externs
+ */
+
+// Note: we can't declare an extern for the global variable `ng` as
+// the namespace `ng` is already used within Google
+// for typings for angularJS (via `goog.provide('ng....')`).
+
+/**
+ * @suppress {duplicate}
+ */
+var wtf;
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
new file mode 100644
index 000000000000..0444eea60107
--- /dev/null
+++ b/packages/core/src/core.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
+ */
+
+/**
+ * @module
+ * @description
+ * Entry point from which you should import all public core APIs.
+ */
+export * from './metadata';
+export * from './version';
+export {TypeDecorator} from './util/decorators';
+export * from './di';
+export {createPlatform, assertPlatform, destroyPlatform, getPlatform, PlatformRef, ApplicationRef, enableProdMode, isDevMode, createPlatformFactory, NgProbeToken} from './application_ref';
+export {APP_ID, PACKAGE_ROOT_URL, PLATFORM_INITIALIZER, PLATFORM_ID, APP_BOOTSTRAP_LISTENER} from './application_tokens';
+export {APP_INITIALIZER, ApplicationInitStatus} from './application_init';
+export * from './zone';
+export * from './render';
+export * from './linker';
+export {DebugElement, DebugNode, asNativeElements, getDebugNode, Predicate} from './debug/debug_node';
+export {GetTestability, Testability, TestabilityRegistry, setTestabilityGetter} from './testability/testability';
+export * from './change_detection';
+export * from './platform_core_providers';
+export {TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID, MissingTranslationStrategy} from './i18n/tokens';
+export {ApplicationModule} from './application_module';
+export {wtfCreateScope, wtfLeave, wtfStartTimeRange, wtfEndTimeRange, WtfScopeFn} from './profile/profile';
+export {Type} from './type';
+export {EventEmitter} from './event_emitter';
+export {ErrorHandler} from './error_handler';
+export * from './core_private_export';
+export * from './core_render3_private_export';
+export {Sanitizer, SecurityContext} from './sanitization/security';
+export * from './codegen_private_exports';
diff --git a/packages/core/src/core_private_export.ts b/packages/core/src/core_private_export.ts
new file mode 100644
index 000000000000..a9dd899762ea
--- /dev/null
+++ b/packages/core/src/core_private_export.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
+ */
+
+export {ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS} from './application_ref';
+export {APP_ID_RANDOM_PROVIDER as ɵAPP_ID_RANDOM_PROVIDER} from './application_tokens';
+export {defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers} from './change_detection/change_detection';
+export {devModeEqual as ɵdevModeEqual} from './change_detection/change_detection_util';
+export {isListLikeIterable as ɵisListLikeIterable} from './change_detection/change_detection_util';
+export {ChangeDetectorStatus as ɵChangeDetectorStatus, isDefaultChangeDetectionStrategy as ɵisDefaultChangeDetectionStrategy} from './change_detection/constants';
+export {Console as ɵConsole} from './console';
+export {InjectableDef as ɵInjectableDef, InjectorDef as ɵInjectorDef} from './di/defs';
+export {inject as ɵinject, setCurrentInjector as ɵsetCurrentInjector} from './di/injector';
+export {APP_ROOT as ɵAPP_ROOT} from './di/scope';
+export {ivyEnabled as ɵivyEnabled} from './ivy_switch';
+export {ComponentFactory as ɵComponentFactory} from './linker/component_factory';
+export {CodegenComponentFactoryResolver as ɵCodegenComponentFactoryResolver} from './linker/component_factory_resolver';
+export {resolveComponentResources as ɵresolveComponentResources} from './metadata/resource_loading';
+export {ReflectionCapabilities as ɵReflectionCapabilities} from './reflection/reflection_capabilities';
+export {GetterFn as ɵGetterFn, MethodFn as ɵMethodFn, SetterFn as ɵSetterFn} from './reflection/types';
+export {DirectRenderer as ɵDirectRenderer, RenderDebugInfo as ɵRenderDebugInfo} from './render/api';
+export {_sanitizeHtml as ɵ_sanitizeHtml} from './sanitization/html_sanitizer';
+export {_sanitizeStyle as ɵ_sanitizeStyle} from './sanitization/style_sanitizer';
+export {_sanitizeUrl as ɵ_sanitizeUrl} from './sanitization/url_sanitizer';
+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 {clearOverrides as ɵclearOverrides, initServicesIfNeeded as ɵinitServicesIfNeeded, overrideComponentView as ɵoverrideComponentView, 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/core_render3_private_export.ts b/packages/core/src/core_render3_private_export.ts
new file mode 100644
index 000000000000..72c7085e4998
--- /dev/null
+++ b/packages/core/src/core_render3_private_export.ts
@@ -0,0 +1,160 @@
+/**
+ * @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
+ */
+
+// clang-format off
+export {
+  defineBase as ɵdefineBase,
+  defineComponent as ɵdefineComponent,
+  defineDirective as ɵdefineDirective,
+  definePipe as ɵdefinePipe,
+  defineNgModule as ɵdefineNgModule,
+  detectChanges as ɵdetectChanges,
+  renderComponent as ɵrenderComponent,
+  ComponentType as ɵComponentType,
+  ComponentFactory as ɵRender3ComponentFactory,
+  ComponentRef as ɵRender3ComponentRef,
+  DirectiveType as ɵDirectiveType,
+  RenderFlags as ɵRenderFlags,
+  directiveInject as ɵdirectiveInject,
+  injectElementRef as ɵinjectElementRef,
+  injectTemplateRef as ɵinjectTemplateRef,
+  injectViewContainerRef as ɵinjectViewContainerRef,
+  injectChangeDetectorRef as ɵinjectChangeDetectorRef,
+  injectAttribute as ɵinjectAttribute,
+  getFactoryOf as ɵgetFactoryOf,
+  getInheritedFactory as ɵgetInheritedFactory,
+  PublicFeature as ɵPublicFeature,
+  InheritDefinitionFeature as ɵInheritDefinitionFeature,
+  NgOnChangesFeature as ɵNgOnChangesFeature,
+  NgModuleType as ɵNgModuleType,
+  NgModuleRef as ɵRender3NgModuleRef,
+  CssSelectorList as ɵCssSelectorList,
+  markDirty as ɵmarkDirty,
+  NgModuleFactory as ɵNgModuleFactory,
+  NC as ɵNC,
+  C as ɵC,
+  x as ɵx,
+  E as ɵE,
+  NH as ɵNH,
+  NM as ɵNM,
+  NS as ɵNS,
+  Ee as ɵEe,
+  L as ɵL,
+  T as ɵT,
+  V as ɵV,
+  Q as ɵQ,
+  Qr as ɵQr,
+  d as ɵd,
+  P as ɵP,
+  b as ɵb,
+  i1 as ɵi1,
+  i2 as ɵi2,
+  i3 as ɵi3,
+  i4 as ɵi4,
+  i5 as ɵi5,
+  i6 as ɵi6,
+  i7 as ɵi7,
+  i8 as ɵi8,
+  iV as ɵiV,
+  pb1 as ɵpb1,
+  pb2 as ɵpb2,
+  pb3 as ɵpb3,
+  pb4 as ɵpb4,
+  pbV as ɵpbV,
+  f0 as ɵf0,
+  f1 as ɵf1,
+  f2 as ɵf2,
+  f3 as ɵf3,
+  f4 as ɵf4,
+  f5 as ɵf5,
+  f6 as ɵf6,
+  f7 as ɵf7,
+  f8 as ɵf8,
+  fV as ɵfV,
+  gV as ɵgV,
+  rV as ɵrV,
+  cR as ɵcR,
+  cr as ɵcr,
+  qR as ɵqR,
+  ql as ɵql,
+  e as ɵe,
+  p as ɵp,
+  pD as ɵpD,
+  r as ɵr,
+  rS as ɵrS,
+  a as ɵa,
+  s as ɵs,
+  sm as ɵsm,
+  sp as ɵsp,
+  sa as ɵsa,
+  cp as ɵcp,
+  t as ɵt,
+  v as ɵv,
+  st as ɵst,
+  ld as ɵld,
+  Pp as ɵPp,
+  BaseDef as ɵBaseDef,
+  ComponentDef as ɵComponentDef,
+  ComponentDefInternal as ɵComponentDefInternal,
+  DirectiveDef as ɵDirectiveDef,
+  PipeDef as ɵPipeDef,
+  whenRendered as ɵwhenRendered,
+  iA as ɵiA,
+  iEM as ɵiEM,
+  iI1 as ɵiI1,
+  iI2 as ɵiI2,
+  iI3 as ɵiI3,
+  iI4 as ɵiI4,
+  iI5 as ɵiI5,
+  iI6 as ɵiI6,
+  iI7 as ɵiI7,
+  iI8 as ɵiI8,
+  iIV as ɵIV,
+  iM as ɵiM,
+  I18nInstruction as ɵI18nInstruction,
+  I18nExpInstruction as ɵI18nExpInstruction,
+  WRAP_RENDERER_FACTORY2 as ɵWRAP_RENDERER_FACTORY2,
+  Render3DebugRendererFactory2 as ɵRender3DebugRendererFactory2,
+} from './render3/index';
+
+
+export {
+  compileNgModuleDefs as ɵcompileNgModuleDefs,
+  patchComponentDefWithScope as ɵpatchComponentDefWithScope,
+} from './render3/jit/module';
+
+export {
+  compileComponent as ɵcompileComponent,
+  compileDirective as ɵcompileDirective,
+} from './render3/jit/directive';
+
+export {
+  compilePipe as ɵcompilePipe,
+} from './render3/jit/pipe';
+
+export {
+  NgModuleDef as ɵNgModuleDef,
+  NgModuleDefInternal as ɵNgModuleDefInternal,
+  NgModuleTransitiveScopes as ɵNgModuleTransitiveScopes,
+} from './metadata/ng_module';
+
+export {
+  sanitizeHtml as ɵsanitizeHtml,
+  sanitizeStyle as ɵsanitizeStyle,
+  sanitizeUrl as ɵsanitizeUrl,
+  sanitizeResourceUrl as ɵsanitizeResourceUrl,
+} from './sanitization/sanitization';
+
+export {
+  bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml,
+  bypassSanitizationTrustStyle as ɵbypassSanitizationTrustStyle,
+  bypassSanitizationTrustScript as ɵbypassSanitizationTrustScript,
+  bypassSanitizationTrustUrl as ɵbypassSanitizationTrustUrl,
+  bypassSanitizationTrustResourceUrl as ɵbypassSanitizationTrustResourceUrl,
+} from './sanitization/bypass';
+// clang-format on
\ No newline at end of file
diff --git a/packages/core/src/debug/debug_node.ts b/packages/core/src/debug/debug_node.ts
new file mode 100644
index 000000000000..0f4ba3ae311c
--- /dev/null
+++ b/packages/core/src/debug/debug_node.ts
@@ -0,0 +1,189 @@
+/**
+ * @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';
+import {DebugContext} from '../view/index';
+
+export class EventListener {
+  constructor(public name: string, public callback: Function) {}
+}
+
+/**
+ * @experimental All debugging apis are currently experimental.
+ */
+export class DebugNode {
+  listeners: EventListener[] = [];
+  parent: DebugElement|null = null;
+
+  constructor(public nativeNode: any, parent: DebugNode|null, private _debugContext: DebugContext) {
+    if (parent && parent instanceof DebugElement) {
+      parent.addChild(this);
+    }
+  }
+
+  get injector(): Injector { return this._debugContext.injector; }
+
+  get componentInstance(): any { return this._debugContext.component; }
+
+  get context(): any { return this._debugContext.context; }
+
+  get references(): {[key: string]: any} { return this._debugContext.references; }
+
+  get providerTokens(): any[] { return this._debugContext.providerTokens; }
+}
+
+/**
+ * @experimental All debugging apis are currently experimental.
+ */
+export class DebugElement extends DebugNode {
+  name !: string;
+  properties: {[key: string]: any} = {};
+  attributes: {[key: string]: string | null} = {};
+  classes: {[key: string]: boolean} = {};
+  styles: {[key: string]: string | null} = {};
+  childNodes: DebugNode[] = [];
+  nativeElement: any;
+
+  constructor(nativeNode: any, parent: any, _debugContext: DebugContext) {
+    super(nativeNode, parent, _debugContext);
+    this.nativeElement = nativeNode;
+  }
+
+  addChild(child: DebugNode) {
+    if (child) {
+      this.childNodes.push(child);
+      child.parent = this;
+    }
+  }
+
+  removeChild(child: DebugNode) {
+    const childIndex = this.childNodes.indexOf(child);
+    if (childIndex !== -1) {
+      child.parent = null;
+      this.childNodes.splice(childIndex, 1);
+    }
+  }
+
+  insertChildrenAfter(child: DebugNode, newChildren: DebugNode[]) {
+    const siblingIndex = this.childNodes.indexOf(child);
+    if (siblingIndex !== -1) {
+      this.childNodes.splice(siblingIndex + 1, 0, ...newChildren);
+      newChildren.forEach(c => {
+        if (c.parent) {
+          c.parent.removeChild(c);
+        }
+        c.parent = this;
+      });
+    }
+  }
+
+  insertBefore(refChild: DebugNode, newChild: DebugNode): void {
+    const refIndex = this.childNodes.indexOf(refChild);
+    if (refIndex === -1) {
+      this.addChild(newChild);
+    } else {
+      if (newChild.parent) {
+        newChild.parent.removeChild(newChild);
+      }
+      newChild.parent = this;
+      this.childNodes.splice(refIndex, 0, newChild);
+    }
+  }
+
+  query(predicate: Predicate<DebugElement>): DebugElement {
+    const results = this.queryAll(predicate);
+    return results[0] || null;
+  }
+
+  queryAll(predicate: Predicate<DebugElement>): DebugElement[] {
+    const matches: DebugElement[] = [];
+    _queryElementChildren(this, predicate, matches);
+    return matches;
+  }
+
+  queryAllNodes(predicate: Predicate<DebugNode>): DebugNode[] {
+    const matches: DebugNode[] = [];
+    _queryNodeChildren(this, predicate, matches);
+    return matches;
+  }
+
+  get children(): DebugElement[] {
+    return this.childNodes.filter((node) => node instanceof DebugElement) as DebugElement[];
+  }
+
+  triggerEventHandler(eventName: string, eventObj: any) {
+    this.listeners.forEach((listener) => {
+      if (listener.name == eventName) {
+        listener.callback(eventObj);
+      }
+    });
+  }
+}
+
+/**
+ * @experimental
+ */
+export function asNativeElements(debugEls: DebugElement[]): any {
+  return debugEls.map((el) => el.nativeElement);
+}
+
+function _queryElementChildren(
+    element: DebugElement, predicate: Predicate<DebugElement>, matches: DebugElement[]) {
+  element.childNodes.forEach(node => {
+    if (node instanceof DebugElement) {
+      if (predicate(node)) {
+        matches.push(node);
+      }
+      _queryElementChildren(node, predicate, matches);
+    }
+  });
+}
+
+function _queryNodeChildren(
+    parentNode: DebugNode, predicate: Predicate<DebugNode>, matches: DebugNode[]) {
+  if (parentNode instanceof DebugElement) {
+    parentNode.childNodes.forEach(node => {
+      if (predicate(node)) {
+        matches.push(node);
+      }
+      if (node instanceof DebugElement) {
+        _queryNodeChildren(node, predicate, matches);
+      }
+    });
+  }
+}
+
+// Need to keep the nodes in a global Map so that multiple angular apps are supported.
+const _nativeNodeToDebugNode = new Map<any, DebugNode>();
+
+/**
+ * @experimental
+ */
+export function getDebugNode(nativeNode: any): DebugNode|null {
+  return _nativeNodeToDebugNode.get(nativeNode) || null;
+}
+
+export function getAllDebugNodes(): DebugNode[] {
+  return Array.from(_nativeNodeToDebugNode.values());
+}
+
+export function indexDebugNode(node: DebugNode) {
+  _nativeNodeToDebugNode.set(node.nativeNode, node);
+}
+
+export function removeDebugNodeFromIndex(node: DebugNode) {
+  _nativeNodeToDebugNode.delete(node.nativeNode);
+}
+
+/**
+ * A boolean-valued function over a value, possibly including context information
+ * regarding that value's position in an array.
+ *
+ * @experimental All debugging apis are currently experimental.
+ */
+export interface Predicate<T> { (value: T): boolean; }
diff --git a/packages/core/src/di.ts b/packages/core/src/di.ts
new file mode 100644
index 000000000000..1e6b201b84a2
--- /dev/null
+++ b/packages/core/src/di.ts
@@ -0,0 +1,25 @@
+/**
+ * @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
+ * The `di` module provides dependency injection container services.
+ */
+
+export * from './di/metadata';
+export {InjectableType, InjectorType, defineInjectable, defineInjector} from './di/defs';
+export {forwardRef, resolveForwardRef, ForwardRefFn} from './di/forward_ref';
+export {Injectable, InjectableDecorator, InjectableProvider} from './di/injectable';
+export {inject, InjectFlags, INJECTOR, Injector} from './di/injector';
+export {ReflectiveInjector} from './di/reflective_injector';
+export {StaticProvider, ValueProvider, ConstructorSansProvider, ExistingProvider, FactoryProvider, Provider, TypeProvider, ClassProvider} from './di/provider';
+export {createInjector} from './di/r3_injector';
+export {ResolvedReflectiveFactory, ResolvedReflectiveProvider} from './di/reflective_provider';
+export {ReflectiveKey} from './di/reflective_key';
+export {InjectionToken} from './di/injection_token';
diff --git a/packages/core/src/di/defs.ts b/packages/core/src/di/defs.ts
new file mode 100644
index 000000000000..77f46d1f9955
--- /dev/null
+++ b/packages/core/src/di/defs.ts
@@ -0,0 +1,162 @@
+/**
+ * @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 {Type} from '../type';
+
+import {ClassProvider, ClassSansProvider, ConstructorProvider, ConstructorSansProvider, ExistingProvider, ExistingSansProvider, FactoryProvider, FactorySansProvider, StaticClassProvider, StaticClassSansProvider, ValueProvider, ValueSansProvider} from './provider';
+
+/**
+ * Information about how a type or `InjectionToken` interfaces with the DI system.
+ *
+ * At a minimum, this includes a `factory` which defines how to create the given type `T`, possibly
+ * requesting injection of other types if necessary.
+ *
+ * Optionally, a `providedIn` parameter specifies that the given type belongs to a particular
+ * `InjectorDef`, `NgModule`, or a special scope (e.g. `'root'`). A value of `null` indicates
+ * that the injectable does not belong to any scope.
+ *
+ * NOTE: This is a private type and should not be exported
+ */
+export interface InjectableDef<T> {
+  /**
+   * Specifies that the given type belongs to a particular injector:
+   * - `InjectorType` such as `NgModule`,
+   * - `'root'` the root injector
+   * - `'any'` all injectors.
+   * - `null`, does not belong to any injector. Must be explicitly listed in the injector
+   *   `providers`.
+   */
+  providedIn: InjectorType<any>|'root'|'any'|null;
+
+  /**
+   * Factory method to execute to create an instance of the injectable.
+   */
+  factory: () => T;
+
+  /**
+   * In a case of no explicit injector, a location where the instance of the injectable is stored.
+   */
+  value: T|undefined;
+}
+
+/**
+ * Information about the providers to be included in an `Injector` as well as how the given type
+ * which carries the information should be created by the DI system.
+ *
+ * An `InjectorDef` can import other types which have `InjectorDefs`, forming a deep nested
+ * structure of providers with a defined priority (identically to how `NgModule`s also have
+ * an import/dependency structure).
+ *
+ * NOTE: This is a private type and should not be exported
+ */
+export interface InjectorDef<T> {
+  factory: () => T;
+
+  // TODO(alxhub): Narrow down the type here once decorators properly change the return type of the
+  // class they are decorating (to add the ngInjectableDef property for example).
+  providers: (Type<any>|ValueProvider|ExistingProvider|FactoryProvider|ConstructorProvider|
+              StaticClassProvider|ClassProvider|any[])[];
+
+  imports: (InjectorType<any>|InjectorTypeWithProviders<any>)[];
+}
+
+/**
+ * A `Type` which has an `InjectableDef` static field.
+ *
+ * `InjectableDefType`s contain their own Dependency Injection metadata and are usable in an
+ * `InjectorDef`-based `StaticInjector.
+ *
+ * @experimental
+ */
+export interface InjectableType<T> extends Type<T> {
+  /**
+   * Opaque type whose structure is highly version dependent. Do not rely on any properties.
+   */
+  ngInjectableDef: never;
+}
+
+/**
+ * A type which has an `InjectorDef` static field.
+ *
+ * `InjectorDefTypes` can be used to configure a `StaticInjector`.
+ *
+ * @experimental
+ */
+export interface InjectorType<T> extends Type<T> {
+  /**
+   * Opaque type whose structure is highly version dependent. Do not rely on any properties.
+   */
+  ngInjectorDef: never;
+}
+
+/**
+ * Describes the `InjectorDef` equivalent of a `ModuleWithProviders`, an `InjectorDefType` with an
+ * associated array of providers.
+ *
+ * Objects of this type can be listed in the imports section of an `InjectorDef`.
+ *
+ * NOTE: This is a private type and should not be exported
+ */
+export interface InjectorTypeWithProviders<T> {
+  ngModule: InjectorType<T>;
+  providers?: (Type<any>|ValueProvider|ExistingProvider|FactoryProvider|ConstructorProvider|
+               StaticClassProvider|ClassProvider|any[])[];
+}
+
+
+/**
+ * Construct an `InjectableDef` which defines how a token will be constructed by the DI system, and
+ * in which injectors (if any) it will be available.
+ *
+ * This should be assigned to a static `ngInjectableDef` field on a type, which will then be an
+ * `InjectableType`.
+ *
+ * Options:
+ * * `providedIn` determines which injectors will include the injectable, by either associating it
+ *   with an `@NgModule` or other `InjectorType`, or by specifying that this injectable should be
+ *   provided in the `'root'` injector, which will be the application-level injector in most apps.
+ * * `factory` gives the zero argument function which will create an instance of the injectable.
+ *   The factory can call `inject` to access the `Injector` and request injection of dependencies.
+ *
+ * @experimental
+ */
+export function defineInjectable<T>(opts: {
+  providedIn?: Type<any>| 'root' | 'any' | null,
+  factory: () => T,
+}): never {
+  return ({
+    providedIn: opts.providedIn as any || null, factory: opts.factory, value: undefined,
+  } as InjectableDef<T>) as never;
+}
+
+/**
+ * Construct an `InjectorDef` which configures an injector.
+ *
+ * This should be assigned to a static `ngInjectorDef` field on a type, which will then be an
+ * `InjectorType`.
+ *
+ * Options:
+ *
+ * * `factory`: an `InjectorType` is an instantiable type, so a zero argument `factory` function to
+ *   create the type must be provided. If that factory function needs to inject arguments, it can
+ *   use the `inject` function.
+ * * `providers`: an optional array of providers to add to the injector. Each provider must
+ *   either have a factory or point to a type which has an `ngInjectableDef` static property (the
+ *   type must be an `InjectableType`).
+ * * `imports`: an optional array of imports of other `InjectorType`s or `InjectorTypeWithModule`s
+ *   whose providers will also be added to the injector. Locally provided types will override
+ *   providers from imports.
+ *
+ * @experimental
+ */
+export function defineInjector(options: {factory: () => any, providers?: any[], imports?: any[]}):
+    never {
+  return ({
+    factory: options.factory, providers: options.providers || [], imports: options.imports || [],
+  } as InjectorDef<any>) as never;
+}
diff --git a/packages/core/src/di/forward_ref.ts b/packages/core/src/di/forward_ref.ts
new file mode 100644
index 000000000000..3d9b7f27aa1f
--- /dev/null
+++ b/packages/core/src/di/forward_ref.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 {Type} from '../type';
+import {stringify} from '../util';
+
+
+
+/**
+ * An interface that a function passed into {@link forwardRef} has to implement.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/forward_ref/forward_ref_spec.ts region='forward_ref_fn'}
+ * @experimental
+ */
+export interface ForwardRefFn { (): any; }
+
+/**
+ * Allows to refer to references which are not yet defined.
+ *
+ * For instance, `forwardRef` is used when the `token` which we need to refer to for the purposes of
+ * DI is declared, but not yet defined. It is also used when the `token` which we use when creating
+ * a query is not yet defined.
+ *
+ * @usageNotes
+ * ### Example
+ * {@example core/di/ts/forward_ref/forward_ref_spec.ts region='forward_ref'}
+ * @experimental
+ */
+export function forwardRef(forwardRefFn: ForwardRefFn): Type<any> {
+  (<any>forwardRefFn).__forward_ref__ = forwardRef;
+  (<any>forwardRefFn).toString = function() { return stringify(this()); };
+  return (<Type<any>><any>forwardRefFn);
+}
+
+/**
+ * Lazily retrieves the reference value from a forwardRef.
+ *
+ * Acts as the identity function when given a non-forward-ref value.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/forward_ref/forward_ref_spec.ts region='resolve_forward_ref'}
+ *
+ * @see `forwardRef`
+ * @experimental
+ */
+export function resolveForwardRef(type: any): any {
+  if (typeof type === 'function' && type.hasOwnProperty('__forward_ref__') &&
+      type.__forward_ref__ === forwardRef) {
+    return (<ForwardRefFn>type)();
+  } else {
+    return type;
+  }
+}
diff --git a/packages/core/src/di/injectable.ts b/packages/core/src/di/injectable.ts
new file mode 100644
index 000000000000..d1dacf103318
--- /dev/null
+++ b/packages/core/src/di/injectable.ts
@@ -0,0 +1,131 @@
+/**
+ * @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 {R3_COMPILE_INJECTABLE} from '../ivy_switch';
+import {ReflectionCapabilities} from '../reflection/reflection_capabilities';
+import {Type} from '../type';
+import {makeDecorator, makeParamDecorator} from '../util/decorators';
+import {getClosureSafeProperty} from '../util/property';
+
+import {InjectableDef, InjectableType, defineInjectable} from './defs';
+import {inject, injectArgs} from './injector';
+import {ClassSansProvider, ConstructorProvider, ConstructorSansProvider, ExistingProvider, ExistingSansProvider, FactoryProvider, FactorySansProvider, StaticClassProvider, StaticClassSansProvider, ValueProvider, ValueSansProvider} from './provider';
+
+const GET_PROPERTY_NAME = {} as any;
+const USE_VALUE = getClosureSafeProperty<ValueProvider>(
+    {provide: String, useValue: GET_PROPERTY_NAME}, GET_PROPERTY_NAME);
+
+/**
+ * Injectable providers used in `@Injectable` decorator.
+ *
+ * @experimental
+ */
+export type InjectableProvider = ValueSansProvider | ExistingSansProvider |
+    StaticClassSansProvider | ConstructorSansProvider | FactorySansProvider | ClassSansProvider;
+
+/**
+ * Type of the Injectable decorator / constructor function.
+ */
+export interface InjectableDecorator {
+  /**
+   * A marker metadata that marks a class as available to `Injector` for creation.
+   *
+   * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * {@example core/di/ts/metadata_spec.ts region='Injectable'}
+   *
+   * `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'}
+   *
+   */
+  (): any;
+  (options?: {providedIn: Type<any>| 'root' | null}&InjectableProvider): any;
+  new (): Injectable;
+  new (options?: {providedIn: Type<any>| 'root' | null}&InjectableProvider): Injectable;
+}
+
+/**
+ * Type of the Injectable metadata.
+ *
+ * @experimental
+ */
+export interface Injectable { providedIn?: Type<any>|'root'|null; }
+
+const EMPTY_ARRAY: any[] = [];
+
+export function convertInjectableProviderToFactory(
+    type: Type<any>, provider?: InjectableProvider): () => any {
+  if (!provider) {
+    const reflectionCapabilities = new ReflectionCapabilities();
+    const deps = reflectionCapabilities.parameters(type);
+    // TODO - convert to flags.
+    return () => new type(...injectArgs(deps as any[]));
+  }
+
+  if (USE_VALUE in provider) {
+    const valueProvider = (provider as ValueSansProvider);
+    return () => valueProvider.useValue;
+  } else if ((provider as ExistingSansProvider).useExisting) {
+    const existingProvider = (provider as ExistingSansProvider);
+    return () => inject(existingProvider.useExisting);
+  } else if ((provider as FactorySansProvider).useFactory) {
+    const factoryProvider = (provider as FactorySansProvider);
+    return () => factoryProvider.useFactory(...injectArgs(factoryProvider.deps || EMPTY_ARRAY));
+  } else if ((provider as StaticClassSansProvider | ClassSansProvider).useClass) {
+    const classProvider = (provider as StaticClassSansProvider | ClassSansProvider);
+    let deps = (provider as StaticClassSansProvider).deps;
+    if (!deps) {
+      const reflectionCapabilities = new ReflectionCapabilities();
+      deps = reflectionCapabilities.parameters(type);
+    }
+    return () => new classProvider.useClass(...injectArgs(deps));
+  } else {
+    let deps = (provider as ConstructorSansProvider).deps;
+    if (!deps) {
+      const reflectionCapabilities = new ReflectionCapabilities();
+      deps = reflectionCapabilities.parameters(type);
+    }
+    return () => new type(...injectArgs(deps !));
+  }
+}
+
+/**
+ * Supports @Injectable() in JIT mode for Render2.
+ */
+function preR3InjectableCompile(
+    injectableType: InjectableType<any>,
+    options: {providedIn?: Type<any>| 'root' | null} & InjectableProvider): void {
+  if (options && options.providedIn !== undefined && injectableType.ngInjectableDef === undefined) {
+    injectableType.ngInjectableDef = defineInjectable({
+      providedIn: options.providedIn,
+      factory: convertInjectableProviderToFactory(injectableType, options),
+    });
+  }
+}
+
+/**
+* Injectable decorator and metadata.
+*
+* @Annotation
+*/
+export const Injectable: InjectableDecorator = makeDecorator(
+    'Injectable', undefined, undefined, undefined,
+    (type: Type<any>, meta: Injectable) =>
+        (R3_COMPILE_INJECTABLE || preR3InjectableCompile)(type, meta));
+
+/**
+ * Type representing injectable service.
+ *
+ * @experimental
+ */
+export interface InjectableType<T> extends Type<T> { ngInjectableDef: InjectableDef<T>; }
diff --git a/packages/core/src/di/injection_token.ts b/packages/core/src/di/injection_token.ts
new file mode 100644
index 000000000000..be38b32edd8e
--- /dev/null
+++ b/packages/core/src/di/injection_token.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 {Type} from '../type';
+
+import {defineInjectable} from './defs';
+
+/**
+ * Creates a token that can be used in a DI Provider.
+ *
+ * Use an `InjectionToken` whenever the type you are injecting is not reified (does not have a
+ * runtime representation) such as when injecting an interface, callable type, array or
+ * parametrized type.
+ *
+ * `InjectionToken` is parameterized on `T` which is the type of object which will be returned by
+ * the `Injector`. This provides additional level of type safety.
+ *
+ * ```
+ * interface MyInterface {...}
+ * var myInterface = injector.get(new InjectionToken<MyInterface>('SomeToken'));
+ * // myInterface is inferred to be MyInterface.
+ * ```
+ *
+ * When creating an `InjectionToken`, you can optionally specify a factory function which returns
+ * (possibly by creating) a default value of the parameterized type `T`. This sets up the
+ * `InjectionToken` using this factory as a provider as if it was defined explicitly in the
+ * application's root injector. If the factory function, which takes zero arguments, needs to inject
+ * dependencies, it can do so using the `inject` function. See below for an example.
+ *
+ * Additionally, if a `factory` is specified you can also specify the `providedIn` option, which
+ * overrides the above behavior and marks the token as belonging to a particular `@NgModule`. As
+ * mentioned above, `'root'` is the default value for `providedIn`.
+ *
+ * @usageNotes
+ * ### Basic Example
+ *
+ * #### Plain InjectionToken
+ *
+ * {@example core/di/ts/injector_spec.ts region='InjectionToken'}
+ *
+ * #### Tree-shakable InjectionToken
+ *
+ * {@example core/di/ts/injector_spec.ts region='ShakableInjectionToken'}
+ *
+ */
+export class InjectionToken<T> {
+  /** @internal */
+  readonly ngMetadataName = 'InjectionToken';
+
+  readonly ngInjectableDef: never|undefined;
+
+  constructor(protected _desc: string, options?: {
+    providedIn?: Type<any>| 'root' | null,
+    factory: () => T
+  }) {
+    if (options !== undefined) {
+      this.ngInjectableDef = defineInjectable({
+        providedIn: options.providedIn || 'root',
+        factory: options.factory,
+      });
+    } else {
+      this.ngInjectableDef = undefined;
+    }
+  }
+
+  toString(): string { return `InjectionToken ${this._desc}`; }
+}
+
+export interface InjectableDefToken<T> extends InjectionToken<T> { ngInjectableDef: never; }
diff --git a/packages/core/src/di/injector.ts b/packages/core/src/di/injector.ts
new file mode 100644
index 000000000000..0b70e82f09a5
--- /dev/null
+++ b/packages/core/src/di/injector.ts
@@ -0,0 +1,509 @@
+/**
+ * @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 {Type} from '../type';
+import {stringify} from '../util';
+
+import {InjectableDef, defineInjectable} from './defs';
+import {resolveForwardRef} from './forward_ref';
+import {InjectionToken} from './injection_token';
+import {Inject, Optional, Self, SkipSelf} from './metadata';
+import {ConstructorProvider, ExistingProvider, FactoryProvider, StaticClassProvider, StaticProvider, ValueProvider} from './provider';
+
+export const SOURCE = '__source';
+const _THROW_IF_NOT_FOUND = new Object();
+export const THROW_IF_NOT_FOUND = _THROW_IF_NOT_FOUND;
+
+/**
+ * An InjectionToken that gets the current `Injector` for `createInjector()`-style injectors.
+ *
+ * Requesting this token instead of `Injector` allows `StaticInjector` to be tree-shaken from a
+ * project.
+ *
+ * @experimental
+ */
+export const INJECTOR = new InjectionToken<Injector>('INJECTOR');
+
+export class NullInjector implements Injector {
+  get(token: any, notFoundValue: any = _THROW_IF_NOT_FOUND): any {
+    if (notFoundValue === _THROW_IF_NOT_FOUND) {
+      // Intentionally left behind: With dev tools open the debugger will stop here. There is no
+      // reason why correctly written application should cause this exception.
+      // TODO(misko): uncomment the next line once `ngDevMode` works with closure.
+      // if(ngDevMode) debugger;
+      throw new Error(`NullInjectorError: No provider for ${stringify(token)}!`);
+    }
+    return notFoundValue;
+  }
+}
+
+/**
+ * Concrete injectors implement this interface.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/injector_spec.ts region='Injector'}
+ *
+ * `Injector` returns itself when given `Injector` as a token:
+ *
+ * {@example core/di/ts/injector_spec.ts region='injectInjector'}
+ *
+ *
+ */
+export abstract class Injector {
+  static THROW_IF_NOT_FOUND = _THROW_IF_NOT_FOUND;
+  static NULL: Injector = new NullInjector();
+
+  /**
+   * Retrieves an instance from the injector based on the provided token.
+   * @returns The instance from the injector if defined, otherwise the `notFoundValue`.
+   * @throws When the `notFoundValue` is `undefined` or `Injector.THROW_IF_NOT_FOUND`.
+   */
+  abstract get<T>(token: Type<T>|InjectionToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
+  /**
+   * @deprecated from v4.0.0 use Type<T> or InjectionToken<T>
+   * @suppress {duplicate}
+   */
+  abstract get(token: any, notFoundValue?: any): any;
+
+  /**
+   * @deprecated from v5 use the new signature Injector.create(options)
+   */
+  static create(providers: StaticProvider[], parent?: Injector): Injector;
+
+  static create(options: {providers: StaticProvider[], parent?: Injector, name?: string}): Injector;
+
+  /**
+   * Create a new Injector which is configure using `StaticProvider`s.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * {@example core/di/ts/provider_spec.ts region='ConstructorProvider'}
+   */
+  static create(
+      options: StaticProvider[]|{providers: StaticProvider[], parent?: Injector, name?: string},
+      parent?: Injector): Injector {
+    if (Array.isArray(options)) {
+      return new StaticInjector(options, parent);
+    } else {
+      return new StaticInjector(options.providers, options.parent, options.name || null);
+    }
+  }
+
+  static ngInjectableDef = defineInjectable({
+    providedIn: 'any' as any,
+    factory: () => inject(INJECTOR),
+  });
+}
+
+
+
+const IDENT = function<T>(value: T): T {
+  return value;
+};
+const EMPTY = <any[]>[];
+const CIRCULAR = IDENT;
+const MULTI_PROVIDER_FN = function(): any[] {
+  return Array.prototype.slice.call(arguments);
+};
+const GET_PROPERTY_NAME = {} as any;
+export const USE_VALUE =
+    getClosureSafeProperty<ValueProvider>({provide: String, useValue: GET_PROPERTY_NAME});
+const NG_TOKEN_PATH = 'ngTokenPath';
+const NG_TEMP_TOKEN_PATH = 'ngTempTokenPath';
+const enum OptionFlags {
+  Optional = 1 << 0,
+  CheckSelf = 1 << 1,
+  CheckParent = 1 << 2,
+  Default = CheckSelf | CheckParent
+}
+const NULL_INJECTOR = Injector.NULL;
+const NEW_LINE = /\n/gm;
+const NO_NEW_LINE = 'ɵ';
+
+export class StaticInjector implements Injector {
+  readonly parent: Injector;
+  readonly source: string|null;
+
+  private _records: Map<any, Record>;
+
+  constructor(
+      providers: StaticProvider[], parent: Injector = NULL_INJECTOR, source: string|null = null) {
+    this.parent = parent;
+    this.source = source;
+    const records = this._records = new Map<any, Record>();
+    records.set(
+        Injector, <Record>{token: Injector, fn: IDENT, deps: EMPTY, value: this, useNew: false});
+    records.set(
+        INJECTOR, <Record>{token: INJECTOR, fn: IDENT, deps: EMPTY, value: this, useNew: false});
+    recursivelyProcessProviders(records, providers);
+  }
+
+  get<T>(token: Type<T>|InjectionToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
+  get(token: any, notFoundValue?: any): any;
+  get(token: any, notFoundValue?: any, flags: InjectFlags = InjectFlags.Default): any {
+    const record = this._records.get(token);
+    try {
+      return tryResolveToken(token, record, this._records, this.parent, notFoundValue, flags);
+    } catch (e) {
+      const tokenPath: any[] = e[NG_TEMP_TOKEN_PATH];
+      if (token[SOURCE]) {
+        tokenPath.unshift(token[SOURCE]);
+      }
+      e.message = formatError('\n' + e.message, tokenPath, this.source);
+      e[NG_TOKEN_PATH] = tokenPath;
+      e[NG_TEMP_TOKEN_PATH] = null;
+      throw e;
+    }
+  }
+
+  toString() {
+    const tokens = <string[]>[], records = this._records;
+    records.forEach((v, token) => tokens.push(stringify(token)));
+    return `StaticInjector[${tokens.join(', ')}]`;
+  }
+}
+
+type SupportedProvider =
+    ValueProvider | ExistingProvider | StaticClassProvider | ConstructorProvider | FactoryProvider;
+
+interface Record {
+  fn: Function;
+  useNew: boolean;
+  deps: DependencyRecord[];
+  value: any;
+}
+
+interface DependencyRecord {
+  token: any;
+  options: number;
+}
+
+type TokenPath = Array<any>;
+
+function resolveProvider(provider: SupportedProvider): Record {
+  const deps = computeDeps(provider);
+  let fn: Function = IDENT;
+  let value: any = EMPTY;
+  let useNew: boolean = false;
+  let provide = resolveForwardRef(provider.provide);
+  if (USE_VALUE in provider) {
+    // We need to use USE_VALUE in provider since provider.useValue could be defined as undefined.
+    value = (provider as ValueProvider).useValue;
+  } else if ((provider as FactoryProvider).useFactory) {
+    fn = (provider as FactoryProvider).useFactory;
+  } else if ((provider as ExistingProvider).useExisting) {
+    // Just use IDENT
+  } else if ((provider as StaticClassProvider).useClass) {
+    useNew = true;
+    fn = resolveForwardRef((provider as StaticClassProvider).useClass);
+  } else if (typeof provide == 'function') {
+    useNew = true;
+    fn = provide;
+  } else {
+    throw staticError(
+        'StaticProvider does not have [useValue|useFactory|useExisting|useClass] or [provide] is not newable',
+        provider);
+  }
+  return {deps, fn, useNew, value};
+}
+
+function multiProviderMixError(token: any) {
+  return staticError('Cannot mix multi providers and regular providers', token);
+}
+
+function recursivelyProcessProviders(records: Map<any, Record>, provider: StaticProvider) {
+  if (provider) {
+    provider = resolveForwardRef(provider);
+    if (provider instanceof Array) {
+      // if we have an array recurse into the array
+      for (let i = 0; i < provider.length; i++) {
+        recursivelyProcessProviders(records, provider[i]);
+      }
+    } else if (typeof provider === 'function') {
+      // Functions were supported in ReflectiveInjector, but are not here. For safety give useful
+      // error messages
+      throw staticError('Function/Class not supported', provider);
+    } else if (provider && typeof provider === 'object' && provider.provide) {
+      // At this point we have what looks like a provider: {provide: ?, ....}
+      let token = resolveForwardRef(provider.provide);
+      const resolvedProvider = resolveProvider(provider);
+      if (provider.multi === true) {
+        // This is a multi provider.
+        let multiProvider: Record|undefined = records.get(token);
+        if (multiProvider) {
+          if (multiProvider.fn !== MULTI_PROVIDER_FN) {
+            throw multiProviderMixError(token);
+          }
+        } else {
+          // Create a placeholder factory which will look up the constituents of the multi provider.
+          records.set(token, multiProvider = <Record>{
+            token: provider.provide,
+            deps: [],
+            useNew: false,
+            fn: MULTI_PROVIDER_FN,
+            value: EMPTY
+          });
+        }
+        // Treat the provider as the token.
+        token = provider;
+        multiProvider.deps.push({token, options: OptionFlags.Default});
+      }
+      const record = records.get(token);
+      if (record && record.fn == MULTI_PROVIDER_FN) {
+        throw multiProviderMixError(token);
+      }
+      records.set(token, resolvedProvider);
+    } else {
+      throw staticError('Unexpected provider', provider);
+    }
+  }
+}
+
+function tryResolveToken(
+    token: any, record: Record | undefined, records: Map<any, Record>, parent: Injector,
+    notFoundValue: any, flags: InjectFlags): any {
+  try {
+    return resolveToken(token, record, records, parent, notFoundValue, flags);
+  } catch (e) {
+    // ensure that 'e' is of type Error.
+    if (!(e instanceof Error)) {
+      e = new Error(e);
+    }
+    const path: any[] = e[NG_TEMP_TOKEN_PATH] = e[NG_TEMP_TOKEN_PATH] || [];
+    path.unshift(token);
+    if (record && record.value == CIRCULAR) {
+      // Reset the Circular flag.
+      record.value = EMPTY;
+    }
+    throw e;
+  }
+}
+
+function resolveToken(
+    token: any, record: Record | undefined, records: Map<any, Record>, parent: Injector,
+    notFoundValue: any, flags: InjectFlags): any {
+  let value;
+  if (record && !(flags & InjectFlags.SkipSelf)) {
+    // If we don't have a record, this implies that we don't own the provider hence don't know how
+    // to resolve it.
+    value = record.value;
+    if (value == CIRCULAR) {
+      throw Error(NO_NEW_LINE + 'Circular dependency');
+    } else if (value === EMPTY) {
+      record.value = CIRCULAR;
+      let obj = undefined;
+      let useNew = record.useNew;
+      let fn = record.fn;
+      let depRecords = record.deps;
+      let deps = EMPTY;
+      if (depRecords.length) {
+        deps = [];
+        for (let i = 0; i < depRecords.length; i++) {
+          const depRecord: DependencyRecord = depRecords[i];
+          const options = depRecord.options;
+          const childRecord =
+              options & OptionFlags.CheckSelf ? records.get(depRecord.token) : undefined;
+          deps.push(tryResolveToken(
+              // Current Token to resolve
+              depRecord.token,
+              // A record which describes how to resolve the token.
+              // If undefined, this means we don't have such a record
+              childRecord,
+              // Other records we know about.
+              records,
+              // If we don't know how to resolve dependency and we should not check parent for it,
+              // than pass in Null injector.
+              !childRecord && !(options & OptionFlags.CheckParent) ? NULL_INJECTOR : parent,
+              options & OptionFlags.Optional ? null : Injector.THROW_IF_NOT_FOUND,
+              InjectFlags.Default));
+        }
+      }
+      record.value = value = useNew ? new (fn as any)(...deps) : fn.apply(obj, deps);
+    }
+  } else if (!(flags & InjectFlags.Self)) {
+    value = parent.get(token, notFoundValue, InjectFlags.Default);
+  }
+  return value;
+}
+
+
+function computeDeps(provider: StaticProvider): DependencyRecord[] {
+  let deps: DependencyRecord[] = EMPTY;
+  const providerDeps: any[] =
+      (provider as ExistingProvider & StaticClassProvider & ConstructorProvider).deps;
+  if (providerDeps && providerDeps.length) {
+    deps = [];
+    for (let i = 0; i < providerDeps.length; i++) {
+      let options = OptionFlags.Default;
+      let token = resolveForwardRef(providerDeps[i]);
+      if (token instanceof Array) {
+        for (let j = 0, annotations = token; j < annotations.length; j++) {
+          const annotation = annotations[j];
+          if (annotation instanceof Optional || annotation == Optional) {
+            options = options | OptionFlags.Optional;
+          } else if (annotation instanceof SkipSelf || annotation == SkipSelf) {
+            options = options & ~OptionFlags.CheckSelf;
+          } else if (annotation instanceof Self || annotation == Self) {
+            options = options & ~OptionFlags.CheckParent;
+          } else if (annotation instanceof Inject) {
+            token = (annotation as Inject).token;
+          } else {
+            token = resolveForwardRef(annotation);
+          }
+        }
+      }
+      deps.push({token, options});
+    }
+  } else if ((provider as ExistingProvider).useExisting) {
+    const token = resolveForwardRef((provider as ExistingProvider).useExisting);
+    deps = [{token, options: OptionFlags.Default}];
+  } else if (!providerDeps && !(USE_VALUE in provider)) {
+    // useValue & useExisting are the only ones which are exempt from deps all others need it.
+    throw staticError('\'deps\' required', provider);
+  }
+  return deps;
+}
+
+function formatError(text: string, obj: any, source: string | null = null): string {
+  text = text && text.charAt(0) === '\n' && text.charAt(1) == NO_NEW_LINE ? text.substr(2) : text;
+  let context = stringify(obj);
+  if (obj instanceof Array) {
+    context = obj.map(stringify).join(' -> ');
+  } else if (typeof obj === 'object') {
+    let parts = <string[]>[];
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        let value = obj[key];
+        parts.push(
+            key + ':' + (typeof value === 'string' ? JSON.stringify(value) : stringify(value)));
+      }
+    }
+    context = `{${parts.join(', ')}}`;
+  }
+  return `StaticInjectorError${source ? '(' + source + ')' : ''}[${context}]: ${text.replace(NEW_LINE, '\n  ')}`;
+}
+
+function staticError(text: string, obj: any): Error {
+  return new Error(formatError(text, obj));
+}
+
+function getClosureSafeProperty<T>(objWithPropertyToExtract: T): string {
+  for (let key in objWithPropertyToExtract) {
+    if (objWithPropertyToExtract[key] === GET_PROPERTY_NAME) {
+      return key;
+    }
+  }
+  throw Error('!prop');
+}
+
+/**
+ * Injection flags for DI.
+ */
+export const enum InjectFlags {
+  Default = 0b0000,
+
+  /**
+   * Specifies that an injector should retrieve a dependency from any injector until reaching the
+   * host element of the current component. (Only used with Element Injector)
+   */
+  Host = 0b0001,
+  /** Don't descend into ancestors of the node requesting injection. */
+  Self = 0b0010,
+  /** Skip the node that is requesting injection. */
+  SkipSelf = 0b0100,
+  /** Inject `defaultValue` instead if token not found. */
+  Optional = 0b1000,
+}
+
+/**
+ * Current injector value used by `inject`.
+ * - `undefined`: it is an error to call `inject`
+ * - `null`: `inject` can be called but there is no injector (limp-mode).
+ * - Injector instance: Use the injector for resolution.
+ */
+let _currentInjector: Injector|undefined|null = undefined;
+
+export function setCurrentInjector(injector: Injector | null | undefined): Injector|undefined|null {
+  const former = _currentInjector;
+  _currentInjector = injector;
+  return former;
+}
+
+/**
+ * Injects a token from the currently active injector.
+ *
+ * This function must be used in the context of a factory function such as one defined for an
+ * `InjectionToken`, and will throw an error if not called from such a context.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/injector_spec.ts region='ShakeableInjectionToken'}
+ *
+ * Within such a factory function `inject` is utilized to request injection of a dependency, instead
+ * of providing an additional array of dependencies as was common to do with `useFactory` providers.
+ * `inject` is faster and more type-safe.
+ *
+ * @experimental
+ */
+export function inject<T>(token: Type<T>| InjectionToken<T>): T;
+export function inject<T>(token: Type<T>| InjectionToken<T>, flags?: InjectFlags): T|null;
+export function inject<T>(token: Type<T>| InjectionToken<T>, flags = InjectFlags.Default): T|null {
+  if (_currentInjector === undefined) {
+    throw new Error(`inject() must be called from an injection context`);
+  } else if (_currentInjector === null) {
+    const injectableDef: InjectableDef<T> = (token as any).ngInjectableDef;
+    if (injectableDef && injectableDef.providedIn == 'root') {
+      return injectableDef.value === undefined ? injectableDef.value = injectableDef.factory() :
+                                                 injectableDef.value;
+    }
+    if (flags & InjectFlags.Optional) return null;
+    throw new Error(`Injector: NOT_FOUND [${stringify(token)}]`);
+  } else {
+    return _currentInjector.get(token, flags & InjectFlags.Optional ? null : undefined, flags);
+  }
+}
+
+export function injectArgs(types: (Type<any>| InjectionToken<any>| any[])[]): any[] {
+  const args: any[] = [];
+  for (let i = 0; i < types.length; i++) {
+    const arg = types[i];
+    if (Array.isArray(arg)) {
+      if (arg.length === 0) {
+        throw new Error('Arguments array must have arguments.');
+      }
+      let type: Type<any>|undefined = undefined;
+      let flags: InjectFlags = InjectFlags.Default;
+
+      for (let j = 0; j < arg.length; j++) {
+        const meta = arg[j];
+        if (meta instanceof Optional || meta.ngMetadataName === 'Optional') {
+          flags |= InjectFlags.Optional;
+        } else if (meta instanceof SkipSelf || meta.ngMetadataName === 'SkipSelf') {
+          flags |= InjectFlags.SkipSelf;
+        } else if (meta instanceof Self || meta.ngMetadataName === 'Self') {
+          flags |= InjectFlags.Self;
+        } else if (meta instanceof Inject) {
+          type = meta.token;
+        } else {
+          type = meta;
+        }
+      }
+
+      args.push(inject(type !, flags));
+    } else {
+      args.push(inject(arg));
+    }
+  }
+  return args;
+}
diff --git a/packages/core/src/di/metadata.ts b/packages/core/src/di/metadata.ts
new file mode 100644
index 000000000000..8198c9d0ea1c
--- /dev/null
+++ b/packages/core/src/di/metadata.ts
@@ -0,0 +1,188 @@
+/**
+ * @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 {ClassSansProvider, ConstructorProvider, ConstructorSansProvider, ExistingProvider, ExistingSansProvider, FactoryProvider, FactorySansProvider, StaticClassProvider, StaticClassSansProvider, ValueProvider, ValueSansProvider} from '../di/provider';
+import {ReflectionCapabilities} from '../reflection/reflection_capabilities';
+import {Type} from '../type';
+import {makeDecorator, makeParamDecorator} from '../util/decorators';
+import {EMPTY_ARRAY} from '../view/util';
+
+
+/**
+ * Type of the Inject decorator / constructor function.
+ */
+export interface InjectDecorator {
+  /**
+   * A constructor parameter decorator that specifies a
+   * custom provider of a dependency.
+   *
+   * @see ["Dependency Injection Guide"](guide/dependency-injection).
+   *
+   * @usageNotes
+   * The following example shows a class constructor that specifies a
+   * custom provider of a dependency using the parameter decorator.
+   *
+   * {@example core/di/ts/metadata_spec.ts region='Inject'}
+   *
+   * When `@Inject()` is not present, the `Injector` uses the type annotation of the
+   * parameter as the provider.
+   *
+   * {@example core/di/ts/metadata_spec.ts region='InjectWithoutDecorator'}
+   */
+  (token: any): any;
+  new (token: any): Inject;
+}
+
+/**
+ * Type of the Inject metadata.
+ */
+export interface Inject {
+  /**
+   * Injector token that maps to the dependency to be injected.
+   */
+  token: any;
+}
+
+/**
+ * Inject decorator and metadata.
+ *
+ * @Annotation
+ */
+export const Inject: InjectDecorator = makeParamDecorator('Inject', (token: any) => ({token}));
+
+
+/**
+ * Type of the Optional decorator / constructor function.
+ */
+export interface OptionalDecorator {
+  /**
+   * A constructor parameter decorator that marks a dependency as optional.
+   *
+   * The DI framework provides null if the dependency is not found.
+   * For example, the following code allows the possibility of a null result:  
+   *
+   * {@example core/di/ts/metadata_spec.ts region='Optional'}
+   *
+   * @see ["Dependency Injection Guide"](guide/dependency-injection).
+   */
+  (): any;
+  new (): Optional;
+}
+
+/**
+ * Type of the Optional metadata.
+ */
+export interface Optional {}
+
+/**
+ * Optional decorator and metadata.
+ *
+ * @Annotation
+ */
+export const Optional: OptionalDecorator = makeParamDecorator('Optional');
+
+/**
+ * Type of the Self decorator / constructor function.
+ */
+export interface SelfDecorator {
+  /**
+   * A constructor parameter decorator that tells the DI framework
+   * to retrieve a dependency only from the local injector.
+   *
+   * In the following example, the dependency can be resolved
+   * by the local injector when instantiating the class itself, but not
+   * when instantiating a child.
+   *
+   * {@example core/di/ts/metadata_spec.ts region='Self'}
+   *
+   * @see ["Dependency Injection Guide"](guide/dependency-injection).
+   *
+   *
+   */
+  (): any;
+  new (): Self;
+}
+
+/**
+ * Type of the Self metadata.
+ */
+export interface Self {}
+
+/**
+ * Self decorator and metadata.
+ *
+ * @Annotation
+ */
+export const Self: SelfDecorator = makeParamDecorator('Self');
+
+
+/**
+ * Type of the SkipSelf decorator / constructor function.
+ */
+export interface SkipSelfDecorator {
+  /**
+   * A constructor parameter decorator that tells the DI framework
+   * that dependency resolution should start from the parent injector.
+   *
+   * In the following example, the dependency can be resolved when
+   * instantiating a child, but not when instantiating the class itself.
+   *
+   * {@example core/di/ts/metadata_spec.ts region='SkipSelf'}
+   *
+   * @see ["Dependency Injection Guide"](guide/dependency-injection).
+   *
+   *
+   */
+  (): any;
+  new (): SkipSelf;
+}
+
+/**
+ * Type of the SkipSelf metadata.
+ *
+ *
+ */
+export interface SkipSelf {}
+
+/**
+ * SkipSelf decorator and metadata.
+ *
+ * @Annotation
+ */
+export const SkipSelf: SkipSelfDecorator = makeParamDecorator('SkipSelf');
+
+/**
+ * Type of the Host decorator / constructor function.
+ */
+export interface HostDecorator {
+  /**
+   * A constructor parameter decorator that tells the DI framework
+   * to retrieve a dependency from any injector until
+   * reaching the host element of the current component.
+   *
+   * @see ["Dependency Injection Guide"](guide/dependency-injection).
+   *
+   * @usageNotes 
+   *
+   * {@example core/di/ts/metadata_spec.ts region='Host'}
+   */
+  (): any;
+  new (): Host;
+}
+
+/**
+ * Type of the Host metadata.
+ */
+export interface Host {}
+
+/**
+ * Host decorator and metadata.
+ *
+ * @Annotation
+ */
+export const Host: HostDecorator = makeParamDecorator('Host');
diff --git a/packages/core/src/di/provider.ts b/packages/core/src/di/provider.ts
new file mode 100644
index 000000000000..635af80b6c5c
--- /dev/null
+++ b/packages/core/src/di/provider.ts
@@ -0,0 +1,353 @@
+/**
+ * @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 {Type} from '../type';
+
+/**
+ * Configures the `Injector` to return a value for a token.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='ValueSansProvider'}
+ *
+ * @experimental
+ */
+export interface ValueSansProvider {
+  /**
+   * The value to inject.
+   */
+  useValue: any;
+}
+
+/**
+ * Configures the `Injector` to return a value for a token.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='ValueProvider'}
+ *
+ * ### Multi-value example
+ *
+ * {@example core/di/ts/provider_spec.ts region='MultiProviderAspect'}
+ */
+export interface ValueProvider extends ValueSansProvider {
+  /**
+   * An injection token. (Typically an instance of `Type` or `InjectionToken`, but can be `any`).
+   */
+  provide: any;
+
+  /**
+   * If true, then injector returns an array of instances. This is useful to allow multiple
+   * providers spread across many files to provide configuration information to a common token.
+   */
+  multi?: boolean;
+}
+
+/**
+ * Configures the `Injector` to return an instance of `useClass` for a token.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='StaticClassSansProvider'}
+ *
+ * @experimental
+ */
+export interface StaticClassSansProvider {
+  /**
+   * An optional class to instantiate for the `token`. (If not provided `provide` is assumed to be a
+   * class to instantiate)
+   */
+  useClass: Type<any>;
+
+  /**
+   * A list of `token`s which need to be resolved by the injector. The list of values is then
+   * used as arguments to the `useClass` constructor.
+   */
+  deps: any[];
+}
+
+/**
+ * Configures the `Injector` to return an instance of `useClass` for a token.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='StaticClassProvider'}
+ *
+ * Note that following two providers are not equal:
+ *
+ * {@example core/di/ts/provider_spec.ts region='StaticClassProviderDifference'}
+ *
+ * ### Multi-value example
+ *
+ * {@example core/di/ts/provider_spec.ts region='MultiProviderAspect'}
+ */
+export interface StaticClassProvider extends StaticClassSansProvider {
+  /**
+   * An injection token. (Typically an instance of `Type` or `InjectionToken`, but can be `any`).
+   */
+  provide: any;
+
+  /**
+   * If true, then injector returns an array of instances. This is useful to allow multiple
+   * providers spread across many files to provide configuration information to a common token.
+   */
+  multi?: boolean;
+}
+
+/**
+ * Configures the `Injector` to return an instance of a token.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```
+ * @Injectable(SomeModule, {deps: []})
+ * class MyService {}
+ * ```
+ *
+ * @experimental
+ */
+export interface ConstructorSansProvider {
+  /**
+   * A list of `token`s which need to be resolved by the injector. The list of values is then
+   * used as arguments to the `useClass` constructor.
+   */
+  deps?: any[];
+}
+
+/**
+ * Configures the `Injector` to return an instance of a token.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='ConstructorProvider'}
+ *
+ * ### Multi-value example
+ *
+ * {@example core/di/ts/provider_spec.ts region='MultiProviderAspect'}
+ */
+export interface ConstructorProvider extends ConstructorSansProvider {
+  /**
+   * An injection token. (Typically an instance of `Type` or `InjectionToken`, but can be `any`).
+   */
+  provide: Type<any>;
+
+  /**
+   * If true, then injector returns an array of instances. This is useful to allow multiple
+   * providers spread across many files to provide configuration information to a common token.
+   */
+  multi?: boolean;
+}
+
+/**
+ * Configures the `Injector` to return a value of another `useExisting` token.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='ExistingSansProvider'}
+ */
+export interface ExistingSansProvider {
+  /**
+   * Existing `token` to return. (equivalent to `injector.get(useExisting)`)
+   */
+  useExisting: any;
+}
+
+/**
+ * Configures the `Injector` to return a value of another `useExisting` token.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='ExistingProvider'}
+ *
+ * ### Multi-value example
+ *
+ * {@example core/di/ts/provider_spec.ts region='MultiProviderAspect'}
+ */
+export interface ExistingProvider extends ExistingSansProvider {
+  /**
+   * An injection token. (Typically an instance of `Type` or `InjectionToken`, but can be `any`).
+   */
+  provide: any;
+
+  /**
+   * If true, then injector returns an array of instances. This is useful to allow multiple
+   * providers spread across many files to provide configuration information to a common token.
+   */
+  multi?: boolean;
+}
+
+/**
+ * Configures the `Injector` to return a value by invoking a `useFactory` function.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='FactorySansProvider'}
+ *
+ * @experimental
+ */
+export interface FactorySansProvider {
+  /**
+   * A function to invoke to create a value for this `token`. The function is invoked with
+   * resolved values of `token`s in the `deps` field.
+   */
+  useFactory: Function;
+
+  /**
+   * A list of `token`s which need to be resolved by the injector. The list of values is then
+   * used as arguments to the `useFactory` function.
+   */
+  deps?: any[];
+}
+
+/**
+ * Configures the `Injector` to return a value by invoking a `useFactory` function.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='FactoryProvider'}
+ *
+ * Dependencies can also be marked as optional:
+ *
+ * {@example core/di/ts/provider_spec.ts region='FactoryProviderOptionalDeps'}
+ *
+ * ### Multi-value example
+ *
+ * {@example core/di/ts/provider_spec.ts region='MultiProviderAspect'}
+ */
+export interface FactoryProvider extends FactorySansProvider {
+  /**
+   * An injection token. (Typically an instance of `Type` or `InjectionToken`, but can be `any`).
+   */
+  provide: any;
+
+  /**
+   * If true, then injector returns an array of instances. This is useful to allow multiple
+   * providers spread across many files to provide configuration information to a common token.
+   */
+  multi?: boolean;
+}
+
+/**
+ * Describes how the `Injector` should be configured in a static way (Without reflection).
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @see `ValueProvider`
+ * @see `ExistingProvider`
+ * @see `FactoryProvider`
+ */
+export type StaticProvider = ValueProvider | ExistingProvider | StaticClassProvider |
+    ConstructorProvider | FactoryProvider | any[];
+
+
+/**
+ * Configures the `Injector` to return an instance of `Type` when `Type' is used as the token.
+ *
+ * Create an instance by invoking the `new` operator and supplying additional arguments.
+ * This form is a short form of `TypeProvider`;
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='TypeProvider'}
+ */
+export interface TypeProvider extends Type<any> {}
+
+/**
+ * Configures the `Injector` to return a value by invoking a `useClass` function.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='ClassSansProvider'}
+ *
+ * @experimental
+ */
+export interface ClassSansProvider {
+  /**
+   * Class to instantiate for the `token`.
+   */
+  useClass: Type<any>;
+}
+
+/**
+ * Configures the `Injector` to return an instance of `useClass` for a token.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/di/ts/provider_spec.ts region='ClassProvider'}
+ *
+ * Note that following two providers are not equal:
+ *
+ * {@example core/di/ts/provider_spec.ts region='ClassProviderDifference'}
+ *
+ * ### Multi-value example
+ *
+ * {@example core/di/ts/provider_spec.ts region='MultiProviderAspect'}
+ */
+export interface ClassProvider extends ClassSansProvider {
+  /**
+   * An injection token. (Typically an instance of `Type` or `InjectionToken`, but can be `any`).
+   */
+  provide: any;
+
+  /**
+   * If true, then injector returns an array of instances. This is useful to allow multiple
+   * providers spread across many files to provide configuration information to a common token.
+   */
+  multi?: boolean;
+}
+
+/**
+ * Describes how the `Injector` should be configured.
+ *
+ * For more details, see the ["Dependency Injection Guide"](guide/dependency-injection).
+ *
+ * @see `TypeProvider`
+ * @see `ClassProvider`
+ * @see `StaticProvider`
+ */
+export type Provider = TypeProvider | ValueProvider | ClassProvider | ConstructorProvider |
+    ExistingProvider | FactoryProvider | any[];
diff --git a/packages/core/src/di/r3_injector.ts b/packages/core/src/di/r3_injector.ts
new file mode 100644
index 000000000000..9696aa1e827f
--- /dev/null
+++ b/packages/core/src/di/r3_injector.ts
@@ -0,0 +1,414 @@
+/**
+ * @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 {OnDestroy} from '../metadata/lifecycle_hooks';
+import {Type} from '../type';
+import {stringify} from '../util';
+
+import {InjectableDef, InjectableType, InjectorDef, InjectorType, InjectorTypeWithProviders} from './defs';
+import {resolveForwardRef} from './forward_ref';
+import {InjectableDefToken, InjectionToken} from './injection_token';
+import {INJECTOR, InjectFlags, Injector, NullInjector, THROW_IF_NOT_FOUND, USE_VALUE, inject, injectArgs, setCurrentInjector} from './injector';
+import {ClassProvider, ConstructorProvider, ExistingProvider, FactoryProvider, Provider, StaticClassProvider, StaticProvider, TypeProvider, ValueProvider} from './provider';
+import {APP_ROOT} from './scope';
+
+
+
+/**
+ * Internal type for a single provider in a deep provider array.
+ */
+type SingleProvider = TypeProvider | ValueProvider | ClassProvider | ConstructorProvider |
+    ExistingProvider | FactoryProvider | StaticClassProvider;
+
+/**
+ * Marker which indicates that a value has not yet been created from the factory function.
+ */
+const NOT_YET = {};
+
+/**
+ * Marker which indicates that the factory function for a token is in the process of being called.
+ *
+ * If the injector is asked to inject a token with its value set to CIRCULAR, that indicates
+ * injection of a dependency has recursively attempted to inject the original token, and there is
+ * a circular dependency among the providers.
+ */
+const CIRCULAR = {};
+
+const EMPTY_ARRAY = [] as any[];
+
+/**
+ * A lazily initialized NullInjector.
+ */
+let NULL_INJECTOR: Injector|undefined = undefined;
+
+function getNullInjector(): Injector {
+  if (NULL_INJECTOR === undefined) {
+    NULL_INJECTOR = new NullInjector();
+  }
+  return NULL_INJECTOR;
+}
+
+/**
+ * An entry in the injector which tracks information about the given token, including a possible
+ * current value.
+ */
+interface Record<T> {
+  factory: (() => T)|undefined;
+  value: T|{};
+  multi: any[]|undefined;
+}
+
+/**
+ * Create a new `Injector` which is configured using a `defType` of `InjectorType<any>`s.
+ *
+ * @experimental
+ */
+export function createInjector(
+    defType: /* InjectorType<any> */ any, parent: Injector | null = null,
+    additionalProviders: StaticProvider[] | null = null): Injector {
+  parent = parent || getNullInjector();
+  return new R3Injector(defType, additionalProviders, parent);
+}
+
+export class R3Injector {
+  /**
+   * Map of tokens to records which contain the instances of those tokens.
+   */
+  private records = new Map<Type<any>|InjectionToken<any>, Record<any>>();
+
+  /**
+   * The transitive set of `InjectorType`s which define this injector.
+   */
+  private injectorDefTypes = new Set<InjectorType<any>>();
+
+  /**
+   * Set of values instantiated by this injector which contain `ngOnDestroy` lifecycle hooks.
+   */
+  private onDestroy = new Set<OnDestroy>();
+
+  /**
+   * Flag indicating this injector provides the APP_ROOT_SCOPE token, and thus counts as the
+   * root scope.
+   */
+  private readonly isRootInjector: boolean;
+
+  /**
+   * Flag indicating that this injector was previously destroyed.
+   */
+  private destroyed = false;
+
+  constructor(
+      def: InjectorType<any>, additionalProviders: StaticProvider[]|null,
+      readonly parent: Injector) {
+    // Start off by creating Records for every provider declared in every InjectorType
+    // included transitively in `def`.
+    deepForEach(
+        [def], injectorDef => this.processInjectorType(injectorDef, new Set<InjectorType<any>>()));
+
+    additionalProviders &&
+        deepForEach(additionalProviders, provider => this.processProvider(provider));
+
+
+    // Make sure the INJECTOR token provides this injector.
+    this.records.set(INJECTOR, makeRecord(undefined, this));
+
+    // Detect whether this injector has the APP_ROOT_SCOPE token and thus should provide
+    // any injectable scoped to APP_ROOT_SCOPE.
+    this.isRootInjector = this.records.has(APP_ROOT);
+
+    // Eagerly instantiate the InjectorType classes themselves.
+    this.injectorDefTypes.forEach(defType => this.get(defType));
+  }
+
+  /**
+   * Destroy the injector and release references to every instance or provider associated with it.
+   *
+   * Also calls the `OnDestroy` lifecycle hooks of every instance that was created for which a
+   * hook was found.
+   */
+  destroy(): void {
+    this.assertNotDestroyed();
+
+    // Set destroyed = true first, in case lifecycle hooks re-enter destroy().
+    this.destroyed = true;
+    try {
+      // Call all the lifecycle hooks.
+      this.onDestroy.forEach(service => service.ngOnDestroy());
+    } finally {
+      // Release all references.
+      this.records.clear();
+      this.onDestroy.clear();
+      this.injectorDefTypes.clear();
+    }
+  }
+
+  get<T>(
+      token: Type<T>|InjectionToken<T>, notFoundValue: any = THROW_IF_NOT_FOUND,
+      flags = InjectFlags.Default): T {
+    this.assertNotDestroyed();
+    // Set the injection context.
+    const previousInjector = setCurrentInjector(this);
+    try {
+      // Check for the SkipSelf flag.
+      if (!(flags & InjectFlags.SkipSelf)) {
+        // SkipSelf isn't set, check if the record belongs to this injector.
+        let record: Record<T>|undefined = this.records.get(token);
+        if (record === undefined) {
+          // No record, but maybe the token is scoped to this injector. Look for an ngInjectableDef
+          // with a scope matching this injector.
+          const def = couldBeInjectableType(token) &&
+                  (token as InjectableType<any>| InjectableDefToken<any>).ngInjectableDef ||
+              undefined;
+          if (def !== undefined && this.injectableDefInScope(def)) {
+            // Found an ngInjectableDef and it's scoped to this injector. Pretend as if it was here
+            // all along.
+            record = injectableDefRecord(token);
+            this.records.set(token, record);
+          }
+        }
+        // If a record was found, get the instance for it and return it.
+        if (record !== undefined) {
+          return this.hydrate(token, record);
+        }
+      }
+
+      // Select the next injector based on the Self flag - if self is set, the next injector is
+      // the NullInjector, otherwise it's the parent.
+      let next = !(flags & InjectFlags.Self) ? this.parent : getNullInjector();
+      return this.parent.get(token, notFoundValue);
+    } finally {
+      // Lastly, clean up the state by restoring the previous injector.
+      setCurrentInjector(previousInjector);
+    }
+  }
+
+  private assertNotDestroyed(): void {
+    if (this.destroyed) {
+      throw new Error('Injector has already been destroyed.');
+    }
+  }
+
+  /**
+   * Add an `InjectorType` or `InjectorDefTypeWithProviders` and all of its transitive providers
+   * to this injector.
+   */
+  private processInjectorType(
+      defOrWrappedDef: InjectorType<any>|InjectorTypeWithProviders<any>,
+      parents: Set<InjectorType<any>>) {
+    defOrWrappedDef = resolveForwardRef(defOrWrappedDef);
+
+    // Either the defOrWrappedDef is an InjectorType (with ngInjectorDef) or an
+    // InjectorDefTypeWithProviders (aka ModuleWithProviders). Detecting either is a megamorphic
+    // read, so care is taken to only do the read once.
+
+    // First attempt to read the ngInjectorDef.
+    let def = (defOrWrappedDef as InjectorType<any>).ngInjectorDef as(InjectorDef<any>| undefined);
+
+    // If that's not present, then attempt to read ngModule from the InjectorDefTypeWithProviders.
+    const ngModule =
+        (def == null) && (defOrWrappedDef as InjectorTypeWithProviders<any>).ngModule || undefined;
+
+    // Determine the InjectorType. In the case where `defOrWrappedDef` is an `InjectorType`,
+    // then this is easy. In the case of an InjectorDefTypeWithProviders, then the definition type
+    // is the `ngModule`.
+    const defType: InjectorType<any> =
+        (ngModule === undefined) ? (defOrWrappedDef as InjectorType<any>) : ngModule;
+
+    // If defOrWrappedType was an InjectorDefTypeWithProviders, then .providers may hold some
+    // extra providers.
+    const providers =
+        (ngModule !== undefined) && (defOrWrappedDef as InjectorTypeWithProviders<any>).providers ||
+        EMPTY_ARRAY;
+
+    // Finally, if defOrWrappedType was an `InjectorDefTypeWithProviders`, then the actual
+    // `InjectorDef` is on its `ngModule`.
+    if (ngModule !== undefined) {
+      def = ngModule.ngInjectorDef;
+    }
+
+    // If no definition was found, it might be from exports. Remove it.
+    if (def == null) {
+      return;
+    }
+
+    // Check for circular dependencies.
+    if (parents.has(defType)) {
+      throw new Error(`Circular dependency: type ${stringify(defType)} ends up importing itself.`);
+    }
+
+    // Track the InjectorType and add a provider for it.
+    this.injectorDefTypes.add(defType);
+    this.records.set(defType, makeRecord(def.factory));
+
+    // Add providers in the same way that @NgModule resolution did:
+
+    // First, include providers from any imports.
+    if (def.imports != null) {
+      // Before processing defType's imports, add it to the set of parents. This way, if it ends
+      // up deeply importing itself, this can be detected.
+      parents.add(defType);
+      try {
+        deepForEach(def.imports, imported => this.processInjectorType(imported, parents));
+      } finally {
+        // Remove it from the parents set when finished.
+        parents.delete(defType);
+      }
+    }
+
+    // Next, include providers listed on the definition itself.
+    if (def.providers != null) {
+      deepForEach(def.providers, provider => this.processProvider(provider));
+    }
+
+    // Finally, include providers from an InjectorDefTypeWithProviders if there was one.
+    deepForEach(providers, provider => this.processProvider(provider));
+  }
+
+  /**
+   * Process a `SingleProvider` and add it.
+   */
+  private processProvider(provider: SingleProvider): void {
+    // Determine the token from the provider. Either it's its own token, or has a {provide: ...}
+    // property.
+    provider = resolveForwardRef(provider);
+    let token: any = isTypeProvider(provider) ? provider : resolveForwardRef(provider.provide);
+
+    // Construct a `Record` for the provider.
+    const record = providerToRecord(provider);
+
+    if (!isTypeProvider(provider) && provider.multi === true) {
+      // If the provider indicates that it's a multi-provider, process it specially.
+      // First check whether it's been defined already.
+      let multiRecord = this.records.get(token);
+      if (multiRecord) {
+        // It has. Throw a nice error if
+        if (multiRecord.multi === undefined) {
+          throw new Error(`Mixed multi-provider for ${token}.`);
+        }
+      } else {
+        multiRecord = makeRecord(undefined, NOT_YET, true);
+        multiRecord.factory = () => injectArgs(multiRecord !.multi !);
+        this.records.set(token, multiRecord);
+      }
+      token = provider;
+      multiRecord.multi !.push(provider);
+    } else {
+      const existing = this.records.get(token);
+      if (existing && existing.multi !== undefined) {
+        throw new Error(`Mixed multi-provider for ${stringify(token)}`);
+      }
+    }
+    this.records.set(token, record);
+  }
+
+  private hydrate<T>(token: Type<T>|InjectionToken<T>, record: Record<T>): T {
+    if (record.value === CIRCULAR) {
+      throw new Error(`Circular dep for ${stringify(token)}`);
+    } else if (record.value === NOT_YET) {
+      record.value = CIRCULAR;
+      record.value = record.factory !();
+    }
+    if (typeof record.value === 'object' && record.value && hasOnDestroy(record.value)) {
+      this.onDestroy.add(record.value);
+    }
+    return record.value as T;
+  }
+
+  private injectableDefInScope(def: InjectableDef<any>): boolean {
+    if (!def.providedIn) {
+      return false;
+    } else if (typeof def.providedIn === 'string') {
+      return def.providedIn === 'any' || (def.providedIn === 'root' && this.isRootInjector);
+    } else {
+      return this.injectorDefTypes.has(def.providedIn);
+    }
+  }
+}
+
+function injectableDefRecord(token: Type<any>| InjectionToken<any>): Record<any> {
+  const def = (token as InjectableType<any>).ngInjectableDef as InjectableDef<any>;
+  if (def === undefined) {
+    if (token instanceof InjectionToken) {
+      throw new Error(`Token ${stringify(token)} is missing an ngInjectableDef definition.`);
+    }
+    // TODO(alxhub): there should probably be a strict mode which throws here instead of assuming a
+    // no-args constructor.
+    return makeRecord(() => new (token as Type<any>)());
+  }
+  return makeRecord(def.factory);
+}
+
+function providerToRecord(provider: SingleProvider): Record<any> {
+  let token = resolveForwardRef(provider);
+  let value: any = NOT_YET;
+  let factory: (() => any)|undefined = undefined;
+  if (isTypeProvider(provider)) {
+    return injectableDefRecord(provider);
+  } else {
+    token = resolveForwardRef(provider.provide);
+    if (isValueProvider(provider)) {
+      value = provider.useValue;
+    } else if (isExistingProvider(provider)) {
+      factory = () => inject(provider.useExisting);
+    } else if (isFactoryProvider(provider)) {
+      factory = () => provider.useFactory(...injectArgs(provider.deps || []));
+    } else {
+      const classRef = (provider as StaticClassProvider | ClassProvider).useClass || token;
+      if (hasDeps(provider)) {
+        factory = () => new (classRef)(...injectArgs(provider.deps));
+      } else {
+        return injectableDefRecord(classRef);
+      }
+    }
+  }
+  return makeRecord(factory, value);
+}
+
+function makeRecord<T>(
+    factory: (() => T) | undefined, value: T | {} = NOT_YET, multi: boolean = false): Record<T> {
+  return {
+    factory: factory,
+    value: value,
+    multi: multi ? [] : undefined,
+  };
+}
+
+function deepForEach<T>(input: (T | any[])[], fn: (value: T) => void): void {
+  input.forEach(value => Array.isArray(value) ? deepForEach(value, fn) : fn(value));
+}
+
+function isValueProvider(value: SingleProvider): value is ValueProvider {
+  return USE_VALUE in value;
+}
+
+function isExistingProvider(value: SingleProvider): value is ExistingProvider {
+  return !!(value as ExistingProvider).useExisting;
+}
+
+function isFactoryProvider(value: SingleProvider): value is FactoryProvider {
+  return !!(value as FactoryProvider).useFactory;
+}
+
+function isTypeProvider(value: SingleProvider): value is TypeProvider {
+  return typeof value === 'function';
+}
+
+function hasDeps(value: ClassProvider | ConstructorProvider | StaticClassProvider):
+    value is ClassProvider&{deps: any[]} {
+  return !!(value as any).deps;
+}
+
+function hasOnDestroy(value: any): value is OnDestroy {
+  return typeof value === 'object' && value != null && (value as OnDestroy).ngOnDestroy &&
+      typeof(value as OnDestroy).ngOnDestroy === 'function';
+}
+
+function couldBeInjectableType(value: any): value is Type<any>|InjectionToken<any> {
+  return (typeof value === 'function') ||
+      (typeof value === 'object' && value instanceof InjectionToken);
+}
diff --git a/packages/core/src/di/reflective_errors.ts b/packages/core/src/di/reflective_errors.ts
new file mode 100644
index 000000000000..c88ffa441dbe
--- /dev/null
+++ b/packages/core/src/di/reflective_errors.ts
@@ -0,0 +1,250 @@
+/**
+ * @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 {wrappedError} from '../error_handler';
+import {ERROR_ORIGINAL_ERROR, getOriginalError} from '../errors';
+import {Type} from '../type';
+import {stringify} from '../util';
+
+import {ReflectiveInjector} from './reflective_injector';
+import {ReflectiveKey} from './reflective_key';
+
+function findFirstClosedCycle(keys: any[]): any[] {
+  const res: any[] = [];
+  for (let i = 0; i < keys.length; ++i) {
+    if (res.indexOf(keys[i]) > -1) {
+      res.push(keys[i]);
+      return res;
+    }
+    res.push(keys[i]);
+  }
+  return res;
+}
+
+function constructResolvingPath(keys: any[]): string {
+  if (keys.length > 1) {
+    const reversed = findFirstClosedCycle(keys.slice().reverse());
+    const tokenStrs = reversed.map(k => stringify(k.token));
+    return ' (' + tokenStrs.join(' -> ') + ')';
+  }
+
+  return '';
+}
+
+export interface InjectionError extends Error {
+  keys: ReflectiveKey[];
+  injectors: ReflectiveInjector[];
+  constructResolvingMessage: (keys: ReflectiveKey[]) => string;
+  addKey(injector: ReflectiveInjector, key: ReflectiveKey): void;
+}
+
+function injectionError(
+    injector: ReflectiveInjector, key: ReflectiveKey,
+    constructResolvingMessage: (keys: ReflectiveKey[]) => string,
+    originalError?: Error): InjectionError {
+  const keys = [key];
+  const errMsg = constructResolvingMessage(keys);
+  const error =
+      (originalError ? wrappedError(errMsg, originalError) : Error(errMsg)) as InjectionError;
+  error.addKey = addKey;
+  error.keys = keys;
+  error.injectors = [injector];
+  error.constructResolvingMessage = constructResolvingMessage;
+  (error as any)[ERROR_ORIGINAL_ERROR] = originalError;
+  return error;
+}
+
+function addKey(this: InjectionError, injector: ReflectiveInjector, key: ReflectiveKey): void {
+  this.injectors.push(injector);
+  this.keys.push(key);
+  // Note: This updated message won't be reflected in the `.stack` property
+  this.message = this.constructResolvingMessage(this.keys);
+}
+
+/**
+ * Thrown when trying to retrieve a dependency by key from {@link Injector}, but the
+ * {@link Injector} does not have a {@link Provider} for the given key.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * class A {
+ *   constructor(b:B) {}
+ * }
+ *
+ * expect(() => Injector.resolveAndCreate([A])).toThrowError();
+ * ```
+ */
+export function noProviderError(injector: ReflectiveInjector, key: ReflectiveKey): InjectionError {
+  return injectionError(injector, key, function(keys: ReflectiveKey[]) {
+    const first = stringify(keys[0].token);
+    return `No provider for ${first}!${constructResolvingPath(keys)}`;
+  });
+}
+
+/**
+ * Thrown when dependencies form a cycle.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * var injector = Injector.resolveAndCreate([
+ *   {provide: "one", useFactory: (two) => "two", deps: [[new Inject("two")]]},
+ *   {provide: "two", useFactory: (one) => "one", deps: [[new Inject("one")]]}
+ * ]);
+ *
+ * expect(() => injector.get("one")).toThrowError();
+ * ```
+ *
+ * Retrieving `A` or `B` throws a `CyclicDependencyError` as the graph above cannot be constructed.
+ */
+export function cyclicDependencyError(
+    injector: ReflectiveInjector, key: ReflectiveKey): InjectionError {
+  return injectionError(injector, key, function(keys: ReflectiveKey[]) {
+    return `Cannot instantiate cyclic dependency!${constructResolvingPath(keys)}`;
+  });
+}
+
+/**
+ * Thrown when a constructing type returns with an Error.
+ *
+ * The `InstantiationError` class contains the original error plus the dependency graph which caused
+ * this object to be instantiated.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * class A {
+ *   constructor() {
+ *     throw new Error('message');
+ *   }
+ * }
+ *
+ * var injector = Injector.resolveAndCreate([A]);
+
+ * try {
+ *   injector.get(A);
+ * } catch (e) {
+ *   expect(e instanceof InstantiationError).toBe(true);
+ *   expect(e.originalException.message).toEqual("message");
+ *   expect(e.originalStack).toBeDefined();
+ * }
+ * ```
+ */
+export function instantiationError(
+    injector: ReflectiveInjector, originalException: any, originalStack: any,
+    key: ReflectiveKey): InjectionError {
+  return injectionError(injector, key, function(keys: ReflectiveKey[]) {
+    const first = stringify(keys[0].token);
+    return `${originalException.message}: Error during instantiation of ${first}!${constructResolvingPath(keys)}.`;
+  }, originalException);
+}
+
+/**
+ * Thrown when an object other then {@link Provider} (or `Type`) is passed to {@link Injector}
+ * creation.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * expect(() => Injector.resolveAndCreate(["not a type"])).toThrowError();
+ * ```
+ */
+export function invalidProviderError(provider: any) {
+  return Error(
+      `Invalid provider - only instances of Provider and Type are allowed, got: ${provider}`);
+}
+
+/**
+ * Thrown when the class has no annotation information.
+ *
+ * Lack of annotation information prevents the {@link Injector} from determining which dependencies
+ * need to be injected into the constructor.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * class A {
+ *   constructor(b) {}
+ * }
+ *
+ * expect(() => Injector.resolveAndCreate([A])).toThrowError();
+ * ```
+ *
+ * This error is also thrown when the class not marked with {@link Injectable} has parameter types.
+ *
+ * ```typescript
+ * class B {}
+ *
+ * class A {
+ *   constructor(b:B) {} // no information about the parameter types of A is available at runtime.
+ * }
+ *
+ * expect(() => Injector.resolveAndCreate([A,B])).toThrowError();
+ * ```
+ *
+ */
+export function noAnnotationError(typeOrFunc: Type<any>| Function, params: any[][]): Error {
+  const signature: string[] = [];
+  for (let i = 0, ii = params.length; i < ii; i++) {
+    const parameter = params[i];
+    if (!parameter || parameter.length == 0) {
+      signature.push('?');
+    } else {
+      signature.push(parameter.map(stringify).join(' '));
+    }
+  }
+  return Error(
+      'Cannot resolve all parameters for \'' + stringify(typeOrFunc) + '\'(' +
+      signature.join(', ') + '). ' +
+      'Make sure that all the parameters are decorated with Inject or have valid type annotations and that \'' +
+      stringify(typeOrFunc) + '\' is decorated with Injectable.');
+}
+
+/**
+ * Thrown when getting an object by index.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * class A {}
+ *
+ * var injector = Injector.resolveAndCreate([A]);
+ *
+ * expect(() => injector.getAt(100)).toThrowError();
+ * ```
+ *
+ */
+export function outOfBoundsError(index: number) {
+  return Error(`Index ${index} is out-of-bounds.`);
+}
+
+// TODO: add a working example after alpha38 is released
+/**
+ * Thrown when a multi provider and a regular provider are bound to the same token.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * expect(() => Injector.resolveAndCreate([
+ *   { provide: "Strings", useValue: "string1", multi: true},
+ *   { provide: "Strings", useValue: "string2", multi: false}
+ * ])).toThrowError();
+ * ```
+ */
+export function mixingMultiProvidersWithRegularProvidersError(
+    provider1: any, provider2: any): Error {
+  return Error(`Cannot mix multi providers and regular providers, got: ${provider1} ${provider2}`);
+}
diff --git a/packages/core/src/di/reflective_injector.ts b/packages/core/src/di/reflective_injector.ts
new file mode 100644
index 000000000000..f11781f060a3
--- /dev/null
+++ b/packages/core/src/di/reflective_injector.ts
@@ -0,0 +1,470 @@
+/**
+ * @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 './injector';
+import {Self, SkipSelf} from './metadata';
+import {Provider} from './provider';
+import {cyclicDependencyError, instantiationError, noProviderError, outOfBoundsError} from './reflective_errors';
+import {ReflectiveKey} from './reflective_key';
+import {ReflectiveDependency, ResolvedReflectiveFactory, ResolvedReflectiveProvider, resolveReflectiveProviders} from './reflective_provider';
+
+// Threshold for the dynamic version
+const UNDEFINED = new Object();
+
+/**
+ * A ReflectiveDependency injection container used for instantiating objects and resolving
+ * dependencies.
+ *
+ * An `Injector` is a replacement for a `new` operator, which can automatically resolve the
+ * constructor dependencies.
+ *
+ * In typical use, application code asks for the dependencies in the constructor and they are
+ * resolved by the `Injector`.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * The following example creates an `Injector` configured to create `Engine` and `Car`.
+ *
+ * ```typescript
+ * @Injectable()
+ * class Engine {
+ * }
+ *
+ * @Injectable()
+ * class Car {
+ *   constructor(public engine:Engine) {}
+ * }
+ *
+ * var injector = ReflectiveInjector.resolveAndCreate([Car, Engine]);
+ * var car = injector.get(Car);
+ * expect(car instanceof Car).toBe(true);
+ * expect(car.engine instanceof Engine).toBe(true);
+ * ```
+ *
+ * Notice, we don't use the `new` operator because we explicitly want to have the `Injector`
+ * resolve all of the object's dependencies automatically.
+ *
+ * @deprecated from v5 - slow and brings in a lot of code, Use `Injector.create` instead.
+ */
+export abstract class ReflectiveInjector implements Injector {
+  /**
+   * Turns an array of provider definitions into an array of resolved providers.
+   *
+   * A resolution is a process of flattening multiple nested arrays and converting individual
+   * providers into an array of `ResolvedReflectiveProvider`s.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * ```typescript
+   * @Injectable()
+   * class Engine {
+   * }
+   *
+   * @Injectable()
+   * class Car {
+   *   constructor(public engine:Engine) {}
+   * }
+   *
+   * var providers = ReflectiveInjector.resolve([Car, [[Engine]]]);
+   *
+   * expect(providers.length).toEqual(2);
+   *
+   * expect(providers[0] instanceof ResolvedReflectiveProvider).toBe(true);
+   * expect(providers[0].key.displayName).toBe("Car");
+   * expect(providers[0].dependencies.length).toEqual(1);
+   * expect(providers[0].factory).toBeDefined();
+   *
+   * expect(providers[1].key.displayName).toBe("Engine");
+   * });
+   * ```
+   *
+   */
+  static resolve(providers: Provider[]): ResolvedReflectiveProvider[] {
+    return resolveReflectiveProviders(providers);
+  }
+
+  /**
+   * Resolves an array of providers and creates an injector from those providers.
+   *
+   * The passed-in providers can be an array of `Type`, `Provider`,
+   * or a recursive array of more providers.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * ```typescript
+   * @Injectable()
+   * class Engine {
+   * }
+   *
+   * @Injectable()
+   * class Car {
+   *   constructor(public engine:Engine) {}
+   * }
+   *
+   * var injector = ReflectiveInjector.resolveAndCreate([Car, Engine]);
+   * expect(injector.get(Car) instanceof Car).toBe(true);
+   * ```
+   */
+  static resolveAndCreate(providers: Provider[], parent?: Injector): ReflectiveInjector {
+    const ResolvedReflectiveProviders = ReflectiveInjector.resolve(providers);
+    return ReflectiveInjector.fromResolvedProviders(ResolvedReflectiveProviders, parent);
+  }
+
+  /**
+   * Creates an injector from previously resolved providers.
+   *
+   * This API is the recommended way to construct injectors in performance-sensitive parts.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * ```typescript
+   * @Injectable()
+   * class Engine {
+   * }
+   *
+   * @Injectable()
+   * class Car {
+   *   constructor(public engine:Engine) {}
+   * }
+   *
+   * var providers = ReflectiveInjector.resolve([Car, Engine]);
+   * var injector = ReflectiveInjector.fromResolvedProviders(providers);
+   * expect(injector.get(Car) instanceof Car).toBe(true);
+   * ```
+   * @experimental
+   */
+  static fromResolvedProviders(providers: ResolvedReflectiveProvider[], parent?: Injector):
+      ReflectiveInjector {
+    return new ReflectiveInjector_(providers, parent);
+  }
+
+
+  /**
+   * Parent of this injector.
+   *
+   * <!-- TODO: Add a link to the section of the user guide talking about hierarchical injection.
+   * -->
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * ```typescript
+   * var parent = ReflectiveInjector.resolveAndCreate([]);
+   * var child = parent.resolveAndCreateChild([]);
+   * expect(child.parent).toBe(parent);
+   * ```
+   */
+  abstract get parent(): Injector|null;
+
+  /**
+   * Resolves an array of providers and creates a child injector from those providers.
+   *
+   * <!-- TODO: Add a link to the section of the user guide talking about hierarchical injection.
+   * -->
+   *
+   * The passed-in providers can be an array of `Type`, `Provider`,
+   * or a recursive array of more providers.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * ```typescript
+   * class ParentProvider {}
+   * class ChildProvider {}
+   *
+   * var parent = ReflectiveInjector.resolveAndCreate([ParentProvider]);
+   * var child = parent.resolveAndCreateChild([ChildProvider]);
+   *
+   * expect(child.get(ParentProvider) instanceof ParentProvider).toBe(true);
+   * expect(child.get(ChildProvider) instanceof ChildProvider).toBe(true);
+   * expect(child.get(ParentProvider)).toBe(parent.get(ParentProvider));
+   * ```
+   */
+  abstract resolveAndCreateChild(providers: Provider[]): ReflectiveInjector;
+
+  /**
+   * Creates a child injector from previously resolved providers.
+   *
+   * <!-- TODO: Add a link to the section of the user guide talking about hierarchical injection.
+   * -->
+   *
+   * This API is the recommended way to construct injectors in performance-sensitive parts.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * ```typescript
+   * class ParentProvider {}
+   * class ChildProvider {}
+   *
+   * var parentProviders = ReflectiveInjector.resolve([ParentProvider]);
+   * var childProviders = ReflectiveInjector.resolve([ChildProvider]);
+   *
+   * var parent = ReflectiveInjector.fromResolvedProviders(parentProviders);
+   * var child = parent.createChildFromResolved(childProviders);
+   *
+   * expect(child.get(ParentProvider) instanceof ParentProvider).toBe(true);
+   * expect(child.get(ChildProvider) instanceof ChildProvider).toBe(true);
+   * expect(child.get(ParentProvider)).toBe(parent.get(ParentProvider));
+   * ```
+   */
+  abstract createChildFromResolved(providers: ResolvedReflectiveProvider[]): ReflectiveInjector;
+
+  /**
+   * Resolves a provider and instantiates an object in the context of the injector.
+   *
+   * The created object does not get cached by the injector.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * ```typescript
+   * @Injectable()
+   * class Engine {
+   * }
+   *
+   * @Injectable()
+   * class Car {
+   *   constructor(public engine:Engine) {}
+   * }
+   *
+   * var injector = ReflectiveInjector.resolveAndCreate([Engine]);
+   *
+   * var car = injector.resolveAndInstantiate(Car);
+   * expect(car.engine).toBe(injector.get(Engine));
+   * expect(car).not.toBe(injector.resolveAndInstantiate(Car));
+   * ```
+   */
+  abstract resolveAndInstantiate(provider: Provider): any;
+
+  /**
+   * Instantiates an object using a resolved provider in the context of the injector.
+   *
+   * The created object does not get cached by the injector.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * ```typescript
+   * @Injectable()
+   * class Engine {
+   * }
+   *
+   * @Injectable()
+   * class Car {
+   *   constructor(public engine:Engine) {}
+   * }
+   *
+   * var injector = ReflectiveInjector.resolveAndCreate([Engine]);
+   * var carProvider = ReflectiveInjector.resolve([Car])[0];
+   * var car = injector.instantiateResolved(carProvider);
+   * expect(car.engine).toBe(injector.get(Engine));
+   * expect(car).not.toBe(injector.instantiateResolved(carProvider));
+   * ```
+   */
+  abstract instantiateResolved(provider: ResolvedReflectiveProvider): any;
+
+  abstract get(token: any, notFoundValue?: any): any;
+}
+
+export class ReflectiveInjector_ implements ReflectiveInjector {
+  private static INJECTOR_KEY = ReflectiveKey.get(Injector);
+  /** @internal */
+  _constructionCounter: number = 0;
+  /** @internal */
+  public _providers: ResolvedReflectiveProvider[];
+  public readonly parent: Injector|null;
+
+  keyIds: number[];
+  objs: any[];
+  /**
+   * Private
+   */
+  constructor(_providers: ResolvedReflectiveProvider[], _parent?: Injector) {
+    this._providers = _providers;
+    this.parent = _parent || null;
+
+    const len = _providers.length;
+
+    this.keyIds = new Array(len);
+    this.objs = new Array(len);
+
+    for (let i = 0; i < len; i++) {
+      this.keyIds[i] = _providers[i].key.id;
+      this.objs[i] = UNDEFINED;
+    }
+  }
+
+  get(token: any, notFoundValue: any = THROW_IF_NOT_FOUND): any {
+    return this._getByKey(ReflectiveKey.get(token), null, notFoundValue);
+  }
+
+  resolveAndCreateChild(providers: Provider[]): ReflectiveInjector {
+    const ResolvedReflectiveProviders = ReflectiveInjector.resolve(providers);
+    return this.createChildFromResolved(ResolvedReflectiveProviders);
+  }
+
+  createChildFromResolved(providers: ResolvedReflectiveProvider[]): ReflectiveInjector {
+    const inj = new ReflectiveInjector_(providers);
+    (inj as{parent: Injector | null}).parent = this;
+    return inj;
+  }
+
+  resolveAndInstantiate(provider: Provider): any {
+    return this.instantiateResolved(ReflectiveInjector.resolve([provider])[0]);
+  }
+
+  instantiateResolved(provider: ResolvedReflectiveProvider): any {
+    return this._instantiateProvider(provider);
+  }
+
+  getProviderAtIndex(index: number): ResolvedReflectiveProvider {
+    if (index < 0 || index >= this._providers.length) {
+      throw outOfBoundsError(index);
+    }
+    return this._providers[index];
+  }
+
+  /** @internal */
+  _new(provider: ResolvedReflectiveProvider): any {
+    if (this._constructionCounter++ > this._getMaxNumberOfObjects()) {
+      throw cyclicDependencyError(this, provider.key);
+    }
+    return this._instantiateProvider(provider);
+  }
+
+  private _getMaxNumberOfObjects(): number { return this.objs.length; }
+
+  private _instantiateProvider(provider: ResolvedReflectiveProvider): any {
+    if (provider.multiProvider) {
+      const res = new Array(provider.resolvedFactories.length);
+      for (let i = 0; i < provider.resolvedFactories.length; ++i) {
+        res[i] = this._instantiate(provider, provider.resolvedFactories[i]);
+      }
+      return res;
+    } else {
+      return this._instantiate(provider, provider.resolvedFactories[0]);
+    }
+  }
+
+  private _instantiate(
+      provider: ResolvedReflectiveProvider,
+      ResolvedReflectiveFactory: ResolvedReflectiveFactory): any {
+    const factory = ResolvedReflectiveFactory.factory;
+
+    let deps: any[];
+    try {
+      deps =
+          ResolvedReflectiveFactory.dependencies.map(dep => this._getByReflectiveDependency(dep));
+    } catch (e) {
+      if (e.addKey) {
+        e.addKey(this, provider.key);
+      }
+      throw e;
+    }
+
+    let obj: any;
+    try {
+      obj = factory(...deps);
+    } catch (e) {
+      throw instantiationError(this, e, e.stack, provider.key);
+    }
+
+    return obj;
+  }
+
+  private _getByReflectiveDependency(dep: ReflectiveDependency): any {
+    return this._getByKey(dep.key, dep.visibility, dep.optional ? null : THROW_IF_NOT_FOUND);
+  }
+
+  private _getByKey(key: ReflectiveKey, visibility: Self|SkipSelf|null, notFoundValue: any): any {
+    if (key === ReflectiveInjector_.INJECTOR_KEY) {
+      return this;
+    }
+
+    if (visibility instanceof Self) {
+      return this._getByKeySelf(key, notFoundValue);
+
+    } else {
+      return this._getByKeyDefault(key, notFoundValue, visibility);
+    }
+  }
+
+  private _getObjByKeyId(keyId: number): any {
+    for (let i = 0; i < this.keyIds.length; i++) {
+      if (this.keyIds[i] === keyId) {
+        if (this.objs[i] === UNDEFINED) {
+          this.objs[i] = this._new(this._providers[i]);
+        }
+
+        return this.objs[i];
+      }
+    }
+
+    return UNDEFINED;
+  }
+
+  /** @internal */
+  _throwOrNull(key: ReflectiveKey, notFoundValue: any): any {
+    if (notFoundValue !== THROW_IF_NOT_FOUND) {
+      return notFoundValue;
+    } else {
+      throw noProviderError(this, key);
+    }
+  }
+
+  /** @internal */
+  _getByKeySelf(key: ReflectiveKey, notFoundValue: any): any {
+    const obj = this._getObjByKeyId(key.id);
+    return (obj !== UNDEFINED) ? obj : this._throwOrNull(key, notFoundValue);
+  }
+
+  /** @internal */
+  _getByKeyDefault(key: ReflectiveKey, notFoundValue: any, visibility: Self|SkipSelf|null): any {
+    let inj: Injector|null;
+
+    if (visibility instanceof SkipSelf) {
+      inj = this.parent;
+    } else {
+      inj = this;
+    }
+
+    while (inj instanceof ReflectiveInjector_) {
+      const inj_ = <ReflectiveInjector_>inj;
+      const obj = inj_._getObjByKeyId(key.id);
+      if (obj !== UNDEFINED) return obj;
+      inj = inj_.parent;
+    }
+    if (inj !== null) {
+      return inj.get(key.token, notFoundValue);
+    } else {
+      return this._throwOrNull(key, notFoundValue);
+    }
+  }
+
+  get displayName(): string {
+    const providers =
+        _mapProviders(this, (b: ResolvedReflectiveProvider) => ' "' + b.key.displayName + '" ')
+            .join(', ');
+    return `ReflectiveInjector(providers: [${providers}])`;
+  }
+
+  toString(): string { return this.displayName; }
+}
+
+function _mapProviders(injector: ReflectiveInjector_, fn: Function): any[] {
+  const res: any[] = new Array(injector._providers.length);
+  for (let i = 0; i < injector._providers.length; ++i) {
+    res[i] = fn(injector.getProviderAtIndex(i));
+  }
+  return res;
+}
diff --git a/packages/core/src/di/reflective_key.ts b/packages/core/src/di/reflective_key.ts
new file mode 100644
index 000000000000..5f54b80ca89f
--- /dev/null
+++ b/packages/core/src/di/reflective_key.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 {stringify} from '../util';
+import {resolveForwardRef} from './forward_ref';
+
+
+/**
+ * A unique object used for retrieving items from the {@link ReflectiveInjector}.
+ *
+ * Keys have:
+ * - a system-wide unique `id`.
+ * - a `token`.
+ *
+ * `Key` is used internally by {@link ReflectiveInjector} because its system-wide unique `id` allows
+ * the
+ * injector to store created objects in a more efficient way.
+ *
+ * `Key` should not be created directly. {@link ReflectiveInjector} creates keys automatically when
+ * resolving
+ * providers.
+ * @deprecated No replacement
+ */
+export class ReflectiveKey {
+  public readonly displayName: string;
+  /**
+   * Private
+   */
+  constructor(public token: Object, public id: number) {
+    if (!token) {
+      throw new Error('Token must be defined!');
+    }
+    this.displayName = stringify(this.token);
+  }
+
+  /**
+   * Retrieves a `Key` for a token.
+   */
+  static get(token: Object): ReflectiveKey {
+    return _globalKeyRegistry.get(resolveForwardRef(token));
+  }
+
+  /**
+   * @returns the number of keys registered in the system.
+   */
+  static get numberOfKeys(): number { return _globalKeyRegistry.numberOfKeys; }
+}
+
+export class KeyRegistry {
+  private _allKeys = new Map<Object, ReflectiveKey>();
+
+  get(token: Object): ReflectiveKey {
+    if (token instanceof ReflectiveKey) return token;
+
+    if (this._allKeys.has(token)) {
+      return this._allKeys.get(token) !;
+    }
+
+    const newKey = new ReflectiveKey(token, ReflectiveKey.numberOfKeys);
+    this._allKeys.set(token, newKey);
+    return newKey;
+  }
+
+  get numberOfKeys(): number { return this._allKeys.size; }
+}
+
+const _globalKeyRegistry = new KeyRegistry();
diff --git a/packages/core/src/di/reflective_provider.ts b/packages/core/src/di/reflective_provider.ts
new file mode 100644
index 000000000000..6d95966ddc81
--- /dev/null
+++ b/packages/core/src/di/reflective_provider.ts
@@ -0,0 +1,268 @@
+/**
+ * @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 {reflector} from '../reflection/reflection';
+import {Type} from '../type';
+
+import {resolveForwardRef} from './forward_ref';
+import {InjectionToken} from './injection_token';
+import {Inject, Optional, Self, SkipSelf} from './metadata';
+import {ClassProvider, ExistingProvider, FactoryProvider, Provider, TypeProvider, ValueProvider} from './provider';
+import {invalidProviderError, mixingMultiProvidersWithRegularProvidersError, noAnnotationError} from './reflective_errors';
+import {ReflectiveKey} from './reflective_key';
+
+
+interface NormalizedProvider extends TypeProvider, ValueProvider, ClassProvider, ExistingProvider,
+    FactoryProvider {}
+
+/**
+ * `Dependency` is used by the framework to extend DI.
+ * This is internal to Angular and should not be used directly.
+ */
+export class ReflectiveDependency {
+  constructor(
+      public key: ReflectiveKey, public optional: boolean, public visibility: Self|SkipSelf|null) {}
+
+  static fromKey(key: ReflectiveKey): ReflectiveDependency {
+    return new ReflectiveDependency(key, false, null);
+  }
+}
+
+const _EMPTY_LIST: any[] = [];
+
+/**
+ * An internal resolved representation of a `Provider` used by the `Injector`.
+ *
+ * @usageNotes
+ * This is usually created automatically by `Injector.resolveAndCreate`.
+ *
+ * It can be created manually, as follows:
+ *
+ * ### Example
+ *
+ * ```typescript
+ * var resolvedProviders = Injector.resolve([{ provide: 'message', useValue: 'Hello' }]);
+ * var injector = Injector.fromResolvedProviders(resolvedProviders);
+ *
+ * expect(injector.get('message')).toEqual('Hello');
+ * ```
+ *
+ * @experimental
+ */
+export interface ResolvedReflectiveProvider {
+  /**
+   * A key, usually a `Type<any>`.
+   */
+  key: ReflectiveKey;
+
+  /**
+   * Factory function which can return an instance of an object represented by a key.
+   */
+  resolvedFactories: ResolvedReflectiveFactory[];
+
+  /**
+   * Indicates if the provider is a multi-provider or a regular provider.
+   */
+  multiProvider: boolean;
+}
+
+export class ResolvedReflectiveProvider_ implements ResolvedReflectiveProvider {
+  readonly resolvedFactory: ResolvedReflectiveFactory;
+
+  constructor(
+      public key: ReflectiveKey, public resolvedFactories: ResolvedReflectiveFactory[],
+      public multiProvider: boolean) {
+    this.resolvedFactory = this.resolvedFactories[0];
+  }
+}
+
+/**
+ * An internal resolved representation of a factory function created by resolving `Provider`.
+ * @experimental
+ */
+export class ResolvedReflectiveFactory {
+  constructor(
+      /**
+       * Factory function which can return an instance of an object represented by a key.
+       */
+      public factory: Function,
+
+      /**
+       * Arguments (dependencies) to the `factory` function.
+       */
+      public dependencies: ReflectiveDependency[]) {}
+}
+
+
+/**
+ * Resolve a single provider.
+ */
+function resolveReflectiveFactory(provider: NormalizedProvider): ResolvedReflectiveFactory {
+  let factoryFn: Function;
+  let resolvedDeps: ReflectiveDependency[];
+  if (provider.useClass) {
+    const useClass = resolveForwardRef(provider.useClass);
+    factoryFn = reflector.factory(useClass);
+    resolvedDeps = _dependenciesFor(useClass);
+  } else if (provider.useExisting) {
+    factoryFn = (aliasInstance: any) => aliasInstance;
+    resolvedDeps = [ReflectiveDependency.fromKey(ReflectiveKey.get(provider.useExisting))];
+  } else if (provider.useFactory) {
+    factoryFn = provider.useFactory;
+    resolvedDeps = constructDependencies(provider.useFactory, provider.deps);
+  } else {
+    factoryFn = () => provider.useValue;
+    resolvedDeps = _EMPTY_LIST;
+  }
+  return new ResolvedReflectiveFactory(factoryFn, resolvedDeps);
+}
+
+/**
+ * Converts the `Provider` into `ResolvedProvider`.
+ *
+ * `Injector` internally only uses `ResolvedProvider`, `Provider` contains convenience provider
+ * syntax.
+ */
+function resolveReflectiveProvider(provider: NormalizedProvider): ResolvedReflectiveProvider {
+  return new ResolvedReflectiveProvider_(
+      ReflectiveKey.get(provider.provide), [resolveReflectiveFactory(provider)],
+      provider.multi || false);
+}
+
+/**
+ * Resolve a list of Providers.
+ */
+export function resolveReflectiveProviders(providers: Provider[]): ResolvedReflectiveProvider[] {
+  const normalized = _normalizeProviders(providers, []);
+  const resolved = normalized.map(resolveReflectiveProvider);
+  const resolvedProviderMap = mergeResolvedReflectiveProviders(resolved, new Map());
+  return Array.from(resolvedProviderMap.values());
+}
+
+/**
+ * Merges a list of ResolvedProviders into a list where each key is contained exactly once and
+ * multi providers have been merged.
+ */
+export function mergeResolvedReflectiveProviders(
+    providers: ResolvedReflectiveProvider[],
+    normalizedProvidersMap: Map<number, ResolvedReflectiveProvider>):
+    Map<number, ResolvedReflectiveProvider> {
+  for (let i = 0; i < providers.length; i++) {
+    const provider = providers[i];
+    const existing = normalizedProvidersMap.get(provider.key.id);
+    if (existing) {
+      if (provider.multiProvider !== existing.multiProvider) {
+        throw mixingMultiProvidersWithRegularProvidersError(existing, provider);
+      }
+      if (provider.multiProvider) {
+        for (let j = 0; j < provider.resolvedFactories.length; j++) {
+          existing.resolvedFactories.push(provider.resolvedFactories[j]);
+        }
+      } else {
+        normalizedProvidersMap.set(provider.key.id, provider);
+      }
+    } else {
+      let resolvedProvider: ResolvedReflectiveProvider;
+      if (provider.multiProvider) {
+        resolvedProvider = new ResolvedReflectiveProvider_(
+            provider.key, provider.resolvedFactories.slice(), provider.multiProvider);
+      } else {
+        resolvedProvider = provider;
+      }
+      normalizedProvidersMap.set(provider.key.id, resolvedProvider);
+    }
+  }
+  return normalizedProvidersMap;
+}
+
+function _normalizeProviders(providers: Provider[], res: Provider[]): Provider[] {
+  providers.forEach(b => {
+    if (b instanceof Type) {
+      res.push({provide: b, useClass: b});
+
+    } else if (b && typeof b == 'object' && (b as any).provide !== undefined) {
+      res.push(b as NormalizedProvider);
+
+    } else if (b instanceof Array) {
+      _normalizeProviders(b, res);
+
+    } else {
+      throw invalidProviderError(b);
+    }
+  });
+
+  return res;
+}
+
+export function constructDependencies(
+    typeOrFunc: any, dependencies?: any[]): ReflectiveDependency[] {
+  if (!dependencies) {
+    return _dependenciesFor(typeOrFunc);
+  } else {
+    const params: any[][] = dependencies.map(t => [t]);
+    return dependencies.map(t => _extractToken(typeOrFunc, t, params));
+  }
+}
+
+function _dependenciesFor(typeOrFunc: any): ReflectiveDependency[] {
+  const params = reflector.parameters(typeOrFunc);
+
+  if (!params) return [];
+  if (params.some(p => p == null)) {
+    throw noAnnotationError(typeOrFunc, params);
+  }
+  return params.map(p => _extractToken(typeOrFunc, p, params));
+}
+
+function _extractToken(
+    typeOrFunc: any, metadata: any[] | any, params: any[][]): ReflectiveDependency {
+  let token: any = null;
+  let optional = false;
+
+  if (!Array.isArray(metadata)) {
+    if (metadata instanceof Inject) {
+      return _createDependency(metadata.token, optional, null);
+    } else {
+      return _createDependency(metadata, optional, null);
+    }
+  }
+
+  let visibility: Self|SkipSelf|null = null;
+
+  for (let i = 0; i < metadata.length; ++i) {
+    const paramMetadata = metadata[i];
+
+    if (paramMetadata instanceof Type) {
+      token = paramMetadata;
+
+    } else if (paramMetadata instanceof Inject) {
+      token = paramMetadata.token;
+
+    } else if (paramMetadata instanceof Optional) {
+      optional = true;
+
+    } else if (paramMetadata instanceof Self || paramMetadata instanceof SkipSelf) {
+      visibility = paramMetadata;
+    } else if (paramMetadata instanceof InjectionToken) {
+      token = paramMetadata;
+    }
+  }
+
+  token = resolveForwardRef(token);
+
+  if (token != null) {
+    return _createDependency(token, optional, visibility);
+  } else {
+    throw noAnnotationError(typeOrFunc, params);
+  }
+}
+
+function _createDependency(
+    token: any, optional: boolean, visibility: Self | SkipSelf | null): ReflectiveDependency {
+  return new ReflectiveDependency(ReflectiveKey.get(token), optional, visibility);
+}
diff --git a/packages/core/src/di/scope.ts b/packages/core/src/di/scope.ts
new file mode 100644
index 000000000000..e4a3badc711a
--- /dev/null
+++ b/packages/core/src/di/scope.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 {Type} from '../type';
+import {InjectionToken} from './injection_token';
+
+
+/**
+ * An internal token whose presence in an injector indicates that the injector should treat itself
+ * as a root scoped injector when processing requests for unknown tokens which may indicate
+ * they are provided in the root scope.
+ */
+export const APP_ROOT = new InjectionToken<boolean>(
+    'The presence of this token marks an injector as being the root injector.');
diff --git a/packages/core/src/error_handler.ts b/packages/core/src/error_handler.ts
new file mode 100644
index 000000000000..da2b8af72c3c
--- /dev/null
+++ b/packages/core/src/error_handler.ts
@@ -0,0 +1,85 @@
+/**
+ * @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 {ERROR_ORIGINAL_ERROR, getDebugContext, getErrorLogger, getOriginalError} from './errors';
+
+
+
+/**
+ * Provides a hook for centralized exception handling.
+ *
+ * The default implementation of `ErrorHandler` prints error messages to the `console`. To
+ * intercept error handling, write a custom exception handler that replaces this default as
+ * appropriate for your app.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```
+ * class MyErrorHandler implements ErrorHandler {
+ *   handleError(error) {
+ *     // do something with the exception
+ *   }
+ * }
+ *
+ * @NgModule({
+ *   providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
+ * })
+ * class MyModule {}
+ * ```
+ */
+export class ErrorHandler {
+  /**
+   * @internal
+   */
+  _console: Console = console;
+
+  handleError(error: any): void {
+    const originalError = this._findOriginalError(error);
+    const context = this._findContext(error);
+    // Note: Browser consoles show the place from where console.error was called.
+    // We can use this to give users additional information about the error.
+    const errorLogger = getErrorLogger(error);
+
+    errorLogger(this._console, `ERROR`, error);
+    if (originalError) {
+      errorLogger(this._console, `ORIGINAL ERROR`, originalError);
+    }
+    if (context) {
+      errorLogger(this._console, 'ERROR CONTEXT', context);
+    }
+  }
+
+  /** @internal */
+  _findContext(error: any): any {
+    if (error) {
+      return getDebugContext(error) ? getDebugContext(error) :
+                                      this._findContext(getOriginalError(error));
+    }
+
+    return null;
+  }
+
+  /** @internal */
+  _findOriginalError(error: Error): any {
+    let e = getOriginalError(error);
+    while (e && getOriginalError(e)) {
+      e = getOriginalError(e);
+    }
+
+    return e;
+  }
+}
+
+export function wrappedError(message: string, originalError: any): Error {
+  const msg =
+      `${message} caused by: ${originalError instanceof Error ? originalError.message: originalError }`;
+  const error = Error(msg);
+  (error as any)[ERROR_ORIGINAL_ERROR] = originalError;
+  return error;
+}
diff --git a/packages/core/src/errors.ts b/packages/core/src/errors.ts
new file mode 100644
index 000000000000..002dbe903d78
--- /dev/null
+++ b/packages/core/src/errors.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 {DebugContext} from './view';
+
+export const ERROR_TYPE = 'ngType';
+export const ERROR_DEBUG_CONTEXT = 'ngDebugContext';
+export const ERROR_ORIGINAL_ERROR = 'ngOriginalError';
+export const ERROR_LOGGER = 'ngErrorLogger';
+
+
+export function getType(error: Error): Function {
+  return (error as any)[ERROR_TYPE];
+}
+
+export function getDebugContext(error: Error): DebugContext {
+  return (error as any)[ERROR_DEBUG_CONTEXT];
+}
+
+export function getOriginalError(error: Error): Error {
+  return (error as any)[ERROR_ORIGINAL_ERROR];
+}
+
+export function getErrorLogger(error: Error): (console: Console, ...values: any[]) => void {
+  return (error as any)[ERROR_LOGGER] || defaultErrorLogger;
+}
+
+
+function defaultErrorLogger(console: Console, ...values: any[]) {
+  (<any>console.error)(...values);
+}
\ No newline at end of file
diff --git a/packages/core/src/event_emitter.ts b/packages/core/src/event_emitter.ts
new file mode 100644
index 000000000000..1e5368e88e79
--- /dev/null
+++ b/packages/core/src/event_emitter.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 {Subject, Subscription} from 'rxjs';
+
+/**
+ * Use in directives and components to emit custom events synchronously
+ * or asynchronously, and register handlers for those events by subscribing
+ * to an instance.
+ *
+ * @usageNotes
+ *
+ * In the following example, a component defines two output properties
+ * that create event emitters. When the title is clicked, the emitter
+ * emits an open or close event to toggle the current visibility state.
+ *
+ * ```
+ * @Component({
+ *   selector: 'zippy',
+ *   template: `
+ *   <div class="zippy">
+ *     <div (click)="toggle()">Toggle</div>
+ *     <div [hidden]="!visible">
+ *       <ng-content></ng-content>
+ *     </div>
+ *  </div>`})
+ * export class Zippy {
+ *   visible: boolean = true;
+ *   @Output() open: EventEmitter<any> = new EventEmitter();
+ *   @Output() close: EventEmitter<any> = new EventEmitter();
+ *
+ *   toggle() {
+ *     this.visible = !this.visible;
+ *     if (this.visible) {
+ *       this.open.emit(null);
+ *     } else {
+ *       this.close.emit(null);
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * Access the event object with the `$event` argument passed to the output event
+ * handler:
+ *
+ * ```
+ * <zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>
+ * ```
+ *
+ * ### Notes
+ *
+ * Uses Rx.Observable but provides an adapter to make it work as specified here:
+ * https://github.com/jhusain/observable-spec
+ *
+ * Once a reference implementation of the spec is available, switch to it.
+ *
+ */
+export class EventEmitter<T> extends Subject<T> {
+  // TODO: mark this as internal once all the facades are gone
+  // we can't mark it as internal now because EventEmitter exported via @angular/core would not
+  // contain this property making it incompatible with all the code that uses EventEmitter via
+  // facades, which are local to the code and do not have this property stripped.
+  /**
+   * Internal
+   */
+  __isAsync: boolean;  // tslint:disable-line
+
+  /**
+   * Creates an instance of this class that can
+   * deliver events synchronously or asynchronously.
+   *
+   * @param isAsync When true, deliver events asynchronously.
+   *
+   */
+  constructor(isAsync: boolean = false) {
+    super();
+    this.__isAsync = isAsync;
+  }
+
+  /**
+   * Emits an event containing a given value.
+   * @param value The value to emit.
+   */
+  emit(value?: T) { super.next(value); }
+
+  /**
+   * Registers handlers for events emitted by this instance.
+   * @param generatorOrNext When supplied, a custom handler for emitted events.
+   * @param error When supplied, a custom handler for an error notification
+   * from this emitter.
+   * @param complete When supplied, a custom handler for a completion
+   * notification from this emitter.
+   */
+  subscribe(generatorOrNext?: any, error?: any, complete?: any): any {
+    let schedulerFn: (t: any) => any;
+    let errorFn = (err: any): any => null;
+    let completeFn = (): any => null;
+
+    if (generatorOrNext && typeof generatorOrNext === 'object') {
+      schedulerFn = this.__isAsync ? (value: any) => {
+        setTimeout(() => generatorOrNext.next(value));
+      } : (value: any) => { generatorOrNext.next(value); };
+
+      if (generatorOrNext.error) {
+        errorFn = this.__isAsync ? (err) => { setTimeout(() => generatorOrNext.error(err)); } :
+                                   (err) => { generatorOrNext.error(err); };
+      }
+
+      if (generatorOrNext.complete) {
+        completeFn = this.__isAsync ? () => { setTimeout(() => generatorOrNext.complete()); } :
+                                      () => { generatorOrNext.complete(); };
+      }
+    } else {
+      schedulerFn = this.__isAsync ? (value: any) => { setTimeout(() => generatorOrNext(value)); } :
+                                     (value: any) => { generatorOrNext(value); };
+
+      if (error) {
+        errorFn =
+            this.__isAsync ? (err) => { setTimeout(() => error(err)); } : (err) => { error(err); };
+      }
+
+      if (complete) {
+        completeFn =
+            this.__isAsync ? () => { setTimeout(() => complete()); } : () => { complete(); };
+      }
+    }
+
+    const sink = super.subscribe(schedulerFn, errorFn, completeFn);
+
+    if (generatorOrNext instanceof Subscription) {
+      generatorOrNext.add(sink);
+    }
+
+    return sink;
+  }
+}
diff --git a/packages/core/src/i18n/tokens.ts b/packages/core/src/i18n/tokens.ts
new file mode 100644
index 000000000000..85654140289e
--- /dev/null
+++ b/packages/core/src/i18n/tokens.ts
@@ -0,0 +1,111 @@
+/**
+ * @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 '../di/injection_token';
+
+/**
+ * Provide this token to set the locale of your application.
+ * It is used for i18n extraction, by i18n pipes (DatePipe, I18nPluralPipe, CurrencyPipe,
+ * DecimalPipe and PercentPipe) and by ICU expressions.
+ *
+ * See the [i18n guide](guide/i18n#setting-up-locale) for more information.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * import { LOCALE_ID } from '@angular/core';
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { AppModule } from './app/app.module';
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule, {
+ *   providers: [{provide: LOCALE_ID, useValue: 'en-US' }]
+ * });
+ * ```
+ *
+ * @experimental i18n support is experimental.
+ */
+export const LOCALE_ID = new InjectionToken<string>('LocaleId');
+
+/**
+ * Use this token at bootstrap to provide the content of your translation file (`xtb`,
+ * `xlf` or `xlf2`) when you want to translate your application in another language.
+ *
+ * See the [i18n guide](guide/i18n#merge) for more information.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * import { TRANSLATIONS } from '@angular/core';
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { AppModule } from './app/app.module';
+ *
+ * // content of your translation file
+ * const translations = '....';
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule, {
+ *   providers: [{provide: TRANSLATIONS, useValue: translations }]
+ * });
+ * ```
+ *
+ * @experimental i18n support is experimental.
+ */
+export const TRANSLATIONS = new InjectionToken<string>('Translations');
+
+/**
+ * Provide this token at bootstrap to set the format of your {@link TRANSLATIONS}: `xtb`,
+ * `xlf` or `xlf2`.
+ *
+ * See the [i18n guide](guide/i18n#merge) for more information.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```typescript
+ * import { TRANSLATIONS_FORMAT } from '@angular/core';
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { AppModule } from './app/app.module';
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule, {
+ *   providers: [{provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }]
+ * });
+ * ```
+ *
+ * @experimental i18n support is experimental.
+ */
+export const TRANSLATIONS_FORMAT = new InjectionToken<string>('TranslationsFormat');
+
+/**
+ * Use this enum at bootstrap as an option of `bootstrapModule` to define the strategy
+ * that the compiler should use in case of missing translations:
+ * - Error: throw if you have missing translations.
+ * - Warning (default): show a warning in the console and/or shell.
+ * - Ignore: do nothing.
+ *
+ * See the [i18n guide](guide/i18n#missing-translation) for more information.
+ *
+ * @usageNotes
+ * ### Example
+ * ```typescript
+ * import { MissingTranslationStrategy } from '@angular/core';
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { AppModule } from './app/app.module';
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule, {
+ *   missingTranslation: MissingTranslationStrategy.Error
+ * });
+ * ```
+ *
+ * @experimental i18n support is experimental.
+ */
+export enum MissingTranslationStrategy {
+  Error = 0,
+  Warning = 1,
+  Ignore = 2,
+}
diff --git a/packages/core/src/ivy_switch.ts b/packages/core/src/ivy_switch.ts
new file mode 100644
index 000000000000..41abdbfddce1
--- /dev/null
+++ b/packages/core/src/ivy_switch.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 used to control if the default rendering pipeline should be `ViewEngine` or `Ivy`.
+ *
+ * For more information on how to run and debug tests with either Ivy or View Engine (legacy),
+ * please see [BAZEL.md](./docs/BAZEL.md).
+ */
+export * from './ivy_switch_legacy';
+
+// TODO(alxhub): debug why metadata doesn't properly propagate through this file.
diff --git a/packages/core/src/ivy_switch_jit.ts b/packages/core/src/ivy_switch_jit.ts
new file mode 100644
index 000000000000..60cf8253425e
--- /dev/null
+++ b/packages/core/src/ivy_switch_jit.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 './ivy_switch_on';
\ No newline at end of file
diff --git a/packages/core/src/ivy_switch_legacy.ts b/packages/core/src/ivy_switch_legacy.ts
new file mode 100644
index 000000000000..3b5041271554
--- /dev/null
+++ b/packages/core/src/ivy_switch_legacy.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
+ */
+
+export const ivyEnabled = false;
+export const R3_COMPILE_COMPONENT: ((type: any, meta: any) => void)|null = null;
+export const R3_COMPILE_DIRECTIVE: ((type: any, meta: any) => void)|null = null;
+export const R3_COMPILE_INJECTABLE: ((type: any, meta: any) => void)|null = null;
+export const R3_COMPILE_NGMODULE: ((type: any, meta: any) => void)|null = null;
+export const R3_COMPILE_PIPE: ((type: any, meta: any) => void)|null = null;
diff --git a/packages/core/src/ivy_switch_local.ts b/packages/core/src/ivy_switch_local.ts
new file mode 100644
index 000000000000..60cf8253425e
--- /dev/null
+++ b/packages/core/src/ivy_switch_local.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 './ivy_switch_on';
\ No newline at end of file
diff --git a/packages/core/src/ivy_switch_on.ts b/packages/core/src/ivy_switch_on.ts
new file mode 100644
index 000000000000..9c21b13a7bca
--- /dev/null
+++ b/packages/core/src/ivy_switch_on.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 {compileComponent, compileDirective} from './render3/jit/directive';
+import {compileInjectable} from './render3/jit/injectable';
+import {compileNgModule} from './render3/jit/module';
+import {compilePipe} from './render3/jit/pipe';
+
+export const ivyEnabled = true;
+export const R3_COMPILE_COMPONENT = compileComponent;
+export const R3_COMPILE_DIRECTIVE = compileDirective;
+export const R3_COMPILE_INJECTABLE = compileInjectable;
+export const R3_COMPILE_NGMODULE = compileNgModule;
+export const R3_COMPILE_PIPE = compilePipe;
diff --git a/packages/core/src/linker.ts b/packages/core/src/linker.ts
new file mode 100644
index 000000000000..b3b25b222ece
--- /dev/null
+++ b/packages/core/src/linker.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
+ */
+
+// Public API for compiler
+export {COMPILER_OPTIONS, Compiler, CompilerFactory, CompilerOptions, ModuleWithComponentFactories} from './linker/compiler';
+export {ComponentFactory, ComponentRef} from './linker/component_factory';
+export {ComponentFactoryResolver} from './linker/component_factory_resolver';
+export {ElementRef} from './linker/element_ref';
+export {NgModuleFactory, NgModuleRef} from './linker/ng_module_factory';
+export {NgModuleFactoryLoader, getModuleFactory} from './linker/ng_module_factory_loader';
+export {QueryList} from './linker/query_list';
+export {SystemJsNgModuleLoader, SystemJsNgModuleLoaderConfig} from './linker/system_js_ng_module_factory_loader';
+export {TemplateRef} from './linker/template_ref';
+export {ViewContainerRef} from './linker/view_container_ref';
+export {EmbeddedViewRef, ViewRef} from './linker/view_ref';
diff --git a/packages/core/src/linker/compiler.ts b/packages/core/src/linker/compiler.ts
new file mode 100644
index 000000000000..86446a9eae6e
--- /dev/null
+++ b/packages/core/src/linker/compiler.ts
@@ -0,0 +1,115 @@
+/**
+ * @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, StaticProvider} from '../di';
+import {MissingTranslationStrategy} from '../i18n/tokens';
+import {ViewEncapsulation} from '../metadata';
+import {Type} from '../type';
+
+import {ComponentFactory} from './component_factory';
+import {NgModuleFactory} from './ng_module_factory';
+
+
+/**
+ * Combination of NgModuleFactory and ComponentFactorys.
+ *
+ * @experimental
+ */
+export class ModuleWithComponentFactories<T> {
+  constructor(
+      public ngModuleFactory: NgModuleFactory<T>,
+      public componentFactories: ComponentFactory<any>[]) {}
+}
+
+
+function _throwError() {
+  throw new Error(`Runtime compiler is not loaded`);
+}
+
+/**
+ * Low-level service for running the angular compiler during runtime
+ * to create {@link ComponentFactory}s, which
+ * can later be used to create and render a Component instance.
+ *
+ * Each `@NgModule` provides an own `Compiler` to its injector,
+ * that will use the directives/pipes of the ng module for compilation
+ * of components.
+ *
+ */
+@Injectable()
+export class Compiler {
+  /**
+   * Compiles the given NgModule and all of its components. All templates of the components listed
+   * in `entryComponents` have to be inlined.
+   */
+  compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T> { throw _throwError(); }
+
+  /**
+   * Compiles the given NgModule and all of its components
+   */
+  compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>> { throw _throwError(); }
+
+  /**
+   * 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.
+   */
+  compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
+      Promise<ModuleWithComponentFactories<T>> {
+    throw _throwError();
+  }
+
+  /**
+   * Clears all caches.
+   */
+  clearCache(): void {}
+
+  /**
+   * Clears the cache for the given component/ngModule.
+   */
+  clearCacheFor(type: Type<any>) {}
+
+  /**
+   * Returns the id for a given NgModule, if one is defined and known to the compiler.
+   */
+  getModuleId(moduleType: Type<any>): string|undefined { return undefined; }
+}
+
+/**
+ * Options for creating a compiler
+ *
+ * @experimental
+ */
+export type CompilerOptions = {
+  useJit?: boolean,
+  defaultEncapsulation?: ViewEncapsulation,
+  providers?: StaticProvider[],
+  missingTranslation?: MissingTranslationStrategy,
+  preserveWhitespaces?: boolean,
+};
+
+/**
+ * Token to provide CompilerOptions in the platform injector.
+ *
+ * @experimental
+ */
+export const COMPILER_OPTIONS = new InjectionToken<CompilerOptions[]>('compilerOptions');
+
+/**
+ * A factory for creating a Compiler
+ *
+ * @experimental
+ */
+export abstract class CompilerFactory {
+  abstract createCompiler(options?: CompilerOptions[]): Compiler;
+}
diff --git a/packages/core/src/linker/component_factory.ts b/packages/core/src/linker/component_factory.ts
new file mode 100644
index 000000000000..096a89b4f755
--- /dev/null
+++ b/packages/core/src/linker/component_factory.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 {ChangeDetectorRef} from '../change_detection/change_detection';
+import {Injector} from '../di/injector';
+import {Type} from '../type';
+
+import {ElementRef} from './element_ref';
+import {NgModuleRef} from './ng_module_factory';
+import {ViewRef} from './view_ref';
+
+/**
+ * Represents an instance of a Component created via a {@link ComponentFactory}.
+ *
+ * `ComponentRef` provides access to the Component Instance as well other objects related to this
+ * Component Instance and allows you to destroy the Component Instance via the {@link #destroy}
+ * method.
+ *
+ */
+export abstract class ComponentRef<C> {
+  /**
+   * Location of the Host Element of this Component Instance.
+   */
+  abstract get location(): ElementRef;
+
+  /**
+   * The injector on which the component instance exists.
+   */
+  abstract get injector(): Injector;
+
+  /**
+   * The instance of the Component.
+   */
+  abstract get instance(): C;
+
+  /**
+   * The {@link ViewRef} of the Host View of this Component instance.
+   */
+  abstract get hostView(): ViewRef;
+
+  /**
+   * The {@link ChangeDetectorRef} of the Component instance.
+   */
+  abstract get changeDetectorRef(): ChangeDetectorRef;
+
+  /**
+   * The component type.
+   */
+  abstract get componentType(): Type<any>;
+
+  /**
+   * Destroys the component instance and all of the data structures associated with it.
+   */
+  abstract destroy(): void;
+
+  /**
+   * Allows to register a callback that will be called when the component is destroyed.
+   */
+  abstract onDestroy(callback: Function): void;
+}
+
+export abstract class ComponentFactory<C> {
+  abstract get selector(): string;
+  abstract get componentType(): Type<any>;
+  /**
+   * selector for all <ng-content> elements in the component.
+   */
+  abstract get ngContentSelectors(): string[];
+  /**
+   * the inputs of the component.
+   */
+  abstract get inputs(): {propName: string, templateName: string}[];
+  /**
+   * the outputs of the component.
+   */
+  abstract get outputs(): {propName: string, templateName: string}[];
+  /**
+   * Creates a new component.
+   */
+  abstract create(
+      injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any,
+      ngModule?: NgModuleRef<any>): ComponentRef<C>;
+}
diff --git a/packages/core/src/linker/component_factory_resolver.ts b/packages/core/src/linker/component_factory_resolver.ts
new file mode 100644
index 000000000000..a478419c6150
--- /dev/null
+++ b/packages/core/src/linker/component_factory_resolver.ts
@@ -0,0 +1,87 @@
+/**
+ * @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 {Type} from '../type';
+import {stringify} from '../util';
+
+import {ComponentFactory, ComponentRef} from './component_factory';
+import {NgModuleRef} from './ng_module_factory';
+
+export function noComponentFactoryError(component: Function) {
+  const error = Error(
+      `No component factory found for ${stringify(component)}. Did you add it to @NgModule.entryComponents?`);
+  (error as any)[ERROR_COMPONENT] = component;
+  return error;
+}
+
+const ERROR_COMPONENT = 'ngComponent';
+
+export function getComponent(error: Error): Type<any> {
+  return (error as any)[ERROR_COMPONENT];
+}
+
+
+class _NullComponentFactoryResolver implements ComponentFactoryResolver {
+  resolveComponentFactory<T>(component: {new (...args: any[]): T}): ComponentFactory<T> {
+    throw noComponentFactoryError(component);
+  }
+}
+
+export abstract class ComponentFactoryResolver {
+  static NULL: ComponentFactoryResolver = new _NullComponentFactoryResolver();
+  abstract resolveComponentFactory<T>(component: Type<T>): ComponentFactory<T>;
+}
+
+export class CodegenComponentFactoryResolver implements ComponentFactoryResolver {
+  private _factories = new Map<any, ComponentFactory<any>>();
+
+  constructor(
+      factories: ComponentFactory<any>[], private _parent: ComponentFactoryResolver,
+      private _ngModule: NgModuleRef<any>) {
+    for (let i = 0; i < factories.length; i++) {
+      const factory = factories[i];
+      this._factories.set(factory.componentType, factory);
+    }
+  }
+
+  resolveComponentFactory<T>(component: {new (...args: any[]): T}): ComponentFactory<T> {
+    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);
+  }
+}
+
+export class ComponentFactoryBoundToModule<C> extends ComponentFactory<C> {
+  readonly selector: string;
+  readonly componentType: Type<any>;
+  readonly ngContentSelectors: string[];
+  readonly inputs: {propName: string, templateName: string}[];
+  readonly outputs: {propName: string, templateName: string}[];
+
+  constructor(private factory: ComponentFactory<C>, private ngModule: NgModuleRef<any>) {
+    super();
+    this.selector = factory.selector;
+    this.componentType = factory.componentType;
+    this.ngContentSelectors = factory.ngContentSelectors;
+    this.inputs = factory.inputs;
+    this.outputs = factory.outputs;
+  }
+
+  create(
+      injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any,
+      ngModule?: NgModuleRef<any>): ComponentRef<C> {
+    return this.factory.create(
+        injector, projectableNodes, rootSelectorOrNode, ngModule || this.ngModule);
+  }
+}
diff --git a/packages/core/src/linker/element_ref.ts b/packages/core/src/linker/element_ref.ts
new file mode 100644
index 000000000000..9adc4128bd46
--- /dev/null
+++ b/packages/core/src/linker/element_ref.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 wrapper around a native element inside of a View.
+ *
+ * An `ElementRef` is backed by a render-specific element. In the browser, this is usually a DOM
+ * element.
+ *
+ * @security Permitting direct access to the DOM can make your application more vulnerable to
+ * XSS attacks. Carefully review any use of `ElementRef` in your code. For more detail, see the
+ * [Security Guide](http://g.co/ng/security).
+ *
+ *
+ */
+// Note: We don't expose things like `Injector`, `ViewContainer`, ... here,
+// i.e. users have to ask for what they need. With that, we can build better analysis tools
+// and could do better codegen in the future.
+export class ElementRef<T = any> {
+  /**
+   * The underlying native element or `null` if direct access to native elements is not supported
+   * (e.g. when the application runs in a web worker).
+   *
+   * <div class="callout is-critical">
+   *   <header>Use with caution</header>
+   *   <p>
+   *    Use this API as the last resort when direct access to DOM is needed. Use templating and
+   *    data-binding provided by Angular instead. Alternatively you can take a look at {@link
+   * Renderer2}
+   *    which provides API that can safely be used even when direct access to native elements is not
+   *    supported.
+   *   </p>
+   *   <p>
+   *    Relying on direct DOM access creates tight coupling between your application and rendering
+   *    layers which will make it impossible to separate the two and deploy your application into a
+   *    web worker.
+   *   </p>
+   * </div>
+   *
+   */
+  public nativeElement: T;
+
+  constructor(nativeElement: T) { this.nativeElement = nativeElement; }
+}
diff --git a/packages/core/src/linker/ng_module_factory.ts b/packages/core/src/linker/ng_module_factory.ts
new file mode 100644
index 000000000000..dac8488c89d7
--- /dev/null
+++ b/packages/core/src/linker/ng_module_factory.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 {Type} from '../type';
+
+import {ComponentFactoryResolver} from './component_factory_resolver';
+
+
+/**
+ * Represents an instance of an NgModule created via a {@link NgModuleFactory}.
+ *
+ * `NgModuleRef` provides access to the NgModule Instance as well other objects related to this
+ * NgModule Instance.
+ *
+ *
+ */
+export abstract class NgModuleRef<T> {
+  /**
+   * The injector that contains all of the providers of the NgModule.
+   */
+  abstract get injector(): Injector;
+
+  /**
+   * The ComponentFactoryResolver to get hold of the ComponentFactories
+   * declared in the `entryComponents` property of the module.
+   */
+  abstract get componentFactoryResolver(): ComponentFactoryResolver;
+
+  /**
+   * The NgModule instance.
+   */
+  abstract get instance(): T;
+
+  /**
+   * Destroys the module instance and all of the data structures associated with it.
+   */
+  abstract destroy(): void;
+
+  /**
+   * Allows to register a callback that will be called when the module is destroyed.
+   */
+  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 abstract class NgModuleFactory<T> {
+  abstract get moduleType(): Type<T>;
+  abstract create(parentInjector: Injector|null): NgModuleRef<T>;
+}
diff --git a/packages/core/src/linker/ng_module_factory_loader.ts b/packages/core/src/linker/ng_module_factory_loader.ts
new file mode 100644
index 000000000000..290f4f53d2a3
--- /dev/null
+++ b/packages/core/src/linker/ng_module_factory_loader.ts
@@ -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
+ */
+
+import {NgModuleFactory} from './ng_module_factory';
+
+/**
+ * Used to load ng module factories.
+ *
+ */
+export abstract class NgModuleFactoryLoader {
+  abstract load(path: string): Promise<NgModuleFactory<any>>;
+}
+
+let moduleFactories = new Map<string, NgModuleFactory<any>>();
+
+/**
+ * Registers a loaded module. Should only be called from generated NgModuleFactory code.
+ * @experimental
+ */
+export function registerModuleFactory(id: string, factory: NgModuleFactory<any>) {
+  const existing = moduleFactories.get(id);
+  if (existing) {
+    throw new Error(`Duplicate module registered for ${id
+                    } - ${existing.moduleType.name} vs ${factory.moduleType.name}`);
+  }
+  moduleFactories.set(id, factory);
+}
+
+export function clearModulesForTest() {
+  moduleFactories = new Map<string, NgModuleFactory<any>>();
+}
+
+/**
+ * Returns the NgModuleFactory with the given id, if it exists and has been loaded.
+ * Factories for modules that do not specify an `id` cannot be retrieved. Throws if the module
+ * cannot be found.
+ * @experimental
+ */
+export function getModuleFactory(id: string): NgModuleFactory<any> {
+  const factory = moduleFactories.get(id);
+  if (!factory) throw new Error(`No module with ID ${id} loaded`);
+  return factory;
+}
diff --git a/packages/core/src/linker/query_list.ts b/packages/core/src/linker/query_list.ts
new file mode 100644
index 000000000000..fd06b021f44f
--- /dev/null
+++ b/packages/core/src/linker/query_list.ts
@@ -0,0 +1,125 @@
+/**
+ * @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';
+
+import {EventEmitter} from '../event_emitter';
+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 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
+ * `*ngFor="let i of myList"`.
+ *
+ * Changes can be observed by subscribing to the changes `Observable`.
+ *
+ * NOTE: In the future this class will implement an `Observable` interface.
+ *
+ * @usageNotes
+ * ### Example
+ * ```typescript
+ * @Component({...})
+ * class Container {
+ *   @ViewChildren(Item) items:QueryList<Item>;
+ * }
+ * ```
+ */
+export class QueryList<T>/* implements Iterable<T> */ {
+  public readonly dirty = true;
+  private _results: Array<T> = [];
+  public readonly changes: Observable<any> = new EventEmitter();
+
+  readonly length: number = 0;
+  // TODO(issue/24571): remove '!'.
+  readonly first !: T;
+  // TODO(issue/24571): remove '!'.
+  readonly last !: T;
+
+  /**
+   * See
+   * [Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+   */
+  map<U>(fn: (item: T, index: number, array: T[]) => U): U[] { return this._results.map(fn); }
+
+  /**
+   * See
+   * [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
+   */
+  filter(fn: (item: T, index: number, array: T[]) => boolean): T[] {
+    return this._results.filter(fn);
+  }
+
+  /**
+   * See
+   * [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
+   */
+  find(fn: (item: T, index: number, array: T[]) => boolean): T|undefined {
+    return this._results.find(fn);
+  }
+
+  /**
+   * See
+   * [Array.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
+   */
+  reduce<U>(fn: (prevValue: U, curValue: T, curIndex: number, array: T[]) => U, init: U): U {
+    return this._results.reduce(fn, init);
+  }
+
+  /**
+   * See
+   * [Array.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
+   */
+  forEach(fn: (item: T, index: number, array: T[]) => void): void { this._results.forEach(fn); }
+
+  /**
+   * See
+   * [Array.some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
+   */
+  some(fn: (value: T, index: number, array: T[]) => boolean): boolean {
+    return this._results.some(fn);
+  }
+
+  toArray(): T[] { return this._results.slice(); }
+
+  [getSymbolIterator()](): Iterator<T> { return (this._results as any)[getSymbolIterator()](); }
+
+  toString(): string { return this._results.toString(); }
+
+  reset(res: Array<T|any[]>): void {
+    this._results = flatten(res);
+    (this as{dirty: boolean}).dirty = false;
+    (this as{length: number}).length = this._results.length;
+    (this as{last: T}).last = this._results[this.length - 1];
+    (this as{first: T}).first = this._results[0];
+  }
+
+  notifyOnChanges(): void { (this.changes as EventEmitter<any>).emit(this); }
+
+  /** internal */
+  setDirty() { (this as{dirty: boolean}).dirty = true; }
+
+  /** internal */
+  destroy(): void {
+    (this.changes as EventEmitter<any>).complete();
+    (this.changes as EventEmitter<any>).unsubscribe();
+  }
+}
+
+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);
+  }, []);
+}
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
new file mode 100644
index 000000000000..b377c2e7185a
--- /dev/null
+++ b/packages/core/src/linker/system_js_ng_module_factory_loader.ts
@@ -0,0 +1,94 @@
+/**
+ * @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, Optional} from '../di';
+
+import {Compiler} from './compiler';
+import {NgModuleFactory} from './ng_module_factory';
+import {NgModuleFactoryLoader} from './ng_module_factory_loader';
+
+const _SEPARATOR = '#';
+
+const FACTORY_CLASS_SUFFIX = 'NgFactory';
+declare var System: any;
+
+/**
+ * Configuration for SystemJsNgModuleLoader.
+ * token.
+ *
+ * @experimental
+ */
+export abstract class SystemJsNgModuleLoaderConfig {
+  /**
+   * Prefix to add when computing the name of the factory module for a given module name.
+   */
+  // TODO(issue/24571): remove '!'.
+  factoryPathPrefix !: string;
+
+  /**
+   * Suffix to add when computing the name of the factory module for a given module name.
+   */
+  // TODO(issue/24571): remove '!'.
+  factoryPathSuffix !: string;
+}
+
+const DEFAULT_CONFIG: SystemJsNgModuleLoaderConfig = {
+  factoryPathPrefix: '',
+  factoryPathSuffix: '.ngfactory',
+};
+
+/**
+ * NgModuleFactoryLoader that uses SystemJS to load NgModuleFactory
+ * @experimental
+ */
+@Injectable()
+export class SystemJsNgModuleLoader implements NgModuleFactoryLoader {
+  private _config: SystemJsNgModuleLoaderConfig;
+
+  constructor(private _compiler: Compiler, @Optional() config?: SystemJsNgModuleLoaderConfig) {
+    this._config = config || DEFAULT_CONFIG;
+  }
+
+  load(path: string): Promise<NgModuleFactory<any>> {
+    const offlineMode = this._compiler instanceof Compiler;
+    return offlineMode ? this.loadFactory(path) : this.loadAndCompile(path);
+  }
+
+  private loadAndCompile(path: string): Promise<NgModuleFactory<any>> {
+    let [module, exportName] = path.split(_SEPARATOR);
+    if (exportName === undefined) {
+      exportName = 'default';
+    }
+
+    return System.import(module)
+        .then((module: any) => module[exportName])
+        .then((type: any) => checkNotEmpty(type, module, exportName))
+        .then((type: any) => this._compiler.compileModuleAsync(type));
+  }
+
+  private loadFactory(path: string): Promise<NgModuleFactory<any>> {
+    let [module, exportName] = path.split(_SEPARATOR);
+    let factoryClassSuffix = FACTORY_CLASS_SUFFIX;
+    if (exportName === undefined) {
+      exportName = 'default';
+      factoryClassSuffix = '';
+    }
+
+    return System.import(this._config.factoryPathPrefix + module + this._config.factoryPathSuffix)
+        .then((module: any) => module[exportName + factoryClassSuffix])
+        .then((factory: any) => checkNotEmpty(factory, module, exportName));
+  }
+}
+
+function checkNotEmpty(value: any, modulePath: string, exportName: string): any {
+  if (!value) {
+    throw new Error(`Cannot find '${exportName}' in '${modulePath}'`);
+  }
+  return value;
+}
diff --git a/packages/core/src/linker/template_ref.ts b/packages/core/src/linker/template_ref.ts
new file mode 100644
index 000000000000..d3fc094d5bb1
--- /dev/null
+++ b/packages/core/src/linker/template_ref.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 {ElementRef} from './element_ref';
+import {EmbeddedViewRef} from './view_ref';
+
+
+/**
+ * Represents an Embedded Template that can be used to instantiate Embedded Views.
+ *
+ * You can access a `TemplateRef`, in two ways. Via a directive placed on a `<ng-template>` element
+ * (or directive prefixed with `*`) and have the `TemplateRef` for this Embedded View injected into
+ * the constructor of the directive using the `TemplateRef` Token. Alternatively you can query for
+ * the `TemplateRef` from a Component or a Directive via {@link Query}.
+ *
+ * To instantiate Embedded Views based on a Template, use {@link ViewContainerRef#
+ * createEmbeddedView}, which will create the View and attach it to the View Container.
+ *
+ */
+export abstract class TemplateRef<C> {
+  /**
+   * The location in the View where the Embedded View logically belongs to.
+   *
+   * The data-binding and injection contexts of Embedded Views created from this `TemplateRef`
+   * inherit from the contexts of this location.
+   *
+   * Typically new Embedded Views are attached to the View Container of this location, but in
+   * advanced use-cases, the View can be attached to a different container while keeping the
+   * data-binding and injection context from the original location.
+   *
+   */
+  // TODO(i): rename to anchor or location
+  abstract get elementRef(): ElementRef;
+
+  abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;
+}
diff --git a/packages/core/src/linker/view_container_ref.ts b/packages/core/src/linker/view_container_ref.ts
new file mode 100644
index 000000000000..bd2917fcecaa
--- /dev/null
+++ b/packages/core/src/linker/view_container_ref.ts
@@ -0,0 +1,125 @@
+/**
+ * @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 {ComponentFactory, ComponentRef} from './component_factory';
+import {ElementRef} from './element_ref';
+import {NgModuleRef} from './ng_module_factory';
+import {TemplateRef} from './template_ref';
+import {EmbeddedViewRef, ViewRef} from './view_ref';
+
+
+/**
+ * Represents a container where one or more Views can be attached.
+ *
+ * The container can contain two kinds of Views. Host Views, created by instantiating a
+ * {@link Component} via {@link #createComponent}, and Embedded Views, created by instantiating an
+ * {@link TemplateRef Embedded Template} via {@link #createEmbeddedView}.
+ *
+ * The location of the View Container within the containing View is specified by the Anchor
+ * `element`. Each View Container can have only one Anchor Element and each Anchor Element can only
+ * have a single View Container.
+ *
+ * Root elements of Views attached to this container become siblings of the Anchor Element in
+ * the Rendered View.
+ *
+ * To access a `ViewContainerRef` of an Element, you can either place a {@link Directive} injected
+ * with `ViewContainerRef` on the Element, or you obtain it via a {@link ViewChild} query.
+ *
+ */
+export abstract class ViewContainerRef {
+  /**
+   * Anchor element that specifies the location of this container in the containing View.
+   * <!-- TODO: rename to anchorElement -->
+   */
+  abstract get element(): ElementRef;
+
+  abstract get injector(): Injector;
+
+  /** @deprecated No replacement */
+  abstract get parentInjector(): Injector;
+
+  /**
+   * Destroys all Views in this container.
+   */
+  abstract clear(): void;
+
+  /**
+   * Returns the {@link ViewRef} for the View located in this container at the specified index.
+   */
+  abstract get(index: number): ViewRef|null;
+
+  /**
+   * Returns the number of Views currently attached to this container.
+   */
+  abstract get length(): number;
+
+  /**
+   * Instantiates an Embedded View based on the {@link TemplateRef `templateRef`} and inserts it
+   * into this container at the specified `index`.
+   *
+   * If `index` is not specified, the new View will be inserted as the last View in the container.
+   *
+   * Returns the {@link ViewRef} for the newly created View.
+   */
+  abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number):
+      EmbeddedViewRef<C>;
+
+  /**
+   * Instantiates a single {@link Component} and inserts its Host View into this container at the
+   * specified `index`.
+   *
+   * The component is instantiated using its {@link ComponentFactory} which can be obtained via
+   * {@link ComponentFactoryResolver#resolveComponentFactory resolveComponentFactory}.
+   *
+   * If `index` is not specified, the new View will be inserted as the last View in the container.
+   *
+   * You can optionally specify the {@link Injector} that will be used as parent for the Component.
+   *
+   * Returns the {@link ComponentRef} of the Host View created for the newly instantiated Component.
+   */
+  abstract createComponent<C>(
+      componentFactory: ComponentFactory<C>, index?: number, injector?: Injector,
+      projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;
+
+  /**
+   * Inserts a View identified by a {@link ViewRef} into the container at the specified `index`.
+   *
+   * If `index` is not specified, the new View will be inserted as the last View in the container.
+   *
+   * Returns the inserted {@link ViewRef}.
+   */
+  abstract insert(viewRef: ViewRef, index?: number): ViewRef;
+
+  /**
+   * Moves a View identified by a {@link ViewRef} into the container at the specified `index`.
+   *
+   * Returns the inserted {@link ViewRef}.
+   */
+  abstract move(viewRef: ViewRef, currentIndex: number): ViewRef;
+
+  /**
+   * Returns the index of the View, specified via {@link ViewRef}, within the current container or
+   * `-1` if this container doesn't contain the View.
+   */
+  abstract indexOf(viewRef: ViewRef): number;
+
+  /**
+   * Destroys a View attached to this container at the specified `index`.
+   *
+   * If `index` is not specified, the last View in the container will be removed.
+   */
+  abstract remove(index?: number): void;
+
+  /**
+   * Use along with {@link #insert} to move a View within the current container.
+   *
+   * If the `index` param is omitted, the last {@link ViewRef} is detached.
+   */
+  abstract detach(index?: number): ViewRef|null;
+}
diff --git a/packages/core/src/linker/view_ref.ts b/packages/core/src/linker/view_ref.ts
new file mode 100644
index 000000000000..ffeb9be84669
--- /dev/null
+++ b/packages/core/src/linker/view_ref.ts
@@ -0,0 +1,89 @@
+/**
+ * @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 {ApplicationRef} from '../application_ref';
+import {ChangeDetectorRef} from '../change_detection/change_detector_ref';
+
+export abstract class ViewRef extends ChangeDetectorRef {
+  /**
+   * Destroys the view and all of the data structures associated with it.
+   */
+  abstract destroy(): void;
+
+  abstract get destroyed(): boolean;
+
+  abstract onDestroy(callback: Function): any /** TODO #9100 */;
+}
+
+/**
+ * Represents an Angular View.
+ *
+ * <!-- TODO: move the next two paragraphs to the dev guide -->
+ * A View is a fundamental building block of the application UI. It is the smallest grouping of
+ * Elements which are created and destroyed together.
+ *
+ * Properties of elements in a View can change, but the structure (number and order) of elements in
+ * a View cannot. Changing the structure of Elements can only be done by inserting, moving or
+ * removing nested Views via a `ViewContainerRef`. Each View can contain many View Containers.
+ * <!-- /TODO -->
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * Given this template...
+ *
+ * ```
+ * Count: {{items.length}}
+ * <ul>
+ *   <li *ngFor="let  item of items">{{item}}</li>
+ * </ul>
+ * ```
+ *
+ * We have two `TemplateRef`s:
+ *
+ * Outer `TemplateRef`:
+ *
+ * ```
+ * Count: {{items.length}}
+ * <ul>
+ *   <ng-template ngFor let-item [ngForOf]="items"></ng-template>
+ * </ul>
+ * ```
+ *
+ * Inner `TemplateRef`:
+ *
+ * ```
+ *   <li>{{item}}</li>
+ * ```
+ *
+ * Notice that the original template is broken down into two separate `TemplateRef`s.
+ *
+ * The outer/inner `TemplateRef`s are then assembled into views like so:
+ *
+ * ```
+ * <!-- ViewRef: outer-0 -->
+ * Count: 2
+ * <ul>
+ *   <ng-template view-container-ref></ng-template>
+ *   <!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 -->
+ *   <!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 -->
+ * </ul>
+ * <!-- /ViewRef: outer-0 -->
+ * ```
+ * @experimental
+ */
+export abstract class EmbeddedViewRef<C> extends ViewRef {
+  abstract get context(): C;
+
+  abstract get rootNodes(): any[];
+}
+
+export interface InternalViewRef extends ViewRef {
+  detachFromAppRef(): void;
+  attachToAppRef(appRef: ApplicationRef): void;
+}
diff --git a/packages/core/src/metadata.ts b/packages/core/src/metadata.ts
new file mode 100644
index 000000000000..d377b0afae5a
--- /dev/null
+++ b/packages/core/src/metadata.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 indirection is needed to free up Component, etc symbols in the public API
+ * to be used by the decorator versions of these annotations.
+ */
+
+import {Attribute, ContentChild, ContentChildren, Query, ViewChild, ViewChildren} from './metadata/di';
+import {Component, Directive, HostBinding, HostListener, Input, Output, Pipe} from './metadata/directives';
+import {DoBootstrap, ModuleWithProviders, NgModule, SchemaMetadata} from './metadata/ng_module';
+import {ViewEncapsulation} from './metadata/view';
+
+export {ANALYZE_FOR_ENTRY_COMPONENTS, Attribute, ContentChild, ContentChildDecorator, ContentChildren, ContentChildrenDecorator, Query, ViewChild, ViewChildDecorator, ViewChildren, ViewChildrenDecorator} from './metadata/di';
+export {Component, ComponentDecorator, Directive, DirectiveDecorator, HostBinding, HostListener, Input, Output, Pipe} from './metadata/directives';
+export {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnDestroy, OnInit} from './metadata/lifecycle_hooks';
+export {CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, ModuleWithProviders, NO_ERRORS_SCHEMA, NgModule, SchemaMetadata} from './metadata/ng_module';
+export {ViewEncapsulation} from './metadata/view';
diff --git a/packages/core/src/metadata/di.ts b/packages/core/src/metadata/di.ts
new file mode 100644
index 000000000000..944a49fbf42b
--- /dev/null
+++ b/packages/core/src/metadata/di.ts
@@ -0,0 +1,366 @@
+/**
+ * @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 '../di/injection_token';
+import {Type} from '../type';
+import {makeParamDecorator, makePropDecorator} from '../util/decorators';
+
+/**
+ * This token can be used to create a virtual provider that will populate the
+ * `entryComponents` fields of components and ng modules based on its `useValue`.
+ * All components that are referenced in the `useValue` value (either directly
+ * or in a nested array or map) will be added to the `entryComponents` property.
+ *
+ * @usageNotes
+ * ### Example
+ * The following example shows how the router can populate the `entryComponents`
+ * field of an NgModule based on the router configuration which refers
+ * to components.
+ *
+ * ```typescript
+ * // helper function inside the router
+ * function provideRoutes(routes) {
+ *   return [
+ *     {provide: ROUTES, useValue: routes},
+ *     {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: routes, multi: true}
+ *   ];
+ * }
+ *
+ * // user code
+ * let routes = [
+ *   {path: '/root', component: RootComp},
+ *   {path: '/teams', component: TeamsComp}
+ * ];
+ *
+ * @NgModule({
+ *   providers: [provideRoutes(routes)]
+ * })
+ * class ModuleWithRoutes {}
+ * ```
+ *
+ * @experimental
+ */
+export const ANALYZE_FOR_ENTRY_COMPONENTS = new InjectionToken<any>('AnalyzeForEntryComponents');
+
+/**
+ * Type of the Attribute decorator / constructor function.
+ *
+ *
+ */
+export interface AttributeDecorator {
+  /**
+   * Specifies that a constant attribute value should be injected.
+   *
+   * The directive can inject constant string literals of host element attributes.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * Suppose we have an `<input>` element and want to know its `type`.
+   *
+   * ```html
+   * <input type="text">
+   * ```
+   *
+   * A decorator can inject string literal `text` like so:
+   *
+   * {@example core/ts/metadata/metadata.ts region='attributeMetadata'}
+   *
+   * ### Example as TypeScript Decorator
+   *
+   * {@example core/ts/metadata/metadata.ts region='attributeFactory'}
+   *
+   * ### Example as ES5 annotation
+   *
+   * ```
+   * var MyComponent = function(title) {
+   *   ...
+   * };
+   *
+   * MyComponent.annotations = [
+   *   new ng.Component({...})
+   * ]
+   * MyComponent.parameters = [
+   *   [new ng.Attribute('title')]
+   * ]
+   * ```
+   *
+   *
+   */
+  (name: string): any;
+  new (name: string): Attribute;
+}
+
+
+/**
+ * Type of the Attribute metadata.
+ */
+export interface Attribute { attributeName?: string; }
+
+/**
+ * Attribute decorator and metadata.
+ *
+ * @Annotation
+ */
+export const Attribute: AttributeDecorator =
+    makeParamDecorator('Attribute', (attributeName?: string) => ({attributeName}));
+
+/**
+ * Type of the Query metadata.
+ */
+export interface Query {
+  descendants: boolean;
+  first: boolean;
+  read: any;
+  isViewQuery: boolean;
+  selector: any;
+}
+
+/**
+ * Base class for query metadata.
+ *
+ * @see `ContentChildren`.
+ * @see `ContentChild`.
+ * @see `ViewChildren`.
+ * @see `ViewChild`.
+ */
+export abstract class Query {}
+
+/**
+ * Type of the ContentChildren decorator / constructor function.
+ *
+ * @see `ContentChildren`.
+ */
+export interface ContentChildrenDecorator {
+  /**
+   * Configures a content query.
+   *
+   * You can use ContentChildren to get the `QueryList` of elements or directives from the
+   * content DOM. Any time a child element is added, removed, or moved, the query list will be
+   * updated, and the changes observable of the query list will emit a new value.
+   *
+   * Content queries are set before the `ngAfterContentInit` callback is called.
+   *
+   * **Metadata Properties**:
+   *
+   * * **selector** - the directive type or the name used for querying.
+   * * **descendants** - include only direct children or all descendants.
+   * * **read** - read a different token from the queried elements.
+   *
+   * @usageNotes
+   * ### Basic Example
+   *
+   * Here is a simple demonstration of how the `ContentChildren` decorator can be used.
+   *
+   * {@example core/di/ts/contentChildren/content_children_howto.ts region='HowTo'}
+   *
+   * ### Tab-pane Example
+   *
+   * Here is a slightly more realistic example that shows how `ContentChildren` decorators
+   * can be used to implement a tab pane component.
+   *
+   * {@example core/di/ts/contentChildren/content_children_example.ts region='Component'}
+   *
+   * @Annotation
+   */
+  (selector: Type<any>|Function|string, opts?: {descendants?: boolean, read?: any}): any;
+  new (selector: Type<any>|Function|string, opts?: {descendants?: boolean, read?: any}): Query;
+}
+
+/**
+ * Type of the ContentChildren metadata.
+ *
+ *
+ * @Annotation
+ */
+export type ContentChildren = Query;
+
+/**
+ * ContentChildren decorator and metadata.
+ *
+ *
+ *  @Annotation
+ */
+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.
+ *
+ *
+ *
+ */
+export interface ContentChildDecorator {
+  /**
+   * Configures a content query.
+   *
+   * You can use ContentChild to get the first element or the directive matching the selector from
+   * the content DOM. If the content DOM changes, and a new child matches the selector,
+   * the property will be updated.
+   *
+   * Content queries are set before the `ngAfterContentInit` callback is called.
+   *
+   * **Metadata Properties**:
+   *
+   * * **selector** - the directive type or the name used for querying.
+   * * **read** - read a different token from the queried element.
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * {@example core/di/ts/contentChild/content_child_howto.ts region='HowTo'}
+   *
+   * ### Example
+   *
+   * {@example core/di/ts/contentChild/content_child_example.ts region='Component'}
+   *
+   * @Annotation
+   */
+  (selector: Type<any>|Function|string, opts?: {read?: any}): any;
+  new (selector: Type<any>|Function|string, opts?: {read?: any}): ContentChild;
+}
+
+/**
+ * Type of the ContentChild metadata.
+ *
+ * @see `ContentChild`.
+ *
+ *
+ */
+export type ContentChild = Query;
+
+/**
+ * ContentChild decorator and metadata.
+ *
+ *
+ * @Annotation
+ */
+export const ContentChild: ContentChildDecorator = makePropDecorator(
+    'ContentChild', (selector?: any, data: any = {}) =>
+                        ({selector, first: true, isViewQuery: false, descendants: true, ...data}),
+    Query);
+
+/**
+ * Type of the ViewChildren decorator / constructor function.
+ *
+ * @see `ViewChildren`.
+ *
+ *
+ */
+export interface ViewChildrenDecorator {
+  /**
+   * Configures a view query.
+   *
+   * You can use ViewChildren to get the `QueryList` of elements or directives from the
+   * view DOM. Any time a child element is added, removed, or moved, the query list will be updated,
+   * and the changes observable of the query list will emit a new value.
+   *
+   * View queries are set before the `ngAfterViewInit` callback is called.
+   *
+   * **Metadata Properties**:
+   *
+   * * **selector** - the directive type or the name used for querying.
+   * * **read** - read a different token from the queried elements.
+   *
+   * @usageNotes
+   *
+   * ### Example
+   *
+   * {@example core/di/ts/viewChildren/view_children_howto.ts region='HowTo'}
+   *
+   * ### Example
+   *
+   * {@example core/di/ts/viewChildren/view_children_example.ts region='Component'}
+   *
+   * @Annotation
+   */
+  (selector: Type<any>|Function|string, opts?: {read?: any}): any;
+  new (selector: Type<any>|Function|string, opts?: {read?: any}): ViewChildren;
+}
+
+/**
+ * Type of the ViewChildren metadata.
+ */
+export type ViewChildren = Query;
+
+/**
+ * ViewChildren decorator and metadata.
+ *
+ * @Annotation
+ */
+export const ViewChildren: ViewChildrenDecorator = makePropDecorator(
+    'ViewChildren', (selector?: any, data: any = {}) =>
+                        ({selector, first: false, isViewQuery: true, descendants: true, ...data}),
+    Query);
+
+/**
+ * Type of the ViewChild decorator / constructor function.
+ *
+ * @see `ViewChild`.
+ */
+export interface ViewChildDecorator {
+  /**
+   * @description
+   * Property decorator that configures a view query.
+   * The change detector looks for the first element or the directive matching the selector
+   * in the view DOM. If the view DOM changes, and a new child matches the selector,
+   * the property is updated.
+   *
+   * View queries are set before the `ngAfterViewInit` callback is called.
+   *
+   * **Metadata Properties**:
+   *
+   * * **selector** - the directive type or the name used for querying.
+   * * **read** - read a different token from the queried elements.
+   *
+   * Supported selectors include:
+   *   * any class with the `@Component` or `@Directive` decorator
+   *   * a template reference variable as a string (e.g. query `<my-component #cmp></my-component>
+   * with `@ViewChild('cmp')`)
+   *   * any provider defined in the child component tree of the current component (e.g.
+   * `@ViewChild(SomeService) someService: SomeService`)
+   *   * any provider defined through a string token (e.g. `@ViewChild('someToken') someTokenVal:
+   * any`)
+   *   * a `TemplateRef` (e.g. query `<ng-template></ng-template>` with `@ViewChild(TemplateRef)
+   * template;`)
+   *
+   * @usageNotes
+   *
+   * {@example core/di/ts/viewChild/view_child_example.ts region='Component'}
+   *
+   * ### Example
+   *
+   * {@example core/di/ts/viewChild/view_child_howto.ts region='HowTo'}
+   *
+   * ### Example
+   *
+   * {@example core/di/ts/viewChild/view_child_example.ts region='Component'}
+   *
+   * @Annotation
+   */
+  (selector: Type<any>|Function|string, opts?: {read?: any}): any;
+  new (selector: Type<any>|Function|string, opts?: {read?: any}): ViewChild;
+}
+
+/**
+ * Type of the ViewChild metadata.
+ */
+export type ViewChild = Query;
+
+/**
+ * ViewChild decorator and metadata.
+ *
+ * @Annotation
+ */
+export const ViewChild: ViewChildDecorator = makePropDecorator(
+    '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
new file mode 100644
index 000000000000..360cee307e07
--- /dev/null
+++ b/packages/core/src/metadata/directives.ts
@@ -0,0 +1,954 @@
+/**
+ * @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 {ChangeDetectionStrategy} from '../change_detection/constants';
+import {Provider} from '../di';
+import {R3_COMPILE_COMPONENT, R3_COMPILE_DIRECTIVE, R3_COMPILE_PIPE} from '../ivy_switch';
+import {Type} from '../type';
+import {TypeDecorator, makeDecorator, makePropDecorator} from '../util/decorators';
+import {fillProperties} from '../util/property';
+import {ViewEncapsulation} from './view';
+
+
+/**
+ * Type of the Directive decorator / constructor function.
+ */
+export interface DirectiveDecorator {
+  /**
+   * Marks a class as an Angular directive. You can define your own
+   * directives to attach custom behavior to elements in the DOM.
+   * The options provide configuration metadata that determines
+   * how the directive should be processed, instantiated and used at
+   * runtime.
+   *
+   * Directive classes, like component classes, can implement
+   * [life-cycle hooks](guide/lifecycle-hooks) to influence their configuration and behavior.
+   *
+   *
+   * @usageNotes
+   * To define a directive, mark the class with the decorator and provide metadata.
+   *
+   * ```
+   * import {Directive} from '@angular/core';
+   *
+   * @Directive({
+   *   selector: 'my-directive',
+   * })
+   * export class MyDirective {
+   * ...
+   * }
+   * ```
+   *
+   * ### Declaring directives
+   *
+   * Directives are [declarables](guide/glossary#declarable).
+   * They must be declared by an NgModule
+   * in order to be usable in an app.
+   *
+   * A directive must belong to exactly one NgModule. Do not re-declare
+   * a directive imported from another module.
+   * List the directive class in the `declarations` field of an NgModule.
+   *
+   * ```
+   * declarations: [
+   *  AppComponent,
+   *  MyDirective
+   * ],
+   * ```
+   *
+   * @Annotation
+   */
+  (obj: Directive): TypeDecorator;
+
+  /**
+   * See the `Directive` decorator.
+   */
+  new (obj: Directive): Directive;
+}
+
+export interface Directive {
+  /**
+   * The CSS selector that triggers the instantiation of a directive.
+   *
+   * Declare as one of the following:
+   *
+   * - `element-name`: select by element name.
+   * - `.class`: select by class name.
+   * - `[attribute]`: select by attribute name.
+   * - `[attribute=value]`: select by attribute name and value.
+   * - `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
+   * - `selector1, selector2`: select if either `selector1` or `selector2` matches.
+   *
+   * Angular only allows directives to trigger on CSS selectors that do not cross element
+   * boundaries. For example, consider a directive with an `input[type=text]` selector.
+   * For the following HTML, the directive is instantiated only on the
+   * `<input type="text">` element.
+   *
+   * ```html
+   * <form>
+   *   <input type="text">
+   *   <input type="radio">
+   * <form>
+   * ```
+   *
+   */
+  selector?: string;
+
+  /**
+   * Enumerates the set of data-bound input properties for a directive
+   *
+   * Angular automatically updates input properties during change detection.
+   * The `inputs` property defines a set of `directiveProperty` to `bindingProperty`
+   * configuration:
+   *
+   * - `directiveProperty` specifies the component property where the value is written.
+   * - `bindingProperty` specifies the DOM property where the value is read from.
+   *
+   * When `bindingProperty` is not provided, it is assumed to be equal to `directiveProperty`.
+   * @usageNotes
+   *
+   * ### Example
+   *
+   * The following example creates a component with two data-bound properties.
+   *
+   * ```typescript
+   * @Component({
+   *   selector: 'bank-account',
+   *   inputs: ['bankName', 'id: account-id'],
+   *   template: `
+   *     Bank Name: {{bankName}}
+   *     Account Id: {{id}}
+   *   `
+   * })
+   * class BankAccount {
+   *   bankName: string;
+   *   id: string;
+   *
+   * ```
+   */
+  inputs?: string[];
+
+  /**
+   * Enumerates the set of event-bound output properties.
+   *
+   * When an output property emits an event, an event handler attached to that event
+   * in the template is invoked.
+   *
+   * The `outputs` property defines a set of `directiveProperty` to `bindingProperty`
+   * configuration:
+   *
+   * - `directiveProperty` specifies the component property that emits events.
+   * - `bindingProperty` specifies the DOM property the event handler is attached to.
+   *
+   * @usageNotes
+   *
+   * ### Example
+   *
+   * ```typescript
+   * @Directive({
+   *   selector: 'child-dir',
+   *   exportAs: 'child'
+   * })
+   * class ChildDir {
+   * }
+   *
+   * @Component({
+   *   selector: 'main',
+   *   template: `<child-dir #c="child"></child-dir>`
+   * })
+   * class MainComponent {
+   * }
+   * ```
+   */
+  outputs?: string[];
+
+  /**
+   * A set of injection tokens that allow the DI system to
+   * provide a dependency to this directive or component.
+   */
+  providers?: Provider[];
+
+  /**
+   * Defines the name that can be used in the template to assign this directive to a variable.
+   *
+   * @usageNotes
+   *
+   * ### Simple Example
+   *
+   * ```
+   * @Directive({
+   *   selector: 'child-dir',
+   *   exportAs: 'child'
+   * })
+   * class ChildDir {
+   * }
+   *
+   * @Component({
+   *   selector: 'main',
+   *   template: `<child-dir #c="child"></child-dir>`
+   * })
+   * class MainComponent {
+   * }
+   * ```
+   */
+  exportAs?: string;
+
+  /**
+   * Configures the queries that will be injected into the directive.
+   *
+   * Content queries are set before the `ngAfterContentInit` callback is called.
+   * View queries are set before the `ngAfterViewInit` callback is called.
+   *
+   * @usageNotes
+   *
+   * ### Example
+   *
+   * The following example shows how queries are defined
+   * and when their results are available in lifecycle hooks:
+   *
+   * ```
+   * @Component({
+   *   selector: 'someDir',
+   *   queries: {
+   *     contentChildren: new ContentChildren(ChildDirective),
+   *     viewChildren: new ViewChildren(ChildDirective)
+   *   },
+   *   template: '<child-directive></child-directive>'
+   * })
+   * class SomeDir {
+   *   contentChildren: QueryList<ChildDirective>,
+   *   viewChildren: QueryList<ChildDirective>
+   *
+   *   ngAfterContentInit() {
+   *     // contentChildren is set
+   *   }
+   *
+   *   ngAfterViewInit() {
+   *     // viewChildren is set
+   *   }
+   * }
+   * ```
+   *
+   * @Annotation
+   */
+  queries?: {[key: string]: any};
+
+  /**
+   * If true, this directive/component will be skipped by the AOT compiler and so will always be
+   * compiled using JIT.
+   *
+   * This exists to support future Ivy work and has no effect currently.
+   */
+  jit?: true;
+}
+
+/**
+ * Directive decorator and metadata.
+ *
+ * @Annotation
+ */
+export interface Directive {
+  /**
+   * The CSS selector that identifies this directive in a template
+   * and triggers instantiation of the directive.
+   *
+   * Declare as one of the following:
+   *
+   * - `element-name`: Select by element name.
+   * - `.class`: Select by class name.
+   * - `[attribute]`: Select by attribute name.
+   * - `[attribute=value]`: Select by attribute name and value.
+   * - `:not(sub_selector)`: Select only if the element does not match the `sub_selector`.
+   * - `selector1, selector2`: Select if either `selector1` or `selector2` matches.
+   *
+   * Angular only allows directives to apply on CSS selectors that do not cross
+   * element boundaries.
+   *
+   * For the following template HTML, a directive with an `input[type=text]` selector,
+   * would be instantiated only on the `<input type="text">` element.
+   *
+   * ```html
+   * <form>
+   *   <input type="text">
+   *   <input type="radio">
+   * <form>
+   * ```
+   *
+   */
+  selector?: string;
+
+  /**
+   * The set of event-bound output properties.
+   * When an output property emits an event, an event handler attached
+   * to that event in the template is invoked.
+   *
+   * Each output property maps a `directiveProperty` to a `bindingProperty`:
+   * - `directiveProperty` specifies the component property that emits events.
+   * - `bindingProperty` specifies the HTML attribute the event handler is attached to.
+   *
+   */
+  outputs?: string[];
+
+  /**
+   * Maps class properties to host element bindings for properties,
+   * attributes, and events, using a set of key-value pairs.
+   *
+   * Angular automatically checks host property bindings during change detection.
+   * If a binding changes, Angular updates the directive's host element.
+   *
+   * When the key is a property of the host element, the property value is
+   * the propagated to the specified DOM property.
+   *
+   * When the key is a static attribute in the DOM, the attribute value
+   * is propagated to the specified property in the host element.
+   *
+   * For event handling:
+   * - The key is the DOM event that the directive listens to.
+   * To listen to global events, add the target to the event name.
+   * The target can be `window`, `document` or `body`.
+   * - The value is the statement to execute when the event occurs. If the
+   * statement evalueates to `false`, then `preventDefault` is applied on the DOM
+   * event. A handler method can refer to the `$event` local variable.
+   *
+   */
+  host?: {[key: string]: string};
+
+  /**
+   * Configures the [injector](guide/glossary#injector) of this
+   * directive or component with a [token](guide/glossary#di-token)
+   * that maps to a [provider](guide/glossary#provider) of a dependency.
+   */
+  providers?: Provider[];
+
+  /**
+   * The name or names that can be used in the template to assign this directive to a variable.
+   * For multiple names, use a comma-separated string.
+   *
+   */
+  exportAs?: string;
+
+  /**
+   * Configures the queries that will be injected into the directive.
+   *
+   * Content queries are set before the `ngAfterContentInit` callback is called.
+   * View queries are set before the `ngAfterViewInit` callback is called.
+   *
+   */
+  queries?: {[key: string]: any};
+}
+
+/**
+ * Type of the Directive metadata.
+ */
+export const Directive: DirectiveDecorator = makeDecorator(
+    'Directive', (dir: Directive = {}) => dir, undefined, undefined,
+    (type: Type<any>, meta: Directive) => (R3_COMPILE_DIRECTIVE || (() => {}))(type, meta));
+
+/**
+ * Component decorator interface
+ *
+ */
+export interface ComponentDecorator {
+  /**
+   * Decorator that marks a class as an Angular component and provides configuration
+   * metadata that determines how the component should be processed,
+   * instantiated, and used at runtime.
+   *
+   * Components are the most basic UI building block of an Angular app.
+   * An Angular app contains a tree of Angular components.
+   *
+   * Angular components are a subset of directives, always associated with a template.
+   * Unlike other directives, only one component can be instantiated per an element in a template.
+   *
+   * A component must belong to an NgModule in order for it to be available
+   * to another component or application. To make it a member of an NgModule,
+   * list it in the `declarations` field of the `@NgModule` metadata.
+   *
+   * Note that, in addition to these options for configuring a directive,
+   * you can control a component's runtime behavior by implementing
+   * life-cycle hooks. For more information, see the
+   * [Lifecycle Hooks](guide/lifecycle-hooks) guide.
+   *
+   * @usageNotes
+   *
+   * ### Setting component inputs
+   *
+   * The following example creates a component with two data-bound properties,
+   * specified by the `inputs` value.
+   *
+   * <code-example path="core/ts/metadata/directives.ts" region="component-input">
+   * </code-example>
+   *
+   *
+   * ### Setting component outputs
+   *
+   * The following example shows two event emitters that emit on an interval. One
+   * emits an output every second, while the other emits every five seconds.
+   *
+   * {@example core/ts/metadata/directives.ts region='component-output-interval'}
+   *
+   * ### Injecting a class with a view provider
+   *
+   * The following simple example injects a class into a component
+   * using the view provider specified in component metadata:
+   *
+   * ```
+   * class Greeter {
+   *    greet(name:string) {
+   *      return 'Hello ' + name + '!';
+   *    }
+   * }
+   *
+   * @Directive({
+   *   selector: 'needs-greeter'
+   * })
+   * class NeedsGreeter {
+   *   greeter:Greeter;
+   *
+   *   constructor(greeter:Greeter) {
+   *     this.greeter = greeter;
+   *   }
+   * }
+   *
+   * @Component({
+   *   selector: 'greet',
+   *   viewProviders: [
+   *     Greeter
+   *   ],
+   *   template: `<needs-greeter></needs-greeter>`
+   * })
+   * class HelloWorld {
+   * }
+   *
+   * ```
+   *
+   *
+   * @Annotation
+   */
+  (obj: Component): TypeDecorator;
+  /**
+   * See the `@Component` decorator.
+   */
+  new (obj: Component): Component;
+}
+
+/**
+ * Supplies configuration metadata for an Angular component.
+ */
+export interface Component extends Directive {
+  /**
+   * The change-detection strategy to use for this component.
+   *
+   * When a component is instantiated, Angular creates a change detector,
+   * which is responsible for propagating the component's bindings.
+   * The strategy is one of:
+   * - `ChangeDetectionStrategy#OnPush` sets the strategy to `CheckOnce` (on demand).
+   * - `ChangeDetectionStrategy#Default` sets the strategy to `CheckAlways`.
+   */
+  changeDetection?: ChangeDetectionStrategy;
+
+  /**
+   * Defines the set of injectable objects that are visible to its view DOM children.
+   * See [example](#injecting-a-class-with-a-view-provider).
+   *
+   */
+  viewProviders?: Provider[];
+
+  /**
+   * The module ID of the module that contains the component.
+   * The component must be able to resolve relative URLs for templates and styles.
+   * SystemJS exposes the `__moduleName` variable within each module.
+   * In CommonJS, this can  be set to `module.id`.
+   *
+   */
+  moduleId?: string;
+
+  /**
+   * The URL of a template file for an Angular component. If provided,
+   * do not supply an inline template using `template`.
+   *
+   */
+  templateUrl?: string;
+
+  /**
+   * An inline template for an Angular component. If provided,
+   * do not supply a template file using `templateUrl`.
+   *
+   */
+  template?: string;
+
+  /**
+   * One or more URLs for files containing CSS stylesheets to use
+   * in this component.
+   */
+  styleUrls?: string[];
+
+  /**
+   * One or more inline CSS stylesheets to use
+   * in this component.
+   */
+  styles?: string[];
+
+  /**
+   * One or more animation `trigger()` calls, containing
+   * `state()` and `transition()` definitions.
+   * See the [Animations guide](/guide/animations) and animations API documentation.
+   *
+   */
+  animations?: any[];
+
+  /**
+   * An encapsulation policy for the template and CSS styles. One of:
+   * - `ViewEncapsulation.Native`: Use shadow roots. This works
+   * only if natively available on the platform.
+   * - `ViewEncapsulation.Emulated`: Use shimmed CSS that
+   * emulates the native behavior.
+   * - `ViewEncapsulation.None`: Use global CSS without any
+   * encapsulation.
+   *
+   * If not supplied, the value is taken from `CompilerOptions`. The default compiler option is
+   * `ViewEncapsulation.Emulated`.
+   *
+   * If the policy is set to `ViewEncapsulation.Emulated` and the component has no `styles`
+   * or `styleUrls` specified, the policy is automatically switched to `ViewEncapsulation.None`.
+   */
+  encapsulation?: ViewEncapsulation;
+
+  /**
+   * Overrides the default encapsulation start and end delimiters (`{{` and `}}`)
+   */
+  interpolation?: [string, string];
+
+  /**
+   * A set of components that should be compiled along with
+   * this component. For each component listed here,
+   * Angular creates a {@link ComponentFactory} and stores it in the
+   * {@link ComponentFactoryResolver}.
+   */
+  entryComponents?: Array<Type<any>|any[]>;
+
+  /**
+   * True to preserve or false to remove potentially superfluous whitespace characters
+   * from the compiled template. Whitespace characters are those matching the `\s`
+   * character class in JavaScript regular expressions. Default is false, unless
+   * overridden in compiler options.
+   */
+  preserveWhitespaces?: boolean;
+}
+
+/**
+ * Component decorator and metadata.
+ *
+ * @usageNotes
+ *
+ * ### Using animations
+ *
+ * The following snippet shows an animation trigger in a component's
+ * metadata. The trigger is attached to an element in the component's
+ * template, using "@_trigger_name_", and a state expression that is evaluated
+ * at run time to determine whether the animation should start.
+ *
+ * ```typescript
+ * @Component({
+ *   selector: 'animation-cmp',
+ *   templateUrl: 'animation-cmp.html',
+ *   animations: [
+ *     trigger('myTriggerName', [
+ *       state('on', style({ opacity: 1 }),
+ *       state('off', style({ opacity: 0 }),
+ *       transition('on => off', [
+ *         animate("1s")
+ *       ])
+ *     ])
+ *   ]
+ * })
+ * ```
+ *
+ * ```html
+ * <!-- animation-cmp.html -->
+ * <div @myTriggerName="expression">...</div>
+ * ```
+ *
+ * ### Preserving whitespace
+ *
+ * Removing whitespace can greatly reduce AOT-generated code size, and speed up view creation.
+ * As of Angular 6, default for `preserveWhitespaces` is false (whitespace is removed).
+ * To change the default setting for all components in your application, set
+ * the `preserveWhitespaces` option of the AOT compiler.
+ *
+ * Current implementation removes whitespace characters as follows:
+ * - Trims all whitespaces at the beginning and the end of a template.
+ * - Removes whitespace-only text nodes. For example,
+ * `<button>Action 1</button>  <button>Action 2</button>` becomes
+ * `<button>Action 1</button><button>Action 2</button>`.
+ * - Replaces a series of whitespace characters in text nodes with a single space.
+ * For example, `<span>\n some text\n</span>` becomes `<span> some text </span>`.
+ * - Does NOT alter text nodes inside HTML tags such as `<pre>` or `<textarea>`,
+ * where whitespace characters are significant.
+ *
+ * Note that these transformations can influence DOM nodes layout, although impact
+ * should be minimal.
+ *
+ * You can override the default behavior to preserve whitespace characters
+ * in certain fragments of a template. For example, you can exclude an entire
+ * DOM sub-tree by using the `ngPreserveWhitespaces` attribute:
+ *
+ * ```html
+ * <div ngPreserveWhitespaces>
+ *     whitespaces are preserved here
+ *     <span>    and here </span>
+ * </div>
+ * ```
+ *
+ * You can force a single space to be preserved in a text node by using `&ngsp;`,
+ * which is replaced with a space character by Angular's template
+ * compiler:
+ *
+ * ```html
+ * <a>Spaces</a>&ngsp;<a>between</a>&ngsp;<a>links.</a>
+ * <!-->compiled to be equivalent to:</>
+ *  <a>Spaces</a> <a>between</a> <a>links.</a>
+ * ```
+ *
+ * Note that sequences of `&ngsp;` are still collapsed to just one space character when
+ * the `preserveWhitespaces` option is set to `false`.
+ *
+ * ```html
+ * <a>before</a>&ngsp;&ngsp;&ngsp;<a>after</a>
+ * <!-->compiled to be equivalent to:</>
+ *  <a>Spaces</a> <a>between</a> <a>links.</a>
+ * ```
+ *
+ * To preserve sequences of whitespace characters, use the
+ * `ngPreserveWhitespaces` attribute.
+ *
+ * @Annotation
+ */
+export const Component: ComponentDecorator = makeDecorator(
+    'Component', (c: Component = {}) => ({changeDetection: ChangeDetectionStrategy.Default, ...c}),
+    Directive, undefined,
+    (type: Type<any>, meta: Component) => (R3_COMPILE_COMPONENT || (() => {}))(type, meta));
+
+/**
+ * Type of the Pipe decorator / constructor function.
+ */
+export interface PipeDecorator {
+  /**
+   * Declares a reusable pipe function, and supplies configuration metadata.
+   *
+   */
+  (obj: Pipe): TypeDecorator;
+
+  /**
+   * See the `Pipe` decorator.
+   */
+  new (obj: Pipe): Pipe;
+}
+
+/**
+ * Type of the Pipe metadata.
+ */
+export interface Pipe {
+  /**
+   * The pipe name to use in template bindings.
+   *
+   */
+  name: string;
+
+  /**
+   * When true, the pipe is pure, meaning that the
+   * `transform()` method is invoked only when its input arguments
+   * change. Pipes are pure by default.
+   *
+   * If the pipe has internal state (that is, the result
+   * depends on state other than its arguments), set `pure` to false.
+   * In this case, the pipe is invoked on each change-detection cycle,
+   * even if the arguments have not changed.
+   */
+  pure?: boolean;
+}
+
+/**
+ *
+ *
+ * @Annotation
+ */
+export const Pipe: PipeDecorator = makeDecorator(
+    'Pipe', (p: Pipe) => ({pure: true, ...p}), undefined, undefined,
+    (type: Type<any>, meta: Pipe) => (R3_COMPILE_PIPE || (() => {}))(type, meta));
+
+
+/**
+ *
+ */
+export interface InputDecorator {
+  /**
+   * Decorator that marks a class as pipe and supplies configuration metadata.
+   *
+   * A pipe class must implement the `PipeTransform` interface.
+   * For example, if the name is "myPipe", use a template binding expression
+   * such as the following:
+   *
+   * ```
+   * {{ exp | myPipe }}
+   * ```
+   *
+   * The result of the expression is passed to the pipe's `transform()` method.
+   *
+   * A pipe must belong to an NgModule in order for it to be available
+   * to a template. To make it a member of an NgModule,
+   * list it in the `declarations` field of the `@NgModule` metadata.
+   *
+   */
+  (bindingPropertyName?: string): any;
+  new (bindingPropertyName?: string): any;
+}
+
+/**
+ * Type of metadata for an `Input` property.
+ *
+ *
+ */
+export interface Input {
+  /**
+   * Decorator that marks a class field as an input property and supplies configuration metadata.
+   * Declares a data-bound input property, which Angular automatically updates
+   * during change detection.
+   *
+   * @usageNotes
+   *
+   * You can supply an optional name to use in templates when the
+   * component is instantiated, that maps to the
+   * name of the bound property. By default, the original
+   * name of the bound property is used for input binding.
+   *
+   * The following example creates a component with two input properties,
+   * one of which is given a special binding name.
+   *
+   * ```typescript
+   * @Component({
+   *   selector: 'bank-account',
+   *   template: `
+   *     Bank Name: {{bankName}}
+   *     Account Id: {{id}}
+   *   `
+   * })
+   * class BankAccount {
+   *   // This property is bound using its original name.
+   *   @Input() bankName: string;
+   *   // this property value is bound to a different property name
+   *   // when this component is instantiated in a template.
+   *   @Input('account-id') id: string;
+   *
+   *   // this property is not bound, and is not automatically updated by Angular
+   *   normalizedBankName: string;
+   * }
+   *
+   * @Component({
+   *   selector: 'app',
+   *   template: `
+   *     <bank-account bankName="RBC" account-id="4747"></bank-account>
+   *   `
+   * })
+   *
+   * class App {}
+   * ```
+   */
+  bindingPropertyName?: string;
+}
+
+const initializeBaseDef = (target: any): void => {
+  const constructor = target.constructor;
+  const inheritedBaseDef = constructor.ngBaseDef;
+
+  const baseDef = constructor.ngBaseDef = {
+    inputs: {},
+    outputs: {},
+    declaredInputs: {},
+  };
+
+  if (inheritedBaseDef) {
+    fillProperties(baseDef.inputs, inheritedBaseDef.inputs);
+    fillProperties(baseDef.outputs, inheritedBaseDef.outputs);
+    fillProperties(baseDef.declaredInputs, inheritedBaseDef.declaredInputs);
+  }
+};
+
+/**
+ * Used to get the minified alias of ngBaseDef
+ */
+const NG_BASE_DEF = Object.keys({ngBaseDef: true})[0];
+
+/**
+ * Does the work of creating the `ngBaseDef` property for the @Input and @Output decorators.
+ * @param key "inputs" or "outputs"
+ */
+const updateBaseDefFromIOProp = (getProp: (baseDef: {inputs?: any, outputs?: any}) => any) =>
+    (target: any, name: string, ...args: any[]) => {
+      const constructor = target.constructor;
+
+      if (!constructor.hasOwnProperty(NG_BASE_DEF)) {
+        initializeBaseDef(target);
+      }
+
+      const baseDef = constructor.ngBaseDef;
+      const defProp = getProp(baseDef);
+      defProp[name] = args[0];
+    };
+
+/**
+ *
+ * @Annotation
+ */
+export const Input: InputDecorator = makePropDecorator(
+    'Input', (bindingPropertyName?: string) => ({bindingPropertyName}), undefined,
+    updateBaseDefFromIOProp(baseDef => baseDef.inputs || {}));
+
+/**
+ * Type of the Output decorator / constructor function.
+ */
+export interface OutputDecorator {
+  /**
+  * Decorator that marks a class field as an output property and supplies configuration metadata.
+  * Declares a data-bound output property, which Angular automatically updates
+  * during change detection.
+  *
+  * @usageNotes
+  *
+  * You can supply an optional name to use in templates when the
+  * component is instantiated, that maps to the
+  * name of the bound property. By default, the original
+  * name of the bound property is used for output binding.
+  *
+  * See `@Input` decorator for an example of providing a binding name.
+  *
+  */
+  (bindingPropertyName?: string): any;
+  new (bindingPropertyName?: string): any;
+}
+
+/**
+ * Type of the Output metadata.
+ */
+export interface Output { bindingPropertyName?: string; }
+
+/**
+ *
+ * @Annotation
+ */
+export const Output: OutputDecorator = makePropDecorator(
+    'Output', (bindingPropertyName?: string) => ({bindingPropertyName}), undefined,
+    updateBaseDefFromIOProp(baseDef => baseDef.outputs || {}));
+
+
+
+/**
+ * Type of the HostBinding decorator / constructor function.
+ */
+export interface HostBindingDecorator {
+  /**
+   * Decorator that marks a DOM property as a host-binding property and supplies configuration
+   * metadata.
+   * Angular automatically checks host property bindings during change detection, and
+   * if a binding changes it updates the host element of the directive.
+   *
+   * @usageNotes
+   *
+   * The following example creates a directive that sets the `valid` and `invalid`
+   * properties on the DOM element that has an `ngModel` directive on it.
+   *
+   * ```typescript
+   * @Directive({selector: '[ngModel]'})
+   * class NgModelStatus {
+   *   constructor(public control: NgModel) {}
+   *   @HostBinding('class.valid') get valid() { return this.control.valid; }
+   *   @HostBinding('class.invalid') get invalid() { return this.control.invalid; }
+   * }
+   *
+   * @Component({
+   *   selector: 'app',
+   *   template: `<input [(ngModel)]="prop">`,
+   * })
+   * class App {
+   *   prop;
+   * }
+   * ```
+   */
+  (hostPropertyName?: string): any;
+  new (hostPropertyName?: string): any;
+}
+
+/**
+ * Type of the HostBinding metadata.
+ *
+ */
+export interface HostBinding { hostPropertyName?: string; }
+
+/**
+ *
+ * @Annotation
+ */
+export const HostBinding: HostBindingDecorator =
+    makePropDecorator('HostBinding', (hostPropertyName?: string) => ({hostPropertyName}));
+
+
+/**
+ * Type of the HostListener decorator / constructor function.
+ */
+export interface HostListenerDecorator {
+  (eventName: string, args?: string[]): any;
+  new (eventName: string, args?: string[]): any;
+}
+
+/**
+ * Type of the HostListener metadata.
+ */
+export interface HostListener {
+  /**
+   * The CSS event to listen for.
+   */
+  eventName?: string;
+  /**
+   * A set of arguments to pass to the handler method when the event occurs.
+   */
+  args?: string[];
+}
+
+/**
+ * Binds a CSS event to a host listener and supplies configuration metadata.
+ * Angular invokes the supplied handler method when the host element emits the specified event,
+ * and updates the bound element with the result.
+ * If the handler method returns false, applies `preventDefault` on the bound element.
+ *
+ * @usageNotes
+ *
+ * The following example declares a directive
+ * that attaches a click listener to a button and counts clicks.
+ *
+ * ```
+ * @Directive({selector: 'button[counting]'})
+ * class CountClicks {
+ *   numberOfClicks = 0;
+ *
+ *   @HostListener('click', ['$event.target'])
+ *   onClick(btn) {
+ *     console.log('button', btn, 'number of clicks:', this.numberOfClicks++);
+ *  }
+ * }
+ *
+ * @Component({
+ *   selector: 'app',
+ *   template: '<button counting>Increment</button>',
+ * })
+ * class App {}
+ * ```
+ *
+ * @Annotation
+ */
+export const HostListener: HostListenerDecorator =
+    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
new file mode 100644
index 000000000000..61ce3af80a69
--- /dev/null
+++ b/packages/core/src/metadata/lifecycle_hooks.ts
@@ -0,0 +1,234 @@
+/**
+ * @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 {SimpleChange} from '../change_detection/change_detection_util';
+
+
+/**
+ * Defines an object that associates properties with
+ * instances of `SimpleChange`.
+ *
+ * @see `OnChanges`
+ *
+ */
+export interface SimpleChanges { [propName: string]: SimpleChange; }
+
+/**
+ * @description
+ * A lifecycle hook that is called when any data-bound property of a directive changes.
+ * Define an `ngOnChanges()` method to handle the changes.
+ *
+ * @see `DoCheck`
+ * @see `OnInit`
+ * @see [Lifecycle Hooks](guide/lifecycle-hooks#onchanges) guide
+ *
+ * @usageNotes
+ * The following snippet shows how a component can implement this interface to
+ * define an on-changes handler for an input property.
+ *
+ * {@example core/ts/metadata/lifecycle_hooks_spec.ts region='OnChanges'}
+ *
+ */
+export interface OnChanges {
+  /**
+   * A callback method that is invoked immediately after the
+   * default change detector has checked data-bound properties
+   * if at least one has changed, and before the view and content
+   * children are checked.
+   * @param changes The changed properties.
+   */
+  ngOnChanges(changes: SimpleChanges): void;
+}
+
+/**
+ * @description
+ * A lifecycle hook that is called after Angular has initialized
+ * all data-bound properties of a directive.
+ * Define an `ngOnInit()` method to handle any additional initialization tasks.
+ *
+ * @see `AfterContentInit`
+ * @see [Lifecycle Hooks](guide/lifecycle-hooks#onchanges) guide
+ *
+ * @usageNotes
+ * The following snippet shows how a component can implement this interface to
+ * define its own initialization method.
+ *
+ * {@example core/ts/metadata/lifecycle_hooks_spec.ts region='OnInit'}
+ *
+ *
+ */
+export interface OnInit {
+  /**
+   * A callback method that is invoked immediately after the
+   * default change detector has checked the directive's
+   * data-bound properties for the first time,
+   * and before any of the view or content children have been checked.
+   * It is invoked only once when the directive is instantiated.
+   */
+  ngOnInit(): void;
+}
+
+/**
+ * A lifecycle hook that invokes a custom change-detection function for a directive,
+ * in addition to the check performed by the default change-detector.
+ * 
+ * The default change-detection algorithm looks for differences by comparing
+ * bound-property values by reference across change detection runs. You can use this
+ * hook to check for and respond to changes by some other means.
+ *
+ * When the default change detector detects changes, it invokes `ngOnChanges()` if supplied,
+ * regardless of whether you perform additional change detection.
+ * Typically, you should not use both `DoCheck` and `OnChanges` to respond to
+ * changes on the same input. 
+ * 
+ * @see `OnChanges`
+ * @see [Lifecycle Hooks](guide/lifecycle-hooks#onchanges) guide
+ *
+ * @usageNotes
+ * The following snippet shows how a component can implement this interface
+ * to invoke it own change-detection cycle.  
+ *
+ * {@example core/ts/metadata/lifecycle_hooks_spec.ts region='DoCheck'}
+ *
+ */
+export interface DoCheck {
+  /**
+     * A callback method that performs change-detection, invoked
+     * after the default change-detector runs.
+     * See `KeyValueDiffers` and `IterableDiffers` for implementing
+     * custom change checking for collections.
+     *
+     */
+  ngDoCheck(): void;
+}
+
+/**
+ * A lifecycle hook that is called when a directive, pipe, or service is destroyed.
+ * Use for any custom cleanup that needs to occur when the
+ * instance is destroyed.
+ * @see [Lifecycle Hooks](guide/lifecycle-hooks#onchanges) guide
+ *
+ * @usageNotes
+ * The following snippet shows how a component can implement this interface
+ * to define its own custom clean-up method.
+ *  
+ * {@example core/ts/metadata/lifecycle_hooks_spec.ts region='OnDestroy'}
+ *
+ */
+export interface OnDestroy {
+  /**
+   * A callback method that performs custom clean-up, invoked immediately
+   * after a directive, pipe, or service instance is destroyed.
+   */
+  ngOnDestroy(): void;
+}
+
+/**
+ * @description
+ * A lifecycle hook that is called after Angular has fully initialized
+ * all content of a directive.
+ * Define an `ngAfterContentInit()` method to handle any additional initialization tasks.
+ *
+ * @see `OnInit`
+ * @see `AfterViewInit`
+ * @see [Lifecycle Hooks](guide/lifecycle-hooks#onchanges) guide
+ *
+ * @usageNotes
+ * The following snippet shows how a component can implement this interface to
+ * define its own content initialization method.
+ *
+ * {@example core/ts/metadata/lifecycle_hooks_spec.ts region='AfterContentInit'}
+ *
+ *
+ */
+export interface AfterContentInit {
+  /**
+   * A callback method that is invoked immediately after
+   * Angular has completed initialization of all of the directive's
+   * content.
+   * It is invoked only once when the directive is instantiated.
+   */
+  ngAfterContentInit(): void;
+}
+
+/**
+ * @description
+ * A lifecycle hook that is called after the default change detector has
+ * completed checking all content of a directive.
+ *
+ * @see `AfterViewChecked`
+ * @see [Lifecycle Hooks](guide/lifecycle-hooks#onchanges) guide
+ *
+ * @usageNotes
+ * The following snippet shows how a component can implement this interface to
+ * define its own after-check functionality.
+ *
+ * {@example core/ts/metadata/lifecycle_hooks_spec.ts region='AfterContentChecked'}
+ *
+ *
+ */
+export interface AfterContentChecked {
+  /**
+   * A callback method that is invoked immediately after the
+   * default change detector has completed checking all of the directive's
+   * content.
+   */
+  ngAfterContentChecked(): void;
+}
+
+/**
+ * @description
+ * A lifecycle hook that is called after Angular has fully initialized
+ * a component's view.
+ * Define an `ngAfterViewInit()` method to handle any additional initialization tasks.
+ *
+ * @see `OnInit`
+ * @see `AfterContentInit`
+ * @see [Lifecycle Hooks](guide/lifecycle-hooks#onchanges) guide
+ *
+ * @usageNotes
+ * The following snippet shows how a component can implement this interface to
+ * define its own view initialization method.
+ *
+ * {@example core/ts/metadata/lifecycle_hooks_spec.ts region='AfterViewInit'}
+ *
+ *
+ */
+export interface AfterViewInit {
+  /**
+   * A callback method that is invoked immediately after
+   * Angular has completed initialization of a component's view.
+   * It is invoked only once when the view is instantiated.
+   *
+   */
+  ngAfterViewInit(): void;
+}
+
+/**
+ * @description
+ * A lifecycle hook that is called after the default change detector has
+ * completed checking a component's view for changes.
+ *
+ * @see `AfterContentChecked`
+ * @see [Lifecycle Hooks](guide/lifecycle-hooks#onchanges) guide
+ *
+ * @usageNotes
+ * The following snippet shows how a component can implement this interface to
+ * define its own after-check functionality.
+ *
+ * {@example core/ts/metadata/lifecycle_hooks_spec.ts region='AfterViewChecked'}
+ *
+ */
+export interface AfterViewChecked {
+  /**
+   * A callback method that is invoked immediately after the
+   * default change detector has completed one change-check cycle
+   * for a component's view.
+   */
+  ngAfterViewChecked(): void;
+}
diff --git a/packages/core/src/metadata/ng_module.ts b/packages/core/src/metadata/ng_module.ts
new file mode 100644
index 000000000000..6bab5807d6d3
--- /dev/null
+++ b/packages/core/src/metadata/ng_module.ts
@@ -0,0 +1,376 @@
+/**
+ * @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 {ApplicationRef} from '../application_ref';
+import {InjectorDef, InjectorType, defineInjector} from '../di/defs';
+import {convertInjectableProviderToFactory} from '../di/injectable';
+import {Provider} from '../di/provider';
+import {R3_COMPILE_NGMODULE} from '../ivy_switch';
+import {Type} from '../type';
+import {TypeDecorator, makeDecorator} from '../util/decorators';
+
+/**
+ * Represents the expansion of an `NgModule` into its scopes.
+ *
+ * A scope is a set of directives and pipes that are visible in a particular context. Each
+ * `NgModule` has two scopes. The `compilation` scope is the set of directives and pipes that will
+ * be recognized in the templates of components declared by the module. The `exported` scope is the
+ * set of directives and pipes exported by a module (that is, module B's exported scope gets added
+ * to module A's compilation scope when module A imports B).
+ */
+export interface NgModuleTransitiveScopes {
+  compilation: {directives: Set<any>; pipes: Set<any>;};
+  exported: {directives: Set<any>; pipes: Set<any>;};
+}
+
+/**
+ * A version of {@link NgModuleDef} that represents the runtime type shape only, and excludes
+ * metadata parameters.
+ */
+export type NgModuleDefInternal<T> = NgModuleDef<T, any, any, any>;
+
+/**
+ * Runtime link information for NgModules.
+ *
+ * This is the internal data structure used by the runtime to assemble components, directives,
+ * pipes, and injectors.
+ *
+ * NOTE: Always use `defineNgModule` function to create this object,
+ * never create the object directly since the shape of this object
+ * can change between versions.
+ */
+export interface NgModuleDef<T, Declarations, Imports, Exports> {
+  /** Token representing the module. Used by DI. */
+  type: T;
+
+  /** List of components to bootstrap. */
+  bootstrap: Type<any>[];
+
+  /** List of components, directives, and pipes declared by this module. */
+  declarations: Type<any>[];
+
+  /** List of modules or `ModuleWithProviders` imported by this module. */
+  imports: Type<any>[];
+
+  /**
+   * List of modules, `ModuleWithProviders`, components, directives, or pipes exported by this
+   * module.
+   */
+  exports: Type<any>[];
+
+  /**
+   * Cached value of computed `transitiveCompileScopes` for this module.
+   *
+   * This should never be read directly, but accessed via `transitiveScopesFor`.
+   */
+  transitiveCompileScopes: NgModuleTransitiveScopes|null;
+}
+
+/**
+ * A wrapper around an NgModule that associates it with the providers.
+ *
+ * @param T the module type. In Ivy applications, this must be explicitly
+ * provided.
+ */
+export interface ModuleWithProviders<T = any> {
+  ngModule: Type<T>;
+  providers?: Provider[];
+}
+
+/**
+ * A schema definition associated with an NgModule.
+ * 
+ * @see `@NgModule`, `CUSTOM_ELEMENTS_SCHEMA`, `NO_ERRORS_SCHEMA`
+ * 
+ * @param name The name of a defined schema.
+ *
+ * @experimental
+ */
+export interface SchemaMetadata { name: string; }
+
+/**
+ * Defines a schema that allows an NgModule to contain the following:
+ * - Non-Angular elements named with dash case (`-`).
+ * - Element properties named with dash case (`-`).
+ * Dash case is the naming convention for custom elements.
+ *
+ *
+ */
+export const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata = {
+  name: 'custom-elements'
+};
+
+/**
+ * Defines a schema that allows any property on any element.
+ *
+ * @experimental
+ */
+export const NO_ERRORS_SCHEMA: SchemaMetadata = {
+  name: 'no-errors-schema'
+};
+
+
+/**
+ * Type of the NgModule decorator / constructor function.
+ *
+ *
+ */
+export interface NgModuleDecorator {
+  /**
+   * Marks a class as an NgModule and supplies configuration metadata.
+   */
+  (obj?: NgModule): TypeDecorator;
+  new (obj?: NgModule): NgModule;
+}
+
+/**
+ * Type of the NgModule metadata.
+ *
+ *
+ */
+export interface NgModule {
+  /**
+   * The set of injectable objects that are available in the injector
+   * of this module.
+   * 
+   * @see [Dependency Injection guide](guide/dependency-injection)
+   * @see [NgModule guide](guide/providers)
+   *
+   * @usageNotes
+   *
+   * Dependencies whose providers are listed here become available for injection
+   * into any component, directive, pipe or service that is a child of this injector.
+   * The NgModule used for bootstrapping uses the root injector, and can provide dependencies
+   * to any part of the app.
+   * 
+   * A lazy-loaded module has its own injector, typically a child of the app root injector.
+   * Lazy-loaded services are scoped to the lazy-loaded module's injector.
+   * If a lazy-loaded module also provides the `UserService`, any component created
+   * within that module's context (such as by router navigation) gets the local instance
+   * of the service, not the instance in the root injector. 
+   * Components in external modules continue to receive the instance provided by their injectors.
+   * 
+   * ### Example
+   *
+   * The following example defines a class that is injected in
+   * the HelloWorld NgModule:
+   *
+   * ```
+   * class Greeter {
+   *    greet(name:string) {
+   *      return 'Hello ' + name + '!';
+   *    }
+   * }
+   *
+   * @NgModule({
+   *   providers: [
+   *     Greeter
+   *   ]
+   * })
+   * class HelloWorld {
+   *   greeter:Greeter;
+   *
+   *   constructor(greeter:Greeter) {
+   *     this.greeter = greeter;
+   *   }
+   * }
+   * ```
+   */
+  providers?: Provider[];
+
+  /**
+   * The set of components, directives, and pipes ([declarables](guide/glossary#declarable))
+   * that belong to this module.
+   *
+   * @usageNotes
+   *
+   * The set of selectors that are available to a template include those declared here, and
+   * those that are exported from imported NgModules.
+   *
+   * Declarables must belong to exactly one module.
+   * The compiler emits an error if you try to declare the same class in more than one module.
+   * Be careful not to declare a class that is imported from another module.
+   *
+   * ### Example
+   *
+   * The following example allows the CommonModule to use the `NgFor`
+   * directive.
+   *
+   * ```javascript
+   * @NgModule({
+   *   declarations: [NgFor]
+   * })
+   * class CommonModule {
+   * }
+   * ```
+   */
+  declarations?: Array<Type<any>|any[]>;
+
+  /**
+   * The set of NgModules whose exported [declarables](guide/glossary#declarable)
+   * are available to templates in this module.
+   *
+   * @usageNotes
+   *
+   * A template can use exported declarables from any
+   * imported module, including those from modules that are imported indirectly
+   * and re-exported.
+   * For example, `ModuleA` imports `ModuleB`, and also exports
+   * it, which makes the declarables from `ModuleB` available
+   * wherever `ModuleA` is imported.
+   *
+   * ### Example
+   *
+   * The following example allows MainModule to use anthing exported by
+   * `CommonModule`:
+   *
+   * ```javascript
+   * @NgModule({
+   *   imports: [CommonModule]
+   * })
+   * class MainModule {
+   * }
+   * ```
+   *
+   */
+  imports?: Array<Type<any>|ModuleWithProviders|any[]>;
+
+  /**
+   * The set of components, directives, and pipes declared in this
+   * NgModule that can be used in the template of any component that is part of an
+   * NgModule that imports this NgModule. Exported declarations are the module's public API.
+   *
+   * A declarable belongs to one and only one NgModule.
+   * A module can list another module among its exports, in which case all of that module's
+   * public declaration are exported.
+   *
+   * @usageNotes
+   *
+   * Declarations are private by default.
+   * If this ModuleA does not export UserComponent, then only the components within this
+   * ModuleA can use UserComponent.
+   *
+   * ModuleA can import ModuleB and also export it, making exports from ModuleB
+   * available to an NgModule that imports ModuleA.
+   *
+   * ### Example
+   *
+   * The following example exports the `NgFor` directive from CommonModule.
+   *
+   * ```javascript
+   * @NgModule({
+   *   exports: [NgFor]
+   * })
+   * class CommonModule {
+   * }
+   * ```
+   */
+  exports?: Array<Type<any>|any[]>;
+
+  /**
+   * The set of components to compile when this NgModule is defined,
+   * so that they can be dynamically loaded into the view.
+   *
+   * For each component listed here, Angular creates a `ComponentFactory`
+   * and stores it in the `ComponentFactoryResolver`.
+   *
+   * Angular automatically adds components in the module's bootstrap
+   * and route definitions into the `entryComponents` list. Use this
+   * option to add components that are bootstrapped
+   * using one of the imperative techniques, such as `ViewContainerRef.createComponent()`.
+   *
+   * @see [Entry Components](guide/entry-components)
+   */
+  entryComponents?: Array<Type<any>|any[]>;
+
+  /**
+   * The set of components that are bootstrapped when
+   * this module is bootstrapped. The components listed here
+   * are automatically added to `entryComponents`.
+   */
+  bootstrap?: Array<Type<any>|any[]>;
+
+  /**
+   * The set of schemas that declare elements to be allowed in the NgModule.
+   * Elements and properties that are neither Angular components nor directives
+   * must be declared in a schema.
+   *
+   * Allowed value are `NO_ERRORS_SCHEMA` and `CUSTOM_ELEMENTS_SCHEMA`.
+   *
+   * @security When using one of `NO_ERRORS_SCHEMA` or `CUSTOM_ELEMENTS_SCHEMA`
+   * you must ensure that allowed elements and properties securely escape inputs.
+   */
+  schemas?: Array<SchemaMetadata|any[]>;
+
+  /**
+   * A name or path that uniquely identifies this NgModule in `getModuleFactory`.
+   * If left `undefined`, the NgModule is not registered with
+   * `getModuleFactory`.
+   */
+  id?: string;
+
+  /**
+   * If true, this module will be skipped by the AOT compiler and so will always be compiled
+   * using JIT.
+   *
+   * This exists to support future Ivy work and has no effect currently.
+   */
+  jit?: true;
+}
+
+function preR3NgModuleCompile(moduleType: InjectorType<any>, metadata: NgModule): void {
+  let imports = (metadata && metadata.imports) || [];
+  if (metadata && metadata.exports) {
+    imports = [...imports, metadata.exports];
+  }
+
+  moduleType.ngInjectorDef = defineInjector({
+    factory: convertInjectableProviderToFactory(moduleType, {useClass: moduleType}),
+    providers: metadata && metadata.providers,
+    imports: imports,
+  });
+}
+
+/**
+ * @Annotation
+ */
+export const NgModule: NgModuleDecorator = makeDecorator(
+    'NgModule', (ngModule: NgModule) => ngModule, undefined, undefined,
+    /**
+     * Decorator that marks the following class as an NgModule, and supplies
+     * configuration metadata for it.
+     *
+     * * The `declarations` and `entryComponents` options configure the compiler
+     * with information about what belongs to the NgModule.
+     * * The `providers` options configures the NgModule's injector to provide
+     * dependencies the NgModule members.
+     * * The `imports` and `exports` options bring in members from other modules, and make
+     * this module's members available to others.
+     */
+    (type: Type<any>, meta: NgModule) => (R3_COMPILE_NGMODULE || preR3NgModuleCompile)(type, meta));
+
+/**
+ * @description
+ * Hook for manual bootstrapping of the application instead of using bootstrap array in @NgModule
+ * annotation.
+ *
+ * Reference to the current application is provided as a parameter.
+ *
+ * See ["Bootstrapping"](guide/bootstrapping) and ["Entry components"](guide/entry-components).
+ *
+ * @usageNotes
+ * ```typescript
+ * class AppModule implements DoBootstrap {
+ *   ngDoBootstrap(appRef: ApplicationRef) {
+ *     appRef.bootstrap(AppComponent); // Or some other component
+ *   }
+ * }
+ * ```
+ *
+ */
+export interface DoBootstrap { ngDoBootstrap(appRef: ApplicationRef): void; }
diff --git a/packages/core/src/metadata/resource_loading.ts b/packages/core/src/metadata/resource_loading.ts
new file mode 100644
index 000000000000..1870d997c002
--- /dev/null
+++ b/packages/core/src/metadata/resource_loading.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 {Component} from './directives';
+
+
+/**
+ * Used to resolve resource URLs on `@Component` when used with JIT compilation.
+ *
+ * Example:
+ * ```
+ * @Component({
+ *   selector: 'my-comp',
+ *   templateUrl: 'my-comp.html', // This requires asynchronous resolution
+ * })
+ * class MyComponnent{
+ * }
+ *
+ * // Calling `renderComponent` will fail because `MyComponent`'s `@Compenent.templateUrl`
+ * // needs to be resolved because `renderComponent` is synchronous process.
+ * // renderComponent(MyComponent);
+ *
+ * // Calling `resolveComponentResources` will resolve `@Compenent.templateUrl` into
+ * // `@Compenent.template`, which would allow `renderComponent` to proceed in synchronous manner.
+ * // Use browser's `fetch` function as the default resource resolution strategy.
+ * resolveComponentResources(fetch).then(() => {
+ *   // After resolution all URLs have been converted into strings.
+ *   renderComponent(MyComponent);
+ * });
+ *
+ * ```
+ *
+ * NOTE: In AOT the resolution happens during compilation, and so there should be no need
+ * to call this method outside JIT mode.
+ *
+ * @param resourceResolver a function which is responsible to returning a `Promise` of the resolved
+ * URL. Browser's `fetch` method is a good default implementation.
+ */
+export function resolveComponentResources(
+    resourceResolver: (url: string) => (Promise<string|{text(): Promise<string>}>)): Promise<null> {
+  // Store all promises which are fetching the resources.
+  const urlFetches: Promise<string>[] = [];
+
+  // Cache so that we don't fetch the same resource more than once.
+  const urlMap = new Map<string, Promise<string>>();
+  function cachedResourceResolve(url: string): Promise<string> {
+    let promise = urlMap.get(url);
+    if (!promise) {
+      const resp = resourceResolver(url);
+      urlMap.set(url, promise = resp.then(unwrapResponse));
+      urlFetches.push(promise);
+    }
+    return promise;
+  }
+
+  componentResourceResolutionQueue.forEach((component: Component) => {
+    if (component.templateUrl) {
+      cachedResourceResolve(component.templateUrl).then((template) => {
+        component.template = template;
+        component.templateUrl = undefined;
+      });
+    }
+    const styleUrls = component.styleUrls;
+    const styles = component.styles || (component.styles = []);
+    const styleOffset = component.styles.length;
+    styleUrls && styleUrls.forEach((styleUrl, index) => {
+      styles.push('');  // pre-allocate array.
+      cachedResourceResolve(styleUrl).then((style) => {
+        styles[styleOffset + index] = style;
+        styleUrls.splice(styleUrls.indexOf(styleUrl), 1);
+        if (styleUrls.length == 0) {
+          component.styleUrls = undefined;
+        }
+      });
+    });
+  });
+  componentResourceResolutionQueue.clear();
+  return Promise.all(urlFetches).then(() => null);
+}
+
+const componentResourceResolutionQueue: Set<Component> = new Set();
+
+export function maybeQueueResolutionOfComponentResources(metadata: Component) {
+  if (componentNeedsResolution(metadata)) {
+    componentResourceResolutionQueue.add(metadata);
+  }
+}
+
+export function componentNeedsResolution(component: Component) {
+  return component.templateUrl || component.styleUrls && component.styleUrls.length;
+}
+export function clearResolutionOfComponentResourcesQueue() {
+  componentResourceResolutionQueue.clear();
+}
+
+function unwrapResponse(response: string | {text(): Promise<string>}): string|Promise<string> {
+  return typeof response == 'string' ? response : response.text();
+}
\ No newline at end of file
diff --git a/packages/core/src/metadata/view.ts b/packages/core/src/metadata/view.ts
new file mode 100644
index 000000000000..84efefcd5e0c
--- /dev/null
+++ b/packages/core/src/metadata/view.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
+ */
+
+/**
+ * Defines template and style encapsulation options available for Component's {@link Component}.
+ *
+ * See {@link Component#encapsulation encapsulation}.
+ *
+ */
+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 Component#styles styles} or
+   * {@link Component#styleUrls styleUrls}, and adding the new Host Element attribute to all
+   * selectors.
+   *
+   * This is the default option.
+   */
+  Emulated = 0,
+  /**
+   * @deprecated v6.1.0 - use {ViewEncapsulation.ShadowDom} instead.
+   * Use the native encapsulation mechanism of the renderer.
+   *
+   * For the DOM this means using the deprecated [Shadow DOM
+   * v0](https://w3c.github.io/webcomponents/spec/shadow/) and
+   * creating a ShadowRoot for Component's Host Element.
+   */
+  Native = 1,
+  /**
+   * Don't provide any template or style encapsulation.
+   */
+  None = 2,
+
+  /**
+   * Use Shadow DOM to encapsulate styles.
+   *
+   * For the DOM this means using modern [Shadow
+   * DOM](https://w3c.github.io/webcomponents/spec/shadow/) and
+   * creating a ShadowRoot for Component's Host Element.
+   *
+   * ### Example
+   * {@example core/ts/metadata/encapsulation.ts region='longform'}
+   */
+  ShadowDom = 3
+}
diff --git a/packages/core/src/platform_core_providers.ts b/packages/core/src/platform_core_providers.ts
new file mode 100644
index 000000000000..6fdb4f296136
--- /dev/null
+++ b/packages/core/src/platform_core_providers.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {PlatformRef, createPlatformFactory} from './application_ref';
+import {PLATFORM_ID} from './application_tokens';
+import {Console} from './console';
+import {Injector, StaticProvider} from './di';
+import {TestabilityRegistry} from './testability/testability';
+
+const _CORE_PLATFORM_PROVIDERS: StaticProvider[] = [
+  // Set a default platform name for platforms that don't set it explicitly.
+  {provide: PLATFORM_ID, useValue: 'unknown'},
+  {provide: PlatformRef, deps: [Injector]},
+  {provide: TestabilityRegistry, deps: []},
+  {provide: Console, deps: []},
+];
+
+/**
+ * This platform has to be included in any other platform
+ *
+ * @experimental
+ */
+export const platformCore = createPlatformFactory(null, 'core', _CORE_PLATFORM_PROVIDERS);
diff --git a/packages/core/src/profile/profile.ts b/packages/core/src/profile/profile.ts
new file mode 100644
index 000000000000..d995ddb97caa
--- /dev/null
+++ b/packages/core/src/profile/profile.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 {WtfScopeFn, createScope, detectWTF, endTimeRange, leave, startTimeRange} from './wtf_impl';
+
+export {WtfScopeFn} from './wtf_impl';
+
+
+/**
+ * True if WTF is enabled.
+ */
+export const wtfEnabled = detectWTF();
+
+function noopScope(arg0?: any, arg1?: any): any {
+  return null;
+}
+
+/**
+ * Create trace scope.
+ *
+ * Scopes must be strictly nested and are analogous to stack frames, but
+ * do not have to follow the stack frames. Instead it is recommended that they follow logical
+ * nesting. You may want to use
+ * [Event
+ * Signatures](http://google.github.io/tracing-framework/instrumenting-code.html#custom-events)
+ * as they are defined in WTF.
+ *
+ * Used to mark scope entry. The return value is used to leave the scope.
+ *
+ *     var myScope = wtfCreateScope('MyClass#myMethod(ascii someVal)');
+ *
+ *     someMethod() {
+ *        var s = myScope('Foo'); // 'Foo' gets stored in tracing UI
+ *        // DO SOME WORK HERE
+ *        return wtfLeave(s, 123); // Return value 123
+ *     }
+ *
+ * Note, adding try-finally block around the work to ensure that `wtfLeave` gets called can
+ * negatively impact the performance of your application. For this reason we recommend that
+ * you don't add them to ensure that `wtfLeave` gets called. In production `wtfLeave` is a noop and
+ * so try-finally block has no value. When debugging perf issues, skipping `wtfLeave`, do to
+ * exception, will produce incorrect trace, but presence of exception signifies logic error which
+ * needs to be fixed before the app should be profiled. Add try-finally only when you expect that
+ * an exception is expected during normal execution while profiling.
+ *
+ * @experimental
+ */
+export const wtfCreateScope: (signature: string, flags?: any) => WtfScopeFn =
+    wtfEnabled ? createScope : (signature: string, flags?: any) => noopScope;
+
+/**
+ * Used to mark end of Scope.
+ *
+ * - `scope` to end.
+ * - `returnValue` (optional) to be passed to the WTF.
+ *
+ * Returns the `returnValue for easy chaining.
+ * @experimental
+ */
+export const wtfLeave: <T>(scope: any, returnValue?: T) => T =
+    wtfEnabled ? leave : (s: any, r?: any) => r;
+
+/**
+ * Used to mark Async start. Async are similar to scope but they don't have to be strictly nested.
+ * The return value is used in the call to [endAsync]. Async ranges only work if WTF has been
+ * enabled.
+ *
+ *     someMethod() {
+ *        var s = wtfStartTimeRange('HTTP:GET', 'some.url');
+ *        var future = new Future.delay(5).then((_) {
+ *          wtfEndTimeRange(s);
+ *        });
+ *     }
+ * @experimental
+ */
+export const wtfStartTimeRange: (rangeType: string, action: string) => any =
+    wtfEnabled ? startTimeRange : (rangeType: string, action: string) => null;
+
+/**
+ * Ends a async time range operation.
+ * [range] is the return value from [wtfStartTimeRange] Async ranges only work if WTF has been
+ * enabled.
+ * @experimental
+ */
+export const wtfEndTimeRange: (range: any) => void = wtfEnabled ? endTimeRange : (r: any) => null;
diff --git a/packages/core/src/profile/wtf_impl.ts b/packages/core/src/profile/wtf_impl.ts
new file mode 100644
index 000000000000..02f3485b4b62
--- /dev/null
+++ b/packages/core/src/profile/wtf_impl.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 {global} from '../util';
+
+/**
+ * A scope function for the Web Tracing Framework (WTF).
+ *
+ * @experimental
+ */
+export interface WtfScopeFn { (arg0?: any, arg1?: any): any; }
+
+interface WTF {
+  trace: Trace;
+}
+
+interface Trace {
+  events: Events;
+  leaveScope(scope: Scope, returnValue: any): any /** TODO #9100 */;
+  beginTimeRange(rangeType: string, action: string): Range;
+  endTimeRange(range: Range): any /** TODO #9100 */;
+}
+
+export interface Range {}
+
+interface Events {
+  createScope(signature: string, flags: any): Scope;
+}
+
+export interface Scope { (...args: any[] /** TODO #9100 */): any; }
+
+let trace: Trace;
+let events: Events;
+
+export function detectWTF(): boolean {
+  const wtf: WTF = (global as any /** TODO #9100 */)['wtf'];
+  if (wtf) {
+    trace = wtf['trace'];
+    if (trace) {
+      events = trace['events'];
+      return true;
+    }
+  }
+  return false;
+}
+
+export function createScope(signature: string, flags: any = null): any {
+  return events.createScope(signature, flags);
+}
+
+export function leave<T>(scope: Scope): void;
+export function leave<T>(scope: Scope, returnValue?: T): T;
+export function leave<T>(scope: Scope, returnValue?: any): any {
+  trace.leaveScope(scope, returnValue);
+  return returnValue;
+}
+
+export function startTimeRange(rangeType: string, action: string): Range {
+  return trace.beginTimeRange(rangeType, action);
+}
+
+export function endTimeRange(range: Range): void {
+  trace.endTimeRange(range);
+}
diff --git a/packages/core/src/r3_symbols.ts b/packages/core/src/r3_symbols.ts
new file mode 100644
index 000000000000..4dc848392d84
--- /dev/null
+++ b/packages/core/src/r3_symbols.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
+ */
+
+/*
+ * This file exists to support compilation of @angular/core in Ivy mode.
+ *
+ * When the Angular compiler processes a compilation unit, it normally writes imports to
+ * @angular/core. When compiling the core package itself this strategy isn't usable. Instead, the
+ * compiler writes imports to this file.
+ *
+ * Only a subset of such imports are supported - core is not allowed to declare components or pipes.
+ * A check in ngtsc's translator.ts validates this condition.
+ *
+ * The below symbols are used for @Injectable and @NgModule compilation.
+ */
+
+export {InjectableDef as ɵInjectableDef, InjectorDef as ɵInjectorDef, defineInjectable, defineInjector} from './di/defs';
+export {inject} from './di/injector';
+export {NgModuleDef as ɵNgModuleDef} from './metadata/ng_module';
+export {defineNgModule as ɵdefineNgModule} from './render3/definition';
+export {NgModuleFactory as ɵNgModuleFactory} from './render3/ng_module_ref';
+
+/**
+ * The existence of this constant (in this particular file) informs the Angular compiler that the
+ * current program is actually @angular/core, which needs to be compiled specially.
+ */
+export const ITS_JUST_ANGULAR = true;
diff --git a/packages/core/src/reflection/platform_reflection_capabilities.ts b/packages/core/src/reflection/platform_reflection_capabilities.ts
new file mode 100644
index 000000000000..0fee36852074
--- /dev/null
+++ b/packages/core/src/reflection/platform_reflection_capabilities.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 {Type} from '../type';
+import {GetterFn, MethodFn, SetterFn} from './types';
+
+export interface PlatformReflectionCapabilities {
+  isReflectionEnabled(): boolean;
+  factory(type: Type<any>): Function;
+  hasLifecycleHook(type: any, lcProperty: string): boolean;
+  guards(type: any): {[key: string]: any};
+
+  /**
+   * Return a list of annotations/types for constructor parameters
+   */
+  parameters(type: Type<any>): any[][];
+
+  /**
+   * Return a list of annotations declared on the class
+   */
+  annotations(type: Type<any>): any[];
+
+  /**
+   * Return a object literal which describes the annotations on Class fields/properties.
+   */
+  propMetadata(typeOrFunc: Type<any>): {[key: string]: any[]};
+  getter(name: string): GetterFn;
+  setter(name: string): SetterFn;
+  method(name: string): MethodFn;
+  importUri(type: Type<any>): string;
+  resourceUri(type: Type<any>): string;
+  resolveIdentifier(name: string, moduleUrl: string, members: string[], runtime: any): any;
+  resolveEnum(enumIdentifier: any, name: string): any;
+}
diff --git a/packages/core/src/reflection/reflection.ts b/packages/core/src/reflection/reflection.ts
new file mode 100644
index 000000000000..abbe8727b265
--- /dev/null
+++ b/packages/core/src/reflection/reflection.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {ReflectionCapabilities} from './reflection_capabilities';
+import {Reflector} from './reflector';
+
+export {Reflector} from './reflector';
+
+/**
+ * The {@link Reflector} used internally in Angular to access metadata
+ * about symbols.
+ */
+export const reflector = new Reflector(new ReflectionCapabilities());
diff --git a/packages/core/src/reflection/reflection_capabilities.ts b/packages/core/src/reflection/reflection_capabilities.ts
new file mode 100644
index 000000000000..57e58c2f18e2
--- /dev/null
+++ b/packages/core/src/reflection/reflection_capabilities.ts
@@ -0,0 +1,265 @@
+/**
+ * @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 {Type, isType} from '../type';
+import {global, stringify} from '../util';
+import {ANNOTATIONS, PARAMETERS, PROP_METADATA} from '../util/decorators';
+
+import {PlatformReflectionCapabilities} from './platform_reflection_capabilities';
+import {GetterFn, MethodFn, SetterFn} from './types';
+
+
+/**
+ * Attention: These regex has to hold even if the code is minified!
+ */
+export const DELEGATE_CTOR = /^function\s+\S+\(\)\s*{[\s\S]+\.apply\(this,\s*arguments\)/;
+export const INHERITED_CLASS = /^class\s+[A-Za-z\d$_]*\s*extends\s+[A-Za-z\d$_]+\s*{/;
+export const INHERITED_CLASS_WITH_CTOR =
+    /^class\s+[A-Za-z\d$_]*\s*extends\s+[A-Za-z\d$_]+\s*{[\s\S]*constructor\s*\(/;
+
+export class ReflectionCapabilities implements PlatformReflectionCapabilities {
+  private _reflect: any;
+
+  constructor(reflect?: any) { this._reflect = reflect || global['Reflect']; }
+
+  isReflectionEnabled(): boolean { return true; }
+
+  factory<T>(t: Type<T>): (args: any[]) => T { return (...args: any[]) => new t(...args); }
+
+  /** @internal */
+  _zipTypesAndAnnotations(paramTypes: any[], paramAnnotations: any[]): any[][] {
+    let result: any[][];
+
+    if (typeof paramTypes === 'undefined') {
+      result = new Array(paramAnnotations.length);
+    } else {
+      result = new Array(paramTypes.length);
+    }
+
+    for (let i = 0; i < result.length; i++) {
+      // TS outputs Object for parameters without types, while Traceur omits
+      // the annotations. For now we preserve the Traceur behavior to aid
+      // migration, but this can be revisited.
+      if (typeof paramTypes === 'undefined') {
+        result[i] = [];
+      } else if (paramTypes[i] != Object) {
+        result[i] = [paramTypes[i]];
+      } else {
+        result[i] = [];
+      }
+      if (paramAnnotations && paramAnnotations[i] != null) {
+        result[i] = result[i].concat(paramAnnotations[i]);
+      }
+    }
+    return result;
+  }
+
+  private _ownParameters(type: Type<any>, parentCtor: any): any[][]|null {
+    const typeStr = type.toString();
+    // If we have no decorators, we only have function.length as metadata.
+    // In that case, to detect whether a child class declared an own constructor or not,
+    // we need to look inside of that constructor to check whether it is
+    // just calling the parent.
+    // This also helps to work around for https://github.com/Microsoft/TypeScript/issues/12439
+    // that sets 'design:paramtypes' to []
+    // if a class inherits from another class but has no ctor declared itself.
+    if (DELEGATE_CTOR.exec(typeStr) ||
+        (INHERITED_CLASS.exec(typeStr) && !INHERITED_CLASS_WITH_CTOR.exec(typeStr))) {
+      return null;
+    }
+
+    // Prefer the direct API.
+    if ((<any>type).parameters && (<any>type).parameters !== parentCtor.parameters) {
+      return (<any>type).parameters;
+    }
+
+    // API of tsickle for lowering decorators to properties on the class.
+    const tsickleCtorParams = (<any>type).ctorParameters;
+    if (tsickleCtorParams && tsickleCtorParams !== parentCtor.ctorParameters) {
+      // Newer tsickle uses a function closure
+      // Retain the non-function case for compatibility with older tsickle
+      const ctorParameters =
+          typeof tsickleCtorParams === 'function' ? tsickleCtorParams() : tsickleCtorParams;
+      const paramTypes = ctorParameters.map((ctorParam: any) => ctorParam && ctorParam.type);
+      const paramAnnotations = ctorParameters.map(
+          (ctorParam: any) =>
+              ctorParam && convertTsickleDecoratorIntoMetadata(ctorParam.decorators));
+      return this._zipTypesAndAnnotations(paramTypes, paramAnnotations);
+    }
+
+    // API for metadata created by invoking the decorators.
+    const paramAnnotations = type.hasOwnProperty(PARAMETERS) && (type as any)[PARAMETERS];
+    const paramTypes = this._reflect && this._reflect.getOwnMetadata &&
+        this._reflect.getOwnMetadata('design:paramtypes', type);
+    if (paramTypes || paramAnnotations) {
+      return this._zipTypesAndAnnotations(paramTypes, paramAnnotations);
+    }
+
+    // If a class has no decorators, at least create metadata
+    // based on function.length.
+    // Note: We know that this is a real constructor as we checked
+    // the content of the constructor above.
+    return new Array((<any>type.length)).fill(undefined);
+  }
+
+  parameters(type: Type<any>): any[][] {
+    // Note: only report metadata if we have at least one class decorator
+    // to stay in sync with the static reflector.
+    if (!isType(type)) {
+      return [];
+    }
+    const parentCtor = getParentCtor(type);
+    let parameters = this._ownParameters(type, parentCtor);
+    if (!parameters && parentCtor !== Object) {
+      parameters = this.parameters(parentCtor);
+    }
+    return parameters || [];
+  }
+
+  private _ownAnnotations(typeOrFunc: Type<any>, parentCtor: any): any[]|null {
+    // Prefer the direct API.
+    if ((<any>typeOrFunc).annotations && (<any>typeOrFunc).annotations !== parentCtor.annotations) {
+      let annotations = (<any>typeOrFunc).annotations;
+      if (typeof annotations === 'function' && annotations.annotations) {
+        annotations = annotations.annotations;
+      }
+      return annotations;
+    }
+
+    // API of tsickle for lowering decorators to properties on the class.
+    if ((<any>typeOrFunc).decorators && (<any>typeOrFunc).decorators !== parentCtor.decorators) {
+      return convertTsickleDecoratorIntoMetadata((<any>typeOrFunc).decorators);
+    }
+
+    // API for metadata created by invoking the decorators.
+    if (typeOrFunc.hasOwnProperty(ANNOTATIONS)) {
+      return (typeOrFunc as any)[ANNOTATIONS];
+    }
+    return null;
+  }
+
+  annotations(typeOrFunc: Type<any>): any[] {
+    if (!isType(typeOrFunc)) {
+      return [];
+    }
+    const parentCtor = getParentCtor(typeOrFunc);
+    const ownAnnotations = this._ownAnnotations(typeOrFunc, parentCtor) || [];
+    const parentAnnotations = parentCtor !== Object ? this.annotations(parentCtor) : [];
+    return parentAnnotations.concat(ownAnnotations);
+  }
+
+  private _ownPropMetadata(typeOrFunc: any, parentCtor: any): {[key: string]: any[]}|null {
+    // Prefer the direct API.
+    if ((<any>typeOrFunc).propMetadata &&
+        (<any>typeOrFunc).propMetadata !== parentCtor.propMetadata) {
+      let propMetadata = (<any>typeOrFunc).propMetadata;
+      if (typeof propMetadata === 'function' && propMetadata.propMetadata) {
+        propMetadata = propMetadata.propMetadata;
+      }
+      return propMetadata;
+    }
+
+    // API of tsickle for lowering decorators to properties on the class.
+    if ((<any>typeOrFunc).propDecorators &&
+        (<any>typeOrFunc).propDecorators !== parentCtor.propDecorators) {
+      const propDecorators = (<any>typeOrFunc).propDecorators;
+      const propMetadata = <{[key: string]: any[]}>{};
+      Object.keys(propDecorators).forEach(prop => {
+        propMetadata[prop] = convertTsickleDecoratorIntoMetadata(propDecorators[prop]);
+      });
+      return propMetadata;
+    }
+
+    // API for metadata created by invoking the decorators.
+    if (typeOrFunc.hasOwnProperty(PROP_METADATA)) {
+      return (typeOrFunc as any)[PROP_METADATA];
+    }
+    return null;
+  }
+
+  propMetadata(typeOrFunc: any): {[key: string]: any[]} {
+    if (!isType(typeOrFunc)) {
+      return {};
+    }
+    const parentCtor = getParentCtor(typeOrFunc);
+    const propMetadata: {[key: string]: any[]} = {};
+    if (parentCtor !== Object) {
+      const parentPropMetadata = this.propMetadata(parentCtor);
+      Object.keys(parentPropMetadata).forEach((propName) => {
+        propMetadata[propName] = parentPropMetadata[propName];
+      });
+    }
+    const ownPropMetadata = this._ownPropMetadata(typeOrFunc, parentCtor);
+    if (ownPropMetadata) {
+      Object.keys(ownPropMetadata).forEach((propName) => {
+        const decorators: any[] = [];
+        if (propMetadata.hasOwnProperty(propName)) {
+          decorators.push(...propMetadata[propName]);
+        }
+        decorators.push(...ownPropMetadata[propName]);
+        propMetadata[propName] = decorators;
+      });
+    }
+    return propMetadata;
+  }
+
+  hasLifecycleHook(type: any, lcProperty: string): boolean {
+    return type instanceof Type && lcProperty in type.prototype;
+  }
+
+  guards(type: any): {[key: string]: any} { return {}; }
+
+  getter(name: string): GetterFn { return <GetterFn>new Function('o', 'return o.' + name + ';'); }
+
+  setter(name: string): SetterFn {
+    return <SetterFn>new Function('o', 'v', 'return o.' + name + ' = v;');
+  }
+
+  method(name: string): MethodFn {
+    const functionBody = `if (!o.${name}) throw new Error('"${name}" is undefined');
+        return o.${name}.apply(o, args);`;
+    return <MethodFn>new Function('o', 'args', functionBody);
+  }
+
+  // There is not a concept of import uri in Js, but this is useful in developing Dart applications.
+  importUri(type: any): string {
+    // StaticSymbol
+    if (typeof type === 'object' && type['filePath']) {
+      return type['filePath'];
+    }
+    // Runtime type
+    return `./${stringify(type)}`;
+  }
+
+  resourceUri(type: any): string { return `./${stringify(type)}`; }
+
+  resolveIdentifier(name: string, moduleUrl: string, members: string[], runtime: any): any {
+    return runtime;
+  }
+  resolveEnum(enumIdentifier: any, name: string): any { return enumIdentifier[name]; }
+}
+
+function convertTsickleDecoratorIntoMetadata(decoratorInvocations: any[]): any[] {
+  if (!decoratorInvocations) {
+    return [];
+  }
+  return decoratorInvocations.map(decoratorInvocation => {
+    const decoratorType = decoratorInvocation.type;
+    const annotationCls = decoratorType.annotationCls;
+    const annotationArgs = decoratorInvocation.args ? decoratorInvocation.args : [];
+    return new annotationCls(...annotationArgs);
+  });
+}
+
+function getParentCtor(ctor: Function): Type<any> {
+  const parentProto = ctor.prototype ? Object.getPrototypeOf(ctor.prototype) : null;
+  const parentCtor = parentProto ? parentProto.constructor : null;
+  // Note: We always use `Object` as the null value
+  // to simplify checking later on.
+  return parentCtor || Object;
+}
diff --git a/packages/core/src/reflection/reflector.ts b/packages/core/src/reflection/reflector.ts
new file mode 100644
index 000000000000..678941f44260
--- /dev/null
+++ b/packages/core/src/reflection/reflector.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 {Type} from '../type';
+import {PlatformReflectionCapabilities} from './platform_reflection_capabilities';
+import {GetterFn, MethodFn, SetterFn} from './types';
+
+export {PlatformReflectionCapabilities};
+export {GetterFn, MethodFn, SetterFn};
+
+/**
+ * Provides access to reflection data about symbols. Used internally by Angular
+ * to power dependency injection and compilation.
+ */
+export class Reflector {
+  constructor(public reflectionCapabilities: PlatformReflectionCapabilities) {}
+
+  updateCapabilities(caps: PlatformReflectionCapabilities) { this.reflectionCapabilities = caps; }
+
+  factory(type: Type<any>): Function { return this.reflectionCapabilities.factory(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);
+  }
+
+  getter(name: string): GetterFn { return this.reflectionCapabilities.getter(name); }
+
+  setter(name: string): SetterFn { return this.reflectionCapabilities.setter(name); }
+
+  method(name: string): MethodFn { return this.reflectionCapabilities.method(name); }
+
+  importUri(type: any): string { return this.reflectionCapabilities.importUri(type); }
+
+  resourceUri(type: any): string { return this.reflectionCapabilities.resourceUri(type); }
+
+  resolveIdentifier(name: string, moduleUrl: string, members: string[], runtime: any): any {
+    return this.reflectionCapabilities.resolveIdentifier(name, moduleUrl, members, runtime);
+  }
+
+  resolveEnum(identifier: any, name: string): any {
+    return this.reflectionCapabilities.resolveEnum(identifier, name);
+  }
+}
diff --git a/packages/core/src/reflection/types.ts b/packages/core/src/reflection/types.ts
new file mode 100644
index 000000000000..73297f916402
--- /dev/null
+++ b/packages/core/src/reflection/types.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 type SetterFn = (obj: any, value: any) => void;
+export type GetterFn = (obj: any) => any;
+export type MethodFn = (obj: any, args: any[]) => any;
diff --git a/packages/core/src/render.ts b/packages/core/src/render.ts
new file mode 100644
index 000000000000..9db56a484896
--- /dev/null
+++ b/packages/core/src/render.ts
@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+
+// Public API for render
+export {RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer} from './render/api';
diff --git a/packages/core/src/render/api.ts b/packages/core/src/render/api.ts
new file mode 100644
index 000000000000..ab442b419b0b
--- /dev/null
+++ b/packages/core/src/render/api.ts
@@ -0,0 +1,364 @@
+/**
+ * @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, Injector} from '../di';
+import {ViewEncapsulation} from '../metadata/view';
+
+/**
+ * @deprecated Use `RendererType2` (and `Renderer2`) instead.
+ */
+export class RenderComponentType {
+  constructor(
+      public id: string, public templateUrl: string, public slotCount: number,
+      public encapsulation: ViewEncapsulation, public styles: Array<string|any[]>,
+      public animations: any) {}
+}
+
+/**
+ * @deprecated Debug info is handeled internally in the view engine now.
+ */
+export abstract class RenderDebugInfo {
+  abstract get injector(): Injector;
+  abstract get component(): any;
+  abstract get providerTokens(): any[];
+  abstract get references(): {[key: string]: any};
+  abstract get context(): any;
+  abstract get source(): string;
+}
+
+/**
+ * @deprecated Use the `Renderer2` instead.
+ */
+export interface DirectRenderer {
+  remove(node: any): void;
+  appendChild(node: any, parent: any): void;
+  insertBefore(node: any, refNode: any): void;
+  nextSibling(node: any): any;
+  parentElement(node: any): any;
+}
+
+/**
+ * @deprecated Use the `Renderer2` instead.
+ */
+export abstract class Renderer {
+  abstract selectRootElement(selectorOrNode: string|any, debugInfo?: RenderDebugInfo): any;
+
+  abstract createElement(parentElement: any, name: string, debugInfo?: RenderDebugInfo): any;
+
+  abstract createViewRoot(hostElement: any): any;
+
+  abstract createTemplateAnchor(parentElement: any, debugInfo?: RenderDebugInfo): any;
+
+  abstract createText(parentElement: any, value: string, debugInfo?: RenderDebugInfo): any;
+
+  abstract projectNodes(parentElement: any, nodes: any[]): void;
+
+  abstract attachViewAfter(node: any, viewRootNodes: any[]): void;
+
+  abstract detachView(viewRootNodes: any[]): void;
+
+  abstract destroyView(hostElement: any, viewAllNodes: any[]): void;
+
+  abstract listen(renderElement: any, name: string, callback: Function): Function;
+
+  abstract listenGlobal(target: string, name: string, callback: Function): Function;
+
+  abstract setElementProperty(renderElement: any, propertyName: string, propertyValue: any): void;
+
+  abstract setElementAttribute(renderElement: any, attributeName: string, attributeValue: string):
+      void;
+
+  /**
+   * Used only in debug mode to serialize property changes to dom nodes as attributes.
+   */
+  abstract setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string):
+      void;
+
+  abstract setElementClass(renderElement: any, className: string, isAdd: boolean): void;
+
+  abstract setElementStyle(renderElement: any, styleName: string, styleValue: string): void;
+
+  abstract invokeElementMethod(renderElement: any, methodName: string, args?: any[]): void;
+
+  abstract setText(renderNode: any, text: string): void;
+
+  abstract animate(
+      element: any, startingStyles: any, keyframes: any[], duration: number, delay: number,
+      easing: string, previousPlayers?: any[]): any;
+}
+
+export const Renderer2Interceptor = new InjectionToken<Renderer2[]>('Renderer2Interceptor');
+
+/**
+ * Injectable service that provides a low-level interface for modifying the UI.
+ *
+ * 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 Renderer#setElementProperty setElementProperty} or
+ * {@link Renderer#setElementAttribute setElementAttribute} respectively.
+ *
+ * If you are implementing a custom renderer, you must implement this interface.
+ *
+ * The default Renderer implementation is `DomRenderer`. Also available is `WebWorkerRenderer`.
+ *
+ * @deprecated Use `RendererFactory2` instead.
+ */
+export abstract class RootRenderer {
+  abstract renderComponent(componentType: RenderComponentType): Renderer;
+}
+
+/**
+ * Used by `RendererFactory2` to associate custom rendering data and styles
+ * with a rendering implementation.
+ *  @experimental
+ */
+export interface RendererType2 {
+  /**
+   * A unique identifying string for the new renderer, used when creating
+   * unique styles for encapsulation.
+   */
+  id: string;
+  /**
+   * The view encapsulation type, which determines how styles are applied to
+   * DOM elements. One of
+   * - `Emulated` (default): Emulate native scoping of styles.
+   * - `Native`: Use the native encapsulation mechanism of the renderer.
+   * - `ShadowDom`: Use modern [Shadow
+   * DOM](https://w3c.github.io/webcomponents/spec/shadow/) and
+   * create a ShadowRoot for component's host element.
+   * - `None`: Do not provide any template or style encapsulation.
+   */
+  encapsulation: ViewEncapsulation;
+  /**
+   * Defines CSS styles to be stored on a renderer instance.
+   */
+  styles: (string|any[])[];
+  /**
+   * Defines arbitrary developer-defined data to be stored on a renderer instance.
+   * This is useful for renderers that delegate to other renderers.
+   */
+  data: {[kind: string]: any};
+}
+
+/**
+ * Creates and initializes a custom renderer that implements the `Renderer2` base class.
+ *
+ * @experimental
+ */
+export abstract class RendererFactory2 {
+  /**
+   * Creates and initializes a custom renderer for a host DOM element.
+   * @param hostElement The element to render.
+   * @param type The base class to implement.
+   * @returns The new custom renderer instance.
+   */
+  abstract createRenderer(hostElement: any, type: RendererType2|null): Renderer2;
+  /**
+   * A callback invoked when rendering has begun.
+   */
+  abstract begin?(): void;
+  /**
+   * A callback invoked when rendering has completed.
+   */
+  abstract end?(): void;
+  /**
+   * Use with animations test-only mode. Notifies the test when rendering has completed.
+   * @returns The asynchronous result of the developer-defined function.
+   */
+  abstract whenRenderingDone?(): Promise<any>;
+}
+
+/**
+ * Flags for renderer-specific style modifiers.
+ * @experimental
+ */
+export enum RendererStyleFlags2 {
+  /**
+   * Marks a style as important.
+   */
+  Important = 1 << 0,
+  /**
+   * Marks a style as using dash case naming (this-is-dash-case).
+   */
+  DashCase = 1 << 1
+}
+
+/**
+ * Extend this base class to implement custom rendering. By default, Angular
+ * renders a template into DOM. You can use custom rendering to intercept
+ * rendering calls, or to render to something other than DOM.
+ *
+ * Create your custom renderer using `RendererFactory2`.
+ *
+ * Use a custom renderer 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 the `setProperty()` or
+ * `setAttribute()` method.
+ *
+ * @experimental
+ */
+export abstract class Renderer2 {
+  /**
+   * Use to store arbitrary developer-defined data on a renderer instance,
+   * as an object containing key-value pairs.
+   * This is useful for renderers that delegate to other renderers.
+   */
+  abstract get data(): {[key: string]: any};
+
+  /**
+   * Implement this callback to destroy the renderer or the host element.
+   */
+  abstract destroy(): void;
+  /**
+   * Implement this callback to create an instance of the host element.
+   * @param name An identifying name for the new element, unique within the namespace.
+   * @param namespace The namespace for the new element.
+   * @returns The new element.
+   */
+  abstract createElement(name: string, namespace?: string|null): any;
+  /**
+   * Implement this callback to add a comment to the DOM of the host element.
+   * @param value The comment text.
+   * @returns The modified element.
+   */
+  abstract createComment(value: string): any;
+
+  /**
+   * Implement this callback to add text to the DOM of the host element.
+   * @param value The text string.
+   * @returns The modified element.
+   */
+  abstract createText(value: string): any;
+  /**
+   * If null or undefined, the view engine won't call it.
+   * This is used as a performance optimization for production mode.
+   */
+  // TODO(issue/24571): remove '!'.
+  destroyNode !: ((node: any) => void) | null;
+  /**
+   * Appends a child to a given parent node in the host element DOM.
+   * @param parent The parent node.
+   * @param newChild The new child node.
+   */
+  abstract appendChild(parent: any, newChild: any): void;
+  /**
+   * Implement this callback to insert a child node at a given position in a parent node
+   * in the host element DOM.
+   * @param parent The parent node.
+   * @param newChild The new child nodes.
+   * @param refChild The existing child node that should precede the new node.
+   */
+  abstract insertBefore(parent: any, newChild: any, refChild: any): void;
+  /**
+   * Implement this callback to remove a child node from the host element's DOM.
+   * @param parent The parent node.
+   * @param oldChild The child node to remove.
+   */
+  abstract removeChild(parent: any, oldChild: any): void;
+  /**
+   * Implement this callback to prepare an element to be bootstrapped
+   * as a root element, and return the element instance.
+   * @param selectorOrNode The DOM element.
+   * @returns The root element.
+   */
+  abstract selectRootElement(selectorOrNode: string|any): any;
+  /**
+   * Implement this callback to get the parent of a given node
+   * in the host element's DOM.
+   * @param node The child node to query.
+   * @returns The parent node, or null if there is no parent.
+   * For WebWorkers, always returns true.
+   * This is because the check is synchronous,
+   * and the caller can't rely on checking for null.
+   */
+  abstract parentNode(node: any): any;
+  /**
+   * Implement this callback to get the next sibling node of a given node
+   * in the host element's DOM.
+   * @returns The sibling node, or null if there is no sibling.
+   * For WebWorkers, always returns a value.
+   * This is because the check is synchronous,
+   * and the caller can't rely on checking for null.
+   */
+  abstract nextSibling(node: any): any;
+  /**
+   * Implement this callback to set an attribute value for an element in the DOM.
+   * @param el The element.
+   * @param name The attribute name.
+   * @param value The new value.
+   * @param namespace The namespace.
+   */
+  abstract setAttribute(el: any, name: string, value: string, namespace?: string|null): void;
+
+  /**
+   * Implement this callback to remove an attribute from an element in the DOM.
+   * @param el The element.
+   * @param name The attribute name.
+   * @param namespace The namespace.
+   */
+  abstract removeAttribute(el: any, name: string, namespace?: string|null): void;
+  /**
+   * Implement this callback to add a class to an element in the DOM.
+   * @param el The element.
+   * @param name The class name.
+   */
+  abstract addClass(el: any, name: string): void;
+
+  /**
+   * Implement this callback to remove a class from an element in the DOM.
+   * @param el The element.
+   * @param name The class name.
+   */
+  abstract removeClass(el: any, name: string): void;
+
+  /**
+   * Implement this callback to set a CSS style for an element in the DOM.
+   * @param el The element.
+   * @param style The name of the style.
+   * @param value The new value.
+   * @param flags Flags for style variations. No flags are set by default.
+   */
+  abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void;
+
+  /**
+   * Implement this callback to remove the value from a CSS style for an element in the DOM.
+   * @param el The element.
+   * @param style The name of the style.
+   * @param flags Flags for style variations to remove, if set. ???
+   */
+  abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void;
+
+  /**
+   * Implement this callback to set the value of a property of an element in the DOM.
+   * @param el The element.
+   * @param name The property name.
+   * @param value The new value.
+   */
+  abstract setProperty(el: any, name: string, value: any): void;
+
+  /**
+   * Implement this callback to set the value of a node in the host element.
+   * @param node The node.
+   * @param value The new value.
+   */
+  abstract setValue(node: any, value: string): void;
+
+  /**
+   * Implement this callback to start an event listener.
+   * @param target The context in which to listen for events. Can be
+   * the entire window or document, the body of the document, or a specific
+   * DOM element.
+   * @param eventName The event to listen for.
+   * @param callback A handler function to invoke when the event occurs.
+   * @returns An "unlisten" function for disposing of this handler.
+   */
+  abstract listen(
+      target: 'window'|'document'|'body'|any, eventName: string,
+      callback: (event: any) => boolean | void): () => void;
+}
diff --git a/packages/core/src/render3/PERF_NOTES.md b/packages/core/src/render3/PERF_NOTES.md
new file mode 100644
index 000000000000..9a75641e0034
--- /dev/null
+++ b/packages/core/src/render3/PERF_NOTES.md
@@ -0,0 +1,73 @@
+
+## General Notes
+
+Each Array costs 70 bytes and is composed of `Array` and `(array)` object
+  * `Array` javascript visible object: 32 bytes
+  * `(array)` VM object where the array is actually stored in: 38 bytes
+
+Each Object cost is 24 bytes plus 8 bytes per property.
+
+For small arrays, it is more efficient to store the data as a linked list
+of items rather than small arrays. However, the array access is faster as
+shown here: https://jsperf.com/small-arrays-vs-linked-objects
+
+## Monomorphic vs Megamorphic code
+
+Great reads:
+- [What's up with monomorphism?](http://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html)
+- [Impact of polymorphism on component-based frameworks like React](http://benediktmeurer.de/2018/03/23/impact-of-polymorphism-on-component-based-frameworks-like-react/)
+
+1) Monomorphic prop access is 100 times faster than megamorphic.
+2) Monomorphic call is 4 times faster the megamorphic call.
+
+ See benchmark [here](https://jsperf.com/mono-vs-megamorphic-property-access).
+
+## Exporting top level variables
+
+Exporting top level variables should be avoided where possible where performance
+and code size matters:
+
+```
+// Typescript
+export let exported = 0;
+let notExported = 0;
+
+notExported = exported;
+
+// Would be compiled to
+exports.exported = 0;
+var notExported = 0;
+
+notExported = exports.exported;
+```
+
+Most minifiers do not rename properties (closure is an exception here).
+
+What could be done instead is:
+
+```
+let exported = 0;
+
+export function getExported() { return exported; }
+export function setExported(v) { exported = v; }
+```
+
+Also writing to a property of `exports` might change its hidden class resulting in megamorphic access.
+
+## Iterating over Keys of an Object.
+
+https://jsperf.com/object-keys-vs-for-in-with-closure/3 implies that `Object.keys` is the fastest way of iterating
+over properties of an object.
+
+```
+for (var i = 0, keys = Object.keys(obj); i < keys.length; i++) {
+  const key = keys[i];
+}
+```
+
+## Recursive functions
+Avoid recursive functions when possible because they cannot be inlined.
+
+## Loops
+Don't use foreach, it can cause megamorphic function calls (depending on the browser) and function allocations.
+It is [a lot slower than regular `for` loops](https://jsperf.com/for-vs-foreach-misko)
diff --git a/packages/core/src/render3/STATUS.md b/packages/core/src/render3/STATUS.md
new file mode 100644
index 000000000000..f3d15503314a
--- /dev/null
+++ b/packages/core/src/render3/STATUS.md
@@ -0,0 +1,287 @@
+# Overview
+
+Ivy is a new backwards-compatible Angular renderer focused on further speed improvements, size reduction, and increased flexibility.
+
+Ivy is currently not feature complete, but can be tested via [`enableIvy: true`](https://next.angular.io/guide/aot-compiler#enableivy) [`angularCompilerOptions` flag](https://next.angular.io/guide/aot-compiler#angular-compiler-options).
+
+We currently expect Ivy to remain behind the flag until it's feature complete and battle tested at Google. In the meantime you can check out this [Hello World demo](https://ng-ivy-demo.firebaseapp.com/).
+
+# Implementation Status
+
+The work can be divided into three categories:
+- `@angular/compiler-cli`: TypeScript transformer pipeline which includes two command line tools:
+  - `ngtsc`: (Angular TypeScript Compiler) Angular compiler which strips out `@Component` (and friends) and replaces it with `defineComponent` (and friends).
+  - `ngcc`: (Angular Compatibility Compiler) NPM upgrade compiler which reads the `.STORING_METADATA_IN_D.TS.json` files and `.js` files and adds `defineComponent` (and friends) into the `node_module`. This in effect converts a pre-ivy module into ivy module.
+- `@angular/compiler`: Ivy Compiler which converts decorator into ivy
+- `@angular/core`: Decorators which can be patched with `@angular/compiler`.
+
+
+## `@angular/compiler-cli` changes
+### `ngtsc` TSC compiler transformer
+
+TSC transformer which removes and converts `@Pipe`, `@Component`, `@Directive` and `@NgModule`
+to the corresponding `definePipe`, `defineComponent`, `defineDirective` and `defineInjector`.
+
+- ❌ Basic setup of the transformer into `tsc`
+- ❌ Can read STORING_METADATA_IN_D.TS from `.d.ts` (see: [STORING_METADATA_IN_D.TS.md](./STORING_METADATA_IN_D.TS.md))
+- ❌ Detect decorators and convert them to the `defineXXX` method using the `__Compiler` in `@angular/compiler`.
+  - ❌ `@Pipe` => `definePipe`
+  - ❌ `@Component` => `defineComponent`
+  - ❌ `@Directive` => `defineDirective`
+  - ❌ `@NgModule` => `defineInjector`
+- ❌ Encode selectors into `.d.ts` file.
+  - ❌ `@Pipe` => see [STORING_METADATA_IN_D.TS.md](./STORING_METADATA_IN_D.TS.md)
+  - ❌ `@Component` => see [STORING_METADATA_IN_D.TS.md](./STORING_METADATA_IN_D.TS.md)
+  - ❌ `@Directive` => see [STORING_METADATA_IN_D.TS.md](./STORING_METADATA_IN_D.TS.md)
+  - ❌ `@NgModule` => see [STORING_METADATA_IN_D.TS.md](./STORING_METADATA_IN_D.TS.md)
+- ❌ support `extends` for `@Pipe`, `@Component`, `@Directive` and `@NgModule`.
+- ❌ Documentation
+
+### `ngcc` Angular `node_module` compatibility compiler
+
+A tool which "upgrades" `node_module` compiled with non-ivy `ngc` into ivy compliant format.
+
+- ❌ Basic setup of stand alone executable
+- ❌ Integration with WebPack (cli)
+- ❌ Rewrite existing code by interpreting the associated STORING_METADATA_IN_D.TS
+  - ❌ `PipeCompiler`: `@Pipe` => `definePipe`
+  - ❌ `DirectiveCompiler`: `@Directive` => `defineDirective`
+  - ❌ `NgModuleCompiler`: `@NgModule` => `defineInjector`
+  - ❌ `ComponentCompiler`: `@Component` => `defineComponent`
+    - ❌ `TemplateCompiler`
+    - ❌ `StyleCompiler`
+- ❌ Documentation
+
+## `@angular/compiler` changes
+
+- ❌ Component compilation: Translates `@Component` => `defineComponent`
+  - ❌ `TemplateCompiler` (current known as `ViewCompiler`)
+  - ❌ `StyleCompiler`
+- ❌ `PipeCompiler`: Translates `@Pipe` => `definePipe`
+- ❌ `DirectiveCompiler`: Translates `@Directive` => `defineDirective`
+- ❌ `InjectableCompiler`: Translates `@Injectable` => `defineInjectable`
+- ❌ `NgModuleCompiler`: Translates `@NgModule` => `defineInjector` (and `defineNgModule` only in jit)
+- ❌ Documentation
+
+
+## `@angular/core` changes
+
+The goal is for the `@Component` (and friends) to be the compiler of template. Since decorators are functions which execute during parsing of the `.js` file, the decorator can compile the template into Ivy. The AoT compiler's job is to remove the `@Component` and replace it with call to `defineComponent`.
+
+- ❌ Remove `createDecorator` (and friends) since we no longer support other modes.
+- ❌ `@angular/compiler` can patch itself onto:
+  - ❌ `@Injectable`
+  - ❌ `@NgModule`
+  - ❌ `@Pipe`
+  - ❌ `@Directive`
+  - ❌ `@Component`
+- ❌ `ResourceLoader.resolved: Promise<>` Returns true if all `templateUrl`s and `styleUrl` have been resolved and application is ready to be bootstrapped.
+
+# Testing / Debugging
+- ❌ in debug mode publish components into DOM nodes for easier debugging.
+
+# Crosscutting
+
+## Decorators
+| Annotation          | `defineXXX()`                  | Run time | Spec     | Compiler | Back Patch |
+| -------------------- | ------------------------------ | ------- | -------- | -------- | -------- |
+| `@Component`         | ✅ `defineComponent()`         |    ✅    |  ✅      |  ✅      |  ❌      |
+| `@Directive`         | ✅ `defineDirective()`         |    ✅    |  ✅      |  ✅      |  ❌      |
+| `@Directive`         | ❌ `defineAbstractDirective()` |    ❌    |  ❌      |  ❌      |  ❌      |
+| `@Pipe`              | ✅ `definePipe()`              |    ✅    |  ✅      |  ✅      |  ❌      |
+| `@Injectable`        | ✅ `defineInjectable()`        |    ✅    |  ❌      |  ❌      |  ❌      |
+| `@NgModule`          | ✅ `defineInjector()`          |    ✅    |  ❌      |  ❌      |  ❌      |
+| `@ConfigureInjector` | ❌ `defineInjector()`          |    ❌    |  ❌      |  ❌      |  ❌      |
+
+
+
+## Component Composition
+| Feature                                  | Runtime | Spec     | Compiler |
+| ---------------------------------------- | ------- | -------- | -------- |
+| creation reordering based on injection   |   ❌    |    ❌    |    ✅    |
+| `class CompA extends CompB {}`           |   ❌    |    ❌    |    ❌    |
+| `class CompA extends CompB { @Input }`   |   ❌    |    ❌    |    ❌    |
+| `class CompA extends CompB { @Output }`  |   ❌    |    ❌    |    ❌    |
+
+
+
+## Change Detection
+| Feature                             | Runtime |
+| ----------------------------------- | ------- |
+| `markDirty()`                       |  ✅     |
+| `detectChanges()`                   |  ✅     |
+| `tick()`                            |  ✅     |
+| `attach()`                          |  ✅     |
+| `detach()`                          |  ✅     |
+| `ON_PUSH`                           |  ✅     |
+| `ALWAYS`                            |  ✅     |
+| `DIRTY`                             |  ✅     |
+| `ATTACHED`                          |  ✅     |
+
+
+
+## Bootstrap API
+| Feature                             | Runtime |
+| ----------------------------------- | ------- |
+| `renderComponent()`                 |  ✅     |
+| `getHostElement()`                  |  ✅     |
+| `createInjector()`                  |  ✅     |
+
+## Template Compiler
+
+### Template Syntax
+| Feature                                     | Runtime | Spec     | Compiler |
+| ------------------------------------------- | ------- | -------- | -------- |
+| `<div>`                                     |  ✅     |  ✅      |  ✅      |
+| `<div>{{exp}}</div>`                        |  ✅     |  ✅      |  ✅      |
+| `<div attr=value>`                          |  ✅     |  ✅      |  ✅      |
+| `<div (click)="stmt">`                      |  ✅     |  ✅      |  ✅      |
+| `<div #foo>`                                |  ✅     |  ✅      |  ✅      |
+| `<div #foo="bar">`                          |  ✅     |  ✅      |  ✅      |
+| `<div [value]="exp">`                       |  ✅     |  ✅      |  ✅      |
+| `<div title="Hello {{name}}!">`             |  ✅     |  ✅      |  ✅      |
+| `<div [attr.value]="exp">`                  |  ✅     |  ✅      |  ❌      |
+| `<div class="literal">`                     |  ✅     |  ✅      |  ✅      |
+| `<div [class]="exp">`                       |  ✅     |  ✅      |  ✅      |
+| `<div [class.foo]="exp">`                   |  ✅     |  ✅      |  ✅      |
+| `<div style="literal">`                     |  ✅     |  ✅      |  ✅      |
+| `<div [style]="exp">`                       |  ✅     |  ✅      |  ✅      |
+| `<div [style.foo]="exp">`                   |  ✅     |  ✅      |  ✅      |
+| `<div xmlns:foo="url" foo:bar="baz">` <br/>Compiler still needs to be updated to process templates with namespaced attributes. ([see #24386](https://github.com/angular/angular/pull/24386))       |  ✅     |  ✅      |  ❌      |
+| `{{ ['literal', exp ] }}`                   |  ✅     |  ✅      |  ✅      |
+| `{{ { a: 'literal', b: exp } }}`            |  ✅     |  ✅      |  ✅      |
+| `{{ exp \| pipe: arg }}`                    |  ✅     |  ✅      |  ✅      |
+| `<svg:g svg:p>`                             |  ✅     |  ✅      |  ✅      |
+| `<img src=[userData]>` sanitization         |  ❌     |  ❌      |  ❌      |
+| `<div (nocd.click)>`                        |  ❌     |  ❌      |  ❌      |
+| `<div (bubble.click)>`                      |  ❌     |  ❌      |  ❌      |
+| `<div (keyup.enter)>`                       |  ❌     |  ❌      |  ❌      |
+| `<div (hammer.js)>`                         |  ❌     |  ❌      |  ❌      |
+| [`<div (directiveOut)>`][gh23560]           |  ✅     |  ❌      |  ❌      |
+| [`<ng-template (directiveOut)>`][gh23561]   |  ❌     |  ❌      |  ❌      |
+| [`<ng-container>`][gh24381]                 |  ❌     |  ❌      |  ❌      |
+
+[gh23560]: https://github.com/angular/angular/issues/23560
+[gh23561]: https://github.com/angular/angular/issues/23561
+[gh24381]: https://github.com/angular/angular/pull/24381
+
+### Life Cycle Hooks
+| Feature                   | Runtime | Spec     | Compiler |
+| ------------------------- | ------- | -------- | -------- |
+| `onChanges()`             |    ✅   |  ✅      |  ✅      |
+| `onDestroy()`             |    ✅   |  ✅      |  ✅      |
+| `onInit()`                |    ✅   |  ✅      |  ✅      |
+| `onChanges()`             |    ✅   |  ✅      |  ✅      |
+| `doCheck()`               |    ✅   |  ✅      |  ✅      |
+| `afterViewChecked()`      |    ✅   |  ✅      |  ✅      |
+| `afterViewInit()`         |    ✅   |  ✅      |  ✅      |
+| `afterContentChecked()`   |    ✅   |  ✅      |  ✅      |
+| `afterContentInit()`      |    ✅   |  ✅      |  ✅      |
+| listener teardown         |    ✅   |  ✅      |  ✅      |
+
+
+
+### `@Query`
+| Feature                         | Runtime | Spec     | Compiler |
+| ------------------------------- | ------- | -------- | -------- |
+| `@Query(descendants)`           |  ✅     |  ✅      |  n/a      |
+| `@Query(one)`                   |  ✅     |  ✅      |  n/a      |
+| `@Query(read)`                  |  ✅     |  ✅      |  n/a      |
+| `@Query(selector)`              |  ✅     |  ✅      |  n/a      |
+| `@Query(Type)`                  |  ✅     |  ✅      |  n/a      |
+| `@ContentChildren`              |  ✅     |  ✅      |  ❌       |
+| `@ContentChild`                 |  ✅     |  ✅      |  ✅       |
+| `@ViewChildren`                 |  ✅     |  ✅      |  ❌       |
+| `@ViewChild`                    |  ✅     |  ✅      |  ❌       |
+
+
+
+### Content Projection
+| Feature                         | Runtime | Spec     | Compiler |
+| ------------------------------- | ------- | -------- | -------- |
+| `<ng-content>`                  |  ✅     |  ✅      |  ✅      |
+| `<ng-content selector="...">`   |  ✅     |  ✅      |  ✅      |
+| container `projectAs`           |  ✅     |  ✅      |  ❌      |
+
+
+
+### Injection Features
+| Feature                             | Runtime | Spec     | Compiler |
+| ----------------------------------- | ------- | -------- | -------- |
+| `inject(Type)`                      |  ✅     |  ✅      |  ✅      |
+| `directiveInject(Type)`             |  ✅     |  ✅      |  ❌      |
+| `inject(Type, SkipSelf)`            |  ❌     |  ❌      |  ❌      |
+| `attribute('name')`                 |  ✅     |  ✅      |  ❌      |
+| `injectChangeDetectionRef()`        |  ✅     |  ✅      |  ❌      |
+| `injectElementRef()`                |  ✅     |  ✅      |  ✅      |
+| `injectViewContainerRef()`          |  ✅     |  ✅      |  ✅      |
+| `injectTemplateRef()`               |  ✅     |  ✅      |  ✅      |
+| default `inject()` with no injector |  ❌     |  ❌      |  ❌      |
+| sanitization with no injector       |  ✅     |  ✅      |  ❌      |
+
+
+### I18N
+| Feature                             | Runtime | Spec     | Compiler |
+| ----------------------------------- | ------- | -------- | -------- |
+| translate text literals             |  ✅     |  ✅      |  ✅      |
+| rearrange text nodes                |  ❌     |  ❌      |  ❌      |
+| ICU                                 |  ❌     |  ❌      |  ❌      |
+
+
+### View Encapsulation
+| Feature                             | Runtime | Spec     | Compiler |
+| ----------------------------------- | ------- | -------- | -------- |
+| Renderer3.None                        |  ✅     |  ✅       |  ✅      |
+| Renderer2.None                        |  ✅     |  ✅       |  ✅      |
+| Renderer2.Emulated                    |  ❌     |  ❌       |  ❌      |
+| Renderer2.Native                      |  ❌     |  ❌       |  ❌      |
+
+
+
+### `______Ref`s
+| Method                 | View Container Ref | Template Ref | Embeded View Ref | View Ref | Element Ref | Change Detection Ref |
+| ---------------------- | ------------------ | ------------ | ---------------- | -------- | ----------- | -------------------- |
+| `clear()`              |  ✅                | n/a          | n/a              | n/a      | n/a         | n/a                  |
+| `get()`                |  ✅                | n/a          | n/a              | n/a      | n/a         | n/a                  |
+| `createEmbededView()`  |  ✅                | ✅           | n/a              | n/a      | n/a         | n/a                  |
+| `createComponent()`    |  ✅                | n/a          | n/a              | n/a      | n/a         | n/a                  |
+| `insert()`             |  ✅                | n/a          | n/a              | n/a      | n/a         | n/a                  |
+| `move()`               |  ✅                | n/a          | n/a              | n/a      | n/a         | n/a                  |
+| `indexOf()`            |  ✅                | n/a          | n/a              | n/a      | n/a         | n/a                  |
+| `length()`             |  ✅                | n/a          | n/a              | n/a      | n/a         | n/a                  |
+| `remove()`             |  ✅                | n/a          | n/a              | n/a      | n/a         | n/a                  |
+| `destroy()`            | n/a                | n/a          |  ✅              | ✅       | n/a         | n/a                  |
+| `destroyed`            | n/a                | n/a          |  ✅              | ✅       | n/a         | n/a                  |
+| `onDestroy()`          | n/a                | n/a          |  ✅              | ✅       | n/a         | n/a                  |
+| `markForCheck()`       | n/a                | n/a          |  ✅              | ✅       | n/a         | ✅                   |
+| `detach()`             |  ✅                | n/a          |  ✅              | ✅       | n/a         | ✅                   |
+| `detachChanges()`      | n/a                | n/a          |  ✅              | ✅       | n/a         | ✅                   |
+| `checkNoChanges()`     | n/a                | n/a          |  ✅              | ✅       | n/a         | ✅                   |
+| `reattach()`           | n/a                | n/a          |  ✅              | ✅       | n/a         | ✅                   |
+| `nativeElement()`      | n/a                | n/a          | n/a              | n/a     |  ✅         | n/a                  |
+| `elementRef`           | n/a                | ✅           | n/a              | n/a      |  n/a        | n/a                  |
+
+### Renderer2
+| Method                              | Runtime |
+| ----------------------------------- | ------- |
+| `data()`                            |  n/a    |
+| `destroy()`                         |  ✅     |
+| `createElement()`                   |  ✅     |
+| `createComment()`                   |  ✅    |
+| `createText()`                      |  ✅     |
+| `destroyNode()`                     |  ✅     |
+| `appendChild()`                     |  ✅     |
+| `insertBefore()`                    |  ✅     |
+| `removeChild()`                     |  ✅     |
+| `selectRootElement()`               |  ✅     |
+| `parentNode()`                      |  n/a    |
+| `nextSibling()`                     |  n/a    |
+| `setAttribute()`                    |  ✅     |
+| `removeAttribute()`                 |  ✅     |
+| `addClass()`                        |  ✅     |
+| `removeClass()`                     |  ✅     |
+| `setStyle()`                        |  ✅     |
+| `removeStyle()`                     |  ✅     |
+| `setProperty()`                     |  ✅     |
+| `setValue()`                        |  ✅     |
+| `listen()`                          |  ✅     |
diff --git a/packages/core/src/render3/TREE_SHAKING.md b/packages/core/src/render3/TREE_SHAKING.md
new file mode 100644
index 000000000000..f4bca2a32e9e
--- /dev/null
+++ b/packages/core/src/render3/TREE_SHAKING.md
@@ -0,0 +1,73 @@
+# Tree Shaking Principles
+
+When designing code please keep these principles in mind
+
+## Enums for features are not-tree-shakable
+
+Here is an example of code which is not tree shakable.
+
+```
+export function query<T>(
+    predicate: Type<any>| string[], descend?: boolean,
+    read?: QueryReadType | Type<T>): QueryList<T> {
+  ngDevMode && assertPreviousIsParent();
+  const queryList = new QueryList<T>();
+  const query = currentQuery || (currentQuery = new LQuery_());
+  query.track(queryList, predicate, descend, read);
+  return queryList;
+}
+```
+
+Notice that `query()` takes the `QueryReadType` as enumeration. 
+
+```
+function readFromNodeInjector(
+    nodeInjector: LInjector, node: LNode, read: QueryReadType | Type<any>): any {
+  if (read === QueryReadType.ElementRef) {
+    return getOrCreateElementRef(nodeInjector);
+  } 
+  if (read === QueryReadType.ViewContainerRef) {
+    return getOrCreateContainerRef(nodeInjector);
+  }
+  if (read === QueryReadType.TemplateRef) {
+    return getOrCreateTemplateRef(nodeInjector);
+  } 
+  const matchingIdx = geIdxOfMatchingDirective(node, read);
+  if (matchingIdx !== null) {
+    return node.view.data[matchingIdx];
+  }
+  return null;
+}
+```
+
+Sometimes later in the above code the `readFromNodeInjector` takes the `QueryReadType` enumeration and performs specific behavior.
+
+The issue is that once the `query` instruction is pulled in it will pull in `ElementRef`, `ContainerRef`, and `TemplateRef` regardless if the `query` instruction queries for them.
+
+A better way to do this is to encapsulate the work into an object or function which will then be passed into the `query` instead of the enumeration. 
+
+```
+function queryElementRefFeature() {...}
+function queryContainerRefFeature() {...}
+function queryTemplateRefFeature() {...}
+
+query(predicate, descend, queryElementRefFeature) {...}
+```
+
+this would allow the `readFromNodeInjector` to simply call the `read` function (or object) like so.
+
+```
+function readFromNodeInjector(
+    nodeInjector: LInjector, node: LNode, readFn: (injector: Injector) => any) | Type<any>): any {
+  if (isFeature(readFn)) {
+    return readFn(nodeInjector);
+  } 
+  const matchingIdx = geIdxOfMatchingDirective(node, readFn);
+  if (matchingIdx !== null) {
+    return node.view.data[matchingIdx];
+  }
+  return null;
+}
+```
+
+This approach allows us to preserve the tree-shaking. In essence the if statement has moved from runtime (non-tree-shakable) to compile time (tree-shakable) position.
\ No newline at end of file
diff --git a/packages/core/src/render3/assert.ts b/packages/core/src/render3/assert.ts
new file mode 100644
index 000000000000..dc3d97311d64
--- /dev/null
+++ b/packages/core/src/render3/assert.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
+ */
+
+// The functions in this file verify that the assumptions we are making
+// about state in an instruction are correct before implementing any logic.
+// They are meant only to be called in dev mode as sanity checks.
+
+export function assertNumber(actual: any, msg: string) {
+  if (typeof actual != 'number') {
+    throwError(msg);
+  }
+}
+
+export function assertEqual<T>(actual: T, expected: T, msg: string) {
+  if (actual != expected) {
+    throwError(msg);
+  }
+}
+
+export function assertNotEqual<T>(actual: T, expected: T, msg: string) {
+  if (actual == expected) {
+    throwError(msg);
+  }
+}
+
+export function assertSame<T>(actual: T, expected: T, msg: string) {
+  if (actual !== expected) {
+    throwError(msg);
+  }
+}
+
+export function assertLessThan<T>(actual: T, expected: T, msg: string) {
+  if (actual >= expected) {
+    throwError(msg);
+  }
+}
+
+export function assertGreaterThan<T>(actual: T, expected: T, msg: string) {
+  if (actual <= expected) {
+    throwError(msg);
+  }
+}
+
+export function assertNotDefined<T>(actual: T, msg: string) {
+  if (actual != null) {
+    throwError(msg);
+  }
+}
+
+export function assertDefined<T>(actual: T, msg: string) {
+  if (actual == null) {
+    throwError(msg);
+  }
+}
+
+export function assertComponentType(
+    actual: any,
+    msg: string =
+        'Type passed in is not ComponentType, it does not have \'ngComponentDef\' property.') {
+  if (!actual.ngComponentDef) {
+    debugger;
+    throwError(msg);
+  }
+}
+
+function throwError(msg: string): never {
+  debugger;  // Left intentionally for better debugger experience.
+  throw new Error(`ASSERTION ERROR: ${msg}`);
+}
diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts
new file mode 100644
index 000000000000..13fbb9d9fae1
--- /dev/null
+++ b/packages/core/src/render3/component.ts
@@ -0,0 +1,229 @@
+/**
+ * @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
+ */
+
+// We are temporarily importing the existing viewEngine from core so we can be sure we are
+// correctly implementing its interfaces for backwards compatibility.
+import {Type} from '../core';
+import {Injector} from '../di/injector';
+import {Sanitizer} from '../sanitization/security';
+
+import {assertComponentType, assertDefined} from './assert';
+import {queueInitHooks, queueLifecycleHooks} from './hooks';
+import {CLEAN_PROMISE, ROOT_DIRECTIVE_INDICES, _getComponentHostLElementNode, baseDirectiveCreate, createLViewData, createTView, detectChangesInternal, enterView, executeInitAndContentHooks, getRootView, hostElement, initChangeDetectorIfExisting, leaveView, locateHostElement, setHostBindings,} from './instructions';
+import {ComponentDef, ComponentDefInternal, ComponentType} from './interfaces/definition';
+import {LElementNode} from './interfaces/node';
+import {RElement, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
+import {LViewData, LViewFlags, RootContext, INJECTOR, CONTEXT, TVIEW} from './interfaces/view';
+import {stringify} from './util';
+
+
+/** Options that control how the component should be bootstrapped. */
+export interface CreateComponentOptions {
+  /** Which renderer factory to use. */
+  rendererFactory?: RendererFactory3;
+
+  /** A custom sanitizer instance */
+  sanitizer?: Sanitizer;
+
+  /**
+   * Host element on which the component will be bootstrapped. If not specified,
+   * the component definition's `tag` is used to query the existing DOM for the
+   * element to bootstrap.
+   */
+  host?: RElement|string;
+
+  /** Module injector for the component. If unspecified, the injector will be NULL_INJECTOR. */
+  injector?: Injector;
+
+  /**
+   * List of features to be applied to the created component. Features are simply
+   * functions that decorate a component with a certain behavior.
+   *
+   * Typically, the features in this list are features that cannot be added to the
+   * other features list in the component definition because they rely on other factors.
+   *
+   * Example: `RootLifecycleHooks` is a function that adds lifecycle hook capabilities
+   * to root components in a tree-shakable way. It cannot be added to the component
+   * features list because there's no way of knowing when the component will be used as
+   * a root component.
+   */
+  hostFeatures?: (<T>(component: T, componentDef: ComponentDef<T, string>) => void)[];
+
+  /**
+   * A function which is used to schedule change detection work in the future.
+   *
+   * When marking components as dirty, it is necessary to schedule the work of
+   * change detection in the future. This is done to coalesce multiple
+   * {@link markDirty} calls into a single changed detection processing.
+   *
+   * The default value of the scheduler is the `requestAnimationFrame` function.
+   *
+   * It is also useful to override this function for testing purposes.
+   */
+  scheduler?: (work: () => void) => void;
+}
+
+// TODO: A hack to not pull in the NullInjector from @angular/core.
+export const NULL_INJECTOR: Injector = {
+  get: (token: any, notFoundValue?: any) => {
+    throw new Error('NullInjector: Not found: ' + stringify(token));
+  }
+};
+
+/**
+ * Bootstraps a Component into an existing host element and returns an instance
+ * of the component.
+ *
+ * Use this function to bootstrap a component into the DOM tree. Each invocation
+ * of this function will create a separate tree of components, injectors and
+ * change detection cycles and lifetimes. To dynamically insert a new component
+ * into an existing tree such that it shares the same injection, change detection
+ * and object lifetime, use {@link ViewContainer#createComponent}.
+ *
+ * @param componentType Component to bootstrap
+ * @param options Optional parameters which control bootstrapping
+ */
+export function renderComponent<T>(
+    componentType: ComponentType<T>|
+        Type<T>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */
+    ,
+    opts: CreateComponentOptions = {}): T {
+  ngDevMode && assertComponentType(componentType);
+  const rendererFactory = opts.rendererFactory || domRendererFactory3;
+  const sanitizer = opts.sanitizer || null;
+  const componentDef =
+      (componentType as ComponentType<T>).ngComponentDef as ComponentDefInternal<T>;
+  if (componentDef.type != componentType) componentDef.type = componentType;
+
+  // The first index of the first selector is the tag name.
+  const componentTag = componentDef.selectors ![0] ![0] as string;
+  const hostNode = locateHostElement(rendererFactory, opts.host || componentTag);
+  const rootContext = createRootContext(opts.scheduler || requestAnimationFrame.bind(window));
+
+  const rootView: LViewData = createLViewData(
+      rendererFactory.createRenderer(hostNode, componentDef),
+      createTView(-1, null, null, null, null), rootContext,
+      componentDef.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways);
+  rootView[INJECTOR] = opts.injector || null;
+
+  const oldView = enterView(rootView, null !);
+  let elementNode: LElementNode;
+  let component: T;
+  try {
+    if (rendererFactory.begin) rendererFactory.begin();
+
+    // Create element node at index 0 in data array
+    elementNode = hostElement(componentTag, hostNode, componentDef, sanitizer);
+
+    // Create directive instance with factory() and store at index 0 in directives array
+    component = baseDirectiveCreate(0, componentDef.factory() as T, componentDef);
+    rootContext.components.push(component);
+    (elementNode.data as LViewData)[CONTEXT] = component;
+    initChangeDetectorIfExisting(elementNode.nodeInjector, component, elementNode.data !);
+
+    opts.hostFeatures && opts.hostFeatures.forEach((feature) => feature(component, componentDef));
+
+    executeInitAndContentHooks();
+    setHostBindings(ROOT_DIRECTIVE_INDICES);
+    detectChangesInternal(elementNode.data as LViewData, elementNode, component);
+  } finally {
+    leaveView(oldView);
+    if (rendererFactory.end) rendererFactory.end();
+  }
+
+  return component;
+}
+
+export function createRootContext(scheduler: (workFn: () => void) => void): RootContext {
+  return {
+    components: [],
+    scheduler: scheduler,
+    clean: CLEAN_PROMISE,
+  };
+}
+
+/**
+ * Used to enable lifecycle hooks on the root component.
+ *
+ * Include this feature when calling `renderComponent` if the root component
+ * you are rendering has lifecycle hooks defined. Otherwise, the hooks won't
+ * be called properly.
+ *
+ * Example:
+ *
+ * ```
+ * renderComponent(AppComponent, {features: [RootLifecycleHooks]});
+ * ```
+ */
+export function LifecycleHooksFeature(component: any, def: ComponentDefInternal<any>): void {
+  const elementNode = _getComponentHostLElementNode(component);
+
+  // Root component is always created at dir index 0
+  const tView = elementNode.view[TVIEW];
+  queueInitHooks(0, def.onInit, def.doCheck, tView);
+  queueLifecycleHooks(elementNode.tNode.flags, tView);
+}
+
+/**
+ * Retrieve the root context for any component by walking the parent `LView` until
+ * reaching the root `LView`.
+ *
+ * @param component any component
+ */
+function getRootContext(component: any): RootContext {
+  const rootContext = getRootView(component)[CONTEXT] as RootContext;
+  ngDevMode && assertDefined(rootContext, 'rootContext');
+  return rootContext;
+}
+
+/**
+ * Retrieve the host element of the component.
+ *
+ * Use this function to retrieve the host element of the component. The host
+ * element is the element which the component is associated with.
+ *
+ * @param component Component for which the host element should be retrieved.
+ */
+export function getHostElement<T>(component: T): HTMLElement {
+  return _getComponentHostLElementNode(component).native as any;
+}
+
+/**
+ * Retrieves the rendered text for a given component.
+ *
+ * This function retrieves the host element of a component and
+ * and then returns the `textContent` for that element. This implies
+ * that the text returned will include re-projected content of
+ * the component as well.
+ *
+ * @param component The component to return the content text for.
+ */
+export function getRenderedText(component: any): string {
+  const hostElement = getHostElement(component);
+  return hostElement.textContent || '';
+}
+
+/**
+ * Wait on component until it is rendered.
+ *
+ * This function returns a `Promise` which is resolved when the component's
+ * change detection is executed. This is determined by finding the scheduler
+ * associated with the `component`'s render tree and waiting until the scheduler
+ * flushes. If nothing is scheduled, the function returns a resolved promise.
+ *
+ * Example:
+ * ```
+ * await whenRendered(myComponent);
+ * ```
+ *
+ * @param component Component to wait upon
+ * @returns Promise which resolves when the component is rendered.
+ */
+export function whenRendered(component: any): Promise<null> {
+  return getRootContext(component).clean;
+}
diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts
new file mode 100644
index 000000000000..4b6a52ee603f
--- /dev/null
+++ b/packages/core/src/render3/component_ref.ts
@@ -0,0 +1,228 @@
+/**
+ * @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 {ChangeDetectorRef as ViewEngine_ChangeDetectorRef} from '../change_detection/change_detector_ref';
+import {InjectionToken} from '../di/injection_token';
+import {Injector, inject} from '../di/injector';
+import {ComponentFactory as viewEngine_ComponentFactory, ComponentRef as viewEngine_ComponentRef} from '../linker/component_factory';
+import {ComponentFactoryResolver as viewEngine_ComponentFactoryResolver} from '../linker/component_factory_resolver';
+import {ElementRef as viewEngine_ElementRef} from '../linker/element_ref';
+import {NgModuleRef as viewEngine_NgModuleRef} from '../linker/ng_module_factory';
+import {RendererFactory2} from '../render/api';
+import {Type} from '../type';
+
+import {assertComponentType, assertDefined} from './assert';
+import {LifecycleHooksFeature, createRootContext} from './component';
+import {baseDirectiveCreate, createLNode, createLViewData, createTView, elementCreate, enterView, hostElement, initChangeDetectorIfExisting, locateHostElement, renderEmbeddedTemplate} from './instructions';
+import {ComponentDefInternal, ComponentType, RenderFlags} from './interfaces/definition';
+import {LElementNode, TNode, TNodeType} from './interfaces/node';
+import {RElement, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
+import {CONTEXT, FLAGS, INJECTOR, LViewData, LViewFlags, RootContext, TVIEW} from './interfaces/view';
+import {RootViewRef, ViewRef} from './view_ref';
+
+export class ComponentFactoryResolver extends viewEngine_ComponentFactoryResolver {
+  resolveComponentFactory<T>(component: Type<T>): viewEngine_ComponentFactory<T> {
+    ngDevMode && assertComponentType(component);
+    const componentDef = (component as ComponentType<T>).ngComponentDef;
+    return new ComponentFactory(componentDef);
+  }
+}
+
+function toRefArray(map: {[key: string]: string}): {propName: string; templateName: string;}[] {
+  const array: {propName: string; templateName: string;}[] = [];
+  for (let nonMinified in map) {
+    if (map.hasOwnProperty(nonMinified)) {
+      const minified = map[nonMinified];
+      array.push({propName: minified, templateName: nonMinified});
+    }
+  }
+  return array;
+}
+
+/**
+ * Default {@link RootContext} for all components rendered with {@link renderComponent}.
+ */
+export const ROOT_CONTEXT = new InjectionToken<RootContext>(
+    'ROOT_CONTEXT_TOKEN',
+    {providedIn: 'root', factory: () => createRootContext(inject(SCHEDULER))});
+
+/**
+ * A change detection scheduler token for {@link RootContext}. This token is the default value used
+ * for the default `RootContext` found in the {@link ROOT_CONTEXT} token.
+ */
+export const SCHEDULER = new InjectionToken<((fn: () => void) => void)>('SCHEDULER_TOKEN', {
+  providedIn: 'root',
+  factory: () => {
+    const useRaf = typeof requestAnimationFrame !== 'undefined' && typeof window !== 'undefined';
+    return useRaf ? requestAnimationFrame.bind(window) : setTimeout;
+  },
+});
+
+/**
+ * A function used to wrap the `RendererFactory2`.
+ * Used in tests to change the `RendererFactory2` into a `DebugRendererFactory2`.
+ */
+export const WRAP_RENDERER_FACTORY2 =
+    new InjectionToken<(rf: RendererFactory2) => RendererFactory2>('WRAP_RENDERER_FACTORY2');
+
+/**
+ * Render3 implementation of {@link viewEngine_ComponentFactory}.
+ */
+export class ComponentFactory<T> extends viewEngine_ComponentFactory<T> {
+  selector: string;
+  componentType: Type<any>;
+  ngContentSelectors: string[];
+
+  get inputs(): {propName: string; templateName: string;}[] {
+    return toRefArray(this.componentDef.inputs);
+  }
+
+  get outputs(): {propName: string; templateName: string;}[] {
+    return toRefArray(this.componentDef.outputs);
+  }
+
+  constructor(private componentDef: ComponentDefInternal<any>) {
+    super();
+    this.componentType = componentDef.type;
+    this.selector = componentDef.selectors[0][0] as string;
+    this.ngContentSelectors = [];
+  }
+
+  create(
+      injector: Injector, projectableNodes?: any[][]|undefined, rootSelectorOrNode?: any,
+      ngModule?: viewEngine_NgModuleRef<any>|undefined): viewEngine_ComponentRef<T> {
+    const isInternalRootView = rootSelectorOrNode === undefined;
+
+    let rendererFactory: RendererFactory3;
+
+    if (ngModule) {
+      const wrapper = ngModule.injector.get(WRAP_RENDERER_FACTORY2, (v: RendererFactory2) => v);
+      rendererFactory = wrapper(ngModule.injector.get(RendererFactory2)) as RendererFactory3;
+    } else {
+      rendererFactory = domRendererFactory3;
+    }
+
+    const hostNode = isInternalRootView ?
+        elementCreate(this.selector, rendererFactory.createRenderer(null, this.componentDef)) :
+        locateHostElement(rendererFactory, rootSelectorOrNode);
+
+    // The first index of the first selector is the tag name.
+    const componentTag = this.componentDef.selectors ![0] ![0] as string;
+
+    const rootContext: RootContext = ngModule && !isInternalRootView ?
+        ngModule.injector.get(ROOT_CONTEXT) :
+        createRootContext(requestAnimationFrame.bind(window));
+
+    // Create the root view. Uses empty TView and ContentTemplate.
+    const rootView: LViewData = createLViewData(
+        rendererFactory.createRenderer(hostNode, this.componentDef),
+        createTView(-1, null, null, null, null), rootContext,
+        this.componentDef.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways);
+    rootView[INJECTOR] = ngModule && ngModule.injector || null;
+
+    // rootView is the parent when bootstrapping
+    const oldView = enterView(rootView, null !);
+
+    let component: T;
+    let elementNode: LElementNode;
+    try {
+      if (rendererFactory.begin) rendererFactory.begin();
+
+      // Create element node at index 0 in data array
+      elementNode = hostElement(componentTag, hostNode, this.componentDef);
+
+      // Create directive instance with factory() and store at index 0 in directives array
+      component = baseDirectiveCreate(0, this.componentDef.factory(), this.componentDef);
+      rootContext.components.push(component);
+      initChangeDetectorIfExisting(elementNode.nodeInjector, component, elementNode.data !);
+      (elementNode.data as LViewData)[CONTEXT] = component;
+      // TODO: should LifecycleHooksFeature and other host features be generated by the compiler and
+      // executed here?
+      // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
+      LifecycleHooksFeature(component, this.componentDef);
+
+      // Transform the arrays of native nodes into a LNode structure that can be consumed by the
+      // projection instruction. This is needed to support the reprojection of these nodes.
+      if (projectableNodes) {
+        let index = 0;
+        const projection: TNode[] = elementNode.tNode.projection = [];
+        for (let i = 0; i < projectableNodes.length; i++) {
+          const nodeList = projectableNodes[i];
+          let firstTNode: TNode|null = null;
+          let previousTNode: TNode|null = null;
+          for (let j = 0; j < nodeList.length; j++) {
+            const lNode =
+                createLNode(++index, TNodeType.Element, nodeList[j] as RElement, null, null);
+            if (previousTNode) {
+              previousTNode.next = lNode.tNode;
+            } else {
+              firstTNode = lNode.tNode;
+            }
+            previousTNode = lNode.tNode;
+          }
+          projection.push(firstTNode !);
+        }
+      }
+
+      // Execute the template in creation mode only, and then turn off the CreationMode flag
+      renderEmbeddedTemplate(elementNode, elementNode.data ![TVIEW], component, RenderFlags.Create);
+      elementNode.data ![FLAGS] &= ~LViewFlags.CreationMode;
+    } finally {
+      enterView(oldView, null);
+      if (rendererFactory.end) rendererFactory.end();
+    }
+
+    const componentRef =
+        new ComponentRef(this.componentType, component, rootView, injector, hostNode !);
+    if (isInternalRootView) {
+      // The host element of the internal root view is attached to the component's host view node
+      componentRef.hostView._lViewNode !.tNode.child = elementNode.tNode;
+    }
+    return componentRef;
+  }
+}
+
+/**
+ * Represents an instance of a Component created via a {@link ComponentFactory}.
+ *
+ * `ComponentRef` provides access to the Component Instance as well other objects related to this
+ * Component Instance and allows you to destroy the Component Instance via the {@link #destroy}
+ * method.
+ *
+ */
+export class ComponentRef<T> extends viewEngine_ComponentRef<T> {
+  destroyCbs: (() => void)[]|null = [];
+  location: viewEngine_ElementRef<any>;
+  injector: Injector;
+  instance: T;
+  hostView: ViewRef<T>;
+  changeDetectorRef: ViewEngine_ChangeDetectorRef;
+  componentType: Type<T>;
+
+  constructor(
+      componentType: Type<T>, instance: T, rootView: LViewData, injector: Injector,
+      hostNode: RElement) {
+    super();
+    this.instance = instance;
+    this.hostView = this.changeDetectorRef = new RootViewRef<T>(rootView);
+    this.hostView._lViewNode = createLNode(-1, TNodeType.View, null, null, null, rootView);
+    this.injector = injector;
+    this.location = new viewEngine_ElementRef(hostNode);
+    this.componentType = componentType;
+  }
+
+  destroy(): void {
+    ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
+    this.destroyCbs !.forEach(fn => fn());
+    this.destroyCbs = null;
+  }
+  onDestroy(callback: () => void): void {
+    ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
+    this.destroyCbs !.push(callback);
+  }
+}
\ No newline at end of file
diff --git a/packages/core/src/render3/debug.ts b/packages/core/src/render3/debug.ts
new file mode 100644
index 000000000000..aa0a29f10ba2
--- /dev/null
+++ b/packages/core/src/render3/debug.ts
@@ -0,0 +1,115 @@
+/**
+ * @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 {Renderer2, RendererType2} from '../render/api';
+import {DebugContext} from '../view';
+import {DebugRenderer2, DebugRendererFactory2} from '../view/services';
+
+import * as di from './di';
+import {NG_HOST_SYMBOL, _getViewData} from './instructions';
+import {LElementNode} from './interfaces/node';
+import {CONTEXT, DIRECTIVES, LViewData, TVIEW} from './interfaces/view';
+
+/**
+ * Adapts the DebugRendererFactory2 to create a DebugRenderer2 specific for IVY.
+ *
+ * The created DebugRenderer know how to create a Debug Context specific to IVY.
+ */
+export class Render3DebugRendererFactory2 extends DebugRendererFactory2 {
+  createRenderer(element: any, renderData: RendererType2|null): Renderer2 {
+    const renderer = super.createRenderer(element, renderData) as DebugRenderer2;
+    renderer.debugContextFactory = () => new Render3DebugContext(_getViewData());
+    return renderer;
+  }
+}
+
+/**
+ * Stores context information about view nodes.
+ *
+ * Used in tests to retrieve information those nodes.
+ */
+class Render3DebugContext implements DebugContext {
+  readonly nodeIndex: number|null;
+
+  constructor(private viewData: LViewData) {
+    // The LNode will be created next and appended to viewData
+    this.nodeIndex = viewData ? viewData.length : null;
+  }
+
+  get view(): any { return this.viewData; }
+
+  get injector(): Injector {
+    if (this.nodeIndex !== null) {
+      const lElementNode: LElementNode = this.view[this.nodeIndex];
+      const nodeInjector = lElementNode.nodeInjector;
+
+      if (nodeInjector) {
+        return new di.NodeInjector(nodeInjector);
+      }
+    }
+    return Injector.NULL;
+  }
+
+  get component(): any {
+    // TODO(vicb): why/when
+    if (this.nodeIndex === null) {
+      return null;
+    }
+
+    const tView = this.view[TVIEW];
+    const components: number[]|null = tView.components;
+
+    return (components && components.indexOf(this.nodeIndex) == -1) ?
+        null :
+        this.view[this.nodeIndex].data[CONTEXT];
+  }
+
+  // TODO(vicb): add view providers when supported
+  get providerTokens(): any[] {
+    const matchedDirectives: any[] = [];
+
+    // TODO(vicb): why/when
+    if (this.nodeIndex === null) {
+      return matchedDirectives;
+    }
+
+    const directives = this.view[DIRECTIVES];
+
+    if (directives) {
+      const currentNode = this.view[this.nodeIndex];
+      for (let dirIndex = 0; dirIndex < directives.length; dirIndex++) {
+        const directive = directives[dirIndex];
+        if (directive[NG_HOST_SYMBOL] === currentNode) {
+          matchedDirectives.push(directive.constructor);
+        }
+      }
+    }
+    return matchedDirectives;
+  }
+
+  get references(): {[key: string]: any} {
+    // TODO(vicb): implement retrieving references
+    throw new Error('Not implemented yet in ivy');
+  }
+
+  get context(): any {
+    if (this.nodeIndex === null) {
+      return null;
+    }
+    const lNode = this.view[this.nodeIndex];
+    return lNode.view[CONTEXT];
+  }
+
+  get componentRenderElement(): any { throw new Error('Not implemented in ivy'); }
+
+  get renderNode(): any { throw new Error('Not implemented in ivy'); }
+
+  // TODO(vicb): check previous implementation
+  logError(console: Console, ...values: any[]): void { console.error(...values); }
+}
\ No newline at end of file
diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts
new file mode 100644
index 000000000000..373b05bbb6bd
--- /dev/null
+++ b/packages/core/src/render3/definition.ts
@@ -0,0 +1,615 @@
+/**
+ * @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 './ng_dev_mode';
+
+import {ChangeDetectionStrategy} from '../change_detection/constants';
+import {Provider, ViewEncapsulation} from '../core';
+import {NgModuleDef, NgModuleDefInternal} from '../metadata/ng_module';
+import {Type} from '../type';
+
+import {BaseDef, ComponentDefFeature, ComponentDefInternal, ComponentQuery, ComponentTemplate, ComponentType, DirectiveDefFeature, DirectiveDefInternal, DirectiveType, DirectiveTypesOrFactory, PipeDefInternal, PipeType, PipeTypesOrFactory} from './interfaces/definition';
+import {CssSelectorList, SelectorFlags} from './interfaces/projection';
+
+const EMPTY: {} = {};
+const EMPTY_ARRAY: any[] = [];
+if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+  Object.freeze(EMPTY);
+  Object.freeze(EMPTY_ARRAY);
+}
+let _renderCompCount = 0;
+
+/**
+ * Create a component definition object.
+ *
+ *
+ * # Example
+ * ```
+ * class MyDirective {
+ *   // Generated by Angular Template Compiler
+ *   // [Symbol] syntax will not be supported by TypeScript until v2.7
+ *   static ngComponentDef = defineComponent({
+ *     ...
+ *   });
+ * }
+ * ```
+ */
+export function defineComponent<T>(componentDefinition: {
+  /**
+   * Directive type, needed to configure the injector.
+   */
+  type: Type<T>;
+
+  /** The selectors that will be used to match nodes to this component. */
+  selectors: CssSelectorList;
+
+  /**
+   * Factory method used to create an instance of directive.
+   */
+  factory: () => T;
+
+  /**
+   * Static attributes to set on host element.
+   *
+   * Even indices: attribute name
+   * Odd indices: attribute value
+   */
+  attributes?: string[];
+
+  /**
+   * A map of input names.
+   *
+   * The format is in: `{[actualPropertyName: string]:(string|[string, string])}`.
+   *
+   * Given:
+   * ```
+   * class MyComponent {
+   *   @Input()
+   *   publicInput1: string;
+   *
+   *   @Input('publicInput2')
+   *   declaredInput2: string;
+   * }
+   * ```
+   *
+   * is described as:
+   * ```
+   * {
+   *   publicInput1: 'publicInput1',
+   *   declaredInput2: ['declaredInput2', 'publicInput2'],
+   * }
+   * ```
+   *
+   * Which the minifier may translate to:
+   * ```
+   * {
+   *   minifiedPublicInput1: 'publicInput1',
+   *   minifiedDeclaredInput2: [ 'publicInput2', 'declaredInput2'],
+   * }
+   * ```
+   *
+   * This allows the render to re-construct the minified, public, and declared names
+   * of properties.
+   *
+   * NOTE:
+   *  - Because declared and public name are usually same we only generate the array
+   *    `['declared', 'public']` format when they differ.
+   *  - The reason why this API and `outputs` API is not the same is that `NgOnChanges` has
+   *    inconsistent behavior in that it uses declared names rather than minified or public. For
+   *    this reason `NgOnChanges` will be deprecated and removed in future version and this
+   *    API will be simplified to be consistent with `output`.
+   */
+  inputs?: {[P in keyof T]?: string | [string, string]};
+
+  /**
+   * A map of output names.
+   *
+   * The format is in: `{[actualPropertyName: string]:string}`.
+   *
+   * Which the minifier may translate to: `{[minifiedPropertyName: string]:string}`.
+   *
+   * This allows the render to re-construct the minified and non-minified names
+   * of properties.
+   */
+  outputs?: {[P in keyof T]?: string};
+
+  /**
+   * Function executed by the parent template to allow child directive to apply host bindings.
+   */
+  hostBindings?: (directiveIndex: number, elementIndex: number) => void;
+
+  /**
+   * Function to create instances of content queries associated with a given directive.
+   */
+  contentQueries?: (() => void);
+
+  /** Refreshes content queries associated with directives in a given view */
+  contentQueriesRefresh?: ((directiveIndex: number, queryIndex: number) => void);
+
+  /**
+   * Defines the name that can be used in the template to assign this directive to a variable.
+   *
+   * See: {@link Directive.exportAs}
+   */
+  exportAs?: string;
+
+  /**
+   * Template function use for rendering DOM.
+   *
+   * This function has following structure.
+   *
+   * ```
+   * function Template<T>(ctx:T, creationMode: boolean) {
+   *   if (creationMode) {
+   *     // Contains creation mode instructions.
+   *   }
+   *   // Contains binding update instructions
+   * }
+   * ```
+   *
+   * Common instructions are:
+   * Creation mode instructions:
+   *  - `elementStart`, `elementEnd`
+   *  - `text`
+   *  - `container`
+   *  - `listener`
+   *
+   * Binding update instructions:
+   * - `bind`
+   * - `elementAttribute`
+   * - `elementProperty`
+   * - `elementClass`
+   * - `elementStyle`
+   *
+   */
+  template: ComponentTemplate<T>;
+
+  /**
+   * Additional set of instructions specific to view query processing. This could be seen as a
+   * set of instruction to be inserted into the template function.
+   *
+   * Query-related instructions need to be pulled out to a specific function as a timing of
+   * execution is different as compared to all other instructions (after change detection hooks but
+   * before view hooks).
+   */
+  viewQuery?: ComponentQuery<T>| null;
+
+  /**
+   * A list of optional features to apply.
+   *
+   * See: {@link NgOnChangesFeature}, {@link PublicFeature}
+   */
+  features?: ComponentDefFeature[];
+
+  /**
+   * Defines template and style encapsulation options available for Component's {@link Component}.
+   */
+  encapsulation?: ViewEncapsulation;
+
+  /**
+   * Defines arbitrary developer-defined data to be stored on a renderer instance.
+   * This is useful for renderers that delegate to other renderers.
+   *
+   * see: animation
+   */
+  data?: {[kind: string]: any};
+
+  /**
+   * A set of styles that the component needs to be present for component to render correctly.
+   */
+  styles?: string[];
+
+  /**
+   * The strategy that the default change detector uses to detect changes.
+   * When set, takes effect the next time change detection is triggered.
+   */
+  changeDetection?: ChangeDetectionStrategy;
+
+  /**
+   * Defines the set of injectable objects that are visible to a Directive and its light DOM
+   * children.
+   */
+  providers?: Provider[];
+
+  /**
+   * Defines the set of injectable objects that are visible to its view DOM children.
+   */
+  viewProviders?: Provider[];
+
+  /**
+   * Registry of directives and components that may be found in this component's view.
+   *
+   * The property is either an array of `DirectiveDef`s or a function which returns the array of
+   * `DirectiveDef`s. The function is necessary to be able to support forward declarations.
+   */
+  directives?: DirectiveTypesOrFactory | null;
+
+  /**
+   * Registry of pipes that may be found in this component's view.
+   *
+   * The property is either an array of `PipeDefs`s or a function which returns the array of
+   * `PipeDefs`s. The function is necessary to be able to support forward declarations.
+   */
+  pipes?: PipeTypesOrFactory | null;
+}): never {
+  const type = componentDefinition.type;
+  const pipeTypes = componentDefinition.pipes !;
+  const directiveTypes = componentDefinition.directives !;
+  const declaredInputs: {[key: string]: string} = {} as any;
+  const encapsulation = componentDefinition.encapsulation;
+  const def: ComponentDefInternal<any> = {
+    type: type,
+    diPublic: null,
+    factory: componentDefinition.factory,
+    template: componentDefinition.template || null !,
+    hostBindings: componentDefinition.hostBindings || null,
+    contentQueries: componentDefinition.contentQueries || null,
+    contentQueriesRefresh: componentDefinition.contentQueriesRefresh || null,
+    attributes: componentDefinition.attributes || null,
+    inputs: invertObject(componentDefinition.inputs, declaredInputs),
+    declaredInputs: declaredInputs,
+    outputs: invertObject(componentDefinition.outputs),
+    exportAs: componentDefinition.exportAs || null,
+    onInit: type.prototype.ngOnInit || null,
+    doCheck: type.prototype.ngDoCheck || null,
+    afterContentInit: type.prototype.ngAfterContentInit || null,
+    afterContentChecked: type.prototype.ngAfterContentChecked || null,
+    afterViewInit: type.prototype.ngAfterViewInit || null,
+    afterViewChecked: type.prototype.ngAfterViewChecked || null,
+    onDestroy: type.prototype.ngOnDestroy || null,
+    onPush: componentDefinition.changeDetection === ChangeDetectionStrategy.OnPush,
+    directiveDefs: directiveTypes ?
+        () => (typeof directiveTypes === 'function' ? directiveTypes() : directiveTypes)
+                  .map(extractDirectiveDef) :
+        null,
+    pipeDefs: pipeTypes ?
+        () => (typeof pipeTypes === 'function' ? pipeTypes() : pipeTypes).map(extractPipeDef) :
+        null,
+    selectors: componentDefinition.selectors,
+    viewQuery: componentDefinition.viewQuery || null,
+    features: componentDefinition.features || null,
+    data: componentDefinition.data || EMPTY,
+    // TODO(misko): convert ViewEncapsulation into const enum so that it can be used directly in the
+    // next line. Also `None` should be 0 not 2.
+    encapsulation: encapsulation == null ? 2 /* ViewEncapsulation.None */ : encapsulation,
+    id: `c${_renderCompCount++}`,
+    styles: EMPTY_ARRAY,
+  };
+  const feature = componentDefinition.features;
+  feature && feature.forEach((fn) => fn(def));
+  return def as never;
+}
+
+export function extractDirectiveDef(type: DirectiveType<any>& ComponentType<any>):
+    DirectiveDefInternal<any>|ComponentDefInternal<any> {
+  const def = type.ngComponentDef || type.ngDirectiveDef;
+  if (ngDevMode && !def) {
+    throw new Error(`'${type.name}' is neither 'ComponentType' or 'DirectiveType'.`);
+  }
+  return def;
+}
+
+export function extractPipeDef(type: PipeType<any>): PipeDefInternal<any> {
+  const def = type.ngPipeDef;
+  if (ngDevMode && !def) {
+    throw new Error(`'${type.name}' is not a 'PipeType'.`);
+  }
+  return def;
+}
+
+export function defineNgModule<T>(def: {type: T} & Partial<NgModuleDef<T, any, any, any>>): never {
+  const res: NgModuleDefInternal<T> = {
+    type: def.type,
+    bootstrap: def.bootstrap || EMPTY_ARRAY,
+    declarations: def.declarations || EMPTY_ARRAY,
+    imports: def.imports || EMPTY_ARRAY,
+    exports: def.exports || EMPTY_ARRAY,
+    transitiveCompileScopes: null,
+  };
+  return res as never;
+}
+
+/**
+ * Inverts an inputs or outputs lookup such that the keys, which were the
+ * minified keys, are part of the values, and the values are parsed so that
+ * the publicName of the property is the new key
+ *
+ * e.g. for
+ *
+ * ```
+ * class Comp {
+ *   @Input()
+ *   propName1: string;
+ *
+ *   @Input('publicName')
+ *   propName2: number;
+ * }
+ * ```
+ *
+ * will be serialized as
+ *
+ * ```
+ * {
+ *   a0: 'propName1',
+ *   b1: ['publicName', 'propName2'],
+ * }
+ * ```
+ *
+ * becomes
+ *
+ * ```
+ * {
+ *  'propName1': 'a0',
+ *  'publicName': 'b1'
+ * }
+ * ```
+ *
+ * Optionally the function can take `secondary` which will result in:
+ *
+ * ```
+ * {
+ *  'propName1': 'a0',
+ *  'propName2': 'b1'
+ * }
+ * ```
+ *
+
+ */
+function invertObject(obj: any, secondary?: any): any {
+  if (obj == null) return EMPTY;
+  const newLookup: any = {};
+  for (const minifiedKey in obj) {
+    if (obj.hasOwnProperty(minifiedKey)) {
+      let publicName = obj[minifiedKey];
+      let declaredName = publicName;
+      if (Array.isArray(publicName)) {
+        declaredName = publicName[1];
+        publicName = publicName[0];
+      }
+      newLookup[publicName] = minifiedKey;
+      if (secondary) {
+        (secondary[declaredName] = minifiedKey);
+      }
+    }
+  }
+  return newLookup;
+}
+
+/**
+ * Create a base definition
+ *
+ * # Example
+ * ```
+ * class ShouldBeInherited {
+ *   static ngBaseDef = defineBase({
+ *      ...
+ *   })
+ * }
+ * @param baseDefinition The base definition parameters
+ */
+export function defineBase<T>(baseDefinition: {
+  /**
+   * A map of input names.
+   *
+   * The format is in: `{[actualPropertyName: string]:(string|[string, string])}`.
+   *
+   * Given:
+   * ```
+   * class MyComponent {
+   *   @Input()
+   *   publicInput1: string;
+   *
+   *   @Input('publicInput2')
+   *   declaredInput2: string;
+   * }
+   * ```
+   *
+   * is described as:
+   * ```
+   * {
+   *   publicInput1: 'publicInput1',
+   *   declaredInput2: ['declaredInput2', 'publicInput2'],
+   * }
+   * ```
+   *
+   * Which the minifier may translate to:
+   * ```
+   * {
+   *   minifiedPublicInput1: 'publicInput1',
+   *   minifiedDeclaredInput2: [ 'declaredInput2', 'publicInput2'],
+   * }
+   * ```
+   *
+   * This allows the render to re-construct the minified, public, and declared names
+   * of properties.
+   *
+   * NOTE:
+   *  - Because declared and public name are usually same we only generate the array
+   *    `['declared', 'public']` format when they differ.
+   *  - The reason why this API and `outputs` API is not the same is that `NgOnChanges` has
+   *    inconsistent behavior in that it uses declared names rather than minified or public. For
+   *    this reason `NgOnChanges` will be deprecated and removed in future version and this
+   *    API will be simplified to be consistent with `outputs`.
+   */
+  inputs?: {[P in keyof T]?: string | [string, string]};
+
+  /**
+   * A map of output names.
+   *
+   * The format is in: `{[actualPropertyName: string]:string}`.
+   *
+   * Which the minifier may translate to: `{[minifiedPropertyName: string]:string}`.
+   *
+   * This allows the render to re-construct the minified and non-minified names
+   * of properties.
+   */
+  outputs?: {[P in keyof T]?: string};
+}): BaseDef<T> {
+  const declaredInputs: {[P in keyof T]: P} = {} as any;
+  return {
+    inputs: invertObject(baseDefinition.inputs, declaredInputs),
+    declaredInputs: declaredInputs,
+    outputs: invertObject(baseDefinition.outputs),
+  };
+}
+
+/**
+ * Create a directive definition object.
+ *
+ * # Example
+ * ```
+ * class MyDirective {
+ *   // Generated by Angular Template Compiler
+ *   // [Symbol] syntax will not be supported by TypeScript until v2.7
+ *   static ngDirectiveDef = defineDirective({
+ *     ...
+ *   });
+ * }
+ * ```
+ */
+export const defineDirective = defineComponent as any as<T>(directiveDefinition: {
+  /**
+   * Directive type, needed to configure the injector.
+   */
+  type: Type<T>;
+
+  /** The selectors that will be used to match nodes to this directive. */
+  selectors: CssSelectorList;
+
+  /**
+   * Factory method used to create an instance of directive.
+   */
+  factory: () => T | ({0: T} & any[]); /* trying to say T | [T, ...any] */
+
+  /**
+   * Static attributes to set on host element.
+   *
+   * Even indices: attribute name
+   * Odd indices: attribute value
+   */
+  attributes?: string[];
+
+  /**
+   * A map of input names.
+   *
+   * The format is in: `{[actualPropertyName: string]:(string|[string, string])}`.
+   *
+   * Given:
+   * ```
+   * class MyComponent {
+   *   @Input()
+   *   publicInput1: string;
+   *
+   *   @Input('publicInput2')
+   *   declaredInput2: string;
+   * }
+   * ```
+   *
+   * is described as:
+   * ```
+   * {
+   *   publicInput1: 'publicInput1',
+   *   declaredInput2: ['declaredInput2', 'publicInput2'],
+   * }
+   * ```
+   *
+   * Which the minifier may translate to:
+   * ```
+   * {
+   *   minifiedPublicInput1: 'publicInput1',
+   *   minifiedDeclaredInput2: [ 'publicInput2', 'declaredInput2'],
+   * }
+   * ```
+   *
+   * This allows the render to re-construct the minified, public, and declared names
+   * of properties.
+   *
+   * NOTE:
+   *  - Because declared and public name are usually same we only generate the array
+   *    `['declared', 'public']` format when they differ.
+   *  - The reason why this API and `outputs` API is not the same is that `NgOnChanges` has
+   *    inconsistent behavior in that it uses declared names rather than minified or public. For
+   *    this reason `NgOnChanges` will be deprecated and removed in future version and this
+   *    API will be simplified to be consistent with `output`.
+   */
+  inputs?: {[P in keyof T]?: string | [string, string]};
+
+  /**
+   * A map of output names.
+   *
+   * The format is in: `{[actualPropertyName: string]:string}`.
+   *
+   * Which the minifier may translate to: `{[minifiedPropertyName: string]:string}`.
+   *
+   * This allows the render to re-construct the minified and non-minified names
+   * of properties.
+   */
+  outputs?: {[P in keyof T]?: string};
+
+  /**
+   * A list of optional features to apply.
+   *
+   * See: {@link NgOnChangesFeature}, {@link PublicFeature}, {@link InheritDefinitionFeature}
+   */
+  features?: DirectiveDefFeature[];
+
+  /**
+   * Function executed by the parent template to allow child directive to apply host bindings.
+   */
+  hostBindings?: (directiveIndex: number, elementIndex: number) => void;
+
+  /**
+   * Function to create instances of content queries associated with a given directive.
+   */
+  contentQueries?: (() => void);
+
+  /** Refreshes content queries associated with directives in a given view */
+  contentQueriesRefresh?: ((directiveIndex: number, queryIndex: number) => void);
+
+  /**
+   * Defines the name that can be used in the template to assign this directive to a variable.
+   *
+   * See: {@link Directive.exportAs}
+   */
+  exportAs?: string;
+}) => never;
+
+/**
+ * Create a pipe definition object.
+ *
+ * # Example
+ * ```
+ * class MyPipe implements PipeTransform {
+ *   // Generated by Angular Template Compiler
+ *   static ngPipeDef = definePipe({
+ *     ...
+ *   });
+ * }
+ * ```
+ * @param pipeDef Pipe definition generated by the compiler
+ */
+export function definePipe<T>(pipeDef: {
+  /** Name of the pipe. Used for matching pipes in template to pipe defs. */
+  name: string,
+
+  /** Pipe class reference. Needed to extract pipe lifecycle hooks. */
+  type: Type<T>,
+
+  /** A factory for creating a pipe instance. */
+  factory: () => T,
+
+  /** Whether the pipe is pure. */
+  pure?: boolean
+}): never {
+  return (<PipeDefInternal<T>>{
+    name: pipeDef.name,
+    factory: pipeDef.factory,
+    pure: pipeDef.pure !== false,
+    onDestroy: pipeDef.type.prototype.ngOnDestroy || null
+  }) as never;
+}
diff --git a/packages/core/src/render3/di.ts b/packages/core/src/render3/di.ts
new file mode 100644
index 000000000000..28eced1bda8f
--- /dev/null
+++ b/packages/core/src/render3/di.ts
@@ -0,0 +1,810 @@
+/**
+ * @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
+ */
+
+// We are temporarily importing the existing viewEngine_from core so we can be sure we are
+// correctly implementing its interfaces for backwards compatibility.
+
+import {ChangeDetectorRef as viewEngine_ChangeDetectorRef} from '../change_detection/change_detector_ref';
+import {InjectionToken} from '../di/injection_token';
+import {InjectFlags, Injector, NullInjector, inject, setCurrentInjector} from '../di/injector';
+import * as viewEngine from '../linker';
+import {Type} from '../type';
+
+import {assertDefined, assertGreaterThan, assertLessThan} from './assert';
+import {ComponentFactoryResolver} from './component_ref';
+import {addToViewTree, assertPreviousIsParent, createEmbeddedViewNode, createLContainer, createLNodeObject, createTNode, getPreviousOrParentNode, getRenderer, isComponent, renderEmbeddedTemplate, resolveDirective} from './instructions';
+import {VIEWS} from './interfaces/container';
+import {DirectiveDefInternal, RenderFlags} from './interfaces/definition';
+import {LInjector} from './interfaces/injector';
+import {AttributeMarker, LContainerNode, LElementContainerNode, LElementNode, LNode, LViewNode, TContainerNode, TElementNode, TNodeFlags, TNodeType} from './interfaces/node';
+import {LQueries, QueryReadType} from './interfaces/query';
+import {Renderer3} from './interfaces/renderer';
+import {DECLARATION_VIEW, DIRECTIVES, HOST_NODE, INJECTOR, LViewData, QUERIES, RENDERER, TVIEW, TView} from './interfaces/view';
+import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
+import {addRemoveViewFromContainer, appendChild, detachView, getChildLNode, getParentLNode, insertView, removeView} from './node_manipulation';
+import {ViewRef} from './view_ref';
+
+
+
+/**
+ * If a directive is diPublic, bloomAdd sets a property on the type with this constant as
+ * the key and the directive's unique ID as the value. This allows us to map directives to their
+ * bloom filter bit for DI.
+ */
+const NG_ELEMENT_ID = '__NG_ELEMENT_ID__';
+
+/**
+ * The number of slots in each bloom filter (used by DI). The larger this number, the fewer
+ * directives that will share slots, and thus, the fewer false positives when checking for
+ * the existence of a directive.
+ */
+const BLOOM_SIZE = 256;
+const BLOOM_MASK = BLOOM_SIZE - 1;
+
+/** Counter used to generate unique IDs for directives. */
+let nextNgElementId = 0;
+
+/**
+ * Registers this directive as present in its node's injector by flipping the directive's
+ * corresponding bit in the injector's bloom filter.
+ *
+ * @param injector The node injector in which the directive should be registered
+ * @param type The directive to register
+ */
+export function bloomAdd(injector: LInjector, type: Type<any>): void {
+  let id: number|undefined = (type as any)[NG_ELEMENT_ID];
+
+  // Set a unique ID on the directive type, so if something tries to inject the directive,
+  // we can easily retrieve the ID and hash it into the bloom bit that should be checked.
+  if (id == null) {
+    id = (type as any)[NG_ELEMENT_ID] = nextNgElementId++;
+  }
+
+  // We only have BLOOM_SIZE (256) slots in our bloom filter (8 buckets * 32 bits each),
+  // so all unique IDs must be modulo-ed into a number from 0 - 255 to fit into the filter.
+  const bloomBit = id & BLOOM_MASK;
+
+  // Create a mask that targets the specific bit associated with the directive.
+  // JS bit operations are 32 bits, so this will be a number between 2^0 and 2^31, corresponding
+  // to bit positions 0 - 31 in a 32 bit integer.
+  const mask = 1 << bloomBit;
+
+  // Use the raw bloomBit number to determine which bloom filter bucket we should check
+  // e.g: bf0 = [0 - 31], bf1 = [32 - 63], bf2 = [64 - 95], bf3 = [96 - 127], etc
+  const b7 = bloomBit & 0x80;
+  const b6 = bloomBit & 0x40;
+  const b5 = bloomBit & 0x20;
+
+  if (b7) {
+    b6 ? (b5 ? (injector.bf7 |= mask) : (injector.bf6 |= mask)) :
+         (b5 ? (injector.bf5 |= mask) : (injector.bf4 |= mask));
+  } else {
+    b6 ? (b5 ? (injector.bf3 |= mask) : (injector.bf2 |= mask)) :
+         (b5 ? (injector.bf1 |= mask) : (injector.bf0 |= mask));
+  }
+}
+
+export function getOrCreateNodeInjector(): LInjector {
+  ngDevMode && assertPreviousIsParent();
+  return getOrCreateNodeInjectorForNode(
+      getPreviousOrParentNode() as LElementNode | LElementContainerNode | LContainerNode);
+}
+
+/**
+ * Creates (or gets an existing) injector for a given element or container.
+ *
+ * @param node for which an injector should be retrieved / created.
+ * @returns Node injector
+ */
+export function getOrCreateNodeInjectorForNode(
+    node: LElementNode | LElementContainerNode | LContainerNode): LInjector {
+  const nodeInjector = node.nodeInjector;
+  const parent = getParentLNode(node);
+  const parentInjector = parent && parent.nodeInjector;
+  if (nodeInjector != parentInjector) {
+    return nodeInjector !;
+  }
+  return node.nodeInjector = {
+    parent: parentInjector,
+    node: node,
+    bf0: 0,
+    bf1: 0,
+    bf2: 0,
+    bf3: 0,
+    bf4: 0,
+    bf5: 0,
+    bf6: 0,
+    bf7: 0,
+    cbf0: parentInjector == null ? 0 : parentInjector.cbf0 | parentInjector.bf0,
+    cbf1: parentInjector == null ? 0 : parentInjector.cbf1 | parentInjector.bf1,
+    cbf2: parentInjector == null ? 0 : parentInjector.cbf2 | parentInjector.bf2,
+    cbf3: parentInjector == null ? 0 : parentInjector.cbf3 | parentInjector.bf3,
+    cbf4: parentInjector == null ? 0 : parentInjector.cbf4 | parentInjector.bf4,
+    cbf5: parentInjector == null ? 0 : parentInjector.cbf5 | parentInjector.bf5,
+    cbf6: parentInjector == null ? 0 : parentInjector.cbf6 | parentInjector.bf6,
+    cbf7: parentInjector == null ? 0 : parentInjector.cbf7 | parentInjector.bf7,
+    templateRef: null,
+    viewContainerRef: null,
+    elementRef: null,
+    changeDetectorRef: null,
+  };
+}
+
+
+/**
+ * Makes a directive public to the DI system by adding it to an injector's bloom filter.
+ *
+ * @param di The node injector in which a directive will be added
+ * @param def The definition of the directive to be made public
+ */
+export function diPublicInInjector(di: LInjector, def: DirectiveDefInternal<any>): void {
+  bloomAdd(di, def.type);
+}
+
+/**
+ * Makes a directive public to the DI system by adding it to an injector's bloom filter.
+ *
+ * @param def The definition of the directive to be made public
+ */
+export function diPublic(def: DirectiveDefInternal<any>): void {
+  diPublicInInjector(getOrCreateNodeInjector(), def);
+}
+
+/**
+ * Returns the value associated to the given token from the injectors.
+ *
+ * `directiveInject` is intended to be used for directive, component and pipe factories.
+ *  All other injection use `inject` which does not walk the node injector tree.
+ *
+ * Usage example (in factory function):
+ *
+ * class SomeDirective {
+ *   constructor(directive: DirectiveA) {}
+ *
+ *   static ngDirectiveDef = defineDirective({
+ *     type: SomeDirective,
+ *     factory: () => new SomeDirective(directiveInject(DirectiveA))
+ *   });
+ * }
+ *
+ * @param token the type or token to inject
+ * @param flags Injection flags
+ * @returns the value from the injector or `null` when not found
+ */
+export function directiveInject<T>(token: Type<T>| InjectionToken<T>): T;
+export function directiveInject<T>(token: Type<T>| InjectionToken<T>, flags: InjectFlags): T;
+export function directiveInject<T>(
+    token: Type<T>| InjectionToken<T>, flags = InjectFlags.Default): T|null {
+  return getOrCreateInjectable<T>(getOrCreateNodeInjector(), token, flags);
+}
+
+/**
+ * Creates an ElementRef and stores it on the injector.
+ * Or, if the ElementRef already exists, retrieves the existing ElementRef.
+ *
+ * @returns The ElementRef instance to use
+ */
+export function injectElementRef(): viewEngine.ElementRef {
+  return getOrCreateElementRef(getOrCreateNodeInjector());
+}
+
+/**
+ * Creates a TemplateRef and stores it on the injector. Or, if the TemplateRef already
+ * exists, retrieves the existing TemplateRef.
+ *
+ * @returns The TemplateRef instance to use
+ */
+export function injectTemplateRef<T>(): viewEngine.TemplateRef<T> {
+  return getOrCreateTemplateRef<T>(getOrCreateNodeInjector());
+}
+
+/**
+ * Creates a ViewContainerRef and stores it on the injector. Or, if the ViewContainerRef
+ * already exists, retrieves the existing ViewContainerRef.
+ *
+ * @returns The ViewContainerRef instance to use
+ */
+export function injectViewContainerRef(): viewEngine.ViewContainerRef {
+  return getOrCreateContainerRef(getOrCreateNodeInjector());
+}
+
+/** Returns a ChangeDetectorRef (a.k.a. a ViewRef) */
+export function injectChangeDetectorRef(): viewEngine_ChangeDetectorRef {
+  return getOrCreateChangeDetectorRef(getOrCreateNodeInjector(), null);
+}
+
+/**
+ * Creates a ComponentFactoryResolver and stores it on the injector. Or, if the
+ * ComponentFactoryResolver
+ * already exists, retrieves the existing ComponentFactoryResolver.
+ *
+ * @returns The ComponentFactoryResolver instance to use
+ */
+export function injectComponentFactoryResolver(): viewEngine.ComponentFactoryResolver {
+  return componentFactoryResolver;
+}
+const componentFactoryResolver: ComponentFactoryResolver = new ComponentFactoryResolver();
+
+/**
+ * Inject static attribute value into directive constructor.
+ *
+ * This method is used with `factory` functions which are generated as part of
+ * `defineDirective` or `defineComponent`. The method retrieves the static value
+ * of an attribute. (Dynamic attributes are not supported since they are not resolved
+ *  at the time of injection and can change over time.)
+ *
+ * # Example
+ * Given:
+ * ```
+ * @Component(...)
+ * class MyComponent {
+ *   constructor(@Attribute('title') title: string) { ... }
+ * }
+ * ```
+ * When instantiated with
+ * ```
+ * <my-component title="Hello"></my-component>
+ * ```
+ *
+ * Then factory method generated is:
+ * ```
+ * MyComponent.ngComponentDef = defineComponent({
+ *   factory: () => new MyComponent(injectAttribute('title'))
+ *   ...
+ * })
+ * ```
+ *
+ * @experimental
+ */
+export function injectAttribute(attrNameToInject: string): string|undefined {
+  ngDevMode && assertPreviousIsParent();
+  const lElement = getPreviousOrParentNode() as LElementNode;
+  ngDevMode && assertNodeType(lElement, TNodeType.Element);
+  const tElement = lElement.tNode;
+  ngDevMode && assertDefined(tElement, 'expecting tNode');
+  const attrs = tElement.attrs;
+  if (attrs) {
+    for (let i = 0; i < attrs.length; i = i + 2) {
+      const attrName = attrs[i];
+      if (attrName === AttributeMarker.SelectOnly) break;
+      if (attrName == attrNameToInject) {
+        return attrs[i + 1] as string;
+      }
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Creates a ViewRef and stores it on the injector as ChangeDetectorRef (public alias).
+ * Or, if it already exists, retrieves the existing instance.
+ *
+ * @returns The ChangeDetectorRef to use
+ */
+export function getOrCreateChangeDetectorRef(
+    di: LInjector, context: any): viewEngine_ChangeDetectorRef {
+  if (di.changeDetectorRef) return di.changeDetectorRef;
+
+  const currentNode = di.node;
+  if (isComponent(currentNode.tNode)) {
+    return di.changeDetectorRef = new ViewRef(currentNode.data as LViewData, context);
+  } else if (currentNode.tNode.type === TNodeType.Element) {
+    return di.changeDetectorRef = getOrCreateHostChangeDetector(currentNode.view[HOST_NODE]);
+  }
+  return null !;
+}
+
+/** Gets or creates ChangeDetectorRef for the closest host component */
+function getOrCreateHostChangeDetector(currentNode: LViewNode | LElementNode):
+    viewEngine_ChangeDetectorRef {
+  const hostNode = getClosestComponentAncestor(currentNode);
+  const hostInjector = hostNode.nodeInjector;
+  const existingRef = hostInjector && hostInjector.changeDetectorRef;
+
+  return existingRef ?
+      existingRef :
+      new ViewRef(
+          hostNode.data as LViewData,
+          hostNode
+              .view[DIRECTIVES] ![hostNode.tNode.flags >> TNodeFlags.DirectiveStartingIndexShift]);
+}
+
+/**
+ * If the node is an embedded view, traverses up the view tree to return the closest
+ * ancestor view that is attached to a component. If it's already a component node,
+ * returns itself.
+ */
+function getClosestComponentAncestor(node: LViewNode | LElementNode): LElementNode {
+  while (node.tNode.type === TNodeType.View) {
+    node = node.view[HOST_NODE];
+  }
+  return node as LElementNode;
+}
+
+/**
+ * Returns the value associated to the given token from the injectors.
+ *
+ * Look for the injector providing the token by walking up the node injector tree and then
+ * the module injector tree.
+ *
+ * @param nodeInjector Node injector where the search should start
+ * @param token The token to look for
+ * @param flags Injection flags
+ * @returns the value from the injector or `null` when not found
+ */
+export function getOrCreateInjectable<T>(
+    nodeInjector: LInjector, token: Type<T>| InjectionToken<T>,
+    flags: InjectFlags = InjectFlags.Default): T|null {
+  const bloomHash = bloomHashBit(token);
+
+  // If the token has a bloom hash, then it is a directive that is public to the injection system
+  // (diPublic) otherwise fall back to the module injector.
+  if (bloomHash !== null) {
+    let injector: LInjector|null = nodeInjector;
+
+    while (injector) {
+      // Get the closest potential matching injector (upwards in the injector tree) that
+      // *potentially* has the token.
+      injector = bloomFindPossibleInjector(injector, bloomHash, flags);
+
+      // If no injector is found, we *know* that there is no ancestor injector that contains the
+      // token, so we abort.
+      if (!injector) {
+        break;
+      }
+
+      // At this point, we have an injector which *may* contain the token, so we step through the
+      // directives associated with the injector's corresponding node to get the directive instance.
+      const node = injector.node;
+      const nodeFlags = node.tNode.flags;
+      const count = nodeFlags & TNodeFlags.DirectiveCountMask;
+
+      if (count !== 0) {
+        const start = nodeFlags >> TNodeFlags.DirectiveStartingIndexShift;
+        const end = start + count;
+        const defs = node.view[TVIEW].directives !;
+
+        for (let i = start; i < end; i++) {
+          // Get the definition for the directive at this index and, if it is injectable (diPublic),
+          // and matches the given token, return the directive instance.
+          const directiveDef = defs[i] as DirectiveDefInternal<any>;
+          if (directiveDef.type === token && directiveDef.diPublic) {
+            return node.view[DIRECTIVES] ![i];
+          }
+        }
+      }
+
+      // If we *didn't* find the directive for the token and we are searching the current node's
+      // injector, it's possible the directive is on this node and hasn't been created yet.
+      let instance: T|null;
+      if (injector === nodeInjector &&
+          (instance = searchMatchesQueuedForCreation<T>(node, token))) {
+        return instance;
+      }
+
+      // The def wasn't found anywhere on this node, so it was a false positive.
+      // If flags permit, traverse up the tree and continue searching.
+      if (flags & InjectFlags.Self || flags & InjectFlags.Host && !sameHostView(injector)) {
+        injector = null;
+      } else {
+        injector = injector.parent;
+      }
+    }
+  }
+
+  const moduleInjector = getPreviousOrParentNode().view[INJECTOR];
+  const formerInjector = setCurrentInjector(moduleInjector);
+  try {
+    return inject(token, flags);
+  } finally {
+    setCurrentInjector(formerInjector);
+  }
+}
+
+function searchMatchesQueuedForCreation<T>(node: LNode, token: any): T|null {
+  const matches = node.view[TVIEW].currentMatches;
+  if (matches) {
+    for (let i = 0; i < matches.length; i += 2) {
+      const def = matches[i] as DirectiveDefInternal<any>;
+      if (def.type === token) {
+        return resolveDirective(def, i + 1, matches, node.view[TVIEW]);
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Returns the bit in an injector's bloom filter that should be used to determine whether or not
+ * the directive might be provided by the injector.
+ *
+ * When a directive is public, it is added to the bloom filter and given a unique ID that can be
+ * retrieved on the Type. When the directive isn't public or the token is not a directive `null`
+ * is returned as the node injector can not possibly provide that token.
+ *
+ * @param token the injection token
+ * @returns the matching bit to check in the bloom filter or `null` if the token is not known.
+ */
+function bloomHashBit(token: Type<any>| InjectionToken<any>): number|null {
+  let id: number|undefined = (token as any)[NG_ELEMENT_ID];
+  return typeof id === 'number' ? id & BLOOM_MASK : null;
+}
+
+/**
+ * Finds the closest injector that might have a certain directive.
+ *
+ * Each directive corresponds to a bit in an injector's bloom filter. Given the bloom bit to
+ * check and a starting injector, this function traverses up injectors until it finds an
+ * injector that contains a 1 for that bit in its bloom filter. A 1 indicates that the
+ * injector may have that directive. It only *may* have the directive because directives begin
+ * to share bloom filter bits after the BLOOM_SIZE is reached, and it could correspond to a
+ * different directive sharing the bit.
+ *
+ * Note: We can skip checking further injectors up the tree if an injector's cbf structure
+ * has a 0 for that bloom bit. Since cbf contains the merged value of all the parent
+ * injectors, a 0 in the bloom bit indicates that the parents definitely do not contain
+ * the directive and do not need to be checked.
+ *
+ * @param injector The starting node injector to check
+ * @param  bloomBit The bit to check in each injector's bloom filter
+ * @param  flags The injection flags for this injection site (e.g. Optional or SkipSelf)
+ * @returns An injector that might have the directive
+ */
+export function bloomFindPossibleInjector(
+    startInjector: LInjector, bloomBit: number, flags: InjectFlags): LInjector|null {
+  // Create a mask that targets the specific bit associated with the directive we're looking for.
+  // JS bit operations are 32 bits, so this will be a number between 2^0 and 2^31, corresponding
+  // to bit positions 0 - 31 in a 32 bit integer.
+  const mask = 1 << bloomBit;
+  const b7 = bloomBit & 0x80;
+  const b6 = bloomBit & 0x40;
+  const b5 = bloomBit & 0x20;
+
+  // Traverse up the injector tree until we find a potential match or until we know there *isn't* a
+  // match.
+  let injector: LInjector|null =
+      flags & InjectFlags.SkipSelf ? startInjector.parent : startInjector;
+
+  while (injector) {
+    // Our bloom filter size is 256 bits, which is eight 32-bit bloom filter buckets:
+    // bf0 = [0 - 31], bf1 = [32 - 63], bf2 = [64 - 95], bf3 = [96 - 127], etc.
+    // Get the bloom filter value from the appropriate bucket based on the directive's bloomBit.
+    let value: number;
+
+    if (b7) {
+      value = b6 ? (b5 ? injector.bf7 : injector.bf6) : (b5 ? injector.bf5 : injector.bf4);
+    } else {
+      value = b6 ? (b5 ? injector.bf3 : injector.bf2) : (b5 ? injector.bf1 : injector.bf0);
+    }
+
+    // If the bloom filter value has the bit corresponding to the directive's bloomBit flipped on,
+    // this injector is a potential match.
+    if (value & mask) {
+      return injector;
+    }
+
+    if (flags & InjectFlags.Self || flags & InjectFlags.Host && !sameHostView(injector)) {
+      return null;
+    }
+
+    // If the current injector does not have the directive, check the bloom filters for the ancestor
+    // injectors (cbf0 - cbf7). These filters capture *all* ancestor injectors.
+    if (b7) {
+      value = b6 ? (b5 ? injector.cbf7 : injector.cbf6) : (b5 ? injector.cbf5 : injector.cbf4);
+    } else {
+      value = b6 ? (b5 ? injector.cbf3 : injector.cbf2) : (b5 ? injector.cbf1 : injector.cbf0);
+    }
+
+    // If the ancestor bloom filter value has the bit corresponding to the directive, traverse up to
+    // find the specific injector. If the ancestor bloom filter does not have the bit, we can abort.
+    if (value & mask) {
+      injector = injector.parent;
+    } else {
+      return null;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Checks whether the current injector and its parent are in the same host view.
+ *
+ * This is necessary to support @Host() decorators. If @Host() is set, we should stop searching once
+ * the injector and its parent view don't match because it means we'd cross the view boundary.
+ */
+function sameHostView(injector: LInjector): boolean {
+  return !!injector.parent && injector.parent.node.view === injector.node.view;
+}
+
+export class ReadFromInjectorFn<T> {
+  constructor(readonly read: (injector: LInjector, node: LNode, directiveIndex?: number) => T) {}
+}
+
+/**
+ * Creates an ElementRef for a given node injector and stores it on the injector.
+ * Or, if the ElementRef already exists, retrieves the existing ElementRef.
+ *
+ * @param di The node injector where we should store a created ElementRef
+ * @returns The ElementRef instance to use
+ */
+export function getOrCreateElementRef(di: LInjector): viewEngine.ElementRef {
+  return di.elementRef || (di.elementRef = new ElementRef(di.node.native));
+}
+
+export const QUERY_READ_TEMPLATE_REF = <QueryReadType<viewEngine.TemplateRef<any>>>(
+    new ReadFromInjectorFn<viewEngine.TemplateRef<any>>(
+        (injector: LInjector) => getOrCreateTemplateRef(injector)) as any);
+
+export const QUERY_READ_CONTAINER_REF = <QueryReadType<viewEngine.ViewContainerRef>>(
+    new ReadFromInjectorFn<viewEngine.ViewContainerRef>(
+        (injector: LInjector) => getOrCreateContainerRef(injector)) as any);
+
+export const QUERY_READ_ELEMENT_REF =
+    <QueryReadType<viewEngine.ElementRef>>(new ReadFromInjectorFn<viewEngine.ElementRef>(
+        (injector: LInjector) => getOrCreateElementRef(injector)) as any);
+
+export const QUERY_READ_FROM_NODE =
+    (new ReadFromInjectorFn<any>((injector: LInjector, node: LNode, directiveIdx: number) => {
+      ngDevMode && assertNodeOfPossibleTypes(node, TNodeType.Container, TNodeType.Element);
+      if (directiveIdx > -1) {
+        return node.view[DIRECTIVES] ![directiveIdx];
+      }
+      if (node.tNode.type === TNodeType.Element) {
+        return getOrCreateElementRef(injector);
+      }
+      if (node.tNode.type === TNodeType.Container) {
+        return getOrCreateTemplateRef(injector);
+      }
+      throw new Error('fail');
+    }) as any as QueryReadType<any>);
+
+/** A ref to a node's native element. */
+class ElementRef implements viewEngine.ElementRef {
+  readonly nativeElement: any;
+  constructor(nativeElement: any) { this.nativeElement = nativeElement; }
+}
+
+/**
+ * Creates a ViewContainerRef and stores it on the injector. Or, if the ViewContainerRef
+ * already exists, retrieves the existing ViewContainerRef.
+ *
+ * @returns The ViewContainerRef instance to use
+ */
+export function getOrCreateContainerRef(di: LInjector): viewEngine.ViewContainerRef {
+  if (!di.viewContainerRef) {
+    const vcRefHost = di.node;
+
+    ngDevMode && assertNodeOfPossibleTypes(vcRefHost, TNodeType.Container, TNodeType.Element);
+    const hostParent = getParentLNode(vcRefHost) !;
+    const lContainer = createLContainer(hostParent, vcRefHost.view, true);
+    const comment = vcRefHost.view[RENDERER].createComment(ngDevMode ? 'container' : '');
+    const lContainerNode: LContainerNode =
+        createLNodeObject(TNodeType.Container, vcRefHost.view, hostParent, comment, lContainer);
+    appendChild(hostParent, comment, vcRefHost.view);
+
+    const hostTNode = vcRefHost.tNode as TElementNode | TContainerNode;
+    if (!hostTNode.dynamicContainerNode) {
+      hostTNode.dynamicContainerNode =
+          createTNode(TNodeType.Container, -1, null, null, hostTNode, null);
+    }
+
+    lContainerNode.tNode = hostTNode.dynamicContainerNode;
+    vcRefHost.dynamicLContainerNode = lContainerNode;
+
+    addToViewTree(vcRefHost.view, hostTNode.index as number, lContainer);
+
+    di.viewContainerRef = new ViewContainerRef(lContainerNode, vcRefHost);
+  }
+
+  return di.viewContainerRef;
+}
+
+export class NodeInjector implements Injector {
+  constructor(private _lInjector: LInjector) {}
+
+  get(token: any): any {
+    if (token === viewEngine.TemplateRef) {
+      return getOrCreateTemplateRef(this._lInjector);
+    }
+    if (token === viewEngine.ViewContainerRef) {
+      return getOrCreateContainerRef(this._lInjector);
+    }
+    if (token === viewEngine.ElementRef) {
+      return getOrCreateElementRef(this._lInjector);
+    }
+    if (token === viewEngine_ChangeDetectorRef) {
+      return getOrCreateChangeDetectorRef(this._lInjector, null);
+    }
+
+    return getOrCreateInjectable(this._lInjector, token);
+  }
+}
+
+/**
+ * A ref to a container that enables adding and removing views from that container
+ * imperatively.
+ */
+class ViewContainerRef implements viewEngine.ViewContainerRef {
+  private _viewRefs: viewEngine.ViewRef[] = [];
+
+  constructor(
+      private _lContainerNode: LContainerNode,
+      private _hostNode: LElementNode|LElementContainerNode|LContainerNode) {}
+
+  get element(): ElementRef {
+    const injector = getOrCreateNodeInjectorForNode(this._hostNode);
+    return getOrCreateElementRef(injector);
+  }
+
+  get injector(): Injector {
+    const injector = getOrCreateNodeInjectorForNode(this._hostNode);
+    return new NodeInjector(injector);
+  }
+
+  /** @deprecated No replacement */
+  get parentInjector(): Injector {
+    const parentLInjector = getParentLNode(this._hostNode).nodeInjector;
+    return parentLInjector ? new NodeInjector(parentLInjector) : new NullInjector();
+  }
+
+  clear(): void {
+    const lContainer = this._lContainerNode.data;
+    while (lContainer[VIEWS].length) {
+      this.remove(0);
+    }
+  }
+
+  get(index: number): viewEngine.ViewRef|null { return this._viewRefs[index] || null; }
+
+  get length(): number {
+    const lContainer = this._lContainerNode.data;
+    return lContainer[VIEWS].length;
+  }
+
+  createEmbeddedView<C>(templateRef: viewEngine.TemplateRef<C>, context?: C, index?: number):
+      viewEngine.EmbeddedViewRef<C> {
+    const adjustedIdx = this._adjustIndex(index);
+    const viewRef = (templateRef as TemplateRef<C>)
+                        .createEmbeddedView(context || <any>{}, this._lContainerNode, adjustedIdx);
+    (viewRef as ViewRef<any>).attachToViewContainerRef(this);
+    this._viewRefs.splice(adjustedIdx, 0, viewRef);
+    return viewRef;
+  }
+
+  createComponent<C>(
+      componentFactory: viewEngine.ComponentFactory<C>, index?: number|undefined,
+      injector?: Injector|undefined, projectableNodes?: any[][]|undefined,
+      ngModuleRef?: viewEngine.NgModuleRef<any>|undefined): viewEngine.ComponentRef<C> {
+    const contextInjector = injector || this.parentInjector;
+    if (!ngModuleRef && contextInjector) {
+      ngModuleRef = contextInjector.get(viewEngine.NgModuleRef, null);
+    }
+
+    const componentRef =
+        componentFactory.create(contextInjector, projectableNodes, undefined, ngModuleRef);
+    this.insert(componentRef.hostView, index);
+    return componentRef;
+  }
+
+  insert(viewRef: viewEngine.ViewRef, index?: number): viewEngine.ViewRef {
+    if (viewRef.destroyed) {
+      throw new Error('Cannot insert a destroyed View in a ViewContainer!');
+    }
+    const lViewNode = (viewRef as ViewRef<any>)._lViewNode !;
+    const adjustedIdx = this._adjustIndex(index);
+
+    insertView(this._lContainerNode, lViewNode, adjustedIdx);
+    const views = this._lContainerNode.data[VIEWS];
+    const beforeNode = adjustedIdx + 1 < views.length ?
+        (getChildLNode(views[adjustedIdx + 1]) !).native :
+        this._lContainerNode.native;
+    addRemoveViewFromContainer(this._lContainerNode, lViewNode, true, beforeNode);
+
+    (viewRef as ViewRef<any>).attachToViewContainerRef(this);
+    this._viewRefs.splice(adjustedIdx, 0, viewRef);
+
+    return viewRef;
+  }
+
+  move(viewRef: viewEngine.ViewRef, newIndex: number): viewEngine.ViewRef {
+    const index = this.indexOf(viewRef);
+    this.detach(index);
+    this.insert(viewRef, this._adjustIndex(newIndex));
+    return viewRef;
+  }
+
+  indexOf(viewRef: viewEngine.ViewRef): number { return this._viewRefs.indexOf(viewRef); }
+
+  remove(index?: number): void {
+    const adjustedIdx = this._adjustIndex(index, -1);
+    removeView(this._lContainerNode, adjustedIdx);
+    this._viewRefs.splice(adjustedIdx, 1);
+  }
+
+  detach(index?: number): viewEngine.ViewRef|null {
+    const adjustedIdx = this._adjustIndex(index, -1);
+    detachView(this._lContainerNode, adjustedIdx);
+    return this._viewRefs.splice(adjustedIdx, 1)[0] || null;
+  }
+
+  private _adjustIndex(index?: number, shift: number = 0) {
+    if (index == null) {
+      return this._lContainerNode.data[VIEWS].length + shift;
+    }
+    if (ngDevMode) {
+      assertGreaterThan(index, -1, 'index must be positive');
+      // +1 because it's legal to insert at the end.
+      assertLessThan(index, this._lContainerNode.data[VIEWS].length + 1 + shift, 'index');
+    }
+    return index;
+  }
+}
+
+/**
+ * Creates a TemplateRef and stores it on the injector. Or, if the TemplateRef already
+ * exists, retrieves the existing TemplateRef.
+ *
+ * @param di The node injector where we should store a created TemplateRef
+ * @returns The TemplateRef instance to use
+ */
+export function getOrCreateTemplateRef<T>(di: LInjector): viewEngine.TemplateRef<T> {
+  if (!di.templateRef) {
+    ngDevMode && assertNodeType(di.node, TNodeType.Container);
+    const hostNode = di.node as LContainerNode;
+    const hostTNode = hostNode.tNode;
+    ngDevMode && assertDefined(hostTNode.tViews, 'TView must be allocated');
+    di.templateRef = new TemplateRef<any>(
+        hostNode.view, getOrCreateElementRef(di), hostTNode.tViews as TView, getRenderer(),
+        hostNode.data[QUERIES]);
+  }
+  return di.templateRef;
+}
+
+export function getFactoryOf<T>(type: Type<any>): ((type?: Type<T>) => T)|null {
+  const typeAny = type as any;
+  const def = typeAny.ngComponentDef || typeAny.ngDirectiveDef || typeAny.ngPipeDef ||
+      typeAny.ngInjectableDef || typeAny.ngInjectorDef;
+  if (def === undefined || def.factory === undefined) {
+    return null;
+  }
+  return def.factory;
+}
+
+export function getInheritedFactory<T>(type: Type<any>): (type: Type<T>) => T {
+  const proto = Object.getPrototypeOf(type.prototype).constructor as Type<any>;
+  const factory = getFactoryOf<T>(proto);
+  if (factory !== null) {
+    return factory;
+  } else {
+    // There is no factory defined. Either this was improper usage of inheritance
+    // (no Angular decorator on the superclass) or there is no constructor at all
+    // in the inheritance chain. Since the two cases cannot be distinguished, the
+    // latter has to be assumed.
+    return (t) => new t();
+  }
+}
+
+class TemplateRef<T> implements viewEngine.TemplateRef<T> {
+  constructor(
+      private _declarationParentView: LViewData, readonly elementRef: viewEngine.ElementRef,
+      private _tView: TView, private _renderer: Renderer3, private _queries: LQueries|null) {}
+
+  createEmbeddedView(context: T, containerNode?: LContainerNode, index?: number):
+      viewEngine.EmbeddedViewRef<T> {
+    const viewNode = createEmbeddedViewNode(
+        this._tView, context, this._declarationParentView, this._renderer, this._queries);
+    if (containerNode) {
+      insertView(containerNode, viewNode, index !);
+    }
+    renderEmbeddedTemplate(viewNode, this._tView, context, RenderFlags.Create);
+    const viewRef = new ViewRef(viewNode.data, context);
+    viewRef._lViewNode = viewNode;
+    return viewRef;
+  }
+}
diff --git a/packages/core/src/render3/errors.ts b/packages/core/src/render3/errors.ts
new file mode 100644
index 000000000000..9c37210d6efb
--- /dev/null
+++ b/packages/core/src/render3/errors.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 {TNode} from './interfaces/node';
+
+/** Called when directives inject each other (creating a circular dependency) */
+export function throwCyclicDependencyError(token: any): never {
+  throw new Error(`Cannot instantiate cyclic dependency! ${token}`);
+}
+
+/** Called when there are multiple component selectors that match a given node */
+export function throwMultipleComponentError(tNode: TNode): never {
+  throw new Error(`Multiple components match node with tagname ${tNode.tagName}`);
+}
+
+/** Throws an ExpressionChangedAfterChecked error if checkNoChanges mode is on. */
+export function throwErrorIfNoChangesMode(
+    creationMode: boolean, checkNoChangesMode: boolean, oldValue: any, currValue: any): never|void {
+  if (checkNoChangesMode) {
+    let msg =
+        `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '${oldValue}'. Current value: '${currValue}'.`;
+    if (creationMode) {
+      msg +=
+          ` It seems like the view has been created after its parent and its children have been dirty checked.` +
+          ` Has it been created in a change detection hook ?`;
+    }
+    // TODO: include debug context
+    throw new Error(msg);
+  }
+}
diff --git a/packages/core/src/render3/features/inherit_definition_feature.ts b/packages/core/src/render3/features/inherit_definition_feature.ts
new file mode 100644
index 000000000000..72bcec9784af
--- /dev/null
+++ b/packages/core/src/render3/features/inherit_definition_feature.ts
@@ -0,0 +1,118 @@
+/**
+ * @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 {Type} from '../../type';
+import {fillProperties} from '../../util/property';
+import {ComponentDefInternal, DirectiveDefFeature, DirectiveDefInternal} from '../interfaces/definition';
+
+
+/**
+ * Determines if a definition is a {@link ComponentDefInternal} or a {@link DirectiveDefInternal}
+ * @param definition The definition to examine
+ */
+function isComponentDef<T>(definition: ComponentDefInternal<T>| DirectiveDefInternal<T>):
+    definition is ComponentDefInternal<T> {
+  const def = definition as ComponentDefInternal<T>;
+  return typeof def.template === 'function';
+}
+
+function getSuperType(type: Type<any>): Type<any>&
+    {ngComponentDef?: ComponentDefInternal<any>, ngDirectiveDef?: DirectiveDefInternal<any>} {
+  return Object.getPrototypeOf(type.prototype).constructor;
+}
+
+/**
+ * Merges the definition from a super class to a sub class.
+ * @param definition The definition that is a SubClass of another directive of component
+ */
+export function InheritDefinitionFeature(
+    definition: DirectiveDefInternal<any>| ComponentDefInternal<any>): void {
+  let superType = getSuperType(definition.type);
+
+  while (superType) {
+    let superDef: DirectiveDefInternal<any>|ComponentDefInternal<any>|undefined = undefined;
+    if (isComponentDef(definition)) {
+      superDef = superType.ngComponentDef || superType.ngDirectiveDef;
+    } else {
+      if (superType.ngComponentDef) {
+        throw new Error('Directives cannot inherit Components');
+      }
+      superDef = superType.ngDirectiveDef;
+    }
+
+    const baseDef = (superType as any).ngBaseDef;
+    if (baseDef) {
+      // Merge inputs and outputs
+      fillProperties(definition.inputs, baseDef.inputs);
+      fillProperties(definition.declaredInputs, baseDef.declaredInputs);
+      fillProperties(definition.outputs, baseDef.outputs);
+    }
+
+    if (superDef) {
+      // Merge hostBindings
+      const prevHostBindings = definition.hostBindings;
+      const superHostBindings = superDef.hostBindings;
+      if (superHostBindings) {
+        if (prevHostBindings) {
+          definition.hostBindings = (directiveIndex: number, elementIndex: number) => {
+            superHostBindings(directiveIndex, elementIndex);
+            prevHostBindings(directiveIndex, elementIndex);
+          };
+        } else {
+          definition.hostBindings = superHostBindings;
+        }
+      }
+
+      // Merge inputs and outputs
+      fillProperties(definition.inputs, superDef.inputs);
+      fillProperties(definition.declaredInputs, superDef.declaredInputs);
+      fillProperties(definition.outputs, superDef.outputs);
+
+      // Inherit hooks
+      // Assume super class inheritance feature has already run.
+      definition.afterContentChecked =
+          definition.afterContentChecked || superDef.afterContentChecked;
+      definition.afterContentInit = definition.afterContentInit || superDef.afterContentInit;
+      definition.afterViewChecked = definition.afterViewChecked || superDef.afterViewChecked;
+      definition.afterViewInit = definition.afterViewInit || superDef.afterViewInit;
+      definition.doCheck = definition.doCheck || superDef.doCheck;
+      definition.onDestroy = definition.onDestroy || superDef.onDestroy;
+      definition.onInit = definition.onInit || superDef.onInit;
+
+      // Run parent features
+      const features = superDef.features;
+      if (features) {
+        for (const feature of features) {
+          if (feature && feature !== InheritDefinitionFeature) {
+            (feature as DirectiveDefFeature)(definition);
+          }
+        }
+      }
+
+      break;
+    } else {
+      // Even if we don't have a definition, check the type for the hooks and use those if need be
+      const superPrototype = superType.prototype;
+
+      if (superPrototype) {
+        definition.afterContentChecked =
+            definition.afterContentChecked || superPrototype.afterContentChecked;
+        definition.afterContentInit =
+            definition.afterContentInit || superPrototype.afterContentInit;
+        definition.afterViewChecked =
+            definition.afterViewChecked || superPrototype.afterViewChecked;
+        definition.afterViewInit = definition.afterViewInit || superPrototype.afterViewInit;
+        definition.doCheck = definition.doCheck || superPrototype.doCheck;
+        definition.onDestroy = definition.onDestroy || superPrototype.onDestroy;
+        definition.onInit = definition.onInit || superPrototype.onInit;
+      }
+    }
+
+    superType = Object.getPrototypeOf(superType);
+  }
+}
diff --git a/packages/core/src/render3/features/ng_onchanges_feature.ts b/packages/core/src/render3/features/ng_onchanges_feature.ts
new file mode 100644
index 000000000000..75b4147f8fbc
--- /dev/null
+++ b/packages/core/src/render3/features/ng_onchanges_feature.ts
@@ -0,0 +1,118 @@
+/**
+ * @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 {SimpleChange} from '../../change_detection/change_detection_util';
+import {OnChanges, SimpleChanges} from '../../metadata/lifecycle_hooks';
+import {DirectiveDefInternal} from '../interfaces/definition';
+
+const PRIVATE_PREFIX = '__ngOnChanges_';
+
+type OnChangesExpando = OnChanges & {
+  __ngOnChanges_: SimpleChanges|null|undefined;
+  // tslint:disable-next-line:no-any Can hold any value
+  [key: string]: any;
+};
+
+/**
+ * The NgOnChangesFeature decorates a component with support for the ngOnChanges
+ * lifecycle hook, so it should be included in any component that implements
+ * that hook.
+ *
+ * If the component or directive uses inheritance, the NgOnChangesFeature MUST
+ * be included as a feature AFTER {@link InheritDefinitionFeature}, otherwise
+ * inherited properties will not be propagated to the ngOnChanges lifecycle
+ * hook.
+ *
+ * Example usage:
+ *
+ * ```
+ * static ngComponentDef = defineComponent({
+ *   ...
+ *   inputs: {name: 'publicName'},
+ *   features: [NgOnChangesFeature]
+ * });
+ * ```
+ */
+export function NgOnChangesFeature<T>(definition: DirectiveDefInternal<T>): void {
+  const declaredToMinifiedInputs = definition.declaredInputs;
+  const proto = definition.type.prototype;
+  for (const declaredName in declaredToMinifiedInputs) {
+    if (declaredToMinifiedInputs.hasOwnProperty(declaredName)) {
+      const minifiedKey = declaredToMinifiedInputs[declaredName];
+      const privateMinKey = PRIVATE_PREFIX + minifiedKey;
+
+      // Walk the prototype chain to see if we find a property descriptor
+      // That way we can honor setters and getters that were inherited.
+      let originalProperty: PropertyDescriptor|undefined = undefined;
+      let checkProto = proto;
+      while (!originalProperty && checkProto &&
+             Object.getPrototypeOf(checkProto) !== Object.getPrototypeOf(Object.prototype)) {
+        originalProperty = Object.getOwnPropertyDescriptor(checkProto, minifiedKey);
+        checkProto = Object.getPrototypeOf(checkProto);
+      }
+
+      const getter = originalProperty && originalProperty.get;
+      const setter = originalProperty && originalProperty.set;
+
+      // create a getter and setter for property
+      Object.defineProperty(proto, minifiedKey, {
+        get: getter ||
+            (setter ? undefined : function(this: OnChangesExpando) { return this[privateMinKey]; }),
+        set<T>(this: OnChangesExpando, value: T) {
+          let simpleChanges = this[PRIVATE_PREFIX];
+          if (!simpleChanges) {
+            simpleChanges = {};
+            // Place where we will store SimpleChanges if there is a change
+            Object.defineProperty(this, PRIVATE_PREFIX, {value: simpleChanges, writable: true});
+          }
+
+          const isFirstChange = !this.hasOwnProperty(privateMinKey);
+          const currentChange = simpleChanges[declaredName];
+
+          if (currentChange) {
+            currentChange.currentValue = value;
+          } else {
+            simpleChanges[declaredName] =
+                new SimpleChange(this[privateMinKey], value, isFirstChange);
+          }
+
+          if (isFirstChange) {
+            // Create a place where the actual value will be stored and make it non-enumerable
+            Object.defineProperty(this, privateMinKey, {value, writable: true});
+          } else {
+            this[privateMinKey] = value;
+          }
+
+          if (setter) setter.call(this, value);
+        },
+        // Make the property configurable in dev mode to allow overriding in tests
+        configurable: !!ngDevMode
+      });
+    }
+  }
+
+  // If an onInit hook is defined, it will need to wrap the ngOnChanges call
+  // so the call order is changes-init-check in creation mode. In subsequent
+  // change detection runs, only the check wrapper will be called.
+  if (definition.onInit != null) {
+    definition.onInit = onChangesWrapper(definition.onInit);
+  }
+
+  definition.doCheck = onChangesWrapper(definition.doCheck);
+}
+
+function onChangesWrapper(delegateHook: (() => void) | null) {
+  return function(this: OnChangesExpando) {
+    const simpleChanges = this[PRIVATE_PREFIX];
+    if (simpleChanges != null) {
+      this.ngOnChanges(simpleChanges);
+      this[PRIVATE_PREFIX] = null;
+    }
+    if (delegateHook) delegateHook.apply(this);
+  };
+}
diff --git a/packages/core/src/render3/features/public_feature.ts b/packages/core/src/render3/features/public_feature.ts
new file mode 100644
index 000000000000..6ed10af19120
--- /dev/null
+++ b/packages/core/src/render3/features/public_feature.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 {diPublic} from '../di';
+import {DirectiveDefInternal} from '../interfaces/definition';
+
+/**
+ * This feature publishes the directive (or component) into the DI system, making it visible to
+ * others for injection.
+ *
+ * @param definition
+ */
+export function PublicFeature<T>(definition: DirectiveDefInternal<T>) {
+  definition.diPublic = diPublic;
+}
diff --git a/packages/core/src/render3/hooks.ts b/packages/core/src/render3/hooks.ts
new file mode 100644
index 000000000000..f05f673b58b0
--- /dev/null
+++ b/packages/core/src/render3/hooks.ts
@@ -0,0 +1,132 @@
+/**
+ * @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 {assertEqual} from './assert';
+import {DirectiveDefInternal} from './interfaces/definition';
+import {TNodeFlags} from './interfaces/node';
+import {DIRECTIVES, FLAGS, HookData, LViewData, LViewFlags, TView} from './interfaces/view';
+
+
+/**
+ * If this is the first template pass, any ngOnInit or ngDoCheck hooks will be queued into
+ * TView.initHooks during directiveCreate.
+ *
+ * The directive index and hook type are encoded into one number (1st bit: type, remaining bits:
+ * directive index), then saved in the even indices of the initHooks array. The odd indices
+ * hold the hook functions themselves.
+ *
+ * @param index The index of the directive in LViewData[DIRECTIVES]
+ * @param hooks The static hooks map on the directive def
+ * @param tView The current TView
+ */
+export function queueInitHooks(
+    index: number, onInit: (() => void) | null, doCheck: (() => void) | null, tView: TView): void {
+  ngDevMode &&
+      assertEqual(tView.firstTemplatePass, true, 'Should only be called on first template pass');
+  if (onInit) {
+    (tView.initHooks || (tView.initHooks = [])).push(index, onInit);
+  }
+
+  if (doCheck) {
+    (tView.initHooks || (tView.initHooks = [])).push(index, doCheck);
+    (tView.checkHooks || (tView.checkHooks = [])).push(index, doCheck);
+  }
+}
+
+/**
+ * Loops through the directives on a node and queues all their hooks except ngOnInit
+ * and ngDoCheck, which are queued separately in directiveCreate.
+ */
+export function queueLifecycleHooks(flags: number, tView: TView): void {
+  if (tView.firstTemplatePass) {
+    const start = flags >> TNodeFlags.DirectiveStartingIndexShift;
+    const count = flags & TNodeFlags.DirectiveCountMask;
+    const end = start + count;
+
+    // It's necessary to loop through the directives at elementEnd() (rather than processing in
+    // directiveCreate) so we can preserve the current hook order. Content, view, and destroy
+    // hooks for projected components and directives must be called *before* their hosts.
+    for (let i = start; i < end; i++) {
+      const def: DirectiveDefInternal<any> = tView.directives ![i];
+      queueContentHooks(def, tView, i);
+      queueViewHooks(def, tView, i);
+      queueDestroyHooks(def, tView, i);
+    }
+  }
+}
+
+/** Queues afterContentInit and afterContentChecked hooks on TView */
+function queueContentHooks(def: DirectiveDefInternal<any>, tView: TView, i: number): void {
+  if (def.afterContentInit) {
+    (tView.contentHooks || (tView.contentHooks = [])).push(i, def.afterContentInit);
+  }
+
+  if (def.afterContentChecked) {
+    (tView.contentHooks || (tView.contentHooks = [])).push(i, def.afterContentChecked);
+    (tView.contentCheckHooks || (tView.contentCheckHooks = [])).push(i, def.afterContentChecked);
+  }
+}
+
+/** Queues afterViewInit and afterViewChecked hooks on TView */
+function queueViewHooks(def: DirectiveDefInternal<any>, tView: TView, i: number): void {
+  if (def.afterViewInit) {
+    (tView.viewHooks || (tView.viewHooks = [])).push(i, def.afterViewInit);
+  }
+
+  if (def.afterViewChecked) {
+    (tView.viewHooks || (tView.viewHooks = [])).push(i, def.afterViewChecked);
+    (tView.viewCheckHooks || (tView.viewCheckHooks = [])).push(i, def.afterViewChecked);
+  }
+}
+
+/** Queues onDestroy hooks on TView */
+function queueDestroyHooks(def: DirectiveDefInternal<any>, tView: TView, i: number): void {
+  if (def.onDestroy != null) {
+    (tView.destroyHooks || (tView.destroyHooks = [])).push(i, def.onDestroy);
+  }
+}
+
+/**
+ * Calls onInit and doCheck calls if they haven't already been called.
+ *
+ * @param currentView The current view
+ */
+export function executeInitHooks(
+    currentView: LViewData, tView: TView, creationMode: boolean): void {
+  if (currentView[FLAGS] & LViewFlags.RunInit) {
+    executeHooks(currentView[DIRECTIVES] !, tView.initHooks, tView.checkHooks, creationMode);
+    currentView[FLAGS] &= ~LViewFlags.RunInit;
+  }
+}
+
+/**
+ * Iterates over afterViewInit and afterViewChecked functions and calls them.
+ *
+ * @param currentView The current view
+ */
+export function executeHooks(
+    data: any[], allHooks: HookData | null, checkHooks: HookData | null,
+    creationMode: boolean): void {
+  const hooksToCall = creationMode ? allHooks : checkHooks;
+  if (hooksToCall) {
+    callHooks(data, hooksToCall);
+  }
+}
+
+/**
+ * Calls lifecycle hooks with their contexts, skipping init hooks if it's not
+ * creation mode.
+ *
+ * @param currentView The current view
+ * @param arr The array in which the hooks are found
+ */
+export function callHooks(data: any[], arr: HookData): void {
+  for (let i = 0; i < arr.length; i += 2) {
+    (arr[i + 1] as() => void).call(data[arr[i] as number]);
+  }
+}
diff --git a/packages/core/src/render3/i18n.ts b/packages/core/src/render3/i18n.ts
new file mode 100644
index 000000000000..6687bea279b3
--- /dev/null
+++ b/packages/core/src/render3/i18n.ts
@@ -0,0 +1,737 @@
+/**
+ * @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 {assertEqual, assertLessThan} from './assert';
+import {NO_CHANGE, _getViewData, bindingUpdated, bindingUpdated2, bindingUpdated4, createLNode, getPreviousOrParentNode, getRenderer, load, resetApplicationState} from './instructions';
+import {RENDER_PARENT} from './interfaces/container';
+import {LContainerNode, LNode, TContainerNode, TElementNode, TNodeType} from './interfaces/node';
+import {BINDING_INDEX, HEADER_OFFSET, TVIEW} from './interfaces/view';
+import {appendChild, createTextNode, getParentLNode, removeChild} from './node_manipulation';
+import {stringify} from './util';
+
+/**
+ * A list of flags to encode the i18n instructions used to translate the template.
+ * We shift the flags by 29 so that 30 & 31 & 32 bits contains the instructions.
+ */
+export const enum I18nInstructions {
+  Text = 1 << 29,
+  Element = 2 << 29,
+  Expression = 3 << 29,
+  TemplateRoot = 4 << 29,
+  Any = 5 << 29,
+  CloseNode = 6 << 29,
+  RemoveNode = 7 << 29,
+  /** Used to decode the number encoded with the instruction. */
+  IndexMask = (1 << 29) - 1,
+  /** Used to test the type of instruction. */
+  InstructionMask = ~((1 << 29) - 1),
+}
+
+/**
+ * Represents the instructions used to translate the template.
+ * Instructions can be a placeholder index, a static text or a simple bit field (`I18nFlag`).
+ * When the instruction is the flag `Text`, it is always followed by its text value.
+ */
+export type I18nInstruction = number | string;
+/**
+ * Represents the instructions used to translate attributes containing expressions.
+ * Even indexes contain static strings, while odd indexes contain the index of the expression whose
+ * value will be concatenated into the final translation.
+ */
+export type I18nExpInstruction = number | string;
+/** Mapping of placeholder names to their absolute indexes in their templates. */
+export type PlaceholderMap = {
+  [name: string]: number
+};
+const i18nTagRegex = /{\$([^}]+)}/g;
+
+/**
+ * Takes a translation string, the initial list of placeholders (elements and expressions) and the
+ * indexes of their corresponding expression nodes to return a list of instructions for each
+ * template function.
+ *
+ * Because embedded templates have different indexes for each placeholder, each parameter (except
+ * the translation) is an array, where each value corresponds to a different template, by order of
+ * appearance.
+ *
+ * @param translation A translation string where placeholders are represented by `{$name}`
+ * @param elements An array containing, for each template, the maps of element placeholders and
+ * their indexes.
+ * @param expressions An array containing, for each template, the maps of expression placeholders
+ * and their indexes.
+ * @param templateRoots An array of template roots whose content should be ignored when
+ * generating the instructions for their parent template.
+ * @param lastChildIndex The index of the last child of the i18n node. Used when the i18n block is
+ * an ng-container.
+ *
+ * @returns A list of instructions used to translate each template.
+ */
+export function i18nMapping(
+    translation: string, elements: (PlaceholderMap | null)[] | null,
+    expressions?: (PlaceholderMap | null)[] | null, templateRoots?: string[] | null,
+    lastChildIndex?: number | null): I18nInstruction[][] {
+  const translationParts = translation.split(i18nTagRegex);
+  const nbTemplates = templateRoots ? templateRoots.length + 1 : 1;
+  const instructions: I18nInstruction[][] = (new Array(nbTemplates)).fill(undefined);
+
+  generateMappingInstructions(
+      0, 0, translationParts, instructions, elements, expressions, templateRoots, lastChildIndex);
+
+  return instructions;
+}
+
+/**
+ * Internal function that reads the translation parts and generates a set of instructions for each
+ * template.
+ *
+ * See `i18nMapping()` for more details.
+ *
+ * @param tmplIndex The order of appearance of the template.
+ * 0 for the root template, following indexes match the order in `templateRoots`.
+ * @param partIndex The current index in `translationParts`.
+ * @param translationParts The translation string split into an array of placeholders and text
+ * elements.
+ * @param instructions The current list of instructions to update.
+ * @param elements An array containing, for each template, the maps of element placeholders and
+ * their indexes.
+ * @param expressions An array containing, for each template, the maps of expression placeholders
+ * and their indexes.
+ * @param templateRoots An array of template roots whose content should be ignored when
+ * generating the instructions for their parent template.
+ * @param lastChildIndex The index of the last child of the i18n node. Used when the i18n block is
+ * an ng-container.
+ *
+ * @returns the current index in `translationParts`
+ */
+function generateMappingInstructions(
+    tmplIndex: number, partIndex: number, translationParts: string[],
+    instructions: I18nInstruction[][], elements: (PlaceholderMap | null)[] | null,
+    expressions?: (PlaceholderMap | null)[] | null, templateRoots?: string[] | null,
+    lastChildIndex?: number | null): number {
+  const tmplInstructions: I18nInstruction[] = [];
+  const phVisited: string[] = [];
+  let openedTagCount = 0;
+  let maxIndex = 0;
+  let currentElements: PlaceholderMap|null =
+      elements && elements[tmplIndex] ? elements[tmplIndex] : null;
+  let currentExpressions: PlaceholderMap|null =
+      expressions && expressions[tmplIndex] ? expressions[tmplIndex] : null;
+
+  instructions[tmplIndex] = tmplInstructions;
+
+  for (; partIndex < translationParts.length; partIndex++) {
+    // The value can either be text or the name of a placeholder (element/template root/expression)
+    const value = translationParts[partIndex];
+
+    // Odd indexes are placeholders
+    if (partIndex & 1) {
+      let phIndex;
+      if (currentElements && currentElements[value] !== undefined) {
+        phIndex = currentElements[value];
+        // The placeholder represents a DOM element, add an instruction to move it
+        let templateRootIndex = templateRoots ? templateRoots.indexOf(value) : -1;
+        if (templateRootIndex !== -1 && (templateRootIndex + 1) !== tmplIndex) {
+          // This is a template root, it has no closing tag, not treating it as an element
+          tmplInstructions.push(phIndex | I18nInstructions.TemplateRoot);
+        } else {
+          tmplInstructions.push(phIndex | I18nInstructions.Element);
+          openedTagCount++;
+        }
+        phVisited.push(value);
+      } else if (currentExpressions && currentExpressions[value] !== undefined) {
+        phIndex = currentExpressions[value];
+        // The placeholder represents an expression, add an instruction to move it
+        tmplInstructions.push(phIndex | I18nInstructions.Expression);
+        phVisited.push(value);
+      } else {
+        // It is a closing tag
+        tmplInstructions.push(I18nInstructions.CloseNode);
+
+        if (tmplIndex > 0) {
+          openedTagCount--;
+
+          // If we have reached the closing tag for this template, exit the loop
+          if (openedTagCount === 0) {
+            break;
+          }
+        }
+      }
+
+      if (phIndex !== undefined && phIndex > maxIndex) {
+        maxIndex = phIndex;
+      }
+
+      if (templateRoots) {
+        const newTmplIndex = templateRoots.indexOf(value) + 1;
+        if (newTmplIndex !== 0 && newTmplIndex !== tmplIndex) {
+          partIndex = generateMappingInstructions(
+              newTmplIndex, partIndex, translationParts, instructions, elements, expressions,
+              templateRoots, lastChildIndex);
+        }
+      }
+
+    } else if (value) {
+      // It's a non-empty string, create a text node
+      tmplInstructions.push(I18nInstructions.Text, value);
+    }
+  }
+
+  // Add instructions to remove elements that are not used in the translation
+  if (elements) {
+    const tmplElements = elements[tmplIndex];
+
+    if (tmplElements) {
+      const phKeys = Object.keys(tmplElements);
+
+      for (let i = 0; i < phKeys.length; i++) {
+        const ph = phKeys[i];
+
+        if (phVisited.indexOf(ph) === -1) {
+          let index = tmplElements[ph];
+          // Add an instruction to remove the element
+          tmplInstructions.push(index | I18nInstructions.RemoveNode);
+
+          if (index > maxIndex) {
+            maxIndex = index;
+          }
+        }
+      }
+    }
+  }
+
+  // Add instructions to remove expressions that are not used in the translation
+  if (expressions) {
+    const tmplExpressions = expressions[tmplIndex];
+
+    if (tmplExpressions) {
+      const phKeys = Object.keys(tmplExpressions);
+
+      for (let i = 0; i < phKeys.length; i++) {
+        const ph = phKeys[i];
+
+        if (phVisited.indexOf(ph) === -1) {
+          let index = tmplExpressions[ph];
+          if (ngDevMode) {
+            assertLessThan(
+                index.toString(2).length, 28, `Index ${index} is too big and will overflow`);
+          }
+          // Add an instruction to remove the expression
+          tmplInstructions.push(index | I18nInstructions.RemoveNode);
+
+          if (index > maxIndex) {
+            maxIndex = index;
+          }
+        }
+      }
+    }
+  }
+
+  if (tmplIndex === 0 && typeof lastChildIndex === 'number') {
+    // The current parent is an ng-container and it has more children after the translation that we
+    // need to append to keep the order of the DOM nodes correct
+    for (let i = maxIndex + 1; i <= lastChildIndex; i++) {
+      if (ngDevMode) {
+        assertLessThan(i.toString(2).length, 28, `Index ${i} is too big and will overflow`);
+      }
+      tmplInstructions.push(i | I18nInstructions.Any);
+    }
+  }
+
+  return partIndex;
+}
+
+function appendI18nNode(node: LNode, parentNode: LNode, previousNode: LNode) {
+  if (ngDevMode) {
+    ngDevMode.rendererMoveNode++;
+  }
+
+  const viewData = _getViewData();
+
+  appendChild(parentNode, node.native || null, viewData);
+
+  // On first pass, re-organize node tree to put this node in the correct position.
+  const firstTemplatePass = node.view[TVIEW].firstTemplatePass;
+  if (firstTemplatePass) {
+    if (previousNode === parentNode && node.tNode !== parentNode.tNode.child) {
+      node.tNode.next = parentNode.tNode.child;
+      parentNode.tNode.child = node.tNode;
+    } else if (previousNode !== parentNode && node.tNode !== previousNode.tNode.next) {
+      node.tNode.next = previousNode.tNode.next;
+      previousNode.tNode.next = node.tNode;
+    } else {
+      node.tNode.next = null;
+    }
+
+    if (parentNode.view === node.view) node.tNode.parent = parentNode.tNode as TElementNode;
+  }
+
+  // Template containers also have a comment node for the `ViewContainerRef` that should be moved
+  if (node.tNode.type === TNodeType.Container && node.dynamicLContainerNode) {
+    appendChild(parentNode, node.dynamicLContainerNode.native || null, viewData);
+    if (firstTemplatePass) {
+      node.tNode.dynamicContainerNode = node.dynamicLContainerNode.tNode;
+      node.dynamicLContainerNode.tNode.parent = node.tNode as TContainerNode;
+    }
+    return node.dynamicLContainerNode;
+  }
+
+  return node;
+}
+
+/**
+ * Takes a list of instructions generated by `i18nMapping()` to transform the template accordingly.
+ *
+ * @param startIndex Index of the first element to translate (for instance the first child of the
+ * element with the i18n attribute).
+ * @param instructions The list of instructions to apply on the current view.
+ */
+export function i18nApply(startIndex: number, instructions: I18nInstruction[]): void {
+  const viewData = _getViewData();
+  if (ngDevMode) {
+    assertEqual(viewData[BINDING_INDEX], -1, 'i18nApply should be called before any binding');
+  }
+
+  if (!instructions) {
+    return;
+  }
+
+  const renderer = getRenderer();
+  let localParentNode: LNode = getParentLNode(load(startIndex)) || getPreviousOrParentNode();
+  let localPreviousNode: LNode = localParentNode;
+  resetApplicationState();  // We don't want to add to the tree with the wrong previous node
+
+  for (let i = 0; i < instructions.length; i++) {
+    const instruction = instructions[i] as number;
+    switch (instruction & I18nInstructions.InstructionMask) {
+      case I18nInstructions.Element:
+        const element: LNode = load(instruction & I18nInstructions.IndexMask);
+        localPreviousNode = appendI18nNode(element, localParentNode, localPreviousNode);
+        localParentNode = element;
+        break;
+      case I18nInstructions.Expression:
+      case I18nInstructions.TemplateRoot:
+      case I18nInstructions.Any:
+        const node: LNode = load(instruction & I18nInstructions.IndexMask);
+        localPreviousNode = appendI18nNode(node, localParentNode, localPreviousNode);
+        break;
+      case I18nInstructions.Text:
+        if (ngDevMode) {
+          ngDevMode.rendererCreateTextNode++;
+        }
+        const value = instructions[++i];
+        const textRNode = createTextNode(value, renderer);
+        // If we were to only create a `RNode` then projections won't move the text.
+        // Create text node at the current end of viewData. Must subtract header offset because
+        // createLNode takes a raw index (not adjusted by header offset).
+        const textLNode =
+            createLNode(viewData.length - HEADER_OFFSET, TNodeType.Element, textRNode, null, null);
+        localPreviousNode = appendI18nNode(textLNode, localParentNode, localPreviousNode);
+        resetApplicationState();
+        break;
+      case I18nInstructions.CloseNode:
+        localPreviousNode = localParentNode;
+        localParentNode = getParentLNode(localParentNode) !;
+        break;
+      case I18nInstructions.RemoveNode:
+        if (ngDevMode) {
+          ngDevMode.rendererRemoveNode++;
+        }
+        const index = instruction & I18nInstructions.IndexMask;
+        const removedNode: LNode|LContainerNode = load(index);
+        const parentNode = getParentLNode(removedNode) !;
+        removeChild(parentNode, removedNode.native || null, viewData);
+
+        // For template containers we also need to remove their `ViewContainerRef` from the DOM
+        if (removedNode.tNode.type === TNodeType.Container && removedNode.dynamicLContainerNode) {
+          removeChild(parentNode, removedNode.dynamicLContainerNode.native || null, viewData);
+          removedNode.dynamicLContainerNode.tNode.detached = true;
+          removedNode.dynamicLContainerNode.data[RENDER_PARENT] = null;
+        }
+        break;
+    }
+  }
+}
+
+/**
+ * Takes a translation string and the initial list of expressions and returns a list of instructions
+ * that will be used to translate an attribute.
+ * Even indexes contain static strings, while odd indexes contain the index of the expression whose
+ * value will be concatenated into the final translation.
+ */
+export function i18nExpMapping(
+    translation: string, placeholders: PlaceholderMap): I18nExpInstruction[] {
+  const staticText: I18nExpInstruction[] = translation.split(i18nTagRegex);
+  // odd indexes are placeholders
+  for (let i = 1; i < staticText.length; i += 2) {
+    staticText[i] = placeholders[staticText[i]];
+  }
+  return staticText;
+}
+
+/**
+ * Checks if the value of an expression has changed and replaces it by its value in a translation,
+ * or returns NO_CHANGE.
+ *
+ * @param instructions A list of instructions that will be used to translate an attribute.
+ * @param v0 value checked for change.
+ *
+ * @returns The concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
+ */
+export function i18nInterpolation1(instructions: I18nExpInstruction[], v0: any): string|NO_CHANGE {
+  const different = bindingUpdated(v0);
+
+  if (!different) {
+    return NO_CHANGE;
+  }
+
+  let res = '';
+  for (let i = 0; i < instructions.length; i++) {
+    // Odd indexes are bindings
+    if (i & 1) {
+      res += stringify(v0);
+    } else {
+      res += instructions[i];
+    }
+  }
+
+  return res;
+}
+
+/**
+ * Checks if the values of up to 2 expressions have changed and replaces them by their values in a
+ * translation, or returns NO_CHANGE.
+ *
+ * @param instructions A list of instructions that will be used to translate an attribute.
+ * @param v0 value checked for change.
+ * @param v1 value checked for change.
+ *
+ * @returns The concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
+ */
+export function i18nInterpolation2(instructions: I18nExpInstruction[], v0: any, v1: any): string|
+    NO_CHANGE {
+  const different = bindingUpdated2(v0, v1);
+
+  if (!different) {
+    return NO_CHANGE;
+  }
+
+  let res = '';
+  for (let i = 0; i < instructions.length; i++) {
+    // Odd indexes are bindings
+    if (i & 1) {
+      // Extract bits
+      const idx = instructions[i] as number;
+      const b1 = idx & 1;
+      // Get the value from the argument vx where x = idx
+      const value = b1 ? v1 : v0;
+
+      res += stringify(value);
+    } else {
+      res += instructions[i];
+    }
+  }
+
+  return res;
+}
+
+/**
+ * Checks if the values of up to 3 expressions have changed and replaces them by their values in a
+ * translation, or returns NO_CHANGE.
+ *
+ * @param instructions A list of instructions that will be used to translate an attribute.
+ * @param v0 value checked for change.
+ * @param v1 value checked for change.
+ * @param v2 value checked for change.
+ *
+ * @returns The concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
+ */
+export function i18nInterpolation3(
+    instructions: I18nExpInstruction[], v0: any, v1: any, v2: any): string|NO_CHANGE {
+  let different = bindingUpdated2(v0, v1);
+  different = bindingUpdated(v2) || different;
+
+  if (!different) {
+    return NO_CHANGE;
+  }
+
+  let res = '';
+  for (let i = 0; i < instructions.length; i++) {
+    // Odd indexes are bindings
+    if (i & 1) {
+      // Extract bits
+      const idx = instructions[i] as number;
+      const b2 = idx & 2;
+      const b1 = idx & 1;
+      // Get the value from the argument vx where x = idx
+      const value = b2 ? v2 : (b1 ? v1 : v0);
+
+      res += stringify(value);
+    } else {
+      res += instructions[i];
+    }
+  }
+
+  return res;
+}
+
+/**
+ * Checks if the values of up to 4 expressions have changed and replaces them by their values in a
+ * translation, or returns NO_CHANGE.
+ *
+ * @param instructions A list of instructions that will be used to translate an attribute.
+ * @param v0 value checked for change.
+ * @param v1 value checked for change.
+ * @param v2 value checked for change.
+ * @param v3 value checked for change.
+ *
+ * @returns The concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
+ */
+export function i18nInterpolation4(
+    instructions: I18nExpInstruction[], v0: any, v1: any, v2: any, v3: any): string|NO_CHANGE {
+  const different = bindingUpdated4(v0, v1, v2, v3);
+
+  if (!different) {
+    return NO_CHANGE;
+  }
+
+  let res = '';
+  for (let i = 0; i < instructions.length; i++) {
+    // Odd indexes are bindings
+    if (i & 1) {
+      // Extract bits
+      const idx = instructions[i] as number;
+      const b2 = idx & 2;
+      const b1 = idx & 1;
+      // Get the value from the argument vx where x = idx
+      const value = b2 ? (b1 ? v3 : v2) : (b1 ? v1 : v0);
+
+      res += stringify(value);
+    } else {
+      res += instructions[i];
+    }
+  }
+
+  return res;
+}
+
+/**
+ * Checks if the values of up to 5 expressions have changed and replaces them by their values in a
+ * translation, or returns NO_CHANGE.
+ *
+ * @param instructions A list of instructions that will be used to translate an attribute.
+ * @param v0 value checked for change.
+ * @param v1 value checked for change.
+ * @param v2 value checked for change.
+ * @param v3 value checked for change.
+ * @param v4 value checked for change.
+ *
+ * @returns The concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
+ */
+export function i18nInterpolation5(
+    instructions: I18nExpInstruction[], v0: any, v1: any, v2: any, v3: any, v4: any): string|
+    NO_CHANGE {
+  let different = bindingUpdated4(v0, v1, v2, v3);
+  different = bindingUpdated(v4) || different;
+
+  if (!different) {
+    return NO_CHANGE;
+  }
+
+  let res = '';
+  for (let i = 0; i < instructions.length; i++) {
+    // Odd indexes are bindings
+    if (i & 1) {
+      // Extract bits
+      const idx = instructions[i] as number;
+      const b4 = idx & 4;
+      const b2 = idx & 2;
+      const b1 = idx & 1;
+      // Get the value from the argument vx where x = idx
+      const value = b4 ? v4 : (b2 ? (b1 ? v3 : v2) : (b1 ? v1 : v0));
+
+      res += stringify(value);
+    } else {
+      res += instructions[i];
+    }
+  }
+
+  return res;
+}
+
+/**
+ * Checks if the values of up to 6 expressions have changed and replaces them by their values in a
+ * translation, or returns NO_CHANGE.
+ *
+ * @param instructions A list of instructions that will be used to translate an attribute.
+ * @param v0 value checked for change.
+ * @param v1 value checked for change.
+ * @param v2 value checked for change.
+ * @param v3 value checked for change.
+ * @param v4 value checked for change.
+ * @param v5 value checked for change.
+ *
+ * @returns The concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
+ */ export function
+i18nInterpolation6(
+    instructions: I18nExpInstruction[], v0: any, v1: any, v2: any, v3: any, v4: any, v5: any):
+    string|NO_CHANGE {
+  let different = bindingUpdated4(v0, v1, v2, v3);
+  different = bindingUpdated2(v4, v5) || different;
+
+  if (!different) {
+    return NO_CHANGE;
+  }
+
+  let res = '';
+  for (let i = 0; i < instructions.length; i++) {
+    // Odd indexes are bindings
+    if (i & 1) {
+      // Extract bits
+      const idx = instructions[i] as number;
+      const b4 = idx & 4;
+      const b2 = idx & 2;
+      const b1 = idx & 1;
+      // Get the value from the argument vx where x = idx
+      const value = b4 ? (b1 ? v5 : v4) : (b2 ? (b1 ? v3 : v2) : (b1 ? v1 : v0));
+
+      res += stringify(value);
+    } else {
+      res += instructions[i];
+    }
+  }
+
+  return res;
+}
+
+/**
+ * Checks if the values of up to 7 expressions have changed and replaces them by their values in a
+ * translation, or returns NO_CHANGE.
+ *
+ * @param instructions A list of instructions that will be used to translate an attribute.
+ * @param v0 value checked for change.
+ * @param v1 value checked for change.
+ * @param v2 value checked for change.
+ * @param v3 value checked for change.
+ * @param v4 value checked for change.
+ * @param v5 value checked for change.
+ * @param v6 value checked for change.
+ *
+ * @returns The concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
+ */
+export function i18nInterpolation7(
+    instructions: I18nExpInstruction[], v0: any, v1: any, v2: any, v3: any, v4: any, v5: any,
+    v6: any): string|NO_CHANGE {
+  let different = bindingUpdated4(v0, v1, v2, v3);
+  different = bindingUpdated2(v4, v5) || different;
+  different = bindingUpdated(v6) || different;
+
+  if (!different) {
+    return NO_CHANGE;
+  }
+
+  let res = '';
+  for (let i = 0; i < instructions.length; i++) {
+    // Odd indexes are bindings
+    if (i & 1) {
+      // Extract bits
+      const idx = instructions[i] as number;
+      const b4 = idx & 4;
+      const b2 = idx & 2;
+      const b1 = idx & 1;
+      // Get the value from the argument vx where x = idx
+      const value = b4 ? (b2 ? v6 : (b1 ? v5 : v4)) : (b2 ? (b1 ? v3 : v2) : (b1 ? v1 : v0));
+
+      res += stringify(value);
+    } else {
+      res += instructions[i];
+    }
+  }
+
+  return res;
+}
+
+/**
+ * Checks if the values of up to 8 expressions have changed and replaces them by their values in a
+ * translation, or returns NO_CHANGE.
+ *
+ * @param instructions A list of instructions that will be used to translate an attribute.
+ * @param v0 value checked for change.
+ * @param v1 value checked for change.
+ * @param v2 value checked for change.
+ * @param v3 value checked for change.
+ * @param v4 value checked for change.
+ * @param v5 value checked for change.
+ * @param v6 value checked for change.
+ * @param v7 value checked for change.
+ *
+ * @returns The concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
+ */
+export function i18nInterpolation8(
+    instructions: I18nExpInstruction[], v0: any, v1: any, v2: any, v3: any, v4: any, v5: any,
+    v6: any, v7: any): string|NO_CHANGE {
+  let different = bindingUpdated4(v0, v1, v2, v3);
+  different = bindingUpdated4(v4, v5, v6, v7) || different;
+
+  if (!different) {
+    return NO_CHANGE;
+  }
+
+  let res = '';
+  for (let i = 0; i < instructions.length; i++) {
+    // Odd indexes are bindings
+    if (i & 1) {
+      // Extract bits
+      const idx = instructions[i] as number;
+      const b4 = idx & 4;
+      const b2 = idx & 2;
+      const b1 = idx & 1;
+      // Get the value from the argument vx where x = idx
+      const value =
+          b4 ? (b2 ? (b1 ? v7 : v6) : (b1 ? v5 : v4)) : (b2 ? (b1 ? v3 : v2) : (b1 ? v1 : v0));
+
+      res += stringify(value);
+    } else {
+      res += instructions[i];
+    }
+  }
+
+  return res;
+}
+
+/**
+ * Create a translated interpolation binding with a variable number of expressions.
+ *
+ * If there are 1 to 8 expressions then `i18nInterpolation()` should be used instead. It is faster
+ * because there is no need to create an array of expressions and iterate over it.
+ *
+ * @returns The concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
+ */
+export function i18nInterpolationV(instructions: I18nExpInstruction[], values: any[]): string|
+    NO_CHANGE {
+  let different = false;
+  for (let i = 0; i < values.length; i++) {
+    // Check if bindings have changed
+    bindingUpdated(values[i]) && (different = true);
+  }
+
+  if (!different) {
+    return NO_CHANGE;
+  }
+
+  let res = '';
+  for (let i = 0; i < instructions.length; i++) {
+    // Odd indexes are placeholders
+    if (i & 1) {
+      res += stringify(values[instructions[i] as number]);
+    } else {
+      res += instructions[i];
+    }
+  }
+
+  return res;
+}
diff --git a/packages/core/src/render3/index.ts b/packages/core/src/render3/index.ts
new file mode 100644
index 000000000000..114bf8224cb4
--- /dev/null
+++ b/packages/core/src/render3/index.ts
@@ -0,0 +1,178 @@
+/**
+ * @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 {LifecycleHooksFeature, getHostElement, getRenderedText, renderComponent, whenRendered} from './component';
+import {defineBase, defineComponent, defineDirective, defineNgModule, definePipe} from './definition';
+import {InheritDefinitionFeature} from './features/inherit_definition_feature';
+import {NgOnChangesFeature} from './features/ng_onchanges_feature';
+import {PublicFeature} from './features/public_feature';
+import {BaseDef, ComponentDef, ComponentDefInternal, ComponentTemplate, ComponentType, DirectiveDef, DirectiveDefFlags, DirectiveDefInternal, DirectiveType, PipeDef} from './interfaces/definition';
+
+export {ComponentFactory, ComponentFactoryResolver, ComponentRef, WRAP_RENDERER_FACTORY2} from './component_ref';
+export {Render3DebugRendererFactory2} from './debug';
+export {QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF, directiveInject, getFactoryOf, getInheritedFactory, injectAttribute, injectChangeDetectorRef, injectComponentFactoryResolver, injectElementRef, injectTemplateRef, injectViewContainerRef} from './di';
+export {RenderFlags} from './interfaces/definition';
+export {CssSelectorList} from './interfaces/projection';
+
+// Naming scheme:
+// - Capital letters are for creating things: T(Text), E(Element), D(Directive), V(View),
+// C(Container), L(Listener)
+// - lower case letters are for binding: b(bind)
+// - lower case letters are for binding target: p(property), a(attribute), k(class), s(style),
+// i(input)
+// - lower case letters for guarding life cycle hooks: l(lifeCycle)
+// - lower case for closing: c(containerEnd), e(elementEnd), v(viewEnd)
+// clang-format off
+export {
+
+  NO_CHANGE as NC,
+
+  bind as b,
+  interpolation1 as i1,
+  interpolation2 as i2,
+  interpolation3 as i3,
+  interpolation4 as i4,
+  interpolation5 as i5,
+  interpolation6 as i6,
+  interpolation7 as i7,
+  interpolation8 as i8,
+  interpolationV as iV,
+
+  container as C,
+  containerRefreshStart as cR,
+  containerRefreshEnd as cr,
+
+  nextContext as x,
+
+  element as Ee,
+  elementAttribute as a,
+  elementClassProp as cp,
+  elementEnd as e,
+  elementProperty as p,
+  elementStart as E,
+
+  elementContainerStart as EC,
+  elementContainerEnd as eC,
+
+  elementStyling as s,
+  elementStylingMap as sm,
+  elementStyleProp as sp,
+  elementStylingApply as sa,
+
+  getCurrentView as gV,
+  restoreView as rV,
+
+  listener as L,
+  store as st,
+  load as ld,
+  loadDirective as d,
+
+  namespaceHTML as NH,
+  namespaceMathML as NM,
+  namespaceSVG as NS,
+
+  projection as P,
+  projectionDef as pD,
+
+  text as T,
+  textBinding as t,
+
+  reference as r,
+
+  reserveSlots as rS,
+
+  embeddedViewStart as V,
+  embeddedViewEnd as v,
+  detectChanges,
+  markDirty,
+  tick,
+} from './instructions';
+
+export {
+  i18nApply as iA,
+  i18nMapping as iM,
+  i18nInterpolation1 as iI1,
+  i18nInterpolation2 as iI2,
+  i18nInterpolation3 as iI3,
+  i18nInterpolation4 as iI4,
+  i18nInterpolation5 as iI5,
+  i18nInterpolation6 as iI6,
+  i18nInterpolation7 as iI7,
+  i18nInterpolation8 as iI8,
+  i18nInterpolationV as iIV,
+  i18nExpMapping as iEM,
+  I18nInstruction,
+  I18nExpInstruction
+} from './i18n';
+
+export {NgModuleFactory, NgModuleRef, NgModuleType} from './ng_module_ref';
+
+export {
+    AttributeMarker
+} from './interfaces/node';
+
+export {
+  pipe as Pp,
+  pipeBind1 as pb1,
+  pipeBind2 as pb2,
+  pipeBind3 as pb3,
+  pipeBind4 as pb4,
+  pipeBindV as pbV,
+} from './pipe';
+
+export {
+  QueryList,
+  query as Q,
+  queryRefresh as qR,
+} from './query';
+export  {
+  registerContentQuery as Qr,
+  loadQueryList as ql,
+} from './instructions';
+
+export {
+  pureFunction0 as f0,
+  pureFunction1 as f1,
+  pureFunction2 as f2,
+  pureFunction3 as f3,
+  pureFunction4 as f4,
+  pureFunction5 as f5,
+  pureFunction6 as f6,
+  pureFunction7 as f7,
+  pureFunction8 as f8,
+  pureFunctionV as fV,
+} from './pure_function';
+
+
+// clang-format on
+
+export {
+  BaseDef,
+  ComponentDef,
+  ComponentDefInternal,
+  ComponentTemplate,
+  ComponentType,
+  DirectiveDef,
+  DirectiveDefFlags,
+  DirectiveDefInternal,
+  DirectiveType,
+  NgOnChangesFeature,
+  InheritDefinitionFeature,
+  PublicFeature,
+  PipeDef,
+  LifecycleHooksFeature,
+  defineComponent,
+  defineDirective,
+  defineNgModule,
+  defineBase,
+  definePipe,
+  getHostElement,
+  getRenderedText,
+  renderComponent,
+  whenRendered,
+};
diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts
new file mode 100644
index 000000000000..b5848357b2b8
--- /dev/null
+++ b/packages/core/src/render3/instructions.ts
@@ -0,0 +1,2852 @@
+/**
+ * @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 './ng_dev_mode';
+
+import {QueryList} from '../linker';
+import {Sanitizer} from '../sanitization/security';
+import {StyleSanitizeFn} from '../sanitization/style_sanitizer';
+
+import {assertDefined, assertEqual, assertLessThan, assertNotDefined, assertNotEqual} from './assert';
+import {throwCyclicDependencyError, throwErrorIfNoChangesMode, throwMultipleComponentError} from './errors';
+import {executeHooks, executeInitHooks, queueInitHooks, queueLifecycleHooks} from './hooks';
+import {ACTIVE_INDEX, LContainer, RENDER_PARENT, VIEWS} from './interfaces/container';
+import {ComponentDefInternal, ComponentQuery, ComponentTemplate, DirectiveDefInternal, DirectiveDefListOrFactory, InitialStylingFlags, PipeDefListOrFactory, RenderFlags} from './interfaces/definition';
+import {LInjector} from './interfaces/injector';
+import {AttributeMarker, InitialInputData, InitialInputs, LContainerNode, LElementContainerNode, LElementNode, LNode, LProjectionNode, LTextNode, LViewNode, PropertyAliasValue, PropertyAliases, TAttributes, TContainerNode, TElementNode, TNode, TNodeFlags, TNodeType} from './interfaces/node';
+import {CssSelectorList, NG_PROJECT_AS_ATTR_NAME} from './interfaces/projection';
+import {LQueries} from './interfaces/query';
+import {ProceduralRenderer3, RComment, RElement, RText, Renderer3, RendererFactory3, RendererStyleFlags3, isProceduralRenderer} from './interfaces/renderer';
+import {BINDING_INDEX, CLEANUP, CONTENT_QUERIES, CONTEXT, CurrentMatchesList, DECLARATION_VIEW, DIRECTIVES, FLAGS, HEADER_OFFSET, HOST_NODE, INJECTOR, LViewData, LViewFlags, NEXT, OpaqueViewState, PARENT, QUERIES, RENDERER, RootContext, SANITIZER, TAIL, TData, TVIEW, TView} from './interfaces/view';
+import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
+import {appendChild, appendProjectedNode, canInsertNativeNode, createTextNode, findComponentHost, getChildLNode, getLViewChild, getNextLNode, getParentLNode, insertView, removeView} from './node_manipulation';
+import {isNodeMatchingSelectorList, matchingSelectorIndex} from './node_selector_matcher';
+import {StylingContext, allocStylingContext, createStylingContextTemplate, renderStyling as renderElementStyles, updateClassProp as updateElementClassProp, updateStyleProp as updateElementStyleProp, updateStylingMap} from './styling';
+import {assertDataInRangeInternal, isDifferent, loadElementInternal, loadInternal, stringify} from './util';
+import {ViewRef} from './view_ref';
+
+/**
+ * Directive (D) sets a property on all component instances using this constant as a key and the
+ * component's host node (LElement) as the value. This is used in methods like detectChanges to
+ * facilitate jumping from an instance to the host node.
+ */
+export const NG_HOST_SYMBOL = '__ngHostLNode__';
+
+/**
+ * A permanent marker promise which signifies that the current CD tree is
+ * clean.
+ */
+const _CLEAN_PROMISE = Promise.resolve(null);
+
+/**
+ * Function used to sanitize the value before writing it into the renderer.
+ */
+export type SanitizerFn = (value: any) => string;
+
+/**
+ * Directive and element indices for top-level directive.
+ *
+ * Saved here to avoid re-instantiating an array on every change detection run.
+ *
+ * Note: Element is not actually stored at index 0 because of the LViewData
+ * header, but the host bindings function expects an index that is NOT adjusted
+ * because it will ultimately be fed to instructions like elementProperty.
+ */
+const _ROOT_DIRECTIVE_INDICES = [0, 0];
+
+/**
+ * TView.data needs to fill the same number of slots as the LViewData header
+ * so the indices of nodes are consistent between LViewData and TView.data.
+ *
+ * It's much faster to keep a blueprint of the pre-filled array and slice it
+ * than it is to create a new array and fill it each time a TView is created.
+ */
+const HEADER_FILLER = new Array(HEADER_OFFSET).fill(null);
+
+/**
+ * Token set in currentMatches while dependencies are being resolved.
+ *
+ * If we visit a directive that has a value set to CIRCULAR, we know we've
+ * already seen it, and thus have a circular dependency.
+ */
+export const CIRCULAR = '__CIRCULAR__';
+
+/**
+ * This property gets set before entering a template.
+ *
+ * This renderer can be one of two varieties of Renderer3:
+ *
+ * - ObjectedOrientedRenderer3
+ *
+ * This is the native browser API style, e.g. operations are methods on individual objects
+ * like HTMLElement. With this style, no additional code is needed as a facade (reducing payload
+ * size).
+ *
+ * - ProceduralRenderer3
+ *
+ * In non-native browser environments (e.g. platforms such as web-workers), this is the facade
+ * that enables element manipulation. This also facilitates backwards compatibility with
+ * Renderer2.
+ */
+let renderer: Renderer3;
+
+export function getRenderer(): Renderer3 {
+  // top level variables should not be exported for performance reasons (PERF_NOTES.md)
+  return renderer;
+}
+
+let rendererFactory: RendererFactory3;
+
+export function getRendererFactory(): RendererFactory3 {
+  // top level variables should not be exported for performance reasons (PERF_NOTES.md)
+  return rendererFactory;
+}
+
+let currentElementNode: LElementNode|null = null;
+
+export function getCurrentSanitizer(): Sanitizer|null {
+  return viewData && viewData[SANITIZER];
+}
+
+/**
+ * Returns the current OpaqueViewState instance.
+ *
+ * Used in conjunction with the restoreView() instruction to save a snapshot
+ * of the current view and restore it when listeners are invoked. This allows
+ * walking the declaration view tree in listeners to get vars from parent views.
+ */
+export function getCurrentView(): OpaqueViewState {
+  return viewData as any as OpaqueViewState;
+}
+
+/**
+ * Restores `contextViewData` to the given OpaqueViewState instance.
+ *
+ * Used in conjunction with the getCurrentView() instruction to save a snapshot
+ * of the current view and restore it when listeners are invoked. This allows
+ * walking the declaration view tree in listeners to get vars from parent views.
+ *
+ * @param viewToRestore The OpaqueViewState instance to restore.
+ */
+export function restoreView(viewToRestore: OpaqueViewState) {
+  contextViewData = viewToRestore as any as LViewData;
+}
+
+/** Used to set the parent property when nodes are created. */
+let previousOrParentNode: LNode;
+
+export function getPreviousOrParentNode(): LNode {
+  // top level variables should not be exported for performance reasons (PERF_NOTES.md)
+  return previousOrParentNode;
+}
+
+/**
+ * If `isParent` is:
+ *  - `true`: then `previousOrParentNode` points to a parent node.
+ *  - `false`: then `previousOrParentNode` points to previous node (sibling).
+ */
+let isParent: boolean;
+
+let tView: TView;
+
+let currentQueries: LQueries|null;
+
+/**
+ * Query instructions can ask for "current queries" in 2 different cases:
+ * - when creating view queries (at the root of a component view, before any node is created - in
+ * this case currentQueries points to view queries)
+ * - when creating content queries (inb this previousOrParentNode points to a node on which we
+ * create content queries).
+ */
+export function getOrCreateCurrentQueries(
+    QueryType: {new (parent: null, shallow: null, deep: null): LQueries}): LQueries {
+  const tNode = previousOrParentNode.tNode;
+
+  // if this is the first content query on a node, any existing LQueries needs to be cloned
+  // in subsequent template passes, the cloning occurs before directive instantiation.
+  if (previousOrParentNode.data !== viewData && !isContentQueryHost(tNode)) {
+    currentQueries && (currentQueries = currentQueries.clone());
+    tNode.flags |= TNodeFlags.hasContentQuery;
+  }
+
+  return currentQueries || (currentQueries = new QueryType(null, null, null));
+}
+
+/**
+ * This property gets set before entering a template.
+ */
+let creationMode: boolean;
+
+export function getCreationMode(): boolean {
+  // top level variables should not be exported for performance reasons (PERF_NOTES.md)
+  return creationMode;
+}
+
+/**
+ * State of the current view being processed.
+ *
+ * An array of nodes (text, element, container, etc), pipes, their bindings, and
+ * any local variables that need to be stored between invocations.
+ */
+let viewData: LViewData;
+
+/**
+ * Internal function that returns the current LViewData instance.
+ *
+ * The getCurrentView() instruction should be used for anything public.
+ */
+export function _getViewData(): LViewData {
+  // top level variables should not be exported for performance reasons (PERF_NOTES.md)
+  return viewData;
+}
+
+/**
+ * The last viewData retrieved by nextContext().
+ * Allows building nextContext() and reference() calls.
+ *
+ * e.g. const inner = x().$implicit; const outer = x().$implicit;
+ */
+let contextViewData: LViewData = null !;
+
+/**
+ * An array of directive instances in the current view.
+ *
+ * These must be stored separately from LNodes because their presence is
+ * unknown at compile-time and thus space cannot be reserved in data[].
+ */
+let directives: any[]|null;
+
+function getCleanup(view: LViewData): any[] {
+  // top level variables should not be exported for performance reasons (PERF_NOTES.md)
+  return view[CLEANUP] || (view[CLEANUP] = []);
+}
+
+function getTViewCleanup(view: LViewData): any[] {
+  return view[TVIEW].cleanup || (view[TVIEW].cleanup = []);
+}
+/**
+ * In this mode, any changes in bindings will throw an ExpressionChangedAfterChecked error.
+ *
+ * Necessary to support ChangeDetectorRef.checkNoChanges().
+ */
+let checkNoChangesMode = false;
+
+/** Whether or not this is the first time the current view has been processed. */
+let firstTemplatePass = true;
+
+const enum BindingDirection {
+  Input,
+  Output,
+}
+
+/**
+ * Swap the current state with a new state.
+ *
+ * For performance reasons we store the state in the top level of the module.
+ * This way we minimize the number of properties to read. Whenever a new view
+ * is entered we have to store the state for later, and when the view is
+ * exited the state has to be restored
+ *
+ * @param newView New state to become active
+ * @param host Element to which the View is a child of
+ * @returns the previous state;
+ */
+export function enterView(newView: LViewData, host: LElementNode | LViewNode | null): LViewData {
+  const oldView: LViewData = viewData;
+  directives = newView && newView[DIRECTIVES];
+  tView = newView && newView[TVIEW];
+
+  creationMode = newView && (newView[FLAGS] & LViewFlags.CreationMode) === LViewFlags.CreationMode;
+  firstTemplatePass = newView && tView.firstTemplatePass;
+
+  renderer = newView && newView[RENDERER];
+
+  if (host != null) {
+    previousOrParentNode = host;
+    isParent = true;
+  }
+
+  viewData = contextViewData = newView;
+  oldView && (oldView[QUERIES] = currentQueries);
+  currentQueries = newView && newView[QUERIES];
+
+  return oldView;
+}
+
+/**
+ * Used in lieu of enterView to make it clear when we are exiting a child view. This makes
+ * the direction of traversal (up or down the view tree) a bit clearer.
+ *
+ * @param newView New state to become active
+ * @param creationOnly An optional boolean to indicate that the view was processed in creation mode
+ * only, i.e. the first update will be done later. Only possible for dynamically created views.
+ */
+export function leaveView(newView: LViewData, creationOnly?: boolean): void {
+  if (!creationOnly) {
+    if (!checkNoChangesMode) {
+      executeHooks(directives !, tView.viewHooks, tView.viewCheckHooks, creationMode);
+    }
+    // Views are clean and in update mode after being checked, so these bits are cleared
+    viewData[FLAGS] &= ~(LViewFlags.CreationMode | LViewFlags.Dirty);
+  }
+  viewData[FLAGS] |= LViewFlags.RunInit;
+  viewData[BINDING_INDEX] = -1;
+  enterView(newView, null);
+}
+
+/**
+ * Refreshes the view, executing the following steps in that order:
+ * triggers init hooks, refreshes dynamic embedded views, triggers content hooks, sets host
+ * bindings, refreshes child components.
+ * Note: view hooks are triggered later when leaving the view.
+ */
+function refreshDescendantViews() {
+  // This needs to be set before children are processed to support recursive components
+  tView.firstTemplatePass = firstTemplatePass = false;
+
+  if (!checkNoChangesMode) {
+    executeInitHooks(viewData, tView, creationMode);
+  }
+  refreshDynamicEmbeddedViews(viewData);
+
+  // Content query results must be refreshed before content hooks are called.
+  refreshContentQueries(tView);
+
+  if (!checkNoChangesMode) {
+    executeHooks(directives !, tView.contentHooks, tView.contentCheckHooks, creationMode);
+  }
+
+  setHostBindings(tView.hostBindings);
+  refreshChildComponents(tView.components);
+}
+
+
+/** Sets the host bindings for the current view. */
+export function setHostBindings(bindings: number[] | null): void {
+  if (bindings != null) {
+    const defs = tView.directives !;
+    for (let i = 0; i < bindings.length; i += 2) {
+      const dirIndex = bindings[i];
+      const def = defs[dirIndex] as DirectiveDefInternal<any>;
+      def.hostBindings && def.hostBindings(dirIndex, bindings[i + 1]);
+    }
+  }
+}
+
+/** Refreshes content queries for all directives in the given view. */
+function refreshContentQueries(tView: TView): void {
+  if (tView.contentQueries != null) {
+    for (let i = 0; i < tView.contentQueries.length; i += 2) {
+      const directiveDefIdx = tView.contentQueries[i];
+      const directiveDef = tView.directives ![directiveDefIdx];
+
+      directiveDef.contentQueriesRefresh !(directiveDefIdx, tView.contentQueries[i + 1]);
+    }
+  }
+}
+
+/** Refreshes child components in the current view. */
+function refreshChildComponents(components: number[] | null): void {
+  if (components != null) {
+    for (let i = 0; i < components.length; i++) {
+      componentRefresh(components[i]);
+    }
+  }
+}
+
+export function executeInitAndContentHooks(): void {
+  if (!checkNoChangesMode) {
+    executeInitHooks(viewData, tView, creationMode);
+    executeHooks(directives !, tView.contentHooks, tView.contentCheckHooks, creationMode);
+  }
+}
+
+export function createLViewData<T>(
+    renderer: Renderer3, tView: TView, context: T | null, flags: LViewFlags,
+    sanitizer?: Sanitizer | null): LViewData {
+  return [
+    tView,                                                                       // tView
+    viewData,                                                                    // parent
+    null,                                                                        // next
+    null,                                                                        // queries
+    flags | LViewFlags.CreationMode | LViewFlags.Attached | LViewFlags.RunInit,  // flags
+    null !,                                                                      // hostNode
+    -1,                                                                          // bindingIndex
+    null,                                                                        // directives
+    null,                                                                        // cleanupInstances
+    context,                                                                     // context
+    viewData ? viewData[INJECTOR] : null,                                        // injector
+    renderer,                                                                    // renderer
+    sanitizer || null,                                                           // sanitizer
+    null,                                                                        // tail
+    -1,                                                                          // containerIndex
+    null,                                                                        // contentQueries
+    null                                                                         // declarationView
+  ];
+}
+
+/**
+ * Creation of LNode object is extracted to a separate function so we always create LNode object
+ * with the same shape
+ * (same properties assigned in the same order).
+ */
+export function createLNodeObject(
+    type: TNodeType, currentView: LViewData, parent: LNode | null,
+    native: RText | RElement | RComment | null,
+    state: any): LElementNode&LTextNode&LViewNode&LContainerNode&LProjectionNode {
+  return {
+    native: native as any,
+    view: currentView,
+    nodeInjector: parent ? parent.nodeInjector : null,
+    data: state,
+    tNode: null !,
+    dynamicLContainerNode: null
+  };
+}
+
+/**
+ * A common way of creating the LNode to make sure that all of them have same shape to
+ * keep the execution code monomorphic and fast.
+ *
+ * @param index The index at which the LNode should be saved (null if view, since they are not
+ * saved).
+ * @param type The type of LNode to create
+ * @param native The native element for this LNode, if applicable
+ * @param name The tag name of the associated native element, if applicable
+ * @param attrs Any attrs for the native element, if applicable
+ * @param data Any data that should be saved on the LNode
+ */
+export function createLNode(
+    index: number, type: TNodeType.Element, native: RElement | RText | null, name: string | null,
+    attrs: TAttributes | null, lViewData?: LViewData | null): LElementNode;
+export function createLNode(
+    index: number, type: TNodeType.View, native: null, name: null, attrs: null,
+    lViewData: LViewData): LViewNode;
+export function createLNode(
+    index: number, type: TNodeType.Container, native: RComment, name: string | null,
+    attrs: TAttributes | null, lContainer: LContainer): LContainerNode;
+export function createLNode(
+    index: number, type: TNodeType.Projection, native: null, name: null, attrs: TAttributes | null,
+    lProjection: null): LProjectionNode;
+export function createLNode(
+    index: number, type: TNodeType.ElementContainer, native: RComment, name: null,
+    attrs: TAttributes | null, data: null): LElementContainerNode;
+export function createLNode(
+    index: number, type: TNodeType, native: RText | RElement | RComment | null, name: string | null,
+    attrs: TAttributes | null, state?: null | LViewData | LContainer): LElementNode&LTextNode&
+    LViewNode&LContainerNode&LProjectionNode {
+  const parent = isParent ? previousOrParentNode :
+                            previousOrParentNode && getParentLNode(previousOrParentNode) !as LNode;
+  // Parents cannot cross component boundaries because components will be used in multiple places,
+  // so it's only set if the view is the same.
+  const tParent =
+      parent && parent.view === viewData ? parent.tNode as TElementNode | TContainerNode : null;
+
+  const isState = state != null;
+  const node = createLNodeObject(type, viewData, parent, native, isState ? state as any : null);
+
+  if (index === -1 || type === TNodeType.View) {
+    // View nodes are not stored in data because they can be added / removed at runtime (which
+    // would cause indices to change). Their TNodes are instead stored in TView.node.
+    node.tNode = (state ? (state as LViewData)[TVIEW].node : null) ||
+        createTNode(type, index, null, null, tParent, null);
+  } else {
+    const adjustedIndex = index + HEADER_OFFSET;
+
+    // This is an element or container or projection node
+    ngDevMode && assertDataNext(adjustedIndex);
+    const tData = tView.data;
+
+    viewData[adjustedIndex] = node;
+
+    // Every node adds a value to the static data array to avoid a sparse array
+    if (adjustedIndex >= tData.length) {
+      const tNode = tData[adjustedIndex] =
+          createTNode(type, adjustedIndex, name, attrs, tParent, null);
+      if (!isParent && previousOrParentNode) {
+        const previousTNode = previousOrParentNode.tNode;
+        previousTNode.next = tNode;
+        if (previousTNode.dynamicContainerNode) previousTNode.dynamicContainerNode.next = tNode;
+      }
+    }
+    node.tNode = tData[adjustedIndex] as TNode;
+
+    // Now link ourselves into the tree.
+    if (isParent) {
+      if (previousOrParentNode.tNode.child == null && previousOrParentNode.view === viewData ||
+          previousOrParentNode.tNode.type === TNodeType.View) {
+        // We are in the same view, which means we are adding content node to the parent View.
+        previousOrParentNode.tNode.child = node.tNode;
+      }
+    }
+  }
+
+  // View nodes and host elements need to set their host node (components set host nodes later)
+  if ((type & TNodeType.ViewOrElement) === TNodeType.ViewOrElement && isState) {
+    const lViewData = state as LViewData;
+    ngDevMode && assertNotDefined(
+                     lViewData[HOST_NODE], 'lViewData[HOST_NODE] should not have been initialized');
+    lViewData[HOST_NODE] = node;
+    if (firstTemplatePass) lViewData[TVIEW].node = node.tNode;
+  }
+
+  previousOrParentNode = node;
+  isParent = true;
+  return node;
+}
+
+
+//////////////////////////
+//// Render
+//////////////////////////
+
+/**
+ * Resets the application state.
+ */
+export function resetApplicationState() {
+  isParent = false;
+  previousOrParentNode = null !;
+}
+
+/**
+ *
+ * @param hostNode Existing node to render into.
+ * @param template Template function with the instructions.
+ * @param context to pass into the template.
+ * @param providedRendererFactory renderer factory to use
+ * @param host The host element node to use
+ * @param directives Directive defs that should be used for matching
+ * @param pipes Pipe defs that should be used for matching
+ */
+export function renderTemplate<T>(
+    hostNode: RElement, template: ComponentTemplate<T>, context: T,
+    providedRendererFactory: RendererFactory3, host: LElementNode | null,
+    directives?: DirectiveDefListOrFactory | null, pipes?: PipeDefListOrFactory | null,
+    sanitizer?: Sanitizer | null): LElementNode {
+  if (host == null) {
+    resetApplicationState();
+    rendererFactory = providedRendererFactory;
+    const tView = getOrCreateTView(template, directives || null, pipes || null, null);
+    host = createLNode(
+        -1, TNodeType.Element, hostNode, null, null,
+        createLViewData(
+            providedRendererFactory.createRenderer(null, null), tView, {}, LViewFlags.CheckAlways,
+            sanitizer));
+  }
+  const hostView = host.data !;
+  ngDevMode && assertDefined(hostView, 'Host node should have an LView defined in host.data.');
+  renderComponentOrTemplate(host, hostView, context, template);
+  return host;
+}
+
+/**
+ * Used for creating the LViewNode of a dynamic embedded view,
+ * either through ViewContainerRef.createEmbeddedView() or TemplateRef.createEmbeddedView().
+ * Such lViewNode will then be renderer with renderEmbeddedTemplate() (see below).
+ */
+export function createEmbeddedViewNode<T>(
+    tView: TView, context: T, declarationView: LViewData, renderer: Renderer3,
+    queries?: LQueries | null): LViewNode {
+  const _isParent = isParent;
+  const _previousOrParentNode = previousOrParentNode;
+  isParent = true;
+  previousOrParentNode = null !;
+
+  const lView =
+      createLViewData(renderer, tView, context, LViewFlags.CheckAlways, getCurrentSanitizer());
+  lView[DECLARATION_VIEW] = declarationView;
+
+  if (queries) {
+    lView[QUERIES] = queries.createView();
+  }
+  const viewNode = createLNode(-1, TNodeType.View, null, null, null, lView);
+
+  isParent = _isParent;
+  previousOrParentNode = _previousOrParentNode;
+  return viewNode;
+}
+
+/**
+ * Used for rendering embedded views (e.g. dynamically created views)
+ *
+ * Dynamically created views must store/retrieve their TViews differently from component views
+ * because their template functions are nested in the template functions of their hosts, creating
+ * closures. If their host template happens to be an embedded template in a loop (e.g. ngFor inside
+ * an ngFor), the nesting would mean we'd have multiple instances of the template function, so we
+ * can't store TViews in the template function itself (as we do for comps). Instead, we store the
+ * TView for dynamically created views on their host TNode, which only has one instance.
+ */
+export function renderEmbeddedTemplate<T>(
+    viewNode: LViewNode | LElementNode, tView: TView, context: T, rf: RenderFlags): LViewNode|
+    LElementNode {
+  const _isParent = isParent;
+  const _previousOrParentNode = previousOrParentNode;
+  let oldView: LViewData;
+  if (viewNode.data ![PARENT] == null && viewNode.data ![CONTEXT] && !tView.template) {
+    // This is a root view inside the view tree
+    tickRootContext(viewNode.data ![CONTEXT] as RootContext);
+  } else {
+    try {
+      isParent = true;
+      previousOrParentNode = null !;
+
+      oldView = enterView(viewNode.data !, viewNode);
+      namespaceHTML();
+      tView.template !(rf, context);
+      if (rf & RenderFlags.Update) {
+        refreshDescendantViews();
+      } else {
+        viewNode.data ![TVIEW].firstTemplatePass = firstTemplatePass = false;
+      }
+    } finally {
+      // renderEmbeddedTemplate() is called twice in fact, once for creation only and then once for
+      // update. When for creation only, leaveView() must not trigger view hooks, nor clean flags.
+      const isCreationOnly = (rf & RenderFlags.Create) === RenderFlags.Create;
+      leaveView(oldView !, isCreationOnly);
+      isParent = _isParent;
+      previousOrParentNode = _previousOrParentNode;
+    }
+  }
+  return viewNode;
+}
+
+/**
+ * Retrieves a context at the level specified and saves it as the global, contextViewData.
+ * Will get the next level up if level is not specified.
+ *
+ * This is used to save contexts of parent views so they can be bound in embedded views, or
+ * in conjunction with reference() to bind a ref from a parent view.
+ *
+ * @param level The relative level of the view from which to grab context compared to contextVewData
+ * @returns context
+ */
+export function nextContext<T = any>(level: number = 1): T {
+  contextViewData = walkUpViews(level, contextViewData !);
+  return contextViewData[CONTEXT] as T;
+}
+
+export function renderComponentOrTemplate<T>(
+    node: LElementNode, hostView: LViewData, componentOrContext: T,
+    template?: ComponentTemplate<T>) {
+  const oldView = enterView(hostView, node);
+  try {
+    if (rendererFactory.begin) {
+      rendererFactory.begin();
+    }
+    if (template) {
+      namespaceHTML();
+      template(getRenderFlags(hostView), componentOrContext !);
+      refreshDescendantViews();
+    } else {
+      executeInitAndContentHooks();
+
+      // Element was stored at 0 in data and directive was stored at 0 in directives
+      // in renderComponent()
+      setHostBindings(_ROOT_DIRECTIVE_INDICES);
+      componentRefresh(HEADER_OFFSET);
+    }
+  } finally {
+    if (rendererFactory.end) {
+      rendererFactory.end();
+    }
+    leaveView(oldView);
+  }
+}
+
+/**
+ * This function returns the default configuration of rendering flags depending on when the
+ * template is in creation mode or update mode. By default, the update block is run with the
+ * creation block when the view is in creation mode. Otherwise, the update block is run
+ * alone.
+ *
+ * Dynamically created views do NOT use this configuration (update block and create block are
+ * always run separately).
+ */
+function getRenderFlags(view: LViewData): RenderFlags {
+  return view[FLAGS] & LViewFlags.CreationMode ? RenderFlags.Create | RenderFlags.Update :
+                                                 RenderFlags.Update;
+}
+
+//////////////////////////
+//// Namespace
+//////////////////////////
+
+let _currentNamespace: string|null = null;
+
+export function namespaceSVG() {
+  _currentNamespace = 'http://www.w3.org/2000/svg/';
+}
+
+export function namespaceMathML() {
+  _currentNamespace = 'http://www.w3.org/1998/MathML/';
+}
+
+export function namespaceHTML() {
+  _currentNamespace = null;
+}
+
+//////////////////////////
+//// Element
+//////////////////////////
+
+/**
+ * Creates an empty element using {@link elementStart} and {@link elementEnd}
+ *
+ * @param index Index of the element in the data array
+ * @param name Name of the DOM Node
+ * @param attrs Statically bound set of attributes to be written into the DOM element on creation.
+ * @param localRefs A set of local reference bindings on the element.
+ */
+export function element(
+    index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void {
+  elementStart(index, name, attrs, localRefs);
+  elementEnd();
+}
+
+/**
+ * Creates a logical container for other nodes (<ng-container>) backed by a comment node in the DOM.
+ * The instruction must later be followed by `elementContainerEnd()` call.
+ *
+ * @param index Index of the element in the LViewData array
+ * @param attrs Set of attributes to be used when matching directives.
+ * @param localRefs A set of local reference bindings on the element.
+ *
+ * Even if this instruction accepts a set of attributes no actual attribute values are propagated to
+ * the DOM (as a comment node can't have attributes). Attributes are here only for directive
+ * matching purposes and setting initial inputs of directives.
+ */
+export function elementContainerStart(
+    index: number, attrs?: TAttributes | null, localRefs?: string[] | null): void {
+  ngDevMode &&
+      assertEqual(viewData[BINDING_INDEX], -1, 'elements should be created before any bindings');
+
+  ngDevMode && ngDevMode.rendererCreateComment++;
+  const native = renderer.createComment(ngDevMode ? 'ng-container' : '');
+
+  ngDevMode && assertDataInRange(index - 1);
+
+  const node: LElementContainerNode =
+      createLNode(index, TNodeType.ElementContainer, native, null, attrs || null, null);
+
+  appendChild(getParentLNode(node), native, viewData);
+  createDirectivesAndLocals(localRefs);
+}
+
+/** Mark the end of the <ng-container>. */
+export function elementContainerEnd(): void {
+  if (isParent) {
+    isParent = false;
+  } else {
+    ngDevMode && assertHasParent();
+    previousOrParentNode = getParentLNode(previousOrParentNode) as LElementContainerNode;
+  }
+
+  ngDevMode && assertNodeType(previousOrParentNode, TNodeType.ElementContainer);
+
+  currentQueries && (currentQueries = currentQueries.addNode(previousOrParentNode));
+
+  queueLifecycleHooks(previousOrParentNode.tNode.flags, tView);
+}
+
+/**
+ * Create DOM element. The instruction must later be followed by `elementEnd()` call.
+ *
+ * @param index Index of the element in the LViewData array
+ * @param name Name of the DOM Node
+ * @param attrs Statically bound set of attributes to be written into the DOM element on creation.
+ * @param localRefs A set of local reference bindings on the element.
+ *
+ * Attributes and localRefs are passed as an array of strings where elements with an even index
+ * hold an attribute name and elements with an odd index hold an attribute value, ex.:
+ * ['id', 'warning5', 'class', 'alert']
+ */
+export function elementStart(
+    index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void {
+  ngDevMode &&
+      assertEqual(viewData[BINDING_INDEX], -1, 'elements should be created before any bindings');
+
+  ngDevMode && ngDevMode.rendererCreateElement++;
+
+  const native = elementCreate(name);
+
+  ngDevMode && assertDataInRange(index - 1);
+
+  const node: LElementNode =
+      createLNode(index, TNodeType.Element, native !, name, attrs || null, null);
+  currentElementNode = node;
+
+  if (attrs) {
+    setUpAttributes(native, attrs);
+  }
+  appendChild(getParentLNode(node), native, viewData);
+  createDirectivesAndLocals(localRefs);
+}
+
+/**
+ * Creates a native element from a tag name, using a renderer.
+ * @param name the tag name
+ * @param overriddenRenderer Optional A renderer to override the default one
+ * @returns the element created
+ */
+export function elementCreate(name: string, overriddenRenderer?: Renderer3): RElement {
+  let native: RElement;
+  const rendererToUse = overriddenRenderer || renderer;
+
+  if (isProceduralRenderer(rendererToUse)) {
+    native = rendererToUse.createElement(name, _currentNamespace);
+  } else {
+    if (_currentNamespace === null) {
+      native = rendererToUse.createElement(name);
+    } else {
+      native = rendererToUse.createElementNS(_currentNamespace, name);
+    }
+  }
+  return native;
+}
+
+/**
+ * Creates directive instances and populates local refs.
+ *
+ * @param localRefs Local refs of the current node
+ */
+function createDirectivesAndLocals(localRefs?: string[] | null) {
+  const node = previousOrParentNode;
+
+  if (firstTemplatePass) {
+    ngDevMode && ngDevMode.firstTemplatePass++;
+    cacheMatchingDirectivesForNode(node.tNode, tView, localRefs || null);
+  } else {
+    instantiateDirectivesDirectly();
+  }
+  saveResolvedLocalsInData();
+}
+
+/**
+ * On first template pass, we match each node against available directive selectors and save
+ * the resulting defs in the correct instantiation order for subsequent change detection runs
+ * (so dependencies are always created before the directives that inject them).
+ */
+function cacheMatchingDirectivesForNode(
+    tNode: TNode, tView: TView, localRefs: string[] | null): void {
+  // Please make sure to have explicit type for `exportsMap`. Inferred type triggers bug in tsickle.
+  const exportsMap: ({[key: string]: number} | null) = localRefs ? {'': -1} : null;
+  const matches = tView.currentMatches = findDirectiveMatches(tNode);
+  if (matches) {
+    for (let i = 0; i < matches.length; i += 2) {
+      const def = matches[i] as DirectiveDefInternal<any>;
+      const valueIndex = i + 1;
+      resolveDirective(def, valueIndex, matches, tView);
+      saveNameToExportMap(matches[valueIndex] as number, def, exportsMap);
+    }
+  }
+  if (exportsMap) cacheMatchingLocalNames(tNode, localRefs, exportsMap);
+}
+
+/** Matches the current node against all available selectors. */
+function findDirectiveMatches(tNode: TNode): CurrentMatchesList|null {
+  const registry = tView.directiveRegistry;
+  let matches: any[]|null = null;
+  if (registry) {
+    for (let i = 0; i < registry.length; i++) {
+      const def = registry[i];
+      if (isNodeMatchingSelectorList(tNode, def.selectors !)) {
+        if ((def as ComponentDefInternal<any>).template) {
+          if (tNode.flags & TNodeFlags.isComponent) throwMultipleComponentError(tNode);
+          tNode.flags = TNodeFlags.isComponent;
+        }
+        if (def.diPublic) def.diPublic(def);
+        (matches || (matches = [])).push(def, null);
+      }
+    }
+  }
+  return matches as CurrentMatchesList;
+}
+
+export function resolveDirective(
+    def: DirectiveDefInternal<any>, valueIndex: number, matches: CurrentMatchesList,
+    tView: TView): any {
+  if (matches[valueIndex] === null) {
+    matches[valueIndex] = CIRCULAR;
+    const instance = def.factory();
+    (tView.directives || (tView.directives = [])).push(def);
+    return directiveCreate(matches[valueIndex] = tView.directives !.length - 1, instance, def);
+  } else if (matches[valueIndex] === CIRCULAR) {
+    // If we revisit this directive before it's resolved, we know it's circular
+    throwCyclicDependencyError(def.type);
+  }
+  return null;
+}
+
+/** Stores index of component's host element so it will be queued for view refresh during CD. */
+function queueComponentIndexForCheck(): void {
+  if (firstTemplatePass) {
+    (tView.components || (tView.components = [])).push(viewData.length - 1);
+  }
+}
+
+/** Stores index of directive and host element so it will be queued for binding refresh during CD.
+ */
+function queueHostBindingForCheck(dirIndex: number): void {
+  // Must subtract the header offset because hostBindings functions are generated with
+  // instructions that expect element indices that are NOT adjusted (e.g. elementProperty).
+  ngDevMode &&
+      assertEqual(firstTemplatePass, true, 'Should only be called in first template pass.');
+  (tView.hostBindings || (tView.hostBindings = [
+   ])).push(dirIndex, viewData.length - 1 - HEADER_OFFSET);
+}
+
+/** Sets the context for a ChangeDetectorRef to the given instance. */
+export function initChangeDetectorIfExisting(
+    injector: LInjector | null, instance: any, view: LViewData): void {
+  if (injector && injector.changeDetectorRef != null) {
+    (injector.changeDetectorRef as ViewRef<any>)._setComponentContext(view, instance);
+  }
+}
+
+export function isContentQueryHost(tNode: TNode): boolean {
+  return (tNode.flags & TNodeFlags.hasContentQuery) !== 0;
+}
+
+export function isComponent(tNode: TNode): boolean {
+  return (tNode.flags & TNodeFlags.isComponent) === TNodeFlags.isComponent;
+}
+
+/**
+ * This function instantiates the given directives.
+ */
+function instantiateDirectivesDirectly() {
+  ngDevMode && assertEqual(
+                   firstTemplatePass, false,
+                   `Directives should only be instantiated directly after first template pass`);
+  const tNode = previousOrParentNode.tNode;
+  const count = tNode.flags & TNodeFlags.DirectiveCountMask;
+
+  if (isContentQueryHost(tNode) && currentQueries) {
+    currentQueries = currentQueries.clone();
+  }
+
+  if (count > 0) {
+    const start = tNode.flags >> TNodeFlags.DirectiveStartingIndexShift;
+    const end = start + count;
+    const tDirectives = tView.directives !;
+
+    for (let i = start; i < end; i++) {
+      const def: DirectiveDefInternal<any> = tDirectives[i];
+      directiveCreate(i, def.factory(), def);
+    }
+  }
+}
+
+/** Caches local names and their matching directive indices for query and template lookups. */
+function cacheMatchingLocalNames(
+    tNode: TNode, localRefs: string[] | null, exportsMap: {[key: string]: number}): void {
+  if (localRefs) {
+    const localNames: (string | number)[] = tNode.localNames = [];
+
+    // Local names must be stored in tNode in the same order that localRefs are defined
+    // in the template to ensure the data is loaded in the same slots as their refs
+    // in the template (for template queries).
+    for (let i = 0; i < localRefs.length; i += 2) {
+      const index = exportsMap[localRefs[i + 1]];
+      if (index == null) throw new Error(`Export of name '${localRefs[i + 1]}' not found!`);
+      localNames.push(localRefs[i], index);
+    }
+  }
+}
+
+/**
+ * Builds up an export map as directives are created, so local refs can be quickly mapped
+ * to their directive instances.
+ */
+function saveNameToExportMap(
+    index: number, def: DirectiveDefInternal<any>| ComponentDefInternal<any>,
+    exportsMap: {[key: string]: number} | null) {
+  if (exportsMap) {
+    if (def.exportAs) exportsMap[def.exportAs] = index;
+    if ((def as ComponentDefInternal<any>).template) exportsMap[''] = index;
+  }
+}
+
+/**
+ * Takes a list of local names and indices and pushes the resolved local variable values
+ * to LViewData in the same order as they are loaded in the template with load().
+ */
+function saveResolvedLocalsInData(): void {
+  const localNames = previousOrParentNode.tNode.localNames;
+  if (localNames) {
+    for (let i = 0; i < localNames.length; i += 2) {
+      const index = localNames[i + 1] as number;
+      const value = index === -1 ? previousOrParentNode.native : directives ![index];
+      viewData.push(value);
+    }
+  }
+}
+
+/**
+ * Gets TView from a template function or creates a new TView
+ * if it doesn't already exist.
+ *
+ * @param template The template from which to get static data
+ * @param directives Directive defs that should be saved on TView
+ * @param pipes Pipe defs that should be saved on TView
+ * @returns TView
+ */
+function getOrCreateTView(
+    template: ComponentTemplate<any>, directives: DirectiveDefListOrFactory | null,
+    pipes: PipeDefListOrFactory | null, viewQuery: ComponentQuery<any>| null): TView {
+  // TODO(misko): reading `ngPrivateData` here is problematic for two reasons
+  // 1. It is a megamorphic call on each invocation.
+  // 2. For nested embedded views (ngFor inside ngFor) the template instance is per
+  //    outer template invocation, which means that no such property will exist
+  // Correct solution is to only put `ngPrivateData` on the Component template
+  // and not on embedded templates.
+
+  return template.ngPrivateData ||
+      (template.ngPrivateData = createTView(-1, template, directives, pipes, viewQuery) as never);
+}
+
+/**
+ * Creates a TView instance
+ *
+ * @param viewIndex The viewBlockId for inline views, or -1 if it's a component/dynamic
+ * @param directives Registry of directives for this view
+ * @param pipes Registry of pipes for this view
+ */
+export function createTView(
+    viewIndex: number, template: ComponentTemplate<any>| null,
+    directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null,
+    viewQuery: ComponentQuery<any>| null): TView {
+  ngDevMode && ngDevMode.tView++;
+  return {
+    id: viewIndex,
+    template: template,
+    viewQuery: viewQuery,
+    node: null !,
+    data: HEADER_FILLER.slice(),  // Fill in to match HEADER_OFFSET in LViewData
+    childIndex: -1,               // Children set in addToViewTree(), if any
+    bindingStartIndex: -1,        // Set in initBindings()
+    directives: null,
+    firstTemplatePass: true,
+    initHooks: null,
+    checkHooks: null,
+    contentHooks: null,
+    contentCheckHooks: null,
+    viewHooks: null,
+    viewCheckHooks: null,
+    destroyHooks: null,
+    pipeDestroyHooks: null,
+    cleanup: null,
+    hostBindings: null,
+    contentQueries: null,
+    components: null,
+    directiveRegistry: typeof directives === 'function' ? directives() : directives,
+    pipeRegistry: typeof pipes === 'function' ? pipes() : pipes,
+    currentMatches: null
+  };
+}
+
+function setUpAttributes(native: RElement, attrs: TAttributes): void {
+  const isProc = isProceduralRenderer(renderer);
+  let i = 0;
+
+  while (i < attrs.length) {
+    const attrName = attrs[i];
+    if (attrName === AttributeMarker.SelectOnly) break;
+    if (attrName === NG_PROJECT_AS_ATTR_NAME) {
+      i += 2;
+    } else {
+      ngDevMode && ngDevMode.rendererSetAttribute++;
+      if (attrName === AttributeMarker.NamespaceURI) {
+        // Namespaced attributes
+        const namespaceURI = attrs[i + 1] as string;
+        const attrName = attrs[i + 2] as string;
+        const attrVal = attrs[i + 3] as string;
+        isProc ?
+            (renderer as ProceduralRenderer3)
+                .setAttribute(native, attrName, attrVal, namespaceURI) :
+            native.setAttributeNS(namespaceURI, attrName, attrVal);
+        i += 4;
+      } else {
+        // Standard attributes
+        const attrVal = attrs[i + 1];
+        isProc ?
+            (renderer as ProceduralRenderer3)
+                .setAttribute(native, attrName as string, attrVal as string) :
+            native.setAttribute(attrName as string, attrVal as string);
+        i += 2;
+      }
+    }
+  }
+}
+
+export function createError(text: string, token: any) {
+  return new Error(`Renderer: ${text} [${stringify(token)}]`);
+}
+
+
+/**
+ * Locates the host native element, used for bootstrapping existing nodes into rendering pipeline.
+ *
+ * @param elementOrSelector Render element or CSS selector to locate the element.
+ */
+export function locateHostElement(
+    factory: RendererFactory3, elementOrSelector: RElement | string): RElement|null {
+  ngDevMode && assertDataInRange(-1);
+  rendererFactory = factory;
+  const defaultRenderer = factory.createRenderer(null, null);
+  const rNode = typeof elementOrSelector === 'string' ?
+      (isProceduralRenderer(defaultRenderer) ?
+           defaultRenderer.selectRootElement(elementOrSelector) :
+           defaultRenderer.querySelector(elementOrSelector)) :
+      elementOrSelector;
+  if (ngDevMode && !rNode) {
+    if (typeof elementOrSelector === 'string') {
+      throw createError('Host node with selector not found:', elementOrSelector);
+    } else {
+      throw createError('Host node is required:', elementOrSelector);
+    }
+  }
+  return rNode;
+}
+
+/**
+ * Creates the host LNode.
+ *
+ * @param rNode Render host element.
+ * @param def ComponentDef
+ *
+ * @returns LElementNode created
+ */
+export function hostElement(
+    tag: string, rNode: RElement | null, def: ComponentDefInternal<any>,
+    sanitizer?: Sanitizer | null): LElementNode {
+  resetApplicationState();
+  const node = createLNode(
+      0, TNodeType.Element, rNode, null, null,
+      createLViewData(
+          renderer, getOrCreateTView(def.template, def.directiveDefs, def.pipeDefs, def.viewQuery),
+          null, def.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways, sanitizer));
+
+  if (firstTemplatePass) {
+    node.tNode.flags = TNodeFlags.isComponent;
+    if (def.diPublic) def.diPublic(def);
+    tView.directives = [def];
+  }
+
+  return node;
+}
+
+
+/**
+ * Adds an event listener to the current node.
+ *
+ * If an output exists on one of the node's directives, it also subscribes to the output
+ * and saves the subscription for later cleanup.
+ *
+ * @param eventName Name of the event
+ * @param listenerFn The function to be called when event emits
+ * @param useCapture Whether or not to use capture in event listener.
+ */
+export function listener(
+    eventName: string, listenerFn: (e?: any) => any, useCapture = false): void {
+  ngDevMode && assertPreviousIsParent();
+  ngDevMode && assertNodeOfPossibleTypes(previousOrParentNode, TNodeType.Element);
+  const node = previousOrParentNode;
+  const native = node.native as RElement;
+  ngDevMode && ngDevMode.rendererAddEventListener++;
+
+  // In order to match current behavior, native DOM event listeners must be added for all
+  // events (including outputs).
+  if (isProceduralRenderer(renderer)) {
+    const wrappedListener = wrapListenerWithDirtyLogic(viewData, listenerFn);
+    const cleanupFn = renderer.listen(native, eventName, wrappedListener);
+    storeCleanupFn(viewData, cleanupFn);
+  } else {
+    const wrappedListener = wrapListenerWithDirtyAndDefault(viewData, listenerFn);
+    native.addEventListener(eventName, wrappedListener, useCapture);
+    const cleanupInstances = getCleanup(viewData);
+    cleanupInstances.push(wrappedListener);
+    if (firstTemplatePass) {
+      getTViewCleanup(viewData).push(
+          eventName, node.tNode.index, cleanupInstances !.length - 1, useCapture);
+    }
+  }
+
+  let tNode: TNode|null = node.tNode;
+  if (tNode.outputs === undefined) {
+    // if we create TNode here, inputs must be undefined so we know they still need to be
+    // checked
+    tNode.outputs = generatePropertyAliases(node.tNode.flags, BindingDirection.Output);
+  }
+
+  const outputs = tNode.outputs;
+  let outputData: PropertyAliasValue|undefined;
+  if (outputs && (outputData = outputs[eventName])) {
+    createOutput(outputData, listenerFn);
+  }
+}
+
+/**
+ * Iterates through the outputs associated with a particular event name and subscribes to
+ * each output.
+ */
+function createOutput(outputs: PropertyAliasValue, listener: Function): void {
+  for (let i = 0; i < outputs.length; i += 2) {
+    ngDevMode && assertDataInRange(outputs[i] as number, directives !);
+    const subscription = directives ![outputs[i] as number][outputs[i + 1]].subscribe(listener);
+    storeCleanupWithContext(viewData, subscription, subscription.unsubscribe);
+  }
+}
+
+/**
+ * Saves context for this cleanup function in LView.cleanupInstances.
+ *
+ * On the first template pass, saves in TView:
+ * - Cleanup function
+ * - Index of context we just saved in LView.cleanupInstances
+ */
+export function storeCleanupWithContext(
+    view: LViewData | null, context: any, cleanupFn: Function): void {
+  if (!view) view = viewData;
+  getCleanup(view).push(context);
+
+  if (view[TVIEW].firstTemplatePass) {
+    getTViewCleanup(view).push(cleanupFn, view[CLEANUP] !.length - 1);
+  }
+}
+
+/**
+ * Saves the cleanup function itself in LView.cleanupInstances.
+ *
+ * This is necessary for functions that are wrapped with their contexts, like in renderer2
+ * listeners.
+ *
+ * On the first template pass, the index of the cleanup function is saved in TView.
+ */
+export function storeCleanupFn(view: LViewData, cleanupFn: Function): void {
+  getCleanup(view).push(cleanupFn);
+
+  if (view[TVIEW].firstTemplatePass) {
+    getTViewCleanup(view).push(view[CLEANUP] !.length - 1, null);
+  }
+}
+
+/** Mark the end of the element. */
+export function elementEnd(): void {
+  if (isParent) {
+    isParent = false;
+  } else {
+    ngDevMode && assertHasParent();
+    previousOrParentNode = getParentLNode(previousOrParentNode) as LElementNode;
+  }
+  ngDevMode && assertNodeType(previousOrParentNode, TNodeType.Element);
+  currentQueries && (currentQueries = currentQueries.addNode(previousOrParentNode));
+  queueLifecycleHooks(previousOrParentNode.tNode.flags, tView);
+  currentElementNode = null;
+}
+
+/**
+ * Updates the value of removes an attribute on an Element.
+ *
+ * @param number index The index of the element in the data array
+ * @param name name The name of the attribute.
+ * @param value value The attribute is removed when value is `null` or `undefined`.
+ *                  Otherwise the attribute value is set to the stringified value.
+ * @param sanitizer An optional function used to sanitize the value.
+ */
+export function elementAttribute(
+    index: number, name: string, value: any, sanitizer?: SanitizerFn): void {
+  if (value !== NO_CHANGE) {
+    const element = loadElement(index);
+    if (value == null) {
+      ngDevMode && ngDevMode.rendererRemoveAttribute++;
+      isProceduralRenderer(renderer) ? renderer.removeAttribute(element.native, name) :
+                                       element.native.removeAttribute(name);
+    } else {
+      ngDevMode && ngDevMode.rendererSetAttribute++;
+      const strValue = sanitizer == null ? stringify(value) : sanitizer(value);
+      isProceduralRenderer(renderer) ? renderer.setAttribute(element.native, name, strValue) :
+                                       element.native.setAttribute(name, strValue);
+    }
+  }
+}
+
+/**
+ * Update a property on an Element.
+ *
+ * If the property name also exists as an input property on one of the element's directives,
+ * the component property will be set instead of the element property. This check must
+ * be conducted at runtime so child components that add new @Inputs don't have to be re-compiled.
+ *
+ * @param index The index of the element to update in the data array
+ * @param propName Name of property. Because it is going to DOM, this is not subject to
+ *        renaming as part of minification.
+ * @param value New value to write.
+ * @param sanitizer An optional function used to sanitize the value.
+ */
+
+export function elementProperty<T>(
+    index: number, propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn): void {
+  if (value === NO_CHANGE) return;
+  const node = loadElement(index) as LElementNode;
+  const tNode = node.tNode;
+  // if tNode.inputs is undefined, a listener has created outputs, but inputs haven't
+  // yet been checked
+  if (tNode && tNode.inputs === undefined) {
+    // mark inputs as checked
+    tNode.inputs = generatePropertyAliases(node.tNode.flags, BindingDirection.Input);
+  }
+
+  const inputData = tNode && tNode.inputs;
+  let dataValue: PropertyAliasValue|undefined;
+  if (inputData && (dataValue = inputData[propName])) {
+    setInputsForProperty(dataValue, value);
+    markDirtyIfOnPush(node);
+  } else {
+    // It is assumed that the sanitizer is only added when the compiler determines that the property
+    // is risky, so sanitization can be done without further checks.
+    value = sanitizer != null ? (sanitizer(value) as any) : value;
+    const native = node.native;
+    ngDevMode && ngDevMode.rendererSetProperty++;
+    isProceduralRenderer(renderer) ? renderer.setProperty(native, propName, value) :
+                                     (native.setProperty ? native.setProperty(propName, value) :
+                                                           (native as any)[propName] = value);
+  }
+}
+
+/**
+ * Constructs a TNode object from the arguments.
+ *
+ * @param type The type of the node
+ * @param adjustedIndex The index of the TNode in TView.data, adjusted for HEADER_OFFSET
+ * @param tagName The tag name of the node
+ * @param attrs The attributes defined on this node
+ * @param parent The parent of this node
+ * @param tViews Any TViews attached to this node
+ * @returns the TNode object
+ */
+export function createTNode(
+    type: TNodeType, adjustedIndex: number, tagName: string | null, attrs: TAttributes | null,
+    parent: TElementNode | TContainerNode | null, tViews: TView[] | null): TNode {
+  ngDevMode && ngDevMode.tNode++;
+  return {
+    type: type,
+    index: adjustedIndex,
+    flags: 0,
+    tagName: tagName,
+    attrs: attrs,
+    localNames: null,
+    initialInputs: undefined,
+    inputs: undefined,
+    outputs: undefined,
+    tViews: tViews,
+    next: null,
+    child: null,
+    parent: parent,
+    dynamicContainerNode: null,
+    detached: null,
+    stylingTemplate: null,
+    projection: null
+  };
+}
+
+/**
+ * Given a list of directive indices and minified input names, sets the
+ * input properties on the corresponding directives.
+ */
+function setInputsForProperty(inputs: PropertyAliasValue, value: any): void {
+  for (let i = 0; i < inputs.length; i += 2) {
+    ngDevMode && assertDataInRange(inputs[i] as number, directives !);
+    directives ![inputs[i] as number][inputs[i + 1]] = value;
+  }
+}
+
+/**
+ * Consolidates all inputs or outputs of all directives on this logical node.
+ *
+ * @param number lNodeFlags logical node flags
+ * @param Direction direction whether to consider inputs or outputs
+ * @returns PropertyAliases|null aggregate of all properties if any, `null` otherwise
+ */
+function generatePropertyAliases(
+    tNodeFlags: TNodeFlags, direction: BindingDirection): PropertyAliases|null {
+  const count = tNodeFlags & TNodeFlags.DirectiveCountMask;
+  let propStore: PropertyAliases|null = null;
+
+  if (count > 0) {
+    const start = tNodeFlags >> TNodeFlags.DirectiveStartingIndexShift;
+    const end = start + count;
+    const isInput = direction === BindingDirection.Input;
+    const defs = tView.directives !;
+
+    for (let i = start; i < end; i++) {
+      const directiveDef = defs[i] as DirectiveDefInternal<any>;
+      const propertyAliasMap: {[publicName: string]: string} =
+          isInput ? directiveDef.inputs : directiveDef.outputs;
+      for (let publicName in propertyAliasMap) {
+        if (propertyAliasMap.hasOwnProperty(publicName)) {
+          propStore = propStore || {};
+          const internalName = propertyAliasMap[publicName];
+          const hasProperty = propStore.hasOwnProperty(publicName);
+          hasProperty ? propStore[publicName].push(i, internalName) :
+                        (propStore[publicName] = [i, internalName]);
+        }
+      }
+    }
+  }
+  return propStore;
+}
+
+/**
+ * Add or remove a class in a `classList` on a DOM element.
+ *
+ * This instruction is meant to handle the [class.foo]="exp" case
+ *
+ * @param index The index of the element to update in the data array
+ * @param className Name of class to toggle. Because it is going to DOM, this is not subject to
+ *        renaming as part of minification.
+ * @param value A value indicating if a given class should be added or removed.
+ */
+export function elementClassProp<T>(
+    index: number, stylingIndex: number, value: T | NO_CHANGE): void {
+  updateElementClassProp(getStylingContext(index), stylingIndex, value ? true : false);
+}
+
+/**
+ * Assign any inline style values to the element during creation mode.
+ *
+ * This instruction is meant to be called during creation mode to apply all styling
+ * (e.g. `style="..."`) values to the element. This is also where the provided index
+ * value is allocated for the styling details for its corresponding element (the element
+ * index is the previous index value from this one).
+ *
+ * (Note this function calls `elementStylingApply` immediately when called.)
+ *
+ *
+ * @param index Index value which will be allocated to store styling data for the element.
+ *        (Note that this is not the element index, but rather an index value allocated
+ *        specifically for element styling--the index must be the next index after the element
+ *        index.)
+ * @param classDeclarations A key/value array of CSS classes that will be registered on the element.
+ *   Each individual style will be used on the element as long as it is not overridden
+ *   by any classes placed on the element by multiple (`[class]`) or singular (`[class.named]`)
+ *   bindings. If a class binding changes its value to a falsy value then the matching initial
+ *   class value that are passed in here will be applied to the element (if matched).
+ * @param styleDeclarations A key/value array of CSS styles that will be registered on the element.
+ *   Each individual style will be used on the element as long as it is not overridden
+ *   by any styles placed on the element by multiple (`[style]`) or singular (`[style.prop]`)
+ *   bindings. If a style binding changes its value to null then the initial styling
+ *   values that are passed in here will be applied to the element (if matched).
+ * @param styleSanitizer An optional sanitizer function that will be used (if provided)
+ *   to sanitize the any CSS property values that are applied to the element (during rendering).
+ */
+export function elementStyling<T>(
+    classDeclarations?: (string | boolean | InitialStylingFlags)[] | null,
+    styleDeclarations?: (string | boolean | InitialStylingFlags)[] | null,
+    styleSanitizer?: StyleSanitizeFn | null): void {
+  const lElement = currentElementNode !;
+  const tNode = lElement.tNode;
+  if (!tNode.stylingTemplate) {
+    // initialize the styling template.
+    tNode.stylingTemplate =
+        createStylingContextTemplate(classDeclarations, styleDeclarations, styleSanitizer);
+  }
+  if (styleDeclarations && styleDeclarations.length ||
+      classDeclarations && classDeclarations.length) {
+    elementStylingApply(tNode.index - HEADER_OFFSET);
+  }
+}
+
+/**
+ * Retrieve the `StylingContext` at a given index.
+ *
+ * This method lazily creates the `StylingContext`. This is because in most cases
+ * we have styling without any bindings. Creating `StylingContext` eagerly would mean that
+ * every style declaration such as `<div style="color: 'red' ">` would result `StyleContext`
+ * which would create unnecessary memory pressure.
+ *
+ * @param index Index of the style allocation. See: `elementStyling`.
+ */
+function getStylingContext(index: number): StylingContext {
+  let stylingContext = load<StylingContext>(index);
+  if (!Array.isArray(stylingContext)) {
+    const lElement = stylingContext as any as LElementNode;
+    const tNode = lElement.tNode;
+    ngDevMode &&
+        assertDefined(tNode.stylingTemplate, 'getStylingContext() called before elementStyling()');
+    stylingContext = viewData[index + HEADER_OFFSET] =
+        allocStylingContext(lElement, tNode.stylingTemplate !);
+  }
+  return stylingContext;
+}
+
+/**
+ * Apply all styling values to the element which have been queued by any styling instructions.
+ *
+ * This instruction is meant to be run once one or more `elementStyle` and/or `elementStyleProp`
+ * have been issued against the element. This function will also determine if any styles have
+ * changed and will then skip the operation if there is nothing new to render.
+ *
+ * Once called then all queued styles will be flushed.
+ *
+ * @param index Index of the element's styling storage that will be rendered.
+ *        (Note that this is not the element index, but rather an index value allocated
+ *        specifically for element styling--the index must be the next index after the element
+ *        index.)
+ */
+export function elementStylingApply<T>(index: number): void {
+  renderElementStyles(getStylingContext(index), renderer);
+}
+
+/**
+ * Queue a given style to be rendered on an Element.
+ *
+ * If the style value is `null` then it will be removed from the element
+ * (or assigned a different value depending if there are any styles placed
+ * on the element with `elementStyle` or any styles that are present
+ * from when the element was created (with `elementStyling`).
+ *
+ * (Note that the styling instruction will not be applied until `elementStylingApply` is called.)
+ *
+ * @param index Index of the element's styling storage to change in the data array.
+ *        (Note that this is not the element index, but rather an index value allocated
+ *        specifically for element styling--the index must be the next index after the element
+ *        index.)
+ * @param styleIndex Index of the style property on this element. (Monotonically increasing.)
+ * @param styleName Name of property. Because it is going to DOM this is not subject to
+ *        renaming as part of minification.
+ * @param value New value to write (null to remove).
+ * @param suffix Optional suffix. Used with scalar values to add unit such as `px`.
+ *        Note that when a suffix is provided then the underlying sanitizer will
+ *        be ignored.
+ */
+export function elementStyleProp<T>(
+    index: number, styleIndex: number, value: T | null, suffix?: string): void {
+  let valueToAdd: string|null = null;
+  if (value) {
+    if (suffix) {
+      // when a suffix is applied then it will bypass
+      // sanitization entirely (b/c a new string is created)
+      valueToAdd = stringify(value) + suffix;
+    } else {
+      // sanitization happens by dealing with a String value
+      // this means that the string value will be passed through
+      // into the style rendering later (which is where the value
+      // will be sanitized before it is applied)
+      valueToAdd = value as any as string;
+    }
+  }
+  updateElementStyleProp(getStylingContext(index), styleIndex, valueToAdd);
+}
+
+/**
+ * Queue a key/value map of styles to be rendered on an Element.
+ *
+ * This instruction is meant to handle the `[style]="exp"` usage. When styles are applied to
+ * the Element they will then be placed with respect to any styles set with `elementStyleProp`.
+ * If any styles are set to `null` then they will be removed from the element (unless the same
+ * style properties have been assigned to the element during creation using `elementStyling`).
+ *
+ * (Note that the styling instruction will not be applied until `elementStylingApply` is called.)
+ *
+ * @param index Index of the element's styling storage to change in the data array.
+ *        (Note that this is not the element index, but rather an index value allocated
+ *        specifically for element styling--the index must be the next index after the element
+ *        index.)
+ * @param classes A key/value style map of CSS classes that will be added to the given element.
+ *        Any missing classes (that have already been applied to the element beforehand) will be
+ *        removed (unset) from the element's list of CSS classes.
+ * @param styles A key/value style map of the styles that will be applied to the given element.
+ *        Any missing styles (that have already been applied to the element beforehand) will be
+ *        removed (unset) from the element's styling.
+ */
+export function elementStylingMap<T>(
+    index: number, classes: {[key: string]: any} | string | null,
+    styles?: {[styleName: string]: any} | null): void {
+  updateStylingMap(getStylingContext(index), classes, styles);
+}
+
+//////////////////////////
+//// Text
+//////////////////////////
+
+/**
+ * Create static text node
+ *
+ * @param index Index of the node in the data array
+ * @param value Value to write. This value will be stringified.
+ */
+export function text(index: number, value?: any): void {
+  ngDevMode &&
+      assertEqual(viewData[BINDING_INDEX], -1, 'text nodes should be created before bindings');
+  ngDevMode && ngDevMode.rendererCreateTextNode++;
+  const textNode = createTextNode(value, renderer);
+  const node = createLNode(index, TNodeType.Element, textNode, null, null);
+
+  // Text nodes are self closing.
+  isParent = false;
+  appendChild(getParentLNode(node), textNode, viewData);
+}
+
+/**
+ * Create text node with binding
+ * Bindings should be handled externally with the proper interpolation(1-8) method
+ *
+ * @param index Index of the node in the data array.
+ * @param value Stringified value to write.
+ */
+export function textBinding<T>(index: number, value: T | NO_CHANGE): void {
+  if (value !== NO_CHANGE) {
+    ngDevMode && assertDataInRange(index + HEADER_OFFSET);
+    const existingNode = loadElement(index) as any as LTextNode;
+    ngDevMode && assertDefined(existingNode, 'LNode should exist');
+    ngDevMode && assertDefined(existingNode.native, 'native element should exist');
+    ngDevMode && ngDevMode.rendererSetText++;
+    isProceduralRenderer(renderer) ? renderer.setValue(existingNode.native, stringify(value)) :
+                                     existingNode.native.textContent = stringify(value);
+  }
+}
+
+//////////////////////////
+//// Directive
+//////////////////////////
+
+/**
+ * Create a directive and their associated content queries.
+ *
+ * NOTE: directives can be created in order other than the index order. They can also
+ *       be retrieved before they are created in which case the value will be null.
+ *
+ * @param directive The directive instance.
+ * @param directiveDef DirectiveDef object which contains information about the template.
+ */
+export function directiveCreate<T>(
+    directiveDefIdx: number, directive: T,
+    directiveDef: DirectiveDefInternal<T>| ComponentDefInternal<T>): T {
+  const instance = baseDirectiveCreate(directiveDefIdx, directive, directiveDef);
+
+  ngDevMode && assertDefined(previousOrParentNode.tNode, 'previousOrParentNode.tNode');
+  const tNode = previousOrParentNode.tNode;
+
+  const isComponent = (directiveDef as ComponentDefInternal<T>).template;
+  if (isComponent) {
+    addComponentLogic(directiveDefIdx, directive, directiveDef as ComponentDefInternal<T>);
+  }
+
+  if (firstTemplatePass) {
+    // Init hooks are queued now so ngOnInit is called in host components before
+    // any projected components.
+    queueInitHooks(directiveDefIdx, directiveDef.onInit, directiveDef.doCheck, tView);
+
+    if (directiveDef.hostBindings) queueHostBindingForCheck(directiveDefIdx);
+  }
+
+  if (tNode && tNode.attrs) {
+    setInputsFromAttrs(directiveDefIdx, instance, directiveDef.inputs, tNode);
+  }
+
+  if (directiveDef.contentQueries) {
+    directiveDef.contentQueries();
+  }
+
+  return instance;
+}
+
+function addComponentLogic<T>(
+    directiveIndex: number, instance: T, def: ComponentDefInternal<T>): void {
+  const tView = getOrCreateTView(def.template, def.directiveDefs, def.pipeDefs, def.viewQuery);
+
+  // Only component views should be added to the view tree directly. Embedded views are
+  // accessed through their containers because they may be removed / re-added later.
+  const componentView = addToViewTree(
+      viewData, previousOrParentNode.tNode.index as number,
+      createLViewData(
+          rendererFactory.createRenderer(previousOrParentNode.native as RElement, def), tView,
+          instance, def.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways, getCurrentSanitizer()));
+
+  // We need to set the host node/data here because when the component LNode was created,
+  // we didn't yet know it was a component (just an element).
+  (previousOrParentNode as{data: LViewData}).data = componentView;
+  (componentView as LViewData)[HOST_NODE] = previousOrParentNode as LElementNode;
+
+  initChangeDetectorIfExisting(previousOrParentNode.nodeInjector, instance, componentView);
+
+  if (firstTemplatePass) queueComponentIndexForCheck();
+}
+
+/**
+ * A lighter version of directiveCreate() that is used for the root component
+ *
+ * This version does not contain features that we don't already support at root in
+ * current Angular. Example: local refs and inputs on root component.
+ */
+export function baseDirectiveCreate<T>(
+    index: number, directive: T,
+    directiveDef: DirectiveDefInternal<T>| ComponentDefInternal<T>): T {
+  ngDevMode &&
+      assertEqual(viewData[BINDING_INDEX], -1, 'directives should be created before any bindings');
+  ngDevMode && assertPreviousIsParent();
+
+  Object.defineProperty(
+      directive, NG_HOST_SYMBOL, {enumerable: false, value: previousOrParentNode});
+
+  if (directives == null) viewData[DIRECTIVES] = directives = [];
+
+  ngDevMode && assertDataNext(index, directives);
+  directives[index] = directive;
+
+  if (firstTemplatePass) {
+    const flags = previousOrParentNode.tNode.flags;
+    if ((flags & TNodeFlags.DirectiveCountMask) === 0) {
+      // When the first directive is created:
+      // - save the index,
+      // - set the number of directives to 1
+      previousOrParentNode.tNode.flags =
+          index << TNodeFlags.DirectiveStartingIndexShift | flags & TNodeFlags.isComponent | 1;
+    } else {
+      // Only need to bump the size when subsequent directives are created
+      ngDevMode && assertNotEqual(
+                       flags & TNodeFlags.DirectiveCountMask, TNodeFlags.DirectiveCountMask,
+                       'Reached the max number of directives');
+      previousOrParentNode.tNode.flags++;
+    }
+  } else {
+    const diPublic = directiveDef !.diPublic;
+    if (diPublic) diPublic(directiveDef !);
+  }
+
+  if (directiveDef !.attributes != null && previousOrParentNode.tNode.type == TNodeType.Element) {
+    setUpAttributes(
+        (previousOrParentNode as LElementNode).native, directiveDef !.attributes as string[]);
+  }
+
+  return directive;
+}
+
+/**
+ * Sets initial input properties on directive instances from attribute data
+ *
+ * @param directiveIndex Index of the directive in directives array
+ * @param instance Instance of the directive on which to set the initial inputs
+ * @param inputs The list of inputs from the directive def
+ * @param tNode The static data for this node
+ */
+function setInputsFromAttrs<T>(
+    directiveIndex: number, instance: T, inputs: {[P in keyof T]: string;}, tNode: TNode): void {
+  let initialInputData = tNode.initialInputs as InitialInputData | undefined;
+  if (initialInputData === undefined || directiveIndex >= initialInputData.length) {
+    initialInputData = generateInitialInputs(directiveIndex, inputs, tNode);
+  }
+
+  const initialInputs: InitialInputs|null = initialInputData[directiveIndex];
+  if (initialInputs) {
+    for (let i = 0; i < initialInputs.length; i += 2) {
+      (instance as any)[initialInputs[i]] = initialInputs[i + 1];
+    }
+  }
+}
+
+/**
+ * Generates initialInputData for a node and stores it in the template's static storage
+ * so subsequent template invocations don't have to recalculate it.
+ *
+ * initialInputData is an array containing values that need to be set as input properties
+ * for directives on this node, but only once on creation. We need this array to support
+ * the case where you set an @Input property of a directive using attribute-like syntax.
+ * e.g. if you have a `name` @Input, you can set it once like this:
+ *
+ * <my-component name="Bess"></my-component>
+ *
+ * @param directiveIndex Index to store the initial input data
+ * @param inputs The list of inputs from the directive def
+ * @param tNode The static data on this node
+ */
+function generateInitialInputs(
+    directiveIndex: number, inputs: {[key: string]: string}, tNode: TNode): InitialInputData {
+  const initialInputData: InitialInputData = tNode.initialInputs || (tNode.initialInputs = []);
+  initialInputData[directiveIndex] = null;
+
+  const attrs = tNode.attrs !;
+  let i = 0;
+  while (i < attrs.length) {
+    const attrName = attrs[i];
+    if (attrName === AttributeMarker.SelectOnly) break;
+    if (attrName === AttributeMarker.NamespaceURI) {
+      // We do not allow inputs on namespaced attributes.
+      i += 4;
+      continue;
+    }
+    const minifiedInputName = inputs[attrName];
+    const attrValue = attrs[i + 1];
+
+    if (minifiedInputName !== undefined) {
+      const inputsToStore: InitialInputs =
+          initialInputData[directiveIndex] || (initialInputData[directiveIndex] = []);
+      inputsToStore.push(minifiedInputName, attrValue as string);
+    }
+
+    i += 2;
+  }
+  return initialInputData;
+}
+
+//////////////////////////
+//// ViewContainer & View
+//////////////////////////
+
+/**
+ * Creates a LContainer, either from a container instruction, or for a ViewContainerRef.
+ *
+ * @param parentLNode the LNode in which the container's content will be rendered
+ * @param currentView The parent view of the LContainer
+ * @param isForViewContainerRef Optional a flag indicating the ViewContainerRef case
+ * @returns LContainer
+ */
+export function createLContainer(
+    parentLNode: LNode, currentView: LViewData, isForViewContainerRef?: boolean): LContainer {
+  ngDevMode && assertDefined(parentLNode, 'containers should have a parent');
+  let renderParent = canInsertNativeNode(parentLNode, currentView) ?
+      parentLNode as LElementNode | LViewNode :
+      null;
+  if (renderParent && renderParent.tNode.type === TNodeType.View) {
+    renderParent = getParentLNode(renderParent as LViewNode) !.data[RENDER_PARENT];
+  }
+  return [
+    isForViewContainerRef ? null : 0,  // active index
+    currentView,                       // parent
+    null,                              // next
+    null,                              // queries
+    [],                                // views
+    renderParent as LElementNode
+  ];
+}
+
+/**
+ * Creates an LContainerNode.
+ *
+ * Only `LViewNodes` can go into `LContainerNodes`.
+ *
+ * @param index The index of the container in the data array
+ * @param template Optional inline template
+ * @param tagName The name of the container element, if applicable
+ * @param attrs The attrs attached to the container, if applicable
+ * @param localRefs A set of local reference bindings on the element.
+ */
+export function container(
+    index: number, template?: ComponentTemplate<any>| null, tagName?: string | null,
+    attrs?: TAttributes | null, localRefs?: string[] | null): void {
+  ngDevMode &&
+      assertEqual(
+          viewData[BINDING_INDEX], -1, 'container nodes should be created before any bindings');
+
+  const currentParent = isParent ? previousOrParentNode : getParentLNode(previousOrParentNode) !;
+  const lContainer = createLContainer(currentParent, viewData);
+
+  ngDevMode && ngDevMode.rendererCreateComment++;
+  const comment = renderer.createComment(ngDevMode ? 'container' : '');
+  const node =
+      createLNode(index, TNodeType.Container, comment, tagName || null, attrs || null, lContainer);
+  appendChild(getParentLNode(node), comment, viewData);
+
+  if (firstTemplatePass) {
+    node.tNode.tViews = template ?
+        createTView(-1, template, tView.directiveRegistry, tView.pipeRegistry, null) :
+        [];
+  }
+
+  // Containers are added to the current view tree instead of their embedded views
+  // because views can be removed and re-inserted.
+  addToViewTree(viewData, index + HEADER_OFFSET, node.data);
+
+  if (currentQueries) {
+    // prepare place for matching nodes from views inserted into a given container
+    lContainer[QUERIES] = currentQueries.container();
+  }
+
+  createDirectivesAndLocals(localRefs);
+
+  isParent = false;
+  ngDevMode && assertNodeType(previousOrParentNode, TNodeType.Container);
+  // check if a given container node matches
+  currentQueries && (currentQueries = currentQueries.addNode(node));
+  queueLifecycleHooks(node.tNode.flags, tView);
+}
+
+/**
+ * Sets a container up to receive views.
+ *
+ * @param index The index of the container in the data array
+ */
+export function containerRefreshStart(index: number): void {
+  previousOrParentNode = loadElement(index) as LNode;
+  ngDevMode && assertNodeType(previousOrParentNode, TNodeType.Container);
+  isParent = true;
+  (previousOrParentNode as LContainerNode).data[ACTIVE_INDEX] = 0;
+
+  if (!checkNoChangesMode) {
+    // We need to execute init hooks here so ngOnInit hooks are called in top level views
+    // before they are called in embedded views (for backwards compatibility).
+    executeInitHooks(viewData, tView, creationMode);
+  }
+}
+
+/**
+ * Marks the end of the LContainerNode.
+ *
+ * Marking the end of LContainerNode is the time when to child Views get inserted or removed.
+ */
+export function containerRefreshEnd(): void {
+  if (isParent) {
+    isParent = false;
+  } else {
+    ngDevMode && assertNodeType(previousOrParentNode, TNodeType.View);
+    ngDevMode && assertHasParent();
+    previousOrParentNode = getParentLNode(previousOrParentNode) !;
+  }
+  ngDevMode && assertNodeType(previousOrParentNode, TNodeType.Container);
+  const container = previousOrParentNode as LContainerNode;
+  ngDevMode && assertNodeType(container, TNodeType.Container);
+  const nextIndex = container.data[ACTIVE_INDEX] !;
+
+  // remove extra views at the end of the container
+  while (nextIndex < container.data[VIEWS].length) {
+    removeView(container, nextIndex);
+  }
+}
+
+/**
+ * Goes over dynamic embedded views (ones created through ViewContainerRef APIs) and refreshes them
+ * by executing an associated template function.
+ */
+function refreshDynamicEmbeddedViews(lViewData: LViewData) {
+  for (let current = getLViewChild(lViewData); current !== null; current = current[NEXT]) {
+    // Note: current can be an LViewData or an LContainer instance, but here we are only interested
+    // in LContainer. We can tell it's an LContainer because its length is less than the LViewData
+    // header.
+    if (current.length < HEADER_OFFSET && current[ACTIVE_INDEX] === null) {
+      const container = current as LContainer;
+      for (let i = 0; i < container[VIEWS].length; i++) {
+        const lViewNode = container[VIEWS][i];
+        // The directives and pipes are not needed here as an existing view is only being refreshed.
+        const dynamicViewData = lViewNode.data;
+        ngDevMode && assertDefined(dynamicViewData[TVIEW], 'TView must be allocated');
+        renderEmbeddedTemplate(
+            lViewNode, dynamicViewData[TVIEW], dynamicViewData[CONTEXT] !, RenderFlags.Update);
+      }
+    }
+  }
+}
+
+
+/**
+ * Looks for a view with a given view block id inside a provided LContainer.
+ * Removes views that need to be deleted in the process.
+ *
+ * @param containerNode where to search for views
+ * @param startIdx starting index in the views array to search from
+ * @param viewBlockId exact view block id to look for
+ * @returns index of a found view or -1 if not found
+ */
+function scanForView(
+    containerNode: LContainerNode, startIdx: number, viewBlockId: number): LViewNode|null {
+  const views = containerNode.data[VIEWS];
+  for (let i = startIdx; i < views.length; i++) {
+    const viewAtPositionId = views[i].data[TVIEW].id;
+    if (viewAtPositionId === viewBlockId) {
+      return views[i];
+    } else if (viewAtPositionId < viewBlockId) {
+      // found a view that should not be at this position - remove
+      removeView(containerNode, i);
+    } else {
+      // found a view with id greater than the one we are searching for
+      // which means that required view doesn't exist and can't be found at
+      // later positions in the views array - stop the search here
+      break;
+    }
+  }
+  return null;
+}
+
+/**
+ * Marks the start of an embedded view.
+ *
+ * @param viewBlockId The ID of this view
+ * @return boolean Whether or not this view is in creation mode
+ */
+export function embeddedViewStart(viewBlockId: number): RenderFlags {
+  const container =
+      (isParent ? previousOrParentNode : getParentLNode(previousOrParentNode)) as LContainerNode;
+  ngDevMode && assertNodeType(container, TNodeType.Container);
+  const lContainer = container.data;
+  let viewNode: LViewNode|null = scanForView(container, lContainer[ACTIVE_INDEX] !, viewBlockId);
+
+  if (viewNode) {
+    previousOrParentNode = viewNode;
+    ngDevMode && assertNodeType(previousOrParentNode, TNodeType.View);
+    isParent = true;
+    enterView(viewNode.data, viewNode);
+  } else {
+    // When we create a new LView, we always reset the state of the instructions.
+    const newView = createLViewData(
+        renderer, getOrCreateEmbeddedTView(viewBlockId, container), null, LViewFlags.CheckAlways,
+        getCurrentSanitizer());
+
+    if (lContainer[QUERIES]) {
+      newView[QUERIES] = lContainer[QUERIES] !.createView();
+    }
+
+    enterView(
+        newView, viewNode = createLNode(viewBlockId, TNodeType.View, null, null, null, newView));
+  }
+  if (container) {
+    if (creationMode) {
+      // it is a new view, insert it into collection of views for a given container
+      insertView(container, viewNode, lContainer[ACTIVE_INDEX] !);
+    }
+    lContainer[ACTIVE_INDEX] !++;
+  }
+  return getRenderFlags(viewNode.data);
+}
+
+/**
+ * Initialize the TView (e.g. static data) for the active embedded view.
+ *
+ * Each embedded view block must create or retrieve its own TView. Otherwise, the embedded view's
+ * static data for a particular node would overwrite the static data for a node in the view above
+ * it with the same index (since it's in the same template).
+ *
+ * @param viewIndex The index of the TView in TNode.tViews
+ * @param parent The parent container in which to look for the view's static data
+ * @returns TView
+ */
+function getOrCreateEmbeddedTView(viewIndex: number, parent: LContainerNode): TView {
+  ngDevMode && assertNodeType(parent, TNodeType.Container);
+  const containerTViews = (parent !.tNode as TContainerNode).tViews as TView[];
+  ngDevMode && assertDefined(containerTViews, 'TView expected');
+  ngDevMode && assertEqual(Array.isArray(containerTViews), true, 'TViews should be in an array');
+  if (viewIndex >= containerTViews.length || containerTViews[viewIndex] == null) {
+    containerTViews[viewIndex] =
+        createTView(viewIndex, null, tView.directiveRegistry, tView.pipeRegistry, null);
+  }
+  return containerTViews[viewIndex];
+}
+
+/** Marks the end of an embedded view. */
+export function embeddedViewEnd(): void {
+  refreshDescendantViews();
+  isParent = false;
+  previousOrParentNode = viewData[HOST_NODE] as LViewNode;
+  leaveView(viewData[PARENT] !);
+  ngDevMode && assertEqual(isParent, false, 'isParent');
+  ngDevMode && assertNodeType(previousOrParentNode, TNodeType.View);
+}
+
+/////////////
+
+/**
+ * Refreshes components by entering the component view and processing its bindings, queries, etc.
+ *
+ * @param adjustedElementIndex  Element index in LViewData[] (adjusted for HEADER_OFFSET)
+ */
+export function componentRefresh<T>(adjustedElementIndex: number): void {
+  ngDevMode && assertDataInRange(adjustedElementIndex);
+  const element = viewData[adjustedElementIndex] as LElementNode;
+  ngDevMode && assertNodeType(element, TNodeType.Element);
+  ngDevMode &&
+      assertDefined(element.data, `Component's host node should have an LViewData attached.`);
+  const hostView = element.data !;
+
+  // Only attached CheckAlways components or attached, dirty OnPush components should be checked
+  if (viewAttached(hostView) && hostView[FLAGS] & (LViewFlags.CheckAlways | LViewFlags.Dirty)) {
+    detectChangesInternal(hostView, element, hostView[CONTEXT]);
+  }
+}
+
+/** Returns a boolean for whether the view is attached */
+export function viewAttached(view: LViewData): boolean {
+  return (view[FLAGS] & LViewFlags.Attached) === LViewFlags.Attached;
+}
+
+/**
+ * Instruction to distribute projectable nodes among <ng-content> occurrences in a given template.
+ * It takes all the selectors from the entire component's template and decides where
+ * each projected node belongs (it re-distributes nodes among "buckets" where each "bucket" is
+ * backed by a selector).
+ *
+ * This function requires CSS selectors to be provided in 2 forms: parsed (by a compiler) and text,
+ * un-parsed form.
+ *
+ * The parsed form is needed for efficient matching of a node against a given CSS selector.
+ * The un-parsed, textual form is needed for support of the ngProjectAs attribute.
+ *
+ * Having a CSS selector in 2 different formats is not ideal, but alternatives have even more
+ * drawbacks:
+ * - having only a textual form would require runtime parsing of CSS selectors;
+ * - we can't have only a parsed as we can't re-construct textual form from it (as entered by a
+ * template author).
+ *
+ * @param selectors A collection of parsed CSS selectors
+ * @param rawSelectors A collection of CSS selectors in the raw, un-parsed form
+ */
+export function projectionDef(selectors?: CssSelectorList[], textSelectors?: string[]): void {
+  const componentNode: LElementNode = findComponentHost(viewData);
+
+  if (!componentNode.tNode.projection) {
+    const noOfNodeBuckets = selectors ? selectors.length + 1 : 1;
+    const pData: (TNode | null)[] = componentNode.tNode.projection =
+        new Array(noOfNodeBuckets).fill(null);
+    const tails: (TNode | null)[] = pData.slice();
+
+    let componentChild = componentNode.tNode.child;
+
+    while (componentChild !== null) {
+      const bucketIndex =
+          selectors ? matchingSelectorIndex(componentChild, selectors, textSelectors !) : 0;
+      const nextNode = componentChild.next;
+
+      if (tails[bucketIndex]) {
+        tails[bucketIndex] !.next = componentChild;
+      } else {
+        pData[bucketIndex] = componentChild;
+        componentChild.next = null;
+      }
+      tails[bucketIndex] = componentChild;
+
+      componentChild = nextNode;
+    }
+  }
+}
+
+/**
+ * Stack used to keep track of projection nodes in projection() instruction.
+ *
+ * This is deliberately created outside of projection() to avoid allocating
+ * a new array each time the function is called. Instead the array will be
+ * re-used by each invocation. This works because the function is not reentrant.
+ */
+const projectionNodeStack: LProjectionNode[] = [];
+
+/**
+ * Inserts previously re-distributed projected nodes. This instruction must be preceded by a call
+ * to the projectionDef instruction.
+ *
+ * @param nodeIndex
+ * @param selectorIndex:
+ *        - 0 when the selector is `*` (or unspecified as this is the default value),
+ *        - 1 based index of the selector from the {@link projectionDef}
+ */
+export function projection(nodeIndex: number, selectorIndex: number = 0, attrs?: string[]): void {
+  const node = createLNode(nodeIndex, TNodeType.Projection, null, null, attrs || null, null);
+
+  // We can't use viewData[HOST_NODE] because projection nodes can be nested in embedded views.
+  if (node.tNode.projection === null) node.tNode.projection = selectorIndex;
+
+  // `<ng-content>` has no content
+  isParent = false;
+
+  // re-distribution of projectable nodes is stored on a component's view level
+  const parent = getParentLNode(node);
+
+  if (canInsertNativeNode(parent, viewData)) {
+    const componentNode = findComponentHost(viewData);
+    let nodeToProject = (componentNode.tNode.projection as(TNode | null)[])[selectorIndex];
+    let projectedView = componentNode.view;
+    let projectionNodeIndex = -1;
+    let grandparent: LContainerNode;
+    const renderParent = parent.tNode.type === TNodeType.View ?
+        (grandparent = getParentLNode(parent) as LContainerNode) &&
+            grandparent.data[RENDER_PARENT] ! :
+        parent as LElementNode;
+
+    while (nodeToProject) {
+      if (nodeToProject.type === TNodeType.Projection) {
+        // This node is re-projected, so we must go up the tree to get its projected nodes.
+        const currentComponentHost = findComponentHost(projectedView);
+        const firstProjectedNode = (currentComponentHost.tNode.projection as(
+            TNode | null)[])[nodeToProject.projection as number];
+
+        if (firstProjectedNode) {
+          projectionNodeStack[++projectionNodeIndex] = projectedView[nodeToProject.index];
+          nodeToProject = firstProjectedNode;
+          projectedView = currentComponentHost.view;
+          continue;
+        }
+      } else {
+        const lNode = projectedView[nodeToProject.index];
+        lNode.tNode.flags |= TNodeFlags.isProjected;
+        appendProjectedNode(
+            lNode as LTextNode | LElementNode | LContainerNode, parent, viewData, renderParent);
+      }
+
+      // If we are finished with a list of re-projected nodes, we need to get
+      // back to the root projection node that was re-projected.
+      if (nodeToProject.next === null && projectedView !== componentNode.view) {
+        // move down into the view of the component we're projecting right now
+        const lNode = projectionNodeStack[projectionNodeIndex--];
+        nodeToProject = lNode.tNode;
+        projectedView = lNode.view;
+      }
+      nodeToProject = nodeToProject.next;
+    }
+  }
+}
+
+/**
+ * Adds LViewData or LContainer to the end of the current view tree.
+ *
+ * This structure will be used to traverse through nested views to remove listeners
+ * and call onDestroy callbacks.
+ *
+ * @param currentView The view where LViewData or LContainer should be added
+ * @param adjustedHostIndex Index of the view's host node in LViewData[], adjusted for header
+ * @param state The LViewData or LContainer to add to the view tree
+ * @returns The state passed in
+ */
+export function addToViewTree<T extends LViewData|LContainer>(
+    currentView: LViewData, adjustedHostIndex: number, state: T): T {
+  if (currentView[TAIL]) {
+    currentView[TAIL] ![NEXT] = state;
+  } else if (firstTemplatePass) {
+    tView.childIndex = adjustedHostIndex;
+  }
+  currentView[TAIL] = state;
+  return state;
+}
+
+///////////////////////////////
+//// Change detection
+///////////////////////////////
+
+/** If node is an OnPush component, marks its LViewData dirty. */
+export function markDirtyIfOnPush(node: LElementNode): void {
+  // Because data flows down the component tree, ancestors do not need to be marked dirty
+  if (node.data && !(node.data[FLAGS] & LViewFlags.CheckAlways)) {
+    node.data[FLAGS] |= LViewFlags.Dirty;
+  }
+}
+
+/**
+ * Wraps an event listener so its host view and its ancestor views will be marked dirty
+ * whenever the event fires. Necessary to support OnPush components.
+ */
+export function wrapListenerWithDirtyLogic(
+    view: LViewData, listenerFn: (e?: any) => any): (e: Event) => any {
+  return function(e: any) {
+    markViewDirty(view);
+    return listenerFn(e);
+  };
+}
+
+/**
+ * Wraps an event listener so its host view and its ancestor views will be marked dirty
+ * whenever the event fires. Also wraps with preventDefault behavior.
+ */
+export function wrapListenerWithDirtyAndDefault(
+    view: LViewData, listenerFn: (e?: any) => any): EventListener {
+  return function wrapListenerIn_markViewDirty(e: Event) {
+    markViewDirty(view);
+    if (listenerFn(e) === false) {
+      e.preventDefault();
+      // Necessary for legacy browsers that don't support preventDefault (e.g. IE)
+      e.returnValue = false;
+    }
+  };
+}
+
+/** Marks current view and all ancestors dirty */
+export function markViewDirty(view: LViewData): void {
+  let currentView: LViewData = view;
+
+  while (currentView[PARENT] != null) {
+    currentView[FLAGS] |= LViewFlags.Dirty;
+    currentView = currentView[PARENT] !;
+  }
+  currentView[FLAGS] |= LViewFlags.Dirty;
+  ngDevMode && assertDefined(currentView[CONTEXT], 'rootContext');
+  scheduleTick(currentView[CONTEXT] as RootContext);
+}
+
+
+/**
+ * Used to schedule change detection on the whole application.
+ *
+ * Unlike `tick`, `scheduleTick` coalesces multiple calls into one change detection run.
+ * It is usually called indirectly by calling `markDirty` when the view needs to be
+ * re-rendered.
+ *
+ * Typically `scheduleTick` uses `requestAnimationFrame` to coalesce multiple
+ * `scheduleTick` requests. The scheduling function can be overridden in
+ * `renderComponent`'s `scheduler` option.
+ */
+export function scheduleTick<T>(rootContext: RootContext) {
+  if (rootContext.clean == _CLEAN_PROMISE) {
+    let res: null|((val: null) => void);
+    rootContext.clean = new Promise<null>((r) => res = r);
+    rootContext.scheduler(() => {
+      tickRootContext(rootContext);
+      res !(null);
+      rootContext.clean = _CLEAN_PROMISE;
+    });
+  }
+}
+
+/**
+ * Used to perform change detection on the whole application.
+ *
+ * This is equivalent to `detectChanges`, but invoked on root component. Additionally, `tick`
+ * executes lifecycle hooks and conditionally checks components based on their
+ * `ChangeDetectionStrategy` and dirtiness.
+ *
+ * The preferred way to trigger change detection is to call `markDirty`. `markDirty` internally
+ * schedules `tick` using a scheduler in order to coalesce multiple `markDirty` calls into a
+ * single change detection run. By default, the scheduler is `requestAnimationFrame`, but can
+ * be changed when calling `renderComponent` and providing the `scheduler` option.
+ */
+export function tick<T>(component: T): void {
+  const rootView = getRootView(component);
+  const rootContext = rootView[CONTEXT] as RootContext;
+  tickRootContext(rootContext);
+}
+
+function tickRootContext(rootContext: RootContext) {
+  for (let i = 0; i < rootContext.components.length; i++) {
+    const rootComponent = rootContext.components[i];
+    const hostNode = _getComponentHostLElementNode(rootComponent);
+
+    ngDevMode && assertDefined(hostNode.data, 'Component host node should be attached to an LView');
+    renderComponentOrTemplate(hostNode, getRootView(rootComponent), rootComponent);
+  }
+}
+
+/**
+ * Retrieve the root view from any component by walking the parent `LViewData` until
+ * reaching the root `LViewData`.
+ *
+ * @param component any component
+ */
+
+export function getRootView(component: any): LViewData {
+  ngDevMode && assertDefined(component, 'component');
+  const lElementNode = _getComponentHostLElementNode(component);
+  let lViewData = lElementNode.view;
+  while (lViewData[PARENT]) {
+    lViewData = lViewData[PARENT] !;
+  }
+  return lViewData;
+}
+
+/**
+ * Synchronously perform change detection on a component (and possibly its sub-components).
+ *
+ * This function triggers change detection in a synchronous way on a component. There should
+ * be very little reason to call this function directly since a preferred way to do change
+ * detection is to {@link markDirty} the component and wait for the scheduler to call this method
+ * at some future point in time. This is because a single user action often results in many
+ * components being invalidated and calling change detection on each component synchronously
+ * would be inefficient. It is better to wait until all components are marked as dirty and
+ * then perform single change detection across all of the components
+ *
+ * @param component The component which the change detection should be performed on.
+ */
+export function detectChanges<T>(component: T): void {
+  const hostNode = _getComponentHostLElementNode(component);
+  ngDevMode &&
+      assertDefined(
+          hostNode.data, 'Component host node should be attached to an LViewData instance.');
+  detectChangesInternal(hostNode.data as LViewData, hostNode, component);
+}
+
+/**
+ * Synchronously perform change detection on a root view and its components.
+ *
+ * @param lViewData The view which the change detection should be performed on.
+ */
+export function detectChangesInRootView(lViewData: LViewData): void {
+  tickRootContext(lViewData[CONTEXT] as RootContext);
+}
+
+
+/**
+ * Checks the change detector and its children, and throws if any changes are detected.
+ *
+ * This is used in development mode to verify that running change detection doesn't
+ * introduce other changes.
+ */
+export function checkNoChanges<T>(component: T): void {
+  checkNoChangesMode = true;
+  try {
+    detectChanges(component);
+  } finally {
+    checkNoChangesMode = false;
+  }
+}
+
+/**
+ * Checks the change detector on a root view and its components, and throws if any changes are
+ * detected.
+ *
+ * This is used in development mode to verify that running change detection doesn't
+ * introduce other changes.
+ *
+ * @param lViewData The view which the change detection should be checked on.
+ */
+export function checkNoChangesInRootView(lViewData: LViewData): void {
+  checkNoChangesMode = true;
+  try {
+    detectChangesInRootView(lViewData);
+  } finally {
+    checkNoChangesMode = false;
+  }
+}
+
+/** Checks the view of the component provided. Does not gate on dirty checks or execute doCheck. */
+export function detectChangesInternal<T>(
+    hostView: LViewData, hostNode: LElementNode, component: T) {
+  const oldView = enterView(hostView, hostNode);
+  const hostTView = hostView[TVIEW];
+  const template = hostTView.template !;
+  const viewQuery = hostTView.viewQuery;
+
+  try {
+    namespaceHTML();
+    createViewQuery(viewQuery, hostView[FLAGS], component);
+    template(getRenderFlags(hostView), component);
+    refreshDescendantViews();
+    updateViewQuery(viewQuery, component);
+  } finally {
+    leaveView(oldView);
+  }
+}
+
+function createViewQuery<T>(
+    viewQuery: ComponentQuery<{}>| null, flags: LViewFlags, component: T): void {
+  if (viewQuery && (flags & LViewFlags.CreationMode)) {
+    viewQuery(RenderFlags.Create, component);
+  }
+}
+
+function updateViewQuery<T>(viewQuery: ComponentQuery<{}>| null, component: T): void {
+  if (viewQuery) {
+    viewQuery(RenderFlags.Update, component);
+  }
+}
+
+
+/**
+ * Mark the component as dirty (needing change detection).
+ *
+ * Marking a component dirty will schedule a change detection on this
+ * component at some point in the future. Marking an already dirty
+ * component as dirty is a noop. Only one outstanding change detection
+ * can be scheduled per component tree. (Two components bootstrapped with
+ * separate `renderComponent` will have separate schedulers)
+ *
+ * When the root component is bootstrapped with `renderComponent`, a scheduler
+ * can be provided.
+ *
+ * @param component Component to mark as dirty.
+ */
+export function markDirty<T>(component: T) {
+  ngDevMode && assertDefined(component, 'component');
+  const lElementNode = _getComponentHostLElementNode(component);
+  markViewDirty(lElementNode.view);
+}
+
+///////////////////////////////
+//// Bindings & interpolations
+///////////////////////////////
+
+export interface NO_CHANGE {
+  // This is a brand that ensures that this type can never match anything else
+  brand: 'NO_CHANGE';
+}
+
+/** A special value which designates that a value has not changed. */
+export const NO_CHANGE = {} as NO_CHANGE;
+
+/**
+ *  Initializes the binding start index. Will get inlined.
+ *
+ *  This function must be called before any binding related function is called
+ *  (ie `bind()`, `interpolationX()`, `pureFunctionX()`)
+ */
+function initBindings() {
+  ngDevMode && assertEqual(
+                   viewData[BINDING_INDEX], -1,
+                   'Binding index should not yet be set ' + viewData[BINDING_INDEX]);
+  if (tView.bindingStartIndex === -1) {
+    tView.bindingStartIndex = viewData.length;
+  }
+  viewData[BINDING_INDEX] = tView.bindingStartIndex;
+}
+
+/**
+ * Creates a single value binding.
+ *
+ * @param value Value to diff
+ */
+export function bind<T>(value: T): T|NO_CHANGE {
+  return bindingUpdated(value) ? value : NO_CHANGE;
+}
+
+/**
+ * Reserves slots for pure functions (`pureFunctionX` instructions)
+ *
+ * Bindings for pure functions are stored after the LNodes in the data array but before the binding.
+ *
+ *  ----------------------------------------------------------------------------
+ *  |  LNodes ... | pure function bindings | regular bindings / interpolations |
+ *  ----------------------------------------------------------------------------
+ *                                         ^
+ *                                         TView.bindingStartIndex
+ *
+ * Pure function instructions are given an offset from TView.bindingStartIndex.
+ * Subtracting the offset from TView.bindingStartIndex gives the first index where the bindings
+ * are stored.
+ *
+ * NOTE: reserveSlots instructions are only ever allowed at the very end of the creation block
+ */
+export function reserveSlots(numSlots: number) {
+  // Init the slots with a unique `NO_CHANGE` value so that the first change is always detected
+  // whether it happens or not during the first change detection pass - pure functions checks
+  // might be skipped when short-circuited.
+  viewData.length += numSlots;
+  viewData.fill(NO_CHANGE, -numSlots);
+  // We need to initialize the binding in case a `pureFunctionX` kind of binding instruction is
+  // called first in the update section.
+  initBindings();
+}
+
+/**
+ * Sets up the binding index before executing any `pureFunctionX` instructions.
+ *
+ * The index must be restored after the pure function is executed
+ *
+ * {@link reserveSlots}
+ */
+export function moveBindingIndexToReservedSlot(offset: number): number {
+  const currentSlot = viewData[BINDING_INDEX];
+  viewData[BINDING_INDEX] = tView.bindingStartIndex - offset;
+  return currentSlot;
+}
+
+/**
+ * Restores the binding index to the given value.
+ *
+ * This function is typically used to restore the index after a `pureFunctionX` has
+ * been executed.
+ */
+export function restoreBindingIndex(index: number): void {
+  viewData[BINDING_INDEX] = index;
+}
+
+/**
+ * Create interpolation bindings with a variable number of expressions.
+ *
+ * If there are 1 to 8 expressions `interpolation1()` to `interpolation8()` should be used instead.
+ * Those are faster because there is no need to create an array of expressions and iterate over it.
+ *
+ * `values`:
+ * - has static text at even indexes,
+ * - has evaluated expressions at odd indexes.
+ *
+ * Returns the concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
+ */
+export function interpolationV(values: any[]): string|NO_CHANGE {
+  ngDevMode && assertLessThan(2, values.length, 'should have at least 3 values');
+  ngDevMode && assertEqual(values.length % 2, 1, 'should have an odd number of values');
+
+  let different = false;
+
+  for (let i = 1; i < values.length; i += 2) {
+    // Check if bindings (odd indexes) have changed
+    bindingUpdated(values[i]) && (different = true);
+  }
+
+  if (!different) {
+    return NO_CHANGE;
+  }
+
+  // Build the updated content
+  let content = values[0];
+  for (let i = 1; i < values.length; i += 2) {
+    content += stringify(values[i]) + values[i + 1];
+  }
+
+  return content;
+}
+
+/**
+ * Creates an interpolation binding with 1 expression.
+ *
+ * @param prefix static value used for concatenation only.
+ * @param v0 value checked for change.
+ * @param suffix static value used for concatenation only.
+ */
+export function interpolation1(prefix: string, v0: any, suffix: string): string|NO_CHANGE {
+  const different = bindingUpdated(v0);
+
+  return different ? prefix + stringify(v0) + suffix : NO_CHANGE;
+}
+
+/** Creates an interpolation binding with 2 expressions. */
+export function interpolation2(
+    prefix: string, v0: any, i0: string, v1: any, suffix: string): string|NO_CHANGE {
+  const different = bindingUpdated2(v0, v1);
+
+  return different ? prefix + stringify(v0) + i0 + stringify(v1) + suffix : NO_CHANGE;
+}
+
+/** Creates an interpolation binding with 3 expressions. */
+export function interpolation3(
+    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string): string|
+    NO_CHANGE {
+  let different = bindingUpdated2(v0, v1);
+  different = bindingUpdated(v2) || different;
+
+  return different ? prefix + stringify(v0) + i0 + stringify(v1) + i1 + stringify(v2) + suffix :
+                     NO_CHANGE;
+}
+
+/** Create an interpolation binding with 4 expressions. */
+export function interpolation4(
+    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
+    suffix: string): string|NO_CHANGE {
+  const different = bindingUpdated4(v0, v1, v2, v3);
+
+  return different ?
+      prefix + stringify(v0) + i0 + stringify(v1) + i1 + stringify(v2) + i2 + stringify(v3) +
+          suffix :
+      NO_CHANGE;
+}
+
+/** Creates an interpolation binding with 5 expressions. */
+export function interpolation5(
+    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
+    i3: string, v4: any, suffix: string): string|NO_CHANGE {
+  let different = bindingUpdated4(v0, v1, v2, v3);
+  different = bindingUpdated(v4) || different;
+
+  return different ?
+      prefix + stringify(v0) + i0 + stringify(v1) + i1 + stringify(v2) + i2 + stringify(v3) + i3 +
+          stringify(v4) + suffix :
+      NO_CHANGE;
+}
+
+/** Creates an interpolation binding with 6 expressions. */
+export function interpolation6(
+    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
+    i3: string, v4: any, i4: string, v5: any, suffix: string): string|NO_CHANGE {
+  let different = bindingUpdated4(v0, v1, v2, v3);
+  different = bindingUpdated2(v4, v5) || different;
+
+  return different ?
+      prefix + stringify(v0) + i0 + stringify(v1) + i1 + stringify(v2) + i2 + stringify(v3) + i3 +
+          stringify(v4) + i4 + stringify(v5) + suffix :
+      NO_CHANGE;
+}
+
+/** Creates an interpolation binding with 7 expressions. */
+export function interpolation7(
+    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
+    i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string): string|
+    NO_CHANGE {
+  let different = bindingUpdated4(v0, v1, v2, v3);
+  different = bindingUpdated2(v4, v5) || different;
+  different = bindingUpdated(v6) || different;
+
+  return different ?
+      prefix + stringify(v0) + i0 + stringify(v1) + i1 + stringify(v2) + i2 + stringify(v3) + i3 +
+          stringify(v4) + i4 + stringify(v5) + i5 + stringify(v6) + suffix :
+      NO_CHANGE;
+}
+
+/** Creates an interpolation binding with 8 expressions. */
+export function interpolation8(
+    prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
+    i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
+    suffix: string): string|NO_CHANGE {
+  let different = bindingUpdated4(v0, v1, v2, v3);
+  different = bindingUpdated4(v4, v5, v6, v7) || different;
+
+  return different ?
+      prefix + stringify(v0) + i0 + stringify(v1) + i1 + stringify(v2) + i2 + stringify(v3) + i3 +
+          stringify(v4) + i4 + stringify(v5) + i5 + stringify(v6) + i6 + stringify(v7) + suffix :
+      NO_CHANGE;
+}
+
+/** Store a value in the `data` at a given `index`. */
+export function store<T>(index: number, value: T): void {
+  // We don't store any static data for local variables, so the first time
+  // we see the template, we should store as null to avoid a sparse array
+  const adjustedIndex = index + HEADER_OFFSET;
+  if (adjustedIndex >= tView.data.length) {
+    tView.data[adjustedIndex] = null;
+  }
+  viewData[adjustedIndex] = value;
+}
+
+/**
+ * Retrieves a local reference from the current contextViewData.
+ *
+ * If the reference to retrieve is in a parent view, this instruction is used in conjunction
+ * with a nextContext() call, which walks up the tree and updates the contextViewData instance.
+ *
+ * @param index The index of the local ref in contextViewData.
+ */
+export function reference<T>(index: number) {
+  return loadInternal<T>(index, contextViewData);
+}
+
+function walkUpViews(nestingLevel: number, currentView: LViewData): LViewData {
+  while (nestingLevel > 0) {
+    ngDevMode && assertDefined(
+                     currentView[DECLARATION_VIEW],
+                     'Declaration view should be defined if nesting level is greater than 0.');
+    currentView = currentView[DECLARATION_VIEW] !;
+    nestingLevel--;
+  }
+  return currentView;
+}
+
+/** Retrieves a value from the `directives` array. */
+export function loadDirective<T>(index: number): T {
+  ngDevMode && assertDefined(directives, 'Directives array should be defined if reading a dir.');
+  ngDevMode && assertDataInRange(index, directives !);
+  return directives ![index];
+}
+
+export function loadQueryList<T>(queryListIdx: number): QueryList<T> {
+  ngDevMode && assertDefined(
+                   viewData[CONTENT_QUERIES],
+                   'Content QueryList array should be defined if reading a query.');
+  ngDevMode && assertDataInRange(queryListIdx, viewData[CONTENT_QUERIES] !);
+
+  return viewData[CONTENT_QUERIES] ![queryListIdx];
+}
+
+/** Retrieves a value from current `viewData`. */
+export function load<T>(index: number): T {
+  return loadInternal<T>(index, viewData);
+}
+
+export function loadElement(index: number): LElementNode {
+  return loadElementInternal(index, viewData);
+}
+
+/** Gets the current binding value and increments the binding index. */
+export function consumeBinding(): any {
+  ngDevMode && assertDataInRange(viewData[BINDING_INDEX]);
+  ngDevMode &&
+      assertNotEqual(
+          viewData[viewData[BINDING_INDEX]], NO_CHANGE, 'Stored value should never be NO_CHANGE.');
+  return viewData[viewData[BINDING_INDEX]++];
+}
+
+/** Updates binding if changed, then returns whether it was updated. */
+export function bindingUpdated(value: any): boolean {
+  ngDevMode && assertNotEqual(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');
+  if (viewData[BINDING_INDEX] === -1) initBindings();
+  const bindingIndex = viewData[BINDING_INDEX];
+
+  if (bindingIndex >= viewData.length) {
+    viewData[viewData[BINDING_INDEX]++] = value;
+  } else if (isDifferent(viewData[bindingIndex], value, checkNoChangesMode)) {
+    throwErrorIfNoChangesMode(creationMode, checkNoChangesMode, viewData[bindingIndex], value);
+    viewData[viewData[BINDING_INDEX]++] = value;
+  } else {
+    viewData[BINDING_INDEX]++;
+    return false;
+  }
+  return true;
+}
+
+/** Updates binding if changed, then returns the latest value. */
+export function checkAndUpdateBinding(value: any): any {
+  bindingUpdated(value);
+  return value;
+}
+
+/** Updates 2 bindings if changed, then returns whether either was updated. */
+export function bindingUpdated2(exp1: any, exp2: any): boolean {
+  const different = bindingUpdated(exp1);
+  return bindingUpdated(exp2) || different;
+}
+
+/** Updates 4 bindings if changed, then returns whether any was updated. */
+export function bindingUpdated4(exp1: any, exp2: any, exp3: any, exp4: any): boolean {
+  const different = bindingUpdated2(exp1, exp2);
+  return bindingUpdated2(exp3, exp4) || different;
+}
+
+export function getTView(): TView {
+  return tView;
+}
+
+/**
+ * Registers a QueryList, associated with a content query, for later refresh (part of a view
+ * refresh).
+ */
+export function registerContentQuery<Q>(queryList: QueryList<Q>): void {
+  const savedContentQueriesLength =
+      (viewData[CONTENT_QUERIES] || (viewData[CONTENT_QUERIES] = [])).push(queryList);
+  if (firstTemplatePass) {
+    const currentDirectiveIndex = directives !.length - 1;
+    const tViewContentQueries = tView.contentQueries || (tView.contentQueries = []);
+    const lastSavedDirectiveIndex =
+        tView.contentQueries.length ? tView.contentQueries[tView.contentQueries.length - 2] : -1;
+    if (currentDirectiveIndex !== lastSavedDirectiveIndex) {
+      tViewContentQueries.push(currentDirectiveIndex, savedContentQueriesLength - 1);
+    }
+  }
+}
+
+export function assertPreviousIsParent() {
+  assertEqual(isParent, true, 'previousOrParentNode should be a parent');
+}
+
+function assertHasParent() {
+  assertDefined(getParentLNode(previousOrParentNode), 'previousOrParentNode should have a parent');
+}
+
+function assertDataInRange(index: number, arr?: any[]) {
+  if (arr == null) arr = viewData;
+  assertDataInRangeInternal(index, arr || viewData);
+}
+
+function assertDataNext(index: number, arr?: any[]) {
+  if (arr == null) arr = viewData;
+  assertEqual(
+      arr.length, index, `index ${index} expected to be at the end of arr (length ${arr.length})`);
+}
+
+/**
+ * On the first template pass, the reserved slots should be set `NO_CHANGE`.
+ *
+ * If not, they might not have been actually reserved.
+ */
+export function assertReservedSlotInitialized(slotOffset: number, numSlots: number) {
+  if (firstTemplatePass) {
+    const startIndex = tView.bindingStartIndex - slotOffset;
+    for (let i = 0; i < numSlots; i++) {
+      assertEqual(
+          viewData[startIndex + i], NO_CHANGE,
+          'The reserved slots should be set to `NO_CHANGE` on first template pass');
+    }
+  }
+}
+
+export function _getComponentHostLElementNode<T>(component: T): LElementNode {
+  ngDevMode && assertDefined(component, 'expecting component got null');
+  const lElementNode = (component as any)[NG_HOST_SYMBOL] as LElementNode;
+  ngDevMode && assertDefined(component, 'object is not a component');
+  return lElementNode;
+}
+
+export const CLEAN_PROMISE = _CLEAN_PROMISE;
+export const ROOT_DIRECTIVE_INDICES = _ROOT_DIRECTIVE_INDICES;
diff --git a/packages/core/src/render3/interfaces/container.ts b/packages/core/src/render3/interfaces/container.ts
new file mode 100644
index 000000000000..402aa95afc3c
--- /dev/null
+++ b/packages/core/src/render3/interfaces/container.ts
@@ -0,0 +1,94 @@
+/**
+ * @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 {LElementNode, LViewNode} from './node';
+import {LQueries} from './query';
+import {LViewData, NEXT, PARENT, QUERIES} from './view';
+
+/**
+ * Below are constants for LContainer indices to help us look up LContainer members
+ * without having to remember the specific indices.
+ * Uglify will inline these when minifying so there shouldn't be a cost.
+ */
+export const ACTIVE_INDEX = 0;
+// PARENT, NEXT, and QUERIES are indices 1, 2, and 3.
+// As we already have these constants in LViewData, we don't need to re-create them.
+export const VIEWS = 4;
+export const RENDER_PARENT = 5;
+
+/**
+ * The state associated with an LContainerNode.
+ *
+ * This is an array so that its structure is closer to LViewData. This helps
+ * when traversing the view tree (which is a mix of containers and component
+ * views), so we can jump to viewOrContainer[NEXT] in the same way regardless
+ * of type.
+ */
+export interface LContainer extends Array<any> {
+  /**
+   * The next active index in the views array to read or write to. This helps us
+   * keep track of where we are in the views array.
+   * In the case the LContainer is created for a ViewContainerRef,
+   * it is set to null to identify this scenario, as indices are "absolute" in that case,
+   * i.e. provided directly by the user of the ViewContainerRef API.
+   */
+  [ACTIVE_INDEX]: number|null;
+
+  /**
+   * Access to the parent view is necessary so we can propagate back
+   * up from inside a container to parent[NEXT].
+   */
+  [PARENT]: LViewData|null;
+
+  /**
+   * This allows us to jump from a container to a sibling container or component
+   * view with the same parent, so we can remove listeners efficiently.
+   */
+  [NEXT]: LViewData|LContainer|null;
+
+  /**
+   * Queries active for this container - all the views inserted to / removed from
+   * this container are reported to queries referenced here.
+   */
+  [QUERIES]: LQueries|null;
+
+  /**
+   * A list of the container's currently active child views. Views will be inserted
+   * here as they are added and spliced from here when they are removed. We need
+   * to keep a record of current views so we know which views are already in the DOM
+   * (and don't need to be re-added) and so we can remove views from the DOM when they
+   * are no longer required.
+   */
+  [VIEWS]: LViewNode[];
+
+  /**
+   * Parent Element which will contain the location where all of the Views will be
+   * inserted into to.
+   *
+   * If `renderParent` is `null` it is headless. This means that it is contained
+   * in another `LViewNode` which in turn is contained in another `LContainerNode` and
+   * therefore it does not yet have its own parent.
+   *
+   * If `renderParent` is not `null` then it may be:
+   * - same as `LContainerNode.parent` in which case it is just a normal container.
+   * - different from `LContainerNode.parent` in which case it has been re-projected.
+   *   In other words `LContainerNode.parent` is logical parent where as
+   *   `LContainer.projectedParent` is render parent.
+   *
+   * When views are inserted into `LContainerNode` then `renderParent` is:
+   * - `null`, we are in `LViewNode` keep going up a hierarchy until actual
+   *   `renderParent` is found.
+   * - not `null`, then use the `projectedParent.native` as the `RElement` to insert
+   *   `LViewNode`s into.
+   */
+  [RENDER_PARENT]: LElementNode|null;
+}
+
+// Note: This hack is necessary so we don't erroneously get a circular dependency
+// failure based on types.
+export const unusedValueExportToPlacateAjd = 1;
diff --git a/packages/core/src/render3/interfaces/definition.ts b/packages/core/src/render3/interfaces/definition.ts
new file mode 100644
index 000000000000..c6bb7890ced1
--- /dev/null
+++ b/packages/core/src/render3/interfaces/definition.ts
@@ -0,0 +1,337 @@
+/**
+ * @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 {Provider, ViewEncapsulation} from '../../core';
+import {Type} from '../../type';
+import {CssSelectorList} from './projection';
+
+
+/**
+ * Definition of what a template rendering function should look like for a component.
+ */
+export type ComponentTemplate<T> = {
+  (rf: RenderFlags, ctx: T): void; ngPrivateData?: never;
+};
+
+/**
+ * Definition of what a query function should look like.
+ */
+export type ComponentQuery<T> = ComponentTemplate<T>;
+
+/**
+ * Flags passed into template functions to determine which blocks (i.e. creation, update)
+ * should be executed.
+ *
+ * Typically, a template runs both the creation block and the update block on initialization and
+ * subsequent runs only execute the update block. However, dynamically created views require that
+ * the creation block be executed separately from the update block (for backwards compat).
+ */
+export const enum RenderFlags {
+  /* Whether to run the creation block (e.g. create elements and directives) */
+  Create = 0b01,
+
+  /* Whether to run the update block (e.g. refresh bindings) */
+  Update = 0b10
+}
+
+/**
+ * A subclass of `Type` which has a static `ngComponentDef`:`ComponentDef` field making it
+ * consumable for rendering.
+ */
+export interface ComponentType<T> extends Type<T> { ngComponentDef: never; }
+
+/**
+ * A subclass of `Type` which has a static `ngDirectiveDef`:`DirectiveDef` field making it
+ * consumable for rendering.
+ */
+export interface DirectiveType<T> extends Type<T> { ngDirectiveDef: never; }
+
+export const enum DirectiveDefFlags {ContentQuery = 0b10}
+
+/**
+ * A subclass of `Type` which has a static `ngPipeDef`:`PipeDef` field making it
+ * consumable for rendering.
+ */
+export interface PipeType<T> extends Type<T> { ngPipeDef: never; }
+
+/**
+ * A version of {@link DirectiveDef} that represents the runtime type shape only, and excludes
+ * metadata parameters.
+ */
+export type DirectiveDefInternal<T> = DirectiveDef<T, string>;
+
+/**
+ * Runtime information for classes that are inherited by components or directives
+ * that aren't defined as components or directives.
+ *
+ * This is an internal data structure used by the render to determine what inputs
+ * and outputs should be inherited.
+ *
+ * See: {@link defineBase}
+ */
+export interface BaseDef<T> {
+  /**
+   * A dictionary mapping the inputs' minified property names to their public API names, which
+   * are their aliases if any, or their original unminified property names
+   * (as in `@Input('alias') propertyName: any;`).
+   */
+  readonly inputs: {[P in keyof T]: string};
+
+  /**
+   * @deprecated This is only here because `NgOnChanges` incorrectly uses declared name instead of
+   * public or minified name.
+   */
+  readonly declaredInputs: {[P in keyof T]: P};
+
+  /**
+   * A dictionary mapping the outputs' minified property names to their public API names, which
+   * are their aliases if any, or their original unminified property names
+   * (as in `@Output('alias') propertyName: any;`).
+   */
+  readonly outputs: {[P in keyof T]: P};
+}
+
+/**
+ * Runtime link information for Directives.
+ *
+ * This is internal data structure used by the render to link
+ * directives into templates.
+ *
+ * NOTE: Always use `defineDirective` function to create this object,
+ * never create the object directly since the shape of this object
+ * can change between versions.
+ *
+ * @param Selector type metadata specifying the selector of the directive or component
+ *
+ * See: {@link defineDirective}
+ */
+export interface DirectiveDef<T, Selector extends string> extends BaseDef<T> {
+  /** Token representing the directive. Used by DI. */
+  type: Type<T>;
+
+  /** Function that makes a directive public to the DI system. */
+  diPublic: ((def: DirectiveDef<T, string>) => void)|null;
+
+  /** The selectors that will be used to match nodes to this directive. */
+  selectors: CssSelectorList;
+
+  /**
+   * Name under which the directive is exported (for use with local references in template)
+   */
+  readonly exportAs: string|null;
+
+  /**
+   * Factory function used to create a new directive instance.
+   *
+   * Usually returns the directive instance, but if the directive has a content query,
+   * it instead returns an array that contains the instance as well as content query data.
+   */
+  factory(): T|[T];
+
+  /**
+   * Function to create instances of content queries associated with a given directive.
+   */
+  contentQueries: (() => void)|null;
+
+  /** Refreshes content queries associated with directives in a given view */
+  contentQueriesRefresh: ((directiveIndex: number, queryIndex: number) => void)|null;
+
+  /** Refreshes host bindings on the associated directive. */
+  hostBindings: ((directiveIndex: number, elementIndex: number) => void)|null;
+
+  /**
+   * Static attributes to set on host element.
+   *
+   * Even indices: attribute name
+   * Odd indices: attribute value
+   */
+  attributes: string[]|null;
+
+  /* The following are lifecycle hooks for this component */
+  onInit: (() => void)|null;
+  doCheck: (() => void)|null;
+  afterContentInit: (() => void)|null;
+  afterContentChecked: (() => void)|null;
+  afterViewInit: (() => void)|null;
+  afterViewChecked: (() => void)|null;
+  onDestroy: (() => void)|null;
+
+  /**
+   * The features applied to this directive
+   */
+  features: DirectiveDefFeature[]|null;
+}
+
+/**
+ * A version of {@link ComponentDef} that represents the runtime type shape only, and excludes
+ * metadata parameters.
+ */
+export type ComponentDefInternal<T> = ComponentDef<T, string>;
+
+/**
+ * Runtime link information for Components.
+ *
+ * This is internal data structure used by the render to link
+ * components into templates.
+ *
+ * NOTE: Always use `defineComponent` function to create this object,
+ * never create the object directly since the shape of this object
+ * can change between versions.
+ *
+ * See: {@link defineComponent}
+ */
+export interface ComponentDef<T, Selector extends string> extends DirectiveDef<T, Selector> {
+  /**
+   * Runtime unique component ID.
+   */
+  id: string;
+
+  /**
+   * The View template of the component.
+   */
+  readonly template: ComponentTemplate<T>;
+
+  /**
+   * A set of styles that the component needs to be present for component to render correctly.
+   */
+  readonly styles: string[];
+
+  /**
+   * Query-related instructions for a component.
+   */
+  readonly viewQuery: ComponentQuery<T>|null;
+
+  /**
+   * The view encapsulation type, which determines how styles are applied to
+   * DOM elements. One of
+   * - `Emulated` (default): Emulate native scoping of styles.
+   * - `Native`: Use the native encapsulation mechanism of the renderer.
+   * - `ShadowDom`: Use modern [ShadowDOM](https://w3c.github.io/webcomponents/spec/shadow/) and
+   *   create a ShadowRoot for component's host element.
+   * - `None`: Do not provide any template or style encapsulation.
+   */
+  readonly encapsulation: ViewEncapsulation;
+
+  /**
+   * Defines arbitrary developer-defined data to be stored on a renderer instance.
+   * This is useful for renderers that delegate to other renderers.
+   */
+  readonly data: {[kind: string]: any};
+
+  /** Whether or not this component's ChangeDetectionStrategy is OnPush */
+  readonly onPush: boolean;
+
+  /**
+   * Defines the set of injectable providers that are visible to a Directive and its content DOM
+   * children.
+   */
+  readonly providers?: Provider[];
+
+  /**
+   * Defines the set of injectable providers that are visible to a Directive and its view DOM
+   * children only.
+   */
+  readonly viewProviders?: Provider[];
+
+  /**
+   * Registry of directives and components that may be found in this view.
+   *
+   * The property is either an array of `DirectiveDef`s or a function which returns the array of
+   * `DirectiveDef`s. The function is necessary to be able to support forward declarations.
+   */
+  directiveDefs: DirectiveDefListOrFactory|null;
+
+  /**
+   * Registry of pipes that may be found in this view.
+   *
+   * The property is either an array of `PipeDefs`s or a function which returns the array of
+   * `PipeDefs`s. The function is necessary to be able to support forward declarations.
+   */
+  pipeDefs: PipeDefListOrFactory|null;
+}
+
+/**
+ * Runtime link information for Pipes.
+ *
+ * This is internal data structure used by the renderer to link
+ * pipes into templates.
+ *
+ * NOTE: Always use `definePipe` function to create this object,
+ * never create the object directly since the shape of this object
+ * can change between versions.
+ *
+ * See: {@link definePipe}
+ */
+export interface PipeDef<T, S extends string> {
+  /**
+   * Pipe name.
+   *
+   * Used to resolve pipe in templates.
+   */
+  name: S;
+
+  /**
+   * Factory function used to create a new pipe instance.
+   */
+  factory: () => T;
+
+  /**
+   * Whether or not the pipe is pure.
+   *
+   * Pure pipes result only depends on the pipe input and not on internal
+   * state of the pipe.
+   */
+  pure: boolean;
+
+  /* The following are lifecycle hooks for this pipe */
+  onDestroy: (() => void)|null;
+}
+
+export type PipeDefInternal<T> = PipeDef<T, string>;
+
+export type DirectiveDefFeature = <T>(directiveDef: DirectiveDef<T, string>) => void;
+export type ComponentDefFeature = <T>(componentDef: ComponentDef<T, string>) => void;
+
+/**
+ * Type used for directiveDefs on component definition.
+ *
+ * The function is necessary to be able to support forward declarations.
+ */
+export type DirectiveDefListOrFactory = (() => DirectiveDefList) | DirectiveDefList;
+
+export type DirectiveDefList = (DirectiveDef<any, string>| ComponentDef<any, string>)[];
+
+export type DirectiveTypesOrFactory = (() => DirectiveTypeList) | DirectiveTypeList;
+
+export type DirectiveTypeList =
+    (DirectiveDef<any, string>| ComponentDef<any, string>|
+     Type<any>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */)[];
+
+/**
+ * Type used for PipeDefs on component definition.
+ *
+ * The function is necessary to be able to support forward declarations.
+ */
+export type PipeDefListOrFactory = (() => PipeDefList) | PipeDefList;
+
+export type PipeDefList = PipeDefInternal<any>[];
+
+export type PipeTypesOrFactory = (() => DirectiveTypeList) | DirectiveTypeList;
+
+export type PipeTypeList =
+    (PipeDefInternal<any>|
+     Type<any>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */)[];
+
+
+// Note: This hack is necessary so we don't erroneously get a circular dependency
+// failure based on types.
+export const unusedValueExportToPlacateAjd = 1;
+
+export const enum InitialStylingFlags {
+  VALUES_MODE = 0b1,
+}
diff --git a/packages/core/src/render3/interfaces/injector.ts b/packages/core/src/render3/interfaces/injector.ts
new file mode 100644
index 000000000000..7d76cac0c1b5
--- /dev/null
+++ b/packages/core/src/render3/interfaces/injector.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 {ChangeDetectorRef} from '../../change_detection/change_detector_ref';
+import {ElementRef} from '../../linker/element_ref';
+import {TemplateRef} from '../../linker/template_ref';
+import {ViewContainerRef} from '../../linker/view_container_ref';
+
+import {LContainerNode, LElementContainerNode, LElementNode} from './node';
+
+export interface LInjector {
+  /**
+   * We need to store a reference to the injector's parent so DI can keep looking up
+   * the injector tree until it finds the dependency it's looking for.
+   */
+  readonly parent: LInjector|null;
+
+  /**
+   * Allows access to the directives array in that node's static data and to
+   * the node's flags (for starting directive index and directive size). Necessary
+   * for DI to retrieve a directive from the data array if injector indicates
+   * it is there.
+   */
+  readonly node: LElementNode|LElementContainerNode|LContainerNode;
+
+  /**
+   * The following bloom filter determines whether a directive is available
+   * on the associated node or not. This prevents us from searching the directives
+   * array at this level unless it's probable the directive is in it.
+   *
+   * - bf0: Check directive IDs 0-31  (IDs are % 128)
+   * - bf1: Check directive IDs 32-63
+   * - bf2: Check directive IDs 64-95
+   * - bf3: Check directive IDs 96-127
+   * - bf4: Check directive IDs 128-159
+   * - bf5: Check directive IDs 160 - 191
+   * - bf6: Check directive IDs 192 - 223
+   * - bf7: Check directive IDs 224 - 255
+   *
+   * See: https://en.wikipedia.org/wiki/Bloom_filter for more about bloom filters.
+   */
+  bf0: number;
+  bf1: number;
+  bf2: number;
+  bf3: number;
+  bf4: number;
+  bf5: number;
+  bf6: number;
+  bf7: number;
+
+  /**
+   * cbf0 - cbf7 properties determine whether a directive is available through a
+   * parent injector. They refer to the merged values of parent bloom filters. This
+   * allows us to skip looking up the chain unless it's probable that directive exists
+   * up the chain.
+   */
+  cbf0: number;
+  cbf1: number;
+  cbf2: number;
+  cbf3: number;
+  cbf4: number;
+  cbf5: number;
+  cbf6: number;
+  cbf7: number;
+
+  /** Stores the TemplateRef so subsequent injections of the TemplateRef get the same instance. */
+  templateRef: TemplateRef<any>|null;
+
+  /** Stores the ViewContainerRef so subsequent injections of the ViewContainerRef get the same
+   * instance. */
+  viewContainerRef: ViewContainerRef|null;
+
+  /** Stores the ElementRef so subsequent injections of the ElementRef get the same instance. */
+  elementRef: ElementRef|null;
+
+  /**
+   * Stores the ChangeDetectorRef so subsequent injections of the ChangeDetectorRef get the
+   * same instance.
+   */
+  changeDetectorRef: ChangeDetectorRef|null;
+}
+
+// Note: This hack is necessary so we don't erroneously get a circular dependency
+// failure based on types.
+export const unusedValueExportToPlacateAjd = 1;
diff --git a/packages/core/src/render3/interfaces/node.ts b/packages/core/src/render3/interfaces/node.ts
new file mode 100644
index 000000000000..3d6682a0a540
--- /dev/null
+++ b/packages/core/src/render3/interfaces/node.ts
@@ -0,0 +1,526 @@
+/**
+ * @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 {StylingContext} from '../styling';
+
+import {LContainer} from './container';
+import {LInjector} from './injector';
+import {LQueries} from './query';
+import {RComment, RElement, RText} from './renderer';
+import {LViewData, TView} from './view';
+
+
+
+/**
+ * TNodeType corresponds to the TNode.type property. It contains information
+ * on how to map a particular set of bits in LNode.flags to the node type.
+ */
+export const enum TNodeType {
+  Container = 0b000,
+  Projection = 0b001,
+  View = 0b010,
+  Element = 0b011,
+  ViewOrElement = 0b010,
+  ElementContainer = 0b100,
+}
+
+/**
+ * Corresponds to the TNode.flags property.
+ */
+export const enum TNodeFlags {
+  /** The number of directives on this node is encoded on the least significant bits */
+  DirectiveCountMask = 0b00000000000000000000111111111111,
+
+  /** This bit is set if the node is a component */
+  isComponent = 0b00000000000000000001000000000000,
+
+  /** This bit is set if the node has been projected */
+  isProjected = 0b00000000000000000010000000000000,
+
+  /** This bit is set if the node has any content queries */
+  hasContentQuery = 0b00000000000000000100000000000000,
+
+  /** The index of the first directive on this node is encoded on the most significant bits  */
+  DirectiveStartingIndexShift = 15,
+}
+
+/**
+ * LNode is an internal data structure which is used for the incremental DOM algorithm.
+ * The "L" stands for "Logical" to differentiate between `RNodes` (actual rendered DOM
+ * node) and our logical representation of DOM nodes, `LNodes`.
+ *
+ * The data structure is optimized for speed and size.
+ *
+ * In order to be fast, all subtypes of `LNode` should have the same shape.
+ * Because size of the `LNode` matters, many fields have multiple roles depending
+ * on the `LNode` subtype.
+ *
+ * See: https://en.wikipedia.org/wiki/Inline_caching#Monomorphic_inline_caching
+ *
+ * NOTE: This is a private data structure and should not be exported by any of the
+ * instructions.
+ */
+export interface LNode {
+  /**
+   * The associated DOM node. Storing this allows us to:
+   *  - append children to their element parents in the DOM (e.g. `parent.native.appendChild(...)`)
+   *  - retrieve the sibling elements of text nodes whose creation / insertion has been delayed
+   */
+  readonly native: RComment|RElement|RText|null;
+
+  /**
+   * If regular LElementNode, LTextNode, and LProjectionNode then `data` will be null.
+   * If LElementNode with component, then `data` contains LViewData.
+   * If LViewNode, then `data` contains the LViewData.
+   * If LContainerNode, then `data` contains LContainer.
+   */
+  readonly data: LViewData|LContainer|null;
+
+
+  /**
+   * Each node belongs to a view.
+   *
+   * When the injector is walking up a tree, it needs access to the `directives` (part of view).
+   */
+  readonly view: LViewData;
+
+  /** The injector associated with this node. Necessary for DI. */
+  nodeInjector: LInjector|null;
+
+  /**
+   * Pointer to the corresponding TNode object, which stores static
+   * data about this node.
+   */
+  tNode: TNode;
+
+  /**
+   * A pointer to an LContainerNode created by directives requesting ViewContainerRef
+   */
+  // TODO(kara): Remove when removing LNodes
+  dynamicLContainerNode: LContainerNode|null;
+}
+
+
+/** LNode representing an element. */
+export interface LElementNode extends LNode {
+  /** The DOM element associated with this node. */
+  readonly native: RElement;
+
+  /** If Component then data has LView (light DOM) */
+  readonly data: LViewData|null;
+}
+
+/** LNode representing <ng-container>. */
+export interface LElementContainerNode extends LNode {
+  /** The DOM comment associated with this node. */
+  readonly native: RComment;
+  readonly data: null;
+}
+
+/** LNode representing a #text node. */
+export interface LTextNode extends LNode {
+  /** The text node associated with this node. */
+  native: RText;
+  readonly data: null;
+  dynamicLContainerNode: null;
+}
+
+/** Abstract node which contains root nodes of a view. */
+export interface LViewNode extends LNode {
+  readonly native: null;
+  readonly data: LViewData;
+  dynamicLContainerNode: null;
+}
+
+/** Abstract node container which contains other views. */
+export interface LContainerNode extends LNode {
+  /*
+   * This comment node is appended to the container's parent element to mark where
+   * in the DOM the container's child views should be added.
+   *
+   * If the container is a root node of a view, this comment will not be appended
+   * until the parent view is processed.
+   */
+  native: RComment;
+  readonly data: LContainer;
+}
+
+
+export interface LProjectionNode extends LNode {
+  readonly native: null;
+  readonly data: null;
+  dynamicLContainerNode: null;
+}
+
+/**
+ * A set of marker values to be used in the attributes arrays. Those markers indicate that some
+ * items are not regular attributes and the processing should be adapted accordingly.
+ */
+export const enum AttributeMarker {
+  /**
+   * Marker indicates that the following 3 values in the attributes array are:
+   * namespaceUri, attributeName, attributeValue
+   * in that order.
+   */
+  NamespaceURI = 0,
+
+  /**
+   * This marker indicates that the following attribute names were extracted from bindings (ex.:
+   * [foo]="exp") and / or event handlers (ex. (bar)="doSth()").
+   * Taking the above bindings and outputs as an example an attributes array could look as follows:
+   * ['class', 'fade in', AttributeMarker.SelectOnly, 'foo', 'bar']
+   */
+  SelectOnly = 1
+}
+
+/**
+ * A combination of:
+ * - attribute names and values
+ * - special markers acting as flags to alter attributes processing.
+ */
+export type TAttributes = (string | AttributeMarker)[];
+
+/**
+ * LNode binding data (flyweight) for a particular node that is shared between all templates
+ * of a specific type.
+ *
+ * If a property is:
+ *    - PropertyAliases: that property's data was generated and this is it
+ *    - Null: that property's data was already generated and nothing was found.
+ *    - Undefined: that property's data has not yet been generated
+ *
+ * see: https://en.wikipedia.org/wiki/Flyweight_pattern for more on the Flyweight pattern
+ */
+export interface TNode {
+  /** The type of the TNode. See TNodeType. */
+  type: TNodeType;
+
+  /**
+   * Index of the TNode in TView.data and corresponding LNode in LView.data.
+   *
+   * This is necessary to get from any TNode to its corresponding LNode when
+   * traversing the node tree.
+   *
+   * If index is -1, this is a dynamically created container node or embedded view node.
+   */
+  index: number;
+
+  /**
+   * This number stores two values using its bits:
+   *
+   * - the number of directives on that node (first 12 bits)
+   * - the starting index of the node's directives in the directives array (last 20 bits).
+   *
+   * These two values are necessary so DI can effectively search the directives associated
+   * with a node without searching the whole directives array.
+   */
+  flags: TNodeFlags;
+
+  /** The tag name associated with this node. */
+  tagName: string|null;
+
+  /**
+   * Attributes associated with an element. We need to store attributes to support various use-cases
+   * (attribute injection, content projection with selectors, directives matching).
+   * Attributes are stored statically because reading them from the DOM would be way too slow for
+   * content projection and queries.
+   *
+   * Since attrs will always be calculated first, they will never need to be marked undefined by
+   * other instructions.
+   *
+   * For regular attributes a name of an attribute and its value alternate in the array.
+   * e.g. ['role', 'checkbox']
+   * This array can contain flags that will indicate "special attributes" (attributes with
+   * namespaces, attributes extracted from bindings and outputs).
+   */
+  attrs: TAttributes|null;
+
+  /**
+   * A set of local names under which a given element is exported in a template and
+   * visible to queries. An entry in this array can be created for different reasons:
+   * - an element itself is referenced, ex.: `<div #foo>`
+   * - a component is referenced, ex.: `<my-cmpt #foo>`
+   * - a directive is referenced, ex.: `<my-cmpt #foo="directiveExportAs">`.
+   *
+   * A given element might have different local names and those names can be associated
+   * with a directive. We store local names at even indexes while odd indexes are reserved
+   * for directive index in a view (or `-1` if there is no associated directive).
+   *
+   * Some examples:
+   * - `<div #foo>` => `["foo", -1]`
+   * - `<my-cmpt #foo>` => `["foo", myCmptIdx]`
+   * - `<my-cmpt #foo #bar="directiveExportAs">` => `["foo", myCmptIdx, "bar", directiveIdx]`
+   * - `<div #foo #bar="directiveExportAs">` => `["foo", -1, "bar", directiveIdx]`
+   */
+  localNames: (string|number)[]|null;
+
+  /** Information about input properties that need to be set once from attribute data. */
+  initialInputs: InitialInputData|null|undefined;
+
+  /**
+   * Input data for all directives on this node.
+   *
+   * - `undefined` means that the prop has not been initialized yet,
+   * - `null` means that the prop has been initialized but no inputs have been found.
+   */
+  inputs: PropertyAliases|null|undefined;
+
+  /**
+   * Output data for all directives on this node.
+   *
+   * - `undefined` means that the prop has not been initialized yet,
+   * - `null` means that the prop has been initialized but no outputs have been found.
+   */
+  outputs: PropertyAliases|null|undefined;
+
+  /**
+   * The TView or TViews attached to this node.
+   *
+   * If this TNode corresponds to an LContainerNode with inline views, the container will
+   * need to store separate static data for each of its view blocks (TView[]). Otherwise,
+   * nodes in inline views with the same index as nodes in their parent views will overwrite
+   * each other, as they are in the same template.
+   *
+   * Each index in this array corresponds to the static data for a certain
+   * view. So if you had V(0) and V(1) in a container, you might have:
+   *
+   * [
+   *   [{tagName: 'div', attrs: ...}, null],     // V(0) TView
+   *   [{tagName: 'button', attrs ...}, null]    // V(1) TView
+   *
+   * If this TNode corresponds to an LContainerNode with a template (e.g. structural
+   * directive), the template's TView will be stored here.
+   *
+   * If this TNode corresponds to an LElementNode, tViews will be null .
+   */
+  tViews: TView|TView[]|null;
+
+  /**
+   * The next sibling node. Necessary so we can propagate through the root nodes of a view
+   * to insert them or remove them from the DOM.
+   */
+  next: TNode|null;
+
+  /**
+   * First child of the current node.
+   *
+   * For component nodes, the child will always be a ContentChild (in same view).
+   * For embedded view nodes, the child will be in their child view.
+   */
+  child: TNode|null;
+
+  /**
+   * Parent node (in the same view only).
+   *
+   * We need a reference to a node's parent so we can append the node to its parent's native
+   * element at the appropriate time.
+   *
+   * If the parent would be in a different view (e.g. component host), this property will be null.
+   * It's important that we don't try to cross component boundaries when retrieving the parent
+   * because the parent will change (e.g. index, attrs) depending on where the component was
+   * used (and thus shouldn't be stored on TNode). In these cases, we retrieve the parent through
+   * LView.node instead (which will be instance-specific).
+   *
+   * If this is an inline view node (V), the parent will be its container.
+   */
+  parent: TElementNode|TContainerNode|null;
+
+  /**
+   * A pointer to a TContainerNode created by directives requesting ViewContainerRef
+   */
+  dynamicContainerNode: TNode|null;
+
+  /**
+   * If this node is part of an i18n block, it indicates whether this container is part of the DOM
+   * If this node is not part of an i18n block, this field is null.
+   */
+  detached: boolean|null;
+
+  stylingTemplate: StylingContext|null;
+  /**
+   * List of projected TNodes for a given component host element OR index into the said nodes.
+   *
+   * For easier discussion assume this example:
+   * `<parent>`'s view definition:
+   * ```
+   * <child id="c1">content1</child>
+   * <child id="c2"><span>content2</span></child>
+   * ```
+   * `<child>`'s view definition:
+   * ```
+   * <ng-content id="cont1"></ng-content>
+   * ```
+   *
+   * If `Array.isArray(projection)` then `TNode` is a host element:
+   * - `projection` stores the content nodes which are to be projected.
+   *    - The nodes represent categories defined by the selector: For example:
+   *      `<ng-content/><ng-content select="abc"/>` would represent the heads for `<ng-content/>`
+   *      and `<ng-content select="abc"/>` respectively.
+   *    - The nodes we store in `projection` are heads only, we used `.next` to get their
+   *      siblings.
+   *    - The nodes `.next` is sorted/rewritten as part of the projection setup.
+   *    - `projection` size is equal to the number of projections `<ng-content>`. The size of
+   *      `c1` will be `1` because `<child>` has only one `<ng-content>`.
+   * - we store `projection` with the host (`c1`, `c2`) rather than the `<ng-content>` (`cont1`)
+   *   because the same component (`<child>`) can be used in multiple locations (`c1`, `c2`) and as
+   *   a result have different set of nodes to project.
+   * - without `projection` it would be difficult to efficiently traverse nodes to be projected.
+   *
+   * If `typeof projection == 'number'` then `TNode` is a `<ng-content>` element:
+   * - `projection` is an index of the host's `projection`Nodes.
+   *   - This would return the first head node to project:
+   *     `getHost(currentTNode).projection[currentTNode.projection]`.
+   * - When projecting nodes the parent node retrieved may be a `<ng-content>` node, in which case
+   *   the process is recursive in nature (not implementation).
+   */
+  projection: (TNode|null)[]|number|null;
+}
+
+/** Static data for an LElementNode  */
+export interface TElementNode extends TNode {
+  /** Index in the data[] array */
+  index: number;
+  child: TElementNode|TTextNode|TContainerNode|TProjectionNode|null;
+  /**
+   * Element nodes will have parents unless they are the first node of a component or
+   * embedded view (which means their parent is in a different view and must be
+   * retrieved using LView.node).
+   */
+  parent: TElementNode|null;
+  tViews: null;
+
+  /**
+   * If this is a component TNode with projection, this will be an array of projected
+   * TNodes (see TNode.projection for more info). If it's a regular element node or a
+   * component without projection, it will be null.
+   */
+  projection: (TNode|null)[]|null;
+}
+
+/** Static data for an LTextNode  */
+export interface TTextNode extends TNode {
+  /** Index in the data[] array */
+  index: number;
+  child: null;
+  /**
+   * Text nodes will have parents unless they are the first node of a component or
+   * embedded view (which means their parent is in a different view and must be
+   * retrieved using LView.node).
+   */
+  parent: TElementNode|null;
+  tViews: null;
+  projection: null;
+}
+
+/** Static data for an LContainerNode */
+export interface TContainerNode extends TNode {
+  /**
+   * Index in the data[] array.
+   *
+   * If it's -1, this is a dynamically created container node that isn't stored in
+   * data[] (e.g. when you inject ViewContainerRef) .
+   */
+  index: number;
+  child: null;
+
+  /**
+   * Container nodes will have parents unless:
+   *
+   * - They are the first node of a component or embedded view
+   * - They are dynamically created
+   */
+  parent: TElementNode|null;
+  tViews: TView|TView[]|null;
+  projection: null;
+}
+
+/** Static data for an LViewNode  */
+export interface TViewNode extends TNode {
+  /** If -1, it's a dynamically created view. Otherwise, it is the view block ID. */
+  index: number;
+  child: TElementNode|TTextNode|TContainerNode|TProjectionNode|null;
+  parent: TContainerNode|null;
+  tViews: null;
+  projection: null;
+}
+
+/** Static data for an LProjectionNode  */
+export interface TProjectionNode extends TNode {
+  /** Index in the data[] array */
+  child: null;
+  /**
+   * Projection nodes will have parents unless they are the first node of a component
+   * or embedded view (which means their parent is in a different view and must be
+   * retrieved using LView.node).
+   */
+  parent: TElementNode|null;
+  tViews: null;
+
+  /** Index of the projection node. (See TNode.projection for more info.) */
+  projection: number;
+}
+
+/**
+ * This mapping is necessary so we can set input properties and output listeners
+ * properly at runtime when property names are minified or aliased.
+ *
+ * Key: unminified / public input or output name
+ * Value: array containing minified / internal name and related directive index
+ *
+ * The value must be an array to support inputs and outputs with the same name
+ * on the same node.
+ */
+export type PropertyAliases = {
+  // This uses an object map because using the Map type would be too slow
+  [key: string]: PropertyAliasValue
+};
+
+/**
+ * Store the runtime input or output names for all the directives.
+ *
+ * - Even indices: directive index
+ * - Odd indices: minified / internal name
+ *
+ * e.g. [0, 'change-minified']
+ */
+export type PropertyAliasValue = (number | string)[];
+
+
+/**
+ * This array contains information about input properties that
+ * need to be set once from attribute data. It's ordered by
+ * directive index (relative to element) so it's simple to
+ * look up a specific directive's initial input data.
+ *
+ * Within each sub-array:
+ *
+ * Even indices: minified/internal input name
+ * Odd indices: initial value
+ *
+ * If a directive on a node does not have any input properties
+ * that should be set from attributes, its index is set to null
+ * to avoid a sparse array.
+ *
+ * e.g. [null, ['role-min', 'button']]
+ */
+export type InitialInputData = (InitialInputs | null)[];
+
+/**
+ * Used by InitialInputData to store input properties
+ * that should be set once from attributes.
+ *
+ * Even indices: minified/internal input name
+ * Odd indices: initial value
+ *
+ * e.g. ['role-min', 'button']
+ */
+export type InitialInputs = string[];
+
+// Note: This hack is necessary so we don't erroneously get a circular dependency
+// failure based on types.
+export const unusedValueExportToPlacateAjd = 1;
diff --git a/packages/core/src/render3/interfaces/projection.ts b/packages/core/src/render3/interfaces/projection.ts
new file mode 100644
index 000000000000..beffaa06db62
--- /dev/null
+++ b/packages/core/src/render3/interfaces/projection.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
+ */
+
+
+/**
+ * Expresses a single CSS Selector.
+ *
+ * Beginning of array
+ * - First index: element name
+ * - Subsequent odd indices: attr keys
+ * - Subsequent even indices: attr values
+ *
+ * After SelectorFlags.CLASS flag
+ * - Class name values
+ *
+ * SelectorFlags.NOT flag
+ * - Changes the mode to NOT
+ * - Can be combined with other flags to set the element / attr / class mode
+ *
+ * e.g. SelectorFlags.NOT | SelectorFlags.ELEMENT
+ *
+ * Example:
+ * Original: `div.foo.bar[attr1=val1][attr2]`
+ * Parsed: ['div', 'attr1', 'val1', 'attr2', '', SelectorFlags.CLASS, 'foo', 'bar']
+ *
+ * Original: 'div[attr1]:not(.foo[attr2])
+ * Parsed: [
+ *  'div', 'attr1', '',
+ *  SelectorFlags.NOT | SelectorFlags.ATTRIBUTE 'attr2', '', SelectorFlags.CLASS, 'foo'
+ * ]
+ *
+ * See more examples in node_selector_matcher_spec.ts
+ */
+export type CssSelector = (string | SelectorFlags)[];
+
+/**
+ * A list of CssSelectors.
+ *
+ * A directive or component can have multiple selectors. This type is used for
+ * directive defs so any of the selectors in the list will match that directive.
+ *
+ * Original: 'form, [ngForm]'
+ * Parsed: [['form'], ['', 'ngForm', '']]
+ */
+export type CssSelectorList = CssSelector[];
+
+/** Flags used to build up CssSelectors */
+export const enum SelectorFlags {
+  /** Indicates this is the beginning of a new negative selector */
+  NOT = 0b0001,
+
+  /** Mode for matching attributes */
+  ATTRIBUTE = 0b0010,
+
+  /** Mode for matching tag names */
+  ELEMENT = 0b0100,
+
+  /** Mode for matching class names */
+  CLASS = 0b1000,
+}
+
+export const NG_PROJECT_AS_ATTR_NAME = 'ngProjectAs';
+
+// Note: This hack is necessary so we don't erroneously get a circular dependency
+// failure based on types.
+export const unusedValueExportToPlacateAjd = 1;
diff --git a/packages/core/src/render3/interfaces/query.ts b/packages/core/src/render3/interfaces/query.ts
new file mode 100644
index 000000000000..21950de5759a
--- /dev/null
+++ b/packages/core/src/render3/interfaces/query.ts
@@ -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 {QueryList} from '../../linker';
+import {Type} from '../../type';
+import {LNode} from './node';
+
+/** Used for tracking queries (e.g. ViewChild, ContentChild). */
+export interface LQueries {
+  /**
+   * The parent LQueries instance.
+   *
+   * When there is a content query, a new LQueries instance is created to avoid mutating any
+   * existing LQueries. After we are done searching content children, the parent property allows
+   * us to traverse back up to the original LQueries instance to continue to search for matches
+   * in the main view.
+   */
+  parent: LQueries|null;
+
+  /**
+   * Ask queries to prepare copy of itself. This assures that tracking new queries on content nodes
+   * doesn't mutate list of queries tracked on a parent node. We will clone LQueries before
+   * constructing content queries.
+   */
+  clone(): LQueries;
+
+  /**
+   * Notify `LQueries` that a new `LNode` has been created and needs to be added to query results
+   * if matching query predicate.
+   */
+  addNode(node: LNode): LQueries|null;
+
+  /**
+   * Notify `LQueries` that a new LContainer was added to ivy data structures. As a result we need
+   * to prepare room for views that might be inserted into this container.
+   */
+  container(): LQueries|null;
+
+  /**
+   * Notify `LQueries` that a new `LView` has been created. As a result we need to prepare room
+   * and collect nodes that match query predicate.
+   */
+  createView(): LQueries|null;
+
+  /**
+   * Notify `LQueries` that a new `LView` has been added to `LContainer`. As a result all
+   * the matching nodes from this view should be added to container's queries.
+   */
+  insertView(newViewIndex: number): void;
+
+  /**
+   * Notify `LQueries` that an `LView` has been removed from `LContainer`. As a result all
+   * the matching nodes from this view should be removed from container's queries.
+   */
+  removeView(): void;
+
+  /**
+   * Add additional `QueryList` to track.
+   *
+   * @param queryList `QueryList` to update with changes.
+   * @param predicate Either `Type` or selector array of [key, value] predicates.
+   * @param descend If true the query will recursively apply to the children.
+   * @param read Indicates which token should be read from DI for this query.
+   */
+  track<T>(
+      queryList: QueryList<T>, predicate: Type<any>|string[], descend?: boolean,
+      read?: QueryReadType<T>|Type<T>): void;
+}
+
+export class QueryReadType<T> { private defeatStructuralTyping: any; }
+
+// Note: This hack is necessary so we don't erroneously get a circular dependency
+// failure based on types.
+export const unusedValueExportToPlacateAjd = 1;
diff --git a/packages/core/src/render3/interfaces/renderer.ts b/packages/core/src/render3/interfaces/renderer.ts
new file mode 100644
index 000000000000..36fb6f802ad0
--- /dev/null
+++ b/packages/core/src/render3/interfaces/renderer.ts
@@ -0,0 +1,152 @@
+/**
+ * @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
+ */
+
+/**
+ * The goal here is to make sure that the browser DOM API is the Renderer.
+ * We do this by defining a subset of DOM API to be the renderer and than
+ * use that time for rendering.
+ *
+ * At runtime we can than use the DOM api directly, in server or web-worker
+ * it will be easy to implement such API.
+ */
+
+import {RendererStyleFlags2, RendererType2} from '../../render/api';
+
+
+// TODO: cleanup once the code is merged in angular/angular
+export enum RendererStyleFlags3 {
+  Important = 1 << 0,
+  DashCase = 1 << 1
+}
+
+export type Renderer3 = ObjectOrientedRenderer3 | ProceduralRenderer3;
+
+/**
+ * Object Oriented style of API needed to create elements and text nodes.
+ *
+ * This is the native browser API style, e.g. operations are methods on individual objects
+ * like HTMLElement. With this style, no additional code is needed as a facade
+ * (reducing payload size).
+ * */
+export interface ObjectOrientedRenderer3 {
+  createComment(data: string): RComment;
+  createElement(tagName: string): RElement;
+  createElementNS(namespace: string, tagName: string): RElement;
+  createTextNode(data: string): RText;
+
+  querySelector(selectors: string): RElement|null;
+}
+
+/** Returns whether the `renderer` is a `ProceduralRenderer3` */
+export function isProceduralRenderer(renderer: ProceduralRenderer3 | ObjectOrientedRenderer3):
+    renderer is ProceduralRenderer3 {
+  return !!((renderer as any).listen);
+}
+
+/**
+ * Procedural style of API needed to create elements and text nodes.
+ *
+ * In non-native browser environments (e.g. platforms such as web-workers), this is the
+ * facade that enables element manipulation. This also facilitates backwards compatibility
+ * with Renderer2.
+ */
+export interface ProceduralRenderer3 {
+  destroy(): void;
+  createComment(value: string): RComment;
+  createElement(name: string, namespace?: string|null): RElement;
+  createText(value: string): RText;
+  /**
+   * This property is allowed to be null / undefined,
+   * in which case the view engine won't call it.
+   * This is used as a performance optimization for production mode.
+   */
+  destroyNode?: ((node: RNode) => void)|null;
+  appendChild(parent: RElement, newChild: RNode): void;
+  insertBefore(parent: RNode, newChild: RNode, refChild: RNode|null): void;
+  removeChild(parent: RElement, oldChild: RNode): void;
+  selectRootElement(selectorOrNode: string|any): RElement;
+
+  setAttribute(el: RElement, name: string, value: string, namespace?: string|null): void;
+  removeAttribute(el: RElement, name: string, namespace?: string|null): void;
+  addClass(el: RElement, name: string): void;
+  removeClass(el: RElement, name: string): void;
+  setStyle(
+      el: RElement, style: string, value: any,
+      flags?: RendererStyleFlags2|RendererStyleFlags3): void;
+  removeStyle(el: RElement, style: string, flags?: RendererStyleFlags2|RendererStyleFlags3): void;
+  setProperty(el: RElement, name: string, value: any): void;
+  setValue(node: RText, value: string): void;
+
+  // TODO(misko): Deprecate in favor of addEventListener/removeEventListener
+  listen(target: RNode, eventName: string, callback: (event: any) => boolean | void): () => void;
+}
+
+export interface RendererFactory3 {
+  createRenderer(hostElement: RElement|null, rendererType: RendererType2|null): Renderer3;
+  begin?(): void;
+  end?(): void;
+}
+
+export const domRendererFactory3: RendererFactory3 = {
+  createRenderer: (hostElement: RElement | null, rendererType: RendererType2 | null):
+                      Renderer3 => { return document;}
+};
+
+/** Subset of API needed for appending elements and text nodes. */
+export interface RNode {
+  removeChild(oldChild: RNode): void;
+
+  /**
+   * Insert a child node.
+   *
+   * Used exclusively for adding View root nodes into ViewAnchor location.
+   */
+  insertBefore(newChild: RNode, refChild: RNode|null, isViewRoot: boolean): void;
+
+  /**
+   * Append a child node.
+   *
+   * Used exclusively for building up DOM which are static (ie not View roots)
+   */
+  appendChild(newChild: RNode): RNode;
+}
+
+/**
+ * Subset of API needed for writing attributes, properties, and setting up
+ * listeners on Element.
+ */
+export interface RElement extends RNode {
+  style: RCssStyleDeclaration;
+  classList: RDomTokenList;
+  className: string;
+  setAttribute(name: string, value: string): void;
+  removeAttribute(name: string): void;
+  setAttributeNS(namespaceURI: string, qualifiedName: string, value: string): void;
+  addEventListener(type: string, listener: EventListener, useCapture?: boolean): void;
+  removeEventListener(type: string, listener?: EventListener, options?: boolean): void;
+
+  setProperty?(name: string, value: any): void;
+}
+
+export interface RCssStyleDeclaration {
+  removeProperty(propertyName: string): string;
+  setProperty(propertyName: string, value: string|null, priority?: string): void;
+}
+
+export interface RDomTokenList {
+  add(token: string): void;
+  remove(token: string): void;
+}
+
+export interface RText extends RNode { textContent: string|null; }
+
+export interface RComment extends RNode {}
+
+// Note: This hack is necessary so we don't erroneously get a circular dependency
+// failure based on types.
+export const unusedValueExportToPlacateAjd = 1;
diff --git a/packages/core/src/render3/interfaces/view.ts b/packages/core/src/render3/interfaces/view.ts
new file mode 100644
index 000000000000..bf3f2aeb6d88
--- /dev/null
+++ b/packages/core/src/render3/interfaces/view.ts
@@ -0,0 +1,522 @@
+/**
+ * @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 {QueryList} from '../../linker';
+import {Sanitizer} from '../../sanitization/security';
+
+import {LContainer} from './container';
+import {ComponentQuery, ComponentTemplate, DirectiveDefInternal, DirectiveDefList, PipeDefInternal, PipeDefList} from './definition';
+import {LElementNode, LViewNode, TNode} from './node';
+import {LQueries} from './query';
+import {Renderer3} from './renderer';
+
+/** Size of LViewData's header. Necessary to adjust for it when setting slots.  */
+export const HEADER_OFFSET = 17;
+
+// Below are constants for LViewData indices to help us look up LViewData members
+// without having to remember the specific indices.
+// Uglify will inline these when minifying so there shouldn't be a cost.
+export const TVIEW = 0;
+export const PARENT = 1;
+export const NEXT = 2;
+export const QUERIES = 3;
+export const FLAGS = 4;
+export const HOST_NODE = 5;
+export const BINDING_INDEX = 6;
+export const DIRECTIVES = 7;
+export const CLEANUP = 8;
+export const CONTEXT = 9;
+export const INJECTOR = 10;
+export const RENDERER = 11;
+export const SANITIZER = 12;
+export const TAIL = 13;
+export const CONTAINER_INDEX = 14;
+export const CONTENT_QUERIES = 15;
+export const DECLARATION_VIEW = 16;
+
+// This interface replaces the real LViewData interface if it is an arg or a
+// return value of a public instruction. This ensures we don't need to expose
+// the actual interface, which should be kept private.
+export interface OpaqueViewState {
+  '__brand__': 'Brand for OpaqueViewState that nothing will match';
+}
+
+
+/**
+ * `LViewData` stores all of the information needed to process the instructions as
+ * they are invoked from the template. Each embedded view and component view has its
+ * own `LViewData`. When processing a particular view, we set the `viewData` to that
+ * `LViewData`. When that view is done processing, the `viewData` is set back to
+ * whatever the original `viewData` was before (the parent `LViewData`).
+ *
+ * Keeping separate state for each view facilities view insertion / deletion, so we
+ * don't have to edit the data array based on which views are present.
+ */
+export interface LViewData extends Array<any> {
+  /**
+   * The static data for this view. We need a reference to this so we can easily walk up the
+   * node tree in DI and get the TView.data array associated with a node (where the
+   * directive defs are stored).
+   */
+  [TVIEW]: TView;
+
+  /**
+   * The parent view is needed when we exit the view and must restore the previous
+   * `LViewData`. Without this, the render method would have to keep a stack of
+   * views as it is recursively rendering templates.
+   *
+   * This is the "insertion" view for embedded views. This allows us to properly
+   * destroy embedded views.
+   */
+  [PARENT]: LViewData|null;
+
+  /**
+   *
+   * The next sibling LViewData or LContainer.
+   *
+   * Allows us to propagate between sibling view states that aren't in the same
+   * container. Embedded views already have a node.next, but it is only set for
+   * views in the same container. We need a way to link component views and views
+   * across containers as well.
+   */
+  [NEXT]: LViewData|LContainer|null;
+
+  /** Queries active for this view - nodes from a view are reported to those queries. */
+  [QUERIES]: LQueries|null;
+
+  /** Flags for this view. See LViewFlags for more info. */
+  [FLAGS]: LViewFlags;
+
+  /**
+   * Pointer to the `LViewNode` or `LElementNode` which represents the root of the view.
+   *
+   * If `LViewNode`, this is an embedded view of a container. We need this to be able to
+   * efficiently find the `LViewNode` when inserting the view into an anchor.
+   *
+   * If `LElementNode`, this is the LView of a component.
+   */
+  // TODO(kara): Replace with index
+  [HOST_NODE]: LViewNode|LElementNode;
+
+  /**
+   * The binding index we should access next.
+   *
+   * This is stored so that bindings can continue where they left off
+   * if a view is left midway through processing bindings (e.g. if there is
+   * a setter that creates an embedded view, like in ngIf).
+   */
+  [BINDING_INDEX]: number;
+
+  /**
+   * An array of directive instances in the current view.
+   *
+   * These must be stored separately from LNodes because their presence is
+   * unknown at compile-time and thus space cannot be reserved in data[].
+   */
+  // TODO: flatten into LViewData[]
+  [DIRECTIVES]: any[]|null;
+
+  /**
+   * When a view is destroyed, listeners need to be released and outputs need to be
+   * unsubscribed. This context array stores both listener functions wrapped with
+   * their context and output subscription instances for a particular view.
+   *
+   * These change per LView instance, so they cannot be stored on TView. Instead,
+   * TView.cleanup saves an index to the necessary context in this array.
+   */
+  // TODO: flatten into LViewData[]
+  [CLEANUP]: any[]|null;
+
+  /**
+   * - For dynamic views, this is the context with which to render the template (e.g.
+   *   `NgForContext`), or `{}` if not defined explicitly.
+   * - For root view of the root component the context contains change detection data.
+   * - For non-root components, the context is the component instance,
+   * - For inline views, the context is null.
+   */
+  [CONTEXT]: {}|RootContext|null;
+
+  /** An optional Module Injector to be used as fall back after Element Injectors are consulted. */
+  [INJECTOR]: Injector|null;
+
+  /** Renderer to be used for this view. */
+  [RENDERER]: Renderer3;
+
+  /** An optional custom sanitizer. */
+  [SANITIZER]: Sanitizer|null;
+
+  /**
+   * The last LViewData or LContainer beneath this LViewData in the hierarchy.
+   *
+   * The tail allows us to quickly add a new state to the end of the view list
+   * without having to propagate starting from the first child.
+   */
+  [TAIL]: LViewData|LContainer|null;
+
+  /**
+   * The index of the parent container's host node. Applicable only to embedded views that
+   * have been inserted dynamically. Will be -1 for component views and inline views.
+   *
+   * This is necessary to jump from dynamically created embedded views to their parent
+   * containers because their parent cannot be stored on the TViewNode (views may be inserted
+   * in multiple containers, so the parent cannot be shared between view instances).
+   */
+  [CONTAINER_INDEX]: number;
+
+  /**
+   * Stores QueryLists associated with content queries of a directive. This data structure is
+   * filled-in as part of a directive creation process and is later used to retrieve a QueryList to
+   * be refreshed.
+   */
+  [CONTENT_QUERIES]: QueryList<any>[]|null;
+
+  /**
+   * View where this view's template was declared.
+   *
+   * Only applicable for dynamically created views. Will be null for inline/component views.
+   *
+   * The template for a dynamically created view may be declared in a different view than
+   * it is inserted. We already track the "insertion view" (view where the template was
+   * inserted) in LViewData[PARENT], but we also need access to the "declaration view"
+   * (view where the template was declared). Otherwise, we wouldn't be able to call the
+   * view's template function with the proper contexts. Context should be inherited from
+   * the declaration view tree, not the insertion view tree.
+   *
+   * Example (AppComponent template):
+   *
+   * <ng-template #foo></ng-template>       <-- declared here -->
+   * <some-comp [tpl]="foo"></some-comp>    <-- inserted inside this component -->
+   *
+   * The <ng-template> above is declared in the AppComponent template, but it will be passed into
+   * SomeComp and inserted there. In this case, the declaration view would be the AppComponent,
+   * but the insertion view would be SomeComp. When we are removing views, we would want to
+   * traverse through the insertion view to clean up listeners. When we are calling the
+   * template function during change detection, we need the declaration view to get inherited
+   * context.
+   */
+  [DECLARATION_VIEW]: LViewData|null;
+}
+
+/** Flags associated with an LView (saved in LViewData[FLAGS]) */
+export const enum LViewFlags {
+  /**
+   * Whether or not the view is in creationMode.
+   *
+   * This must be stored in the view rather than using `data` as a marker so that
+   * we can properly support embedded views. Otherwise, when exiting a child view
+   * back into the parent view, `data` will be defined and `creationMode` will be
+   * improperly reported as false.
+   */
+  CreationMode = 0b000001,
+
+  /** Whether this view has default change detection strategy (checks always) or onPush */
+  CheckAlways = 0b000010,
+
+  /** Whether or not this view is currently dirty (needing check) */
+  Dirty = 0b000100,
+
+  /** Whether or not this view is currently attached to change detection tree. */
+  Attached = 0b001000,
+
+  /**
+   *  Whether or not the init hooks have run.
+   *
+   * If on, the init hooks haven't yet been run and should be executed by the first component that
+   * runs OR the first cR() instruction that runs (so inits are run for the top level view before
+   * any embedded views).
+   */
+  RunInit = 0b010000,
+
+  /** Whether or not this view is destroyed. */
+  Destroyed = 0b100000,
+}
+
+/**
+ * The static data for an LView (shared between all templates of a
+ * given type).
+ *
+ * Stored on the template function as ngPrivateData.
+ */
+export interface TView {
+  /**
+   * ID for inline views to determine whether a view is the same as the previous view
+   * in a certain position. If it's not, we know the new view needs to be inserted
+   * and the one that exists needs to be removed (e.g. if/else statements)
+   *
+   * If this is -1, then this is a component view or a dynamically created view.
+   */
+  readonly id: number;
+
+  /**
+   * The template function used to refresh the view of dynamically created views
+   * and components. Will be null for inline views.
+   */
+  template: ComponentTemplate<{}>|null;
+
+  /**
+   * A function containing query-related instructions.
+   */
+  viewQuery: ComponentQuery<{}>|null;
+
+  /**
+   * Pointer to the `TNode` that represents the root of the view.
+   *
+   * If this is a `TNode` for an `LViewNode`, this is an embedded view of a container.
+   * We need this pointer to be able to efficiently find this node when inserting the view
+   * into an anchor.
+   *
+   * If this is a `TNode` for an `LElementNode`, this is the TView of a component.
+   */
+  node: TNode;
+
+  /** Whether or not this template has been processed. */
+  firstTemplatePass: boolean;
+
+  /** Static data equivalent of LView.data[]. Contains TNodes. */
+  data: TData;
+
+  /**
+   * The binding start index is the index at which the data array
+   * starts to store bindings only. Saving this value ensures that we
+   * will begin reading bindings at the correct point in the array when
+   * we are in update mode.
+   */
+  bindingStartIndex: number;
+
+  /**
+   * Index of the host node of the first LView or LContainer beneath this LView in
+   * the hierarchy.
+   *
+   * Necessary to store this so views can traverse through their nested views
+   * to remove listeners and call onDestroy callbacks.
+   *
+   * For embedded views, we store the index of an LContainer's host rather than the first
+   * LView to avoid managing splicing when views are added/removed.
+   */
+  childIndex: number;
+
+  /**
+   * Selector matches for a node are temporarily cached on the TView so the
+   * DI system can eagerly instantiate directives on the same node if they are
+   * created out of order. They are overwritten after each node.
+   *
+   * <div dirA dirB></div>
+   *
+   * e.g. DirA injects DirB, but DirA is created first. DI should instantiate
+   * DirB when it finds that it's on the same node, but not yet created.
+   *
+   * Even indices: Directive defs
+   * Odd indices:
+   *   - Null if the associated directive hasn't been instantiated yet
+   *   - Directive index, if associated directive has been created
+   *   - String, temporary 'CIRCULAR' token set while dependencies are being resolved
+   */
+  currentMatches: CurrentMatchesList|null;
+
+  /**
+   * Directive and component defs that have already been matched to nodes on
+   * this view.
+   *
+   * Defs are stored at the same index in TView.directives[] as their instances
+   * are stored in LView.directives[]. This simplifies lookup in DI.
+   */
+  directives: DirectiveDefList|null;
+
+  /**
+   * Full registry of directives and components that may be found in this view.
+   *
+   * It's necessary to keep a copy of the full def list on the TView so it's possible
+   * to render template functions without a host component.
+   */
+  directiveRegistry: DirectiveDefList|null;
+
+  /**
+   * Full registry of pipes that may be found in this view.
+   *
+   * The property is either an array of `PipeDefs`s or a function which returns the array of
+   * `PipeDefs`s. The function is necessary to be able to support forward declarations.
+   *
+   * It's necessary to keep a copy of the full def list on the TView so it's possible
+   * to render template functions without a host component.
+   */
+  pipeRegistry: PipeDefList|null;
+
+  /**
+   * Array of ngOnInit and ngDoCheck hooks that should be executed for this view in
+   * creation mode.
+   *
+   * Even indices: Directive index
+   * Odd indices: Hook function
+   */
+  initHooks: HookData|null;
+
+  /**
+   * Array of ngDoCheck hooks that should be executed for this view in update mode.
+   *
+   * Even indices: Directive index
+   * Odd indices: Hook function
+   */
+  checkHooks: HookData|null;
+
+  /**
+   * Array of ngAfterContentInit and ngAfterContentChecked hooks that should be executed
+   * for this view in creation mode.
+   *
+   * Even indices: Directive index
+   * Odd indices: Hook function
+   */
+  contentHooks: HookData|null;
+
+  /**
+   * Array of ngAfterContentChecked hooks that should be executed for this view in update
+   * mode.
+   *
+   * Even indices: Directive index
+   * Odd indices: Hook function
+   */
+  contentCheckHooks: HookData|null;
+
+  /**
+   * Array of ngAfterViewInit and ngAfterViewChecked hooks that should be executed for
+   * this view in creation mode.
+   *
+   * Even indices: Directive index
+   * Odd indices: Hook function
+   */
+  viewHooks: HookData|null;
+
+  /**
+   * Array of ngAfterViewChecked hooks that should be executed for this view in
+   * update mode.
+   *
+   * Even indices: Directive index
+   * Odd indices: Hook function
+   */
+  viewCheckHooks: HookData|null;
+
+  /**
+   * Array of ngOnDestroy hooks that should be executed when this view is destroyed.
+   *
+   * Even indices: Directive index
+   * Odd indices: Hook function
+   */
+  destroyHooks: HookData|null;
+
+  /**
+   * Array of pipe ngOnDestroy hooks that should be executed when this view is destroyed.
+   *
+   * Even indices: Index of pipe in data
+   * Odd indices: Hook function
+   *
+   * These must be stored separately from directive destroy hooks because their contexts
+   * are stored in data.
+   */
+  pipeDestroyHooks: HookData|null;
+
+  /**
+   * When a view is destroyed, listeners need to be released and outputs need to be
+   * unsubscribed. This cleanup array stores both listener data (in chunks of 4)
+   * and output data (in chunks of 2) for a particular view. Combining the arrays
+   * saves on memory (70 bytes per array) and on a few bytes of code size (for two
+   * separate for loops).
+   *
+   * If it's a native DOM listener being stored:
+   * 1st index is: event name to remove
+   * 2nd index is: index of native element in LView.data[]
+   * 3rd index is: index of wrapped listener function in LView.cleanupInstances[]
+   * 4th index is: useCapture boolean
+   *
+   * If it's a renderer2 style listener or ViewRef destroy hook being stored:
+   * 1st index is: index of the cleanup function in LView.cleanupInstances[]
+   * 2nd index is: null
+   *
+   * If it's an output subscription or query list destroy hook:
+   * 1st index is: output unsubscribe function / query list destroy function
+   * 2nd index is: index of function context in LView.cleanupInstances[]
+   */
+  cleanup: any[]|null;
+
+  /**
+   * A list of element indices for child components that will need to be
+   * refreshed when the current view has finished its check. These indices have
+   * already been adjusted for the HEADER_OFFSET.
+   *
+   */
+  components: number[]|null;
+
+  /**
+   * A list of indices for child directives that have host bindings.
+   *
+   * Even indices: Directive indices
+   * Odd indices: Element indices
+   *
+   * Element indices are NOT adjusted for LViewData header offset because
+   * they will be fed into instructions that expect the raw index (e.g. elementProperty)
+   */
+  hostBindings: number[]|null;
+
+
+  /**
+   * A list of indices for child directives that have content queries.
+   *
+   * Even indices: Directive indices
+   * Odd indices: Starting index of content queries (stored in CONTENT_QUERIES) for this directive
+   */
+  contentQueries: number[]|null;
+}
+
+/**
+ * RootContext contains information which is shared for all components which
+ * were bootstrapped with {@link renderComponent}.
+ */
+export interface RootContext {
+  /**
+   * A function used for scheduling change detection in the future. Usually
+   * this is `requestAnimationFrame`.
+   */
+  scheduler: (workFn: () => void) => void;
+
+  /**
+   * A promise which is resolved when all components are considered clean (not dirty).
+   *
+   * This promise is overwritten every time a first call to {@link markDirty} is invoked.
+   */
+  clean: Promise<null>;
+
+  /**
+   * RootComponents - The components that were instantiated by the call to
+   * {@link renderComponent}.
+   */
+  components: {}[];
+}
+
+/**
+ * Array of hooks that should be executed for a view and their directive indices.
+ *
+ * Even indices: Directive index
+ * Odd indices: Hook function
+ */
+export type HookData = (number | (() => void))[];
+
+/**
+ * Static data that corresponds to the instance-specific data array on an LView.
+ *
+ * Each node's static data is stored in tData at the same index that it's stored
+ * in the data array. Each pipe's definition is stored here at the same index
+ * as its pipe instance in the data array. Any nodes that do not have static
+ * data store a null value in tData to avoid a sparse array.
+ */
+export type TData = (TNode | PipeDefInternal<any>| null)[];
+
+/** Type for TView.currentMatches */
+export type CurrentMatchesList = [DirectiveDefInternal<any>, (string | number | null)];
+
+// Note: This hack is necessary so we don't erroneously get a circular dependency
+// failure based on types.
+export const unusedValueExportToPlacateAjd = 1;
diff --git a/packages/core/src/render3/jit/directive.ts b/packages/core/src/render3/jit/directive.ts
new file mode 100644
index 000000000000..8b7f3444fb8e
--- /dev/null
+++ b/packages/core/src/render3/jit/directive.ts
@@ -0,0 +1,231 @@
+/**
+ * @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 {ConstantPool, R3DirectiveMetadata, WrappedNodeExpr, compileComponentFromMetadata as compileR3Component, compileDirectiveFromMetadata as compileR3Directive, jitExpression, makeBindingParser, parseHostBindings, parseTemplate} from '@angular/compiler';
+
+import {Component, Directive, HostBinding, HostListener, Input, Output} from '../../metadata/directives';
+import {componentNeedsResolution, maybeQueueResolutionOfComponentResources} from '../../metadata/resource_loading';
+import {Type} from '../../type';
+import {stringify} from '../../util';
+
+import {angularCoreEnv} from './environment';
+import {NG_COMPONENT_DEF, NG_DIRECTIVE_DEF} from './fields';
+import {patchComponentDefWithScope, transitiveScopesFor} from './module';
+import {getReflect, reflectDependencies} from './util';
+
+type StringMap = {
+  [key: string]: string
+};
+
+/**
+ * Compile an Angular component according to its decorator metadata, and patch the resulting
+ * ngComponentDef onto the component type.
+ *
+ * Compilation may be asynchronous (due to the need to resolve URLs for the component template or
+ * other resources, for example). In the event that compilation is not immediate, `compileComponent`
+ * will enqueue resource resolution into a global queue and will fail to return the `ngComponentDef`
+ * until the global queue has been resolved with a call to `resolveComponentResources`.
+ */
+export function compileComponent(type: Type<any>, metadata: Component): void {
+  let ngComponentDef: any = null;
+  // Metadata may have resources which need to be resolved.
+  maybeQueueResolutionOfComponentResources(metadata);
+  Object.defineProperty(type, NG_COMPONENT_DEF, {
+    get: () => {
+      if (ngComponentDef === null) {
+        if (componentNeedsResolution(metadata)) {
+          const error = [`Component '${stringify(type)}' is not resolved:`];
+          if (metadata.templateUrl) {
+            error.push(` - templateUrl: ${stringify(metadata.templateUrl)}`);
+          }
+          if (metadata.styleUrls && metadata.styleUrls.length) {
+            error.push(` - styleUrls: ${JSON.stringify(metadata.styleUrls)}`);
+          }
+          error.push(`Did you run and wait for 'resolveComponentResources()'?`);
+          throw new Error(error.join('\n'));
+        }
+        // The ConstantPool is a requirement of the JIT'er.
+        const constantPool = new ConstantPool();
+
+        // Parse the template and check for errors.
+        const template =
+            parseTemplate(metadata.template !, `ng://${stringify(type)}/template.html`, {
+              preserveWhitespaces: metadata.preserveWhitespaces || false,
+            });
+        if (template.errors !== undefined) {
+          const errors = template.errors.map(err => err.toString()).join(', ');
+          throw new Error(
+              `Errors during JIT compilation of template for ${stringify(type)}: ${errors}`);
+        }
+
+        // Compile the component metadata, including template, into an expression.
+        // TODO(alxhub): implement inputs, outputs, queries, etc.
+        const res = compileR3Component(
+            {
+              ...directiveMetadata(type, metadata),
+              template,
+              directives: new Map(),
+              pipes: new Map(),
+              viewQueries: [],
+              wrapDirectivesInClosure: false,
+            },
+            constantPool, makeBindingParser());
+        const preStatements = [...constantPool.statements, ...res.statements];
+
+        ngComponentDef = jitExpression(
+            res.expression, angularCoreEnv, `ng://${type.name}/ngComponentDef.js`, preStatements);
+
+        // If component compilation is async, then the @NgModule annotation which declares the
+        // component may execute and set an ngSelectorScope property on the component type. This
+        // allows the component to patch itself with directiveDefs from the module after it finishes
+        // compiling.
+        if (hasSelectorScope(type)) {
+          const scopes = transitiveScopesFor(type.ngSelectorScope);
+          patchComponentDefWithScope(ngComponentDef, scopes);
+        }
+      }
+      return ngComponentDef;
+    },
+    // Make the property configurable in dev mode to allow overriding in tests
+    configurable: !!ngDevMode,
+  });
+}
+
+function hasSelectorScope<T>(component: Type<T>): component is Type<T>&
+    {ngSelectorScope: Type<any>} {
+  return (component as{ngSelectorScope?: any}).ngSelectorScope !== undefined;
+}
+
+/**
+ * Compile an Angular directive according to its decorator metadata, and patch the resulting
+ * ngDirectiveDef onto the component type.
+ *
+ * In the event that compilation is not immediate, `compileDirective` will return a `Promise` which
+ * will resolve when compilation completes and the directive becomes usable.
+ */
+export function compileDirective(type: Type<any>, directive: Directive): void {
+  let ngDirectiveDef: any = null;
+  Object.defineProperty(type, NG_DIRECTIVE_DEF, {
+    get: () => {
+      if (ngDirectiveDef === null) {
+        const constantPool = new ConstantPool();
+        const sourceMapUrl = `ng://${type && type.name}/ngDirectiveDef.js`;
+        const res = compileR3Directive(
+            directiveMetadata(type, directive), constantPool, makeBindingParser());
+        const preStatements = [...constantPool.statements, ...res.statements];
+        ngDirectiveDef = jitExpression(res.expression, angularCoreEnv, sourceMapUrl, preStatements);
+      }
+      return ngDirectiveDef;
+    },
+    // Make the property configurable in dev mode to allow overriding in tests
+    configurable: !!ngDevMode,
+  });
+}
+
+export function extendsDirectlyFromObject(type: Type<any>): boolean {
+  return Object.getPrototypeOf(type.prototype) === Object.prototype;
+}
+
+/**
+ * Extract the `R3DirectiveMetadata` for a particular directive (either a `Directive` or a
+ * `Component`).
+ */
+function directiveMetadata(type: Type<any>, metadata: Directive): R3DirectiveMetadata {
+  // Reflect inputs and outputs.
+  const propMetadata = getReflect().propMetadata(type);
+
+  const host = extractHostBindings(metadata, propMetadata);
+
+  const inputsFromMetadata = parseInputOutputs(metadata.inputs || []);
+  const outputsFromMetadata = parseInputOutputs(metadata.outputs || []);
+
+  const inputsFromType: StringMap = {};
+  const outputsFromType: StringMap = {};
+  for (const field in propMetadata) {
+    if (propMetadata.hasOwnProperty(field)) {
+      propMetadata[field].forEach(ann => {
+        if (isInput(ann)) {
+          inputsFromType[field] = ann.bindingPropertyName || field;
+        } else if (isOutput(ann)) {
+          outputsFromType[field] = ann.bindingPropertyName || field;
+        }
+      });
+    }
+  }
+
+  return {
+    name: type.name,
+    type: new WrappedNodeExpr(type),
+    typeArgumentCount: 0,
+    selector: metadata.selector !,
+    deps: reflectDependencies(type), host,
+    inputs: {...inputsFromMetadata, ...inputsFromType},
+    outputs: {...outputsFromMetadata, ...outputsFromType},
+    queries: [],
+    lifecycle: {
+      usesOnChanges: type.prototype.ngOnChanges !== undefined,
+    },
+    typeSourceSpan: null !,
+    usesInheritance: !extendsDirectlyFromObject(type),
+    exportAs: metadata.exportAs || null,
+  };
+}
+
+function extractHostBindings(metadata: Directive, propMetadata: {[key: string]: any[]}): {
+  attributes: StringMap,
+  listeners: StringMap,
+  properties: StringMap,
+} {
+  // First parse the declarations from the metadata.
+  const {attributes, listeners, properties, animations} = parseHostBindings(metadata.host || {});
+
+  if (Object.keys(animations).length > 0) {
+    throw new Error(`Animation bindings are as-of-yet unsupported in Ivy`);
+  }
+
+  // Next, loop over the properties of the object, looking for @HostBinding and @HostListener.
+  for (const field in propMetadata) {
+    if (propMetadata.hasOwnProperty(field)) {
+      propMetadata[field].forEach(ann => {
+        if (isHostBinding(ann)) {
+          properties[ann.hostPropertyName || field] = field;
+        } else if (isHostListener(ann)) {
+          listeners[ann.eventName || field] = `${field}(${(ann.args || []).join(',')})`;
+        }
+      });
+    }
+  }
+
+  return {attributes, listeners, properties};
+}
+
+function isInput(value: any): value is Input {
+  return value.ngMetadataName === 'Input';
+}
+
+function isOutput(value: any): value is Output {
+  return value.ngMetadataName === 'Output';
+}
+
+function isHostBinding(value: any): value is HostBinding {
+  return value.ngMetadataName === 'HostBinding';
+}
+
+function isHostListener(value: any): value is HostListener {
+  return value.ngMetadataName === 'HostListener';
+}
+
+function parseInputOutputs(values: string[]): StringMap {
+  return values.reduce(
+      (map, value) => {
+        const [field, property] = value.split(',').map(piece => piece.trim());
+        map[field] = property || field;
+        return map;
+      },
+      {} as StringMap);
+}
diff --git a/packages/core/src/render3/jit/environment.ts b/packages/core/src/render3/jit/environment.ts
new file mode 100644
index 000000000000..00dbe0d34875
--- /dev/null
+++ b/packages/core/src/render3/jit/environment.ts
@@ -0,0 +1,109 @@
+/**
+ * @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 {defineInjectable, defineInjector,} from '../../di/defs';
+import {inject} from '../../di/injector';
+import * as r3 from '../index';
+import * as sanitization from '../../sanitization/sanitization';
+
+
+/**
+ * A mapping of the @angular/core API surface used in generated expressions to the actual symbols.
+ *
+ * This should be kept up to date with the public exports of @angular/core.
+ */
+export const angularCoreEnv: {[name: string]: Function} = {
+  'ɵdefineBase': r3.defineBase,
+  'ɵdefineComponent': r3.defineComponent,
+  'ɵdefineDirective': r3.defineDirective,
+  'defineInjectable': defineInjectable,
+  'defineInjector': defineInjector,
+  'ɵdefineNgModule': r3.defineNgModule,
+  'ɵdefinePipe': r3.definePipe,
+  'ɵdirectiveInject': r3.directiveInject,
+  'ɵgetFactoryOf': r3.getFactoryOf,
+  'ɵgetInheritedFactory': r3.getInheritedFactory,
+  'inject': inject,
+  'ɵinjectAttribute': r3.injectAttribute,
+  'ɵinjectChangeDetectorRef': r3.injectChangeDetectorRef,
+  'ɵinjectElementRef': r3.injectElementRef,
+  'ɵinjectTemplateRef': r3.injectTemplateRef,
+  'ɵinjectViewContainerRef': r3.injectViewContainerRef,
+  'ɵNgOnChangesFeature': r3.NgOnChangesFeature,
+  'ɵPublicFeature': r3.PublicFeature,
+  'ɵInheritDefinitionFeature': r3.InheritDefinitionFeature,
+  'ɵa': r3.a,
+  'ɵb': r3.b,
+  'ɵC': r3.C,
+  'ɵx': r3.x,
+  'ɵcR': r3.cR,
+  'ɵcr': r3.cr,
+  'ɵd': r3.d,
+  'ɵql': r3.ql,
+  'ɵNH': r3.NH,
+  'ɵNM': r3.NM,
+  'ɵNS': r3.NS,
+  'ɵE': r3.E,
+  'ɵe': r3.e,
+  'ɵEe': r3.Ee,
+  'ɵEC': r3.EC,
+  'ɵeC': r3.eC,
+  'ɵf0': r3.f0,
+  'ɵf1': r3.f1,
+  'ɵf2': r3.f2,
+  'ɵf3': r3.f3,
+  'ɵf4': r3.f4,
+  'ɵf5': r3.f5,
+  'ɵf6': r3.f6,
+  'ɵf7': r3.f7,
+  'ɵf8': r3.f8,
+  'ɵfV': r3.fV,
+  'ɵgV': r3.gV,
+  'ɵrV': r3.rV,
+  'ɵi1': r3.i1,
+  'ɵi2': r3.i2,
+  'ɵi3': r3.i3,
+  'ɵi4': r3.i4,
+  'ɵi5': r3.i5,
+  'ɵi6': r3.i6,
+  'ɵi7': r3.i7,
+  'ɵi8': r3.i8,
+  'ɵiV': r3.iV,
+  'ɵcp': r3.cp,
+  'ɵL': r3.L,
+  'ɵld': r3.ld,
+  'ɵP': r3.P,
+  'ɵp': r3.p,
+  'ɵpb1': r3.pb1,
+  'ɵpb2': r3.pb2,
+  'ɵpb3': r3.pb3,
+  'ɵpb4': r3.pb4,
+  'ɵpbV': r3.pbV,
+  'ɵpD': r3.pD,
+  'ɵPp': r3.Pp,
+  'ɵQ': r3.Q,
+  'ɵqR': r3.qR,
+  'ɵQr': r3.Qr,
+  'ɵrS': r3.rS,
+  'ɵr': r3.r,
+  'ɵs': r3.s,
+  'ɵsm': r3.sm,
+  'ɵsp': r3.sp,
+  'ɵsa': r3.sa,
+  'ɵT': r3.T,
+  'ɵt': r3.t,
+  'ɵV': r3.V,
+  'ɵv': r3.v,
+
+  'ɵzh': sanitization.sanitizeHtml,
+  'ɵzs': sanitization.sanitizeStyle,
+  'ɵzss': sanitization.defaultStyleSanitizer,
+  'ɵzr': sanitization.sanitizeResourceUrl,
+  'ɵzc': sanitization.sanitizeScript,
+  'ɵzu': sanitization.sanitizeUrl
+};
diff --git a/packages/core/src/render3/jit/fields.ts b/packages/core/src/render3/jit/fields.ts
new file mode 100644
index 000000000000..09376567846c
--- /dev/null
+++ b/packages/core/src/render3/jit/fields.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {getClosureSafeProperty} from '../../util/property';
+
+const TARGET = {} as any;
+
+export const NG_COMPONENT_DEF = getClosureSafeProperty({ngComponentDef: TARGET}, TARGET);
+export const NG_DIRECTIVE_DEF = getClosureSafeProperty({ngDirectiveDef: TARGET}, TARGET);
+export const NG_INJECTABLE_DEF = getClosureSafeProperty({ngInjectableDef: TARGET}, TARGET);
+export const NG_INJECTOR_DEF = getClosureSafeProperty({ngInjectorDef: TARGET}, TARGET);
+export const NG_PIPE_DEF = getClosureSafeProperty({ngPipeDef: TARGET}, TARGET);
+export const NG_MODULE_DEF = getClosureSafeProperty({ngModuleDef: TARGET}, TARGET);
diff --git a/packages/core/src/render3/jit/injectable.ts b/packages/core/src/render3/jit/injectable.ts
new file mode 100644
index 000000000000..c2cdd0f44dde
--- /dev/null
+++ b/packages/core/src/render3/jit/injectable.ts
@@ -0,0 +1,123 @@
+/**
+ * @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 {Expression, LiteralExpr, R3DependencyMetadata, R3InjectableMetadata, WrappedNodeExpr, compileInjectable as compileR3Injectable, jitExpression} from '@angular/compiler';
+
+import {Injectable} from '../../di/injectable';
+import {ClassSansProvider, ExistingSansProvider, FactorySansProvider, StaticClassSansProvider, ValueProvider, ValueSansProvider} from '../../di/provider';
+import {Type} from '../../type';
+import {getClosureSafeProperty} from '../../util/property';
+
+import {angularCoreEnv} from './environment';
+import {NG_INJECTABLE_DEF} from './fields';
+import {convertDependencies, reflectDependencies} from './util';
+
+
+
+/**
+ * Compile an Angular injectable according to its `Injectable` metadata, and patch the resulting
+ * `ngInjectableDef` onto the injectable type.
+ */
+export function compileInjectable(type: Type<any>, srcMeta?: Injectable): void {
+  // Allow the compilation of a class with a `@Injectable()` decorator without parameters
+  const meta: Injectable = srcMeta || {providedIn: null};
+
+  let def: any = null;
+  Object.defineProperty(type, NG_INJECTABLE_DEF, {
+    get: () => {
+      if (def === null) {
+        // Check whether the injectable metadata includes a provider specification.
+        const hasAProvider = isUseClassProvider(meta) || isUseFactoryProvider(meta) ||
+            isUseValueProvider(meta) || isUseExistingProvider(meta);
+
+        const ctorDeps = reflectDependencies(type);
+
+        let userDeps: R3DependencyMetadata[]|undefined = undefined;
+        if ((isUseClassProvider(meta) || isUseFactoryProvider(meta)) && meta.deps !== undefined) {
+          userDeps = convertDependencies(meta.deps);
+        }
+
+        // Decide which flavor of factory to generate, based on the provider specified.
+        // Only one of the use* fields should be set.
+        let useClass: Expression|undefined = undefined;
+        let useFactory: Expression|undefined = undefined;
+        let useValue: Expression|undefined = undefined;
+        let useExisting: Expression|undefined = undefined;
+
+        if (!hasAProvider) {
+          // In the case the user specifies a type provider, treat it as {provide: X, useClass: X}.
+          // The deps will have been reflected above, causing the factory to create the class by
+          // calling
+          // its constructor with injected deps.
+          useClass = new WrappedNodeExpr(type);
+        } else if (isUseClassProvider(meta)) {
+          // The user explicitly specified useClass, and may or may not have provided deps.
+          useClass = new WrappedNodeExpr(meta.useClass);
+        } else if (isUseValueProvider(meta)) {
+          // The user explicitly specified useValue.
+          useValue = new WrappedNodeExpr(meta.useValue);
+        } else if (isUseFactoryProvider(meta)) {
+          // The user explicitly specified useFactory.
+          useFactory = new WrappedNodeExpr(meta.useFactory);
+        } else if (isUseExistingProvider(meta)) {
+          // The user explicitly specified useExisting.
+          useExisting = new WrappedNodeExpr(meta.useExisting);
+        } else {
+          // Can't happen - either hasAProvider will be false, or one of the providers will be set.
+          throw new Error(`Unreachable state.`);
+        }
+
+        const {expression, statements} = compileR3Injectable({
+          name: type.name,
+          type: new WrappedNodeExpr(type),
+          providedIn: computeProvidedIn(meta.providedIn),
+          useClass,
+          useFactory,
+          useValue,
+          useExisting,
+          ctorDeps,
+          userDeps,
+        });
+
+        def = jitExpression(
+            expression, angularCoreEnv, `ng://${type.name}/ngInjectableDef.js`, statements);
+      }
+      return def;
+    },
+  });
+}
+
+function computeProvidedIn(providedIn: Type<any>| string | null | undefined): Expression {
+  if (providedIn == null || typeof providedIn === 'string') {
+    return new LiteralExpr(providedIn);
+  } else {
+    return new WrappedNodeExpr(providedIn);
+  }
+}
+
+type UseClassProvider = Injectable & ClassSansProvider & {deps?: any[]};
+
+function isUseClassProvider(meta: Injectable): meta is UseClassProvider {
+  return (meta as UseClassProvider).useClass !== undefined;
+}
+
+const GET_PROPERTY_NAME = {} as any;
+const USE_VALUE = getClosureSafeProperty<ValueProvider>(
+    {provide: String, useValue: GET_PROPERTY_NAME}, GET_PROPERTY_NAME);
+
+function isUseValueProvider(meta: Injectable): meta is Injectable&ValueSansProvider {
+  return USE_VALUE in meta;
+}
+
+function isUseFactoryProvider(meta: Injectable): meta is Injectable&FactorySansProvider {
+  return (meta as FactorySansProvider).useFactory !== undefined;
+}
+
+function isUseExistingProvider(meta: Injectable): meta is Injectable&ExistingSansProvider {
+  return (meta as ExistingSansProvider).useExisting !== undefined;
+}
diff --git a/packages/core/src/render3/jit/module.ts b/packages/core/src/render3/jit/module.ts
new file mode 100644
index 000000000000..e432d81a7ac5
--- /dev/null
+++ b/packages/core/src/render3/jit/module.ts
@@ -0,0 +1,252 @@
+/**
+ * @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 {Expression, R3InjectorMetadata, R3NgModuleMetadata, R3Reference, WrappedNodeExpr, compileInjector, compileNgModule as compileR3NgModule, jitExpression} from '@angular/compiler';
+
+import {ModuleWithProviders, NgModule, NgModuleDefInternal, NgModuleTransitiveScopes} from '../../metadata/ng_module';
+import {Type} from '../../type';
+import {ComponentDefInternal} from '../interfaces/definition';
+
+import {angularCoreEnv} from './environment';
+import {NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_INJECTOR_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields';
+import {reflectDependencies} from './util';
+
+const EMPTY_ARRAY: Type<any>[] = [];
+
+/**
+ * Compiles a module in JIT mode.
+ *
+ * This function automatically gets called when a class has a `@NgModule` decorator.
+ */
+export function compileNgModule(moduleType: Type<any>, ngModule: NgModule): void {
+  compileNgModuleDefs(moduleType, ngModule);
+  setScopeOnDeclaredComponents(moduleType, ngModule);
+}
+
+/**
+ * Compiles and adds the `ngModuleDef` and `ngInjectorDef` properties to the module class.
+ */
+export function compileNgModuleDefs(moduleType: Type<any>, ngModule: NgModule): void {
+  const declarations: Type<any>[] = flatten(ngModule.declarations || EMPTY_ARRAY);
+
+  let ngModuleDef: any = null;
+  Object.defineProperty(moduleType, NG_MODULE_DEF, {
+    get: () => {
+      if (ngModuleDef === null) {
+        const meta: R3NgModuleMetadata = {
+          type: wrap(moduleType),
+          bootstrap: flatten(ngModule.bootstrap || EMPTY_ARRAY).map(wrap),
+          declarations: declarations.map(wrapReference),
+          imports: flatten(ngModule.imports || EMPTY_ARRAY)
+                       .map(expandModuleWithProviders)
+                       .map(wrapReference),
+          exports: flatten(ngModule.exports || EMPTY_ARRAY)
+                       .map(expandModuleWithProviders)
+                       .map(wrapReference),
+          emitInline: true,
+        };
+        const res = compileR3NgModule(meta);
+        ngModuleDef = jitExpression(
+            res.expression, angularCoreEnv, `ng://${moduleType.name}/ngModuleDef.js`, []);
+      }
+      return ngModuleDef;
+    },
+    // Make the property configurable in dev mode to allow overriding in tests
+    configurable: !!ngDevMode,
+  });
+
+  let ngInjectorDef: any = null;
+  Object.defineProperty(moduleType, NG_INJECTOR_DEF, {
+    get: () => {
+      if (ngInjectorDef === null) {
+        const meta: R3InjectorMetadata = {
+          name: moduleType.name,
+          type: wrap(moduleType),
+          deps: reflectDependencies(moduleType),
+          providers: new WrappedNodeExpr(ngModule.providers || EMPTY_ARRAY),
+          imports: new WrappedNodeExpr([
+            ngModule.imports || EMPTY_ARRAY,
+            ngModule.exports || EMPTY_ARRAY,
+          ]),
+        };
+        const res = compileInjector(meta);
+        ngInjectorDef = jitExpression(
+            res.expression, angularCoreEnv, `ng://${moduleType.name}/ngInjectorDef.js`,
+            res.statements);
+      }
+      return ngInjectorDef;
+    },
+    // Make the property configurable in dev mode to allow overriding in tests
+    configurable: !!ngDevMode,
+  });
+}
+
+/**
+ * Some declared components may be compiled asynchronously, and thus may not have their
+ * ngComponentDef set yet. If this is the case, then a reference to the module is written into
+ * the `ngSelectorScope` property of the declared type.
+ */
+function setScopeOnDeclaredComponents(moduleType: Type<any>, ngModule: NgModule) {
+  const declarations: Type<any>[] = flatten(ngModule.declarations || EMPTY_ARRAY);
+
+  const transitiveScopes = transitiveScopesFor(moduleType);
+
+  declarations.forEach(declaration => {
+    if (declaration.hasOwnProperty(NG_COMPONENT_DEF)) {
+      // An `ngComponentDef` field exists - go ahead and patch the component directly.
+      const component = declaration as Type<any>& {ngComponentDef: ComponentDefInternal<any>};
+      const componentDef = component.ngComponentDef;
+      patchComponentDefWithScope(componentDef, transitiveScopes);
+    } else if (
+        !declaration.hasOwnProperty(NG_DIRECTIVE_DEF) && !declaration.hasOwnProperty(NG_PIPE_DEF)) {
+      // Set `ngSelectorScope` for future reference when the component compilation finishes.
+      (declaration as Type<any>& {ngSelectorScope?: any}).ngSelectorScope = moduleType;
+    }
+  });
+}
+
+/**
+ * Patch the definition of a component with directives and pipes from the compilation scope of
+ * a given module.
+ */
+export function patchComponentDefWithScope<C>(
+    componentDef: ComponentDefInternal<C>, transitiveScopes: NgModuleTransitiveScopes) {
+  componentDef.directiveDefs = () => Array.from(transitiveScopes.compilation.directives)
+                                         .map(dir => dir.ngDirectiveDef || dir.ngComponentDef)
+                                         .filter(def => !!def);
+  componentDef.pipeDefs = () =>
+      Array.from(transitiveScopes.compilation.pipes).map(pipe => pipe.ngPipeDef);
+}
+
+/**
+ * Compute the pair of transitive scopes (compilation scope and exported scope) for a given module.
+ *
+ * This operation is memoized and the result is cached on the module's definition. It can be called
+ * on modules with components that have not fully compiled yet, but the result should not be used
+ * until they have.
+ */
+export function transitiveScopesFor<T>(moduleType: Type<T>): NgModuleTransitiveScopes {
+  if (!isNgModule(moduleType)) {
+    throw new Error(`${moduleType.name} does not have an ngModuleDef`);
+  }
+  const def = moduleType.ngModuleDef;
+
+  if (def.transitiveCompileScopes !== null) {
+    return def.transitiveCompileScopes;
+  }
+
+  const scopes: NgModuleTransitiveScopes = {
+    compilation: {
+      directives: new Set<any>(),
+      pipes: new Set<any>(),
+    },
+    exported: {
+      directives: new Set<any>(),
+      pipes: new Set<any>(),
+    },
+  };
+
+  def.declarations.forEach(declared => {
+    const declaredWithDefs = declared as Type<any>& { ngPipeDef?: any; };
+
+    if (declaredWithDefs.ngPipeDef !== undefined) {
+      scopes.compilation.pipes.add(declared);
+    } else {
+      // Either declared has an ngComponentDef or ngDirectiveDef, or it's a component which hasn't
+      // had its template compiled yet. In either case, it gets added to the compilation's
+      // directives.
+      scopes.compilation.directives.add(declared);
+    }
+  });
+
+  def.imports.forEach(<I>(imported: Type<I>) => {
+    const importedTyped = imported as Type<I>& {
+      // If imported is an @NgModule:
+      ngModuleDef?: NgModuleDefInternal<I>;
+    };
+
+    if (!isNgModule<I>(importedTyped)) {
+      throw new Error(`Importing ${importedTyped.name} which does not have an ngModuleDef`);
+    }
+
+    // When this module imports another, the imported module's exported directives and pipes are
+    // added to the compilation scope of this module.
+    const importedScope = transitiveScopesFor(importedTyped);
+    importedScope.exported.directives.forEach(entry => scopes.compilation.directives.add(entry));
+    importedScope.exported.pipes.forEach(entry => scopes.compilation.pipes.add(entry));
+  });
+
+  def.exports.forEach(<E>(exported: Type<E>) => {
+    const exportedTyped = exported as Type<E>& {
+      // Components, Directives, NgModules, and Pipes can all be exported.
+      ngComponentDef?: any;
+      ngDirectiveDef?: any;
+      ngModuleDef?: NgModuleDefInternal<E>;
+      ngPipeDef?: any;
+    };
+
+    // Either the type is a module, a pipe, or a component/directive (which may not have an
+    // ngComponentDef as it might be compiled asynchronously).
+    if (isNgModule(exportedTyped)) {
+      // When this module exports another, the exported module's exported directives and pipes are
+      // added to both the compilation and exported scopes of this module.
+      const exportedScope = transitiveScopesFor(exportedTyped);
+      exportedScope.exported.directives.forEach(entry => {
+        scopes.compilation.directives.add(entry);
+        scopes.exported.directives.add(entry);
+      });
+      exportedScope.exported.pipes.forEach(entry => {
+        scopes.compilation.pipes.add(entry);
+        scopes.exported.pipes.add(entry);
+      });
+    } else if (exportedTyped.ngPipeDef !== undefined) {
+      scopes.exported.pipes.add(exportedTyped);
+    } else {
+      scopes.exported.directives.add(exportedTyped);
+    }
+  });
+
+  def.transitiveCompileScopes = scopes;
+  return scopes;
+}
+
+function flatten<T>(values: any[]): T[] {
+  const out: T[] = [];
+  values.forEach(value => {
+    if (Array.isArray(value)) {
+      out.push(...flatten<T>(value));
+    } else {
+      out.push(value);
+    }
+  });
+  return out;
+}
+
+function expandModuleWithProviders(value: Type<any>| ModuleWithProviders): Type<any> {
+  if (isModuleWithProviders(value)) {
+    return value.ngModule;
+  }
+  return value;
+}
+
+function wrap(value: Type<any>): Expression {
+  return new WrappedNodeExpr(value);
+}
+
+function wrapReference(value: Type<any>): R3Reference {
+  const wrapped = wrap(value);
+  return {value: wrapped, type: wrapped};
+}
+
+function isModuleWithProviders(value: any): value is ModuleWithProviders {
+  return (value as{ngModule?: any}).ngModule !== undefined;
+}
+
+function isNgModule<T>(value: Type<T>): value is Type<T>&{ngModuleDef: NgModuleDefInternal<T>} {
+  return (value as{ngModuleDef?: NgModuleDefInternal<T>}).ngModuleDef !== undefined;
+}
diff --git a/packages/core/src/render3/jit/pipe.ts b/packages/core/src/render3/jit/pipe.ts
new file mode 100644
index 000000000000..f5f724817d26
--- /dev/null
+++ b/packages/core/src/render3/jit/pipe.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 {WrappedNodeExpr, compilePipeFromMetadata, jitExpression} from '@angular/compiler';
+
+import {Pipe} from '../../metadata/directives';
+import {Type} from '../../type';
+import {stringify} from '../util';
+
+import {angularCoreEnv} from './environment';
+import {NG_PIPE_DEF} from './fields';
+import {reflectDependencies} from './util';
+
+export function compilePipe(type: Type<any>, meta: Pipe): void {
+  let ngPipeDef: any = null;
+  Object.defineProperty(type, NG_PIPE_DEF, {
+    get: () => {
+      if (ngPipeDef === null) {
+        const sourceMapUrl = `ng://${stringify(type)}/ngPipeDef.js`;
+
+        const name = type.name;
+        const res = compilePipeFromMetadata({
+          name,
+          type: new WrappedNodeExpr(type),
+          deps: reflectDependencies(type),
+          pipeName: meta.name,
+          pure: meta.pure !== undefined ? meta.pure : true,
+        });
+
+        ngPipeDef = jitExpression(res.expression, angularCoreEnv, sourceMapUrl, res.statements);
+      }
+      return ngPipeDef;
+    },
+    // Make the property configurable in dev mode to allow overriding in tests
+    configurable: !!ngDevMode,
+  });
+}
diff --git a/packages/core/src/render3/jit/util.ts b/packages/core/src/render3/jit/util.ts
new file mode 100644
index 000000000000..485ebd5dc99f
--- /dev/null
+++ b/packages/core/src/render3/jit/util.ts
@@ -0,0 +1,89 @@
+/**
+ * @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 {LiteralExpr, R3DependencyMetadata, R3ResolvedDependencyType, WrappedNodeExpr} from '@angular/compiler';
+
+import {Injector} from '../../di/injector';
+import {Host, Inject, Optional, Self, SkipSelf} from '../../di/metadata';
+import {ElementRef} from '../../linker/element_ref';
+import {TemplateRef} from '../../linker/template_ref';
+import {ViewContainerRef} from '../../linker/view_container_ref';
+import {Attribute} from '../../metadata/di';
+import {ReflectionCapabilities} from '../../reflection/reflection_capabilities';
+import {Type} from '../../type';
+
+let _reflect: ReflectionCapabilities|null = null;
+
+export function getReflect(): ReflectionCapabilities {
+  return (_reflect = _reflect || new ReflectionCapabilities());
+}
+
+export function reflectDependencies(type: Type<any>): R3DependencyMetadata[] {
+  return convertDependencies(getReflect().parameters(type));
+}
+
+export function convertDependencies(deps: any[]): R3DependencyMetadata[] {
+  return deps.map(dep => reflectDependency(dep));
+}
+
+function reflectDependency(dep: any | any[]): R3DependencyMetadata {
+  const meta: R3DependencyMetadata = {
+    token: new LiteralExpr(null),
+    host: false,
+    optional: false,
+    resolved: R3ResolvedDependencyType.Token,
+    self: false,
+    skipSelf: false,
+  };
+
+  function setTokenAndResolvedType(token: any): void {
+    if (token === ElementRef) {
+      meta.resolved = R3ResolvedDependencyType.ElementRef;
+    } else if (token === Injector) {
+      meta.resolved = R3ResolvedDependencyType.Injector;
+    } else if (token === TemplateRef) {
+      meta.resolved = R3ResolvedDependencyType.TemplateRef;
+    } else if (token === ViewContainerRef) {
+      meta.resolved = R3ResolvedDependencyType.ViewContainerRef;
+    } else {
+      meta.resolved = R3ResolvedDependencyType.Token;
+    }
+    meta.token = new WrappedNodeExpr(token);
+  }
+
+  if (Array.isArray(dep)) {
+    if (dep.length === 0) {
+      throw new Error('Dependency array must have arguments.');
+    }
+    for (let j = 0; j < dep.length; j++) {
+      const param = dep[j];
+      if (param instanceof Optional || param.__proto__.ngMetadataName === 'Optional') {
+        meta.optional = true;
+      } else if (param instanceof SkipSelf || param.__proto__.ngMetadataName === 'SkipSelf') {
+        meta.skipSelf = true;
+      } else if (param instanceof Self || param.__proto__.ngMetadataName === 'Self') {
+        meta.self = true;
+      } else if (param instanceof Host || param.__proto__.ngMetadataName === 'Host') {
+        meta.host = true;
+      } else if (param instanceof Inject) {
+        meta.token = new WrappedNodeExpr(param.token);
+      } else if (param instanceof Attribute) {
+        if (param.attributeName === undefined) {
+          throw new Error(`Attribute name must be defined.`);
+        }
+        meta.token = new LiteralExpr(param.attributeName);
+        meta.resolved = R3ResolvedDependencyType.Attribute;
+      } else {
+        setTokenAndResolvedType(param);
+      }
+    }
+  } else {
+    setTokenAndResolvedType(dep);
+  }
+  return meta;
+}
diff --git a/packages/core/src/render3/ng_dev_mode.ts b/packages/core/src/render3/ng_dev_mode.ts
new file mode 100644
index 000000000000..cdf56d98b610
--- /dev/null
+++ b/packages/core/src/render3/ng_dev_mode.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
+ */
+
+declare global {
+  const ngDevMode: null|NgDevModePerfCounters;
+  interface NgDevModePerfCounters {
+    firstTemplatePass: number;
+    tNode: number;
+    tView: number;
+    rendererCreateTextNode: number;
+    rendererSetText: number;
+    rendererCreateElement: number;
+    rendererAddEventListener: number;
+    rendererSetAttribute: number;
+    rendererRemoveAttribute: number;
+    rendererSetProperty: number;
+    rendererSetClassName: number;
+    rendererAddClass: number;
+    rendererRemoveClass: number;
+    rendererSetStyle: number;
+    rendererRemoveStyle: number;
+    rendererDestroy: number;
+    rendererDestroyNode: number;
+    rendererMoveNode: number;
+    rendererRemoveNode: number;
+    rendererCreateComment: number;
+  }
+}
+
+declare let global: any;
+
+// NOTE: The order here matters: Checking window, then global, then self is important.
+//   checking them in another order can result in errors in some Node environments.
+const __global: {ngDevMode: NgDevModePerfCounters | boolean} =
+    typeof window != 'undefined' && window || typeof global != 'undefined' && global ||
+    typeof self != 'undefined' && self;
+
+export function ngDevModeResetPerfCounters(): NgDevModePerfCounters {
+  // Make sure to refer to ngDevMode as ['ngDevMode'] for clousre.
+  return __global['ngDevMode'] = {
+    firstTemplatePass: 0,
+    tNode: 0,
+    tView: 0,
+    rendererCreateTextNode: 0,
+    rendererSetText: 0,
+    rendererCreateElement: 0,
+    rendererAddEventListener: 0,
+    rendererSetAttribute: 0,
+    rendererRemoveAttribute: 0,
+    rendererSetProperty: 0,
+    rendererSetClassName: 0,
+    rendererAddClass: 0,
+    rendererRemoveClass: 0,
+    rendererSetStyle: 0,
+    rendererRemoveStyle: 0,
+    rendererDestroy: 0,
+    rendererDestroyNode: 0,
+    rendererMoveNode: 0,
+    rendererRemoveNode: 0,
+    rendererCreateComment: 0,
+  };
+}
+
+/**
+ * This checks to see if the `ngDevMode` has been set. If yes,
+ * than we honor it, otherwise we default to dev mode with additional checks.
+ *
+ * The idea is that unless we are doing production build where we explicitly
+ * set `ngDevMode == false` we should be helping the developer by providing
+ * as much early warning and errors as possible.
+ */
+if (typeof ngDevMode === 'undefined' || ngDevMode) {
+  // Make sure to refer to ngDevMode as ['ngDevMode'] for clousre.
+  __global['ngDevMode'] = ngDevModeResetPerfCounters();
+}
diff --git a/packages/core/src/render3/ng_module_ref.ts b/packages/core/src/render3/ng_module_ref.ts
new file mode 100644
index 000000000000..6b6aeb61989a
--- /dev/null
+++ b/packages/core/src/render3/ng_module_ref.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 {Injector} from '../di/injector';
+import {StaticProvider} from '../di/provider';
+import {createInjector} from '../di/r3_injector';
+import {ComponentFactoryResolver as viewEngine_ComponentFactoryResolver} from '../linker/component_factory_resolver';
+import {InternalNgModuleRef, NgModuleFactory as viewEngine_NgModuleFactory, NgModuleRef as viewEngine_NgModuleRef} from '../linker/ng_module_factory';
+import {NgModuleDefInternal} from '../metadata/ng_module';
+import {Type} from '../type';
+import {stringify} from '../util';
+import {assertDefined} from './assert';
+import {ComponentFactoryResolver} from './component_ref';
+
+export interface NgModuleType { ngModuleDef: NgModuleDefInternal<any>; }
+
+export const COMPONENT_FACTORY_RESOLVER: StaticProvider = {
+  provide: viewEngine_ComponentFactoryResolver,
+  useFactory: () => new ComponentFactoryResolver(),
+  deps: [],
+};
+
+export class NgModuleRef<T> extends viewEngine_NgModuleRef<T> implements InternalNgModuleRef<T> {
+  // tslint:disable-next-line:require-internal-with-underscore
+  _bootstrapComponents: Type<any>[] = [];
+  injector: Injector;
+  componentFactoryResolver: viewEngine_ComponentFactoryResolver;
+  instance: T;
+  destroyCbs: (() => void)[]|null = [];
+
+  constructor(ngModuleType: Type<T>, parentInjector: Injector|null) {
+    super();
+    const ngModuleDef = (ngModuleType as any as NgModuleType).ngModuleDef;
+    ngDevMode && assertDefined(
+                     ngModuleDef,
+                     `NgModule '${stringify(ngModuleType)}' is not a subtype of 'NgModuleType'.`);
+
+    this._bootstrapComponents = ngModuleDef.bootstrap;
+    const additionalProviders: StaticProvider[] = [
+      COMPONENT_FACTORY_RESOLVER, {
+        provide: viewEngine_NgModuleRef,
+        useValue: this,
+      }
+    ];
+    this.injector = createInjector(ngModuleType, parentInjector, additionalProviders);
+    this.instance = this.injector.get(ngModuleType);
+    this.componentFactoryResolver = new ComponentFactoryResolver();
+  }
+
+  destroy(): void {
+    ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
+    this.destroyCbs !.forEach(fn => fn());
+    this.destroyCbs = null;
+  }
+  onDestroy(callback: () => void): void {
+    ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
+    this.destroyCbs !.push(callback);
+  }
+}
+
+export class NgModuleFactory<T> extends viewEngine_NgModuleFactory<T> {
+  constructor(public moduleType: Type<T>) { super(); }
+
+  create(parentInjector: Injector|null): viewEngine_NgModuleRef<T> {
+    return new NgModuleRef(this.moduleType, parentInjector);
+  }
+}
diff --git a/packages/core/src/render3/node_assert.ts b/packages/core/src/render3/node_assert.ts
new file mode 100644
index 000000000000..c30a0f245530
--- /dev/null
+++ b/packages/core/src/render3/node_assert.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 {assertDefined, assertEqual} from './assert';
+import {LNode, TNodeType} from './interfaces/node';
+
+export function assertNodeType(node: LNode, type: TNodeType) {
+  assertDefined(node, 'should be called with a node');
+  assertEqual(node.tNode.type, type, `should be a ${typeName(type)}`);
+}
+
+export function assertNodeOfPossibleTypes(node: LNode, ...types: TNodeType[]) {
+  assertDefined(node, 'should be called with a node');
+  const found = types.some(type => node.tNode.type === type);
+  assertEqual(found, true, `Should be one of ${types.map(typeName).join(', ')}`);
+}
+
+function typeName(type: TNodeType): string {
+  if (type == TNodeType.Projection) return 'Projection';
+  if (type == TNodeType.Container) return 'Container';
+  if (type == TNodeType.View) return 'View';
+  if (type == TNodeType.Element) return 'Element';
+  return '<unknown>';
+}
diff --git a/packages/core/src/render3/node_manipulation.ts b/packages/core/src/render3/node_manipulation.ts
new file mode 100644
index 000000000000..25ee3abd9a7d
--- /dev/null
+++ b/packages/core/src/render3/node_manipulation.ts
@@ -0,0 +1,724 @@
+/**
+ * @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 {assertDefined} from './assert';
+import {callHooks} from './hooks';
+import {LContainer, RENDER_PARENT, VIEWS, unusedValueExportToPlacateAjd as unused1} from './interfaces/container';
+import {LContainerNode, LElementContainerNode, LElementNode, LNode, LProjectionNode, LTextNode, LViewNode, TNode, TNodeFlags, TNodeType, unusedValueExportToPlacateAjd as unused2} from './interfaces/node';
+import {unusedValueExportToPlacateAjd as unused3} from './interfaces/projection';
+import {ProceduralRenderer3, RComment, RElement, RNode, RText, Renderer3, isProceduralRenderer, unusedValueExportToPlacateAjd as unused4} from './interfaces/renderer';
+import {CLEANUP, CONTAINER_INDEX, DIRECTIVES, FLAGS, HEADER_OFFSET, HOST_NODE, HookData, LViewData, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, TVIEW, unusedValueExportToPlacateAjd as unused5} from './interfaces/view';
+import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
+import {readElementValue, stringify} from './util';
+
+const unusedValueToPlacateAjd = unused1 + unused2 + unused3 + unused4 + unused5;
+
+/** Retrieves the sibling node for the given node. */
+export function getNextLNode(node: LNode): LNode|null {
+  // View nodes don't have TNodes, so their next must be retrieved through their LView.
+  if (node.tNode.type === TNodeType.View) {
+    const viewData = node.data as LViewData;
+    return viewData[NEXT] ? (viewData[NEXT] as LViewData)[HOST_NODE] : null;
+  }
+  return node.tNode.next ? node.view[node.tNode.next.index] : null;
+}
+
+/** Retrieves the first child of a given node */
+export function getChildLNode(node: LNode): LNode|null {
+  if (node.tNode.child) {
+    const viewData = node.tNode.type === TNodeType.View ? node.data as LViewData : node.view;
+    return readElementValue(viewData[node.tNode.child.index]);
+  }
+  return null;
+}
+
+/** Retrieves the parent LNode of a given node. */
+export function getParentLNode(
+    node: LContainerNode | LElementNode | LElementContainerNode | LTextNode |
+    LProjectionNode): LElementNode|LElementContainerNode|LViewNode;
+export function getParentLNode(node: LViewNode): LContainerNode|null;
+export function getParentLNode(node: LElementContainerNode): LElementNode|LElementContainerNode|
+    LViewNode;
+export function getParentLNode(node: LNode): LElementNode|LElementContainerNode|LContainerNode|
+    LViewNode|null;
+export function getParentLNode(node: LNode): LElementNode|LElementContainerNode|LContainerNode|
+    LViewNode|null {
+  if (node.tNode.index === -1 && node.tNode.type === TNodeType.View) {
+    // This is a dynamically created view inside a dynamic container.
+    // If the host index is -1, the view has not yet been inserted, so it has no parent.
+    const containerHostIndex = (node.data as LViewData)[CONTAINER_INDEX];
+    return containerHostIndex === -1 ? null : node.view[containerHostIndex].dynamicLContainerNode;
+  }
+  const parent = node.tNode.parent;
+  return readElementValue(parent ? node.view[parent.index] : node.view[HOST_NODE]);
+}
+
+/**
+ * Retrieves render parent LElementNode for a given view.
+ * Might be null if a view is not yet attatched to any container.
+ */
+function getRenderParent(viewNode: LViewNode): LElementNode|null {
+  const container = getParentLNode(viewNode);
+  return container ? container.data[RENDER_PARENT] : null;
+}
+
+const enum WalkLNodeTreeAction {
+  /** node insert in the native environment */
+  Insert = 0,
+
+  /** node detach from the native environment */
+  Detach = 1,
+
+  /** node destruction using the renderer's API */
+  Destroy = 2,
+}
+
+
+/**
+ * Stack used to keep track of projection nodes in walkLNodeTree.
+ *
+ * This is deliberately created outside of walkLNodeTree to avoid allocating
+ * a new array each time the function is called. Instead the array will be
+ * re-used by each invocation. This works because the function is not reentrant.
+ */
+const projectionNodeStack: LProjectionNode[] = [];
+
+/**
+ * Walks a tree of LNodes, applying a transformation on the LElement nodes, either only on the first
+ * one found, or on all of them.
+ *
+ * @param startingNode the node from which the walk is started.
+ * @param rootNode the root node considered. This prevents walking past that node.
+ * @param action identifies the action to be performed on the LElement nodes.
+ * @param renderer the current renderer.
+ * @param renderParentNode Optional the render parent node to be set in all LContainerNodes found,
+ * required for action modes Insert and Destroy.
+ * @param beforeNode Optional the node before which elements should be added, required for action
+ * Insert.
+ */
+function walkLNodeTree(
+    startingNode: LNode | null, rootNode: LNode, action: WalkLNodeTreeAction, renderer: Renderer3,
+    renderParentNode?: LElementNode | null, beforeNode?: RNode | null) {
+  let node: LNode|null = startingNode;
+  let projectionNodeIndex = -1;
+  while (node) {
+    let nextNode: LNode|null = null;
+    const parent = renderParentNode ? renderParentNode.native : null;
+    const nodeType = node.tNode.type;
+    if (nodeType === TNodeType.Element) {
+      // Execute the action
+      executeNodeAction(action, renderer, parent, node.native !, beforeNode);
+      if (node.dynamicLContainerNode) {
+        executeNodeAction(
+            action, renderer, parent, node.dynamicLContainerNode.native !, beforeNode);
+      }
+    } else if (nodeType === TNodeType.Container) {
+      executeNodeAction(action, renderer, parent, node.native !, beforeNode);
+      const lContainerNode: LContainerNode = (node as LContainerNode);
+      const childContainerData: LContainer = lContainerNode.dynamicLContainerNode ?
+          lContainerNode.dynamicLContainerNode.data :
+          lContainerNode.data;
+      if (renderParentNode) {
+        childContainerData[RENDER_PARENT] = renderParentNode;
+      }
+      nextNode =
+          childContainerData[VIEWS].length ? getChildLNode(childContainerData[VIEWS][0]) : null;
+      if (nextNode) {
+        // When the walker enters a container, then the beforeNode has to become the local native
+        // comment node.
+        beforeNode = lContainerNode.dynamicLContainerNode ?
+            lContainerNode.dynamicLContainerNode.native :
+            lContainerNode.native;
+      }
+    } else if (nodeType === TNodeType.Projection) {
+      const componentHost = findComponentHost(node.view);
+      const head =
+          (componentHost.tNode.projection as(TNode | null)[])[node.tNode.projection as number];
+
+      projectionNodeStack[++projectionNodeIndex] = node as LProjectionNode;
+
+      nextNode = head ? (componentHost.data as LViewData)[PARENT] ![head.index] : null;
+    } else {
+      // Otherwise look at the first child
+      nextNode = getChildLNode(node as LViewNode | LElementContainerNode);
+    }
+
+    if (nextNode === null) {
+      nextNode = getNextLNode(node);
+
+      // this last node was projected, we need to get back down to its projection node
+      if (nextNode === null && (node.tNode.flags & TNodeFlags.isProjected)) {
+        nextNode = getNextLNode(projectionNodeStack[projectionNodeIndex--] as LNode);
+      }
+      /**
+       * Find the next node in the LNode tree, taking into account the place where a node is
+       * projected (in the shadow DOM) rather than where it comes from (in the light DOM).
+       *
+       * If there is no sibling node, then it goes to the next sibling of the parent node...
+       * until it reaches rootNode (at which point null is returned).
+       */
+      while (node && !nextNode) {
+        node = getParentLNode(node);
+        if (node === null || node === rootNode) return null;
+
+        // When exiting a container, the beforeNode must be restored to the previous value
+        if (!node.tNode.next && nodeType === TNodeType.Container) {
+          beforeNode = node.native;
+        }
+        nextNode = getNextLNode(node);
+      }
+    }
+    node = nextNode;
+  }
+}
+
+
+/**
+ * Given a current view, finds the nearest component's host (LElement).
+ *
+ * @param lViewData LViewData for which we want a host element node
+ * @returns The host node
+ */
+export function findComponentHost(lViewData: LViewData): LElementNode {
+  let viewRootLNode = lViewData[HOST_NODE];
+
+  while (viewRootLNode.tNode.type === TNodeType.View) {
+    ngDevMode && assertDefined(lViewData[PARENT], 'lViewData.parent');
+    lViewData = lViewData[PARENT] !;
+    viewRootLNode = lViewData[HOST_NODE];
+  }
+
+  ngDevMode && assertNodeType(viewRootLNode, TNodeType.Element);
+  ngDevMode && assertDefined(viewRootLNode.data, 'node.data');
+
+  return viewRootLNode as LElementNode;
+}
+
+/**
+ * NOTE: for performance reasons, the possible actions are inlined within the function instead of
+ * being passed as an argument.
+ */
+function executeNodeAction(
+    action: WalkLNodeTreeAction, renderer: Renderer3, parent: RElement | null,
+    node: RComment | RElement | RText, beforeNode?: RNode | null) {
+  if (action === WalkLNodeTreeAction.Insert) {
+    isProceduralRenderer(renderer !) ?
+        (renderer as ProceduralRenderer3).insertBefore(parent !, node, beforeNode as RNode | null) :
+        parent !.insertBefore(node, beforeNode as RNode | null, true);
+  } else if (action === WalkLNodeTreeAction.Detach) {
+    isProceduralRenderer(renderer !) ?
+        (renderer as ProceduralRenderer3).removeChild(parent !, node) :
+        parent !.removeChild(node);
+  } else if (action === WalkLNodeTreeAction.Destroy) {
+    ngDevMode && ngDevMode.rendererDestroyNode++;
+    (renderer as ProceduralRenderer3).destroyNode !(node);
+  }
+}
+
+export function createTextNode(value: any, renderer: Renderer3): RText {
+  return isProceduralRenderer(renderer) ? renderer.createText(stringify(value)) :
+                                          renderer.createTextNode(stringify(value));
+}
+
+/**
+ * Adds or removes all DOM elements associated with a view.
+ *
+ * Because some root nodes of the view may be containers, we sometimes need
+ * to propagate deeply into the nested containers to remove all elements in the
+ * views beneath it.
+ *
+ * @param container The container to which the root view belongs
+ * @param rootNode The view from which elements should be added or removed
+ * @param insertMode Whether or not elements should be added (if false, removing)
+ * @param beforeNode The node before which elements should be added, if insert mode
+ */
+export function addRemoveViewFromContainer(
+    container: LContainerNode, rootNode: LViewNode, insertMode: true,
+    beforeNode: RNode | null): void;
+export function addRemoveViewFromContainer(
+    container: LContainerNode, rootNode: LViewNode, insertMode: false): void;
+export function addRemoveViewFromContainer(
+    container: LContainerNode, rootNode: LViewNode, insertMode: boolean,
+    beforeNode?: RNode | null): void {
+  ngDevMode && assertNodeType(container, TNodeType.Container);
+  ngDevMode && assertNodeType(rootNode, TNodeType.View);
+  const parentNode = container.data[RENDER_PARENT];
+  const parent = parentNode ? parentNode.native : null;
+  if (parent) {
+    let node: LNode|null = getChildLNode(rootNode);
+    const renderer = container.view[RENDERER];
+    walkLNodeTree(
+        node, rootNode, insertMode ? WalkLNodeTreeAction.Insert : WalkLNodeTreeAction.Detach,
+        renderer, parentNode, beforeNode);
+  }
+}
+
+/**
+ * Traverses down and up the tree of views and containers to remove listeners and
+ * call onDestroy callbacks.
+ *
+ * Notes:
+ *  - Because it's used for onDestroy calls, it needs to be bottom-up.
+ *  - Must process containers instead of their views to avoid splicing
+ *  when views are destroyed and re-added.
+ *  - Using a while loop because it's faster than recursion
+ *  - Destroy only called on movement to sibling or movement to parent (laterally or up)
+ *
+ *  @param rootView The view to destroy
+ */
+export function destroyViewTree(rootView: LViewData): void {
+  // If the view has no children, we can clean it up and return early.
+  if (rootView[TVIEW].childIndex === -1) {
+    return cleanUpView(rootView);
+  }
+  let viewOrContainer: LViewData|LContainer|null = getLViewChild(rootView);
+
+  while (viewOrContainer) {
+    let next: LViewData|LContainer|null = null;
+
+    if (viewOrContainer.length >= HEADER_OFFSET) {
+      // If LViewData, traverse down to child.
+      const view = viewOrContainer as LViewData;
+      if (view[TVIEW].childIndex > -1) next = getLViewChild(view);
+    } else {
+      // If container, traverse down to its first LViewData.
+      const container = viewOrContainer as LContainer;
+      if (container[VIEWS].length) next = container[VIEWS][0].data;
+    }
+
+    if (next == null) {
+      // Only clean up view when moving to the side or up, as destroy hooks
+      // should be called in order from the bottom up.
+      while (viewOrContainer && !viewOrContainer ![NEXT] && viewOrContainer !== rootView) {
+        cleanUpView(viewOrContainer);
+        viewOrContainer = getParentState(viewOrContainer, rootView);
+      }
+      cleanUpView(viewOrContainer || rootView);
+      next = viewOrContainer && viewOrContainer ![NEXT];
+    }
+    viewOrContainer = next;
+  }
+}
+
+/**
+ * Inserts a view into a container.
+ *
+ * This adds the view to the container's array of active views in the correct
+ * position. It also adds the view's elements to the DOM if the container isn't a
+ * root node of another view (in that case, the view's elements will be added when
+ * the container's parent view is added later).
+ *
+ * @param container The container into which the view should be inserted
+ * @param viewNode The view to insert
+ * @param index The index at which to insert the view
+ * @returns The inserted view
+ */
+export function insertView(
+    container: LContainerNode, viewNode: LViewNode, index: number): LViewNode {
+  const state = container.data;
+  const views = state[VIEWS];
+  const lView = viewNode.data as LViewData;
+
+  if (index > 0) {
+    // This is a new view, we need to add it to the children.
+    views[index - 1].data[NEXT] = lView;
+  }
+
+  if (index < views.length) {
+    lView[NEXT] = views[index].data;
+    views.splice(index, 0, viewNode);
+  } else {
+    views.push(viewNode);
+    lView[NEXT] = null;
+  }
+
+  // Dynamically inserted views need a reference to their parent container'S host so it's
+  // possible to jump from a view to its container's next when walking the node tree.
+  if (viewNode.tNode.index === -1) {
+    lView[CONTAINER_INDEX] = container.tNode.parent !.index;
+    (viewNode as{view: LViewData}).view = container.view;
+  }
+
+  // Notify query that a new view has been added
+  if (lView[QUERIES]) {
+    lView[QUERIES] !.insertView(index);
+  }
+
+  // Sets the attached flag
+  lView[FLAGS] |= LViewFlags.Attached;
+
+  return viewNode;
+}
+
+/**
+ * Detaches a view from a container.
+ *
+ * This method splices the view from the container's array of active views. It also
+ * removes the view's elements from the DOM.
+ *
+ * @param container The container from which to detach a view
+ * @param removeIndex The index of the view to detach
+ * @returns The detached view
+ */
+export function detachView(container: LContainerNode, removeIndex: number): LViewNode {
+  const views = container.data[VIEWS];
+  const viewNode = views[removeIndex];
+  if (removeIndex > 0) {
+    views[removeIndex - 1].data[NEXT] = viewNode.data[NEXT] as LViewData;
+  }
+  views.splice(removeIndex, 1);
+  if (!container.tNode.detached) {
+    addRemoveViewFromContainer(container, viewNode, false);
+  }
+  // Notify query that view has been removed
+  const removedLView = viewNode.data;
+  if (removedLView[QUERIES]) {
+    removedLView[QUERIES] !.removeView();
+  }
+  removedLView[CONTAINER_INDEX] = -1;
+  (viewNode as{view: LViewData | null}).view = null;
+  // Unsets the attached flag
+  viewNode.data[FLAGS] &= ~LViewFlags.Attached;
+  return viewNode;
+}
+
+/**
+ * Removes a view from a container, i.e. detaches it and then destroys the underlying LView.
+ *
+ * @param container The container from which to remove a view
+ * @param removeIndex The index of the view to remove
+ * @returns The removed view
+ */
+export function removeView(container: LContainerNode, removeIndex: number): LViewNode {
+  const viewNode = container.data[VIEWS][removeIndex];
+  detachView(container, removeIndex);
+  destroyLView(viewNode.data);
+  return viewNode;
+}
+
+/** Gets the child of the given LViewData */
+export function getLViewChild(viewData: LViewData): LViewData|LContainer|null {
+  if (viewData[TVIEW].childIndex === -1) return null;
+
+  const hostNode: LElementNode|LContainerNode = viewData[viewData[TVIEW].childIndex];
+
+  return hostNode.data ? hostNode.data : (hostNode.dynamicLContainerNode as LContainerNode).data;
+}
+
+/**
+ * A standalone function which destroys an LView,
+ * conducting cleanup (e.g. removing listeners, calling onDestroys).
+ *
+ * @param view The view to be destroyed.
+ */
+export function destroyLView(view: LViewData) {
+  const renderer = view[RENDERER];
+  if (isProceduralRenderer(renderer) && renderer.destroyNode) {
+    walkLNodeTree(view[HOST_NODE], view[HOST_NODE], WalkLNodeTreeAction.Destroy, renderer);
+  }
+  destroyViewTree(view);
+  // Sets the destroyed flag
+  view[FLAGS] |= LViewFlags.Destroyed;
+}
+
+/**
+ * Determines which LViewOrLContainer to jump to when traversing back up the
+ * tree in destroyViewTree.
+ *
+ * Normally, the view's parent LView should be checked, but in the case of
+ * embedded views, the container (which is the view node's parent, but not the
+ * LView's parent) needs to be checked for a possible next property.
+ *
+ * @param state The LViewOrLContainer for which we need a parent state
+ * @param rootView The rootView, so we don't propagate too far up the view tree
+ * @returns The correct parent LViewOrLContainer
+ */
+export function getParentState(state: LViewData | LContainer, rootView: LViewData): LViewData|
+    LContainer|null {
+  let node;
+  if ((node = (state as LViewData) ![HOST_NODE]) && node.tNode.type === TNodeType.View) {
+    // if it's an embedded view, the state needs to go up to the container, in case the
+    // container has a next
+    return getParentLNode(node) !.data as any;
+  } else {
+    // otherwise, use parent view for containers or component views
+    return state[PARENT] === rootView ? null : state[PARENT];
+  }
+}
+
+/**
+ * Removes all listeners and call all onDestroys in a given view.
+ *
+ * @param view The LViewData to clean up
+ */
+function cleanUpView(viewOrContainer: LViewData | LContainer): void {
+  if ((viewOrContainer as LViewData)[TVIEW]) {
+    const view = viewOrContainer as LViewData;
+    removeListeners(view);
+    executeOnDestroys(view);
+    executePipeOnDestroys(view);
+    // For component views only, the local renderer is destroyed as clean up time.
+    if (view[TVIEW].id === -1 && isProceduralRenderer(view[RENDERER])) {
+      ngDevMode && ngDevMode.rendererDestroy++;
+      (view[RENDERER] as ProceduralRenderer3).destroy();
+    }
+  }
+}
+
+/** Removes listeners and unsubscribes from output subscriptions */
+function removeListeners(viewData: LViewData): void {
+  const cleanup = viewData[TVIEW].cleanup !;
+  if (cleanup != null) {
+    for (let i = 0; i < cleanup.length - 1; i += 2) {
+      if (typeof cleanup[i] === 'string') {
+        // This is a listener with the native renderer
+        const native = readElementValue(viewData[cleanup[i + 1]]).native;
+        const listener = viewData[CLEANUP] ![cleanup[i + 2]];
+        native.removeEventListener(cleanup[i], listener, cleanup[i + 3]);
+        i += 2;
+      } else if (typeof cleanup[i] === 'number') {
+        // This is a listener with renderer2 (cleanup fn can be found by index)
+        const cleanupFn = viewData[CLEANUP] ![cleanup[i]];
+        cleanupFn();
+      } else {
+        // This is a cleanup function that is grouped with the index of its context
+        const context = viewData[CLEANUP] ![cleanup[i + 1]];
+        cleanup[i].call(context);
+      }
+    }
+    viewData[CLEANUP] = null;
+  }
+}
+
+/** Calls onDestroy hooks for this view */
+function executeOnDestroys(view: LViewData): void {
+  const tView = view[TVIEW];
+  let destroyHooks: HookData|null;
+  if (tView != null && (destroyHooks = tView.destroyHooks) != null) {
+    callHooks(view[DIRECTIVES] !, destroyHooks);
+  }
+}
+
+/** Calls pipe destroy hooks for this view */
+function executePipeOnDestroys(viewData: LViewData): void {
+  const pipeDestroyHooks = viewData[TVIEW] && viewData[TVIEW].pipeDestroyHooks;
+  if (pipeDestroyHooks) {
+    callHooks(viewData !, pipeDestroyHooks);
+  }
+}
+
+function canInsertNativeChildOfElement(parent: LElementNode, currentView: LViewData): boolean {
+  if (parent.view !== currentView) {
+    // If the Parent view is not the same as current view than we are inserting across
+    // Views. This happens when we insert a root element of the component view into
+    // the component host element and it should always be eager.
+    return true;
+  }
+  // Parent elements can be a component which may have projection.
+  if (parent.data === null) {
+    // Parent is a regular non-component element. We should eagerly insert into it
+    // since we know that this relationship will never be broken.
+    return true;
+  }
+
+  // Parent is a Component. Component's content nodes are not inserted immediately
+  // because they will be projected, and so doing insert at this point would be wasteful.
+  // Since the projection would than move it to its final destination.
+  return false;
+}
+
+/**
+ * We might delay insertion of children for a given view if it is disconnected.
+ * This might happen for 2 main reason:
+ * - view is not inserted into any container (view was created but not iserted yet)
+ * - view is inserted into a container but the container itself is not inserted into the DOM
+ * (container might be part of projection or child of a view that is not inserted yet).
+ *
+ * In other words we can insert children of a given view this view was inserted into a container and
+ * the container itself has it render parent determined.
+ */
+function canInsertNativeChildOfView(parent: LViewNode): boolean {
+  ngDevMode && assertNodeType(parent, TNodeType.View);
+
+  // Because we are inserting into a `View` the `View` may be disconnected.
+  const grandParentContainer = getParentLNode(parent) as LContainerNode;
+  if (grandParentContainer == null) {
+    // The `View` is not inserted into a `Container` we have to delay insertion.
+    return false;
+  }
+  ngDevMode && assertNodeType(grandParentContainer, TNodeType.Container);
+  if (grandParentContainer.data[RENDER_PARENT] == null) {
+    // The parent `Container` itself is disconnected. So we have to delay.
+    return false;
+  }
+
+  // The parent `Container` is in inserted state, so we can eagerly insert into
+  // this location.
+  return true;
+}
+
+/**
+ * Returns whether a native element can be inserted into the given parent.
+ *
+ * There are two reasons why we may not be able to insert a element immediately.
+ * - Projection: When creating a child content element of a component, we have to skip the
+ *   insertion because the content of a component will be projected.
+ *   `<component><content>delayed due to projection</content></component>`
+ * - Parent container is disconnected: This can happen when we are inserting a view into
+ *   parent container, which itself is disconnected. For example the parent container is part
+ *   of a View which has not be inserted or is mare for projection but has not been inserted
+ *   into destination.
+ *
+
+ *
+ * @param parent The parent where the child will be inserted into.
+ * @param currentView Current LView being processed.
+ * @return boolean Whether the child should be inserted now (or delayed until later).
+ */
+export function canInsertNativeNode(parent: LNode, currentView: LViewData): boolean {
+  // We can only insert into a Component or View. Any other type should be an Error.
+  ngDevMode && assertNodeOfPossibleTypes(
+                   parent, TNodeType.Element, TNodeType.ElementContainer, TNodeType.View);
+
+  if (parent.tNode.type === TNodeType.Element) {
+    // Parent is a regular element or a component
+    return canInsertNativeChildOfElement(parent as LElementNode, currentView);
+  } else if (parent.tNode.type === TNodeType.ElementContainer) {
+    // Parent is an element container (ng-container).
+    // Its grand-parent might be an element, view or a sequence of ng-container parents.
+    let grandParent = getParentLNode(parent);
+    while (grandParent !== null && grandParent.tNode.type === TNodeType.ElementContainer) {
+      grandParent = getParentLNode(grandParent);
+    }
+    if (grandParent === null) {
+      return false;
+    } else if (grandParent.tNode.type === TNodeType.Element) {
+      return canInsertNativeChildOfElement(grandParent as LElementNode, currentView);
+    } else {
+      return canInsertNativeChildOfView(grandParent as LViewNode);
+    }
+  } else {
+    // Parent is a View.
+    return canInsertNativeChildOfView(parent as LViewNode);
+  }
+}
+
+/**
+ * Inserts a native node before another native node for a given parent using {@link Renderer3}.
+ * This is a utility function that can be used when native nodes were determined - it abstracts an
+ * actual renderer being used.
+ */
+function nativeInsertBefore(
+    renderer: Renderer3, parent: RElement, child: RNode, beforeNode: RNode | null): void {
+  if (isProceduralRenderer(renderer)) {
+    renderer.insertBefore(parent, child, beforeNode);
+  } else {
+    parent.insertBefore(child, beforeNode, true);
+  }
+}
+
+/**
+ * Appends the `child` element to the `parent`.
+ *
+ * The element insertion might be delayed {@link canInsertNativeNode}.
+ *
+ * @param parent The parent to which to append the child
+ * @param child The child that should be appended
+ * @param currentView The current LView
+ * @returns Whether or not the child was appended
+ */
+export function appendChild(parent: LNode, child: RNode | null, currentView: LViewData): boolean {
+  if (child !== null && canInsertNativeNode(parent, currentView)) {
+    const renderer = currentView[RENDERER];
+    if (parent.tNode.type === TNodeType.View) {
+      const container = getParentLNode(parent) as LContainerNode;
+      const renderParent = container.data[RENDER_PARENT];
+      const views = container.data[VIEWS];
+      const index = views.indexOf(parent as LViewNode);
+      const beforeNode =
+          index + 1 < views.length ? (getChildLNode(views[index + 1]) !).native : container.native;
+      nativeInsertBefore(renderer, renderParent !.native, child, beforeNode);
+    } else if (parent.tNode.type === TNodeType.ElementContainer) {
+      const beforeNode = parent.native;
+      let grandParent = getParentLNode(parent as LElementContainerNode);
+      while (grandParent.tNode.type === TNodeType.ElementContainer) {
+        grandParent = getParentLNode(grandParent as LElementContainerNode);
+      }
+      if (grandParent.tNode.type === TNodeType.View) {
+        const renderParent = getRenderParent(grandParent as LViewNode);
+        nativeInsertBefore(renderer, renderParent !.native, child, beforeNode);
+      } else {
+        nativeInsertBefore(renderer, (grandParent as LElementNode).native, child, beforeNode);
+      }
+    } else {
+      isProceduralRenderer(renderer) ? renderer.appendChild(parent.native !as RElement, child) :
+                                       parent.native !.appendChild(child);
+    }
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Removes the `child` element of the `parent` from the DOM.
+ *
+ * @param parent The parent from which to remove the child
+ * @param child The child that should be removed
+ * @param currentView The current LView
+ * @returns Whether or not the child was removed
+ */
+export function removeChild(parent: LNode, child: RNode | null, currentView: LViewData): boolean {
+  if (child !== null && canInsertNativeNode(parent, currentView)) {
+    // We only remove the element if not in View or not projected.
+    const renderer = currentView[RENDERER];
+    isProceduralRenderer(renderer) ? renderer.removeChild(parent.native as RElement, child) :
+                                     parent.native !.removeChild(child);
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Appends a projected node to the DOM, or in the case of a projected container,
+ * appends the nodes from all of the container's active views to the DOM.
+ *
+ * @param node The node to process
+ * @param currentParent The last parent element to be processed
+ * @param currentView Current LView
+ */
+export function appendProjectedNode(
+    node: LElementNode | LElementContainerNode | LTextNode | LContainerNode,
+    currentParent: LElementNode | LElementContainerNode | LViewNode, currentView: LViewData,
+    renderParent: LElementNode): void {
+  appendChild(currentParent, node.native, currentView);
+  if (node.tNode.type === TNodeType.Container) {
+    // The node we are adding is a container and we are adding it to an element which
+    // is not a component (no more re-projection).
+    // Alternatively a container is projected at the root of a component's template
+    // and can't be re-projected (as not content of any component).
+    // Assign the final projection location in those cases.
+    const lContainer = (node as LContainerNode).data;
+    lContainer[RENDER_PARENT] = renderParent;
+    const views = lContainer[VIEWS];
+    for (let i = 0; i < views.length; i++) {
+      addRemoveViewFromContainer(node as LContainerNode, views[i], true, node.native);
+    }
+  } else if (node.tNode.type === TNodeType.ElementContainer) {
+    let ngContainerChild = getChildLNode(node as LElementContainerNode);
+    while (ngContainerChild) {
+      appendProjectedNode(
+          ngContainerChild as LElementNode | LElementContainerNode | LTextNode | LContainerNode,
+          currentParent, currentView, renderParent);
+      ngContainerChild = getNextLNode(ngContainerChild);
+    }
+  }
+  if (node.dynamicLContainerNode) {
+    node.dynamicLContainerNode.data[RENDER_PARENT] = renderParent;
+    appendChild(currentParent, node.dynamicLContainerNode.native, currentView);
+  }
+}
diff --git a/packages/core/src/render3/node_selector_matcher.ts b/packages/core/src/render3/node_selector_matcher.ts
new file mode 100644
index 000000000000..f4bd4cde6857
--- /dev/null
+++ b/packages/core/src/render3/node_selector_matcher.ts
@@ -0,0 +1,184 @@
+/**
+ * @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 './ng_dev_mode';
+
+import {assertDefined, assertNotEqual} from './assert';
+import {AttributeMarker, TAttributes, TNode, unusedValueExportToPlacateAjd as unused1} from './interfaces/node';
+import {CssSelector, CssSelectorList, NG_PROJECT_AS_ATTR_NAME, SelectorFlags, unusedValueExportToPlacateAjd as unused2} from './interfaces/projection';
+
+const unusedValueToPlacateAjd = unused1 + unused2;
+
+function isCssClassMatching(nodeClassAttrVal: string, cssClassToMatch: string): boolean {
+  const nodeClassesLen = nodeClassAttrVal.length;
+  const matchIndex = nodeClassAttrVal !.indexOf(cssClassToMatch);
+  const matchEndIdx = matchIndex + cssClassToMatch.length;
+  if (matchIndex === -1                                                  // no match
+      || (matchIndex > 0 && nodeClassAttrVal ![matchIndex - 1] !== ' ')  // no space before
+      ||
+      (matchEndIdx < nodeClassesLen && nodeClassAttrVal ![matchEndIdx] !== ' '))  // no space after
+  {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * A utility function to match an Ivy node static data against a simple CSS selector
+ *
+ * @param node static data to match
+ * @param selector
+ * @returns true if node matches the selector.
+ */
+export function isNodeMatchingSelector(tNode: TNode, selector: CssSelector): boolean {
+  ngDevMode && assertDefined(selector[0], 'Selector should have a tag name');
+
+  let mode: SelectorFlags = SelectorFlags.ELEMENT;
+  const nodeAttrs = tNode.attrs !;
+  const selectOnlyMarkerIdx = nodeAttrs ? nodeAttrs.indexOf(AttributeMarker.SelectOnly) : -1;
+
+  // When processing ":not" selectors, we skip to the next ":not" if the
+  // current one doesn't match
+  let skipToNextSelector = false;
+
+  for (let i = 0; i < selector.length; i++) {
+    const current = selector[i];
+    if (typeof current === 'number') {
+      // If we finish processing a :not selector and it hasn't failed, return false
+      if (!skipToNextSelector && !isPositive(mode) && !isPositive(current as number)) {
+        return false;
+      }
+      // If we are skipping to the next :not() and this mode flag is positive,
+      // it's a part of the current :not() selector, and we should keep skipping
+      if (skipToNextSelector && isPositive(current)) continue;
+      skipToNextSelector = false;
+      mode = (current as number) | (mode & SelectorFlags.NOT);
+      continue;
+    }
+
+    if (skipToNextSelector) continue;
+
+    if (mode & SelectorFlags.ELEMENT) {
+      mode = SelectorFlags.ATTRIBUTE | mode & SelectorFlags.NOT;
+      if (current !== '' && current !== tNode.tagName) {
+        if (isPositive(mode)) return false;
+        skipToNextSelector = true;
+      }
+    } else {
+      const attrName = mode & SelectorFlags.CLASS ? 'class' : current;
+      const attrIndexInNode = findAttrIndexInNode(attrName, nodeAttrs);
+
+      if (attrIndexInNode === -1) {
+        if (isPositive(mode)) return false;
+        skipToNextSelector = true;
+        continue;
+      }
+
+      const selectorAttrValue = mode & SelectorFlags.CLASS ? current : selector[++i];
+      if (selectorAttrValue !== '') {
+        let nodeAttrValue: string;
+        const maybeAttrName = nodeAttrs[attrIndexInNode];
+        if (selectOnlyMarkerIdx > -1 && attrIndexInNode > selectOnlyMarkerIdx) {
+          nodeAttrValue = '';
+        } else {
+          ngDevMode && assertNotEqual(
+                           maybeAttrName, AttributeMarker.NamespaceURI,
+                           'We do not match directives on namespaced attributes');
+          nodeAttrValue = nodeAttrs[attrIndexInNode + 1] as string;
+        }
+        if (mode & SelectorFlags.CLASS &&
+                !isCssClassMatching(nodeAttrValue as string, selectorAttrValue as string) ||
+            mode & SelectorFlags.ATTRIBUTE && selectorAttrValue !== nodeAttrValue) {
+          if (isPositive(mode)) return false;
+          skipToNextSelector = true;
+        }
+      }
+    }
+  }
+
+  return isPositive(mode) || skipToNextSelector;
+}
+
+function isPositive(mode: SelectorFlags): boolean {
+  return (mode & SelectorFlags.NOT) === 0;
+}
+
+/**
+ * Examines an attributes definition array from a node to find the index of the
+ * attribute with the specified name.
+ *
+ * NOTE: Will not find namespaced attributes.
+ *
+ * @param name the name of the attribute to find
+ * @param attrs the attribute array to examine
+ */
+function findAttrIndexInNode(name: string, attrs: TAttributes | null): number {
+  if (attrs === null) return -1;
+  let selectOnlyMode = false;
+  let i = 0;
+  while (i < attrs.length) {
+    const maybeAttrName = attrs[i];
+    if (maybeAttrName === name) {
+      return i;
+    } else if (maybeAttrName === AttributeMarker.NamespaceURI) {
+      // NOTE(benlesh): will not find namespaced attributes. This is by design.
+      i += 4;
+    } else {
+      if (maybeAttrName === AttributeMarker.SelectOnly) {
+        selectOnlyMode = true;
+      }
+      i += selectOnlyMode ? 1 : 2;
+    }
+  }
+
+  return -1;
+}
+
+export function isNodeMatchingSelectorList(tNode: TNode, selector: CssSelectorList): boolean {
+  for (let i = 0; i < selector.length; i++) {
+    if (isNodeMatchingSelector(tNode, selector[i])) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function getProjectAsAttrValue(tNode: TNode): string|null {
+  const nodeAttrs = tNode.attrs;
+  if (nodeAttrs != null) {
+    const ngProjectAsAttrIdx = nodeAttrs.indexOf(NG_PROJECT_AS_ATTR_NAME);
+    // only check for ngProjectAs in attribute names, don't accidentally match attribute's value
+    // (attribute names are stored at even indexes)
+    if ((ngProjectAsAttrIdx & 1) === 0) {
+      return nodeAttrs[ngProjectAsAttrIdx + 1] as string;
+    }
+  }
+  return null;
+}
+
+/**
+ * Checks a given node against matching selectors and returns
+ * selector index (or 0 if none matched).
+ *
+ * This function takes into account the ngProjectAs attribute: if present its value will be compared
+ * to the raw (un-parsed) CSS selector instead of using standard selector matching logic.
+ */
+export function matchingSelectorIndex(
+    tNode: TNode, selectors: CssSelectorList[], textSelectors: string[]): number {
+  const ngProjectAsAttrVal = getProjectAsAttrValue(tNode);
+  for (let i = 0; i < selectors.length; i++) {
+    // if a node has the ngProjectAs attribute match it against unparsed selector
+    // match a node against a parsed selector only if ngProjectAs attribute is not present
+    if (ngProjectAsAttrVal === textSelectors[i] ||
+        ngProjectAsAttrVal === null && isNodeMatchingSelectorList(tNode, selectors[i])) {
+      return i + 1;  // first matching selector "captures" a given node
+    }
+  }
+  return 0;
+}
diff --git a/packages/core/src/render3/pipe.ts b/packages/core/src/render3/pipe.ts
new file mode 100644
index 000000000000..d956528edeb7
--- /dev/null
+++ b/packages/core/src/render3/pipe.ts
@@ -0,0 +1,155 @@
+/**
+ * @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 {PipeTransform} from '../change_detection/pipe_transform';
+
+import {getTView, load, store} from './instructions';
+import {PipeDefInternal, PipeDefList} from './interfaces/definition';
+import {HEADER_OFFSET} from './interfaces/view';
+import {pureFunction1, pureFunction2, pureFunction3, pureFunction4, pureFunctionV} from './pure_function';
+
+/**
+ * Create a pipe.
+ *
+ * @param index Pipe index where the pipe will be stored.
+ * @param pipeName The name of the pipe
+ * @returns T the instance of the pipe.
+ */
+export function pipe(index: number, pipeName: string): any {
+  const tView = getTView();
+  let pipeDef: PipeDefInternal<any>;
+  const adjustedIndex = index + HEADER_OFFSET;
+
+  if (tView.firstTemplatePass) {
+    pipeDef = getPipeDef(pipeName, tView.pipeRegistry);
+    tView.data[adjustedIndex] = pipeDef;
+    if (pipeDef.onDestroy) {
+      (tView.pipeDestroyHooks || (tView.pipeDestroyHooks = [
+       ])).push(adjustedIndex, pipeDef.onDestroy);
+    }
+  } else {
+    pipeDef = tView.data[adjustedIndex] as PipeDefInternal<any>;
+  }
+
+  const pipeInstance = pipeDef.factory();
+  store(index, pipeInstance);
+  return pipeInstance;
+}
+
+/**
+ * Searches the pipe registry for a pipe with the given name. If one is found,
+ * returns the pipe. Otherwise, an error is thrown because the pipe cannot be resolved.
+ *
+ * @param name Name of pipe to resolve
+ * @param registry Full list of available pipes
+ * @returns Matching PipeDef
+ */
+function getPipeDef(name: string, registry: PipeDefList | null): PipeDefInternal<any> {
+  if (registry) {
+    for (let i = 0; i < registry.length; i++) {
+      const pipeDef = registry[i];
+      if (name === pipeDef.name) {
+        return pipeDef;
+      }
+    }
+  }
+  throw new Error(`Pipe with name '${name}' not found!`);
+}
+
+/**
+ * Invokes a pipe with 1 arguments.
+ *
+ * This instruction acts as a guard to {@link PipeTransform#transform} invoking
+ * the pipe only when an input to the pipe changes.
+ *
+ * @param index Pipe index where the pipe was stored on creation.
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param v1 1st argument to {@link PipeTransform#transform}.
+ */
+export function pipeBind1(index: number, slotOffset: number, v1: any): any {
+  const pipeInstance = load<PipeTransform>(index);
+  return isPure(index) ? pureFunction1(slotOffset, pipeInstance.transform, v1, pipeInstance) :
+                         pipeInstance.transform(v1);
+}
+
+/**
+ * Invokes a pipe with 2 arguments.
+ *
+ * This instruction acts as a guard to {@link PipeTransform#transform} invoking
+ * the pipe only when an input to the pipe changes.
+ *
+ * @param index Pipe index where the pipe was stored on creation.
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param v1 1st argument to {@link PipeTransform#transform}.
+ * @param v2 2nd argument to {@link PipeTransform#transform}.
+ */
+export function pipeBind2(index: number, slotOffset: number, v1: any, v2: any): any {
+  const pipeInstance = load<PipeTransform>(index);
+  return isPure(index) ? pureFunction2(slotOffset, pipeInstance.transform, v1, v2, pipeInstance) :
+                         pipeInstance.transform(v1, v2);
+}
+
+/**
+ * Invokes a pipe with 3 arguments.
+ *
+ * This instruction acts as a guard to {@link PipeTransform#transform} invoking
+ * the pipe only when an input to the pipe changes.
+ *
+ * @param index Pipe index where the pipe was stored on creation.
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param v1 1st argument to {@link PipeTransform#transform}.
+ * @param v2 2nd argument to {@link PipeTransform#transform}.
+ * @param v3 4rd argument to {@link PipeTransform#transform}.
+ */
+export function pipeBind3(index: number, slotOffset: number, v1: any, v2: any, v3: any): any {
+  const pipeInstance = load<PipeTransform>(index);
+  return isPure(index) ?
+      pureFunction3(slotOffset, pipeInstance.transform, v1, v2, v3, pipeInstance) :
+      pipeInstance.transform(v1, v2, v3);
+}
+
+/**
+ * Invokes a pipe with 4 arguments.
+ *
+ * This instruction acts as a guard to {@link PipeTransform#transform} invoking
+ * the pipe only when an input to the pipe changes.
+ *
+ * @param index Pipe index where the pipe was stored on creation.
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param v1 1st argument to {@link PipeTransform#transform}.
+ * @param v2 2nd argument to {@link PipeTransform#transform}.
+ * @param v3 3rd argument to {@link PipeTransform#transform}.
+ * @param v4 4th argument to {@link PipeTransform#transform}.
+ */
+export function pipeBind4(
+    index: number, slotOffset: number, v1: any, v2: any, v3: any, v4: any): any {
+  const pipeInstance = load<PipeTransform>(index);
+  return isPure(index) ?
+      pureFunction4(slotOffset, pipeInstance.transform, v1, v2, v3, v4, pipeInstance) :
+      pipeInstance.transform(v1, v2, v3, v4);
+}
+
+/**
+ * Invokes a pipe with variable number of arguments.
+ *
+ * This instruction acts as a guard to {@link PipeTransform#transform} invoking
+ * the pipe only when an input to the pipe changes.
+ *
+ * @param index Pipe index where the pipe was stored on creation.
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param values Array of arguments to pass to {@link PipeTransform#transform} method.
+ */
+export function pipeBindV(index: number, slotOffset: number, values: any[]): any {
+  const pipeInstance = load<PipeTransform>(index);
+  return isPure(index) ? pureFunctionV(slotOffset, pipeInstance.transform, values, pipeInstance) :
+                         pipeInstance.transform.apply(pipeInstance, values);
+}
+
+function isPure(index: number): boolean {
+  return (<PipeDefInternal<any>>getTView().data[index + HEADER_OFFSET]).pure;
+}
diff --git a/packages/core/src/render3/pure_function.ts b/packages/core/src/render3/pure_function.ts
new file mode 100644
index 000000000000..ecf5be96663a
--- /dev/null
+++ b/packages/core/src/render3/pure_function.ts
@@ -0,0 +1,279 @@
+/**
+ * @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 {assertReservedSlotInitialized, bindingUpdated, bindingUpdated2, bindingUpdated4, checkAndUpdateBinding, consumeBinding, getCreationMode, moveBindingIndexToReservedSlot, restoreBindingIndex} from './instructions';
+
+
+
+/**
+ * If the value hasn't been saved, calls the pure function to store and return the
+ * value. If it has been saved, returns the saved value.
+ *
+ * @param pureFn Function that returns a value
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param thisArg Optional calling context of pureFn
+ * @returns value
+ */
+export function pureFunction0<T>(slotOffset: number, pureFn: () => T, thisArg?: any): T {
+  ngDevMode && assertReservedSlotInitialized(slotOffset, 1);
+  const index = moveBindingIndexToReservedSlot(slotOffset);
+  const value = getCreationMode() ?
+      checkAndUpdateBinding(thisArg ? pureFn.call(thisArg) : pureFn()) :
+      consumeBinding();
+  restoreBindingIndex(index);
+  return value;
+}
+
+/**
+ * If the value of the provided exp has changed, calls the pure function to return
+ * an updated value. Or if the value has not changed, returns cached value.
+ *
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param pureFn Function that returns an updated value
+ * @param exp Updated expression value
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ */
+export function pureFunction1(
+    slotOffset: number, pureFn: (v: any) => any, exp: any, thisArg?: any): any {
+  ngDevMode && assertReservedSlotInitialized(slotOffset, 2);
+  const index = moveBindingIndexToReservedSlot(slotOffset);
+  const value = bindingUpdated(exp) ?
+      checkAndUpdateBinding(thisArg ? pureFn.call(thisArg, exp) : pureFn(exp)) :
+      consumeBinding();
+  restoreBindingIndex(index);
+  return value;
+}
+
+/**
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ */
+export function pureFunction2(
+    slotOffset: number, pureFn: (v1: any, v2: any) => any, exp1: any, exp2: any,
+    thisArg?: any): any {
+  ngDevMode && assertReservedSlotInitialized(slotOffset, 3);
+  const index = moveBindingIndexToReservedSlot(slotOffset);
+  const value = bindingUpdated2(exp1, exp2) ?
+      checkAndUpdateBinding(thisArg ? pureFn.call(thisArg, exp1, exp2) : pureFn(exp1, exp2)) :
+      consumeBinding();
+  restoreBindingIndex(index);
+  return value;
+}
+
+/**
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ */
+export function pureFunction3(
+    slotOffset: number, pureFn: (v1: any, v2: any, v3: any) => any, exp1: any, exp2: any, exp3: any,
+    thisArg?: any): any {
+  ngDevMode && assertReservedSlotInitialized(slotOffset, 4);
+  const index = moveBindingIndexToReservedSlot(slotOffset);
+  const different = bindingUpdated2(exp1, exp2);
+  const value = bindingUpdated(exp3) || different ?
+      checkAndUpdateBinding(
+          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3) : pureFn(exp1, exp2, exp3)) :
+      consumeBinding();
+  restoreBindingIndex(index);
+  return value;
+}
+
+/**
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param exp4
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ */
+export function pureFunction4(
+    slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any) => any, exp1: any, exp2: any,
+    exp3: any, exp4: any, thisArg?: any): any {
+  ngDevMode && assertReservedSlotInitialized(slotOffset, 5);
+  const index = moveBindingIndexToReservedSlot(slotOffset);
+  const value = bindingUpdated4(exp1, exp2, exp3, exp4) ?
+      checkAndUpdateBinding(
+          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4) : pureFn(exp1, exp2, exp3, exp4)) :
+      consumeBinding();
+  restoreBindingIndex(index);
+  return value;
+}
+
+/**
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param exp4
+ * @param exp5
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ */
+export function pureFunction5(
+    slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any) => any, exp1: any,
+    exp2: any, exp3: any, exp4: any, exp5: any, thisArg?: any): any {
+  ngDevMode && assertReservedSlotInitialized(slotOffset, 6);
+  const index = moveBindingIndexToReservedSlot(slotOffset);
+  const different = bindingUpdated4(exp1, exp2, exp3, exp4);
+  const value = bindingUpdated(exp5) || different ?
+      checkAndUpdateBinding(
+          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5) :
+                    pureFn(exp1, exp2, exp3, exp4, exp5)) :
+      consumeBinding();
+  restoreBindingIndex(index);
+  return value;
+}
+
+/**
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param exp4
+ * @param exp5
+ * @param exp6
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ */
+export function pureFunction6(
+    slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any) => any,
+    exp1: any, exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, thisArg?: any): any {
+  ngDevMode && assertReservedSlotInitialized(slotOffset, 7);
+  const index = moveBindingIndexToReservedSlot(slotOffset);
+  const different = bindingUpdated4(exp1, exp2, exp3, exp4);
+  const value = bindingUpdated2(exp5, exp6) || different ?
+      checkAndUpdateBinding(
+          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6) :
+                    pureFn(exp1, exp2, exp3, exp4, exp5, exp6)) :
+      consumeBinding();
+  restoreBindingIndex(index);
+  return value;
+}
+
+/**
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param exp4
+ * @param exp5
+ * @param exp6
+ * @param exp7
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ */
+export function pureFunction7(
+    slotOffset: number,
+    pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any) => any, exp1: any,
+    exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, exp7: any, thisArg?: any): any {
+  ngDevMode && assertReservedSlotInitialized(slotOffset, 8);
+  const index = moveBindingIndexToReservedSlot(slotOffset);
+  let different = bindingUpdated4(exp1, exp2, exp3, exp4);
+  different = bindingUpdated2(exp5, exp6) || different;
+  const value = bindingUpdated(exp7) || different ?
+      checkAndUpdateBinding(
+          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7) :
+                    pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7)) :
+      consumeBinding();
+  restoreBindingIndex(index);
+  return value;
+}
+
+/**
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param pureFn
+ * @param exp1
+ * @param exp2
+ * @param exp3
+ * @param exp4
+ * @param exp5
+ * @param exp6
+ * @param exp7
+ * @param exp8
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ */
+export function pureFunction8(
+    slotOffset: number,
+    pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any, v8: any) => any,
+    exp1: any, exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, exp7: any, exp8: any,
+    thisArg?: any): any {
+  ngDevMode && assertReservedSlotInitialized(slotOffset, 9);
+  const index = moveBindingIndexToReservedSlot(slotOffset);
+  const different = bindingUpdated4(exp1, exp2, exp3, exp4);
+  const value = bindingUpdated4(exp5, exp6, exp7, exp8) || different ?
+      checkAndUpdateBinding(
+          thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8) :
+                    pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8)) :
+      consumeBinding();
+  restoreBindingIndex(index);
+  return value;
+}
+
+/**
+ * pureFunction instruction that can support any number of bindings.
+ *
+ * If the value of any provided exp has changed, calls the pure function to return
+ * an updated value. Or if no values have changed, returns cached value.
+ *
+ * @param slotOffset the offset in the reserved slot space {@link reserveSlots}
+ * @param pureFn A pure function that takes binding values and builds an object or array
+ * containing those values.
+ * @param exps An array of binding values
+ * @param thisArg Optional calling context of pureFn
+ * @returns Updated or cached value
+ */
+export function pureFunctionV(
+    slotOffset: number, pureFn: (...v: any[]) => any, exps: any[], thisArg?: any): any {
+  ngDevMode && assertReservedSlotInitialized(slotOffset, exps.length + 1);
+  const index = moveBindingIndexToReservedSlot(slotOffset);
+
+  let different = false;
+  for (let i = 0; i < exps.length; i++) {
+    bindingUpdated(exps[i]) && (different = true);
+  }
+  const value = different ? checkAndUpdateBinding(pureFn.apply(thisArg, exps)) : consumeBinding();
+  restoreBindingIndex(index);
+  return value;
+}
diff --git a/packages/core/src/render3/query.ts b/packages/core/src/render3/query.ts
new file mode 100644
index 000000000000..18e2ebff74e1
--- /dev/null
+++ b/packages/core/src/render3/query.ts
@@ -0,0 +1,463 @@
+/**
+ * @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
+ */
+
+// We are temporarily importing the existing viewEngine_from core so we can be sure we are
+// correctly implementing its interfaces for backwards compatibility.
+import {Observable} from 'rxjs';
+
+import {EventEmitter} from '../event_emitter';
+import {QueryList as viewEngine_QueryList} from '../linker/query_list';
+import {Type} from '../type';
+import {getSymbolIterator} from '../util';
+
+import {assertDefined, assertEqual} from './assert';
+import {ReadFromInjectorFn, getOrCreateNodeInjectorForNode} from './di';
+import {assertPreviousIsParent, getOrCreateCurrentQueries, isContentQueryHost, store, storeCleanupWithContext} from './instructions';
+import {DirectiveDefInternal, unusedValueExportToPlacateAjd as unused1} from './interfaces/definition';
+import {LInjector, unusedValueExportToPlacateAjd as unused2} from './interfaces/injector';
+import {LContainerNode, LElementNode, LNode, TNode, TNodeFlags, unusedValueExportToPlacateAjd as unused3} from './interfaces/node';
+import {LQueries, QueryReadType, unusedValueExportToPlacateAjd as unused4} from './interfaces/query';
+import {DIRECTIVES, TVIEW} from './interfaces/view';
+import {flatten} from './util';
+
+const unusedValueToPlacateAjd = unused1 + unused2 + unused3 + unused4;
+
+/**
+ * A predicate which determines if a given element/directive should be included in the query
+ * results.
+ */
+export interface QueryPredicate<T> {
+  /**
+   * If looking for directives then it contains the directive type.
+   */
+  type: Type<T>|null;
+
+  /**
+   * If selector then contains local names to query for.
+   */
+  selector: string[]|null;
+
+  /**
+   * Indicates which token should be read from DI for this query.
+   */
+  read: QueryReadType<T>|Type<T>|null;
+}
+
+/**
+ * An object representing a query, which is a combination of:
+ * - query predicate to determines if a given element/directive should be included in the query
+ * - values collected based on a predicate
+ * - `QueryList` to which collected values should be reported
+ */
+export interface LQuery<T> {
+  /**
+   * Next query. Used when queries are stored as a linked list in `LQueries`.
+   */
+  next: LQuery<any>|null;
+
+  /**
+   * Destination to which the value should be added.
+   */
+  list: QueryList<T>;
+
+  /**
+   * A predicate which determines if a given element/directive should be included in the query
+   * results.
+   */
+  predicate: QueryPredicate<T>;
+
+  /**
+   * Values which have been located.
+   *
+   * This is what builds up the `QueryList._valuesTree`.
+   */
+  values: any[];
+
+  /**
+   * A pointer to an array that stores collected values from views. This is necessary so we know a
+   * container into which to insert nodes collected from views.
+   */
+  containerValues: any[]|null;
+}
+
+export class LQueries_ implements LQueries {
+  constructor(
+      public parent: LQueries_|null, private shallow: LQuery<any>|null,
+      private deep: LQuery<any>|null) {}
+
+  track<T>(
+      queryList: viewEngine_QueryList<T>, predicate: Type<T>|string[], descend?: boolean,
+      read?: QueryReadType<T>|Type<T>): void {
+    if (descend) {
+      this.deep = createQuery(this.deep, queryList, predicate, read != null ? read : null);
+    } else {
+      this.shallow = createQuery(this.shallow, queryList, predicate, read != null ? read : null);
+    }
+  }
+
+  clone(): LQueries { return new LQueries_(this, null, this.deep); }
+
+  container(): LQueries|null {
+    const shallowResults = copyQueriesToContainer(this.shallow);
+    const deepResults = copyQueriesToContainer(this.deep);
+
+    return shallowResults || deepResults ? new LQueries_(this, shallowResults, deepResults) : null;
+  }
+
+  createView(): LQueries|null {
+    const shallowResults = copyQueriesToView(this.shallow);
+    const deepResults = copyQueriesToView(this.deep);
+
+    return shallowResults || deepResults ? new LQueries_(this, shallowResults, deepResults) : null;
+  }
+
+  insertView(index: number): void {
+    insertView(index, this.shallow);
+    insertView(index, this.deep);
+  }
+
+  addNode(node: LNode): LQueries|null {
+    add(this.deep, node);
+
+    if (isContentQueryHost(node.tNode)) {
+      add(this.shallow, node);
+
+      if (node.tNode.parent && isContentQueryHost(node.tNode.parent)) {
+        // if node has a content query and parent also has a content query
+        // both queries need to check this node for shallow matches
+        add(this.parent !.shallow, node);
+      }
+      return this.parent;
+    }
+
+    isRootNodeOfQuery(node.tNode) && add(this.shallow, node);
+    return this;
+  }
+
+  removeView(): void {
+    removeView(this.shallow);
+    removeView(this.deep);
+  }
+}
+
+function isRootNodeOfQuery(tNode: TNode) {
+  return tNode.parent === null || isContentQueryHost(tNode.parent);
+}
+
+function copyQueriesToContainer(query: LQuery<any>| null): LQuery<any>|null {
+  let result: LQuery<any>|null = null;
+
+  while (query) {
+    const containerValues: any[] = [];  // prepare room for views
+    query.values.push(containerValues);
+    const clonedQuery: LQuery<any> = {
+      next: result,
+      list: query.list,
+      predicate: query.predicate,
+      values: containerValues,
+      containerValues: null
+    };
+    result = clonedQuery;
+    query = query.next;
+  }
+
+  return result;
+}
+
+function copyQueriesToView(query: LQuery<any>| null): LQuery<any>|null {
+  let result: LQuery<any>|null = null;
+
+  while (query) {
+    const clonedQuery: LQuery<any> = {
+      next: result,
+      list: query.list,
+      predicate: query.predicate,
+      values: [],
+      containerValues: query.values
+    };
+    result = clonedQuery;
+    query = query.next;
+  }
+
+  return result;
+}
+
+function insertView(index: number, query: LQuery<any>| null) {
+  while (query) {
+    ngDevMode &&
+        assertDefined(
+            query.containerValues, 'View queries need to have a pointer to container values.');
+    query.containerValues !.splice(index, 0, query.values);
+    query = query.next;
+  }
+}
+
+function removeView(query: LQuery<any>| null) {
+  while (query) {
+    ngDevMode &&
+        assertDefined(
+            query.containerValues, 'View queries need to have a pointer to container values.');
+
+    const containerValues = query.containerValues !;
+    const viewValuesIdx = containerValues.indexOf(query.values);
+    const removed = containerValues.splice(viewValuesIdx, 1);
+
+    // mark a query as dirty only when removed view had matching modes
+    ngDevMode && assertEqual(removed.length, 1, 'removed.length');
+    if (removed[0].length) {
+      query.list.setDirty();
+    }
+
+    query = query.next;
+  }
+}
+
+
+/**
+ * Iterates over local names for a given node and returns directive index
+ * (or -1 if a local name points to an element).
+ *
+ * @param tNode static data of a node to check
+ * @param selector selector to match
+ * @returns directive index, -1 or null if a selector didn't match any of the local names
+ */
+function getIdxOfMatchingSelector(tNode: TNode, selector: string): number|null {
+  const localNames = tNode.localNames;
+  if (localNames) {
+    for (let i = 0; i < localNames.length; i += 2) {
+      if (localNames[i] === selector) {
+        return localNames[i + 1] as number;
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Iterates over all the directives for a node and returns index of a directive for a given type.
+ *
+ * @param node Node on which directives are present.
+ * @param type Type of a directive to look for.
+ * @returns Index of a found directive or null when none found.
+ */
+function getIdxOfMatchingDirective(node: LNode, type: Type<any>): number|null {
+  const defs = node.view[TVIEW].directives !;
+  const flags = node.tNode.flags;
+  const count = flags & TNodeFlags.DirectiveCountMask;
+  const start = flags >> TNodeFlags.DirectiveStartingIndexShift;
+  const end = start + count;
+  for (let i = start; i < end; i++) {
+    const def = defs[i] as DirectiveDefInternal<any>;
+    if (def.type === type && def.diPublic) {
+      return i;
+    }
+  }
+  return null;
+}
+
+function readFromNodeInjector(
+    nodeInjector: LInjector, node: LNode, read: QueryReadType<any>| Type<any>,
+    directiveIdx: number): any {
+  if (read instanceof ReadFromInjectorFn) {
+    return read.read(nodeInjector, node, directiveIdx);
+  } else {
+    const matchingIdx = getIdxOfMatchingDirective(node, read as Type<any>);
+    if (matchingIdx !== null) {
+      return node.view[DIRECTIVES] ![matchingIdx];
+    }
+  }
+  return null;
+}
+
+function add(query: LQuery<any>| null, node: LNode) {
+  const nodeInjector = getOrCreateNodeInjectorForNode(node as LElementNode | LContainerNode);
+  while (query) {
+    const predicate = query.predicate;
+    const type = predicate.type;
+    if (type) {
+      const directiveIdx = getIdxOfMatchingDirective(node, type);
+      if (directiveIdx !== null) {
+        // a node is matching a predicate - determine what to read
+        // if read token and / or strategy is not specified, use type as read token
+        const result =
+            readFromNodeInjector(nodeInjector, node, predicate.read || type, directiveIdx);
+        if (result !== null) {
+          addMatch(query, result);
+        }
+      }
+    } else {
+      const selector = predicate.selector !;
+      for (let i = 0; i < selector.length; i++) {
+        const directiveIdx = getIdxOfMatchingSelector(node.tNode, selector[i]);
+        if (directiveIdx !== null) {
+          // a node is matching a predicate - determine what to read
+          // note that queries using name selector must specify read strategy
+          ngDevMode && assertDefined(predicate.read, 'the node should have a predicate');
+          const result = readFromNodeInjector(nodeInjector, node, predicate.read !, directiveIdx);
+          if (result !== null) {
+            addMatch(query, result);
+          }
+        }
+      }
+    }
+    query = query.next;
+  }
+}
+
+function addMatch(query: LQuery<any>, matchingValue: any): void {
+  query.values.push(matchingValue);
+  query.list.setDirty();
+}
+
+function createPredicate<T>(
+    predicate: Type<T>| string[], read: QueryReadType<T>| Type<T>| null): QueryPredicate<T> {
+  const isArray = Array.isArray(predicate);
+  return {
+    type: isArray ? null : predicate as Type<T>,
+    selector: isArray ? predicate as string[] : null,
+    read: read
+  };
+}
+
+function createQuery<T>(
+    previous: LQuery<any>| null, queryList: QueryList<T>, predicate: Type<T>| string[],
+    read: QueryReadType<T>| Type<T>| null): LQuery<T> {
+  return {
+    next: previous,
+    list: queryList,
+    predicate: createPredicate(predicate, read),
+    values: (queryList as any as QueryList_<T>)._valuesTree,
+    containerValues: null
+  };
+}
+
+class QueryList_<T>/* implements viewEngine_QueryList<T> */ {
+  readonly dirty = true;
+  readonly changes: Observable<T> = new EventEmitter();
+  private _values: T[] = [];
+  /** @internal */
+  _valuesTree: any[] = [];
+
+  get length(): number { return this._values.length; }
+
+  get first(): T|null {
+    let values = this._values;
+    return values.length ? values[0] : null;
+  }
+
+  get last(): T|null {
+    let values = this._values;
+    return values.length ? values[values.length - 1] : null;
+  }
+
+  /**
+   * See
+   * [Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+   */
+  map<U>(fn: (item: T, index: number, array: T[]) => U): U[] { return this._values.map(fn); }
+
+  /**
+   * See
+   * [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
+   */
+  filter(fn: (item: T, index: number, array: T[]) => boolean): T[] {
+    return this._values.filter(fn);
+  }
+
+  /**
+   * See
+   * [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
+   */
+  find(fn: (item: T, index: number, array: T[]) => boolean): T|undefined {
+    return this._values.find(fn);
+  }
+
+  /**
+   * See
+   * [Array.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
+   */
+  reduce<U>(fn: (prevValue: U, curValue: T, curIndex: number, array: T[]) => U, init: U): U {
+    return this._values.reduce(fn, init);
+  }
+
+  /**
+   * See
+   * [Array.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
+   */
+  forEach(fn: (item: T, index: number, array: T[]) => void): void { this._values.forEach(fn); }
+
+  /**
+   * See
+   * [Array.some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
+   */
+  some(fn: (value: T, index: number, array: T[]) => boolean): boolean {
+    return this._values.some(fn);
+  }
+
+  toArray(): T[] { return this._values.slice(0); }
+
+  [getSymbolIterator()](): Iterator<T> { return (this._values as any)[getSymbolIterator()](); }
+
+  toString(): string { return this._values.toString(); }
+
+  reset(res: (any[]|T)[]): void {
+    this._values = flatten(res);
+    (this as{dirty: boolean}).dirty = false;
+  }
+
+  notifyOnChanges(): void { (this.changes as EventEmitter<any>).emit(this); }
+  setDirty(): void { (this as{dirty: boolean}).dirty = true; }
+  destroy(): void {
+    (this.changes as EventEmitter<any>).complete();
+    (this.changes as EventEmitter<any>).unsubscribe();
+  }
+}
+
+// NOTE: this hack is here because IQueryList has private members and therefore
+// it can't be implemented only extended.
+export type QueryList<T> = viewEngine_QueryList<T>;
+export const QueryList: typeof viewEngine_QueryList = QueryList_ as any;
+
+/**
+ * Creates and returns a QueryList.
+ *
+ * @param memoryIndex The index in memory where the QueryList should be saved. If null,
+ * this is is a content query and the QueryList will be saved later through directiveCreate.
+ * @param predicate The type for which the query will search
+ * @param descend Whether or not to descend into children
+ * @param read What to save in the query
+ * @returns QueryList<T>
+ */
+export function query<T>(
+    memoryIndex: number | null, predicate: Type<any>| string[], descend?: boolean,
+    read?: QueryReadType<T>| Type<T>): QueryList<T> {
+  ngDevMode && assertPreviousIsParent();
+  const queryList = new QueryList<T>();
+  const queries = getOrCreateCurrentQueries(LQueries_);
+  queries.track(queryList, predicate, descend, read);
+  storeCleanupWithContext(null, queryList, queryList.destroy);
+  if (memoryIndex != null) {
+    store(memoryIndex, queryList);
+  }
+  return queryList;
+}
+
+/**
+ * Refreshes a query by combining matches from all active views and removing matches from deleted
+ * views.
+ * Returns true if a query got dirty during change detection, false otherwise.
+ */
+export function queryRefresh(queryList: QueryList<any>): boolean {
+  const queryListImpl = (queryList as any as QueryList_<any>);
+  if (queryList.dirty) {
+    queryList.reset(queryListImpl._valuesTree);
+    queryList.notifyOnChanges();
+    return true;
+  }
+  return false;
+}
diff --git a/packages/core/src/render3/styling.ts b/packages/core/src/render3/styling.ts
new file mode 100644
index 000000000000..aa4678234144
--- /dev/null
+++ b/packages/core/src/render3/styling.ts
@@ -0,0 +1,898 @@
+/**
+ * @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 {StyleSanitizeFn} from '../sanitization/style_sanitizer';
+import {InitialStylingFlags} from './interfaces/definition';
+import {LElementNode} from './interfaces/node';
+import {Renderer3, RendererStyleFlags3, isProceduralRenderer} from './interfaces/renderer';
+
+
+/**
+ * The styling context acts as a styling manifest (shaped as an array) for determining which
+ * styling properties have been assigned via the provided `updateStylingMap`, `updateStyleProp`
+ * and `updateClassProp` functions. There are also two initialization functions
+ * `allocStylingContext` and `createStylingContextTemplate` which are used to initialize
+ * and/or clone the context.
+ *
+ * The context is an array where the first two cells are used for static data (initial styling)
+ * and dirty flags / index offsets). The remaining set of cells is used for multi (map) and single
+ * (prop) style values.
+ *
+ * each value from here onwards is mapped as so:
+ * [i] = mutation/type flag for the style/class value
+ * [i + 1] = prop string (or null incase it has been removed)
+ * [i + 2] = value string (or null incase it has been removed)
+ *
+ * There are three types of styling types stored in this context:
+ *   initial: any styles that are passed in once the context is created
+ *            (these are stored in the first cell of the array and the first
+ *             value of this array is always `null` even if no initial styling exists.
+ *             the `null` value is there so that any new styles have a parent to point
+ *             to. This way we can always assume that there is a parent.)
+ *
+ *   single: any styles that are updated using `updateStyleProp` or `updateClassProp` (fixed set)
+ *
+ *   multi: any styles that are updated using `updateStylingMap` (dynamic set)
+ *
+ * Note that context is only used to collect style information. Only when `renderStyling`
+ * is called is when the styling payload will be rendered (or built as a key/value map).
+ *
+ * When the context is created, depending on what initial styling values are passed in, the
+ * context itself will be pre-filled with slots based on the initial style properties. Say
+ * for example we have a series of initial styles that look like so:
+ *
+ *   style="width:100px; height:200px;"
+ *   class="foo"
+ *
+ * Then the initial state of the context (once initialized) will look like so:
+ *
+ * ```
+ * context = [
+ *   element,
+ *   styleSanitizer | null,
+ *   [null, '100px', '200px', true],  // property names are not needed since they have already been
+ * written to DOM.
+ *
+ *   configMasterVal,
+ *   1, // this instructs how many `style` values there are so that class index values can be
+ * offsetted
+ *   'last class string applied',
+ *
+ *   // 6
+ *   'width',
+ *   pointers(1, 15);  // Point to static `width`: `100px` and multi `width`.
+ *   null,
+ *
+ *   // 9
+ *   'height',
+ *   pointers(2, 18); // Point to static `height`: `200px` and multi `height`.
+ *   null,
+ *
+ *   // 12
+ *   'foo',
+ *   pointers(1, 21);  // Point to static `foo`: `true` and multi `foo`.
+ *   null,
+ *
+ *   // 15
+ *   'width',
+ *   pointers(1, 6);  // Point to static `width`: `100px` and single `width`.
+ *   null,
+ *
+ *   // 18
+ *   'height',
+ *   pointers(2, 9);  // Point to static `height`: `200px` and single `height`.
+ *   null,
+ *
+ *   // 21
+ *   'foo',
+ *   pointers(3, 12);  // Point to static `foo`: `true` and single `foo`.
+ *   null,
+ * ]
+ *
+ * function pointers(staticIndex: number, dynamicIndex: number) {
+ *   // combine the two indices into a single word.
+ *   return (staticIndex << StylingFlags.BitCountSize) |
+ *     (dynamicIndex << (StylingIndex.BitCountSize + StylingFlags.BitCountSize));
+ * }
+ * ```
+ *
+ * The values are duplicated so that space is set aside for both multi ([style] and [class])
+ * and single ([style.prop] or [class.named]) values. The respective config values
+ * (configValA, configValB, etc...) are a combination of the StylingFlags with two index
+ * values: the `initialIndex` (which points to the index location of the style value in
+ * the initial styles array in slot 0) and the `dynamicIndex` (which points to the
+ * matching single/multi index position in the context array for the same prop).
+ *
+ * This means that every time `updateStyleProp` or `updateClassProp` are called then they
+ * must be called using an index value (not a property string) which references the index
+ * value of the initial style prop/class when the context was created. This also means that
+ * `updateStyleProp` or `updateClassProp` cannot be called with a new property (only
+ * `updateStylingMap` can include new CSS properties that will be added to the context).
+ */
+export interface StylingContext extends
+    Array<InitialStyles|number|string|boolean|LElementNode|StyleSanitizeFn|null> {
+  /**
+   * Location of element that is used as a target for this context.
+   */
+  [0]: LElementNode|null;
+
+  /**
+   * The style sanitizer that is used within this context
+   */
+  [1]: StyleSanitizeFn|null;
+
+  /**
+   * Location of initial data shared by all instances of this style.
+   */
+  [2]: InitialStyles;
+
+  /**
+   * A numeric value representing the configuration status (whether the context is dirty or not)
+   * mixed together (using bit shifting) with a index value which tells the starting index value
+   * of where the multi style entries begin.
+   */
+  [3]: number;
+
+  /**
+   * A numeric value representing the class index offset value. Whenever a single class is
+   * applied (using `elementClassProp`) it should have an styling index value that doesn't
+   * need to take into account any style values that exist in the context.
+   */
+  [4]: number;
+
+  /**
+   * The last CLASS STRING VALUE that was interpreted by elementStylingMap. This is cached
+   * So that the algorithm can exit early incase the string has not changed.
+   */
+  [5]: string|null;
+}
+
+/**
+ * The initial styles is populated whether or not there are any initial styles passed into
+ * the context during allocation. The 0th value must be null so that index values of `0` within
+ * the context flags can always point to a null value safely when nothing is set.
+ *
+ * All other entries in this array are of `string` value and correspond to the values that
+ * were extracted from the `style=""` attribute in the HTML code for the provided template.
+ */
+export interface InitialStyles extends Array<string|null|boolean> { [0]: null; }
+
+/**
+ * Used to set the context to be dirty or not both on the master flag (position 1)
+ * or for each single/multi property that exists in the context.
+ */
+export const enum StylingFlags {
+  // Implies no configurations
+  None = 0b000,
+  // Whether or not the entry or context itself is dirty
+  Dirty = 0b001,
+  // Whether or not this is a class-based assignment
+  Class = 0b010,
+  // Whether or not a sanitizer was applied to this property
+  Sanitize = 0b100,
+  // The max amount of bits used to represent these configuration values
+  BitCountSize = 3,
+  // There are only three bits here
+  BitMask = 0b111
+}
+
+/** Used as numeric pointer values to determine what cells to update in the `StylingContext` */
+export const enum StylingIndex {
+  // Position of where the initial styles are stored in the styling context
+  ElementPosition = 0,
+  // Position of where the style sanitizer is stored within the styling context
+  StyleSanitizerPosition = 1,
+  // Position of where the initial styles are stored in the styling context
+  InitialStylesPosition = 2,
+  // Index of location where the start of single properties are stored. (`updateStyleProp`)
+  MasterFlagPosition = 3,
+  // Index of location where the class index offset value is located
+  ClassOffsetPosition = 4,
+  // Position of where the last string-based CSS class value was stored
+  CachedCssClassString = 5,
+  // Location of single (prop) value entries are stored within the context
+  SingleStylesStartPosition = 6,
+  // Multi and single entries are stored in `StylingContext` as: Flag; PropertyName;  PropertyValue
+  FlagsOffset = 0,
+  PropertyOffset = 1,
+  ValueOffset = 2,
+  // Size of each multi or single entry (flag + prop + value)
+  Size = 3,
+  // Each flag has a binary digit length of this value
+  BitCountSize = 14,  // (32 - 3) / 2 = ~14
+  // The binary digit value as a mask
+  BitMask = 0b11111111111111  // 14 bits
+}
+
+/**
+ * Used clone a copy of a pre-computed template of a styling context.
+ *
+ * A pre-computed template is designed to be computed once for a given element
+ * (instructions.ts has logic for caching this).
+ */
+export function allocStylingContext(
+    lElement: LElementNode | null, templateStyleContext: StylingContext): StylingContext {
+  // each instance gets a copy
+  const context = templateStyleContext.slice() as any as StylingContext;
+  context[StylingIndex.ElementPosition] = lElement;
+  return context;
+}
+
+/**
+ * Creates a styling context template where styling information is stored.
+ * Any styles that are later referenced using `updateStyleProp` must be
+ * passed in within this function. Initial values for those styles are to
+ * be declared after all initial style properties are declared (this change in
+ * mode between declarations and initial styles is made possible using a special
+ * enum value found in `definition.ts`).
+ *
+ * @param initialStyleDeclarations a list of style declarations and initial style values
+ *    that are used later within the styling context.
+ *
+ *    -> ['width', 'height', SPECIAL_ENUM_VAL, 'width', '100px']
+ *       This implies that `width` and `height` will be later styled and that the `width`
+ *       property has an initial value of `100px`.
+ *
+ * @param initialClassDeclarations a list of class declarations and initial class values
+ *    that are used later within the styling context.
+ *
+ *    -> ['foo', 'bar', SPECIAL_ENUM_VAL, 'foo', true]
+ *       This implies that `foo` and `bar` will be later styled and that the `foo`
+ *       class will be applied to the element as an initial class since it's true
+ */
+export function createStylingContextTemplate(
+    initialClassDeclarations?: (string | boolean | InitialStylingFlags)[] | null,
+    initialStyleDeclarations?: (string | boolean | InitialStylingFlags)[] | null,
+    styleSanitizer?: StyleSanitizeFn | null): StylingContext {
+  const initialStylingValues: InitialStyles = [null];
+  const context: StylingContext = [null, styleSanitizer || null, initialStylingValues, 0, 0, null];
+
+  // we use two maps since a class name might collide with a CSS style prop
+  const stylesLookup: {[key: string]: number} = {};
+  const classesLookup: {[key: string]: number} = {};
+
+  let totalStyleDeclarations = 0;
+  if (initialStyleDeclarations) {
+    let hasPassedDeclarations = false;
+    for (let i = 0; i < initialStyleDeclarations.length; i++) {
+      const v = initialStyleDeclarations[i] as string | InitialStylingFlags;
+
+      // this flag value marks where the declarations end the initial values begin
+      if (v === InitialStylingFlags.VALUES_MODE) {
+        hasPassedDeclarations = true;
+      } else {
+        const prop = v as string;
+        if (hasPassedDeclarations) {
+          const value = initialStyleDeclarations[++i] as string;
+          initialStylingValues.push(value);
+          stylesLookup[prop] = initialStylingValues.length - 1;
+        } else {
+          totalStyleDeclarations++;
+          stylesLookup[prop] = 0;
+        }
+      }
+    }
+  }
+
+  // make where the class offsets begin
+  context[StylingIndex.ClassOffsetPosition] = totalStyleDeclarations;
+
+  if (initialClassDeclarations) {
+    let hasPassedDeclarations = false;
+    for (let i = 0; i < initialClassDeclarations.length; i++) {
+      const v = initialClassDeclarations[i] as string | boolean | InitialStylingFlags;
+      // this flag value marks where the declarations end the initial values begin
+      if (v === InitialStylingFlags.VALUES_MODE) {
+        hasPassedDeclarations = true;
+      } else {
+        const className = v as string;
+        if (hasPassedDeclarations) {
+          const value = initialClassDeclarations[++i] as boolean;
+          initialStylingValues.push(value);
+          classesLookup[className] = initialStylingValues.length - 1;
+        } else {
+          classesLookup[className] = 0;
+        }
+      }
+    }
+  }
+
+  const styleProps = Object.keys(stylesLookup);
+  const classNames = Object.keys(classesLookup);
+  const classNamesIndexStart = styleProps.length;
+  const totalProps = styleProps.length + classNames.length;
+
+  // *2 because we are filling for both single and multi style spaces
+  const maxLength = totalProps * StylingIndex.Size * 2 + StylingIndex.SingleStylesStartPosition;
+
+  // we need to fill the array from the start so that we can access
+  // both the multi and the single array positions in the same loop block
+  for (let i = StylingIndex.SingleStylesStartPosition; i < maxLength; i++) {
+    context.push(null);
+  }
+
+  const singleStart = StylingIndex.SingleStylesStartPosition;
+  const multiStart = totalProps * StylingIndex.Size + StylingIndex.SingleStylesStartPosition;
+
+  // fill single and multi-level styles
+  for (let i = 0; i < totalProps; i++) {
+    const isClassBased = i >= classNamesIndexStart;
+    const prop = isClassBased ? classNames[i - classNamesIndexStart] : styleProps[i];
+    const indexForInitial = isClassBased ? classesLookup[prop] : stylesLookup[prop];
+    const initialValue = initialStylingValues[indexForInitial];
+
+    const indexForMulti = i * StylingIndex.Size + multiStart;
+    const indexForSingle = i * StylingIndex.Size + singleStart;
+    const initialFlag = prepareInitialFlag(prop, isClassBased, styleSanitizer || null);
+
+    setFlag(context, indexForSingle, pointers(initialFlag, indexForInitial, indexForMulti));
+    setProp(context, indexForSingle, prop);
+    setValue(context, indexForSingle, null);
+
+    const flagForMulti =
+        initialFlag | (initialValue !== null ? StylingFlags.Dirty : StylingFlags.None);
+    setFlag(context, indexForMulti, pointers(flagForMulti, indexForInitial, indexForSingle));
+    setProp(context, indexForMulti, prop);
+    setValue(context, indexForMulti, null);
+  }
+
+  // there is no initial value flag for the master index since it doesn't
+  // reference an initial style value
+  setFlag(context, StylingIndex.MasterFlagPosition, pointers(0, 0, multiStart));
+  setContextDirty(context, initialStylingValues.length > 1);
+
+  return context;
+}
+
+const EMPTY_ARR: any[] = [];
+const EMPTY_OBJ: {[key: string]: any} = {};
+/**
+ * Sets and resolves all `multi` styling on an `StylingContext` so that they can be
+ * applied to the element once `renderStyling` is called.
+ *
+ * All missing styles/class (any values that are not provided in the new `styles`
+ * or `classes` params) will resolve to `null` within their respective positions
+ * in the context.
+ *
+ * @param context The styling context that will be updated with the
+ *    newly provided style values.
+ * @param classes The key/value map of CSS class names that will be used for the update.
+ * @param styles The key/value map of CSS styles that will be used for the update.
+ */
+export function updateStylingMap(
+    context: StylingContext, classes: {[key: string]: any} | string | null,
+    styles?: {[key: string]: any} | null): void {
+  let classNames: string[] = EMPTY_ARR;
+  let applyAllClasses = false;
+  let ignoreAllClassUpdates = false;
+
+  // each time a string-based value pops up then it shouldn't require a deep
+  // check of what's changed.
+  if (typeof classes == 'string') {
+    const cachedClassString = context[StylingIndex.CachedCssClassString] as string | null;
+    if (cachedClassString && cachedClassString === classes) {
+      ignoreAllClassUpdates = true;
+    } else {
+      context[StylingIndex.CachedCssClassString] = classes;
+      classNames = classes.split(/\s+/);
+      // this boolean is used to avoid having to create a key/value map of `true` values
+      // since a classname string implies that all those classes are added
+      applyAllClasses = true;
+    }
+  } else {
+    classNames = classes ? Object.keys(classes) : EMPTY_ARR;
+    context[StylingIndex.CachedCssClassString] = null;
+  }
+
+  classes = (classes || EMPTY_OBJ) as{[key: string]: any};
+
+  const styleProps = styles ? Object.keys(styles) : EMPTY_ARR;
+  styles = styles || EMPTY_OBJ;
+
+  const classesStartIndex = styleProps.length;
+  const multiStartIndex = getMultiStartIndex(context);
+
+  let dirty = false;
+  let ctxIndex = multiStartIndex;
+
+  let propIndex = 0;
+  const propLimit = styleProps.length + classNames.length;
+
+  // the main loop here will try and figure out how the shape of the provided
+  // styles differ with respect to the context. Later if the context/styles/classes
+  // are off-balance then they will be dealt in another loop after this one
+  while (ctxIndex < context.length && propIndex < propLimit) {
+    const isClassBased = propIndex >= classesStartIndex;
+
+    // when there is a cache-hit for a string-based class then we should
+    // avoid doing any work diffing any of the changes
+    if (!ignoreAllClassUpdates || !isClassBased) {
+      const adjustedPropIndex = isClassBased ? propIndex - classesStartIndex : propIndex;
+      const newProp: string =
+          isClassBased ? classNames[adjustedPropIndex] : styleProps[adjustedPropIndex];
+      const newValue: string|boolean =
+          isClassBased ? (applyAllClasses ? true : classes[newProp]) : styles[newProp];
+
+      const prop = getProp(context, ctxIndex);
+      if (prop === newProp) {
+        const value = getValue(context, ctxIndex);
+        const flag = getPointers(context, ctxIndex);
+        if (hasValueChanged(flag, value, newValue)) {
+          setValue(context, ctxIndex, newValue);
+
+          const initialValue = getInitialValue(context, flag);
+
+          // there is no point in setting this to dirty if the previously
+          // rendered value was being referenced by the initial style (or null)
+          if (initialValue !== newValue) {
+            setDirty(context, ctxIndex, true);
+            dirty = true;
+          }
+        }
+      } else {
+        const indexOfEntry = findEntryPositionByProp(context, newProp, ctxIndex);
+        if (indexOfEntry > 0) {
+          // it was found at a later point ... just swap the values
+          const valueToCompare = getValue(context, indexOfEntry);
+          const flagToCompare = getPointers(context, indexOfEntry);
+          swapMultiContextEntries(context, ctxIndex, indexOfEntry);
+          if (valueToCompare !== newValue) {
+            const initialValue = getInitialValue(context, flagToCompare);
+            setValue(context, ctxIndex, newValue);
+            if (initialValue !== newValue) {
+              setDirty(context, ctxIndex, true);
+              dirty = true;
+            }
+          }
+        } else {
+          // we only care to do this if the insertion is in the middle
+          const newFlag = prepareInitialFlag(newProp, isClassBased, getStyleSanitizer(context));
+          insertNewMultiProperty(context, ctxIndex, isClassBased, newProp, newFlag, newValue);
+          dirty = true;
+        }
+      }
+    }
+
+    ctxIndex += StylingIndex.Size;
+    propIndex++;
+  }
+
+  // this means that there are left-over values in the context that
+  // were not included in the provided styles/classes and in this
+  // case the  goal is to "remove" them from the context (by nullifying)
+  while (ctxIndex < context.length) {
+    const flag = getPointers(context, ctxIndex);
+    const isClassBased = (flag & StylingFlags.Class) === StylingFlags.Class;
+    if (ignoreAllClassUpdates && isClassBased) break;
+
+    const value = getValue(context, ctxIndex);
+    const doRemoveValue = valueExists(value, isClassBased);
+    if (doRemoveValue) {
+      setDirty(context, ctxIndex, true);
+      setValue(context, ctxIndex, null);
+      dirty = true;
+    }
+    ctxIndex += StylingIndex.Size;
+  }
+
+  // this means that there are left-over properties in the context that
+  // were not detected in the context during the loop above. In that
+  // case we want to add the new entries into the list
+  const sanitizer = getStyleSanitizer(context);
+  while (propIndex < propLimit) {
+    const isClassBased = propIndex >= classesStartIndex;
+    if (ignoreAllClassUpdates && isClassBased) break;
+
+    const adjustedPropIndex = isClassBased ? propIndex - classesStartIndex : propIndex;
+    const prop = isClassBased ? classNames[adjustedPropIndex] : styleProps[adjustedPropIndex];
+    const value: string|boolean =
+        isClassBased ? (applyAllClasses ? true : classes[prop]) : styles[prop];
+    const flag = prepareInitialFlag(prop, isClassBased, sanitizer) | StylingFlags.Dirty;
+    context.push(flag, prop, value);
+    propIndex++;
+    dirty = true;
+  }
+
+  if (dirty) {
+    setContextDirty(context, true);
+  }
+}
+
+/**
+ * Sets and resolves a single styling property/value on the provided `StylingContext` so
+ * that they can be applied to the element once `renderStyling` is called.
+ *
+ * Note that prop-level styling values are considered higher priority than any styling that
+ * has been applied using `updateStylingMap`, therefore, when styling values are rendered
+ * then any styles/classes that have been applied using this function will be considered first
+ * (then multi values second and then initial values as a backup).
+ *
+ * @param context The styling context that will be updated with the
+ *    newly provided style value.
+ * @param index The index of the property which is being updated.
+ * @param value The CSS style value that will be assigned
+ */
+export function updateStyleProp(
+    context: StylingContext, index: number, value: string | boolean | null): void {
+  const singleIndex = StylingIndex.SingleStylesStartPosition + index * StylingIndex.Size;
+  const currValue = getValue(context, singleIndex);
+  const currFlag = getPointers(context, singleIndex);
+
+  // didn't change ... nothing to make a note of
+  if (hasValueChanged(currFlag, currValue, value)) {
+    // the value will always get updated (even if the dirty flag is skipped)
+    setValue(context, singleIndex, value);
+    const indexForMulti = getMultiOrSingleIndex(currFlag);
+
+    // if the value is the same in the multi-area then there's no point in re-assembling
+    const valueForMulti = getValue(context, indexForMulti);
+    if (!valueForMulti || valueForMulti !== value) {
+      let multiDirty = false;
+      let singleDirty = true;
+
+      const isClassBased = (currFlag & StylingFlags.Class) === StylingFlags.Class;
+
+      // only when the value is set to `null` should the multi-value get flagged
+      if (!valueExists(value, isClassBased) && valueExists(valueForMulti, isClassBased)) {
+        multiDirty = true;
+        singleDirty = false;
+      }
+
+      setDirty(context, indexForMulti, multiDirty);
+      setDirty(context, singleIndex, singleDirty);
+      setContextDirty(context, true);
+    }
+  }
+}
+
+/**
+ * This method will toggle the referenced CSS class (by the provided index)
+ * within the given context.
+ *
+ * @param context The styling context that will be updated with the
+ *    newly provided class value.
+ * @param index The index of the CSS class which is being updated.
+ * @param addOrRemove Whether or not to add or remove the CSS class
+ */
+export function updateClassProp(
+    context: StylingContext, index: number, addOrRemove: boolean): void {
+  const adjustedIndex = index + context[StylingIndex.ClassOffsetPosition];
+  updateStyleProp(context, adjustedIndex, addOrRemove);
+}
+
+/**
+ * Renders all queued styling using a renderer onto the given element.
+ *
+ * This function works by rendering any styles (that have been applied
+ * using `updateStylingMap`) and any classes (that have been applied using
+ * `updateStyleProp`) onto the provided element using the provided renderer.
+ * Just before the styles/classes are rendered a final key/value style map
+ * will be assembled (if `styleStore` or `classStore` are provided).
+ *
+ * @param lElement the element that the styles will be rendered on
+ * @param context The styling context that will be used to determine
+ *      what styles will be rendered
+ * @param renderer the renderer that will be used to apply the styling
+ * @param styleStore if provided, the updated style values will be applied
+ *    to this key/value map instead of being renderered via the renderer.
+ * @param classStore if provided, the updated class values will be applied
+ *    to this key/value map instead of being renderered via the renderer.
+ */
+export function renderStyling(
+    context: StylingContext, renderer: Renderer3, styleStore?: {[key: string]: any},
+    classStore?: {[key: string]: boolean}) {
+  if (isContextDirty(context)) {
+    const native = context[StylingIndex.ElementPosition] !.native;
+    const multiStartIndex = getMultiStartIndex(context);
+    const styleSanitizer = getStyleSanitizer(context);
+    for (let i = StylingIndex.SingleStylesStartPosition; i < context.length;
+         i += StylingIndex.Size) {
+      // there is no point in rendering styles that have not changed on screen
+      if (isDirty(context, i)) {
+        const prop = getProp(context, i);
+        const value = getValue(context, i);
+        const flag = getPointers(context, i);
+        const isClassBased = flag & StylingFlags.Class ? true : false;
+        const isInSingleRegion = i < multiStartIndex;
+
+        let valueToApply: string|boolean|null = value;
+
+        // VALUE DEFER CASE 1: Use a multi value instead of a null single value
+        // this check implies that a single value was removed and we
+        // should now defer to a multi value and use that (if set).
+        if (isInSingleRegion && !valueExists(valueToApply, isClassBased)) {
+          // single values ALWAYS have a reference to a multi index
+          const multiIndex = getMultiOrSingleIndex(flag);
+          valueToApply = getValue(context, multiIndex);
+        }
+
+        // VALUE DEFER CASE 2: Use the initial value if all else fails (is falsy)
+        // the initial value will always be a string or null,
+        // therefore we can safely adopt it incase there's nothing else
+        // note that this should always be a falsy check since `false` is used
+        // for both class and style comparisons (styles can't be false and false
+        // classes are turned off and should therefore defer to their initial values)
+        if (!valueExists(valueToApply, isClassBased)) {
+          valueToApply = getInitialValue(context, flag);
+        }
+
+        if (isClassBased) {
+          setClass(native, prop, valueToApply ? true : false, renderer, classStore);
+        } else {
+          const sanitizer = (flag & StylingFlags.Sanitize) ? styleSanitizer : null;
+          setStyle(native, prop, valueToApply as string | null, renderer, sanitizer, styleStore);
+        }
+        setDirty(context, i, false);
+      }
+    }
+
+    setContextDirty(context, false);
+  }
+}
+
+/**
+ * This function renders a given CSS prop/value entry using the
+ * provided renderer. If a `store` value is provided then
+ * that will be used a render context instead of the provided
+ * renderer.
+ *
+ * @param native the DOM Element
+ * @param prop the CSS style property that will be rendered
+ * @param value the CSS style value that will be rendered
+ * @param renderer
+ * @param store an optional key/value map that will be used as a context to render styles on
+ */
+function setStyle(
+    native: any, prop: string, value: string | null, renderer: Renderer3,
+    sanitizer: StyleSanitizeFn | null, store?: {[key: string]: any}) {
+  value = sanitizer && value ? sanitizer(prop, value) : value;
+  if (store) {
+    store[prop] = value;
+  } else if (value) {
+    ngDevMode && ngDevMode.rendererSetStyle++;
+    isProceduralRenderer(renderer) ?
+        renderer.setStyle(native, prop, value, RendererStyleFlags3.DashCase) :
+        native['style'].setProperty(prop, value);
+  } else {
+    ngDevMode && ngDevMode.rendererRemoveStyle++;
+    isProceduralRenderer(renderer) ?
+        renderer.removeStyle(native, prop, RendererStyleFlags3.DashCase) :
+        native['style'].removeProperty(prop);
+  }
+}
+
+/**
+ * This function renders a given CSS class value using the provided
+ * renderer (by adding or removing it from the provided element).
+ * If a `store` value is provided then that will be used a render
+ * context instead of the provided renderer.
+ *
+ * @param native the DOM Element
+ * @param prop the CSS style property that will be rendered
+ * @param value the CSS style value that will be rendered
+ * @param renderer
+ * @param store an optional key/value map that will be used as a context to render styles on
+ */
+function setClass(
+    native: any, className: string, add: boolean, renderer: Renderer3,
+    store?: {[key: string]: boolean}) {
+  if (store) {
+    store[className] = add;
+  } else if (add) {
+    ngDevMode && ngDevMode.rendererAddClass++;
+    isProceduralRenderer(renderer) ? renderer.addClass(native, className) :
+                                     native['classList'].add(className);
+  } else {
+    ngDevMode && ngDevMode.rendererRemoveClass++;
+    isProceduralRenderer(renderer) ? renderer.removeClass(native, className) :
+                                     native['classList'].remove(className);
+  }
+}
+
+function setDirty(context: StylingContext, index: number, isDirtyYes: boolean) {
+  const adjustedIndex =
+      index >= StylingIndex.SingleStylesStartPosition ? (index + StylingIndex.FlagsOffset) : index;
+  if (isDirtyYes) {
+    (context[adjustedIndex] as number) |= StylingFlags.Dirty;
+  } else {
+    (context[adjustedIndex] as number) &= ~StylingFlags.Dirty;
+  }
+}
+
+function isDirty(context: StylingContext, index: number): boolean {
+  const adjustedIndex =
+      index >= StylingIndex.SingleStylesStartPosition ? (index + StylingIndex.FlagsOffset) : index;
+  return ((context[adjustedIndex] as number) & StylingFlags.Dirty) == StylingFlags.Dirty;
+}
+
+function isClassBased(context: StylingContext, index: number): boolean {
+  const adjustedIndex =
+      index >= StylingIndex.SingleStylesStartPosition ? (index + StylingIndex.FlagsOffset) : index;
+  return ((context[adjustedIndex] as number) & StylingFlags.Class) == StylingFlags.Class;
+}
+
+function isSanitizable(context: StylingContext, index: number): boolean {
+  const adjustedIndex =
+      index >= StylingIndex.SingleStylesStartPosition ? (index + StylingIndex.FlagsOffset) : index;
+  return ((context[adjustedIndex] as number) & StylingFlags.Sanitize) == StylingFlags.Sanitize;
+}
+
+function pointers(configFlag: number, staticIndex: number, dynamicIndex: number) {
+  return (configFlag & StylingFlags.BitMask) | (staticIndex << StylingFlags.BitCountSize) |
+      (dynamicIndex << (StylingIndex.BitCountSize + StylingFlags.BitCountSize));
+}
+
+function getInitialValue(context: StylingContext, flag: number): string|null {
+  const index = getInitialIndex(flag);
+  return context[StylingIndex.InitialStylesPosition][index] as null | string;
+}
+
+function getInitialIndex(flag: number): number {
+  return (flag >> StylingFlags.BitCountSize) & StylingIndex.BitMask;
+}
+
+function getMultiOrSingleIndex(flag: number): number {
+  const index =
+      (flag >> (StylingIndex.BitCountSize + StylingFlags.BitCountSize)) & StylingIndex.BitMask;
+  return index >= StylingIndex.SingleStylesStartPosition ? index : -1;
+}
+
+function getMultiStartIndex(context: StylingContext): number {
+  return getMultiOrSingleIndex(context[StylingIndex.MasterFlagPosition]) as number;
+}
+
+function getStyleSanitizer(context: StylingContext): StyleSanitizeFn|null {
+  return context[StylingIndex.StyleSanitizerPosition];
+}
+
+function setProp(context: StylingContext, index: number, prop: string) {
+  context[index + StylingIndex.PropertyOffset] = prop;
+}
+
+function setValue(context: StylingContext, index: number, value: string | null | boolean) {
+  context[index + StylingIndex.ValueOffset] = value;
+}
+
+function setFlag(context: StylingContext, index: number, flag: number) {
+  const adjustedIndex =
+      index === StylingIndex.MasterFlagPosition ? index : (index + StylingIndex.FlagsOffset);
+  context[adjustedIndex] = flag;
+}
+
+function getPointers(context: StylingContext, index: number): number {
+  const adjustedIndex =
+      index === StylingIndex.MasterFlagPosition ? index : (index + StylingIndex.FlagsOffset);
+  return context[adjustedIndex] as number;
+}
+
+function getValue(context: StylingContext, index: number): string|boolean|null {
+  return context[index + StylingIndex.ValueOffset] as string | boolean | null;
+}
+
+function getProp(context: StylingContext, index: number): string {
+  return context[index + StylingIndex.PropertyOffset] as string;
+}
+
+export function isContextDirty(context: StylingContext): boolean {
+  return isDirty(context, StylingIndex.MasterFlagPosition);
+}
+
+export function setContextDirty(context: StylingContext, isDirtyYes: boolean): void {
+  setDirty(context, StylingIndex.MasterFlagPosition, isDirtyYes);
+}
+
+function findEntryPositionByProp(
+    context: StylingContext, prop: string, startIndex?: number): number {
+  for (let i = (startIndex || 0) + StylingIndex.PropertyOffset; i < context.length;
+       i += StylingIndex.Size) {
+    const thisProp = context[i];
+    if (thisProp == prop) {
+      return i - StylingIndex.PropertyOffset;
+    }
+  }
+  return -1;
+}
+
+function swapMultiContextEntries(context: StylingContext, indexA: number, indexB: number) {
+  const tmpValue = getValue(context, indexA);
+  const tmpProp = getProp(context, indexA);
+  const tmpFlag = getPointers(context, indexA);
+
+  let flagA = tmpFlag;
+  let flagB = getPointers(context, indexB);
+
+  const singleIndexA = getMultiOrSingleIndex(flagA);
+  if (singleIndexA >= 0) {
+    const _flag = getPointers(context, singleIndexA);
+    const _initial = getInitialIndex(_flag);
+    setFlag(context, singleIndexA, pointers(_flag, _initial, indexB));
+  }
+
+  const singleIndexB = getMultiOrSingleIndex(flagB);
+  if (singleIndexB >= 0) {
+    const _flag = getPointers(context, singleIndexB);
+    const _initial = getInitialIndex(_flag);
+    setFlag(context, singleIndexB, pointers(_flag, _initial, indexA));
+  }
+
+  setValue(context, indexA, getValue(context, indexB));
+  setProp(context, indexA, getProp(context, indexB));
+  setFlag(context, indexA, getPointers(context, indexB));
+
+  setValue(context, indexB, tmpValue);
+  setProp(context, indexB, tmpProp);
+  setFlag(context, indexB, tmpFlag);
+}
+
+function updateSinglePointerValues(context: StylingContext, indexStartPosition: number) {
+  for (let i = indexStartPosition; i < context.length; i += StylingIndex.Size) {
+    const multiFlag = getPointers(context, i);
+    const singleIndex = getMultiOrSingleIndex(multiFlag);
+    if (singleIndex > 0) {
+      const singleFlag = getPointers(context, singleIndex);
+      const initialIndexForSingle = getInitialIndex(singleFlag);
+      const flagValue = (isDirty(context, singleIndex) ? StylingFlags.Dirty : StylingFlags.None) |
+          (isClassBased(context, singleIndex) ? StylingFlags.Class : StylingFlags.None) |
+          (isSanitizable(context, singleIndex) ? StylingFlags.Sanitize : StylingFlags.None);
+      const updatedFlag = pointers(flagValue, initialIndexForSingle, i);
+      setFlag(context, singleIndex, updatedFlag);
+    }
+  }
+}
+
+function insertNewMultiProperty(
+    context: StylingContext, index: number, classBased: boolean, name: string, flag: number,
+    value: string | boolean): void {
+  const doShift = index < context.length;
+
+  // prop does not exist in the list, add it in
+  context.splice(
+      index, 0, flag | StylingFlags.Dirty | (classBased ? StylingFlags.Class : StylingFlags.None),
+      name, value);
+
+  if (doShift) {
+    // because the value was inserted midway into the array then we
+    // need to update all the shifted multi values' single value
+    // pointers to point to the newly shifted location
+    updateSinglePointerValues(context, index + StylingIndex.Size);
+  }
+}
+
+function valueExists(value: string | null | boolean, isClassBased?: boolean) {
+  if (isClassBased) {
+    return value ? true : false;
+  }
+  return value !== null;
+}
+
+function prepareInitialFlag(
+    name: string, isClassBased: boolean, sanitizer?: StyleSanitizeFn | null) {
+  if (isClassBased) {
+    return StylingFlags.Class;
+  } else if (sanitizer && sanitizer(name)) {
+    return StylingFlags.Sanitize;
+  }
+  return StylingFlags.None;
+}
+
+function hasValueChanged(
+    flag: number, a: string | boolean | null, b: string | boolean | null): boolean {
+  const isClassBased = flag & StylingFlags.Class;
+  const hasValues = a && b;
+  const usesSanitizer = flag & StylingFlags.Sanitize;
+  // the toString() comparison ensures that a value is checked
+  // ... otherwise (during sanitization bypassing) the === comparsion
+  // would fail since a new String() instance is created
+  if (!isClassBased && hasValues && usesSanitizer) {
+    // we know for sure we're dealing with strings at this point
+    return (a as string).toString() !== (b as string).toString();
+  }
+
+  // everything else is safe to check with a normal equality check
+  return a !== b;
+}
diff --git a/packages/core/src/render3/util.ts b/packages/core/src/render3/util.ts
new file mode 100644
index 000000000000..784cc69dc41c
--- /dev/null
+++ b/packages/core/src/render3/util.ts
@@ -0,0 +1,91 @@
+/**
+ * @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 {devModeEqual} from '../change_detection/change_detection';
+import {assertLessThan} from './assert';
+import {LElementNode} from './interfaces/node';
+import {HEADER_OFFSET, LViewData} from './interfaces/view';
+
+/**
+ * Returns wether the values are different from a change detection stand point.
+ *
+ * Constraints are relaxed in checkNoChanges mode. See `devModeEqual` for details.
+ */
+export function isDifferent(a: any, b: any, checkNoChangesMode: boolean): boolean {
+  if (ngDevMode && checkNoChangesMode) {
+    return !devModeEqual(a, b);
+  }
+  // NaN is the only value that is not equal to itself so the first
+  // test checks if both a and b are not NaN
+  return !(a !== a && b !== b) && a !== b;
+}
+
+export function stringify(value: any): string {
+  if (typeof value == 'function') return value.name || value;
+  if (typeof value == 'string') return value;
+  if (value == null) return '';
+  return '' + value;
+}
+
+/**
+ *  Function that throws a "not implemented" error so it's clear certain
+ *  behaviors/methods aren't yet ready.
+ *
+ * @returns Not implemented error
+ */
+export function notImplemented(): Error {
+  return new Error('NotImplemented');
+}
+
+/**
+ * Flattens an array in non-recursive way. Input arrays are not modified.
+ */
+export function flatten(list: any[]): any[] {
+  const result: any[] = [];
+  let i = 0;
+
+  while (i < list.length) {
+    const item = list[i];
+    if (Array.isArray(item)) {
+      if (item.length > 0) {
+        list = item.concat(list.slice(i + 1));
+        i = 0;
+      } else {
+        i++;
+      }
+    } else {
+      result.push(item);
+      i++;
+    }
+  }
+
+  return result;
+}
+
+/** Retrieves a value from any `LViewData`. */
+export function loadInternal<T>(index: number, arr: LViewData): T {
+  ngDevMode && assertDataInRangeInternal(index + HEADER_OFFSET, arr);
+  return arr[index + HEADER_OFFSET];
+}
+
+export function assertDataInRangeInternal(index: number, arr: any[]) {
+  assertLessThan(index, arr ? arr.length : 0, 'index expected to be a valid data index');
+}
+
+/** Retrieves an element value from the provided `viewData`.
+  *
+  * Elements that are read may be wrapped in a style context,
+  * therefore reading the value may involve unwrapping that.
+  */
+export function loadElementInternal(index: number, arr: LViewData): LElementNode {
+  const value = loadInternal<LElementNode>(index, arr);
+  return readElementValue(value);
+}
+
+export function readElementValue(value: LElementNode | any[]): LElementNode {
+  return (Array.isArray(value) ? (value as any as any[])[0] : value) as LElementNode;
+}
diff --git a/packages/core/src/render3/view_ref.ts b/packages/core/src/render3/view_ref.ts
new file mode 100644
index 000000000000..8b57d6a5465c
--- /dev/null
+++ b/packages/core/src/render3/view_ref.ts
@@ -0,0 +1,264 @@
+/**
+ * @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 {ApplicationRef} from '../application_ref';
+import {ChangeDetectorRef as viewEngine_ChangeDetectorRef} from '../change_detection/change_detector_ref';
+import {ViewContainerRef as viewEngine_ViewContainerRef} from '../linker/view_container_ref';
+import {EmbeddedViewRef as viewEngine_EmbeddedViewRef, InternalViewRef as viewEngine_InternalViewRef} from '../linker/view_ref';
+
+import {checkNoChanges, checkNoChangesInRootView, detectChanges, detectChangesInRootView, getRendererFactory, markViewDirty, storeCleanupFn, viewAttached} from './instructions';
+import {LViewNode} from './interfaces/node';
+import {FLAGS, LViewData, LViewFlags} from './interfaces/view';
+import {destroyLView} from './node_manipulation';
+
+
+// Needed due to tsickle downleveling where multiple `implements` with classes creates
+// multiple @extends in Closure annotations, which is illegal. This workaround fixes
+// the multiple @extends by making the annotation @implements instead
+export interface viewEngine_ChangeDetectorRef_interface extends viewEngine_ChangeDetectorRef {}
+
+export class ViewRef<T> implements viewEngine_EmbeddedViewRef<T>, viewEngine_InternalViewRef,
+    viewEngine_ChangeDetectorRef_interface {
+  private _appRef: ApplicationRef|null = null;
+  private _viewContainerRef: viewEngine_ViewContainerRef|null = null;
+
+  /**
+   * @internal
+   */
+  _lViewNode: LViewNode|null = null;
+
+  context: T;
+  // TODO(issue/24571): remove '!'.
+  rootNodes !: any[];
+
+  constructor(protected _view: LViewData, context: T|null) { this.context = context !; }
+
+  /** @internal */
+  _setComponentContext(view: LViewData, context: T) {
+    this._view = view;
+    this.context = context;
+  }
+
+  get destroyed(): boolean {
+    return (this._view[FLAGS] & LViewFlags.Destroyed) === LViewFlags.Destroyed;
+  }
+
+  destroy(): void {
+    if (this._viewContainerRef && viewAttached(this._view)) {
+      this._viewContainerRef.detach(this._viewContainerRef.indexOf(this));
+      this._viewContainerRef = null;
+    }
+    destroyLView(this._view);
+  }
+
+  onDestroy(callback: Function) { storeCleanupFn(this._view, callback); }
+
+  /**
+   * Marks a view and all of its ancestors dirty.
+   *
+   * It also triggers change detection by calling `scheduleTick` internally, which coalesces
+   * multiple `markForCheck` calls to into one change detection run.
+   *
+   * This can be used to ensure an {@link ChangeDetectionStrategy#OnPush OnPush} component is
+   * checked when it needs to be re-rendered but the two normal triggers haven't marked it
+   * dirty (i.e. inputs haven't changed and events haven't fired in the view).
+   *
+   * <!-- TODO: Add a link to a chapter on OnPush components -->
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * ```typescript
+   * @Component({
+   *   selector: 'my-app',
+   *   template: `Number of ticks: {{numberOfTicks}}`
+   *   changeDetection: ChangeDetectionStrategy.OnPush,
+   * })
+   * class AppComponent {
+   *   numberOfTicks = 0;
+   *
+   *   constructor(private ref: ChangeDetectorRef) {
+   *     setInterval(() => {
+   *       this.numberOfTicks++;
+   *       // the following is required, otherwise the view will not be updated
+   *       this.ref.markForCheck();
+   *     }, 1000);
+   *   }
+   * }
+   * ```
+   */
+  markForCheck(): void { markViewDirty(this._view); }
+
+  /**
+   * Detaches the view from the change detection tree.
+   *
+   * Detached views will not be checked during change detection runs until they are
+   * re-attached, even if they are dirty. `detach` can be used in combination with
+   * {@link ChangeDetectorRef#detectChanges detectChanges} to implement local change
+   * detection checks.
+   *
+   * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
+   * <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * The following example defines a component with a large list of readonly data.
+   * Imagine the data changes constantly, many times per second. For performance reasons,
+   * we want to check and update the list every five seconds. We can do that by detaching
+   * the component's change detector and doing a local check every five seconds.
+   *
+   * ```typescript
+   * class DataProvider {
+   *   // in a real application the returned data will be different every time
+   *   get data() {
+   *     return [1,2,3,4,5];
+   *   }
+   * }
+   *
+   * @Component({
+   *   selector: 'giant-list',
+   *   template: `
+   *     <li *ngFor="let d of dataProvider.data">Data {{d}}</li>
+   *   `,
+   * })
+   * class GiantList {
+   *   constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {
+   *     ref.detach();
+   *     setInterval(() => {
+   *       this.ref.detectChanges();
+   *     }, 5000);
+   *   }
+   * }
+   *
+   * @Component({
+   *   selector: 'app',
+   *   providers: [DataProvider],
+   *   template: `
+   *     <giant-list><giant-list>
+   *   `,
+   * })
+   * class App {
+   * }
+   * ```
+   */
+  detach(): void { this._view[FLAGS] &= ~LViewFlags.Attached; }
+
+  /**
+   * Re-attaches a view to the change detection tree.
+   *
+   * This can be used to re-attach views that were previously detached from the tree
+   * using {@link ChangeDetectorRef#detach detach}. Views are attached to the tree by default.
+   *
+   * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * The following example creates a component displaying `live` data. The component will detach
+   * its change detector from the main change detector tree when the component's live property
+   * is set to false.
+   *
+   * ```typescript
+   * class DataProvider {
+   *   data = 1;
+   *
+   *   constructor() {
+   *     setInterval(() => {
+   *       this.data = this.data * 2;
+   *     }, 500);
+   *   }
+   * }
+   *
+   * @Component({
+   *   selector: 'live-data',
+   *   inputs: ['live'],
+   *   template: 'Data: {{dataProvider.data}}'
+   * })
+   * class LiveData {
+   *   constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {}
+   *
+   *   set live(value) {
+   *     if (value) {
+   *       this.ref.reattach();
+   *     } else {
+   *       this.ref.detach();
+   *     }
+   *   }
+   * }
+   *
+   * @Component({
+   *   selector: 'my-app',
+   *   providers: [DataProvider],
+   *   template: `
+   *     Live Update: <input type="checkbox" [(ngModel)]="live">
+   *     <live-data [live]="live"><live-data>
+   *   `,
+   * })
+   * class AppComponent {
+   *   live = true;
+   * }
+   * ```
+   */
+  reattach(): void { this._view[FLAGS] |= LViewFlags.Attached; }
+
+  /**
+   * Checks the view and its children.
+   *
+   * This can also be used in combination with {@link ChangeDetectorRef#detach detach} to implement
+   * local change detection checks.
+   *
+   * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
+   * <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
+   *
+   * @usageNotes
+   * ### Example
+   *
+   * The following example defines a component with a large list of readonly data.
+   * Imagine, the data changes constantly, many times per second. For performance reasons,
+   * we want to check and update the list every five seconds.
+   *
+   * We can do that by detaching the component's change detector and doing a local change detection
+   * check every five seconds.
+   *
+   * See {@link ChangeDetectorRef#detach detach} for more information.
+   */
+  detectChanges(): void {
+    const rendererFactory = getRendererFactory();
+    if (rendererFactory.begin) {
+      rendererFactory.begin();
+    }
+    detectChanges(this.context);
+    if (rendererFactory.end) {
+      rendererFactory.end();
+    }
+  }
+
+  /**
+   * Checks the change detector and its children, and throws if any changes are detected.
+   *
+   * This is used in development mode to verify that running change detection doesn't
+   * introduce other changes.
+   */
+  checkNoChanges(): void { checkNoChanges(this.context); }
+
+  attachToViewContainerRef(vcRef: viewEngine_ViewContainerRef) { this._viewContainerRef = vcRef; }
+
+  detachFromAppRef() { this._appRef = null; }
+
+  attachToAppRef(appRef: ApplicationRef) { this._appRef = appRef; }
+}
+
+/** @internal */
+export class RootViewRef<T> extends ViewRef<T> {
+  constructor(protected _view: LViewData) { super(_view, null); }
+
+  detectChanges(): void { detectChangesInRootView(this._view); }
+
+  checkNoChanges(): void { checkNoChangesInRootView(this._view); }
+}
diff --git a/packages/core/src/sanitization/bypass.ts b/packages/core/src/sanitization/bypass.ts
new file mode 100644
index 000000000000..a8b812e225f7
--- /dev/null
+++ b/packages/core/src/sanitization/bypass.ts
@@ -0,0 +1,143 @@
+/**
+ * @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 BRAND = '__SANITIZER_TRUSTED_BRAND__';
+
+export const enum BypassType {
+  Url = 'Url',
+  Html = 'Html',
+  ResourceUrl = 'ResourceUrl',
+  Script = 'Script',
+  Style = 'Style',
+}
+
+/**
+ * A branded trusted string used with sanitization.
+ *
+ * See: {@link TrustedHtmlString}, {@link TrustedResourceUrlString}, {@link TrustedScriptString},
+ * {@link TrustedStyleString}, {@link TrustedUrlString}
+ */
+export interface TrustedString extends String { [BRAND]: BypassType; }
+
+/**
+ * A branded trusted string used with sanitization of `html` strings.
+ *
+ * See: {@link bypassSanitizationTrustHtml} and {@link htmlSanitizer}.
+ */
+export interface TrustedHtmlString extends TrustedString { [BRAND]: BypassType.Html; }
+
+/**
+ * A branded trusted string used with sanitization of `style` strings.
+ *
+ * See: {@link bypassSanitizationTrustStyle} and {@link styleSanitizer}.
+ */
+export interface TrustedStyleString extends TrustedString { [BRAND]: BypassType.Style; }
+
+/**
+ * A branded trusted string used with sanitization of `url` strings.
+ *
+ * See: {@link bypassSanitizationTrustScript} and {@link scriptSanitizer}.
+ */
+export interface TrustedScriptString extends TrustedString { [BRAND]: BypassType.Script; }
+
+/**
+ * A branded trusted string used with sanitization of `url` strings.
+ *
+ * See: {@link bypassSanitizationTrustUrl} and {@link urlSanitizer}.
+ */
+export interface TrustedUrlString extends TrustedString { [BRAND]: BypassType.Url; }
+
+/**
+ * A branded trusted string used with sanitization of `resourceUrl` strings.
+ *
+ * See: {@link bypassSanitizationTrustResourceUrl} and {@link resourceUrlSanitizer}.
+ */
+export interface TrustedResourceUrlString extends TrustedString { [BRAND]: BypassType.ResourceUrl; }
+
+export function allowSanitizationBypass(value: any, type: BypassType): boolean {
+  return (value instanceof String && (value as TrustedStyleString)[BRAND] === type) ? true : false;
+}
+
+/**
+ * Mark `html` string as trusted.
+ *
+ * This function wraps the trusted string in `String` and brands it in a way which makes it
+ * recognizable to {@link htmlSanitizer} to be trusted implicitly.
+ *
+ * @param trustedHtml `html` string which needs to be implicitly trusted.
+ * @returns a `html` `String` which has been branded to be implicitly trusted.
+ */
+export function bypassSanitizationTrustHtml(trustedHtml: string): TrustedHtmlString {
+  return bypassSanitizationTrustString(trustedHtml, BypassType.Html);
+}
+/**
+ * Mark `style` string as trusted.
+ *
+ * This function wraps the trusted string in `String` and brands it in a way which makes it
+ * recognizable to {@link styleSanitizer} to be trusted implicitly.
+ *
+ * @param trustedStyle `style` string which needs to be implicitly trusted.
+ * @returns a `style` `String` which has been branded to be implicitly trusted.
+ */
+export function bypassSanitizationTrustStyle(trustedStyle: string): TrustedStyleString {
+  return bypassSanitizationTrustString(trustedStyle, BypassType.Style);
+}
+/**
+ * Mark `script` string as trusted.
+ *
+ * This function wraps the trusted string in `String` and brands it in a way which makes it
+ * recognizable to {@link scriptSanitizer} to be trusted implicitly.
+ *
+ * @param trustedScript `script` string which needs to be implicitly trusted.
+ * @returns a `script` `String` which has been branded to be implicitly trusted.
+ */
+export function bypassSanitizationTrustScript(trustedScript: string): TrustedScriptString {
+  return bypassSanitizationTrustString(trustedScript, BypassType.Script);
+}
+/**
+ * Mark `url` string as trusted.
+ *
+ * This function wraps the trusted string in `String` and brands it in a way which makes it
+ * recognizable to {@link urlSanitizer} to be trusted implicitly.
+ *
+ * @param trustedUrl `url` string which needs to be implicitly trusted.
+ * @returns a `url` `String` which has been branded to be implicitly trusted.
+ */
+export function bypassSanitizationTrustUrl(trustedUrl: string): TrustedUrlString {
+  return bypassSanitizationTrustString(trustedUrl, BypassType.Url);
+}
+/**
+ * Mark `url` string as trusted.
+ *
+ * This function wraps the trusted string in `String` and brands it in a way which makes it
+ * recognizable to {@link resourceUrlSanitizer} to be trusted implicitly.
+ *
+ * @param trustedResourceUrl `url` string which needs to be implicitly trusted.
+ * @returns a `url` `String` which has been branded to be implicitly trusted.
+ */
+export function bypassSanitizationTrustResourceUrl(trustedResourceUrl: string):
+    TrustedResourceUrlString {
+  return bypassSanitizationTrustString(trustedResourceUrl, BypassType.ResourceUrl);
+}
+
+
+function bypassSanitizationTrustString(
+    trustedString: string, mode: BypassType.Html): TrustedHtmlString;
+function bypassSanitizationTrustString(
+    trustedString: string, mode: BypassType.Style): TrustedStyleString;
+function bypassSanitizationTrustString(
+    trustedString: string, mode: BypassType.Script): TrustedScriptString;
+function bypassSanitizationTrustString(
+    trustedString: string, mode: BypassType.Url): TrustedUrlString;
+function bypassSanitizationTrustString(
+    trustedString: string, mode: BypassType.ResourceUrl): TrustedResourceUrlString;
+function bypassSanitizationTrustString(trustedString: string, mode: BypassType): TrustedString {
+  const trusted = new String(trustedString) as TrustedString;
+  trusted[BRAND] = mode;
+  return trusted;
+}
diff --git a/packages/core/src/sanitization/html_sanitizer.ts b/packages/core/src/sanitization/html_sanitizer.ts
new file mode 100644
index 000000000000..cfa7e5803560
--- /dev/null
+++ b/packages/core/src/sanitization/html_sanitizer.ts
@@ -0,0 +1,265 @@
+/**
+ * @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 {isDevMode} from '../application_ref';
+import {InertBodyHelper} from './inert_body';
+import {_sanitizeUrl, sanitizeSrcset} from './url_sanitizer';
+
+function tagSet(tags: string): {[k: string]: boolean} {
+  const res: {[k: string]: boolean} = {};
+  for (const t of tags.split(',')) res[t] = true;
+  return res;
+}
+
+function merge(...sets: {[k: string]: boolean}[]): {[k: string]: boolean} {
+  const res: {[k: string]: boolean} = {};
+  for (const s of sets) {
+    for (const v in s) {
+      if (s.hasOwnProperty(v)) res[v] = true;
+    }
+  }
+  return res;
+}
+
+// Good source of info about elements and attributes
+// http://dev.w3.org/html5/spec/Overview.html#semantics
+// http://simon.html5.org/html-elements
+
+// Safe Void Elements - HTML5
+// http://dev.w3.org/html5/spec/Overview.html#void-elements
+const VOID_ELEMENTS = tagSet('area,br,col,hr,img,wbr');
+
+// Elements that you can, intentionally, leave open (and which close themselves)
+// http://dev.w3.org/html5/spec/Overview.html#optional-tags
+const OPTIONAL_END_TAG_BLOCK_ELEMENTS = tagSet('colgroup,dd,dt,li,p,tbody,td,tfoot,th,thead,tr');
+const OPTIONAL_END_TAG_INLINE_ELEMENTS = tagSet('rp,rt');
+const OPTIONAL_END_TAG_ELEMENTS =
+    merge(OPTIONAL_END_TAG_INLINE_ELEMENTS, OPTIONAL_END_TAG_BLOCK_ELEMENTS);
+
+// Safe Block Elements - HTML5
+const BLOCK_ELEMENTS = merge(
+    OPTIONAL_END_TAG_BLOCK_ELEMENTS,
+    tagSet(
+        'address,article,' +
+        'aside,blockquote,caption,center,del,details,dialog,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5,' +
+        'h6,header,hgroup,hr,ins,main,map,menu,nav,ol,pre,section,summary,table,ul'));
+
+// Inline Elements - HTML5
+const INLINE_ELEMENTS = merge(
+    OPTIONAL_END_TAG_INLINE_ELEMENTS,
+    tagSet(
+        'a,abbr,acronym,audio,b,' +
+        'bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,picture,q,ruby,rp,rt,s,' +
+        'samp,small,source,span,strike,strong,sub,sup,time,track,tt,u,var,video'));
+
+const VALID_ELEMENTS =
+    merge(VOID_ELEMENTS, BLOCK_ELEMENTS, INLINE_ELEMENTS, OPTIONAL_END_TAG_ELEMENTS);
+
+// Attributes that have href and hence need to be sanitized
+const URI_ATTRS = tagSet('background,cite,href,itemtype,longdesc,poster,src,xlink:href');
+
+// Attributes that have special href set hence need to be sanitized
+const SRCSET_ATTRS = tagSet('srcset');
+
+const HTML_ATTRS = tagSet(
+    'abbr,accesskey,align,alt,autoplay,axis,bgcolor,border,cellpadding,cellspacing,class,clear,color,cols,colspan,' +
+    'compact,controls,coords,datetime,default,dir,download,face,headers,height,hidden,hreflang,hspace,' +
+    'ismap,itemscope,itemprop,kind,label,lang,language,loop,media,muted,nohref,nowrap,open,preload,rel,rev,role,rows,rowspan,rules,' +
+    'scope,scrolling,shape,size,sizes,span,srclang,start,summary,tabindex,target,title,translate,type,usemap,' +
+    'valign,value,vspace,width');
+
+// 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.
+
+// NB: Sanitization does not allow <form> elements or other active elements (<button> etc). Those
+// can be sanitized, but they increase security surface area without a legitimate use case, so they
+// are left out here.
+
+const VALID_ATTRS = merge(URI_ATTRS, SRCSET_ATTRS, HTML_ATTRS);
+
+/**
+ * SanitizingHtmlSerializer serializes a DOM fragment, stripping out any unsafe elements and unsafe
+ * attributes.
+ */
+class SanitizingHtmlSerializer {
+  // Explicitly track if something was stripped, to avoid accidentally warning of sanitization just
+  // because characters were re-encoded.
+  public sanitizedSomething = false;
+  private buf: string[] = [];
+
+  sanitizeChildren(el: Element): string {
+    // 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 !;
+    while (current) {
+      if (current.nodeType === Node.ELEMENT_NODE) {
+        this.startElement(current as Element);
+      } else if (current.nodeType === Node.TEXT_NODE) {
+        this.chars(current.nodeValue !);
+      } else {
+        // Strip non-element, non-text nodes.
+        this.sanitizedSomething = true;
+      }
+      if (current.firstChild) {
+        current = current.firstChild !;
+        continue;
+      }
+      while (current) {
+        // Leaving the element. Walk up and to the right, closing tags as we go.
+        if (current.nodeType === Node.ELEMENT_NODE) {
+          this.endElement(current as Element);
+        }
+
+        let next = this.checkClobberedElement(current, current.nextSibling !);
+
+        if (next) {
+          current = next;
+          break;
+        }
+
+        current = this.checkClobberedElement(current, current.parentNode !);
+      }
+    }
+    return this.buf.join('');
+  }
+
+  private startElement(element: Element) {
+    const tagName = element.nodeName.toLowerCase();
+    if (!VALID_ELEMENTS.hasOwnProperty(tagName)) {
+      this.sanitizedSomething = true;
+      return;
+    }
+    this.buf.push('<');
+    this.buf.push(tagName);
+    const elAttrs = element.attributes;
+    for (let i = 0; i < elAttrs.length; i++) {
+      const elAttr = elAttrs.item(i);
+      const attrName = elAttr !.name;
+      const lower = attrName.toLowerCase();
+      if (!VALID_ATTRS.hasOwnProperty(lower)) {
+        this.sanitizedSomething = true;
+        continue;
+      }
+      let value = elAttr !.value;
+      // TODO(martinprobst): Special case image URIs for data:image/...
+      if (URI_ATTRS[lower]) value = _sanitizeUrl(value);
+      if (SRCSET_ATTRS[lower]) value = sanitizeSrcset(value);
+      this.buf.push(' ', attrName, '="', encodeEntities(value), '"');
+    }
+    this.buf.push('>');
+  }
+
+  private endElement(current: Element) {
+    const tagName = current.nodeName.toLowerCase();
+    if (VALID_ELEMENTS.hasOwnProperty(tagName) && !VOID_ELEMENTS.hasOwnProperty(tagName)) {
+      this.buf.push('</');
+      this.buf.push(tagName);
+      this.buf.push('>');
+    }
+  }
+
+  private chars(chars: string) { this.buf.push(encodeEntities(chars)); }
+
+  checkClobberedElement(node: Node, nextNode: Node): Node {
+    if (nextNode &&
+        (node.compareDocumentPosition(nextNode) &
+         Node.DOCUMENT_POSITION_CONTAINED_BY) === Node.DOCUMENT_POSITION_CONTAINED_BY) {
+      throw new Error(
+          `Failed to sanitize html because the element is clobbered: ${(node as Element).outerHTML}`);
+    }
+    return nextNode;
+  }
+}
+
+// Regular Expressions for parsing tags and attributes
+const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+// ! to ~ is the ASCII range.
+const NON_ALPHANUMERIC_REGEXP = /([^\#-~ |!])/g;
+
+/**
+ * Escapes all potentially dangerous characters, so that the
+ * resulting string can be safely inserted into attribute or
+ * element text.
+ * @param value
+ */
+function encodeEntities(value: string) {
+  return value.replace(/&/g, '&amp;')
+      .replace(
+          SURROGATE_PAIR_REGEXP,
+          function(match: string) {
+            const hi = match.charCodeAt(0);
+            const low = match.charCodeAt(1);
+            return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
+          })
+      .replace(
+          NON_ALPHANUMERIC_REGEXP,
+          function(match: string) { return '&#' + match.charCodeAt(0) + ';'; })
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+}
+
+let inertBodyHelper: InertBodyHelper;
+
+/**
+ * Sanitizes the given unsafe, untrusted HTML fragment, and returns HTML text that is safe to add to
+ * the DOM in a browser environment.
+ */
+export function _sanitizeHtml(defaultDoc: any, unsafeHtmlInput: string): string {
+  let inertBodyElement: HTMLElement|null = null;
+  try {
+    inertBodyHelper = inertBodyHelper || new InertBodyHelper(defaultDoc);
+    // Make sure unsafeHtml is actually a string (TypeScript types are not enforced at runtime).
+    let unsafeHtml = unsafeHtmlInput ? String(unsafeHtmlInput) : '';
+    inertBodyElement = inertBodyHelper.getInertBodyElement(unsafeHtml);
+
+    // mXSS protection. Repeatedly parse the document to make sure it stabilizes, so that a browser
+    // trying to auto-correct incorrect HTML cannot cause formerly inert HTML to become dangerous.
+    let mXSSAttempts = 5;
+    let parsedHtml = unsafeHtml;
+
+    do {
+      if (mXSSAttempts === 0) {
+        throw new Error('Failed to sanitize html because the input is unstable');
+      }
+      mXSSAttempts--;
+
+      unsafeHtml = parsedHtml;
+      parsedHtml = inertBodyElement !.innerHTML;
+      inertBodyElement = inertBodyHelper.getInertBodyElement(unsafeHtml);
+    } while (unsafeHtml !== parsedHtml);
+
+    const sanitizer = new SanitizingHtmlSerializer();
+    const safeHtml = sanitizer.sanitizeChildren(
+        getTemplateContent(inertBodyElement !) as Element || inertBodyElement);
+    if (isDevMode() && sanitizer.sanitizedSomething) {
+      console.warn(
+          'WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).');
+    }
+
+    return safeHtml;
+  } finally {
+    // In case anything goes wrong, clear out inertElement to reset the entire DOM structure.
+    if (inertBodyElement) {
+      const parent = getTemplateContent(inertBodyElement) || inertBodyElement;
+      while (parent.firstChild) {
+        parent.removeChild(parent.firstChild);
+      }
+    }
+  }
+}
+
+function getTemplateContent(el: Node): Node|null {
+  return 'content' in (el as any /** Microsoft/TypeScript#21517 */) && isTemplateElement(el) ?
+      el.content :
+      null;
+}
+function isTemplateElement(el: Node): el is HTMLTemplateElement {
+  return el.nodeType === Node.ELEMENT_NODE && el.nodeName === 'TEMPLATE';
+}
diff --git a/packages/core/src/sanitization/inert_body.ts b/packages/core/src/sanitization/inert_body.ts
new file mode 100644
index 000000000000..fb90f71a54d0
--- /dev/null
+++ b/packages/core/src/sanitization/inert_body.ts
@@ -0,0 +1,175 @@
+/**
+ * @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 helper class is used to get hold of an inert tree of DOM elements containing dirty HTML
+ * that needs sanitizing.
+ * Depending upon browser support we must use one of three strategies for doing this.
+ * Support: Safari 10.x -> XHR strategy
+ * Support: Firefox -> DomParser strategy
+ * Default: InertDocument strategy
+ */
+export class InertBodyHelper {
+  private inertBodyElement: HTMLElement;
+  private inertDocument: Document;
+
+  constructor(private defaultDoc: Document) {
+    this.inertDocument = this.defaultDoc.implementation.createHTMLDocument('sanitization-inert');
+    this.inertBodyElement = this.inertDocument.body;
+
+    if (this.inertBodyElement == null) {
+      // usually there should be only one body element in the document, but IE doesn't have any, so
+      // we need to create one.
+      const inertHtml = this.inertDocument.createElement('html');
+      this.inertDocument.appendChild(inertHtml);
+      this.inertBodyElement = this.inertDocument.createElement('body');
+      inertHtml.appendChild(this.inertBodyElement);
+    }
+
+    this.inertBodyElement.innerHTML = '<svg><g onload="this.parentNode.remove()"></g></svg>';
+    if (this.inertBodyElement.querySelector && !this.inertBodyElement.querySelector('svg')) {
+      // We just hit the Safari 10.1 bug - which allows JS to run inside the SVG G element
+      // so use the XHR strategy.
+      this.getInertBodyElement = this.getInertBodyElement_XHR;
+      return;
+    }
+
+    this.inertBodyElement.innerHTML =
+        '<svg><p><style><img src="</style><img src=x onerror=alert(1)//">';
+    if (this.inertBodyElement.querySelector && this.inertBodyElement.querySelector('svg img')) {
+      // We just hit the Firefox bug - which prevents the inner img JS from being sanitized
+      // so use the DOMParser strategy, if it is available.
+      // If the DOMParser is not available then we are not in Firefox (Server/WebWorker?) so we
+      // fall through to the default strategy below.
+      if (isDOMParserAvailable()) {
+        this.getInertBodyElement = this.getInertBodyElement_DOMParser;
+        return;
+      }
+    }
+
+    // None of the bugs were hit so it is safe for us to use the default InertDocument strategy
+    this.getInertBodyElement = this.getInertBodyElement_InertDocument;
+  }
+
+  /**
+   * Get an inert DOM element containing DOM created from the dirty HTML string provided.
+   * The implementation of this is determined in the constructor, when the class is instantiated.
+   */
+  getInertBodyElement: (html: string) => HTMLElement | null;
+
+  /**
+   * Use XHR to create and fill an inert body element (on Safari 10.1)
+   * See
+   * https://github.com/cure53/DOMPurify/blob/a992d3a75031cb8bb032e5ea8399ba972bdf9a65/src/purify.js#L439-L449
+   */
+  private getInertBodyElement_XHR(html: string) {
+    // We add these extra elements to ensure that the rest of the content is parsed as expected
+    // e.g. leading whitespace is maintained and tags like `<meta>` do not get hoisted to the
+    // `<head>` tag.
+    html = '<body><remove></remove>' + html + '</body>';
+    try {
+      html = encodeURI(html);
+    } catch (e) {
+      return null;
+    }
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = 'document';
+    xhr.open('GET', 'data:text/html;charset=utf-8,' + html, false);
+    xhr.send(null);
+    const body: HTMLBodyElement = xhr.response.body;
+    body.removeChild(body.firstChild !);
+    return body;
+  }
+
+  /**
+   * Use DOMParser to create and fill an inert body element (on Firefox)
+   * See https://github.com/cure53/DOMPurify/releases/tag/0.6.7
+   *
+   */
+  private getInertBodyElement_DOMParser(html: string) {
+    // We add these extra elements to ensure that the rest of the content is parsed as expected
+    // e.g. leading whitespace is maintained and tags like `<meta>` do not get hoisted to the
+    // `<head>` tag.
+    html = '<body><remove></remove>' + html + '</body>';
+    try {
+      const body = new (window as any)
+                       .DOMParser()
+                       .parseFromString(html, 'text/html')
+                       .body as HTMLBodyElement;
+      body.removeChild(body.firstChild !);
+      return body;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  /**
+   * Use an HTML5 `template` element, if supported, or an inert body element created via
+   * `createHtmlDocument` to create and fill an inert DOM element.
+   * This is the default sane strategy to use if the browser does not require one of the specialised
+   * strategies above.
+   */
+  private getInertBodyElement_InertDocument(html: string) {
+    // Prefer using <template> element if supported.
+    const templateEl = this.inertDocument.createElement('template');
+    if ('content' in templateEl) {
+      templateEl.innerHTML = html;
+      return templateEl;
+    }
+
+    this.inertBodyElement.innerHTML = html;
+
+    // Support: IE 9-11 only
+    // strip custom-namespaced attributes on IE<=11
+    if ((this.defaultDoc as any).documentMode) {
+      this.stripCustomNsAttrs(this.inertBodyElement);
+    }
+
+    return this.inertBodyElement;
+  }
+
+  /**
+   * When IE9-11 comes across an unknown namespaced attribute e.g. 'xlink:foo' it adds 'xmlns:ns1'
+   * attribute to declare ns1 namespace and prefixes the attribute with 'ns1' (e.g.
+   * 'ns1:xlink:foo').
+   *
+   * This is undesirable since we don't want to allow any of these custom attributes. This method
+   * strips them all.
+   */
+  private stripCustomNsAttrs(el: Element) {
+    const elAttrs = el.attributes;
+    // loop backwards so that we can support removals.
+    for (let i = elAttrs.length - 1; 0 < i; i--) {
+      const attrib = elAttrs.item(i);
+      const attrName = attrib !.name;
+      if (attrName === 'xmlns:ns1' || attrName.indexOf('ns1:') === 0) {
+        el.removeAttribute(attrName);
+      }
+    }
+    let childNode = el.firstChild;
+    while (childNode) {
+      if (childNode.nodeType === Node.ELEMENT_NODE) this.stripCustomNsAttrs(childNode as Element);
+      childNode = childNode.nextSibling;
+    }
+  }
+}
+
+/**
+ * We need to determine whether the DOMParser exists in the global context.
+ * The try-catch is because, on some browsers, trying to access this property
+ * on window can actually throw an error.
+ *
+ * @suppress {uselessCode}
+ */
+function isDOMParserAvailable() {
+  try {
+    return !!(window as any).DOMParser;
+  } catch (e) {
+    return false;
+  }
+}
diff --git a/packages/core/src/sanitization/readme.md b/packages/core/src/sanitization/readme.md
new file mode 100644
index 000000000000..7d15bd3f3691
--- /dev/null
+++ b/packages/core/src/sanitization/readme.md
@@ -0,0 +1,10 @@
+# Sanitization
+
+This folder contains sanitization related code.
+
+
+## History
+
+It used to be that sanitization related code used to be in `@angular/platform-browser` since it is platform related. While this is true, in practice the compiler schema is permanently tied to the DOM and hence the fact that sanitizer could in theory be replaced is not used in practice.
+
+In order to better support tree shaking we need to be able to refer to the sanitization functions from the Ivy code. For this reason the code has been moved into the `@angular/core`.
\ No newline at end of file
diff --git a/packages/core/src/sanitization/sanitization.ts b/packages/core/src/sanitization/sanitization.ts
new file mode 100644
index 000000000000..c5fac7314aab
--- /dev/null
+++ b/packages/core/src/sanitization/sanitization.ts
@@ -0,0 +1,145 @@
+/**
+ * @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 {getCurrentSanitizer} from '../render3/instructions';
+import {stringify} from '../render3/util';
+
+import {BypassType, allowSanitizationBypass} from './bypass';
+import {_sanitizeHtml as _sanitizeHtml} from './html_sanitizer';
+import {SecurityContext} from './security';
+import {StyleSanitizeFn, _sanitizeStyle as _sanitizeStyle} from './style_sanitizer';
+import {_sanitizeUrl as _sanitizeUrl} from './url_sanitizer';
+
+
+
+/**
+ * An `html` sanitizer which converts untrusted `html` **string** into trusted string by removing
+ * dangerous content.
+ *
+ * This method parses the `html` and locates potentially dangerous content (such as urls and
+ * javascript) and removes it.
+ *
+ * It is possible to mark a string as trusted by calling {@link bypassSanitizationTrustHtml}.
+ *
+ * @param unsafeHtml untrusted `html`, typically from the user.
+ * @returns `html` string which is safe to display to user, because all of the dangerous javascript
+ * and urls have been removed.
+ */
+export function sanitizeHtml(unsafeHtml: any): string {
+  const s = getCurrentSanitizer();
+  if (s) {
+    return s.sanitize(SecurityContext.HTML, unsafeHtml) || '';
+  }
+  if (allowSanitizationBypass(unsafeHtml, BypassType.Html)) {
+    return unsafeHtml.toString();
+  }
+  return _sanitizeHtml(document, stringify(unsafeHtml));
+}
+
+/**
+ * A `style` sanitizer which converts untrusted `style` **string** into trusted string by removing
+ * dangerous content.
+ *
+ * This method parses the `style` and locates potentially dangerous content (such as urls and
+ * javascript) and removes it.
+ *
+ * It is possible to mark a string as trusted by calling {@link bypassSanitizationTrustStyle}.
+ *
+ * @param unsafeStyle untrusted `style`, typically from the user.
+ * @returns `style` string which is safe to bind to the `style` properties, because all of the
+ * dangerous javascript and urls have been removed.
+ */
+export function sanitizeStyle(unsafeStyle: any): string {
+  const s = getCurrentSanitizer();
+  if (s) {
+    return s.sanitize(SecurityContext.STYLE, unsafeStyle) || '';
+  }
+  if (allowSanitizationBypass(unsafeStyle, BypassType.Style)) {
+    return unsafeStyle.toString();
+  }
+  return _sanitizeStyle(stringify(unsafeStyle));
+}
+
+/**
+ * A `url` sanitizer which converts untrusted `url` **string** into trusted string by removing
+ * dangerous
+ * content.
+ *
+ * This method parses the `url` and locates potentially dangerous content (such as javascript) and
+ * removes it.
+ *
+ * It is possible to mark a string as trusted by calling {@link bypassSanitizationTrustUrl}.
+ *
+ * @param unsafeUrl untrusted `url`, typically from the user.
+ * @returns `url` string which is safe to bind to the `src` properties such as `<img src>`, because
+ * all of the dangerous javascript has been removed.
+ */
+export function sanitizeUrl(unsafeUrl: any): string {
+  const s = getCurrentSanitizer();
+  if (s) {
+    return s.sanitize(SecurityContext.URL, unsafeUrl) || '';
+  }
+  if (allowSanitizationBypass(unsafeUrl, BypassType.Url)) {
+    return unsafeUrl.toString();
+  }
+  return _sanitizeUrl(stringify(unsafeUrl));
+}
+
+/**
+ * A `url` sanitizer which only lets trusted `url`s through.
+ *
+ * This passes only `url`s marked trusted by calling {@link bypassSanitizationTrustResourceUrl}.
+ *
+ * @param unsafeResourceUrl untrusted `url`, typically from the user.
+ * @returns `url` string which is safe to bind to the `src` properties such as `<img src>`, because
+ * only trusted `url`s have been allowed to pass.
+ */
+export function sanitizeResourceUrl(unsafeResourceUrl: any): string {
+  const s = getCurrentSanitizer();
+  if (s) {
+    return s.sanitize(SecurityContext.RESOURCE_URL, unsafeResourceUrl) || '';
+  }
+  if (allowSanitizationBypass(unsafeResourceUrl, BypassType.ResourceUrl)) {
+    return unsafeResourceUrl.toString();
+  }
+  throw new Error('unsafe value used in a resource URL context (see http://g.co/ng/security#xss)');
+}
+
+/**
+ * A `script` sanitizer which only lets trusted javascript through.
+ *
+ * This passes only `script`s marked trusted by calling {@link bypassSanitizationTrustScript}.
+ *
+ * @param unsafeScript untrusted `script`, typically from the user.
+ * @returns `url` string which is safe to bind to the `<script>` element such as `<img src>`,
+ * because only trusted `scripts`s have been allowed to pass.
+ */
+export function sanitizeScript(unsafeScript: any): string {
+  const s = getCurrentSanitizer();
+  if (s) {
+    return s.sanitize(SecurityContext.SCRIPT, unsafeScript) || '';
+  }
+  if (allowSanitizationBypass(unsafeScript, BypassType.Script)) {
+    return unsafeScript.toString();
+  }
+  throw new Error('unsafe value used in a script context');
+}
+
+/**
+ * The default style sanitizer will handle sanitization for style properties by
+ * sanitizing any CSS property that can include a `url` value (usually image-based properties)
+ */
+export const defaultStyleSanitizer = (function(prop: string, value?: string): string | boolean {
+  if (value === undefined) {
+    return prop === 'background-image' || prop === 'background' || prop === 'border-image' ||
+        prop === 'filter' || prop === 'filter' || prop === 'list-style' ||
+        prop === 'list-style-image';
+  }
+
+  return sanitizeStyle(value);
+} as StyleSanitizeFn);
diff --git a/packages/core/src/sanitization/security.ts b/packages/core/src/sanitization/security.ts
new file mode 100644
index 000000000000..bef465345b08
--- /dev/null
+++ b/packages/core/src/sanitization/security.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
+ */
+
+/**
+ * A SecurityContext marks a location that has dangerous security implications, e.g. a DOM property
+ * like `innerHTML` that could cause Cross Site Scripting (XSS) security bugs when improperly
+ * handled.
+ *
+ * See DomSanitizer for more details on security in Angular applications.
+ *
+ *
+ */
+export enum SecurityContext {
+  NONE = 0,
+  HTML = 1,
+  STYLE = 2,
+  SCRIPT = 3,
+  URL = 4,
+  RESOURCE_URL = 5,
+}
+
+/**
+ * Sanitizer is used by the views to sanitize potentially dangerous values.
+ *
+ *
+ */
+export abstract class Sanitizer {
+  abstract sanitize(context: SecurityContext, value: {}|string|null): string|null;
+}
diff --git a/packages/core/src/sanitization/style_sanitizer.ts b/packages/core/src/sanitization/style_sanitizer.ts
new file mode 100644
index 000000000000..88a03e8e9822
--- /dev/null
+++ b/packages/core/src/sanitization/style_sanitizer.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 {isDevMode} from '../application_ref';
+import {_sanitizeUrl} from './url_sanitizer';
+
+
+/**
+ * Regular expression for safe style values.
+ *
+ * Quotes (" and ') are allowed, but a check must be done elsewhere to ensure they're balanced.
+ *
+ * ',' allows multiple values to be assigned to the same property (e.g. background-attachment or
+ * font-family) and hence could allow multiple values to get injected, but that should pose no risk
+ * of XSS.
+ *
+ * The function expression checks only for XSS safety, not for CSS validity.
+ *
+ * This regular expression was taken from the Closure sanitization library, and augmented for
+ * transformation values.
+ */
+const VALUES = '[-,."\'%_!# a-zA-Z0-9]+';
+const TRANSFORMATION_FNS = '(?:matrix|translate|scale|rotate|skew|perspective)(?:X|Y|3d)?';
+const COLOR_FNS = '(?:rgb|hsl)a?';
+const GRADIENTS = '(?:repeating-)?(?:linear|radial)-gradient';
+const CSS3_FNS = '(?:calc|attr)';
+const FN_ARGS = '\\([-0-9.%, #a-zA-Z]+\\)';
+const SAFE_STYLE_VALUE = new RegExp(
+    `^(${VALUES}|` +
+        `(?:${TRANSFORMATION_FNS}|${COLOR_FNS}|${GRADIENTS}|${CSS3_FNS})` +
+        `${FN_ARGS})$`,
+    'g');
+
+/**
+ * Matches a `url(...)` value with an arbitrary argument as long as it does
+ * not contain parentheses.
+ *
+ * The URL value still needs to be sanitized separately.
+ *
+ * `url(...)` values are a very common use case, e.g. for `background-image`. With carefully crafted
+ * CSS style rules, it is possible to construct an information leak with `url` values in CSS, e.g.
+ * by observing whether scroll bars are displayed, or character ranges used by a font face
+ * definition.
+ *
+ * Angular only allows binding CSS values (as opposed to entire CSS rules), so it is unlikely that
+ * binding a URL value without further cooperation from the page will cause an information leak, and
+ * if so, it is just a leak, not a full blown XSS vulnerability.
+ *
+ * Given the common use case, low likelihood of attack vector, and low impact of an attack, this
+ * code is permissive and allows URLs that sanitize otherwise.
+ */
+const URL_RE = /^url\(([^)]+)\)$/;
+
+/**
+ * Checks that quotes (" and ') are properly balanced inside a string. Assumes
+ * that neither escape (\) nor any other character that could result in
+ * breaking out of a string parsing context are allowed;
+ * see http://www.w3.org/TR/css3-syntax/#string-token-diagram.
+ *
+ * This code was taken from the Closure sanitization library.
+ */
+function hasBalancedQuotes(value: string) {
+  let outsideSingle = true;
+  let outsideDouble = true;
+  for (let i = 0; i < value.length; i++) {
+    const c = value.charAt(i);
+    if (c === '\'' && outsideDouble) {
+      outsideSingle = !outsideSingle;
+    } else if (c === '"' && outsideSingle) {
+      outsideDouble = !outsideDouble;
+    }
+  }
+  return outsideSingle && outsideDouble;
+}
+
+/**
+ * Sanitizes the given untrusted CSS style property value (i.e. not an entire object, just a single
+ * value) and returns a value that is safe to use in a browser environment.
+ */
+export function _sanitizeStyle(value: string): string {
+  value = String(value).trim();  // Make sure it's actually a string.
+  if (!value) return '';
+
+  // Single url(...) values are supported, but only for URLs that sanitize cleanly. See above for
+  // reasoning behind this.
+  const urlMatch = value.match(URL_RE);
+  if ((urlMatch && _sanitizeUrl(urlMatch[1]) === urlMatch[1]) ||
+      value.match(SAFE_STYLE_VALUE) && hasBalancedQuotes(value)) {
+    return value;  // Safe style values.
+  }
+
+  if (isDevMode()) {
+    console.warn(
+        `WARNING: sanitizing unsafe style value ${value} (see http://g.co/ng/security#xss).`);
+  }
+
+  return 'unsafe';
+}
+
+
+/**
+ * Used to intercept and sanitize style values before they are written to the renderer.
+ *
+ * This function is designed to be called in two modes. When a value is not provided
+ * then the function will return a boolean whether a property will be sanitized later.
+ * If a value is provided then the sanitized version of that will be returned.
+ */
+export interface StyleSanitizeFn {
+  /** This mode is designed to instruct whether the property will be used for sanitization
+   * at a later point */
+  (prop: string): boolean;
+  /** This mode is designed to sanitize the provided value */
+  (prop: string, value: string): string;
+}
diff --git a/packages/core/src/sanitization/url_sanitizer.ts b/packages/core/src/sanitization/url_sanitizer.ts
new file mode 100644
index 000000000000..6fe90560167d
--- /dev/null
+++ b/packages/core/src/sanitization/url_sanitizer.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 {isDevMode} from '../application_ref';
+
+/**
+ * A pattern that recognizes a commonly useful subset of URLs that are safe.
+ *
+ * This regular expression matches a subset of URLs that will not cause script
+ * execution if used in URL context within a HTML document. Specifically, this
+ * regular expression matches if (comment from here on and regex copied from
+ * Soy's EscapingConventions):
+ * (1) Either a protocol in a whitelist (http, https, mailto or ftp).
+ * (2) or no protocol.  A protocol must be followed by a colon. The below
+ *     allows that by allowing colons only after one of the characters [/?#].
+ *     A colon after a hash (#) must be in the fragment.
+ *     Otherwise, a colon after a (?) must be in a query.
+ *     Otherwise, a colon after a single solidus (/) must be in a path.
+ *     Otherwise, a colon after a double solidus (//) must be in the authority
+ *     (before port).
+ *
+ * The pattern disallows &, used in HTML entity declarations before
+ * one of the characters in [/?#]. This disallows HTML entities used in the
+ * protocol name, which should never happen, e.g. "h&#116;tp" for "http".
+ * It also disallows HTML entities in the first path part of a relative path,
+ * e.g. "foo&lt;bar/baz".  Our existing escaping functions should not produce
+ * that. More importantly, it disallows masking of a colon,
+ * e.g. "javascript&#58;...".
+ *
+ * This regular expression was taken from the Closure sanitization library.
+ */
+const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file):|[^&:/?#]*(?:[/?#]|$))/gi;
+
+/* A pattern that matches safe srcset values */
+const SAFE_SRCSET_PATTERN = /^(?:(?:https?|file):|[^&:/?#]*(?:[/?#]|$))/gi;
+
+/** A pattern that matches safe data URLs. Only matches image, video and audio types. */
+const DATA_URL_PATTERN =
+    /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[a-z0-9+\/]+=*$/i;
+
+export function _sanitizeUrl(url: string): string {
+  url = String(url);
+  if (url.match(SAFE_URL_PATTERN) || url.match(DATA_URL_PATTERN)) return url;
+
+  if (isDevMode()) {
+    console.warn(`WARNING: sanitizing unsafe URL value ${url} (see http://g.co/ng/security#xss)`);
+  }
+
+  return 'unsafe:' + url;
+}
+
+export function sanitizeSrcset(srcset: string): string {
+  srcset = String(srcset);
+  return srcset.split(',').map((srcset) => _sanitizeUrl(srcset.trim())).join(', ');
+}
diff --git a/packages/core/src/testability/testability.externs.js b/packages/core/src/testability/testability.externs.js
new file mode 100644
index 000000000000..1954a3fcbb42
--- /dev/null
+++ b/packages/core/src/testability/testability.externs.js
@@ -0,0 +1,25 @@
+/** @externs */
+
+/** @record @struct */
+function PublicTestability() {}
+
+/**
+ * @return {?}
+ */
+PublicTestability.prototype.isStable = function() {};
+
+/**
+ * @param {?} callback
+ * @param {?} timeout
+ * @param {?} updateCallback
+ * @return {?}
+ */
+PublicTestability.prototype.whenStable = function(callback, timeout, updateCallback) {};
+
+/**
+ * @param {?} using
+ * @param {?} provider
+ * @param {?} exactMatch
+ * @return {?}
+ */
+PublicTestability.prototype.findProviders = function(using, provider, exactMatch) {};
diff --git a/packages/core/src/testability/testability.ts b/packages/core/src/testability/testability.ts
new file mode 100644
index 000000000000..b92cd8af4f7c
--- /dev/null
+++ b/packages/core/src/testability/testability.ts
@@ -0,0 +1,311 @@
+/**
+ * @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 '../di';
+import {scheduleMicroTask} from '../util';
+import {NgZone} from '../zone/ng_zone';
+
+/**
+ * Testability API.
+ * `declare` keyword causes tsickle to generate externs, so these methods are
+ * not renamed by Closure Compiler.
+ * @experimental
+ */
+export declare interface PublicTestability {
+  isStable(): boolean;
+  whenStable(callback: Function, timeout?: number, updateCallback?: Function): void;
+  findProviders(using: any, provider: string, exactMatch: boolean): any[];
+}
+
+// Angular internal, not intended for public API.
+export interface PendingMacrotask {
+  source: string;
+  creationLocation: Error;
+  runCount?: number;
+  data: TaskData;
+}
+
+export interface TaskData {
+  target?: XMLHttpRequest;
+  delay?: number;
+  isPeriodic?: boolean;
+}
+
+// Angular internal, not intended for public API.
+export type DoneCallback = (didWork: boolean, tasks?: PendingMacrotask[]) => void;
+export type UpdateCallback = (tasks: PendingMacrotask[]) => boolean;
+
+interface WaitCallback {
+  // Needs to be 'any' - setTimeout returns a number according to ES6, but
+  // on NodeJS it returns a Timer.
+  timeoutId: any;
+  doneCb: DoneCallback;
+  updateCb?: UpdateCallback;
+}
+
+/**
+ * The Testability service provides testing hooks that can be accessed from
+ * the browser and by services such as Protractor. Each bootstrapped Angular
+ * application on the page will have an instance of Testability.
+ * @experimental
+ */
+@Injectable()
+export class Testability implements PublicTestability {
+  private _pendingCount: number = 0;
+  private _isZoneStable: boolean = true;
+  /**
+   * Whether any work was done since the last 'whenStable' callback. This is
+   * useful to detect if this could have potentially destabilized another
+   * component while it is stabilizing.
+   * @internal
+   */
+  private _didWork: boolean = false;
+  private _callbacks: WaitCallback[] = [];
+
+  private taskTrackingZone: any;
+
+  constructor(private _ngZone: NgZone) {
+    this._watchAngularEvents();
+    _ngZone.run(() => { this.taskTrackingZone = Zone.current.get('TaskTrackingZone'); });
+  }
+
+  private _watchAngularEvents(): void {
+    this._ngZone.onUnstable.subscribe({
+      next: () => {
+        this._didWork = true;
+        this._isZoneStable = false;
+      }
+    });
+
+    this._ngZone.runOutsideAngular(() => {
+      this._ngZone.onStable.subscribe({
+        next: () => {
+          NgZone.assertNotInAngularZone();
+          scheduleMicroTask(() => {
+            this._isZoneStable = true;
+            this._runCallbacksIfReady();
+          });
+        }
+      });
+    });
+  }
+
+  /**
+   * Increases the number of pending request
+   * @deprecated pending requests are now tracked with zones.
+   */
+  increasePendingRequestCount(): number {
+    this._pendingCount += 1;
+    this._didWork = true;
+    return this._pendingCount;
+  }
+
+  /**
+   * Decreases the number of pending request
+   * @deprecated pending requests are now tracked with zones
+   */
+  decreasePendingRequestCount(): number {
+    this._pendingCount -= 1;
+    if (this._pendingCount < 0) {
+      throw new Error('pending async requests below zero');
+    }
+    this._runCallbacksIfReady();
+    return this._pendingCount;
+  }
+
+  /**
+   * Whether an associated application is stable
+   */
+  isStable(): boolean {
+    return this._isZoneStable && this._pendingCount === 0 && !this._ngZone.hasPendingMacrotasks;
+  }
+
+  private _runCallbacksIfReady(): void {
+    if (this.isStable()) {
+      // Schedules the call backs in a new frame so that it is always async.
+      scheduleMicroTask(() => {
+        while (this._callbacks.length !== 0) {
+          let cb = this._callbacks.pop() !;
+          clearTimeout(cb.timeoutId);
+          cb.doneCb(this._didWork);
+        }
+        this._didWork = false;
+      });
+    } else {
+      // Still not stable, send updates.
+      let pending = this.getPendingTasks();
+      this._callbacks = this._callbacks.filter((cb) => {
+        if (cb.updateCb && cb.updateCb(pending)) {
+          clearTimeout(cb.timeoutId);
+          return false;
+        }
+
+        return true;
+      });
+
+      this._didWork = true;
+    }
+  }
+
+  private getPendingTasks(): PendingMacrotask[] {
+    if (!this.taskTrackingZone) {
+      return [];
+    }
+
+    // Copy the tasks data so that we don't leak tasks.
+    return this.taskTrackingZone.macroTasks.map((t: Task) => {
+      return {
+        source: t.source,
+        // From TaskTrackingZone:
+        // https://github.com/angular/zone.js/blob/master/lib/zone-spec/task-tracking.ts#L40
+        creationLocation: (t as any).creationLocation as Error,
+        data: t.data
+      };
+    });
+  }
+
+  private addCallback(cb: DoneCallback, timeout?: number, updateCb?: UpdateCallback) {
+    let timeoutId: any = -1;
+    if (timeout && timeout > 0) {
+      timeoutId = setTimeout(() => {
+        this._callbacks = this._callbacks.filter((cb) => cb.timeoutId !== timeoutId);
+        cb(this._didWork, this.getPendingTasks());
+      }, timeout);
+    }
+    this._callbacks.push(<WaitCallback>{doneCb: cb, timeoutId: timeoutId, updateCb: updateCb});
+  }
+
+  /**
+   * Wait for the application to be stable with a timeout. If the timeout is reached before that
+   * happens, the callback receives a list of the macro tasks that were pending, otherwise null.
+   *
+   * @param doneCb The callback to invoke when Angular is stable or the timeout expires
+   *    whichever comes first.
+   * @param timeout Optional. The maximum time to wait for Angular to become stable. If not
+   *    specified, whenStable() will wait forever.
+   * @param updateCb Optional. If specified, this callback will be invoked whenever the set of
+   *    pending macrotasks changes. If this callback returns true doneCb will not be invoked
+   *    and no further updates will be issued.
+   */
+  whenStable(doneCb: Function, timeout?: number, updateCb?: Function): void {
+    if (updateCb && !this.taskTrackingZone) {
+      throw new Error(
+          'Task tracking zone is required when passing an update callback to ' +
+          'whenStable(). Is "zone.js/dist/task-tracking.js" loaded?');
+    }
+    // These arguments are 'Function' above to keep the public API simple.
+    this.addCallback(doneCb as DoneCallback, timeout, updateCb as UpdateCallback);
+    this._runCallbacksIfReady();
+  }
+
+  /**
+   * Get the number of pending requests
+   * @deprecated pending requests are now tracked with zones
+   */
+  getPendingRequestCount(): number { return this._pendingCount; }
+
+  /**
+   * Find providers by name
+   * @param using The root element to search from
+   * @param provider The name of binding variable
+   * @param exactMatch Whether using exactMatch
+   */
+  findProviders(using: any, provider: string, exactMatch: boolean): any[] {
+    // TODO(juliemr): implement.
+    return [];
+  }
+}
+
+/**
+ * A global registry of {@link Testability} instances for specific elements.
+ * @experimental
+ */
+@Injectable()
+export class TestabilityRegistry {
+  /** @internal */
+  _applications = new Map<any, Testability>();
+
+  constructor() { _testabilityGetter.addToWindow(this); }
+
+  /**
+   * Registers an application with a testability hook so that it can be tracked
+   * @param token token of application, root element
+   * @param testability Testability hook
+   */
+  registerApplication(token: any, testability: Testability) {
+    this._applications.set(token, testability);
+  }
+
+  /**
+   * Unregisters an application.
+   * @param token token of application, root element
+   */
+  unregisterApplication(token: any) { this._applications.delete(token); }
+
+  /**
+   * Unregisters all applications
+   */
+  unregisterAllApplications() { this._applications.clear(); }
+
+  /**
+   * Get a testability hook associated with the application
+   * @param elem root element
+   */
+  getTestability(elem: any): Testability|null { return this._applications.get(elem) || null; }
+
+  /**
+   * Get all registered testabilities
+   */
+  getAllTestabilities(): Testability[] { return Array.from(this._applications.values()); }
+
+  /**
+   * Get all registered applications(root elements)
+   */
+  getAllRootElements(): any[] { return Array.from(this._applications.keys()); }
+
+  /**
+   * Find testability of a node in the Tree
+   * @param elem node
+   * @param findInAncestors whether finding testability in ancestors if testability was not found in
+   * current node
+   */
+  findTestabilityInTree(elem: Node, findInAncestors: boolean = true): Testability|null {
+    return _testabilityGetter.findTestabilityInTree(this, elem, findInAncestors);
+  }
+}
+
+/**
+ * Adapter interface for retrieving the `Testability` service associated for a
+ * particular context.
+ *
+ * @experimental Testability apis are primarily intended to be used by e2e test tool vendors like
+ * the Protractor team.
+ */
+export interface GetTestability {
+  addToWindow(registry: TestabilityRegistry): void;
+  findTestabilityInTree(registry: TestabilityRegistry, elem: any, findInAncestors: boolean):
+      Testability|null;
+}
+
+class _NoopGetTestability implements GetTestability {
+  addToWindow(registry: TestabilityRegistry): void {}
+  findTestabilityInTree(registry: TestabilityRegistry, elem: any, findInAncestors: boolean):
+      Testability|null {
+    return null;
+  }
+}
+
+/**
+ * Set the {@link GetTestability} implementation used by the Angular testing framework.
+ * @experimental
+ */
+export function setTestabilityGetter(getter: GetTestability): void {
+  _testabilityGetter = getter;
+}
+
+let _testabilityGetter: GetTestability = new _NoopGetTestability();
diff --git a/packages/core/src/type.ts b/packages/core/src/type.ts
new file mode 100644
index 000000000000..42f072385bdf
--- /dev/null
+++ b/packages/core/src/type.ts
@@ -0,0 +1,25 @@
+/**
+ * @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
+ */
+
+/**
+ * @description
+ *
+ * Represents a type that a Component or other object is instances of.
+ *
+ * An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
+ * the `MyCustomComponent` constructor function.
+ *
+ *
+ */
+export const Type = Function;
+
+export function isType(v: any): v is Type<any> {
+  return typeof v === 'function';
+}
+
+export interface Type<T> extends Function { new (...args: any[]): T; }
diff --git a/packages/core/src/util.ts b/packages/core/src/util.ts
new file mode 100644
index 000000000000..4c0011dbb457
--- /dev/null
+++ b/packages/core/src/util.ts
@@ -0,0 +1,98 @@
+/**
+ * @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(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.
+// We don't want to include the whole node.d.ts this this compilation unit so we'll just fake
+// the global "global" var for now.
+declare var global: any /** TODO #9100 */;
+const __window = typeof window !== 'undefined' && window;
+const __self = typeof self !== 'undefined' && typeof WorkerGlobalScope !== 'undefined' &&
+    self instanceof WorkerGlobalScope && self;
+const __global = typeof global !== 'undefined' && global;
+
+// Check __global first, because in Node tests both __global and __window may be defined and _global
+// should be __global in that case.
+const _global: {[name: string]: any} = __global || __window || __self;
+
+const promise: Promise<any> = Promise.resolve(0);
+/**
+ * Attention: whenever providing a new value, be sure to add an
+ * entry into the corresponding `....externs.js` file,
+ * so that closure won't use that global for its purposes.
+ */
+export {_global as global};
+
+// When Symbol.iterator doesn't exist, retrieves the key used in es6-shim
+declare const Symbol: any;
+let _symbolIterator: any = null;
+export function getSymbolIterator(): string|symbol {
+  if (!_symbolIterator) {
+    const Symbol = _global['Symbol'];
+    if (Symbol && Symbol.iterator) {
+      _symbolIterator = Symbol.iterator;
+    } else {
+      // es6-shim specific logic
+      const keys = Object.getOwnPropertyNames(Map.prototype);
+      for (let i = 0; i < keys.length; ++i) {
+        const key = keys[i];
+        if (key !== 'entries' && key !== 'size' &&
+            (Map as any).prototype[key] === Map.prototype['entries']) {
+          _symbolIterator = key;
+        }
+      }
+    }
+  }
+  return _symbolIterator;
+}
+
+export function scheduleMicroTask(fn: Function) {
+  if (typeof Zone === 'undefined') {
+    // use promise to schedule microTask instead of use Zone
+    promise.then(() => { fn && fn.apply(null, null); });
+  } else {
+    Zone.current.scheduleMicroTask('scheduleMicrotask', fn);
+  }
+}
+
+// JS has NaN !== NaN
+export function looseIdentical(a: any, b: any): boolean {
+  return a === b || typeof a === 'number' && typeof b === 'number' && isNaN(a) && isNaN(b);
+}
+
+export function stringify(token: any): string {
+  if (typeof token === 'string') {
+    return token;
+  }
+
+  if (token instanceof Array) {
+    return '[' + token.map(stringify).join(', ') + ']';
+  }
+
+  if (token == null) {
+    return '' + token;
+  }
+
+  if (token.overriddenName) {
+    return `${token.overriddenName}`;
+  }
+
+  if (token.name) {
+    return `${token.name}`;
+  }
+
+  const res = token.toString();
+
+  if (res == null) {
+    return '' + res;
+  }
+
+  const newLineIndex = res.indexOf('\n');
+  return newLineIndex === -1 ? res : res.substring(0, newLineIndex);
+}
diff --git a/packages/core/src/util/decorators.ts b/packages/core/src/util/decorators.ts
new file mode 100644
index 000000000000..da5fe6ae0297
--- /dev/null
+++ b/packages/core/src/util/decorators.ts
@@ -0,0 +1,168 @@
+/**
+ * @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 {Type} from '../type';
+
+/**
+ * An interface implemented by all Angular type decorators, which allows them to be used as ES7
+ * decorators as well as
+ * Angular DSL syntax.
+ *
+ * ES7 syntax:
+ *
+ * ```
+ * @ng.Component({...})
+ * class MyClass {...}
+ * ```
+ *
+ */
+export interface TypeDecorator {
+  /**
+   * Invoke as ES7 decorator.
+   */
+  <T extends Type<any>>(type: T): T;
+
+  // Make TypeDecorator assignable to built-in ParameterDecorator type.
+  // ParameterDecorator is declared in lib.d.ts as a `declare type`
+  // so we cannot declare this interface as a subtype.
+  // see https://github.com/angular/angular/issues/3379#issuecomment-126169417
+  (target: Object, propertyKey?: string|symbol, parameterIndex?: number): void;
+}
+
+export const ANNOTATIONS = '__annotations__';
+export const PARAMETERS = '__parameters__';
+export const PROP_METADATA = '__prop__metadata__';
+
+/**
+ * @suppress {globalThis}
+ */
+export function makeDecorator<T>(
+    name: string, props?: (...args: any[]) => any, parentClass?: any,
+    additionalProcessing?: (type: Type<T>) => void,
+    typeFn?: (type: Type<T>, ...args: any[]) => void):
+    {new (...args: any[]): any; (...args: any[]): any; (...args: any[]): (cls: any) => any;} {
+  const metaCtor = makeMetadataCtor(props);
+
+  function DecoratorFactory(...args: any[]): (cls: Type<T>) => any {
+    if (this instanceof DecoratorFactory) {
+      metaCtor.call(this, ...args);
+      return this;
+    }
+
+    const annotationInstance = new (DecoratorFactory as any)(...args);
+    return function TypeDecorator(cls: Type<T>) {
+      if (typeFn) typeFn(cls, ...args);
+      // Use of Object.defineProperty is important since it creates non-enumerable property which
+      // prevents the property is copied during subclassing.
+      const annotations = cls.hasOwnProperty(ANNOTATIONS) ?
+          (cls as any)[ANNOTATIONS] :
+          Object.defineProperty(cls, ANNOTATIONS, {value: []})[ANNOTATIONS];
+      annotations.push(annotationInstance);
+
+
+      if (additionalProcessing) additionalProcessing(cls);
+
+      return cls;
+    };
+  }
+
+  if (parentClass) {
+    DecoratorFactory.prototype = Object.create(parentClass.prototype);
+  }
+
+  DecoratorFactory.prototype.ngMetadataName = name;
+  (DecoratorFactory as any).annotationCls = DecoratorFactory;
+  return DecoratorFactory as any;
+}
+
+function makeMetadataCtor(props?: (...args: any[]) => any): any {
+  return function ctor(...args: any[]) {
+    if (props) {
+      const values = props(...args);
+      for (const propName in values) {
+        this[propName] = values[propName];
+      }
+    }
+  };
+}
+
+export function makeParamDecorator(
+    name: string, props?: (...args: any[]) => any, parentClass?: any): any {
+  const metaCtor = makeMetadataCtor(props);
+  function ParamDecoratorFactory(...args: any[]): any {
+    if (this instanceof ParamDecoratorFactory) {
+      metaCtor.apply(this, args);
+      return this;
+    }
+    const annotationInstance = new (<any>ParamDecoratorFactory)(...args);
+
+    (<any>ParamDecorator).annotation = annotationInstance;
+    return ParamDecorator;
+
+    function ParamDecorator(cls: any, unusedKey: any, index: number): any {
+      // Use of Object.defineProperty is important since it creates non-enumerable property which
+      // prevents the property is copied during subclassing.
+      const parameters = cls.hasOwnProperty(PARAMETERS) ?
+          (cls as any)[PARAMETERS] :
+          Object.defineProperty(cls, PARAMETERS, {value: []})[PARAMETERS];
+
+      // there might be gaps if some in between parameters do not have annotations.
+      // we pad with nulls.
+      while (parameters.length <= index) {
+        parameters.push(null);
+      }
+
+      (parameters[index] = parameters[index] || []).push(annotationInstance);
+      return cls;
+    }
+  }
+  if (parentClass) {
+    ParamDecoratorFactory.prototype = Object.create(parentClass.prototype);
+  }
+  ParamDecoratorFactory.prototype.ngMetadataName = name;
+  (<any>ParamDecoratorFactory).annotationCls = ParamDecoratorFactory;
+  return ParamDecoratorFactory;
+}
+
+export function makePropDecorator(
+    name: string, props?: (...args: any[]) => any, parentClass?: any,
+    additionalProcessing?: (target: any, name: string, ...args: any[]) => void): any {
+  const metaCtor = makeMetadataCtor(props);
+
+  function PropDecoratorFactory(...args: any[]): any {
+    if (this instanceof PropDecoratorFactory) {
+      metaCtor.apply(this, args);
+      return this;
+    }
+
+    const decoratorInstance = new (<any>PropDecoratorFactory)(...args);
+
+    function PropDecorator(target: any, name: string) {
+      const constructor = target.constructor;
+      // Use of Object.defineProperty is important since it creates non-enumerable property which
+      // prevents the property is copied during subclassing.
+      const meta = constructor.hasOwnProperty(PROP_METADATA) ?
+          (constructor as any)[PROP_METADATA] :
+          Object.defineProperty(constructor, PROP_METADATA, {value: {}})[PROP_METADATA];
+      meta[name] = meta.hasOwnProperty(name) && meta[name] || [];
+      meta[name].unshift(decoratorInstance);
+
+      if (additionalProcessing) additionalProcessing(target, name, ...args);
+    }
+
+    return PropDecorator;
+  }
+
+  if (parentClass) {
+    PropDecoratorFactory.prototype = Object.create(parentClass.prototype);
+  }
+
+  PropDecoratorFactory.prototype.ngMetadataName = name;
+  (<any>PropDecoratorFactory).annotationCls = PropDecoratorFactory;
+  return PropDecoratorFactory;
+}
diff --git a/packages/core/src/util/lang.ts b/packages/core/src/util/lang.ts
new file mode 100644
index 000000000000..b6631e84d07e
--- /dev/null
+++ b/packages/core/src/util/lang.ts
@@ -0,0 +1,27 @@
+/**
+ * @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';
+
+/**
+ * Determine if the argument is shaped like a Promise
+ */
+export function isPromise(obj: any): obj is Promise<any> {
+  // allow any Promise/A+ compliant thenable.
+  // It's up to the caller to ensure that obj.then conforms to the spec
+  return !!obj && typeof obj.then === 'function';
+}
+
+/**
+ * Determine if the argument is an Observable
+ */
+export function isObservable(obj: any | Observable<any>): obj is Observable<any> {
+  // TODO: use isObservable once we update pass rxjs 6.1
+  // https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#610-2018-05-03
+  return !!obj && typeof obj.subscribe === 'function';
+}
diff --git a/packages/core/src/util/property.ts b/packages/core/src/util/property.ts
new file mode 100644
index 000000000000..da02f03f589d
--- /dev/null
+++ b/packages/core/src/util/property.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 getClosureSafeProperty<T>(objWithPropertyToExtract: T, target: any): string {
+  for (let key in objWithPropertyToExtract) {
+    if (objWithPropertyToExtract[key] === target) {
+      return key;
+    }
+  }
+  throw Error('Could not find renamed property on target object.');
+}
+
+/**
+ * Sets properties on a target object from a source object, but only if
+ * the property doesn't already exist on the target object.
+ * @param target The target to set properties on
+ * @param source The source of the property keys and values to set
+ */
+export function fillProperties(target: {[key: string]: string}, source: {[key: string]: string}) {
+  for (const key in source) {
+    if (source.hasOwnProperty(key) && !target.hasOwnProperty(key)) {
+      target[key] = source[key];
+    }
+  }
+}
diff --git a/packages/core/src/version.ts b/packages/core/src/version.ts
new file mode 100644
index 000000000000..f095fc9526f5
--- /dev/null
+++ b/packages/core/src/version.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
+ */
+
+/**
+ * @description Represents the version of Angular
+ *
+ *
+ */
+export class Version {
+  public readonly major: string;
+  public readonly minor: string;
+  public readonly patch: string;
+
+  constructor(public full: string) {
+    this.major = full.split('.')[0];
+    this.minor = full.split('.')[1];
+    this.patch = full.split('.').slice(2).join('.');
+  }
+}
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/core/src/view/element.ts b/packages/core/src/view/element.ts
new file mode 100644
index 000000000000..925d71367c49
--- /dev/null
+++ b/packages/core/src/view/element.ts
@@ -0,0 +1,303 @@
+/**
+ * @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 {RendererType2} from '../render/api';
+import {SecurityContext} from '../sanitization/security';
+
+import {BindingDef, BindingFlags, ElementData, ElementHandleEventFn, NodeDef, NodeFlags, OutputDef, OutputType, QueryValueType, ViewData, ViewDefinitionFactory, asElementData} from './types';
+import {NOOP, calcBindingFlags, checkAndUpdateBinding, dispatchEvent, elementEventFullName, getParentRenderElement, resolveDefinition, resolveRendererType2, splitMatchedQueriesDsl, splitNamespace} from './util';
+
+export function anchorDef(
+    flags: NodeFlags, matchedQueriesDsl: null | [string | number, QueryValueType][],
+    ngContentIndex: null | number, childCount: number, handleEvent?: null | ElementHandleEventFn,
+    templateFactory?: ViewDefinitionFactory): NodeDef {
+  flags |= NodeFlags.TypeElement;
+  const {matchedQueries, references, matchedQueryIds} = splitMatchedQueriesDsl(matchedQueriesDsl);
+  const template = templateFactory ? resolveDefinition(templateFactory) : null;
+
+  return {
+    // will bet set by the view definition
+    nodeIndex: -1,
+    parent: null,
+    renderParent: null,
+    bindingIndex: -1,
+    outputIndex: -1,
+    // regular values
+    flags,
+    checkIndex: -1,
+    childFlags: 0,
+    directChildFlags: 0,
+    childMatchedQueries: 0, matchedQueries, matchedQueryIds, references, ngContentIndex, childCount,
+    bindings: [],
+    bindingFlags: 0,
+    outputs: [],
+    element: {
+      ns: null,
+      name: null,
+      attrs: null, template,
+      componentProvider: null,
+      componentView: null,
+      componentRendererType: null,
+      publicProviders: null,
+      allProviders: null,
+      handleEvent: handleEvent || NOOP
+    },
+    provider: null,
+    text: null,
+    query: null,
+    ngContent: null
+  };
+}
+
+export function elementDef(
+    checkIndex: number, flags: NodeFlags,
+    matchedQueriesDsl: null | [string | number, QueryValueType][], ngContentIndex: null | number,
+    childCount: number, namespaceAndName: string | null, fixedAttrs: null | [string, string][] = [],
+    bindings?: null | [BindingFlags, string, string | SecurityContext | null][],
+    outputs?: null | ([string, string])[], handleEvent?: null | ElementHandleEventFn,
+    componentView?: null | ViewDefinitionFactory,
+    componentRendererType?: RendererType2 | null): NodeDef {
+  if (!handleEvent) {
+    handleEvent = NOOP;
+  }
+  const {matchedQueries, references, matchedQueryIds} = splitMatchedQueriesDsl(matchedQueriesDsl);
+  let ns: string = null !;
+  let name: string = null !;
+  if (namespaceAndName) {
+    [ns, name] = splitNamespace(namespaceAndName);
+  }
+  bindings = bindings || [];
+  const bindingDefs: BindingDef[] = new Array(bindings.length);
+  for (let i = 0; i < bindings.length; i++) {
+    const [bindingFlags, namespaceAndName, suffixOrSecurityContext] = bindings[i];
+
+    const [ns, name] = splitNamespace(namespaceAndName);
+    let securityContext: SecurityContext = undefined !;
+    let suffix: string = undefined !;
+    switch (bindingFlags & BindingFlags.Types) {
+      case BindingFlags.TypeElementStyle:
+        suffix = <string>suffixOrSecurityContext;
+        break;
+      case BindingFlags.TypeElementAttribute:
+      case BindingFlags.TypeProperty:
+        securityContext = <SecurityContext>suffixOrSecurityContext;
+        break;
+    }
+    bindingDefs[i] =
+        {flags: bindingFlags, ns, name, nonMinifiedName: name, securityContext, suffix};
+  }
+  outputs = outputs || [];
+  const outputDefs: OutputDef[] = new Array(outputs.length);
+  for (let i = 0; i < outputs.length; i++) {
+    const [target, eventName] = outputs[i];
+    outputDefs[i] = {
+      type: OutputType.ElementOutput,
+      target: <any>target, eventName,
+      propName: null
+    };
+  }
+  fixedAttrs = fixedAttrs || [];
+  const attrs = <[string, string, string][]>fixedAttrs.map(([namespaceAndName, value]) => {
+    const [ns, name] = splitNamespace(namespaceAndName);
+    return [ns, name, value];
+  });
+  componentRendererType = resolveRendererType2(componentRendererType);
+  if (componentView) {
+    flags |= NodeFlags.ComponentView;
+  }
+  flags |= NodeFlags.TypeElement;
+  return {
+    // will bet set by the view definition
+    nodeIndex: -1,
+    parent: null,
+    renderParent: null,
+    bindingIndex: -1,
+    outputIndex: -1,
+    // regular values
+    checkIndex,
+    flags,
+    childFlags: 0,
+    directChildFlags: 0,
+    childMatchedQueries: 0, matchedQueries, matchedQueryIds, references, ngContentIndex, childCount,
+    bindings: bindingDefs,
+    bindingFlags: calcBindingFlags(bindingDefs),
+    outputs: outputDefs,
+    element: {
+      ns,
+      name,
+      attrs,
+      template: null,
+      // will bet set by the view definition
+      componentProvider: null,
+      componentView: componentView || null,
+      componentRendererType: componentRendererType,
+      publicProviders: null,
+      allProviders: null,
+      handleEvent: handleEvent || NOOP,
+    },
+    provider: null,
+    text: null,
+    query: null,
+    ngContent: null
+  };
+}
+
+export function createElement(view: ViewData, renderHost: any, def: NodeDef): ElementData {
+  const elDef = def.element !;
+  const rootSelectorOrNode = view.root.selectorOrNode;
+  const renderer = view.renderer;
+  let el: any;
+  if (view.parent || !rootSelectorOrNode) {
+    if (elDef.name) {
+      el = renderer.createElement(elDef.name, elDef.ns);
+    } else {
+      el = renderer.createComment('');
+    }
+    const parentEl = getParentRenderElement(view, renderHost, def);
+    if (parentEl) {
+      renderer.appendChild(parentEl, el);
+    }
+  } else {
+    el = renderer.selectRootElement(rootSelectorOrNode);
+  }
+  if (elDef.attrs) {
+    for (let i = 0; i < elDef.attrs.length; i++) {
+      const [ns, name, value] = elDef.attrs[i];
+      renderer.setAttribute(el, name, value, ns);
+    }
+  }
+  return el;
+}
+
+export function listenToElementOutputs(view: ViewData, compView: ViewData, def: NodeDef, el: any) {
+  for (let i = 0; i < def.outputs.length; i++) {
+    const output = def.outputs[i];
+    const handleEventClosure = renderEventHandlerClosure(
+        view, def.nodeIndex, elementEventFullName(output.target, output.eventName));
+    let listenTarget: 'window'|'document'|'body'|'component'|null = output.target;
+    let listenerView = view;
+    if (output.target === 'component') {
+      listenTarget = null;
+      listenerView = compView;
+    }
+    const disposable =
+        <any>listenerView.renderer.listen(listenTarget || el, output.eventName, handleEventClosure);
+    view.disposables ![def.outputIndex + i] = disposable;
+  }
+}
+
+function renderEventHandlerClosure(view: ViewData, index: number, eventName: string) {
+  return (event: any) => dispatchEvent(view, index, eventName, event);
+}
+
+
+export function checkAndUpdateElementInline(
+    view: ViewData, def: NodeDef, v0: any, v1: any, v2: any, v3: any, v4: any, v5: any, v6: any,
+    v7: any, v8: any, v9: any): boolean {
+  const bindLen = def.bindings.length;
+  let changed = false;
+  if (bindLen > 0 && checkAndUpdateElementValue(view, def, 0, v0)) changed = true;
+  if (bindLen > 1 && checkAndUpdateElementValue(view, def, 1, v1)) changed = true;
+  if (bindLen > 2 && checkAndUpdateElementValue(view, def, 2, v2)) changed = true;
+  if (bindLen > 3 && checkAndUpdateElementValue(view, def, 3, v3)) changed = true;
+  if (bindLen > 4 && checkAndUpdateElementValue(view, def, 4, v4)) changed = true;
+  if (bindLen > 5 && checkAndUpdateElementValue(view, def, 5, v5)) changed = true;
+  if (bindLen > 6 && checkAndUpdateElementValue(view, def, 6, v6)) changed = true;
+  if (bindLen > 7 && checkAndUpdateElementValue(view, def, 7, v7)) changed = true;
+  if (bindLen > 8 && checkAndUpdateElementValue(view, def, 8, v8)) changed = true;
+  if (bindLen > 9 && checkAndUpdateElementValue(view, def, 9, v9)) changed = true;
+  return changed;
+}
+
+export function checkAndUpdateElementDynamic(view: ViewData, def: NodeDef, values: any[]): boolean {
+  let changed = false;
+  for (let i = 0; i < values.length; i++) {
+    if (checkAndUpdateElementValue(view, def, i, values[i])) changed = true;
+  }
+  return changed;
+}
+
+function checkAndUpdateElementValue(view: ViewData, def: NodeDef, bindingIdx: number, value: any) {
+  if (!checkAndUpdateBinding(view, def, bindingIdx, value)) {
+    return false;
+  }
+  const binding = def.bindings[bindingIdx];
+  const elData = asElementData(view, def.nodeIndex);
+  const renderNode = elData.renderElement;
+  const name = binding.name !;
+  switch (binding.flags & BindingFlags.Types) {
+    case BindingFlags.TypeElementAttribute:
+      setElementAttribute(view, binding, renderNode, binding.ns, name, value);
+      break;
+    case BindingFlags.TypeElementClass:
+      setElementClass(view, renderNode, name, value);
+      break;
+    case BindingFlags.TypeElementStyle:
+      setElementStyle(view, binding, renderNode, name, value);
+      break;
+    case BindingFlags.TypeProperty:
+      const bindView = (def.flags & NodeFlags.ComponentView &&
+                        binding.flags & BindingFlags.SyntheticHostProperty) ?
+          elData.componentView :
+          view;
+      setElementProperty(bindView, binding, renderNode, name, value);
+      break;
+  }
+  return true;
+}
+
+function setElementAttribute(
+    view: ViewData, binding: BindingDef, renderNode: any, ns: string | null, name: string,
+    value: any) {
+  const securityContext = binding.securityContext;
+  let renderValue = securityContext ? view.root.sanitizer.sanitize(securityContext, value) : value;
+  renderValue = renderValue != null ? renderValue.toString() : null;
+  const renderer = view.renderer;
+  if (value != null) {
+    renderer.setAttribute(renderNode, name, renderValue, ns);
+  } else {
+    renderer.removeAttribute(renderNode, name, ns);
+  }
+}
+
+function setElementClass(view: ViewData, renderNode: any, name: string, value: boolean) {
+  const renderer = view.renderer;
+  if (value) {
+    renderer.addClass(renderNode, name);
+  } else {
+    renderer.removeClass(renderNode, name);
+  }
+}
+
+function setElementStyle(
+    view: ViewData, binding: BindingDef, renderNode: any, name: string, value: any) {
+  let renderValue: string|null =
+      view.root.sanitizer.sanitize(SecurityContext.STYLE, value as{} | string);
+  if (renderValue != null) {
+    renderValue = renderValue.toString();
+    const unit = binding.suffix;
+    if (unit != null) {
+      renderValue = renderValue + unit;
+    }
+  } else {
+    renderValue = null;
+  }
+  const renderer = view.renderer;
+  if (renderValue != null) {
+    renderer.setStyle(renderNode, name, renderValue);
+  } else {
+    renderer.removeStyle(renderNode, name);
+  }
+}
+
+function setElementProperty(
+    view: ViewData, binding: BindingDef, renderNode: any, name: string, value: any) {
+  const securityContext = binding.securityContext;
+  let renderValue = securityContext ? view.root.sanitizer.sanitize(securityContext, value) : value;
+  view.renderer.setProperty(renderNode, name, renderValue);
+}
diff --git a/packages/core/src/view/entrypoint.ts b/packages/core/src/view/entrypoint.ts
new file mode 100644
index 000000000000..ff2933baf1f1
--- /dev/null
+++ b/packages/core/src/view/entrypoint.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 {Injector} from '../di/injector';
+import {ComponentFactory} from '../linker/component_factory';
+import {NgModuleFactory, NgModuleRef} from '../linker/ng_module_factory';
+import {Type} from '../type';
+
+import {initServicesIfNeeded} from './services';
+import {NgModuleDefinition, NgModuleDefinitionFactory, NgModuleProviderDef, ProviderOverride, Services, ViewDefinition} from './types';
+import {resolveDefinition} from './util';
+
+export function overrideProvider(override: ProviderOverride) {
+  initServicesIfNeeded();
+  return Services.overrideProvider(override);
+}
+
+export function overrideComponentView(comp: Type<any>, componentFactory: ComponentFactory<any>) {
+  initServicesIfNeeded();
+  return Services.overrideComponentView(comp, componentFactory);
+}
+
+export function clearOverrides() {
+  initServicesIfNeeded();
+  return Services.clearOverrides();
+}
+
+// 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);
+}
+
+function cloneNgModuleDefinition(def: NgModuleDefinition): NgModuleDefinition {
+  const providers = Array.from(def.providers);
+  const modules = Array.from(def.modules);
+  const providersByKey: {[tokenKey: string]: NgModuleProviderDef} = {};
+  for (const key in def.providersByKey) {
+    providersByKey[key] = def.providersByKey[key];
+  }
+
+  return {
+    factory: def.factory,
+    isRoot: def.isRoot, providers, modules, providersByKey,
+  };
+}
+
+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();
+    // Clone the NgModuleDefinition so that any tree shakeable provider definition
+    // added to this instance of the NgModuleRef doesn't affect the cached copy.
+    // See https://github.com/angular/angular/issues/25018.
+    const def = cloneNgModuleDefinition(resolveDefinition(this._ngModuleDefFactory));
+    return Services.createNgModuleRef(
+        this.moduleType, parentInjector || Injector.NULL, this._bootstrapComponents, def);
+  }
+}
diff --git a/packages/core/src/view/errors.ts b/packages/core/src/view/errors.ts
new file mode 100644
index 000000000000..96df939fdd4d
--- /dev/null
+++ b/packages/core/src/view/errors.ts
@@ -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
+ */
+
+import {ERROR_DEBUG_CONTEXT, ERROR_LOGGER, getDebugContext} from '../errors';
+import {DebugContext, ViewState} from './types';
+
+export function expressionChangedAfterItHasBeenCheckedError(
+    context: DebugContext, oldValue: any, currValue: any, isFirstCheck: boolean): Error {
+  let msg =
+      `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '${oldValue}'. Current value: '${currValue}'.`;
+  if (isFirstCheck) {
+    msg +=
+        ` It seems like the view has been created after its parent and its children have been dirty checked.` +
+        ` Has it been created in a change detection hook ?`;
+  }
+  return viewDebugError(msg, context);
+}
+
+export function viewWrappedDebugError(err: any, context: DebugContext): Error {
+  if (!(err instanceof Error)) {
+    // errors that are not Error instances don't have a stack,
+    // so it is ok to wrap them into a new Error object...
+    err = new Error(err.toString());
+  }
+  _addDebugContext(err, context);
+  return err;
+}
+
+export function viewDebugError(msg: string, context: DebugContext): Error {
+  const err = new Error(msg);
+  _addDebugContext(err, context);
+  return err;
+}
+
+function _addDebugContext(err: Error, context: DebugContext) {
+  (err as any)[ERROR_DEBUG_CONTEXT] = context;
+  (err as any)[ERROR_LOGGER] = context.logError.bind(context);
+}
+
+export function isViewDebugError(err: Error): boolean {
+  return !!getDebugContext(err);
+}
+
+export function viewDestroyedError(action: string): Error {
+  return new Error(`ViewDestroyedError: Attempt to use a destroyed view: ${action}`);
+}
diff --git a/packages/core/src/view/index.ts b/packages/core/src/view/index.ts
new file mode 100644
index 000000000000..28b0947d26ab
--- /dev/null
+++ b/packages/core/src/view/index.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 {anchorDef, elementDef} from './element';
+export {clearOverrides, createNgModuleFactory, overrideComponentView, 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, tokenKey, unwrapValue} from './util';
+export {viewDef} from './view';
+export {attachEmbeddedView, detachEmbeddedView, moveEmbeddedView} from './view_attach';
+
+export * from './types';
diff --git a/packages/core/src/view/ng_content.ts b/packages/core/src/view/ng_content.ts
new file mode 100644
index 000000000000..fd7ce7e9fced
--- /dev/null
+++ b/packages/core/src/view/ng_content.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 {NodeDef, NodeFlags, ViewData} from './types';
+import {RenderNodeAction, getParentRenderElement, visitProjectedRenderNodes} from './util';
+
+export function ngContentDef(ngContentIndex: null | number, index: number): NodeDef {
+  return {
+    // will bet set by the view definition
+    nodeIndex: -1,
+    parent: null,
+    renderParent: null,
+    bindingIndex: -1,
+    outputIndex: -1,
+    // regular values
+    checkIndex: -1,
+    flags: NodeFlags.TypeNgContent,
+    childFlags: 0,
+    directChildFlags: 0,
+    childMatchedQueries: 0,
+    matchedQueries: {},
+    matchedQueryIds: 0,
+    references: {}, ngContentIndex,
+    childCount: 0,
+    bindings: [],
+    bindingFlags: 0,
+    outputs: [],
+    element: null,
+    provider: null,
+    text: null,
+    query: null,
+    ngContent: {index}
+  };
+}
+
+export function appendNgContent(view: ViewData, renderHost: any, def: NodeDef) {
+  const parentEl = getParentRenderElement(view, renderHost, def);
+  if (!parentEl) {
+    // Nothing to do if there is no parent element.
+    return;
+  }
+  const ngContentIndex = def.ngContent !.index;
+  visitProjectedRenderNodes(
+      view, ngContentIndex, RenderNodeAction.AppendChild, parentEl, null, undefined);
+}
diff --git a/packages/core/src/view/ng_module.ts b/packages/core/src/view/ng_module.ts
new file mode 100644
index 000000000000..bd660bf817e2
--- /dev/null
+++ b/packages/core/src/view/ng_module.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 {InjectableDef} from '../di/defs';
+import {resolveForwardRef} from '../di/forward_ref';
+import {INJECTOR, InjectFlags, Injector, setCurrentInjector} from '../di/injector';
+import {APP_ROOT} from '../di/scope';
+import {NgModuleRef} from '../linker/ng_module_factory';
+import {stringify} from '../util';
+
+import {DepDef, DepFlags, NgModuleData, NgModuleDefinition, NgModuleProviderDef, NodeFlags} from './types';
+import {splitDepsDsl, tokenKey} from './util';
+
+const UNDEFINED_VALUE = new Object();
+
+const InjectorRefTokenKey = tokenKey(Injector);
+const INJECTORRefTokenKey = tokenKey(INJECTOR);
+const NgModuleRefTokenKey = tokenKey(NgModuleRef);
+
+export function moduleProvideDef(
+    flags: NodeFlags, token: any, value: any,
+    deps: ([DepFlags, any] | any)[]): NgModuleProviderDef {
+  // Need to resolve forwardRefs as e.g. for `useValue` we
+  // lowered the expression and then stopped evaluating it,
+  // i.e. also didn't unwrap it.
+  value = resolveForwardRef(value);
+  const depDefs = splitDepsDsl(deps, stringify(token));
+  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} = {};
+  const modules = [];
+  let isRoot: boolean = false;
+  for (let i = 0; i < providers.length; i++) {
+    const provider = providers[i];
+    if (provider.token === APP_ROOT && provider.value === true) {
+      isRoot = true;
+    }
+    if (provider.flags & NodeFlags.TypeNgModule) {
+      modules.push(provider.token);
+    }
+    provider.index = i;
+    providersByKey[tokenKey(provider.token)] = provider;
+  }
+  return {
+    // Will be filled later...
+    factory: null,
+    providersByKey,
+    providers,
+    modules,
+    isRoot,
+  };
+}
+
+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];
+    if (!(provDef.flags & NodeFlags.LazyProvider)) {
+      // Make sure the provider has not been already initialized outside this loop.
+      if (providers[i] === undefined) {
+        providers[i] = _createProviderInstance(data, provDef);
+      }
+    }
+  }
+}
+
+export function resolveNgModuleDep(
+    data: NgModuleData, depDef: DepDef, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
+  const former = setCurrentInjector(data);
+  try {
+    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 INJECTORRefTokenKey:
+      case NgModuleRefTokenKey:
+        return data;
+    }
+    const providerDef = data._def.providersByKey[tokenKey];
+    if (providerDef) {
+      let providerInstance = data._providers[providerDef.index];
+      if (providerInstance === undefined) {
+        providerInstance = data._providers[providerDef.index] =
+            _createProviderInstance(data, providerDef);
+      }
+      return providerInstance === UNDEFINED_VALUE ? undefined : providerInstance;
+    } else if (depDef.token.ngInjectableDef && targetsModule(data, depDef.token.ngInjectableDef)) {
+      const injectableDef = depDef.token.ngInjectableDef as InjectableDef<any>;
+      const key = tokenKey;
+      const index = data._providers.length;
+      data._def.providersByKey[depDef.tokenKey] = {
+        flags: NodeFlags.TypeFactoryProvider | NodeFlags.LazyProvider,
+        value: injectableDef.factory,
+        deps: [], index,
+        token: depDef.token,
+      };
+      data._providers[index] = UNDEFINED_VALUE;
+      return (
+          data._providers[index] =
+              _createProviderInstance(data, data._def.providersByKey[depDef.tokenKey]));
+    } else if (depDef.flags & DepFlags.Self) {
+      return notFoundValue;
+    }
+    return data._parent.get(depDef.token, notFoundValue);
+  } finally {
+    setCurrentInjector(former);
+  }
+}
+
+function moduleTransitivelyPresent(ngModule: NgModuleData, scope: any): boolean {
+  return ngModule._def.modules.indexOf(scope) > -1;
+}
+
+function targetsModule(ngModule: NgModuleData, def: InjectableDef<any>): boolean {
+  return def.providedIn != null && (moduleTransitivelyPresent(ngModule, def.providedIn) ||
+                                    def.providedIn === 'root' && ngModule._def.isRoot);
+}
+
+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;
+  }
+
+  // The read of `ngOnDestroy` here is slightly expensive as it's megamorphic, so it should be
+  // avoided if possible. The sequence of checks here determines whether ngOnDestroy needs to be
+  // checked. It might not if the `injectable` isn't an object or if NodeFlags.OnDestroy is already
+  // set (ngOnDestroy was detected statically).
+  if (injectable !== UNDEFINED_VALUE && injectable != null && typeof injectable === 'object' &&
+      !(providerDef.flags & NodeFlags.OnDestroy) && typeof injectable.ngOnDestroy === 'function') {
+    providerDef.flags |= NodeFlags.OnDestroy;
+  }
+  return injectable === undefined ? UNDEFINED_VALUE : injectable;
+}
+
+function _createClass(ngModule: NgModuleData, ctor: any, deps: DepDef[]): any {
+  const len = deps.length;
+  switch (len) {
+    case 0:
+      return new ctor();
+    case 1:
+      return new ctor(resolveNgModuleDep(ngModule, deps[0]));
+    case 2:
+      return new ctor(resolveNgModuleDep(ngModule, deps[0]), resolveNgModuleDep(ngModule, deps[1]));
+    case 3:
+      return new ctor(
+          resolveNgModuleDep(ngModule, deps[0]), resolveNgModuleDep(ngModule, deps[1]),
+          resolveNgModuleDep(ngModule, deps[2]));
+    default:
+      const depValues = new Array(len);
+      for (let i = 0; i < len; i++) {
+        depValues[i] = resolveNgModuleDep(ngModule, deps[i]);
+      }
+      return new ctor(...depValues);
+  }
+}
+
+function _callFactory(ngModule: NgModuleData, factory: any, deps: DepDef[]): any {
+  const len = deps.length;
+  switch (len) {
+    case 0:
+      return factory();
+    case 1:
+      return factory(resolveNgModuleDep(ngModule, deps[0]));
+    case 2:
+      return factory(resolveNgModuleDep(ngModule, deps[0]), resolveNgModuleDep(ngModule, deps[1]));
+    case 3:
+      return factory(
+          resolveNgModuleDep(ngModule, deps[0]), resolveNgModuleDep(ngModule, deps[1]),
+          resolveNgModuleDep(ngModule, deps[2]));
+    default:
+      const depValues = Array(len);
+      for (let i = 0; i < len; i++) {
+        depValues[i] = resolveNgModuleDep(ngModule, deps[i]);
+      }
+      return factory(...depValues);
+  }
+}
+
+export function callNgModuleLifecycle(ngModule: NgModuleData, lifecycles: NodeFlags) {
+  const def = ngModule._def;
+  const destroyed = new Set<any>();
+  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 !== UNDEFINED_VALUE) {
+        const onDestroy: Function|undefined = instance.ngOnDestroy;
+        if (typeof onDestroy === 'function' && !destroyed.has(instance)) {
+          onDestroy.apply(instance);
+          destroyed.add(instance);
+        }
+      }
+    }
+  }
+}
diff --git a/packages/core/src/view/provider.ts b/packages/core/src/view/provider.ts
new file mode 100644
index 000000000000..83e046ce53e1
--- /dev/null
+++ b/packages/core/src/view/provider.ts
@@ -0,0 +1,577 @@
+/**
+ * @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 {ChangeDetectorRef, SimpleChange, SimpleChanges, WrappedValue} from '../change_detection/change_detection';
+import {INJECTOR, Injector, resolveForwardRef} from '../di';
+import {ElementRef} from '../linker/element_ref';
+import {TemplateRef} from '../linker/template_ref';
+import {ViewContainerRef} from '../linker/view_container_ref';
+import {Renderer as RendererV1, Renderer2} from '../render/api';
+import {stringify} from '../util';
+import {isObservable} from '../util/lang';
+
+import {createChangeDetectorRef, createInjector, createRendererV1} from './refs';
+import {BindingDef, BindingFlags, DepDef, DepFlags, NodeDef, NodeFlags, OutputDef, OutputType, ProviderData, QueryValueType, Services, ViewData, ViewFlags, ViewState, asElementData, asProviderData, shouldCallLifecycleInitHook} from './types';
+import {calcBindingFlags, checkBinding, dispatchEvent, isComponentView, splitDepsDsl, splitMatchedQueriesDsl, tokenKey, viewParentEl} from './util';
+
+const RendererV1TokenKey = tokenKey(RendererV1);
+const Renderer2TokenKey = tokenKey(Renderer2);
+const ElementRefTokenKey = tokenKey(ElementRef);
+const ViewContainerRefTokenKey = tokenKey(ViewContainerRef);
+const TemplateRefTokenKey = tokenKey(TemplateRef);
+const ChangeDetectorRefTokenKey = tokenKey(ChangeDetectorRef);
+const InjectorRefTokenKey = tokenKey(Injector);
+const INJECTORRefTokenKey = tokenKey(INJECTOR);
+
+export function directiveDef(
+    checkIndex: number, flags: NodeFlags,
+    matchedQueries: null | [string | number, QueryValueType][], childCount: number, ctor: any,
+    deps: ([DepFlags, any] | any)[], props?: null | {[name: string]: [number, string]},
+    outputs?: null | {[name: string]: string}): NodeDef {
+  const bindings: BindingDef[] = [];
+  if (props) {
+    for (let prop in props) {
+      const [bindingIndex, nonMinifiedName] = props[prop];
+      bindings[bindingIndex] = {
+        flags: BindingFlags.TypeProperty,
+        name: prop, nonMinifiedName,
+        ns: null,
+        securityContext: null,
+        suffix: null
+      };
+    }
+  }
+  const outputDefs: OutputDef[] = [];
+  if (outputs) {
+    for (let propName in outputs) {
+      outputDefs.push(
+          {type: OutputType.DirectiveOutput, propName, target: null, eventName: outputs[propName]});
+    }
+  }
+  flags |= NodeFlags.TypeDirective;
+  return _def(
+      checkIndex, flags, matchedQueries, childCount, ctor, ctor, deps, bindings, outputDefs);
+}
+
+export function pipeDef(flags: NodeFlags, ctor: any, deps: ([DepFlags, any] | any)[]): NodeDef {
+  flags |= NodeFlags.TypePipe;
+  return _def(-1, flags, null, 0, ctor, ctor, deps);
+}
+
+export function providerDef(
+    flags: NodeFlags, matchedQueries: null | [string | number, QueryValueType][], token: any,
+    value: any, deps: ([DepFlags, any] | any)[]): NodeDef {
+  return _def(-1, flags, matchedQueries, 0, token, value, deps);
+}
+
+export function _def(
+    checkIndex: number, flags: NodeFlags,
+    matchedQueriesDsl: [string | number, QueryValueType][] | null, childCount: number, token: any,
+    value: any, deps: ([DepFlags, any] | any)[], bindings?: BindingDef[],
+    outputs?: OutputDef[]): NodeDef {
+  const {matchedQueries, references, matchedQueryIds} = splitMatchedQueriesDsl(matchedQueriesDsl);
+  if (!outputs) {
+    outputs = [];
+  }
+  if (!bindings) {
+    bindings = [];
+  }
+  // Need to resolve forwardRefs as e.g. for `useValue` we
+  // lowered the expression and then stopped evaluating it,
+  // i.e. also didn't unwrap it.
+  value = resolveForwardRef(value);
+
+  const depDefs = splitDepsDsl(deps, stringify(token));
+
+  return {
+    // will bet set by the view definition
+    nodeIndex: -1,
+    parent: null,
+    renderParent: null,
+    bindingIndex: -1,
+    outputIndex: -1,
+    // regular values
+    checkIndex,
+    flags,
+    childFlags: 0,
+    directChildFlags: 0,
+    childMatchedQueries: 0, matchedQueries, matchedQueryIds, references,
+    ngContentIndex: -1, childCount, bindings,
+    bindingFlags: calcBindingFlags(bindings), outputs,
+    element: null,
+    provider: {token, value, deps: depDefs},
+    text: null,
+    query: null,
+    ngContent: null
+  };
+}
+
+export function createProviderInstance(view: ViewData, def: NodeDef): any {
+  return _createProviderInstance(view, def);
+}
+
+export function createPipeInstance(view: ViewData, def: NodeDef): any {
+  // deps are looked up from component.
+  let compView = view;
+  while (compView.parent && !isComponentView(compView)) {
+    compView = compView.parent;
+  }
+  // pipes can see the private services of the component
+  const allowPrivateServices = true;
+  // pipes are always eager and classes!
+  return createClass(
+      compView.parent !, viewParentEl(compView) !, allowPrivateServices, def.provider !.value,
+      def.provider !.deps);
+}
+
+export function createDirectiveInstance(view: ViewData, def: NodeDef): any {
+  // components can see other private services, other directives can't.
+  const allowPrivateServices = (def.flags & NodeFlags.Component) > 0;
+  // directives are always eager and classes!
+  const instance = createClass(
+      view, def.parent !, allowPrivateServices, def.provider !.value, def.provider !.deps);
+  if (def.outputs.length) {
+    for (let i = 0; i < def.outputs.length; i++) {
+      const output = def.outputs[i];
+      const outputObservable = instance[output.propName !];
+      if (isObservable(outputObservable)) {
+        const subscription = outputObservable.subscribe(
+            eventHandlerClosure(view, def.parent !.nodeIndex, output.eventName));
+        view.disposables ![def.outputIndex + i] = subscription.unsubscribe.bind(subscription);
+      } else {
+        throw new Error(
+            `@Output ${output.propName} not initialized in '${instance.constructor.name}'.`);
+      }
+    }
+  }
+  return instance;
+}
+
+function eventHandlerClosure(view: ViewData, index: number, eventName: string) {
+  return (event: any) => dispatchEvent(view, index, eventName, event);
+}
+
+export function checkAndUpdateDirectiveInline(
+    view: ViewData, def: NodeDef, v0: any, v1: any, v2: any, v3: any, v4: any, v5: any, v6: any,
+    v7: any, v8: any, v9: any): boolean {
+  const providerData = asProviderData(view, def.nodeIndex);
+  const directive = providerData.instance;
+  let changed = false;
+  let changes: SimpleChanges = undefined !;
+  const bindLen = def.bindings.length;
+  if (bindLen > 0 && checkBinding(view, def, 0, v0)) {
+    changed = true;
+    changes = updateProp(view, providerData, def, 0, v0, changes);
+  }
+  if (bindLen > 1 && checkBinding(view, def, 1, v1)) {
+    changed = true;
+    changes = updateProp(view, providerData, def, 1, v1, changes);
+  }
+  if (bindLen > 2 && checkBinding(view, def, 2, v2)) {
+    changed = true;
+    changes = updateProp(view, providerData, def, 2, v2, changes);
+  }
+  if (bindLen > 3 && checkBinding(view, def, 3, v3)) {
+    changed = true;
+    changes = updateProp(view, providerData, def, 3, v3, changes);
+  }
+  if (bindLen > 4 && checkBinding(view, def, 4, v4)) {
+    changed = true;
+    changes = updateProp(view, providerData, def, 4, v4, changes);
+  }
+  if (bindLen > 5 && checkBinding(view, def, 5, v5)) {
+    changed = true;
+    changes = updateProp(view, providerData, def, 5, v5, changes);
+  }
+  if (bindLen > 6 && checkBinding(view, def, 6, v6)) {
+    changed = true;
+    changes = updateProp(view, providerData, def, 6, v6, changes);
+  }
+  if (bindLen > 7 && checkBinding(view, def, 7, v7)) {
+    changed = true;
+    changes = updateProp(view, providerData, def, 7, v7, changes);
+  }
+  if (bindLen > 8 && checkBinding(view, def, 8, v8)) {
+    changed = true;
+    changes = updateProp(view, providerData, def, 8, v8, changes);
+  }
+  if (bindLen > 9 && checkBinding(view, def, 9, v9)) {
+    changed = true;
+    changes = updateProp(view, providerData, def, 9, v9, changes);
+  }
+  if (changes) {
+    directive.ngOnChanges(changes);
+  }
+  if ((def.flags & NodeFlags.OnInit) &&
+      shouldCallLifecycleInitHook(view, ViewState.InitState_CallingOnInit, def.nodeIndex)) {
+    directive.ngOnInit();
+  }
+  if (def.flags & NodeFlags.DoCheck) {
+    directive.ngDoCheck();
+  }
+  return changed;
+}
+
+export function checkAndUpdateDirectiveDynamic(
+    view: ViewData, def: NodeDef, values: any[]): boolean {
+  const providerData = asProviderData(view, def.nodeIndex);
+  const directive = providerData.instance;
+  let changed = false;
+  let changes: SimpleChanges = undefined !;
+  for (let i = 0; i < values.length; i++) {
+    if (checkBinding(view, def, i, values[i])) {
+      changed = true;
+      changes = updateProp(view, providerData, def, i, values[i], changes);
+    }
+  }
+  if (changes) {
+    directive.ngOnChanges(changes);
+  }
+  if ((def.flags & NodeFlags.OnInit) &&
+      shouldCallLifecycleInitHook(view, ViewState.InitState_CallingOnInit, def.nodeIndex)) {
+    directive.ngOnInit();
+  }
+  if (def.flags & NodeFlags.DoCheck) {
+    directive.ngDoCheck();
+  }
+  return changed;
+}
+
+function _createProviderInstance(view: ViewData, def: NodeDef): any {
+  // private services can see other private services
+  const allowPrivateServices = (def.flags & NodeFlags.PrivateProvider) > 0;
+  const providerDef = def.provider;
+  switch (def.flags & NodeFlags.Types) {
+    case NodeFlags.TypeClassProvider:
+      return createClass(
+          view, def.parent !, allowPrivateServices, providerDef !.value, providerDef !.deps);
+    case NodeFlags.TypeFactoryProvider:
+      return callFactory(
+          view, def.parent !, allowPrivateServices, providerDef !.value, providerDef !.deps);
+    case NodeFlags.TypeUseExistingProvider:
+      return resolveDep(view, def.parent !, allowPrivateServices, providerDef !.deps[0]);
+    case NodeFlags.TypeValueProvider:
+      return providerDef !.value;
+  }
+}
+
+function createClass(
+    view: ViewData, elDef: NodeDef, allowPrivateServices: boolean, ctor: any, deps: DepDef[]): any {
+  const len = deps.length;
+  switch (len) {
+    case 0:
+      return new ctor();
+    case 1:
+      return new ctor(resolveDep(view, elDef, allowPrivateServices, deps[0]));
+    case 2:
+      return new ctor(
+          resolveDep(view, elDef, allowPrivateServices, deps[0]),
+          resolveDep(view, elDef, allowPrivateServices, deps[1]));
+    case 3:
+      return new ctor(
+          resolveDep(view, elDef, allowPrivateServices, deps[0]),
+          resolveDep(view, elDef, allowPrivateServices, deps[1]),
+          resolveDep(view, elDef, allowPrivateServices, deps[2]));
+    default:
+      const depValues = new Array(len);
+      for (let i = 0; i < len; i++) {
+        depValues[i] = resolveDep(view, elDef, allowPrivateServices, deps[i]);
+      }
+      return new ctor(...depValues);
+  }
+}
+
+function callFactory(
+    view: ViewData, elDef: NodeDef, allowPrivateServices: boolean, factory: any,
+    deps: DepDef[]): any {
+  const len = deps.length;
+  switch (len) {
+    case 0:
+      return factory();
+    case 1:
+      return factory(resolveDep(view, elDef, allowPrivateServices, deps[0]));
+    case 2:
+      return factory(
+          resolveDep(view, elDef, allowPrivateServices, deps[0]),
+          resolveDep(view, elDef, allowPrivateServices, deps[1]));
+    case 3:
+      return factory(
+          resolveDep(view, elDef, allowPrivateServices, deps[0]),
+          resolveDep(view, elDef, allowPrivateServices, deps[1]),
+          resolveDep(view, elDef, allowPrivateServices, deps[2]));
+    default:
+      const depValues = Array(len);
+      for (let i = 0; i < len; i++) {
+        depValues[i] = resolveDep(view, elDef, allowPrivateServices, deps[i]);
+      }
+      return factory(...depValues);
+  }
+}
+
+// This default value is when checking the hierarchy for a token.
+//
+// It means both:
+// - the token is not provided by the current injector,
+// - only the element injectors should be checked (ie do not check module injectors
+//
+//          mod1
+//         /
+//       el1   mod2
+//         \  /
+//         el2
+//
+// When requesting el2.injector.get(token), we should check in the following order and return the
+// first found value:
+// - el2.injector.get(token, default)
+// - el1.injector.get(token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) -> do not check the module
+// - mod2.injector.get(token, default)
+export const NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR = {};
+
+export function resolveDep(
+    view: ViewData, elDef: NodeDef, allowPrivateServices: boolean, depDef: DepDef,
+    notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
+  if (depDef.flags & DepFlags.Value) {
+    return depDef.token;
+  }
+  const startView = view;
+  if (depDef.flags & DepFlags.Optional) {
+    notFoundValue = null;
+  }
+  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 !;
+  }
+
+  let searchView: ViewData|null = view;
+  while (searchView) {
+    if (elDef) {
+      switch (tokenKey) {
+        case RendererV1TokenKey: {
+          const compView = findCompView(searchView, elDef, allowPrivateServices);
+          return createRendererV1(compView);
+        }
+        case Renderer2TokenKey: {
+          const compView = findCompView(searchView, elDef, allowPrivateServices);
+          return compView.renderer;
+        }
+        case ElementRefTokenKey:
+          return new ElementRef(asElementData(searchView, elDef.nodeIndex).renderElement);
+        case ViewContainerRefTokenKey:
+          return asElementData(searchView, elDef.nodeIndex).viewContainer;
+        case TemplateRefTokenKey: {
+          if (elDef.element !.template) {
+            return asElementData(searchView, elDef.nodeIndex).template;
+          }
+          break;
+        }
+        case ChangeDetectorRefTokenKey: {
+          let cdView = findCompView(searchView, elDef, allowPrivateServices);
+          return createChangeDetectorRef(cdView);
+        }
+        case InjectorRefTokenKey:
+        case INJECTORRefTokenKey:
+          return createInjector(searchView, elDef);
+        default:
+          const providerDef =
+              (allowPrivateServices ? elDef.element !.allProviders :
+                                      elDef.element !.publicProviders) ![tokenKey];
+          if (providerDef) {
+            let providerData = asProviderData(searchView, providerDef.nodeIndex);
+            if (!providerData) {
+              providerData = {instance: _createProviderInstance(searchView, providerDef)};
+              searchView.nodes[providerDef.nodeIndex] = providerData as any;
+            }
+            return providerData.instance;
+          }
+      }
+    }
+
+    allowPrivateServices = isComponentView(searchView);
+    elDef = viewParentEl(searchView) !;
+    searchView = searchView.parent !;
+
+    if (depDef.flags & DepFlags.Self) {
+      searchView = null;
+    }
+  }
+
+  const value = startView.root.injector.get(depDef.token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR);
+
+  if (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR ||
+      notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) {
+    // Return the value from the root element injector when
+    // - it provides it
+    //   (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
+    // - the module injector should not be checked
+    //   (notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
+    return value;
+  }
+
+  return startView.root.ngModule.injector.get(depDef.token, notFoundValue);
+}
+
+function findCompView(view: ViewData, elDef: NodeDef, allowPrivateServices: boolean) {
+  let compView: ViewData;
+  if (allowPrivateServices) {
+    compView = asElementData(view, elDef.nodeIndex).componentView;
+  } else {
+    compView = view;
+    while (compView.parent && !isComponentView(compView)) {
+      compView = compView.parent;
+    }
+  }
+  return compView;
+}
+
+function updateProp(
+    view: ViewData, providerData: ProviderData, def: NodeDef, bindingIdx: number, value: any,
+    changes: SimpleChanges): SimpleChanges {
+  if (def.flags & NodeFlags.Component) {
+    const compView = asElementData(view, def.parent !.nodeIndex).componentView;
+    if (compView.def.flags & ViewFlags.OnPush) {
+      compView.state |= ViewState.ChecksEnabled;
+    }
+  }
+  const binding = def.bindings[bindingIdx];
+  const propName = binding.name !;
+  // Note: This is still safe with Closure Compiler as
+  // the user passed in the property name as an object has to `providerDef`,
+  // so Closure Compiler will have renamed the property correctly already.
+  providerData.instance[propName] = value;
+  if (def.flags & NodeFlags.OnChanges) {
+    changes = changes || {};
+    const oldValue = WrappedValue.unwrap(view.oldValues[def.bindingIndex + bindingIdx]);
+    const binding = def.bindings[bindingIdx];
+    changes[binding.nonMinifiedName !] =
+        new SimpleChange(oldValue, value, (view.state & ViewState.FirstCheck) !== 0);
+  }
+  view.oldValues[def.bindingIndex + bindingIdx] = value;
+  return changes;
+}
+
+// This function calls the ngAfterContentCheck, ngAfterContentInit,
+// ngAfterViewCheck, and ngAfterViewInit lifecycle hooks (depending on the node
+// flags in lifecycle). Unlike ngDoCheck, ngOnChanges and ngOnInit, which are
+// called during a pre-order traversal of the view tree (that is calling the
+// parent hooks before the child hooks) these events are sent in using a
+// post-order traversal of the tree (children before parents). This changes the
+// meaning of initIndex in the view state. For ngOnInit, initIndex tracks the
+// expected nodeIndex which a ngOnInit should be called. When sending
+// ngAfterContentInit and ngAfterViewInit it is the expected count of
+// ngAfterContentInit or ngAfterViewInit methods that have been called. This
+// ensure that despite being called recursively or after picking up after an
+// exception, the ngAfterContentInit or ngAfterViewInit will be called on the
+// correct nodes. Consider for example, the following (where E is an element
+// and D is a directive)
+//  Tree:       pre-order index  post-order index
+//    E1        0                6
+//      E2      1                1
+//       D3     2                0
+//      E4      3                5
+//       E5     4                4
+//        E6    5                2
+//        E7    6                3
+// As can be seen, the post-order index has an unclear relationship to the
+// pre-order index (postOrderIndex === preOrderIndex - parentCount +
+// childCount). Since number of calls to ngAfterContentInit and ngAfterViewInit
+// are stable (will be the same for the same view regardless of exceptions or
+// recursion) we just need to count them which will roughly correspond to the
+// post-order index (it skips elements and directives that do not have
+// lifecycle hooks).
+//
+// For example, if an exception is raised in the E6.onAfterViewInit() the
+// initIndex is left at 3 (by shouldCallLifecycleInitHook() which set it to
+// initIndex + 1). When checkAndUpdateView() is called again D3, E2 and E6 will
+// not have their ngAfterViewInit() called but, starting with E7, the rest of
+// the view will begin getting ngAfterViewInit() called until a check and
+// pass is complete.
+//
+// This algorthim also handles recursion. Consider if E4's ngAfterViewInit()
+// indirectly calls E1's ChangeDetectorRef.detectChanges(). The expected
+// initIndex is set to 6, the recusive checkAndUpdateView() starts walk again.
+// D3, E2, E6, E7, E5 and E4 are skipped, ngAfterViewInit() is called on E1.
+// When the recursion returns the initIndex will be 7 so E1 is skipped as it
+// has already been called in the recursively called checkAnUpdateView().
+export function callLifecycleHooksChildrenFirst(view: ViewData, lifecycles: NodeFlags) {
+  if (!(view.def.nodeFlags & lifecycles)) {
+    return;
+  }
+  const nodes = view.def.nodes;
+  let initIndex = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    const nodeDef = nodes[i];
+    let parent = nodeDef.parent;
+    if (!parent && nodeDef.flags & lifecycles) {
+      // matching root node (e.g. a pipe)
+      callProviderLifecycles(view, i, nodeDef.flags & lifecycles, initIndex++);
+    }
+    if ((nodeDef.childFlags & lifecycles) === 0) {
+      // no child matches one of the lifecycles
+      i += nodeDef.childCount;
+    }
+    while (parent && (parent.flags & NodeFlags.TypeElement) &&
+           i === parent.nodeIndex + parent.childCount) {
+      // last child of an element
+      if (parent.directChildFlags & lifecycles) {
+        initIndex = callElementProvidersLifecycles(view, parent, lifecycles, initIndex);
+      }
+      parent = parent.parent;
+    }
+  }
+}
+
+function callElementProvidersLifecycles(
+    view: ViewData, elDef: NodeDef, lifecycles: NodeFlags, initIndex: number): number {
+  for (let i = elDef.nodeIndex + 1; i <= elDef.nodeIndex + elDef.childCount; i++) {
+    const nodeDef = view.def.nodes[i];
+    if (nodeDef.flags & lifecycles) {
+      callProviderLifecycles(view, i, nodeDef.flags & lifecycles, initIndex++);
+    }
+    // only visit direct children
+    i += nodeDef.childCount;
+  }
+  return initIndex;
+}
+
+function callProviderLifecycles(
+    view: ViewData, index: number, lifecycles: NodeFlags, initIndex: number) {
+  const providerData = asProviderData(view, index);
+  if (!providerData) {
+    return;
+  }
+  const provider = providerData.instance;
+  if (!provider) {
+    return;
+  }
+  Services.setCurrentNode(view, index);
+  if (lifecycles & NodeFlags.AfterContentInit &&
+      shouldCallLifecycleInitHook(view, ViewState.InitState_CallingAfterContentInit, initIndex)) {
+    provider.ngAfterContentInit();
+  }
+  if (lifecycles & NodeFlags.AfterContentChecked) {
+    provider.ngAfterContentChecked();
+  }
+  if (lifecycles & NodeFlags.AfterViewInit &&
+      shouldCallLifecycleInitHook(view, ViewState.InitState_CallingAfterViewInit, initIndex)) {
+    provider.ngAfterViewInit();
+  }
+  if (lifecycles & NodeFlags.AfterViewChecked) {
+    provider.ngAfterViewChecked();
+  }
+  if (lifecycles & NodeFlags.OnDestroy) {
+    provider.ngOnDestroy();
+  }
+}
diff --git a/packages/core/src/view/pure_expression.ts b/packages/core/src/view/pure_expression.ts
new file mode 100644
index 000000000000..8eb27f05b123
--- /dev/null
+++ b/packages/core/src/view/pure_expression.ts
@@ -0,0 +1,201 @@
+/**
+ * @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 {BindingDef, BindingFlags, NodeDef, NodeFlags, PureExpressionData, ViewData, asPureExpressionData} from './types';
+import {calcBindingFlags, checkAndUpdateBinding} from './util';
+
+export function purePipeDef(checkIndex: number, argCount: number): NodeDef {
+  // argCount + 1 to include the pipe as first arg
+  return _pureExpressionDef(NodeFlags.TypePurePipe, checkIndex, new Array(argCount + 1));
+}
+
+export function pureArrayDef(checkIndex: number, argCount: number): NodeDef {
+  return _pureExpressionDef(NodeFlags.TypePureArray, checkIndex, new Array(argCount));
+}
+
+export function pureObjectDef(checkIndex: number, 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, checkIndex, propertyNames);
+}
+
+function _pureExpressionDef(
+    flags: NodeFlags, checkIndex: number, propertyNames: string[]): NodeDef {
+  const bindings: BindingDef[] = new Array(propertyNames.length);
+  for (let i = 0; i < propertyNames.length; i++) {
+    const prop = propertyNames[i];
+    bindings[i] = {
+      flags: BindingFlags.TypeProperty,
+      name: prop,
+      ns: null,
+      nonMinifiedName: prop,
+      securityContext: null,
+      suffix: null
+    };
+  }
+  return {
+    // will bet set by the view definition
+    nodeIndex: -1,
+    parent: null,
+    renderParent: null,
+    bindingIndex: -1,
+    outputIndex: -1,
+    // regular values
+    checkIndex,
+    flags,
+    childFlags: 0,
+    directChildFlags: 0,
+    childMatchedQueries: 0,
+    matchedQueries: {},
+    matchedQueryIds: 0,
+    references: {},
+    ngContentIndex: -1,
+    childCount: 0, bindings,
+    bindingFlags: calcBindingFlags(bindings),
+    outputs: [],
+    element: null,
+    provider: null,
+    text: null,
+    query: null,
+    ngContent: null
+  };
+}
+
+export function createPureExpression(view: ViewData, def: NodeDef): PureExpressionData {
+  return {value: undefined};
+}
+
+export function checkAndUpdatePureExpressionInline(
+    view: ViewData, def: NodeDef, v0: any, v1: any, v2: any, v3: any, v4: any, v5: any, v6: any,
+    v7: any, v8: any, v9: any): boolean {
+  const bindings = def.bindings;
+  let changed = false;
+  const bindLen = bindings.length;
+  if (bindLen > 0 && checkAndUpdateBinding(view, def, 0, v0)) changed = true;
+  if (bindLen > 1 && checkAndUpdateBinding(view, def, 1, v1)) changed = true;
+  if (bindLen > 2 && checkAndUpdateBinding(view, def, 2, v2)) changed = true;
+  if (bindLen > 3 && checkAndUpdateBinding(view, def, 3, v3)) changed = true;
+  if (bindLen > 4 && checkAndUpdateBinding(view, def, 4, v4)) changed = true;
+  if (bindLen > 5 && checkAndUpdateBinding(view, def, 5, v5)) changed = true;
+  if (bindLen > 6 && checkAndUpdateBinding(view, def, 6, v6)) changed = true;
+  if (bindLen > 7 && checkAndUpdateBinding(view, def, 7, v7)) changed = true;
+  if (bindLen > 8 && checkAndUpdateBinding(view, def, 8, v8)) changed = true;
+  if (bindLen > 9 && checkAndUpdateBinding(view, def, 9, v9)) changed = true;
+
+  if (changed) {
+    const data = asPureExpressionData(view, def.nodeIndex);
+    let value: any;
+    switch (def.flags & NodeFlags.Types) {
+      case NodeFlags.TypePureArray:
+        value = new Array(bindings.length);
+        if (bindLen > 0) value[0] = v0;
+        if (bindLen > 1) value[1] = v1;
+        if (bindLen > 2) value[2] = v2;
+        if (bindLen > 3) value[3] = v3;
+        if (bindLen > 4) value[4] = v4;
+        if (bindLen > 5) value[5] = v5;
+        if (bindLen > 6) value[6] = v6;
+        if (bindLen > 7) value[7] = v7;
+        if (bindLen > 8) value[8] = v8;
+        if (bindLen > 9) value[9] = v9;
+        break;
+      case NodeFlags.TypePureObject:
+        value = {};
+        if (bindLen > 0) value[bindings[0].name !] = v0;
+        if (bindLen > 1) value[bindings[1].name !] = v1;
+        if (bindLen > 2) value[bindings[2].name !] = v2;
+        if (bindLen > 3) value[bindings[3].name !] = v3;
+        if (bindLen > 4) value[bindings[4].name !] = v4;
+        if (bindLen > 5) value[bindings[5].name !] = v5;
+        if (bindLen > 6) value[bindings[6].name !] = v6;
+        if (bindLen > 7) value[bindings[7].name !] = v7;
+        if (bindLen > 8) value[bindings[8].name !] = v8;
+        if (bindLen > 9) value[bindings[9].name !] = v9;
+        break;
+      case NodeFlags.TypePurePipe:
+        const pipe = v0;
+        switch (bindLen) {
+          case 1:
+            value = pipe.transform(v0);
+            break;
+          case 2:
+            value = pipe.transform(v1);
+            break;
+          case 3:
+            value = pipe.transform(v1, v2);
+            break;
+          case 4:
+            value = pipe.transform(v1, v2, v3);
+            break;
+          case 5:
+            value = pipe.transform(v1, v2, v3, v4);
+            break;
+          case 6:
+            value = pipe.transform(v1, v2, v3, v4, v5);
+            break;
+          case 7:
+            value = pipe.transform(v1, v2, v3, v4, v5, v6);
+            break;
+          case 8:
+            value = pipe.transform(v1, v2, v3, v4, v5, v6, v7);
+            break;
+          case 9:
+            value = pipe.transform(v1, v2, v3, v4, v5, v6, v7, v8);
+            break;
+          case 10:
+            value = pipe.transform(v1, v2, v3, v4, v5, v6, v7, v8, v9);
+            break;
+        }
+        break;
+    }
+    data.value = value;
+  }
+  return changed;
+}
+
+export function checkAndUpdatePureExpressionDynamic(
+    view: ViewData, def: NodeDef, values: any[]): boolean {
+  const bindings = def.bindings;
+  let changed = false;
+  for (let i = 0; i < values.length; i++) {
+    // Note: We need to loop over all values, so that
+    // the old values are updates as well!
+    if (checkAndUpdateBinding(view, def, i, values[i])) {
+      changed = true;
+    }
+  }
+  if (changed) {
+    const data = asPureExpressionData(view, def.nodeIndex);
+    let value: any;
+    switch (def.flags & NodeFlags.Types) {
+      case NodeFlags.TypePureArray:
+        value = values;
+        break;
+      case NodeFlags.TypePureObject:
+        value = {};
+        for (let i = 0; i < values.length; i++) {
+          value[bindings[i].name !] = values[i];
+        }
+        break;
+      case NodeFlags.TypePurePipe:
+        const pipe = values[0];
+        const params = values.slice(1);
+        value = (<any>pipe.transform)(...params);
+        break;
+    }
+    data.value = value;
+  }
+  return changed;
+}
diff --git a/packages/core/src/view/query.ts b/packages/core/src/view/query.ts
new file mode 100644
index 000000000000..9e734b4be33d
--- /dev/null
+++ b/packages/core/src/view/query.ts
@@ -0,0 +1,193 @@
+/**
+ * @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} from '../linker/element_ref';
+import {QueryList} from '../linker/query_list';
+
+import {NodeDef, NodeFlags, QueryBindingDef, QueryBindingType, QueryDef, QueryValueType, ViewData, asElementData, asProviderData, asQueryList} from './types';
+import {declaredViewContainer, filterQueryId, isEmbeddedView} from './util';
+
+export function queryDef(
+    flags: NodeFlags, id: number, bindings: {[propName: string]: QueryBindingType}): NodeDef {
+  let bindingDefs: QueryBindingDef[] = [];
+  for (let propName in bindings) {
+    const bindingType = bindings[propName];
+    bindingDefs.push({propName, bindingType});
+  }
+
+  return {
+    // will bet set by the view definition
+    nodeIndex: -1,
+    parent: null,
+    renderParent: null,
+    bindingIndex: -1,
+    outputIndex: -1,
+    // regular values
+    // TODO(vicb): check
+    checkIndex: -1, flags,
+    childFlags: 0,
+    directChildFlags: 0,
+    childMatchedQueries: 0,
+    ngContentIndex: -1,
+    matchedQueries: {},
+    matchedQueryIds: 0,
+    references: {},
+    childCount: 0,
+    bindings: [],
+    bindingFlags: 0,
+    outputs: [],
+    element: null,
+    provider: null,
+    text: null,
+    query: {id, filterId: filterQueryId(id), bindings: bindingDefs},
+    ngContent: null
+  };
+}
+
+export function createQuery(): QueryList<any> {
+  return new QueryList();
+}
+
+export function dirtyParentQueries(view: ViewData) {
+  const queryIds = view.def.nodeMatchedQueries;
+  while (view.parent && isEmbeddedView(view)) {
+    let tplDef = view.parentNodeDef !;
+    view = view.parent;
+    // content queries
+    const end = tplDef.nodeIndex + tplDef.childCount;
+    for (let i = 0; i <= end; i++) {
+      const nodeDef = view.def.nodes[i];
+      if ((nodeDef.flags & NodeFlags.TypeContentQuery) &&
+          (nodeDef.flags & NodeFlags.DynamicQuery) &&
+          (nodeDef.query !.filterId & queryIds) === nodeDef.query !.filterId) {
+        asQueryList(view, i).setDirty();
+      }
+      if ((nodeDef.flags & NodeFlags.TypeElement && i + nodeDef.childCount < tplDef.nodeIndex) ||
+          !(nodeDef.childFlags & NodeFlags.TypeContentQuery) ||
+          !(nodeDef.childFlags & NodeFlags.DynamicQuery)) {
+        // skip elements that don't contain the template element or no query.
+        i += nodeDef.childCount;
+      }
+    }
+  }
+
+  // view queries
+  if (view.def.nodeFlags & NodeFlags.TypeViewQuery) {
+    for (let i = 0; i < view.def.nodes.length; i++) {
+      const nodeDef = view.def.nodes[i];
+      if ((nodeDef.flags & NodeFlags.TypeViewQuery) && (nodeDef.flags & NodeFlags.DynamicQuery)) {
+        asQueryList(view, i).setDirty();
+      }
+      // only visit the root nodes
+      i += nodeDef.childCount;
+    }
+  }
+}
+
+export function checkAndUpdateQuery(view: ViewData, nodeDef: NodeDef) {
+  const queryList = asQueryList(view, nodeDef.nodeIndex);
+  if (!queryList.dirty) {
+    return;
+  }
+  let directiveInstance: any;
+  let newValues: any[] = undefined !;
+  if (nodeDef.flags & NodeFlags.TypeContentQuery) {
+    const elementDef = nodeDef.parent !.parent !;
+    newValues = calcQueryValues(
+        view, elementDef.nodeIndex, elementDef.nodeIndex + elementDef.childCount, nodeDef.query !,
+        []);
+    directiveInstance = asProviderData(view, nodeDef.parent !.nodeIndex).instance;
+  } else if (nodeDef.flags & NodeFlags.TypeViewQuery) {
+    newValues = calcQueryValues(view, 0, view.def.nodes.length - 1, nodeDef.query !, []);
+    directiveInstance = view.component;
+  }
+  queryList.reset(newValues);
+  const bindings = nodeDef.query !.bindings;
+  let notify = false;
+  for (let i = 0; i < bindings.length; i++) {
+    const binding = bindings[i];
+    let boundValue: any;
+    switch (binding.bindingType) {
+      case QueryBindingType.First:
+        boundValue = queryList.first;
+        break;
+      case QueryBindingType.All:
+        boundValue = queryList;
+        notify = true;
+        break;
+    }
+    directiveInstance[binding.propName] = boundValue;
+  }
+  if (notify) {
+    queryList.notifyOnChanges();
+  }
+}
+
+function calcQueryValues(
+    view: ViewData, startIndex: number, endIndex: number, queryDef: QueryDef,
+    values: any[]): any[] {
+  for (let i = startIndex; i <= endIndex; i++) {
+    const nodeDef = view.def.nodes[i];
+    const valueType = nodeDef.matchedQueries[queryDef.id];
+    if (valueType != null) {
+      values.push(getQueryValue(view, nodeDef, valueType));
+    }
+    if (nodeDef.flags & NodeFlags.TypeElement && nodeDef.element !.template &&
+        (nodeDef.element !.template !.nodeMatchedQueries & queryDef.filterId) ===
+            queryDef.filterId) {
+      const elementData = asElementData(view, i);
+      // check embedded views that were attached at the place of their template,
+      // but process child nodes first if some match the query (see issue #16568)
+      if ((nodeDef.childMatchedQueries & queryDef.filterId) === queryDef.filterId) {
+        calcQueryValues(view, i + 1, i + nodeDef.childCount, queryDef, values);
+        i += nodeDef.childCount;
+      }
+      if (nodeDef.flags & NodeFlags.EmbeddedViews) {
+        const embeddedViews = elementData.viewContainer !._embeddedViews;
+        for (let k = 0; k < embeddedViews.length; k++) {
+          const embeddedView = embeddedViews[k];
+          const dvc = declaredViewContainer(embeddedView);
+          if (dvc && dvc === elementData) {
+            calcQueryValues(embeddedView, 0, embeddedView.def.nodes.length - 1, queryDef, values);
+          }
+        }
+      }
+      const projectedViews = elementData.template._projectedViews;
+      if (projectedViews) {
+        for (let k = 0; k < projectedViews.length; k++) {
+          const projectedView = projectedViews[k];
+          calcQueryValues(projectedView, 0, projectedView.def.nodes.length - 1, queryDef, values);
+        }
+      }
+    }
+    if ((nodeDef.childMatchedQueries & queryDef.filterId) !== queryDef.filterId) {
+      // if no child matches the query, skip the children.
+      i += nodeDef.childCount;
+    }
+  }
+  return values;
+}
+
+export function getQueryValue(
+    view: ViewData, nodeDef: NodeDef, queryValueType: QueryValueType): any {
+  if (queryValueType != null) {
+    // a match
+    switch (queryValueType) {
+      case QueryValueType.RenderElement:
+        return asElementData(view, nodeDef.nodeIndex).renderElement;
+      case QueryValueType.ElementRef:
+        return new ElementRef(asElementData(view, nodeDef.nodeIndex).renderElement);
+      case QueryValueType.TemplateRef:
+        return asElementData(view, nodeDef.nodeIndex).template;
+      case QueryValueType.ViewContainerRef:
+        return asElementData(view, nodeDef.nodeIndex).viewContainer;
+      case QueryValueType.Provider:
+        return asProviderData(view, nodeDef.nodeIndex).instance;
+    }
+  }
+}
diff --git a/packages/core/src/view/refs.ts b/packages/core/src/view/refs.ts
new file mode 100644
index 000000000000..4aa2eb4afb8c
--- /dev/null
+++ b/packages/core/src/view/refs.ts
@@ -0,0 +1,525 @@
+/**
+ * @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 {ApplicationRef} from '../application_ref';
+import {ChangeDetectorRef} from '../change_detection/change_detection';
+import {InjectFlags, Injector} from '../di/injector';
+import {ComponentFactory, ComponentRef} from '../linker/component_factory';
+import {ComponentFactoryBoundToModule, ComponentFactoryResolver} from '../linker/component_factory_resolver';
+import {ElementRef} from '../linker/element_ref';
+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 {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();
+
+// Attention: this function is called as top level function.
+// Putting any logic in here will destroy closure tree shaking!
+export function createComponentFactory(
+    selector: string, componentType: Type<any>, viewDefFactory: ViewDefinitionFactory,
+    inputs: {[propName: string]: string} | null, outputs: {[propName: string]: string},
+    ngContentSelectors: string[]): ComponentFactory<any> {
+  return new ComponentFactory_(
+      selector, componentType, viewDefFactory, inputs, outputs, ngContentSelectors);
+}
+
+export function getComponentViewDefinitionFactory(componentFactory: ComponentFactory<any>):
+    ViewDefinitionFactory {
+  return (componentFactory as ComponentFactory_).viewDefFactory;
+}
+
+class ComponentFactory_ extends ComponentFactory<any> {
+  /**
+   * @internal
+   */
+  viewDefFactory: ViewDefinitionFactory;
+
+  constructor(
+      public selector: string, public componentType: Type<any>,
+      viewDefFactory: ViewDefinitionFactory, private _inputs: {[propName: string]: string}|null,
+      private _outputs: {[propName: string]: string}, public ngContentSelectors: string[]) {
+    // Attention: this ctor is called as top level function.
+    // Putting any logic in here will destroy closure tree shaking!
+    super();
+    this.viewDefFactory = viewDefFactory;
+  }
+
+  get inputs() {
+    const inputsArr: {propName: string, templateName: string}[] = [];
+    const inputs = this._inputs !;
+    for (let propName in inputs) {
+      const templateName = inputs[propName];
+      inputsArr.push({propName, templateName});
+    }
+    return inputsArr;
+  }
+
+  get outputs() {
+    const outputsArr: {propName: string, templateName: string}[] = [];
+    for (let propName in this._outputs) {
+      const templateName = this._outputs[propName];
+      outputsArr.push({propName, templateName});
+    }
+    return outputsArr;
+  }
+
+  /**
+   * Creates a new component.
+   */
+  create(
+      injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any,
+      ngModule?: NgModuleRef<any>): ComponentRef<any> {
+    if (!ngModule) {
+      throw new Error('ngModule should be provided');
+    }
+    const viewDef = resolveDefinition(this.viewDefFactory);
+    const componentNodeIndex = viewDef.nodes[0].element !.componentProvider !.nodeIndex;
+    const view = Services.createRootView(
+        injector, projectableNodes || [], rootSelectorOrNode, viewDef, ngModule, EMPTY_CONTEXT);
+    const component = asProviderData(view, componentNodeIndex).instance;
+    if (rootSelectorOrNode) {
+      view.renderer.setAttribute(asElementData(view, 0).renderElement, 'ng-version', VERSION.full);
+    }
+
+    return new ComponentRef_(view, new ViewRef_(view), component);
+  }
+}
+
+class ComponentRef_ extends ComponentRef<any> {
+  public readonly hostView: ViewRef;
+  public readonly instance: any;
+  public readonly changeDetectorRef: ChangeDetectorRef;
+  private _elDef: NodeDef;
+  constructor(private _view: ViewData, private _viewRef: ViewRef, private _component: any) {
+    super();
+    this._elDef = this._view.def.nodes[0];
+    this.hostView = _viewRef;
+    this.changeDetectorRef = _viewRef;
+    this.instance = _component;
+  }
+  get location(): ElementRef {
+    return new ElementRef(asElementData(this._view, this._elDef.nodeIndex).renderElement);
+  }
+  get injector(): Injector { return new Injector_(this._view, this._elDef); }
+  get componentType(): Type<any> { return <any>this._component.constructor; }
+
+  destroy(): void { this._viewRef.destroy(); }
+  onDestroy(callback: Function): void { this._viewRef.onDestroy(callback); }
+}
+
+export function createViewContainerData(
+    view: ViewData, elDef: NodeDef, elData: ElementData): ViewContainerData {
+  return new ViewContainerRef_(view, elDef, elData);
+}
+
+class ViewContainerRef_ implements ViewContainerData {
+  /**
+   * @internal
+   */
+  _embeddedViews: ViewData[] = [];
+  constructor(private _view: ViewData, private _elDef: NodeDef, private _data: ElementData) {}
+
+  get element(): ElementRef { return new ElementRef(this._data.renderElement); }
+
+  get injector(): Injector { return new Injector_(this._view, this._elDef); }
+
+  /** @deprecated No replacement */
+  get parentInjector(): Injector {
+    let view = this._view;
+    let elDef = this._elDef.parent;
+    while (!elDef && view) {
+      elDef = viewParentEl(view);
+      view = view.parent !;
+    }
+
+    return view ? new Injector_(view, elDef) : new Injector_(this._view, null);
+  }
+
+  clear(): void {
+    const len = this._embeddedViews.length;
+    for (let i = len - 1; i >= 0; i--) {
+      const view = detachEmbeddedView(this._data, i) !;
+      Services.destroyView(view);
+    }
+  }
+
+  get(index: number): ViewRef|null {
+    const view = this._embeddedViews[index];
+    if (view) {
+      const ref = new ViewRef_(view);
+      ref.attachToViewContainerRef(this);
+      return ref;
+    }
+    return null;
+  }
+
+  get length(): number { return this._embeddedViews.length; }
+
+  createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number):
+      EmbeddedViewRef<C> {
+    const viewRef = templateRef.createEmbeddedView(context || <any>{});
+    this.insert(viewRef, index);
+    return viewRef;
+  }
+
+  createComponent<C>(
+      componentFactory: ComponentFactory<C>, index?: number, injector?: Injector,
+      projectableNodes?: any[][], ngModuleRef?: NgModuleRef<any>): ComponentRef<C> {
+    const contextInjector = injector || this.parentInjector;
+    if (!ngModuleRef && !(componentFactory instanceof ComponentFactoryBoundToModule)) {
+      ngModuleRef = contextInjector.get(NgModuleRef);
+    }
+    const componentRef =
+        componentFactory.create(contextInjector, projectableNodes, undefined, ngModuleRef);
+    this.insert(componentRef.hostView, index);
+    return componentRef;
+  }
+
+  insert(viewRef: ViewRef, index?: number): ViewRef {
+    if (viewRef.destroyed) {
+      throw new Error('Cannot insert a destroyed View in a ViewContainer!');
+    }
+    const viewRef_ = <ViewRef_>viewRef;
+    const viewData = viewRef_._view;
+    attachEmbeddedView(this._view, this._data, index, viewData);
+    viewRef_.attachToViewContainerRef(this);
+    return viewRef;
+  }
+
+  move(viewRef: ViewRef_, currentIndex: number): ViewRef {
+    if (viewRef.destroyed) {
+      throw new Error('Cannot move a destroyed View in a ViewContainer!');
+    }
+    const previousIndex = this._embeddedViews.indexOf(viewRef._view);
+    moveEmbeddedView(this._data, previousIndex, currentIndex);
+    return viewRef;
+  }
+
+  indexOf(viewRef: ViewRef): number {
+    return this._embeddedViews.indexOf((<ViewRef_>viewRef)._view);
+  }
+
+  remove(index?: number): void {
+    const viewData = detachEmbeddedView(this._data, index);
+    if (viewData) {
+      Services.destroyView(viewData);
+    }
+  }
+
+  detach(index?: number): ViewRef|null {
+    const view = detachEmbeddedView(this._data, index);
+    return view ? new ViewRef_(view) : null;
+  }
+}
+
+export function createChangeDetectorRef(view: ViewData): ChangeDetectorRef {
+  return new ViewRef_(view);
+}
+
+export class ViewRef_ implements EmbeddedViewRef<any>, InternalViewRef {
+  /** @internal */
+  _view: ViewData;
+  private _viewContainerRef: ViewContainerRef|null;
+  private _appRef: ApplicationRef|null;
+
+  constructor(_view: ViewData) {
+    this._view = _view;
+    this._viewContainerRef = null;
+    this._appRef = null;
+  }
+
+  get rootNodes(): any[] { return rootRenderNodes(this._view); }
+
+  get context() { return this._view.context; }
+
+  get destroyed(): boolean { return (this._view.state & ViewState.Destroyed) !== 0; }
+
+  markForCheck(): void { markParentViewsForCheck(this._view); }
+  detach(): void { this._view.state &= ~ViewState.Attached; }
+  detectChanges(): void {
+    const fs = this._view.root.rendererFactory;
+    if (fs.begin) {
+      fs.begin();
+    }
+    try {
+      Services.checkAndUpdateView(this._view);
+    } finally {
+      if (fs.end) {
+        fs.end();
+      }
+    }
+  }
+  checkNoChanges(): void { Services.checkNoChangesView(this._view); }
+
+  reattach(): void { this._view.state |= ViewState.Attached; }
+  onDestroy(callback: Function) {
+    if (!this._view.disposables) {
+      this._view.disposables = [];
+    }
+    this._view.disposables.push(<any>callback);
+  }
+
+  destroy() {
+    if (this._appRef) {
+      this._appRef.detachView(this);
+    } else if (this._viewContainerRef) {
+      this._viewContainerRef.detach(this._viewContainerRef.indexOf(this));
+    }
+    Services.destroyView(this._view);
+  }
+
+  detachFromAppRef() {
+    this._appRef = null;
+    renderDetachView(this._view);
+    Services.dirtyParentQueries(this._view);
+  }
+
+  attachToAppRef(appRef: ApplicationRef) {
+    if (this._viewContainerRef) {
+      throw new Error('This view is already attached to a ViewContainer!');
+    }
+    this._appRef = appRef;
+  }
+
+  attachToViewContainerRef(vcRef: ViewContainerRef) {
+    if (this._appRef) {
+      throw new Error('This view is already attached directly to the ApplicationRef!');
+    }
+    this._viewContainerRef = vcRef;
+  }
+}
+
+export function createTemplateData(view: ViewData, def: NodeDef): TemplateData {
+  return new TemplateRef_(view, def);
+}
+
+class TemplateRef_ extends TemplateRef<any> implements TemplateData {
+  /**
+   * @internal
+   */
+  // TODO(issue/24571): remove '!'.
+  _projectedViews !: ViewData[];
+
+  constructor(private _parentView: ViewData, private _def: NodeDef) { super(); }
+
+  createEmbeddedView(context: any): EmbeddedViewRef<any> {
+    return new ViewRef_(Services.createEmbeddedView(
+        this._parentView, this._def, this._def.element !.template !, context));
+  }
+
+  get elementRef(): ElementRef {
+    return new ElementRef(asElementData(this._parentView, this._def.nodeIndex).renderElement);
+  }
+}
+
+export function createInjector(view: ViewData, elDef: NodeDef): Injector {
+  return new Injector_(view, elDef);
+}
+
+class Injector_ implements Injector {
+  constructor(private view: ViewData, private elDef: NodeDef|null) {}
+  get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
+    const allowPrivateServices =
+        this.elDef ? (this.elDef.flags & NodeFlags.ComponentView) !== 0 : false;
+    return Services.resolveDep(
+        this.view, this.elDef, allowPrivateServices,
+        {flags: DepFlags.None, token, tokenKey: tokenKey(token)}, notFoundValue);
+  }
+}
+
+export function nodeValue(view: ViewData, index: number): any {
+  const def = view.def.nodes[index];
+  if (def.flags & NodeFlags.TypeElement) {
+    const elData = asElementData(view, def.nodeIndex);
+    return def.element !.template ? elData.template : elData.renderElement;
+  } else if (def.flags & NodeFlags.TypeText) {
+    return asTextData(view, def.nodeIndex).renderText;
+  } else if (def.flags & (NodeFlags.CatProvider | NodeFlags.TypePipe)) {
+    return asProviderData(view, def.nodeIndex).instance;
+  }
+  throw new Error(`Illegal state: read nodeValue for node index ${index}`);
+}
+
+export function createRendererV1(view: ViewData): RendererV1 {
+  return new RendererAdapter(view.renderer);
+}
+
+class RendererAdapter implements RendererV1 {
+  constructor(private delegate: Renderer2) {}
+  selectRootElement(selectorOrNode: string|Element): Element {
+    return this.delegate.selectRootElement(selectorOrNode);
+  }
+
+  createElement(parent: Element|DocumentFragment, namespaceAndName: string): Element {
+    const [ns, name] = splitNamespace(namespaceAndName);
+    const el = this.delegate.createElement(name, ns);
+    if (parent) {
+      this.delegate.appendChild(parent, el);
+    }
+    return el;
+  }
+
+  createViewRoot(hostElement: Element): Element|DocumentFragment { return hostElement; }
+
+  createTemplateAnchor(parentElement: Element|DocumentFragment): Comment {
+    const comment = this.delegate.createComment('');
+    if (parentElement) {
+      this.delegate.appendChild(parentElement, comment);
+    }
+    return comment;
+  }
+
+  createText(parentElement: Element|DocumentFragment, value: string): any {
+    const node = this.delegate.createText(value);
+    if (parentElement) {
+      this.delegate.appendChild(parentElement, node);
+    }
+    return node;
+  }
+
+  projectNodes(parentElement: Element|DocumentFragment, nodes: Node[]) {
+    for (let i = 0; i < nodes.length; i++) {
+      this.delegate.appendChild(parentElement, nodes[i]);
+    }
+  }
+
+  attachViewAfter(node: Node, viewRootNodes: Node[]) {
+    const parentElement = this.delegate.parentNode(node);
+    const nextSibling = this.delegate.nextSibling(node);
+    for (let i = 0; i < viewRootNodes.length; i++) {
+      this.delegate.insertBefore(parentElement, viewRootNodes[i], nextSibling);
+    }
+  }
+
+  detachView(viewRootNodes: (Element|Text|Comment)[]) {
+    for (let i = 0; i < viewRootNodes.length; i++) {
+      const node = viewRootNodes[i];
+      const parentElement = this.delegate.parentNode(node);
+      this.delegate.removeChild(parentElement, node);
+    }
+  }
+
+  destroyView(hostElement: Element|DocumentFragment, viewAllNodes: Node[]) {
+    for (let i = 0; i < viewAllNodes.length; i++) {
+      this.delegate.destroyNode !(viewAllNodes[i]);
+    }
+  }
+
+  listen(renderElement: any, name: string, callback: Function): Function {
+    return this.delegate.listen(renderElement, name, <any>callback);
+  }
+
+  listenGlobal(target: string, name: string, callback: Function): Function {
+    return this.delegate.listen(target, name, <any>callback);
+  }
+
+  setElementProperty(
+      renderElement: Element|DocumentFragment, propertyName: string, propertyValue: any): void {
+    this.delegate.setProperty(renderElement, propertyName, propertyValue);
+  }
+
+  setElementAttribute(renderElement: Element, namespaceAndName: string, attributeValue: string):
+      void {
+    const [ns, name] = splitNamespace(namespaceAndName);
+    if (attributeValue != null) {
+      this.delegate.setAttribute(renderElement, name, attributeValue, ns);
+    } else {
+      this.delegate.removeAttribute(renderElement, name, ns);
+    }
+  }
+
+  setBindingDebugInfo(renderElement: Element, propertyName: string, propertyValue: string): void {}
+
+  setElementClass(renderElement: Element, className: string, isAdd: boolean): void {
+    if (isAdd) {
+      this.delegate.addClass(renderElement, className);
+    } else {
+      this.delegate.removeClass(renderElement, className);
+    }
+  }
+
+  setElementStyle(renderElement: HTMLElement, styleName: string, styleValue: string): void {
+    if (styleValue != null) {
+      this.delegate.setStyle(renderElement, styleName, styleValue);
+    } else {
+      this.delegate.removeStyle(renderElement, styleName);
+    }
+  }
+
+  invokeElementMethod(renderElement: Element, methodName: string, args: any[]): void {
+    (renderElement as any)[methodName].apply(renderElement, args);
+  }
+
+  setText(renderNode: Text, text: string): void { this.delegate.setValue(renderNode, text); }
+
+  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;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _providers !: any[];
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _modules !: any[];
+
+  readonly injector: Injector = this;
+
+  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,
+      injectFlags: InjectFlags = InjectFlags.Default): any {
+    let flags = DepFlags.None;
+    if (injectFlags & InjectFlags.SkipSelf) {
+      flags |= DepFlags.SkipSelf;
+    } else if (injectFlags & InjectFlags.Self) {
+      flags |= DepFlags.Self;
+    }
+    return resolveNgModuleDep(
+        this, {token: token, tokenKey: tokenKey(token), flags: flags}, notFoundValue);
+  }
+
+  get instance() { return this.get(this._moduleType); }
+
+  get componentFactoryResolver() { return this.get(ComponentFactoryResolver); }
+
+  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
new file mode 100644
index 000000000000..c3eabf9ee718
--- /dev/null
+++ b/packages/core/src/view/services.ts
@@ -0,0 +1,859 @@
+/**
+ * @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 {isDevMode} from '../application_ref';
+import {DebugElement, DebugNode, EventListener, getDebugNode, indexDebugNode, removeDebugNodeFromIndex} from '../debug/debug_node';
+import {Injector} from '../di';
+import {InjectableType} from '../di/injectable';
+import {ErrorHandler} from '../error_handler';
+import {ComponentFactory} from '../linker/component_factory';
+import {NgModuleRef} from '../linker/ng_module_factory';
+import {Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '../render/api';
+import {Sanitizer} from '../sanitization/security';
+import {Type} from '../type';
+import {tokenKey} from '../view/util';
+
+import {isViewDebugError, viewDestroyedError, viewWrappedDebugError} from './errors';
+import {resolveDep} from './provider';
+import {dirtyParentQueries, getQueryValue} from './query';
+import {createInjector, createNgModuleRef, getComponentViewDefinitionFactory} from './refs';
+import {ArgumentType, BindingFlags, CheckType, DebugContext, ElementData, NgModuleDefinition, NodeDef, NodeFlags, NodeLogger, ProviderOverride, RootData, Services, ViewData, ViewDefinition, ViewState, asElementData, asPureExpressionData} from './types';
+import {NOOP, isComponentView, renderNode, resolveDefinition, splitDepsDsl, viewParentEl} from './util';
+import {checkAndUpdateNode, checkAndUpdateView, checkNoChangesNode, checkNoChangesView, createComponentView, createEmbeddedView, createRootView, destroyView} from './view';
+
+
+let initialized = false;
+
+export function initServicesIfNeeded() {
+  if (initialized) {
+    return;
+  }
+  initialized = true;
+  const services = isDevMode() ? createDebugServices() : createProdServices();
+  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.overrideComponentView = services.overrideComponentView;
+  Services.clearOverrides = services.clearOverrides;
+  Services.checkAndUpdateView = services.checkAndUpdateView;
+  Services.checkNoChangesView = services.checkNoChangesView;
+  Services.destroyView = services.destroyView;
+  Services.resolveDep = resolveDep;
+  Services.createDebugContext = services.createDebugContext;
+  Services.handleEvent = services.handleEvent;
+  Services.updateDirectives = services.updateDirectives;
+  Services.updateRenderer = services.updateRenderer;
+  Services.dirtyParentQueries = dirtyParentQueries;
+}
+
+function createProdServices() {
+  return {
+    setCurrentNode: () => {},
+    createRootView: createProdRootView,
+    createEmbeddedView: createEmbeddedView,
+    createComponentView: createComponentView,
+    createNgModuleRef: createNgModuleRef,
+    overrideProvider: NOOP,
+    overrideComponentView: NOOP,
+    clearOverrides: NOOP,
+    checkAndUpdateView: checkAndUpdateView,
+    checkNoChangesView: checkNoChangesView,
+    destroyView: destroyView,
+    createDebugContext: (view: ViewData, nodeIndex: number) => new DebugContext_(view, nodeIndex),
+    handleEvent: (view: ViewData, nodeIndex: number, eventName: string, event: any) =>
+                     view.def.handleEvent(view, nodeIndex, eventName, event),
+    updateDirectives: (view: ViewData, checkType: CheckType) => view.def.updateDirectives(
+                          checkType === CheckType.CheckAndUpdate ? prodCheckAndUpdateNode :
+                                                                   prodCheckNoChangesNode,
+                          view),
+    updateRenderer: (view: ViewData, checkType: CheckType) => view.def.updateRenderer(
+                        checkType === CheckType.CheckAndUpdate ? prodCheckAndUpdateNode :
+                                                                 prodCheckNoChangesNode,
+                        view),
+  };
+}
+
+function createDebugServices() {
+  return {
+    setCurrentNode: debugSetCurrentNode,
+    createRootView: debugCreateRootView,
+    createEmbeddedView: debugCreateEmbeddedView,
+    createComponentView: debugCreateComponentView,
+    createNgModuleRef: debugCreateNgModuleRef,
+    overrideProvider: debugOverrideProvider,
+    overrideComponentView: debugOverrideComponentView,
+    clearOverrides: debugClearOverrides,
+    checkAndUpdateView: debugCheckAndUpdateView,
+    checkNoChangesView: debugCheckNoChangesView,
+    destroyView: debugDestroyView,
+    createDebugContext: (view: ViewData, nodeIndex: number) => new DebugContext_(view, nodeIndex),
+    handleEvent: debugHandleEvent,
+    updateDirectives: debugUpdateDirectives,
+    updateRenderer: debugUpdateRenderer,
+  };
+}
+
+function createProdRootView(
+    elInjector: Injector, projectableNodes: any[][], rootSelectorOrNode: string | any,
+    def: ViewDefinition, ngModule: NgModuleRef<any>, context?: any): ViewData {
+  const rendererFactory: RendererFactory2 = ngModule.injector.get(RendererFactory2);
+  return createRootView(
+      createRootData(elInjector, ngModule, rendererFactory, projectableNodes, rootSelectorOrNode),
+      def, context);
+}
+
+function debugCreateRootView(
+    elInjector: Injector, projectableNodes: any[][], rootSelectorOrNode: string | any,
+    def: ViewDefinition, ngModule: NgModuleRef<any>, context?: any): ViewData {
+  const rendererFactory: RendererFactory2 = ngModule.injector.get(RendererFactory2);
+  const root = createRootData(
+      elInjector, ngModule, new DebugRendererFactory2(rendererFactory), projectableNodes,
+      rootSelectorOrNode);
+  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, 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 overrideComponentView =
+      viewDefOverrides.get(nodeDef.element !.componentProvider !.provider !.token);
+  if (overrideComponentView) {
+    viewDef = overrideComponentView;
+  } else {
+    viewDef = applyProviderOverridesToView(viewDef);
+  }
+  return callWithDebugContext(
+      DebugAction.create, createComponentView, null, [parentView, nodeDef, viewDef, 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>();
+const providerOverridesWithScope = new Map<InjectableType<any>, ProviderOverride>();
+const viewDefOverrides = new Map<any, ViewDefinition>();
+
+function debugOverrideProvider(override: ProviderOverride) {
+  providerOverrides.set(override.token, override);
+  if (typeof override.token === 'function' && override.token.ngInjectableDef &&
+      typeof override.token.ngInjectableDef.providedIn === 'function') {
+    providerOverridesWithScope.set(override.token as InjectableType<any>, override);
+  }
+}
+
+function debugOverrideComponentView(comp: any, compFactory: ComponentFactory<any>) {
+  const hostViewDef = resolveDefinition(getComponentViewDefinitionFactory(compFactory));
+  const compViewDef = resolveDefinition(hostViewDef.nodes[0].element !.componentView !);
+  viewDefOverrides.set(comp, compViewDef);
+}
+
+function debugClearOverrides() {
+  providerOverrides.clear();
+  providerOverridesWithScope.clear();
+  viewDefOverrides.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 !.nodeIndex);
+        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) {
+        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 {
+  const {hasOverrides, hasDeprecatedOverrides} = calcHasOverrides(def);
+  if (!hasOverrides) {
+    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 calcHasOverrides(def: NgModuleDefinition):
+      {hasOverrides: boolean, hasDeprecatedOverrides: boolean} {
+    let hasOverrides = false;
+    let hasDeprecatedOverrides = false;
+    if (providerOverrides.size === 0) {
+      return {hasOverrides, hasDeprecatedOverrides};
+    }
+    def.providers.forEach(node => {
+      const override = providerOverrides.get(node.token);
+      if ((node.flags & NodeFlags.CatProviderNoDirective) && override) {
+        hasOverrides = true;
+        hasDeprecatedOverrides = hasDeprecatedOverrides || override.deprecatedBehavior;
+      }
+    });
+    def.modules.forEach(module => {
+      providerOverridesWithScope.forEach((override, token) => {
+        if (token.ngInjectableDef.providedIn === module) {
+          hasOverrides = true;
+          hasDeprecatedOverrides = hasDeprecatedOverrides || override.deprecatedBehavior;
+        }
+      });
+    });
+    return {hasOverrides, hasDeprecatedOverrides};
+  }
+
+  function applyProviderOverrides(def: NgModuleDefinition) {
+    for (let i = 0; i < def.providers.length; i++) {
+      const provider = def.providers[i];
+      if (hasDeprecatedOverrides) {
+        // We had a bug where me made
+        // all providers lazy. Keep this logic behind a flag
+        // for migrating existing users.
+        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;
+      }
+    }
+    if (providerOverridesWithScope.size > 0) {
+      let moduleSet = new Set<any>(def.modules);
+      providerOverridesWithScope.forEach((override, token) => {
+        if (moduleSet.has(token.ngInjectableDef.providedIn)) {
+          let provider = {
+            token: token,
+            flags:
+                override.flags | (hasDeprecatedOverrides ? NodeFlags.LazyProvider : NodeFlags.None),
+            deps: splitDepsDsl(override.deps),
+            value: override.value,
+            index: def.providers.length,
+          };
+          def.providers.push(provider);
+          def.providersByKey[tokenKey(token)] = provider;
+        }
+      });
+    }
+  }
+}
+
+function prodCheckAndUpdateNode(
+    view: ViewData, checkIndex: number, argStyle: ArgumentType, v0?: any, v1?: any, v2?: any,
+    v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any): any {
+  const nodeDef = view.def.nodes[checkIndex];
+  checkAndUpdateNode(view, nodeDef, argStyle, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+  return (nodeDef.flags & NodeFlags.CatPureExpression) ?
+      asPureExpressionData(view, checkIndex).value :
+      undefined;
+}
+
+function prodCheckNoChangesNode(
+    view: ViewData, checkIndex: number, argStyle: ArgumentType, v0?: any, v1?: any, v2?: any,
+    v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any): any {
+  const nodeDef = view.def.nodes[checkIndex];
+  checkNoChangesNode(view, nodeDef, argStyle, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+  return (nodeDef.flags & NodeFlags.CatPureExpression) ?
+      asPureExpressionData(view, checkIndex).value :
+      undefined;
+}
+
+function debugCheckAndUpdateView(view: ViewData) {
+  return callWithDebugContext(DebugAction.detectChanges, checkAndUpdateView, null, [view]);
+}
+
+function debugCheckNoChangesView(view: ViewData) {
+  return callWithDebugContext(DebugAction.checkNoChanges, checkNoChangesView, null, [view]);
+}
+
+function debugDestroyView(view: ViewData) {
+  return callWithDebugContext(DebugAction.destroy, destroyView, null, [view]);
+}
+
+enum DebugAction {
+  create,
+  detectChanges,
+  checkNoChanges,
+  destroy,
+  handleEvent
+}
+
+let _currentAction: DebugAction;
+let _currentView: ViewData;
+let _currentNodeIndex: number|null;
+
+function debugSetCurrentNode(view: ViewData, nodeIndex: number | null) {
+  _currentView = view;
+  _currentNodeIndex = nodeIndex;
+}
+
+function debugHandleEvent(view: ViewData, nodeIndex: number, eventName: string, event: any) {
+  debugSetCurrentNode(view, nodeIndex);
+  return callWithDebugContext(
+      DebugAction.handleEvent, view.def.handleEvent, null, [view, nodeIndex, eventName, event]);
+}
+
+function debugUpdateDirectives(view: ViewData, checkType: CheckType) {
+  if (view.state & ViewState.Destroyed) {
+    throw viewDestroyedError(DebugAction[_currentAction]);
+  }
+  debugSetCurrentNode(view, nextDirectiveWithBinding(view, 0));
+  return view.def.updateDirectives(debugCheckDirectivesFn, view);
+
+  function debugCheckDirectivesFn(
+      view: ViewData, nodeIndex: number, argStyle: ArgumentType, ...values: any[]) {
+    const nodeDef = view.def.nodes[nodeIndex];
+    if (checkType === CheckType.CheckAndUpdate) {
+      debugCheckAndUpdateNode(view, nodeDef, argStyle, values);
+    } else {
+      debugCheckNoChangesNode(view, nodeDef, argStyle, values);
+    }
+    if (nodeDef.flags & NodeFlags.TypeDirective) {
+      debugSetCurrentNode(view, nextDirectiveWithBinding(view, nodeIndex));
+    }
+    return (nodeDef.flags & NodeFlags.CatPureExpression) ?
+        asPureExpressionData(view, nodeDef.nodeIndex).value :
+        undefined;
+  }
+}
+
+function debugUpdateRenderer(view: ViewData, checkType: CheckType) {
+  if (view.state & ViewState.Destroyed) {
+    throw viewDestroyedError(DebugAction[_currentAction]);
+  }
+  debugSetCurrentNode(view, nextRenderNodeWithBinding(view, 0));
+  return view.def.updateRenderer(debugCheckRenderNodeFn, view);
+
+  function debugCheckRenderNodeFn(
+      view: ViewData, nodeIndex: number, argStyle: ArgumentType, ...values: any[]) {
+    const nodeDef = view.def.nodes[nodeIndex];
+    if (checkType === CheckType.CheckAndUpdate) {
+      debugCheckAndUpdateNode(view, nodeDef, argStyle, values);
+    } else {
+      debugCheckNoChangesNode(view, nodeDef, argStyle, values);
+    }
+    if (nodeDef.flags & NodeFlags.CatRenderNode) {
+      debugSetCurrentNode(view, nextRenderNodeWithBinding(view, nodeIndex));
+    }
+    return (nodeDef.flags & NodeFlags.CatPureExpression) ?
+        asPureExpressionData(view, nodeDef.nodeIndex).value :
+        undefined;
+  }
+}
+
+function debugCheckAndUpdateNode(
+    view: ViewData, nodeDef: NodeDef, argStyle: ArgumentType, givenValues: any[]): void {
+  const changed = (<any>checkAndUpdateNode)(view, nodeDef, argStyle, ...givenValues);
+  if (changed) {
+    const values = argStyle === ArgumentType.Dynamic ? givenValues[0] : givenValues;
+    if (nodeDef.flags & NodeFlags.TypeDirective) {
+      const bindingValues: {[key: string]: string} = {};
+      for (let i = 0; i < nodeDef.bindings.length; i++) {
+        const binding = nodeDef.bindings[i];
+        const value = values[i];
+        if (binding.flags & BindingFlags.TypeProperty) {
+          bindingValues[normalizeDebugBindingName(binding.nonMinifiedName !)] =
+              normalizeDebugBindingValue(value);
+        }
+      }
+      const elDef = nodeDef.parent !;
+      const el = asElementData(view, elDef.nodeIndex).renderElement;
+      if (!elDef.element !.name) {
+        // a comment.
+        view.renderer.setValue(el, `bindings=${JSON.stringify(bindingValues, null, 2)}`);
+      } else {
+        // a regular element.
+        for (let attr in bindingValues) {
+          const value = bindingValues[attr];
+          if (value != null) {
+            view.renderer.setAttribute(el, attr, value);
+          } else {
+            view.renderer.removeAttribute(el, attr);
+          }
+        }
+      }
+    }
+  }
+}
+
+function debugCheckNoChangesNode(
+    view: ViewData, nodeDef: NodeDef, argStyle: ArgumentType, values: any[]): void {
+  (<any>checkNoChangesNode)(view, nodeDef, argStyle, ...values);
+}
+
+function normalizeDebugBindingName(name: string) {
+  // Attribute names with `$` (eg `x-y$`) are valid per spec, but unsupported by some browsers
+  name = camelCaseToDashCase(name.replace(/[$@]/g, '_'));
+  return `ng-reflect-${name}`;
+}
+
+const CAMEL_CASE_REGEXP = /([A-Z])/g;
+
+function camelCaseToDashCase(input: string): string {
+  return input.replace(CAMEL_CASE_REGEXP, (...m: any[]) => '-' + m[1].toLowerCase());
+}
+
+function normalizeDebugBindingValue(value: any): string {
+  try {
+    // Limit the size of the value as otherwise the DOM just gets polluted.
+    return value != null ? value.toString().slice(0, 30) : value;
+  } catch (e) {
+    return '[ERROR] Exception while trying to serialize the value';
+  }
+}
+
+function nextDirectiveWithBinding(view: ViewData, nodeIndex: number): number|null {
+  for (let i = nodeIndex; i < view.def.nodes.length; i++) {
+    const nodeDef = view.def.nodes[i];
+    if (nodeDef.flags & NodeFlags.TypeDirective && nodeDef.bindings && nodeDef.bindings.length) {
+      return i;
+    }
+  }
+  return null;
+}
+
+function nextRenderNodeWithBinding(view: ViewData, nodeIndex: number): number|null {
+  for (let i = nodeIndex; i < view.def.nodes.length; i++) {
+    const nodeDef = view.def.nodes[i];
+    if ((nodeDef.flags & NodeFlags.CatRenderNode) && nodeDef.bindings && nodeDef.bindings.length) {
+      return i;
+    }
+  }
+  return null;
+}
+
+class DebugContext_ implements DebugContext {
+  private nodeDef: NodeDef;
+  private elView: ViewData;
+  private elDef: NodeDef;
+
+  constructor(public view: ViewData, public nodeIndex: number|null) {
+    if (nodeIndex == null) {
+      this.nodeIndex = nodeIndex = 0;
+    }
+    this.nodeDef = view.def.nodes[nodeIndex];
+    let elDef = this.nodeDef;
+    let elView = view;
+    while (elDef && (elDef.flags & NodeFlags.TypeElement) === 0) {
+      elDef = elDef.parent !;
+    }
+    if (!elDef) {
+      while (!elDef && elView) {
+        elDef = viewParentEl(elView) !;
+        elView = elView.parent !;
+      }
+    }
+    this.elDef = elDef;
+    this.elView = elView;
+  }
+
+  private get elOrCompView() {
+    // Has to be done lazily as we use the DebugContext also during creation of elements...
+    return asElementData(this.elView, this.elDef.nodeIndex).componentView || this.view;
+  }
+
+  get injector(): Injector { return createInjector(this.elView, this.elDef); }
+
+  get component(): any { return this.elOrCompView.component; }
+
+  get context(): any { return this.elOrCompView.context; }
+
+  get providerTokens(): any[] {
+    const tokens: any[] = [];
+    if (this.elDef) {
+      for (let i = this.elDef.nodeIndex + 1; i <= this.elDef.nodeIndex + this.elDef.childCount;
+           i++) {
+        const childDef = this.elView.def.nodes[i];
+        if (childDef.flags & NodeFlags.CatProvider) {
+          tokens.push(childDef.provider !.token);
+        }
+        i += childDef.childCount;
+      }
+    }
+    return tokens;
+  }
+
+  get references(): {[key: string]: any} {
+    const references: {[key: string]: any} = {};
+    if (this.elDef) {
+      collectReferences(this.elView, this.elDef, references);
+
+      for (let i = this.elDef.nodeIndex + 1; i <= this.elDef.nodeIndex + this.elDef.childCount;
+           i++) {
+        const childDef = this.elView.def.nodes[i];
+        if (childDef.flags & NodeFlags.CatProvider) {
+          collectReferences(this.elView, childDef, references);
+        }
+        i += childDef.childCount;
+      }
+    }
+    return references;
+  }
+
+  get componentRenderElement() {
+    const elData = findHostElement(this.elOrCompView);
+    return elData ? elData.renderElement : undefined;
+  }
+
+  get renderNode(): any {
+    return this.nodeDef.flags & NodeFlags.TypeText ? renderNode(this.view, this.nodeDef) :
+                                                     renderNode(this.elView, this.elDef);
+  }
+
+  logError(console: Console, ...values: any[]) {
+    let logViewDef: ViewDefinition;
+    let logNodeIndex: number;
+    if (this.nodeDef.flags & NodeFlags.TypeText) {
+      logViewDef = this.view.def;
+      logNodeIndex = this.nodeDef.nodeIndex;
+    } else {
+      logViewDef = this.elView.def;
+      logNodeIndex = this.elDef.nodeIndex;
+    }
+    // Note: we only generate a log function for text and element nodes
+    // to make the generated code as small as possible.
+    const renderNodeIndex = getRenderNodeIndex(logViewDef, logNodeIndex);
+    let currRenderNodeIndex = -1;
+    let nodeLogger: NodeLogger = () => {
+      currRenderNodeIndex++;
+      if (currRenderNodeIndex === renderNodeIndex) {
+        return console.error.bind(console, ...values);
+      } else {
+        return NOOP;
+      }
+    };
+    logViewDef.factory !(nodeLogger);
+    if (currRenderNodeIndex < renderNodeIndex) {
+      console.error('Illegal state: the ViewDefinitionFactory did not call the logger!');
+      (<any>console.error)(...values);
+    }
+  }
+}
+
+function getRenderNodeIndex(viewDef: ViewDefinition, nodeIndex: number): number {
+  let renderNodeIndex = -1;
+  for (let i = 0; i <= nodeIndex; i++) {
+    const nodeDef = viewDef.nodes[i];
+    if (nodeDef.flags & NodeFlags.CatRenderNode) {
+      renderNodeIndex++;
+    }
+  }
+  return renderNodeIndex;
+}
+
+function findHostElement(view: ViewData): ElementData|null {
+  while (view && !isComponentView(view)) {
+    view = view.parent !;
+  }
+  if (view.parent) {
+    return asElementData(view.parent, viewParentEl(view) !.nodeIndex);
+  }
+  return null;
+}
+
+function collectReferences(view: ViewData, nodeDef: NodeDef, references: {[key: string]: any}) {
+  for (let refName in nodeDef.references) {
+    references[refName] = getQueryValue(view, nodeDef, nodeDef.references[refName]);
+  }
+}
+
+function callWithDebugContext(action: DebugAction, fn: any, self: any, args: any[]) {
+  const oldAction = _currentAction;
+  const oldView = _currentView;
+  const oldNodeIndex = _currentNodeIndex;
+  try {
+    _currentAction = action;
+    const result = fn.apply(self, args);
+    _currentView = oldView;
+    _currentNodeIndex = oldNodeIndex;
+    _currentAction = oldAction;
+    return result;
+  } catch (e) {
+    if (isViewDebugError(e) || !_currentView) {
+      throw e;
+    }
+    throw viewWrappedDebugError(e, getCurrentDebugContext() !);
+  }
+}
+
+export function getCurrentDebugContext(): DebugContext|null {
+  return _currentView ? new DebugContext_(_currentView, _currentNodeIndex) : null;
+}
+
+export class DebugRendererFactory2 implements RendererFactory2 {
+  constructor(private delegate: 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);
+  }
+}
+
+export class DebugRenderer2 implements Renderer2 {
+  readonly data: {[key: string]: any};
+
+  /**
+   * Factory function used to create a `DebugContext` when a node is created.
+   *
+   * The `DebugContext` allows to retrieve information about the nodes that are useful in tests.
+   *
+   * The factory is configurable so that the `DebugRenderer2` could instantiate either a View Engine
+   * or a Render context.
+   */
+  debugContextFactory: () => DebugContext | null = getCurrentDebugContext;
+
+  private get debugContext() { return this.debugContextFactory(); }
+
+  constructor(private delegate: Renderer2) { this.data = this.delegate.data; }
+
+  destroyNode(node: any) {
+    removeDebugNodeFromIndex(getDebugNode(node) !);
+    if (this.delegate.destroyNode) {
+      this.delegate.destroyNode(node);
+    }
+  }
+
+  destroy() { this.delegate.destroy(); }
+
+  createElement(name: string, namespace?: string): any {
+    const el = this.delegate.createElement(name, namespace);
+    const debugCtx = this.debugContext;
+    if (debugCtx) {
+      const debugEl = new DebugElement(el, null, debugCtx);
+      debugEl.name = name;
+      indexDebugNode(debugEl);
+    }
+    return el;
+  }
+
+  createComment(value: string): any {
+    const comment = this.delegate.createComment(value);
+    const debugCtx = this.debugContext;
+    if (debugCtx) {
+      indexDebugNode(new DebugNode(comment, null, debugCtx));
+    }
+    return comment;
+  }
+
+  createText(value: string): any {
+    const text = this.delegate.createText(value);
+    const debugCtx = this.debugContext;
+    if (debugCtx) {
+      indexDebugNode(new DebugNode(text, null, debugCtx));
+    }
+    return text;
+  }
+
+  appendChild(parent: any, newChild: any): void {
+    const debugEl = getDebugNode(parent);
+    const debugChildEl = getDebugNode(newChild);
+    if (debugEl && debugChildEl && debugEl instanceof DebugElement) {
+      debugEl.addChild(debugChildEl);
+    }
+    this.delegate.appendChild(parent, newChild);
+  }
+
+  insertBefore(parent: any, newChild: any, refChild: any): void {
+    const debugEl = getDebugNode(parent);
+    const debugChildEl = getDebugNode(newChild);
+    const debugRefEl = getDebugNode(refChild) !;
+    if (debugEl && debugChildEl && debugEl instanceof DebugElement) {
+      debugEl.insertBefore(debugRefEl, debugChildEl);
+    }
+
+    this.delegate.insertBefore(parent, newChild, refChild);
+  }
+
+  removeChild(parent: any, oldChild: any): void {
+    const debugEl = getDebugNode(parent);
+    const debugChildEl = getDebugNode(oldChild);
+    if (debugEl && debugChildEl && debugEl instanceof DebugElement) {
+      debugEl.removeChild(debugChildEl);
+    }
+    this.delegate.removeChild(parent, oldChild);
+  }
+
+  selectRootElement(selectorOrNode: string|any): any {
+    const el = this.delegate.selectRootElement(selectorOrNode);
+    const debugCtx = this.debugContext;
+    if (debugCtx) {
+      indexDebugNode(new DebugElement(el, null, debugCtx));
+    }
+    return el;
+  }
+
+  setAttribute(el: any, name: string, value: string, namespace?: string): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      const fullName = namespace ? namespace + ':' + name : name;
+      debugEl.attributes[fullName] = value;
+    }
+    this.delegate.setAttribute(el, name, value, namespace);
+  }
+
+  removeAttribute(el: any, name: string, namespace?: string): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      const fullName = namespace ? namespace + ':' + name : name;
+      debugEl.attributes[fullName] = null;
+    }
+    this.delegate.removeAttribute(el, name, namespace);
+  }
+
+  addClass(el: any, name: string): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      debugEl.classes[name] = true;
+    }
+    this.delegate.addClass(el, name);
+  }
+
+  removeClass(el: any, name: string): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      debugEl.classes[name] = false;
+    }
+    this.delegate.removeClass(el, name);
+  }
+
+  setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      debugEl.styles[style] = value;
+    }
+    this.delegate.setStyle(el, style, value, flags);
+  }
+
+  removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      debugEl.styles[style] = null;
+    }
+    this.delegate.removeStyle(el, style, flags);
+  }
+
+  setProperty(el: any, name: string, value: any): void {
+    const debugEl = getDebugNode(el);
+    if (debugEl && debugEl instanceof DebugElement) {
+      debugEl.properties[name] = value;
+    }
+    this.delegate.setProperty(el, name, value);
+  }
+
+  listen(
+      target: 'document'|'windows'|'body'|any, eventName: string,
+      callback: (event: any) => boolean): () => void {
+    if (typeof target !== 'string') {
+      const debugEl = getDebugNode(target);
+      if (debugEl) {
+        debugEl.listeners.push(new EventListener(eventName, callback));
+      }
+    }
+
+    return this.delegate.listen(target, eventName, callback);
+  }
+
+  parentNode(node: any): any { return this.delegate.parentNode(node); }
+  nextSibling(node: any): any { return this.delegate.nextSibling(node); }
+  setValue(node: any, value: string): void { return this.delegate.setValue(node, value); }
+}
diff --git a/packages/core/src/view/text.ts b/packages/core/src/view/text.ts
new file mode 100644
index 000000000000..e5abed2a222f
--- /dev/null
+++ b/packages/core/src/view/text.ts
@@ -0,0 +1,124 @@
+/**
+ * @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 {BindingDef, BindingFlags, NodeDef, NodeFlags, TextData, ViewData, asTextData} from './types';
+import {checkAndUpdateBinding, getParentRenderElement} from './util';
+
+export function textDef(
+    checkIndex: number, ngContentIndex: number | null, staticText: string[]): NodeDef {
+  const bindings: BindingDef[] = new Array(staticText.length - 1);
+  for (let i = 1; i < staticText.length; i++) {
+    bindings[i - 1] = {
+      flags: BindingFlags.TypeProperty,
+      name: null,
+      ns: null,
+      nonMinifiedName: null,
+      securityContext: null,
+      suffix: staticText[i],
+    };
+  }
+
+  return {
+    // will bet set by the view definition
+    nodeIndex: -1,
+    parent: null,
+    renderParent: null,
+    bindingIndex: -1,
+    outputIndex: -1,
+    // regular values
+    checkIndex,
+    flags: NodeFlags.TypeText,
+    childFlags: 0,
+    directChildFlags: 0,
+    childMatchedQueries: 0,
+    matchedQueries: {},
+    matchedQueryIds: 0,
+    references: {}, ngContentIndex,
+    childCount: 0, bindings,
+    bindingFlags: BindingFlags.TypeProperty,
+    outputs: [],
+    element: null,
+    provider: null,
+    text: {prefix: staticText[0]},
+    query: null,
+    ngContent: null,
+  };
+}
+
+export function createText(view: ViewData, renderHost: any, def: NodeDef): TextData {
+  let renderNode: any;
+  const renderer = view.renderer;
+  renderNode = renderer.createText(def.text !.prefix);
+  const parentEl = getParentRenderElement(view, renderHost, def);
+  if (parentEl) {
+    renderer.appendChild(parentEl, renderNode);
+  }
+  return {renderText: renderNode};
+}
+
+export function checkAndUpdateTextInline(
+    view: ViewData, def: NodeDef, v0: any, v1: any, v2: any, v3: any, v4: any, v5: any, v6: any,
+    v7: any, v8: any, v9: any): boolean {
+  let changed = false;
+  const bindings = def.bindings;
+  const bindLen = bindings.length;
+  if (bindLen > 0 && checkAndUpdateBinding(view, def, 0, v0)) changed = true;
+  if (bindLen > 1 && checkAndUpdateBinding(view, def, 1, v1)) changed = true;
+  if (bindLen > 2 && checkAndUpdateBinding(view, def, 2, v2)) changed = true;
+  if (bindLen > 3 && checkAndUpdateBinding(view, def, 3, v3)) changed = true;
+  if (bindLen > 4 && checkAndUpdateBinding(view, def, 4, v4)) changed = true;
+  if (bindLen > 5 && checkAndUpdateBinding(view, def, 5, v5)) changed = true;
+  if (bindLen > 6 && checkAndUpdateBinding(view, def, 6, v6)) changed = true;
+  if (bindLen > 7 && checkAndUpdateBinding(view, def, 7, v7)) changed = true;
+  if (bindLen > 8 && checkAndUpdateBinding(view, def, 8, v8)) changed = true;
+  if (bindLen > 9 && checkAndUpdateBinding(view, def, 9, v9)) changed = true;
+
+  if (changed) {
+    let value = def.text !.prefix;
+    if (bindLen > 0) value += _addInterpolationPart(v0, bindings[0]);
+    if (bindLen > 1) value += _addInterpolationPart(v1, bindings[1]);
+    if (bindLen > 2) value += _addInterpolationPart(v2, bindings[2]);
+    if (bindLen > 3) value += _addInterpolationPart(v3, bindings[3]);
+    if (bindLen > 4) value += _addInterpolationPart(v4, bindings[4]);
+    if (bindLen > 5) value += _addInterpolationPart(v5, bindings[5]);
+    if (bindLen > 6) value += _addInterpolationPart(v6, bindings[6]);
+    if (bindLen > 7) value += _addInterpolationPart(v7, bindings[7]);
+    if (bindLen > 8) value += _addInterpolationPart(v8, bindings[8]);
+    if (bindLen > 9) value += _addInterpolationPart(v9, bindings[9]);
+    const renderNode = asTextData(view, def.nodeIndex).renderText;
+    view.renderer.setValue(renderNode, value);
+  }
+  return changed;
+}
+
+export function checkAndUpdateTextDynamic(view: ViewData, def: NodeDef, values: any[]): boolean {
+  const bindings = def.bindings;
+  let changed = false;
+  for (let i = 0; i < values.length; i++) {
+    // Note: We need to loop over all values, so that
+    // the old values are updates as well!
+    if (checkAndUpdateBinding(view, def, i, values[i])) {
+      changed = true;
+    }
+  }
+  if (changed) {
+    let value = '';
+    for (let i = 0; i < values.length; i++) {
+      value = value + _addInterpolationPart(values[i], bindings[i]);
+    }
+    value = def.text !.prefix + value;
+    const renderNode = asTextData(view, def.nodeIndex).renderText;
+    view.renderer.setValue(renderNode, value);
+  }
+  return changed;
+}
+
+function _addInterpolationPart(value: any, binding: BindingDef): string {
+  const valueStr = value != null ? value.toString() : '';
+  return valueStr + binding.suffix;
+}
diff --git a/packages/core/src/view/types.ts b/packages/core/src/view/types.ts
new file mode 100644
index 000000000000..870a7df87217
--- /dev/null
+++ b/packages/core/src/view/types.ts
@@ -0,0 +1,613 @@
+/**
+ * @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';
+import {ErrorHandler} from '../error_handler';
+import {ComponentFactory} from '../linker/component_factory';
+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 '../sanitization/security';
+import {Type} from '../type';
+
+
+// -------------------------------------
+// Defs
+// -------------------------------------
+
+/**
+ * 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};
+  modules: any[];
+  isRoot: boolean;
+}
+
+export interface NgModuleDefinitionFactory extends DefinitionFactory<NgModuleDefinition> {}
+
+export interface ViewDefinition extends Definition<ViewDefinitionFactory> {
+  flags: ViewFlags;
+  updateDirectives: ViewUpdateFn;
+  updateRenderer: ViewUpdateFn;
+  handleEvent: ViewHandleEventFn;
+  /**
+   * Order: Depth first.
+   * Especially providers are before elements / anchors.
+   */
+  nodes: NodeDef[];
+  /** aggregated NodeFlags for all nodes **/
+  nodeFlags: NodeFlags;
+  rootNodeFlags: NodeFlags;
+  lastRenderRootNode: NodeDef|null;
+  bindingCount: number;
+  outputCount: number;
+  /**
+   * Binary or of all query ids that are matched by one of the nodes.
+   * This includes query ids from templates as well.
+   * Used as a bloom filter.
+   */
+  nodeMatchedQueries: number;
+}
+
+export interface ViewDefinitionFactory extends DefinitionFactory<ViewDefinition> {}
+
+
+export interface ViewUpdateFn { (check: NodeCheckFn, view: ViewData): void; }
+
+// helper functions to create an overloaded function type.
+export interface NodeCheckFn {
+  (view: ViewData, nodeIndex: number, argStyle: ArgumentType.Dynamic, values: any[]): any;
+
+  (view: ViewData, nodeIndex: number, argStyle: ArgumentType.Inline, v0?: any, v1?: any, v2?: any,
+   v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any): any;
+}
+
+export const enum ArgumentType {Inline = 0, Dynamic = 1}
+
+export interface ViewHandleEventFn {
+  (view: ViewData, nodeIndex: number, eventName: string, event: any): boolean;
+}
+
+/**
+ * Bitmask for ViewDefinition.flags.
+ */
+export const enum ViewFlags {
+  None = 0,
+  OnPush = 1 << 1,
+}
+
+/**
+ * A node definition in the view.
+ *
+ * Note: We use one type for all nodes so that loops that loop over all nodes
+ * of a ViewDefinition stay monomorphic!
+ */
+export interface NodeDef {
+  flags: NodeFlags;
+  // Index of the node in view data and view definition (those are the same)
+  nodeIndex: number;
+  // Index of the node in the check functions
+  // Differ from nodeIndex when nodes are added or removed at runtime (ie after compilation)
+  checkIndex: number;
+  parent: NodeDef|null;
+  renderParent: NodeDef|null;
+  /** this is checked against NgContentDef.index to find matched nodes */
+  ngContentIndex: number|null;
+  /** number of transitive children */
+  childCount: number;
+  /** aggregated NodeFlags for all transitive children (does not include self) **/
+  childFlags: NodeFlags;
+  /** aggregated NodeFlags for all direct children (does not include self) **/
+  directChildFlags: NodeFlags;
+
+  bindingIndex: number;
+  bindings: BindingDef[];
+  bindingFlags: BindingFlags;
+  outputIndex: number;
+  outputs: OutputDef[];
+  /**
+   * references that the user placed on the element
+   */
+  references: {[refId: string]: QueryValueType};
+  /**
+   * ids and value types of all queries that are matched by this node.
+   */
+  matchedQueries: {[queryId: number]: QueryValueType};
+  /** Binary or of all matched query ids of this node. */
+  matchedQueryIds: number;
+  /**
+   * Binary or of all query ids that are matched by one of the children.
+   * This includes query ids from templates as well.
+   * Used as a bloom filter.
+   */
+  childMatchedQueries: number;
+  element: ElementDef|null;
+  provider: ProviderDef|null;
+  text: TextDef|null;
+  query: QueryDef|null;
+  ngContent: NgContentDef|null;
+}
+
+/**
+ * Bitmask for NodeDef.flags.
+ * Naming convention:
+ * - `Type...`: flags that are mutually exclusive
+ * - `Cat...`: union of multiple `Type...` (short for category).
+ */
+export const enum NodeFlags {
+  None = 0,
+  TypeElement = 1 << 0,
+  TypeText = 1 << 1,
+  ProjectedTemplate = 1 << 2,
+  CatRenderNode = TypeElement | TypeText,
+  TypeNgContent = 1 << 3,
+  TypePipe = 1 << 4,
+  TypePureArray = 1 << 5,
+  TypePureObject = 1 << 6,
+  TypePurePipe = 1 << 7,
+  CatPureExpression = TypePureArray | TypePureObject | TypePurePipe,
+  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,
+  TypeNgModule = 1 << 30,
+  CatQuery = TypeContentQuery | TypeViewQuery,
+
+  // mutually exclusive values...
+  Types = CatRenderNode | TypeNgContent | TypePipe | CatPureExpression | CatProvider | CatQuery
+}
+
+export interface BindingDef {
+  flags: BindingFlags;
+  ns: string|null;
+  name: string|null;
+  nonMinifiedName: string|null;
+  securityContext: SecurityContext|null;
+  suffix: string|null;
+}
+
+export const enum BindingFlags {
+  TypeElementAttribute = 1 << 0,
+  TypeElementClass = 1 << 1,
+  TypeElementStyle = 1 << 2,
+  TypeProperty = 1 << 3,
+  SyntheticProperty = 1 << 4,
+  SyntheticHostProperty = 1 << 5,
+  CatSyntheticProperty = SyntheticProperty | SyntheticHostProperty,
+
+  // mutually exclusive values...
+  Types = TypeElementAttribute | TypeElementClass | TypeElementStyle | TypeProperty
+}
+
+export interface OutputDef {
+  type: OutputType;
+  target: 'window'|'document'|'body'|'component'|null;
+  eventName: string;
+  propName: string|null;
+}
+
+export const enum OutputType {ElementOutput, DirectiveOutput}
+
+export const enum QueryValueType {
+  ElementRef = 0,
+  RenderElement = 1,
+  TemplateRef = 2,
+  ViewContainerRef = 3,
+  Provider = 4
+}
+
+export interface ElementDef {
+  // set to null for `<ng-container>`
+  name: string|null;
+  ns: string|null;
+  /** ns, name, value */
+  attrs: [string, string, string][]|null;
+  template: ViewDefinition|null;
+  componentProvider: NodeDef|null;
+  componentRendererType: RendererType2|null;
+  // closure to allow recursive components
+  componentView: ViewDefinitionFactory|null;
+  /**
+   * visible public providers for DI in the view,
+   * as see from this element. This does not include private providers.
+   */
+  publicProviders: {[tokenKey: string]: NodeDef}|null;
+  /**
+   * same as visiblePublicProviders, but also includes private providers
+   * that are located on this element.
+   */
+  allProviders: {[tokenKey: string]: NodeDef}|null;
+  handleEvent: ElementHandleEventFn|null;
+}
+
+export interface ElementHandleEventFn { (view: ViewData, eventName: string, event: any): boolean; }
+
+export interface ProviderDef {
+  token: any;
+  value: any;
+  deps: DepDef[];
+}
+
+export interface NgModuleProviderDef {
+  flags: NodeFlags;
+  index: number;
+  token: any;
+  value: any;
+  deps: DepDef[];
+}
+
+export interface DepDef {
+  flags: DepFlags;
+  token: any;
+  tokenKey: string;
+}
+
+/**
+ * Bitmask for DI flags
+ */
+export const enum DepFlags {
+  None = 0,
+  SkipSelf = 1 << 0,
+  Optional = 1 << 1,
+  Self = 1 << 2,
+  Value = 1 << 3,
+}
+
+export interface TextDef { prefix: string; }
+
+export interface QueryDef {
+  id: number;
+  // variant of the id that can be used to check against NodeDef.matchedQueryIds, ...
+  filterId: number;
+  bindings: QueryBindingDef[];
+}
+
+export interface QueryBindingDef {
+  propName: string;
+  bindingType: QueryBindingType;
+}
+
+export const enum QueryBindingType {First = 0, All = 1}
+
+export interface NgContentDef {
+  /**
+   * this index is checked against NodeDef.ngContentIndex to find the nodes
+   * that are matched by this ng-content.
+   * Note that a NodeDef with an ng-content can be reprojected, i.e.
+   * have a ngContentIndex on its own.
+   */
+  index: number;
+}
+
+// -------------------------------------
+// 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!
+ */
+export interface ViewData {
+  def: ViewDefinition;
+  root: RootData;
+  renderer: Renderer2;
+  // index of component provider / anchor.
+  parentNodeDef: NodeDef|null;
+  parent: ViewData|null;
+  viewContainerParent: ViewData|null;
+  component: any;
+  context: any;
+  // Attention: Never loop over this, as this will
+  // create a polymorphic usage site.
+  // Instead: Always loop over ViewDefinition.nodes,
+  // and call the right accessor (e.g. `elementData`) based on
+  // the NodeType.
+  nodes: {[key: number]: NodeData};
+  state: ViewState;
+  oldValues: any[];
+  disposables: DisposableFn[]|null;
+  initIndex: number;
+}
+
+/**
+ * Bitmask of states
+ */
+export const enum ViewState {
+  BeforeFirstCheck = 1 << 0,
+  FirstCheck = 1 << 1,
+  Attached = 1 << 2,
+  ChecksEnabled = 1 << 3,
+  IsProjectedView = 1 << 4,
+  CheckProjectedView = 1 << 5,
+  CheckProjectedViews = 1 << 6,
+  Destroyed = 1 << 7,
+
+  // InitState Uses 3 bits
+  InitState_Mask = 7 << 8,
+  InitState_BeforeInit = 0 << 8,
+  InitState_CallingOnInit = 1 << 8,
+  InitState_CallingAfterContentInit = 2 << 8,
+  InitState_CallingAfterViewInit = 3 << 8,
+  InitState_AfterInit = 4 << 8,
+
+  CatDetectChanges = Attached | ChecksEnabled,
+  CatInit = BeforeFirstCheck | CatDetectChanges | InitState_BeforeInit
+}
+
+// Called before each cycle of a view's check to detect whether this is in the
+// initState for which we need to call ngOnInit, ngAfterContentInit or ngAfterViewInit
+// lifecycle methods. Returns true if this check cycle should call lifecycle
+// methods.
+export function shiftInitState(
+    view: ViewData, priorInitState: ViewState, newInitState: ViewState): boolean {
+  // Only update the InitState if we are currently in the prior state.
+  // For example, only move into CallingInit if we are in BeforeInit. Only
+  // move into CallingContentInit if we are in CallingInit. Normally this will
+  // always be true because of how checkCycle is called in checkAndUpdateView.
+  // However, if checkAndUpdateView is called recursively or if an exception is
+  // thrown while checkAndUpdateView is running, checkAndUpdateView starts over
+  // from the beginning. This ensures the state is monotonically increasing,
+  // terminating in the AfterInit state, which ensures the Init methods are called
+  // at least once and only once.
+  const state = view.state;
+  const initState = state & ViewState.InitState_Mask;
+  if (initState === priorInitState) {
+    view.state = (state & ~ViewState.InitState_Mask) | newInitState;
+    view.initIndex = -1;
+    return true;
+  }
+  return initState === newInitState;
+}
+
+// Returns true if the lifecycle init method should be called for the node with
+// the given init index.
+export function shouldCallLifecycleInitHook(
+    view: ViewData, initState: ViewState, index: number): boolean {
+  if ((view.state & ViewState.InitState_Mask) === initState && view.initIndex <= index) {
+    view.initIndex = index + 1;
+    return true;
+  }
+  return false;
+}
+
+export interface DisposableFn { (): void; }
+
+/**
+ * Node instance data.
+ *
+ * We have a separate type per NodeType to save memory
+ * (TextData | ElementData | ProviderData | PureExpressionData | QueryList<any>)
+ *
+ * To keep our code monomorphic,
+ * we prohibit using `NodeData` directly but enforce the use of accessors (`asElementData`, ...).
+ * This way, no usage site can get a `NodeData` from view.nodes and then use it for different
+ * purposes.
+ */
+export class NodeData { private __brand: any; }
+
+/**
+ * Data for an instantiated NodeType.Text.
+ *
+ * Attention: Adding fields to this is performance sensitive!
+ */
+export interface TextData { renderText: any; }
+
+/**
+ * Accessor for view.nodes, enforcing that every usage site stays monomorphic.
+ */
+export function asTextData(view: ViewData, index: number): TextData {
+  return <any>view.nodes[index];
+}
+
+/**
+ * Data for an instantiated NodeType.Element.
+ *
+ * Attention: Adding fields to this is performance sensitive!
+ */
+export interface ElementData {
+  renderElement: any;
+  componentView: ViewData;
+  viewContainer: ViewContainerData|null;
+  template: TemplateData;
+}
+
+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[];
+}
+
+/**
+ * Accessor for view.nodes, enforcing that every usage site stays monomorphic.
+ */
+export function asElementData(view: ViewData, index: number): ElementData {
+  return <any>view.nodes[index];
+}
+
+/**
+ * Data for an instantiated NodeType.Provider.
+ *
+ * Attention: Adding fields to this is performance sensitive!
+ */
+export interface ProviderData { instance: any; }
+
+/**
+ * Accessor for view.nodes, enforcing that every usage site stays monomorphic.
+ */
+export function asProviderData(view: ViewData, index: number): ProviderData {
+  return <any>view.nodes[index];
+}
+
+/**
+ * Data for an instantiated NodeType.PureExpression.
+ *
+ * Attention: Adding fields to this is performance sensitive!
+ */
+export interface PureExpressionData { value: any; }
+
+/**
+ * Accessor for view.nodes, enforcing that every usage site stays monomorphic.
+ */
+export function asPureExpressionData(view: ViewData, index: number): PureExpressionData {
+  return <any>view.nodes[index];
+}
+
+/**
+ * Accessor for view.nodes, enforcing that every usage site stays monomorphic.
+ */
+export function asQueryList(view: ViewData, index: number): QueryList<any> {
+  return <any>view.nodes[index];
+}
+
+export interface RootData {
+  injector: Injector;
+  ngModule: NgModuleRef<any>;
+  projectableNodes: any[][];
+  selectorOrNode: any;
+  renderer: Renderer2;
+  rendererFactory: RendererFactory2;
+  errorHandler: ErrorHandler;
+  sanitizer: Sanitizer;
+}
+
+export abstract class DebugContext {
+  abstract get view(): ViewData;
+  abstract get nodeIndex(): number|null;
+  abstract get injector(): Injector;
+  abstract get component(): any;
+  abstract get providerTokens(): any[];
+  abstract get references(): {[key: string]: any};
+  abstract get context(): any;
+  abstract get componentRenderElement(): any;
+  abstract get renderNode(): any;
+  abstract logError(console: Console, ...values: any[]): void;
+}
+
+// -------------------------------------
+// Other
+// -------------------------------------
+
+export const enum CheckType {CheckAndUpdate, CheckNoChanges}
+
+export interface ProviderOverride {
+  token: any;
+  flags: NodeFlags;
+  value: any;
+  deps: ([DepFlags, any]|any)[];
+  deprecatedBehavior: boolean;
+}
+
+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, 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;
+  overrideComponentView(compType: Type<any>, compFactory: ComponentFactory<any>): void;
+  clearOverrides(): void;
+  checkAndUpdateView(view: ViewData): void;
+  checkNoChangesView(view: ViewData): void;
+  destroyView(view: ViewData): void;
+  resolveDep(
+      view: ViewData, elDef: NodeDef|null, allowPrivateServices: boolean, depDef: DepDef,
+      notFoundValue?: any): any;
+  createDebugContext(view: ViewData, nodeIndex: number): DebugContext;
+  handleEvent: ViewHandleEventFn;
+  updateDirectives: (view: ViewData, checkType: CheckType) => void;
+  updateRenderer: (view: ViewData, checkType: CheckType) => void;
+  dirtyParentQueries: (view: ViewData) => void;
+}
+
+/**
+ * This object is used to prevent cycles in the source files and to have a place where
+ * debug mode can hook it. It is lazily filled when `isDevMode` is known.
+ */
+export const Services: Services = {
+  setCurrentNode: undefined !,
+  createRootView: undefined !,
+  createEmbeddedView: undefined !,
+  createComponentView: undefined !,
+  createNgModuleRef: undefined !,
+  overrideProvider: undefined !,
+  overrideComponentView: undefined !,
+  clearOverrides: undefined !,
+  checkAndUpdateView: undefined !,
+  checkNoChangesView: undefined !,
+  destroyView: undefined !,
+  resolveDep: undefined !,
+  createDebugContext: undefined !,
+  handleEvent: undefined !,
+  updateDirectives: undefined !,
+  updateRenderer: undefined !,
+  dirtyParentQueries: undefined !,
+};
diff --git a/packages/core/src/view/util.ts b/packages/core/src/view/util.ts
new file mode 100644
index 000000000000..eade00199ef5
--- /dev/null
+++ b/packages/core/src/view/util.ts
@@ -0,0 +1,441 @@
+/**
+ * @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 {WrappedValue, devModeEqual} from '../change_detection/change_detection';
+import {SOURCE} from '../di/injector';
+import {ViewEncapsulation} from '../metadata/view';
+import {RendererType2} from '../render/api';
+import {looseIdentical, stringify} from '../util';
+import {expressionChangedAfterItHasBeenCheckedError} from './errors';
+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 = () => {};
+
+const _tokenKeyCache = new Map<any, string>();
+
+export function tokenKey(token: any): string {
+  let key = _tokenKeyCache.get(token);
+  if (!key) {
+    key = stringify(token) + '_' + _tokenKeyCache.size;
+    _tokenKeyCache.set(token, key);
+  }
+  return key;
+}
+
+export function unwrapValue(view: ViewData, nodeIdx: number, bindingIdx: number, value: any): any {
+  if (WrappedValue.isWrapped(value)) {
+    value = WrappedValue.unwrap(value);
+    const globalBindingIdx = view.def.nodes[nodeIdx].bindingIndex + bindingIdx;
+    const oldValue = WrappedValue.unwrap(view.oldValues[globalBindingIdx]);
+    view.oldValues[globalBindingIdx] = new WrappedValue(oldValue);
+  }
+  return value;
+}
+
+const UNDEFINED_RENDERER_TYPE_ID = '$$undefined';
+const EMPTY_RENDERER_TYPE_ID = '$$empty';
+
+// Attention: this function is called as top level function.
+// Putting any logic in here will destroy closure tree shaking!
+export function createRendererType2(values: {
+  styles: (string | any[])[],
+  encapsulation: ViewEncapsulation,
+  data: {[kind: string]: any[]}
+}): RendererType2 {
+  return {
+    id: UNDEFINED_RENDERER_TYPE_ID,
+    styles: values.styles,
+    encapsulation: values.encapsulation,
+    data: values.data
+  };
+}
+
+let _renderCompCount = 0;
+
+export function resolveRendererType2(type?: RendererType2 | null): RendererType2|null {
+  if (type && type.id === UNDEFINED_RENDERER_TYPE_ID) {
+    // first time we see this RendererType2. Initialize it...
+    const isFilled =
+        ((type.encapsulation != null && type.encapsulation !== ViewEncapsulation.None) ||
+         type.styles.length || Object.keys(type.data).length);
+    if (isFilled) {
+      type.id = `c${_renderCompCount++}`;
+    } else {
+      type.id = EMPTY_RENDERER_TYPE_ID;
+    }
+  }
+  if (type && type.id === EMPTY_RENDERER_TYPE_ID) {
+    type = null;
+  }
+  return type || null;
+}
+
+export function checkBinding(
+    view: ViewData, def: NodeDef, bindingIdx: number, value: any): boolean {
+  const oldValues = view.oldValues;
+  if ((view.state & ViewState.FirstCheck) ||
+      !looseIdentical(oldValues[def.bindingIndex + bindingIdx], value)) {
+    return true;
+  }
+  return false;
+}
+
+export function checkAndUpdateBinding(
+    view: ViewData, def: NodeDef, bindingIdx: number, value: any): boolean {
+  if (checkBinding(view, def, bindingIdx, value)) {
+    view.oldValues[def.bindingIndex + bindingIdx] = value;
+    return true;
+  }
+  return false;
+}
+
+export function checkBindingNoChanges(
+    view: ViewData, def: NodeDef, bindingIdx: number, value: any) {
+  const oldValue = view.oldValues[def.bindingIndex + bindingIdx];
+  if ((view.state & ViewState.BeforeFirstCheck) || !devModeEqual(oldValue, value)) {
+    const bindingName = def.bindings[bindingIdx].name;
+    throw expressionChangedAfterItHasBeenCheckedError(
+        Services.createDebugContext(view, def.nodeIndex), `${bindingName}: ${oldValue}`,
+        `${bindingName}: ${value}`, (view.state & ViewState.BeforeFirstCheck) !== 0);
+  }
+}
+
+export function markParentViewsForCheck(view: ViewData) {
+  let currView: ViewData|null = view;
+  while (currView) {
+    if (currView.def.flags & ViewFlags.OnPush) {
+      currView.state |= ViewState.ChecksEnabled;
+    }
+    currView = currView.viewContainerParent || currView.parent;
+  }
+}
+
+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|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 {
+  if (view.parent) {
+    const parentView = view.parent;
+    return asElementData(parentView, view.parentNodeDef !.nodeIndex);
+  }
+  return null;
+}
+
+/**
+ * for component views, this is the host element.
+ * for embedded views, this is the index of the parent node
+ * that contains the view container.
+ */
+export function viewParentEl(view: ViewData): NodeDef|null {
+  const parentView = view.parent;
+  if (parentView) {
+    return view.parentNodeDef !.parent;
+  } else {
+    return null;
+  }
+}
+
+export function renderNode(view: ViewData, def: NodeDef): any {
+  switch (def.flags & NodeFlags.Types) {
+    case NodeFlags.TypeElement:
+      return asElementData(view, def.nodeIndex).renderElement;
+    case NodeFlags.TypeText:
+      return asTextData(view, def.nodeIndex).renderText;
+  }
+}
+
+export function elementEventFullName(target: string | null, name: string): string {
+  return target ? `${target}:${name}` : name;
+}
+
+export function isComponentView(view: ViewData): boolean {
+  return !!view.parent && !!(view.parentNodeDef !.flags & NodeFlags.Component);
+}
+
+export function isEmbeddedView(view: ViewData): boolean {
+  return !!view.parent && !(view.parentNodeDef !.flags & NodeFlags.Component);
+}
+
+export function filterQueryId(queryId: number): number {
+  return 1 << (queryId % 32);
+}
+
+export function splitMatchedQueriesDsl(
+    matchedQueriesDsl: [string | number, QueryValueType][] | null): {
+  matchedQueries: {[queryId: string]: QueryValueType},
+  references: {[refId: string]: QueryValueType},
+  matchedQueryIds: number
+} {
+  const matchedQueries: {[queryId: string]: QueryValueType} = {};
+  let matchedQueryIds = 0;
+  const references: {[refId: string]: QueryValueType} = {};
+  if (matchedQueriesDsl) {
+    matchedQueriesDsl.forEach(([queryId, valueType]) => {
+      if (typeof queryId === 'number') {
+        matchedQueries[queryId] = valueType;
+        matchedQueryIds |= filterQueryId(queryId);
+      } else {
+        references[queryId] = valueType;
+      }
+    });
+  }
+  return {matchedQueries, references, matchedQueryIds};
+}
+
+export function splitDepsDsl(deps: ([DepFlags, any] | any)[], sourceName?: string): DepDef[] {
+  return deps.map(value => {
+    let token: any;
+    let flags: DepFlags;
+    if (Array.isArray(value)) {
+      [flags, token] = value;
+    } else {
+      flags = DepFlags.None;
+      token = value;
+    }
+    if (token && (typeof token === 'function' || typeof token === 'object') && sourceName) {
+      Object.defineProperty(token, SOURCE, {value: sourceName, configurable: true});
+    }
+    return {flags, token, tokenKey: tokenKey(token)};
+  });
+}
+
+export function getParentRenderElement(view: ViewData, renderHost: any, def: NodeDef): any {
+  let renderParent = def.renderParent;
+  if (renderParent) {
+    if ((renderParent.flags & NodeFlags.TypeElement) === 0 ||
+        (renderParent.flags & NodeFlags.ComponentView) === 0 ||
+        (renderParent.element !.componentRendererType &&
+         renderParent.element !.componentRendererType !.encapsulation ===
+             ViewEncapsulation.Native)) {
+      // only children of non components, or children of components with native encapsulation should
+      // be attached.
+      return asElementData(view, def.renderParent !.nodeIndex).renderElement;
+    }
+  } else {
+    return renderHost;
+  }
+}
+
+const DEFINITION_CACHE = new WeakMap<any, Definition<any>>();
+
+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;
+    DEFINITION_CACHE.set(factory, value);
+  }
+  return value;
+}
+
+export function rootRenderNodes(view: ViewData): any[] {
+  const renderNodes: any[] = [];
+  visitRootRenderNodes(view, RenderNodeAction.Collect, undefined, undefined, renderNodes);
+  return renderNodes;
+}
+
+export const enum RenderNodeAction {Collect, AppendChild, InsertBefore, RemoveChild}
+
+export function visitRootRenderNodes(
+    view: ViewData, action: RenderNodeAction, parentNode: any, nextSibling: any, target?: any[]) {
+  // We need to re-compute the parent node in case the nodes have been moved around manually
+  if (action === RenderNodeAction.RemoveChild) {
+    parentNode = view.renderer.parentNode(renderNode(view, view.def.lastRenderRootNode !));
+  }
+  visitSiblingRenderNodes(
+      view, action, 0, view.def.nodes.length - 1, parentNode, nextSibling, target);
+}
+
+export function visitSiblingRenderNodes(
+    view: ViewData, action: RenderNodeAction, startIndex: number, endIndex: number, parentNode: any,
+    nextSibling: any, target?: any[]) {
+  for (let i = startIndex; i <= endIndex; i++) {
+    const nodeDef = view.def.nodes[i];
+    if (nodeDef.flags & (NodeFlags.TypeElement | NodeFlags.TypeText | NodeFlags.TypeNgContent)) {
+      visitRenderNode(view, nodeDef, action, parentNode, nextSibling, target);
+    }
+    // jump to next sibling
+    i += nodeDef.childCount;
+  }
+}
+
+export function visitProjectedRenderNodes(
+    view: ViewData, ngContentIndex: number, action: RenderNodeAction, parentNode: any,
+    nextSibling: any, target?: any[]) {
+  let compView: ViewData|null = view;
+  while (compView && !isComponentView(compView)) {
+    compView = compView.parent;
+  }
+  const hostView = compView !.parent;
+  const hostElDef = viewParentEl(compView !);
+  const startIndex = hostElDef !.nodeIndex + 1;
+  const endIndex = hostElDef !.nodeIndex + hostElDef !.childCount;
+  for (let i = startIndex; i <= endIndex; i++) {
+    const nodeDef = hostView !.def.nodes[i];
+    if (nodeDef.ngContentIndex === ngContentIndex) {
+      visitRenderNode(hostView !, nodeDef, action, parentNode, nextSibling, target);
+    }
+    // jump to next sibling
+    i += nodeDef.childCount;
+  }
+  if (!hostView !.parent) {
+    // a root view
+    const projectedNodes = view.root.projectableNodes[ngContentIndex];
+    if (projectedNodes) {
+      for (let i = 0; i < projectedNodes.length; i++) {
+        execRenderNodeAction(view, projectedNodes[i], action, parentNode, nextSibling, target);
+      }
+    }
+  }
+}
+
+function visitRenderNode(
+    view: ViewData, nodeDef: NodeDef, action: RenderNodeAction, parentNode: any, nextSibling: any,
+    target?: any[]) {
+  if (nodeDef.flags & NodeFlags.TypeNgContent) {
+    visitProjectedRenderNodes(
+        view, nodeDef.ngContent !.index, action, parentNode, nextSibling, target);
+  } else {
+    const rn = renderNode(view, nodeDef);
+    if (action === RenderNodeAction.RemoveChild && (nodeDef.flags & NodeFlags.ComponentView) &&
+        (nodeDef.bindingFlags & BindingFlags.CatSyntheticProperty)) {
+      // Note: we might need to do both actions.
+      if (nodeDef.bindingFlags & (BindingFlags.SyntheticProperty)) {
+        execRenderNodeAction(view, rn, action, parentNode, nextSibling, target);
+      }
+      if (nodeDef.bindingFlags & (BindingFlags.SyntheticHostProperty)) {
+        const compView = asElementData(view, nodeDef.nodeIndex).componentView;
+        execRenderNodeAction(compView, rn, action, parentNode, nextSibling, target);
+      }
+    } else {
+      execRenderNodeAction(view, rn, action, parentNode, nextSibling, target);
+    }
+    if (nodeDef.flags & NodeFlags.EmbeddedViews) {
+      const embeddedViews = asElementData(view, nodeDef.nodeIndex).viewContainer !._embeddedViews;
+      for (let k = 0; k < embeddedViews.length; k++) {
+        visitRootRenderNodes(embeddedViews[k], action, parentNode, nextSibling, target);
+      }
+    }
+    if (nodeDef.flags & NodeFlags.TypeElement && !nodeDef.element !.name) {
+      visitSiblingRenderNodes(
+          view, action, nodeDef.nodeIndex + 1, nodeDef.nodeIndex + nodeDef.childCount, parentNode,
+          nextSibling, target);
+    }
+  }
+}
+
+function execRenderNodeAction(
+    view: ViewData, renderNode: any, action: RenderNodeAction, parentNode: any, nextSibling: any,
+    target?: any[]) {
+  const renderer = view.renderer;
+  switch (action) {
+    case RenderNodeAction.AppendChild:
+      renderer.appendChild(parentNode, renderNode);
+      break;
+    case RenderNodeAction.InsertBefore:
+      renderer.insertBefore(parentNode, renderNode, nextSibling);
+      break;
+    case RenderNodeAction.RemoveChild:
+      renderer.removeChild(parentNode, renderNode);
+      break;
+    case RenderNodeAction.Collect:
+      target !.push(renderNode);
+      break;
+  }
+}
+
+const NS_PREFIX_RE = /^:([^:]+):(.+)$/;
+
+export function splitNamespace(name: string): string[] {
+  if (name[0] === ':') {
+    const match = name.match(NS_PREFIX_RE) !;
+    return [match[1], match[2]];
+  }
+  return ['', name];
+}
+
+export function calcBindingFlags(bindings: BindingDef[]): BindingFlags {
+  let flags = 0;
+  for (let i = 0; i < bindings.length; i++) {
+    flags |= bindings[i].flags;
+  }
+  return flags;
+}
+
+export function interpolate(valueCount: number, constAndInterp: string[]): string {
+  let result = '';
+  for (let i = 0; i < valueCount * 2; i = i + 2) {
+    result = result + constAndInterp[i] + _toStringWithNull(constAndInterp[i + 1]);
+  }
+  return result + constAndInterp[valueCount * 2];
+}
+
+export function inlineInterpolate(
+    valueCount: number, c0: string, a1: any, c1: string, a2?: any, c2?: string, a3?: any,
+    c3?: string, a4?: any, c4?: string, a5?: any, c5?: string, a6?: any, c6?: string, a7?: any,
+    c7?: string, a8?: any, c8?: string, a9?: any, c9?: string): string {
+  switch (valueCount) {
+    case 1:
+      return c0 + _toStringWithNull(a1) + c1;
+    case 2:
+      return c0 + _toStringWithNull(a1) + c1 + _toStringWithNull(a2) + c2;
+    case 3:
+      return c0 + _toStringWithNull(a1) + c1 + _toStringWithNull(a2) + c2 + _toStringWithNull(a3) +
+          c3;
+    case 4:
+      return c0 + _toStringWithNull(a1) + c1 + _toStringWithNull(a2) + c2 + _toStringWithNull(a3) +
+          c3 + _toStringWithNull(a4) + c4;
+    case 5:
+      return c0 + _toStringWithNull(a1) + c1 + _toStringWithNull(a2) + c2 + _toStringWithNull(a3) +
+          c3 + _toStringWithNull(a4) + c4 + _toStringWithNull(a5) + c5;
+    case 6:
+      return c0 + _toStringWithNull(a1) + c1 + _toStringWithNull(a2) + c2 + _toStringWithNull(a3) +
+          c3 + _toStringWithNull(a4) + c4 + _toStringWithNull(a5) + c5 + _toStringWithNull(a6) + c6;
+    case 7:
+      return c0 + _toStringWithNull(a1) + c1 + _toStringWithNull(a2) + c2 + _toStringWithNull(a3) +
+          c3 + _toStringWithNull(a4) + c4 + _toStringWithNull(a5) + c5 + _toStringWithNull(a6) +
+          c6 + _toStringWithNull(a7) + c7;
+    case 8:
+      return c0 + _toStringWithNull(a1) + c1 + _toStringWithNull(a2) + c2 + _toStringWithNull(a3) +
+          c3 + _toStringWithNull(a4) + c4 + _toStringWithNull(a5) + c5 + _toStringWithNull(a6) +
+          c6 + _toStringWithNull(a7) + c7 + _toStringWithNull(a8) + c8;
+    case 9:
+      return c0 + _toStringWithNull(a1) + c1 + _toStringWithNull(a2) + c2 + _toStringWithNull(a3) +
+          c3 + _toStringWithNull(a4) + c4 + _toStringWithNull(a5) + c5 + _toStringWithNull(a6) +
+          c6 + _toStringWithNull(a7) + c7 + _toStringWithNull(a8) + c8 + _toStringWithNull(a9) + c9;
+    default:
+      throw new Error(`Does not support more than 9 expressions`);
+  }
+}
+
+function _toStringWithNull(v: any): string {
+  return v != null ? v.toString() : '';
+}
+
+export const EMPTY_ARRAY: any[] = [];
+export const EMPTY_MAP: {[key: string]: any} = {};
diff --git a/packages/core/src/view/view.ts b/packages/core/src/view/view.ts
new file mode 100644
index 000000000000..434473f435de
--- /dev/null
+++ b/packages/core/src/view/view.ts
@@ -0,0 +1,672 @@
+/**
+ * @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 {Renderer2} from '../render/api';
+
+import {checkAndUpdateElementDynamic, checkAndUpdateElementInline, createElement, listenToElementOutputs} from './element';
+import {expressionChangedAfterItHasBeenCheckedError} from './errors';
+import {appendNgContent} from './ng_content';
+import {callLifecycleHooksChildrenFirst, checkAndUpdateDirectiveDynamic, checkAndUpdateDirectiveInline, createDirectiveInstance, createPipeInstance, createProviderInstance} from './provider';
+import {checkAndUpdatePureExpressionDynamic, checkAndUpdatePureExpressionInline, createPureExpression} from './pure_expression';
+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, shiftInitState} from './types';
+import {NOOP, checkBindingNoChanges, isComponentView, markParentViewsForCheckProjectedViews, resolveDefinition, tokenKey} from './util';
+import {detachProjectedView} from './view_attach';
+
+export function viewDef(
+    flags: ViewFlags, nodes: NodeDef[], updateDirectives?: null | ViewUpdateFn,
+    updateRenderer?: null | ViewUpdateFn): ViewDefinition {
+  // clone nodes and set auto calculated values
+  let viewBindingCount = 0;
+  let viewDisposableCount = 0;
+  let viewNodeFlags = 0;
+  let viewRootNodeFlags = 0;
+  let viewMatchedQueries = 0;
+  let currentParent: NodeDef|null = null;
+  let currentRenderParent: NodeDef|null = null;
+  let currentElementHasPublicProviders = false;
+  let currentElementHasPrivateProviders = false;
+  let lastRenderRootNode: NodeDef|null = null;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    node.nodeIndex = i;
+    node.parent = currentParent;
+    node.bindingIndex = viewBindingCount;
+    node.outputIndex = viewDisposableCount;
+    node.renderParent = currentRenderParent;
+
+    viewNodeFlags |= node.flags;
+    viewMatchedQueries |= node.matchedQueryIds;
+
+    if (node.element) {
+      const elDef = node.element;
+      elDef.publicProviders =
+          currentParent ? currentParent.element !.publicProviders : Object.create(null);
+      elDef.allProviders = elDef.publicProviders;
+      // Note: We assume that all providers of an element are before any child element!
+      currentElementHasPublicProviders = false;
+      currentElementHasPrivateProviders = false;
+
+      if (node.element.template) {
+        viewMatchedQueries |= node.element.template.nodeMatchedQueries;
+      }
+    }
+    validateNode(currentParent, node, nodes.length);
+
+
+    viewBindingCount += node.bindings.length;
+    viewDisposableCount += node.outputs.length;
+
+    if (!currentRenderParent && (node.flags & NodeFlags.CatRenderNode)) {
+      lastRenderRootNode = node;
+    }
+
+    if (node.flags & NodeFlags.CatProvider) {
+      if (!currentElementHasPublicProviders) {
+        currentElementHasPublicProviders = true;
+        // Use prototypical inheritance to not get O(n^2) complexity...
+        currentParent !.element !.publicProviders =
+            Object.create(currentParent !.element !.publicProviders);
+        currentParent !.element !.allProviders = currentParent !.element !.publicProviders;
+      }
+      const isPrivateService = (node.flags & NodeFlags.PrivateProvider) !== 0;
+      const isComponent = (node.flags & NodeFlags.Component) !== 0;
+      if (!isPrivateService || isComponent) {
+        currentParent !.element !.publicProviders ![tokenKey(node.provider !.token)] = node;
+      } else {
+        if (!currentElementHasPrivateProviders) {
+          currentElementHasPrivateProviders = true;
+          // Use prototypical inheritance to not get O(n^2) complexity...
+          currentParent !.element !.allProviders =
+              Object.create(currentParent !.element !.publicProviders);
+        }
+        currentParent !.element !.allProviders ![tokenKey(node.provider !.token)] = node;
+      }
+      if (isComponent) {
+        currentParent !.element !.componentProvider = node;
+      }
+    }
+
+    if (currentParent) {
+      currentParent.childFlags |= node.flags;
+      currentParent.directChildFlags |= node.flags;
+      currentParent.childMatchedQueries |= node.matchedQueryIds;
+      if (node.element && node.element.template) {
+        currentParent.childMatchedQueries |= node.element.template.nodeMatchedQueries;
+      }
+    } else {
+      viewRootNodeFlags |= node.flags;
+    }
+
+    if (node.childCount > 0) {
+      currentParent = node;
+
+      if (!isNgContainer(node)) {
+        currentRenderParent = node;
+      }
+    } else {
+      // When the current node has no children, check if it is the last children of its parent.
+      // When it is, propagate the flags up.
+      // The loop is required because an element could be the last transitive children of several
+      // elements. We loop to either the root or the highest opened element (= with remaining
+      // children)
+      while (currentParent && i === currentParent.nodeIndex + currentParent.childCount) {
+        const newParent: NodeDef|null = currentParent.parent;
+        if (newParent) {
+          newParent.childFlags |= currentParent.childFlags;
+          newParent.childMatchedQueries |= currentParent.childMatchedQueries;
+        }
+        currentParent = newParent;
+        // We also need to update the render parent & account for ng-container
+        if (currentParent && isNgContainer(currentParent)) {
+          currentRenderParent = currentParent.renderParent;
+        } else {
+          currentRenderParent = currentParent;
+        }
+      }
+    }
+  }
+
+  const handleEvent: ViewHandleEventFn = (view, nodeIndex, eventName, event) =>
+      nodes[nodeIndex].element !.handleEvent !(view, eventName, event);
+
+  return {
+    // Will be filled later...
+    factory: null,
+    nodeFlags: viewNodeFlags,
+    rootNodeFlags: viewRootNodeFlags,
+    nodeMatchedQueries: viewMatchedQueries, flags,
+    nodes: nodes,
+    updateDirectives: updateDirectives || NOOP,
+    updateRenderer: updateRenderer || NOOP, handleEvent,
+    bindingCount: viewBindingCount,
+    outputCount: viewDisposableCount, lastRenderRootNode
+  };
+}
+
+function isNgContainer(node: NodeDef): boolean {
+  return (node.flags & NodeFlags.TypeElement) !== 0 && node.element !.name === null;
+}
+
+function validateNode(parent: NodeDef | null, node: NodeDef, nodeCount: number) {
+  const template = node.element && node.element.template;
+  if (template) {
+    if (!template.lastRenderRootNode) {
+      throw new Error(`Illegal State: Embedded templates without nodes are not allowed!`);
+    }
+    if (template.lastRenderRootNode &&
+        template.lastRenderRootNode.flags & NodeFlags.EmbeddedViews) {
+      throw new Error(
+          `Illegal State: Last root node of a template can't have embedded views, at index ${node.nodeIndex}!`);
+    }
+  }
+  if (node.flags & NodeFlags.CatProvider) {
+    const parentFlags = parent ? parent.flags : 0;
+    if ((parentFlags & NodeFlags.TypeElement) === 0) {
+      throw new Error(
+          `Illegal State: StaticProvider/Directive nodes need to be children of elements or anchors, at index ${node.nodeIndex}!`);
+    }
+  }
+  if (node.query) {
+    if (node.flags & NodeFlags.TypeContentQuery &&
+        (!parent || (parent.flags & NodeFlags.TypeDirective) === 0)) {
+      throw new Error(
+          `Illegal State: Content Query nodes need to be children of directives, at index ${node.nodeIndex}!`);
+    }
+    if (node.flags & NodeFlags.TypeViewQuery && parent) {
+      throw new Error(
+          `Illegal State: View Query nodes have to be top level nodes, at index ${node.nodeIndex}!`);
+    }
+  }
+  if (node.childCount) {
+    const parentEnd = parent ? parent.nodeIndex + parent.childCount : nodeCount - 1;
+    if (node.nodeIndex <= parentEnd && node.nodeIndex + node.childCount > parentEnd) {
+      throw new Error(
+          `Illegal State: childCount of node leads outside of parent, at index ${node.nodeIndex}!`);
+    }
+  }
+}
+
+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, viewDef);
+  initView(view, parent.component, context);
+  createViewNodes(view);
+  return view;
+}
+
+export function createRootView(root: RootData, def: ViewDefinition, context?: any): ViewData {
+  const view = createView(root, root.renderer, null, null, def);
+  initView(view, context, context);
+  createViewNodes(view);
+  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 {
+  const nodes: NodeData[] = new Array(def.nodes.length);
+  const disposables = def.outputCount ? new Array(def.outputCount) : null;
+  const view: ViewData = {
+    def,
+    parent,
+    viewContainerParent: null, parentNodeDef,
+    context: null,
+    component: null, nodes,
+    state: ViewState.CatInit, root, renderer,
+    oldValues: new Array(def.bindingCount), disposables,
+    initIndex: -1
+  };
+  return view;
+}
+
+function initView(view: ViewData, component: any, context: any) {
+  view.component = component;
+  view.context = context;
+}
+
+function createViewNodes(view: ViewData) {
+  let renderHost: any;
+  if (isComponentView(view)) {
+    const hostDef = view.parentNodeDef;
+    renderHost = asElementData(view.parent !, hostDef !.parent !.nodeIndex).renderElement;
+  }
+  const def = view.def;
+  const nodes = view.nodes;
+  for (let i = 0; i < def.nodes.length; i++) {
+    const nodeDef = def.nodes[i];
+    Services.setCurrentNode(view, i);
+    let nodeData: any;
+    switch (nodeDef.flags & NodeFlags.Types) {
+      case NodeFlags.TypeElement:
+        const el = createElement(view, renderHost, nodeDef) as any;
+        let componentView: ViewData = undefined !;
+        if (nodeDef.flags & NodeFlags.ComponentView) {
+          const compViewDef = resolveDefinition(nodeDef.element !.componentView !);
+          componentView = Services.createComponentView(view, nodeDef, compViewDef, el);
+        }
+        listenToElementOutputs(view, componentView, nodeDef, el);
+        nodeData = <ElementData>{
+          renderElement: el,
+          componentView,
+          viewContainer: null,
+          template: nodeDef.element !.template ? createTemplateData(view, nodeDef) : undefined
+        };
+        if (nodeDef.flags & NodeFlags.EmbeddedViews) {
+          nodeData.viewContainer = createViewContainerData(view, nodeDef, nodeData);
+        }
+        break;
+      case NodeFlags.TypeText:
+        nodeData = createText(view, renderHost, nodeDef) as any;
+        break;
+      case NodeFlags.TypeClassProvider:
+      case NodeFlags.TypeFactoryProvider:
+      case NodeFlags.TypeUseExistingProvider:
+      case NodeFlags.TypeValueProvider: {
+        nodeData = nodes[i];
+        if (!nodeData && !(nodeDef.flags & NodeFlags.LazyProvider)) {
+          const instance = createProviderInstance(view, nodeDef);
+          nodeData = <ProviderData>{instance};
+        }
+        break;
+      }
+      case NodeFlags.TypePipe: {
+        const instance = createPipeInstance(view, nodeDef);
+        nodeData = <ProviderData>{instance};
+        break;
+      }
+      case NodeFlags.TypeDirective: {
+        nodeData = nodes[i];
+        if (!nodeData) {
+          const instance = createDirectiveInstance(view, nodeDef);
+          nodeData = <ProviderData>{instance};
+        }
+        if (nodeDef.flags & NodeFlags.Component) {
+          const compView = asElementData(view, nodeDef.parent !.nodeIndex).componentView;
+          initView(compView, nodeData.instance, nodeData.instance);
+        }
+        break;
+      }
+      case NodeFlags.TypePureArray:
+      case NodeFlags.TypePureObject:
+      case NodeFlags.TypePurePipe:
+        nodeData = createPureExpression(view, nodeDef) as any;
+        break;
+      case NodeFlags.TypeContentQuery:
+      case NodeFlags.TypeViewQuery:
+        nodeData = createQuery() as any;
+        break;
+      case NodeFlags.TypeNgContent:
+        appendNgContent(view, renderHost, nodeDef);
+        // no runtime data needed for NgContent...
+        nodeData = undefined;
+        break;
+    }
+    nodes[i] = nodeData;
+  }
+  // Create the ViewData.nodes of component views after we created everything else,
+  // so that e.g. ng-content works
+  execComponentViewsAction(view, ViewAction.CreateViewNodes);
+
+  // fill static content and view queries
+  execQueriesAction(
+      view, NodeFlags.TypeContentQuery | NodeFlags.TypeViewQuery, NodeFlags.StaticQuery,
+      CheckType.CheckAndUpdate);
+}
+
+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;
+  }
+  shiftInitState(view, ViewState.InitState_BeforeInit, ViewState.InitState_CallingOnInit);
+  markProjectedViewsForCheck(view);
+  Services.updateDirectives(view, CheckType.CheckAndUpdate);
+  execEmbeddedViewsAction(view, ViewAction.CheckAndUpdate);
+  execQueriesAction(
+      view, NodeFlags.TypeContentQuery, NodeFlags.DynamicQuery, CheckType.CheckAndUpdate);
+  let callInit = shiftInitState(
+      view, ViewState.InitState_CallingOnInit, ViewState.InitState_CallingAfterContentInit);
+  callLifecycleHooksChildrenFirst(
+      view, NodeFlags.AfterContentChecked | (callInit ? NodeFlags.AfterContentInit : 0));
+
+  Services.updateRenderer(view, CheckType.CheckAndUpdate);
+
+  execComponentViewsAction(view, ViewAction.CheckAndUpdate);
+  execQueriesAction(
+      view, NodeFlags.TypeViewQuery, NodeFlags.DynamicQuery, CheckType.CheckAndUpdate);
+  callInit = shiftInitState(
+      view, ViewState.InitState_CallingAfterContentInit, ViewState.InitState_CallingAfterViewInit);
+  callLifecycleHooksChildrenFirst(
+      view, NodeFlags.AfterViewChecked | (callInit ? NodeFlags.AfterViewInit : 0));
+
+  if (view.def.flags & ViewFlags.OnPush) {
+    view.state &= ~ViewState.ChecksEnabled;
+  }
+  view.state &= ~(ViewState.CheckProjectedViews | ViewState.CheckProjectedView);
+  shiftInitState(view, ViewState.InitState_CallingAfterViewInit, ViewState.InitState_AfterInit);
+}
+
+export function checkAndUpdateNode(
+    view: ViewData, nodeDef: NodeDef, argStyle: ArgumentType, v0?: any, v1?: any, v2?: any,
+    v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any): boolean {
+  if (argStyle === ArgumentType.Inline) {
+    return checkAndUpdateNodeInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+  } else {
+    return checkAndUpdateNodeDynamic(view, nodeDef, v0);
+  }
+}
+
+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 {
+  switch (nodeDef.flags & NodeFlags.Types) {
+    case NodeFlags.TypeElement:
+      return checkAndUpdateElementInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+    case NodeFlags.TypeText:
+      return checkAndUpdateTextInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+    case NodeFlags.TypeDirective:
+      return checkAndUpdateDirectiveInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+    case NodeFlags.TypePureArray:
+    case NodeFlags.TypePureObject:
+    case NodeFlags.TypePurePipe:
+      return checkAndUpdatePureExpressionInline(
+          view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+    default:
+      throw 'unreachable';
+  }
+}
+
+function checkAndUpdateNodeDynamic(view: ViewData, nodeDef: NodeDef, values: any[]): boolean {
+  switch (nodeDef.flags & NodeFlags.Types) {
+    case NodeFlags.TypeElement:
+      return checkAndUpdateElementDynamic(view, nodeDef, values);
+    case NodeFlags.TypeText:
+      return checkAndUpdateTextDynamic(view, nodeDef, values);
+    case NodeFlags.TypeDirective:
+      return checkAndUpdateDirectiveDynamic(view, nodeDef, values);
+    case NodeFlags.TypePureArray:
+    case NodeFlags.TypePureObject:
+    case NodeFlags.TypePurePipe:
+      return checkAndUpdatePureExpressionDynamic(view, nodeDef, values);
+    default:
+      throw 'unreachable';
+  }
+}
+
+export function checkNoChangesNode(
+    view: ViewData, nodeDef: NodeDef, argStyle: ArgumentType, v0?: any, v1?: any, v2?: any,
+    v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any): any {
+  if (argStyle === ArgumentType.Inline) {
+    checkNoChangesNodeInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+  } else {
+    checkNoChangesNodeDynamic(view, nodeDef, v0);
+  }
+  // Returning false is ok here as we would have thrown in case of a change.
+  return false;
+}
+
+function checkNoChangesNodeInline(
+    view: ViewData, nodeDef: NodeDef, v0: any, v1: any, v2: any, v3: any, v4: any, v5: any, v6: any,
+    v7: any, v8: any, v9: any): void {
+  const bindLen = nodeDef.bindings.length;
+  if (bindLen > 0) checkBindingNoChanges(view, nodeDef, 0, v0);
+  if (bindLen > 1) checkBindingNoChanges(view, nodeDef, 1, v1);
+  if (bindLen > 2) checkBindingNoChanges(view, nodeDef, 2, v2);
+  if (bindLen > 3) checkBindingNoChanges(view, nodeDef, 3, v3);
+  if (bindLen > 4) checkBindingNoChanges(view, nodeDef, 4, v4);
+  if (bindLen > 5) checkBindingNoChanges(view, nodeDef, 5, v5);
+  if (bindLen > 6) checkBindingNoChanges(view, nodeDef, 6, v6);
+  if (bindLen > 7) checkBindingNoChanges(view, nodeDef, 7, v7);
+  if (bindLen > 8) checkBindingNoChanges(view, nodeDef, 8, v8);
+  if (bindLen > 9) checkBindingNoChanges(view, nodeDef, 9, v9);
+}
+
+function checkNoChangesNodeDynamic(view: ViewData, nodeDef: NodeDef, values: any[]): void {
+  for (let i = 0; i < values.length; i++) {
+    checkBindingNoChanges(view, nodeDef, i, values[i]);
+  }
+}
+
+/**
+ * Workaround https://github.com/angular/tsickle/issues/497
+ * @suppress {misplacedTypeAnnotation}
+ */
+function checkNoChangesQuery(view: ViewData, nodeDef: NodeDef) {
+  const queryList = asQueryList(view, nodeDef.nodeIndex);
+  if (queryList.dirty) {
+    throw expressionChangedAfterItHasBeenCheckedError(
+        Services.createDebugContext(view, nodeDef.nodeIndex),
+        `Query ${nodeDef.query!.id} not dirty`, `Query ${nodeDef.query!.id} dirty`,
+        (view.state & ViewState.BeforeFirstCheck) !== 0);
+  }
+}
+
+export function destroyView(view: ViewData) {
+  if (view.state & ViewState.Destroyed) {
+    return;
+  }
+  execEmbeddedViewsAction(view, ViewAction.Destroy);
+  execComponentViewsAction(view, ViewAction.Destroy);
+  callLifecycleHooksChildrenFirst(view, NodeFlags.OnDestroy);
+  if (view.disposables) {
+    for (let i = 0; i < view.disposables.length; i++) {
+      view.disposables[i]();
+    }
+  }
+  detachProjectedView(view);
+  if (view.renderer.destroyNode) {
+    destroyViewNodes(view);
+  }
+  if (isComponentView(view)) {
+    view.renderer.destroy();
+  }
+  view.state |= ViewState.Destroyed;
+}
+
+function destroyViewNodes(view: ViewData) {
+  const len = view.def.nodes.length;
+  for (let i = 0; i < len; i++) {
+    const def = view.def.nodes[i];
+    if (def.flags & NodeFlags.TypeElement) {
+      view.renderer.destroyNode !(asElementData(view, i).renderElement);
+    } else if (def.flags & NodeFlags.TypeText) {
+      view.renderer.destroyNode !(asTextData(view, i).renderText);
+    } else if (def.flags & NodeFlags.TypeContentQuery || def.flags & NodeFlags.TypeViewQuery) {
+      asQueryList(view, i).destroy();
+    }
+  }
+}
+
+enum ViewAction {
+  CreateViewNodes,
+  CheckNoChanges,
+  CheckNoChangesProjectedViews,
+  CheckAndUpdate,
+  CheckAndUpdateProjectedViews,
+  Destroy
+}
+
+function execComponentViewsAction(view: ViewData, action: ViewAction) {
+  const def = view.def;
+  if (!(def.nodeFlags & NodeFlags.ComponentView)) {
+    return;
+  }
+  for (let i = 0; i < def.nodes.length; i++) {
+    const nodeDef = def.nodes[i];
+    if (nodeDef.flags & NodeFlags.ComponentView) {
+      // a leaf
+      callViewAction(asElementData(view, i).componentView, action);
+    } else if ((nodeDef.childFlags & NodeFlags.ComponentView) === 0) {
+      // a parent with leafs
+      // no child is a component,
+      // then skip the children
+      i += nodeDef.childCount;
+    }
+  }
+}
+
+function execEmbeddedViewsAction(view: ViewData, action: ViewAction) {
+  const def = view.def;
+  if (!(def.nodeFlags & NodeFlags.EmbeddedViews)) {
+    return;
+  }
+  for (let i = 0; i < def.nodes.length; i++) {
+    const nodeDef = def.nodes[i];
+    if (nodeDef.flags & NodeFlags.EmbeddedViews) {
+      // a leaf
+      const embeddedViews = asElementData(view, i).viewContainer !._embeddedViews;
+      for (let k = 0; k < embeddedViews.length; k++) {
+        callViewAction(embeddedViews[k], action);
+      }
+    } else if ((nodeDef.childFlags & NodeFlags.EmbeddedViews) === 0) {
+      // a parent with leafs
+      // no child is a component,
+      // then skip the children
+      i += nodeDef.childCount;
+    }
+  }
+}
+
+function callViewAction(view: ViewData, action: ViewAction) {
+  const viewState = view.state;
+  switch (action) {
+    case ViewAction.CheckNoChanges:
+      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.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:
+      createViewNodes(view);
+      break;
+  }
+}
+
+function execProjectedViewsAction(view: ViewData, action: ViewAction) {
+  execEmbeddedViewsAction(view, action);
+  execComponentViewsAction(view, action);
+}
+
+function execQueriesAction(
+    view: ViewData, queryFlags: NodeFlags, staticDynamicQueryFlag: NodeFlags,
+    checkType: CheckType) {
+  if (!(view.def.nodeFlags & queryFlags) || !(view.def.nodeFlags & staticDynamicQueryFlag)) {
+    return;
+  }
+  const nodeCount = view.def.nodes.length;
+  for (let i = 0; i < nodeCount; i++) {
+    const nodeDef = view.def.nodes[i];
+    if ((nodeDef.flags & queryFlags) && (nodeDef.flags & staticDynamicQueryFlag)) {
+      Services.setCurrentNode(view, nodeDef.nodeIndex);
+      switch (checkType) {
+        case CheckType.CheckAndUpdate:
+          checkAndUpdateQuery(view, nodeDef);
+          break;
+        case CheckType.CheckNoChanges:
+          checkNoChangesQuery(view, nodeDef);
+          break;
+      }
+    }
+    if (!(nodeDef.childFlags & queryFlags) || !(nodeDef.childFlags & staticDynamicQueryFlag)) {
+      // no child has a matching query
+      // then skip the children
+      i += nodeDef.childCount;
+    }
+  }
+}
diff --git a/packages/core/src/view/view_attach.ts b/packages/core/src/view/view_attach.ts
new file mode 100644
index 000000000000..918ab5dd4bc6
--- /dev/null
+++ b/packages/core/src/view/view_attach.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 {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,
+    view: ViewData) {
+  let embeddedViews = elementData.viewContainer !._embeddedViews;
+  if (viewIndex === null || viewIndex === undefined) {
+    viewIndex = embeddedViews.length;
+  }
+  view.viewContainerParent = parentView;
+  addToArray(embeddedViews, viewIndex !, view);
+  attachProjectedView(elementData, view);
+
+  Services.dirtyParentQueries(view);
+
+  const prevView = viewIndex ! > 0 ? embeddedViews[viewIndex ! - 1] : null;
+  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 across 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) {
+    viewIndex = embeddedViews.length - 1;
+  }
+  if (viewIndex < 0) {
+    return null;
+  }
+  const view = embeddedViews[viewIndex];
+  view.viewContainerParent = null;
+  removeFromArray(embeddedViews, viewIndex);
+
+  // See attachProjectedView for why we don't update projectedViews here.
+  Services.dirtyParentQueries(view);
+
+  renderDetachView(view);
+
+  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;
+  const view = embeddedViews[oldViewIndex];
+  removeFromArray(embeddedViews, oldViewIndex);
+  if (newViewIndex == null) {
+    newViewIndex = embeddedViews.length;
+  }
+  addToArray(embeddedViews, newViewIndex, view);
+
+  // Note: Don't need to change projectedViews as the order in there
+  // as always invalid...
+
+  Services.dirtyParentQueries(view);
+
+  renderDetachView(view);
+  const prevView = newViewIndex > 0 ? embeddedViews[newViewIndex - 1] : null;
+  renderAttachEmbeddedView(elementData, prevView, view);
+
+  return view;
+}
+
+function renderAttachEmbeddedView(
+    elementData: ElementData, prevView: ViewData | null, view: ViewData) {
+  const prevRenderNode = prevView ? renderNode(prevView, prevView.def.lastRenderRootNode !) :
+                                    elementData.renderElement;
+  const parentNode = view.renderer.parentNode(prevRenderNode);
+  const nextSibling = view.renderer.nextSibling(prevRenderNode);
+  // Note: We can't check if `nextSibling` is present, as on WebWorkers it will always be!
+  // However, browsers automatically do `appendChild` when there is no `nextSibling`.
+  visitRootRenderNodes(view, RenderNodeAction.InsertBefore, parentNode, nextSibling, undefined);
+}
+
+export function renderDetachView(view: ViewData) {
+  visitRootRenderNodes(view, RenderNodeAction.RemoveChild, null, null, undefined);
+}
+
+function addToArray(arr: any[], index: number, value: any) {
+  // perf: array.push is faster than array.splice!
+  if (index >= arr.length) {
+    arr.push(value);
+  } else {
+    arr.splice(index, 0, value);
+  }
+}
+
+function removeFromArray(arr: any[], index: number) {
+  // perf: array.pop is faster than array.splice!
+  if (index >= arr.length - 1) {
+    arr.pop();
+  } else {
+    arr.splice(index, 1);
+  }
+}
diff --git a/packages/core/src/zone.ts b/packages/core/src/zone.ts
new file mode 100644
index 000000000000..e4f9a9906006
--- /dev/null
+++ b/packages/core/src/zone.ts
@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+
+// Public API for Zone
+export {NgZone} from './zone/ng_zone';
diff --git a/packages/core/src/zone/ng_zone.ts b/packages/core/src/zone/ng_zone.ts
new file mode 100644
index 000000000000..222254d2c8a0
--- /dev/null
+++ b/packages/core/src/zone/ng_zone.ts
@@ -0,0 +1,335 @@
+/**
+ * @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 {EventEmitter} from '../event_emitter';
+
+/**
+ * An injectable service for executing work inside or outside of the Angular zone.
+ *
+ * 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}.
+ *
+ * <!-- TODO: add/fix links to:
+ *   - docs explaining zones and the use of zones in Angular and change-detection
+ *   - link to runOutsideAngular/run (throughout this file!)
+ *   -->
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```
+ * import {Component, NgZone} from '@angular/core';
+ * import {NgIf} from '@angular/common';
+ *
+ * @Component({
+ *   selector: 'ng-zone-demo',
+ *   template: `
+ *     <h2>Demo: NgZone</h2>
+ *
+ *     <p>Progress: {{progress}}%</p>
+ *     <p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>
+ *
+ *     <button (click)="processWithinAngularZone()">Process within Angular zone</button>
+ *     <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
+ *   `,
+ * })
+ * export class NgZoneDemo {
+ *   progress: number = 0;
+ *   label: string;
+ *
+ *   constructor(private _ngZone: NgZone) {}
+ *
+ *   // Loop inside the Angular zone
+ *   // so the UI DOES refresh after each setTimeout cycle
+ *   processWithinAngularZone() {
+ *     this.label = 'inside';
+ *     this.progress = 0;
+ *     this._increaseProgress(() => console.log('Inside Done!'));
+ *   }
+ *
+ *   // Loop outside of the Angular zone
+ *   // so the UI DOES NOT refresh after each setTimeout cycle
+ *   processOutsideOfAngularZone() {
+ *     this.label = 'outside';
+ *     this.progress = 0;
+ *     this._ngZone.runOutsideAngular(() => {
+ *       this._increaseProgress(() => {
+ *         // reenter the Angular zone and display done
+ *         this._ngZone.run(() => { console.log('Outside Done!'); });
+ *       });
+ *     });
+ *   }
+ *
+ *   _increaseProgress(doneCallback: () => void) {
+ *     this.progress += 1;
+ *     console.log(`Current progress: ${this.progress}%`);
+ *
+ *     if (this.progress < 100) {
+ *       window.setTimeout(() => this._increaseProgress(doneCallback), 10);
+ *     } else {
+ *       doneCallback();
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @experimental
+ */
+export class NgZone {
+  readonly hasPendingMicrotasks: boolean = false;
+  readonly hasPendingMacrotasks: boolean = false;
+
+  /**
+   * Whether there are no outstanding microtasks or macrotasks.
+   */
+  readonly isStable: boolean = true;
+
+  /**
+   * 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 enqueued 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') {
+      throw new Error(`In this configuration Angular requires Zone.js`);
+    }
+
+    Zone.assertZonePatched();
+    const self = this as any as NgZonePrivate;
+    self._nesting = 0;
+
+    self._outer = self._inner = Zone.current;
+
+    if ((Zone as any)['wtfZoneSpec']) {
+      self._inner = self._inner.fork((Zone as any)['wtfZoneSpec']);
+    }
+
+    if ((Zone as any)['TaskTrackingZoneSpec']) {
+      self._inner = self._inner.fork(new ((Zone as any)['TaskTrackingZoneSpec'] as any));
+    }
+
+    if (enableLongStackTrace && (Zone as any)['longStackTraceZoneSpec']) {
+      self._inner = self._inner.fork((Zone as any)['longStackTraceZoneSpec']);
+    }
+
+    forkInnerZoneWithAngularBehavior(self);
+  }
+
+  static isInAngularZone(): boolean { return Zone.current.get('isAngularZone') === true; }
+
+  static assertInAngularZone(): void {
+    if (!NgZone.isInAngularZone()) {
+      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!');
+    }
+  }
+
+  /**
+   * Executes the `fn` function synchronously within the Angular zone 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`.
+   */
+  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<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 {@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.
+   */
+  runOutsideAngular<T>(fn: (...args: any[]) => T): T {
+    return (this as any as NgZonePrivate)._outer.run(fn) as T;
+  }
+}
+
+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);
+}
+
+/**
+ * Provides a noop implementation of `NgZone` which does nothing. This zone requires explicit calls
+ * to framework to perform rendering.
+ */
+export class NoopNgZone implements NgZone {
+  readonly hasPendingMicrotasks: boolean = false;
+  readonly hasPendingMacrotasks: boolean = false;
+  readonly isStable: boolean = true;
+  readonly onUnstable: EventEmitter<any> = new EventEmitter();
+  readonly onMicrotaskEmpty: EventEmitter<any> = new EventEmitter();
+  readonly onStable: EventEmitter<any> = new EventEmitter();
+  readonly onError: EventEmitter<any> = new EventEmitter();
+
+  run(fn: () => any): any { return fn(); }
+
+  runGuarded(fn: () => any): any { return fn(); }
+
+  runOutsideAngular(fn: () => any): any { return fn(); }
+
+  runTask<T>(fn: () => any): any { return fn(); }
+}
diff --git a/packages/core/test/BUILD.bazel b/packages/core/test/BUILD.bazel
new file mode 100644
index 000000000000..51c52457b18b
--- /dev/null
+++ b/packages/core/test/BUILD.bazel
@@ -0,0 +1,92 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*_node_only_spec.ts",
+            "render3/**/*.ts",
+            "ivy_local_empty_spec.ts",
+        ],
+    ),
+    deps = [
+        "//packages/animations",
+        "//packages/animations/browser",
+        "//packages/animations/browser/testing",
+        "//packages/common",
+        "//packages/compiler",
+        "//packages/compiler/testing",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser/animations",
+        "//packages/platform-browser/testing",
+        "//packages/private/testing",
+        "//packages/router",
+        "//packages/router/testing",
+        "@rxjs",
+        "@rxjs//operators",
+    ],
+)
+
+ts_library(
+    name = "ivy_local_empty_lib",
+    testonly = 1,
+    srcs = ["ivy_local_empty_spec.ts"],
+    deps = [
+        "//packages:types",
+    ],
+)
+
+ts_library(
+    name = "test_node_only_lib",
+    testonly = 1,
+    srcs = glob(["**/*_node_only_spec.ts"]),
+    deps = [
+        ":test_lib",
+        "//packages/compiler",
+        "//packages/compiler/testing",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-server",
+        "//packages/platform-server/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        ":test_node_only_lib",
+        "//packages/platform-server",
+        "//packages/platform-server/testing",
+        "//tools/testing:node",
+    ],
+)
+
+jasmine_node_test(
+    name = "ivy_local_empty_test",
+    bootstrap = ["angular/tools/testing/init_node_no_angular_spec.js"],
+    tags = [
+        "ivy-local",
+        "ivy-only",
+    ],
+    deps = [
+        ":ivy_local_empty_lib",
+        "//tools/testing:node_no_angular",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
new file mode 100644
index 000000000000..4aafeca02321
--- /dev/null
+++ b/packages/core/test/animation/animation_integration_spec.ts
@@ -0,0 +1,3754 @@
+/**
+ * @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, AnimationOptions, AnimationPlayer, NoopAnimationPlayer, animate, animateChild, group, keyframes, query, state, style, transition, trigger, ɵPRE_STYLE as PRE_STYLE} from '@angular/animations';
+import {AnimationDriver, ɵAnimationEngine, ɵNoopAnimationDriver as NoopAnimationDriver} from '@angular/animations/browser';
+import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
+import {ChangeDetectorRef, Component, HostBinding, HostListener, Inject, RendererFactory2, ViewChild} from '@angular/core';
+import {ɵDomRendererFactory2} from '@angular/platform-browser';
+import {ANIMATION_MODULE_TYPE, BrowserAnimationsModule, NoopAnimationsModule} 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';
+
+(function() {
+  // these tests are only mean't to be run within the DOM (for now)
+  if (isNode) return;
+
+  describe('animation 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]
+      });
+    });
+
+    describe('animation modules', function() {
+      it('should hint at BrowserAnimationsModule being used', () => {
+        TestBed.resetTestingModule();
+        TestBed.configureTestingModule(
+            {declarations: [SharedAnimationCmp], imports: [BrowserAnimationsModule]});
+
+        const fixture = TestBed.createComponent(SharedAnimationCmp);
+        const cmp = fixture.componentInstance;
+        expect(cmp.animationType).toEqual('BrowserAnimations');
+      });
+
+      it('should hint at NoopAnimationsModule being used', () => {
+        TestBed.resetTestingModule();
+        TestBed.configureTestingModule(
+            {declarations: [SharedAnimationCmp], imports: [NoopAnimationsModule]});
+
+        const fixture = TestBed.createComponent(SharedAnimationCmp);
+        const cmp = fixture.componentInstance;
+        expect(cmp.animationType).toEqual('NoopAnimations');
+      });
+    });
+
+    @Component({template: '<p>template text</p>'})
+    class SharedAnimationCmp {
+      constructor(@Inject(ANIMATION_MODULE_TYPE) public animationType: 'NoopAnimations'|
+                  'BrowserAnimations') {}
+    }
+
+    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');
+         }));
+
+      it('should always run .start callbacks before .done callbacks even for noop animations',
+         fakeAsync(() => {
+           @Component({
+             selector: 'cmp',
+             template: `
+                <div [@myAnimation]="exp" (@myAnimation.start)="cb('start')" (@myAnimation.done)="cb('done')"></div>
+          `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     transition('* => go', []),
+                   ]),
+             ]
+           })
+           class Cmp {
+             exp: any = false;
+             log: string[] = [];
+             cb(status: string) { this.log.push(status); }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp = 'go';
+           fixture.detectChanges();
+           expect(cmp.log).toEqual([]);
+
+           flushMicrotasks();
+           expect(cmp.log).toEqual(['start', 'done']);
+         }));
+
+      it('should emit the correct totalTime value for a noop-animation', fakeAsync(() => {
+           @Component({
+             selector: 'cmp',
+             template: `
+                <div [@myAnimation]="exp" (@myAnimation.start)="cb($event)" (@myAnimation.done)="cb($event)"></div>
+          `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     transition(
+                         '* => go',
+                         [
+                           animate('1s', style({opacity: 0})),
+                         ]),
+                   ]),
+             ]
+           })
+           class Cmp {
+             exp: any = false;
+             log: AnimationEvent[] = [];
+             cb(event: AnimationEvent) { this.log.push(event); }
+           }
+
+           TestBed.configureTestingModule({
+             declarations: [Cmp],
+             providers: [
+               {provide: AnimationDriver, useClass: NoopAnimationDriver},
+             ],
+           });
+
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp = 'go';
+           fixture.detectChanges();
+           expect(cmp.log).toEqual([]);
+
+           flushMicrotasks();
+           expect(cmp.log.length).toEqual(2);
+           const [start, end] = cmp.log;
+           expect(start.totalTime).toEqual(1000);
+           expect(end.totalTime).toEqual(1000);
+         }));
+    });
+
+    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({
+          selector: 'if-cmp',
+          template: `
+          <div *ngIf="exp" [@myAnimation]="exp"></div>
+        `,
+          animations: [trigger(
+              'myAnimation',
+              [transition(
+                  'void => *', [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;
+        cmp.exp = true;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().length).toEqual(1);
+        expect(getLog().pop() !.keyframes).toEqual([
+          {offset: 0, opacity: '0'}, {offset: 1, opacity: '1'}
+        ]);
+      });
+
+      it('should allow a transition to use a function to determine what method to run', () => {
+        let valueToMatch = '';
+        let capturedElement: any;
+        const transitionFn = (fromState: string, toState: string, element: any) => {
+          capturedElement = element;
+          return toState == valueToMatch;
+        };
+
+        @Component({
+          selector: 'if-cmp',
+          template: '<div #element [@myAnimation]="exp"></div>',
+          animations: [
+            trigger('myAnimation', [transition(
+                                       transitionFn,
+                                       [style({opacity: 0}), animate(1234, style({opacity: 1}))])]),
+          ]
+        })
+        class Cmp {
+          @ViewChild('element')
+          element: any;
+          exp: any = '';
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        valueToMatch = cmp.exp = 'something';
+        fixture.detectChanges();
+        const element = cmp.element.nativeElement;
+
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        let [p1] = players;
+        expect(p1.totalTime).toEqual(1234);
+        expect(capturedElement).toEqual(element);
+        resetLog();
+
+        valueToMatch = 'something-else';
+        cmp.exp = 'this-wont-match';
+        fixture.detectChanges();
+
+        players = getLog();
+        expect(players.length).toEqual(0);
+      });
+
+      it('should allow a transition to use a function to determine what method to run and expose any parameter values',
+         () => {
+           const transitionFn =
+               (fromState: string, toState: string, element: any, params: {[key: string]: any}) => {
+                 return params['doMatch'] == true;
+               };
+
+           @Component({
+             selector: 'if-cmp',
+             template: '<div [@myAnimation]="{value:exp, params: {doMatch:doMatch}}"></div>',
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [transition(
+                       transitionFn, [style({opacity: 0}), animate(3333, style({opacity: 1}))])]),
+             ]
+           })
+           class Cmp {
+             doMatch = false;
+             exp: any = '';
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.doMatch = true;
+           fixture.detectChanges();
+
+           let players = getLog();
+           expect(players.length).toEqual(1);
+           let [p1] = players;
+           expect(p1.totalTime).toEqual(3333);
+           resetLog();
+
+           cmp.doMatch = false;
+           cmp.exp = 'this-wont-match';
+           fixture.detectChanges();
+
+           players = getLog();
+           expect(players.length).toEqual(0);
+         });
+
+      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 always fire inner callbacks even if no animation is fired when a view is inserted',
+         fakeAsync(() => {
+           @Component({
+             selector: 'if-cmp',
+             template: `
+          <div *ngIf="exp">
+            <div @myAnimation (@myAnimation.start)="track($event)" (@myAnimation.done)="track($event)"></div>
+          </div>
+        `,
+             animations: [
+               trigger('myAnimation', []),
+             ]
+           })
+           class Cmp {
+             exp: any = false;
+             log: string[] = [];
+             track(event: any) { this.log.push(`${event.triggerName}-${event.phaseName}`); }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           expect(cmp.log).toEqual([]);
+
+           cmp.exp = true;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           expect(cmp.log).toEqual(['myAnimation-start', 'myAnimation-done']);
+         }));
+
+      it('should only turn a view removal as into `void` state transition', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div *ngIf="exp1" [@myAnimation]="exp2"></div>
+        `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition(
+                    'void <=> *', [style({width: '0px'}), animate(1000, style({width: '100px'}))]),
+                transition(
+                    '* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))]),
+              ])]
+        })
+        class Cmp {
+          exp1: any = false;
+          exp2: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        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;
+
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop() !.keyframes).toEqual([
+          {offset: 0, width: '0px'}, {offset: 1, width: '100px'}
+        ]);
+
+        resetState();
+        cmp.exp2 = false;
+
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop() !.keyframes).toEqual([
+          {offset: 0, height: '0px'}, {offset: 1, height: '100px'}
+        ]);
+
+        resetState();
+        cmp.exp2 = 0;
+
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop() !.keyframes).toEqual([
+          {offset: 0, height: '0px'}, {offset: 1, height: '100px'}
+        ]);
+
+        resetState();
+        cmp.exp2 = '';
+
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop() !.keyframes).toEqual([
+          {offset: 0, height: '0px'}, {offset: 1, height: '100px'}
+        ]);
+
+        resetState();
+        cmp.exp2 = undefined;
+
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop() !.keyframes).toEqual([
+          {offset: 0, height: '0px'}, {offset: 1, height: '100px'}
+        ]);
+
+        resetState();
+        cmp.exp1 = false;
+        cmp.exp2 = 'abc';
+
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop() !.keyframes).toEqual([
+          {offset: 0, width: '0px'}, {offset: 1, width: '100px'}
+        ]);
+      });
+
+      it('should stringify boolean triggers to `1` and `0`', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition('void => 1', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                transition('1 => 0', [style({opacity: 1}), animate(1000, style({opacity: 0}))])
+              ])]
+        })
+        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 = true;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop() !.keyframes).toEqual([
+          {offset: 0, opacity: '0'}, {offset: 1, opacity: '1'}
+        ]);
+
+        cmp.exp = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().pop() !.keyframes).toEqual([
+          {offset: 0, opacity: '1'}, {offset: 1, opacity: '0'}
+        ]);
+      });
+
+      it('should understand boolean values as `true` and `false` for transition animations', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+          animations: [
+            trigger(
+                'myAnimation',
+                [
+                  transition(
+                      'true => false',
+                      [
+                        style({opacity: 0}),
+                        animate(1234, style({opacity: 1})),
+                      ]),
+                  transition(
+                      'false => true',
+                      [
+                        style({opacity: 1}),
+                        animate(4567, style({opacity: 0})),
+                      ])
+                ]),
+          ]
+        })
+        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 = true;
+        fixture.detectChanges();
+
+        cmp.exp = false;
+        fixture.detectChanges();
+
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        let [player] = players;
+
+        expect(player.duration).toEqual(1234);
+      });
+
+      it('should understand boolean values as `true` and `false` for transition animations and apply the corresponding state() value',
+         () => {
+           @Component({
+             selector: 'if-cmp',
+             template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     state('true', style({color: 'red'})),
+                     state('false', style({color: 'blue'})),
+                     transition(
+                         'true <=> false',
+                         [
+                           animate(1000, style({color: 'gold'})),
+                           animate(1000),
+                         ]),
+                   ]),
+             ]
+           })
+           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 = false;
+           fixture.detectChanges();
+
+           cmp.exp = true;
+           fixture.detectChanges();
+
+           let players = getLog();
+           expect(players.length).toEqual(1);
+           let [player] = players;
+
+           expect(player.keyframes).toEqual([
+             {color: 'blue', offset: 0},
+             {color: 'gold', offset: 0.5},
+             {color: 'red', offset: 1},
+           ]);
+         });
+
+      it('should not throw an error if a trigger with the same name exists in separate components',
+         () => {
+           @Component({selector: 'cmp1', template: '...', animations: [trigger('trig', [])]})
+           class Cmp1 {
+           }
+
+           @Component({selector: 'cmp2', template: '...', animations: [trigger('trig', [])]})
+           class Cmp2 {
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp1, Cmp2]});
+           const cmp1 = TestBed.createComponent(Cmp1);
+           const cmp2 = TestBed.createComponent(Cmp2);
+         });
+
+      describe('host bindings', () => {
+        it('should trigger a state change animation from state => state on the component host element',
+           fakeAsync(() => {
+             @Component({
+               selector: 'my-cmp',
+               template: '...',
+               animations: [trigger(
+                   'myAnimation',
+                   [transition(
+                       'a => b',
+                       [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
+             })
+             class Cmp {
+               @HostBinding('@myAnimation')
+               exp = 'a';
+             }
+
+             TestBed.configureTestingModule({declarations: [Cmp]});
+
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+             fixture.detectChanges();
+             engine.flush();
+             expect(getLog().length).toEqual(0);
+
+             cmp.exp = 'b';
+             fixture.detectChanges();
+             engine.flush();
+             expect(getLog().length).toEqual(1);
+
+             const data = getLog().pop() !;
+             expect(data.element).toEqual(fixture.elementRef.nativeElement);
+             expect(data.keyframes).toEqual([{offset: 0, opacity: '0'}, {offset: 1, opacity: '1'}]);
+           }));
+
+        // nonAnimationRenderer => animationRenderer
+        it('should trigger a leave animation when the inner components host binding updates',
+           fakeAsync(() => {
+             @Component({
+               selector: 'parent-cmp',
+               template: `
+                <child-cmp *ngIf="exp"></child-cmp>
+              `
+             })
+             class ParentCmp {
+               public exp = true;
+             }
+
+             @Component({
+               selector: 'child-cmp',
+               template: '...',
+               animations: [trigger(
+                   'host',
+                   [transition(
+                       ':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))])])]
+             })
+             class ChildCmp {
+               @HostBinding('@host') public hostAnimation = true;
+             }
+
+             TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(ParentCmp);
+             const cmp = fixture.componentInstance;
+             fixture.detectChanges();
+             engine.flush();
+             expect(getLog().length).toEqual(0);
+
+             cmp.exp = false;
+             fixture.detectChanges();
+             expect(fixture.debugElement.nativeElement.children.length).toBe(1);
+
+             engine.flush();
+             expect(getLog().length).toEqual(1);
+
+             const [player] = getLog();
+             expect(player.keyframes).toEqual([
+               {opacity: '1', offset: 0},
+               {opacity: '0', offset: 1},
+             ]);
+
+             player.finish();
+             expect(fixture.debugElement.nativeElement.children.length).toBe(0);
+           }));
+
+        // animationRenderer => nonAnimationRenderer
+        it('should trigger a leave animation when the outer components element binding updates on the host component element',
+           fakeAsync(() => {
+             @Component({
+               selector: 'parent-cmp',
+               animations: [trigger(
+                   'host',
+                   [transition(
+                       ':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))])])],
+               template: `
+                <child-cmp *ngIf="exp" @host></child-cmp>
+              `
+             })
+             class ParentCmp {
+               public exp = true;
+             }
+
+             @Component({
+               selector: 'child-cmp',
+               template: '...',
+             })
+             class ChildCmp {
+             }
+
+             TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(ParentCmp);
+             const cmp = fixture.componentInstance;
+             fixture.detectChanges();
+             engine.flush();
+             expect(getLog().length).toEqual(0);
+
+             cmp.exp = false;
+             fixture.detectChanges();
+             expect(fixture.debugElement.nativeElement.children.length).toBe(1);
+
+             engine.flush();
+             expect(getLog().length).toEqual(1);
+
+             const [player] = getLog();
+             expect(player.keyframes).toEqual([
+               {opacity: '1', offset: 0},
+               {opacity: '0', offset: 1},
+             ]);
+
+             player.finish();
+             flushMicrotasks();
+             expect(fixture.debugElement.nativeElement.children.length).toBe(0);
+           }));
+
+        // animationRenderer => animationRenderer
+        it('should trigger a leave animation when both the inner and outer components trigger on the same element',
+           fakeAsync(() => {
+             @Component({
+               selector: 'parent-cmp',
+               animations: [trigger(
+                   'host',
+                   [transition(
+                       ':leave',
+                       [style({height: '100px'}), animate(1000, style({height: '0px'}))])])],
+               template: `
+                <child-cmp *ngIf="exp" @host></child-cmp>
+              `
+             })
+             class ParentCmp {
+               public exp = true;
+             }
+
+             @Component({
+               selector: 'child-cmp',
+               template: '...',
+               animations: [trigger(
+                   'host', [transition(
+                               ':leave',
+                               [style({width: '100px'}), animate(1000, style({width: '0px'}))])])]
+             })
+             class ChildCmp {
+               @HostBinding('@host') public hostAnimation = true;
+             }
+
+             TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(ParentCmp);
+             const cmp = fixture.componentInstance;
+             fixture.detectChanges();
+             engine.flush();
+             expect(getLog().length).toEqual(0);
+
+             cmp.exp = false;
+             fixture.detectChanges();
+             expect(fixture.debugElement.nativeElement.children.length).toBe(1);
+
+             engine.flush();
+             expect(getLog().length).toEqual(2);
+
+             const [p1, p2] = getLog();
+             expect(p1.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);
+           }));
+
+        it('should not throw when the host element is removed and no animation triggers',
+           fakeAsync(() => {
+             @Component({
+               selector: 'parent-cmp',
+               template: `
+                <child-cmp *ngIf="exp"></child-cmp>
+              `
+             })
+             class ParentCmp {
+               public exp = true;
+             }
+
+             @Component({
+               selector: 'child-cmp',
+               template: '...',
+               animations: [trigger('host', [transition('a => b', [style({height: '100px'})])])],
+             })
+             class ChildCmp {
+               @HostBinding('@host') public hostAnimation = 'a';
+             }
+
+             TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(ParentCmp);
+             const cmp = fixture.componentInstance;
+             fixture.detectChanges();
+             expect(fixture.debugElement.nativeElement.children.length).toBe(1);
+
+             engine.flush();
+             expect(getLog().length).toEqual(0);
+
+             cmp.exp = false;
+             fixture.detectChanges();
+             engine.flush();
+             flushMicrotasks();
+             expect(getLog().length).toEqual(0);
+             expect(fixture.debugElement.nativeElement.children.length).toBe(0);
+
+             flushMicrotasks();
+             expect(fixture.debugElement.nativeElement.children.length).toBe(0);
+           }));
+
+        it('should properly evaluate pre/auto-style values when components are inserted/removed which contain host animations',
+           fakeAsync(() => {
+             @Component({
+               selector: 'parent-cmp',
+               template: `
+                <child-cmp *ngFor="let item of items"></child-cmp>
+              `
+             })
+             class ParentCmp {
+               items: any[] = [1, 2, 3, 4, 5];
+             }
+
+             @Component({
+               selector: 'child-cmp',
+               template: '... child ...',
+               animations:
+                   [trigger('host', [transition(':leave', [animate(1000, style({opacity: 0}))])])]
+             })
+             class ChildCmp {
+               @HostBinding('@host') public hostAnimation = 'a';
+             }
+
+             TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(ParentCmp);
+             const cmp = fixture.componentInstance;
+             const element = fixture.nativeElement;
+             fixture.detectChanges();
+
+             cmp.items = [0, 2, 4, 6];  // 1,3,5 get removed
+             fixture.detectChanges();
+
+             const items = element.querySelectorAll('child-cmp');
+             for (let i = 0; i < items.length; i++) {
+               const item = items[i];
+               expect(item.style['display']).toBeFalsy();
+             }
+           }));
+      });
+
+      it('should cancel and merge in mid-animation styles into the follow-up animation, but only for animation keyframes that start right away',
+         () => {
+           @Component({
+          selector: 'ani-cmp',
+          template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition(
+                    'a => b',
+                    [
+                      style({'opacity': '0'}),
+                      animate(500, style({'opacity': '1'})),
+                    ]),
+                transition(
+                    'b => c',
+                    [
+                      group([
+                        animate(500, style({'width': '100px'})),
+                        animate(500, style({'height': '100px'})),
+                      ]),
+                      animate(500, keyframes([
+                        style({'opacity': '0'}),
+                        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 = 'a';
+           fixture.detectChanges();
+           engine.flush();
+           expect(getLog().length).toEqual(0);
+           resetLog();
+
+           cmp.exp = 'b';
+           fixture.detectChanges();
+           engine.flush();
+           expect(getLog().length).toEqual(1);
+           resetLog();
+
+           cmp.exp = 'c';
+           fixture.detectChanges();
+           engine.flush();
+
+           const players = getLog();
+           expect(players.length).toEqual(3);
+           const [p1, p2, p3] = players;
+           expect(p1.previousStyles).toEqual({opacity: AUTO_STYLE});
+           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 provide the styling of previous players that are grouped and queried and make sure match the players with the correct elements',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+          <div class="container" [@myAnimation]="exp">
+            <div class="inner"></div>
+          </div>
+        `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     transition(
+                         '1 => 2',
+                         [
+                           style({fontSize: '10px'}),
+                           query(
+                               '.inner',
+                               [
+                                 style({fontSize: '20px'}),
+                               ]),
+                           animate('1s', style({fontSize: '100px'})),
+                           query(
+                               '.inner',
+                               [
+                                 animate('1s', style({fontSize: '200px'})),
+                               ]),
+                         ]),
+                     transition(
+                         '2 => 3',
+                         [
+                           animate('1s', style({fontSize: '0px'})),
+                           query(
+                               '.inner',
+                               [
+                                 animate('1s', style({fontSize: '0px'})),
+                               ]),
+                         ]),
+                   ]),
+             ],
+           })
+           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();
+
+           cmp.exp = '1';
+           fixture.detectChanges();
+           resetLog();
+
+           cmp.exp = '2';
+           fixture.detectChanges();
+           resetLog();
+
+           cmp.exp = '3';
+           fixture.detectChanges();
+           const players = getLog();
+           expect(players.length).toEqual(2);
+           const [p1, p2] = players as MockAnimationPlayer[];
+
+           const pp1 = p1.previousPlayers as MockAnimationPlayer[];
+           expect(p1.element.classList.contains('container')).toBeTruthy();
+           for (let i = 0; i < pp1.length; i++) {
+             expect(pp1[i].element).toEqual(p1.element);
+           }
+
+           const pp2 = p2.previousPlayers as MockAnimationPlayer[];
+           expect(p2.element.classList.contains('inner')).toBeTruthy();
+           for (let i = 0; i < pp2.length; i++) {
+             expect(pp2[i].element).toEqual(p2.element);
+           }
+         });
+
+      it('should properly balance styles between states even if there are no destination state styles',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div @myAnimation *ngIf="exp"></div>
+          `,
+             animations: [trigger(
+                 'myAnimation',
+                 [
+                   state('void', style({opacity: 0, width: '0px', height: '0px'})),
+                   transition(':enter', animate(1000))
+                 ])]
+           })
+           class Cmp {
+             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();
+
+           const [p1] = getLog();
+           expect(p1.keyframes).toEqual([
+             {opacity: '0', width: '0px', height: '0px', offset: 0},
+             {opacity: AUTO_STYLE, width: AUTO_STYLE, height: AUTO_STYLE, offset: 1}
+           ]);
+         });
+
+      it('should not apply the destination styles if the final animate step already contains styles',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div @myAnimation *ngIf="exp"></div>
+          `,
+             animations: [trigger(
+                 'myAnimation',
+                 [
+                   state('void', style({color: 'red'})), state('*', style({color: 'blue'})),
+                   transition(
+                       ':enter',
+                       [style({fontSize: '0px '}), animate(1000, style({fontSize: '100px'}))])
+                 ])]
+           })
+           class Cmp {
+             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();
+
+           const players = getLog();
+           expect(players.length).toEqual(1);
+
+           // notice how the final color is NOT blue
+           expect(players[0].keyframes).toEqual([
+             {fontSize: '0px', color: 'red', offset: 0},
+             {fontSize: '100px', color: 'red', offset: 1}
+           ]);
+         });
+
+      it('should invoke an animation trigger that is state-less', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div *ngFor="let item of items" @myAnimation></div>
+          `,
+          animations: [trigger(
+              'myAnimation',
+              [transition(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])]
+        })
+        class Cmp {
+          items: number[] = [];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.items = [1, 2, 3, 4, 5];
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(5);
+
+        for (let i = 0; i < 5; i++) {
+          const item = getLog()[i];
+          expect(item.duration).toEqual(1000);
+          expect(item.keyframes).toEqual([{opacity: '0', offset: 0}, {opacity: '1', offset: 1}]);
+        }
+      });
+
+      it('should retain styles on the element once the animation is complete', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div #green @green></div>
+          `,
+          animations: [trigger(
+              'green',
+              [
+                state('*', style({backgroundColor: 'green'})), transition('* => *', animate(500))
+              ])]
+        })
+        class Cmp {
+          @ViewChild('green') public element: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+        engine.flush();
+
+        const player = engine.players.pop();
+        player.finish();
+
+        expect(getDOM().hasStyle(cmp.element.nativeElement, 'background-color', 'green'))
+            .toBeTruthy();
+      });
+
+      it('should retain state styles when the underlying DOM structure changes even if there are no insert/remove animations',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div class="item" *ngFor="let item of items" [@color]="colorExp">
+              {{ item }}
+            </div>
+          `,
+             animations: [trigger('color', [state('green', style({backgroundColor: 'green'}))])]
+           })
+           class Cmp {
+             public colorExp = 'green';
+             public items = [0, 1, 2, 3];
+
+             reorder() {
+               const temp = this.items[0];
+               this.items[0] = this.items[1];
+               this.items[1] = temp;
+             }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           fixture.detectChanges();
+
+           let elements: HTMLElement[] = fixture.nativeElement.querySelectorAll('.item');
+           assertBackgroundColor(elements[0], 'green');
+           assertBackgroundColor(elements[1], 'green');
+           assertBackgroundColor(elements[2], 'green');
+           assertBackgroundColor(elements[3], 'green');
+
+           elements[0].title = '0a';
+           elements[1].title = '1a';
+
+           cmp.reorder();
+           fixture.detectChanges();
+
+           elements = fixture.nativeElement.querySelectorAll('.item');
+           assertBackgroundColor(elements[0], 'green');
+           assertBackgroundColor(elements[1], 'green');
+           assertBackgroundColor(elements[2], 'green');
+           assertBackgroundColor(elements[3], 'green');
+
+           function assertBackgroundColor(element: HTMLElement, color: string) {
+             expect(element.style.getPropertyValue('background-color')).toEqual(color);
+           }
+         });
+
+      it('should retain state styles when the underlying DOM structure changes even if there are insert/remove animations',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div class="item" *ngFor="let item of items" [@color]="colorExp">
+              {{ item }}
+            </div>
+          `,
+             animations: [trigger(
+                 'color',
+                 [
+                   transition('* => *', animate(500)),
+                   state('green', style({backgroundColor: 'green'}))
+                 ])]
+           })
+           class Cmp {
+             public colorExp = 'green';
+             public items = [0, 1, 2, 3];
+
+             reorder() {
+               const temp = this.items[0];
+               this.items[0] = this.items[1];
+               this.items[1] = temp;
+             }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           fixture.detectChanges();
+
+           getLog().forEach(p => p.finish());
+
+           let elements: HTMLElement[] = fixture.nativeElement.querySelectorAll('.item');
+           assertBackgroundColor(elements[0], 'green');
+           assertBackgroundColor(elements[1], 'green');
+           assertBackgroundColor(elements[2], 'green');
+           assertBackgroundColor(elements[3], 'green');
+
+           elements[0].title = '0a';
+           elements[1].title = '1a';
+
+           cmp.reorder();
+           fixture.detectChanges();
+
+           getLog().forEach(p => p.finish());
+
+           elements = fixture.nativeElement.querySelectorAll('.item');
+           assertBackgroundColor(elements[0], 'green');
+           assertBackgroundColor(elements[1], 'green');
+           assertBackgroundColor(elements[2], 'green');
+           assertBackgroundColor(elements[3], 'green');
+
+           function assertBackgroundColor(element: HTMLElement, color: string) {
+             expect(element.style.getPropertyValue('background-color')).toEqual(color);
+           }
+         });
+
+      it('should animate removals of nodes to the `void` state for each animation trigger, but treat all auto styles as pre styles',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div *ngIf="exp" class="ng-if" [@trig1]="exp2" @trig2></div>
+          `,
+             animations: [
+               trigger(
+                   'trig1', [transition('state => void', [animate(1000, style({opacity: 0}))])]),
+               trigger('trig2', [transition(':leave', [animate(1000, style({width: '0px'}))])])
+             ]
+           })
+           class Cmp {
+             public exp = true;
+             public exp2 = 'state';
+           }
+
+           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();
+           resetLog();
+
+           const element = getDOM().querySelector(fixture.nativeElement, '.ng-if');
+           assertHasParent(element, true);
+
+           cmp.exp = false;
+           fixture.detectChanges();
+           engine.flush();
+
+           assertHasParent(element, true);
+
+           expect(getLog().length).toEqual(2);
+
+           const player2 = getLog().pop() !;
+           const player1 = getLog().pop() !;
+
+           expect(player2.keyframes).toEqual([
+             {width: PRE_STYLE, offset: 0},
+             {width: '0px', offset: 1},
+           ]);
+
+           expect(player1.keyframes).toEqual([
+             {opacity: PRE_STYLE, offset: 0}, {opacity: '0', offset: 1}
+           ]);
+
+           player2.finish();
+           player1.finish();
+           assertHasParent(element, false);
+         });
+
+      it('should properly cancel all existing animations when a removal occurs', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div *ngIf="exp" [@myAnimation]="exp"></div>
+          `,
+          animations: [
+            trigger(
+                'myAnimation',
+                [
+                  transition(
+                      '* => go', [style({width: '0px'}), animate(1000, style({width: '100px'}))]),
+                ]),
+          ]
+        })
+        class Cmp {
+          // TODO(issue/24571): remove '!'.
+          public exp !: string | null;
+        }
+
+        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();
+        expect(getLog().length).toEqual(1);
+        const [player1] = getLog();
+        resetLog();
+
+        let finished = false;
+        player1.onDone(() => finished = true);
+
+        let destroyed = false;
+        player1.onDestroy(() => destroyed = true);
+
+        cmp.exp = null;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(finished).toBeTruthy();
+        expect(destroyed).toBeTruthy();
+      });
+
+      it('should not run inner child animations when a parent is set to be removed', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div *ngIf="exp" class="parent" >
+              <div [@myAnimation]="exp2"></div>
+            </div>
+          `,
+          animations: [trigger(
+              'myAnimation', [transition('a => b', [animate(1000, style({width: '0px'}))])])]
+        })
+        class Cmp {
+          public exp = true;
+          public exp2 = '0';
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = true;
+        cmp.exp2 = 'a';
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = false;
+        cmp.exp2 = 'b';
+        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 update the final state styles when params update even if the expression hasn\'t changed',
+         fakeAsync(() => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div [@myAnimation]="{value:exp,params:{color:color}}"></div>
+          `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     state('*', style({color: '{{ color }}'}), {params: {color: 'black'}}),
+                     transition('* => 1', animate(500))
+                   ]),
+             ]
+           })
+           class Cmp {
+             public exp: any;
+             // TODO(issue/24571): remove '!'.
+             public color !: string | null;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = '1';
+           cmp.color = 'red';
+           fixture.detectChanges();
+           const player = getLog()[0] !;
+           const element = player.element;
+           player.finish();
+
+           flushMicrotasks();
+           expect(getDOM().hasStyle(element, 'color', 'red')).toBeTruthy();
+
+           cmp.exp = '1';
+           cmp.color = 'blue';
+           fixture.detectChanges();
+           resetLog();
+
+           flushMicrotasks();
+           expect(getDOM().hasStyle(element, 'color', 'blue')).toBeTruthy();
+
+           cmp.exp = '1';
+           cmp.color = null;
+           fixture.detectChanges();
+           resetLog();
+
+           flushMicrotasks();
+           expect(getDOM().hasStyle(element, 'color', 'black')).toBeTruthy();
+         }));
+
+      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 retain substituted styles on the element once the animation is complete if referenced in the final state',
+         fakeAsync(() => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div [@myAnimation]="{value:exp, params: { color: color }}"></div>
+          `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     state(
+                         'start', style({
+                           color: '{{ color }}',
+                           fontSize: '{{ fontSize }}px',
+                           width: '{{ width }}'
+                         }),
+                         {params: {color: 'red', fontSize: '200', width: '10px'}}),
+
+                     state(
+                         'final',
+                         style(
+                             {color: '{{ color }}', fontSize: '{{ fontSize }}px', width: '888px'}),
+                         {params: {color: 'green', fontSize: '50', width: '100px'}}),
+
+                     transition('start => final', animate(500)),
+                   ]),
+             ]
+           })
+           class Cmp {
+             public exp: any;
+             public color: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = 'start';
+           cmp.color = 'red';
+           fixture.detectChanges();
+           resetLog();
+
+           cmp.exp = 'final';
+           cmp.color = 'blue';
+           fixture.detectChanges();
+
+           const players = getLog();
+           expect(players.length).toEqual(1);
+           const [p1] = players;
+
+           expect(p1.keyframes).toEqual([
+             {color: 'red', fontSize: '200px', width: '10px', offset: 0},
+             {color: 'blue', fontSize: '50px', width: '888px', offset: 1}
+           ]);
+
+           const element = p1.element;
+           p1.finish();
+           flushMicrotasks();
+
+           expect(getDOM().hasStyle(element, 'color', 'blue')).toBeTruthy();
+           expect(getDOM().hasStyle(element, 'fontSize', '50px')).toBeTruthy();
+           expect(getDOM().hasStyle(element, 'width', '888px')).toBeTruthy();
+         }));
+
+      it('should only evaluate final state param substitutions from the expression and state values and not from the transition options ',
+         fakeAsync(() => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div [@myAnimation]="exp"></div>
+          `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     state(
+                         'start', style({
+                           width: '{{ width }}',
+                           height: '{{ height }}',
+                         }),
+                         {params: {width: '0px', height: '0px'}}),
+
+                     state(
+                         'final', style({
+                           width: '{{ width }}',
+                           height: '{{ height }}',
+                         }),
+                         {params: {width: '100px', height: '100px'}}),
+
+                     transition(
+                         'start => final', [animate(500)],
+                         {params: {width: '333px', height: '666px'}}),
+                   ]),
+             ]
+           })
+           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 = 'start';
+           fixture.detectChanges();
+           resetLog();
+
+           cmp.exp = 'final';
+           fixture.detectChanges();
+
+           const players = getLog();
+           expect(players.length).toEqual(1);
+           const [p1] = players;
+
+           expect(p1.keyframes).toEqual([
+             {width: '0px', height: '0px', offset: 0},
+             {width: '100px', height: '100px', offset: 1},
+           ]);
+
+           const element = p1.element;
+           p1.finish();
+           flushMicrotasks();
+
+           expect(getDOM().hasStyle(element, 'width', '100px')).toBeTruthy();
+           expect(getDOM().hasStyle(element, 'height', '100px')).toBeTruthy();
+         }));
+
+      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);
+          });
+        });
+      });
+
+      it('should animate nodes properly when they have been re-ordered', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+                <div *ngFor="let item of items" [class]="'class-' + item.value">
+                  <div [@myAnimation]="item.count">
+                    {{ item.value }}
+                  </div>
+                </div>
+              `,
+          animations: [
+            trigger(
+                'myAnimation',
+                [
+                  state('0', style({opacity: 0})), state('1', style({opacity: 0.4})),
+                  state('2', style({opacity: 0.8})), transition('* => 1, * => 2', [animate(1000)])
+                ]),
+          ]
+        })
+        class Cmp {
+          items = [
+            {value: '1', count: 0},
+            {value: '2', count: 0},
+            {value: '3', count: 0},
+            {value: '4', count: 0},
+            {value: '5', count: 0},
+          ];
+
+          reOrder() {
+            this.items = [
+              this.items[4],
+              this.items[1],
+              this.items[3],
+              this.items[0],
+              this.items[2],
+            ];
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        const one = cmp.items[0];
+        const two = cmp.items[1];
+        one.count++;
+        fixture.detectChanges();
+
+        cmp.reOrder();
+        fixture.detectChanges();
+        resetLog();
+
+        one.count++;
+        two.count++;
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+      });
+    });
+
+    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: `
+          <div *ngIf="exp" [@myAnimation]="exp" (@myAnimation.start)="callback($event)"></div>
+        `,
+             animations: [trigger(
+                 'myAnimation',
+                 [transition(
+                     'void => *',
+                     [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
+           })
+           class Cmp {
+             exp: any = false;
+             // TODO(issue/24571): remove '!'.
+             event !: AnimationEvent;
+
+             callback = (event: any) => { this.event = event; };
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp = 'true';
+           fixture.detectChanges();
+           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: `
+          <div *ngIf="exp" [@myAnimation123]="exp" (@myAnimation123.done)="callback($event)"></div>
+        `,
+             animations: [trigger(
+                 'myAnimation123',
+                 [transition(
+                     '* => b', [style({'opacity': '0'}), animate(999, style({'opacity': '1'}))])])],
+           })
+           class Cmp {
+             exp: any = false;
+             // TODO(issue/24571): remove '!'.
+             event !: AnimationEvent;
+
+             callback = (event: any) => { this.event = event; };
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = 'b';
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(cmp.event).toBeFalsy();
+
+           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', 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;
+             // TODO(issue/24571): remove '!'.
+             event1 !: AnimationEvent;
+             // TODO(issue/24571): remove '!'.
+             event2 !: AnimationEvent;
+             // tslint:disable:semicolon
+             callback1 = (event: any) => { this.event1 = event; };
+             // tslint:disable:semicolon
+             callback2 = (event: any) => { this.event2 = event; };
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp1 = 'a';
+           cmp.exp2 = 'b';
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(cmp.event1).toBeFalsy();
+           expect(cmp.event2).toBeFalsy();
+
+           const player1 = engine.players[0];
+           const player2 = engine.players[1];
+
+           player1.finish();
+           player2.finish();
+           expect(cmp.event1).toBeFalsy();
+           expect(cmp.event2).toBeFalsy();
+
+           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: `
+          <div [@ani1]="exp1" (@ani1.done)="callback1($event)" [@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;
+             // TODO(issue/24571): remove '!'.
+             event1 !: AnimationEvent;
+             // TODO(issue/24571): remove '!'.
+             event2 !: AnimationEvent;
+             callback1 = (event: any) => { this.event1 = event; };
+             callback2 = (event: any) => { this.event2 = event; };
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp1 = 'a';
+           cmp.exp2 = 'b';
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(cmp.event1).toBeFalsy();
+           expect(cmp.event2).toBeFalsy();
+
+           const player1 = engine.players[0];
+           const player2 = engine.players[1];
+
+           player1.finish();
+           player2.finish();
+           expect(cmp.event1).toBeFalsy();
+           expect(cmp.event2).toBeFalsy();
+
+           flushMicrotasks();
+           expect(cmp.event1.triggerName).toBeTruthy('ani1');
+           expect(cmp.event2.triggerName).toBeTruthy('ani2');
+         }));
+
+      it('should handle a leave animation for multiple triggers even if not all triggers have their own leave transition specified',
+         fakeAsync(() => {
+           @Component({
+             selector: 'if-cmp',
+             template: `
+               <div *ngIf="exp" @foo @bar>123</div>
+             `,
+             animations: [
+               trigger(
+                   'foo',
+                   [
+                     transition(
+                         ':enter',
+                         [
+                           style({opacity: 0}),
+                           animate(1000, style({opacity: 1})),
+                         ]),
+                   ]),
+               trigger(
+                   'bar',
+                   [
+                     transition(
+                         ':leave',
+                         [
+                           animate(1000, style({opacity: 0})),
+                         ]),
+                   ])
+             ],
+           })
+           class Cmp {
+             exp: boolean = false;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+           const fixture = TestBed.createComponent(Cmp);
+           const elm = fixture.elementRef.nativeElement;
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = true;
+           fixture.detectChanges();
+
+           let players = getLog();
+           expect(players.length).toEqual(1);
+           let [p1] = players;
+           p1.finish();
+           flushMicrotasks();
+           expect(elm.innerText.trim()).toEqual('123');
+
+           resetLog();
+           cmp.exp = false;
+           fixture.detectChanges();
+
+           players = getLog();
+           expect(players.length).toEqual(1);
+           [p1] = players;
+           p1.finish();
+           flushMicrotasks();
+           expect(elm.innerText.trim()).toEqual('');
+         }));
+
+      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: `...`,
+             animations: [trigger(
+                 'myAnimation2',
+                 [transition(
+                     'void => *',
+                     [style({'opacity': '0'}), animate(1000, style({'opacity': '1'}))])])],
+           })
+           class Cmp {
+             // TODO(issue/24571): remove '!'.
+             event !: AnimationEvent;
+
+             @HostBinding('@myAnimation2')
+             exp: any = false;
+
+             @HostListener('@myAnimation2.start', ['$event'])
+             callback = (event: any) => { this.event = event; }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp = 'TRUE';
+           fixture.detectChanges();
+           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({
+             selector: 'my-cmp',
+             template: `
+              <div [@myAnimation]="exp" (@myAnimation.start)="callback($event)" (@myAnimation.done)="callback($event)"></div>
+            `,
+             animations: [trigger('myAnimation', [])]
+           })
+           class Cmp {
+             // TODO(issue/24571): remove '!'.
+             exp !: string;
+             log: any[] = [];
+             callback = (event: any) => this.log.push(`${event.phaseName} => ${event.toState}`);
+           }
+
+           TestBed.configureTestingModule({
+             providers: [{provide: AnimationDriver, useClass: NoopAnimationDriver}],
+             declarations: [Cmp]
+           });
+
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = 'a';
+           fixture.detectChanges();
+           flushMicrotasks();
+           expect(cmp.log).toEqual(['start => a', 'done => a']);
+
+           cmp.log = [];
+           cmp.exp = 'b';
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           expect(cmp.log).toEqual(['start => b', 'done => b']);
+         }));
+
+      it('should fire callback events for leave animations even if there is no leave transition',
+         fakeAsync(() => {
+           @Component({
+             selector: 'my-cmp',
+             template: `
+              <div *ngIf="exp" @myAnimation (@myAnimation.start)="callback($event)" (@myAnimation.done)="callback($event)"></div>
+            `,
+             animations: [trigger('myAnimation', [])]
+           })
+           class Cmp {
+             exp: boolean = false;
+             log: any[] = [];
+             callback = (event: any) => {
+               const state = event.toState || '_default_';
+               this.log.push(`${event.phaseName} => ${state}`);
+             }
+           }
+
+           TestBed.configureTestingModule({
+             providers: [{provide: AnimationDriver, useClass: NoopAnimationDriver}],
+             declarations: [Cmp]
+           });
+
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = true;
+           fixture.detectChanges();
+           flushMicrotasks();
+           expect(cmp.log).toEqual(['start => _default_', 'done => _default_']);
+
+           cmp.log = [];
+
+           cmp.exp = false;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           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[] = [];
+             // TODO(issue/24571): remove '!'.
+             exp1 !: string;
+             // TODO(issue/24571): remove '!'.
+             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({ opacity: 1 }))
+              ])
+            ])
+          ]
+        })
+        class Cmp {
+                 log: string[] = [];
+                 events: {[name: string]: any} = {};
+                 // TODO(issue/24571): remove '!'.
+                 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 ensure state() values are applied when an animation is disabled', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableExp">
+                <div [@myAnimation]="exp" #elm></div>
+              </div>
+            `,
+            animations: [
+              trigger(
+                  'myAnimation',
+                  [
+                    state('1', style({height: '100px'})), state('2', style({height: '200px'})),
+                    state('3', style({height: '300px'})), transition('* => *', animate(500))
+                  ]),
+            ]
+          })
+          class Cmp {
+            exp: any = false;
+            disableExp = false;
+
+            @ViewChild('elm') public element: any;
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const engine = TestBed.get(ɵAnimationEngine);
+
+          function assertHeight(element: any, height: string) {
+            expect(element.style['height']).toEqual(height);
+          }
+
+          const cmp = fixture.componentInstance;
+          const element = cmp.element.nativeElement;
+          fixture.detectChanges();
+
+          cmp.disableExp = true;
+          cmp.exp = '1';
+          fixture.detectChanges();
+          assertHeight(element, '100px');
+
+          cmp.exp = '2';
+          fixture.detectChanges();
+          assertHeight(element, '200px');
+
+          cmp.exp = '3';
+          fixture.detectChanges();
+          assertHeight(element, '300px');
+        });
+
+        it('should 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(0);
+          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 = '';
+               // TODO(issue/24571): remove '!'.
+               startEvent !: AnimationEvent;
+               // TODO(issue/24571): remove '!'.
+               doneEvent !: AnimationEvent;
+             }
+
+             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(9876);
+             expect(cmp.startEvent.disabled).toBeTruthy();
+             expect(cmp.doneEvent.totalTime).toEqual(9876);
+             expect(cmp.doneEvent.disabled).toBeTruthy();
+
+             cmp.exp = '2';
+             cmp.disableExp = false;
+             fixture.detectChanges();
+             flushMicrotasks();
+             expect(cmp.startEvent.totalTime).toEqual(9876);
+             expect(cmp.startEvent.disabled).toBeFalsy();
+             // 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);
+           });
+
+        it('should treat the property as true when the expression is missing', () => {
+          @Component({
+            selector: 'parent-cmp',
+            animations: [
+              trigger(
+                  'myAnimation',
+                  [
+                    transition(
+                        '* => go',
+                        [
+                          style({opacity: 0}),
+                          animate(500, style({opacity: 1})),
+                        ]),
+                  ]),
+            ],
+            template: `
+              <div @.disabled>
+                <div [@myAnimation]="exp"></div>
+              </div>
+                `
+          })
+          class Cmp {
+            exp = '';
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          resetLog();
+
+          cmp.exp = 'go';
+          fixture.detectChanges();
+          expect(getLog().length).toEqual(0);
+        });
+
+        it('should respect parent/sub animations when the respective area in the DOM is disabled',
+           fakeAsync(() => {
+             @Component({
+               selector: 'parent-cmp',
+               animations: [
+                 trigger(
+                     'parent',
+                     [
+                       transition(
+                           '* => empty',
+                           [
+                             style({opacity: 0}),
+                             query(
+                                 '@child',
+                                 [
+                                   animateChild(),
+                                 ]),
+                             animate('1s', style({opacity: 1})),
+                           ]),
+                     ]),
+                 trigger(
+                     'child',
+                     [
+                       transition(
+                           ':leave',
+                           [
+                             animate('1s', style({opacity: 0})),
+                           ]),
+                     ]),
+               ],
+               template: `
+              <div [@.disabled]="disableExp" #container>
+                <div [@parent]="exp" (@parent.done)="onDone($event)">
+                  <div class="item" *ngFor="let item of items" @child (@child.done)="onDone($event)"></div>
+                </div>
+              </div>
+                `
+             })
+             class Cmp {
+               @ViewChild('container') public container: any;
+
+               disableExp = false;
+               exp = '';
+               items: any[] = [];
+               doneLog: any[] = [];
+
+               onDone(event: any) { this.doneLog.push(event); }
+             }
+
+             TestBed.configureTestingModule({declarations: [Cmp]});
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+             cmp.disableExp = true;
+             cmp.items = [0, 1, 2, 3, 4];
+             fixture.detectChanges();
+             flushMicrotasks();
+
+             cmp.exp = 'empty';
+             cmp.items = [];
+             cmp.doneLog = [];
+             fixture.detectChanges();
+             flushMicrotasks();
+
+             const elms = cmp.container.nativeElement.querySelectorAll('.item');
+             expect(elms.length).toEqual(0);
+
+             expect(cmp.doneLog.length).toEqual(6);
+           }));
+      });
+    });
+
+    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();
+    });
+
+    it('should continue to clean up DOM-related animation artificats even if a compiler-level error is thrown midway',
+       () => {
+         @Component({
+           selector: 'if-cmp',
+           animations: [
+             trigger(
+                 'foo',
+                 [
+                   transition('* => something', []),
+                 ]),
+           ],
+           template: `
+          value = {{ foo[bar] }}
+          <div #contents>
+            <div *ngIf="exp">1</div>
+            <div *ngIf="exp" @foo>2</div>
+            <div *ngIf="exp" [@foo]="'123'">3</div>
+          </div>
+        `,
+         })
+         class Cmp {
+           exp: any = false;
+
+           @ViewChild('contents') public contents: any;
+         }
+
+         TestBed.configureTestingModule({declarations: [Cmp]});
+
+         const engine = TestBed.get(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(Cmp);
+
+         const runCD = () => fixture.detectChanges();
+         const cmp = fixture.componentInstance;
+
+         cmp.exp = true;
+         expect(runCD).toThrow();
+
+         const contents = cmp.contents.nativeElement;
+         expect(contents.innerText.replace(/\s+/gm, '')).toEqual('123');
+
+         cmp.exp = false;
+         expect(runCD).toThrow();
+
+         expect(contents.innerText.trim()).toEqual('');
+       });
+
+    describe('errors for not using the animation module', () => {
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          providers: [{provide: RendererFactory2, useExisting: ɵDomRendererFactory2}],
+        });
+      });
+
+      it('should throw when using an @prop binding without the animation module', () => {
+        @Component({template: `<div [@myAnimation]="true"></div>`})
+        class Cmp {
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+        const comp = TestBed.createComponent(Cmp);
+        expect(() => comp.detectChanges())
+            .toThrowError(
+                'Found the synthetic property @myAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.');
+      });
+
+      it('should throw when using an @prop listener without the animation module', () => {
+        @Component({template: `<div (@myAnimation.start)="a = true"></div>`})
+        class Cmp {
+          a: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        expect(() => TestBed.createComponent(Cmp))
+            .toThrowError(
+                'Found the synthetic listener @myAnimation.start. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.');
+
+      });
+    });
+  });
+})();
+
+function assertHasParent(element: any, yes: boolean) {
+  const parent = getDOM().parentElement(element);
+  if (yes) {
+    expect(parent).toBeTruthy();
+  } else {
+    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 000000000000..a0d63325c44e
--- /dev/null
+++ b/packages/core/test/animation/animation_query_integration_spec.ts
@@ -0,0 +1,3316 @@
+/**
+ * @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, group, query, sequence, 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';
+
+
+(function() {
+  // these tests are only mean't to be run within the DOM (for now)
+  if (isNode) 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.exp1 = 0;
+           cmp.exp2 = 0;
+           cmp.exp3 = 0;
+           cmp.exp4 = 0;
+           cmp.exp5 = 0;
+           fixture.detectChanges();
+
+           cmp.exp0 = 0;
+           fixture.detectChanges();
+
+           let players = engine.players;
+           cancelAllPlayers(players);
+
+           cmp.exp2 = 1;
+           cmp.exp4 = 1;
+           fixture.detectChanges();
+
+           cmp.exp0 = 1;
+           fixture.detectChanges();
+
+           players = engine.players;
+           cancelAllPlayers(players);
+           expect(players.length).toEqual(3);
+
+           cmp.exp1 = 2;
+           cmp.exp2 = 2;
+           cmp.exp3 = 2;
+           cmp.exp4 = 2;
+           cmp.exp5 = 2;
+           fixture.detectChanges();
+
+           cmp.exp0 = 2;
+           fixture.detectChanges();
+
+           players = engine.players;
+           cancelAllPlayers(players);
+           expect(players.length).toEqual(6);
+
+           cmp.exp0 = 3;
+           fixture.detectChanges();
+
+           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 {
+          // TODO(issue/24571): remove '!'.
+          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;
+             // TODO(issue/24571): remove '!'.
+             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;
+          // TODO(issue/24571): remove '!'.
+          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;
+          // TODO(issue/24571): remove '!'.
+          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;
+          // TODO(issue/24571): remove '!'.
+          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;
+             // TODO(issue/24571): remove '!'.
+             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;
+             // TODO(issue/24571): remove '!'.
+             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('options.limit', () => {
+        it('should limit results when a limit value is passed into the query options', () => {
+          @Component({
+            selector: 'cmp',
+            template: `
+             <div [@myAnimation]="exp">
+              <div *ngFor="let item of items" class="item">
+                {{ item }}
+              </div>
+             </div>
+          `,
+            animations: [
+              trigger(
+                  'myAnimation',
+                  [
+                    transition(
+                        '* => go',
+                        [
+                          query(
+                              '.item',
+                              [
+                                style({opacity: 0}),
+                                animate('1s', style({opacity: 1})),
+                              ],
+                              {limit: 2}),
+                        ]),
+                  ]),
+            ]
+          })
+          class Cmp {
+            public exp: any;
+            public items: any[] = [];
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.items = ['a', 'b', 'c', 'd', 'e'];
+          fixture.detectChanges();
+
+          cmp.exp = 'go';
+          fixture.detectChanges();
+
+          const players = getLog() as any[];
+          expect(players.length).toEqual(2);
+          expect(players[0].element.innerText.trim()).toEqual('a');
+          expect(players[1].element.innerText.trim()).toEqual('b');
+        });
+
+        it('should support negative limit values by pulling in elements from the end of the query',
+           () => {
+             @Component({
+               selector: 'cmp',
+               template: `
+             <div [@myAnimation]="exp">
+              <div *ngFor="let item of items" class="item">
+                {{ item }}
+              </div>
+             </div>
+          `,
+               animations: [
+                 trigger(
+                     'myAnimation',
+                     [
+                       transition(
+                           '* => go',
+                           [
+                             query(
+                                 '.item',
+                                 [
+                                   style({opacity: 0}),
+                                   animate('1s', style({opacity: 1})),
+                                 ],
+                                 {limit: -3}),
+                           ]),
+                     ]),
+               ]
+             })
+             class Cmp {
+               public exp: any;
+               public items: any[] = [];
+             }
+
+             TestBed.configureTestingModule({declarations: [Cmp]});
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+             cmp.items = ['a', 'b', 'c', 'd', 'e'];
+             fixture.detectChanges();
+
+             cmp.exp = 'go';
+             fixture.detectChanges();
+
+             const players = getLog() as any[];
+             expect(players.length).toEqual(3);
+             expect(players[0].element.innerText.trim()).toEqual('c');
+             expect(players[1].element.innerText.trim()).toEqual('d');
+             expect(players[2].element.innerText.trim()).toEqual('e');
+           });
+      });
+    });
+
+    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 fixture = TestBed.createComponent(ParentCmp);
+           const cmp = fixture.componentInstance;
+
+           fixture.detectChanges();
+
+           const childCmp = cmp.childElm;
+
+           cmp.exp = false;
+           fixture.detectChanges();
+           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 emulate a leave animation on a sub component\'s inner elements when a parent leave animation occurs with animateChild',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div @myAnimation *ngIf="exp" class="parent">
+              <child-cmp></child-cmp>
+            </div>
+          `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     transition(
+                         ':leave',
+                         [
+                           query('@*', animateChild()),
+                         ]),
+                   ]),
+             ]
+           })
+           class ParentCmp {
+             public exp: boolean = true;
+           }
+
+           @Component({
+             selector: 'child-cmp',
+             template: `
+               <section>
+                 <div class="inner-div" @myChildAnimation></div>
+               </section>
+             `,
+             animations: [
+               trigger(
+                   'myChildAnimation',
+                   [
+                     transition(
+                         ':leave',
+                         [
+                           style({opacity: 0}),
+                           animate('1s', style({opacity: 1})),
+                         ]),
+                   ]),
+             ]
+           })
+           class ChildCmp {
+           }
+
+           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(ParentCmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = true;
+           fixture.detectChanges();
+
+           cmp.exp = false;
+           fixture.detectChanges();
+
+           let players = getLog();
+           expect(players.length).toEqual(1);
+           const [player] = players;
+
+           expect(player.element.classList.contains('inner-div')).toBeTruthy();
+           expect(player.keyframes).toEqual([
+             {opacity: '0', offset: 0},
+             {opacity: '1', offset: 1},
+           ]);
+         });
+
+      it('should not cause a removal of inner @trigger DOM nodes when a parent animation occurs',
+         fakeAsync(() => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div @parent *ngIf="exp" class="parent">
+              this <div @child>child</div>
+            </div>
+          `,
+             animations: [
+               trigger(
+                   'parent',
+                   [
+                     transition(
+                         ':leave',
+                         [
+                           style({opacity: 0}),
+                           animate('1s', style({opacity: 1})),
+                         ]),
+                   ]),
+               trigger(
+                   'child',
+                   [
+                     transition(
+                         '* => something',
+                         [
+                           style({opacity: 0}),
+                           animate('1s', style({opacity: 1})),
+                         ]),
+                   ]),
+             ]
+           })
+           class Cmp {
+             public exp: boolean = true;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = true;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           cmp.exp = false;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           const players = getLog();
+           expect(players.length).toEqual(1);
+
+           const element = players[0] !.element;
+           expect(element.innerText.trim()).toMatch(/this\s+child/mg);
+         }));
+
+      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 {
+             // TODO(issue/24571): remove '!'.
+             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 {
+             // TODO(issue/24571): remove '!'.
+             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', 'c3-start', 'c3-done',
+             'p-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 fire and synchronize the start/done callbacks on sub triggers even if they are not allowed to animate within the animation',
+         fakeAsync(() => {
+           @Component({
+             selector: 'parent-cmp',
+             animations: [
+               trigger(
+                   'parent',
+                   [
+                     transition(
+                         '* => go',
+                         [
+                           style({height: '0px'}),
+                           animate(1000, style({height: '100px'})),
+                         ]),
+                   ]),
+             ],
+             template: `
+            <div *ngIf="!remove"
+                 [@parent]="exp"
+                 (@parent.start)="track($event)"
+                 (@parent.done)="track($event)">
+                 <child-cmp #child></child-cmp>
+            </div>
+          `
+           })
+           class ParentCmp {
+             @ViewChild('child') public childCmp: any;
+
+             public exp: any;
+             public log: string[] = [];
+             public remove = false;
+
+             track(event: any) { this.log.push(`${event.triggerName}-${event.phaseName}`); }
+           }
+
+           @Component({
+             selector: 'child-cmp',
+             animations: [
+               trigger(
+                   'child',
+                   [
+                     transition(
+                         '* => go',
+                         [
+                           style({width: '0px'}),
+                           animate(1000, style({width: '100px'})),
+                         ]),
+                   ]),
+             ],
+             template: `
+            <div [@child]="exp"
+                 (@child.start)="track($event)"
+                 (@child.done)="track($event)"></div>
+          `
+           })
+           class ChildCmp {
+             public exp: any;
+             public log: string[] = [];
+             track(event: any) { this.log.push(`${event.triggerName}-${event.phaseName}`); }
+           }
+
+           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(ParentCmp);
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           const cmp = fixture.componentInstance;
+           const child = cmp.childCmp;
+
+           expect(cmp.log).toEqual(['parent-start', 'parent-done']);
+           expect(child.log).toEqual(['child-start', 'child-done']);
+
+           cmp.log = [];
+           child.log = [];
+           cmp.exp = 'go';
+           cmp.childCmp.exp = 'go';
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           expect(cmp.log).toEqual(['parent-start']);
+           expect(child.log).toEqual(['child-start']);
+
+           const players = engine.players;
+           expect(players.length).toEqual(1);
+           players[0].finish();
+
+           expect(cmp.log).toEqual(['parent-start', 'parent-done']);
+           expect(child.log).toEqual(['child-start', 'child-done']);
+
+           cmp.log = [];
+           child.log = [];
+           cmp.remove = true;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           expect(cmp.log).toEqual(['parent-start', 'parent-done']);
+           expect(child.log).toEqual(['child-start', 'child-done']);
+         }));
+
+      it('should fire and synchronize the start/done callbacks on multiple blocked sub triggers',
+         fakeAsync(() => {
+           @Component({
+             selector: 'cmp',
+             animations: [
+               trigger(
+                   'parent1',
+                   [
+                     transition(
+                         '* => go, * => go-again',
+                         [
+                           style({opacity: 0}),
+                           animate('1s', style({opacity: 1})),
+                         ]),
+                   ]),
+               trigger(
+                   'parent2',
+                   [
+                     transition(
+                         '* => go, * => go-again',
+                         [
+                           style({lineHeight: '0px'}),
+                           animate('1s', style({lineHeight: '10px'})),
+                         ]),
+                   ]),
+               trigger(
+                   'child1',
+                   [
+                     transition(
+                         '* => go, * => go-again',
+                         [
+                           style({width: '0px'}),
+                           animate('1s', style({width: '100px'})),
+                         ]),
+                   ]),
+               trigger(
+                   'child2',
+                   [
+                     transition(
+                         '* => go, * => go-again',
+                         [
+                           style({height: '0px'}),
+                           animate('1s', style({height: '100px'})),
+                         ]),
+                   ]),
+             ],
+             template: `
+               <div [@parent1]="parent1Exp" (@parent1.start)="track($event)"
+                    [@parent2]="parent2Exp" (@parent2.start)="track($event)">
+                 <div [@child1]="child1Exp" (@child1.start)="track($event)"
+                      [@child2]="child2Exp" (@child2.start)="track($event)"></div>
+               </div>
+          `
+           })
+           class Cmp {
+             public parent1Exp = '';
+             public parent2Exp = '';
+             public child1Exp = '';
+             public child2Exp = '';
+             public log: string[] = [];
+
+             track(event: any) { this.log.push(`${event.triggerName}-${event.phaseName}`); }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           const cmp = fixture.componentInstance;
+           cmp.log = [];
+           cmp.parent1Exp = 'go';
+           cmp.parent2Exp = 'go';
+           cmp.child1Exp = 'go';
+           cmp.child2Exp = 'go';
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           expect(cmp.log).toEqual(
+               ['parent1-start', 'parent2-start', 'child1-start', 'child2-start']);
+
+           cmp.parent1Exp = 'go-again';
+           cmp.parent2Exp = 'go-again';
+           cmp.child1Exp = 'go-again';
+           cmp.child2Exp = 'go-again';
+           fixture.detectChanges();
+           flushMicrotasks();
+         }));
+
+      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'}
+           ]);
+         });
+
+      it('should scope :enter queries between sub animations', () => {
+        @Component({
+          selector: 'cmp',
+          animations: [
+            trigger(
+                'parent',
+                [
+                  transition(':enter', group([
+                               sequence([
+                                 style({opacity: 0}),
+                                 animate(1000, style({opacity: 1})),
+                               ]),
+                               query(':enter @child', animateChild()),
+                             ])),
+                ]),
+            trigger(
+                'child',
+                [
+                  transition(
+                      ':enter',
+                      [
+                        query(
+                            ':enter .item',
+                            [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                      ]),
+                ]),
+          ],
+          template: `
+               <div @parent *ngIf="exp1" class="container">
+                 <div *ngIf="exp2">
+                   <div @child>
+                     <div *ngIf="exp3">
+                       <div class="item"></div>
+                     </div>
+                   </div>
+                 </div>
+               </div>
+             `
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+          public exp3: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        fixture.detectChanges();
+        resetLog();
+
+        const cmp = fixture.componentInstance;
+        cmp.exp1 = true;
+        cmp.exp2 = true;
+        cmp.exp3 = true;
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+
+        const [p1, p2] = players;
+        expect(p1.element.classList.contains('container')).toBeTruthy();
+        expect(p2.element.classList.contains('item')).toBeTruthy();
+      });
+
+      it('should scope :leave queries between sub animations', () => {
+        @Component({
+          selector: 'cmp',
+          animations: [
+            trigger(
+                'parent',
+                [
+                  transition(':leave', group([
+                               sequence([
+                                 style({opacity: 0}),
+                                 animate(1000, style({opacity: 1})),
+                               ]),
+                               query(':leave @child', animateChild()),
+                             ])),
+                ]),
+            trigger(
+                'child',
+                [
+                  transition(
+                      ':leave',
+                      [
+                        query(
+                            ':leave .item',
+                            [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                      ]),
+                ]),
+          ],
+          template: `
+               <div @parent *ngIf="exp1" class="container">
+                 <div *ngIf="exp2">
+                   <div @child>
+                     <div *ngIf="exp3">
+                       <div class="item"></div>
+                     </div>
+                   </div>
+                 </div>
+               </div>
+             `
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+          public exp3: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp1 = true;
+        cmp.exp2 = true;
+        cmp.exp3 = true;
+        fixture.detectChanges();
+        resetLog();
+
+        cmp.exp1 = false;
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+
+        const [p1, p2] = players;
+        expect(p1.element.classList.contains('container')).toBeTruthy();
+        expect(p2.element.classList.contains('item')).toBeTruthy();
+      });
+    });
+
+    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 000000000000..3225a8727fc2
--- /dev/null
+++ b/packages/core/test/animation/animation_router_integration_spec.ts
@@ -0,0 +1,526 @@
+/**
+ * @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, group, query, sequence, 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, flushMicrotasks, tick} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ActivatedRoute, Router, RouterOutlet} from '@angular/router';
+import {RouterTestingModule} from '@angular/router/testing';
+
+(function() {
+  // these tests are only mean't to be run within the DOM (for now)
+  if (isNode) return;
+
+  describe('Animation Router Tests', function() {
+    function getLog(): MockAnimationPlayer[] {
+      return MockAnimationDriver.log as MockAnimationPlayer[];
+    }
+
+    function resetLog() { MockAnimationDriver.log = []; }
+
+    beforeEach(() => {
+      resetLog();
+      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');
+       }));
+
+    it('should allow a recursive set of :leave animations to occur for nested routes',
+       fakeAsync(() => {
+         @Component({selector: 'ani-cmp', template: '<router-outlet name="recur"></router-outlet>'})
+         class ContainerCmp {
+           constructor(private _router: Router) {}
+           log: string[] = [];
+
+           enter() { this._router.navigateByUrl('/(recur:recur/nested)'); }
+
+           leave() { this._router.navigateByUrl('/'); }
+         }
+
+         @Component({
+           selector: 'recur-page',
+           template: 'Depth: {{ depth }} \n <router-outlet></router-outlet>',
+           animations: [
+             trigger(
+                 'pageAnimations',
+                 [
+                   transition(':leave', [group([
+                                sequence([style({opacity: 1}), animate('1s', style({opacity: 0}))]),
+                                query('@*', animateChild(), {optional: true})
+                              ])]),
+                 ]),
+           ]
+         })
+         class RecurPageCmp {
+           @HostBinding('@pageAnimations') public animatePage = true;
+
+           @HostBinding('attr.data-depth') public depth = 0;
+
+           constructor(private container: ContainerCmp, private route: ActivatedRoute) {
+             this.route.data.subscribe(data => {
+               this.container.log.push(`DEPTH ${data.depth}`);
+               this.depth = data.depth;
+             });
+           }
+         }
+
+         TestBed.configureTestingModule({
+           declarations: [ContainerCmp, RecurPageCmp],
+           imports: [RouterTestingModule.withRoutes([{
+             path: 'recur',
+             component: RecurPageCmp,
+             outlet: 'recur',
+             data: {depth: 0},
+             children: [{path: 'nested', component: RecurPageCmp, data: {depth: 1}}]
+           }])]
+         });
+
+         const fixture = TestBed.createComponent(ContainerCmp);
+         const cmp = fixture.componentInstance;
+         cmp.enter();
+         tick();
+         fixture.detectChanges();
+         flushMicrotasks();
+
+         expect(cmp.log).toEqual([
+           'DEPTH 0',
+           'DEPTH 1',
+         ]);
+
+         cmp.leave();
+         tick();
+         fixture.detectChanges();
+
+         const players = getLog();
+         expect(players.length).toEqual(2);
+
+         const [p1, p2] = players;
+         expect(p1.element.getAttribute('data-depth')).toEqual('0');
+         expect(p2.element.getAttribute('data-depth')).toEqual('1');
+       }));
+  });
+});
+
+function makeAnimationData(value: string, params: {[key: string]: any} = {}): {[key: string]: any} {
+  return {'animation': {value, params}};
+}
diff --git a/packages/core/test/animation/animations_with_css_keyframes_animations_integration_spec.ts b/packages/core/test/animation/animations_with_css_keyframes_animations_integration_spec.ts
new file mode 100644
index 000000000000..22c1c498c578
--- /dev/null
+++ b/packages/core/test/animation/animations_with_css_keyframes_animations_integration_spec.ts
@@ -0,0 +1,329 @@
+/**
+ * @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, group, keyframes, query, state, style, transition, trigger} from '@angular/animations';
+import {AnimationDriver, ɵAnimationEngine as AnimationEngine, ɵCssKeyframesDriver as CssKeyframesDriver, ɵCssKeyframesPlayer as CssKeyframesPlayer} from '@angular/animations/browser';
+import {AnimationGroupPlayer} from '@angular/animations/src/players/animation_group_player';
+import {Component, ViewChild} from '@angular/core';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
+import {TestBed} from '../../testing';
+
+(function() {
+  // these tests are only mean't to be run within the DOM (for now)
+  // Buggy in Chromium 39, see https://github.com/angular/angular/issues/15793
+  if (isNode) return;
+
+  describe('animation integration tests using css keyframe animations', function() {
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [{provide: AnimationDriver, useClass: CssKeyframesDriver}],
+        imports: [BrowserAnimationsModule]
+      });
+    });
+
+    it('should compute (*) animation styles for a container that is being removed', () => {
+      @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',
+            [
+              state('void', style({height: '0px'})),
+              state('*', style({height: '*'})),
+              transition('* => *', animate(1000)),
+            ])]
+      })
+      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();
+
+      expect(engine.players.length).toEqual(1);
+      let player = getPlayer(engine) as CssKeyframesPlayer;
+      expect(player.keyframes).toEqual([{height: '0px', offset: 0}, {height: '100px', offset: 1}]);
+
+      player.finish();
+      if (browserDetection.isOldChrome) return;
+
+      cmp.exp = false;
+      fixture.detectChanges();
+
+      player = getPlayer(engine) as CssKeyframesPlayer;
+      expect(player.keyframes).toEqual([{height: '100px', offset: 0}, {height: '0px', offset: 1}]);
+    });
+
+    it('should cleanup all existing @keyframe <style> objects after the animation has finished',
+       () => {
+         @Component({
+           selector: 'ani-cmp',
+           template: `
+          <div [@myAnimation]="myAnimationExp">
+            <div>1</div>
+            <div>2</div>
+            <div>3</div>
+            <div>4</div>
+            <div>5</div>
+          </div>
+        `,
+           animations: [trigger(
+               'myAnimation',
+               [
+                 transition(
+                     '* => go',
+                     [
+                       query(
+                           'div',
+                           [
+                             style({opacity: 0}),
+                             animate('1s', style({opacity: 0})),
+                           ]),
+                     ]),
+               ])]
+         })
+         class Cmp {
+           public myAnimationExp = '';
+         }
+
+         TestBed.configureTestingModule({declarations: [Cmp]});
+
+         const engine = TestBed.get(AnimationEngine);
+         const fixture = TestBed.createComponent(Cmp);
+         const cmp = fixture.componentInstance;
+
+         cmp.myAnimationExp = 'go';
+         fixture.detectChanges();
+
+         const webPlayer = <AnimationGroupPlayer>getPlayer(engine);
+         const players = webPlayer.players as CssKeyframesPlayer[];
+         expect(players.length).toEqual(5);
+
+         const head = document.querySelector('head') !;
+         const sheets: any[] = [];
+         for (let i = 0; i < 5; i++) {
+           const sheet = findStyleObjectWithKeyframes(i);
+           expect(head.contains(sheet)).toBeTruthy();
+           sheets.push(sheet);
+         }
+
+         cmp.myAnimationExp = 'go-back';
+         fixture.detectChanges();
+
+         for (let i = 0; i < 5; i++) {
+           expect(head.contains(sheets[i])).toBeFalsy();
+         }
+       });
+
+    it('should properly handle easing values that are apart of the sequence', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
+          <div #elm [@myAnimation]="myAnimationExp"></div>
+        `,
+        animations: [
+          trigger(
+              'myAnimation',
+              [
+                transition(
+                    '* => goSteps',
+                    [
+                      style({opacity: 0}),
+                      animate('1s ease-out', style({opacity: 1})),
+                    ]),
+                transition(
+                    '* => goKeyframes',
+                    [
+                      animate('1s cubic-bezier(0.5, 1, 0.5, 1)', keyframes([
+                                style({opacity: 0}),
+                                style({opacity: 0.5}),
+                                style({opacity: 1}),
+                              ])),
+                    ]),
+              ]),
+        ]
+      })
+      class Cmp {
+        @ViewChild('elm') public element: any;
+
+        public myAnimationExp = '';
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.get(AnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.myAnimationExp = 'goSteps';
+      fixture.detectChanges();
+
+      let kfElm = findStyleObjectWithKeyframes();
+      const [r1, r2] = kfElm.sheet.cssRules[0].cssRules;
+      assertEasing(r1, 'ease-out');
+      assertEasing(r2, '');
+
+      const element = cmp.element.nativeElement;
+
+      const webPlayer = getPlayer(engine);
+      cmp.myAnimationExp = 'goKeyframes';
+      fixture.detectChanges();
+
+      assertEasing(element, 'cubic-bezier(0.5,1,0.5,1)');
+    });
+
+    it('should restore existing style values once the animation completes', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
+          <div #elm [@myAnimation]="myAnimationExp"></div>
+        `,
+        animations: [
+          trigger(
+              'myAnimation',
+              [
+                state('go', style({width: '200px'})),
+                transition(
+                    '* => go',
+                    [
+                      style({height: '100px', width: '100px'}), group([
+                        animate('1s', style({height: '200px'})),
+                        animate('1s', style({width: '200px'}))
+                      ])
+                    ]),
+              ]),
+        ]
+      })
+      class Cmp {
+        @ViewChild('elm') public element: any;
+
+        public myAnimationExp = '';
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.get(AnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      fixture.detectChanges();
+      const element = cmp.element.nativeElement;
+      element.style['width'] = '50px';
+      element.style['height'] = '50px';
+
+      assertStyle(element, 'width', '50px');
+      assertStyle(element, 'height', '50px');
+
+      cmp.myAnimationExp = 'go';
+      fixture.detectChanges();
+
+      const player = getPlayer(engine);
+
+      assertStyle(element, 'width', '100px');
+      assertStyle(element, 'height', '100px');
+
+      player.finish();
+
+      assertStyle(element, 'width', '200px');
+      assertStyle(element, 'height', '50px');
+    });
+
+    it('should clean up 0 second animation styles (queried styles) that contain camel casing when complete',
+       () => {
+         @Component({
+           selector: 'ani-cmp',
+           template: `
+          <div #elm [@myAnimation]="myAnimationExp">
+            <div class="foo"></div>
+            <div class="bar"></div>
+          </div>
+        `,
+           animations: [
+             trigger(
+                 'myAnimation',
+                 [
+                   state('go', style({width: '200px'})),
+                   transition(
+                       '* => go',
+                       [
+                         query('.foo', [style({maxHeight: '0px'})]),
+                         query(
+                             '.bar',
+                             [
+                               style({width: '0px'}),
+                               animate('1s', style({width: '100px'})),
+                             ]),
+                       ]),
+                 ]),
+           ]
+         })
+         class Cmp {
+           @ViewChild('elm') public element: any;
+
+           public myAnimationExp = '';
+         }
+
+         TestBed.configureTestingModule({declarations: [Cmp]});
+
+         const engine = TestBed.get(AnimationEngine);
+         const fixture = TestBed.createComponent(Cmp);
+         const cmp = fixture.componentInstance;
+
+         const elm = cmp.element.nativeElement;
+         const foo = elm.querySelector('.foo') as HTMLElement;
+
+         cmp.myAnimationExp = 'go';
+         fixture.detectChanges();
+
+         expect(foo.style.getPropertyValue('max-height')).toEqual('0px');
+
+         const player = engine.players.pop();
+         player.finish();
+
+         expect(foo.style.getPropertyValue('max-height')).toBeFalsy();
+       });
+  });
+})();
+
+function approximate(value: number, target: number) {
+  return Math.abs(target - value) / value;
+}
+
+function getPlayer(engine: AnimationEngine, index = 0) {
+  return (engine.players[index] as any) !.getRealPlayer();
+}
+
+function findStyleObjectWithKeyframes(index?: number): any|null {
+  const sheetWithKeyframes = document.styleSheets[document.styleSheets.length - (index || 1)];
+  const styleElms = Array.from(document.querySelectorAll('head style') as any as any[]);
+  return styleElms.find(elm => elm.sheet == sheetWithKeyframes) || null;
+}
+
+function assertEasing(node: any, easing: string) {
+  expect((node.style.animationTimingFunction || '').replace(/\s+/g, '')).toEqual(easing);
+}
+
+function assertStyle(node: any, prop: string, value: string) {
+  expect(node.style[prop] || '').toEqual(value);
+}
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
new file mode 100644
index 000000000000..53bdd3cd59bf
--- /dev/null
+++ b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
@@ -0,0 +1,463 @@
+/**
+ * @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, group, query, state, style, transition, trigger} from '@angular/animations';
+import {AnimationDriver, ɵAnimationEngine, ɵWebAnimationsDriver, ɵWebAnimationsPlayer, ɵsupportsWebAnimations} from '@angular/animations/browser';
+import {TransitionAnimationPlayer} from '@angular/animations/browser/src/render/transition_animation_engine';
+import {AnimationGroupPlayer} from '@angular/animations/src/players/animation_group_player';
+import {Component} from '@angular/core';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
+import {TestBed} from '../../testing';
+
+(function() {
+  // these tests are only mean't to be run within the DOM (for now)
+  // Buggy in Chromium 39, see https://github.com/angular/angular/issues/15793
+  if (isNode || !ɵsupportsWebAnimations()) return;
+
+  describe('animation integration tests using web animations', function() {
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [{provide: AnimationDriver, useClass: ɵWebAnimationsDriver}],
+        imports: [BrowserAnimationsModule]
+      });
+    });
+
+    it('should compute (*) animation styles for a container that is being removed', () => {
+      @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',
+            [
+              state('void', style({height: '0px'})), state('*', style({height: '*'})),
+              transition('* => *', animate(1000))
+            ])]
+      })
+      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();
+
+      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}
+      ]);
+
+      webPlayer.finish();
+
+      if (!browserDetection.isOldChrome) {
+        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 {
+        // TODO(issue/24571): remove '!'.
+        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.items = [0, 1, 2, 6];
+      fixture.detectChanges();
+      engine.flush();
+
+      expect(engine.players.length).toEqual(1);
+      player = engine.players[0];
+      webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
+
+      expect(webPlayer.keyframes).toEqual([
+        {height: '100px', offset: 0}, {height: '80px', offset: 1}
+      ]);
+    });
+
+    it('should treat * styles as ! when a removal animation is being rendered', () => {
+      @Component({
+        selector: 'ani-cmp',
+        styles: [`
+            .box {
+              width: 500px;
+              overflow:hidden;
+              background:orange;
+              line-height:300px;
+              font-size:100px;
+              text-align:center;
+            }
+          `],
+        template: `
+            <button (click)="toggle()">Open / Close</button>
+            <hr />
+            <div *ngIf="exp" @slide class="box">
+            ...
+            </div>
+          `,
+        animations: [trigger(
+            'slide',
+            [
+              state('void', style({height: '0px'})),
+              state('*', style({height: '*'})),
+              transition('* => *', animate('500ms')),
+            ])]
+      })
+      class Cmp {
+        exp = false;
+
+        toggle() { this.exp = !this.exp; }
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.get(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = true;
+      fixture.detectChanges();
+
+      let player = engine.players[0] !;
+      let webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
+      expect(webPlayer.keyframes).toEqual([
+        {height: '0px', offset: 0},
+        {height: '300px', offset: 1},
+      ]);
+      player.finish();
+
+      cmp.exp = false;
+      fixture.detectChanges();
+
+      player = engine.players[0] !;
+      webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
+      expect(webPlayer.keyframes).toEqual([
+        {height: '300px', offset: 0},
+        {height: '0px', offset: 1},
+      ]);
+    });
+
+    it('should treat * styles as ! for queried items that are collected in a container that is being removed',
+       () => {
+         @Component({
+            selector: 'my-app',
+            styles: [`
+              .list .outer {
+                overflow:hidden;
+              }
+              .list .inner {
+                line-height:50px;
+              }
+            `],
+            template: `
+              <button (click)="empty()">Empty</button>
+              <button (click)="middle()">Middle</button>
+              <button (click)="full()">Full</button>
+              <hr />
+              <div [@list]="exp" class="list">
+                <div *ngFor="let item of items" class="outer">
+                  <div class="inner">
+                    {{ item }}
+                  </div>
+                </div>
+              </div>
+            `,
+            animations: [
+              trigger('list', [
+                transition(':enter', []),
+                transition('* => empty', [
+                  query(':leave', [
+                    animate(500, style({ height: '0px' }))
+                  ])
+                ]),
+                transition('* => full', [
+                  query(':enter', [
+                    style({ height: '0px' }),
+                    animate(500, style({ height: '*' }))
+                  ])
+                ]),
+              ])
+            ]
+        })
+        class Cmp {
+           items: any[] = [];
+
+           get exp() { return this.items.length ? 'full' : 'empty'; }
+
+           empty() { this.items = []; }
+
+           full() { this.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.empty();
+         fixture.detectChanges();
+         let player = engine.players[0] !as TransitionAnimationPlayer;
+         player.finish();
+
+         cmp.full();
+         fixture.detectChanges();
+
+         player = engine.players[0] !as TransitionAnimationPlayer;
+         let queriedPlayers = (player.getRealPlayer() as AnimationGroupPlayer).players;
+         expect(queriedPlayers.length).toEqual(5);
+
+         let i = 0;
+         for (i = 0; i < queriedPlayers.length; i++) {
+           let player = queriedPlayers[i] as ɵWebAnimationsPlayer;
+           expect(player.keyframes).toEqual([
+             {height: '0px', offset: 0},
+             {height: '50px', offset: 1},
+           ]);
+           player.finish();
+         }
+
+         cmp.empty();
+         fixture.detectChanges();
+
+         player = engine.players[0] !as TransitionAnimationPlayer;
+         queriedPlayers = (player.getRealPlayer() as AnimationGroupPlayer).players;
+         expect(queriedPlayers.length).toEqual(5);
+
+         for (i = 0; i < queriedPlayers.length; i++) {
+           let player = queriedPlayers[i] as ɵWebAnimationsPlayer;
+           expect(player.keyframes).toEqual([
+             {height: '50px', offset: 0},
+             {height: '0px', 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 {
+        // TODO(issue/24571): remove '!'.
+        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.keyframes[0]['width'] as string), 150))
+          .toBeLessThan(0.05);
+      expect(approximate(parseFloat(webPlayer.keyframes[0]['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 {
+           // TODO(issue/24571): remove '!'.
+           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.keyframes[0]['width'] as string), 250))
+               .toBeLessThan(0.05);
+           expect(approximate(parseFloat(p.keyframes[0]['height'] as string), 500))
+               .toBeLessThan(0.05);
+         }
+       });
+  });
+})();
+
+function approximate(value: number, target: number) {
+  return Math.abs(target - value) / value;
+}
diff --git a/packages/core/test/application_init_spec.ts b/packages/core/test/application_init_spec.ts
new file mode 100644
index 000000000000..056a92923c6a
--- /dev/null
+++ b/packages/core/test/application_init_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 {Injector} from '@angular/core';
+import {APP_INITIALIZER, ApplicationInitStatus} from '../src/application_init';
+import {TestBed, async, inject} from '../testing';
+
+{
+  describe('ApplicationInitStatus', () => {
+    describe('no initializers', () => {
+
+      it('should return true for `done`',
+         async(inject([ApplicationInitStatus], (status: ApplicationInitStatus) => {
+           (status as any).runInitializers();
+           expect(status.done).toBe(true);
+         })));
+
+      it('should return a promise that resolves immediately for `donePromise`',
+         async(inject([ApplicationInitStatus], (status: ApplicationInitStatus) => {
+           (status as any).runInitializers();
+           status.donePromise.then(() => { expect(status.done).toBe(true); });
+         })));
+    });
+
+    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},
+            {
+              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) => {
+           (status as any).runInitializers();
+
+           setTimeout(() => {
+             completerResolver = true;
+             resolve(null);
+           });
+
+           expect(status.done).toBe(false);
+           status.donePromise.then(() => {
+             expect(status.done).toBe(true);
+             expect(completerResolver).toBe(true);
+           });
+         })));
+    });
+  });
+}
diff --git a/packages/core/test/application_module_spec.ts b/packages/core/test/application_module_spec.ts
new file mode 100644
index 000000000000..640063465837
--- /dev/null
+++ b/packages/core/test/application_module_spec.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 {LOCALE_ID} from '@angular/core';
+import {describe, expect, inject, it} from '../testing/src/testing_internal';
+
+{
+  describe('Application module', () => {
+    it('should set the default locale to "en-US"',
+       inject([LOCALE_ID], (defaultLocale: string) => { expect(defaultLocale).toEqual('en-US'); }));
+  });
+}
diff --git a/packages/core/test/application_ref_integration_spec.ts b/packages/core/test/application_ref_integration_spec.ts
new file mode 100644
index 000000000000..5b6eb9df3e12
--- /dev/null
+++ b/packages/core/test/application_ref_integration_spec.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 {ApplicationRef, Component, DoCheck, NgModule, OnInit, TestabilityRegistry, ɵivyEnabled as ivyEnabled} from '@angular/core';
+import {getTestBed} from '@angular/core/testing';
+import {BrowserModule} from '@angular/platform-browser';
+import {withBody} from '@angular/private/testing';
+
+import {NgModuleFactory} from '../src/render3/ng_module_ref';
+
+ivyEnabled && describe('ApplicationRef bootstrap', () => {
+  @Component({
+    selector: 'hello-world',
+    template: '<div>Hello {{ name }}</div>',
+  })
+  class HelloWorldComponent implements OnInit,
+      DoCheck {
+    log: string[] = [];
+    name = 'World';
+
+    ngOnInit(): void { this.log.push('OnInit'); }
+    ngDoCheck(): void { this.log.push('DoCheck'); }
+  }
+
+  @NgModule({
+    declarations: [HelloWorldComponent],
+    bootstrap: [HelloWorldComponent],
+    imports: [BrowserModule],
+  })
+  class MyAppModule {
+  }
+
+  it('should bootstrap hello world', withBody('<hello-world></hello-world>', async() => {
+       const MyAppModuleFactory = new NgModuleFactory(MyAppModule);
+       const moduleRef =
+           await getTestBed().platform.bootstrapModuleFactory(MyAppModuleFactory, {ngZone: 'noop'});
+       const appRef = moduleRef.injector.get(ApplicationRef);
+       const helloWorldComponent = appRef.components[0].instance as HelloWorldComponent;
+       expect(document.body.innerHTML).toEqual('<hello-world><div>Hello World</div></hello-world>');
+       expect(helloWorldComponent.log).toEqual(['OnInit', 'DoCheck']);
+
+       helloWorldComponent.name = 'Mundo';
+       appRef.tick();
+       expect(document.body.innerHTML).toEqual('<hello-world><div>Hello Mundo</div></hello-world>');
+       expect(helloWorldComponent.log).toEqual(['OnInit', 'DoCheck', 'DoCheck']);
+
+       // Cleanup TestabilityRegistry
+       const registry: TestabilityRegistry = getTestBed().get(TestabilityRegistry);
+       registry.unregisterAllApplications();
+     }));
+
+});
diff --git a/packages/core/test/application_ref_spec.ts b/packages/core/test/application_ref_spec.ts
new file mode 100644
index 000000000000..bdac3d0c1faf
--- /dev/null
+++ b/packages/core/test/application_ref_spec.ts
@@ -0,0 +1,599 @@
+/**
+ * @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 {APP_BOOTSTRAP_LISTENER, APP_INITIALIZER, Compiler, CompilerFactory, Component, NgModule, NgZone, PlatformRef, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
+import {ApplicationRef} from '@angular/core/src/application_ref';
+import {ErrorHandler} from '@angular/core/src/error_handler';
+import {ComponentRef} from '@angular/core/src/linker/component_factory';
+import {BrowserModule} from '@angular/platform-browser';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {DOCUMENT} from '@angular/platform-browser/src/dom/dom_tokens';
+import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+import {NoopNgZone} from '../src/zone/ng_zone';
+import {ComponentFixtureNoNgZone, TestBed, async, inject, withModule} from '../testing';
+
+@Component({selector: 'bootstrap-app', template: 'hello'})
+class SomeComponent {
+}
+
+{
+  describe('bootstrap', () => {
+    let mockConsole: MockConsole;
+
+    beforeEach(() => { mockConsole = new MockConsole(); });
+
+    function createRootEl(selector = 'bootstrap-app') {
+      const doc = TestBed.get(DOCUMENT);
+      const rootEl = <HTMLElement>getDOM().firstChild(
+          getDOM().content(getDOM().createTemplate(`<${selector}></${selector}>`)));
+      const oldRoots = getDOM().querySelectorAll(doc, selector);
+      for (let i = 0; i < oldRoots.length; i++) {
+        getDOM().remove(oldRoots[i]);
+      }
+      getDOM().appendChild(doc.body, rootEl);
+    }
+
+    type CreateModuleOptions = {providers?: any[], ngDoBootstrap?: any, bootstrap?: any[]};
+
+    function createModule(providers?: any[]): Type<any>;
+    function createModule(options: CreateModuleOptions): Type<any>;
+    function createModule(providersOrOptions: any[] | CreateModuleOptions | undefined): Type<any> {
+      let options: CreateModuleOptions = {};
+      if (providersOrOptions instanceof Array) {
+        options = {providers: providersOrOptions};
+      } else {
+        options = providersOrOptions || {};
+      }
+      const errorHandler = new ErrorHandler();
+      (errorHandler as any)._console = mockConsole as any;
+
+      const platformModule = getDOM().supportsDOMEvents() ?
+          BrowserModule :
+          require('@angular/platform-server').ServerModule;
+
+      @NgModule({
+        providers: [{provide: ErrorHandler, useValue: errorHandler}, options.providers || []],
+        imports: [platformModule],
+        declarations: [SomeComponent],
+        entryComponents: [SomeComponent],
+        bootstrap: options.bootstrap || []
+      })
+      class MyModule {
+      }
+      if (options.ngDoBootstrap !== false) {
+        (<any>MyModule.prototype).ngDoBootstrap = options.ngDoBootstrap || (() => {});
+      }
+      return MyModule;
+    }
+
+    it('should bootstrap a component from a child module',
+       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();
+         const modFactory = compiler.compileModuleSync(SomeModule);
+         const module = modFactory.create(TestBed);
+         const cmpFactory =
+             module.componentFactoryResolver.resolveComponentFactory(SomeComponent) !;
+         const component = app.bootstrap(cmpFactory);
+
+         // The component should see the child module providers
+         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', () => {
+        @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>[];
+        beforeEach(() => {
+          capturedCompRefs = [];
+          TestBed.configureTestingModule({
+            providers: [{
+              provide: APP_BOOTSTRAP_LISTENER,
+              multi: true,
+              useValue: (compRef: any) => { capturedCompRefs.push(compRef); }
+            }]
+          });
+        });
+
+        it('should be called when a component is bootstrapped',
+           inject([ApplicationRef], (ref: ApplicationRef) => {
+             createRootEl();
+             const compRef = ref.bootstrap(SomeComponent);
+             expect(capturedCompRefs).toEqual([compRef]);
+           }));
+      });
+
+      describe('bootstrap', () => {
+        it('should throw if an APP_INITIIALIZER is not yet resolved',
+           withModule(
+               {
+                 providers: [
+                   {provide: APP_INITIALIZER, useValue: () => new Promise(() => {}), multi: true}
+                 ]
+               },
+               inject([ApplicationRef], (ref: ApplicationRef) => {
+                 createRootEl();
+                 expect(() => ref.bootstrap(SomeComponent))
+                     .toThrowError(
+                         'Cannot bootstrap as there are still asynchronous initializers running. Bootstrap components in the `ngDoBootstrap` method of the root module.');
+               })));
+      });
+    });
+
+    describe('bootstrapModule', () => {
+      let defaultPlatform: PlatformRef;
+      beforeEach(inject([PlatformRef], (_platform: PlatformRef) => {
+        createRootEl();
+        defaultPlatform = _platform;
+      }));
+
+      it('should wait for asynchronous app initializers', async(() => {
+           let resolve: (result: any) => void;
+           const promise: Promise<any> = new Promise((res) => { resolve = res; });
+           let initializerDone = false;
+           setTimeout(() => {
+             resolve(true);
+             initializerDone = true;
+           }, 1);
+
+           defaultPlatform
+               .bootstrapModule(
+                   createModule([{provide: APP_INITIALIZER, useValue: () => promise, multi: true}]))
+               .then(_ => { expect(initializerDone).toBe(true); });
+         }));
+
+      it('should rethrow sync errors even if the exceptionHandler is not rethrowing', async(() => {
+           defaultPlatform
+               .bootstrapModule(createModule(
+                   [{provide: APP_INITIALIZER, useValue: () => { throw 'Test'; }, multi: true}]))
+               .then(() => expect(false).toBe(true), (e) => {
+                 expect(e).toBe('Test');
+                 // 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',
+         async(() => {
+           defaultPlatform
+               .bootstrapModule(createModule([
+                 {provide: APP_INITIALIZER, useValue: () => Promise.reject('Test'), multi: true}
+               ]))
+               .then(() => expect(false).toBe(true), (e) => {
+                 expect(e).toBe('Test');
+                 expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
+               });
+         }));
+
+      it('should throw useful error when ApplicationRef is not configured', async(() => {
+           @NgModule()
+           class EmptyModule {
+           }
+
+           return defaultPlatform.bootstrapModule(EmptyModule)
+               .then(() => fail('expecting error'), (error) => {
+                 expect(error.message)
+                     .toEqual('No ErrorHandler. Is platform module (BrowserModule) included?');
+               });
+         }));
+
+      it('should call the `ngDoBootstrap` method with `ApplicationRef` on the main module',
+         async(() => {
+           const ngDoBootstrap = jasmine.createSpy('ngDoBootstrap');
+           defaultPlatform.bootstrapModule(createModule({ngDoBootstrap: ngDoBootstrap}))
+               .then((moduleRef) => {
+                 const appRef = moduleRef.injector.get(ApplicationRef);
+                 expect(ngDoBootstrap).toHaveBeenCalledWith(appRef);
+               });
+         }));
+
+      it('should auto bootstrap components listed in @NgModule.bootstrap', async(() => {
+           defaultPlatform.bootstrapModule(createModule({bootstrap: [SomeComponent]}))
+               .then((moduleRef) => {
+                 const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
+                 expect(appRef.componentTypes).toEqual([SomeComponent]);
+               });
+         }));
+
+      it('should error if neither `ngDoBootstrap` nor @NgModule.bootstrap was specified',
+         async(() => {
+           defaultPlatform.bootstrapModule(createModule({ngDoBootstrap: false}))
+               .then(() => expect(false).toBe(true), (e) => {
+                 const expectedErrMsg =
+                     `The module MyModule was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. Please define one of these.`;
+                 expect(e.message).toEqual(expectedErrMsg);
+                 expect(mockConsole.res[0].join('#')).toEqual('ERROR#Error: ' + expectedErrMsg);
+               });
+         }));
+
+      it('should add bootstrapped module into platform modules list', async(() => {
+           defaultPlatform.bootstrapModule(createModule({bootstrap: [SomeComponent]}))
+               .then(module => expect((<any>defaultPlatform)._modules).toContain(module));
+         }));
+
+      it('should bootstrap with NoopNgZone', async(() => {
+           defaultPlatform
+               .bootstrapModule(createModule({bootstrap: [SomeComponent]}), {ngZone: 'noop'})
+               .then((module) => {
+                 const ngZone = module.injector.get(NgZone);
+                 expect(ngZone instanceof NoopNgZone).toBe(true);
+               });
+         }));
+    });
+
+    describe('bootstrapModuleFactory', () => {
+      let defaultPlatform: PlatformRef;
+      beforeEach(inject([PlatformRef], (_platform: PlatformRef) => {
+        createRootEl();
+        defaultPlatform = _platform;
+      }));
+      it('should wait for asynchronous app initializers', async(() => {
+           let resolve: (result: any) => void;
+           const promise: Promise<any> = new Promise((res) => { resolve = res; });
+           let initializerDone = false;
+           setTimeout(() => {
+             resolve(true);
+             initializerDone = true;
+           }, 1);
+
+           const compilerFactory: CompilerFactory =
+               defaultPlatform.injector.get(CompilerFactory, null);
+           const moduleFactory = compilerFactory.createCompiler().compileModuleSync(
+               createModule([{provide: APP_INITIALIZER, useValue: () => promise, multi: true}]));
+           defaultPlatform.bootstrapModuleFactory(moduleFactory).then(_ => {
+             expect(initializerDone).toBe(true);
+           });
+         }));
+
+      it('should rethrow sync errors even if the exceptionHandler is not rethrowing', async(() => {
+           const compilerFactory: CompilerFactory =
+               defaultPlatform.injector.get(CompilerFactory, null);
+           const moduleFactory = compilerFactory.createCompiler().compileModuleSync(createModule(
+               [{provide: APP_INITIALIZER, useValue: () => { throw 'Test'; }, multi: true}]));
+           expect(() => defaultPlatform.bootstrapModuleFactory(moduleFactory)).toThrow('Test');
+           // 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',
+         async(() => {
+           const compilerFactory: CompilerFactory =
+               defaultPlatform.injector.get(CompilerFactory, null);
+           const moduleFactory = compilerFactory.createCompiler().compileModuleSync(createModule(
+               [{provide: APP_INITIALIZER, useValue: () => Promise.reject('Test'), multi: true}]));
+           defaultPlatform.bootstrapModuleFactory(moduleFactory)
+               .then(() => expect(false).toBe(true), (e) => {
+                 expect(e).toBe('Test');
+                 expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
+               });
+         }));
+    });
+
+    describe('attachView / detachView', () => {
+      @Component({template: '{{name}}'})
+      class MyComp {
+        name = 'Initial';
+      }
+
+      @Component({template: '<ng-container #vc></ng-container>'})
+      class ContainerComp {
+        // TODO(issue/24571): remove '!'.
+        @ViewChild('vc', {read: ViewContainerRef})
+        vc !: ViewContainerRef;
+      }
+
+      @Component({template: '<ng-template #t>Dynamic content</ng-template>'})
+      class EmbeddedViewComp {
+        // TODO(issue/24571): remove '!'.
+        @ViewChild(TemplateRef)
+        tplRef !: TemplateRef<Object>;
+      }
+
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          declarations: [MyComp, ContainerComp, EmbeddedViewComp],
+          providers: [{provide: ComponentFixtureNoNgZone, useValue: true}]
+        });
+      });
+
+      it('should dirty check attached views', () => {
+        const comp = TestBed.createComponent(MyComp);
+        const appRef: ApplicationRef = TestBed.get(ApplicationRef);
+        expect(appRef.viewCount).toBe(0);
+
+        appRef.tick();
+        expect(comp.nativeElement).toHaveText('');
+
+        appRef.attachView(comp.componentRef.hostView);
+        appRef.tick();
+        expect(appRef.viewCount).toBe(1);
+        expect(comp.nativeElement).toHaveText('Initial');
+      });
+
+      it('should not dirty check detached views', () => {
+        const comp = TestBed.createComponent(MyComp);
+        const appRef: ApplicationRef = TestBed.get(ApplicationRef);
+
+        appRef.attachView(comp.componentRef.hostView);
+        appRef.tick();
+        expect(comp.nativeElement).toHaveText('Initial');
+
+        appRef.detachView(comp.componentRef.hostView);
+        comp.componentInstance.name = 'New';
+        appRef.tick();
+        expect(appRef.viewCount).toBe(0);
+        expect(comp.nativeElement).toHaveText('Initial');
+      });
+
+      it('should detach attached views if they are destroyed', () => {
+        const comp = TestBed.createComponent(MyComp);
+        const appRef: ApplicationRef = TestBed.get(ApplicationRef);
+
+        appRef.attachView(comp.componentRef.hostView);
+        comp.destroy();
+
+        expect(appRef.viewCount).toBe(0);
+      });
+
+      it('should detach attached embedded views if they are destroyed', () => {
+        const comp = TestBed.createComponent(EmbeddedViewComp);
+        const appRef: ApplicationRef = TestBed.get(ApplicationRef);
+        const embeddedViewRef = comp.componentInstance.tplRef.createEmbeddedView({});
+
+        appRef.attachView(embeddedViewRef);
+        embeddedViewRef.destroy();
+
+        expect(appRef.viewCount).toBe(0);
+      });
+
+      it('should not allow to attach a view to both, a view container and the ApplicationRef',
+         () => {
+           const comp = TestBed.createComponent(MyComp);
+           let hostView = comp.componentRef.hostView;
+           const containerComp = TestBed.createComponent(ContainerComp);
+           containerComp.detectChanges();
+           const vc = containerComp.componentInstance.vc;
+           const appRef: ApplicationRef = TestBed.get(ApplicationRef);
+
+           vc.insert(hostView);
+           expect(() => appRef.attachView(hostView))
+               .toThrowError('This view is already attached to a ViewContainer!');
+           hostView = vc.detach(0) !;
+
+           appRef.attachView(hostView);
+           expect(() => vc.insert(hostView))
+               .toThrowError('This view is already attached directly to the ApplicationRef!');
+         });
+    });
+  });
+
+  describe('AppRef', () => {
+    @Component({selector: 'sync-comp', template: `<span>{{text}}</span>`})
+    class SyncComp {
+      text: string = '1';
+    }
+
+    @Component({selector: 'click-comp', template: `<span (click)="onClick()">{{text}}</span>`})
+    class ClickComp {
+      text: string = '1';
+
+      onClick() { this.text += '1'; }
+    }
+
+    @Component({selector: 'micro-task-comp', template: `<span>{{text}}</span>`})
+    class MicroTaskComp {
+      text: string = '1';
+
+      ngOnInit() {
+        Promise.resolve(null).then((_) => { this.text += '1'; });
+      }
+    }
+
+    @Component({selector: 'macro-task-comp', template: `<span>{{text}}</span>`})
+    class MacroTaskComp {
+      text: string = '1';
+
+      ngOnInit() {
+        setTimeout(() => { this.text += '1'; }, 10);
+      }
+    }
+
+    @Component({selector: 'micro-macro-task-comp', template: `<span>{{text}}</span>`})
+    class MicroMacroTaskComp {
+      text: string = '1';
+
+      ngOnInit() {
+        Promise.resolve(null).then((_) => {
+          this.text += '1';
+          setTimeout(() => { this.text += '1'; }, 10);
+        });
+      }
+    }
+
+    @Component({selector: 'macro-micro-task-comp', template: `<span>{{text}}</span>`})
+    class MacroMicroTaskComp {
+      text: string = '1';
+
+      ngOnInit() {
+        setTimeout(() => {
+          this.text += '1';
+          Promise.resolve(null).then((_: any) => { this.text += '1'; });
+        }, 10);
+      }
+    }
+
+    let stableCalled = false;
+
+    beforeEach(() => {
+      stableCalled = false;
+      TestBed.configureTestingModule({
+        declarations: [
+          SyncComp, MicroTaskComp, MacroTaskComp, MicroMacroTaskComp, MacroMicroTaskComp, ClickComp
+        ],
+      });
+    });
+
+    afterEach(() => { expect(stableCalled).toBe(true, 'isStable did not emit true on stable'); });
+
+    function expectStableTexts(component: Type<any>, expected: string[]) {
+      const fixture = TestBed.createComponent(component);
+      const appRef: ApplicationRef = TestBed.get(ApplicationRef);
+      const zone: NgZone = TestBed.get(NgZone);
+      appRef.attachView(fixture.componentRef.hostView);
+      zone.run(() => appRef.tick());
+
+      let i = 0;
+      appRef.isStable.subscribe({
+        next: (stable: boolean) => {
+          if (stable) {
+            expect(i).toBeLessThan(expected.length);
+            expect(fixture.nativeElement).toHaveText(expected[i++]);
+            stableCalled = true;
+          }
+        }
+      });
+    }
+
+    it('isStable should fire on synchronous component loading',
+       async(() => { expectStableTexts(SyncComp, ['1']); }));
+
+    it('isStable should fire after a microtask on init is completed',
+       async(() => { expectStableTexts(MicroTaskComp, ['11']); }));
+
+    it('isStable should fire after a macrotask on init is completed',
+       async(() => { expectStableTexts(MacroTaskComp, ['11']); }));
+
+    it('isStable should fire only after chain of micro and macrotasks on init are completed',
+       async(() => { expectStableTexts(MicroMacroTaskComp, ['111']); }));
+
+    it('isStable should fire only after chain of macro and microtasks on init are completed',
+       async(() => { expectStableTexts(MacroMicroTaskComp, ['111']); }));
+
+    describe('unstable', () => {
+      let unstableCalled = false;
+
+      afterEach(
+          () => { expect(unstableCalled).toBe(true, 'isStable did not emit false on unstable'); });
+
+      function expectUnstable(appRef: ApplicationRef) {
+        appRef.isStable.subscribe({
+          next: (stable: boolean) => {
+            if (stable) {
+              stableCalled = true;
+            }
+            if (!stable) {
+              unstableCalled = true;
+            }
+          }
+        });
+      }
+
+      it('should be fired after app becomes unstable', async(() => {
+           const fixture = TestBed.createComponent(ClickComp);
+           const appRef: ApplicationRef = TestBed.get(ApplicationRef);
+           const zone: NgZone = TestBed.get(NgZone);
+           appRef.attachView(fixture.componentRef.hostView);
+           zone.run(() => appRef.tick());
+
+           fixture.whenStable().then(() => {
+             expectUnstable(appRef);
+             const element = fixture.debugElement.children[0];
+             dispatchEvent(element.nativeElement, 'click');
+           });
+         }));
+    });
+  });
+}
+
+class MockConsole {
+  res: any[][] = [];
+  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/bundling/hello_world/BUILD.bazel b/packages/core/test/bundling/hello_world/BUILD.bazel
new file mode 100644
index 000000000000..00cdd93ec38f
--- /dev/null
+++ b/packages/core/test/bundling/hello_world/BUILD.bazel
@@ -0,0 +1,78 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ts_library")
+load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
+load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+load("//tools/http-server:http_server.bzl", "http_server")
+
+ng_module(
+    name = "hello_world",
+    srcs = ["index.ts"],
+    tags = ["ivy-only"],
+    deps = [
+        "//packages/core",
+    ],
+)
+
+ng_rollup_bundle(
+    name = "bundle",
+    # TODO(alexeagle): This is inconsistent.
+    # We try to teach users to always have their workspace at the start of a
+    # path, to disambiguate from other workspaces.
+    # Here, the rule implementation is looking in an execroot where the layout
+    # has an "external" directory for external dependencies.
+    # This should probably start with "angular/" and let the rule deal with it.
+    entry_point = "packages/core/test/bundling/hello_world/index.js",
+    tags = ["ivy-only"],
+    deps = [
+        ":hello_world",
+        "//packages/core",
+    ],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["*_spec.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/core/testing",
+        "//packages/private/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    data = [
+        ":bundle",
+        ":bundle.js",
+        ":bundle.min.js.br",
+        ":bundle.min_debug.js",
+    ],
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "ivy-only",
+    ],
+    deps = [":test_lib"],
+)
+
+js_expected_symbol_test(
+    name = "symbol_test",
+    src = ":bundle.min_debug.js",
+    golden = ":bundle.golden_symbols.json",
+    tags = [
+        "ivy-local",
+        "ivy-only",
+    ],
+)
+
+http_server(
+    name = "devserver",
+    data = [
+        "index.html",
+        ":bundle.min.js",
+        ":bundle.min_debug.js",
+    ],
+)
diff --git a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json
new file mode 100644
index 000000000000..ce331251be60
--- /dev/null
+++ b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json
@@ -0,0 +1,287 @@
+[
+  {
+    "name": "ACTIVE_INDEX"
+  },
+  {
+    "name": "BINDING_INDEX"
+  },
+  {
+    "name": "BLOOM_MASK"
+  },
+  {
+    "name": "CLEAN_PROMISE"
+  },
+  {
+    "name": "CONTAINER_INDEX"
+  },
+  {
+    "name": "CONTEXT"
+  },
+  {
+    "name": "ChangeDetectionStrategy"
+  },
+  {
+    "name": "DIRECTIVES"
+  },
+  {
+    "name": "EMPTY$1"
+  },
+  {
+    "name": "EMPTY_ARRAY$2"
+  },
+  {
+    "name": "FLAGS"
+  },
+  {
+    "name": "HEADER_FILLER"
+  },
+  {
+    "name": "HEADER_OFFSET"
+  },
+  {
+    "name": "HOST_NODE"
+  },
+  {
+    "name": "INJECTOR$1"
+  },
+  {
+    "name": "NEXT"
+  },
+  {
+    "name": "NG_ELEMENT_ID"
+  },
+  {
+    "name": "NG_HOST_SYMBOL"
+  },
+  {
+    "name": "NG_PROJECT_AS_ATTR_NAME"
+  },
+  {
+    "name": "PARENT"
+  },
+  {
+    "name": "PublicFeature"
+  },
+  {
+    "name": "QUERIES"
+  },
+  {
+    "name": "RENDERER"
+  },
+  {
+    "name": "RENDER_PARENT"
+  },
+  {
+    "name": "ROOT_DIRECTIVE_INDICES"
+  },
+  {
+    "name": "TVIEW"
+  },
+  {
+    "name": "VIEWS"
+  },
+  {
+    "name": "_CLEAN_PROMISE"
+  },
+  {
+    "name": "_ROOT_DIRECTIVE_INDICES"
+  },
+  {
+    "name": "_getComponentHostLElementNode"
+  },
+  {
+    "name": "_renderCompCount"
+  },
+  {
+    "name": "appendChild"
+  },
+  {
+    "name": "baseDirectiveCreate"
+  },
+  {
+    "name": "bloomAdd"
+  },
+  {
+    "name": "callHooks"
+  },
+  {
+    "name": "canInsertNativeChildOfElement"
+  },
+  {
+    "name": "canInsertNativeChildOfView"
+  },
+  {
+    "name": "canInsertNativeNode"
+  },
+  {
+    "name": "checkNoChangesMode"
+  },
+  {
+    "name": "componentRefresh"
+  },
+  {
+    "name": "createLNode"
+  },
+  {
+    "name": "createLNodeObject"
+  },
+  {
+    "name": "createLViewData"
+  },
+  {
+    "name": "createRootContext"
+  },
+  {
+    "name": "createTNode"
+  },
+  {
+    "name": "createTView"
+  },
+  {
+    "name": "createTextNode"
+  },
+  {
+    "name": "createViewQuery"
+  },
+  {
+    "name": "defineComponent"
+  },
+  {
+    "name": "detectChangesInternal"
+  },
+  {
+    "name": "diPublic"
+  },
+  {
+    "name": "diPublicInInjector"
+  },
+  {
+    "name": "domRendererFactory3"
+  },
+  {
+    "name": "enterView"
+  },
+  {
+    "name": "executeHooks"
+  },
+  {
+    "name": "executeInitAndContentHooks"
+  },
+  {
+    "name": "executeInitHooks"
+  },
+  {
+    "name": "extractDirectiveDef"
+  },
+  {
+    "name": "extractPipeDef"
+  },
+  {
+    "name": "firstTemplatePass"
+  },
+  {
+    "name": "getChildLNode"
+  },
+  {
+    "name": "getLViewChild"
+  },
+  {
+    "name": "getOrCreateNodeInjector"
+  },
+  {
+    "name": "getOrCreateNodeInjectorForNode"
+  },
+  {
+    "name": "getOrCreateTView"
+  },
+  {
+    "name": "getParentLNode"
+  },
+  {
+    "name": "getPreviousOrParentNode"
+  },
+  {
+    "name": "getRenderFlags"
+  },
+  {
+    "name": "getRenderParent"
+  },
+  {
+    "name": "getRootView"
+  },
+  {
+    "name": "hostElement"
+  },
+  {
+    "name": "initChangeDetectorIfExisting"
+  },
+  {
+    "name": "invertObject"
+  },
+  {
+    "name": "isProceduralRenderer"
+  },
+  {
+    "name": "leaveView"
+  },
+  {
+    "name": "locateHostElement"
+  },
+  {
+    "name": "namespaceHTML"
+  },
+  {
+    "name": "nativeInsertBefore"
+  },
+  {
+    "name": "nextNgElementId"
+  },
+  {
+    "name": "readElementValue"
+  },
+  {
+    "name": "refreshChildComponents"
+  },
+  {
+    "name": "refreshContentQueries"
+  },
+  {
+    "name": "refreshDescendantViews"
+  },
+  {
+    "name": "refreshDynamicEmbeddedViews"
+  },
+  {
+    "name": "renderComponent"
+  },
+  {
+    "name": "renderComponentOrTemplate"
+  },
+  {
+    "name": "renderEmbeddedTemplate"
+  },
+  {
+    "name": "resetApplicationState"
+  },
+  {
+    "name": "setHostBindings"
+  },
+  {
+    "name": "setUpAttributes"
+  },
+  {
+    "name": "stringify$2"
+  },
+  {
+    "name": "text"
+  },
+  {
+    "name": "tickRootContext"
+  },
+  {
+    "name": "updateViewQuery"
+  },
+  {
+    "name": "viewAttached"
+  }
+]
\ No newline at end of file
diff --git a/packages/core/test/bundling/hello_world/index.html b/packages/core/test/bundling/hello_world/index.html
new file mode 100644
index 000000000000..c5c7bb3e0b56
--- /dev/null
+++ b/packages/core/test/bundling/hello_world/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Angular Hello World Example</title>
+  </head>
+  <body>
+    <!-- The Angular application will be bootstrapped into this element. -->
+    <hello-world></hello-world>
+
+    <!-- 
+      Script tag which bootstraps the application. Use `?debug` in URL to select
+      the debug version of the script.
+      
+      There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can 
+      switch between which bundle the browser loads to experiment with the application.
+
+      - `bundle.min.js`: Is what the site would serve to their users. It has gone
+        through rollup, build-optimizer, and uglify with tree shaking.
+      - `bundle.min_debug.js`: Is what the developer would like to see when debugging
+        the application. It has also done through full pipeline of rollup, build-optimizer,
+        and uglify, however special flags were passed to uglify to prevent inlining and
+        property renaming.
+    -->
+    <script>
+        document.write('<script src="' + 
+          (document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js') + 
+          '"></' + 'script>');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/core/test/bundling/hello_world/index.ts b/packages/core/test/bundling/hello_world/index.ts
new file mode 100644
index 000000000000..ce8d7d5004c1
--- /dev/null
+++ b/packages/core/test/bundling/hello_world/index.ts
@@ -0,0 +1,15 @@
+/**
+ * @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, ɵrenderComponent as renderComponent} from '@angular/core';
+
+@Component({selector: 'hello-world', template: 'Hello World!'})
+class HelloWorld {
+}
+
+renderComponent(HelloWorld);
diff --git a/packages/core/test/bundling/hello_world/treeshaking_spec.ts b/packages/core/test/bundling/hello_world/treeshaking_spec.ts
new file mode 100644
index 000000000000..9cd1469051cb
--- /dev/null
+++ b/packages/core/test/bundling/hello_world/treeshaking_spec.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 {withBody} from '@angular/private/testing';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const UTF8 = {
+  encoding: 'utf-8'
+};
+const PACKAGE = 'angular/packages/core/test/bundling/hello_world';
+
+describe('treeshaking with uglify', () => {
+
+  let content: string;
+  const contentPath = require.resolve(path.join(PACKAGE, 'bundle.min_debug.js'));
+  beforeAll(() => { content = fs.readFileSync(contentPath, UTF8); });
+
+  it('should drop unused TypeScript helpers',
+     () => { expect(content).not.toContain('__asyncGenerator'); });
+
+  it('should not contain rxjs from commonjs distro', () => {
+    expect(content).not.toContain('commonjsGlobal');
+    expect(content).not.toContain('createCommonjsModule');
+  });
+
+  it('should not contain zone.js',
+     () => { expect(content).not.toContain('global[\'Zone\'] = Zone'); });
+
+  describe('functional test in domino', () => {
+    it('should render hello world when not minified',
+       withBody('<hello-world></hello-world>', () => {
+         require(path.join(PACKAGE, 'bundle.js'));
+         expect(document.body.textContent).toEqual('Hello World!');
+       }));
+
+    it('should render hello world when debug minified',
+       withBody('<hello-world></hello-world>', () => {
+         require(path.join(PACKAGE, 'bundle.min_debug.js'));
+         expect(document.body.textContent).toEqual('Hello World!');
+       }));
+
+    it('should render hello world when fully minified',
+       withBody('<hello-world></hello-world>', () => {
+         require(path.join(PACKAGE, 'bundle.min.js'));
+         expect(document.body.textContent).toEqual('Hello World!');
+       }));
+  });
+});
diff --git a/packages/core/test/bundling/hello_world_i18n/BUILD.bazel b/packages/core/test/bundling/hello_world_i18n/BUILD.bazel
new file mode 100644
index 000000000000..5dcf0fe0de5e
--- /dev/null
+++ b/packages/core/test/bundling/hello_world_i18n/BUILD.bazel
@@ -0,0 +1,37 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ivy_ng_module", "ts_library")
+load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+load("//tools/http-server:http_server.bzl", "http_server")
+
+ivy_ng_module(
+    name = "hello_world_i18n",
+    srcs = ["index.ts"],
+    deps = [
+        "//packages/core",
+    ],
+)
+
+ng_rollup_bundle(
+    name = "bundle",
+    # TODO(alexeagle): This is inconsistent.
+    # We try to teach users to always have their workspace at the start of a
+    # path, to disambiguate from other workspaces.
+    # Here, the rule implementation is looking in an execroot where the layout
+    # has an "external" directory for external dependencies.
+    # This should probably start with "angular/" and let the rule deal with it.
+    entry_point = "packages/core/test/bundling/hello_world_i18n/index.js",
+    deps = [
+        ":hello_world_i18n",
+        "//packages/core",
+    ],
+)
+
+http_server(
+    name = "prodserver",
+    data = [
+        "index.html",
+        ":bundle.min.js",
+        ":bundle.min_debug.js",
+    ],
+)
diff --git a/packages/core/test/bundling/hello_world_i18n/index.html b/packages/core/test/bundling/hello_world_i18n/index.html
new file mode 100644
index 000000000000..e846acca4153
--- /dev/null
+++ b/packages/core/test/bundling/hello_world_i18n/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Angular Hello World Example</title>
+  </head>
+  <body>
+    <!-- The Angular application will be bootstrapped into this element. -->
+    <hello-world></hello-world>
+
+    <!--
+      Script tag which bootstraps the application. Use `?debug` in URL to select
+      the debug version of the script.
+
+      There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can
+      switch between which bundle the browser loads to experiment with the application.
+
+      - `bundle.min.js`: Is what the site would serve to their users. It has gone
+        through rollup, build-optimizer, and uglify with tree shaking.
+      - `bundle.min_debug.js`: Is what the developer would like to see when debugging
+        the application. It has also done through full pipeline of rollup, build-optimizer,
+        and uglify, however special flags were passed to uglify to prevent inlining and
+        property renaming.
+    -->
+    <script>
+      // `goog.getMsg()` will be provided by Closure
+      const translations = {
+        'Hello World!': 'Bonjour Monde!',
+        'Hello Title!': 'Bonjour Titre!',
+      };
+      window.goog = window.goog || {};
+      window.goog.getMsg = (key) => translations[key] || key;
+
+      document.write('<script src="' +
+        (document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js') +
+        '"></' + 'script>');
+    </script>
+  </body>
+</html>
diff --git a/packages/core/test/bundling/hello_world_i18n/index.ts b/packages/core/test/bundling/hello_world_i18n/index.ts
new file mode 100644
index 000000000000..307b59f51db1
--- /dev/null
+++ b/packages/core/test/bundling/hello_world_i18n/index.ts
@@ -0,0 +1,24 @@
+/**
+ * @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, NgModule, ɵrenderComponent as renderComponent} from '@angular/core';
+
+@Component({
+  selector: 'hello-world',
+  template: `<div i18n i18n-title title="Hello Title!">Hello World!</div>`
+})
+export class HelloWorld {
+}
+// TODO(misko): Forgetting to export HelloWorld and not having NgModule fails silently.
+
+@NgModule({declarations: [HelloWorld]})
+export class INeedToExistEvenThoughIAmNotNeeded {
+}
+// TODO(misko): Package should not be required to make this work.
+
+renderComponent(HelloWorld);
diff --git a/packages/core/test/bundling/hello_world_r2/BUILD.bazel b/packages/core/test/bundling/hello_world_r2/BUILD.bazel
new file mode 100644
index 000000000000..330f823f1ca4
--- /dev/null
+++ b/packages/core/test/bundling/hello_world_r2/BUILD.bazel
@@ -0,0 +1,69 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ts_library")
+load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
+load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+load("//tools/http-server:http_server.bzl", "http_server")
+
+ng_module(
+    name = "hello_world",
+    srcs = ["index.ts"],
+    deps = [
+        "//packages/core",
+        "//packages/platform-browser-dynamic",
+    ],
+)
+
+ng_rollup_bundle(
+    name = "bundle",
+    # TODO(alexeagle): This is inconsistent.
+    # We try to teach users to always have their workspace at the start of a
+    # path, to disambiguate from other workspaces.
+    # Here, the rule implementation is looking in an execroot where the layout
+    # has an "external" directory for external dependencies.
+    # This should probably start with "angular/" and let the rule deal with it.
+    entry_point = "packages/core/test/bundling/hello_world_r2/index.js",
+    deps = [
+        ":hello_world",
+        "//packages/core",
+        "//packages/platform-browser-dynamic",
+    ],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["*_spec.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/core/testing",
+        "//packages/private/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    data = [
+        ":bundle",
+        ":bundle.js",
+        ":bundle.min.js.br",
+        ":bundle.min_debug.js",
+    ],
+    deps = [":test_lib"],
+)
+
+js_expected_symbol_test(
+    name = "symbol_test",
+    src = ":bundle.min_debug.js",
+    golden = ":bundle.golden_symbols.json",
+)
+
+http_server(
+    name = "prodserver",
+    data = [
+        "index.html",
+        ":bundle.min.js",
+        ":bundle.min_debug.js",
+    ],
+)
diff --git a/packages/core/test/bundling/hello_world_r2/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world_r2/bundle.golden_symbols.json
new file mode 100644
index 000000000000..96fd910e84eb
--- /dev/null
+++ b/packages/core/test/bundling/hello_world_r2/bundle.golden_symbols.json
@@ -0,0 +1,3845 @@
+[
+  {
+    "name": "$$"
+  },
+  {
+    "name": "$0"
+  },
+  {
+    "name": "$9"
+  },
+  {
+    "name": "$A"
+  },
+  {
+    "name": "$AMPERSAND"
+  },
+  {
+    "name": "$BACKSLASH"
+  },
+  {
+    "name": "$BANG"
+  },
+  {
+    "name": "$BAR"
+  },
+  {
+    "name": "$BT"
+  },
+  {
+    "name": "$CARET"
+  },
+  {
+    "name": "$COLON"
+  },
+  {
+    "name": "$COMMA"
+  },
+  {
+    "name": "$CR"
+  },
+  {
+    "name": "$DQ"
+  },
+  {
+    "name": "$E"
+  },
+  {
+    "name": "$EOF"
+  },
+  {
+    "name": "$EQ"
+  },
+  {
+    "name": "$F"
+  },
+  {
+    "name": "$FF"
+  },
+  {
+    "name": "$GT"
+  },
+  {
+    "name": "$HASH"
+  },
+  {
+    "name": "$LBRACE"
+  },
+  {
+    "name": "$LBRACKET"
+  },
+  {
+    "name": "$LF"
+  },
+  {
+    "name": "$LPAREN"
+  },
+  {
+    "name": "$LT"
+  },
+  {
+    "name": "$MINUS"
+  },
+  {
+    "name": "$NBSP"
+  },
+  {
+    "name": "$PERCENT"
+  },
+  {
+    "name": "$PERIOD"
+  },
+  {
+    "name": "$PLUS"
+  },
+  {
+    "name": "$QUESTION"
+  },
+  {
+    "name": "$RBRACE"
+  },
+  {
+    "name": "$RBRACKET"
+  },
+  {
+    "name": "$RPAREN"
+  },
+  {
+    "name": "$SEMICOLON"
+  },
+  {
+    "name": "$SLASH"
+  },
+  {
+    "name": "$SPACE"
+  },
+  {
+    "name": "$SQ"
+  },
+  {
+    "name": "$STAR"
+  },
+  {
+    "name": "$TAB"
+  },
+  {
+    "name": "$VTAB"
+  },
+  {
+    "name": "$X"
+  },
+  {
+    "name": "$Z"
+  },
+  {
+    "name": "$_"
+  },
+  {
+    "name": "$a"
+  },
+  {
+    "name": "$e"
+  },
+  {
+    "name": "$f"
+  },
+  {
+    "name": "$n"
+  },
+  {
+    "name": "$r"
+  },
+  {
+    "name": "$t"
+  },
+  {
+    "name": "$u"
+  },
+  {
+    "name": "$v"
+  },
+  {
+    "name": "$x"
+  },
+  {
+    "name": "$z"
+  },
+  {
+    "name": "ALLOW_DEFAULT_VAR"
+  },
+  {
+    "name": "ALLOW_MULTIPLE_PLATFORMS"
+  },
+  {
+    "name": "ANALYZE_FOR_ENTRY_COMPONENTS"
+  },
+  {
+    "name": "ANIMATE_PROP_PREFIX"
+  },
+  {
+    "name": "ANNOTATIONS"
+  },
+  {
+    "name": "APP_BOOTSTRAP_LISTENER"
+  },
+  {
+    "name": "APP_ROOT"
+  },
+  {
+    "name": "AST"
+  },
+  {
+    "name": "ASTWithSource"
+  },
+  {
+    "name": "ATTRIBUTE_PREFIX"
+  },
+  {
+    "name": "AbstractClassPart"
+  },
+  {
+    "name": "AbstractEmitterVisitor"
+  },
+  {
+    "name": "AnonymousSubject"
+  },
+  {
+    "name": "ApplicationInitStatus"
+  },
+  {
+    "name": "ApplicationRef"
+  },
+  {
+    "name": "ArrayType"
+  },
+  {
+    "name": "AssertNotNull"
+  },
+  {
+    "name": "AstTransformer"
+  },
+  {
+    "name": "AstTransformer$1"
+  },
+  {
+    "name": "AttrAst"
+  },
+  {
+    "name": "Attribute$1"
+  },
+  {
+    "name": "B64_DIGITS"
+  },
+  {
+    "name": "BIND_NAME_REGEXP"
+  },
+  {
+    "name": "BLOCK_PLACEHOLDER"
+  },
+  {
+    "name": "BOOLEAN"
+  },
+  {
+    "name": "BOOL_TYPE"
+  },
+  {
+    "name": "Binary"
+  },
+  {
+    "name": "BinaryOperator"
+  },
+  {
+    "name": "BinaryOperatorExpr"
+  },
+  {
+    "name": "BindingForm"
+  },
+  {
+    "name": "BindingParser"
+  },
+  {
+    "name": "BindingPipe"
+  },
+  {
+    "name": "BoundDirectivePropertyAst"
+  },
+  {
+    "name": "BoundElementProperty"
+  },
+  {
+    "name": "BoundElementPropertyAst"
+  },
+  {
+    "name": "BoundEventAst"
+  },
+  {
+    "name": "BoundPropertyMapping"
+  },
+  {
+    "name": "BoundTextAst"
+  },
+  {
+    "name": "BrowserDomAdapter"
+  },
+  {
+    "name": "BrowserGetTestability"
+  },
+  {
+    "name": "BrowserPlatformLocation"
+  },
+  {
+    "name": "BuiltinFunctionCall"
+  },
+  {
+    "name": "BuiltinMethod"
+  },
+  {
+    "name": "BuiltinType"
+  },
+  {
+    "name": "BuiltinTypeName"
+  },
+  {
+    "name": "BuiltinVar"
+  },
+  {
+    "name": "CAMEL_CASE_REGEXP"
+  },
+  {
+    "name": "CATCH_ERROR_VAR$1"
+  },
+  {
+    "name": "CATCH_ERROR_VAR$2"
+  },
+  {
+    "name": "CATCH_STACK_VAR$1"
+  },
+  {
+    "name": "CATCH_STACK_VAR$2"
+  },
+  {
+    "name": "CHECK_VAR"
+  },
+  {
+    "name": "CIRCULAR"
+  },
+  {
+    "name": "CLASS_ATTR"
+  },
+  {
+    "name": "CLASS_ATTR$1"
+  },
+  {
+    "name": "CLASS_PREFIX"
+  },
+  {
+    "name": "CLOSE_CURLY"
+  },
+  {
+    "name": "COMPILER_OPTIONS"
+  },
+  {
+    "name": "COMPILER_PROVIDERS"
+  },
+  {
+    "name": "COMPONENT_VARIABLE"
+  },
+  {
+    "name": "COMP_VAR"
+  },
+  {
+    "name": "CONSTANT_PREFIX"
+  },
+  {
+    "name": "CONTENT_ATTR"
+  },
+  {
+    "name": "CORE"
+  },
+  {
+    "name": "CR"
+  },
+  {
+    "name": "CSS_IMPORT_REGEXP"
+  },
+  {
+    "name": "CSS_STRIPPABLE_COMMENT_REGEXP"
+  },
+  {
+    "name": "CUSTOM_ELEMENTS_SCHEMA$1"
+  },
+  {
+    "name": "CastExpr"
+  },
+  {
+    "name": "Chain"
+  },
+  {
+    "name": "ChangeDetectionStrategy"
+  },
+  {
+    "name": "ChangeDetectionStrategy$1"
+  },
+  {
+    "name": "ChangeDetectorRef"
+  },
+  {
+    "name": "ChangeDetectorRefTokenKey"
+  },
+  {
+    "name": "ClassGetter"
+  },
+  {
+    "name": "ClassMethod"
+  },
+  {
+    "name": "ClassStmt"
+  },
+  {
+    "name": "CodegenComponentFactoryResolver"
+  },
+  {
+    "name": "CommaExpr"
+  },
+  {
+    "name": "Comment"
+  },
+  {
+    "name": "CompileDirectiveMetadata"
+  },
+  {
+    "name": "CompileMetadataResolver"
+  },
+  {
+    "name": "CompileNgModuleMetadata"
+  },
+  {
+    "name": "CompilePipeMetadata"
+  },
+  {
+    "name": "CompileReflector"
+  },
+  {
+    "name": "CompileStylesheetMetadata"
+  },
+  {
+    "name": "CompileSummaryKind"
+  },
+  {
+    "name": "CompileTemplateMetadata"
+  },
+  {
+    "name": "CompiledStylesheet"
+  },
+  {
+    "name": "CompiledTemplate"
+  },
+  {
+    "name": "Compiler"
+  },
+  {
+    "name": "CompilerConfig"
+  },
+  {
+    "name": "CompilerFactory"
+  },
+  {
+    "name": "CompilerImpl"
+  },
+  {
+    "name": "ComponentFactory"
+  },
+  {
+    "name": "ComponentFactoryBoundToModule"
+  },
+  {
+    "name": "ComponentFactoryResolver"
+  },
+  {
+    "name": "ComponentFactory_"
+  },
+  {
+    "name": "ComponentRef"
+  },
+  {
+    "name": "ComponentRef_"
+  },
+  {
+    "name": "Conditional"
+  },
+  {
+    "name": "ConditionalExpr"
+  },
+  {
+    "name": "ConnectableSubscriber"
+  },
+  {
+    "name": "Console"
+  },
+  {
+    "name": "ConstantPool"
+  },
+  {
+    "name": "Container"
+  },
+  {
+    "name": "ConvertActionBindingResult"
+  },
+  {
+    "name": "ConvertPropertyBindingResult"
+  },
+  {
+    "name": "CssRule"
+  },
+  {
+    "name": "CssSelector"
+  },
+  {
+    "name": "DASH_CASE_REGEXP"
+  },
+  {
+    "name": "DEFAULT_INTERPOLATION_CONFIG"
+  },
+  {
+    "name": "DEFAULT_PACKAGE_URL_PROVIDER"
+  },
+  {
+    "name": "DEFINITION_CACHE"
+  },
+  {
+    "name": "DELEGATE_CTOR"
+  },
+  {
+    "name": "DOCUMENT"
+  },
+  {
+    "name": "DOCUMENT$1"
+  },
+  {
+    "name": "DOM_KEY_LOCATION_NUMPAD"
+  },
+  {
+    "name": "DYNAMIC_TYPE"
+  },
+  {
+    "name": "DebugAction"
+  },
+  {
+    "name": "DebugContext_"
+  },
+  {
+    "name": "DebugElement"
+  },
+  {
+    "name": "DebugNode"
+  },
+  {
+    "name": "DebugRenderer2"
+  },
+  {
+    "name": "DebugRendererFactory2"
+  },
+  {
+    "name": "Declaration"
+  },
+  {
+    "name": "DeclareFunctionStmt"
+  },
+  {
+    "name": "DeclareVarStmt"
+  },
+  {
+    "name": "DefaultLocalResolver"
+  },
+  {
+    "name": "DirectiveAst"
+  },
+  {
+    "name": "DirectiveNormalizer"
+  },
+  {
+    "name": "DirectiveResolver"
+  },
+  {
+    "name": "Doctype"
+  },
+  {
+    "name": "DomElementSchemaRegistry"
+  },
+  {
+    "name": "EMPTY"
+  },
+  {
+    "name": "EMPTY_ARRAY"
+  },
+  {
+    "name": "EMPTY_ARRAY$2"
+  },
+  {
+    "name": "EMPTY_CONTEXT"
+  },
+  {
+    "name": "EMPTY_ELEMENT_CONTEXT"
+  },
+  {
+    "name": "EMPTY_MAP"
+  },
+  {
+    "name": "EMPTY_PAYLOAD"
+  },
+  {
+    "name": "EMPTY_RENDERER_TYPE_ID"
+  },
+  {
+    "name": "EOF"
+  },
+  {
+    "name": "ERROR_COLLECTOR_TOKEN"
+  },
+  {
+    "name": "ERROR_COMPONENT"
+  },
+  {
+    "name": "ERROR_COMPONENT_TYPE"
+  },
+  {
+    "name": "ERROR_DEBUG_CONTEXT"
+  },
+  {
+    "name": "ERROR_LOGGER"
+  },
+  {
+    "name": "ERROR_ORIGINAL_ERROR"
+  },
+  {
+    "name": "ERROR_PARSE_ERRORS"
+  },
+  {
+    "name": "ERROR_SYNTAX_ERROR"
+  },
+  {
+    "name": "EVENT_NAME_VAR"
+  },
+  {
+    "name": "Element$1"
+  },
+  {
+    "name": "ElementAst"
+  },
+  {
+    "name": "ElementContext"
+  },
+  {
+    "name": "ElementOrDirectiveRef"
+  },
+  {
+    "name": "ElementRef"
+  },
+  {
+    "name": "ElementRefTokenKey"
+  },
+  {
+    "name": "ElementSchemaRegistry"
+  },
+  {
+    "name": "EmbeddedTemplateAst"
+  },
+  {
+    "name": "EmitterVisitorContext"
+  },
+  {
+    "name": "EmptyExpr"
+  },
+  {
+    "name": "Endian"
+  },
+  {
+    "name": "ErrorHandler"
+  },
+  {
+    "name": "EventEmitter"
+  },
+  {
+    "name": "EventHandlerVars"
+  },
+  {
+    "name": "EventListener"
+  },
+  {
+    "name": "ExampleVisitor"
+  },
+  {
+    "name": "Expansion"
+  },
+  {
+    "name": "ExpansionCase"
+  },
+  {
+    "name": "ExpansionError"
+  },
+  {
+    "name": "ExpansionResult"
+  },
+  {
+    "name": "Expression"
+  },
+  {
+    "name": "ExpressionStatement"
+  },
+  {
+    "name": "ExpressionType"
+  },
+  {
+    "name": "ExternalExpr"
+  },
+  {
+    "name": "ExtractionResult"
+  },
+  {
+    "name": "FixupExpression"
+  },
+  {
+    "name": "FnParam"
+  },
+  {
+    "name": "FunctionCall"
+  },
+  {
+    "name": "FunctionExpr"
+  },
+  {
+    "name": "GET_PROPERTY_NAME"
+  },
+  {
+    "name": "GET_PROPERTY_NAME$1"
+  },
+  {
+    "name": "GOOG_GET_MSG"
+  },
+  {
+    "name": "HOST_ATTR"
+  },
+  {
+    "name": "HOST_REG_EXP"
+  },
+  {
+    "name": "HelloWorldComponent"
+  },
+  {
+    "name": "HelloWorldModule"
+  },
+  {
+    "name": "HtmlParser"
+  },
+  {
+    "name": "HtmlTagDefinition"
+  },
+  {
+    "name": "I18NHtmlParser"
+  },
+  {
+    "name": "I18nError"
+  },
+  {
+    "name": "I18nToHtmlVisitor"
+  },
+  {
+    "name": "IDENT"
+  },
+  {
+    "name": "IDENT_BANANA_BOX_IDX"
+  },
+  {
+    "name": "IDENT_EVENT_IDX"
+  },
+  {
+    "name": "IDENT_KW_IDX"
+  },
+  {
+    "name": "IDENT_PROPERTY_IDX"
+  },
+  {
+    "name": "ID_SEPARATOR"
+  },
+  {
+    "name": "IMPLICIT_TEMPLATE_VAR"
+  },
+  {
+    "name": "INFERRED_TYPE"
+  },
+  {
+    "name": "INHERITED_CLASS"
+  },
+  {
+    "name": "INHERITED_CLASS_WITH_CTOR"
+  },
+  {
+    "name": "INJECTOR"
+  },
+  {
+    "name": "INJECTORRefTokenKey"
+  },
+  {
+    "name": "INJECTORRefTokenKey$1"
+  },
+  {
+    "name": "INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS"
+  },
+  {
+    "name": "INTERNAL_BROWSER_PLATFORM_PROVIDERS"
+  },
+  {
+    "name": "INTERPOLATION_BLACKLIST_REGEXPS"
+  },
+  {
+    "name": "Icu"
+  },
+  {
+    "name": "IcuPlaceholder"
+  },
+  {
+    "name": "Identifiers"
+  },
+  {
+    "name": "IfStmt"
+  },
+  {
+    "name": "ImplicitReceiver"
+  },
+  {
+    "name": "Inject"
+  },
+  {
+    "name": "Injectable"
+  },
+  {
+    "name": "InjectionToken"
+  },
+  {
+    "name": "Injector"
+  },
+  {
+    "name": "InjectorRefTokenKey"
+  },
+  {
+    "name": "InjectorRefTokenKey$1"
+  },
+  {
+    "name": "Injector_"
+  },
+  {
+    "name": "InnerSubscriber"
+  },
+  {
+    "name": "InstantiateExpr"
+  },
+  {
+    "name": "Interpolation"
+  },
+  {
+    "name": "InterpolationConfig"
+  },
+  {
+    "name": "InvokeFunctionExpr"
+  },
+  {
+    "name": "InvokeMethodExpr"
+  },
+  {
+    "name": "JSDocCommentStmt"
+  },
+  {
+    "name": "JS_B64_PREFIX"
+  },
+  {
+    "name": "JitCompiler"
+  },
+  {
+    "name": "JitEmitterVisitor"
+  },
+  {
+    "name": "JitReflector"
+  },
+  {
+    "name": "JitSummaryResolver"
+  },
+  {
+    "name": "KEYWORDS"
+  },
+  {
+    "name": "KEY_CONTEXT"
+  },
+  {
+    "name": "KW_AT_IDX"
+  },
+  {
+    "name": "KW_BINDON_IDX"
+  },
+  {
+    "name": "KW_BIND_IDX"
+  },
+  {
+    "name": "KW_LET_IDX"
+  },
+  {
+    "name": "KW_ON_IDX"
+  },
+  {
+    "name": "KW_REF_IDX"
+  },
+  {
+    "name": "KeyVisitor"
+  },
+  {
+    "name": "KeyedRead"
+  },
+  {
+    "name": "KeyedWrite"
+  },
+  {
+    "name": "LIFECYCLE_HOOKS_VALUES"
+  },
+  {
+    "name": "LINK_ELEMENT"
+  },
+  {
+    "name": "LINK_STYLE_HREF_ATTR"
+  },
+  {
+    "name": "LINK_STYLE_REL_ATTR"
+  },
+  {
+    "name": "LINK_STYLE_REL_VALUE"
+  },
+  {
+    "name": "LOCALE_ID"
+  },
+  {
+    "name": "LOG_VAR"
+  },
+  {
+    "name": "LOG_VAR$1"
+  },
+  {
+    "name": "Lexer"
+  },
+  {
+    "name": "LifecycleHooks"
+  },
+  {
+    "name": "LiteralArray"
+  },
+  {
+    "name": "LiteralArrayExpr"
+  },
+  {
+    "name": "LiteralExpr"
+  },
+  {
+    "name": "LiteralMap"
+  },
+  {
+    "name": "LiteralMapEntry"
+  },
+  {
+    "name": "LiteralMapExpr"
+  },
+  {
+    "name": "LiteralPrimitive"
+  },
+  {
+    "name": "MEANING_SEPARATOR"
+  },
+  {
+    "name": "MODULE_SUFFIX"
+  },
+  {
+    "name": "MULTI_PROVIDER_FN"
+  },
+  {
+    "name": "MapOperator"
+  },
+  {
+    "name": "MapSubscriber"
+  },
+  {
+    "name": "MapType"
+  },
+  {
+    "name": "MergeMapOperator"
+  },
+  {
+    "name": "MergeMapSubscriber"
+  },
+  {
+    "name": "Message"
+  },
+  {
+    "name": "MethodCall"
+  },
+  {
+    "name": "MissingTranslationStrategy"
+  },
+  {
+    "name": "MissingTranslationStrategy$1"
+  },
+  {
+    "name": "MulticastOperator"
+  },
+  {
+    "name": "NAMED_ENTITIES"
+  },
+  {
+    "name": "NEW_LINE"
+  },
+  {
+    "name": "NGSP_UNICODE"
+  },
+  {
+    "name": "NG_CONTENT_SELECT_ATTR"
+  },
+  {
+    "name": "NG_NON_BINDABLE_ATTR"
+  },
+  {
+    "name": "NG_PROJECT_AS"
+  },
+  {
+    "name": "NG_TEMP_TOKEN_PATH"
+  },
+  {
+    "name": "NG_TOKEN_PATH"
+  },
+  {
+    "name": "NON_BINDABLE_VISITOR"
+  },
+  {
+    "name": "NOOP"
+  },
+  {
+    "name": "NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR"
+  },
+  {
+    "name": "NO_ERRORS_SCHEMA$1"
+  },
+  {
+    "name": "NO_NEW_LINE"
+  },
+  {
+    "name": "NO_WS_REGEXP"
+  },
+  {
+    "name": "NS_PREFIX_RE"
+  },
+  {
+    "name": "NULL_EXPR"
+  },
+  {
+    "name": "NULL_INJECTOR"
+  },
+  {
+    "name": "NUMBER"
+  },
+  {
+    "name": "NgContentAst"
+  },
+  {
+    "name": "NgModuleCompileResult"
+  },
+  {
+    "name": "NgModuleCompiler"
+  },
+  {
+    "name": "NgModuleFactory"
+  },
+  {
+    "name": "NgModuleFactory_"
+  },
+  {
+    "name": "NgModuleProviderAnalyzer"
+  },
+  {
+    "name": "NgModuleRef"
+  },
+  {
+    "name": "NgModuleRefTokenKey"
+  },
+  {
+    "name": "NgModuleRef_"
+  },
+  {
+    "name": "NgModuleResolver"
+  },
+  {
+    "name": "NgZone"
+  },
+  {
+    "name": "NonBindableVisitor"
+  },
+  {
+    "name": "NonNullAssert"
+  },
+  {
+    "name": "NoopNgZone"
+  },
+  {
+    "name": "NotExpr"
+  },
+  {
+    "name": "NullInjector"
+  },
+  {
+    "name": "OBJECT"
+  },
+  {
+    "name": "OPEN_CURLY"
+  },
+  {
+    "name": "ObjectUnsubscribedError"
+  },
+  {
+    "name": "Observable"
+  },
+  {
+    "name": "Optional"
+  },
+  {
+    "name": "OuterSubscriber"
+  },
+  {
+    "name": "PACKAGE_ROOT_URL"
+  },
+  {
+    "name": "PARAMETERS"
+  },
+  {
+    "name": "PLATFORM_BROWSER_ID"
+  },
+  {
+    "name": "PLATFORM_ID"
+  },
+  {
+    "name": "PLATFORM_INITIALIZER"
+  },
+  {
+    "name": "PLURAL_CASES"
+  },
+  {
+    "name": "PRESERVE_WS_ATTR_NAME"
+  },
+  {
+    "name": "PROPERTY_PARTS_SEPARATOR"
+  },
+  {
+    "name": "PROP_METADATA"
+  },
+  {
+    "name": "ParseError"
+  },
+  {
+    "name": "ParseErrorLevel"
+  },
+  {
+    "name": "ParseLocation"
+  },
+  {
+    "name": "ParseSourceFile"
+  },
+  {
+    "name": "ParseSourceSpan"
+  },
+  {
+    "name": "ParseSpan"
+  },
+  {
+    "name": "ParseTreeResult"
+  },
+  {
+    "name": "ParsedEvent"
+  },
+  {
+    "name": "ParsedProperty"
+  },
+  {
+    "name": "ParsedPropertyType"
+  },
+  {
+    "name": "ParsedVariable"
+  },
+  {
+    "name": "Parser"
+  },
+  {
+    "name": "Parser$1"
+  },
+  {
+    "name": "ParserError"
+  },
+  {
+    "name": "PipeCollector"
+  },
+  {
+    "name": "PipeResolver"
+  },
+  {
+    "name": "Placeholder"
+  },
+  {
+    "name": "PlaceholderRegistry"
+  },
+  {
+    "name": "PlatformLocation"
+  },
+  {
+    "name": "PlatformRef"
+  },
+  {
+    "name": "PrefixNot"
+  },
+  {
+    "name": "PreparsedElement"
+  },
+  {
+    "name": "PreparsedElementType"
+  },
+  {
+    "name": "PropertyRead"
+  },
+  {
+    "name": "PropertyWrite"
+  },
+  {
+    "name": "ProviderAst"
+  },
+  {
+    "name": "ProviderAstType"
+  },
+  {
+    "name": "ProviderElementContext"
+  },
+  {
+    "name": "ProviderError"
+  },
+  {
+    "name": "ProviderMeta"
+  },
+  {
+    "name": "ProviderViewContext"
+  },
+  {
+    "name": "QUERY_METADATA_IDENTIFIERS"
+  },
+  {
+    "name": "QUOTED_KEYS"
+  },
+  {
+    "name": "QueryList"
+  },
+  {
+    "name": "Quote"
+  },
+  {
+    "name": "ReadKeyExpr"
+  },
+  {
+    "name": "ReadPropExpr"
+  },
+  {
+    "name": "ReadVarExpr"
+  },
+  {
+    "name": "RecurseVisitor"
+  },
+  {
+    "name": "RecursiveAstVisitor"
+  },
+  {
+    "name": "RefCountOperator"
+  },
+  {
+    "name": "RefCountSubscriber"
+  },
+  {
+    "name": "ReferenceAst"
+  },
+  {
+    "name": "ReflectionCapabilities"
+  },
+  {
+    "name": "Renderer"
+  },
+  {
+    "name": "Renderer2"
+  },
+  {
+    "name": "Renderer2TokenKey"
+  },
+  {
+    "name": "RendererAdapter"
+  },
+  {
+    "name": "RendererFactory2"
+  },
+  {
+    "name": "RendererV1TokenKey"
+  },
+  {
+    "name": "ResourceLoader"
+  },
+  {
+    "name": "ReturnStatement"
+  },
+  {
+    "name": "ReturnValue"
+  },
+  {
+    "name": "SCHEMA"
+  },
+  {
+    "name": "SCRIPT_ELEMENT"
+  },
+  {
+    "name": "SECURITY_SCHEMA"
+  },
+  {
+    "name": "SKIP_WS_TRIM_TAGS"
+  },
+  {
+    "name": "SOURCE"
+  },
+  {
+    "name": "STRING"
+  },
+  {
+    "name": "STRING_MAP_PROTO"
+  },
+  {
+    "name": "STYLE_ATTR"
+  },
+  {
+    "name": "STYLE_ELEMENT"
+  },
+  {
+    "name": "STYLE_PREFIX"
+  },
+  {
+    "name": "SafeMethodCall"
+  },
+  {
+    "name": "SafePropertyRead"
+  },
+  {
+    "name": "SafeSelector"
+  },
+  {
+    "name": "SafeSubscriber"
+  },
+  {
+    "name": "Sanitizer"
+  },
+  {
+    "name": "SecurityContext"
+  },
+  {
+    "name": "SecurityContext$1"
+  },
+  {
+    "name": "SelectorContext"
+  },
+  {
+    "name": "SelectorListContext"
+  },
+  {
+    "name": "SelectorMatcher"
+  },
+  {
+    "name": "Self"
+  },
+  {
+    "name": "Serializer"
+  },
+  {
+    "name": "Services"
+  },
+  {
+    "name": "ShadowCss"
+  },
+  {
+    "name": "SimpleChange"
+  },
+  {
+    "name": "SimpleExpressionChecker"
+  },
+  {
+    "name": "SimplePlaceholderMapper"
+  },
+  {
+    "name": "SkipSelf"
+  },
+  {
+    "name": "SourceMapGenerator"
+  },
+  {
+    "name": "SplitInterpolation"
+  },
+  {
+    "name": "Statement"
+  },
+  {
+    "name": "StatementInterpreter"
+  },
+  {
+    "name": "StaticInjector"
+  },
+  {
+    "name": "StaticSymbol"
+  },
+  {
+    "name": "StaticSymbolCache"
+  },
+  {
+    "name": "StmtModifier"
+  },
+  {
+    "name": "StringWithEscapedBlocks"
+  },
+  {
+    "name": "StyleCompiler"
+  },
+  {
+    "name": "StyleWithImports"
+  },
+  {
+    "name": "StylesCompileDependency"
+  },
+  {
+    "name": "Subject"
+  },
+  {
+    "name": "SubjectSubscriber"
+  },
+  {
+    "name": "SubjectSubscription"
+  },
+  {
+    "name": "Subscriber"
+  },
+  {
+    "name": "Subscription"
+  },
+  {
+    "name": "SummaryResolver"
+  },
+  {
+    "name": "SyncAsync"
+  },
+  {
+    "name": "TAG_DEFINITIONS"
+  },
+  {
+    "name": "TAG_TO_PLACEHOLDER_NAMES"
+  },
+  {
+    "name": "TEMPLATE_ATTR_PREFIX"
+  },
+  {
+    "name": "TEXT_CSS_SELECTOR"
+  },
+  {
+    "name": "TRANSLATIONS"
+  },
+  {
+    "name": "TRANSLATIONS_FORMAT"
+  },
+  {
+    "name": "TRANSLATION_PREFIX"
+  },
+  {
+    "name": "TYPED_NULL_EXPR"
+  },
+  {
+    "name": "Tag"
+  },
+  {
+    "name": "TagContentType"
+  },
+  {
+    "name": "TagPlaceholder"
+  },
+  {
+    "name": "TemplateBinding"
+  },
+  {
+    "name": "TemplateBindingParseResult"
+  },
+  {
+    "name": "TemplateParseError"
+  },
+  {
+    "name": "TemplateParseResult"
+  },
+  {
+    "name": "TemplateParseVisitor"
+  },
+  {
+    "name": "TemplateParser"
+  },
+  {
+    "name": "TemplatePreparseVisitor"
+  },
+  {
+    "name": "TemplateRef"
+  },
+  {
+    "name": "TemplateRefTokenKey"
+  },
+  {
+    "name": "TemplateRef_"
+  },
+  {
+    "name": "Testability"
+  },
+  {
+    "name": "TestabilityRegistry"
+  },
+  {
+    "name": "Text"
+  },
+  {
+    "name": "Text$1"
+  },
+  {
+    "name": "Text$2"
+  },
+  {
+    "name": "TextAst"
+  },
+  {
+    "name": "ThrowStmt"
+  },
+  {
+    "name": "Token"
+  },
+  {
+    "name": "Token$1"
+  },
+  {
+    "name": "TokenError"
+  },
+  {
+    "name": "TokenType"
+  },
+  {
+    "name": "TokenType$1"
+  },
+  {
+    "name": "TokenizeResult"
+  },
+  {
+    "name": "TransitiveCompileNgModuleMetadata"
+  },
+  {
+    "name": "TranslationBundle"
+  },
+  {
+    "name": "TreeError"
+  },
+  {
+    "name": "TryCatchStmt"
+  },
+  {
+    "name": "Type"
+  },
+  {
+    "name": "Type$1"
+  },
+  {
+    "name": "Type$2"
+  },
+  {
+    "name": "TypeModifier"
+  },
+  {
+    "name": "TypeofExpr"
+  },
+  {
+    "name": "UNDEFINED_RENDERER_TYPE_ID"
+  },
+  {
+    "name": "UNDEFINED_VALUE"
+  },
+  {
+    "name": "URL_WITH_SCHEMA_REGEXP"
+  },
+  {
+    "name": "USE_VALUE"
+  },
+  {
+    "name": "USE_VALUE$1"
+  },
+  {
+    "name": "UnsubscriptionError"
+  },
+  {
+    "name": "UrlResolver"
+  },
+  {
+    "name": "VERSION"
+  },
+  {
+    "name": "VERSION$2"
+  },
+  {
+    "name": "VIEW_VAR"
+  },
+  {
+    "name": "ValueTransformer"
+  },
+  {
+    "name": "VariableAst"
+  },
+  {
+    "name": "Version"
+  },
+  {
+    "name": "ViewAction"
+  },
+  {
+    "name": "ViewBuilder$1"
+  },
+  {
+    "name": "ViewCompileResult"
+  },
+  {
+    "name": "ViewCompiler"
+  },
+  {
+    "name": "ViewContainerRef"
+  },
+  {
+    "name": "ViewContainerRefTokenKey"
+  },
+  {
+    "name": "ViewContainerRef_"
+  },
+  {
+    "name": "ViewEncapsulation"
+  },
+  {
+    "name": "ViewEncapsulation$1"
+  },
+  {
+    "name": "ViewRef_"
+  },
+  {
+    "name": "WS_CHARS"
+  },
+  {
+    "name": "WS_REPLACE_REGEXP"
+  },
+  {
+    "name": "WhitespaceVisitor"
+  },
+  {
+    "name": "WrappedValue"
+  },
+  {
+    "name": "WriteKeyExpr"
+  },
+  {
+    "name": "WritePropExpr"
+  },
+  {
+    "name": "WriteVarExpr"
+  },
+  {
+    "name": "Xliff"
+  },
+  {
+    "name": "Xliff2"
+  },
+  {
+    "name": "Xliff2Parser"
+  },
+  {
+    "name": "XliffParser"
+  },
+  {
+    "name": "Xmb"
+  },
+  {
+    "name": "XmlParser"
+  },
+  {
+    "name": "XmlToI18n"
+  },
+  {
+    "name": "XmlToI18n$1"
+  },
+  {
+    "name": "XmlToI18n$2"
+  },
+  {
+    "name": "Xtb"
+  },
+  {
+    "name": "XtbParser"
+  },
+  {
+    "name": "_ATTR_TO_PROP"
+  },
+  {
+    "name": "_ApplySourceSpanTransformer"
+  },
+  {
+    "name": "_AstToIrVisitor"
+  },
+  {
+    "name": "_BuiltinAstConverter"
+  },
+  {
+    "name": "_CONTEXT_GROUP_TAG"
+  },
+  {
+    "name": "_CONTEXT_TAG"
+  },
+  {
+    "name": "_CR_OR_CRLF_REGEXP"
+  },
+  {
+    "name": "_CUSTOM_PH_EXP"
+  },
+  {
+    "name": "_CompileValueConverter"
+  },
+  {
+    "name": "_ComponentIndex"
+  },
+  {
+    "name": "_ControlFlowError"
+  },
+  {
+    "name": "_DEFAULT_SOURCE_LANG"
+  },
+  {
+    "name": "_DEFAULT_SOURCE_LANG$1"
+  },
+  {
+    "name": "_DEFAULT_TAG_DEFINITION"
+  },
+  {
+    "name": "_DOCTYPE"
+  },
+  {
+    "name": "_DOM"
+  },
+  {
+    "name": "_ESCAPED_CHARS"
+  },
+  {
+    "name": "_EXAMPLE_TAG"
+  },
+  {
+    "name": "_EmittedLine"
+  },
+  {
+    "name": "_ExecutionContext"
+  },
+  {
+    "name": "_Expander"
+  },
+  {
+    "name": "_FILE_TAG"
+  },
+  {
+    "name": "_I18N_ATTR"
+  },
+  {
+    "name": "_I18N_ATTR_PREFIX"
+  },
+  {
+    "name": "_I18N_COMMENT_PREFIX_REGEXP"
+  },
+  {
+    "name": "_I18nVisitor"
+  },
+  {
+    "name": "_INDENT_WITH"
+  },
+  {
+    "name": "_LEGAL_IDENTIFIER_RE"
+  },
+  {
+    "name": "_MARKER_TAG"
+  },
+  {
+    "name": "_MARKER_TAG$1"
+  },
+  {
+    "name": "_MESSAGES_TAG"
+  },
+  {
+    "name": "_MESSAGE_TAG"
+  },
+  {
+    "name": "_Mode"
+  },
+  {
+    "name": "_NO_RESOURCE_LOADER"
+  },
+  {
+    "name": "_NullComponentFactoryResolver"
+  },
+  {
+    "name": "_PLACEHOLDER_SPANNING_TAG"
+  },
+  {
+    "name": "_PLACEHOLDER_TAG"
+  },
+  {
+    "name": "_PLACEHOLDER_TAG$1"
+  },
+  {
+    "name": "_PLACEHOLDER_TAG$2"
+  },
+  {
+    "name": "_PLACEHOLDER_TAG$3"
+  },
+  {
+    "name": "_ParseAST"
+  },
+  {
+    "name": "_ReadVarVisitor"
+  },
+  {
+    "name": "_SEGMENT_SOURCE_TAG"
+  },
+  {
+    "name": "_SELECTOR_REGEXP"
+  },
+  {
+    "name": "_SINGLE_QUOTE_ESCAPE_STRING_RE"
+  },
+  {
+    "name": "_SOURCE_TAG"
+  },
+  {
+    "name": "_SOURCE_TAG$1"
+  },
+  {
+    "name": "_SOURCE_TAG$2"
+  },
+  {
+    "name": "_Scanner"
+  },
+  {
+    "name": "_SerializerIgnoreIcuExpVisitor"
+  },
+  {
+    "name": "_SerializerVisitor"
+  },
+  {
+    "name": "_TAG_DEFINITION"
+  },
+  {
+    "name": "_TARGET_TAG"
+  },
+  {
+    "name": "_TARGET_TAG$1"
+  },
+  {
+    "name": "_THROW_IF_NOT_FOUND"
+  },
+  {
+    "name": "_TRANSLATIONS_TAG"
+  },
+  {
+    "name": "_TRANSLATION_TAG"
+  },
+  {
+    "name": "_Tokenizer"
+  },
+  {
+    "name": "_TreeBuilder"
+  },
+  {
+    "name": "_TsEmitterVisitor"
+  },
+  {
+    "name": "_UNIT_TAG"
+  },
+  {
+    "name": "_UNIT_TAG$1"
+  },
+  {
+    "name": "_VERSION"
+  },
+  {
+    "name": "_VERSION$1"
+  },
+  {
+    "name": "_ValueOutputAstTransformer"
+  },
+  {
+    "name": "_Visitor"
+  },
+  {
+    "name": "_Visitor$2"
+  },
+  {
+    "name": "_VisitorMode"
+  },
+  {
+    "name": "_WriteVisitor"
+  },
+  {
+    "name": "_WriteVisitor$1"
+  },
+  {
+    "name": "_XLIFF_TAG"
+  },
+  {
+    "name": "_XMLNS"
+  },
+  {
+    "name": "_XMLNS$1"
+  },
+  {
+    "name": "__assign"
+  },
+  {
+    "name": "__extends"
+  },
+  {
+    "name": "__extends$1"
+  },
+  {
+    "name": "__extends$2"
+  },
+  {
+    "name": "__extends$3"
+  },
+  {
+    "name": "__extends$4"
+  },
+  {
+    "name": "__extends$5"
+  },
+  {
+    "name": "__extends$6"
+  },
+  {
+    "name": "__extends$7"
+  },
+  {
+    "name": "__extends$q"
+  },
+  {
+    "name": "__extends$r"
+  },
+  {
+    "name": "__extends$s"
+  },
+  {
+    "name": "__extends$u"
+  },
+  {
+    "name": "__read"
+  },
+  {
+    "name": "__self"
+  },
+  {
+    "name": "__spread"
+  },
+  {
+    "name": "__symbol__"
+  },
+  {
+    "name": "__values"
+  },
+  {
+    "name": "__window"
+  },
+  {
+    "name": "_addDebugContext"
+  },
+  {
+    "name": "_addInterpolationPart"
+  },
+  {
+    "name": "_addQueryToTokenMap"
+  },
+  {
+    "name": "_anonymousTypeIndex"
+  },
+  {
+    "name": "_attrToPropMap"
+  },
+  {
+    "name": "_buildFromEncodedParts"
+  },
+  {
+    "name": "_callAndReportToErrorHandler"
+  },
+  {
+    "name": "_callFactory"
+  },
+  {
+    "name": "_chromeNumKeyPadMap"
+  },
+  {
+    "name": "_colonHostContextRe"
+  },
+  {
+    "name": "_colonHostRe"
+  },
+  {
+    "name": "_commentRe"
+  },
+  {
+    "name": "_commentWithHashRe"
+  },
+  {
+    "name": "_createClass"
+  },
+  {
+    "name": "_createIndent"
+  },
+  {
+    "name": "_createInterpolateRegExp"
+  },
+  {
+    "name": "_createProviderInstance"
+  },
+  {
+    "name": "_createProviderInstance$1"
+  },
+  {
+    "name": "_cssColonHostContextRe"
+  },
+  {
+    "name": "_cssColonHostRe"
+  },
+  {
+    "name": "_cssContentNextSelectorRe"
+  },
+  {
+    "name": "_cssContentRuleRe"
+  },
+  {
+    "name": "_cssContentUnscopedRuleRe"
+  },
+  {
+    "name": "_curlyRe"
+  },
+  {
+    "name": "_currentInjector"
+  },
+  {
+    "name": "_declareFn"
+  },
+  {
+    "name": "_def"
+  },
+  {
+    "name": "_devMode"
+  },
+  {
+    "name": "_document"
+  },
+  {
+    "name": "_enable_super_gross_mode_that_will_cause_bad_things"
+  },
+  {
+    "name": "_executeFunctionStatements"
+  },
+  {
+    "name": "_expParser"
+  },
+  {
+    "name": "_expandDefaultForm"
+  },
+  {
+    "name": "_expandPluralForm"
+  },
+  {
+    "name": "_extractPlaceholderName"
+  },
+  {
+    "name": "_getContentQueries"
+  },
+  {
+    "name": "_getI18nAttr"
+  },
+  {
+    "name": "_getViewQueries"
+  },
+  {
+    "name": "_global"
+  },
+  {
+    "name": "_isClosingComment"
+  },
+  {
+    "name": "_isEmptyTextNode"
+  },
+  {
+    "name": "_isOpeningComment"
+  },
+  {
+    "name": "_isPixelDimensionStyle"
+  },
+  {
+    "name": "_joinAndCanonicalizePath"
+  },
+  {
+    "name": "_keyMap"
+  },
+  {
+    "name": "_lastDefined"
+  },
+  {
+    "name": "_mergeArrays"
+  },
+  {
+    "name": "_mergeOptions"
+  },
+  {
+    "name": "_nativeNodeToDebugNode"
+  },
+  {
+    "name": "_normalizeArray"
+  },
+  {
+    "name": "_parenSuffix"
+  },
+  {
+    "name": "_parseMessageMeta"
+  },
+  {
+    "name": "_polyfillHost"
+  },
+  {
+    "name": "_polyfillHostContext"
+  },
+  {
+    "name": "_polyfillHostNoCombinator"
+  },
+  {
+    "name": "_polyfillHostNoCombinatorRe"
+  },
+  {
+    "name": "_polyfillHostRe"
+  },
+  {
+    "name": "_pureExpressionDef"
+  },
+  {
+    "name": "_queryElementChildren"
+  },
+  {
+    "name": "_queryNodeChildren"
+  },
+  {
+    "name": "_removeDotSegments"
+  },
+  {
+    "name": "_renderCompCount"
+  },
+  {
+    "name": "_resolveProviders"
+  },
+  {
+    "name": "_resolveProvidersFromDirectives"
+  },
+  {
+    "name": "_resolveUrl"
+  },
+  {
+    "name": "_ruleRe"
+  },
+  {
+    "name": "_selectorReSuffix"
+  },
+  {
+    "name": "_shadowDOMSelectorsRe"
+  },
+  {
+    "name": "_shadowDeepSelectors"
+  },
+  {
+    "name": "_split"
+  },
+  {
+    "name": "_splitAt"
+  },
+  {
+    "name": "_splitRe"
+  },
+  {
+    "name": "_symbolIterator"
+  },
+  {
+    "name": "_testabilityGetter"
+  },
+  {
+    "name": "_throwError"
+  },
+  {
+    "name": "_toStringWithNull"
+  },
+  {
+    "name": "_tokenKeyCache"
+  },
+  {
+    "name": "_transformProvider"
+  },
+  {
+    "name": "_transformProviderAst"
+  },
+  {
+    "name": "_unexpectedCharacterErrorMsg"
+  },
+  {
+    "name": "_unknownEntityErrorMsg"
+  },
+  {
+    "name": "_visitor"
+  },
+  {
+    "name": "add32"
+  },
+  {
+    "name": "add32to64"
+  },
+  {
+    "name": "add64"
+  },
+  {
+    "name": "addBigInt"
+  },
+  {
+    "name": "addToArray"
+  },
+  {
+    "name": "anchorDef"
+  },
+  {
+    "name": "appendNgContent"
+  },
+  {
+    "name": "applyProviderOverridesToNgModule"
+  },
+  {
+    "name": "applyProviderOverridesToView"
+  },
+  {
+    "name": "applySourceSpanToExpressionIfNeeded"
+  },
+  {
+    "name": "applySourceSpanToStatementIfNeeded"
+  },
+  {
+    "name": "areAllEquivalent"
+  },
+  {
+    "name": "areIterablesEqual"
+  },
+  {
+    "name": "asElementData"
+  },
+  {
+    "name": "asProviderData"
+  },
+  {
+    "name": "asPureExpressionData"
+  },
+  {
+    "name": "asQueryList"
+  },
+  {
+    "name": "asTextData"
+  },
+  {
+    "name": "assertArrayOfStrings"
+  },
+  {
+    "name": "assertComponent"
+  },
+  {
+    "name": "assertInterpolationSymbols"
+  },
+  {
+    "name": "assertNotNull"
+  },
+  {
+    "name": "assertPlatform"
+  },
+  {
+    "name": "attachEmbeddedView"
+  },
+  {
+    "name": "attachProjectedView"
+  },
+  {
+    "name": "baseElement"
+  },
+  {
+    "name": "baseHtmlParser"
+  },
+  {
+    "name": "blackListedEvents"
+  },
+  {
+    "name": "builtinExternalReferences"
+  },
+  {
+    "name": "byteAt"
+  },
+  {
+    "name": "byteStringToDecString"
+  },
+  {
+    "name": "byteStringToHexString"
+  },
+  {
+    "name": "calcBindingFlags"
+  },
+  {
+    "name": "calcPossibleSecurityContexts"
+  },
+  {
+    "name": "calcQueryValues"
+  },
+  {
+    "name": "calcStaticDynamicQueryFlags"
+  },
+  {
+    "name": "callCheckStmt"
+  },
+  {
+    "name": "callElementProvidersLifecycles"
+  },
+  {
+    "name": "callFactory"
+  },
+  {
+    "name": "callLifecycleHooksChildrenFirst"
+  },
+  {
+    "name": "callNgModuleLifecycle"
+  },
+  {
+    "name": "callProviderLifecycles"
+  },
+  {
+    "name": "callUnwrapValue"
+  },
+  {
+    "name": "callViewAction"
+  },
+  {
+    "name": "callWithDebugContext"
+  },
+  {
+    "name": "camelCaseToDashCase"
+  },
+  {
+    "name": "checkAndUpdateBinding"
+  },
+  {
+    "name": "checkAndUpdateDirectiveDynamic"
+  },
+  {
+    "name": "checkAndUpdateDirectiveInline"
+  },
+  {
+    "name": "checkAndUpdateElementDynamic"
+  },
+  {
+    "name": "checkAndUpdateElementInline"
+  },
+  {
+    "name": "checkAndUpdateElementValue"
+  },
+  {
+    "name": "checkAndUpdateNode"
+  },
+  {
+    "name": "checkAndUpdateNodeDynamic"
+  },
+  {
+    "name": "checkAndUpdateNodeInline"
+  },
+  {
+    "name": "checkAndUpdatePureExpressionDynamic"
+  },
+  {
+    "name": "checkAndUpdatePureExpressionInline"
+  },
+  {
+    "name": "checkAndUpdateQuery"
+  },
+  {
+    "name": "checkAndUpdateTextDynamic"
+  },
+  {
+    "name": "checkAndUpdateTextInline"
+  },
+  {
+    "name": "checkAndUpdateView"
+  },
+  {
+    "name": "checkBinding"
+  },
+  {
+    "name": "checkBindingNoChanges"
+  },
+  {
+    "name": "checkNoChangesNode"
+  },
+  {
+    "name": "checkNoChangesNodeDynamic"
+  },
+  {
+    "name": "checkNoChangesNodeInline"
+  },
+  {
+    "name": "checkNoChangesQuery"
+  },
+  {
+    "name": "checkNoChangesView"
+  },
+  {
+    "name": "checkStable"
+  },
+  {
+    "name": "cloneNgModuleDefinition"
+  },
+  {
+    "name": "collectReferences"
+  },
+  {
+    "name": "compareCharCodeCaseInsensitive"
+  },
+  {
+    "name": "componentFactoryName"
+  },
+  {
+    "name": "componentFactoryResolverProviderDef"
+  },
+  {
+    "name": "componentStillLoadingError"
+  },
+  {
+    "name": "computeDeps"
+  },
+  {
+    "name": "computeMsgId"
+  },
+  {
+    "name": "config"
+  },
+  {
+    "name": "connectableObservableDescriptor"
+  },
+  {
+    "name": "connectableProto"
+  },
+  {
+    "name": "convertActionBinding"
+  },
+  {
+    "name": "convertBuiltins"
+  },
+  {
+    "name": "convertInjectableProviderToFactory"
+  },
+  {
+    "name": "convertPropertyBinding"
+  },
+  {
+    "name": "convertPropertyBindingBuiltins"
+  },
+  {
+    "name": "convertStmtIntoExpression"
+  },
+  {
+    "name": "convertToStatementIfNeeded"
+  },
+  {
+    "name": "convertTsickleDecoratorIntoMetadata"
+  },
+  {
+    "name": "convertValueToOutputAst"
+  },
+  {
+    "name": "createAttribute"
+  },
+  {
+    "name": "createBuiltinExternalReferencesMap"
+  },
+  {
+    "name": "createChangeDetectorRef"
+  },
+  {
+    "name": "createClass"
+  },
+  {
+    "name": "createComponent"
+  },
+  {
+    "name": "createComponentFactory"
+  },
+  {
+    "name": "createComponentView"
+  },
+  {
+    "name": "createContentChild"
+  },
+  {
+    "name": "createContentChildren"
+  },
+  {
+    "name": "createCurrValueExpr"
+  },
+  {
+    "name": "createDebugServices"
+  },
+  {
+    "name": "createDirective"
+  },
+  {
+    "name": "createDirectiveInstance"
+  },
+  {
+    "name": "createDynamicClass"
+  },
+  {
+    "name": "createElement"
+  },
+  {
+    "name": "createElementCssSelector"
+  },
+  {
+    "name": "createEmbeddedView"
+  },
+  {
+    "name": "createHost"
+  },
+  {
+    "name": "createHostBinding"
+  },
+  {
+    "name": "createHostListener"
+  },
+  {
+    "name": "createI18nMessageFactory"
+  },
+  {
+    "name": "createInject"
+  },
+  {
+    "name": "createInjectable"
+  },
+  {
+    "name": "createInjectionToken"
+  },
+  {
+    "name": "createInjector$1"
+  },
+  {
+    "name": "createInput"
+  },
+  {
+    "name": "createLazyProperty"
+  },
+  {
+    "name": "createNgModule"
+  },
+  {
+    "name": "createNgModuleFactory"
+  },
+  {
+    "name": "createNgModuleRef"
+  },
+  {
+    "name": "createOptional"
+  },
+  {
+    "name": "createOutput$1"
+  },
+  {
+    "name": "createOutputContext"
+  },
+  {
+    "name": "createPipe"
+  },
+  {
+    "name": "createPipeInstance"
+  },
+  {
+    "name": "createPlatform"
+  },
+  {
+    "name": "createPlatformFactory"
+  },
+  {
+    "name": "createPreventDefaultVar"
+  },
+  {
+    "name": "createProdRootView"
+  },
+  {
+    "name": "createProdServices"
+  },
+  {
+    "name": "createProviderInstance"
+  },
+  {
+    "name": "createPureExpression"
+  },
+  {
+    "name": "createQuery"
+  },
+  {
+    "name": "createRendererType2"
+  },
+  {
+    "name": "createRendererV1"
+  },
+  {
+    "name": "createRootData"
+  },
+  {
+    "name": "createRootView"
+  },
+  {
+    "name": "createScope"
+  },
+  {
+    "name": "createSelf"
+  },
+  {
+    "name": "createSerializer"
+  },
+  {
+    "name": "createSkipSelf"
+  },
+  {
+    "name": "createTemplateData"
+  },
+  {
+    "name": "createText"
+  },
+  {
+    "name": "createTokenForExternalReference"
+  },
+  {
+    "name": "createTokenForReference"
+  },
+  {
+    "name": "createView"
+  },
+  {
+    "name": "createViewChild"
+  },
+  {
+    "name": "createViewChildren"
+  },
+  {
+    "name": "createViewContainerData"
+  },
+  {
+    "name": "createViewNodes"
+  },
+  {
+    "name": "dashCaseToCamelCase"
+  },
+  {
+    "name": "debugCheckAndUpdateNode"
+  },
+  {
+    "name": "debugCheckAndUpdateView"
+  },
+  {
+    "name": "debugCheckNoChangesNode"
+  },
+  {
+    "name": "debugCheckNoChangesView"
+  },
+  {
+    "name": "debugClearOverrides"
+  },
+  {
+    "name": "debugCreateComponentView"
+  },
+  {
+    "name": "debugCreateEmbeddedView"
+  },
+  {
+    "name": "debugCreateNgModuleRef"
+  },
+  {
+    "name": "debugCreateRootView"
+  },
+  {
+    "name": "debugDestroyView"
+  },
+  {
+    "name": "debugHandleEvent"
+  },
+  {
+    "name": "debugOutputAstAsTypeScript"
+  },
+  {
+    "name": "debugOverrideComponentView"
+  },
+  {
+    "name": "debugOverrideProvider"
+  },
+  {
+    "name": "debugSetCurrentNode"
+  },
+  {
+    "name": "debugUpdateDirectives"
+  },
+  {
+    "name": "debugUpdateRenderer"
+  },
+  {
+    "name": "decimalDigest"
+  },
+  {
+    "name": "declaredViewContainer"
+  },
+  {
+    "name": "dedupeArray"
+  },
+  {
+    "name": "defaultErrorLogger"
+  },
+  {
+    "name": "defineInjectable"
+  },
+  {
+    "name": "depDef"
+  },
+  {
+    "name": "destroyView"
+  },
+  {
+    "name": "destroyViewNodes"
+  },
+  {
+    "name": "detachEmbeddedView"
+  },
+  {
+    "name": "detachProjectedView"
+  },
+  {
+    "name": "detectWTF"
+  },
+  {
+    "name": "devModeEqual"
+  },
+  {
+    "name": "digest"
+  },
+  {
+    "name": "digest$1"
+  },
+  {
+    "name": "directiveDef"
+  },
+  {
+    "name": "dirtyParentQueries"
+  },
+  {
+    "name": "dispatchEvent"
+  },
+  {
+    "name": "elementBindingDef"
+  },
+  {
+    "name": "elementDef"
+  },
+  {
+    "name": "elementEventFullName"
+  },
+  {
+    "name": "elementEventFullName$1"
+  },
+  {
+    "name": "elementEventNameAndTarget"
+  },
+  {
+    "name": "empty"
+  },
+  {
+    "name": "ensureExpressionMode"
+  },
+  {
+    "name": "ensureStatementMode"
+  },
+  {
+    "name": "error"
+  },
+  {
+    "name": "errorObject"
+  },
+  {
+    "name": "escapeBlocks"
+  },
+  {
+    "name": "escapeIdentifier"
+  },
+  {
+    "name": "escapeRegExp"
+  },
+  {
+    "name": "escapeXml"
+  },
+  {
+    "name": "evalExpression"
+  },
+  {
+    "name": "eventHandlerClosure"
+  },
+  {
+    "name": "execComponentViewsAction"
+  },
+  {
+    "name": "execEmbeddedViewsAction"
+  },
+  {
+    "name": "execProjectedViewsAction"
+  },
+  {
+    "name": "execQueriesAction"
+  },
+  {
+    "name": "execRenderNodeAction"
+  },
+  {
+    "name": "expandNodes"
+  },
+  {
+    "name": "expressionChangedAfterItHasBeenCheckedError"
+  },
+  {
+    "name": "expressionType"
+  },
+  {
+    "name": "extendStatics"
+  },
+  {
+    "name": "extractCommentsWithHash"
+  },
+  {
+    "name": "extractIdentifiers"
+  },
+  {
+    "name": "extractStyleUrls"
+  },
+  {
+    "name": "filterQueryId"
+  },
+  {
+    "name": "findCompView"
+  },
+  {
+    "name": "findHostElement"
+  },
+  {
+    "name": "findLast"
+  },
+  {
+    "name": "findReadVarNames"
+  },
+  {
+    "name": "findStaticQueryIds"
+  },
+  {
+    "name": "fingerprint"
+  },
+  {
+    "name": "fixedAttrsDef"
+  },
+  {
+    "name": "fk"
+  },
+  {
+    "name": "flatten"
+  },
+  {
+    "name": "flatten$2"
+  },
+  {
+    "name": "flattenAndDedupeArray"
+  },
+  {
+    "name": "flattenArray"
+  },
+  {
+    "name": "flattenStatements"
+  },
+  {
+    "name": "flattenUnsubscriptionErrors"
+  },
+  {
+    "name": "fn"
+  },
+  {
+    "name": "forkInnerZoneWithAngularBehavior"
+  },
+  {
+    "name": "formatError"
+  },
+  {
+    "name": "forwardRef"
+  },
+  {
+    "name": "from"
+  },
+  {
+    "name": "fromArray"
+  },
+  {
+    "name": "fromIterable"
+  },
+  {
+    "name": "fromObservable"
+  },
+  {
+    "name": "fromPromise"
+  },
+  {
+    "name": "getAllLifecycleHooks"
+  },
+  {
+    "name": "getBaseElementHref"
+  },
+  {
+    "name": "getClosureSafeProperty"
+  },
+  {
+    "name": "getClosureSafeProperty$1"
+  },
+  {
+    "name": "getComponentViewDefinitionFactory"
+  },
+  {
+    "name": "getCtypeForTag"
+  },
+  {
+    "name": "getCurrentDebugContext"
+  },
+  {
+    "name": "getDOM"
+  },
+  {
+    "name": "getDebugContext"
+  },
+  {
+    "name": "getDebugNode"
+  },
+  {
+    "name": "getErrorLogger"
+  },
+  {
+    "name": "getHookName"
+  },
+  {
+    "name": "getHtmlTagDefinition"
+  },
+  {
+    "name": "getNgZone"
+  },
+  {
+    "name": "getNsPrefix"
+  },
+  {
+    "name": "getOriginalError"
+  },
+  {
+    "name": "getParentCtor"
+  },
+  {
+    "name": "getParentRenderElement"
+  },
+  {
+    "name": "getPlatform"
+  },
+  {
+    "name": "getPromiseCtor"
+  },
+  {
+    "name": "getQueryValue"
+  },
+  {
+    "name": "getRenderNodeIndex"
+  },
+  {
+    "name": "getStylesVarName"
+  },
+  {
+    "name": "getSymbolIterator"
+  },
+  {
+    "name": "getSymbolIterator$1"
+  },
+  {
+    "name": "getTypeForTag"
+  },
+  {
+    "name": "getUrlScheme"
+  },
+  {
+    "name": "getXmlTagDefinition"
+  },
+  {
+    "name": "hasLifecycleHook"
+  },
+  {
+    "name": "hasPreserveWhitespacesAttr"
+  },
+  {
+    "name": "hash32"
+  },
+  {
+    "name": "hostReportError"
+  },
+  {
+    "name": "hostViewClassName"
+  },
+  {
+    "name": "i18nCommentsWarned"
+  },
+  {
+    "name": "i18nMetaToDocStmt"
+  },
+  {
+    "name": "identifierModuleUrl"
+  },
+  {
+    "name": "identifierName"
+  },
+  {
+    "name": "identity"
+  },
+  {
+    "name": "importExpr"
+  },
+  {
+    "name": "importType"
+  },
+  {
+    "name": "indexDebugNode"
+  },
+  {
+    "name": "initDomAdapter"
+  },
+  {
+    "name": "initNgModule"
+  },
+  {
+    "name": "initServicesIfNeeded"
+  },
+  {
+    "name": "initView"
+  },
+  {
+    "name": "initialized"
+  },
+  {
+    "name": "inject"
+  },
+  {
+    "name": "injectArgs"
+  },
+  {
+    "name": "inlineInterpolate"
+  },
+  {
+    "name": "interpolate"
+  },
+  {
+    "name": "interpretStatements"
+  },
+  {
+    "name": "invalid"
+  },
+  {
+    "name": "isAnimationLabel"
+  },
+  {
+    "name": "isArray"
+  },
+  {
+    "name": "isArrayLike"
+  },
+  {
+    "name": "isAsciiHexDigit"
+  },
+  {
+    "name": "isAsciiLetter"
+  },
+  {
+    "name": "isComponentView"
+  },
+  {
+    "name": "isDefined"
+  },
+  {
+    "name": "isDevMode"
+  },
+  {
+    "name": "isDigit"
+  },
+  {
+    "name": "isDigitEntityEnd"
+  },
+  {
+    "name": "isDirectiveMetadata"
+  },
+  {
+    "name": "isEmbeddedView"
+  },
+  {
+    "name": "isEmptyExpression"
+  },
+  {
+    "name": "isExpansionCaseStart"
+  },
+  {
+    "name": "isExpansionFormStart"
+  },
+  {
+    "name": "isExponentSign"
+  },
+  {
+    "name": "isExponentStart"
+  },
+  {
+    "name": "isFunction"
+  },
+  {
+    "name": "isIdentifier"
+  },
+  {
+    "name": "isIdentifierPart"
+  },
+  {
+    "name": "isIdentifierStart"
+  },
+  {
+    "name": "isIterable"
+  },
+  {
+    "name": "isJsObject"
+  },
+  {
+    "name": "isListLikeIterable"
+  },
+  {
+    "name": "isNameEnd"
+  },
+  {
+    "name": "isNamedEntityEnd"
+  },
+  {
+    "name": "isNgContainer"
+  },
+  {
+    "name": "isNgContainer$1"
+  },
+  {
+    "name": "isNgContent"
+  },
+  {
+    "name": "isNgTemplate"
+  },
+  {
+    "name": "isNotWhitespace"
+  },
+  {
+    "name": "isObject"
+  },
+  {
+    "name": "isObservable"
+  },
+  {
+    "name": "isObservable$1"
+  },
+  {
+    "name": "isPrefixEnd"
+  },
+  {
+    "name": "isPromise"
+  },
+  {
+    "name": "isPromise$1"
+  },
+  {
+    "name": "isPromise$2"
+  },
+  {
+    "name": "isQuote"
+  },
+  {
+    "name": "isScheduler"
+  },
+  {
+    "name": "isStrictStringMap"
+  },
+  {
+    "name": "isStyleUrlResolvable"
+  },
+  {
+    "name": "isTrustedSubscriber"
+  },
+  {
+    "name": "isType"
+  },
+  {
+    "name": "isValidType"
+  },
+  {
+    "name": "isVariable"
+  },
+  {
+    "name": "isViewDebugError"
+  },
+  {
+    "name": "isWhitespace"
+  },
+  {
+    "name": "iterator"
+  },
+  {
+    "name": "jitSourceUrl"
+  },
+  {
+    "name": "jitStatements"
+  },
+  {
+    "name": "lastOnStack"
+  },
+  {
+    "name": "leave"
+  },
+  {
+    "name": "lifecycleHookToNodeFlag"
+  },
+  {
+    "name": "listenToElementOutputs"
+  },
+  {
+    "name": "literal"
+  },
+  {
+    "name": "literalArr"
+  },
+  {
+    "name": "literalMap"
+  },
+  {
+    "name": "looseIdentical"
+  },
+  {
+    "name": "makeDecorator"
+  },
+  {
+    "name": "makeMetadataCtor"
+  },
+  {
+    "name": "makeMetadataFactory"
+  },
+  {
+    "name": "makeParamDecorator"
+  },
+  {
+    "name": "map"
+  },
+  {
+    "name": "markNodeAsProjectedTemplate"
+  },
+  {
+    "name": "markParentViewsForCheck"
+  },
+  {
+    "name": "markParentViewsForCheckProjectedViews"
+  },
+  {
+    "name": "markProjectedViewsForCheck"
+  },
+  {
+    "name": "merge"
+  },
+  {
+    "name": "mergeAll"
+  },
+  {
+    "name": "mergeAttributeValue"
+  },
+  {
+    "name": "mergeMap"
+  },
+  {
+    "name": "mergeNsAndName"
+  },
+  {
+    "name": "mergeTextTokens"
+  },
+  {
+    "name": "mergeTranslations"
+  },
+  {
+    "name": "mix"
+  },
+  {
+    "name": "moduleDef"
+  },
+  {
+    "name": "moduleFactories"
+  },
+  {
+    "name": "moduleProvideDef"
+  },
+  {
+    "name": "moduleTransitivelyPresent"
+  },
+  {
+    "name": "moveEmbeddedView"
+  },
+  {
+    "name": "multiProviderDef"
+  },
+  {
+    "name": "multiProviderMixError"
+  },
+  {
+    "name": "multicast"
+  },
+  {
+    "name": "needsAdditionalRootNode"
+  },
+  {
+    "name": "newCharacterToken"
+  },
+  {
+    "name": "newErrorToken"
+  },
+  {
+    "name": "newIdentifierToken"
+  },
+  {
+    "name": "newKeywordToken"
+  },
+  {
+    "name": "newNumberToken"
+  },
+  {
+    "name": "newOperatorToken"
+  },
+  {
+    "name": "newStringToken"
+  },
+  {
+    "name": "nextDirectiveWithBinding"
+  },
+  {
+    "name": "nextRenderNodeWithBinding"
+  },
+  {
+    "name": "ngContentDef"
+  },
+  {
+    "name": "ngModuleJitUrl"
+  },
+  {
+    "name": "ngfactoryFilePath"
+  },
+  {
+    "name": "noComponentFactoryError"
+  },
+  {
+    "name": "noUndefined"
+  },
+  {
+    "name": "nodeValue"
+  },
+  {
+    "name": "noop"
+  },
+  {
+    "name": "noop$1"
+  },
+  {
+    "name": "noopScope"
+  },
+  {
+    "name": "normalizeDebugBindingName"
+  },
+  {
+    "name": "normalizeDebugBindingValue"
+  },
+  {
+    "name": "normalizeGenFileSuffix"
+  },
+  {
+    "name": "normalizeNgContentSelect"
+  },
+  {
+    "name": "not$1"
+  },
+  {
+    "name": "nullSafeIsEquivalent"
+  },
+  {
+    "name": "numberTimesBigInt"
+  },
+  {
+    "name": "observable"
+  },
+  {
+    "name": "onEnter"
+  },
+  {
+    "name": "onLeave"
+  },
+  {
+    "name": "optionsReducer"
+  },
+  {
+    "name": "parseCookieValue"
+  },
+  {
+    "name": "parseIntAutoRadix"
+  },
+  {
+    "name": "pipeDef"
+  },
+  {
+    "name": "pipeFromArray"
+  },
+  {
+    "name": "platformBrowserDynamic"
+  },
+  {
+    "name": "platformCore"
+  },
+  {
+    "name": "platformCoreDynamic"
+  },
+  {
+    "name": "preR3InjectableCompile"
+  },
+  {
+    "name": "preparseElement"
+  },
+  {
+    "name": "prependTemporaryDecls"
+  },
+  {
+    "name": "preserveWhitespacesDefault"
+  },
+  {
+    "name": "processRules"
+  },
+  {
+    "name": "prodCheckAndUpdateNode"
+  },
+  {
+    "name": "prodCheckNoChangesNode"
+  },
+  {
+    "name": "promise"
+  },
+  {
+    "name": "providerDef"
+  },
+  {
+    "name": "providerDef$1"
+  },
+  {
+    "name": "providerOverrides"
+  },
+  {
+    "name": "providerOverridesWithScope"
+  },
+  {
+    "name": "pureArrayDef"
+  },
+  {
+    "name": "pureObjectDef"
+  },
+  {
+    "name": "purePipeDef"
+  },
+  {
+    "name": "queryDef"
+  },
+  {
+    "name": "recursivelyProcessProviders"
+  },
+  {
+    "name": "refCount"
+  },
+  {
+    "name": "registerModuleFactory"
+  },
+  {
+    "name": "relativePath"
+  },
+  {
+    "name": "remove"
+  },
+  {
+    "name": "removeDebugNodeFromIndex"
+  },
+  {
+    "name": "removeFromArray"
+  },
+  {
+    "name": "removeSummaryDuplicates"
+  },
+  {
+    "name": "removeWhitespaces"
+  },
+  {
+    "name": "renderAttachEmbeddedView"
+  },
+  {
+    "name": "renderDetachView"
+  },
+  {
+    "name": "renderEventHandlerClosure"
+  },
+  {
+    "name": "renderNode"
+  },
+  {
+    "name": "rendererTypeName"
+  },
+  {
+    "name": "replaceNgsp"
+  },
+  {
+    "name": "resolveDefinition"
+  },
+  {
+    "name": "resolveDep"
+  },
+  {
+    "name": "resolveForwardRef"
+  },
+  {
+    "name": "resolveForwardRef$1"
+  },
+  {
+    "name": "resolveNgModuleDep"
+  },
+  {
+    "name": "resolveProvider"
+  },
+  {
+    "name": "resolveRendererType2"
+  },
+  {
+    "name": "resolveToken"
+  },
+  {
+    "name": "rol32"
+  },
+  {
+    "name": "rol64"
+  },
+  {
+    "name": "rootRenderNodes"
+  },
+  {
+    "name": "rxSubscriber"
+  },
+  {
+    "name": "sanitizeIdentifier"
+  },
+  {
+    "name": "scheduleMicroTask"
+  },
+  {
+    "name": "serialize"
+  },
+  {
+    "name": "serializeNodes"
+  },
+  {
+    "name": "serializeTags"
+  },
+  {
+    "name": "serializerVisitor"
+  },
+  {
+    "name": "setCurrentInjector"
+  },
+  {
+    "name": "setElementAttribute"
+  },
+  {
+    "name": "setElementClass"
+  },
+  {
+    "name": "setElementProperty"
+  },
+  {
+    "name": "setElementStyle"
+  },
+  {
+    "name": "setRootDomAdapter"
+  },
+  {
+    "name": "setTestabilityGetter"
+  },
+  {
+    "name": "sha1"
+  },
+  {
+    "name": "share"
+  },
+  {
+    "name": "shareSubjectFactory"
+  },
+  {
+    "name": "sharedStylesheetJitUrl"
+  },
+  {
+    "name": "shiftInitState"
+  },
+  {
+    "name": "shouldCallLifecycleInitHook"
+  },
+  {
+    "name": "singleProviderDef"
+  },
+  {
+    "name": "splitAtColon"
+  },
+  {
+    "name": "splitAtPeriod"
+  },
+  {
+    "name": "splitClasses"
+  },
+  {
+    "name": "splitDepsDsl"
+  },
+  {
+    "name": "splitExportAs"
+  },
+  {
+    "name": "splitMatchedQueriesDsl"
+  },
+  {
+    "name": "splitNamespace"
+  },
+  {
+    "name": "splitNsName"
+  },
+  {
+    "name": "splitTypescriptSuffix"
+  },
+  {
+    "name": "staticError"
+  },
+  {
+    "name": "staticViewQueryIds"
+  },
+  {
+    "name": "stringToWords32"
+  },
+  {
+    "name": "stringify"
+  },
+  {
+    "name": "stringify$2"
+  },
+  {
+    "name": "stringifyType"
+  },
+  {
+    "name": "stripComments"
+  },
+  {
+    "name": "sub32"
+  },
+  {
+    "name": "subscribeTo"
+  },
+  {
+    "name": "subscribeToArray"
+  },
+  {
+    "name": "subscribeToIterable"
+  },
+  {
+    "name": "subscribeToObservable"
+  },
+  {
+    "name": "subscribeToPromise"
+  },
+  {
+    "name": "subscribeToResult"
+  },
+  {
+    "name": "supportsState"
+  },
+  {
+    "name": "syntaxError"
+  },
+  {
+    "name": "tagToString"
+  },
+  {
+    "name": "targetsModule"
+  },
+  {
+    "name": "templateJitUrl"
+  },
+  {
+    "name": "templateSourceUrl"
+  },
+  {
+    "name": "templateVisitAll"
+  },
+  {
+    "name": "temporaryDeclaration"
+  },
+  {
+    "name": "temporaryName"
+  },
+  {
+    "name": "textDef"
+  },
+  {
+    "name": "toBase64Digit"
+  },
+  {
+    "name": "toBase64String"
+  },
+  {
+    "name": "toBase64VLQ"
+  },
+  {
+    "name": "toPublicName"
+  },
+  {
+    "name": "toSubscriber"
+  },
+  {
+    "name": "toUpperCaseCharCode"
+  },
+  {
+    "name": "tokenExpr"
+  },
+  {
+    "name": "tokenKey"
+  },
+  {
+    "name": "tokenName"
+  },
+  {
+    "name": "tokenReference"
+  },
+  {
+    "name": "tokenize"
+  },
+  {
+    "name": "tryCatch"
+  },
+  {
+    "name": "tryCatcher"
+  },
+  {
+    "name": "tryResolveToken"
+  },
+  {
+    "name": "typeSourceSpan"
+  },
+  {
+    "name": "unescape"
+  },
+  {
+    "name": "unwrapValue"
+  },
+  {
+    "name": "updateProp"
+  },
+  {
+    "name": "utf8Encode"
+  },
+  {
+    "name": "validateNode"
+  },
+  {
+    "name": "variable"
+  },
+  {
+    "name": "viewClassName"
+  },
+  {
+    "name": "viewDebugError"
+  },
+  {
+    "name": "viewDef"
+  },
+  {
+    "name": "viewDefOverrides"
+  },
+  {
+    "name": "viewDestroyedError"
+  },
+  {
+    "name": "viewParentEl"
+  },
+  {
+    "name": "viewWrappedDebugError"
+  },
+  {
+    "name": "visitAll"
+  },
+  {
+    "name": "visitProjectedRenderNodes"
+  },
+  {
+    "name": "visitRenderNode"
+  },
+  {
+    "name": "visitRootRenderNodes"
+  },
+  {
+    "name": "visitSiblingRenderNodes"
+  },
+  {
+    "name": "visitValue"
+  },
+  {
+    "name": "word32ToByteString"
+  },
+  {
+    "name": "wordAt"
+  },
+  {
+    "name": "words32ToByteString"
+  },
+  {
+    "name": "wtfCreateScope"
+  },
+  {
+    "name": "wtfEnabled"
+  },
+  {
+    "name": "wtfLeave"
+  }
+]
diff --git a/packages/core/test/bundling/hello_world_r2/index.html b/packages/core/test/bundling/hello_world_r2/index.html
new file mode 100644
index 000000000000..c5c7bb3e0b56
--- /dev/null
+++ b/packages/core/test/bundling/hello_world_r2/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Angular Hello World Example</title>
+  </head>
+  <body>
+    <!-- The Angular application will be bootstrapped into this element. -->
+    <hello-world></hello-world>
+
+    <!-- 
+      Script tag which bootstraps the application. Use `?debug` in URL to select
+      the debug version of the script.
+      
+      There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can 
+      switch between which bundle the browser loads to experiment with the application.
+
+      - `bundle.min.js`: Is what the site would serve to their users. It has gone
+        through rollup, build-optimizer, and uglify with tree shaking.
+      - `bundle.min_debug.js`: Is what the developer would like to see when debugging
+        the application. It has also done through full pipeline of rollup, build-optimizer,
+        and uglify, however special flags were passed to uglify to prevent inlining and
+        property renaming.
+    -->
+    <script>
+        document.write('<script src="' + 
+          (document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js') + 
+          '"></' + 'script>');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/core/test/bundling/hello_world_r2/index.ts b/packages/core/test/bundling/hello_world_r2/index.ts
new file mode 100644
index 000000000000..eec4cbbee83f
--- /dev/null
+++ b/packages/core/test/bundling/hello_world_r2/index.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 {Component, NgModule} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+@Component({selector: 'hello-world', template: 'Hello World!'})
+export class HelloWorldComponent {
+}
+
+@NgModule({declarations: [HelloWorldComponent]})
+export class HelloWorldModule {
+}
+
+platformBrowserDynamic().bootstrapModule(HelloWorldModule);
diff --git a/packages/core/test/bundling/hello_world_r2/treeshaking_spec.ts b/packages/core/test/bundling/hello_world_r2/treeshaking_spec.ts
new file mode 100644
index 000000000000..45ea9d78cee2
--- /dev/null
+++ b/packages/core/test/bundling/hello_world_r2/treeshaking_spec.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 fs from 'fs';
+import * as path from 'path';
+
+const UTF8 = {
+  encoding: 'utf-8'
+};
+const PACKAGE = 'angular/packages/core/test/bundling/hello_world_r2';
+
+describe('treeshaking with uglify', () => {
+
+  let content: string;
+  const contentPath = require.resolve(path.join(PACKAGE, 'bundle.min_debug.js'));
+  beforeAll(() => { content = fs.readFileSync(contentPath, UTF8); });
+
+  it('should drop unused TypeScript helpers',
+     () => { expect(content).not.toContain('__asyncGenerator'); });
+
+  it('should not contain rxjs from commonjs distro', () => {
+    expect(content).not.toContain('commonjsGlobal');
+    expect(content).not.toContain('createCommonjsModule');
+  });
+});
diff --git a/packages/core/test/bundling/injection/BUILD.bazel b/packages/core/test/bundling/injection/BUILD.bazel
new file mode 100644
index 000000000000..39112c77ce44
--- /dev/null
+++ b/packages/core/test/bundling/injection/BUILD.bazel
@@ -0,0 +1,55 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
+load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "injection",
+    srcs = [
+        "index.ts",
+        "usage.ts",
+    ],
+    deps = [
+        "//packages/core",
+    ],
+)
+
+ng_rollup_bundle(
+    name = "bundle",
+    # TODO(alexeagle): This is inconsistent.
+    # We try to teach users to always have their workspace at the start of a
+    # path, to disambiguate from other workspaces.
+    # Here, the rule implementation is looking in an execroot where the layout
+    # has an "external" directory for external dependencies.
+    # This should probably start with "angular/" and let the rule deal with it.
+    entry_point = "packages/core/test/bundling/injection/index.js",
+    deps = [
+        ":injection",
+        "//packages/core",
+    ],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["*_spec.ts"]),
+    deps = [
+        ":injection",
+        "//packages:types",
+        "//packages/core/testing",
+        "//packages/private/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    deps = [":test_lib"],
+)
+
+js_expected_symbol_test(
+    name = "symbol_test",
+    src = ":bundle.min_debug.js",
+    golden = ":bundle.golden_symbols.json",
+)
diff --git a/packages/core/test/bundling/injection/bundle.golden_symbols.json b/packages/core/test/bundling/injection/bundle.golden_symbols.json
new file mode 100644
index 000000000000..fa888017ba5e
--- /dev/null
+++ b/packages/core/test/bundling/injection/bundle.golden_symbols.json
@@ -0,0 +1,140 @@
+[
+  {
+    "name": "APP_ROOT"
+  },
+  {
+    "name": "CIRCULAR$1"
+  },
+  {
+    "name": "EMPTY_ARRAY$1"
+  },
+  {
+    "name": "GET_PROPERTY_NAME"
+  },
+  {
+    "name": "INJECTOR"
+  },
+  {
+    "name": "Inject"
+  },
+  {
+    "name": "InjectionToken"
+  },
+  {
+    "name": "NOT_YET"
+  },
+  {
+    "name": "NULL_INJECTOR$1"
+  },
+  {
+    "name": "NullInjector"
+  },
+  {
+    "name": "Optional"
+  },
+  {
+    "name": "PARAMETERS"
+  },
+  {
+    "name": "R3Injector"
+  },
+  {
+    "name": "ScopedService"
+  },
+  {
+    "name": "Self"
+  },
+  {
+    "name": "SkipSelf"
+  },
+  {
+    "name": "THROW_IF_NOT_FOUND"
+  },
+  {
+    "name": "USE_VALUE"
+  },
+  {
+    "name": "_THROW_IF_NOT_FOUND"
+  },
+  {
+    "name": "__read"
+  },
+  {
+    "name": "__spread"
+  },
+  {
+    "name": "_currentInjector"
+  },
+  {
+    "name": "couldBeInjectableType"
+  },
+  {
+    "name": "createInjector"
+  },
+  {
+    "name": "deepForEach"
+  },
+  {
+    "name": "defineInjectable"
+  },
+  {
+    "name": "defineInjector"
+  },
+  {
+    "name": "forwardRef"
+  },
+  {
+    "name": "getClosureSafeProperty$1"
+  },
+  {
+    "name": "getNullInjector"
+  },
+  {
+    "name": "hasDeps"
+  },
+  {
+    "name": "hasOnDestroy"
+  },
+  {
+    "name": "inject"
+  },
+  {
+    "name": "injectArgs"
+  },
+  {
+    "name": "injectableDefRecord"
+  },
+  {
+    "name": "isExistingProvider"
+  },
+  {
+    "name": "isFactoryProvider"
+  },
+  {
+    "name": "isTypeProvider"
+  },
+  {
+    "name": "isValueProvider"
+  },
+  {
+    "name": "makeMetadataCtor"
+  },
+  {
+    "name": "makeParamDecorator"
+  },
+  {
+    "name": "makeRecord"
+  },
+  {
+    "name": "providerToRecord"
+  },
+  {
+    "name": "resolveForwardRef"
+  },
+  {
+    "name": "setCurrentInjector"
+  },
+  {
+    "name": "stringify"
+  }
+]
\ No newline at end of file
diff --git a/packages/core/test/bundling/injection/index.ts b/packages/core/test/bundling/injection/index.ts
new file mode 100644
index 000000000000..7599c81978af
--- /dev/null
+++ b/packages/core/test/bundling/injection/index.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
+ */
+
+import {INJECTOR, ScopedService} from './usage';
+
+INJECTOR.get(ScopedService).doSomething();
diff --git a/packages/core/test/bundling/injection/treeshaking_spec.ts b/packages/core/test/bundling/injection/treeshaking_spec.ts
new file mode 100644
index 000000000000..8ff300a5204d
--- /dev/null
+++ b/packages/core/test/bundling/injection/treeshaking_spec.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 * as fs from 'fs';
+import * as path from 'path';
+
+import {INJECTOR, ScopedService} from './usage';
+
+const UTF8 = {
+  encoding: 'utf-8'
+};
+const PACKAGE = 'angular/packages/core/test/bundling/hello_world';
+
+describe('functional test for injection system bundling', () => {
+  it('should be able to inject the scoped service',
+     () => { expect(INJECTOR.get(ScopedService) instanceof ScopedService).toBe(true); });
+});
diff --git a/packages/core/test/bundling/injection/usage.ts b/packages/core/test/bundling/injection/usage.ts
new file mode 100644
index 000000000000..01d7fdce24ef
--- /dev/null
+++ b/packages/core/test/bundling/injection/usage.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
+ */
+
+import {Injector, createInjector, defineInjectable, defineInjector} from '@angular/core';
+
+export class RootService {
+  static ngInjectableDef = defineInjectable({
+    providedIn: 'root',
+    factory: () => new RootService(),
+  });
+}
+
+export class ScopedService {
+  static ngInjectableDef = defineInjectable({
+    providedIn: null,
+    factory: () => new ScopedService(),
+  });
+
+  doSomething(): void {
+    // tslint:disable-next-line:no-console
+    console.log('Ensure this isn\'t tree-shaken.');
+  }
+}
+
+export class DefinedInjector {
+  static ngInjectorDef = defineInjector({
+    factory: () => new DefinedInjector(),
+    providers: [ScopedService],
+  });
+}
+
+export const INJECTOR = createInjector(DefinedInjector);
diff --git a/packages/core/test/bundling/todo/BUILD.bazel b/packages/core/test/bundling/todo/BUILD.bazel
new file mode 100644
index 000000000000..cac0c960a145
--- /dev/null
+++ b/packages/core/test/bundling/todo/BUILD.bazel
@@ -0,0 +1,110 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ts_library")
+load("//tools/http-server:http_server.bzl", "http_server")
+load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
+load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+ng_module(
+    name = "todo",
+    srcs = ["index.ts"],
+    tags = ["ivy-only"],
+    deps = [
+        "//packages/common",
+        "//packages/core",
+        "//packages/core/test/bundling/util:reflect_metadata",
+    ],
+)
+
+ng_rollup_bundle(
+    name = "bundle",
+    # TODO(alexeagle): This is inconsistent.
+    # We try to teach users to always have their workspace at the start of a
+    # path, to disambiguate from other workspaces.
+    # Here, the rule implementation is looking in an execroot where the layout
+    # has an "external" directory for external dependencies.
+    # This should probably start with "angular/" and let the rule deal with it.
+    entry_point = "packages/core/test/bundling/todo/index.js",
+    tags = ["ivy-only"],
+    deps = [
+        ":todo",
+        "//packages/common",
+        "//packages/core",
+        "//packages/core/test/bundling/util:reflect_metadata",
+    ],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["*_spec.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/private/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    data = [
+        ":bundle",
+        ":bundle.js",
+        ":bundle.min.js",
+        ":bundle.min_debug.js",
+    ],
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "ivy-only",
+    ],
+    deps = [":test_lib"],
+)
+
+js_expected_symbol_test(
+    name = "symbol_test",
+    src = ":bundle.min_debug.js",
+    golden = ":bundle.golden_symbols.json",
+    tags = [
+        "ivy-local",
+        "ivy-only",
+    ],
+)
+
+genrule(
+    name = "tslib",
+    srcs = [
+        "@angular_deps//:node_modules/tslib/tslib.js",
+    ],
+    outs = [
+        "tslib.js",
+    ],
+    cmd = "cp $< $@",
+)
+
+ts_devserver(
+    name = "devserver",
+    entry_module = "angular/packages/core/test/bundling/todo/index",
+    serving_path = "/bundle.min.js",
+    static_files = [
+        "index.html",
+        ":tslib",
+        "todo.css",
+        "base.css",
+    ],
+    deps = [":todo"],
+)
+
+http_server(
+    name = "prodserver",
+    data = [
+        "base.css",
+        "index.html",
+        "todo.css",
+        ":bundle.min.js.br",
+        ":bundle.min_debug.js",
+    ],
+)
diff --git a/packages/core/test/bundling/todo/OUTSTANDING_WORK.md b/packages/core/test/bundling/todo/OUTSTANDING_WORK.md
new file mode 100644
index 000000000000..c2baf4767611
--- /dev/null
+++ b/packages/core/test/bundling/todo/OUTSTANDING_WORK.md
@@ -0,0 +1,36 @@
+# Outstanding on the `Todo` app
+
+## `Todo` app
+- [X] Clicking archive removes todo item.
+- [X] Update `Todo` app to match http://todomvc.com/.
+- [ ] Make it work with `[(ngModel)]`.
+- [ ] Make it work with `(keyup.Enter)`.
+
+## Compiler
+- [ ] Remove ` tslib_1.__decorate([core_1.Input(), tslib_1.__metadata("design:type", Object)], TodoComponent.prototype, "todo", void 0);` from generated output.
+- [ ] Allow compilation of `@angular/common` through ivy.
+ 
+## Ivy Runtime
+- [X] Work on `ViewContainerRef` needs to cause change detection so that `todo` app renders correctly on first render.
+- [X] The todo input value box is not correctly rendering to checked for completed tasks.
+- [ ] `ViewContainerRef` must separate creation mode from update mode otherwise {{todo.done}} fails for `NgFor` because `todo` is not set during creation mode.
+- [ ] Injector should be optional
+
+## Testing
+- [ ] Create a debug mode which would publish components into DOM for easier writing of tests.
+
+
+## Bazel
+
+- [ ] Have action verb on the `ng_rollup_bundle` to display source maps.
+
+# NOTES
+
+## Killing hung `iblaze` server
+
+At times the `iblaze run packages/core/test/bundling/todo:devserver` keeps running and holding onto
+ports even after `ctrl-c`. This command kills the outstanding processes.
+
+```
+kill -9 $(ps aux | grep ibazel\\\|devserver | cut -c 17-23)
+```
\ No newline at end of file
diff --git a/packages/core/test/bundling/todo/base.css b/packages/core/test/bundling/todo/base.css
new file mode 100644
index 000000000000..9f6ac1bd74a9
--- /dev/null
+++ b/packages/core/test/bundling/todo/base.css
@@ -0,0 +1,141 @@
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #c5c5c5;
+	border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+#issue-count {
+	display: none;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		padding-left: 300px;
+	}
+
+	.learn-bar > .learn {
+		left: 8px;
+	}
+}
\ No newline at end of file
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
new file mode 100644
index 000000000000..cd9cee0afe15
--- /dev/null
+++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -0,0 +1,947 @@
+[
+  {
+    "name": "ACTIVE_INDEX"
+  },
+  {
+    "name": "BINDING_INDEX"
+  },
+  {
+    "name": "BLOOM_MASK"
+  },
+  {
+    "name": "CIRCULAR$2"
+  },
+  {
+    "name": "CLEANUP"
+  },
+  {
+    "name": "CLEAN_PROMISE"
+  },
+  {
+    "name": "CONTAINER_INDEX"
+  },
+  {
+    "name": "CONTEXT"
+  },
+  {
+    "name": "ChangeDetectionStrategy"
+  },
+  {
+    "name": "ChangeDetectorRef"
+  },
+  {
+    "name": "DECLARATION_VIEW"
+  },
+  {
+    "name": "DIRECTIVES"
+  },
+  {
+    "name": "DefaultIterableDiffer"
+  },
+  {
+    "name": "DefaultIterableDifferFactory"
+  },
+  {
+    "name": "EMPTY$1"
+  },
+  {
+    "name": "EMPTY_ARRAY$2"
+  },
+  {
+    "name": "ElementRef"
+  },
+  {
+    "name": "ElementRef$1"
+  },
+  {
+    "name": "FLAGS"
+  },
+  {
+    "name": "HEADER_FILLER"
+  },
+  {
+    "name": "HEADER_OFFSET"
+  },
+  {
+    "name": "HOST_NODE"
+  },
+  {
+    "name": "INJECTOR$1"
+  },
+  {
+    "name": "IterableChangeRecord_"
+  },
+  {
+    "name": "IterableDiffers"
+  },
+  {
+    "name": "NEXT"
+  },
+  {
+    "name": "NG_ELEMENT_ID"
+  },
+  {
+    "name": "NG_HOST_SYMBOL"
+  },
+  {
+    "name": "NG_PROJECT_AS_ATTR_NAME"
+  },
+  {
+    "name": "NO_CHANGE"
+  },
+  {
+    "name": "NgForOf"
+  },
+  {
+    "name": "NgForOfContext"
+  },
+  {
+    "name": "NgIf"
+  },
+  {
+    "name": "NgIfContext"
+  },
+  {
+    "name": "NgModuleRef"
+  },
+  {
+    "name": "NodeInjector"
+  },
+  {
+    "name": "NullInjector"
+  },
+  {
+    "name": "Optional"
+  },
+  {
+    "name": "PARAMETERS"
+  },
+  {
+    "name": "PARENT"
+  },
+  {
+    "name": "PublicFeature"
+  },
+  {
+    "name": "QUERIES"
+  },
+  {
+    "name": "RENDERER"
+  },
+  {
+    "name": "RENDER_PARENT"
+  },
+  {
+    "name": "ROOT_DIRECTIVE_INDICES"
+  },
+  {
+    "name": "RecordViewTuple"
+  },
+  {
+    "name": "RendererStyleFlags3"
+  },
+  {
+    "name": "SANITIZER"
+  },
+  {
+    "name": "SkipSelf"
+  },
+  {
+    "name": "TAIL"
+  },
+  {
+    "name": "TVIEW"
+  },
+  {
+    "name": "TemplateRef"
+  },
+  {
+    "name": "TemplateRef$1"
+  },
+  {
+    "name": "ToDoAppComponent_footer_Template_6"
+  },
+  {
+    "name": "ToDoAppComponent_footer_button_Template_5"
+  },
+  {
+    "name": "ToDoAppComponent_section_Template_5"
+  },
+  {
+    "name": "ToDoAppComponent_section_input_Template_1"
+  },
+  {
+    "name": "ToDoAppComponent_section_li_Template_3"
+  },
+  {
+    "name": "ToDoAppComponent_section_li_input_Template_6"
+  },
+  {
+    "name": "Todo"
+  },
+  {
+    "name": "TodoStore"
+  },
+  {
+    "name": "VIEWS"
+  },
+  {
+    "name": "ViewContainerRef"
+  },
+  {
+    "name": "ViewContainerRef$1"
+  },
+  {
+    "name": "ViewRef"
+  },
+  {
+    "name": "_CLEAN_PROMISE"
+  },
+  {
+    "name": "_DuplicateItemRecordList"
+  },
+  {
+    "name": "_DuplicateMap"
+  },
+  {
+    "name": "_ROOT_DIRECTIVE_INDICES"
+  },
+  {
+    "name": "_THROW_IF_NOT_FOUND"
+  },
+  {
+    "name": "__read"
+  },
+  {
+    "name": "__self"
+  },
+  {
+    "name": "__spread"
+  },
+  {
+    "name": "__window"
+  },
+  {
+    "name": "_c0"
+  },
+  {
+    "name": "_c1"
+  },
+  {
+    "name": "_c10"
+  },
+  {
+    "name": "_c11"
+  },
+  {
+    "name": "_c12"
+  },
+  {
+    "name": "_c13"
+  },
+  {
+    "name": "_c14"
+  },
+  {
+    "name": "_c15"
+  },
+  {
+    "name": "_c16"
+  },
+  {
+    "name": "_c17"
+  },
+  {
+    "name": "_c18"
+  },
+  {
+    "name": "_c19"
+  },
+  {
+    "name": "_c2"
+  },
+  {
+    "name": "_c3"
+  },
+  {
+    "name": "_c4"
+  },
+  {
+    "name": "_c5"
+  },
+  {
+    "name": "_c6"
+  },
+  {
+    "name": "_c7"
+  },
+  {
+    "name": "_c8"
+  },
+  {
+    "name": "_c9"
+  },
+  {
+    "name": "_currentInjector"
+  },
+  {
+    "name": "_currentNamespace"
+  },
+  {
+    "name": "_devMode"
+  },
+  {
+    "name": "_getComponentHostLElementNode"
+  },
+  {
+    "name": "_global"
+  },
+  {
+    "name": "_renderCompCount"
+  },
+  {
+    "name": "_symbolIterator"
+  },
+  {
+    "name": "addComponentLogic"
+  },
+  {
+    "name": "addRemoveViewFromContainer"
+  },
+  {
+    "name": "addToViewTree"
+  },
+  {
+    "name": "allocStylingContext"
+  },
+  {
+    "name": "appendChild"
+  },
+  {
+    "name": "assertTemplate"
+  },
+  {
+    "name": "baseDirectiveCreate"
+  },
+  {
+    "name": "bind"
+  },
+  {
+    "name": "bindingUpdated"
+  },
+  {
+    "name": "bloomAdd"
+  },
+  {
+    "name": "bloomFindPossibleInjector"
+  },
+  {
+    "name": "bloomHashBit"
+  },
+  {
+    "name": "cacheMatchingDirectivesForNode"
+  },
+  {
+    "name": "cacheMatchingLocalNames"
+  },
+  {
+    "name": "callHooks"
+  },
+  {
+    "name": "canInsertNativeChildOfElement"
+  },
+  {
+    "name": "canInsertNativeChildOfView"
+  },
+  {
+    "name": "canInsertNativeNode"
+  },
+  {
+    "name": "checkNoChanges"
+  },
+  {
+    "name": "checkNoChangesMode"
+  },
+  {
+    "name": "cleanUpView"
+  },
+  {
+    "name": "componentRefresh"
+  },
+  {
+    "name": "container"
+  },
+  {
+    "name": "contextViewData"
+  },
+  {
+    "name": "createDirectivesAndLocals"
+  },
+  {
+    "name": "createEmbeddedViewNode"
+  },
+  {
+    "name": "createLContainer"
+  },
+  {
+    "name": "createLNode"
+  },
+  {
+    "name": "createLNodeObject"
+  },
+  {
+    "name": "createLViewData"
+  },
+  {
+    "name": "createOutput$1"
+  },
+  {
+    "name": "createRootContext"
+  },
+  {
+    "name": "createStylingContextTemplate"
+  },
+  {
+    "name": "createTNode"
+  },
+  {
+    "name": "createTView"
+  },
+  {
+    "name": "createTextNode"
+  },
+  {
+    "name": "createViewQuery"
+  },
+  {
+    "name": "currentElementNode"
+  },
+  {
+    "name": "defineComponent"
+  },
+  {
+    "name": "defineDirective"
+  },
+  {
+    "name": "defineInjectable"
+  },
+  {
+    "name": "destroyLView"
+  },
+  {
+    "name": "destroyViewTree"
+  },
+  {
+    "name": "detachView"
+  },
+  {
+    "name": "detectChanges"
+  },
+  {
+    "name": "detectChangesInternal"
+  },
+  {
+    "name": "diPublic"
+  },
+  {
+    "name": "diPublicInInjector"
+  },
+  {
+    "name": "directiveCreate"
+  },
+  {
+    "name": "directiveInject"
+  },
+  {
+    "name": "domRendererFactory3"
+  },
+  {
+    "name": "elementClassProp"
+  },
+  {
+    "name": "elementCreate"
+  },
+  {
+    "name": "elementEnd"
+  },
+  {
+    "name": "elementProperty"
+  },
+  {
+    "name": "elementStart"
+  },
+  {
+    "name": "elementStyling"
+  },
+  {
+    "name": "elementStylingApply"
+  },
+  {
+    "name": "enterView"
+  },
+  {
+    "name": "executeHooks"
+  },
+  {
+    "name": "executeInitAndContentHooks"
+  },
+  {
+    "name": "executeInitHooks"
+  },
+  {
+    "name": "executeNodeAction"
+  },
+  {
+    "name": "executeOnDestroys"
+  },
+  {
+    "name": "executePipeOnDestroys"
+  },
+  {
+    "name": "extractDirectiveDef"
+  },
+  {
+    "name": "extractPipeDef"
+  },
+  {
+    "name": "findAttrIndexInNode"
+  },
+  {
+    "name": "findComponentHost"
+  },
+  {
+    "name": "findDirectiveMatches"
+  },
+  {
+    "name": "firstTemplatePass"
+  },
+  {
+    "name": "generateInitialInputs"
+  },
+  {
+    "name": "generatePropertyAliases"
+  },
+  {
+    "name": "getChildLNode"
+  },
+  {
+    "name": "getCleanup"
+  },
+  {
+    "name": "getClosestComponentAncestor"
+  },
+  {
+    "name": "getCurrentSanitizer"
+  },
+  {
+    "name": "getCurrentView"
+  },
+  {
+    "name": "getInitialIndex"
+  },
+  {
+    "name": "getInitialValue"
+  },
+  {
+    "name": "getLViewChild"
+  },
+  {
+    "name": "getMultiOrSingleIndex"
+  },
+  {
+    "name": "getMultiStartIndex"
+  },
+  {
+    "name": "getNextLNode"
+  },
+  {
+    "name": "getOrCreateChangeDetectorRef"
+  },
+  {
+    "name": "getOrCreateContainerRef"
+  },
+  {
+    "name": "getOrCreateElementRef"
+  },
+  {
+    "name": "getOrCreateHostChangeDetector"
+  },
+  {
+    "name": "getOrCreateInjectable"
+  },
+  {
+    "name": "getOrCreateNodeInjector"
+  },
+  {
+    "name": "getOrCreateNodeInjectorForNode"
+  },
+  {
+    "name": "getOrCreateTView"
+  },
+  {
+    "name": "getOrCreateTemplateRef"
+  },
+  {
+    "name": "getParentLNode"
+  },
+  {
+    "name": "getParentState"
+  },
+  {
+    "name": "getPointers"
+  },
+  {
+    "name": "getPreviousIndex"
+  },
+  {
+    "name": "getPreviousOrParentNode"
+  },
+  {
+    "name": "getProp"
+  },
+  {
+    "name": "getRenderFlags"
+  },
+  {
+    "name": "getRenderParent"
+  },
+  {
+    "name": "getRenderer"
+  },
+  {
+    "name": "getRendererFactory"
+  },
+  {
+    "name": "getRootView"
+  },
+  {
+    "name": "getStyleSanitizer"
+  },
+  {
+    "name": "getStylingContext"
+  },
+  {
+    "name": "getSymbolIterator"
+  },
+  {
+    "name": "getTViewCleanup"
+  },
+  {
+    "name": "getTypeNameForDebugging"
+  },
+  {
+    "name": "getTypeNameForDebugging$1"
+  },
+  {
+    "name": "getValue"
+  },
+  {
+    "name": "hasValueChanged"
+  },
+  {
+    "name": "hostElement"
+  },
+  {
+    "name": "initBindings"
+  },
+  {
+    "name": "initChangeDetectorIfExisting"
+  },
+  {
+    "name": "inject"
+  },
+  {
+    "name": "injectTemplateRef"
+  },
+  {
+    "name": "injectViewContainerRef"
+  },
+  {
+    "name": "insertView"
+  },
+  {
+    "name": "instantiateDirectivesDirectly"
+  },
+  {
+    "name": "interpolation1"
+  },
+  {
+    "name": "invertObject"
+  },
+  {
+    "name": "isComponent"
+  },
+  {
+    "name": "isContentQueryHost"
+  },
+  {
+    "name": "isContextDirty"
+  },
+  {
+    "name": "isCssClassMatching"
+  },
+  {
+    "name": "isDevMode"
+  },
+  {
+    "name": "isDifferent"
+  },
+  {
+    "name": "isDirty"
+  },
+  {
+    "name": "isJsObject"
+  },
+  {
+    "name": "isListLikeIterable"
+  },
+  {
+    "name": "isNodeMatchingSelector"
+  },
+  {
+    "name": "isNodeMatchingSelectorList"
+  },
+  {
+    "name": "isPositive"
+  },
+  {
+    "name": "isProceduralRenderer"
+  },
+  {
+    "name": "iterateListLike"
+  },
+  {
+    "name": "leaveView"
+  },
+  {
+    "name": "listener"
+  },
+  {
+    "name": "load"
+  },
+  {
+    "name": "loadElement"
+  },
+  {
+    "name": "loadElementInternal"
+  },
+  {
+    "name": "loadInternal"
+  },
+  {
+    "name": "locateHostElement"
+  },
+  {
+    "name": "looseIdentical"
+  },
+  {
+    "name": "makeMetadataCtor"
+  },
+  {
+    "name": "makeParamDecorator"
+  },
+  {
+    "name": "markDirtyIfOnPush"
+  },
+  {
+    "name": "markViewDirty"
+  },
+  {
+    "name": "namespaceHTML"
+  },
+  {
+    "name": "nativeInsertBefore"
+  },
+  {
+    "name": "nextContext"
+  },
+  {
+    "name": "nextNgElementId"
+  },
+  {
+    "name": "pointers"
+  },
+  {
+    "name": "prepareInitialFlag"
+  },
+  {
+    "name": "projectionNodeStack"
+  },
+  {
+    "name": "queueComponentIndexForCheck"
+  },
+  {
+    "name": "queueContentHooks"
+  },
+  {
+    "name": "queueDestroyHooks"
+  },
+  {
+    "name": "queueHostBindingForCheck"
+  },
+  {
+    "name": "queueInitHooks"
+  },
+  {
+    "name": "queueLifecycleHooks"
+  },
+  {
+    "name": "queueViewHooks"
+  },
+  {
+    "name": "readElementValue"
+  },
+  {
+    "name": "reference"
+  },
+  {
+    "name": "refreshChildComponents"
+  },
+  {
+    "name": "refreshContentQueries"
+  },
+  {
+    "name": "refreshDescendantViews"
+  },
+  {
+    "name": "refreshDynamicEmbeddedViews"
+  },
+  {
+    "name": "removeListeners"
+  },
+  {
+    "name": "removeView"
+  },
+  {
+    "name": "renderComponent"
+  },
+  {
+    "name": "renderComponentOrTemplate"
+  },
+  {
+    "name": "renderEmbeddedTemplate"
+  },
+  {
+    "name": "renderStyling"
+  },
+  {
+    "name": "resetApplicationState"
+  },
+  {
+    "name": "resolveDirective"
+  },
+  {
+    "name": "restoreView"
+  },
+  {
+    "name": "sameHostView"
+  },
+  {
+    "name": "saveNameToExportMap"
+  },
+  {
+    "name": "saveResolvedLocalsInData"
+  },
+  {
+    "name": "scheduleTick"
+  },
+  {
+    "name": "searchMatchesQueuedForCreation"
+  },
+  {
+    "name": "setClass"
+  },
+  {
+    "name": "setContextDirty"
+  },
+  {
+    "name": "setCurrentInjector"
+  },
+  {
+    "name": "setDirty"
+  },
+  {
+    "name": "setFlag"
+  },
+  {
+    "name": "setHostBindings"
+  },
+  {
+    "name": "setInputsForProperty"
+  },
+  {
+    "name": "setInputsFromAttrs"
+  },
+  {
+    "name": "setProp"
+  },
+  {
+    "name": "setStyle"
+  },
+  {
+    "name": "setUpAttributes"
+  },
+  {
+    "name": "setValue"
+  },
+  {
+    "name": "storeCleanupFn"
+  },
+  {
+    "name": "storeCleanupWithContext"
+  },
+  {
+    "name": "stringify$1"
+  },
+  {
+    "name": "stringify$2"
+  },
+  {
+    "name": "text"
+  },
+  {
+    "name": "textBinding"
+  },
+  {
+    "name": "throwCyclicDependencyError"
+  },
+  {
+    "name": "throwErrorIfNoChangesMode"
+  },
+  {
+    "name": "throwMultipleComponentError"
+  },
+  {
+    "name": "tickRootContext"
+  },
+  {
+    "name": "trackByIdentity"
+  },
+  {
+    "name": "updateClassProp"
+  },
+  {
+    "name": "updateStyleProp"
+  },
+  {
+    "name": "updateViewQuery"
+  },
+  {
+    "name": "valueExists"
+  },
+  {
+    "name": "viewAttached"
+  },
+  {
+    "name": "walkLNodeTree"
+  },
+  {
+    "name": "walkUpViews"
+  },
+  {
+    "name": "wrapListenerWithDirtyAndDefault"
+  },
+  {
+    "name": "wrapListenerWithDirtyLogic"
+  }
+]
\ No newline at end of file
diff --git a/packages/core/test/bundling/todo/index.html b/packages/core/test/bundling/todo/index.html
new file mode 100644
index 000000000000..5d25aabdeb3b
--- /dev/null
+++ b/packages/core/test/bundling/todo/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+
+<html>
+
+<head>
+  <title>Angular Todo Example</title>
+  <link rel="stylesheet" href="base.css">
+  <link rel="stylesheet" href="todo.css">
+  <style>
+    .done {
+      text-decoration: line-through;
+    }
+  </style>
+</head>
+
+<body>
+  <!-- The Angular application will be bootstrapped into this element. -->
+  <todo-app></todo-app>
+
+  <!-- 
+      Script tag which bootstraps the application. Use `?debug` in URL to select
+      the debug version of the script.
+      
+      There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can 
+      switch between which bundle the browser loads to experiment with the application.
+
+      - `bundle.min.js`: Is what the site would serve to their users. It has gone
+        through rollup, build-optimizer, and uglify with tree shaking.
+        - In `devserver` mode `bundle.min.js` is a bit misnamed since it is concatenated
+          individual files which are not minified.
+      - `bundle.min_debug.js`: Is what the developer would like to see when debugging
+        the application. It has also gone through full pipeline of rollup, build-optimizer,
+        and uglify, however special flags were passed to uglify to prevent inlining and
+        property renaming.
+    -->
+  <script>
+    document.write('<script src="' +
+      (document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js.br') +
+      '"></' + 'script>');
+  </script>
+  <script>
+    if (typeof define === "function" && define.amd) {
+      // If `define` is defined that we are in devserver mode. Dev server concatenates all of the 
+      // source files and than loads them using `require`. There is an issue with the way 
+      // `@angular/core` imports are generated which results in both `@angular/core` as well as `@angular/core/index`
+      // This hack makes both of the exports available to the application.
+      define("@angular/core", ["require", "exports", "tslib", "@angular/core/index"], function (require, exports) {
+        "use strict";
+        Object.defineProperty(exports, "__esModule", { value: true });
+        var tslib = require("tslib");
+        tslib.__exportStar(require("@angular/core/index"), exports);
+      });
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/core/test/bundling/todo/index.ts b/packages/core/test/bundling/todo/index.ts
new file mode 100644
index 000000000000..7584c645df3f
--- /dev/null
+++ b/packages/core/test/bundling/todo/index.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 '@angular/core/test/bundling/util/src/reflect_metadata';
+
+import {CommonModule} from '@angular/common';
+import {Component, Injectable, NgModule, ɵrenderComponent as renderComponent} from '@angular/core';
+
+class Todo {
+  editing: boolean;
+
+  // TODO(issue/24571): remove '!'.
+  private _title !: string;
+  get title() { return this._title; }
+  set title(value: string) { this._title = value.trim(); }
+
+  constructor(title: string, public completed: boolean = false) {
+    this.editing = false;
+    this.title = title;
+  }
+}
+
+@Injectable({providedIn: 'root'})
+class TodoStore {
+  todos: Array<Todo> = [
+    new Todo('Demonstrate Components'),
+    new Todo('Demonstrate Structural Directives', true),
+    new Todo('Demonstrate NgModules'),
+    new Todo('Demonstrate zoneless change detection'),
+    new Todo('Demonstrate internationalization'),
+  ];
+
+  private getWithCompleted(completed: boolean) {
+    return this.todos.filter((todo: Todo) => todo.completed === completed);
+  }
+
+  allCompleted() { return this.todos.length === this.getCompleted().length; }
+
+  setAllTo(completed: boolean) { this.todos.forEach((t: Todo) => t.completed = completed); }
+
+  removeCompleted() { this.todos = this.getWithCompleted(false); }
+
+  getRemaining() { return this.getWithCompleted(false); }
+
+  getCompleted() { return this.getWithCompleted(true); }
+
+  toggleCompletion(todo: Todo) { todo.completed = !todo.completed; }
+
+  remove(todo: Todo) { this.todos.splice(this.todos.indexOf(todo), 1); }
+
+  add(title: string) { this.todos.push(new Todo(title)); }
+}
+
+@Component({
+  selector: 'todo-app',
+  // TODO(misko): make this work with `[(ngModel)]`
+  template: `
+  <section class="todoapp">
+    <header class="header">
+      <h1>todos</h1>
+      <input class="new-todo" placeholder="What needs to be done?" autofocus=""
+             [value]="newTodoText"
+             (keyup)="$event.code == 'Enter' ? addTodo() : newTodoText = $event.target.value">
+    </header>
+    <section *ngIf="todoStore.todos.length > 0" class="main">
+      <input *ngIf="todoStore.todos.length"
+             #toggleall class="toggle-all" type="checkbox"
+             [checked]="todoStore.allCompleted()"
+             (click)="todoStore.setAllTo(toggleall.checked)">
+      <ul class="todo-list">
+        <li *ngFor="let todo of todoStore.todos"
+            [class.completed]="todo.completed"
+            [class.editing]="todo.editing">
+          <div class="view">
+            <input class="toggle" type="checkbox"
+                   (click)="toggleCompletion(todo)"
+                   [checked]="todo.completed">
+            <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
+            <button class="destroy" (click)="remove(todo)"></button>
+          </div>
+          <input *ngIf="todo.editing"
+                 class="edit" #editedtodo
+                 [value]="todo.title"
+                 (blur)="stopEditing(todo, editedtodo.value)"
+                 (keyup)="todo.title = $event.target.value"
+                 (keyup)="$event.code == 'Enter' && updateEditingTodo(todo, editedtodo.value)"
+                 (keyup)="$event.code == 'Escape' && cancelEditingTodo(todo)">
+        </li>
+      </ul>
+    </section>
+    <footer *ngIf="todoStore.todos.length > 0" class="footer">
+      <span class="todo-count">
+        <strong>{{todoStore.getRemaining().length}}</strong>
+        {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left
+      </span>
+      <button *ngIf="todoStore.getCompleted().length > 0"
+              class="clear-completed"
+              (click)="removeCompleted()">
+        Clear completed
+      </button>
+    </footer>
+  </section>
+  `,
+  // TODO(misko): switch over to OnPush
+  // changeDetection: ChangeDetectionStrategy.OnPush
+})
+class ToDoAppComponent {
+  newTodoText = '';
+
+  constructor(public todoStore: TodoStore) {}
+
+  stopEditing(todo: Todo, editedTitle: string) {
+    todo.title = editedTitle;
+    todo.editing = false;
+  }
+
+  cancelEditingTodo(todo: Todo) { todo.editing = false; }
+
+  updateEditingTodo(todo: Todo, editedTitle: string) {
+    editedTitle = editedTitle.trim();
+    todo.editing = false;
+
+    if (editedTitle.length === 0) {
+      return this.todoStore.remove(todo);
+    }
+
+    todo.title = editedTitle;
+  }
+
+  editTodo(todo: Todo) { todo.editing = true; }
+
+  removeCompleted() { this.todoStore.removeCompleted(); }
+
+  toggleCompletion(todo: Todo) { this.todoStore.toggleCompletion(todo); }
+
+  remove(todo: Todo) { this.todoStore.remove(todo); }
+
+  addTodo() {
+    if (this.newTodoText.trim().length) {
+      this.todoStore.add(this.newTodoText);
+      this.newTodoText = '';
+    }
+  }
+}
+
+@NgModule({declarations: [ToDoAppComponent], imports: [CommonModule]})
+class ToDoAppModule {
+}
+
+// TODO(misko): create cleaner way to publish component into global location for tests.
+(window as any).toDoAppComponent = renderComponent(ToDoAppComponent);
diff --git a/packages/core/test/bundling/todo/todo.css b/packages/core/test/bundling/todo/todo.css
new file mode 100644
index 000000000000..c1f2c5913b4d
--- /dev/null
+++ b/packages/core/test/bundling/todo/todo.css
@@ -0,0 +1,377 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	font-weight: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #f5f5f5;
+	color: #4d4d4d;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+	font-weight: 300;
+}
+
+button,
+input[type="checkbox"] {
+	outline: none;
+}
+
+.hidden {
+	display: none;
+}
+
+.todoapp {
+	background: #fff;
+	margin: 130px 0 40px 0;
+	position: relative;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp h1 {
+	position: absolute;
+	top: -155px;
+	width: 100%;
+	font-size: 100px;
+	font-weight: 100;
+	text-align: center;
+	color: rgba(175, 47, 47, 0.15);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	font-weight: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+.new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px solid #e6e6e6;
+}
+
+label[for='toggle-all'] {
+	display: none;
+}
+
+.toggle-all {
+	position: absolute;
+	top: -55px;
+	left: -12px;
+	width: 60px;
+	height: 34px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+
+.toggle-all:before {
+	content: '❯';
+	font-size: 22px;
+	color: #e6e6e6;
+	padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked:before {
+	color: #737373;
+}
+
+.todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+	border-bottom: none;
+}
+
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+.todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+	display: none;
+}
+
+.todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.todo-list li .toggle:after {
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+}
+
+.todo-list li .toggle:checked:after {
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+}
+
+.todo-list li label {
+	white-space: pre-line;
+	word-break: break-all;
+	padding: 15px 60px 15px 15px;
+	margin-left: 45px;
+	display: block;
+	line-height: 1.2;
+	transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+	color: #d9d9d9;
+	text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+	color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+	content: '×';
+}
+
+.todo-list li:hover .destroy {
+	display: block;
+}
+
+.todo-list li .edit {
+	display: none;
+}
+
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+.footer {
+	color: #777;
+	padding: 10px 15px;
+	height: 20px;
+	text-align: center;
+	border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50px;
+	overflow: hidden;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+	            0 8px 0 -3px #f6f6f6,
+	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
+	            0 16px 0 -6px #f6f6f6,
+	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+	float: left;
+	text-align: left;
+}
+
+.todo-count strong {
+	font-weight: 300;
+}
+
+.filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+.filters li {
+	display: inline;
+}
+
+.filters li a {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+
+.filters li a.selected,
+.filters li a:hover {
+	border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+	border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.clear-completed:hover {
+	text-decoration: underline;
+}
+
+.info {
+	margin: 65px auto 0;
+	color: #bfbfbf;
+	font-size: 10px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
+}
+
+.info p {
+	line-height: 1;
+}
+
+.info a {
+	color: inherit;
+	text-decoration: none;
+	font-weight: 400;
+}
+
+.info a:hover {
+	text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	.toggle-all,
+	.todo-list li .toggle {
+		background: none;
+	}
+
+	.todo-list li .toggle {
+		height: 40px;
+	}
+
+	.toggle-all {
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+@media (max-width: 430px) {
+	.footer {
+		height: 50px;
+	}
+
+	.filters {
+		bottom: 10px;
+	}
+}
\ No newline at end of file
diff --git a/packages/core/test/bundling/todo/todo_e2e_spec.ts b/packages/core/test/bundling/todo/todo_e2e_spec.ts
new file mode 100644
index 000000000000..b3d2d7896e37
--- /dev/null
+++ b/packages/core/test/bundling/todo/todo_e2e_spec.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 {ɵwhenRendered as whenRendered} from '@angular/core';
+import {withBody} from '@angular/private/testing';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const UTF8 = {
+  encoding: 'utf-8'
+};
+const PACKAGE = 'angular/packages/core/test/bundling/todo';
+const BUNDLES = ['bundle.js', 'bundle.min_debug.js', 'bundle.min.js'];
+
+describe('functional test for todo', () => {
+  BUNDLES.forEach(bundle => {
+    describe(bundle, () => {
+      it('should render todo', withBody('<todo-app></todo-app>', async() => {
+           require(path.join(PACKAGE, bundle));
+           // TODO(misko): have cleaner way to do this for tests.
+           const toDoAppComponent = (window as any).toDoAppComponent;
+           expect(document.body.textContent).toContain('todos');
+           expect(document.body.textContent).toContain('Demonstrate Components');
+           expect(document.body.textContent).toContain('4 items left');
+           document.querySelector('button') !.click();
+           await whenRendered(toDoAppComponent);
+           expect(document.body.textContent).toContain('3 items left');
+         }));
+    });
+  });
+});
diff --git a/packages/core/test/bundling/util/BUILD.bazel b/packages/core/test/bundling/util/BUILD.bazel
new file mode 100644
index 000000000000..dd5ec1b044a2
--- /dev/null
+++ b/packages/core/test/bundling/util/BUILD.bazel
@@ -0,0 +1,22 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+# Either loads reflect-metadata or is a no-op, depending on whether compilation is in JIT mode.
+ts_library(
+    name = "reflect_metadata",
+    srcs = [
+        "src/reflect_metadata_jit.ts",
+        "src/reflect_metadata_legacy.ts",
+        "src/reflect_metadata_local.ts",
+        ":metadata_switch",
+    ],
+    module_name = "@angular/core/test/bundling/util/src/reflect_metadata",
+)
+
+# See packages/core/BUILD.bazel.
+genrule(
+    name = "metadata_switch",
+    outs = ["src/reflect_metadata.ts"],
+    cmd = "echo import \"'./reflect_metadata_$(compile)';\" > $@",
+)
diff --git a/packages/core/test/bundling/util/src/reflect_metadata.ts b/packages/core/test/bundling/util/src/reflect_metadata.ts
new file mode 100644
index 000000000000..88c74cc7c282
--- /dev/null
+++ b/packages/core/test/bundling/util/src/reflect_metadata.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
+ */
+
+import './reflect_metadata_legacy';
diff --git a/packages/core/test/bundling/util/src/reflect_metadata_jit.ts b/packages/core/test/bundling/util/src/reflect_metadata_jit.ts
new file mode 100644
index 000000000000..4c37fe91ba63
--- /dev/null
+++ b/packages/core/test/bundling/util/src/reflect_metadata_jit.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
+ */
+
+import 'reflect-metadata';
diff --git a/packages/core/test/bundling/util/src/reflect_metadata_legacy.ts b/packages/core/test/bundling/util/src/reflect_metadata_legacy.ts
new file mode 100644
index 000000000000..d83b20810793
--- /dev/null
+++ b/packages/core/test/bundling/util/src/reflect_metadata_legacy.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 const UNUSED = true;
diff --git a/packages/core/test/bundling/util/src/reflect_metadata_local.ts b/packages/core/test/bundling/util/src/reflect_metadata_local.ts
new file mode 100644
index 000000000000..d83b20810793
--- /dev/null
+++ b/packages/core/test/bundling/util/src/reflect_metadata_local.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 const UNUSED = true;
diff --git a/packages/core/test/change_detection/change_detector_util_spec.ts b/packages/core/test/change_detection/change_detector_util_spec.ts
new file mode 100644
index 000000000000..8d8cbb778630
--- /dev/null
+++ b/packages/core/test/change_detection/change_detector_util_spec.ts
@@ -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
+ */
+
+import {devModeEqual} from '@angular/core/src/change_detection/change_detection_util';
+
+{
+  describe('ChangeDetectionUtil', () => {
+    describe('devModeEqual', () => {
+      it('should do the deep comparison of iterables', () => {
+        expect(devModeEqual([['one']], [['one']])).toBe(true);
+        expect(devModeEqual(['one'], ['one', 'two'])).toBe(false);
+        expect(devModeEqual(['one', 'two'], ['one'])).toBe(false);
+        expect(devModeEqual(['one'], 'one')).toBe(false);
+        expect(devModeEqual(['one'], new Object())).toBe(false);
+        expect(devModeEqual('one', ['one'])).toBe(false);
+        expect(devModeEqual(new Object(), ['one'])).toBe(false);
+      });
+
+      it('should compare primitive numbers', () => {
+        expect(devModeEqual(1, 1)).toBe(true);
+        expect(devModeEqual(1, 2)).toBe(false);
+        expect(devModeEqual(new Object(), 2)).toBe(false);
+        expect(devModeEqual(1, new Object())).toBe(false);
+      });
+
+      it('should compare primitive strings', () => {
+        expect(devModeEqual('one', 'one')).toBe(true);
+        expect(devModeEqual('one', 'two')).toBe(false);
+        expect(devModeEqual(new Object(), 'one')).toBe(false);
+        expect(devModeEqual('one', new Object())).toBe(false);
+      });
+
+      it('should compare primitive booleans', () => {
+        expect(devModeEqual(true, true)).toBe(true);
+        expect(devModeEqual(true, false)).toBe(false);
+        expect(devModeEqual(new Object(), true)).toBe(false);
+        expect(devModeEqual(true, new Object())).toBe(false);
+      });
+
+      it('should compare null', () => {
+        expect(devModeEqual(null, null)).toBe(true);
+        expect(devModeEqual(null, 1)).toBe(false);
+        expect(devModeEqual(new Object(), null)).toBe(false);
+        expect(devModeEqual(null, new Object())).toBe(false);
+      });
+
+      it('should return true for other objects',
+         () => { expect(devModeEqual(new Object(), new Object())).toBe(true); });
+    });
+  });
+}
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
new file mode 100644
index 000000000000..e1d8f09063f3
--- /dev/null
+++ b/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts
@@ -0,0 +1,593 @@
+/**
+ * @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 {DefaultIterableDiffer, DefaultIterableDifferFactory} from '@angular/core/src/change_detection/differs/default_iterable_differ';
+
+import {TestIterable} from '../../change_detection/iterable';
+import {iterableChangesAsString, iterableDifferToString} from '../../change_detection/util';
+
+class ItemWithId {
+  constructor(private id: string) {}
+
+  toString() { return `{id: ${this.id}}`; }
+}
+
+class ComplexItem {
+  constructor(private id: string, private color: string) {}
+
+  toString() { return `{id: ${this.id}, color: ${this.color}}`; }
+}
+
+// TODO(vicb): UnmodifiableListView / frozen object when implemented
+{
+  describe('iterable differ', function() {
+    describe('DefaultIterableDiffer', function() {
+      let differ: DefaultIterableDiffer<any>;
+
+      beforeEach(() => { differ = new DefaultIterableDiffer(); });
+
+      it('should support list and iterables', () => {
+        const f = new DefaultIterableDifferFactory();
+        expect(f.supports([])).toBeTruthy();
+        expect(f.supports(new TestIterable())).toBeTruthy();
+        expect(f.supports(new Map())).toBeFalsy();
+        expect(f.supports(null)).toBeFalsy();
+      });
+
+      it('should support iterables', () => {
+        const l: any = new TestIterable();
+
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({collection: []}));
+
+        l.list = [1];
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['1[null->0]'],
+          additions: ['1[null->0]']
+        }));
+
+        l.list = [2, 1];
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['2[null->0]', '1[0->1]'],
+          previous: ['1[0->1]'],
+          additions: ['2[null->0]'],
+          moves: ['1[0->1]']
+        }));
+      });
+
+      it('should detect additions', () => {
+        const l: any[] = [];
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({collection: []}));
+
+        l.push('a');
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['a[null->0]'],
+          additions: ['a[null->0]']
+        }));
+
+        l.push('b');
+        differ.check(l);
+        expect(iterableDifferToString(differ))
+            .toEqual(iterableChangesAsString(
+                {collection: ['a', 'b[null->1]'], previous: ['a'], additions: ['b[null->1]']}));
+      });
+
+      it('should support changing the reference', () => {
+        let l = [0];
+        differ.check(l);
+
+        l = [1, 0];
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['1[null->0]', '0[0->1]'],
+          previous: ['0[0->1]'],
+          additions: ['1[null->0]'],
+          moves: ['0[0->1]']
+        }));
+
+        l = [2, 1, 0];
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['2[null->0]', '1[0->1]', '0[1->2]'],
+          previous: ['1[0->1]', '0[1->2]'],
+          additions: ['2[null->0]'],
+          moves: ['1[0->1]', '0[1->2]']
+        }));
+      });
+
+      it('should handle swapping element', () => {
+        const l = [1, 2];
+        differ.check(l);
+
+        l.length = 0;
+        l.push(2);
+        l.push(1);
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['2[1->0]', '1[0->1]'],
+          previous: ['1[0->1]', '2[1->0]'],
+          moves: ['2[1->0]', '1[0->1]']
+        }));
+      });
+
+      it('should handle incremental swapping element', () => {
+        const l = ['a', 'b', 'c'];
+        differ.check(l);
+
+        l.splice(1, 1);
+        l.splice(0, 0, 'b');
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['b[1->0]', 'a[0->1]', 'c'],
+          previous: ['a[0->1]', 'b[1->0]', 'c'],
+          moves: ['b[1->0]', 'a[0->1]']
+        }));
+
+        l.splice(1, 1);
+        l.push('a');
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['b', 'c[2->1]', 'a[1->2]'],
+          previous: ['b', 'a[1->2]', 'c[2->1]'],
+          moves: ['c[2->1]', 'a[1->2]']
+        }));
+      });
+
+      it('should detect changes in list', () => {
+        const l: any[] = [];
+        differ.check(l);
+
+        l.push('a');
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['a[null->0]'],
+          additions: ['a[null->0]']
+        }));
+
+        l.push('b');
+        differ.check(l);
+        expect(iterableDifferToString(differ))
+            .toEqual(iterableChangesAsString(
+                {collection: ['a', 'b[null->1]'], previous: ['a'], additions: ['b[null->1]']}));
+
+        l.push('c');
+        l.push('d');
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['a', 'b', 'c[null->2]', 'd[null->3]'],
+          previous: ['a', 'b'],
+          additions: ['c[null->2]', 'd[null->3]']
+        }));
+
+        l.splice(2, 1);
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['a', 'b', 'd[3->2]'],
+          previous: ['a', 'b', 'c[2->null]', 'd[3->2]'],
+          moves: ['d[3->2]'],
+          removals: ['c[2->null]']
+        }));
+
+        l.length = 0;
+        l.push('d');
+        l.push('c');
+        l.push('b');
+        l.push('a');
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['d[2->0]', 'c[null->1]', 'b[1->2]', 'a[0->3]'],
+          previous: ['a[0->3]', 'b[1->2]', 'd[2->0]'],
+          additions: ['c[null->1]'],
+          moves: ['d[2->0]', 'b[1->2]', 'a[0->3]']
+        }));
+      });
+
+      it('should ignore [NaN] != [NaN]', () => {
+        const l = [NaN];
+        differ.check(l);
+        differ.check(l);
+        expect(iterableDifferToString(differ))
+            .toEqual(iterableChangesAsString({collection: [NaN], previous: [NaN]}));
+      });
+
+      it('should detect [NaN] moves', () => {
+        const l: any[] = [NaN, NaN];
+        differ.check(l);
+
+        l.unshift('foo');
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['foo[null->0]', 'NaN[0->1]', 'NaN[1->2]'],
+          previous: ['NaN[0->1]', 'NaN[1->2]'],
+          additions: ['foo[null->0]'],
+          moves: ['NaN[0->1]', 'NaN[1->2]']
+        }));
+      });
+
+      it('should remove and add same item', () => {
+        const l = ['a', 'b', 'c'];
+        differ.check(l);
+
+        l.splice(1, 1);
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['a', 'c[2->1]'],
+          previous: ['a', 'b[1->null]', 'c[2->1]'],
+          moves: ['c[2->1]'],
+          removals: ['b[1->null]']
+        }));
+
+        l.splice(1, 0, 'b');
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['a', 'b[null->1]', 'c[1->2]'],
+          previous: ['a', 'c[1->2]'],
+          additions: ['b[null->1]'],
+          moves: ['c[1->2]']
+        }));
+      });
+
+
+      it('should support duplicates', () => {
+        const l = ['a', 'a', 'a', 'b', 'b'];
+        differ.check(l);
+
+        l.splice(0, 1);
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['a', 'a', 'b[3->2]', 'b[4->3]'],
+          previous: ['a', 'a', 'a[2->null]', 'b[3->2]', 'b[4->3]'],
+          moves: ['b[3->2]', 'b[4->3]'],
+          removals: ['a[2->null]']
+        }));
+      });
+
+      it('should support insertions/moves', () => {
+        const l = ['a', 'a', 'b', 'b'];
+        differ.check(l);
+
+        l.splice(0, 0, 'b');
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['b[2->0]', 'a[0->1]', 'a[1->2]', 'b', 'b[null->4]'],
+          previous: ['a[0->1]', 'a[1->2]', 'b[2->0]', 'b'],
+          additions: ['b[null->4]'],
+          moves: ['b[2->0]', 'a[0->1]', 'a[1->2]']
+        }));
+      });
+
+      it('should not report unnecessary moves', () => {
+        const l = ['a', 'b', 'c'];
+        differ.check(l);
+
+        l.length = 0;
+        l.push('b');
+        l.push('a');
+        l.push('c');
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['b[1->0]', 'a[0->1]', 'c'],
+          previous: ['a[0->1]', 'b[1->0]', 'c'],
+          moves: ['b[1->0]', 'a[0->1]']
+        }));
+      });
+
+      // 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(iterableDifferToString(differ)).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 + ']';
+          const value = record.item;
+          if (record.currentIndex == null) {
+            return `REMOVE ${value} (${p} -> VOID)${suffix}`;
+          } else if (record.previousIndex == null) {
+            return `INSERT ${value} (VOID -> ${c})${suffix}`;
+          } else {
+            return `MOVE ${value} (${p} -> ${c})${suffix}`;
+          }
+        }
+
+        function modifyArrayUsingOperation(
+            arr: number[], endData: any[], prev: number, next: number) {
+          let value: number = null !;
+          if (prev == null) {
+            value = endData[next];
+            arr.splice(next, 0, value);
+          } else if (next == null) {
+            value = arr[prev];
+            arr.splice(prev, 1);
+          } else {
+            value = arr[prev];
+            arr.splice(prev, 1);
+            arr.splice(next, 0, value);
+          }
+          return value;
+        }
+
+        it('should trigger a series of insert/move/remove changes for inputs that have been diffed',
+           () => {
+             const startData = [0, 1, 2, 3, 4, 5];
+             const endData = [6, 2, 7, 0, 4, 8];
+
+             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);
+               operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
+             });
+
+             expect(operations).toEqual([
+               'INSERT 6 (VOID -> 0)', 'MOVE 2 (3 -> 1) [o=2]', 'INSERT 7 (VOID -> 2)',
+               'REMOVE 1 (4 -> VOID) [o=1]', 'REMOVE 3 (4 -> VOID) [o=3]',
+               'REMOVE 5 (5 -> VOID) [o=5]', 'INSERT 8 (VOID -> 5)'
+             ]);
+
+             expect(startData).toEqual(endData);
+           });
+
+        it('should consider inserting/removing/moving items with respect to items that have not moved at all',
+           () => {
+             const startData = [0, 1, 2, 3];
+             const endData = [2, 1];
+
+             differ = differ.diff(startData) !;
+             differ = differ.diff(endData) !;
+
+             const operations: string[] = [];
+             differ.forEachOperation((item: any, prev: number, next: number) => {
+               modifyArrayUsingOperation(startData, endData, prev, next);
+               operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
+             });
+
+             expect(operations).toEqual([
+               'REMOVE 0 (0 -> VOID) [o=0]', 'MOVE 2 (1 -> 0) [o=2]', 'REMOVE 3 (2 -> VOID) [o=3]'
+             ]);
+
+             expect(startData).toEqual(endData);
+           });
+
+        it('should be able to manage operations within a criss/cross of move operations', () => {
+          const startData = [1, 2, 3, 4, 5, 6];
+          const endData = [3, 6, 4, 9, 1, 2];
+
+          differ = differ.diff(startData) !;
+          differ = differ.diff(endData) !;
+
+          const operations: string[] = [];
+          differ.forEachOperation((item: any, prev: number, next: number) => {
+            modifyArrayUsingOperation(startData, endData, prev, next);
+            operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
+          });
+
+          expect(operations).toEqual([
+            'MOVE 3 (2 -> 0) [o=2]', 'MOVE 6 (5 -> 1) [o=5]', 'MOVE 4 (4 -> 2) [o=3]',
+            'INSERT 9 (VOID -> 3)', 'REMOVE 5 (6 -> VOID) [o=4]'
+          ]);
+
+          expect(startData).toEqual(endData);
+        });
+
+        it('should skip moves for multiple nodes that have not moved', () => {
+          const startData = [0, 1, 2, 3, 4];
+          const endData = [4, 1, 2, 3, 0, 5];
+
+          differ = differ.diff(startData) !;
+          differ = differ.diff(endData) !;
+
+          const operations: string[] = [];
+          differ.forEachOperation((item: any, prev: number, next: number) => {
+            modifyArrayUsingOperation(startData, endData, prev, next);
+            operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
+          });
+
+          expect(operations).toEqual([
+            'MOVE 4 (4 -> 0) [o=4]', 'MOVE 1 (2 -> 1) [o=1]', 'MOVE 2 (3 -> 2) [o=2]',
+            'MOVE 3 (4 -> 3) [o=3]', 'INSERT 5 (VOID -> 5)'
+          ]);
+
+          expect(startData).toEqual(endData);
+        });
+
+        it('should not fail', () => {
+          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) !;
+
+          const operations: string[] = [];
+          differ.forEachOperation((item: any, prev: number, next: number) => {
+            modifyArrayUsingOperation(startData, endData, prev, next);
+            operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
+          });
+
+          expect(operations).toEqual([
+            'MOVE 10 (10 -> 0) [o=10]', 'MOVE 11 (11 -> 1) [o=11]', 'MOVE 1 (3 -> 2) [o=1]',
+            'MOVE 5 (7 -> 3) [o=5]', 'MOVE 7 (9 -> 4) [o=7]', 'MOVE 8 (10 -> 5) [o=8]',
+            'REMOVE 2 (7 -> VOID) [o=2]', 'INSERT 5 (VOID -> 7)', 'REMOVE 4 (9 -> VOID) [o=4]',
+            'REMOVE 9 (10 -> VOID) [o=9]'
+          ]);
+
+          expect(startData).toEqual(endData);
+        });
+
+        it('should trigger nothing when the list is completely full of replaced items that are tracked by the index',
+           () => {
+             differ = new DefaultIterableDiffer((index: number) => index);
+
+             const startData = [1, 2, 3, 4];
+             const endData = [5, 6, 7, 8];
+
+             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);
+               operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
+             });
+
+             expect(operations).toEqual([]);
+           });
+      });
+
+      describe('diff', () => {
+        it('should return self when there is a change', () => {
+          expect(differ.diff(['a', 'b'])).toBe(differ);
+        });
+
+        it('should return null when there is no change', () => {
+          differ.diff(['a', 'b']);
+          expect(differ.diff(['a', 'b'])).toEqual(null);
+        });
+
+        it('should treat null as an empty list', () => {
+          differ.diff(['a', 'b']);
+          expect(iterableDifferToString(differ.diff(null !) !)).toEqual(iterableChangesAsString({
+            previous: ['a[0->null]', 'b[1->null]'],
+            removals: ['a[0->null]', 'b[1->null]']
+          }));
+        });
+
+        it('should throw when given an invalid collection', () => {
+          expect(() => differ.diff('invalid')).toThrowError(/Error trying to diff 'invalid'/);
+        });
+      });
+    });
+
+    describe('trackBy function by id', function() {
+      let differ: any;
+
+      const trackByItemId = (index: number, item: any): any => item.id;
+
+      const buildItemList = (list: string[]) => list.map((val) => new ItemWithId(val));
+
+      beforeEach(() => { differ = new DefaultIterableDiffer(trackByItemId); });
+
+      it('should treat the collection as dirty if identity changes', () => {
+        differ.diff(buildItemList(['a']));
+        expect(differ.diff(buildItemList(['a']))).toBe(differ);
+      });
+
+      it('should treat seen records as identity changes, not additions', () => {
+        let l = buildItemList(['a', 'b', 'c']);
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: [`{id: a}[null->0]`, `{id: b}[null->1]`, `{id: c}[null->2]`],
+          additions: [`{id: a}[null->0]`, `{id: b}[null->1]`, `{id: c}[null->2]`]
+        }));
+
+        l = buildItemList(['a', 'b', 'c']);
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: [`{id: a}`, `{id: b}`, `{id: c}`],
+          identityChanges: [`{id: a}`, `{id: b}`, `{id: c}`],
+          previous: [`{id: a}`, `{id: b}`, `{id: c}`]
+        }));
+      });
+
+      it('should have updated properties in identity change collection', () => {
+        let l = [new ComplexItem('a', 'blue'), new ComplexItem('b', 'yellow')];
+        differ.check(l);
+
+        l = [new ComplexItem('a', 'orange'), new ComplexItem('b', 'red')];
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: [`{id: a, color: orange}`, `{id: b, color: red}`],
+          identityChanges: [`{id: a, color: orange}`, `{id: b, color: red}`],
+          previous: [`{id: a, color: orange}`, `{id: b, color: red}`]
+        }));
+      });
+
+      it('should track moves normally', () => {
+        let l = buildItemList(['a', 'b', 'c']);
+        differ.check(l);
+
+        l = buildItemList(['b', 'a', 'c']);
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['{id: b}[1->0]', '{id: a}[0->1]', '{id: c}'],
+          identityChanges: ['{id: b}[1->0]', '{id: a}[0->1]', '{id: c}'],
+          previous: ['{id: a}[0->1]', '{id: b}[1->0]', '{id: c}'],
+          moves: ['{id: b}[1->0]', '{id: a}[0->1]']
+        }));
+
+      });
+
+      it('should track duplicate reinsertion normally', () => {
+        let l = buildItemList(['a', 'a']);
+        differ.check(l);
+
+        l = buildItemList(['b', 'a', 'a']);
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['{id: b}[null->0]', '{id: a}[0->1]', '{id: a}[1->2]'],
+          identityChanges: ['{id: a}[0->1]', '{id: a}[1->2]'],
+          previous: ['{id: a}[0->1]', '{id: a}[1->2]'],
+          moves: ['{id: a}[0->1]', '{id: a}[1->2]'],
+          additions: ['{id: b}[null->0]']
+        }));
+
+      });
+
+      it('should track removals normally', () => {
+        const l = buildItemList(['a', 'b', 'c']);
+        differ.check(l);
+
+        l.splice(2, 1);
+        differ.check(l);
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['{id: a}', '{id: b}'],
+          previous: ['{id: a}', '{id: b}', '{id: c}[2->null]'],
+          removals: ['{id: c}[2->null]']
+        }));
+      });
+    });
+
+    describe('trackBy function by index', function() {
+      let differ: DefaultIterableDiffer<string>;
+
+      const trackByIndex = (index: number, item: any): number => index;
+
+      beforeEach(() => { differ = new DefaultIterableDiffer(trackByIndex); });
+
+      it('should track removals normally', () => {
+        differ.check(['a', 'b', 'c', 'd']);
+        differ.check(['e', 'f', 'g', 'h']);
+        differ.check(['e', 'f', 'h']);
+
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
+          collection: ['e', 'f', 'h'],
+          previous: ['e', 'f', 'h', 'h[3->null]'],
+          removals: ['h[3->null]'],
+          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
new file mode 100644
index 000000000000..bba585f5b069
--- /dev/null
+++ b/packages/core/test/change_detection/differs/default_keyvalue_differ_spec.ts
@@ -0,0 +1,252 @@
+/**
+ * @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 {DefaultKeyValueDiffer, DefaultKeyValueDifferFactory} from '@angular/core/src/change_detection/differs/default_keyvalue_differ';
+
+import {kvChangesAsString, testChangesAsString} from '../../change_detection/util';
+
+
+// TODO(vicb): Update the code & tests for object equality
+{
+  describe('keyvalue differ', function() {
+    describe('DefaultKeyValueDiffer', function() {
+      let differ: DefaultKeyValueDiffer<any, any>;
+      let m: Map<any, any>;
+
+      beforeEach(() => {
+        differ = new DefaultKeyValueDiffer<string, any>();
+        m = new Map();
+      });
+
+      afterEach(() => { differ = null !; });
+
+      it('should detect additions', () => {
+        differ.check(m);
+
+        m.set('a', 1);
+        differ.check(m);
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString({map: ['a[null->1]'], additions: ['a[null->1]']}));
+
+        m.set('b', 2);
+        differ.check(m);
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString(
+                {map: ['a', 'b[null->2]'], previous: ['a'], additions: ['b[null->2]']}));
+      });
+
+      it('should handle changing key/values correctly', () => {
+        m.set(1, 10);
+        m.set(2, 20);
+        differ.check(m);
+
+        m.set(2, 10);
+        m.set(1, 20);
+        differ.check(m);
+        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]']
+        }));
+      });
+
+      it('should expose previous and current value', () => {
+        m.set(1, 10);
+        differ.check(m);
+
+        m.set(1, 20);
+        differ.check(m);
+
+        differ.forEachChangedItem((record: any) => {
+          expect(record.previousValue).toEqual(10);
+          expect(record.currentValue).toEqual(20);
+        });
+
+      });
+
+      it('should do basic map watching', () => {
+        differ.check(m);
+
+        m.set('a', 'A');
+        differ.check(m);
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}));
+
+        m.set('b', 'B');
+        differ.check(m);
+        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(kvChangesAsString(differ)).toEqual(testChangesAsString({
+          map: ['a', 'b[B->BB]', 'd[null->D]'],
+          previous: ['a', 'b[B->BB]'],
+          additions: ['d[null->D]'],
+          changes: ['b[B->BB]']
+        }));
+
+        m.delete('b');
+        differ.check(m);
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString(
+                {map: ['a', 'd'], previous: ['a', 'b[BB->null]', 'd'], removals: ['b[BB->null]']}));
+
+        m.clear();
+        differ.check(m);
+        expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
+          previous: ['a[A->null]', 'd[D->null]'],
+          removals: ['a[A->null]', 'd[D->null]']
+        }));
+      });
+
+      it('should not see a NaN value as a change', () => {
+        m.set('foo', Number.NaN);
+        differ.check(m);
+
+        differ.check(m);
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString({map: ['foo'], previous: ['foo']}));
+      });
+
+      it('should work regardless key order', () => {
+        m.set('a', 0);
+        m.set('b', 0);
+        differ.check(m);
+
+        m = new Map();
+        m.set('b', 1);
+        m.set('a', 1);
+        differ.check(m);
+
+        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]']
+        }));
+      });
+
+      describe('JsObject changes', () => {
+        it('should support JS Object', () => {
+          const f = new DefaultKeyValueDifferFactory();
+          expect(f.supports({})).toBeTruthy();
+          expect(f.supports('not supported')).toBeFalsy();
+          expect(f.supports(0)).toBeFalsy();
+          expect(f.supports(null)).toBeFalsy();
+        });
+
+        it('should do basic object watching', () => {
+          let m: {[k: string]: string} = {};
+          differ.check(m);
+
+          m['a'] = 'A';
+          differ.check(m);
+          expect(kvChangesAsString(differ))
+              .toEqual(testChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}));
+
+          m['b'] = 'B';
+          differ.check(m);
+          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(kvChangesAsString(differ)).toEqual(testChangesAsString({
+            map: ['a', 'b[B->BB]', 'd[null->D]'],
+            previous: ['a', 'b[B->BB]'],
+            additions: ['d[null->D]'],
+            changes: ['b[B->BB]']
+          }));
+
+          m = {};
+          m['a'] = 'A';
+          m['d'] = 'D';
+          differ.check(m);
+          expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
+            map: ['a', 'd'],
+            previous: ['a', 'b[BB->null]', 'd'],
+            removals: ['b[BB->null]']
+          }));
+
+          m = {};
+          differ.check(m);
+          expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
+            previous: ['a[A->null]', 'd[D->null]'],
+            removals: ['a[A->null]', 'd[D->null]']
+          }));
+
+        });
+
+        it('should work regardless key order', () => {
+          differ.check({a: 0, b: 0});
+          differ.check({b: 1, a: 1});
+
+          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(kvChangesAsString(differ)).toEqual(testChangesAsString({
+            map: ['c[null->c]', 'a'],
+            previous: ['a', 'b[b->null]'],
+            additions: ['c[null->c]'],
+            removals: ['b[b->null]']
+          }));
+        });
+
+      });
+
+      describe('diff', () => {
+        it('should return self when there is a change', () => {
+          m.set('a', 'A');
+          expect(differ.diff(m)).toBe(differ);
+        });
+
+        it('should return null when there is no change', () => {
+          m.set('a', 'A');
+          differ.diff(m);
+          expect(differ.diff(m)).toEqual(null);
+        });
+
+        it('should treat null as an empty list', () => {
+          m.set('a', 'A');
+          differ.diff(m);
+          expect(kvChangesAsString(differ.diff(null)))
+              .toEqual(testChangesAsString({previous: ['a[A->null]'], removals: ['a[A->null]']}));
+        });
+
+        it('should throw when given an invalid collection', () => {
+          expect(() => differ.diff(<any>'invalid')).toThrowError(/Error trying to diff 'invalid'/);
+        });
+      });
+    });
+  });
+}
diff --git a/packages/core/test/change_detection/differs/iterable_differs_spec.ts b/packages/core/test/change_detection/differs/iterable_differs_spec.ts
new file mode 100644
index 000000000000..326bd0cfe383
--- /dev/null
+++ b/packages/core/test/change_detection/differs/iterable_differs_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 {Injector} from '@angular/core';
+import {IterableDiffers} from '@angular/core/src/change_detection/differs/iterable_differs';
+
+import {SpyIterableDifferFactory} from '../../spies';
+
+{
+  describe('IterableDiffers', function() {
+    let factory1: any;
+    let factory2: any;
+    let factory3: any;
+
+    beforeEach(() => {
+      factory1 = new SpyIterableDifferFactory();
+      factory2 = new SpyIterableDifferFactory();
+      factory3 = new SpyIterableDifferFactory();
+    });
+
+    it('should throw when no suitable implementation found', () => {
+      const differs = new IterableDiffers([]);
+      expect(() => differs.find('some object'))
+          .toThrowError(/Cannot find a differ supporting object 'some object'/);
+    });
+
+    it('should return the first suitable implementation', () => {
+      factory1.spy('supports').and.returnValue(false);
+      factory2.spy('supports').and.returnValue(true);
+      factory3.spy('supports').and.returnValue(true);
+
+      const differs = IterableDiffers.create(<any>[factory1, factory2, factory3]);
+      expect(differs.find('some object')).toBe(factory2);
+    });
+
+    it('should copy over differs from the parent repo', () => {
+      factory1.spy('supports').and.returnValue(true);
+      factory2.spy('supports').and.returnValue(false);
+
+      const parent = IterableDiffers.create(<any>[factory1]);
+      const child = IterableDiffers.create(<any>[factory2], parent);
+
+      expect(child.factories).toEqual([factory2, factory1]);
+    });
+
+    describe('.extend()', () => {
+      it('should throw if calling extend when creating root injector', () => {
+        const injector = Injector.create([IterableDiffers.extend([])]);
+
+        expect(() => injector.get(IterableDiffers))
+            .toThrowError(/Cannot extend IterableDiffers without a parent injector/);
+      });
+
+      it('should extend di-inherited differs', () => {
+        const parent = new IterableDiffers([factory1]);
+        const injector = Injector.create([{provide: IterableDiffers, useValue: parent}]);
+        const childInjector = Injector.create([IterableDiffers.extend([factory2])], injector);
+
+        expect(injector.get<IterableDiffers>(IterableDiffers).factories).toEqual([factory1]);
+        expect(childInjector.get<IterableDiffers>(IterableDiffers).factories).toEqual([
+          factory2, factory1
+        ]);
+      });
+    });
+  });
+}
diff --git a/packages/core/test/change_detection/iterable.ts b/packages/core/test/change_detection/iterable.ts
new file mode 100644
index 000000000000..b78de13bf92e
--- /dev/null
+++ b/packages/core/test/change_detection/iterable.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {getSymbolIterator} from '@angular/core/src/util';
+
+export class TestIterable {
+  list: number[];
+  constructor() { this.list = []; }
+
+  [getSymbolIterator()]() { return (this.list as any)[getSymbolIterator()](); }
+}
diff --git a/packages/core/test/change_detection/util.ts b/packages/core/test/change_detection/util.ts
new file mode 100644
index 000000000000..2a6b28f8d58a
--- /dev/null
+++ b/packages/core/test/change_detection/util.ts
@@ -0,0 +1,98 @@
+/**
+ * @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 {IterableChangeRecord, IterableChanges} from '@angular/core/src/change_detection/differs/iterable_differs';
+import {KeyValueChangeRecord, KeyValueChanges} from '@angular/core/src/change_detection/differs/keyvalue_differs';
+
+import {looseIdentical, stringify} from '../../src/util';
+
+export function iterableDifferToString<V>(iterableChanges: IterableChanges<V>) {
+  const collection: string[] = [];
+  iterableChanges.forEachItem(
+      (record: IterableChangeRecord<V>) => collection.push(icrAsString(record)));
+
+  const previous: string[] = [];
+  iterableChanges.forEachPreviousItem(
+      (record: IterableChangeRecord<V>) => previous.push(icrAsString(record)));
+
+  const additions: string[] = [];
+  iterableChanges.forEachAddedItem(
+      (record: IterableChangeRecord<V>) => additions.push(icrAsString(record)));
+
+  const moves: string[] = [];
+  iterableChanges.forEachMovedItem(
+      (record: IterableChangeRecord<V>) => moves.push(icrAsString(record)));
+
+  const removals: string[] = [];
+  iterableChanges.forEachRemovedItem(
+      (record: IterableChangeRecord<V>) => removals.push(icrAsString(record)));
+
+  const identityChanges: string[] = [];
+  iterableChanges.forEachIdentityChange(
+      (record: IterableChangeRecord<V>) => identityChanges.push(icrAsString(record)));
+
+  return iterableChangesAsString(
+      {collection, previous, additions, moves, removals, identityChanges});
+}
+
+function icrAsString<V>(icr: IterableChangeRecord<V>): string {
+  return icr.previousIndex === icr.currentIndex ? stringify(icr.item) :
+                                                  stringify(icr.item) + '[' +
+          stringify(icr.previousIndex) + '->' + stringify(icr.currentIndex) + ']';
+}
+
+export function iterableChangesAsString(
+    {collection = [] as any, previous = [] as any, additions = [] as any, moves = [] as any,
+     removals = [] as any, identityChanges = [] as any}): string {
+  return 'collection: ' + collection.join(', ') + '\n' +
+      'previous: ' + previous.join(', ') + '\n' +
+      'additions: ' + additions.join(', ') + '\n' +
+      'moves: ' + moves.join(', ') + '\n' +
+      'removals: ' + removals.join(', ') + '\n' +
+      'identityChanges: ' + identityChanges.join(', ') + '\n';
+}
+
+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 {
+  if (!map) map = [];
+  if (!previous) previous = [];
+  if (!additions) additions = [];
+  if (!changes) changes = [];
+  if (!removals) removals = [];
+
+  return 'map: ' + map.join(', ') + '\n' +
+      'previous: ' + previous.join(', ') + '\n' +
+      'additions: ' + additions.join(', ') + '\n' +
+      'changes: ' + changes.join(', ') + '\n' +
+      'removals: ' + removals.join(', ') + '\n';
+}
diff --git a/packages/core/test/component_fixture_spec.ts b/packages/core/test/component_fixture_spec.ts
new file mode 100644
index 000000000000..882bf548cb0a
--- /dev/null
+++ b/packages/core/test/component_fixture_spec.ts
@@ -0,0 +1,324 @@
+/**
+ * @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, Injectable, Input} from '@angular/core';
+import {ComponentFixtureAutoDetect, ComponentFixtureNoNgZone, TestBed, async, withModule} from '@angular/core/testing';
+import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+@Component({selector: 'simple-comp', template: `<span>Original {{simpleBinding}}</span>`})
+@Injectable()
+class SimpleComp {
+  simpleBinding: string;
+  constructor() { this.simpleBinding = 'Simple'; }
+}
+
+@Component({
+  selector: 'my-if-comp',
+  template: `MyIf(<span *ngIf="showMore">More</span>)`,
+})
+@Injectable()
+class MyIfComp {
+  showMore: boolean = false;
+}
+
+@Component({selector: 'autodetect-comp', template: `<span (click)='click()'>{{text}}</span>`})
+class AutoDetectComp {
+  text: string = '1';
+
+  click() { this.text += '1'; }
+}
+
+@Component({selector: 'async-comp', template: `<span (click)='click()'>{{text}}</span>`})
+class AsyncComp {
+  text: string = '1';
+
+  click() {
+    Promise.resolve(null).then((_) => { this.text += '1'; });
+  }
+}
+
+@Component({selector: 'async-child-comp', template: '<span>{{localText}}</span>'})
+class AsyncChildComp {
+  localText: string = '';
+
+  @Input()
+  set text(value: string) {
+    Promise.resolve(null).then((_) => { this.localText = value; });
+  }
+}
+
+@Component({
+  selector: 'async-change-comp',
+  template: `<async-child-comp (click)='click()' [text]="text"></async-child-comp>`
+})
+class AsyncChangeComp {
+  text: string = '1';
+
+  click() { this.text += '1'; }
+}
+
+@Component({selector: 'async-timeout-comp', template: `<span (click)='click()'>{{text}}</span>`})
+class AsyncTimeoutComp {
+  text: string = '1';
+
+  click() {
+    setTimeout(() => { this.text += '1'; }, 10);
+  }
+}
+
+@Component(
+    {selector: 'nested-async-timeout-comp', template: `<span (click)='click()'>{{text}}</span>`})
+class NestedAsyncTimeoutComp {
+  text: string = '1';
+
+  click() {
+    setTimeout(() => { setTimeout(() => { this.text += '1'; }, 10); }, 10);
+  }
+}
+
+{
+  describe('ComponentFixture', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          AutoDetectComp, AsyncComp, AsyncTimeoutComp, NestedAsyncTimeoutComp, AsyncChangeComp,
+          MyIfComp, SimpleComp, AsyncChildComp
+        ]
+      });
+    }));
+
+    it('should auto detect changes if autoDetectChanges is called', () => {
+
+      const componentFixture = TestBed.createComponent(AutoDetectComp);
+      expect(componentFixture.ngZone).not.toBeNull();
+      componentFixture.autoDetectChanges();
+      expect(componentFixture.nativeElement).toHaveText('1');
+
+      const element = componentFixture.debugElement.children[0];
+      dispatchEvent(element.nativeElement, 'click');
+
+      expect(componentFixture.isStable()).toBe(true);
+      expect(componentFixture.nativeElement).toHaveText('11');
+    });
+
+    it('should auto detect changes if ComponentFixtureAutoDetect is provided as true',
+       withModule({providers: [{provide: ComponentFixtureAutoDetect, useValue: true}]}, () => {
+
+         const componentFixture = TestBed.createComponent(AutoDetectComp);
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         const element = componentFixture.debugElement.children[0];
+         dispatchEvent(element.nativeElement, 'click');
+
+         expect(componentFixture.nativeElement).toHaveText('11');
+       }));
+
+    it('should signal through whenStable when the fixture is stable (autoDetectChanges)',
+       async(() => {
+         const componentFixture = TestBed.createComponent(AsyncComp);
+         componentFixture.autoDetectChanges();
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         const element = componentFixture.debugElement.children[0];
+         dispatchEvent(element.nativeElement, 'click');
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         // Component is updated asynchronously. Wait for the fixture to become stable
+         // before checking for new value.
+         expect(componentFixture.isStable()).toBe(false);
+         componentFixture.whenStable().then((waited) => {
+           expect(waited).toBe(true);
+           expect(componentFixture.nativeElement).toHaveText('11');
+         });
+       }));
+
+    it('should signal through isStable when the fixture is stable (no autoDetectChanges)',
+       async(() => {
+         const componentFixture = TestBed.createComponent(AsyncComp);
+
+         componentFixture.detectChanges();
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         const element = componentFixture.debugElement.children[0];
+         dispatchEvent(element.nativeElement, 'click');
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         // Component is updated asynchronously. Wait for the fixture to become stable
+         // before checking.
+         componentFixture.whenStable().then((waited) => {
+           expect(waited).toBe(true);
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('11');
+         });
+       }));
+
+    it('should wait for macroTask(setTimeout) while checking for whenStable ' +
+           '(autoDetectChanges)',
+       async(() => {
+         const componentFixture = TestBed.createComponent(AsyncTimeoutComp);
+         componentFixture.autoDetectChanges();
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         const element = componentFixture.debugElement.children[0];
+         dispatchEvent(element.nativeElement, 'click');
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         // Component is updated asynchronously. Wait for the fixture to become
+         // stable before checking for new value.
+         expect(componentFixture.isStable()).toBe(false);
+         componentFixture.whenStable().then((waited) => {
+           expect(waited).toBe(true);
+           expect(componentFixture.nativeElement).toHaveText('11');
+         });
+       }));
+
+    it('should wait for macroTask(setTimeout) while checking for whenStable ' +
+           '(no autoDetectChanges)',
+       async(() => {
+
+         const componentFixture = TestBed.createComponent(AsyncTimeoutComp);
+         componentFixture.detectChanges();
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         const element = componentFixture.debugElement.children[0];
+         dispatchEvent(element.nativeElement, 'click');
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         // Component is updated asynchronously. Wait for the fixture to become
+         // stable before checking for new value.
+         expect(componentFixture.isStable()).toBe(false);
+         componentFixture.whenStable().then((waited) => {
+           expect(waited).toBe(true);
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('11');
+         });
+       }));
+
+    it('should wait for nested macroTasks(setTimeout) while checking for whenStable ' +
+           '(autoDetectChanges)',
+       async(() => {
+
+         const componentFixture = TestBed.createComponent(NestedAsyncTimeoutComp);
+
+         componentFixture.autoDetectChanges();
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         const element = componentFixture.debugElement.children[0];
+         dispatchEvent(element.nativeElement, 'click');
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         // Component is updated asynchronously. Wait for the fixture to become
+         // stable before checking for new value.
+         expect(componentFixture.isStable()).toBe(false);
+         componentFixture.whenStable().then((waited) => {
+           expect(waited).toBe(true);
+           expect(componentFixture.nativeElement).toHaveText('11');
+         });
+       }));
+
+    it('should wait for nested macroTasks(setTimeout) while checking for whenStable ' +
+           '(no autoDetectChanges)',
+       async(() => {
+
+         const componentFixture = TestBed.createComponent(NestedAsyncTimeoutComp);
+         componentFixture.detectChanges();
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         const element = componentFixture.debugElement.children[0];
+         dispatchEvent(element.nativeElement, 'click');
+         expect(componentFixture.nativeElement).toHaveText('1');
+
+         // Component is updated asynchronously. Wait for the fixture to become
+         // stable before checking for new value.
+         expect(componentFixture.isStable()).toBe(false);
+         componentFixture.whenStable().then((waited) => {
+           expect(waited).toBe(true);
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('11');
+         });
+       }));
+
+    it('should stabilize after async task in change detection (autoDetectChanges)', async(() => {
+
+         const componentFixture = TestBed.createComponent(AsyncChangeComp);
+
+         componentFixture.autoDetectChanges();
+         componentFixture.whenStable().then((_) => {
+           expect(componentFixture.nativeElement).toHaveText('1');
+
+           const element = componentFixture.debugElement.children[0];
+           dispatchEvent(element.nativeElement, 'click');
+
+           componentFixture.whenStable().then(
+               (_) => { expect(componentFixture.nativeElement).toHaveText('11'); });
+         });
+       }));
+
+    it('should stabilize after async task in change detection(no autoDetectChanges)', async(() => {
+
+         const componentFixture = TestBed.createComponent(AsyncChangeComp);
+         componentFixture.detectChanges();
+         componentFixture.whenStable().then((_) => {
+           // Run detectChanges again so that stabilized value is reflected in the
+           // DOM.
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('1');
+
+           const element = componentFixture.debugElement.children[0];
+           dispatchEvent(element.nativeElement, 'click');
+           componentFixture.detectChanges();
+
+           componentFixture.whenStable().then((_) => {
+             // Run detectChanges again so that stabilized value is reflected in
+             // the DOM.
+             componentFixture.detectChanges();
+             expect(componentFixture.nativeElement).toHaveText('11');
+           });
+         });
+       }));
+
+    describe('No NgZone', () => {
+      beforeEach(() => {
+        TestBed.configureTestingModule(
+            {providers: [{provide: ComponentFixtureNoNgZone, useValue: true}]});
+      });
+
+      it('calling autoDetectChanges raises an error', () => {
+
+        const componentFixture = TestBed.createComponent(SimpleComp);
+        expect(() => {
+          componentFixture.autoDetectChanges();
+        }).toThrowError(/Cannot call autoDetectChanges when ComponentFixtureNoNgZone is set/);
+      });
+
+      it('should instantiate a component with valid DOM', async(() => {
+
+           const componentFixture = TestBed.createComponent(SimpleComp);
+
+           expect(componentFixture.ngZone).toBeNull();
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('Original Simple');
+         }));
+
+      it('should allow changing members of the component', async(() => {
+
+           const componentFixture = TestBed.createComponent(MyIfComp);
+
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('MyIf()');
+
+           componentFixture.componentInstance.showMore = true;
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('MyIf(More)');
+
+         }));
+    });
+
+  });
+}
diff --git a/packages/core/test/debug/debug_node_spec.ts b/packages/core/test/debug/debug_node_spec.ts
new file mode 100644
index 000000000000..d608220a107e
--- /dev/null
+++ b/packages/core/test/debug/debug_node_spec.ts
@@ -0,0 +1,358 @@
+/**
+ * @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 {EventEmitter, Injectable, NO_ERRORS_SCHEMA} from '@angular/core';
+import {Component, Directive, Input} from '@angular/core/src/metadata';
+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 {expect} from '@angular/platform-browser/testing/src/matchers';
+
+@Injectable()
+class Logger {
+  logs: string[];
+
+  constructor() { this.logs = []; }
+
+  add(thing: string) { this.logs.push(thing); }
+}
+
+@Directive({selector: '[message]', inputs: ['message']})
+class MessageDir {
+  logger: Logger;
+
+  constructor(logger: Logger) { this.logger = logger; }
+
+  set message(newMessage: string) { this.logger.add(newMessage); }
+}
+
+@Component({
+  selector: 'child-comp',
+  template: `<div class="child" message="child">
+               <span class="childnested" message="nestedchild">Child</span>
+             </div>
+             <span class="child" [innerHtml]="childBinding"></span>`,
+})
+class ChildComp {
+  childBinding: string;
+
+  constructor() { this.childBinding = 'Original'; }
+}
+
+@Component({
+  selector: 'parent-comp',
+  viewProviders: [Logger],
+  template: `<div class="parent" message="parent">
+               <span class="parentnested" message="nestedparent">Parent</span>
+             </div>
+             <span class="parent" [innerHtml]="parentBinding"></span>
+             <child-comp class="child-comp-class"></child-comp>`,
+})
+class ParentComp {
+  parentBinding: string;
+  constructor() { this.parentBinding = 'OriginalParent'; }
+}
+
+@Directive({selector: 'custom-emitter', outputs: ['myevent']})
+class CustomEmitter {
+  myevent: EventEmitter<any>;
+
+  constructor() { this.myevent = new EventEmitter(); }
+}
+
+@Component({
+  selector: 'events-comp',
+  template: `<button (click)="handleClick()"></button>
+             <custom-emitter (myevent)="handleCustom()"></custom-emitter>`,
+})
+class EventsComp {
+  clicked: boolean;
+  customed: boolean;
+
+  constructor() {
+    this.clicked = false;
+    this.customed = false;
+  }
+
+  handleClick() { this.clicked = true; }
+
+  handleCustom() { this.customed = true; }
+}
+
+@Component({
+  selector: 'cond-content-comp',
+  viewProviders: [Logger],
+  template: `<div class="child" message="child" *ngIf="myBool"><ng-content></ng-content></div>`,
+})
+class ConditionalContentComp {
+  myBool: boolean = false;
+}
+
+@Component({
+  selector: 'conditional-parent-comp',
+  viewProviders: [Logger],
+  template: `<span class="parent" [innerHtml]="parentBinding"></span>
+            <cond-content-comp class="cond-content-comp-class">
+              <span class="from-parent"></span>
+            </cond-content-comp>`,
+})
+class ConditionalParentComp {
+  parentBinding: string;
+  constructor() { this.parentBinding = 'OriginalParent'; }
+}
+
+@Component({
+  selector: 'using-for',
+  viewProviders: [Logger],
+  template: `<span *ngFor="let thing of stuff" [innerHtml]="thing"></span>
+            <ul message="list">
+              <li *ngFor="let item of stuff" [innerHtml]="item"></li>
+            </ul>`,
+})
+class UsingFor {
+  stuff: string[];
+  constructor() { this.stuff = ['one', 'two', 'three']; }
+}
+
+@Directive({selector: '[mydir]', exportAs: 'mydir'})
+class MyDir {
+}
+
+@Component({
+  selector: 'locals-comp',
+  template: `
+   <div mydir #alice="mydir"></div>
+ `,
+})
+class LocalsComp {
+}
+
+@Component({
+  selector: 'bank-account',
+  template: `
+   Bank Name: {{bank}}
+   Account Id: {{id}}
+ `
+})
+class BankAccount {
+  // TODO(issue/24571): remove '!'.
+  @Input() bank !: string;
+  // TODO(issue/24571): remove '!'.
+  @Input('account') id !: string;
+
+  // TODO(issue/24571): remove '!'.
+  normalizedBankName !: string;
+}
+
+@Component({
+  selector: 'test-app',
+  template: `
+   <bank-account bank="RBC"
+                 account="4747"
+                 [style.width.px]="width"
+                 [style.color]="color"
+                 [class.closed]="isClosed"
+                 [class.open]="!isClosed"></bank-account>
+ `,
+})
+class TestApp {
+  width = 200;
+  color = 'red';
+  isClosed = true;
+}
+
+{
+  describe('debug element', () => {
+    let fixture: ComponentFixture<any>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          ChildComp,
+          ConditionalContentComp,
+          ConditionalParentComp,
+          CustomEmitter,
+          EventsComp,
+          LocalsComp,
+          MessageDir,
+          MyDir,
+          ParentComp,
+          TestApp,
+          UsingFor,
+        ],
+        providers: [Logger],
+        schemas: [NO_ERRORS_SCHEMA],
+      });
+    }));
+
+    it('should list all child nodes', () => {
+      fixture = TestBed.createComponent(ParentComp);
+      fixture.detectChanges();
+      expect(fixture.debugElement.childNodes.length).toEqual(3);
+    });
+
+    it('should list all component child elements', () => {
+      fixture = TestBed.createComponent(ParentComp);
+      fixture.detectChanges();
+      const childEls = fixture.debugElement.children;
+
+      // The root component has 3 elements in its view.
+      expect(childEls.length).toEqual(3);
+      expect(getDOM().hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
+      expect(getDOM().hasClass(childEls[1].nativeElement, 'parent')).toBe(true);
+      expect(getDOM().hasClass(childEls[2].nativeElement, 'child-comp-class')).toBe(true);
+
+      const nested = childEls[0].children;
+      expect(nested.length).toEqual(1);
+      expect(getDOM().hasClass(nested[0].nativeElement, 'parentnested')).toBe(true);
+
+      const childComponent = childEls[2];
+
+      const childCompChildren = childComponent.children;
+      expect(childCompChildren.length).toEqual(2);
+      expect(getDOM().hasClass(childCompChildren[0].nativeElement, 'child')).toBe(true);
+      expect(getDOM().hasClass(childCompChildren[1].nativeElement, 'child')).toBe(true);
+
+      const childNested = childCompChildren[0].children;
+      expect(childNested.length).toEqual(1);
+      expect(getDOM().hasClass(childNested[0].nativeElement, 'childnested')).toBe(true);
+    });
+
+    it('should list conditional component child elements', () => {
+      fixture = TestBed.createComponent(ConditionalParentComp);
+      fixture.detectChanges();
+
+      const childEls = fixture.debugElement.children;
+
+      // The root component has 2 elements in its view.
+      expect(childEls.length).toEqual(2);
+      expect(getDOM().hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
+      expect(getDOM().hasClass(childEls[1].nativeElement, 'cond-content-comp-class')).toBe(true);
+
+      const conditionalContentComp = childEls[1];
+
+      expect(conditionalContentComp.children.length).toEqual(0);
+
+      conditionalContentComp.componentInstance.myBool = true;
+      fixture.detectChanges();
+
+      expect(conditionalContentComp.children.length).toEqual(1);
+    });
+
+    it('should list child elements within viewports', () => {
+      fixture = TestBed.createComponent(UsingFor);
+      fixture.detectChanges();
+
+      const childEls = fixture.debugElement.children;
+      expect(childEls.length).toEqual(4);
+
+      // The 4th child is the <ul>
+      const list = childEls[3];
+
+      expect(list.children.length).toEqual(3);
+    });
+
+    it('should list element attributes', () => {
+      fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+      const bankElem = fixture.debugElement.children[0];
+
+      expect(bankElem.attributes['bank']).toEqual('RBC');
+      expect(bankElem.attributes['account']).toEqual('4747');
+    });
+
+    it('should list element classes', () => {
+      fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+      const bankElem = fixture.debugElement.children[0];
+
+      expect(bankElem.classes['closed']).toBe(true);
+      expect(bankElem.classes['open']).toBe(false);
+    });
+
+    it('should list element styles', () => {
+      fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+      const bankElem = fixture.debugElement.children[0];
+
+      expect(bankElem.styles['width']).toEqual('200px');
+      expect(bankElem.styles['color']).toEqual('red');
+    });
+
+    it('should query child elements by css', () => {
+      fixture = TestBed.createComponent(ParentComp);
+      fixture.detectChanges();
+
+      const childTestEls = fixture.debugElement.queryAll(By.css('child-comp'));
+
+      expect(childTestEls.length).toBe(1);
+      expect(getDOM().hasClass(childTestEls[0].nativeElement, 'child-comp-class')).toBe(true);
+    });
+
+    it('should query child elements by directive', () => {
+      fixture = TestBed.createComponent(ParentComp);
+      fixture.detectChanges();
+
+      const childTestEls = fixture.debugElement.queryAll(By.directive(MessageDir));
+
+      expect(childTestEls.length).toBe(4);
+      expect(getDOM().hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
+      expect(getDOM().hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
+      expect(getDOM().hasClass(childTestEls[2].nativeElement, 'child')).toBe(true);
+      expect(getDOM().hasClass(childTestEls[3].nativeElement, 'childnested')).toBe(true);
+    });
+
+    it('should list providerTokens', () => {
+      fixture = TestBed.createComponent(ParentComp);
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.providerTokens).toContain(Logger);
+    });
+
+    it('should list locals', () => {
+      fixture = TestBed.createComponent(LocalsComp);
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.children[0].references !['alice']).toBeAnInstanceOf(MyDir);
+    });
+
+    it('should allow injecting from the element injector', () => {
+      fixture = TestBed.createComponent(ParentComp);
+      fixture.detectChanges();
+
+      expect((<Logger>(fixture.debugElement.children[0].injector.get(Logger))).logs).toEqual([
+        'parent', 'nestedparent', 'child', 'nestedchild'
+      ]);
+    });
+
+    it('should list event listeners', () => {
+      fixture = TestBed.createComponent(EventsComp);
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.children[0].listeners.length).toEqual(1);
+      expect(fixture.debugElement.children[1].listeners.length).toEqual(1);
+
+    });
+
+    it('should trigger event handlers', () => {
+      fixture = TestBed.createComponent(EventsComp);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.clicked).toBe(false);
+      expect(fixture.componentInstance.customed).toBe(false);
+
+      fixture.debugElement.children[0].triggerEventHandler('click', <Event>{});
+      expect(fixture.componentInstance.clicked).toBe(true);
+
+      fixture.debugElement.children[1].triggerEventHandler('myevent', <Event>{});
+      expect(fixture.componentInstance.customed).toBe(true);
+
+    });
+  });
+}
diff --git a/packages/core/test/dev_mode_spec.ts b/packages/core/test/dev_mode_spec.ts
new file mode 100644
index 000000000000..926bfd86d39b
--- /dev/null
+++ b/packages/core/test/dev_mode_spec.ts
@@ -0,0 +1,15 @@
+/**
+ * @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 {isDevMode} from '@angular/core';
+
+{
+  describe('dev mode', () => {
+    it('is enabled in our tests by default', () => { expect(isDevMode()).toBe(true); });
+  });
+}
diff --git a/packages/core/test/di/forward_ref_spec.ts b/packages/core/test/di/forward_ref_spec.ts
new file mode 100644
index 000000000000..98fbccc5801a
--- /dev/null
+++ b/packages/core/test/di/forward_ref_spec.ts
@@ -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
+ */
+
+import {Type} from '@angular/core';
+import {forwardRef, resolveForwardRef} from '@angular/core/src/di';
+import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+{
+  describe('forwardRef', function() {
+    it('should wrap and unwrap the reference', () => {
+      const ref = forwardRef(() => String);
+      expect(ref instanceof Type).toBe(true);
+      expect(resolveForwardRef(ref)).toBe(String);
+    });
+  });
+}
diff --git a/packages/core/test/di/injector_spec.ts b/packages/core/test/di/injector_spec.ts
new file mode 100644
index 000000000000..aef7d802f392
--- /dev/null
+++ b/packages/core/test/di/injector_spec.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 '@angular/core';
+import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+{
+  describe('Injector.NULL', () => {
+    it('should throw if no arg is given', () => {
+      expect(() => Injector.NULL.get('someToken'))
+          .toThrowError('NullInjectorError: No provider for someToken!');
+    });
+
+    it('should throw if THROW_IF_NOT_FOUND is given', () => {
+      expect(() => Injector.NULL.get('someToken', Injector.THROW_IF_NOT_FOUND))
+          .toThrowError('NullInjectorError: No provider for someToken!');
+    });
+
+    it('should return the default value',
+       () => { expect(Injector.NULL.get('someToken', 'notFound')).toEqual('notFound'); });
+  });
+}
diff --git a/packages/core/test/di/r3_injector_spec.ts b/packages/core/test/di/r3_injector_spec.ts
new file mode 100644
index 000000000000..5f7a59124c64
--- /dev/null
+++ b/packages/core/test/di/r3_injector_spec.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 {defineInjectable, defineInjector} from '../../src/di/defs';
+import {InjectionToken} from '../../src/di/injection_token';
+import {INJECTOR, Injector, inject} from '../../src/di/injector';
+import {R3Injector, createInjector} from '../../src/di/r3_injector';
+
+describe('InjectorDef-based createInjector()', () => {
+  class CircularA {
+    static ngInjectableDef = defineInjectable({
+      providedIn: null,
+      factory: () => inject(CircularB),
+    });
+  }
+
+  class CircularB {
+    static ngInjectableDef = defineInjectable({
+      providedIn: null,
+      factory: () => inject(CircularA),
+    });
+  }
+
+  class Service {
+    static ngInjectableDef = defineInjectable({
+      providedIn: null,
+      factory: () => new Service(),
+    });
+  }
+
+  class StaticService {
+    constructor(readonly dep: Service) {}
+  }
+
+  const SERVICE_TOKEN = new InjectionToken<Service>('SERVICE_TOKEN');
+
+  const STATIC_TOKEN = new InjectionToken<StaticService>('STATIC_TOKEN');
+
+  const LOCALE = new InjectionToken<string[]>('LOCALE');
+
+  class ServiceWithDep {
+    constructor(readonly service: Service) {}
+
+    static ngInjectableDef = defineInjectable({
+      providedIn: null,
+      factory: () => new ServiceWithDep(inject(Service)),
+    });
+  }
+
+  class ServiceWithMultiDep {
+    constructor(readonly locale: string[]) {}
+
+    static ngInjectableDef = defineInjectable({
+      providedIn: null,
+      factory: () => new ServiceWithMultiDep(inject(LOCALE)),
+    });
+  }
+
+  class ServiceTwo {
+    static ngInjectableDef = defineInjectable({
+      providedIn: null,
+      factory: () => new ServiceTwo(),
+    });
+  }
+
+  let deepServiceDestroyed = false;
+  class DeepService {
+    static ngInjectableDef = defineInjectable({
+      providedIn: null,
+      factory: () => new DeepService(),
+    });
+
+    ngOnDestroy(): void { deepServiceDestroyed = true; }
+  }
+
+  let eagerServiceCreated: boolean = false;
+  class EagerService {
+    static ngInjectableDef = defineInjectable({
+      providedIn: undefined,
+      factory: () => new EagerService(),
+    });
+
+    constructor() { eagerServiceCreated = true; }
+  }
+
+  let deepModuleCreated: boolean = false;
+  class DeepModule {
+    constructor(eagerService: EagerService) { deepModuleCreated = true; }
+
+    static ngInjectorDef = defineInjector({
+      factory: () => new DeepModule(inject(EagerService)),
+      imports: undefined,
+      providers: [
+        EagerService,
+        {provide: DeepService, useFactory: () => { throw new Error('Not overridden!'); }},
+      ],
+    });
+
+    static safe() {
+      return {
+        ngModule: DeepModule,
+        providers: [{provide: DeepService}],
+      };
+    }
+  }
+
+  class IntermediateModule {
+    static ngInjectorDef = defineInjector({
+      factory: () => new IntermediateModule(),
+      imports: [DeepModule.safe()],
+      providers: [],
+    });
+  }
+
+  class Module {
+    static ngInjectorDef = defineInjector({
+      factory: () => new Module(),
+      imports: [IntermediateModule],
+      providers: [
+        ServiceWithDep,
+        ServiceWithMultiDep,
+        {provide: LOCALE, multi: true, useValue: 'en'},
+        {provide: LOCALE, multi: true, useValue: 'es'},
+        Service,
+        {provide: SERVICE_TOKEN, useExisting: Service},
+        CircularA,
+        CircularB,
+        {provide: STATIC_TOKEN, useClass: StaticService, deps: [Service]},
+      ],
+    });
+  }
+
+  class OtherModule {
+    static ngInjectorDef = defineInjector({
+      factory: () => new OtherModule(),
+      imports: undefined,
+      providers: [],
+    });
+  }
+
+  class NotAModule {}
+
+  class ImportsNotAModule {
+    static ngInjectorDef = defineInjector({
+      factory: () => new ImportsNotAModule(),
+      imports: [NotAModule],
+      providers: [],
+    });
+  }
+
+  class ScopedService {
+    static ngInjectableDef = defineInjectable({
+      providedIn: Module,
+      factory: () => new ScopedService(),
+    });
+  }
+
+  class WrongScopeService {
+    static ngInjectableDef = defineInjectable({
+      providedIn: OtherModule,
+      factory: () => new WrongScopeService(),
+    });
+  }
+
+  let injector: Injector;
+
+  beforeEach(() => {
+    deepModuleCreated = eagerServiceCreated = deepServiceDestroyed = false;
+    injector = createInjector(Module);
+  });
+
+  it('injects a simple class', () => {
+    const instance = injector.get(Service);
+    expect(instance instanceof Service).toBeTruthy();
+    expect(injector.get(Service)).toBe(instance);
+  });
+
+  it('throws an error when a token is not found',
+     () => { expect(() => injector.get(ServiceTwo)).toThrow(); });
+
+  it('returns the default value if a provider isn\'t present',
+     () => { expect(injector.get(ServiceTwo, null)).toBeNull(); });
+
+  it('injects a service with dependencies', () => {
+    const instance = injector.get(ServiceWithDep);
+    expect(instance instanceof ServiceWithDep);
+    expect(instance.service).toBe(injector.get(Service));
+  });
+
+  it('injects a service with dependencies on multi-providers', () => {
+    const instance = injector.get(ServiceWithMultiDep);
+    expect(instance instanceof ServiceWithMultiDep);
+    expect(instance.locale).toEqual(['en', 'es']);
+  });
+
+  it('injects a token with useExisting', () => {
+    const instance = injector.get(SERVICE_TOKEN);
+    expect(instance).toBe(injector.get(Service));
+  });
+
+  it('instantiates a class with useClass and deps', () => {
+    const instance = injector.get(STATIC_TOKEN);
+    expect(instance instanceof StaticService).toBeTruthy();
+    expect(instance.dep).toBe(injector.get(Service));
+  });
+
+  it('throws an error on circular deps',
+     () => { expect(() => injector.get(CircularA)).toThrow(); });
+
+  it('allows injecting itself via INJECTOR',
+     () => { expect(injector.get(INJECTOR)).toBe(injector); });
+
+  it('allows injecting itself via Injector',
+     () => { expect(injector.get(Injector)).toBe(injector); });
+
+  it('allows injecting a deeply imported service',
+     () => { expect(injector.get(DeepService) instanceof DeepService).toBeTruthy(); });
+
+  it('allows injecting a scoped service', () => {
+    const instance = injector.get(ScopedService);
+    expect(instance instanceof ScopedService).toBeTruthy();
+    expect(instance).toBe(injector.get(ScopedService));
+  });
+
+  it('does not create instances of a service not in scope',
+     () => { expect(injector.get(WrongScopeService, null)).toBeNull(); });
+
+  it('eagerly instantiates the injectordef types', () => {
+    expect(deepModuleCreated).toBe(true, 'DeepModule not instantiated');
+    expect(eagerServiceCreated).toBe(true, 'EagerSerivce not instantiated');
+  });
+
+  it('calls ngOnDestroy on services when destroyed', () => {
+    injector.get(DeepService);
+    (injector as R3Injector).destroy();
+    expect(deepServiceDestroyed).toBe(true, 'DeepService not destroyed');
+  });
+
+  it('does not allow injection after destroy', () => {
+    (injector as R3Injector).destroy();
+    expect(() => injector.get(DeepService)).toThrowError('Injector has already been destroyed.');
+  });
+
+  it('does not allow double destroy', () => {
+    (injector as R3Injector).destroy();
+    expect(() => (injector as R3Injector).destroy())
+        .toThrowError('Injector has already been destroyed.');
+  });
+
+  it('should not crash when importing something that has no ngInjectorDef', () => {
+    injector = createInjector(ImportsNotAModule);
+    expect(injector.get(ImportsNotAModule)).toBeDefined();
+  });
+});
diff --git a/packages/core/test/di/reflective_injector_spec.ts b/packages/core/test/di/reflective_injector_spec.ts
new file mode 100644
index 000000000000..28bfc0aca71f
--- /dev/null
+++ b/packages/core/test/di/reflective_injector_spec.ts
@@ -0,0 +1,529 @@
+/**
+ * @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, Injectable, InjectionToken, Injector, Optional, Provider, ReflectiveInjector, ReflectiveKey, Self, forwardRef} from '@angular/core';
+import {ReflectiveInjector_} from '@angular/core/src/di/reflective_injector';
+import {ResolvedReflectiveProvider_} from '@angular/core/src/di/reflective_provider';
+import {getOriginalError} from '@angular/core/src/errors';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+import {stringify} from '../../src/util';
+
+class Engine {}
+
+class BrokenEngine {
+  constructor() { throw new Error('Broken Engine'); }
+}
+
+class DashboardSoftware {}
+
+@Injectable()
+class Dashboard {
+  constructor(software: DashboardSoftware) {}
+}
+
+class TurboEngine extends Engine {}
+
+@Injectable()
+class Car {
+  constructor(public engine: Engine) {}
+}
+
+@Injectable()
+class CarWithOptionalEngine {
+  constructor(@Optional() public engine: Engine) {}
+}
+
+@Injectable()
+class CarWithDashboard {
+  engine: Engine;
+  dashboard: Dashboard;
+  constructor(engine: Engine, dashboard: Dashboard) {
+    this.engine = engine;
+    this.dashboard = dashboard;
+  }
+}
+
+@Injectable()
+class SportsCar extends Car {
+}
+
+@Injectable()
+class CarWithInject {
+  constructor(@Inject(TurboEngine) public engine: Engine) {}
+}
+
+@Injectable()
+class CyclicEngine {
+  constructor(car: Car) {}
+}
+
+class NoAnnotations {
+  constructor(secretDependency: any) {}
+}
+
+function factoryFn(a: any){}
+
+(function() {
+  const dynamicProviders = [
+    {provide: 'provider0', useValue: 1}, {provide: 'provider1', useValue: 1},
+    {provide: 'provider2', useValue: 1}, {provide: 'provider3', useValue: 1},
+    {provide: 'provider4', useValue: 1}, {provide: 'provider5', useValue: 1},
+    {provide: 'provider6', useValue: 1}, {provide: 'provider7', useValue: 1},
+    {provide: 'provider8', useValue: 1}, {provide: 'provider9', useValue: 1},
+    {provide: 'provider10', useValue: 1}
+  ];
+
+  function createInjector(
+      providers: Provider[], parent?: ReflectiveInjector | null): ReflectiveInjector_ {
+    const resolvedProviders = ReflectiveInjector.resolve(providers.concat(dynamicProviders));
+    if (parent != null) {
+      return <ReflectiveInjector_>parent.createChildFromResolved(resolvedProviders);
+    } else {
+      return <ReflectiveInjector_>ReflectiveInjector.fromResolvedProviders(resolvedProviders);
+    }
+  }
+
+  describe(`injector`, () => {
+
+    it('should instantiate a class without dependencies', () => {
+      const injector = createInjector([Engine]);
+      const engine = injector.get(Engine);
+
+      expect(engine).toBeAnInstanceOf(Engine);
+    });
+
+    it('should resolve dependencies based on type information', () => {
+      const injector = createInjector([Engine, Car]);
+      const car = injector.get(Car);
+
+      expect(car).toBeAnInstanceOf(Car);
+      expect(car.engine).toBeAnInstanceOf(Engine);
+    });
+
+    it('should resolve dependencies based on @Inject annotation', () => {
+      const injector = createInjector([TurboEngine, Engine, CarWithInject]);
+      const car = injector.get(CarWithInject);
+
+      expect(car).toBeAnInstanceOf(CarWithInject);
+      expect(car.engine).toBeAnInstanceOf(TurboEngine);
+    });
+
+    it('should throw when no type and not @Inject (class case)', () => {
+      expect(() => createInjector([NoAnnotations]))
+          .toThrowError(
+              'Cannot resolve all parameters for \'NoAnnotations\'(?). ' +
+              'Make sure that all the parameters are decorated with Inject or have valid type annotations ' +
+              'and that \'NoAnnotations\' is decorated with Injectable.');
+    });
+
+    it('should throw when no type and not @Inject (factory case)', () => {
+      expect(() => createInjector([{provide: 'someToken', useFactory: factoryFn}]))
+          .toThrowError(
+              'Cannot resolve all parameters for \'factoryFn\'(?). ' +
+              'Make sure that all the parameters are decorated with Inject or have valid type annotations ' +
+              'and that \'factoryFn\' is decorated with Injectable.');
+    });
+
+    it('should cache instances', () => {
+      const injector = createInjector([Engine]);
+
+      const e1 = injector.get(Engine);
+      const e2 = injector.get(Engine);
+
+      expect(e1).toBe(e2);
+    });
+
+    it('should provide to a value', () => {
+      const injector = createInjector([{provide: Engine, useValue: 'fake engine'}]);
+
+      const engine = injector.get(Engine);
+      expect(engine).toEqual('fake engine');
+    });
+
+    it('should inject dependencies instance of InjectionToken', () => {
+      const TOKEN = new InjectionToken<string>('token');
+
+      const injector = createInjector([
+        {provide: TOKEN, useValue: 'by token'},
+        {provide: Engine, useFactory: (v: string) => v, deps: [[TOKEN]]},
+      ]);
+
+      const engine = injector.get(Engine);
+      expect(engine).toEqual('by token');
+    });
+
+    it('should provide to a factory', () => {
+      function sportsCarFactory(e: any) { return new SportsCar(e); }
+
+      const injector =
+          createInjector([Engine, {provide: Car, useFactory: sportsCarFactory, deps: [Engine]}]);
+
+      const car = injector.get(Car);
+      expect(car).toBeAnInstanceOf(SportsCar);
+      expect(car.engine).toBeAnInstanceOf(Engine);
+    });
+
+    it('should supporting provider to null', () => {
+      const injector = createInjector([{provide: Engine, useValue: null}]);
+      const engine = injector.get(Engine);
+      expect(engine).toBeNull();
+    });
+
+    it('should provide to an alias', () => {
+      const injector = createInjector([
+        Engine, {provide: SportsCar, useClass: SportsCar}, {provide: Car, useExisting: SportsCar}
+      ]);
+
+      const car = injector.get(Car);
+      const sportsCar = injector.get(SportsCar);
+      expect(car).toBeAnInstanceOf(SportsCar);
+      expect(car).toBe(sportsCar);
+    });
+
+    it('should support multiProviders', () => {
+      const injector = createInjector([
+        Engine, {provide: Car, useClass: SportsCar, multi: true},
+        {provide: Car, useClass: CarWithOptionalEngine, multi: true}
+      ]);
+
+      const cars = injector.get(Car);
+      expect(cars.length).toEqual(2);
+      expect(cars[0]).toBeAnInstanceOf(SportsCar);
+      expect(cars[1]).toBeAnInstanceOf(CarWithOptionalEngine);
+    });
+
+    it('should support multiProviders that are created using useExisting', () => {
+      const injector =
+          createInjector([Engine, SportsCar, {provide: Car, useExisting: SportsCar, multi: true}]);
+
+      const cars = injector.get(Car);
+      expect(cars.length).toEqual(1);
+      expect(cars[0]).toBe(injector.get(SportsCar));
+    });
+
+    it('should throw when the aliased provider does not exist', () => {
+      const injector = createInjector([{provide: 'car', useExisting: SportsCar}]);
+      const e = `No provider for ${stringify(SportsCar)}! (car -> ${stringify(SportsCar)})`;
+      expect(() => injector.get('car')).toThrowError(e);
+    });
+
+    it('should handle forwardRef in useExisting', () => {
+      const injector = createInjector([
+        {provide: 'originalEngine', useClass: forwardRef(() => Engine)},
+        {provide: 'aliasedEngine', useExisting: <any>forwardRef(() => 'originalEngine')}
+      ]);
+      expect(injector.get('aliasedEngine')).toBeAnInstanceOf(Engine);
+    });
+
+    it('should support overriding factory dependencies', () => {
+      const injector = createInjector(
+          [Engine, {provide: Car, useFactory: (e: Engine) => new SportsCar(e), deps: [Engine]}]);
+
+      const car = injector.get(Car);
+      expect(car).toBeAnInstanceOf(SportsCar);
+      expect(car.engine).toBeAnInstanceOf(Engine);
+    });
+
+    it('should support optional dependencies', () => {
+      const injector = createInjector([CarWithOptionalEngine]);
+
+      const car = injector.get(CarWithOptionalEngine);
+      expect(car.engine).toEqual(null);
+    });
+
+    it('should flatten passed-in providers', () => {
+      const injector = createInjector([[[Engine, Car]]]);
+
+      const car = injector.get(Car);
+      expect(car).toBeAnInstanceOf(Car);
+    });
+
+    it('should use the last provider when there are multiple providers for same token', () => {
+      const injector = createInjector(
+          [{provide: Engine, useClass: Engine}, {provide: Engine, useClass: TurboEngine}]);
+
+      expect(injector.get(Engine)).toBeAnInstanceOf(TurboEngine);
+    });
+
+    it('should use non-type tokens', () => {
+      const injector = createInjector([{provide: 'token', useValue: 'value'}]);
+
+      expect(injector.get('token')).toEqual('value');
+    });
+
+    it('should throw when given invalid providers', () => {
+      expect(() => createInjector(<any>['blah']))
+          .toThrowError(
+              'Invalid provider - only instances of Provider and Type are allowed, got: blah');
+    });
+
+    it('should provide itself', () => {
+      const parent = createInjector([]);
+      const child = parent.resolveAndCreateChild([]);
+
+      expect(child.get(Injector)).toBe(child);
+    });
+
+    it('should throw when no provider defined', () => {
+      const injector = createInjector([]);
+      expect(() => injector.get('NonExisting')).toThrowError('No provider for NonExisting!');
+    });
+
+    it('should show the full path when no provider', () => {
+      const injector = createInjector([CarWithDashboard, Engine, Dashboard]);
+      expect(() => injector.get(CarWithDashboard))
+          .toThrowError(
+              `No provider for DashboardSoftware! (${stringify(CarWithDashboard)} -> ${stringify(Dashboard)} -> DashboardSoftware)`);
+    });
+
+    it('should throw when trying to instantiate a cyclic dependency', () => {
+      const injector = createInjector([Car, {provide: Engine, useClass: CyclicEngine}]);
+
+      expect(() => injector.get(Car))
+          .toThrowError(
+              `Cannot instantiate cyclic dependency! (${stringify(Car)} -> ${stringify(Engine)} -> ${stringify(Car)})`);
+    });
+
+    it('should show the full path when error happens in a constructor', () => {
+      const providers =
+          ReflectiveInjector.resolve([Car, {provide: Engine, useClass: BrokenEngine}]);
+      const injector = new ReflectiveInjector_(providers);
+
+      try {
+        injector.get(Car);
+        throw 'Must throw';
+      } catch (e) {
+        expect(e.message).toContain(
+            `Error during instantiation of Engine! (${stringify(Car)} -> Engine)`);
+        expect(getOriginalError(e) instanceof Error).toBeTruthy();
+        expect(e.keys[0].token).toEqual(Engine);
+      }
+    });
+
+    it('should instantiate an object after a failed attempt', () => {
+      let isBroken = true;
+
+      const injector = createInjector([
+        Car, {provide: Engine, useFactory: (() => isBroken ? new BrokenEngine() : new Engine())}
+      ]);
+
+      expect(() => injector.get(Car))
+          .toThrowError('Broken Engine: Error during instantiation of Engine! (Car -> Engine).');
+
+      isBroken = false;
+
+      expect(injector.get(Car)).toBeAnInstanceOf(Car);
+    });
+
+    it('should support null values', () => {
+      const injector = createInjector([{provide: 'null', useValue: null}]);
+      expect(injector.get('null')).toBe(null);
+    });
+
+  });
+
+
+  describe('child', () => {
+    it('should load instances from parent injector', () => {
+      const parent = ReflectiveInjector.resolveAndCreate([Engine]);
+      const child = parent.resolveAndCreateChild([]);
+
+      const engineFromParent = parent.get(Engine);
+      const engineFromChild = child.get(Engine);
+
+      expect(engineFromChild).toBe(engineFromParent);
+    });
+
+    it('should not use the child providers when resolving the dependencies of a parent provider',
+       () => {
+         const parent = ReflectiveInjector.resolveAndCreate([Car, Engine]);
+         const child = parent.resolveAndCreateChild([{provide: Engine, useClass: TurboEngine}]);
+
+         const carFromChild = child.get(Car);
+         expect(carFromChild.engine).toBeAnInstanceOf(Engine);
+       });
+
+    it('should create new instance in a child injector', () => {
+      const parent = ReflectiveInjector.resolveAndCreate([Engine]);
+      const child = parent.resolveAndCreateChild([{provide: Engine, useClass: TurboEngine}]);
+
+      const engineFromParent = parent.get(Engine);
+      const engineFromChild = child.get(Engine);
+
+      expect(engineFromParent).not.toBe(engineFromChild);
+      expect(engineFromChild).toBeAnInstanceOf(TurboEngine);
+    });
+
+    it('should give access to parent', () => {
+      const parent = ReflectiveInjector.resolveAndCreate([]);
+      const child = parent.resolveAndCreateChild([]);
+      expect(child.parent).toBe(parent);
+    });
+  });
+
+  describe('resolveAndInstantiate', () => {
+    it('should instantiate an object in the context of the injector', () => {
+      const inj = ReflectiveInjector.resolveAndCreate([Engine]);
+      const car = inj.resolveAndInstantiate(Car);
+      expect(car).toBeAnInstanceOf(Car);
+      expect(car.engine).toBe(inj.get(Engine));
+    });
+
+    it('should not store the instantiated object in the injector', () => {
+      const inj = ReflectiveInjector.resolveAndCreate([Engine]);
+      inj.resolveAndInstantiate(Car);
+      expect(() => inj.get(Car)).toThrowError();
+    });
+  });
+
+  describe('instantiate', () => {
+    it('should instantiate an object in the context of the injector', () => {
+      const inj = ReflectiveInjector.resolveAndCreate([Engine]);
+      const car = inj.instantiateResolved(ReflectiveInjector.resolve([Car])[0]);
+      expect(car).toBeAnInstanceOf(Car);
+      expect(car.engine).toBe(inj.get(Engine));
+    });
+  });
+
+  describe('depedency resolution', () => {
+    describe('@Self()', () => {
+      it('should return a dependency from self', () => {
+        const inj = ReflectiveInjector.resolveAndCreate([
+          Engine,
+          {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]}
+        ]);
+
+        expect(inj.get(Car)).toBeAnInstanceOf(Car);
+      });
+
+      it('should throw when not requested provider on self', () => {
+        const parent = ReflectiveInjector.resolveAndCreate([Engine]);
+        const child = parent.resolveAndCreateChild(
+            [{provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]}]);
+
+        expect(() => child.get(Car))
+            .toThrowError(`No provider for Engine! (${stringify(Car)} -> ${stringify(Engine)})`);
+      });
+    });
+
+    describe('default', () => {
+      it('should not skip self', () => {
+        const parent = ReflectiveInjector.resolveAndCreate([Engine]);
+        const child = parent.resolveAndCreateChild([
+          {provide: Engine, useClass: TurboEngine},
+          {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [Engine]}
+        ]);
+
+        expect(child.get(Car).engine).toBeAnInstanceOf(TurboEngine);
+      });
+    });
+  });
+
+  describe('resolve', () => {
+    it('should resolve and flatten', () => {
+      const providers = ReflectiveInjector.resolve([Engine, [BrokenEngine]]);
+      providers.forEach(function(b) {
+        if (!b) return;  // the result is a sparse array
+        expect(b instanceof ResolvedReflectiveProvider_).toBe(true);
+      });
+    });
+
+    it('should support multi providers', () => {
+      const provider = ReflectiveInjector.resolve([
+        {provide: Engine, useClass: BrokenEngine, multi: true},
+        {provide: Engine, useClass: TurboEngine, multi: true}
+      ])[0];
+
+      expect(provider.key.token).toBe(Engine);
+      expect(provider.multiProvider).toEqual(true);
+      expect(provider.resolvedFactories.length).toEqual(2);
+    });
+
+
+    it('should support providers as hash', () => {
+      const provider = ReflectiveInjector.resolve([
+        {provide: Engine, useClass: BrokenEngine, multi: true},
+        {provide: Engine, useClass: TurboEngine, multi: true}
+      ])[0];
+
+      expect(provider.key.token).toBe(Engine);
+      expect(provider.multiProvider).toEqual(true);
+      expect(provider.resolvedFactories.length).toEqual(2);
+    });
+
+    it('should support multi providers with only one provider', () => {
+      const provider =
+          ReflectiveInjector.resolve([{provide: Engine, useClass: BrokenEngine, multi: true}])[0];
+
+      expect(provider.key.token).toBe(Engine);
+      expect(provider.multiProvider).toEqual(true);
+      expect(provider.resolvedFactories.length).toEqual(1);
+    });
+
+    it('should throw when mixing multi providers with regular providers', () => {
+      expect(() => {
+        ReflectiveInjector.resolve(
+            [{provide: Engine, useClass: BrokenEngine, multi: true}, Engine]);
+      }).toThrowError(/Cannot mix multi providers and regular providers/);
+
+      expect(() => {
+        ReflectiveInjector.resolve(
+            [Engine, {provide: Engine, useClass: BrokenEngine, multi: true}]);
+      }).toThrowError(/Cannot mix multi providers and regular providers/);
+    });
+
+    it('should resolve forward references', () => {
+      const providers = ReflectiveInjector.resolve([
+        forwardRef(() => Engine),
+        [{provide: forwardRef(() => BrokenEngine), useClass: forwardRef(() => Engine)}], {
+          provide: forwardRef(() => String),
+          useFactory: () => 'OK',
+          deps: [forwardRef(() => Engine)]
+        }
+      ]);
+
+      const engineProvider = providers[0];
+      const brokenEngineProvider = providers[1];
+      const stringProvider = providers[2];
+
+      expect(engineProvider.resolvedFactories[0].factory() instanceof Engine).toBe(true);
+      expect(brokenEngineProvider.resolvedFactories[0].factory() instanceof Engine).toBe(true);
+      expect(stringProvider.resolvedFactories[0].dependencies[0].key)
+          .toEqual(ReflectiveKey.get(Engine));
+    });
+
+    it('should support overriding factory dependencies with dependency annotations', () => {
+      const providers = ReflectiveInjector.resolve([{
+        provide: 'token',
+        useFactory: (e: any /** TODO #9100 */) => 'result',
+        deps: [[new Inject('dep')]]
+      }]);
+
+      const provider = providers[0];
+
+      expect(provider.resolvedFactories[0].dependencies[0].key.token).toEqual('dep');
+    });
+
+    it('should allow declaring dependencies with flat arrays', () => {
+      const resolved = ReflectiveInjector.resolve(
+          [{provide: 'token', useFactory: (e: any) => e, deps: [new Inject('dep')]}]);
+      const nestedResolved = ReflectiveInjector.resolve(
+          [{provide: 'token', useFactory: (e: any) => e, deps: [[new Inject('dep')]]}]);
+      expect(resolved[0].resolvedFactories[0].dependencies[0].key.token)
+          .toEqual(nestedResolved[0].resolvedFactories[0].dependencies[0].key.token);
+    });
+  });
+
+  describe('displayName', () => {
+    it('should work', () => {
+      expect((<ReflectiveInjector_>ReflectiveInjector.resolveAndCreate([Engine, BrokenEngine]))
+                 .displayName)
+          .toEqual('ReflectiveInjector(providers: [ "Engine" ,  "BrokenEngine" ])');
+    });
+  });
+})();
diff --git a/packages/core/test/di/reflective_key_spec.ts b/packages/core/test/di/reflective_key_spec.ts
new file mode 100644
index 000000000000..fe82a254a14d
--- /dev/null
+++ b/packages/core/test/di/reflective_key_spec.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 {KeyRegistry} from '@angular/core/src/di/reflective_key';
+
+{
+  describe('key', function() {
+    let registry: KeyRegistry;
+
+    beforeEach(function() { registry = new KeyRegistry(); });
+
+    it('should be equal to another key if type is the same',
+       function() { expect(registry.get('car')).toBe(registry.get('car')); });
+
+    it('should not be equal to another key if types are different',
+       function() { expect(registry.get('car')).not.toBe(registry.get('porsche')); });
+
+    it('should return the passed in key',
+       function() { expect(registry.get(registry.get('car'))).toBe(registry.get('car')); });
+
+  });
+}
diff --git a/packages/core/test/di/static_injector_spec.ts b/packages/core/test/di/static_injector_spec.ts
new file mode 100644
index 000000000000..c00c8fa97ced
--- /dev/null
+++ b/packages/core/test/di/static_injector_spec.ts
@@ -0,0 +1,480 @@
+/**
+ * @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, InjectionToken, Injector, Optional, ReflectiveKey, Self, SkipSelf, forwardRef} from '@angular/core';
+import {getOriginalError} from '@angular/core/src/errors';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+import {stringify} from '../../src/util';
+
+class Engine {
+  static PROVIDER = {provide: Engine, useClass: Engine, deps: []};
+}
+
+class BrokenEngine {
+  static PROVIDER = {provide: Engine, useClass: BrokenEngine, deps: []};
+  constructor() { throw new Error('Broken Engine'); }
+}
+
+class DashboardSoftware {
+  static PROVIDER = {provide: DashboardSoftware, useClass: DashboardSoftware, deps: []};
+}
+
+class Dashboard {
+  static PROVIDER = {provide: Dashboard, useClass: Dashboard, deps: [DashboardSoftware]};
+  constructor(software: DashboardSoftware) {}
+}
+
+class TurboEngine extends Engine {
+  static PROVIDER = {provide: Engine, useClass: TurboEngine, deps: []};
+}
+
+class Car {
+  static PROVIDER = {provide: Car, useClass: Car, deps: [Engine]};
+  constructor(public engine: Engine) {}
+}
+
+class CarWithOptionalEngine {
+  static PROVIDER = {
+    provide: CarWithOptionalEngine,
+    useClass: CarWithOptionalEngine,
+    deps: [[new Optional(), Engine]]
+  };
+  constructor(public engine: Engine) {}
+}
+
+class CarWithDashboard {
+  static PROVIDER = {
+    provide: CarWithDashboard,
+    useClass: CarWithDashboard,
+    deps: [Engine, Dashboard]
+  };
+  engine: Engine;
+  dashboard: Dashboard;
+  constructor(engine: Engine, dashboard: Dashboard) {
+    this.engine = engine;
+    this.dashboard = dashboard;
+  }
+}
+
+class SportsCar extends Car {
+  static PROVIDER = {provide: Car, useClass: SportsCar, deps: [Engine]};
+}
+
+class CyclicEngine {
+  static PROVIDER = {provide: Engine, useClass: CyclicEngine, deps: [Car]};
+  constructor(car: Car) {}
+}
+
+class NoAnnotations {
+  constructor(secretDependency: any) {}
+}
+
+function factoryFn(a: any){}
+
+{
+  const dynamicProviders = [
+    {provide: 'provider0', useValue: 1}, {provide: 'provider1', useValue: 1},
+    {provide: 'provider2', useValue: 1}, {provide: 'provider3', useValue: 1},
+    {provide: 'provider4', useValue: 1}, {provide: 'provider5', useValue: 1},
+    {provide: 'provider6', useValue: 1}, {provide: 'provider7', useValue: 1},
+    {provide: 'provider8', useValue: 1}, {provide: 'provider9', useValue: 1},
+    {provide: 'provider10', useValue: 1}
+  ];
+
+  describe(`StaticInjector`, () => {
+
+    it('should instantiate a class without dependencies', () => {
+      const injector = Injector.create([Engine.PROVIDER]);
+      const engine = injector.get(Engine);
+
+      expect(engine).toBeAnInstanceOf(Engine);
+    });
+
+    it('should resolve dependencies based on type information', () => {
+      const injector = Injector.create([Engine.PROVIDER, Car.PROVIDER]);
+      const car = injector.get<Car>(Car);
+
+      expect(car).toBeAnInstanceOf(Car);
+      expect(car.engine).toBeAnInstanceOf(Engine);
+    });
+
+    it('should cache instances', () => {
+      const injector = Injector.create([Engine.PROVIDER]);
+
+      const e1 = injector.get(Engine);
+      const e2 = injector.get(Engine);
+
+      expect(e1).toBe(e2);
+    });
+
+    it('should provide to a value', () => {
+      const injector = Injector.create([{provide: Engine, useValue: 'fake engine'}]);
+
+      const engine = injector.get(Engine);
+      expect(engine).toEqual('fake engine');
+    });
+
+    it('should inject dependencies instance of InjectionToken', () => {
+      const TOKEN = new InjectionToken<string>('token');
+
+      const injector = Injector.create([
+        {provide: TOKEN, useValue: 'by token'},
+        {provide: Engine, useFactory: (v: string) => v, deps: [[TOKEN]]},
+      ]);
+
+      const engine = injector.get(Engine);
+      expect(engine).toEqual('by token');
+    });
+
+    it('should provide to a factory', () => {
+      function sportsCarFactory(e: any) { return new SportsCar(e); }
+
+      const injector = Injector.create(
+          [Engine.PROVIDER, {provide: Car, useFactory: sportsCarFactory, deps: [Engine]}]);
+
+      const car = injector.get<Car>(Car);
+      expect(car).toBeAnInstanceOf(SportsCar);
+      expect(car.engine).toBeAnInstanceOf(Engine);
+    });
+
+    it('should supporting provider to null', () => {
+      const injector = Injector.create([{provide: Engine, useValue: null}]);
+      const engine = injector.get(Engine);
+      expect(engine).toBeNull();
+    });
+
+    it('should provide to an alias', () => {
+      const injector = Injector.create([
+        Engine.PROVIDER, {provide: SportsCar, useClass: SportsCar, deps: [Engine]},
+        {provide: Car, useExisting: SportsCar}
+      ]);
+
+      const car = injector.get(Car);
+      const sportsCar = injector.get(SportsCar);
+      expect(car).toBeAnInstanceOf(SportsCar);
+      expect(car).toBe(sportsCar);
+    });
+
+    it('should support multiProviders', () => {
+      const injector = Injector.create([
+        Engine.PROVIDER, {provide: Car, useClass: SportsCar, deps: [Engine], multi: true},
+        {provide: Car, useClass: CarWithOptionalEngine, deps: [Engine], multi: true}
+      ]);
+
+      const cars = injector.get(Car) as any as Car[];
+      expect(cars.length).toEqual(2);
+      expect(cars[0]).toBeAnInstanceOf(SportsCar);
+      expect(cars[1]).toBeAnInstanceOf(CarWithOptionalEngine);
+    });
+
+    it('should support multiProviders that are created using useExisting', () => {
+      const injector = Injector.create([
+        Engine.PROVIDER, {provide: SportsCar, useClass: SportsCar, deps: [Engine]},
+        {provide: Car, useExisting: SportsCar, multi: true}
+      ]);
+
+      const cars = injector.get(Car) as any as Car[];
+      expect(cars.length).toEqual(1);
+      expect(cars[0]).toBe(injector.get(SportsCar));
+    });
+
+    it('should throw when the aliased provider does not exist', () => {
+      const injector = Injector.create([{provide: 'car', useExisting: SportsCar}]);
+      const e =
+          `StaticInjectorError[car -> ${stringify(SportsCar)}]: \n  NullInjectorError: No provider for ${stringify(SportsCar)}!`;
+      expect(() => injector.get('car')).toThrowError(e);
+    });
+
+    it('should handle forwardRef in useExisting', () => {
+      const injector = Injector.create([
+        {provide: 'originalEngine', useClass: forwardRef(() => Engine), deps: []}, {
+          provide: 'aliasedEngine',
+          useExisting: <any>forwardRef(() => 'originalEngine'),
+          deps: []
+        }
+      ]);
+      expect(injector.get('aliasedEngine')).toBeAnInstanceOf(Engine);
+    });
+
+    it('should support overriding factory dependencies', () => {
+      const injector = Injector.create([
+        Engine.PROVIDER,
+        {provide: Car, useFactory: (e: Engine) => new SportsCar(e), deps: [Engine]}
+      ]);
+
+      const car = injector.get<Car>(Car);
+      expect(car).toBeAnInstanceOf(SportsCar);
+      expect(car.engine).toBeAnInstanceOf(Engine);
+    });
+
+    it('should support optional dependencies', () => {
+      const injector = Injector.create([CarWithOptionalEngine.PROVIDER]);
+
+      const car = injector.get<CarWithOptionalEngine>(CarWithOptionalEngine);
+      expect(car.engine).toBeNull();
+    });
+
+    it('should flatten passed-in providers', () => {
+      const injector = Injector.create([[[Engine.PROVIDER, Car.PROVIDER]]]);
+
+      const car = injector.get(Car);
+      expect(car).toBeAnInstanceOf(Car);
+    });
+
+    it('should use the last provider when there are multiple providers for same token', () => {
+      const injector = Injector.create([
+        {provide: Engine, useClass: Engine, deps: []},
+        {provide: Engine, useClass: TurboEngine, deps: []}
+      ]);
+
+      expect(injector.get(Engine)).toBeAnInstanceOf(TurboEngine);
+    });
+
+    it('should use non-type tokens', () => {
+      const injector = Injector.create([{provide: 'token', useValue: 'value'}]);
+
+      expect(injector.get('token')).toEqual('value');
+    });
+
+    it('should throw when given invalid providers', () => {
+      expect(() => Injector.create(<any>['blah']))
+          .toThrowError('StaticInjectorError[blah]: Unexpected provider');
+    });
+
+    it('should throw when missing deps', () => {
+      expect(() => Injector.create(<any>[{provide: Engine, useClass: Engine}]))
+          .toThrowError(
+              'StaticInjectorError[{provide:Engine, useClass:Engine}]: \'deps\' required');
+    });
+
+    it('should throw when using reflective API', () => {
+      expect(() => Injector.create(<any>[Engine]))
+          .toThrowError('StaticInjectorError[Engine]: Function/Class not supported');
+    });
+
+    it('should throw when unknown provider shape API', () => {
+      expect(() => Injector.create(<any>[{provide: 'abc', deps: [Engine]}]))
+          .toThrowError(
+              'StaticInjectorError[{provide:"abc", deps:[Engine]}]: StaticProvider does not have [useValue|useFactory|useExisting|useClass] or [provide] is not newable');
+    });
+
+    it('should throw when given invalid providers and serialize the provider', () => {
+      expect(() => Injector.create(<any>[{foo: 'bar', bar: Car}]))
+          .toThrowError('StaticInjectorError[{foo:"bar", bar:Car}]: Unexpected provider');
+    });
+
+    it('should provide itself', () => {
+      const parent = Injector.create([]);
+      const child = Injector.create([], parent);
+
+      expect(child.get(Injector)).toBe(child);
+    });
+
+    it('should throw when no provider defined', () => {
+      const injector = Injector.create([]);
+      expect(() => injector.get('NonExisting'))
+          .toThrowError(
+              'StaticInjectorError[NonExisting]: \n  NullInjectorError: No provider for NonExisting!');
+    });
+
+    it('should show the full path when no provider', () => {
+      const injector =
+          Injector.create([CarWithDashboard.PROVIDER, Engine.PROVIDER, Dashboard.PROVIDER]);
+      expect(() => injector.get(CarWithDashboard))
+          .toThrowError(
+              `StaticInjectorError[${stringify(CarWithDashboard)} -> ${stringify(Dashboard)} -> DashboardSoftware]: \n` +
+              '  NullInjectorError: No provider for DashboardSoftware!');
+    });
+
+    it('should throw when trying to instantiate a cyclic dependency', () => {
+      const injector = Injector.create([Car.PROVIDER, CyclicEngine.PROVIDER]);
+
+      expect(() => injector.get(Car))
+          .toThrowError(
+              `StaticInjectorError[${stringify(Car)} -> ${stringify(Engine)} -> ${stringify(Car)}]: Circular dependency`);
+    });
+
+    it('should show the full path when error happens in a constructor', () => {
+      const error = new Error('MyError');
+      const injector = Injector.create(
+          [Car.PROVIDER, {provide: Engine, useFactory: () => { throw error; }, deps: []}]);
+
+      try {
+        injector.get(Car);
+        throw 'Must throw';
+      } catch (e) {
+        expect(e).toBe(error);
+        expect(e.message).toContain(
+            `StaticInjectorError[${stringify(Car)} -> Engine]: \n  MyError`);
+        expect(e.ngTokenPath[0]).toEqual(Car);
+        expect(e.ngTokenPath[1]).toEqual(Engine);
+      }
+    });
+
+    it('should instantiate an object after a failed attempt', () => {
+      let isBroken = true;
+
+      const injector = Injector.create([
+        Car.PROVIDER, {
+          provide: Engine,
+          useFactory: (() => isBroken ? new BrokenEngine() : new Engine()),
+          deps: []
+        }
+      ]);
+
+      expect(() => injector.get(Car))
+          .toThrowError('StaticInjectorError[Car -> Engine]: \n  Broken Engine');
+
+      isBroken = false;
+
+      expect(injector.get(Car)).toBeAnInstanceOf(Car);
+    });
+
+    it('should support null/undefined values', () => {
+      const injector = Injector.create([
+        {provide: 'null', useValue: null},
+        {provide: 'undefined', useValue: undefined},
+      ]);
+      expect(injector.get('null')).toBe(null);
+      expect(injector.get('undefined')).toBe(undefined);
+    });
+
+  });
+
+
+  describe('child', () => {
+    it('should load instances from parent injector', () => {
+      const parent = Injector.create([Engine.PROVIDER]);
+      const child = Injector.create([], parent);
+
+      const engineFromParent = parent.get(Engine);
+      const engineFromChild = child.get(Engine);
+
+      expect(engineFromChild).toBe(engineFromParent);
+    });
+
+    it('should not use the child providers when resolving the dependencies of a parent provider',
+       () => {
+         const parent = Injector.create([Car.PROVIDER, Engine.PROVIDER]);
+         const child = Injector.create([TurboEngine.PROVIDER], parent);
+
+         const carFromChild = child.get<Car>(Car);
+         expect(carFromChild.engine).toBeAnInstanceOf(Engine);
+       });
+
+    it('should create new instance in a child injector', () => {
+      const parent = Injector.create([Engine.PROVIDER]);
+      const child = Injector.create([TurboEngine.PROVIDER], parent);
+
+      const engineFromParent = parent.get(Engine);
+      const engineFromChild = child.get(Engine);
+
+      expect(engineFromParent).not.toBe(engineFromChild);
+      expect(engineFromChild).toBeAnInstanceOf(TurboEngine);
+    });
+
+    it('should give access to parent', () => {
+      const parent = Injector.create([]);
+      const child = Injector.create([], parent);
+      expect((child as any).parent).toBe(parent);
+    });
+  });
+
+
+  describe('instantiate', () => {
+    it('should instantiate an object in the context of the injector', () => {
+      const inj = Injector.create([Engine.PROVIDER]);
+      const childInj = Injector.create([Car.PROVIDER], inj);
+      const car = childInj.get<Car>(Car);
+      expect(car).toBeAnInstanceOf(Car);
+      expect(car.engine).toBe(inj.get(Engine));
+    });
+  });
+
+  describe('dependency resolution', () => {
+    describe('@Self()', () => {
+      it('should return a dependency from self', () => {
+        const inj = Injector.create([
+          Engine.PROVIDER,
+          {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]}
+        ]);
+
+        expect(inj.get(Car)).toBeAnInstanceOf(Car);
+      });
+
+      it('should throw when not requested provider on self', () => {
+        const parent = Injector.create([Engine.PROVIDER]);
+        const child = Injector.create(
+            [{provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]}],
+            parent);
+
+        expect(() => child.get(Car))
+            .toThrowError(
+                `StaticInjectorError[${stringify(Car)} -> ${stringify(Engine)}]: \n` +
+                '  NullInjectorError: No provider for Engine!');
+      });
+    });
+
+    describe('default', () => {
+      it('should skip self', () => {
+        const parent = Injector.create([Engine.PROVIDER]);
+        const child = Injector.create(
+            [
+              TurboEngine.PROVIDER,
+              {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[SkipSelf, Engine]]}
+            ],
+            parent);
+
+        expect(child.get<Car>(Car).engine).toBeAnInstanceOf(Engine);
+      });
+    });
+  });
+
+  describe('resolve', () => {
+    it('should throw when mixing multi providers with regular providers', () => {
+      expect(() => {
+        Injector.create(
+            [{provide: Engine, useClass: BrokenEngine, deps: [], multi: true}, Engine.PROVIDER]);
+      }).toThrowError(/Cannot mix multi providers and regular providers/);
+
+      expect(() => {
+        Injector.create(
+            [Engine.PROVIDER, {provide: Engine, useClass: BrokenEngine, deps: [], multi: true}]);
+      }).toThrowError(/Cannot mix multi providers and regular providers/);
+    });
+
+    it('should resolve forward references', () => {
+      const injector = Injector.create([
+        [{provide: forwardRef(() => BrokenEngine), useClass: forwardRef(() => Engine), deps: []}], {
+          provide: forwardRef(() => String),
+          useFactory: (e: any) => e,
+          deps: [forwardRef(() => BrokenEngine)]
+        }
+      ]);
+      expect(injector.get(String)).toBeAnInstanceOf(Engine);
+      expect(injector.get(BrokenEngine)).toBeAnInstanceOf(Engine);
+    });
+
+    it('should support overriding factory dependencies with dependency annotations', () => {
+      const injector = Injector.create([
+        Engine.PROVIDER,
+        {provide: 'token', useFactory: (e: any) => e, deps: [[new Inject(Engine)]]}
+      ]);
+
+      expect(injector.get('token')).toBeAnInstanceOf(Engine);
+    });
+  });
+
+  describe('displayName', () => {
+    it('should work', () => {
+      expect(Injector.create([Engine.PROVIDER, {provide: BrokenEngine, useValue: null}]).toString())
+          .toEqual('StaticInjector[Injector, InjectionToken INJECTOR, Engine, BrokenEngine]');
+    });
+  });
+}
diff --git a/packages/core/test/directive_lifecycle_integration_spec.ts b/packages/core/test/directive_lifecycle_integration_spec.ts
new file mode 100644
index 000000000000..83c7893a0064
--- /dev/null
+++ b/packages/core/test/directive_lifecycle_integration_spec.ts
@@ -0,0 +1,86 @@
+/**
+ * @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 {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnInit} from '@angular/core';
+import {Component, Directive} from '@angular/core/src/metadata';
+import {TestBed, inject} from '@angular/core/testing';
+import {Log} from '@angular/core/testing/src/testing_internal';
+
+{
+  describe('directive lifecycle integration spec', () => {
+    let log: Log;
+
+    beforeEach(() => {
+      TestBed
+          .configureTestingModule({
+            declarations: [
+              LifecycleCmp,
+              LifecycleDir,
+              MyComp5,
+            ],
+            providers: [Log]
+          })
+          .overrideComponent(MyComp5, {set: {template: '<div [field]="123" lifecycle></div>'}});
+    });
+
+    beforeEach(inject([Log], (_log: any) => { log = _log; }));
+
+    it('should invoke lifecycle methods ngOnChanges > ngOnInit > ngDoCheck > ngAfterContentChecked',
+       () => {
+         const fixture = TestBed.createComponent(MyComp5);
+         fixture.detectChanges();
+
+         expect(log.result())
+             .toEqual(
+                 'ngOnChanges; ngOnInit; ngDoCheck; ngAfterContentInit; ngAfterContentChecked; child_ngDoCheck; ' +
+                 'ngAfterViewInit; ngAfterViewChecked');
+
+         log.clear();
+         fixture.detectChanges();
+
+         expect(log.result())
+             .toEqual('ngDoCheck; ngAfterContentChecked; child_ngDoCheck; ngAfterViewChecked');
+       });
+  });
+}
+
+
+@Directive({selector: '[lifecycle-dir]'})
+class LifecycleDir implements DoCheck {
+  constructor(private _log: Log) {}
+  ngDoCheck() { this._log.add('child_ngDoCheck'); }
+}
+
+@Component({
+  selector: '[lifecycle]',
+  inputs: ['field'],
+  template: `<div lifecycle-dir></div>`,
+})
+class LifecycleCmp implements OnChanges,
+    OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked {
+  field: any /** TODO #9100 */;
+  constructor(private _log: Log) {}
+
+  ngOnChanges(_: any /** TODO #9100 */) { this._log.add('ngOnChanges'); }
+
+  ngOnInit() { this._log.add('ngOnInit'); }
+
+  ngDoCheck() { this._log.add('ngDoCheck'); }
+
+  ngAfterContentInit() { this._log.add('ngAfterContentInit'); }
+
+  ngAfterContentChecked() { this._log.add('ngAfterContentChecked'); }
+
+  ngAfterViewInit() { this._log.add('ngAfterViewInit'); }
+
+  ngAfterViewChecked() { this._log.add('ngAfterViewChecked'); }
+}
+
+@Component({selector: 'my-comp'})
+class MyComp5 {
+}
diff --git a/packages/core/test/dom/dom_adapter_spec.ts b/packages/core/test/dom/dom_adapter_spec.ts
new file mode 100644
index 000000000000..194b192d0358
--- /dev/null
+++ b/packages/core/test/dom/dom_adapter_spec.ts
@@ -0,0 +1,129 @@
+/**
+ * @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 {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {el, stringifyElement} from '@angular/platform-browser/testing/src/browser_util';
+
+{
+  describe('dom adapter', () => {
+    let defaultDoc: any;
+    beforeEach(() => {
+      defaultDoc = getDOM().supportsDOMEvents() ? document : getDOM().createHtmlDocument();
+    });
+
+    it('should not coalesque text nodes', () => {
+      const el1 = el('<div>a</div>');
+      const el2 = el('<div>b</div>');
+      getDOM().appendChild(el2, getDOM().firstChild(el1));
+      expect(getDOM().childNodes(el2).length).toBe(2);
+
+      const el2Clone = getDOM().clone(el2);
+      expect(getDOM().childNodes(el2Clone).length).toBe(2);
+    });
+
+    it('should clone correctly', () => {
+      const el1 = el('<div x="y">a<span>b</span></div>');
+      const clone = getDOM().clone(el1);
+
+      expect(clone).not.toBe(el1);
+      getDOM().setAttribute(clone, 'test', '1');
+      expect(stringifyElement(clone)).toEqual('<div test="1" x="y">a<span>b</span></div>');
+      expect(getDOM().getAttribute(el1, 'test')).toBeFalsy();
+
+      const cNodes = getDOM().childNodes(clone);
+      const firstChild = cNodes[0];
+      const secondChild = cNodes[1];
+      expect(getDOM().parentElement(firstChild)).toBe(clone);
+      expect(getDOM().nextSibling(firstChild)).toBe(secondChild);
+      expect(getDOM().isTextNode(firstChild)).toBe(true);
+
+      expect(getDOM().parentElement(secondChild)).toBe(clone);
+      expect(getDOM().nextSibling(secondChild)).toBeFalsy();
+      expect(getDOM().isElementNode(secondChild)).toBe(true);
+
+    });
+
+    it('should be able to create text nodes and use them with the other APIs', () => {
+      const t = getDOM().createTextNode('hello');
+      expect(getDOM().isTextNode(t)).toBe(true);
+      const d = getDOM().createElement('div');
+      getDOM().appendChild(d, t);
+      expect(getDOM().getInnerHTML(d)).toEqual('hello');
+    });
+
+    it('should set className via the class attribute', () => {
+      const d = getDOM().createElement('div');
+      getDOM().setAttribute(d, 'class', 'class1');
+      expect(d.className).toEqual('class1');
+    });
+
+    it('should allow to remove nodes without parents', () => {
+      const d = getDOM().createElement('div');
+      expect(() => getDOM().remove(d)).not.toThrow();
+    });
+
+    it('should parse styles with urls correctly', () => {
+      const d = getDOM().createElement('div');
+      getDOM().setStyle(d, 'background-url', 'url(http://test.com/bg.jpg)');
+      expect(getDOM().getStyle(d, 'background-url')).toBe('url(http://test.com/bg.jpg)');
+    });
+
+    // Test for regression caused by angular/angular#22536
+    it('should parse styles correctly following the spec', () => {
+      const d = getDOM().createElement('div');
+      getDOM().setStyle(d, 'background-image', 'url("paper.gif")');
+      expect(d.style.backgroundImage).toBe('url("paper.gif")');
+      expect(d.style.getPropertyValue('background-image')).toBe('url("paper.gif")');
+      expect(getDOM().getStyle(d, 'background-image')).toBe('url("paper.gif")');
+    });
+
+    it('should parse camel-case styles correctly', () => {
+      const d = getDOM().createElement('div');
+      getDOM().setStyle(d, 'marginRight', '10px');
+      expect(getDOM().getStyle(d, 'margin-right')).toBe('10px');
+    });
+
+    if (getDOM().supportsDOMEvents()) {
+      describe('getBaseHref', () => {
+        beforeEach(() => getDOM().resetBaseElement());
+
+        it('should return null if base element is absent',
+           () => { expect(getDOM().getBaseHref(defaultDoc)).toBeNull(); });
+
+        it('should return the value of the base element', () => {
+          const baseEl = getDOM().createElement('base');
+          getDOM().setAttribute(baseEl, 'href', '/drop/bass/connon/');
+          const headEl = defaultDoc.head;
+          getDOM().appendChild(headEl, baseEl);
+
+          const baseHref = getDOM().getBaseHref(defaultDoc);
+          getDOM().removeChild(headEl, baseEl);
+          getDOM().resetBaseElement();
+
+          expect(baseHref).toEqual('/drop/bass/connon/');
+        });
+
+        it('should return a relative url', () => {
+          const baseEl = getDOM().createElement('base');
+          getDOM().setAttribute(baseEl, 'href', 'base');
+          const headEl = defaultDoc.head;
+          getDOM().appendChild(headEl, baseEl);
+
+          const baseHref = getDOM().getBaseHref(defaultDoc) !;
+          getDOM().removeChild(headEl, baseEl);
+          getDOM().resetBaseElement();
+
+          expect(baseHref.endsWith('/base')).toBe(true);
+        });
+      });
+    }
+
+
+  });
+}
diff --git a/packages/core/test/dom/shim_spec.ts b/packages/core/test/dom/shim_spec.ts
new file mode 100644
index 000000000000..07b2bd1738df
--- /dev/null
+++ b/packages/core/test/dom/shim_spec.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+{
+  describe('Shim', () => {
+
+    it('should provide correct function.name ', () => {
+      const functionWithoutName = identity(() => function(_: any /** TODO #9100 */) {});
+      function foo(_: any /** TODO #9100 */) {}
+
+      expect((<any>functionWithoutName).name).toBeFalsy();
+      expect((<any>foo).name).toEqual('foo');
+    });
+
+  });
+}
+
+function identity(a: any /** TODO #9100 */) {
+  return a;
+}
diff --git a/packages/core/test/error_handler_spec.ts b/packages/core/test/error_handler_spec.ts
new file mode 100644
index 000000000000..69d424954414
--- /dev/null
+++ b/packages/core/test/error_handler_spec.ts
@@ -0,0 +1,82 @@
+/**
+ * @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 {ERROR_DEBUG_CONTEXT, ERROR_LOGGER, ERROR_TYPE} from '@angular/core/src/errors';
+
+import {ErrorHandler, wrappedError} from '../src/error_handler';
+
+class MockConsole {
+  res: any[][] = [];
+  error(...s: any[]): void { this.res.push(s); }
+}
+
+(function() {
+  function errorToString(error: any) {
+    const logger = new MockConsole();
+    const errorHandler = new ErrorHandler();
+    (errorHandler as any)._console = logger as any;
+    errorHandler.handleError(error);
+    return logger.res.map(line => line.join('#')).join('\n');
+  }
+
+  describe('ErrorHandler', () => {
+    it('should output exception', () => {
+      const e = errorToString(new Error('message!'));
+      expect(e).toContain('message!');
+    });
+
+    describe('context', () => {
+      it('should print nested context', () => {
+        const cause = new Error('message!');
+        const context = { source: 'context!', toString() { return 'Context'; } } as any;
+        const original = debugError(cause, context);
+        const e = errorToString(wrappedError('message', original));
+        expect(e).toEqual(`ERROR#Error: message caused by: Error in context! caused by: message!
+ORIGINAL ERROR#Error: message!
+ERROR CONTEXT#Context`);
+      });
+    });
+
+    describe('original exception', () => {
+      it('should print original exception message if available (original is Error)', () => {
+        const realOriginal = new Error('inner');
+        const original = wrappedError('wrapped', realOriginal);
+        const e = errorToString(wrappedError('wrappedwrapped', original));
+        expect(e).toContain('inner');
+      });
+
+      it('should print original exception message if available (original is not Error)', () => {
+        const realOriginal = new Error('custom');
+        const original = wrappedError('wrapped', realOriginal);
+        const e = errorToString(wrappedError('wrappedwrapped', original));
+        expect(e).toContain('custom');
+      });
+    });
+
+    it('should use the error logger on the error', () => {
+      const err = new Error('test');
+      const console = new MockConsole();
+      const errorHandler = new ErrorHandler();
+      (errorHandler as any)._console = console as any;
+      const logger = jasmine.createSpy('logger');
+      (err as any)[ERROR_LOGGER] = logger;
+
+      errorHandler.handleError(err);
+
+      expect(console.res).toEqual([]);
+      expect(logger).toHaveBeenCalledWith(console, 'ERROR', err);
+    });
+  });
+})();
+
+function debugError(originalError: any, context: any): Error {
+  const error = wrappedError(`Error in ${context.source}`, originalError);
+  (error as any)[ERROR_DEBUG_CONTEXT] = context;
+  (error as any)[ERROR_TYPE] = debugError;
+  return error;
+}
diff --git a/packages/core/test/event_emitter_spec.ts b/packages/core/test/event_emitter_spec.ts
new file mode 100644
index 000000000000..0b46ecc4eca4
--- /dev/null
+++ b/packages/core/test/event_emitter_spec.ts
@@ -0,0 +1,188 @@
+/**
+ * @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 {AsyncTestCompleter, beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {filter} from 'rxjs/operators';
+
+import {EventEmitter} from '../src/event_emitter';
+
+{
+  describe('EventEmitter', () => {
+    let emitter: EventEmitter<any>;
+
+    beforeEach(() => { emitter = new EventEmitter(); });
+
+    it('should call the next callback',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         emitter.subscribe({
+           next: (value: any) => {
+             expect(value).toEqual(99);
+             async.done();
+           }
+         });
+         emitter.emit(99);
+       }));
+
+    it('should call the throw callback',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         emitter.subscribe({
+           next: () => {},
+           error: (error: any) => {
+             expect(error).toEqual('Boom');
+             async.done();
+           }
+         });
+         emitter.error('Boom');
+       }));
+
+    it('should work when no throw callback is provided',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         emitter.subscribe({next: () => {}, error: (_: any) => { async.done(); }});
+         emitter.error('Boom');
+       }));
+
+    it('should call the return callback',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         emitter.subscribe(
+             {next: () => {}, error: (_: any) => {}, complete: () => { async.done(); }});
+         emitter.complete();
+       }));
+
+    it('should subscribe to the wrapper synchronously', () => {
+      let called = false;
+      emitter.subscribe({next: (value: any) => { called = true; }});
+      emitter.emit(99);
+
+      expect(called).toBe(true);
+    });
+
+    it('delivers next and error events synchronously',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const log: any[] /** TODO #9100 */ = [];
+
+         emitter.subscribe({
+           next: (x: any) => {
+             log.push(x);
+             expect(log).toEqual([1, 2]);
+           },
+           error: (err: any) => {
+             log.push(err);
+             expect(log).toEqual([1, 2, 3, 4]);
+             async.done();
+           }
+         });
+         log.push(1);
+         emitter.emit(2);
+         log.push(3);
+         emitter.error(4);
+         log.push(5);
+       }));
+
+    it('delivers next and complete events synchronously', () => {
+      const log: any[] /** TODO #9100 */ = [];
+
+      emitter.subscribe({
+        next: (x: any) => {
+          log.push(x);
+          expect(log).toEqual([1, 2]);
+        },
+        error: null,
+        complete: () => {
+          log.push(4);
+          expect(log).toEqual([1, 2, 3, 4]);
+        }
+      });
+      log.push(1);
+      emitter.emit(2);
+      log.push(3);
+      emitter.complete();
+      log.push(5);
+      expect(log).toEqual([1, 2, 3, 4, 5]);
+    });
+
+    it('delivers events asynchronously when forced to async mode',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const e = new EventEmitter(true);
+         const log: any[] /** TODO #9100 */ = [];
+         e.subscribe((x: any) => {
+           log.push(x);
+           expect(log).toEqual([1, 3, 2]);
+           async.done();
+         });
+         log.push(1);
+         e.emit(2);
+         log.push(3);
+
+       }));
+
+    it('reports whether it has subscribers', () => {
+      const e = new EventEmitter(false);
+      expect(e.observers.length > 0).toBe(false);
+      e.subscribe({next: () => {}});
+      expect(e.observers.length > 0).toBe(true);
+    });
+
+    it('remove a subscriber subscribed directly to EventEmitter', () => {
+      const sub = emitter.subscribe();
+      expect(emitter.observers.length).toBe(1);
+      sub.unsubscribe();
+      expect(emitter.observers.length).toBe(0);
+    });
+
+    it('remove a subscriber subscribed after applying operators with pipe()', () => {
+      const sub = emitter.pipe(filter(() => true)).subscribe();
+      expect(emitter.observers.length).toBe(1);
+      sub.unsubscribe();
+      expect(emitter.observers.length).toBe(0);
+    });
+
+    it('unsubscribing a subscriber invokes the dispose method', () => {
+      inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+        const sub = emitter.subscribe();
+        sub.add(() => async.done());
+        sub.unsubscribe();
+      });
+    });
+
+    it('unsubscribing a subscriber after applying operators with pipe() invokes the dispose method',
+       () => {
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const sub = emitter.pipe(filter(() => true)).subscribe();
+           sub.add(() => async.done());
+           sub.unsubscribe();
+         });
+       });
+
+    it('error thrown inside an Rx chain propagates to the error handler and disposes the chain',
+       () => {
+         let errorPropagated = false;
+         emitter.pipe(filter(() => { throw new Error(); }), )
+             .subscribe(() => {}, err => errorPropagated = true, );
+
+         emitter.next(1);
+
+         expect(errorPropagated).toBe(true);
+         expect(emitter.observers.length).toBe(0);
+       });
+
+    it('error sent by EventEmitter should dispose the Rx chain and remove subscribers', () => {
+      let errorPropagated = false;
+      emitter.pipe(filter(() => true)).subscribe(() => {}, err => errorPropagated = true, );
+
+      emitter.error(1);
+
+      expect(errorPropagated).toBe(true);
+      expect(emitter.observers.length).toBe(0);
+    });
+
+    // TODO: vsavkin: add tests cases
+    // should call dispose on the subscription if generator returns {done:true}
+    // should call dispose on the subscription on throw
+    // should call dispose on the subscription on return
+  });
+}
diff --git a/packages/core/test/fake_async_spec.ts b/packages/core/test/fake_async_spec.ts
new file mode 100644
index 000000000000..d40a915e1953
--- /dev/null
+++ b/packages/core/test/fake_async_spec.ts
@@ -0,0 +1,361 @@
+/**
+ * @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 {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';
+
+import {Parser} from '../../compiler/src/expression_parser/parser';
+
+
+const resolvedPromise = Promise.resolve(null);
+const ProxyZoneSpec: {assertPresent: () => void} = (Zone as any)['ProxyZoneSpec'];
+
+{
+  describe('fake async', () => {
+    it('should run synchronous code', () => {
+      let ran = false;
+      fakeAsync(() => { ran = true; })();
+
+      expect(ran).toEqual(true);
+    });
+
+    it('should pass arguments to the wrapped function', () => {
+      fakeAsync((foo: any /** TODO #9100 */, bar: any /** TODO #9100 */) => {
+        expect(foo).toEqual('foo');
+        expect(bar).toEqual('bar');
+      })('foo', 'bar');
+    });
+
+    it('should work with inject()', fakeAsync(inject([Parser], (parser: any /** TODO #9100 */) => {
+         expect(parser).toBeAnInstanceOf(Parser);
+       })));
+
+    it('should throw on nested calls', () => {
+      expect(() => {
+        fakeAsync(() => { fakeAsync((): any /** TODO #9100 */ => null)(); })();
+      }).toThrowError('fakeAsync() calls can not be nested');
+    });
+
+    it('should flush microtasks before returning', () => {
+      let thenRan = false;
+
+      fakeAsync(() => { resolvedPromise.then(_ => { thenRan = true; }); })();
+
+      expect(thenRan).toEqual(true);
+    });
+
+
+    it('should propagate the return value',
+       () => { expect(fakeAsync(() => 'foo')()).toEqual('foo'); });
+
+    describe('Promise', () => {
+      it('should run asynchronous code', fakeAsync(() => {
+           let thenRan = false;
+           resolvedPromise.then((_) => { thenRan = true; });
+
+           expect(thenRan).toEqual(false);
+
+           flushMicrotasks();
+           expect(thenRan).toEqual(true);
+         }));
+
+      it('should run chained thens', fakeAsync(() => {
+           const log = new Log();
+
+           resolvedPromise.then((_) => log.add(1)).then((_) => log.add(2));
+
+           expect(log.result()).toEqual('');
+
+           flushMicrotasks();
+           expect(log.result()).toEqual('1; 2');
+         }));
+
+      it('should run Promise created in Promise', fakeAsync(() => {
+           const log = new Log();
+
+           resolvedPromise.then((_) => {
+             log.add(1);
+             resolvedPromise.then((_) => log.add(2));
+           });
+
+           expect(log.result()).toEqual('');
+
+           flushMicrotasks();
+           expect(log.result()).toEqual('1; 2');
+         }));
+
+      it('should complain if the test throws an exception during async calls', () => {
+        expect(() => {
+          fakeAsync(() => {
+            resolvedPromise.then((_) => { throw new Error('async'); });
+            flushMicrotasks();
+          })();
+        }).toThrowError(/Uncaught \(in promise\): Error: async/);
+      });
+
+      it('should complain if a test throws an exception', () => {
+        expect(() => { fakeAsync(() => { throw new Error('sync'); })(); }).toThrowError('sync');
+      });
+
+    });
+
+    describe('timers', () => {
+      it('should run queued zero duration timer on zero tick', fakeAsync(() => {
+           let ran = false;
+           setTimeout(() => { ran = true; }, 0);
+
+           expect(ran).toEqual(false);
+
+           tick();
+           expect(ran).toEqual(true);
+         }));
+
+
+      it('should run queued timer after sufficient clock ticks', fakeAsync(() => {
+           let ran = false;
+           setTimeout(() => { ran = true; }, 10);
+
+           tick(6);
+           expect(ran).toEqual(false);
+
+           tick(6);
+           expect(ran).toEqual(true);
+         }));
+
+      it('should run queued timer only once', fakeAsync(() => {
+           let cycles = 0;
+           setTimeout(() => { cycles++; }, 10);
+
+           tick(10);
+           expect(cycles).toEqual(1);
+
+           tick(10);
+           expect(cycles).toEqual(1);
+
+           tick(10);
+           expect(cycles).toEqual(1);
+         }));
+
+      it('should not run cancelled timer', fakeAsync(() => {
+           let ran = false;
+           const id = setTimeout(() => { ran = true; }, 10);
+           clearTimeout(id);
+
+           tick(10);
+           expect(ran).toEqual(false);
+         }));
+
+      it('should throw an error on dangling timers', () => {
+        expect(() => {
+          fakeAsync(() => { setTimeout(() => {}, 10); })();
+        }).toThrowError('1 timer(s) still in the queue.');
+      });
+
+      it('should throw an error on dangling periodic timers', () => {
+        expect(() => {
+          fakeAsync(() => { setInterval(() => {}, 10); })();
+        }).toThrowError('1 periodic timer(s) still in the queue.');
+      });
+
+      it('should run periodic timers', fakeAsync(() => {
+           let cycles = 0;
+           const id = setInterval(() => { cycles++; }, 10);
+
+           tick(10);
+           expect(cycles).toEqual(1);
+
+           tick(10);
+           expect(cycles).toEqual(2);
+
+           tick(10);
+           expect(cycles).toEqual(3);
+           clearInterval(id);
+         }));
+
+      it('should not run cancelled periodic timer', fakeAsync(() => {
+           let ran = false;
+           const id = setInterval(() => { ran = true; }, 10);
+           clearInterval(id);
+
+           tick(10);
+           expect(ran).toEqual(false);
+         }));
+
+      it('should be able to cancel periodic timers from a callback', fakeAsync(() => {
+           let cycles = 0;
+           let id: any /** TODO #9100 */;
+
+           id = setInterval(() => {
+             cycles++;
+             clearInterval(id);
+           }, 10);
+
+           tick(10);
+           expect(cycles).toEqual(1);
+
+           tick(10);
+           expect(cycles).toEqual(1);
+         }));
+
+      it('should clear periodic timers', fakeAsync(() => {
+           let cycles = 0;
+           const id = setInterval(() => { cycles++; }, 10);
+
+           tick(10);
+           expect(cycles).toEqual(1);
+
+           discardPeriodicTasks();
+
+           // Tick once to clear out the timer which already started.
+           tick(10);
+           expect(cycles).toEqual(2);
+
+           tick(10);
+           // Nothing should change
+           expect(cycles).toEqual(2);
+         }));
+
+      it('should process microtasks before timers', fakeAsync(() => {
+           const log = new Log();
+
+           resolvedPromise.then((_) => log.add('microtask'));
+
+           setTimeout(() => log.add('timer'), 9);
+
+           const id = setInterval(() => log.add('periodic timer'), 10);
+
+           expect(log.result()).toEqual('');
+
+           tick(10);
+           expect(log.result()).toEqual('microtask; timer; periodic timer');
+           clearInterval(id);
+         }));
+
+      it('should process micro-tasks created in timers before next timers', fakeAsync(() => {
+           const log = new Log();
+
+           resolvedPromise.then((_) => log.add('microtask'));
+
+           setTimeout(() => {
+             log.add('timer');
+             resolvedPromise.then((_) => log.add('t microtask'));
+           }, 9);
+
+           const id = setInterval(() => {
+             log.add('periodic timer');
+             resolvedPromise.then((_) => log.add('pt microtask'));
+           }, 10);
+
+           tick(10);
+           expect(log.result())
+               .toEqual('microtask; timer; t microtask; periodic timer; pt microtask');
+
+           tick(10);
+           expect(log.result())
+               .toEqual(
+                   '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', () => {
+      it('calling flushMicrotasks should throw', () => {
+        expect(() => {
+          flushMicrotasks();
+        }).toThrowError('The code should be running in the fakeAsync zone to call this function');
+      });
+
+      it('calling tick should throw', () => {
+        expect(() => {
+          tick();
+        }).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();
+        }).toThrowError('The code should be running in the fakeAsync zone to call this function');
+      });
+    });
+
+    describe('only one `fakeAsync` zone per test', () => {
+      let zoneInBeforeEach: Zone;
+      let zoneInTest1: Zone;
+      beforeEach(fakeAsync(() => { zoneInBeforeEach = Zone.current; }));
+
+      it('should use the same zone as in beforeEach', fakeAsync(() => {
+           zoneInTest1 = Zone.current;
+           expect(zoneInTest1).toBe(zoneInBeforeEach);
+         }));
+    });
+  });
+
+  describe('ProxyZone', () => {
+    beforeEach(() => { ProxyZoneSpec.assertPresent(); });
+
+    afterEach(() => { ProxyZoneSpec.assertPresent(); });
+
+    it('should allow fakeAsync zone to retroactively set a zoneSpec outside of fakeAsync', () => {
+      ProxyZoneSpec.assertPresent();
+      let state: string = 'not run';
+      const testZone = Zone.current.fork({name: 'test-zone'});
+      (fakeAsync(() => {
+        testZone.run(() => {
+          Promise.resolve('works').then((v) => state = v);
+          expect(state).toEqual('not run');
+          flushMicrotasks();
+          expect(state).toEqual('works');
+        });
+      }))();
+      expect(state).toEqual('works');
+    });
+  });
+}
diff --git a/packages/core/test/forward_ref_integration_spec.ts b/packages/core/test/forward_ref_integration_spec.ts
new file mode 100644
index 000000000000..798870031c11
--- /dev/null
+++ b/packages/core/test/forward_ref_integration_spec.ts
@@ -0,0 +1,67 @@
+/**
+ * @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, ContentChildren, Directive, Inject, NO_ERRORS_SCHEMA, NgModule, QueryList, asNativeElements, forwardRef} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('forwardRef integration', function() {
+    beforeEach(() => { TestBed.configureTestingModule({imports: [Module], declarations: [App]}); });
+
+    it('should instantiate components which are declared using forwardRef', () => {
+      const a = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]}).createComponent(App);
+      a.detectChanges();
+      expect(asNativeElements(a.debugElement.children)).toHaveText('frame(lock)');
+      expect(TestBed.get(ModuleFrame)).toBeDefined();
+    });
+  });
+}
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [forwardRef(() => ModuleFrame)],
+  declarations: [forwardRef(() => Door), forwardRef(() => Lock)],
+  exports: [forwardRef(() => Door), forwardRef(() => Lock)]
+})
+class Module {
+}
+
+@Component({
+  selector: 'app',
+  viewProviders: [forwardRef(() => Frame)],
+  template: `<door><lock></lock></door>`,
+})
+class App {
+}
+
+@Component({
+  selector: 'lock',
+  template: `{{frame.name}}(<span *ngFor="let  lock of locks">{{lock.name}}</span>)`,
+})
+class Door {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(forwardRef(() => Lock)) locks !: QueryList<Lock>;
+  frame: Frame;
+
+  constructor(@Inject(forwardRef(() => Frame)) frame: Frame) { this.frame = frame; }
+}
+
+class Frame {
+  name: string = 'frame';
+}
+
+class ModuleFrame {
+  name: string = 'moduleFram';
+}
+
+@Directive({selector: 'lock'})
+class Lock {
+  name: string = 'lock';
+}
diff --git a/packages/core/test/ivy_local_empty_spec.ts b/packages/core/test/ivy_local_empty_spec.ts
new file mode 100644
index 000000000000..e74dd0455a0a
--- /dev/null
+++ b/packages/core/test/ivy_local_empty_spec.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
+ */
+
+/*
+ * This file exists to have at least one test target that can pass with --define=compile=local.
+ *
+ * TODO(alxhub): Clean up once actual Angular tests start passing with Ivy/AOT.
+ */
+
+describe('empty test', () => {
+  it('should pass without doing anything', () => {
+                                               // If this fails, you probably need a new computer.
+                                           });
+});
diff --git a/packages/core/test/linker/change_detection_integration_spec.ts b/packages/core/test/linker/change_detection_integration_spec.ts
new file mode 100644
index 000000000000..2a4f42deb43d
--- /dev/null
+++ b/packages/core/test/linker/change_detection_integration_spec.ts
@@ -0,0 +1,2017 @@
+/**
+ * @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 {DomElementSchemaRegistry, ElementSchemaRegistry, ResourceLoader, UrlResolver} from '@angular/compiler';
+import {MockResourceLoader, MockSchemaRegistry} from '@angular/compiler/testing';
+import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DebugElement, Directive, DoCheck, EventEmitter, HostBinding, Inject, Injectable, Input, OnChanges, OnDestroy, OnInit, Output, Pipe, PipeTransform, Provider, 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';
+
+export function createUrlResolverWithoutPackagePrefix(): UrlResolver {
+  return new UrlResolver();
+}
+
+const TEST_COMPILER_PROVIDERS: Provider[] = [
+  {provide: ElementSchemaRegistry, useValue: new MockSchemaRegistry({}, {}, {}, [], [])},
+  {provide: ResourceLoader, useClass: MockResourceLoader, deps: []},
+  {provide: UrlResolver, useFactory: createUrlResolverWithoutPackagePrefix, deps: []}
+];
+
+
+(function() {
+  let elSchema: MockSchemaRegistry;
+  let renderLog: RenderLog;
+  let directiveLog: DirectiveLog;
+
+  function createCompFixture<T>(template: string): ComponentFixture<TestComponent>;
+  function createCompFixture<T>(template: string, compType: Type<T>): ComponentFixture<T>;
+  function createCompFixture<T>(
+      template: string, compType: Type<T> = <any>TestComponent): ComponentFixture<T> {
+    TestBed.overrideComponent(compType, {set: new Component({template})});
+
+    initHelpers();
+
+    return TestBed.createComponent(compType);
+  }
+
+  function initHelpers(): void {
+    elSchema = TestBed.get(ElementSchemaRegistry);
+    renderLog = TestBed.get(RenderLog);
+    directiveLog = TestBed.get(DirectiveLog);
+    elSchema.existingProperties['someProp'] = true;
+    patchLoggingRenderer2(TestBed.get(RendererFactory2), renderLog);
+  }
+
+  function queryDirs(el: DebugElement, dirType: Type<any>): any {
+    const nodes = el.queryAllNodes(By.directive(dirType));
+    return nodes.map(node => node.injector.get(dirType));
+  }
+
+  function _bindSimpleProp<T>(bindAttr: string): ComponentFixture<TestComponent>;
+  function _bindSimpleProp<T>(bindAttr: string, compType: Type<T>): ComponentFixture<T>;
+  function _bindSimpleProp<T>(
+      bindAttr: string, compType: Type<T> = <any>TestComponent): ComponentFixture<T> {
+    const template = `<div ${bindAttr}></div>`;
+    return createCompFixture(template, compType);
+  }
+
+  function _bindSimpleValue(expression: any): ComponentFixture<TestComponent>;
+  function _bindSimpleValue<T>(expression: any, compType: Type<T>): ComponentFixture<T>;
+  function _bindSimpleValue<T>(
+      expression: any, compType: Type<T> = <any>TestComponent): ComponentFixture<T> {
+    return _bindSimpleProp(`[someProp]='${expression}'`, compType);
+  }
+
+  function _bindAndCheckSimpleValue(
+      expression: any, compType: Type<any> = TestComponent): string[] {
+    const ctx = _bindSimpleValue(expression, compType);
+    ctx.detectChanges(false);
+    return renderLog.log;
+  }
+
+  describe(`ChangeDetection`, () => {
+    // On CJS fakeAsync is not supported...
+    if (!getDOM().supportsDOMEvents()) return;
+
+    beforeEach(() => {
+      TestBed.configureCompiler({providers: TEST_COMPILER_PROVIDERS});
+      TestBed.configureTestingModule({
+        declarations: [
+          TestData,
+          TestDirective,
+          TestComponent,
+          AnotherComponent,
+          TestLocals,
+          CompWithRef,
+          WrapCompWithRef,
+          EmitterDirective,
+          PushComp,
+          OnDestroyDirective,
+          OrderCheckDirective2,
+          OrderCheckDirective0,
+          OrderCheckDirective1,
+          Gh9882,
+          Uninitialized,
+          Person,
+          PersonHolder,
+          PersonHolderHolder,
+          CountingPipe,
+          CountingImpurePipe,
+          MultiArgPipe,
+          PipeWithOnDestroy,
+          IdentityPipe,
+          WrappedPipe,
+        ],
+        providers: [
+          RenderLog,
+          DirectiveLog,
+        ],
+      });
+    });
+
+    describe('expressions', () => {
+      it('should support literals',
+         fakeAsync(() => { expect(_bindAndCheckSimpleValue(10)).toEqual(['someProp=10']); }));
+
+      it('should strip quotes from literals',
+         fakeAsync(() => { expect(_bindAndCheckSimpleValue('"str"')).toEqual(['someProp=str']); }));
+
+      it('should support newlines in literals', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('"a\n\nb"')).toEqual(['someProp=a\n\nb']);
+         }));
+
+      it('should support + operations',
+         fakeAsync(() => { expect(_bindAndCheckSimpleValue('10 + 2')).toEqual(['someProp=12']); }));
+
+      it('should support - operations',
+         fakeAsync(() => { expect(_bindAndCheckSimpleValue('10 - 2')).toEqual(['someProp=8']); }));
+
+      it('should support * operations',
+         fakeAsync(() => { expect(_bindAndCheckSimpleValue('10 * 2')).toEqual(['someProp=20']); }));
+
+      it('should support / operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('10 / 2')).toEqual([`someProp=${5.0}`]);
+         }));  // dart exp=5.0, js exp=5
+
+      it('should support % operations',
+         fakeAsync(() => { expect(_bindAndCheckSimpleValue('11 % 2')).toEqual(['someProp=1']); }));
+
+      it('should support == operations on identical', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 == 1')).toEqual(['someProp=true']);
+         }));
+
+      it('should support != operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 != 1')).toEqual(['someProp=false']);
+         }));
+
+      it('should support == operations on coerceible', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 == true')).toEqual([`someProp=true`]);
+         }));
+
+      it('should support === operations on identical', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 === 1')).toEqual(['someProp=true']);
+         }));
+
+      it('should support !== operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 !== 1')).toEqual(['someProp=false']);
+         }));
+
+      it('should support === operations on coerceible', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 === true')).toEqual(['someProp=false']);
+         }));
+
+      it('should support true < operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 < 2')).toEqual(['someProp=true']);
+         }));
+
+      it('should support false < operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('2 < 1')).toEqual(['someProp=false']);
+         }));
+
+      it('should support false > operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 > 2')).toEqual(['someProp=false']);
+         }));
+
+      it('should support true > operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('2 > 1')).toEqual(['someProp=true']);
+         }));
+
+      it('should support true <= operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 <= 2')).toEqual(['someProp=true']);
+         }));
+
+      it('should support equal <= operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('2 <= 2')).toEqual(['someProp=true']);
+         }));
+
+      it('should support false <= operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('2 <= 1')).toEqual(['someProp=false']);
+         }));
+
+      it('should support true >= operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('2 >= 1')).toEqual(['someProp=true']);
+         }));
+
+      it('should support equal >= operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('2 >= 2')).toEqual(['someProp=true']);
+         }));
+
+      it('should support false >= operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 >= 2')).toEqual(['someProp=false']);
+         }));
+
+      it('should support true && operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('true && true')).toEqual(['someProp=true']);
+         }));
+
+      it('should support false && operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('true && false')).toEqual(['someProp=false']);
+         }));
+
+      it('should support true || operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('true || false')).toEqual(['someProp=true']);
+         }));
+
+      it('should support false || operations', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('false || false')).toEqual(['someProp=false']);
+         }));
+
+      it('should support negate', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('!true')).toEqual(['someProp=false']);
+         }));
+
+      it('should support double negate', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('!!true')).toEqual(['someProp=true']);
+         }));
+
+      it('should support true conditionals', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 < 2 ? 1 : 2')).toEqual(['someProp=1']);
+         }));
+
+      it('should support false conditionals', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('1 > 2 ? 1 : 2')).toEqual(['someProp=2']);
+         }));
+
+      it('should support keyed access to a list item', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('["foo", "bar"][0]')).toEqual(['someProp=foo']);
+         }));
+
+      it('should support keyed access to a map item', fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('{"foo": "bar"}["foo"]')).toEqual(['someProp=bar']);
+         }));
+
+      it('should report all changes on the first run including uninitialized values',
+         fakeAsync(() => {
+           expect(_bindAndCheckSimpleValue('value', Uninitialized)).toEqual(['someProp=null']);
+         }));
+
+      it('should report all changes on the first run including null values', fakeAsync(() => {
+           const ctx = _bindSimpleValue('a', TestData);
+           ctx.componentInstance.a = null;
+           ctx.detectChanges(false);
+           expect(renderLog.log).toEqual(['someProp=null']);
+         }));
+
+      it('should support simple chained property access', fakeAsync(() => {
+           const ctx = _bindSimpleValue('address.city', Person);
+           ctx.componentInstance.name = 'Victor';
+           ctx.componentInstance.address = new Address('Grenoble');
+           ctx.detectChanges(false);
+           expect(renderLog.log).toEqual(['someProp=Grenoble']);
+         }));
+
+      describe('safe navigation operator', () => {
+        it('should support reading properties of nulls', fakeAsync(() => {
+             const ctx = _bindSimpleValue('address?.city', Person);
+             ctx.componentInstance.address = null !;
+             ctx.detectChanges(false);
+             expect(renderLog.log).toEqual(['someProp=null']);
+           }));
+
+        it('should support calling methods on nulls', fakeAsync(() => {
+             const ctx = _bindSimpleValue('address?.toString()', Person);
+             ctx.componentInstance.address = null !;
+             ctx.detectChanges(false);
+             expect(renderLog.log).toEqual(['someProp=null']);
+           }));
+
+        it('should support reading properties on non nulls', fakeAsync(() => {
+             const ctx = _bindSimpleValue('address?.city', Person);
+             ctx.componentInstance.address = new Address('MTV');
+             ctx.detectChanges(false);
+             expect(renderLog.log).toEqual(['someProp=MTV']);
+           }));
+
+        it('should support calling methods on non nulls', fakeAsync(() => {
+             const ctx = _bindSimpleValue('address?.toString()', Person);
+             ctx.componentInstance.address = new Address('MTV');
+             ctx.detectChanges(false);
+             expect(renderLog.log).toEqual(['someProp=MTV']);
+           }));
+
+        it('should support short-circuting safe navigation', fakeAsync(() => {
+             const ctx = _bindSimpleValue('value?.address.city', PersonHolder);
+             ctx.componentInstance.value = null !;
+             ctx.detectChanges(false);
+             expect(renderLog.log).toEqual(['someProp=null']);
+           }));
+
+        it('should support nested short-circuting safe navigation', fakeAsync(() => {
+             const ctx = _bindSimpleValue('value.value?.address.city', PersonHolderHolder);
+             ctx.componentInstance.value = new PersonHolder();
+             ctx.detectChanges(false);
+             expect(renderLog.log).toEqual(['someProp=null']);
+           }));
+
+        it('should support chained short-circuting safe navigation', fakeAsync(() => {
+             const ctx = _bindSimpleValue('value?.value?.address.city', PersonHolderHolder);
+             ctx.detectChanges(false);
+             expect(renderLog.log).toEqual(['someProp=null']);
+           }));
+
+        it('should support short-circuting array index operations', fakeAsync(() => {
+             const ctx = _bindSimpleValue('value?.phones[0]', PersonHolder);
+             ctx.detectChanges(false);
+             expect(renderLog.log).toEqual(['someProp=null']);
+           }));
+
+        it('should still throw if right-side would throw', fakeAsync(() => {
+             expect(() => {
+               const ctx = _bindSimpleValue('value?.address.city', PersonHolder);
+               const person = new Person();
+               person.address = null !;
+               ctx.componentInstance.value = person;
+               ctx.detectChanges(false);
+             }).toThrow();
+           }));
+      });
+
+      it('should support method calls', fakeAsync(() => {
+           const ctx = _bindSimpleValue('sayHi("Jim")', Person);
+           ctx.detectChanges(false);
+           expect(renderLog.log).toEqual(['someProp=Hi, Jim']);
+         }));
+
+      it('should support function calls', fakeAsync(() => {
+           const ctx = _bindSimpleValue('a()(99)', TestData);
+           ctx.componentInstance.a = () => (a: any) => a;
+           ctx.detectChanges(false);
+           expect(renderLog.log).toEqual(['someProp=99']);
+         }));
+
+      it('should support chained method calls', fakeAsync(() => {
+           const ctx = _bindSimpleValue('address.toString()', Person);
+           ctx.componentInstance.address = new Address('MTV');
+           ctx.detectChanges(false);
+           expect(renderLog.log).toEqual(['someProp=MTV']);
+         }));
+
+      it('should support NaN', fakeAsync(() => {
+           const ctx = _bindSimpleValue('age', Person);
+           ctx.componentInstance.age = NaN;
+           ctx.detectChanges(false);
+
+           expect(renderLog.log).toEqual(['someProp=NaN']);
+           renderLog.clear();
+
+           ctx.detectChanges(false);
+           expect(renderLog.log).toEqual([]);
+         }));
+
+      it('should do simple watching', fakeAsync(() => {
+           const ctx = _bindSimpleValue('name', Person);
+           ctx.componentInstance.name = 'misko';
+
+           ctx.detectChanges(false);
+           expect(renderLog.log).toEqual(['someProp=misko']);
+           renderLog.clear();
+
+           ctx.detectChanges(false);
+           expect(renderLog.log).toEqual([]);
+           renderLog.clear();
+
+           ctx.componentInstance.name = 'Misko';
+           ctx.detectChanges(false);
+           expect(renderLog.log).toEqual(['someProp=Misko']);
+         }));
+
+      it('should support literal array made of literals', fakeAsync(() => {
+           const ctx = _bindSimpleValue('[1, 2]');
+           ctx.detectChanges(false);
+           expect(renderLog.loggedValues).toEqual([[1, 2]]);
+         }));
+
+      it('should support empty literal array', fakeAsync(() => {
+           const ctx = _bindSimpleValue('[]');
+           ctx.detectChanges(false);
+           expect(renderLog.loggedValues).toEqual([[]]);
+         }));
+
+      it('should support literal array made of expressions', fakeAsync(() => {
+           const ctx = _bindSimpleValue('[1, a]', TestData);
+           ctx.componentInstance.a = 2;
+           ctx.detectChanges(false);
+           expect(renderLog.loggedValues).toEqual([[1, 2]]);
+         }));
+
+      it('should not recreate literal arrays unless their content changed', fakeAsync(() => {
+           const ctx = _bindSimpleValue('[1, a]', TestData);
+           ctx.componentInstance.a = 2;
+           ctx.detectChanges(false);
+           ctx.detectChanges(false);
+           ctx.componentInstance.a = 3;
+           ctx.detectChanges(false);
+           ctx.detectChanges(false);
+           expect(renderLog.loggedValues).toEqual([[1, 2], [1, 3]]);
+         }));
+
+      it('should support literal maps made of literals', fakeAsync(() => {
+           const ctx = _bindSimpleValue('{z: 1}');
+           ctx.detectChanges(false);
+           expect(renderLog.loggedValues[0]['z']).toEqual(1);
+         }));
+
+      it('should support empty literal map', fakeAsync(() => {
+           const ctx = _bindSimpleValue('{}');
+           ctx.detectChanges(false);
+           expect(renderLog.loggedValues).toEqual([{}]);
+         }));
+
+      it('should support literal maps made of expressions', fakeAsync(() => {
+           const ctx = _bindSimpleValue('{z: a}');
+           ctx.componentInstance.a = 1;
+           ctx.detectChanges(false);
+           expect(renderLog.loggedValues[0]['z']).toEqual(1);
+         }));
+
+      it('should not recreate literal maps unless their content changed', fakeAsync(() => {
+           const ctx = _bindSimpleValue('{z: a}');
+           ctx.componentInstance.a = 1;
+           ctx.detectChanges(false);
+           ctx.detectChanges(false);
+           ctx.componentInstance.a = 2;
+           ctx.detectChanges(false);
+           ctx.detectChanges(false);
+           expect(renderLog.loggedValues.length).toBe(2);
+           expect(renderLog.loggedValues[0]['z']).toEqual(1);
+           expect(renderLog.loggedValues[1]['z']).toEqual(2);
+         }));
+
+
+      it('should ignore empty bindings', fakeAsync(() => {
+           const ctx = _bindSimpleProp('[someProp]', TestData);
+           ctx.componentInstance.a = 'value';
+           ctx.detectChanges(false);
+
+           expect(renderLog.log).toEqual([]);
+         }));
+
+      it('should support interpolation', fakeAsync(() => {
+           const ctx = _bindSimpleProp('someProp="B{{a}}A"', TestData);
+           ctx.componentInstance.a = 'value';
+           ctx.detectChanges(false);
+
+           expect(renderLog.log).toEqual(['someProp=BvalueA']);
+         }));
+
+      it('should output empty strings for null values in interpolation', fakeAsync(() => {
+           const ctx = _bindSimpleProp('someProp="B{{a}}A"', TestData);
+           ctx.componentInstance.a = null;
+           ctx.detectChanges(false);
+
+           expect(renderLog.log).toEqual(['someProp=BA']);
+         }));
+
+      it('should escape values in literals that indicate interpolation',
+         fakeAsync(() => { expect(_bindAndCheckSimpleValue('"$"')).toEqual(['someProp=$']); }));
+
+      it('should read locals', fakeAsync(() => {
+           const ctx = createCompFixture(
+               '<ng-template testLocals let-local="someLocal">{{local}}</ng-template>');
+           ctx.detectChanges(false);
+
+           expect(renderLog.log).toEqual(['{{someLocalValue}}']);
+         }));
+
+      describe('pipes', () => {
+        it('should use the return value of the pipe', fakeAsync(() => {
+             const ctx = _bindSimpleValue('name | countingPipe', Person);
+             ctx.componentInstance.name = 'bob';
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual(['bob state:0']);
+           }));
+
+        it('should support arguments in pipes', fakeAsync(() => {
+             const ctx = _bindSimpleValue('name | multiArgPipe:"one":address.city', Person);
+             ctx.componentInstance.name = 'value';
+             ctx.componentInstance.address = new Address('two');
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual(['value one two default']);
+           }));
+
+        it('should associate pipes right-to-left', fakeAsync(() => {
+             const ctx = _bindSimpleValue('name | multiArgPipe:"a":"b" | multiArgPipe:0:1', Person);
+             ctx.componentInstance.name = 'value';
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual(['value a b default 0 1 default']);
+           }));
+
+        it('should support calling pure pipes with different number of arguments', fakeAsync(() => {
+             const ctx =
+                 _bindSimpleValue('name | multiArgPipe:"a":"b" | multiArgPipe:0:1:2', Person);
+             ctx.componentInstance.name = 'value';
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual(['value a b default 0 1 2']);
+           }));
+
+        it('should do nothing when no change', fakeAsync(() => {
+             const ctx = _bindSimpleValue('"Megatron" | identityPipe', Person);
+
+             ctx.detectChanges(false);
+
+             expect(renderLog.log).toEqual(['someProp=Megatron']);
+
+             renderLog.clear();
+             ctx.detectChanges(false);
+
+             expect(renderLog.log).toEqual([]);
+           }));
+
+        it('should unwrap the wrapped value and force a change', fakeAsync(() => {
+             const ctx = _bindSimpleValue('"Megatron" | wrappedPipe', Person);
+
+             ctx.detectChanges(false);
+
+             expect(renderLog.log).toEqual(['someProp=Megatron']);
+
+             renderLog.clear();
+             ctx.detectChanges(false);
+
+             expect(renderLog.log).toEqual(['someProp=Megatron']);
+           }));
+
+        it('should record unwrapped values via ngOnChanges', fakeAsync(() => {
+             const ctx = createCompFixture(
+                 '<div [testDirective]="\'aName\' | wrappedPipe" [a]="1" [b]="2 | wrappedPipe"></div>');
+             const dir: TestDirective = queryDirs(ctx.debugElement, TestDirective)[0];
+             ctx.detectChanges(false);
+             dir.changes = {};
+             ctx.detectChanges(false);
+
+             // Note: the binding for `b` did not change and has no ValueWrapper,
+             // and should therefore stay unchanged.
+             expect(dir.changes).toEqual({
+               'name': new SimpleChange('aName', 'aName', false),
+               'b': new SimpleChange(2, 2, false)
+             });
+
+             ctx.detectChanges(false);
+             expect(dir.changes).toEqual({
+               'name': new SimpleChange('aName', 'aName', false),
+               'b': new SimpleChange(2, 2, false)
+             });
+           }));
+
+        it('should call pure pipes only if the arguments change', fakeAsync(() => {
+             const ctx = _bindSimpleValue('name | countingPipe', Person);
+             // change from undefined -> null
+             ctx.componentInstance.name = null !;
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual(['null state:0']);
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual(['null state:0']);
+
+             // change from null -> some value
+             ctx.componentInstance.name = 'bob';
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual(['null state:0', 'bob state:1']);
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual(['null state:0', 'bob state:1']);
+
+             // change from some value -> some other value
+             ctx.componentInstance.name = 'bart';
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual([
+               'null state:0', 'bob state:1', 'bart state:2'
+             ]);
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual([
+               'null state:0', 'bob state:1', 'bart state:2'
+             ]);
+
+           }));
+
+        it('should call pure pipes that are used multiple times only when the arguments change',
+           fakeAsync(() => {
+             const ctx = createCompFixture(
+                 `<div [someProp]="name | countingPipe"></div><div [someProp]="age | countingPipe"></div>` +
+                     '<div *ngFor="let x of [1,2]" [someProp]="address.city | countingPipe"></div>',
+                 Person);
+             ctx.componentInstance.name = 'a';
+             ctx.componentInstance.age = 10;
+             ctx.componentInstance.address = new Address('mtv');
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual([
+               'mtv state:0', 'mtv state:1', 'a state:2', '10 state:3'
+             ]);
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual([
+               'mtv state:0', 'mtv state:1', 'a state:2', '10 state:3'
+             ]);
+             ctx.componentInstance.age = 11;
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual([
+               'mtv state:0', 'mtv state:1', 'a state:2', '10 state:3', '11 state:4'
+             ]);
+           }));
+
+        it('should call impure pipes on each change detection run', fakeAsync(() => {
+             const ctx = _bindSimpleValue('name | countingImpurePipe', Person);
+             ctx.componentInstance.name = 'bob';
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual(['bob state:0']);
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual(['bob state:0', 'bob state:1']);
+           }));
+      });
+
+      describe('event expressions', () => {
+        it('should support field assignments', fakeAsync(() => {
+             const ctx = _bindSimpleProp('(event)="b=a=$event"');
+             const childEl = ctx.debugElement.children[0];
+             const evt = 'EVENT';
+             childEl.triggerEventHandler('event', evt);
+
+             expect(ctx.componentInstance.a).toEqual(evt);
+             expect(ctx.componentInstance.b).toEqual(evt);
+           }));
+
+        it('should support keyed assignments', fakeAsync(() => {
+             const ctx = _bindSimpleProp('(event)="a[0]=$event"');
+             const childEl = ctx.debugElement.children[0];
+             ctx.componentInstance.a = ['OLD'];
+             const evt = 'EVENT';
+             childEl.triggerEventHandler('event', evt);
+             expect(ctx.componentInstance.a).toEqual([evt]);
+           }));
+
+        it('should support chains', fakeAsync(() => {
+             const ctx = _bindSimpleProp('(event)="a=a+1; a=a+1;"');
+             const childEl = ctx.debugElement.children[0];
+             ctx.componentInstance.a = 0;
+             childEl.triggerEventHandler('event', 'EVENT');
+             expect(ctx.componentInstance.a).toEqual(2);
+           }));
+
+        it('should support empty literals', fakeAsync(() => {
+             const ctx = _bindSimpleProp('(event)="a=[{},[]]"');
+             const childEl = ctx.debugElement.children[0];
+             childEl.triggerEventHandler('event', 'EVENT');
+
+             expect(ctx.componentInstance.a).toEqual([{}, []]);
+           }));
+
+        it('should throw when trying to assign to a local', fakeAsync(() => {
+             expect(() => {
+               _bindSimpleProp('(event)="$event=1"');
+             }).toThrowError(new RegExp('Cannot assign to a reference or variable!'));
+           }));
+
+        it('should support short-circuiting', fakeAsync(() => {
+             const ctx = _bindSimpleProp('(event)="true ? a = a + 1 : a = a + 1"');
+             const childEl = ctx.debugElement.children[0];
+             ctx.componentInstance.a = 0;
+             childEl.triggerEventHandler('event', 'EVENT');
+             expect(ctx.componentInstance.a).toEqual(1);
+           }));
+      });
+
+    });
+
+    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(() => {
+             const ctx = createCompFixture('<div testDirective [a]="42"></div>');
+             ctx.detectChanges(false);
+             expect(renderLog.log).toEqual([]);
+             expect(queryDirs(ctx.debugElement, TestDirective)[0].a).toEqual(42);
+           }));
+      });
+
+      describe('reading directives', () => {
+        it('should read directive properties', fakeAsync(() => {
+             const ctx = createCompFixture(
+                 '<div testDirective [a]="42" ref-dir="testDirective" [someProp]="dir.a"></div>');
+             ctx.detectChanges(false);
+             expect(renderLog.loggedValues).toEqual([42]);
+           }));
+      });
+
+      describe('ngOnChanges', () => {
+        it('should notify the directive when a group of records changes', fakeAsync(() => {
+             const ctx = createCompFixture(
+                 '<div [testDirective]="\'aName\'" [a]="1" [b]="2"></div><div [testDirective]="\'bName\'" [a]="4"></div>');
+             ctx.detectChanges(false);
+
+             const dirs = <TestDirective[]>queryDirs(ctx.debugElement, TestDirective);
+             expect(dirs[0].changes).toEqual({
+               'a': new SimpleChange(undefined, 1, true),
+               'b': new SimpleChange(undefined, 2, true),
+               'name': new SimpleChange(undefined, 'aName', true)
+             });
+             expect(dirs[1].changes).toEqual({
+               'a': new SimpleChange(undefined, 4, true),
+               'name': new SimpleChange(undefined, 'bName', true)
+             });
+           }));
+      });
+    });
+
+    describe('lifecycle', () => {
+      function createCompWithContentAndViewChild(): ComponentFixture<any> {
+        TestBed.overrideComponent(AnotherComponent, {
+          set: new Component({
+            selector: 'other-cmp',
+            template: '<div testDirective="viewChild"></div>',
+          })
+        });
+
+        return createCompFixture(
+            '<div testDirective="parent"><div *ngIf="true" testDirective="contentChild"></div><other-cmp></other-cmp></div>',
+            TestComponent);
+      }
+
+      describe('ngOnInit', () => {
+        it('should be called after ngOnChanges', fakeAsync(() => {
+             const ctx = createCompFixture('<div testDirective="dir"></div>');
+             expect(directiveLog.filter(['ngOnInit', 'ngOnChanges'])).toEqual([]);
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngOnInit', 'ngOnChanges'])).toEqual([
+               'dir.ngOnChanges', 'dir.ngOnInit'
+             ]);
+             directiveLog.clear();
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
+           }));
+
+        it('should only be called only once', fakeAsync(() => {
+             const ctx = createCompFixture('<div testDirective="dir"></div>');
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngOnInit'])).toEqual(['dir.ngOnInit']);
+
+             // reset directives
+             directiveLog.clear();
+
+             // Verify that checking should not call them.
+             ctx.checkNoChanges();
+
+             expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
+
+             // re-verify that changes should not call them
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
+           }));
+
+        it('should not call ngOnInit again if it throws', fakeAsync(() => {
+             const ctx = createCompFixture('<div testDirective="dir" throwOn="ngOnInit"></div>');
+
+             let errored = false;
+             // First pass fails, but ngOnInit should be called.
+             try {
+               ctx.detectChanges(false);
+             } catch (e) {
+               expect(e.message).toBe('Boom!');
+               errored = true;
+             }
+             expect(errored).toBe(true);
+
+             expect(directiveLog.filter(['ngOnInit'])).toEqual(['dir.ngOnInit']);
+             directiveLog.clear();
+
+             // Second change detection also fails, but this time ngOnInit should not be called.
+             try {
+               ctx.detectChanges(false);
+             } catch (e) {
+               expect(e.message).toBe('Boom!');
+               throw new Error('Second detectChanges() should not have called ngOnInit.');
+             }
+             expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
+           }));
+      });
+
+      describe('ngDoCheck', () => {
+        it('should be called after ngOnInit', fakeAsync(() => {
+             const ctx = createCompFixture('<div testDirective="dir"></div>');
+
+             ctx.detectChanges(false);
+             expect(directiveLog.filter(['ngDoCheck', 'ngOnInit'])).toEqual([
+               'dir.ngOnInit', 'dir.ngDoCheck'
+             ]);
+           }));
+
+        it('should be called on every detectChanges run, except for checkNoChanges',
+           fakeAsync(() => {
+             const ctx = createCompFixture('<div testDirective="dir"></div>');
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngDoCheck'])).toEqual(['dir.ngDoCheck']);
+
+             // reset directives
+             directiveLog.clear();
+
+             // Verify that checking should not call them.
+             ctx.checkNoChanges();
+
+             expect(directiveLog.filter(['ngDoCheck'])).toEqual([]);
+
+             // re-verify that changes are still detected
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngDoCheck'])).toEqual(['dir.ngDoCheck']);
+           }));
+      });
+
+      describe('ngAfterContentInit', () => {
+        it('should be called after processing the content children but before the view children',
+           fakeAsync(() => {
+             const ctx = createCompWithContentAndViewChild();
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngDoCheck', 'ngAfterContentInit'])).toEqual([
+               'parent.ngDoCheck', 'contentChild.ngDoCheck', 'contentChild.ngAfterContentInit',
+               'parent.ngAfterContentInit', 'viewChild.ngDoCheck', 'viewChild.ngAfterContentInit'
+             ]);
+           }));
+
+        it('should only be called only once', fakeAsync(() => {
+             const ctx = createCompFixture('<div testDirective="dir"></div>');
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([
+               'dir.ngAfterContentInit'
+             ]);
+
+             // reset directives
+             directiveLog.clear();
+
+             // Verify that checking should not call them.
+             ctx.checkNoChanges();
+
+             expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([]);
+
+             // re-verify that changes should not call them
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([]);
+           }));
+
+        it('should not call ngAfterContentInit again if it throws', fakeAsync(() => {
+             const ctx =
+                 createCompFixture('<div testDirective="dir" throwOn="ngAfterContentInit"></div>');
+
+             let errored = false;
+             // First pass fails, but ngAfterContentInit should be called.
+             try {
+               ctx.detectChanges(false);
+             } catch (e) {
+               errored = true;
+             }
+             expect(errored).toBe(true);
+
+             expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([
+               'dir.ngAfterContentInit'
+             ]);
+             directiveLog.clear();
+
+             // Second change detection also fails, but this time ngAfterContentInit should not be
+             // called.
+             try {
+               ctx.detectChanges(false);
+             } catch (e) {
+               throw new Error('Second detectChanges() should not have run detection.');
+             }
+             expect(directiveLog.filter(['ngAfterContentInit'])).toEqual([]);
+           }));
+      });
+
+      describe('ngAfterContentChecked', () => {
+        it('should be called after the content children but before the view children',
+           fakeAsync(() => {
+             const ctx = createCompWithContentAndViewChild();
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngDoCheck', 'ngAfterContentChecked'])).toEqual([
+               'parent.ngDoCheck', 'contentChild.ngDoCheck', 'contentChild.ngAfterContentChecked',
+               'parent.ngAfterContentChecked', 'viewChild.ngDoCheck',
+               'viewChild.ngAfterContentChecked'
+             ]);
+           }));
+
+        it('should be called on every detectChanges run, except for checkNoChanges',
+           fakeAsync(() => {
+             const ctx = createCompFixture('<div testDirective="dir"></div>');
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([
+               'dir.ngAfterContentChecked'
+             ]);
+
+             // reset directives
+             directiveLog.clear();
+
+             // Verify that checking should not call them.
+             ctx.checkNoChanges();
+
+             expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([]);
+
+             // re-verify that changes are still detected
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([
+               'dir.ngAfterContentChecked'
+             ]);
+           }));
+
+        it('should be called in reverse order so the child is always notified before the parent',
+           fakeAsync(() => {
+             const ctx = createCompFixture(
+                 '<div testDirective="parent"><div testDirective="child"></div></div><div testDirective="sibling"></div>');
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngAfterContentChecked'])).toEqual([
+               'child.ngAfterContentChecked', 'parent.ngAfterContentChecked',
+               'sibling.ngAfterContentChecked'
+             ]);
+           }));
+      });
+
+
+      describe('ngAfterViewInit', () => {
+        it('should be called after processing the view children', fakeAsync(() => {
+             const ctx = createCompWithContentAndViewChild();
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngDoCheck', 'ngAfterViewInit'])).toEqual([
+               'parent.ngDoCheck', 'contentChild.ngDoCheck', 'contentChild.ngAfterViewInit',
+               'viewChild.ngDoCheck', 'viewChild.ngAfterViewInit', 'parent.ngAfterViewInit'
+             ]);
+           }));
+
+        it('should only be called only once', fakeAsync(() => {
+             const ctx = createCompFixture('<div testDirective="dir"></div>');
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngAfterViewInit'])).toEqual(['dir.ngAfterViewInit']);
+
+             // reset directives
+             directiveLog.clear();
+
+             // Verify that checking should not call them.
+             ctx.checkNoChanges();
+
+             expect(directiveLog.filter(['ngAfterViewInit'])).toEqual([]);
+
+             // re-verify that changes should not call them
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngAfterViewInit'])).toEqual([]);
+           }));
+
+        it('should not call ngAfterViewInit again if it throws', fakeAsync(() => {
+             const ctx =
+                 createCompFixture('<div testDirective="dir" throwOn="ngAfterViewInit"></div>');
+
+             let errored = false;
+             // First pass fails, but ngAfterViewInit should be called.
+             try {
+               ctx.detectChanges(false);
+             } catch (e) {
+               errored = true;
+             }
+             expect(errored).toBe(true);
+
+             expect(directiveLog.filter(['ngAfterViewInit'])).toEqual(['dir.ngAfterViewInit']);
+             directiveLog.clear();
+
+             // Second change detection also fails, but this time ngAfterViewInit should not be
+             // called.
+             try {
+               ctx.detectChanges(false);
+             } catch (e) {
+               throw new Error('Second detectChanges() should not have run detection.');
+             }
+             expect(directiveLog.filter(['ngAfterViewInit'])).toEqual([]);
+           }));
+      });
+
+      describe('ngAfterViewChecked', () => {
+        it('should be called after processing the view children', fakeAsync(() => {
+             const ctx = createCompWithContentAndViewChild();
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngDoCheck', 'ngAfterViewChecked'])).toEqual([
+               'parent.ngDoCheck', 'contentChild.ngDoCheck', 'contentChild.ngAfterViewChecked',
+               'viewChild.ngDoCheck', 'viewChild.ngAfterViewChecked', 'parent.ngAfterViewChecked'
+             ]);
+           }));
+
+        it('should be called on every detectChanges run, except for checkNoChanges',
+           fakeAsync(() => {
+             const ctx = createCompFixture('<div testDirective="dir"></div>');
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual([
+               'dir.ngAfterViewChecked'
+             ]);
+
+             // reset directives
+             directiveLog.clear();
+
+             // Verify that checking should not call them.
+             ctx.checkNoChanges();
+
+             expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual([]);
+
+             // re-verify that changes are still detected
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual([
+               'dir.ngAfterViewChecked'
+             ]);
+           }));
+
+        it('should be called in reverse order so the child is always notified before the parent',
+           fakeAsync(() => {
+             const ctx = createCompFixture(
+                 '<div testDirective="parent"><div testDirective="child"></div></div><div testDirective="sibling"></div>');
+
+             ctx.detectChanges(false);
+
+             expect(directiveLog.filter(['ngAfterViewChecked'])).toEqual([
+               'child.ngAfterViewChecked', 'parent.ngAfterViewChecked', 'sibling.ngAfterViewChecked'
+             ]);
+           }));
+      });
+
+      describe('ngOnDestroy', () => {
+        it('should be called on view destruction', fakeAsync(() => {
+             const ctx = createCompFixture('<div testDirective="dir"></div>');
+             ctx.detectChanges(false);
+
+             ctx.destroy();
+
+             expect(directiveLog.filter(['ngOnDestroy'])).toEqual(['dir.ngOnDestroy']);
+           }));
+
+        it('should be called after processing the content and view children', fakeAsync(() => {
+             TestBed.overrideComponent(AnotherComponent, {
+               set: new Component(
+                   {selector: 'other-cmp', template: '<div testDirective="viewChild"></div>'})
+             });
+
+             const ctx = createCompFixture(
+                 '<div testDirective="parent"><div *ngFor="let x of [0,1]" testDirective="contentChild{{x}}"></div>' +
+                     '<other-cmp></other-cmp></div>',
+                 TestComponent);
+
+             ctx.detectChanges(false);
+             ctx.destroy();
+
+             expect(directiveLog.filter(['ngOnDestroy'])).toEqual([
+               'contentChild0.ngOnDestroy', 'contentChild1.ngOnDestroy', 'viewChild.ngOnDestroy',
+               'parent.ngOnDestroy'
+             ]);
+           }));
+
+        it('should be called in reverse order so the child is always notified before the parent',
+           fakeAsync(() => {
+             const ctx = createCompFixture(
+                 '<div testDirective="parent"><div testDirective="child"></div></div><div testDirective="sibling"></div>');
+
+             ctx.detectChanges(false);
+             ctx.destroy();
+
+             expect(directiveLog.filter(['ngOnDestroy'])).toEqual([
+               'child.ngOnDestroy', 'parent.ngOnDestroy', 'sibling.ngOnDestroy'
+             ]);
+           }));
+
+        it('should deliver synchronous events to parent', fakeAsync(() => {
+             const ctx = createCompFixture('<div (destroy)="a=$event" onDestroyDirective></div>');
+
+             ctx.detectChanges(false);
+             ctx.destroy();
+
+             expect(ctx.componentInstance.a).toEqual('destroyed');
+           }));
+
+        it('should call ngOnDestroy on pipes', fakeAsync(() => {
+             const ctx = createCompFixture('{{true | pipeWithOnDestroy }}');
+
+             ctx.detectChanges(false);
+             ctx.destroy();
+
+             expect(directiveLog.filter(['ngOnDestroy'])).toEqual([
+               'pipeWithOnDestroy.ngOnDestroy'
+             ]);
+           }));
+
+        it('should call ngOnDestroy on an injectable class', fakeAsync(() => {
+             TestBed.overrideDirective(
+                 TestDirective, {set: {providers: [InjectableWithLifecycle]}});
+
+             const ctx = createCompFixture('<div testDirective="dir"></div>', TestComponent);
+
+             ctx.debugElement.children[0].injector.get(InjectableWithLifecycle);
+             ctx.detectChanges(false);
+
+             ctx.destroy();
+
+             // We don't care about the exact order in this test.
+             expect(directiveLog.filter(['ngOnDestroy']).sort()).toEqual([
+               'dir.ngOnDestroy', 'injectable.ngOnDestroy'
+             ]);
+           }));
+      });
+    });
+
+    describe('enforce no new changes', () => {
+      it('should throw when a record gets changed after it has been checked', fakeAsync(() => {
+           @Directive({selector: '[changed]'})
+           class ChangingDirective {
+             @Input() changed: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [ChangingDirective]});
+
+           const ctx = createCompFixture('<div [someProp]="a" [changed]="b"></div>', TestData);
+
+           ctx.componentInstance.b = 1;
+
+           expect(() => ctx.checkNoChanges())
+               .toThrowError(/Previous value: 'changed: undefined'\. Current value: 'changed: 1'/g);
+         }));
+
+      it('should warn when the view has been created in a cd hook', fakeAsync(() => {
+           const ctx = createCompFixture('<div *gh9882>{{ a }}</div>', TestData);
+           ctx.componentInstance.a = 1;
+           expect(() => ctx.detectChanges())
+               .toThrowError(
+                   /It seems like the view has been created after its parent and its children have been dirty checked/);
+         }));
+
+      it('should not throw when two arrays are structurally the same', fakeAsync(() => {
+           const ctx = _bindSimpleValue('a', TestData);
+           ctx.componentInstance.a = ['value'];
+           ctx.detectChanges(false);
+           ctx.componentInstance.a = ['value'];
+           expect(() => ctx.checkNoChanges()).not.toThrow();
+         }));
+
+      it('should not break the next run', fakeAsync(() => {
+           const ctx = _bindSimpleValue('a', TestData);
+           ctx.componentInstance.a = 'value';
+           expect(() => ctx.checkNoChanges()).toThrow();
+
+           ctx.detectChanges();
+           expect(renderLog.loggedValues).toEqual(['value']);
+         }));
+    });
+
+    describe('mode', () => {
+      it('Detached', fakeAsync(() => {
+           const ctx = createCompFixture('<comp-with-ref></comp-with-ref>');
+           const cmp: CompWithRef = queryDirs(ctx.debugElement, CompWithRef)[0];
+           cmp.value = 'hello';
+           cmp.changeDetectorRef.detach();
+
+           ctx.detectChanges();
+
+           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];
+           cmp.value = 'hello';
+           cmp.changeDetectorRef.detach();
+           expect(renderLog.log).toEqual([]);
+
+           ctx.detectChanges();
+
+           expect(renderLog.log).toEqual([]);
+
+           cmp.changeDetectorRef.detectChanges();
+
+           expect(renderLog.log).toEqual(['{{hello}}']);
+         }));
+
+
+      it('Reattaches', fakeAsync(() => {
+           const ctx = createCompFixture('<comp-with-ref></comp-with-ref>');
+           const cmp: CompWithRef = queryDirs(ctx.debugElement, CompWithRef)[0];
+
+           cmp.value = 'hello';
+           cmp.changeDetectorRef.detach();
+
+           ctx.detectChanges();
+
+           expect(renderLog.log).toEqual([]);
+
+           cmp.changeDetectorRef.reattach();
+
+           ctx.detectChanges();
+
+           expect(renderLog.log).toEqual(['{{hello}}']);
+
+         }));
+
+      it('Reattaches in the original cd mode', fakeAsync(() => {
+           const ctx = createCompFixture('<push-cmp></push-cmp>');
+           const cmp: PushComp = queryDirs(ctx.debugElement, PushComp)[0];
+           cmp.changeDetectorRef.detach();
+           cmp.changeDetectorRef.reattach();
+
+           // renderCount should NOT be incremented with each CD as CD mode should be resetted to
+           // on-push
+           ctx.detectChanges();
+           expect(cmp.renderCount).toBeGreaterThan(0);
+           const count = cmp.renderCount;
+
+           ctx.detectChanges();
+           expect(cmp.renderCount).toBe(count);
+         }));
+
+    });
+
+    describe('multi directive order', () => {
+      it('should follow the DI order for the same element', fakeAsync(() => {
+           const ctx =
+               createCompFixture('<div orderCheck2="2" orderCheck0="0" orderCheck1="1"></div>');
+
+           ctx.detectChanges(false);
+           ctx.destroy();
+
+           expect(directiveLog.filter(['set'])).toEqual(['0.set', '1.set', '2.set']);
+         }));
+    });
+
+    describe('nested view recursion', () => {
+      it('should recurse into nested components even if there are no bindings in the component view',
+         () => {
+           @Component({selector: 'nested', template: '{{name}}'})
+           class Nested {
+             name = 'Tom';
+           }
+
+           TestBed.configureTestingModule({declarations: [Nested]});
+
+           const ctx = createCompFixture('<nested></nested>');
+           ctx.detectChanges();
+           expect(renderLog.loggedValues).toEqual(['Tom']);
+         });
+
+      it('should recurse into nested view containers even if there are no bindings in the component view',
+         () => {
+           @Component({template: '<ng-template #vc>{{name}}</ng-template>'})
+           class Comp {
+             name = 'Tom';
+             // TODO(issue/24571): remove '!'.
+             @ViewChild('vc', {read: ViewContainerRef}) vc !: ViewContainerRef;
+             // TODO(issue/24571): remove '!'.
+             @ViewChild(TemplateRef) template !: TemplateRef<any>;
+           }
+
+           TestBed.configureTestingModule({declarations: [Comp]});
+           initHelpers();
+
+           const ctx = TestBed.createComponent(Comp);
+           ctx.detectChanges();
+           expect(renderLog.loggedValues).toEqual([]);
+
+           ctx.componentInstance.vc.createEmbeddedView(ctx.componentInstance.template);
+           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 {
+          // TODO(issue/24571): remove '!'.
+          @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 {
+          // TODO(issue/24571): remove '!'.
+          @ContentChild(TemplateRef)
+          tpl !: TemplateRef<any>;
+
+          // TODO(issue/24571): remove '!'.
+          @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', () => {
+      it('should coordinate class attribute and class host binding', () => {
+        @Component({template: `<div class="{{initClasses}}" someDir></div>`})
+        class Comp {
+          initClasses = 'init';
+        }
+
+        @Directive({selector: '[someDir]'})
+        class SomeDir {
+          @HostBinding('class.foo')
+          fooClass = true;
+        }
+
+        const ctx =
+            TestBed
+                .configureCompiler({
+                  providers:
+                      [{provide: ElementSchemaRegistry, useExisting: DomElementSchemaRegistry}]
+                })
+                .configureTestingModule({declarations: [Comp, SomeDir]})
+                .createComponent(Comp);
+
+        ctx.detectChanges();
+
+        const divEl = ctx.debugElement.children[0];
+        expect(divEl.nativeElement).toHaveCssClass('init');
+        expect(divEl.nativeElement).toHaveCssClass('foo');
+      });
+    });
+
+    describe('lifecycle asserts', () => {
+      let logged: string[];
+
+      function log(value: string) { logged.push(value); }
+      function clearLog() { logged = []; }
+
+      function expectOnceAndOnlyOnce(log: string) {
+        expect(logged.indexOf(log) >= 0)
+            .toBeTruthy(`'${log}' not logged. Log was ${JSON.stringify(logged)}`);
+        expect(logged.lastIndexOf(log) === logged.indexOf(log))
+            .toBeTruthy(`'${log}' logged more than once. Log was ${JSON.stringify(logged)}`);
+      }
+
+      beforeEach(() => { clearLog(); });
+
+      enum LifetimeMethods {
+        None = 0,
+        ngOnInit = 1 << 0,
+        ngOnChanges = 1 << 1,
+        ngAfterViewInit = 1 << 2,
+        ngAfterContentInit = 1 << 3,
+        ngDoCheck = 1 << 4,
+        InitMethods = ngOnInit | ngAfterViewInit | ngAfterContentInit,
+        InitMethodsAndChanges = InitMethods | ngOnChanges,
+        All = InitMethodsAndChanges | ngDoCheck,
+      }
+
+      function forEachMethod(methods: LifetimeMethods, cb: (method: LifetimeMethods) => void) {
+        if (methods & LifetimeMethods.ngOnInit) cb(LifetimeMethods.ngOnInit);
+        if (methods & LifetimeMethods.ngOnChanges) cb(LifetimeMethods.ngOnChanges);
+        if (methods & LifetimeMethods.ngAfterContentInit) cb(LifetimeMethods.ngAfterContentInit);
+        if (methods & LifetimeMethods.ngAfterViewInit) cb(LifetimeMethods.ngAfterViewInit);
+        if (methods & LifetimeMethods.ngDoCheck) cb(LifetimeMethods.ngDoCheck);
+      }
+
+      interface Options {
+        childRecursion: LifetimeMethods;
+        childThrows: LifetimeMethods;
+      }
+
+      describe('calling init', () => {
+        function initialize(options: Options) {
+          @Component({selector: 'my-child', template: ''})
+          class MyChild {
+            private thrown = LifetimeMethods.None;
+
+            // TODO(issue/24571): remove '!'.
+            @Input() inp !: boolean;
+            @Output() outp = new EventEmitter<any>();
+
+            constructor() {}
+
+            ngDoCheck() { this.check(LifetimeMethods.ngDoCheck); }
+            ngOnInit() { this.check(LifetimeMethods.ngOnInit); }
+            ngOnChanges() { this.check(LifetimeMethods.ngOnChanges); }
+            ngAfterViewInit() { this.check(LifetimeMethods.ngAfterViewInit); }
+            ngAfterContentInit() { this.check(LifetimeMethods.ngAfterContentInit); }
+
+            private check(method: LifetimeMethods) {
+              log(`MyChild::${LifetimeMethods[method]}()`);
+
+              if ((options.childRecursion & method) !== 0) {
+                if (logged.length < 20) {
+                  this.outp.emit(null);
+                } else {
+                  fail(`Unexpected MyChild::${LifetimeMethods[method]} recursion`);
+                }
+              }
+              if ((options.childThrows & method) !== 0) {
+                if ((this.thrown & method) === 0) {
+                  this.thrown |= method;
+                  log(`<THROW from MyChild::${LifetimeMethods[method]}>()`);
+                  throw new Error(`Throw from MyChild::${LifetimeMethods[method]}`);
+                }
+              }
+            }
+          }
+
+          @Component({
+            selector: 'my-component',
+            template: `<my-child [inp]='true' (outp)='onOutp()'></my-child>`
+          })
+          class MyComponent {
+            constructor(private changeDetectionRef: ChangeDetectorRef) {}
+            ngDoCheck() { this.check(LifetimeMethods.ngDoCheck); }
+            ngOnInit() { this.check(LifetimeMethods.ngOnInit); }
+            ngAfterViewInit() { this.check(LifetimeMethods.ngAfterViewInit); }
+            ngAfterContentInit() { this.check(LifetimeMethods.ngAfterContentInit); }
+            onOutp() {
+              log('<RECURSION START>');
+              this.changeDetectionRef.detectChanges();
+              log('<RECURSION DONE>');
+            }
+
+            private check(method: LifetimeMethods) {
+              log(`MyComponent::${LifetimeMethods[method]}()`);
+            }
+          }
+
+          TestBed.configureTestingModule({declarations: [MyChild, MyComponent]});
+
+          return createCompFixture(`<my-component></my-component>`);
+        }
+
+        function ensureOneInit(options: Options) {
+          const ctx = initialize(options);
+
+
+          const throws = options.childThrows != LifetimeMethods.None;
+          if (throws) {
+            log(`<CYCLE 0 START>`);
+            expect(() => {
+              // Expect child to throw.
+              ctx.detectChanges();
+            }).toThrow();
+            log(`<CYCLE 0 END>`);
+            log(`<CYCLE 1 START>`);
+          }
+          ctx.detectChanges();
+          if (throws) log(`<CYCLE 1 DONE>`);
+          expectOnceAndOnlyOnce('MyComponent::ngOnInit()');
+          expectOnceAndOnlyOnce('MyChild::ngOnInit()');
+          expectOnceAndOnlyOnce('MyComponent::ngAfterViewInit()');
+          expectOnceAndOnlyOnce('MyComponent::ngAfterContentInit()');
+          expectOnceAndOnlyOnce('MyChild::ngAfterViewInit()');
+          expectOnceAndOnlyOnce('MyChild::ngAfterContentInit()');
+        }
+
+        forEachMethod(LifetimeMethods.InitMethodsAndChanges, method => {
+          it(`should ensure that init hooks are called once an only once with recursion in ${LifetimeMethods[method]} `,
+             () => {
+               // Ensure all the init methods are called once.
+               ensureOneInit({childRecursion: method, childThrows: LifetimeMethods.None});
+             });
+        });
+        forEachMethod(LifetimeMethods.All, method => {
+          it(`should ensure that init hooks are called once an only once with a throw in ${LifetimeMethods[method]} `,
+             () => {
+               // Ensure all the init methods are called once.
+               // the first cycle throws but the next cycle should complete the inits.
+               ensureOneInit({childRecursion: LifetimeMethods.None, childThrows: method});
+             });
+        });
+      });
+    });
+  });
+})();
+
+@Injectable()
+class RenderLog {
+  log: string[] = [];
+  loggedValues: any[] = [];
+
+  setElementProperty(el: any, propName: string, propValue: any) {
+    this.log.push(`${propName}=${propValue}`);
+    this.loggedValues.push(propValue);
+  }
+
+  setText(node: any, value: string) {
+    this.log.push(`{{${value}}}`);
+    this.loggedValues.push(value);
+  }
+
+  clear() {
+    this.log = [];
+    this.loggedValues = [];
+  }
+}
+
+class DirectiveLogEntry {
+  constructor(public directiveName: string, public method: string) {}
+}
+
+function patchLoggingRenderer2(rendererFactory: RendererFactory2, log: RenderLog) {
+  if ((<any>rendererFactory).__patchedForLogging) {
+    return;
+  }
+  (<any>rendererFactory).__patchedForLogging = true;
+  const origCreateRenderer = rendererFactory.createRenderer;
+  rendererFactory.createRenderer = function() {
+    const renderer = origCreateRenderer.apply(this, arguments);
+    if ((<any>renderer).__patchedForLogging) {
+      return renderer;
+    }
+    (<any>renderer).__patchedForLogging = true;
+    const origSetProperty = renderer.setProperty;
+    const origSetValue = renderer.setValue;
+    renderer.setProperty = function(el: any, name: string, value: any): void {
+      log.setElementProperty(el, name, value);
+      origSetProperty.call(renderer, el, name, value);
+    };
+    renderer.setValue = function(node: any, value: string): void {
+      if (getDOM().isTextNode(node)) {
+        log.setText(node, value);
+      }
+      origSetValue.call(renderer, node, value);
+    };
+    return renderer;
+  };
+}
+
+@Injectable()
+class DirectiveLog {
+  entries: DirectiveLogEntry[] = [];
+
+  add(directiveName: string, method: string) {
+    this.entries.push(new DirectiveLogEntry(directiveName, method));
+  }
+
+  clear() { this.entries = []; }
+
+  filter(methods: string[]): string[] {
+    return this.entries.filter((entry) => methods.indexOf(entry.method) !== -1)
+        .map(entry => `${entry.directiveName}.${entry.method}`);
+  }
+}
+
+
+@Pipe({name: 'countingPipe'})
+class CountingPipe implements PipeTransform {
+  state: number = 0;
+  transform(value: any) { return `${value} state:${this.state++}`; }
+}
+
+@Pipe({name: 'countingImpurePipe', pure: false})
+class CountingImpurePipe implements PipeTransform {
+  state: number = 0;
+  transform(value: any) { return `${value} state:${this.state++}`; }
+}
+
+@Pipe({name: 'pipeWithOnDestroy'})
+class PipeWithOnDestroy implements PipeTransform, OnDestroy {
+  constructor(private directiveLog: DirectiveLog) {}
+
+  ngOnDestroy() { this.directiveLog.add('pipeWithOnDestroy', 'ngOnDestroy'); }
+
+  transform(value: any): any { return null; }
+}
+
+@Pipe({name: 'identityPipe'})
+class IdentityPipe implements PipeTransform {
+  transform(value: any) { return value; }
+}
+
+@Pipe({name: 'wrappedPipe'})
+class WrappedPipe implements PipeTransform {
+  transform(value: any) { return WrappedValue.wrap(value); }
+}
+
+@Pipe({name: 'multiArgPipe'})
+class MultiArgPipe implements PipeTransform {
+  transform(value: any, arg1: any, arg2: any, arg3 = 'default') {
+    return `${value} ${arg1} ${arg2} ${arg3}`;
+  }
+}
+
+@Component({selector: 'test-cmp', template: 'empty'})
+class TestComponent {
+  value: any;
+  a: any;
+  b: any;
+}
+
+@Component({selector: 'other-cmp', template: 'empty'})
+class AnotherComponent {
+}
+
+@Component({
+  selector: 'comp-with-ref',
+  template: '<div (event)="noop()" emitterDirective></div>{{value}}',
+  host: {'event': 'noop()'}
+})
+class CompWithRef {
+  @Input() public value: any;
+
+  constructor(public changeDetectorRef: ChangeDetectorRef) {}
+
+  noop() {}
+}
+
+@Component({selector: 'wrap-comp-with-ref', template: '<comp-with-ref></comp-with-ref>'})
+class WrapCompWithRef {
+  constructor(public changeDetectorRef: ChangeDetectorRef) {}
+}
+
+@Component({
+  selector: 'push-cmp',
+  template: '<div (event)="noop()" emitterDirective></div>{{value}}{{renderIncrement}}',
+  host: {'(event)': 'noop()'},
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+class PushComp {
+  @Input() public value: any;
+  public renderCount: any = 0;
+
+  get renderIncrement() {
+    this.renderCount++;
+    return '';
+  }
+
+  constructor(public changeDetectorRef: ChangeDetectorRef) {}
+
+  noop() {}
+}
+
+@Directive({selector: '[emitterDirective]'})
+class EmitterDirective {
+  @Output('event') emitter = new EventEmitter<string>();
+}
+
+@Directive({selector: '[gh9882]'})
+class Gh9882 implements AfterContentInit {
+  constructor(private _viewContainer: ViewContainerRef, private _templateRef: TemplateRef<Object>) {
+  }
+
+  ngAfterContentInit(): any { this._viewContainer.createEmbeddedView(this._templateRef); }
+}
+
+@Directive({selector: '[testDirective]', exportAs: 'testDirective'})
+class TestDirective implements OnInit, DoCheck, OnChanges, AfterContentInit, AfterContentChecked,
+    AfterViewInit, AfterViewChecked, OnDestroy {
+  @Input() a: any;
+  @Input() b: any;
+  // TODO(issue/24571): remove '!'.
+  changes !: SimpleChanges;
+  event: any;
+  eventEmitter: EventEmitter<string> = new EventEmitter<string>();
+
+  // TODO(issue/24571): remove '!'.
+  @Input('testDirective') name !: string;
+
+  // TODO(issue/24571): remove '!'.
+  @Input() throwOn !: string;
+
+  constructor(public log: DirectiveLog) {}
+
+  onEvent(event: any) { this.event = event; }
+
+  ngDoCheck() { this.log.add(this.name, 'ngDoCheck'); }
+
+  ngOnInit() {
+    this.log.add(this.name, 'ngOnInit');
+    if (this.throwOn == 'ngOnInit') {
+      throw new Error('Boom!');
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.log.add(this.name, 'ngOnChanges');
+    this.changes = changes;
+    if (this.throwOn == 'ngOnChanges') {
+      throw new Error('Boom!');
+    }
+  }
+
+  ngAfterContentInit() {
+    this.log.add(this.name, 'ngAfterContentInit');
+    if (this.throwOn == 'ngAfterContentInit') {
+      throw new Error('Boom!');
+    }
+  }
+
+  ngAfterContentChecked() {
+    this.log.add(this.name, 'ngAfterContentChecked');
+    if (this.throwOn == 'ngAfterContentChecked') {
+      throw new Error('Boom!');
+    }
+  }
+
+  ngAfterViewInit() {
+    this.log.add(this.name, 'ngAfterViewInit');
+    if (this.throwOn == 'ngAfterViewInit') {
+      throw new Error('Boom!');
+    }
+  }
+
+  ngAfterViewChecked() {
+    this.log.add(this.name, 'ngAfterViewChecked');
+    if (this.throwOn == 'ngAfterViewChecked') {
+      throw new Error('Boom!');
+    }
+  }
+
+  ngOnDestroy() {
+    this.log.add(this.name, 'ngOnDestroy');
+    if (this.throwOn == 'ngOnDestroy') {
+      throw new Error('Boom!');
+    }
+  }
+}
+
+@Injectable()
+class InjectableWithLifecycle {
+  name = 'injectable';
+  constructor(public log: DirectiveLog) {}
+
+  ngOnDestroy() { this.log.add(this.name, 'ngOnDestroy'); }
+}
+
+@Directive({selector: '[onDestroyDirective]'})
+class OnDestroyDirective implements OnDestroy {
+  @Output('destroy') emitter = new EventEmitter<string>(false);
+
+  ngOnDestroy() { this.emitter.emit('destroyed'); }
+}
+
+@Directive({selector: '[orderCheck0]'})
+class OrderCheckDirective0 {
+  // TODO(issue/24571): remove '!'.
+  private _name !: string;
+
+  @Input('orderCheck0')
+  set name(value: string) {
+    this._name = value;
+    this.log.add(this._name, 'set');
+  }
+
+  constructor(public log: DirectiveLog) {}
+}
+
+@Directive({selector: '[orderCheck1]'})
+class OrderCheckDirective1 {
+  // TODO(issue/24571): remove '!'.
+  private _name !: string;
+
+  @Input('orderCheck1')
+  set name(value: string) {
+    this._name = value;
+    this.log.add(this._name, 'set');
+  }
+
+  constructor(public log: DirectiveLog, _check0: OrderCheckDirective0) {}
+}
+
+@Directive({selector: '[orderCheck2]'})
+class OrderCheckDirective2 {
+  // TODO(issue/24571): remove '!'.
+  private _name !: string;
+
+  @Input('orderCheck2')
+  set name(value: string) {
+    this._name = value;
+    this.log.add(this._name, 'set');
+  }
+
+  constructor(public log: DirectiveLog, _check1: OrderCheckDirective1) {}
+}
+
+class TestLocalsContext {
+  constructor(public someLocal: string) {}
+}
+
+@Directive({selector: '[testLocals]'})
+class TestLocals {
+  constructor(templateRef: TemplateRef<TestLocalsContext>, vcRef: ViewContainerRef) {
+    vcRef.createEmbeddedView(templateRef, new TestLocalsContext('someLocalValue'));
+  }
+}
+
+@Component({selector: 'root', template: 'empty'})
+class Person {
+  // TODO(issue/24571): remove '!'.
+  age !: number;
+  // TODO(issue/24571): remove '!'.
+  name !: string;
+  address: Address|null = null;
+  // TODO(issue/24571): remove '!'.
+  phones !: number[];
+
+  init(name: string, address: Address|null = null) {
+    this.name = name;
+    this.address = address;
+  }
+
+  sayHi(m: any): string { return `Hi, ${m}`; }
+
+  passThrough(val: any): any { return val; }
+
+  toString(): string {
+    const address = this.address == null ? '' : ' address=' + this.address.toString();
+
+    return 'name=' + this.name + address;
+  }
+}
+
+class Address {
+  cityGetterCalls: number = 0;
+  zipCodeGetterCalls: number = 0;
+
+  constructor(public _city: string, public _zipcode: any = null) {}
+
+  get city() {
+    this.cityGetterCalls++;
+    return this._city;
+  }
+
+  get zipcode() {
+    this.zipCodeGetterCalls++;
+    return this._zipcode;
+  }
+
+  set city(v) { this._city = v; }
+
+  set zipcode(v) { this._zipcode = v; }
+
+  toString(): string { return this.city || '-'; }
+}
+
+@Component({selector: 'root', template: 'empty'})
+class Uninitialized {
+  value: any = null;
+}
+
+@Component({selector: 'root', template: 'empty'})
+class TestData {
+  a: any;
+  b: any;
+}
+
+@Component({selector: 'root', template: 'empty'})
+class TestDataWithGetter {
+  // TODO(issue/24571): remove '!'.
+  public fn !: Function;
+
+  get a() { return this.fn(); }
+}
+
+class Holder<T> {
+  // TODO(issue/24571): remove '!'.
+  value !: T;
+}
+
+@Component({selector: 'root', template: 'empty'})
+class PersonHolder extends Holder<Person> {
+}
+
+@Component({selector: 'root', template: 'empty'})
+class PersonHolderHolder extends Holder<Holder<Person>> {
+}
diff --git a/packages/core/test/linker/entry_components_integration_spec.ts b/packages/core/test/linker/entry_components_integration_spec.ts
new file mode 100644
index 000000000000..dc553c5f3b84
--- /dev/null
+++ b/packages/core/test/linker/entry_components_integration_spec.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 {ANALYZE_FOR_ENTRY_COMPONENTS, Component, ComponentFactoryResolver} from '@angular/core';
+import {noComponentFactoryError} from '@angular/core/src/linker/component_factory_resolver';
+import {TestBed} from '@angular/core/testing';
+
+import {Console} from '../../src/console';
+
+
+{
+  describe('jit', () => { declareTests({useJit: true}); });
+  describe('no jit', () => { declareTests({useJit: false}); });
+}
+
+class DummyConsole implements Console {
+  public warnings: string[] = [];
+
+  log(message: string) {}
+  warn(message: string) { this.warnings.push(message); }
+}
+
+function declareTests({useJit}: {useJit: boolean}) {
+  describe('@Component.entryComponents', function() {
+    let console: DummyConsole;
+    beforeEach(() => {
+      console = new DummyConsole();
+      TestBed.configureCompiler(
+          {useJit: useJit, providers: [{provide: Console, useValue: console}]});
+      TestBed.configureTestingModule({declarations: [MainComp, ChildComp, NestedChildComp]});
+    });
+
+    it('should resolve ComponentFactories from the same component', () => {
+      const compFixture = TestBed.createComponent(MainComp);
+      const mainComp: MainComp = compFixture.componentInstance;
+      expect(compFixture.componentRef.injector.get(ComponentFactoryResolver)).toBe(mainComp.cfr);
+      const cf = mainComp.cfr.resolveComponentFactory(ChildComp) !;
+      expect(cf.componentType).toBe(ChildComp);
+    });
+
+    it('should resolve ComponentFactories via ANALYZE_FOR_ENTRY_COMPONENTS', () => {
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule(
+          {declarations: [CompWithAnalyzeEntryComponentsProvider, NestedChildComp, ChildComp]});
+      const compFixture = TestBed.createComponent(CompWithAnalyzeEntryComponentsProvider);
+      const mainComp: CompWithAnalyzeEntryComponentsProvider = compFixture.componentInstance;
+      const cfr: ComponentFactoryResolver =
+          compFixture.componentRef.injector.get(ComponentFactoryResolver);
+      expect(cfr.resolveComponentFactory(ChildComp) !.componentType).toBe(ChildComp);
+      expect(cfr.resolveComponentFactory(NestedChildComp) !.componentType).toBe(NestedChildComp);
+    });
+
+    it('should be able to get a component form a parent component (view hierarchy)', () => {
+      TestBed.overrideComponent(MainComp, {set: {template: '<child></child>'}});
+
+      const compFixture = TestBed.createComponent(MainComp);
+      const childCompEl = compFixture.debugElement.children[0];
+      const childComp: ChildComp = childCompEl.componentInstance;
+      // declared on ChildComp directly
+      expect(childComp.cfr.resolveComponentFactory(NestedChildComp) !.componentType)
+          .toBe(NestedChildComp);
+      // inherited from MainComp
+      expect(childComp.cfr.resolveComponentFactory(ChildComp) !.componentType).toBe(ChildComp);
+    });
+
+    it('should not be able to get components from a parent component (content hierarchy)', () => {
+      TestBed.overrideComponent(MainComp, {set: {template: '<child><nested></nested></child>'}});
+      TestBed.overrideComponent(ChildComp, {set: {template: '<ng-content></ng-content>'}});
+
+      const compFixture = TestBed.createComponent(MainComp);
+      const nestedChildCompEl = compFixture.debugElement.children[0].children[0];
+      const nestedChildComp: NestedChildComp = nestedChildCompEl.componentInstance;
+      expect(nestedChildComp.cfr.resolveComponentFactory(ChildComp) !.componentType)
+          .toBe(ChildComp);
+      expect(() => nestedChildComp.cfr.resolveComponentFactory(NestedChildComp))
+          .toThrow(noComponentFactoryError(NestedChildComp));
+    });
+
+  });
+}
+
+@Component({selector: 'nested', template: ''})
+class NestedChildComp {
+  constructor(public cfr: ComponentFactoryResolver) {}
+}
+
+@Component({selector: 'child', entryComponents: [NestedChildComp], template: ''})
+class ChildComp {
+  constructor(public cfr: ComponentFactoryResolver) {}
+}
+
+@Component({
+  selector: 'main',
+  entryComponents: [ChildComp],
+  template: '',
+})
+class MainComp {
+  constructor(public cfr: ComponentFactoryResolver) {}
+}
+
+@Component({
+  selector: 'comp-with-analyze',
+  template: '',
+  providers: [{
+    provide: ANALYZE_FOR_ENTRY_COMPONENTS,
+    multi: true,
+    useValue: [
+      {a: 'b', component: ChildComp},
+      {b: 'c', anotherComponent: NestedChildComp},
+    ]
+  }]
+})
+class CompWithAnalyzeEntryComponentsProvider {
+}
diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts
new file mode 100644
index 000000000000..3a6d125297e5
--- /dev/null
+++ b/packages/core/test/linker/integration_spec.ts
@@ -0,0 +1,2533 @@
+/**
+ * @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 {CompilerConfig} from '@angular/compiler';
+import {Compiler, ComponentFactory, ComponentRef, ErrorHandler, EventEmitter, Host, Inject, Injectable, InjectionToken, Injector, NO_ERRORS_SCHEMA, NgModule, NgModuleRef, OnDestroy, SkipSelf, ViewRef} 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';
+import {ElementRef} from '@angular/core/src/linker/element_ref';
+import {QueryList} from '@angular/core/src/linker/query_list';
+import {TemplateRef} from '@angular/core/src/linker/template_ref';
+import {ViewContainerRef} from '@angular/core/src/linker/view_container_ref';
+import {EmbeddedViewRef} from '@angular/core/src/linker/view_ref';
+import {Attribute, Component, ContentChildren, Directive, HostBinding, HostListener, Input, Output, Pipe} from '@angular/core/src/metadata';
+import {TestBed, async, fakeAsync, getTestBed, tick} from '@angular/core/testing';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {DOCUMENT} from '@angular/platform-browser/src/dom/dom_tokens';
+import {dispatchEvent, el} from '@angular/platform-browser/testing/src/browser_util';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+import {stringify} from '../../src/util';
+
+const ANCHOR_ELEMENT = new InjectionToken('AnchorElement');
+
+{
+  describe('jit', () => { declareTests({useJit: true}); });
+
+  describe('no jit', () => { declareTests({useJit: false}); });
+}
+
+
+function declareTests({useJit}: {useJit: boolean}) {
+  describe('integration tests', function() {
+
+    beforeEach(() => { TestBed.configureCompiler({useJit}); });
+
+    describe('react to record changes', function() {
+      it('should consume text node changes', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = '<div>{{ctxProp}}</div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+        fixture.componentInstance.ctxProp = 'Hello World!';
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('Hello World!');
+      });
+
+      it('should update text node with a blank string when interpolation evaluates to null', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = '<div>{{null}}{{ctxProp}}</div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+        fixture.componentInstance.ctxProp = null !;
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('');
+      });
+
+      it('should allow both null and undefined in expressions', () => {
+        const template = '<div>{{null == undefined}}|{{null === undefined}}</div>';
+        const fixture = TestBed.configureTestingModule({declarations: [MyComp]})
+                            .overrideComponent(MyComp, {set: {template}})
+                            .createComponent(MyComp);
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('true|false');
+      });
+
+      it('should support an arbitrary number of interpolations in an element', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template =
+            `<div>before{{'0'}}a{{'1'}}b{{'2'}}c{{'3'}}d{{'4'}}e{{'5'}}f{{'6'}}g{{'7'}}h{{'8'}}i{{'9'}}j{{'10'}}after</div>`;
+        const fixture =
+            TestBed.overrideComponent(MyComp, {set: {template}}).createComponent(MyComp);
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('before0a1b2c3d4e5f6g7h8i9j10after');
+      });
+
+      it('should use a blank string when interpolation evaluates to null or undefined with an arbitrary number of interpolations',
+         () => {
+           TestBed.configureTestingModule({declarations: [MyComp]});
+           const template =
+               `<div>0{{null}}a{{undefined}}b{{null}}c{{undefined}}d{{null}}e{{undefined}}f{{null}}g{{undefined}}h{{null}}i{{undefined}}j{{null}}1</div>`;
+           const fixture =
+               TestBed.overrideComponent(MyComp, {set: {template}}).createComponent(MyComp);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('0abcdefghij1');
+         });
+
+      it('should consume element binding changes', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = '<div [id]="ctxProp"></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'Hello World!';
+        fixture.detectChanges();
+
+        expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'id'))
+            .toEqual('Hello World!');
+      });
+
+      it('should consume binding to aria-* attributes', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = '<div [attr.aria-label]="ctxProp"></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'Initial aria label';
+        fixture.detectChanges();
+        expect(getDOM().getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
+            .toEqual('Initial aria label');
+
+        fixture.componentInstance.ctxProp = 'Changed aria label';
+        fixture.detectChanges();
+        expect(getDOM().getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
+            .toEqual('Changed aria label');
+      });
+
+      it('should remove an attribute when attribute expression evaluates to null', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = '<div [attr.foo]="ctxProp"></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'bar';
+        fixture.detectChanges();
+        expect(getDOM().getAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
+            .toEqual('bar');
+
+        fixture.componentInstance.ctxProp = null !;
+        fixture.detectChanges();
+        expect(getDOM().hasAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
+            .toBeFalsy();
+      });
+
+      it('should remove style when when style expression evaluates to null', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = '<div [style.height.px]="ctxProp"></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = '10';
+        fixture.detectChanges();
+        expect(getDOM().getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
+            .toEqual('10px');
+
+        fixture.componentInstance.ctxProp = null !;
+        fixture.detectChanges();
+        expect(getDOM().getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
+            .toEqual('');
+      });
+
+      it('should consume binding to property names where attr name and property name do not match',
+         () => {
+           TestBed.configureTestingModule({declarations: [MyComp]});
+           const template = '<div [tabindex]="ctxNumProp"></div>';
+           TestBed.overrideComponent(MyComp, {set: {template}});
+           const fixture = TestBed.createComponent(MyComp);
+
+           fixture.detectChanges();
+           expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'tabIndex'))
+               .toEqual(0);
+
+           fixture.componentInstance.ctxNumProp = 5;
+           fixture.detectChanges();
+           expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'tabIndex'))
+               .toEqual(5);
+         });
+
+      it('should consume binding to camel-cased properties', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = '<input [readOnly]="ctxBoolProp">';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.detectChanges();
+        expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'readOnly'))
+            .toBeFalsy();
+
+        fixture.componentInstance.ctxBoolProp = true;
+        fixture.detectChanges();
+        expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'readOnly'))
+            .toBeTruthy();
+      });
+
+      it('should consume binding to innerHtml', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = '<div innerHtml="{{ctxProp}}"></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'Some <span>HTML</span>';
+        fixture.detectChanges();
+        expect(getDOM().getInnerHTML(fixture.debugElement.children[0].nativeElement))
+            .toEqual('Some <span>HTML</span>');
+
+        fixture.componentInstance.ctxProp = 'Some other <div>HTML</div>';
+        fixture.detectChanges();
+        expect(getDOM().getInnerHTML(fixture.debugElement.children[0].nativeElement))
+            .toEqual('Some other <div>HTML</div>');
+      });
+
+      it('should consume binding to className using class alias', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = '<div class="initial" [class]="ctxProp"></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        const nativeEl = fixture.debugElement.children[0].nativeElement;
+        fixture.componentInstance.ctxProp = 'foo bar';
+        fixture.detectChanges();
+
+        expect(nativeEl).toHaveCssClass('foo');
+        expect(nativeEl).toHaveCssClass('bar');
+        expect(nativeEl).not.toHaveCssClass('initial');
+      });
+
+      it('should consume binding to htmlFor using for alias', () => {
+        const template = '<label [for]="ctxProp"></label>';
+        const fixture = TestBed.configureTestingModule({declarations: [MyComp]})
+                            .overrideComponent(MyComp, {set: {template}})
+                            .createComponent(MyComp);
+
+        const nativeEl = fixture.debugElement.children[0].nativeElement;
+        fixture.debugElement.componentInstance.ctxProp = 'foo';
+        fixture.detectChanges();
+
+        expect(getDOM().getProperty(nativeEl, 'htmlFor')).toBe('foo');
+      });
+
+      it('should consume directive watch expression change.', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
+        const template = '<span>' +
+            '<div my-dir [elprop]="ctxProp"></div>' +
+            '<div my-dir elprop="Hi there!"></div>' +
+            '<div my-dir elprop="Hi {{\'there!\'}}"></div>' +
+            '<div my-dir elprop="One more {{ctxProp}}"></div>' +
+            '</span>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'Hello World!';
+        fixture.detectChanges();
+
+        const containerSpan = fixture.debugElement.children[0];
+
+        expect(containerSpan.children[0].injector.get(MyDir).dirProp).toEqual('Hello World!');
+        expect(containerSpan.children[1].injector.get(MyDir).dirProp).toEqual('Hi there!');
+        expect(containerSpan.children[2].injector.get(MyDir).dirProp).toEqual('Hi there!');
+        expect(containerSpan.children[3].injector.get(MyDir).dirProp)
+            .toEqual('One more Hello World!');
+      });
+
+      describe('pipes', () => {
+        it('should support pipes in bindings', () => {
+          TestBed.configureTestingModule({declarations: [MyComp, MyDir, DoublePipe]});
+          const template = '<div my-dir #dir="mydir" [elprop]="ctxProp | double"></div>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          fixture.componentInstance.ctxProp = 'a';
+          fixture.detectChanges();
+
+          const dir = fixture.debugElement.children[0].references !['dir'];
+          expect(dir.dirProp).toEqual('aa');
+        });
+      });
+
+      it('should support nested components.', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
+        const template = '<child-cmp></child-cmp>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement).toHaveText('hello');
+      });
+
+      // GH issue 328 - https://github.com/angular/angular/issues/328
+      it('should support different directive types on a single node', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, ChildComp, MyDir]});
+        const template = '<child-cmp my-dir [elprop]="ctxProp"></child-cmp>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'Hello World!';
+        fixture.detectChanges();
+
+        const tc = fixture.debugElement.children[0];
+
+        expect(tc.injector.get(MyDir).dirProp).toEqual('Hello World!');
+        expect(tc.injector.get(ChildComp).dirProp).toEqual(null);
+      });
+
+      it('should support directives where a binding attribute is not given', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
+        const template = '<p my-dir></p>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+      });
+
+      it('should execute a given directive once, even if specified multiple times', () => {
+        TestBed.configureTestingModule(
+            {declarations: [MyComp, DuplicateDir, DuplicateDir, [DuplicateDir, [DuplicateDir]]]});
+        const template = '<p no-duplicate></p>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+        expect(fixture.nativeElement).toHaveText('noduplicate');
+      });
+
+      it('should support directives where a selector matches property binding', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, IdDir]});
+        const template = '<p [id]="ctxProp"></p>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        const tc = fixture.debugElement.children[0];
+        const idDir = tc.injector.get(IdDir);
+
+        fixture.componentInstance.ctxProp = 'some_id';
+        fixture.detectChanges();
+        expect(idDir.id).toEqual('some_id');
+
+        fixture.componentInstance.ctxProp = 'other_id';
+        fixture.detectChanges();
+        expect(idDir.id).toEqual('other_id');
+      });
+
+      it('should support directives where a selector matches event binding', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, EventDir]});
+        const template = '<p (customEvent)="doNothing()"></p>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        const tc = fixture.debugElement.children[0];
+        expect(tc.injector.get(EventDir)).not.toBeNull();
+      });
+
+      it('should display correct error message for uninitialized @Output', () => {
+        @Component({selector: 'my-uninitialized-output', template: '<p>It works!</p>'})
+        class UninitializedOutputComp {
+          @Output() customEvent !: EventEmitter<any>;
+        }
+
+        const template =
+            '<my-uninitialized-output (customEvent)="doNothing()"></my-uninitialized-output>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+
+        TestBed.configureTestingModule({declarations: [MyComp, UninitializedOutputComp]});
+        expect(() => TestBed.createComponent(MyComp))
+            .toThrowError('@Output customEvent not initialized in \'UninitializedOutputComp\'.');
+      });
+
+      it('should read directives metadata from their binding token', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, PrivateImpl, NeedsPublicApi]});
+        const template = '<div public-api><div needs-public-api></div></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+      });
+
+      it('should support template directives via `<ng-template>` elements.', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, SomeViewport]});
+        const template =
+            '<ng-template some-viewport let-greeting="someTmpl"><span>{{greeting}}</span></ng-template>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.detectChanges();
+
+        const childNodesOfWrapper = getDOM().childNodes(fixture.nativeElement);
+        // 1 template + 2 copies.
+        expect(childNodesOfWrapper.length).toBe(3);
+        expect(childNodesOfWrapper[1]).toHaveText('hello');
+        expect(childNodesOfWrapper[2]).toHaveText('again');
+      });
+
+      it('should not share empty context for template directives - issue #10045', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, PollutedContext, NoContext]});
+        const template =
+            '<ng-template pollutedContext let-foo="bar">{{foo}}</ng-template><ng-template noContext let-foo="bar">{{foo}}</ng-template>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('baz');
+      });
+
+      it('should not detach views in ViewContainers when the parent view is destroyed.', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, SomeViewport]});
+        const template =
+            '<div *ngIf="ctxBoolProp"><ng-template some-viewport let-greeting="someTmpl"><span>{{greeting}}</span></ng-template></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxBoolProp = true;
+        fixture.detectChanges();
+
+        const ngIfEl = fixture.debugElement.children[0];
+        const someViewport: SomeViewport = ngIfEl.childNodes[0].injector.get(SomeViewport);
+        expect(someViewport.container.length).toBe(2);
+        expect(ngIfEl.children.length).toBe(2);
+
+        fixture.componentInstance.ctxBoolProp = false;
+        fixture.detectChanges();
+
+        expect(someViewport.container.length).toBe(2);
+        expect(fixture.debugElement.children.length).toBe(0);
+      });
+
+      it('should use a comment while stamping out `<ng-template>` elements.', () => {
+        const fixture =
+            TestBed.configureTestingModule({declarations: [MyComp]})
+                .overrideComponent(MyComp, {set: {template: '<ng-template></ng-template>'}})
+                .createComponent(MyComp);
+
+        const childNodesOfWrapper = getDOM().childNodes(fixture.nativeElement);
+        expect(childNodesOfWrapper.length).toBe(1);
+        expect(getDOM().isCommentNode(childNodesOfWrapper[0])).toBe(true);
+      });
+
+      it('should allow to transplant TemplateRefs into other ViewContainers', () => {
+        TestBed.configureTestingModule({
+          declarations: [
+            MyComp, SomeDirective, CompWithHost, ToolbarComponent, ToolbarViewContainer, ToolbarPart
+          ],
+          imports: [CommonModule],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template =
+            '<some-directive><toolbar><ng-template toolbarpart let-toolbarProp="toolbarProp">{{ctxProp}},{{toolbarProp}},<cmp-with-host></cmp-with-host></ng-template></toolbar></some-directive>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'From myComp';
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement)
+            .toHaveText('TOOLBAR(From myComp,From toolbar,Component with an injected host)');
+      });
+
+      describe('reference bindings', () => {
+        it('should assign a component to a ref-', () => {
+          TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
+          const template = '<p><child-cmp ref-alice></child-cmp></p>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          expect(fixture.debugElement.children[0].children[0].references !['alice'])
+              .toBeAnInstanceOf(ChildComp);
+        });
+
+        it('should assign a directive to a ref-', () => {
+          TestBed.configureTestingModule({declarations: [MyComp, ExportDir]});
+          const template = '<div><div export-dir #localdir="dir"></div></div>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          expect(fixture.debugElement.children[0].children[0].references !['localdir'])
+              .toBeAnInstanceOf(ExportDir);
+        });
+
+        it('should assign a directive to a ref when it has multiple exportAs names', () => {
+          TestBed.configureTestingModule(
+              {declarations: [MyComp, DirectiveWithMultipleExportAsNames]});
+
+          const template = '<div multiple-export-as #x="dirX" #y="dirY"></div>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+
+          const fixture = TestBed.createComponent(MyComp);
+          expect(fixture.debugElement.children[0].references !['x'])
+              .toBeAnInstanceOf(DirectiveWithMultipleExportAsNames);
+          expect(fixture.debugElement.children[0].references !['y'])
+              .toBeAnInstanceOf(DirectiveWithMultipleExportAsNames);
+        });
+
+        it('should make the assigned component accessible in property bindings, even if they were declared before the component',
+           () => {
+             TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
+             const template =
+                 '<ng-template [ngIf]="true">{{alice.ctxProp}}</ng-template>|{{alice.ctxProp}}|<child-cmp ref-alice></child-cmp>';
+             TestBed.overrideComponent(MyComp, {set: {template}});
+             const fixture = TestBed.createComponent(MyComp);
+
+             fixture.detectChanges();
+
+             expect(fixture.nativeElement).toHaveText('hello|hello|hello');
+           });
+
+        it('should assign two component instances each with a ref-', () => {
+          TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
+          const template =
+              '<p><child-cmp ref-alice></child-cmp><child-cmp ref-bob></child-cmp></p>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          const pEl = fixture.debugElement.children[0];
+
+          const alice = pEl.children[0].references !['alice'];
+          const bob = pEl.children[1].references !['bob'];
+          expect(alice).toBeAnInstanceOf(ChildComp);
+          expect(bob).toBeAnInstanceOf(ChildComp);
+          expect(alice).not.toBe(bob);
+        });
+
+        it('should assign the component instance to a ref- with shorthand syntax', () => {
+          TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
+          const template = '<child-cmp #alice></child-cmp>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          expect(fixture.debugElement.children[0].references !['alice'])
+              .toBeAnInstanceOf(ChildComp);
+        });
+
+        it('should assign the element instance to a user-defined variable', () => {
+          TestBed.configureTestingModule({declarations: [MyComp]});
+          const template = '<div><div ref-alice><i>Hello</i></div></div>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          const value = fixture.debugElement.children[0].children[0].references !['alice'];
+          expect(value).not.toBe(null);
+          expect(value.tagName.toLowerCase()).toEqual('div');
+        });
+
+        it('should assign the TemplateRef to a user-defined variable', () => {
+          const fixture =
+              TestBed.configureTestingModule({declarations: [MyComp]})
+                  .overrideComponent(
+                      MyComp, {set: {template: '<ng-template ref-alice></ng-template>'}})
+                  .createComponent(MyComp);
+
+          const value = fixture.debugElement.childNodes[0].references !['alice'];
+          expect(value.createEmbeddedView).toBeTruthy();
+        });
+
+        it('should preserve case', () => {
+          TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
+          const template = '<p><child-cmp ref-superAlice></child-cmp></p>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          expect(fixture.debugElement.children[0].children[0].references !['superAlice'])
+              .toBeAnInstanceOf(ChildComp);
+        });
+      });
+
+      describe('variables', () => {
+        it('should allow to use variables in a for loop', () => {
+          const template =
+              '<ng-template ngFor [ngForOf]="[1]" let-i><child-cmp-no-template #cmp></child-cmp-no-template>{{i}}-{{cmp.ctxProp}}</ng-template>';
+
+          const fixture =
+              TestBed.configureTestingModule({declarations: [MyComp, ChildCompNoTemplate]})
+                  .overrideComponent(MyComp, {set: {template}})
+                  .createComponent(MyComp);
+
+          fixture.detectChanges();
+          // Get the element at index 2, since index 0 is the <ng-template>.
+          expect(getDOM().childNodes(fixture.nativeElement)[2]).toHaveText('1-hello');
+        });
+      });
+
+      describe('OnPush components', () => {
+
+        it('should use ChangeDetectorRef to manually request a check', () => {
+          TestBed.configureTestingModule({declarations: [MyComp, [[PushCmpWithRef]]]});
+          const template = '<push-cmp-with-ref #cmp></push-cmp-with-ref>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          const cmp = fixture.debugElement.children[0].references !['cmp'];
+
+          fixture.detectChanges();
+          expect(cmp.numberOfChecks).toEqual(1);
+
+          fixture.detectChanges();
+          expect(cmp.numberOfChecks).toEqual(1);
+
+          cmp.propagate();
+
+          fixture.detectChanges();
+          expect(cmp.numberOfChecks).toEqual(2);
+        });
+
+        it('should be checked when its bindings got updated', () => {
+          TestBed.configureTestingModule(
+              {declarations: [MyComp, PushCmp, EventCmp], imports: [CommonModule]});
+          const template = '<push-cmp [prop]="ctxProp" #cmp></push-cmp>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          const cmp = fixture.debugElement.children[0].references !['cmp'];
+
+          fixture.componentInstance.ctxProp = 'one';
+          fixture.detectChanges();
+          expect(cmp.numberOfChecks).toEqual(1);
+
+          fixture.componentInstance.ctxProp = 'two';
+          fixture.detectChanges();
+          expect(cmp.numberOfChecks).toEqual(2);
+        });
+
+        if (getDOM().supportsDOMEvents()) {
+          it('should allow to destroy a component from within a host event handler',
+             fakeAsync(() => {
+               TestBed.configureTestingModule({declarations: [MyComp, [[PushCmpWithHostEvent]]]});
+               const template = '<push-cmp-with-host-event></push-cmp-with-host-event>';
+               TestBed.overrideComponent(MyComp, {set: {template}});
+               const fixture = TestBed.createComponent(MyComp);
+
+               tick();
+               fixture.detectChanges();
+
+               const cmpEl = fixture.debugElement.children[0];
+               const cmp: PushCmpWithHostEvent = cmpEl.injector.get(PushCmpWithHostEvent);
+               cmp.ctxCallback = (_: any) => fixture.destroy();
+
+               expect(() => cmpEl.triggerEventHandler('click', <Event>{})).not.toThrow();
+             }));
+        }
+
+        it('should be checked when an event is fired', () => {
+          TestBed.configureTestingModule(
+              {declarations: [MyComp, PushCmp, EventCmp], imports: [CommonModule]});
+          const template = '<push-cmp [prop]="ctxProp" #cmp></push-cmp>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          const cmpEl = fixture.debugElement.children[0];
+          const cmp = cmpEl.componentInstance;
+          fixture.detectChanges();
+          fixture.detectChanges();
+          expect(cmp.numberOfChecks).toEqual(1);
+
+          // regular element
+          cmpEl.children[0].triggerEventHandler('click', <Event>{});
+          fixture.detectChanges();
+          fixture.detectChanges();
+          expect(cmp.numberOfChecks).toEqual(2);
+
+          // element inside of an *ngIf
+          cmpEl.children[1].triggerEventHandler('click', <Event>{});
+          fixture.detectChanges();
+          fixture.detectChanges();
+          expect(cmp.numberOfChecks).toEqual(3);
+
+          // element inside a nested component
+          cmpEl.children[2].children[0].triggerEventHandler('click', <Event>{});
+          fixture.detectChanges();
+          fixture.detectChanges();
+          expect(cmp.numberOfChecks).toEqual(4);
+
+          // host element
+          cmpEl.triggerEventHandler('click', <Event>{});
+          fixture.detectChanges();
+          fixture.detectChanges();
+          expect(cmp.numberOfChecks).toEqual(5);
+        });
+
+        it('should not affect updating properties on the component', () => {
+          TestBed.configureTestingModule({declarations: [MyComp, [[PushCmpWithRef]]]});
+          const template = '<push-cmp-with-ref [prop]="ctxProp" #cmp></push-cmp-with-ref>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          const cmp = fixture.debugElement.children[0].references !['cmp'];
+
+          fixture.componentInstance.ctxProp = 'one';
+          fixture.detectChanges();
+          expect(cmp.prop).toEqual('one');
+
+          fixture.componentInstance.ctxProp = 'two';
+          fixture.detectChanges();
+          expect(cmp.prop).toEqual('two');
+        });
+
+        if (getDOM().supportsDOMEvents()) {
+          it('should be checked when an async pipe requests a check', fakeAsync(() => {
+               TestBed.configureTestingModule(
+                   {declarations: [MyComp, PushCmpWithAsyncPipe], imports: [CommonModule]});
+               const template = '<push-cmp-with-async #cmp></push-cmp-with-async>';
+               TestBed.overrideComponent(MyComp, {set: {template}});
+               const fixture = TestBed.createComponent(MyComp);
+
+               tick();
+
+               const cmp: PushCmpWithAsyncPipe =
+                   fixture.debugElement.children[0].references !['cmp'];
+               fixture.detectChanges();
+               expect(cmp.numberOfChecks).toEqual(1);
+
+               fixture.detectChanges();
+               fixture.detectChanges();
+               expect(cmp.numberOfChecks).toEqual(1);
+
+               cmp.resolve(2);
+               tick();
+
+               fixture.detectChanges();
+               expect(cmp.numberOfChecks).toEqual(2);
+             }));
+        }
+      });
+
+      it('should create a component that injects an @Host', () => {
+        TestBed.configureTestingModule({
+          declarations: [MyComp, SomeDirective, CompWithHost],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = `
+            <some-directive>
+              <p>
+                <cmp-with-host #child></cmp-with-host>
+              </p>
+            </some-directive>`;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        const childComponent =
+            fixture.debugElement.children[0].children[0].children[0].references !['child'];
+        expect(childComponent.myHost).toBeAnInstanceOf(SomeDirective);
+      });
+
+      it('should create a component that injects an @Host through viewcontainer directive', () => {
+        TestBed.configureTestingModule({
+          declarations: [MyComp, SomeDirective, CompWithHost],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = `
+            <some-directive>
+              <p *ngIf="true">
+                <cmp-with-host #child></cmp-with-host>
+              </p>
+            </some-directive>`;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.detectChanges();
+
+        const tc = fixture.debugElement.children[0].children[0].children[0];
+
+        const childComponent = tc.references !['child'];
+        expect(childComponent.myHost).toBeAnInstanceOf(SomeDirective);
+      });
+
+      it('should support events via EventEmitter on regular elements', async(() => {
+           TestBed.configureTestingModule(
+               {declarations: [MyComp, DirectiveEmittingEvent, DirectiveListeningEvent]});
+           const template = '<div emitter listener></div>';
+           TestBed.overrideComponent(MyComp, {set: {template}});
+           const fixture = TestBed.createComponent(MyComp);
+
+           const tc = fixture.debugElement.children[0];
+           const emitter = tc.injector.get(DirectiveEmittingEvent);
+           const listener = tc.injector.get(DirectiveListeningEvent);
+
+           expect(listener.msg).toEqual('');
+           let eventCount = 0;
+
+           emitter.event.subscribe({
+             next: () => {
+               eventCount++;
+               if (eventCount === 1) {
+                 expect(listener.msg).toEqual('fired !');
+                 fixture.destroy();
+                 emitter.fireEvent('fired again !');
+               } else {
+                 expect(listener.msg).toEqual('fired !');
+               }
+             }
+           });
+
+           emitter.fireEvent('fired !');
+         }));
+
+      it('should support events via EventEmitter on template elements', async(() => {
+           const fixture =
+               TestBed
+                   .configureTestingModule(
+                       {declarations: [MyComp, DirectiveEmittingEvent, DirectiveListeningEvent]})
+                   .overrideComponent(MyComp, {
+                     set: {
+                       template:
+                           '<ng-template emitter listener (event)="ctxProp=$event"></ng-template>'
+                     }
+                   })
+                   .createComponent(MyComp);
+
+           const tc = fixture.debugElement.childNodes[0];
+
+           const emitter = tc.injector.get(DirectiveEmittingEvent);
+           const myComp = fixture.debugElement.injector.get(MyComp);
+           const listener = tc.injector.get(DirectiveListeningEvent);
+
+           myComp.ctxProp = '';
+           expect(listener.msg).toEqual('');
+
+           emitter.event.subscribe({
+             next: () => {
+               expect(listener.msg).toEqual('fired !');
+               expect(myComp.ctxProp).toEqual('fired !');
+             }
+           });
+
+           emitter.fireEvent('fired !');
+         }));
+
+      it('should support [()] syntax', async(() => {
+           TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithTwoWayBinding]});
+           const template = '<div [(control)]="ctxProp" two-way></div>';
+           TestBed.overrideComponent(MyComp, {set: {template}});
+           const fixture = TestBed.createComponent(MyComp);
+           const tc = fixture.debugElement.children[0];
+           const dir = tc.injector.get(DirectiveWithTwoWayBinding);
+
+           fixture.componentInstance.ctxProp = 'one';
+           fixture.detectChanges();
+
+           expect(dir.control).toEqual('one');
+
+           dir.controlChange.subscribe(
+               {next: () => { expect(fixture.componentInstance.ctxProp).toEqual('two'); }});
+
+           dir.triggerChange('two');
+         }));
+
+      it('should support render events', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]});
+        const template = '<div listener></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        const tc = fixture.debugElement.children[0];
+        const listener = tc.injector.get(DirectiveListeningDomEvent);
+
+        dispatchEvent(tc.nativeElement, 'domEvent');
+
+        expect(listener.eventTypes).toEqual([
+          'domEvent', 'body_domEvent', 'document_domEvent', 'window_domEvent'
+        ]);
+
+        fixture.destroy();
+        listener.eventTypes = [];
+        dispatchEvent(tc.nativeElement, 'domEvent');
+        expect(listener.eventTypes).toEqual([]);
+      });
+
+      it('should support render global events', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]});
+        const template = '<div listener></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+        const doc = TestBed.get(DOCUMENT);
+
+        const tc = fixture.debugElement.children[0];
+        const listener = tc.injector.get(DirectiveListeningDomEvent);
+        dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
+        expect(listener.eventTypes).toEqual(['window_domEvent']);
+
+        listener.eventTypes = [];
+        dispatchEvent(getDOM().getGlobalEventTarget(doc, 'document'), 'domEvent');
+        expect(listener.eventTypes).toEqual(['document_domEvent', 'window_domEvent']);
+
+        fixture.destroy();
+        listener.eventTypes = [];
+        dispatchEvent(getDOM().getGlobalEventTarget(doc, 'body'), 'domEvent');
+        expect(listener.eventTypes).toEqual([]);
+      });
+
+      it('should support updating host element via hostAttributes on root elements', () => {
+        @Component({host: {'role': 'button'}, template: ''})
+        class ComponentUpdatingHostAttributes {
+        }
+
+        TestBed.configureTestingModule({declarations: [ComponentUpdatingHostAttributes]});
+        const fixture = TestBed.createComponent(ComponentUpdatingHostAttributes);
+
+        fixture.detectChanges();
+
+        expect(getDOM().getAttribute(fixture.debugElement.nativeElement, 'role')).toEqual('button');
+      });
+
+      it('should support updating host element via hostAttributes on host elements', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, DirectiveUpdatingHostAttributes]});
+        const template = '<div update-host-attributes></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.detectChanges();
+
+        expect(getDOM().getAttribute(fixture.debugElement.children[0].nativeElement, 'role'))
+            .toEqual('button');
+      });
+
+      it('should support updating host element via hostProperties', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, DirectiveUpdatingHostProperties]});
+        const template = '<div update-host-properties></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        const tc = fixture.debugElement.children[0];
+        const updateHost = tc.injector.get(DirectiveUpdatingHostProperties);
+
+        updateHost.id = 'newId';
+
+        fixture.detectChanges();
+
+        expect(getDOM().getProperty(tc.nativeElement, 'id')).toEqual('newId');
+      });
+
+      it('should not use template variables for expressions in hostProperties', () => {
+        @Directive({selector: '[host-properties]', host: {'[id]': 'id', '[title]': 'unknownProp'}})
+        class DirectiveWithHostProps {
+          id = 'one';
+        }
+
+        const fixture =
+            TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostProps]})
+                .overrideComponent(
+                    MyComp,
+                    {set: {template: `<div *ngFor="let id of ['forId']" host-properties></div>`}})
+                .createComponent(MyComp);
+        fixture.detectChanges();
+
+        const tc = fixture.debugElement.children[0];
+        expect(tc.properties['id']).toBe('one');
+        expect(tc.properties['title']).toBe(undefined);
+      });
+
+      it('should not allow pipes in hostProperties', () => {
+        @Directive({selector: '[host-properties]', host: {'[id]': 'id | uppercase'}})
+        class DirectiveWithHostProps {
+        }
+
+        TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostProps]});
+        const template = '<div host-properties></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        expect(() => TestBed.createComponent(MyComp))
+            .toThrowError(/Host binding expression cannot contain pipes/);
+      });
+
+      it('should not use template variables for expressions in hostListeners', () => {
+        @Directive({selector: '[host-listener]', host: {'(click)': 'doIt(id, unknownProp)'}})
+        class DirectiveWithHostListener {
+          id = 'one';
+          // TODO(issue/24571): remove '!'.
+          receivedArgs !: any[];
+
+          doIt(...args: any[]) { this.receivedArgs = args; }
+        }
+
+        const fixture =
+            TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostListener]})
+                .overrideComponent(
+                    MyComp,
+                    {set: {template: `<div *ngFor="let id of ['forId']" host-listener></div>`}})
+                .createComponent(MyComp);
+        fixture.detectChanges();
+        const tc = fixture.debugElement.children[0];
+        tc.triggerEventHandler('click', {});
+        const dir: DirectiveWithHostListener = tc.injector.get(DirectiveWithHostListener);
+        expect(dir.receivedArgs).toEqual(['one', undefined]);
+      });
+
+      it('should not allow pipes in hostListeners', () => {
+        @Directive({selector: '[host-listener]', host: {'(click)': 'doIt() | somePipe'}})
+        class DirectiveWithHostListener {
+        }
+
+        TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostListener]});
+        const template = '<div host-listener></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        expect(() => TestBed.createComponent(MyComp))
+            .toThrowError(/Cannot have a pipe in an action expression/);
+      });
+
+
+
+      if (getDOM().supportsDOMEvents()) {
+        it('should support preventing default on render events', () => {
+          TestBed.configureTestingModule({
+            declarations:
+                [MyComp, DirectiveListeningDomEventPrevent, DirectiveListeningDomEventNoPrevent]
+          });
+          const template =
+              '<input type="checkbox" listenerprevent><input type="checkbox" listenernoprevent>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          const dispatchedEvent = getDOM().createMouseEvent('click');
+          const dispatchedEvent2 = getDOM().createMouseEvent('click');
+          getDOM().dispatchEvent(fixture.debugElement.children[0].nativeElement, dispatchedEvent);
+          getDOM().dispatchEvent(fixture.debugElement.children[1].nativeElement, dispatchedEvent2);
+          expect(getDOM().isPrevented(dispatchedEvent)).toBe(true);
+          expect(getDOM().isPrevented(dispatchedEvent2)).toBe(false);
+          expect(getDOM().getChecked(fixture.debugElement.children[0].nativeElement)).toBeFalsy();
+          expect(getDOM().getChecked(fixture.debugElement.children[1].nativeElement)).toBeTruthy();
+        });
+      }
+
+      it('should support render global events from multiple directives', () => {
+        TestBed.configureTestingModule(
+            {declarations: [MyComp, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]});
+        const template = '<div *ngIf="ctxBoolProp" listener listenerother></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+        const doc = TestBed.get(DOCUMENT);
+
+        globalCounter = 0;
+        fixture.componentInstance.ctxBoolProp = true;
+        fixture.detectChanges();
+
+        const tc = fixture.debugElement.children[0];
+
+        const listener = tc.injector.get(DirectiveListeningDomEvent);
+        const listenerother = tc.injector.get(DirectiveListeningDomEventOther);
+        dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
+        expect(listener.eventTypes).toEqual(['window_domEvent']);
+        expect(listenerother.eventType).toEqual('other_domEvent');
+        expect(globalCounter).toEqual(1);
+
+
+        fixture.componentInstance.ctxBoolProp = false;
+        fixture.detectChanges();
+        dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
+        expect(globalCounter).toEqual(1);
+
+        fixture.componentInstance.ctxBoolProp = true;
+        fixture.detectChanges();
+        dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
+        expect(globalCounter).toEqual(2);
+
+        // need to destroy to release all remaining global event listeners
+        fixture.destroy();
+      });
+
+      describe('ViewContainerRef', () => {
+        beforeEach(() => {
+          // we need a module to declarate ChildCompUsingService as an entryComponent otherwise the
+          // factory doesn't get created
+          @NgModule({
+            declarations: [MyComp, DynamicViewport, ChildCompUsingService],
+            entryComponents: [ChildCompUsingService],
+            schemas: [NO_ERRORS_SCHEMA],
+          })
+          class MyModule {
+          }
+
+          TestBed.configureTestingModule({imports: [MyModule]});
+          TestBed.overrideComponent(
+              MyComp, {add: {template: '<div><dynamic-vp #dynamic></dynamic-vp></div>'}});
+        });
+
+        describe('.createComponent', () => {
+          it('should allow to create a component at any bound location', async(() => {
+               const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
+                                   .createComponent(MyComp);
+               const tc = fixture.debugElement.children[0].children[0];
+               const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+               dynamicVp.create();
+               fixture.detectChanges();
+               expect(fixture.debugElement.children[0].children[1].nativeElement)
+                   .toHaveText('dynamic greet');
+             }));
+
+          it('should allow to create multiple components at a location', async(() => {
+               const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
+                                   .createComponent(MyComp);
+               const tc = fixture.debugElement.children[0].children[0];
+               const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+               dynamicVp.create();
+               dynamicVp.create();
+               fixture.detectChanges();
+               expect(fixture.debugElement.children[0].children[1].nativeElement)
+                   .toHaveText('dynamic greet');
+               expect(fixture.debugElement.children[0].children[2].nativeElement)
+                   .toHaveText('dynamic greet');
+             }));
+
+          it('should create a component that has been freshly compiled', () => {
+            @Component({template: ''})
+            class RootComp {
+              constructor(public vc: ViewContainerRef) {}
+            }
+
+            @NgModule({
+              declarations: [RootComp],
+              providers: [{provide: 'someToken', useValue: 'someRootValue'}],
+            })
+            class RootModule {
+            }
+
+            @Component({template: ''})
+            class MyComp {
+              constructor(@Inject('someToken') public someToken: string) {}
+            }
+
+            @NgModule({
+              declarations: [MyComp],
+              providers: [{provide: 'someToken', useValue: 'someValue'}],
+            })
+            class MyModule {
+            }
+
+            const compFixture =
+                TestBed.configureTestingModule({imports: [RootModule]}).createComponent(RootComp);
+            const compiler = <Compiler>TestBed.get(Compiler);
+            const myCompFactory =
+                <ComponentFactory<MyComp>>compiler.compileModuleAndAllComponentsSync(MyModule)
+                    .componentFactories[0];
+
+            // Note: the ComponentFactory was created directly via the compiler, i.e. it
+            // does not have an association to an NgModuleRef.
+            // -> expect the providers of the module that the view container belongs to.
+            const compRef = compFixture.componentInstance.vc.createComponent(myCompFactory);
+            expect(compRef.instance.someToken).toBe('someRootValue');
+          });
+
+          it('should create a component with the passed NgModuleRef', () => {
+            @Component({template: ''})
+            class RootComp {
+              constructor(public vc: ViewContainerRef) {}
+            }
+
+            @Component({template: ''})
+            class MyComp {
+              constructor(@Inject('someToken') public someToken: string) {}
+            }
+
+            @NgModule({
+              declarations: [RootComp, MyComp],
+              entryComponents: [MyComp],
+              providers: [{provide: 'someToken', useValue: 'someRootValue'}],
+            })
+            class RootModule {
+            }
+
+            @NgModule({providers: [{provide: 'someToken', useValue: 'someValue'}]})
+            class MyModule {
+            }
+
+            const compFixture =
+                TestBed.configureTestingModule({imports: [RootModule]}).createComponent(RootComp);
+            const compiler = <Compiler>TestBed.get(Compiler);
+            const myModule = compiler.compileModuleSync(MyModule).create(TestBed.get(NgModuleRef));
+            const myCompFactory = (<ComponentFactoryResolver>TestBed.get(ComponentFactoryResolver))
+                                      .resolveComponentFactory(MyComp);
+
+            // Note: MyComp was declared as entryComponent in the RootModule,
+            // but we pass MyModule to the createComponent call.
+            // -> expect the providers of MyModule!
+            const compRef = compFixture.componentInstance.vc.createComponent(
+                myCompFactory, undefined, undefined, undefined, myModule);
+            expect(compRef.instance.someToken).toBe('someValue');
+          });
+
+          it('should create a component with the NgModuleRef of the ComponentFactoryResolver',
+             () => {
+               @Component({template: ''})
+               class RootComp {
+                 constructor(public vc: ViewContainerRef) {}
+               }
+
+               @NgModule({
+                 declarations: [RootComp],
+                 providers: [{provide: 'someToken', useValue: 'someRootValue'}],
+               })
+               class RootModule {
+               }
+
+               @Component({template: ''})
+               class MyComp {
+                 constructor(@Inject('someToken') public someToken: string) {}
+               }
+
+               @NgModule({
+                 declarations: [MyComp],
+                 entryComponents: [MyComp],
+                 providers: [{provide: 'someToken', useValue: 'someValue'}],
+               })
+               class MyModule {
+               }
+
+               const compFixture = TestBed.configureTestingModule({imports: [RootModule]})
+                                       .createComponent(RootComp);
+               const compiler = <Compiler>TestBed.get(Compiler);
+               const myModule =
+                   compiler.compileModuleSync(MyModule).create(TestBed.get(NgModuleRef));
+               const myCompFactory =
+                   myModule.componentFactoryResolver.resolveComponentFactory(MyComp);
+
+               // Note: MyComp was declared as entryComponent in MyModule,
+               // and we don't pass an explicit ModuleRef to the createComponent call.
+               // -> expect the providers of MyModule!
+               const compRef = compFixture.componentInstance.vc.createComponent(myCompFactory);
+               expect(compRef.instance.someToken).toBe('someValue');
+             });
+        });
+
+        describe('.insert', () => {
+          it('should throw with destroyed views', async(() => {
+               const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
+                                   .createComponent(MyComp);
+               const tc = fixture.debugElement.children[0].children[0];
+               const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+               const ref = dynamicVp.create();
+               fixture.detectChanges();
+
+               ref.destroy();
+               expect(() => {
+                 dynamicVp.insert(ref.hostView);
+               }).toThrowError('Cannot insert a destroyed View in a ViewContainer!');
+             }));
+        });
+
+        describe('.move', () => {
+          it('should throw with destroyed views', async(() => {
+               const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
+                                   .createComponent(MyComp);
+               const tc = fixture.debugElement.children[0].children[0];
+               const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+               const ref = dynamicVp.create();
+               fixture.detectChanges();
+
+               ref.destroy();
+               expect(() => {
+                 dynamicVp.move(ref.hostView, 1);
+               }).toThrowError('Cannot move a destroyed View in a ViewContainer!');
+             }));
+        });
+
+      });
+
+      it('should support static attributes', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, NeedsAttribute]});
+        const template = '<input static type="text" title>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        const tc = fixture.debugElement.children[0];
+        const needsAttribute = tc.injector.get(NeedsAttribute);
+        expect(needsAttribute.typeAttribute).toEqual('text');
+        expect(needsAttribute.staticAttribute).toEqual('');
+        expect(needsAttribute.fooAttribute).toBeNull();
+      });
+
+      it('should support custom interpolation', () => {
+        TestBed.configureTestingModule({
+          declarations: [
+            MyComp, ComponentWithCustomInterpolationA, ComponentWithCustomInterpolationB,
+            ComponentWithDefaultInterpolation
+          ]
+        });
+        const template = `<div>{{ctxProp}}</div>
+<cmp-with-custom-interpolation-a></cmp-with-custom-interpolation-a>
+<cmp-with-custom-interpolation-b></cmp-with-custom-interpolation-b>`;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'Default Interpolation';
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement)
+            .toHaveText(
+                'Default InterpolationCustom Interpolation ACustom Interpolation B (Default Interpolation)');
+      });
+    });
+
+    describe('dependency injection', () => {
+      it('should support bindings', () => {
+        TestBed.configureTestingModule({
+          declarations: [MyComp, DirectiveProvidingInjectable, DirectiveConsumingInjectable],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = `
+            <directive-providing-injectable >
+              <directive-consuming-injectable #consuming>
+              </directive-consuming-injectable>
+            </directive-providing-injectable>
+          `;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        const comp = fixture.debugElement.children[0].children[0].references !['consuming'];
+        expect(comp.injectable).toBeAnInstanceOf(InjectableService);
+      });
+
+      it('should support viewProviders', () => {
+        TestBed.configureTestingModule({
+          declarations: [MyComp, DirectiveProvidingInjectableInView, DirectiveConsumingInjectable],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = `
+              <directive-consuming-injectable #consuming>
+              </directive-consuming-injectable>
+          `;
+        TestBed.overrideComponent(DirectiveProvidingInjectableInView, {set: {template}});
+        const fixture = TestBed.createComponent(DirectiveProvidingInjectableInView);
+
+        const comp = fixture.debugElement.children[0].references !['consuming'];
+        expect(comp.injectable).toBeAnInstanceOf(InjectableService);
+      });
+
+      it('should support unbounded lookup', () => {
+        TestBed.configureTestingModule({
+          declarations: [
+            MyComp, DirectiveProvidingInjectable, DirectiveContainingDirectiveConsumingAnInjectable,
+            DirectiveConsumingInjectableUnbounded
+          ],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = `
+            <directive-providing-injectable>
+              <directive-containing-directive-consuming-an-injectable #dir>
+              </directive-containing-directive-consuming-an-injectable>
+            </directive-providing-injectable>
+          `;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        TestBed.overrideComponent(DirectiveContainingDirectiveConsumingAnInjectable, {
+          set: {
+            template: `
+            <directive-consuming-injectable-unbounded></directive-consuming-injectable-unbounded>
+          `
+          }
+        });
+        const fixture = TestBed.createComponent(MyComp);
+
+        const comp = fixture.debugElement.children[0].children[0].references !['dir'];
+        expect(comp.directive.injectable).toBeAnInstanceOf(InjectableService);
+      });
+
+      it('should support the event-bus scenario', () => {
+        TestBed.configureTestingModule({
+          declarations: [
+            MyComp, GrandParentProvidingEventBus, ParentProvidingEventBus, ChildConsumingEventBus
+          ],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = `
+            <grand-parent-providing-event-bus>
+              <parent-providing-event-bus>
+                <child-consuming-event-bus>
+                </child-consuming-event-bus>
+              </parent-providing-event-bus>
+            </grand-parent-providing-event-bus>
+          `;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        const gpComp = fixture.debugElement.children[0];
+        const parentComp = gpComp.children[0];
+        const childComp = parentComp.children[0];
+
+        const grandParent = gpComp.injector.get(GrandParentProvidingEventBus);
+        const parent = parentComp.injector.get(ParentProvidingEventBus);
+        const child = childComp.injector.get(ChildConsumingEventBus);
+
+        expect(grandParent.bus.name).toEqual('grandparent');
+        expect(parent.bus.name).toEqual('parent');
+        expect(parent.grandParentBus).toBe(grandParent.bus);
+        expect(child.bus).toBe(parent.bus);
+      });
+
+      it('should instantiate bindings lazily', () => {
+        TestBed.configureTestingModule({
+          declarations: [MyComp, DirectiveConsumingInjectable, ComponentProvidingLoggingInjectable],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = `
+              <component-providing-logging-injectable #providing>
+                <directive-consuming-injectable *ngIf="ctxBoolProp">
+                </directive-consuming-injectable>
+              </component-providing-logging-injectable>
+          `;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        const providing = fixture.debugElement.children[0].references !['providing'];
+        expect(providing.created).toBe(false);
+
+        fixture.componentInstance.ctxBoolProp = true;
+        fixture.detectChanges();
+
+        expect(providing.created).toBe(true);
+      });
+    });
+
+    describe('corner cases', () => {
+      it('should remove script tags from templates', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = `
+            <script>alert("Ooops");</script>
+            <div>before<script>alert("Ooops");</script><span>inside</span>after</div>`;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        expect(getDOM().querySelectorAll(fixture.nativeElement, 'script').length).toEqual(0);
+      });
+
+      it('should throw when using directives without selector', () => {
+        @Directive({})
+        class SomeDirective {
+        }
+
+        @Component({selector: 'comp', template: ''})
+        class SomeComponent {
+        }
+
+        TestBed.configureTestingModule({declarations: [MyComp, SomeDirective, SomeComponent]});
+        expect(() => TestBed.createComponent(MyComp))
+            .toThrowError(`Directive ${stringify(SomeDirective)} has no selector, please add it!`);
+      });
+
+      it('should use a default element name for components without selectors', () => {
+        let noSelectorComponentFactory: ComponentFactory<SomeComponent> = undefined !;
+
+        @Component({template: '----'})
+        class NoSelectorComponent {
+        }
+
+        @Component({selector: 'some-comp', template: '', entryComponents: [NoSelectorComponent]})
+        class SomeComponent {
+          constructor(componentFactoryResolver: ComponentFactoryResolver) {
+            // grab its own component factory
+            noSelectorComponentFactory =
+                componentFactoryResolver.resolveComponentFactory(NoSelectorComponent) !;
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [SomeComponent, NoSelectorComponent]});
+
+        // get the factory
+        TestBed.createComponent(SomeComponent);
+
+        expect(noSelectorComponentFactory.selector).toBe('ng-component');
+
+        expect(
+            getDOM()
+                .nodeName(noSelectorComponentFactory.create(Injector.NULL).location.nativeElement)
+                .toLowerCase())
+            .toEqual('ng-component');
+      });
+    });
+
+    describe('error handling', () => {
+      it('should report a meaningful error when a directive is missing annotation', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, SomeDirectiveMissingAnnotation]});
+
+        expect(() => TestBed.createComponent(MyComp))
+            .toThrowError(
+                `Unexpected value '${stringify(SomeDirectiveMissingAnnotation)}' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Directive/@Component annotation.`);
+      });
+
+      it('should report a meaningful error when a component is missing view annotation', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, ComponentWithoutView]});
+        try {
+          TestBed.createComponent(ComponentWithoutView);
+          expect(true).toBe(false);
+        } catch (e) {
+          expect(e.message).toContain(
+              `No template specified for component ${stringify(ComponentWithoutView)}`);
+        }
+      });
+
+      it('should provide an error context when an error happens in DI', () => {
+        TestBed.configureTestingModule({
+          declarations: [MyComp, DirectiveThrowingAnError],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = `<directive-throwing-error></directive-throwing-error>`;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+
+        try {
+          TestBed.createComponent(MyComp);
+          throw 'Should throw';
+        } catch (e) {
+          const c = getDebugContext(e);
+          expect(getDOM().nodeName(c.componentRenderElement).toUpperCase()).toEqual('DIV');
+          expect((<Injector>c.injector).get).toBeTruthy();
+        }
+      });
+
+      it('should provide an error context when an error happens in change detection', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, DirectiveThrowingAnError]});
+        const template = `<input [value]="one.two.three" #local>`;
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+        try {
+          fixture.detectChanges();
+          throw 'Should throw';
+        } catch (e) {
+          const c = getDebugContext(e);
+          expect(getDOM().nodeName(c.renderNode).toUpperCase()).toEqual('INPUT');
+          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();
+        }
+      });
+
+      it('should provide an error context when an error happens in change detection (text node)',
+         () => {
+           TestBed.configureTestingModule({declarations: [MyComp]});
+           const template = `<div>{{one.two.three}}</div>`;
+           TestBed.overrideComponent(MyComp, {set: {template}});
+           const fixture = TestBed.createComponent(MyComp);
+           try {
+             fixture.detectChanges();
+             throw 'Should throw';
+           } catch (e) {
+             const c = getDebugContext(e);
+             expect(c.renderNode).toBeTruthy();
+           }
+         });
+
+      if (getDOM().supportsDOMEvents()) {  // this is required to use fakeAsync
+        it('should provide an error context when an error happens in an event handler',
+           fakeAsync(() => {
+             TestBed.configureTestingModule({
+               declarations: [MyComp, DirectiveEmittingEvent, DirectiveListeningEvent],
+               schemas: [NO_ERRORS_SCHEMA],
+             });
+             const template = `<span emitter listener (event)="throwError()" #local></span>`;
+             TestBed.overrideComponent(MyComp, {set: {template}});
+             const fixture = TestBed.createComponent(MyComp);
+             tick();
+
+             const tc = fixture.debugElement.children[0];
+
+             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();
+           }));
+      }
+    });
+
+    it('should support imperative views', () => {
+      TestBed.configureTestingModule({declarations: [MyComp, SimpleImperativeViewComponent]});
+      const template = '<simple-imp-cmp></simple-imp-cmp>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+
+      expect(fixture.nativeElement).toHaveText('hello imp view');
+    });
+
+    it('should support moving embedded views around', () => {
+      TestBed.configureTestingModule({
+        declarations: [MyComp, SomeImperativeViewport],
+        providers: [{provide: ANCHOR_ELEMENT, useValue: el('<div></div>')}],
+      });
+      const template = '<div><div *someImpvp="ctxBoolProp">hello</div></div>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const anchorElement = getTestBed().get(ANCHOR_ELEMENT);
+      const fixture = TestBed.createComponent(MyComp);
+
+      fixture.detectChanges();
+      expect(anchorElement).toHaveText('');
+
+      fixture.componentInstance.ctxBoolProp = true;
+      fixture.detectChanges();
+
+      expect(anchorElement).toHaveText('hello');
+
+      fixture.componentInstance.ctxBoolProp = false;
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText('');
+    });
+
+    describe('Property bindings', () => {
+      it('should throw on bindings to unknown properties', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template = '<div unknown="{{ctxProp}}"></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        try {
+          TestBed.createComponent(MyComp);
+          throw 'Should throw';
+        } catch (e) {
+          expect(e.message).toMatch(
+              /Template parse errors:\nCan't bind to 'unknown' since it isn't a known property of 'div'. \("<div \[ERROR ->\]unknown="{{ctxProp}}"><\/div>"\): .*MyComp.html@0:5/);
+        }
+      });
+
+      it('should not throw for property binding to a non-existing property when there is a matching directive property',
+         () => {
+           TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
+           const template = '<div my-dir [elprop]="ctxProp"></div>';
+           TestBed.overrideComponent(MyComp, {set: {template}});
+           expect(() => TestBed.createComponent(MyComp)).not.toThrow();
+         });
+
+      it('should not be created when there is a directive with the same property', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithTitle]});
+        const template = '<span [title]="ctxProp"></span>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'TITLE';
+        fixture.detectChanges();
+
+        const el = getDOM().querySelector(fixture.nativeElement, 'span');
+        expect(el.title).toBeFalsy();
+      });
+
+      it('should work when a directive uses hostProperty to update the DOM element', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithTitleAndHostProperty]});
+        const template = '<span [title]="ctxProp"></span>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'TITLE';
+        fixture.detectChanges();
+
+        const el = getDOM().querySelector(fixture.nativeElement, 'span');
+        expect(getDOM().getProperty(el, 'title')).toEqual('TITLE');
+      });
+    });
+
+    describe('logging property updates', () => {
+      it('should reflect property values as attributes', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
+        const template = '<div>' +
+            '<div my-dir [elprop]="ctxProp"></div>' +
+            '</div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.componentInstance.ctxProp = 'hello';
+        fixture.detectChanges();
+
+        expect(getDOM().getInnerHTML(fixture.nativeElement))
+            .toContain('ng-reflect-dir-prop="hello"');
+      });
+
+      it(`should work with prop names containing '$'`, () => {
+        TestBed.configureTestingModule({declarations: [ParentCmp, SomeCmpWithInput]});
+        const fixture = TestBed.createComponent(ParentCmp);
+        fixture.detectChanges();
+
+        expect(getDOM().getInnerHTML(fixture.nativeElement)).toContain('ng-reflect-test_="hello"');
+      });
+
+      it('should reflect property values on template comments', () => {
+        const fixture =
+            TestBed.configureTestingModule({declarations: [MyComp]})
+                .overrideComponent(
+                    MyComp, {set: {template: '<ng-template [ngIf]="ctxBoolProp"></ng-template>'}})
+                .createComponent(MyComp);
+
+        fixture.componentInstance.ctxBoolProp = true;
+        fixture.detectChanges();
+
+        expect(getDOM().getInnerHTML(fixture.nativeElement))
+            .toContain('"ng\-reflect\-ng\-if"\: "true"');
+      });
+
+      it('should indicate when toString() throws', () => {
+        TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
+        const template = '<div my-dir [elprop]="toStringThrow"></div>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.detectChanges();
+        expect(getDOM().getInnerHTML(fixture.nativeElement)).toContain('[ERROR]');
+      });
+    });
+
+    describe('property decorators', () => {
+      it('should support property decorators', () => {
+        TestBed.configureTestingModule({
+          declarations: [MyComp, DirectiveWithPropDecorators],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = '<with-prop-decorators elProp="aaa"></with-prop-decorators>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.detectChanges();
+        const dir = fixture.debugElement.children[0].injector.get(DirectiveWithPropDecorators);
+        expect(dir.dirProp).toEqual('aaa');
+      });
+
+      it('should support host binding decorators', () => {
+        TestBed.configureTestingModule({
+          declarations: [MyComp, DirectiveWithPropDecorators],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = '<with-prop-decorators></with-prop-decorators>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.detectChanges();
+        const dir = fixture.debugElement.children[0].injector.get(DirectiveWithPropDecorators);
+        dir.myAttr = 'aaa';
+
+        fixture.detectChanges();
+        expect(getDOM().getOuterHTML(fixture.debugElement.children[0].nativeElement))
+            .toContain('my-attr="aaa"');
+      });
+
+      if (getDOM().supportsDOMEvents()) {
+        it('should support event decorators', fakeAsync(() => {
+             TestBed.configureTestingModule({
+               declarations: [MyComp, DirectiveWithPropDecorators],
+               schemas: [NO_ERRORS_SCHEMA],
+             });
+             const template = `<with-prop-decorators (elEvent)="ctxProp='called'">`;
+             TestBed.overrideComponent(MyComp, {set: {template}});
+             const fixture = TestBed.createComponent(MyComp);
+
+             tick();
+
+             const emitter =
+                 fixture.debugElement.children[0].injector.get(DirectiveWithPropDecorators);
+             emitter.fireEvent('fired !');
+
+             tick();
+
+             expect(fixture.componentInstance.ctxProp).toEqual('called');
+           }));
+
+
+        it('should support host listener decorators', () => {
+          TestBed.configureTestingModule({
+            declarations: [MyComp, DirectiveWithPropDecorators],
+            schemas: [NO_ERRORS_SCHEMA],
+          });
+          const template = '<with-prop-decorators></with-prop-decorators>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          fixture.detectChanges();
+          const dir = fixture.debugElement.children[0].injector.get(DirectiveWithPropDecorators);
+          const native = fixture.debugElement.children[0].nativeElement;
+          getDOM().dispatchEvent(native, getDOM().createMouseEvent('click'));
+
+          expect(dir.target).toBe(native);
+        });
+      }
+
+      it('should support defining views in the component decorator', () => {
+        TestBed.configureTestingModule({
+          declarations: [MyComp, ComponentWithTemplate],
+          imports: [CommonModule],
+          schemas: [NO_ERRORS_SCHEMA],
+        });
+        const template = '<component-with-template></component-with-template>';
+        TestBed.overrideComponent(MyComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp);
+
+        fixture.detectChanges();
+        const native = fixture.debugElement.children[0].nativeElement;
+        expect(native).toHaveText('No View Decorator: 123');
+      });
+    });
+
+    describe('whitespaces in templates', () => {
+      it('should not remove whitespaces by default', async(() => {
+           @Component({
+             selector: 'comp',
+             template: '<span>foo</span>  <span>bar</span>',
+           })
+           class MyCmp {
+           }
+
+           const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
+           f.detectChanges();
+
+           expect(f.nativeElement.childNodes.length).toBe(2);
+         }));
+
+      it('should not remove whitespaces when explicitly requested not to do so', async(() => {
+           @Component({
+             selector: 'comp',
+             template: '<span>foo</span>  <span>bar</span>',
+             preserveWhitespaces: true,
+           })
+           class MyCmp {
+           }
+
+           const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
+           f.detectChanges();
+
+           expect(f.nativeElement.childNodes.length).toBe(3);
+         }));
+
+      it('should remove whitespaces when explicitly requested to do so', async(() => {
+           @Component({
+             selector: 'comp',
+             template: '<span>foo</span>  <span>bar</span>',
+             preserveWhitespaces: false,
+           })
+           class MyCmp {
+           }
+
+           const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
+           f.detectChanges();
+
+           expect(f.nativeElement.childNodes.length).toBe(2);
+         }));
+    });
+
+    if (getDOM().supportsDOMEvents()) {
+      describe('svg', () => {
+        it('should support svg elements', () => {
+          TestBed.configureTestingModule({declarations: [MyComp]});
+          const template = '<svg><use xlink:href="Port" /></svg>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          const el = fixture.nativeElement;
+          const svg = getDOM().childNodes(el)[0];
+          const use = getDOM().childNodes(svg)[0];
+          expect(getDOM().getProperty(<Element>svg, 'namespaceURI'))
+              .toEqual('http://www.w3.org/2000/svg');
+          expect(getDOM().getProperty(<Element>use, 'namespaceURI'))
+              .toEqual('http://www.w3.org/2000/svg');
+
+          const firstAttribute = getDOM().getProperty(<Element>use, 'attributes')[0];
+          expect(firstAttribute.name).toEqual('xlink:href');
+          expect(firstAttribute.namespaceURI).toEqual('http://www.w3.org/1999/xlink');
+        });
+
+        it('should support foreignObjects with document fragments', () => {
+          TestBed.configureTestingModule({declarations: [MyComp]});
+          const template =
+              '<svg><foreignObject><xhtml:div><p>Test</p></xhtml:div></foreignObject></svg>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+          const fixture = TestBed.createComponent(MyComp);
+
+          const el = fixture.nativeElement;
+          const svg = getDOM().childNodes(el)[0];
+          const foreignObject = getDOM().childNodes(svg)[0];
+          const p = getDOM().childNodes(foreignObject)[0];
+          expect(getDOM().getProperty(<Element>svg, 'namespaceURI'))
+              .toEqual('http://www.w3.org/2000/svg');
+          expect(getDOM().getProperty(<Element>foreignObject, 'namespaceURI'))
+              .toEqual('http://www.w3.org/2000/svg');
+          expect(getDOM().getProperty(<Element>p, 'namespaceURI'))
+              .toEqual('http://www.w3.org/1999/xhtml');
+        });
+      });
+
+      describe('attributes', () => {
+
+        it('should support attributes with namespace', () => {
+          TestBed.configureTestingModule({declarations: [MyComp, SomeCmp]});
+          const template = '<svg:use xlink:href="#id" />';
+          TestBed.overrideComponent(SomeCmp, {set: {template}});
+          const fixture = TestBed.createComponent(SomeCmp);
+
+          const useEl = getDOM().firstChild(fixture.nativeElement);
+          expect(getDOM().getAttributeNS(useEl, 'http://www.w3.org/1999/xlink', 'href'))
+              .toEqual('#id');
+        });
+
+        it('should support binding to attributes with namespace', () => {
+          TestBed.configureTestingModule({declarations: [MyComp, SomeCmp]});
+          const template = '<svg:use [attr.xlink:href]="value" />';
+          TestBed.overrideComponent(SomeCmp, {set: {template}});
+          const fixture = TestBed.createComponent(SomeCmp);
+
+          const cmp = fixture.componentInstance;
+          const useEl = getDOM().firstChild(fixture.nativeElement);
+
+          cmp.value = '#id';
+          fixture.detectChanges();
+
+          expect(getDOM().getAttributeNS(useEl, 'http://www.w3.org/1999/xlink', 'href'))
+              .toEqual('#id');
+
+          cmp.value = null;
+          fixture.detectChanges();
+
+          expect(getDOM().hasAttributeNS(useEl, 'http://www.w3.org/1999/xlink', 'href'))
+              .toEqual(false);
+        });
+      });
+    }
+  });
+}
+
+
+@Component({selector: 'cmp-with-default-interpolation', template: `{{text}}`})
+class ComponentWithDefaultInterpolation {
+  text = 'Default Interpolation';
+}
+
+@Component({
+  selector: 'cmp-with-custom-interpolation-a',
+  template: `<div>{%text%}</div>`,
+  interpolation: ['{%', '%}']
+})
+class ComponentWithCustomInterpolationA {
+  text = 'Custom Interpolation A';
+}
+
+@Component({
+  selector: 'cmp-with-custom-interpolation-b',
+  template:
+      `<div>{**text%}</div> (<cmp-with-default-interpolation></cmp-with-default-interpolation>)`,
+  interpolation: ['{**', '%}']
+})
+class ComponentWithCustomInterpolationB {
+  text = 'Custom Interpolation B';
+}
+
+@Injectable()
+class MyService {
+  greeting: string;
+  constructor() { this.greeting = 'hello'; }
+}
+
+@Component({selector: 'simple-imp-cmp', template: ''})
+class SimpleImperativeViewComponent {
+  done: any;
+
+  constructor(self: ElementRef) {
+    const hostElement = self.nativeElement;
+    getDOM().appendChild(hostElement, el('hello imp view'));
+  }
+}
+
+@Directive({selector: 'dynamic-vp'})
+class DynamicViewport {
+  private componentFactory: ComponentFactory<ChildCompUsingService>;
+  private injector: Injector;
+  constructor(private vc: ViewContainerRef, componentFactoryResolver: ComponentFactoryResolver) {
+    const myService = new MyService();
+    myService.greeting = 'dynamic greet';
+
+    this.injector = Injector.create([{provide: MyService, useValue: myService}], vc.injector);
+    this.componentFactory =
+        componentFactoryResolver.resolveComponentFactory(ChildCompUsingService) !;
+  }
+
+  create(): ComponentRef<ChildCompUsingService> {
+    return this.vc.createComponent(this.componentFactory, this.vc.length, this.injector);
+  }
+
+  insert(viewRef: ViewRef, index?: number): ViewRef { return this.vc.insert(viewRef, index); }
+
+  move(viewRef: ViewRef, currentIndex: number): ViewRef {
+    return this.vc.move(viewRef, currentIndex);
+  }
+}
+
+@Directive({selector: '[my-dir]', inputs: ['dirProp: elprop'], exportAs: 'mydir'})
+class MyDir {
+  dirProp: string;
+  constructor() { this.dirProp = ''; }
+}
+
+@Directive({selector: '[title]', inputs: ['title']})
+class DirectiveWithTitle {
+  // TODO(issue/24571): remove '!'.
+  title !: string;
+}
+
+@Directive({selector: '[title]', inputs: ['title'], host: {'[title]': 'title'}})
+class DirectiveWithTitleAndHostProperty {
+  // TODO(issue/24571): remove '!'.
+  title !: string;
+}
+
+@Component({selector: 'event-cmp', template: '<div (click)="noop()"></div>'})
+class EventCmp {
+  noop() {}
+}
+
+@Component({
+  selector: 'push-cmp',
+  inputs: ['prop'],
+  host: {'(click)': 'true'},
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template:
+      '{{field}}<div (click)="noop()"></div><div *ngIf="true" (click)="noop()"></div><event-cmp></event-cmp>'
+})
+class PushCmp {
+  numberOfChecks: number;
+  prop: any;
+
+  constructor() { this.numberOfChecks = 0; }
+
+  noop() {}
+
+  get field() {
+    this.numberOfChecks++;
+    return 'fixed';
+  }
+}
+
+@Component({
+  selector: 'push-cmp-with-ref',
+  inputs: ['prop'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '{{field}}'
+})
+class PushCmpWithRef {
+  numberOfChecks: number;
+  ref: ChangeDetectorRef;
+  prop: any;
+
+  constructor(ref: ChangeDetectorRef) {
+    this.numberOfChecks = 0;
+    this.ref = ref;
+  }
+
+  get field() {
+    this.numberOfChecks++;
+    return 'fixed';
+  }
+
+  propagate() { this.ref.markForCheck(); }
+}
+
+@Component({
+  selector: 'push-cmp-with-host-event',
+  host: {'(click)': 'ctxCallback($event)'},
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: ''
+})
+class PushCmpWithHostEvent {
+  ctxCallback: Function = (_: any) => {};
+}
+
+@Component({
+  selector: 'push-cmp-with-async',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '{{field | async}}'
+})
+class PushCmpWithAsyncPipe {
+  numberOfChecks: number = 0;
+  // TODO(issue/24571): remove '!'.
+  resolve !: (result: any) => void;
+  promise: Promise<any>;
+
+  constructor() {
+    this.promise = new Promise((resolve) => { this.resolve = resolve; });
+  }
+
+  get field() {
+    this.numberOfChecks++;
+    return this.promise;
+  }
+}
+
+@Component({selector: 'my-comp', template: ''})
+class MyComp {
+  ctxProp: string;
+  ctxNumProp: number;
+  ctxBoolProp: boolean;
+  toStringThrow = {toString: function() { throw 'boom'; }};
+
+  constructor() {
+    this.ctxProp = 'initial value';
+    this.ctxNumProp = 0;
+    this.ctxBoolProp = false;
+  }
+
+  throwError() { throw 'boom'; }
+}
+
+@Component({
+  selector: 'child-cmp',
+  inputs: ['dirProp'],
+  viewProviders: [MyService],
+  template: '{{ctxProp}}'
+})
+class ChildComp {
+  ctxProp: string;
+  dirProp: string|null;
+  constructor(service: MyService) {
+    this.ctxProp = service.greeting;
+    this.dirProp = null;
+  }
+}
+
+@Component({selector: 'child-cmp-no-template', template: ''})
+class ChildCompNoTemplate {
+  ctxProp: string = 'hello';
+}
+
+@Component({selector: 'child-cmp-svc', template: '{{ctxProp}}'})
+class ChildCompUsingService {
+  ctxProp: string;
+  constructor(service: MyService) { this.ctxProp = service.greeting; }
+}
+
+@Directive({selector: 'some-directive'})
+class SomeDirective {
+}
+
+class SomeDirectiveMissingAnnotation {}
+
+@Component({
+  selector: 'cmp-with-host',
+  template: '<p>Component with an injected host</p>',
+})
+class CompWithHost {
+  myHost: SomeDirective;
+  constructor(@Host() someComp: SomeDirective) { this.myHost = someComp; }
+}
+
+@Component({selector: '[child-cmp2]', viewProviders: [MyService]})
+class ChildComp2 {
+  ctxProp: string;
+  dirProp: string|null;
+  constructor(service: MyService) {
+    this.ctxProp = service.greeting;
+    this.dirProp = null;
+  }
+}
+
+class SomeViewportContext {
+  constructor(public someTmpl: string) {}
+}
+
+@Directive({selector: '[some-viewport]'})
+class SomeViewport {
+  constructor(public container: ViewContainerRef, templateRef: TemplateRef<SomeViewportContext>) {
+    container.createEmbeddedView(templateRef, new SomeViewportContext('hello'));
+    container.createEmbeddedView(templateRef, new SomeViewportContext('again'));
+  }
+}
+
+@Directive({selector: '[pollutedContext]'})
+class PollutedContext {
+  constructor(private tplRef: TemplateRef<any>, private vcRef: ViewContainerRef) {
+    const evRef = this.vcRef.createEmbeddedView(this.tplRef);
+    evRef.context.bar = 'baz';
+  }
+}
+
+@Directive({selector: '[noContext]'})
+class NoContext {
+  constructor(private tplRef: TemplateRef<any>, private vcRef: ViewContainerRef) {
+    this.vcRef.createEmbeddedView(this.tplRef);
+  }
+}
+
+@Pipe({name: 'double'})
+class DoublePipe implements PipeTransform, OnDestroy {
+  ngOnDestroy() {}
+  transform(value: any) { return `${value}${value}`; }
+}
+
+@Directive({selector: '[emitter]', outputs: ['event']})
+class DirectiveEmittingEvent {
+  msg: string;
+  event: EventEmitter<any>;
+
+  constructor() {
+    this.msg = '';
+    this.event = new EventEmitter();
+  }
+
+  fireEvent(msg: string) { this.event.emit(msg); }
+}
+
+@Directive({selector: '[update-host-attributes]', host: {'role': 'button'}})
+class DirectiveUpdatingHostAttributes {
+}
+
+@Directive({selector: '[update-host-properties]', host: {'[id]': 'id'}})
+class DirectiveUpdatingHostProperties {
+  id: string;
+
+  constructor() { this.id = 'one'; }
+}
+
+@Directive({selector: '[listener]', host: {'(event)': 'onEvent($event)'}})
+class DirectiveListeningEvent {
+  msg: string;
+
+  constructor() { this.msg = ''; }
+
+  onEvent(msg: string) { this.msg = msg; }
+}
+
+@Directive({
+  selector: '[listener]',
+  host: {
+    '(domEvent)': 'onEvent($event.type)',
+    '(window:domEvent)': 'onWindowEvent($event.type)',
+    '(document:domEvent)': 'onDocumentEvent($event.type)',
+    '(body:domEvent)': 'onBodyEvent($event.type)'
+  }
+})
+class DirectiveListeningDomEvent {
+  eventTypes: string[] = [];
+  onEvent(eventType: string) { this.eventTypes.push(eventType); }
+  onWindowEvent(eventType: string) { this.eventTypes.push('window_' + eventType); }
+  onDocumentEvent(eventType: string) { this.eventTypes.push('document_' + eventType); }
+  onBodyEvent(eventType: string) { this.eventTypes.push('body_' + eventType); }
+}
+
+let globalCounter = 0;
+@Directive({selector: '[listenerother]', host: {'(window:domEvent)': 'onEvent($event.type)'}})
+class DirectiveListeningDomEventOther {
+  eventType: string;
+  constructor() { this.eventType = ''; }
+  onEvent(eventType: string) {
+    globalCounter++;
+    this.eventType = 'other_' + eventType;
+  }
+}
+
+@Directive({selector: '[listenerprevent]', host: {'(click)': 'onEvent($event)'}})
+class DirectiveListeningDomEventPrevent {
+  onEvent(event: any) { return false; }
+}
+
+@Directive({selector: '[listenernoprevent]', host: {'(click)': 'onEvent($event)'}})
+class DirectiveListeningDomEventNoPrevent {
+  onEvent(event: any) { return true; }
+}
+
+@Directive({selector: '[id]', inputs: ['id']})
+class IdDir {
+  // TODO(issue/24571): remove '!'.
+  id !: string;
+}
+
+@Directive({selector: '[customEvent]'})
+class EventDir {
+  @Output() customEvent = new EventEmitter();
+  doSomething() {}
+}
+
+@Directive({selector: '[static]'})
+class NeedsAttribute {
+  typeAttribute: string;
+  staticAttribute: string;
+  fooAttribute: string;
+  constructor(
+      @Attribute('type') typeAttribute: string, @Attribute('static') staticAttribute: string,
+      @Attribute('foo') fooAttribute: string) {
+    this.typeAttribute = typeAttribute;
+    this.staticAttribute = staticAttribute;
+    this.fooAttribute = fooAttribute;
+  }
+}
+
+@Injectable()
+class PublicApi {
+}
+
+@Directive({
+  selector: '[public-api]',
+  providers: [{provide: PublicApi, useExisting: PrivateImpl, deps: []}]
+})
+class PrivateImpl extends PublicApi {
+}
+
+@Directive({selector: '[needs-public-api]'})
+class NeedsPublicApi {
+  constructor(@Host() api: PublicApi) { expect(api instanceof PrivateImpl).toBe(true); }
+}
+
+class ToolbarContext {
+  constructor(public toolbarProp: string) {}
+}
+
+@Directive({selector: '[toolbarpart]'})
+class ToolbarPart {
+  templateRef: TemplateRef<ToolbarContext>;
+  constructor(templateRef: TemplateRef<ToolbarContext>) { this.templateRef = templateRef; }
+}
+
+@Directive({selector: '[toolbarVc]', inputs: ['toolbarVc']})
+class ToolbarViewContainer {
+  constructor(public vc: ViewContainerRef) {}
+
+  set toolbarVc(part: ToolbarPart) {
+    this.vc.createEmbeddedView(part.templateRef, new ToolbarContext('From toolbar'), 0);
+  }
+}
+
+@Component({
+  selector: 'toolbar',
+  template: 'TOOLBAR(<div *ngFor="let  part of query" [toolbarVc]="part"></div>)',
+})
+class ToolbarComponent {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(ToolbarPart) query !: QueryList<ToolbarPart>;
+  ctxProp: string = 'hello world';
+
+  constructor() {}
+}
+
+@Directive({selector: '[two-way]', inputs: ['control'], outputs: ['controlChange']})
+class DirectiveWithTwoWayBinding {
+  controlChange = new EventEmitter();
+  control: any = null;
+
+  triggerChange(value: any) { this.controlChange.emit(value); }
+}
+
+@Injectable()
+class InjectableService {
+}
+
+function createInjectableWithLogging(inj: Injector) {
+  inj.get(ComponentProvidingLoggingInjectable).created = true;
+  return new InjectableService();
+}
+
+@Component({
+  selector: 'component-providing-logging-injectable',
+  providers:
+      [{provide: InjectableService, useFactory: createInjectableWithLogging, deps: [Injector]}],
+  template: ''
+})
+class ComponentProvidingLoggingInjectable {
+  created: boolean = false;
+}
+
+
+@Directive({selector: 'directive-providing-injectable', providers: [[InjectableService]]})
+class DirectiveProvidingInjectable {
+}
+
+@Component({
+  selector: 'directive-providing-injectable',
+  viewProviders: [[InjectableService]],
+  template: ''
+})
+class DirectiveProvidingInjectableInView {
+}
+
+@Component({
+  selector: 'directive-providing-injectable',
+  providers: [{provide: InjectableService, useValue: 'host'}],
+  viewProviders: [{provide: InjectableService, useValue: 'view'}],
+  template: ''
+})
+class DirectiveProvidingInjectableInHostAndView {
+}
+
+
+@Component({selector: 'directive-consuming-injectable', template: ''})
+class DirectiveConsumingInjectable {
+  injectable: any;
+
+  constructor(@Host() @Inject(InjectableService) injectable: any) { this.injectable = injectable; }
+}
+
+
+
+@Component({selector: 'directive-containing-directive-consuming-an-injectable'})
+class DirectiveContainingDirectiveConsumingAnInjectable {
+  directive: any;
+}
+
+@Component({selector: 'directive-consuming-injectable-unbounded', template: ''})
+class DirectiveConsumingInjectableUnbounded {
+  injectable: any;
+
+  constructor(
+      injectable: InjectableService,
+      @SkipSelf() parent: DirectiveContainingDirectiveConsumingAnInjectable) {
+    this.injectable = injectable;
+    parent.directive = this;
+  }
+}
+
+
+class EventBus {
+  parentEventBus: EventBus;
+  name: string;
+
+  constructor(parentEventBus: EventBus, name: string) {
+    this.parentEventBus = parentEventBus;
+    this.name = name;
+  }
+}
+
+@Directive({
+  selector: 'grand-parent-providing-event-bus',
+  providers: [{provide: EventBus, useValue: new EventBus(null !, 'grandparent')}]
+})
+class GrandParentProvidingEventBus {
+  bus: EventBus;
+
+  constructor(bus: EventBus) { this.bus = bus; }
+}
+
+function createParentBus(peb: EventBus) {
+  return new EventBus(peb, 'parent');
+}
+
+@Component({
+  selector: 'parent-providing-event-bus',
+  providers: [{provide: EventBus, useFactory: createParentBus, deps: [[EventBus, new SkipSelf()]]}],
+  template: `<child-consuming-event-bus></child-consuming-event-bus>`
+})
+class ParentProvidingEventBus {
+  bus: EventBus;
+  grandParentBus: EventBus;
+
+  constructor(bus: EventBus, @SkipSelf() grandParentBus: EventBus) {
+    this.bus = bus;
+    this.grandParentBus = grandParentBus;
+  }
+}
+
+@Directive({selector: 'child-consuming-event-bus'})
+class ChildConsumingEventBus {
+  bus: EventBus;
+
+  constructor(@SkipSelf() bus: EventBus) { this.bus = bus; }
+}
+
+@Directive({selector: '[someImpvp]', inputs: ['someImpvp']})
+class SomeImperativeViewport {
+  view: EmbeddedViewRef<Object>|null;
+  anchor: any;
+  constructor(
+      public vc: ViewContainerRef, public templateRef: TemplateRef<Object>,
+      @Inject(ANCHOR_ELEMENT) anchor: any) {
+    this.view = null;
+    this.anchor = anchor;
+  }
+
+  set someImpvp(value: boolean) {
+    if (this.view) {
+      this.vc.clear();
+      this.view = null;
+    }
+
+    if (value) {
+      this.view = this.vc.createEmbeddedView(this.templateRef);
+      const nodes = this.view.rootNodes;
+      for (let i = 0; i < nodes.length; i++) {
+        getDOM().appendChild(this.anchor, nodes[i]);
+      }
+    }
+  }
+}
+
+@Directive({selector: '[export-dir]', exportAs: 'dir'})
+class ExportDir {
+}
+
+@Directive({selector: '[multiple-export-as]', exportAs: 'dirX, dirY'})
+export class DirectiveWithMultipleExportAsNames {
+}
+
+@Component({selector: 'comp'})
+class ComponentWithoutView {
+}
+
+@Directive({selector: '[no-duplicate]'})
+class DuplicateDir {
+  constructor(elRef: ElementRef) {
+    getDOM().setText(elRef.nativeElement, getDOM().getText(elRef.nativeElement) + 'noduplicate');
+  }
+}
+
+@Directive({selector: '[no-duplicate]'})
+class OtherDuplicateDir {
+  constructor(elRef: ElementRef) {
+    getDOM().setText(
+        elRef.nativeElement, getDOM().getText(elRef.nativeElement) + 'othernoduplicate');
+  }
+}
+
+@Directive({selector: 'directive-throwing-error'})
+class DirectiveThrowingAnError {
+  constructor() { throw new Error('BOOM'); }
+}
+
+@Component({
+  selector: 'component-with-template',
+  template: `No View Decorator: <div *ngFor="let item of items">{{item}}</div>`
+})
+class ComponentWithTemplate {
+  items = [1, 2, 3];
+}
+
+@Directive({selector: 'with-prop-decorators'})
+class DirectiveWithPropDecorators {
+  target: any;
+
+  // TODO(issue/24571): remove '!'.
+  @Input('elProp') dirProp !: string;
+  @Output('elEvent') event = new EventEmitter();
+
+  // TODO(issue/24571): remove '!'.
+  @HostBinding('attr.my-attr') myAttr !: string;
+  @HostListener('click', ['$event.target'])
+  onClick(target: any) { this.target = target; }
+
+  fireEvent(msg: any) { this.event.emit(msg); }
+}
+
+@Component({selector: 'some-cmp'})
+class SomeCmp {
+  value: any;
+}
+
+@Component({
+  selector: 'parent-cmp',
+  template: `<cmp [test$]="name"></cmp>`,
+})
+export class ParentCmp {
+  name: string = 'hello';
+}
+
+@Component({selector: 'cmp', template: ''})
+class SomeCmpWithInput {
+  @Input() test$: any;
+}
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 000000000000..6dc22eb76efa
--- /dev/null
+++ b/packages/core/test/linker/jit_summaries_integration_spec.ts
@@ -0,0 +1,281 @@
+/**
+ * @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, OnDestroy, Pipe, Type} from '@angular/core';
+import {TestBed, async, getTestBed} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('Jit Summaries', () => {
+    let instances: Map<any, Base>;
+    let summaries: () => any[];
+
+    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) {}
+    }
+
+    @Component({template: ''})
+    class TestCompErrorOnDestroy implements OnDestroy {
+      ngOnDestroy() {}
+    }
+
+    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]});
+
+      let summariesPromise = 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();
+        TestBed.resetTestingModule();
+        return () => summaries;
+      });
+
+      resourceLoader.flush();
+      return summariesPromise;
+    }
+
+    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().then(s => summaries = s);
+    }));
+
+    afterEach(() => { resetTestEnvironmentWithSummaries(); });
+
+    it('should use directive metadata from summaries', () => {
+      resetTestEnvironmentWithSummaries(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', () => {
+      resetTestEnvironmentWithSummaries(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', () => {
+      resetTestEnvironmentWithSummaries(summaries);
+
+      TestBed.configureTestingModule({
+        providers: [SomeService, SomeDep],
+      });
+      TestBed.get(SomeService);
+      expectInstanceCreated(SomeService);
+    });
+
+    it('should use NgModule metadata from summaries', () => {
+      resetTestEnvironmentWithSummaries(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', () => {
+      resetTestEnvironmentWithSummaries(summaries);
+
+      TestBed.configureTestingModule({providers: [SomeDep], imports: [SomeModule]})
+          .createComponent(SomePrivateComponent);
+      expectInstanceCreated(SomePrivateComponent);
+    });
+
+    it('should throw when trying to mock a type with a summary', () => {
+      resetTestEnvironmentWithSummaries(summaries);
+
+      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.');
+    });
+
+    it('should return stack trace and component data on resetTestingModule when error is thrown',
+       () => {
+         resetTestEnvironmentWithSummaries();
+
+         const fixture = TestBed.configureTestingModule({declarations: [TestCompErrorOnDestroy]})
+                             .createComponent<TestCompErrorOnDestroy>(TestCompErrorOnDestroy);
+
+         const expectedError = 'Error from ngOnDestroy';
+
+         const component: TestCompErrorOnDestroy = fixture.componentInstance;
+
+         spyOn(console, 'error');
+         spyOn(component, 'ngOnDestroy').and.throwError(expectedError);
+
+         const expectedObject = {
+           stacktrace: new Error(expectedError),
+           component,
+         };
+
+         TestBed.resetTestingModule();
+
+         expect(console.error)
+             .toHaveBeenCalledWith('Error during cleanup of component', expectedObject);
+       });
+
+    it('should allow to add summaries via configureTestingModule', () => {
+      resetTestEnvironmentWithSummaries();
+
+      @Component({template: '<div someDir></div>'})
+      class TestComp {
+      }
+
+      TestBed
+          .configureTestingModule({
+            providers: [SomeDep],
+            declarations: [TestComp, SomeDirective],
+            aotSummaries: summaries
+          })
+          .createComponent(TestComp);
+      expectInstanceCreated(SomeDirective);
+    });
+
+    it('should allow to override a provider', () => {
+      resetTestEnvironmentWithSummaries(summaries);
+
+      const overwrittenValue = {};
+
+      const fixture =
+          TestBed.overrideProvider(SomeDep, {useFactory: () => overwrittenValue, deps: []})
+              .configureTestingModule({providers: [SomeDep], imports: [SomeModule]})
+              .createComponent<SomePublicComponent>(SomePublicComponent);
+
+      expect(fixture.componentInstance.dep).toBe(overwrittenValue);
+    });
+
+    it('should allow to override a template', () => {
+      resetTestEnvironmentWithSummaries(summaries);
+
+      TestBed.overrideTemplateUsingTestingModule(SomePublicComponent, 'overwritten');
+
+      const fixture = TestBed.configureTestingModule({providers: [SomeDep], imports: [SomeModule]})
+                          .createComponent(SomePublicComponent);
+      expectInstanceCreated(SomePublicComponent);
+
+      expect(fixture.nativeElement).toHaveText('overwritten');
+    });
+  });
+}
diff --git a/packages/core/test/linker/ng_container_integration_spec.ts b/packages/core/test/linker/ng_container_integration_spec.ts
new file mode 100644
index 000000000000..654c163f3ea9
--- /dev/null
+++ b/packages/core/test/linker/ng_container_integration_spec.ts
@@ -0,0 +1,189 @@
+/**
+ * @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 {AfterContentInit, AfterViewInit, Component, ContentChildren, Directive, Input, QueryList, ViewChildren} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('jit', () => { declareTests({useJit: true}); });
+  describe('no jit', () => { declareTests({useJit: false}); });
+}
+
+function declareTests({useJit}: {useJit: boolean}) {
+  describe('<ng-container>', function() {
+
+    beforeEach(() => {
+      TestBed.configureCompiler({useJit: useJit});
+      TestBed.configureTestingModule({
+        declarations: [
+          MyComp,
+          NeedsContentChildren,
+          NeedsViewChildren,
+          TextDirective,
+          Simple,
+        ],
+      });
+    });
+
+    it('should support the "i18n" attribute', () => {
+      const template = '<ng-container i18n>foo</ng-container>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+
+      fixture.detectChanges();
+
+      const el = fixture.nativeElement;
+      expect(el).toHaveText('foo');
+    });
+
+    it('should be rendered as comment with children as siblings', () => {
+      const template = '<ng-container><p></p></ng-container>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+
+      fixture.detectChanges();
+
+      const el = fixture.nativeElement;
+      const children = getDOM().childNodes(el);
+      expect(children.length).toBe(2);
+      expect(getDOM().isCommentNode(children[0])).toBe(true);
+      expect(getDOM().tagName(children[1]).toUpperCase()).toEqual('P');
+    });
+
+    it('should support nesting', () => {
+      const template =
+          '<ng-container>1</ng-container><ng-container><ng-container>2</ng-container></ng-container>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+
+      fixture.detectChanges();
+
+      const el = fixture.nativeElement;
+      const children = getDOM().childNodes(el);
+      expect(children.length).toBe(5);
+      expect(getDOM().isCommentNode(children[0])).toBe(true);
+      expect(children[1]).toHaveText('1');
+      expect(getDOM().isCommentNode(children[2])).toBe(true);
+      expect(getDOM().isCommentNode(children[3])).toBe(true);
+      expect(children[4]).toHaveText('2');
+    });
+
+    it('should group inner nodes', () => {
+      const template = '<ng-container *ngIf="ctxBoolProp"><p></p><b></b></ng-container>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+
+      fixture.componentInstance.ctxBoolProp = true;
+      fixture.detectChanges();
+
+      const el = fixture.nativeElement;
+      const children = getDOM().childNodes(el);
+
+      expect(children.length).toBe(4);
+      // ngIf anchor
+      expect(getDOM().isCommentNode(children[0])).toBe(true);
+      // ng-container anchor
+      expect(getDOM().isCommentNode(children[1])).toBe(true);
+      expect(getDOM().tagName(children[2]).toUpperCase()).toEqual('P');
+      expect(getDOM().tagName(children[3]).toUpperCase()).toEqual('B');
+
+      fixture.componentInstance.ctxBoolProp = false;
+      fixture.detectChanges();
+
+      expect(children.length).toBe(1);
+      expect(getDOM().isCommentNode(children[0])).toBe(true);
+    });
+
+    it('should work with static content projection', () => {
+      const template = `<simple><ng-container><p>1</p><p>2</p></ng-container></simple>`;
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+
+      fixture.detectChanges();
+
+      const el = fixture.nativeElement;
+      expect(el).toHaveText('SIMPLE(12)');
+    });
+
+    it('should support injecting the container from children', () => {
+      const template = `<ng-container [text]="'container'"><p></p></ng-container>`;
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+
+      fixture.detectChanges();
+
+      const dir = fixture.debugElement.children[0].injector.get(TextDirective);
+      expect(dir).toBeAnInstanceOf(TextDirective);
+      expect(dir.text).toEqual('container');
+    });
+
+    it('should contain all direct child directives in a <ng-container> (content dom)', () => {
+      const template =
+          '<needs-content-children #q><ng-container><div text="foo"></div></ng-container></needs-content-children>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+
+      fixture.detectChanges();
+      const q = fixture.debugElement.children[0].references !['q'];
+      fixture.detectChanges();
+
+      expect(q.textDirChildren.length).toEqual(1);
+      expect(q.numberOfChildrenAfterContentInit).toEqual(1);
+    });
+
+    it('should contain all child directives in a <ng-container> (view dom)', () => {
+      const template = '<needs-view-children #q></needs-view-children>';
+      TestBed.overrideComponent(MyComp, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp);
+
+      fixture.detectChanges();
+      const q = fixture.debugElement.children[0].references !['q'];
+      fixture.detectChanges();
+
+      expect(q.textDirChildren.length).toEqual(1);
+      expect(q.numberOfChildrenAfterViewInit).toEqual(1);
+    });
+  });
+}
+
+@Directive({selector: '[text]'})
+class TextDirective {
+  @Input() public text: string|null = null;
+}
+
+@Component({selector: 'needs-content-children', template: ''})
+class NeedsContentChildren implements AfterContentInit {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(TextDirective) textDirChildren !: QueryList<TextDirective>;
+  // TODO(issue/24571): remove '!'.
+  numberOfChildrenAfterContentInit !: number;
+
+  ngAfterContentInit() { this.numberOfChildrenAfterContentInit = this.textDirChildren.length; }
+}
+
+@Component({selector: 'needs-view-children', template: '<div text></div>'})
+class NeedsViewChildren implements AfterViewInit {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(TextDirective) textDirChildren !: QueryList<TextDirective>;
+  // TODO(issue/24571): remove '!'.
+  numberOfChildrenAfterViewInit !: number;
+
+  ngAfterViewInit() { this.numberOfChildrenAfterViewInit = this.textDirChildren.length; }
+}
+
+@Component({selector: 'simple', template: 'SIMPLE(<ng-content></ng-content>)'})
+class Simple {
+}
+
+@Component({selector: 'my-comp', template: ''})
+class MyComp {
+  ctxBoolProp: boolean = false;
+}
diff --git a/packages/core/test/linker/ng_module_integration_spec.ts b/packages/core/test/linker/ng_module_integration_spec.ts
new file mode 100644
index 000000000000..6a9369abd75a
--- /dev/null
+++ b/packages/core/test/linker/ng_module_integration_spec.ts
@@ -0,0 +1,1333 @@
+/**
+ * @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 {ANALYZE_FOR_ENTRY_COMPONENTS, CUSTOM_ELEMENTS_SCHEMA, Compiler, Component, ComponentFactoryResolver, Directive, HostBinding, Inject, Injectable, InjectionToken, Injector, Input, NgModule, NgModuleRef, Optional, Pipe, Provider, Self, Type, forwardRef, getModuleFactory} from '@angular/core';
+import {Console} from '@angular/core/src/console';
+import {InjectableDef, defineInjectable} from '@angular/core/src/di/defs';
+import {NgModuleData} from '@angular/core/src/view/types';
+import {tokenKey} from '@angular/core/src/view/util';
+import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+import {InternalNgModuleRef, NgModuleFactory} from '../../src/linker/ng_module_factory';
+import {clearModulesForTest} from '../../src/linker/ng_module_factory_loader';
+import {stringify} from '../../src/util';
+
+class Engine {}
+
+class BrokenEngine {
+  constructor() { throw new Error('Broken Engine'); }
+}
+
+class DashboardSoftware {}
+
+@Injectable()
+class Dashboard {
+  constructor(software: DashboardSoftware) {}
+}
+
+class TurboEngine extends Engine {}
+
+const CARS = new InjectionToken<Car[]>('Cars');
+@Injectable()
+class Car {
+  constructor(public engine: Engine) {}
+}
+
+@Injectable()
+class CarWithOptionalEngine {
+  constructor(@Optional() public engine: Engine) {}
+}
+
+@Injectable()
+class CarWithDashboard {
+  constructor(public engine: Engine, public dashboard: Dashboard) {}
+}
+
+@Injectable()
+class SportsCar extends Car {
+  constructor(engine: Engine) { super(engine); }
+}
+
+@Injectable()
+class CarWithInject {
+  constructor(@Inject(TurboEngine) public engine: Engine) {}
+}
+
+@Injectable()
+class CyclicEngine {
+  constructor(car: Car) {}
+}
+
+class NoAnnotations {
+  constructor(secretDependency: any) {}
+}
+
+function factoryFn(a: any) {}
+
+@Component({selector: 'comp', template: ''})
+class SomeComp {
+}
+
+@Directive({selector: '[someDir]'})
+class SomeDirective {
+  // TODO(issue/24571): remove '!'.
+  @HostBinding('title') @Input()
+  someDir !: string;
+}
+
+@Pipe({name: 'somePipe'})
+class SomePipe {
+  transform(value: string): any { return `transformed ${value}`; }
+}
+
+@Component({selector: 'comp', template: `<div  [someDir]="'someValue' | somePipe"></div>`})
+class CompUsingModuleDirectiveAndPipe {
+}
+
+class DummyConsole implements Console {
+  public warnings: string[] = [];
+
+  log(message: string) {}
+  warn(message: string) { this.warnings.push(message); }
+}
+
+{
+  describe('jit', () => { declareTests({useJit: true}); });
+
+  describe('no jit', () => { declareTests({useJit: false}); });
+}
+
+function declareTests({useJit}: {useJit: boolean}) {
+  describe('NgModule', () => {
+    let compiler: Compiler;
+    let injector: Injector;
+    let console: DummyConsole;
+
+    beforeEach(() => {
+      console = new DummyConsole();
+      TestBed.configureCompiler(
+          {useJit: useJit, providers: [{provide: Console, useValue: console}]});
+    });
+
+    beforeEach(inject([Compiler, Injector], (_compiler: Compiler, _injector: Injector) => {
+      compiler = _compiler;
+      injector = _injector;
+    }));
+
+    function createModuleFactory<T>(moduleType: Type<T>): NgModuleFactory<T> {
+      return compiler.compileModuleSync(moduleType);
+    }
+
+    function createModule<T>(
+        moduleType: Type<T>, parentInjector?: Injector | null): NgModuleRef<T> {
+      return createModuleFactory(moduleType).create(parentInjector || null);
+    }
+
+    function createComp<T>(compType: Type<T>, moduleType: Type<any>): ComponentFixture<T> {
+      const ngModule = createModule(moduleType, injector);
+
+      const cf = ngModule.componentFactoryResolver.resolveComponentFactory(compType) !;
+
+      const comp = cf.create(Injector.NULL);
+
+      return new ComponentFixture(comp, null !, false);
+    }
+
+    describe('errors', () => {
+      it('should error when exporting a directive that was neither declared nor imported', () => {
+        @NgModule({exports: [SomeDirective]})
+        class SomeModule {
+        }
+
+        expect(() => createModule(SomeModule))
+            .toThrowError(
+                `Can't export directive ${stringify(SomeDirective)} from ${stringify(SomeModule)} as it was neither declared nor imported!`);
+      });
+
+      it('should error when exporting a pipe that was neither declared nor imported', () => {
+        @NgModule({exports: [SomePipe]})
+        class SomeModule {
+        }
+
+        expect(() => createModule(SomeModule))
+            .toThrowError(
+                `Can't export pipe ${stringify(SomePipe)} from ${stringify(SomeModule)} as it was neither declared nor imported!`);
+      });
+
+      it('should error if a directive is declared in more than 1 module', () => {
+        @NgModule({declarations: [SomeDirective]})
+        class Module1 {
+        }
+
+        @NgModule({declarations: [SomeDirective]})
+        class Module2 {
+        }
+
+        createModule(Module1);
+
+        expect(() => createModule(Module2))
+            .toThrowError(
+                `Type ${stringify(SomeDirective)} is part of the declarations of 2 modules: ${stringify(Module1)} and ${stringify(Module2)}! ` +
+                `Please consider moving ${stringify(SomeDirective)} to a higher module that imports ${stringify(Module1)} and ${stringify(Module2)}. ` +
+                `You can also create a new NgModule that exports and includes ${stringify(SomeDirective)} then import that NgModule in ${stringify(Module1)} and ${stringify(Module2)}.`);
+      });
+
+      it('should error if a directive is declared in more than 1 module also if the module declaring it is imported',
+         () => {
+           @NgModule({declarations: [SomeDirective], exports: [SomeDirective]})
+           class Module1 {
+           }
+
+           @NgModule({declarations: [SomeDirective], imports: [Module1]})
+           class Module2 {
+           }
+
+           expect(() => createModule(Module2))
+               .toThrowError(
+                   `Type ${stringify(SomeDirective)} is part of the declarations of 2 modules: ${stringify(Module1)} and ${stringify(Module2)}! ` +
+                   `Please consider moving ${stringify(SomeDirective)} to a higher module that imports ${stringify(Module1)} and ${stringify(Module2)}. ` +
+                   `You can also create a new NgModule that exports and includes ${stringify(SomeDirective)} then import that NgModule in ${stringify(Module1)} and ${stringify(Module2)}.`);
+         });
+
+      it('should error if a pipe is declared in more than 1 module', () => {
+        @NgModule({declarations: [SomePipe]})
+        class Module1 {
+        }
+
+        @NgModule({declarations: [SomePipe]})
+        class Module2 {
+        }
+
+        createModule(Module1);
+
+        expect(() => createModule(Module2))
+            .toThrowError(
+                `Type ${stringify(SomePipe)} is part of the declarations of 2 modules: ${stringify(Module1)} and ${stringify(Module2)}! ` +
+                `Please consider moving ${stringify(SomePipe)} to a higher module that imports ${stringify(Module1)} and ${stringify(Module2)}. ` +
+                `You can also create a new NgModule that exports and includes ${stringify(SomePipe)} then import that NgModule in ${stringify(Module1)} and ${stringify(Module2)}.`);
+      });
+
+      it('should error if a pipe is declared in more than 1 module also if the module declaring it is imported',
+         () => {
+           @NgModule({declarations: [SomePipe], exports: [SomePipe]})
+           class Module1 {
+           }
+
+           @NgModule({declarations: [SomePipe], imports: [Module1]})
+           class Module2 {
+           }
+
+           expect(() => createModule(Module2))
+               .toThrowError(
+                   `Type ${stringify(SomePipe)} is part of the declarations of 2 modules: ${stringify(Module1)} and ${stringify(Module2)}! ` +
+                   `Please consider moving ${stringify(SomePipe)} to a higher module that imports ${stringify(Module1)} and ${stringify(Module2)}. ` +
+                   `You can also create a new NgModule that exports and includes ${stringify(SomePipe)} then import that NgModule in ${stringify(Module1)} and ${stringify(Module2)}.`);
+         });
+
+    });
+
+    describe('schemas', () => {
+      it('should error on unknown bound properties on custom elements by default', () => {
+        @Component({template: '<some-element [someUnknownProp]="true"></some-element>'})
+        class ComponentUsingInvalidProperty {
+        }
+
+        @NgModule({declarations: [ComponentUsingInvalidProperty]})
+        class SomeModule {
+        }
+
+        expect(() => createModule(SomeModule)).toThrowError(/Can't bind to 'someUnknownProp'/);
+      });
+
+      it('should not error on unknown bound properties on custom elements when using the CUSTOM_ELEMENTS_SCHEMA',
+         () => {
+           @Component({template: '<some-element [someUnknownProp]="true"></some-element>'})
+           class ComponentUsingInvalidProperty {
+           }
+
+           @NgModule(
+               {schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [ComponentUsingInvalidProperty]})
+           class SomeModule {
+           }
+
+           expect(() => createModule(SomeModule)).not.toThrow();
+         });
+    });
+
+    describe('id', () => {
+      const token = 'myid';
+      @NgModule({id: token})
+      class SomeModule {
+      }
+      @NgModule({id: token})
+      class SomeOtherModule {
+      }
+
+      afterEach(() => clearModulesForTest());
+
+      it('should register loaded modules', () => {
+        createModule(SomeModule);
+        const factory = getModuleFactory(token);
+        expect(factory).toBeTruthy();
+        expect(factory.moduleType).toBe(SomeModule);
+      });
+
+      it('should throw when registering a duplicate module', () => {
+        createModule(SomeModule);
+        expect(() => createModule(SomeOtherModule)).toThrowError(/Duplicate module registered/);
+      });
+    });
+
+    describe('entryComponents', () => {
+      it('should create ComponentFactories in root modules', () => {
+        @NgModule({declarations: [SomeComp], entryComponents: [SomeComp]})
+        class SomeModule {
+        }
+
+        const ngModule = createModule(SomeModule);
+        expect(ngModule.componentFactoryResolver.resolveComponentFactory(SomeComp) !.componentType)
+            .toBe(SomeComp);
+        expect(ngModule.injector.get(ComponentFactoryResolver)
+                   .resolveComponentFactory(SomeComp)
+                   .componentType)
+            .toBe(SomeComp);
+      });
+
+      it('should throw if we cannot find a module associated with a module-level entryComponent', () => {
+        @Component({template: ''})
+        class SomeCompWithEntryComponents {
+        }
+
+        @NgModule({declarations: [], entryComponents: [SomeCompWithEntryComponents]})
+        class SomeModule {
+        }
+
+        expect(() => createModule(SomeModule))
+            .toThrowError(
+                'Component SomeCompWithEntryComponents is not part of any NgModule or the module has not been imported into your module.');
+      });
+
+      it('should throw if we cannot find a module associated with a component-level entryComponent',
+         () => {
+           @Component({template: '', entryComponents: [SomeComp]})
+           class SomeCompWithEntryComponents {
+           }
+
+           @NgModule({declarations: [SomeCompWithEntryComponents]})
+           class SomeModule {
+           }
+
+           expect(() => createModule(SomeModule))
+               .toThrowError(
+                   'Component SomeComp is not part of any NgModule or the module has not been imported into your module.');
+         });
+
+      it('should create ComponentFactories via ANALYZE_FOR_ENTRY_COMPONENTS', () => {
+        @NgModule({
+          declarations: [SomeComp],
+          providers: [{
+            provide: ANALYZE_FOR_ENTRY_COMPONENTS,
+            multi: true,
+            useValue: [{a: 'b', component: SomeComp}]
+          }]
+        })
+        class SomeModule {
+        }
+
+        const ngModule = createModule(SomeModule);
+        expect(ngModule.componentFactoryResolver.resolveComponentFactory(SomeComp) !.componentType)
+            .toBe(SomeComp);
+        expect(ngModule.injector.get(ComponentFactoryResolver)
+                   .resolveComponentFactory(SomeComp)
+                   .componentType)
+            .toBe(SomeComp);
+      });
+
+      it('should create ComponentFactories in imported modules', () => {
+        @NgModule({declarations: [SomeComp], entryComponents: [SomeComp]})
+        class SomeImportedModule {
+        }
+
+        @NgModule({imports: [SomeImportedModule]})
+        class SomeModule {
+        }
+
+        const ngModule = createModule(SomeModule);
+        expect(ngModule.componentFactoryResolver.resolveComponentFactory(SomeComp) !.componentType)
+            .toBe(SomeComp);
+        expect(ngModule.injector.get(ComponentFactoryResolver)
+                   .resolveComponentFactory(SomeComp)
+                   .componentType)
+            .toBe(SomeComp);
+      });
+
+      it('should create ComponentFactories if the component was imported', () => {
+        @NgModule({declarations: [SomeComp], exports: [SomeComp]})
+        class SomeImportedModule {
+        }
+
+        @NgModule({imports: [SomeImportedModule], entryComponents: [SomeComp]})
+        class SomeModule {
+        }
+
+        const ngModule = createModule(SomeModule);
+        expect(ngModule.componentFactoryResolver.resolveComponentFactory(SomeComp) !.componentType)
+            .toBe(SomeComp);
+        expect(ngModule.injector.get(ComponentFactoryResolver)
+                   .resolveComponentFactory(SomeComp)
+                   .componentType)
+            .toBe(SomeComp);
+      });
+
+    });
+
+    describe('bootstrap components', () => {
+      it('should create ComponentFactories', () => {
+        @NgModule({declarations: [SomeComp], bootstrap: [SomeComp]})
+        class SomeModule {
+        }
+
+        const ngModule = createModule(SomeModule);
+        expect(ngModule.componentFactoryResolver.resolveComponentFactory(SomeComp) !.componentType)
+            .toBe(SomeComp);
+      });
+
+      it('should store the ComponentFactories in the NgModuleInjector', () => {
+        @NgModule({declarations: [SomeComp], bootstrap: [SomeComp]})
+        class SomeModule {
+        }
+
+        const ngModule = <InternalNgModuleRef<any>>createModule(SomeModule);
+        expect(ngModule._bootstrapComponents.length).toBe(1);
+        expect(ngModule._bootstrapComponents[0]).toBe(SomeComp);
+      });
+
+    });
+
+    describe('directives and pipes', () => {
+      describe('declarations', () => {
+        it('should be supported in root modules', () => {
+          @NgModule({
+            declarations: [CompUsingModuleDirectiveAndPipe, SomeDirective, SomePipe],
+            entryComponents: [CompUsingModuleDirectiveAndPipe]
+          })
+          class SomeModule {
+          }
+
+          const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
+
+          compFixture.detectChanges();
+          expect(compFixture.debugElement.children[0].properties['title'])
+              .toBe('transformed someValue');
+        });
+
+        it('should be supported in imported modules', () => {
+          @NgModule({
+            declarations: [CompUsingModuleDirectiveAndPipe, SomeDirective, SomePipe],
+            entryComponents: [CompUsingModuleDirectiveAndPipe]
+          })
+          class SomeImportedModule {
+          }
+
+          @NgModule({imports: [SomeImportedModule]})
+          class SomeModule {
+          }
+
+          const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
+          compFixture.detectChanges();
+          expect(compFixture.debugElement.children[0].properties['title'])
+              .toBe('transformed someValue');
+        });
+
+
+        it('should be supported in nested components', () => {
+          @Component({
+            selector: 'parent',
+            template: '<comp></comp>',
+          })
+          class ParentCompUsingModuleDirectiveAndPipe {
+          }
+
+          @NgModule({
+            declarations: [
+              ParentCompUsingModuleDirectiveAndPipe, CompUsingModuleDirectiveAndPipe, SomeDirective,
+              SomePipe
+            ],
+            entryComponents: [ParentCompUsingModuleDirectiveAndPipe]
+          })
+          class SomeModule {
+          }
+
+          const compFixture = createComp(ParentCompUsingModuleDirectiveAndPipe, SomeModule);
+          compFixture.detectChanges();
+          expect(compFixture.debugElement.children[0].children[0].properties['title'])
+              .toBe('transformed someValue');
+        });
+      });
+
+      describe('import/export', () => {
+
+        it('should support exported directives and pipes', () => {
+          @NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
+          class SomeImportedModule {
+          }
+
+          @NgModule({
+            declarations: [CompUsingModuleDirectiveAndPipe],
+            imports: [SomeImportedModule],
+            entryComponents: [CompUsingModuleDirectiveAndPipe]
+          })
+          class SomeModule {
+          }
+
+
+          const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
+          compFixture.detectChanges();
+          expect(compFixture.debugElement.children[0].properties['title'])
+              .toBe('transformed someValue');
+        });
+
+        it('should support exported directives and pipes if the module is wrapped into an `ModuleWithProviders`',
+           () => {
+             @NgModule(
+                 {declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
+             class SomeImportedModule {
+             }
+
+             @NgModule({
+               declarations: [CompUsingModuleDirectiveAndPipe],
+               imports: [{ngModule: SomeImportedModule}],
+               entryComponents: [CompUsingModuleDirectiveAndPipe]
+             })
+             class SomeModule {
+             }
+
+
+             const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
+             compFixture.detectChanges();
+             expect(compFixture.debugElement.children[0].properties['title'])
+                 .toBe('transformed someValue');
+           });
+
+        it('should support reexported modules', () => {
+          @NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
+          class SomeReexportedModule {
+          }
+
+          @NgModule({exports: [SomeReexportedModule]})
+          class SomeImportedModule {
+          }
+
+          @NgModule({
+            declarations: [CompUsingModuleDirectiveAndPipe],
+            imports: [SomeImportedModule],
+            entryComponents: [CompUsingModuleDirectiveAndPipe]
+          })
+          class SomeModule {
+          }
+
+          const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
+          compFixture.detectChanges();
+          expect(compFixture.debugElement.children[0].properties['title'])
+              .toBe('transformed someValue');
+        });
+
+        it('should support exporting individual directives of an imported module', () => {
+          @NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
+          class SomeReexportedModule {
+          }
+
+          @NgModule({imports: [SomeReexportedModule], exports: [SomeDirective, SomePipe]})
+          class SomeImportedModule {
+          }
+
+          @NgModule({
+            declarations: [CompUsingModuleDirectiveAndPipe],
+            imports: [SomeImportedModule],
+            entryComponents: [CompUsingModuleDirectiveAndPipe]
+          })
+          class SomeModule {
+          }
+
+          const compFixture = createComp(CompUsingModuleDirectiveAndPipe, SomeModule);
+          compFixture.detectChanges();
+          expect(compFixture.debugElement.children[0].properties['title'])
+              .toBe('transformed someValue');
+        });
+
+        it('should not use non exported pipes of an imported module', () => {
+          @NgModule({
+            declarations: [SomePipe],
+          })
+          class SomeImportedModule {
+          }
+
+          @NgModule({
+            declarations: [CompUsingModuleDirectiveAndPipe],
+            imports: [SomeImportedModule],
+            entryComponents: [CompUsingModuleDirectiveAndPipe]
+          })
+          class SomeModule {
+          }
+
+          expect(() => createComp(SomeComp, SomeModule))
+              .toThrowError(/The pipe 'somePipe' could not be found/);
+        });
+
+        it('should not use non exported directives of an imported module', () => {
+          @NgModule({
+            declarations: [SomeDirective],
+          })
+          class SomeImportedModule {
+          }
+
+          @NgModule({
+            declarations: [CompUsingModuleDirectiveAndPipe, SomePipe],
+            imports: [SomeImportedModule],
+            entryComponents: [CompUsingModuleDirectiveAndPipe]
+          })
+          class SomeModule {
+          }
+
+          expect(() => createComp(SomeComp, SomeModule)).toThrowError(/Can't bind to 'someDir'/);
+        });
+      });
+    });
+
+
+    describe('providers', function() {
+      let moduleType: any = null;
+
+
+      function createInjector(providers: Provider[], parent?: Injector | null): Injector {
+        @NgModule({providers: providers})
+        class SomeModule {
+        }
+
+        moduleType = SomeModule;
+
+        return createModule(SomeModule, parent).injector;
+      }
+
+      it('should provide the module',
+         () => { expect(createInjector([]).get(moduleType)).toBeAnInstanceOf(moduleType); });
+
+      it('should instantiate a class without dependencies', () => {
+        const injector = createInjector([Engine]);
+        const engine = injector.get(Engine);
+
+        expect(engine).toBeAnInstanceOf(Engine);
+      });
+
+      it('should resolve dependencies based on type information', () => {
+        const injector = createInjector([Engine, Car]);
+        const car = injector.get(Car);
+
+        expect(car).toBeAnInstanceOf(Car);
+        expect(car.engine).toBeAnInstanceOf(Engine);
+      });
+
+      it('should resolve dependencies based on @Inject annotation', () => {
+        const injector = createInjector([TurboEngine, Engine, CarWithInject]);
+        const car = injector.get(CarWithInject);
+
+        expect(car).toBeAnInstanceOf(CarWithInject);
+        expect(car.engine).toBeAnInstanceOf(TurboEngine);
+      });
+
+      it('should throw when no type and not @Inject (class case)', () => {
+        expect(() => createInjector([NoAnnotations]))
+            .toThrowError('Can\'t resolve all parameters for NoAnnotations: (?).');
+      });
+
+      it('should throw when no type and not @Inject (factory case)', () => {
+        expect(() => createInjector([{provide: 'someToken', useFactory: factoryFn}]))
+            .toThrowError('Can\'t resolve all parameters for factoryFn: (?).');
+      });
+
+      it('should cache instances', () => {
+        const injector = createInjector([Engine]);
+
+        const e1 = injector.get(Engine);
+        const e2 = injector.get(Engine);
+
+        expect(e1).toBe(e2);
+      });
+
+      it('should provide to a value', () => {
+        const injector = createInjector([{provide: Engine, useValue: 'fake engine'}]);
+
+        const engine = injector.get(Engine);
+        expect(engine).toEqual('fake engine');
+      });
+
+      it('should provide to a factory', () => {
+        function sportsCarFactory(e: Engine) { return new SportsCar(e); }
+
+        const injector =
+            createInjector([Engine, {provide: Car, useFactory: sportsCarFactory, deps: [Engine]}]);
+
+        const car = injector.get(Car);
+        expect(car).toBeAnInstanceOf(SportsCar);
+        expect(car.engine).toBeAnInstanceOf(Engine);
+      });
+
+      it('should supporting provider to null', () => {
+        const injector = createInjector([{provide: Engine, useValue: null}]);
+        const engine = injector.get(Engine);
+        expect(engine).toBeNull();
+      });
+
+      it('should provide to an alias', () => {
+        const injector = createInjector([
+          Engine, {provide: SportsCar, useClass: SportsCar},
+          {provide: Car, useExisting: SportsCar}
+        ]);
+
+        const car = injector.get(Car);
+        const sportsCar = injector.get(SportsCar);
+        expect(car).toBeAnInstanceOf(SportsCar);
+        expect(car).toBe(sportsCar);
+      });
+
+      it('should support multiProviders', () => {
+        const injector = createInjector([
+          Engine, {provide: CARS, useClass: SportsCar, multi: true},
+          {provide: CARS, useClass: CarWithOptionalEngine, multi: true}
+        ]);
+
+        const cars = injector.get(CARS);
+        expect(cars.length).toEqual(2);
+        expect(cars[0]).toBeAnInstanceOf(SportsCar);
+        expect(cars[1]).toBeAnInstanceOf(CarWithOptionalEngine);
+      });
+
+      it('should support multiProviders that are created using useExisting', () => {
+        const injector = createInjector(
+            [Engine, SportsCar, {provide: CARS, useExisting: SportsCar, multi: true}]);
+
+        const cars = injector.get(CARS);
+        expect(cars.length).toEqual(1);
+        expect(cars[0]).toBe(injector.get(SportsCar));
+      });
+
+      it('should throw when the aliased provider does not exist', () => {
+        const injector = createInjector([{provide: 'car', useExisting: SportsCar}]);
+        const e = `NullInjectorError: No provider for ${stringify(SportsCar)}!`;
+        expect(() => injector.get('car')).toThrowError(e);
+      });
+
+      it('should handle forwardRef in useExisting', () => {
+        const injector = createInjector([
+          {provide: 'originalEngine', useClass: forwardRef(() => Engine)},
+          {provide: 'aliasedEngine', useExisting: <any>forwardRef(() => 'originalEngine')}
+        ]);
+        expect(injector.get('aliasedEngine')).toBeAnInstanceOf(Engine);
+      });
+
+      it('should support overriding factory dependencies', () => {
+        const injector = createInjector(
+            [Engine, {provide: Car, useFactory: (e: Engine) => new SportsCar(e), deps: [Engine]}]);
+
+        const car = injector.get(Car);
+        expect(car).toBeAnInstanceOf(SportsCar);
+        expect(car.engine).toBeAnInstanceOf(Engine);
+      });
+
+      it('should support optional dependencies', () => {
+        const injector = createInjector([CarWithOptionalEngine]);
+
+        const car = injector.get(CarWithOptionalEngine);
+        expect(car.engine).toBeNull();
+      });
+
+      it('should flatten passed-in providers', () => {
+        const injector = createInjector([[[Engine, Car]]]);
+
+        const car = injector.get(Car);
+        expect(car).toBeAnInstanceOf(Car);
+      });
+
+      it('should use the last provider when there are multiple providers for same token', () => {
+        const injector = createInjector(
+            [{provide: Engine, useClass: Engine}, {provide: Engine, useClass: TurboEngine}]);
+
+        expect(injector.get(Engine)).toBeAnInstanceOf(TurboEngine);
+      });
+
+      it('should use non-type tokens', () => {
+        const injector = createInjector([{provide: 'token', useValue: 'value'}]);
+
+        expect(injector.get('token')).toEqual('value');
+      });
+
+      it('should throw when given invalid providers', () => {
+        expect(() => createInjector(<any>['blah']))
+            .toThrowError(
+                `Invalid provider for the NgModule 'SomeModule' - only instances of Provider and Type are allowed, got: [?blah?]`);
+      });
+
+      it('should throw when given blank providers', () => {
+        expect(() => createInjector(<any>[null, {provide: 'token', useValue: 'value'}]))
+            .toThrowError(
+                `Invalid provider for the NgModule 'SomeModule' - only instances of Provider and Type are allowed, got: [?null?, ...]`);
+      });
+
+      it('should provide itself', () => {
+        const parent = createInjector([]);
+        const child = createInjector([], parent);
+
+        expect(child.get(Injector)).toBe(child);
+      });
+
+      it('should provide undefined', () => {
+        let factoryCounter = 0;
+
+        const injector = createInjector([{
+          provide: 'token',
+          useFactory: () => {
+            factoryCounter++;
+            return undefined;
+          }
+        }]);
+
+        expect(injector.get('token')).toBeUndefined();
+        expect(injector.get('token')).toBeUndefined();
+        expect(factoryCounter).toBe(1);
+      });
+
+      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');
+        });
+      });
+
+      describe('injecting eager providers into an eager provider via Injector.get', () => {
+
+        it('should inject providers that were declared before it', () => {
+          @NgModule({
+            providers: [
+              {provide: 'eager1', useFactory: () => 'v1'},
+              {
+                provide: 'eager2',
+                useFactory: (i: Injector) => `v2: ${i.get('eager1')}`,
+                deps: [Injector]
+              },
+            ]
+          })
+          class MyModule {
+            // NgModule is eager, which makes all of its deps eager
+            constructor(@Inject('eager1') eager1: any, @Inject('eager2') eager2: any) {}
+          }
+
+          expect(createModule(MyModule).injector.get('eager2')).toBe('v2: v1');
+        });
+
+        it('should inject providers that were declared after it', () => {
+          @NgModule({
+            providers: [
+              {
+                provide: 'eager1',
+                useFactory: (i: Injector) => `v1: ${i.get('eager2')}`,
+                deps: [Injector]
+              },
+              {provide: 'eager2', useFactory: () => 'v2'},
+            ]
+          })
+          class MyModule {
+            // NgModule is eager, which makes all of its deps eager
+            constructor(@Inject('eager1') eager1: any, @Inject('eager2') eager2: any) {}
+          }
+
+          expect(createModule(MyModule).injector.get('eager1')).toBe('v1: v2');
+        });
+
+        it('eager providers should get initialized only once', () => {
+          @Injectable()
+          class MyService1 {
+            public innerService: MyService2;
+            constructor(injector: Injector) {
+              // Create MyService2 before it it's initialized by TestModule.
+              this.innerService = injector.get(MyService2);
+            }
+          }
+
+          @Injectable()
+          class MyService2 {
+            constructor() {}
+          }
+
+          @NgModule({
+            providers: [MyService1, MyService2],
+          })
+          class TestModule {
+            constructor(public service1: MyService1, public service2: MyService2) {}
+          }
+
+          const moduleRef = createModule(TestModule, injector);
+          const module = moduleRef.instance;
+
+          // MyService2 should not get initialized twice.
+          expect(module.service1.innerService).toBe(module.service2);
+        });
+      });
+
+      it('should throw when no provider defined', () => {
+        const injector = createInjector([]);
+        expect(() => injector.get('NonExisting'))
+            .toThrowError('NullInjectorError: No provider for NonExisting!');
+      });
+
+      it('should throw when trying to instantiate a cyclic dependency', () => {
+        expect(() => createInjector([Car, {provide: Engine, useClass: CyclicEngine}]))
+            .toThrowError(/Cannot instantiate cyclic dependency! Car/g);
+      });
+
+      it('should support null values', () => {
+        const injector = createInjector([{provide: 'null', useValue: null}]);
+        expect(injector.get('null')).toBe(null);
+      });
+
+
+      describe('child', () => {
+        it('should load instances from parent injector', () => {
+          const parent = createInjector([Engine]);
+          const child = createInjector([], parent);
+
+          const engineFromParent = parent.get(Engine);
+          const engineFromChild = child.get(Engine);
+
+          expect(engineFromChild).toBe(engineFromParent);
+        });
+
+        it('should not use the child providers when resolving the dependencies of a parent provider',
+           () => {
+             const parent = createInjector([Car, Engine]);
+             const child = createInjector([{provide: Engine, useClass: TurboEngine}], parent);
+
+             const carFromChild = child.get(Car);
+             expect(carFromChild.engine).toBeAnInstanceOf(Engine);
+           });
+
+        it('should create new instance in a child injector', () => {
+          const parent = createInjector([Engine]);
+          const child = createInjector([{provide: Engine, useClass: TurboEngine}], parent);
+
+          const engineFromParent = parent.get(Engine);
+          const engineFromChild = child.get(Engine);
+
+          expect(engineFromParent).not.toBe(engineFromChild);
+          expect(engineFromChild).toBeAnInstanceOf(TurboEngine);
+        });
+
+      });
+
+      describe('depedency resolution', () => {
+        describe('@Self()', () => {
+          it('should return a dependency from self', () => {
+            const inj = createInjector([
+              Engine,
+              {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [[Engine, new Self()]]}
+            ]);
+
+            expect(inj.get(Car)).toBeAnInstanceOf(Car);
+          });
+        });
+
+        describe('default', () => {
+          it('should not skip self', () => {
+            const parent = createInjector([Engine]);
+            const child = createInjector(
+                [
+                  {provide: Engine, useClass: TurboEngine},
+                  {provide: Car, useFactory: (e: Engine) => new Car(e), deps: [Engine]}
+                ],
+                parent);
+
+            expect(child.get(Car).engine).toBeAnInstanceOf(TurboEngine);
+          });
+        });
+      });
+
+      describe('lifecycle', () => {
+        it('should instantiate modules eagerly', () => {
+          let created = false;
+
+          @NgModule()
+          class ImportedModule {
+            constructor() { created = true; }
+          }
+
+          @NgModule({imports: [ImportedModule]})
+          class SomeModule {
+          }
+
+          createModule(SomeModule);
+
+          expect(created).toBe(true);
+        });
+
+        it('should instantiate providers that are not used by a module lazily', () => {
+          let created = false;
+
+          createInjector([{
+            provide: 'someToken',
+            useFactory: () => {
+              created = true;
+              return true;
+            }
+          }]);
+
+          expect(created).toBe(false);
+        });
+
+        it('should support ngOnDestroy on any provider', () => {
+          let destroyed = false;
+
+          class SomeInjectable {
+            ngOnDestroy() { destroyed = true; }
+          }
+
+          @NgModule({providers: [SomeInjectable]})
+          class SomeModule {
+            // Inject SomeInjectable to make it eager...
+            constructor(i: SomeInjectable) {}
+          }
+
+          const moduleRef = createModule(SomeModule);
+          expect(destroyed).toBe(false);
+          moduleRef.destroy();
+          expect(destroyed).toBe(true);
+        });
+
+        it('should support ngOnDestroy for lazy providers', () => {
+          let created = false;
+          let destroyed = false;
+
+          class SomeInjectable {
+            constructor() { created = true; }
+            ngOnDestroy() { destroyed = true; }
+          }
+
+          @NgModule({providers: [SomeInjectable]})
+          class SomeModule {
+          }
+
+          let moduleRef = createModule(SomeModule);
+          expect(created).toBe(false);
+          expect(destroyed).toBe(false);
+
+          // no error if the provider was not yet created
+          moduleRef.destroy();
+          expect(created).toBe(false);
+          expect(destroyed).toBe(false);
+
+          moduleRef = createModule(SomeModule);
+          moduleRef.injector.get(SomeInjectable);
+          expect(created).toBe(true);
+          moduleRef.destroy();
+          expect(destroyed).toBe(true);
+        });
+      });
+
+      describe('imported and exported modules', () => {
+        it('should add the providers of imported modules', () => {
+          @NgModule({providers: [{provide: 'token1', useValue: 'imported'}]})
+          class ImportedModule {
+          }
+
+          @NgModule({imports: [ImportedModule]})
+          class SomeModule {
+          }
+
+          const injector = createModule(SomeModule).injector;
+
+          expect(injector.get(SomeModule)).toBeAnInstanceOf(SomeModule);
+          expect(injector.get(ImportedModule)).toBeAnInstanceOf(ImportedModule);
+          expect(injector.get('token1')).toBe('imported');
+        });
+
+        it('should add the providers of imported ModuleWithProviders', () => {
+          @NgModule()
+          class ImportedModule {
+          }
+
+          @NgModule({
+            imports: [
+              {ngModule: ImportedModule, providers: [{provide: 'token1', useValue: 'imported'}]}
+            ]
+          })
+          class SomeModule {
+          }
+
+          const injector = createModule(SomeModule).injector;
+
+          expect(injector.get(SomeModule)).toBeAnInstanceOf(SomeModule);
+          expect(injector.get(ImportedModule)).toBeAnInstanceOf(ImportedModule);
+          expect(injector.get('token1')).toBe('imported');
+        });
+
+        it('should overwrite the providers of imported modules', () => {
+          @NgModule({providers: [{provide: 'token1', useValue: 'imported'}]})
+          class ImportedModule {
+          }
+
+          @NgModule(
+              {providers: [{provide: 'token1', useValue: 'direct'}], imports: [ImportedModule]})
+          class SomeModule {
+          }
+
+          const injector = createModule(SomeModule).injector;
+          expect(injector.get('token1')).toBe('direct');
+        });
+
+        it('should overwrite the providers of imported ModuleWithProviders', () => {
+          @NgModule()
+          class ImportedModule {
+          }
+
+          @NgModule({
+            providers: [{provide: 'token1', useValue: 'direct'}],
+            imports: [
+              {ngModule: ImportedModule, providers: [{provide: 'token1', useValue: 'imported'}]}
+            ]
+          })
+          class SomeModule {
+          }
+
+          const injector = createModule(SomeModule).injector;
+          expect(injector.get('token1')).toBe('direct');
+        });
+
+        it('should overwrite the providers of imported modules on the second import level', () => {
+          @NgModule({providers: [{provide: 'token1', useValue: 'imported'}]})
+          class ImportedModuleLevel2 {
+          }
+
+          @NgModule({
+            providers: [{provide: 'token1', useValue: 'direct'}],
+            imports: [ImportedModuleLevel2]
+          })
+          class ImportedModuleLevel1 {
+          }
+
+          @NgModule({imports: [ImportedModuleLevel1]})
+          class SomeModule {
+          }
+
+          const injector = createModule(SomeModule).injector;
+          expect(injector.get('token1')).toBe('direct');
+        });
+
+        it('should add the providers of exported modules', () => {
+          @NgModule({providers: [{provide: 'token1', useValue: 'exported'}]})
+          class ExportedValue {
+          }
+
+          @NgModule({exports: [ExportedValue]})
+          class SomeModule {
+          }
+
+          const injector = createModule(SomeModule).injector;
+
+          expect(injector.get(SomeModule)).toBeAnInstanceOf(SomeModule);
+          expect(injector.get(ExportedValue)).toBeAnInstanceOf(ExportedValue);
+          expect(injector.get('token1')).toBe('exported');
+        });
+
+        it('should overwrite the providers of exported modules', () => {
+          @NgModule({providers: [{provide: 'token1', useValue: 'exported'}]})
+          class ExportedModule {
+          }
+
+          @NgModule(
+              {providers: [{provide: 'token1', useValue: 'direct'}], exports: [ExportedModule]})
+          class SomeModule {
+          }
+
+          const injector = createModule(SomeModule).injector;
+          expect(injector.get('token1')).toBe('direct');
+        });
+
+        it('should overwrite the providers of imported modules by following imported modules',
+           () => {
+             @NgModule({providers: [{provide: 'token1', useValue: 'imported1'}]})
+             class ImportedModule1 {
+             }
+
+             @NgModule({providers: [{provide: 'token1', useValue: 'imported2'}]})
+             class ImportedModule2 {
+             }
+
+             @NgModule({imports: [ImportedModule1, ImportedModule2]})
+             class SomeModule {
+             }
+
+             const injector = createModule(SomeModule).injector;
+             expect(injector.get('token1')).toBe('imported2');
+           });
+
+        it('should overwrite the providers of exported modules by following exported modules',
+           () => {
+             @NgModule({providers: [{provide: 'token1', useValue: 'exported1'}]})
+             class ExportedModule1 {
+             }
+
+             @NgModule({providers: [{provide: 'token1', useValue: 'exported2'}]})
+             class ExportedModule2 {
+             }
+
+             @NgModule({exports: [ExportedModule1, ExportedModule2]})
+             class SomeModule {
+             }
+
+             const injector = createModule(SomeModule).injector;
+             expect(injector.get('token1')).toBe('exported2');
+           });
+
+        it('should overwrite the providers of imported modules by exported modules', () => {
+          @NgModule({providers: [{provide: 'token1', useValue: 'imported'}]})
+          class ImportedModule {
+          }
+
+          @NgModule({providers: [{provide: 'token1', useValue: 'exported'}]})
+          class ExportedModule {
+          }
+
+          @NgModule({imports: [ImportedModule], exports: [ExportedModule]})
+          class SomeModule {
+          }
+
+          const injector = createModule(SomeModule).injector;
+          expect(injector.get('token1')).toBe('exported');
+        });
+
+        it('should not overwrite the providers if a module was already used on the same level',
+           () => {
+             @NgModule({providers: [{provide: 'token1', useValue: 'imported1'}]})
+             class ImportedModule1 {
+             }
+
+             @NgModule({providers: [{provide: 'token1', useValue: 'imported2'}]})
+             class ImportedModule2 {
+             }
+
+             @NgModule({imports: [ImportedModule1, ImportedModule2, ImportedModule1]})
+             class SomeModule {
+             }
+
+             const injector = createModule(SomeModule).injector;
+             expect(injector.get('token1')).toBe('imported2');
+           });
+
+        it('should not overwrite the providers if a module was already used on a child level',
+           () => {
+             @NgModule({providers: [{provide: 'token1', useValue: 'imported1'}]})
+             class ImportedModule1 {
+             }
+
+             @NgModule({imports: [ImportedModule1]})
+             class ImportedModule3 {
+             }
+
+             @NgModule({providers: [{provide: 'token1', useValue: 'imported2'}]})
+             class ImportedModule2 {
+             }
+
+             @NgModule({imports: [ImportedModule3, ImportedModule2, ImportedModule1]})
+             class SomeModule {
+             }
+
+             const injector = createModule(SomeModule).injector;
+             expect(injector.get('token1')).toBe('imported2');
+           });
+
+        it('should throw when given invalid providers in an imported ModuleWithProviders', () => {
+          @NgModule()
+          class ImportedModule1 {
+          }
+
+          @NgModule({imports: [{ngModule: ImportedModule1, providers: [<any>'broken']}]})
+          class SomeModule {
+          }
+
+          expect(() => createModule(SomeModule).injector)
+              .toThrowError(
+                  `Invalid provider for the NgModule 'ImportedModule1' - only instances of Provider and Type are allowed, got: [?broken?]`);
+        });
+      });
+
+      describe('tree shakable providers', () => {
+        it('definition should not persist across NgModuleRef instances', () => {
+          @NgModule()
+          class SomeModule {
+          }
+
+          class Bar {
+            static ngInjectableDef: InjectableDef<Bar> = defineInjectable({
+              factory: () => new Bar(),
+              providedIn: SomeModule,
+            });
+          }
+
+          const factory = createModuleFactory(SomeModule);
+          const ngModuleRef1 = factory.create(null);
+
+          // Inject a tree shakeable provider token.
+          ngModuleRef1.injector.get(Bar);
+
+          // Tree Shakeable provider definition should get added to the NgModule data.
+          const providerDef1 = (ngModuleRef1 as NgModuleData)._def.providersByKey[tokenKey(Bar)];
+          expect(providerDef1).not.toBeUndefined();
+
+          // Instantiate the same module. The tree shakeable provider
+          // definition should not already be present.
+          const ngModuleRef2 = factory.create(null);
+          const providerDef2 = (ngModuleRef2 as NgModuleData)._def.providersByKey[tokenKey(Bar)];
+          expect(providerDef2).toBeUndefined();
+        });
+      });
+    });
+  });
+}
diff --git a/packages/core/test/linker/projection_integration_spec.ts b/packages/core/test/linker/projection_integration_spec.ts
new file mode 100644
index 000000000000..d616470e4229
--- /dev/null
+++ b/packages/core/test/linker/projection_integration_spec.ts
@@ -0,0 +1,707 @@
+/**
+ * @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, ElementRef, TemplateRef, ViewContainerRef, ViewEncapsulation} from '@angular/core';
+import {TestBed} 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';
+
+{
+  describe('projection', () => {
+    beforeEach(() => TestBed.configureTestingModule({declarations: [MainComp, OtherComp, Simple]}));
+
+    it('should support simple components', () => {
+      const template = '<simple><div>A</div></simple>';
+      TestBed.overrideComponent(MainComp, {set: {template}});
+      const main = TestBed.createComponent(MainComp);
+
+      expect(main.nativeElement).toHaveText('SIMPLE(A)');
+    });
+
+    it('should support simple components with text interpolation as direct children', () => {
+      const template = '{{\'START(\'}}<simple>' +
+          '{{text}}' +
+          '</simple>{{\')END\'}}';
+      TestBed.overrideComponent(MainComp, {set: {template}});
+      const main = TestBed.createComponent(MainComp);
+
+      main.componentInstance.text = 'A';
+      main.detectChanges();
+      expect(main.nativeElement).toHaveText('START(SIMPLE(A))END');
+    });
+
+    it('should support projecting text interpolation to a non bound element', () => {
+      TestBed.overrideComponent(
+          Simple, {set: {template: 'SIMPLE(<div><ng-content></ng-content></div>)'}});
+      TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}});
+      const main = TestBed.createComponent(MainComp);
+
+      main.componentInstance.text = 'A';
+      main.detectChanges();
+      expect(main.nativeElement).toHaveText('SIMPLE(A)');
+    });
+
+    it('should support projecting text interpolation to a non bound element with other bound elements after it',
+       () => {
+         TestBed.overrideComponent(Simple, {
+           set: {
+             template: 'SIMPLE(<div><ng-content></ng-content></div><div [tabIndex]="0">EL</div>)'
+           }
+         });
+         TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}});
+         const main = TestBed.createComponent(MainComp);
+
+         main.componentInstance.text = 'A';
+         main.detectChanges();
+         expect(main.nativeElement).toHaveText('SIMPLE(AEL)');
+       });
+
+    it('should project content components', () => {
+      TestBed.overrideComponent(
+          Simple, {set: {template: 'SIMPLE({{0}}|<ng-content></ng-content>|{{2}})'}});
+      TestBed.overrideComponent(OtherComp, {set: {template: '{{1}}'}});
+      TestBed.overrideComponent(MainComp, {set: {template: '<simple><other></other></simple>'}});
+      const main = TestBed.createComponent(MainComp);
+
+      main.detectChanges();
+      expect(main.nativeElement).toHaveText('SIMPLE(0|1|2)');
+    });
+
+    it('should not show the light dom even if there is no content tag', () => {
+      TestBed.configureTestingModule({declarations: [Empty]});
+      TestBed.overrideComponent(MainComp, {set: {template: '<empty>A</empty>'}});
+      const main = TestBed.createComponent(MainComp);
+
+      expect(main.nativeElement).toHaveText('');
+    });
+
+    it('should support multiple content tags', () => {
+      TestBed.configureTestingModule({declarations: [MultipleContentTagsComponent]});
+      TestBed.overrideComponent(MainComp, {
+        set: {
+          template: '<multiple-content-tags>' +
+              '<div>B</div>' +
+              '<div>C</div>' +
+              '<div class="left">A</div>' +
+              '</multiple-content-tags>'
+        }
+      });
+      const main = TestBed.createComponent(MainComp);
+
+      expect(main.nativeElement).toHaveText('(A, BC)');
+    });
+
+    it('should redistribute only direct children', () => {
+      TestBed.configureTestingModule({declarations: [MultipleContentTagsComponent]});
+      TestBed.overrideComponent(MainComp, {
+        set: {
+          template: '<multiple-content-tags>' +
+              '<div>B<div class="left">A</div></div>' +
+              '<div>C</div>' +
+              '</multiple-content-tags>'
+        }
+      });
+      const main = TestBed.createComponent(MainComp);
+
+      expect(main.nativeElement).toHaveText('(, BAC)');
+    });
+
+    it('should redistribute direct child viewcontainers when the light dom changes', () => {
+      TestBed.configureTestingModule(
+          {declarations: [MultipleContentTagsComponent, ManualViewportDirective]});
+      TestBed.overrideComponent(MainComp, {
+        set: {
+          template: '<multiple-content-tags>' +
+              '<ng-template manual class="left"><div>A1</div></ng-template>' +
+              '<div>B</div>' +
+              '</multiple-content-tags>'
+        }
+      });
+      const main = TestBed.createComponent(MainComp);
+
+      const viewportDirectives = main.debugElement.children[0]
+                                     .childNodes.filter(By.directive(ManualViewportDirective))
+                                     .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)');
+    });
+
+    it('should support nested components', () => {
+      TestBed.configureTestingModule({declarations: [OuterWithIndirectNestedComponent]});
+      TestBed.overrideComponent(MainComp, {
+        set: {
+          template: '<outer-with-indirect-nested>' +
+              '<div>A</div>' +
+              '<div>B</div>' +
+              '</outer-with-indirect-nested>'
+        }
+      });
+      const main = TestBed.createComponent(MainComp);
+
+      expect(main.nativeElement).toHaveText('OUTER(SIMPLE(AB))');
+    });
+
+    it('should support nesting with content being direct child of a nested component', () => {
+      TestBed.configureTestingModule({
+        declarations:
+            [InnerComponent, InnerInnerComponent, OuterComponent, ManualViewportDirective]
+      });
+      TestBed.overrideComponent(MainComp, {
+        set: {
+          template: '<outer>' +
+              '<ng-template manual class="left"><div>A</div></ng-template>' +
+              '<div>B</div>' +
+              '<div>C</div>' +
+              '</outer>'
+        }
+      });
+      const main = TestBed.createComponent(MainComp);
+
+      const viewportDirective =
+          main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
+              ManualViewportDirective);
+
+      expect(main.nativeElement).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
+      viewportDirective.show();
+
+      expect(main.nativeElement).toHaveText('OUTER(INNER(INNERINNER(A,BC)))');
+    });
+
+    it('should redistribute when the shadow dom changes', () => {
+      TestBed.configureTestingModule(
+          {declarations: [ConditionalContentComponent, ManualViewportDirective]});
+      TestBed.overrideComponent(MainComp, {
+        set: {
+          template: '<conditional-content>' +
+              '<div class="left">A</div>' +
+              '<div>B</div>' +
+              '<div>C</div>' +
+              '</conditional-content>'
+        }
+      });
+      const main = TestBed.createComponent(MainComp);
+
+      const viewportDirective =
+          main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
+              ManualViewportDirective);
+
+      expect(main.nativeElement).toHaveText('(, BC)');
+
+      viewportDirective.show();
+      main.detectChanges();
+      expect(main.nativeElement).toHaveText('(A, BC)');
+
+      viewportDirective.hide();
+      main.detectChanges();
+      expect(main.nativeElement).toHaveText('(, BC)');
+    });
+
+    // GH-2095 - https://github.com/angular/angular/issues/2095
+    // important as we are removing the ng-content element during compilation,
+    // which could skrew up text node indices.
+    it('should support text nodes after content tags', () => {
+      TestBed.overrideComponent(MainComp, {set: {template: '<simple stringProp="text"></simple>'}});
+      TestBed.overrideComponent(
+          Simple, {set: {template: '<ng-content></ng-content><p>P,</p>{{stringProp}}'}});
+      const main = TestBed.createComponent(MainComp);
+
+      main.detectChanges();
+
+      expect(main.nativeElement).toHaveText('P,text');
+    });
+
+    // important as we are moving style tags around during compilation,
+    // which could skrew up text node indices.
+    it('should support text nodes after style tags', () => {
+      TestBed.overrideComponent(MainComp, {set: {template: '<simple stringProp="text"></simple>'}});
+      TestBed.overrideComponent(
+          Simple, {set: {template: '<style></style><p>P,</p>{{stringProp}}'}});
+      const main = TestBed.createComponent(MainComp);
+
+      main.detectChanges();
+      expect(main.nativeElement).toHaveText('P,text');
+    });
+
+    it('should support moving non projected light dom around', () => {
+      let sourceDirective: ManualViewportDirective = undefined !;
+
+      @Directive({selector: '[manual]'})
+      class ManualViewportDirective {
+        constructor(public templateRef: TemplateRef<Object>) { sourceDirective = this; }
+      }
+
+      TestBed.configureTestingModule(
+          {declarations: [Empty, ProjectDirective, ManualViewportDirective]});
+      TestBed.overrideComponent(MainComp, {
+        set: {
+          template: '<empty>' +
+              ' <ng-template manual><div>A</div></ng-template>' +
+              '</empty>' +
+              'START(<div project></div>)END'
+        }
+      });
+      const main = TestBed.createComponent(MainComp);
+
+      const projectDirective: ProjectDirective =
+          main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
+              ProjectDirective);
+
+      expect(main.nativeElement).toHaveText('START()END');
+
+      projectDirective.show(sourceDirective.templateRef);
+      expect(main.nativeElement).toHaveText('START(A)END');
+    });
+
+    it('should support moving projected light dom around', () => {
+      TestBed.configureTestingModule(
+          {declarations: [Empty, ProjectDirective, ManualViewportDirective]});
+      TestBed.overrideComponent(MainComp, {
+        set: {
+          template: '<simple><ng-template manual><div>A</div></ng-template></simple>' +
+              'START(<div project></div>)END'
+        }
+      });
+      const main = TestBed.createComponent(MainComp);
+
+      const sourceDirective: ManualViewportDirective =
+          main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
+              ManualViewportDirective);
+      const projectDirective: ProjectDirective =
+          main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
+              ProjectDirective);
+      expect(main.nativeElement).toHaveText('SIMPLE()START()END');
+
+      projectDirective.show(sourceDirective.templateRef);
+      expect(main.nativeElement).toHaveText('SIMPLE()START(A)END');
+    });
+
+    it('should support moving ng-content around', () => {
+      TestBed.configureTestingModule(
+          {declarations: [ConditionalContentComponent, ProjectDirective, ManualViewportDirective]});
+      TestBed.overrideComponent(MainComp, {
+        set: {
+          template: '<conditional-content>' +
+              '<div class="left">A</div>' +
+              '<div>B</div>' +
+              '</conditional-content>' +
+              'START(<div project></div>)END'
+        }
+      });
+      const main = TestBed.createComponent(MainComp);
+
+      const sourceDirective: ManualViewportDirective =
+          main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
+              ManualViewportDirective);
+      const projectDirective: ProjectDirective =
+          main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
+              ProjectDirective);
+      expect(main.nativeElement).toHaveText('(, B)START()END');
+
+      projectDirective.show(sourceDirective.templateRef);
+      expect(main.nativeElement).toHaveText('(, B)START(A)END');
+
+      // Stamping ng-content multiple times should not produce the content multiple
+      // times...
+      projectDirective.show(sourceDirective.templateRef);
+      expect(main.nativeElement).toHaveText('(, B)START(A)END');
+    });
+
+    // Note: This does not use a ng-content element, but
+    // is still important as we are merging proto views independent of
+    // the presence of ng-content elements!
+    it('should still allow to implement a recursive trees', () => {
+      TestBed.configureTestingModule({declarations: [Tree, ManualViewportDirective]});
+      TestBed.overrideComponent(MainComp, {set: {template: '<tree></tree>'}});
+      const main = TestBed.createComponent(MainComp);
+
+      main.detectChanges();
+      const manualDirective: ManualViewportDirective =
+          main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
+              ManualViewportDirective);
+      expect(main.nativeElement).toHaveText('TREE(0:)');
+      manualDirective.show();
+      main.detectChanges();
+      expect(main.nativeElement).toHaveText('TREE(0:TREE(1:))');
+    });
+
+    // Note: This does not use a ng-content element, but
+    // is still important as we are merging proto views independent of
+    // the presence of ng-content elements!
+    it('should still allow to implement a recursive trees via multiple components', () => {
+      TestBed.configureTestingModule({declarations: [Tree, Tree2, ManualViewportDirective]});
+      TestBed.overrideComponent(MainComp, {set: {template: '<tree></tree>'}});
+      TestBed.overrideComponent(
+          Tree, {set: {template: 'TREE({{depth}}:<tree2 *manual [depth]="depth+1"></tree2>)'}});
+      const main = TestBed.createComponent(MainComp);
+
+      main.detectChanges();
+
+      expect(main.nativeElement).toHaveText('TREE(0:)');
+
+      const tree = main.debugElement.query(By.directive(Tree));
+      let manualDirective: ManualViewportDirective = tree.queryAllNodes(By.directive(
+          ManualViewportDirective))[0].injector.get(ManualViewportDirective);
+      manualDirective.show();
+      main.detectChanges();
+      expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:))');
+
+      const tree2 = main.debugElement.query(By.directive(Tree2));
+      manualDirective = tree2.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
+          ManualViewportDirective);
+      manualDirective.show();
+      main.detectChanges();
+      expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:TREE(2:)))');
+    });
+
+    if (getDOM().supportsNativeShadowDOM()) {
+      it('should support native content projection and isolate styles per component', () => {
+        TestBed.configureTestingModule({declarations: [SimpleNative1, SimpleNative2]});
+        TestBed.overrideComponent(MainComp, {
+          set: {
+            template: '<simple-native1><div>A</div></simple-native1>' +
+                '<simple-native2><div>B</div></simple-native2>'
+          }
+        });
+        const main = TestBed.createComponent(MainComp);
+
+        const childNodes = getDOM().childNodes(main.nativeElement);
+        expect(childNodes[0]).toHaveText('div {color: red}SIMPLE1(A)');
+        expect(childNodes[1]).toHaveText('div {color: blue}SIMPLE2(B)');
+        main.destroy();
+      });
+    }
+
+    if (getDOM().supportsDOMEvents()) {
+      it('should support non emulated styles', () => {
+        TestBed.configureTestingModule({declarations: [OtherComp]});
+        TestBed.overrideComponent(MainComp, {
+          set: {
+            template: '<div class="redStyle"></div>',
+            styles: ['.redStyle { color: red}'],
+            encapsulation: ViewEncapsulation.None,
+          }
+        });
+        const main = TestBed.createComponent(MainComp);
+
+        const mainEl = main.nativeElement;
+        const div1 = getDOM().firstChild(mainEl);
+        const div2 = getDOM().createElement('div');
+        getDOM().setAttribute(div2, 'class', 'redStyle');
+        getDOM().appendChild(mainEl, div2);
+        expect(getDOM().getComputedStyle(div1).color).toEqual('rgb(255, 0, 0)');
+        expect(getDOM().getComputedStyle(div2).color).toEqual('rgb(255, 0, 0)');
+      });
+
+      it('should support emulated style encapsulation', () => {
+        TestBed.configureTestingModule({declarations: [OtherComp]});
+        TestBed.overrideComponent(MainComp, {
+          set: {
+            template: '<div></div>',
+            styles: ['div { color: red}'],
+            encapsulation: ViewEncapsulation.Emulated,
+          }
+        });
+        const main = TestBed.createComponent(MainComp);
+
+        const mainEl = main.nativeElement;
+        const div1 = getDOM().firstChild(mainEl);
+        const div2 = getDOM().createElement('div');
+        getDOM().appendChild(mainEl, div2);
+        expect(getDOM().getComputedStyle(div1).color).toEqual('rgb(255, 0, 0)');
+        expect(getDOM().getComputedStyle(div2).color).toEqual('rgb(0, 0, 0)');
+      });
+    }
+
+    it('should support nested conditionals that contain ng-contents', () => {
+      TestBed.configureTestingModule(
+          {declarations: [ConditionalTextComponent, ManualViewportDirective]});
+      TestBed.overrideComponent(
+          MainComp, {set: {template: `<conditional-text>a</conditional-text>`}});
+      const main = TestBed.createComponent(MainComp);
+
+      expect(main.nativeElement).toHaveText('MAIN()');
+
+      let viewportElement =
+          main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0];
+      viewportElement.injector.get(ManualViewportDirective).show();
+      expect(main.nativeElement).toHaveText('MAIN(FIRST())');
+
+      viewportElement = main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[1];
+      viewportElement.injector.get(ManualViewportDirective).show();
+      expect(main.nativeElement).toHaveText('MAIN(FIRST(SECOND(a)))');
+    });
+
+    it('should allow to switch the order of nested components via ng-content', () => {
+      TestBed.configureTestingModule({declarations: [CmpA, CmpB, CmpD, CmpC]});
+      TestBed.overrideComponent(MainComp, {set: {template: `<cmp-a><cmp-b></cmp-b></cmp-a>`}});
+      const main = TestBed.createComponent(MainComp);
+
+      main.detectChanges();
+      expect(getDOM().getInnerHTML(main.nativeElement))
+          .toEqual(
+              '<cmp-a><cmp-b><cmp-d><i>cmp-d</i></cmp-d></cmp-b>' +
+              '<cmp-c><b>cmp-c</b></cmp-c></cmp-a>');
+    });
+
+    it('should create nested components in the right order', () => {
+      TestBed.configureTestingModule(
+          {declarations: [CmpA1, CmpA2, CmpB11, CmpB12, CmpB21, CmpB22]});
+      TestBed.overrideComponent(MainComp, {set: {template: `<cmp-a1></cmp-a1><cmp-a2></cmp-a2>`}});
+      const main = TestBed.createComponent(MainComp);
+
+      main.detectChanges();
+      expect(getDOM().getInnerHTML(main.nativeElement))
+          .toEqual(
+              '<cmp-a1>a1<cmp-b11>b11</cmp-b11><cmp-b12>b12</cmp-b12></cmp-a1>' +
+              '<cmp-a2>a2<cmp-b21>b21</cmp-b21><cmp-b22>b22</cmp-b22></cmp-a2>');
+    });
+
+    it('should project filled view containers into a view container', () => {
+      TestBed.configureTestingModule(
+          {declarations: [ConditionalContentComponent, ManualViewportDirective]});
+      TestBed.overrideComponent(MainComp, {
+        set: {
+          template: '<conditional-content>' +
+              '<div class="left">A</div>' +
+              '<ng-template manual class="left">B</ng-template>' +
+              '<div class="left">C</div>' +
+              '<div>D</div>' +
+              '</conditional-content>'
+        }
+      });
+      const main = TestBed.createComponent(MainComp);
+
+      const conditionalComp = main.debugElement.query(By.directive(ConditionalContentComponent));
+
+      const viewViewportDir =
+          conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
+              ManualViewportDirective);
+
+      expect(main.nativeElement).toHaveText('(, D)');
+      expect(main.nativeElement).toHaveText('(, D)');
+
+      viewViewportDir.show();
+      main.detectChanges();
+      expect(main.nativeElement).toHaveText('(AC, D)');
+
+      const contentViewportDir =
+          conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].injector.get(
+              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)');
+    });
+  });
+}
+
+@Component({selector: 'main', template: ''})
+class MainComp {
+  text: string = '';
+}
+
+@Component({selector: 'other', template: ''})
+class OtherComp {
+  text: string = '';
+}
+
+@Component({
+  selector: 'simple',
+  inputs: ['stringProp'],
+  template: 'SIMPLE(<ng-content></ng-content>)',
+})
+class Simple {
+  stringProp: string = '';
+}
+
+@Component({
+  selector: 'simple-native1',
+  template: 'SIMPLE1(<content></content>)',
+  encapsulation: ViewEncapsulation.Native,
+  styles: ['div {color: red}']
+})
+class SimpleNative1 {
+}
+
+@Component({
+  selector: 'simple-native2',
+  template: 'SIMPLE2(<content></content>)',
+  encapsulation: ViewEncapsulation.Native,
+  styles: ['div {color: blue}']
+})
+class SimpleNative2 {
+}
+
+@Component({selector: 'empty', template: ''})
+class Empty {
+}
+
+@Component({
+  selector: 'multiple-content-tags',
+  template: '(<ng-content SELECT=".left"></ng-content>, <ng-content></ng-content>)',
+})
+class MultipleContentTagsComponent {
+}
+
+@Directive({selector: '[manual]'})
+class ManualViewportDirective {
+  constructor(public vc: ViewContainerRef, public templateRef: TemplateRef<Object>) {}
+  show() { this.vc.createEmbeddedView(this.templateRef); }
+  hide() { this.vc.clear(); }
+}
+
+@Directive({selector: '[project]'})
+class ProjectDirective {
+  constructor(public vc: ViewContainerRef) {}
+  show(templateRef: TemplateRef<Object>) { this.vc.createEmbeddedView(templateRef); }
+  hide() { this.vc.clear(); }
+}
+
+@Component({
+  selector: 'outer-with-indirect-nested',
+  template: 'OUTER(<simple><div><ng-content></ng-content></div></simple>)',
+})
+class OuterWithIndirectNestedComponent {
+}
+
+@Component({
+  selector: 'outer',
+  template:
+      'OUTER(<inner><ng-content select=".left" class="left"></ng-content><ng-content></ng-content></inner>)',
+})
+class OuterComponent {
+}
+
+@Component({
+  selector: 'inner',
+  template:
+      'INNER(<innerinner><ng-content select=".left" class="left"></ng-content><ng-content></ng-content></innerinner>)',
+})
+class InnerComponent {
+}
+
+@Component({
+  selector: 'innerinner',
+  template: 'INNERINNER(<ng-content select=".left"></ng-content>,<ng-content></ng-content>)',
+})
+class InnerInnerComponent {
+}
+
+@Component({
+  selector: 'conditional-content',
+  template:
+      '<div>(<div *manual><ng-content select=".left"></ng-content></div>, <ng-content></ng-content>)</div>',
+})
+class ConditionalContentComponent {
+}
+
+@Component({
+  selector: 'conditional-text',
+  template:
+      'MAIN(<ng-template manual>FIRST(<ng-template manual>SECOND(<ng-content></ng-content>)</ng-template>)</ng-template>)',
+})
+class ConditionalTextComponent {
+}
+
+@Component({
+  selector: 'tab',
+  template: '<div><div *manual>TAB(<ng-content></ng-content>)</div></div>',
+})
+class Tab {
+}
+
+@Component({
+  selector: 'tree2',
+  inputs: ['depth'],
+  template: 'TREE2({{depth}}:<tree *manual [depth]="depth+1"></tree>)',
+})
+class Tree2 {
+  depth = 0;
+}
+
+@Component({
+  selector: 'tree',
+  inputs: ['depth'],
+  template: 'TREE({{depth}}:<tree *manual [depth]="depth+1"></tree>)',
+})
+class Tree {
+  depth = 0;
+}
+
+
+@Component({selector: 'cmp-d', template: `<i>{{tagName}}</i>`})
+class CmpD {
+  tagName: string;
+  constructor(elementRef: ElementRef) {
+    this.tagName = getDOM().tagName(elementRef.nativeElement).toLowerCase();
+  }
+}
+
+
+@Component({selector: 'cmp-c', template: `<b>{{tagName}}</b>`})
+class CmpC {
+  tagName: string;
+  constructor(elementRef: ElementRef) {
+    this.tagName = getDOM().tagName(elementRef.nativeElement).toLowerCase();
+  }
+}
+
+
+@Component({selector: 'cmp-b', template: `<ng-content></ng-content><cmp-d></cmp-d>`})
+class CmpB {
+}
+
+
+@Component({selector: 'cmp-a', template: `<ng-content></ng-content><cmp-c></cmp-c>`})
+class CmpA {
+}
+
+@Component({selector: 'cmp-b11', template: `{{'b11'}}`})
+class CmpB11 {
+}
+
+@Component({selector: 'cmp-b12', template: `{{'b12'}}`})
+class CmpB12 {
+}
+
+@Component({selector: 'cmp-b21', template: `{{'b21'}}`})
+class CmpB21 {
+}
+
+@Component({selector: 'cmp-b22', template: `{{'b22'}}`})
+class CmpB22 {
+}
+
+@Component({
+  selector: 'cmp-a1',
+  template: `{{'a1'}}<cmp-b11></cmp-b11><cmp-b12></cmp-b12>`,
+})
+class CmpA1 {
+}
+
+@Component({
+  selector: 'cmp-a2',
+  template: `{{'a2'}}<cmp-b21></cmp-b21><cmp-b22></cmp-b22>`,
+})
+class CmpA2 {
+}
diff --git a/packages/core/test/linker/query_integration_spec.ts b/packages/core/test/linker/query_integration_spec.ts
new file mode 100644
index 000000000000..9e8cbc72a24d
--- /dev/null
+++ b/packages/core/test/linker/query_integration_spec.ts
@@ -0,0 +1,965 @@
+/**
+ * @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 {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, ContentChild, ContentChildren, Directive, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef, asNativeElements} from '@angular/core';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+import {Subject} from 'rxjs';
+
+import {stringify} from '../../src/util';
+
+{
+  describe('Query API', () => {
+
+    beforeEach(() => TestBed.configureTestingModule({
+      declarations: [
+        MyComp0,
+        NeedsQuery,
+        NeedsQueryDesc,
+        NeedsQueryByLabel,
+        NeedsQueryByTwoLabels,
+        NeedsQueryAndProject,
+        NeedsViewQuery,
+        NeedsViewQueryIf,
+        NeedsViewQueryNestedIf,
+        NeedsViewQueryOrder,
+        NeedsViewQueryByLabel,
+        NeedsViewQueryOrderWithParent,
+        NeedsContentChildren,
+        NeedsViewChildren,
+        NeedsViewChild,
+        NeedsStaticContentAndViewChild,
+        NeedsContentChild,
+        DirectiveNeedsContentChild,
+        NeedsTpl,
+        NeedsNamedTpl,
+        TextDirective,
+        InertDirective,
+        NeedsFourQueries,
+        NeedsContentChildrenWithRead,
+        NeedsContentChildWithRead,
+        NeedsViewChildrenWithRead,
+        NeedsViewChildWithRead,
+        NeedsContentChildTemplateRef,
+        NeedsContentChildTemplateRefApp,
+        NeedsViewContainerWithRead,
+        ManualProjecting
+      ]
+    }));
+
+    describe('querying by directive type', () => {
+      it('should contain all direct child directives in the light dom (constructor)', () => {
+        const template = '<div text="1"></div>' +
+            '<needs-query text="2"><div text="3">' +
+            '<div text="too-deep"></div>' +
+            '</div></needs-query>' +
+            '<div text="4"></div>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
+      });
+
+      it('should contain all direct child directives in the content dom', () => {
+        const template =
+            '<needs-content-children #q><div text="foo"></div></needs-content-children>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        const q = view.debugElement.children[0].references !['q'];
+        view.detectChanges();
+        expect(q.textDirChildren.length).toEqual(1);
+        expect(q.numberOfChildrenAfterContentInit).toEqual(1);
+      });
+
+      it('should contain the first content child', () => {
+        const template =
+            '<needs-content-child #q><div *ngIf="shouldShow" text="foo"></div></needs-content-child>';
+        const view = createTestCmp(MyComp0, template);
+        view.componentInstance.shouldShow = true;
+        view.detectChanges();
+        const q: NeedsContentChild = view.debugElement.children[0].references !['q'];
+        expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
+
+        view.componentInstance.shouldShow = false;
+        view.detectChanges();
+        expect(q.logs).toEqual([
+          ['setter', 'foo'], ['init', 'foo'], ['check', 'foo'], ['setter', null], ['check', null]
+        ]);
+      });
+
+      it('should contain the first content child when target is on <ng-template> with embedded view (issue #16568)',
+         () => {
+           const template =
+               '<div directive-needs-content-child><ng-template text="foo" [ngIf]="true"><div text="bar"></div></ng-template></div>' +
+               '<needs-content-child #q><ng-template text="foo" [ngIf]="true"><div text="bar"></div></ng-template></needs-content-child>';
+           const view = createTestCmp(MyComp0, template);
+           view.detectChanges();
+           const q: NeedsContentChild = view.debugElement.children[1].references !['q'];
+           expect(q.child.text).toEqual('foo');
+           const directive: DirectiveNeedsContentChild =
+               view.debugElement.children[0].injector.get(DirectiveNeedsContentChild);
+           expect(directive.child.text).toEqual('foo');
+         });
+
+      it('should contain the first view child', () => {
+        const template = '<needs-view-child #q></needs-view-child>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        const q: NeedsViewChild = view.debugElement.children[0].references !['q'];
+        expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
+
+        q.shouldShow = false;
+        view.detectChanges();
+        expect(q.logs).toEqual([
+          ['setter', 'foo'], ['init', 'foo'], ['check', 'foo'], ['setter', null], ['check', null]
+        ]);
+      });
+
+      it('should set static view and content children already after the constructor call', () => {
+        const template =
+            '<needs-static-content-view-child #q><div text="contentFoo"></div></needs-static-content-view-child>';
+        const view = createTestCmp(MyComp0, template);
+        const q: NeedsStaticContentAndViewChild = view.debugElement.children[0].references !['q'];
+        expect(q.contentChild.text).toBeFalsy();
+        expect(q.viewChild.text).toBeFalsy();
+
+        view.detectChanges();
+        expect(q.contentChild.text).toEqual('contentFoo');
+        expect(q.viewChild.text).toEqual('viewFoo');
+      });
+
+      it('should contain the first view child across embedded views', () => {
+        TestBed.overrideComponent(
+            MyComp0, {set: {template: '<needs-view-child #q></needs-view-child>'}});
+        TestBed.overrideComponent(NeedsViewChild, {
+          set: {
+            template:
+                '<div *ngIf="true"><div *ngIf="shouldShow" text="foo"></div></div><div *ngIf="shouldShow2" text="bar"></div>'
+          }
+        });
+        const view = TestBed.createComponent(MyComp0);
+
+        view.detectChanges();
+        const q: NeedsViewChild = view.debugElement.children[0].references !['q'];
+        expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
+
+        q.shouldShow = false;
+        q.shouldShow2 = true;
+        q.logs = [];
+        view.detectChanges();
+        expect(q.logs).toEqual([['setter', 'bar'], ['check', 'bar']]);
+
+        q.shouldShow = false;
+        q.shouldShow2 = false;
+        q.logs = [];
+        view.detectChanges();
+        expect(q.logs).toEqual([['setter', null], ['check', null]]);
+      });
+
+      it('should contain all directives in the light dom when descendants flag is used', () => {
+        const template = '<div text="1"></div>' +
+            '<needs-query-desc text="2"><div text="3">' +
+            '<div text="4"></div>' +
+            '</div></needs-query-desc>' +
+            '<div text="5"></div>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|4|');
+      });
+
+      it('should contain all directives in the light dom', () => {
+        const template = '<div text="1"></div>' +
+            '<needs-query text="2"><div text="3"></div></needs-query>' +
+            '<div text="4"></div>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
+      });
+
+      it('should reflect dynamically inserted directives', () => {
+        const template = '<div text="1"></div>' +
+            '<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
+            '<div text="4"></div>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        expect(asNativeElements(view.debugElement.children)).toHaveText('2|');
+
+        view.componentInstance.shouldShow = true;
+        view.detectChanges();
+        expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
+      });
+
+      it('should be cleanly destroyed when a query crosses view boundaries', () => {
+        const template = '<div text="1"></div>' +
+            '<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
+            '<div text="4"></div>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        view.componentInstance.shouldShow = true;
+        view.detectChanges();
+        view.destroy();
+      });
+
+      it('should reflect moved directives', () => {
+        const template = '<div text="1"></div>' +
+            '<needs-query text="2"><div *ngFor="let  i of list" [text]="i"></div></needs-query>' +
+            '<div text="4"></div>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        expect(asNativeElements(view.debugElement.children)).toHaveText('2|1d|2d|3d|');
+
+        view.componentInstance.list = ['3d', '2d'];
+        view.detectChanges();
+        expect(asNativeElements(view.debugElement.children)).toHaveText('2|3d|2d|');
+      });
+
+      it('should throw with descriptive error when query selectors are not present', () => {
+        TestBed.configureTestingModule({declarations: [MyCompBroken0, HasNullQueryCondition]});
+        const template = '<has-null-query-condition></has-null-query-condition>';
+        TestBed.overrideComponent(MyCompBroken0, {set: {template}});
+        expect(() => TestBed.createComponent(MyCompBroken0))
+            .toThrowError(
+                `Can't construct a query for the property "errorTrigger" of "${stringify(HasNullQueryCondition)}" since the query selector wasn't defined.`);
+      });
+    });
+
+    describe('query for TemplateRef', () => {
+      it('should find TemplateRefs in the light and shadow dom', () => {
+        const template = '<needs-tpl><ng-template><div>light</div></ng-template></needs-tpl>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const needsTpl: NeedsTpl = view.debugElement.children[0].injector.get(NeedsTpl);
+
+        expect(needsTpl.vc.createEmbeddedView(needsTpl.query.first).rootNodes[0])
+            .toHaveText('light');
+        expect(needsTpl.vc.createEmbeddedView(needsTpl.viewQuery.first).rootNodes[0])
+            .toHaveText('shadow');
+      });
+
+      it('should find named TemplateRefs', () => {
+        const template =
+            '<needs-named-tpl><ng-template #tpl><div>light</div></ng-template></needs-named-tpl>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const needsTpl: NeedsNamedTpl = view.debugElement.children[0].injector.get(NeedsNamedTpl);
+        expect(needsTpl.vc.createEmbeddedView(needsTpl.contentTpl).rootNodes[0])
+            .toHaveText('light');
+        expect(needsTpl.vc.createEmbeddedView(needsTpl.viewTpl).rootNodes[0]).toHaveText('shadow');
+      });
+    });
+
+    describe('read a different token', () => {
+      it('should contain all content children', () => {
+        const template =
+            '<needs-content-children-read #q text="ca"><div #q text="cb"></div></needs-content-children-read>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        const comp: NeedsContentChildrenWithRead =
+            view.debugElement.children[0].injector.get(NeedsContentChildrenWithRead);
+        expect(comp.textDirChildren.map(textDirective => textDirective.text)).toEqual(['ca', 'cb']);
+      });
+
+      it('should contain the first content child', () => {
+        const template =
+            '<needs-content-child-read><div #q text="ca"></div></needs-content-child-read>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        const comp: NeedsContentChildWithRead =
+            view.debugElement.children[0].injector.get(NeedsContentChildWithRead);
+        expect(comp.textDirChild.text).toEqual('ca');
+      });
+
+      it('should contain the first descendant content child', () => {
+        const template = '<needs-content-child-read>' +
+            '<div dir><div #q text="ca"></div></div>' +
+            '</needs-content-child-read>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        const comp: NeedsContentChildWithRead =
+            view.debugElement.children[0].injector.get(NeedsContentChildWithRead);
+        expect(comp.textDirChild.text).toEqual('ca');
+      });
+
+      it('should contain the first descendant content child templateRef', () => {
+        const template = '<needs-content-child-template-ref-app>' +
+            '</needs-content-child-template-ref-app>';
+        const view = createTestCmp(MyComp0, template);
+
+        // can't execute checkNoChanges as our view modifies our content children (via a query).
+        view.detectChanges(false);
+        expect(view.nativeElement).toHaveText('OUTER');
+      });
+
+      it('should contain the first view child', () => {
+        const template = '<needs-view-child-read></needs-view-child-read>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        const comp: NeedsViewChildWithRead =
+            view.debugElement.children[0].injector.get(NeedsViewChildWithRead);
+        expect(comp.textDirChild.text).toEqual('va');
+      });
+
+      it('should contain all child directives in the view', () => {
+        const template = '<needs-view-children-read></needs-view-children-read>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        const comp: NeedsViewChildrenWithRead =
+            view.debugElement.children[0].injector.get(NeedsViewChildrenWithRead);
+        expect(comp.textDirChildren.map(textDirective => textDirective.text)).toEqual(['va', 'vb']);
+      });
+
+      it('should support reading a ViewContainer', () => {
+        const template =
+            '<needs-viewcontainer-read><ng-template>hello</ng-template></needs-viewcontainer-read>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        const comp: NeedsViewContainerWithRead =
+            view.debugElement.children[0].injector.get(NeedsViewContainerWithRead);
+        comp.createView();
+        expect(view.debugElement.children[0].nativeElement).toHaveText('hello');
+      });
+    });
+
+    describe('changes', () => {
+      it('should notify query on change', async(() => {
+           const template = '<needs-query #q>' +
+               '<div text="1"></div>' +
+               '<div *ngIf="shouldShow" text="2"></div>' +
+               '</needs-query>';
+           const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+           const q = view.debugElement.children[0].references !['q'];
+
+           q.query.changes.subscribe({
+             next: () => {
+               expect(q.query.first.text).toEqual('1');
+               expect(q.query.last.text).toEqual('2');
+             }
+           });
+
+           view.componentInstance.shouldShow = true;
+           view.detectChanges();
+         }));
+
+      it('should correctly clean-up when destroyed together with the directives it is querying',
+         () => {
+           const template =
+               '<needs-query #q *ngIf="shouldShow"><div text="foo"></div></needs-query>';
+           const view = createTestCmpAndDetectChanges(MyComp0, template);
+           view.componentInstance.shouldShow = true;
+           view.detectChanges();
+
+           let isQueryListCompleted = false;
+
+           const q: NeedsQuery = view.debugElement.children[0].references !['q'];
+           const changes = <Subject<any>>q.query.changes;
+           expect(q.query.length).toEqual(1);
+           expect(changes.closed).toBeFalsy();
+           changes.subscribe(() => {}, () => {}, () => { isQueryListCompleted = true; });
+
+           view.componentInstance.shouldShow = false;
+           view.detectChanges();
+           expect(changes.closed).toBeTruthy();
+           expect(isQueryListCompleted).toBeTruthy();
+
+           view.componentInstance.shouldShow = true;
+           view.detectChanges();
+           const q2: NeedsQuery = view.debugElement.children[0].references !['q'];
+
+           expect(q2.query.length).toEqual(1);
+           expect(changes.closed).toBeTruthy();
+           expect((<Subject<any>>q2.query.changes).closed).toBeFalsy();
+         });
+    });
+
+    describe('querying by var binding', () => {
+      it('should contain all the child directives in the light dom with the given var binding',
+         () => {
+           const template = '<needs-query-by-ref-binding #q>' +
+               '<div *ngFor="let item of list" [text]="item" #textLabel="textDir"></div>' +
+               '</needs-query-by-ref-binding>';
+           const view = createTestCmpAndDetectChanges(MyComp0, template);
+           const q = view.debugElement.children[0].references !['q'];
+
+           view.componentInstance.list = ['1d', '2d'];
+           view.detectChanges();
+           expect(q.query.first.text).toEqual('1d');
+           expect(q.query.last.text).toEqual('2d');
+         });
+
+      it('should support querying by multiple var bindings', () => {
+        const template = '<needs-query-by-ref-bindings #q>' +
+            '<div text="one" #textLabel1="textDir"></div>' +
+            '<div text="two" #textLabel2="textDir"></div>' +
+            '</needs-query-by-ref-bindings>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q = view.debugElement.children[0].references !['q'];
+
+        expect(q.query.first.text).toEqual('one');
+        expect(q.query.last.text).toEqual('two');
+      });
+
+      it('should support dynamically inserted directives', () => {
+        const template = '<needs-query-by-ref-binding #q>' +
+            '<div *ngFor="let item of list" [text]="item" #textLabel="textDir"></div>' +
+            '</needs-query-by-ref-binding>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q = view.debugElement.children[0].references !['q'];
+
+        view.componentInstance.list = ['1d', '2d'];
+        view.detectChanges();
+        view.componentInstance.list = ['2d', '1d'];
+        view.detectChanges();
+        expect(q.query.last.text).toEqual('1d');
+      });
+
+      it('should contain all the elements in the light dom with the given var binding', () => {
+        const template = '<needs-query-by-ref-binding #q>' +
+            '<div *ngFor="let item of list">' +
+            '<div #textLabel>{{item}}</div>' +
+            '</div>' +
+            '</needs-query-by-ref-binding>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q = view.debugElement.children[0].references !['q'];
+
+        view.componentInstance.list = ['1d', '2d'];
+        view.detectChanges();
+        expect(q.query.first.nativeElement).toHaveText('1d');
+        expect(q.query.last.nativeElement).toHaveText('2d');
+      });
+
+      it('should contain all the elements in the light dom even if they get projected', () => {
+        const template = '<needs-query-and-project #q>' +
+            '<div text="hello"></div><div text="world"></div>' +
+            '</needs-query-and-project>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        expect(asNativeElements(view.debugElement.children)).toHaveText('hello|world|');
+      });
+
+      it('should support querying the view by using a view query', () => {
+        const template = '<needs-view-query-by-ref-binding #q></needs-view-query-by-ref-binding>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+        const q: NeedsViewQueryByLabel = view.debugElement.children[0].references !['q'];
+        expect(q.query.first.nativeElement).toHaveText('text');
+      });
+
+      it('should contain all child directives in the view dom', () => {
+        const template = '<needs-view-children #q></needs-view-children>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q = view.debugElement.children[0].references !['q'];
+        expect(q.textDirChildren.length).toEqual(1);
+        expect(q.numberOfChildrenAfterViewInit).toEqual(1);
+      });
+    });
+
+    describe('querying in the view', () => {
+      it('should contain all the elements in the view with that have the given directive', () => {
+        const template = '<needs-view-query #q><div text="ignoreme"></div></needs-view-query>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q: NeedsViewQuery = view.debugElement.children[0].references !['q'];
+        expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
+      });
+
+      it('should not include directive present on the host element', () => {
+        const template = '<needs-view-query #q text="self"></needs-view-query>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q: NeedsViewQuery = view.debugElement.children[0].references !['q'];
+        expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
+      });
+
+      it('should reflect changes in the component', () => {
+        const template = '<needs-view-query-if #q></needs-view-query-if>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q: NeedsViewQueryIf = view.debugElement.children[0].references !['q'];
+        expect(q.query.length).toBe(0);
+
+        q.show = true;
+        view.detectChanges();
+        expect(q.query.length).toBe(1);
+        expect(q.query.first.text).toEqual('1');
+      });
+
+      it('should not be affected by other changes in the component', () => {
+        const template = '<needs-view-query-nested-if #q></needs-view-query-nested-if>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q: NeedsViewQueryNestedIf = view.debugElement.children[0].references !['q'];
+
+        expect(q.query.length).toEqual(1);
+        expect(q.query.first.text).toEqual('1');
+
+        q.show = false;
+        view.detectChanges();
+        expect(q.query.length).toEqual(1);
+        expect(q.query.first.text).toEqual('1');
+      });
+
+      it('should maintain directives in pre-order depth-first DOM order after dynamic insertion',
+         () => {
+           const template = '<needs-view-query-order #q></needs-view-query-order>';
+           const view = createTestCmpAndDetectChanges(MyComp0, template);
+           const q: NeedsViewQueryOrder = view.debugElement.children[0].references !['q'];
+
+           expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
+
+           q.list = ['-3', '2'];
+           view.detectChanges();
+           expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '-3', '2', '4']);
+         });
+
+      it('should maintain directives in pre-order depth-first DOM order after dynamic insertion',
+         () => {
+           const template = '<needs-view-query-order-with-p #q></needs-view-query-order-with-p>';
+           const view = createTestCmpAndDetectChanges(MyComp0, template);
+           const q: NeedsViewQueryOrderWithParent = view.debugElement.children[0].references !['q'];
+           expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
+
+           q.list = ['-3', '2'];
+           view.detectChanges();
+           expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '-3', '2', '4']);
+         });
+
+      it('should handle long ngFor cycles', () => {
+        const template = '<needs-view-query-order #q></needs-view-query-order>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q: NeedsViewQueryOrder = view.debugElement.children[0].references !['q'];
+
+        // no significance to 50, just a reasonably large cycle.
+        for (let i = 0; i < 50; i++) {
+          const newString = i.toString();
+          q.list = [newString];
+          view.detectChanges();
+          expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', newString, '4']);
+        }
+      });
+
+      it('should support more than three queries', () => {
+        const template = '<needs-four-queries #q><div text="1"></div></needs-four-queries>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q = view.debugElement.children[0].references !['q'];
+        expect(q.query1).toBeDefined();
+        expect(q.query2).toBeDefined();
+        expect(q.query3).toBeDefined();
+        expect(q.query4).toBeDefined();
+      });
+    });
+
+    describe('query over moved templates', () => {
+      it('should include manually projected templates in queries', () => {
+        const template =
+            '<manual-projecting #q><ng-template><div text="1"></div></ng-template></manual-projecting>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q = view.debugElement.children[0].references !['q'];
+        expect(q.query.length).toBe(0);
+
+        q.create();
+        view.detectChanges();
+        expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1']);
+
+        q.destroy();
+        view.detectChanges();
+        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(
+               {selector: 'auto-projecting', template: '<div *ngIf="true; then: content"></div>'})
+           class AutoProjecting {
+             // TODO(issue/24571): remove '!'.
+             @ContentChild(TemplateRef)
+             content !: TemplateRef<any>;
+
+             // TODO(issue/24571): remove '!'.
+             @ContentChildren(TextDirective)
+             query !: QueryList<TextDirective>;
+           }
+
+           TestBed.configureTestingModule({declarations: [AutoProjecting]});
+           const template =
+               '<auto-projecting #q><ng-template><div text="1"></div></ng-template></auto-projecting>';
+           const view = createTestCmpAndDetectChanges(MyComp0, template);
+
+           const q = view.debugElement.children[0].references !['q'];
+           // This should be 1, but due to
+           // https://github.com/angular/angular/issues/15117 this is 0.
+           expect(q.query.length).toBe(0);
+         });
+
+    });
+  });
+}
+
+@Directive({selector: '[text]', inputs: ['text'], exportAs: 'textDir'})
+class TextDirective {
+  // TODO(issue/24571): remove '!'.
+  text !: string;
+  constructor() {}
+}
+
+@Component({selector: 'needs-content-children', template: ''})
+class NeedsContentChildren implements AfterContentInit {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(TextDirective) textDirChildren !: QueryList<TextDirective>;
+  // TODO(issue/24571): remove '!'.
+  numberOfChildrenAfterContentInit !: number;
+
+  ngAfterContentInit() { this.numberOfChildrenAfterContentInit = this.textDirChildren.length; }
+}
+
+@Component({selector: 'needs-view-children', template: '<div text></div>'})
+class NeedsViewChildren implements AfterViewInit {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(TextDirective) textDirChildren !: QueryList<TextDirective>;
+  // TODO(issue/24571): remove '!'.
+  numberOfChildrenAfterViewInit !: number;
+
+  ngAfterViewInit() { this.numberOfChildrenAfterViewInit = this.textDirChildren.length; }
+}
+
+@Component({selector: 'needs-content-child', template: ''})
+class NeedsContentChild implements AfterContentInit, AfterContentChecked {
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _child !: TextDirective;
+
+  @ContentChild(TextDirective)
+  set child(value) {
+    this._child = value;
+    this.logs.push(['setter', value ? value.text : null]);
+  }
+
+  get child() { return this._child; }
+  logs: any[] /** TODO #9100 */ = [];
+
+  ngAfterContentInit() { this.logs.push(['init', this.child ? this.child.text : null]); }
+
+  ngAfterContentChecked() { this.logs.push(['check', this.child ? this.child.text : null]); }
+}
+
+@Directive({selector: '[directive-needs-content-child]'})
+class DirectiveNeedsContentChild {
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(TextDirective) child !: TextDirective;
+}
+
+@Component({selector: 'needs-view-child', template: `<div *ngIf="shouldShow" text="foo"></div>`})
+class NeedsViewChild implements AfterViewInit, AfterViewChecked {
+  shouldShow: boolean = true;
+  shouldShow2: boolean = false;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _child !: TextDirective;
+
+  @ViewChild(TextDirective)
+  set child(value) {
+    this._child = value;
+    this.logs.push(['setter', value ? value.text : null]);
+  }
+
+  get child() { return this._child; }
+  logs: any[] /** TODO #9100 */ = [];
+
+  ngAfterViewInit() { this.logs.push(['init', this.child ? this.child.text : null]); }
+
+  ngAfterViewChecked() { this.logs.push(['check', this.child ? this.child.text : null]); }
+}
+
+function createTestCmp<T>(type: Type<T>, template: string): ComponentFixture<T> {
+  const view = TestBed.overrideComponent(type, {set: {template}}).createComponent(type);
+  return view;
+}
+
+
+function createTestCmpAndDetectChanges<T>(type: Type<T>, template: string): ComponentFixture<T> {
+  const view = createTestCmp(type, template);
+  view.detectChanges();
+  return view;
+}
+
+@Component({selector: 'needs-static-content-view-child', template: `<div text="viewFoo"></div>`})
+class NeedsStaticContentAndViewChild {
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(TextDirective) contentChild !: TextDirective;
+  // TODO(issue/24571): remove '!'.
+  @ViewChild(TextDirective) viewChild !: TextDirective;
+}
+
+@Directive({selector: '[dir]'})
+class InertDirective {
+}
+
+@Component({
+  selector: 'needs-query',
+  template: '<div text="ignoreme"></div><b *ngFor="let  dir of query">{{dir.text}}|</b>'
+})
+class NeedsQuery {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(TextDirective) query !: QueryList<TextDirective>;
+}
+
+@Component({selector: 'needs-four-queries', template: ''})
+class NeedsFourQueries {
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(TextDirective) query1 !: TextDirective;
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(TextDirective) query2 !: TextDirective;
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(TextDirective) query3 !: TextDirective;
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(TextDirective) query4 !: TextDirective;
+}
+
+@Component({
+  selector: 'needs-query-desc',
+  template: '<ng-content></ng-content><div *ngFor="let  dir of query">{{dir.text}}|</div>'
+})
+class NeedsQueryDesc {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(TextDirective, {descendants: true}) query !: QueryList<TextDirective>;
+}
+
+@Component({selector: 'needs-query-by-ref-binding', template: '<ng-content>'})
+class NeedsQueryByLabel {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren('textLabel', {descendants: true}) query !: QueryList<any>;
+}
+
+@Component({selector: 'needs-view-query-by-ref-binding', template: '<div #textLabel>text</div>'})
+class NeedsViewQueryByLabel {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren('textLabel') query !: QueryList<any>;
+}
+
+@Component({selector: 'needs-query-by-ref-bindings', template: '<ng-content>'})
+class NeedsQueryByTwoLabels {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren('textLabel1,textLabel2', {descendants: true}) query !: QueryList<any>;
+}
+
+@Component({
+  selector: 'needs-query-and-project',
+  template: '<div *ngFor="let  dir of query">{{dir.text}}|</div><ng-content></ng-content>'
+})
+class NeedsQueryAndProject {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(TextDirective) query !: QueryList<TextDirective>;
+}
+
+@Component({
+  selector: 'needs-view-query',
+  template: '<div text="1"><div text="2"></div></div><div text="3"></div><div text="4"></div>'
+})
+class NeedsViewQuery {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(TextDirective) query !: QueryList<TextDirective>;
+}
+
+@Component({selector: 'needs-view-query-if', template: '<div *ngIf="show" text="1"></div>'})
+class NeedsViewQueryIf {
+  show: boolean = false;
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(TextDirective) query !: QueryList<TextDirective>;
+}
+
+@Component({
+  selector: 'needs-view-query-nested-if',
+  template: '<div text="1"><div *ngIf="show"><div dir></div></div></div>'
+})
+class NeedsViewQueryNestedIf {
+  show: boolean = true;
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(TextDirective) query !: QueryList<TextDirective>;
+}
+
+@Component({
+  selector: 'needs-view-query-order',
+  template: '<div text="1"></div>' +
+      '<div *ngFor="let  i of list" [text]="i"></div>' +
+      '<div text="4"></div>'
+})
+class NeedsViewQueryOrder {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(TextDirective) query !: QueryList<TextDirective>;
+  list: string[] = ['2', '3'];
+}
+
+@Component({
+  selector: 'needs-view-query-order-with-p',
+  template: '<div dir><div text="1"></div>' +
+      '<div *ngFor="let  i of list" [text]="i"></div>' +
+      '<div text="4"></div></div>'
+})
+class NeedsViewQueryOrderWithParent {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(TextDirective) query !: QueryList<TextDirective>;
+  list: string[] = ['2', '3'];
+}
+
+@Component({selector: 'needs-tpl', template: '<ng-template><div>shadow</div></ng-template>'})
+class NeedsTpl {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(TemplateRef) viewQuery !: QueryList<TemplateRef<Object>>;
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(TemplateRef) query !: QueryList<TemplateRef<Object>>;
+  constructor(public vc: ViewContainerRef) {}
+}
+
+@Component(
+    {selector: 'needs-named-tpl', template: '<ng-template #tpl><div>shadow</div></ng-template>'})
+class NeedsNamedTpl {
+  // TODO(issue/24571): remove '!'.
+  @ViewChild('tpl') viewTpl !: TemplateRef<Object>;
+  // TODO(issue/24571): remove '!'.
+  @ContentChild('tpl') contentTpl !: TemplateRef<Object>;
+  constructor(public vc: ViewContainerRef) {}
+}
+
+@Component({selector: 'needs-content-children-read', template: ''})
+class NeedsContentChildrenWithRead {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren('q', {read: TextDirective}) textDirChildren !: QueryList<TextDirective>;
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren('nonExisting', {read: TextDirective}) nonExistingVar !: QueryList<TextDirective>;
+}
+
+@Component({selector: 'needs-content-child-read', template: ''})
+class NeedsContentChildWithRead {
+  // TODO(issue/24571): remove '!'.
+  @ContentChild('q', {read: TextDirective}) textDirChild !: TextDirective;
+  // TODO(issue/24571): remove '!'.
+  @ContentChild('nonExisting', {read: TextDirective}) nonExistingVar !: TextDirective;
+}
+
+@Component({
+  selector: 'needs-content-child-template-ref',
+  template: '<div [ngTemplateOutlet]="templateRef"></div>'
+})
+class NeedsContentChildTemplateRef {
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(TemplateRef) templateRef !: TemplateRef<any>;
+}
+
+@Component({
+  selector: 'needs-content-child-template-ref-app',
+  template: '<needs-content-child-template-ref>' +
+      '<ng-template>OUTER<ng-template>INNER</ng-template></ng-template>' +
+      '</needs-content-child-template-ref>'
+})
+class NeedsContentChildTemplateRefApp {
+}
+
+@Component({
+  selector: 'needs-view-children-read',
+  template: '<div #q text="va"></div><div #w text="vb"></div>',
+})
+class NeedsViewChildrenWithRead {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren('q,w', {read: TextDirective}) textDirChildren !: QueryList<TextDirective>;
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren('nonExisting', {read: TextDirective}) nonExistingVar !: QueryList<TextDirective>;
+}
+
+@Component({
+  selector: 'needs-view-child-read',
+  template: '<div #q text="va"></div>',
+})
+class NeedsViewChildWithRead {
+  // TODO(issue/24571): remove '!'.
+  @ViewChild('q', {read: TextDirective}) textDirChild !: TextDirective;
+  // TODO(issue/24571): remove '!'.
+  @ViewChild('nonExisting', {read: TextDirective}) nonExistingVar !: TextDirective;
+}
+
+@Component({selector: 'needs-viewcontainer-read', template: '<div #q></div>'})
+class NeedsViewContainerWithRead {
+  // TODO(issue/24571): remove '!'.
+  @ViewChild('q', {read: ViewContainerRef}) vc !: ViewContainerRef;
+  // TODO(issue/24571): remove '!'.
+  @ViewChild('nonExisting', {read: ViewContainerRef}) nonExistingVar !: ViewContainerRef;
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(TemplateRef) template !: TemplateRef<Object>;
+
+  createView() { this.vc.createEmbeddedView(this.template); }
+}
+
+@Component({selector: 'has-null-query-condition', template: '<div></div>'})
+class HasNullQueryCondition {
+  @ContentChildren(null !) errorTrigger: any;
+}
+
+@Component({selector: 'my-comp', template: ''})
+class MyComp0 {
+  shouldShow: boolean = false;
+  list: string[] = ['1d', '2d', '3d'];
+}
+
+@Component({selector: 'my-comp', template: ''})
+class MyCompBroken0 {
+}
+
+@Component({selector: 'manual-projecting', template: '<div #vc></div>'})
+class ManualProjecting {
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(TemplateRef) template !: TemplateRef<any>;
+
+  // TODO(issue/24571): remove '!'.
+  @ViewChild('vc', {read: ViewContainerRef})
+  vc !: ViewContainerRef;
+
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(TextDirective)
+  query !: QueryList<TextDirective>;
+
+  create() { this.vc.createEmbeddedView(this.template); }
+
+  destroy() { this.vc.clear(); }
+}
diff --git a/packages/core/test/linker/query_list_spec.ts b/packages/core/test/linker/query_list_spec.ts
new file mode 100644
index 000000000000..d0c795b7f1dc
--- /dev/null
+++ b/packages/core/test/linker/query_list_spec.ts
@@ -0,0 +1,168 @@
+/**
+ * @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 {iterateListLike} from '@angular/core/src/change_detection/change_detection_util';
+import {QueryList} from '@angular/core/src/linker/query_list';
+import {fakeAsync, tick} from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
+{
+  describe('QueryList', () => {
+    let queryList: QueryList<string>;
+    let log: string;
+    beforeEach(() => {
+      queryList = new QueryList<string>();
+      log = '';
+    });
+
+    function logAppend(item: any /** TODO #9100 */) { log += (log.length == 0 ? '' : ', ') + item; }
+
+    describe('dirty and reset', () => {
+
+      it('should initially be dirty and empty', () => {
+        expect(queryList.dirty).toBeTruthy();
+        expect(queryList.length).toBe(0);
+      });
+
+      it('should be not dirty after reset', () => {
+        expect(queryList.dirty).toBeTruthy();
+        queryList.reset(['one', 'two']);
+        expect(queryList.dirty).toBeFalsy();
+        expect(queryList.length).toBe(2);
+      });
+
+    });
+
+    it('should support resetting and iterating over the new objects', () => {
+      queryList.reset(['one']);
+      queryList.reset(['two']);
+      iterateListLike(queryList, logAppend);
+      expect(log).toEqual('two');
+    });
+
+    it('should support length', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.length).toEqual(2);
+    });
+
+    it('should support map', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.map((x) => x)).toEqual(['one', 'two']);
+    });
+
+    it('should support map with index', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.map((x, i) => `${x}_${i}`)).toEqual(['one_0', 'two_1']);
+    });
+
+    it('should support forEach', () => {
+      queryList.reset(['one', 'two']);
+      let join = '';
+      queryList.forEach((x) => join = join + x);
+      expect(join).toEqual('onetwo');
+    });
+
+    it('should support forEach with index', () => {
+      queryList.reset(['one', 'two']);
+      let join = '';
+      queryList.forEach((x, i) => join = join + x + i);
+      expect(join).toEqual('one0two1');
+    });
+
+    it('should support filter', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.filter((x: string) => x == 'one')).toEqual(['one']);
+    });
+
+    it('should support filter with index', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.filter((x: string, i: number) => i == 0)).toEqual(['one']);
+    });
+
+    it('should support find', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.find((x: string) => x == 'two')).toEqual('two');
+    });
+
+    it('should support find with index', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.find((x: string, i: number) => i == 1)).toEqual('two');
+    });
+
+    it('should support reduce', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.reduce((a: string, x: string) => a + x, 'start:')).toEqual('start:onetwo');
+    });
+
+    it('should support reduce with index', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.reduce((a: string, x: string, i: number) => a + x + i, 'start:'))
+          .toEqual('start:one0two1');
+    });
+
+    it('should support toArray', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.reduce((a: string, x: string) => a + x, 'start:')).toEqual('start:onetwo');
+    });
+
+    it('should support toArray', () => {
+      queryList.reset(['one', 'two']);
+      expect(queryList.toArray()).toEqual(['one', 'two']);
+    });
+
+    it('should support toString', () => {
+      queryList.reset(['one', 'two']);
+      const listString = queryList.toString();
+      expect(listString.indexOf('one') != -1).toBeTruthy();
+      expect(listString.indexOf('two') != -1).toBeTruthy();
+    });
+
+    it('should support first and last', () => {
+      queryList.reset(['one', 'two', 'three']);
+      expect(queryList.first).toEqual('one');
+      expect(queryList.last).toEqual('three');
+    });
+
+    it('should support some', () => {
+      queryList.reset(['one', 'two', 'three']);
+      expect(queryList.some(item => item === 'one')).toEqual(true);
+      expect(queryList.some(item => item === 'four')).toEqual(false);
+    });
+
+    if (getDOM().supportsDOMEvents()) {
+      describe('simple observable interface', () => {
+        it('should fire callbacks on change', fakeAsync(() => {
+             let fires = 0;
+             queryList.changes.subscribe({next: (_) => { fires += 1; }});
+
+             queryList.notifyOnChanges();
+             tick();
+
+             expect(fires).toEqual(1);
+
+             queryList.notifyOnChanges();
+             tick();
+
+             expect(fires).toEqual(2);
+           }));
+
+        it('should provides query list as an argument', fakeAsync(() => {
+             let recorded: any /** TODO #9100 */;
+             queryList.changes.subscribe({next: (v: any) => { recorded = v; }});
+
+             queryList.reset(['one']);
+             queryList.notifyOnChanges();
+             tick();
+
+             expect(recorded).toBe(queryList);
+           }));
+      });
+    }
+  });
+}
diff --git a/packages/core/test/linker/regression_integration_spec.ts b/packages/core/test/linker/regression_integration_spec.ts
new file mode 100644
index 000000000000..7fa02970ee40
--- /dev/null
+++ b/packages/core/test/linker/regression_integration_spec.ts
@@ -0,0 +1,565 @@
+/**
+ * @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 {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';
+
+{
+  describe('jit', () => { declareTests({useJit: true}); });
+
+  describe('no jit', () => { declareTests({useJit: false}); });
+
+  declareTestsUsingBootstrap();
+}
+
+function declareTests({useJit}: {useJit: boolean}) {
+  // Place to put reproductions for regressions
+  describe('regressions', () => {
+
+    beforeEach(() => { TestBed.configureTestingModule({declarations: [MyComp1, PlatformPipe]}); });
+
+    describe('platform pipes', () => {
+      beforeEach(() => { TestBed.configureCompiler({useJit: useJit}); });
+
+      it('should overwrite them by custom pipes', () => {
+        TestBed.configureTestingModule({declarations: [CustomPipe]});
+        const template = '{{true | somePipe}}';
+        TestBed.overrideComponent(MyComp1, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp1);
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('someCustomPipe');
+      });
+    });
+
+    describe('expressions', () => {
+      it('should evaluate conditional and boolean operators with right precedence - #8244', () => {
+        const template = `{{'red' + (true ? ' border' : '')}}`;
+        TestBed.overrideComponent(MyComp1, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp1);
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('red border');
+      });
+
+      it('should evaluate conditional and unary operators with right precedence - #8235', () => {
+        const template = `{{!null?.length}}`;
+        TestBed.overrideComponent(MyComp1, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp1);
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('true');
+      });
+
+      it('should only evaluate stateful pipes once - #10639', () => {
+        TestBed.configureTestingModule({declarations: [CountingPipe]});
+        const template = '{{(null|countingPipe)?.value}}';
+        TestBed.overrideComponent(MyComp1, {set: {template}});
+        const fixture = TestBed.createComponent(MyComp1);
+
+        CountingPipe.reset();
+        fixture.detectChanges(/* checkNoChanges */ false);
+        expect(fixture.nativeElement).toHaveText('counting pipe value');
+        expect(CountingPipe.calls).toBe(1);
+      });
+
+      it('should only update the bound property when using asyncPipe - #15205', fakeAsync(() => {
+           @Component({template: '<div myDir [a]="p | async" [b]="2"></div>'})
+           class MyComp {
+             p = Promise.resolve(1);
+           }
+
+           @Directive({selector: '[myDir]'})
+           class MyDir {
+             setterCalls: {[key: string]: any} = {};
+             // TODO(issue/24571): remove '!'.
+             changes !: SimpleChanges;
+
+             @Input()
+             set a(v: number) { this.setterCalls['a'] = v; }
+             @Input()
+             set b(v: number) { this.setterCalls['b'] = v; }
+
+             ngOnChanges(changes: SimpleChanges) { this.changes = changes; }
+           }
+
+           TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
+           const fixture = TestBed.createComponent(MyComp);
+           const dir = fixture.debugElement.query(By.directive(MyDir)).injector.get(MyDir) as MyDir;
+
+           fixture.detectChanges();
+           expect(dir.setterCalls).toEqual({'a': null, 'b': 2});
+           expect(Object.keys(dir.changes)).toEqual(['a', 'b']);
+
+           dir.setterCalls = {};
+           dir.changes = {};
+
+           tick();
+           fixture.detectChanges();
+
+           expect(dir.setterCalls).toEqual({'a': 1});
+           expect(Object.keys(dir.changes)).toEqual(['a']);
+         }));
+
+      it('should only evaluate methods once - #10639', () => {
+        TestBed.configureTestingModule({declarations: [MyCountingComp]});
+        const template = '{{method()?.value}}';
+        TestBed.overrideComponent(MyCountingComp, {set: {template}});
+        const fixture = TestBed.createComponent(MyCountingComp);
+
+        MyCountingComp.reset();
+        fixture.detectChanges(/* checkNoChanges */ false);
+        expect(fixture.nativeElement).toHaveText('counting method value');
+        expect(MyCountingComp.calls).toBe(1);
+      });
+
+      it('should evaluate a conditional in a statement binding', () => {
+        @Component({selector: 'some-comp', template: '<p (click)="nullValue?.click()"></p>'})
+        class SomeComponent {
+          // TODO(issue/24571): remove '!'.
+          nullValue !: SomeReferencedClass;
+        }
+
+        class SomeReferencedClass {
+          click() {}
+        }
+
+        expect(() => {
+          const fixture = TestBed.configureTestingModule({declarations: [SomeComponent]})
+                              .createComponent(SomeComponent);
+
+          fixture.detectChanges(/* checkNoChanges */ false);
+        }).not.toThrow();
+      });
+    });
+
+    describe('providers', () => {
+      function createInjector(providers: Provider[]): Injector {
+        TestBed.overrideComponent(MyComp1, {add: {providers}});
+        return TestBed.createComponent(MyComp1).componentInstance.injector;
+      }
+
+      it('should support providers with an InjectionToken that contains a `.` in the name', () => {
+        const token = new InjectionToken('a.b');
+        const tokenValue = 1;
+        const injector = createInjector([{provide: token, useValue: tokenValue}]);
+        expect(injector.get(token)).toEqual(tokenValue);
+      });
+
+      it('should support providers with string token with a `.` in it', () => {
+        const token = 'a.b';
+        const tokenValue = 1;
+        const injector = createInjector([{provide: token, useValue: tokenValue}]);
+
+        expect(injector.get(token)).toEqual(tokenValue);
+      });
+
+      it('should support providers with an anonymous function as token', () => {
+        const token = () => true;
+        const tokenValue = 1;
+        const injector = createInjector([{provide: token, useValue: tokenValue}]);
+
+        expect(injector.get(token)).toEqual(tokenValue);
+      });
+
+      it('should support providers with an InjectionToken that has a StringMap as value', () => {
+        const token1 = new InjectionToken('someToken');
+        const token2 = new InjectionToken('someToken');
+        const tokenValue1 = {'a': 1};
+        const tokenValue2 = {'a': 1};
+        const injector = createInjector(
+            [{provide: token1, useValue: tokenValue1}, {provide: token2, useValue: tokenValue2}]);
+
+        expect(injector.get(token1)).toEqual(tokenValue1);
+        expect(injector.get(token2)).toEqual(tokenValue2);
+      });
+
+      it('should support providers that have a `name` property with a number value', () => {
+        class TestClass {
+          constructor(public name: number) {}
+        }
+        const data = [new TestClass(1), new TestClass(2)];
+        const injector = createInjector([{provide: 'someToken', useValue: data}]);
+        expect(injector.get('someToken')).toEqual(data);
+      });
+
+      describe('ANALYZE_FOR_ENTRY_COMPONENTS providers', () => {
+
+        it('should support class instances', () => {
+          class SomeObject {
+            someMethod() {}
+          }
+
+          expect(
+              () => createInjector([
+                {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: new SomeObject(), multi: true}
+              ]))
+              .not.toThrow();
+        });
+      });
+
+    });
+
+    it('should allow logging a previous elements class binding via interpolation', () => {
+      const template = `<div [class.a]="true" #el>Class: {{el.className}}</div>`;
+      TestBed.overrideComponent(MyComp1, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp1);
+
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText('Class: a');
+    });
+
+    it('should support ngClass before a component and content projection inside of an ngIf', () => {
+      TestBed.configureTestingModule({declarations: [CmpWithNgContent]});
+      const template = `A<cmp-content *ngIf="true" [ngClass]="'red'">B</cmp-content>C`;
+      TestBed.overrideComponent(MyComp1, {set: {template}});
+      const fixture = TestBed.createComponent(MyComp1);
+
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText('ABC');
+    });
+
+    it('should handle mutual recursion entered from multiple sides - #7084', () => {
+      TestBed.configureTestingModule({declarations: [FakeRecursiveComp, LeftComp, RightComp]});
+      const fixture = TestBed.createComponent(FakeRecursiveComp);
+
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText('[]');
+    });
+
+    it('should generate the correct output when constructors have the same name', () => {
+      function ComponentFactory(selector: string, template: string) {
+        @Component({selector, template})
+        class MyComponent {
+        }
+        return MyComponent;
+      }
+      const HeroComponent = ComponentFactory('my-hero', 'my hero');
+      const VillainComponent = ComponentFactory('a-villain', 'a villain');
+      const MainComponent = ComponentFactory(
+          'my-app', 'I was saved by <my-hero></my-hero> from <a-villain></a-villain>.');
+
+      TestBed.configureTestingModule(
+          {declarations: [HeroComponent, VillainComponent, MainComponent]});
+      const fixture = TestBed.createComponent(MainComponent);
+      expect(fixture.nativeElement).toHaveText('I was saved by my hero from a villain.');
+    });
+
+    it('should allow to use the renderer outside of views', () => {
+      @Component({template: ''})
+      class MyComp {
+        constructor(public renderer: Renderer2) {}
+      }
+
+      TestBed.configureTestingModule({declarations: [MyComp]});
+      const ctx = TestBed.createComponent(MyComp);
+
+      const txtNode = ctx.componentInstance.renderer.createText('test');
+      expect(txtNode).toHaveText('test');
+    });
+
+    it('should not recreate TemplateRef references during dirty checking', () => {
+      @Component({template: '<div [someDir]="someRef"></div><ng-template #someRef></ng-template>'})
+      class MyComp {
+      }
+
+      @Directive({selector: '[someDir]'})
+      class MyDir {
+        // TODO(issue/24571): remove '!'.
+        @Input('someDir') template !: TemplateRef<any>;
+      }
+
+      const ctx =
+          TestBed.configureTestingModule({declarations: [MyComp, MyDir]}).createComponent(MyComp);
+      const dir = <MyDir>ctx.debugElement.query(By.directive(MyDir)).injector.get(MyDir);
+
+      expect(dir.template).toBeUndefined();
+
+      ctx.detectChanges();
+      const template = dir.template;
+      expect(template).toBeDefined();
+
+      ctx.detectChanges();
+      expect(dir.template).toBe(template);
+    });
+
+    it('should not recreate ViewContainerRefs in queries', () => {
+      @Component({template: '<div #vc></div><div *ngIf="show" #vc></div>'})
+      class MyComp {
+        // TODO(issue/24571): remove '!'.
+        @ViewChildren('vc', {read: ViewContainerRef})
+        viewContainers !: QueryList<ViewContainerRef>;
+
+        show = true;
+      }
+
+      const ctx = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+
+      ctx.componentInstance.show = true;
+      ctx.detectChanges();
+      expect(ctx.componentInstance.viewContainers.length).toBe(2);
+      const vc = ctx.componentInstance.viewContainers.first;
+      expect(vc).toBeDefined();
+
+      ctx.componentInstance.show = false;
+      ctx.detectChanges();
+      expect(ctx.componentInstance.viewContainers.first).toBe(vc);
+    });
+
+    describe('empty templates - #15143', () => {
+      it('should allow empty components', () => {
+        @Component({template: ''})
+        class MyComp {
+        }
+
+        const fixture =
+            TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.childNodes.length).toBe(0);
+      });
+
+      it('should allow empty embedded templates', () => {
+        @Component({template: '<ng-template [ngIf]="true"></ng-template>'})
+        class MyComp {
+        }
+
+        const fixture =
+            TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+        fixture.detectChanges();
+
+        // Note: We always need to create at least a comment in an embedded template,
+        // so we can append other templates after it.
+        // 1 comment for the anchor,
+        // 1 comment for the empty embedded template.
+        expect(fixture.debugElement.childNodes.length).toBe(2);
+      });
+    });
+
+    it('should support @ContentChild and @Input on the same property for static queries', () => {
+      @Directive({selector: 'test'})
+      class Test {
+        // TODO(issue/24571): remove '!'.
+        @Input() @ContentChild(TemplateRef) tpl !: TemplateRef<any>;
+      }
+
+      @Component({
+        selector: 'my-app',
+        template: `
+          <test></test><br>
+          <test><ng-template>Custom as a child</ng-template></test><br>
+          <ng-template #custom>Custom as a binding</ng-template>
+          <test [tpl]="custom"></test><br>
+        `
+      })
+      class App {
+      }
+
+      const fixture =
+          TestBed.configureTestingModule({declarations: [App, Test]}).createComponent(App);
+      fixture.detectChanges();
+
+      const testDirs =
+          fixture.debugElement.queryAll(By.directive(Test)).map(el => el.injector.get(Test));
+      expect(testDirs[0].tpl).toBeUndefined();
+      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 as any)._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');
+        }
+      });
+    }
+  });
+}
+
+@Component({selector: 'my-comp', template: ''})
+class MyComp1 {
+  constructor(public injector: Injector) {}
+}
+
+@Pipe({name: 'somePipe', pure: true})
+class PlatformPipe implements PipeTransform {
+  transform(value: any): any { return 'somePlatformPipe'; }
+}
+
+@Pipe({name: 'somePipe', pure: true})
+class CustomPipe implements PipeTransform {
+  transform(value: any): any { return 'someCustomPipe'; }
+}
+
+@Component({selector: 'cmp-content', template: `<ng-content></ng-content>`})
+class CmpWithNgContent {
+}
+
+@Component({selector: 'counting-cmp', template: ''})
+class MyCountingComp {
+  method(): {value: string}|undefined {
+    MyCountingComp.calls++;
+    return {value: 'counting method value'};
+  }
+
+  static reset() { MyCountingComp.calls = 0; }
+  static calls = 0;
+}
+
+@Pipe({name: 'countingPipe'})
+class CountingPipe implements PipeTransform {
+  transform(value: any): any {
+    CountingPipe.calls++;
+    return {value: 'counting pipe value'};
+  }
+  static reset() { CountingPipe.calls = 0; }
+  static calls = 0;
+}
+
+@Component({
+  selector: 'left',
+  template: `L<right *ngIf="false"></right>`,
+})
+class LeftComp {
+}
+
+@Component({
+  selector: 'right',
+  template: `R<left *ngIf="false"></left>`,
+})
+class RightComp {
+}
+
+@Component({
+  selector: 'fakeRecursiveComp',
+  template: `[<left *ngIf="false"></left><right *ngIf="false"></right>]`,
+})
+export class FakeRecursiveComp {
+}
diff --git a/packages/core/test/linker/security_integration_spec.ts b/packages/core/test/linker/security_integration_spec.ts
new file mode 100644
index 000000000000..dede02e5a19f
--- /dev/null
+++ b/packages/core/test/linker/security_integration_spec.ts
@@ -0,0 +1,254 @@
+/**
+ * @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, HostBinding, Input, NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed, getTestBed} from '@angular/core/testing';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {DomSanitizer} from '@angular/platform-browser/src/security/dom_sanitization_service';
+
+{
+  describe('jit', () => { declareTests({useJit: true}); });
+
+  describe('no jit', () => { declareTests({useJit: false}); });
+}
+
+@Component({selector: 'my-comp', template: ''})
+class SecuredComponent {
+  ctxProp: any = 'some value';
+}
+
+@Directive({selector: '[onPrefixedProp]'})
+class OnPrefixDir {
+  @Input() onPrefixedProp: any;
+  @Input() onclick: any;
+}
+
+function declareTests({useJit}: {useJit: boolean}) {
+  describe('security integration tests', function() {
+
+    beforeEach(() => {
+      TestBed.configureCompiler({useJit: useJit}).configureTestingModule({
+        declarations: [
+          SecuredComponent,
+          OnPrefixDir,
+        ]
+      });
+    });
+
+    let originalLog: (msg: any) => any;
+    beforeEach(() => {
+      originalLog = getDOM().log;
+      getDOM().log = (msg) => { /* disable logging */ };
+    });
+    afterEach(() => { getDOM().log = originalLog; });
+
+    describe('events', () => {
+      it('should disallow binding to attr.on*', () => {
+        const template = `<div [attr.onclick]="ctxProp"></div>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+
+        expect(() => TestBed.createComponent(SecuredComponent))
+            .toThrowError(
+                /Binding to event attribute 'onclick' is disallowed for security reasons, please use \(click\)=.../);
+      });
+
+      it('should disallow binding to on* with NO_ERRORS_SCHEMA', () => {
+        const template = `<div [onclick]="ctxProp"></div>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}}).configureTestingModule({
+          schemas: [NO_ERRORS_SCHEMA]
+        });
+
+        expect(() => TestBed.createComponent(SecuredComponent))
+            .toThrowError(
+                /Binding to event property 'onclick' is disallowed for security reasons, please use \(click\)=.../);
+      });
+
+      it('should disallow binding to on* unless it is consumed by a directive', () => {
+        const template = `<div [onPrefixedProp]="ctxProp" [onclick]="ctxProp"></div>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}}).configureTestingModule({
+          schemas: [NO_ERRORS_SCHEMA]
+        });
+
+        // should not throw for inputs starting with "on"
+        let cmp: ComponentFixture<SecuredComponent> = undefined !;
+        expect(() => cmp = TestBed.createComponent(SecuredComponent)).not.toThrow();
+
+        // must bind to the directive not to the property of the div
+        const value = cmp.componentInstance.ctxProp = {};
+        cmp.detectChanges();
+        const div = cmp.debugElement.children[0];
+        expect(div.injector.get(OnPrefixDir).onclick).toBe(value);
+        expect(getDOM().getProperty(div.nativeElement, 'onclick')).not.toBe(value);
+        expect(getDOM().hasAttribute(div.nativeElement, 'onclick')).toEqual(false);
+      });
+
+    });
+
+    describe('safe HTML values', function() {
+      it('should not escape values marked as trusted', () => {
+        const template = `<a [href]="ctxProp">Link Title</a>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+        const fixture = TestBed.createComponent(SecuredComponent);
+        const sanitizer: DomSanitizer = getTestBed().get(DomSanitizer);
+
+        const e = fixture.debugElement.children[0].nativeElement;
+        const ci = fixture.componentInstance;
+        const trusted = sanitizer.bypassSecurityTrustUrl('javascript:alert(1)');
+        ci.ctxProp = trusted;
+        fixture.detectChanges();
+        expect(getDOM().getProperty(e, 'href')).toEqual('javascript:alert(1)');
+      });
+
+      it('should error when using the wrong trusted value', () => {
+        const template = `<a [href]="ctxProp">Link Title</a>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+        const fixture = TestBed.createComponent(SecuredComponent);
+        const sanitizer: DomSanitizer = getTestBed().get(DomSanitizer);
+
+        const trusted = sanitizer.bypassSecurityTrustScript('javascript:alert(1)');
+        const ci = fixture.componentInstance;
+        ci.ctxProp = trusted;
+        expect(() => fixture.detectChanges()).toThrowError(/Required a safe URL, got a Script/);
+      });
+
+      it('should warn when using in string interpolation', () => {
+        const template = `<a href="/foo/{{ctxProp}}">Link Title</a>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+        const fixture = TestBed.createComponent(SecuredComponent);
+        const sanitizer: DomSanitizer = getTestBed().get(DomSanitizer);
+
+        const e = fixture.debugElement.children[0].nativeElement;
+        const trusted = sanitizer.bypassSecurityTrustUrl('bar/baz');
+        const ci = fixture.componentInstance;
+        ci.ctxProp = trusted;
+        fixture.detectChanges();
+        expect(getDOM().getProperty(e, 'href')).toMatch(/SafeValue(%20| )must(%20| )use/);
+      });
+    });
+
+    describe('sanitizing', () => {
+      function checkEscapeOfHrefProperty(fixture: ComponentFixture<any>, isAttribute: boolean) {
+        const e = fixture.debugElement.children[0].nativeElement;
+        const ci = fixture.componentInstance;
+        ci.ctxProp = 'hello';
+        fixture.detectChanges();
+        // In the browser, reading href returns an absolute URL. On the server side,
+        // it just echoes back the property.
+        let value =
+            isAttribute ? getDOM().getAttribute(e, 'href') : getDOM().getProperty(e, 'href');
+        expect(value).toMatch(/.*\/?hello$/);
+
+        ci.ctxProp = 'javascript:alert(1)';
+        fixture.detectChanges();
+        value = isAttribute ? getDOM().getAttribute(e, 'href') : getDOM().getProperty(e, 'href');
+        expect(value).toEqual('unsafe:javascript:alert(1)');
+      }
+
+      it('should escape unsafe properties', () => {
+        const template = `<a [href]="ctxProp">Link Title</a>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+        const fixture = TestBed.createComponent(SecuredComponent);
+
+        checkEscapeOfHrefProperty(fixture, false);
+      });
+
+      it('should escape unsafe attributes', () => {
+        const template = `<a [attr.href]="ctxProp">Link Title</a>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+        const fixture = TestBed.createComponent(SecuredComponent);
+
+        checkEscapeOfHrefProperty(fixture, true);
+      });
+
+      it('should escape unsafe properties if they are used in host bindings', () => {
+        @Directive({selector: '[dirHref]'})
+        class HrefDirective {
+          // TODO(issue/24571): remove '!'.
+          @HostBinding('href') @Input()
+          dirHref !: string;
+        }
+
+        const template = `<a [dirHref]="ctxProp">Link Title</a>`;
+        TestBed.configureTestingModule({declarations: [HrefDirective]});
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+        const fixture = TestBed.createComponent(SecuredComponent);
+
+        checkEscapeOfHrefProperty(fixture, false);
+      });
+
+      it('should escape unsafe attributes if they are used in host bindings', () => {
+        @Directive({selector: '[dirHref]'})
+        class HrefDirective {
+          // TODO(issue/24571): remove '!'.
+          @HostBinding('attr.href') @Input()
+          dirHref !: string;
+        }
+
+        const template = `<a [dirHref]="ctxProp">Link Title</a>`;
+        TestBed.configureTestingModule({declarations: [HrefDirective]});
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+        const fixture = TestBed.createComponent(SecuredComponent);
+
+        checkEscapeOfHrefProperty(fixture, true);
+      });
+
+      it('should escape unsafe style values', () => {
+        const template = `<div [style.background]="ctxProp">Text</div>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+        const fixture = TestBed.createComponent(SecuredComponent);
+
+        const e = fixture.debugElement.children[0].nativeElement;
+        const ci = fixture.componentInstance;
+        // Make sure binding harmless values works.
+        ci.ctxProp = 'red';
+        fixture.detectChanges();
+        // In some browsers, this will contain the full background specification, not just
+        // the color.
+        expect(getDOM().getStyle(e, 'background')).toMatch(/red.*/);
+
+        ci.ctxProp = 'url(javascript:evil())';
+        fixture.detectChanges();
+        // Updated value gets rejected, no value change.
+        expect(getDOM().getStyle(e, 'background')).not.toContain('javascript');
+      });
+
+      it('should escape unsafe SVG attributes', () => {
+        const template = `<svg:circle [xlink:href]="ctxProp">Text</svg:circle>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+
+        expect(() => TestBed.createComponent(SecuredComponent))
+            .toThrowError(/Can't bind to 'xlink:href'/);
+      });
+
+      it('should escape unsafe HTML values', () => {
+        const template = `<div [innerHTML]="ctxProp">Text</div>`;
+        TestBed.overrideComponent(SecuredComponent, {set: {template}});
+        const fixture = TestBed.createComponent(SecuredComponent);
+
+        const e = fixture.debugElement.children[0].nativeElement;
+        const ci = fixture.componentInstance;
+        // Make sure binding harmless values works.
+        ci.ctxProp = 'some <p>text</p>';
+        fixture.detectChanges();
+        expect(getDOM().getInnerHTML(e)).toEqual('some <p>text</p>');
+
+        ci.ctxProp = 'ha <script>evil()</script>';
+        fixture.detectChanges();
+        expect(getDOM().getInnerHTML(e)).toEqual('ha evil()');
+
+        ci.ctxProp = 'also <img src="x" onerror="evil()"> evil';
+        fixture.detectChanges();
+        expect(getDOM().getInnerHTML(e)).toEqual('also <img src="x"> evil');
+
+        ci.ctxProp = 'also <iframe srcdoc="evil"></iframe> evil';
+        fixture.detectChanges();
+        expect(getDOM().getInnerHTML(e)).toEqual('also  evil');
+      });
+    });
+  });
+}
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
new file mode 100644
index 000000000000..e4dbf091d4de
--- /dev/null
+++ b/packages/core/test/linker/source_map_integration_node_only_spec.ts
@@ -0,0 +1,260 @@
+/**
+ * @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 {SourceMap} from '@angular/compiler/src/output/source_map';
+import {extractSourceMap, originalPositionFor} from '@angular/compiler/testing/src/output/source_map_util';
+import {MockResourceLoader} from '@angular/compiler/testing/src/resource_loader_mock';
+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';
+
+{
+  describe('jit source mapping', () => {
+    let jitSpy: jasmine.Spy;
+    let resourceLoader: MockResourceLoader;
+
+    beforeEach(() => {
+      // Jasmine relies on methods on `Function.prototype`, so restore the prototype on the spy.
+      // Work around for: https://github.com/jasmine/jasmine/issues/1573
+      // TODO: Figure out a better way to retrieve the JIT sources, without spying on `Function`.
+      const originalProto = ɵglobal.Function.prototype;
+      jitSpy = spyOn(ɵglobal, 'Function').and.callThrough();
+      ɵglobal.Function.prototype = originalProto;
+
+      resourceLoader = new MockResourceLoader();
+      TestBed.configureCompiler({providers: [{provide: ResourceLoader, useValue: resourceLoader}]});
+    });
+
+    function getErrorLoggerStack(e: Error): string {
+      let logStack: string = undefined !;
+      getErrorLogger(e)(<any>{error: () => logStack = new Error().stack !}, e.message);
+      return logStack;
+    }
+
+    function getSourceMap(genFile: string): SourceMap {
+      const jitSources = jitSpy.calls.all().map((call) => call.args[call.args.length - 1]);
+      return jitSources.map(source => extractSourceMap(source))
+          .find(map => !!(map && map.file === genFile)) !;
+    }
+
+    function getSourcePositionForStack(stack: string):
+        {source: string, line: number, column: number} {
+      const ngFactoryLocations =
+          stack
+              .split('\n')
+              // e.g. at View_MyComp_0 (ng:///DynamicTestModule/MyComp.ngfactory.js:153:40)
+              .map(line => /\((.*\.ngfactory\.js):(\d+):(\d+)/.exec(line))
+              .filter(match => !!match)
+              .map(match => ({
+                     file: match ![1],
+                     line: parseInt(match ![2], 10),
+                     column: parseInt(match ![3], 10)
+                   }));
+      const ngFactoryLocation = ngFactoryLocations[0];
+
+      const sourceMap = getSourceMap(ngFactoryLocation.file);
+      return originalPositionFor(
+          sourceMap, {line: ngFactoryLocation.line, column: ngFactoryLocation.column});
+    }
+
+    function compileAndCreateComponent(comType: any) {
+      TestBed.configureTestingModule({declarations: [comType]});
+
+      let error: any;
+      TestBed.compileComponents().catch((e) => error = e);
+      if (resourceLoader.hasPendingRequests()) {
+        resourceLoader.flush();
+      }
+      tick();
+      if (error) {
+        throw error;
+      }
+      return TestBed.createComponent(comType);
+    }
+
+    describe('inline templates', () => {
+      const ngUrl = 'ng:///DynamicTestModule/MyComp.html';
+
+      function templateDecorator(template: string) { return {template}; }
+
+      declareTests({ngUrl, templateDecorator});
+    });
+
+    describe('external templates', () => {
+      const ngUrl = 'ng:///some/url.html';
+      const templateUrl = 'http://localhost:1234/some/url.html';
+
+      function templateDecorator(template: string) {
+        resourceLoader.expect(templateUrl, template);
+        return {templateUrl};
+      }
+
+      declareTests({ngUrl, templateDecorator});
+    });
+
+    function declareTests(
+        {ngUrl, templateDecorator}:
+            {ngUrl: string, templateDecorator: (template: string) => { [key: string]: any }}) {
+      it('should use the right source url in html parse errors', fakeAsync(() => {
+           @Component({...templateDecorator('<div>\n  </error>')})
+           class MyComp {
+           }
+
+           expect(() => compileAndCreateComponent(MyComp))
+               .toThrowError(
+                   new RegExp(`Template parse errors[\\s\\S]*${ngUrl.replace('$', '\\$')}@1:2`));
+         }));
+
+      it('should use the right source url in template parse errors', fakeAsync(() => {
+           @Component({...templateDecorator('<div>\n  <div unknown="{{ctxProp}}"></div>')})
+           class MyComp {
+           }
+
+           expect(() => compileAndCreateComponent(MyComp))
+               .toThrowError(
+                   new RegExp(`Template parse errors[\\s\\S]*${ngUrl.replace('$', '\\$')}@1:7`));
+         }));
+
+      it('should create a sourceMap for templates', fakeAsync(() => {
+           const template = `Hello World!`;
+
+           @Component({...templateDecorator(template)})
+           class MyComp {
+           }
+
+           compileAndCreateComponent(MyComp);
+
+           const sourceMap = getSourceMap('ng:///DynamicTestModule/MyComp.ngfactory.js');
+           expect(sourceMap.sources).toEqual([
+             'ng:///DynamicTestModule/MyComp.ngfactory.js', ngUrl
+           ]);
+           expect(sourceMap.sourcesContent).toEqual([' ', template]);
+         }));
+
+
+      it('should report source location for di errors', fakeAsync(() => {
+           const template = `<div>\n    <div   someDir></div></div>`;
+
+           @Component({...templateDecorator(template)})
+           class MyComp {
+           }
+
+           @Directive({selector: '[someDir]'})
+           class SomeDir {
+             constructor() { throw new Error('Test'); }
+           }
+
+           TestBed.configureTestingModule({declarations: [SomeDir]});
+           let error: any;
+           try {
+             compileAndCreateComponent(MyComp);
+           } catch (e) {
+             error = e;
+           }
+           // The error should be logged from the element
+           expect(getSourcePositionForStack(getErrorLoggerStack(error))).toEqual({
+             line: 2,
+             column: 4,
+             source: ngUrl,
+           });
+         }));
+
+      it('should report di errors with multiple elements and directives', fakeAsync(() => {
+           const template = `<div someDir></div><div someDir="throw"></div>`;
+
+           @Component({...templateDecorator(template)})
+           class MyComp {
+           }
+
+           @Directive({selector: '[someDir]'})
+           class SomeDir {
+             constructor(@Attribute('someDir') someDir: string) {
+               if (someDir === 'throw') {
+                 throw new Error('Test');
+               }
+             }
+           }
+
+           TestBed.configureTestingModule({declarations: [SomeDir]});
+           let error: any;
+           try {
+             compileAndCreateComponent(MyComp);
+           } catch (e) {
+             error = e;
+           }
+           // The error should be logged from the 2nd-element
+           expect(getSourcePositionForStack(getErrorLoggerStack(error))).toEqual({
+             line: 1,
+             column: 19,
+             source: ngUrl,
+           });
+         }));
+
+      it('should report source location for binding errors', fakeAsync(() => {
+           const template = `<div>\n    <span   [title]="createError()"></span></div>`;
+
+           @Component({...templateDecorator(template)})
+           class MyComp {
+             createError() { throw new Error('Test'); }
+           }
+
+           const comp = compileAndCreateComponent(MyComp);
+
+           let error: any;
+           try {
+             comp.detectChanges();
+           } catch (e) {
+             error = e;
+           }
+           // the stack should point to the binding
+           expect(getSourcePositionForStack(error.stack)).toEqual({
+             line: 2,
+             column: 12,
+             source: ngUrl,
+           });
+           // The error should be logged from the element
+           expect(getSourcePositionForStack(getErrorLoggerStack(error))).toEqual({
+             line: 2,
+             column: 4,
+             source: ngUrl,
+           });
+         }));
+
+      it('should report source location for event errors', fakeAsync(() => {
+           const template = `<div>\n    <span   (click)="createError()"></span></div>`;
+
+           @Component({...templateDecorator(template)})
+           class MyComp {
+             createError() { throw new Error('Test'); }
+           }
+
+           const comp = compileAndCreateComponent(MyComp);
+
+           let error: any;
+           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,
+             column: 12,
+             source: ngUrl,
+           });
+           // The error should be logged from the element
+           expect(getSourcePositionForStack(getErrorLoggerStack(error))).toEqual({
+             line: 2,
+             column: 4,
+             source: ngUrl,
+           });
+
+         }));
+    }
+  });
+}
diff --git a/packages/core/test/linker/system_ng_module_factory_loader_spec.ts b/packages/core/test/linker/system_ng_module_factory_loader_spec.ts
new file mode 100644
index 000000000000..fbbaa0f591ce
--- /dev/null
+++ b/packages/core/test/linker/system_ng_module_factory_loader_spec.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 {Compiler, SystemJsNgModuleLoader} from '@angular/core';
+import {global} from '@angular/core/src/util';
+import {async} from '@angular/core/testing';
+import {afterEach, beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+function mockSystem(modules: {[module: string]: any}) {
+  return {
+    'import': (target: string) => {
+      expect(modules[target]).not.toBe(undefined);
+      return Promise.resolve(modules[target]);
+    }
+  };
+}
+
+{
+  describe('SystemJsNgModuleLoader', () => {
+    let oldSystem: any = null;
+    beforeEach(() => {
+      oldSystem = global['System'];
+      global['System'] = mockSystem({
+        'test.ngfactory':
+            {'default': 'test module factory', 'NamedNgFactory': 'test NamedNgFactory'},
+        'prefixed/test/suffixed': {'NamedNgFactory': 'test module factory'}
+      });
+    });
+    afterEach(() => { global['System'] = oldSystem; });
+
+    it('loads a default factory by appending the factory suffix', async(() => {
+         const loader = new SystemJsNgModuleLoader(new Compiler());
+         loader.load('test').then(
+             contents => { expect(contents).toBe('test module factory' as any); });
+       }));
+    it('loads a named factory by appending the factory suffix', async(() => {
+         const loader = new SystemJsNgModuleLoader(new Compiler());
+         loader.load('test#Named').then(contents => {
+           expect(contents).toBe('test NamedNgFactory' as any);
+         });
+       }));
+    it('loads a named factory with a configured prefix and suffix', async(() => {
+         const loader = new SystemJsNgModuleLoader(new Compiler(), {
+           factoryPathPrefix: 'prefixed/',
+           factoryPathSuffix: '/suffixed',
+         });
+         loader.load('test#Named').then(contents => {
+           expect(contents).toBe('test module factory' as any);
+         });
+       }));
+  });
+}
diff --git a/packages/core/test/linker/view_injector_integration_spec.ts b/packages/core/test/linker/view_injector_integration_spec.ts
new file mode 100644
index 000000000000..f957b036566a
--- /dev/null
+++ b/packages/core/test/linker/view_injector_integration_spec.ts
@@ -0,0 +1,939 @@
+/**
+ * @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, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentFactoryResolver, DebugElement, Directive, ElementRef, Host, Inject, InjectionToken, Injector, Input, NgModule, Optional, Pipe, PipeTransform, Provider, Self, SkipSelf, TemplateRef, Type, ViewContainerRef} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync} from '@angular/core/testing';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+@Directive({selector: '[simpleDirective]'})
+class SimpleDirective {
+  @Input('simpleDirective') value: any = null;
+}
+
+@Component({selector: '[simpleComponent]', template: ''})
+class SimpleComponent {
+}
+
+@Directive({selector: '[someOtherDirective]'})
+class SomeOtherDirective {
+}
+
+@Directive({selector: '[cycleDirective]'})
+class CycleDirective {
+  constructor(self: CycleDirective) {}
+}
+
+@Directive({selector: '[needsDirectiveFromSelf]'})
+class NeedsDirectiveFromSelf {
+  dependency: SimpleDirective;
+  constructor(@Self() dependency: SimpleDirective) { this.dependency = dependency; }
+}
+
+@Directive({selector: '[optionallyNeedsDirective]'})
+class OptionallyNeedsDirective {
+  dependency: SimpleDirective;
+  constructor(@Self() @Optional() dependency: SimpleDirective) { this.dependency = dependency; }
+}
+
+@Directive({selector: '[needsComponentFromHost]'})
+class NeedsComponentFromHost {
+  dependency: SimpleComponent;
+  constructor(@Host() dependency: SimpleComponent) { this.dependency = dependency; }
+}
+
+@Directive({selector: '[needsDirectiveFromHost]'})
+class NeedsDirectiveFromHost {
+  dependency: SimpleDirective;
+  constructor(@Host() dependency: SimpleDirective) { this.dependency = dependency; }
+}
+
+@Directive({selector: '[needsDirective]'})
+class NeedsDirective {
+  dependency: SimpleDirective;
+  constructor(dependency: SimpleDirective) { this.dependency = dependency; }
+}
+
+@Directive({selector: '[needsService]'})
+class NeedsService {
+  service: any;
+  constructor(@Inject('service') service: any) { this.service = service; }
+}
+
+@Directive({selector: '[needsAppService]'})
+class NeedsAppService {
+  service: any;
+  constructor(@Inject('appService') service: any) { this.service = service; }
+}
+
+@Component({selector: '[needsHostAppService]', template: ''})
+class NeedsHostAppService {
+  service: any;
+  constructor(@Host() @Inject('appService') service: any) { this.service = service; }
+}
+
+@Component({selector: '[needsServiceComponent]', template: ''})
+class NeedsServiceComponent {
+  service: any;
+  constructor(@Inject('service') service: any) { this.service = service; }
+}
+
+@Directive({selector: '[needsServiceFromHost]'})
+class NeedsServiceFromHost {
+  service: any;
+  constructor(@Host() @Inject('service') service: any) { this.service = service; }
+}
+
+@Directive({selector: '[needsAttribute]'})
+class NeedsAttribute {
+  typeAttribute: any;
+  titleAttribute: any;
+  fooAttribute: any;
+  constructor(
+      @Attribute('type') typeAttribute: String, @Attribute('title') titleAttribute: String,
+      @Attribute('foo') fooAttribute: String) {
+    this.typeAttribute = typeAttribute;
+    this.titleAttribute = titleAttribute;
+    this.fooAttribute = fooAttribute;
+  }
+}
+
+@Directive({selector: '[needsAttributeNoType]'})
+class NeedsAttributeNoType {
+  constructor(@Attribute('foo') public fooAttribute: any) {}
+}
+
+@Directive({selector: '[needsElementRef]'})
+class NeedsElementRef {
+  constructor(public elementRef: ElementRef) {}
+}
+
+@Directive({selector: '[needsViewContainerRef]'})
+class NeedsViewContainerRef {
+  constructor(public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({selector: '[needsTemplateRef]'})
+class NeedsTemplateRef {
+  constructor(public templateRef: TemplateRef<Object>) {}
+}
+
+@Directive({selector: '[optionallyNeedsTemplateRef]'})
+class OptionallyNeedsTemplateRef {
+  constructor(@Optional() public templateRef: TemplateRef<Object>) {}
+}
+
+@Directive({selector: '[directiveNeedsChangeDetectorRef]'})
+class DirectiveNeedsChangeDetectorRef {
+  constructor(public changeDetectorRef: ChangeDetectorRef) {}
+}
+
+@Component({
+  selector: '[componentNeedsChangeDetectorRef]',
+  template: '{{counter}}',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+class PushComponentNeedsChangeDetectorRef {
+  counter: number = 0;
+  constructor(public changeDetectorRef: ChangeDetectorRef) {}
+}
+
+@Pipe({name: 'purePipe', pure: true})
+class PurePipe implements PipeTransform {
+  constructor() {}
+  transform(value: any): any { return this; }
+}
+
+@Pipe({name: 'impurePipe', pure: false})
+class ImpurePipe implements PipeTransform {
+  constructor() {}
+  transform(value: any): any { return this; }
+}
+
+@Pipe({name: 'pipeNeedsChangeDetectorRef'})
+class PipeNeedsChangeDetectorRef {
+  constructor(public changeDetectorRef: ChangeDetectorRef) {}
+  transform(value: any): any { return this; }
+}
+
+@Pipe({name: 'pipeNeedsService'})
+export class PipeNeedsService implements PipeTransform {
+  service: any;
+  constructor(@Inject('service') service: any) { this.service = service; }
+  transform(value: any): any { return this; }
+}
+
+@Pipe({name: 'duplicatePipe'})
+export class DuplicatePipe1 implements PipeTransform {
+  transform(value: any): any { return this; }
+}
+
+@Pipe({name: 'duplicatePipe'})
+export class DuplicatePipe2 implements PipeTransform {
+  transform(value: any): any { return this; }
+}
+
+@Component({selector: 'root', template: ''})
+class TestComp {
+}
+
+(function() {
+  function createComponentFixture<T>(
+      template: string, providers?: Provider[] | null, comp?: Type<T>): ComponentFixture<T> {
+    if (!comp) {
+      comp = <any>TestComp;
+    }
+    TestBed.overrideComponent(comp !, {set: {template}});
+    if (providers && providers.length) {
+      TestBed.overrideComponent(comp !, {add: {providers: providers}});
+    }
+    return TestBed.createComponent(comp !);
+  }
+
+  function createComponent(
+      template: string, providers?: Provider[], comp?: Type<any>): DebugElement {
+    const fixture = createComponentFixture(template, providers, comp);
+    fixture.detectChanges();
+    return fixture.debugElement;
+  }
+
+  describe('View injector', () => {
+    // On CJS fakeAsync is not supported...
+    if (!getDOM().supportsDOMEvents()) return;
+
+    const TOKEN = new InjectionToken<string>('token');
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestComp],
+        providers: [
+          {provide: TOKEN, useValue: 'appService'},
+          {provide: 'appService', useFactory: (v: string) => v, deps: [TOKEN]},
+        ],
+      });
+    });
+
+    describe('injection', () => {
+      it('should instantiate directives that have no dependencies', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective]});
+        const el = createComponent('<div simpleDirective>');
+        expect(el.children[0].injector.get(SimpleDirective)).toBeAnInstanceOf(SimpleDirective);
+      });
+
+      it('should instantiate directives that depend on another directive', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective, NeedsDirective]});
+        const el = createComponent('<div simpleDirective needsDirective>');
+
+        const d = el.children[0].injector.get(NeedsDirective);
+
+        expect(d).toBeAnInstanceOf(NeedsDirective);
+        expect(d.dependency).toBeAnInstanceOf(SimpleDirective);
+      });
+
+      it('should support useValue with different values', () => {
+        const el = createComponent('', [
+          {provide: 'numLiteral', useValue: 0},
+          {provide: 'boolLiteral', useValue: true},
+          {provide: 'strLiteral', useValue: 'a'},
+          {provide: 'null', useValue: null},
+          {provide: 'array', useValue: [1]},
+          {provide: 'map', useValue: {'a': 1}},
+          {provide: 'instance', useValue: new TestValue('a')},
+          {provide: 'nested', useValue: [{'a': [1]}, new TestValue('b')]},
+        ]);
+        expect(el.injector.get('numLiteral')).toBe(0);
+        expect(el.injector.get('boolLiteral')).toBe(true);
+        expect(el.injector.get('strLiteral')).toBe('a');
+        expect(el.injector.get('null')).toBe(null);
+        expect(el.injector.get('array')).toEqual([1]);
+        expect(el.injector.get('map')).toEqual({'a': 1});
+        expect(el.injector.get('instance')).toEqual(new TestValue('a'));
+        expect(el.injector.get('nested')).toEqual([{'a': [1]}, new TestValue('b')]);
+      });
+
+      it('should instantiate providers that have dependencies with SkipSelf', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective, SomeOtherDirective]});
+        TestBed.overrideDirective(
+            SimpleDirective,
+            {add: {providers: [{provide: 'injectable1', useValue: 'injectable1'}]}});
+        TestBed.overrideDirective(SomeOtherDirective, {
+          add: {
+            providers: [
+              {provide: 'injectable1', useValue: 'new-injectable1'}, {
+                provide: 'injectable2',
+                useFactory: (val: any) => `${val}-injectable2`,
+                deps: [[new Inject('injectable1'), new SkipSelf()]]
+              }
+            ]
+          }
+        });
+        const el = createComponent('<div simpleDirective><span someOtherDirective></span></div>');
+        expect(el.children[0].children[0].injector.get('injectable2'))
+            .toEqual('injectable1-injectable2');
+      });
+
+      it('should instantiate providers that have dependencies', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective]});
+        const providers = [
+          {provide: 'injectable1', useValue: 'injectable1'}, {
+            provide: 'injectable2',
+            useFactory: (val: any) => `${val}-injectable2`,
+            deps: ['injectable1']
+          }
+        ];
+        TestBed.overrideDirective(SimpleDirective, {add: {providers}});
+        const el = createComponent('<div simpleDirective></div>');
+        expect(el.children[0].injector.get('injectable2')).toEqual('injectable1-injectable2');
+      });
+
+      it('should instantiate viewProviders that have dependencies', () => {
+        TestBed.configureTestingModule({declarations: [SimpleComponent]});
+        const viewProviders = [
+          {provide: 'injectable1', useValue: 'injectable1'}, {
+            provide: 'injectable2',
+            useFactory: (val: any) => `${val}-injectable2`,
+            deps: ['injectable1']
+          }
+        ];
+        TestBed.overrideComponent(SimpleComponent, {set: {viewProviders}});
+        const el = createComponent('<div simpleComponent></div>');
+        expect(el.children[0].injector.get('injectable2')).toEqual('injectable1-injectable2');
+      });
+
+      it('should instantiate components that depend on viewProviders providers', () => {
+        TestBed.configureTestingModule({declarations: [NeedsServiceComponent]});
+        TestBed.overrideComponent(
+            NeedsServiceComponent, {set: {providers: [{provide: 'service', useValue: 'service'}]}});
+        const el = createComponent('<div needsServiceComponent></div>');
+        expect(el.children[0].injector.get(NeedsServiceComponent).service).toEqual('service');
+      });
+
+      it('should instantiate multi providers', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective]});
+        const providers = [
+          {provide: 'injectable1', useValue: 'injectable11', multi: true},
+          {provide: 'injectable1', useValue: 'injectable12', multi: true}
+        ];
+        TestBed.overrideDirective(SimpleDirective, {set: {providers}});
+        const el = createComponent('<div simpleDirective></div>');
+        expect(el.children[0].injector.get('injectable1')).toEqual([
+          'injectable11', 'injectable12'
+        ]);
+      });
+
+      it('should instantiate providers lazily', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective]});
+
+        let created = false;
+        TestBed.overrideDirective(
+            SimpleDirective,
+            {set: {providers: [{provide: 'service', useFactory: () => created = true}]}});
+        const el = createComponent('<div simpleDirective></div>');
+
+        expect(created).toBe(false);
+
+        el.children[0].injector.get('service');
+
+        expect(created).toBe(true);
+      });
+
+      it('should provide undefined', () => {
+        let factoryCounter = 0;
+
+        const el = createComponent('', [{
+                                     provide: 'token',
+                                     useFactory: () => {
+                                       factoryCounter++;
+                                       return undefined;
+                                     }
+                                   }]);
+
+        expect(el.injector.get('token')).toBeUndefined();
+        expect(el.injector.get('token')).toBeUndefined();
+        expect(factoryCounter).toBe(1);
+      });
+
+      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');
+        });
+      });
+
+      describe('injecting eager providers into an eager provider via Injector.get', () => {
+        it('should inject providers that were declared before it', () => {
+          @Component({
+            template: '',
+            providers: [
+              {provide: 'eager1', useFactory: () => 'v1'},
+              {
+                provide: 'eager2',
+                useFactory: (i: Injector) => `v2: ${i.get('eager1')}`,
+                deps: [Injector]
+              },
+            ]
+          })
+          class MyComp {
+            // Component is eager, which makes all of its deps eager
+            constructor(@Inject('eager1') eager1: any, @Inject('eager2') eager2: any) {}
+          }
+
+          const ctx =
+              TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+          expect(ctx.debugElement.injector.get('eager2')).toBe('v2: v1');
+        });
+
+        it('should inject providers that were declared after it', () => {
+          @Component({
+            template: '',
+            providers: [
+              {
+                provide: 'eager1',
+                useFactory: (i: Injector) => `v1: ${i.get('eager2')}`,
+                deps: [Injector]
+              },
+              {provide: 'eager2', useFactory: () => 'v2'},
+            ]
+          })
+          class MyComp {
+            // Component is eager, which makes all of its deps eager
+            constructor(@Inject('eager1') eager1: any, @Inject('eager2') eager2: any) {}
+          }
+
+          const ctx =
+              TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+          expect(ctx.debugElement.injector.get('eager1')).toBe('v1: v2');
+        });
+      });
+
+      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;
+
+        class SomeInjectable {
+          constructor() { created = true; }
+          ngOnDestroy() { destroyed = true; }
+        }
+
+        @Component({providers: [SomeInjectable], template: ''})
+        class SomeComp {
+        }
+
+        TestBed.configureTestingModule({declarations: [SomeComp]});
+
+
+        let compRef = TestBed.createComponent(SomeComp).componentRef;
+        expect(created).toBe(false);
+        expect(destroyed).toBe(false);
+
+        // no error if the provider was not yet created
+        compRef.destroy();
+        expect(created).toBe(false);
+        expect(destroyed).toBe(false);
+
+        compRef = TestBed.createComponent(SomeComp).componentRef;
+        compRef.injector.get(SomeInjectable);
+        expect(created).toBe(true);
+        compRef.destroy();
+        expect(destroyed).toBe(true);
+      });
+
+      it('should instantiate view providers lazily', () => {
+        let created = false;
+        TestBed.configureTestingModule({declarations: [SimpleComponent]});
+        TestBed.overrideComponent(
+            SimpleComponent,
+            {set: {viewProviders: [{provide: 'service', useFactory: () => created = true}]}});
+        const el = createComponent('<div simpleComponent></div>');
+
+        expect(created).toBe(false);
+
+        el.children[0].injector.get('service');
+
+        expect(created).toBe(true);
+      });
+
+      it('should not instantiate other directives that depend on viewProviders providers (same element)',
+         () => {
+           TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
+           TestBed.overrideComponent(
+               SimpleComponent,
+               {set: {viewProviders: [{provide: 'service', useValue: 'service'}]}});
+           expect(() => createComponent('<div simpleComponent needsService></div>'))
+               .toThrowError(/No provider for service!/);
+         });
+
+      it('should not instantiate other directives that depend on viewProviders providers (child element)',
+         () => {
+           TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
+           TestBed.overrideComponent(
+               SimpleComponent,
+               {set: {viewProviders: [{provide: 'service', useValue: 'service'}]}});
+           expect(() => createComponent('<div simpleComponent><div needsService></div></div>'))
+               .toThrowError(/No provider for service!/);
+         });
+
+      it('should instantiate directives that depend on providers of other directives', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective, NeedsService]});
+        TestBed.overrideDirective(
+            SimpleDirective, {set: {providers: [{provide: 'service', useValue: 'parentService'}]}});
+
+        const el = createComponent('<div simpleDirective><div needsService></div></div>');
+        expect(el.children[0].children[0].injector.get(NeedsService).service)
+            .toEqual('parentService');
+      });
+
+      it('should instantiate directives that depend on providers in a parent view', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective, NeedsService]});
+        TestBed.overrideDirective(
+            SimpleDirective, {set: {providers: [{provide: 'service', useValue: 'parentService'}]}});
+        const el = createComponent(
+            '<div simpleDirective><ng-container *ngIf="true"><div *ngIf="true" needsService></div></ng-container></div>');
+        expect(el.children[0].children[0].injector.get(NeedsService).service)
+            .toEqual('parentService');
+      });
+
+      it('should instantiate directives that depend on providers of a component', () => {
+        TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
+        TestBed.overrideComponent(
+            SimpleComponent, {set: {providers: [{provide: 'service', useValue: 'hostService'}]}});
+        TestBed.overrideComponent(SimpleComponent, {set: {template: '<div needsService></div>'}});
+        const el = createComponent('<div simpleComponent></div>');
+        expect(el.children[0].children[0].injector.get(NeedsService).service)
+            .toEqual('hostService');
+      });
+
+      it('should instantiate directives that depend on view providers of a component', () => {
+        TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
+        TestBed.overrideComponent(
+            SimpleComponent, {set: {providers: [{provide: 'service', useValue: 'hostService'}]}});
+        TestBed.overrideComponent(SimpleComponent, {set: {template: '<div needsService></div>'}});
+        const el = createComponent('<div simpleComponent></div>');
+        expect(el.children[0].children[0].injector.get(NeedsService).service)
+            .toEqual('hostService');
+      });
+
+      it('should instantiate directives in a root embedded view that depend on view providers of a component',
+         () => {
+           TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsService]});
+           TestBed.overrideComponent(
+               SimpleComponent,
+               {set: {providers: [{provide: 'service', useValue: 'hostService'}]}});
+           TestBed.overrideComponent(
+               SimpleComponent, {set: {template: '<div *ngIf="true" needsService></div>'}});
+           const el = createComponent('<div simpleComponent></div>');
+           expect(el.children[0].children[0].injector.get(NeedsService).service)
+               .toEqual('hostService');
+         });
+
+      it('should instantiate directives that depend on instances in the app injector', () => {
+        TestBed.configureTestingModule({declarations: [NeedsAppService]});
+        const el = createComponent('<div needsAppService></div>');
+        expect(el.children[0].injector.get(NeedsAppService).service).toEqual('appService');
+      });
+
+      it('should not instantiate a directive with cyclic dependencies', () => {
+        TestBed.configureTestingModule({declarations: [CycleDirective]});
+        expect(() => createComponent('<div cycleDirective></div>'))
+            .toThrowError(
+                /Template parse errors:\nCannot instantiate cyclic dependency! CycleDirective \("\[ERROR ->\]<div cycleDirective><\/div>"\): .*TestComp.html@0:0/);
+      });
+
+      it('should not instantiate a directive in a view that has a host dependency on providers' +
+             ' of the component',
+         () => {
+           TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsServiceFromHost]});
+           TestBed.overrideComponent(
+               SimpleComponent,
+               {set: {providers: [{provide: 'service', useValue: 'hostService'}]}});
+           TestBed.overrideComponent(
+               SimpleComponent, {set: {template: '<div needsServiceFromHost><div>'}});
+
+           expect(() => createComponent('<div simpleComponent></div>'))
+               .toThrowError(
+                   /Template parse errors:\nNo provider for service \("\[ERROR ->\]<div needsServiceFromHost><div>"\): .*SimpleComponent.html@0:0/);
+         });
+
+      it('should not instantiate a directive in a view that has a host dependency on providers' +
+             ' of a decorator directive',
+         () => {
+           TestBed.configureTestingModule(
+               {declarations: [SimpleComponent, SomeOtherDirective, NeedsServiceFromHost]});
+           TestBed.overrideComponent(
+               SimpleComponent,
+               {set: {providers: [{provide: 'service', useValue: 'hostService'}]}});
+           TestBed.overrideComponent(
+               SimpleComponent, {set: {template: '<div needsServiceFromHost><div>'}});
+
+           expect(() => createComponent('<div simpleComponent someOtherDirective></div>'))
+               .toThrowError(
+                   /Template parse errors:\nNo provider for service \("\[ERROR ->\]<div needsServiceFromHost><div>"\): .*SimpleComponent.html@0:0/);
+         });
+
+      it('should not instantiate a directive in a view that has a self dependency on a parent directive',
+         () => {
+           TestBed.configureTestingModule(
+               {declarations: [SimpleDirective, NeedsDirectiveFromSelf]});
+           expect(
+               () =>
+                   createComponent('<div simpleDirective><div needsDirectiveFromSelf></div></div>'))
+               .toThrowError(
+                   /Template parse errors:\nNo provider for SimpleDirective \("<div simpleDirective>\[ERROR ->\]<div needsDirectiveFromSelf><\/div><\/div>"\): .*TestComp.html@0:21/);
+         });
+
+      it('should instantiate directives that depend on other directives', fakeAsync(() => {
+           TestBed.configureTestingModule({declarations: [SimpleDirective, NeedsDirective]});
+           const el = createComponent('<div simpleDirective><div needsDirective></div></div>');
+           const d = el.children[0].children[0].injector.get(NeedsDirective);
+
+           expect(d).toBeAnInstanceOf(NeedsDirective);
+           expect(d.dependency).toBeAnInstanceOf(SimpleDirective);
+         }));
+
+      it('should throw when a dependency cannot be resolved', fakeAsync(() => {
+           TestBed.configureTestingModule({declarations: [NeedsService]});
+
+           expect(() => createComponent('<div needsService></div>'))
+               .toThrowError(/No provider for service!/);
+         }));
+
+      it('should inject null when an optional dependency cannot be resolved', () => {
+        TestBed.configureTestingModule({declarations: [OptionallyNeedsDirective]});
+        const el = createComponent('<div optionallyNeedsDirective></div>');
+        const d = el.children[0].injector.get(OptionallyNeedsDirective);
+        expect(d.dependency).toBeNull();
+      });
+
+      it('should instantiate directives that depends on the host component', () => {
+        TestBed.configureTestingModule({declarations: [SimpleComponent, NeedsComponentFromHost]});
+        TestBed.overrideComponent(
+            SimpleComponent, {set: {template: '<div needsComponentFromHost></div>'}});
+        const el = createComponent('<div simpleComponent></div>');
+        const d = el.children[0].children[0].injector.get(NeedsComponentFromHost);
+        expect(d.dependency).toBeAnInstanceOf(SimpleComponent);
+      });
+
+      it('should instantiate host views for components that have a @Host dependency ', () => {
+        TestBed.configureTestingModule({declarations: [NeedsHostAppService]});
+        const el = createComponent('', [], NeedsHostAppService);
+        expect(el.componentInstance.service).toEqual('appService');
+      });
+
+      it('should not instantiate directives that depend on other directives on the host element', () => {
+        TestBed.configureTestingModule(
+            {declarations: [SimpleComponent, SimpleDirective, NeedsDirectiveFromHost]});
+        TestBed.overrideComponent(
+            SimpleComponent, {set: {template: '<div needsDirectiveFromHost></div>'}});
+        expect(() => createComponent('<div simpleComponent simpleDirective></div>'))
+            .toThrowError(
+                /Template parse errors:\nNo provider for SimpleDirective \("\[ERROR ->\]<div needsDirectiveFromHost><\/div>"\): .*SimpleComponent.html@0:0/);
+      });
+
+      it('should allow to use the NgModule injector from a root ViewContainerRef.parentInjector',
+         () => {
+           @Component({template: ''})
+           class MyComp {
+             constructor(public vc: ViewContainerRef) {}
+           }
+
+           const compFixture = TestBed
+                                   .configureTestingModule({
+                                     declarations: [MyComp],
+                                     providers: [{provide: 'someToken', useValue: 'someValue'}]
+                                   })
+                                   .createComponent(MyComp);
+
+           expect(compFixture.componentInstance.vc.parentInjector.get('someToken'))
+               .toBe('someValue');
+         });
+    });
+
+    describe('static attributes', () => {
+      it('should be injectable', () => {
+        TestBed.configureTestingModule({declarations: [NeedsAttribute]});
+        const el = createComponent('<div needsAttribute type="text" title></div>');
+        const needsAttribute = el.children[0].injector.get(NeedsAttribute);
+
+        expect(needsAttribute.typeAttribute).toEqual('text');
+        expect(needsAttribute.titleAttribute).toEqual('');
+        expect(needsAttribute.fooAttribute).toEqual(null);
+      });
+
+      it('should be injectable without type annotation', () => {
+        TestBed.configureTestingModule({declarations: [NeedsAttributeNoType]});
+        const el = createComponent('<div needsAttributeNoType foo="bar"></div>');
+        const needsAttribute = el.children[0].injector.get(NeedsAttributeNoType);
+
+        expect(needsAttribute.fooAttribute).toEqual('bar');
+      });
+    });
+
+    describe('refs', () => {
+      it('should inject ElementRef', () => {
+        TestBed.configureTestingModule({declarations: [NeedsElementRef]});
+        const el = createComponent('<div needsElementRef></div>');
+        expect(el.children[0].injector.get(NeedsElementRef).elementRef.nativeElement)
+            .toBe(el.children[0].nativeElement);
+      });
+
+      it('should inject ChangeDetectorRef of the component\'s view into the component', () => {
+        TestBed.configureTestingModule({declarations: [PushComponentNeedsChangeDetectorRef]});
+        const cf = createComponentFixture('<div componentNeedsChangeDetectorRef></div>');
+        cf.detectChanges();
+        const compEl = cf.debugElement.children[0];
+        const comp = compEl.injector.get(PushComponentNeedsChangeDetectorRef);
+        comp.counter = 1;
+        cf.detectChanges();
+        expect(compEl.nativeElement).toHaveText('0');
+        comp.changeDetectorRef.markForCheck();
+        cf.detectChanges();
+        expect(compEl.nativeElement).toHaveText('1');
+      });
+
+      it('should inject ChangeDetectorRef of the containing component into directives', () => {
+        TestBed.configureTestingModule(
+            {declarations: [PushComponentNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef]});
+        TestBed.overrideComponent(PushComponentNeedsChangeDetectorRef, {
+          set: {
+            template:
+                '{{counter}}<div directiveNeedsChangeDetectorRef></div><div *ngIf="true" directiveNeedsChangeDetectorRef></div>'
+          }
+        });
+        const cf = createComponentFixture('<div componentNeedsChangeDetectorRef></div>');
+        cf.detectChanges();
+        const compEl = cf.debugElement.children[0];
+        const comp: PushComponentNeedsChangeDetectorRef =
+            compEl.injector.get(PushComponentNeedsChangeDetectorRef);
+        comp.counter = 1;
+        cf.detectChanges();
+        expect(compEl.nativeElement).toHaveText('0');
+        expect(compEl.children[0].injector.get(DirectiveNeedsChangeDetectorRef).changeDetectorRef)
+            .toEqual(comp.changeDetectorRef);
+        expect(compEl.children[1].injector.get(DirectiveNeedsChangeDetectorRef).changeDetectorRef)
+            .toEqual(comp.changeDetectorRef);
+        comp.changeDetectorRef.markForCheck();
+        cf.detectChanges();
+        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>');
+        expect(
+            el.children[0].injector.get(NeedsViewContainerRef).viewContainer.element.nativeElement)
+            .toBe(el.children[0].nativeElement);
+      });
+
+      it('should inject ViewContainerRef', () => {
+        @Component({template: ''})
+        class TestComp {
+          constructor(public vcr: ViewContainerRef) {}
+        }
+
+        @NgModule({
+          declarations: [TestComp],
+          entryComponents: [TestComp],
+        })
+        class TestModule {
+        }
+
+        const testInjector = <Injector>{
+          get: (token: any, notFoundValue: any) =>
+                   token === 'someToken' ? 'someNewValue' : notFoundValue
+        };
+
+        const compFactory = TestBed.configureTestingModule({imports: [TestModule]})
+                                .get(ComponentFactoryResolver)
+                                .resolveComponentFactory(TestComp);
+        const component = compFactory.create(testInjector);
+        expect(component.instance.vcr.parentInjector.get('someToken')).toBe('someNewValue');
+      });
+
+      it('should inject TemplateRef', () => {
+        TestBed.configureTestingModule({declarations: [NeedsViewContainerRef, NeedsTemplateRef]});
+        const el =
+            createComponent('<ng-template needsViewContainerRef needsTemplateRef></ng-template>');
+        expect(el.childNodes[0].injector.get(NeedsTemplateRef).templateRef.elementRef)
+            .toEqual(el.childNodes[0].injector.get(NeedsViewContainerRef).viewContainer.element);
+      });
+
+      it('should throw if there is no TemplateRef', () => {
+        TestBed.configureTestingModule({declarations: [NeedsTemplateRef]});
+        expect(() => createComponent('<div needsTemplateRef></div>'))
+            .toThrowError(/No provider for TemplateRef!/);
+      });
+
+      it('should inject null if there is no TemplateRef when the dependency is optional', () => {
+        TestBed.configureTestingModule({declarations: [OptionallyNeedsTemplateRef]});
+        const el = createComponent('<div optionallyNeedsTemplateRef></div>');
+        const instance = el.children[0].injector.get(OptionallyNeedsTemplateRef);
+        expect(instance.templateRef).toBeNull();
+      });
+    });
+
+    describe('pipes', () => {
+      it('should instantiate pipes that have dependencies', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective, PipeNeedsService]});
+
+        const el = createComponent(
+            '<div [simpleDirective]="true | pipeNeedsService"></div>',
+            [{provide: 'service', useValue: 'pipeService'}]);
+        expect(el.children[0].injector.get(SimpleDirective).value.service).toEqual('pipeService');
+      });
+
+      it('should overwrite pipes with later entry in the pipes array', () => {
+        TestBed.configureTestingModule(
+            {declarations: [SimpleDirective, DuplicatePipe1, DuplicatePipe2]});
+        const el = createComponent('<div [simpleDirective]="true | duplicatePipe"></div>');
+        expect(el.children[0].injector.get(SimpleDirective).value).toBeAnInstanceOf(DuplicatePipe2);
+      });
+
+      it('should inject ChangeDetectorRef into pipes', () => {
+        TestBed.configureTestingModule({
+          declarations:
+              [SimpleDirective, PipeNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef]
+        });
+        const el = createComponent(
+            '<div [simpleDirective]="true | pipeNeedsChangeDetectorRef" directiveNeedsChangeDetectorRef></div>');
+        const cdRef =
+            el.children[0].injector.get(DirectiveNeedsChangeDetectorRef).changeDetectorRef;
+        expect(el.children[0].injector.get(SimpleDirective).value.changeDetectorRef).toEqual(cdRef);
+      });
+
+      it('should cache pure pipes', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective, PurePipe]});
+        const el = createComponent(
+            '<div [simpleDirective]="true | purePipe"></div><div [simpleDirective]="true | purePipe"></div>' +
+            '<div *ngFor="let x of [1,2]" [simpleDirective]="true | purePipe"></div>');
+        const purePipe1 = el.children[0].injector.get(SimpleDirective).value;
+        const purePipe2 = el.children[1].injector.get(SimpleDirective).value;
+        const purePipe3 = el.children[2].injector.get(SimpleDirective).value;
+        const purePipe4 = el.children[3].injector.get(SimpleDirective).value;
+        expect(purePipe1).toBeAnInstanceOf(PurePipe);
+        expect(purePipe2).toBe(purePipe1);
+        expect(purePipe3).toBe(purePipe1);
+        expect(purePipe4).toBe(purePipe1);
+      });
+
+      it('should not cache impure pipes', () => {
+        TestBed.configureTestingModule({declarations: [SimpleDirective, ImpurePipe]});
+        const el = createComponent(
+            '<div [simpleDirective]="true | impurePipe"></div><div [simpleDirective]="true | impurePipe"></div>' +
+            '<div *ngFor="let x of [1,2]" [simpleDirective]="true | impurePipe"></div>');
+        const impurePipe1 = el.children[0].injector.get(SimpleDirective).value;
+        const impurePipe2 = el.children[1].injector.get(SimpleDirective).value;
+        const impurePipe3 = el.children[2].injector.get(SimpleDirective).value;
+        const impurePipe4 = el.children[3].injector.get(SimpleDirective).value;
+        expect(impurePipe1).toBeAnInstanceOf(ImpurePipe);
+        expect(impurePipe2).toBeAnInstanceOf(ImpurePipe);
+        expect(impurePipe2).not.toBe(impurePipe1);
+        expect(impurePipe3).toBeAnInstanceOf(ImpurePipe);
+        expect(impurePipe3).not.toBe(impurePipe1);
+        expect(impurePipe4).toBeAnInstanceOf(ImpurePipe);
+        expect(impurePipe4).not.toBe(impurePipe1);
+      });
+    });
+  });
+})();
+
+class TestValue {
+  constructor(public value: string) {}
+}
diff --git a/packages/core/test/metadata/di_spec.ts b/packages/core/test/metadata/di_spec.ts
new file mode 100644
index 000000000000..733328e53c54
--- /dev/null
+++ b/packages/core/test/metadata/di_spec.ts
@@ -0,0 +1,106 @@
+/**
+ * @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, ElementRef, Input, NO_ERRORS_SCHEMA, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+
+{
+  describe('ViewChild', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [ViewChildTypeSelectorComponent, ViewChildStringSelectorComponent, Simple],
+        schemas: [NO_ERRORS_SCHEMA],
+      });
+    });
+
+    it('should support type selector', () => {
+      TestBed.overrideComponent(
+          ViewChildTypeSelectorComponent,
+          {set: {template: `<simple [marker]="'1'"></simple><simple [marker]="'2'"></simple>`}});
+      const view = TestBed.createComponent(ViewChildTypeSelectorComponent);
+
+      view.detectChanges();
+      expect(view.componentInstance.child).toBeDefined();
+      expect(view.componentInstance.child.marker).toBe('1');
+    });
+
+    it('should support string selector', () => {
+      TestBed.overrideComponent(
+          ViewChildStringSelectorComponent, {set: {template: `<simple #child></simple>`}});
+      const view = TestBed.createComponent(ViewChildStringSelectorComponent);
+
+      view.detectChanges();
+      expect(view.componentInstance.child).toBeDefined();
+    });
+  });
+
+  describe('ViewChildren', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations:
+            [ViewChildrenTypeSelectorComponent, ViewChildrenStringSelectorComponent, Simple],
+        schemas: [NO_ERRORS_SCHEMA],
+      });
+    });
+
+    it('should support type selector', () => {
+      TestBed.overrideComponent(
+          ViewChildrenTypeSelectorComponent,
+          {set: {template: `<simple></simple><simple></simple>`}});
+
+      const view = TestBed.createComponent(ViewChildrenTypeSelectorComponent);
+      view.detectChanges();
+      expect(view.componentInstance.children).toBeDefined();
+      expect(view.componentInstance.children.length).toBe(2);
+    });
+
+    it('should support string selector', () => {
+      TestBed.overrideComponent(
+          ViewChildrenStringSelectorComponent,
+          {set: {template: `<simple #child1></simple><simple #child2></simple>`}});
+      const view = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
+                       .createComponent(ViewChildrenStringSelectorComponent);
+      view.detectChanges();
+      expect(view.componentInstance.children).toBeDefined();
+      expect(view.componentInstance.children.length).toBe(2);
+
+    });
+  });
+}
+
+
+@Directive({selector: 'simple'})
+class Simple {
+  // TODO(issue/24571): remove '!'.
+  @Input() marker !: string;
+}
+
+@Component({selector: 'view-child-type-selector', template: ''})
+class ViewChildTypeSelectorComponent {
+  // TODO(issue/24571): remove '!'.
+  @ViewChild(Simple) child !: Simple;
+}
+
+@Component({selector: 'view-child-string-selector', template: ''})
+class ViewChildStringSelectorComponent {
+  // TODO(issue/24571): remove '!'.
+  @ViewChild('child') child !: ElementRef;
+}
+
+@Component({selector: 'view-children-type-selector', template: ''})
+class ViewChildrenTypeSelectorComponent {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(Simple) children !: QueryList<Simple>;
+}
+
+@Component({selector: 'view-child-string-selector', template: ''})
+class ViewChildrenStringSelectorComponent {
+  // Allow comma separated selector (with spaces).
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren('child1 , child2') children !: QueryList<ElementRef>;
+}
diff --git a/packages/core/test/metadata/resource_loading_spec.ts b/packages/core/test/metadata/resource_loading_spec.ts
new file mode 100644
index 000000000000..2c15e02a90cf
--- /dev/null
+++ b/packages/core/test/metadata/resource_loading_spec.ts
@@ -0,0 +1,134 @@
+/**
+ * @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 '../../src/core';
+import {clearResolutionOfComponentResourcesQueue, resolveComponentResources} from '../../src/metadata/resource_loading';
+import {ComponentType} from '../../src/render3/interfaces/definition';
+import {compileComponent} from '../../src/render3/jit/directive';
+
+describe('resource_loading', () => {
+  describe('error handling', () => {
+    afterEach(clearResolutionOfComponentResourcesQueue);
+    it('should throw an error when compiling component that has unresolved templateUrl', () => {
+      const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
+      compileComponent(MyComponent, {templateUrl: 'someUrl'});
+      expect(() => MyComponent.ngComponentDef).toThrowError(`
+Component 'MyComponent' is not resolved:
+ - templateUrl: someUrl
+Did you run and wait for 'resolveComponentResources()'?`.trim());
+    });
+
+    it('should throw an error when compiling component that has unresolved styleUrls', () => {
+      const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
+      compileComponent(MyComponent, {styleUrls: ['someUrl1', 'someUrl2']});
+      expect(() => MyComponent.ngComponentDef).toThrowError(`
+Component 'MyComponent' is not resolved:
+ - styleUrls: ["someUrl1","someUrl2"]
+Did you run and wait for 'resolveComponentResources()'?`.trim());
+    });
+
+    it('should throw an error when compiling component that has unresolved templateUrl and styleUrls',
+       () => {
+         const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
+         compileComponent(
+             MyComponent, {templateUrl: 'someUrl', styleUrls: ['someUrl1', 'someUrl2']});
+         expect(() => MyComponent.ngComponentDef).toThrowError(`
+Component 'MyComponent' is not resolved:
+ - templateUrl: someUrl
+ - styleUrls: ["someUrl1","someUrl2"]
+Did you run and wait for 'resolveComponentResources()'?`.trim());
+       });
+  });
+
+  describe('resolution', () => {
+    const URLS: {[url: string]: Promise<string>} = {
+      'test://content': Promise.resolve('content'),
+      'test://style1': Promise.resolve('style1'),
+      'test://style2': Promise.resolve('style2'),
+    };
+    let resourceFetchCount: number;
+    function testResolver(url: string): Promise<string> {
+      resourceFetchCount++;
+      return URLS[url] || Promise.reject('NOT_FOUND: ' + url);
+    }
+    beforeEach(() => resourceFetchCount = 0);
+
+    it('should resolve template', async() => {
+      const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
+      const metadata: Component = {templateUrl: 'test://content'};
+      compileComponent(MyComponent, metadata);
+      await resolveComponentResources(testResolver);
+      expect(MyComponent.ngComponentDef).toBeDefined();
+      expect(metadata.templateUrl).toBe(undefined);
+      expect(metadata.template).toBe('content');
+      expect(resourceFetchCount).toBe(1);
+    });
+
+    it('should resolve styleUrls', async() => {
+      const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
+      const metadata: Component = {template: '', styleUrls: ['test://style1', 'test://style2']};
+      compileComponent(MyComponent, metadata);
+      await resolveComponentResources(testResolver);
+      expect(MyComponent.ngComponentDef).toBeDefined();
+      expect(metadata.styleUrls).toBe(undefined);
+      expect(metadata.styles).toEqual(['style1', 'style2']);
+      expect(resourceFetchCount).toBe(2);
+    });
+
+    it('should cache multiple resolution to same URL', async() => {
+      const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
+      const metadata: Component = {template: '', styleUrls: ['test://style1', 'test://style1']};
+      compileComponent(MyComponent, metadata);
+      await resolveComponentResources(testResolver);
+      expect(MyComponent.ngComponentDef).toBeDefined();
+      expect(metadata.styleUrls).toBe(undefined);
+      expect(metadata.styles).toEqual(['style1', 'style1']);
+      expect(resourceFetchCount).toBe(1);
+    });
+
+    it('should keep order even if the resolution is out of order', async() => {
+      const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
+      const metadata: Component = {
+        template: '',
+        styles: ['existing'],
+        styleUrls: ['test://style1', 'test://style2']
+      };
+      compileComponent(MyComponent, metadata);
+      const resolvers: any[] = [];
+      const resolved = resolveComponentResources(
+          (url) => new Promise((resolve, response) => resolvers.push(url, resolve)));
+      // Out of order resolution
+      expect(resolvers[0]).toEqual('test://style1');
+      expect(resolvers[2]).toEqual('test://style2');
+      resolvers[3]('second');
+      resolvers[1]('first');
+      await resolved;
+      expect(metadata.styleUrls).toBe(undefined);
+      expect(metadata.styles).toEqual(['existing', 'first', 'second']);
+    });
+
+  });
+
+  describe('fetch', () => {
+    function fetch(url: string): Promise<Response> {
+      return Promise.resolve({
+        text() { return 'response for ' + url; }
+      } as any as Response);
+    }
+
+    it('should work with fetch', async() => {
+      const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
+      const metadata: Component = {templateUrl: 'test://content'};
+      compileComponent(MyComponent, metadata);
+      await resolveComponentResources(fetch);
+      expect(MyComponent.ngComponentDef).toBeDefined();
+      expect(metadata.templateUrl).toBe(undefined);
+      expect(metadata.template).toBe('response for test://content');
+    });
+  });
+});
diff --git a/packages/core/test/reflection/reflector_spec.ts b/packages/core/test/reflection/reflector_spec.ts
new file mode 100644
index 000000000000..d24ff79e926a
--- /dev/null
+++ b/packages/core/test/reflection/reflector_spec.ts
@@ -0,0 +1,572 @@
+/**
+ * @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 {Reflector} from '@angular/core/src/reflection/reflection';
+import {DELEGATE_CTOR, INHERITED_CLASS, INHERITED_CLASS_WITH_CTOR, ReflectionCapabilities} from '@angular/core/src/reflection/reflection_capabilities';
+import {global} from '@angular/core/src/util';
+import {makeDecorator, makeParamDecorator, makePropDecorator} from '@angular/core/src/util/decorators';
+
+interface ClassDecoratorFactory {
+  (data: ClassDecorator): any;
+  new (data: ClassDecorator): ClassDecorator;
+}
+
+interface ClassDecorator {
+  value: any;
+}
+
+interface ParamDecorator {
+  value: any;
+}
+
+interface PropDecorator {
+  value: any;
+}
+
+/** @Annotation */ const ClassDecorator =
+    <ClassDecoratorFactory>makeDecorator('ClassDecorator', (data: any) => data);
+/** @Annotation */ const ParamDecorator =
+    makeParamDecorator('ParamDecorator', (value: any) => ({value}));
+/** @Annotation */ const PropDecorator =
+    makePropDecorator('PropDecorator', (value: any) => ({value}));
+
+class AType {
+  constructor(public value: any) {}
+}
+
+@ClassDecorator({value: 'class'})
+class ClassWithDecorators {
+  @PropDecorator('p1') @PropDecorator('p2') a: AType;
+
+  b: AType;
+
+  @PropDecorator('p3')
+  set c(value: any) {}
+
+  @PropDecorator('p4')
+  someMethod() {}
+
+  constructor(@ParamDecorator('a') a: AType, @ParamDecorator('b') b: AType) {
+    this.a = a;
+    this.b = b;
+  }
+}
+
+class ClassWithoutDecorators {
+  constructor(a: any, b: any) {}
+}
+
+class TestObj {
+  constructor(public a: any, public b: any) {}
+
+  identity(arg: any) { return arg; }
+}
+
+{
+  describe('Reflector', () => {
+    let reflector: Reflector;
+
+    beforeEach(() => { reflector = new Reflector(new ReflectionCapabilities()); });
+
+    describe('factory', () => {
+      it('should create a factory for the given type', () => {
+        const obj = reflector.factory(TestObj)(1, 2);
+        expect(obj.a).toEqual(1);
+        expect(obj.b).toEqual(2);
+      });
+    });
+
+    describe('parameters', () => {
+      it('should return an array of parameters for a type', () => {
+        const p = reflector.parameters(ClassWithDecorators);
+        expect(p).toEqual([[AType, new ParamDecorator('a')], [AType, new ParamDecorator('b')]]);
+      });
+
+      it('should work for a class without annotations', () => {
+        const p = reflector.parameters(ClassWithoutDecorators);
+        expect(p.length).toEqual(2);
+      });
+
+      // See https://github.com/angular/tsickle/issues/261
+      it('should read forwardRef down-leveled type', () => {
+        class Dep {}
+        class ForwardLegacy {
+          constructor(d: Dep) {}
+          // Older tsickle had a bug: wrote a forward reference
+          static ctorParameters = [{type: Dep}];
+        }
+        expect(reflector.parameters(ForwardLegacy)).toEqual([[Dep]]);
+        class Forward {
+          constructor(d: Dep) {}
+          // Newer tsickle generates a functionClosure
+          static ctorParameters = () => [{type: ForwardDep}];
+        }
+        class ForwardDep {}
+        expect(reflector.parameters(Forward)).toEqual([[ForwardDep]]);
+      });
+    });
+
+    describe('propMetadata', () => {
+      it('should return a string map of prop metadata for the given class', () => {
+        const p = reflector.propMetadata(ClassWithDecorators);
+        expect(p['a']).toEqual([new PropDecorator('p1'), new PropDecorator('p2')]);
+        expect(p['c']).toEqual([new PropDecorator('p3')]);
+        expect(p['someMethod']).toEqual([new PropDecorator('p4')]);
+      });
+
+      it('should also return metadata if the class has no decorator', () => {
+        class Test {
+          @PropDecorator('test')
+          prop: any;
+        }
+
+        expect(reflector.propMetadata(Test)).toEqual({'prop': [new PropDecorator('test')]});
+      });
+    });
+
+    describe('annotations', () => {
+      it('should return an array of annotations for a type', () => {
+        const p = reflector.annotations(ClassWithDecorators);
+        expect(p).toEqual([new ClassDecorator({value: 'class'})]);
+      });
+
+      it('should work for a class without annotations', () => {
+        const p = reflector.annotations(ClassWithoutDecorators);
+        expect(p).toEqual([]);
+      });
+    });
+
+    describe('getter', () => {
+      it('returns a function reading a property', () => {
+        const getA = reflector.getter('a');
+        expect(getA(new TestObj(1, 2))).toEqual(1);
+      });
+    });
+
+    describe('setter', () => {
+      it('returns a function setting a property', () => {
+        const setA = reflector.setter('a');
+        const obj = new TestObj(1, 2);
+        setA(obj, 100);
+        expect(obj.a).toEqual(100);
+      });
+    });
+
+    describe('method', () => {
+      it('returns a function invoking a method', () => {
+        const func = reflector.method('identity');
+        const obj = new TestObj(1, 2);
+        expect(func(obj, ['value'])).toEqual('value');
+      });
+    });
+
+    describe('ctor inheritance detection', () => {
+      it('should use the right regex', () => {
+        class Parent {}
+
+        class ChildNoCtor extends Parent {}
+        class ChildWithCtor extends Parent {
+          constructor() { super(); }
+        }
+        class ChildNoCtorPrivateProps extends Parent {
+          private x = 10;
+        }
+
+        expect(DELEGATE_CTOR.exec(ChildNoCtor.toString())).toBeTruthy();
+        expect(DELEGATE_CTOR.exec(ChildNoCtorPrivateProps.toString())).toBeTruthy();
+        expect(DELEGATE_CTOR.exec(ChildWithCtor.toString())).toBeFalsy();
+      });
+
+      it('should not throw when no prototype on type', () => {
+        // Cannot test arrow function here due to the compilation
+        const dummyArrowFn = function() {};
+        Object.defineProperty(dummyArrowFn, 'prototype', {value: undefined});
+        expect(() => reflector.annotations(dummyArrowFn as any)).not.toThrow();
+      });
+
+      it('should support native class', () => {
+        const ChildNoCtor = `class ChildNoCtor extends Parent {}\n`;
+        const ChildWithCtor = `class ChildWithCtor extends Parent {\n` +
+            `  constructor() { super(); }` +
+            `}\n`;
+        const ChildNoCtorPrivateProps = `class ChildNoCtorPrivateProps extends Parent {\n` +
+            `  private x = 10;\n` +
+            `}\n`;
+
+        const checkNoOwnMetadata = (str: string) =>
+            INHERITED_CLASS.exec(str) && !INHERITED_CLASS_WITH_CTOR.exec(str);
+
+        expect(checkNoOwnMetadata(ChildNoCtor)).toBeTruthy();
+        expect(checkNoOwnMetadata(ChildNoCtorPrivateProps)).toBeTruthy();
+        expect(checkNoOwnMetadata(ChildWithCtor)).toBeFalsy();
+      });
+
+      it('should properly handle all class forms', () => {
+        const ctor = (str: string) => expect(INHERITED_CLASS.exec(str)).toBeTruthy() &&
+            expect(INHERITED_CLASS_WITH_CTOR.exec(str)).toBeTruthy();
+        const noCtor = (str: string) => expect(INHERITED_CLASS.exec(str)).toBeTruthy() &&
+            expect(INHERITED_CLASS_WITH_CTOR.exec(str)).toBeFalsy();
+
+        ctor(`class Bar extends Foo {constructor(){}}`);
+        ctor(`class Bar extends Foo { constructor ( ) {} }`);
+        ctor(`class Bar extends Foo { other(){}; constructor(){} }`);
+
+        noCtor(`class extends Foo{}`);
+        noCtor(`class extends Foo {}`);
+        noCtor(`class Bar extends Foo {}`);
+        noCtor(`class $Bar1_ extends $Fo0_ {}`);
+        noCtor(`class Bar extends Foo { other(){} }`);
+      });
+
+    });
+
+    describe('inheritance with decorators', () => {
+      it('should inherit annotations', () => {
+
+        @ClassDecorator({value: 'parent'})
+        class Parent {
+        }
+
+        @ClassDecorator({value: 'child'})
+        class Child extends Parent {
+        }
+
+        class ChildNoDecorators extends Parent {}
+
+        class NoDecorators {}
+
+        // Check that metadata for Parent was not changed!
+        expect(reflector.annotations(Parent)).toEqual([new ClassDecorator({value: 'parent'})]);
+
+        expect(reflector.annotations(Child)).toEqual([
+          new ClassDecorator({value: 'parent'}), new ClassDecorator({value: 'child'})
+        ]);
+
+        expect(reflector.annotations(ChildNoDecorators)).toEqual([new ClassDecorator(
+            {value: 'parent'})]);
+
+        expect(reflector.annotations(NoDecorators)).toEqual([]);
+        expect(reflector.annotations(<any>{})).toEqual([]);
+        expect(reflector.annotations(<any>1)).toEqual([]);
+        expect(reflector.annotations(null !)).toEqual([]);
+      });
+
+      it('should inherit parameters', () => {
+        class A {}
+        class B {}
+        class C {}
+
+        // Note: We need the class decorator as well,
+        // as otherwise TS won't capture the ctor arguments!
+        @ClassDecorator({value: 'parent'})
+        class Parent {
+          constructor(@ParamDecorator('a') a: A, @ParamDecorator('b') b: B) {}
+        }
+
+        class Child extends Parent {}
+
+        @ClassDecorator({value: 'child'})
+        class ChildWithDecorator extends Parent {
+        }
+
+        @ClassDecorator({value: 'child'})
+        class ChildWithDecoratorAndProps extends Parent {
+          private x = 10;
+        }
+
+        // Note: We need the class decorator as well,
+        // as otherwise TS won't capture the ctor arguments!
+        @ClassDecorator({value: 'child'})
+        class ChildWithCtor extends Parent {
+          constructor(@ParamDecorator('c') c: C) { super(null !, null !); }
+        }
+
+        class ChildWithCtorNoDecorator extends Parent {
+          constructor(a: any, b: any, c: any) { super(null !, null !); }
+        }
+
+        class NoDecorators {}
+
+        // Check that metadata for Parent was not changed!
+        expect(reflector.parameters(Parent)).toEqual([
+          [A, new ParamDecorator('a')], [B, new ParamDecorator('b')]
+        ]);
+
+        expect(reflector.parameters(Child)).toEqual([
+          [A, new ParamDecorator('a')], [B, new ParamDecorator('b')]
+        ]);
+
+        expect(reflector.parameters(ChildWithDecorator)).toEqual([
+          [A, new ParamDecorator('a')], [B, new ParamDecorator('b')]
+        ]);
+
+        expect(reflector.parameters(ChildWithDecoratorAndProps)).toEqual([
+          [A, new ParamDecorator('a')], [B, new ParamDecorator('b')]
+        ]);
+
+        expect(reflector.parameters(ChildWithCtor)).toEqual([[C, new ParamDecorator('c')]]);
+
+        // If we have no decorator, we don't get metadata about the ctor params.
+        // But we should still get an array of the right length based on function.length.
+        expect(reflector.parameters(ChildWithCtorNoDecorator)).toEqual([
+          undefined, undefined, undefined
+        ] as any[]);  // TODO: Review use of `any` here (#19904)
+
+        expect(reflector.parameters(NoDecorators)).toEqual([]);
+        expect(reflector.parameters(<any>{})).toEqual([]);
+        expect(reflector.parameters(<any>1)).toEqual([]);
+        expect(reflector.parameters(null !)).toEqual([]);
+      });
+
+      it('should inherit property metadata', () => {
+        class A {}
+        class B {}
+        class C {}
+
+        class Parent {
+          // TODO(issue/24571): remove '!'.
+          @PropDecorator('a')
+          a !: A;
+          // TODO(issue/24571): remove '!'.
+          @PropDecorator('b1')
+          b !: B;
+        }
+
+        class Child extends Parent {
+          // TODO(issue/24571): remove '!'.
+          @PropDecorator('b2')
+          b !: B;
+          // TODO(issue/24571): remove '!'.
+          @PropDecorator('c')
+          c !: C;
+        }
+
+        class NoDecorators {}
+
+        // Check that metadata for Parent was not changed!
+        expect(reflector.propMetadata(Parent)).toEqual({
+          'a': [new PropDecorator('a')],
+          'b': [new PropDecorator('b1')],
+        });
+
+        expect(reflector.propMetadata(Child)).toEqual({
+          'a': [new PropDecorator('a')],
+          'b': [new PropDecorator('b1'), new PropDecorator('b2')],
+          'c': [new PropDecorator('c')]
+        });
+
+        expect(reflector.propMetadata(NoDecorators)).toEqual({});
+        expect(reflector.propMetadata(<any>{})).toEqual({});
+        expect(reflector.propMetadata(<any>1)).toEqual({});
+        expect(reflector.propMetadata(null !)).toEqual({});
+      });
+
+      it('should inherit lifecycle hooks', () => {
+        class Parent {
+          hook1() {}
+          hook2() {}
+        }
+
+        class Child extends Parent {
+          hook2() {}
+          hook3() {}
+        }
+
+        function hooks(symbol: any, names: string[]): boolean[] {
+          return names.map(name => reflector.hasLifecycleHook(symbol, name));
+        }
+
+        // Check that metadata for Parent was not changed!
+        expect(hooks(Parent, ['hook1', 'hook2', 'hook3'])).toEqual([true, true, false]);
+
+        expect(hooks(Child, ['hook1', 'hook2', 'hook3'])).toEqual([true, true, true]);
+      });
+
+    });
+
+    describe('inheritance with tsickle', () => {
+      it('should inherit annotations', () => {
+
+        class Parent {
+          static decorators = [{type: ClassDecorator, args: [{value: 'parent'}]}];
+        }
+
+        class Child extends Parent {
+          static decorators = [{type: ClassDecorator, args: [{value: 'child'}]}];
+        }
+
+        class ChildNoDecorators extends Parent {}
+
+        // Check that metadata for Parent was not changed!
+        expect(reflector.annotations(Parent)).toEqual([new ClassDecorator({value: 'parent'})]);
+
+        expect(reflector.annotations(Child)).toEqual([
+          new ClassDecorator({value: 'parent'}), new ClassDecorator({value: 'child'})
+        ]);
+
+        expect(reflector.annotations(ChildNoDecorators)).toEqual([new ClassDecorator(
+            {value: 'parent'})]);
+      });
+
+      it('should inherit parameters', () => {
+        class A {}
+        class B {}
+        class C {}
+
+        class Parent {
+          static ctorParameters = () =>
+              [{type: A, decorators: [{type: ParamDecorator, args: ['a']}]},
+               {type: B, decorators: [{type: ParamDecorator, args: ['b']}]},
+          ]
+        }
+
+        class Child extends Parent {}
+
+        class ChildWithCtor extends Parent {
+          static ctorParameters =
+              () => [{type: C, decorators: [{type: ParamDecorator, args: ['c']}]}, ]
+          constructor() { super(); }
+        }
+
+        // Check that metadata for Parent was not changed!
+        expect(reflector.parameters(Parent)).toEqual([
+          [A, new ParamDecorator('a')], [B, new ParamDecorator('b')]
+        ]);
+
+        expect(reflector.parameters(Child)).toEqual([
+          [A, new ParamDecorator('a')], [B, new ParamDecorator('b')]
+        ]);
+
+        expect(reflector.parameters(ChildWithCtor)).toEqual([[C, new ParamDecorator('c')]]);
+      });
+
+      it('should inherit property metadata', () => {
+        class A {}
+        class B {}
+        class C {}
+
+        class Parent {
+          static propDecorators: any = {
+            'a': [{type: PropDecorator, args: ['a']}],
+            'b': [{type: PropDecorator, args: ['b1']}],
+          };
+        }
+
+        class Child extends Parent {
+          static propDecorators: any = {
+            'b': [{type: PropDecorator, args: ['b2']}],
+            'c': [{type: PropDecorator, args: ['c']}],
+          };
+        }
+
+        // Check that metadata for Parent was not changed!
+        expect(reflector.propMetadata(Parent)).toEqual({
+          'a': [new PropDecorator('a')],
+          'b': [new PropDecorator('b1')],
+        });
+
+        expect(reflector.propMetadata(Child)).toEqual({
+          'a': [new PropDecorator('a')],
+          'b': [new PropDecorator('b1'), new PropDecorator('b2')],
+          'c': [new PropDecorator('c')]
+        });
+      });
+
+    });
+
+    describe('inheritance with es5 API', () => {
+      it('should inherit annotations', () => {
+
+        class Parent {
+          static annotations = [new ClassDecorator({value: 'parent'})];
+        }
+
+        class Child extends Parent {
+          static annotations = [new ClassDecorator({value: 'child'})];
+        }
+
+        class ChildNoDecorators extends Parent {}
+
+        // Check that metadata for Parent was not changed!
+        expect(reflector.annotations(Parent)).toEqual([new ClassDecorator({value: 'parent'})]);
+
+        expect(reflector.annotations(Child)).toEqual([
+          new ClassDecorator({value: 'parent'}), new ClassDecorator({value: 'child'})
+        ]);
+
+        expect(reflector.annotations(ChildNoDecorators)).toEqual([new ClassDecorator(
+            {value: 'parent'})]);
+      });
+
+      it('should inherit parameters', () => {
+        class A {}
+        class B {}
+        class C {}
+
+        class Parent {
+          static parameters = [
+            [A, new ParamDecorator('a')],
+            [B, new ParamDecorator('b')],
+          ];
+        }
+
+        class Child extends Parent {}
+
+        class ChildWithCtor extends Parent {
+          static parameters = [
+            [C, new ParamDecorator('c')],
+          ];
+          constructor() { super(); }
+        }
+
+        // Check that metadata for Parent was not changed!
+        expect(reflector.parameters(Parent)).toEqual([
+          [A, new ParamDecorator('a')], [B, new ParamDecorator('b')]
+        ]);
+
+        expect(reflector.parameters(Child)).toEqual([
+          [A, new ParamDecorator('a')], [B, new ParamDecorator('b')]
+        ]);
+
+        expect(reflector.parameters(ChildWithCtor)).toEqual([[C, new ParamDecorator('c')]]);
+      });
+
+      it('should inherit property metadata', () => {
+        class A {}
+        class B {}
+        class C {}
+
+        class Parent {
+          static propMetadata: any = {
+            'a': [new PropDecorator('a')],
+            'b': [new PropDecorator('b1')],
+          };
+        }
+
+        class Child extends Parent {
+          static propMetadata: any = {
+            'b': [new PropDecorator('b2')],
+            'c': [new PropDecorator('c')],
+          };
+        }
+
+        // Check that metadata for Parent was not changed!
+        expect(reflector.propMetadata(Parent)).toEqual({
+          'a': [new PropDecorator('a')],
+          'b': [new PropDecorator('b1')],
+        });
+
+        expect(reflector.propMetadata(Child)).toEqual({
+          'a': [new PropDecorator('a')],
+          'b': [new PropDecorator('b1'), new PropDecorator('b2')],
+          'c': [new PropDecorator('c')]
+        });
+      });
+    });
+  });
+}
diff --git a/packages/core/test/render3/BUILD.bazel b/packages/core/test/render3/BUILD.bazel
new file mode 100644
index 000000000000..d3e85704dd58
--- /dev/null
+++ b/packages/core/test/render3/BUILD.bazel
@@ -0,0 +1,72 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "render3_lib",
+    testonly = 1,
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*_perf.ts",
+            "domino.d.ts",
+            "load_domino.ts",
+            "jit_spec.ts",
+        ],
+    ),
+    deps = [
+        "//packages:types",
+        "//packages/animations",
+        "//packages/animations/browser",
+        "//packages/animations/browser/testing",
+        "//packages/common",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-browser",
+        "//packages/platform-browser/animations",
+        "//packages/platform-browser/testing",
+        "//packages/private/testing",
+    ],
+)
+
+ts_library(
+    name = "domino",
+    testonly = 1,
+    srcs = [
+        "domino.d.ts",
+        "load_domino.ts",
+    ],
+    deps = [
+        "//packages/platform-browser",
+        "//packages/platform-server",
+    ],
+)
+
+ts_library(
+    name = "render3_node_lib",
+    testonly = 1,
+    srcs = [],
+    deps = [
+        ":domino",
+        ":render3_lib",
+    ],
+)
+
+jasmine_node_test(
+    name = "render3",
+    bootstrap = [
+        "angular/packages/core/test/render3/load_domino",
+    ],
+    deps = [
+        ":render3_node_lib",
+    ],
+)
+
+ts_web_test_suite(
+    name = "render3_web",
+    deps = [
+        ":render3_lib",
+    ],
+)
diff --git a/packages/core/test/render3/Inherit_definition_feature_spec.ts b/packages/core/test/render3/Inherit_definition_feature_spec.ts
new file mode 100644
index 000000000000..a39437b603ac
--- /dev/null
+++ b/packages/core/test/render3/Inherit_definition_feature_spec.ts
@@ -0,0 +1,379 @@
+/**
+ * @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 {EventEmitter, Output} from '../../src/core';
+import {InheritDefinitionFeature} from '../../src/render3/features/inherit_definition_feature';
+import {DirectiveDefInternal, defineBase, defineComponent, defineDirective} from '../../src/render3/index';
+
+describe('InheritDefinitionFeature', () => {
+  it('should inherit lifecycle hooks', () => {
+    class SuperDirective {
+      ngOnInit() {}
+      ngOnDestroy() {}
+      ngAfterContentInit() {}
+      ngAfterContentChecked() {}
+      ngAfterViewInit() {}
+      ngAfterViewChecked() {}
+      ngDoCheck() {}
+    }
+
+    class SubDirective extends SuperDirective {
+      ngAfterViewInit() {}
+      ngAfterViewChecked() {}
+      ngDoCheck() {}
+
+      static ngDirectiveDef = defineDirective({
+        type: SubDirective,
+        selectors: [['', 'subDir', '']],
+        factory: () => new SubDirective(),
+        features: [InheritDefinitionFeature]
+      });
+    }
+
+    const finalDef = SubDirective.ngDirectiveDef as DirectiveDefInternal<any>;
+
+
+    expect(finalDef.onInit).toBe(SuperDirective.prototype.ngOnInit);
+    expect(finalDef.onDestroy).toBe(SuperDirective.prototype.ngOnDestroy);
+    expect(finalDef.afterContentChecked).toBe(SuperDirective.prototype.ngAfterContentChecked);
+    expect(finalDef.afterContentInit).toBe(SuperDirective.prototype.ngAfterContentInit);
+    expect(finalDef.afterViewChecked).toBe(SubDirective.prototype.ngAfterViewChecked);
+    expect(finalDef.afterViewInit).toBe(SubDirective.prototype.ngAfterViewInit);
+    expect(finalDef.doCheck).toBe(SubDirective.prototype.ngDoCheck);
+  });
+
+  it('should inherit inputs', () => {
+    // tslint:disable-next-line:class-as-namespace
+    class SuperDirective {
+      static ngDirectiveDef = defineDirective({
+        inputs: {
+          superFoo: ['foo', 'declaredFoo'],
+          superBar: 'bar',
+          superBaz: 'baz',
+        },
+        type: SuperDirective,
+        selectors: [['', 'superDir', '']],
+        factory: () => new SuperDirective(),
+      });
+    }
+
+    // tslint:disable-next-line:class-as-namespace
+    class SubDirective extends SuperDirective {
+      static ngDirectiveDef = defineDirective({
+        type: SubDirective,
+        inputs: {
+          subBaz: 'baz',
+          subQux: 'qux',
+        },
+        selectors: [['', 'subDir', '']],
+        factory: () => new SubDirective(),
+        features: [InheritDefinitionFeature]
+      });
+    }
+
+    const subDef = SubDirective.ngDirectiveDef as DirectiveDefInternal<any>;
+
+    expect(subDef.inputs).toEqual({
+      foo: 'superFoo',
+      bar: 'superBar',
+      baz: 'subBaz',
+      qux: 'subQux',
+    });
+    expect(subDef.declaredInputs).toEqual({
+      declaredFoo: 'superFoo',
+      bar: 'superBar',
+      baz: 'subBaz',
+      qux: 'subQux',
+    });
+  });
+
+  it('should inherit outputs', () => {
+    // tslint:disable-next-line:class-as-namespace
+    class SuperDirective {
+      static ngDirectiveDef = defineDirective({
+        outputs: {
+          superFoo: 'foo',
+          superBar: 'bar',
+          superBaz: 'baz',
+        },
+        type: SuperDirective,
+        selectors: [['', 'superDir', '']],
+        factory: () => new SuperDirective(),
+      });
+    }
+
+    // tslint:disable-next-line:class-as-namespace
+    class SubDirective extends SuperDirective {
+      static ngDirectiveDef = defineDirective({
+        type: SubDirective,
+        outputs: {
+          subBaz: 'baz',
+          subQux: 'qux',
+        },
+        selectors: [['', 'subDir', '']],
+        factory: () => new SubDirective(),
+        features: [InheritDefinitionFeature]
+      });
+    }
+
+    const subDef = SubDirective.ngDirectiveDef as DirectiveDefInternal<any>;
+
+    expect(subDef.outputs).toEqual({
+      foo: 'superFoo',
+      bar: 'superBar',
+      baz: 'subBaz',
+      qux: 'subQux',
+    });
+  });
+
+  it('should inherit inputs from ngBaseDefs along the way', () => {
+
+    class Class5 {
+      input5 = 'data, so data';
+
+      static ngBaseDef = defineBase({
+        inputs: {
+          input5: 'input5',
+        },
+      });
+    }
+
+    // tslint:disable-next-line:class-as-namespace
+    class Class4 extends Class5 {
+      input4 = 'hehe';
+
+      static ngDirectiveDef = defineDirective({
+        inputs: {
+          input4: 'input4',
+        },
+        type: Class4,
+        selectors: [['', 'superDir', '']],
+        factory: () => new Class4(),
+        features: [InheritDefinitionFeature],
+      });
+    }
+
+    class Class3 extends Class4 {}
+
+    class Class2 extends Class3 {
+      input3 = 'wee';
+
+      static ngBaseDef = defineBase({
+        inputs: {
+          input3: ['alias3', 'input3'],
+        }
+      }) as any;
+    }
+
+    // tslint:disable-next-line:class-as-namespace
+    class Class1 extends Class2 {
+      input1 = 'test';
+      input2 = 'whatever';
+
+      static ngDirectiveDef = defineDirective({
+        type: Class1,
+        inputs: {
+          input1: 'input1',
+          input2: 'input2',
+        },
+        selectors: [['', 'subDir', '']],
+        factory: () => new Class1(),
+        features: [InheritDefinitionFeature],
+      });
+    }
+
+    const subDef = Class1.ngDirectiveDef as DirectiveDefInternal<any>;
+
+    expect(subDef.inputs).toEqual({
+      input1: 'input1',
+      input2: 'input2',
+      alias3: 'input3',
+      input4: 'input4',
+      input5: 'input5',
+    });
+    expect(subDef.declaredInputs).toEqual({
+      input1: 'input1',
+      input2: 'input2',
+      input3: 'input3',
+      input4: 'input4',
+      input5: 'input5',
+    });
+  });
+
+  it('should inherit outputs from ngBaseDefs along the way', () => {
+
+    class Class5 {
+      output5 = 'data, so data';
+
+      static ngBaseDef = defineBase({
+        outputs: {
+          output5: 'alias5',
+        },
+      });
+    }
+
+    // tslint:disable-next-line:class-as-namespace
+    class Class4 extends Class5 {
+      output4 = 'hehe';
+
+      static ngDirectiveDef = defineDirective({
+        outputs: {
+          output4: 'alias4',
+        },
+        type: Class4,
+        selectors: [['', 'superDir', '']],
+        factory: () => new Class4(),
+        features: [InheritDefinitionFeature],
+      });
+    }
+
+    class Class3 extends Class4 {}
+
+    class Class2 extends Class3 {
+      output3 = 'wee';
+
+      static ngBaseDef = defineBase({
+        outputs: {
+          output3: 'alias3',
+        }
+      }) as any;
+    }
+
+    // tslint:disable-next-line:class-as-namespace
+    class Class1 extends Class2 {
+      output1 = 'test';
+      output2 = 'whatever';
+
+      static ngDirectiveDef = defineDirective({
+        type: Class1,
+        outputs: {
+          output1: 'alias1',
+          output2: 'alias2',
+        },
+        selectors: [['', 'subDir', '']],
+        factory: () => new Class1(),
+        features: [InheritDefinitionFeature],
+      });
+    }
+
+    const subDef = Class1.ngDirectiveDef as DirectiveDefInternal<any>;
+
+    expect(subDef.outputs).toEqual({
+      alias1: 'output1',
+      alias2: 'output2',
+      alias3: 'output3',
+      alias4: 'output4',
+      alias5: 'output5',
+    });
+  });
+
+  it('should compose hostBindings', () => {
+    const log: Array<[string, number, number]> = [];
+
+    // tslint:disable-next-line:class-as-namespace
+    class SuperDirective {
+      static ngDirectiveDef = defineDirective({
+        type: SuperDirective,
+        selectors: [['', 'superDir', '']],
+        hostBindings: (directiveIndex: number, elementIndex: number) => {
+          log.push(['super', directiveIndex, elementIndex]);
+        },
+        factory: () => new SuperDirective(),
+      });
+    }
+
+    // tslint:disable-next-line:class-as-namespace
+    class SubDirective extends SuperDirective {
+      static ngDirectiveDef = defineDirective({
+        type: SubDirective,
+        selectors: [['', 'subDir', '']],
+        hostBindings: (directiveIndex: number, elementIndex: number) => {
+          log.push(['sub', directiveIndex, elementIndex]);
+        },
+        factory: () => new SubDirective(),
+        features: [InheritDefinitionFeature]
+      });
+    }
+
+    const subDef = SubDirective.ngDirectiveDef as DirectiveDefInternal<any>;
+
+    subDef.hostBindings !(1, 2);
+
+    expect(log).toEqual([['super', 1, 2], ['sub', 1, 2]]);
+  });
+
+  it('should throw if inheriting a component from a directive', () => {
+    // tslint:disable-next-line:class-as-namespace
+    class SuperComponent {
+      static ngComponentDef = defineComponent({
+        type: SuperComponent,
+        template: () => {},
+        selectors: [['', 'superDir', '']],
+        factory: () => new SuperComponent()
+      });
+    }
+
+    expect(() => {
+      // tslint:disable-next-line:class-as-namespace
+      class SubDirective extends SuperComponent{static ngDirectiveDef = defineDirective({
+                                                  type: SubDirective,
+                                                  selectors: [['', 'subDir', '']],
+                                                  factory: () => new SubDirective(),
+                                                  features: [InheritDefinitionFeature]
+                                                });}
+    }).toThrowError('Directives cannot inherit Components');
+  });
+
+  it('should run inherited features', () => {
+    const log: any[] = [];
+
+    // tslint:disable-next-line:class-as-namespace
+    class SuperDirective {
+      static ngDirectiveDef = defineDirective({
+        type: SuperDirective,
+        selectors: [['', 'superDir', '']],
+        factory: () => new SuperDirective(),
+        features: [
+          (arg: any) => { log.push('super1', arg); },
+          (arg: any) => { log.push('super2', arg); },
+        ]
+      });
+    }
+
+    class SubDirective extends SuperDirective {
+      @Output()
+      baz = new EventEmitter();
+
+      @Output()
+      qux = new EventEmitter();
+
+      static ngDirectiveDef = defineDirective({
+        type: SubDirective,
+        selectors: [['', 'subDir', '']],
+        factory: () => new SubDirective(),
+        features: [InheritDefinitionFeature, (arg: any) => { log.push('sub1', arg); }]
+      });
+    }
+
+    const superDef = SuperDirective.ngDirectiveDef as DirectiveDefInternal<any>;
+    const subDef = SubDirective.ngDirectiveDef as DirectiveDefInternal<any>;
+
+    expect(log).toEqual([
+      'super1',
+      superDef,
+      'super2',
+      superDef,
+      'super1',
+      subDef,
+      'super2',
+      subDef,
+      'sub1',
+      subDef,
+    ]);
+  });
+});
diff --git a/packages/core/test/render3/basic_perf.ts b/packages/core/test/render3/basic_perf.ts
new file mode 100644
index 000000000000..b809ef7a4ac3
--- /dev/null
+++ b/packages/core/test/render3/basic_perf.ts
@@ -0,0 +1,76 @@
+/**
+ * @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 {defineComponent} from '../../src/render3/index';
+import {container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, text} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+import {document, renderComponent} from './render_util';
+
+describe('iv perf test', () => {
+
+  const count = 100000;
+  const noOfIterations = 10;
+
+  describe('render', () => {
+    for (let iteration = 0; iteration < noOfIterations; iteration++) {
+      it(`${iteration}. create ${count} divs in DOM`, () => {
+        const start = new Date().getTime();
+        const container = document.createElement('div');
+        for (let i = 0; i < count; i++) {
+          const div = document.createElement('div');
+          div.appendChild(document.createTextNode('-'));
+          container.appendChild(div);
+        }
+        const end = new Date().getTime();
+        log(`${count} DIVs in DOM`, (end - start) / count);
+      });
+
+      it(`${iteration}. create ${count} divs in Render3`, () => {
+        class Component {
+          static ngComponentDef = defineComponent({
+            type: Component,
+            selectors: [['div']],
+            template: function Template(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                container(0);
+              }
+              if (rf & RenderFlags.Update) {
+                containerRefreshStart(0);
+                {
+                  for (let i = 0; i < count; i++) {
+                    let rf0 = embeddedViewStart(0);
+                    {
+                      if (rf0 & RenderFlags.Create) {
+                        elementStart(0, 'div');
+                        text(1, '-');
+                        elementEnd();
+                      }
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            },
+            factory: () => new Component
+          });
+        }
+
+        const start = new Date().getTime();
+        renderComponent(Component);
+        const end = new Date().getTime();
+        log(`${count} DIVs in Render3`, (end - start) / count);
+      });
+    }
+  });
+});
+
+function log(text: string, duration: number) {
+  // tslint:disable-next-line:no-console
+  console.log(text, duration * 1000, 'ns');
+}
diff --git a/packages/core/test/render3/change_detection_spec.ts b/packages/core/test/render3/change_detection_spec.ts
new file mode 100644
index 000000000000..bde9dd461bee
--- /dev/null
+++ b/packages/core/test/render3/change_detection_spec.ts
@@ -0,0 +1,1083 @@
+/**
+ * @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 {withBody} from '@angular/private/testing';
+
+import {ChangeDetectionStrategy, ChangeDetectorRef, DoCheck, RendererType2} from '../../src/core';
+import {getRenderedText, whenRendered} from '../../src/render3/component';
+import {LifecycleHooksFeature, defineComponent, defineDirective, injectChangeDetectorRef} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, detectChanges, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, listener, markDirty, text, textBinding, tick} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+import {RElement, Renderer3, RendererFactory3} from '../../src/render3/interfaces/renderer';
+
+import {containerEl, createComponent, renderComponent, requestAnimationFrame} from './render_util';
+
+describe('change detection', () => {
+
+  describe('markDirty, detectChanges, whenRendered, getRenderedText', () => {
+    class MyComponent implements DoCheck {
+      value: string = 'works';
+      doCheckCount = 0;
+      ngDoCheck(): void { this.doCheckCount++; }
+
+      static ngComponentDef = defineComponent({
+        type: MyComponent,
+        selectors: [['my-comp']],
+        factory: () => new MyComponent(),
+        template: (rf: RenderFlags, ctx: MyComponent) => {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'span');
+            text(1);
+            elementEnd();
+          }
+          if (rf & RenderFlags.Update) {
+            textBinding(1, bind(ctx.value));
+          }
+        }
+      });
+    }
+
+    it('should mark a component dirty and schedule change detection', withBody('my-comp', () => {
+         const myComp = renderComponent(MyComponent, {hostFeatures: [LifecycleHooksFeature]});
+         expect(getRenderedText(myComp)).toEqual('works');
+         myComp.value = 'updated';
+         markDirty(myComp);
+         expect(getRenderedText(myComp)).toEqual('works');
+         requestAnimationFrame.flush();
+         expect(getRenderedText(myComp)).toEqual('updated');
+       }));
+
+    it('should detectChanges on a component', withBody('my-comp', () => {
+         const myComp = renderComponent(MyComponent, {hostFeatures: [LifecycleHooksFeature]});
+         expect(getRenderedText(myComp)).toEqual('works');
+         myComp.value = 'updated';
+         detectChanges(myComp);
+         expect(getRenderedText(myComp)).toEqual('updated');
+       }));
+
+    it('should detectChanges only once if markDirty is called multiple times',
+       withBody('my-comp', () => {
+         const myComp = renderComponent(MyComponent, {hostFeatures: [LifecycleHooksFeature]});
+         expect(getRenderedText(myComp)).toEqual('works');
+         expect(myComp.doCheckCount).toBe(1);
+         myComp.value = 'ignore';
+         markDirty(myComp);
+         myComp.value = 'updated';
+         markDirty(myComp);
+         expect(getRenderedText(myComp)).toEqual('works');
+         requestAnimationFrame.flush();
+         expect(getRenderedText(myComp)).toEqual('updated');
+         expect(myComp.doCheckCount).toBe(2);
+       }));
+
+    it('should notify whenRendered', withBody('my-comp', async() => {
+         const myComp = renderComponent(MyComponent, {hostFeatures: [LifecycleHooksFeature]});
+         await whenRendered(myComp);
+         myComp.value = 'updated';
+         markDirty(myComp);
+         setTimeout(requestAnimationFrame.flush, 0);
+         await whenRendered(myComp);
+         expect(getRenderedText(myComp)).toEqual('updated');
+       }));
+  });
+
+  describe('onPush', () => {
+    let comp: MyComponent;
+
+    class MyComponent implements DoCheck {
+      /* @Input() */
+      name = 'Nancy';
+      doCheckCount = 0;
+
+      ngDoCheck(): void { this.doCheckCount++; }
+
+      onClick() {}
+
+      static ngComponentDef = defineComponent({
+        type: MyComponent,
+        selectors: [['my-comp']],
+        factory: () => comp = new MyComponent(),
+        /**
+         * {{ doCheckCount }} - {{ name }}
+         * <button (click)="onClick()"></button>
+         */
+        template: (rf: RenderFlags, ctx: MyComponent) => {
+          if (rf & RenderFlags.Create) {
+            text(0);
+            elementStart(1, 'button');
+            {
+              listener('click', () => { ctx.onClick(); });
+            }
+            elementEnd();
+          }
+          textBinding(0, interpolation2('', ctx.doCheckCount, ' - ', ctx.name, ''));
+        },
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        inputs: {name: 'name'}
+      });
+    }
+
+    class MyApp {
+      name: string = 'Nancy';
+
+      static ngComponentDef = defineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: () => new MyApp(),
+        /** <my-comp [name]="name"></my-comp> */
+        template: (rf: RenderFlags, ctx: MyApp) => {
+          if (rf & RenderFlags.Create) {
+            element(0, 'my-comp');
+          }
+          if (rf & RenderFlags.Update) {
+            elementProperty(0, 'name', bind(ctx.name));
+          }
+        },
+        directives: () => [MyComponent]
+      });
+    }
+
+    it('should check OnPush components on initialization', () => {
+      const myApp = renderComponent(MyApp);
+      expect(getRenderedText(myApp)).toEqual('1 - Nancy');
+    });
+
+    it('should call doCheck even when OnPush components are not dirty', () => {
+      const myApp = renderComponent(MyApp);
+
+      tick(myApp);
+      expect(comp.doCheckCount).toEqual(2);
+
+      tick(myApp);
+      expect(comp.doCheckCount).toEqual(3);
+    });
+
+    it('should skip OnPush components in update mode when they are not dirty', () => {
+      const myApp = renderComponent(MyApp);
+
+      tick(myApp);
+      // doCheckCount is 2, but 1 should be rendered since it has not been marked dirty.
+      expect(getRenderedText(myApp)).toEqual('1 - Nancy');
+
+      tick(myApp);
+      // doCheckCount is 3, but 1 should be rendered since it has not been marked dirty.
+      expect(getRenderedText(myApp)).toEqual('1 - Nancy');
+    });
+
+    it('should check OnPush components in update mode when inputs change', () => {
+      const myApp = renderComponent(MyApp);
+
+      myApp.name = 'Bess';
+      tick(myApp);
+      expect(getRenderedText(myApp)).toEqual('2 - Bess');
+
+      myApp.name = 'George';
+      tick(myApp);
+      expect(getRenderedText(myApp)).toEqual('3 - George');
+
+      tick(myApp);
+      expect(getRenderedText(myApp)).toEqual('3 - George');
+    });
+
+    it('should check OnPush components in update mode when component events occur', () => {
+      const myApp = renderComponent(MyApp);
+      expect(getRenderedText(myApp)).toEqual('1 - Nancy');
+
+      const button = containerEl.querySelector('button') !;
+      button.click();
+      requestAnimationFrame.flush();
+      expect(getRenderedText(myApp)).toEqual('2 - Nancy');
+
+      tick(myApp);
+      expect(getRenderedText(myApp)).toEqual('2 - Nancy');
+    });
+
+    it('should not check OnPush components in update mode when parent events occur', () => {
+      function noop() {}
+
+      const ButtonParent = createComponent('button-parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'my-comp');
+          elementStart(1, 'button', ['id', 'parent']);
+          { listener('click', () => noop()); }
+          elementEnd();
+        }
+      }, [MyComponent]);
+
+      const buttonParent = renderComponent(ButtonParent);
+      expect(getRenderedText(buttonParent)).toEqual('1 - Nancy');
+
+      const button = containerEl.querySelector('button#parent') !;
+      (button as HTMLButtonElement).click();
+      requestAnimationFrame.flush();
+      expect(getRenderedText(buttonParent)).toEqual('1 - Nancy');
+    });
+
+    it('should check parent OnPush components in update mode when child events occur', () => {
+      let parent: ButtonParent;
+
+      class ButtonParent implements DoCheck {
+        doCheckCount = 0;
+        ngDoCheck(): void { this.doCheckCount++; }
+
+        static ngComponentDef = defineComponent({
+          type: ButtonParent,
+          selectors: [['button-parent']],
+          factory: () => parent = new ButtonParent(),
+          /** {{ doCheckCount }} - <my-comp></my-comp> */
+          template: (rf: RenderFlags, ctx: ButtonParent) => {
+            if (rf & RenderFlags.Create) {
+              text(0);
+              element(1, 'my-comp');
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(0, interpolation1('', ctx.doCheckCount, ' - '));
+            }
+          },
+          directives: () => [MyComponent],
+          changeDetection: ChangeDetectionStrategy.OnPush
+        });
+      }
+
+      const MyButtonApp = createComponent('my-button-app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'button-parent');
+        }
+      }, [ButtonParent]);
+
+      const myButtonApp = renderComponent(MyButtonApp);
+      expect(parent !.doCheckCount).toEqual(1);
+      expect(comp !.doCheckCount).toEqual(1);
+      expect(getRenderedText(myButtonApp)).toEqual('1 - 1 - Nancy');
+
+      tick(myButtonApp);
+      expect(parent !.doCheckCount).toEqual(2);
+      // parent isn't checked, so child doCheck won't run
+      expect(comp !.doCheckCount).toEqual(1);
+      expect(getRenderedText(myButtonApp)).toEqual('1 - 1 - Nancy');
+
+      const button = containerEl.querySelector('button');
+      button !.click();
+      requestAnimationFrame.flush();
+      expect(parent !.doCheckCount).toEqual(3);
+      expect(comp !.doCheckCount).toEqual(2);
+      expect(getRenderedText(myButtonApp)).toEqual('3 - 2 - Nancy');
+    });
+  });
+
+  describe('ChangeDetectorRef', () => {
+
+    describe('detectChanges()', () => {
+      let myComp: MyComp;
+      let dir: Dir;
+
+      class MyComp {
+        doCheckCount = 0;
+        name = 'Nancy';
+
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        ngDoCheck() { this.doCheckCount++; }
+
+        static ngComponentDef = defineComponent({
+          type: MyComp,
+          selectors: [['my-comp']],
+          factory: () => myComp = new MyComp(injectChangeDetectorRef()),
+          /** {{ name }} */
+          template: (rf: RenderFlags, ctx: MyComp) => {
+            if (rf & RenderFlags.Create) {
+              text(0);
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(0, bind(ctx.name));
+            }
+          },
+          changeDetection: ChangeDetectionStrategy.OnPush
+        });
+      }
+
+      class ParentComp {
+        doCheckCount = 0;
+
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        ngDoCheck() { this.doCheckCount++; }
+
+        static ngComponentDef = defineComponent({
+          type: ParentComp,
+          selectors: [['parent-comp']],
+          factory: () => new ParentComp(injectChangeDetectorRef()),
+          /**
+           * {{ doCheckCount}} -
+           * <my-comp></my-comp>
+           */
+          template: (rf: RenderFlags, ctx: ParentComp) => {
+            if (rf & RenderFlags.Create) {
+              text(0);
+              element(1, 'my-comp');
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(0, interpolation1('', ctx.doCheckCount, ' - '));
+            }
+          },
+          directives: () => [MyComp]
+        });
+      }
+
+      class Dir {
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        static ngDirectiveDef = defineDirective({
+          type: Dir,
+          selectors: [['', 'dir', '']],
+          factory: () => dir = new Dir(injectChangeDetectorRef())
+        });
+      }
+
+
+      it('should check the component view when called by component (even when OnPush && clean)',
+         () => {
+           const comp = renderComponent(MyComp, {hostFeatures: [LifecycleHooksFeature]});
+           expect(getRenderedText(comp)).toEqual('Nancy');
+
+           comp.name = 'Bess';  // as this is not an Input, the component stays clean
+           comp.cdr.detectChanges();
+           expect(getRenderedText(comp)).toEqual('Bess');
+         });
+
+      it('should NOT call component doCheck when called by a component', () => {
+        const comp = renderComponent(MyComp, {hostFeatures: [LifecycleHooksFeature]});
+        expect(comp.doCheckCount).toEqual(1);
+
+        // NOTE: in current Angular, detectChanges does not itself trigger doCheck, but you
+        // may see doCheck called in some cases bc of the extra CD run triggered by zone.js.
+        // It's important not to call doCheck to allow calls to detectChanges in that hook.
+        comp.cdr.detectChanges();
+        expect(comp.doCheckCount).toEqual(1);
+      });
+
+      it('should NOT check the component parent when called by a child component', () => {
+        const parentComp = renderComponent(ParentComp, {hostFeatures: [LifecycleHooksFeature]});
+        expect(getRenderedText(parentComp)).toEqual('1 - Nancy');
+
+        parentComp.doCheckCount = 100;
+        myComp.cdr.detectChanges();
+        expect(parentComp.doCheckCount).toEqual(100);
+        expect(getRenderedText(parentComp)).toEqual('1 - Nancy');
+      });
+
+      it('should check component children when called by component if dirty or check-always',
+         () => {
+           const parentComp = renderComponent(ParentComp, {hostFeatures: [LifecycleHooksFeature]});
+           expect(parentComp.doCheckCount).toEqual(1);
+
+           myComp.name = 'Bess';
+           parentComp.cdr.detectChanges();
+           expect(parentComp.doCheckCount).toEqual(1);
+           expect(myComp.doCheckCount).toEqual(2);
+           // OnPush child is not dirty, so its change isn't rendered.
+           expect(getRenderedText(parentComp)).toEqual('1 - Nancy');
+         });
+
+      it('should not group detectChanges calls (call every time)', () => {
+        const parentComp = renderComponent(ParentComp, {hostFeatures: [LifecycleHooksFeature]});
+        expect(myComp.doCheckCount).toEqual(1);
+
+        parentComp.cdr.detectChanges();
+        parentComp.cdr.detectChanges();
+        expect(myComp.doCheckCount).toEqual(3);
+      });
+
+      it('should check component view when called by directive on component node', () => {
+        /** <my-comp dir></my-comp> */
+        const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'my-comp', ['dir', '']);
+          }
+        }, [MyComp, Dir]);
+
+        const app = renderComponent(MyApp);
+        expect(getRenderedText(app)).toEqual('Nancy');
+
+        myComp.name = 'George';
+        dir !.cdr.detectChanges();
+        expect(getRenderedText(app)).toEqual('George');
+      });
+
+      it('should check host component when called by directive on element node', () => {
+        /**
+         * {{ name }}
+         * <div dir></div>
+         */
+        const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            text(0);
+            element(1, 'div', ['dir', '']);
+          }
+          if (rf & RenderFlags.Update) {
+            textBinding(1, bind(ctx.value));
+          }
+        }, [Dir]);
+
+        const app = renderComponent(MyApp);
+        app.value = 'Frank';
+        tick(app);
+        expect(getRenderedText(app)).toEqual('Frank');
+
+        app.value = 'Joe';
+        dir !.cdr.detectChanges();
+        expect(getRenderedText(app)).toEqual('Joe');
+      });
+
+      it('should check the host component when called from EmbeddedViewRef', () => {
+        class MyApp {
+          showing = true;
+          name = 'Amelia';
+
+          constructor(public cdr: ChangeDetectorRef) {}
+
+          static ngComponentDef = defineComponent({
+            type: MyApp,
+            selectors: [['my-app']],
+            factory: () => new MyApp(injectChangeDetectorRef()),
+            /**
+             * {{ name}}
+             * % if (showing) {
+           *   <div dir></div>
+           * % }
+             */
+            template: function(rf: RenderFlags, ctx: MyApp) {
+              if (rf & RenderFlags.Create) {
+                text(0);
+                container(1);
+              }
+              if (rf & RenderFlags.Update) {
+                textBinding(0, bind(ctx.name));
+                containerRefreshStart(1);
+                {
+                  if (ctx.showing) {
+                    let rf0 = embeddedViewStart(0);
+                    if (rf0 & RenderFlags.Create) {
+                      element(0, 'div', ['dir', '']);
+                    }
+                  }
+                  embeddedViewEnd();
+                }
+                containerRefreshEnd();
+              }
+            },
+            directives: [Dir]
+          });
+        }
+
+        const app = renderComponent(MyApp);
+        expect(getRenderedText(app)).toEqual('Amelia');
+
+        app.name = 'Emerson';
+        dir !.cdr.detectChanges();
+        expect(getRenderedText(app)).toEqual('Emerson');
+      });
+
+      it('should support call in ngOnInit', () => {
+        class DetectChangesComp {
+          value = 0;
+
+          constructor(public cdr: ChangeDetectorRef) {}
+
+          ngOnInit() {
+            this.value++;
+            this.cdr.detectChanges();
+          }
+
+          static ngComponentDef = defineComponent({
+            type: DetectChangesComp,
+            selectors: [['detect-changes-comp']],
+            factory: () => new DetectChangesComp(injectChangeDetectorRef()),
+            /** {{ value }} */
+            template: (rf: RenderFlags, ctx: DetectChangesComp) => {
+              if (rf & RenderFlags.Create) {
+                text(0);
+              }
+              if (rf & RenderFlags.Update) {
+                textBinding(0, bind(ctx.value));
+              }
+            }
+          });
+        }
+
+        const comp = renderComponent(DetectChangesComp, {hostFeatures: [LifecycleHooksFeature]});
+        expect(getRenderedText(comp)).toEqual('1');
+      });
+
+      it('should support call in ngDoCheck', () => {
+        class DetectChangesComp {
+          doCheckCount = 0;
+
+          constructor(public cdr: ChangeDetectorRef) {}
+
+          ngDoCheck() {
+            this.doCheckCount++;
+            this.cdr.detectChanges();
+          }
+
+          static ngComponentDef = defineComponent({
+            type: DetectChangesComp,
+            selectors: [['detect-changes-comp']],
+            factory: () => new DetectChangesComp(injectChangeDetectorRef()),
+            /** {{ doCheckCount }} */
+            template: (rf: RenderFlags, ctx: DetectChangesComp) => {
+              if (rf & RenderFlags.Create) {
+                text(0);
+              }
+              if (rf & RenderFlags.Update) {
+                textBinding(0, bind(ctx.doCheckCount));
+              }
+            }
+          });
+        }
+
+        const comp = renderComponent(DetectChangesComp, {hostFeatures: [LifecycleHooksFeature]});
+        expect(getRenderedText(comp)).toEqual('1');
+      });
+
+    });
+
+    describe('attach/detach', () => {
+      let comp: DetachedComp;
+
+      class MyApp {
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: () => new MyApp(injectChangeDetectorRef()),
+          /** <detached-comp></detached-comp> */
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'detached-comp');
+            }
+          },
+          directives: () => [DetachedComp]
+        });
+      }
+
+      class DetachedComp {
+        value = 'one';
+        doCheckCount = 0;
+
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        ngDoCheck() { this.doCheckCount++; }
+
+        static ngComponentDef = defineComponent({
+          type: DetachedComp,
+          selectors: [['detached-comp']],
+          factory: () => comp = new DetachedComp(injectChangeDetectorRef()),
+          /** {{ value }} */
+          template: (rf: RenderFlags, ctx: DetachedComp) => {
+            if (rf & RenderFlags.Create) {
+              text(0);
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(0, bind(ctx.value));
+            }
+          }
+        });
+      }
+
+      it('should not check detached components', () => {
+        const app = renderComponent(MyApp);
+        expect(getRenderedText(app)).toEqual('one');
+
+        comp.cdr.detach();
+
+        comp.value = 'two';
+        tick(app);
+        expect(getRenderedText(app)).toEqual('one');
+      });
+
+      it('should check re-attached components', () => {
+        const app = renderComponent(MyApp);
+        expect(getRenderedText(app)).toEqual('one');
+
+        comp.cdr.detach();
+        comp.value = 'two';
+
+        comp.cdr.reattach();
+        tick(app);
+        expect(getRenderedText(app)).toEqual('two');
+      });
+
+      it('should call lifecycle hooks on detached components', () => {
+        const app = renderComponent(MyApp);
+        expect(comp.doCheckCount).toEqual(1);
+
+        comp.cdr.detach();
+
+        tick(app);
+        expect(comp.doCheckCount).toEqual(2);
+      });
+
+      it('should check detached component when detectChanges is called', () => {
+        const app = renderComponent(MyApp);
+        expect(getRenderedText(app)).toEqual('one');
+
+        comp.cdr.detach();
+
+        comp.value = 'two';
+        detectChanges(comp);
+        expect(getRenderedText(app)).toEqual('two');
+      });
+
+      it('should not check detached component when markDirty is called', () => {
+        const app = renderComponent(MyApp);
+        expect(getRenderedText(app)).toEqual('one');
+
+        comp.cdr.detach();
+
+        comp.value = 'two';
+        markDirty(comp);
+        requestAnimationFrame.flush();
+
+        expect(getRenderedText(app)).toEqual('one');
+      });
+
+      it('should detach any child components when parent is detached', () => {
+        const app = renderComponent(MyApp);
+        expect(getRenderedText(app)).toEqual('one');
+
+        app.cdr.detach();
+
+        comp.value = 'two';
+        tick(app);
+        expect(getRenderedText(app)).toEqual('one');
+
+        app.cdr.reattach();
+
+        tick(app);
+        expect(getRenderedText(app)).toEqual('two');
+      });
+
+      it('should detach OnPush components properly', () => {
+        let onPushComp: OnPushComp;
+
+        class OnPushComp {
+          /** @Input() */
+          // TODO(issue/24571): remove '!'.
+          value !: string;
+
+          constructor(public cdr: ChangeDetectorRef) {}
+
+          static ngComponentDef = defineComponent({
+            type: OnPushComp,
+            selectors: [['on-push-comp']],
+            factory: () => onPushComp = new OnPushComp(injectChangeDetectorRef()),
+            /** {{ value }} */
+            template: (rf: RenderFlags, ctx: any) => {
+              if (rf & RenderFlags.Create) {
+                text(0);
+              }
+              if (rf & RenderFlags.Update) {
+                textBinding(0, bind(ctx.value));
+              }
+            },
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            inputs: {value: 'value'}
+          });
+        }
+
+        /** <on-push-comp [value]="value"></on-push-comp> */
+        const OnPushApp = createComponent('on-push-app', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'on-push-comp');
+          }
+          if (rf & RenderFlags.Update) {
+            elementProperty(0, 'value', bind(ctx.value));
+          }
+        }, [OnPushComp]);
+
+        const app = renderComponent(OnPushApp);
+        app.value = 'one';
+        tick(app);
+        expect(getRenderedText(app)).toEqual('one');
+
+        onPushComp !.cdr.detach();
+
+        app.value = 'two';
+        tick(app);
+        expect(getRenderedText(app)).toEqual('one');
+
+        onPushComp !.cdr.reattach();
+
+        tick(app);
+        expect(getRenderedText(app)).toEqual('two');
+      });
+
+    });
+
+    describe('markForCheck()', () => {
+      let comp: OnPushComp;
+
+      class OnPushComp {
+        value = 'one';
+
+        doCheckCount = 0;
+
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        ngDoCheck() { this.doCheckCount++; }
+
+        static ngComponentDef = defineComponent({
+          type: OnPushComp,
+          selectors: [['on-push-comp']],
+          factory: () => comp = new OnPushComp(injectChangeDetectorRef()),
+          /** {{ value }} */
+          template: (rf: RenderFlags, ctx: OnPushComp) => {
+            if (rf & RenderFlags.Create) {
+              text(0);
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(0, bind(ctx.value));
+            }
+          },
+          changeDetection: ChangeDetectionStrategy.OnPush
+        });
+      }
+
+      class OnPushParent {
+        value = 'one';
+
+        static ngComponentDef = defineComponent({
+          type: OnPushParent,
+          selectors: [['on-push-parent']],
+          factory: () => new OnPushParent(),
+          /**
+           * {{ value }} -
+           * <on-push-comp></on-push-comp>
+           */
+          template: (rf: RenderFlags, ctx: OnPushParent) => {
+            if (rf & RenderFlags.Create) {
+              text(0);
+              element(1, 'on-push-comp');
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(0, interpolation1('', ctx.value, ' - '));
+            }
+          },
+          directives: () => [OnPushComp],
+          changeDetection: ChangeDetectionStrategy.OnPush
+        });
+      }
+
+      it('should schedule check on OnPush components', () => {
+        const parent = renderComponent(OnPushParent);
+        expect(getRenderedText(parent)).toEqual('one - one');
+
+        comp.value = 'two';
+        tick(parent);
+        expect(getRenderedText(parent)).toEqual('one - one');
+
+        comp.cdr.markForCheck();
+        requestAnimationFrame.flush();
+        expect(getRenderedText(parent)).toEqual('one - two');
+      });
+
+      it('should only run change detection once with multiple calls to markForCheck', () => {
+        renderComponent(OnPushParent);
+        expect(comp.doCheckCount).toEqual(1);
+
+        comp.cdr.markForCheck();
+        comp.cdr.markForCheck();
+        comp.cdr.markForCheck();
+        comp.cdr.markForCheck();
+        comp.cdr.markForCheck();
+        requestAnimationFrame.flush();
+
+        expect(comp.doCheckCount).toEqual(2);
+      });
+
+      it('should schedule check on ancestor OnPush components', () => {
+        const parent = renderComponent(OnPushParent);
+        expect(getRenderedText(parent)).toEqual('one - one');
+
+        parent.value = 'two';
+        tick(parent);
+        expect(getRenderedText(parent)).toEqual('one - one');
+
+        comp.cdr.markForCheck();
+        requestAnimationFrame.flush();
+        expect(getRenderedText(parent)).toEqual('two - one');
+
+      });
+
+      it('should schedule check on OnPush components in embedded views', () => {
+        class EmbeddedViewParent {
+          value = 'one';
+          showing = true;
+
+          static ngComponentDef = defineComponent({
+            type: EmbeddedViewParent,
+            selectors: [['embedded-view-parent']],
+            factory: () => new EmbeddedViewParent(),
+            /**
+             * {{ value }} -
+             * % if (ctx.showing) {
+             *   <on-push-comp></on-push-comp>
+             * % }
+             */
+            template: (rf: RenderFlags, ctx: any) => {
+              if (rf & RenderFlags.Create) {
+                text(0);
+                container(1);
+              }
+              if (rf & RenderFlags.Update) {
+                textBinding(0, interpolation1('', ctx.value, ' - '));
+                containerRefreshStart(1);
+                {
+                  if (ctx.showing) {
+                    let rf0 = embeddedViewStart(0);
+                    if (rf0 & RenderFlags.Create) {
+                      element(0, 'on-push-comp');
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            },
+            directives: () => [OnPushComp],
+            changeDetection: ChangeDetectionStrategy.OnPush
+          });
+        }
+
+        const parent = renderComponent(EmbeddedViewParent);
+        expect(getRenderedText(parent)).toEqual('one - one');
+
+        comp.value = 'two';
+        tick(parent);
+        expect(getRenderedText(parent)).toEqual('one - one');
+
+        comp.cdr.markForCheck();
+        requestAnimationFrame.flush();
+        expect(getRenderedText(parent)).toEqual('one - two');
+
+        parent.value = 'two';
+        tick(parent);
+        expect(getRenderedText(parent)).toEqual('one - two');
+
+        comp.cdr.markForCheck();
+        requestAnimationFrame.flush();
+        expect(getRenderedText(parent)).toEqual('two - two');
+      });
+
+      // TODO(kara): add test for dynamic views once bug fix is in
+    });
+
+    describe('checkNoChanges', () => {
+      let comp: NoChangesComp;
+
+      class NoChangesComp {
+        value = 1;
+        doCheckCount = 0;
+        contentCheckCount = 0;
+        viewCheckCount = 0;
+
+        ngDoCheck() { this.doCheckCount++; }
+
+        ngAfterContentChecked() { this.contentCheckCount++; }
+
+        ngAfterViewChecked() { this.viewCheckCount++; }
+
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        static ngComponentDef = defineComponent({
+          type: NoChangesComp,
+          selectors: [['no-changes-comp']],
+          factory: () => comp = new NoChangesComp(injectChangeDetectorRef()),
+          template: (rf: RenderFlags, ctx: NoChangesComp) => {
+            if (rf & RenderFlags.Create) {
+              text(0);
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(0, bind(ctx.value));
+            }
+          }
+        });
+      }
+
+      class AppComp {
+        value = 1;
+
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        static ngComponentDef = defineComponent({
+          type: AppComp,
+          selectors: [['app-comp']],
+          factory: () => new AppComp(injectChangeDetectorRef()),
+          /**
+           * {{ value }} -
+           * <no-changes-comp></no-changes-comp>
+           */
+          template: (rf: RenderFlags, ctx: AppComp) => {
+            if (rf & RenderFlags.Create) {
+              text(0);
+              element(1, 'no-changes-comp');
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(0, interpolation1('', ctx.value, ' - '));
+            }
+          },
+          directives: () => [NoChangesComp]
+        });
+      }
+
+      it('should throw if bindings in current view have changed', () => {
+        const comp = renderComponent(NoChangesComp, {hostFeatures: [LifecycleHooksFeature]});
+
+        expect(() => comp.cdr.checkNoChanges()).not.toThrow();
+
+        comp.value = 2;
+        expect(() => comp.cdr.checkNoChanges())
+            .toThrowError(
+                /ExpressionChangedAfterItHasBeenCheckedError: .+ Previous value: '1'. Current value: '2'/gi);
+      });
+
+      it('should throw if interpolations in current view have changed', () => {
+        const app = renderComponent(AppComp);
+
+        expect(() => app.cdr.checkNoChanges()).not.toThrow();
+
+        app.value = 2;
+        expect(() => app.cdr.checkNoChanges())
+            .toThrowError(
+                /ExpressionChangedAfterItHasBeenCheckedError: .+ Previous value: '1'. Current value: '2'/gi);
+      });
+
+      it('should throw if bindings in children of current view have changed', () => {
+        const app = renderComponent(AppComp);
+
+        expect(() => app.cdr.checkNoChanges()).not.toThrow();
+
+        comp.value = 2;
+        expect(() => app.cdr.checkNoChanges())
+            .toThrowError(
+                /ExpressionChangedAfterItHasBeenCheckedError: .+ Previous value: '1'. Current value: '2'/gi);
+      });
+
+      it('should throw if bindings in embedded view have changed', () => {
+        class EmbeddedViewApp {
+          value = 1;
+          showing = true;
+
+          constructor(public cdr: ChangeDetectorRef) {}
+
+          static ngComponentDef = defineComponent({
+            type: EmbeddedViewApp,
+            selectors: [['embedded-view-app']],
+            factory: () => new EmbeddedViewApp(injectChangeDetectorRef()),
+            /**
+             * % if (showing) {
+             *  {{ value }}
+             * %}
+             */
+            template: (rf: RenderFlags, ctx: EmbeddedViewApp) => {
+              if (rf & RenderFlags.Create) {
+                container(0);
+              }
+              if (rf & RenderFlags.Update) {
+                containerRefreshStart(0);
+                {
+                  if (ctx.showing) {
+                    let rf0 = embeddedViewStart(0);
+                    if (rf0 & RenderFlags.Create) {
+                      text(0);
+                    }
+                    if (rf0 & RenderFlags.Update) {
+                      textBinding(0, bind(ctx.value));
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            }
+          });
+        }
+
+        const app = renderComponent(EmbeddedViewApp);
+
+        expect(() => app.cdr.checkNoChanges()).not.toThrow();
+
+        app.value = 2;
+        expect(() => app.cdr.checkNoChanges())
+            .toThrowError(
+                /ExpressionChangedAfterItHasBeenCheckedError: .+ Previous value: '1'. Current value: '2'/gi);
+      });
+
+      it('should NOT call lifecycle hooks', () => {
+        const app = renderComponent(AppComp);
+        expect(comp.doCheckCount).toEqual(1);
+        expect(comp.contentCheckCount).toEqual(1);
+        expect(comp.viewCheckCount).toEqual(1);
+
+        comp.value = 2;
+        expect(() => app.cdr.checkNoChanges()).toThrow();
+        expect(comp.doCheckCount).toEqual(1);
+        expect(comp.contentCheckCount).toEqual(1);
+        expect(comp.viewCheckCount).toEqual(1);
+      });
+
+      it('should NOT throw if bindings in ancestors of current view have changed', () => {
+        const app = renderComponent(AppComp);
+
+        app.value = 2;
+        expect(() => comp.cdr.checkNoChanges()).not.toThrow();
+      });
+
+    });
+
+  });
+
+  it('should call begin and end when the renderer factory implements them', () => {
+    const log: string[] = [];
+
+    const testRendererFactory: RendererFactory3 = {
+      createRenderer: (hostElement: RElement | null, rendererType: RendererType2 | null):
+                          Renderer3 => { return document; },
+      begin: () => log.push('begin'),
+      end: () => log.push('end'),
+    };
+
+    class MyComponent {
+      get value(): string {
+        log.push('detect changes');
+        return 'works';
+      }
+
+      static ngComponentDef = defineComponent({
+        type: MyComponent,
+        selectors: [['my-comp']],
+        factory: () => new MyComponent(),
+        template: (rf: RenderFlags, ctx: MyComponent) => {
+          if (rf & RenderFlags.Create) {
+            text(0);
+          }
+          if (rf & RenderFlags.Update) {
+            textBinding(0, bind(ctx.value));
+          }
+        }
+      });
+    }
+
+    const myComp = renderComponent(MyComponent, {rendererFactory: testRendererFactory});
+    expect(getRenderedText(myComp)).toEqual('works');
+    expect(log).toEqual(['begin', 'detect changes', 'end']);
+  });
+
+});
diff --git a/packages/core/test/render3/common_integration_spec.ts b/packages/core/test/render3/common_integration_spec.ts
new file mode 100644
index 000000000000..cd3a85c0f4ba
--- /dev/null
+++ b/packages/core/test/render3/common_integration_spec.ts
@@ -0,0 +1,909 @@
+/**
+ * @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 {NgForOfContext} from '@angular/common';
+
+import {getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from '../../src/render3/di';
+import {AttributeMarker, defineComponent} from '../../src/render3/index';
+import {bind, container, elementEnd, elementProperty, elementStart, getCurrentView, interpolation1, interpolation2, interpolation3, interpolationV, listener, load, nextContext, restoreView, text, textBinding} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+
+import {NgForOf, NgIf, NgTemplateOutlet} from './common_with_def';
+import {ComponentFixture} from './render_util';
+
+describe('@angular/common integration', () => {
+
+  describe('NgForOf', () => {
+    it('should update a loop', () => {
+      function liTemplate(rf: RenderFlags, ctx: NgForOfContext<string>) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'li');
+          { text(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item = ctx.$implicit;
+          textBinding(1, bind(item));
+        }
+      }
+
+      class MyApp {
+        items: string[] = ['first', 'second'];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // <ul>
+          //   <li *ngFor="let item of items">{{item}}</li>
+          // </ul>
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              elementStart(0, 'ul');
+              { container(1, liTemplate, undefined, ['ngForOf', '']); }
+              elementEnd();
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(1, 'ngForOf', bind(ctx.items));
+            }
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<ul><li>first</li><li>second</li></ul>');
+
+      // change detection cycle, no model changes
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>first</li><li>second</li></ul>');
+
+      // remove the last item
+      fixture.component.items.length = 1;
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>first</li></ul>');
+
+      // change an item
+      fixture.component.items[0] = 'one';
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>one</li></ul>');
+
+      // add an item
+      fixture.component.items.push('two');
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>one</li><li>two</li></ul>');
+    });
+
+    it('should support ngForOf context variables', () => {
+      function liTemplate(rf: RenderFlags, ctx: NgForOfContext<string>) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'li');
+          { text(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item = ctx.$implicit;
+          textBinding(1, interpolation3('', ctx.index, ' of ', ctx.count, ': ', item, ''));
+        }
+      }
+
+      class MyApp {
+        items: string[] = ['first', 'second'];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // <ul>
+          //   <li *ngFor="let item of items; index as index; count as count">{{index}} of
+          //   {{count}}: {{item}}</li>
+          // </ul>
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              elementStart(0, 'ul');
+              { container(1, liTemplate, undefined, ['ngForOf', '']); }
+              elementEnd();
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(1, 'ngForOf', bind(ctx.items));
+            }
+
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<ul><li>0 of 2: first</li><li>1 of 2: second</li></ul>');
+
+      fixture.component.items.splice(1, 0, 'middle');
+      fixture.update();
+      expect(fixture.html)
+          .toEqual('<ul><li>0 of 3: first</li><li>1 of 3: middle</li><li>2 of 3: second</li></ul>');
+    });
+
+
+    it('should retain parent view listeners when the NgFor destroy views', () => {
+
+      function liTemplate(rf: RenderFlags, ctx: NgForOfContext<string>) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'li');
+          { text(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item = ctx.$implicit;
+          textBinding(1, interpolation1('', item, ''));
+        }
+      }
+
+      class MyApp {
+        private _data: number[] = [1, 2, 3];
+        items: number[] = [];
+
+        toggle() {
+          if (this.items.length) {
+            this.items = [];
+          } else {
+            this.items = this._data;
+          }
+        }
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // <button (click)="toggle()">Toggle List</button>
+          // <ul>
+          //   <li *ngFor="let item of items">{{index}}</li>
+          // </ul>
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              elementStart(0, 'button');
+              {
+                listener('click', function() { return ctx.toggle(); });
+                text(1, 'Toggle List');
+              }
+              elementEnd();
+              elementStart(2, 'ul');
+              { container(3, liTemplate, undefined, ['ngForOf', '']); }
+              elementEnd();
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(3, 'ngForOf', bind(ctx.items));
+            }
+
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      const button = fixture.hostElement.querySelector('button') !;
+
+      expect(fixture.html).toEqual('<button>Toggle List</button><ul></ul>');
+
+      // this will fill the list
+      fixture.component.toggle();
+      fixture.update();
+      expect(fixture.html)
+          .toEqual('<button>Toggle List</button><ul><li>1</li><li>2</li><li>3</li></ul>');
+
+      button.click();
+      fixture.update();
+
+      expect(fixture.html).toEqual('<button>Toggle List</button><ul></ul>');
+
+      button.click();
+      fixture.update();
+      expect(fixture.html)
+          .toEqual('<button>Toggle List</button><ul><li>1</li><li>2</li><li>3</li></ul>');
+    });
+
+    it('should support multiple levels of embedded templates', () => {
+      /**
+       * <ul>
+       *   <li *ngFor="let row of items">
+       *      <span *ngFor="let cell of row.data">{{cell}} - {{ row.value }} - {{ items.length }}
+       * </span>
+       *   </li>
+       * </ul>
+       */
+      class MyApp {
+        items: any[] = [{data: ['1', '2'], value: 'first'}, {data: ['3', '4'], value: 'second'}];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              elementStart(0, 'ul');
+              { container(1, liTemplate, null, ['ngForOf', '']); }
+              elementEnd();
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(1, 'ngForOf', bind(ctx.items));
+            }
+
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      function liTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'li');
+          { container(1, spanTemplate, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const row = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(row.data));
+        }
+      }
+
+      function spanTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { text(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const cell = ctx.$implicit;
+          const row = nextContext().$implicit as any;
+          const app = nextContext() as any;
+          textBinding(1, interpolation3('', cell, ' - ', row.value, ' - ', app.items.length, ''));
+        }
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+
+      // Change detection cycle, no model changes
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li><span>1 - first - 2</span><span>2 - first - 2</span></li><li><span>3 - second - 2</span><span>4 - second - 2</span></li></ul>');
+
+      // Remove the last item
+      fixture.component.items.length = 1;
+      fixture.update();
+      expect(fixture.html)
+          .toEqual('<ul><li><span>1 - first - 1</span><span>2 - first - 1</span></li></ul>');
+
+      // Change an item
+      fixture.component.items[0].data[0] = 'one';
+      fixture.update();
+      expect(fixture.html)
+          .toEqual('<ul><li><span>one - first - 1</span><span>2 - first - 1</span></li></ul>');
+
+      // Add an item
+      fixture.component.items[1] = {data: ['three', '4'], value: 'third'};
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li><span>one - first - 2</span><span>2 - first - 2</span></li><li><span>three - third - 2</span><span>4 - third - 2</span></li></ul>');
+    });
+
+    it('should support multiple levels of embedded templates with listeners', () => {
+      /**
+       * <div *ngFor="let row of items">
+       *    <p *ngFor="let cell of row.data">
+       *        <span (click)="onClick(row.value, name)"></span>
+       *        {{ row.value }} - {{ name }}
+       *    </p>
+       * </div>
+       */
+      class MyApp {
+        items: any[] = [{data: ['1'], value: 'first'}];
+        name = 'app';
+        events: string[] = [];
+
+        onClick(value: string, name: string) { this.events.push(value, name); }
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              container(0, divTemplate, null, ['ngForOf', '']);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(0, 'ngForOf', bind(ctx.items));
+            }
+
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      function divTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { container(1, pTemplate, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const row = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(row.data));
+        }
+      }
+
+      function pTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          const state = getCurrentView();
+          elementStart(0, 'p');
+          {
+            elementStart(1, 'span');
+            {
+              listener('click', () => {
+                restoreView(state);
+                const row = nextContext().$implicit as any;
+                const app = nextContext();
+                app.onClick(row.value, app.name);
+              });
+            }
+            elementEnd();
+            text(2);
+          }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const row = nextContext().$implicit as any;
+          const app = nextContext() as any;
+          textBinding(2, interpolation2('', row.value, ' - ', app.name, ''));
+        }
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+
+      fixture.update();
+      expect(fixture.html).toEqual('<div><p><span></span>first - app</p></div>');
+
+      const span = fixture.hostElement.querySelector('span') as any;
+      span.click();
+      expect(fixture.component.events).toEqual(['first', 'app']);
+
+      fixture.component.name = 'new name';
+      fixture.update();
+      expect(fixture.html).toEqual('<div><p><span></span>first - new name</p></div>');
+
+      span.click();
+      expect(fixture.component.events).toEqual(['first', 'app', 'first', 'new name']);
+    });
+
+    it('should support skipping contexts', () => {
+      /**
+       * <div *ngFor="let row of items">
+       *    <div *ngFor="let cell of row">
+       *       <span *ngFor="let span of cell.data">
+       *           {{ cell.value }} - {{ name }}
+       *       </span>
+       *    </div>
+       * </div>
+       */
+      class MyApp {
+        name = 'app';
+        items: any[] = [
+          [
+            // row
+            {value: 'one', data: ['1', '2']}  // cell
+          ],
+          [{value: 'two', data: ['3', '4']}]
+        ];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              container(0, divTemplate, null, ['ngForOf', '']);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(0, 'ngForOf', bind(ctx.items));
+            }
+
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      function divTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { container(1, innerDivTemplate, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const row = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(row));
+        }
+      }
+
+      function innerDivTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { container(1, spanTemplate, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const cell = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(cell.data));
+        }
+      }
+
+      function spanTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { text(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const cell = nextContext().$implicit as any;
+          const app = nextContext(2) as any;
+          textBinding(1, interpolation2('', cell.value, ' - ', app.name, ''));
+        }
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              `<div><div><span>one - app</span><span>one - app</span></div></div><div><div><span>two - app</span><span>two - app</span></div></div>`);
+
+      fixture.component.name = 'other';
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              `<div><div><span>one - other</span><span>one - other</span></div></div><div><div><span>two - other</span><span>two - other</span></div></div>`);
+    });
+
+    it('should support context for 9+ levels of embedded templates', () => {
+      /**
+       *
+       * <span *ngFor="let item0 of items">
+       *     <span *ngFor="let item1 of item0.data">
+       *        <span *ngFor="let item2 of item1.data">
+       *            <span *ngFor="let item3 of item2.data">
+       *                <span *ngFor="let item4 of item3.data">
+       *                    <span *ngFor="let item5 of item4.data">
+       *                        <span *ngFor="let item6 of item5.data">
+       *                            <span *ngFor="let item7 of item6.data">
+       *                                <span *ngFor="let item8 of item7.data">
+       *                                    {{ item8 }} - {{ item7.value }} - {{ item6.value }}...
+       *                                 </span>
+       *                            </span>
+       *                        </span>
+       *                    </span>
+       *                </span>
+       *            </span>
+       *        </span>
+       *     </span>
+       * </span>
+       */
+      class MyApp {
+        value = 'App';
+        items: any[] = [
+          {
+            // item0
+            data: [{
+              // item1
+              data: [{
+                // item2
+                data: [{
+                  // item3
+                  data: [{
+                    // item4
+                    data: [{
+                      // item5
+                      data: [{
+                        // item6
+                        data: [{
+                          // item7
+                          data: [
+                            '1', '2'  // item8
+                          ],
+                          value: 'h'
+                        }],
+                        value: 'g'
+                      }],
+                      value: 'f'
+                    }],
+                    value: 'e'
+                  }],
+                  value: 'd'
+                }],
+                value: 'c'
+              }],
+              value: 'b'
+            }],
+            value: 'a'
+          },
+          {
+            // item0
+            data: [{
+              // item1
+              data: [{
+                // item2
+                data: [{
+                  // item3
+                  data: [{
+                    // item4
+                    data: [{
+                      // item5
+                      data: [{
+                        // item6
+                        data: [{
+                          // item7
+                          data: [
+                            '3', '4'  // item8
+                          ],
+                          value: 'H'
+                        }],
+                        value: 'G'
+                      }],
+                      value: 'F'
+                    }],
+                    value: 'E'
+                  }],
+                  value: 'D'
+                }],
+                value: 'C'
+              }],
+              value: 'B'
+            }],
+            value: 'A'
+          }
+        ];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              container(0, itemTemplate0, null, ['ngForOf', '']);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(0, 'ngForOf', bind(ctx.items));
+            }
+
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      function itemTemplate0(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { container(1, itemTemplate1, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item0 = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(item0.data));
+        }
+      }
+
+      function itemTemplate1(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { container(1, itemTemplate2, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item1 = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(item1.data));
+        }
+      }
+
+      function itemTemplate2(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { container(1, itemTemplate3, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item2 = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(item2.data));
+        }
+      }
+
+      function itemTemplate3(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { container(1, itemTemplate4, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item3 = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(item3.data));
+        }
+      }
+
+      function itemTemplate4(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { container(1, itemTemplate5, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item4 = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(item4.data));
+        }
+      }
+
+      function itemTemplate5(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { container(1, itemTemplate6, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item5 = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(item5.data));
+        }
+      }
+
+      function itemTemplate6(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { container(1, itemTemplate7, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item6 = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(item6.data));
+        }
+      }
+
+      function itemTemplate7(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { container(1, itemTemplate8, null, ['ngForOf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const item7 = ctx.$implicit as any;
+          elementProperty(1, 'ngForOf', bind(item7.data));
+        }
+      }
+
+      function itemTemplate8(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { text(1); }
+          elementEnd();
+        }
+
+        if (rf & RenderFlags.Update) {
+          const value = ctx.$implicit;
+          const item7 = nextContext().$implicit;
+          const item6 = nextContext().$implicit;
+          const item5 = nextContext().$implicit;
+          const item4 = nextContext().$implicit;
+          const item3 = nextContext().$implicit;
+          const item2 = nextContext().$implicit;
+          const item1 = nextContext().$implicit;
+          const item0 = nextContext().$implicit;
+          const myApp = nextContext();
+          textBinding(1, interpolationV([
+                        '',  value,       '.', item7.value, '.', item6.value, '.', item5.value,
+                        '.', item4.value, '.', item3.value, '.', item2.value, '.', item1.value,
+                        '.', item0.value, '.', myApp.value, ''
+                      ]));
+        }
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+
+      expect(fixture.html)
+          .toEqual(
+              '<span><span><span><span><span><span><span><span>' +
+              '<span>1.h.g.f.e.d.c.b.a.App</span>' +
+              '<span>2.h.g.f.e.d.c.b.a.App</span>' +
+              '</span></span></span></span></span></span></span></span>' +
+              '<span><span><span><span><span><span><span><span>' +
+              '<span>3.H.G.F.E.D.C.B.A.App</span>' +
+              '<span>4.H.G.F.E.D.C.B.A.App</span>' +
+              '</span></span></span></span></span></span></span></span>');
+    });
+
+  });
+
+  describe('ngIf', () => {
+    it('should support sibling ngIfs', () => {
+      class MyApp {
+        showing = true;
+        valueOne = 'one';
+        valueTwo = 'two';
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          /**
+           * <div *ngIf="showing">{{ valueOne }}</div>
+           * <div *ngIf="showing">{{ valueTwo }}</div>
+           */
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              container(0, templateOne, undefined, ['ngIf', '']);
+              container(1, templateTwo, undefined, ['ngIf', '']);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(0, 'ngIf', bind(ctx.showing));
+              elementProperty(1, 'ngIf', bind(ctx.showing));
+            }
+
+          },
+          directives: () => [NgIf]
+        });
+      }
+
+      function templateOne(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { text(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const myApp = nextContext();
+          textBinding(1, bind(myApp.valueOne));
+        }
+      }
+
+      function templateTwo(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { text(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const myApp = nextContext();
+          textBinding(1, bind(myApp.valueTwo));
+        }
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<div>one</div><div>two</div>');
+
+      fixture.component.valueOne = '$$one$$';
+      fixture.component.valueTwo = '$$two$$';
+      fixture.update();
+      expect(fixture.html).toEqual('<div>$$one$$</div><div>$$two$$</div>');
+    });
+
+    it('should handle nested ngIfs with no intermediate context vars', () => {
+      /**
+       * <div *ngIf="showing">
+       *     <div *ngIf="outerShowing">
+       *         <div *ngIf="innerShowing'>
+       *           {{ name }}
+       *         </div>
+       *     </div>
+       * </div>
+       */
+      class AppComponent {
+        showing = true;
+        outerShowing = true;
+        innerShowing = true;
+        name = 'App name';
+
+        static ngComponentDef = defineComponent({
+          type: AppComponent,
+          factory: () => new AppComponent(),
+          selectors: [['my-app']],
+          template: (rf: RenderFlags, ctx: AppComponent) => {
+            if (rf & RenderFlags.Create) {
+              container(0, divTemplate, undefined, ['ngIf', '']);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(0, 'ngIf', bind(ctx.showing));
+            }
+
+          },
+          directives: () => [NgIf]
+        });
+      }
+
+      function divTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { container(1, outerDivTemplate, undefined, ['ngIf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const app = nextContext();
+          elementProperty(1, 'ngIf', bind(app.outerShowing));
+        }
+      }
+
+      function outerDivTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { container(1, innerDivTemplate, undefined, ['ngIf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const app = nextContext(2);
+          elementProperty(1, 'ngIf', bind(app.innerShowing));
+        }
+      }
+
+      function innerDivTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { text(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const app = nextContext(3);
+          textBinding(1, bind(app.name));
+        }
+      }
+
+      const fixture = new ComponentFixture(AppComponent);
+      expect(fixture.html).toEqual(`<div><div><div>App name</div></div></div>`);
+
+      fixture.component.name = 'Other name';
+      fixture.update();
+      expect(fixture.html).toEqual(`<div><div><div>Other name</div></div></div>`);
+    });
+
+  });
+
+  describe('NgTemplateOutlet', () => {
+
+    it('should create and remove embedded views', () => {
+
+      class MyApp {
+        showing = false;
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          /**
+           * <ng-template #tpl>from tpl</ng-template>
+           * <ng-template [ngTemplateOutlet]="showing ? tpl : null"></ng-template>
+           */
+          template: (rf: RenderFlags, myApp: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              container(0, (rf1: RenderFlags) => {
+                if (rf1 & RenderFlags.Create) {
+                  text(0, 'from tpl');
+                }
+              }, undefined, undefined, ['tpl', '']);
+              container(2, undefined, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
+            }
+            if (rf & RenderFlags.Update) {
+              const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+              elementProperty(2, 'ngTemplateOutlet', bind(myApp.showing ? tplRef : null));
+            }
+          },
+          directives: () => [NgTemplateOutlet]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('');
+
+      fixture.component.showing = true;
+      fixture.update();
+      expect(fixture.html).toEqual('from tpl');
+
+      fixture.component.showing = false;
+      fixture.update();
+      expect(fixture.html).toEqual('');
+    });
+
+  });
+});
diff --git a/packages/core/test/render3/common_with_def.ts b/packages/core/test/render3/common_with_def.ts
new file mode 100644
index 000000000000..b030cd9ddf84
--- /dev/null
+++ b/packages/core/test/render3/common_with_def.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
+ */
+
+import {NgForOf as NgForOfDef, NgIf as NgIfDef, NgTemplateOutlet as NgTemplateOutletDef} from '@angular/common';
+import {IterableDiffers} from '@angular/core';
+
+import {DirectiveType, NgOnChangesFeature, defineDirective, directiveInject, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
+
+export const NgForOf: DirectiveType<NgForOfDef<any>> = NgForOfDef as any;
+export const NgIf: DirectiveType<NgIfDef> = NgIfDef as any;
+export const NgTemplateOutlet: DirectiveType<NgTemplateOutletDef> = NgTemplateOutletDef as any;
+
+NgForOf.ngDirectiveDef = defineDirective({
+  type: NgForOfDef,
+  selectors: [['', 'ngForOf', '']],
+  factory: () => new NgForOfDef(
+               injectViewContainerRef(), injectTemplateRef(), directiveInject(IterableDiffers)),
+  inputs: {
+    ngForOf: 'ngForOf',
+    ngForTrackBy: 'ngForTrackBy',
+    ngForTemplate: 'ngForTemplate',
+  }
+});
+
+(NgIf as any).ngDirectiveDef = defineDirective({
+  type: NgIfDef,
+  selectors: [['', 'ngIf', '']],
+  factory: () => new NgIfDef(injectViewContainerRef(), injectTemplateRef()),
+  inputs: {ngIf: 'ngIf', ngIfThen: 'ngIfThen', ngIfElse: 'ngIfElse'}
+});
+
+(NgTemplateOutlet as any).ngDirectiveDef = defineDirective({
+  type: NgTemplateOutletDef,
+  selectors: [['', 'ngTemplateOutlet', '']],
+  factory: () => new NgTemplateOutletDef(injectViewContainerRef()),
+  features: [NgOnChangesFeature],
+  inputs:
+      {ngTemplateOutlet: 'ngTemplateOutlet', ngTemplateOutletContext: 'ngTemplateOutletContext'}
+});
diff --git a/packages/core/test/render3/compiler_canonical/back_patch_types_specs.ts b/packages/core/test/render3/compiler_canonical/back_patch_types_specs.ts
new file mode 100644
index 000000000000..1f8a28d77cd3
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/back_patch_types_specs.ts
@@ -0,0 +1,136 @@
+/**
+ * @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, ContentChild, Directive, Injectable, Injector, Input, NgModule, NgModuleFactory, NgModuleRef, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef, defineInjector} from '../../../src/core';
+import * as r3 from '../../../src/render3/index';
+
+const details_elided = {
+  type: Object,
+} as any;
+export type $ComponentDef$ = any;
+
+///////////
+// Lib A - Compiled pre-Ivy
+//    "enableIvy": false
+//////////
+
+// BEGIN FILE: node_modules/libA/module.ts (Compiled without Ivy)
+@Component({})
+export class LibAComponent {
+}
+
+@NgModule({declarations: [LibAComponent], imports: []})
+export class LibAModule {
+}
+// END FILE: node_modules/libA/module.ts
+// BEGIN FILE: node_modules/libA/module.metadata.json
+// Abridged version of metadata
+const node_modules_libA_module_metadata = {
+  'LibAModule': {
+    refs: ['LibAComponent'],
+    constructorDes: [],
+  },
+  'LibAComponent': {
+    constructorDes: [],
+  }
+};
+// END FILE: node_modules/libA/module.metadata.json
+
+
+///////////
+// Lib B - Compiled with Ivy
+//    "enableIvy": true
+//////////
+
+
+// BEGIN FILE: node_modules/libB/module.ts (Compiled with Ivy)
+@Component({})
+export class LibBComponent {
+  // COMPILER GENERATED
+  static ngComponentDef: $ComponentDef$ = r3.defineComponent(details_elided);
+}
+
+@NgModule({declarations: [LibAComponent], imports: []})
+export class LibBModule {
+  // COMPILER GENERATED
+  static ngInjectorDef = defineInjector(details_elided);
+}
+// END FILE: node_modules/libB/module.ts
+// BEGIN FILE: node_modules/libB/module.metadata.json
+// Abridged version of metadata
+// Must still generate metadata in case it should be consumed with non-ivy application
+// Must mark the metadata with `hasNgDef: true` so that Ivy knows to ignore it.
+const node_modules_libB_module_metadata = {
+  'LibBModule': {refs: ['LibBComponent'], constructorDes: [], hasNgDef: true},
+  'LibBComponent': {constructorDes: [], hasNgDef: true}
+};
+// END FILE: node_modules/libA/module.metadata.json
+
+
+
+///////////
+// Lib B - Compiled with Ivy
+//    "enableIvy": true
+//    "enableIvyBackPatch": true
+//////////
+
+
+// BEGIN FILE: src/app.ts (Compiled with Ivy)
+@Component({})
+export class AppComponent {
+  // COMPILER GENERATED
+  static ngComponentDef: $ComponentDef$ = r3.defineComponent(details_elided);
+}
+
+@NgModule({declarations: [LibAComponent], imports: []})
+export class AppModule {
+  // COMPILER GENERATED
+  static ngInjectorDef = defineInjector(details_elided);
+}
+// END FILE: src/app.ts
+
+// BEGIN FILE: src/main.ts
+// platformBrowserDynamic().bootstrapModule(AppModule);
+// CLI rewrites it later to:
+// platformBrowser().bootstrapModuleFactory(AppModuleFactory);
+// END FILE: src/main.ts
+
+// BEGIN FILE: src/app.ngfactory.ts
+function ngBackPatch_node_modules_libB_module() {
+  ngBackPatch_node_modules_libB_module_LibAComponent();
+  ngBackPatch_node_modules_libB_module_LibAModule();
+}
+
+function ngBackPatch_node_modules_libB_module_LibAComponent() {
+  (LibAComponent as any).ngComponentDef = r3.defineComponent(details_elided);
+}
+
+function ngBackPatch_node_modules_libB_module_LibAModule() {
+  (LibAModule as any).ngInjectorDef = defineInjector(details_elided);
+}
+
+export const AppModuleFactory: NgModuleFactory<AppModule>&{patchedDeps: boolean} = {
+  moduleType: AppModule,
+  patchedDeps: false,
+  create(parentInjector: Injector | null): NgModuleRef<AppModule>{
+      this.patchedDeps && ngBackPatch_node_modules_libB_module() && (this.patchedDeps = true);
+      return details_elided;}
+};
+// BEGIN FILE: src/app.ngfactory.ts
+
+
+// ISSUE: I don't think this works. The issue is that multiple modules get flattened into single
+// module and hence we can't patch transitively.
+// ISSUE: can non-ivy @NgModule import Ivy @NgModule? I assume no, since the flattening of modules
+// happens during compilation.
+
+// BEGIN FILE: src/main.ts
+// platformBrowserDynamic().bootstrapModule(AppModule);
+// CLI rewrites it to:
+// platformBrowser().bootstrapModuleFactory(AppModuleFactory);
+// END FILE: src/main.ts
diff --git a/packages/core/test/render3/compiler_canonical/component_directives_spec.ts b/packages/core/test/render3/compiler_canonical/component_directives_spec.ts
new file mode 100644
index 000000000000..8667fd53dc6e
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/component_directives_spec.ts
@@ -0,0 +1,918 @@
+/**
+ * @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 {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {ComponentDefInternal} from '../../../src/render3/interfaces/definition';
+import {renderComponent, toHtml} from '../render_util';
+
+
+
+/// See: `normative.md`
+describe('components & directives', () => {
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+  type $any$ = any;
+  type $number$ = number;
+
+  it('should instantiate directives', () => {
+    type $ChildComponent$ = ChildComponent;
+    type $MyComponent$ = MyComponent;
+
+    const log: string[] = [];
+    @Component({selector: 'child', template: 'child-view'})
+    class ChildComponent {
+      constructor() { log.push('ChildComponent'); }
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: ChildComponent,
+        selectors: [['child']],
+        factory: function ChildComponent_Factory() { return new ChildComponent(); },
+        template: function ChildComponent_Template(rf: $RenderFlags$, ctx: $ChildComponent$) {
+          if (rf & 1) {
+            $r3$.ɵT(0, 'child-view');
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    @Directive({
+      selector: '[some-directive]',
+    })
+    class SomeDirective {
+      constructor() { log.push('SomeDirective'); }
+      // NORMATIVE
+      static ngDirectiveDef = $r3$.ɵdefineDirective({
+        type: SomeDirective,
+        selectors: [['', 'some-directive', '']],
+        factory: () => new SomeDirective(),
+      });
+      // /NORMATIVE
+    }
+
+    // Important: keep arrays outside of function to not create new instances.
+    // NORMATIVE
+    const $e0_attrs$ = ['some-directive', ''];
+    // /NORMATIVE
+
+    @Component({selector: 'my-component', template: `<child some-directive></child>!`})
+    class MyComponent {
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: () => new MyComponent(),
+        template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
+          if (rf & 1) {
+            $r3$.ɵEe(0, 'child', $e0_attrs$);
+            $r3$.ɵT(1, '!');
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    // NON-NORMATIVE (done by defineNgModule)
+    (MyComponent.ngComponentDef as ComponentDefInternal<any>).directiveDefs = [
+      (ChildComponent.ngComponentDef as ComponentDefInternal<any>), SomeDirective.ngDirectiveDef
+    ];
+    // /NON-NORMATIVE
+
+    expect(renderComp(MyComponent)).toEqual('<child some-directive="">child-view</child>!');
+    expect(log).toEqual(['ChildComponent', 'SomeDirective']);
+  });
+
+  it('should support host bindings', () => {
+    type $MyApp$ = MyApp;
+
+    @Directive({selector: '[hostBindingDir]'})
+    class HostBindingDir {
+      @HostBinding('id') dirId = 'some id';
+
+      // NORMATIVE
+      static ngDirectiveDef = $r3$.ɵdefineDirective({
+        type: HostBindingDir,
+        selectors: [['', 'hostBindingDir', '']],
+        factory: function HostBindingDir_Factory() { return new HostBindingDir(); },
+        hostBindings: function HostBindingDir_HostBindings(dirIndex: $number$, elIndex: $number$) {
+          $r3$.ɵp(elIndex, 'id', $r3$.ɵb($r3$.ɵd<HostBindingDir>(dirIndex).dirId));
+        }
+      });
+      // /NORMATIVE
+    }
+
+    const $e0_attrs$ = ['hostBindingDir', ''];
+
+    @Component({
+      selector: 'my-app',
+      template: `
+        <div hostBindingDir></div>
+      `
+    })
+    class MyApp {
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: function MyApp_Factory() { return new MyApp(); },
+        template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵEe(0, 'div', $e0_attrs$);
+          }
+        }
+      });
+    }
+
+    // NON-NORMATIVE (done by defineNgModule)
+    (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+        [HostBindingDir.ngDirectiveDef];
+    // /NON-NORMATIVE
+
+    expect(renderComp(MyApp)).toEqual(`<div hostbindingdir="" id="some id"></div>`);
+  });
+
+  it('should support host listeners', () => {
+    type $MyApp$ = MyApp;
+
+    @Directive({selector: '[hostlistenerDir]'})
+    class HostListenerDir {
+      @HostListener('click')
+      onClick() {}
+
+      // NORMATIVE
+      static ngDirectiveDef = $r3$.ɵdefineDirective({
+        selectors: [['', 'hostListenerDir', '']],
+        type: HostListenerDir,
+        factory: function HostListenerDir_Factory() {
+          const $dir$ = new HostListenerDir();
+          $r3$.ɵL('click', function HostListenerDir_click_Handler(event: any) { $dir$.onClick(); });
+          return $dir$;
+        },
+      });
+      // /NORMATIVE
+    }
+
+    const $e0_attrs$ = ['hostListenerDir', ''];
+
+    @Component({
+      selector: 'my-app',
+      template: `
+        <button hostListenerDir>Click</button>
+      `
+    })
+    class MyApp {
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: function MyApp_Factory() { return new MyApp(); },
+        template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'button', $e0_attrs$);
+            $r3$.ɵT(1, 'Click');
+            $r3$.ɵe();
+          }
+        }
+      });
+    }
+
+    // NON-NORMATIVE (done by defineNgModule)
+    (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+        [HostListenerDir.ngDirectiveDef];
+    // /NON-NORMATIVE
+
+    expect(renderComp(MyApp)).toEqual(`<button hostlistenerdir="">Click</button>`);
+  });
+
+
+  it('should support setting of host attributes', () => {
+    type $MyApp$ = MyApp;
+
+    @Directive({selector: '[hostAttributeDir]', host: {'role': 'listbox'}})
+    class HostAttributeDir {
+      // NORMATIVE
+      static ngDirectiveDef = $r3$.ɵdefineDirective({
+        selectors: [['', 'hostAttributeDir', '']],
+        type: HostAttributeDir,
+        factory: function HostAttributeDir_Factory() { return new HostAttributeDir(); },
+        attributes: ['role', 'listbox']
+      });
+      // /NORMATIVE
+    }
+
+    const $e0_attrs$ = ['hostAttributeDir', ''];
+
+    @Component({
+      selector: 'my-app',
+      template: `
+        <div hostAttributeDir></div>
+      `
+    })
+    class MyApp {
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: function MyApp_Factory() { return new MyApp(); },
+        template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵEe(0, 'div', $e0_attrs$);
+          }
+        }
+      });
+    }
+
+    // NON-NORMATIVE (done by defineNgModule)
+    (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+        [HostAttributeDir.ngDirectiveDef];
+    // /NON-NORMATIVE
+
+    expect(renderComp(MyApp)).toEqual(`<div hostattributedir="" role="listbox"></div>`);
+  });
+
+  it('should support bindings of host attributes', () => {
+    type $MyApp$ = MyApp;
+
+    @Directive({selector: '[hostBindingDir]'})
+    class HostBindingDir {
+      @HostBinding('attr.aria-label') label = 'some label';
+
+      // NORMATIVE
+      static ngDirectiveDef = $r3$.ɵdefineDirective({
+        type: HostBindingDir,
+        selectors: [['', 'hostBindingDir', '']],
+        factory: function HostBindingDir_Factory() { return new HostBindingDir(); },
+        hostBindings: function HostBindingDir_HostBindings(dirIndex: $number$, elIndex: $number$) {
+          $r3$.ɵa(elIndex, 'aria-label', $r3$.ɵb($r3$.ɵd<HostBindingDir>(dirIndex).label));
+        }
+      });
+      // /NORMATIVE
+    }
+
+    const $e0_attrs$ = ['hostBindingDir', ''];
+
+    @Component({
+      selector: 'my-app',
+      template: `
+        <div hostBindingDir></div>
+      `
+    })
+    class MyApp {
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: function MyApp_Factory() { return new MyApp(); },
+        template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵEe(0, 'div', $e0_attrs$);
+          }
+        }
+      });
+    }
+
+    // NON-NORMATIVE (done by defineNgModule)
+    (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+        [HostBindingDir.ngDirectiveDef];
+    // /NON-NORMATIVE
+
+    expect(renderComp(MyApp)).toEqual(`<div aria-label="some label" hostbindingdir=""></div>`);
+  });
+
+  it('should support onPush components', () => {
+    type $MyApp$ = MyApp;
+    type $MyComp$ = MyComp;
+
+    @Component({
+      selector: 'my-comp',
+      template: `
+        {{ name }}
+      `,
+      changeDetection: ChangeDetectionStrategy.OnPush
+    })
+    class MyComp {
+      // TODO(issue/24571): remove '!'.
+      @Input() name !: string;
+
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComp,
+        selectors: [['my-comp']],
+        factory: function MyComp_Factory() { return new MyComp(); },
+        template: function MyComp_Template(rf: $RenderFlags$, ctx: $MyComp$) {
+          if (rf & 1) {
+            $r3$.ɵT(0);
+          }
+          $r3$.ɵt(0, $r3$.ɵb(ctx.name));
+        },
+        inputs: {name: 'name'},
+        changeDetection: ChangeDetectionStrategy.OnPush
+      });
+      // /NORMATIVE
+    }
+
+    @Component({
+      selector: 'my-app',
+      template: `
+        <my-comp [name]="name"></my-comp>
+      `
+    })
+    class MyApp {
+      name = 'some name';
+
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: function MyApp_Factory() { return new MyApp(); },
+        template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵEe(0, 'my-comp');
+          }
+          if (rf & 2) {
+            $r3$.ɵp(0, 'name', $r3$.ɵb(ctx.name));
+          }
+        }
+      });
+    }
+
+    // NON-NORMATIVE (done by defineNgModule)
+    (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+        [(MyComp.ngComponentDef as ComponentDefInternal<any>)];
+    // /NON-NORMATIVE
+
+    expect(renderComp(MyApp)).toEqual(`<my-comp>some name</my-comp>`);
+  });
+
+  xit('should support structural directives', () => {
+    type $MyComponent$ = MyComponent;
+
+    const log: string[] = [];
+    @Directive({
+      selector: '[if]',
+    })
+    class IfDirective {
+      constructor(template: TemplateRef<any>) { log.push('ifDirective'); }
+      // NORMATIVE
+      static ngDirectiveDef = $r3$.ɵdefineDirective({
+        type: IfDirective,
+        selectors: [['', 'if', '']],
+        factory: () => new IfDirective($r3$.ɵinjectTemplateRef()),
+      });
+      // /NORMATIVE
+    }
+
+    // Important: keep arrays outside of function to not create new instances.
+    // NORMATIVE
+    const $e0_locals$ = ['foo', ''];
+    // /NORMATIVE
+
+    @Component(
+        {selector: 'my-component', template: `<ul #foo><li *if>{{salutation}} {{foo}}</li></ul>`})
+    class MyComponent {
+      salutation = 'Hello';
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: () => new MyComponent(),
+        template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'ul', null, $e0_locals$);
+            $r3$.ɵC(2, C1, '', ['if', '']);
+            $r3$.ɵe();
+          }
+          let $foo$ = $r3$.ɵld<any>(1);
+          if (rf & 2) {
+            $r3$.ɵcR(2);
+            $r3$.ɵcr();
+          }
+
+          function C1(rf1: $RenderFlags$, ctx1: $any$) {
+            if (rf1 & 1) {
+              $r3$.ɵE(0, 'li');
+              $r3$.ɵT(1);
+              $r3$.ɵe();
+            }
+            if (rf1 & 2) {
+              $r3$.ɵt(1, $r3$.ɵi2('', ctx.salutation, ' ', $foo$, ''));
+            }
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    expect(renderComp(MyComponent)).toEqual('<child some-directive="">child-view</child>!');
+    expect(log).toEqual(['ChildComponent', 'SomeDirective']);
+  });
+
+  describe('value composition', () => {
+    type $MyArrayComp$ = MyArrayComp;
+
+    @Component({
+      selector: 'my-array-comp',
+      template: `
+          {{ names[0] }} {{ names[1] }}
+      `
+    })
+    class MyArrayComp {
+      // TODO(issue/24571): remove '!'.
+      @Input() names !: string[];
+
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyArrayComp,
+        selectors: [['my-array-comp']],
+        factory: function MyArrayComp_Factory() { return new MyArrayComp(); },
+        template: function MyArrayComp_Template(rf: $RenderFlags$, ctx: $MyArrayComp$) {
+          if (rf & 1) {
+            $r3$.ɵT(0);
+          }
+          if (rf & 2) {
+            $r3$.ɵt(0, $r3$.ɵi2('', ctx.names[0], ' ', ctx.names[1], ''));
+          }
+        },
+        inputs: {names: 'names'}
+      });
+    }
+
+    it('should support array literals of constants', () => {
+      type $MyApp$ = MyApp;
+
+      // NORMATIVE
+      const $e0_arr$ = ['Nancy', 'Bess'];
+      // /NORMATIVE
+
+      @Component({
+        selector: 'my-app',
+        template: `
+        <my-array-comp [names]="['Nancy', 'Bess']"></my-array-comp>
+      `
+      })
+      class MyApp {
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: function MyApp_Factory() { return new MyApp(); },
+          template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'my-array-comp');
+            }
+            if (rf & 2) {
+              $r3$.ɵp(0, 'names', rf & 1 ? $e0_arr$ : $r3$.ɵNC);
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      // NON-NORMATIVE (done by defineNgModule)
+      (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+          [(MyArrayComp.ngComponentDef as ComponentDefInternal<any>)];
+      // /NON-NORMATIVE
+
+      expect(renderComp(MyApp)).toEqual(`<my-array-comp>Nancy Bess</my-array-comp>`);
+    });
+
+    it('should support array literals of constants inside function calls', () => {
+      type $MyApp$ = MyApp;
+
+      // NORMATIVE
+      const $e0_ff$ = () => ['Nancy', 'Bess'];
+      // /NORMATIVE
+
+      @Component({
+        selector: 'my-app',
+        template: `
+          <my-array-comp [names]="someFn(['Nancy', 'Bess'])"></my-array-comp>
+        `
+      })
+      class MyApp {
+        someFn(arr: string[]): string[] {
+          arr[0] = arr[0].toUpperCase();
+          return arr;
+        }
+
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: function MyApp_Factory() { return new MyApp(); },
+          template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'my-array-comp');
+              $r3$.ɵrS(1);
+            }
+            if (rf & 2) {
+              $r3$.ɵp(0, 'names', $r3$.ɵb(ctx.someFn($r3$.ɵf0(1, $e0_ff$))));
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      // NON-NORMATIVE (done by defineNgModule)
+      (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+          [(MyArrayComp.ngComponentDef as ComponentDefInternal<any>)];
+      // /NON-NORMATIVE
+
+      expect(renderComp(MyApp)).toEqual(`<my-array-comp>NANCY Bess</my-array-comp>`);
+    });
+
+    it('should support array literals of constants inside expressions', () => {
+      type $MyApp$ = MyApp;
+      type $MyComp$ = MyComp;
+
+      @Component({selector: 'my-comp', template: `{{ num }}`})
+      class MyComp {
+        // TODO(issue/24571): remove '!'.
+        num !: number;
+
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComp,
+          selectors: [['my-comp']],
+          factory: function MyComp_Factory() { return new MyComp(); },
+          template: function MyComp_Template(rf: $RenderFlags$, ctx: $MyComp$) {
+            if (rf & 1) {
+              $r3$.ɵT(0);
+            }
+            if (rf & 2) {
+              // clang-format wants to break this line by changing the second 'ɵ' to an invalid
+              // unicode sequence.
+              // clang-format off
+              $r3$.ɵt(0, $r3$.ɵb(ctx.num));
+              // clang-format on
+            }
+          },
+          inputs: {num: 'num'}
+        });
+      }
+
+      // NORMATIVE
+      const $e0_ff$ = () => ['Nancy', 'Bess'];
+      // /NORMATIVE
+
+      @Component({
+        selector: 'my-app',
+        template: `
+          <my-comp [num]="['Nancy', 'Bess'].length + 1"></my-comp>
+        `
+      })
+      class MyApp {
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: function MyApp_Factory() { return new MyApp(); },
+          template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'my-comp');
+              $r3$.ɵrS(1);
+            }
+            if (rf & 2) {
+              $r3$.ɵp(0, 'num', $r3$.ɵb($r3$.ɵf0(1, $e0_ff$).length + 1));
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      // NON-NORMATIVE (done by defineNgModule)
+      (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+          [(MyComp.ngComponentDef as ComponentDefInternal<any>)];
+      // /NON-NORMATIVE
+
+      expect(renderComp(MyApp)).toEqual(`<my-comp>3</my-comp>`);
+    });
+
+
+    it('should support array literals', () => {
+      type $MyApp$ = MyApp;
+
+      // NORMATIVE
+      const $e0_ff$ = (v: any) => ['Nancy', v];
+      // /NORMATIVE
+
+      @Component({
+        selector: 'my-app',
+        template: `
+        <my-array-comp [names]="['Nancy', customName]"></my-array-comp>
+      `
+      })
+      class MyApp {
+        customName = 'Bess';
+
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: function MyApp_Factory() { return new MyApp(); },
+          template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'my-array-comp');
+              $r3$.ɵrS(2);
+            }
+            if (rf & 2) {
+              $r3$.ɵp(0, 'names', $r3$.ɵb($r3$.ɵf1(2, $e0_ff$, ctx.customName)));
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      // NON-NORMATIVE (done by defineNgModule)
+      (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+          [(MyArrayComp.ngComponentDef as ComponentDefInternal<any>)];
+      // /NON-NORMATIVE
+
+      expect(renderComp(MyApp)).toEqual(`<my-array-comp>Nancy Bess</my-array-comp>`);
+    });
+
+    it('should support 9+ bindings in array literals', () => {
+      type $MyComp$ = MyComp;
+
+      @Component({
+        selector: 'my-comp',
+        template: `
+          {{ names[0] }}
+          {{ names[1] }}
+          {{ names[3] }}
+          {{ names[4] }}
+          {{ names[5] }}
+          {{ names[6] }}
+          {{ names[7] }}
+          {{ names[8] }}
+          {{ names[9] }}
+          {{ names[10] }}
+          {{ names[11] }}
+        `
+      })
+      class MyComp {
+        // TODO(issue/24571): remove '!'.
+        @Input() names !: string[];
+
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComp,
+          selectors: [['my-comp']],
+          factory: function MyComp_Factory() { return new MyComp(); },
+          template: function MyComp_Template(rf: $RenderFlags$, ctx: $MyComp$) {
+            if (rf & 1) {
+              $r3$.ɵT(0);
+              $r3$.ɵT(1);
+              $r3$.ɵT(2);
+              $r3$.ɵT(3);
+              $r3$.ɵT(4);
+              $r3$.ɵT(5);
+              $r3$.ɵT(6);
+              $r3$.ɵT(7);
+              $r3$.ɵT(8);
+              $r3$.ɵT(9);
+              $r3$.ɵT(10);
+              $r3$.ɵT(11);
+            }
+            if (rf & 2) {
+              $r3$.ɵt(0, $r3$.ɵb(ctx.names[0]));
+              $r3$.ɵt(1, $r3$.ɵb(ctx.names[1]));
+              $r3$.ɵt(2, $r3$.ɵb(ctx.names[2]));
+              $r3$.ɵt(3, $r3$.ɵb(ctx.names[3]));
+              $r3$.ɵt(4, $r3$.ɵb(ctx.names[4]));
+              $r3$.ɵt(5, $r3$.ɵb(ctx.names[5]));
+              $r3$.ɵt(6, $r3$.ɵb(ctx.names[6]));
+              $r3$.ɵt(7, $r3$.ɵb(ctx.names[7]));
+              $r3$.ɵt(8, $r3$.ɵb(ctx.names[8]));
+              $r3$.ɵt(9, $r3$.ɵb(ctx.names[9]));
+              $r3$.ɵt(10, $r3$.ɵb(ctx.names[10]));
+              $r3$.ɵt(11, $r3$.ɵb(ctx.names[11]));
+            }
+          },
+          inputs: {names: 'names'}
+        });
+      }
+
+      // NORMATIVE
+      const $e0_ff$ =
+          (v0: any, v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any,
+           v8: any) => ['start-', v0, v1, v2, v3, v4, '-middle-', v5, v6, v7, v8, '-end'];
+      // /NORMATIVE
+
+      @Component({
+        selector: 'my-app',
+        template: `
+        <my-comp [names]="['start-', n0, n1, n2, n3, n4, '-middle-', n5, n6, n7, n8, '-end']">
+        </my-comp>
+      `
+      })
+      class MyApp {
+        n0 = 'a';
+        n1 = 'b';
+        n2 = 'c';
+        n3 = 'd';
+        n4 = 'e';
+        n5 = 'f';
+        n6 = 'g';
+        n7 = 'h';
+        n8 = 'i';
+
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: function MyApp_Factory() { return new MyApp(); },
+          template: function MyApp_Template(rf: $RenderFlags$, c: $any$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'my-comp');
+              $r3$.ɵrS(10);
+            }
+            if (rf & 2) {
+              $r3$.ɵp(
+                  0, 'names',
+                  $r3$.ɵb($r3$.ɵfV(
+                      10, $e0_ff$, [c.n0, c.n1, c.n2, c.n3, c.n4, c.n5, c.n6, c.n7, c.n8])));
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      // NON-NORMATIVE (done by defineNgModule)
+      (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+          [(MyComp.ngComponentDef as ComponentDefInternal<any>)];
+      // /NON-NORMATIVE
+
+      expect(renderComp(MyApp)).toEqual(`<my-comp>start-abcde-middle-fghi-end</my-comp>`);
+    });
+
+    it('should support object literals', () => {
+      type $ObjectComp$ = ObjectComp;
+      type $MyApp$ = MyApp;
+
+      @Component({
+        selector: 'object-comp',
+        template: `
+          <p> {{ config['duration'] }} </p>
+          <p> {{ config.animation }} </p>
+        `
+      })
+      class ObjectComp {
+        // TODO(issue/24571): remove '!'.
+        config !: {[key: string]: any};
+
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: ObjectComp,
+          selectors: [['object-comp']],
+          factory: function ObjectComp_Factory() { return new ObjectComp(); },
+          template: function ObjectComp_Template(rf: $RenderFlags$, ctx: $ObjectComp$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, 'p');
+              $r3$.ɵT(1);
+              $r3$.ɵe();
+              $r3$.ɵE(2, 'p');
+              $r3$.ɵT(3);
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              $r3$.ɵt(1, $r3$.ɵb(ctx.config['duration']));
+              $r3$.ɵt(3, $r3$.ɵb(ctx.config.animation));
+            }
+          },
+          inputs: {config: 'config'}
+        });
+      }
+
+      // NORMATIVE
+      const $e0_ff$ = (v: any) => { return {'duration': 500, animation: v}; };
+      // /NORMATIVE
+
+      @Component({
+        selector: 'my-app',
+        template: `
+        <object-comp [config]="{'duration': 500, animation: name}"></object-comp>
+      `
+      })
+      class MyApp {
+        name = 'slide';
+
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: function MyApp_Factory() { return new MyApp(); },
+          template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'object-comp');
+              $r3$.ɵrS(2);
+            }
+            if (rf & 2) {
+              $r3$.ɵp(0, 'config', $r3$.ɵb($r3$.ɵf1(2, $e0_ff$, ctx.name)));
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      // NON-NORMATIVE (done by defineNgModule)
+      (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+          [(ObjectComp.ngComponentDef as ComponentDefInternal<any>)];
+      // /NON-NORMATIVE
+
+      expect(renderComp(MyApp)).toEqual(`<object-comp><p>500</p><p>slide</p></object-comp>`);
+    });
+
+    it('should support expressions nested deeply in object/array literals', () => {
+      type $NestedComp$ = NestedComp;
+      type $MyApp$ = MyApp;
+
+      @Component({
+        selector: 'nested-comp',
+        template: `
+          <p> {{ config.animation }} </p>
+          <p> {{config.actions[0].opacity }} </p>
+          <p> {{config.actions[1].duration }} </p>
+        `
+      })
+      class NestedComp {
+        // TODO(issue/24571): remove '!'.
+        config !: {[key: string]: any};
+
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: NestedComp,
+          selectors: [['nested-comp']],
+          factory: function NestedComp_Factory() { return new NestedComp(); },
+          template: function NestedComp_Template(rf: $RenderFlags$, ctx: $NestedComp$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, 'p');
+              $r3$.ɵT(1);
+              $r3$.ɵe();
+              $r3$.ɵE(2, 'p');
+              $r3$.ɵT(3);
+              $r3$.ɵe();
+              $r3$.ɵE(4, 'p');
+              $r3$.ɵT(5);
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              $r3$.ɵt(1, $r3$.ɵb(ctx.config.animation));
+              $r3$.ɵt(3, $r3$.ɵb(ctx.config.actions[0].opacity));
+              $r3$.ɵt(5, $r3$.ɵb(ctx.config.actions[1].duration));
+            }
+          },
+          inputs: {config: 'config'}
+        });
+      }
+
+      // NORMATIVE
+      const $e0_ff$ = (v: any) => { return {opacity: 1, duration: v}; };
+      const $c0$ = {opacity: 0, duration: 0};
+      const $e0_ff_1$ = (v: any) => [$c0$, v];
+      const $e0_ff_2$ = (v1: any, v2: any) => { return {animation: v1, actions: v2}; };
+      // /NORMATIVE
+
+      @Component({
+        selector: 'my-app',
+        template: `
+        <nested-comp [config]="{animation: name, actions: [{ opacity: 0, duration: 0}, {opacity: 1, duration: duration }]}">
+        </nested-comp>
+      `
+      })
+      class MyApp {
+        name = 'slide';
+        duration = 100;
+
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: function MyApp_Factory() { return new MyApp(); },
+          template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'nested-comp');
+              $r3$.ɵrS(7);
+            }
+            if (rf & 2) {
+              $r3$.ɵp(
+                  0, 'config', $r3$.ɵb($r3$.ɵf2(
+                                   7, $e0_ff_2$, ctx.name,
+                                   $r3$.ɵf1(4, $e0_ff_1$, $r3$.ɵf1(2, $e0_ff$, ctx.duration)))));
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      // NON-NORMATIVE (done by defineNgModule)
+      (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+          [(NestedComp.ngComponentDef as ComponentDefInternal<any>)];
+      // /NON-NORMATIVE
+
+      expect(renderComp(MyApp))
+          .toEqual(`<nested-comp><p>slide</p><p>0</p><p>100</p></nested-comp>`);
+    });
+
+  });
+
+});
+
+function renderComp<T>(type: $r3$.ɵComponentType<T>): string {
+  return toHtml(renderComponent(type));
+}
diff --git a/packages/core/test/render3/compiler_canonical/content_projection_spec.ts b/packages/core/test/render3/compiler_canonical/content_projection_spec.ts
new file mode 100644
index 000000000000..328c32996c68
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/content_projection_spec.ts
@@ -0,0 +1,92 @@
+/**
+ * @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 {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+
+/// See: `normative.md`
+describe('content projection', () => {
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+
+  it('should support content projection', () => {
+    type $SimpleComponent$ = SimpleComponent;
+    type $ComplexComponent$ = ComplexComponent;
+    type $MyApp$ = MyApp;
+
+    @Component({selector: 'simple', template: `<div><ng-content></ng-content></div>`})
+    class SimpleComponent {
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: SimpleComponent,
+        selectors: [['simple']],
+        factory: () => new SimpleComponent(),
+        template: function(rf: $RenderFlags$, ctx: $SimpleComponent$) {
+          if (rf & 1) {
+            $r3$.ɵpD();
+            $r3$.ɵEe(0, 'div');
+            $r3$.ɵP(1);
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    // NORMATIVE
+    const $pD_0P$: $r3$.ɵCssSelectorList[] =
+        [[['span', 'title', 'toFirst']], [['span', 'title', 'toSecond']]];
+    const $pD_0R$: string[] = ['span[title=toFirst]', 'span[title=toSecond]'];
+    // /NORMATIVE
+
+    @Component({
+      selector: 'complex',
+      template: `
+      <div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
+      <div id="second"><ng-content select="span[title=toSecond]"></ng-content></div>`
+    })
+    class ComplexComponent {
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: ComplexComponent,
+        selectors: [['complex']],
+        factory: () => new ComplexComponent(),
+        template: function(rf: $RenderFlags$, ctx: $ComplexComponent$) {
+          if (rf & 1) {
+            $r3$.ɵpD($pD_0P$, $pD_0R$);
+            $r3$.ɵEe(0, 'div', ['id', 'first']);
+            $r3$.ɵP(1, 1);
+            $r3$.ɵEe(2, 'div', ['id', 'second']);
+            $r3$.ɵP(3, 2);
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    @Component({
+      selector: 'my-app',
+      template: `<simple>content</simple>
+      <complex></complex>`
+    })
+    class MyApp {
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: () => new MyApp(),
+        template: function(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'simple');
+            $r3$.ɵT(1, 'content');
+            $r3$.ɵe();
+          }
+        },
+        directives: () => [SimpleComponent]
+      });
+    }
+  });
+
+});
diff --git a/packages/core/test/render3/compiler_canonical/elements_spec.ts b/packages/core/test/render3/compiler_canonical/elements_spec.ts
new file mode 100644
index 000000000000..1eb490df7e3f
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/elements_spec.ts
@@ -0,0 +1,432 @@
+/**
+ * @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 {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {AttributeMarker} from '../../../src/render3';
+import {ComponentDefInternal, InitialStylingFlags} from '../../../src/render3/interfaces/definition';
+import {ComponentFixture, renderComponent, toHtml} from '../render_util';
+
+
+/// See: `normative.md`
+describe('elements', () => {
+  // Saving type as $any$, etc to simplify testing for compiler, as types aren't saved
+  type $any$ = any;
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+
+  it('should translate DOM structure', () => {
+    type $MyComponent$ = MyComponent;
+
+    // Important: keep arrays outside of function to not create new instances.
+    const $e0_attrs$ = ['class', 'my-app', 'title', 'Hello'];
+
+    @Component({
+      selector: 'my-component',
+      template: `<div class="my-app" title="Hello">Hello <b>World</b>!</div>`
+    })
+    class MyComponent {
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: () => new MyComponent(),
+        template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'div', $e0_attrs$);
+            $r3$.ɵT(1, 'Hello ');
+            $r3$.ɵE(2, 'b');
+            $r3$.ɵT(3, 'World');
+            $r3$.ɵe();
+            $r3$.ɵT(4, '!');
+            $r3$.ɵe();
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    expect(toHtml(renderComponent(MyComponent)))
+        .toEqual('<div class="my-app" title="Hello">Hello <b>World</b>!</div>');
+  });
+
+  it('should support local refs', () => {
+    type $LocalRefComp$ = LocalRefComp;
+
+    class Dir {
+      value = 'one';
+
+      static ngDirectiveDef = $r3$.ɵdefineDirective({
+        type: Dir,
+        selectors: [['', 'dir', '']],
+        factory: function DirA_Factory() { return new Dir(); },
+        exportAs: 'dir'
+      });
+    }
+
+    // NORMATIVE
+    const $e0_attrs$ = ['dir', ''];
+    const $e0_locals$ = ['dir', 'dir', 'foo', ''];
+    // /NORMATIVE
+
+    @Component({
+      selector: 'local-ref-comp',
+      template: `
+        <div dir #dir="dir" #foo></div>
+        {{ dir.value }} - {{ foo.tagName }}
+      `
+    })
+    class LocalRefComp {
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: LocalRefComp,
+        selectors: [['local-ref-comp']],
+        factory: function LocalRefComp_Factory() { return new LocalRefComp(); },
+        template: function LocalRefComp_Template(rf: $RenderFlags$, ctx: $LocalRefComp$) {
+          let $tmp$: any;
+          let $tmp_2$: any;
+          if (rf & 1) {
+            $r3$.ɵEe(0, 'div', $e0_attrs$, $e0_locals$);
+            $r3$.ɵT(3);
+          }
+          if (rf & 2) {
+            $tmp$ = $r3$.ɵld(1);
+            $tmp_2$ = $r3$.ɵld(2);
+            $r3$.ɵt(3, $r3$.ɵi2(' ', $tmp$.value, ' - ', $tmp_2$.tagName, ''));
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    // NON-NORMATIVE
+    (LocalRefComp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+        () => [Dir.ngDirectiveDef];
+    // /NON-NORMATIVE
+
+    const fixture = new ComponentFixture(LocalRefComp);
+    expect(fixture.html).toEqual(`<div dir=""></div> one - DIV`);
+  });
+
+  it('should support listeners', () => {
+    type $ListenerComp$ = ListenerComp;
+
+    @Component({
+      selector: 'listener-comp',
+      template:
+          `<button (click)="onClick()" (keypress)="onPress($event); onPress2($event)">Click</button>`
+    })
+    class ListenerComp {
+      onClick() {}
+      onPress(e: Event) {}
+      onPress2(e: Event) {}
+
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: ListenerComp,
+        selectors: [['listener-comp']],
+        factory: function ListenerComp_Factory() { return new ListenerComp(); },
+        template: function ListenerComp_Template(rf: $RenderFlags$, ctx: $ListenerComp$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'button');
+            $r3$.ɵL('click', function ListenerComp_click_Handler() { return ctx.onClick(); });
+            $r3$.ɵL('keypress', function ListenerComp_keypress_Handler($event: $any$) {
+              ctx.onPress($event);
+              return ctx.onPress2($event);
+            });
+            $r3$.ɵT(1, 'Click');
+            $r3$.ɵe();
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    const listenerComp = renderComponent(ListenerComp);
+    expect(toHtml(listenerComp)).toEqual('<button>Click</button>');
+  });
+
+  it('should support namespaced attributes', () => {
+    type $MyComponent$ = MyComponent;
+
+    // Important: keep arrays outside of function to not create new instances.
+    const $e0_attrs$ = [
+      // class="my-app"
+      'class',
+      'my-app',
+      // foo:bar="baz"
+      AttributeMarker.NamespaceURI,
+      'http://someuri/foo',
+      'foo:bar',
+      'baz',
+      // title="Hello"
+      'title',
+      'Hello',
+      // foo:qux="quacks"
+      AttributeMarker.NamespaceURI,
+      'http://someuri/foo',
+      'foo:qux',
+      'quacks',
+    ];
+
+    @Component({
+      selector: 'my-component',
+      template:
+          `<div xmlns:foo="http://someuri/foo" class="my-app" foo:bar="baz" title="Hello" foo:qux="quacks">Hello <b>World</b>!</div>`
+    })
+    class MyComponent {
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: () => new MyComponent(),
+        template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'div', $e0_attrs$);
+            $r3$.ɵT(1, 'Hello ');
+            $r3$.ɵE(2, 'b');
+            $r3$.ɵT(3, 'World');
+            $r3$.ɵe();
+            $r3$.ɵT(4, '!');
+            $r3$.ɵe();
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    expect(toHtml(renderComponent(MyComponent)))
+        .toEqual(
+            '<div class="my-app" foo:bar="baz" foo:qux="quacks" title="Hello">Hello <b>World</b>!</div>');
+  });
+
+  describe('bindings', () => {
+    it('should bind to property', () => {
+      type $MyComponent$ = MyComponent;
+
+      @Component({selector: 'my-component', template: `<div [id]="someProperty"></div>`})
+      class MyComponent {
+        someProperty: string = 'initial';
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors: [['my-component']],
+          factory: function MyComponent_Factory() { return new MyComponent(); },
+          template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'div');
+            }
+            if (rf & 2) {
+              $r3$.ɵp(0, 'id', $r3$.ɵb(ctx.someProperty));
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      const comp = renderComponent(MyComponent);
+      expect(toHtml(comp)).toEqual('<div id="initial"></div>');
+
+      comp.someProperty = 'changed';
+      $r3$.ɵdetectChanges(comp);
+      expect(toHtml(comp)).toEqual('<div id="changed"></div>');
+    });
+
+    it('should bind to attribute', () => {
+      type $MyComponent$ = MyComponent;
+
+      @Component({selector: 'my-component', template: `<div [attr.title]="someAttribute"></div>`})
+      class MyComponent {
+        someAttribute: string = 'initial';
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors: [['my-component']],
+          factory: function MyComponent_Factory() { return new MyComponent(); },
+          template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'div');
+            }
+            if (rf & 2) {
+              $r3$.ɵa(0, 'title', $r3$.ɵb(ctx.someAttribute));
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      const comp = renderComponent(MyComponent);
+      expect(toHtml(comp)).toEqual('<div title="initial"></div>');
+
+      comp.someAttribute = 'changed';
+      $r3$.ɵdetectChanges(comp);
+      expect(toHtml(comp)).toEqual('<div title="changed"></div>');
+    });
+
+    it('should bind to a specific class', () => {
+      const c1: (string | InitialStylingFlags | boolean)[] = ['foo'];
+      type $MyComponent$ = MyComponent;
+
+      @Component({selector: 'my-component', template: `<div [class.foo]="someFlag"></div>`})
+      class MyComponent {
+        someFlag: boolean = false;
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors: [['my-component']],
+          factory: function MyComponent_Factory() { return new MyComponent(); },
+          template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, 'div');
+              $r3$.ɵs(c1);
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              $r3$.ɵcp(0, 0, ctx.someFlag);
+              $r3$.ɵsa(0);
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      const comp = renderComponent(MyComponent);
+      expect(toHtml(comp)).toEqual('<div></div>');
+
+      comp.someFlag = true;
+      $r3$.ɵdetectChanges(comp);
+      expect(toHtml(comp)).toEqual('<div class="foo"></div>');
+    });
+
+    it('should bind to a specific style', () => {
+      type $MyComponent$ = MyComponent;
+
+      const c0 = ['color', 'width'];
+      @Component({
+        selector: 'my-component',
+        template: `<div [style.color]="someColor" [style.width.px]="someWidth"></div>`
+      })
+      class MyComponent {
+        someColor: string = 'red';
+        someWidth: number = 50;
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors: [['my-component']],
+          factory: function MyComponent_Factory() { return new MyComponent(); },
+          template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, 'div');
+              $r3$.ɵs(null, c0);
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              $r3$.ɵsp(0, 0, ctx.someColor);
+              $r3$.ɵsp(0, 1, ctx.someWidth, 'px');
+              $r3$.ɵsa(0);
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      const comp = renderComponent(MyComponent);
+      if (browserDetection.isIE) {
+        expect(toHtml(comp)).toEqual('<div style="width: 50px; color: red;"></div>');
+      } else {
+        expect(toHtml(comp)).toEqual('<div style="color: red; width: 50px;"></div>');
+      }
+
+      comp.someColor = 'blue';
+      comp.someWidth = 100;
+      $r3$.ɵdetectChanges(comp);
+      if (browserDetection.isIE) {
+        expect(toHtml(comp)).toEqual('<div style="width: 100px; color: blue;"></div>');
+      } else {
+        expect(toHtml(comp)).toEqual('<div style="color: blue; width: 100px;"></div>');
+      }
+    });
+
+    it('should bind to many and keep order', () => {
+      type $MyComponent$ = MyComponent;
+
+      const c0 = ['foo'];
+      const c1 = ['color', InitialStylingFlags.VALUES_MODE, 'color', 'red'];
+
+      @Component({
+        selector: 'my-component',
+        template:
+            `<div [id]="someString+1" [class.foo]="someString=='initial'" [attr.style]="'color: red;'"></div>`
+      })
+      class MyComponent {
+        someString: string = 'initial';
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors: [['my-component']],
+          factory: function MyComponent_Factory() { return new MyComponent(); },
+          template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, 'div');
+              $r3$.ɵs(c0, c1);
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              $r3$.ɵp(0, 'id', $r3$.ɵb(ctx.someString + 1));
+              $r3$.ɵcp(0, 0, ctx.someString == 'initial');
+              $r3$.ɵsa(0);
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      const comp = renderComponent(MyComponent);
+      expect(toHtml(comp)).toEqual('<div class="foo" id="initial1" style="color: red;"></div>');
+
+      comp.someString = 'changed';
+      $r3$.ɵdetectChanges(comp);
+      expect(toHtml(comp)).toEqual('<div class="" id="changed1" style="color: red;"></div>');
+    });
+
+    it('should bind [class] and [style] to the element', () => {
+      type $StyleComponent$ = StyleComponent;
+
+      @Component(
+          {selector: 'style-comp', template: `<div [class]="classExp" [style]="styleExp"></div>`})
+      class StyleComponent {
+        classExp: string[]|string = 'some-name';
+        styleExp: {[name: string]: string} = {'background-color': 'red'};
+
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: StyleComponent,
+          selectors: [['style-comp']],
+          factory: function StyleComponent_Factory() { return new StyleComponent(); },
+          template: function StyleComponent_Template(rf: $RenderFlags$, ctx: $StyleComponent$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, 'div');
+              $r3$.ɵs();
+              $r3$.ɵe();
+            }
+            if (rf & 2) {
+              $r3$.ɵsm(0, ctx.classExp, ctx.styleExp);
+              $r3$.ɵsa(0);
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      const styleFixture = new ComponentFixture(StyleComponent);
+      expect(styleFixture.html)
+          .toEqual(`<div class="some-name" style="background-color: red;"></div>`);
+    });
+  });
+});
diff --git a/packages/core/test/render3/compiler_canonical/i18n_spec.ts b/packages/core/test/render3/compiler_canonical/i18n_spec.ts
new file mode 100644
index 000000000000..a27ddb89d2ff
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/i18n_spec.ts
@@ -0,0 +1,139 @@
+/**
+ * @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 {NgForOfContext} from '@angular/common';
+import {Component} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {NgForOf} from '../common_with_def';
+
+/// See: `normative.md`
+describe('i18n', () => {
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+
+  it('should support html', () => {
+    type $MyApp$ = MyApp;
+    const $msg_1$ = `{$START_P}contenu{$END_P}`;
+    const $i18n_1$ = $r3$.ɵiM($msg_1$, [{START_P: 1}]);
+
+    @Component({selector: 'my-app', template: `<div i18n><p>content</p></div>`})
+    class MyApp {
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: () => new MyApp(),
+        template: function(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'div');
+            $r3$.ɵE(1, 'p');
+            $r3$.ɵe();
+            $r3$.ɵe();
+            $r3$.ɵiA(1, $i18n_1$[0]);
+          }
+        }
+      });
+    }
+  });
+
+  it('should support expressions', () => {
+    type $MyApp$ = MyApp;
+    const $msg_1$ = `contenu: {$EXP_1}`;
+    const $i18n_1$ = $r3$.ɵiM($msg_1$, null, [{EXP_1: 1}]);
+
+    @Component({selector: 'my-app', template: `<div i18n>content: {{exp1}}</div>`})
+    class MyApp {
+      exp1 = '1';
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: () => new MyApp(),
+        template: function(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'div');
+            $r3$.ɵT(1);
+            $r3$.ɵe();
+            $r3$.ɵiA(1, $i18n_1$[0]);
+          }
+          if (rf & 2) {
+            $r3$.ɵt(3, $r3$.ɵb(ctx.exp1));
+          }
+        }
+      });
+    }
+  });
+
+  it('should support expressions in attributes', () => {
+    type $MyApp$ = MyApp;
+    const $msg_1$ = `titre: {$EXP_1}`;
+    const $i18n_1$ = $r3$.ɵiEM($msg_1$, {EXP_1: 1});
+
+    @Component({selector: 'my-app', template: `<div i18n><p title="title: {{exp1}}"></p></div>`})
+    class MyApp {
+      exp1 = '1';
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: () => new MyApp(),
+        template: function(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'div');
+            $r3$.ɵE(1, 'p');
+            $r3$.ɵe();
+            $r3$.ɵe();
+          }
+          if (rf & 2) {
+            $r3$.ɵp(0, 'title', $r3$.ɵiI1($i18n_1$, ctx.exp1));
+          }
+        }
+      });
+    }
+  });
+
+  it('should support embedded templates', () => {
+    type $MyApp$ = MyApp;
+    const $msg_1$ = `{$START_LI}valeur: {$EXP_1}!{$END_LI}`;
+    const $i18n_1$ =
+        $r3$.ɵiM($msg_1$, [{START_LI: 1}, {START_LI: 0}], [null, {EXP_1: 1}], ['START_LI']);
+
+    @Component({
+      selector: 'my-app',
+      template: `<ul i18n><li *ngFor="let item of items">value: {{item}}</li></ul>`
+    })
+    class MyApp {
+      items: string[] = ['1', '2'];
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        factory: () => new MyApp(),
+        selectors: [['my-app']],
+        template: (rf: $RenderFlags$, myApp: $MyApp$) => {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'ul');
+            $r3$.ɵC(1, liTemplate, null, ['ngForOf', '']);
+            $r3$.ɵe();
+            $r3$.ɵiA(1, $i18n_1$[0]);
+          }
+          if (rf & 2) {
+            $r3$.ɵp(1, 'ngForOf', $r3$.ɵb(myApp.items));
+          }
+
+          function liTemplate(rf1: $RenderFlags$, row: NgForOfContext<string>) {
+            if (rf1 & 1) {
+              $r3$.ɵE(0, 'li');
+              $r3$.ɵT(1);
+              $r3$.ɵe();
+              $r3$.ɵiA(0, $i18n_1$[1]);
+            }
+            if (rf1 & 2) {
+              $r3$.ɵt(1, $r3$.ɵb(row.$implicit));
+            }
+          }
+        },
+        directives: () => [NgForOf]
+      });
+    }
+  });
+});
diff --git a/packages/core/test/render3/compiler_canonical/injection_spec.ts b/packages/core/test/render3/compiler_canonical/injection_spec.ts
new file mode 100644
index 000000000000..9dc873476a67
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/injection_spec.ts
@@ -0,0 +1,193 @@
+/**
+ * @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, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, Injector, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, SkipSelf, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, defineInjectable, defineInjector, inject} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {renderComponent, toHtml} from '../render_util';
+
+
+
+/// See: `normative.md`
+describe('injection', () => {
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+
+  describe('directives', () => {
+    // Directives (and Components) should use `directiveInject`
+    it('should inject ChangeDetectorRef', () => {
+      type $MyComp$ = MyComp;
+      type $MyApp$ = MyApp;
+
+      @Component({selector: 'my-comp', template: `{{ value }}`})
+      class MyComp {
+        value: string;
+        constructor(public cdr: ChangeDetectorRef) { this.value = (cdr.constructor as any).name; }
+
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComp,
+          selectors: [['my-comp']],
+          factory: function MyComp_Factory() {
+            return new MyComp($r3$.ɵinjectChangeDetectorRef());
+          },
+          template: function MyComp_Template(rf: $RenderFlags$, ctx: $MyComp$) {
+            if (rf & 1) {
+              $r3$.ɵT(0);
+            }
+            if (rf & 2) {
+              $r3$.ɵt(0, $r3$.ɵb(ctx.value));
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      class MyApp {
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: function MyApp_Factory() { return new MyApp(); },
+          /** <my-comp></my-comp> */
+          template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'my-comp');
+            }
+          },
+          directives: () => [MyComp]
+        });
+      }
+
+
+      const app = renderComponent(MyApp);
+      // ChangeDetectorRef is the token, ViewRef is historically the constructor
+      expect(toHtml(app)).toEqual('<my-comp>ViewRef</my-comp>');
+    });
+
+    it('should inject attributes', () => {
+      type $MyComp$ = MyComp;
+      type $MyApp$ = MyApp;
+
+      @Component({selector: 'my-comp', template: `{{ title }}`})
+      class MyComp {
+        constructor(@Attribute('title') public title: string|undefined) {}
+
+        // NORMATIVE
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComp,
+          selectors: [['my-comp']],
+          factory: function MyComp_Factory() { return new MyComp($r3$.ɵinjectAttribute('title')); },
+          template: function MyComp_Template(rf: $RenderFlags$, ctx: $MyComp$) {
+            if (rf & 1) {
+              $r3$.ɵT(0);
+            }
+            if (rf & 2) {
+              $r3$.ɵt(0, $r3$.ɵb(ctx.title));
+            }
+          }
+        });
+        // /NORMATIVE
+      }
+
+      class MyApp {
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: function MyApp_Factory() { return new MyApp(); },
+          /** <my-comp></my-comp> */
+          template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+            if (rf & 1) {
+              $r3$.ɵEe(0, 'my-comp', e0_attrs);
+            }
+          },
+          directives: () => [MyComp]
+        });
+      }
+      const e0_attrs = ['title', 'WORKS'];
+      const app = renderComponent(MyApp);
+      // ChangeDetectorRef is the token, ViewRef is historically the constructor
+      expect(toHtml(app)).toEqual('<my-comp title="WORKS">WORKS</my-comp>');
+    });
+
+    // TODO(misko): enable once `providers` and `viewProvdires` are implemented.
+    xit('should inject into an injectable', () => {
+      type $MyApp$ = MyApp;
+
+      @Injectable()
+      class ServiceA {
+        // NORMATIVE
+        static ngInjectableDef = defineInjectable({
+          factory: function ServiceA_Factory() { return new ServiceA(); },
+        });
+        // /NORMATIVE
+      }
+
+      @Injectable()
+      class ServiceB {
+        // NORMATIVE
+        static ngInjectableDef = defineInjectable({
+          factory: function ServiceA_Factory() { return new ServiceB(); },
+        });
+        // /NORMATIVE
+      }
+
+      @Component({
+        template: '',
+        providers: [ServiceA],
+        viewProviders: [ServiceB],
+      })
+      class MyApp {
+        constructor(serviceA: ServiceA, serviceB: ServiceB, injector: Injector) {}
+
+        static ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: function MyApp_Factory() {
+            return new MyApp(
+                $r3$.ɵdirectiveInject(ServiceA), $r3$.ɵdirectiveInject(ServiceB), inject(INJECTOR));
+          },
+          template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {},
+          providers: [ServiceA],
+          viewProviders: [ServiceB],
+        });
+      }
+      const e0_attrs = ['title', 'WORKS'];
+      const app = renderComponent(MyApp);
+      // ChangeDetectorRef is the token, ViewRef is historically the constructor
+      expect(toHtml(app)).toEqual('<my-comp title="WORKS">WORKS</my-comp>');
+    });
+  });
+
+  describe('services', () => {
+    // Services should use `inject`
+    @Injectable()
+    class ServiceA {
+      constructor(@Inject(String) name: String, injector: Injector) {}
+
+      // NORMATIVE
+      static ngInjectableDef = defineInjectable({
+        factory: function ServiceA_Factory() {
+          return new ServiceA(inject(String), inject(INJECTOR));
+        },
+      });
+      // /NORMATIVE
+    }
+
+    @Injectable()
+    class ServiceB {
+      constructor(serviceA: ServiceA, @SkipSelf() injector: Injector) {}
+      // NORMATIVE
+      static ngInjectableDef = defineInjectable({
+        factory: function ServiceA_Factory() {
+          return new ServiceB(inject(ServiceA), inject(INJECTOR, InjectFlags.SkipSelf) !);
+        },
+      });
+      // /NORMATIVE
+    }
+
+  });
+
+});
diff --git a/packages/core/test/render3/compiler_canonical/life_cycle_spec.ts b/packages/core/test/render3/compiler_canonical/life_cycle_spec.ts
new file mode 100644
index 000000000000..c3bda439375f
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/life_cycle_spec.ts
@@ -0,0 +1,110 @@
+/**
+ * @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 {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {ComponentDefInternal} from '../../../src/render3/interfaces/definition';
+import {renderComponent, toHtml} from '../render_util';
+
+
+/// See: `normative.md`
+describe('lifecycle hooks', () => {
+  let events: string[] = [];
+  let simpleLayout: SimpleLayout;
+
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+  type $LifecycleComp$ = LifecycleComp;
+  type $SimpleLayout$ = SimpleLayout;
+
+  beforeEach(() => { events = []; });
+
+  @Component({selector: 'lifecycle-comp', template: ``})
+  class LifecycleComp {
+    // TODO(issue/24571): remove '!'.
+    @Input('name') nameMin !: string;
+
+    ngOnChanges() { events.push('changes' + this.nameMin); }
+
+    ngOnInit() { events.push('init' + this.nameMin); }
+    ngDoCheck() { events.push('check' + this.nameMin); }
+
+    ngAfterContentInit() { events.push('content init' + this.nameMin); }
+    ngAfterContentChecked() { events.push('content check' + this.nameMin); }
+
+    ngAfterViewInit() { events.push('view init' + this.nameMin); }
+    ngAfterViewChecked() { events.push('view check' + this.nameMin); }
+
+    ngOnDestroy() { events.push(this.nameMin); }
+
+    // NORMATIVE
+    static ngComponentDef = $r3$.ɵdefineComponent({
+      type: LifecycleComp,
+      selectors: [['lifecycle-comp']],
+      factory: function LifecycleComp_Factory() { return new LifecycleComp(); },
+      template: function LifecycleComp_Template(rf: $RenderFlags$, ctx: $LifecycleComp$) {},
+      inputs: {nameMin: ['name', 'nameMin']},
+      features: [$r3$.ɵNgOnChangesFeature]
+    });
+    // /NORMATIVE
+  }
+
+  @Component({
+    selector: 'simple-layout',
+    template: `
+      <lifecycle-comp [name]="name1"></lifecycle-comp>
+      <lifecycle-comp [name]="name2"></lifecycle-comp>
+    `
+  })
+  class SimpleLayout {
+    name1 = '1';
+    name2 = '2';
+
+    // NORMATIVE
+    static ngComponentDef = $r3$.ɵdefineComponent({
+      type: SimpleLayout,
+      selectors: [['simple-layout']],
+      factory: function SimpleLayout_Factory() { return simpleLayout = new SimpleLayout(); },
+      template: function SimpleLayout_Template(rf: $RenderFlags$, ctx: $SimpleLayout$) {
+        if (rf & 1) {
+          $r3$.ɵEe(0, 'lifecycle-comp');
+          $r3$.ɵEe(1, 'lifecycle-comp');
+        }
+        if (rf & 2) {
+          $r3$.ɵp(0, 'name', $r3$.ɵb(ctx.name1));
+          $r3$.ɵp(1, 'name', $r3$.ɵb(ctx.name2));
+        }
+      }
+    });
+    // /NORMATIVE
+  }
+
+  // NON-NORMATIVE
+  (SimpleLayout.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+      [LifecycleComp.ngComponentDef];
+  // /NON-NORMATIVE
+
+  it('should gen hooks with a few simple components', () => {
+    expect(toHtml(renderComponent(SimpleLayout)))
+        .toEqual(`<lifecycle-comp></lifecycle-comp><lifecycle-comp></lifecycle-comp>`);
+    expect(events).toEqual([
+      'changes1', 'init1', 'check1', 'changes2', 'init2', 'check2', 'content init1',
+      'content check1', 'content init2', 'content check2', 'view init1', 'view check1',
+      'view init2', 'view check2'
+    ]);
+
+    events = [];
+    simpleLayout.name1 = '-one';
+    simpleLayout.name2 = '-two';
+    $r3$.ɵdetectChanges(simpleLayout);
+    expect(events).toEqual([
+      'changes-one', 'check-one', 'changes-two', 'check-two', 'content check-one',
+      'content check-two', 'view check-one', 'view check-two'
+    ]);
+  });
+
+});
diff --git a/packages/core/test/render3/compiler_canonical/local_reference_spec.ts b/packages/core/test/render3/compiler_canonical/local_reference_spec.ts
new file mode 100644
index 000000000000..6e092590c554
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/local_reference_spec.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} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {ComponentFixture} from '../render_util';
+
+/// See: `normative.md`
+describe('local references', () => {
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+
+  it('should translate DOM structure', () => {
+    type $MyComponent$ = MyComponent;
+
+    @Component(
+        {selector: 'my-component', template: `<input #user value="World">Hello, {{user.value}}!`})
+    class MyComponent {
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: () => new MyComponent,
+        template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
+          let l1_user: any;
+          if (rf & 1) {
+            $r3$.ɵEe(0, 'input', ['value', 'World'], ['user', '']);
+            $r3$.ɵT(2);
+          }
+          if (rf & 2) {
+            l1_user = $r3$.ɵr<any>(1);
+            $r3$.ɵt(2, $r3$.ɵi1('Hello, ', l1_user.value, '!'));
+          }
+        }
+      });
+      // NORMATIVE
+    }
+
+    const fixture = new ComponentFixture(MyComponent);
+    expect(fixture.html).toEqual(`<input value="World">Hello, World!`);
+  });
+});
diff --git a/packages/core/test/render3/compiler_canonical/ng_module_spec.ts b/packages/core/test/render3/compiler_canonical/ng_module_spec.ts
new file mode 100644
index 000000000000..b585b7707e52
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/ng_module_spec.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 * as $core$ from '../../../index';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {renderComponent, toHtml} from '../render_util';
+
+
+/// See: `normative.md`
+xdescribe('NgModule', () => {
+
+  interface Injectable {
+    providedIn?: /*InjectorDefType<any>*/ any;
+    factory: Function;
+  }
+
+  function defineInjectable(opts: Injectable): Injectable {
+    // This class should be imported from https://github.com/angular/angular/pull/20850
+    return opts;
+  }
+  function defineInjector(opts: any): any {
+    // This class should be imported from https://github.com/angular/angular/pull/20850
+    return opts;
+  }
+  it('should convert module', () => {
+    @Injectable()
+    class Toast {
+      constructor(name: String) {}
+      // NORMATIVE
+      static ngInjectableDef = defineInjectable({
+        factory: () => new Toast($r3$.ɵdirectiveInject(String)),
+      });
+      // /NORMATIVE
+    }
+
+    class CommonModule {
+      // NORMATIVE
+      static ngInjectorDef = defineInjector({});
+      // /NORMATIVE
+    }
+
+    @NgModule({
+      providers: [Toast, {provide: String, useValue: 'Hello'}],
+      imports: [CommonModule],
+    })
+    class MyModule {
+      constructor(toast: Toast) {}
+      // NORMATIVE
+      static ngInjectorDef = defineInjector({
+        factory: () => new MyModule($r3$.ɵdirectiveInject(Toast)),
+        provider: [
+          {provide: Toast, deps: [String]},  // If Toast has metadata generate this line
+          Toast,                             // If Toast has no metadata generate this line.
+          {provide: String, useValue: 'Hello'}
+        ],
+        imports: [CommonModule]
+      });
+      // /NORMATIVE
+    }
+
+    @Injectable(/*{MyModule}*/)
+    class BurntToast {
+      constructor(@Optional() toast: Toast|null, name: String) {}
+      // NORMATIVE
+      static ngInjectableDef = defineInjectable({
+        providedIn: MyModule,
+        factory: () => new BurntToast(
+                     $r3$.ɵdirectiveInject(Toast, $core$.InjectFlags.Optional),
+                     $r3$.ɵdirectiveInject(String)),
+      });
+      // /NORMATIVE
+    }
+
+  });
+});
diff --git a/packages/core/test/render3/compiler_canonical/normative.md b/packages/core/test/render3/compiler_canonical/normative.md
new file mode 100644
index 000000000000..992bf86d3fa2
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/normative.md
@@ -0,0 +1,11 @@
+This folder contains canonical examples of how the Ivy compiler translates annotations into code
+
+- The specs are marked with `NORMATIVE` => `/NORMATIVE` comments which designates what the compiler is expected to generate.
+- All local variable names are considered non-normative (informative). They should be wrapped in `$` on each end to simplify testing on the compiler side.
+
+A common trick in spec files is to map types to `$x$` (such as `boolean` => `$boolean$`, etc) to simplify testing for compiler, as types aren't saved. (See bullet above).
+```
+type $boolean$ = boolean;
+type $any$ = any;
+type $number$ = number;
+```
\ No newline at end of file
diff --git a/packages/core/test/render3/compiler_canonical/patch_types_spec.ts b/packages/core/test/render3/compiler_canonical/patch_types_spec.ts
new file mode 100644
index 000000000000..85e42f5724ef
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/patch_types_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 {Component, ContentChild, Directive, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef, defineInjectable, defineInjector} from '../../../src/core';
+import * as r3 from '../../../src/render3/index';
+
+
+/**
+ * GOALS:
+ * - Patch types in tree shakable way
+ * - Generate these types for files which have `metadata.json` (since those are the files which
+ * have not been compiled with Ivy)
+ * - Have build optimizer hoist the patch functions into corresponding types to allow tree-shaking.
+ */
+
+// File: node_modules/some_library/path/public.ts
+// Implies metadata: node_modules/some_library/path/public.metadata.json
+// Assume: node_modules/some_library/index.js re-exports ./path/public.ts#ThirdPartyClass
+@Injectable()
+class ThirdPartyClass {
+}
+
+
+@Injectable()
+class CompiledWithIvy {
+  // NORMATIVE
+  static ngInjectableDef = defineInjectable(
+      {factory: function CompileWithIvy_Factory() { return new CompiledWithIvy(); }});
+  // /NORMATIVE
+}
+
+// import { CompiledWithIvy } from 'some_library';
+@NgModule({providers: [ThirdPartyClass, CompiledWithIvy]})
+class CompiledWithIvyModule {
+  // NORMATIVE
+  static ngInjectorDef = defineInjector({
+    providers: [ThirdPartyClass, CompiledWithIvy],
+    factory: function CompiledWithIvyModule_Factory() { return new CompiledWithIvyModule(); }
+  });
+  // /NORMATIVE
+}
+
+/**
+ * Below is a function which should be generated right next to the `@NgModule` which
+ * imports types which have `.metadata.json` files.
+ *
+ * # JIT Mode
+ * - Because the `ngPatch_CompiledWithIvyModule` is invoked all parts get patched.
+ *
+ * # AOT Mode
+ * - Build Optimizer detects `@__BUILD_OPTIMIZER_COLOCATE__` annotation and moves the
+ * code from the current location to the destination.
+ * - The resulting `ngPatch_CompiledWithIvyModule` becomes empty and eligible for tree-shaking.
+ * - Uglify removes the `ngPatch_CompiledWithIvyModule` since it is empty.
+ *
+ * # AOT Closure Mode
+ * - Option A: not supported. (Preferred option)
+ *   - Externally very few people use closure they will just have to wait until all of their
+ *     libraries are Ivy.
+ *   - Internally (g3) we build from source hence everyone switches to Ivy at the same time.
+ * - Option B: Write a closure pass similar to Build Optimizer which would move the code.
+ */
+// NORMATIVE
+ngPatch_depsOf_CompiledWithIvyModule();
+function ngPatch_depsOf_CompiledWithIvyModule() {
+  ngPatch_node_modules_some_library_path_public_CompileWithIvy();
+}
+function ngPatch_node_modules_some_library_path_public_CompileWithIvy() {
+  /** @__BUILD_OPTIMIZER_COLOCATE__ */
+  (ThirdPartyClass as any).ngInjectableDef = defineInjectable(
+      {factory: function CompileWithIvy_Factory() { return new ThirdPartyClass(); }});
+}
+// /NORMATIVE
diff --git a/packages/core/test/render3/compiler_canonical/pipes_spec.ts b/packages/core/test/render3/compiler_canonical/pipes_spec.ts
new file mode 100644
index 000000000000..90bf0ff7e0cd
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/pipes_spec.ts
@@ -0,0 +1,209 @@
+/**
+ * @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 {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {ComponentDefInternal} from '../../../src/render3/interfaces/definition';
+import {containerEl, renderComponent, toHtml} from '../render_util';
+
+
+/// See: `normative.md`
+describe('pipes', () => {
+  type $any$ = any;
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+
+  let myPipeTransformCalls = 0;
+  let myPurePipeTransformCalls = 0;
+
+  @Pipe({
+    name: 'myPipe',
+    pure: false,
+  })
+  class MyPipe implements PipeTransform,
+      OnDestroy {
+    private numberOfBang = 1;
+
+    transform(value: string, size: number): string {
+      let result = value.substring(size);
+      for (let i = 0; i < this.numberOfBang; i++) result += '!';
+      this.numberOfBang++;
+      myPipeTransformCalls++;
+      return result;
+    }
+
+    ngOnDestroy() { this.numberOfBang = 1; }
+
+    // NORMATIVE
+    static ngPipeDef = $r3$.ɵdefinePipe({
+      name: 'myPipe',
+      type: MyPipe,
+      factory: function MyPipe_Factory() { return new MyPipe(); },
+      pure: false,
+    });
+    // /NORMATIVE
+  }
+
+  @Pipe({
+    name: 'myPurePipe',
+    pure: true,
+  })
+  class MyPurePipe implements PipeTransform {
+    transform(value: string, size: number): string {
+      myPurePipeTransformCalls++;
+      return value.substring(size);
+    }
+
+    // NORMATIVE
+    static ngPipeDef = $r3$.ɵdefinePipe({
+      name: 'myPurePipe',
+      type: MyPurePipe,
+      factory: function MyPurePipe_Factory() { return new MyPurePipe(); },
+      pure: true,
+    });
+    // /NORMATIVE
+  }
+
+  it('should render pipes', () => {
+    type $MyApp$ = MyApp;
+    myPipeTransformCalls = 0;
+    myPurePipeTransformCalls = 0;
+
+    @Component({template: `{{name | myPipe:size | myPurePipe:size }}`})
+    class MyApp {
+      name = '12World';
+      size = 1;
+
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: function MyApp_Factory() { return new MyApp(); },
+        template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵT(0);
+            $r3$.ɵPp(1, 'myPipe');
+            $r3$.ɵPp(2, 'myPurePipe');
+            $r3$.ɵrS(6);
+          }
+          if (rf & 2) {
+            $r3$.ɵt(
+                0,
+                $r3$.ɵi1('', $r3$.ɵpb2(1, 6, $r3$.ɵpb2(2, 3, ctx.name, ctx.size), ctx.size), ''));
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    // NON-NORMATIVE
+    (MyApp.ngComponentDef as ComponentDefInternal<any>).pipeDefs =
+        () => [MyPurePipe.ngPipeDef, MyPipe.ngPipeDef];
+    // /NON-NORMATIVE
+
+    let myApp: MyApp = renderComponent(MyApp);
+    expect(toHtml(containerEl)).toEqual('World!');
+    expect(myPurePipeTransformCalls).toEqual(1);
+    expect(myPipeTransformCalls).toEqual(1);
+
+    $r3$.ɵdetectChanges(myApp);
+    expect(toHtml(containerEl)).toEqual('World!!');
+    expect(myPurePipeTransformCalls).toEqual(1);
+    expect(myPipeTransformCalls).toEqual(2);
+
+    myApp.name = '34WORLD';
+    $r3$.ɵdetectChanges(myApp);
+    expect(toHtml(containerEl)).toEqual('WORLD!!!');
+    expect(myPurePipeTransformCalls).toEqual(2);
+    expect(myPipeTransformCalls).toEqual(3);
+  });
+
+  it('should render many pipes and forward the first instance (pure or impure pipe)', () => {
+    type $MyApp$ = MyApp;
+    myPipeTransformCalls = 0;
+    myPurePipeTransformCalls = 0;
+
+    @Directive({
+      selector: '[oneTimeIf]',
+    })
+    class OneTimeIf {
+      @Input() oneTimeIf: any;
+      constructor(private view: ViewContainerRef, private template: TemplateRef<any>) {}
+      ngDoCheck(): void {
+        if (this.oneTimeIf) {
+          this.view.createEmbeddedView(this.template);
+        }
+      }
+      // NORMATIVE
+      static ngDirectiveDef = $r3$.ɵdefineDirective({
+        type: OneTimeIf,
+        selectors: [['', 'oneTimeIf', '']],
+        factory: () => new OneTimeIf($r3$.ɵinjectViewContainerRef(), $r3$.ɵinjectTemplateRef()),
+        inputs: {oneTimeIf: 'oneTimeIf'}
+      });
+      // /NORMATIVE
+    }
+
+    @Component({
+      template: `{{name | myPurePipe:size}}{{name | myPurePipe:size}}
+       <div *oneTimeIf="more">{{name | myPurePipe:size}}</div>`
+    })
+    class MyApp {
+      name = '1World';
+      size = 1;
+      more = true;
+
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: function MyApp_Factory() { return new MyApp(); },
+        template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵT(0);
+            $r3$.ɵPp(1, 'myPurePipe');
+            $r3$.ɵT(2);
+            $r3$.ɵPp(3, 'myPurePipe');
+            $r3$.ɵC(4, C4, '', ['oneTimeIf', '']);
+            $r3$.ɵrS(6);
+          }
+          if (rf & 2) {
+            $r3$.ɵt(0, $r3$.ɵi1('', $r3$.ɵpb2(1, 3, ctx.name, ctx.size), ''));
+            $r3$.ɵt(2, $r3$.ɵi1('', $r3$.ɵpb2(3, 6, ctx.name, ctx.size), ''));
+            $r3$.ɵp(4, 'oneTimeIf', $r3$.ɵb(ctx.more));
+            $r3$.ɵcR(4);
+            $r3$.ɵcr();
+          }
+
+          function C4(rf: $RenderFlags$, ctx1: $any$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, 'div');
+              $r3$.ɵT(1);
+              $r3$.ɵPp(2, 'myPurePipe');
+              $r3$.ɵe();
+              $r3$.ɵrS(3);
+            }
+            if (rf & 2) {
+              $r3$.ɵt(1, $r3$.ɵi1('', $r3$.ɵpb2(2, 3, ctx.name, ctx.size), ''));
+            }
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    // NON-NORMATIVE
+    (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs = [OneTimeIf.ngDirectiveDef];
+    (MyApp.ngComponentDef as ComponentDefInternal<any>).pipeDefs = [MyPurePipe.ngPipeDef];
+    // /NON-NORMATIVE
+
+    let myApp: MyApp = renderComponent(MyApp);
+    expect(toHtml(containerEl)).toEqual('WorldWorld<div>World</div>');
+    expect(myPurePipeTransformCalls).toEqual(3);
+    expect(myPipeTransformCalls).toEqual(0);
+  });
+});
diff --git a/packages/core/test/render3/compiler_canonical/query_spec.ts b/packages/core/test/render3/compiler_canonical/query_spec.ts
new file mode 100644
index 000000000000..a3e85d445934
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/query_spec.ts
@@ -0,0 +1,178 @@
+/**
+ * @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 {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {ComponentDefInternal} from '../../../src/render3/interfaces/definition';
+import {renderComponent, toHtml} from '../render_util';
+
+
+/// See: `normative.md`
+describe('queries', () => {
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+  type $number$ = number;
+  let someDir: SomeDirective;
+
+  @Directive({
+    selector: '[someDir]',
+  })
+  class SomeDirective {
+    static ngDirectiveDef = $r3$.ɵdefineDirective({
+      type: SomeDirective,
+      selectors: [['', 'someDir', '']],
+      factory: function SomeDirective_Factory() { return someDir = new SomeDirective(); },
+      features: [$r3$.ɵPublicFeature]
+    });
+  }
+
+  it('should support view queries', () => {
+    type $ViewQueryComponent$ = ViewQueryComponent;
+
+    // NORMATIVE
+    const $e1_attrs$ = ['someDir', ''];
+    // /NORMATIVE
+
+    @Component({
+      selector: 'view-query-component',
+      template: `
+      <div someDir></div>
+    `
+    })
+    class ViewQueryComponent {
+      // TODO(issue/24571): remove '!'.
+      @ViewChild(SomeDirective) someDir !: SomeDirective;
+      // TODO(issue/24571): remove '!'.
+      @ViewChildren(SomeDirective) someDirList !: QueryList<SomeDirective>;
+
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: ViewQueryComponent,
+        selectors: [['view-query-component']],
+        factory: function ViewQueryComponent_Factory() { return new ViewQueryComponent(); },
+        template: function ViewQueryComponent_Template(
+            rf: $RenderFlags$, ctx: $ViewQueryComponent$) {
+          if (rf & 1) {
+            $r3$.ɵEe(2, 'div', $e1_attrs$);
+          }
+        },
+        viewQuery: function ViewQueryComponent_Query(rf: $RenderFlags$, ctx: $ViewQueryComponent$) {
+          if (rf & 1) {
+            $r3$.ɵQ(0, SomeDirective, false);
+            $r3$.ɵQ(1, SomeDirective, false);
+          }
+          if (rf & 2) {
+            let $tmp$: any;
+            $r3$.ɵqR($tmp$ = $r3$.ɵld<QueryList<any>>(0)) && (ctx.someDir = $tmp$.first);
+            $r3$.ɵqR($tmp$ = $r3$.ɵld<QueryList<any>>(1)) &&
+                (ctx.someDirList = $tmp$ as QueryList<any>);
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    // NON-NORMATIVE
+    (ViewQueryComponent.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+        [SomeDirective.ngDirectiveDef];
+    // /NON-NORMATIVE
+
+    const viewQueryComp = renderComponent(ViewQueryComponent);
+    expect(viewQueryComp.someDir).toEqual(someDir);
+    expect((viewQueryComp.someDirList as QueryList<SomeDirective>).toArray()).toEqual([someDir !]);
+  });
+
+  it('should support content queries', () => {
+    type $MyApp$ = MyApp;
+    type $ContentQueryComponent$ = ContentQueryComponent;
+
+    let contentQueryComp: ContentQueryComponent;
+
+    @Component({
+      selector: 'content-query-component',
+      template: `
+        <div><ng-content></ng-content></div>
+      `
+    })
+    class ContentQueryComponent {
+      // TODO(issue/24571): remove '!'.
+      @ContentChild(SomeDirective) someDir !: SomeDirective;
+      // TODO(issue/24571): remove '!'.
+      @ContentChildren(SomeDirective) someDirList !: QueryList<SomeDirective>;
+
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: ContentQueryComponent,
+        selectors: [['content-query-component']],
+        factory: function ContentQueryComponent_Factory() { return new ContentQueryComponent(); },
+        contentQueries: function ContentQueryComponent_ContentQueries() {
+          $r3$.ɵQr($r3$.ɵQ(null, SomeDirective, false));
+          $r3$.ɵQr($r3$.ɵQ(null, SomeDirective, false));
+        },
+        contentQueriesRefresh: function ContentQueryComponent_ContentQueriesRefresh(
+            dirIndex: $number$, queryStartIndex: $number$) {
+          let $tmp$: any;
+          const $instance$ = $r3$.ɵd<ContentQueryComponent>(dirIndex);
+          $r3$.ɵqR($tmp$ = $r3$.ɵql<any>(queryStartIndex)) && ($instance$.someDir = $tmp$.first);
+          $r3$.ɵqR($tmp$ = $r3$.ɵql<any>(queryStartIndex + 1)) && ($instance$.someDirList = $tmp$);
+        },
+        template: function ContentQueryComponent_Template(
+            rf: $number$, ctx: $ContentQueryComponent$) {
+          if (rf & 1) {
+            $r3$.ɵpD();
+            $r3$.ɵE(0, 'div');
+            $r3$.ɵP(1);
+            $r3$.ɵe();
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    const $e2_attrs$ = ['someDir', ''];
+
+    @Component({
+      selector: 'my-app',
+      template: `
+        <content-query-component>
+          <div someDir></div>
+        </content-query-component>
+      `
+    })
+    class MyApp {
+      // NON-NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyApp,
+        selectors: [['my-app']],
+        factory: function MyApp_Factory() { return new MyApp(); },
+        template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'content-query-component');
+            contentQueryComp = $r3$.ɵd<ContentQueryComponent>(0);
+            $r3$.ɵEe(1, 'div', $e2_attrs$);
+            $r3$.ɵe();
+          }
+        }
+      });
+      // /NON-NORMATIVE
+    }
+
+    // NON-NORMATIVE
+    (MyApp.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+        [ContentQueryComponent.ngComponentDef, SomeDirective.ngDirectiveDef];
+    // /NON-NORMATIVE
+
+    expect(toHtml(renderComponent(MyApp)))
+        .toEqual(
+            `<content-query-component><div><div somedir=""></div></div></content-query-component>`);
+    expect(contentQueryComp !.someDir).toEqual(someDir !);
+    expect((contentQueryComp !.someDirList as QueryList<SomeDirective>).toArray()).toEqual([
+      someDir !
+    ]);
+  });
+
+});
diff --git a/packages/core/test/render3/compiler_canonical/sanitize_spec.ts b/packages/core/test/render3/compiler_canonical/sanitize_spec.ts
new file mode 100644
index 000000000000..dd2e4b11cb9a
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/sanitize_spec.ts
@@ -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 {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {getHostElement} from '../../../src/render3/index';
+import {renderComponent, toHtml} from '../render_util';
+
+/**
+ * NORMATIVE => /NORMATIVE: Designates what the compiler is expected to generate.
+ *
+ * All local variable names are considered non-normative (informative). They should be
+ * wrapped in $ on each end to simplify testing on the compiler side.
+ */
+
+describe('compiler sanitization', () => {
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+
+  it('should translate DOM structure', () => {
+    type $MyComponent$ = MyComponent;
+
+    @Component({
+      selector: 'my-component',
+      template: `<div [innerHTML]="innerHTML" [hidden]="hidden"></div>` +
+          `<img [style.background-image]="style" [src]="src">` +
+          `<script [attr.src]=src></script>`
+    })
+    class MyComponent {
+      innerHTML: string = '<frame></frame>';
+      hidden: boolean = true;
+      style: string = `url("http://evil")`;
+      url: string = 'javascript:evil()';
+
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: function MyComponent_Factory() { return new MyComponent(); },
+        template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'div');
+            $r3$.ɵs(['background-image']);
+            $r3$.ɵe();
+            $r3$.ɵEe(1, 'img');
+          }
+          if (rf & 2) {
+            $r3$.ɵp(0, 'innerHTML', $r3$.ɵb(ctx.innerHTML), $r3$.ɵsanitizeHtml);
+            $r3$.ɵp(0, 'hidden', $r3$.ɵb(ctx.hidden));
+            $r3$.ɵsp(0, 0, ctx.style);
+            $r3$.ɵsa(0);
+            $r3$.ɵp(1, 'src', $r3$.ɵb(ctx.url), $r3$.ɵsanitizeUrl);
+            $r3$.ɵa(1, 'srcset', $r3$.ɵb(ctx.url), $r3$.ɵsanitizeUrl);
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    const myComponent = renderComponent(MyComponent);
+    const div = getHostElement(myComponent).querySelector('div') !;
+    // because sanitizer removed it is working.
+    expect(div.innerHTML).toEqual('');
+    expect(div.hidden).toEqual(true);
+
+    const img = getHostElement(myComponent).querySelector('img') !;
+    // because sanitizer removed it is working.
+    expect(img.getAttribute('src')).toEqual('unsafe:javascript:evil()');
+    // because sanitizer removed it is working.
+    expect(img.style.getPropertyValue('background-image')).toEqual('');
+    // because sanitizer removed it is working.
+    expect(img.getAttribute('srcset')).toEqual('unsafe:javascript:evil()');
+  });
+
+});
diff --git a/packages/core/test/render3/compiler_canonical/small_app_spec.ts b/packages/core/test/render3/compiler_canonical/small_app_spec.ts
new file mode 100644
index 000000000000..04f45904c76b
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/small_app_spec.ts
@@ -0,0 +1,195 @@
+/**
+ * @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 {NgForOf, NgForOfContext} from '@angular/common';
+import {Component, ContentChild, Directive, EventEmitter, Injectable, Input, NgModule, OnDestroy, Optional, Output, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef, defineInjectable, defineInjector} from '@angular/core';
+import {withBody} from '@angular/private/testing';
+
+import * as r3 from '../../../src/render3/index';
+
+/// See: `normative.md`
+
+
+
+interface ToDo {
+  text: string;
+  done: boolean;
+}
+
+type $RenderFlags$ = r3.RenderFlags;
+
+@Injectable()
+class AppState {
+  todos: ToDo[] = [
+    {text: 'Demonstrate Components', done: false},
+    {text: 'Demonstrate Structural Directives', done: false},
+    {text: 'Demonstrate NgModules', done: false},
+    {text: 'Demonstrate zoneless changed detection', done: false},
+    {text: 'Demonstrate internationalization', done: false},
+  ];
+
+  // NORMATIVE
+  static ngInjectableDef = defineInjectable({factory: () => new AppState()});
+  // /NORMATIVE
+}
+
+@Component({
+  selector: 'todo-app',
+  template: `
+  <h1>ToDo Application</h1>
+  <div>
+    <todo *ngFor="let todo of appState.todos" [todo]="todo" (archive)="onArchive($event)"></todo>
+  </div>
+  <span>count: {{appState.todos.length}}.</span>
+  `
+})
+class ToDoAppComponent {
+  constructor(public appState: AppState) {}
+
+  onArchive(item: ToDo) {
+    const todos = this.appState.todos;
+    todos.splice(todos.indexOf(item));
+    r3.markDirty(this);
+  }
+
+  // NORMATIVE
+  static ngComponentDef = r3.defineComponent({
+    type: ToDoAppComponent,
+    selectors: [['todo-app']],
+    factory: function ToDoAppComponent_Factory() {
+      return new ToDoAppComponent(r3.directiveInject(AppState));
+    },
+    template: function ToDoAppComponent_Template(rf: $RenderFlags$, ctx: ToDoAppComponent) {
+      if (rf & 1) {
+        const ToDoAppComponent_NgForOf_Template = function ToDoAppComponent_NgForOf_Template(
+            rf: $RenderFlags$, ctx1: NgForOfContext<ToDo>) {
+          if (rf & 1) {
+            r3.E(0, 'todo');
+            r3.L('archive', ctx.onArchive.bind(ctx));
+            r3.e();
+          }
+          if (rf & 2) {
+            r3.p(0, 'todo', r3.b(ctx1.$implicit));
+          }
+        };
+        r3.E(0, 'h1');
+        r3.T(1, 'ToDo Application');
+        r3.e();
+        r3.E(2, 'div');
+        r3.C(3, ToDoAppComponent_NgForOf_Template, '', ['ngForOf', '']);
+        r3.e();
+        r3.E(4, 'span');
+        r3.T(5);
+        r3.e();
+      }
+      if (rf & 2) {
+        r3.t(5, r3.i1('count: ', ctx.appState.todos.length, ''));
+      }
+    }
+  });
+  // /NORMATIVE
+}
+
+// NON-NORMATIVE
+(ToDoAppComponent.ngComponentDef as r3.ComponentDefInternal<any>).directiveDefs = () =>
+    [ToDoItemComponent.ngComponentDef, (NgForOf as r3.DirectiveType<NgForOf<any>>).ngDirectiveDef];
+// /NON-NORMATIVE
+
+@Component({
+  selector: 'todo',
+  template: `
+    <div [class.done]="todo.done">
+      <input type="checkbox" [value]="todo.done" (click)="onCheckboxClick()"></input>
+      <span>{{todo.text}}</span>
+      <button (click)="onArchiveClick()">archive</button>
+    </div>
+  `
+})
+class ToDoItemComponent {
+  static DEFAULT_TODO: ToDo = {text: '', done: false};
+
+  @Input()
+  todo: ToDo = ToDoItemComponent.DEFAULT_TODO;
+
+  @Output()
+  archive = new EventEmitter();
+
+  onCheckboxClick() {
+    this.todo.done = !this.todo.done;
+    r3.markDirty(this);
+  }
+
+  onArchiveClick() { this.archive.emit(this.todo); }
+
+  // NORMATIVE
+  static ngComponentDef = r3.defineComponent({
+    type: ToDoItemComponent,
+    selectors: [['todo']],
+    factory: function ToDoItemComponent_Factory() { return new ToDoItemComponent(); },
+    template: function ToDoItemComponent_Template(rf: $RenderFlags$, ctx: ToDoItemComponent) {
+      if (rf & 1) {
+        r3.E(0, 'div');
+        r3.E(1, 'input', e1_attrs);
+        r3.L('click', ctx.onCheckboxClick.bind(ctx));
+        r3.e();
+        r3.E(2, 'span');
+        r3.T(3);
+        r3.e();
+        r3.E(4, 'button');
+        r3.L('click', ctx.onArchiveClick.bind(ctx));
+        r3.T(5, 'archive');
+        r3.e();
+        r3.e();
+      }
+      if (rf & 2) {
+        r3.p(1, 'value', r3.b(ctx.todo.done));
+        r3.t(3, r3.b(ctx.todo.text));
+      }
+    },
+    inputs: {todo: 'todo'},
+  });
+  // /NORMATIVE
+}
+// NORMATIVE
+const e1_attrs = ['type', 'checkbox'];
+// /NORMATIVE
+
+
+@NgModule({
+  declarations: [ToDoAppComponent, ToDoItemComponent],
+  providers: [AppState],
+})
+class ToDoAppModule {
+  // NORMATIVE
+  static ngInjectorDef = defineInjector({
+    factory: () => new ToDoAppModule(),
+    providers: [AppState],
+  });
+  // /NORMATIVE
+}
+
+
+describe('small_app', () => {
+  xit('should render',
+      () => withBody('<todo-app></todo-app>', async() => {
+        // TODO: Implement this method once all of the pieces of this application can execute.
+        // TODO: add i18n example by translating to french.
+        const todoApp = r3.renderComponent(ToDoAppComponent);
+        await r3.whenRendered(todoApp);
+        expect(r3.getRenderedText(todoApp)).toEqual('...');
+        const firstCheckBox =
+            r3.getHostElement(todoApp).querySelector('input[type=checkbox]') as HTMLElement;
+        firstCheckBox.click();
+        await r3.whenRendered(todoApp);
+        expect(r3.getRenderedText(todoApp)).toEqual('...');
+        const firstArchive = r3.getHostElement(todoApp).querySelector('button') as HTMLElement;
+        firstArchive.click;
+        await r3.whenRendered(todoApp);
+        expect(r3.getRenderedText(todoApp)).toEqual('...');
+      }));
+});
diff --git a/packages/core/test/render3/compiler_canonical/template_variables_spec.ts b/packages/core/test/render3/compiler_canonical/template_variables_spec.ts
new file mode 100644
index 000000000000..5b0bc8fcfee6
--- /dev/null
+++ b/packages/core/test/render3/compiler_canonical/template_variables_spec.ts
@@ -0,0 +1,225 @@
+/**
+ * @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 {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '../../../src/core';
+import * as $r3$ from '../../../src/core_render3_private_export';
+import {ComponentDefInternal} from '../../../src/render3/interfaces/definition';
+import {renderComponent, toHtml} from '../render_util';
+
+
+/// See: `normative.md`
+describe('template variables', () => {
+  type $any$ = any;
+  type $number$ = number;
+  type $RenderFlags$ = $r3$.ɵRenderFlags;
+
+  interface ForOfContext {
+    $implicit: any;
+    index: number;
+    even: boolean;
+    odd: boolean;
+  }
+
+  @Directive({selector: '[forOf]'})
+  class ForOfDirective {
+    // TODO(issue/24571): remove '!'.
+    private previous !: any[];
+
+    constructor(private view: ViewContainerRef, private template: TemplateRef<any>) {}
+
+    // TODO(issue/24571): remove '!'.
+    @Input() forOf !: any[];
+
+    ngOnChanges(simpleChanges: SimpleChanges) {
+      if ('forOf' in simpleChanges) {
+        this.update();
+      }
+    }
+
+    ngDoCheck(): void {
+      const previous = this.previous;
+      const current = this.forOf;
+      if (!previous || previous.length != current.length ||
+          previous.some((value: any, index: number) => current[index] !== previous[index])) {
+        this.update();
+      }
+    }
+
+    private update() {
+      // TODO(chuckj): Not implemented yet
+      // this.view.clear();
+      if (this.forOf) {
+        const current = this.forOf;
+        for (let i = 0; i < current.length; i++) {
+          const context = {$implicit: current[i], index: i, even: i % 2 == 0, odd: i % 2 == 1};
+          // TODO(chuckj): Not implemented yet
+          // this.view.createEmbeddedView(this.template, context);
+        }
+        this.previous = [...this.forOf];
+      }
+    }
+
+    // NORMATIVE
+    static ngDirectiveDef = $r3$.ɵdefineDirective({
+      type: ForOfDirective,
+      selectors: [['', 'forOf', '']],
+      factory: function ForOfDirective_Factory() {
+        return new ForOfDirective($r3$.ɵinjectViewContainerRef(), $r3$.ɵinjectTemplateRef());
+      },
+      // TODO(chuckj): Enable when ngForOf enabling lands.
+      // features: [NgOnChangesFeature],
+      inputs: {forOf: 'forOf'}
+    });
+    // /NORMATIVE
+  }
+
+  it('should support a let variable and reference', () => {
+    type $MyComponent$ = MyComponent;
+
+    interface Item {
+      name: string;
+    }
+
+    @Component({
+      selector: 'my-component',
+      template: `<ul><li *for="let item of items">{{item.name}}</li></ul>`
+    })
+    class MyComponent {
+      items = [{name: 'one'}, {name: 'two'}];
+
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: function MyComponent_Factory() { return new MyComponent(); },
+        template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'ul');
+            $r3$.ɵC(1, MyComponent_ForOfDirective_Template_1, '', ['forOf', '']);
+            $r3$.ɵe();
+          }
+          if (rf & 2) {
+            $r3$.ɵp(1, 'forOf', $r3$.ɵb(ctx.items));
+            $r3$.ɵcR(1);
+            $r3$.ɵcr();
+          }
+
+          function MyComponent_ForOfDirective_Template_1(rf: $RenderFlags$, ctx1: $any$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, 'li');
+              $r3$.ɵT(1);
+              $r3$.ɵe();
+            }
+            let $l0_item$: any;
+            if (rf & 2) {
+              $l0_item$ = ctx1.$implicit;
+              $r3$.ɵt(1, $r3$.ɵi1('', $l0_item$.name, ''));
+            }
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    // NON-NORMATIVE
+    (MyComponent.ngComponentDef as ComponentDefInternal<any>).directiveDefs =
+        [ForOfDirective.ngDirectiveDef];
+    // /NON-NORMATIVE
+
+    // TODO(chuckj): update when the changes to enable ngForOf lands.
+    expect(toHtml(renderComponent(MyComponent))).toEqual('<ul></ul>');
+  });
+
+  it('should support accessing parent template variables', () => {
+    type $MyComponent$ = MyComponent;
+
+    interface Info {
+      description: string;
+    }
+    interface Item {
+      name: string;
+      infos: Info[];
+    }
+
+    @Component({
+      selector: 'my-component',
+      template: `
+        <ul>
+          <li *for="let item of items">
+            <div>{{item.name}}</div>
+            <ul>
+              <li *for="let info of item.infos">
+                {{item.name}}: {{info.description}}
+              </li>
+            </ul>
+          </li>
+        </ul>`
+    })
+    class MyComponent {
+      items: Item[] = [
+        {name: 'one', infos: [{description: '11'}, {description: '12'}]},
+        {name: 'two', infos: [{description: '21'}, {description: '22'}]}
+      ];
+
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: function MyComponent_Factory() { return new MyComponent(); },
+        template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'ul');
+            $r3$.ɵC(1, MyComponent_ForOfDirective_Template_1, '', ['forOf', '']);
+            $r3$.ɵe();
+          }
+          if (rf & 2) {
+            $r3$.ɵp(1, 'forOf', $r3$.ɵb(ctx.items));
+            $r3$.ɵcR(1);
+            $r3$.ɵcr();
+          }
+
+          function MyComponent_ForOfDirective_Template_1(rf1: $RenderFlags$, ctx1: $any$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, 'li');
+              $r3$.ɵE(1, 'div');
+              $r3$.ɵT(2);
+              $r3$.ɵe();
+              $r3$.ɵE(3, 'ul');
+              $r3$.ɵC(4, MyComponent_ForOfDirective_ForOfDirective_Template_3, '', ['forOf', '']);
+              $r3$.ɵe();
+              $r3$.ɵe();
+            }
+            let $l0_item$: any;
+            if (rf & 2) {
+              $l0_item$ = ctx1.$implicit;
+              $r3$.ɵp(4, 'forOf', $r3$.ɵb($l0_item$.infos));
+              $r3$.ɵt(2, $r3$.ɵi1('', $l0_item$.name, ''));
+              $r3$.ɵcR(4);
+              $r3$.ɵcr();
+            }
+
+            function MyComponent_ForOfDirective_ForOfDirective_Template_3(
+                rf2: $number$, ctx2: $any$) {
+              if (rf & 1) {
+                $r3$.ɵE(0, 'li');
+                $r3$.ɵT(1);
+                $r3$.ɵe();
+              }
+              let $l0_info$: any;
+              if (rf & 2) {
+                $l0_info$ = ctx2.$implicit;
+                $r3$.ɵt(1, $r3$.ɵi2(' ', $l0_item$.name, ': ', $l0_info$.description, ' '));
+              }
+            }
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+  });
+});
diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts
new file mode 100644
index 000000000000..7ae35b138ff5
--- /dev/null
+++ b/packages/core/test/render3/component_spec.ts
@@ -0,0 +1,534 @@
+/**
+ * @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 {DoCheck, Input, TemplateRef, ViewContainerRef, ViewEncapsulation, createInjector, defineInjectable, defineInjector} from '../../src/core';
+import {getRenderedText} from '../../src/render3/component';
+import {AttributeMarker, ComponentFactory, LifecycleHooksFeature, defineComponent, directiveInject, markDirty} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, nextContext, text, textBinding, tick} from '../../src/render3/instructions';
+import {ComponentDefInternal, DirectiveDefInternal, RenderFlags} from '../../src/render3/interfaces/definition';
+import {createRendererType2} from '../../src/view/index';
+
+import {NgIf} from './common_with_def';
+import {getRendererFactory2} from './imported_renderer2';
+import {ComponentFixture, containerEl, createComponent, renderComponent, renderToHtml, requestAnimationFrame, toHtml} from './render_util';
+
+describe('component', () => {
+  class CounterComponent {
+    count = 0;
+
+    increment() { this.count++; }
+
+    static ngComponentDef = defineComponent({
+      type: CounterComponent,
+      selectors: [['counter']],
+      template: function(rf: RenderFlags, ctx: CounterComponent) {
+        if (rf & RenderFlags.Create) {
+          text(0);
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(0, bind(ctx.count));
+        }
+      },
+      factory: () => new CounterComponent,
+      inputs: {count: 'count'},
+    });
+  }
+
+  describe('renderComponent', () => {
+    it('should render on initial call', () => {
+      renderComponent(CounterComponent);
+      expect(toHtml(containerEl)).toEqual('0');
+    });
+
+    it('should re-render on input change or method invocation', () => {
+      const component = renderComponent(CounterComponent);
+      expect(toHtml(containerEl)).toEqual('0');
+      component.count = 123;
+      markDirty(component);
+      expect(toHtml(containerEl)).toEqual('0');
+      requestAnimationFrame.flush();
+      expect(toHtml(containerEl)).toEqual('123');
+      component.increment();
+      markDirty(component);
+      expect(toHtml(containerEl)).toEqual('123');
+      requestAnimationFrame.flush();
+      expect(toHtml(containerEl)).toEqual('124');
+    });
+
+    class MyService {
+      constructor(public value: string) {}
+      static ngInjectableDef =
+          defineInjectable({providedIn: 'root', factory: () => new MyService('no-injector')});
+    }
+    class MyComponent {
+      constructor(public myService: MyService) {}
+      static ngComponentDef = defineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: () => new MyComponent(directiveInject(MyService)),
+        template: function(fs: RenderFlags, ctx: MyComponent) {
+          if (fs & RenderFlags.Create) {
+            text(0);
+          }
+          if (fs & RenderFlags.Update) {
+            textBinding(0, bind(ctx.myService.value));
+          }
+        }
+      });
+    }
+
+    class MyModule {
+      static ngInjectorDef = defineInjector({
+        factory: () => new MyModule(),
+        providers: [{provide: MyService, useValue: new MyService('injector')}]
+      });
+    }
+
+    it('should support bootstrapping without injector', () => {
+      const fixture = new ComponentFixture(MyComponent);
+      expect(fixture.html).toEqual('no-injector');
+    });
+
+    it('should support bootstrapping with injector', () => {
+      const fixture = new ComponentFixture(MyComponent, {injector: createInjector(MyModule)});
+      expect(fixture.html).toEqual('injector');
+    });
+
+  });
+
+});
+
+describe('component with a container', () => {
+
+  function showItems(rf: RenderFlags, ctx: {items: string[]}) {
+    if (rf & RenderFlags.Create) {
+      container(0);
+    }
+    if (rf & RenderFlags.Update) {
+      containerRefreshStart(0);
+      {
+        for (const item of ctx.items) {
+          const rf0 = embeddedViewStart(0);
+          {
+            if (rf0 & RenderFlags.Create) {
+              text(0);
+            }
+            if (rf0 & RenderFlags.Update) {
+              textBinding(0, bind(item));
+            }
+          }
+          embeddedViewEnd();
+        }
+      }
+      containerRefreshEnd();
+    }
+  }
+
+  class WrapperComponent {
+    // TODO(issue/24571): remove '!'.
+    items !: string[];
+    static ngComponentDef = defineComponent({
+      type: WrapperComponent,
+      selectors: [['wrapper']],
+      template: function ChildComponentTemplate(rf: RenderFlags, ctx: {items: string[]}) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            const rf0 = embeddedViewStart(0);
+            { showItems(rf0, {items: ctx.items}); }
+            embeddedViewEnd();
+          }
+          containerRefreshEnd();
+        }
+      },
+      factory: () => new WrapperComponent,
+      inputs: {items: 'items'}
+    });
+  }
+
+  function template(rf: RenderFlags, ctx: {items: string[]}) {
+    if (rf & RenderFlags.Create) {
+      element(0, 'wrapper');
+    }
+    if (rf & RenderFlags.Update) {
+      elementProperty(0, 'items', bind(ctx.items));
+    }
+  }
+
+  const defs = [WrapperComponent];
+
+  it('should re-render on input change', () => {
+    const ctx: {items: string[]} = {items: ['a']};
+    expect(renderToHtml(template, ctx, defs)).toEqual('<wrapper>a</wrapper>');
+
+    ctx.items = [...ctx.items, 'b'];
+    expect(renderToHtml(template, ctx, defs)).toEqual('<wrapper>ab</wrapper>');
+  });
+
+});
+
+// TODO: add tests with Native once tests are run in real browser (domino doesn't support shadow
+// root)
+describe('encapsulation', () => {
+  class WrapperComponent {
+    static ngComponentDef = defineComponent({
+      type: WrapperComponent,
+      selectors: [['wrapper']],
+      template: function(rf: RenderFlags, ctx: WrapperComponent) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'encapsulated');
+        }
+      },
+      factory: () => new WrapperComponent,
+      directives: () => [EncapsulatedComponent]
+    });
+  }
+
+  class EncapsulatedComponent {
+    static ngComponentDef = defineComponent({
+      type: EncapsulatedComponent,
+      selectors: [['encapsulated']],
+      template: function(rf: RenderFlags, ctx: EncapsulatedComponent) {
+        if (rf & RenderFlags.Create) {
+          text(0, 'foo');
+          element(1, 'leaf');
+        }
+      },
+      factory: () => new EncapsulatedComponent,
+      encapsulation: ViewEncapsulation.Emulated,
+      styles: [],
+      data: {},
+      directives: () => [LeafComponent]
+    });
+  }
+
+  class LeafComponent {
+    static ngComponentDef = defineComponent({
+      type: LeafComponent,
+      selectors: [['leaf']],
+      template: function(rf: RenderFlags, ctx: LeafComponent) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span');
+          { text(1, 'bar'); }
+          elementEnd();
+        }
+      },
+      factory: () => new LeafComponent,
+    });
+  }
+
+  it('should encapsulate children, but not host nor grand children', () => {
+    renderComponent(WrapperComponent, {rendererFactory: getRendererFactory2(document)});
+    expect(containerEl.outerHTML)
+        .toMatch(
+            /<div host=""><encapsulated _nghost-c(\d+)="">foo<leaf _ngcontent-c\1=""><span>bar<\/span><\/leaf><\/encapsulated><\/div>/);
+  });
+
+  it('should encapsulate host', () => {
+    renderComponent(EncapsulatedComponent, {rendererFactory: getRendererFactory2(document)});
+    expect(containerEl.outerHTML)
+        .toMatch(
+            /<div host="" _nghost-c(\d+)="">foo<leaf _ngcontent-c\1=""><span>bar<\/span><\/leaf><\/div>/);
+  });
+
+  it('should encapsulate host and children with different attributes', () => {
+    class WrapperComponentWith {
+      static ngComponentDef = defineComponent({
+        type: WrapperComponentWith,
+        selectors: [['wrapper']],
+        template: function(rf: RenderFlags, ctx: WrapperComponentWith) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'leaf');
+          }
+        },
+        factory: () => new WrapperComponentWith,
+        encapsulation: ViewEncapsulation.Emulated,
+        styles: [],
+        data: {},
+        directives: () => [LeafComponentwith]
+      });
+    }
+
+    class LeafComponentwith {
+      static ngComponentDef = defineComponent({
+        type: LeafComponentwith,
+        selectors: [['leaf']],
+        template: function(rf: RenderFlags, ctx: LeafComponentwith) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'span');
+            { text(1, 'bar'); }
+            elementEnd();
+          }
+        },
+        factory: () => new LeafComponentwith,
+        encapsulation: ViewEncapsulation.Emulated,
+        styles: [],
+        data: {},
+      });
+    }
+
+    renderComponent(WrapperComponentWith, {rendererFactory: getRendererFactory2(document)});
+    expect(containerEl.outerHTML)
+        .toMatch(
+            /<div host="" _nghost-c(\d+)=""><leaf _ngcontent-c\1="" _nghost-c(\d+)=""><span _ngcontent-c\2="">bar<\/span><\/leaf><\/div>/);
+  });
+
+});
+
+describe('recursive components', () => {
+  let events: string[];
+  let count: number;
+
+  beforeEach(() => {
+    events = [];
+    count = 0;
+  });
+
+  class TreeNode {
+    constructor(
+        public value: number, public depth: number, public left: TreeNode|null,
+        public right: TreeNode|null) {}
+  }
+
+  /**
+   * {{ data.value }}
+   *
+   * % if (data.left != null) {
+   *   <tree-comp [data]="data.left"></tree-comp>
+   * % }
+   * % if (data.right != null) {
+   *   <tree-comp [data]="data.right"></tree-comp>
+   * % }
+   */
+  class TreeComponent {
+    data: TreeNode = _buildTree(0);
+
+    ngDoCheck() { events.push('check' + this.data.value); }
+
+    ngOnDestroy() { events.push('destroy' + this.data.value); }
+
+    static ngComponentDef = defineComponent({
+      type: TreeComponent,
+      selectors: [['tree-comp']],
+      factory: () => new TreeComponent(),
+      template: (rf: RenderFlags, ctx: TreeComponent) => {
+        if (rf & RenderFlags.Create) {
+          text(0);
+          container(1);
+          container(2);
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(0, bind(ctx.data.value));
+          containerRefreshStart(1);
+          {
+            if (ctx.data.left != null) {
+              let rf0 = embeddedViewStart(0);
+              if (rf0 & RenderFlags.Create) {
+                element(0, 'tree-comp');
+              }
+              if (rf0 & RenderFlags.Update) {
+                elementProperty(0, 'data', bind(ctx.data.left));
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+          containerRefreshStart(2);
+          {
+            if (ctx.data.right != null) {
+              let rf0 = embeddedViewStart(0);
+              if (rf0 & RenderFlags.Create) {
+                element(0, 'tree-comp');
+              }
+              if (rf0 & RenderFlags.Update) {
+                elementProperty(0, 'data', bind(ctx.data.right));
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      },
+      inputs: {data: 'data'}
+    });
+  }
+
+  (TreeComponent.ngComponentDef as ComponentDefInternal<TreeComponent>).directiveDefs =
+      () => [TreeComponent.ngComponentDef];
+
+  /**
+   * {{ data.value }}
+   *  <ng-if-tree [data]="data.left" *ngIf="data.left"></ng-if-tree>
+   *  <ng-if-tree [data]="data.right" *ngIf="data.right"></ng-if-tree>
+   */
+  class NgIfTree {
+    data: TreeNode = _buildTree(0);
+
+    ngOnDestroy() { events.push('destroy' + this.data.value); }
+
+    static ngComponentDef = defineComponent({
+      type: NgIfTree,
+      selectors: [['ng-if-tree']],
+      factory: () => new NgIfTree(),
+      template: (rf: RenderFlags, ctx: NgIfTree) => {
+
+        if (rf & RenderFlags.Create) {
+          text(0);
+          container(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
+          container(2, IfTemplate2, '', [AttributeMarker.SelectOnly, 'ngIf']);
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(0, bind(ctx.data.value));
+          elementProperty(1, 'ngIf', bind(ctx.data.left));
+          elementProperty(2, 'ngIf', bind(ctx.data.right));
+        }
+
+      },
+      inputs: {data: 'data'},
+    });
+  }
+
+  function IfTemplate(rf: RenderFlags, left: any) {
+    if (rf & RenderFlags.Create) {
+      elementStart(0, 'ng-if-tree');
+      elementEnd();
+    }
+    if (rf & RenderFlags.Update) {
+      const parent = nextContext();
+      elementProperty(0, 'data', bind(parent.data.left));
+    }
+  }
+
+  function IfTemplate2(rf: RenderFlags, right: any) {
+    if (rf & RenderFlags.Create) {
+      elementStart(0, 'ng-if-tree');
+      elementEnd();
+    }
+    if (rf & RenderFlags.Update) {
+      const parent = nextContext();
+      elementProperty(0, 'data', bind(parent.data.right));
+    }
+  }
+
+  (NgIfTree.ngComponentDef as ComponentDefInternal<NgIfTree>).directiveDefs =
+      () => [NgIfTree.ngComponentDef, NgIf.ngDirectiveDef];
+
+  function _buildTree(currDepth: number): TreeNode {
+    const children = currDepth < 2 ? _buildTree(currDepth + 1) : null;
+    const children2 = currDepth < 2 ? _buildTree(currDepth + 1) : null;
+    return new TreeNode(count++, currDepth, children, children2);
+  }
+
+  it('should check each component just once', () => {
+    const comp = renderComponent(TreeComponent, {hostFeatures: [LifecycleHooksFeature]});
+    expect(getRenderedText(comp)).toEqual('6201534');
+    expect(events).toEqual(['check6', 'check2', 'check0', 'check1', 'check5', 'check3', 'check4']);
+
+    events = [];
+    tick(comp);
+    expect(events).toEqual(['check6', 'check2', 'check0', 'check1', 'check5', 'check3', 'check4']);
+  });
+
+  // This tests that the view tree is set up properly for recursive components
+  it('should call onDestroys properly', () => {
+
+    /**
+     * % if (!skipContent) {
+     *   <tree-comp></tree-comp>
+     * % }
+     */
+    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        if (!ctx.skipContent) {
+          const rf0 = embeddedViewStart(0);
+          if (rf0 & RenderFlags.Create) {
+            elementStart(0, 'tree-comp');
+            elementEnd();
+          }
+          embeddedViewEnd();
+        }
+        containerRefreshEnd();
+      }
+    }, [TreeComponent]);
+
+    const fixture = new ComponentFixture(App);
+    expect(getRenderedText(fixture.component)).toEqual('6201534');
+
+    events = [];
+    fixture.component.skipContent = true;
+    fixture.update();
+    expect(events).toEqual(
+        ['destroy0', 'destroy1', 'destroy2', 'destroy3', 'destroy4', 'destroy5', 'destroy6']);
+  });
+
+  it('should call onDestroys properly with ngIf', () => {
+    /**
+     * % if (!skipContent) {
+     *   <ng-if-tree></ng-if-tree>
+     * % }
+     */
+    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        if (!ctx.skipContent) {
+          const rf0 = embeddedViewStart(0);
+          if (rf0 & RenderFlags.Create) {
+            elementStart(0, 'ng-if-tree');
+            elementEnd();
+          }
+          embeddedViewEnd();
+        }
+        containerRefreshEnd();
+      }
+    }, [NgIfTree]);
+
+    const fixture = new ComponentFixture(App);
+    expect(getRenderedText(fixture.component)).toEqual('6201534');
+
+    events = [];
+    fixture.component.skipContent = true;
+    fixture.update();
+    expect(events).toEqual(
+        ['destroy0', 'destroy1', 'destroy2', 'destroy3', 'destroy4', 'destroy5', 'destroy6']);
+  });
+
+  it('should map inputs minified & unminified names', async() => {
+    class TestInputsComponent {
+      // TODO(issue/24571): remove '!'.
+      minifiedName !: string;
+      static ngComponentDef = defineComponent({
+        type: TestInputsComponent,
+        selectors: [['test-inputs']],
+        inputs: {minifiedName: 'unminifiedName'},
+        factory: () => new TestInputsComponent(),
+        template: function(rf: RenderFlags, ctx: TestInputsComponent): void {
+          // Template not needed for this test
+        }
+      });
+    }
+
+    const testInputsComponentFactory = new ComponentFactory(TestInputsComponent.ngComponentDef);
+
+    expect([
+      {propName: 'minifiedName', templateName: 'unminifiedName'}
+    ]).toEqual(testInputsComponentFactory.inputs);
+
+  });
+
+});
diff --git a/packages/core/test/render3/content_spec.ts b/packages/core/test/render3/content_spec.ts
new file mode 100644
index 000000000000..4d691832755d
--- /dev/null
+++ b/packages/core/test/render3/content_spec.ts
@@ -0,0 +1,1841 @@
+/**
+ * @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 {SelectorFlags} from '@angular/core/src/render3/interfaces/projection';
+
+import {Input, TemplateRef, ViewContainerRef, ViewRef} from '../../src/core';
+import {defineDirective} from '../../src/render3/definition';
+import {injectTemplateRef, injectViewContainerRef} from '../../src/render3/di';
+import {AttributeMarker, detectChanges} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, loadDirective, projection, projectionDef, text} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+
+import {NgIf} from './common_with_def';
+import {ComponentFixture, createComponent, renderComponent, toHtml} from './render_util';
+
+describe('content projection', () => {
+  it('should project content', () => {
+
+    /**
+     * <div><ng-content></ng-content></div>
+     */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { projection(1); }
+        elementEnd();
+      }
+    });
+
+    /**
+     * <child>content</child>
+     */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        { text(1, 'content'); }
+        elementEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
+  });
+
+  it('should project content when root.', () => {
+    /** <ng-content></ng-content> */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+      }
+    });
+
+    /** <child>content</child> */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        { text(1, 'content'); }
+        elementEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child>content</child>');
+  });
+
+  it('should project content with siblings', () => {
+    /** <ng-content></ng-content> */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+      }
+    });
+
+    /**
+     * <child>
+     *  before
+     *  <div>content</div>
+     *  after
+     * </child>
+     */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          text(1, 'before');
+          elementStart(2, 'div');
+          { text(3, 'content'); }
+          elementEnd();
+          text(4, 'after');
+        }
+        elementEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child>before<div>content</div>after</child>');
+  });
+
+  it('should re-project content when root.', () => {
+    /** <div><ng-content></ng-content></div> */
+    const GrandChild = createComponent('grand-child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { projection(1); }
+        elementEnd();
+      }
+    });
+
+    /** <grand-child><ng-content></ng-content></grand-child> */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'grand-child');
+        { projection(1); }
+        elementEnd();
+      }
+    }, [GrandChild]);
+
+    /** <child><b>Hello</b>World!</child> */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          elementStart(1, 'b');
+          text(2, 'Hello');
+          elementEnd();
+          text(3, 'World!');
+        }
+        elementEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent))
+        .toEqual('<child><grand-child><div><b>Hello</b>World!</div></grand-child></child>');
+  });
+
+  it('should project components', () => {
+
+    /** <div><ng-content></ng-content></div> */
+    const Child = createComponent('child', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { projection(1); }
+        elementEnd();
+      }
+    });
+
+    const ProjectedComp = createComponent('projected-comp', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        text(0, 'content');
+      }
+    });
+
+    /**
+     * <child>
+     *   <projected-comp></projected-comp>
+     * </child>
+     */
+    const Parent = createComponent('parent', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        { element(1, 'projected-comp'); }
+        elementEnd();
+      }
+    }, [Child, ProjectedComp]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent))
+        .toEqual('<child><div><projected-comp>content</projected-comp></div></child>');
+  });
+
+  it('should project components that have their own projection', () => {
+    /** <div><ng-content></ng-content></div> */
+    const Child = createComponent('child', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { projection(1); }
+        elementEnd();
+      }
+    });
+
+    /** <p><ng-content></ng-content></p> */
+    const ProjectedComp = createComponent('projected-comp', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'p');
+        projection(1);
+        elementEnd();
+      }
+    });
+
+    /**
+     * <child>
+     *   <projected-comp>
+     *       <div> Some content </div>
+     *       Other content
+     *   </projected-comp>
+     * </child>
+     */
+    const Parent = createComponent('parent', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          elementStart(1, 'projected-comp');
+          {
+            elementStart(2, 'div');
+            text(3, 'Some content');
+            elementEnd();
+            text(4, 'Other content');
+          }
+
+          elementEnd();
+        }
+        elementEnd();
+      }
+    }, [Child, ProjectedComp]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent))
+        .toEqual(
+            '<child><div><projected-comp><p><div>Some content</div>Other content</p></projected-comp></div></child>');
+  });
+
+  it('should project containers', () => {
+    /** <div> <ng-content></ng-content></div> */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { projection(1); }
+        elementEnd();
+      }
+    });
+
+    /**
+     * <child>
+     *     (
+     *      % if (value) {
+     *        content
+     *      % }
+     *     )
+     * </child>
+     */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          text(1, '(');
+          container(2);
+          text(3, ')');
+        }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          if (ctx.value) {
+            let rf0 = embeddedViewStart(0);
+            if (rf0 & RenderFlags.Create) {
+              text(0, 'content');
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child><div>()</div></child>');
+    parent.value = true;
+    detectChanges(parent);
+
+    expect(toHtml(parent)).toEqual('<child><div>(content)</div></child>');
+    parent.value = false;
+    detectChanges(parent);
+
+    expect(toHtml(parent)).toEqual('<child><div>()</div></child>');
+  });
+
+  it('should project containers into root', () => {
+    /** <ng-content></ng-content> */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+      }
+    });
+
+    /**
+     * <child>
+     *    % if (value) {
+     *      content
+     *    % }
+     * </child>
+     */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(1);
+        {
+          if (ctx.value) {
+            let rf0 = embeddedViewStart(0);
+            if (rf0 & RenderFlags.Create) {
+              text(0, 'content');
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child></child>');
+
+    parent.value = true;
+    detectChanges(parent);
+    expect(toHtml(parent)).toEqual('<child>content</child>');
+
+    parent.value = false;
+    detectChanges(parent);
+    expect(toHtml(parent)).toEqual('<child></child>');
+  });
+
+  it('should project containers with if-else.', () => {
+    /** <div><ng-content></ng-content></div> */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { projection(1); }
+        elementEnd();
+      }
+    });
+
+    /**
+     * <child>
+     *     (
+     *       % if (value) {
+     *         content
+     *       % } else {
+     *         else
+     *       % }
+     *     )
+     * </child>
+     */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          text(1, '(');
+          container(2);
+          text(3, ')');
+        }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          if (ctx.value) {
+            let rf0 = embeddedViewStart(0);
+            if (rf0 & RenderFlags.Create) {
+              text(0, 'content');
+            }
+            embeddedViewEnd();
+          } else {
+            if (embeddedViewStart(1)) {
+              text(0, 'else');
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child><div>(else)</div></child>');
+    parent.value = true;
+    detectChanges(parent);
+    expect(toHtml(parent)).toEqual('<child><div>(content)</div></child>');
+    parent.value = false;
+    detectChanges(parent);
+    expect(toHtml(parent)).toEqual('<child><div>(else)</div></child>');
+  });
+
+  it('should support projection into embedded views', () => {
+    let childCmptInstance: any;
+
+    /**
+     * <div>
+     *  % if (!skipContent) {
+     *    <span>
+     *      <ng-content></ng-content>
+     *    </span>
+     *  % }
+     * </div>
+     */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(1);
+        {
+          if (!ctx.skipContent) {
+            let rf0 = embeddedViewStart(0);
+            if (rf0 & RenderFlags.Create) {
+              elementStart(0, 'span');
+              projection(1);
+              elementEnd();
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    });
+
+    /**
+     * <child>
+     *   <div>text</div>
+     *   content
+     * </child>
+     */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          elementStart(1, 'div');
+          { text(2, 'text'); }
+          elementEnd();
+          text(3, 'content');
+        }
+        elementEnd();
+
+        // testing
+        childCmptInstance = loadDirective(0);
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child><div><span><div>text</div>content</span></div></child>');
+
+    childCmptInstance.skipContent = true;
+    detectChanges(parent);
+    expect(toHtml(parent)).toEqual('<child><div></div></child>');
+  });
+
+  it('should support projection into embedded views when no projected nodes', () => {
+    let childCmptInstance: any;
+
+    /**
+     * <div>
+     *  % if (!skipContent) {
+     *      <ng-content></ng-content>
+     *      text
+     *  % }
+     * </div>
+     */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(1);
+        {
+          if (!ctx.skipContent) {
+            let rf0 = embeddedViewStart(0);
+            if (rf0 & RenderFlags.Create) {
+              projection(0);
+              text(1, 'text');
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    });
+
+    /** <child></child> */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'child');
+
+        // testing
+        childCmptInstance = loadDirective(0);
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child><div>text</div></child>');
+
+    childCmptInstance.skipContent = true;
+    detectChanges(parent);
+    expect(toHtml(parent)).toEqual('<child><div></div></child>');
+  });
+
+  it('should support projection into embedded views when ng-content is a root node of an embedded view',
+     () => {
+       let childCmptInstance: any;
+
+       /**
+        * <div>
+        *  % if (!skipContent) {
+         *    <ng-content></ng-content>
+         *  % }
+        * </div>
+        */
+       const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+         if (rf & RenderFlags.Create) {
+           projectionDef();
+           elementStart(0, 'div');
+           { container(1); }
+           elementEnd();
+         }
+         if (rf & RenderFlags.Update) {
+           containerRefreshStart(1);
+           {
+             if (!ctx.skipContent) {
+               let rf0 = embeddedViewStart(0);
+               if (rf0 & RenderFlags.Create) {
+                 projection(0);
+               }
+               embeddedViewEnd();
+             }
+           }
+           containerRefreshEnd();
+         }
+       });
+
+       /**
+        * <child>content</child>
+        */
+       const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+         if (rf & RenderFlags.Create) {
+           elementStart(0, 'child');
+           {
+             childCmptInstance = loadDirective(0);
+             text(1, 'content');
+           }
+           elementEnd();
+         }
+       }, [Child]);
+
+       const parent = renderComponent(Parent);
+       expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
+
+       childCmptInstance.skipContent = true;
+       detectChanges(parent);
+       expect(toHtml(parent)).toEqual('<child><div></div></child>');
+     });
+
+  it('should project containers into containers', () => {
+    /**
+     * <div>
+     *  Before (inside)
+     *  % if (!skipContent) {
+     *    <ng-content></ng-content>
+     *  % }
+     *  After (inside)
+     * </div>
+     */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        {
+          text(1, 'Before (inside)-');
+          container(2);
+          text(3, '-After (inside)');
+        }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          if (!ctx.skipContent) {
+            let rf0 = embeddedViewStart(0);
+            if (rf0 & RenderFlags.Create) {
+              projection(0);
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    });
+
+    /**
+     * <child>
+     *     Before text-
+     *     % if (!skipContent) {
+     *       content
+     *     % }
+     *     -After text
+     * </child>
+     */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          text(1, 'Before text-');
+          container(2);
+          text(3, '-After text');
+        }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          if (!ctx.skipContent) {
+            let rf0 = embeddedViewStart(0);
+            if (rf0 & RenderFlags.Create) {
+              text(0, 'content');
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }, [Child]);
+
+    const fixture = new ComponentFixture(Parent);
+    expect(fixture.html)
+        .toEqual(
+            '<child><div>Before (inside)-Before text-content-After text-After (inside)</div></child>');
+
+    fixture.component.skipContent = true;
+    fixture.update();
+    expect(fixture.html)
+        .toEqual(
+            '<child><div>Before (inside)-Before text--After text-After (inside)</div></child>');
+  });
+
+  it('should re-project containers into containers', () => {
+    /**
+     * <div>
+     *  % if (!skipContent) {
+     *    <ng-content></ng-content>
+     *  % }
+     * </div>
+     */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(1);
+        {
+          if (!ctx.skipContent) {
+            let rf0 = embeddedViewStart(0);
+            if (rf0 & RenderFlags.Create) {
+              projection(0);
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    });
+
+    /**
+     * <child>
+     *     Before text
+     *     % if (!skipContent) {
+     *       <ng-content></ng-content>
+     *     % }
+     *     -After text
+     * </child>
+     */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'child');
+        {
+          text(1, 'Before text');
+          container(2);
+          text(3, '-After text');
+        }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          if (!ctx.skipContent) {
+            let rf0 = embeddedViewStart(0);
+            if (rf0 & RenderFlags.Create) {
+              projection(0);
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }, [Child]);
+
+    let parent: any;
+    /** <parent><p>text</p></parent> */
+    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'parent');
+        {
+          elementStart(1, 'p');
+          { text(2, 'text'); }
+          elementEnd();
+        }
+        elementEnd();
+        // testing
+        parent = loadDirective(0);
+      }
+    }, [Parent]);
+
+    const fixture = new ComponentFixture(App);
+    expect(fixture.html)
+        .toEqual('<parent><child><div>Before text<p>text</p>-After text</div></child></parent>');
+
+    parent.skipContent = true;
+    fixture.update();
+    expect(fixture.html)
+        .toEqual('<parent><child><div>Before text-After text</div></child></parent>');
+  });
+
+  it('should support projection into embedded views when ng-content is a root node of an embedded view, with other nodes after',
+     () => {
+       let childCmptInstance: any;
+
+       /**
+        * <div>
+        *  % if (!skipContent) {
+         *    before-<ng-content></ng-content>-after
+         *  % }
+        * </div>
+        */
+       const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+         if (rf & RenderFlags.Create) {
+           projectionDef();
+           elementStart(0, 'div');
+           { container(1); }
+           elementEnd();
+         }
+         if (rf & RenderFlags.Update) {
+           containerRefreshStart(1);
+           {
+             if (!ctx.skipContent) {
+               let rf0 = embeddedViewStart(0);
+               if (rf0 & RenderFlags.Create) {
+                 text(0, 'before-');
+                 projection(1);
+                 text(2, '-after');
+               }
+               embeddedViewEnd();
+             }
+           }
+           containerRefreshEnd();
+         }
+       });
+
+       /**
+        * <child>content</child>
+        */
+       const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+         if (rf & RenderFlags.Create) {
+           elementStart(0, 'child');
+           {
+             childCmptInstance = loadDirective(0);
+             text(1, 'content');
+           }
+           elementEnd();
+         }
+       }, [Child]);
+
+       const parent = renderComponent(Parent);
+       expect(toHtml(parent)).toEqual('<child><div>before-content-after</div></child>');
+
+       childCmptInstance.skipContent = true;
+       detectChanges(parent);
+       expect(toHtml(parent)).toEqual('<child><div></div></child>');
+     });
+
+  it('should project into dynamic views (with createEmbeddedView)', () => {
+    /**
+     * Before-
+     * <ng-template [ngIf]="showing">
+     *     <ng-content></ng-content>
+     * </ng-template>
+     * -After
+     */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        text(0, 'Before-');
+        container(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
+        text(2, '-After');
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(1, 'ngIf', bind(ctx.showing));
+      }
+
+    }, [NgIf]);
+
+    function IfTemplate(rf1: RenderFlags, ctx: any) {
+      if (rf1 & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+      }
+    }
+
+    let child: {showing: boolean};
+    /**
+     * <child>
+     *     <div>A</div>
+     *     Some text
+     * </child>
+     */
+    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          elementStart(1, 'div');
+          { text(2, 'A'); }
+          elementEnd();
+          text(3, 'Some text');
+        }
+        elementEnd();
+
+        // testing
+        child = loadDirective(0);
+      }
+    }, [Child]);
+
+    const fixture = new ComponentFixture(App);
+    child !.showing = true;
+    fixture.update();
+    expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
+
+    child !.showing = false;
+    fixture.update();
+    expect(fixture.html).toEqual('<child>Before--After</child>');
+
+    child !.showing = true;
+    fixture.update();
+    expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
+  });
+
+  it('should project into dynamic views (with insertion)', () => {
+    /**
+     * Before-
+     * <ng-template [ngIf]="showing">
+     *     <ng-content></ng-content>
+     * </ng-template>
+     * -After
+     */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        text(0, 'Before-');
+        container(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
+        text(2, '-After');
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(1, 'ngIf', bind(ctx.showing));
+      }
+
+    }, [NgIf]);
+
+    function IfTemplate(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+      }
+    }
+
+    let child: {showing: boolean};
+    /**
+     * <child>
+     *     <div>A</div>
+     *     Some text
+     * </child>
+     */
+    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          elementStart(1, 'div');
+          { text(2, 'A'); }
+          elementEnd();
+          text(3, 'Some text');
+        }
+        elementEnd();
+
+        // testing
+        child = loadDirective(0);
+      }
+    }, [Child]);
+
+    const fixture = new ComponentFixture(App);
+    child !.showing = true;
+    fixture.update();
+    expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
+
+    child !.showing = false;
+    fixture.update();
+    expect(fixture.html).toEqual('<child>Before--After</child>');
+
+    child !.showing = true;
+    fixture.update();
+    expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
+  });
+
+  it('should project nodes into the last ng-content', () => {
+    /**
+     * <div><ng-content></ng-content></div>
+     * <span><ng-content></ng-content></span>
+     */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { projection(1); }
+        elementEnd();
+        elementStart(2, 'span');
+        { projection(3); }
+        elementEnd();
+      }
+    });
+
+    /**
+     * <child>content</child>
+     */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        { text(1, 'content'); }
+        elementEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child><div></div><span>content</span></child>');
+  });
+
+  /**
+   * Warning: this test is _not_ in-line with what Angular does atm.
+   * Moreover the current implementation logic will result in DOM nodes
+   * being re-assigned from one parent to another. Proposal: have compiler
+   * to remove all but the latest occurrence of <ng-content> so we generate
+   * only one P(n, m, 0) instruction. It would make it consistent with the
+   * current Angular behaviour:
+   * http://plnkr.co/edit/OAYkNawTDPkYBFTqovTP?p=preview
+   */
+  it('should project nodes into the last available ng-content', () => {
+    let childCmptInstance: any;
+    /**
+     *  <ng-content></ng-content>
+     *  <div>
+     *  % if (show) {
+     *    <ng-content></ng-content>
+     *  % }
+     *  </div>
+     */
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+        elementStart(1, 'div');
+        { container(2); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          if (ctx.show) {
+            let rf0 = embeddedViewStart(0);
+            if (rf0 & RenderFlags.Create) {
+              projection(0);
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    });
+
+    /**
+     * <child>content</child>
+     */
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          childCmptInstance = loadDirective(0);
+          text(1, 'content');
+        }
+        elementEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child>content<div></div></child>');
+
+    childCmptInstance.show = true;
+    detectChanges(parent);
+    expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
+  });
+
+  it('should project with multiple instances of a component with projection', () => {
+    const ProjectionComp = createComponent('projection-comp', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        text(0, 'Before');
+        projection(1);
+        text(2, 'After');
+      }
+    });
+
+    /**
+     * <projection-comp>
+     *     <div>A</div>
+     *     <p>123</p>
+     * </projection-comp>
+     * <projection-comp>
+     *     <div>B</div>
+     *     <p>456</p>
+     * </projection-comp>
+     */
+    const AppComp = createComponent('app-comp', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'projection-comp');
+        {
+          elementStart(1, 'div');
+          { text(2, 'A'); }
+          elementEnd();
+          elementStart(3, 'p');
+          { text(4, '123'); }
+          elementEnd();
+        }
+        elementEnd();
+        elementStart(5, 'projection-comp');
+        {
+          elementStart(6, 'div');
+          { text(7, 'B'); }
+          elementEnd();
+          elementStart(8, 'p');
+          { text(9, '456'); }
+          elementEnd();
+        }
+        elementEnd();
+      }
+    }, [ProjectionComp]);
+
+    const fixture = new ComponentFixture(AppComp);
+    fixture.update();
+    expect(fixture.html)
+        .toEqual(
+            '<projection-comp>Before<div>A</div><p>123</p>After</projection-comp>' +
+            '<projection-comp>Before<div>B</div><p>456</p>After</projection-comp>');
+  });
+
+  it('should re-project with multiple instances of a component with projection', () => {
+    /**
+     * Before
+     * <ng-content></ng-content>
+     * After
+     */
+    const ProjectionComp = createComponent('projection-comp', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        text(0, 'Before');
+        projection(1);
+        text(2, 'After');
+      }
+    });
+
+    /**
+     * <projection-comp>
+     *     <div>A</div>
+     *     <ng-content></ng-content>
+     *     <p>123</p>
+     * </projection-comp>
+     * <projection-comp>
+     *     <div>B</div>
+     *     <p>456</p>
+     * </projection-comp>
+     */
+    const ProjectionParent = createComponent('parent-comp', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'projection-comp');
+        {
+          elementStart(1, 'div');
+          { text(2, 'A'); }
+          elementEnd();
+          projection(3, 0);
+          elementStart(4, 'p');
+          { text(5, '123'); }
+          elementEnd();
+        }
+        elementEnd();
+        elementStart(6, 'projection-comp');
+        {
+          elementStart(7, 'div');
+          { text(8, 'B'); }
+          elementEnd();
+          elementStart(9, 'p');
+          { text(10, '456'); }
+          elementEnd();
+        }
+        elementEnd();
+      }
+    }, [ProjectionComp]);
+
+    /**
+     * <parent-comp>
+     *    **ABC**
+     * </parent-comp>
+     * <parent-comp>
+     *    **DEF**
+     * </parent-comp>
+     */
+    const AppComp = createComponent('app-comp', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'parent-comp');
+        { text(1, '**ABC**'); }
+        elementEnd();
+        elementStart(2, 'parent-comp');
+        { text(3, '**DEF**'); }
+        elementEnd();
+      }
+    }, [ProjectionParent]);
+
+    const fixture = new ComponentFixture(AppComp);
+    fixture.update();
+    expect(fixture.html)
+        .toEqual(
+            '<parent-comp>' +
+            '<projection-comp>Before<div>A</div>**ABC**<p>123</p>After</projection-comp>' +
+            '<projection-comp>Before<div>B</div><p>456</p>After</projection-comp></parent-comp>' +
+            '<parent-comp>' +
+            '<projection-comp>Before<div>A</div>**DEF**<p>123</p>After</projection-comp>' +
+            '<projection-comp>Before<div>B</div><p>456</p>After</projection-comp></parent-comp>');
+  });
+
+  it('should project ng-container at the content root', () => {
+
+    `<ng-content></ng-content>`;
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+      }
+    });
+
+    `<child>
+      <ng-container>
+        <ng-container>
+          content
+        </ng-container>
+      </ng-container>  
+    </child>`;
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          elementContainerStart(1);
+          {
+            elementContainerStart(2);
+            { text(3, 'content'); }
+            elementContainerEnd();
+          }
+          elementContainerEnd();
+        }
+        elementEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child>content</child>');
+  });
+
+  it('should re-project ng-container at the content root', () => {
+
+    `<ng-content></ng-content>`;
+    const GrandChild = createComponent('grand-child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+      }
+    });
+
+    `<grand-child>
+      <ng-content></ng-content>
+    </grand-child>`;
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'grand-child');
+        { projection(1); }
+        elementEnd();
+      }
+    }, [GrandChild]);
+
+    `<child>
+      <ng-container>
+        <ng-container>
+          content
+        </ng-container>
+      </ng-container>  
+    </child>`;
+    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        {
+          elementContainerStart(1);
+          {
+            elementContainerStart(2);
+            { text(3, 'content'); }
+            elementContainerEnd();
+          }
+          elementContainerEnd();
+        }
+        elementEnd();
+      }
+    }, [Child]);
+
+    const parent = renderComponent(Parent);
+    expect(toHtml(parent)).toEqual('<child><grand-child>content</grand-child></child>');
+  });
+
+  describe('with selectors', () => {
+
+    it('should project nodes using attribute selectors', () => {
+      /**
+       *  <div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
+       *  <div id="second"><ng-content select="span[title=toSecond]"></ng-content></div>
+       */
+      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef(
+              [[['span', 'title', 'toFirst']], [['span', 'title', 'toSecond']]],
+              ['span[title=toFirst]', 'span[title=toSecond]']);
+          elementStart(0, 'div', ['id', 'first']);
+          { projection(1, 1); }
+          elementEnd();
+          elementStart(2, 'div', ['id', 'second']);
+          { projection(3, 2); }
+          elementEnd();
+        }
+      });
+
+      /**
+       * <child>
+       *  <span title="toFirst">1</span>
+       *  <span title="toSecond">2</span>
+       * </child>
+       */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'child');
+          {
+            elementStart(1, 'span', ['title', 'toFirst']);
+            { text(2, '1'); }
+            elementEnd();
+            elementStart(3, 'span', ['title', 'toSecond']);
+            { text(4, '2'); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+      }, [Child]);
+
+      const parent = renderComponent(Parent);
+      expect(toHtml(parent))
+          .toEqual(
+              '<child><div id="first"><span title="toFirst">1</span></div><div id="second"><span title="toSecond">2</span></div></child>');
+    });
+
+    // https://stackblitz.com/edit/angular-psokum?file=src%2Fapp%2Fapp.module.ts
+    it('should project nodes where attribute selector matches a binding', () => {
+      /**
+       *  <ng-content select="[title]"></ng-content>
+       */
+      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef([[['', 'title', '']]], ['[title]']);
+          { projection(0, 1); }
+        }
+      });
+
+      /**
+       * <child>
+       *  <span [title]="'Some title'">Has title</span>
+       * </child>
+       */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'child');
+          {
+            elementStart(1, 'span', [AttributeMarker.SelectOnly, 'title']);
+            { text(2, 'Has title'); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(1, 'title', bind('Some title'));
+        }
+      }, [Child]);
+
+      const fixture = new ComponentFixture(Parent);
+      expect(fixture.html).toEqual('<child><span title="Some title">Has title</span></child>');
+
+    });
+
+    it('should project nodes using class selectors', () => {
+      /**
+       *  <div id="first"><ng-content select="span.toFirst"></ng-content></div>
+       *  <div id="second"><ng-content select="span.toSecond"></ng-content></div>
+       */
+      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef(
+              [
+                [['span', SelectorFlags.CLASS, 'toFirst']],
+                [['span', SelectorFlags.CLASS, 'toSecond']]
+              ],
+              ['span.toFirst', 'span.toSecond']);
+          elementStart(0, 'div', ['id', 'first']);
+          { projection(1, 1); }
+          elementEnd();
+          elementStart(2, 'div', ['id', 'second']);
+          { projection(3, 2); }
+          elementEnd();
+        }
+      });
+
+      /**
+       * <child>
+       *  <span class="toFirst">1</span>
+       *  <span class="toSecond">2</span>
+       * </child>
+       */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'child');
+          {
+            elementStart(1, 'span', ['class', 'toFirst']);
+            { text(2, '1'); }
+            elementEnd();
+            elementStart(3, 'span', ['class', 'toSecond']);
+            { text(4, '2'); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+      }, [Child]);
+
+      const parent = renderComponent(Parent);
+      expect(toHtml(parent))
+          .toEqual(
+              '<child><div id="first"><span class="toFirst">1</span></div><div id="second"><span class="toSecond">2</span></div></child>');
+    });
+
+    it('should project nodes using class selectors when element has multiple classes', () => {
+      /**
+       *  <div id="first"><ng-content select="span.toFirst"></ng-content></div>
+       *  <div id="second"><ng-content select="span.toSecond"></ng-content></div>
+       */
+      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef(
+              [
+                [['span', SelectorFlags.CLASS, 'toFirst']],
+                [['span', SelectorFlags.CLASS, 'toSecond']]
+              ],
+              ['span.toFirst', 'span.toSecond']);
+          elementStart(0, 'div', ['id', 'first']);
+          { projection(1, 1); }
+          elementEnd();
+          elementStart(2, 'div', ['id', 'second']);
+          { projection(3, 2); }
+          elementEnd();
+        }
+      });
+
+      /**
+       * <child>
+       *  <span class="other toFirst">1</span>
+       *  <span class="toSecond noise">2</span>
+       * </child>
+       */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'child');
+          {
+            elementStart(1, 'span', ['class', 'other toFirst']);
+            { text(2, '1'); }
+            elementEnd();
+            elementStart(3, 'span', ['class', 'toSecond noise']);
+            { text(4, '2'); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+      }, [Child]);
+
+      const parent = renderComponent(Parent);
+      expect(toHtml(parent))
+          .toEqual(
+              '<child><div id="first"><span class="other toFirst">1</span></div><div id="second"><span class="toSecond noise">2</span></div></child>');
+    });
+
+    it('should project nodes into the first matching selector', () => {
+      /**
+       *  <div id="first"><ng-content select="span"></ng-content></div>
+       *  <div id="second"><ng-content select="span.toSecond"></ng-content></div>
+       */
+      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef(
+              [[['span']], [['span', SelectorFlags.CLASS, 'toSecond']]], ['span', 'span.toSecond']);
+          elementStart(0, 'div', ['id', 'first']);
+          { projection(1, 1); }
+          elementEnd();
+          elementStart(2, 'div', ['id', 'second']);
+          { projection(3, 2); }
+          elementEnd();
+        }
+      });
+
+      /**
+       * <child>
+       *  <span class="toFirst">1</span>
+       *  <span class="toSecond">2</span>
+       * </child>
+       */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'child');
+          {
+            elementStart(1, 'span', ['class', 'toFirst']);
+            { text(2, '1'); }
+            elementEnd();
+            elementStart(3, 'span', ['class', 'toSecond']);
+            { text(4, '2'); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+      }, [Child]);
+
+      const parent = renderComponent(Parent);
+      expect(toHtml(parent))
+          .toEqual(
+              '<child><div id="first"><span class="toFirst">1</span><span class="toSecond">2</span></div><div id="second"></div></child>');
+    });
+
+    it('should allow mixing ng-content with and without selectors', () => {
+      /**
+       *  <div id="first"><ng-content select="span.toFirst"></ng-content></div>
+       *  <div id="second"><ng-content></ng-content></div>
+       */
+      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef([[['span', SelectorFlags.CLASS, 'toFirst']]], ['span.toFirst']);
+          elementStart(0, 'div', ['id', 'first']);
+          { projection(1, 1); }
+          elementEnd();
+          elementStart(2, 'div', ['id', 'second']);
+          { projection(3); }
+          elementEnd();
+        }
+      });
+
+      /**
+       * <child>
+       *  <span class="other toFirst">1</span>
+       *  <span class="toSecond noise">2</span>
+       * </child>
+       */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'child');
+          {
+            elementStart(1, 'span', ['class', 'toFirst']);
+            { text(2, '1'); }
+            elementEnd();
+            elementStart(3, 'span');
+            { text(4, 'remaining'); }
+            elementEnd();
+            text(5, 'more remaining');
+          }
+          elementEnd();
+        }
+      }, [Child]);
+
+      const parent = renderComponent(Parent);
+      expect(toHtml(parent))
+          .toEqual(
+              '<child><div id="first"><span class="toFirst">1</span></div><div id="second"><span>remaining</span>more remaining</div></child>');
+    });
+
+    it('should allow mixing ng-content with and without selectors - ng-content first', () => {
+      /**
+       *  <div id="first"><ng-content></ng-content></div>
+       *  <div id="second"><ng-content select="span.toSecond"></ng-content></div>
+       */
+      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef([[['span', SelectorFlags.CLASS, 'toSecond']]], ['span.toSecond']);
+          elementStart(0, 'div', ['id', 'first']);
+          { projection(1); }
+          elementEnd();
+          elementStart(2, 'div', ['id', 'second']);
+          { projection(3, 1); }
+          elementEnd();
+        }
+      });
+
+      /**
+       * <child>
+       *  <span>1</span>
+       *  <span class="toSecond">2</span>
+       *  remaining
+       * </child>
+       */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'child');
+          {
+            elementStart(1, 'span');
+            { text(2, '1'); }
+            elementEnd();
+            elementStart(3, 'span', ['class', 'toSecond']);
+            { text(4, '2'); }
+            elementEnd();
+            text(5, 'remaining');
+          }
+          elementEnd();
+        }
+      }, [Child]);
+
+      const parent = renderComponent(Parent);
+      expect(toHtml(parent))
+          .toEqual(
+              '<child><div id="first"><span>1</span>remaining</div><div id="second"><span class="toSecond">2</span></div></child>');
+    });
+
+    /**
+     * Descending into projected content for selector-matching purposes is not supported
+     * today: http://plnkr.co/edit/MYQcNfHSTKp9KvbzJWVQ?p=preview
+     */
+    it('should not descend into re-projected content', () => {
+
+      /**
+       *  <ng-content select="span"></ng-content>
+       *  <hr>
+       *  <ng-content></ng-content>
+       */
+      const GrandChild = createComponent('grand-child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef([[['span']]], ['span']);
+          projection(0, 1);
+          element(1, 'hr');
+          projection(2);
+        }
+      });
+
+      /**
+       *  <grand-child>
+       *    <ng-content></ng-content>
+       *    <span>in child template</span>
+       *  </grand-child>
+       */
+      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef();
+          elementStart(0, 'grand-child');
+          {
+            projection(1);
+            elementStart(2, 'span');
+            { text(3, 'in child template'); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+      }, [GrandChild]);
+
+      /**
+       * <child>
+       *  <div>
+       *    parent content
+       *  </div>
+       * </child>
+       */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'child');
+          {
+            elementStart(1, 'span');
+            { text(2, 'parent content'); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+      }, [Child]);
+
+      const parent = renderComponent(Parent);
+      expect(toHtml(parent))
+          .toEqual(
+              '<child><grand-child><span>in child template</span><hr><span>parent content</span></grand-child></child>');
+    });
+
+    it('should match selectors on ng-content nodes with attributes', () => {
+
+      /**
+       * <ng-content select="[card-title]"></ng-content>
+       * <hr>
+       * <ng-content select="[card-content]"></ng-content>
+       */
+      const Card = createComponent('card', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef(
+              [[['', 'card-title', '']], [['', 'card-content', '']]],
+              ['[card-title]', '[card-content]']);
+          projection(0, 1);
+          element(1, 'hr');
+          projection(2, 2);
+        }
+      });
+
+      /**
+       * <card>
+       *  <h1 card-title>Title</h1>
+       *  <ng-content card-content></ng-content>
+       * </card>
+       */
+      const CardWithTitle = createComponent('card-with-title', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef();
+          elementStart(0, 'card');
+          {
+            elementStart(1, 'h1', ['card-title', '']);
+            { text(2, 'Title'); }
+            elementEnd();
+            projection(3, 0, ['card-content', '']);
+          }
+          elementEnd();
+        }
+      }, [Card]);
+
+      /**
+       * <card-with-title>
+       *  content
+       * </card-with-title>
+       */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'card-with-title');
+          { text(1, 'content'); }
+          elementEnd();
+        }
+      }, [CardWithTitle]);
+
+      const app = renderComponent(App);
+      expect(toHtml(app))
+          .toEqual(
+              '<card-with-title><card><h1 card-title="">Title</h1><hr>content</card></card-with-title>');
+    });
+
+
+    it('should support ngProjectAs on elements (including <ng-content>)', () => {
+
+      /**
+       * <ng-content select="[card-title]"></ng-content>
+       * <hr>
+       * <ng-content select="[card-content]"></ng-content>
+       */
+      const Card = createComponent('card', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef(
+              [[['', 'card-title', '']], [['', 'card-content', '']]],
+              ['[card-title]', '[card-content]']);
+          projection(0, 1);
+          element(1, 'hr');
+          projection(2, 2);
+        }
+      });
+
+      /**
+       * <card>
+       *  <h1 ngProjectAs="[card-title]>Title</h1>
+       *  <ng-content ngProjectAs="[card-content]"></ng-content>
+       * </card>
+       */
+      const CardWithTitle = createComponent('card-with-title', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef();
+          elementStart(0, 'card');
+          {
+            elementStart(1, 'h1', ['ngProjectAs', '[card-title]']);
+            { text(2, 'Title'); }
+            elementEnd();
+            projection(3, 0, ['ngProjectAs', '[card-content]']);
+          }
+          elementEnd();
+        }
+      }, [Card]);
+
+      /**
+       * <card-with-title>
+       *  content
+       * </card-with-title>
+       */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'card-with-title');
+          { text(1, 'content'); }
+          elementEnd();
+        }
+      }, [CardWithTitle]);
+
+      const app = renderComponent(App);
+      expect(toHtml(app))
+          .toEqual('<card-with-title><card><h1>Title</h1><hr>content</card></card-with-title>');
+
+    });
+
+    it('should not match selectors against node having ngProjectAs attribute', function() {
+
+      /**
+       *  <ng-content select="div"></ng-content>
+       */
+      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef([[['div']]], ['div']);
+          projection(0, 1);
+        }
+      });
+
+      /**
+       * <child>
+       *  <div ngProjectAs="span">should not project</div>
+       *  <div>should project</div>
+       * </child>
+       */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'child');
+          {
+            elementStart(1, 'div', ['ngProjectAs', 'span']);
+            { text(2, 'should not project'); }
+            elementEnd();
+            elementStart(3, 'div');
+            { text(4, 'should project'); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+      }, [Child]);
+
+      const parent = renderComponent(Parent);
+      expect(toHtml(parent)).toEqual('<child><div>should project</div></child>');
+    });
+
+    it('should match selectors against projected containers', () => {
+
+      /**
+       * <span>
+       *  <ng-content select="div"></ng-content>
+       * </span>
+       */
+      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          projectionDef([[['div']]], ['div']);
+          elementStart(0, 'span');
+          { projection(1, 1); }
+          elementEnd();
+        }
+      });
+
+      /**
+       * <child>
+       *   <div *ngIf="true">content</div>
+       * </child>
+       */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'child');
+          { container(1, undefined, 'div'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(1);
+          {
+            if (true) {
+              let rf0 = embeddedViewStart(0);
+              if (rf0 & RenderFlags.Create) {
+                elementStart(0, 'div');
+                { text(1, 'content'); }
+                elementEnd();
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }, [Child]);
+      const parent = renderComponent(Parent);
+      expect(toHtml(parent)).toEqual('<child><span><div>content</div></span></child>');
+    });
+
+  });
+
+});
diff --git a/packages/core/test/render3/control_flow_spec.ts b/packages/core/test/render3/control_flow_spec.ts
new file mode 100644
index 000000000000..09c8528ffdd1
--- /dev/null
+++ b/packages/core/test/render3/control_flow_spec.ts
@@ -0,0 +1,896 @@
+/**
+ * @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 {defineComponent} from '../../src/render3/definition';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, text, textBinding} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+
+import {ComponentFixture, TemplateFixture, createComponent, renderToHtml} from './render_util';
+
+describe('JS control flow', () => {
+  it('should work with if block', () => {
+    const ctx: {message: string | null, condition: boolean} = {message: 'Hello', condition: true};
+
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'div');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(1);
+        {
+          if (ctx.condition) {
+            let rf1 = embeddedViewStart(1);
+            {
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'span');
+                { text(1); }
+                elementEnd();
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(ctx.message));
+              }
+            }
+            embeddedViewEnd();
+          }
+        }
+      }
+      containerRefreshEnd();
+    }
+
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>');
+
+    ctx.condition = false;
+    ctx.message = 'Hi!';
+    expect(renderToHtml(Template, ctx)).toEqual('<div></div>');
+
+    ctx.condition = true;
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hi!</span></div>');
+  });
+
+  it('should work with nested if blocks', () => {
+    const ctx: {condition: boolean, condition2: boolean} = {condition: true, condition2: true};
+
+    /**
+     * <div>
+     *   % if(ctx.condition) {
+     *     <span>
+     *       % if(ctx.condition2) {
+     *          Hello
+     *       % }
+     *     </span>
+     *   % }
+     * </div>
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'div');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(1);
+        {
+          if (ctx.condition) {
+            let rf1 = embeddedViewStart(1);
+            {
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'span');
+                { container(1); }
+                elementEnd();
+              }
+              if (rf1 & RenderFlags.Update) {
+                containerRefreshStart(1);
+                {
+                  if (ctx.condition2) {
+                    let rf2 = embeddedViewStart(2);
+                    {
+                      if (rf2 & RenderFlags.Create) {
+                        text(0, 'Hello');
+                      }
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>');
+
+    ctx.condition = false;
+    expect(renderToHtml(Template, ctx)).toEqual('<div></div>');
+
+    ctx.condition = true;
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>');
+
+    ctx.condition2 = false;
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span></span></div>');
+
+    ctx.condition2 = true;
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>');
+
+    ctx.condition2 = false;
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span></span></div>');
+
+    ctx.condition = false;
+    expect(renderToHtml(Template, ctx)).toEqual('<div></div>');
+
+    ctx.condition = true;
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span></span></div>');
+
+    ctx.condition2 = true;
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>');
+  });
+
+  it('should work with nested adjacent if blocks', () => {
+    const ctx: {condition: boolean,
+                condition2: boolean,
+                condition3: boolean} = {condition: true, condition2: false, condition3: true};
+
+    /**
+     * % if(ctx.condition) {
+     *   % if(ctx.condition2) {
+     *     Hello
+     *   % }
+     *   % if(ctx.condition3) {
+     *     World
+     *   % }
+     * % }
+     */
+    function createTemplate() { container(0); }
+
+    function updateTemplate() {
+      containerRefreshStart(0);
+      {
+        if (ctx.condition) {
+          let rf1 = embeddedViewStart(1);
+          {
+            if (rf1 & RenderFlags.Create) {
+              { container(0); }
+              { container(1); }
+            }
+            if (rf1 & RenderFlags.Update) {
+              containerRefreshStart(0);
+              {
+                if (ctx.condition2) {
+                  let rf2 = embeddedViewStart(2);
+                  {
+                    if (rf2 & RenderFlags.Create) {
+                      text(0, 'Hello');
+                    }
+                  }
+                  embeddedViewEnd();
+                }
+              }
+              containerRefreshEnd();
+              containerRefreshStart(1);
+              {
+                if (ctx.condition3) {
+                  let rf2 = embeddedViewStart(2);
+                  {
+                    if (rf2 & RenderFlags.Create) {
+                      text(0, 'World');
+                    }
+                  }
+                  embeddedViewEnd();
+                }
+              }
+              containerRefreshEnd();
+            }
+          }
+          embeddedViewEnd();
+        }
+      }
+      containerRefreshEnd();
+    }
+
+    const fixture = new TemplateFixture(createTemplate, updateTemplate);
+    expect(fixture.html).toEqual('World');
+
+    ctx.condition2 = true;
+    fixture.update();
+    expect(fixture.html).toEqual('HelloWorld');
+  });
+
+  it('should work with adjacent if blocks managing views in the same container', () => {
+
+    const ctx = {condition1: true, condition2: true, condition3: true};
+
+    /**
+    *   % if(ctx.condition1) {
+    *     1
+    *   % }; if(ctx.condition2) {
+    *     2
+    *   % }; if(ctx.condition3) {
+    *     3
+    *   % }
+    */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        if (ctx.condition1) {
+          const rf1 = embeddedViewStart(1);
+          if (rf1 & RenderFlags.Create) {
+            text(0, '1');
+          }
+          embeddedViewEnd();
+        }  // can't have ; here due linting rules
+        if (ctx.condition2) {
+          const rf2 = embeddedViewStart(2);
+          if (rf2 & RenderFlags.Create) {
+            text(0, '2');
+          }
+          embeddedViewEnd();
+        }  // can't have ; here due linting rules
+        if (ctx.condition3) {
+          const rf3 = embeddedViewStart(3);
+          if (rf3 & RenderFlags.Create) {
+            text(0, '3');
+          }
+          embeddedViewEnd();
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    expect(renderToHtml(Template, ctx)).toEqual('123');
+
+    ctx.condition2 = false;
+    expect(renderToHtml(Template, ctx)).toEqual('13');
+  });
+
+  it('should work with containers with views as parents', () => {
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'div');
+        { text(1, 'hello'); }
+        elementEnd();
+        container(2);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          if (ctx.condition1) {
+            let rf0 = embeddedViewStart(0);
+            {
+              if (rf0 & RenderFlags.Create) {
+                container(0);
+              }
+              if (rf0 & RenderFlags.Update) {
+                containerRefreshStart(0);
+                {
+                  if (ctx.condition2) {
+                    let rf0 = embeddedViewStart(0);
+                    {
+                      if (rf0 & RenderFlags.Create) {
+                        text(0, 'world');
+                      }
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    expect(renderToHtml(Template, {condition1: true, condition2: true}))
+        .toEqual('<div>hello</div>world');
+    expect(renderToHtml(Template, {condition1: false, condition2: false}))
+        .toEqual('<div>hello</div>');
+
+  });
+
+  it('should work with loop block', () => {
+    const ctx: {data: string[] | null} = {data: ['a', 'b', 'c']};
+
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'ul');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(1);
+        {
+          for (let i = 0; i < ctx.data.length; i++) {
+            let rf1 = embeddedViewStart(1);
+            {
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'li');
+                { text(1); }
+                elementEnd();
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(ctx.data[i]));
+              }
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    expect(renderToHtml(Template, ctx)).toEqual('<ul><li>a</li><li>b</li><li>c</li></ul>');
+
+    ctx.data = ['e', 'f'];
+    expect(renderToHtml(Template, ctx)).toEqual('<ul><li>e</li><li>f</li></ul>');
+
+    ctx.data = [];
+    expect(renderToHtml(Template, ctx)).toEqual('<ul></ul>');
+
+    ctx.data = ['a', 'b', 'c'];
+    expect(renderToHtml(Template, ctx)).toEqual('<ul><li>a</li><li>b</li><li>c</li></ul>');
+
+    ctx.data.push('d');
+    expect(renderToHtml(Template, ctx))
+        .toEqual('<ul><li>a</li><li>b</li><li>c</li><li>d</li></ul>');
+
+    ctx.data = ['e'];
+    expect(renderToHtml(Template, ctx)).toEqual('<ul><li>e</li></ul>');
+  });
+
+  it('should work with nested loop blocks', () => {
+    const ctx: {data: string[][] | null} = {data: [['a', 'b', 'c'], ['m', 'n']]};
+
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'ul');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(1);
+        {
+          for (let i = 0; i < ctx.data[0].length; i++) {
+            let rf1 = embeddedViewStart(1);
+            {
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'li');
+                { container(1); }
+                elementEnd();
+              }
+              if (rf1 & RenderFlags.Update) {
+                containerRefreshStart(1);
+                {
+                  ctx.data[1].forEach((value: string, ind: number) => {
+                    let rf2 = embeddedViewStart(2);
+                    if (rf2 & RenderFlags.Create) {
+                      text(0);
+                    }
+                    if (rf2 & RenderFlags.Update) {
+                      textBinding(0, bind(ctx.data[0][i] + value));
+                    }
+                    embeddedViewEnd();
+                  });
+                }
+                containerRefreshEnd();
+              }
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    expect(renderToHtml(Template, ctx)).toEqual('<ul><li>aman</li><li>bmbn</li><li>cmcn</li></ul>');
+
+    ctx.data = [[], []];
+    expect(renderToHtml(Template, ctx)).toEqual('<ul></ul>');
+  });
+
+  it('should work with nested loop blocks where nested container is a root node', () => {
+
+    /**
+     * <div>
+     *   Before
+     *   % for (let i = 0; i < cafes.length; i++) {
+     *      <h2> {{ cafes[i].name }} </h2>
+     *      % for (let j = 0; j < cafes[i].entrees; j++) {
+     *        {{ cafes[i].entrees[j] }}
+     *      % }
+     *      -
+     *   % }
+     *   After
+     * <div>
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'div');
+        {
+          text(1, 'Before');
+          container(2);
+          text(3, 'After');
+        }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          for (let i = 0; i < ctx.cafes.length; i++) {
+            let rf1 = embeddedViewStart(1);
+            {
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'h2');
+                { text(1); }
+                elementEnd();
+                container(2);
+                text(3, '-');
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(ctx.cafes[i].name));
+                containerRefreshStart(2);
+                {
+                  for (let j = 0; j < ctx.cafes[i].entrees.length; j++) {
+                    let rf2 = embeddedViewStart(2);
+                    if (rf2 & RenderFlags.Create) {
+                      text(0);
+                    }
+                    if (rf2 & RenderFlags.Update) {
+                      textBinding(0, bind(ctx.cafes[i].entrees[j]));
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    const ctx = {
+      cafes: [
+        {name: '1', entrees: ['a', 'b', 'c']}, {name: '2', entrees: ['d', 'e', 'f']},
+        {name: '3', entrees: ['g', 'h', 'i']}
+      ]
+    };
+
+    expect(renderToHtml(Template, ctx))
+        .toEqual('<div>Before<h2>1</h2>abc-<h2>2</h2>def-<h2>3</h2>ghi-After</div>');
+
+    ctx.cafes = [];
+    expect(renderToHtml(Template, ctx)).toEqual('<div>BeforeAfter</div>');
+
+    ctx.cafes = [
+      {name: '1', entrees: ['a', 'c']},
+      {name: '2', entrees: ['d', 'e']},
+    ];
+    expect(renderToHtml(Template, ctx)).toEqual('<div>Before<h2>1</h2>ac-<h2>2</h2>de-After</div>');
+
+  });
+
+  it('should work with loop blocks nested three deep', () => {
+
+    /**
+     * <div>
+     *   Before
+     *   % for (let i = 0; i < cafes.length; i++) {
+       *      <h2> {{ cafes[i].name }} </h2>
+       *      % for (let j = 0; j < cafes[i].entrees.length; j++) {
+       *        <h3>  {{ cafes[i].entrees[j].name }} </h3>
+       *        % for (let k = 0; k < cafes[i].entrees[j].foods.length; k++) {
+       *          {{ cafes[i].entrees[j].foods[k] }}
+       *        % }
+       *      % }
+       *      -
+       *   % }
+     *   After
+     * <div>
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'div');
+        {
+          text(1, 'Before');
+          container(2);
+          text(3, 'After');
+        }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          for (let i = 0; i < ctx.cafes.length; i++) {
+            let rf1 = embeddedViewStart(1);
+            {
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'h2');
+                { text(1); }
+                elementEnd();
+                container(2);
+                text(3, '-');
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(ctx.cafes[i].name));
+                containerRefreshStart(2);
+                {
+                  for (let j = 0; j < ctx.cafes[i].entrees.length; j++) {
+                    let rf1 = embeddedViewStart(1);
+                    {
+                      if (rf1 & RenderFlags.Create) {
+                        elementStart(0, 'h3');
+                        { text(1); }
+                        elementEnd();
+                        container(2);
+                      }
+                      if (rf1 & RenderFlags.Update) {
+                        textBinding(1, bind(ctx.cafes[i].entrees[j].name));
+                        containerRefreshStart(2);
+                        {
+                          for (let k = 0; k < ctx.cafes[i].entrees[j].foods.length; k++) {
+                            let rf2 = embeddedViewStart(1);
+                            if (rf2 & RenderFlags.Create) {
+                              text(0);
+                            }
+                            if (rf2 & RenderFlags.Update) {
+                              textBinding(0, bind(ctx.cafes[i].entrees[j].foods[k]));
+                            }
+                            embeddedViewEnd();
+                          }
+                        }
+                        containerRefreshEnd();
+                      }
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    const ctx = {
+      cafes: [
+        {
+          name: '1',
+          entrees:
+              [{name: 'a', foods: [1, 2]}, {name: 'b', foods: [3, 4]}, {name: 'c', foods: [5, 6]}]
+        },
+        {
+          name: '2',
+          entrees: [
+            {name: 'd', foods: [1, 2]}, {name: 'e', foods: [3, 4]}, {name: 'f', foods: [5, 6]}
+          ]
+        }
+      ]
+    };
+
+    expect(renderToHtml(Template, ctx))
+        .toEqual(
+            '<div>' +
+            'Before' +
+            '<h2>1</h2><h3>a</h3>12<h3>b</h3>34<h3>c</h3>56-' +
+            '<h2>2</h2><h3>d</h3>12<h3>e</h3>34<h3>f</h3>56-' +
+            'After' +
+            '</div>');
+
+    ctx.cafes = [];
+    expect(renderToHtml(Template, ctx)).toEqual('<div>BeforeAfter</div>');
+  });
+
+  it('should work with if/else blocks', () => {
+    const ctx: {message: string | null, condition: boolean} = {message: 'Hello', condition: true};
+
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'div');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(1);
+        {
+          if (ctx.condition) {
+            let rf1 = embeddedViewStart(1);
+            {
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'span');
+                { text(1, 'Hello'); }
+                elementEnd();
+              }
+            }
+            embeddedViewEnd();
+          } else {
+            let rf2 = embeddedViewStart(2);
+            {
+              if (rf2) {
+                elementStart(0, 'div');
+                { text(1, 'Goodbye'); }
+                elementEnd();
+              }
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>');
+
+    ctx.condition = false;
+    expect(renderToHtml(Template, ctx)).toEqual('<div><div>Goodbye</div></div>');
+
+    ctx.condition = true;
+    expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>');
+  });
+
+  it('should work with sibling if blocks with children', () => {
+    let log: string[] = [];
+
+    // Intentionally duplicating the templates in test below so we are
+    // testing the behavior on firstTemplatePass for each of these tests
+    class Comp {
+      static ngComponentDef = defineComponent({
+        type: Comp,
+        selectors: [['comp']],
+        factory: () => {
+          log.push('comp!');
+          return new Comp();
+        },
+        template: function(rf: RenderFlags, ctx: Comp) {}
+      });
+    }
+
+    class App {
+      condition = true;
+      condition2 = true;
+
+      static ngComponentDef = defineComponent({
+        type: App,
+        selectors: [['app']],
+        factory: () => new App(),
+        template: function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'div');
+            container(1);
+            container(2);
+          }
+          if (rf & RenderFlags.Update) {
+            containerRefreshStart(1);
+            {
+              if (ctx.condition) {
+                let rf1 = embeddedViewStart(0);
+                if (rf1 & RenderFlags.Create) {
+                  element(0, 'comp');
+                }
+                embeddedViewEnd();
+              }
+            }
+            containerRefreshEnd();
+            containerRefreshStart(2);
+            {
+              if (ctx.condition2) {
+                let rf1 = embeddedViewStart(0);
+                if (rf1 & RenderFlags.Create) {
+                  element(0, 'comp');
+                }
+                embeddedViewEnd();
+              }
+            }
+            containerRefreshEnd();
+          }
+        },
+        directives: () => [Comp]
+      });
+    }
+
+    const fixture = new ComponentFixture(App);
+    expect(log).toEqual(['comp!', 'comp!']);
+  });
+
+  it('should work with a sibling if block that starts closed', () => {
+    let log: string[] = [];
+
+    // Intentionally duplicating the templates from above so we are
+    // testing the behavior on firstTemplatePass for each of these tests
+    class Comp {
+      static ngComponentDef = defineComponent({
+        type: Comp,
+        selectors: [['comp']],
+        factory: () => {
+          log.push('comp!');
+          return new Comp();
+        },
+        template: function(rf: RenderFlags, ctx: Comp) {}
+      });
+    }
+
+    class App {
+      condition = false;
+      condition2 = true;
+
+      static ngComponentDef = defineComponent({
+        type: App,
+        selectors: [['app']],
+        factory: () => new App(),
+        template: function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'div');
+            container(1);
+            container(2);
+          }
+          if (rf & RenderFlags.Update) {
+            containerRefreshStart(1);
+            {
+              if (ctx.condition) {
+                let rf1 = embeddedViewStart(0);
+                if (rf1 & RenderFlags.Create) {
+                  element(0, 'comp');
+                }
+                embeddedViewEnd();
+              }
+            }
+            containerRefreshEnd();
+            containerRefreshStart(2);
+            {
+              if (ctx.condition2) {
+                let rf1 = embeddedViewStart(0);
+                if (rf1 & RenderFlags.Create) {
+                  element(0, 'comp');
+                }
+                embeddedViewEnd();
+              }
+            }
+            containerRefreshEnd();
+          }
+        },
+        directives: () => [Comp]
+      });
+    }
+
+    const fixture = new ComponentFixture(App);
+    expect(log).toEqual(['comp!']);
+
+    fixture.component.condition = true;
+    fixture.update();
+    expect(log).toEqual(['comp!', 'comp!']);
+  });
+});
+
+describe('JS for loop', () => {
+  it('should work with sibling for blocks', () => {
+    const ctx: {data1: string[] | null,
+                data2: number[] | null} = {data1: ['a', 'b', 'c'], data2: [1, 2]};
+
+    /**
+     * <div>
+     *    % for (let i = 0; i < ctx.data1.length; i++) {
+     *        {{data1[i]}}
+     *    % } for (let j = 0; j < ctx.data2.length; j++) {
+     *        {{data1[j]}}
+     *    % }
+     * </div>
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'div');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(1);
+        {
+          for (let i = 0; i < ctx.data1.length; i++) {
+            let rf2 = embeddedViewStart(1);
+            if (rf2 & RenderFlags.Create) {
+              text(0);
+            }
+            if (rf2 & RenderFlags.Update) {
+              textBinding(0, bind(ctx.data1[i]));
+            }
+            embeddedViewEnd();
+          }
+          for (let j = 0; j < ctx.data2.length; j++) {
+            let rf2 = embeddedViewStart(1);
+            if (rf2 & RenderFlags.Create) {
+              text(0);
+            }
+            if (rf2 & RenderFlags.Update) {
+              textBinding(0, bind(ctx.data2[j]));
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    expect(renderToHtml(Template, ctx)).toEqual('<div>abc12</div>');
+
+    ctx.data1 = ['e', 'f'];
+    expect(renderToHtml(Template, ctx)).toEqual('<div>ef12</div>');
+
+    ctx.data2 = [8];
+    expect(renderToHtml(Template, ctx)).toEqual('<div>ef8</div>');
+
+    ctx.data1 = ['x', 'y'];
+    expect(renderToHtml(Template, ctx)).toEqual('<div>xy8</div>');
+  });
+});
+
+describe('function calls', () => {
+  it('should work', () => {
+    const ctx: {data: string[]} = {data: ['foo', 'bar']};
+
+    function spanify(rf: RenderFlags, ctx: {message: string | null}) {
+      const message = ctx.message;
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'span');
+        { text(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        textBinding(1, bind(message));
+      }
+    }
+
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'div');
+        {
+          text(1, 'Before');
+          container(2);
+          container(3);
+          text(4, 'After');
+        }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          let rf0 = embeddedViewStart(0);
+          { spanify(rf0, {message: ctx.data[0]}); }
+          embeddedViewEnd();
+        }
+        containerRefreshEnd();
+        containerRefreshStart(3);
+        {
+          let rf0 = embeddedViewStart(0);
+          { spanify(rf0, {message: ctx.data[1]}); }
+          embeddedViewEnd();
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    expect(renderToHtml(Template, ctx))
+        .toEqual('<div>Before<span>foo</span><span>bar</span>After</div>');
+
+    ctx.data = [];
+    expect(renderToHtml(Template, ctx)).toEqual('<div>Before<span></span><span></span>After</div>');
+
+  });
+});
diff --git a/packages/core/test/render3/di_spec.ts b/packages/core/test/render3/di_spec.ts
new file mode 100644
index 000000000000..2f359277677e
--- /dev/null
+++ b/packages/core/test/render3/di_spec.ts
@@ -0,0 +1,1415 @@
+/**
+ * @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 {ChangeDetectorRef, ElementRef, Host, InjectFlags, Optional, Self, SkipSelf, TemplateRef, ViewContainerRef, defineInjectable} from '@angular/core';
+import {RenderFlags} from '@angular/core/src/render3/interfaces/definition';
+
+import {defineComponent} from '../../src/render3/definition';
+import {bloomAdd, bloomFindPossibleInjector, getOrCreateNodeInjector, injectAttribute} from '../../src/render3/di';
+import {NgOnChangesFeature, PublicFeature, defineDirective, directiveInject, injectChangeDetectorRef, injectElementRef, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, createLNode, createLViewData, createTView, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, enterView, interpolation2, leaveView, projection, projectionDef, reference, text, textBinding} from '../../src/render3/instructions';
+import {LInjector} from '../../src/render3/interfaces/injector';
+import {AttributeMarker, TNodeType} from '../../src/render3/interfaces/node';
+import {LViewFlags} from '../../src/render3/interfaces/view';
+import {ViewRef} from '../../src/render3/view_ref';
+
+import {ComponentFixture, createComponent, createDirective, renderComponent, renderToHtml, toHtml} from './render_util';
+
+describe('di', () => {
+  describe('no dependencies', () => {
+    it('should create directive with no deps', () => {
+      class Directive {
+        value: string = 'Created';
+        static ngDirectiveDef = defineDirective({
+          type: Directive,
+          selectors: [['', 'dir', '']],
+          factory: () => new Directive,
+          exportAs: 'dir'
+        });
+      }
+
+      /** <div dir #dir="dir"> {{ dir.value }}  </div> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div', ['dir', ''], ['dir', 'dir']);
+          { text(2); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp = reference(1) as any;
+          textBinding(2, bind(tmp.value));
+        }
+      }
+
+      expect(renderToHtml(Template, {}, [Directive])).toEqual('<div dir="">Created</div>');
+    });
+  });
+
+  describe('directive injection', () => {
+    let log: string[] = [];
+
+    class DirB {
+      value = 'DirB';
+      constructor() { log.push(this.value); }
+
+      static ngDirectiveDef = defineDirective({
+        selectors: [['', 'dirB', '']],
+        type: DirB,
+        factory: () => new DirB(),
+        features: [PublicFeature]
+      });
+    }
+
+    beforeEach(() => log = []);
+
+    it('should create directive with intra view dependencies', () => {
+      class DirA {
+        value: string = 'DirA';
+        static ngDirectiveDef = defineDirective({
+          type: DirA,
+          selectors: [['', 'dirA', '']],
+          factory: () => new DirA(),
+          features: [PublicFeature]
+        });
+      }
+
+      class DirC {
+        value: string;
+        constructor(a: DirA, b: DirB) { this.value = a.value + b.value; }
+        static ngDirectiveDef = defineDirective({
+          type: DirC,
+          selectors: [['', 'dirC', '']],
+          factory: () => new DirC(directiveInject(DirA), directiveInject(DirB)),
+          exportAs: 'dirC'
+        });
+      }
+
+      /**
+       * <div dirA>
+       *  <span dirB dirC #dir="dirC"> {{ dir.value }} </span>
+       * </div>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div', ['dirA', '']);
+          {
+            elementStart(1, 'span', ['dirB', '', 'dirC', ''], ['dir', 'dirC']);
+            { text(3); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp = reference(2) as any;
+          textBinding(3, bind(tmp.value));
+        }
+      }
+
+      const defs = [DirA, DirB, DirC];
+      expect(renderToHtml(Template, {}, defs))
+          .toEqual('<div dira=""><span dirb="" dirc="">DirADirB</span></div>');
+    });
+
+    it('should instantiate injected directives in dependency order', () => {
+      class DirA {
+        constructor(dir: DirB) { log.push(`DirA (dep: ${dir.value})`); }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirA', '']],
+          type: DirA,
+          factory: () => new DirA(directiveInject(DirB)),
+        });
+      }
+
+      /** <div dirA dirB></div> */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['dirA', '', 'dirB', '']);
+        }
+      }, [DirA, DirB]);
+
+      new ComponentFixture(App);
+      expect(log).toEqual(['DirB', 'DirA (dep: DirB)']);
+    });
+
+    it('should fallback to the module injector', () => {
+      class DirA {
+        constructor(dir: DirB) { log.push(`DirA (dep: ${dir.value})`); }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirA', '']],
+          type: DirA,
+          factory: () => new DirA(directiveInject(DirB)),
+        });
+      }
+
+      // `<div dirB></div><div dirA></div>`
+      // - dirB is know to the node injectors (it uses the diPublic feature)
+      // - then when dirA tries to inject dirB, it will check the node injector first tree
+      // - if not found, it will check the module injector tree
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['dirB', '']);
+          element(1, 'div', ['dirA', '']);
+        }
+      }, [DirA, DirB]);
+
+      const fakeModuleInjector: any = {
+        get: function(token: any) {
+          const value = token === DirB ? 'module' : 'fail';
+          return {value: value};
+        }
+      };
+
+      new ComponentFixture(App, {injector: fakeModuleInjector});
+      expect(log).toEqual(['DirB', 'DirA (dep: module)']);
+    });
+
+    it('should instantiate injected directives before components', () => {
+      class Comp {
+        constructor(dir: DirB) { log.push(`Comp (dep: ${dir.value})`); }
+
+        static ngComponentDef = defineComponent({
+          selectors: [['comp']],
+          type: Comp,
+          factory: () => new Comp(directiveInject(DirB)),
+          template: (ctx: any, fm: boolean) => {}
+        });
+      }
+
+      /** <comp dirB></comp> */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp', ['dirB', '']);
+        }
+      }, [Comp, DirB]);
+
+      new ComponentFixture(App);
+      expect(log).toEqual(['DirB', 'Comp (dep: DirB)']);
+    });
+
+    it('should inject directives in the correct order in a for loop', () => {
+      class DirA {
+        constructor(dir: DirB) { log.push(`DirA (dep: ${dir.value})`); }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirA', '']],
+          type: DirA,
+          factory: () => new DirA(directiveInject(DirB))
+        });
+      }
+
+      /**
+       * % for(let i = 0; i < 3; i++) {
+       *   <div dirA dirB></div>
+       * % }
+       */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        containerRefreshStart(0);
+        {
+          for (let i = 0; i < 3; i++) {
+            if (embeddedViewStart(0)) {
+              element(0, 'div', ['dirA', '', 'dirB', '']);
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }, [DirA, DirB]);
+
+      new ComponentFixture(App);
+      expect(log).toEqual(
+          ['DirB', 'DirA (dep: DirB)', 'DirB', 'DirA (dep: DirB)', 'DirB', 'DirA (dep: DirB)']);
+    });
+
+    it('should instantiate directives with multiple out-of-order dependencies', () => {
+      class DirA {
+        value = 'DirA';
+        constructor() { log.push(this.value); }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirA', '']],
+          type: DirA,
+          factory: () => new DirA(),
+          features: [PublicFeature]
+        });
+      }
+
+      class DirB {
+        constructor(dirA: DirA, dirC: DirC) {
+          log.push(`DirB (deps: ${dirA.value} and ${dirC.value})`);
+        }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirB', '']],
+          type: DirB,
+          factory: () => new DirB(directiveInject(DirA), directiveInject(DirC))
+        });
+      }
+
+      class DirC {
+        value = 'DirC';
+        constructor() { log.push(this.value); }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirC', '']],
+          type: DirC,
+          factory: () => new DirC(),
+          features: [PublicFeature]
+        });
+      }
+
+      /** <div dirA dirB dirC></div> */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['dirA', '', 'dirB', '', 'dirC', '']);
+        }
+      }, [DirA, DirB, DirC]);
+
+      new ComponentFixture(App);
+      expect(log).toEqual(['DirA', 'DirC', 'DirB (deps: DirA and DirC)']);
+    });
+
+    it('should instantiate in the correct order for complex case', () => {
+      class Comp {
+        constructor(dir: DirD) { log.push(`Comp (dep: ${dir.value})`); }
+
+        static ngComponentDef = defineComponent({
+          selectors: [['comp']],
+          type: Comp,
+          factory: () => new Comp(directiveInject(DirD)),
+          template: (ctx: any, fm: boolean) => {}
+        });
+      }
+
+      class DirA {
+        value = 'DirA';
+        constructor(dir: DirC) { log.push(`DirA (dep: ${dir.value})`); }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirA', '']],
+          type: DirA,
+          factory: () => new DirA(directiveInject(DirC)),
+          features: [PublicFeature]
+        });
+      }
+
+      class DirC {
+        value = 'DirC';
+        constructor(dir: DirB) { log.push(`DirC (dep: ${dir.value})`); }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirC', '']],
+          type: DirC,
+          factory: () => new DirC(directiveInject(DirB)),
+          features: [PublicFeature]
+        });
+      }
+
+      class DirD {
+        value = 'DirD';
+        constructor(dir: DirA) { log.push(`DirD (dep: ${dir.value})`); }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirD', '']],
+          type: DirD,
+          factory: () => new DirD(directiveInject(DirA)),
+          features: [PublicFeature]
+        });
+      }
+
+      /** <comp dirA dirB dirC dirD></comp> */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp', ['dirA', '', 'dirB', '', 'dirC', '', 'dirD', '']);
+        }
+      }, [Comp, DirA, DirB, DirC, DirD]);
+
+      new ComponentFixture(App);
+      expect(log).toEqual(
+          ['DirB', 'DirC (dep: DirB)', 'DirA (dep: DirC)', 'DirD (dep: DirA)', 'Comp (dep: DirD)']);
+    });
+
+    it('should instantiate in correct order with mixed parent and peer dependencies', () => {
+      class DirA {
+        constructor(dirB: DirB, app: App) {
+          log.push(`DirA (deps: ${dirB.value} and ${app.value})`);
+        }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirA', '']],
+          type: DirA,
+          factory: () => new DirA(directiveInject(DirB), directiveInject(App)),
+        });
+      }
+
+      class App {
+        value = 'App';
+
+        static ngComponentDef = defineComponent({
+          selectors: [['app']],
+          type: App,
+          factory: () => new App(),
+          /** <div dirA dirB dirC></div> */
+          template: (rf: RenderFlags, ctx: any) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'div', ['dirA', '', 'dirB', '', 'dirC', 'dirC']);
+            }
+          },
+          directives: [DirA, DirB],
+          features: [PublicFeature],
+        });
+      }
+
+      new ComponentFixture(App);
+      expect(log).toEqual(['DirB', 'DirA (deps: DirB and App)']);
+    });
+
+    it('should not use a parent when peer dep is available', () => {
+      let count = 1;
+
+      class DirA {
+        constructor(dirB: DirB) { log.push(`DirA (dep: DirB - ${dirB.count})`); }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirA', '']],
+          type: DirA,
+          factory: () => new DirA(directiveInject(DirB)),
+        });
+      }
+
+      class DirB {
+        count: number;
+
+        constructor() {
+          log.push(`DirB`);
+          this.count = count++;
+        }
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirB', '']],
+          type: DirB,
+          factory: () => new DirB(),
+          features: [PublicFeature],
+        });
+      }
+
+      /** <div dirA dirB></div> */
+      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['dirA', '', 'dirB', '']);
+        }
+      }, [DirA, DirB]);
+
+      /** <parent dirB></parent> */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent', ['dirB', '']);
+        }
+      }, [Parent, DirB]);
+
+      new ComponentFixture(App);
+      expect(log).toEqual(['DirB', 'DirB', 'DirA (dep: DirB - 2)']);
+    });
+
+    it('should create instance even when no injector present', () => {
+      class MyService {
+        value = 'MyService';
+        static ngInjectableDef =
+            defineInjectable({providedIn: 'root', factory: () => new MyService()});
+      }
+
+      class MyComponent {
+        constructor(public myService: MyService) {}
+        static ngComponentDef = defineComponent({
+          type: MyComponent,
+          selectors: [['my-component']],
+          factory: () => new MyComponent(directiveInject(MyService)),
+          template: function(rf: RenderFlags, ctx: MyComponent) {
+            if (rf & RenderFlags.Create) {
+              text(0);
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(0, bind(ctx.myService.value));
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(MyComponent);
+      fixture.update();
+      expect(fixture.html).toEqual('MyService');
+    });
+
+    it('should throw if directive is not found anywhere', () => {
+      class Dir {
+        constructor(siblingDir: OtherDir) {}
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dir', '']],
+          type: Dir,
+          factory: () => new Dir(directiveInject(OtherDir)),
+          features: [PublicFeature]
+        });
+      }
+
+      class OtherDir {
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'other', '']],
+          type: OtherDir,
+          factory: () => new OtherDir(),
+          features: [PublicFeature]
+        });
+      }
+
+      /** <div dir></div> */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['dir', '']);
+        }
+      }, [Dir, OtherDir]);
+
+      expect(() => new ComponentFixture(App)).toThrowError(/Injector: NOT_FOUND \[OtherDir\]/);
+    });
+
+    it('should throw if directive is not found in ancestor tree', () => {
+      class Dir {
+        constructor(siblingDir: OtherDir) {}
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dir', '']],
+          type: Dir,
+          factory: () => new Dir(directiveInject(OtherDir)),
+          features: [PublicFeature]
+        });
+      }
+
+      class OtherDir {
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'other', '']],
+          type: OtherDir,
+          factory: () => new OtherDir(),
+          features: [PublicFeature]
+        });
+      }
+
+      /**
+       * <div other></div>
+       * <div dir></div>
+       */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['other', '']);
+          element(1, 'div', ['dir', '']);
+        }
+      }, [Dir, OtherDir]);
+
+      expect(() => new ComponentFixture(App)).toThrowError(/Injector: NOT_FOUND \[OtherDir\]/);
+    });
+
+
+    it('should throw if directives try to inject each other', () => {
+      class DirA {
+        constructor(dir: DirB) {}
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirA', '']],
+          type: DirA,
+          factory: () => new DirA(directiveInject(DirB)),
+          features: [PublicFeature]
+        });
+      }
+
+      class DirB {
+        constructor(dir: DirA) {}
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dirB', '']],
+          type: DirB,
+          factory: () => new DirB(directiveInject(DirA)),
+          features: [PublicFeature]
+        });
+      }
+
+      /** <div dirA dirB></div> */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['dirA', '', 'dirB', '']);
+        }
+      }, [DirA, DirB]);
+
+      expect(() => new ComponentFixture(App)).toThrowError(/Cannot instantiate cyclic dependency!/);
+    });
+
+    it('should throw if directive tries to inject itself', () => {
+      class Dir {
+        constructor(dir: Dir) {}
+
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'dir', '']],
+          type: Dir,
+          factory: () => new Dir(directiveInject(Dir)),
+          features: [PublicFeature]
+        });
+      }
+
+      /** <div dir></div> */
+      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['dir', '']);
+        }
+      }, [Dir]);
+
+      expect(() => new ComponentFixture(App)).toThrowError(/Cannot instantiate cyclic dependency!/);
+    });
+
+    describe('flags', () => {
+
+      class DirB {
+        // TODO(issue/24571): remove '!'.
+        value !: string;
+
+        static ngDirectiveDef = defineDirective({
+          type: DirB,
+          selectors: [['', 'dirB', '']],
+          factory: () => new DirB(),
+          inputs: {value: 'dirB'},
+          features: [PublicFeature]
+        });
+      }
+
+      it('should not throw if dependency is @Optional', () => {
+        let dirA: DirA;
+
+        class DirA {
+          constructor(@Optional() public dirB: DirB|null) {}
+
+          static ngDirectiveDef = defineDirective({
+            type: DirA,
+            selectors: [['', 'dirA', '']],
+            factory: () => dirA = new DirA(directiveInject(DirB, InjectFlags.Optional))
+          });
+        }
+
+        /** <div dirA></div> */
+        const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'div', ['dirA', '']);
+          }
+        }, [DirA, DirB]);
+
+        expect(() => {
+          new ComponentFixture(App);
+          expect(dirA !.dirB).toEqual(null);
+        }).not.toThrow();
+      });
+
+      it('should not throw if dependency is @Optional but defined elsewhere', () => {
+        let dirA: DirA;
+
+        class DirA {
+          constructor(@Optional() public dirB: DirB|null) {}
+
+          static ngDirectiveDef = defineDirective({
+            type: DirA,
+            selectors: [['', 'dirA', '']],
+            factory: () => dirA = new DirA(directiveInject(DirB, InjectFlags.Optional))
+          });
+        }
+
+        /**
+         * <div dirB></div>
+         * <div dirA></div>
+         */
+        const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'div', ['dirB', '']);
+            element(1, 'div', ['dirA', '']);
+          }
+        }, [DirA, DirB]);
+
+        expect(() => {
+          new ComponentFixture(App);
+          expect(dirA !.dirB).toEqual(null);
+        }).not.toThrow();
+      });
+
+      it('should skip the current node with @SkipSelf', () => {
+        let dirA: DirA;
+
+        class DirA {
+          constructor(@SkipSelf() public dirB: DirB) {}
+
+          static ngDirectiveDef = defineDirective({
+            type: DirA,
+            selectors: [['', 'dirA', '']],
+            factory: () => dirA = new DirA(directiveInject(DirB, InjectFlags.SkipSelf))
+          });
+        }
+
+        /** <div dirA dirB="self"></div> */
+        const Comp = createComponent('comp', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'div', ['dirA', '', 'dirB', 'self']);
+          }
+        }, [DirA, DirB]);
+
+        /* <comp dirB="parent"></comp> */
+        const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'comp', ['dirB', 'parent']);
+          }
+        }, [Comp, DirB]);
+
+        new ComponentFixture(App);
+        expect(dirA !.dirB.value).toEqual('parent');
+      });
+
+      it('should check only the current node with @Self', () => {
+        let dirA: DirA;
+
+        class DirA {
+          constructor(@Self() public dirB: DirB) {}
+
+          static ngDirectiveDef = defineDirective({
+            type: DirA,
+            selectors: [['', 'dirA', '']],
+            factory: () => dirA = new DirA(directiveInject(DirB, InjectFlags.Self))
+          });
+        }
+
+        /**
+         * <div dirB>
+         *   <div dirA></div>
+         * </div>
+         */
+        const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'div', ['dirB', '']);
+            element(1, 'div', ['dirA', '']);
+            elementEnd();
+          }
+        }, [DirA, DirB]);
+
+        expect(() => { new ComponentFixture(App); }).toThrowError(/Injector: NOT_FOUND \[DirB\]/);
+      });
+
+      it('should check only the current node with @Self even with false positive', () => {
+        let dirA: DirA;
+
+        class DirA {
+          constructor(@Self() public dirB: DirB) {}
+
+          static ngDirectiveDef = defineDirective({
+            type: DirA,
+            selectors: [['', 'dirA', '']],
+            factory: () => dirA = new DirA(directiveInject(DirB, InjectFlags.Self))
+          });
+        }
+
+        const DirC = createDirective('dirC');
+
+        /**
+         * <div dirB>
+         *   <div dirA dirC></div>
+         * </div>
+         */
+        const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'div', ['dirB', '']);
+            element(1, 'div', ['dirA', '', 'dirC', '']);
+            elementEnd();
+          }
+        }, [DirA, DirB, DirC]);
+
+        expect(() => {
+          (DirA as any)['__NG_ELEMENT_ID__'] = 1;
+          (DirC as any)['__NG_ELEMENT_ID__'] = 257;
+          new ComponentFixture(App);
+        }).toThrowError(/Injector: NOT_FOUND \[DirB\]/);
+      });
+
+      it('should not pass component boundary with @Host', () => {
+        let dirA: DirA;
+
+        class DirA {
+          constructor(@Host() public dirB: DirB) {}
+
+          static ngDirectiveDef = defineDirective({
+            type: DirA,
+            selectors: [['', 'dirA', '']],
+            factory: () => dirA = new DirA(directiveInject(DirB, InjectFlags.Host))
+          });
+        }
+
+        /** <div dirA></div> */
+        const Comp = createComponent('comp', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'div', ['dirA', '']);
+          }
+        }, [DirA, DirB]);
+
+        /* <comp dirB></comp> */
+        const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'comp', ['dirB', '']);
+          }
+        }, [Comp, DirB]);
+
+        expect(() => { new ComponentFixture(App); }).toThrowError(/Injector: NOT_FOUND \[DirB\]/);
+
+      });
+
+    });
+
+  });
+
+  describe('ElementRef', () => {
+    it('should create directive with ElementRef dependencies', () => {
+      class Directive {
+        value: string;
+        constructor(public elementRef: ElementRef) {
+          this.value = (elementRef.constructor as any).name;
+        }
+        static ngDirectiveDef = defineDirective({
+          type: Directive,
+          selectors: [['', 'dir', '']],
+          factory: () => new Directive(injectElementRef()),
+          features: [PublicFeature],
+          exportAs: 'dir'
+        });
+      }
+
+      class DirectiveSameInstance {
+        value: boolean;
+        constructor(elementRef: ElementRef, directive: Directive) {
+          this.value = elementRef === directive.elementRef;
+        }
+        static ngDirectiveDef = defineDirective({
+          type: DirectiveSameInstance,
+          selectors: [['', 'dirSame', '']],
+          factory: () => new DirectiveSameInstance(injectElementRef(), directiveInject(Directive)),
+          exportAs: 'dirSame'
+        });
+      }
+
+      /**
+       * <div dir dirSame #dirSame="dirSame" #dir="dir">
+       *   {{ dir.value }} - {{ dirSame.value }}
+       * </div>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div', ['dir', '', 'dirSame', ''], ['dirSame', 'dirSame', 'dir', 'dir']);
+          { text(3); }
+          elementEnd();
+        }
+
+        if (rf & RenderFlags.Update) {
+          const tmp1 = reference(1) as any;
+          const tmp2 = reference(2) as any;
+          textBinding(3, interpolation2('', tmp2.value, '-', tmp1.value, ''));
+        }
+      }
+
+      const defs = [Directive, DirectiveSameInstance];
+      expect(renderToHtml(Template, {}, defs))
+          .toEqual('<div dir="" dirsame="">ElementRef-true</div>');
+    });
+  });
+
+  describe('TemplateRef', () => {
+    it('should create directive with TemplateRef dependencies', () => {
+      class Directive {
+        value: string;
+        constructor(public templateRef: TemplateRef<any>) {
+          this.value = (templateRef.constructor as any).name;
+        }
+        static ngDirectiveDef = defineDirective({
+          type: Directive,
+          selectors: [['', 'dir', '']],
+          factory: () => new Directive(injectTemplateRef()),
+          features: [PublicFeature],
+          exportAs: 'dir'
+        });
+      }
+
+      class DirectiveSameInstance {
+        value: boolean;
+        constructor(templateRef: TemplateRef<any>, directive: Directive) {
+          this.value = templateRef === directive.templateRef;
+        }
+        static ngDirectiveDef = defineDirective({
+          type: DirectiveSameInstance,
+          selectors: [['', 'dirSame', '']],
+          factory: () => new DirectiveSameInstance(injectTemplateRef(), directiveInject(Directive)),
+          exportAs: 'dirSame'
+        });
+      }
+
+      /**
+       * <ng-template dir dirSame #dir="dir" #dirSame="dirSame">
+       *   {{ dir.value }} - {{ dirSame.value }}
+       * </ng-template>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0, function() {
+          }, undefined, ['dir', '', 'dirSame', ''], ['dir', 'dir', 'dirSame', 'dirSame']);
+          text(3);
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp1 = reference(1) as any;
+          const tmp2 = reference(2) as any;
+          textBinding(3, interpolation2('', tmp1.value, '-', tmp2.value, ''));
+        }
+      }
+
+      const defs = [Directive, DirectiveSameInstance];
+      expect(renderToHtml(Template, {}, defs)).toEqual('TemplateRef-true');
+    });
+  });
+
+  describe('ViewContainerRef', () => {
+    it('should create directive with ViewContainerRef dependencies', () => {
+      class Directive {
+        value: string;
+        constructor(public viewContainerRef: ViewContainerRef) {
+          this.value = (viewContainerRef.constructor as any).name;
+        }
+        static ngDirectiveDef = defineDirective({
+          type: Directive,
+          selectors: [['', 'dir', '']],
+          factory: () => new Directive(injectViewContainerRef()),
+          features: [PublicFeature],
+          exportAs: 'dir'
+        });
+      }
+
+      class DirectiveSameInstance {
+        value: boolean;
+        constructor(viewContainerRef: ViewContainerRef, directive: Directive) {
+          this.value = viewContainerRef === directive.viewContainerRef;
+        }
+        static ngDirectiveDef = defineDirective({
+          type: DirectiveSameInstance,
+          selectors: [['', 'dirSame', '']],
+          factory:
+              () => new DirectiveSameInstance(injectViewContainerRef(), directiveInject(Directive)),
+          exportAs: 'dirSame'
+        });
+      }
+
+      /**
+       * <div dir dirSame #dir="dir" #dirSame="dirSame">
+       *   {{ dir.value }} - {{ dirSame.value }}
+       * </div>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div', ['dir', '', 'dirSame', ''], ['dir', 'dir', 'dirSame', 'dirSame']);
+          { text(3); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp1 = reference(1) as any;
+          const tmp2 = reference(2) as any;
+          textBinding(3, interpolation2('', tmp1.value, '-', tmp2.value, ''));
+        }
+      }
+
+      const defs = [Directive, DirectiveSameInstance];
+      expect(renderToHtml(Template, {}, defs))
+          .toEqual('<div dir="" dirsame="">ViewContainerRef-true</div>');
+    });
+  });
+
+  describe('ChangeDetectorRef', () => {
+    let dir: Directive;
+    let dirSameInstance: DirectiveSameInstance;
+    let comp: MyComp;
+
+    class MyComp {
+      constructor(public cdr: ChangeDetectorRef) {}
+
+      static ngComponentDef = defineComponent({
+        type: MyComp,
+        selectors: [['my-comp']],
+        factory: () => comp = new MyComp(injectChangeDetectorRef()),
+        template: function(rf: RenderFlags, ctx: MyComp) {
+          if (rf & RenderFlags.Create) {
+            projectionDef();
+            projection(0);
+          }
+        }
+      });
+    }
+
+    class Directive {
+      value: string;
+
+      constructor(public cdr: ChangeDetectorRef) { this.value = (cdr.constructor as any).name; }
+
+      static ngDirectiveDef = defineDirective({
+        type: Directive,
+        selectors: [['', 'dir', '']],
+        factory: () => dir = new Directive(injectChangeDetectorRef()),
+        features: [PublicFeature],
+        exportAs: 'dir'
+      });
+    }
+
+    class DirectiveSameInstance {
+      constructor(public cdr: ChangeDetectorRef) {}
+
+      static ngDirectiveDef = defineDirective({
+        type: DirectiveSameInstance,
+        selectors: [['', 'dirSame', '']],
+        factory: () => dirSameInstance = new DirectiveSameInstance(injectChangeDetectorRef())
+      });
+    }
+
+    class IfDirective {
+      /* @Input */
+      myIf = true;
+
+      constructor(public template: TemplateRef<any>, public vcr: ViewContainerRef) {}
+
+      ngOnChanges() {
+        if (this.myIf) {
+          this.vcr.createEmbeddedView(this.template);
+        }
+      }
+
+      static ngDirectiveDef = defineDirective({
+        type: IfDirective,
+        selectors: [['', 'myIf', '']],
+        factory: () => new IfDirective(injectTemplateRef(), injectViewContainerRef()),
+        inputs: {myIf: 'myIf'},
+        features: [PublicFeature, NgOnChangesFeature]
+      });
+    }
+
+
+    const directives = [MyComp, Directive, DirectiveSameInstance, IfDirective];
+
+    it('should inject current component ChangeDetectorRef into directives on components', () => {
+      /** <my-comp dir dirSameInstance #dir="dir"></my-comp> {{ dir.value }} */
+      const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'my-comp', ['dir', '', 'dirSame', ''], ['dir', 'dir']);
+          text(2);
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp = reference(1) as any;
+          textBinding(2, bind(tmp.value));
+        }
+      }, directives);
+
+      const app = renderComponent(MyApp);
+      // ChangeDetectorRef is the token, ViewRef has historically been the constructor
+      expect(toHtml(app)).toEqual('<my-comp dir="" dirsame=""></my-comp>ViewRef');
+      expect((comp !.cdr as ViewRef<MyComp>).context).toBe(comp);
+
+      expect(dir !.cdr).toBe(comp !.cdr);
+      expect(dir !.cdr).toBe(dirSameInstance !.cdr);
+    });
+
+    it('should inject host component ChangeDetectorRef into directives on elements', () => {
+
+      class MyApp {
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: () => new MyApp(injectChangeDetectorRef()),
+          /** <div dir dirSameInstance #dir="dir"> {{ dir.value }} </div> */
+          template: function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              elementStart(0, 'div', ['dir', '', 'dirSame', ''], ['dir', 'dir']);
+              { text(2); }
+              elementEnd();
+            }
+            if (rf & RenderFlags.Update) {
+              const tmp = reference(1) as any;
+              textBinding(2, bind(tmp.value));
+            }
+          },
+          directives: directives
+        });
+      }
+
+      const app = renderComponent(MyApp);
+      expect(toHtml(app)).toEqual('<div dir="" dirsame="">ViewRef</div>');
+      expect((app !.cdr as ViewRef<MyApp>).context).toBe(app);
+
+      expect(dir !.cdr).toBe(app.cdr);
+      expect(dir !.cdr).toBe(dirSameInstance !.cdr);
+    });
+
+    it('should inject host component ChangeDetectorRef into directives in ContentChildren', () => {
+      class MyApp {
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: () => new MyApp(injectChangeDetectorRef()),
+          /**
+           * <my-comp>
+           *   <div dir dirSameInstance #dir="dir"></div>
+           * </my-comp>
+           * {{ dir.value }}
+           */
+          template: function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              elementStart(0, 'my-comp');
+              { element(1, 'div', ['dir', '', 'dirSame', ''], ['dir', 'dir']); }
+              elementEnd();
+              text(3);
+            }
+            if (rf & RenderFlags.Update) {
+              const tmp = reference(2) as any;
+              textBinding(3, bind(tmp.value));
+            }
+          },
+          directives: directives
+        });
+      }
+
+      const app = renderComponent(MyApp);
+      expect(toHtml(app)).toEqual('<my-comp><div dir="" dirsame=""></div></my-comp>ViewRef');
+      expect((app !.cdr as ViewRef<MyApp>).context).toBe(app);
+
+      expect(dir !.cdr).toBe(app !.cdr);
+      expect(dir !.cdr).toBe(dirSameInstance !.cdr);
+    });
+
+    it('should inject host component ChangeDetectorRef into directives in embedded views', () => {
+
+      class MyApp {
+        showing = true;
+
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: () => new MyApp(injectChangeDetectorRef()),
+          /**
+           * % if (showing) {
+           *   <div dir dirSameInstance #dir="dir"> {{ dir.value }} </div>
+           * % }
+           */
+          template: function(rf: RenderFlags, ctx: MyApp) {
+            if (rf & RenderFlags.Create) {
+              container(0);
+            }
+            if (rf & RenderFlags.Update) {
+              containerRefreshStart(0);
+              {
+                if (ctx.showing) {
+                  let rf1 = embeddedViewStart(0);
+                  if (rf1 & RenderFlags.Create) {
+                    elementStart(0, 'div', ['dir', '', 'dirSame', ''], ['dir', 'dir']);
+                    { text(2); }
+                    elementEnd();
+                  }
+                  if (rf1 & RenderFlags.Update) {
+                    const tmp = reference(1) as any;
+                    textBinding(2, bind(tmp.value));
+                  }
+                }
+                embeddedViewEnd();
+              }
+              containerRefreshEnd();
+            }
+          },
+          directives: directives
+        });
+      }
+
+      const app = renderComponent(MyApp);
+      expect(toHtml(app)).toEqual('<div dir="" dirsame="">ViewRef</div>');
+      expect((app !.cdr as ViewRef<MyApp>).context).toBe(app);
+
+      expect(dir !.cdr).toBe(app.cdr);
+      expect(dir !.cdr).toBe(dirSameInstance !.cdr);
+    });
+
+    it('should inject host component ChangeDetectorRef into directives on containers', () => {
+      class MyApp {
+        showing = true;
+
+        constructor(public cdr: ChangeDetectorRef) {}
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          selectors: [['my-app']],
+          factory: () => new MyApp(injectChangeDetectorRef()),
+          /** <div *myIf="showing" dir dirSameInstance #dir="dir"> {{ dir.value }} </div> */
+          template: function(rf: RenderFlags, ctx: MyApp) {
+            if (rf & RenderFlags.Create) {
+              container(0, C1, null, ['myIf', 'showing']);
+            }
+            if (rf & RenderFlags.Update) {
+              containerRefreshStart(0);
+              containerRefreshEnd();
+            }
+
+            function C1(rf1: RenderFlags, ctx1: any) {
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'div', ['dir', '', 'dirSame', ''], ['dir', 'dir']);
+                { text(2); }
+                elementEnd();
+              }
+              if (rf1 & RenderFlags.Update) {
+                const tmp = reference(1) as any;
+                textBinding(2, bind(tmp.value));
+              }
+            }
+          },
+          directives: directives
+        });
+      }
+
+      const app = renderComponent(MyApp);
+      expect(toHtml(app)).toEqual('<div dir="" dirsame="">ViewRef</div>');
+      expect((app !.cdr as ViewRef<MyApp>).context).toBe(app);
+
+      expect(dir !.cdr).toBe(app.cdr);
+      expect(dir !.cdr).toBe(dirSameInstance !.cdr);
+    });
+  });
+
+  describe('@Attribute', () => {
+
+    it('should inject attribute', () => {
+      let exist = 'wrong' as string | undefined;
+      let nonExist = 'wrong' as string | undefined;
+
+      const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div', ['exist', 'existValue', 'other', 'ignore']);
+          exist = injectAttribute('exist');
+          nonExist = injectAttribute('nonExist');
+        }
+      });
+
+      new ComponentFixture(MyApp);
+      expect(exist).toEqual('existValue');
+      expect(nonExist).toEqual(undefined);
+    });
+
+    // https://stackblitz.com/edit/angular-8ytqkp?file=src%2Fapp%2Fapp.component.ts
+    it('should not inject attributes representing bindings and outputs', () => {
+      let exist = 'wrong' as string | undefined;
+      let nonExist = 'wrong' as string | undefined;
+
+      const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div', ['exist', 'existValue', AttributeMarker.SelectOnly, 'nonExist']);
+          exist = injectAttribute('exist');
+          nonExist = injectAttribute('nonExist');
+        }
+      });
+
+      new ComponentFixture(MyApp);
+      expect(exist).toEqual('existValue');
+      expect(nonExist).toEqual(undefined);
+    });
+
+    it('should not accidentally inject attributes representing bindings and outputs', () => {
+      let exist = 'wrong' as string | undefined;
+      let nonExist = 'wrong' as string | undefined;
+
+      const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div', [
+            'exist', 'existValue', AttributeMarker.SelectOnly, 'binding1', 'nonExist', 'binding2'
+          ]);
+          exist = injectAttribute('exist');
+          nonExist = injectAttribute('nonExist');
+        }
+      });
+
+      new ComponentFixture(MyApp);
+      expect(exist).toEqual('existValue');
+      expect(nonExist).toEqual(undefined);
+    });
+  });
+
+  describe('inject', () => {
+    describe('bloom filter', () => {
+      let di: LInjector;
+      beforeEach(() => {
+        di = {} as any;
+        di.bf0 = 0;
+        di.bf1 = 0;
+        di.bf2 = 0;
+        di.bf3 = 0;
+        di.bf4 = 0;
+        di.bf5 = 0;
+        di.bf6 = 0;
+        di.bf7 = 0;
+        di.bf3 = 0;
+        di.cbf0 = 0;
+        di.cbf1 = 0;
+        di.cbf2 = 0;
+        di.cbf3 = 0;
+        di.cbf4 = 0;
+        di.cbf5 = 0;
+        di.cbf6 = 0;
+        di.cbf7 = 0;
+      });
+
+      function bloomState() {
+        return [di.bf7, di.bf6, di.bf5, di.bf4, di.bf3, di.bf2, di.bf1, di.bf0];
+      }
+
+      it('should add values', () => {
+        bloomAdd(di, { __NG_ELEMENT_ID__: 0 } as any);
+        expect(bloomState()).toEqual([0, 0, 0, 0, 0, 0, 0, 1]);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 32 + 1 } as any);
+        expect(bloomState()).toEqual([0, 0, 0, 0, 0, 0, 2, 1]);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 64 + 2 } as any);
+        expect(bloomState()).toEqual([0, 0, 0, 0, 0, 4, 2, 1]);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 96 + 3 } as any);
+        expect(bloomState()).toEqual([0, 0, 0, 0, 8, 4, 2, 1]);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 128 + 4 } as any);
+        expect(bloomState()).toEqual([0, 0, 0, 16, 8, 4, 2, 1]);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 160 + 5 } as any);
+        expect(bloomState()).toEqual([0, 0, 32, 16, 8, 4, 2, 1]);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 192 + 6 } as any);
+        expect(bloomState()).toEqual([0, 64, 32, 16, 8, 4, 2, 1]);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 224 + 7 } as any);
+        expect(bloomState()).toEqual([128, 64, 32, 16, 8, 4, 2, 1]);
+      });
+
+      it('should query values', () => {
+        bloomAdd(di, { __NG_ELEMENT_ID__: 0 } as any);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 32 } as any);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 64 } as any);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 96 } as any);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 127 } as any);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 161 } as any);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 188 } as any);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 223 } as any);
+        bloomAdd(di, { __NG_ELEMENT_ID__: 255 } as any);
+
+        expect(bloomFindPossibleInjector(di, 0, InjectFlags.Default)).toEqual(di);
+        expect(bloomFindPossibleInjector(di, 1, InjectFlags.Default)).toEqual(null);
+        expect(bloomFindPossibleInjector(di, 32, InjectFlags.Default)).toEqual(di);
+        expect(bloomFindPossibleInjector(di, 64, InjectFlags.Default)).toEqual(di);
+        expect(bloomFindPossibleInjector(di, 96, InjectFlags.Default)).toEqual(di);
+        expect(bloomFindPossibleInjector(di, 127, InjectFlags.Default)).toEqual(di);
+        expect(bloomFindPossibleInjector(di, 161, InjectFlags.Default)).toEqual(di);
+        expect(bloomFindPossibleInjector(di, 188, InjectFlags.Default)).toEqual(di);
+        expect(bloomFindPossibleInjector(di, 223, InjectFlags.Default)).toEqual(di);
+        expect(bloomFindPossibleInjector(di, 255, InjectFlags.Default)).toEqual(di);
+      });
+    });
+
+    it('should inject from parent view', () => {
+      const ParentDirective = createDirective('parentDir');
+
+      class ChildDirective {
+        value: string;
+        constructor(public parent: any) { this.value = (parent.constructor as any).name; }
+        static ngDirectiveDef = defineDirective({
+          type: ChildDirective,
+          selectors: [['', 'childDir', '']],
+          factory: () => new ChildDirective(directiveInject(ParentDirective)),
+          features: [PublicFeature],
+          exportAs: 'childDir'
+        });
+      }
+
+      class Child2Directive {
+        value: boolean;
+        constructor(parent: any, child: ChildDirective) { this.value = parent === child.parent; }
+        static ngDirectiveDef = defineDirective({
+          selectors: [['', 'child2Dir', '']],
+          type: Child2Directive,
+          factory: () => new Child2Directive(
+                       directiveInject(ParentDirective), directiveInject(ChildDirective)),
+          exportAs: 'child2Dir'
+        });
+      }
+
+      /**
+       * <div parentDir>
+       *    <span childDir child2Dir #child1="childDir" #child2="child2Dir">
+       *      {{ child1.value }} - {{ child2.value }}
+       *    </span>
+       * </div>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div', ['parentDir', '']);
+          { container(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(1);
+          {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              elementStart(
+                  0, 'span', ['childDir', '', 'child2Dir', ''],
+                  ['child1', 'childDir', 'child2', 'child2Dir']);
+              { text(3); }
+              elementEnd();
+            }
+            if (rf & RenderFlags.Update) {
+              const tmp1 = reference(1) as any;
+              const tmp2 = reference(2) as any;
+              textBinding(3, interpolation2('', tmp1.value, '-', tmp2.value, ''));
+            }
+            embeddedViewEnd();
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      const defs = [ChildDirective, Child2Directive, ParentDirective];
+      expect(renderToHtml(Template, {}, defs))
+          .toEqual('<div parentdir=""><span child2dir="" childdir="">Directive-true</span></div>');
+    });
+
+    it('should inject from module Injector', () => {
+
+                                             });
+  });
+
+  describe('getOrCreateNodeInjector', () => {
+    it('should handle initial undefined state', () => {
+      const contentView = createLViewData(
+          null !, createTView(-1, null, null, null, null), null, LViewFlags.CheckAlways);
+      const oldView = enterView(contentView, null !);
+      try {
+        const parent = createLNode(0, TNodeType.Element, null, null, null, null);
+
+        // Simulate the situation where the previous parent is not initialized.
+        // This happens on first bootstrap because we don't init existing values
+        // so that we have smaller HelloWorld.
+        (parent.tNode as{parent: any}).parent = undefined;
+
+        const injector: any = getOrCreateNodeInjector();  // TODO: Review use of `any` here (#19904)
+        expect(injector).not.toBe(null);
+      } finally {
+        leaveView(oldView);
+      }
+    });
+  });
+
+});
diff --git a/packages/core/test/render3/directive_spec.ts b/packages/core/test/render3/directive_spec.ts
new file mode 100644
index 000000000000..5880a5f587ae
--- /dev/null
+++ b/packages/core/test/render3/directive_spec.ts
@@ -0,0 +1,184 @@
+/**
+ * @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 {EventEmitter} from '@angular/core';
+
+import {AttributeMarker, defineDirective} from '../../src/render3/index';
+import {bind, element, elementEnd, elementProperty, elementStart, listener, loadDirective} from '../../src/render3/instructions';
+
+import {TemplateFixture} from './render_util';
+
+describe('directive', () => {
+
+  describe('host', () => {
+
+    it('should support host bindings in directives', () => {
+      let directiveInstance: Directive|undefined;
+
+      class Directive {
+        klass = 'foo';
+        static ngDirectiveDef = defineDirective({
+          type: Directive,
+          selectors: [['', 'dir', '']],
+          factory: () => directiveInstance = new Directive,
+          hostBindings: (directiveIndex: number, elementIndex: number) => {
+            elementProperty(
+                elementIndex, 'className', bind(loadDirective<Directive>(directiveIndex).klass));
+          }
+        });
+      }
+
+      function Template() { element(0, 'span', [AttributeMarker.SelectOnly, 'dir']); }
+
+      const fixture = new TemplateFixture(Template, () => {}, [Directive]);
+      expect(fixture.html).toEqual('<span class="foo"></span>');
+
+      directiveInstance !.klass = 'bar';
+      fixture.update();
+      expect(fixture.html).toEqual('<span class="bar"></span>');
+    });
+
+  });
+
+  describe('selectors', () => {
+
+    it('should match directives with attribute selectors on bindings', () => {
+      let directiveInstance: Directive;
+
+      class Directive {
+        static ngDirectiveDef = defineDirective({
+          type: Directive,
+          selectors: [['', 'test', '']],
+          factory: () => directiveInstance = new Directive,
+          inputs: {test: 'test', other: 'other'}
+        });
+
+        // TODO(issue/24571): remove '!'.
+        testValue !: boolean;
+        // TODO(issue/24571): remove '!'.
+        other !: boolean;
+
+        /**
+         * A setter to assert that a binding is not invoked with stringified attribute value
+         */
+        set test(value: any) {
+          // if a binding is processed correctly we should only be invoked with a false Boolean
+          // and never with the "false" string literal
+          this.testValue = value;
+          if (value !== false) {
+            fail('Should only be called with a false Boolean value, got a non-falsy value');
+          }
+        }
+      }
+
+      /**
+       * <span [test]="false" [other]="true"></span>
+       */
+      function createTemplate() {
+        // using 2 bindings to show example shape of attributes array
+        element(0, 'span', ['class', 'fade', AttributeMarker.SelectOnly, 'test', 'other']);
+      }
+
+      function updateTemplate() { elementProperty(0, 'test', bind(false)); }
+
+      const fixture = new TemplateFixture(createTemplate, updateTemplate, [Directive]);
+
+      // the "test" attribute should not be reflected in the DOM as it is here only for directive
+      // matching purposes
+      expect(fixture.html).toEqual('<span class="fade"></span>');
+      expect(directiveInstance !.testValue).toBe(false);
+    });
+
+    it('should not accidentally set inputs from attributes extracted from bindings / outputs',
+       () => {
+         let directiveInstance: Directive;
+
+         class Directive {
+           static ngDirectiveDef = defineDirective({
+             type: Directive,
+             selectors: [['', 'test', '']],
+             factory: () => directiveInstance = new Directive,
+             inputs: {test: 'test', prop1: 'prop1', prop2: 'prop2'}
+           });
+
+           // TODO(issue/24571): remove '!'.
+           prop1 !: boolean;
+           // TODO(issue/24571): remove '!'.
+           prop2 !: boolean;
+           // TODO(issue/24571): remove '!'.
+           testValue !: boolean;
+
+
+           /**
+            * A setter to assert that a binding is not invoked with stringified attribute value
+            */
+           set test(value: any) {
+             // if a binding is processed correctly we should only be invoked with a false Boolean
+             // and never with the "false" string literal
+             this.testValue = value;
+             if (value !== false) {
+               fail('Should only be called with a false Boolean value, got a non-falsy value');
+             }
+           }
+         }
+
+         /**
+          * <span class="fade" [prop1]="true" [test]="false" [prop2]="true"></span>
+          */
+         function createTemplate() {
+           // putting name (test) in the "usual" value position
+           element(
+               0, 'span', ['class', 'fade', AttributeMarker.SelectOnly, 'prop1', 'test', 'prop2']);
+         }
+
+         function updateTemplate() {
+           elementProperty(0, 'prop1', bind(true));
+           elementProperty(0, 'test', bind(false));
+           elementProperty(0, 'prop2', bind(true));
+         }
+
+         const fixture = new TemplateFixture(createTemplate, updateTemplate, [Directive]);
+
+         // the "test" attribute should not be reflected in the DOM as it is here only for directive
+         // matching purposes
+         expect(fixture.html).toEqual('<span class="fade"></span>');
+         expect(directiveInstance !.testValue).toBe(false);
+       });
+
+    it('should match directives with attribute selectors on outputs', () => {
+      let directiveInstance: Directive;
+
+      class Directive {
+        static ngDirectiveDef = defineDirective({
+          type: Directive,
+          selectors: [['', 'out', '']],
+          factory: () => directiveInstance = new Directive,
+          outputs: {out: 'out'}
+        });
+
+        out = new EventEmitter();
+      }
+
+      /**
+       * <span (out)="someVar = true"></span>
+       */
+      function createTemplate() {
+        elementStart(0, 'span', [AttributeMarker.SelectOnly, 'out']);
+        { listener('out', () => {}); }
+        elementEnd();
+      }
+
+      const fixture = new TemplateFixture(createTemplate, () => {}, [Directive]);
+
+      // "out" should not be part of reflected attributes
+      expect(fixture.html).toEqual('<span></span>');
+      expect(directiveInstance !).not.toBeUndefined();
+    });
+
+  });
+});
diff --git a/packages/core/test/render3/domino.d.ts b/packages/core/test/render3/domino.d.ts
new file mode 100644
index 000000000000..ea774b9c78c9
--- /dev/null
+++ b/packages/core/test/render3/domino.d.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
+ */
+
+declare module 'domino' {
+  function createWindow(html: string, url: string): Window;
+  const impl: {Element: any};
+}
diff --git a/packages/core/test/render3/exports_spec.ts b/packages/core/test/render3/exports_spec.ts
new file mode 100644
index 000000000000..d78f2d353d01
--- /dev/null
+++ b/packages/core/test/render3/exports_spec.ts
@@ -0,0 +1,403 @@
+/**
+ * @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 {AttributeMarker, defineComponent, defineDirective} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementEnd, elementProperty, elementStart, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation2, nextContext, reference, text, textBinding} from '../../src/render3/instructions';
+import {InitialStylingFlags, RenderFlags} from '../../src/render3/interfaces/definition';
+
+import {NgIf} from './common_with_def';
+import {ComponentFixture, createComponent, renderToHtml} from './render_util';
+
+describe('exports', () => {
+  it('should support export of DOM element', () => {
+
+    /** <input value="one" #myInput> {{ myInput.value }} */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'input', ['value', 'one'], ['myInput', '']);
+        text(2);
+      }
+      if (rf & RenderFlags.Update) {
+        const tmp = reference(1) as any;
+        textBinding(2, tmp.value);
+      }
+    }
+
+    expect(renderToHtml(Template, {})).toEqual('<input value="one">one');
+  });
+
+  it('should support basic export of component', () => {
+
+    /** <comp #myComp></comp> {{ myComp.name }} */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'comp', null, ['myComp', '']);
+        text(2);
+      }
+      if (rf & RenderFlags.Update) {
+        const tmp = reference(1) as any;
+        textBinding(2, tmp.name);
+      }
+    }
+
+    class MyComponent {
+      name = 'Nancy';
+
+      static ngComponentDef = defineComponent({
+        type: MyComponent,
+        selectors: [['comp']],
+        template: function() {},
+        factory: () => new MyComponent
+      });
+    }
+
+    expect(renderToHtml(Template, {}, [MyComponent])).toEqual('<comp></comp>Nancy');
+  });
+
+  it('should support component instance fed into directive', () => {
+
+    let myComponent: MyComponent;
+    let myDir: MyDir;
+    class MyComponent {
+      constructor() { myComponent = this; }
+      static ngComponentDef = defineComponent({
+        type: MyComponent,
+        selectors: [['comp']],
+        template: function() {},
+        factory: () => new MyComponent
+      });
+    }
+
+    class MyDir {
+      // TODO(issue/24571): remove '!'.
+      myDir !: MyComponent;
+      constructor() { myDir = this; }
+      static ngDirectiveDef = defineDirective({
+        type: MyDir,
+        selectors: [['', 'myDir', '']],
+        factory: () => new MyDir,
+        inputs: {myDir: 'myDir'}
+      });
+    }
+
+    const defs = [MyComponent, MyDir];
+
+    /** <comp #myComp></comp> <div [myDir]="myComp"></div> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'comp', null, ['myComp', '']);
+        element(2, 'div', ['myDir', '']);
+      }
+      if (rf & RenderFlags.Update) {
+        const tmp = reference(1) as any;
+        elementProperty(2, 'myDir', bind(tmp));
+      }
+    }
+
+    renderToHtml(Template, {}, defs);
+    expect(myDir !.myDir).toEqual(myComponent !);
+  });
+
+  it('should work with directives with exportAs set', () => {
+
+    /** <div someDir #myDir="someDir"></div> {{ myDir.name }} */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'div', ['someDir', ''], ['myDir', 'someDir']);
+        text(2);
+      }
+      if (rf & RenderFlags.Update) {
+        const tmp = reference(1) as any;
+        textBinding(2, tmp.name);
+      }
+    }
+
+    class SomeDir {
+      name = 'Drew';
+      static ngDirectiveDef = defineDirective({
+        type: SomeDir,
+        selectors: [['', 'someDir', '']],
+        factory: () => new SomeDir,
+        exportAs: 'someDir'
+      });
+    }
+
+    expect(renderToHtml(Template, {}, [SomeDir])).toEqual('<div somedir=""></div>Drew');
+  });
+
+  it('should throw if export name is not found', () => {
+
+    /** <div #myDir="someDir"></div> */
+    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'div', null, ['myDir', 'someDir']);
+      }
+    });
+
+    expect(() => {
+      const fixture = new ComponentFixture(App);
+    }).toThrowError(/Export of name 'someDir' not found!/);
+  });
+
+  describe('forward refs', () => {
+    it('should work with basic text bindings', () => {
+      /** {{ myInput.value}} <input value="one" #myInput> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          text(0);
+          element(1, 'input', ['value', 'one'], ['myInput', '']);
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp = reference(2) as any;
+          textBinding(0, bind(tmp.value));
+        }
+      }
+
+      expect(renderToHtml(Template, {})).toEqual('one<input value="one">');
+    });
+
+
+    it('should work with element properties', () => {
+      /** <div [title]="myInput.value"</div> <input value="one" #myInput> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div');
+          element(1, 'input', ['value', 'one'], ['myInput', '']);
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp = reference(2) as any;
+          elementProperty(0, 'title', bind(tmp.value));
+        }
+      }
+
+      expect(renderToHtml(Template, {})).toEqual('<div title="one"></div><input value="one">');
+    });
+
+    it('should work with element attrs', () => {
+      /** <div [attr.aria-label]="myInput.value"</div> <input value="one" #myInput> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div');
+          element(1, 'input', ['value', 'one'], ['myInput', '']);
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp = reference(2) as any;
+          elementAttribute(0, 'aria-label', bind(tmp.value));
+        }
+      }
+
+      expect(renderToHtml(Template, {})).toEqual('<div aria-label="one"></div><input value="one">');
+    });
+
+    it('should work with element classes', () => {
+      /** <div [class.red]="myInput.checked"</div> <input type="checkbox" checked #myInput> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          elementStyling([InitialStylingFlags.VALUES_MODE, 'red', true]);
+          elementEnd();
+          element(1, 'input', ['type', 'checkbox', 'checked', 'true'], ['myInput', '']);
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp = reference(2) as any;
+          elementClassProp(0, 0, tmp.checked);
+          elementStylingApply(0);
+        }
+      }
+
+      expect(renderToHtml(Template, {}))
+          .toEqual('<div class="red"></div><input checked="true" type="checkbox">');
+    });
+
+    it('should work with component refs', () => {
+
+      let myComponent: MyComponent;
+      let myDir: MyDir;
+
+      class MyComponent {
+        constructor() { myComponent = this; }
+
+        static ngComponentDef = defineComponent({
+          type: MyComponent,
+          selectors: [['comp']],
+          template: function(rf: RenderFlags, ctx: MyComponent) {},
+          factory: () => new MyComponent
+        });
+      }
+
+      class MyDir {
+        // TODO(issue/24571): remove '!'.
+        myDir !: MyComponent;
+
+        constructor() { myDir = this; }
+
+        static ngDirectiveDef = defineDirective({
+          type: MyDir,
+          selectors: [['', 'myDir', '']],
+          factory: () => new MyDir,
+          inputs: {myDir: 'myDir'}
+        });
+      }
+
+      /** <div [myDir]="myComp"></div><comp #myComp></comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['myDir', '']);
+          element(1, 'comp', null, ['myComp', '']);
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp = reference(2) as any;
+          elementProperty(0, 'myDir', bind(tmp));
+        }
+      }
+
+      renderToHtml(Template, {}, [MyComponent, MyDir]);
+      expect(myDir !.myDir).toEqual(myComponent !);
+    });
+
+    it('should work with multiple forward refs', () => {
+      /** {{ myInput.value }} {{ myComp.name }} <comp #myComp></comp> <input value="one" #myInput>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          text(0);
+          text(1);
+          element(2, 'comp', null, ['myComp', '']);
+          element(4, 'input', ['value', 'one'], ['myInput', '']);
+        }
+        if (rf & RenderFlags.Update) {
+          const tmp1 = reference(3) as any;
+          const tmp2 = reference(5) as any;
+          textBinding(0, bind(tmp2.value));
+          textBinding(1, bind(tmp1.name));
+        }
+      }
+
+      let myComponent: MyComponent;
+
+      class MyComponent {
+        name = 'Nancy';
+
+        constructor() { myComponent = this; }
+
+        static ngComponentDef = defineComponent({
+          type: MyComponent,
+          selectors: [['comp']],
+          template: function() {},
+          factory: () => new MyComponent
+        });
+      }
+      expect(renderToHtml(Template, {}, [MyComponent]))
+          .toEqual('oneNancy<comp></comp><input value="one">');
+    });
+
+    it('should work inside a view container', () => {
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { container(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(1);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(1);
+              {
+                if (rf1 & RenderFlags.Create) {
+                  text(0);
+                  element(1, 'input', ['value', 'one'], ['myInput', '']);
+                }
+                if (rf1 & RenderFlags.Update) {
+                  const tmp = reference(2) as any;
+                  textBinding(0, bind(tmp.value));
+                }
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      expect(renderToHtml(Template, {
+        condition: true
+      })).toEqual('<div>one<input value="one"></div>');
+      expect(renderToHtml(Template, {condition: false})).toEqual('<div></div>');
+    });
+
+    it('should support local refs in nested dynamic views', () => {
+      /**
+       * <input value="one" #outerInput>
+       * <div *ngIf="outer">
+       *     {{ outerInput.value }}
+       *
+       *     <input value = "two" #innerInput>
+       *
+       *     <div *ngIf="inner">
+       *         {{ outerInput.value }} - {{ innerInput.value}}
+       *     </div>
+       * </div>
+       */
+      const App = createComponent('app', function(rf: RenderFlags, app: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'input', ['value', 'one'], ['outerInput', '']);
+          elementEnd();
+          container(2, outerTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(2, 'ngIf', bind(app.outer));
+        }
+      }, [NgIf]);
+
+      function outerTemplate(rf: RenderFlags, outer: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          {
+            text(1);
+            elementStart(2, 'input', ['value', 'two'], ['innerInput', '']);
+            elementEnd();
+            container(4, innerTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
+          }
+          elementEnd();
+        }
+
+        if (rf & RenderFlags.Update) {
+          const app = nextContext();
+          const outerInput = reference(1) as any;
+          textBinding(1, bind(outerInput.value));
+          elementProperty(4, 'ngIf', bind(app.inner));
+        }
+      }
+
+      function innerTemplate(rf: RenderFlags, inner: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { text(1); }
+          elementEnd();
+        }
+
+        if (rf & RenderFlags.Update) {
+          nextContext();
+          const innerInput = reference(3) as any;
+          nextContext();
+          const outerInput = reference(1) as any;
+          textBinding(1, interpolation2('', outerInput.value, ' - ', innerInput.value, ''));
+        }
+      }
+
+      const fixture = new ComponentFixture(App);
+      fixture.component.outer = true;
+      fixture.component.inner = true;
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(`<input value="one"><div>one<input value="two"><div>one - two</div></div>`);
+    });
+
+  });
+});
diff --git a/packages/core/test/render3/i18n_spec.ts b/packages/core/test/render3/i18n_spec.ts
new file mode 100644
index 000000000000..0c96c43d20d5
--- /dev/null
+++ b/packages/core/test/render3/i18n_spec.ts
@@ -0,0 +1,1741 @@
+/**
+ * @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 {NgForOfContext} from '@angular/common';
+import {Component} from '../../src/core';
+import {defineComponent} from '../../src/render3/definition';
+import {I18nExpInstruction, I18nInstruction, i18nApply, i18nExpMapping, i18nInterpolation1, i18nInterpolation2, i18nInterpolation3, i18nInterpolation4, i18nInterpolation5, i18nInterpolation6, i18nInterpolation7, i18nInterpolation8, i18nInterpolationV, i18nMapping} from '../../src/render3/i18n';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, projection, projectionDef, text, textBinding} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+import {NgForOf} from './common_with_def';
+import {ComponentFixture, TemplateFixture} from './render_util';
+
+describe('Runtime i18n', () => {
+  it('should support html elements', () => {
+    // Html tags are replaced by placeholders.
+    // Open tag placeholders are never re-used (closing tag placeholders can be).
+    const MSG_DIV_SECTION_1 =
+        `{$START_C}trad 1{$END_C}{$START_A}trad 2{$START_B}trad 3{$END_B}{$END_A}`;
+    let i18n_1: I18nInstruction[][];
+    // Initial template:
+    // <div i18n>
+    //  <a>
+    //    <b></b>
+    //    <remove-me></remove-me>
+    //  </a>
+    //  <c></c>
+    // </div>
+
+    // Translated to:
+    // <div i18n>
+    //  <c>trad 1</c>
+    //  <a>
+    //    trad 2
+    //    <b>trad 3</b>
+    //  </a>
+    // </div>
+    function createTemplate() {
+      if (!i18n_1) {
+        i18n_1 = i18nMapping(
+            MSG_DIV_SECTION_1, [{'START_A': 1, 'START_B': 2, 'START_REMOVE_ME': 3, 'START_C': 4}]);
+      }
+
+      elementStart(0, 'div');
+      {  // Start of translated section 1
+        // - i18n sections do not contain any text() instruction
+        elementStart(1, 'a');  // START_A
+        {
+          element(2, 'b');          // START_B
+          element(3, 'remove-me');  // START_REMOVE_ME
+        }
+        elementEnd();
+        element(4, 'c');  // START_C
+      }                   // End of translated section 1
+      elementEnd();
+      i18nApply(1, i18n_1[0]);
+    }
+
+    const fixture = new TemplateFixture(createTemplate);
+    expect(fixture.html).toEqual('<div><c>trad 1</c><a>trad 2<b>trad 3</b></a></div>');
+  });
+
+  it('should support expressions', () => {
+    const MSG_DIV_SECTION_1 = `start {$EXP_2} middle {$EXP_1} end`;
+    let i18n_1: I18nInstruction[][];
+
+    class MyApp {
+      exp1 = '1';
+      exp2 = '2';
+
+      static ngComponentDef = defineComponent({
+        type: MyApp,
+        factory: () => new MyApp(),
+        selectors: [['my-app']],
+        // Initial template:
+        // <div i18n>
+        //  {{exp1}} {{exp2}}
+        // </div>
+
+        // Translated to:
+        // <div i18n>
+        //  start {{exp2}} middle {{exp1}} end
+        // </div>
+        template: (rf: RenderFlags, ctx: MyApp) => {
+          if (rf & RenderFlags.Create) {
+            if (!i18n_1) {
+              i18n_1 = i18nMapping(MSG_DIV_SECTION_1, null, [{'EXP_1': 1, 'EXP_2': 2}]);
+            }
+
+            elementStart(0, 'div');
+            {
+              // Start of translated section 1
+              // One text node is added per expression in the interpolation
+              text(1);  // EXP_1
+              text(2);  // EXP_2
+              // End of translated section 1
+            }
+            elementEnd();
+            i18nApply(1, i18n_1[0]);
+          }
+          if (rf & RenderFlags.Update) {
+            textBinding(1, bind(ctx.exp1));
+            textBinding(2, bind(ctx.exp2));
+          }
+        }
+      });
+    }
+
+    const fixture = new ComponentFixture(MyApp);
+    expect(fixture.html).toEqual('<div>start 2 middle 1 end</div>');
+
+    // Change detection cycle, no model changes
+    fixture.update();
+    expect(fixture.html).toEqual('<div>start 2 middle 1 end</div>');
+
+    // Change the expressions
+    fixture.component.exp1 = 'expr 1';
+    fixture.component.exp2 = 'expr 2';
+    fixture.update();
+    expect(fixture.html).toEqual('<div>start expr 2 middle expr 1 end</div>');
+  });
+
+  it('should support expressions on removed nodes', () => {
+    const MSG_DIV_SECTION_1 = `message`;
+    let i18n_1: I18nInstruction[][];
+
+    class MyApp {
+      exp1 = '1';
+
+      static ngComponentDef = defineComponent({
+        type: MyApp,
+        factory: () => new MyApp(),
+        selectors: [['my-app']],
+        // Initial template:
+        // <div i18n>
+        //  {{exp1}}
+        // </div>
+
+        // Translated to:
+        // <div i18n>
+        //   message
+        // </div>
+        template: (rf: RenderFlags, ctx: MyApp) => {
+          if (rf & RenderFlags.Create) {
+            if (!i18n_1) {
+              i18n_1 = i18nMapping(MSG_DIV_SECTION_1, null, [{'EXP_1': 1}]);
+            }
+
+            elementStart(0, 'div');
+            {
+              // Start of translated section 1
+              text(1);  // EXP_1 will be removed
+              // End of translated section 1
+            }
+            elementEnd();
+            i18nApply(1, i18n_1[0]);
+          }
+          if (rf & RenderFlags.Update) {
+            textBinding(1, bind(ctx.exp1));
+          }
+        }
+      });
+    }
+
+    const fixture = new ComponentFixture(MyApp);
+    expect(fixture.html).toEqual('<div>message</div>');
+
+    // Change detection cycle, no model changes
+    fixture.update();
+    expect(fixture.html).toEqual('<div>message</div>');
+
+    // Change the expressions
+    fixture.component.exp1 = 'expr 1';
+    fixture.update();
+    expect(fixture.html).toEqual('<div>message</div>');
+  });
+
+  it('should support expressions in attributes', () => {
+    const MSG_DIV_SECTION_1 = `start {$EXP_2} middle {$EXP_1} end`;
+    const i18n_1 = i18nExpMapping(MSG_DIV_SECTION_1, {'EXP_1': 0, 'EXP_2': 1});
+
+    class MyApp {
+      exp1: any = '1';
+      exp2: any = '2';
+
+      static ngComponentDef = defineComponent({
+        type: MyApp,
+        factory: () => new MyApp(),
+        selectors: [['my-app']],
+        // Initial template:
+        // <div i18n i18n-title title="{{exp1}}{{exp2}}"></div>
+
+        // Translated to:
+        // <div i18n i18n-title title="start {{exp2}} middle {{exp1}} end"></div>
+        template: (rf: RenderFlags, ctx: MyApp) => {
+          if (rf & RenderFlags.Create) {
+            element(0, 'div');  // translated section 1
+          }
+          if (rf & RenderFlags.Update) {
+            elementProperty(0, 'title', i18nInterpolation2(i18n_1, ctx.exp1, ctx.exp2));
+          }
+        }
+      });
+    }
+
+    const fixture = new ComponentFixture(MyApp);
+    expect(fixture.html).toEqual('<div title="start 2 middle 1 end"></div>');
+
+    // Change detection cycle, no model changes
+    fixture.update();
+    expect(fixture.html).toEqual('<div title="start 2 middle 1 end"></div>');
+
+    // Change the expressions
+    fixture.component.exp1 = function test() {};
+    fixture.component.exp2 = null;
+    fixture.update();
+    expect(fixture.html).toEqual('<div title="start  middle test end"></div>');
+  });
+
+  it('should support both html elements, expressions and expressions in attributes', () => {
+    const MSG_DIV_SECTION_1 = `{$EXP_1} {$START_P}trad {$EXP_2}{$END_P}`;
+    const MSG_ATTR_1 = `start {$EXP_2} middle {$EXP_1} end`;
+    let i18n_1: I18nInstruction[][];
+    let i18n_2: I18nExpInstruction[];
+
+    class MyApp {
+      exp1 = '1';
+      exp2 = '2';
+      exp3 = '3';
+
+      static ngComponentDef = defineComponent({
+        type: MyApp,
+        factory: () => new MyApp(),
+        selectors: [['my-app']],
+        // Initial template:
+        // <div i18n i18n-title title="{{exp1}}{{exp2}}">
+        //  {{exp1}}
+        //  <remove-me-1>
+        //    <remove-me-2></remove-me-2>
+        //    <remove-me-3></remove-me-3>
+        //  </remove-me-1>
+        //  <p>
+        //    {{exp2}}
+        //  </p>
+        //  {{exp3}}
+        // </div>
+
+        // Translated to:
+        // <div i18n i18n-title title="start {{exp2}} middle {{exp1}} end">
+        //  {{exp1}}
+        //  <p>
+        //    trad {{exp2}}
+        //  </p>
+        // </div>
+        template: (rf: RenderFlags, ctx: MyApp) => {
+          if (rf & RenderFlags.Create) {
+            if (!i18n_1) {
+              i18n_1 = i18nMapping(
+                  MSG_DIV_SECTION_1, [{
+                    'START_REMOVE_ME_1': 2,
+                    'START_REMOVE_ME_2': 3,
+                    'START_REMOVE_ME_3': 4,
+                    'START_P': 5
+                  }],
+                  [{'EXP_1': 1, 'EXP_2': 6, 'EXP_3': 7}]);
+            }
+            if (!i18n_2) {
+              i18n_2 = i18nExpMapping(MSG_ATTR_1, {'EXP_1': 0, 'EXP_2': 1});
+            }
+
+            elementStart(0, 'div');
+            {
+              // Start of translated section 1
+              text(1);                         // EXP_1
+              elementStart(2, 'remove-me-1');  // START_REMOVE_ME_1
+              {
+                element(3, 'remove-me-2');  // START_REMOVE_ME_2
+                element(4, 'remove-me-3');  // START_REMOVE_ME_3
+              }
+              elementEnd();
+              elementStart(5, 'p');  // START_P
+              { text(6); }           // EXP_2
+              elementEnd();
+              text(7);  // EXP_3
+              // End of translated section 1
+            }
+            elementEnd();
+            i18nApply(1, i18n_1[0]);
+          }
+          if (rf & RenderFlags.Update) {
+            textBinding(1, bind(ctx.exp1));
+            textBinding(6, bind(ctx.exp2));
+            textBinding(7, bind(ctx.exp3));
+            elementProperty(0, 'title', i18nInterpolation2(i18n_2, ctx.exp1, ctx.exp2));
+          }
+        }
+      });
+    }
+
+    const fixture = new ComponentFixture(MyApp);
+    expect(fixture.html).toEqual('<div title="start 2 middle 1 end">1 <p>trad 2</p></div>');
+
+    // Change detection cycle, no model changes
+    fixture.update();
+    expect(fixture.html).toEqual('<div title="start 2 middle 1 end">1 <p>trad 2</p></div>');
+
+    // Change the expressions
+    fixture.component.exp1 = 'expr 1';
+    fixture.component.exp2 = 'expr 2';
+    fixture.update();
+    expect(fixture.html)
+        .toEqual('<div title="start expr 2 middle expr 1 end">expr 1 <p>trad expr 2</p></div>');
+  });
+
+  it('should support multiple i18n elements', () => {
+    const MSG_DIV_SECTION_1 = `trad {$EXP_1}`;
+    const MSG_DIV_SECTION_2 = `{$START_C}trad{$END_C}`;
+    const MSG_ATTR_1 = `start {$EXP_2} middle {$EXP_1} end`;
+    let i18n_1: I18nInstruction[][];
+    let i18n_2: I18nInstruction[][];
+    let i18n_3: I18nExpInstruction[];
+
+    class MyApp {
+      exp1 = '1';
+      exp2 = '2';
+
+      static ngComponentDef = defineComponent({
+        type: MyApp,
+        factory: () => new MyApp(),
+        selectors: [['my-app']],
+        // Initial template:
+        // <div>
+        //  <a i18n>
+        //    {{exp1}}
+        //  </a>
+        //  hello
+        //  <b i18n i18n-title title="{{exp1}}{{exp2}}">
+        //    <c></c>
+        //  </b>
+        // </div>
+
+        // Translated to:
+        // <div>
+        //  <a i18n>
+        //    trad {{exp1}}
+        //  </a>
+        //  hello
+        //  <b i18n i18n-title title="start {{exp2}} middle {{exp1}} end">
+        //    <c>trad</c>
+        //  </b>
+        // </div>
+        template: (rf: RenderFlags, ctx: MyApp) => {
+          if (rf & RenderFlags.Create) {
+            if (!i18n_1) {
+              i18n_1 = i18nMapping(MSG_DIV_SECTION_1, null, [{'EXP_1': 2}]);
+            }
+            if (!i18n_2) {
+              i18n_2 = i18nMapping(MSG_DIV_SECTION_2, [{'START_C': 5}]);
+            }
+            if (!i18n_3) {
+              i18n_3 = i18nExpMapping(MSG_ATTR_1, {'EXP_1': 0, 'EXP_2': 1});
+            }
+
+            elementStart(0, 'div');
+            {
+              elementStart(1, 'a');
+              {
+                // Start of translated section 1
+                text(2);  // EXP_1
+                // End of translated section 1
+              }
+              elementEnd();
+              text(3, 'hello');
+              elementStart(4, 'b');
+              {
+                // Start of translated section 2
+                element(5, 'c');  // START_C
+                // End of translated section 2
+              }
+              elementEnd();
+            }
+            elementEnd();
+            i18nApply(2, i18n_1[0]);
+            i18nApply(5, i18n_2[0]);
+          }
+          if (rf & RenderFlags.Update) {
+            textBinding(2, bind(ctx.exp1));
+            elementProperty(4, 'title', i18nInterpolation2(i18n_3, ctx.exp1, ctx.exp2));
+          }
+        }
+      });
+    }
+
+    const fixture = new ComponentFixture(MyApp);
+    expect(fixture.html)
+        .toEqual('<div><a>trad 1</a>hello<b title="start 2 middle 1 end"><c>trad</c></b></div>');
+
+    // Change detection cycle, no model changes
+    fixture.update();
+    expect(fixture.html)
+        .toEqual('<div><a>trad 1</a>hello<b title="start 2 middle 1 end"><c>trad</c></b></div>');
+
+    // Change the expressions
+    fixture.component.exp1 = 'expr 1';
+    fixture.component.exp2 = 'expr 2';
+    fixture.update();
+    expect(fixture.html)
+        .toEqual(
+            '<div><a>trad expr 1</a>hello<b title="start expr 2 middle expr 1 end"><c>trad</c></b></div>');
+  });
+
+  describe('view containers / embedded templates', () => {
+    it('should support containers', () => {
+      const MSG_DIV_SECTION_1 = `valeur: {$EXP_1}`;
+      // The indexes are based on the main template function
+      let i18n_1: I18nInstruction[][];
+
+      class MyApp {
+        exp1 = '1';
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // before (
+          // % if (condition) { // with i18n
+          //   value: {{exp1}}
+          // % }
+          // ) after
+
+          // Translated :
+          // before (
+          // % if (condition) { // with i18n
+          //   valeur: {{exp1}}
+          // % }
+          // ) after
+          template: (rf: RenderFlags, myApp: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(MSG_DIV_SECTION_1, null, [{'EXP_1': 0}]);
+              }
+
+              text(0, 'before (');
+              container(1);
+              text(2, ') after');
+            }
+            if (rf & RenderFlags.Update) {
+              containerRefreshStart(1);
+              {
+                let rf0 = embeddedViewStart(0);
+                if (rf0 & RenderFlags.Create) {
+                  // Start of translated section 1
+                  text(0);  // EXP_1
+                  // End of translated section 1
+                  i18nApply(0, i18n_1[0]);
+                }
+                if (rf0 & RenderFlags.Update) {
+                  textBinding(0, bind(myApp.exp1));
+                }
+                embeddedViewEnd();
+              }
+              containerRefreshEnd();
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('before (valeur: 1) after');
+
+      // Change detection cycle, no model changes
+      fixture.update();
+      expect(fixture.html).toEqual('before (valeur: 1) after');
+    });
+
+    it('should support ng-container', () => {
+      const MSG_DIV_SECTION_1 = `{$START_B}{$END_B}`;
+      // With ng-container the i18n node doesn't create any element at runtime which means that
+      // its children are not the only children of their parent, some nodes which are not
+      // translated might also be the children of the same parent.
+      // This is why we need to pass the `lastChildIndex` to `i18nMapping`
+      let i18n_1: I18nInstruction[][];
+      // Initial template:
+      // <div i18n>
+      //  <a></a>
+      //  <ng-container i18n>
+      //    <b></b>
+      //    <c></c>
+      //  </ng-container>
+      //  <d></d>
+      // </div>
+
+      // Translated to:
+      // <div i18n>
+      //  <a></a>
+      //  <ng-container i18n>
+      //    <b></b>
+      //  </ng-container>
+      //  <d></d>
+      // </div>
+      function createTemplate() {
+        if (!i18n_1) {
+          i18n_1 = i18nMapping(MSG_DIV_SECTION_1, [{'START_B': 2, 'START_C': 3}], null, null, 4);
+        }
+
+        elementStart(0, 'div');
+        {
+          element(1, 'a');
+          {
+            // Start of translated section 1
+            element(2, 'b');  // START_B
+            element(3, 'c');  // START_C
+            // End of translated section 1
+          }
+          element(4, 'd');
+        }
+        elementEnd();
+        i18nApply(2, i18n_1[0]);
+      }
+
+      const fixture = new TemplateFixture(createTemplate);
+      expect(fixture.html).toEqual('<div><a></a><b></b><d></d></div>');
+    });
+
+    it('should support embedded templates', () => {
+      const MSG_DIV_SECTION_1 = `{$START_LI}valeur: {$EXP_1}!{$END_LI}`;
+      // The indexes are based on each template function
+      let i18n_1: I18nInstruction[][];
+      class MyApp {
+        items: string[] = ['1', '2'];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <ul i18n>
+          //   <li *ngFor="let item of items">value: {{item}}</li>
+          // </ul>
+
+          // Translated to:
+          // <ul i18n>
+          //   <li *ngFor="let item of items">valeur: {{item}}!</li>
+          // </ul>
+          template: (rf: RenderFlags, myApp: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(
+                    MSG_DIV_SECTION_1, [{'START_LI': 1}, {'START_LI': 0}], [null, {'EXP_1': 1}],
+                    ['START_LI']);
+              }
+
+              elementStart(0, 'ul');
+              {
+                // Start of translated section 1
+                container(1, liTemplate, null, ['ngForOf', '']);  // START_LI
+                // End of translated section 1
+              }
+              elementEnd();
+              i18nApply(1, i18n_1[0]);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(1, 'ngForOf', bind(myApp.items));
+            }
+
+            function liTemplate(rf1: RenderFlags, row: NgForOfContext<string>) {
+              if (rf1 & RenderFlags.Create) {
+                // This is a container so the whole template is a translated section
+                // Start of translated section 2
+                elementStart(0, 'li');  // START_LI
+                { text(1); }            // EXP_1
+                elementEnd();
+                // End of translated section 2
+                i18nApply(0, i18n_1[1]);
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(row.$implicit));
+              }
+            }
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<ul><li>valeur: 1!</li><li>valeur: 2!</li></ul>');
+
+      // Change detection cycle, no model changes
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>valeur: 1!</li><li>valeur: 2!</li></ul>');
+
+      // Remove the last item
+      fixture.component.items.length = 1;
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>valeur: 1!</li></ul>');
+
+      // Change an item
+      fixture.component.items[0] = 'one';
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>valeur: one!</li></ul>');
+
+      // Add an item
+      fixture.component.items.push('two');
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>valeur: one!</li><li>valeur: two!</li></ul>');
+    });
+
+    it('should support sibling embedded templates', () => {
+      const MSG_DIV_SECTION_1 =
+          `{$START_LI_0}valeur: {$EXP_1}!{$END_LI_0}{$START_LI_1}valeur bis: {$EXP_2}!{$END_LI_1}`;
+      // The indexes are based on each template function
+      let i18n_1: I18nInstruction[][];
+      class MyApp {
+        items: string[] = ['1', '2'];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <ul i18n>
+          //   <li *ngFor="let item of items">value: {{item}}</li>
+          //   <li *ngFor="let item of items">value bis: {{item}}</li>
+          // </ul>
+
+          // Translated to:
+          // <ul i18n>
+          //   <li *ngFor="let item of items">valeur: {{item}}!</li>
+          //   <li *ngFor="let item of items">valeur bis: {{item}}!</li>
+          // </ul>
+          template: (rf: RenderFlags, myApp: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(
+                    MSG_DIV_SECTION_1,
+                    [{'START_LI_0': 1, 'START_LI_1': 2}, {'START_LI_0': 0}, {'START_LI_1': 0}],
+                    [null, {'EXP_1': 1}, {'EXP_2': 1}], ['START_LI_0', 'START_LI_1']);
+              }
+
+              elementStart(0, 'ul');
+              {
+                // Start of translated section 1
+                container(1, liTemplate, null, ['ngForOf', '']);     // START_LI_0
+                container(2, liTemplateBis, null, ['ngForOf', '']);  // START_LI_1
+                // End of translated section 1
+              }
+              elementEnd();
+              i18nApply(1, i18n_1[0]);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(1, 'ngForOf', bind(myApp.items));
+              elementProperty(2, 'ngForOf', bind(myApp.items));
+            }
+
+            function liTemplate(rf1: RenderFlags, row: NgForOfContext<string>) {
+              if (rf1 & RenderFlags.Create) {
+                // This is a container so the whole template is a translated section
+                // Start of translated section 2
+                elementStart(0, 'li');  // START_LI_0
+                { text(1); }            // EXP_1
+                elementEnd();
+                // End of translated section 2
+                i18nApply(0, i18n_1[1]);
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(row.$implicit));
+              }
+            }
+
+            function liTemplateBis(rf1: RenderFlags, row: NgForOfContext<string>) {
+              if (rf1 & RenderFlags.Create) {
+                // This is a container so the whole template is a translated section
+                // Start of translated section 3
+                elementStart(0, 'li');  // START_LI_1
+                { text(1); }            // EXP_2
+                elementEnd();
+                // End of translated section 3
+                i18nApply(0, i18n_1[2]);
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(row.$implicit));
+              }
+            }
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li>valeur: 1!</li><li>valeur: 2!</li><li>valeur bis: 1!</li><li>valeur bis: 2!</li></ul>');
+
+      // Change detection cycle, no model changes
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li>valeur: 1!</li><li>valeur: 2!</li><li>valeur bis: 1!</li><li>valeur bis: 2!</li></ul>');
+
+      // Remove the last item
+      fixture.component.items.length = 1;
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>valeur: 1!</li><li>valeur bis: 1!</li></ul>');
+
+      // Change an item
+      fixture.component.items[0] = 'one';
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>valeur: one!</li><li>valeur bis: one!</li></ul>');
+
+      // Add an item
+      fixture.component.items.push('two');
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li>valeur: one!</li><li>valeur: two!</li><li>valeur bis: one!</li><li>valeur bis: two!</li></ul>');
+    });
+
+    it('should support changing the order of multiple template roots in the same template', () => {
+      const MSG_DIV_SECTION_1 =
+          `{$START_LI_1}valeur bis: {$EXP_2}!{$END_LI_1}{$START_LI_0}valeur: {$EXP_1}!{$END_LI_0}`;
+      // The indexes are based on each template function
+      let i18n_1: I18nInstruction[][];
+      class MyApp {
+        items: string[] = ['1', '2'];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <ul i18n>
+          //   <li *ngFor="let item of items">value: {{item}}</li>
+          //   <li *ngFor="let item of items">value bis: {{item}}</li>
+          // </ul>
+
+          // Translated to:
+          // <ul i18n>
+          //   <li *ngFor="let item of items">valeur bis: {{item}}!</li>
+          //   <li *ngFor="let item of items">valeur: {{item}}!</li>
+          // </ul>
+          template: (rf: RenderFlags, myApp: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(
+                    MSG_DIV_SECTION_1,
+                    [{'START_LI_0': 1, 'START_LI_1': 2}, {'START_LI_0': 0}, {'START_LI_1': 0}],
+                    [null, {'EXP_1': 1}, {'EXP_2': 1}], ['START_LI_0', 'START_LI_1']);
+              }
+
+              elementStart(0, 'ul');
+              {
+                // Start of translated section 1
+                container(1, liTemplate, null, ['ngForOf', '']);     // START_LI_0
+                container(2, liTemplateBis, null, ['ngForOf', '']);  // START_LI_1
+                // End of translated section 1
+              }
+              elementEnd();
+              i18nApply(1, i18n_1[0]);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(1, 'ngForOf', bind(myApp.items));
+              elementProperty(2, 'ngForOf', bind(myApp.items));
+            }
+
+            function liTemplate(rf1: RenderFlags, row: NgForOfContext<string>) {
+              if (rf1 & RenderFlags.Create) {
+                // This is a container so the whole template is a translated section
+                // Start of translated section 2
+                elementStart(0, 'li');  // START_LI_0
+                { text(1); }            // EXP_1
+                elementEnd();
+                // End of translated section 2
+                i18nApply(0, i18n_1[1]);
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(row.$implicit));
+              }
+            }
+
+            function liTemplateBis(rf1: RenderFlags, row: NgForOfContext<string>) {
+              if (rf1 & RenderFlags.Create) {
+                // This is a container so the whole template is a translated section
+                // Start of translated section 3
+                elementStart(0, 'li');  // START_LI_1
+                { text(1); }            // EXP_2
+                elementEnd();
+                // End of translated section 3
+                i18nApply(0, i18n_1[2]);
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(row.$implicit));
+              }
+            }
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li>valeur bis: 1!</li><li>valeur bis: 2!</li><li>valeur: 1!</li><li>valeur: 2!</li></ul>');
+
+      // Change detection cycle, no model changes
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li>valeur bis: 1!</li><li>valeur bis: 2!</li><li>valeur: 1!</li><li>valeur: 2!</li></ul>');
+
+      // Remove the last item
+      fixture.component.items.length = 1;
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>valeur bis: 1!</li><li>valeur: 1!</li></ul>');
+
+      // Change an item
+      fixture.component.items[0] = 'one';
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>valeur bis: one!</li><li>valeur: one!</li></ul>');
+
+      // Add an item
+      fixture.component.items.push('two');
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li>valeur bis: one!</li><li>valeur bis: two!</li><li>valeur: one!</li><li>valeur: two!</li></ul>');
+    });
+
+    it('should support nested embedded templates', () => {
+      const MSG_DIV_SECTION_1 = `{$START_LI}{$START_SPAN}valeur: {$EXP_1}!{$END_SPAN}{$END_LI}`;
+      // The indexes are based on each template function
+      let i18n_1: I18nInstruction[][];
+      class MyApp {
+        items: string[] = ['1', '2'];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <ul i18n>
+          //   <li *ngFor="let item of items">
+          //     <span *ngFor="let item of items">value: {{item}}</span>
+          //   </li>
+          // </ul>
+
+          // Translated to:
+          // <ul i18n>
+          //   <li *ngFor="let item of items">
+          //     <span *ngFor="let item of items">valeur: {{item}}!</span>
+          //   </li>
+          // </ul>
+          template: (rf: RenderFlags, myApp: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(
+                    MSG_DIV_SECTION_1,
+                    [{'START_LI': 1}, {'START_LI': 0, 'START_SPAN': 1}, {'START_SPAN': 0}],
+                    [null, null, {'EXP_1': 1}], ['START_LI', 'START_SPAN']);
+              }
+
+              elementStart(0, 'ul');
+              {
+                // Start of translated section 1
+                container(1, liTemplate, null, ['ngForOf', '']);  // START_LI
+                // End of translated section 1
+              }
+              elementEnd();
+              i18nApply(1, i18n_1[0]);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(1, 'ngForOf', bind(myApp.items));
+            }
+
+            function liTemplate(rf1: RenderFlags, row: NgForOfContext<string>) {
+              if (rf1 & RenderFlags.Create) {
+                // This is a container so the whole template is a translated section
+                // Start of translated section 2
+                elementStart(0, 'li');  // START_LI
+                {
+                  container(1, spanTemplate, null, ['ngForOf', '']);  // START_SPAN
+                }
+                elementEnd();
+                // End of translated section 2
+                i18nApply(0, i18n_1[1]);
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(1, 'ngForOf', bind(myApp.items));
+              }
+            }
+
+            function spanTemplate(rf1: RenderFlags, row: NgForOfContext<string>) {
+              if (rf1 & RenderFlags.Create) {
+                // This is a container so the whole template is a translated section
+                // Start of translated section 3
+                elementStart(0, 'span');  // START_SPAN
+                { text(1); }              // EXP_1
+                elementEnd();
+                // End of translated section 3
+                i18nApply(0, i18n_1[2]);
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(row.$implicit));
+              }
+            }
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li><span>valeur: 1!</span><span>valeur: 2!</span></li><li><span>valeur: 1!</span><span>valeur: 2!</span></li></ul>');
+
+      // Change detection cycle, no model changes
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li><span>valeur: 1!</span><span>valeur: 2!</span></li><li><span>valeur: 1!</span><span>valeur: 2!</span></li></ul>');
+
+      // Remove the last item
+      fixture.component.items.length = 1;
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li><span>valeur: 1!</span></li></ul>');
+
+      // Change an item
+      fixture.component.items[0] = 'one';
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li><span>valeur: one!</span></li></ul>');
+
+      // Add an item
+      fixture.component.items.push('two');
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              '<ul><li><span>valeur: one!</span><span>valeur: two!</span></li><li><span>valeur: one!</span><span>valeur: two!</span></li></ul>');
+    });
+
+    it('should be able to move template roots around', () => {
+      const MSG_DIV_SECTION_1 =
+          `{$START_LI_0}début{$END_LI_0}{$START_LI_1}valeur: {$EXP_1}{$END_LI_1}fin`;
+      // The indexes are based on each template function
+      let i18n_1: I18nInstruction[][];
+
+      class MyApp {
+        items: string[] = ['first', 'second'];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <ul i18n>
+          //   <li>start</li>
+          //   <li *ngFor="let item of items">value: {{item}}</li>
+          //   <li>delete me</li>
+          // </ul>
+
+          // Translated to:
+          // <ul i18n>
+          //   <li>début</li>
+          //   <li *ngFor="let item of items">valeur: {{item}}</li>
+          //   fin
+          // </ul>
+          template: (rf: RenderFlags, myApp: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(
+                    MSG_DIV_SECTION_1,
+                    [{'START_LI_0': 1, 'START_LI_1': 2, 'START_LI_2': 3}, {'START_LI_1': 0}],
+                    [null, {'EXP_1': 1}], ['START_LI_1']);
+              }
+
+              elementStart(0, 'ul');
+              {
+                // Start of translated section 1
+                element(1, 'li');                                 // START_LI_0
+                container(2, liTemplate, null, ['ngForOf', '']);  // START_LI_1
+                elementStart(3, 'li');                            // START_LI_2
+                { text(4, 'delete me'); }
+                elementEnd();
+                // End of translated section 1
+              }
+              elementEnd();
+              i18nApply(1, i18n_1[0]);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(2, 'ngForOf', bind(myApp.items));
+            }
+
+            function liTemplate(rf1: RenderFlags, row: NgForOfContext<string>) {
+              if (rf1 & RenderFlags.Create) {
+                // This is a container so the whole template is a translated section
+                // Start of translated section 2
+                elementStart(0, 'li');  // START_LI_1
+                { text(1); }            // EXP_1
+                elementEnd();
+                // End of translated section 2
+                i18nApply(0, i18n_1[1]);
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(row.$implicit));
+              }
+            }
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html)
+          .toEqual('<ul><li>début</li><li>valeur: first</li><li>valeur: second</li>fin</ul>');
+
+      // Change detection cycle, no model changes
+      fixture.update();
+      expect(fixture.html)
+          .toEqual('<ul><li>début</li><li>valeur: first</li><li>valeur: second</li>fin</ul>');
+
+      // Remove the last item
+      fixture.component.items.length = 1;
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>début</li><li>valeur: first</li>fin</ul>');
+
+      // Change an item
+      fixture.component.items[0] = 'one';
+      fixture.update();
+      expect(fixture.html).toEqual('<ul><li>début</li><li>valeur: one</li>fin</ul>');
+
+      // Add an item
+      fixture.component.items.push('two');
+      fixture.update();
+      expect(fixture.html)
+          .toEqual('<ul><li>début</li><li>valeur: one</li><li>valeur: two</li>fin</ul>');
+    });
+
+    it('should be able to remove template roots', () => {
+      const MSG_DIV_SECTION_1 = `loop`;
+      // The indexes are based on each template function
+      let i18n_1: I18nInstruction[][];
+
+      class MyApp {
+        items: string[] = ['first', 'second'];
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <ul i18n>
+          //   <li *ngFor="let item of items">value: {{item}}</li>
+          // </ul>
+
+          // Translated to:
+          // <ul i18n>
+          //   loop
+          // </ul>
+          template: (rf: RenderFlags, myApp: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(
+                    MSG_DIV_SECTION_1, [{'START_LI': 1}, {'START_LI': 0}], [null, {'EXP_1': 1}],
+                    ['START_LI']);
+              }
+
+              elementStart(0, 'ul');
+              {
+                // Start of translated section 1
+                container(1, liTemplate, undefined, ['ngForOf', '']);  // START_LI
+                // End of translated section 1
+              }
+              elementEnd();
+              i18nApply(1, i18n_1[0]);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(1, 'ngForOf', bind(myApp.items));
+            }
+
+            function liTemplate(rf1: RenderFlags, row: NgForOfContext<string>) {
+              if (rf1 & RenderFlags.Create) {
+                // This is a container so the whole template is a translated section
+                // Start of translated section 2
+                elementStart(0, 'li');  // START_LI
+                { text(1); }            // EXP_1
+                elementEnd();
+                // End of translated section 2
+                i18nApply(0, i18n_1[1]);
+              }
+              if (rf1 & RenderFlags.Update) {
+                textBinding(1, bind(row.$implicit));
+              }
+            }
+          },
+          directives: () => [NgForOf]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<ul>loop</ul>');
+
+      // Change detection cycle, no model changes
+      fixture.update();
+      expect(fixture.html).toEqual('<ul>loop</ul>');
+
+      // Remove the last item
+      fixture.component.items.length = 1;
+      fixture.update();
+      expect(fixture.html).toEqual('<ul>loop</ul>');
+
+      // Change an item
+      fixture.component.items[0] = 'one';
+      fixture.update();
+      expect(fixture.html).toEqual('<ul>loop</ul>');
+
+      // Add an item
+      fixture.component.items.push('two');
+      fixture.update();
+      expect(fixture.html).toEqual('<ul>loop</ul>');
+    });
+  });
+
+  describe('projection', () => {
+    it('should project the translations', () => {
+      @Component({selector: 'child', template: '<p><ng-content></ng-content></p>'})
+      class Child {
+        static ngComponentDef = defineComponent({
+          type: Child,
+          selectors: [['child']],
+          factory: () => new Child(),
+          template: (rf: RenderFlags, cmp: Child) => {
+            if (rf & RenderFlags.Create) {
+              projectionDef();
+              elementStart(0, 'p');
+              { projection(1); }
+              elementEnd();
+            }
+          }
+        });
+      }
+
+      const MSG_DIV_SECTION_1 =
+          `{$START_CHILD}Je suis projeté depuis {$START_B}{$EXP_1}{$END_B}{$END_CHILD}`;
+      let i18n_1: I18nInstruction[][];
+      const MSG_ATTR_1 = `Enfant de {$EXP_1}`;
+      let i18n_2: I18nExpInstruction[];
+
+      @Component({
+        selector: 'parent',
+        template: `
+        <div i18n>
+          <child>I am projected from <b i18n-title title="Child of {{name}}">{{name}}<remove-me-1></remove-me-1></b><remove-me-2></remove-me-2></child>
+          <remove-me-3></remove-me-3>
+        </div>`
+        // Translated to:
+        // <div i18n>
+        //   <child>
+        //     Je suis projeté depuis <b i18n-title title="Enfant de {{name}}">{{name}}</b>
+        //   </child>
+        // </div>
+      })
+      class Parent {
+        name: string = 'Parent';
+        static ngComponentDef = defineComponent({
+          type: Parent,
+          selectors: [['parent']],
+          directives: [Child],
+          factory: () => new Parent(),
+          template: (rf: RenderFlags, cmp: Parent) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(
+                    MSG_DIV_SECTION_1, [{
+                      'START_CHILD': 1,
+                      'START_B': 2,
+                      'START_REMOVE_ME_1': 4,
+                      'START_REMOVE_ME_2': 5,
+                      'START_REMOVE_ME_3': 6
+                    }],
+                    [{'EXP_1': 3}]);
+              }
+              if (!i18n_2) {
+                i18n_2 = i18nExpMapping(MSG_ATTR_1, {'EXP_1': 0});
+              }
+
+              elementStart(0, 'div');
+              {
+                // Start of translated section 1
+                elementStart(1, 'child');  // START_CHILD
+                {
+                  elementStart(2, 'b');  // START_B
+                  {
+                    text(3);                    // EXP_1
+                    element(4, 'remove-me-1');  // START_REMOVE_ME_1
+                  }
+                  elementEnd();
+                  element(5, 'remove-me-2');  // START_REMOVE_ME_2
+                }
+                elementEnd();
+                element(6, 'remove-me-3');  // START_REMOVE_ME_3
+                // End of translated section 1
+              }
+              elementEnd();
+              i18nApply(1, i18n_1[0]);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(2, 'title', i18nInterpolation1(i18n_2, cmp.name));
+              textBinding(3, bind(cmp.name));
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(Parent);
+      expect(fixture.html)
+          .toEqual(
+              '<div><child><p>Je suis projeté depuis <b title="Enfant de Parent">Parent</b></p></child></div>');
+    });
+
+    it('should project a translated i18n block', () => {
+      @Component({selector: 'child', template: '<p><ng-content></ng-content></p>'})
+      class Child {
+        static ngComponentDef = defineComponent({
+          type: Child,
+          selectors: [['child']],
+          factory: () => new Child(),
+          template: (rf: RenderFlags, cmp: Child) => {
+            if (rf & RenderFlags.Create) {
+              projectionDef();
+              elementStart(0, 'p');
+              { projection(1); }
+              elementEnd();
+            }
+          }
+        });
+      }
+
+      const MSG_DIV_SECTION_1 = `Je suis projeté depuis {$EXP_1}`;
+      let i18n_1: I18nInstruction[][];
+      const MSG_ATTR_1 = `Enfant de {$EXP_1}`;
+      let i18n_2: I18nExpInstruction[];
+
+      @Component({
+        selector: 'parent',
+        template: `
+        <div>
+          <child><any></any><b i18n i18n-title title="Child of {{name}}">I am projected from {{name}}</b><any></any></child>
+        </div>`
+        // Translated to:
+        // <div>
+        //   <child>
+        //     <any></any>
+        //     <b i18n i18n-title title="Enfant de {{name}}">Je suis projeté depuis {{name}}</b>
+        //     <any></any>
+        //   </child>
+        // </div>
+      })
+      class Parent {
+        name: string = 'Parent';
+        static ngComponentDef = defineComponent({
+          type: Parent,
+          selectors: [['parent']],
+          directives: [Child],
+          factory: () => new Parent(),
+          template: (rf: RenderFlags, cmp: Parent) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(MSG_DIV_SECTION_1, null, [{'EXP_1': 4}]);
+              }
+              if (!i18n_2) {
+                i18n_2 = i18nExpMapping(MSG_ATTR_1, {'EXP_1': 0});
+              }
+
+              elementStart(0, 'div');
+              {
+                elementStart(1, 'child');
+                {
+                  element(2, 'any');
+                  elementStart(3, 'b');
+                  {
+                    // Start of translated section 1
+                    text(4);  // EXP_1
+                    // End of translated section 1
+                  }
+                  elementEnd();
+                  element(5, 'any');
+                }
+                elementEnd();
+              }
+              elementEnd();
+              i18nApply(4, i18n_1[0]);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(3, 'title', i18nInterpolation1(i18n_2, cmp.name));
+              textBinding(4, bind(cmp.name));
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(Parent);
+      expect(fixture.html)
+          .toEqual(
+              '<div><child><p><any></any><b title="Enfant de Parent">Je suis projeté depuis Parent</b><any></any></p></child></div>');
+    });
+
+    it('should re-project translations when multiple projections', () => {
+      @Component({selector: 'grand-child', template: '<div><ng-content></ng-content></div>'})
+      class GrandChild {
+        static ngComponentDef = defineComponent({
+          type: GrandChild,
+          selectors: [['grand-child']],
+          factory: () => new GrandChild(),
+          template: (rf: RenderFlags, cmp: Child) => {
+            if (rf & RenderFlags.Create) {
+              projectionDef();
+              elementStart(0, 'div');
+              { projection(1); }
+              elementEnd();
+            }
+          }
+        });
+      }
+
+      @Component(
+          {selector: 'child', template: '<grand-child><ng-content></ng-content></grand-child>'})
+      class Child {
+        static ngComponentDef = defineComponent({
+          type: Child,
+          selectors: [['child']],
+          directives: [GrandChild],
+          factory: () => new Child(),
+          template: (rf: RenderFlags, cmp: Child) => {
+            if (rf & RenderFlags.Create) {
+              projectionDef();
+              elementStart(0, 'grand-child');
+              { projection(1); }
+              elementEnd();
+            }
+          }
+        });
+      }
+
+      const MSG_DIV_SECTION_1 = `{$START_B}Bonjour{$END_B} Monde!`;
+      let i18n_1: I18nInstruction[][];
+
+      @Component({
+        selector: 'parent',
+        template: `<child i18n><b>Hello</b> World!</child>`
+        // Translated to:
+        // <child i18n><grand-child><div><b>Bonjour</b> Monde!</div></grand-child></child>
+      })
+      class Parent {
+        name: string = 'Parent';
+        static ngComponentDef = defineComponent({
+          type: Parent,
+          selectors: [['parent']],
+          directives: [Child],
+          factory: () => new Parent(),
+          template: (rf: RenderFlags, cmp: Parent) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(MSG_DIV_SECTION_1, [{'START_B': 1}]);
+              }
+
+              elementStart(0, 'child');
+              {
+                // Start of translated section 1
+                element(1, 'b');  // START_B
+                // End of translated section 1
+              }
+              elementEnd();
+              i18nApply(1, i18n_1[0]);
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(Parent);
+      expect(fixture.html)
+          .toEqual('<child><grand-child><div><b>Bonjour</b> Monde!</div></grand-child></child>');
+    });
+
+    it('should project translations with selectors', () => {
+      @Component({
+        selector: 'child',
+        template: `
+          <ng-content select="span"></ng-content>
+        `
+      })
+      class Child {
+        static ngComponentDef = defineComponent({
+          type: Child,
+          selectors: [['child']],
+          factory: () => new Child(),
+          template: (rf: RenderFlags, cmp: Child) => {
+            if (rf & RenderFlags.Create) {
+              projectionDef([[['span']]], ['span']);
+              projection(0, 1);
+            }
+          }
+        });
+      }
+
+      const MSG_DIV_SECTION_1 = `{$START_SPAN_0}Contenu{$END_SPAN_0}`;
+      let i18n_1: I18nInstruction[][];
+
+      @Component({
+        selector: 'parent',
+        template: `
+          <child i18n>
+            <span title="keepMe"></span>
+            <span title="deleteMe"></span>
+          </child>
+        `
+        // Translated to:
+        // <child i18n><span title="keepMe">Contenu</span></child>
+      })
+      class Parent {
+        static ngComponentDef = defineComponent({
+          type: Parent,
+          selectors: [['parent']],
+          directives: [Child],
+          factory: () => new Parent(),
+          template: (rf: RenderFlags, cmp: Parent) => {
+            if (rf & RenderFlags.Create) {
+              if (!i18n_1) {
+                i18n_1 = i18nMapping(MSG_DIV_SECTION_1, [{'START_SPAN_0': 1, 'START_SPAN_1': 2}]);
+              }
+
+              elementStart(0, 'child');
+              {
+                // Start of translated section 1
+                element(1, 'span', ['title', 'keepMe']);    // START_SPAN_0
+                element(2, 'span', ['title', 'deleteMe']);  // START_SPAN_1
+                // End of translated section 1
+              }
+              elementEnd();
+              i18nApply(1, i18n_1[0]);
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(Parent);
+      expect(fixture.html).toEqual('<child><span title="keepMe">Contenu</span></child>');
+    });
+  });
+
+  describe('i18nInterpolation', () => {
+    it('i18nInterpolation should return the same value as i18nInterpolationV', () => {
+      const MSG_DIV_SECTION_1 = `start {$EXP_2} middle {$EXP_1} end`;
+      const i18n_1 = i18nExpMapping(MSG_DIV_SECTION_1, {'EXP_1': 0, 'EXP_2': 1});
+      let interpolation;
+      let interpolationV;
+
+      class MyApp {
+        exp1: any = '1';
+        exp2: any = '2';
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <div i18n i18n-title title="{{exp1}}{{exp2}}"></div>
+
+          // Translated to:
+          // <div i18n i18n-title title="start {{exp2}} middle {{exp1}} end"></div>
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'div');  // translated section 1
+            }
+            if (rf & RenderFlags.Update) {
+              interpolation = i18nInterpolation2(i18n_1, ctx.exp1, ctx.exp2);
+              interpolationV = i18nInterpolationV(i18n_1, [ctx.exp1, ctx.exp2]);
+              elementProperty(0, 'title', interpolation);
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(interpolation).toBeDefined();
+      expect(interpolation).toEqual(interpolationV);
+    });
+
+    it('i18nInterpolation3 should work', () => {
+      const MSG_DIV_SECTION_1 = `start {$EXP_1} _ {$EXP_2} _ {$EXP_3} end`;
+      const i18n_1 = i18nExpMapping(MSG_DIV_SECTION_1, {'EXP_1': 0, 'EXP_2': 1, 'EXP_3': 2});
+
+      class MyApp {
+        exp1: any = '1';
+        exp2: any = '2';
+        exp3: any = '3';
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <div i18n i18n-title title="{{exp1}}{{exp2}}{{exp3}}"></div>
+
+          // Translated to:
+          // <div i18n i18n-title title="start {{exp1}} _ {{exp2}} _ {{exp3}} end"></div>
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'div');  // translated section 1
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(0, 'title', i18nInterpolation3(i18n_1, ctx.exp1, ctx.exp2, ctx.exp3));
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<div title="start 1 _ 2 _ 3 end"></div>');
+    });
+
+    it('i18nInterpolation4 should work', () => {
+      const MSG_DIV_SECTION_1 = `start {$EXP_1} _ {$EXP_2} _ {$EXP_3} _ {$EXP_4} end`;
+      const i18n_1 =
+          i18nExpMapping(MSG_DIV_SECTION_1, {'EXP_1': 0, 'EXP_2': 1, 'EXP_3': 2, 'EXP_4': 3});
+
+      class MyApp {
+        exp1: any = '1';
+        exp2: any = '2';
+        exp3: any = '3';
+        exp4: any = '4';
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <div i18n i18n-title title="{{exp1}}{{exp2}}{{exp3}}{{exp4}}"></div>
+
+          // Translated to:
+          // <div i18n i18n-title title="start {{exp1}} _ {{exp2}} _ {{exp3}} _ {{exp4}} end"></div>
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'div');  // translated section 1
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(
+                  0, 'title', i18nInterpolation4(i18n_1, ctx.exp1, ctx.exp2, ctx.exp3, ctx.exp4));
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<div title="start 1 _ 2 _ 3 _ 4 end"></div>');
+    });
+
+    it('i18nInterpolation5 should work', () => {
+      const MSG_DIV_SECTION_1 = `start {$EXP_1} _ {$EXP_2} _ {$EXP_3} _ {$EXP_4} _ {$EXP_5} end`;
+      const i18n_1 = i18nExpMapping(
+          MSG_DIV_SECTION_1, {'EXP_1': 0, 'EXP_2': 1, 'EXP_3': 2, 'EXP_4': 3, 'EXP_5': 4});
+
+      class MyApp {
+        exp1: any = '1';
+        exp2: any = '2';
+        exp3: any = '3';
+        exp4: any = '4';
+        exp5: any = '5';
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <div i18n i18n-title title="{{exp1}}{{exp2}}{{exp3}}{{exp4}}{{exp5}}"></div>
+
+          // Translated to:
+          // <div i18n i18n-title title="start {{exp1}} _ {{exp2}} _ {{exp3}} _ {{exp4}} _ {{exp5}}
+          // end"></div>
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'div');  // translated section 1
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(
+                  0, 'title',
+                  i18nInterpolation5(i18n_1, ctx.exp1, ctx.exp2, ctx.exp3, ctx.exp4, ctx.exp5));
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<div title="start 1 _ 2 _ 3 _ 4 _ 5 end"></div>');
+    });
+
+    it('i18nInterpolation6 should work', () => {
+      const MSG_DIV_SECTION_1 =
+          `start {$EXP_1} _ {$EXP_2} _ {$EXP_3} _ {$EXP_4} _ {$EXP_5} _ {$EXP_6} end`;
+      const i18n_1 = i18nExpMapping(
+          MSG_DIV_SECTION_1,
+          {'EXP_1': 0, 'EXP_2': 1, 'EXP_3': 2, 'EXP_4': 3, 'EXP_5': 4, 'EXP_6': 5});
+
+      class MyApp {
+        exp1: any = '1';
+        exp2: any = '2';
+        exp3: any = '3';
+        exp4: any = '4';
+        exp5: any = '5';
+        exp6: any = '6';
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <div i18n i18n-title title="{{exp1}}{{exp2}}{{exp3}}{{exp4}}{{exp5}}{{exp6}}"></div>
+
+          // Translated to:
+          // <div i18n i18n-title title="start {{exp1}} _ {{exp2}} _ {{exp3}} _ {{exp4}} _ {{exp5}}
+          // _ {{exp6}} end"></div>
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'div');  // translated section 1
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(
+                  0, 'title',
+                  i18nInterpolation6(
+                      i18n_1, ctx.exp1, ctx.exp2, ctx.exp3, ctx.exp4, ctx.exp5, ctx.exp6));
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<div title="start 1 _ 2 _ 3 _ 4 _ 5 _ 6 end"></div>');
+    });
+
+    it('i18nInterpolation7 should work', () => {
+      const MSG_DIV_SECTION_1 =
+          `start {$EXP_1} _ {$EXP_2} _ {$EXP_3} _ {$EXP_4} _ {$EXP_5} _ {$EXP_6} _ {$EXP_7} end`;
+      const i18n_1 = i18nExpMapping(
+          MSG_DIV_SECTION_1,
+          {'EXP_1': 0, 'EXP_2': 1, 'EXP_3': 2, 'EXP_4': 3, 'EXP_5': 4, 'EXP_6': 5, 'EXP_7': 6});
+
+      class MyApp {
+        exp1: any = '1';
+        exp2: any = '2';
+        exp3: any = '3';
+        exp4: any = '4';
+        exp5: any = '5';
+        exp6: any = '6';
+        exp7: any = '7';
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <div i18n i18n-title
+          // title="{{exp1}}{{exp2}}{{exp3}}{{exp4}}{{exp5}}{{exp6}}{{exp7}}"></div>
+
+          // Translated to:
+          // <div i18n i18n-title title="start {{exp1}} _ {{exp2}} _ {{exp3}} _ {{exp4}} _ {{exp5}}
+          // _ {{exp6}} _ {{exp7}} end"></div>
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'div');  // translated section 1
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(
+                  0, 'title', i18nInterpolation7(
+                                  i18n_1, ctx.exp1, ctx.exp2, ctx.exp3, ctx.exp4, ctx.exp5,
+                                  ctx.exp6, ctx.exp7));
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<div title="start 1 _ 2 _ 3 _ 4 _ 5 _ 6 _ 7 end"></div>');
+    });
+
+    it('i18nInterpolation8 should work', () => {
+      const MSG_DIV_SECTION_1 =
+          `start {$EXP_1} _ {$EXP_2} _ {$EXP_3} _ {$EXP_4} _ {$EXP_5} _ {$EXP_6} _ {$EXP_7} _ {$EXP_8} end`;
+      const i18n_1 = i18nExpMapping(MSG_DIV_SECTION_1, {
+        'EXP_1': 0,
+        'EXP_2': 1,
+        'EXP_3': 2,
+        'EXP_4': 3,
+        'EXP_5': 4,
+        'EXP_6': 5,
+        'EXP_7': 6,
+        'EXP_8': 7
+      });
+
+      class MyApp {
+        exp1: any = '1';
+        exp2: any = '2';
+        exp3: any = '3';
+        exp4: any = '4';
+        exp5: any = '5';
+        exp6: any = '6';
+        exp7: any = '7';
+        exp8: any = '8';
+
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          // Initial template:
+          // <div i18n i18n-title
+          // title="{{exp1}}{{exp2}}{{exp3}}{{exp4}}{{exp5}}{{exp6}}{{exp7}}{{exp8}}"></div>
+
+          // Translated to:
+          // <div i18n i18n-title title="start {{exp1}} _ {{exp2}} _ {{exp3}} _ {{exp4}} _ {{exp5}}
+          // _ {{exp6}} _ {{exp7}} _ {{exp8}} end"></div>
+          template: (rf: RenderFlags, ctx: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'div');  // translated section 1
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(
+                  0, 'title', i18nInterpolation8(
+                                  i18n_1, ctx.exp1, ctx.exp2, ctx.exp3, ctx.exp4, ctx.exp5,
+                                  ctx.exp6, ctx.exp7, ctx.exp8));
+            }
+          }
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('<div title="start 1 _ 2 _ 3 _ 4 _ 5 _ 6 _ 7 _ 8 end"></div>');
+    });
+
+  });
+});
diff --git a/packages/core/test/render3/imported_renderer2.ts b/packages/core/test/render3/imported_renderer2.ts
new file mode 100644
index 000000000000..a822cecbd3d1
--- /dev/null
+++ b/packages/core/test/render3/imported_renderer2.ts
@@ -0,0 +1,110 @@
+/**
+ * @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 {ɵAnimationEngine, ɵNoopAnimationStyleNormalizer} from '@angular/animations/browser';
+import {MockAnimationDriver} from '@angular/animations/browser/testing';
+import {NgZone, RendererFactory2} from '@angular/core';
+import {NoopNgZone} from '@angular/core/src/zone/ng_zone';
+import {EventManager, ɵDomRendererFactory2, ɵDomSharedStylesHost} from '@angular/platform-browser';
+import {ɵAnimationRendererFactory} from '@angular/platform-browser/animations';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {EventManagerPlugin} from '@angular/platform-browser/src/dom/events/event_manager';
+
+export class SimpleDomEventsPlugin extends EventManagerPlugin {
+  constructor(doc: any) { super(doc); }
+
+  supports(eventName: string): boolean { return true; }
+
+  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
+    let callback: EventListener = handler as EventListener;
+    element.addEventListener(eventName, callback, false);
+    return () => this.removeEventListener(element, eventName, callback);
+  }
+
+  removeEventListener(target: any, eventName: string, callback: Function): void {
+    return target.removeEventListener.apply(target, [eventName, callback, false]);
+  }
+}
+
+export function getRendererFactory2(document: any): RendererFactory2 {
+  const fakeNgZone: NgZone = new NoopNgZone();
+  const eventManager = new EventManager([new SimpleDomEventsPlugin(document)], fakeNgZone);
+  const rendererFactory =
+      new ɵDomRendererFactory2(eventManager, new ɵDomSharedStylesHost(document));
+  const origCreateRenderer = rendererFactory.createRenderer;
+  rendererFactory.createRenderer = function() {
+    const renderer = origCreateRenderer.apply(this, arguments);
+    renderer.destroyNode = () => {};
+    return renderer;
+  };
+  return rendererFactory;
+}
+
+export function getAnimationRendererFactory2(document: any): RendererFactory2 {
+  const fakeNgZone: NgZone = new NoopNgZone();
+  return new ɵAnimationRendererFactory(
+      getRendererFactory2(document),
+      new ɵAnimationEngine(
+          document.body, new MockAnimationDriver(), new ɵNoopAnimationStyleNormalizer()),
+      fakeNgZone);
+}
+
+// TODO: code duplicated from ../linker/change_detection_integration_spec.ts, to be removed
+// START duplicated code
+export class RenderLog {
+  log: string[] = [];
+  loggedValues: any[] = [];
+
+  setElementProperty(el: any, propName: string, propValue: any) {
+    this.log.push(`${propName}=${propValue}`);
+    this.loggedValues.push(propValue);
+  }
+
+  setText(node: any, value: string) {
+    this.log.push(`{{${value}}}`);
+    this.loggedValues.push(value);
+  }
+
+  clear() {
+    this.log = [];
+    this.loggedValues = [];
+  }
+}
+
+/**
+ * This function patches the DomRendererFactory2 so that it returns a DefaultDomRenderer2
+ * which logs some of the DOM operations through a RenderLog instance.
+ */
+export function patchLoggingRenderer2(rendererFactory: RendererFactory2, log: RenderLog) {
+  if ((<any>rendererFactory).__patchedForLogging) {
+    return;
+  }
+  (<any>rendererFactory).__patchedForLogging = true;
+  const origCreateRenderer = rendererFactory.createRenderer;
+  rendererFactory.createRenderer = function() {
+    const renderer = origCreateRenderer.apply(this, arguments);
+    if ((<any>renderer).__patchedForLogging) {
+      return renderer;
+    }
+    (<any>renderer).__patchedForLogging = true;
+    const origSetProperty = renderer.setProperty;
+    const origSetValue = renderer.setValue;
+    renderer.setProperty = function(el: any, name: string, value: any): void {
+      log.setElementProperty(el, name, value);
+      origSetProperty.call(renderer, el, name, value);
+    };
+    renderer.setValue = function(node: any, value: string): void {
+      if (getDOM().isTextNode(node)) {
+        log.setText(node, value);
+      }
+      origSetValue.call(renderer, node, value);
+    };
+    return renderer;
+  };
+}
+// END duplicated code
diff --git a/packages/core/test/render3/instructions_spec.ts b/packages/core/test/render3/instructions_spec.ts
new file mode 100644
index 000000000000..684f26cbfee6
--- /dev/null
+++ b/packages/core/test/render3/instructions_spec.ts
@@ -0,0 +1,573 @@
+/**
+ * @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 {NgForOfContext} from '@angular/common';
+
+import {RenderFlags, directiveInject} from '../../src/render3';
+import {defineComponent} from '../../src/render3/definition';
+import {bind, container, element, elementAttribute, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap, interpolation1, renderTemplate, text, textBinding} from '../../src/render3/instructions';
+import {InitialStylingFlags} from '../../src/render3/interfaces/definition';
+import {AttributeMarker, LElementNode, LNode} from '../../src/render3/interfaces/node';
+import {RElement, domRendererFactory3} from '../../src/render3/interfaces/renderer';
+import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
+import {defaultStyleSanitizer, sanitizeHtml, sanitizeResourceUrl, sanitizeScript, sanitizeStyle, sanitizeUrl} from '../../src/sanitization/sanitization';
+import {Sanitizer, SecurityContext} from '../../src/sanitization/security';
+import {StyleSanitizeFn} from '../../src/sanitization/style_sanitizer';
+
+import {NgForOf} from './common_with_def';
+import {ComponentFixture, TemplateFixture} from './render_util';
+
+describe('instructions', () => {
+  function createAnchor() {
+    elementStart(0, 'a');
+    elementStyling();
+    elementEnd();
+  }
+
+  function createDiv(initialStyles?: (string | number)[], styleSanitizer?: StyleSanitizeFn) {
+    elementStart(0, 'div');
+    elementStyling(
+        [], initialStyles && Array.isArray(initialStyles) ? initialStyles : null, styleSanitizer);
+    elementEnd();
+  }
+
+  function createScript() { element(0, 'script'); }
+
+  describe('bind', () => {
+    it('should update bindings when value changes', () => {
+      const t = new TemplateFixture(createAnchor);
+
+      t.update(() => elementProperty(0, 'title', bind('Hello')));
+      expect(t.html).toEqual('<a title="Hello"></a>');
+
+      t.update(() => elementProperty(0, 'title', bind('World')));
+      expect(t.html).toEqual('<a title="World"></a>');
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 1,
+        tNode: 2,  // 1 for hostElement + 1 for the template under test
+        tView: 1,
+        rendererCreateElement: 1,
+        rendererSetProperty: 2
+      });
+    });
+
+    it('should not update bindings when value does not change', () => {
+      const idempotentUpdate = () => elementProperty(0, 'title', bind('Hello'));
+      const t = new TemplateFixture(createAnchor, idempotentUpdate);
+
+      t.update();
+      expect(t.html).toEqual('<a title="Hello"></a>');
+
+      t.update();
+      expect(t.html).toEqual('<a title="Hello"></a>');
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 1,
+        tNode: 2,  // 1 for hostElement + 1 for the template under test
+        tView: 1,
+        rendererCreateElement: 1,
+        rendererSetProperty: 1
+      });
+    });
+  });
+
+  describe('element', () => {
+    it('should create an element', () => {
+      const t = new TemplateFixture(() => { element(0, 'div', ['id', 'test', 'title', 'Hello']); });
+
+      const div = (t.hostNode.native as HTMLElement).querySelector('div') !;
+      expect(div.id).toEqual('test');
+      expect(div.title).toEqual('Hello');
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 1,
+        tNode: 2,  // 1 for div, 1 for host element
+        tView: 1,
+        rendererCreateElement: 1,
+      });
+    });
+
+    it('should allow setting namespaced attributes', () => {
+      const t = new TemplateFixture(() => {
+        element(0, 'div', [
+          // id="test"
+          'id',
+          'test',
+          // test:foo="bar"
+          AttributeMarker.NamespaceURI,
+          'http://someuri.com/2018/test',
+          'test:foo',
+          'bar',
+          // title="Hello"
+          'title',
+          'Hello',
+        ]);
+      });
+
+      const div = (t.hostNode.native as HTMLElement).querySelector('div') !;
+      const attrs: any = div.attributes;
+
+      expect(attrs['id'].name).toEqual('id');
+      expect(attrs['id'].namespaceURI).toEqual(null);
+      expect(attrs['id'].value).toEqual('test');
+
+      expect(attrs['test:foo'].name).toEqual('test:foo');
+      expect(attrs['test:foo'].namespaceURI).toEqual('http://someuri.com/2018/test');
+      expect(attrs['test:foo'].value).toEqual('bar');
+
+      expect(attrs['title'].name).toEqual('title');
+      expect(attrs['title'].namespaceURI).toEqual(null);
+      expect(attrs['title'].value).toEqual('Hello');
+
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 1,
+        tNode: 2,  // 1 for div, 1 for host element
+        tView: 1,
+        rendererCreateElement: 1,
+        rendererSetAttribute: 3
+      });
+    });
+  });
+
+  describe('elementAttribute', () => {
+    it('should use sanitizer function', () => {
+      const t = new TemplateFixture(createDiv);
+
+      t.update(() => elementAttribute(0, 'title', 'javascript:true', sanitizeUrl));
+      expect(t.html).toEqual('<div title="unsafe:javascript:true"></div>');
+
+      t.update(
+          () => elementAttribute(
+              0, 'title', bypassSanitizationTrustUrl('javascript:true'), sanitizeUrl));
+      expect(t.html).toEqual('<div title="javascript:true"></div>');
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 1,
+        tNode: 2,  // 1 for div, 1 for host element
+        tView: 1,
+        rendererCreateElement: 1,
+        rendererSetAttribute: 2
+      });
+    });
+  });
+
+  describe('elementProperty', () => {
+    it('should use sanitizer function when available', () => {
+      const t = new TemplateFixture(createDiv);
+
+      t.update(() => elementProperty(0, 'title', 'javascript:true', sanitizeUrl));
+      expect(t.html).toEqual('<div title="unsafe:javascript:true"></div>');
+
+      t.update(
+          () => elementProperty(
+              0, 'title', bypassSanitizationTrustUrl('javascript:false'), sanitizeUrl));
+      expect(t.html).toEqual('<div title="javascript:false"></div>');
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 1,
+        tNode: 2,  // 1 for div, 1 for host element
+        tView: 1,
+        rendererCreateElement: 1,
+      });
+    });
+
+    it('should not stringify non string values', () => {
+      const t = new TemplateFixture(createDiv);
+
+      t.update(() => elementProperty(0, 'hidden', false));
+      // The hidden property would be true if `false` was stringified into `"false"`.
+      expect((t.hostNode.native as HTMLElement).querySelector('div') !.hidden).toEqual(false);
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 1,
+        tNode: 2,  // 1 for div, 1 for host element
+        tView: 1,
+        rendererCreateElement: 1,
+        rendererSetProperty: 1
+      });
+    });
+  });
+
+  describe('elementStyleProp', () => {
+    it('should automatically sanitize unless a bypass operation is applied', () => {
+      const t = new TemplateFixture(
+          () => { return createDiv(['background-image'], defaultStyleSanitizer); });
+      t.update(() => {
+        elementStyleProp(0, 0, 'url("http://server")');
+        elementStylingApply(0);
+      });
+      // nothing is set because sanitizer suppresses it.
+      expect(t.html).toEqual('<div></div>');
+
+      t.update(() => {
+        elementStyleProp(0, 0, bypassSanitizationTrustStyle('url("http://server2")'));
+        elementStylingApply(0);
+      });
+      expect((t.hostElement.firstChild as HTMLElement).style.getPropertyValue('background-image'))
+          .toEqual('url("http://server2")');
+    });
+
+    it('should not re-apply the style value even if it is a newly bypassed again', () => {
+      const sanitizerInterceptor = new MockSanitizerInterceptor();
+      const t = createTemplateFixtureWithSanitizer(
+          () => createDiv(['background-image'], sanitizerInterceptor.getStyleSanitizer()),
+          sanitizerInterceptor);
+
+      t.update(() => {
+        elementStyleProp(0, 0, bypassSanitizationTrustStyle('apple'));
+        elementStylingApply(0);
+      });
+
+      expect(sanitizerInterceptor.lastValue !).toEqual('apple');
+      sanitizerInterceptor.lastValue = null;
+
+      t.update(() => {
+        elementStyleProp(0, 0, bypassSanitizationTrustStyle('apple'));
+        elementStylingApply(0);
+      });
+      expect(sanitizerInterceptor.lastValue).toEqual(null);
+    });
+  });
+
+  describe('elementStyleMap', () => {
+    function createDivWithStyle() {
+      elementStart(0, 'div');
+      elementStyling([], ['height', InitialStylingFlags.VALUES_MODE, 'height', '10px']);
+      elementEnd();
+    }
+
+    it('should add style', () => {
+      const fixture = new TemplateFixture(createDivWithStyle);
+      fixture.update(() => {
+        elementStylingMap(0, null, {'background-color': 'red'});
+        elementStylingApply(0);
+      });
+      expect(fixture.html).toEqual('<div style="height: 10px; background-color: red;"></div>');
+    });
+
+    it('should sanitize new styles that may contain `url` properties', () => {
+      const detectedValues: string[] = [];
+      const sanitizerInterceptor =
+          new MockSanitizerInterceptor(value => { detectedValues.push(value); });
+      const fixture = createTemplateFixtureWithSanitizer(
+          () => createDiv([], sanitizerInterceptor.getStyleSanitizer()), sanitizerInterceptor);
+
+      fixture.update(() => {
+        elementStylingMap(0, null, {
+          'background-image': 'background-image',
+          'background': 'background',
+          'border-image': 'border-image',
+          'list-style': 'list-style',
+          'list-style-image': 'list-style-image',
+          'filter': 'filter',
+          'width': 'width'
+        });
+        elementStylingApply(0);
+      });
+
+      const props = detectedValues.sort();
+      expect(props).toEqual([
+        'background', 'background-image', 'border-image', 'filter', 'list-style', 'list-style-image'
+      ]);
+    });
+  });
+
+  describe('elementClass', () => {
+    function createDivWithStyling() {
+      elementStart(0, 'div');
+      elementStyling();
+      elementEnd();
+    }
+
+    it('should add class', () => {
+      const fixture = new TemplateFixture(createDivWithStyling);
+      fixture.update(() => {
+        elementStylingMap(0, 'multiple classes');
+        elementStylingApply(0);
+      });
+      expect(fixture.html).toEqual('<div class="multiple classes"></div>');
+    });
+  });
+
+  describe('performance counters', () => {
+    it('should create tViews only once for each nested level', () => {
+      const _c0 = ['ngFor', '', 'ngForOf', ''];
+      /**
+       * <ul *ngFor="let row of rows">
+       *   <li *ngFor="let col of row.cols">{{col}}</li>
+       * </ul>
+       */
+      class NestedLoops {
+        rows = [['a', 'b'], ['A', 'B'], ['a', 'b'], ['A', 'B']];
+
+        static ngComponentDef = defineComponent({
+          type: NestedLoops,
+          selectors: [['nested-loops']],
+          factory: function ToDoAppComponent_Factory() { return new NestedLoops(); },
+          template: function ToDoAppComponent_Template(rf: RenderFlags, ctx: NestedLoops) {
+            if (rf & RenderFlags.Create) {
+              container(0, ToDoAppComponent_NgForOf_Template_0, null, _c0);
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(0, 'ngForOf', bind(ctx.rows));
+            }
+            function ToDoAppComponent_NgForOf_Template_0(
+                rf: RenderFlags, ctx0: NgForOfContext<any>) {
+              if (rf & RenderFlags.Create) {
+                elementStart(0, 'ul');
+                container(1, ToDoAppComponent_NgForOf_NgForOf_Template_1, null, _c0);
+                elementEnd();
+              }
+              if (rf & RenderFlags.Update) {
+                const row_r2 = ctx0.$implicit;
+                elementProperty(1, 'ngForOf', bind(row_r2));
+              }
+              function ToDoAppComponent_NgForOf_NgForOf_Template_1(
+                  rf: RenderFlags, ctx1: NgForOfContext<any>) {
+                if (rf & RenderFlags.Create) {
+                  elementStart(0, 'li');
+                  text(1);
+                  elementEnd();
+                }
+                if (rf & RenderFlags.Update) {
+                  const col_r3 = ctx1.$implicit;
+                  textBinding(1, interpolation1('', col_r3, ''));
+                }
+              }
+            }
+          },
+          directives: [NgForOf]
+        });
+      }
+      const fixture = new ComponentFixture(NestedLoops);
+      expect(ngDevMode).toHaveProperties({
+        // Expect: fixture view/Host view + component + ngForRow + ngForCol
+        tView: 4,  // should be: 4,
+      });
+
+    });
+  });
+
+  describe('sanitization injection compatibility', () => {
+    it('should work for url sanitization', () => {
+      const s = new LocalMockSanitizer(value => `${value}-sanitized`);
+      const t = new TemplateFixture(createAnchor, undefined, null, null, s);
+      const inputValue = 'http://foo';
+      const outputValue = 'http://foo-sanitized';
+
+      t.update(() => elementAttribute(0, 'href', inputValue, sanitizeUrl));
+      expect(t.html).toEqual(`<a href="${outputValue}"></a>`);
+      expect(s.lastSanitizedValue).toEqual(outputValue);
+    });
+
+    it('should bypass url sanitization if marked by the service', () => {
+      const s = new LocalMockSanitizer(value => '');
+      const t = new TemplateFixture(createAnchor, undefined, null, null, s);
+      const inputValue = s.bypassSecurityTrustUrl('http://foo');
+      const outputValue = 'http://foo';
+
+      t.update(() => elementAttribute(0, 'href', inputValue, sanitizeUrl));
+      expect(t.html).toEqual(`<a href="${outputValue}"></a>`);
+      expect(s.lastSanitizedValue).toBeFalsy();
+    });
+
+    it('should bypass ivy-level url sanitization if a custom sanitizer is used', () => {
+      const s = new LocalMockSanitizer(value => '');
+      const t = new TemplateFixture(createAnchor, undefined, null, null, s);
+      const inputValue = bypassSanitizationTrustUrl('http://foo');
+      const outputValue = 'http://foo-ivy';
+
+      t.update(() => elementAttribute(0, 'href', inputValue, sanitizeUrl));
+      expect(t.html).toEqual(`<a href="${outputValue}"></a>`);
+      expect(s.lastSanitizedValue).toBeFalsy();
+    });
+
+    it('should work for style sanitization', () => {
+      const s = new LocalMockSanitizer(value => `color:blue`);
+      const t = new TemplateFixture(createDiv, undefined, null, null, s);
+      const inputValue = 'color:red';
+      const outputValue = 'color:blue';
+
+      t.update(() => elementAttribute(0, 'style', inputValue, sanitizeStyle));
+      expect(stripStyleWsCharacters(t.html)).toEqual(`<div style="${outputValue}"></div>`);
+      expect(s.lastSanitizedValue).toEqual(outputValue);
+    });
+
+    it('should bypass style sanitization if marked by the service', () => {
+      const s = new LocalMockSanitizer(value => '');
+      const t = new TemplateFixture(createDiv, undefined, null, null, s);
+      const inputValue = s.bypassSecurityTrustStyle('color:maroon');
+      const outputValue = 'color:maroon';
+
+      t.update(() => elementAttribute(0, 'style', inputValue, sanitizeStyle));
+      expect(stripStyleWsCharacters(t.html)).toEqual(`<div style="${outputValue}"></div>`);
+      expect(s.lastSanitizedValue).toBeFalsy();
+    });
+
+    it('should bypass ivy-level style sanitization if a custom sanitizer is used', () => {
+      const s = new LocalMockSanitizer(value => '');
+      const t = new TemplateFixture(createDiv, undefined, null, null, s);
+      const inputValue = bypassSanitizationTrustStyle('font-family:foo');
+      const outputValue = 'font-family:foo-ivy';
+
+      t.update(() => elementAttribute(0, 'style', inputValue, sanitizeStyle));
+      expect(stripStyleWsCharacters(t.html)).toEqual(`<div style="${outputValue}"></div>`);
+      expect(s.lastSanitizedValue).toBeFalsy();
+    });
+
+    it('should work for resourceUrl sanitization', () => {
+      const s = new LocalMockSanitizer(value => `${value}-sanitized`);
+      const t = new TemplateFixture(createScript, undefined, null, null, s);
+      const inputValue = 'http://resource';
+      const outputValue = 'http://resource-sanitized';
+
+      t.update(() => elementAttribute(0, 'src', inputValue, sanitizeResourceUrl));
+      expect(t.html).toEqual(`<script src="${outputValue}"></script>`);
+      expect(s.lastSanitizedValue).toEqual(outputValue);
+    });
+
+    it('should bypass resourceUrl sanitization if marked by the service', () => {
+      const s = new LocalMockSanitizer(value => '');
+      const t = new TemplateFixture(createScript, undefined, null, null, s);
+      const inputValue = s.bypassSecurityTrustResourceUrl('file://all-my-secrets.pdf');
+      const outputValue = 'file://all-my-secrets.pdf';
+
+      t.update(() => elementAttribute(0, 'src', inputValue, sanitizeResourceUrl));
+      expect(t.html).toEqual(`<script src="${outputValue}"></script>`);
+      expect(s.lastSanitizedValue).toBeFalsy();
+    });
+
+    it('should bypass ivy-level resourceUrl sanitization if a custom sanitizer is used', () => {
+      const s = new LocalMockSanitizer(value => '');
+      const t = new TemplateFixture(createScript, undefined, null, null, s);
+      const inputValue = bypassSanitizationTrustResourceUrl('file://all-my-secrets.pdf');
+      const outputValue = 'file://all-my-secrets.pdf-ivy';
+
+      t.update(() => elementAttribute(0, 'src', inputValue, sanitizeResourceUrl));
+      expect(t.html).toEqual(`<script src="${outputValue}"></script>`);
+      expect(s.lastSanitizedValue).toBeFalsy();
+    });
+
+    it('should work for script sanitization', () => {
+      const s = new LocalMockSanitizer(value => `${value} //sanitized`);
+      const t = new TemplateFixture(createScript, undefined, null, null, s);
+      const inputValue = 'fn();';
+      const outputValue = 'fn(); //sanitized';
+
+      t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeScript));
+      expect(t.html).toEqual(`<script>${outputValue}</script>`);
+      expect(s.lastSanitizedValue).toEqual(outputValue);
+    });
+
+    it('should bypass script sanitization if marked by the service', () => {
+      const s = new LocalMockSanitizer(value => '');
+      const t = new TemplateFixture(createScript, undefined, null, null, s);
+      const inputValue = s.bypassSecurityTrustScript('alert("bar")');
+      const outputValue = 'alert("bar")';
+
+      t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeScript));
+      expect(t.html).toEqual(`<script>${outputValue}</script>`);
+      expect(s.lastSanitizedValue).toBeFalsy();
+    });
+
+    it('should bypass ivy-level script sanitization if a custom sanitizer is used', () => {
+      const s = new LocalMockSanitizer(value => '');
+      const t = new TemplateFixture(createScript, undefined, null, null, s);
+      const inputValue = bypassSanitizationTrustScript('alert("bar")');
+      const outputValue = 'alert("bar")-ivy';
+
+      t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeScript));
+      expect(t.html).toEqual(`<script>${outputValue}</script>`);
+      expect(s.lastSanitizedValue).toBeFalsy();
+    });
+
+    it('should work for html sanitization', () => {
+      const s = new LocalMockSanitizer(value => `${value} <!--sanitized-->`);
+      const t = new TemplateFixture(createDiv, undefined, null, null, s);
+      const inputValue = '<header></header>';
+      const outputValue = '<header></header> <!--sanitized-->';
+
+      t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeHtml));
+      expect(t.html).toEqual(`<div>${outputValue}</div>`);
+      expect(s.lastSanitizedValue).toEqual(outputValue);
+    });
+
+    it('should bypass html sanitization if marked by the service', () => {
+      const s = new LocalMockSanitizer(value => '');
+      const t = new TemplateFixture(createDiv, undefined, null, null, s);
+      const inputValue = s.bypassSecurityTrustHtml('<div onclick="alert(123)"></div>');
+      const outputValue = '<div onclick="alert(123)"></div>';
+
+      t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeHtml));
+      expect(t.html).toEqual(`<div>${outputValue}</div>`);
+      expect(s.lastSanitizedValue).toBeFalsy();
+    });
+
+    it('should bypass ivy-level script sanitization if a custom sanitizer is used', () => {
+      const s = new LocalMockSanitizer(value => '');
+      const t = new TemplateFixture(createDiv, undefined, null, null, s);
+      const inputValue = bypassSanitizationTrustHtml('<div onclick="alert(123)"></div>');
+      const outputValue = '<div onclick="alert(123)"></div>-ivy';
+
+      t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeHtml));
+      expect(t.html).toEqual(`<div>${outputValue}</div>`);
+      expect(s.lastSanitizedValue).toBeFalsy();
+    });
+  });
+});
+
+class LocalSanitizedValue {
+  constructor(public value: any) {}
+
+  toString() { return this.value; }
+}
+
+class LocalMockSanitizer implements Sanitizer {
+  // TODO(issue/24571): remove '!'.
+  public lastSanitizedValue !: string | null;
+
+  constructor(private _interceptor: (value: string|null|any) => string) {}
+
+  sanitize(context: SecurityContext, value: LocalSanitizedValue|string|null|any): string|null {
+    if (value instanceof String) {
+      return value.toString() + '-ivy';
+    }
+
+    if (value instanceof LocalSanitizedValue) {
+      return value.toString();
+    }
+
+    return this.lastSanitizedValue = this._interceptor(value);
+  }
+
+  bypassSecurityTrustHtml(value: string) { return new LocalSanitizedValue(value); }
+
+  bypassSecurityTrustStyle(value: string) { return new LocalSanitizedValue(value); }
+
+  bypassSecurityTrustScript(value: string) { return new LocalSanitizedValue(value); }
+
+  bypassSecurityTrustUrl(value: string) { return new LocalSanitizedValue(value); }
+
+  bypassSecurityTrustResourceUrl(value: string) { return new LocalSanitizedValue(value); }
+}
+
+class MockSanitizerInterceptor {
+  public lastValue: string|null = null;
+  constructor(private _interceptorFn?: ((value: any) => any)|null) {}
+  getStyleSanitizer() { return defaultStyleSanitizer; }
+  sanitize(context: SecurityContext, value: LocalSanitizedValue|string|null|any): string|null {
+    if (this._interceptorFn) {
+      this._interceptorFn(value);
+    }
+    return this.lastValue = value;
+  }
+}
+
+function stripStyleWsCharacters(value: string): string {
+  // color: blue; => color:blue
+  return value.replace(/;/g, '').replace(/:\s+/g, ':');
+}
+
+function createTemplateFixtureWithSanitizer(buildFn: () => any, sanitizer: Sanitizer) {
+  return new TemplateFixture(buildFn, () => {}, null, null, sanitizer);
+}
diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts
new file mode 100644
index 000000000000..7df1547fc5a7
--- /dev/null
+++ b/packages/core/test/render3/integration_spec.ts
@@ -0,0 +1,1337 @@
+/**
+ * @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, TemplateRef, ViewContainerRef} from '@angular/core';
+import {RenderFlags} from '@angular/core/src/render3';
+
+import {getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from '../../src/render3/di';
+import {AttributeMarker, defineComponent, defineDirective, injectElementRef, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
+import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, text, textBinding} from '../../src/render3/instructions';
+import {InitialStylingFlags} from '../../src/render3/interfaces/definition';
+import {HEADER_OFFSET} from '../../src/render3/interfaces/view';
+import {sanitizeUrl} from '../../src/sanitization/sanitization';
+import {Sanitizer, SecurityContext} from '../../src/sanitization/security';
+
+import {NgIf} from './common_with_def';
+import {ComponentFixture, TemplateFixture, containerEl, createComponent, renderToHtml} from './render_util';
+
+describe('render3 integration test', () => {
+
+  describe('render', () => {
+
+    it('should render basic template', () => {
+      expect(renderToHtml(Template, {})).toEqual('<span title="Hello">Greetings</span>');
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'span', ['title', 'Hello']);
+          { text(1, 'Greetings'); }
+          elementEnd();
+        }
+      }
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 1,
+        tNode: 3,  // 1 for div, 1 for text, 1 for host element
+        tView: 1,
+        rendererCreateElement: 1,
+      });
+    });
+
+    it('should render and update basic "Hello, World" template', () => {
+      expect(renderToHtml(Template, 'World')).toEqual('<h1>Hello, World!</h1>');
+      expect(renderToHtml(Template, 'New World')).toEqual('<h1>Hello, New World!</h1>');
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'h1');
+          { text(1); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(1, interpolation1('Hello, ', ctx, '!'));
+        }
+      }
+    });
+  });
+
+  describe('text bindings', () => {
+    it('should render "undefined" as "" when used with `bind()`', () => {
+      function Template(rf: RenderFlags, name: string) {
+        if (rf & RenderFlags.Create) {
+          text(0);
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(0, bind(name));
+        }
+      }
+
+      expect(renderToHtml(Template, 'benoit')).toEqual('benoit');
+      expect(renderToHtml(Template, undefined)).toEqual('');
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 0,
+        tNode: 2,
+        tView: 1,
+        rendererSetText: 2,
+      });
+    });
+
+    it('should render "null" as "" when used with `bind()`', () => {
+      function Template(rf: RenderFlags, name: string) {
+        if (rf & RenderFlags.Create) {
+          text(0);
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(0, bind(name));
+        }
+      }
+
+      expect(renderToHtml(Template, 'benoit')).toEqual('benoit');
+      expect(renderToHtml(Template, null)).toEqual('');
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 0,
+        tNode: 2,
+        tView: 1,
+        rendererSetText: 2,
+      });
+    });
+
+    it('should support creation-time values in text nodes', () => {
+      function Template(rf: RenderFlags, value: string) {
+        if (rf & RenderFlags.Create) {
+          text(0);
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(0, rf & RenderFlags.Create ? value : NO_CHANGE);
+        }
+      }
+      expect(renderToHtml(Template, 'once')).toEqual('once');
+      expect(renderToHtml(Template, 'twice')).toEqual('once');
+      expect(ngDevMode).toHaveProperties({
+        firstTemplatePass: 0,
+        tNode: 2,
+        tView: 1,
+        rendererSetText: 1,
+      });
+    });
+
+  });
+
+  describe('Siblings update', () => {
+    it('should handle a flat list of static/bound text nodes', () => {
+      function Template(rf: RenderFlags, name: string) {
+        if (rf & RenderFlags.Create) {
+          text(0, 'Hello ');
+          text(1);
+          text(2, '!');
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(1, bind(name));
+        }
+      }
+      expect(renderToHtml(Template, 'world')).toEqual('Hello world!');
+      expect(renderToHtml(Template, 'monde')).toEqual('Hello monde!');
+    });
+
+    it('should handle a list of static/bound text nodes as element children', () => {
+      function Template(rf: RenderFlags, name: string) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'b');
+          {
+            text(1, 'Hello ');
+            text(2);
+            text(3, '!');
+          }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(2, bind(name));
+        }
+      }
+      expect(renderToHtml(Template, 'world')).toEqual('<b>Hello world!</b>');
+      expect(renderToHtml(Template, 'mundo')).toEqual('<b>Hello mundo!</b>');
+    });
+
+    it('should render/update text node as a child of a deep list of elements', () => {
+      function Template(rf: RenderFlags, name: string) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'b');
+          {
+            elementStart(1, 'b');
+            {
+              elementStart(2, 'b');
+              {
+                elementStart(3, 'b');
+                { text(4); }
+                elementEnd();
+              }
+              elementEnd();
+            }
+            elementEnd();
+          }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(4, interpolation1('Hello ', name, '!'));
+        }
+      }
+      expect(renderToHtml(Template, 'world')).toEqual('<b><b><b><b>Hello world!</b></b></b></b>');
+      expect(renderToHtml(Template, 'mundo')).toEqual('<b><b><b><b>Hello mundo!</b></b></b></b>');
+    });
+
+    it('should update 2 sibling elements', () => {
+      function Template(rf: RenderFlags, id: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'b');
+          {
+            element(1, 'span');
+            elementStart(2, 'span', ['class', 'foo']);
+            {}
+            elementEnd();
+          }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementAttribute(2, 'id', bind(id));
+        }
+      }
+      expect(renderToHtml(Template, 'foo'))
+          .toEqual('<b><span></span><span class="foo" id="foo"></span></b>');
+      expect(renderToHtml(Template, 'bar'))
+          .toEqual('<b><span></span><span class="foo" id="bar"></span></b>');
+    });
+
+    it('should handle sibling text node after element with child text node', () => {
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'p');
+          { text(1, 'hello'); }
+          elementEnd();
+          text(2, 'world');
+        }
+      }
+
+      expect(renderToHtml(Template, null)).toEqual('<p>hello</p>world');
+    });
+  });
+
+  describe('basic components', () => {
+
+    class TodoComponent {
+      value = ' one';
+
+      static ngComponentDef = defineComponent({
+        type: TodoComponent,
+        selectors: [['todo']],
+        template: function TodoTemplate(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'p');
+            {
+              text(1, 'Todo');
+              text(2);
+            }
+            elementEnd();
+          }
+          if (rf & RenderFlags.Update) {
+            textBinding(2, bind(ctx.value));
+          }
+        },
+        factory: () => new TodoComponent
+      });
+    }
+
+    const defs = [TodoComponent];
+
+    it('should support a basic component template', () => {
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'todo');
+        }
+      }
+
+      expect(renderToHtml(Template, null, defs)).toEqual('<todo><p>Todo one</p></todo>');
+    });
+
+    it('should support a component template with sibling', () => {
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'todo');
+          text(1, 'two');
+        }
+      }
+      expect(renderToHtml(Template, null, defs)).toEqual('<todo><p>Todo one</p></todo>two');
+    });
+
+    it('should support a component template with component sibling', () => {
+      /**
+       * <todo></todo>
+       * <todo></todo>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'todo');
+          element(1, 'todo');
+        }
+      }
+      expect(renderToHtml(Template, null, defs))
+          .toEqual('<todo><p>Todo one</p></todo><todo><p>Todo one</p></todo>');
+    });
+
+    it('should support a component with binding on host element', () => {
+      let cmptInstance: TodoComponentHostBinding|null;
+
+      class TodoComponentHostBinding {
+        title = 'one';
+        static ngComponentDef = defineComponent({
+          type: TodoComponentHostBinding,
+          selectors: [['todo']],
+          template: function TodoComponentHostBindingTemplate(
+              rf: RenderFlags, ctx: TodoComponentHostBinding) {
+            if (rf & RenderFlags.Create) {
+              text(0);
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(0, bind(ctx.title));
+            }
+          },
+          factory: () => cmptInstance = new TodoComponentHostBinding,
+          hostBindings: function(directiveIndex: number, elementIndex: number): void {
+            // host bindings
+            elementProperty(
+                elementIndex, 'title',
+                bind(loadDirective<TodoComponentHostBinding>(directiveIndex).title));
+          }
+        });
+      }
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'todo');
+        }
+      }
+
+      const defs = [TodoComponentHostBinding];
+      expect(renderToHtml(Template, {}, defs)).toEqual('<todo title="one">one</todo>');
+      cmptInstance !.title = 'two';
+      expect(renderToHtml(Template, {}, defs)).toEqual('<todo title="two">two</todo>');
+    });
+
+    it('should support root component with host attribute', () => {
+      class HostAttributeComp {
+        static ngComponentDef = defineComponent({
+          type: HostAttributeComp,
+          selectors: [['host-attr-comp']],
+          factory: () => new HostAttributeComp(),
+          template: (rf: RenderFlags, ctx: HostAttributeComp) => {},
+          attributes: ['role', 'button']
+        });
+      }
+
+      const fixture = new ComponentFixture(HostAttributeComp);
+      expect(fixture.hostElement.getAttribute('role')).toEqual('button');
+    });
+
+    it('should support component with bindings in template', () => {
+      /** <p> {{ name }} </p>*/
+      class MyComp {
+        name = 'Bess';
+        static ngComponentDef = defineComponent({
+          type: MyComp,
+          selectors: [['comp']],
+          template: function MyCompTemplate(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              elementStart(0, 'p');
+              { text(1); }
+              elementEnd();
+            }
+            if (rf & RenderFlags.Update) {
+              textBinding(1, bind(ctx.name));
+            }
+          },
+          factory: () => new MyComp
+        });
+      }
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+        }
+      }
+
+      expect(renderToHtml(Template, null, [MyComp])).toEqual('<comp><p>Bess</p></comp>');
+    });
+
+    it('should support a component with sub-views', () => {
+      /**
+       * % if (condition) {
+       *   <div>text</div>
+       * % }
+       */
+      class MyComp {
+        // TODO(issue/24571): remove '!'.
+        condition !: boolean;
+        static ngComponentDef = defineComponent({
+          type: MyComp,
+          selectors: [['comp']],
+          template: function MyCompTemplate(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              container(0);
+            }
+            if (rf & RenderFlags.Update) {
+              containerRefreshStart(0);
+              {
+                if (ctx.condition) {
+                  let rf1 = embeddedViewStart(0);
+                  if (rf1 & RenderFlags.Create) {
+                    elementStart(0, 'div');
+                    { text(1, 'text'); }
+                    elementEnd();
+                  }
+                  embeddedViewEnd();
+                }
+              }
+              containerRefreshEnd();
+            }
+          },
+          factory: () => new MyComp,
+          inputs: {condition: 'condition'}
+        });
+      }
+
+      /** <comp [condition]="condition"></comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'condition', bind(ctx.condition));
+        }
+      }
+
+      const defs = [MyComp];
+      expect(renderToHtml(Template, {condition: true}, defs))
+          .toEqual('<comp><div>text</div></comp>');
+      expect(renderToHtml(Template, {condition: false}, defs)).toEqual('<comp></comp>');
+
+    });
+
+  });
+
+  describe('ng-container', () => {
+
+    it('should insert as a child of a regular element', () => {
+
+      /**
+       * <div>before|<ng-container>Greetings<span></span></ng-container>|after</div>
+       */
+      function Template() {
+        elementStart(0, 'div');
+        {
+          text(1, 'before|');
+          elementContainerStart(2);
+          {
+            text(3, 'Greetings');
+            element(4, 'span');
+          }
+          elementContainerEnd();
+          text(5, '|after');
+        }
+        elementEnd();
+      }
+
+      const fixture = new TemplateFixture(Template);
+      expect(fixture.html).toEqual('<div>before|Greetings<span></span>|after</div>');
+    });
+
+    it('should add and remove DOM nodes when ng-container is a child of a regular element', () => {
+      /**
+       * {% if (value) { %}
+       * <div>
+       *  <ng-container>content</ng-container>
+       * </div>
+       * {% } %}
+       */
+      const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags, ctx: {value: any}) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          if (ctx.value) {
+            let rf1 = embeddedViewStart(0);
+            {
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'div');
+                {
+                  elementContainerStart(1);
+                  { text(2, 'content'); }
+                  elementContainerEnd();
+                }
+                elementEnd();
+              }
+            }
+            embeddedViewEnd();
+          }
+          containerRefreshEnd();
+        }
+      });
+
+      const fixture = new ComponentFixture(TestCmpt);
+      expect(fixture.html).toEqual('');
+
+      fixture.component.value = true;
+      fixture.update();
+      expect(fixture.html).toEqual('<div>content</div>');
+
+      fixture.component.value = false;
+      fixture.update();
+      expect(fixture.html).toEqual('');
+    });
+
+    it('should add and remove DOM nodes when ng-container is a child of an embedded view (JS block)',
+       () => {
+         /**
+          * {% if (value) { %}
+          *  <ng-container>content</ng-container>
+          * {% } %}
+          */
+         const TestCmpt =
+             createComponent('test-cmpt', function(rf: RenderFlags, ctx: {value: any}) {
+               if (rf & RenderFlags.Create) {
+                 container(0);
+               }
+               if (rf & RenderFlags.Update) {
+                 containerRefreshStart(0);
+                 if (ctx.value) {
+                   let rf1 = embeddedViewStart(0);
+                   {
+                     if (rf1 & RenderFlags.Create) {
+                       elementContainerStart(0);
+                       { text(1, 'content'); }
+                       elementContainerEnd();
+                     }
+                   }
+                   embeddedViewEnd();
+                 }
+                 containerRefreshEnd();
+               }
+             });
+
+         const fixture = new ComponentFixture(TestCmpt);
+         expect(fixture.html).toEqual('');
+
+         fixture.component.value = true;
+         fixture.update();
+         expect(fixture.html).toEqual('content');
+
+         fixture.component.value = false;
+         fixture.update();
+         expect(fixture.html).toEqual('');
+       });
+
+    it('should add and remove DOM nodes when ng-container is a child of an embedded view (ViewContainerRef)',
+       () => {
+
+         function ngIfTemplate(rf: RenderFlags, ctx: any) {
+           if (rf & RenderFlags.Create) {
+             elementContainerStart(0);
+             { text(1, 'content'); }
+             elementContainerEnd();
+           }
+         }
+
+         /**
+          * <ng-container *ngIf="value">content</ng-container>
+          */
+         // equivalent to:
+         /**
+          * <ng-template [ngIf]="value">
+          *  <ng-container>
+          *    content
+          *  </ng-container>
+          * </ng-template>
+          */
+         const TestCmpt =
+             createComponent('test-cmpt', function(rf: RenderFlags, ctx: {value: any}) {
+               if (rf & RenderFlags.Create) {
+                 container(0, ngIfTemplate, null, [AttributeMarker.SelectOnly, 'ngIf']);
+               }
+               if (rf & RenderFlags.Update) {
+                 elementProperty(0, 'ngIf', bind(ctx.value));
+               }
+             }, [NgIf]);
+
+         const fixture = new ComponentFixture(TestCmpt);
+         expect(fixture.html).toEqual('');
+
+         fixture.component.value = true;
+         fixture.update();
+         expect(fixture.html).toEqual('content');
+
+         fixture.component.value = false;
+         fixture.update();
+         expect(fixture.html).toEqual('');
+       });
+
+    // https://stackblitz.com/edit/angular-tfhcz1?file=src%2Fapp%2Fapp.component.ts
+    it('should add and remove DOM nodes when ng-container is a child of a delayed embedded view',
+       () => {
+
+         class TestDirective {
+           constructor(private _tplRef: TemplateRef<any>, private _vcRef: ViewContainerRef) {}
+
+           createAndInsert() { this._vcRef.insert(this._tplRef.createEmbeddedView({})); }
+
+           clear() { this._vcRef.clear(); }
+
+           static ngDirectiveDef = defineDirective({
+             type: TestDirective,
+             selectors: [['', 'testDirective', '']],
+             factory: () => new TestDirective(injectTemplateRef(), injectViewContainerRef()),
+           });
+         }
+
+
+         function embeddedTemplate(rf: RenderFlags, ctx: any) {
+           if (rf & RenderFlags.Create) {
+             elementContainerStart(0);
+             { text(1, 'content'); }
+             elementContainerEnd();
+           }
+         }
+
+         let testDirective: TestDirective;
+
+
+         `<ng-template testDirective>
+            <ng-container>
+              content
+            </ng-container>
+          </ng-template>`;
+         const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
+           if (rf & RenderFlags.Create) {
+             container(0, embeddedTemplate, null, [AttributeMarker.SelectOnly, 'testDirective']);
+           }
+           if (rf & RenderFlags.Update) {
+             testDirective = loadDirective<TestDirective>(0);
+           }
+         }, [TestDirective]);
+
+         const fixture = new ComponentFixture(TestCmpt);
+         expect(fixture.html).toEqual('');
+
+         testDirective !.createAndInsert();
+         fixture.update();
+         expect(fixture.html).toEqual('content');
+
+         testDirective !.clear();
+         fixture.update();
+         expect(fixture.html).toEqual('');
+       });
+
+    it('should render at the component view root', () => {
+      /**
+       * <ng-container>component template</ng-container>
+       */
+      const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
+        if (rf & RenderFlags.Create) {
+          elementContainerStart(0);
+          { text(1, 'component template'); }
+          elementContainerEnd();
+        }
+      });
+
+      function App() { element(0, 'test-cmpt'); }
+
+      const fixture = new TemplateFixture(App, () => {}, [TestCmpt]);
+      expect(fixture.html).toEqual('<test-cmpt>component template</test-cmpt>');
+    });
+
+    it('should render inside another ng-container', () => {
+      /**
+       * <ng-container>
+       *   <ng-container>
+       *     <ng-container>
+       *       content
+       *     </ng-container>
+       *   </ng-container>
+       * </ng-container>
+       */
+      const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
+        if (rf & RenderFlags.Create) {
+          elementContainerStart(0);
+          {
+            elementContainerStart(1);
+            {
+              elementContainerStart(2);
+              { text(3, 'content'); }
+              elementContainerEnd();
+            }
+            elementContainerEnd();
+          }
+          elementContainerEnd();
+        }
+      });
+
+      function App() { element(0, 'test-cmpt'); }
+
+      const fixture = new TemplateFixture(App, () => {}, [TestCmpt]);
+      expect(fixture.html).toEqual('<test-cmpt>content</test-cmpt>');
+    });
+
+    it('should render inside another ng-container at the root of a delayed view', () => {
+
+      class TestDirective {
+        constructor(private _tplRef: TemplateRef<any>, private _vcRef: ViewContainerRef) {}
+
+        createAndInsert() { this._vcRef.insert(this._tplRef.createEmbeddedView({})); }
+
+        clear() { this._vcRef.clear(); }
+
+        static ngDirectiveDef = defineDirective({
+          type: TestDirective,
+          selectors: [['', 'testDirective', '']],
+          factory: () => new TestDirective(injectTemplateRef(), injectViewContainerRef()),
+        });
+      }
+
+      let testDirective: TestDirective;
+
+      function embeddedTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementContainerStart(0);
+          {
+            elementContainerStart(1);
+            {
+              elementContainerStart(2);
+              { text(3, 'content'); }
+              elementContainerEnd();
+            }
+            elementContainerEnd();
+          }
+          elementContainerEnd();
+        }
+      }
+
+      `<ng-template testDirective>
+        <ng-container>
+          <ng-container>
+            <ng-container>
+              content
+            </ng-container>
+          </ng-container>
+        </ng-container>
+      </ng-template>`;
+      const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
+        if (rf & RenderFlags.Create) {
+          container(0, embeddedTemplate, null, [AttributeMarker.SelectOnly, 'testDirective']);
+        }
+        if (rf & RenderFlags.Update) {
+          testDirective = loadDirective<TestDirective>(0);
+        }
+      }, [TestDirective]);
+
+      function App() { element(0, 'test-cmpt'); }
+
+      const fixture = new ComponentFixture(TestCmpt);
+      expect(fixture.html).toEqual('');
+
+      testDirective !.createAndInsert();
+      fixture.update();
+      expect(fixture.html).toEqual('content');
+
+      testDirective !.createAndInsert();
+      fixture.update();
+      expect(fixture.html).toEqual('contentcontent');
+
+      testDirective !.clear();
+      fixture.update();
+      expect(fixture.html).toEqual('');
+    });
+
+    it('should support directives and inject ElementRef', () => {
+
+      class Directive {
+        constructor(public elRef: ElementRef) {}
+
+        static ngDirectiveDef = defineDirective({
+          type: Directive,
+          selectors: [['', 'dir', '']],
+          factory: () => new Directive(injectElementRef()),
+        });
+      }
+
+      let directive: Directive;
+
+      /**
+       * <div><ng-container dir></ng-container></div>
+       */
+      function Template() {
+        elementStart(0, 'div');
+        {
+          elementContainerStart(1, [AttributeMarker.SelectOnly, 'dir']);
+          elementContainerEnd();
+          directive = loadDirective<Directive>(0);
+        }
+        elementEnd();
+      }
+
+      const fixture = new TemplateFixture(Template, () => {}, [Directive]);
+      expect(fixture.html).toEqual('<div></div>');
+      expect(directive !.elRef.nativeElement.nodeType).toBe(Node.COMMENT_NODE);
+    });
+
+    it('should not set any attributes', () => {
+
+      /**
+       * <div><ng-container id="foo"></ng-container></div>
+       */
+      function Template() {
+        elementStart(0, 'div');
+        {
+          elementContainerStart(1, ['id', 'foo']);
+          elementContainerEnd();
+        }
+        elementEnd();
+      }
+
+      const fixture = new TemplateFixture(Template);
+      expect(fixture.html).toEqual('<div></div>');
+    });
+
+    it('should throw when trying to add event listener', () => {
+
+      /**
+       * <div><ng-container (click)="..."></ng-container></div>
+       */
+      function Template() {
+        elementStart(0, 'div');
+        {
+          elementContainerStart(1);
+          {
+            listener('click', function() {});
+          }
+          elementContainerEnd();
+        }
+        elementEnd();
+      }
+
+      expect(() => { new TemplateFixture(Template); }).toThrow();
+    });
+
+  });
+
+  describe('tree', () => {
+    interface Tree {
+      beforeLabel?: string;
+      subTrees?: Tree[];
+      afterLabel?: string;
+    }
+
+    interface ParentCtx {
+      beforeTree: Tree;
+      projectedTree: Tree;
+      afterTree: Tree;
+    }
+
+    function showLabel(rf: RenderFlags, ctx: {label: string | undefined}) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        {
+          if (ctx.label != null) {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              text(0);
+            }
+            if (rf1 & RenderFlags.Update) {
+              textBinding(0, bind(ctx.label));
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    function showTree(rf: RenderFlags, ctx: {tree: Tree}) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+        container(1);
+        container(2);
+      }
+      containerRefreshStart(0);
+      {
+        const rf0 = embeddedViewStart(0);
+        { showLabel(rf0, {label: ctx.tree.beforeLabel}); }
+        embeddedViewEnd();
+      }
+      containerRefreshEnd();
+      containerRefreshStart(1);
+      {
+        for (let subTree of ctx.tree.subTrees || []) {
+          const rf0 = embeddedViewStart(0);
+          { showTree(rf0, {tree: subTree}); }
+          embeddedViewEnd();
+        }
+      }
+      containerRefreshEnd();
+      containerRefreshStart(2);
+      {
+        const rf0 = embeddedViewStart(0);
+        { showLabel(rf0, {label: ctx.tree.afterLabel}); }
+        embeddedViewEnd();
+      }
+      containerRefreshEnd();
+    }
+
+    class ChildComponent {
+      // TODO(issue/24571): remove '!'.
+      beforeTree !: Tree;
+      // TODO(issue/24571): remove '!'.
+      afterTree !: Tree;
+      static ngComponentDef = defineComponent({
+        selectors: [['child']],
+        type: ChildComponent,
+        template: function ChildComponentTemplate(
+            rf: RenderFlags, ctx: {beforeTree: Tree, afterTree: Tree}) {
+          if (rf & RenderFlags.Create) {
+            projectionDef();
+            container(0);
+            projection(1);
+            container(2);
+          }
+          containerRefreshStart(0);
+          {
+            const rf0 = embeddedViewStart(0);
+            { showTree(rf0, {tree: ctx.beforeTree}); }
+            embeddedViewEnd();
+          }
+          containerRefreshEnd();
+          containerRefreshStart(2);
+          {
+            const rf0 = embeddedViewStart(0);
+            { showTree(rf0, {tree: ctx.afterTree}); }
+            embeddedViewEnd();
+          }
+          containerRefreshEnd();
+        },
+        factory: () => new ChildComponent,
+        inputs: {beforeTree: 'beforeTree', afterTree: 'afterTree'}
+      });
+    }
+
+    function parentTemplate(rf: RenderFlags, ctx: ParentCtx) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'child');
+        { container(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'beforeTree', bind(ctx.beforeTree));
+        elementProperty(0, 'afterTree', bind(ctx.afterTree));
+        containerRefreshStart(1);
+        {
+          const rf0 = embeddedViewStart(0);
+          { showTree(rf0, {tree: ctx.projectedTree}); }
+          embeddedViewEnd();
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    it('should work with a tree', () => {
+
+      const ctx: ParentCtx = {
+        beforeTree: {subTrees: [{beforeLabel: 'a'}]},
+        projectedTree: {beforeLabel: 'p'},
+        afterTree: {afterLabel: 'z'}
+      };
+      const defs = [ChildComponent];
+      expect(renderToHtml(parentTemplate, ctx, defs)).toEqual('<child>apz</child>');
+      ctx.projectedTree = {subTrees: [{}, {}, {subTrees: [{}, {}]}, {}]};
+      ctx.beforeTree.subTrees !.push({afterLabel: 'b'});
+      expect(renderToHtml(parentTemplate, ctx, defs)).toEqual('<child>abz</child>');
+      ctx.projectedTree.subTrees ![1].afterLabel = 'h';
+      expect(renderToHtml(parentTemplate, ctx, defs)).toEqual('<child>abhz</child>');
+      ctx.beforeTree.subTrees !.push({beforeLabel: 'c'});
+      expect(renderToHtml(parentTemplate, ctx, defs)).toEqual('<child>abchz</child>');
+
+      // To check the context easily:
+      // console.log(JSON.stringify(ctx));
+    });
+
+  });
+
+  describe('element bindings', () => {
+
+    describe('elementAttribute', () => {
+      it('should support attribute bindings', () => {
+        const ctx: {title: string | null} = {title: 'Hello'};
+
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'span');
+          }
+          if (rf & RenderFlags.Update) {
+            elementAttribute(0, 'title', bind(ctx.title));
+          }
+        }
+
+        // initial binding
+        expect(renderToHtml(Template, ctx)).toEqual('<span title="Hello"></span>');
+
+        // update binding
+        ctx.title = 'Hi!';
+        expect(renderToHtml(Template, ctx)).toEqual('<span title="Hi!"></span>');
+
+        // remove attribute
+        ctx.title = null;
+        expect(renderToHtml(Template, ctx)).toEqual('<span></span>');
+      });
+
+      it('should stringify values used attribute bindings', () => {
+        const ctx: {title: any} = {title: NaN};
+
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'span');
+          }
+          if (rf & RenderFlags.Update) {
+            elementAttribute(0, 'title', bind(ctx.title));
+          }
+        }
+
+        expect(renderToHtml(Template, ctx)).toEqual('<span title="NaN"></span>');
+
+        ctx.title = {toString: () => 'Custom toString'};
+        expect(renderToHtml(Template, ctx)).toEqual('<span title="Custom toString"></span>');
+      });
+
+      it('should update bindings', () => {
+        function Template(rf: RenderFlags, c: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'b');
+          }
+          if (rf & RenderFlags.Update) {
+            elementAttribute(0, 'a', interpolationV(c));
+            elementAttribute(0, 'a0', bind(c[1]));
+            elementAttribute(0, 'a1', interpolation1(c[0], c[1], c[16]));
+            elementAttribute(0, 'a2', interpolation2(c[0], c[1], c[2], c[3], c[16]));
+            elementAttribute(0, 'a3', interpolation3(c[0], c[1], c[2], c[3], c[4], c[5], c[16]));
+            elementAttribute(
+                0, 'a4', interpolation4(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[16]));
+            elementAttribute(
+                0, 'a5',
+                interpolation5(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[16]));
+            elementAttribute(
+                0, 'a6', interpolation6(
+                             c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10],
+                             c[11], c[16]));
+            elementAttribute(
+                0, 'a7', interpolation7(
+                             c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10],
+                             c[11], c[12], c[13], c[16]));
+            elementAttribute(
+                0, 'a8', interpolation8(
+                             c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10],
+                             c[11], c[12], c[13], c[14], c[15], c[16]));
+          }
+        }
+        let args = ['(', 0, 'a', 1, 'b', 2, 'c', 3, 'd', 4, 'e', 5, 'f', 6, 'g', 7, ')'];
+        expect(renderToHtml(Template, args))
+            .toEqual(
+                '<b a="(0a1b2c3d4e5f6g7)" a0="0" a1="(0)" a2="(0a1)" a3="(0a1b2)" a4="(0a1b2c3)" a5="(0a1b2c3d4)" a6="(0a1b2c3d4e5)" a7="(0a1b2c3d4e5f6)" a8="(0a1b2c3d4e5f6g7)"></b>');
+        args = args.reverse();
+        expect(renderToHtml(Template, args))
+            .toEqual(
+                '<b a=")7g6f5e4d3c2b1a0(" a0="7" a1=")7(" a2=")7g6(" a3=")7g6f5(" a4=")7g6f5e4(" a5=")7g6f5e4d3(" a6=")7g6f5e4d3c2(" a7=")7g6f5e4d3c2b1(" a8=")7g6f5e4d3c2b1a0("></b>');
+        args = args.reverse();
+        expect(renderToHtml(Template, args))
+            .toEqual(
+                '<b a="(0a1b2c3d4e5f6g7)" a0="0" a1="(0)" a2="(0a1)" a3="(0a1b2)" a4="(0a1b2c3)" a5="(0a1b2c3d4)" a6="(0a1b2c3d4e5)" a7="(0a1b2c3d4e5f6)" a8="(0a1b2c3d4e5f6g7)"></b>');
+      });
+
+      it('should not update DOM if context has not changed', () => {
+        const ctx: {title: string | null} = {title: 'Hello'};
+
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'span');
+            container(1);
+            elementEnd();
+          }
+          if (rf & RenderFlags.Update) {
+            elementAttribute(0, 'title', bind(ctx.title));
+            containerRefreshStart(1);
+            {
+              if (true) {
+                let rf1 = embeddedViewStart(1);
+                {
+                  if (rf1 & RenderFlags.Create) {
+                    elementStart(0, 'b');
+                    {}
+                    elementEnd();
+                  }
+                  elementAttribute(0, 'title', bind(ctx.title));
+                }
+                embeddedViewEnd();
+              }
+            }
+            containerRefreshEnd();
+          }
+        }
+
+        // initial binding
+        expect(renderToHtml(Template, ctx))
+            .toEqual('<span title="Hello"><b title="Hello"></b></span>');
+        // update DOM manually
+        containerEl.querySelector('b') !.setAttribute('title', 'Goodbye');
+        // refresh with same binding
+        expect(renderToHtml(Template, ctx))
+            .toEqual('<span title="Hello"><b title="Goodbye"></b></span>');
+        // refresh again with same binding
+        expect(renderToHtml(Template, ctx))
+            .toEqual('<span title="Hello"><b title="Goodbye"></b></span>');
+      });
+
+      it('should support host attribute bindings', () => {
+        let hostBindingDir: HostBindingDir;
+
+        class HostBindingDir {
+          /* @HostBinding('attr.aria-label') */
+          label = 'some label';
+
+          static ngDirectiveDef = defineDirective({
+            type: HostBindingDir,
+            selectors: [['', 'hostBindingDir', '']],
+            factory: function HostBindingDir_Factory() {
+              return hostBindingDir = new HostBindingDir();
+            },
+            hostBindings: function HostBindingDir_HostBindings(dirIndex: number, elIndex: number) {
+              elementAttribute(
+                  elIndex, 'aria-label', bind(loadDirective<HostBindingDir>(dirIndex).label));
+            }
+          });
+        }
+
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'div', ['hostBindingDir', '']);
+          }
+        }
+
+        const defs = [HostBindingDir];
+        expect(renderToHtml(Template, {}, defs))
+            .toEqual(`<div aria-label="some label" hostbindingdir=""></div>`);
+
+        hostBindingDir !.label = 'other label';
+        expect(renderToHtml(Template, {}, defs))
+            .toEqual(`<div aria-label="other label" hostbindingdir=""></div>`);
+      });
+    });
+
+    describe('elementStyle', () => {
+
+      it('should support binding to styles', () => {
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'span');
+            elementStyling(null, ['border-color']);
+            elementEnd();
+          }
+          if (rf & RenderFlags.Update) {
+            elementStyleProp(0, 0, ctx);
+            elementStylingApply(0);
+          }
+        }
+
+        expect(renderToHtml(Template, 'red')).toEqual('<span style="border-color: red;"></span>');
+        expect(renderToHtml(Template, 'green'))
+            .toEqual('<span style="border-color: green;"></span>');
+        expect(renderToHtml(Template, null)).toEqual('<span></span>');
+      });
+
+      it('should support binding to styles with suffix', () => {
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'span');
+            elementStyling(null, ['font-size']);
+            elementEnd();
+          }
+          if (rf & RenderFlags.Update) {
+            elementStyleProp(0, 0, ctx, 'px');
+            elementStylingApply(0);
+          }
+        }
+
+        expect(renderToHtml(Template, '100')).toEqual('<span style="font-size: 100px;"></span>');
+        expect(renderToHtml(Template, 200)).toEqual('<span style="font-size: 200px;"></span>');
+        expect(renderToHtml(Template, null)).toEqual('<span></span>');
+      });
+    });
+
+    describe('elementClass', () => {
+
+      it('should support CSS class toggle', () => {
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'span');
+            elementStyling(['active']);
+            elementEnd();
+          }
+          if (rf & RenderFlags.Update) {
+            elementClassProp(0, 0, ctx);
+            elementStylingApply(0);
+          }
+        }
+
+        expect(renderToHtml(Template, true)).toEqual('<span class="active"></span>');
+        expect(renderToHtml(Template, false)).toEqual('<span class=""></span>');
+
+        // truthy values
+        expect(renderToHtml(Template, 'a_string')).toEqual('<span class="active"></span>');
+        expect(renderToHtml(Template, 10)).toEqual('<span class="active"></span>');
+
+        // falsy values
+        expect(renderToHtml(Template, '')).toEqual('<span class=""></span>');
+        expect(renderToHtml(Template, 0)).toEqual('<span class=""></span>');
+      });
+
+      it('should work correctly with existing static classes', () => {
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'span');
+            elementStyling(
+                ['existing', 'active', InitialStylingFlags.VALUES_MODE, 'existing', true]);
+            elementEnd();
+          }
+          if (rf & RenderFlags.Update) {
+            elementClassProp(0, 1, ctx);
+            elementStylingApply(0);
+          }
+        }
+
+        expect(renderToHtml(Template, true)).toEqual('<span class="existing active"></span>');
+        expect(renderToHtml(Template, false)).toEqual('<span class="existing"></span>');
+      });
+    });
+  });
+
+  describe('template data', () => {
+
+    it('should re-use template data and node data', () => {
+      /**
+       *  % if (condition) {
+       *    <div></div>
+       *  % }
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'div');
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      expect((Template as any).ngPrivateData).toBeUndefined();
+
+      renderToHtml(Template, {condition: true});
+
+      const oldTemplateData = (Template as any).ngPrivateData;
+      const oldContainerData = (oldTemplateData as any).data[HEADER_OFFSET];
+      const oldElementData = oldContainerData.tViews[0][HEADER_OFFSET];
+      expect(oldContainerData).not.toBeNull();
+      expect(oldElementData).not.toBeNull();
+
+      renderToHtml(Template, {condition: false});
+      renderToHtml(Template, {condition: true});
+
+      const newTemplateData = (Template as any).ngPrivateData;
+      const newContainerData = (oldTemplateData as any).data[HEADER_OFFSET];
+      const newElementData = oldContainerData.tViews[0][HEADER_OFFSET];
+      expect(newTemplateData === oldTemplateData).toBe(true);
+      expect(newContainerData === oldContainerData).toBe(true);
+      expect(newElementData === oldElementData).toBe(true);
+    });
+
+  });
+
+  describe('sanitization', () => {
+    it('should sanitize data using the provided sanitization interface', () => {
+      class SanitizationComp {
+        static ngComponentDef = defineComponent({
+          type: SanitizationComp,
+          selectors: [['sanitize-this']],
+          factory: () => new SanitizationComp(),
+          template: (rf: RenderFlags, ctx: SanitizationComp) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'a');
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(0, 'href', bind(ctx.href), sanitizeUrl);
+            }
+          }
+        });
+
+        private href = '';
+
+        updateLink(href: any) { this.href = href; }
+      }
+
+      const sanitizer = new LocalSanitizer((value) => { return 'http://bar'; });
+
+      const fixture = new ComponentFixture(SanitizationComp, {sanitizer});
+      fixture.component.updateLink('http://foo');
+      fixture.update();
+
+      const anchor = fixture.hostElement.querySelector('a') !;
+      expect(anchor.getAttribute('href')).toEqual('http://bar');
+
+      fixture.component.updateLink(sanitizer.bypassSecurityTrustUrl('http://foo'));
+      fixture.update();
+
+      expect(anchor.getAttribute('href')).toEqual('http://foo');
+    });
+  });
+});
+
+class LocalSanitizedValue {
+  constructor(public value: any) {}
+  toString() { return this.value; }
+}
+
+class LocalSanitizer implements Sanitizer {
+  constructor(private _interceptor: (value: string|null|any) => string) {}
+
+  sanitize(context: SecurityContext, value: LocalSanitizedValue|string|null): string|null {
+    if (value instanceof LocalSanitizedValue) {
+      return value.toString();
+    }
+    return this._interceptor(value);
+  }
+
+  bypassSecurityTrustHtml(value: string) {}
+  bypassSecurityTrustStyle(value: string) {}
+  bypassSecurityTrustScript(value: string) {}
+  bypassSecurityTrustResourceUrl(value: string) {}
+
+  bypassSecurityTrustUrl(value: string) { return new LocalSanitizedValue(value); }
+}
diff --git a/packages/core/test/render3/ivy/BUILD.bazel b/packages/core/test/render3/ivy/BUILD.bazel
new file mode 100644
index 000000000000..dd78fb48faba
--- /dev/null
+++ b/packages/core/test/render3/ivy/BUILD.bazel
@@ -0,0 +1,37 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "ivy_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/core",
+    ],
+)
+
+ts_library(
+    name = "ivy_node_lib",
+    testonly = 1,
+    srcs = [],
+    deps = [
+        ":ivy_lib",
+        "//packages/core/test/render3:domino",
+    ],
+)
+
+jasmine_node_test(
+    name = "ivy",
+    bootstrap = [
+        "angular/packages/core/test/render3/load_domino",
+    ],
+    tags = [
+        "ivy-jit",
+    ],
+    deps = [
+        ":ivy_node_lib",
+    ],
+)
diff --git a/packages/core/test/render3/ivy/jit_spec.ts b/packages/core/test/render3/ivy/jit_spec.ts
new file mode 100644
index 000000000000..9018299f759c
--- /dev/null
+++ b/packages/core/test/render3/ivy/jit_spec.ts
@@ -0,0 +1,282 @@
+/**
+ * @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 'reflect-metadata';
+
+import {InjectorDef, defineInjectable} from '@angular/core/src/di/defs';
+import {Injectable} from '@angular/core/src/di/injectable';
+import {inject, setCurrentInjector} from '@angular/core/src/di/injector';
+import {ivyEnabled} from '@angular/core/src/ivy_switch';
+import {Component, HostBinding, HostListener, Input, Output, Pipe} from '@angular/core/src/metadata/directives';
+import {NgModule, NgModuleDefInternal} from '@angular/core/src/metadata/ng_module';
+import {ComponentDefInternal, PipeDefInternal} from '@angular/core/src/render3/interfaces/definition';
+
+
+ivyEnabled && describe('render3 jit', () => {
+  let injector: any;
+  beforeAll(() => { injector = setCurrentInjector(null); });
+
+  afterAll(() => { setCurrentInjector(injector); });
+
+  it('compiles a component', () => {
+    @Component({
+      template: 'test',
+      selector: 'test-cmp',
+    })
+    class SomeCmp {
+    }
+    const SomeCmpAny = SomeCmp as any;
+
+    expect(SomeCmpAny.ngComponentDef).toBeDefined();
+    expect(SomeCmpAny.ngComponentDef.factory() instanceof SomeCmp).toBe(true);
+  });
+
+  it('compiles an injectable with a type provider', () => {
+    @Injectable({providedIn: 'root'})
+    class Service {
+    }
+    const ServiceAny = Service as any;
+
+    expect(ServiceAny.ngInjectableDef).toBeDefined();
+    expect(ServiceAny.ngInjectableDef.providedIn).toBe('root');
+    expect(inject(Service) instanceof Service).toBe(true);
+  });
+
+  it('compiles an injectable with a useValue provider', () => {
+    @Injectable({providedIn: 'root', useValue: 'test'})
+    class Service {
+    }
+
+    expect(inject(Service)).toBe('test');
+  });
+
+  it('compiles an injectable with a useExisting provider', () => {
+    @Injectable({providedIn: 'root', useValue: 'test'})
+    class Existing {
+    }
+
+    @Injectable({providedIn: 'root', useExisting: Existing})
+    class Service {
+    }
+
+    expect(inject(Service)).toBe('test');
+  });
+
+  it('compiles an injectable with a useFactory provider, without deps', () => {
+
+    @Injectable({providedIn: 'root', useFactory: () => 'test'})
+    class Service {
+    }
+
+    expect(inject(Service)).toBe('test');
+  });
+
+  it('compiles an injectable with a useFactory provider, with deps', () => {
+    @Injectable({providedIn: 'root', useValue: 'test'})
+    class Existing {
+    }
+
+    @Injectable({providedIn: 'root', useFactory: (existing: any) => existing, deps: [Existing]})
+    class Service {
+    }
+
+    expect(inject(Service)).toBe('test');
+  });
+
+  it('compiles an injectable with a useClass provider, with deps', () => {
+    @Injectable({providedIn: 'root', useValue: 'test'})
+    class Existing {
+    }
+
+    class Other {
+      constructor(public value: any) {}
+    }
+
+    @Injectable({providedIn: 'root', useClass: Other, deps: [Existing]})
+    class Service {
+      get value(): any { return null; }
+    }
+    const ServiceAny = Service as any;
+
+    expect(inject(Service).value).toBe('test');
+  });
+
+  it('compiles an injectable with a useClass provider, without deps', () => {
+    let _value = 1;
+    @Injectable({providedIn: 'root'})
+    class Existing {
+      readonly value = _value++;
+    }
+
+    @Injectable({providedIn: 'root', useClass: Existing})
+    class Service {
+      get value(): number { return 0; }
+    }
+
+    expect(inject(Existing).value).toBe(1);
+    const injected = inject(Service);
+    expect(injected instanceof Existing).toBe(true);
+    expect(injected.value).toBe(2);
+  });
+
+  it('compiles an injectable with an inherited constructor', () => {
+    @Injectable({providedIn: 'root'})
+    class Dep {
+    }
+
+    @Injectable()
+    class Base {
+      constructor(readonly dep: Dep) {}
+    }
+
+    @Injectable({providedIn: 'root'})
+    class Child extends Base {
+    }
+
+    expect(inject(Child).dep instanceof Dep).toBe(true);
+  });
+
+  it('compiles a module to a definition', () => {
+    @Component({
+      template: 'foo',
+      selector: 'foo',
+    })
+    class Cmp {
+    }
+
+    @NgModule({
+      declarations: [Cmp],
+    })
+    class Module {
+    }
+
+    const moduleDef: NgModuleDefInternal<Module> = (Module as any).ngModuleDef;
+    expect(moduleDef).toBeDefined();
+    expect(moduleDef.declarations.length).toBe(1);
+    expect(moduleDef.declarations[0]).toBe(Cmp);
+  });
+
+  it('compiles a module to an ngInjectorDef with the providers', () => {
+    class Token {
+      static ngInjectableDef = defineInjectable({
+        providedIn: 'root',
+        factory: () => 'default',
+      });
+    }
+
+    @NgModule({
+      providers: [{provide: Token, useValue: 'test'}],
+    })
+    class Module {
+      constructor(public token: Token) {}
+    }
+
+    const injectorDef: InjectorDef<Module> = (Module as any).ngInjectorDef;
+    const instance = injectorDef.factory();
+
+    // Since the instance was created outside of an injector using the module, the
+    // injection will use the default provider, not the provider from the module.
+    expect(instance.token).toBe('default');
+
+    expect(injectorDef.providers).toEqual([{provide: Token, useValue: 'test'}]);
+  });
+
+  it('patches a module onto the component', () => {
+    @Component({
+      template: 'foo',
+      selector: 'foo',
+    })
+    class Cmp {
+    }
+    const cmpDef: ComponentDefInternal<Cmp> = (Cmp as any).ngComponentDef;
+
+    expect(cmpDef.directiveDefs).toBeNull();
+
+    @NgModule({
+      declarations: [Cmp],
+    })
+    class Module {
+    }
+
+    const moduleDef: NgModuleDefInternal<Module> = (Module as any).ngModuleDef;
+    expect(cmpDef.directiveDefs instanceof Function).toBe(true);
+    expect((cmpDef.directiveDefs as Function)()).toEqual([cmpDef]);
+  });
+
+  it('should add hostbindings and hostlisteners', () => {
+    @Component({
+      template: 'foo',
+      selector: 'foo',
+      host: {
+        '[class.red]': 'isRed',
+        '(click)': 'onClick()',
+      },
+    })
+    class Cmp {
+      @HostBinding('class.green')
+      green: boolean = false;
+
+      @HostListener('change', ['$event'])
+      onChange(event: any): void {}
+    }
+
+    const cmpDef = (Cmp as any).ngComponentDef as ComponentDefInternal<Cmp>;
+
+    expect(cmpDef.hostBindings).toBeDefined();
+    expect(cmpDef.hostBindings !.length).toBe(2);
+  });
+
+  it('should compile @Pipes without errors', () => {
+    @Pipe({name: 'test-pipe', pure: false})
+    class P {
+    }
+
+    const pipeDef = (P as any).ngPipeDef as PipeDefInternal<P>;
+    expect(pipeDef.name).toBe('test-pipe');
+    expect(pipeDef.pure).toBe(false, 'pipe should not be pure');
+    expect(pipeDef.factory() instanceof P)
+        .toBe(true, 'factory() should create an instance of the pipe');
+  });
+
+  it('should default @Pipe to pure: true', () => {
+    @Pipe({name: 'test-pipe'})
+    class P {
+    }
+
+    const pipeDef = (P as any).ngPipeDef as PipeDefInternal<P>;
+    expect(pipeDef.pure).toBe(true, 'pipe should be pure');
+  });
+
+  it('should add ngBaseDef to types with @Input properties', () => {
+    class C {
+      @Input('alias1')
+      prop1 = 'test';
+
+      @Input('alias2')
+      prop2 = 'test';
+    }
+
+    expect((C as any).ngBaseDef).toBeDefined();
+    expect((C as any).ngBaseDef.inputs).toEqual({prop1: 'alias1', prop2: 'alias2'});
+  });
+
+  it('should add ngBaseDef to types with @Output properties', () => {
+    class C {
+      @Output('alias1')
+      prop1 = 'test';
+
+      @Output('alias2')
+      prop2 = 'test';
+    }
+
+    expect((C as any).ngBaseDef).toBeDefined();
+    expect((C as any).ngBaseDef.outputs).toEqual({prop1: 'alias1', prop2: 'alias2'});
+  });
+});
+
+it('ensure at least one spec exists', () => {});
diff --git a/packages/core/test/render3/jit/directive_spec.ts b/packages/core/test/render3/jit/directive_spec.ts
new file mode 100644
index 000000000000..85c50a613a1c
--- /dev/null
+++ b/packages/core/test/render3/jit/directive_spec.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 {extendsDirectlyFromObject} from '../../../src/render3/jit/directive';
+
+describe('extendsDirectlyFromObject', () => {
+  it('should correctly behave with instanceof', () => {
+    expect(new Child() instanceof Object).toBeTruthy();
+    expect(new Child() instanceof Parent).toBeTruthy();
+    expect(new Parent() instanceof Child).toBeFalsy();
+
+    expect(new Child5() instanceof Object).toBeTruthy();
+    expect(new Child5() instanceof Parent5).toBeTruthy();
+    expect(new Parent5() instanceof Child5).toBeFalsy();
+  });
+
+  it('should detect direct inheritance form Object', () => {
+    expect(extendsDirectlyFromObject(Parent)).toBeTruthy();
+    expect(extendsDirectlyFromObject(Child)).toBeFalsy();
+
+    expect(extendsDirectlyFromObject(Parent5)).toBeTruthy();
+    expect(extendsDirectlyFromObject(Child5)).toBeFalsy();
+  });
+});
+
+// Inheritance Example using Classes
+class Parent {}
+class Child extends Parent {}
+
+// Inheritance Example using Function
+const Parent5 = function Parent5() {} as any as{new (): {}};
+const Child5 = function Child5() {} as any as{new (): {}};
+Child5.prototype = new Parent5;
+Child5.prototype.constructor = Child5;
diff --git a/packages/core/test/render3/jit_environment_spec.ts b/packages/core/test/render3/jit_environment_spec.ts
new file mode 100644
index 000000000000..04ff0d11e9a6
--- /dev/null
+++ b/packages/core/test/render3/jit_environment_spec.ts
@@ -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
+ */
+
+import {ExternalReference} from '@angular/compiler';
+import {Identifiers} from '@angular/compiler/src/render3/r3_identifiers';
+
+import {angularCoreEnv} from '../../src/render3/jit/environment';
+
+const INTERFACE_EXCEPTIONS = new Set<string>([
+  'ɵBaseDef',
+  'ɵComponentDef',
+  'ɵDirectiveDef',
+  'ɵInjectorDef',
+  'ɵNgModuleDef',
+  'ɵPipeDef',
+]);
+
+describe('r3 jit environment', () => {
+  // This test keeps render3/jit/environment and r3_identifiers in the compiler in sync, ensuring
+  // that if the compiler writes a reference to a render3 symbol, it will be resolvable at runtime
+  // in JIT mode.
+  it('should support all r3 symbols', () => {
+    Object
+        // Map over the static properties of Identifiers.
+        .keys(Identifiers)
+        .map(key => (Identifiers as any as{[key: string]: string | ExternalReference})[key])
+        // A few such properties are string constants. Ignore them, and focus on ExternalReferences.
+        .filter(isExternalReference)
+        // Some references are to interface types. Only take properties which have runtime values.
+        .filter(sym => !INTERFACE_EXCEPTIONS.has(sym.name))
+        .forEach(sym => {
+          // Assert that angularCoreEnv has a reference to the runtime symbol.
+          expect(angularCoreEnv.hasOwnProperty(sym.name))
+              .toBe(true, `Missing symbol ${sym.name} in render3/jit/environment`);
+        });
+  });
+});
+
+function isExternalReference(sym: ExternalReference | string): sym is ExternalReference&
+    {name: string} {
+  return typeof sym === 'object' && sym.name !== null && sym.moduleName !== null;
+}
diff --git a/packages/core/test/render3/lifecycle_spec.ts b/packages/core/test/render3/lifecycle_spec.ts
new file mode 100644
index 000000000000..c13ee41b3a41
--- /dev/null
+++ b/packages/core/test/render3/lifecycle_spec.ts
@@ -0,0 +1,2486 @@
+/**
+ * @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 {OnDestroy, SimpleChanges} from '../../src/core';
+import {AttributeMarker, ComponentTemplate, LifecycleHooksFeature, NgOnChangesFeature, defineComponent, defineDirective} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, markDirty, projection, projectionDef, store, text} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+
+import {NgIf} from './common_with_def';
+import {ComponentFixture, containerEl, createComponent, renderComponent, renderToHtml, requestAnimationFrame} from './render_util';
+
+describe('lifecycles', () => {
+
+  function getParentTemplate(name: string) {
+    return (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        element(0, name);
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'val', bind(ctx.val));
+      }
+    };
+  }
+
+  describe('onInit', () => {
+    let events: string[];
+
+    beforeEach(() => { events = []; });
+
+    let Comp = createOnInitComponent('comp', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { projection(1); }
+        elementEnd();
+      }
+    });
+    let Parent = createOnInitComponent('parent', getParentTemplate('comp'), [Comp]);
+    let ProjectedComp = createOnInitComponent('projected', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        text(0, 'content');
+      }
+    });
+
+    function createOnInitComponent(
+        name: string, template: ComponentTemplate<any>, directives: any[] = []) {
+      return class Component {
+        val: string = '';
+        ngOnInit() { events.push(`${name}${this.val}`); }
+
+        static ngComponentDef = defineComponent({
+          type: Component,
+          selectors: [[name]],
+          factory: () => new Component(),
+          inputs: {val: 'val'}, template,
+          directives: directives
+        });
+      };
+    }
+
+    class Directive {
+      ngOnInit() { events.push('dir'); }
+
+      static ngDirectiveDef = defineDirective(
+          {type: Directive, selectors: [['', 'dir', '']], factory: () => new Directive()});
+    }
+
+    const directives = [Comp, Parent, ProjectedComp, Directive];
+
+    it('should call onInit method after inputs are set in creation mode (and not in update mode)',
+       () => {
+         /** <comp [val]="val"></comp> */
+         function Template(rf: RenderFlags, ctx: any) {
+           if (rf & RenderFlags.Create) {
+             element(0, 'comp');
+           }
+           if (rf & RenderFlags.Update) {
+             elementProperty(0, 'val', bind(ctx.val));
+           }
+         }
+
+         renderToHtml(Template, {val: '1'}, directives);
+         expect(events).toEqual(['comp1']);
+
+         renderToHtml(Template, {val: '2'}, directives);
+         expect(events).toEqual(['comp1']);
+       });
+
+    it('should be called on root component in creation mode', () => {
+      const comp = renderComponent(Comp, {hostFeatures: [LifecycleHooksFeature]});
+      expect(events).toEqual(['comp']);
+
+      markDirty(comp);
+      requestAnimationFrame.flush();
+      expect(events).toEqual(['comp']);
+    });
+
+    it('should call parent onInit before child onInit', () => {
+      /**
+       * <parent></parent>
+       * parent temp: <comp></comp>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['parent', 'comp']);
+    });
+
+    it('should call all parent onInits across view before calling children onInits', () => {
+      /**
+       * <parent [val]="1"></parent>
+       * <parent [val]="2"></parent>
+       *
+       * parent temp: <comp [val]="val"></comp>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+          element(1, 'parent');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(1, 'val', 2);
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['parent1', 'parent2', 'comp1', 'comp2']);
+    });
+
+
+    it('should call onInit every time a new view is created (if block)', () => {
+      /**
+       * % if (condition) {
+       *   <comp></comp>
+       * % }
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true}, directives);
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {condition: false}, directives);
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {condition: true}, directives);
+      expect(events).toEqual(['comp', 'comp']);
+    });
+
+    it('should call onInit in hosts before their content children', () => {
+      /**
+       * <comp>
+       *   <projected></projected>
+       * </comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'comp');
+          { elementStart(1, 'projected'); }
+          elementEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp', 'projected']);
+    });
+
+    it('should call onInit in host and its content children before next host', () => {
+      /**
+       * <comp [val]="1">
+       *   <projected [val]="1"></projected>
+       * </comp>
+       * <comp [val]="2">
+       *   <projected [val]="1"></projected>
+       * </comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'comp');
+          { elementStart(1, 'projected'); }
+          elementEnd();
+          elementStart(2, 'comp');
+          { elementStart(3, 'projected'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(1, 'val', 1);
+          elementProperty(2, 'val', 2);
+          elementProperty(3, 'val', 2);
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp1', 'projected1', 'comp2', 'projected2']);
+    });
+
+    it('should be called on directives after component', () => {
+      /** <comp directive></comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp', ['dir', '']);
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp', 'dir']);
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp', 'dir']);
+
+    });
+
+    it('should be called on directives on an element', () => {
+      /** <div directive></div> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['dir', '']);
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['dir']);
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['dir']);
+    });
+
+    it('should call onInit properly in for loop', () => {
+      /**
+       *  <comp [val]="1"></comp>
+       * % for (let j = 2; j < 5; j++) {
+       *   <comp [val]="j"></comp>
+       * % }
+       *  <comp [val]="5"></comp>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+          container(1);
+          element(2, 'comp');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(2, 'val', 5);
+          containerRefreshStart(1);
+          {
+            for (let j = 2; j < 5; j++) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val', j);
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+
+      // onInit is called top to bottom, so top level comps (1 and 5) are called
+      // before the comps inside the for loop's embedded view (2, 3, and 4)
+      expect(events).toEqual(['comp1', 'comp5', 'comp2', 'comp3', 'comp4']);
+    });
+
+    it('should call onInit properly in for loop with children', () => {
+      /**
+       *  <parent [val]="1"></parent>
+       * % for (let j = 2; j < 5; j++) {
+       *   <parent [val]="j"></parent>
+       * % }
+       *  <parent [val]="5"></parent>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+          container(1);
+          element(2, 'parent');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(2, 'val', 5);
+          containerRefreshStart(1);
+          {
+            for (let j = 2; j < 5; j++) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'parent');
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val', j);
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+
+      // onInit is called top to bottom, so top level comps (1 and 5) are called
+      // before the comps inside the for loop's embedded view (2, 3, and 4)
+      expect(events).toEqual([
+        'parent1', 'parent5', 'parent2', 'comp2', 'parent3', 'comp3', 'parent4', 'comp4', 'comp1',
+        'comp5'
+      ]);
+    });
+
+  });
+
+  describe('doCheck', () => {
+    let events: string[];
+    let allEvents: string[];
+
+    beforeEach(() => {
+      events = [];
+      allEvents = [];
+    });
+
+    let Comp = createDoCheckComponent('comp', (rf: RenderFlags, ctx: any) => {});
+    let Parent = createDoCheckComponent('parent', getParentTemplate('comp'), [Comp]);
+
+    function createDoCheckComponent(
+        name: string, template: ComponentTemplate<any>, directives: any[] = []) {
+      return class Component {
+        ngDoCheck() {
+          events.push(name);
+          allEvents.push('check ' + name);
+        }
+
+        ngOnInit() { allEvents.push('init ' + name); }
+
+        static ngComponentDef = defineComponent({
+          type: Component,
+          selectors: [[name]],
+          factory: () => new Component(), template,
+          directives: directives
+        });
+      };
+    }
+
+    class Directive {
+      ngDoCheck() { events.push('dir'); }
+
+      static ngDirectiveDef = defineDirective(
+          {type: Directive, selectors: [['', 'dir', '']], factory: () => new Directive()});
+    }
+
+    const directives = [Comp, Parent, Directive];
+
+    it('should call doCheck on every refresh', () => {
+      /** <comp></comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp', 'comp']);
+    });
+
+    it('should be called on root component', () => {
+      const comp = renderComponent(Comp, {hostFeatures: [LifecycleHooksFeature]});
+      expect(events).toEqual(['comp']);
+
+      markDirty(comp);
+      requestAnimationFrame.flush();
+      expect(events).toEqual(['comp', 'comp']);
+    });
+
+    it('should call parent doCheck before child doCheck', () => {
+      /**
+       * <parent></parent>
+       * parent temp: <comp></comp>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['parent', 'comp']);
+    });
+
+    it('should call ngOnInit before ngDoCheck if creation mode', () => {
+      /** <comp></comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(allEvents).toEqual(['init comp', 'check comp']);
+
+      renderToHtml(Template, {}, directives);
+      expect(allEvents).toEqual(['init comp', 'check comp', 'check comp']);
+    });
+
+    it('should be called on directives after component', () => {
+      /** <comp directive></comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp', ['dir', '']);
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp', 'dir']);
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp', 'dir', 'comp', 'dir']);
+
+    });
+
+    it('should be called on directives on an element', () => {
+      /** <div directive></div> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['dir', '']);
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['dir']);
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['dir', 'dir']);
+    });
+
+  });
+
+  describe('afterContentInit', () => {
+    let events: string[];
+    let allEvents: string[];
+
+    beforeEach(() => {
+      events = [];
+      allEvents = [];
+    });
+
+    let Comp = createAfterContentInitComp('comp', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+      }
+    });
+
+    let Parent = createAfterContentInitComp('parent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'comp');
+        { projection(1); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'val', bind(ctx.val));
+      }
+    }, [Comp]);
+
+    let ProjectedComp = createAfterContentInitComp('projected', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+      }
+    });
+
+    function createAfterContentInitComp(
+        name: string, template: ComponentTemplate<any>, directives: any[] = []) {
+      return class Component {
+        val: string = '';
+        ngAfterContentInit() {
+          events.push(`${name}${this.val}`);
+          allEvents.push(`${name}${this.val} init`);
+        }
+        ngAfterContentChecked() { allEvents.push(`${name}${this.val} check`); }
+
+        static ngComponentDef = defineComponent({
+          type: Component,
+          selectors: [[name]],
+          factory: () => new Component(),
+          inputs: {val: 'val'},
+          template: template,
+          directives: directives
+        });
+      };
+    }
+
+    class Directive {
+      ngAfterContentInit() { events.push('init'); }
+      ngAfterContentChecked() { events.push('check'); }
+
+      static ngDirectiveDef = defineDirective(
+          {type: Directive, selectors: [['', 'dir', '']], factory: () => new Directive()});
+    }
+
+    function ForLoopWithChildrenTemplate(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'parent');
+        { text(1, 'content'); }
+        elementEnd();
+        container(2);
+        elementStart(3, 'parent');
+        { text(4, 'content'); }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'val', 1);
+        elementProperty(3, 'val', 4);
+        containerRefreshStart(2);
+        {
+          for (let i = 2; i < 4; i++) {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              elementStart(0, 'parent');
+              { text(1, 'content'); }
+              elementEnd();
+            }
+            if (rf1 & RenderFlags.Update) {
+              elementProperty(0, 'val', i);
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    const directives = [Comp, Parent, ProjectedComp, Directive];
+
+    it('should be called only in creation mode', () => {
+      /** <comp>content</comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'comp');
+          { text(1, 'content'); }
+          elementEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp']);
+    });
+
+    it('should be called on root component in creation mode', () => {
+      const comp = renderComponent(Comp, {hostFeatures: [LifecycleHooksFeature]});
+      expect(events).toEqual(['comp']);
+
+      markDirty(comp);
+      requestAnimationFrame.flush();
+      expect(events).toEqual(['comp']);
+    });
+
+    it('should be called on every init (if blocks)', () => {
+      /**
+       * % if (condition) {
+       *   <comp>content</comp>
+       * % }
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'comp');
+                { text(1, 'content'); }
+                elementEnd();
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true}, directives);
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {condition: false}, directives);
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {condition: true}, directives);
+      expect(events).toEqual(['comp', 'comp']);
+    });
+
+    it('should be called in parents before children', () => {
+      /**
+       * <parent>content</parent>
+       *
+       * parent template: <comp><ng-content></ng-content></comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'parent');
+          { text(1, 'content'); }
+          elementEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['parent', 'comp']);
+    });
+
+    it('should be called breadth-first in entire parent subtree before any children', () => {
+      /**
+       * <parent [val]="1">content</parent>
+       * <parent [val]="2">content</parent>
+       *
+       * parent template: <comp [val]="val"><ng-content></ng-content></comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'parent');
+          { text(1, 'content'); }
+          elementEnd();
+          elementStart(2, 'parent');
+          { text(3, 'content'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(2, 'val', 2);
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['parent1', 'parent2', 'comp1', 'comp2']);
+    });
+
+    it('should be called in projected components before their hosts', () => {
+      /**
+       * <parent>
+       *   <projected>content</projected>
+       * </parent>
+       *
+       * parent template:
+       * <comp><ng-content></ng-content></comp>
+       *
+       * projected comp: <ng-content></ng-content>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'parent');
+          {
+            elementStart(1, 'projected');
+            { text(2, 'content'); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['projected', 'parent', 'comp']);
+    });
+
+    it('should be called in projected components and hosts before children', () => {
+      /**
+       * <parent [val]="1">
+       *   <projected [val]="1">content</projected>
+       * </parent>
+       * * <parent [val]="2">
+       *   <projected [val]="2">content</projected>
+       * </parent>
+       *
+       * parent template:
+       * <comp [val]="val"><ng-content></ng-content></comp>
+       *
+       * projected comp: <ng-content></ng-content>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'parent');
+          {
+            elementStart(1, 'projected');
+            { text(2, 'content'); }
+            elementEnd();
+          }
+          elementEnd();
+          elementStart(3, 'parent');
+          {
+            elementStart(4, 'projected');
+            { text(5, 'content'); }
+            elementEnd();
+          }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(1, 'val', 1);
+          elementProperty(3, 'val', 2);
+          elementProperty(4, 'val', 2);
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['projected1', 'parent1', 'projected2', 'parent2', 'comp1', 'comp2']);
+    });
+
+    it('should be called in correct order in a for loop', () => {
+      /**
+       * <comp [val]="1">content</comp>
+       * % for(let i = 2; i < 4; i++) {
+       *   <comp [val]="i">content</comp>
+       * % }
+       * <comp [val]="4">content</comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'comp');
+          { text(1, 'content'); }
+          elementEnd();
+          container(2);
+          elementStart(3, 'comp');
+          { text(4, 'content'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(3, 'val', 4);
+          containerRefreshStart(2);
+          {
+            for (let i = 2; i < 4; i++) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'comp');
+                { text(1, 'content'); }
+                elementEnd();
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val', i);
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, directives);
+      expect(events).toEqual(['comp2', 'comp3', 'comp1', 'comp4']);
+    });
+
+    it('should be called in correct order in a for loop with children', () => {
+      /**
+       * <parent [val]="1">content</parent>
+       * % for(let i = 2; i < 4; i++) {
+       *   <parent [val]="i">content</parent>
+       * % }
+       * <parent [val]="4">content</parent>
+       */
+
+      renderToHtml(ForLoopWithChildrenTemplate, {}, directives);
+      expect(events).toEqual(
+          ['parent2', 'comp2', 'parent3', 'comp3', 'parent1', 'parent4', 'comp1', 'comp4']);
+    });
+
+    describe('ngAfterContentChecked', () => {
+
+      it('should be called every change detection run after afterContentInit', () => {
+        /** <comp>content</comp> */
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'comp');
+            { text(1, 'content'); }
+            elementEnd();
+          }
+        }
+
+        renderToHtml(Template, {}, directives);
+        expect(allEvents).toEqual(['comp init', 'comp check']);
+
+        renderToHtml(Template, {}, directives);
+        expect(allEvents).toEqual(['comp init', 'comp check', 'comp check']);
+
+      });
+
+      it('should be called on root component', () => {
+        const comp = renderComponent(Comp, {hostFeatures: [LifecycleHooksFeature]});
+        expect(allEvents).toEqual(['comp init', 'comp check']);
+
+        markDirty(comp);
+        requestAnimationFrame.flush();
+        expect(allEvents).toEqual(['comp init', 'comp check', 'comp check']);
+      });
+
+    });
+
+    describe('directives', () => {
+      it('should be called on directives after component', () => {
+        /** <comp directive></comp> */
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'comp', ['dir', '']);
+          }
+        }
+
+        renderToHtml(Template, {}, directives);
+        expect(events).toEqual(['comp', 'init', 'check']);
+      });
+
+      it('should be called on directives on an element', () => {
+        /** <div directive></div> */
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'div', ['dir', '']);
+          }
+        }
+
+        renderToHtml(Template, {}, directives);
+        expect(events).toEqual(['init', 'check']);
+      });
+    });
+  });
+
+  describe('afterViewInit', () => {
+    let events: string[];
+    let allEvents: string[];
+
+    beforeEach(() => {
+      events = [];
+      allEvents = [];
+    });
+
+    let Comp = createAfterViewInitComponent('comp', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { projection(1); }
+        elementEnd();
+      }
+    });
+    let Parent = createAfterViewInitComponent('parent', getParentTemplate('comp'), [Comp]);
+
+    let ProjectedComp = createAfterViewInitComponent('projected', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        text(0, 'content');
+      }
+    });
+
+    function createAfterViewInitComponent(
+        name: string, template: ComponentTemplate<any>, directives: any[] = []) {
+      return class Component {
+        val: string = '';
+        ngAfterViewInit() {
+          events.push(`${name}${this.val}`);
+          allEvents.push(`${name}${this.val} init`);
+        }
+        ngAfterViewChecked() { allEvents.push(`${name}${this.val} check`); }
+
+        static ngComponentDef = defineComponent({
+          type: Component,
+          selectors: [[name]],
+          factory: () => new Component(),
+          inputs: {val: 'val'},
+          template: template,
+          directives: directives
+        });
+      };
+    }
+
+    class Directive {
+      ngAfterViewInit() { events.push('init'); }
+      ngAfterViewChecked() { events.push('check'); }
+
+      static ngDirectiveDef = defineDirective(
+          {type: Directive, selectors: [['', 'dir', '']], factory: () => new Directive()});
+    }
+
+    const defs = [Comp, Parent, ProjectedComp, Directive];
+
+    it('should be called on init and not in update mode', () => {
+      /** <comp></comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual(['comp']);
+    });
+
+    it('should be called on root component in creation mode', () => {
+      const comp = renderComponent(Comp, {hostFeatures: [LifecycleHooksFeature]});
+      expect(events).toEqual(['comp']);
+
+      markDirty(comp);
+      requestAnimationFrame.flush();
+      expect(events).toEqual(['comp']);
+    });
+
+    it('should be called every time a view is initialized (if block)', () => {
+      /*
+      * % if (condition) {
+      *   <comp></comp>
+      * % }
+      */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true}, defs);
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {condition: true}, defs);
+      expect(events).toEqual(['comp', 'comp']);
+
+    });
+
+    it('should be called in children before parents', () => {
+      /**
+       * <parent></parent>
+       *
+       * parent temp: <comp></comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual(['comp', 'parent']);
+
+    });
+
+    it('should be called for entire subtree before being called in any parent view comps', () => {
+      /**
+       * <parent [val]="1"></parent>
+       * <parent [val]="2"></parent>
+       *
+       *  parent temp: <comp [val]="val"></comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+          element(1, 'parent');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(1, 'val', 2);
+        }
+      }
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual(['comp1', 'comp2', 'parent1', 'parent2']);
+
+    });
+
+    it('should be called in projected components before their hosts', () => {
+      /**
+       * <comp>
+       *   <projected></projected>
+       * </comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'comp');
+          { element(1, 'projected'); }
+          elementEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual(['projected', 'comp']);
+    });
+
+    it('should call afterViewInit in content children and host before next host', () => {
+      /**
+       * <comp [val]="1">
+       *   <projected [val]="1"></projected>
+       * </comp>
+       * <comp [val]="2">
+       *   <projected [val]="2"></projected>
+       * </comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'comp');
+          { element(1, 'projected'); }
+          elementEnd();
+          elementStart(2, 'comp');
+          { element(3, 'projected'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(1, 'val', 1);
+          elementProperty(2, 'val', 2);
+          elementProperty(3, 'val', 2);
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual(['projected1', 'comp1', 'projected2', 'comp2']);
+    });
+
+    it('should call afterViewInit in content children and hosts before parents', () => {
+      /*
+       * <comp [val]="val">
+       *   <projected [val]="val"></projected>
+       * </comp>
+       */
+      const ParentComp = createAfterViewInitComponent('parent', (rf: RenderFlags, ctx: any) => {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'comp');
+          { element(1, 'projected'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', bind(ctx.val));
+          elementProperty(1, 'val', bind(ctx.val));
+        }
+      }, [Comp, ProjectedComp]);
+
+      /**
+       * <parent [val]="1"></parent>
+       * <parent [val]="2"></parent>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+          element(1, 'parent');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(1, 'val', 2);
+        }
+      }
+
+      renderToHtml(Template, {}, [ParentComp]);
+      expect(events).toEqual(['projected1', 'comp1', 'projected2', 'comp2', 'parent1', 'parent2']);
+    });
+
+    it('should be called in correct order with for loops', () => {
+      /**
+       * <comp [val]="1"></comp>
+       * % for (let i = 0; i < 4; i++) {
+       *  <comp [val]="i"></comp>
+       * % }
+       * <comp [val]="4"></comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+          container(1);
+          element(2, 'comp');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(2, 'val', 4);
+          containerRefreshStart(1);
+          {
+            for (let i = 2; i < 4; i++) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val', i);
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual(['comp2', 'comp3', 'comp1', 'comp4']);
+
+    });
+
+    it('should be called in correct order with for loops with children', () => {
+      /**
+       * <parent [val]="1"></parent>
+       * % for(let i = 0; i < 4; i++) {
+       *  <parent [val]="i"></parent>
+       * % }
+       * <parent [val]="4"></parent>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+          container(1);
+          element(2, 'parent');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(2, 'val', 4);
+          containerRefreshStart(1);
+          {
+            for (let i = 2; i < 4; i++) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'parent');
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val', i);
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual(
+          ['comp2', 'parent2', 'comp3', 'parent3', 'comp1', 'comp4', 'parent1', 'parent4']);
+
+    });
+
+    describe('ngAfterViewChecked', () => {
+
+      it('should call ngAfterViewChecked every update', () => {
+        /** <comp></comp> */
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'comp');
+          }
+        }
+
+        renderToHtml(Template, {}, defs);
+        expect(allEvents).toEqual(['comp init', 'comp check']);
+
+        renderToHtml(Template, {}, defs);
+        expect(allEvents).toEqual(['comp init', 'comp check', 'comp check']);
+      });
+
+      it('should be called on root component', () => {
+        const comp = renderComponent(Comp, {hostFeatures: [LifecycleHooksFeature]});
+        expect(allEvents).toEqual(['comp init', 'comp check']);
+
+        markDirty(comp);
+        requestAnimationFrame.flush();
+        expect(allEvents).toEqual(['comp init', 'comp check', 'comp check']);
+      });
+
+      it('should call ngAfterViewChecked with bindings', () => {
+        /** <comp [val]="myVal"></comp> */
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'comp');
+          }
+          if (rf & RenderFlags.Update) {
+            elementProperty(0, 'val', bind(ctx.myVal));
+          }
+        }
+
+        renderToHtml(Template, {myVal: 5}, defs);
+        expect(allEvents).toEqual(['comp5 init', 'comp5 check']);
+
+        renderToHtml(Template, {myVal: 6}, defs);
+        expect(allEvents).toEqual(['comp5 init', 'comp5 check', 'comp6 check']);
+      });
+
+      it('should be called in correct order with for loops with children', () => {
+        /**
+         * <parent [val]="1"></parent>
+         * % for(let i = 0; i < 4; i++) {
+       *  <parent [val]="i"></parent>
+       * % }
+         * <parent [val]="4"></parent>
+         */
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'parent');
+            container(1);
+            element(2, 'parent');
+          }
+          if (rf & RenderFlags.Update) {
+            elementProperty(0, 'val', 1);
+            elementProperty(2, 'val', 4);
+            containerRefreshStart(1);
+            {
+              for (let i = 2; i < 4; i++) {
+                let rf1 = embeddedViewStart(0);
+                if (rf1 & RenderFlags.Create) {
+                  element(0, 'parent');
+                }
+                if (rf1 & RenderFlags.Update) {
+                  elementProperty(0, 'val', i);
+                }
+                embeddedViewEnd();
+              }
+            }
+            containerRefreshEnd();
+          }
+        }
+
+        renderToHtml(Template, {}, defs);
+        expect(allEvents).toEqual([
+          'comp2 init', 'comp2 check', 'parent2 init', 'parent2 check', 'comp3 init', 'comp3 check',
+          'parent3 init', 'parent3 check', 'comp1 init', 'comp1 check', 'comp4 init', 'comp4 check',
+          'parent1 init', 'parent1 check', 'parent4 init', 'parent4 check'
+        ]);
+
+      });
+
+    });
+
+    describe('directives', () => {
+      it('should be called on directives after component', () => {
+        /** <comp directive></comp> */
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'comp', ['dir', '']);
+          }
+        }
+
+        renderToHtml(Template, {}, defs);
+        expect(events).toEqual(['comp', 'init', 'check']);
+      });
+
+      it('should be called on directives on an element', () => {
+        /** <div directive></div> */
+        function Template(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'div', ['dir', '']);
+          }
+        }
+
+        renderToHtml(Template, {}, defs);
+        expect(events).toEqual(['init', 'check']);
+      });
+    });
+  });
+
+  describe('onDestroy', () => {
+    let events: string[];
+
+    beforeEach(() => { events = []; });
+
+    let Comp = createOnDestroyComponent('comp', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        projection(0);
+      }
+    });
+    let Parent = createOnDestroyComponent('parent', getParentTemplate('comp'), [Comp]);
+
+    function createOnDestroyComponent(
+        name: string, template: ComponentTemplate<any>, directives: any[] = []) {
+      return class Component {
+        val: string = '';
+        ngOnDestroy() { events.push(`${name}${this.val}`); }
+
+        static ngComponentDef = defineComponent({
+          type: Component,
+          selectors: [[name]],
+          factory: () => new Component(),
+          inputs: {val: 'val'},
+          template: template,
+          directives: directives
+        });
+      };
+    }
+
+    let Grandparent = createOnDestroyComponent('grandparent', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'parent');
+      }
+    }, [Parent]);
+
+    const ProjectedComp = createOnDestroyComponent('projected', (rf: RenderFlags, ctx: any) => {});
+
+    class Directive {
+      ngOnDestroy() { events.push('dir'); }
+
+      static ngDirectiveDef = defineDirective(
+          {type: Directive, selectors: [['', 'dir', '']], factory: () => new Directive()});
+    }
+
+    const defs = [Comp, Parent, Grandparent, ProjectedComp, Directive];
+
+    it('should call destroy when view is removed', () => {
+      /**
+       * % if (condition) {
+       *   <comp></comp>
+       * % }
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true}, defs);
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp']);
+    });
+
+    it('should call destroy when multiple views are removed', () => {
+      /**
+       * % if (condition) {
+       *   <comp [val]="1"></comp>
+       *   <comp [val]="2"></comp>
+       * % }
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+                element(1, 'comp');
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val', bind('1'));
+                elementProperty(1, 'val', bind('2'));
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true}, defs);
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp1', 'comp2']);
+    });
+
+    it('should be called in child components before parent components', () => {
+      /**
+       * % if (condition) {
+       *   <parent></parent>
+       * % }
+       *
+       * parent template: <comp></comp>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'parent');
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true}, defs);
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp', 'parent']);
+    });
+
+    it('should be called bottom up with children nested 2 levels deep', () => {
+      /**
+       * % if (condition) {
+       *   <grandparent></grandparent>
+       * % }
+       *
+       * grandparent template: <parent></parent>
+       * parent template: <comp></comp>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'grandparent');
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true}, defs);
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp', 'parent', 'grandparent']);
+    });
+
+    it('should be called in projected components before their hosts', () => {
+      /**
+       * % if (showing) {
+       *   <comp [val]="1">
+       *     <projected [val]="1"></projected>
+       *   </comp>
+       *   <comp [val]="2">
+       *     <projected [val]="2"></projected>
+       *   </comp>
+       * }
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.showing) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'comp');
+                { element(1, 'projected'); }
+                elementEnd();
+                elementStart(2, 'comp');
+                { element(3, 'projected'); }
+                elementEnd();
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val', 1);
+                elementProperty(1, 'val', 1);
+                elementProperty(2, 'val', 2);
+                elementProperty(3, 'val', 2);
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {showing: true}, defs);
+      renderToHtml(Template, {showing: false}, defs);
+
+      expect(events).toEqual(['projected1', 'comp1', 'projected2', 'comp2']);
+    });
+
+
+    it('should be called in consistent order if views are removed and re-added', () => {
+      /**
+       * % if (condition) {
+       *   <comp [val]="1"></comp>
+       *   % if (condition2) {
+       *     <comp [val]="2"></comp>
+       *   % }
+       *   <comp [val]="3"></comp>
+       * % }
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+                container(1);
+                element(2, 'comp');
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val', bind('1'));
+                elementProperty(2, 'val', bind('3'));
+                containerRefreshStart(1);
+                {
+                  if (ctx.condition2) {
+                    let rf2 = embeddedViewStart(0);
+                    if (rf2 & RenderFlags.Create) {
+                      element(0, 'comp');
+                    }
+                    if (rf2 & RenderFlags.Update) {
+                      elementProperty(0, 'val', bind('2'));
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true, condition2: true}, defs);
+      renderToHtml(Template, {condition: false}, defs);
+
+      /**
+       * Current angular will process in this same order (root is the top-level removed view):
+       *
+       * root.child (comp1 view) onDestroy: null
+       * root.child.next (container) -> embeddedView
+       * embeddedView.child (comp2 view) onDestroy: null
+       * embeddedView onDestroy: [comp2]
+       * root.child.next.next (comp3 view) onDestroy: null
+       * root onDestroy: [comp1, comp3]
+       */
+      expect(events).toEqual(['comp2', 'comp1', 'comp3']);
+
+      events = [];
+      renderToHtml(Template, {condition: true, condition2: false}, defs);
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp1', 'comp3']);
+
+      events = [];
+      renderToHtml(Template, {condition: true, condition2: true}, defs);
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp2', 'comp1', 'comp3']);
+    });
+
+    it('should be called in every iteration of a destroyed for loop', () => {
+      /**
+       * % if (condition) {
+       *   <comp [val]="1"></comp>
+       *   % for (let i = 2; i < len; i++) {
+       *       <comp [val]="i"></comp>
+       *   % }
+       *   <comp [val]="5"></comp>
+       * % }
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+                container(1);
+                element(2, 'comp');
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val', bind('1'));
+                elementProperty(2, 'val', bind('5'));
+                containerRefreshStart(1);
+                {
+                  for (let j = 2; j < ctx.len; j++) {
+                    let rf2 = embeddedViewStart(0);
+                    if (rf2 & RenderFlags.Create) {
+                      element(0, 'comp');
+                    }
+                    if (rf2 & RenderFlags.Update) {
+                      elementProperty(0, 'val', bind(j));
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      /**
+       * Current angular will process in this same order (root is the top-level removed view):
+       *
+       * root.child (comp1 view) onDestroy: null
+       * root.child.next (container) -> embeddedView (children[0].data)
+       * embeddedView.child (comp2 view) onDestroy: null
+       * embeddedView onDestroy: [comp2]
+       * embeddedView.next.child (comp3 view) onDestroy: null
+       * embeddedView.next onDestroy: [comp3]
+       * embeddedView.next.next.child (comp4 view) onDestroy: null
+       * embeddedView.next.next onDestroy: [comp4]
+       * embeddedView.next.next -> container -> root
+       * root onDestroy: [comp1, comp5]
+       */
+      renderToHtml(Template, {condition: true, len: 5}, defs);
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp2', 'comp3', 'comp4', 'comp1', 'comp5']);
+
+      events = [];
+      renderToHtml(Template, {condition: true, len: 4}, defs);
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp2', 'comp3', 'comp1', 'comp5']);
+
+      events = [];
+      renderToHtml(Template, {condition: true, len: 5}, defs);
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp2', 'comp3', 'comp4', 'comp1', 'comp5']);
+    });
+
+    it('should call destroy properly if view also has listeners', () => {
+      /**
+       * % if (condition) {
+       *   <button (click)="onClick()">Click me</button>
+       *   <comp></comp>
+       *   <button (click)="onClick()">Click me</button>
+       * % }
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'button');
+                {
+                  listener('click', ctx.onClick.bind(ctx));
+                  text(1, 'Click me');
+                }
+                elementEnd();
+                element(2, 'comp');
+                elementStart(3, 'button');
+                {
+                  listener('click', ctx.onClick.bind(ctx));
+                  text(4, 'Click me');
+                }
+                elementEnd();
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      class App {
+        counter = 0;
+        condition = true;
+        onClick() { this.counter++; }
+      }
+
+      const ctx: {counter: number} = new App();
+      renderToHtml(Template, ctx, defs);
+
+      const buttons = containerEl.querySelectorAll('button') !;
+      buttons[0].click();
+      expect(ctx.counter).toEqual(1);
+      buttons[1].click();
+      expect(ctx.counter).toEqual(2);
+
+      renderToHtml(Template, {condition: false}, defs);
+
+      buttons[0].click();
+      buttons[1].click();
+      expect(events).toEqual(['comp']);
+      expect(ctx.counter).toEqual(2);
+    });
+
+    it('should be called on directives after component', () => {
+      /**
+       * % if (condition) {
+       *   <comp></comp>
+       * % }
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp', ['dir', '']);
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true}, defs);
+      expect(events).toEqual([]);
+
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp', 'dir']);
+
+    });
+
+    it('should be called on directives on an element', () => {
+      /**
+       * % if (condition) {
+       *   <div directive></div>
+       * % }
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'div', ['dir', '']);
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true}, defs);
+      expect(events).toEqual([]);
+
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['dir']);
+    });
+
+  });
+
+  describe('onChanges', () => {
+    let events: string[];
+
+    beforeEach(() => { events = []; });
+
+    const Comp = createOnChangesComponent('comp', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        projectionDef();
+        elementStart(0, 'div');
+        { projection(1); }
+        elementEnd();
+      }
+    });
+    const Parent = createOnChangesComponent('parent', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        element(0, 'comp');
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'val1', bind(ctx.a));
+        elementProperty(0, 'publicName', bind(ctx.b));
+      }
+    }, [Comp]);
+    const ProjectedComp = createOnChangesComponent('projected', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        text(0, 'content');
+      }
+    });
+
+
+    function createOnChangesComponent(
+        name: string, template: ComponentTemplate<any>, directives: any[] = []) {
+      return class Component {
+        // @Input() val1: string;
+        // @Input('publicName') val2: string;
+        a: string = 'wasVal1BeforeMinification';
+        b: string = 'wasVal2BeforeMinification';
+        ngOnChanges(simpleChanges: SimpleChanges) {
+          events.push(
+              `comp=${name} val1=${this.a} val2=${this.b} - changed=[${Object.getOwnPropertyNames(simpleChanges).join(',')}]`);
+        }
+
+        static ngComponentDef = defineComponent({
+          type: Component,
+          selectors: [[name]],
+          factory: () => new Component(),
+          features: [NgOnChangesFeature],
+          inputs: {a: 'val1', b: ['publicName', 'val2']}, template,
+          directives: directives
+        });
+      };
+    }
+
+    class Directive {
+      // @Input() val1: string;
+      // @Input('publicName') val2: string;
+      a: string = 'wasVal1BeforeMinification';
+      b: string = 'wasVal2BeforeMinification';
+      ngOnChanges(simpleChanges: SimpleChanges) {
+        events.push(
+            `dir - val1=${this.a} val2=${this.b} - changed=[${Object.getOwnPropertyNames(simpleChanges).join(',')}]`);
+      }
+
+      static ngDirectiveDef = defineDirective({
+        type: Directive,
+        selectors: [['', 'dir', '']],
+        factory: () => new Directive(),
+        features: [NgOnChangesFeature],
+        inputs: {a: 'val1', b: ['publicName', 'val2']}
+      });
+    }
+
+    const defs = [Comp, Parent, Directive, ProjectedComp];
+
+    it('should call onChanges method after inputs are set in creation and update mode', () => {
+      /** <comp [val1]="val1" [publicName]="val2"></comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val1', bind(ctx.val1));
+          elementProperty(0, 'publicName', bind(ctx.val2));
+        }
+      }
+
+      renderToHtml(Template, {val1: '1', val2: 'a'}, defs);
+      expect(events).toEqual(['comp=comp val1=1 val2=a - changed=[val1,val2]']);
+
+      events.length = 0;
+
+      renderToHtml(Template, {val1: '2', val2: 'b'}, defs);
+      expect(events).toEqual(['comp=comp val1=2 val2=b - changed=[val1,val2]']);
+    });
+
+    it('should call parent onChanges before child onChanges', () => {
+      /**
+       * <parent></parent>
+       * parent temp: <comp></comp>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val1', bind(ctx.val1));
+          elementProperty(0, 'publicName', bind(ctx.val2));
+        }
+      }
+
+      renderToHtml(Template, {val1: '1', val2: 'a'}, defs);
+      expect(events).toEqual([
+        'comp=parent val1=1 val2=a - changed=[val1,val2]',
+        'comp=comp val1=1 val2=a - changed=[val1,val2]'
+      ]);
+    });
+
+    it('should call all parent onChanges across view before calling children onChanges', () => {
+      /**
+       * <parent [val]="1"></parent>
+       * <parent [val]="2"></parent>
+       *
+       * parent temp: <comp [val]="val"></comp>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+          element(1, 'parent');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val1', bind(1));
+          elementProperty(0, 'publicName', bind(1));
+          elementProperty(1, 'val1', bind(2));
+          elementProperty(1, 'publicName', bind(2));
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'comp=parent val1=1 val2=1 - changed=[val1,val2]',
+        'comp=parent val1=2 val2=2 - changed=[val1,val2]',
+        'comp=comp val1=1 val2=1 - changed=[val1,val2]',
+        'comp=comp val1=2 val2=2 - changed=[val1,val2]'
+      ]);
+    });
+
+
+    it('should call onChanges every time a new view is created (if block)', () => {
+      /**
+       * % if (condition) {
+       *   <comp></comp>
+       * % }
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val1', bind(1));
+                elementProperty(0, 'publicName', bind(1));
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {condition: true}, defs);
+      expect(events).toEqual(['comp=comp val1=1 val2=1 - changed=[val1,val2]']);
+
+      renderToHtml(Template, {condition: false}, defs);
+      expect(events).toEqual(['comp=comp val1=1 val2=1 - changed=[val1,val2]']);
+
+      renderToHtml(Template, {condition: true}, defs);
+      expect(events).toEqual([
+        'comp=comp val1=1 val2=1 - changed=[val1,val2]',
+        'comp=comp val1=1 val2=1 - changed=[val1,val2]'
+      ]);
+    });
+
+    it('should call onChanges in hosts before their content children', () => {
+      /**
+       * <comp>
+       *   <projected></projected>
+       * </comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'comp');
+          { elementStart(1, 'projected'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val1', bind(1));
+          elementProperty(0, 'publicName', bind(1));
+          elementProperty(1, 'val1', bind(2));
+          elementProperty(1, 'publicName', bind(2));
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'comp=comp val1=1 val2=1 - changed=[val1,val2]',
+        'comp=projected val1=2 val2=2 - changed=[val1,val2]'
+      ]);
+    });
+
+    it('should call onChanges in host and its content children before next host', () => {
+      /**
+       * <comp [val]="1">
+       *   <projected [val]="1"></projected>
+       * </comp>
+       * <comp [val]="2">
+       *   <projected [val]="1"></projected>
+       * </comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'comp');
+          { elementStart(1, 'projected'); }
+          elementEnd();
+          elementStart(2, 'comp');
+          { elementStart(3, 'projected'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val1', bind(1));
+          elementProperty(0, 'publicName', bind(1));
+          elementProperty(1, 'val1', bind(2));
+          elementProperty(1, 'publicName', bind(2));
+          elementProperty(2, 'val1', bind(3));
+          elementProperty(2, 'publicName', bind(3));
+          elementProperty(3, 'val1', bind(4));
+          elementProperty(3, 'publicName', bind(4));
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'comp=comp val1=1 val2=1 - changed=[val1,val2]',
+        'comp=projected val1=2 val2=2 - changed=[val1,val2]',
+        'comp=comp val1=3 val2=3 - changed=[val1,val2]',
+        'comp=projected val1=4 val2=4 - changed=[val1,val2]'
+      ]);
+    });
+
+    it('should be called on directives after component', () => {
+      /** <comp directive></comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp', ['dir', '']);
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val1', bind(1));
+          elementProperty(0, 'publicName', bind(1));
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'comp=comp val1=1 val2=1 - changed=[val1,val2]', 'dir - val1=1 val2=1 - changed=[val1,val2]'
+      ]);
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'comp=comp val1=1 val2=1 - changed=[val1,val2]', 'dir - val1=1 val2=1 - changed=[val1,val2]'
+      ]);
+
+    });
+
+    it('should be called on directives on an element', () => {
+      /** <div directive></div> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['dir', '']);
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val1', bind(1));
+          elementProperty(0, 'publicName', bind(1));
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual(['dir - val1=1 val2=1 - changed=[val1,val2]']);
+
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual(['dir - val1=1 val2=1 - changed=[val1,val2]']);
+    });
+
+    it('should call onChanges properly in for loop', () => {
+      /**
+       *  <comp [val]="1"></comp>
+       * % for (let j = 2; j < 5; j++) {
+       *   <comp [val]="j"></comp>
+       * % }
+       *  <comp [val]="5"></comp>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+          container(1);
+          element(2, 'comp');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val1', bind(1));
+          elementProperty(0, 'publicName', bind(1));
+          elementProperty(2, 'val1', bind(5));
+          elementProperty(2, 'publicName', bind(5));
+          containerRefreshStart(1);
+          {
+            for (let j = 2; j < 5; j++) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val1', bind(j));
+                elementProperty(0, 'publicName', bind(j));
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+
+      // onChanges is called top to bottom, so top level comps (1 and 5) are called
+      // before the comps inside the for loop's embedded view (2, 3, and 4)
+      expect(events).toEqual([
+        'comp=comp val1=1 val2=1 - changed=[val1,val2]',
+        'comp=comp val1=5 val2=5 - changed=[val1,val2]',
+        'comp=comp val1=2 val2=2 - changed=[val1,val2]',
+        'comp=comp val1=3 val2=3 - changed=[val1,val2]',
+        'comp=comp val1=4 val2=4 - changed=[val1,val2]'
+      ]);
+    });
+
+    it('should call onChanges properly in for loop with children', () => {
+      /**
+       *  <parent [val]="1"></parent>
+       * % for (let j = 2; j < 5; j++) {
+       *   <parent [val]="j"></parent>
+       * % }
+       *  <parent [val]="5"></parent>
+       */
+
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+          container(1);
+          element(2, 'parent');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val1', bind(1));
+          elementProperty(0, 'publicName', bind(1));
+          elementProperty(2, 'val1', bind(5));
+          elementProperty(2, 'publicName', bind(5));
+          containerRefreshStart(1);
+          {
+            for (let j = 2; j < 5; j++) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'parent');
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'val1', bind(j));
+                elementProperty(0, 'publicName', bind(j));
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      renderToHtml(Template, {}, defs);
+
+      // onChanges is called top to bottom, so top level comps (1 and 5) are called
+      // before the comps inside the for loop's embedded view (2, 3, and 4)
+      expect(events).toEqual([
+        'comp=parent val1=1 val2=1 - changed=[val1,val2]',
+        'comp=parent val1=5 val2=5 - changed=[val1,val2]',
+        'comp=parent val1=2 val2=2 - changed=[val1,val2]',
+        'comp=comp val1=2 val2=2 - changed=[val1,val2]',
+        'comp=parent val1=3 val2=3 - changed=[val1,val2]',
+        'comp=comp val1=3 val2=3 - changed=[val1,val2]',
+        'comp=parent val1=4 val2=4 - changed=[val1,val2]',
+        'comp=comp val1=4 val2=4 - changed=[val1,val2]',
+        'comp=comp val1=1 val2=1 - changed=[val1,val2]',
+        'comp=comp val1=5 val2=5 - changed=[val1,val2]'
+      ]);
+    });
+
+  });
+
+  describe('hook order', () => {
+    let events: string[];
+
+    beforeEach(() => { events = []; });
+
+    function createAllHooksComponent(
+        name: string, template: ComponentTemplate<any>, directives: any[] = []) {
+      return class Component {
+        val: string = '';
+
+        ngOnChanges() { events.push(`changes ${name}${this.val}`); }
+
+        ngOnInit() { events.push(`init ${name}${this.val}`); }
+        ngDoCheck() { events.push(`check ${name}${this.val}`); }
+
+        ngAfterContentInit() { events.push(`contentInit ${name}${this.val}`); }
+        ngAfterContentChecked() { events.push(`contentCheck ${name}${this.val}`); }
+
+        ngAfterViewInit() { events.push(`viewInit ${name}${this.val}`); }
+        ngAfterViewChecked() { events.push(`viewCheck ${name}${this.val}`); }
+
+        static ngComponentDef = defineComponent({
+          type: Component,
+          selectors: [[name]],
+          factory: () => new Component(),
+          inputs: {val: 'val'}, template,
+          features: [NgOnChangesFeature],
+          directives: directives
+        });
+      };
+    }
+
+    it('should call all hooks in correct order', () => {
+      const Comp = createAllHooksComponent('comp', (rf: RenderFlags, ctx: any) => {});
+
+
+      /**
+       * <comp [val]="1"></comp>
+       * <comp [val]="2"></comp>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+          element(1, 'comp');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(1, 'val', 2);
+        }
+      }
+
+      const defs = [Comp];
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'changes comp1', 'init comp1', 'check comp1', 'changes comp2', 'init comp2', 'check comp2',
+        'contentInit comp1', 'contentCheck comp1', 'contentInit comp2', 'contentCheck comp2',
+        'viewInit comp1', 'viewCheck comp1', 'viewInit comp2', 'viewCheck comp2'
+      ]);
+
+      events = [];
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'changes comp1', 'check comp1', 'changes comp2', 'check comp2', 'contentCheck comp1',
+        'contentCheck comp2', 'viewCheck comp1', 'viewCheck comp2'
+      ]);
+    });
+
+    it('should call all hooks in correct order with children', () => {
+      const Comp = createAllHooksComponent('comp', (rf: RenderFlags, ctx: any) => {});
+
+      /** <comp [val]="val"></comp> */
+      const Parent = createAllHooksComponent('parent', (rf: RenderFlags, ctx: any) => {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', bind(ctx.val));
+        }
+      }, [Comp]);
+
+      /**
+       * <parent [val]="1"></parent>
+       * <parent [val]="2"></parent>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'parent');
+          element(1, 'parent');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', 1);
+          elementProperty(1, 'val', 2);
+        }
+      }
+
+      const defs = [Parent];
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'changes parent1',      'init parent1',         'check parent1',
+        'changes parent2',      'init parent2',         'check parent2',
+        'contentInit parent1',  'contentCheck parent1', 'contentInit parent2',
+        'contentCheck parent2', 'changes comp1',        'init comp1',
+        'check comp1',          'contentInit comp1',    'contentCheck comp1',
+        'viewInit comp1',       'viewCheck comp1',      'changes comp2',
+        'init comp2',           'check comp2',          'contentInit comp2',
+        'contentCheck comp2',   'viewInit comp2',       'viewCheck comp2',
+        'viewInit parent1',     'viewCheck parent1',    'viewInit parent2',
+        'viewCheck parent2'
+      ]);
+
+      events = [];
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'changes parent1', 'check parent1', 'changes parent2', 'check parent2',
+        'contentCheck parent1', 'contentCheck parent2', 'check comp1', 'contentCheck comp1',
+        'viewCheck comp1', 'check comp2', 'contentCheck comp2', 'viewCheck comp2',
+        'viewCheck parent1', 'viewCheck parent2'
+      ]);
+
+    });
+
+    // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-ng
+    it('should call all hooks in correct order with view and content', () => {
+      const Content = createAllHooksComponent('content', (rf: RenderFlags, ctx: any) => {});
+
+      const View = createAllHooksComponent('view', (rf: RenderFlags, ctx: any) => {});
+
+      /** <ng-content></ng-content><view [val]="val"></view> */
+      const Parent = createAllHooksComponent('parent', (rf: RenderFlags, ctx: any) => {
+        if (rf & RenderFlags.Create) {
+          projectionDef();
+          projection(0);
+          element(1, 'view');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(1, 'val', bind(ctx.val));
+        }
+      }, [View]);
+
+      /**
+       * <parent [val]="1">
+       *   <content [val]="1"></content>
+       * </parent>
+       * <parent [val]="2">
+       *   <content [val]="2"></content>
+       * </parent>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'parent');
+          { element(1, 'content'); }
+          elementEnd();
+          elementStart(2, 'parent');
+          { element(3, 'content'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'val', bind(1));
+          elementProperty(1, 'val', bind(1));
+          elementProperty(2, 'val', bind(2));
+          elementProperty(3, 'val', bind(2));
+        }
+      }
+
+      const defs = [Parent, Content];
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'changes parent1',      'init parent1',
+        'check parent1',        'changes content1',
+        'init content1',        'check content1',
+        'changes parent2',      'init parent2',
+        'check parent2',        'changes content2',
+        'init content2',        'check content2',
+        'contentInit content1', 'contentCheck content1',
+        'contentInit parent1',  'contentCheck parent1',
+        'contentInit content2', 'contentCheck content2',
+        'contentInit parent2',  'contentCheck parent2',
+        'changes view1',        'init view1',
+        'check view1',          'contentInit view1',
+        'contentCheck view1',   'viewInit view1',
+        'viewCheck view1',      'changes view2',
+        'init view2',           'check view2',
+        'contentInit view2',    'contentCheck view2',
+        'viewInit view2',       'viewCheck view2',
+        'viewInit content1',    'viewCheck content1',
+        'viewInit parent1',     'viewCheck parent1',
+        'viewInit content2',    'viewCheck content2',
+        'viewInit parent2',     'viewCheck parent2'
+      ]);
+
+      events = [];
+      renderToHtml(Template, {}, defs);
+      expect(events).toEqual([
+        'check parent1', 'check content1', 'check parent2', 'check content2',
+        'contentCheck content1', 'contentCheck parent1', 'contentCheck content2',
+        'contentCheck parent2', 'check view1', 'contentCheck view1', 'viewCheck view1',
+        'check view2', 'contentCheck view2', 'viewCheck view2', 'viewCheck content1',
+        'viewCheck parent1', 'viewCheck content2', 'viewCheck parent2'
+      ]);
+
+    });
+
+  });
+
+  describe('non-regression', () => {
+
+    it('should call lifecycle hooks for directives active on <ng-template>', () => {
+      let destroyed = false;
+
+      class OnDestroyDirective implements OnDestroy {
+        ngOnDestroy() { destroyed = true; }
+
+        static ngDirectiveDef = defineDirective({
+          type: OnDestroyDirective,
+          selectors: [['', 'onDestroyDirective', '']],
+          factory: () => new OnDestroyDirective()
+        });
+      }
+
+
+      function conditionTpl(rf: RenderFlags, ctx: Cmpt) {
+        if (rf & RenderFlags.Create) {
+          container(0, cmptTpl, null, [AttributeMarker.SelectOnly, 'onDestroyDirective']);
+        }
+      }
+
+      /**
+       * <ng-template [ngIf]="condition">
+       *  <ng-template onDestroyDirective></ng-template>
+       * </ng-template>
+       */
+      function cmptTpl(rf: RenderFlags, cmpt: Cmpt) {
+        if (rf & RenderFlags.Create) {
+          container(0, conditionTpl, null, [AttributeMarker.SelectOnly, 'ngIf']);
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'ngIf', bind(cmpt.showing));
+        }
+      }
+
+      class Cmpt {
+        showing = true;
+        static ngComponentDef = defineComponent({
+          type: Cmpt,
+          factory: () => new Cmpt(),
+          selectors: [['cmpt']],
+          template: cmptTpl,
+          directives: [NgIf, OnDestroyDirective]
+        });
+      }
+
+      const fixture = new ComponentFixture(Cmpt);
+      expect(destroyed).toBeFalsy();
+
+      fixture.component.showing = false;
+      fixture.update();
+      expect(destroyed).toBeTruthy();
+    });
+  });
+
+});
diff --git a/packages/core/test/render3/listeners_spec.ts b/packages/core/test/render3/listeners_spec.ts
new file mode 100644
index 000000000000..08c96c7de9e7
--- /dev/null
+++ b/packages/core/test/render3/listeners_spec.ts
@@ -0,0 +1,651 @@
+/**
+ * @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 {defineComponent, defineDirective} from '../../src/render3/index';
+import {container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, listener, text} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+
+import {getRendererFactory2} from './imported_renderer2';
+import {ComponentFixture, containerEl, renderComponent, renderToHtml} from './render_util';
+
+
+describe('event listeners', () => {
+  let comps: MyComp[] = [];
+
+  class MyComp {
+    showing = true;
+    counter = 0;
+
+    onClick() { this.counter++; }
+
+    static ngComponentDef = defineComponent({
+      type: MyComp,
+      selectors: [['comp']],
+      /** <button (click)="onClick()"> Click me </button> */
+      template: function CompTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'button');
+          {
+            listener('click', function() { return ctx.onClick(); });
+            text(1, 'Click me');
+          }
+          elementEnd();
+        }
+      },
+      factory: () => {
+        let comp = new MyComp();
+        comps.push(comp);
+        return comp;
+      }
+    });
+  }
+
+  class PreventDefaultComp {
+    handlerReturnValue: any = true;
+    // TODO(issue/24571): remove '!'.
+    event !: Event;
+
+    onClick(e: any) {
+      this.event = e;
+
+      // stub preventDefault() to check whether it's called
+      Object.defineProperty(
+          this.event, 'preventDefault',
+          {value: jasmine.createSpy('preventDefault'), writable: true});
+
+      return this.handlerReturnValue;
+    }
+
+    static ngComponentDef = defineComponent({
+      type: PreventDefaultComp,
+      selectors: [['prevent-default-comp']],
+      factory: () => new PreventDefaultComp(),
+      /** <button (click)="onClick($event)">Click</button> */
+      template: (rf: RenderFlags, ctx: PreventDefaultComp) => {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'button');
+          {
+            listener('click', function($event: any) { return ctx.onClick($event); });
+            text(1, 'Click');
+          }
+          elementEnd();
+        }
+      }
+    });
+  }
+
+  beforeEach(() => { comps = []; });
+
+  it('should call function on event emit', () => {
+    const comp = renderComponent(MyComp);
+    const button = containerEl.querySelector('button') !;
+    button.click();
+    expect(comp.counter).toEqual(1);
+
+    button.click();
+    expect(comp.counter).toEqual(2);
+  });
+
+  it('should retain event handler return values using document', () => {
+    const preventDefaultComp = renderComponent(PreventDefaultComp);
+    const button = containerEl.querySelector('button') !;
+
+    button.click();
+    expect(preventDefaultComp.event !.preventDefault).not.toHaveBeenCalled();
+
+    preventDefaultComp.handlerReturnValue = undefined;
+    button.click();
+    expect(preventDefaultComp.event !.preventDefault).not.toHaveBeenCalled();
+
+    preventDefaultComp.handlerReturnValue = false;
+    button.click();
+    expect(preventDefaultComp.event !.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should retain event handler return values with renderer2', () => {
+    const preventDefaultComp =
+        renderComponent(PreventDefaultComp, {rendererFactory: getRendererFactory2(document)});
+    const button = containerEl.querySelector('button') !;
+
+    button.click();
+    expect(preventDefaultComp.event !.preventDefault).not.toHaveBeenCalled();
+
+    preventDefaultComp.handlerReturnValue = undefined;
+    button.click();
+    expect(preventDefaultComp.event !.preventDefault).not.toHaveBeenCalled();
+
+    preventDefaultComp.handlerReturnValue = false;
+    button.click();
+    expect(preventDefaultComp.event !.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should call function chain on event emit', () => {
+    /** <button (click)="onClick(); onClick2(); "> Click me </button> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'button');
+        {
+          listener('click', function() {
+            ctx.onClick();
+            return ctx.onClick2();
+          });
+          text(1, 'Click me');
+        }
+        elementEnd();
+      }
+    }
+
+    const ctx = {
+      counter: 0,
+      counter2: 0,
+      onClick: function() { this.counter++; },
+      onClick2: function() { this.counter2++; }
+    };
+    renderToHtml(Template, ctx);
+    const button = containerEl.querySelector('button') !;
+
+    button.click();
+    expect(ctx.counter).toBe(1);
+    expect(ctx.counter2).toBe(1);
+
+    button.click();
+    expect(ctx.counter).toBe(2);
+    expect(ctx.counter2).toBe(2);
+  });
+
+  it('should evaluate expression on event emit', () => {
+
+    /** <button (click)="showing=!showing"> Click me </button> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'button');
+        {
+          listener('click', function() { return ctx.showing = !ctx.showing; });
+          text(1, 'Click me');
+        }
+        elementEnd();
+      }
+    }
+
+    const ctx = {showing: false};
+    renderToHtml(Template, ctx);
+    const button = containerEl.querySelector('button') !;
+
+    button.click();
+    expect(ctx.showing).toBe(true);
+
+    button.click();
+    expect(ctx.showing).toBe(false);
+  });
+
+  it('should support listeners in views', () => {
+
+    /**
+     * % if (ctx.showing) {
+       *  <button (click)="onClick()"> Click me </button>
+       * % }
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        {
+          if (ctx.showing) {
+            if (embeddedViewStart(1)) {
+              elementStart(0, 'button');
+              {
+                listener('click', function() { return ctx.onClick(); });
+                text(1, 'Click me');
+              }
+              elementEnd();
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    let comp = new MyComp();
+    renderToHtml(Template, comp);
+    const button = containerEl.querySelector('button') !;
+
+    button.click();
+    expect(comp.counter).toEqual(1);
+
+    button.click();
+    expect(comp.counter).toEqual(2);
+
+    // the listener should be removed when the view is removed
+    comp.showing = false;
+    renderToHtml(Template, comp);
+    button.click();
+    expect(comp.counter).toEqual(2);
+  });
+
+  it('should destroy listeners in views with renderer2', () => {
+
+    /**
+       * % if (ctx.showing) {
+       *  <button (click)="onClick()"> Click me </button>
+       * % }
+     */
+    class AppComp {
+      counter = 0;
+      showing = true;
+
+      onClick() { this.counter++; }
+
+      static ngComponentDef = defineComponent({
+        type: AppComp,
+        selectors: [['app-comp']],
+        factory: () => new AppComp(),
+        template: function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            container(0);
+          }
+          if (rf & RenderFlags.Update) {
+            containerRefreshStart(0);
+            {
+              if (ctx.showing) {
+                if (embeddedViewStart(0)) {
+                  elementStart(0, 'button');
+                  {
+                    listener('click', function() { return ctx.onClick(); });
+                    text(1, 'Click me');
+                  }
+                  elementEnd();
+                }
+                embeddedViewEnd();
+              }
+            }
+            containerRefreshEnd();
+          }
+        }
+      });
+    }
+
+    const fixture = new ComponentFixture(AppComp, {rendererFactory: getRendererFactory2(document)});
+    const comp = fixture.component;
+    const button = fixture.hostElement.querySelector('button') !;
+
+    button.click();
+    expect(comp.counter).toEqual(1);
+
+    button.click();
+    expect(comp.counter).toEqual(2);
+
+    // the listener should be removed when the view is removed
+    comp.showing = false;
+    fixture.update();
+    button.click();
+    expect(comp.counter).toEqual(2);
+  });
+
+  it('should destroy listeners in for loops', () => {
+
+    /**
+       * % for (let i = 0; i < ctx.buttons; i++) {
+       *  <button (click)="onClick(i)"> Click me </button>
+       * % }
+     */
+    class AppComp {
+      buttons = 2;
+      counters = [0, 0];
+
+      onClick(index: number) { this.counters[index]++; }
+
+      static ngComponentDef = defineComponent({
+        type: AppComp,
+        selectors: [['app-comp']],
+        factory: () => new AppComp(),
+        template: function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            container(0);
+          }
+          if (rf & RenderFlags.Update) {
+            containerRefreshStart(0);
+            {
+              for (let i = 0; i < ctx.buttons; i++) {
+                if (embeddedViewStart(0)) {
+                  elementStart(0, 'button');
+                  {
+                    listener('click', function() { return ctx.onClick(i); });
+                    text(1, 'Click me');
+                  }
+                  elementEnd();
+                }
+                embeddedViewEnd();
+              }
+            }
+            containerRefreshEnd();
+          }
+        }
+      });
+    }
+
+    const fixture = new ComponentFixture(AppComp);
+    const comp = fixture.component;
+    const buttons = fixture.hostElement.querySelectorAll('button') !;
+
+    buttons[0].click();
+    expect(comp.counters).toEqual([1, 0]);
+
+    buttons[1].click();
+    expect(comp.counters).toEqual([1, 1]);
+
+    // the listener should be removed when the view is removed
+    comp.buttons = 0;
+    fixture.update();
+
+    buttons[0].click();
+    buttons[1].click();
+    expect(comp.counters).toEqual([1, 1]);
+  });
+
+  it('should destroy listeners in for loops with renderer2', () => {
+
+    /**
+       * % for (let i = 0; i < ctx.buttons; i++) {
+       *  <button (click)="onClick(i)"> Click me </button>
+       * % }
+     */
+    class AppComp {
+      buttons = 2;
+      counters = [0, 0];
+
+      onClick(index: number) { this.counters[index]++; }
+
+      static ngComponentDef = defineComponent({
+        type: AppComp,
+        selectors: [['app-comp']],
+        factory: () => new AppComp(),
+        template: function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            container(0);
+          }
+          if (rf & RenderFlags.Update) {
+            containerRefreshStart(0);
+            {
+              for (let i = 0; i < ctx.buttons; i++) {
+                if (embeddedViewStart(1)) {
+                  elementStart(0, 'button');
+                  {
+                    listener('click', function() { return ctx.onClick(i); });
+                    text(1, 'Click me');
+                  }
+                  elementEnd();
+                }
+                embeddedViewEnd();
+              }
+            }
+            containerRefreshEnd();
+          }
+        }
+      });
+    }
+
+    const fixture = new ComponentFixture(AppComp, {rendererFactory: getRendererFactory2(document)});
+    const comp = fixture.component;
+    const buttons = fixture.hostElement.querySelectorAll('button') !;
+
+    buttons[0].click();
+    expect(comp.counters).toEqual([1, 0]);
+
+    buttons[1].click();
+    expect(comp.counters).toEqual([1, 1]);
+
+    // the listener should be removed when the view is removed
+    comp.buttons = 0;
+    fixture.update();
+
+    buttons[0].click();
+    buttons[1].click();
+    expect(comp.counters).toEqual([1, 1]);
+  });
+
+  it('should support host listeners', () => {
+    let events: string[] = [];
+
+    class HostListenerDir {
+      /* @HostListener('click') */
+      onClick() { events.push('click!'); }
+
+      static ngDirectiveDef = defineDirective({
+        type: HostListenerDir,
+        selectors: [['', 'hostListenerDir', '']],
+        factory: function HostListenerDir_Factory() {
+          const $dir$ = new HostListenerDir();
+          listener('click', function() { return $dir$.onClick(); });
+          return $dir$;
+        },
+      });
+    }
+
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'button', ['hostListenerDir', '']);
+        text(1, 'Click');
+        elementEnd();
+      }
+    }
+
+    renderToHtml(Template, {}, [HostListenerDir]);
+    const button = containerEl.querySelector('button') !;
+    button.click();
+    expect(events).toEqual(['click!']);
+
+    button.click();
+    expect(events).toEqual(['click!', 'click!']);
+  });
+
+  it('should destroy listeners in nested views', () => {
+
+    /**
+       * % if (showing) {
+       *    Hello
+       *    % if (button) {
+       *      <button (click)="onClick()"> Click </button>
+       *    % }
+       * % }
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        {
+          if (ctx.showing) {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              text(0, 'Hello');
+              container(1);
+            }
+            if (rf1 & RenderFlags.Update) {
+              containerRefreshStart(1);
+              {
+                if (ctx.button) {
+                  let rf1 = embeddedViewStart(0);
+                  if (rf1 & RenderFlags.Create) {
+                    elementStart(0, 'button');
+                    {
+                      listener('click', function() { return ctx.onClick(); });
+                      text(1, 'Click');
+                    }
+                    elementEnd();
+                  }
+                  embeddedViewEnd();
+                }
+              }
+              containerRefreshEnd();
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    const comp = {showing: true, counter: 0, button: true, onClick: function() { this.counter++; }};
+    renderToHtml(Template, comp);
+    const button = containerEl.querySelector('button') !;
+
+    button.click();
+    expect(comp.counter).toEqual(1);
+
+    // the child view listener should be removed when the parent view is removed
+    comp.showing = false;
+    renderToHtml(Template, comp);
+    button.click();
+    expect(comp.counter).toEqual(1);
+  });
+
+  it('should destroy listeners in component views', () => {
+
+    /**
+       * % if (showing) {
+       *    Hello
+       *    <comp></comp>
+       *    <comp></comp>
+       * % }
+     *
+     * comp:
+     * <button (click)="onClick()"> Click </button>
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        {
+          if (ctx.showing) {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              text(0, 'Hello');
+              element(1, 'comp');
+              element(2, 'comp');
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    const ctx = {showing: true};
+    renderToHtml(Template, ctx, [MyComp]);
+    const buttons = containerEl.querySelectorAll('button') !;
+
+    buttons[0].click();
+    expect(comps[0] !.counter).toEqual(1);
+
+    buttons[1].click();
+    expect(comps[1] !.counter).toEqual(1);
+
+    // the child view listener should be removed when the parent view is removed
+    ctx.showing = false;
+    renderToHtml(Template, ctx, [MyComp]);
+    buttons[0].click();
+    buttons[1].click();
+    expect(comps[0] !.counter).toEqual(1);
+    expect(comps[1] !.counter).toEqual(1);
+  });
+
+  it('should support listeners with sibling nested containers', () => {
+    /**
+     * % if (condition) {
+     *   Hello
+     *   % if (sub1) {
+     *     <button (click)="counter1++">there</button>
+     *   % }
+     *
+     *   % if (sub2) {
+     *    <button (click)="counter2++">world</button>
+     *   % }
+     * % }
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        {
+          if (ctx.condition) {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              text(0, 'Hello');
+              container(1);
+              container(2);
+            }
+            if (rf1 & RenderFlags.Update) {
+              containerRefreshStart(1);
+              {
+                if (ctx.sub1) {
+                  let rf1 = embeddedViewStart(0);
+                  if (rf1 & RenderFlags.Create) {
+                    elementStart(0, 'button');
+                    {
+                      listener('click', function() { return ctx.counter1++; });
+                      text(1, 'Click');
+                    }
+                    elementEnd();
+                  }
+                  embeddedViewEnd();
+                }
+              }
+              containerRefreshEnd();
+              containerRefreshStart(2);
+              {
+                if (ctx.sub2) {
+                  let rf1 = embeddedViewStart(0);
+                  if (rf1 & RenderFlags.Create) {
+                    elementStart(0, 'button');
+                    {
+                      listener('click', function() { return ctx.counter2++; });
+                      text(1, 'Click');
+                    }
+                    elementEnd();
+                  }
+                  embeddedViewEnd();
+                }
+              }
+              containerRefreshEnd();
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    const ctx = {condition: true, counter1: 0, counter2: 0, sub1: true, sub2: true};
+    renderToHtml(Template, ctx);
+    const buttons = containerEl.querySelectorAll('button') !;
+
+    buttons[0].click();
+    expect(ctx.counter1).toEqual(1);
+
+    buttons[1].click();
+    expect(ctx.counter2).toEqual(1);
+
+    // the child view listeners should be removed when the parent view is removed
+    ctx.condition = false;
+    renderToHtml(Template, ctx);
+    buttons[0].click();
+    buttons[1].click();
+    expect(ctx.counter1).toEqual(1);
+    expect(ctx.counter2).toEqual(1);
+
+  });
+
+});
diff --git a/packages/core/test/render3/load_domino.ts b/packages/core/test/render3/load_domino.ts
new file mode 100644
index 000000000000..d8aeb80d3e93
--- /dev/null
+++ b/packages/core/test/render3/load_domino.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
+ */
+
+// Needed to run animation tests
+require('zone.js/dist/zone-node.js');
+
+import {DominoAdapter} from '@angular/platform-server/src/domino_adapter';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
+if (typeof window == 'undefined') {
+  const domino = require('domino');
+
+  DominoAdapter.makeCurrent();
+  (global as any).document = getDOM().getDefaultDocument();
+
+  // Trick to avoid Event patching from
+  // https://github.com/angular/angular/blob/7cf5e95ac9f0f2648beebf0d5bd9056b79946970/packages/platform-browser/src/dom/events/dom_events.ts#L112-L132
+  // It fails with Domino with TypeError: Cannot assign to read only property
+  // 'stopImmediatePropagation' of object '#<Event>'
+  (global as any).Event = null;
+
+  // For animation tests, see
+  // https://github.com/angular/angular/blob/master/packages/animations/browser/src/render/shared.ts#L140
+  (global as any).Element = domino.impl.Element;
+  (global as any).isBrowser = false;
+  (global as any).isNode = true;
+}
diff --git a/packages/core/test/render3/ng_on_changes_feature_spec.ts b/packages/core/test/render3/ng_on_changes_feature_spec.ts
new file mode 100644
index 000000000000..6ec86072c65f
--- /dev/null
+++ b/packages/core/test/render3/ng_on_changes_feature_spec.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 {DoCheck, EventEmitter, Input, OnChanges, Output, SimpleChange, SimpleChanges} from '../../src/core';
+import {InheritDefinitionFeature} from '../../src/render3/features/inherit_definition_feature';
+import {DirectiveDefInternal, NgOnChangesFeature, defineComponent, defineDirective} from '../../src/render3/index';
+
+describe('NgOnChangesFeature', () => {
+  it('should patch class', () => {
+    class MyDirective implements OnChanges, DoCheck {
+      public log: Array<string|SimpleChange> = [];
+      public valA: string = 'initValue';
+      public set valB(value: string) { this.log.push(value); }
+
+      public get valB() { return 'works'; }
+
+      ngDoCheck(): void { this.log.push('ngDoCheck'); }
+      ngOnChanges(changes: SimpleChanges): void {
+        this.log.push('ngOnChanges');
+        this.log.push('valA', changes['valA']);
+        this.log.push('valB', changes['valB']);
+      }
+
+      static ngDirectiveDef = defineDirective({
+        type: MyDirective,
+        selectors: [['', 'myDir', '']],
+        factory: () => new MyDirective(),
+        features: [NgOnChangesFeature],
+        inputs: {valA: 'valA', valB: 'valB'}
+      });
+    }
+
+    const myDir =
+        (MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).factory() as MyDirective;
+    myDir.valA = 'first';
+    expect(myDir.valA).toEqual('first');
+    myDir.valB = 'second';
+    expect(myDir.log).toEqual(['second']);
+    expect(myDir.valB).toEqual('works');
+    myDir.log.length = 0;
+    (MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
+    const changeA = new SimpleChange(undefined, 'first', true);
+    const changeB = new SimpleChange(undefined, 'second', true);
+    expect(myDir.log).toEqual(['ngOnChanges', 'valA', changeA, 'valB', changeB, 'ngDoCheck']);
+  });
+
+  it('should inherit the behavior from super class', () => {
+    const log: any[] = [];
+
+    class SuperDirective implements OnChanges, DoCheck {
+      valA = 'initValue';
+
+      set valB(value: string) { log.push(value); }
+
+      get valB() { return 'works'; }
+
+      ngDoCheck(): void { log.push('ngDoCheck'); }
+      ngOnChanges(changes: SimpleChanges): void {
+        log.push('ngOnChanges');
+        log.push('valA', changes['valA']);
+        log.push('valB', changes['valB']);
+        log.push('valC', changes['valC']);
+      }
+
+      static ngDirectiveDef = defineDirective({
+        type: SuperDirective,
+        selectors: [['', 'superDir', '']],
+        factory: () => new SuperDirective(),
+        features: [NgOnChangesFeature],
+        inputs: {valA: 'valA', valB: 'valB'},
+      });
+    }
+
+    class SubDirective extends SuperDirective {
+      valC = 'initValue';
+
+      static ngDirectiveDef = defineDirective({
+        type: SubDirective,
+        selectors: [['', 'subDir', '']],
+        factory: () => new SubDirective(),
+        features: [InheritDefinitionFeature],
+        inputs: {valC: 'valC'},
+      });
+    }
+
+    const myDir = (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>)
+                      .factory() as SubDirective;
+    myDir.valA = 'first';
+    expect(myDir.valA).toEqual('first');
+
+    myDir.valB = 'second';
+    expect(myDir.valB).toEqual('works');
+
+    myDir.valC = 'third';
+    expect(myDir.valC).toEqual('third');
+
+    log.length = 0;
+    (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>).doCheck !.call(myDir);
+    const changeA = new SimpleChange(undefined, 'first', true);
+    const changeB = new SimpleChange(undefined, 'second', true);
+    const changeC = new SimpleChange(undefined, 'third', true);
+
+    expect(log).toEqual(
+        ['ngOnChanges', 'valA', changeA, 'valB', changeB, 'valC', changeC, 'ngDoCheck']);
+  });
+
+  it('should not run the parent doCheck if it is not called explicitly on super class', () => {
+    const log: any[] = [];
+
+    class SuperDirective implements OnChanges, DoCheck {
+      valA = 'initValue';
+
+      ngDoCheck(): void { log.push('ERROR: Child overrides it without super call'); }
+      ngOnChanges(changes: SimpleChanges): void { log.push(changes.valA, changes.valB); }
+
+      static ngDirectiveDef = defineDirective({
+        type: SuperDirective,
+        selectors: [['', 'superDir', '']],
+        factory: () => new SuperDirective(),
+        features: [NgOnChangesFeature],
+        inputs: {valA: 'valA'},
+      });
+    }
+
+    class SubDirective extends SuperDirective implements DoCheck {
+      valB = 'initValue';
+
+      ngDoCheck(): void { log.push('sub ngDoCheck'); }
+
+      static ngDirectiveDef = defineDirective({
+        type: SubDirective,
+        selectors: [['', 'subDir', '']],
+        factory: () => new SubDirective(),
+        features: [InheritDefinitionFeature],
+        inputs: {valB: 'valB'},
+      });
+    }
+
+    const myDir = (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>)
+                      .factory() as SubDirective;
+    myDir.valA = 'first';
+    myDir.valB = 'second';
+
+    (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>).doCheck !.call(myDir);
+    const changeA = new SimpleChange(undefined, 'first', true);
+    const changeB = new SimpleChange(undefined, 'second', true);
+    expect(log).toEqual([changeA, changeB, 'sub ngDoCheck']);
+  });
+
+  it('should run the parent doCheck if it is inherited from super class', () => {
+    const log: any[] = [];
+
+    class SuperDirective implements OnChanges, DoCheck {
+      valA = 'initValue';
+
+      ngDoCheck(): void { log.push('super ngDoCheck'); }
+      ngOnChanges(changes: SimpleChanges): void { log.push(changes.valA, changes.valB); }
+
+      static ngDirectiveDef = defineDirective({
+        type: SuperDirective,
+        selectors: [['', 'superDir', '']],
+        factory: () => new SuperDirective(),
+        features: [NgOnChangesFeature],
+        inputs: {valA: 'valA'},
+      });
+    }
+
+    class SubDirective extends SuperDirective implements DoCheck {
+      valB = 'initValue';
+
+      static ngDirectiveDef = defineDirective({
+        type: SubDirective,
+        selectors: [['', 'subDir', '']],
+        factory: () => new SubDirective(),
+        features: [InheritDefinitionFeature],
+        inputs: {valB: 'valB'},
+      });
+    }
+
+    const myDir = (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>)
+                      .factory() as SubDirective;
+    myDir.valA = 'first';
+    myDir.valB = 'second';
+
+    (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>).doCheck !.call(myDir);
+    const changeA = new SimpleChange(undefined, 'first', true);
+    const changeB = new SimpleChange(undefined, 'second', true);
+    expect(log).toEqual([changeA, changeB, 'super ngDoCheck']);
+  });
+
+  it('should apply the feature to inherited properties if on sub class', () => {
+    const log: any[] = [];
+
+    class SuperDirective {
+      valC = 'initValue';
+
+      static ngDirectiveDef = defineDirective({
+        type: SuperDirective,
+        selectors: [['', 'subDir', '']],
+        factory: () => new SuperDirective(),
+        features: [],
+        inputs: {valC: 'valC'},
+      });
+    }
+
+    class SubDirective extends SuperDirective implements OnChanges, DoCheck {
+      valA = 'initValue';
+
+      set valB(value: string) { log.push(value); }
+
+      get valB() { return 'works'; }
+
+      ngDoCheck(): void { log.push('ngDoCheck'); }
+      ngOnChanges(changes: SimpleChanges): void {
+        log.push('ngOnChanges');
+        log.push('valA', changes['valA']);
+        log.push('valB', changes['valB']);
+        log.push('valC', changes['valC']);
+      }
+
+      static ngDirectiveDef = defineDirective({
+        type: SubDirective,
+        selectors: [['', 'superDir', '']],
+        factory: () => new SubDirective(),
+        // Inheritance must always be before OnChanges feature.
+        features: [
+          InheritDefinitionFeature,
+          NgOnChangesFeature,
+        ],
+        inputs: {valA: 'valA', valB: 'valB'}
+      });
+    }
+
+    const myDir = (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>)
+                      .factory() as SubDirective;
+    myDir.valA = 'first';
+    expect(myDir.valA).toEqual('first');
+
+    myDir.valB = 'second';
+    expect(log).toEqual(['second']);
+    expect(myDir.valB).toEqual('works');
+
+    myDir.valC = 'third';
+    expect(myDir.valC).toEqual('third');
+
+    log.length = 0;
+    (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>).doCheck !.call(myDir);
+    const changeA = new SimpleChange(undefined, 'first', true);
+    const changeB = new SimpleChange(undefined, 'second', true);
+    const changeC = new SimpleChange(undefined, 'third', true);
+    expect(log).toEqual(
+        ['ngOnChanges', 'valA', changeA, 'valB', changeB, 'valC', changeC, 'ngDoCheck']);
+  });
+
+  it('correctly computes firstChange', () => {
+    class MyDirective implements OnChanges {
+      public log: Array<string|SimpleChange|undefined> = [];
+      public valA: string = 'initValue';
+      // TODO(issue/24571): remove '!'.
+      public valB !: string;
+
+      ngOnChanges(changes: SimpleChanges): void {
+        this.log.push('valA', changes['valA']);
+        this.log.push('valB', changes['valB']);
+      }
+
+      static ngDirectiveDef = defineDirective({
+        type: MyDirective,
+        selectors: [['', 'myDir', '']],
+        factory: () => new MyDirective(),
+        features: [NgOnChangesFeature],
+        inputs: {valA: 'valA', valB: 'valB'}
+      });
+    }
+
+    const myDir =
+        (MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).factory() as MyDirective;
+    myDir.valA = 'first';
+    myDir.valB = 'second';
+    (MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
+    const changeA1 = new SimpleChange(undefined, 'first', true);
+    const changeB1 = new SimpleChange(undefined, 'second', true);
+    expect(myDir.log).toEqual(['valA', changeA1, 'valB', changeB1]);
+
+    myDir.log.length = 0;
+    myDir.valA = 'third';
+    (MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
+    const changeA2 = new SimpleChange('first', 'third', false);
+    expect(myDir.log).toEqual(['valA', changeA2, 'valB', undefined]);
+  });
+
+  it('should not create a getter when only a setter is originally defined', () => {
+    class MyDirective implements OnChanges {
+      public log: Array<string|SimpleChange> = [];
+
+      public set onlySetter(value: string) { this.log.push(value); }
+
+      ngOnChanges(changes: SimpleChanges): void {
+        this.log.push('ngOnChanges');
+        this.log.push('onlySetter', changes['onlySetter']);
+      }
+
+      static ngDirectiveDef = defineDirective({
+        type: MyDirective,
+        selectors: [['', 'myDir', '']],
+        factory: () => new MyDirective(),
+        features: [NgOnChangesFeature],
+        inputs: {onlySetter: 'onlySetter'}
+      });
+    }
+
+    const myDir =
+        (MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).factory() as MyDirective;
+    myDir.onlySetter = 'someValue';
+    expect(myDir.onlySetter).toBeUndefined();
+    (MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
+    const changeSetter = new SimpleChange(undefined, 'someValue', true);
+    expect(myDir.log).toEqual(['someValue', 'ngOnChanges', 'onlySetter', changeSetter]);
+  });
+});
diff --git a/packages/core/test/render3/node_selector_matcher_spec.ts b/packages/core/test/render3/node_selector_matcher_spec.ts
new file mode 100644
index 000000000000..f742aacacad3
--- /dev/null
+++ b/packages/core/test/render3/node_selector_matcher_spec.ts
@@ -0,0 +1,462 @@
+/**
+ * @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 {AttributeMarker, TAttributes, TNode, TNodeType} from '../../src/render3/interfaces/node';
+
+import {CssSelector, CssSelectorList, NG_PROJECT_AS_ATTR_NAME, SelectorFlags,} from '../../src/render3/interfaces/projection';
+import {getProjectAsAttrValue, isNodeMatchingSelectorList, isNodeMatchingSelector} from '../../src/render3/node_selector_matcher';
+import {createTNode} from '@angular/core/src/render3/instructions';
+
+function testLStaticData(tagName: string, attrs: TAttributes | null): TNode {
+  return createTNode(TNodeType.Element, 0, tagName, attrs, null, null);
+}
+
+describe('css selector matching', () => {
+  function isMatching(tagName: string, attrs: TAttributes | null, selector: CssSelector): boolean {
+    return isNodeMatchingSelector(
+        createTNode(TNodeType.Element, 0, tagName, attrs, null, null), selector);
+  }
+
+  describe('isNodeMatchingSimpleSelector', () => {
+
+
+    describe('element matching', () => {
+
+      it('should match element name only if names are the same', () => {
+        expect(isMatching('span', null, ['span']))
+            .toBeTruthy(`Selector 'span' should match <span>`);
+
+        expect(isMatching('span', null, ['div']))
+            .toBeFalsy(`Selector 'div' should NOT match <span>`);
+      });
+
+      /**
+       * We assume that compiler will lower-case tag names both in LNode
+       * and in a selector.
+       */
+      it('should match element name case-sensitively', () => {
+        expect(isMatching('span', null, ['SPAN']))
+            .toBeFalsy(`Selector 'SPAN' should NOT match <span>`);
+        expect(isMatching('SPAN', null, ['span']))
+            .toBeFalsy(`Selector 'span' should NOT match <SPAN>'`);
+      });
+
+    });
+
+    describe('attributes matching', () => {
+
+      // TODO: do we need to differentiate no value and empty value? that is: title vs. title="" ?
+
+      it('should match single attribute without value', () => {
+
+        expect(isMatching('span', ['title', ''], [
+          '', 'title', ''
+        ])).toBeTruthy(`Selector '[title]' should match <span title>`);
+
+        expect(isMatching('span', ['title', 'my title'], [
+          '', 'title', ''
+        ])).toBeTruthy(`Selector '[title]' should match <span title="my title">`);
+
+        expect(isMatching('span', ['name', 'name'], [
+          '', 'title', ''
+        ])).toBeFalsy(`Selector '[title]' should NOT match <span name="name">`);
+
+        expect(isMatching('span', null, [
+          '', 'title', ''
+        ])).toBeFalsy(`Selector '[title]' should NOT match <span>`);
+
+        expect(isMatching('span', ['title', ''], [
+          '', 'other', ''
+        ])).toBeFalsy(`Selector '[other]' should NOT match <span title="">'`);
+      });
+
+      it('should match namespaced attributes', () => {
+        expect(isMatching(
+            'span', [AttributeMarker.NamespaceURI, 'http://some/uri', 'title', 'name'],
+            ['', 'title', '']));
+      });
+
+      it('should match selector with one attribute without value when element has several attributes',
+         () => {
+           expect(isMatching('span', ['id', 'my_id', 'title', 'test_title'], [
+             '', 'title', ''
+           ])).toBeTruthy(`Selector '[title]' should match <span id="my_id" title="test_title">`);
+         });
+
+
+      it('should match single attribute with value', () => {
+        expect(isMatching('span', ['title', 'My Title'], [
+          '', 'title', 'My Title'
+        ])).toBeTruthy(`Selector '[title="My Title"]' should match <span title="My Title">'`);
+
+        expect(isMatching('span', ['title', 'My Title'], [
+          '', 'title', 'Other Title'
+        ])).toBeFalsy(`Selector '[title="Other Title"]' should NOT match <span title="My Title">`);
+      });
+
+      it('should not match attribute when element name does not match', () => {
+        expect(isMatching('span', ['title', 'My Title'], [
+          'div', 'title', ''
+        ])).toBeFalsy(`Selector 'div[title]' should NOT match <span title="My Title">`);
+
+        expect(isMatching('span', ['title', 'My Title'], [
+          'div', 'title', 'My Title'
+        ])).toBeFalsy(`Selector 'div[title="My Title"]' should NOT match <span title="My Title">`);
+      });
+
+      it('should match multiple attributes', () => {
+        // selector: '[title=title][name=name]'
+        const selector = ['', 'title', 'title', 'name', 'name'];
+
+        // <span title="title" name="name">
+        expect(isMatching('span', ['title', 'title', 'name', 'name'], selector))
+            .toBeTruthy(
+                `Selector '[title=title][name=name]' should NOT match <span title="title" name="name">`);
+
+        // <span title="title">
+        expect(isMatching('span', ['title', 'title'], selector))
+            .toBeFalsy(`Selector '[title=title][name=name]' should NOT match <span title="title">`);
+
+        // <span name="name">
+        expect(isMatching('span', ['name', 'name'], selector))
+            .toBeFalsy(`Selector '[title=title][name=name]' should NOT match <span name="name">`);
+      });
+
+      it('should handle attribute values that match attribute names', () => {
+        // selector: [name=name]
+        const selector = ['', 'name', 'name'];
+
+        // <span title="name">
+        expect(isMatching('span', ['title', 'name'], selector))
+            .toBeFalsy(`Selector '[name=name]' should NOT match <span title="name">`);
+
+        // <span title="name" name="name">
+        expect(isMatching('span', ['title', 'name', 'name', 'name'], selector))
+            .toBeTruthy(`Selector '[name=name]' should match <span title="name" name="name">`);
+      });
+
+      /**
+       * We assume that compiler will lower-case all attribute names when generating code
+       */
+      it('should match attribute name case-sensitively', () => {
+        expect(isMatching('span', ['foo', ''], [
+          '', 'foo', ''
+        ])).toBeTruthy(`Selector '[foo]' should match <span foo>`);
+
+        expect(isMatching('span', ['foo', ''], [
+          '', 'Foo', ''
+        ])).toBeFalsy(`Selector '[Foo]' should NOT match <span foo>`);
+      });
+
+      it('should match attribute values case-sensitively', () => {
+        expect(isMatching('span', ['foo', 'Bar'], [
+          '', 'foo', 'Bar'
+        ])).toBeTruthy(`Selector '[foo="Bar"]' should match <span foo="Bar">`);
+
+        expect(isMatching('span', ['foo', 'Bar'], [
+          '', 'Foo', 'bar'
+        ])).toBeFalsy(`Selector '[Foo="bar"]' should match <span foo="Bar">`);
+      });
+
+      it('should match class as an attribute', () => {
+        expect(isMatching('span', ['class', 'foo'], [
+          '', 'class', ''
+        ])).toBeTruthy(`Selector '[class]' should match <span class="foo">`);
+
+        expect(isMatching('span', ['class', 'foo'], [
+          '', 'class', 'foo'
+        ])).toBeTruthy(`Selector '[class="foo"]' should match <span class="foo">`);
+      });
+
+      it('should take optional binding attribute names into account', () => {
+        expect(isMatching('span', [AttributeMarker.SelectOnly, 'directive'], [
+          '', 'directive', ''
+        ])).toBeTruthy(`Selector '[directive]' should match <span [directive]="exp">`);
+      });
+
+      it('should not match optional binding attribute names if attribute selector has value',
+         () => {
+           expect(isMatching('span', [AttributeMarker.SelectOnly, 'directive'], [
+             '', 'directive', 'value'
+           ])).toBeFalsy(`Selector '[directive=value]' should not match <span [directive]="exp">`);
+         });
+
+      it('should not match optional binding attribute names if attribute selector has value and next name equals to value',
+         () => {
+           expect(isMatching(
+                      'span', [AttributeMarker.SelectOnly, 'directive', 'value'],
+                      ['', 'directive', 'value']))
+               .toBeFalsy(
+                   `Selector '[directive=value]' should not match <span [directive]="exp" [value]="otherExp">`);
+         });
+    });
+
+    describe('class matching', () => {
+
+      it('should match with a class selector when an element has multiple classes', () => {
+        expect(isMatching('span', ['class', 'foo bar'], [
+          '', SelectorFlags.CLASS, 'foo'
+        ])).toBeTruthy(`Selector '.foo' should match <span class="foo bar">`);
+
+        expect(isMatching('span', ['class', 'foo bar'], [
+          '', SelectorFlags.CLASS, 'bar'
+        ])).toBeTruthy(`Selector '.bar' should match <span class="foo bar">`);
+
+        expect(isMatching('span', ['class', 'foo bar'], [
+          '', SelectorFlags.CLASS, 'baz'
+        ])).toBeFalsy(`Selector '.baz' should NOT match <span class="foo bar">`);
+      });
+
+      it('should not match on partial class name', () => {
+        expect(isMatching('span', ['class', 'foobar'], [
+          '', SelectorFlags.CLASS, 'foo'
+        ])).toBeFalsy(`Selector '.foo' should NOT match <span class="foobar">`);
+
+        expect(isMatching('span', ['class', 'foobar'], [
+          '', SelectorFlags.CLASS, 'bar'
+        ])).toBeFalsy(`Selector '.bar' should NOT match <span class="foobar">`);
+
+        expect(isMatching('span', ['class', 'foobar'], [
+          '', SelectorFlags.CLASS, 'ob'
+        ])).toBeFalsy(`Selector '.ob' should NOT match <span class="foobar">`);
+
+        expect(isMatching('span', ['class', 'foobar'], [
+          '', SelectorFlags.CLASS, 'foobar'
+        ])).toBeTruthy(`Selector '.foobar' should match <span class="foobar">`);
+      });
+
+      it('should support selectors with multiple classes', () => {
+        expect(isMatching('span', ['class', 'foo bar'], [
+          '', SelectorFlags.CLASS, 'foo', 'bar'
+        ])).toBeTruthy(`Selector '.foo.bar' should match <span class="foo bar">`);
+
+        expect(isMatching('span', ['class', 'foo'], [
+          '', SelectorFlags.CLASS, 'foo', 'bar'
+        ])).toBeFalsy(`Selector '.foo.bar' should NOT match <span class="foo">`);
+
+        expect(isMatching('span', ['class', 'bar'], [
+          '', SelectorFlags.CLASS, 'foo', 'bar'
+        ])).toBeFalsy(`Selector '.foo.bar' should NOT match <span class="bar">`);
+      });
+
+      it('should support selectors with multiple classes regardless of class name order', () => {
+        expect(isMatching('span', ['class', 'foo bar'], [
+          '', SelectorFlags.CLASS, 'bar', 'foo'
+        ])).toBeTruthy(`Selector '.bar.foo' should match <span class="foo bar">`);
+
+        expect(isMatching('span', ['class', 'bar foo'], [
+          '', SelectorFlags.CLASS, 'foo', 'bar'
+        ])).toBeTruthy(`Selector '.foo.bar' should match <span class="bar foo">`);
+
+        expect(isMatching('span', ['class', 'bar foo'], [
+          '', SelectorFlags.CLASS, 'bar', 'foo'
+        ])).toBeTruthy(`Selector '.bar.foo' should match <span class="bar foo">`);
+      });
+
+      it('should match class name case-sensitively', () => {
+        expect(isMatching('span', ['class', 'Foo'], [
+          '', SelectorFlags.CLASS, 'Foo'
+        ])).toBeTruthy(`Selector '.Foo' should match <span class="Foo">`);
+
+        expect(isMatching('span', ['class', 'Foo'], [
+          '', SelectorFlags.CLASS, 'foo'
+        ])).toBeFalsy(`Selector '.foo' should NOT match <span class-"Foo">`);
+      });
+
+      it('should work without a class attribute', () => {
+        // selector: '.foo'
+        const selector = ['', SelectorFlags.CLASS, 'foo'];
+
+        // <div title="title">
+        expect(isMatching('div', ['title', 'title'], selector))
+            .toBeFalsy(`Selector '.foo' should NOT match <div title="title">`);
+
+        // <div>
+        expect(isMatching('div', null, selector))
+            .toBeFalsy(`Selector '.foo' should NOT match <div>`);
+      });
+
+      it('should work with elements, attributes, and classes', () => {
+        // selector: 'div.foo[title=title]'
+        const selector = ['div', 'title', 'title', SelectorFlags.CLASS, 'foo'];
+
+        // <div class="foo" title="title">
+        expect(isMatching('div', ['class', 'foo', 'title', 'title'], selector)).toBeTruthy();
+
+        // <div title="title">
+        expect(isMatching('div', ['title', 'title'], selector)).toBeFalsy();
+
+        // <div class="foo">
+        expect(isMatching('div', ['class', 'foo'], selector)).toBeFalsy();
+      });
+    });
+  });
+
+  describe('negations', () => {
+
+    it('should match when negation part is null', () => {
+      expect(isMatching('span', null, ['span'])).toBeTruthy(`Selector 'span' should match <span>`);
+    });
+
+    it('should not match when negation part does not match', () => {
+      expect(isMatching('span', ['foo', ''], [
+        '', SelectorFlags.NOT | SelectorFlags.ELEMENT, 'span'
+      ])).toBeFalsy(`Selector ':not(span)' should NOT match <span foo="">`);
+
+      expect(isMatching('span', ['foo', ''], [
+        'span', SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'foo', ''
+      ])).toBeFalsy(`Selector 'span:not([foo])' should NOT match <span foo="">`);
+    });
+
+    it('should not match negative selector with tag name and attributes', () => {
+      // selector: ':not(span[foo])'
+      const selector = ['', SelectorFlags.NOT | SelectorFlags.ELEMENT, 'span', 'foo', ''];
+
+      // <span foo="">
+      expect(isMatching('span', ['foo', ''], selector)).toBeFalsy();
+
+      // <span bar="">
+      expect(isMatching('span', ['bar', ''], selector)).toBeTruthy();
+    });
+
+    it('should not match negative classes', () => {
+      // selector: ':not(.foo.bar)'
+      const selector = ['', SelectorFlags.NOT | SelectorFlags.CLASS, 'foo', 'bar'];
+
+      // <span class="foo bar">
+      expect(isMatching('span', ['class', 'foo bar'], selector)).toBeFalsy();
+
+      // <span class="foo">
+      expect(isMatching('span', ['class', 'foo'], selector)).toBeTruthy();
+
+      // <span class="bar">
+      expect(isMatching('span', ['class', 'bar'], selector)).toBeTruthy();
+    });
+
+    it('should not match negative selector with classes and attributes', () => {
+      // selector: ':not(.baz[title])
+      const selector = [
+        '', SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'title', '', SelectorFlags.CLASS, 'baz'
+      ];
+
+      // <div class="baz">
+      expect(isMatching('div', ['class', 'baz'], selector)).toBeTruthy();
+
+      // <div title="title">
+      expect(isMatching('div', ['title', 'title'], selector)).toBeTruthy();
+
+      // <div class="baz" title="title">
+      expect(isMatching('div', ['class', 'baz', 'title', 'title'], selector)).toBeFalsy();
+    });
+
+    it('should not match negative selector with attribute selector after', () => {
+      // selector: ':not(.baz[title]):not([foo])'
+      const selector = [
+        '', SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'title', '', SelectorFlags.CLASS, 'baz',
+        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'foo', ''
+      ];
+
+      // <div class="baz">
+      expect(isMatching('div', ['class', 'baz'], selector)).toBeTruthy();
+
+      // <div class="baz" title="">
+      expect(isMatching('div', ['class', 'baz', 'title', ''], selector)).toBeFalsy();
+
+      // <div class="baz" foo="">
+      expect(isMatching('div', ['class', 'baz', 'foo', ''], selector)).toBeFalsy();
+    });
+
+    it('should not match with multiple negative selectors', () => {
+      // selector: ':not(span):not([foo])'
+      const selector = [
+        '', SelectorFlags.NOT | SelectorFlags.ELEMENT, 'span',
+        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'foo', ''
+      ];
+
+      // <div foo="">
+      expect(isMatching('div', ['foo', ''], selector)).toBeFalsy();
+
+      // <span bar="">
+      expect(isMatching('span', ['bar', ''], selector)).toBeFalsy();
+
+      // <div bar="">
+      expect(isMatching('div', ['bar', ''], selector)).toBeTruthy();
+    });
+
+    it('should evaluate complex selector with negative selectors', () => {
+      // selector: 'div.foo.bar[name=name]:not(.baz):not([title])'
+      const selector = [
+        'div', 'name', 'name', SelectorFlags.CLASS, 'foo', 'bar',
+        SelectorFlags.NOT | SelectorFlags.ATTRIBUTE, 'title', '',
+        SelectorFlags.NOT | SelectorFlags.CLASS, 'baz'
+      ];
+
+      // <div name="name" class="foo bar">
+      expect(isMatching('div', ['name', 'name', 'class', 'foo bar'], selector)).toBeTruthy();
+
+      // <div name="name" class="foo bar baz">
+      expect(isMatching('div', ['name', 'name', 'class', 'foo bar baz'], selector)).toBeFalsy();
+
+      // <div name="name" title class="foo bar">
+      expect(isMatching('div', ['name', 'name', 'title', '', 'class', 'foo bar'], selector))
+          .toBeFalsy();
+    });
+
+  });
+
+  describe('isNodeMatchingSelectorList', () => {
+
+    function isAnyMatching(
+        tagName: string, attrs: string[] | null, selector: CssSelectorList): boolean {
+      return isNodeMatchingSelectorList(testLStaticData(tagName, attrs), selector);
+    }
+
+    it('should match when there is only one simple selector without negations', () => {
+      expect(isAnyMatching('span', null, [['span']]))
+          .toBeTruthy(`Selector 'span' should match <span>`);
+
+      expect(isAnyMatching('span', null, [['div']]))
+          .toBeFalsy(`Selector 'div' should NOT match <span>`);
+    });
+
+    it('should match when there are multiple parts and only one is matching', () => {
+      expect(isAnyMatching('span', ['foo', 'bar'], [
+        ['div'], ['', 'foo', 'bar']
+      ])).toBeTruthy(`Selector 'div, [foo=bar]' should match <span foo="bar">`);
+    });
+
+    it('should not match when there are multiple parts and none is matching', () => {
+      expect(isAnyMatching('span', ['foo', 'bar'], [
+        ['div'], ['', 'foo', 'baz']
+      ])).toBeFalsy(`Selector 'div, [foo=baz]' should NOT match <span foo="bar">`);
+    });
+  });
+
+  describe('reading the ngProjectAs attribute value', function() {
+
+    function testTNode(attrs: string[] | null) { return testLStaticData('tag', attrs); }
+
+    it('should get ngProjectAs value if present', function() {
+      expect(getProjectAsAttrValue(testTNode([NG_PROJECT_AS_ATTR_NAME, 'tag[foo=bar]'])))
+          .toBe('tag[foo=bar]');
+    });
+
+    it('should return null if there are no attributes',
+       function() { expect(getProjectAsAttrValue(testTNode(null))).toBe(null); });
+
+    it('should return if ngProjectAs is not present', function() {
+      expect(getProjectAsAttrValue(testTNode(['foo', 'bar']))).toBe(null);
+    });
+
+    it('should not accidentally identify ngProjectAs in attribute values', function() {
+      expect(getProjectAsAttrValue(testTNode(['foo', NG_PROJECT_AS_ATTR_NAME]))).toBe(null);
+    });
+
+  });
+
+});
diff --git a/packages/core/test/render3/outputs_spec.ts b/packages/core/test/render3/outputs_spec.ts
new file mode 100644
index 000000000000..be55a679072f
--- /dev/null
+++ b/packages/core/test/render3/outputs_spec.ts
@@ -0,0 +1,461 @@
+/**
+ * @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 {EventEmitter} from '@angular/core';
+
+import {defineComponent, defineDirective} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, text} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+
+import {containerEl, renderToHtml} from './render_util';
+
+describe('outputs', () => {
+  let buttonToggle: ButtonToggle;
+  let destroyComp: DestroyComp;
+  let buttonDir: MyButton;
+
+  class ButtonToggle {
+    change = new EventEmitter();
+    resetStream = new EventEmitter();
+
+    static ngComponentDef = defineComponent({
+      type: ButtonToggle,
+      selectors: [['button-toggle']],
+      template: function(rf: RenderFlags, ctx: any) {},
+      factory: () => buttonToggle = new ButtonToggle(),
+      outputs: {change: 'change', resetStream: 'reset'}
+    });
+  }
+
+  let otherDir: OtherDir;
+
+  class OtherDir {
+    changeStream = new EventEmitter();
+
+    static ngDirectiveDef = defineDirective({
+      type: OtherDir,
+      selectors: [['', 'otherDir', '']],
+      factory: () => otherDir = new OtherDir,
+      outputs: {changeStream: 'change'}
+    });
+  }
+
+  class DestroyComp {
+    events: string[] = [];
+    ngOnDestroy() { this.events.push('destroy'); }
+
+    static ngComponentDef = defineComponent({
+      type: DestroyComp,
+      selectors: [['destroy-comp']],
+      template: function(rf: RenderFlags, ctx: any) {},
+      factory: () => destroyComp = new DestroyComp()
+    });
+  }
+
+  /** <button myButton (click)="onClick()">Click me</button> */
+  class MyButton {
+    click = new EventEmitter();
+
+    static ngDirectiveDef = defineDirective({
+      type: MyButton,
+      selectors: [['', 'myButton', '']],
+      factory: () => buttonDir = new MyButton,
+      outputs: {click: 'click'}
+    });
+  }
+
+
+  const deps = [ButtonToggle, OtherDir, DestroyComp, MyButton];
+
+  it('should call component output function when event is emitted', () => {
+    /** <button-toggle (change)="onChange()"></button-toggle> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'button-toggle');
+        {
+          listener('change', function() { return ctx.onChange(); });
+        }
+        elementEnd();
+      }
+    }
+
+    let counter = 0;
+    const ctx = {onChange: () => counter++};
+    renderToHtml(Template, ctx, deps);
+
+    buttonToggle !.change.next();
+    expect(counter).toEqual(1);
+
+    buttonToggle !.change.next();
+    expect(counter).toEqual(2);
+  });
+
+  it('should support more than 1 output function on the same node', () => {
+    /** <button-toggle (change)="onChange()" (reset)="onReset()"></button-toggle> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'button-toggle');
+        {
+          listener('change', function() { return ctx.onChange(); });
+          listener('reset', function() { return ctx.onReset(); });
+        }
+        elementEnd();
+      }
+    }
+
+    let counter = 0;
+    let resetCounter = 0;
+    const ctx = {onChange: () => counter++, onReset: () => resetCounter++};
+    renderToHtml(Template, ctx, deps);
+
+    buttonToggle !.change.next();
+    expect(counter).toEqual(1);
+
+    buttonToggle !.resetStream.next();
+    expect(resetCounter).toEqual(1);
+  });
+
+  it('should eval component output expression when event is emitted', () => {
+    /** <button-toggle (change)="counter++"></button-toggle> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'button-toggle');
+        {
+          listener('change', function() { return ctx.counter++; });
+        }
+        elementEnd();
+      }
+    }
+
+    const ctx = {counter: 0};
+    renderToHtml(Template, ctx, deps);
+
+    buttonToggle !.change.next();
+    expect(ctx.counter).toEqual(1);
+
+    buttonToggle !.change.next();
+    expect(ctx.counter).toEqual(2);
+  });
+
+  it('should unsubscribe from output when view is destroyed', () => {
+
+    /**
+     * % if (condition) {
+     *   <button-toggle (change)="onChange()"></button-toggle>
+     * % }
+     */
+
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        {
+          if (ctx.condition) {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              elementStart(0, 'button-toggle');
+              {
+                listener('change', function() { return ctx.onChange(); });
+              }
+              elementEnd();
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    let counter = 0;
+    const ctx = {onChange: () => counter++, condition: true};
+    renderToHtml(Template, ctx, deps);
+
+    buttonToggle !.change.next();
+    expect(counter).toEqual(1);
+
+    ctx.condition = false;
+    renderToHtml(Template, ctx, deps);
+
+    buttonToggle !.change.next();
+    expect(counter).toEqual(1);
+  });
+
+  it('should unsubscribe from output in nested view', () => {
+
+    /**
+     * % if (condition) {
+     *   % if (condition2) {
+     *     <button-toggle (change)="onChange()"></button-toggle>
+     *   % }
+     * % }
+     */
+
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        {
+          if (ctx.condition) {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              container(0);
+            }
+            containerRefreshStart(0);
+            {
+              if (ctx.condition2) {
+                let rf1 = embeddedViewStart(0);
+                if (rf1 & RenderFlags.Create) {
+                  elementStart(0, 'button-toggle');
+                  {
+                    listener('change', function() { return ctx.onChange(); });
+                  }
+                  elementEnd();
+                }
+                embeddedViewEnd();
+              }
+            }
+            containerRefreshEnd();
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    let counter = 0;
+    const ctx = {onChange: () => counter++, condition: true, condition2: true};
+    renderToHtml(Template, ctx, deps);
+
+    buttonToggle !.change.next();
+    expect(counter).toEqual(1);
+
+    ctx.condition = false;
+    renderToHtml(Template, ctx, deps);
+
+    buttonToggle !.change.next();
+    expect(counter).toEqual(1);
+  });
+
+  it('should work properly when view also has listeners and destroys', () => {
+    /**
+     * % if (condition) {
+     *   <button (click)="onClick()">Click me</button>
+     *   <button-toggle (change)="onChange()"></button-toggle>
+     *   <destroy-comp></destroy-comp>
+     * % }
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        {
+          if (ctx.condition) {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              elementStart(0, 'button');
+              {
+                listener('click', function() { return ctx.onClick(); });
+                text(1, 'Click me');
+              }
+              elementEnd();
+              elementStart(2, 'button-toggle');
+              {
+                listener('change', function() { return ctx.onChange(); });
+              }
+              elementEnd();
+              element(3, 'destroy-comp');
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    let clickCounter = 0;
+    let changeCounter = 0;
+    const ctx = {condition: true, onChange: () => changeCounter++, onClick: () => clickCounter++};
+    renderToHtml(Template, ctx, deps);
+
+    buttonToggle !.change.next();
+    expect(changeCounter).toEqual(1);
+    expect(clickCounter).toEqual(0);
+
+    const button = containerEl.querySelector('button');
+    button !.click();
+    expect(changeCounter).toEqual(1);
+    expect(clickCounter).toEqual(1);
+
+    ctx.condition = false;
+    renderToHtml(Template, ctx, deps);
+
+    expect(destroyComp !.events).toEqual(['destroy']);
+
+    buttonToggle !.change.next();
+    button !.click();
+    expect(changeCounter).toEqual(1);
+    expect(clickCounter).toEqual(1);
+  });
+
+  it('should fire event listeners along with outputs if they match', () => {
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'button', ['myButton', '']);
+        {
+          listener('click', function() { return ctx.onClick(); });
+        }
+        elementEnd();
+      }
+    }
+
+    let counter = 0;
+    renderToHtml(Template, {counter, onClick: () => counter++}, deps);
+
+    // To match current Angular behavior, the click listener is still
+    // set up in addition to any matching outputs.
+    const button = containerEl.querySelector('button') !;
+    button.click();
+    expect(counter).toEqual(1);
+
+    buttonDir !.click.next();
+    expect(counter).toEqual(2);
+  });
+
+  it('should work with two outputs of the same name', () => {
+    /** <button-toggle (change)="onChange()" otherDir></button-toggle> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'button-toggle', ['otherDir', '']);
+        {
+          listener('change', function() { return ctx.onChange(); });
+        }
+        elementEnd();
+      }
+    }
+
+    let counter = 0;
+    renderToHtml(Template, {counter, onChange: () => counter++}, deps);
+
+    buttonToggle !.change.next();
+    expect(counter).toEqual(1);
+
+    otherDir !.changeStream.next();
+    expect(counter).toEqual(2);
+  });
+
+  it('should work with an input and output of the same name', () => {
+    let otherDir: OtherChangeDir;
+
+    class OtherChangeDir {
+      // TODO(issue/24571): remove '!'.
+      change !: boolean;
+
+      static ngDirectiveDef = defineDirective({
+        type: OtherChangeDir,
+        selectors: [['', 'otherChangeDir', '']],
+        factory: () => otherDir = new OtherChangeDir,
+        inputs: {change: 'change'}
+      });
+    }
+
+    /** <button-toggle (change)="onChange()" otherChangeDir [change]="change"></button-toggle> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'button-toggle', ['otherChangeDir', '']);
+        {
+          listener('change', function() { return ctx.onChange(); });
+        }
+        elementEnd();
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'change', bind(ctx.change));
+      }
+    }
+
+    let counter = 0;
+    const deps = [ButtonToggle, OtherChangeDir];
+    renderToHtml(Template, {counter, onChange: () => counter++, change: true}, deps);
+    expect(otherDir !.change).toEqual(true);
+
+    renderToHtml(Template, {counter, onChange: () => counter++, change: false}, deps);
+    expect(otherDir !.change).toEqual(false);
+
+    buttonToggle !.change.next();
+    expect(counter).toEqual(1);
+  });
+
+  it('should work with outputs at same index in if block', () => {
+    /**
+     * <button (click)="onClick()">Click me</button>             // outputs: null
+     * % if (condition) {
+     *   <button-toggle (change)="onChange()"></button-toggle>   // outputs: {change: [0, 'change']}
+     * % } else {
+     *   <div otherDir (change)="onChange()"></div>             // outputs: {change: [0,
+     * 'changeStream']}
+     * % }
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'button');
+        {
+          listener('click', function() { return ctx.onClick(); });
+          text(1, 'Click me');
+        }
+        elementEnd();
+        container(2);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(2);
+        {
+          if (ctx.condition) {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              elementStart(0, 'button-toggle');
+              {
+                listener('change', function() { return ctx.onChange(); });
+              }
+              elementEnd();
+            }
+            embeddedViewEnd();
+          } else {
+            if (embeddedViewStart(1)) {
+              elementStart(0, 'div', ['otherDir', '']);
+              {
+                listener('change', function() { return ctx.onChange(); });
+              }
+              elementEnd();
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    let counter = 0;
+    const ctx = {condition: true, onChange: () => counter++, onClick: () => {}};
+    renderToHtml(Template, ctx, deps);
+
+    buttonToggle !.change.next();
+    expect(counter).toEqual(1);
+
+    ctx.condition = false;
+    renderToHtml(Template, ctx, deps);
+    expect(counter).toEqual(1);
+
+    otherDir !.changeStream.next();
+    expect(counter).toEqual(2);
+  });
+
+});
diff --git a/packages/core/test/render3/perfCounter_spec.ts b/packages/core/test/render3/perfCounter_spec.ts
new file mode 100644
index 000000000000..b98b54ff3b6e
--- /dev/null
+++ b/packages/core/test/render3/perfCounter_spec.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 {ngDevModeResetPerfCounters} from '../../src/render3/ng_dev_mode';
+
+beforeEach(ngDevModeResetPerfCounters);
+beforeEach(() => {
+  jasmine.addMatchers({
+    toHaveProperties: function(util, customEqualityTesters) {
+      return {compare: toHavePropertiesCompare};
+    }
+  });
+});
+function toHavePropertiesCompare(actual: any, expected: any) {
+  let pass = true;
+  let errors = [];
+  for (let key of Object.keys(actual)) {
+    if (expected.hasOwnProperty(key)) {
+      if (actual[key] !== expected[key]) {
+        pass = false;
+        errors.push(`Expected '${key}' to be '${expected[key]}' but was '${actual[key]}'.`);
+      }
+    }
+  }
+  return {pass: pass, message: errors.join('\n')};
+}
+
+describe('toHaveProperties', () => {
+  it('should pass', () => {
+    expect({tNode: 1}).toHaveProperties({});
+    expect({tNode: 2}).toHaveProperties({tNode: 2});
+  });
+
+  it('should fail', () => {
+    expect(toHavePropertiesCompare({tNode: 2, tView: 4}, {tNode: 3, tView: 5})).toEqual({
+      pass: false,
+      message:
+          'Expected \'tNode\' to be \'3\' but was \'2\'.\nExpected \'tView\' to be \'5\' but was \'4\'.'
+    });
+  });
+});
diff --git a/packages/core/test/render3/pipe_spec.ts b/packages/core/test/render3/pipe_spec.ts
new file mode 100644
index 000000000000..3d7c0369d605
--- /dev/null
+++ b/packages/core/test/render3/pipe_spec.ts
@@ -0,0 +1,430 @@
+/**
+ * @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 {Directive, OnChanges, OnDestroy, Pipe, PipeTransform} from '@angular/core';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+import {defineDirective, definePipe} from '../../src/render3/definition';
+import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, load, loadDirective, reserveSlots, text, textBinding} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+import {pipe, pipeBind1, pipeBind3, pipeBind4, pipeBindV} from '../../src/render3/pipe';
+
+import {RenderLog, getRendererFactory2, patchLoggingRenderer2} from './imported_renderer2';
+import {ComponentFixture, createComponent, renderToHtml} from './render_util';
+
+
+let log: string[] = [];
+let person: Person;
+let renderLog: RenderLog = new RenderLog();
+const rendererFactory2 = getRendererFactory2(document);
+patchLoggingRenderer2(rendererFactory2, renderLog);
+
+describe('pipe', () => {
+  beforeEach(() => {
+    log = [];
+    renderLog.clear();
+    person = new Person();
+  });
+
+  const pipes = () => [CountingPipe, MultiArgPipe, CountingImpurePipe];
+
+  it('should support interpolation', () => {
+    function Template(rf: RenderFlags, person: Person) {
+      if (rf & RenderFlags.Create) {
+        text(0);
+        pipe(1, 'countingPipe');
+        reserveSlots(2);
+      }
+      if (rf & RenderFlags.Update) {
+        textBinding(0, interpolation1('', pipeBind1(1, 2, person.name), ''));
+      }
+    }
+
+    person.init('bob', null);
+    expect(renderToHtml(Template, person, null, pipes)).toEqual('bob state:0');
+  });
+
+  it('should throw if pipe is not found', () => {
+    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        text(0);
+        pipe(1, 'randomPipeName');
+        reserveSlots(2);
+      }
+      if (rf & RenderFlags.Update) {
+        textBinding(0, interpolation1('', pipeBind1(1, 2, ctx.value), ''));
+      }
+    }, [], pipes);
+
+    expect(() => {
+      const fixture = new ComponentFixture(App);
+    }).toThrowError(/Pipe with name 'randomPipeName' not found!/);
+  });
+
+  it('should support bindings', () => {
+    let directive: any = null;
+
+    @Directive({selector: '[my-dir]', inputs: ['dirProp: elprop'], exportAs: 'mydir'})
+    class MyDir {
+      dirProp: string;
+
+      constructor() { this.dirProp = ''; }
+
+      static ngDirectiveDef = defineDirective({
+        type: MyDir,
+        selectors: [['', 'myDir', '']],
+        factory: () => new MyDir(),
+        inputs: {dirProp: 'elprop'}
+      });
+    }
+
+    @Pipe({name: 'double'})
+    class DoublePipe implements PipeTransform {
+      transform(value: any) { return `${value}${value}`; }
+
+      static ngPipeDef = definePipe({
+        name: 'double',
+        type: DoublePipe,
+        factory: function DoublePipe_Factory() { return new DoublePipe(); },
+      });
+    }
+
+    function Template(rf: RenderFlags, ctx: string) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'div', ['myDir', '']);
+        pipe(1, 'double');
+        elementEnd();
+        reserveSlots(2);
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'elprop', bind(pipeBind1(1, 2, ctx)));
+        directive = loadDirective(0);
+      }
+    }
+    renderToHtml(Template, 'a', [MyDir], [DoublePipe]);
+    expect(directive !.dirProp).toEqual('aa');
+  });
+
+  it('should support arguments in pipes', () => {
+    function Template(rf: RenderFlags, person: Person) {
+      if (rf & RenderFlags.Create) {
+        text(0);
+        pipe(1, 'multiArgPipe');
+        reserveSlots(4);
+      }
+      if (rf & RenderFlags.Update) {
+        textBinding(
+            0, interpolation1('', pipeBind3(1, 4, person.name, 'one', person.address !.city), ''));
+      }
+    }
+
+    person.init('value', new Address('two'));
+    expect(renderToHtml(Template, person, null, pipes)).toEqual('value one two default');
+  });
+
+  it('should support calling pipes with different number of arguments', () => {
+    function Template(rf: RenderFlags, person: Person) {
+      if (rf & RenderFlags.Create) {
+        text(0);
+        pipe(1, 'multiArgPipe');
+        pipe(2, 'multiArgPipe');
+        reserveSlots(9);
+      }
+      if (rf & RenderFlags.Update) {
+        textBinding(
+            0, interpolation1(
+                   '', pipeBind4(2, 9, pipeBindV(1, 4, [person.name, 'a', 'b']), 0, 1, 2), ''));
+      }
+    }
+
+    person.init('value', null);
+    expect(renderToHtml(Template, person, null, pipes)).toEqual('value a b default 0 1 2');
+  });
+
+  it('should do nothing when no change', () => {
+    @Pipe({name: 'identityPipe'})
+    class IdentityPipe implements PipeTransform {
+      transform(value: any) { return value; }
+
+      static ngPipeDef = definePipe({
+        name: 'identityPipe',
+        type: IdentityPipe,
+        factory: function IdentityPipe_Factory() { return new IdentityPipe(); },
+      });
+    }
+
+    function Template(rf: RenderFlags, person: Person) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'div');
+        pipe(1, 'identityPipe');
+        elementEnd();
+        reserveSlots(2);
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'someProp', bind(pipeBind1(1, 2, 'Megatron')));
+      }
+    }
+
+    renderToHtml(Template, person, null, [IdentityPipe], rendererFactory2);
+    expect(renderLog.log).toEqual(['someProp=Megatron']);
+
+    renderLog.clear();
+    renderToHtml(Template, person, null, pipes, rendererFactory2);
+    expect(renderLog.log).toEqual([]);
+  });
+
+  describe('pure', () => {
+    it('should call pure pipes only if the arguments change', () => {
+      function Template(rf: RenderFlags, person: Person) {
+        if (rf & RenderFlags.Create) {
+          text(0);
+          pipe(1, 'countingPipe');
+          reserveSlots(2);
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(0, interpolation1('', pipeBind1(1, 2, person.name), ''));
+        }
+      }
+
+      // change from undefined -> null
+      person.name = null;
+      expect(renderToHtml(Template, person, null, pipes)).toEqual('null state:0');
+      expect(renderToHtml(Template, person, null, pipes)).toEqual('null state:0');
+
+      // change from null -> some value
+      person.name = 'bob';
+      expect(renderToHtml(Template, person, null, pipes)).toEqual('bob state:1');
+      expect(renderToHtml(Template, person, null, pipes)).toEqual('bob state:1');
+
+      // change from some value -> some other value
+      person.name = 'bart';
+      expect(renderToHtml(Template, person, null, pipes)).toEqual('bart state:2');
+      expect(renderToHtml(Template, person, null, pipes)).toEqual('bart state:2');
+    });
+  });
+
+  describe('impure', () => {
+    it('should call impure pipes on each change detection run', () => {
+      function Template(rf: RenderFlags, person: Person) {
+        if (rf & RenderFlags.Create) {
+          text(0);
+          pipe(1, 'countingImpurePipe');
+          reserveSlots(2);
+        }
+        if (rf & RenderFlags.Update) {
+          textBinding(0, interpolation1('', pipeBind1(1, 2, person.name), ''));
+        }
+      }
+
+      person.name = 'bob';
+      expect(renderToHtml(Template, person, null, pipes)).toEqual('bob state:0');
+      expect(renderToHtml(Template, person, null, pipes)).toEqual('bob state:1');
+    });
+
+    it('should not cache impure pipes', () => {
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          pipe(1, 'countingImpurePipe');
+          elementEnd();
+          elementStart(2, 'div');
+          pipe(3, 'countingImpurePipe');
+          elementEnd();
+          container(4);
+          reserveSlots(4);
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'someProp', bind(pipeBind1(1, 2, true)));
+          elementProperty(2, 'someProp', bind(pipeBind1(3, 4, true)));
+          pipeInstances.push(load<CountingImpurePipe>(1), load(3));
+          containerRefreshStart(4);
+          {
+            for (let i of [1, 2]) {
+              let rf1 = embeddedViewStart(1);
+              {
+                if (rf1 & RenderFlags.Create) {
+                  elementStart(0, 'div');
+                  pipe(1, 'countingImpurePipe');
+                  elementEnd();
+                  reserveSlots(2);
+                }
+                if (rf1 & RenderFlags.Update) {
+                  elementProperty(0, 'someProp', bind(pipeBind1(1, 2, true)));
+                  pipeInstances.push(load<CountingImpurePipe>(1));
+                }
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      const pipeInstances: CountingImpurePipe[] = [];
+      renderToHtml(Template, {}, null, pipes, rendererFactory2);
+      expect(pipeInstances.length).toEqual(4);
+      expect(pipeInstances[0]).toBeAnInstanceOf(CountingImpurePipe);
+      expect(pipeInstances[1]).toBeAnInstanceOf(CountingImpurePipe);
+      expect(pipeInstances[1]).not.toBe(pipeInstances[0]);
+      expect(pipeInstances[2]).toBeAnInstanceOf(CountingImpurePipe);
+      expect(pipeInstances[2]).not.toBe(pipeInstances[0]);
+      expect(pipeInstances[3]).toBeAnInstanceOf(CountingImpurePipe);
+      expect(pipeInstances[3]).not.toBe(pipeInstances[0]);
+    });
+  });
+
+  describe('lifecycles', () => {
+    @Pipe({name: 'pipeWithOnDestroy'})
+    class PipeWithOnDestroy implements PipeTransform, OnDestroy {
+      ngOnDestroy() { log.push('pipeWithOnDestroy - ngOnDestroy'); }
+
+      transform(value: any): any { return null; }
+
+      static ngPipeDef = definePipe({
+        name: 'pipeWithOnDestroy',
+        type: PipeWithOnDestroy,
+        factory: function PipeWithOnDestroy_Factory() { return new PipeWithOnDestroy(); },
+      });
+    }
+
+    it('should call ngOnDestroy on pipes', () => {
+      function Template(rf: RenderFlags, person: Person) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            if (person.age > 20) {
+              let rf1 = embeddedViewStart(1);
+              {
+                if (rf1 & RenderFlags.Create) {
+                  text(0);
+                  pipe(1, 'pipeWithOnDestroy');
+                  reserveSlots(2);
+                }
+                if (rf & RenderFlags.Update) {
+                  textBinding(0, interpolation1('', pipeBind1(1, 2, person.age), ''));
+                }
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+      const pipes = [PipeWithOnDestroy];
+
+      person.age = 25;
+      renderToHtml(Template, person, null, pipes);
+
+      person.age = 15;
+      renderToHtml(Template, person, null, pipes);
+      expect(log).toEqual(['pipeWithOnDestroy - ngOnDestroy']);
+
+      log = [];
+      person.age = 30;
+      renderToHtml(Template, person, null, pipes);
+      expect(log).toEqual([]);
+
+      log = [];
+      person.age = 10;
+      renderToHtml(Template, person, null, pipes);
+      expect(log).toEqual(['pipeWithOnDestroy - ngOnDestroy']);
+    });
+  });
+
+});
+
+@Pipe({name: 'countingPipe'})
+class CountingPipe implements PipeTransform {
+  state: number = 0;
+
+  transform(value: any) { return `${value} state:${this.state++}`; }
+
+  static ngPipeDef = definePipe({
+    name: 'countingPipe',
+    type: CountingPipe,
+    factory: function CountingPipe_Factory() { return new CountingPipe(); },
+  });
+}
+
+@Pipe({name: 'countingImpurePipe', pure: false})
+class CountingImpurePipe implements PipeTransform {
+  state: number = 0;
+
+  transform(value: any) { return `${value} state:${this.state++}`; }
+
+  static ngPipeDef = definePipe({
+    name: 'countingImpurePipe',
+    type: CountingImpurePipe,
+    factory: function CountingImpurePipe_Factory() { return new CountingImpurePipe(); },
+    pure: false,
+  });
+}
+
+@Pipe({name: 'multiArgPipe'})
+class MultiArgPipe implements PipeTransform {
+  transform(value: any, arg1: any, arg2: any, arg3 = 'default') {
+    return `${value} ${arg1} ${arg2} ${arg3}`;
+  }
+
+  static ngPipeDef = definePipe({
+    name: 'multiArgPipe',
+    type: MultiArgPipe,
+    factory: function MultiArgPipe_Factory() { return new MultiArgPipe(); },
+  });
+}
+
+class Person {
+  // TODO(issue/24571): remove '!'.
+  age !: number;
+  // TODO(issue/24571): remove '!'.
+  name !: string | null;
+  address: Address|null = null;
+  // TODO(issue/24571): remove '!'.
+  phones !: number[];
+
+  init(name: string|null, address: Address|null = null) {
+    this.name = name;
+    this.address = address;
+  }
+
+  sayHi(m: any): string { return `Hi, ${m}`; }
+
+  passThrough(val: any): any { return val; }
+
+  toString(): string {
+    const address = this.address == null ? '' : ' address=' + this.address.toString();
+
+    return 'name=' + this.name + address;
+  }
+}
+
+class Address {
+  cityGetterCalls: number = 0;
+  zipCodeGetterCalls: number = 0;
+
+  constructor(public _city: string, public _zipcode: any = null) {}
+
+  get city() {
+    this.cityGetterCalls++;
+    return this._city;
+  }
+
+  get zipcode() {
+    this.zipCodeGetterCalls++;
+    return this._zipcode;
+  }
+
+  set city(v) { this._city = v; }
+
+  set zipcode(v) { this._zipcode = v; }
+
+  toString(): string { return this.city || '-'; }
+}
diff --git a/packages/core/test/render3/properties_spec.ts b/packages/core/test/render3/properties_spec.ts
new file mode 100644
index 000000000000..5f447a0f8da9
--- /dev/null
+++ b/packages/core/test/render3/properties_spec.ts
@@ -0,0 +1,597 @@
+/**
+ * @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 {EventEmitter} from '@angular/core';
+
+import {defineComponent, defineDirective, tick} from '../../src/render3/index';
+import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, listener, loadDirective, reference, text, textBinding} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+
+import {ComponentFixture, renderToHtml} from './render_util';
+
+describe('elementProperty', () => {
+
+  it('should support bindings to properties', () => {
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'span');
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'id', bind(ctx));
+      }
+    }
+
+    expect(renderToHtml(Template, 'testId')).toEqual('<span id="testId"></span>');
+    expect(renderToHtml(Template, 'otherId')).toEqual('<span id="otherId"></span>');
+  });
+
+  it('should support creation time bindings to properties', () => {
+    function expensive(ctx: string): any {
+      if (ctx === 'cheapId') {
+        return ctx;
+      } else {
+        throw 'Too expensive!';
+      }
+    }
+
+    function Template(rf: RenderFlags, ctx: string) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'span');
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'id', rf & RenderFlags.Create ? expensive(ctx) : NO_CHANGE);
+      }
+    }
+
+    expect(renderToHtml(Template, 'cheapId')).toEqual('<span id="cheapId"></span>');
+    expect(renderToHtml(Template, 'expensiveId')).toEqual('<span id="cheapId"></span>');
+  });
+
+  it('should support interpolation for properties', () => {
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'span');
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'id', interpolation1('_', ctx, '_'));
+      }
+    }
+
+    expect(renderToHtml(Template, 'testId')).toEqual('<span id="_testId_"></span>');
+    expect(renderToHtml(Template, 'otherId')).toEqual('<span id="_otherId_"></span>');
+  });
+
+  it('should support host bindings on root component', () => {
+    class HostBindingComp {
+      id = 'my-id';
+
+      static ngComponentDef = defineComponent({
+        type: HostBindingComp,
+        selectors: [['host-binding-comp']],
+        factory: () => new HostBindingComp(),
+        hostBindings: (dirIndex: number, elIndex: number) => {
+          const instance = loadDirective(dirIndex) as HostBindingComp;
+          elementProperty(elIndex, 'id', bind(instance.id));
+        },
+        template: (rf: RenderFlags, ctx: HostBindingComp) => {}
+      });
+    }
+
+    const fixture = new ComponentFixture(HostBindingComp);
+    expect(fixture.hostElement.id).toBe('my-id');
+
+    fixture.component.id = 'other-id';
+    tick(fixture.component);
+    expect(fixture.hostElement.id).toBe('other-id');
+  });
+
+  describe('input properties', () => {
+    let button: MyButton;
+    let otherDir: OtherDir;
+    let otherDisabledDir: OtherDisabledDir;
+    let idDir: IdDir;
+
+    class MyButton {
+      // TODO(issue/24571): remove '!'.
+      disabled !: boolean;
+
+      static ngDirectiveDef = defineDirective({
+        type: MyButton,
+        selectors: [['', 'myButton', '']],
+        factory: () => button = new MyButton(),
+        inputs: {disabled: 'disabled'}
+      });
+    }
+
+    class OtherDir {
+      // TODO(issue/24571): remove '!'.
+      id !: number;
+      clickStream = new EventEmitter();
+
+      static ngDirectiveDef = defineDirective({
+        type: OtherDir,
+        selectors: [['', 'otherDir', '']],
+        factory: () => otherDir = new OtherDir(),
+        inputs: {id: 'id'},
+        outputs: {clickStream: 'click'}
+      });
+    }
+
+    class OtherDisabledDir {
+      // TODO(issue/24571): remove '!'.
+      disabled !: boolean;
+
+      static ngDirectiveDef = defineDirective({
+        type: OtherDisabledDir,
+        selectors: [['', 'otherDisabledDir', '']],
+        factory: () => otherDisabledDir = new OtherDisabledDir(),
+        inputs: {disabled: 'disabled'}
+      });
+    }
+
+    class IdDir {
+      // TODO(issue/24571): remove '!'.
+      idNumber !: string;
+
+      static ngDirectiveDef = defineDirective({
+        type: IdDir,
+        selectors: [['', 'idDir', '']],
+        factory: () => idDir = new IdDir(),
+        inputs: {idNumber: 'id'}
+      });
+    }
+
+
+    const deps = [MyButton, OtherDir, OtherDisabledDir, IdDir];
+
+    it('should check input properties before setting (directives)', () => {
+
+      /** <button myButton otherDir [id]="id" [disabled]="isDisabled">Click me</button> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'button', ['otherDir', '', 'myButton', '']);
+          { text(1, 'Click me'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'disabled', bind(ctx.isDisabled));
+          elementProperty(0, 'id', bind(ctx.id));
+        }
+      }
+
+      const ctx: any = {isDisabled: true, id: 0};
+      expect(renderToHtml(Template, ctx, deps))
+          .toEqual(`<button mybutton="" otherdir="">Click me</button>`);
+      expect(button !.disabled).toEqual(true);
+      expect(otherDir !.id).toEqual(0);
+
+      ctx.isDisabled = false;
+      ctx.id = 1;
+      expect(renderToHtml(Template, ctx, deps))
+          .toEqual(`<button mybutton="" otherdir="">Click me</button>`);
+      expect(button !.disabled).toEqual(false);
+      expect(otherDir !.id).toEqual(1);
+    });
+
+    it('should support mixed element properties and input properties', () => {
+
+      /** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'button', ['myButton', '']);
+          { text(1, 'Click me'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'disabled', bind(ctx.isDisabled));
+          elementProperty(0, 'id', bind(ctx.id));
+        }
+      }
+
+      const ctx: any = {isDisabled: true, id: 0};
+
+      expect(renderToHtml(Template, ctx, deps))
+          .toEqual(`<button id="0" mybutton="">Click me</button>`);
+      expect(button !.disabled).toEqual(true);
+
+      ctx.isDisabled = false;
+      ctx.id = 1;
+      expect(renderToHtml(Template, ctx, deps))
+          .toEqual(`<button id="1" mybutton="">Click me</button>`);
+      expect(button !.disabled).toEqual(false);
+    });
+
+    it('should check that property is not an input property before setting (component)', () => {
+      let comp: Comp;
+
+      class Comp {
+        // TODO(issue/24571): remove '!'.
+        id !: number;
+
+        static ngComponentDef = defineComponent({
+          type: Comp,
+          selectors: [['comp']],
+          template: function(rf: RenderFlags, ctx: any) {},
+          factory: () => comp = new Comp(),
+          inputs: {id: 'id'}
+        });
+      }
+
+      /** <comp [id]="id"></comp> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'comp');
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'id', bind(ctx.id));
+        }
+      }
+
+      const deps = [Comp];
+      expect(renderToHtml(Template, {id: 1}, deps)).toEqual(`<comp></comp>`);
+      expect(comp !.id).toEqual(1);
+
+      expect(renderToHtml(Template, {id: 2}, deps)).toEqual(`<comp></comp>`);
+      expect(comp !.id).toEqual(2);
+    });
+
+    it('should support two input properties with the same name', () => {
+
+      /** <button myButton otherDisabledDir [disabled]="isDisabled">Click me</button> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'button', ['myButton', '', 'otherDisabledDir', '']);
+          { text(1, 'Click me'); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'disabled', bind(ctx.isDisabled));
+        }
+      }
+
+      const ctx: any = {isDisabled: true};
+      expect(renderToHtml(Template, ctx, deps))
+          .toEqual(`<button mybutton="" otherdisableddir="">Click me</button>`);
+      expect(button !.disabled).toEqual(true);
+      expect(otherDisabledDir !.disabled).toEqual(true);
+
+      ctx.isDisabled = false;
+      expect(renderToHtml(Template, ctx, deps))
+          .toEqual(`<button mybutton="" otherdisableddir="">Click me</button>`);
+      expect(button !.disabled).toEqual(false);
+      expect(otherDisabledDir !.disabled).toEqual(false);
+    });
+
+    it('should set input property if there is an output first', () => {
+      /** <button otherDir [id]="id" (click)="onClick()">Click me</button> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'button', ['otherDir', '']);
+          {
+            listener('click', ctx.onClick.bind(ctx));
+            text(1, 'Click me');
+          }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'id', bind(ctx.id));
+        }
+      }
+
+      let counter = 0;
+      const ctx: any = {id: 1, onClick: () => counter++};
+      expect(renderToHtml(Template, ctx, deps)).toEqual(`<button otherdir="">Click me</button>`);
+      expect(otherDir !.id).toEqual(1);
+
+      otherDir !.clickStream.next();
+      expect(counter).toEqual(1);
+
+      ctx.id = 2;
+      renderToHtml(Template, ctx, deps);
+      expect(otherDir !.id).toEqual(2);
+    });
+
+    it('should support unrelated element properties at same index in if-else block', () => {
+      /**
+       * <button idDir [id]="id1">Click me</button>             // inputs: {'id': [0, 'idNumber']}
+       * % if (condition) {
+       *   <button [id]="id2">Click me too</button>             // inputs: null
+       * % } else {
+       *   <button otherDir [id]="id3">Click me too</button>   // inputs: {'id': [0, 'id']}
+       * % }
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'button', ['idDir', '']);
+          { text(1, 'Click me'); }
+          elementEnd();
+          container(2);
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'id', bind(ctx.id1));
+          containerRefreshStart(2);
+          {
+            if (ctx.condition) {
+              let rf0 = embeddedViewStart(0);
+              if (rf0 & RenderFlags.Create) {
+                elementStart(0, 'button');
+                { text(1, 'Click me too'); }
+                elementEnd();
+              }
+              if (rf0 & RenderFlags.Update) {
+                elementProperty(0, 'id', bind(ctx.id2));
+              }
+              embeddedViewEnd();
+            } else {
+              let rf1 = embeddedViewStart(1);
+              if (rf1 & RenderFlags.Create) {
+                elementStart(0, 'button', ['otherDir', '']);
+                { text(1, 'Click me too'); }
+                elementEnd();
+              }
+              if (rf1 & RenderFlags.Update) {
+                elementProperty(0, 'id', bind(ctx.id3));
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      expect(renderToHtml(Template, {condition: true, id1: 'one', id2: 'two', id3: 3}, deps))
+          .toEqual(`<button iddir="">Click me</button><button id="two">Click me too</button>`);
+      expect(idDir !.idNumber).toEqual('one');
+
+      expect(renderToHtml(Template, {condition: false, id1: 'four', id2: 'two', id3: 3}, deps))
+          .toEqual(`<button iddir="">Click me</button><button otherdir="">Click me too</button>`);
+      expect(idDir !.idNumber).toEqual('four');
+      expect(otherDir !.id).toEqual(3);
+    });
+
+  });
+
+  describe('attributes and input properties', () => {
+    let myDir: MyDir;
+    class MyDir {
+      // TODO(issue/24571): remove '!'.
+      role !: string;
+      // TODO(issue/24571): remove '!'.
+      direction !: string;
+      changeStream = new EventEmitter();
+
+      static ngDirectiveDef = defineDirective({
+        type: MyDir,
+        selectors: [['', 'myDir', '']],
+        factory: () => myDir = new MyDir(),
+        inputs: {role: 'role', direction: 'dir'},
+        outputs: {changeStream: 'change'},
+        exportAs: 'myDir'
+      });
+    }
+
+    let dirB: MyDirB;
+    class MyDirB {
+      // TODO(issue/24571): remove '!'.
+      roleB !: string;
+
+      static ngDirectiveDef = defineDirective({
+        type: MyDirB,
+        selectors: [['', 'myDirB', '']],
+        factory: () => dirB = new MyDirB(),
+        inputs: {roleB: 'role'}
+      });
+    }
+
+    const deps = [MyDir, MyDirB];
+
+    it('should set input property based on attribute if existing', () => {
+
+      /** <div role="button" myDir></div> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['role', 'button', 'myDir', '']);
+        }
+      }
+
+      expect(renderToHtml(Template, {}, deps)).toEqual(`<div mydir="" role="button"></div>`);
+      expect(myDir !.role).toEqual('button');
+    });
+
+    it('should set input property and attribute if both defined', () => {
+
+      /** <div role="button" [role]="role" myDir></div> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['role', 'button', 'myDir', '']);
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, 'role', bind(ctx.role));
+        }
+      }
+
+      expect(renderToHtml(Template, {role: 'listbox'}, deps))
+          .toEqual(`<div mydir="" role="button"></div>`);
+      expect(myDir !.role).toEqual('listbox');
+
+      renderToHtml(Template, {role: 'button'}, deps);
+      expect(myDir !.role).toEqual('button');
+    });
+
+    it('should set two directive input properties based on same attribute', () => {
+
+      /** <div role="button" myDir myDirB></div> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['role', 'button', 'myDir', '', 'myDirB', '']);
+        }
+      }
+
+      expect(renderToHtml(Template, {}, deps))
+          .toEqual(`<div mydir="" mydirb="" role="button"></div>`);
+      expect(myDir !.role).toEqual('button');
+      expect(dirB !.roleB).toEqual('button');
+    });
+
+    it('should process two attributes on same directive', () => {
+
+      /** <div role="button" dir="rtl" myDir></div> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']);
+        }
+      }
+
+      expect(renderToHtml(Template, {}, deps))
+          .toEqual(`<div dir="rtl" mydir="" role="button"></div>`);
+      expect(myDir !.role).toEqual('button');
+      expect(myDir !.direction).toEqual('rtl');
+    });
+
+    it('should process attributes and outputs properly together', () => {
+
+      /** <div role="button" (change)="onChange()" myDir></div> */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div', ['role', 'button', 'myDir', '']);
+          { listener('change', ctx.onChange.bind(ctx)); }
+          elementEnd();
+        }
+      }
+
+      let counter = 0;
+      expect(renderToHtml(Template, {onChange: () => counter++}, deps))
+          .toEqual(`<div mydir="" role="button"></div>`);
+      expect(myDir !.role).toEqual('button');
+
+      myDir !.changeStream.next();
+      expect(counter).toEqual(1);
+    });
+
+    it('should process attributes properly for directives with later indices', () => {
+
+      /**
+       * <div role="button" dir="rtl" myDir></div>
+       * <div role="listbox" myDirB></div>
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']);
+          element(1, 'div', ['role', 'listbox', 'myDirB', '']);
+        }
+      }
+
+      expect(renderToHtml(Template, {}, deps))
+          .toEqual(
+              `<div dir="rtl" mydir="" role="button"></div><div mydirb="" role="listbox"></div>`);
+      expect(myDir !.role).toEqual('button');
+      expect(myDir !.direction).toEqual('rtl');
+      expect(dirB !.roleB).toEqual('listbox');
+    });
+
+    it('should support attributes at same index inside an if-else block', () => {
+      /**
+       * <div role="listbox" myDir></div>          // initialInputs: [['role', 'listbox']]
+       *
+       * % if (condition) {
+       *   <div role="button" myDirB></div>       // initialInputs: [['role', 'button']]
+       * % } else {
+       *   <div role="menu"></div>               // initialInputs: [null]
+       * % }
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['role', 'listbox', 'myDir', '']);
+          container(1);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(1);
+          {
+            if (ctx.condition) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'div', ['role', 'button', 'myDirB', '']);
+              }
+              embeddedViewEnd();
+            } else {
+              let rf2 = embeddedViewStart(1);
+              if (rf2 & RenderFlags.Create) {
+                element(0, 'div', ['role', 'menu']);
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      expect(renderToHtml(Template, {condition: true}, deps))
+          .toEqual(`<div mydir="" role="listbox"></div><div mydirb="" role="button"></div>`);
+      expect(myDir !.role).toEqual('listbox');
+      expect(dirB !.roleB).toEqual('button');
+      expect((dirB !as any).role).toBeUndefined();
+
+      expect(renderToHtml(Template, {condition: false}, deps))
+          .toEqual(`<div mydir="" role="listbox"></div><div role="menu"></div>`);
+      expect(myDir !.role).toEqual('listbox');
+    });
+
+    it('should process attributes properly inside a for loop', () => {
+
+      class Comp {
+        static ngComponentDef = defineComponent({
+          type: Comp,
+          selectors: [['comp']],
+          /** <div role="button" dir #dir="myDir"></div> {{ dir.role }} */
+          template: function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              element(0, 'div', ['role', 'button', 'myDir', ''], ['dir', 'myDir']);
+              text(2);
+            }
+            if (rf & RenderFlags.Update) {
+              const tmp = reference(1) as any;
+              textBinding(2, bind(tmp.role));
+            }
+          },
+          factory: () => new Comp(),
+          directives: () => [MyDir]
+        });
+      }
+
+      /**
+       * % for (let i = 0; i < 3; i++) {
+       *     <comp></comp>
+       * % }
+       */
+      function Template(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          container(0);
+        }
+        if (rf & RenderFlags.Update) {
+          containerRefreshStart(0);
+          {
+            for (let i = 0; i < 2; i++) {
+              let rf1 = embeddedViewStart(0);
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'comp');
+              }
+              embeddedViewEnd();
+            }
+          }
+          containerRefreshEnd();
+        }
+      }
+
+      expect(renderToHtml(Template, {}, [Comp]))
+          .toEqual(
+              `<comp><div mydir="" role="button"></div>button</comp><comp><div mydir="" role="button"></div>button</comp>`);
+    });
+
+  });
+
+});
diff --git a/packages/core/test/render3/pure_function_spec.ts b/packages/core/test/render3/pure_function_spec.ts
new file mode 100644
index 000000000000..593c08cf333c
--- /dev/null
+++ b/packages/core/test/render3/pure_function_spec.ts
@@ -0,0 +1,486 @@
+/**
+ * @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 {defineComponent} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, load, loadDirective, reserveSlots} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+import {pureFunction1, pureFunction2, pureFunction3, pureFunction4, pureFunction5, pureFunction6, pureFunction7, pureFunction8, pureFunctionV} from '../../src/render3/pure_function';
+import {renderToHtml} from '../../test/render3/render_util';
+
+describe('array literals', () => {
+  let myComp: MyComp;
+
+  class MyComp {
+    // TODO(issue/24571): remove '!'.
+    names !: string[];
+
+    static ngComponentDef = defineComponent({
+      type: MyComp,
+      selectors: [['my-comp']],
+      factory: function MyComp_Factory() { return myComp = new MyComp(); },
+      template: function MyComp_Template(rf: RenderFlags, ctx: MyComp) {},
+      inputs: {names: 'names'}
+    });
+  }
+
+  const directives = [MyComp];
+
+  it('should support an array literal with a binding', () => {
+    const e0_ff = (v: any) => ['Nancy', v, 'Bess'];
+
+    /** <my-comp [names]="['Nancy', customName, 'Bess']"></my-comp> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'my-comp');
+        reserveSlots(2);
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'names', bind(pureFunction1(2, e0_ff, ctx.customName)));
+      }
+    }
+
+    renderToHtml(Template, {customName: 'Carson'}, directives);
+    const firstArray = myComp !.names;
+    expect(firstArray).toEqual(['Nancy', 'Carson', 'Bess']);
+
+    renderToHtml(Template, {customName: 'Carson'}, directives);
+    expect(myComp !.names).toEqual(['Nancy', 'Carson', 'Bess']);
+    expect(firstArray).toBe(myComp !.names);
+
+    renderToHtml(Template, {customName: 'Hannah'}, directives);
+    expect(myComp !.names).toEqual(['Nancy', 'Hannah', 'Bess']);
+
+    // Identity must change if binding changes
+    expect(firstArray).not.toBe(myComp !.names);
+
+    // The property should not be set if the exp value is the same, so artificially
+    // setting the property to ensure it's not overwritten.
+    myComp !.names = ['should not be overwritten'];
+    renderToHtml(Template, {customName: 'Hannah'}, directives);
+    expect(myComp !.names).toEqual(['should not be overwritten']);
+  });
+
+  it('should support multiple array literals passed through to one node', () => {
+    let manyPropComp: ManyPropComp;
+
+    class ManyPropComp {
+      // TODO(issue/24571): remove '!'.
+      names1 !: string[];
+      // TODO(issue/24571): remove '!'.
+      names2 !: string[];
+
+      static ngComponentDef = defineComponent({
+        type: ManyPropComp,
+        selectors: [['many-prop-comp']],
+        factory: function ManyPropComp_Factory() { return manyPropComp = new ManyPropComp(); },
+        template: function ManyPropComp_Template(rf: RenderFlags, ctx: ManyPropComp) {},
+        inputs: {names1: 'names1', names2: 'names2'}
+      });
+    }
+
+    const e0_ff = (v: any) => ['Nancy', v];
+    const e0_ff_1 = (v: any) => [v];
+
+    /**
+     * <many-prop-comp [names1]="['Nancy', customName]" [names2]="[customName2]">
+     * </many-prop-comp>
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'many-prop-comp');
+        reserveSlots(4);
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'names1', bind(pureFunction1(2, e0_ff, ctx.customName)));
+        elementProperty(0, 'names2', bind(pureFunction1(4, e0_ff_1, ctx.customName2)));
+      }
+    }
+
+    const defs = [ManyPropComp];
+    renderToHtml(Template, {customName: 'Carson', customName2: 'George'}, defs);
+    expect(manyPropComp !.names1).toEqual(['Nancy', 'Carson']);
+    expect(manyPropComp !.names2).toEqual(['George']);
+
+    renderToHtml(Template, {customName: 'George', customName2: 'Carson'}, defs);
+    expect(manyPropComp !.names1).toEqual(['Nancy', 'George']);
+    expect(manyPropComp !.names2).toEqual(['Carson']);
+  });
+
+  it('should support an array literals inside fn calls', () => {
+    let myComps: MyComp[] = [];
+
+    const e0_ff = (v: any) => ['Nancy', v];
+
+    /** <my-comp [names]="someFn(['Nancy', customName])"></my-comp> */
+    class ParentComp {
+      customName = 'Bess';
+
+      someFn(arr: string[]): string[] {
+        arr[0] = arr[0].toUpperCase();
+        return arr;
+      }
+
+      static ngComponentDef = defineComponent({
+        type: ParentComp,
+        selectors: [['parent-comp']],
+        factory: () => new ParentComp(),
+        template: function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'my-comp');
+            myComps.push(loadDirective(0));
+            elementEnd();
+            reserveSlots(2);
+          }
+          if (rf & RenderFlags.Update) {
+            elementProperty(0, 'names', bind(ctx.someFn(pureFunction1(2, e0_ff, ctx.customName))));
+          }
+        },
+        directives: directives
+      });
+    }
+
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'parent-comp');
+        element(1, 'parent-comp');
+      }
+    }
+
+    renderToHtml(Template, {}, [ParentComp]);
+    const firstArray = myComps[0].names;
+    const secondArray = myComps[1].names;
+    expect(firstArray).toEqual(['NANCY', 'Bess']);
+    expect(secondArray).toEqual(['NANCY', 'Bess']);
+    expect(firstArray).not.toBe(secondArray);
+
+    renderToHtml(Template, {}, [ParentComp]);
+    expect(firstArray).toEqual(['NANCY', 'Bess']);
+    expect(secondArray).toEqual(['NANCY', 'Bess']);
+    expect(firstArray).toBe(myComps[0].names);
+    expect(secondArray).toBe(myComps[1].names);
+  });
+
+  it('should support an array literal with more than 1 binding', () => {
+    const e0_ff = (v1: any, v2: any) => ['Nancy', v1, 'Bess', v2];
+
+    /** <my-comp [names]="['Nancy', customName, 'Bess', customName2]"></my-comp> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'my-comp');
+        reserveSlots(3);
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'names', bind(pureFunction2(3, e0_ff, ctx.customName, ctx.customName2)));
+      }
+    }
+
+    renderToHtml(Template, {customName: 'Carson', customName2: 'Hannah'}, directives);
+    const firstArray = myComp !.names;
+    expect(firstArray).toEqual(['Nancy', 'Carson', 'Bess', 'Hannah']);
+
+    renderToHtml(Template, {customName: 'Carson', customName2: 'Hannah'}, directives);
+    expect(myComp !.names).toEqual(['Nancy', 'Carson', 'Bess', 'Hannah']);
+    expect(firstArray).toBe(myComp !.names);
+
+    renderToHtml(Template, {customName: 'George', customName2: 'Hannah'}, directives);
+    expect(myComp !.names).toEqual(['Nancy', 'George', 'Bess', 'Hannah']);
+    expect(firstArray).not.toBe(myComp !.names);
+
+    renderToHtml(Template, {customName: 'Frank', customName2: 'Ned'}, directives);
+    expect(myComp !.names).toEqual(['Nancy', 'Frank', 'Bess', 'Ned']);
+
+    // The property should not be set if the exp value is the same, so artificially
+    // setting the property to ensure it's not overwritten.
+    myComp !.names = ['should not be overwritten'];
+    renderToHtml(Template, {customName: 'Frank', customName2: 'Ned'}, directives);
+    expect(myComp !.names).toEqual(['should not be overwritten']);
+  });
+
+  it('should work up to 8 bindings', () => {
+    let f3Comp: MyComp;
+    let f4Comp: MyComp;
+    let f5Comp: MyComp;
+    let f6Comp: MyComp;
+    let f7Comp: MyComp;
+    let f8Comp: MyComp;
+
+
+    const e0_ff = (v1: any, v2: any, v3: any) => ['a', 'b', 'c', 'd', 'e', v1, v2, v3];
+    const e2_ff = (v1: any, v2: any, v3: any, v4: any) => ['a', 'b', 'c', 'd', v1, v2, v3, v4];
+    const e4_ff =
+        (v1: any, v2: any, v3: any, v4: any, v5: any) => ['a', 'b', 'c', v1, v2, v3, v4, v5];
+    const e6_ff =
+        (v1: any, v2: any, v3: any, v4: any, v5: any,
+         v6: any) => ['a', 'b', v1, v2, v3, v4, v5, v6];
+    const e8_ff =
+        (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any,
+         v7: any) => ['a', v1, v2, v3, v4, v5, v6, v7];
+    const e10_ff =
+        (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any,
+         v8: any) => [v1, v2, v3, v4, v5, v6, v7, v8];
+
+    function Template(rf: RenderFlags, c: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'my-comp');
+        f3Comp = loadDirective(0);
+        elementEnd();
+        elementStart(1, 'my-comp');
+        f4Comp = loadDirective(1);
+        elementEnd();
+        elementStart(2, 'my-comp');
+        f5Comp = loadDirective(2);
+        elementEnd();
+        elementStart(3, 'my-comp');
+        f6Comp = loadDirective(3);
+        elementEnd();
+        elementStart(4, 'my-comp');
+        f7Comp = loadDirective(4);
+        elementEnd();
+        elementStart(5, 'my-comp');
+        f8Comp = loadDirective(5);
+        elementEnd();
+        reserveSlots(39);
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'names', bind(pureFunction3(4, e0_ff, c[5], c[6], c[7])));
+        elementProperty(1, 'names', bind(pureFunction4(9, e2_ff, c[4], c[5], c[6], c[7])));
+        elementProperty(2, 'names', bind(pureFunction5(15, e4_ff, c[3], c[4], c[5], c[6], c[7])));
+        elementProperty(
+            3, 'names', bind(pureFunction6(22, e6_ff, c[2], c[3], c[4], c[5], c[6], c[7])));
+        elementProperty(
+            4, 'names', bind(pureFunction7(30, e8_ff, c[1], c[2], c[3], c[4], c[5], c[6], c[7])));
+        elementProperty(
+            5, 'names',
+            bind(pureFunction8(39, e10_ff, c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7])));
+      }
+    }
+
+    renderToHtml(Template, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], directives);
+    expect(f3Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
+    expect(f4Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
+    expect(f5Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
+    expect(f6Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
+    expect(f7Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
+    expect(f8Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
+
+    renderToHtml(Template, ['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1', 'i1'], directives);
+    expect(f3Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f1', 'g1', 'h1']);
+    expect(f4Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e1', 'f1', 'g1', 'h1']);
+    expect(f5Comp !.names).toEqual(['a', 'b', 'c', 'd1', 'e1', 'f1', 'g1', 'h1']);
+    expect(f6Comp !.names).toEqual(['a', 'b', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1']);
+    expect(f7Comp !.names).toEqual(['a', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1']);
+    expect(f8Comp !.names).toEqual(['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1']);
+
+    renderToHtml(Template, ['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h2', 'i1'], directives);
+    expect(f3Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f1', 'g1', 'h2']);
+    expect(f4Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e1', 'f1', 'g1', 'h2']);
+    expect(f5Comp !.names).toEqual(['a', 'b', 'c', 'd1', 'e1', 'f1', 'g1', 'h2']);
+    expect(f6Comp !.names).toEqual(['a', 'b', 'c1', 'd1', 'e1', 'f1', 'g1', 'h2']);
+    expect(f7Comp !.names).toEqual(['a', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h2']);
+    expect(f8Comp !.names).toEqual(['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h2']);
+  });
+
+  it('should work with pureFunctionV for 9+ bindings', () => {
+    const e0_ff =
+        (v0: any, v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any,
+         v8: any) => ['start', v0, v1, v2, v3, v4, v5, v6, v7, v8, 'end'];
+    const e0_ff_1 = (v: any) => `modified_${v}`;
+
+    renderToHtml(Template, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], directives);
+    /**
+     * <my-comp [names]="['start', v0, v1, v2, v3, `modified_${v4}`, v5, v6, v7, v8, 'end']">
+     * </my-comp>
+     */
+    function Template(rf: RenderFlags, c: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'my-comp');
+        reserveSlots(12);
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(
+            0, 'names', bind(pureFunctionV(12, e0_ff, [
+              c[0], c[1], c[2], c[3], pureFunction1(2, e0_ff_1, c[4]), c[5], c[6], c[7], c[8]
+            ])));
+      }
+    }
+
+    expect(myComp !.names).toEqual([
+      'start', 'a', 'b', 'c', 'd', 'modified_e', 'f', 'g', 'h', 'i', 'end'
+    ]);
+
+    renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], directives);
+    expect(myComp !.names).toEqual([
+      'start', 'a1', 'b', 'c', 'd', 'modified_e', 'f', 'g', 'h', 'i', 'end'
+    ]);
+
+    renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e5', 'f', 'g', 'h', 'i'], directives);
+    expect(myComp !.names).toEqual([
+      'start', 'a1', 'b', 'c', 'd', 'modified_e5', 'f', 'g', 'h', 'i', 'end'
+    ]);
+  });
+
+});
+describe('object literals', () => {
+  let objectComp: ObjectComp;
+
+  class ObjectComp {
+    // TODO(issue/24571): remove '!'.
+    config !: {[key: string]: any};
+
+    static ngComponentDef = defineComponent({
+      type: ObjectComp,
+      selectors: [['object-comp']],
+      factory: function ObjectComp_Factory() { return objectComp = new ObjectComp(); },
+      template: function ObjectComp_Template(rf: RenderFlags, ctx: ObjectComp) {},
+      inputs: {config: 'config'}
+    });
+  }
+
+  const defs = [ObjectComp];
+
+  it('should support an object literal', () => {
+    const e0_ff = (v: any) => { return {duration: 500, animation: v}; };
+
+    /** <object-comp [config]="{duration: 500, animation: name}"></object-comp> */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'object-comp');
+        reserveSlots(2);
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(0, 'config', bind(pureFunction1(2, e0_ff, ctx.name)));
+      }
+    }
+
+    renderToHtml(Template, {name: 'slide'}, defs);
+    const firstObj = objectComp !.config;
+    expect(objectComp !.config).toEqual({duration: 500, animation: 'slide'});
+
+    renderToHtml(Template, {name: 'slide'}, defs);
+    expect(objectComp !.config).toEqual({duration: 500, animation: 'slide'});
+    expect(firstObj).toBe(objectComp !.config);
+
+    renderToHtml(Template, {name: 'tap'}, defs);
+    expect(objectComp !.config).toEqual({duration: 500, animation: 'tap'});
+
+    // Identity must change if binding changes
+    expect(firstObj).not.toBe(objectComp !.config);
+  });
+
+  it('should support expressions nested deeply in object/array literals', () => {
+    const e0_ff = (v1: any, v2: any) => { return {animation: v1, actions: v2}; };
+    const e0_ff_1 = (v: any) => [{opacity: 0, duration: 0}, v];
+    const e0_ff_2 = (v: any) => { return {opacity: 1, duration: v}; };
+
+    /**
+     * <object-comp [config]="{animation: name, actions: [{ opacity: 0, duration: 0}, {opacity: 1,
+     * duration: duration }]}">
+     * </object-comp>
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'object-comp');
+        reserveSlots(7);
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(
+            0, 'config', bind(pureFunction2(
+                             7, e0_ff, ctx.name,
+                             pureFunction1(4, e0_ff_1, pureFunction1(2, e0_ff_2, ctx.duration)))));
+      }
+    }
+
+    renderToHtml(Template, {name: 'slide', duration: 100}, defs);
+    expect(objectComp !.config).toEqual({
+      animation: 'slide',
+      actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 100}]
+    });
+    const firstConfig = objectComp !.config;
+
+    renderToHtml(Template, {name: 'slide', duration: 100}, defs);
+    expect(objectComp !.config).toEqual({
+      animation: 'slide',
+      actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 100}]
+    });
+    expect(objectComp !.config).toBe(firstConfig);
+
+    renderToHtml(Template, {name: 'slide', duration: 50}, defs);
+    expect(objectComp !.config).toEqual({
+      animation: 'slide',
+      actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 50}]
+    });
+    expect(objectComp !.config).not.toBe(firstConfig);
+
+    renderToHtml(Template, {name: 'tap', duration: 50}, defs);
+    expect(objectComp !.config).toEqual({
+      animation: 'tap',
+      actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 50}]
+    });
+
+    renderToHtml(Template, {name: 'drag', duration: 500}, defs);
+    expect(objectComp !.config).toEqual({
+      animation: 'drag',
+      actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 500}]
+    });
+
+    // The property should not be set if the exp value is the same, so artificially
+    // setting the property to ensure it's not overwritten.
+    objectComp !.config = ['should not be overwritten'];
+    renderToHtml(Template, {name: 'drag', duration: 500}, defs);
+    expect(objectComp !.config).toEqual(['should not be overwritten']);
+  });
+
+  it('should support multiple view instances with multiple bindings', () => {
+    let objectComps: ObjectComp[] = [];
+
+    /**
+     * % for(let i = 0; i < 2; i++) {
+     *   <object-comp [config]="{opacity: configs[i].opacity, duration: configs[i].duration}">
+     *   </object-comp>
+     * % }
+     */
+    function Template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        container(0);
+      }
+      if (rf & RenderFlags.Update) {
+        containerRefreshStart(0);
+        {
+          for (let i = 0; i < 2; i++) {
+            let rf1 = embeddedViewStart(0);
+            if (rf1 & RenderFlags.Create) {
+              elementStart(0, 'object-comp');
+              objectComps.push(loadDirective(0));
+              elementEnd();
+              reserveSlots(3);
+            }
+            if (rf1 & RenderFlags.Update) {
+              elementProperty(
+                  0, 'config',
+                  bind(pureFunction2(3, e0_ff, ctx.configs[i].opacity, ctx.configs[i].duration)));
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+    }
+
+    const e0_ff = (v1: any, v2: any) => { return {opacity: v1, duration: v2}; };
+
+    const configs = [{opacity: 0, duration: 500}, {opacity: 1, duration: 600}];
+    renderToHtml(Template, {configs}, defs);
+    expect(objectComps[0].config).toEqual({opacity: 0, duration: 500});
+    expect(objectComps[1].config).toEqual({opacity: 1, duration: 600});
+
+    configs[0].duration = 1000;
+    renderToHtml(Template, {configs}, defs);
+    expect(objectComps[0].config).toEqual({opacity: 0, duration: 1000});
+    expect(objectComps[1].config).toEqual({opacity: 1, duration: 600});
+  });
+
+});
diff --git a/packages/core/test/render3/query_list_spec.ts b/packages/core/test/render3/query_list_spec.ts
new file mode 100644
index 000000000000..59e397304794
--- /dev/null
+++ b/packages/core/test/render3/query_list_spec.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 {QueryList} from '../../src/render3/query';
+
+describe('QueryList', () => {
+  let q: QueryList<number>;
+
+  beforeEach(() => { q = new QueryList<number>(); });
+
+  describe('dirty and reset', () => {
+
+    it('should be dirty and empty initially', () => {
+      expect(q.dirty).toBeTruthy();
+      expect(q.length).toBe(0);
+    });
+
+    it('should be not dirty after reset', () => {
+      expect(q.dirty).toBeTruthy();
+      q.reset([1, 2, 3]);
+      expect(q.dirty).toBeFalsy();
+      expect(q.length).toBe(3);
+    });
+
+  });
+
+  describe('elements access', () => {
+
+    it('should give access to the first / last element', () => {
+      q.reset([1, 2, 3]);
+      expect(q.length).toBe(3);
+      expect(q.first).toBe(1);
+      expect(q.last).toBe(3);
+    });
+
+    it('should return copy of matched elements as an array', () => {
+      q.reset([1, 2, 3]);
+
+      const result = q.toArray();
+      expect(result).toEqual([1, 2, 3]);
+
+      // mutate returned result to make sure that oryginal values in query are not mutated
+      result.push(4);
+      expect(q.toArray()).toEqual([1, 2, 3]);
+    });
+
+  });
+
+  describe('array-like methods', () => {
+
+    it('should support map method', () => {
+      q.reset([1, 2, 3]);
+      expect(q.map<number>((item: number, idx: number) => {
+        return item + idx;
+      })).toEqual([1, 3, 5]);
+    });
+
+    it('should support filter method', () => {
+      q.reset([1, 2, 3]);
+      expect(q.filter((item: number, idx: number) => { return item > 2; })).toEqual([3]);
+    });
+
+    it('should support find method', () => {
+      q.reset([1, 2, 3]);
+      expect(q.find((item: number, idx: number) => { return item > 0; })).toBe(1);
+    });
+
+    it('should support reduce method', () => {
+      q.reset([1, 2, 3]);
+      expect(q.reduce<number>((prevValue: number, curValue: number, curIndex: number) => {
+        return prevValue + curValue + curIndex;
+      }, 0)).toBe(9);
+    });
+
+    it('should support forEach method', () => {
+      let itemIdxSum = 0;
+      q.reset([1, 2, 3]);
+      q.forEach((item: number, idx: number) => { itemIdxSum += item + idx; });
+      expect(itemIdxSum).toBe(9);
+    });
+
+    it('should support some method', () => {
+      q.reset([1, 2, 3]);
+      expect(q.some((item: number, idx: number) => { return item > 0; })).toBe(true);
+    });
+
+  });
+
+  describe('destroy', () => {
+    it('should close all subscriptions', () => {
+      let completed = false;
+      q.changes.subscribe(() => {}, () => {}, () => { completed = true; });
+      q.destroy();
+      expect(completed).toBeTruthy();
+    });
+  });
+});
diff --git a/packages/core/test/render3/query_spec.ts b/packages/core/test/render3/query_spec.ts
new file mode 100644
index 000000000000..74195c6dd67d
--- /dev/null
+++ b/packages/core/test/render3/query_spec.ts
@@ -0,0 +1,2241 @@
+/**
+ * @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 {NgForOfContext} from '@angular/common';
+import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
+
+import {EventEmitter} from '../..';
+import {QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF, getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from '../../src/render3/di';
+import {AttributeMarker, QueryList, defineComponent, defineDirective, detectChanges, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, load, loadDirective, loadElement, loadQueryList, registerContentQuery} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+import {query, queryRefresh} from '../../src/render3/query';
+
+import {NgForOf, NgIf, NgTemplateOutlet} from './common_with_def';
+import {ComponentFixture, TemplateFixture, createComponent, createDirective, renderComponent} from './render_util';
+
+
+
+/**
+ * Helper function to check if a given candidate object resembles ElementRef
+ * @param candidate
+ * @returns true if `ElementRef`.
+ */
+function isElementRef(candidate: any): boolean {
+  return candidate.nativeElement != null;
+}
+
+/**
+ * Helper function to check if a given candidate object resembles TemplateRef
+ * @param candidate
+ * @returns true if `TemplateRef`.
+ */
+function isTemplateRef(candidate: any): boolean {
+  return candidate.createEmbeddedView != null && candidate.createComponent == null;
+}
+
+/**
+ * Helper function to check if a given candidate object resembles ViewContainerRef
+ * @param candidate
+ * @returns true if `ViewContainerRef`.
+ */
+function isViewContainerRef(candidate: any): boolean {
+  return candidate.createEmbeddedView != null && candidate.createComponent != null;
+}
+
+describe('query', () => {
+  it('should match projected query children', () => {
+    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {});
+
+    let child1 = null;
+    let child2 = null;
+    const Cmp = createComponent(
+        'cmp',
+        function(rf: RenderFlags, ctx: any) {
+          /**
+           * <child>
+           *   <child>
+           *   </child>
+           * </child>
+           * class Cmp {
+           *   @ViewChildren(Child) query0;
+           *   @ViewChildren(Child, {descend: true}) query1;
+           * }
+           */
+          if (rf & RenderFlags.Create) {
+            elementStart(2, 'child');
+            { element(3, 'child'); }
+            elementEnd();
+          }
+          if (rf & RenderFlags.Update) {
+            child1 = loadDirective(0);
+            child2 = loadDirective(1);
+          }
+        },
+        [Child], [],
+        function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            query(0, Child, false);
+            query(1, Child, true);
+          }
+          if (rf & RenderFlags.Update) {
+            let tmp: any;
+            queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query0 = tmp as QueryList<any>);
+            queryRefresh(tmp = load<QueryList<any>>(1)) && (ctx.query1 = tmp as QueryList<any>);
+          }
+        });
+
+    const parent = renderComponent(Cmp);
+    expect((parent.query0 as QueryList<any>).toArray()).toEqual([child1]);
+    expect((parent.query1 as QueryList<any>).toArray()).toEqual([child1, child2]);
+  });
+
+  describe('predicate', () => {
+    describe('types', () => {
+
+      it('should query using type predicate and read a specified token', () => {
+        const Child = createDirective('child');
+        let elToQuery;
+        /**
+         * <div child></div>
+         * class Cmpt {
+         *  @ViewChildren(Child, {read: ElementRef}) query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'div', ['child', '']);
+                elToQuery = loadElement(1).native;
+              }
+            },
+            [Child], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, Child, false, QUERY_READ_ELEMENT_REF);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(isElementRef(qList.first)).toBeTruthy();
+        expect(qList.first.nativeElement).toBe(elToQuery);
+      });
+
+      it('should query using type predicate and read another directive type', () => {
+        const Child = createDirective('child');
+        const OtherChild = createDirective('otherChild');
+        let otherChildInstance;
+        /**
+         * <div child otherChild></div>
+         * class Cmpt {
+         *  @ViewChildren(Child, {read: OtherChild}) query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                elementStart(1, 'div', ['child', '', 'otherChild', '']);
+                { otherChildInstance = loadDirective(1); }
+                elementEnd();
+              }
+            },
+            [Child, OtherChild], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, Child, false, OtherChild);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(qList.first).toBe(otherChildInstance);
+      });
+
+      it('should not add results to query if a requested token cant be read', () => {
+        const Child = createDirective('child');
+        const OtherChild = createDirective('otherChild');
+        /**
+         * <div child></div>
+         * class Cmpt {
+         *  @ViewChildren(Child, {read: OtherChild}) query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'div', ['child', '']);
+              }
+            },
+            [Child, OtherChild], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, Child, false, OtherChild);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(0);
+      });
+    });
+
+    describe('local names', () => {
+
+      it('should query for a single element and read ElementRef by default', () => {
+
+        let elToQuery;
+        /**
+         * <div #foo></div>
+         * <div></div>
+         * class Cmpt {
+         *  @ViewChildren('foo') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'div', null, ['foo', '']);
+                elToQuery = loadElement(1).native;
+                element(3, 'div');
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], false, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(qList.first.nativeElement).toEqual(elToQuery);
+      });
+
+      it('should query multiple locals on the same element', () => {
+        let elToQuery;
+
+        /**
+         * <div #foo #bar></div>
+         * <div></div>
+         * class Cmpt {
+         *  @ViewChildren('foo') fooQuery;
+         *  @ViewChildren('bar') barQuery;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(2, 'div', null, ['foo', '', 'bar', '']);
+                elToQuery = loadElement(2).native;
+                element(5, 'div');
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], false, QUERY_READ_FROM_NODE);
+                query(1, ['bar'], false, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) &&
+                    (ctx.fooQuery = tmp as QueryList<any>);
+                queryRefresh(tmp = load<QueryList<any>>(1)) &&
+                    (ctx.barQuery = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+
+        const fooList = (cmptInstance.fooQuery as QueryList<any>);
+        expect(fooList.length).toBe(1);
+        expect(fooList.first.nativeElement).toEqual(elToQuery);
+
+        const barList = (cmptInstance.barQuery as QueryList<any>);
+        expect(barList.length).toBe(1);
+        expect(barList.first.nativeElement).toEqual(elToQuery);
+      });
+
+      it('should query for multiple elements and read ElementRef by default', () => {
+
+        let el1ToQuery;
+        let el2ToQuery;
+        /**
+         * <div #foo></div>
+         * <div></div>
+         * <div #bar></div>
+         * class Cmpt {
+         *  @ViewChildren('foo,bar') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'div', null, ['foo', '']);
+                el1ToQuery = loadElement(1).native;
+                element(3, 'div');
+                element(4, 'div', null, ['bar', '']);
+                el2ToQuery = loadElement(4).native;
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(2);
+        expect(qList.first.nativeElement).toEqual(el1ToQuery);
+        expect(qList.last.nativeElement).toEqual(el2ToQuery);
+      });
+
+      it('should read ElementRef from an element when explicitly asked for', () => {
+
+        let elToQuery;
+        /**
+         * <div #foo></div>
+         * <div></div>
+         * class Cmpt {
+         *  @ViewChildren('foo', {read: ElementRef}) query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'div', null, ['foo', '']);
+                elToQuery = loadElement(1).native;
+                element(3, 'div');
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], false, QUERY_READ_ELEMENT_REF);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(isElementRef(qList.first)).toBeTruthy();
+        expect(qList.first.nativeElement).toEqual(elToQuery);
+      });
+
+      it('should query for <ng-container> and read ElementRef with a native element pointing to comment node',
+         () => {
+           let elToQuery;
+           /**
+            * <ng-container #foo></ng-container>
+            * class Cmpt {
+            *  @ViewChildren('foo') query;
+            * }
+            */
+           const Cmpt = createComponent(
+               'cmpt',
+               function(rf: RenderFlags, ctx: any) {
+                 if (rf & RenderFlags.Create) {
+                   elementContainerStart(1, null, ['foo', '']);
+                   elToQuery = loadElement(1).native;
+                   elementContainerEnd();
+                 }
+               },
+               [], [],
+               function(rf: RenderFlags, ctx: any) {
+                 if (rf & RenderFlags.Create) {
+                   query(0, ['foo'], false, QUERY_READ_ELEMENT_REF);
+                 }
+                 if (rf & RenderFlags.Update) {
+                   let tmp: any;
+                   queryRefresh(tmp = load<QueryList<any>>(0)) &&
+                       (ctx.query = tmp as QueryList<any>);
+                 }
+               });
+
+           const cmptInstance = renderComponent(Cmpt);
+           const qList = (cmptInstance.query as QueryList<any>);
+           expect(qList.length).toBe(1);
+           expect(isElementRef(qList.first)).toBeTruthy();
+           expect(qList.first.nativeElement).toEqual(elToQuery);
+         });
+
+      /**
+       * BREAKING CHANGE: this tests asserts different behaviour as compared to Renderer2 when it
+       * comes to descendants: false option and <ng-container>.
+       *
+       * Previous behaviour: queries with descendants: false would descend into <ng-container>.
+       * New behaviour: queries with descendants: false would NOT descend into <ng-container>.
+       *
+       * Reasoning: the Renderer2 behaviour is inconsistent and hard to explain to users when it
+       * comes to descendants: false interpretation (see
+       * https://github.com/angular/angular/issues/14769#issuecomment-356609267) so we are changing
+       * it in ngIvy.
+       *
+       * In ngIvy implementation queries with the descendants: false option are interpreted as
+       * "don't descend" into children of a given element when looking for matches. In other words
+       * only direct children of a given component / directive are checked for matches. This applies
+       * to both regular elements (ex. <div>) and grouping elements (<ng-container>,
+       * <ng-template>)).
+       *
+       * Grouping elements (<ng-container>, <ng-template>) are treated as regular elements since we
+       * can query for <ng-container> and <ng-template>, so they behave like regular elements from
+       * this point of view.
+       */
+      it('should not descend into <ng-container> when descendants: false', () => {
+        let elToQuery;
+
+        /**
+          * <ng-container>
+          *    <div #foo></div>
+          * </ng-container>
+          * class Cmpt {
+          *  @ViewChildren('foo') deep;
+          *  @ViewChildren('foo', {descendants: false}) shallow;
+          * }
+          */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                elementContainerStart(2);
+                {
+                  element(3, 'div', null, ['foo', '']);
+                  elToQuery = loadElement(3).native;
+                }
+                elementContainerEnd();
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_ELEMENT_REF);
+                query(1, ['foo'], false, QUERY_READ_ELEMENT_REF);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.deep = tmp as QueryList<any>);
+                queryRefresh(tmp = load<QueryList<any>>(1)) &&
+                    (ctx.shallow = tmp as QueryList<any>);
+              }
+            });
+
+        const fixture = new ComponentFixture(Cmpt);
+        const deepQList = fixture.component.deep;
+        const shallowQList = fixture.component.shallow;
+        expect(deepQList.length).toBe(1);
+        expect(shallowQList.length).toBe(0);
+      });
+
+      it('should read ViewContainerRef from element nodes when explicitly asked for', () => {
+        /**
+         * <div #foo></div>
+         * class Cmpt {
+         *  @ViewChildren('foo', {read: ViewContainerRef}) query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'div', null, ['foo', '']);
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], false, QUERY_READ_CONTAINER_REF);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(isViewContainerRef(qList.first)).toBeTruthy();
+      });
+
+      it('should read ViewContainerRef from container nodes when explicitly asked for', () => {
+        /**
+         * <ng-template #foo></ng-template>
+         * class Cmpt {
+         *  @ViewChildren('foo', {read: ViewContainerRef}) query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                container(1, null, null, null, ['foo', '']);
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], false, QUERY_READ_CONTAINER_REF);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(isViewContainerRef(qList.first)).toBeTruthy();
+      });
+
+      it('should read ElementRef with a native element pointing to comment DOM node from containers',
+         () => {
+           /**
+            * <ng-template #foo></ng-template>
+            * class Cmpt {
+            *  @ViewChildren('foo', {read: ElementRef}) query;
+            * }
+            */
+           const Cmpt = createComponent(
+               'cmpt',
+               function(rf: RenderFlags, ctx: any) {
+                 if (rf & RenderFlags.Create) {
+                   container(1, null, null, null, ['foo', '']);
+                 }
+               },
+               [], [],
+               function(rf: RenderFlags, ctx: any) {
+
+                 if (rf & RenderFlags.Create) {
+                   query(0, ['foo'], false, QUERY_READ_ELEMENT_REF);
+                 }
+                 if (rf & RenderFlags.Update) {
+                   let tmp: any;
+                   queryRefresh(tmp = load<QueryList<any>>(0)) &&
+                       (ctx.query = tmp as QueryList<any>);
+                 }
+               });
+
+           const cmptInstance = renderComponent(Cmpt);
+           const qList = (cmptInstance.query as QueryList<any>);
+           expect(qList.length).toBe(1);
+           expect(isElementRef(qList.first)).toBeTruthy();
+           expect(qList.first.nativeElement.nodeType).toBe(8);  // Node.COMMENT_NODE = 8
+         });
+
+      it('should read TemplateRef from container nodes by default', () => {
+        // http://plnkr.co/edit/BVpORly8wped9I3xUYsX?p=preview
+        /**
+         * <ng-template #foo></ng-template>
+         * class Cmpt {
+         *  @ViewChildren('foo') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                container(1, null, null, null, ['foo', '']);
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], undefined, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(isTemplateRef(qList.first)).toBeTruthy();
+      });
+
+
+      it('should read TemplateRef from container nodes when explicitly asked for', () => {
+        /**
+         * <ng-template #foo></ng-template>
+         * class Cmpt {
+         *  @ViewChildren('foo', {read: TemplateRef}) query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                container(1, null, null, null, ['foo', '']);
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], false, QUERY_READ_TEMPLATE_REF);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(isTemplateRef(qList.first)).toBeTruthy();
+      });
+
+      it('should read component instance if element queried for is a component host', () => {
+        const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {});
+
+        let childInstance;
+        /**
+         * <child #foo></child>
+         * class Cmpt {
+         *  @ViewChildren('foo') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'child', null, ['foo', '']);
+              }
+              if (rf & RenderFlags.Update) {
+                childInstance = loadDirective(0);
+              }
+            },
+            [Child], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(qList.first).toBe(childInstance);
+      });
+
+      it('should read component instance with explicit exportAs', () => {
+        let childInstance: Child;
+
+        class Child {
+          static ngComponentDef = defineComponent({
+            type: Child,
+            selectors: [['child']],
+            factory: () => childInstance = new Child(),
+            template: (rf: RenderFlags, ctx: Child) => {},
+            exportAs: 'child'
+          });
+        }
+
+        /**
+         * <child #foo="child"></child>
+         * class Cmpt {
+         *  @ViewChildren('foo') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'child', null, ['foo', 'child']);
+              }
+            },
+            [Child], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(qList.first).toBe(childInstance !);
+      });
+
+      it('should read directive instance if element queried for has an exported directive with a matching name',
+         () => {
+           const Child = createDirective('child', {exportAs: 'child'});
+
+           let childInstance;
+           /**
+            * <div #foo="child" child></div>
+            * class Cmpt {
+            *  @ViewChildren('foo') query;
+            * }
+            */
+           const Cmpt = createComponent(
+               'cmpt',
+               function(rf: RenderFlags, ctx: any) {
+                 if (rf & RenderFlags.Create) {
+                   element(1, 'div', ['child', ''], ['foo', 'child']);
+                 }
+                 if (rf & RenderFlags.Update) {
+                   childInstance = loadDirective(0);
+                 }
+               },
+               [Child], [],
+               function(rf: RenderFlags, ctx: any) {
+                 if (rf & RenderFlags.Create) {
+                   query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+                 }
+                 if (rf & RenderFlags.Update) {
+                   let tmp: any;
+                   queryRefresh(tmp = load<QueryList<any>>(0)) &&
+                       (ctx.query = tmp as QueryList<any>);
+                 }
+               });
+
+           const cmptInstance = renderComponent(Cmpt);
+           const qList = (cmptInstance.query as QueryList<any>);
+           expect(qList.length).toBe(1);
+           expect(qList.first).toBe(childInstance);
+         });
+
+      it('should read all matching directive instances from a given element', () => {
+        const Child1 = createDirective('child1', {exportAs: 'child1'});
+        const Child2 = createDirective('child2', {exportAs: 'child2'});
+
+        let child1Instance, child2Instance;
+        /**
+         * <div #foo="child1" child1 #bar="child2" child2></div>
+         * class Cmpt {
+         *  @ViewChildren('foo, bar') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'div', ['child1', '', 'child2', ''], ['foo', 'child1', 'bar', 'child2']);
+              }
+              if (rf & RenderFlags.Update) {
+                child1Instance = loadDirective(0);
+                child2Instance = loadDirective(1);
+              }
+            },
+            [Child1, Child2], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(2);
+        expect(qList.first).toBe(child1Instance);
+        expect(qList.last).toBe(child2Instance);
+      });
+
+      it('should read multiple locals exporting the same directive from a given element', () => {
+        const Child = createDirective('child', {exportAs: 'child'});
+        let childInstance;
+
+        /**
+         * <div child #foo="child" #bar="child"></div>
+         * class Cmpt {
+         *  @ViewChildren('foo') fooQuery;
+         *  @ViewChildren('bar') barQuery;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(2, 'div', ['child', ''], ['foo', 'child', 'bar', 'child']);
+              }
+              if (rf & RenderFlags.Update) {
+                childInstance = loadDirective(0);
+              }
+            },
+            [Child], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+                query(1, ['bar'], true, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) &&
+                    (ctx.fooQuery = tmp as QueryList<any>);
+                queryRefresh(tmp = load<QueryList<any>>(1)) &&
+                    (ctx.barQuery = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+
+        const fooList = cmptInstance.fooQuery as QueryList<any>;
+        expect(fooList.length).toBe(1);
+        expect(fooList.first).toBe(childInstance);
+
+        const barList = cmptInstance.barQuery as QueryList<any>;
+        expect(barList.length).toBe(1);
+        expect(barList.first).toBe(childInstance);
+      });
+
+      it('should match on exported directive name and read a requested token', () => {
+        const Child = createDirective('child', {exportAs: 'child'});
+
+        let div;
+        /**
+         * <div #foo="child" child></div>
+         * class Cmpt {
+         *  @ViewChildren('foo', {read: ElementRef}) query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'div', ['child', ''], ['foo', 'child']);
+                div = loadElement(1).native;
+              }
+            },
+            [Child], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], undefined, QUERY_READ_ELEMENT_REF);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(1);
+        expect(qList.first.nativeElement).toBe(div);
+      });
+
+      it('should support reading a mix of ElementRef and directive instances', () => {
+        const Child = createDirective('child', {exportAs: 'child'});
+
+        let childInstance, div;
+        /**
+         * <div #foo #bar="child" child></div>
+         * class Cmpt {
+         *  @ViewChildren('foo, bar') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'div', ['child', ''], ['foo', '', 'bar', 'child']);
+                div = loadElement(1).native;
+              }
+              if (rf & RenderFlags.Update) {
+                childInstance = loadDirective(0);
+              }
+            },
+            [Child], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(2);
+        expect(qList.first.nativeElement).toBe(div);
+        expect(qList.last).toBe(childInstance);
+      });
+
+      it('should not add results to query if a requested token cant be read', () => {
+        const Child = createDirective('child');
+
+        /**
+         * <div #foo></div>
+         * class Cmpt {
+         *  @ViewChildren('foo', {read: Child}) query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                element(1, 'div', ['foo', '']);
+              }
+            },
+            [Child], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], false, Child);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as QueryList<any>);
+        expect(qList.length).toBe(0);
+      });
+
+    });
+  });
+
+  describe('view boundaries', () => {
+
+    describe('ViewContainerRef', () => {
+
+      let directiveInstances: ViewContainerManipulatorDirective[] = [];
+
+      class ViewContainerManipulatorDirective {
+        static ngDirectiveDef = defineDirective({
+          type: ViewContainerManipulatorDirective,
+          selectors: [['', 'vc', '']],
+          factory: () => {
+            const directiveInstance =
+                new ViewContainerManipulatorDirective(injectViewContainerRef());
+            directiveInstances.push(directiveInstance);
+            return directiveInstance;
+          }
+        });
+
+        constructor(private _vcRef: ViewContainerRef) {}
+
+        insertTpl(tpl: TemplateRef<{}>, ctx: {}, idx?: number) {
+          this._vcRef.createEmbeddedView(tpl, ctx, idx);
+        }
+
+        remove(index?: number) { this._vcRef.remove(index); }
+      }
+
+      beforeEach(() => { directiveInstances = []; });
+
+      it('should report results in views inserted / removed by ngIf', () => {
+
+        /**
+         * <ng-template [ngIf]="value">
+         *    <div #foo></div>
+         * </ng-template>
+         * class Cmpt {
+         *  @ViewChildren('foo') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                container(1, (rf1: RenderFlags, ctx1: any) => {
+                  if (rf1 & RenderFlags.Create) {
+                    element(0, 'div', null, ['foo', '']);
+                  }
+                }, null, ['ngIf', '']);
+              }
+              if (rf & RenderFlags.Update) {
+                elementProperty(1, 'ngIf', bind(ctx.value));
+              }
+            },
+            [NgIf], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const fixture = new ComponentFixture(Cmpt);
+        const qList = fixture.component.query;
+        expect(qList.length).toBe(0);
+
+        fixture.component.value = true;
+        fixture.update();
+        expect(qList.length).toBe(1);
+
+        fixture.component.value = false;
+        fixture.update();
+        expect(qList.length).toBe(0);
+      });
+
+      it('should report results in views inserted / removed by ngFor', () => {
+
+        /**
+         * <ng-template ngFor let-item [ngForOf]="value">
+         *    <div #foo [id]="item"></div>
+         * </ng-template>
+         * class Cmpt {
+         *  @ViewChildren('foo') query;
+         * }
+         */
+        class Cmpt {
+          // TODO(issue/24571): remove '!'.
+          value !: string[];
+          query: any;
+          static ngComponentDef = defineComponent({
+            type: Cmpt,
+            factory: () => new Cmpt(),
+            selectors: [['my-app']],
+            template: function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                container(1, (rf1: RenderFlags, row: NgForOfContext<string>) => {
+                  if (rf1 & RenderFlags.Create) {
+                    element(0, 'div', null, ['foo', '']);
+                  }
+                  if (rf1 & RenderFlags.Update) {
+                    elementProperty(0, 'id', bind(row.$implicit));
+                  }
+                }, null, ['ngForOf', '']);
+              }
+              if (rf & RenderFlags.Update) {
+                elementProperty(1, 'ngForOf', bind(ctx.value));
+              }
+            },
+            viewQuery: function(rf: RenderFlags, ctx: Cmpt) {
+              let tmp: any;
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            },
+            directives: () => [NgForOf]
+          });
+        }
+
+        const fixture = new ComponentFixture(Cmpt);
+        const qList = fixture.component.query;
+        expect(qList.length).toBe(0);
+
+        fixture.component.value = ['a', 'b', 'c'];
+        fixture.update();
+        expect(qList.length).toBe(3);
+
+        fixture.component.value.splice(1, 1);  // remove "b"
+        fixture.update();
+        expect(qList.length).toBe(2);
+
+        // make sure that a proper element was removed from query results
+        expect(qList.first.nativeElement.id).toBe('a');
+        expect(qList.last.nativeElement.id).toBe('c');
+
+      });
+
+      // https://stackblitz.com/edit/angular-rrmmuf?file=src/app/app.component.ts
+      it('should report results when different instances of TemplateRef are inserted into one ViewContainerRefs',
+         () => {
+           let tpl1: TemplateRef<{}>;
+           let tpl2: TemplateRef<{}>;
+
+
+           /**
+            * <ng-template #tpl1 let-idx="idx">
+            *   <div #foo [id]="'foo1_'+idx"></div>
+            * </ng-template>
+            *
+            * <div #foo id="middle"></div>
+            *
+            * <ng-template #tpl2 let-idx="idx">
+            *   <div #foo [id]="'foo2_'+idx"></div>
+            * </ng-template>
+            *
+            * <ng-template viewInserter #vi="vi"></ng-template>
+            */
+           const Cmpt = createComponent(
+               'cmpt',
+               function(rf: RenderFlags, ctx: any) {
+                 if (rf & RenderFlags.Create) {
+                   container(1, (rf: RenderFlags, ctx: {idx: number}) => {
+                     if (rf & RenderFlags.Create) {
+                       element(0, 'div', null, ['foo', '']);
+                     }
+                     if (rf & RenderFlags.Update) {
+                       elementProperty(0, 'id', bind('foo1_' + ctx.idx));
+                     }
+                   }, null, []);
+
+                   element(2, 'div', ['id', 'middle'], ['foo', '']);
+
+                   container(4, (rf: RenderFlags, ctx: {idx: number}) => {
+                     if (rf & RenderFlags.Create) {
+                       element(0, 'div', null, ['foo', '']);
+                     }
+                     if (rf & RenderFlags.Update) {
+                       elementProperty(0, 'id', bind('foo2_' + ctx.idx));
+                     }
+                   }, null, []);
+
+                   container(5, null, null, [AttributeMarker.SelectOnly, 'vc']);
+                 }
+
+                 if (rf & RenderFlags.Update) {
+                   tpl1 = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(1)));
+                   tpl2 = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(4)));
+                 }
+
+               },
+               [ViewContainerManipulatorDirective], [],
+               function(rf: RenderFlags, ctx: any) {
+                 if (rf & RenderFlags.Create) {
+                   query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+                 }
+                 if (rf & RenderFlags.Update) {
+                   let tmp: any;
+                   queryRefresh(tmp = load<QueryList<any>>(0)) &&
+                       (ctx.query = tmp as QueryList<any>);
+                 }
+               });
+
+           const fixture = new ComponentFixture(Cmpt);
+           const qList = fixture.component.query;
+
+           expect(qList.length).toBe(1);
+           expect(qList.first.nativeElement.getAttribute('id')).toBe('middle');
+
+           directiveInstances[0].insertTpl(tpl1 !, {idx: 0}, 0);
+           directiveInstances[0].insertTpl(tpl2 !, {idx: 1}, 1);
+           fixture.update();
+           expect(qList.length).toBe(3);
+           let qListArr = qList.toArray();
+           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
+           expect(qListArr[1].nativeElement.getAttribute('id')).toBe('middle');
+           expect(qListArr[2].nativeElement.getAttribute('id')).toBe('foo2_1');
+
+           directiveInstances[0].insertTpl(tpl1 !, {idx: 1}, 1);
+           fixture.update();
+           expect(qList.length).toBe(4);
+           qListArr = qList.toArray();
+           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
+           expect(qListArr[1].nativeElement.getAttribute('id')).toBe('foo1_1');
+           expect(qListArr[2].nativeElement.getAttribute('id')).toBe('middle');
+           expect(qListArr[3].nativeElement.getAttribute('id')).toBe('foo2_1');
+
+           directiveInstances[0].remove(1);
+           fixture.update();
+           expect(qList.length).toBe(3);
+           qListArr = qList.toArray();
+           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
+           expect(qListArr[1].nativeElement.getAttribute('id')).toBe('middle');
+           expect(qListArr[2].nativeElement.getAttribute('id')).toBe('foo2_1');
+
+           directiveInstances[0].remove(1);
+           fixture.update();
+           expect(qList.length).toBe(2);
+           qListArr = qList.toArray();
+           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo1_0');
+           expect(qListArr[1].nativeElement.getAttribute('id')).toBe('middle');
+         });
+
+      // https://stackblitz.com/edit/angular-7vvo9j?file=src%2Fapp%2Fapp.component.ts
+      it('should report results when the same TemplateRef is inserted into different ViewContainerRefs',
+         () => {
+           let tpl: TemplateRef<{}>;
+
+           /**
+            * <ng-template #tpl let-idx="idx" let-container_idx="container_idx">
+            *   <div #foo [id]="'foo_'+container_idx+'_'+idx"></div>
+            * </ng-template>
+            *
+            * <ng-template viewInserter #vi1="vi"></ng-template>
+            * <ng-template viewInserter #vi2="vi"></ng-template>
+            */
+           class Cmpt {
+             query: any;
+             static ngComponentDef = defineComponent({
+               type: Cmpt,
+               factory: () => new Cmpt(),
+               selectors: [['my-app']],
+               template: function(rf: RenderFlags, ctx: any) {
+                 let tmp: any;
+                 if (rf & RenderFlags.Create) {
+                   container(1, (rf: RenderFlags, ctx: {idx: number, container_idx: number}) => {
+                     if (rf & RenderFlags.Create) {
+                       element(0, 'div', null, ['foo', '']);
+                     }
+                     if (rf & RenderFlags.Update) {
+                       elementProperty(0, 'id', bind('foo_' + ctx.container_idx + '_' + ctx.idx));
+                     }
+                   }, null, []);
+
+                   container(2, null, null, [AttributeMarker.SelectOnly, 'vc']);
+                   container(3, null, null, [AttributeMarker.SelectOnly, 'vc']);
+                 }
+
+                 if (rf & RenderFlags.Update) {
+                   tpl = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(1)));
+                 }
+
+               },
+               viewQuery: (rf: RenderFlags, cmpt: Cmpt) => {
+                 let tmp: any;
+                 if (rf & RenderFlags.Create) {
+                   query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+                 }
+                 if (rf & RenderFlags.Update) {
+                   queryRefresh(tmp = load<QueryList<any>>(0)) &&
+                       (cmpt.query = tmp as QueryList<any>);
+                 }
+               },
+               directives: () => [ViewContainerManipulatorDirective],
+             });
+           }
+           const fixture = new ComponentFixture(Cmpt);
+           const qList = fixture.component.query;
+
+           expect(qList.length).toBe(0);
+
+           directiveInstances[0].insertTpl(tpl !, {idx: 0, container_idx: 0}, 0);
+           directiveInstances[1].insertTpl(tpl !, {idx: 0, container_idx: 1}, 0);
+           fixture.update();
+           expect(qList.length).toBe(2);
+           let qListArr = qList.toArray();
+           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo_1_0');
+           expect(qListArr[1].nativeElement.getAttribute('id')).toBe('foo_0_0');
+
+           directiveInstances[0].remove();
+           fixture.update();
+           expect(qList.length).toBe(1);
+           qListArr = qList.toArray();
+           expect(qListArr[0].nativeElement.getAttribute('id')).toBe('foo_1_0');
+
+           directiveInstances[1].remove();
+           fixture.update();
+           expect(qList.length).toBe(0);
+         });
+
+      // https://stackblitz.com/edit/angular-wpd6gv?file=src%2Fapp%2Fapp.component.ts
+      it('should report results from views inserted in a lifecycle hook', () => {
+
+        class MyApp {
+          show = false;
+          query: any;
+          static ngComponentDef = defineComponent({
+            type: MyApp,
+            factory: () => new MyApp(),
+            selectors: [['my-app']],
+            /**
+             * <ng-template #tpl><span #foo id="from_tpl">from tpl</span></ng-template>
+             * <ng-template [ngTemplateOutlet]="show ? tpl : null"></ng-template>
+             */
+            template: (rf: RenderFlags, myApp: MyApp) => {
+              if (rf & RenderFlags.Create) {
+                container(1, (rf1: RenderFlags) => {
+                  if (rf1 & RenderFlags.Create) {
+                    element(0, 'span', ['id', 'from_tpl'], ['foo', '']);
+                  }
+                }, undefined, undefined, ['tpl', '']);
+                container(3, null, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
+              }
+              if (rf & RenderFlags.Update) {
+                const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(1)));
+                elementProperty(3, 'ngTemplateOutlet', bind(myApp.show ? tplRef : null));
+              }
+            },
+            directives: () => [NgTemplateOutlet],
+            viewQuery: (rf: RenderFlags, myApp: MyApp) => {
+              let tmp: any;
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                queryRefresh(tmp = load<QueryList<any>>(0)) &&
+                    (myApp.query = tmp as QueryList<any>);
+              }
+            }
+          });
+        }
+
+        const fixture = new ComponentFixture(MyApp);
+        const qList = fixture.component.query;
+
+        expect(qList.length).toBe(0);
+
+        fixture.component.show = true;
+        fixture.update();
+        expect(qList.length).toBe(1);
+        expect(qList.first.nativeElement.id).toBe('from_tpl');
+
+        fixture.component.show = false;
+        fixture.update();
+        expect(qList.length).toBe(0);
+      });
+
+    });
+
+    describe('JS blocks', () => {
+
+      it('should report results in embedded views', () => {
+        let firstEl;
+        /**
+         * % if (exp) {
+         *    <div #foo></div>
+         * % }
+         * class Cmpt {
+         *  @ViewChildren('foo') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                container(1);
+              }
+              if (rf & RenderFlags.Update) {
+                containerRefreshStart(1);
+                {
+                  if (ctx.exp) {
+                    let rf1 = embeddedViewStart(1);
+                    {
+                      if (rf1 & RenderFlags.Create) {
+                        element(0, 'div', null, ['foo', '']);
+                        firstEl = loadElement(0).native;
+                      }
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as any);
+        expect(qList.length).toBe(0);
+
+        cmptInstance.exp = true;
+        detectChanges(cmptInstance);
+        expect(qList.length).toBe(1);
+        expect(qList.first.nativeElement).toBe(firstEl);
+
+        cmptInstance.exp = false;
+        detectChanges(cmptInstance);
+        expect(qList.length).toBe(0);
+      });
+
+      it('should add results from embedded views in the correct order - views and elements mix',
+         () => {
+           let firstEl, lastEl, viewEl;
+           /**
+            * <span #foo></span>
+            * % if (exp) {
+            *    <div #foo></div>
+            * % }
+            * <span #foo></span>
+            * class Cmpt {
+            *  @ViewChildren('foo') query;
+            * }
+            */
+           const Cmpt = createComponent(
+               'cmpt',
+               function(rf: RenderFlags, ctx: any) {
+                 if (rf & RenderFlags.Create) {
+                   element(1, 'span', null, ['foo', '']);
+                   firstEl = loadElement(1).native;
+                   container(3);
+                   element(4, 'span', null, ['foo', '']);
+                   lastEl = loadElement(4).native;
+                 }
+                 if (rf & RenderFlags.Update) {
+                   containerRefreshStart(3);
+                   {
+                     if (ctx.exp) {
+                       let rf1 = embeddedViewStart(1);
+                       {
+                         if (rf1 & RenderFlags.Create) {
+                           element(0, 'div', null, ['foo', '']);
+                           viewEl = loadElement(0).native;
+                         }
+                       }
+                       embeddedViewEnd();
+                     }
+                   }
+                   containerRefreshEnd();
+                 }
+               },
+               [], [],
+               function(rf: RenderFlags, ctx: any) {
+                 if (rf & RenderFlags.Create) {
+                   query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+                 }
+                 if (rf & RenderFlags.Update) {
+                   let tmp: any;
+                   queryRefresh(tmp = load<QueryList<any>>(0)) &&
+                       (ctx.query = tmp as QueryList<any>);
+                 }
+               });
+
+           const cmptInstance = renderComponent(Cmpt);
+           const qList = (cmptInstance.query as any);
+           expect(qList.length).toBe(2);
+           expect(qList.first.nativeElement).toBe(firstEl);
+           expect(qList.last.nativeElement).toBe(lastEl);
+
+           cmptInstance.exp = true;
+           detectChanges(cmptInstance);
+           expect(qList.length).toBe(3);
+           expect(qList.toArray()[0].nativeElement).toBe(firstEl);
+           expect(qList.toArray()[1].nativeElement).toBe(viewEl);
+           expect(qList.toArray()[2].nativeElement).toBe(lastEl);
+
+           cmptInstance.exp = false;
+           detectChanges(cmptInstance);
+           expect(qList.length).toBe(2);
+           expect(qList.first.nativeElement).toBe(firstEl);
+           expect(qList.last.nativeElement).toBe(lastEl);
+         });
+
+      it('should add results from embedded views in the correct order - views side by side', () => {
+        let firstEl, lastEl;
+        /**
+         * % if (exp1) {
+         *    <div #foo></div>
+         * % } if (exp2) {
+         *    <span #foo></span>
+         * % }
+         * class Cmpt {
+         *  @ViewChildren('foo') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                container(1);
+              }
+              if (rf & RenderFlags.Update) {
+                containerRefreshStart(1);
+                {
+                  if (ctx.exp1) {
+                    let rf0 = embeddedViewStart(0);
+                    {
+                      if (rf0 & RenderFlags.Create) {
+                        element(0, 'div', null, ['foo', '']);
+                        firstEl = loadElement(0).native;
+                      }
+                    }
+                    embeddedViewEnd();
+                  }
+                  if (ctx.exp2) {
+                    let rf1 = embeddedViewStart(1);
+                    {
+                      if (rf1 & RenderFlags.Create) {
+                        element(0, 'span', null, ['foo', '']);
+                        lastEl = loadElement(0).native;
+                      }
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as any);
+        expect(qList.length).toBe(0);
+
+        cmptInstance.exp2 = true;
+        detectChanges(cmptInstance);
+        expect(qList.length).toBe(1);
+        expect(qList.last.nativeElement).toBe(lastEl);
+
+        cmptInstance.exp1 = true;
+        detectChanges(cmptInstance);
+        expect(qList.length).toBe(2);
+        expect(qList.first.nativeElement).toBe(firstEl);
+        expect(qList.last.nativeElement).toBe(lastEl);
+      });
+
+      it('should add results from embedded views in the correct order - nested views', () => {
+        let firstEl, lastEl;
+        /**
+         * % if (exp1) {
+         *    <div #foo></div>
+         *    % if (exp2) {
+         *      <span #foo></span>
+         *    }
+         * % }
+         * class Cmpt {
+         *  @ViewChildren('foo') query;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                container(1);
+              }
+              if (rf & RenderFlags.Update) {
+                containerRefreshStart(1);
+                {
+                  if (ctx.exp1) {
+                    let rf0 = embeddedViewStart(0);
+                    {
+                      if (rf0 & RenderFlags.Create) {
+                        element(0, 'div', null, ['foo', '']);
+                        firstEl = loadElement(0).native;
+                        container(2);
+                      }
+                      if (rf0 & RenderFlags.Update) {
+                        containerRefreshStart(2);
+                        {
+                          if (ctx.exp2) {
+                            let rf2 = embeddedViewStart(0);
+                            {
+                              if (rf2) {
+                                element(0, 'span', null, ['foo', '']);
+                                lastEl = loadElement(0).native;
+                              }
+                            }
+                            embeddedViewEnd();
+                          }
+                        }
+                        containerRefreshEnd();
+                      }
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const qList = (cmptInstance.query as any);
+        expect(qList.length).toBe(0);
+
+        cmptInstance.exp1 = true;
+        detectChanges(cmptInstance);
+        expect(qList.length).toBe(1);
+        expect(qList.first.nativeElement).toBe(firstEl);
+
+        cmptInstance.exp2 = true;
+        detectChanges(cmptInstance);
+        expect(qList.length).toBe(2);
+        expect(qList.first.nativeElement).toBe(firstEl);
+        expect(qList.last.nativeElement).toBe(lastEl);
+      });
+
+      /**
+       * What is tested here can't be achieved in the Renderer2 as all view queries are deep by
+       * default and can't be marked as shallow by a user.
+       */
+      it('should support combination of deep and shallow queries', () => {
+        /**
+         * % if (exp) { ">
+         *   <div #foo>
+         *     <div #foo></div>
+         *   </div>
+         * % }
+         * <span #foo></span>
+         * class Cmpt {
+         *  @ViewChildren('foo') deep;
+         *  @ViewChildren('foo') shallow;
+         * }
+         */
+        const Cmpt = createComponent(
+            'cmpt',
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                container(2);
+                element(3, 'span', null, ['foo', '']);
+              }
+              if (rf & RenderFlags.Update) {
+                containerRefreshStart(2);
+                {
+                  if (ctx.exp) {
+                    let rf0 = embeddedViewStart(0);
+                    {
+                      if (rf0 & RenderFlags.Create) {
+                        elementStart(0, 'div', null, ['foo', '']);
+                        { element(2, 'div', null, ['foo', '']); }
+                        elementEnd();
+                      }
+                    }
+                    embeddedViewEnd();
+                  }
+                }
+                containerRefreshEnd();
+              }
+            },
+            [], [],
+            function(rf: RenderFlags, ctx: any) {
+              if (rf & RenderFlags.Create) {
+                query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+                query(1, ['foo'], false, QUERY_READ_FROM_NODE);
+              }
+              if (rf & RenderFlags.Update) {
+                let tmp: any;
+                queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.deep = tmp as QueryList<any>);
+                queryRefresh(tmp = load<QueryList<any>>(1)) &&
+                    (ctx.shallow = tmp as QueryList<any>);
+              }
+            });
+
+        const cmptInstance = renderComponent(Cmpt);
+        const deep = (cmptInstance.deep as any);
+        const shallow = (cmptInstance.shallow as any);
+        expect(deep.length).toBe(1);
+        expect(shallow.length).toBe(1);
+
+
+        cmptInstance.exp = true;
+        detectChanges(cmptInstance);
+        expect(deep.length).toBe(3);
+
+        // embedded % if blocks should behave the same way as *ngIf, namely they
+        // should match shallow queries on the first level of elements underneath
+        // the embedded view boundary.
+        expect(shallow.length).toBe(2);
+
+        cmptInstance.exp = false;
+        detectChanges(cmptInstance);
+        expect(deep.length).toBe(1);
+        expect(shallow.length).toBe(1);
+      });
+
+    });
+
+  });
+
+  describe('observable interface', () => {
+
+    it('should allow observing changes to query list', () => {
+      const queryList = new QueryList();
+      let changes = 0;
+
+      queryList.changes.subscribe({
+        next: (arg) => {
+          changes += 1;
+          expect(arg).toBe(queryList);
+        }
+      });
+
+      // initial refresh, the query should be dirty
+      queryRefresh(queryList);
+      expect(changes).toBe(1);
+
+
+      // refresh without setting dirty - no emit
+      queryRefresh(queryList);
+      expect(changes).toBe(1);
+
+      // refresh with setting dirty - emit
+      queryList.setDirty();
+      queryRefresh(queryList);
+      expect(changes).toBe(2);
+    });
+
+  });
+
+  describe('queryList', () => {
+    it('should be destroyed when the containing view is destroyed', () => {
+      let queryInstance: QueryList<any>;
+
+      const SimpleComponentWithQuery = createComponent(
+          'some-component-with-query',
+          function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              element(1, 'div', null, ['foo', '']);
+            }
+          },
+          [], [],
+          function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              query(0, ['foo'], false, QUERY_READ_FROM_NODE);
+            }
+            if (rf & RenderFlags.Update) {
+              let tmp: any;
+              queryRefresh(tmp = load<QueryList<any>>(0)) &&
+                  (ctx.query = queryInstance = tmp as QueryList<any>);
+            }
+          });
+
+      function createTemplate() { container(0); }
+
+      function updateTemplate() {
+        containerRefreshStart(0);
+        {
+          if (condition) {
+            let rf1 = embeddedViewStart(1);
+            {
+              if (rf1 & RenderFlags.Create) {
+                element(0, 'some-component-with-query');
+              }
+            }
+            embeddedViewEnd();
+          }
+        }
+        containerRefreshEnd();
+      }
+
+      /**
+       * % if (condition) {
+       *   <some-component-with-query></some-component-with-query>
+       * %}
+       */
+      let condition = true;
+      const t = new TemplateFixture(createTemplate, updateTemplate, [SimpleComponentWithQuery]);
+      expect(t.html).toEqual('<some-component-with-query><div></div></some-component-with-query>');
+      expect((queryInstance !.changes as EventEmitter<any>).closed).toBeFalsy();
+
+      condition = false;
+      t.update();
+      expect(t.html).toEqual('');
+      expect((queryInstance !.changes as EventEmitter<any>).closed).toBeTruthy();
+    });
+  });
+
+  it('should restore queries if view changes', () => {
+    class SomeDir {
+      constructor(public vcr: ViewContainerRef, public temp: TemplateRef<any>) {
+        this.vcr.createEmbeddedView(this.temp);
+      }
+
+      static ngDirectiveDef = defineDirective({
+        type: SomeDir,
+        selectors: [['', 'someDir', '']],
+        factory: () => new SomeDir(injectViewContainerRef(), injectTemplateRef())
+      });
+    }
+
+    function template(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        element(0, 'div');
+      }
+    }
+
+    /**
+     * <div *someDir></div>
+     * <div #foo></div>
+     */
+    const AppComponent = createComponent(
+        'app',
+        function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            container(1, template, null, [AttributeMarker.SelectOnly, 'someDir']);
+            element(2, 'div', null, ['foo', '']);
+          }
+        },
+        [SomeDir], [],
+        function(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            query(0, ['foo'], true, QUERY_READ_FROM_NODE);
+          }
+          if (rf & RenderFlags.Update) {
+            let tmp: any;
+            queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
+          }
+        });
+
+    const fixture = new ComponentFixture(AppComponent);
+    expect(fixture.component.query.length).toBe(1);
+  });
+
+  describe('content', () => {
+    let withContentInstance: WithContentDirective|null;
+    let shallowCompInstance: ShallowComp|null;
+
+    beforeEach(() => {
+      withContentInstance = null;
+      shallowCompInstance = null;
+    });
+
+    class WithContentDirective {
+      // @ContentChildren('foo')
+      foos !: QueryList<ElementRef>;
+      contentInitQuerySnapshot = 0;
+      contentCheckedQuerySnapshot = 0;
+
+      ngAfterContentInit() { this.contentInitQuerySnapshot = this.foos ? this.foos.length : 0; }
+
+      ngAfterContentChecked() {
+        this.contentCheckedQuerySnapshot = this.foos ? this.foos.length : 0;
+      }
+
+      static ngComponentDef = defineDirective({
+        type: WithContentDirective,
+        selectors: [['', 'with-content', '']],
+        factory: () => new WithContentDirective(),
+        contentQueries:
+            () => { registerContentQuery(query(null, ['foo'], true, QUERY_READ_FROM_NODE)); },
+        contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
+          let tmp: any;
+          withContentInstance = loadDirective<WithContentDirective>(dirIndex);
+          queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
+              (withContentInstance.foos = tmp);
+        }
+      });
+    }
+
+    class ShallowComp {
+      // @ContentChildren('foo', {descendants: false})
+      foos !: QueryList<ElementRef>;
+
+      static ngComponentDef = defineComponent({
+        type: ShallowComp,
+        selectors: [['shallow-comp']],
+        factory: () => new ShallowComp(),
+        template: function(rf: RenderFlags, ctx: any) {},
+        contentQueries:
+            () => { registerContentQuery(query(null, ['foo'], false, QUERY_READ_FROM_NODE)); },
+        contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
+          let tmp: any;
+          shallowCompInstance = loadDirective<ShallowComp>(dirIndex);
+          queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
+              (shallowCompInstance.foos = tmp);
+        }
+      });
+    }
+
+    it('should support content queries for directives', () => {
+      /**
+       * <div with-content>
+       *   <span #foo></span>
+       * </div>
+       */
+      const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div', [AttributeMarker.SelectOnly, 'with-content']);
+          { element(1, 'span', null, ['foo', '']); }
+          elementEnd();
+        }
+      }, [WithContentDirective]);
+
+      const fixture = new ComponentFixture(AppComponent);
+      expect(withContentInstance !.foos.length)
+          .toBe(1, `Expected content query to match <span #foo>.`);
+
+      expect(withContentInstance !.contentInitQuerySnapshot)
+          .toBe(
+              1,
+              `Expected content query results to be available when ngAfterContentInit was called.`);
+
+      expect(withContentInstance !.contentCheckedQuerySnapshot)
+          .toBe(
+              1,
+              `Expected content query results to be available when ngAfterContentChecked was called.`);
+    });
+
+    it('should support content query matches on directive hosts', () => {
+      /**
+       * <div with-content #foo>
+       * </div>
+       */
+      const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', ['with-content', ''], ['foo', '']);
+        }
+      }, [WithContentDirective]);
+
+      const fixture = new ComponentFixture(AppComponent);
+      expect(withContentInstance !.foos.length)
+          .toBe(1, `Expected content query to match <div with-content #foo>.`);
+    });
+
+    it('should match shallow content queries in views inserted / removed by ngIf', () => {
+      function IfTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          element(0, 'div', null, ['foo', '']);
+        }
+      }
+
+      /**
+       * <shallow-comp>
+       *    <div *ngIf="showing" #foo></div>
+       * </shallow-comp>
+       */
+      const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'shallow-comp');
+          { container(1, IfTemplate, null, [AttributeMarker.SelectOnly, 'ngIf', '']); }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(1, 'ngIf', bind(ctx.showing));
+        }
+      }, [ShallowComp, NgIf]);
+
+      const fixture = new ComponentFixture(AppComponent);
+      const qList = shallowCompInstance !.foos;
+      expect(qList.length).toBe(0);
+
+      fixture.component.showing = true;
+      fixture.update();
+      expect(qList.length).toBe(1);
+
+      fixture.component.showing = false;
+      fixture.update();
+      expect(qList.length).toBe(0);
+    });
+
+
+    // https://stackblitz.com/edit/angular-wlenwd?file=src%2Fapp%2Fapp.component.ts
+    it('should support view and content queries matching the same element', () => {
+      /**
+       * <div with-content>
+       *   <div #foo></div>
+       * </div>
+       * <div id="after" #bar></div>
+       * class Cmpt {
+       *  @ViewChildren('foo, bar') foos;
+       * }
+       */
+      const AppComponent = createComponent(
+          'app-component',
+          function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              elementStart(1, 'div', ['with-content', '']);
+              { element(2, 'div', null, ['foo', '']); }
+              elementEnd();
+              element(4, 'div', ['id', 'after'], ['bar', '']);
+            }
+          },
+          [WithContentDirective], [],
+          function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              query(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE);
+            }
+            if (rf & RenderFlags.Update) {
+              let tmp: any;
+              queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.foos = tmp as QueryList<any>);
+            }
+          });
+
+      const fixture = new ComponentFixture(AppComponent);
+      const viewQList = fixture.component.foos;
+
+      expect(viewQList.length).toBe(2);
+      expect(withContentInstance !.foos.length).toBe(1);
+      expect(viewQList.first.nativeElement).toBe(withContentInstance !.foos.first.nativeElement);
+      expect(viewQList.last.nativeElement.id).toBe('after');
+    });
+
+    it('should not report deep content query matches found above content children', () => {
+      /**
+       * <div with-content>
+       *   <div #foo id="yes"></div>    <-- should match content query
+       * </div>
+       * <div #foo></div>              <-- should not match content query
+       * class AppComponent {
+       *  @ViewChildren('bar') bars: QueryList<ElementRef>;
+       * }
+       */
+      const AppComponent = createComponent(
+          'app-component',
+          function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              elementStart(1, 'div', ['with-content', '']);
+              { element(2, 'div', ['id', 'yes'], ['foo', '']); }
+              elementEnd();
+              element(4, 'div', null, ['foo', '']);
+            }
+          },
+          [WithContentDirective], [],
+          function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              query(0, ['bar'], true, QUERY_READ_FROM_NODE);
+            }
+            if (rf & RenderFlags.Update) {
+              let tmp: any;
+              queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.bars = tmp as QueryList<any>);
+            }
+          });
+
+      const fixture = new ComponentFixture(AppComponent);
+      expect(withContentInstance !.foos.length).toBe(1);
+      expect(withContentInstance !.foos.first.nativeElement.id).toEqual('yes');
+    });
+
+    it('should report results to appropriate queries where deep content queries are nested', () => {
+      class QueryDirective {
+        fooBars: any;
+        static ngDirectiveDef = defineDirective({
+          type: QueryDirective,
+          selectors: [['', 'query', '']],
+          exportAs: 'query',
+          factory: () => new QueryDirective(),
+          contentQueries: () => {
+            // @ContentChildren('foo, bar, baz', {descendants: true}) fooBars:
+            // QueryList<ElementRef>;
+            registerContentQuery(query(null, ['foo', 'bar', 'baz'], true, QUERY_READ_FROM_NODE));
+          },
+          contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
+            let tmp: any;
+            const instance = loadDirective<QueryDirective>(dirIndex);
+            queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
+                (instance.fooBars = tmp);
+          },
+        });
+      }
+
+      let outInstance: QueryDirective;
+      let inInstance: QueryDirective;
+
+      const AppComponent = createComponent(
+          'app-component',
+          /**
+           * <div query #out="query">
+           *   <span #foo></span>
+           *   <div query #in="query">
+           *     <span #bar></span>
+           *   </div>
+           *   <span #baz></span>
+           * </div>
+           */
+          function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              elementStart(0, 'div', [AttributeMarker.SelectOnly, 'query'], ['out', 'query']);
+              {
+                element(2, 'span', ['id', 'foo'], ['foo', '']);
+                elementStart(4, 'div', [AttributeMarker.SelectOnly, 'query'], ['in', 'query']);
+                { element(6, 'span', ['id', 'bar'], ['bar', '']); }
+                elementEnd();
+                element(8, 'span', ['id', 'baz'], ['baz', '']);
+              }
+              elementEnd();
+            }
+            if (rf & RenderFlags.Update) {
+              outInstance = load<QueryDirective>(1);
+              inInstance = load<QueryDirective>(5);
+            }
+          },
+          [QueryDirective]);
+
+      const fixture = new ComponentFixture(AppComponent);
+      expect(outInstance !.fooBars.length).toBe(3);
+      expect(inInstance !.fooBars.length).toBe(1);
+    });
+
+
+    it('should support nested shallow content queries ', () => {
+      let outInstance: QueryDirective;
+      let inInstance: QueryDirective;
+
+      class QueryDirective {
+        fooBars: any;
+        static ngDirectiveDef = defineDirective({
+          type: QueryDirective,
+          selectors: [['', 'query', '']],
+          exportAs: 'query',
+          factory: () => new QueryDirective(),
+          contentQueries: () => {
+            // @ContentChildren('foo, bar, baz', {descendants: true}) fooBars:
+            // QueryList<ElementRef>;
+            registerContentQuery(query(null, ['foo'], false, QUERY_READ_FROM_NODE));
+          },
+          contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
+            let tmp: any;
+            const instance = loadDirective<QueryDirective>(dirIndex);
+            queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
+                (instance.fooBars = tmp);
+          },
+        });
+      }
+
+      const AppComponent = createComponent(
+          'app-component',
+          /**
+           * <div query #out="query">
+           *   <div query #in="query" #foo>
+           *     <span #foo></span>
+           *   </div>
+           * </div>
+           */
+          function(rf: RenderFlags, ctx: any) {
+            if (rf & RenderFlags.Create) {
+              elementStart(0, 'div', ['query', ''], ['out', 'query']);
+              {
+                elementStart(2, 'div', ['query', ''], ['in', 'query', 'foo', '']);
+                { element(5, 'span', ['id', 'bar'], ['foo', '']); }
+                elementEnd();
+              }
+              elementEnd();
+            }
+            if (rf & RenderFlags.Update) {
+              outInstance = load<QueryDirective>(1);
+              inInstance = load<QueryDirective>(3);
+            }
+          },
+          [QueryDirective]);
+
+      const fixture = new ComponentFixture(AppComponent);
+      expect(outInstance !.fooBars.length).toBe(1);
+      expect(inInstance !.fooBars.length).toBe(2);
+    });
+
+    it('should respect shallow flag on content queries when mixing deep and shallow queries',
+       () => {
+         class ShallowQueryDirective {
+           foos: any;
+           static ngDirectiveDef = defineDirective({
+             type: ShallowQueryDirective,
+             selectors: [['', 'shallow-query', '']],
+             exportAs: 'shallow-query',
+             factory: () => new ShallowQueryDirective(),
+             contentQueries: () => {
+               // @ContentChildren('foo', {descendants: false}) foos: QueryList<ElementRef>;
+               registerContentQuery(query(null, ['foo'], false, QUERY_READ_FROM_NODE));
+             },
+             contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
+               let tmp: any;
+               const instance = loadDirective<ShallowQueryDirective>(dirIndex);
+               queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
+                   (instance.foos = tmp);
+             },
+           });
+         }
+
+         class DeepQueryDirective {
+           foos: any;
+           static ngDirectiveDef = defineDirective({
+             type: DeepQueryDirective,
+             selectors: [['', 'deep-query', '']],
+             exportAs: 'deep-query',
+             factory: () => new DeepQueryDirective(),
+             contentQueries: () => {
+               // @ContentChildren('foo', {descendants: false}) foos: QueryList<ElementRef>;
+               registerContentQuery(query(null, ['foo'], true, QUERY_READ_FROM_NODE));
+             },
+             contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
+               let tmp: any;
+               const instance = loadDirective<DeepQueryDirective>(dirIndex);
+               queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
+                   (instance.foos = tmp);
+             },
+           });
+         }
+
+         let shallowInstance: ShallowQueryDirective;
+         let deepInstance: DeepQueryDirective;
+
+         const AppComponent = createComponent(
+             'app-component',
+             /**
+              * <div shallow-query #shallow="shallow-query" deep-query #deep="deep-query">
+               *   <span #foo></span>
+              *    <div>
+              *        <span #foo></span>
+              *    </div>
+              * </div>
+              */
+             function(rf: RenderFlags, ctx: any) {
+               if (rf & RenderFlags.Create) {
+                 elementStart(
+                     0, 'div', [AttributeMarker.SelectOnly, 'shallow-query', 'deep-query'],
+                     ['shallow', 'shallow-query', 'deep', 'deep-query']);
+                 {
+                   element(3, 'span', null, ['foo', '']);
+                   elementStart(5, 'div');
+                   { element(6, 'span', null, ['foo', '']); }
+                   elementEnd();
+                 }
+                 elementEnd();
+               }
+               if (rf & RenderFlags.Update) {
+                 shallowInstance = load<ShallowQueryDirective>(1);
+                 deepInstance = load<DeepQueryDirective>(2);
+               }
+             },
+             [ShallowQueryDirective, DeepQueryDirective]);
+
+         const fixture = new ComponentFixture(AppComponent);
+         expect(shallowInstance !.foos.length).toBe(1);
+         expect(deepInstance !.foos.length).toBe(2);
+       });
+  });
+});
diff --git a/packages/core/test/render3/render_util.ts b/packages/core/test/render3/render_util.ts
new file mode 100644
index 000000000000..b299c3993c9a
--- /dev/null
+++ b/packages/core/test/render3/render_util.ts
@@ -0,0 +1,266 @@
+/**
+ * @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 {stringifyElement} from '@angular/platform-browser/testing/src/browser_util';
+
+import {Injector} from '../../src/di/injector';
+import {CreateComponentOptions} from '../../src/render3/component';
+import {extractDirectiveDef, extractPipeDef} from '../../src/render3/definition';
+import {ComponentTemplate, ComponentType, DirectiveDefInternal, DirectiveType, PublicFeature, RenderFlags, defineComponent, defineDirective, renderComponent as _renderComponent, tick} from '../../src/render3/index';
+import {NG_HOST_SYMBOL, renderTemplate} from '../../src/render3/instructions';
+import {DirectiveDefList, DirectiveTypesOrFactory, PipeDefInternal, PipeDefList, PipeTypesOrFactory} from '../../src/render3/interfaces/definition';
+import {LElementNode} from '../../src/render3/interfaces/node';
+import {RElement, RText, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
+import {Sanitizer} from '../../src/sanitization/security';
+import {Type} from '../../src/type';
+
+import {getRendererFactory2} from './imported_renderer2';
+
+export abstract class BaseFixture {
+  hostElement: HTMLElement;
+
+  constructor() {
+    this.hostElement = document.createElement('div');
+    this.hostElement.setAttribute('fixture', 'mark');
+  }
+
+  /**
+   * Current state of rendered HTML.
+   */
+  get html(): string { return toHtml(this.hostElement as any as Element); }
+}
+
+function noop() {}
+/**
+ * Fixture for testing template functions in a convenient way.
+ *
+ * This fixture allows:
+ * - specifying the creation block and update block as two separate functions,
+ * - maintaining the template state between invocations,
+ * - access to the render `html`.
+ */
+export class TemplateFixture extends BaseFixture {
+  hostNode: LElementNode;
+  private _directiveDefs: DirectiveDefList|null;
+  private _pipeDefs: PipeDefList|null;
+  private _sanitizer: Sanitizer|null;
+  private _rendererFactory: RendererFactory3;
+
+  /**
+   *
+   * @param createBlock Instructions which go into the creation block:
+   *          `if (rf & RenderFlags.Create) { __here__ }`.
+   * @param updateBlock Optional instructions which go into the update block:
+   *          `if (rf & RenderFlags.Update) { __here__ }`.
+   */
+  constructor(
+      private createBlock: () => void, private updateBlock: () => void = noop,
+      directives?: DirectiveTypesOrFactory|null, pipes?: PipeTypesOrFactory|null,
+      sanitizer?: Sanitizer|null, rendererFactory?: RendererFactory3) {
+    super();
+    this._directiveDefs = toDefs(directives, extractDirectiveDef);
+    this._pipeDefs = toDefs(pipes, extractPipeDef);
+    this._sanitizer = sanitizer || null;
+    this._rendererFactory = rendererFactory || domRendererFactory3;
+    this.hostNode = renderTemplate(this.hostElement, (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        this.createBlock();
+      }
+      if (rf & RenderFlags.Update) {
+        this.updateBlock();
+      }
+    }, null !, this._rendererFactory, null, this._directiveDefs, this._pipeDefs, sanitizer);
+  }
+
+  /**
+   * Update the existing template
+   *
+   * @param updateBlock Optional update block.
+   */
+  update(updateBlock?: () => void): void {
+    renderTemplate(
+        this.hostNode.native, updateBlock || this.updateBlock, null !, this._rendererFactory,
+        this.hostNode, this._directiveDefs, this._pipeDefs, this._sanitizer);
+  }
+}
+
+
+/**
+ * Fixture for testing Components in a convenient way.
+ */
+export class ComponentFixture<T> extends BaseFixture {
+  component: T;
+  requestAnimationFrame: {(fn: () => void): void; flush(): void; queue: (() => void)[];};
+
+  constructor(
+      private componentType: ComponentType<T>,
+      opts: {injector?: Injector, sanitizer?: Sanitizer, rendererFactory?: RendererFactory3} = {}) {
+    super();
+    this.requestAnimationFrame = function(fn: () => void) {
+      requestAnimationFrame.queue.push(fn);
+    } as any;
+    this.requestAnimationFrame.queue = [];
+    this.requestAnimationFrame.flush = function() {
+      while (requestAnimationFrame.queue.length) {
+        requestAnimationFrame.queue.shift() !();
+      }
+    };
+
+    this.component = _renderComponent(componentType, {
+      host: this.hostElement,
+      scheduler: this.requestAnimationFrame,
+      injector: opts.injector,
+      sanitizer: opts.sanitizer,
+      rendererFactory: opts.rendererFactory || domRendererFactory3
+    });
+  }
+
+  update(): void {
+    tick(this.component);
+    this.requestAnimationFrame.flush();
+  }
+}
+
+///////////////////////////////////////////////////////////////////////////////////
+// The methods below use global state and we should stop using them.
+// Fixtures above are preferred way of testing Components and Templates
+///////////////////////////////////////////////////////////////////////////////////
+
+export const document = ((typeof global == 'object' && global || window) as any).document;
+export let containerEl: HTMLElement = null !;
+let host: LElementNode|null;
+const isRenderer2 =
+    typeof process == 'object' && process.argv[3] && process.argv[3] === '--r=renderer2';
+// tslint:disable-next-line:no-console
+console.log(`Running tests with ${!isRenderer2 ? 'document' : 'Renderer2'} renderer...`);
+const testRendererFactory: RendererFactory3 =
+    isRenderer2 ? getRendererFactory2(document) : domRendererFactory3;
+
+export const requestAnimationFrame:
+    {(fn: () => void): void; flush(): void; queue: (() => void)[];} = function(fn: () => void) {
+      requestAnimationFrame.queue.push(fn);
+    } as any;
+requestAnimationFrame.flush = function() {
+  while (requestAnimationFrame.queue.length) {
+    requestAnimationFrame.queue.shift() !();
+  }
+};
+
+export function resetDOM() {
+  requestAnimationFrame.queue = [];
+  if (containerEl) {
+    try {
+      document.body.removeChild(containerEl);
+    } catch (e) {
+    }
+  }
+  containerEl = document.createElement('div');
+  containerEl.setAttribute('host', '');
+  document.body.appendChild(containerEl);
+  host = null;
+  // TODO: assert that the global state is clean (e.g. ngData, previousOrParentNode, etc)
+}
+
+/**
+ * @deprecated use `TemplateFixture` or `ComponentFixture`
+ */
+export function renderToHtml(
+    template: ComponentTemplate<any>, ctx: any, directives?: DirectiveTypesOrFactory | null,
+    pipes?: PipeTypesOrFactory | null, providedRendererFactory?: RendererFactory3 | null) {
+  host = renderTemplate(
+      containerEl, template, ctx, providedRendererFactory || testRendererFactory, host,
+      toDefs(directives, extractDirectiveDef), toDefs(pipes, extractPipeDef));
+  return toHtml(containerEl);
+}
+
+function toDefs(
+    types: DirectiveTypesOrFactory | undefined | null,
+    mapFn: (type: Type<any>) => DirectiveDefInternal<any>): DirectiveDefList|null;
+function toDefs(
+    types: PipeTypesOrFactory | undefined | null,
+    mapFn: (type: Type<any>) => PipeDefInternal<any>): PipeDefList|null;
+function toDefs(
+    types: PipeTypesOrFactory | DirectiveTypesOrFactory | undefined | null,
+    mapFn: (type: Type<any>) => PipeDefInternal<any>| DirectiveDefInternal<any>): any {
+  if (!types) return null;
+  if (typeof types == 'function') {
+    types = types();
+  }
+  return types.map(mapFn);
+}
+
+beforeEach(resetDOM);
+
+/**
+ * @deprecated use `TemplateFixture` or `ComponentFixture`
+ */
+export function renderComponent<T>(type: ComponentType<T>, opts?: CreateComponentOptions): T {
+  return _renderComponent(type, {
+    rendererFactory: opts && opts.rendererFactory || testRendererFactory,
+    host: containerEl,
+    scheduler: requestAnimationFrame,
+    sanitizer: opts ? opts.sanitizer : undefined,
+    hostFeatures: opts && opts.hostFeatures
+  });
+}
+
+/**
+ * @deprecated use `TemplateFixture` or `ComponentFixture`
+ */
+export function toHtml<T>(componentOrElement: T | RElement): string {
+  const node = (componentOrElement as any)[NG_HOST_SYMBOL] as LElementNode;
+  if (node) {
+    return toHtml(node.native);
+  } else {
+    return stringifyElement(componentOrElement)
+        .replace(/^<div host="">/, '')
+        .replace(/^<div fixture="mark">/, '')
+        .replace(/<\/div>$/, '')
+        .replace(' style=""', '')
+        .replace(/<!--container-->/g, '')
+        .replace(/<!--ng-container-->/g, '');
+  }
+}
+
+export function createComponent(
+    name: string, template: ComponentTemplate<any>, directives: DirectiveTypesOrFactory = [],
+    pipes: PipeTypesOrFactory = [],
+    viewQuery: ComponentTemplate<any>| null = null): ComponentType<any> {
+  return class Component {
+    value: any;
+    static ngComponentDef = defineComponent({
+      type: Component,
+      selectors: [[name]],
+      factory: () => new Component,
+      template: template,
+      viewQuery: viewQuery,
+      features: [PublicFeature],
+      directives: directives,
+      pipes: pipes
+    });
+  };
+}
+
+export function createDirective(
+    name: string, {exportAs}: {exportAs?: string} = {}): DirectiveType<any> {
+  return class Directive {
+    static ngDirectiveDef = defineDirective({
+      type: Directive,
+      selectors: [['', name, '']],
+      factory: () => new Directive(),
+      features: [PublicFeature],
+      exportAs: exportAs,
+    });
+  };
+}
+
+
+// Verify that DOM is a type of render. This is here for error checking only and has no use.
+export const renderer: Renderer3 = null as any as Document;
+export const element: RElement = null as any as HTMLElement;
+export const text: RText = null as any as Text;
diff --git a/packages/core/test/render3/renderer_factory_spec.ts b/packages/core/test/render3/renderer_factory_spec.ts
new file mode 100644
index 000000000000..194a65671f27
--- /dev/null
+++ b/packages/core/test/render3/renderer_factory_spec.ts
@@ -0,0 +1,300 @@
+/**
+ * @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} from '@angular/animations';
+import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
+
+import {RendererType2, ViewEncapsulation} from '../../src/core';
+import {defineComponent} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, text, tick} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+import {createRendererType2} from '../../src/view/index';
+
+import {getAnimationRendererFactory2, getRendererFactory2} from './imported_renderer2';
+import {TemplateFixture, containerEl, document, renderComponent, renderToHtml, toHtml} from './render_util';
+
+describe('renderer factory lifecycle', () => {
+  let logs: string[] = [];
+  let rendererFactory = getRendererFactory2(document);
+  const createRender = rendererFactory.createRenderer;
+  rendererFactory.createRenderer = (hostElement: any, type: RendererType2 | null) => {
+    logs.push('create');
+    return createRender.apply(rendererFactory, [hostElement, type]);
+  };
+  rendererFactory.begin = () => logs.push('begin');
+  rendererFactory.end = () => logs.push('end');
+
+  class SomeComponent {
+    static ngComponentDef = defineComponent({
+      type: SomeComponent,
+      selectors: [['some-component']],
+      template: function(rf: RenderFlags, ctx: SomeComponent) {
+        logs.push('component');
+        if (rf & RenderFlags.Create) {
+          text(0, 'foo');
+        }
+      },
+      factory: () => new SomeComponent
+    });
+  }
+
+  class SomeComponentWhichThrows {
+    static ngComponentDef = defineComponent({
+      type: SomeComponentWhichThrows,
+      selectors: [['some-component-with-Error']],
+      template: function(rf: RenderFlags, ctx: SomeComponentWhichThrows) {
+        throw(new Error('SomeComponentWhichThrows threw'));
+      },
+      factory: () => new SomeComponentWhichThrows
+    });
+  }
+
+  function Template(rf: RenderFlags, ctx: any) {
+    logs.push('function');
+    if (rf & RenderFlags.Create) {
+      text(0, 'bar');
+    }
+  }
+
+  const directives = [SomeComponent, SomeComponentWhichThrows];
+
+  function TemplateWithComponent(rf: RenderFlags, ctx: any) {
+    logs.push('function_with_component');
+    if (rf & RenderFlags.Create) {
+      text(0, 'bar');
+      element(1, 'some-component');
+    }
+  }
+
+  beforeEach(() => { logs = []; });
+
+  it('should work with a component', () => {
+    const component = renderComponent(SomeComponent, {rendererFactory});
+    expect(logs).toEqual(['create', 'create', 'begin', 'component', 'end']);
+
+    logs = [];
+    tick(component);
+    expect(logs).toEqual(['begin', 'component', 'end']);
+  });
+
+  it('should work with a component which throws', () => {
+    expect(() => renderComponent(SomeComponentWhichThrows, {rendererFactory})).toThrow();
+    expect(logs).toEqual(['create', 'create', 'begin', 'end']);
+  });
+
+  it('should work with a template', () => {
+    renderToHtml(Template, {}, null, null, rendererFactory);
+    expect(logs).toEqual(['create', 'begin', 'function', 'end']);
+
+    logs = [];
+    renderToHtml(Template, {});
+    expect(logs).toEqual(['begin', 'function', 'end']);
+  });
+
+  it('should work with a template which contains a component', () => {
+    renderToHtml(TemplateWithComponent, {}, directives, null, rendererFactory);
+    expect(logs).toEqual(
+        ['create', 'begin', 'function_with_component', 'create', 'component', 'end']);
+
+    logs = [];
+    renderToHtml(TemplateWithComponent, {}, directives);
+    expect(logs).toEqual(['begin', 'function_with_component', 'component', 'end']);
+  });
+
+});
+
+describe('animation renderer factory', () => {
+  let eventLogs: string[] = [];
+  function getLog(): MockAnimationPlayer[] {
+    return MockAnimationDriver.log as MockAnimationPlayer[];
+  }
+
+  function resetLog() { MockAnimationDriver.log = []; }
+
+  beforeEach(() => {
+    eventLogs = [];
+    resetLog();
+  });
+
+  class SomeComponent {
+    static ngComponentDef = defineComponent({
+      type: SomeComponent,
+      selectors: [['some-component']],
+      template: function(rf: RenderFlags, ctx: SomeComponent) {
+        if (rf & RenderFlags.Create) {
+          text(0, 'foo');
+        }
+      },
+      factory: () => new SomeComponent
+    });
+  }
+
+  class SomeComponentWithAnimation {
+    // TODO(issue/24571): remove '!'.
+    exp !: string;
+    callback(event: AnimationEvent) {
+      eventLogs.push(`${event.fromState ? event.fromState : event.toState} - ${event.phaseName}`);
+    }
+    static ngComponentDef = defineComponent({
+      type: SomeComponentWithAnimation,
+      selectors: [['some-component']],
+      template: function(rf: RenderFlags, ctx: SomeComponentWithAnimation) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          {
+            listener('@myAnimation.start', ctx.callback.bind(ctx));
+            listener('@myAnimation.done', ctx.callback.bind(ctx));
+            text(1, 'foo');
+          }
+          elementEnd();
+        }
+        if (rf & RenderFlags.Update) {
+          elementProperty(0, '@myAnimation', bind(ctx.exp));
+        }
+      },
+      factory: () => new SomeComponentWithAnimation,
+      encapsulation: ViewEncapsulation.None,
+      styles: [],
+      data: {
+        animation: [{
+          type: 7,
+          name: 'myAnimation',
+          definitions: [{
+            type: 1,
+            expr: '* => on',
+            animation:
+                [{type: 4, styles: {type: 6, styles: {opacity: 1}, offset: null}, timings: 10}],
+            options: null
+          }],
+          options: {}
+        }]
+      },
+    });
+  }
+
+  it('should work with components without animations', () => {
+    renderComponent(SomeComponent, {rendererFactory: getAnimationRendererFactory2(document)});
+    expect(toHtml(containerEl)).toEqual('foo');
+  });
+
+  isBrowser && it('should work with animated components', (done) => {
+    const rendererFactory = getAnimationRendererFactory2(document);
+    const component = renderComponent(SomeComponentWithAnimation, {rendererFactory});
+    expect(toHtml(containerEl))
+        .toMatch(/<div class="ng-tns-c\d+-0 ng-trigger ng-trigger-myAnimation">foo<\/div>/);
+
+    component.exp = 'on';
+    tick(component);
+
+    const [player] = getLog();
+    expect(player.keyframes).toEqual([
+      {opacity: '*', offset: 0},
+      {opacity: 1, offset: 1},
+    ]);
+    player.finish();
+
+    rendererFactory.whenRenderingDone !().then(() => {
+      expect(eventLogs).toEqual(['void - start', 'void - done', 'on - start', 'on - done']);
+      done();
+    });
+  });
+});
+
+describe('Renderer2 destruction hooks', () => {
+  const rendererFactory = getRendererFactory2(document);
+
+  it('should call renderer.destroyNode for each node destroyed', () => {
+    let condition = true;
+
+    function createTemplate() {
+      elementStart(0, 'div');
+      { container(1); }
+      elementEnd();
+    }
+
+    function updateTemplate() {
+      containerRefreshStart(1);
+      {
+        if (condition) {
+          let rf1 = embeddedViewStart(1);
+          {
+            if (rf1 & RenderFlags.Create) {
+              element(0, 'span');
+              element(1, 'span');
+              element(2, 'span');
+            }
+          }
+          embeddedViewEnd();
+        }
+      }
+      containerRefreshEnd();
+    }
+
+    const t =
+        new TemplateFixture(createTemplate, updateTemplate, null, null, null, rendererFactory);
+
+    expect(t.html).toEqual('<div><span></span><span></span><span></span></div>');
+
+    condition = false;
+    t.update();
+    expect(t.html).toEqual('<div></div>');
+    expect(ngDevMode).toHaveProperties({rendererDestroy: 0, rendererDestroyNode: 3});
+  });
+
+  it('should call renderer.destroy for each component destroyed', () => {
+    class SimpleComponent {
+      static ngComponentDef = defineComponent({
+        type: SimpleComponent,
+        selectors: [['simple']],
+        template: function(rf: RenderFlags, ctx: SimpleComponent) {
+          if (rf & RenderFlags.Create) {
+            element(0, 'span');
+          }
+        },
+        factory: () => new SimpleComponent,
+      });
+    }
+
+    let condition = true;
+
+    function createTemplate() {
+      elementStart(0, 'div');
+      { container(1); }
+      elementEnd();
+    }
+
+    function updateTemplate() {
+      containerRefreshStart(1);
+      {
+        if (condition) {
+          let rf1 = embeddedViewStart(1);
+          {
+            if (rf1 & RenderFlags.Create) {
+              element(0, 'simple');
+              element(1, 'span');
+              element(2, 'simple');
+            }
+          }
+          embeddedViewEnd();
+        }
+      }
+      containerRefreshEnd();
+    }
+
+    const t = new TemplateFixture(
+        createTemplate, updateTemplate, [SimpleComponent], null, null, rendererFactory);
+
+    expect(t.html).toEqual(
+        '<div><simple><span></span></simple><span></span><simple><span></span></simple></div>');
+
+    condition = false;
+    t.update();
+    expect(t.html).toEqual('<div></div>');
+    expect(ngDevMode).toHaveProperties({rendererDestroy: 2, rendererDestroyNode: 3});
+  });
+});
diff --git a/packages/core/test/render3/styling_spec.ts b/packages/core/test/render3/styling_spec.ts
new file mode 100644
index 000000000000..46415d86bad6
--- /dev/null
+++ b/packages/core/test/render3/styling_spec.ts
@@ -0,0 +1,1130 @@
+/**
+ * @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 {elementEnd, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap} from '../../src/render3/instructions';
+import {InitialStylingFlags, RenderFlags} from '../../src/render3/interfaces/definition';
+import {LElementNode} from '../../src/render3/interfaces/node';
+import {Renderer3} from '../../src/render3/interfaces/renderer';
+import {StylingContext, StylingFlags, StylingIndex, allocStylingContext, createStylingContextTemplate, isContextDirty, renderStyling as _renderStyling, setContextDirty, updateClassProp, updateStyleProp, updateStylingMap} from '../../src/render3/styling';
+import {defaultStyleSanitizer} from '../../src/sanitization/sanitization';
+import {StyleSanitizeFn} from '../../src/sanitization/style_sanitizer';
+
+import {renderToHtml} from './render_util';
+
+describe('styling', () => {
+  let element: LElementNode|null = null;
+  beforeEach(() => { element = {} as any; });
+
+  function initContext(
+      styles?: (number | string)[] | null, classes?: (string | number | boolean)[] | null,
+      sanitizer?: StyleSanitizeFn | null): StylingContext {
+    return allocStylingContext(element, createStylingContextTemplate(classes, styles, sanitizer));
+  }
+
+  function renderStyles(context: StylingContext, renderer?: Renderer3) {
+    const styles: {[key: string]: any} = {};
+    _renderStyling(context, (renderer || {}) as Renderer3, styles);
+    return styles;
+  }
+
+  function trackStylesFactory() {
+    const styles: {[key: string]: any} = {};
+    return function(context: StylingContext, renderer?: Renderer3): {[key: string]: any} {
+      _renderStyling(context, (renderer || {}) as Renderer3, styles);
+      return styles;
+    };
+  }
+
+  function trackClassesFactory() {
+    const classes: {[className: string]: boolean} = {};
+    return function(context: StylingContext, renderer?: Renderer3): {[key: string]: any} {
+      _renderStyling(context, (renderer || {}) as Renderer3, {}, classes);
+      return classes;
+    };
+  }
+
+  function trackStylesAndClasses() {
+    const classes: {[className: string]: boolean} = {};
+    const styles: {[prop: string]: any} = {};
+    return function(context: StylingContext, renderer?: Renderer3): {[key: string]: any} {
+      _renderStyling(context, (renderer || {}) as Renderer3, styles, classes);
+      return [styles, classes];
+    };
+  }
+
+  function updateClasses(context: StylingContext, classes: string | {[key: string]: any} | null) {
+    updateStylingMap(context, classes, null);
+  }
+
+  function updateStyles(context: StylingContext, styles: {[key: string]: any} | null) {
+    updateStylingMap(context, null, styles);
+  }
+
+  function cleanStyle(a: number = 0, b: number = 0): number { return _clean(a, b, false, false); }
+
+  function cleanStyleWithSanitization(a: number = 0, b: number = 0): number {
+    return _clean(a, b, false, true);
+  }
+
+  function cleanClass(a: number, b: number) { return _clean(a, b, true); }
+
+  function _clean(
+      a: number = 0, b: number = 0, isClassBased: boolean, sanitizable?: boolean): number {
+    let num = 0;
+    if (a) {
+      num |= a << StylingFlags.BitCountSize;
+    }
+    if (b) {
+      num |= b << (StylingFlags.BitCountSize + StylingIndex.BitCountSize);
+    }
+    if (isClassBased) {
+      num |= StylingFlags.Class;
+    }
+    if (sanitizable) {
+      num |= StylingFlags.Sanitize;
+    }
+    return num;
+  }
+
+  function _dirty(
+      a: number = 0, b: number = 0, isClassBased: boolean, sanitizable?: boolean): number {
+    return _clean(a, b, isClassBased, sanitizable) | StylingFlags.Dirty;
+  }
+
+  function dirtyStyle(a: number = 0, b: number = 0): number {
+    return _dirty(a, b, false) | StylingFlags.Dirty;
+  }
+
+  function dirtyStyleWithSanitization(a: number = 0, b: number = 0): number {
+    return _dirty(a, b, false, true);
+  }
+
+  function dirtyClass(a: number, b: number) { return _dirty(a, b, true); }
+
+  describe('styles', () => {
+    describe('createStylingContextTemplate', () => {
+      it('should initialize empty template', () => {
+        const template = initContext();
+        expect(template).toEqual([element, null, [null], cleanStyle(0, 6), 0, null]);
+      });
+
+      it('should initialize static styles', () => {
+        const template =
+            initContext([InitialStylingFlags.VALUES_MODE, 'color', 'red', 'width', '10px']);
+        expect(template).toEqual([
+          element,
+          null,
+          [null, 'red', '10px'],
+          dirtyStyle(0, 12),  //
+          0,
+          null,
+
+          // #6
+          cleanStyle(1, 12),
+          'color',
+          null,
+
+          // #9
+          cleanStyle(2, 15),
+          'width',
+          null,
+
+          // #12
+          dirtyStyle(1, 6),
+          'color',
+          null,
+
+          // #15
+          dirtyStyle(2, 9),
+          'width',
+          null,
+        ]);
+      });
+    });
+
+    describe('instructions', () => {
+      it('should handle a combination of initial, multi and singular style values (in that order)',
+         () => {
+           function Template(rf: RenderFlags, ctx: any) {
+             if (rf & RenderFlags.Create) {
+               elementStart(0, 'span');
+               elementStyling([], [
+                 'width', 'height', 'opacity',  //
+                 InitialStylingFlags.VALUES_MODE, 'width', '100px', 'height', '100px', 'opacity',
+                 '0.5'
+               ]);
+               elementEnd();
+             }
+             if (rf & RenderFlags.Update) {
+               elementStylingMap(0, ctx.myStyles);
+               elementStyleProp(0, 0, ctx.myWidth);
+               elementStylingApply(0);
+             }
+           }
+
+           expect(renderToHtml(Template, {
+             myStyles: {width: '200px', height: '200px'},
+             myWidth: '300px'
+           })).toEqual('<span style="width: 300px; height: 200px; opacity: 0.5;"></span>');
+
+           expect(renderToHtml(Template, {myStyles: {width: '200px', height: null}, myWidth: null}))
+               .toEqual('<span style="width: 200px; height: 100px; opacity: 0.5;"></span>');
+         });
+    });
+
+    describe('helper functions', () => {
+      it('should build a list of multiple styling values', () => {
+        const getStyles = trackStylesFactory();
+        const stylingContext = initContext();
+        updateStyles(stylingContext, {
+          width: '100px',
+          height: '100px',
+        });
+        updateStyles(stylingContext, {height: '200px'});
+        expect(getStyles(stylingContext)).toEqual({width: null, height: '200px'});
+      });
+
+      it('should evaluate the delta between style changes when rendering occurs', () => {
+        const stylingContext =
+            initContext(['width', 'height', InitialStylingFlags.VALUES_MODE, 'width', '100px']);
+        updateStyles(stylingContext, {
+          height: '200px',
+        });
+        expect(renderStyles(stylingContext)).toEqual({width: '100px', height: '200px'});
+        expect(renderStyles(stylingContext)).toEqual({});
+        updateStyles(stylingContext, {
+          width: '100px',
+          height: '100px',
+        });
+        expect(renderStyles(stylingContext)).toEqual({height: '100px'});
+        updateStyleProp(stylingContext, 1, '100px');
+        expect(renderStyles(stylingContext)).toEqual({});
+        updateStyles(stylingContext, {
+          width: '100px',
+          height: '100px',
+        });
+        expect(renderStyles(stylingContext)).toEqual({});
+      });
+
+      it('should update individual values on a set of styles', () => {
+        const getStyles = trackStylesFactory();
+        const stylingContext = initContext(['width', 'height']);
+        updateStyles(stylingContext, {
+          width: '100px',
+          height: '100px',
+        });
+        updateStyleProp(stylingContext, 1, '200px');
+        expect(getStyles(stylingContext)).toEqual({width: '100px', height: '200px'});
+      });
+
+      it('should only mark itself as updated when one or more properties have been applied', () => {
+        const stylingContext = initContext();
+        expect(isContextDirty(stylingContext)).toBeFalsy();
+
+        updateStyles(stylingContext, {
+          width: '100px',
+          height: '100px',
+        });
+        expect(isContextDirty(stylingContext)).toBeTruthy();
+
+        setContextDirty(stylingContext, false);
+
+        updateStyles(stylingContext, {
+          width: '100px',
+          height: '100px',
+        });
+        expect(isContextDirty(stylingContext)).toBeFalsy();
+
+        updateStyles(stylingContext, {
+          width: '200px',
+          height: '100px',
+        });
+        expect(isContextDirty(stylingContext)).toBeTruthy();
+      });
+
+      it('should only mark itself as updated when any single properties have been applied', () => {
+        const stylingContext = initContext(['height']);
+        updateStyles(stylingContext, {
+          width: '100px',
+          height: '100px',
+        });
+
+        setContextDirty(stylingContext, false);
+
+        updateStyleProp(stylingContext, 0, '100px');
+        expect(isContextDirty(stylingContext)).toBeFalsy();
+
+        setContextDirty(stylingContext, false);
+
+        updateStyleProp(stylingContext, 0, '200px');
+        expect(isContextDirty(stylingContext)).toBeTruthy();
+      });
+
+      it('should prioritize multi and single styles over initial styles', () => {
+        const getStyles = trackStylesFactory();
+
+        const stylingContext = initContext([
+          'width', 'height', 'opacity', InitialStylingFlags.VALUES_MODE, 'width', '100px', 'height',
+          '100px', 'opacity', '0'
+        ]);
+
+        expect(getStyles(stylingContext)).toEqual({
+          width: '100px',
+          height: '100px',
+          opacity: '0',
+        });
+
+        updateStyles(stylingContext, {width: '200px', height: '200px'});
+
+        expect(getStyles(stylingContext)).toEqual({
+          width: '200px',
+          height: '200px',
+          opacity: '0',
+        });
+
+        updateStyleProp(stylingContext, 0, '300px');
+
+        expect(getStyles(stylingContext)).toEqual({
+          width: '300px',
+          height: '200px',
+          opacity: '0',
+        });
+
+        updateStyleProp(stylingContext, 0, null);
+
+        expect(getStyles(stylingContext)).toEqual({
+          width: '200px',
+          height: '200px',
+          opacity: '0',
+        });
+
+        updateStyles(stylingContext, {});
+
+        expect(getStyles(stylingContext)).toEqual({
+          width: '100px',
+          height: '100px',
+          opacity: '0',
+        });
+      });
+
+      it('should cleanup removed styles from the context once the styles are built', () => {
+        const stylingContext = initContext(['width', 'height']);
+        const getStyles = trackStylesFactory();
+
+        updateStyles(stylingContext, {width: '100px', height: '100px'});
+
+        expect(stylingContext).toEqual([
+          element,
+          null,
+          [null],
+          dirtyStyle(0, 12),  //
+          2,
+          null,
+
+          // #6
+          cleanStyle(0, 12),
+          'width',
+          null,
+
+          // #9
+          cleanStyle(0, 15),
+          'height',
+          null,
+
+          // #12
+          dirtyStyle(0, 6),
+          'width',
+          '100px',
+
+          // #15
+          dirtyStyle(0, 9),
+          'height',
+          '100px',
+        ]);
+
+        getStyles(stylingContext);
+        updateStyles(stylingContext, {width: '200px', opacity: '0'});
+
+        expect(stylingContext).toEqual([
+          element,
+          null,
+          [null],
+          dirtyStyle(0, 12),  //
+          2,
+          null,
+
+          // #6
+          cleanStyle(0, 12),
+          'width',
+          null,
+
+          // #9
+          cleanStyle(0, 18),
+          'height',
+          null,
+
+          // #12
+          dirtyStyle(0, 6),
+          'width',
+          '200px',
+
+          // #15
+          dirtyStyle(),
+          'opacity',
+          '0',
+
+          // #18
+          dirtyStyle(0, 9),
+          'height',
+          null,
+        ]);
+
+        getStyles(stylingContext);
+        expect(stylingContext).toEqual([
+          element,
+          null,
+          [null],
+          cleanStyle(0, 12),  //
+          2,
+          null,
+
+          // #6
+          cleanStyle(0, 12),
+          'width',
+          null,
+
+          // #9
+          cleanStyle(0, 18),
+          'height',
+          null,
+
+          // #12
+          cleanStyle(0, 6),
+          'width',
+          '200px',
+
+          // #15
+          cleanStyle(),
+          'opacity',
+          '0',
+
+          // #18
+          cleanStyle(0, 9),
+          'height',
+          null,
+        ]);
+
+        updateStyles(stylingContext, {width: null});
+        updateStyleProp(stylingContext, 0, '300px');
+
+        expect(stylingContext).toEqual([
+          element,
+          null,
+          [null],
+          dirtyStyle(0, 12),  //
+          2,
+          null,
+
+          // #6
+          dirtyStyle(0, 12),
+          'width',
+          '300px',
+
+          // #9
+          cleanStyle(0, 18),
+          'height',
+          null,
+
+          // #12
+          cleanStyle(0, 6),
+          'width',
+          null,
+
+          // #15
+          dirtyStyle(),
+          'opacity',
+          null,
+
+          // #18
+          cleanStyle(0, 9),
+          'height',
+          null,
+        ]);
+
+        getStyles(stylingContext);
+
+        updateStyleProp(stylingContext, 0, null);
+        expect(stylingContext).toEqual([
+          element,
+          null,
+          [null],
+          dirtyStyle(0, 12),  //
+          2,
+          null,
+
+          // #6
+          dirtyStyle(0, 12),
+          'width',
+          null,
+
+          // #9
+          cleanStyle(0, 18),
+          'height',
+          null,
+
+          // #12
+          cleanStyle(0, 6),
+          'width',
+          null,
+
+          // #15
+          cleanStyle(),
+          'opacity',
+          null,
+
+          // #18
+          cleanStyle(0, 9),
+          'height',
+          null,
+        ]);
+      });
+
+      it('should find the next available space in the context when data is added after being removed before',
+         () => {
+           const stylingContext = initContext(['lineHeight']);
+           const getStyles = trackStylesFactory();
+
+           updateStyles(stylingContext, {width: '100px', height: '100px', opacity: '0.5'});
+
+           expect(stylingContext).toEqual([
+             element,
+             null,
+             [null],
+             dirtyStyle(0, 9),  //
+             1,
+             null,
+
+             // #6
+             cleanStyle(0, 18),
+             'lineHeight',
+             null,
+
+             // #9
+             dirtyStyle(),
+             'width',
+             '100px',
+
+             // #12
+             dirtyStyle(),
+             'height',
+             '100px',
+
+             // #15
+             dirtyStyle(),
+             'opacity',
+             '0.5',
+
+             // #18
+             cleanStyle(0, 6),
+             'lineHeight',
+             null,
+           ]);
+
+           getStyles(stylingContext);
+
+           updateStyles(stylingContext, {});
+           expect(stylingContext).toEqual([
+             element,
+             null,
+             [null],
+             dirtyStyle(0, 9),  //
+             1,
+             null,
+
+             // #6
+             cleanStyle(0, 18),
+             'lineHeight',
+             null,
+
+             // #9
+             dirtyStyle(),
+             'width',
+             null,
+
+             // #12
+             dirtyStyle(),
+             'height',
+             null,
+
+             // #15
+             dirtyStyle(),
+             'opacity',
+             null,
+
+             // #18
+             cleanStyle(0, 6),
+             'lineHeight',
+             null,
+           ]);
+
+           getStyles(stylingContext);
+           updateStyles(stylingContext, {
+             borderWidth: '5px',
+           });
+
+           expect(stylingContext).toEqual([
+             element,
+             null,
+             [null],
+             dirtyStyle(0, 9),  //
+             1,
+             null,
+
+             // #6
+             cleanStyle(0, 21),
+             'lineHeight',
+             null,
+
+             // #9
+             dirtyStyle(),
+             'borderWidth',
+             '5px',
+
+             // #12
+             cleanStyle(),
+             'width',
+             null,
+
+             // #15
+             cleanStyle(),
+             'height',
+             null,
+
+             // #18
+             cleanStyle(),
+             'opacity',
+             null,
+
+             // #21
+             cleanStyle(0, 6),
+             'lineHeight',
+             null,
+           ]);
+
+           updateStyleProp(stylingContext, 0, '200px');
+
+           expect(stylingContext).toEqual([
+             element,
+             null,
+             [null],
+             dirtyStyle(0, 9),  //
+             1,
+             null,
+
+             // #6
+             dirtyStyle(0, 21),
+             'lineHeight',
+             '200px',
+
+             // #9
+             dirtyStyle(),
+             'borderWidth',
+             '5px',
+
+             // #12
+             cleanStyle(),
+             'width',
+             null,
+
+             // #15
+             cleanStyle(),
+             'height',
+             null,
+
+             // #18
+             cleanStyle(),
+             'opacity',
+             null,
+
+             // #21
+             cleanStyle(0, 6),
+             'lineHeight',
+             null,
+           ]);
+
+           updateStyles(stylingContext, {borderWidth: '15px', borderColor: 'red'});
+
+           expect(stylingContext).toEqual([
+             element,
+             null,
+             [null],
+             dirtyStyle(0, 9),  //
+             1,
+             null,
+
+             // #6
+             dirtyStyle(0, 24),
+             'lineHeight',
+             '200px',
+
+             // #9
+             dirtyStyle(),
+             'borderWidth',
+             '15px',
+
+             // #12
+             dirtyStyle(),
+             'borderColor',
+             'red',
+
+             // #15
+             cleanStyle(),
+             'width',
+             null,
+
+             // #18
+             cleanStyle(),
+             'height',
+             null,
+
+             // #21
+             cleanStyle(),
+             'opacity',
+             null,
+
+             // #24
+             cleanStyle(0, 6),
+             'lineHeight',
+             null,
+           ]);
+         });
+
+      it('should render all data as not being dirty after the styles are built', () => {
+        const getStyles = trackStylesFactory();
+        const stylingContext = initContext(['height']);
+
+        updateStyles(stylingContext, {
+          width: '100px',
+        });
+
+        updateStyleProp(stylingContext, 0, '200px');
+
+        expect(stylingContext).toEqual([
+          element,
+          null,
+          [null],
+          dirtyStyle(0, 9),  //
+          1,
+          null,
+
+          // #6
+          dirtyStyle(0, 12),
+          'height',
+          '200px',
+
+          // #6
+          dirtyStyle(),
+          'width',
+          '100px',
+
+          // #12
+          cleanStyle(0, 6),
+          'height',
+          null,
+        ]);
+
+        getStyles(stylingContext);
+
+        expect(stylingContext).toEqual([
+          element,
+          null,
+          [null],
+          cleanStyle(0, 9),  //
+          1,
+          null,
+
+          // #6
+          cleanStyle(0, 12),
+          'height',
+          '200px',
+
+          // #6
+          cleanStyle(),
+          'width',
+          '100px',
+
+          // #12
+          cleanStyle(0, 6),
+          'height',
+          null,
+        ]);
+      });
+
+      it('should mark styles that may contain url values as being sanitizable (when a sanitizer is passed in)',
+         () => {
+           const getStyles = trackStylesFactory();
+           const initialStyles = ['border-image', 'border-width'];
+           const styleSanitizer = defaultStyleSanitizer;
+           const stylingContext = initContext(initialStyles, null, styleSanitizer);
+
+           updateStyleProp(stylingContext, 0, 'url(foo.jpg)');
+           updateStyleProp(stylingContext, 1, '100px');
+
+           expect(stylingContext).toEqual([
+             element,
+             styleSanitizer,
+             [null],
+             dirtyStyle(0, 12),  //
+             2,
+             null,
+
+             // #6
+             dirtyStyleWithSanitization(0, 12),
+             'border-image',
+             'url(foo.jpg)',
+
+             // #9
+             dirtyStyle(0, 15),
+             'border-width',
+             '100px',
+
+             // #12
+             cleanStyleWithSanitization(0, 6),
+             'border-image',
+             null,
+
+             // #15
+             cleanStyle(0, 9),
+             'border-width',
+             null,
+           ]);
+
+           updateStyles(stylingContext, {'background-image': 'unsafe'});
+
+           expect(stylingContext).toEqual([
+             element,
+             styleSanitizer,
+             [null],
+             dirtyStyle(0, 12),  //
+             2,
+             null,
+
+             // #6
+             dirtyStyleWithSanitization(0, 15),
+             'border-image',
+             'url(foo.jpg)',
+
+             // #9
+             dirtyStyle(0, 18),
+             'border-width',
+             '100px',
+
+             // #12
+             dirtyStyleWithSanitization(0, 0),
+             'background-image',
+             'unsafe',
+
+             // #15
+             cleanStyleWithSanitization(0, 6),
+             'border-image',
+             null,
+
+             // #18
+             cleanStyle(0, 9),
+             'border-width',
+             null,
+           ]);
+
+           getStyles(stylingContext);
+
+           expect(stylingContext).toEqual([
+             element,
+             styleSanitizer,
+             [null],
+             cleanStyle(0, 12),  //
+             2,
+             null,
+
+             // #6
+             cleanStyleWithSanitization(0, 15),
+             'border-image',
+             'url(foo.jpg)',
+
+             // #9
+             cleanStyle(0, 18),
+             'border-width',
+             '100px',
+
+             // #12
+             cleanStyleWithSanitization(0, 0),
+             'background-image',
+             'unsafe',
+
+             // #15
+             cleanStyleWithSanitization(0, 6),
+             'border-image',
+             null,
+
+             // #18
+             cleanStyle(0, 9),
+             'border-width',
+             null,
+           ]);
+         });
+    });
+  });
+
+  describe('classes', () => {
+    it('should initialize with the provided classes', () => {
+      const template =
+          initContext(null, [InitialStylingFlags.VALUES_MODE, 'one', true, 'two', true]);
+      expect(template).toEqual([
+        element, null, [null, true, true], dirtyStyle(0, 12),  //
+        0, null,
+
+        // #6
+        cleanClass(1, 12), 'one', null,
+
+        // #9
+        cleanClass(2, 15), 'two', null,
+
+        // #12
+        dirtyClass(1, 6), 'one', null,
+
+        // #15
+        dirtyClass(2, 9), 'two', null
+      ]);
+    });
+
+    it('should update multi class properties against the static classes', () => {
+      const getClasses = trackClassesFactory();
+      const stylingContext = initContext(null, ['bar']);
+      expect(getClasses(stylingContext)).toEqual({});
+      updateClasses(stylingContext, {foo: true, bar: false});
+      expect(getClasses(stylingContext)).toEqual({'foo': true, 'bar': false});
+      updateClasses(stylingContext, 'bar');
+      expect(getClasses(stylingContext)).toEqual({'foo': false, 'bar': true});
+    });
+
+    it('should update single class properties against the static classes', () => {
+      const getClasses = trackClassesFactory();
+      const stylingContext =
+          initContext(null, ['bar', 'foo', InitialStylingFlags.VALUES_MODE, 'bar', true]);
+      expect(getClasses(stylingContext)).toEqual({'bar': true});
+
+      updateClassProp(stylingContext, 0, true);
+      updateClassProp(stylingContext, 1, true);
+      expect(getClasses(stylingContext)).toEqual({'bar': true, 'foo': true});
+
+      updateClassProp(stylingContext, 0, false);
+      updateClassProp(stylingContext, 1, false);
+      expect(getClasses(stylingContext)).toEqual({'bar': true, 'foo': false});
+    });
+
+    it('should understand updating multi-classes using a string-based value while respecting single class-based props',
+       () => {
+         const getClasses = trackClassesFactory();
+         const stylingContext = initContext(null, ['guy']);
+         expect(getClasses(stylingContext)).toEqual({});
+
+         updateStylingMap(stylingContext, 'foo bar guy');
+         expect(getClasses(stylingContext)).toEqual({'foo': true, 'bar': true, 'guy': true});
+
+         updateStylingMap(stylingContext, 'foo man');
+         updateClassProp(stylingContext, 0, true);
+         expect(getClasses(stylingContext))
+             .toEqual({'foo': true, 'man': true, 'bar': false, 'guy': true});
+       });
+
+    it('should house itself inside the context alongside styling in harmony', () => {
+      const getStylesAndClasses = trackStylesAndClasses();
+      const initialStyles = ['width', 'height', InitialStylingFlags.VALUES_MODE, 'width', '100px'];
+      const initialClasses = ['wide', 'tall', InitialStylingFlags.VALUES_MODE, 'wide', true];
+      const stylingContext = initContext(initialStyles, initialClasses);
+      expect(stylingContext).toEqual([
+        element,
+        null,
+        [null, '100px', true],
+        dirtyStyle(0, 18),  //
+        2,
+        null,
+
+        // #6
+        cleanStyle(1, 18),
+        'width',
+        null,
+
+        // #9
+        cleanStyle(0, 21),
+        'height',
+        null,
+
+        // #12
+        cleanClass(2, 24),
+        'wide',
+        null,
+
+        // #15
+        cleanClass(0, 27),
+        'tall',
+        null,
+
+        // #18
+        dirtyStyle(1, 6),
+        'width',
+        null,
+
+        // #21
+        cleanStyle(0, 9),
+        'height',
+        null,
+
+        // #24
+        dirtyClass(2, 12),
+        'wide',
+        null,
+
+        // #27
+        cleanClass(0, 15),
+        'tall',
+        null,
+      ]);
+
+      expect(getStylesAndClasses(stylingContext)).toEqual([{width: '100px'}, {wide: true}]);
+
+      updateStylingMap(stylingContext, 'tall round', {width: '200px', opacity: '0.5'});
+      expect(stylingContext).toEqual([
+        element,
+        null,
+        [null, '100px', true],
+        dirtyStyle(0, 18),  //
+        2,
+        'tall round',
+
+        // #6
+        cleanStyle(1, 18),
+        'width',
+        null,
+
+        // #9
+        cleanStyle(0, 33),
+        'height',
+        null,
+
+        // #12
+        cleanClass(2, 30),
+        'wide',
+        null,
+
+        // #15
+        cleanClass(0, 24),
+        'tall',
+        null,
+
+        // #18
+        dirtyStyle(1, 6),
+        'width',
+        '200px',
+
+        // #21
+        dirtyStyle(0, 0),
+        'opacity',
+        '0.5',
+
+        // #24
+        dirtyClass(0, 15),
+        'tall',
+        true,
+
+        // #27
+        dirtyClass(0, 0),
+        'round',
+        true,
+
+        // #30
+        cleanClass(2, 12),
+        'wide',
+        null,
+
+        // #33
+        cleanStyle(0, 9),
+        'height',
+        null,
+      ]);
+
+      expect(getStylesAndClasses(stylingContext)).toEqual([
+        {width: '200px', opacity: '0.5'}, {tall: true, round: true, wide: true}
+      ]);
+
+      updateStylingMap(stylingContext, {tall: true, wide: true}, {width: '500px'});
+      updateStyleProp(stylingContext, 0, '300px');
+
+      expect(stylingContext).toEqual([
+        element,
+        null,
+        [null, '100px', true],
+        dirtyStyle(0, 18),  //
+        2,
+        null,
+
+        // #6
+        dirtyStyle(1, 18),
+        'width',
+        '300px',
+
+        // #9
+        cleanStyle(0, 33),
+        'height',
+        null,
+
+        // #12
+        cleanClass(2, 24),
+        'wide',
+        null,
+
+        // #15
+        cleanClass(0, 21),
+        'tall',
+        null,
+
+        // #18
+        cleanStyle(1, 6),
+        'width',
+        '500px',
+
+        // #21
+        cleanClass(0, 15),
+        'tall',
+        true,
+
+        // #24
+        cleanClass(2, 12),
+        'wide',
+        true,
+
+        // #27
+        dirtyClass(0, 0),
+        'round',
+        null,
+
+        // #30
+        dirtyStyle(0, 0),
+        'opacity',
+        null,
+
+        // #33
+        cleanStyle(0, 9),
+        'height',
+        null,
+      ]);
+
+      expect(getStylesAndClasses(stylingContext)).toEqual([
+        {width: '300px', opacity: null}, {tall: true, round: false, wide: true}
+      ]);
+    });
+  });
+});
diff --git a/packages/core/test/render3/testing_spec.ts b/packages/core/test/render3/testing_spec.ts
new file mode 100644
index 000000000000..850534020345
--- /dev/null
+++ b/packages/core/test/render3/testing_spec.ts
@@ -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
+ */
+
+import {withBody} from '@angular/private/testing';
+
+describe('testing', () => {
+  describe('withBody', () => {
+    let passed: boolean;
+
+    beforeEach(() => passed = false);
+    afterEach(() => expect(passed).toEqual(true));
+
+    it('should set up body', withBody('<span>works!</span>', () => {
+         expect(document.body.innerHTML).toEqual('<span>works!</span>');
+         passed = true;
+       }));
+
+    it('should support promises', withBody('<span>works!</span>', () => {
+         return Promise.resolve(true).then(() => passed = true);
+       }));
+
+    it('should support async and await', withBody('<span>works!</span>', async() => {
+         await Promise.resolve(true);
+         passed = true;
+       }));
+  });
+
+
+  describe('domino', () => {
+    it('should have document present', () => {
+      // In Browser this tests passes, bun we also want to make sure we pass in node.js
+      // We expect that node.js will load domino for us.
+      expect(document).toBeTruthy();
+    });
+  });
+
+  describe('requestAnimationFrame', () => {
+    it('should have requestAnimationFrame', (done) => {
+      // In Browser we have requestAnimationFrame, but verify that we also have it node.js
+      requestAnimationFrame(done);
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/core/test/render3/util_spec.ts b/packages/core/test/render3/util_spec.ts
new file mode 100644
index 000000000000..02416e653dcf
--- /dev/null
+++ b/packages/core/test/render3/util_spec.ts
@@ -0,0 +1,84 @@
+/**
+ * @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 {flatten, isDifferent} from '../../src/render3/util';
+
+describe('util', () => {
+
+  describe('isDifferent', () => {
+
+    describe('checkNoChangeMode = false', () => {
+      it('should mark non-equal arguments as different', () => {
+        expect(isDifferent({}, {}, false)).toBeTruthy();
+        expect(isDifferent('foo', 'bar', false)).toBeTruthy();
+        expect(isDifferent(0, 1, false)).toBeTruthy();
+      });
+
+      it('should not mark equal arguments as different', () => {
+        const obj = {};
+        expect(isDifferent(obj, obj, false)).toBeFalsy();
+        expect(isDifferent('foo', 'foo', false)).toBeFalsy();
+        expect(isDifferent(1, 1, false)).toBeFalsy();
+      });
+
+      it('should not mark NaN as different',
+         () => { expect(isDifferent(NaN, NaN, false)).toBeFalsy(); });
+
+      it('should mark NaN with other values as different', () => {
+        expect(isDifferent(NaN, 'foo', false)).toBeTruthy();
+        expect(isDifferent(5, NaN, false)).toBeTruthy();
+      });
+    });
+
+    describe('checkNoChangeMode = true', () => {
+      // Assert relaxed constraint in checkNoChangeMode
+      it('should not mark non-equal arrays, object and function as different', () => {
+        expect(isDifferent([], [], true)).toBeFalsy();
+        expect(isDifferent(() => 0, () => 0, true)).toBeFalsy();
+        expect(isDifferent({}, {}, true)).toBeFalsy();
+      });
+
+      it('should mark non-equal arguments as different', () => {
+        expect(isDifferent('foo', 'bar', true)).toBeTruthy();
+        expect(isDifferent(0, 1, true)).toBeTruthy();
+      });
+
+      it('should not mark equal arguments as different', () => {
+        const obj = {};
+        expect(isDifferent(obj, obj, false)).toBeFalsy();
+        expect(isDifferent('foo', 'foo', false)).toBeFalsy();
+        expect(isDifferent(1, 1, false)).toBeFalsy();
+      });
+
+      it('should not mark NaN as different',
+         () => { expect(isDifferent(NaN, NaN, false)).toBeFalsy(); });
+
+      it('should mark NaN with other values as different', () => {
+        expect(isDifferent(NaN, 'foo', false)).toBeTruthy();
+        expect(isDifferent(5, NaN, false)).toBeTruthy();
+      });
+    });
+
+  });
+
+  describe('flatten', () => {
+
+    it('should flatten an empty array', () => { expect(flatten([])).toEqual([]); });
+
+    it('should flatten a flat array', () => { expect(flatten([1, 2, 3])).toEqual([1, 2, 3]); });
+
+    it('should flatten a nested array', () => {
+      expect(flatten([1, [2], 3])).toEqual([1, 2, 3]);
+      expect(flatten([[1], 2, [3]])).toEqual([1, 2, 3]);
+      expect(flatten([1, [2, [3]], 4])).toEqual([1, 2, 3, 4]);
+      expect(flatten([1, [2, [3]], [4]])).toEqual([1, 2, 3, 4]);
+      expect(flatten([1, [2, [3]], [[[4]]]])).toEqual([1, 2, 3, 4]);
+      expect(flatten([1, [], 2])).toEqual([1, 2]);
+    });
+  });
+});
diff --git a/packages/core/test/render3/view_container_ref_spec.ts b/packages/core/test/render3/view_container_ref_spec.ts
new file mode 100644
index 000000000000..4aa357dd5fa4
--- /dev/null
+++ b/packages/core/test/render3/view_container_ref_spec.ts
@@ -0,0 +1,1617 @@
+/**
+ * @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, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, NgModuleRef, Pipe, PipeTransform, RendererFactory2, TemplateRef, ViewContainerRef, createInjector, defineInjector, ɵAPP_ROOT as APP_ROOT, ɵNgModuleDef as NgModuleDef} from '../../src/core';
+import {getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from '../../src/render3/di';
+import {AttributeMarker, NgOnChangesFeature, defineComponent, defineDirective, definePipe, injectComponentFactoryResolver, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation3, load, loadDirective, nextContext, projection, projectionDef, reserveSlots, text, textBinding} from '../../src/render3/instructions';
+import {RenderFlags} from '../../src/render3/interfaces/definition';
+import {NgModuleFactory} from '../../src/render3/ng_module_ref';
+import {pipe, pipeBind1} from '../../src/render3/pipe';
+import {NgForOf} from '../../test/render3/common_with_def';
+
+import {getRendererFactory2} from './imported_renderer2';
+import {ComponentFixture, TemplateFixture, createComponent} from './render_util';
+
+describe('ViewContainerRef', () => {
+  let directiveInstance: DirectiveWithVCRef|null;
+
+  beforeEach(() => { directiveInstance = null; });
+
+  class DirectiveWithVCRef {
+    static ngDirectiveDef = defineDirective({
+      type: DirectiveWithVCRef,
+      selectors: [['', 'vcref', '']],
+      factory: () => directiveInstance = new DirectiveWithVCRef(
+                   injectViewContainerRef(), injectComponentFactoryResolver()),
+      inputs: {tplRef: 'tplRef'}
+    });
+
+    // TODO(issue/24571): remove '!'.
+    tplRef !: TemplateRef<{}>;
+
+    // injecting a ViewContainerRef to create a dynamic container in which embedded views will be
+    // created
+    constructor(public vcref: ViewContainerRef, public cfr: ComponentFactoryResolver) {}
+  }
+
+  describe('API', () => {
+    function embeddedTemplate(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        text(0);
+      }
+      if (rf & RenderFlags.Update) {
+        textBinding(0, bind(ctx.name));
+      }
+    }
+
+    function createView(s: string, index?: number): EmbeddedViewRef<any> {
+      return directiveInstance !.vcref.createEmbeddedView(
+          directiveInstance !.tplRef, {name: s}, index);
+    }
+
+    /**
+     * <ng-template #foo>
+     *   {{name}}
+     * </ng-template>
+     * <p vcref="" [tplRef]="foo">
+     * </p>
+     */
+    function createTemplate() {
+      container(0, embeddedTemplate);
+      element(1, 'p', ['vcref', '']);
+    }
+
+    function updateTemplate() {
+      const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+      elementProperty(1, 'tplRef', bind(tplRef));
+    }
+
+    describe('createEmbeddedView (incl. insert)', () => {
+      it('should work on elements', () => {
+        function createTemplate() {
+          container(0, embeddedTemplate);
+          element(1, 'header', ['vcref', '']);
+          element(2, 'footer');
+        }
+
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        expect(fixture.html).toEqual('<header vcref=""></header><footer></footer>');
+
+        createView('A');
+        fixture.update();
+        expect(fixture.html).toEqual('<header vcref=""></header>A<footer></footer>');
+
+        createView('B');
+        createView('C');
+        fixture.update();
+        expect(fixture.html).toEqual('<header vcref=""></header>ABC<footer></footer>');
+
+        createView('Y', 0);
+        fixture.update();
+        expect(fixture.html).toEqual('<header vcref=""></header>YABC<footer></footer>');
+
+        expect(() => { createView('Z', -1); }).toThrow();
+        expect(() => { createView('Z', 5); }).toThrow();
+      });
+
+      it('should work on components', () => {
+        const HeaderComponent =
+            createComponent('header-cmp', function(rf: RenderFlags, ctx: any) {});
+
+        function createTemplate() {
+          container(0, embeddedTemplate);
+          element(1, 'header-cmp', ['vcref', '']);
+          element(2, 'footer');
+        }
+
+        const fixture = new TemplateFixture(
+            createTemplate, updateTemplate, [HeaderComponent, DirectiveWithVCRef]);
+        expect(fixture.html).toEqual('<header-cmp vcref=""></header-cmp><footer></footer>');
+
+        createView('A');
+        fixture.update();
+        expect(fixture.html).toEqual('<header-cmp vcref=""></header-cmp>A<footer></footer>');
+
+        createView('B');
+        createView('C');
+        fixture.update();
+        expect(fixture.html).toEqual('<header-cmp vcref=""></header-cmp>ABC<footer></footer>');
+
+        createView('Y', 0);
+        fixture.update();
+        expect(fixture.html).toEqual('<header-cmp vcref=""></header-cmp>YABC<footer></footer>');
+
+        expect(() => { createView('Z', -1); }).toThrow();
+        expect(() => { createView('Z', 5); }).toThrow();
+      });
+
+      it('should work with multiple instances with vcrefs', () => {
+        let firstDir: DirectiveWithVCRef;
+        let secondDir: DirectiveWithVCRef;
+
+        function createTemplate() {
+          container(0, embeddedTemplate);
+          element(1, 'div', ['vcref', '']);
+          element(2, 'div', ['vcref', '']);
+
+          // for testing only:
+          firstDir = loadDirective(0);
+          secondDir = loadDirective(1);
+        }
+
+        function update() {
+          // Hack until we can create local refs to templates
+          const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+          elementProperty(1, 'tplRef', bind(tplRef));
+          elementProperty(2, 'tplRef', bind(tplRef));
+        }
+
+        const fixture = new TemplateFixture(createTemplate, update, [DirectiveWithVCRef]);
+        expect(fixture.html).toEqual('<div vcref=""></div><div vcref=""></div>');
+
+        firstDir !.vcref.createEmbeddedView(firstDir !.tplRef, {name: 'A'});
+        secondDir !.vcref.createEmbeddedView(secondDir !.tplRef, {name: 'B'});
+        fixture.update();
+        expect(fixture.html).toEqual('<div vcref=""></div>A<div vcref=""></div>B');
+      });
+
+      it('should work on containers', () => {
+        function createTemplate() {
+          container(0, embeddedTemplate, null, ['vcref', '']);
+          element(1, 'footer');
+        }
+
+        function updateTemplate() {
+          const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+          elementProperty(0, 'tplRef', bind(tplRef));
+          containerRefreshStart(0);
+          containerRefreshEnd();
+        }
+
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        expect(fixture.html).toEqual('<footer></footer>');
+
+        createView('A');
+        fixture.update();
+        expect(fixture.html).toEqual('A<footer></footer>');
+
+        createView('B');
+        createView('C');
+        fixture.update();
+        expect(fixture.html).toEqual('ABC<footer></footer>');
+
+        createView('Y', 0);
+        fixture.update();
+        expect(fixture.html).toEqual('YABC<footer></footer>');
+
+        expect(() => { createView('Z', -1); }).toThrow();
+        expect(() => { createView('Z', 5); }).toThrow();
+      });
+
+      it('should add embedded views at the right position in the DOM tree (ng-template next to other ng-template)',
+         () => {
+           let directiveInstances: TestDirective[] = [];
+
+           class TestDirective {
+             static ngDirectiveDef = defineDirective({
+               type: TestDirective,
+               selectors: [['', 'testdir', '']],
+               factory: () => {
+                 const instance = new TestDirective(injectViewContainerRef(), injectTemplateRef());
+
+                 directiveInstances.push(instance);
+
+                 return instance;
+               }
+             });
+
+             constructor(private _vcRef: ViewContainerRef, private _tplRef: TemplateRef<{}>) {}
+
+             insertTpl(ctx: {}) { this._vcRef.createEmbeddedView(this._tplRef, ctx); }
+
+             remove(index?: number) { this._vcRef.remove(index); }
+           }
+
+           function EmbeddedTemplateA(rf: RenderFlags, ctx: any) {
+             if (rf & RenderFlags.Create) {
+               text(0, 'A');
+             }
+           }
+
+           function EmbeddedTemplateB(rf: RenderFlags, ctx: any) {
+             if (rf & RenderFlags.Create) {
+               text(0, 'B');
+             }
+           }
+
+           /**
+            * before|
+            * <ng-template directive>A<ng-template>
+            * <ng-template directive>B<ng-template>
+            * |after
+            */
+           class TestComponent {
+             // TODO(issue/24571): remove '!'.
+             testDir !: TestDirective;
+             static ngComponentDef = defineComponent({
+               type: TestComponent,
+               selectors: [['test-cmp']],
+               factory: () => new TestComponent(),
+               template: (rf: RenderFlags, cmp: TestComponent) => {
+                 if (rf & RenderFlags.Create) {
+                   text(0, 'before|');
+                   container(1, EmbeddedTemplateA, null, ['testdir', '']);
+                   container(2, EmbeddedTemplateB, null, ['testdir', '']);
+                   text(3, '|after');
+                 }
+               },
+               directives: [TestDirective]
+             });
+           }
+
+           const fixture = new ComponentFixture(TestComponent);
+           expect(fixture.html).toEqual('before||after');
+
+           directiveInstances ![1].insertTpl({});
+           expect(fixture.html).toEqual('before|B|after');
+
+           directiveInstances ![0].insertTpl({});
+           expect(fixture.html).toEqual('before|AB|after');
+         });
+
+
+      it('should add embedded views at the right position in the DOM tree (ng-template next to a JS block)',
+         () => {
+           let directiveInstance: TestDirective;
+
+           class TestDirective {
+             static ngDirectiveDef = defineDirective({
+               type: TestDirective,
+               selectors: [['', 'testdir', '']],
+               factory: () => directiveInstance =
+                            new TestDirective(injectViewContainerRef(), injectTemplateRef())
+             });
+
+             constructor(private _vcRef: ViewContainerRef, private _tplRef: TemplateRef<{}>) {}
+
+             insertTpl(ctx: {}) { this._vcRef.createEmbeddedView(this._tplRef, ctx); }
+
+             insertTpl2(ctx: {}) {
+               const viewRef = this._tplRef.createEmbeddedView(ctx);
+               this._vcRef.insert(viewRef);
+             }
+
+             remove(index?: number) { this._vcRef.remove(index); }
+           }
+
+           function EmbeddedTemplateA(rf: RenderFlags, ctx: any) {
+             if (rf & RenderFlags.Create) {
+               text(0, 'A');
+             }
+           }
+
+           /**
+            * before|
+            * <ng-template testDir>A<ng-template>
+            * % if (condition) {
+            *  B
+            * % }
+            * |after
+            */
+           class TestComponent {
+             condition = false;
+             // TODO(issue/24571): remove '!'.
+             testDir !: TestDirective;
+             static ngComponentDef = defineComponent({
+               type: TestComponent,
+               selectors: [['test-cmp']],
+               factory: () => new TestComponent(),
+               template: (rf: RenderFlags, cmp: TestComponent) => {
+                 if (rf & RenderFlags.Create) {
+                   text(0, 'before|');
+                   container(1, EmbeddedTemplateA, null, ['testdir', '']);
+                   container(2);
+                   text(3, '|after');
+                 }
+                 if (rf & RenderFlags.Update) {
+                   containerRefreshStart(2);
+                   {
+                     if (cmp.condition) {
+                       let rf1 = embeddedViewStart(0);
+                       {
+                         if (rf1 & RenderFlags.Create) {
+                           text(0, 'B');
+                         }
+                       }
+                       embeddedViewEnd();
+                     }
+                   }
+                   containerRefreshEnd();
+                 }
+               },
+               directives: [TestDirective]
+             });
+           }
+
+           const fixture = new ComponentFixture(TestComponent);
+           expect(fixture.html).toEqual('before||after');
+
+           fixture.component.condition = true;
+           fixture.update();
+           expect(fixture.html).toEqual('before|B|after');
+
+           directiveInstance !.insertTpl({});
+           expect(fixture.html).toEqual('before|AB|after');
+
+           fixture.component.condition = false;
+           fixture.update();
+           expect(fixture.html).toEqual('before|A|after');
+
+           directiveInstance !.insertTpl2({});
+           expect(fixture.html).toEqual('before|AA|after');
+
+           fixture.component.condition = true;
+           fixture.update();
+           expect(fixture.html).toEqual('before|AAB|after');
+         });
+
+      it('should apply directives and pipes of the host view to the TemplateRef', () => {
+        @Component({selector: 'child', template: `{{name}}`})
+        class Child {
+          // TODO(issue/24571): remove '!'.
+          name !: string;
+
+          static ngComponentDef = defineComponent({
+            type: Child,
+            selectors: [['child']],
+            factory: () => new Child(),
+            template: (rf: RenderFlags, cmp: Child) => {
+              if (rf & RenderFlags.Create) {
+                text(0);
+              }
+              if (rf & RenderFlags.Update) {
+                textBinding(0, interpolation1('', cmp.name, ''));
+              }
+            },
+            inputs: {name: 'name'}
+          });
+        }
+
+        @Pipe({name: 'starPipe'})
+        class StarPipe implements PipeTransform {
+          transform(value: any) { return `**${value}**`; }
+
+          static ngPipeDef = definePipe({
+            name: 'starPipe',
+            type: StarPipe,
+            factory: function StarPipe_Factory() { return new StarPipe(); },
+          });
+        }
+
+        @Component({
+          template: `
+            <ng-template #foo>
+              <child [name]="'C' | starPipe"></child>
+            </ng-template>
+            <child vcref [tplRef]="foo" [name]="'A' | starPipe"></child>
+            <child [name]="'B' | starPipe"></child>
+          `
+        })
+        class SomeComponent {
+          static ngComponentDef = defineComponent({
+            type: SomeComponent,
+            selectors: [['some-comp']],
+            factory: () => new SomeComponent(),
+            template: (rf: RenderFlags, cmp: SomeComponent) => {
+              if (rf & RenderFlags.Create) {
+                container(0, (rf: RenderFlags, ctx: any) => {
+                  if (rf & RenderFlags.Create) {
+                    element(0, 'child');
+                    pipe(1, 'starPipe');
+                    reserveSlots(2);
+                  }
+                  if (rf & RenderFlags.Update) {
+                    elementProperty(0, 'name', bind(pipeBind1(1, 2, 'C')));
+                  }
+                });
+                pipe(1, 'starPipe');
+                element(2, 'child', ['vcref', '']);
+                pipe(3, 'starPipe');
+                element(4, 'child');
+                reserveSlots(4);
+              }
+              if (rf & RenderFlags.Update) {
+                const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+                elementProperty(2, 'tplRef', bind(tplRef));
+                elementProperty(2, 'name', bind(pipeBind1(1, 2, 'A')));
+                elementProperty(4, 'name', bind(pipeBind1(1, 4, 'B')));
+              }
+            },
+            directives: [Child, DirectiveWithVCRef],
+            pipes: [StarPipe]
+          });
+        }
+
+        const fixture = new ComponentFixture(SomeComponent);
+        directiveInstance !.vcref.createEmbeddedView(directiveInstance !.tplRef, fixture.component);
+        directiveInstance !.vcref.createEmbeddedView(directiveInstance !.tplRef, fixture.component);
+        fixture.update();
+        expect(fixture.html)
+            .toEqual(
+                '<child vcref="">**A**</child><child>**C**</child><child>**C**</child><child>**B**</child>');
+      });
+    });
+
+    describe('insertion points and declaration points', () => {
+      class InsertionDir {
+        // @Input()
+        set tplDir(tpl: TemplateRef<any>|null) {
+          tpl ? this.vcr.createEmbeddedView(tpl) : this.vcr.clear();
+        }
+
+        constructor(public vcr: ViewContainerRef) {}
+
+        static ngDirectiveDef = defineDirective({
+          type: InsertionDir,
+          selectors: [['', 'tplDir', '']],
+          factory: () => new InsertionDir(injectViewContainerRef()),
+          inputs: {tplDir: 'tplDir'}
+        });
+      }
+
+      // see running stackblitz example: https://stackblitz.com/edit/angular-w3myy6
+      it('should work with a template declared in a different component view from insertion',
+         () => {
+           let child: Child|null = null;
+
+           /**
+            * <div [tplDir]="tpl">{{ name }}</div>
+            * // template insertion point
+            */
+           class Child {
+             name = 'Child';
+             tpl: TemplateRef<any>|null = null;
+
+             static ngComponentDef = defineComponent({
+               type: Child,
+               selectors: [['child']],
+               factory: () => child = new Child(),
+               template: function(rf: RenderFlags, ctx: any) {
+                 if (rf & RenderFlags.Create) {
+                   elementStart(0, 'div', [AttributeMarker.SelectOnly, 'tplDir']);
+                   { text(1); }
+                   elementEnd();
+                 }
+                 if (rf & RenderFlags.Update) {
+                   elementProperty(0, 'tplDir', bind(ctx.tpl));
+                   textBinding(1, bind(ctx.name));
+                 }
+               },
+               inputs: {tpl: 'tpl'},
+               directives: () => [InsertionDir]
+             });
+           }
+
+           /**
+            * // template declaration point
+            * <ng-template #foo>
+            *     <div> {{ name }} </div>
+            * </ng-template>
+            *
+            * <child [tpl]="foo"></child>                           <-- template insertion inside
+            */
+           const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) {
+             if (rf & RenderFlags.Create) {
+               container(0, fooTemplate);
+               elementStart(1, 'child');
+               elementEnd();
+             }
+
+             if (rf & RenderFlags.Update) {
+               // Hack until we have local refs for templates
+               const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+               elementProperty(1, 'tpl', bind(tplRef));
+             }
+
+           }, [Child]);
+
+           function fooTemplate(rf1: RenderFlags, ctx: any) {
+             if (rf1 & RenderFlags.Create) {
+               elementStart(0, 'div');
+               { text(1); }
+               elementEnd();
+             }
+
+             if (rf1 & RenderFlags.Update) {
+               const parent = nextContext();
+               textBinding(1, bind(parent.name));
+             }
+           }
+
+           const fixture = new ComponentFixture(Parent);
+           fixture.component.name = 'Parent';
+           fixture.update();
+
+           // Context should be inherited from the declaration point, not the insertion point,
+           // so the template should read 'Parent'.
+           expect(fixture.html).toEqual(`<child><div>Child</div><div>Parent</div></child>`);
+
+           child !.tpl = null;
+           fixture.update();
+           expect(fixture.html).toEqual(`<child><div>Child</div></child>`);
+         });
+
+      // see running stackblitz example: https://stackblitz.com/edit/angular-3vplec
+      it('should work with nested for loops with different declaration / insertion points', () => {
+        /**
+         * <ng-template ngFor [ngForOf]="rows" [ngForTemplate]="tpl">
+         *     // insertion point for templates (both row and cell)
+         * </ng-template>
+         */
+        class LoopComp {
+          name = 'Loop';
+
+          // @Input()
+          tpl !: TemplateRef<any>;
+
+          // @Input()
+          rows !: any[];
+
+          static ngComponentDef = defineComponent({
+            type: LoopComp,
+            selectors: [['loop-comp']],
+            factory: () => new LoopComp(),
+            template: function(rf: RenderFlags, loop: any) {
+              if (rf & RenderFlags.Create) {
+                container(0, () => {}, null, [AttributeMarker.SelectOnly, 'ngForOf']);
+              }
+
+              if (rf & RenderFlags.Update) {
+                elementProperty(0, 'ngForOf', bind(loop.rows));
+                elementProperty(0, 'ngForTemplate', bind(loop.tpl));
+              }
+            },
+            inputs: {tpl: 'tpl', rows: 'rows'},
+            directives: () => [NgForOf]
+          });
+        }
+
+        /**
+         * // row declaration point
+         * <ng-template #rowTemplate let-row>
+         *
+         *   // cell declaration point
+         *   <ng-template #cellTemplate let-cell>
+         *     <div> {{ cell }} - {{ row.value }} - {{ name }} </div>
+         *   </ng-template>
+         *
+         *   <loop-comp [tpl]="cellTemplate" [rows]="row.data"></loop-comp>  <-- cell insertion
+         * </ng-template>
+         *
+         * <loop-comp [tpl]="rowTemplate" [rows]="rows">                      <-- row insertion
+         * </loop-comp>
+         */
+        const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) {
+          if (rf & RenderFlags.Create) {
+            container(0, rowTemplate);
+            elementStart(1, 'loop-comp');
+            elementEnd();
+          }
+
+          if (rf & RenderFlags.Update) {
+            // Hack until we have local refs for templates
+            const rowTemplateRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+            elementProperty(1, 'tpl', bind(rowTemplateRef));
+            elementProperty(1, 'rows', bind(parent.rows));
+          }
+
+        }, [LoopComp]);
+
+        function rowTemplate(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            container(0, cellTemplate);
+            elementStart(1, 'loop-comp');
+            elementEnd();
+          }
+
+          if (rf & RenderFlags.Update) {
+            const row = ctx.$implicit as any;
+            // Hack until we have local refs for templates
+            const cellTemplateRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+            elementProperty(1, 'tpl', bind(cellTemplateRef));
+            elementProperty(1, 'rows', bind(row.data));
+          }
+        }
+
+        function cellTemplate(rf: RenderFlags, ctx: any) {
+          if (rf & RenderFlags.Create) {
+            elementStart(0, 'div');
+            { text(1); }
+            elementEnd();
+          }
+
+          if (rf & RenderFlags.Update) {
+            const cell = ctx.$implicit as any;
+            const row = nextContext().$implicit as any;
+            const parent = nextContext();
+            textBinding(1, interpolation3('', cell, ' - ', row.value, ' - ', parent.name, ''));
+          }
+        }
+
+        const fixture = new ComponentFixture(Parent);
+        fixture.component.name = 'Parent';
+        fixture.component.rows =
+            [{data: ['1', '2'], value: 'one'}, {data: ['3', '4'], value: 'two'}];
+        fixture.update();
+
+        expect(fixture.html)
+            .toEqual(
+                '<loop-comp>' +
+                '<loop-comp><div>1 - one - Parent</div><div>2 - one - Parent</div></loop-comp>' +
+                '<loop-comp><div>3 - two - Parent</div><div>4 - two - Parent</div></loop-comp>' +
+                '</loop-comp>');
+
+        fixture.component.rows = [{data: ['5', '6'], value: 'three'}, {data: ['7'], value: 'four'}];
+        fixture.component.name = 'New name!';
+        fixture.update();
+
+        expect(fixture.html)
+            .toEqual(
+                '<loop-comp>' +
+                '<loop-comp><div>5 - three - New name!</div><div>6 - three - New name!</div></loop-comp>' +
+                '<loop-comp><div>7 - four - New name!</div></loop-comp>' +
+                '</loop-comp>');
+      });
+    });
+
+    const rendererFactory = getRendererFactory2(document);
+
+    describe('detach', () => {
+      it('should detach the right embedded view when an index is specified', () => {
+        const fixture = new TemplateFixture(
+            createTemplate, updateTemplate, [DirectiveWithVCRef], null, null, rendererFactory);
+        const viewA = createView('A');
+        createView('B');
+        createView('C');
+        const viewD = createView('D');
+        createView('E');
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>ABCDE');
+
+        directiveInstance !.vcref.detach(3);
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>ABCE');
+        expect(viewD.destroyed).toBeFalsy();
+
+        directiveInstance !.vcref.detach(0);
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>BCE');
+        expect(viewA.destroyed).toBeFalsy();
+
+        expect(() => { directiveInstance !.vcref.detach(-1); }).toThrow();
+        expect(() => { directiveInstance !.vcref.detach(42); }).toThrow();
+        expect(ngDevMode).toHaveProperties({rendererDestroyNode: 0});
+      });
+
+
+      it('should detach the last embedded view when no index is specified', () => {
+        const fixture = new TemplateFixture(
+            createTemplate, updateTemplate, [DirectiveWithVCRef], null, null, rendererFactory);
+        createView('A');
+        createView('B');
+        createView('C');
+        createView('D');
+        const viewE = createView('E');
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>ABCDE');
+
+        directiveInstance !.vcref.detach();
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>ABCD');
+        expect(viewE.destroyed).toBeFalsy();
+        expect(ngDevMode).toHaveProperties({rendererDestroyNode: 0});
+      });
+    });
+
+    describe('remove', () => {
+      it('should remove the right embedded view when an index is specified', () => {
+        const fixture = new TemplateFixture(
+            createTemplate, updateTemplate, [DirectiveWithVCRef], null, null, rendererFactory);
+        const viewA = createView('A');
+        createView('B');
+        createView('C');
+        const viewD = createView('D');
+        createView('E');
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>ABCDE');
+
+        directiveInstance !.vcref.remove(3);
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>ABCE');
+        expect(viewD.destroyed).toBeTruthy();
+
+        directiveInstance !.vcref.remove(0);
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>BCE');
+        expect(viewA.destroyed).toBeTruthy();
+
+        expect(() => { directiveInstance !.vcref.remove(-1); }).toThrow();
+        expect(() => { directiveInstance !.vcref.remove(42); }).toThrow();
+        expect(ngDevMode).toHaveProperties({rendererDestroyNode: 2});
+      });
+
+      it('should remove the last embedded view when no index is specified', () => {
+        const fixture = new TemplateFixture(
+            createTemplate, updateTemplate, [DirectiveWithVCRef], null, null, rendererFactory);
+        createView('A');
+        createView('B');
+        createView('C');
+        createView('D');
+        const viewE = createView('E');
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>ABCDE');
+
+        directiveInstance !.vcref.remove();
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>ABCD');
+        expect(viewE.destroyed).toBeTruthy();
+        expect(ngDevMode).toHaveProperties({rendererDestroyNode: 1});
+      });
+
+      it('should throw when trying to insert a removed or destroyed view', () => {
+        const fixture = new TemplateFixture(
+            createTemplate, updateTemplate, [DirectiveWithVCRef], null, null, rendererFactory);
+        const viewA = createView('A');
+        const viewB = createView('B');
+        fixture.update();
+
+        directiveInstance !.vcref.remove();
+        fixture.update();
+        expect(() => directiveInstance !.vcref.insert(viewB)).toThrow();
+
+        viewA.destroy();
+        fixture.update();
+        expect(() => directiveInstance !.vcref.insert(viewA)).toThrow();
+      });
+    });
+
+    describe('length', () => {
+      it('should return the number of embedded views', () => {
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        expect(directiveInstance !.vcref.length).toEqual(0);
+
+        createView('A');
+        createView('B');
+        createView('C');
+        fixture.update();
+        expect(directiveInstance !.vcref.length).toEqual(3);
+
+        directiveInstance !.vcref.detach(1);
+        fixture.update();
+        expect(directiveInstance !.vcref.length).toEqual(2);
+
+        directiveInstance !.vcref.clear();
+        fixture.update();
+        expect(directiveInstance !.vcref.length).toEqual(0);
+      });
+    });
+
+    describe('get and indexOf', () => {
+      it('should retrieve a ViewRef from its index, and vice versa', () => {
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        createView('A');
+        createView('B');
+        createView('C');
+        fixture.update();
+
+        let viewRef = directiveInstance !.vcref.get(0);
+        expect(directiveInstance !.vcref.indexOf(viewRef !)).toEqual(0);
+
+        viewRef = directiveInstance !.vcref.get(1);
+        expect(directiveInstance !.vcref.indexOf(viewRef !)).toEqual(1);
+
+        viewRef = directiveInstance !.vcref.get(2);
+        expect(directiveInstance !.vcref.indexOf(viewRef !)).toEqual(2);
+      });
+
+      it('should handle out of bounds cases', () => {
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        createView('A');
+        fixture.update();
+
+        expect(directiveInstance !.vcref.get(-1)).toBeNull();
+        expect(directiveInstance !.vcref.get(42)).toBeNull();
+
+        const viewRef = directiveInstance !.vcref.get(0);
+        directiveInstance !.vcref.remove(0);
+        expect(directiveInstance !.vcref.indexOf(viewRef !)).toEqual(-1);
+      });
+    });
+
+    describe('move', () => {
+      it('should move embedded views and associated DOM nodes without recreating them', () => {
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        createView('A');
+        createView('B');
+        createView('C');
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>ABC');
+
+        // The DOM is manually modified here to ensure that the text node is actually moved
+        fixture.hostElement.childNodes[2].nodeValue = '**A**';
+        expect(fixture.html).toEqual('<p vcref=""></p>**A**BC');
+
+        let viewRef = directiveInstance !.vcref.get(0);
+        directiveInstance !.vcref.move(viewRef !, 2);
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>BC**A**');
+
+        directiveInstance !.vcref.move(viewRef !, 0);
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>**A**BC');
+
+        directiveInstance !.vcref.move(viewRef !, 1);
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>B**A**C');
+
+        expect(() => { directiveInstance !.vcref.move(viewRef !, -1); }).toThrow();
+        expect(() => { directiveInstance !.vcref.move(viewRef !, 42); }).toThrow();
+      });
+    });
+
+    describe('createComponent', () => {
+      let templateExecutionCounter = 0;
+
+      class EmbeddedComponent {
+        static ngComponentDef = defineComponent({
+          type: EmbeddedComponent,
+          selectors: [['embedded-cmp']],
+          factory: () => new EmbeddedComponent(),
+          template: (rf: RenderFlags, cmp: EmbeddedComponent) => {
+            templateExecutionCounter++;
+            if (rf & RenderFlags.Create) {
+              text(0, 'foo');
+            }
+          }
+        });
+      }
+
+      it('should work without Injector and NgModuleRef', () => {
+        templateExecutionCounter = 0;
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        expect(fixture.html).toEqual('<p vcref=""></p>');
+        expect(templateExecutionCounter).toEqual(0);
+
+        const componentRef = directiveInstance !.vcref.createComponent(
+            directiveInstance !.cfr.resolveComponentFactory(EmbeddedComponent));
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p><embedded-cmp>foo</embedded-cmp>');
+        expect(templateExecutionCounter).toEqual(2);
+
+        directiveInstance !.vcref.detach(0);
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p>');
+        expect(templateExecutionCounter).toEqual(2);
+
+        directiveInstance !.vcref.insert(componentRef.hostView);
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p><embedded-cmp>foo</embedded-cmp>');
+        expect(templateExecutionCounter).toEqual(3);
+      });
+
+      it('should work with NgModuleRef and Injector', () => {
+        class MyAppModule {
+          static ngInjectorDef = defineInjector({
+            factory: () => new MyAppModule(),
+            imports: [],
+            providers: [
+              {provide: APP_ROOT, useValue: true},
+              {provide: RendererFactory2, useValue: getRendererFactory2(document)}
+            ]
+          });
+          static ngModuleDef: NgModuleDef<any, any, any, any> = { bootstrap: [] } as any;
+        }
+        const myAppModuleFactory = new NgModuleFactory(MyAppModule);
+        const ngModuleRef = myAppModuleFactory.create(null);
+
+        class SomeModule {
+          static ngInjectorDef = defineInjector({
+            factory: () => new SomeModule(),
+            providers: [{provide: NgModuleRef, useValue: ngModuleRef}]
+          });
+        }
+        const injector = createInjector(SomeModule);
+
+        templateExecutionCounter = 0;
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        expect(fixture.html).toEqual('<p vcref=""></p>');
+        expect(templateExecutionCounter).toEqual(0);
+
+        directiveInstance !.vcref.createComponent(
+            directiveInstance !.cfr.resolveComponentFactory(EmbeddedComponent), 0, injector);
+        fixture.update();
+        expect(fixture.html).toEqual('<p vcref=""></p><embedded-cmp>foo</embedded-cmp>');
+        expect(templateExecutionCounter).toEqual(2);
+
+        directiveInstance !.vcref.createComponent(
+            directiveInstance !.cfr.resolveComponentFactory(EmbeddedComponent), 0, undefined,
+            undefined, ngModuleRef);
+        fixture.update();
+        expect(fixture.html)
+            .toEqual(
+                '<p vcref=""></p><embedded-cmp>foo</embedded-cmp><embedded-cmp>foo</embedded-cmp>');
+        expect(templateExecutionCounter).toEqual(5);
+      });
+
+      class EmbeddedComponentWithNgContent {
+        static ngComponentDef = defineComponent({
+          type: EmbeddedComponentWithNgContent,
+          selectors: [['embedded-cmp-with-ngcontent']],
+          factory: () => new EmbeddedComponentWithNgContent(),
+          template: (rf: RenderFlags, cmp: EmbeddedComponentWithNgContent) => {
+            if (rf & RenderFlags.Create) {
+              projectionDef();
+              projection(0, 0);
+              element(1, 'hr');
+              projection(2, 1);
+            }
+          }
+        });
+      }
+
+      it('should support projectable nodes', () => {
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        expect(fixture.html).toEqual('<p vcref=""></p>');
+
+        const myNode = document.createElement('div');
+        const myText = document.createTextNode('bar');
+        const myText2 = document.createTextNode('baz');
+        myNode.appendChild(myText);
+        myNode.appendChild(myText2);
+
+        directiveInstance !.vcref.createComponent(
+            directiveInstance !.cfr.resolveComponentFactory(EmbeddedComponentWithNgContent), 0,
+            undefined, [[myNode]]);
+        fixture.update();
+        expect(fixture.html)
+            .toEqual(
+                '<p vcref=""></p><embedded-cmp-with-ngcontent><div>barbaz</div><hr></embedded-cmp-with-ngcontent>');
+      });
+
+      it('should support reprojection of projectable nodes', () => {
+        class Reprojector {
+          static ngComponentDef = defineComponent({
+            type: Reprojector,
+            selectors: [['reprojector']],
+            factory: () => new Reprojector(),
+            template: (rf: RenderFlags, cmp: Reprojector) => {
+              if (rf & RenderFlags.Create) {
+                projectionDef();
+                elementStart(0, 'embedded-cmp-with-ngcontent');
+                { projection(1, 0); }
+                elementEnd();
+              }
+            },
+            directives: [EmbeddedComponentWithNgContent]
+          });
+        }
+
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        expect(fixture.html).toEqual('<p vcref=""></p>');
+
+        const myNode = document.createElement('div');
+        const myText = document.createTextNode('bar');
+        const myText2 = document.createTextNode('baz');
+        myNode.appendChild(myText);
+        myNode.appendChild(myText2);
+
+        directiveInstance !.vcref.createComponent(
+            directiveInstance !.cfr.resolveComponentFactory(Reprojector), 0, undefined, [[myNode]]);
+        fixture.update();
+        expect(fixture.html)
+            .toEqual(
+                '<p vcref=""></p><reprojector><embedded-cmp-with-ngcontent><div>barbaz</div><hr></embedded-cmp-with-ngcontent></reprojector>');
+      });
+
+      it('should support many projectable nodes with many slots', () => {
+        const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        expect(fixture.html).toEqual('<p vcref=""></p>');
+
+        directiveInstance !.vcref.createComponent(
+            directiveInstance !.cfr.resolveComponentFactory(EmbeddedComponentWithNgContent), 0,
+            undefined, [
+              [document.createTextNode('1'), document.createTextNode('2')],
+              [document.createTextNode('3'), document.createTextNode('4')]
+            ]);
+        fixture.update();
+        expect(fixture.html)
+            .toEqual(
+                '<p vcref=""></p><embedded-cmp-with-ngcontent>12<hr>34</embedded-cmp-with-ngcontent>');
+      });
+    });
+
+    describe('getters', () => {
+      it('should work on elements', () => {
+        function createTemplate() {
+          element(0, 'header', ['vcref', '']);
+          element(1, 'footer');
+        }
+
+        new TemplateFixture(createTemplate, undefined, [DirectiveWithVCRef]);
+
+        expect(directiveInstance !.vcref.element.nativeElement.tagName.toLowerCase())
+            .toEqual('header');
+        expect(
+            directiveInstance !.vcref.injector.get(ElementRef).nativeElement.tagName.toLowerCase())
+            .toEqual('header');
+        expect(() => directiveInstance !.vcref.parentInjector.get(ElementRef)).toThrow();
+      });
+
+      it('should work on components', () => {
+        const HeaderComponent =
+            createComponent('header-cmp', function(rf: RenderFlags, ctx: any) {});
+
+        function createTemplate() {
+          element(0, 'header-cmp', ['vcref', '']);
+          element(1, 'footer');
+        }
+
+        new TemplateFixture(createTemplate, undefined, [HeaderComponent, DirectiveWithVCRef]);
+
+        expect(directiveInstance !.vcref.element.nativeElement.tagName.toLowerCase())
+            .toEqual('header-cmp');
+        expect(
+            directiveInstance !.vcref.injector.get(ElementRef).nativeElement.tagName.toLowerCase())
+            .toEqual('header-cmp');
+        expect(() => directiveInstance !.vcref.parentInjector.get(ElementRef)).toThrow();
+      });
+
+      it('should work on containers', () => {
+        function createTemplate() {
+          container(0, embeddedTemplate, null, ['vcref', '']);
+          element(1, 'footer');
+        }
+
+        function updateTemplate() {
+          containerRefreshStart(0);
+          containerRefreshEnd();
+        }
+
+        new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
+        expect(directiveInstance !.vcref.element.nativeElement.textContent).toEqual('container');
+        expect(directiveInstance !.vcref.injector.get(ElementRef).nativeElement.textContent)
+            .toEqual('container');
+        expect(() => directiveInstance !.vcref.parentInjector.get(ElementRef)).toThrow();
+      });
+    });
+  });
+
+  describe('projection', () => {
+    function embeddedTemplate(rf: RenderFlags, ctx: any) {
+      if (rf & RenderFlags.Create) {
+        elementStart(0, 'span');
+        text(1);
+        elementEnd();
+      }
+      textBinding(1, ctx.name);
+    }
+
+    it('should project the ViewContainerRef content along its host, in an element', () => {
+      @Component({selector: 'child', template: '<div><ng-content></ng-content></div>'})
+      class Child {
+        static ngComponentDef = defineComponent({
+          type: Child,
+          selectors: [['child']],
+          factory: () => new Child(),
+          template: (rf: RenderFlags, cmp: Child) => {
+            if (rf & RenderFlags.Create) {
+              projectionDef();
+              elementStart(0, 'div');
+              { projection(1); }
+              elementEnd();
+            }
+          }
+        });
+      }
+
+      @Component({
+        selector: 'parent',
+        template: `
+          <ng-template #foo>
+              <span>{{name}}</span>
+          </ng-template>
+          <child><header vcref [tplRef]="foo" [name]="name">blah</header></child>`
+      })
+      class Parent {
+        name: string = 'bar';
+        static ngComponentDef = defineComponent({
+          type: Parent,
+          selectors: [['parent']],
+          factory: () => new Parent(),
+          template: (rf: RenderFlags, cmp: Parent) => {
+            if (rf & RenderFlags.Create) {
+              container(0, embeddedTemplate);
+              elementStart(1, 'child');
+              elementStart(2, 'header', ['vcref', '']);
+              text(3, 'blah');
+              elementEnd();
+              elementEnd();
+            }
+            let tplRef: any;
+            if (rf & RenderFlags.Update) {
+              tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+              elementProperty(2, 'tplRef', bind(tplRef));
+              elementProperty(2, 'name', bind(cmp.name));
+            }
+          },
+          directives: [Child, DirectiveWithVCRef]
+        });
+      }
+
+      const fixture = new ComponentFixture(Parent);
+      expect(fixture.html).toEqual('<child><div><header vcref="">blah</header></div></child>');
+
+      directiveInstance !.vcref.createEmbeddedView(directiveInstance !.tplRef, fixture.component);
+      fixture.update();
+      expect(fixture.html)
+          .toEqual('<child><div><header vcref="">blah</header><span>bar</span></div></child>');
+    });
+
+    it('should project the ViewContainerRef content along its host, in a view', () => {
+      @Component({
+        selector: 'child-with-view',
+        template: `
+          Before (inside)-
+          % if (show) {
+            <ng-content></ng-content>
+          % }
+          After (inside)
+        `
+      })
+      class ChildWithView {
+        show: boolean = true;
+        static ngComponentDef = defineComponent({
+          type: ChildWithView,
+          selectors: [['child-with-view']],
+          factory: () => new ChildWithView(),
+          template: (rf: RenderFlags, cmp: ChildWithView) => {
+            if (rf & RenderFlags.Create) {
+              projectionDef();
+              text(0, 'Before (inside)-');
+              container(1);
+              text(2, 'After (inside)');
+            }
+            if (rf & RenderFlags.Update) {
+              containerRefreshStart(1);
+              if (cmp.show) {
+                let rf0 = embeddedViewStart(0);
+                if (rf0 & RenderFlags.Create) {
+                  projection(0);
+                }
+                embeddedViewEnd();
+              }
+              containerRefreshEnd();
+            }
+          }
+        });
+      }
+
+      @Component({
+        selector: 'parent',
+        template: `
+          <ng-template #foo>
+              <span>{{name}}</span>
+          </ng-template>
+          <child-with-view>
+            Before projected
+            <header vcref [tplRef]="foo" [name]="name">blah</header>
+            After projected
+          </child-with-view>`
+      })
+      class Parent {
+        name: string = 'bar';
+        static ngComponentDef = defineComponent({
+          type: Parent,
+          selectors: [['parent']],
+          factory: () => new Parent(),
+          template: (rf: RenderFlags, cmp: Parent) => {
+            if (rf & RenderFlags.Create) {
+              container(0, embeddedTemplate);
+              elementStart(1, 'child-with-view');
+              text(2, 'Before projected');
+              elementStart(3, 'header', ['vcref', '']);
+              text(4, 'blah');
+              elementEnd();
+              text(5, 'After projected-');
+              elementEnd();
+            }
+            if (rf & RenderFlags.Update) {
+              const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+              elementProperty(3, 'tplRef', bind(tplRef));
+              elementProperty(3, 'name', bind(cmp.name));
+            }
+          },
+          directives: [ChildWithView, DirectiveWithVCRef]
+        });
+      }
+
+      const fixture = new ComponentFixture(Parent);
+      expect(fixture.html)
+          .toEqual(
+              '<child-with-view>Before (inside)-Before projected<header vcref="">blah</header>After projected-After (inside)</child-with-view>');
+
+      directiveInstance !.vcref.createEmbeddedView(directiveInstance !.tplRef, fixture.component);
+      fixture.update();
+      expect(fixture.html)
+          .toEqual(
+              '<child-with-view>Before (inside)-Before projected<header vcref="">blah</header><span>bar</span>After projected-After (inside)</child-with-view>');
+    });
+
+    describe('with select', () => {
+      @Component({
+        selector: 'child-with-selector',
+        template: `
+          <first><ng-content select="header"></ng-content></first>
+          <second><ng-content></ng-content></second>`
+      })
+      class ChildWithSelector {
+        static ngComponentDef = defineComponent({
+          type: ChildWithSelector,
+          selectors: [['child-with-selector']],
+          factory: () => new ChildWithSelector(),
+          template: (rf: RenderFlags, cmp: ChildWithSelector) => {
+            if (rf & RenderFlags.Create) {
+              projectionDef([[['header']]], ['header']);
+              elementStart(0, 'first');
+              { projection(1, 1); }
+              elementEnd();
+              elementStart(2, 'second');
+              { projection(3); }
+              elementEnd();
+            }
+          },
+          directives: [ChildWithSelector, DirectiveWithVCRef]
+        });
+      }
+
+      it('should project the ViewContainerRef content along its host, when the host matches a selector',
+         () => {
+           @Component({
+             selector: 'parent',
+             template: `
+            <ng-template #foo>
+                <span>{{name}}</span>
+              </ng-template>
+            <child-with-selector><header vcref [tplRef]="foo" [name]="name">blah</header></child-with-selector>`
+           })
+           class Parent {
+             name: string = 'bar';
+             static ngComponentDef = defineComponent({
+               type: Parent,
+               selectors: [['parent']],
+               factory: () => new Parent(),
+               template: (rf: RenderFlags, cmp: Parent) => {
+                 let tplRef: any;
+                 if (rf & RenderFlags.Create) {
+                   container(0, embeddedTemplate);
+                   elementStart(1, 'child-with-selector');
+                   elementStart(2, 'header', ['vcref', '']);
+                   text(3, 'blah');
+                   elementEnd();
+                   elementEnd();
+                 }
+                 if (rf & RenderFlags.Update) {
+                   tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+                   elementProperty(2, 'tplRef', bind(tplRef));
+                   elementProperty(2, 'name', bind(cmp.name));
+                 }
+               },
+               directives: [ChildWithSelector, DirectiveWithVCRef]
+             });
+           }
+
+           const fixture = new ComponentFixture(Parent);
+           expect(fixture.html)
+               .toEqual(
+                   '<child-with-selector><first><header vcref="">blah</header></first><second></second></child-with-selector>');
+
+           directiveInstance !.vcref.createEmbeddedView(
+               directiveInstance !.tplRef, fixture.component);
+           fixture.update();
+           expect(fixture.html)
+               .toEqual(
+                   '<child-with-selector><first><header vcref="">blah</header><span>bar</span></first><second></second></child-with-selector>');
+         });
+
+      it('should not project the ViewContainerRef content, when the host does not match a selector',
+         () => {
+           @Component({
+             selector: 'parent',
+             template: `
+            <ng-template #foo>
+                <span>{{name}}</span>
+              </ng-template>
+            <child-with-selector><footer vcref [tplRef]="foo" [name]="name">blah</footer></child-with-selector>`
+           })
+           class Parent {
+             name: string = 'bar';
+             static ngComponentDef = defineComponent({
+               type: Parent,
+               selectors: [['parent']],
+               factory: () => new Parent(),
+               template: (rf: RenderFlags, cmp: Parent) => {
+                 let tplRef: any;
+                 if (rf & RenderFlags.Create) {
+                   container(0, embeddedTemplate);
+                   elementStart(1, 'child-with-selector');
+                   elementStart(2, 'footer', ['vcref', '']);
+                   text(3, 'blah');
+                   elementEnd();
+                   elementEnd();
+                 }
+                 if (rf & RenderFlags.Update) {
+                   tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+                   elementProperty(2, 'tplRef', bind(tplRef));
+                   elementProperty(2, 'name', bind(cmp.name));
+                 }
+               },
+               directives: [ChildWithSelector, DirectiveWithVCRef]
+             });
+           }
+
+           const fixture = new ComponentFixture(Parent);
+           expect(fixture.html)
+               .toEqual(
+                   '<child-with-selector><first></first><second><footer vcref="">blah</footer></second></child-with-selector>');
+
+           directiveInstance !.vcref.createEmbeddedView(
+               directiveInstance !.tplRef, fixture.component);
+           fixture.update();
+           expect(fixture.html)
+               .toEqual(
+                   '<child-with-selector><first></first><second><footer vcref="">blah</footer><span>bar</span></second></child-with-selector>');
+         });
+    });
+  });
+
+  describe('life cycle hooks', () => {
+
+    // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
+    const log: string[] = [];
+
+    @Component({selector: 'hooks', template: `{{name}}`})
+    class ComponentWithHooks {
+      // TODO(issue/24571): remove '!'.
+      name !: string;
+
+      private log(msg: string) { log.push(msg); }
+
+      ngOnChanges() { this.log('onChanges-' + this.name); }
+      ngOnInit() { this.log('onInit-' + this.name); }
+      ngDoCheck() { this.log('doCheck-' + this.name); }
+
+      ngAfterContentInit() { this.log('afterContentInit-' + this.name); }
+      ngAfterContentChecked() { this.log('afterContentChecked-' + this.name); }
+
+      ngAfterViewInit() { this.log('afterViewInit-' + this.name); }
+      ngAfterViewChecked() { this.log('afterViewChecked-' + this.name); }
+
+      ngOnDestroy() { this.log('onDestroy-' + this.name); }
+
+      static ngComponentDef = defineComponent({
+        type: ComponentWithHooks,
+        selectors: [['hooks']],
+        factory: () => new ComponentWithHooks(),
+        template: (rf: RenderFlags, cmp: ComponentWithHooks) => {
+          if (rf & RenderFlags.Create) {
+            text(0);
+          }
+          if (rf & RenderFlags.Update) {
+            textBinding(0, interpolation1('', cmp.name, ''));
+          }
+        },
+        features: [NgOnChangesFeature],
+        inputs: {name: 'name'}
+      });
+    }
+
+    it('should call all hooks in correct order when creating with createEmbeddedView', () => {
+      @Component({
+        template: `
+          <ng-template #foo>
+            <hooks [name]="'C'"></hooks>
+          </ng-template>
+          <hooks vcref [tplRef]="foo" [name]="'A'"></hooks>
+          <hooks [name]="'B'"></hooks>
+        `
+      })
+      class SomeComponent {
+        static ngComponentDef = defineComponent({
+          type: SomeComponent,
+          selectors: [['some-comp']],
+          factory: () => new SomeComponent(),
+          template: (rf: RenderFlags, cmp: SomeComponent) => {
+            if (rf & RenderFlags.Create) {
+              container(0, (rf: RenderFlags, ctx: any) => {
+                if (rf & RenderFlags.Create) {
+                  element(0, 'hooks');
+                }
+                if (rf & RenderFlags.Update) {
+                  elementProperty(0, 'name', bind('C'));
+                }
+              });
+              element(1, 'hooks', ['vcref', '']);
+              element(2, 'hooks');
+            }
+            if (rf & RenderFlags.Update) {
+              const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+              elementProperty(1, 'tplRef', bind(tplRef));
+              elementProperty(1, 'name', bind('A'));
+              elementProperty(2, 'name', bind('B'));
+            }
+          },
+          directives: [ComponentWithHooks, DirectiveWithVCRef]
+        });
+      }
+
+      log.length = 0;
+
+      const fixture = new ComponentFixture(SomeComponent);
+      expect(log).toEqual([
+        'onChanges-A', 'onInit-A', 'doCheck-A', 'onChanges-B', 'onInit-B', 'doCheck-B',
+        'afterContentInit-A', 'afterContentChecked-A', 'afterContentInit-B',
+        'afterContentChecked-B', 'afterViewInit-A', 'afterViewChecked-A', 'afterViewInit-B',
+        'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      fixture.update();
+      expect(log).toEqual([
+        'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
+        'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      directiveInstance !.vcref.createEmbeddedView(directiveInstance !.tplRef, fixture.component);
+      expect(fixture.html).toEqual('<hooks vcref="">A</hooks><hooks></hooks><hooks>B</hooks>');
+      expect(log).toEqual([]);
+
+      log.length = 0;
+      fixture.update();
+      expect(fixture.html).toEqual('<hooks vcref="">A</hooks><hooks>C</hooks><hooks>B</hooks>');
+      expect(log).toEqual([
+        'doCheck-A', 'doCheck-B', 'onChanges-C', 'onInit-C', 'doCheck-C', 'afterContentInit-C',
+        'afterContentChecked-C', 'afterViewInit-C', 'afterViewChecked-C', 'afterContentChecked-A',
+        'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      fixture.update();
+      expect(log).toEqual([
+        'doCheck-A', 'doCheck-B', 'doCheck-C', 'afterContentChecked-C', 'afterViewChecked-C',
+        'afterContentChecked-A', 'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      const viewRef = directiveInstance !.vcref.detach(0);
+      fixture.update();
+      expect(log).toEqual([
+        'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
+        'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      directiveInstance !.vcref.insert(viewRef !);
+      fixture.update();
+      expect(log).toEqual([
+        'doCheck-A', 'doCheck-B', 'doCheck-C', 'afterContentChecked-C', 'afterViewChecked-C',
+        'afterContentChecked-A', 'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      directiveInstance !.vcref.remove(0);
+      fixture.update();
+      expect(log).toEqual([
+        'onDestroy-C', 'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
+        'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+    });
+
+    it('should call all hooks in correct order when creating with createComponent', () => {
+      @Component({
+        template: `
+          <hooks vcref [name]="'A'"></hooks>
+          <hooks [name]="'B'"></hooks>
+        `
+      })
+      class SomeComponent {
+        static ngComponentDef = defineComponent({
+          type: SomeComponent,
+          selectors: [['some-comp']],
+          factory: () => new SomeComponent(),
+          template: (rf: RenderFlags, cmp: SomeComponent) => {
+            if (rf & RenderFlags.Create) {
+              element(0, 'hooks', ['vcref', '']);
+              element(1, 'hooks');
+            }
+            if (rf & RenderFlags.Update) {
+              elementProperty(0, 'name', bind('A'));
+              elementProperty(1, 'name', bind('B'));
+            }
+          },
+          directives: [ComponentWithHooks, DirectiveWithVCRef]
+        });
+      }
+
+      log.length = 0;
+
+      const fixture = new ComponentFixture(SomeComponent);
+      expect(log).toEqual([
+        'onChanges-A', 'onInit-A', 'doCheck-A', 'onChanges-B', 'onInit-B', 'doCheck-B',
+        'afterContentInit-A', 'afterContentChecked-A', 'afterContentInit-B',
+        'afterContentChecked-B', 'afterViewInit-A', 'afterViewChecked-A', 'afterViewInit-B',
+        'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      fixture.update();
+      expect(log).toEqual([
+        'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
+        'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      const componentRef = directiveInstance !.vcref.createComponent(
+          directiveInstance !.cfr.resolveComponentFactory(ComponentWithHooks));
+      expect(fixture.html).toEqual('<hooks vcref="">A</hooks><hooks></hooks><hooks>B</hooks>');
+      expect(log).toEqual([]);
+
+      componentRef.instance.name = 'D';
+      log.length = 0;
+      fixture.update();
+      expect(fixture.html).toEqual('<hooks vcref="">A</hooks><hooks>D</hooks><hooks>B</hooks>');
+      expect(log).toEqual([
+        'doCheck-A', 'doCheck-B', 'onChanges-D', 'onInit-D', 'doCheck-D', 'afterContentInit-D',
+        'afterContentChecked-D', 'afterViewInit-D', 'afterViewChecked-D', 'afterContentChecked-A',
+        'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      fixture.update();
+      expect(log).toEqual([
+        'doCheck-A', 'doCheck-B', 'doCheck-D', 'afterContentChecked-D', 'afterViewChecked-D',
+        'afterContentChecked-A', 'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      const viewRef = directiveInstance !.vcref.detach(0);
+      fixture.update();
+      expect(log).toEqual([
+        'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
+        'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      directiveInstance !.vcref.insert(viewRef !);
+      fixture.update();
+      expect(log).toEqual([
+        'doCheck-A', 'doCheck-B', 'doCheck-D', 'afterContentChecked-D', 'afterViewChecked-D',
+        'afterContentChecked-A', 'afterContentChecked-B', 'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+
+      log.length = 0;
+      directiveInstance !.vcref.remove(0);
+      fixture.update();
+      expect(log).toEqual([
+        'onDestroy-D', 'doCheck-A', 'doCheck-B', 'afterContentChecked-A', 'afterContentChecked-B',
+        'afterViewChecked-A', 'afterViewChecked-B'
+      ]);
+    });
+  });
+});
diff --git a/packages/core/test/sanitization/html_sanitizer_spec.ts b/packages/core/test/sanitization/html_sanitizer_spec.ts
new file mode 100644
index 000000000000..ab9cf0531310
--- /dev/null
+++ b/packages/core/test/sanitization/html_sanitizer_spec.ts
@@ -0,0 +1,185 @@
+/**
+ * @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 {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
+import {_sanitizeHtml} from '../../src/sanitization/html_sanitizer';
+
+{
+  describe('HTML sanitizer', () => {
+    let defaultDoc: any;
+    let originalLog: (msg: any) => any = null !;
+    let logMsgs: string[];
+
+    beforeEach(() => {
+      defaultDoc = document;
+      logMsgs = [];
+      originalLog = console.warn;  // Monkey patch DOM.log.
+      console.warn = (msg: any) => logMsgs.push(msg);
+    });
+
+    afterEach(() => { console.warn = originalLog; });
+
+    it('serializes nested structures', () => {
+      expect(_sanitizeHtml(defaultDoc, '<div alt="x"><p>a</p>b<b>c<a alt="more">d</a></b>e</div>'))
+          .toEqual('<div alt="x"><p>a</p>b<b>c<a alt="more">d</a></b>e</div>');
+      expect(logMsgs).toEqual([]);
+    });
+
+    it('serializes self closing elements', () => {
+      expect(_sanitizeHtml(defaultDoc, '<p>Hello <br> World</p>'))
+          .toEqual('<p>Hello <br> World</p>');
+    });
+
+    it('supports namespaced elements',
+       () => { expect(_sanitizeHtml(defaultDoc, 'a<my:hr/><my:div>b</my:div>c')).toEqual('abc'); });
+
+    it('supports namespaced attributes', () => {
+      expect(_sanitizeHtml(defaultDoc, '<a xlink:href="something">t</a>'))
+          .toEqual('<a xlink:href="something">t</a>');
+      expect(_sanitizeHtml(defaultDoc, '<a xlink:evil="something">t</a>')).toEqual('<a>t</a>');
+      expect(_sanitizeHtml(defaultDoc, '<a xlink:href="javascript:foo()">t</a>'))
+          .toEqual('<a xlink:href="unsafe:javascript:foo()">t</a>');
+    });
+
+    it('supports HTML5 elements', () => {
+      expect(_sanitizeHtml(defaultDoc, '<main><summary>Works</summary></main>'))
+          .toEqual('<main><summary>Works</summary></main>');
+    });
+
+    it('sanitizes srcset attributes', () => {
+      expect(_sanitizeHtml(defaultDoc, '<img srcset="/foo.png 400px, javascript:evil() 23px">'))
+          .toEqual('<img srcset="/foo.png 400px, unsafe:javascript:evil() 23px">');
+    });
+
+    it('supports sanitizing plain text',
+       () => { expect(_sanitizeHtml(defaultDoc, 'Hello, World')).toEqual('Hello, World'); });
+
+    it('ignores non-element, non-attribute nodes', () => {
+      expect(_sanitizeHtml(defaultDoc, '<!-- comments? -->no.')).toEqual('no.');
+      expect(_sanitizeHtml(defaultDoc, '<?pi nodes?>no.')).toEqual('no.');
+      expect(logMsgs.join('\n')).toMatch(/sanitizing HTML stripped some content/);
+    });
+
+    it('supports sanitizing escaped entities', () => {
+      expect(_sanitizeHtml(defaultDoc, '&#128640;')).toEqual('&#128640;');
+      expect(logMsgs).toEqual([]);
+    });
+
+    it('does not warn when just re-encoding text', () => {
+      expect(_sanitizeHtml(defaultDoc, '<p>Hellö Wörld</p>'))
+          .toEqual('<p>Hell&#246; W&#246;rld</p>');
+      expect(logMsgs).toEqual([]);
+    });
+
+    it('escapes entities', () => {
+      expect(_sanitizeHtml(defaultDoc, '<p>Hello &lt; World</p>'))
+          .toEqual('<p>Hello &lt; World</p>');
+      expect(_sanitizeHtml(defaultDoc, '<p>Hello < World</p>')).toEqual('<p>Hello &lt; World</p>');
+      expect(_sanitizeHtml(defaultDoc, '<p alt="% &amp; &quot; !">Hello</p>'))
+          .toEqual('<p alt="% &amp; &#34; !">Hello</p>');  // NB: quote encoded as ASCII &#34;.
+    });
+
+    describe('should strip dangerous elements', () => {
+      const dangerousTags = [
+        'frameset', 'form', 'param', 'object', 'embed', 'textarea', 'input', 'button', 'option',
+        'select', 'script', 'style', 'link', 'base', 'basefont'
+      ];
+
+      for (const tag of dangerousTags) {
+        it(`${tag}`,
+           () => { expect(_sanitizeHtml(defaultDoc, `<${tag}>evil!</${tag}>`)).toEqual('evil!'); });
+      }
+
+      it(`swallows frame entirely`, () => {
+        expect(_sanitizeHtml(defaultDoc, `<frame>evil!</frame>`)).not.toContain('<frame>');
+      });
+    });
+
+    describe('should strip dangerous attributes', () => {
+      const dangerousAttrs = ['id', 'name', 'style'];
+
+      for (const attr of dangerousAttrs) {
+        it(`${attr}`, () => {
+          expect(_sanitizeHtml(defaultDoc, `<a ${attr}="x">evil!</a>`)).toEqual('<a>evil!</a>');
+        });
+      }
+    });
+
+    it('should not enter an infinite loop on clobbered elements', () => {
+      // Some browsers are vulnerable to clobbered elements and will throw an expected exception
+      // IE and EDGE does not seems to be affected by those cases
+      // Anyway what we want to test is that browsers do not enter an infinite loop which would
+      // result in a timeout error for the test.
+      try {
+        _sanitizeHtml(defaultDoc, '<form><input name="parentNode" /></form>');
+      } catch (e) {
+        // depending on the browser, we might ge an exception
+      }
+      try {
+        _sanitizeHtml(defaultDoc, '<form><input name="nextSibling" /></form>');
+      } catch (e) {
+        // depending on the browser, we might ge an exception
+      }
+      try {
+        _sanitizeHtml(
+            defaultDoc, '<form><div><div><input name="nextSibling" /></div></div></form>');
+      } catch (e) {
+        // depending on the browser, we might ge an exception
+      }
+    });
+
+    // See
+    // https://github.com/cure53/DOMPurify/blob/a992d3a75031cb8bb032e5ea8399ba972bdf9a65/src/purify.js#L439-L449
+    it('should not allow JavaScript execution when creating inert document', () => {
+      const output = _sanitizeHtml(defaultDoc, '<svg><g onload="window.xxx = 100"></g></svg>');
+      const window = defaultDoc.defaultView;
+      if (window) {
+        expect(window.xxx).toBe(undefined);
+        window.xxx = undefined;
+      }
+      expect(output).toEqual('');
+    });
+
+    // See https://github.com/cure53/DOMPurify/releases/tag/0.6.7
+    it('should not allow JavaScript hidden in badly formed HTML to get through sanitization (Firefox bug)',
+       () => {
+         expect(_sanitizeHtml(
+                    defaultDoc, '<svg><p><style><img src="</style><img src=x onerror=alert(1)//">'))
+             .toEqual(
+                 isDOMParserAvailable() ?
+                     // PlatformBrowser output
+                     '<p>&lt;img src=&#34;<img src="x"></p>' :
+                     // PlatformServer output
+                     '<p><img src="&lt;/style&gt;&lt;img src=x onerror=alert(1)//"></p>');
+       });
+
+    if (browserDetection.isWebkit) {
+      it('should prevent mXSS attacks', function() {
+        // In Chrome Canary 62, the ideographic space character is kept as a stringified HTML entity
+        expect(_sanitizeHtml(defaultDoc, '<a href="&#x3000;javascript:alert(1)">CLICKME</a>'))
+            .toMatch(/<a href="unsafe:(&#12288;)?javascript:alert\(1\)">CLICKME<\/a>/);
+      });
+    }
+  });
+}
+
+/**
+ * We need to determine whether the DOMParser exists in the global context.
+ * The try-catch is because, on some browsers, trying to access this property
+ * on window can actually throw an error.
+ *
+ * @suppress {uselessCode}
+ */
+function isDOMParserAvailable() {
+  try {
+    return !!(window as any).DOMParser;
+  } catch (e) {
+    return false;
+  }
+}
diff --git a/packages/core/test/sanitization/sanatization_spec.ts b/packages/core/test/sanitization/sanatization_spec.ts
new file mode 100644
index 000000000000..c1663f4aff1e
--- /dev/null
+++ b/packages/core/test/sanitization/sanatization_spec.ts
@@ -0,0 +1,68 @@
+
+/**
+ * @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 {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
+import {sanitizeHtml, sanitizeResourceUrl, sanitizeScript, sanitizeStyle, sanitizeUrl} from '../../src/sanitization/sanitization';
+
+describe('sanitization', () => {
+  class Wrap {
+    constructor(private value: string) {}
+    toString() { return this.value; }
+  }
+  it('should sanitize html', () => {
+    expect(sanitizeHtml('<div></div>')).toEqual('<div></div>');
+    expect(sanitizeHtml(new Wrap('<div></div>'))).toEqual('<div></div>');
+    expect(sanitizeHtml('<img src="javascript:true">'))
+        .toEqual('<img src="unsafe:javascript:true">');
+    expect(sanitizeHtml(new Wrap('<img src="javascript:true">')))
+        .toEqual('<img src="unsafe:javascript:true">');
+    expect(sanitizeHtml(bypassSanitizationTrustUrl('<img src="javascript:true">')))
+        .toEqual('<img src="unsafe:javascript:true">');
+    expect(sanitizeHtml(bypassSanitizationTrustHtml('<img src="javascript:true">')))
+        .toEqual('<img src="javascript:true">');
+  });
+
+  it('should sanitize url', () => {
+    expect(sanitizeUrl('http://server')).toEqual('http://server');
+    expect(sanitizeUrl(new Wrap('http://server'))).toEqual('http://server');
+    expect(sanitizeUrl('javascript:true')).toEqual('unsafe:javascript:true');
+    expect(sanitizeUrl(new Wrap('javascript:true'))).toEqual('unsafe:javascript:true');
+    expect(sanitizeUrl(bypassSanitizationTrustHtml('javascript:true')))
+        .toEqual('unsafe:javascript:true');
+    expect(sanitizeUrl(bypassSanitizationTrustUrl('javascript:true'))).toEqual('javascript:true');
+  });
+
+  it('should sanitize resourceUrl', () => {
+    const ERROR = 'unsafe value used in a resource URL context (see http://g.co/ng/security#xss)';
+    expect(() => sanitizeResourceUrl('http://server')).toThrowError(ERROR);
+    expect(() => sanitizeResourceUrl('javascript:true')).toThrowError(ERROR);
+    expect(() => sanitizeResourceUrl(bypassSanitizationTrustHtml('javascript:true')))
+        .toThrowError(ERROR);
+    expect(sanitizeResourceUrl(bypassSanitizationTrustResourceUrl('javascript:true')))
+        .toEqual('javascript:true');
+  });
+
+  it('should sanitize style', () => {
+    expect(sanitizeStyle('red')).toEqual('red');
+    expect(sanitizeStyle(new Wrap('red'))).toEqual('red');
+    expect(sanitizeStyle('url("http://server")')).toEqual('unsafe');
+    expect(sanitizeStyle(new Wrap('url("http://server")'))).toEqual('unsafe');
+    expect(sanitizeStyle(bypassSanitizationTrustHtml('url("http://server")'))).toEqual('unsafe');
+    expect(sanitizeStyle(bypassSanitizationTrustStyle('url("http://server")')))
+        .toEqual('url("http://server")');
+  });
+
+  it('should sanitize script', () => {
+    const ERROR = 'unsafe value used in a script context';
+    expect(() => sanitizeScript('true')).toThrowError(ERROR);
+    expect(() => sanitizeScript('true')).toThrowError(ERROR);
+    expect(() => sanitizeScript(bypassSanitizationTrustHtml('true'))).toThrowError(ERROR);
+    expect(sanitizeScript(bypassSanitizationTrustScript('true'))).toEqual('true');
+  });
+});
diff --git a/packages/core/test/sanitization/style_sanitizer_spec.ts b/packages/core/test/sanitization/style_sanitizer_spec.ts
new file mode 100644
index 000000000000..5adafceb8ed6
--- /dev/null
+++ b/packages/core/test/sanitization/style_sanitizer_spec.ts
@@ -0,0 +1,66 @@
+/**
+ * @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 t from '@angular/core/testing/src/testing_internal';
+
+import {_sanitizeStyle} from '../../src/sanitization/style_sanitizer';
+
+{
+  t.describe('Style sanitizer', () => {
+    let logMsgs: string[];
+    let originalLog: (msg: any) => any;
+
+    t.beforeEach(() => {
+      logMsgs = [];
+      originalLog = console.warn;  // Monkey patch DOM.log.
+      console.warn = (msg: any) => logMsgs.push(msg);
+    });
+
+    afterEach(() => { console.warn = originalLog; });
+
+    function expectSanitize(v: string) { return t.expect(_sanitizeStyle(v)); }
+
+    t.it('sanitizes values', () => {
+      expectSanitize('').toEqual('');
+      expectSanitize('abc').toEqual('abc');
+      expectSanitize('50px').toEqual('50px');
+      expectSanitize('rgb(255, 0, 0)').toEqual('rgb(255, 0, 0)');
+      expectSanitize('expression(haha)').toEqual('unsafe');
+    });
+    t.it('rejects unblanaced quotes', () => { expectSanitize('"value" "').toEqual('unsafe'); });
+    t.it('accepts transform functions', () => {
+      expectSanitize('rotate(90deg)').toEqual('rotate(90deg)');
+      expectSanitize('rotate(javascript:evil())').toEqual('unsafe');
+      expectSanitize('translateX(12px, -5px)').toEqual('translateX(12px, -5px)');
+      expectSanitize('scale3d(1, 1, 2)').toEqual('scale3d(1, 1, 2)');
+    });
+    t.it('accepts gradients', () => {
+      expectSanitize('linear-gradient(to bottom, #fg34a1, #bada55)')
+          .toEqual('linear-gradient(to bottom, #fg34a1, #bada55)');
+      expectSanitize('repeating-radial-gradient(ellipse cover, black, red, black, red)')
+          .toEqual('repeating-radial-gradient(ellipse cover, black, red, black, red)');
+    });
+    t.it('accepts calc', () => { expectSanitize('calc(90%-123px)').toEqual('calc(90%-123px)'); });
+    t.it('accepts attr', () => {
+      expectSanitize('attr(value string)').toEqual('attr(value string)');
+    });
+    t.it('sanitizes URLs', () => {
+      expectSanitize('url(foo/bar.png)').toEqual('url(foo/bar.png)');
+      expectSanitize('url( foo/bar.png\n )').toEqual('url( foo/bar.png\n )');
+      expectSanitize('url(javascript:evil())').toEqual('unsafe');
+      expectSanitize('url(strangeprotocol:evil)').toEqual('unsafe');
+    });
+    t.it('accepts quoted URLs', () => {
+      expectSanitize('url("foo/bar.png")').toEqual('url("foo/bar.png")');
+      expectSanitize(`url('foo/bar.png')`).toEqual(`url('foo/bar.png')`);
+      expectSanitize(`url(  'foo/bar.png'\n )`).toEqual(`url(  'foo/bar.png'\n )`);
+      expectSanitize('url("javascript:evil()")').toEqual('unsafe');
+      expectSanitize('url( " javascript:evil() " )').toEqual('unsafe');
+    });
+  });
+}
diff --git a/packages/core/test/sanitization/url_sanitizer_spec.ts b/packages/core/test/sanitization/url_sanitizer_spec.ts
new file mode 100644
index 000000000000..69c1f705a483
--- /dev/null
+++ b/packages/core/test/sanitization/url_sanitizer_spec.ts
@@ -0,0 +1,118 @@
+/**
+ * @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 t from '@angular/core/testing/src/testing_internal';
+
+import {_sanitizeUrl, sanitizeSrcset} from '../../src/sanitization/url_sanitizer';
+
+{
+  t.describe('URL sanitizer', () => {
+    let logMsgs: string[];
+    let originalLog: (msg: any) => any;
+
+    t.beforeEach(() => {
+      logMsgs = [];
+      originalLog = console.warn;  // Monkey patch DOM.log.
+      console.warn = (msg: any) => logMsgs.push(msg);
+    });
+
+    afterEach(() => { console.warn = originalLog; });
+
+    t.it('reports unsafe URLs', () => {
+      t.expect(_sanitizeUrl('javascript:evil()')).toBe('unsafe:javascript:evil()');
+      t.expect(logMsgs.join('\n')).toMatch(/sanitizing unsafe URL value/);
+    });
+
+    t.describe('valid URLs', () => {
+      const validUrls = [
+        '',
+        'http://abc',
+        'HTTP://abc',
+        'https://abc',
+        'HTTPS://abc',
+        'ftp://abc',
+        'FTP://abc',
+        'mailto:me@example.com',
+        'MAILTO:me@example.com',
+        'tel:123-123-1234',
+        'TEL:123-123-1234',
+        '#anchor',
+        '/page1.md',
+        'http://JavaScript/my.js',
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',  // Truncated.
+        'data:video/webm;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
+        'data:audio/opus;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
+      ];
+      for (const url of validUrls) {
+        t.it(`valid ${url}`, () => t.expect(_sanitizeUrl(url)).toEqual(url));
+      }
+    });
+
+    t.describe('invalid URLs', () => {
+      const invalidUrls = [
+        'javascript:evil()',
+        'JavaScript:abc',
+        'evilNewProtocol:abc',
+        ' \n Java\n Script:abc',
+        '&#106;&#97;&#118;&#97;&#115;&#99;&#114;&#105;&#112;&#116;&#58;',
+        '&#106&#97;&#118;&#97;&#115;&#99;&#114;&#105;&#112;&#116;&#58;',
+        '&#106 &#97;&#118;&#97;&#115;&#99;&#114;&#105;&#112;&#116;&#58;',
+        '&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058',
+        '&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A;',
+        'jav&#x09;ascript:alert();',
+        'jav\u0000ascript:alert();',
+        'data:;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
+        'data:,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
+        'data:iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
+        'data:text/javascript;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
+        'data:application/x-msdownload;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
+      ];
+      for (const url of invalidUrls) {
+        t.it(`valid ${url}`, () => t.expect(_sanitizeUrl(url)).toMatch(/^unsafe:/));
+      }
+    });
+
+    t.describe('valid srcsets', () => {
+      const validSrcsets = [
+        '',
+        'http://angular.io/images/test.png',
+        'http://angular.io/images/test.png, http://angular.io/images/test.png',
+        'http://angular.io/images/test.png, http://angular.io/images/test.png, http://angular.io/images/test.png',
+        'http://angular.io/images/test.png 2x',
+        'http://angular.io/images/test.png 2x, http://angular.io/images/test.png 3x',
+        'http://angular.io/images/test.png 1.5x',
+        'http://angular.io/images/test.png 1.25x',
+        'http://angular.io/images/test.png 200w, http://angular.io/images/test.png 300w',
+        'https://angular.io/images/test.png, http://angular.io/images/test.png',
+        'http://angular.io:80/images/test.png, http://angular.io:8080/images/test.png',
+        'http://www.angular.io:80/images/test.png, http://www.angular.io:8080/images/test.png',
+        'https://angular.io/images/test.png, https://angular.io/images/test.png',
+        '//angular.io/images/test.png, //angular.io/images/test.png',
+        '/images/test.png, /images/test.png',
+        'images/test.png, images/test.png',
+        'http://angular.io/images/test.png?12345, http://angular.io/images/test.png?12345',
+        'http://angular.io/images/test.png?maxage, http://angular.io/images/test.png?maxage',
+        'http://angular.io/images/test.png?maxage=234, http://angular.io/images/test.png?maxage=234',
+      ];
+      for (const srcset of validSrcsets) {
+        t.it(`valid ${srcset}`, () => t.expect(sanitizeSrcset(srcset)).toEqual(srcset));
+      }
+    });
+
+    t.describe('invalid srcsets', () => {
+      const invalidSrcsets = [
+        'ht:tp://angular.io/images/test.png',
+        'http://angular.io/images/test.png, ht:tp://angular.io/images/test.png',
+      ];
+      for (const srcset of invalidSrcsets) {
+        t.it(`valid ${srcset}`, () => t.expect(sanitizeSrcset(srcset)).toMatch(/unsafe:/));
+      }
+    });
+
+  });
+}
diff --git a/packages/core/test/spies.ts b/packages/core/test/spies.ts
new file mode 100644
index 000000000000..6cf94937dbe9
--- /dev/null
+++ b/packages/core/test/spies.ts
@@ -0,0 +1,30 @@
+/**
+ * @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} from '@angular/core';
+import {ChangeDetectorRef} from '@angular/core/src/change_detection/change_detection';
+import {SpyObject} from '@angular/core/testing/src/testing_internal';
+import {DomAdapter} from '@angular/platform-browser/src/dom/dom_adapter';
+
+export class SpyChangeDetectorRef extends SpyObject {
+  constructor() {
+    super(ChangeDetectorRef);
+    this.spy('detectChanges');
+    this.spy('checkNoChanges');
+  }
+}
+
+export class SpyIterableDifferFactory extends SpyObject {}
+
+export class SpyElementRef extends SpyObject {
+  constructor() { super(ElementRef); }
+}
+
+export class SpyDomAdapter extends SpyObject {
+  constructor() { super(DomAdapter); }
+}
diff --git a/packages/core/test/test_bed_spec.ts b/packages/core/test/test_bed_spec.ts
new file mode 100644
index 000000000000..fa6671668b78
--- /dev/null
+++ b/packages/core/test/test_bed_spec.ts
@@ -0,0 +1,149 @@
+/**
+ * @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, InjectionToken, NgModule, Optional} from '@angular/core';
+import {TestBed, getTestBed} from '@angular/core/testing/src/test_bed';
+import {By} from '@angular/platform-browser';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+const NAME = new InjectionToken<string>('name');
+
+// -- module: HWModule
+@Component({
+  selector: 'hello-world',
+  template: '<greeting-cmp></greeting-cmp>',
+})
+export class HelloWorld {
+}
+
+// -- module: Greeting
+@Component({
+  selector: 'greeting-cmp',
+  template: 'Hello {{ name }}',
+})
+export class GreetingCmp {
+  name: string;
+
+  constructor(@Inject(NAME) @Optional() name: string) { this.name = name || 'nobody!'; }
+}
+
+@NgModule({
+  declarations: [GreetingCmp],
+  exports: [GreetingCmp],
+})
+export class GreetingModule {
+}
+
+@Component({selector: 'simple-cmp', template: '<b>simple</b>'})
+export class SimpleCmp {
+}
+
+@NgModule({
+  declarations: [HelloWorld, SimpleCmp],
+  imports: [GreetingModule],
+  providers: [
+    {provide: NAME, useValue: 'World!'},
+  ]
+})
+export class HelloWorldModule {
+}
+
+describe('TestBed', () => {
+  beforeEach(() => {
+    getTestBed().resetTestingModule();
+    TestBed.configureTestingModule({imports: [HelloWorldModule]});
+  });
+
+  it('should compile and render a component', () => {
+    const hello = TestBed.createComponent(HelloWorld);
+    hello.detectChanges();
+
+    expect(hello.nativeElement).toHaveText('Hello World!');
+  });
+
+  it('should give access to the component instance', () => {
+    const hello = TestBed.createComponent(HelloWorld);
+    hello.detectChanges();
+
+    expect(hello.componentInstance).toBeAnInstanceOf(HelloWorld);
+  });
+
+  it('should give the ability to query by css', () => {
+    const hello = TestBed.createComponent(HelloWorld);
+    hello.detectChanges();
+
+    const greetingByCss = hello.debugElement.query(By.css('greeting-cmp'));
+    expect(greetingByCss.nativeElement).toHaveText('Hello World!');
+    expect(greetingByCss.componentInstance).toBeAnInstanceOf(GreetingCmp);
+  });
+
+  it('should give the ability to trigger the change detection', () => {
+    const hello = TestBed.createComponent(HelloWorld);
+
+    hello.detectChanges();
+    const greetingByCss = hello.debugElement.query(By.css('greeting-cmp'));
+    expect(greetingByCss.nativeElement).toHaveText('Hello World!');
+
+    greetingByCss.componentInstance.name = 'TestBed!';
+    hello.detectChanges();
+    expect(greetingByCss.nativeElement).toHaveText('Hello TestBed!');
+  });
+
+
+  it('should give access to the node injector', () => {
+    const hello = TestBed.createComponent(HelloWorld);
+    hello.detectChanges();
+    const injector = hello.debugElement.query(By.css('greeting-cmp')).injector;
+
+    // from the node injector
+    const helloInjected = injector.get(HelloWorld);
+    expect(helloInjected).toBe(hello.componentInstance);
+
+    // from the module injector
+    const nameInjected = injector.get(NAME);
+    expect(nameInjected).toEqual('World!');
+  });
+
+  it('should give the ability to query by directive', () => {
+    const hello = TestBed.createComponent(HelloWorld);
+    hello.detectChanges();
+
+    const greetingByDirective = hello.debugElement.query(By.directive(GreetingCmp));
+    expect(greetingByDirective.componentInstance).toBeAnInstanceOf(GreetingCmp);
+  });
+
+
+  it('allow to override a template', () => {
+    // use original template when there is no override
+    let hello = TestBed.createComponent(HelloWorld);
+    hello.detectChanges();
+    expect(hello.nativeElement).toHaveText('Hello World!');
+
+    // override the template
+    getTestBed().resetTestingModule();
+    TestBed.configureTestingModule({imports: [HelloWorldModule]});
+    TestBed.overrideComponent(GreetingCmp, {set: {template: `Bonjour {{ name }}`}});
+    hello = TestBed.createComponent(HelloWorld);
+    hello.detectChanges();
+    expect(hello.nativeElement).toHaveText('Bonjour World!');
+
+    // restore the original template by calling `.resetTestingModule()`
+    getTestBed().resetTestingModule();
+    TestBed.configureTestingModule({imports: [HelloWorldModule]});
+    hello = TestBed.createComponent(HelloWorld);
+    hello.detectChanges();
+    expect(hello.nativeElement).toHaveText('Hello World!');
+  });
+
+  it('allow to override a provider', () => {
+    TestBed.overrideProvider(NAME, {useValue: 'injected World !'});
+    const hello = TestBed.createComponent(HelloWorld);
+    hello.detectChanges();
+    expect(hello.nativeElement).toHaveText('Hello injected World !');
+  });
+});
diff --git a/packages/core/test/testability/testability_spec.ts b/packages/core/test/testability/testability_spec.ts
new file mode 100644
index 000000000000..6acd7884f335
--- /dev/null
+++ b/packages/core/test/testability/testability_spec.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 {EventEmitter} from '@angular/core';
+import {Injectable} from '@angular/core/src/di';
+import {PendingMacrotask, Testability, TestabilityRegistry} from '@angular/core/src/testability/testability';
+import {NgZone} from '@angular/core/src/zone/ng_zone';
+import {async, fakeAsync, flush, tick} from '@angular/core/testing';
+import {SpyObject, beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+import {scheduleMicroTask} from '../../src/util';
+
+// Schedules a microtasks (using a resolved promise .then())
+function microTask(fn: Function): void {
+  scheduleMicroTask(() => {
+    // We do double dispatch so that we  can wait for scheduleMicrotask in the Testability when
+    // NgZone becomes stable.
+    scheduleMicroTask(fn);
+  });
+}
+
+@Injectable()
+class MockNgZone extends NgZone {
+  /** @internal */
+  onUnstable: EventEmitter<any>;
+
+  /** @internal */
+  onStable: EventEmitter<any>;
+
+  constructor() {
+    super({enableLongStackTrace: false});
+    this.onUnstable = new EventEmitter(false);
+    this.onStable = new EventEmitter(false);
+  }
+
+  unstable(): void { this.onUnstable.emit(null); }
+
+  stable(): void { this.onStable.emit(null); }
+}
+
+{
+  describe('Testability', () => {
+    let testability: Testability;
+    let execute: any;
+    let execute2: any;
+    let updateCallback: any;
+    let ngZone: MockNgZone;
+
+    beforeEach(async(() => {
+      ngZone = new MockNgZone();
+      testability = new Testability(ngZone);
+      execute = new SpyObject().spy('execute');
+      execute2 = new SpyObject().spy('execute');
+      updateCallback = new SpyObject().spy('execute');
+    }));
+
+    describe('Pending count logic', () => {
+      it('should start with a pending count of 0',
+         () => { expect(testability.getPendingRequestCount()).toEqual(0); });
+
+      it('should fire whenstable callbacks if pending count is 0', async(() => {
+           testability.whenStable(execute);
+
+           microTask(() => { expect(execute).toHaveBeenCalled(); });
+         }));
+
+      it('should not fire whenstable callbacks synchronously if pending count is 0', () => {
+        testability.whenStable(execute);
+        expect(execute).not.toHaveBeenCalled();
+      });
+
+      it('should not call whenstable callbacks when there are pending counts', async(() => {
+           testability.increasePendingRequestCount();
+           testability.increasePendingRequestCount();
+           testability.whenStable(execute);
+
+           microTask(() => {
+             expect(execute).not.toHaveBeenCalled();
+             testability.decreasePendingRequestCount();
+
+             microTask(() => { expect(execute).not.toHaveBeenCalled(); });
+           });
+         }));
+
+      it('should fire whenstable callbacks when pending drops to 0', async(() => {
+           testability.increasePendingRequestCount();
+           testability.whenStable(execute);
+
+           microTask(() => {
+             expect(execute).not.toHaveBeenCalled();
+             testability.decreasePendingRequestCount();
+
+             microTask(() => { expect(execute).toHaveBeenCalled(); });
+           });
+         }));
+
+      it('should not fire whenstable callbacks synchronously when pending drops to 0', async(() => {
+           testability.increasePendingRequestCount();
+           testability.whenStable(execute);
+           testability.decreasePendingRequestCount();
+
+           expect(execute).not.toHaveBeenCalled();
+         }));
+
+      it('should fire whenstable callbacks with didWork if pending count is 0', async(() => {
+           microTask(() => {
+             testability.whenStable(execute);
+
+             microTask(() => { expect(execute).toHaveBeenCalledWith(false); });
+           });
+         }));
+
+      it('should fire whenstable callbacks with didWork when pending drops to 0', async(() => {
+           testability.increasePendingRequestCount();
+           testability.whenStable(execute);
+
+           testability.decreasePendingRequestCount();
+
+           microTask(() => {
+             expect(execute).toHaveBeenCalledWith(true);
+             testability.whenStable(execute2);
+
+             microTask(() => { expect(execute2).toHaveBeenCalledWith(false); });
+           });
+         }));
+
+    });
+
+    describe('NgZone callback logic', () => {
+      describe('whenStable with timeout', () => {
+        it('should list pending tasks when the timeout is hit', fakeAsync(() => {
+             const id = ngZone.run(() => setTimeout(() => {}, 1000));
+             testability.whenStable(execute, 200);
+
+             expect(execute).not.toHaveBeenCalled();
+             tick(200);
+             expect(execute).toHaveBeenCalled();
+             const tasks = execute.calls.mostRecent().args[1] as PendingMacrotask[];
+
+             expect(tasks.length).toEqual(1);
+             expect(tasks[0].data.delay).toEqual(1000);
+             expect(tasks[0].source).toEqual('setTimeout');
+             expect(tasks[0].data.isPeriodic).toEqual(false);
+
+             clearTimeout(id);
+           }));
+
+        it('should fire if Angular is already stable', async(() => {
+             testability.whenStable(execute, 200);
+
+             microTask(() => { expect(execute).toHaveBeenCalled(); });
+           }));
+
+        it('should fire when macroTasks are cancelled', fakeAsync(() => {
+             const id = ngZone.run(() => setTimeout(() => {}, 1000));
+             testability.whenStable(execute, 500);
+
+             tick(200);
+             ngZone.run(() => clearTimeout(id));
+             // fakeAsync doesn't trigger NgZones whenStable
+             ngZone.stable();
+
+             tick(1);
+             expect(execute).toHaveBeenCalled();
+           }));
+
+        it('calls the done callback when angular is stable', fakeAsync(() => {
+             let timeout1Done = false;
+             ngZone.run(() => setTimeout(() => timeout1Done = true, 500));
+             testability.whenStable(execute, 1000);
+
+             tick(600);
+             ngZone.stable();
+             tick();
+
+             expect(timeout1Done).toEqual(true);
+             expect(execute).toHaveBeenCalled();
+
+             // Should cancel the done timeout.
+             tick(500);
+             ngZone.stable();
+             tick();
+             expect(execute.calls.count()).toEqual(1);
+           }));
+
+
+        it('calls update when macro tasks change', fakeAsync(() => {
+             let timeout1Done = false;
+             let timeout2Done = false;
+             ngZone.run(() => setTimeout(() => timeout1Done = true, 500));
+             tick();
+             testability.whenStable(execute, 1000, updateCallback);
+
+             tick(100);
+             ngZone.run(() => setTimeout(() => timeout2Done = true, 300));
+             expect(updateCallback.calls.count()).toEqual(1);
+             tick(600);
+
+             expect(timeout1Done).toEqual(true);
+             expect(timeout2Done).toEqual(true);
+             expect(updateCallback.calls.count()).toEqual(3);
+             expect(execute).toHaveBeenCalled();
+
+             const update1 = updateCallback.calls.all()[0].args[0] as PendingMacrotask[];
+             expect(update1[0].data.delay).toEqual(500);
+
+             const update2 = updateCallback.calls.all()[1].args[0] as PendingMacrotask[];
+             expect(update2[0].data.delay).toEqual(500);
+             expect(update2[1].data.delay).toEqual(300);
+           }));
+
+        it('cancels the done callback if the update callback returns true', fakeAsync(() => {
+             let timeoutDone = false;
+             ngZone.unstable();
+             execute2.and.returnValue(true);
+             testability.whenStable(execute, 1000, execute2);
+
+             tick(100);
+             ngZone.run(() => setTimeout(() => timeoutDone = true, 500));
+             ngZone.stable();
+             expect(execute2).toHaveBeenCalled();
+
+             tick(500);
+             ngZone.stable();
+             tick();
+
+             expect(execute).not.toHaveBeenCalled();
+           }));
+      });
+
+      it('should fire whenstable callback if event is already finished', fakeAsync(() => {
+           ngZone.unstable();
+           ngZone.stable();
+           testability.whenStable(execute);
+
+           tick();
+           expect(execute).toHaveBeenCalled();
+         }));
+
+      it('should not fire whenstable callbacks synchronously if event is already finished', () => {
+        ngZone.unstable();
+        ngZone.stable();
+        testability.whenStable(execute);
+
+        expect(execute).not.toHaveBeenCalled();
+      });
+
+      it('should fire whenstable callback when event finishes', fakeAsync(() => {
+           ngZone.unstable();
+           testability.whenStable(execute);
+
+           tick();
+           expect(execute).not.toHaveBeenCalled();
+           ngZone.stable();
+
+           tick();
+           expect(execute).toHaveBeenCalled();
+         }));
+
+      it('should not fire whenstable callbacks synchronously when event finishes', () => {
+        ngZone.unstable();
+        testability.whenStable(execute);
+        ngZone.stable();
+
+        expect(execute).not.toHaveBeenCalled();
+      });
+
+      it('should not fire whenstable callback when event did not finish', fakeAsync(() => {
+           ngZone.unstable();
+           testability.increasePendingRequestCount();
+           testability.whenStable(execute);
+
+           tick();
+           expect(execute).not.toHaveBeenCalled();
+           testability.decreasePendingRequestCount();
+
+           tick();
+           expect(execute).not.toHaveBeenCalled();
+           ngZone.stable();
+
+           tick();
+           expect(execute).toHaveBeenCalled();
+         }));
+
+      it('should not fire whenstable callback when there are pending counts', fakeAsync(() => {
+           ngZone.unstable();
+           testability.increasePendingRequestCount();
+           testability.increasePendingRequestCount();
+           testability.whenStable(execute);
+
+           tick();
+           expect(execute).not.toHaveBeenCalled();
+           ngZone.stable();
+
+           tick();
+           expect(execute).not.toHaveBeenCalled();
+           testability.decreasePendingRequestCount();
+
+           tick();
+           expect(execute).not.toHaveBeenCalled();
+           testability.decreasePendingRequestCount();
+
+           tick();
+           expect(execute).toHaveBeenCalled();
+         }));
+
+      it('should fire whenstable callback with didWork if event is already finished',
+         fakeAsync(() => {
+           ngZone.unstable();
+           ngZone.stable();
+           testability.whenStable(execute);
+
+           tick();
+           expect(execute).toHaveBeenCalledWith(true);
+           testability.whenStable(execute2);
+
+           tick();
+           expect(execute2).toHaveBeenCalledWith(false);
+         }));
+
+      it('should fire whenstable callback with didwork when event finishes', fakeAsync(() => {
+           ngZone.unstable();
+           testability.whenStable(execute);
+
+           tick();
+           ngZone.stable();
+
+           tick();
+           expect(execute).toHaveBeenCalledWith(true);
+           testability.whenStable(execute2);
+
+           tick();
+           expect(execute2).toHaveBeenCalledWith(false);
+         }));
+    });
+  });
+
+  describe('TestabilityRegistry', () => {
+    let testability1: Testability;
+    let testability2: Testability;
+    let registry: TestabilityRegistry;
+    let ngZone: MockNgZone;
+
+    beforeEach(async(() => {
+      ngZone = new MockNgZone();
+      testability1 = new Testability(ngZone);
+      testability2 = new Testability(ngZone);
+      registry = new TestabilityRegistry();
+    }));
+    describe('unregister testability', () => {
+      it('should remove the testability when unregistering an existing testability', () => {
+        registry.registerApplication('testability1', testability1);
+        registry.registerApplication('testability2', testability2);
+        registry.unregisterApplication('testability2');
+        expect(registry.getAllTestabilities().length).toEqual(1);
+        expect(registry.getTestability('testability1')).toEqual(testability1);
+      });
+
+      it('should remain the same when unregistering a non-existing testability', () => {
+        expect(registry.getAllTestabilities().length).toEqual(0);
+        registry.registerApplication('testability1', testability1);
+        registry.registerApplication('testability2', testability2);
+        registry.unregisterApplication('testability3');
+        expect(registry.getAllTestabilities().length).toEqual(2);
+        expect(registry.getTestability('testability1')).toEqual(testability1);
+        expect(registry.getTestability('testability2')).toEqual(testability2);
+      });
+
+      it('should remove all the testability when unregistering all testabilities', () => {
+        registry.registerApplication('testability1', testability1);
+        registry.registerApplication('testability2', testability2);
+        registry.unregisterAllApplications();
+        expect(registry.getAllTestabilities().length).toEqual(0);
+      });
+    });
+  });
+}
diff --git a/packages/core/test/testing_internal_spec.ts b/packages/core/test/testing_internal_spec.ts
new file mode 100644
index 000000000000..9de173b19907
--- /dev/null
+++ b/packages/core/test/testing_internal_spec.ts
@@ -0,0 +1,129 @@
+/**
+ * @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 {SpyObject} from '@angular/core/testing/src/testing_internal';
+
+class TestObj {
+  prop: any;
+  constructor(prop: any) { this.prop = prop; }
+  someFunc(): number { return -1; }
+  someComplexFunc(a: any) { return a; }
+}
+
+class SpyTestObj extends SpyObject {
+  constructor() { super(TestObj); }
+}
+
+{
+  describe('testing', () => {
+    describe('should respect custom equality tester', () => {
+      beforeEach(() => {
+        const equalIfMarried =
+            (first: any, second: any) => { return first === 'kevin' && second === 'patricia'; };
+        jasmine.addCustomEqualityTester(equalIfMarried);
+      });
+
+      it('for positive test', () => { expect('kevin').toEqual('patricia'); });
+
+      it('for negative test', () => { expect('kevin').not.toEqual('kevin'); });
+    });
+
+    describe('equality', () => {
+      it('should structurally compare objects', () => {
+        const expected = new TestObj(new TestObj({'one': [1, 2]}));
+        const actual = new TestObj(new TestObj({'one': [1, 2]}));
+        const falseActual = new TestObj(new TestObj({'one': [1, 3]}));
+
+        expect(actual).toEqual(expected);
+        expect(falseActual).not.toEqual(expected);
+      });
+    });
+
+    describe('toEqual for Maps', () => {
+      it('should detect equality for same reference', () => {
+        const m1: Map<string, number> = new Map();
+        m1.set('a', 1);
+        expect(m1).toEqual(m1);
+      });
+
+      it('should detect equality for same content', () => {
+        const m1: Map<string, number> = new Map();
+        m1.set('a', 1);
+        const m2: Map<string, number> = new Map();
+        m2.set('a', 1);
+        expect(m1).toEqual(m2);
+      });
+
+      it('should detect missing entries', () => {
+        const m1: Map<string, number> = new Map();
+        m1.set('a', 1);
+        const m2: Map<string, number> = new Map();
+        expect(m1).not.toEqual(m2);
+      });
+
+      it('should detect different values', () => {
+        const m1: Map<string, number> = new Map();
+        m1.set('a', 1);
+        const m2: Map<string, number> = new Map();
+        m2.set('a', 2);
+        expect(m1).not.toEqual(m2);
+      });
+
+      it('should detect additional entries', () => {
+        const m1: Map<string, number> = new Map();
+        m1.set('a', 1);
+        const m2: Map<string, number> = new Map();
+        m2.set('a', 1);
+        m2.set('b', 2);
+        expect(m1).not.toEqual(m2);
+      });
+    });
+
+    describe('spy objects', () => {
+      let spyObj: any;
+
+      beforeEach(() => { spyObj = new SpyTestObj(); });
+
+      it('should return a new spy func with no calls',
+         () => { expect(spyObj.spy('someFunc')).not.toHaveBeenCalled(); });
+
+      it('should record function calls', () => {
+        spyObj.spy('someFunc').and.callFake((a: any, b: any) => a + b);
+
+        expect(spyObj.someFunc(1, 2)).toEqual(3);
+        expect(spyObj.spy('someFunc')).toHaveBeenCalledWith(1, 2);
+      });
+
+      it('should match multiple function calls', () => {
+        spyObj.someFunc(1, 2);
+        spyObj.someFunc(3, 4);
+        expect(spyObj.spy('someFunc')).toHaveBeenCalledWith(1, 2);
+        expect(spyObj.spy('someFunc')).toHaveBeenCalledWith(3, 4);
+      });
+
+      it('should match null arguments', () => {
+        spyObj.someFunc(null, 'hello');
+        expect(spyObj.spy('someFunc')).toHaveBeenCalledWith(null, 'hello');
+      });
+
+      it('should match using deep equality', () => {
+        spyObj.someComplexFunc([1]);
+        expect(spyObj.spy('someComplexFunc')).toHaveBeenCalledWith([1]);
+      });
+
+      it('should support stubs', () => {
+        const s = SpyObject.stub({'a': 1}, {'b': 2});
+        expect(s.a()).toEqual(1);
+        expect(s.b()).toEqual(2);
+      });
+
+      it('should create spys for all methods',
+         () => { expect(() => spyObj.someFunc()).not.toThrow(); });
+    });
+  });
+}
diff --git a/packages/core/test/util/decorators_spec.ts b/packages/core/test/util/decorators_spec.ts
new file mode 100644
index 000000000000..f657f96f254e
--- /dev/null
+++ b/packages/core/test/util/decorators_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 {reflector} from '../../src/reflection/reflection';
+import {ANNOTATIONS, makeDecorator, makePropDecorator} from '../../src/util/decorators';
+
+class DecoratedParent {}
+class DecoratedChild extends DecoratedParent {}
+
+{
+  const TerminalDecorator =
+      makeDecorator('TerminalDecorator', (data: any) => ({terminal: true, ...data}));
+  const TestDecorator = makeDecorator(
+      '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: any) => ({value}));
+
+      class TestClass {
+        @Prop('firefox!')
+        watch: any;
+      }
+
+      const p = reflector.propMetadata(TestClass);
+      expect(p['watch']).toEqual([new Prop('firefox!')]);
+    });
+
+    it('should work with any default plain values', () => {
+      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', (data: any) => ({value: 5, ...data}));
+      const value = Object.create({value: 10});
+      expect(new Default(value)['value']).toEqual(5);
+    });
+  });
+
+  describe('decorators', () => {
+    it('should invoke as decorator', () => {
+      function Type() {}
+      TestDecorator({marker: 'WORKS'})(Type);
+      const annotations = (Type as any)[ANNOTATIONS];
+      expect(annotations[0].marker).toEqual('WORKS');
+    });
+
+    it('should invoke as new', () => {
+      const annotation = new (<any>TestDecorator)({marker: 'WORKS'});
+      expect(annotation instanceof TestDecorator).toEqual(true);
+      expect(annotation.marker).toEqual('WORKS');
+    });
+
+    it('should not apply decorators from the prototype chain', function() {
+      TestDecorator({marker: 'parent'})(DecoratedParent);
+      TestDecorator({marker: 'child'})(DecoratedChild);
+
+      const annotations = (DecoratedChild as any)[ANNOTATIONS];
+      expect(annotations.length).toBe(1);
+      expect(annotations[0].marker).toEqual('child');
+    });
+  });
+}
diff --git a/packages/core/test/util/lang_spec.ts b/packages/core/test/util/lang_spec.ts
new file mode 100644
index 000000000000..73086b09cf49
--- /dev/null
+++ b/packages/core/test/util/lang_spec.ts
@@ -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
+ */
+import {isObservable, isPromise} from '@angular/core/src/util/lang';
+import {of } from 'rxjs';
+
+{
+  describe('isPromise', () => {
+    it('should be true for native Promises',
+       () => expect(isPromise(Promise.resolve(true))).toEqual(true));
+
+    it('should be true for thenables', () => expect(isPromise({then: () => {}})).toEqual(true));
+
+    it('should be false if "then" is not a function',
+       () => expect(isPromise({then: 0})).toEqual(false));
+
+    it('should be false if the argument has no "then" function',
+       () => expect(isPromise({})).toEqual(false));
+
+    it('should be false if the argument is undefined or null', () => {
+      expect(isPromise(undefined)).toEqual(false);
+      expect(isPromise(null)).toEqual(false);
+    });
+  });
+
+  describe('isObservable', () => {
+    it('should be true for an Observable', () => expect(isObservable(of (true))).toEqual(true));
+
+    it('should be true if the argument is the object with subscribe function',
+       () => expect(isObservable({subscribe: () => {}})).toEqual(true));
+
+    it('should be false if the argument is undefined',
+       () => expect(isObservable(undefined)).toEqual(false));
+
+    it('should be false if the argument is null', () => expect(isObservable(null)).toEqual(false));
+
+    it('should be false if the argument is an object',
+       () => expect(isObservable({})).toEqual(false));
+
+    it('should be false if the argument is a function',
+       () => expect(isObservable(() => {})).toEqual(false));
+  });
+}
diff --git a/packages/core/test/util_spec.ts b/packages/core/test/util_spec.ts
new file mode 100644
index 000000000000..cd11cbd9ed27
--- /dev/null
+++ b/packages/core/test/util_spec.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 {stringify} from '../src/util';
+
+{
+  describe('stringify', () => {
+    it('should return string undefined when toString returns undefined',
+       () => expect(stringify({toString: (): any => undefined})).toBe('undefined'));
+
+    it('should return string null when toString returns null',
+       () => expect(stringify({toString: (): any => null})).toBe('null'));
+  });
+}
diff --git a/packages/core/test/view/anchor_spec.ts b/packages/core/test/view/anchor_spec.ts
new file mode 100644
index 000000000000..703c5a376e46
--- /dev/null
+++ b/packages/core/test/view/anchor_spec.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 {getDebugNode} from '@angular/core';
+import {NodeFlags, anchorDef, asElementData, elementDef} from '@angular/core/src/view/index';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
+import {compViewDef, createAndGetRootNodes} from './helper';
+
+{
+  describe(`View Anchor`, () => {
+
+    describe('create', () => {
+      it('should create anchor nodes without parents', () => {
+        const rootNodes = createAndGetRootNodes(compViewDef([
+                            anchorDef(NodeFlags.None, null, null, 0)
+                          ])).rootNodes;
+        expect(rootNodes.length).toBe(1);
+      });
+
+      it('should create views with multiple root anchor nodes', () => {
+        const rootNodes =
+            createAndGetRootNodes(compViewDef([
+              anchorDef(NodeFlags.None, null, null, 0), anchorDef(NodeFlags.None, null, null, 0)
+            ])).rootNodes;
+        expect(rootNodes.length).toBe(2);
+      });
+
+      it('should create anchor nodes with parents', () => {
+        const rootNodes = createAndGetRootNodes(compViewDef([
+                            elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+                            anchorDef(NodeFlags.None, null, null, 0),
+                          ])).rootNodes;
+        expect(getDOM().childNodes(rootNodes[0]).length).toBe(1);
+      });
+
+      it('should add debug information to the renderer', () => {
+        const someContext = new Object();
+        const {view, rootNodes} = createAndGetRootNodes(
+            compViewDef([anchorDef(NodeFlags.None, null, null, 0)]), someContext);
+        expect(getDebugNode(rootNodes[0]) !.nativeNode).toBe(asElementData(view, 0).renderElement);
+      });
+    });
+  });
+}
diff --git a/packages/core/test/view/component_view_spec.ts b/packages/core/test/view/component_view_spec.ts
new file mode 100644
index 000000000000..2c5aa1a0e153
--- /dev/null
+++ b/packages/core/test/view/component_view_spec.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 {SecurityContext} from '@angular/core';
+import {ArgumentType, BindingFlags, NodeCheckFn, NodeFlags, Services, ViewData, ViewFlags, ViewState, asElementData, directiveDef, elementDef, rootRenderNodes} from '@angular/core/src/view/index';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
+import {callMostRecentEventListenerHandler, compViewDef, createAndGetRootNodes, 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' as 'addEventListener';
+
+{
+  describe(`Component Views`, () => {
+    it('should create and attach component views', () => {
+      let instance: AComp = undefined !;
+      class AComp {
+        constructor() { instance = this; }
+      }
+
+      const {view, rootNodes} = createAndGetRootNodes(compViewDef([
+        elementDef(
+            0, NodeFlags.None, null, null, 1, 'div', null, null, null, null,
+            () => compViewDef([
+              elementDef(0, NodeFlags.None, null, null, 0, 'span'),
+            ])),
+        directiveDef(1, NodeFlags.Component, null, 0, AComp, []),
+      ]));
+
+      const compView = asElementData(view, 0).componentView;
+
+      expect(compView.context).toBe(instance);
+      expect(compView.component).toBe(instance);
+
+      const compRootEl = getDOM().childNodes(rootNodes[0])[0];
+      expect(getDOM().nodeName(compRootEl).toLowerCase()).toBe('span');
+    });
+
+    if (isBrowser()) {
+      describe('root views', () => {
+        let rootNode: HTMLElement;
+        beforeEach(() => {
+          rootNode = document.createElement('root');
+          document.body.appendChild(rootNode);
+          recordNodeToRemove(rootNode);
+        });
+
+        it('should select root elements based on a selector', () => {
+          const view = createRootView(
+              compViewDef([
+                elementDef(0, NodeFlags.None, null, null, 0, 'div'),
+              ]),
+              {}, [], 'root');
+          const rootNodes = rootRenderNodes(view);
+          expect(rootNodes).toEqual([rootNode]);
+        });
+
+        it('should select root elements based on a node', () => {
+          const view = createRootView(
+              compViewDef([
+                elementDef(0, NodeFlags.None, null, null, 0, 'div'),
+              ]),
+              {}, [], rootNode);
+          const rootNodes = rootRenderNodes(view);
+          expect(rootNodes).toEqual([rootNode]);
+        });
+
+        it('should set attributes on the root node', () => {
+          createRootView(
+              compViewDef([
+                elementDef(0, NodeFlags.None, null, null, 0, 'div', [['a', 'b']]),
+              ]),
+              {}, [], rootNode);
+          expect(rootNode.getAttribute('a')).toBe('b');
+        });
+
+        it('should clear the content of the root node', () => {
+          rootNode.appendChild(document.createElement('div'));
+          createRootView(
+              compViewDef([
+                elementDef(0, NodeFlags.None, null, null, 0, 'div', [['a', 'b']]),
+              ]),
+              {}, [], rootNode);
+          expect(rootNode.childNodes.length).toBe(0);
+        });
+      });
+    }
+
+    describe('data binding', () => {
+      it('should dirty check component views', () => {
+        let value: any;
+        class AComp {
+          a: any;
+        }
+
+        const update =
+            jasmine.createSpy('updater').and.callFake((check: NodeCheckFn, view: ViewData) => {
+              check(view, 0, ArgumentType.Inline, value);
+            });
+
+        const {view, rootNodes} = createAndGetRootNodes(
+          compViewDef([
+            elementDef(0, NodeFlags.None, null, null, 1, 'div', null, null, null, null, () => compViewDef(
+              [
+                elementDef(0, NodeFlags.None, null, null, 0, 'span', null, [[BindingFlags.TypeElementAttribute, 'a', SecurityContext.NONE]]),
+              ], null, update
+            )),
+            directiveDef(1, NodeFlags.Component, null, 0, AComp, []),
+          ]));
+        const compView = asElementData(view, 0).componentView;
+
+        value = 'v1';
+        Services.checkAndUpdateView(view);
+
+        expect(update.calls.mostRecent().args[1]).toBe(compView);
+
+        update.calls.reset();
+        Services.checkNoChangesView(view);
+
+        expect(update.calls.mostRecent().args[1]).toBe(compView);
+
+        value = 'v2';
+        expect(() => Services.checkNoChangesView(view))
+            .toThrowError(
+                `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'a: v1'. Current value: 'a: v2'.`);
+      });
+
+      // fixes https://github.com/angular/angular/issues/21788
+      it('report the binding name when an expression changes after it has been checked', () => {
+        let value: any;
+        class AComp {}
+
+        const update =
+            jasmine.createSpy('updater').and.callFake((check: NodeCheckFn, view: ViewData) => {
+              check(view, 0, ArgumentType.Inline, 'const', 'const', value);
+            });
+
+        const {view, rootNodes} = createAndGetRootNodes(
+          compViewDef([
+            elementDef(0, NodeFlags.None, null, null, 1, 'div', null, null, null, null, () => compViewDef([
+                elementDef(0, NodeFlags.None, null, null, 0, 'span', null, [
+                 [BindingFlags.TypeElementAttribute, 'p1', SecurityContext.NONE],
+                [BindingFlags.TypeElementAttribute, 'p2', SecurityContext.NONE],
+                [BindingFlags.TypeElementAttribute, 'p3', SecurityContext.NONE],
+              ]),
+              ], null, update)
+            ),
+            directiveDef(1, NodeFlags.Component, null, 0, AComp, []),
+          ]));
+
+        value = 'v1';
+        Services.checkAndUpdateView(view);
+        value = 'v2';
+        expect(() => Services.checkNoChangesView(view))
+            .toThrowError(
+                `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'p3: v1'. Current value: 'p3: v2'.`);
+      });
+
+      it('should support detaching and attaching component views for dirty checking', () => {
+        class AComp {
+          a: any;
+        }
+
+        const update = jasmine.createSpy('updater');
+
+        const {view, rootNodes} = createAndGetRootNodes(compViewDef([
+          elementDef(
+              0, NodeFlags.None, null, null, 1, 'div', null, null, null, null,
+              () => compViewDef(
+                  [
+                    elementDef(0, NodeFlags.None, null, null, 0, 'span'),
+                  ],
+                  update)),
+          directiveDef(1, NodeFlags.Component, null, 0, AComp, [], null, null),
+        ]));
+
+        const compView = asElementData(view, 0).componentView;
+
+        Services.checkAndUpdateView(view);
+        update.calls.reset();
+
+        compView.state &= ~ViewState.ChecksEnabled;
+        Services.checkAndUpdateView(view);
+        expect(update).not.toHaveBeenCalled();
+
+        compView.state |= ViewState.ChecksEnabled;
+        Services.checkAndUpdateView(view);
+        expect(update).toHaveBeenCalled();
+      });
+
+      if (isBrowser()) {
+        it('should support OnPush components', () => {
+          let compInputValue: any;
+          class AComp {
+            a: any;
+          }
+
+          const update = jasmine.createSpy('updater');
+
+          const addListenerSpy = spyOn(HTMLElement.prototype, addEventListener).and.callThrough();
+
+          const {view} = createAndGetRootNodes(compViewDef(
+              [
+                elementDef(
+                    0, NodeFlags.None, null, null, 1, 'div', null, null, null, null,
+                    () => {
+                      return compViewDef(
+                          [
+                            elementDef(
+                                0, NodeFlags.None, null, null, 0, 'span', null, null,
+                                [[null !, 'click']]),
+                          ],
+                          update, null, ViewFlags.OnPush);
+                    }),
+                directiveDef(1, NodeFlags.Component, null, 0, AComp, [], {a: [0, 'a']}),
+              ],
+              (check, view) => { check(view, 1, ArgumentType.Inline, compInputValue); }));
+
+          Services.checkAndUpdateView(view);
+
+          // auto detach
+          update.calls.reset();
+          Services.checkAndUpdateView(view);
+          expect(update).not.toHaveBeenCalled();
+
+          // auto attach on input changes
+          update.calls.reset();
+          compInputValue = 'v1';
+          Services.checkAndUpdateView(view);
+          expect(update).toHaveBeenCalled();
+
+          // auto detach
+          update.calls.reset();
+          Services.checkAndUpdateView(view);
+          expect(update).not.toHaveBeenCalled();
+
+          // auto attach on events
+          callMostRecentEventListenerHandler(addListenerSpy, 'SomeEvent');
+          update.calls.reset();
+          Services.checkAndUpdateView(view);
+          expect(update).toHaveBeenCalled();
+
+          // auto detach
+          update.calls.reset();
+          Services.checkAndUpdateView(view);
+          expect(update).not.toHaveBeenCalled();
+        });
+      }
+
+      it('should not stop dirty checking views that threw errors in change detection', () => {
+        class AComp {
+          a: any;
+        }
+
+        const update = jasmine.createSpy('updater');
+
+        const {view, rootNodes} = createAndGetRootNodes(compViewDef([
+          elementDef(
+              0, NodeFlags.None, null, null, 1, 'div', null, null, null, null,
+              () => compViewDef(
+                  [elementDef(
+                      0, NodeFlags.None, null, null, 0, 'span', null,
+                      [[BindingFlags.TypeElementAttribute, 'a', SecurityContext.NONE]])],
+                  null, update)),
+          directiveDef(1, NodeFlags.Component, null, 0, AComp, [], null, null, ),
+        ]));
+
+        update.and.callFake((check: NodeCheckFn, view: ViewData) => { throw new Error('Test'); });
+        expect(() => Services.checkAndUpdateView(view)).toThrowError('Test');
+        expect(update).toHaveBeenCalled();
+
+        update.calls.reset();
+        expect(() => Services.checkAndUpdateView(view)).toThrowError('Test');
+        expect(update).toHaveBeenCalled();
+      });
+
+    });
+
+    describe('destroy', () => {
+      it('should destroy component views', () => {
+        const log: string[] = [];
+
+        class AComp {}
+
+        class ChildProvider {
+          ngOnDestroy() { log.push('ngOnDestroy'); }
+        }
+
+        const {view, rootNodes} = createAndGetRootNodes(compViewDef([
+          elementDef(
+              0, NodeFlags.None, null, null, 1, 'div', null, null, null, null,
+              () => compViewDef([
+                elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+                directiveDef(1, NodeFlags.OnDestroy, null, 0, ChildProvider, [])
+              ])),
+          directiveDef(1, NodeFlags.Component, null, 0, AComp, [], null, null, ),
+        ]));
+
+        Services.destroyView(view);
+
+        expect(log).toEqual(['ngOnDestroy']);
+      });
+
+      it('should throw on dirty checking destroyed views', () => {
+        const {view, rootNodes} = createAndGetRootNodes(
+            compViewDef([elementDef(0, NodeFlags.None, null, null, 0, 'div')]));
+
+        Services.destroyView(view);
+
+        expect(() => Services.checkAndUpdateView(view))
+            .toThrowError('ViewDestroyedError: Attempt to use a destroyed view: detectChanges');
+      });
+    });
+
+  });
+}
diff --git a/packages/core/test/view/element_spec.ts b/packages/core/test/view/element_spec.ts
new file mode 100644
index 000000000000..5e9fe24afdd4
--- /dev/null
+++ b/packages/core/test/view/element_spec.ts
@@ -0,0 +1,300 @@
+/**
+ * @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 {ErrorHandler, SecurityContext, getDebugNode} from '@angular/core';
+import {getDebugContext} from '@angular/core/src/errors';
+import {BindingFlags, NodeFlags, Services, ViewData, ViewDefinition, asElementData, elementDef} 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, callMostRecentEventListenerHandler, checkNodeInlineOrDynamic, compViewDef, createAndGetRootNodes, 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' as 'addEventListener';
+const removeEventListener = '__zone_symbol__removeEventListener' as 'removeEventListener';
+
+{
+  describe(`View Elements`, () => {
+
+    describe('create', () => {
+      it('should create elements without parents', () => {
+        const rootNodes = createAndGetRootNodes(compViewDef([
+                            elementDef(0, NodeFlags.None, null, null, 0, 'span')
+                          ])).rootNodes;
+        expect(rootNodes.length).toBe(1);
+        expect(getDOM().nodeName(rootNodes[0]).toLowerCase()).toBe('span');
+      });
+
+      it('should create views with multiple root elements', () => {
+        const rootNodes = createAndGetRootNodes(compViewDef([
+                            elementDef(0, NodeFlags.None, null, null, 0, 'span'),
+                            elementDef(1, NodeFlags.None, null, null, 0, 'span'),
+                          ])).rootNodes;
+        expect(rootNodes.length).toBe(2);
+      });
+
+      it('should create elements with parents', () => {
+        const rootNodes = createAndGetRootNodes(compViewDef([
+                            elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+                            elementDef(1, NodeFlags.None, null, null, 0, 'span'),
+                          ])).rootNodes;
+        expect(rootNodes.length).toBe(1);
+        const spanEl = getDOM().childNodes(rootNodes[0])[0];
+        expect(getDOM().nodeName(spanEl).toLowerCase()).toBe('span');
+      });
+
+      it('should set fixed attributes', () => {
+        const rootNodes = createAndGetRootNodes(compViewDef([
+                            elementDef(0, NodeFlags.None, null, null, 0, 'div', [['title', 'a']]),
+                          ])).rootNodes;
+        expect(rootNodes.length).toBe(1);
+        expect(getDOM().getAttribute(rootNodes[0], 'title')).toBe('a');
+      });
+
+      it('should add debug information to the renderer', () => {
+        const someContext = new Object();
+        const {view, rootNodes} = createAndGetRootNodes(
+            compViewDef([elementDef(0, NodeFlags.None, null, null, 0, 'div')]), someContext);
+        expect(getDebugNode(rootNodes[0]) !.nativeNode).toBe(asElementData(view, 0).renderElement);
+      });
+    });
+
+    describe('change properties', () => {
+      ARG_TYPE_VALUES.forEach((inlineDynamic) => {
+        it(`should update via strategy ${inlineDynamic}`, () => {
+
+          const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+              [
+                elementDef(
+                    0, NodeFlags.None, null, null, 0, 'input', null,
+                    [
+                      [BindingFlags.TypeProperty, 'title', SecurityContext.NONE],
+                      [BindingFlags.TypeProperty, 'value', SecurityContext.NONE],
+                    ]),
+              ],
+              null, (check, view) => {
+                checkNodeInlineOrDynamic(check, view, 0, inlineDynamic, ['v1', 'v2']);
+              }));
+
+          Services.checkAndUpdateView(view);
+
+          const el = rootNodes[0];
+          expect(getDOM().getProperty(el, 'title')).toBe('v1');
+          expect(getDOM().getProperty(el, 'value')).toBe('v2');
+        });
+      });
+    });
+
+    describe('change attributes', () => {
+      ARG_TYPE_VALUES.forEach((inlineDynamic) => {
+        it(`should update via strategy ${inlineDynamic}`, () => {
+          const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+              [
+                elementDef(
+                    0, NodeFlags.None, null, null, 0, 'div', null,
+                    [
+                      [BindingFlags.TypeElementAttribute, 'a1', SecurityContext.NONE],
+                      [BindingFlags.TypeElementAttribute, 'a2', SecurityContext.NONE],
+                    ]),
+              ],
+              null, (check, view) => {
+                checkNodeInlineOrDynamic(check, view, 0, inlineDynamic, ['v1', 'v2']);
+              }));
+
+          Services.checkAndUpdateView(view);
+
+          const el = rootNodes[0];
+          expect(getDOM().getAttribute(el, 'a1')).toBe('v1');
+          expect(getDOM().getAttribute(el, 'a2')).toBe('v2');
+        });
+      });
+    });
+
+    describe('change classes', () => {
+      ARG_TYPE_VALUES.forEach((inlineDynamic) => {
+        it(`should update via strategy ${inlineDynamic}`, () => {
+          const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+              [
+                elementDef(
+                    0, NodeFlags.None, null, null, 0, 'div', null,
+                    [
+                      [BindingFlags.TypeElementClass, 'c1', null],
+                      [BindingFlags.TypeElementClass, 'c2', null],
+                    ]),
+              ],
+              (check, view) => {
+                checkNodeInlineOrDynamic(check, view, 0, inlineDynamic, [true, true]);
+              }));
+
+          Services.checkAndUpdateView(view);
+
+          const el = rootNodes[0];
+          expect(getDOM().hasClass(el, 'c1')).toBeTruthy();
+          expect(getDOM().hasClass(el, 'c2')).toBeTruthy();
+        });
+      });
+    });
+
+    describe('change styles', () => {
+      ARG_TYPE_VALUES.forEach((inlineDynamic) => {
+        it(`should update via strategy ${inlineDynamic}`, () => {
+          const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+              [
+                elementDef(
+                    0, NodeFlags.None, null, null, 0, 'div', null,
+                    [
+                      [BindingFlags.TypeElementStyle, 'width', 'px'],
+                      [BindingFlags.TypeElementStyle, 'color', null],
+                    ]),
+              ],
+              null, (check, view) => {
+                checkNodeInlineOrDynamic(check, view, 0, inlineDynamic, [10, 'red']);
+              }));
+
+          Services.checkAndUpdateView(view);
+
+          const el = rootNodes[0];
+          expect(getDOM().getStyle(el, 'width')).toBe('10px');
+          expect(getDOM().getStyle(el, 'color')).toBe('red');
+        });
+      });
+    });
+
+    if (isBrowser()) {
+      describe('listen to DOM events', () => {
+        function createAndAttachAndGetRootNodes(viewDef: ViewDefinition):
+            {rootNodes: any[], view: ViewData} {
+          const result = createAndGetRootNodes(viewDef);
+          // Note: We need to append the node to the document.body, otherwise `click` events
+          // won't work in IE.
+          result.rootNodes.forEach((node) => {
+            document.body.appendChild(node);
+            recordNodeToRemove(node);
+          });
+          return result;
+        }
+
+        it('should listen to DOM events', () => {
+          const handleEventSpy = jasmine.createSpy('handleEvent');
+          const removeListenerSpy =
+              spyOn(HTMLElement.prototype, removeEventListener).and.callThrough();
+          const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
+              0, NodeFlags.None, null, null, 0, 'button', null, null, [[null !, 'click']],
+              handleEventSpy)]));
+
+          rootNodes[0].click();
+
+          expect(handleEventSpy).toHaveBeenCalled();
+          let handleEventArgs = handleEventSpy.calls.mostRecent().args;
+          expect(handleEventArgs[0]).toBe(view);
+          expect(handleEventArgs[1]).toBe('click');
+          expect(handleEventArgs[2]).toBeTruthy();
+
+          Services.destroyView(view);
+
+          expect(removeListenerSpy).toHaveBeenCalled();
+        });
+
+        it('should listen to window events', () => {
+          const handleEventSpy = jasmine.createSpy('handleEvent');
+          const addListenerSpy = spyOn(window, addEventListener);
+          const removeListenerSpy = spyOn(window, removeEventListener);
+          const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
+              0, NodeFlags.None, null, null, 0, 'button', null, null, [['window', 'windowClick']],
+              handleEventSpy)]));
+
+          expect(addListenerSpy).toHaveBeenCalled();
+          expect(addListenerSpy.calls.mostRecent().args[0]).toBe('windowClick');
+          callMostRecentEventListenerHandler(addListenerSpy, {name: 'windowClick'});
+
+          expect(handleEventSpy).toHaveBeenCalled();
+          const handleEventArgs = handleEventSpy.calls.mostRecent().args;
+          expect(handleEventArgs[0]).toBe(view);
+          expect(handleEventArgs[1]).toBe('window:windowClick');
+          expect(handleEventArgs[2]).toBeTruthy();
+
+          Services.destroyView(view);
+
+          expect(removeListenerSpy).toHaveBeenCalled();
+        });
+
+        it('should listen to document events', () => {
+          const handleEventSpy = jasmine.createSpy('handleEvent');
+          const addListenerSpy = spyOn(document, addEventListener);
+          const removeListenerSpy = spyOn(document, removeEventListener);
+          const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
+              0, NodeFlags.None, null, null, 0, 'button', null, null,
+              [['document', 'documentClick']], handleEventSpy)]));
+
+          expect(addListenerSpy).toHaveBeenCalled();
+          expect(addListenerSpy.calls.mostRecent().args[0]).toBe('documentClick');
+          callMostRecentEventListenerHandler(addListenerSpy, {name: 'windowClick'});
+
+          expect(handleEventSpy).toHaveBeenCalled();
+          const handleEventArgs = handleEventSpy.calls.mostRecent().args;
+          expect(handleEventArgs[0]).toBe(view);
+          expect(handleEventArgs[1]).toBe('document:documentClick');
+          expect(handleEventArgs[2]).toBeTruthy();
+
+          Services.destroyView(view);
+
+          expect(removeListenerSpy).toHaveBeenCalled();
+        });
+
+        it('should preventDefault only if the handler returns false', () => {
+          let eventHandlerResult: any;
+          let preventDefaultSpy: jasmine.Spy = undefined !;
+
+          const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
+              0, NodeFlags.None, null, null, 0, 'button', null, null, [[null !, 'click']],
+              (view, eventName, event) => {
+                preventDefaultSpy = spyOn(event, 'preventDefault').and.callThrough();
+                return eventHandlerResult;
+              })]));
+
+          eventHandlerResult = undefined;
+          rootNodes[0].click();
+          expect(preventDefaultSpy).not.toHaveBeenCalled();
+
+          eventHandlerResult = true;
+          rootNodes[0].click();
+          expect(preventDefaultSpy).not.toHaveBeenCalled();
+
+          eventHandlerResult = 'someString';
+          rootNodes[0].click();
+          expect(preventDefaultSpy).not.toHaveBeenCalled();
+
+          eventHandlerResult = false;
+          rootNodes[0].click();
+          expect(preventDefaultSpy).toHaveBeenCalled();
+        });
+
+        it('should report debug info on event errors', () => {
+          const handleErrorSpy = spyOn(TestBed.get(ErrorHandler), 'handleError');
+          const addListenerSpy = spyOn(HTMLElement.prototype, addEventListener).and.callThrough();
+          const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
+              0, NodeFlags.None, null, null, 0, 'button', null, null, [[null !, 'click']],
+              () => { throw new Error('Test'); })]));
+
+          callMostRecentEventListenerHandler(addListenerSpy, 'SomeEvent');
+          const err = handleErrorSpy.calls.mostRecent().args[0];
+          expect(err).toBeTruthy();
+          expect(err.message).toBe('Test');
+          const debugCtx = getDebugContext(err);
+          expect(debugCtx.view).toBe(view);
+          expect(debugCtx.nodeIndex).toBe(0);
+        });
+      });
+    }
+  });
+}
diff --git a/packages/core/test/view/embedded_view_spec.ts b/packages/core/test/view/embedded_view_spec.ts
new file mode 100644
index 000000000000..f0da7901f1ed
--- /dev/null
+++ b/packages/core/test/view/embedded_view_spec.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 {SecurityContext} from '@angular/core';
+import {ArgumentType, BindingFlags, NodeCheckFn, NodeFlags, Services, ViewData, anchorDef, asElementData, attachEmbeddedView, detachEmbeddedView, directiveDef, elementDef, moveEmbeddedView, rootRenderNodes} from '@angular/core/src/view/index';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
+import {compViewDef, compViewDefFactory, createAndGetRootNodes, createEmbeddedView} from './helper';
+
+{
+  describe(`Embedded Views`, () => {
+
+    it('should create embedded views with the right context', () => {
+      const parentContext = new Object();
+      const childContext = new Object();
+
+      const {view: parentView} = createAndGetRootNodes(
+          compViewDef([
+            elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+            anchorDef(
+                NodeFlags.EmbeddedViews, null, null, 0, null,
+                compViewDefFactory([elementDef(0, NodeFlags.None, null, null, 0, 'span')])),
+          ]),
+          parentContext);
+
+      const childView = createEmbeddedView(parentView, parentView.def.nodes[1], childContext);
+      expect(childView.component).toBe(parentContext);
+      expect(childView.context).toBe(childContext);
+    });
+
+    it('should attach and detach embedded views', () => {
+      const {view: parentView, rootNodes} = createAndGetRootNodes(compViewDef([
+        elementDef(0, NodeFlags.None, null, null, 2, 'div'),
+        anchorDef(NodeFlags.EmbeddedViews, null, null, 0, null, compViewDefFactory([
+                    elementDef(0, NodeFlags.None, null, null, 0, 'span', [['name', 'child0']])
+                  ])),
+        anchorDef(NodeFlags.None, null, null, 0, null, compViewDefFactory([elementDef(
+                                                           0, NodeFlags.None, null, null, 0, 'span',
+                                                           [['name', 'child1']])]))
+      ]));
+      const viewContainerData = asElementData(parentView, 1);
+      const rf = parentView.root.rendererFactory;
+
+      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);
+
+      // 2 anchors + 2 elements
+      const rootChildren = getDOM().childNodes(rootNodes[0]);
+      expect(rootChildren.length).toBe(4);
+      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);
+    });
+
+    it('should move embedded views', () => {
+      const {view: parentView, rootNodes} = createAndGetRootNodes(compViewDef([
+        elementDef(0, NodeFlags.None, null, null, 2, 'div'),
+        anchorDef(NodeFlags.EmbeddedViews, null, null, 0, null, compViewDefFactory([
+                    elementDef(0, NodeFlags.None, null, null, 0, 'span', [['name', 'child0']])
+                  ])),
+        anchorDef(NodeFlags.None, null, null, 0, null, compViewDefFactory([elementDef(
+                                                           0, NodeFlags.None, null, null, 0, 'span',
+                                                           [['name', 'child1']])]))
+      ]));
+      const viewContainerData = asElementData(parentView, 1);
+
+      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);
+
+      moveEmbeddedView(viewContainerData, 0, 1);
+
+      expect(viewContainerData.viewContainer !._embeddedViews).toEqual([childView1, childView0]);
+      // 2 anchors + 2 elements
+      const rootChildren = getDOM().childNodes(rootNodes[0]);
+      expect(rootChildren.length).toBe(4);
+      expect(getDOM().getAttribute(rootChildren[1], 'name')).toBe('child1');
+      expect(getDOM().getAttribute(rootChildren[2], 'name')).toBe('child0');
+    });
+
+    it('should include embedded views in root nodes', () => {
+      const {view: parentView} = createAndGetRootNodes(compViewDef([
+        anchorDef(NodeFlags.EmbeddedViews, null, null, 0, null, compViewDefFactory([
+                    elementDef(0, NodeFlags.None, null, null, 0, 'span', [['name', 'child0']])
+                  ])),
+        elementDef(1, NodeFlags.None, null, null, 0, 'span', [['name', 'after']])
+      ]));
+
+      const childView0 = createEmbeddedView(parentView, parentView.def.nodes[0]);
+      attachEmbeddedView(parentView, asElementData(parentView, 0), 0, childView0);
+
+      const rootNodes = rootRenderNodes(parentView);
+      expect(rootNodes.length).toBe(3);
+      expect(getDOM().getAttribute(rootNodes[1], 'name')).toBe('child0');
+      expect(getDOM().getAttribute(rootNodes[2], 'name')).toBe('after');
+    });
+
+    it('should dirty check embedded views', () => {
+      let childValue = 'v1';
+      const update =
+          jasmine.createSpy('updater').and.callFake((check: NodeCheckFn, view: ViewData) => {
+            check(view, 0, ArgumentType.Inline, childValue);
+          });
+
+      const {view: parentView, rootNodes} = createAndGetRootNodes(compViewDef([
+        elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+        anchorDef(
+            NodeFlags.EmbeddedViews, null, null, 0, null,
+            compViewDefFactory(
+                [elementDef(
+                    0, NodeFlags.None, null, null, 0, 'span', null,
+                    [[BindingFlags.TypeElementAttribute, 'name', SecurityContext.NONE]])],
+                update))
+      ]));
+
+      const childView0 = createEmbeddedView(parentView, parentView.def.nodes[1]);
+
+      attachEmbeddedView(parentView, asElementData(parentView, 1), 0, childView0);
+
+      Services.checkAndUpdateView(parentView);
+
+      expect(update.calls.mostRecent().args[1]).toBe(childView0);
+
+      update.calls.reset();
+      Services.checkNoChangesView(parentView);
+
+      expect(update.calls.mostRecent().args[1]).toBe(childView0);
+
+      childValue = 'v2';
+      expect(() => Services.checkNoChangesView(parentView))
+          .toThrowError(
+              `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'name: v1'. Current value: 'name: v2'.`);
+    });
+
+    it('should destroy embedded views', () => {
+      const log: string[] = [];
+
+      class ChildProvider {
+        ngOnDestroy() { log.push('ngOnDestroy'); }
+      }
+
+      const {view: parentView} = createAndGetRootNodes(compViewDef([
+        elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+        anchorDef(NodeFlags.EmbeddedViews, null, null, 0, null, compViewDefFactory([
+                    elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+                    directiveDef(1, NodeFlags.OnDestroy, null, 0, ChildProvider, [])
+                  ]))
+      ]));
+
+      const childView0 = createEmbeddedView(parentView, parentView.def.nodes[1]);
+
+      attachEmbeddedView(parentView, asElementData(parentView, 1), 0, childView0);
+      Services.destroyView(parentView);
+
+      expect(log).toEqual(['ngOnDestroy']);
+    });
+  });
+}
diff --git a/packages/core/test/view/helper.ts b/packages/core/test/view/helper.ts
new file mode 100644
index 000000000000..b9b10f59f3b2
--- /dev/null
+++ b/packages/core/test/view/helper.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 {Injector, NgModuleRef} from '@angular/core';
+import {ArgumentType, NodeCheckFn, NodeDef, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, ViewUpdateFn, initServicesIfNeeded, rootRenderNodes, viewDef} from '@angular/core/src/view/index';
+import {TestBed} from '@angular/core/testing';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
+export function isBrowser() {
+  return getDOM().supportsDOMEvents();
+}
+
+export const ARG_TYPE_VALUES = [ArgumentType.Inline, ArgumentType.Dynamic];
+
+export function checkNodeInlineOrDynamic(
+    check: NodeCheckFn, view: ViewData, nodeIndex: number, argType: ArgumentType,
+    values: any[]): any {
+  switch (argType) {
+    case ArgumentType.Inline:
+      return (<any>check)(view, nodeIndex, argType, ...values);
+    case ArgumentType.Dynamic:
+      return check(view, nodeIndex, argType, values);
+  }
+}
+
+export function createRootView(
+    def: ViewDefinition, context?: any, projectableNodes?: any[][],
+    rootSelectorOrNode?: any): ViewData {
+  initServicesIfNeeded();
+  return Services.createRootView(
+      TestBed.get(Injector), projectableNodes || [], rootSelectorOrNode, def,
+      TestBed.get(NgModuleRef), context);
+}
+
+export function createEmbeddedView(parent: ViewData, anchorDef: NodeDef, context?: any): ViewData {
+  return Services.createEmbeddedView(parent, anchorDef, anchorDef.element !.template !, context);
+}
+
+export function compViewDef(
+    nodes: NodeDef[], updateDirectives?: null | ViewUpdateFn, updateRenderer?: null | ViewUpdateFn,
+    viewFlags: ViewFlags = ViewFlags.None): ViewDefinition {
+  const def = viewDef(viewFlags, nodes, updateDirectives, updateRenderer);
+
+  def.nodes.forEach((node, index) => {
+    if (node.nodeIndex !== index) {
+      throw new Error('nodeIndex should be the same as the index of the node');
+    }
+
+    // This check should be removed when we start reordering nodes at runtime
+    if (node.checkIndex > -1 && node.checkIndex !== node.nodeIndex) {
+      throw new Error(
+          `nodeIndex and checkIndex should be the same, got ${node.nodeIndex} !== ${node.checkIndex}`);
+    }
+  });
+
+  return def;
+}
+
+export function compViewDefFactory(
+    nodes: NodeDef[], updateDirectives?: null | ViewUpdateFn, updateRenderer?: null | ViewUpdateFn,
+    viewFlags: ViewFlags = ViewFlags.None): ViewDefinitionFactory {
+  return () => compViewDef(nodes, updateDirectives, updateRenderer, viewFlags);
+}
+
+export function createAndGetRootNodes(
+    viewDef: ViewDefinition, ctx?: any): {rootNodes: any[], view: ViewData} {
+  const view = createRootView(viewDef, ctx);
+  const rootNodes = rootRenderNodes(view);
+  return {rootNodes, view};
+}
+
+let removeNodes: Node[];
+
+beforeEach(() => { removeNodes = []; });
+afterEach(() => { removeNodes.forEach((node) => getDOM().remove(node)); });
+
+export function recordNodeToRemove(node: Node) {
+  removeNodes.push(node);
+}
+
+export function callMostRecentEventListenerHandler(spy: any, params: any) {
+  const mostRecent = spy.calls.mostRecent();
+  if (!mostRecent) {
+    return;
+  }
+
+  const obj = mostRecent.object;
+  const args = mostRecent.args;
+
+  const eventName = args[0];
+  const handler = args[1];
+
+  handler && handler.apply(obj, [{type: eventName}]);
+}
\ 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
new file mode 100644
index 000000000000..d893cd98bea7
--- /dev/null
+++ b/packages/core/test/view/ng_content_spec.ts
@@ -0,0 +1,143 @@
+/**
+ * @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, RenderComponentType, RootRenderer, Sanitizer, SecurityContext, TemplateRef, ViewContainerRef, ViewEncapsulation, getDebugNode} from '@angular/core';
+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 {compViewDef, compViewDefFactory, createEmbeddedView, createRootView, isBrowser} from './helper';
+
+{
+  describe(`View NgContent`, () => {
+    function hostElDef(
+        checkIndex: number, contentNodes: NodeDef[], viewNodes: NodeDef[]): NodeDef[] {
+      class AComp {}
+
+      const aCompViewDef = compViewDef(viewNodes);
+
+      return [
+        elementDef(
+            checkIndex, NodeFlags.None, null, null, 1 + contentNodes.length, 'acomp', null, null,
+            null, null, () => aCompViewDef),
+        directiveDef(checkIndex + 1, NodeFlags.Component, null, 0, AComp, []), ...contentNodes
+      ];
+    }
+
+    function createAndGetRootNodes(
+        viewDef: ViewDefinition, ctx?: any): {rootNodes: any[], view: ViewData} {
+      const view = createRootView(viewDef, ctx || {});
+      const rootNodes = rootRenderNodes(view);
+      return {rootNodes, view};
+    }
+
+    it('should create ng-content nodes without parents', () => {
+      const {view, rootNodes} = createAndGetRootNodes(
+          compViewDef(hostElDef(0, [textDef(2, 0, ['a'])], [ngContentDef(null, 0)])));
+
+      expect(getDOM().firstChild(rootNodes[0])).toBe(asTextData(view, 2).renderText);
+    });
+
+    it('should create views with multiple root ng-content nodes', () => {
+      const {view, rootNodes} = createAndGetRootNodes(compViewDef(hostElDef(
+          0, [textDef(2, 0, ['a']), textDef(3, 1, ['b'])],
+          [ngContentDef(null, 0), ngContentDef(null, 1)])));
+
+      expect(getDOM().childNodes(rootNodes[0])[0]).toBe(asTextData(view, 2).renderText);
+      expect(getDOM().childNodes(rootNodes[0])[1]).toBe(asTextData(view, 3).renderText);
+    });
+
+    it('should create ng-content nodes with parents', () => {
+      const {view, rootNodes} = createAndGetRootNodes(compViewDef(hostElDef(
+          0, [textDef(2, 0, ['a'])],
+          [elementDef(0, NodeFlags.None, null, null, 1, 'div'), ngContentDef(null, 0)])));
+
+      expect(getDOM().firstChild(getDOM().firstChild(rootNodes[0])))
+          .toBe(asTextData(view, 2).renderText);
+    });
+
+    it('should reproject ng-content nodes', () => {
+      const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+          hostElDef(0, [textDef(2, 0, ['a'])], hostElDef(0, [ngContentDef(0, 0)], [
+                      elementDef(0, NodeFlags.None, null, null, 1, 'span'), ngContentDef(null, 0)
+                    ]))));
+      expect(getDOM().firstChild(getDOM().firstChild(getDOM().firstChild(rootNodes[0]))))
+          .toBe(asTextData(view, 2).renderText);
+    });
+
+    it('should project already attached embedded views', () => {
+      class CreateViewService {
+        constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
+          viewContainerRef.createEmbeddedView(templateRef);
+        }
+      }
+
+      const {view, rootNodes} =
+          createAndGetRootNodes(
+              compViewDef(
+                  hostElDef(0,
+                      [
+                        anchorDef(
+                            NodeFlags.EmbeddedViews, null, 0, 1, null,
+                            compViewDefFactory([textDef(0, null, ['a'])])),
+                        directiveDef(3,
+                            NodeFlags.None, null, 0, CreateViewService,
+                            [TemplateRef, ViewContainerRef]),
+                      ],
+                      [
+                        elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+                        ngContentDef(null, 0),
+                      ])));
+
+      const anchor = asElementData(view, 2);
+      expect((getDOM().childNodes(getDOM().firstChild(rootNodes[0]))[0]))
+          .toBe(anchor.renderElement);
+      const embeddedView = anchor.viewContainer !._embeddedViews[0];
+      expect((getDOM().childNodes(getDOM().firstChild(rootNodes[0]))[1]))
+          .toBe(asTextData(embeddedView, 0).renderText);
+    });
+
+    it('should include projected nodes when attaching / detaching embedded views', () => {
+      const {view, rootNodes} =
+          createAndGetRootNodes(compViewDef(hostElDef(0, [textDef(2, 0, ['a'])], [
+            elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+            anchorDef(NodeFlags.EmbeddedViews, null, 0, 0, null, compViewDefFactory([
+                        ngContentDef(null, 0),
+                        // The anchor would be added by the compiler after the ngContent
+                        anchorDef(NodeFlags.None, null, null, 0),
+                      ])),
+          ])));
+
+      const componentView = asElementData(view, 0).componentView;
+      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);
+    });
+
+    if (isBrowser()) {
+      it('should use root projectable nodes', () => {
+        const projectableNodes = [[document.createTextNode('a')], [document.createTextNode('b')]];
+        const view = createRootView(
+            compViewDef(hostElDef(0, [], [ngContentDef(null, 0), ngContentDef(null, 1)])), {},
+            projectableNodes);
+        const rootNodes = rootRenderNodes(view);
+
+        expect(getDOM().childNodes(rootNodes[0])[0]).toBe(projectableNodes[0][0]);
+        expect(getDOM().childNodes(rootNodes[0])[1]).toBe(projectableNodes[1][0]);
+      });
+    }
+  });
+}
diff --git a/packages/core/test/view/ng_module_spec.ts b/packages/core/test/view/ng_module_spec.ts
new file mode 100644
index 000000000000..34ce8fbeb967
--- /dev/null
+++ b/packages/core/test/view/ng_module_spec.ts
@@ -0,0 +1,258 @@
+/**
+ * @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 {InjectableDef, defineInjectable} from '@angular/core/src/di/defs';
+import {INJECTOR, InjectFlags, Injector, inject} from '@angular/core/src/di/injector';
+import {makePropDecorator} from '@angular/core/src/util/decorators';
+import {NgModuleDefinition, NgModuleProviderDef, NodeFlags} from '@angular/core/src/view';
+import {moduleDef, moduleProvideDef, resolveNgModuleDep} from '@angular/core/src/view/ng_module';
+import {createNgModuleRef} from '@angular/core/src/view/refs';
+import {tokenKey} from '@angular/core/src/view/util';
+import {APP_ROOT} from '../../src/di/scope';
+
+class Foo {}
+
+class MyModule {}
+
+class MyChildModule {}
+
+class NotMyModule {}
+
+class Bar {
+  static ngInjectableDef: InjectableDef<Bar> = defineInjectable({
+    factory: () => new Bar(),
+    providedIn: MyModule,
+  });
+}
+
+class Baz {
+  static ngInjectableDef: InjectableDef<Baz> = defineInjectable({
+    factory: () => new Baz(),
+    providedIn: NotMyModule,
+  });
+}
+
+class HasNormalDep {
+  constructor(public foo: Foo) {}
+
+  static ngInjectableDef: InjectableDef<HasNormalDep> = defineInjectable({
+    factory: () => new HasNormalDep(inject(Foo)),
+    providedIn: MyModule,
+  });
+}
+
+class HasDefinedDep {
+  constructor(public bar: Bar) {}
+
+  static ngInjectableDef: InjectableDef<HasDefinedDep> = defineInjectable({
+    factory: () => new HasDefinedDep(inject(Bar)),
+    providedIn: MyModule,
+  });
+}
+
+class HasOptionalDep {
+  constructor(public baz: Baz|null) {}
+
+  static ngInjectableDef: InjectableDef<HasOptionalDep> = defineInjectable({
+    factory: () => new HasOptionalDep(inject(Baz, InjectFlags.Optional)),
+    providedIn: MyModule,
+  });
+}
+
+class ChildDep {
+  static ngInjectableDef: InjectableDef<ChildDep> = defineInjectable({
+    factory: () => new ChildDep(),
+    providedIn: MyChildModule,
+  });
+}
+
+class FromChildWithOptionalDep {
+  constructor(public baz: Baz|null) {}
+  static ngInjectableDef: InjectableDef<FromChildWithOptionalDep> = defineInjectable({
+    factory: () => new FromChildWithOptionalDep(inject(Baz, InjectFlags.Default)),
+    providedIn: MyChildModule,
+  });
+}
+
+class FromChildWithSkipSelfDep {
+  constructor(
+      public skipSelfChildDep: ChildDep|null, public selfChildDep: ChildDep|null,
+      public optionalSelfBar: Bar|null) {}
+  static ngInjectableDef: InjectableDef<FromChildWithSkipSelfDep> = defineInjectable({
+    factory: () => new FromChildWithSkipSelfDep(
+                 inject(ChildDep, InjectFlags.SkipSelf|InjectFlags.Optional),
+                 inject(ChildDep, InjectFlags.Self),
+                 inject(Bar, InjectFlags.Self|InjectFlags.Optional), ),
+    providedIn: MyChildModule,
+  });
+}
+
+class UsesInject {
+  constructor() { inject(INJECTOR); }
+}
+
+function makeProviders(classes: any[], modules: any[]): NgModuleDefinition {
+  const providers =
+      classes.map((token, index) => ({
+                    index,
+                    deps: [],
+                    flags: NodeFlags.TypeClassProvider | NodeFlags.LazyProvider, token,
+                    value: token,
+                  }));
+  return makeModule(modules, providers);
+}
+
+function makeFactoryProviders(
+    factories: {token: any, factory: Function}[], modules: any[]): NgModuleDefinition {
+  const providers = factories.map((factory, index) => ({
+                                    index,
+                                    deps: [],
+                                    flags: NodeFlags.TypeFactoryProvider | NodeFlags.LazyProvider,
+                                    token: factory.token,
+                                    value: factory.factory,
+                                  }));
+  return makeModule(modules, providers);
+}
+
+function makeModule(modules: any[], providers: NgModuleProviderDef[]): NgModuleDefinition {
+  const providersByKey: {[key: string]: NgModuleProviderDef} = {};
+  providers.forEach(provider => providersByKey[tokenKey(provider.token)] = provider);
+  return {factory: null, providers, providersByKey, modules, isRoot: true};
+}
+
+describe('NgModuleRef_ injector', () => {
+  let ref: NgModuleRef<any>;
+  let childRef: NgModuleRef<any>;
+  beforeEach(() => {
+    ref = createNgModuleRef(
+        MyModule, Injector.NULL, [], makeProviders([MyModule, Foo, UsesInject], [MyModule]));
+    childRef = createNgModuleRef(
+        MyChildModule, ref.injector, [], makeProviders([MyChildModule], [MyChildModule]));
+  });
+
+  it('injects a provided value',
+     () => { expect(ref.injector.get(Foo) instanceof Foo).toBeTruthy(); });
+
+  it('injects an InjectableDef value',
+     () => { expect(ref.injector.get(Bar) instanceof Bar).toBeTruthy(); });
+
+  it('caches InjectableDef values',
+     () => { expect(ref.injector.get(Bar)).toBe(ref.injector.get(Bar)); });
+
+  it('injects provided deps properly', () => {
+    const instance = ref.injector.get(HasNormalDep);
+    expect(instance instanceof HasNormalDep).toBeTruthy();
+    expect(instance.foo).toBe(ref.injector.get(Foo));
+  });
+
+  it('injects defined deps properly', () => {
+    const instance = ref.injector.get(HasDefinedDep);
+    expect(instance instanceof HasDefinedDep).toBeTruthy();
+    expect(instance.bar).toBe(ref.injector.get(Bar));
+  });
+
+  it('injects optional deps properly', () => {
+    const instance = ref.injector.get(HasOptionalDep);
+    expect(instance instanceof HasOptionalDep).toBeTruthy();
+    expect(instance.baz).toBeNull();
+  });
+
+  it('injects skip-self and self deps across injectors properly', () => {
+    const instance = childRef.injector.get(FromChildWithSkipSelfDep);
+    expect(instance instanceof FromChildWithSkipSelfDep).toBeTruthy();
+    expect(instance.skipSelfChildDep).toBeNull();
+    expect(instance.selfChildDep instanceof ChildDep).toBeTruthy();
+    expect(instance.optionalSelfBar).toBeNull();
+  });
+
+  it('does not inject something not scoped to the module',
+     () => { expect(ref.injector.get(Baz, null)).toBeNull(); });
+
+  it('injects with the current injector always set',
+     () => { expect(() => ref.injector.get(UsesInject)).not.toThrow(); });
+
+  it('calls ngOnDestroy on services created via factory', () => {
+    class Module {}
+
+    class Service {
+      static destroyed = 0;
+      ngOnDestroy(): void { Service.destroyed++; }
+    }
+
+    const ref = createNgModuleRef(
+        Module, Injector.NULL, [], makeFactoryProviders(
+                                       [{
+                                         token: Service,
+                                         factory: () => new Service(),
+                                       }],
+                                       [Module]));
+
+    expect(ref.injector.get(Service)).toBeDefined();
+    expect(Service.destroyed).toBe(0);
+    ref.destroy();
+    expect(Service.destroyed).toBe(1);
+  });
+
+  it('only calls ngOnDestroy once per instance', () => {
+    class Module {}
+
+    class Service {
+      static destroyed = 0;
+      ngOnDestroy(): void { Service.destroyed++; }
+    }
+
+    class OtherToken {}
+
+    const instance = new Service();
+    const ref = createNgModuleRef(
+        Module, Injector.NULL, [], makeFactoryProviders(
+                                       [
+                                         {
+                                           token: Service,
+                                           factory: () => instance,
+                                         },
+                                         {
+                                           token: OtherToken,
+                                           factory: () => instance,
+                                         }
+                                       ],
+                                       [Module]));
+
+    expect(ref.injector.get(Service)).toBe(instance);
+    expect(ref.injector.get(OtherToken)).toBe(instance);
+    expect(Service.destroyed).toBe(0);
+    ref.destroy();
+    expect(Service.destroyed).toBe(1);
+  });
+
+  describe('moduleDef', () => {
+    function createProvider(token: any, value: any) {
+      return {
+        index: 0,
+        flags: NodeFlags.TypeValueProvider | NodeFlags.LazyProvider,
+        deps: [], token, value
+      };
+    }
+
+    it('sets isRoot to `true` when APP_ROOT is `true`', () => {
+      const def = moduleDef([createProvider(APP_ROOT, true)]);
+      expect(def.isRoot).toBe(true);
+    });
+
+    it('sets isRoot to `false` when APP_ROOT is absent', () => {
+      const def = moduleDef([]);
+      expect(def.isRoot).toBe(false);
+    });
+
+    it('sets isRoot to `false` when APP_ROOT is `false`', () => {
+      const def = moduleDef([createProvider(APP_ROOT, false)]);
+      expect(def.isRoot).toBe(false);
+    });
+  });
+});
diff --git a/packages/core/test/view/provider_spec.ts b/packages/core/test/view/provider_spec.ts
new file mode 100644
index 000000000000..3d3bcd88c794
--- /dev/null
+++ b/packages/core/test/view/provider_spec.ts
@@ -0,0 +1,550 @@
+/**
+ * @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 {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, ErrorHandler, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, Renderer, Renderer2, SimpleChange, TemplateRef, ViewContainerRef,} from '@angular/core';
+import {getDebugContext} from '@angular/core/src/errors';
+import {ArgumentType, DepFlags, NodeFlags, Services, anchorDef, asElementData, directiveDef, elementDef, providerDef, textDef} from '@angular/core/src/view/index';
+import {TestBed, withModule} from '@angular/core/testing';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
+import {ARG_TYPE_VALUES, checkNodeInlineOrDynamic, createRootView, createAndGetRootNodes, compViewDef, compViewDefFactory} from './helper';
+
+{
+  describe(`View Providers`, () => {
+
+    describe('create', () => {
+      let instance: SomeService;
+
+      class SomeService {
+        constructor(public dep: any) { instance = this; }
+      }
+
+      beforeEach(() => { instance = null !; });
+
+      it('should create providers eagerly', () => {
+        createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(1, NodeFlags.None, null, 0, SomeService, [])
+        ]));
+
+        expect(instance instanceof SomeService).toBe(true);
+      });
+
+      it('should create providers lazily', () => {
+        let lazy: LazyService = undefined !;
+        class LazyService {
+          constructor() { lazy = this; }
+        }
+
+        createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+          providerDef(
+              NodeFlags.TypeClassProvider | NodeFlags.LazyProvider, null, LazyService, LazyService,
+              []),
+          directiveDef(2, NodeFlags.None, null, 0, SomeService, [Injector])
+        ]));
+
+        expect(lazy).toBeUndefined();
+        instance.dep.get(LazyService);
+        expect(lazy instanceof LazyService).toBe(true);
+      });
+
+      it('should create value providers', () => {
+        createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+          providerDef(NodeFlags.TypeValueProvider, null, 'someToken', 'someValue', []),
+          directiveDef(2, NodeFlags.None, null, 0, SomeService, ['someToken']),
+        ]));
+
+        expect(instance.dep).toBe('someValue');
+      });
+
+      it('should create factory providers', () => {
+        function someFactory() { return 'someValue'; }
+
+        createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+          providerDef(NodeFlags.TypeFactoryProvider, null, 'someToken', someFactory, []),
+          directiveDef(2, NodeFlags.None, null, 0, SomeService, ['someToken']),
+        ]));
+
+        expect(instance.dep).toBe('someValue');
+      });
+
+      it('should create useExisting providers', () => {
+        createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 3, 'span'),
+          providerDef(NodeFlags.TypeValueProvider, null, 'someExistingToken', 'someValue', []),
+          providerDef(
+              NodeFlags.TypeUseExistingProvider, null, 'someToken', null, ['someExistingToken']),
+          directiveDef(3, NodeFlags.None, null, 0, SomeService, ['someToken']),
+        ]));
+
+        expect(instance.dep).toBe('someValue');
+      });
+
+      it('should add a DebugContext to errors in provider factories', () => {
+        class SomeService {
+          constructor() { throw new Error('Test'); }
+        }
+
+        let err: any;
+        try {
+          createRootView(
+              compViewDef([
+                elementDef(
+                    0, NodeFlags.None, null, null, 1, 'div', null, null, null, null,
+                    () => compViewDef([textDef(0, null, ['a'])])),
+                directiveDef(1, NodeFlags.Component, null, 0, SomeService, [])
+              ]),
+              TestBed.get(Injector), [], getDOM().createElement('div'));
+        } catch (e) {
+          err = e;
+        }
+        expect(err).toBeTruthy();
+        expect(err.message).toBe('Test');
+        const debugCtx = getDebugContext(err);
+        expect(debugCtx.view).toBeTruthy();
+        expect(debugCtx.nodeIndex).toBe(1);
+      });
+
+      describe('deps', () => {
+        class Dep {}
+
+        it('should inject deps from the same element', () => {
+          createAndGetRootNodes(compViewDef([
+            elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+            directiveDef(1, NodeFlags.None, null, 0, Dep, []),
+            directiveDef(2, NodeFlags.None, null, 0, SomeService, [Dep])
+          ]));
+
+          expect(instance.dep instanceof Dep).toBeTruthy();
+        });
+
+        it('should inject deps from a parent element', () => {
+          createAndGetRootNodes(compViewDef([
+            elementDef(0, NodeFlags.None, null, null, 3, 'span'),
+            directiveDef(1, NodeFlags.None, null, 0, Dep, []),
+            elementDef(2, NodeFlags.None, null, null, 1, 'span'),
+            directiveDef(3, NodeFlags.None, null, 0, SomeService, [Dep])
+          ]));
+
+          expect(instance.dep instanceof Dep).toBeTruthy();
+        });
+
+        it('should not inject deps from sibling root elements', () => {
+          const rootElNodes = [
+            elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+            directiveDef(1, NodeFlags.None, null, 0, Dep, []),
+            elementDef(2, NodeFlags.None, null, null, 1, 'span'),
+            directiveDef(3, NodeFlags.None, null, 0, SomeService, [Dep]),
+          ];
+
+          expect(() => createAndGetRootNodes(compViewDef(rootElNodes)))
+              .toThrowError(
+                  'StaticInjectorError(DynamicTestModule)[SomeService -> Dep]: \n' +
+                  '  StaticInjectorError(Platform: core)[SomeService -> Dep]: \n' +
+                  '    NullInjectorError: No provider for Dep!');
+
+          const nonRootElNodes = [
+            elementDef(0, NodeFlags.None, null, null, 4, 'span'),
+            elementDef(1, NodeFlags.None, null, null, 1, 'span'),
+            directiveDef(2, NodeFlags.None, null, 0, Dep, []),
+            elementDef(3, NodeFlags.None, null, null, 1, 'span'),
+            directiveDef(4, NodeFlags.None, null, 0, SomeService, [Dep]),
+          ];
+
+          expect(() => createAndGetRootNodes(compViewDef(nonRootElNodes)))
+              .toThrowError(
+                  'StaticInjectorError(DynamicTestModule)[SomeService -> Dep]: \n' +
+                  '  StaticInjectorError(Platform: core)[SomeService -> Dep]: \n' +
+                  '    NullInjectorError: No provider for Dep!');
+        });
+
+        it('should inject from a parent element in a parent view', () => {
+          createAndGetRootNodes(compViewDef([
+            elementDef(
+                0, NodeFlags.None, null, null, 1, 'div', null, null, null, null,
+                () => compViewDef([
+                  elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+                  directiveDef(1, NodeFlags.None, null, 0, SomeService, [Dep])
+                ])),
+            directiveDef(1, NodeFlags.Component, null, 0, Dep, []),
+          ]));
+
+          expect(instance.dep instanceof Dep).toBeTruthy();
+        });
+
+        it('should throw for missing dependencies', () => {
+          expect(() => createAndGetRootNodes(compViewDef([
+                   elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+                   directiveDef(1, NodeFlags.None, null, 0, SomeService, ['nonExistingDep'])
+                 ])))
+              .toThrowError(
+                  'StaticInjectorError(DynamicTestModule)[nonExistingDep]: \n' +
+                  '  StaticInjectorError(Platform: core)[nonExistingDep]: \n' +
+                  '    NullInjectorError: No provider for nonExistingDep!');
+        });
+
+        it('should use null for optional missing dependencies', () => {
+          createAndGetRootNodes(compViewDef([
+            elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+            directiveDef(
+                1, NodeFlags.None, null, 0, SomeService,
+                [[DepFlags.Optional, 'nonExistingDep']])
+          ]));
+          expect(instance.dep).toBe(null);
+        });
+
+        it('should skip the current element when using SkipSelf', () => {
+          createAndGetRootNodes(compViewDef([
+            elementDef(0, NodeFlags.None, null, null, 4, 'span'),
+            providerDef(NodeFlags.TypeValueProvider, null, 'someToken', 'someParentValue', []),
+            elementDef(2, NodeFlags.None, null, null, 2, 'span'),
+            providerDef(NodeFlags.TypeValueProvider, null, 'someToken', 'someValue', []),
+            directiveDef(
+                4, NodeFlags.None, null, 0, SomeService, [[DepFlags.SkipSelf, 'someToken']])
+          ]));
+          expect(instance.dep).toBe('someParentValue');
+        });
+
+        it('should ask the root injector',
+           withModule({providers: [{provide: 'rootDep', useValue: 'rootValue'}]}, () => {
+             createAndGetRootNodes(compViewDef([
+               elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+               directiveDef(1, NodeFlags.None, null, 0, SomeService, ['rootDep'])
+             ]));
+
+             expect(instance.dep).toBe('rootValue');
+           }));
+
+        describe('builtin tokens', () => {
+          it('should inject ViewContainerRef', () => {
+            createAndGetRootNodes(compViewDef([
+              anchorDef(NodeFlags.EmbeddedViews, null, null, 1),
+              directiveDef(1, NodeFlags.None, null, 0, SomeService, [ViewContainerRef]),
+            ]));
+
+            expect(instance.dep.createEmbeddedView).toBeTruthy();
+          });
+
+          it('should inject TemplateRef', () => {
+            createAndGetRootNodes(compViewDef([
+              anchorDef(NodeFlags.None, null, null, 1, null, compViewDefFactory([anchorDef(
+                                                                 NodeFlags.None, null, null, 0)])),
+              directiveDef(1, NodeFlags.None, null, 0, SomeService, [TemplateRef]),
+            ]));
+
+            expect(instance.dep.createEmbeddedView).toBeTruthy();
+          });
+
+          it('should inject ElementRef', () => {
+            const {view} = createAndGetRootNodes(compViewDef([
+              elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+              directiveDef(1, NodeFlags.None, null, 0, SomeService, [ElementRef]),
+            ]));
+
+            expect(instance.dep.nativeElement).toBe(asElementData(view, 0).renderElement);
+          });
+
+          it('should inject Injector', () => {
+            const {view} = createAndGetRootNodes(compViewDef([
+              elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+              directiveDef(1, NodeFlags.None, null, 0, SomeService, [Injector]),
+            ]));
+
+            expect(instance.dep.get(SomeService)).toBe(instance);
+          });
+
+          it('should inject ChangeDetectorRef for non component providers', () => {
+            const {view} = createAndGetRootNodes(compViewDef([
+              elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+              directiveDef(1, NodeFlags.None, null, 0, SomeService, [ChangeDetectorRef])
+            ]));
+
+            expect(instance.dep._view).toBe(view);
+          });
+
+          it('should inject ChangeDetectorRef for component providers', () => {
+            const {view, rootNodes} = createAndGetRootNodes(compViewDef([
+              elementDef(
+                  0, NodeFlags.None, null, null, 1, 'div', null, null, null, null,
+                  () => compViewDef([
+                    elementDef(0, NodeFlags.None, null, null, 0, 'span'),
+                  ])),
+              directiveDef(1, NodeFlags.Component, null, 0, SomeService, [ChangeDetectorRef]),
+            ]));
+
+            const compView = asElementData(view, 0).componentView;
+            expect(instance.dep._view).toBe(compView);
+          });
+
+          it('should inject RendererV1', () => {
+            createAndGetRootNodes(compViewDef([
+              elementDef(
+                  0, NodeFlags.None, null, null, 1, 'span', null, null, null, null,
+                  () => compViewDef([anchorDef(NodeFlags.None, null, null, 0)])),
+              directiveDef(1, NodeFlags.Component, null, 0, SomeService, [Renderer])
+            ]));
+
+            expect(instance.dep.createElement).toBeTruthy();
+          });
+
+          it('should inject Renderer2', () => {
+            createAndGetRootNodes(compViewDef([
+              elementDef(
+                  0, NodeFlags.None, null, null, 1, 'span', null, null, null, null,
+                  () => compViewDef([anchorDef(NodeFlags.None, null, null, 0)])),
+              directiveDef(1, NodeFlags.Component, null, 0, SomeService, [Renderer2])
+            ]));
+
+            expect(instance.dep.createElement).toBeTruthy();
+          });
+
+        });
+
+      });
+    });
+
+    describe('data binding', () => {
+
+      ARG_TYPE_VALUES.forEach((inlineDynamic) => {
+        it(`should update via strategy ${inlineDynamic}`, () => {
+          let instance: SomeService = undefined !;
+
+          class SomeService {
+            a: any;
+            b: any;
+            constructor() { instance = this; }
+          }
+
+          const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+              [
+                elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+                directiveDef(
+                    1, NodeFlags.None, null, 0, SomeService, [], {a: [0, 'a'], b: [1, 'b']})
+              ],
+              (check, view) => {
+                checkNodeInlineOrDynamic(check, view, 1, inlineDynamic, ['v1', 'v2']);
+              }));
+
+          Services.checkAndUpdateView(view);
+
+          expect(instance.a).toBe('v1');
+          expect(instance.b).toBe('v2');
+
+          const el = rootNodes[0];
+          expect(getDOM().getAttribute(el, 'ng-reflect-a')).toBe('v1');
+        });
+
+      });
+    });
+
+    describe('outputs', () => {
+      it('should listen to provider events', () => {
+        let emitter = new EventEmitter<any>();
+        let unsubscribeSpy: any;
+
+        class SomeService {
+          emitter = {
+            subscribe: (callback: any) => {
+              const subscription = emitter.subscribe(callback);
+              unsubscribeSpy = spyOn(subscription, 'unsubscribe').and.callThrough();
+              return subscription;
+            }
+          };
+        }
+
+        const handleEvent = jasmine.createSpy('handleEvent');
+
+        const {view, rootNodes} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 1, 'span', null, null, null, handleEvent),
+          directiveDef(
+              1, NodeFlags.None, null, 0, SomeService, [], null, {emitter: 'someEventName'})
+        ]));
+
+        emitter.emit('someEventInstance');
+        expect(handleEvent).toHaveBeenCalledWith(view, 'someEventName', 'someEventInstance');
+
+        Services.destroyView(view);
+        expect(unsubscribeSpy).toHaveBeenCalled();
+      });
+
+      it('should report debug info on event errors', () => {
+        const handleErrorSpy = spyOn(TestBed.get(ErrorHandler), 'handleError');
+        let emitter = new EventEmitter<any>();
+
+        class SomeService {
+          emitter = emitter;
+        }
+
+        const {view, rootNodes} = createAndGetRootNodes(compViewDef([
+          elementDef(
+              0, NodeFlags.None, null, null, 1, 'span', null, null, null,
+              () => { throw new Error('Test'); }),
+          directiveDef(
+              1, NodeFlags.None, null, 0, SomeService, [], null, {emitter: 'someEventName'})
+        ]));
+
+        emitter.emit('someEventInstance');
+        const err = handleErrorSpy.calls.mostRecent().args[0];
+        expect(err).toBeTruthy();
+        const debugCtx = getDebugContext(err);
+        expect(debugCtx.view).toBe(view);
+        // events are emitted with the index of the element, not the index of the provider.
+        expect(debugCtx.nodeIndex).toBe(0);
+      });
+    });
+
+    describe('lifecycle hooks', () => {
+      it('should call the lifecycle hooks in the right order', () => {
+        let instanceCount = 0;
+        let log: string[] = [];
+
+        class SomeService implements OnInit, DoCheck, OnChanges, AfterContentInit,
+            AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
+          id: number;
+          a: any;
+          ngOnInit() { log.push(`${this.id}_ngOnInit`); }
+          ngDoCheck() { log.push(`${this.id}_ngDoCheck`); }
+          ngOnChanges() { log.push(`${this.id}_ngOnChanges`); }
+          ngAfterContentInit() { log.push(`${this.id}_ngAfterContentInit`); }
+          ngAfterContentChecked() { log.push(`${this.id}_ngAfterContentChecked`); }
+          ngAfterViewInit() { log.push(`${this.id}_ngAfterViewInit`); }
+          ngAfterViewChecked() { log.push(`${this.id}_ngAfterViewChecked`); }
+          ngOnDestroy() { log.push(`${this.id}_ngOnDestroy`); }
+          constructor() { this.id = instanceCount++; }
+        }
+
+        const allFlags = NodeFlags.OnInit | NodeFlags.DoCheck | NodeFlags.OnChanges |
+            NodeFlags.AfterContentInit | NodeFlags.AfterContentChecked | NodeFlags.AfterViewInit |
+            NodeFlags.AfterViewChecked | NodeFlags.OnDestroy;
+        const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+            [
+              elementDef(0, NodeFlags.None, null, null, 3, 'span'),
+              directiveDef(1, allFlags, null, 0, SomeService, [], {a: [0, 'a']}),
+              elementDef(2, NodeFlags.None, null, null, 1, 'span'),
+              directiveDef(3, allFlags, null, 0, SomeService, [], {a: [0, 'a']})
+            ],
+            (check, view) => {
+              check(view, 1, ArgumentType.Inline, 'someValue');
+              check(view, 3, ArgumentType.Inline, 'someValue');
+            }));
+
+        Services.checkAndUpdateView(view);
+
+        // Note: After... hooks are called bottom up.
+        expect(log).toEqual([
+          '0_ngOnChanges',
+          '0_ngOnInit',
+          '0_ngDoCheck',
+          '1_ngOnChanges',
+          '1_ngOnInit',
+          '1_ngDoCheck',
+          '1_ngAfterContentInit',
+          '1_ngAfterContentChecked',
+          '0_ngAfterContentInit',
+          '0_ngAfterContentChecked',
+          '1_ngAfterViewInit',
+          '1_ngAfterViewChecked',
+          '0_ngAfterViewInit',
+          '0_ngAfterViewChecked',
+        ]);
+
+        log = [];
+        Services.checkAndUpdateView(view);
+
+        // Note: After... hooks are called bottom up.
+        expect(log).toEqual([
+          '0_ngDoCheck', '1_ngDoCheck', '1_ngAfterContentChecked', '0_ngAfterContentChecked',
+          '1_ngAfterViewChecked', '0_ngAfterViewChecked'
+        ]);
+
+        log = [];
+        Services.destroyView(view);
+
+        // Note: ngOnDestroy ist called bottom up.
+        expect(log).toEqual(['1_ngOnDestroy', '0_ngOnDestroy']);
+      });
+
+      it('should call ngOnChanges with the changed values and the non minified names', () => {
+        let changesLog: SimpleChange[] = [];
+        let currValue = 'v1';
+
+        class SomeService implements OnChanges {
+          a: any;
+          ngOnChanges(changes: {[name: string]: SimpleChange}) {
+            changesLog.push(changes['nonMinifiedA']);
+          }
+        }
+
+        const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+            [
+              elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+              directiveDef(
+                  1, NodeFlags.OnChanges, null, 0, SomeService, [], {a: [0, 'nonMinifiedA']})
+            ],
+            (check, view) => { check(view, 1, ArgumentType.Inline, currValue); }));
+
+        Services.checkAndUpdateView(view);
+        expect(changesLog).toEqual([new SimpleChange(undefined, 'v1', true)]);
+
+        currValue = 'v2';
+        changesLog = [];
+        Services.checkAndUpdateView(view);
+        expect(changesLog).toEqual([new SimpleChange('v1', 'v2', false)]);
+      });
+
+      it('should add a DebugContext to errors in provider afterXXX lifecycles', () => {
+        class SomeService implements AfterContentChecked {
+          ngAfterContentChecked() { throw new Error('Test'); }
+        }
+
+        const {view, rootNodes} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(1, NodeFlags.AfterContentChecked, null, 0, SomeService, [], {a: [0, 'a']}),
+        ]));
+
+        let err: any;
+        try {
+          Services.checkAndUpdateView(view);
+        } catch (e) {
+          err = e;
+        }
+        expect(err).toBeTruthy();
+        expect(err.message).toBe('Test');
+        const debugCtx = getDebugContext(err);
+        expect(debugCtx.view).toBe(view);
+        expect(debugCtx.nodeIndex).toBe(1);
+      });
+
+      it('should add a DebugContext to errors inServices.destroyView', () => {
+        class SomeService implements OnDestroy {
+          ngOnDestroy() { throw new Error('Test'); }
+        }
+
+        const {view, rootNodes} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(1, NodeFlags.OnDestroy, null, 0, SomeService, [], {a: [0, 'a']}),
+        ]));
+
+        let err: any;
+        try {
+          Services.destroyView(view);
+        } catch (e) {
+          err = e;
+        }
+        expect(err).toBeTruthy();
+        expect(err.message).toBe('Test');
+        const debugCtx = getDebugContext(err);
+        expect(debugCtx.view).toBe(view);
+        expect(debugCtx.nodeIndex).toBe(1);
+      });
+    });
+  });
+}
diff --git a/packages/core/test/view/pure_expression_spec.ts b/packages/core/test/view/pure_expression_spec.ts
new file mode 100644
index 000000000000..03e42cd2ceba
--- /dev/null
+++ b/packages/core/test/view/pure_expression_spec.ts
@@ -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
+ */
+
+import {PipeTransform} from '@angular/core';
+import {NodeFlags, Services, asProviderData, directiveDef, elementDef, nodeValue, pipeDef, pureArrayDef, pureObjectDef, purePipeDef} from '@angular/core/src/view/index';
+
+import {ARG_TYPE_VALUES, checkNodeInlineOrDynamic, compViewDef, createAndGetRootNodes} from './helper';
+
+{
+  describe(`View Pure Expressions`, () => {
+
+    class Service {
+      data: any;
+    }
+
+    describe('pure arrays', () => {
+
+      ARG_TYPE_VALUES.forEach((inlineDynamic) => {
+        it(`should update via strategy ${inlineDynamic}`, () => {
+          let values: any[];
+
+          const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+              [
+                elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+                pureArrayDef(1, 2),
+                directiveDef(2, NodeFlags.None, null, 0, Service, [], {data: [0, 'data']}),
+              ],
+              (check, view) => {
+                const pureValue = checkNodeInlineOrDynamic(check, view, 1, inlineDynamic, values);
+                checkNodeInlineOrDynamic(check, view, 2, inlineDynamic, [pureValue]);
+              }));
+          const service = asProviderData(view, 2).instance;
+
+          values = [1, 2];
+          Services.checkAndUpdateView(view);
+          const arr0 = service.data;
+          expect(arr0).toEqual([1, 2]);
+
+          // instance should not change
+          // if the values don't change
+          Services.checkAndUpdateView(view);
+          expect(service.data).toBe(arr0);
+
+          values = [3, 2];
+          Services.checkAndUpdateView(view);
+          const arr1 = service.data;
+          expect(arr1).not.toBe(arr0);
+          expect(arr1).toEqual([3, 2]);
+        });
+
+      });
+
+    });
+
+    describe('pure objects', () => {
+      ARG_TYPE_VALUES.forEach((inlineDynamic) => {
+        it(`should update via strategy ${inlineDynamic}`, () => {
+          let values: any[];
+
+          const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+              [
+                elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+                pureObjectDef(1, {a: 0, b: 1}),
+                directiveDef(2, NodeFlags.None, null, 0, Service, [], {data: [0, 'data']})
+              ],
+              (check, view) => {
+                const pureValue = checkNodeInlineOrDynamic(check, view, 1, inlineDynamic, values);
+                checkNodeInlineOrDynamic(check, view, 2, inlineDynamic, [pureValue]);
+              }));
+          const service = asProviderData(view, 2).instance;
+
+          values = [1, 2];
+          Services.checkAndUpdateView(view);
+          const obj0 = service.data;
+          expect(obj0).toEqual({a: 1, b: 2});
+
+          // instance should not change
+          // if the values don't change
+          Services.checkAndUpdateView(view);
+          expect(service.data).toBe(obj0);
+
+          values = [3, 2];
+          Services.checkAndUpdateView(view);
+          const obj1 = service.data;
+          expect(obj1).not.toBe(obj0);
+          expect(obj1).toEqual({a: 3, b: 2});
+        });
+
+      });
+    });
+
+    describe('pure pipes', () => {
+      ARG_TYPE_VALUES.forEach((inlineDynamic) => {
+        it(`should update via strategy ${inlineDynamic}`, () => {
+          class SomePipe implements PipeTransform {
+            transform(v1: any, v2: any) { return [v1 + 10, v2 + 20]; }
+          }
+
+          let values: any[];
+
+          const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+              [
+                elementDef(0, NodeFlags.None, null !, null !, 3, 'span'),
+                pipeDef(NodeFlags.None, SomePipe, []),
+                purePipeDef(2, 2),
+                directiveDef(3, NodeFlags.None, null, 0, Service, [], {data: [0, 'data']}),
+              ],
+              (check, view) => {
+                const pureValue = checkNodeInlineOrDynamic(
+                    check, view, 2, inlineDynamic, [nodeValue(view, 1)].concat(values));
+                checkNodeInlineOrDynamic(check, view, 3, inlineDynamic, [pureValue]);
+              }));
+          const service = asProviderData(view, 3).instance;
+
+          values = [1, 2];
+          Services.checkAndUpdateView(view);
+          const obj0 = service.data;
+          expect(obj0).toEqual([11, 22]);
+
+          // instance should not change
+          // if the values don't change
+          Services.checkAndUpdateView(view);
+          expect(service.data).toBe(obj0);
+
+          values = [3, 2];
+          Services.checkAndUpdateView(view);
+          const obj1 = service.data;
+          expect(obj1).not.toBe(obj0);
+          expect(obj1).toEqual([13, 22]);
+        });
+
+      });
+    });
+  });
+}
diff --git a/packages/core/test/view/query_spec.ts b/packages/core/test/view/query_spec.ts
new file mode 100644
index 000000000000..1eba518ca986
--- /dev/null
+++ b/packages/core/test/view/query_spec.ts
@@ -0,0 +1,393 @@
+/**
+ * @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, QueryList, TemplateRef, ViewContainerRef} from '@angular/core';
+import {getDebugContext} from '@angular/core/src/errors';
+import {NodeDef, NodeFlags, QueryBindingType, QueryValueType, Services, anchorDef, asElementData, asProviderData, attachEmbeddedView, detachEmbeddedView, directiveDef, elementDef, queryDef} from '@angular/core/src/view/index';
+
+import {compViewDef, compViewDefFactory, createAndGetRootNodes, createEmbeddedView} from './helper';
+
+{
+  describe(`Query Views`, () => {
+
+    const someQueryId = 1;
+
+    class AService {}
+
+    class QueryService {
+      // TODO(issue/24571): remove '!'.
+      a !: QueryList<AService>;
+    }
+
+    function contentQueryProviders(checkIndex: number) {
+      return [
+        directiveDef(checkIndex, NodeFlags.None, null, 1, QueryService, []),
+        queryDef(
+            NodeFlags.TypeContentQuery | NodeFlags.DynamicQuery, someQueryId,
+            {'a': QueryBindingType.All})
+      ];
+    }
+
+    const cQPLength = contentQueryProviders(0).length;
+
+    // nodes first checkIndex should be 1 (to account for the `queryDef`
+    function compViewQueryProviders(checkIndex: number, extraChildCount: number, nodes: NodeDef[]) {
+      return [
+        elementDef(
+            checkIndex, NodeFlags.None, null, null, 1 + extraChildCount, 'div', null, null, null,
+            null, () => compViewDef([
+                    queryDef(
+                        NodeFlags.TypeViewQuery | NodeFlags.DynamicQuery, someQueryId,
+                        {'a': QueryBindingType.All}),
+                    ...nodes
+                  ])),
+        directiveDef(
+            checkIndex + 1, NodeFlags.Component, null !, 0, QueryService, [], null !, null !, ),
+      ];
+    }
+
+    const cVQLength = compViewQueryProviders(0, 0, []).length;
+
+
+    function aServiceProvider(checkIndex: number) {
+      return directiveDef(
+          checkIndex, NodeFlags.None, [[someQueryId, QueryValueType.Provider]], 0, AService, []);
+    }
+
+    describe('content queries', () => {
+
+      it('should query providers on the same element and child elements', () => {
+        const {view} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 5, 'div'),
+          ...contentQueryProviders(1),
+          aServiceProvider(1 + cQPLength),
+          elementDef(2 + cQPLength, NodeFlags.None, null, null, 1, 'div'),
+          aServiceProvider(3 + cQPLength),
+        ]));
+
+        const qs: QueryService = asProviderData(view, 1).instance;
+        expect(qs.a).toBeUndefined();
+
+        Services.checkAndUpdateView(view);
+
+        const as = qs.a.toArray();
+        expect(as.length).toBe(2);
+        expect(as[0]).toBe(asProviderData(view, 3).instance);
+        expect(as[1]).toBe(asProviderData(view, 5).instance);
+      });
+
+      it('should not query providers on sibling or parent elements', () => {
+
+        const {view} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 6, 'div'),
+          aServiceProvider(1),
+          elementDef(2, NodeFlags.None, null, null, 2, 'div'),
+          ...contentQueryProviders(3),
+          elementDef(3 + cQPLength, NodeFlags.None, null, null, 1, 'div'),
+          aServiceProvider(4 + cQPLength),
+        ]));
+
+        Services.checkAndUpdateView(view);
+
+        const qs: QueryService = asProviderData(view, 3).instance;
+        expect(qs.a.length).toBe(0);
+      });
+    });
+
+    describe('view queries', () => {
+      it('should query providers in the view', () => {
+        const {view} = createAndGetRootNodes(compViewDef([
+          ...compViewQueryProviders(
+              0, 0,
+              [
+                elementDef(1, NodeFlags.None, null, null, 1, 'span'),
+                aServiceProvider(2),
+              ]),
+        ]));
+
+        Services.checkAndUpdateView(view);
+
+        const comp: QueryService = asProviderData(view, 1).instance;
+        const compView = asElementData(view, 0).componentView;
+        expect(comp.a.length).toBe(1);
+        expect(comp.a.first).toBe(asProviderData(compView, 2).instance);
+      });
+
+      it('should not query providers on the host element', () => {
+        const {view} = createAndGetRootNodes(compViewDef([
+          ...compViewQueryProviders(0, 1, [elementDef(1, NodeFlags.None, null, null, 0, 'span')]),
+          aServiceProvider(cVQLength),
+        ]));
+
+        Services.checkAndUpdateView(view);
+        const comp: QueryService = asProviderData(view, 1).instance;
+        expect(comp.a.length).toBe(0);
+      });
+    });
+
+    describe('embedded views', () => {
+      it('should query providers in embedded views', () => {
+        const {view} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 5, 'div'),
+          ...contentQueryProviders(1),
+          anchorDef(NodeFlags.EmbeddedViews, null, null, 2, null, compViewDefFactory([
+                      elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+                      aServiceProvider(1),
+                    ])),
+          ...contentQueryProviders(2 + cQPLength),
+        ]));
+
+        const childView = createEmbeddedView(view, view.def.nodes[3]);
+        attachEmbeddedView(view, asElementData(view, 3), 0, childView);
+        Services.checkAndUpdateView(view);
+
+        // queries on parent elements of anchors
+        const qs1: QueryService = asProviderData(view, 1).instance;
+        expect(qs1.a.length).toBe(1);
+        expect(qs1.a.first instanceof AService).toBe(true);
+
+        // queries on the anchor
+        const qs2: QueryService = asProviderData(view, 4).instance;
+        expect(qs2.a.length).toBe(1);
+        expect(qs2.a.first instanceof AService).toBe(true);
+      });
+
+      it('should query providers in embedded views only at the template declaration', () => {
+        const {view} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 3, 'div'),
+          ...contentQueryProviders(1),
+          anchorDef(NodeFlags.EmbeddedViews, null, null, 0, null, compViewDefFactory([
+                      elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+                      aServiceProvider(1),
+                    ])),
+          elementDef(2 + cQPLength, NodeFlags.None, null, null, 3, 'div'),
+          ...contentQueryProviders(3 + cQPLength),
+          anchorDef(NodeFlags.EmbeddedViews, null, null, 0),
+        ]));
+
+        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);
+
+        Services.checkAndUpdateView(view);
+
+        // query on the declaration place
+        const qs1: QueryService = asProviderData(view, 1).instance;
+        expect(qs1.a.length).toBe(1);
+        expect(qs1.a.first instanceof AService).toBe(true);
+
+        // query on the attach place
+        const qs2: QueryService = asProviderData(view, 5).instance;
+        expect(qs2.a.length).toBe(0);
+      });
+
+      it('should update content queries if embedded views are added or removed', () => {
+        const {view} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 3, 'div'),
+          ...contentQueryProviders(1),
+          anchorDef(NodeFlags.EmbeddedViews, null, null, 0, null, compViewDefFactory([
+                      elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+                      aServiceProvider(1),
+                    ])),
+        ]));
+
+        Services.checkAndUpdateView(view);
+
+        const qs: QueryService = asProviderData(view, 1).instance;
+        expect(qs.a.length).toBe(0);
+
+        const childView = createEmbeddedView(view, view.def.nodes[3]);
+        attachEmbeddedView(view, asElementData(view, 3), 0, childView);
+        Services.checkAndUpdateView(view);
+
+        expect(qs.a.length).toBe(1);
+
+        detachEmbeddedView(asElementData(view, 3), 0);
+
+        Services.checkAndUpdateView(view);
+
+        expect(qs.a.length).toBe(0);
+      });
+
+      it('should update view queries if embedded views are added or removed', () => {
+        const {view} = createAndGetRootNodes(compViewDef([
+          ...compViewQueryProviders(
+              0, 0,
+              [
+                anchorDef(NodeFlags.EmbeddedViews, null, null, 0, null, compViewDefFactory([
+                            elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+                            aServiceProvider(1),
+                          ])),
+              ]),
+        ]));
+
+        Services.checkAndUpdateView(view);
+
+        const comp: QueryService = asProviderData(view, 1).instance;
+        expect(comp.a.length).toBe(0);
+
+        const compView = asElementData(view, 0).componentView;
+        const childView = createEmbeddedView(compView, compView.def.nodes[1]);
+        attachEmbeddedView(view, asElementData(compView, 1), 0, childView);
+        Services.checkAndUpdateView(view);
+
+        expect(comp.a.length).toBe(1);
+
+        detachEmbeddedView(asElementData(compView, 1), 0);
+        Services.checkAndUpdateView(view);
+
+        expect(comp.a.length).toBe(0);
+      });
+    });
+
+    describe('QueryBindingType', () => {
+      it('should query all matches', () => {
+        class QueryService {
+          // TODO(issue/24571): remove '!'.
+          a !: QueryList<AService>;
+        }
+
+        const {view} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 4, 'div'),
+          directiveDef(1, NodeFlags.None, null, 1, QueryService, []),
+          queryDef(
+              NodeFlags.TypeContentQuery | NodeFlags.DynamicQuery, someQueryId,
+              {'a': QueryBindingType.All}),
+          aServiceProvider(3),
+          aServiceProvider(4),
+        ]));
+
+        Services.checkAndUpdateView(view);
+
+        const qs: QueryService = asProviderData(view, 1).instance;
+        expect(qs.a instanceof QueryList).toBeTruthy();
+        expect(qs.a.toArray()).toEqual([
+          asProviderData(view, 3).instance,
+          asProviderData(view, 4).instance,
+        ]);
+      });
+
+      it('should query the first match', () => {
+        class QueryService {
+          // TODO(issue/24571): remove '!'.
+          a !: AService;
+        }
+
+        const {view} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 4, 'div'),
+          directiveDef(1, NodeFlags.None, null, 1, QueryService, []),
+          queryDef(
+              NodeFlags.TypeContentQuery | NodeFlags.DynamicQuery, someQueryId,
+              {'a': QueryBindingType.First}),
+          aServiceProvider(3),
+          aServiceProvider(4),
+        ]));
+
+        Services.checkAndUpdateView(view);
+
+        const qs: QueryService = asProviderData(view, 1).instance;
+        expect(qs.a).toBe(asProviderData(view, 3).instance);
+      });
+    });
+
+    describe('query builtins', () => {
+      it('should query ElementRef', () => {
+        class QueryService {
+          // TODO(issue/24571): remove '!'.
+          a !: ElementRef;
+        }
+
+        const {view} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, [[someQueryId, QueryValueType.ElementRef]], null, 2, 'div'),
+          directiveDef(1, NodeFlags.None, null, 1, QueryService, []),
+          queryDef(
+              NodeFlags.TypeContentQuery | NodeFlags.DynamicQuery, someQueryId,
+              {'a': QueryBindingType.First}),
+        ]));
+
+        Services.checkAndUpdateView(view);
+
+        const qs: QueryService = asProviderData(view, 1).instance;
+        expect(qs.a.nativeElement).toBe(asElementData(view, 0).renderElement);
+      });
+
+      it('should query TemplateRef', () => {
+        class QueryService {
+          // TODO(issue/24571): remove '!'.
+          a !: TemplateRef<any>;
+        }
+
+        const {view} = createAndGetRootNodes(compViewDef([
+          anchorDef(
+              NodeFlags.None, [[someQueryId, QueryValueType.TemplateRef]], null, 2, null,
+              compViewDefFactory([anchorDef(NodeFlags.None, null, null, 0)])),
+          directiveDef(1, NodeFlags.None, null, 1, QueryService, []),
+          queryDef(
+              NodeFlags.TypeContentQuery | NodeFlags.DynamicQuery, someQueryId,
+              {'a': QueryBindingType.First}),
+        ]));
+
+        Services.checkAndUpdateView(view);
+
+        const qs: QueryService = asProviderData(view, 1).instance;
+        expect(qs.a.createEmbeddedView).toBeTruthy();
+      });
+
+      it('should query ViewContainerRef', () => {
+        class QueryService {
+          // TODO(issue/24571): remove '!'.
+          a !: ViewContainerRef;
+        }
+
+        const {view} = createAndGetRootNodes(compViewDef([
+          anchorDef(
+              NodeFlags.EmbeddedViews, [[someQueryId, QueryValueType.ViewContainerRef]], null, 2),
+          directiveDef(1, NodeFlags.None, null, 1, QueryService, []),
+          queryDef(
+              NodeFlags.TypeContentQuery | NodeFlags.DynamicQuery, someQueryId,
+              {'a': QueryBindingType.First}),
+        ]));
+
+        Services.checkAndUpdateView(view);
+
+        const qs: QueryService = asProviderData(view, 1).instance;
+        expect(qs.a.createEmbeddedView).toBeTruthy();
+      });
+    });
+
+    describe('general binding behavior', () => {
+      it('should report debug info on binding errors', () => {
+        class QueryService {
+          set a(value: any) { throw new Error('Test'); }
+        }
+
+        const {view} = createAndGetRootNodes(compViewDef([
+          elementDef(0, NodeFlags.None, null, null, 3, 'div'),
+          directiveDef(1, NodeFlags.None, null, 1, QueryService, []),
+          queryDef(
+              NodeFlags.TypeContentQuery | NodeFlags.DynamicQuery, someQueryId,
+              {'a': QueryBindingType.All}),
+          aServiceProvider(3),
+        ]));
+
+
+        let err: any;
+        try {
+          Services.checkAndUpdateView(view);
+        } catch (e) {
+          err = e;
+        }
+        expect(err).toBeTruthy();
+        expect(err.message).toBe('Test');
+        const debugCtx = getDebugContext(err);
+        expect(debugCtx.view).toBe(view);
+        expect(debugCtx.nodeIndex).toBe(2);
+      });
+    });
+  });
+}
diff --git a/packages/core/test/view/services_spec.ts b/packages/core/test/view/services_spec.ts
new file mode 100644
index 000000000000..c97ff6c7b5ca
--- /dev/null
+++ b/packages/core/test/view/services_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 {DebugContext, NodeFlags, QueryValueType, Services, asElementData, asTextData, directiveDef, elementDef, textDef} from '@angular/core/src/view/index';
+
+import {compViewDef, createAndGetRootNodes} from './helper';
+
+{
+  describe('View Services', () => {
+
+    describe('DebugContext', () => {
+      class AComp {}
+
+      class AService {}
+
+      function createViewWithData() {
+        const {view} = createAndGetRootNodes(compViewDef([
+          elementDef(
+              0, NodeFlags.None, null, null, 1, 'div', null, null, null, null,
+              () => compViewDef([
+                elementDef(
+                    0, NodeFlags.None, [['ref', QueryValueType.ElementRef]], null, 2, 'span'),
+                directiveDef(1, NodeFlags.None, null, 0, AService, []), textDef(2, null, ['a'])
+              ])),
+          directiveDef(1, NodeFlags.Component, null, 0, AComp, []),
+        ]));
+        return view;
+      }
+
+      it('should provide data for elements', () => {
+        const view = createViewWithData();
+        const compView = asElementData(view, 0).componentView;
+
+        const debugCtx = Services.createDebugContext(compView, 0);
+
+        expect(debugCtx.componentRenderElement).toBe(asElementData(view, 0).renderElement);
+        expect(debugCtx.renderNode).toBe(asElementData(compView, 0).renderElement);
+        expect(debugCtx.injector.get(AComp)).toBe(compView.component);
+        expect(debugCtx.component).toBe(compView.component);
+        expect(debugCtx.context).toBe(compView.context);
+        expect(debugCtx.providerTokens).toEqual([AService]);
+        expect(debugCtx.references['ref'].nativeElement)
+            .toBe(asElementData(compView, 0).renderElement);
+      });
+
+      it('should provide data for text nodes', () => {
+        const view = createViewWithData();
+        const compView = asElementData(view, 0).componentView;
+
+        const debugCtx = Services.createDebugContext(compView, 2);
+
+        expect(debugCtx.componentRenderElement).toBe(asElementData(view, 0).renderElement);
+        expect(debugCtx.renderNode).toBe(asTextData(compView, 2).renderText);
+        expect(debugCtx.injector.get(AComp)).toBe(compView.component);
+        expect(debugCtx.component).toBe(compView.component);
+        expect(debugCtx.context).toBe(compView.context);
+      });
+
+      it('should provide data for other nodes based on the nearest element parent', () => {
+        const view = createViewWithData();
+        const compView = asElementData(view, 0).componentView;
+
+        const debugCtx = Services.createDebugContext(compView, 1);
+
+        expect(debugCtx.renderNode).toBe(asElementData(compView, 0).renderElement);
+      });
+    });
+  });
+}
diff --git a/packages/core/test/view/text_spec.ts b/packages/core/test/view/text_spec.ts
new file mode 100644
index 000000000000..427fdad8527b
--- /dev/null
+++ b/packages/core/test/view/text_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 {getDebugNode} from '@angular/core';
+import {NodeFlags, Services, asTextData, elementDef, textDef} from '@angular/core/src/view/index';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
+import {ARG_TYPE_VALUES, checkNodeInlineOrDynamic, compViewDef, createAndGetRootNodes} from './helper';
+
+{
+  describe(`View Text`, () => {
+
+    describe('create', () => {
+      it('should create text nodes without parents', () => {
+        const rootNodes = createAndGetRootNodes(compViewDef([textDef(0, null, ['a'])])).rootNodes;
+        expect(rootNodes.length).toBe(1);
+        expect(getDOM().getText(rootNodes[0])).toBe('a');
+      });
+
+      it('should create views with multiple root text nodes', () => {
+        const rootNodes = createAndGetRootNodes(compViewDef([
+                            textDef(0, null, ['a']),
+                            textDef(1, null, ['b']),
+                          ])).rootNodes;
+        expect(rootNodes.length).toBe(2);
+      });
+
+      it('should create text nodes with parents', () => {
+        const rootNodes = createAndGetRootNodes(compViewDef([
+                            elementDef(0, NodeFlags.None, null, null, 1, 'div'),
+                            textDef(1, null, ['a']),
+                          ])).rootNodes;
+        expect(rootNodes.length).toBe(1);
+        const textNode = getDOM().firstChild(rootNodes[0]);
+        expect(getDOM().getText(textNode)).toBe('a');
+      });
+
+      it('should add debug information to the renderer', () => {
+        const someContext = new Object();
+        const {view, rootNodes} =
+            createAndGetRootNodes(compViewDef([textDef(0, null, ['a'])]), someContext);
+        expect(getDebugNode(rootNodes[0]) !.nativeNode).toBe(asTextData(view, 0).renderText);
+      });
+    });
+
+    describe('change text', () => {
+      ARG_TYPE_VALUES.forEach((inlineDynamic) => {
+        it(`should update via strategy ${inlineDynamic}`, () => {
+          const {view, rootNodes} = createAndGetRootNodes(compViewDef(
+              [
+                textDef(0, null, ['0', '1', '2']),
+              ],
+              null !, (check, view) => {
+                checkNodeInlineOrDynamic(check, view, 0, inlineDynamic, ['a', 'b']);
+              }));
+
+          Services.checkAndUpdateView(view);
+
+          expect(getDOM().getText(rootNodes[0])).toBe('0a1b2');
+        });
+
+      });
+    });
+
+  });
+}
diff --git a/packages/core/test/view/view_def_spec.ts b/packages/core/test/view/view_def_spec.ts
new file mode 100644
index 000000000000..99fc389ce9f2
--- /dev/null
+++ b/packages/core/test/view/view_def_spec.ts
@@ -0,0 +1,219 @@
+/**
+ * @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 {NodeFlags, QueryValueType, ViewDefinition, ViewFlags, anchorDef, directiveDef, elementDef, textDef, viewDef} from '@angular/core/src/view/index';
+import {filterQueryId} from '@angular/core/src/view/util';
+
+{
+  describe('viewDef', () => {
+
+    describe('parent', () => {
+      function parents(viewDef: ViewDefinition): (number | null)[] {
+        return viewDef.nodes.map(node => node.parent ? node.parent.nodeIndex : null);
+      }
+
+      it('should calculate parents for one level', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+          textDef(1, null, ['a']),
+          textDef(2, null, ['a']),
+        ]);
+
+        expect(parents(vd)).toEqual([null, 0, 0]);
+      });
+
+      it('should calculate parents for one level, multiple roots', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+          textDef(1, null, ['a']),
+          elementDef(2, NodeFlags.None, null, null, 1, 'span'),
+          textDef(3, null, ['a']),
+          textDef(4, null, ['a']),
+        ]);
+
+        expect(parents(vd)).toEqual([null, 0, null, 2, null]);
+      });
+
+      it('should calculate parents for multiple levels', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+          elementDef(1, NodeFlags.None, null, null, 1, 'span'),
+          textDef(2, null, ['a']),
+          elementDef(3, NodeFlags.None, null, null, 1, 'span'),
+          textDef(4, null, ['a']),
+          textDef(5, null, ['a']),
+        ]);
+
+        expect(parents(vd)).toEqual([null, 0, 1, null, 3, null]);
+      });
+    });
+
+    describe('childFlags', () => {
+
+      function childFlags(viewDef: ViewDefinition): number[] {
+        return viewDef.nodes.map(node => node.childFlags);
+      }
+
+      function directChildFlags(viewDef: ViewDefinition): number[] {
+        return viewDef.nodes.map(node => node.directChildFlags);
+      }
+
+      it('should calculate childFlags for one level', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(1, NodeFlags.AfterContentChecked, null, 0, AService, [])
+        ]);
+
+        expect(childFlags(vd)).toEqual([
+          NodeFlags.TypeDirective | NodeFlags.AfterContentChecked, NodeFlags.None
+        ]);
+
+        expect(directChildFlags(vd)).toEqual([
+          NodeFlags.TypeDirective | NodeFlags.AfterContentChecked, NodeFlags.None
+        ]);
+      });
+
+      it('should calculate childFlags for two levels', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+          elementDef(1, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(2, NodeFlags.AfterContentChecked, null, 0, AService, [])
+        ]);
+
+        expect(childFlags(vd)).toEqual([
+          NodeFlags.TypeElement | NodeFlags.TypeDirective | NodeFlags.AfterContentChecked,
+          NodeFlags.TypeDirective | NodeFlags.AfterContentChecked, NodeFlags.None
+        ]);
+
+        expect(directChildFlags(vd)).toEqual([
+          NodeFlags.TypeElement, NodeFlags.TypeDirective | NodeFlags.AfterContentChecked,
+          NodeFlags.None
+        ]);
+      });
+
+      it('should calculate childFlags for one level, multiple roots', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(1, NodeFlags.AfterContentChecked, null, 0, AService, []),
+          elementDef(2, NodeFlags.None, null, null, 2, 'span'),
+          directiveDef(3, NodeFlags.AfterContentInit, null, 0, AService, []),
+          directiveDef(4, NodeFlags.AfterViewChecked, null, 0, AService, []),
+        ]);
+
+        expect(childFlags(vd)).toEqual([
+          NodeFlags.TypeDirective | NodeFlags.AfterContentChecked, NodeFlags.None,
+          NodeFlags.TypeDirective | NodeFlags.AfterContentInit | NodeFlags.AfterViewChecked,
+          NodeFlags.None, NodeFlags.None
+        ]);
+
+        expect(directChildFlags(vd)).toEqual([
+          NodeFlags.TypeDirective | NodeFlags.AfterContentChecked, NodeFlags.None,
+          NodeFlags.TypeDirective | NodeFlags.AfterContentInit | NodeFlags.AfterViewChecked,
+          NodeFlags.None, NodeFlags.None
+        ]);
+      });
+
+      it('should calculate childFlags for multiple levels', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+          elementDef(1, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(2, NodeFlags.AfterContentChecked, null !, 0, AService, []),
+          elementDef(3, NodeFlags.None, null, null, 2, 'span'),
+          directiveDef(4, NodeFlags.AfterContentInit, null, 0, AService, []),
+          directiveDef(5, NodeFlags.AfterViewInit, null, 0, AService, []),
+        ]);
+
+        expect(childFlags(vd)).toEqual([
+          NodeFlags.TypeElement | NodeFlags.TypeDirective | NodeFlags.AfterContentChecked,
+          NodeFlags.TypeDirective | NodeFlags.AfterContentChecked, NodeFlags.None,
+          NodeFlags.TypeDirective | NodeFlags.AfterContentInit | NodeFlags.AfterViewInit,
+          NodeFlags.None, NodeFlags.None
+        ]);
+
+        expect(directChildFlags(vd)).toEqual([
+          NodeFlags.TypeElement, NodeFlags.TypeDirective | NodeFlags.AfterContentChecked,
+          NodeFlags.None,
+          NodeFlags.TypeDirective | NodeFlags.AfterContentInit | NodeFlags.AfterViewInit,
+          NodeFlags.None, NodeFlags.None
+        ]);
+      });
+    });
+
+    describe('childMatchedQueries', () => {
+      function childMatchedQueries(viewDef: ViewDefinition): number[] {
+        return viewDef.nodes.map(node => node.childMatchedQueries);
+      }
+
+      it('should calculate childMatchedQueries for one level', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(1, NodeFlags.None, [[1, QueryValueType.Provider]], 0, AService, [])
+        ]);
+
+        expect(childMatchedQueries(vd)).toEqual([filterQueryId(1), 0]);
+      });
+
+      it('should calculate childMatchedQueries for two levels', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+          elementDef(1, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(2, NodeFlags.None, [[1, QueryValueType.Provider]], 0, AService, [])
+        ]);
+
+        expect(childMatchedQueries(vd)).toEqual([filterQueryId(1), filterQueryId(1), 0]);
+      });
+
+      it('should calculate childMatchedQueries for one level, multiple roots', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(1, NodeFlags.None, [[1, QueryValueType.Provider]], 0, AService, []),
+          elementDef(2, NodeFlags.None, null, null, 2, 'span'),
+          directiveDef(3, NodeFlags.None, [[2, QueryValueType.Provider]], 0, AService, []),
+          directiveDef(4, NodeFlags.None, [[3, QueryValueType.Provider]], 0, AService, []),
+        ]);
+
+        expect(childMatchedQueries(vd)).toEqual([
+          filterQueryId(1), 0, filterQueryId(2) | filterQueryId(3), 0, 0
+        ]);
+      });
+
+      it('should calculate childMatchedQueries for multiple levels', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 2, 'span'),
+          elementDef(1, NodeFlags.None, null, null, 1, 'span'),
+          directiveDef(2, NodeFlags.None, [[1, QueryValueType.Provider]], 0, AService, []),
+          elementDef(3, NodeFlags.None, null, null, 2, 'span'),
+          directiveDef(4, NodeFlags.None, [[2, QueryValueType.Provider]], 0, AService, []),
+          directiveDef(5, NodeFlags.None, [[3, QueryValueType.Provider]], 0, AService, []),
+        ]);
+
+        expect(childMatchedQueries(vd)).toEqual([
+          filterQueryId(1), filterQueryId(1), 0, filterQueryId(2) | filterQueryId(3), 0, 0
+        ]);
+      });
+
+      it('should included embedded views into childMatchedQueries', () => {
+        const vd = viewDef(ViewFlags.None, [
+          elementDef(0, NodeFlags.None, null, null, 1, 'span'),
+          anchorDef(
+              NodeFlags.None, null, null, 0, null,
+              () => viewDef(
+                  ViewFlags.None,
+                  [
+                    elementDef(0, NodeFlags.None, [[1, QueryValueType.Provider]], null, 0, 'span'),
+                  ]))
+        ]);
+
+        // Note: the template will become a sibling to the anchor once stamped out,
+        expect(childMatchedQueries(vd)).toEqual([filterQueryId(1), 0]);
+      });
+    });
+  });
+}
+
+class AService {}
diff --git a/packages/core/test/zone/ng_zone_spec.ts b/packages/core/test/zone/ng_zone_spec.ts
new file mode 100644
index 000000000000..10307a5bbd8d
--- /dev/null
+++ b/packages/core/test/zone/ng_zone_spec.ts
@@ -0,0 +1,823 @@
+/**
+ * @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 {EventEmitter, NgZone} from '@angular/core';
+import {async, fakeAsync, flushMicrotasks} from '@angular/core/testing';
+import {AsyncTestCompleter, Log, beforeEach, describe, expect, inject, it, xit} from '@angular/core/testing/src/testing_internal';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+import {scheduleMicroTask} from '../../src/util';
+import {NoopNgZone} from '../../src/zone/ng_zone';
+
+const needsLongerTimers = browserDetection.isSlow || browserDetection.isEdge;
+const resultTimer = 1000;
+const testTimeout = browserDetection.isEdge ? 1200 : 500;
+// Schedules a macrotask (using a timer)
+function macroTask(fn: (...args: any[]) => void, timer = 1): void {
+  // adds longer timers for passing tests in IE and Edge
+  setTimeout(fn, needsLongerTimers ? timer : 1);
+}
+
+let _log: Log;
+let _errors: any[];
+let _traces: any[];
+let _zone: NgZone;
+
+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);
+    }
+  });
+}
+
+function logOnUnstable() {
+  _zone.onUnstable.subscribe({next: _log.fn('onUnstable')});
+}
+
+function logOnMicrotaskEmpty() {
+  _zone.onMicrotaskEmpty.subscribe({next: _log.fn('onMicrotaskEmpty')});
+}
+
+function logOnStable() {
+  _zone.onStable.subscribe({next: _log.fn('onStable')});
+}
+
+function runNgZoneNoLog(fn: () => any) {
+  const length = _log.logItems.length;
+  try {
+    return _zone.run(fn);
+  } finally {
+    // delete anything which may have gotten logged.
+    _log.logItems.length = length;
+  }
+}
+
+{
+  describe('NgZone', () => {
+    function createZone(enableLongStackTrace: boolean) {
+      return new NgZone({enableLongStackTrace: enableLongStackTrace});
+    }
+
+    beforeEach(() => {
+      _log = new Log();
+      _errors = [];
+      _traces = [];
+    });
+
+    describe('long stack trace', () => {
+      beforeEach(() => {
+        _zone = createZone(true);
+        logOnUnstable();
+        logOnMicrotaskEmpty();
+        logOnStable();
+        logOnError();
+      });
+
+      commonTests();
+
+      it('should produce long stack traces',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           macroTask(() => {
+             let resolve: (result: any) => void;
+             const promise: Promise<any> = new Promise((res) => { resolve = res; });
+
+             _zone.run(() => {
+               setTimeout(() => {
+                 setTimeout(() => {
+                   resolve(null);
+                   throw new Error('ccc');
+                 }, 0);
+               }, 0);
+             });
+
+             promise.then((_) => {
+               expect(_traces.length).toBe(1);
+               expect(_traces[0].length).toBeGreaterThan(1);
+               async.done();
+             });
+           });
+         }), testTimeout);
+
+      it('should produce long stack traces (when using microtasks)',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           macroTask(() => {
+             let resolve: (result: any) => void;
+             const promise: Promise<any> = new Promise((res) => { resolve = res; });
+
+             _zone.run(() => {
+               scheduleMicroTask(() => {
+                 scheduleMicroTask(() => {
+                   resolve(null);
+                   throw new Error('ddd');
+                 });
+               });
+             });
+
+             promise.then((_) => {
+               expect(_traces.length).toBe(1);
+               expect(_traces[0].length).toBeGreaterThan(1);
+               async.done();
+             });
+           });
+         }), testTimeout);
+    });
+
+    describe('short stack trace', () => {
+      beforeEach(() => {
+        _zone = createZone(false);
+        logOnUnstable();
+        logOnMicrotaskEmpty();
+        logOnStable();
+        logOnError();
+      });
+
+      commonTests();
+
+      it('should disable long stack traces',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           macroTask(() => {
+             let resolve: (result: any) => void;
+             const promise: Promise<any> = new Promise((res) => { resolve = res; });
+
+             _zone.run(() => {
+               setTimeout(() => {
+                 setTimeout(() => {
+                   resolve(null);
+                   throw new Error('ccc');
+                 }, 0);
+               }, 0);
+             });
+
+             promise.then((_) => {
+               expect(_traces.length).toBe(1);
+               if (_traces[0] != null) {
+                 // some browsers don't have stack traces.
+                 expect(_traces[0].indexOf('---')).toEqual(-1);
+               }
+               async.done();
+             });
+           });
+         }), testTimeout);
+    });
+  });
+
+  describe('NoopNgZone', () => {
+    const ngZone = new NoopNgZone();
+
+    it('should run', () => {
+      let runs = false;
+      ngZone.run(() => {
+        ngZone.runGuarded(() => { ngZone.runOutsideAngular(() => { runs = true; }); });
+      });
+      expect(runs).toBe(true);
+    });
+
+    it('should have EventEmitter instances', () => {
+      expect(ngZone.onError instanceof EventEmitter).toBe(true);
+      expect(ngZone.onStable instanceof EventEmitter).toBe(true);
+      expect(ngZone.onUnstable instanceof EventEmitter).toBe(true);
+      expect(ngZone.onMicrotaskEmpty instanceof EventEmitter).toBe(true);
+    });
+  });
+}
+
+function commonTests() {
+  describe('hasPendingMicrotasks', () => {
+    it('should be false', () => { expect(_zone.hasPendingMicrotasks).toBe(false); });
+
+    it('should be true', () => {
+      runNgZoneNoLog(() => { scheduleMicroTask(() => {}); });
+      expect(_zone.hasPendingMicrotasks).toBe(true);
+    });
+  });
+
+  describe('hasPendingTimers', () => {
+    it('should be false', () => { expect(_zone.hasPendingMacrotasks).toBe(false); });
+
+    it('should be true', () => {
+      runNgZoneNoLog(() => { setTimeout(() => {}, 0); });
+      expect(_zone.hasPendingMacrotasks).toBe(true);
+    });
+  });
+
+  describe('hasPendingAsyncTasks', () => {
+    it('should be false', () => { expect(_zone.hasPendingMicrotasks).toBe(false); });
+
+    it('should be true when microtask is scheduled', () => {
+      runNgZoneNoLog(() => { scheduleMicroTask(() => {}); });
+      expect(_zone.hasPendingMicrotasks).toBe(true);
+    });
+
+    it('should be true when timer is scheduled', () => {
+      runNgZoneNoLog(() => { setTimeout(() => {}, 0); });
+      expect(_zone.hasPendingMacrotasks).toBe(true);
+    });
+  });
+
+  describe('isInInnerZone', () => {
+    it('should return whether the code executes in the inner zone', () => {
+      expect(NgZone.isInAngularZone()).toEqual(false);
+      runNgZoneNoLog(() => { expect(NgZone.isInAngularZone()).toEqual(true); });
+    }, testTimeout);
+  });
+
+  describe('run', () => {
+    it('should return the body return value from run',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         macroTask(() => { expect(_zone.run(() => 6)).toEqual(6); });
+
+         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')));
+         macroTask(() => {
+           expect(_log.result()).toEqual('onUnstable; run; onMicrotaskEmpty; onStable');
+           async.done();
+         });
+       }), testTimeout);
+
+    it('should call onStable once at the end of event',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         // The test is set up in a way that causes the zone loop to run onMicrotaskEmpty twice
+         // then verified that onStable is only called once at the end
+
+         runNgZoneNoLog(() => macroTask(_log.fn('run')));
+
+         let times = 0;
+         _zone.onMicrotaskEmpty.subscribe({
+           next: () => {
+             times++;
+             _log.add(`onMicrotaskEmpty ${times}`);
+             if (times < 2) {
+               // Scheduling a microtask causes a second digest
+               runNgZoneNoLog(() => { scheduleMicroTask(() => {}); });
+             }
+           }
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   'onUnstable; run; onMicrotaskEmpty; onMicrotaskEmpty 1; ' +
+                   'onMicrotaskEmpty; onMicrotaskEmpty 2; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should call standalone onStable',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => macroTask(_log.fn('run')));
+
+         macroTask(() => {
+           expect(_log.result()).toEqual('onUnstable; run; onMicrotaskEmpty; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    xit('should run subscriber listeners in the subscription zone (outside)',
+        inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+          // Each subscriber fires a microtask outside the Angular zone. The test
+          // then verifies that those microtasks do not cause additional digests.
+
+          let turnStart = false;
+          _zone.onUnstable.subscribe({
+            next: () => {
+              if (turnStart) throw 'Should not call this more than once';
+              _log.add('onUnstable');
+              scheduleMicroTask(() => {});
+              turnStart = true;
+            }
+          });
+
+          let turnDone = false;
+          _zone.onMicrotaskEmpty.subscribe({
+            next: () => {
+              if (turnDone) throw 'Should not call this more than once';
+              _log.add('onMicrotaskEmpty');
+              scheduleMicroTask(() => {});
+              turnDone = true;
+            }
+          });
+
+          let eventDone = false;
+          _zone.onStable.subscribe({
+            next: () => {
+              if (eventDone) throw 'Should not call this more than once';
+              _log.add('onStable');
+              scheduleMicroTask(() => {});
+              eventDone = true;
+            }
+          });
+
+          macroTask(() => { _zone.run(_log.fn('run')); });
+
+          macroTask(() => {
+            expect(_log.result()).toEqual('onUnstable; run; onMicrotaskEmpty; onStable');
+            async.done();
+          }, resultTimer);
+        }), testTimeout);
+
+    it('should run subscriber listeners in the subscription zone (inside)',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => macroTask(_log.fn('run')));
+
+         // the only practical use-case to run a callback inside the zone is
+         // change detection after "onMicrotaskEmpty". That's the only case tested.
+         let turnDone = false;
+         _zone.onMicrotaskEmpty.subscribe({
+           next: () => {
+             _log.add('onMyMicrotaskEmpty');
+             if (turnDone) return;
+             _zone.run(() => { scheduleMicroTask(() => {}); });
+             turnDone = true;
+           }
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   'onUnstable; run; onMicrotaskEmpty; onMyMicrotaskEmpty; ' +
+                   'onMicrotaskEmpty; onMyMicrotaskEmpty; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should run async tasks scheduled inside onStable outside Angular zone',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => macroTask(_log.fn('run')));
+
+         _zone.onStable.subscribe({
+           next: () => {
+             NgZone.assertNotInAngularZone();
+             _log.add('onMyTaskDone');
+           }
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual('onUnstable; run; onMicrotaskEmpty; onStable; onMyTaskDone');
+           async.done();
+         });
+       }), testTimeout);
+
+    it('should call onUnstable once before a turn and onMicrotaskEmpty once after the turn',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => {
+           macroTask(() => {
+             _log.add('run start');
+             scheduleMicroTask(_log.fn('async'));
+             _log.add('run end');
+           });
+         });
+
+         macroTask(() => {
+           // The microtask (async) is executed after the macrotask (run)
+           expect(_log.result())
+               .toEqual('onUnstable; run start; run end; async; onMicrotaskEmpty; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should not run onUnstable and onMicrotaskEmpty for nested Zone.run',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => {
+           macroTask(() => {
+             _log.add('start run');
+             _zone.run(() => {
+               _log.add('nested run');
+               scheduleMicroTask(_log.fn('nested run microtask'));
+             });
+             _log.add('end run');
+           });
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   'onUnstable; start run; nested run; end run; nested run microtask; onMicrotaskEmpty; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should not run onUnstable and onMicrotaskEmpty for nested Zone.run invoked from onMicrotaskEmpty',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => macroTask(_log.fn('start run')));
+
+         _zone.onMicrotaskEmpty.subscribe({
+           next: () => {
+             _log.add('onMicrotaskEmpty:started');
+             _zone.run(() => _log.add('nested run'));
+             _log.add('onMicrotaskEmpty:finished');
+           }
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   'onUnstable; start run; onMicrotaskEmpty; onMicrotaskEmpty:started; nested run; onMicrotaskEmpty:finished; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should call onUnstable and onMicrotaskEmpty before and after each top-level run',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => macroTask(_log.fn('run1')));
+         runNgZoneNoLog(() => macroTask(_log.fn('run2')));
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   'onUnstable; run1; onMicrotaskEmpty; onStable; onUnstable; run2; onMicrotaskEmpty; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should call onUnstable and onMicrotaskEmpty before and after each turn',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         let aResolve: (result: string) => void;
+         let aPromise: Promise<string>;
+         let bResolve: (result: string) => void;
+         let bPromise: Promise<string>;
+
+         runNgZoneNoLog(() => {
+           macroTask(() => {
+             aPromise = new Promise(res => { aResolve = res; });
+             bPromise = new Promise(res => { bResolve = res; });
+
+             _log.add('run start');
+             aPromise.then(_log.fn('a then'));
+             bPromise.then(_log.fn('b then'));
+           });
+         });
+
+         runNgZoneNoLog(() => {
+           macroTask(() => {
+             aResolve('a');
+             bResolve('b');
+           });
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   'onUnstable; run start; onMicrotaskEmpty; onStable; onUnstable; a then; b then; onMicrotaskEmpty; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should run a function outside of the angular zone',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         macroTask(() => { _zone.runOutsideAngular(_log.fn('run')); });
+
+         macroTask(() => {
+           expect(_log.result()).toEqual('run');
+           async.done();
+         });
+       }), testTimeout);
+
+    it('should call onUnstable and onMicrotaskEmpty when an inner microtask is scheduled from outside angular',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         let resolve: (result: string | null) => void;
+         let promise: Promise<string|null>;
+
+         macroTask(() => {
+           NgZone.assertNotInAngularZone();
+           promise = new Promise<string|null>(res => { resolve = res; });
+         });
+
+         runNgZoneNoLog(() => {
+           macroTask(() => {
+             NgZone.assertInAngularZone();
+             promise.then(_log.fn('executedMicrotask'));
+           });
+         });
+
+         macroTask(() => {
+           NgZone.assertNotInAngularZone();
+           _log.add('scheduling a microtask');
+           resolve(null);
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   // First VM turn => setup Promise then
+                   'onUnstable; onMicrotaskEmpty; onStable; ' +
+                   // Second VM turn (outside of angular)
+                   'scheduling a microtask; onUnstable; ' +
+                   // Third VM Turn => execute the microtask (inside angular)
+                   // No onUnstable;  because we don't own the task which started the turn.
+                   'executedMicrotask; onMicrotaskEmpty; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should call onUnstable only before executing a microtask scheduled in onMicrotaskEmpty ' +
+           'and not onMicrotaskEmpty after executing the task',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => macroTask(_log.fn('run')));
+
+         let ran = false;
+         _zone.onMicrotaskEmpty.subscribe({
+           next: () => {
+             _log.add('onMicrotaskEmpty(begin)');
+
+             if (!ran) {
+               _zone.run(() => {
+                 scheduleMicroTask(() => {
+                   ran = true;
+                   _log.add('executedMicrotask');
+                 });
+               });
+             }
+
+             _log.add('onMicrotaskEmpty(end)');
+           }
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   // First VM turn => 'run' macrotask
+                   'onUnstable; run; onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); ' +
+                   // Second microtaskDrain Turn => microtask enqueued from onMicrotaskEmpty
+                   'executedMicrotask; onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should call onUnstable and onMicrotaskEmpty for a scheduleMicroTask in onMicrotaskEmpty triggered by ' +
+           'a scheduleMicroTask in run',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => {
+           macroTask(() => {
+             _log.add('scheduleMicroTask');
+             scheduleMicroTask(_log.fn('run(executeMicrotask)'));
+           });
+         });
+
+         let ran = false;
+         _zone.onMicrotaskEmpty.subscribe({
+           next: () => {
+             _log.add('onMicrotaskEmpty(begin)');
+             if (!ran) {
+               _log.add('onMicrotaskEmpty(scheduleMicroTask)');
+               _zone.run(() => {
+                 scheduleMicroTask(() => {
+                   ran = true;
+                   _log.add('onMicrotaskEmpty(executeMicrotask)');
+                 });
+               });
+             }
+             _log.add('onMicrotaskEmpty(end)');
+           }
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   // First VM Turn => a macrotask + the microtask it enqueues
+                   'onUnstable; scheduleMicroTask; run(executeMicrotask); onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(scheduleMicroTask); onMicrotaskEmpty(end); ' +
+                   // Second VM Turn => the microtask enqueued from onMicrotaskEmpty
+                   'onMicrotaskEmpty(executeMicrotask); onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should execute promises scheduled in onUnstable before promises scheduled in run',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => {
+           macroTask(() => {
+             _log.add('run start');
+             resolvedPromise
+                 .then((_) => {
+                   _log.add('promise then');
+                   resolvedPromise.then(_log.fn('promise foo'));
+                   return Promise.resolve(null);
+                 })
+                 .then(_log.fn('promise bar'));
+             _log.add('run end');
+           });
+         });
+
+         let donePromiseRan = false;
+         let startPromiseRan = false;
+
+         _zone.onUnstable.subscribe({
+           next: () => {
+             _log.add('onUnstable(begin)');
+             if (!startPromiseRan) {
+               _log.add('onUnstable(schedulePromise)');
+               _zone.run(() => { scheduleMicroTask(_log.fn('onUnstable(executePromise)')); });
+               startPromiseRan = true;
+             }
+             _log.add('onUnstable(end)');
+           }
+         });
+
+         _zone.onMicrotaskEmpty.subscribe({
+           next: () => {
+             _log.add('onMicrotaskEmpty(begin)');
+             if (!donePromiseRan) {
+               _log.add('onMicrotaskEmpty(schedulePromise)');
+               _zone.run(() => { scheduleMicroTask(_log.fn('onMicrotaskEmpty(executePromise)')); });
+               donePromiseRan = true;
+             }
+             _log.add('onMicrotaskEmpty(end)');
+           }
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   // First VM turn: enqueue a microtask in onUnstable
+                   'onUnstable; onUnstable(begin); onUnstable(schedulePromise); onUnstable(end); ' +
+                   // First VM turn: execute the macrotask which enqueues microtasks
+                   'run start; run end; ' +
+                   // First VM turn: execute enqueued microtasks
+                   'onUnstable(executePromise); promise then; promise foo; promise bar; onMicrotaskEmpty; ' +
+                   // First VM turn: onTurnEnd, enqueue a microtask
+                   'onMicrotaskEmpty(begin); onMicrotaskEmpty(schedulePromise); onMicrotaskEmpty(end); ' +
+                   // Second VM turn: execute the microtask from onTurnEnd
+                   'onMicrotaskEmpty(executePromise); onMicrotaskEmpty; onMicrotaskEmpty(begin); onMicrotaskEmpty(end); onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should call onUnstable and onMicrotaskEmpty before and after each turn, respectively',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         let aResolve: (result: string | null) => void;
+         let aPromise: Promise<string|null>;
+         let bResolve: (result: string | null) => void;
+         let bPromise: Promise<string|null>;
+
+         runNgZoneNoLog(() => {
+           macroTask(() => {
+             aPromise = new Promise<string|null>(res => { aResolve = res; });
+             bPromise = new Promise<string|null>(res => { bResolve = res; });
+             aPromise.then(_log.fn('a then'));
+             bPromise.then(_log.fn('b then'));
+             _log.add('run start');
+           });
+         });
+
+         runNgZoneNoLog(() => { macroTask(() => { aResolve(null); }, 10); });
+
+         runNgZoneNoLog(() => { macroTask(() => { bResolve(null); }, 20); });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   // First VM turn
+                   'onUnstable; run start; onMicrotaskEmpty; onStable; ' +
+                   // Second VM turn
+                   'onUnstable; a then; onMicrotaskEmpty; onStable; ' +
+                   // Third VM turn
+                   'onUnstable; b then; onMicrotaskEmpty; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should call onUnstable and onMicrotaskEmpty before and after (respectively) all turns in a chain',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         runNgZoneNoLog(() => {
+           macroTask(() => {
+             _log.add('run start');
+             scheduleMicroTask(() => {
+               _log.add('async1');
+               scheduleMicroTask(_log.fn('async2'));
+             });
+             _log.add('run end');
+           });
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   'onUnstable; run start; run end; async1; async2; onMicrotaskEmpty; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+
+    it('should call onUnstable and onMicrotaskEmpty for promises created outside of run body',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         let promise: Promise<any>;
+
+         runNgZoneNoLog(() => {
+           macroTask(() => {
+             _zone.runOutsideAngular(
+                 () => { promise = Promise.resolve(4).then((x) => Promise.resolve(x)); });
+
+             promise.then(_log.fn('promise then'));
+             _log.add('zone run');
+           });
+         });
+
+         macroTask(() => {
+           expect(_log.result())
+               .toEqual(
+                   'onUnstable; zone run; onMicrotaskEmpty; onStable; ' +
+                   'onUnstable; promise then; onMicrotaskEmpty; onStable');
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+  });
+
+  describe('exceptions', () => {
+    it('should call the on error callback when it is invoked via zone.runGuarded',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         macroTask(() => {
+           const exception = new Error('sync');
+
+           _zone.runGuarded(() => { throw exception; });
+
+           expect(_errors.length).toBe(1);
+           expect(_errors[0]).toBe(exception);
+           async.done();
+         });
+       }), testTimeout);
+
+    it('should not call the on error callback but rethrow when it is invoked via zone.run',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         macroTask(() => {
+           const exception = new Error('sync');
+           expect(() => _zone.run(() => { throw exception; })).toThrowError('sync');
+
+           expect(_errors.length).toBe(0);
+           async.done();
+         });
+       }), testTimeout);
+
+    it('should call onError for errors from microtasks',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const exception = new Error('async');
+
+         macroTask(() => { _zone.run(() => { scheduleMicroTask(() => { throw exception; }); }); });
+
+         macroTask(() => {
+           expect(_errors.length).toBe(1);
+           expect(_errors[0]).toEqual(exception);
+           async.done();
+         }, resultTimer);
+       }), testTimeout);
+  });
+
+  describe('bugs', () => {
+    describe('#10503', () => {
+      let ngZone: NgZone;
+
+      beforeEach(inject([NgZone], (_ngZone: NgZone) => {
+        // Create a zone outside the fakeAsync.
+        ngZone = _ngZone;
+      }));
+
+      it('should fakeAsync even if the NgZone was created outside.', fakeAsync(() => {
+           let result: string = null !;
+           // try to escape the current fakeAsync zone by using NgZone which was created outside.
+           ngZone.run(() => {
+             Promise.resolve('works').then((v) => result = v);
+             flushMicrotasks();
+           });
+           expect(result).toEqual('works');
+         }));
+
+      describe('async', () => {
+        let asyncResult: string;
+        const waitLongerThenTestFrameworkAsyncTimeout = 5;
+
+        beforeEach(() => { asyncResult = null !; });
+
+        it('should async even if the NgZone was created outside.', async(() => {
+             // try to escape the current async zone by using NgZone which was created outside.
+             ngZone.run(() => {
+               setTimeout(() => {
+                 Promise.resolve('works').then((v) => asyncResult = v);
+               }, waitLongerThenTestFrameworkAsyncTimeout);
+             });
+           }));
+
+        afterEach(() => { expect(asyncResult).toEqual('works'); });
+
+      });
+    });
+  });
+}
diff --git a/packages/core/testing/BUILD.bazel b/packages/core/testing/BUILD.bazel
new file mode 100644
index 000000000000..0953b0ed96cb
--- /dev/null
+++ b/packages/core/testing/BUILD.bazel
@@ -0,0 +1,17 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+    ),
+    module_name = "@angular/core/testing",
+    deps = [
+        "//packages:types",
+        "//packages/core",
+    ],
+)
diff --git a/packages/core/testing/index.ts b/packages/core/testing/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/core/testing/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';
diff --git a/packages/core/testing/package.json b/packages/core/testing/package.json
new file mode 100644
index 000000000000..fd49a3d3c91f
--- /dev/null
+++ b/packages/core/testing/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/core/testing",
+  "typings": "./testing.d.ts",
+  "main": "../bundles/core-testing.umd.js",
+  "module": "../fesm5/testing.js",
+  "es2015": "../fesm2015/testing.js",
+  "esm5": "../esm5/testing/testing.js",
+  "esm2015": "../esm2015/testing/testing.js",
+  "fesm5": "../fesm5/testing.js",
+  "fesm2015": "../fesm2015/testing.js"
+}
diff --git a/packages/core/testing/public_api.ts b/packages/core/testing/public_api.ts
new file mode 100644
index 000000000000..e95d9f8ef071
--- /dev/null
+++ b/packages/core/testing/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/testing';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/core/testing/rollup.config.js b/packages/core/testing/rollup.config.js
new file mode 100644
index 000000000000..7166f4aa4909
--- /dev/null
+++ b/packages/core/testing/rollup.config.js
@@ -0,0 +1,28 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/compiler': 'ng.compiler',
+  'rxjs': 'rxjs',
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/core/fesm5/testing.js',
+  dest: '../../../dist/packages-dist/core/bundles/core-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/core/testing'},
+  moduleName: 'ng.core.testing',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/core/testing/src/async.ts b/packages/core/testing/src/async.ts
new file mode 100644
index 000000000000..1d67a2d25ed1
--- /dev/null
+++ b/packages/core/testing/src/async.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
+ */
+
+import {asyncFallback} from './async_fallback';
+
+/**
+ * Wraps a test function in an asynchronous test zone. The test will automatically
+ * complete when all asynchronous calls within this zone are done. Can be used
+ * to wrap an {@link inject} call.
+ *
+ * Example:
+ *
+ * ```
+ * it('...', async(inject([AClass], (object) => {
+ *   object.doSomething.then(() => {
+ *     expect(...);
+ *   })
+ * });
+ * ```
+ *
+ *
+ */
+export function async(fn: Function): (done: any) => any {
+  const _Zone: any = typeof Zone !== 'undefined' ? Zone : null;
+  if (!_Zone) {
+    return function() {
+      return Promise.reject(
+          'Zone is needed for the async() test helper but could not be found. ' +
+          'Please make sure that your environment includes zone.js/dist/zone.js');
+    };
+  }
+  const asyncTest = _Zone && _Zone[_Zone.__symbol__('asyncTest')];
+  if (typeof asyncTest === 'function') {
+    return asyncTest(fn);
+  }
+  // not using new version of zone.js
+  // TODO @JiaLiPassion, remove this after all library updated to
+  // newest version of zone.js(0.8.25)
+  return asyncFallback(fn);
+}
\ No newline at end of file
diff --git a/packages/core/testing/src/async_fallback.ts b/packages/core/testing/src/async_fallback.ts
new file mode 100644
index 000000000000..a2c8250b12ec
--- /dev/null
+++ b/packages/core/testing/src/async_fallback.ts
@@ -0,0 +1,116 @@
+/**
+ * @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
+ */
+
+/**
+ * async has been moved to zone.js
+ * this file is for fallback in case old version of zone.js is used
+ */
+declare var global: any;
+
+const _global = <any>(typeof window === 'undefined' ? global : window);
+
+/**
+ * Wraps a test function in an asynchronous test zone. The test will automatically
+ * complete when all asynchronous calls within this zone are done. Can be used
+ * to wrap an {@link inject} call.
+ *
+ * Example:
+ *
+ * ```
+ * it('...', async(inject([AClass], (object) => {
+ *   object.doSomething.then(() => {
+ *     expect(...);
+ *   })
+ * });
+ * ```
+ *
+ *
+ */
+export function asyncFallback(fn: Function): (done: any) => any {
+  // If we're running using the Jasmine test framework, adapt to call the 'done'
+  // function when asynchronous activity is finished.
+  if (_global.jasmine) {
+    // Not using an arrow function to preserve context passed from call site
+    return function(done: any) {
+      if (!done) {
+        // if we run beforeEach in @angular/core/testing/testing_internal then we get no done
+        // fake it here and assume sync.
+        done = function() {};
+        done.fail = function(e: any) { throw e; };
+      }
+      runInTestZone(fn, this, done, (err: any) => {
+        if (typeof err === 'string') {
+          return done.fail(new Error(<string>err));
+        } else {
+          done.fail(err);
+        }
+      });
+    };
+  }
+  // Otherwise, return a promise which will resolve when asynchronous activity
+  // is finished. This will be correctly consumed by the Mocha framework with
+  // it('...', async(myFn)); or can be used in a custom framework.
+  // Not using an arrow function to preserve context passed from call site
+  return function() {
+    return new Promise<void>((finishCallback, failCallback) => {
+      runInTestZone(fn, this, finishCallback, failCallback);
+    });
+  };
+}
+
+function runInTestZone(
+    fn: Function, context: any, finishCallback: Function, failCallback: Function) {
+  const currentZone = Zone.current;
+  const AsyncTestZoneSpec = (Zone as any)['AsyncTestZoneSpec'];
+  if (AsyncTestZoneSpec === undefined) {
+    throw new Error(
+        'AsyncTestZoneSpec is needed for the async() test helper but could not be found. ' +
+        'Please make sure that your environment includes zone.js/dist/async-test.js');
+  }
+  const ProxyZoneSpec = (Zone as any)['ProxyZoneSpec'] as {
+    get(): {setDelegate(spec: ZoneSpec): void; getDelegate(): ZoneSpec;};
+    assertPresent: () => void;
+  };
+  if (ProxyZoneSpec === undefined) {
+    throw new Error(
+        'ProxyZoneSpec is needed for the async() test helper but could not be found. ' +
+        'Please make sure that your environment includes zone.js/dist/proxy.js');
+  }
+  const proxyZoneSpec = ProxyZoneSpec.get();
+  ProxyZoneSpec.assertPresent();
+  // We need to create the AsyncTestZoneSpec outside the ProxyZone.
+  // If we do it in ProxyZone then we will get to infinite recursion.
+  const proxyZone = Zone.current.getZoneWith('ProxyZoneSpec');
+  const previousDelegate = proxyZoneSpec.getDelegate();
+  proxyZone.parent.run(() => {
+    const testZoneSpec: ZoneSpec = new AsyncTestZoneSpec(
+        () => {
+          // Need to restore the original zone.
+          currentZone.run(() => {
+            if (proxyZoneSpec.getDelegate() == testZoneSpec) {
+              // Only reset the zone spec if it's sill this one. Otherwise, assume it's OK.
+              proxyZoneSpec.setDelegate(previousDelegate);
+            }
+            finishCallback();
+          });
+        },
+        (error: any) => {
+          // Need to restore the original zone.
+          currentZone.run(() => {
+            if (proxyZoneSpec.getDelegate() == testZoneSpec) {
+              // Only reset the zone spec if it's sill this one. Otherwise, assume it's OK.
+              proxyZoneSpec.setDelegate(previousDelegate);
+            }
+            failCallback(error);
+          });
+        },
+        'test');
+    proxyZoneSpec.setDelegate(testZoneSpec);
+  });
+  return Zone.current.runGuarded(fn, context);
+}
\ No newline at end of file
diff --git a/packages/core/testing/src/async_test_completer.ts b/packages/core/testing/src/async_test_completer.ts
new file mode 100644
index 000000000000..cfa94d650e2e
--- /dev/null
+++ b/packages/core/testing/src/async_test_completer.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
+ */
+
+/**
+ * Injectable completer that allows signaling completion of an asynchronous test. Used internally.
+ */
+export class AsyncTestCompleter {
+  // TODO(issue/24571): remove '!'.
+  private _resolve !: (result: any) => void;
+  // TODO(issue/24571): remove '!'.
+  private _reject !: (err: any) => void;
+  private _promise: Promise<any> = new Promise((res, rej) => {
+    this._resolve = res;
+    this._reject = rej;
+  });
+  done(value?: any) { this._resolve(value); }
+
+  fail(error?: any, stackTrace?: string) { this._reject(error); }
+
+  get promise(): Promise<any> { return this._promise; }
+}
diff --git a/packages/core/testing/src/before_each.ts b/packages/core/testing/src/before_each.ts
new file mode 100644
index 000000000000..aaf7cab682f9
--- /dev/null
+++ b/packages/core/testing/src/before_each.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
+ */
+
+/**
+ * Public Test Library for unit testing Angular applications. Assumes that you are running
+ * with Jasmine, Mocha, or a similar framework which exports a beforeEach function and
+ * allows tests to be asynchronous by either returning a promise or using a 'done' parameter.
+ */
+
+import {resetFakeAsyncZone} from './fake_async';
+import {TestBed} from './test_bed';
+
+declare var global: any;
+
+const _global = <any>(typeof window === 'undefined' ? global : window);
+
+// Reset the test providers and the fake async zone before each test.
+if (_global.beforeEach) {
+  _global.beforeEach(() => {
+    TestBed.resetTestingModule();
+    resetFakeAsyncZone();
+  });
+}
+
+// TODO(juliemr): remove this, only used because we need to export something to have compilation
+// work.
+export const __core_private_testing_placeholder__ = '';
diff --git a/packages/core/testing/src/component_fixture.ts b/packages/core/testing/src/component_fixture.ts
new file mode 100644
index 000000000000..88c5acd32e41
--- /dev/null
+++ b/packages/core/testing/src/component_fixture.ts
@@ -0,0 +1,216 @@
+/**
+ * @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 {ChangeDetectorRef, ComponentRef, DebugElement, ElementRef, NgZone, RendererFactory2, getDebugNode} from '@angular/core';
+
+
+/**
+ * Fixture for debugging and testing a component.
+ *
+ *
+ */
+export class ComponentFixture<T> {
+  /**
+   * The DebugElement associated with the root element of this component.
+   */
+  debugElement: DebugElement;
+
+  /**
+   * The instance of the root component class.
+   */
+  componentInstance: T;
+
+  /**
+   * The native element at the root of the component.
+   */
+  nativeElement: any;
+
+  /**
+   * The ElementRef for the element at the root of the component.
+   */
+  elementRef: ElementRef;
+
+  /**
+   * The ChangeDetectorRef for the component
+   */
+  changeDetectorRef: ChangeDetectorRef;
+
+  private _renderer: RendererFactory2|null|undefined;
+  private _isStable: boolean = true;
+  private _isDestroyed: boolean = false;
+  private _resolve: ((result: any) => void)|null = null;
+  private _promise: Promise<any>|null = null;
+  private _onUnstableSubscription: any /** TODO #9100 */ = null;
+  private _onStableSubscription: any /** TODO #9100 */ = null;
+  private _onMicrotaskEmptySubscription: any /** TODO #9100 */ = null;
+  private _onErrorSubscription: any /** TODO #9100 */ = null;
+
+  constructor(
+      public componentRef: ComponentRef<T>, public ngZone: NgZone|null,
+      private _autoDetect: boolean) {
+    this.changeDetectorRef = componentRef.changeDetectorRef;
+    this.elementRef = componentRef.location;
+    this.debugElement = <DebugElement>getDebugNode(this.elementRef.nativeElement);
+    this.componentInstance = componentRef.instance;
+    this.nativeElement = this.elementRef.nativeElement;
+    this.componentRef = componentRef;
+    this.ngZone = ngZone;
+
+    if (ngZone) {
+      // Create subscriptions outside the NgZone so that the callbacks run oustide
+      // of NgZone.
+      ngZone.runOutsideAngular(() => {
+        this._onUnstableSubscription =
+            ngZone.onUnstable.subscribe({next: () => { this._isStable = false; }});
+        this._onMicrotaskEmptySubscription = ngZone.onMicrotaskEmpty.subscribe({
+          next: () => {
+            if (this._autoDetect) {
+              // Do a change detection run with checkNoChanges set to true to check
+              // there are no changes on the second run.
+              this.detectChanges(true);
+            }
+          }
+        });
+        this._onStableSubscription = ngZone.onStable.subscribe({
+          next: () => {
+            this._isStable = true;
+            // Check whether there is a pending whenStable() completer to resolve.
+            if (this._promise !== null) {
+              // If so check whether there are no pending macrotasks before resolving.
+              // Do this check in the next tick so that ngZone gets a chance to update the state of
+              // pending macrotasks.
+              scheduleMicroTask(() => {
+                if (!ngZone.hasPendingMacrotasks) {
+                  if (this._promise !== null) {
+                    this._resolve !(true);
+                    this._resolve = null;
+                    this._promise = null;
+                  }
+                }
+              });
+            }
+          }
+        });
+
+        this._onErrorSubscription =
+            ngZone.onError.subscribe({next: (error: any) => { throw error; }});
+      });
+    }
+  }
+
+  private _tick(checkNoChanges: boolean) {
+    this.changeDetectorRef.detectChanges();
+    if (checkNoChanges) {
+      this.checkNoChanges();
+    }
+  }
+
+  /**
+   * Trigger a change detection cycle for the component.
+   */
+  detectChanges(checkNoChanges: boolean = true): void {
+    if (this.ngZone != null) {
+      // Run the change detection inside the NgZone so that any async tasks as part of the change
+      // detection are captured by the zone and can be waited for in isStable.
+      this.ngZone.run(() => { this._tick(checkNoChanges); });
+    } else {
+      // Running without zone. Just do the change detection.
+      this._tick(checkNoChanges);
+    }
+  }
+
+  /**
+   * Do a change detection run to make sure there were no changes.
+   */
+  checkNoChanges(): void { this.changeDetectorRef.checkNoChanges(); }
+
+  /**
+   * Set whether the fixture should autodetect changes.
+   *
+   * Also runs detectChanges once so that any existing change is detected.
+   */
+  autoDetectChanges(autoDetect: boolean = true) {
+    if (this.ngZone == null) {
+      throw new Error('Cannot call autoDetectChanges when ComponentFixtureNoNgZone is set');
+    }
+    this._autoDetect = autoDetect;
+    this.detectChanges();
+  }
+
+  /**
+   * 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; }
+
+  /**
+   * Get a promise that resolves when the fixture is stable.
+   *
+   * This can be used to resume testing after events have triggered asynchronous activity or
+   * asynchronous change detection.
+   */
+  whenStable(): Promise<any> {
+    if (this.isStable()) {
+      return Promise.resolve(false);
+    } else if (this._promise !== null) {
+      return this._promise;
+    } else {
+      this._promise = new Promise(res => { this._resolve = res; });
+      return this._promise;
+    }
+  }
+
+
+  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.
+   */
+  destroy(): void {
+    if (!this._isDestroyed) {
+      this.componentRef.destroy();
+      if (this._onUnstableSubscription != null) {
+        this._onUnstableSubscription.unsubscribe();
+        this._onUnstableSubscription = null;
+      }
+      if (this._onStableSubscription != null) {
+        this._onStableSubscription.unsubscribe();
+        this._onStableSubscription = null;
+      }
+      if (this._onMicrotaskEmptySubscription != null) {
+        this._onMicrotaskEmptySubscription.unsubscribe();
+        this._onMicrotaskEmptySubscription = null;
+      }
+      if (this._onErrorSubscription != null) {
+        this._onErrorSubscription.unsubscribe();
+        this._onErrorSubscription = null;
+      }
+      this._isDestroyed = true;
+    }
+  }
+}
+
+function scheduleMicroTask(fn: Function) {
+  Zone.current.scheduleMicroTask('scheduleMicrotask', fn);
+}
diff --git a/packages/core/testing/src/fake_async.ts b/packages/core/testing/src/fake_async.ts
new file mode 100644
index 000000000000..e7b9e221f04d
--- /dev/null
+++ b/packages/core/testing/src/fake_async.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 {discardPeriodicTasksFallback, fakeAsyncFallback, flushFallback, flushMicrotasksFallback, resetFakeAsyncZoneFallback, tickFallback} from './fake_async_fallback';
+
+const _Zone: any = typeof Zone !== 'undefined' ? Zone : null;
+const fakeAsyncTestModule = _Zone && _Zone[_Zone.__symbol__('fakeAsyncTest')];
+
+/**
+ * Clears out the shared fake async zone for a test.
+ * To be called in a global `beforeEach`.
+ *
+ * @experimental
+ */
+export function resetFakeAsyncZone(): void {
+  if (fakeAsyncTestModule) {
+    return fakeAsyncTestModule.resetFakeAsyncZone();
+  } else {
+    return resetFakeAsyncZoneFallback();
+  }
+}
+
+/**
+ * Wraps a function to be executed in the fakeAsync zone:
+ * - microtasks are manually executed by calling `flushMicrotasks()`,
+ * - timers are synchronous, `tick()` simulates the asynchronous passage of time.
+ *
+ * If there are any pending timers at the end of the function, an exception will be thrown.
+ *
+ * Can be used to wrap inject() calls.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/testing/ts/fake_async.ts region='basic'}
+ *
+ * @param fn
+ * @returns The function wrapped to be executed in the fakeAsync zone
+ *
+ * @experimental
+ */
+export function fakeAsync(fn: Function): (...args: any[]) => any {
+  if (fakeAsyncTestModule) {
+    return fakeAsyncTestModule.fakeAsync(fn);
+  } else {
+    return fakeAsyncFallback(fn);
+  }
+}
+
+/**
+ * Simulates the asynchronous passage of time for the timers in the fakeAsync zone.
+ *
+ * The microtasks queue is drained at the very start of this function and after any timer callback
+ * has been executed.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/testing/ts/fake_async.ts region='basic'}
+ *
+ * @experimental
+ */
+export function tick(millis: number = 0): void {
+  if (fakeAsyncTestModule) {
+    return fakeAsyncTestModule.tick(millis);
+  } else {
+    return tickFallback(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 {
+  if (fakeAsyncTestModule) {
+    return fakeAsyncTestModule.flush(maxTurns);
+  } else {
+    return flushFallback(maxTurns);
+  }
+}
+
+/**
+ * Discard all remaining periodic tasks.
+ *
+ * @experimental
+ */
+export function discardPeriodicTasks(): void {
+  if (fakeAsyncTestModule) {
+    return fakeAsyncTestModule.discardPeriodicTasks();
+  } else {
+    discardPeriodicTasksFallback();
+  }
+}
+
+/**
+ * Flush any pending microtasks.
+ *
+ * @experimental
+ */
+export function flushMicrotasks(): void {
+  if (fakeAsyncTestModule) {
+    return fakeAsyncTestModule.flushMicrotasks();
+  } else {
+    return flushMicrotasksFallback();
+  }
+}
diff --git a/packages/core/testing/src/fake_async_fallback.ts b/packages/core/testing/src/fake_async_fallback.ts
new file mode 100644
index 000000000000..6646db10192a
--- /dev/null
+++ b/packages/core/testing/src/fake_async_fallback.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
+ */
+
+/**
+ * fakeAsync has been moved to zone.js
+ * this file is for fallback in case old version of zone.js is used
+ */
+const _Zone: any = typeof Zone !== 'undefined' ? Zone : null;
+const FakeAsyncTestZoneSpec = _Zone && _Zone['FakeAsyncTestZoneSpec'];
+type ProxyZoneSpec = {
+  setDelegate(delegateSpec: ZoneSpec): void; getDelegate(): ZoneSpec; resetDelegate(): void;
+};
+const ProxyZoneSpec: {get(): ProxyZoneSpec; assertPresent: () => ProxyZoneSpec} =
+    _Zone && _Zone['ProxyZoneSpec'];
+
+let _fakeAsyncTestZoneSpec: any = null;
+
+/**
+ * Clears out the shared fake async zone for a test.
+ * To be called in a global `beforeEach`.
+ *
+ * @experimental
+ */
+export function resetFakeAsyncZoneFallback() {
+  _fakeAsyncTestZoneSpec = null;
+  // in node.js testing we may not have ProxyZoneSpec in which case there is nothing to reset.
+  ProxyZoneSpec && ProxyZoneSpec.assertPresent().resetDelegate();
+}
+
+let _inFakeAsyncCall = false;
+
+/**
+ * Wraps a function to be executed in the fakeAsync zone:
+ * - microtasks are manually executed by calling `flushMicrotasks()`,
+ * - timers are synchronous, `tick()` simulates the asynchronous passage of time.
+ *
+ * If there are any pending timers at the end of the function, an exception will be thrown.
+ *
+ * Can be used to wrap inject() calls.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/testing/ts/fake_async.ts region='basic'}
+ *
+ * @param fn
+ * @returns The function wrapped to be executed in the fakeAsync zone
+ *
+ * @experimental
+ */
+export function fakeAsyncFallback(fn: Function): (...args: any[]) => any {
+  // Not using an arrow function to preserve context passed from call site
+  return function(...args: any[]) {
+    const proxyZoneSpec = ProxyZoneSpec.assertPresent();
+    if (_inFakeAsyncCall) {
+      throw new Error('fakeAsync() calls can not be nested');
+    }
+    _inFakeAsyncCall = true;
+    try {
+      if (!_fakeAsyncTestZoneSpec) {
+        if (proxyZoneSpec.getDelegate() instanceof FakeAsyncTestZoneSpec) {
+          throw new Error('fakeAsync() calls can not be nested');
+        }
+
+        _fakeAsyncTestZoneSpec = new FakeAsyncTestZoneSpec();
+      }
+
+      let res: any;
+      const lastProxyZoneSpec = proxyZoneSpec.getDelegate();
+      proxyZoneSpec.setDelegate(_fakeAsyncTestZoneSpec);
+      try {
+        res = fn.apply(this, args);
+        flushMicrotasksFallback();
+      } finally {
+        proxyZoneSpec.setDelegate(lastProxyZoneSpec);
+      }
+
+      if (_fakeAsyncTestZoneSpec.pendingPeriodicTimers.length > 0) {
+        throw new Error(
+            `${_fakeAsyncTestZoneSpec.pendingPeriodicTimers.length} ` +
+            `periodic timer(s) still in the queue.`);
+      }
+
+      if (_fakeAsyncTestZoneSpec.pendingTimers.length > 0) {
+        throw new Error(
+            `${_fakeAsyncTestZoneSpec.pendingTimers.length} timer(s) still in the queue.`);
+      }
+      return res;
+    } finally {
+      _inFakeAsyncCall = false;
+      resetFakeAsyncZoneFallback();
+    }
+  };
+}
+
+function _getFakeAsyncZoneSpec(): any {
+  if (_fakeAsyncTestZoneSpec == null) {
+    throw new Error('The code should be running in the fakeAsync zone to call this function');
+  }
+  return _fakeAsyncTestZoneSpec;
+}
+
+/**
+ * Simulates the asynchronous passage of time for the timers in the fakeAsync zone.
+ *
+ * The microtasks queue is drained at the very start of this function and after any timer callback
+ * has been executed.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * {@example core/testing/ts/fake_async.ts region='basic'}
+ *
+ * @experimental
+ */
+export function tickFallback(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 flushFallback(maxTurns?: number): number {
+  return _getFakeAsyncZoneSpec().flush(maxTurns);
+}
+
+/**
+ * Discard all remaining periodic tasks.
+ *
+ * @experimental
+ */
+export function discardPeriodicTasksFallback(): void {
+  const zoneSpec = _getFakeAsyncZoneSpec();
+  zoneSpec.pendingPeriodicTimers.length = 0;
+}
+
+/**
+ * Flush any pending microtasks.
+ *
+ * @experimental
+ */
+export function flushMicrotasksFallback(): void {
+  _getFakeAsyncZoneSpec().flushMicrotasks();
+}
diff --git a/packages/core/testing/src/lang_utils.ts b/packages/core/testing/src/lang_utils.ts
new file mode 100644
index 000000000000..8b41aa56b26a
--- /dev/null
+++ b/packages/core/testing/src/lang_utils.ts
@@ -0,0 +1,15 @@
+/**
+ * @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 getTypeOf(instance: any /** TODO #9100 */) {
+  return instance.constructor;
+}
+
+export function instantiateType(type: Function, params: any[] = []) {
+  return new (<any>type)(...params);
+}
diff --git a/packages/core/testing/src/logger.ts b/packages/core/testing/src/logger.ts
new file mode 100644
index 000000000000..a0d3b9c58a5d
--- /dev/null
+++ b/packages/core/testing/src/logger.ts
@@ -0,0 +1,28 @@
+/**
+ * @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';
+
+@Injectable()
+export class Log {
+  logItems: any[];
+
+  constructor() { this.logItems = []; }
+
+  add(value: any /** TODO #9100 */): void { this.logItems.push(value); }
+
+  fn(value: any /** TODO #9100 */) {
+    return (a1: any = null, a2: any = null, a3: any = null, a4: any = null, a5: any = null) => {
+      this.logItems.push(value);
+    };
+  }
+
+  clear(): void { this.logItems = []; }
+
+  result(): string { return this.logItems.join('; '); }
+}
diff --git a/packages/core/testing/src/metadata_override.ts b/packages/core/testing/src/metadata_override.ts
new file mode 100644
index 000000000000..7773cbbf25a2
--- /dev/null
+++ b/packages/core/testing/src/metadata_override.ts
@@ -0,0 +1,18 @@
+/**
+ * @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
+ */
+
+/**
+ * Type used for modifications to metadata
+ *
+ * @experimental
+ */
+export type MetadataOverride<T> = {
+  add?: Partial<T>,
+  remove?: Partial<T>,
+  set?: Partial<T>
+};
diff --git a/packages/core/testing/src/metadata_overrider.ts b/packages/core/testing/src/metadata_overrider.ts
new file mode 100644
index 000000000000..a2c6581889d4
--- /dev/null
+++ b/packages/core/testing/src/metadata_overrider.ts
@@ -0,0 +1,131 @@
+/**
+ * @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 {ɵstringify as stringify} from '@angular/core';
+import {MetadataOverride} from './metadata_override';
+
+type StringMap = {
+  [key: string]: any
+};
+
+let _nextReferenceId = 0;
+
+export class MetadataOverrider {
+  private _references = new Map<any, string>();
+  /**
+   * Creates a new instance for the given metadata class
+   * based on an old instance and overrides.
+   */
+  overrideMetadata<C extends T, T>(
+      metadataClass: {new (options: T): C;}, oldMetadata: C, override: MetadataOverride<T>): C {
+    const props: StringMap = {};
+    if (oldMetadata) {
+      _valueProps(oldMetadata).forEach((prop) => props[prop] = (<any>oldMetadata)[prop]);
+    }
+
+    if (override.set) {
+      if (override.remove || override.add) {
+        throw new Error(`Cannot set and add/remove ${stringify(metadataClass)} at the same time!`);
+      }
+      setMetadata(props, override.set);
+    }
+    if (override.remove) {
+      removeMetadata(props, override.remove, this._references);
+    }
+    if (override.add) {
+      addMetadata(props, override.add);
+    }
+    return new metadataClass(<any>props);
+  }
+}
+
+function removeMetadata(metadata: StringMap, remove: any, references: Map<any, string>) {
+  const removeObjects = new Set<string>();
+  for (const prop in remove) {
+    const removeValue = remove[prop];
+    if (removeValue instanceof Array) {
+      removeValue.forEach(
+          (value: any) => { removeObjects.add(_propHashKey(prop, value, references)); });
+    } else {
+      removeObjects.add(_propHashKey(prop, removeValue, references));
+    }
+  }
+
+  for (const prop in metadata) {
+    const propValue = metadata[prop];
+    if (propValue instanceof Array) {
+      metadata[prop] = propValue.filter(
+          (value: any) => !removeObjects.has(_propHashKey(prop, value, references)));
+    } else {
+      if (removeObjects.has(_propHashKey(prop, propValue, references))) {
+        metadata[prop] = undefined;
+      }
+    }
+  }
+}
+
+function addMetadata(metadata: StringMap, add: any) {
+  for (const prop in add) {
+    const addValue = add[prop];
+    const propValue = metadata[prop];
+    if (propValue != null && propValue instanceof Array) {
+      metadata[prop] = propValue.concat(addValue);
+    } else {
+      metadata[prop] = addValue;
+    }
+  }
+}
+
+function setMetadata(metadata: StringMap, set: any) {
+  for (const prop in set) {
+    metadata[prop] = set[prop];
+  }
+}
+
+function _propHashKey(propName: any, propValue: any, references: Map<any, string>): string {
+  const replacer = (key: any, value: any) => {
+    if (typeof value === 'function') {
+      value = _serializeReference(value, references);
+    }
+    return value;
+  };
+
+  return `${propName}:${JSON.stringify(propValue, replacer)}`;
+}
+
+function _serializeReference(ref: any, references: Map<any, string>): string {
+  let id = references.get(ref);
+  if (!id) {
+    id = `${stringify(ref)}${_nextReferenceId++}`;
+    references.set(ref, id);
+  }
+  return id;
+}
+
+
+function _valueProps(obj: any): string[] {
+  const props: string[] = [];
+  // regular public props
+  Object.keys(obj).forEach((prop) => {
+    if (!prop.startsWith('_')) {
+      props.push(prop);
+    }
+  });
+
+  // getters
+  let proto = obj;
+  while (proto = Object.getPrototypeOf(proto)) {
+    Object.keys(proto).forEach((protoProp) => {
+      const desc = Object.getOwnPropertyDescriptor(proto, protoProp);
+      if (!protoProp.startsWith('_') && desc && 'get' in desc) {
+        props.push(protoProp);
+      }
+    });
+  }
+  return props;
+}
diff --git a/packages/core/testing/src/ng_zone_mock.ts b/packages/core/testing/src/ng_zone_mock.ts
new file mode 100644
index 000000000000..a3356d8e6b21
--- /dev/null
+++ b/packages/core/testing/src/ng_zone_mock.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 {EventEmitter, Injectable, NgZone} from '@angular/core';
+
+
+/**
+ * A mock implementation of {@link NgZone}.
+ */
+@Injectable()
+export class MockNgZone extends NgZone {
+  onStable: EventEmitter<any> = new EventEmitter(false);
+
+  constructor() { super({enableLongStackTrace: false}); }
+
+  run(fn: Function): any { return fn(); }
+
+  runOutsideAngular(fn: Function): any { return fn(); }
+
+  simulateZoneExit(): void { this.onStable.emit(null); }
+}
diff --git a/packages/core/testing/src/private_export_testing.ts b/packages/core/testing/src/private_export_testing.ts
new file mode 100644
index 000000000000..e498acf4683f
--- /dev/null
+++ b/packages/core/testing/src/private_export_testing.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 {TestingCompiler as ɵTestingCompiler, TestingCompilerFactory as ɵTestingCompilerFactory} from './test_compiler';
diff --git a/packages/core/testing/src/r3_test_bed.ts b/packages/core/testing/src/r3_test_bed.ts
new file mode 100644
index 000000000000..6958f1bd2892
--- /dev/null
+++ b/packages/core/testing/src/r3_test_bed.ts
@@ -0,0 +1,602 @@
+/**
+ * @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, Injector, NgModule, Pipe, PlatformRef, Provider, RendererFactory2, SchemaMetadata, Type, ɵNgModuleDefInternal as NgModuleDefInternal, ɵNgModuleTransitiveScopes as NgModuleTransitiveScopes, ɵRender3ComponentFactory as ComponentFactory, ɵRender3DebugRendererFactory2 as Render3DebugRendererFactory2, ɵRender3NgModuleRef as NgModuleRef, ɵWRAP_RENDERER_FACTORY2 as WRAP_RENDERER_FACTORY2, ɵcompileComponent as compileComponent, ɵcompileDirective as compileDirective, ɵcompileNgModuleDefs as compileNgModuleDefs, ɵcompilePipe as compilePipe, ɵpatchComponentDefWithScope as patchComponentDefWithScope, ɵstringify as stringify} from '@angular/core';
+
+import {ComponentFixture} from './component_fixture';
+import {MetadataOverride} from './metadata_override';
+import {ComponentResolver, DirectiveResolver, NgModuleResolver, PipeResolver, Resolver} from './resolvers';
+import {TestBed} from './test_bed';
+import {ComponentFixtureAutoDetect, TestBedStatic, TestComponentRenderer, TestModuleMetadata} from './test_bed_common';
+
+let _nextRootElementId = 0;
+
+/**
+ * @description
+ * Configures and initializes environment for unit testing and provides methods for
+ * creating components and services in unit tests.
+ *
+ * TestBed is the primary api for writing unit tests for Angular applications and libraries.
+ *
+ * Note: Use `TestBed` in tests. It will be set to either `TestBedViewEngine` or `TestBedRender3`
+ * according to the compiler used.
+ */
+export class TestBedRender3 implements Injector, TestBed {
+  /**
+   * Initialize the environment for testing with a compiler factory, a PlatformRef, and an
+   * angular module. These are common to every test in the suite.
+   *
+   * This may only be called once, to set up the common providers for the current test
+   * suite on the current platform. If you absolutely need to change the providers,
+   * first use `resetTestEnvironment`.
+   *
+   * Test modules and platforms for individual platforms are available from
+   * '@angular/<platform_name>/testing'.
+   *
+   * @experimental
+   */
+  static initTestEnvironment(
+      ngModule: Type<any>|Type<any>[], platform: PlatformRef, aotSummaries?: () => any[]): TestBed {
+    const testBed = _getTestBedRender3();
+    testBed.initTestEnvironment(ngModule, platform, aotSummaries);
+    return testBed;
+  }
+
+  /**
+   * Reset the providers for the test injector.
+   *
+   * @experimental
+   */
+  static resetTestEnvironment(): void { _getTestBedRender3().resetTestEnvironment(); }
+
+  static configureCompiler(config: {providers?: any[]; useJit?: boolean;}): TestBedStatic {
+    _getTestBedRender3().configureCompiler(config);
+    return TestBedRender3 as any as TestBedStatic;
+  }
+
+  /**
+   * Allows overriding default providers, directives, pipes, modules of the test injector,
+   * which are defined in test_injector.js
+   */
+  static configureTestingModule(moduleDef: TestModuleMetadata): TestBedStatic {
+    _getTestBedRender3().configureTestingModule(moduleDef);
+    return TestBedRender3 as any as TestBedStatic;
+  }
+
+  /**
+   * Compile components with a `templateUrl` for the test's NgModule.
+   * It is necessary to call this function
+   * as fetching urls is asynchronous.
+   */
+  static compileComponents(): Promise<any> { return _getTestBedRender3().compileComponents(); }
+
+  static overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): TestBedStatic {
+    _getTestBedRender3().overrideModule(ngModule, override);
+    return TestBedRender3 as any as TestBedStatic;
+  }
+
+  static overrideComponent(component: Type<any>, override: MetadataOverride<Component>):
+      TestBedStatic {
+    _getTestBedRender3().overrideComponent(component, override);
+    return TestBedRender3 as any as TestBedStatic;
+  }
+
+  static overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>):
+      TestBedStatic {
+    _getTestBedRender3().overrideDirective(directive, override);
+    return TestBedRender3 as any as TestBedStatic;
+  }
+
+  static overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): TestBedStatic {
+    _getTestBedRender3().overridePipe(pipe, override);
+    return TestBedRender3 as any as TestBedStatic;
+  }
+
+  static overrideTemplate(component: Type<any>, template: string): TestBedStatic {
+    _getTestBedRender3().overrideComponent(component, {set: {template, templateUrl: null !}});
+    return TestBedRender3 as any as TestBedStatic;
+  }
+
+  /**
+   * Overrides the template of the given component, compiling the template
+   * in the context of the TestingModule.
+   *
+   * Note: This works for JIT and AOTed components as well.
+   */
+  static overrideTemplateUsingTestingModule(component: Type<any>, template: string): TestBedStatic {
+    _getTestBedRender3().overrideTemplateUsingTestingModule(component, template);
+    return TestBedRender3 as any as TestBedStatic;
+  }
+
+  overrideTemplateUsingTestingModule(component: Type<any>, template: string): void {
+    throw new Error('Render3TestBed.overrideTemplateUsingTestingModule is not implemented yet');
+  }
+
+  static overrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): TestBedStatic;
+  static overrideProvider(token: any, provider: {useValue: any;}): TestBedStatic;
+  static overrideProvider(token: any, provider: {
+    useFactory?: Function,
+    useValue?: any,
+    deps?: any[],
+  }): TestBedStatic {
+    _getTestBedRender3().overrideProvider(token, provider);
+    return TestBedRender3 as any as TestBedStatic;
+  }
+
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   *
+   * @deprecated as it makes all NgModules lazy. Introduced only for migrating off of it.
+   */
+  static deprecatedOverrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): void;
+  static deprecatedOverrideProvider(token: any, provider: {useValue: any;}): void;
+  static deprecatedOverrideProvider(token: any, provider: {
+    useFactory?: Function,
+    useValue?: any,
+    deps?: any[],
+  }): TestBedStatic {
+    throw new Error('Render3TestBed.deprecatedOverrideProvider is not implemented');
+  }
+
+  static get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
+    return _getTestBedRender3().get(token, notFoundValue);
+  }
+
+  static createComponent<T>(component: Type<T>): ComponentFixture<T> {
+    return _getTestBedRender3().createComponent(component);
+  }
+
+  static resetTestingModule(): TestBedStatic {
+    _getTestBedRender3().resetTestingModule();
+    return TestBedRender3 as any as TestBedStatic;
+  }
+
+  // Properties
+
+  platform: PlatformRef = null !;
+  ngModule: Type<any>|Type<any>[] = null !;
+
+  // metadata overrides
+  private _moduleOverrides: [Type<any>, MetadataOverride<NgModule>][] = [];
+  private _componentOverrides: [Type<any>, MetadataOverride<Component>][] = [];
+  private _directiveOverrides: [Type<any>, MetadataOverride<Directive>][] = [];
+  private _pipeOverrides: [Type<any>, MetadataOverride<Pipe>][] = [];
+  private _providerOverrides: Provider[] = [];
+  private _rootProviderOverrides: Provider[] = [];
+
+  // test module configuration
+  private _providers: Provider[] = [];
+  private _declarations: Array<Type<any>|any[]|any> = [];
+  private _imports: Array<Type<any>|any[]|any> = [];
+  private _schemas: Array<SchemaMetadata|any[]> = [];
+
+  private _activeFixtures: ComponentFixture<any>[] = [];
+
+  private _moduleRef: NgModuleRef<any> = null !;
+
+  private _instantiated: boolean = false;
+
+  /**
+   * Initialize the environment for testing with a compiler factory, a PlatformRef, and an
+   * angular module. These are common to every test in the suite.
+   *
+   * This may only be called once, to set up the common providers for the current test
+   * suite on the current platform. If you absolutely need to change the providers,
+   * first use `resetTestEnvironment`.
+   *
+   * Test modules and platforms for individual platforms are available from
+   * '@angular/<platform_name>/testing'.
+   *
+   * @experimental
+   */
+  initTestEnvironment(
+      ngModule: Type<any>|Type<any>[], platform: PlatformRef, aotSummaries?: () => any[]): void {
+    if (this.platform || this.ngModule) {
+      throw new Error('Cannot set base providers because it has already been called');
+    }
+    this.platform = platform;
+    this.ngModule = ngModule;
+  }
+
+  /**
+   * Reset the providers for the test injector.
+   *
+   * @experimental
+   */
+  resetTestEnvironment(): void {
+    this.resetTestingModule();
+    this.platform = null !;
+    this.ngModule = null !;
+  }
+
+  resetTestingModule(): void {
+    // reset metadata overrides
+    this._moduleOverrides = [];
+    this._componentOverrides = [];
+    this._directiveOverrides = [];
+    this._pipeOverrides = [];
+    this._providerOverrides = [];
+    this._rootProviderOverrides = [];
+
+    // reset test module config
+    this._providers = [];
+    this._declarations = [];
+    this._imports = [];
+    this._schemas = [];
+    this._moduleRef = null !;
+
+    this._instantiated = false;
+    this._activeFixtures.forEach((fixture) => {
+      try {
+        fixture.destroy();
+      } catch (e) {
+        console.error('Error during cleanup of component', {
+          component: fixture.componentInstance,
+          stacktrace: e,
+        });
+      }
+    });
+    this._activeFixtures = [];
+  }
+
+  configureCompiler(config: {providers?: any[]; useJit?: boolean;}): void {
+    throw new Error('the Render3 compiler is not configurable !');
+  }
+
+  configureTestingModule(moduleDef: TestModuleMetadata): void {
+    this._assertNotInstantiated('R3TestBed.configureTestingModule', 'configure the test module');
+    if (moduleDef.providers) {
+      this._providers.push(...moduleDef.providers);
+    }
+    if (moduleDef.declarations) {
+      this._declarations.push(...moduleDef.declarations);
+    }
+    if (moduleDef.imports) {
+      this._imports.push(...moduleDef.imports);
+    }
+    if (moduleDef.schemas) {
+      this._schemas.push(...moduleDef.schemas);
+    }
+  }
+
+  // TODO(vicb): implement
+  compileComponents(): Promise<any> {
+    throw new Error('Render3TestBed.compileComponents is not implemented yet');
+  }
+
+  get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
+    this._initIfNeeded();
+    if (token === TestBedRender3) {
+      return this;
+    }
+    return this._moduleRef.injector.get(token, notFoundValue);
+  }
+
+  execute(tokens: any[], fn: Function, context?: any): any {
+    this._initIfNeeded();
+    const params = tokens.map(t => this.get(t));
+    return fn.apply(context, params);
+  }
+
+  overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): void {
+    this._assertNotInstantiated('overrideModule', 'override module metadata');
+    this._moduleOverrides.push([ngModule, override]);
+  }
+
+  overrideComponent(component: Type<any>, override: MetadataOverride<Component>): void {
+    this._assertNotInstantiated('overrideComponent', 'override component metadata');
+    this._componentOverrides.push([component, override]);
+  }
+
+  overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): void {
+    this._assertNotInstantiated('overrideDirective', 'override directive metadata');
+    this._directiveOverrides.push([directive, override]);
+  }
+
+  overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): void {
+    this._assertNotInstantiated('overridePipe', 'override pipe metadata');
+    this._pipeOverrides.push([pipe, override]);
+  }
+
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   */
+  overrideProvider(token: any, provider: {useFactory?: Function, useValue?: any, deps?: any[]}):
+      void {
+    const isRoot =
+        (typeof token !== 'string' && token.ngInjectableDef &&
+         token.ngInjectableDef.providedIn === 'root');
+    const overrides = isRoot ? this._rootProviderOverrides : this._providerOverrides;
+
+    if (provider.useFactory) {
+      overrides.push({provide: token, useFactory: provider.useFactory, deps: provider.deps || []});
+    } else {
+      overrides.push({provide: token, useValue: provider.useValue});
+    }
+  }
+
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   *
+   * @deprecated as it makes all NgModules lazy. Introduced only for migrating off of it.
+   */
+  deprecatedOverrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): void;
+  deprecatedOverrideProvider(token: any, provider: {useValue: any;}): void;
+  deprecatedOverrideProvider(
+      token: any, provider: {useFactory?: Function, useValue?: any, deps?: any[]}): void {
+    throw new Error('No implemented in IVY');
+  }
+
+  createComponent<T>(type: Type<T>): ComponentFixture<T> {
+    this._initIfNeeded();
+
+    const testComponentRenderer: TestComponentRenderer = this.get(TestComponentRenderer);
+    const rootElId = `root${_nextRootElementId++}`;
+    testComponentRenderer.insertRootElement(rootElId);
+
+    const componentDef = (type as any).ngComponentDef;
+
+    if (!componentDef) {
+      throw new Error(
+          `It looks like '${stringify(type)}' has not been IVY compiled - it has no 'ngComponentDef' field`);
+    }
+
+    const componentFactory = new ComponentFactory(componentDef);
+    const componentRef =
+        componentFactory.create(Injector.NULL, [], `#${rootElId}`, this._moduleRef);
+    const autoDetect: boolean = this.get(ComponentFixtureAutoDetect, false);
+    const fixture = new ComponentFixture<any>(componentRef, null, autoDetect);
+    this._activeFixtures.push(fixture);
+    return fixture;
+  }
+
+  // internal methods
+
+  private _initIfNeeded(): void {
+    if (this._instantiated) {
+      return;
+    }
+
+    const resolvers = this._getResolvers();
+    const testModuleType = this._createTestModule();
+
+    compileNgModule(testModuleType, resolvers);
+
+    const parentInjector = this.platform.injector;
+    this._moduleRef = new NgModuleRef(testModuleType, parentInjector);
+
+    this._instantiated = true;
+  }
+
+  // creates resolvers taking overrides into account
+  private _getResolvers() {
+    const module = new NgModuleResolver();
+    module.setOverrides(this._moduleOverrides);
+
+    const component = new ComponentResolver();
+    component.setOverrides(this._componentOverrides);
+
+    const directive = new DirectiveResolver();
+    directive.setOverrides(this._directiveOverrides);
+
+    const pipe = new PipeResolver();
+    pipe.setOverrides(this._pipeOverrides);
+
+    return {module, component, directive, pipe};
+  }
+
+  private _assertNotInstantiated(methodName: string, methodDescription: string) {
+    if (this._instantiated) {
+      throw new Error(
+          `Cannot ${methodDescription} when the test module has already been instantiated. ` +
+          `Make sure you are not using \`inject\` before \`${methodName}\`.`);
+    }
+  }
+
+  private _createTestModule(): Type<any> {
+    const rootProviderOverrides = this._rootProviderOverrides;
+
+    const rendererFactoryWrapper = {
+      provide: WRAP_RENDERER_FACTORY2,
+      useFactory: () => (rf: RendererFactory2) => new Render3DebugRendererFactory2(rf),
+    };
+
+    @NgModule({
+      providers: [...rootProviderOverrides, rendererFactoryWrapper],
+      jit: true,
+    })
+    class RootScopeModule {
+    }
+
+    const providers = [...this._providers, ...this._providerOverrides];
+
+    const declarations = this._declarations;
+    const imports = [RootScopeModule, this.ngModule, this._imports];
+    const schemas = this._schemas;
+
+    @NgModule({providers, declarations, imports, schemas, jit: true})
+    class DynamicTestModule {
+    }
+
+    return DynamicTestModule;
+  }
+}
+
+let testBed: TestBedRender3;
+
+export function _getTestBedRender3(): TestBedRender3 {
+  return testBed = testBed || new TestBedRender3();
+}
+
+
+// Module compiler
+
+const EMPTY_ARRAY: Type<any>[] = [];
+
+// Resolvers for Angular decorators
+type Resolvers = {
+  module: Resolver<NgModule>,
+  component: Resolver<Directive>,
+  directive: Resolver<Component>,
+  pipe: Resolver<Pipe>,
+};
+
+function compileNgModule(moduleType: Type<any>, resolvers: Resolvers): void {
+  const ngModule = resolvers.module.resolve(moduleType);
+
+  if (ngModule === null) {
+    throw new Error(`${stringify(moduleType)} has not @NgModule annotation`);
+  }
+
+  compileNgModuleDefs(moduleType, ngModule);
+
+  const declarations: Type<any>[] = flatten(ngModule.declarations || EMPTY_ARRAY);
+
+  const compiledComponents: Type<any>[] = [];
+
+  // Compile the components, directives and pipes declared by this module
+  declarations.forEach(declaration => {
+    const component = resolvers.component.resolve(declaration);
+    if (component) {
+      compileComponent(declaration, component);
+      compiledComponents.push(declaration);
+      return;
+    }
+
+    const directive = resolvers.directive.resolve(declaration);
+    if (directive) {
+      compileDirective(declaration, directive);
+      return;
+    }
+
+    const pipe = resolvers.pipe.resolve(declaration);
+    if (pipe) {
+      compilePipe(declaration, pipe);
+      return;
+    }
+  });
+
+  // Compile transitive modules, components, directives and pipes
+  const transitiveScope = transitiveScopesFor(moduleType, resolvers);
+  compiledComponents.forEach(
+      cmp => patchComponentDefWithScope((cmp as any).ngComponentDef, transitiveScope));
+}
+
+/**
+ * Compute the pair of transitive scopes (compilation scope and exported scope) for a given module.
+ *
+ * This operation is memoized and the result is cached on the module's definition. It can be called
+ * on modules with components that have not fully compiled yet, but the result should not be used
+ * until they have.
+ */
+function transitiveScopesFor<T>(
+    moduleType: Type<T>, resolvers: Resolvers): NgModuleTransitiveScopes {
+  if (!isNgModule(moduleType)) {
+    throw new Error(`${moduleType.name} does not have an ngModuleDef`);
+  }
+  const def = moduleType.ngModuleDef;
+
+  if (def.transitiveCompileScopes !== null) {
+    return def.transitiveCompileScopes;
+  }
+
+  const scopes: NgModuleTransitiveScopes = {
+    compilation: {
+      directives: new Set<any>(),
+      pipes: new Set<any>(),
+    },
+    exported: {
+      directives: new Set<any>(),
+      pipes: new Set<any>(),
+    },
+  };
+
+  def.declarations.forEach(declared => {
+    const declaredWithDefs = declared as Type<any>& { ngPipeDef?: any; };
+
+    if (declaredWithDefs.ngPipeDef !== undefined) {
+      scopes.compilation.pipes.add(declared);
+    } else {
+      scopes.compilation.directives.add(declared);
+    }
+  });
+
+  def.imports.forEach(<I>(imported: Type<I>) => {
+    const ngModule = resolvers.module.resolve(imported);
+
+    if (ngModule === null) {
+      throw new Error(`Importing ${imported.name} which does not have an @ngModule`);
+    } else {
+      compileNgModule(imported, resolvers);
+    }
+
+    // When this module imports another, the imported module's exported directives and pipes are
+    // added to the compilation scope of this module.
+    const importedScope = transitiveScopesFor(imported, resolvers);
+    importedScope.exported.directives.forEach(entry => scopes.compilation.directives.add(entry));
+    importedScope.exported.pipes.forEach(entry => scopes.compilation.pipes.add(entry));
+  });
+
+  def.exports.forEach(<E>(exported: Type<E>) => {
+    const exportedTyped = exported as Type<E>& {
+      // Components, Directives, NgModules, and Pipes can all be exported.
+      ngComponentDef?: any;
+      ngDirectiveDef?: any;
+      ngModuleDef?: NgModuleDefInternal<E>;
+      ngPipeDef?: any;
+    };
+
+    // Either the type is a module, a pipe, or a component/directive (which may not have an
+    // ngComponentDef as it might be compiled asynchronously).
+    if (isNgModule(exportedTyped)) {
+      // When this module exports another, the exported module's exported directives and pipes are
+      // added to both the compilation and exported scopes of this module.
+      const exportedScope = transitiveScopesFor(exportedTyped, resolvers);
+      exportedScope.exported.directives.forEach(entry => {
+        scopes.compilation.directives.add(entry);
+        scopes.exported.directives.add(entry);
+      });
+      exportedScope.exported.pipes.forEach(entry => {
+        scopes.compilation.pipes.add(entry);
+        scopes.exported.pipes.add(entry);
+      });
+    } else if (exportedTyped.ngPipeDef !== undefined) {
+      scopes.exported.pipes.add(exportedTyped);
+    } else {
+      scopes.exported.directives.add(exportedTyped);
+    }
+  });
+
+  def.transitiveCompileScopes = scopes;
+  return scopes;
+}
+
+function flatten<T>(values: any[]): T[] {
+  const out: T[] = [];
+  values.forEach(value => {
+    if (Array.isArray(value)) {
+      out.push(...flatten<T>(value));
+    } else {
+      out.push(value);
+    }
+  });
+  return out;
+}
+
+function isNgModule<T>(value: Type<T>): value is Type<T>&{ngModuleDef: NgModuleDefInternal<T>} {
+  return (value as{ngModuleDef?: NgModuleDefInternal<T>}).ngModuleDef !== undefined;
+}
diff --git a/packages/core/testing/src/resolvers.ts b/packages/core/testing/src/resolvers.ts
new file mode 100644
index 000000000000..262d387d0269
--- /dev/null
+++ b/packages/core/testing/src/resolvers.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, Directive, NgModule, Pipe, Type, ɵReflectionCapabilities as ReflectionCapabilities} from '@angular/core';
+
+import {MetadataOverride} from './metadata_override';
+import {MetadataOverrider} from './metadata_overrider';
+
+const reflection = new ReflectionCapabilities();
+
+/**
+ * Base interface to resolve `@Component`, `@Directive`, `@Pipe` and `@NgModule`.
+ */
+export interface Resolver<T> { resolve(type: Type<any>): T|null; }
+
+/**
+ * Allows to override ivy metadata for tests (via the `TestBed`).
+ */
+abstract class OverrideResolver<T> implements Resolver<T> {
+  private overrides = new Map<Type<any>, MetadataOverride<T>>();
+  private resolved = new Map<Type<any>, T|null>();
+
+  abstract get type(): any;
+
+  setOverrides(overrides: Array<[Type<any>, MetadataOverride<T>]>) {
+    this.overrides.clear();
+    overrides.forEach(([type, override]) => this.overrides.set(type, override));
+  }
+
+  getAnnotation(type: Type<any>): T|null {
+    return reflection.annotations(type).find(a => a instanceof this.type) || null;
+  }
+
+  resolve(type: Type<any>): T|null {
+    let resolved = this.resolved.get(type) || null;
+
+    if (!resolved) {
+      resolved = this.getAnnotation(type);
+      if (resolved) {
+        const override = this.overrides.get(type);
+        if (override) {
+          const overrider = new MetadataOverrider();
+          resolved = overrider.overrideMetadata(this.type, resolved, override);
+        }
+      }
+      this.resolved.set(type, resolved);
+    }
+
+    return resolved;
+  }
+}
+
+
+export class DirectiveResolver extends OverrideResolver<Directive> {
+  get type() { return Directive; }
+}
+
+export class ComponentResolver extends OverrideResolver<Component> {
+  get type() { return Component; }
+}
+
+export class PipeResolver extends OverrideResolver<Pipe> {
+  get type() { return Pipe; }
+}
+
+export class NgModuleResolver extends OverrideResolver<NgModule> {
+  get type() { return NgModule; }
+}
diff --git a/packages/core/testing/src/test_bed.ts b/packages/core/testing/src/test_bed.ts
new file mode 100644
index 000000000000..71fb3605cc51
--- /dev/null
+++ b/packages/core/testing/src/test_bed.ts
@@ -0,0 +1,741 @@
+/**
+ * @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 {ApplicationInitStatus, CompilerOptions, Component, Directive, Injector, NgModule, NgModuleFactory, NgModuleRef, NgZone, Optional, Pipe, PlatformRef, Provider, SchemaMetadata, SkipSelf, StaticProvider, Type, ɵAPP_ROOT as APP_ROOT, ɵDepFlags as DepFlags, ɵNodeFlags as NodeFlags, ɵclearOverrides as clearOverrides, ɵgetComponentViewDefinitionFactory as getComponentViewDefinitionFactory, ɵivyEnabled as ivyEnabled, ɵoverrideComponentView as overrideComponentView, ɵ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';
+import {TestBedRender3, _getTestBedRender3} from './r3_test_bed';
+import {ComponentFixtureAutoDetect, ComponentFixtureNoNgZone, TestBedStatic, TestComponentRenderer, TestModuleMetadata} from './test_bed_common';
+import {TestingCompiler, TestingCompilerFactory} from './test_compiler';
+
+const UNDEFINED = new Object();
+
+
+let _nextRootElementId = 0;
+
+export interface TestBed {
+  platform: PlatformRef;
+
+  ngModule: Type<any>|Type<any>[];
+
+  /**
+   * Initialize the environment for testing with a compiler factory, a PlatformRef, and an
+   * angular module. These are common to every test in the suite.
+   *
+   * This may only be called once, to set up the common providers for the current test
+   * suite on the current platform. If you absolutely need to change the providers,
+   * first use `resetTestEnvironment`.
+   *
+   * Test modules and platforms for individual platforms are available from
+   * '@angular/<platform_name>/testing'.
+   *
+   * @experimental
+   */
+  initTestEnvironment(
+      ngModule: Type<any>|Type<any>[], platform: PlatformRef, aotSummaries?: () => any[]): void;
+
+  /**
+   * Reset the providers for the test injector.
+   *
+   * @experimental
+   */
+  resetTestEnvironment(): void;
+
+  resetTestingModule(): void;
+
+  configureCompiler(config: {providers?: any[], useJit?: boolean}): void;
+
+  configureTestingModule(moduleDef: TestModuleMetadata): void;
+
+  compileComponents(): Promise<any>;
+
+  get(token: any, notFoundValue?: any): any;
+
+  execute(tokens: any[], fn: Function, context?: any): any;
+
+  overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): void;
+
+  overrideComponent(component: Type<any>, override: MetadataOverride<Component>): void;
+
+  overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): void;
+
+  overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): void;
+
+  /**
+   * 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;
+
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   *
+   * @deprecated as it makes all NgModules lazy. Introduced only for migrating off of it.
+   */
+  deprecatedOverrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): void;
+  deprecatedOverrideProvider(token: any, provider: {useValue: any;}): void;
+  deprecatedOverrideProvider(
+      token: any, provider: {useFactory?: Function, useValue?: any, deps?: any[]}): void;
+
+
+  overrideTemplateUsingTestingModule(component: Type<any>, template: string): void;
+
+  createComponent<T>(component: Type<T>): ComponentFixture<T>;
+}
+
+/**
+ * @description
+ * Configures and initializes environment for unit testing and provides methods for
+ * creating components and services in unit tests.
+ *
+ * `TestBed` is the primary api for writing unit tests for Angular applications and libraries.
+ *
+ * Note: Use `TestBed` in tests. It will be set to either `TestBedViewEngine` or `TestBedRender3`
+ * according to the compiler used.
+ */
+export class TestBedViewEngine implements Injector, TestBed {
+  /**
+   * Initialize the environment for testing with a compiler factory, a PlatformRef, and an
+   * angular module. These are common to every test in the suite.
+   *
+   * This may only be called once, to set up the common providers for the current test
+   * suite on the current platform. If you absolutely need to change the providers,
+   * first use `resetTestEnvironment`.
+   *
+   * Test modules and platforms for individual platforms are available from
+   * '@angular/<platform_name>/testing'.
+   *
+   * @experimental
+   */
+  static initTestEnvironment(
+      ngModule: Type<any>|Type<any>[], platform: PlatformRef,
+      aotSummaries?: () => any[]): TestBedViewEngine {
+    const testBed = _getTestBedViewEngine();
+    testBed.initTestEnvironment(ngModule, platform, aotSummaries);
+    return testBed;
+  }
+
+  /**
+   * Reset the providers for the test injector.
+   *
+   * @experimental
+   */
+  static resetTestEnvironment(): void { _getTestBedViewEngine().resetTestEnvironment(); }
+
+  static resetTestingModule(): TestBedStatic {
+    _getTestBedViewEngine().resetTestingModule();
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  /**
+   * Allows overriding default compiler providers and settings
+   * which are defined in test_injector.js
+   */
+  static configureCompiler(config: {providers?: any[]; useJit?: boolean;}): TestBedStatic {
+    _getTestBedViewEngine().configureCompiler(config);
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  /**
+   * Allows overriding default providers, directives, pipes, modules of the test injector,
+   * which are defined in test_injector.js
+   */
+  static configureTestingModule(moduleDef: TestModuleMetadata): TestBedStatic {
+    _getTestBedViewEngine().configureTestingModule(moduleDef);
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  /**
+   * Compile components with a `templateUrl` for the test's NgModule.
+   * It is necessary to call this function
+   * as fetching urls is asynchronous.
+   */
+  static compileComponents(): Promise<any> { return getTestBed().compileComponents(); }
+
+  static overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): TestBedStatic {
+    _getTestBedViewEngine().overrideModule(ngModule, override);
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  static overrideComponent(component: Type<any>, override: MetadataOverride<Component>):
+      TestBedStatic {
+    _getTestBedViewEngine().overrideComponent(component, override);
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  static overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>):
+      TestBedStatic {
+    _getTestBedViewEngine().overrideDirective(directive, override);
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  static overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): TestBedStatic {
+    _getTestBedViewEngine().overridePipe(pipe, override);
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  static overrideTemplate(component: Type<any>, template: string): TestBedStatic {
+    _getTestBedViewEngine().overrideComponent(component, {set: {template, templateUrl: null !}});
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  /**
+   * Overrides the template of the given component, compiling the template
+   * in the context of the TestingModule.
+   *
+   * Note: This works for JIT and AOTed components as well.
+   */
+  static overrideTemplateUsingTestingModule(component: Type<any>, template: string): TestBedStatic {
+    _getTestBedViewEngine().overrideTemplateUsingTestingModule(component, template);
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   *
+   * Note: This works for JIT and AOTed components as well.
+   */
+  static overrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): TestBedStatic;
+  static overrideProvider(token: any, provider: {useValue: any;}): TestBedStatic;
+  static overrideProvider(token: any, provider: {
+    useFactory?: Function,
+    useValue?: any,
+    deps?: any[],
+  }): TestBedStatic {
+    _getTestBedViewEngine().overrideProvider(token, provider as any);
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   *
+   * @deprecated as it makes all NgModules lazy. Introduced only for migrating off of it.
+   */
+  static deprecatedOverrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): void;
+  static deprecatedOverrideProvider(token: any, provider: {useValue: any;}): void;
+  static deprecatedOverrideProvider(token: any, provider: {
+    useFactory?: Function,
+    useValue?: any,
+    deps?: any[],
+  }): TestBedStatic {
+    _getTestBedViewEngine().deprecatedOverrideProvider(token, provider as any);
+    return TestBedViewEngine as any as TestBedStatic;
+  }
+
+  static get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND) {
+    return _getTestBedViewEngine().get(token, notFoundValue);
+  }
+
+  static createComponent<T>(component: Type<T>): ComponentFixture<T> {
+    return _getTestBedViewEngine().createComponent(component);
+  }
+
+  private _instantiated: boolean = false;
+
+  private _compiler: TestingCompiler = null !;
+  private _moduleRef: NgModuleRef<any> = null !;
+  private _moduleFactory: NgModuleFactory<any> = null !;
+
+  private _compilerOptions: CompilerOptions[] = [];
+
+  private _moduleOverrides: [Type<any>, MetadataOverride<NgModule>][] = [];
+  private _componentOverrides: [Type<any>, MetadataOverride<Component>][] = [];
+  private _directiveOverrides: [Type<any>, MetadataOverride<Directive>][] = [];
+  private _pipeOverrides: [Type<any>, MetadataOverride<Pipe>][] = [];
+
+  private _providers: Provider[] = [];
+  private _declarations: Array<Type<any>|any[]|any> = [];
+  private _imports: Array<Type<any>|any[]|any> = [];
+  private _schemas: Array<SchemaMetadata|any[]> = [];
+  private _activeFixtures: ComponentFixture<any>[] = [];
+
+  private _testEnvAotSummaries: () => any[] = () => [];
+  private _aotSummaries: Array<() => any[]> = [];
+  private _templateOverrides: Array<{component: Type<any>, templateOf: Type<any>}> = [];
+
+  private _isRoot: boolean = true;
+  private _rootProviderOverrides: Provider[] = [];
+
+  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.
+   *
+   * This may only be called once, to set up the common providers for the current test
+   * suite on the current platform. If you absolutely need to change the providers,
+   * first use `resetTestEnvironment`.
+   *
+   * Test modules and platforms for individual platforms are available from
+   * '@angular/<platform_name>/testing'.
+   *
+   * @experimental
+   */
+  initTestEnvironment(
+      ngModule: Type<any>|Type<any>[], platform: PlatformRef, aotSummaries?: () => any[]): void {
+    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._testEnvAotSummaries = aotSummaries;
+    }
+  }
+
+  /**
+   * Reset the providers for the test injector.
+   *
+   * @experimental
+   */
+  resetTestEnvironment(): void {
+    this.resetTestingModule();
+    this.platform = null !;
+    this.ngModule = null !;
+    this._testEnvAotSummaries = () => [];
+  }
+
+  resetTestingModule(): void {
+    clearOverrides();
+    this._aotSummaries = [];
+    this._templateOverrides = [];
+    this._compiler = null !;
+    this._moduleOverrides = [];
+    this._componentOverrides = [];
+    this._directiveOverrides = [];
+    this._pipeOverrides = [];
+
+    this._isRoot = true;
+    this._rootProviderOverrides = [];
+
+    this._moduleRef = null !;
+    this._moduleFactory = null !;
+    this._compilerOptions = [];
+    this._providers = [];
+    this._declarations = [];
+    this._imports = [];
+    this._schemas = [];
+    this._instantiated = false;
+    this._activeFixtures.forEach((fixture) => {
+      try {
+        fixture.destroy();
+      } catch (e) {
+        console.error('Error during cleanup of component', {
+          component: fixture.componentInstance,
+          stacktrace: e,
+        });
+      }
+    });
+    this._activeFixtures = [];
+  }
+
+  configureCompiler(config: {providers?: any[], useJit?: boolean}): void {
+    this._assertNotInstantiated('TestBed.configureCompiler', 'configure the compiler');
+    this._compilerOptions.push(config);
+  }
+
+  configureTestingModule(moduleDef: TestModuleMetadata): void {
+    this._assertNotInstantiated('TestBed.configureTestingModule', 'configure the test module');
+    if (moduleDef.providers) {
+      this._providers.push(...moduleDef.providers);
+    }
+    if (moduleDef.declarations) {
+      this._declarations.push(...moduleDef.declarations);
+    }
+    if (moduleDef.imports) {
+      this._imports.push(...moduleDef.imports);
+    }
+    if (moduleDef.schemas) {
+      this._schemas.push(...moduleDef.schemas);
+    }
+    if (moduleDef.aotSummaries) {
+      this._aotSummaries.push(moduleDef.aotSummaries);
+    }
+  }
+
+  compileComponents(): Promise<any> {
+    if (this._moduleFactory || this._instantiated) {
+      return Promise.resolve(null);
+    }
+
+    const moduleType = this._createCompilerAndModule();
+    return this._compiler.compileModuleAndAllComponentsAsync(moduleType)
+        .then((moduleAndComponentFactories) => {
+          this._moduleFactory = moduleAndComponentFactories.ngModuleFactory;
+        });
+  }
+
+  private _initIfNeeded(): void {
+    if (this._instantiated) {
+      return;
+    }
+    if (!this._moduleFactory) {
+      try {
+        const moduleType = this._createCompilerAndModule();
+        this._moduleFactory =
+            this._compiler.compileModuleAndAllComponentsSync(moduleType).ngModuleFactory;
+      } catch (e) {
+        const errorCompType = this._compiler.getComponentFromError(e);
+        if (errorCompType) {
+          throw new Error(
+              `This test module uses the component ${stringify(errorCompType)} which is using a "templateUrl" or "styleUrls", but they were never compiled. ` +
+              `Please call "TestBed.compileComponents" before your test.`);
+        } else {
+          throw e;
+        }
+      }
+    }
+    for (const {component, templateOf} of this._templateOverrides) {
+      const compFactory = this._compiler.getComponentFactory(templateOf);
+      overrideComponentView(component, compFactory);
+    }
+
+    const ngZone = new NgZone({enableLongStackTrace: true});
+    const providers: StaticProvider[] = [{provide: NgZone, useValue: ngZone}];
+    const ngZoneInjector = Injector.create({
+      providers: providers,
+      parent: this.platform.injector,
+      name: this._moduleFactory.moduleType.name
+    });
+    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;
+  }
+
+  private _createCompilerAndModule(): Type<any> {
+    const providers = this._providers.concat([{provide: TestBed, useValue: this}]);
+    const declarations =
+        [...this._declarations, ...this._templateOverrides.map(entry => entry.templateOf)];
+
+    const rootScopeImports = [];
+    const rootProviderOverrides = this._rootProviderOverrides;
+    if (this._isRoot) {
+      @NgModule({
+        providers: [
+          ...rootProviderOverrides,
+        ],
+        jit: true,
+      })
+      class RootScopeModule {
+      }
+      rootScopeImports.push(RootScopeModule);
+    }
+    providers.push({provide: APP_ROOT, useValue: this._isRoot});
+
+    const imports = [rootScopeImports, this.ngModule, this._imports];
+    const schemas = this._schemas;
+
+    @NgModule({providers, declarations, imports, schemas, jit: true})
+    class DynamicTestModule {
+    }
+
+    const compilerFactory: TestingCompilerFactory =
+        this.platform.injector.get(TestingCompilerFactory);
+    this._compiler = compilerFactory.createTestingCompiler(this._compilerOptions);
+    for (const summary of [this._testEnvAotSummaries, ...this._aotSummaries]) {
+      this._compiler.loadAotSummaries(summary);
+    }
+    this._moduleOverrides.forEach((entry) => this._compiler.overrideModule(entry[0], entry[1]));
+    this._componentOverrides.forEach(
+        (entry) => this._compiler.overrideComponent(entry[0], entry[1]));
+    this._directiveOverrides.forEach(
+        (entry) => this._compiler.overrideDirective(entry[0], entry[1]));
+    this._pipeOverrides.forEach((entry) => this._compiler.overridePipe(entry[0], entry[1]));
+    return DynamicTestModule;
+  }
+
+  private _assertNotInstantiated(methodName: string, methodDescription: string) {
+    if (this._instantiated) {
+      throw new Error(
+          `Cannot ${methodDescription} when the test module has already been instantiated. ` +
+          `Make sure you are not using \`inject\` before \`${methodName}\`.`);
+    }
+  }
+
+  get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
+    this._initIfNeeded();
+    if (token === TestBed) {
+      return this;
+    }
+    // Tests can inject things from the ng module and from the compiler,
+    // but the ng module can't inject things from the compiler and vice versa.
+    const result = this._moduleRef.injector.get(token, UNDEFINED);
+    return result === UNDEFINED ? this._compiler.injector.get(token, notFoundValue) : result;
+  }
+
+  execute(tokens: any[], fn: Function, context?: any): any {
+    this._initIfNeeded();
+    const params = tokens.map(t => this.get(t));
+    return fn.apply(context, params);
+  }
+
+  overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): void {
+    this._assertNotInstantiated('overrideModule', 'override module metadata');
+    this._moduleOverrides.push([ngModule, override]);
+  }
+
+  overrideComponent(component: Type<any>, override: MetadataOverride<Component>): void {
+    this._assertNotInstantiated('overrideComponent', 'override component metadata');
+    this._componentOverrides.push([component, override]);
+  }
+
+  overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): void {
+    this._assertNotInstantiated('overrideDirective', 'override directive metadata');
+    this._directiveOverrides.push([directive, override]);
+  }
+
+  overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): void {
+    this._assertNotInstantiated('overridePipe', 'override pipe metadata');
+    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 {
+    this.overrideProviderImpl(token, provider);
+  }
+
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   *
+   * @deprecated as it makes all NgModules lazy. Introduced only for migrating off of it.
+   */
+  deprecatedOverrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): void;
+  deprecatedOverrideProvider(token: any, provider: {useValue: any;}): void;
+  deprecatedOverrideProvider(
+      token: any, provider: {useFactory?: Function, useValue?: any, deps?: any[]}): void {
+    this.overrideProviderImpl(token, provider, /* deprecated */ true);
+  }
+
+  private overrideProviderImpl(
+      token: any, provider: {
+        useFactory?: Function,
+        useValue?: any,
+        deps?: any[],
+      },
+      deprecated = false): void {
+    if (typeof token !== 'string' && token.ngInjectableDef &&
+        token.ngInjectableDef.providedIn === 'root') {
+      if (provider.useFactory) {
+        this._rootProviderOverrides.push(
+            {provide: token, useFactory: provider.useFactory, deps: provider.deps || []});
+      } else {
+        this._rootProviderOverrides.push({provide: token, useValue: provider.useValue});
+      }
+    }
+    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, deprecatedBehavior: deprecated});
+  }
+
+  overrideTemplateUsingTestingModule(component: Type<any>, template: string) {
+    this._assertNotInstantiated('overrideTemplateUsingTestingModule', 'override template');
+
+    @Component({selector: 'empty', template, jit: true})
+    class OverrideComponent {
+    }
+
+    this._templateOverrides.push({component, templateOf: OverrideComponent});
+  }
+
+  createComponent<T>(component: Type<T>): ComponentFixture<T> {
+    this._initIfNeeded();
+    const componentFactory = this._compiler.getComponentFactory(component);
+
+    if (!componentFactory) {
+      throw new Error(
+          `Cannot create the component ${stringify(component)} as it was not imported into the testing module!`);
+    }
+
+    const noNgZone = this.get(ComponentFixtureNoNgZone, false);
+    const autoDetect: boolean = this.get(ComponentFixtureAutoDetect, false);
+    const ngZone: NgZone = noNgZone ? null : this.get(NgZone, null);
+    const testComponentRenderer: TestComponentRenderer = this.get(TestComponentRenderer);
+    const rootElId = `root${_nextRootElementId++}`;
+    testComponentRenderer.insertRootElement(rootElId);
+
+    const initComponent = () => {
+      const componentRef =
+          componentFactory.create(Injector.NULL, [], `#${rootElId}`, this._moduleRef);
+      return new ComponentFixture<T>(componentRef, ngZone, autoDetect);
+    };
+
+    const fixture = !ngZone ? initComponent() : ngZone.run(initComponent);
+    this._activeFixtures.push(fixture);
+    return fixture;
+  }
+}
+
+/**
+ * @description
+ * Configures and initializes environment for unit testing and provides methods for
+ * creating components and services in unit tests.
+ *
+ * `TestBed` is the primary api for writing unit tests for Angular applications and libraries.
+ *
+ * Note: Use `TestBed` in tests. It will be set to either `TestBedViewEngine` or `TestBedRender3`
+ * according to the compiler used.
+ */
+export const TestBed: TestBedStatic =
+    ivyEnabled ? TestBedRender3 as any as TestBedStatic : TestBedViewEngine as any as TestBedStatic;
+
+/**
+ * Returns a singleton of the applicable `TestBed`.
+ *
+ * It will be either an instance of `TestBedViewEngine` or `TestBedRender3`.
+ *
+ * @experimental
+ */
+export const getTestBed: () => TestBed = ivyEnabled ? _getTestBedRender3 : _getTestBedViewEngine;
+
+let testBed: TestBedViewEngine;
+
+function _getTestBedViewEngine(): TestBedViewEngine {
+  return testBed = testBed || new TestBedViewEngine();
+}
+
+/**
+ * Allows injecting dependencies in `beforeEach()` and `it()`.
+ *
+ * Example:
+ *
+ * ```
+ * beforeEach(inject([Dependency, AClass], (dep, object) => {
+ *   // some code that uses `dep` and `object`
+ *   // ...
+ * }));
+ *
+ * it('...', inject([AClass], (object) => {
+ *   object.doSomething();
+ *   expect(...);
+ * })
+ * ```
+ *
+ * Notes:
+ * - inject is currently a function because of some Traceur limitation the syntax should
+ * eventually
+ *   becomes `it('...', @Inject (object: AClass, async: AsyncTestCompleter) => { ... });`
+ *
+ *
+ */
+export function inject(tokens: any[], fn: Function): () => any {
+  const testBed = getTestBed();
+  if (tokens.indexOf(AsyncTestCompleter) >= 0) {
+    // Not using an arrow function to preserve context passed from call site
+    return function() {
+      // Return an async test method that returns a Promise if AsyncTestCompleter is one of
+      // the injected tokens.
+      return testBed.compileComponents().then(() => {
+        const completer: AsyncTestCompleter = testBed.get(AsyncTestCompleter);
+        testBed.execute(tokens, fn, this);
+        return completer.promise;
+      });
+    };
+  } else {
+    // Not using an arrow function to preserve context passed from call site
+    return function() { return testBed.execute(tokens, fn, this); };
+  }
+}
+
+/**
+ * @experimental
+ */
+export class InjectSetupWrapper {
+  constructor(private _moduleDef: () => TestModuleMetadata) {}
+
+  private _addModule() {
+    const moduleDef = this._moduleDef();
+    if (moduleDef) {
+      getTestBed().configureTestingModule(moduleDef);
+    }
+  }
+
+  inject(tokens: any[], fn: Function): () => any {
+    const self = this;
+    // Not using an arrow function to preserve context passed from call site
+    return function() {
+      self._addModule();
+      return inject(tokens, fn).call(this);
+    };
+  }
+}
+
+/**
+ * @experimental
+ */
+export function withModule(moduleDef: TestModuleMetadata): InjectSetupWrapper;
+export function withModule(moduleDef: TestModuleMetadata, fn: Function): () => any;
+export function withModule(moduleDef: TestModuleMetadata, fn?: Function | null): (() => any)|
+    InjectSetupWrapper {
+  if (fn) {
+    // Not using an arrow function to preserve context passed from call site
+    return function() {
+      const testBed = getTestBed();
+      if (moduleDef) {
+        testBed.configureTestingModule(moduleDef);
+      }
+      return fn.apply(this);
+    };
+  }
+  return new InjectSetupWrapper(() => moduleDef);
+}
\ No newline at end of file
diff --git a/packages/core/testing/src/test_bed_common.ts b/packages/core/testing/src/test_bed_common.ts
new file mode 100644
index 000000000000..7f029a725693
--- /dev/null
+++ b/packages/core/testing/src/test_bed_common.ts
@@ -0,0 +1,136 @@
+/**
+ * @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, InjectionToken, NgModule, Pipe, PlatformRef, SchemaMetadata, Type} from '@angular/core';
+
+import {ComponentFixture} from './component_fixture';
+import {MetadataOverride} from './metadata_override';
+import {TestBed} from './test_bed';
+
+/**
+ * An abstract class for inserting the root test component element in a platform independent way.
+ *
+ * @experimental
+ */
+export class TestComponentRenderer {
+  insertRootElement(rootElementId: string) {}
+}
+
+/**
+ * @experimental
+ */
+export const ComponentFixtureAutoDetect =
+    new InjectionToken<boolean[]>('ComponentFixtureAutoDetect');
+
+/**
+ * @experimental
+ */
+export const ComponentFixtureNoNgZone = new InjectionToken<boolean[]>('ComponentFixtureNoNgZone');
+
+/**
+ * @experimental
+ */
+export type TestModuleMetadata = {
+  providers?: any[],
+  declarations?: any[],
+  imports?: any[],
+  schemas?: Array<SchemaMetadata|any[]>,
+  aotSummaries?: () => any[],
+};
+
+/**
+ * Static methods implemented by the `TestBedViewEngine` and `TestBedRender3`
+ */
+export interface TestBedStatic {
+  new (...args: any[]): TestBed;
+
+  initTestEnvironment(
+      ngModule: Type<any>|Type<any>[], platform: PlatformRef, aotSummaries?: () => any[]): TestBed;
+
+  /**
+   * Reset the providers for the test injector.
+   *
+   * @experimental
+   */
+  resetTestEnvironment(): void;
+
+  resetTestingModule(): TestBedStatic;
+
+  /**
+   * Allows overriding default compiler providers and settings
+   * which are defined in test_injector.js
+   */
+  configureCompiler(config: {providers?: any[]; useJit?: boolean;}): TestBedStatic;
+
+  /**
+   * Allows overriding default providers, directives, pipes, modules of the test injector,
+   * which are defined in test_injector.js
+   */
+  configureTestingModule(moduleDef: TestModuleMetadata): TestBedStatic;
+
+  /**
+   * Compile components with a `templateUrl` for the test's NgModule.
+   * It is necessary to call this function
+   * as fetching urls is asynchronous.
+   */
+  compileComponents(): Promise<any>;
+
+  overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): TestBedStatic;
+
+  overrideComponent(component: Type<any>, override: MetadataOverride<Component>): TestBedStatic;
+
+  overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): TestBedStatic;
+
+  overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): TestBedStatic;
+
+  overrideTemplate(component: Type<any>, template: string): TestBedStatic;
+
+  /**
+   * Overrides the template of the given component, compiling the template
+   * in the context of the TestingModule.
+   *
+   * Note: This works for JIT and AOTed components as well.
+   */
+  overrideTemplateUsingTestingModule(component: Type<any>, template: string): TestBedStatic;
+
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   *
+   * Note: This works for JIT and AOTed components as well.
+   */
+  overrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): TestBedStatic;
+  overrideProvider(token: any, provider: {useValue: any;}): TestBedStatic;
+  overrideProvider(token: any, provider: {
+    useFactory?: Function,
+    useValue?: any,
+    deps?: any[],
+  }): TestBedStatic;
+
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   *
+   * @deprecated as it makes all NgModules lazy. Introduced only for migrating off of it.
+   */
+  deprecatedOverrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): void;
+  deprecatedOverrideProvider(token: any, provider: {useValue: any;}): void;
+  deprecatedOverrideProvider(token: any, provider: {
+    useFactory?: Function,
+    useValue?: any,
+    deps?: any[],
+  }): TestBedStatic;
+
+  get(token: any, notFoundValue?: any): any;
+
+  createComponent<T>(component: Type<T>): ComponentFixture<T>;
+}
diff --git a/packages/core/testing/src/test_compiler.ts b/packages/core/testing/src/test_compiler.ts
new file mode 100644
index 000000000000..c33664638da6
--- /dev/null
+++ b/packages/core/testing/src/test_compiler.ts
@@ -0,0 +1,64 @@
+/**
+ * @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 {Compiler, CompilerOptions, Component, ComponentFactory, Directive, Injectable, Injector, NgModule, Pipe, Type} from '@angular/core';
+
+import {MetadataOverride} from './metadata_override';
+
+function unimplemented(): any {
+  throw Error('unimplemented');
+}
+
+/**
+ * Special interface to the compiler only used by testing
+ *
+ * @experimental
+ */
+@Injectable()
+export class TestingCompiler extends Compiler {
+  get injector(): Injector { throw unimplemented(); }
+  overrideModule(module: Type<any>, overrides: MetadataOverride<NgModule>): void {
+    throw unimplemented();
+  }
+  overrideDirective(directive: Type<any>, overrides: MetadataOverride<Directive>): void {
+    throw unimplemented();
+  }
+  overrideComponent(component: Type<any>, overrides: MetadataOverride<Component>): void {
+    throw unimplemented();
+  }
+  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(); }
+
+  /**
+   * Returns the component type that is stored in the given error.
+   * This can be used for errors created by compileModule...
+   */
+  getComponentFromError(error: Error): Type<any>|null { throw unimplemented(); }
+}
+
+/**
+ * A factory for creating a Compiler
+ *
+ * @experimental
+ */
+export abstract class TestingCompilerFactory {
+  abstract createTestingCompiler(options?: CompilerOptions[]): TestingCompiler;
+}
diff --git a/packages/core/testing/src/testing.ts b/packages/core/testing/src/testing.ts
new file mode 100644
index 000000000000..baefc11881be
--- /dev/null
+++ b/packages/core/testing/src/testing.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 core/testing package.
+ */
+
+export * from './async';
+export * from './component_fixture';
+export * from './fake_async';
+export {TestBed, getTestBed, inject, InjectSetupWrapper, withModule} from './test_bed';
+export * from './test_bed_common';
+export * from './before_each';
+export * from './metadata_override';
+export {MetadataOverrider as ɵMetadataOverrider} from './metadata_overrider';
+export * from './private_export_testing';
diff --git a/packages/core/testing/src/testing_internal.ts b/packages/core/testing/src/testing_internal.ts
new file mode 100644
index 000000000000..2ee60282edb4
--- /dev/null
+++ b/packages/core/testing/src/testing_internal.ts
@@ -0,0 +1,204 @@
+/**
+ * @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 {ɵisPromise as isPromise} from '@angular/core';
+import {global} from '@angular/core/src/util';
+
+import {AsyncTestCompleter} from './async_test_completer';
+import {getTestBed, inject} from './test_bed';
+
+export {AsyncTestCompleter} from './async_test_completer';
+export {inject} from './test_bed';
+
+export * from './logger';
+export * from './ng_zone_mock';
+
+export const proxy: ClassDecorator = (t: any) => t;
+
+const _global = <any>(typeof window === 'undefined' ? global : window);
+
+export const afterEach: Function = _global.afterEach;
+export const expect: <T>(actual: T) => jasmine.Matchers<T> = _global.expect;
+
+const jsmBeforeEach = _global.beforeEach;
+const jsmDescribe = _global.describe;
+const jsmDDescribe = _global.fdescribe;
+const jsmXDescribe = _global.xdescribe;
+const jsmIt = _global.it;
+const jsmFIt = _global.fit;
+const jsmXIt = _global.xit;
+
+const runnerStack: BeforeEachRunner[] = [];
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
+const globalTimeOut = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+
+const testBed = getTestBed();
+
+/**
+ * Mechanism to run `beforeEach()` functions of Angular tests.
+ *
+ * Note: Jasmine own `beforeEach` is used by this library to handle DI providers.
+ */
+class BeforeEachRunner {
+  private _fns: Array<Function> = [];
+
+  constructor(private _parent: BeforeEachRunner) {}
+
+  beforeEach(fn: Function): void { this._fns.push(fn); }
+
+  run(): void {
+    if (this._parent) this._parent.run();
+    this._fns.forEach((fn) => { fn(); });
+  }
+}
+
+// Reset the test providers before each test
+jsmBeforeEach(() => { testBed.resetTestingModule(); });
+
+function _describe(jsmFn: Function, ...args: any[]) {
+  const parentRunner = runnerStack.length === 0 ? null : runnerStack[runnerStack.length - 1];
+  const runner = new BeforeEachRunner(parentRunner !);
+  runnerStack.push(runner);
+  const suite = jsmFn(...args);
+  runnerStack.pop();
+  return suite;
+}
+
+export function describe(...args: any[]): void {
+  return _describe(jsmDescribe, ...args);
+}
+
+export function ddescribe(...args: any[]): void {
+  return _describe(jsmDDescribe, ...args);
+}
+
+export function xdescribe(...args: any[]): void {
+  return _describe(jsmXDescribe, ...args);
+}
+
+export function beforeEach(fn: Function): void {
+  if (runnerStack.length > 0) {
+    // Inside a describe block, beforeEach() uses a BeforeEachRunner
+    runnerStack[runnerStack.length - 1].beforeEach(fn);
+  } else {
+    // Top level beforeEach() are delegated to jasmine
+    jsmBeforeEach(fn);
+  }
+}
+
+/**
+ * Allows overriding default providers defined in test_injector.js.
+ *
+ * The given function must return a list of DI providers.
+ *
+ * Example:
+ *
+ *   beforeEachProviders(() => [
+ *     {provide: Compiler, useClass: MockCompiler},
+ *     {provide: SomeToken, useValue: myValue},
+ *   ]);
+ */
+export function beforeEachProviders(fn: Function): void {
+  jsmBeforeEach(() => {
+    const providers = fn();
+    if (!providers) return;
+    testBed.configureTestingModule({providers: providers});
+  });
+}
+
+
+function _it(
+    jsmFn: Function, testName: string, testFn: (done?: DoneFn) => any, testTimeout = 0): void {
+  if (runnerStack.length == 0) {
+    // This left here intentionally, as we should never get here, and it aids debugging.
+    debugger;
+    throw new Error('Empty Stack!');
+  }
+  const runner = runnerStack[runnerStack.length - 1];
+  const timeout = Math.max(globalTimeOut, testTimeout);
+
+  jsmFn(testName, (done: DoneFn) => {
+    const completerProvider = {
+      provide: AsyncTestCompleter,
+      useFactory: () => {
+        // Mark the test as async when an AsyncTestCompleter is injected in an it()
+        return new AsyncTestCompleter();
+      }
+    };
+    testBed.configureTestingModule({providers: [completerProvider]});
+    runner.run();
+
+    if (testFn.length === 0) {
+      const retVal = testFn();
+      if (isPromise(retVal)) {
+        // Asynchronous test function that returns a Promise - wait for completion.
+        retVal.then(done, done.fail);
+      } else {
+        // Synchronous test function - complete immediately.
+        done();
+      }
+    } else {
+      // Asynchronous test function that takes in 'done' parameter.
+      testFn(done);
+    }
+  }, timeout);
+}
+
+export function it(expectation: string, assertion: (done: DoneFn) => any, timeout?: number): void {
+  return _it(jsmIt, expectation, assertion, timeout);
+}
+
+export function fit(expectation: string, assertion: (done: DoneFn) => any, timeout?: number): void {
+  return _it(jsmFIt, expectation, assertion, timeout);
+}
+
+export function xit(expectation: string, assertion: (done: DoneFn) => any, timeout?: number): void {
+  return _it(jsmXIt, expectation, assertion, timeout);
+}
+
+export class SpyObject {
+  constructor(type?: any) {
+    if (type) {
+      for (const prop in type.prototype) {
+        let m: any = null;
+        try {
+          m = type.prototype[prop];
+        } catch (e) {
+          // As we are creating spys for abstract classes,
+          // these classes might have getters that throw when they are accessed.
+          // As we are only auto creating spys for methods, this
+          // should not matter.
+        }
+        if (typeof m === 'function') {
+          this.spy(prop);
+        }
+      }
+    }
+  }
+
+  spy(name: string) {
+    if (!(this as any)[name]) {
+      (this as any)[name] = jasmine.createSpy(name);
+    }
+    return (this as any)[name];
+  }
+
+  prop(name: string, value: any) { (this as any)[name] = value; }
+
+  static stub(object: any = null, config: any = null, overrides: any = null) {
+    if (!(object instanceof SpyObject)) {
+      overrides = config;
+      config = object;
+      object = new SpyObject();
+    }
+
+    const m = {...config, ...overrides};
+    Object.keys(m).forEach(key => { object.spy(key).and.returnValue(m[key]); });
+    return object;
+  }
+}
diff --git a/packages/core/testing/tsconfig-build.json b/packages/core/testing/tsconfig-build.json
new file mode 100644
index 000000000000..7b91f4043b54
--- /dev/null
+++ b/packages/core/testing/tsconfig-build.json
@@ -0,0 +1,31 @@
+{
+  "extends": "../tsconfig-build.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "rxjs/*": [
+        "../../../node_modules/rxjs/*"
+      ],
+      "@angular/core": [
+        "../../../dist/packages/core"
+      ],
+      "@angular/compiler": [
+        "../../../dist/packages/compiler"
+      ],
+    },
+    "outDir": "../../../dist/packages/core"
+  },
+  "files": [
+    "public_api.ts",
+    "../../../node_modules/zone.js/dist/zone.js.d.ts",
+    "../../system.d.ts",
+    "../../types.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "testing.js",
+    "flatModuleId": "@angular/core/testing"
+  }
+}
\ No newline at end of file
diff --git a/packages/core/tsconfig-build.json b/packages/core/tsconfig-build.json
new file mode 100644
index 000000000000..a60be80d1933
--- /dev/null
+++ b/packages/core/tsconfig-build.json
@@ -0,0 +1,31 @@
+{
+  "extends": "../tsconfig-build.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "rxjs/*": [
+        "../../node_modules/rxjs/*"
+      ],
+      "@angular/core": [
+        "."
+      ],
+      "@angular/compiler": [
+        "../../dist/packages/compiler"
+      ]
+    },
+    "outDir": "../../dist/packages/core"
+  },
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts",
+    "../system.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "core.js",
+    "flatModuleId": "@angular/core"
+  }
+}
\ No newline at end of file
diff --git a/packages/docs/di/di.md b/packages/docs/di/di.md
new file mode 100644
index 000000000000..4525c950bc4c
--- /dev/null
+++ b/packages/docs/di/di.md
@@ -0,0 +1,267 @@
+# Dependency Injection (DI): Documentation
+
+This document describes in detail how the DI module works in Angular.
+
+## Core Abstractions
+
+The library is built on top of the following core abstractions: `Injector`, `Binding`, and `Dependency`.
+
+* An injector is created from a set of bindings.
+* An injector resolves dependencies and creates objects.
+* A binding maps a token, such as a string or class, to a factory function and a list of dependencies. So a binding defines how to create an object.
+* A dependency points to a token and contains extra information on how the object corresponding to that token should be injected.
+
+```
+[Injector]
+    |
+    |
+    |*
+[Binding]
+   |----------|-----------------|
+   |          |                 |*
+[Token]    [FactoryFn]     [Dependency]
+                               |---------|
+                               |         |
+                            [Token]   [Flags]
+```
+
+## Example
+
+```
+class Engine {
+}
+
+class Car {
+  constructor(@Inject(Engine) engine) {
+  }
+}
+
+var inj = Injector.resolveAndCreate([
+  bind(Car).toClass(Car),
+  bind(Engine).toClass(Engine)
+]);
+var car = inj.get(Car);
+```
+
+In this example we create two bindings: one for `Car` and one for `Engine`. `@Inject(Engine)` declares a dependency on Engine.
+
+## Injector
+
+An injector instantiates objects lazily, only when asked for, and then caches them.
+
+Compare
+
+```
+var car = inj.get(Car); //instantiates both an Engine and a Car
+```
+
+with
+
+```
+var engine = inj.get(Engine); //instantiates an Engine
+var car = inj.get(Car); //instantiates a Car (reuses Engine)
+```
+
+and with
+
+```
+var car = inj.get(Car); //instantiates both an Engine and a Car
+var engine = inj.get(Engine); //reads the Engine from the cache
+```
+
+To avoid bugs make sure the registered objects have side-effect-free constructors. In this case, an injector acts like a hash map, where the order in which the objects got created does not matter.
+
+
+
+## Child Injectors and Dependencies
+
+Injectors are hierarchical.
+
+```
+var parent = Injector.resolveAndCreate([
+  bind(Engine).toClass(TurboEngine)
+]);
+var child = parent.resolveAndCreateChild([Car]);
+
+var car = child.get(Car); // uses the Car binding from the child injector and Engine from the parent injector.
+```
+
+Injectors form a tree.
+
+```
+  GrandParentInjector
+   /              \
+Parent1Injector  Parent2Injector
+  |
+ChildInjector
+```
+
+The dependency resolution algorithm works as follows:
+
+```
+// this is pseudocode.
+var inj = this;
+while (inj) {
+  if (inj.hasKey(requestedKey)) {
+    return inj.get(requestedKey);
+  } else {
+    inj = inj.parent;
+  }
+}
+throw new NoProviderError(requestedKey);
+```
+
+So in the following example
+
+```
+class Car {
+  constructor(e: Engine){}
+}
+```
+
+DI will start resolving `Engine` in the same injector where the `Car` binding is defined. It will check whether that injector has the `Engine` binding. If it is the case, it will return that instance. If not, the injector will ask its parent whether it has an instance of `Engine`. The process continues until either an instance of `Engine` has been found, or we have reached the root of the injector tree.
+
+### Constraints
+
+You can put upper and lower bound constraints on a dependency. For instance, the `@Self` decorator tells DI to look for `Engine` only in the same injector where `Car` is defined. So it will not walk up the tree.
+
+```
+class Car {
+  constructor(@Self() e: Engine){}
+}
+```
+
+A more realistic example is having two bindings that have to be provided together (e.g., NgModel and NgRequiredValidator.)
+
+The `@Host` decorator tells DI to look for `Engine` in this injector, its parent, until it reaches a host (see the section on hosts.)
+
+```
+class Car {
+  constructor(@Host() e: Engine){}
+}
+```
+
+The `@SkipSelf` decorator tells DI to look for `Engine` in the whole tree starting from the parent injector.
+
+```
+class Car {
+  constructor(@SkipSelf() e: Engine){}
+}
+```
+
+### DI Does Not Walk Down
+
+
+Dependency resolution only walks up the tree. The following will throw because DI will look for an instance of `Engine` starting from `parent`.
+
+```
+var parent = Injector.resolveAndCreate([Car]);
+var child = parent.resolveAndCreateChild([
+  bind(Engine).toClass(TurboEngine)
+]);
+
+parent.get(Car); // will throw NoProviderError
+```
+
+
+## Bindings
+
+You can bind to a class, a value, or a factory. It is also possible to alias existing bindings.
+
+```
+var inj = Injector.resolveAndCreate([
+  bind(Car).toClass(Car),
+  bind(Engine).toClass(Engine)
+]);
+
+var inj = Injector.resolveAndCreate([
+  Car,  // syntax sugar for bind(Car).toClass(Car)
+  Engine
+]);
+
+var inj = Injector.resolveAndCreate([
+  bind(Car).toValue(new Car(new Engine()))
+]);
+
+var inj = Injector.resolveAndCreate([
+  bind(Car).toFactory((e) => new Car(e), [Engine]),
+  bind(Engine).toFactory(() => new Engine())
+]);
+```
+
+You can bind any token.
+
+```
+var inj = Injector.resolveAndCreate([
+  bind(Car).toFactory((e) => new Car(), ["engine!"]),
+  bind("engine!").toClass(Engine)
+]);
+```
+
+If you want to alias an existing binding, you can do so using `toAlias`:
+
+```
+var inj = Injector.resolveAndCreate([
+  bind(Engine).toClass(Engine),
+  bind("engine!").toAlias(Engine)
+]);
+```
+which implies `inj.get(Engine) === inj.get("engine!")`.
+
+Note that tokens and factory functions are decoupled.
+
+```
+bind("some token").toFactory(someFactory);
+```
+
+The `someFactory` function does not have to know that it creates an object for `some token`.
+
+### Resolved Bindings
+
+When DI receives `bind(Car).toClass(Car)`, it needs to do a few things before it can create an instance of `Car`:
+
+- It needs to reflect on `Car` to create a factory function.
+- It needs to normalize the dependencies (e.g., calculate lower and upper bounds).
+
+The result of these two operations is a `ResolvedBinding`.
+
+The `resolveAndCreate` and `resolveAndCreateChild` functions resolve passed-in bindings before creating an injector. But you can resolve bindings yourself using `Injector.resolve([bind(Car).toClass(Car)])`. Creating an injector from pre-resolved bindings is faster, and may be needed for performance sensitive areas.
+
+You can create an injector using a list of resolved bindings.
+
+```
+var listOfResolvingProviders = Injector.resolve([Provider11, Provider2]);
+var inj = Injector.fromResolvedProviders(listOfResolvingProviders);
+inj.createChildFromResolvedProviders(listOfResolvedProviders);
+```
+
+
+### Transient Dependencies
+
+An injector has only one instance created by each registered binding.
+
+```
+inj.get(MyClass) === inj.get(MyClass); //always holds
+```
+
+If we need a transient dependency, something that we want a new instance of every single time, we have two options.
+
+We can create a child injector for each new instance:
+
+```
+var child = inj.resolveAndCreateChild([MyClass]);
+child.get(MyClass);
+```
+
+Or we can register a factory function:
+
+```
+var inj = Injector.resolveAndCreate([
+  bind('MyClassFactory').toFactory(dep => () => new MyClass(dep), [SomeDependency])
+]);
+
+var factory = inj.get('MyClassFactory');
+var instance1 = factory(), instance2 = factory();
+// Depends on the implementation of MyClass, but generally holds.
+expect(instance1).not.toBe(instance2);
+```
diff --git a/packages/docs/di/di_advanced.md b/packages/docs/di/di_advanced.md
new file mode 100644
index 000000000000..5b604358e494
--- /dev/null
+++ b/packages/docs/di/di_advanced.md
@@ -0,0 +1,235 @@
+# Dependency Injection (DI): Documentation (Advanced Topics)
+
+This document talks about advanced topics related to the DI module and how it is used in Angular. You don't have to know this to use DI in Angular or independently.
+
+### Key
+
+Most of the time we do not have to deal with keys.
+
+```
+var inj = Injector.resolveAndCreate([
+  bind(Engine).toFactory(() => new TurboEngine())  //the passed in token Engine gets mapped to a key
+]);
+var engine = inj.get(Engine); //the passed in token Engine gets mapped to a key
+```
+
+Now, the same example, but with keys.
+
+```
+var ENGINE_KEY = Key.get(Engine);
+
+var inj = Injector.resolveAndCreate([
+  bind(ENGINE_KEY).toFactory(() => new TurboEngine()) // no mapping
+]);
+var engine = inj.get(ENGINE_KEY);  // no mapping
+```
+
+Every key has an id, which we utilize to store providers and instances. So Injector uses keys internally for performance reasons.
+
+### ProtoInjector and Injector
+
+Often there is a need to create multiple instances of essentially the same injector. In Angular, for example, every component element type gets an injector configured in the same way.
+
+Doing the following would be very inefficient.
+
+```
+function createComponetInjector(parent, providers: Binding[]) {
+  return parent.resolveAndCreateChild(providers);
+}
+```
+
+This would require us to resolve and store providers for every single component instance. Instead, we want to resolve and store the providers for every component type, and create a set of instances for every component. To enable that DI separates the meta information about injectables (providers and their dependencies), which are stored in `ProtoInjector`, and injectables themselves, which are stored in `Injector`.
+
+```
+var proto = new ProtoInjector(providers); // done once
+function createComponentInjector(parent, proto) {
+  return new Injector(proto, parent);
+}
+```
+
+`Injector.resolveAndCreate` creates both a `ProtoInjector` and an `Injector`.
+
+### Host & Visibility
+
+An injector can have a parent. The parent relationship can be marked as a "host" as follows:
+
+```
+var child = new Injector(proto, parent, true /* host */);
+```
+
+Hosts are used to constraint dependency resolution. For instance, in the following example, DI will stop looking for `Engine` after reaching the host.
+
+```
+class Car {
+  constructor(@Host() e: Engine) {}
+}
+```
+
+Imagine the following scenario:
+
+```
+    ParentInjector
+       /   \
+      /     \ host
+   Child1    Child2
+```
+
+Here both Child1 and Child2 are children of ParentInjector. Child2 marks this relationship as host. ParentInjector might want to expose two different sets of providers for its "regular" children and its "host" children. providers visible to "regular" children are called "public" and providers visible to "host" children are called "private". This is an advanced use case used by Angular, where components can provide different sets of providers for their children and their view.
+
+Let's look at this example.
+
+```
+class Car {
+  constructor(@Host() e: Engine) {}
+}
+
+var parentProto = new ProtoInjector([
+  new BindingWithVisibility(Engine, Visibility.Public),
+  new BindingWithVisibility(Car, Visibility.Public)
+]);
+var parent = new Injector(parentProto);
+
+var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
+var hostChild = new Injector(hostChildProto, parent, true);
+
+var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
+var regularChild = new Injector(regularChildProto, parent, false);
+
+hostChild.get(Car); // will throw because public dependencies declared at the host cannot be seen by child injectors
+parent.get(Car); // this works
+regularChild.get(Car); // this works
+```
+
+Now, let's mark `Engine` as private:
+
+```
+class Car {
+  constructor(@Host() e: Engine) {}
+}
+
+var parentProto = new ProtoInjector([
+  new BindingWithVisibility(Engine, Visibility.Private),
+  new BindingWithVisibility(Car, Visibility.Public)
+]);
+var parent = new Injector(parentProto);
+
+var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
+var hostChild = new Injector(hostChildProto, parent, true);
+
+var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
+var regularChild = new Injector(regularChildProto, parent, false);
+
+hostChild.get(Car); // this works
+parent.get(Car); // this throws
+regularChild.get(Car); // this throws
+```
+
+Now, let's mark `Engine` as both public and private:
+
+```
+class Car {
+  constructor(@Host() e: Engine) {}
+}
+
+var parentProto = new ProtoInjector([
+  new BindingWithVisibility(Engine, Visibility.PublicAndPrivate),
+  new BindingWithVisibility(Car, Visibility.Public)
+]);
+var parent = new Injector(parentProto);
+
+var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
+var hostChild = new Injector(hostChildProto, parent, true);
+
+var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
+var regularChild = new Injector(regularChildProto, parent, false);
+
+hostChild.get(Car); // this works
+parent.get(Car); // this works
+regularChild.get(Car); // this works
+```
+
+## Angular and DI
+
+Now let's see how Angular uses DI behind the scenes.
+
+The right mental model is to think that every DOM element has an Injector. (In practice, only interesting elements containing directives will have an injector, but this is a performance optimization)
+
+There are two properties that can be used to configure DI: providers and viewProviders.
+
+- `providers` affects the element and its children.
+- `viewProviders` affects the component's view.
+
+Every directive can declare injectables via `providers`, but only components can declare `viewProviders`.
+
+Let's look at a complex example that shows how the injector tree gets created.
+
+```
+<my-component my-directive>
+  <needs-service></needs-service>
+</my-component>
+```
+
+Both `MyComponent` and `MyDirective` are created on the same element.
+
+```
+@Component({
+  selector: 'my-component',
+  providers: [
+    bind('componentService').toValue('Host_MyComponentService')
+  ],
+  viewProviders: [
+    bind('viewService').toValue('View_MyComponentService')
+  ],
+  template: `<needs-view-service></needs-view-service>`,
+  directives: [NeedsViewService]
+})
+class MyComponent {}
+
+@Directive({
+  selector: '[my-directive]',
+  providers: [
+    bind('directiveService').toValue('MyDirectiveService')
+  ]
+})
+class MyDirective {
+}
+```
+
+`NeedsService` and `NeedsViewService` look like this:
+
+```
+@Directive({
+  selector: 'needs-view-service'
+})
+class NeedsViewService {
+  constructor(@Host() @Inject('viewService') viewService) {}
+}
+
+@Directive({
+  selector: 'needs-service'
+})
+class NeedsService {
+  constructor(@Host() @Inject('componentService') service1,
+              @Host() @Inject('directiveService') service2) {}
+}
+```
+
+This will create the following injector tree.
+
+```
+      Injector1 [
+        {binding: MyComponent,        visibility: Visibility.PublicAndPrivate},
+        {binding: 'componentService', visibility: Visibility.PublicAndPrivate},
+        {binding: 'viewService',      visibility: Visibility.Private},
+        {binding: MyDirective         visibility: Visibility.Public},
+        {binding: 'directiveService', visibility: Visibility.Public}
+      ]
+  /                                                       \
+  |                                                        \ host
+Injector2 [                                                 Injector3 [
+  {binding: NeedsService, visibility: Visibility.Public}           {binding: NeedsViewService, visibility: Visibility.Public}
+]                                                           ]
+```
+
+As you can see the component and its providers can be seen by its children and its view. The view providers can be seen only by the view. And the providers of other directives can be seen only their children.
+
diff --git a/packages/docs/web_workers/web_workers.md b/packages/docs/web_workers/web_workers.md
new file mode 100644
index 000000000000..e4f7c26bd55d
--- /dev/null
+++ b/packages/docs/web_workers/web_workers.md
@@ -0,0 +1,481 @@
+# WebWorkers in Angular: Documentation
+
+Angular includes native support for writing applications which live in a
+WebWorker. This document describes how to write applications that take advantage
+of this feature.
+It also provides a detailed description of the underlying messaging
+infrastructure that angular uses to communicate between the main process and the
+worker. This infrastructure can be modified by an application developer to
+enable driving an Angular application from an iFrame, different window / tab,
+server, etc..
+
+## Introduction
+WebWorker support in Angular is designed to make it easy to leverage parallelization in your web application.
+When you choose to run your application in a WebWorker angular runs both your application's logic and the
+majority of the core angular framework in a WebWorker.
+By offloading as much code as possible to the WebWorker we keep the UI thread
+free to handle events, manipulate the DOM, and run animations. This provides a
+better framerate and UX for applications.
+
+## Bootstrapping a WebWorker Application
+Bootstrapping a WebWorker application is not much different than bootstrapping a normal application.
+The main difference is that you need to do the bootstrap process on both the worker and render thread.
+Unlike in a standard Angular application you don't bootstrap your main component on the render thread.
+Instead you initialize a new application injector with the WORKER_APP_PLATFORM providers and provide the name
+of your WebWorker script. See the example below for details:
+
+### Example
+To bootstrap Hello World in a WebWorker we do the following in TypeScript
+```HTML
+<html>
+  <head>
+     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.js"></script>
+     <script src="https://jspm.io/system@0.16.js"></script>
+     <script src="angular2/web_worker/ui.js"></script>
+  </head>
+  <body>
+    <hello-world></hello-world>
+    <script>System.import("index")</script>
+  </body>
+</html>
+```
+```TypeScript
+// index.js
+import {WORKER_RENDER_PLATFORM, WORKER_RENDER_APPLICATION, WORKER_SCRIPT} from "angular2/platform/worker_render";
+import {platform} from "angular2/core";
+
+platform([WORKER_RENDER_PLATFORM])
+.application([WORKER_RENDER_APPLICATION, {provide: WORKER_SCRIPT, useValue: "loader.js"};
+```
+```JavaScript
+// loader.js
+importScripts("https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.js", "https://jspm.io/system@0.16.js", "angular2/web_worker/worker.js");
+System.import("app");
+```
+```TypeScript
+// app.ts
+import {Component, View, platform} from "angular2/core";
+import {WORKER_APP_PLATFORM, WORKER_APP_APPLICATION} from "angular2/platform/worker_app";
+
+@Component({
+  selector: "hello-world"
+})
+@View({
+  template: "<h1>Hello {{name}}</h1>"
+})
+export class HelloWorld {
+  name: string = "Jane";
+}
+
+platform([WORKER_APP_PLATFORM])
+.application([WORKER_APP_APPLICATION])
+.then((ref) => ref.bootstrap(RootComponent));
+```
+There's a few important things to note here:
+* The UI loads angular from the file `angular2/web_worker/ui.js` and the Worker loads angular from
+`angular2/web_worker/worker.js`. These bundles are created specifically for using WebWorkers and should be used
+instead of the normal angular2.js file. Both files contain subsets of the angular2 codebase that is designed to
+run specifically on the UI or Worker. Additionally, they contain the core messaging infrastructure used to
+communicate between the Worker and the UI. This messaging code is not in the standard angular2.js file.
+* We pass `loader.js` to our application injector using the WORKER_SCRIPT symbol. This tells angular that our WebWorkers's init script is located at `loader.js`.
+You can think of `loader.js` as the index.html file for the WebWorker.
+Since WebWorkers share no memory with the UI we need to reload the Angular dependencies before
+bootstrapping our application. We do this with `importScripts`. Additionally, we need to do this in a different
+file than `app.ts` because our module loader (System.js in this example) has not been loaded yet, and `app.ts`
+will be compiled with a `System.define` call at the top.
+* The HelloWorld Component looks exactly like a normal Angular HelloWorld Component! The goal of WebWorker
+support was to allow as much of Angular to live in the worker as possible.
+As such, *most* Angular components can be bootstrapped in a WebWorker with minimal to no changes required.
+
+For reference, here's the same HelloWorld example in Dart.
+```HTML
+<html>
+  <body>
+    <script type="application/dart" src="index.dart"></script>
+    <script src="packages/browser.dart.js"></script>
+  </body>
+</html>
+```
+```Dart
+// index.dart
+import "angular2/core.dart";
+import "angular2/platform/worker_render.dart";
+
+main() {
+  platform([WORKER_RENDER_PLATFORM])
+  .asyncApplication(initIsolate("my_worker.dart"));
+}
+```
+```Dart
+// background_index.dart
+import "angular2/core.dart";
+import "angular2/platform/worker_app.dart";
+import "package:angular2/src/core/reflection/reflection.dart";
+import "package:angular2/src/core/reflection/reflection_capabilities.dart";
+
+@Component(
+  selector: "hello-world"
+)
+@View(
+  template: "<h1>Hello {{name}}</h1>"
+)
+class HelloWorld {
+  String name = "Jane";
+}
+
+main(List<String> args, SendPort replyTo) {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  platform([WORKER_APP_PLATFORM, {provide: RENDER_SEND_PORT, useValue: replyTo}])
+  .application([WORKER_APP_APPLICATION])
+  .bootstrap(RootComponent);
+}
+
+```
+This code is nearly the same as the TypeScript version with just a couple key differences:
+* We don't have a `loader.js` file. Dart applications don't need this file because you don't need a module loader.
+* We provide a `SendPort` through DI using the token `RENDER_SEND_PORT`.  Dart applications use the Isolate API, which communicates via
+Dart's Port abstraction. When you call `setupIsolate` from the UI thread, angular starts a new Isolate to run
+your application logic. When Dart starts a new Isolate it passes a `SendPort` to that Isolate so that it
+can communicate with the Isolate that spawned it. You need to provide this `SendPort` through DI 
+so that Angular can communicate with the UI.
+* You need to set up `ReflectionCapabilities` on both the UI and Worker. Just like writing non-concurrent
+Angular2 Dart applications you need to set up the reflector. You should not use Reflection in production,
+but should use the Angular transformer to remove it in your final JS code. Note there's currently a bug
+with running the transformer on your UI code (#3971). You can (and should) pass the file where you call
+`bootstrap` as an entry point to the transformer, but you should not pass your UI index file
+to the transformer until that bug is fixed.
+
+## Writing WebWorker Compatible Components
+You can do almost everything in a WebWorker component that you can do in a typical Angular Component.
+The main exception is that there is **no** DOM access from a WebWorker component. In Dart this means you can't
+import anything from `dart:html` and in JavaScript it means you can't use `document` or `window`. Instead you
+should use data bindings and if needed you can inject the `Renderer` along with your component's `ElementRef`
+directly into your component and use methods such as `setElementProperty`, `setElementAttribute`,
+`setElementClass`, `setElementStyle`, `invokeElementMethod`, and `setText`. Note that you **cannot** call
+`getNativeElementSync`. Doing so will always return `null` when running in a WebWorker.
+If you need DOM access see [Running Code on the UI](#running-code-on-the-ui).
+
+## WebWorker Design Overview
+When running your application in a WebWorker, the majority of the angular core along with your application logic
+runs on the worker. The two main components that run on the UI are the `Renderer` and the `RenderCompiler`. When
+running angular in a WebWorker the bindings for these two components are replaced by the `WebWorkerRenderer` and
+the `WebWorkerRenderCompiler`. When these components are used at runtime, they pass messages through the
+[MessageBroker](#messagebroker) instructing the UI to run the actual method and return the result. The
+[MessageBroker](#messagebroker) abstraction allows either side of the WebWorker boundary to schedule code to run
+on the opposite side and receive the result. You can use the [MessageBroker](#messagebroker)
+Additionally, the [MessageBroker](#messagebroker) sits on top of the [MessageBus](#messagebus).
+MessageBus is a low level abstraction that provides a language agnostic API for communicating with angular components across any runtime boundary such as `WebWorker <--> UI` communication, `UI <--> Server` communication,
+or `Window <--> Window` communication.
+
+See the diagram below for a high level overview of how this code is structured:
+
+![WebWorker Diagram](http://stanford.edu/~jteplitz/ng_2_worker.png)
+
+## Running Code on the UI
+If your application needs to run code on the UI, there are a few options. The easiest way is to use a
+CustomElement in your view. You can then register this custom element from your html file and run code in response
+to the element's lifecycle hooks. Note, Custom Elements are still experimental. See
+[MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements) for the latest details on how
+to use them.
+
+If you require more robust communication between the WebWorker and the UI you can use the [MessageBroker](#using-the-messagebroker-in-your-application) or
+[MessageBus](#using-the-messagebus-in-your-application) directly.
+
+## MessageBus
+The MessageBus is a low level abstraction that provides a language agnostic API for communicating with angular components across any runtime boundary. It supports multiplex communication through the use of a channel
+abstraction.
+
+Angular currently includes two stable MessageBus implementations, which are used by default when you run your
+application inside a WebWorker.
+
+1. The `PostMessageBus` is used by JavaScript applications to communicate between a WebWorker and the UI.
+2. The `IsolateMessageBus` is used by Dart applications to communicate between a background Isolate and the UI.
+
+Angular also includes three experimental MessageBus implementations:
+
+1. The `WebSocketMessageBus` is a Dart MessageBus that lives on the UI and communicates with an angular
+application running on a server. It's intended to be used with either the `SingleClientServerMessageBus` or the
+`MultiClientServerMessageBus`.
+2. The `SingleClientServerMessageBus` is a Dart MessageBus that lives on a Dart Server. It allows an angular
+application to run on a server and communicate with a single browser that's running the `WebSocketMessageBus`.
+3. The `MultiClientServerMessageBus` is like the `SingleClientServerMessageBus` except it allows an arbitrary
+number of clients to connect to the server. It keeps all connected browsers in sync and if an event fires in
+any connected browser it propagates the result to all connected clients. This can be especially useful as a
+debugging tool, by allowing you to connect multiple browsers / devices to the same angular application,
+change the state of that application, and ensure that all the clients render the view correctly. Using these tools
+can make it easy to catch tricky browser compatibility issues.
+
+### Using the MessageBus in Your Application
+**Note**: If you want to pass custom messages between the UI and WebWorker, it's recommended you use the
+[MessageBroker](#using-the-messagebroker-in-your-application). However, if you want to control the messaging
+protocol yourself you can use the MessageBus directly.
+
+You can obtain the MessageBus on both the render and worker thread through DI.
+To use the MessageBus you need to initialize a new channel on both the UI and WebWorker.
+In TypeScript that would look like this:
+```TypeScript
+// public_api.ts, which is running on the UI.
+import {WORKER_RENDER_PLATFORM, WORKER_RENDER_APPLICATION, WORKER_SCRIPT, MessageBus} from "angular2/platform/worker_render";
+import {platform} from "angular2/core";
+
+let appRef = platform([WORKER_RENDER_PLATFORM])
+.application([WORKER_RENDER_APPLICATION, {provide: WORKER_SCRIPT, useValue: "loader.js"};
+let bus = appRef.injector.get(MessageBus);
+bus.initChannel("My Custom Channel");
+```
+```TypeScript
+// background_index.ts, which is running on the WebWorker
+import {MessageBus} from 'angular2/platform/worker_app';
+@Component({...})
+@View({...})
+export class MyComponent {
+  constructor (bus: MessageBus) {
+    bus.initChannel("My Custom Channel");
+  }
+}
+```
+
+Once the channel has been initialized either side can use the `from` and `to` methods on the MessageBus to send
+and receive messages. Both methods return EventEmitter. Expanding on the example from earlier:
+```TypeScript
+// public_api.ts, which is running on the UI.
+import {WORKER_RENDER_PLATFORM, WORKER_RENDER_APPLICATION, WORKER_SCRIPT, MessageBus} from "angular2/platform/worker_render";
+import {platform} from "angular2/core";
+
+let appRef = platform([WORKER_RENDER_PLATFORM])
+.application([WORKER_RENDER_APPLICATION, {provide: WORKER_SCRIPT, useValue: "loader.js"};
+let bus = appRef.injector.get(MessageBus);
+bus.initChannel("My Custom Channel");
+bus.to("My Custom Channel").emit("Hello from the UI");
+```
+```TypeScript
+// background_index.ts, which is running on the WebWorker
+import {Component, View} from 'angular2/core';
+import {MessageBus} from 'angular2/platform/worker_app';
+@Component({...})
+@View({...})
+export class MyComponent {
+  constructor (bus: MessageBus) {
+    bus.initChannel("My Custom Channel");
+    bus.from("My Custom Channel").observer((message) => {
+      console.log(message); // will print "hello from the UI"
+    });
+  }
+}
+```
+
+This example is nearly identical in Dart, and is included below for reference:
+```Dart
+// index.dart, which is running on the UI.
+import 'package:angular2/web_workers/ui.dart';
+
+main() {
+  import "angular2/core.dart";
+  import "angular2/platform/worker_render.dart";
+
+  platform([WORKER_RENDER_PLATFORM])
+  .asyncApplication(initIsolate("my_worker.dart")).then((ref) {
+    var bus = ref.injector.get(MessageBus);
+    bus.initChannel("My Custom Channel");
+    bus.to("My Custom Channel").add("hello from the UI");
+  });
+}
+
+```
+```Dart
+// background_index.dart, which is running on the WebWorker
+import 'package:angular2/platform/worker_app.dart';
+@Component(...)
+@View(...)
+class MyComponent {
+  MyComponent (MessageBus bus) {
+    bus.initChannel("My Custom Channel");
+    bus.from("My Custom Channel").listen((message) {
+      print(message); // will print "hello from the UI"
+    });
+  }
+}
+```
+The only substantial difference between these APIs in Dart and TypeScript is the different APIs for the
+`EventEmitter`.
+
+**Note:** Because the messages passed through the MessageBus cross a WebWorker boundary, they must be serializable.
+If you use the MessageBus directly, you are responsible for serializing your messages.
+In JavaScript / TypeScript this means they must be serializable via JavaScript's
+[structured cloning algorithim](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm).
+
+
+### MessageBus and Zones
+The MessageBus API includes support for [zones](http://www.github.com/angular/zone.js).
+A MessageBus can be attached to a specific zone  (by calling `attachToZone`). Then specific channels can be
+specified to run in the zone when they are initialized.
+If a channel is running in the zone, that means that any events emitted from that channel will be executed within
+the given zone. For example, by default angular runs the EventDispatch channel inside the angular zone. That means
+when an event is fired from the DOM and received on the WebWorker the event handler automatically runs inside the
+angular zone. This is desired because after the event handler exits we want to exit the zone so that we trigger
+change detection. Generally, you want your channels to run inside the zone unless you have a good reason for why
+they need to run outside the zone.
+
+### Implementing and Using a Custom MessageBus
+**Note:** Implementing and using a Custom MessageBus is experimental and the APIs may change.
+
+If you want to drive your application from something other than a WebWorker you can implement a custom message
+bus. Implementing a custom message bus just means creating a class that fulfills the API specified by the
+abstract MessageBus class.
+
+If you're implementing your MessageBus in Dart you can extend the `GenericMessageBus` class included in angular.
+if you do this, you don't need to implement zone or channel support yourself. You only need to implement a
+`MessageBusSink` that extends `GenericMessageBusSink` and a `MessageBusSource` that extends
+`GenericMessageBusSource`. The `MessageBusSink` must override the `sendMessages` method. This method is
+given a list of serialized messages that it is required to send through the sink.
+
+Once you've implemented your custom MessageBus in either TypeScript, you must provide it through DI 
+during bootstrap like so:
+
+In TypeScript:
+```TypeScript
+// public_api.ts, running on the UI side
+import {platform, APP_INITIALIZER, Injector} from 'angular2/core';
+import {
+    WORKER_RENDER_PLATFORM,
+    WORKER_RENDER_APPLICATION_COMMON,
+    initializeGenericWorkerRenderer,
+    MessageBus
+} from 'angular2/platform/worker_render';
+
+var bus = new MyAwesomeMessageBus();
+platform([WORKER_RENDER_PLATFORM])
+.application([WORKER_RENDER_APPLICATION_COMMON, {provide: MessageBus, useValue: bus},
+  { provide: APP_INITIALIZER, 
+    useFactory: (injector) => () => initializeGenericWorkerRenderer(injector),
+    deps: [Injector],
+    multi: true
+  }
+]);
+```
+```TypeScript
+// background_index.ts, running on the application side
+import {WORKER_APP_PLATFORM, genericWorkerAppProviders} from "angular2/platform/worker_app";
+import {NgZone, platform} from "angular/core";
+import {MyApp} from './app';
+
+/**
+ * Do initialization work here to set up the app thread and MessageBus;
+ * Once you have a working MessageBus you should bootstrap your app.
+ */
+
+platform([WORKER_APP_PLATFORM_PROVIDERS])
+.application([WORKER_APP_APPLICATION_COMMON, {provide: MessageBus, useValue: bus},
+{provide: APP_INITIALIZER, useFactory: (zone, bus) => () => initAppThread(zone, bus), multi: true, deps: [NgZone, MessageBus]}])
+.bootstrap(MyApp);
+
+function initAppThread(zone: NgZone, bus: MyAwesomeMessageBus): void{
+  /**
+   * Here you can do any initilization work that requires the app providers to be initialized.
+   * At a minimum, you must attach your bus to the zone and setup a DOM adapter.
+   * Depending on your environment you may choose to do more work here.
+  */
+}
+```
+Notice how we use the `WORKER_RENDER_APPLICTION_COMMON` providers instead of the `WORKER_RENDER_APPLICATION` providers on the render thread.
+This is because the `WORKER_RENDER_APPLICATION` providers include an application initializer that starts a new WebWorker/Isolate.
+The `WORKER_RENDER_APPLICATION_COMMON` providers make no assumption about where your application code lives.
+However, we now need to provide our own app initializer. At the very least this initializer needs to call `initializeGenericWorkerRenderer`.
+
+## MessageBroker
+The MessageBroker is a higher level messaging abstraction that sits on top of the MessageBus. It is used when you
+want to execute code on the other side of a runtime boundary and may want to receive the result.
+There are two types of MessageBrokers:
+
+1. The `ServiceMessageBroker` is used by the side that actually performs
+an operation and may return a result;
+2. The `ClientMessageBroker` is used by the side that requests that
+an operation be performed and may want to receive the result.
+
+### Using the MessageBroker In Your Application
+To use MessageBrokers in your application you must initialize both a `ClientMessageBroker` and a
+`ServiceMessageBroker` on the same channel. You can then register methods with the `ServiceMessageBroker` and
+instruct the `ClientMessageBroker` to run those methods. Below is a lightweight example of using
+MessageBrokers in an application. For a more complete example, check out the `WebWorkerRenderer` and
+`MessageBasedRenderer` inside the Angular WebWorker code.
+
+#### Using the MessageBroker in TypeScript
+```TypeScript
+// public_api.ts, which is running on the UI with a method that we want to expose to a WebWorker
+import {WORKER_RENDER_PLATFORM, WORKER_RENDER_APPLICATION, WORKER_SCRIPT, ServiceMessageBrokerFactory} from "angular2/platform/worker_render";
+import {platform} from "angular2/core";
+
+let appRef = platform([WORKER_RENDER_PLATFORM])
+.application([WORKER_RENDER_APPLICATION, {provide: WORKER_SCRIPT, useValue: "loader.js"};
+let injector = instance.injector;
+var broker = injector.get(ServiceMessageBrokerFactory).createMessageBroker("My Broker Channel");
+
+// assume we have some function doCoolThings that takes a string argument and returns a Promise<string>
+broker.registerMethod("awesomeMethod", [PRIMITIVE], (arg1: string) => doCoolThing(arg1), PRIMITIVE);
+```
+```TypeScript
+// background.ts, which is running on a WebWorker and wants to execute a method on the UI
+import {Component, View} from 'angular2/core';
+import {ClientMessageBrokerFactory, PRIMITIVE, UiArguments, FnArgs} from 'angular2/platform/worker_app';
+
+@Component(...)
+@View(...)
+export class MyComponent {
+  constructor(brokerFactory: ClientMessageBrokerFactory) {
+    var broker = brokerFactory.createMessageBroker("My Broker Channel");
+
+    var arguments = [new FnArg(value, PRIMITIVE)];
+    var methodInfo = new UiArguments("awesomeMethod", arguments);
+    broker.runOnService(methodInfo, PRIMTIVE).then((result: string) => {
+      // result will be equal to the return value of doCoolThing(value) that ran on the UI.
+    });
+  }
+}
+```
+#### Using the MessageBroker in Dart
+```Dart
+// index.dart, which is running on the UI with a method that we want to expose to a WebWorker
+import "angular2/core.dart";
+import "angular2/platform/worker_render.dart";
+
+main() {
+  platform([WORKER_RENDER_PLATFORM])
+  .asyncApplication(initIsolate("my_worker.dart")).then((ref) {
+    var broker = ref.injector.get(ServiceMessageBrokerFactory).createMessageBroker("My Broker Channel");
+
+    // assume we have some function doCoolThings that takes a String argument and returns a Future<String>
+    broker.registerMethod("awesomeMethod", [PRIMITIVE], (String arg1) => doCoolThing(arg1), PRIMITIVE);
+  });
+}
+
+```
+```Dart
+// background.dart, which is running on a WebWorker and wants to execute a method on the UI
+import 'package:angular2/core.dart';
+import 'package:angular2/platform/worker_app.dart';
+
+@Component(...)
+@View(...)
+class MyComponent {
+  MyComponent(ClientMessageBrokerFactory brokerFactory) {
+    var broker = brokerFactory.createMessageBroker("My Broker Channel");
+
+    var arguments = [new FnArg(value, PRIMITIVE)];
+    var methodInfo = new UiArguments("awesomeMethod", arguments);
+    broker.runOnService(methodInfo, PRIMTIVE).then((String result) {
+      // result will be equal to the return value of doCoolThing(value) that ran on the UI.
+    });
+  }
+}
+```
+Both the client and the service create new MessageBrokers and attach them to the same channel.
+The service then calls `registerMethod` to register the method that it wants to listen to. Register method takes
+four arguments. The first is the name of the method, the second is the Types of that method's parameters, the
+third is the method itself, and the fourth (which is optional) is the return Type of that method.
+The MessageBroker handles serializing / deserializing your parameters and return types using angular's serializer.
+However, at the moment the serializer only knows how to serialize angular classes like those used by the Renderer.
+If you're passing anything other than those types around in your application you can handle serialization yourself
+and then use the `PRIMITIVE` type to tell the MessageBroker to avoid serializing your data.
+
+The last thing that happens is that the client calls `runOnService` with the name of the method it wants to run,
+a list of that method's arguments and their types, and (optionally) the expected return type.
diff --git a/packages/elements/BUILD.bazel b/packages/elements/BUILD.bazel
new file mode 100644
index 000000000000..8821aaafcc4c
--- /dev/null
+++ b/packages/elements/BUILD.bazel
@@ -0,0 +1,38 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "elements",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/elements",
+    deps = [
+        "//packages/core",
+        "//packages/platform-browser",
+        "@rxjs",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = glob([
+        "**/*.externs.js",
+        "**/package.json",
+    ]),
+    entry_point = "packages/elements/index.js",
+    packages = [
+        "//packages/elements/schematics:npm_package",
+    ],
+    tags = [
+        "ivy-jit",
+        "release-with-framework",
+    ],
+    deps = [
+        ":elements",
+    ],
+)
diff --git a/packages/elements/index.ts b/packages/elements/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/elements/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';
diff --git a/packages/elements/package.json b/packages/elements/package.json
new file mode 100644
index 000000000000..2b44aa73b794
--- /dev/null
+++ b/packages/elements/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@angular/elements",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - library for using Angular Components as Custom Elements",
+  "main": "./bundles/elements.umd.js",
+  "module": "./fesm5/elements.js",
+  "es2015": "./fesm2015/elements.js",
+  "esm5": "./esm5/elements.js",
+  "esm2015": "./esm2015/elements.js",
+  "fesm5": "../fesm5/testing.js",
+  "fesm2015": "../fesm2015/testing.js",
+  "typings": "./elements.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser": "0.0.0-PLACEHOLDER",
+    "rxjs": "^6.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false,
+  "schematics": "./schematics/collection.json"
+}
diff --git a/packages/elements/public_api.ts b/packages/elements/public_api.ts
new file mode 100644
index 000000000000..0b501cc0d7d5
--- /dev/null
+++ b/packages/elements/public_api.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 `elements` package.
+ */
+export {NgElement, NgElementConfig, NgElementConstructor, WithProperties, createCustomElement} from './src/create-custom-element';
+export {NgElementStrategy, NgElementStrategyEvent, NgElementStrategyFactory} from './src/element-strategy';
+export {VERSION} from './src/version';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/elements/rollup.config.js b/packages/elements/rollup.config.js
new file mode 100644
index 000000000000..477863d15e06
--- /dev/null
+++ b/packages/elements/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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  'rxjs': 'rxjs',
+  'rxjs/operators': 'rxjs.operators'
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/elements/fesm5/elements.js',
+  dest: '../../dist/packages-dist/elements/bundles/elements.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/elements'},
+  moduleName: 'ng.elements',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/elements/schematics/BUILD.bazel b/packages/elements/schematics/BUILD.bazel
new file mode 100644
index 000000000000..1ab8a09b6147
--- /dev/null
+++ b/packages/elements/schematics/BUILD.bazel
@@ -0,0 +1,27 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "npm_package", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+exports_files([
+    "package.json",
+    "collection.json",
+])
+
+genrule(
+    name = "collection",
+    srcs = ["collection.json"],
+    outs = ["test-collection.json"],
+    cmd = "cp $< $@",
+    output_to_bindir = 1,
+)
+
+npm_package(
+    name = "npm_package",
+    srcs = [
+        "collection.json",
+    ],
+    deps = [
+        "//packages/elements/schematics/ng-add",
+    ],
+)
diff --git a/packages/elements/schematics/collection.json b/packages/elements/schematics/collection.json
new file mode 100644
index 000000000000..a5d825684df7
--- /dev/null
+++ b/packages/elements/schematics/collection.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Adds the document-register-element polyfill.",
+      "factory": "./ng-add"
+    }
+  }
+}
diff --git a/packages/elements/schematics/ng-add/BUILD.bazel b/packages/elements/schematics/ng-add/BUILD.bazel
new file mode 100644
index 000000000000..28bdcb0a2d4a
--- /dev/null
+++ b/packages/elements/schematics/ng-add/BUILD.bazel
@@ -0,0 +1,44 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "npm_package", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "ng-add",
+    srcs = glob(
+        [
+            "index.ts",
+            "schema.ts",
+        ],
+    ),
+    deps = [
+        "//packages/common",
+        "//packages/core",
+        "@rxjs",
+    ],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        [
+            "index_spec.ts",
+        ],
+    ),
+    deps = [
+        ":ng-add",
+        "//packages/common",
+        "//packages/core",
+        "@rxjs",
+        "@rxjs//operators",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    deps = [
+        ":test_lib",
+        "//packages/elements/schematics:collection",
+    ],
+)
diff --git a/packages/elements/schematics/ng-add/index.ts b/packages/elements/schematics/ng-add/index.ts
new file mode 100644
index 000000000000..6928e3638348
--- /dev/null
+++ b/packages/elements/schematics/ng-add/index.ts
@@ -0,0 +1,76 @@
+/**
+ * @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 {Rule, SchematicContext, Tree, chain, noop} from '@angular-devkit/schematics';
+import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
+import {Schema} from './schema';
+
+export default function(options: Schema): Rule {
+  return chain([
+    options && options.skipPackageJson ? noop() : addPackageJsonDependency(), addScript(options)
+  ]);
+}
+
+/** Adds a package.json dependency for document-register-element */
+function addPackageJsonDependency() {
+  return (host: Tree, context: SchematicContext) => {
+
+    if (host.exists('package.json')) {
+      const jsonStr = host.read('package.json') !.toString('utf-8');
+      const json = JSON.parse(jsonStr);
+
+      // If there are no dependencies, create an entry for dependencies.
+      const type = 'dependencies';
+      if (!json[type]) {
+        json[type] = {};
+      }
+
+      // If not already present, add the dependency.
+      const pkg = 'document-register-element';
+      const version = '^1.7.2';
+      if (!json[type][pkg]) {
+        json[type][pkg] = version;
+      }
+
+      // Write the JSON back to package.json
+      host.overwrite('package.json', JSON.stringify(json, null, 2));
+      context.logger.log('info', 'Added `document-register-element` as a dependency.');
+
+      // Install the dependency
+      context.addTask(new NodePackageInstallTask());
+    }
+
+    return host;
+  };
+}
+
+/** Adds the document-register-element.js script to the angular CLI json. */
+function addScript(options: Schema) {
+  return (host: Tree, context: SchematicContext) => {
+    const script = 'node_modules/document-register-element/build/document-register-element.js';
+
+
+    try {
+      // Handle the new json - angular.json
+      const angularJsonFile = host.read('angular.json');
+      if (angularJsonFile) {
+        const json = JSON.parse(angularJsonFile.toString('utf-8'));
+        const project = Object.keys(json['projects'])[0] || options.project;
+        const scripts = json['projects'][project]['architect']['build']['options']['scripts'];
+        scripts.push({input: script});
+        host.overwrite('angular.json', JSON.stringify(json, null, 2));
+      }
+    } catch (e) {
+      context.logger.log(
+          'warn', 'Failed to add the polyfill document-register-element.js to scripts');
+    }
+
+    context.logger.log('info', 'Added document-register-element.js polyfill to scripts');
+
+    return host;
+  };
+}
diff --git a/packages/elements/schematics/ng-add/index_spec.ts b/packages/elements/schematics/ng-add/index_spec.ts
new file mode 100644
index 000000000000..1a4cf30a4036
--- /dev/null
+++ b/packages/elements/schematics/ng-add/index_spec.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+import * as path from 'path';
+import {Observable} from 'rxjs';
+import {concatMap} from 'rxjs/operators';
+
+import {Schema as ElementsOptions} from './schema';
+
+
+const polyfillPath = 'node_modules/document-register-element/build/document-register-element.js';
+
+// tslint:disable:max-line-length
+describe('Elements Schematics', () => {
+  const schematicRunner = new SchematicTestRunner(
+      '@angular/elements', path.join(__dirname, '../test-collection.json'), );
+  const defaultOptions: ElementsOptions = {project: 'bar', skipPackageJson: false};
+
+  let appTree: UnitTestTree;
+
+  // tslint:disable-next-line:no-any
+  const workspaceOptions: any = {
+    name: 'workspace',
+    newProjectRoot: 'projects',
+    version: '6.0.0',
+  };
+
+  // tslint:disable-next-line:no-any
+  const appOptions: any = {
+    name: 'elements',
+    inlineStyle: false,
+    inlineTemplate: false,
+    routing: false,
+    style: 'css',
+    skipTests: false,
+  };
+
+  beforeEach((done) => {
+    schematicRunner.runExternalSchematicAsync('@schematics/angular', 'workspace', workspaceOptions)
+        .pipe(concatMap(
+            (tree) => schematicRunner.runExternalSchematicAsync(
+                '@schematics/angular', 'application', appOptions, tree)))
+        .subscribe((tree: UnitTestTree) => appTree = tree, done.fail, done);
+  });
+
+  it('should run the ng-add schematic', () => {
+    const tree = schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
+    const configText = tree.readContent('/angular.json');
+    const config = JSON.parse(configText);
+    const scripts = config.projects.elements.architect.build.options.scripts;
+    expect(scripts[0].input).toEqual(polyfillPath);
+  });
+});
diff --git a/packages/elements/schematics/ng-add/schema.ts b/packages/elements/schematics/ng-add/schema.ts
new file mode 100644
index 000000000000..845cd6ca0313
--- /dev/null
+++ b/packages/elements/schematics/ng-add/schema.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 interface Schema {
+  /**
+   * Skip package.json install.
+   */
+  skipPackageJson: boolean;
+
+  /**
+   * The project that needs the polyfill scripts
+   */
+  project: string;
+}
diff --git a/packages/elements/src/component-factory-strategy.ts b/packages/elements/src/component-factory-strategy.ts
new file mode 100644
index 000000000000..a160d174be4a
--- /dev/null
+++ b/packages/elements/src/component-factory-strategy.ts
@@ -0,0 +1,255 @@
+/**
+ * @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 {ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, EventEmitter, Injector, OnChanges, SimpleChange, SimpleChanges, Type} from '@angular/core';
+import {Observable, merge} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+import {NgElementStrategy, NgElementStrategyEvent, NgElementStrategyFactory} from './element-strategy';
+import {extractProjectableNodes} from './extract-projectable-nodes';
+import {isFunction, scheduler, strictEquals} from './utils';
+
+/** Time in milliseconds to wait before destroying the component ref when disconnected. */
+const DESTROY_DELAY = 10;
+
+/**
+ * Factory that creates new ComponentNgElementStrategy instance. Gets the component factory with the
+ * constructor's injector's factory resolver and passes that factory to each strategy.
+ *
+ * @experimental
+ */
+export class ComponentNgElementStrategyFactory implements NgElementStrategyFactory {
+  componentFactory: ComponentFactory<any>;
+
+  constructor(private component: Type<any>, private injector: Injector) {
+    this.componentFactory =
+        injector.get(ComponentFactoryResolver).resolveComponentFactory(component);
+  }
+
+  create(injector: Injector) {
+    return new ComponentNgElementStrategy(this.componentFactory, injector);
+  }
+}
+
+/**
+ * Creates and destroys a component ref using a component factory and handles change detection
+ * in response to input changes.
+ *
+ * @experimental
+ */
+export class ComponentNgElementStrategy implements NgElementStrategy {
+  /** Merged stream of the component's output events. */
+  // TODO(issue/24571): remove '!'.
+  events !: Observable<NgElementStrategyEvent>;
+
+  /** Reference to the component that was created on connect. */
+  // TODO(issue/24571): remove '!'.
+  private componentRef !: ComponentRef<any>| null;
+
+  /** Changes that have been made to the component ref since the last time onChanges was called. */
+  private inputChanges: SimpleChanges|null = null;
+
+  /** Whether the created component implements the onChanges function. */
+  private implementsOnChanges = false;
+
+  /** Whether a change detection has been scheduled to run on the component. */
+  private scheduledChangeDetectionFn: (() => void)|null = null;
+
+  /** Callback function that when called will cancel a scheduled destruction on the component. */
+  private scheduledDestroyFn: (() => void)|null = null;
+
+  /** Initial input values that were set before the component was created. */
+  private readonly initialInputValues = new Map<string, any>();
+
+  /** Set of inputs that were not initially set when the component was created. */
+  private readonly uninitializedInputs = new Set<string>();
+
+  constructor(private componentFactory: ComponentFactory<any>, private injector: Injector) {}
+
+  /**
+   * Initializes a new component if one has not yet been created and cancels any scheduled
+   * destruction.
+   */
+  connect(element: HTMLElement) {
+    // If the element is marked to be destroyed, cancel the task since the component was reconnected
+    if (this.scheduledDestroyFn !== null) {
+      this.scheduledDestroyFn();
+      this.scheduledDestroyFn = null;
+      return;
+    }
+
+    if (!this.componentRef) {
+      this.initializeComponent(element);
+    }
+  }
+
+  /**
+   * Schedules the component to be destroyed after some small delay in case the element is just
+   * being moved across the DOM.
+   */
+  disconnect() {
+    // Return if there is no componentRef or the component is already scheduled for destruction
+    if (!this.componentRef || this.scheduledDestroyFn !== null) {
+      return;
+    }
+
+    // Schedule the component to be destroyed after a small timeout in case it is being
+    // moved elsewhere in the DOM
+    this.scheduledDestroyFn = scheduler.schedule(() => {
+      if (this.componentRef) {
+        this.componentRef !.destroy();
+        this.componentRef = null;
+      }
+    }, DESTROY_DELAY);
+  }
+
+  /**
+   * Returns the component property value. If the component has not yet been created, the value is
+   * retrieved from the cached initialization values.
+   */
+  getInputValue(property: string): any {
+    if (!this.componentRef) {
+      return this.initialInputValues.get(property);
+    }
+
+    return (this.componentRef.instance as any)[property];
+  }
+
+  /**
+   * Sets the input value for the property. If the component has not yet been created, the value is
+   * cached and set when the component is created.
+   */
+  setInputValue(property: string, value: any): void {
+    if (strictEquals(value, this.getInputValue(property))) {
+      return;
+    }
+
+    if (!this.componentRef) {
+      this.initialInputValues.set(property, value);
+      return;
+    }
+
+    this.recordInputChange(property, value);
+    (this.componentRef.instance as any)[property] = value;
+    this.scheduleDetectChanges();
+  }
+
+  /**
+   * Creates a new component through the component factory with the provided element host and
+   * sets up its initial inputs, listens for outputs changes, and runs an initial change detection.
+   */
+  protected initializeComponent(element: HTMLElement) {
+    const childInjector = Injector.create({providers: [], parent: this.injector});
+    const projectableNodes =
+        extractProjectableNodes(element, this.componentFactory.ngContentSelectors);
+    this.componentRef = this.componentFactory.create(childInjector, projectableNodes, element);
+
+    this.implementsOnChanges =
+        isFunction((this.componentRef.instance as any as OnChanges).ngOnChanges);
+
+    this.initializeInputs();
+    this.initializeOutputs();
+
+    this.detectChanges();
+
+    const applicationRef = this.injector.get<ApplicationRef>(ApplicationRef);
+    applicationRef.attachView(this.componentRef.hostView);
+  }
+
+  /** Set any stored initial inputs on the component's properties. */
+  protected initializeInputs(): void {
+    this.componentFactory.inputs.forEach(({propName}) => {
+      const initialValue = this.initialInputValues.get(propName);
+      if (initialValue) {
+        this.setInputValue(propName, initialValue);
+      } else {
+        // Keep track of inputs that were not initialized in case we need to know this for
+        // calling ngOnChanges with SimpleChanges
+        this.uninitializedInputs.add(propName);
+      }
+    });
+
+    this.initialInputValues.clear();
+  }
+
+  /** Sets up listeners for the component's outputs so that the events stream emits the events. */
+  protected initializeOutputs(): void {
+    const eventEmitters = this.componentFactory.outputs.map(({propName, templateName}) => {
+      const emitter = (this.componentRef !.instance as any)[propName] as EventEmitter<any>;
+      return emitter.pipe(map((value: any) => ({name: templateName, value})));
+    });
+
+    this.events = merge(...eventEmitters);
+  }
+
+  /** Calls ngOnChanges with all the inputs that have changed since the last call. */
+  protected callNgOnChanges(): void {
+    if (!this.implementsOnChanges || this.inputChanges === null) {
+      return;
+    }
+
+    // Cache the changes and set inputChanges to null to capture any changes that might occur
+    // during ngOnChanges.
+    const inputChanges = this.inputChanges;
+    this.inputChanges = null;
+    (this.componentRef !.instance as any as OnChanges).ngOnChanges(inputChanges);
+  }
+
+  /**
+   * Schedules change detection to run on the component.
+   * Ignores subsequent calls if already scheduled.
+   */
+  protected scheduleDetectChanges(): void {
+    if (this.scheduledChangeDetectionFn) {
+      return;
+    }
+
+    this.scheduledChangeDetectionFn = scheduler.scheduleBeforeRender(() => {
+      this.scheduledChangeDetectionFn = null;
+      this.detectChanges();
+    });
+  }
+
+  /**
+   * Records input changes so that the component receives SimpleChanges in its onChanges function.
+   */
+  protected recordInputChange(property: string, currentValue: any): void {
+    // Do not record the change if the component does not implement `OnChanges`.
+    if (this.componentRef && !this.implementsOnChanges) {
+      return;
+    }
+
+    if (this.inputChanges === null) {
+      this.inputChanges = {};
+    }
+
+    // If there already is a change, modify the current value to match but leave the values for
+    // previousValue and isFirstChange.
+    const pendingChange = this.inputChanges[property];
+    if (pendingChange) {
+      pendingChange.currentValue = currentValue;
+      return;
+    }
+
+    const isFirstChange = this.uninitializedInputs.has(property);
+    this.uninitializedInputs.delete(property);
+
+    const previousValue = isFirstChange ? undefined : this.getInputValue(property);
+    this.inputChanges[property] = new SimpleChange(previousValue, currentValue, isFirstChange);
+  }
+
+  /** Runs change detection on the component. */
+  protected detectChanges(): void {
+    if (!this.componentRef) {
+      return;
+    }
+
+    this.callNgOnChanges();
+    this.componentRef !.changeDetectorRef.detectChanges();
+  }
+}
diff --git a/packages/elements/src/create-custom-element.ts b/packages/elements/src/create-custom-element.ts
new file mode 100644
index 000000000000..85078e92052e
--- /dev/null
+++ b/packages/elements/src/create-custom-element.ts
@@ -0,0 +1,197 @@
+/**
+ * @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, Type} from '@angular/core';
+import {Subscription} from 'rxjs';
+
+import {ComponentNgElementStrategyFactory} from './component-factory-strategy';
+import {NgElementStrategy, NgElementStrategyFactory} from './element-strategy';
+import {createCustomEvent, getComponentInputs, getDefaultAttributeToPropertyInputs} from './utils';
+
+/**
+ * Prototype for a class constructor based on an Angular component
+ * that can be used for custom element registration. Implemented and returned
+ * by the {@link createCustomElement createCustomElement() function}.
+ *
+ * @experimental
+ */
+export interface NgElementConstructor<P> {
+  /**
+   * An array of observed attribute names for the custom element,
+   * derived by transforming input property names from the source component.
+   */
+  readonly observedAttributes: string[];
+
+  /**
+   * Initializes a constructor instance.
+   * @param injector The source component's injector.
+   */
+  new (injector: Injector): NgElement&WithProperties<P>;
+}
+
+/**
+ * Implements the functionality needed for a custom element.
+ *
+ * @experimental
+ */
+export abstract class NgElement extends HTMLElement {
+  /**
+   * The strategy that controls how a component is transformed in a custom element.
+   */
+  // TODO(issue/24571): remove '!'.
+  protected ngElementStrategy !: NgElementStrategy;
+  /**
+   * A subscription to change, connect, and disconnect events in the custom element.
+   */
+  protected ngElementEventsSubscription: Subscription|null = null;
+
+  /**
+    * Prototype for a handler that responds to a change in an observed attribute.
+    * @param attrName The name of the attribute that has changed.
+    * @param oldValue The previous value of the attribute.
+    * @param newValue The new value of the attribute.
+    * @param namespace The namespace in which the attribute is defined.
+    * @returns Nothing.
+    */
+  abstract attributeChangedCallback(
+      attrName: string, oldValue: string|null, newValue: string, namespace?: string): void;
+  /**
+   * Prototype for a handler that responds to the insertion of the custom element in the DOM.
+   * @returns Nothing.
+   */
+  abstract connectedCallback(): void;
+  /**
+   * Prototype for a handler that responds to the deletion of the custom element from the DOM.
+   * @returns Nothing.
+   */
+  abstract disconnectedCallback(): void;
+}
+
+/**
+ * Additional type information that can be added to the NgElement class,
+ * for properties that are added based
+ * on the inputs and methods of the underlying component.
+ *
+ * @experimental
+ */
+export type WithProperties<P> = {
+  [property in keyof P]: P[property]
+};
+
+/**
+ * A configuration that initializes an NgElementConstructor with the
+ * dependencies and strategy it needs to transform a component into
+ * a custom element class.
+ *
+ * @experimental
+ */
+export interface NgElementConfig {
+  /**
+   * The injector to use for retrieving the component's factory.
+   */
+  injector: Injector;
+  /**
+   * An optional custom strategy factory to use instead of the default.
+   * The strategy controls how the tranformation is performed.
+   */
+  strategyFactory?: NgElementStrategyFactory;
+}
+
+/**
+ *  @description Creates a custom element class based on an Angular component.
+ *
+ * Builds a class that encapsulates the functionality of the provided component and
+ * uses the configuration information to provide more context to the class.
+ * Takes the component factory's inputs and outputs to convert them to the proper
+ * custom element API and add hooks to input changes.
+ *
+ * The configuration's injector is the initial injector set on the class,
+ * and used by default for each created instance.This behavior can be overridden with the
+ * static property to affect all newly created instances, or as a constructor argument for
+ * one-off creations.
+ *
+ * @param component The component to transform.
+ * @param config A configuration that provides initialization information to the created class.
+ * @returns The custom-element construction class, which can be registered with
+ * a browser's `CustomElementRegistry`.
+ *
+ * @experimental
+ */
+export function createCustomElement<P>(
+    component: Type<any>, config: NgElementConfig): NgElementConstructor<P> {
+  const inputs = getComponentInputs(component, config.injector);
+
+  const strategyFactory =
+      config.strategyFactory || new ComponentNgElementStrategyFactory(component, config.injector);
+
+  const attributeToPropertyInputs = getDefaultAttributeToPropertyInputs(inputs);
+
+  class NgElementImpl extends NgElement {
+    // Work around a bug in closure typed optimizations(b/79557487) where it is not honoring static
+    // field externs. So using quoted access to explicitly prevent renaming.
+    static readonly['observedAttributes'] = Object.keys(attributeToPropertyInputs);
+
+    constructor(injector?: Injector) {
+      super();
+
+      // Note that some polyfills (e.g. document-register-element) do not call the constructor.
+      // Do not assume this strategy has been created.
+      // TODO(andrewseguin): Add e2e tests that cover cases where the constructor isn't called. For
+      // now this is tested using a Google internal test suite.
+      this.ngElementStrategy = strategyFactory.create(injector || config.injector);
+    }
+
+    attributeChangedCallback(
+        attrName: string, oldValue: string|null, newValue: string, namespace?: string): void {
+      if (!this.ngElementStrategy) {
+        this.ngElementStrategy = strategyFactory.create(config.injector);
+      }
+
+      const propName = attributeToPropertyInputs[attrName] !;
+      this.ngElementStrategy.setInputValue(propName, newValue);
+    }
+
+    connectedCallback(): void {
+      if (!this.ngElementStrategy) {
+        this.ngElementStrategy = strategyFactory.create(config.injector);
+      }
+
+      this.ngElementStrategy.connect(this);
+
+      // Listen for events from the strategy and dispatch them as custom events
+      this.ngElementEventsSubscription = this.ngElementStrategy.events.subscribe(e => {
+        const customEvent = createCustomEvent(this.ownerDocument, e.name, e.value);
+        this.dispatchEvent(customEvent);
+      });
+    }
+
+    disconnectedCallback(): void {
+      if (this.ngElementStrategy) {
+        this.ngElementStrategy.disconnect();
+      }
+
+      if (this.ngElementEventsSubscription) {
+        this.ngElementEventsSubscription.unsubscribe();
+        this.ngElementEventsSubscription = null;
+      }
+    }
+  }
+
+  // Add getters and setters to the prototype for each property input. If the config does not
+  // contain property inputs, use all inputs by default.
+  inputs.map(({propName}) => propName).forEach(property => {
+    Object.defineProperty(NgElementImpl.prototype, property, {
+      get: function() { return this.ngElementStrategy.getInputValue(property); },
+      set: function(newValue: any) { this.ngElementStrategy.setInputValue(property, newValue); },
+      configurable: true,
+      enumerable: true,
+    });
+  });
+
+  return (NgElementImpl as any) as NgElementConstructor<P>;
+}
\ No newline at end of file
diff --git a/packages/elements/src/element-strategy.ts b/packages/elements/src/element-strategy.ts
new file mode 100644
index 000000000000..112cd69afc00
--- /dev/null
+++ b/packages/elements/src/element-strategy.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
+ */
+import {ComponentFactory, Injector} from '@angular/core';
+import {Observable} from 'rxjs';
+
+/**
+ * Interface for the events emitted through the NgElementStrategy.
+ *
+ * @experimental
+ */
+export interface NgElementStrategyEvent {
+  name: string;
+  value: any;
+}
+
+/**
+ * Underlying strategy used by the NgElement to create/destroy the component and react to input
+ * changes.
+ *
+ * @experimental
+ */
+export interface NgElementStrategy {
+  events: Observable<NgElementStrategyEvent>;
+
+  connect(element: HTMLElement): void;
+  disconnect(): void;
+  getInputValue(propName: string): any;
+  setInputValue(propName: string, value: string): void;
+}
+
+/**
+ * Factory used to create new strategies for each NgElement instance.
+ *
+ * @experimental
+ */
+export interface NgElementStrategyFactory {
+  /** Creates a new instance to be used for an NgElement. */
+  create(injector: Injector): NgElementStrategy;
+}
diff --git a/packages/elements/src/extract-projectable-nodes.ts b/packages/elements/src/extract-projectable-nodes.ts
new file mode 100644
index 000000000000..b6df05bcba8c
--- /dev/null
+++ b/packages/elements/src/extract-projectable-nodes.ts
@@ -0,0 +1,54 @@
+/**
+ * @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
+ */
+
+// NOTE: This is a (slightly improved) version of what is used in ngUpgrade's
+//       `DowngradeComponentAdapter`.
+// TODO(gkalpak): Investigate if it makes sense to share the code.
+
+import {isElement, matchesSelector} from './utils';
+
+export function extractProjectableNodes(host: HTMLElement, ngContentSelectors: string[]): Node[][] {
+  const nodes = host.childNodes;
+  const projectableNodes: Node[][] = ngContentSelectors.map(() => []);
+  let wildcardIndex = -1;
+
+  ngContentSelectors.some((selector, i) => {
+    if (selector === '*') {
+      wildcardIndex = i;
+      return true;
+    }
+    return false;
+  });
+
+  for (let i = 0, ii = nodes.length; i < ii; ++i) {
+    const node = nodes[i];
+    const ngContentIndex = findMatchingIndex(node, ngContentSelectors, wildcardIndex);
+
+    if (ngContentIndex !== -1) {
+      projectableNodes[ngContentIndex].push(node);
+    }
+  }
+
+  return projectableNodes;
+}
+
+function findMatchingIndex(node: Node, selectors: string[], defaultIndex: number): number {
+  let matchingIndex = defaultIndex;
+
+  if (isElement(node)) {
+    selectors.some((selector, i) => {
+      if ((selector !== '*') && matchesSelector(node, selector)) {
+        matchingIndex = i;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  return matchingIndex;
+}
diff --git a/packages/elements/src/utils.ts b/packages/elements/src/utils.ts
new file mode 100644
index 000000000000..bd05304cd0b5
--- /dev/null
+++ b/packages/elements/src/utils.ts
@@ -0,0 +1,129 @@
+/**
+ * @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, Injector, Type} from '@angular/core';
+
+const elProto = Element.prototype as any;
+const matches = elProto.matches || elProto.matchesSelector || elProto.mozMatchesSelector ||
+    elProto.msMatchesSelector || elProto.oMatchesSelector || elProto.webkitMatchesSelector;
+
+/**
+ * Provide methods for scheduling the execution of a callback.
+ */
+export const scheduler = {
+  /**
+   * Schedule a callback to be called after some delay.
+   *
+   * Returns a function that when executed will cancel the scheduled function.
+   */
+  schedule(taskFn: () => void, delay: number): () =>
+      void{const id = setTimeout(taskFn, delay); return () => clearTimeout(id);},
+
+  /**
+   * Schedule a callback to be called before the next render.
+   * (If `window.requestAnimationFrame()` is not available, use `scheduler.schedule()` instead.)
+   *
+   * Returns a function that when executed will cancel the scheduled function.
+   */
+  scheduleBeforeRender(taskFn: () => void): () => void{
+    // TODO(gkalpak): Implement a better way of accessing `requestAnimationFrame()`
+    //                (e.g. accounting for vendor prefix, SSR-compatibility, etc).
+    if (typeof window === 'undefined') {
+      // For SSR just schedule immediately.
+      return scheduler.schedule(taskFn, 0);
+    }
+
+    if (typeof window.requestAnimationFrame === 'undefined') {
+      const frameMs = 16;
+      return scheduler.schedule(taskFn, frameMs);
+    }
+
+    const id = window.requestAnimationFrame(taskFn);
+    return () => window.cancelAnimationFrame(id);
+  },
+};
+
+/**
+ * Convert a camelCased string to kebab-cased.
+ */
+export function camelToDashCase(input: string): string {
+  return input.replace(/[A-Z]/g, char => `-${char.toLowerCase()}`);
+}
+
+/**
+ * Create a `CustomEvent` (even on browsers where `CustomEvent` is not a constructor).
+ */
+export function createCustomEvent(doc: Document, name: string, detail: any): CustomEvent {
+  const bubbles = false;
+  const cancelable = false;
+
+  // On IE9-11, `CustomEvent` is not a constructor.
+  if (typeof CustomEvent !== 'function') {
+    const event = doc.createEvent('CustomEvent');
+    event.initCustomEvent(name, bubbles, cancelable, detail);
+    return event;
+  }
+
+  return new CustomEvent(name, {bubbles, cancelable, detail});
+}
+
+/**
+ * Check whether the input is an `Element`.
+ */
+export function isElement(node: Node): node is Element {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+
+/**
+ * Check whether the input is a function.
+ */
+export function isFunction(value: any): value is Function {
+  return typeof value === 'function';
+}
+
+/**
+ * Convert a kebab-cased string to camelCased.
+ */
+export function kebabToCamelCase(input: string): string {
+  return input.replace(/-([a-z\d])/g, (_, char) => char.toUpperCase());
+}
+
+/**
+ * Check whether an `Element` matches a CSS selector.
+ */
+export function matchesSelector(element: Element, selector: string): boolean {
+  return matches.call(element, selector);
+}
+
+/**
+ * Test two values for strict equality, accounting for the fact that `NaN !== NaN`.
+ */
+export function strictEquals(value1: any, value2: any): boolean {
+  return value1 === value2 || (value1 !== value1 && value2 !== value2);
+}
+
+/** Gets a map of default set of attributes to observe and the properties they affect. */
+export function getDefaultAttributeToPropertyInputs(
+    inputs: {propName: string, templateName: string}[]) {
+  const attributeToPropertyInputs: {[key: string]: string} = {};
+  inputs.forEach(({propName, templateName}) => {
+    attributeToPropertyInputs[camelToDashCase(templateName)] = propName;
+  });
+
+  return attributeToPropertyInputs;
+}
+
+/**
+ * Gets a component's set of inputs. Uses the injector to get the component factory where the inputs
+ * are defined.
+ */
+export function getComponentInputs(
+    component: Type<any>, injector: Injector): {propName: string, templateName: string}[] {
+  const componentFactoryResolver: ComponentFactoryResolver = injector.get(ComponentFactoryResolver);
+  const componentFactory = componentFactoryResolver.resolveComponentFactory(component);
+  return componentFactory.inputs;
+}
diff --git a/packages/elements/src/version.ts b/packages/elements/src/version.ts
new file mode 100644
index 000000000000..1b56724e3e72
--- /dev/null
+++ b/packages/elements/src/version.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 {Version} from '@angular/core';
+/**
+ * @experimental
+ */
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/elements/test/BUILD.bazel b/packages/elements/test/BUILD.bazel
new file mode 100644
index 000000000000..ec44be216b9b
--- /dev/null
+++ b/packages/elements/test/BUILD.bazel
@@ -0,0 +1,45 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/elements",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser-dynamic/testing",
+        "//packages/platform-browser/testing",
+        "@rxjs",
+    ],
+)
+
+filegroup(
+    name = "elements_test_bootstrap_scripts",
+    # do not sort
+    srcs = [
+        "@angular_deps//:node_modules/@webcomponents/custom-elements/src/native-shim.js",
+        "@angular_deps//:node_modules/reflect-metadata/Reflect.js",
+        "@angular_deps//:node_modules/zone.js/dist/zone.js",
+        "@angular_deps//:node_modules/zone.js/dist/zone-testing.js",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test",
+    bootstrap = [
+        ":elements_test_bootstrap_scripts",
+    ],
+    # do not sort
+    deps = [
+        "@angular_deps//:node_modules/tslib/tslib.js",
+        "//tools/testing:browser",
+        ":test_lib",
+    ],
+)
diff --git a/packages/elements/test/component-factory-strategy_spec.ts b/packages/elements/test/component-factory-strategy_spec.ts
new file mode 100644
index 000000000000..dbf702b27f13
--- /dev/null
+++ b/packages/elements/test/component-factory-strategy_spec.ts
@@ -0,0 +1,266 @@
+/**
+ * @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 {ComponentFactory, ComponentRef, Injector, NgModuleRef, SimpleChange, SimpleChanges, Type} from '@angular/core';
+import {fakeAsync, tick} from '@angular/core/testing';
+import {Subject} from 'rxjs';
+
+import {ComponentNgElementStrategy, ComponentNgElementStrategyFactory} from '../src/component-factory-strategy';
+import {NgElementStrategyEvent} from '../src/element-strategy';
+
+describe('ComponentFactoryNgElementStrategy', () => {
+  let factory: FakeComponentFactory;
+  let strategy: ComponentNgElementStrategy;
+
+  let injector: any;
+  let componentRef: any;
+  let applicationRef: any;
+
+  beforeEach(() => {
+    factory = new FakeComponentFactory();
+    componentRef = factory.componentRef;
+
+    applicationRef = jasmine.createSpyObj('applicationRef', ['attachView']);
+    injector = jasmine.createSpyObj('injector', ['get']);
+    injector.get.and.returnValue(applicationRef);
+
+    strategy = new ComponentNgElementStrategy(factory, injector);
+  });
+
+  it('should create a new strategy from the factory', () => {
+    const factoryResolver = jasmine.createSpyObj('factoryResolver', ['resolveComponentFactory']);
+    factoryResolver.resolveComponentFactory.and.returnValue(factory);
+    injector.get.and.returnValue(factoryResolver);
+
+    const strategyFactory = new ComponentNgElementStrategyFactory(FakeComponent, injector);
+    expect(strategyFactory.create(injector)).toBeTruthy();
+  });
+
+  describe('after connected', () => {
+    beforeEach(() => {
+      // Set up an initial value to make sure it is passed to the component
+      strategy.setInputValue('fooFoo', 'fooFoo-1');
+      strategy.connect(document.createElement('div'));
+    });
+
+    it('should attach the component to the view',
+       () => { expect(applicationRef.attachView).toHaveBeenCalledWith(componentRef.hostView); });
+
+    it('should detect changes',
+       () => { expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalled(); });
+
+    it('should listen to output events', () => {
+      const events: NgElementStrategyEvent[] = [];
+      strategy.events.subscribe(e => events.push(e));
+
+      componentRef.instance.output1.next('output-1a');
+      componentRef.instance.output1.next('output-1b');
+      componentRef.instance.output2.next('output-2a');
+      expect(events).toEqual([
+        {name: 'templateOutput1', value: 'output-1a'},
+        {name: 'templateOutput1', value: 'output-1b'},
+        {name: 'templateOutput2', value: 'output-2a'},
+      ]);
+    });
+
+    it('should initialize the component with initial values', () => {
+      expect(strategy.getInputValue('fooFoo')).toBe('fooFoo-1');
+      expect(componentRef.instance.fooFoo).toBe('fooFoo-1');
+    });
+
+    it('should call ngOnChanges with the change', () => {
+      expectSimpleChanges(
+          componentRef.instance.simpleChanges[0],
+          {fooFoo: new SimpleChange(undefined, 'fooFoo-1', false)});
+    });
+  });
+
+  it('should not call ngOnChanges if not present on the component', () => {
+    factory.componentRef.instance = new FakeComponentWithoutNgOnChanges();
+
+    // Should simply succeed without problems (did not try to call ngOnChanges)
+    strategy.connect(document.createElement('div'));
+  });
+
+  describe('when inputs change and not connected', () => {
+    it('should cache the value', () => {
+      strategy.setInputValue('fooFoo', 'fooFoo-1');
+      expect(strategy.getInputValue('fooFoo')).toBe('fooFoo-1');
+
+      // Sanity check: componentRef isn't changed since its not even on the strategy
+      expect(componentRef.instance.fooFoo).toBe(undefined);
+    });
+
+    it('should not detect changes', fakeAsync(() => {
+         strategy.setInputValue('fooFoo', 'fooFoo-1');
+         tick(16);  // scheduler waits 16ms if RAF is unavailable
+         expect(componentRef.changeDetectorRef.detectChanges).not.toHaveBeenCalled();
+       }));
+  });
+
+  describe('when inputs change and is connected', () => {
+    beforeEach(() => { strategy.connect(document.createElement('div')); });
+
+    it('should be set on the component instance', () => {
+      strategy.setInputValue('fooFoo', 'fooFoo-1');
+      expect(componentRef.instance.fooFoo).toBe('fooFoo-1');
+      expect(strategy.getInputValue('fooFoo')).toBe('fooFoo-1');
+    });
+
+    it('should detect changes', fakeAsync(() => {
+         // Connect detected changes automatically
+         expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(1);
+
+         strategy.setInputValue('fooFoo', 'fooFoo-1');
+         tick(16);  // scheduler waits 16ms if RAF is unavailable
+         expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(2);
+       }));
+
+    it('should detect changes once for multiple input changes', fakeAsync(() => {
+         // Connect detected changes automatically
+         expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(1);
+
+         strategy.setInputValue('fooFoo', 'fooFoo-1');
+         strategy.setInputValue('barBar', 'barBar-1');
+         tick(16);  // scheduler waits 16ms if RAF is unavailable
+         expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(2);
+       }));
+
+    it('should call ngOnChanges', fakeAsync(() => {
+         strategy.setInputValue('fooFoo', 'fooFoo-1');
+         tick(16);  // scheduler waits 16ms if RAF is unavailable
+         expectSimpleChanges(
+             componentRef.instance.simpleChanges[0],
+             {fooFoo: new SimpleChange(undefined, 'fooFoo-1', true)});
+       }));
+
+    it('should call ngOnChanges once for multiple input changes', fakeAsync(() => {
+         strategy.setInputValue('fooFoo', 'fooFoo-1');
+         strategy.setInputValue('barBar', 'barBar-1');
+         tick(16);  // scheduler waits 16ms if RAF is unavailable
+         expectSimpleChanges(componentRef.instance.simpleChanges[0], {
+           fooFoo: new SimpleChange(undefined, 'fooFoo-1', true),
+           barBar: new SimpleChange(undefined, 'barBar-1', true)
+         });
+       }));
+
+    it('should call ngOnChanges twice for changes in different rounds with previous values',
+       fakeAsync(() => {
+         strategy.setInputValue('fooFoo', 'fooFoo-1');
+         strategy.setInputValue('barBar', 'barBar-1');
+         tick(16);  // scheduler waits 16ms if RAF is unavailable
+         expectSimpleChanges(componentRef.instance.simpleChanges[0], {
+           fooFoo: new SimpleChange(undefined, 'fooFoo-1', true),
+           barBar: new SimpleChange(undefined, 'barBar-1', true)
+         });
+
+         strategy.setInputValue('fooFoo', 'fooFoo-2');
+         strategy.setInputValue('barBar', 'barBar-2');
+         tick(16);  // scheduler waits 16ms if RAF is unavailable
+         expectSimpleChanges(componentRef.instance.simpleChanges[1], {
+           fooFoo: new SimpleChange('fooFoo-1', 'fooFoo-2', false),
+           barBar: new SimpleChange('barBar-1', 'barBar-2', false)
+         });
+       }));
+  });
+
+  describe('disconnect', () => {
+    it('should be able to call if not connected', fakeAsync(() => {
+         strategy.disconnect();
+
+         // Sanity check: the strategy doesn't have an instance of the componentRef anyways
+         expect(componentRef.destroy).not.toHaveBeenCalled();
+       }));
+
+    it('should destroy the component after the destroy delay', fakeAsync(() => {
+         strategy.connect(document.createElement('div'));
+         strategy.disconnect();
+         expect(componentRef.destroy).not.toHaveBeenCalled();
+
+         tick(10);
+         expect(componentRef.destroy).toHaveBeenCalledTimes(1);
+       }));
+
+    it('should be able to call it multiple times but only destroy once', fakeAsync(() => {
+         strategy.connect(document.createElement('div'));
+         strategy.disconnect();
+         strategy.disconnect();
+         expect(componentRef.destroy).not.toHaveBeenCalled();
+
+         tick(10);
+         expect(componentRef.destroy).toHaveBeenCalledTimes(1);
+
+         strategy.disconnect();
+         expect(componentRef.destroy).toHaveBeenCalledTimes(1);
+       }));
+  });
+});
+
+export class FakeComponentWithoutNgOnChanges {
+  output1 = new Subject();
+  output2 = new Subject();
+}
+
+export class FakeComponent {
+  output1 = new Subject();
+  output2 = new Subject();
+
+  // Keep track of the simple changes passed to ngOnChanges
+  simpleChanges: SimpleChanges[] = [];
+
+  ngOnChanges(simpleChanges: SimpleChanges) { this.simpleChanges.push(simpleChanges); }
+}
+
+export class FakeComponentFactory extends ComponentFactory<any> {
+  componentRef: any = jasmine.createSpyObj(
+      'componentRef', ['instance', 'changeDetectorRef', 'hostView', 'destroy']);
+
+  constructor() {
+    super();
+    this.componentRef.instance = new FakeComponent();
+    this.componentRef.changeDetectorRef =
+        jasmine.createSpyObj('changeDetectorRef', ['detectChanges']);
+  }
+
+  get selector(): string { return 'fake-component'; }
+  get componentType(): Type<any> { return FakeComponent; }
+  get ngContentSelectors(): string[] { return ['content-1', 'content-2']; }
+  get inputs(): {propName: string; templateName: string}[] {
+    return [
+      {propName: 'fooFoo', templateName: 'fooFoo'},
+      {propName: 'barBar', templateName: 'my-bar-bar'},
+    ];
+  }
+
+  get outputs(): {propName: string; templateName: string}[] {
+    return [
+      {propName: 'output1', templateName: 'templateOutput1'},
+      {propName: 'output2', templateName: 'templateOutput2'},
+    ];
+  }
+
+  create(
+      injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any,
+      ngModule?: NgModuleRef<any>): ComponentRef<any> {
+    return this.componentRef;
+  }
+}
+
+function expectSimpleChanges(actual: SimpleChanges, expected: SimpleChanges) {
+  Object.keys(actual).forEach(
+      key => { expect(expected[key]).toBeTruthy(`Change included additional key ${key}`); });
+
+  Object.keys(expected).forEach(key => {
+    expect(actual[key]).toBeTruthy(`Change should have included key ${key}`);
+    if (actual[key]) {
+      expect(actual[key].previousValue).toBe(expected[key].previousValue);
+      expect(actual[key].currentValue).toBe(expected[key].currentValue);
+      expect(actual[key].firstChange).toBe(expected[key].firstChange);
+    }
+  });
+}
diff --git a/packages/elements/test/create-custom-element_spec.ts b/packages/elements/test/create-custom-element_spec.ts
new file mode 100644
index 000000000000..299ecaf015f5
--- /dev/null
+++ b/packages/elements/test/create-custom-element_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 {Component, DoBootstrap, EventEmitter, Injector, Input, NgModule, Output, destroyPlatform} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {Subject} from 'rxjs';
+
+import {NgElementConstructor, createCustomElement} from '../src/create-custom-element';
+import {NgElementStrategy, NgElementStrategyEvent, NgElementStrategyFactory} from '../src/element-strategy';
+
+type WithFooBar = {
+  fooFoo: string,
+  barBar: string
+};
+
+if (typeof customElements !== 'undefined') {
+  describe('createCustomElement', () => {
+    let NgElementCtor: NgElementConstructor<WithFooBar>;
+    let strategy: TestStrategy;
+    let strategyFactory: TestStrategyFactory;
+    let injector: Injector;
+
+    beforeAll(done => {
+      destroyPlatform();
+      platformBrowserDynamic()
+          .bootstrapModule(TestModule)
+          .then(ref => {
+            injector = ref.injector;
+            strategyFactory = new TestStrategyFactory();
+            strategy = strategyFactory.testStrategy;
+
+            NgElementCtor = createCustomElement(TestComponent, {injector, strategyFactory});
+
+            // The `@webcomponents/custom-elements/src/native-shim.js` polyfill allows us to create
+            // new instances of the NgElement which extends HTMLElement, as long as we define it.
+            customElements.define('test-element', NgElementCtor);
+          })
+          .then(done, done.fail);
+    });
+
+    afterAll(() => destroyPlatform());
+
+    it('should use a default strategy for converting component inputs', () => {
+      expect(NgElementCtor.observedAttributes).toEqual(['foo-foo', 'barbar']);
+    });
+
+    it('should send input values from attributes when connected', () => {
+      const element = new NgElementCtor(injector);
+      element.setAttribute('foo-foo', 'value-foo-foo');
+      element.setAttribute('barbar', 'value-barbar');
+      element.connectedCallback();
+      expect(strategy.connectedElement).toBe(element);
+
+      expect(strategy.getInputValue('fooFoo')).toBe('value-foo-foo');
+      expect(strategy.getInputValue('barBar')).toBe('value-barbar');
+    });
+
+    it('should listen to output events after connected', () => {
+      const element = new NgElementCtor(injector);
+      element.connectedCallback();
+
+      let eventValue: any = null;
+      element.addEventListener('some-event', (e: CustomEvent) => eventValue = e.detail);
+      strategy.events.next({name: 'some-event', value: 'event-value'});
+
+      expect(eventValue).toEqual('event-value');
+    });
+
+    it('should not listen to output events after disconnected', () => {
+      const element = new NgElementCtor(injector);
+      element.connectedCallback();
+      element.disconnectedCallback();
+      expect(strategy.disconnectCalled).toBe(true);
+
+      let eventValue: any = null;
+      element.addEventListener('some-event', (e: CustomEvent) => eventValue = e.detail);
+      strategy.events.next({name: 'some-event', value: 'event-value'});
+
+      expect(eventValue).toEqual(null);
+    });
+
+    it('should properly set getters/setters on the element', () => {
+      const element = new NgElementCtor(injector);
+      element.fooFoo = 'foo-foo-value';
+      element.barBar = 'barBar-value';
+
+      expect(strategy.inputs.get('fooFoo')).toBe('foo-foo-value');
+      expect(strategy.inputs.get('barBar')).toBe('barBar-value');
+    });
+  });
+}
+
+// Helpers
+@Component({
+  selector: 'test-component',
+  template: 'TestComponent|foo({{ fooFoo }})|bar({{ barBar }})',
+})
+class TestComponent {
+  @Input() fooFoo: string = 'foo';
+  // TODO(issue/24571): remove '!'.
+  @Input('barbar') barBar !: string;
+
+  @Output() bazBaz = new EventEmitter<boolean>();
+  @Output('quxqux') quxQux = new EventEmitter<Object>();
+}
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [TestComponent],
+  entryComponents: [TestComponent],
+})
+class TestModule implements DoBootstrap {
+  ngDoBootstrap() {}
+}
+
+export class TestStrategy implements NgElementStrategy {
+  connectedElement: HTMLElement|null = null;
+  disconnectCalled = false;
+  inputs = new Map<string, any>();
+
+  events = new Subject<NgElementStrategyEvent>();
+
+  connect(element: HTMLElement): void { this.connectedElement = element; }
+
+  disconnect(): void { this.disconnectCalled = true; }
+
+  getInputValue(propName: string): any { return this.inputs.get(propName); }
+
+  setInputValue(propName: string, value: string): void { this.inputs.set(propName, value); }
+}
+
+export class TestStrategyFactory implements NgElementStrategyFactory {
+  testStrategy = new TestStrategy();
+
+  create(): NgElementStrategy { return this.testStrategy; }
+}
diff --git a/packages/elements/test/extract-projectable-nodes_spec.ts b/packages/elements/test/extract-projectable-nodes_spec.ts
new file mode 100644
index 000000000000..ea172e1254c0
--- /dev/null
+++ b/packages/elements/test/extract-projectable-nodes_spec.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 {extractProjectableNodes} from '../src/extract-projectable-nodes';
+
+describe('extractProjectableNodes()', () => {
+  let elem: HTMLElement;
+  let childNodes: NodeList;
+
+  const expectProjectableNodes = (matches: {[selector: string]: number[]}) => {
+    const selectors = Object.keys(matches);
+    const expected = selectors.map(selector => {
+      const matchingIndices = matches[selector];
+      return matchingIndices.map(idx => childNodes[idx]);
+    });
+
+    expect(extractProjectableNodes(elem, selectors)).toEqual(expected);
+  };
+  const test = (matches: {[selector: string]: number[]}) => () => expectProjectableNodes(matches);
+
+  beforeEach(() => {
+    elem = document.createElement('div');
+    elem.innerHTML = '<div class="foo" first="">' +
+        '<span class="bar"></span>' +
+        '</div>' +
+        '<span id="bar"></span>' +
+        '<!-- Comment -->' +
+        'Text' +
+        '<blink class="foo" id="quux"></blink>' +
+        'More text';
+    childNodes = Array.prototype.slice.call(elem.childNodes);
+  });
+
+  it('should match each node to the corresponding selector', test({
+       '[first]': [0],
+       '#bar': [1],
+       '#quux': [4],
+     }));
+
+  it('should ignore non-matching nodes', test({
+       '.zoo': [],
+     }));
+
+  it('should only match top-level child nodes', test({
+       'span': [1],
+       '.bar': [],
+     }));
+
+  it('should support complex selectors', test({
+       '.foo:not(div)': [4],
+       'div + #bar': [1],
+     }));
+
+  it('should match each node with the first matching selector', test({
+       'div': [0],
+       '.foo': [4],
+       'blink': [],
+     }));
+
+  describe('(with wildcard selector)', () => {
+    it('should match non-element nodes to `*` (but still ignore comments)', test({
+         'div,span,blink': [0, 1, 4],
+         '*': [2, 3, 5],
+       }));
+
+    it('should match otherwise unmatched nodes to `*`', test({
+         'div,blink': [0, 4],
+         '*': [1, 2, 3, 5],
+       }));
+
+    it('should give higher priority to `*` (eve if it appears first)', test({
+         '*': [2, 3, 5],
+         'div,span,blink': [0, 1, 4],
+       }));
+  });
+});
diff --git a/packages/elements/test/utils_spec.ts b/packages/elements/test/utils_spec.ts
new file mode 100644
index 000000000000..930fcf086acf
--- /dev/null
+++ b/packages/elements/test/utils_spec.ts
@@ -0,0 +1,231 @@
+/**
+ * @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 {camelToDashCase, createCustomEvent, isElement, isFunction, kebabToCamelCase, matchesSelector, scheduler, strictEquals} from '../src/utils';
+
+describe('utils', () => {
+  describe('scheduler', () => {
+    describe('schedule()', () => {
+      let setTimeoutSpy: jasmine.Spy;
+      let clearTimeoutSpy: jasmine.Spy;
+
+      beforeEach(() => {
+        setTimeoutSpy = spyOn(window, 'setTimeout').and.returnValue(42);
+        clearTimeoutSpy = spyOn(window, 'clearTimeout');
+      });
+
+      it('should delegate to `window.setTimeout()`', () => {
+        const cb = () => null;
+        const delay = 1337;
+
+        scheduler.schedule(cb, delay);
+
+        expect(setTimeoutSpy).toHaveBeenCalledWith(cb, delay);
+      });
+
+      it('should return a function for cancelling the scheduled job', () => {
+        const cancelFn = scheduler.schedule(() => null, 0);
+        expect(clearTimeoutSpy).not.toHaveBeenCalled();
+
+        cancelFn();
+        expect(clearTimeoutSpy).toHaveBeenCalledWith(42);
+      });
+    });
+
+    describe('scheduleBeforeRender()', () => {
+      if (typeof window.requestAnimationFrame === 'undefined') {
+        const mockCancelFn = () => undefined;
+        let scheduleSpy: jasmine.Spy;
+
+        beforeEach(() => scheduleSpy = spyOn(scheduler, 'schedule').and.returnValue(mockCancelFn));
+
+        it('should delegate to `scheduler.schedule()`', () => {
+          const cb = () => null;
+          expect(scheduler.scheduleBeforeRender(cb)).toBe(mockCancelFn);
+          expect(scheduleSpy).toHaveBeenCalledWith(cb, 16);
+        });
+      } else {
+        let requestAnimationFrameSpy: jasmine.Spy;
+        let cancelAnimationFrameSpy: jasmine.Spy;
+
+        beforeEach(() => {
+          requestAnimationFrameSpy = spyOn(window, 'requestAnimationFrame').and.returnValue(42);
+          cancelAnimationFrameSpy = spyOn(window, 'cancelAnimationFrame');
+        });
+
+        it('should delegate to `window.requestAnimationFrame()`', () => {
+          const cb = () => null;
+          scheduler.scheduleBeforeRender(cb);
+          expect(requestAnimationFrameSpy).toHaveBeenCalledWith(cb);
+        });
+
+        it('should return a function for cancelling the scheduled job', () => {
+          const cancelFn = scheduler.scheduleBeforeRender(() => null);
+          expect(cancelAnimationFrameSpy).not.toHaveBeenCalled();
+
+          cancelFn();
+          expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(42);
+        });
+      }
+    });
+  });
+
+  describe('camelToKebabCase()', () => {
+    it('should convert camel-case to kebab-case', () => {
+      expect(camelToDashCase('fooBarBazQux')).toBe('foo-bar-baz-qux');
+      expect(camelToDashCase('foo1Bar2Baz3Qux4')).toBe('foo1-bar2-baz3-qux4');
+    });
+
+    it('should keep existing dashes',
+       () => { expect(camelToDashCase('fooBar-baz-Qux')).toBe('foo-bar-baz--qux'); });
+  });
+
+  describe('createCustomEvent()', () => {
+    it('should create a custom event (with appropriate properties)', () => {
+      const value = {bar: 'baz'};
+      const event = createCustomEvent(document, 'foo', value);
+
+      expect(event).toEqual(jasmine.any(CustomEvent));
+      expect(event).toEqual(jasmine.any(Event));
+      expect(event.type).toBe('foo');
+      expect(event.bubbles).toBe(false);
+      expect(event.cancelable).toBe(false);
+      expect(event.detail).toEqual(value);
+    });
+
+  });
+
+  describe('isElement()', () => {
+    it('should return true for Element nodes', () => {
+      const elems = [
+        document.body,
+        document.createElement('div'),
+        document.createElement('option'),
+        document.documentElement,
+      ];
+
+      elems.forEach(n => expect(isElement(n)).toBe(true));
+    });
+
+    it('should return false for non-Element nodes', () => {
+      const nonElems = [
+        document,
+        document.createAttribute('foo'),
+        document.createDocumentFragment(),
+        document.createComment('bar'),
+        document.createTextNode('baz'),
+      ];
+
+      nonElems.forEach(n => expect(isElement(n)).toBe(false));
+    });
+  });
+
+  describe('isFunction()', () => {
+    it('should return true for functions', () => {
+      const obj = {foo: function() {}, bar: () => null, baz() {}};
+      const fns = [
+        function(){},
+        () => null,
+        obj.foo,
+        obj.bar,
+        obj.baz,
+        Function,
+        Date,
+      ];
+
+      fns.forEach(v => expect(isFunction(v)).toBe(true));
+    });
+
+    it('should return false for non-functions', () => {
+      const nonFns = [
+        undefined,
+        null,
+        true,
+        42,
+        {},
+      ];
+
+      nonFns.forEach(v => expect(isFunction(v)).toBe(false));
+    });
+  });
+
+  describe('kebabToCamelCase()', () => {
+    it('should convert camel-case to kebab-case', () => {
+      expect(kebabToCamelCase('foo-bar-baz-qux')).toBe('fooBarBazQux');
+      expect(kebabToCamelCase('foo1-bar2-baz3-qux4')).toBe('foo1Bar2Baz3Qux4');
+      expect(kebabToCamelCase('foo-1-bar-2-baz-3-qux-4')).toBe('foo1Bar2Baz3Qux4');
+    });
+
+    it('should keep uppercase letters', () => {
+      expect(kebabToCamelCase('foo-barBaz-Qux')).toBe('fooBarBaz-Qux');
+      expect(kebabToCamelCase('foo-barBaz--qux')).toBe('fooBarBaz-Qux');
+    });
+  });
+
+  describe('matchesSelector()', () => {
+    let li: HTMLLIElement;
+
+    beforeEach(() => {
+      const div = document.createElement('div');
+      div.innerHTML = `
+        <div class="bar" id="barDiv">
+          <span class="baz"></span>
+          <ul class="baz" id="bazUl">
+            <li class="qux" id="quxLi"></li>
+          </ul>
+        </div>
+      `;
+      li = div.querySelector('li') !;
+    });
+
+    it('should return whether the element matches the selector', () => {
+      expect(matchesSelector(li, 'li')).toBe(true);
+      expect(matchesSelector(li, '.qux')).toBe(true);
+      expect(matchesSelector(li, '#quxLi')).toBe(true);
+      expect(matchesSelector(li, '.qux#quxLi:not(.quux)')).toBe(true);
+      expect(matchesSelector(li, '.bar > #bazUl > li')).toBe(true);
+      expect(matchesSelector(li, '.bar .baz ~ .baz li')).toBe(true);
+
+      expect(matchesSelector(li, 'ol')).toBe(false);
+      expect(matchesSelector(li, '.quux')).toBe(false);
+      expect(matchesSelector(li, '#quuxOl')).toBe(false);
+      expect(matchesSelector(li, '.qux#quxLi:not(li)')).toBe(false);
+      expect(matchesSelector(li, '.bar > #bazUl > .quxLi')).toBe(false);
+      expect(matchesSelector(li, 'div span ul li')).toBe(false);
+    });
+  });
+
+  describe('strictEquals()', () => {
+    it('should perform strict equality check', () => {
+      const values = [
+        undefined,
+        null,
+        true,
+        false,
+        42,
+        '42',
+        () => undefined,
+        () => undefined,
+        {},
+        {},
+      ];
+
+      values.forEach((v1, i) => {
+        values.forEach((v2, j) => { expect(strictEquals(v1, v2)).toBe(i === j); });
+      });
+    });
+
+    it('should consider two `NaN` values equals', () => {
+      expect(strictEquals(NaN, NaN)).toBe(true);
+      expect(strictEquals(NaN, 'foo')).toBe(false);
+      expect(strictEquals(NaN, 42)).toBe(false);
+      expect(strictEquals(NaN, null)).toBe(false);
+      expect(strictEquals(NaN, undefined)).toBe(false);
+    });
+  });
+});
diff --git a/packages/elements/tsconfig-build.json b/packages/elements/tsconfig-build.json
new file mode 100644
index 000000000000..47c15f8038e2
--- /dev/null
+++ b/packages/elements/tsconfig-build.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/platform-browser": ["../../dist/packages/platform-browser"],
+      "rxjs/*": ["../../node_modules/rxjs/*"]
+    },
+    "outDir": "../../dist/packages/elements"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "elements.js",
+    "flatModuleId": "@angular/elements"
+  }
+}
diff --git a/packages/empty.ts b/packages/empty.ts
new file mode 100644
index 000000000000..540a7a0ad7ff
--- /dev/null
+++ b/packages/empty.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
+ */
+
+// This file intentionally left blank. It is used to load nothing in some cases.
+// Such as parse5/index is redirected here instead of loading into browser.
+
+export let __empty__: any;
diff --git a/packages/es6-subset.d.ts b/packages/es6-subset.d.ts
new file mode 100644
index 000000000000..b1a9513c83fa
--- /dev/null
+++ b/packages/es6-subset.d.ts
@@ -0,0 +1,65 @@
+
+/**
+ * Subset of lib.es2015.core.d.ts typings.
+ * Angular should not require use of ES6 runtime but some API usages are already present.
+ * See https://github.com/angular/angular/issues/5242
+ * TODO(alexeagle): remove methods below which may not be present in targeted browser
+ */
+
+interface String {
+  /**
+   * Returns true if the sequence of elements of searchString converted to a String is the
+   * same as the corresponding elements of this object (converted to a String) starting at
+   * position. Otherwise returns false.
+   */
+  startsWith(searchString: string, position?: number): boolean;
+
+  /**
+   * Returns true if the sequence of elements of searchString converted to a String is the
+   * same as the corresponding elements of this object (converted to a String) starting at
+   * endPosition – length(this). Otherwise returns false.
+   */
+  endsWith(searchString: string, endPosition?: number): boolean;
+}
+
+interface Array<T> {
+  /**
+   * Returns the value of the first element in the array where predicate is true, and undefined
+   * otherwise.
+   * @param predicate find calls predicate once for each element of the array, in ascending
+   * order, until it finds one where predicate returns true. If such an element is found, find
+   * immediately returns that element value. Otherwise, find returns undefined.
+   * @param thisArg If provided, it will be used as the this value for each invocation of
+   * predicate. If it is not provided, undefined is used instead.
+   */
+  find(predicate: (value: T, index: number, obj: Array<T>) => boolean, thisArg?: any): T;
+  /**
+   * Returns the this object after filling the section identified by start and end with value
+   * @param value value to fill array section with
+   * @param start index to start filling the array at. If start is negative, it is treated as
+   * length+start where length is the length of the array.
+   * @param end index to stop filling the array at. If end is negative, it is treated as
+   * length+end.
+   */
+  fill(value: T, start?: number, end?: number): T[];
+}
+
+interface NumberConstructor {
+  /**
+   * Returns true if the value passed is an integer, false otherwise.
+   * @param number A numeric value.
+   */
+  isInteger(number: number): boolean;
+}
+
+// Workaround https://github.com/Microsoft/TypeScript/issues/9193
+interface PromiseConstructor {
+  all<T>(values: (T|PromiseLike<T>)[]): Promise<T[]>;
+}
+
+interface Function {
+  /**
+   * Returns the name of the function. Function names are read-only and can not be changed.
+   */
+  readonly name: string;
+}
diff --git a/packages/examples/README.md b/packages/examples/README.md
new file mode 100644
index 000000000000..2e3269f41f61
--- /dev/null
+++ b/packages/examples/README.md
@@ -0,0 +1,34 @@
+# API Examples
+
+This folder contains small example apps that get in-lined into our API docs.
+Each example contains tests for application behavior (as opposed to testing Angular's
+behavior) just like an Angular application developer would write.
+
+# Running the examples
+
+```
+# # execute the following command only when framework code changes
+./build.sh
+
+# run when test change
+./packages/examples/build.sh  
+
+# start server
+$(npm bin)/gulp serve-examples
+```
+
+navigate to [http://localhost:8001](http://localhost:8001)
+
+# Running the tests
+
+```
+ # run only when framework code changes
+./build.sh
+
+# run to compile tests and run them
+./packages/examples/test.sh
+```
+
+NOTE: sometimes the http server does not exit properly and it retains the `8001` port.
+ in such a case you can use `lsof -i:8001` to see which process it is and then use `kill` 
+ to remove it. (Or in single command: `lsof -i:8001 -t | xargs kill`)
\ No newline at end of file
diff --git a/packages/examples/_common/bootstrap.ts b/packages/examples/_common/bootstrap.ts
new file mode 100644
index 000000000000..24bad239799c
--- /dev/null
+++ b/packages/examples/_common/bootstrap.ts
@@ -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
+ */
+(function(global: any) {
+  writeScriptTag('/vendor/zone.js');
+  writeScriptTag('/vendor/task-tracking.js');
+  writeScriptTag('/vendor/system.js');
+  writeScriptTag('/vendor/Reflect.js');
+  writeScriptTag('/_common/system-config.js');
+  if (location.pathname.indexOf('/upgrade/') != -1) {
+    writeScriptTag('/vendor/angular.js');
+  }
+
+  function writeScriptTag(scriptUrl: string, onload: string = '') {
+    document.write('<script src="' + scriptUrl + '" onload="' + onload + '"></script>');
+  }
+}(window));
diff --git a/packages/examples/_common/e2e_util.ts b/packages/examples/_common/e2e_util.ts
new file mode 100644
index 000000000000..4ca6732c1e77
--- /dev/null
+++ b/packages/examples/_common/e2e_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
+ */
+/* tslint:disable:no-console  */
+import * as webdriver from 'selenium-webdriver';
+declare var browser: any;
+declare var expect: any;
+
+// TODO (juliemr): remove this method once this becomes a protractor plugin
+export function verifyNoBrowserErrors() {
+  browser.manage().logs().get('browser').then(function(browserLog: any[]) {
+    const errors: any[] = [];
+    browserLog.filter(logEntry => {
+      const msg = logEntry.message;
+      console.log('>> ' + msg);
+      if (logEntry.level.value >= webdriver.logging.Level.INFO.value) {
+        errors.push(msg);
+      }
+    });
+    expect(errors).toEqual([]);
+  });
+}
diff --git a/packages/examples/_common/index.html b/packages/examples/_common/index.html
new file mode 100644
index 000000000000..645ad3416fc3
--- /dev/null
+++ b/packages/examples/_common/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
+  <script type="text/javascript" src="bootstrap.js"></script>
+  <script type="text/javascript">
+    System.import('main-dynamic').catch(console.error.bind(console));
+  </script>
+</head>
+
+<body>
+<example-app>
+  loading...
+</example-app>
+</body>
+</html>
diff --git a/packages/examples/_common/main-dynamic.ts b/packages/examples/_common/main-dynamic.ts
new file mode 100644
index 000000000000..e30f1c076b25
--- /dev/null
+++ b/packages/examples/_common/main-dynamic.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import * as mod from './module';
+
+if (mod.AppModule) {
+  platformBrowserDynamic().bootstrapModule(mod.AppModule);
+}
diff --git a/packages/examples/_common/module.d.ts b/packages/examples/_common/module.d.ts
new file mode 100644
index 000000000000..9038a8f4ac5d
--- /dev/null
+++ b/packages/examples/_common/module.d.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
+ */
+
+/*
+
+DO NOT DELETE THIS FILE
+=======================
+
+The purpose of this file is to allow `main-dynamic.ts` to be tsc-compiled
+BEFORE it is copied over to each of the associated example directories
+within `dist/examples`.
+
+ */
+export class AppModule {};
diff --git a/packages/examples/_common/system-config.ts b/packages/examples/_common/system-config.ts
new file mode 100644
index 000000000000..2ad12456a652
--- /dev/null
+++ b/packages/examples/_common/system-config.ts
@@ -0,0 +1,36 @@
+/**
+ * @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
+ */
+System.config({
+  defaultJSExtensions: true,
+  map: {
+    '@angular/common': '/vendor/@angular/common/bundles/common.umd.js',
+    '@angular/compiler': '/vendor/@angular/compiler/bundles/compiler.umd.js',
+    '@angular/animations': '/vendor/@angular/animations/bundles/animations.umd.js',
+    '@angular/animations/browser': '/vendor/@angular/animations/bundles/animations-browser.umd.js',
+    '@angular/platform-browser/animations':
+        '/vendor/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
+    '@angular/core': '/vendor/@angular/core/bundles/core.umd.js',
+    '@angular/forms': '/vendor/@angular/forms/bundles/forms.umd.js',
+    '@angular/http': '/vendor/@angular/forms/bundles/http.umd.js',
+    '@angular/platform-browser':
+        '/vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser-dynamic':
+        '/vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/router': '/vendor/@angular/router/bundles/router.umd.js',
+    '@angular/upgrade': '/vendor/@angular/upgrade/bundles/upgrade.umd.js',
+    '@angular/upgrade/static': '/vendor/@angular/upgrade/bundles/upgrade-static.umd.js',
+    'rxjs': '/vendor/rxjs'
+  },
+  packages: {
+    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs': {main: 'index.js', defaultExtension: 'js'},
+  },
+});
diff --git a/packages/examples/build.sh b/packages/examples/build.sh
new file mode 100755
index 000000000000..ce521af07aa4
--- /dev/null
+++ b/packages/examples/build.sh
@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+#
+# This script is used to compile and copy the contents for each of
+# example directories over to the dist/examples directory so that they
+# can be tested with karma and protractor. The `gulp serve-examples` command
+# can be used to run each of the examples in isolation via http as well.
+#
+
+(
+  cd `dirname $0`
+
+  DIST="../../dist/examples";
+  rm -rf -- $DIST
+  $(npm bin)/tsc -p ./tsconfig-build.json --importHelpers false
+
+  mkdir $DIST/vendor/
+
+  ln -s ../../../dist/packages-dist/ $DIST/vendor/@angular
+
+  for FILE in \
+      ../../../node_modules/angular/angular.js \
+      ../../../node_modules/zone.js/dist/zone.js \
+      ../../../node_modules/zone.js/dist/task-tracking.js \
+      ../../../node_modules/systemjs/dist/system.js \
+      ../../../node_modules/reflect-metadata/Reflect.js \
+      ../../../node_modules/rxjs
+  do
+    ln -s $FILE $DIST/vendor/`basename $FILE`
+  done
+
+  for MODULE in `find . -name module.ts`; do
+    FINAL_DIR_PATH=$DIST/`dirname $MODULE`
+
+    echo "==== $MODULE"
+    cp _common/*.html $FINAL_DIR_PATH
+    cp $DIST/_common/*.js $FINAL_DIR_PATH
+    cp $DIST/_common/*.js.map $FINAL_DIR_PATH
+
+    find `dirname $MODULE` -name \*.css -exec cp {} $FINAL_DIR_PATH \;
+  done
+)
diff --git a/packages/examples/common/location/ts/e2e_test/location_component_spec.ts b/packages/examples/common/location/ts/e2e_test/location_component_spec.ts
new file mode 100644
index 000000000000..20e790a3c15b
--- /dev/null
+++ b/packages/examples/common/location/ts/e2e_test/location_component_spec.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 {$, browser, by, element, protractor} from 'protractor';
+
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+
+function waitForElement(selector: string) {
+  const EC = (<any>protractor).ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('Location', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  it('should verify paths', () => {
+    browser.get('/common/location/ts/#/bar/baz');
+    waitForElement('hash-location');
+    expect(element.all(by.css('path-location code')).get(0).getText())
+        .toEqual('/common/location/ts');
+    expect(element.all(by.css('hash-location code')).get(0).getText()).toEqual('/bar/baz');
+  });
+});
diff --git a/packages/examples/common/location/ts/hash_location_component.ts b/packages/examples/common/location/ts/hash_location_component.ts
new file mode 100644
index 000000000000..4021655b8e08
--- /dev/null
+++ b/packages/examples/common/location/ts/hash_location_component.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
+ */
+
+// #docregion LocationComponent
+import {HashLocationStrategy, Location, LocationStrategy} from '@angular/common';
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'hash-location',
+  providers: [Location, {provide: LocationStrategy, useClass: HashLocationStrategy}],
+  template: `
+    <h1>HashLocationStrategy</h1>
+    Current URL is: <code>{{location.path()}}</code><br>
+    Normalize: <code>/foo/bar/</code> is: <code>{{location.normalize('foo/bar')}}</code><br>
+  `
+})
+export class HashLocationComponent {
+  location: Location;
+  constructor(location: Location) { this.location = location; }
+}
+// #enddocregion
diff --git a/packages/examples/common/location/ts/module.ts b/packages/examples/common/location/ts/module.ts
new file mode 100644
index 000000000000..10b064e54dae
--- /dev/null
+++ b/packages/examples/common/location/ts/module.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 {APP_BASE_HREF} from '@angular/common';
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {HashLocationComponent} from './hash_location_component';
+import {PathLocationComponent} from './path_location_component';
+
+@Component({
+  selector: 'example-app',
+  template: `<hash-location></hash-location><path-location></path-location>`
+})
+export class ExampleAppComponent {
+}
+
+@NgModule({
+  declarations: [ExampleAppComponent, PathLocationComponent, HashLocationComponent],
+  providers: [{provide: APP_BASE_HREF, useValue: '/'}],
+  imports: [BrowserModule],
+  bootstrap: [ExampleAppComponent]
+})
+export class AppModule {
+}
diff --git a/packages/examples/common/location/ts/path_location_component.ts b/packages/examples/common/location/ts/path_location_component.ts
new file mode 100644
index 000000000000..3984f23e6139
--- /dev/null
+++ b/packages/examples/common/location/ts/path_location_component.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
+ */
+
+// #docregion LocationComponent
+import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'path-location',
+  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
+  template: `
+    <h1>PathLocationStrategy</h1>
+    Current URL is: <code>{{location.path()}}</code><br>
+    Normalize: <code>/foo/bar/</code> is: <code>{{location.normalize('foo/bar')}}</code><br>
+  `
+})
+export class PathLocationComponent {
+  location: Location;
+  constructor(location: Location) { this.location = location; }
+}
+// #enddocregion
diff --git a/packages/examples/common/ngComponentOutlet/ts/e2e_test/ngComponentOutlet_spec.ts b/packages/examples/common/ngComponentOutlet/ts/e2e_test/ngComponentOutlet_spec.ts
new file mode 100644
index 000000000000..fd6110a4b561
--- /dev/null
+++ b/packages/examples/common/ngComponentOutlet/ts/e2e_test/ngComponentOutlet_spec.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 {$, ExpectedConditions, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  const EC = ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('ngComponentOutlet', () => {
+  const URL = 'common/ngComponentOutlet/ts/';
+  afterEach(verifyNoBrowserErrors);
+
+  describe('ng-component-outlet-example', () => {
+    it('should render simple', () => {
+      browser.get(URL);
+      waitForElement('ng-component-outlet-simple-example');
+      expect(element.all(by.css('hello-world')).getText()).toEqual(['Hello World!']);
+    });
+
+    it('should render complete', () => {
+      browser.get(URL);
+      waitForElement('ng-component-outlet-complete-example');
+      expect(element.all(by.css('complete-component')).getText()).toEqual(['Complete: AhojSvet!']);
+    });
+
+    it('should render other module', () => {
+      browser.get(URL);
+      waitForElement('ng-component-outlet-other-module-example');
+      expect(element.all(by.css('other-module-component')).getText()).toEqual([
+        'Other Module Component!'
+      ]);
+    });
+  });
+});
diff --git a/packages/examples/common/ngComponentOutlet/ts/module.ts b/packages/examples/common/ngComponentOutlet/ts/module.ts
new file mode 100644
index 000000000000..e56f528cea2a
--- /dev/null
+++ b/packages/examples/common/ngComponentOutlet/ts/module.ts
@@ -0,0 +1,114 @@
+/**
+ * @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 {Compiler, Component, Injectable, Injector, NgModule, NgModuleFactory, ReflectiveInjector} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+
+
+// #docregion SimpleExample
+@Component({selector: 'hello-world', template: 'Hello World!'})
+class HelloWorld {
+}
+
+@Component({
+  selector: 'ng-component-outlet-simple-example',
+  template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`
+})
+class NgTemplateOutletSimpleExample {
+  // This field is necessary to expose HelloWorld to the template.
+  HelloWorld = HelloWorld;
+}
+// #enddocregion
+
+// #docregion CompleteExample
+@Injectable()
+class Greeter {
+  suffix = '!';
+}
+
+@Component({
+  selector: 'complete-component',
+  template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
+})
+class CompleteComponent {
+  constructor(public greeter: Greeter) {}
+}
+
+@Component({
+  selector: 'ng-component-outlet-complete-example',
+  template: `
+    <ng-container *ngComponentOutlet="CompleteComponent; 
+                                      injector: myInjector; 
+                                      content: myContent"></ng-container>`
+})
+class NgTemplateOutletCompleteExample {
+  // This field is necessary to expose CompleteComponent to the template.
+  CompleteComponent = CompleteComponent;
+  myInjector: Injector;
+
+  myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]];
+
+  constructor(injector: Injector) {
+    this.myInjector = ReflectiveInjector.resolveAndCreate([Greeter], injector);
+  }
+}
+// #enddocregion
+
+// #docregion NgModuleFactoryExample
+@Component({selector: 'other-module-component', template: `Other Module Component!`})
+class OtherModuleComponent {
+}
+
+@Component({
+  selector: 'ng-component-outlet-other-module-example',
+  template: `
+    <ng-container *ngComponentOutlet="OtherModuleComponent;
+                                      ngModuleFactory: myModule;"></ng-container>`
+})
+class NgTemplateOutletOtherModuleExample {
+  // This field is necessary to expose OtherModuleComponent to the template.
+  OtherModuleComponent = OtherModuleComponent;
+  myModule: NgModuleFactory<any>;
+
+  constructor(compiler: Compiler) { this.myModule = compiler.compileModuleSync(OtherModule); }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'example-app',
+  template: `<ng-component-outlet-simple-example></ng-component-outlet-simple-example>
+             <hr/>
+             <ng-component-outlet-complete-example></ng-component-outlet-complete-example>
+             <hr/>
+             <ng-component-outlet-other-module-example></ng-component-outlet-other-module-example>`
+})
+class ExampleApp {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [
+    ExampleApp, NgTemplateOutletSimpleExample, NgTemplateOutletCompleteExample,
+    NgTemplateOutletOtherModuleExample, HelloWorld, CompleteComponent
+  ],
+  entryComponents: [HelloWorld, CompleteComponent],
+  bootstrap: [ExampleApp]
+})
+export class AppModule {
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [OtherModuleComponent],
+  entryComponents: [OtherModuleComponent]
+})
+export class OtherModule {
+}
\ No newline at end of file
diff --git a/packages/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts b/packages/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts
new file mode 100644
index 000000000000..b0ba5c41c642
--- /dev/null
+++ b/packages/examples/common/ngIf/ts/e2e_test/ngIf_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 {$, ExpectedConditions, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  const EC = ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('ngIf', () => {
+  const URL = 'common/ngIf/ts/';
+  afterEach(verifyNoBrowserErrors);
+
+  describe('ng-if-simple', () => {
+    let comp = 'ng-if-simple';
+    it('should hide/show content', () => {
+      browser.get(URL);
+      waitForElement(comp);
+      expect(element.all(by.css(comp)).get(0).getText()).toEqual('hide show = true\nText to show');
+      element(by.css(comp + ' button')).click();
+      expect(element.all(by.css(comp)).get(0).getText()).toEqual('show show = false');
+    });
+  });
+
+  describe('ng-if-else', () => {
+    let comp = 'ng-if-else';
+    it('should hide/show content', () => {
+      browser.get(URL);
+      waitForElement(comp);
+      expect(element.all(by.css(comp)).get(0).getText()).toEqual('hide show = true\nText to show');
+      element(by.css(comp + ' button')).click();
+      expect(element.all(by.css(comp)).get(0).getText())
+          .toEqual('show show = false\nAlternate text while primary text is hidden');
+    });
+  });
+
+  describe('ng-if-then-else', () => {
+    let comp = 'ng-if-then-else';
+    it('should hide/show content', () => {
+      browser.get(URL);
+      waitForElement(comp);
+      expect(element.all(by.css(comp)).get(0).getText())
+          .toEqual('hideSwitch Primary show = true\nPrimary text to show');
+      element.all(by.css(comp + ' button')).get(1).click();
+      expect(element.all(by.css(comp)).get(0).getText())
+          .toEqual('hideSwitch Primary show = true\nSecondary text to show');
+      element.all(by.css(comp + ' button')).get(0).click();
+      expect(element.all(by.css(comp)).get(0).getText())
+          .toEqual('showSwitch Primary show = false\nAlternate text while primary text is hidden');
+    });
+  });
+
+  describe('ng-if-let', () => {
+    let comp = 'ng-if-let';
+    it('should hide/show content', () => {
+      browser.get(URL);
+      waitForElement(comp);
+      expect(element.all(by.css(comp)).get(0).getText())
+          .toEqual('Next User\nWaiting... (user is null)');
+      element(by.css(comp + ' button')).click();
+      expect(element.all(by.css(comp)).get(0).getText()).toEqual('Next User\nHello Smith, John!');
+    });
+  });
+});
diff --git a/packages/examples/common/ngIf/ts/module.ts b/packages/examples/common/ngIf/ts/module.ts
new file mode 100644
index 000000000000..902ea6e5289e
--- /dev/null
+++ b/packages/examples/common/ngIf/ts/module.ts
@@ -0,0 +1,128 @@
+/**
+ * @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, NgModule, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {Subject} from 'rxjs';
+
+
+// #docregion NgIfSimple
+@Component({
+  selector: 'ng-if-simple',
+  template: `
+    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
+    show = {{show}}
+    <br>
+    <div *ngIf="show">Text to show</div>
+`
+})
+class NgIfSimple {
+  show: boolean = true;
+}
+// #enddocregion
+
+// #docregion NgIfElse
+@Component({
+  selector: 'ng-if-else',
+  template: `
+    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
+    show = {{show}}
+    <br>
+    <div *ngIf="show; else elseBlock">Text to show</div>
+    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
+`
+})
+class NgIfElse {
+  show: boolean = true;
+}
+// #enddocregion
+
+// #docregion NgIfThenElse
+@Component({
+  selector: 'ng-if-then-else',
+  template: `
+    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
+    <button (click)="switchPrimary()">Switch Primary</button>
+    show = {{show}}
+    <br>
+    <div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>
+    <ng-template #primaryBlock>Primary text to show</ng-template>
+    <ng-template #secondaryBlock>Secondary text to show</ng-template>
+    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
+`
+})
+class NgIfThenElse implements OnInit {
+  thenBlock: TemplateRef<any>|null = null;
+  show: boolean = true;
+
+  @ViewChild('primaryBlock')
+  primaryBlock: TemplateRef<any>|null = null;
+  @ViewChild('secondaryBlock')
+  secondaryBlock: TemplateRef<any>|null = null;
+
+  switchPrimary() {
+    this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock;
+  }
+
+  ngOnInit() { this.thenBlock = this.primaryBlock; }
+}
+// #enddocregion
+
+// #docregion NgIfAs
+@Component({
+  selector: 'ng-if-let',
+  template: `
+    <button (click)="nextUser()">Next User</button>
+    <br>
+    <div *ngIf="userObservable | async as user; else loading">
+      Hello {{user.last}}, {{user.first}}!
+    </div>
+    <ng-template #loading let-user>Waiting... (user is {{user|json}})</ng-template>
+`
+})
+class NgIfAs {
+  userObservable = new Subject<{first: string, last: string}>();
+  first = ['John', 'Mike', 'Mary', 'Bob'];
+  firstIndex = 0;
+  last = ['Smith', 'Novotny', 'Angular'];
+  lastIndex = 0;
+
+  nextUser() {
+    let first = this.first[this.firstIndex++];
+    if (this.firstIndex >= this.first.length) this.firstIndex = 0;
+    let last = this.last[this.lastIndex++];
+    if (this.lastIndex >= this.last.length) this.lastIndex = 0;
+    this.userObservable.next({first, last});
+  }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <ng-if-simple></ng-if-simple>
+    <hr>
+    <ng-if-else></ng-if-else>
+    <hr>
+    <ng-if-then-else></ng-if-then-else>
+    <hr>
+    <ng-if-let></ng-if-let>
+    <hr>
+`
+})
+class ExampleApp {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [ExampleApp, NgIfSimple, NgIfElse, NgIfThenElse, NgIfAs],
+  bootstrap: [ExampleApp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts b/packages/examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts
new file mode 100644
index 000000000000..a57ea4fc9f0c
--- /dev/null
+++ b/packages/examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 {$, ExpectedConditions, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  const EC = ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('ngTemplateOutlet', () => {
+  const URL = 'common/ngTemplateOutlet/ts/';
+  afterEach(verifyNoBrowserErrors);
+
+  describe('ng-template-outlet-example', () => {
+    it('should render', () => {
+      browser.get(URL);
+      waitForElement('ng-template-outlet-example');
+      expect(element.all(by.css('ng-template-outlet-example span')).getText()).toEqual([
+        'Hello', 'Hello World!', 'Ahoj Svet!'
+      ]);
+    });
+  });
+});
diff --git a/packages/examples/common/ngTemplateOutlet/ts/module.ts b/packages/examples/common/ngTemplateOutlet/ts/module.ts
new file mode 100644
index 000000000000..dc14eb17be88
--- /dev/null
+++ b/packages/examples/common/ngTemplateOutlet/ts/module.ts
@@ -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
+ */
+
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+
+// #docregion NgTemplateOutlet
+@Component({
+  selector: 'ng-template-outlet-example',
+  template: `
+    <ng-container *ngTemplateOutlet="greet"></ng-container>
+    <hr>
+    <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
+    <hr>
+    <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
+    <hr>
+    
+    <ng-template #greet><span>Hello</span></ng-template>
+    <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
+    <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
+`
+})
+class NgTemplateOutletExample {
+  myContext = {$implicit: 'World', localSk: 'Svet'};
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'example-app',
+  template: `<ng-template-outlet-example></ng-template-outlet-example>`
+})
+class ExampleApp {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [ExampleApp, NgTemplateOutletExample],
+  bootstrap: [ExampleApp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/common/pipes/ts/async_pipe.ts b/packages/examples/common/pipes/ts/async_pipe.ts
new file mode 100644
index 000000000000..31fa366d109a
--- /dev/null
+++ b/packages/examples/common/pipes/ts/async_pipe.ts
@@ -0,0 +1,68 @@
+/**
+ * @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 {Observable, Observer} from 'rxjs';
+
+// #docregion AsyncPipePromise
+@Component({
+  selector: 'async-promise-pipe',
+  template: `<div>
+    <code>promise|async</code>: 
+    <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
+    <span>Wait for it... {{ greeting | async }}</span>
+  </div>`
+})
+export class AsyncPromisePipeComponent {
+  greeting: Promise<string>|null = null;
+  arrived: boolean = false;
+
+  private resolve: Function|null = null;
+
+  constructor() { this.reset(); }
+
+  reset() {
+    this.arrived = false;
+    this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });
+  }
+
+  clicked() {
+    if (this.arrived) {
+      this.reset();
+    } else {
+      this.resolve !('hi there!');
+      this.arrived = true;
+    }
+  }
+}
+// #enddocregion
+
+// #docregion AsyncPipeObservable
+@Component({
+  selector: 'async-observable-pipe',
+  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
+})
+export class AsyncObservablePipeComponent {
+  time = new Observable<string>((observer: Observer<string>) => {
+    setInterval(() => observer.next(new Date().toString()), 1000);
+  });
+}
+// #enddocregion
+
+// For some reason protractor hangs on setInterval. So we will run outside of angular zone so that
+// protractor will not see us. Also we want to have this outside the docregion so as not to confuse
+// the reader.
+function setInterval(fn: Function, delay: number) {
+  const zone = Zone.current;
+  let rootZone = zone;
+  while (rootZone.parent) {
+    rootZone = rootZone.parent;
+  }
+  rootZone.run(
+      () => { window.setInterval(function() { zone.run(fn, this, arguments as any); }, delay); });
+}
diff --git a/packages/examples/common/pipes/ts/currency_pipe.ts b/packages/examples/common/pipes/ts/currency_pipe.ts
new file mode 100644
index 000000000000..27565594cc32
--- /dev/null
+++ b/packages/examples/common/pipes/ts/currency_pipe.ts
@@ -0,0 +1,64 @@
+/**
+ * @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 {registerLocaleData} from '@angular/common';
+import {Component} from '@angular/core';
+// we need to import data for the french locale
+import localeFr from './locale-fr';
+
+// registering french data
+registerLocaleData(localeFr);
+
+// #docregion CurrencyPipe
+@Component({
+  selector: 'currency-pipe',
+  template: `<div>
+    <!--output '$0.26'-->
+    <p>A: {{a | currency}}</p>
+
+    <!--output 'CA$0.26'-->
+    <p>A: {{a | currency:'CAD'}}</p>
+
+    <!--output 'CAD0.26'-->
+    <p>A: {{a | currency:'CAD':'code'}}</p>
+
+    <!--output 'CA$0,001.35'-->
+    <p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
+
+    <!--output '$0,001.35'-->
+    <p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
+
+    <!--output '0 001,35 CA$'-->
+    <p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>
+
+    <!--output 'CLP1' because CLP has no cents-->
+    <p>B: {{b | currency:'CLP'}}</p>
+  </div>`
+})
+export class CurrencyPipeComponent {
+  a: number = 0.259;
+  b: number = 1.3495;
+}
+// #enddocregion
+
+// #docregion DeprecatedCurrencyPipe
+@Component({
+  selector: 'deprecated-currency-pipe',
+  template: `<div>
+    <!--output 'CAD0.26'-->
+    <p>A: {{a | currency:'CAD'}}</p>
+
+    <!--output '$0,001.35'-->
+    <p>B: {{b | currency:'CAD':true:'4.2-2'}}</p>
+  </div>`
+})
+export class DeprecatedCurrencyPipeComponent {
+  a: number = 0.259;
+  b: number = 1.3495;
+}
+// #enddocregion
diff --git a/packages/examples/common/pipes/ts/date_pipe.ts b/packages/examples/common/pipes/ts/date_pipe.ts
new file mode 100644
index 000000000000..408759dcda68
--- /dev/null
+++ b/packages/examples/common/pipes/ts/date_pipe.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 {registerLocaleData} from '@angular/common';
+import {Component} from '@angular/core';
+// we need to import data for the french locale
+import localeFr from './locale-fr';
+
+// registering french data
+registerLocaleData(localeFr);
+
+// #docregion DatePipe
+@Component({
+  selector: 'date-pipe',
+  template: `<div>
+    <!--output 'Jun 15, 2015'-->
+    <p>Today is {{today | date}}</p>
+
+    <!--output 'Monday, June 15, 2015'-->
+    <p>Or if you prefer, {{today | date:'fullDate'}}</p>
+
+    <!--output '9:43 AM'-->
+    <p>The time is {{today | date:'shortTime'}}</p>
+
+    <!--output 'Monday, June 15, 2015 at 9:03:01 AM GMT+01:00' -->
+    <p>The full date/time is {{today | date:'full'}}</p>
+
+    <!--output 'Lundi 15 Juin 2015 à 09:03:01 GMT+01:00'-->
+    <p>The full date/time in french is: {{today | date:'full':'':'fr'}}</p>
+
+    <!--output '2015-06-15 05:03 PM GMT+9'-->
+    <p>The custom date is {{today | date:'yyyy-MM-dd HH:mm a z':'+0900'}}</p>
+
+    <!--output '2015-06-15 09:03 AM GMT+9'-->
+    <p>The custom date with fixed timezone is {{fixedTimezone | date:'yyyy-MM-dd HH:mm a z':'+0900'}}</p>
+  </div>`
+})
+export class DatePipeComponent {
+  today = Date.now();
+  fixedTimezone = '2015-06-15T09:03:01+0900';
+}
+// #enddocregion
+
+// #docregion DeprecatedDatePipe
+@Component({
+  selector: 'deprecated-date-pipe',
+  template: `<div>
+    <!--output 'Sep 3, 2010'-->
+    <p>Today is {{today | date}}</p>
+
+    <!--output 'Friday, September 3, 2010'-->
+    <p>Or if you prefer, {{today | date:'fullDate'}}</p>
+
+    <!--output '12:05 PM'-->
+    <p>The time is {{today | date:'shortTime'}}</p>
+
+    <!--output '2010-09-03 12:05 PM'-->
+    <p>The custom date is {{today | date:'yyyy-MM-dd HH:mm a'}}</p>
+  </div>`
+})
+export class DeprecatedDatePipeComponent {
+  today = Date.now();
+}
+// #enddocregion
diff --git a/packages/examples/common/pipes/ts/e2e_test/pipe_spec.ts b/packages/examples/common/pipes/ts/e2e_test/pipe_spec.ts
new file mode 100644
index 000000000000..10551fcfb1a9
--- /dev/null
+++ b/packages/examples/common/pipes/ts/e2e_test/pipe_spec.ts
@@ -0,0 +1,113 @@
+/**
+ * @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 {$, ExpectedConditions, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  const EC = ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('pipe', () => {
+  afterEach(verifyNoBrowserErrors);
+  const URL = '/common/pipes/ts/';
+
+  describe('async', () => {
+    it('should resolve and display promise', () => {
+      browser.get(URL);
+      waitForElement('async-promise-pipe');
+      expect(element.all(by.css('async-promise-pipe span')).get(0).getText())
+          .toEqual('Wait for it...');
+      element(by.css('async-promise-pipe button')).click();
+      expect(element.all(by.css('async-promise-pipe span')).get(0).getText())
+          .toEqual('Wait for it... hi there!');
+    });
+  });
+
+  describe('lowercase/uppercase', () => {
+    it('should work properly', () => {
+      browser.get(URL);
+      waitForElement('lowerupper-pipe');
+      element(by.css('lowerupper-pipe input')).sendKeys('Hello World!');
+      expect(element.all(by.css('lowerupper-pipe pre')).get(0).getText())
+          .toEqual('\'hello world!\'');
+      expect(element.all(by.css('lowerupper-pipe pre')).get(1).getText())
+          .toEqual('\'HELLO WORLD!\'');
+    });
+  });
+
+  describe('titlecase', () => {
+    it('should work properly', () => {
+      browser.get(URL);
+      waitForElement('titlecase-pipe');
+      expect(element.all(by.css('titlecase-pipe p')).get(0).getText()).toEqual('Some String');
+      expect(element.all(by.css('titlecase-pipe p')).get(1).getText())
+          .toEqual('This Is Mixed Case');
+      expect(element.all(by.css('titlecase-pipe p')).get(2).getText())
+          .toEqual('It\'s Non-trivial Question');
+      expect(element.all(by.css('titlecase-pipe p')).get(3).getText()).toEqual('One,two,three');
+      expect(element.all(by.css('titlecase-pipe p')).get(4).getText()).toEqual('True|false');
+      expect(element.all(by.css('titlecase-pipe p')).get(5).getText()).toEqual('Foo-vs-bar');
+    });
+  });
+
+  describe('keyvalue', () => {
+    it('should work properly', () => {
+      browser.get(URL);
+      waitForElement('keyvalue-pipe');
+      expect(element.all(by.css('keyvalue-pipe div')).get(0).getText()).toEqual('1:bar');
+      expect(element.all(by.css('keyvalue-pipe div')).get(1).getText()).toEqual('2:foo');
+      expect(element.all(by.css('keyvalue-pipe div')).get(2).getText()).toEqual('1:bar');
+      expect(element.all(by.css('keyvalue-pipe div')).get(3).getText()).toEqual('2:foo');
+    });
+  });
+
+  describe('number', () => {
+    it('should work properly', () => {
+      browser.get(URL);
+      waitForElement('number-pipe');
+      const examples = element.all(by.css('number-pipe p'));
+      expect(examples.get(0).getText()).toEqual('e (no formatting): 2.718');
+      expect(examples.get(1).getText()).toEqual('e (3.1-5): 002.71828');
+      expect(examples.get(2).getText()).toEqual('e (4.5-5): 0,002.71828');
+      expect(examples.get(3).getText()).toEqual('e (french): 0 002,71828');
+      expect(examples.get(4).getText()).toEqual('pi (no formatting): 3.14');
+      expect(examples.get(5).getText()).toEqual('pi (3.1-5): 003.14');
+      expect(examples.get(6).getText()).toEqual('pi (3.5-5): 003.14000');
+      expect(examples.get(7).getText()).toEqual('-2.5 (1.0-0): -3');
+    });
+  });
+
+  describe('percent', () => {
+    it('should work properly', () => {
+      browser.get(URL);
+      waitForElement('percent-pipe');
+      const examples = element.all(by.css('percent-pipe p'));
+      expect(examples.get(0).getText()).toEqual('A: 26%');
+      expect(examples.get(1).getText()).toEqual('B: 0,134.950%');
+      expect(examples.get(2).getText()).toEqual('B: 0 134,950 %');
+    });
+  });
+
+  describe('currency', () => {
+    it('should work properly', () => {
+      browser.get(URL);
+      waitForElement('currency-pipe');
+      const examples = element.all(by.css('currency-pipe p'));
+      expect(examples.get(0).getText()).toEqual('A: $0.26');
+      expect(examples.get(1).getText()).toEqual('A: CA$0.26');
+      expect(examples.get(2).getText()).toEqual('A: CAD0.26');
+      expect(examples.get(3).getText()).toEqual('B: CA$0,001.35');
+      expect(examples.get(4).getText()).toEqual('B: $0,001.35');
+      expect(examples.get(5).getText()).toEqual('B: 0 001,35 CA$');
+      expect(examples.get(6).getText()).toEqual('B: CLP1');
+    });
+  });
+});
diff --git a/packages/examples/common/pipes/ts/i18n_pipe.ts b/packages/examples/common/pipes/ts/i18n_pipe.ts
new file mode 100644
index 000000000000..98088e3eb7a5
--- /dev/null
+++ b/packages/examples/common/pipes/ts/i18n_pipe.ts
@@ -0,0 +1,30 @@
+/**
+ * @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';
+
+// #docregion I18nPluralPipeComponent
+@Component({
+  selector: 'i18n-plural-pipe',
+  template: `<div>{{ messages.length | i18nPlural: messageMapping }}</div>`
+})
+export class I18nPluralPipeComponent {
+  messages: any[] = ['Message 1'];
+  messageMapping:
+      {[k: string]: string} = {'=0': 'No messages.', '=1': 'One message.', 'other': '# messages.'};
+}
+// #enddocregion
+
+// #docregion I18nSelectPipeComponent
+@Component(
+    {selector: 'i18n-select-pipe', template: `<div>{{gender | i18nSelect: inviteMap}} </div>`})
+export class I18nSelectPipeComponent {
+  gender: string = 'male';
+  inviteMap: any = {'male': 'Invite him.', 'female': 'Invite her.', 'other': 'Invite them.'};
+}
+//#enddocregion
diff --git a/packages/examples/common/pipes/ts/json_pipe.ts b/packages/examples/common/pipes/ts/json_pipe.ts
new file mode 100644
index 000000000000..68a8035e60b3
--- /dev/null
+++ b/packages/examples/common/pipes/ts/json_pipe.ts
@@ -0,0 +1,24 @@
+/**
+ * @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';
+
+// #docregion JsonPipe
+@Component({
+  selector: 'json-pipe',
+  template: `<div>
+    <p>Without JSON pipe:</p>
+    <pre>{{object}}</pre>
+    <p>With JSON pipe:</p>
+    <pre>{{object | json}}</pre>
+  </div>`
+})
+export class JsonPipeComponent {
+  object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
+}
+// #enddocregion
diff --git a/packages/examples/common/pipes/ts/keyvalue_pipe.ts b/packages/examples/common/pipes/ts/keyvalue_pipe.ts
new file mode 100644
index 000000000000..3f482a3b3eb3
--- /dev/null
+++ b/packages/examples/common/pipes/ts/keyvalue_pipe.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 {Component} from '@angular/core';
+
+// #docregion KeyValuePipe
+@Component({
+  selector: 'keyvalue-pipe',
+  template: `<span>
+    <p>Object</p>
+    <div *ngFor="let item of object | keyvalue">
+      {{item.key}}:{{item.value}}
+    </div>
+    <p>Map</p>
+    <div *ngFor="let item of map | keyvalue">
+      {{item.key}}:{{item.value}}
+    </div>
+  </span>`
+})
+export class KeyValuePipeComponent {
+  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
+  map = new Map([[2, 'foo'], [1, 'bar']]);
+}
+// #enddocregion
diff --git a/packages/examples/common/pipes/ts/locale-fr.ts b/packages/examples/common/pipes/ts/locale-fr.ts
new file mode 100644
index 000000000000..d5fa4e9d3056
--- /dev/null
+++ b/packages/examples/common/pipes/ts/locale-fr.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
+ */
+
+// THIS CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+
+export default [
+  'fr',
+  [
+    ['AM', 'PM'],
+    ,
+  ],
+  ,
+  [
+    ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+    ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+    ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
+  ],
+  ,
+  [
+    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    [
+      'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
+      'déc.'
+    ],
+    [
+      'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+      'octobre', 'novembre', 'décembre'
+    ]
+  ],
+  , [['av. J.-C.', 'ap. J.-C.'], , ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
+  ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
+  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'],
+  [
+    '{1} {0}',
+    '{1} \'à\' {0}',
+    ,
+  ],
+  [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
+  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', function(n: number):
+                                                                  number {
+                                                                    let i = Math.floor(Math.abs(n));
+                                                                    if (i === 0 || i === 1)
+                                                                      return 1;
+                                                                    return 5;
+                                                                  }
+];
diff --git a/packages/examples/common/pipes/ts/lowerupper_pipe.ts b/packages/examples/common/pipes/ts/lowerupper_pipe.ts
new file mode 100644
index 000000000000..4e466b0cbbd8
--- /dev/null
+++ b/packages/examples/common/pipes/ts/lowerupper_pipe.ts
@@ -0,0 +1,25 @@
+/**
+ * @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';
+
+// #docregion LowerUpperPipe
+@Component({
+  selector: 'lowerupper-pipe',
+  template: `<div>
+    <label>Name: </label><input #name (keyup)="change(name.value)" type="text">
+    <p>In lowercase: <pre>'{{value | lowercase}}'</pre>
+    <p>In uppercase: <pre>'{{value | uppercase}}'</pre>
+  </div>`
+})
+export class LowerUpperPipeComponent {
+  // TODO(issue/24571): remove '!'.
+  value !: string;
+  change(value: string) { this.value = value; }
+}
+// #enddocregion
diff --git a/packages/examples/common/pipes/ts/module.ts b/packages/examples/common/pipes/ts/module.ts
new file mode 100644
index 000000000000..f21d3af8b1c2
--- /dev/null
+++ b/packages/examples/common/pipes/ts/module.ts
@@ -0,0 +1,77 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {AsyncObservablePipeComponent, AsyncPromisePipeComponent} from './async_pipe';
+import {CurrencyPipeComponent, DeprecatedCurrencyPipeComponent} from './currency_pipe';
+import {DatePipeComponent, DeprecatedDatePipeComponent} from './date_pipe';
+import {I18nPluralPipeComponent, I18nSelectPipeComponent} from './i18n_pipe';
+import {JsonPipeComponent} from './json_pipe';
+import {KeyValuePipeComponent} from './keyvalue_pipe';
+import {LowerUpperPipeComponent} from './lowerupper_pipe';
+import {DeprecatedNumberPipeComponent, NumberPipeComponent} from './number_pipe';
+import {DeprecatedPercentPipeComponent, PercentPipeComponent} from './percent_pipe';
+import {SlicePipeListComponent, SlicePipeStringComponent} from './slice_pipe';
+import {TitleCasePipeComponent} from './titlecase_pipe';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <h1>Pipe Example</h1>
+
+    <h2><code>async</code></h2>
+    <async-promise-pipe></async-promise-pipe>
+    <async-observable-pipe></async-observable-pipe>
+
+    <h2><code>date</code></h2>
+    <date-pipe></date-pipe>
+
+    <h2><code>json</code></h2>
+    <json-pipe></json-pipe>
+
+    <h2><code>lower</code>, <code>upper</code></h2>
+    <lowerupper-pipe></lowerupper-pipe>
+
+    <h2><code>titlecase</code></h2>
+    <titlecase-pipe></titlecase-pipe>
+
+    <h2><code>number</code></h2>
+    <number-pipe></number-pipe>
+    <percent-pipe></percent-pipe>
+    <currency-pipe></currency-pipe>
+
+    <h2><code>slice</code></h2>
+    <slice-string-pipe></slice-string-pipe>
+    <slice-list-pipe></slice-list-pipe>
+
+    <h2><code>i18n</code></h2>
+    <i18n-plural-pipe></i18n-plural-pipe>
+    <i18n-select-pipe></i18n-select-pipe>
+
+    <h2><code>keyvalue</code></h2>
+    <keyvalue-pipe></keyvalue-pipe>
+  `
+})
+export class ExampleAppComponent {
+}
+
+@NgModule({
+  declarations: [
+    AsyncPromisePipeComponent, AsyncObservablePipeComponent, ExampleAppComponent, JsonPipeComponent,
+    DatePipeComponent, DeprecatedDatePipeComponent, LowerUpperPipeComponent, TitleCasePipeComponent,
+    NumberPipeComponent, PercentPipeComponent, DeprecatedPercentPipeComponent,
+    CurrencyPipeComponent, DeprecatedCurrencyPipeComponent, SlicePipeStringComponent,
+    SlicePipeListComponent, I18nPluralPipeComponent, I18nSelectPipeComponent, KeyValuePipeComponent
+  ],
+  imports: [BrowserModule],
+  bootstrap: [ExampleAppComponent]
+})
+export class AppModule {
+}
diff --git a/packages/examples/common/pipes/ts/number_pipe.ts b/packages/examples/common/pipes/ts/number_pipe.ts
new file mode 100644
index 000000000000..40388a670d19
--- /dev/null
+++ b/packages/examples/common/pipes/ts/number_pipe.ts
@@ -0,0 +1,66 @@
+/**
+ * @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 {registerLocaleData} from '@angular/common';
+import {Component} from '@angular/core';
+// we need to import data for the french locale
+import localeFr from './locale-fr';
+
+// registering french data
+registerLocaleData(localeFr);
+
+// #docregion NumberPipe
+@Component({
+  selector: 'number-pipe',
+  template: `<div>
+    <!--output '2.718'-->
+    <p>e (no formatting): {{e | number}}</p>
+    
+    <!--output '002.71828'-->
+    <p>e (3.1-5): {{e | number:'3.1-5'}}</p>
+
+    <!--output '0,002.71828'-->
+    <p>e (4.5-5): {{e | number:'4.5-5'}}</p>
+    
+    <!--output '0 002,71828'-->
+    <p>e (french): {{e | number:'4.5-5':'fr'}}</p>
+
+    <!--output '3.14'-->
+    <p>pi (no formatting): {{pi | number}}</p>
+    
+    <!--output '003.14'-->
+    <p>pi (3.1-5): {{pi | number:'3.1-5'}}</p>
+
+    <!--output '003.14000'-->
+    <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
+
+    <!--output '-3' / unlike '-2' by Math.round()-->
+    <p>-2.5 (1.0-0): {{-2.5 | number:'1.0-0'}}</p>
+  </div>`
+})
+export class NumberPipeComponent {
+  pi: number = 3.14;
+  e: number = 2.718281828459045;
+}
+// #enddocregion
+
+// #docregion DeprecatedNumberPipe
+@Component({
+  selector: 'deprecated-number-pipe',
+  template: `<div>
+    <p>e (no formatting): {{e}}</p>
+    <p>e (3.1-5): {{e | number:'3.1-5'}}</p>
+    <p>pi (no formatting): {{pi}}</p>
+    <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
+  </div>`
+})
+export class DeprecatedNumberPipeComponent {
+  pi: number = 3.141592;
+  e: number = 2.718281828459045;
+}
+// #enddocregion
diff --git a/packages/examples/common/pipes/ts/percent_pipe.ts b/packages/examples/common/pipes/ts/percent_pipe.ts
new file mode 100644
index 000000000000..665500aafe8e
--- /dev/null
+++ b/packages/examples/common/pipes/ts/percent_pipe.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 {registerLocaleData} from '@angular/common';
+import {Component} from '@angular/core';
+// we need to import data for the french locale
+import localeFr from './locale-fr';
+
+// registering french data
+registerLocaleData(localeFr);
+
+// #docregion PercentPipe
+@Component({
+  selector: 'percent-pipe',
+  template: `<div>
+    <!--output '26%'-->
+    <p>A: {{a | percent}}</p>
+
+    <!--output '0,134.950%'-->
+    <p>B: {{b | percent:'4.3-5'}}</p>
+
+    <!--output '0 134,950 %'-->
+    <p>B: {{b | percent:'4.3-5':'fr'}}</p>
+  </div>`
+})
+export class PercentPipeComponent {
+  a: number = 0.259;
+  b: number = 1.3495;
+}
+// #enddocregion
+
+// #docregion DeprecatedPercentPipe
+@Component({
+  selector: 'deprecated-percent-pipe',
+  template: `<div>
+    <!--output '25.9%'-->
+    <p>A: {{a | percent}}</p>
+
+    <!--output '0,134.95%'-->
+    <p>B: {{b | percent:'4.3-5'}}</p>
+  </div>`
+})
+export class DeprecatedPercentPipeComponent {
+  a: number = 0.259;
+  b: number = 1.3495;
+}
+// #enddocregion
diff --git a/packages/examples/common/pipes/ts/slice_pipe.ts b/packages/examples/common/pipes/ts/slice_pipe.ts
new file mode 100644
index 000000000000..cccb625c5a15
--- /dev/null
+++ b/packages/examples/common/pipes/ts/slice_pipe.ts
@@ -0,0 +1,38 @@
+/**
+ * @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';
+
+// #docregion SlicePipe_string
+@Component({
+  selector: 'slice-string-pipe',
+  template: `<div>
+    <p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>
+    <p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p>
+    <p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>
+    <p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>
+    <p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>
+    <p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>
+  </div>`
+})
+export class SlicePipeStringComponent {
+  str: string = 'abcdefghij';
+}
+// #enddocregion
+
+// #docregion SlicePipe_list
+@Component({
+  selector: 'slice-list-pipe',
+  template: `<ul>
+    <li *ngFor="let i of collection | slice:1:3">{{i}}</li>
+  </ul>`
+})
+export class SlicePipeListComponent {
+  collection: string[] = ['a', 'b', 'c', 'd'];
+}
+// #enddocregion
diff --git a/packages/examples/common/pipes/ts/titlecase_pipe.ts b/packages/examples/common/pipes/ts/titlecase_pipe.ts
new file mode 100644
index 000000000000..21af7ce79f8a
--- /dev/null
+++ b/packages/examples/common/pipes/ts/titlecase_pipe.ts
@@ -0,0 +1,25 @@
+/**
+ * @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';
+
+// #docregion TitleCasePipe
+@Component({
+  selector: 'titlecase-pipe',
+  template: `<div>
+    <p>{{'some string' | titlecase}}</p> <!-- output is expected to be "Some String" --> 
+    <p>{{'tHIs is mIXeD CaSe' | titlecase}}</p> <!-- output is expected to be "This Is Mixed Case" --> 
+    <p>{{'it\\'s non-trivial question' | titlecase}}</p> <!-- output is expected to be "It's Non-trivial Question" --> 
+    <p>{{'one,two,three' | titlecase}}</p> <!-- output is expected to be "One,two,three" -->
+    <p>{{'true|false' | titlecase}}</p> <!-- output is expected to be "True|false" -->
+    <p>{{'foo-vs-bar' | titlecase}}</p> <!-- output is expected to be "Foo-vs-bar" -->
+  </div>`
+})
+export class TitleCasePipeComponent {
+}
+// #enddocregion
diff --git a/packages/examples/compiler/ts/url_resolver/url_resolver.ts b/packages/examples/compiler/ts/url_resolver/url_resolver.ts
new file mode 100644
index 000000000000..aac95527141a
--- /dev/null
+++ b/packages/examples/compiler/ts/url_resolver/url_resolver.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 {UrlResolver} from '@angular/compiler';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+let MyApp: any;
+
+// #docregion url_resolver
+class MyUrlResolver extends UrlResolver {
+  resolve(baseUrl: string, url: string): string {
+    // Serve CSS files from a special CDN.
+    if (url.substr(-4) === '.css') {
+      return super.resolve('http://cdn.myapp.com/css/', url);
+    }
+    return super.resolve(baseUrl, url);
+  }
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  providers: [{provide: UrlResolver, useClass: MyUrlResolver}],
+  bootstrap: [MyApp]
+})
+class AppModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
+}
+// #enddocregion
diff --git a/packages/examples/core/animation/ts/dsl/animation_example.ts b/packages/examples/core/animation/ts/dsl/animation_example.ts
new file mode 100644
index 000000000000..dc3e527ed72f
--- /dev/null
+++ b/packages/examples/core/animation/ts/dsl/animation_example.ts
@@ -0,0 +1,58 @@
+/**
+ * @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
+ */
+
+// #docregion Component
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {Component, NgModule} from '@angular/core';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+@Component({
+  selector: 'example-app',
+  styles: [`
+    .toggle-container {
+      background-color:white;
+      border:10px solid black;
+      width:200px;
+      text-align:center;
+      line-height:100px;
+      font-size:50px;
+      box-sizing:border-box;
+      overflow:hidden;
+    }
+  `],
+  animations: [trigger(
+      'openClose',
+      [
+        state('collapsed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})),
+        state('expanded', style({height: '*', borderColor: 'green', color: 'green'})),
+        transition(
+            'collapsed <=> expanded', [animate(500, style({height: '250px'})), animate(500)])
+      ])],
+  template: `
+    <button (click)="expand()">Open</button>
+    <button (click)="collapse()">Closed</button>
+    <hr />
+    <div class="toggle-container" [@openClose]="stateExpression">
+      Look at this box
+    </div>
+  `
+})
+export class MyExpandoCmp {
+  // TODO(issue/24571): remove '!'.
+  stateExpression !: string;
+  constructor() { this.collapse(); }
+  expand() { this.stateExpression = 'expanded'; }
+  collapse() { this.stateExpression = 'collapsed'; }
+}
+
+@NgModule(
+    {imports: [BrowserAnimationsModule], declarations: [MyExpandoCmp], bootstrap: [MyExpandoCmp]})
+export class AppModule {
+}
+
+// #enddocregion
diff --git a/packages/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts b/packages/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts
new file mode 100644
index 000000000000..11ff8acfb5f6
--- /dev/null
+++ b/packages/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 {$, ExpectedConditions, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  const EC = ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('animation example', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  describe('index view', () => {
+    const URL = '/core/animation/ts/dsl/';
+
+    it('should list out the current collection of items', () => {
+      browser.get(URL);
+      waitForElement('.toggle-container');
+      expect(element.all(by.css('.toggle-container')).get(0).getText()).toEqual('Look at this box');
+    });
+  });
+});
diff --git a/packages/examples/core/animation/ts/dsl/module.ts b/packages/examples/core/animation/ts/dsl/module.ts
new file mode 100644
index 000000000000..6420007c73f9
--- /dev/null
+++ b/packages/examples/core/animation/ts/dsl/module.ts
@@ -0,0 +1,8 @@
+/**
+ * @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 {AppModule} from './animation_example';
diff --git a/packages/examples/core/debug/ts/debug_element/debug_element.ts b/packages/examples/core/debug/ts/debug_element/debug_element.ts
new file mode 100644
index 000000000000..63cf722dc0aa
--- /dev/null
+++ b/packages/examples/core/debug/ts/debug_element/debug_element.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {DebugElement} from '@angular/core';
+
+let debugElement: DebugElement = undefined !;
+let predicate: any;
+
+// #docregion scope_all
+debugElement.query(predicate);
+// #enddocregion
diff --git a/packages/examples/core/di/ts/contentChild/content_child_example.ts b/packages/examples/core/di/ts/contentChild/content_child_example.ts
new file mode 100644
index 000000000000..a7347819125d
--- /dev/null
+++ b/packages/examples/core/di/ts/contentChild/content_child_example.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
+ */
+
+// #docregion Component
+import {Component, ContentChild, Directive, Input} from '@angular/core';
+
+@Directive({selector: 'pane'})
+export class Pane {
+  // TODO(issue/24571): remove '!'.
+  @Input() id !: string;
+}
+
+@Component({
+  selector: 'tab',
+  template: `
+    <div>pane: {{pane?.id}}</div> 
+  `
+})
+export class Tab {
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(Pane) pane !: Pane;
+}
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <tab>
+      <pane id="1" *ngIf="shouldShow"></pane>
+      <pane id="2" *ngIf="!shouldShow"></pane>
+    </tab>
+    
+    <button (click)="toggle()">Toggle</button>
+  `,
+})
+export class ContentChildComp {
+  shouldShow = true;
+
+  toggle() { this.shouldShow = !this.shouldShow; }
+}
+// #enddocregion
diff --git a/packages/examples/core/di/ts/contentChild/content_child_howto.ts b/packages/examples/core/di/ts/contentChild/content_child_howto.ts
new file mode 100644
index 000000000000..1000fb3a62be
--- /dev/null
+++ b/packages/examples/core/di/ts/contentChild/content_child_howto.ts
@@ -0,0 +1,25 @@
+/**
+ * @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
+ */
+
+// #docregion HowTo
+import {AfterContentInit, ContentChild, Directive} from '@angular/core';
+
+@Directive({selector: 'child-directive'})
+class ChildDirective {
+}
+
+@Directive({selector: 'someDir'})
+class SomeDir implements AfterContentInit {
+  // TODO(issue/24571): remove '!'.
+  @ContentChild(ChildDirective) contentChild !: ChildDirective;
+
+  ngAfterContentInit() {
+    // contentChild is set
+  }
+}
+// #enddocregion
\ No newline at end of file
diff --git a/packages/examples/core/di/ts/contentChild/e2e_test/content_child_spec.ts b/packages/examples/core/di/ts/contentChild/e2e_test/content_child_spec.ts
new file mode 100644
index 000000000000..3d18b2e6c40c
--- /dev/null
+++ b/packages/examples/core/di/ts/contentChild/e2e_test/content_child_spec.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 {ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+
+describe('contentChild example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let button: ElementFinder;
+  let result: ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/core/di/ts/contentChild/index.html');
+    button = element(by.css('button'));
+    result = element(by.css('div'));
+  });
+
+  it('should query content child', () => {
+    expect(result.getText()).toEqual('pane: 1');
+
+    button.click();
+
+    expect(result.getText()).toEqual('pane: 2');
+  });
+});
diff --git a/packages/examples/core/di/ts/contentChild/module.ts b/packages/examples/core/di/ts/contentChild/module.ts
new file mode 100644
index 000000000000..d64982d3512c
--- /dev/null
+++ b/packages/examples/core/di/ts/contentChild/module.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 {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ContentChildComp, Pane, Tab} from './content_child_example';
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [ContentChildComp, Pane, Tab],
+  bootstrap: [ContentChildComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/core/di/ts/contentChildren/content_children_example.ts b/packages/examples/core/di/ts/contentChildren/content_children_example.ts
new file mode 100644
index 000000000000..d298a934421b
--- /dev/null
+++ b/packages/examples/core/di/ts/contentChildren/content_children_example.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
+ */
+
+// #docregion Component
+import {Component, ContentChildren, Directive, Input, QueryList} from '@angular/core';
+
+@Directive({selector: 'pane'})
+export class Pane {
+  // TODO(issue/24571): remove '!'.
+  @Input() id !: string;
+}
+
+@Component({
+  selector: 'tab',
+  template: `
+    <div class="top-level">Top level panes: {{serializedPanes}}</div> 
+    <div class="nested">Arbitrary nested panes: {{serializedNestedPanes}}</div>
+  `
+})
+export class Tab {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(Pane) topLevelPanes !: QueryList<Pane>;
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(Pane, {descendants: true}) arbitraryNestedPanes !: QueryList<Pane>;
+
+  get serializedPanes(): string {
+    return this.topLevelPanes ? this.topLevelPanes.map(p => p.id).join(', ') : '';
+  }
+  get serializedNestedPanes(): string {
+    return this.arbitraryNestedPanes ? this.arbitraryNestedPanes.map(p => p.id).join(', ') : '';
+  }
+}
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <tab>
+      <pane id="1"></pane>
+      <pane id="2"></pane>
+      <pane id="3" *ngIf="shouldShow">
+        <tab>
+          <pane id="3_1"></pane>
+          <pane id="3_2"></pane>
+        </tab>
+      </pane>
+    </tab>
+    
+    <button (click)="show()">Show 3</button>
+  `,
+})
+export class ContentChildrenComp {
+  shouldShow = false;
+
+  show() { this.shouldShow = true; }
+}
+// #enddocregion
diff --git a/packages/examples/core/di/ts/contentChildren/content_children_howto.ts b/packages/examples/core/di/ts/contentChildren/content_children_howto.ts
new file mode 100644
index 000000000000..776ed57dafd4
--- /dev/null
+++ b/packages/examples/core/di/ts/contentChildren/content_children_howto.ts
@@ -0,0 +1,25 @@
+/**
+ * @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
+ */
+
+// #docregion HowTo
+import {AfterContentInit, ContentChildren, Directive, QueryList} from '@angular/core';
+
+@Directive({selector: 'child-directive'})
+class ChildDirective {
+}
+
+@Directive({selector: 'someDir'})
+class SomeDir implements AfterContentInit {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(ChildDirective) contentChildren !: QueryList<ChildDirective>;
+
+  ngAfterContentInit() {
+    // contentChildren is set
+  }
+}
+// #enddocregion
\ No newline at end of file
diff --git a/packages/examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts b/packages/examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts
new file mode 100644
index 000000000000..1f061af5fe8a
--- /dev/null
+++ b/packages/examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+
+describe('contentChildren example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let button: ElementFinder;
+  let resultTopLevel: ElementFinder;
+  let resultNested: ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/core/di/ts/contentChildren/index.html');
+    button = element(by.css('button'));
+    resultTopLevel = element(by.css('.top-level'));
+    resultNested = element(by.css('.nested'));
+  });
+
+  it('should query content children', () => {
+    expect(resultTopLevel.getText()).toEqual('Top level panes: 1, 2');
+
+    button.click();
+
+    expect(resultTopLevel.getText()).toEqual('Top level panes: 1, 2, 3');
+  });
+
+  it('should query nested content children', () => {
+    expect(resultNested.getText()).toEqual('Arbitrary nested panes: 1, 2');
+
+    button.click();
+
+    expect(resultNested.getText()).toEqual('Arbitrary nested panes: 1, 2, 3, 3_1, 3_2');
+  });
+});
diff --git a/packages/examples/core/di/ts/contentChildren/module.ts b/packages/examples/core/di/ts/contentChildren/module.ts
new file mode 100644
index 000000000000..18e50ea60c3a
--- /dev/null
+++ b/packages/examples/core/di/ts/contentChildren/module.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 {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ContentChildrenComp, Pane, Tab} from './content_children_example';
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [ContentChildrenComp, Pane, Tab],
+  bootstrap: [ContentChildrenComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/core/di/ts/forward_ref/forward_ref_spec.ts b/packages/examples/core/di/ts/forward_ref/forward_ref_spec.ts
new file mode 100644
index 000000000000..213c972222cb
--- /dev/null
+++ b/packages/examples/core/di/ts/forward_ref/forward_ref_spec.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 {Inject, ReflectiveInjector, forwardRef, resolveForwardRef} from '@angular/core';
+
+{
+  describe('forwardRef examples', () => {
+    it('ForwardRefFn example works', () => {
+      // #docregion forward_ref_fn
+      const ref = forwardRef(() => Lock);
+      // #enddocregion
+      expect(ref).not.toBeNull();
+
+      class Lock {}
+    });
+
+    it('can be used to inject a class defined later', () => {
+      // #docregion forward_ref
+      class Door {
+        lock: Lock;
+
+        // Door attempts to inject Lock, despite it not being defined yet.
+        // forwardRef makes this possible.
+        constructor(@Inject(forwardRef(() => Lock)) lock: Lock) { this.lock = lock; }
+      }
+
+      // Only at this point Lock is defined.
+      class Lock {}
+
+      const injector = ReflectiveInjector.resolveAndCreate([Door, Lock]);
+      const door = injector.get(Door);
+      expect(door instanceof Door).toBeTruthy();
+      expect(door.lock instanceof Lock).toBeTruthy();
+      // #enddocregion
+    });
+
+    it('can be unwrapped', () => {
+      // #docregion resolve_forward_ref
+      const ref = forwardRef(() => 'refValue');
+      expect(resolveForwardRef(ref)).toEqual('refValue');
+      expect(resolveForwardRef('regularValue')).toEqual('regularValue');
+      // #enddocregion
+    });
+  });
+}
diff --git a/packages/examples/core/di/ts/injector_spec.ts b/packages/examples/core/di/ts/injector_spec.ts
new file mode 100644
index 000000000000..1a06c1c824c2
--- /dev/null
+++ b/packages/examples/core/di/ts/injector_spec.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 {InjectFlags, InjectionToken, Injector, Type, inject, ɵsetCurrentInjector as setCurrentInjector} from '@angular/core';
+
+class MockRootScopeInjector implements Injector {
+  constructor(readonly parent: Injector) {}
+
+  get<T>(
+      token: Type<T>|InjectionToken<T>, defaultValue?: any,
+      flags: InjectFlags = InjectFlags.Default): T {
+    if ((token as any).ngInjectableDef && (token as any).ngInjectableDef.providedIn === 'root') {
+      const old = setCurrentInjector(this);
+      try {
+        return (token as any).ngInjectableDef.factory();
+      } finally {
+        setCurrentInjector(old);
+      }
+    }
+    return this.parent.get(token, defaultValue, flags);
+  }
+}
+
+{
+  describe('injector metadata examples', () => {
+    it('works', () => {
+      // #docregion Injector
+      const injector: Injector =
+          Injector.create({providers: [{provide: 'validToken', useValue: 'Value'}]});
+      expect(injector.get('validToken')).toEqual('Value');
+      expect(() => injector.get('invalidToken')).toThrowError();
+      expect(injector.get('invalidToken', 'notFound')).toEqual('notFound');
+      // #enddocregion
+    });
+
+    it('injects injector', () => {
+      // #docregion injectInjector
+      const injector = Injector.create({providers: []});
+      expect(injector.get(Injector)).toBe(injector);
+      // #enddocregion
+    });
+
+    it('should infer type', () => {
+      // #docregion InjectionToken
+      const BASE_URL = new InjectionToken<string>('BaseUrl');
+      const injector =
+          Injector.create({providers: [{provide: BASE_URL, useValue: 'http://localhost'}]});
+      const url = injector.get(BASE_URL);
+      // here `url` is inferred to be `string` because `BASE_URL` is `InjectionToken<string>`.
+      expect(url).toBe('http://localhost');
+      // #enddocregion
+    });
+
+    it('injects a tree-shakeable InjectionToken', () => {
+      class MyDep {}
+      const injector =
+          new MockRootScopeInjector(Injector.create({providers: [{provide: MyDep, deps: []}]}));
+
+      // #docregion ShakableInjectionToken
+      class MyService {
+        constructor(readonly myDep: MyDep) {}
+      }
+
+      const MY_SERVICE_TOKEN = new InjectionToken<MyService>('Manually constructed MyService', {
+        providedIn: 'root',
+        factory: () => new MyService(inject(MyDep)),
+      });
+
+      const instance = injector.get(MY_SERVICE_TOKEN);
+      expect(instance instanceof MyService).toBeTruthy();
+      expect(instance.myDep instanceof MyDep).toBeTruthy();
+      // #enddocregion
+    });
+  });
+}
diff --git a/packages/examples/core/di/ts/metadata_spec.ts b/packages/examples/core/di/ts/metadata_spec.ts
new file mode 100644
index 000000000000..635c7033bcf7
--- /dev/null
+++ b/packages/examples/core/di/ts/metadata_spec.ts
@@ -0,0 +1,185 @@
+/**
+ * @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, Host, Inject, Injectable, Optional, ReflectiveInjector, Self, SkipSelf} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+{
+  describe('di metadata examples', () => {
+    describe('Inject', () => {
+      it('works', () => {
+        // #docregion Inject
+        class Engine {}
+
+        @Injectable()
+        class Car {
+          constructor(@Inject('MyEngine') public engine: Engine) {}
+        }
+
+        const injector =
+            ReflectiveInjector.resolveAndCreate([{provide: 'MyEngine', useClass: Engine}, Car]);
+
+        expect(injector.get(Car).engine instanceof Engine).toBe(true);
+        // #enddocregion
+      });
+
+      it('works without decorator', () => {
+        // #docregion InjectWithoutDecorator
+        class Engine {}
+
+        @Injectable()
+        class Car {
+          constructor(public engine: Engine) {
+          }  // same as constructor(@Inject(Engine) engine:Engine)
+        }
+
+        const injector = ReflectiveInjector.resolveAndCreate([Engine, Car]);
+        expect(injector.get(Car).engine instanceof Engine).toBe(true);
+        // #enddocregion
+      });
+    });
+
+    describe('Optional', () => {
+      it('works', () => {
+        // #docregion Optional
+        class Engine {}
+
+        @Injectable()
+        class Car {
+          constructor(@Optional() public engine: Engine) {}
+        }
+
+        const injector = ReflectiveInjector.resolveAndCreate([Car]);
+        expect(injector.get(Car).engine).toBeNull();
+        // #enddocregion
+      });
+    });
+
+    describe('Injectable', () => {
+      it('works', () => {
+        // #docregion Injectable
+        @Injectable()
+        class UsefulService {
+        }
+
+        @Injectable()
+        class NeedsService {
+          constructor(public service: UsefulService) {}
+        }
+
+        const injector = ReflectiveInjector.resolveAndCreate([NeedsService, UsefulService]);
+        expect(injector.get(NeedsService).service instanceof UsefulService).toBe(true);
+        // #enddocregion
+      });
+
+      it('throws without Injectable', () => {
+        // #docregion InjectableThrows
+        class UsefulService {}
+
+        class NeedsService {
+          constructor(public service: UsefulService) {}
+        }
+
+        expect(() => ReflectiveInjector.resolveAndCreate([NeedsService, UsefulService])).toThrow();
+        // #enddocregion
+      });
+    });
+
+    describe('Self', () => {
+      it('works', () => {
+        // #docregion Self
+        class Dependency {}
+
+        @Injectable()
+        class NeedsDependency {
+          constructor(@Self() public dependency: Dependency) {}
+        }
+
+        let inj = ReflectiveInjector.resolveAndCreate([Dependency, NeedsDependency]);
+        const nd = inj.get(NeedsDependency);
+
+        expect(nd.dependency instanceof Dependency).toBe(true);
+
+        inj = ReflectiveInjector.resolveAndCreate([Dependency]);
+        const child = inj.resolveAndCreateChild([NeedsDependency]);
+        expect(() => child.get(NeedsDependency)).toThrowError();
+        // #enddocregion
+      });
+    });
+
+    describe('SkipSelf', () => {
+      it('works', () => {
+        // #docregion SkipSelf
+        class Dependency {}
+
+        @Injectable()
+        class NeedsDependency {
+          constructor(@SkipSelf() public dependency: Dependency) { this.dependency = dependency; }
+        }
+
+        const parent = ReflectiveInjector.resolveAndCreate([Dependency]);
+        const child = parent.resolveAndCreateChild([NeedsDependency]);
+        expect(child.get(NeedsDependency).dependency instanceof Dependency).toBe(true);
+
+        const inj = ReflectiveInjector.resolveAndCreate([Dependency, NeedsDependency]);
+        expect(() => inj.get(NeedsDependency)).toThrowError();
+        // #enddocregion
+      });
+    });
+
+    describe('Host', () => {
+      it('works', () => {
+        // #docregion Host
+        class OtherService {}
+        class HostService {}
+
+        @Directive({selector: 'child-directive'})
+        class ChildDirective {
+          logs: string[] = [];
+
+          constructor(@Optional() @Host() os: OtherService, @Optional() @Host() hs: HostService) {
+            // os is null: true
+            this.logs.push(`os is null: ${os === null}`);
+            // hs is an instance of HostService: true
+            this.logs.push(`hs is an instance of HostService: ${hs instanceof HostService}`);
+          }
+        }
+
+        @Component({
+          selector: 'parent-cmp',
+          viewProviders: [HostService],
+          template: '<child-directive></child-directive>',
+        })
+        class ParentCmp {
+        }
+
+        @Component({
+          selector: 'app',
+          viewProviders: [OtherService],
+          template: '<parent-cmp></parent-cmp>',
+        })
+        class App {
+        }
+        // #enddocregion
+
+        TestBed.configureTestingModule({
+          declarations: [App, ParentCmp, ChildDirective],
+        });
+
+        let cmp: ComponentFixture<App> = undefined !;
+        expect(() => cmp = TestBed.createComponent(App)).not.toThrow();
+
+        expect(cmp.debugElement.children[0].children[0].injector.get(ChildDirective).logs).toEqual([
+          'os is null: true',
+          'hs is an instance of HostService: true',
+        ]);
+      });
+    });
+
+  });
+}
diff --git a/packages/examples/core/di/ts/provider_spec.ts b/packages/examples/core/di/ts/provider_spec.ts
new file mode 100644
index 000000000000..087a3767594b
--- /dev/null
+++ b/packages/examples/core/di/ts/provider_spec.ts
@@ -0,0 +1,209 @@
+/**
+ * @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, Injector, Optional, ReflectiveInjector} from '@angular/core';
+
+{
+  describe('Provider examples', () => {
+    describe('TypeProvider', () => {
+      it('works', () => {
+        // #docregion TypeProvider
+        @Injectable()
+        class Greeting {
+          salutation = 'Hello';
+        }
+
+        const injector = ReflectiveInjector.resolveAndCreate([
+          Greeting,  // Shorthand for { provide: Greeting, useClass: Greeting }
+        ]);
+
+        expect(injector.get(Greeting).salutation).toBe('Hello');
+        // #enddocregion
+      });
+    });
+
+    describe('ValueProvider', () => {
+      it('works', () => {
+        // #docregion ValueProvider
+        const injector = Injector.create([{provide: String, useValue: 'Hello'}]);
+
+        expect(injector.get(String)).toEqual('Hello');
+        // #enddocregion
+      });
+    });
+
+    describe('MultiProviderAspect', () => {
+      it('works', () => {
+        // #docregion MultiProviderAspect
+        const locale = new InjectionToken<string[]>('locale');
+        const injector = Injector.create([
+          {provide: locale, multi: true, useValue: 'en'},
+          {provide: locale, multi: true, useValue: 'sk'},
+        ]);
+
+        const locales: string[] = injector.get(locale);
+        expect(locales).toEqual(['en', 'sk']);
+        // #enddocregion
+      });
+    });
+
+    describe('ClassProvider', () => {
+      it('works', () => {
+        // #docregion ClassProvider
+        abstract class Shape {  // TODO(issue/24571): remove '!'.
+          name !: string;
+        }
+
+        class Square extends Shape {
+          name = 'square';
+        }
+
+        const injector = ReflectiveInjector.resolveAndCreate([{provide: Shape, useClass: Square}]);
+
+        const shape: Shape = injector.get(Shape);
+        expect(shape.name).toEqual('square');
+        expect(shape instanceof Square).toBe(true);
+        // #enddocregion
+      });
+
+      it('is different then useExisting', () => {
+        // #docregion ClassProviderDifference
+        class Greeting {
+          salutation = 'Hello';
+        }
+
+        class FormalGreeting extends Greeting {
+          salutation = 'Greetings';
+        }
+
+        const injector = ReflectiveInjector.resolveAndCreate(
+            [FormalGreeting, {provide: Greeting, useClass: FormalGreeting}]);
+
+        // The injector returns different instances.
+        // See: {provide: ?, useExisting: ?} if you want the same instance.
+        expect(injector.get(FormalGreeting)).not.toBe(injector.get(Greeting));
+        // #enddocregion
+      });
+    });
+
+    describe('StaticClassProvider', () => {
+      it('works', () => {
+        // #docregion StaticClassProvider
+        abstract class Shape {  // TODO(issue/24571): remove '!'.
+          name !: string;
+        }
+
+        class Square extends Shape {
+          name = 'square';
+        }
+
+        const injector = Injector.create([{provide: Shape, useClass: Square, deps: []}]);
+
+        const shape: Shape = injector.get(Shape);
+        expect(shape.name).toEqual('square');
+        expect(shape instanceof Square).toBe(true);
+        // #enddocregion
+      });
+
+      it('is different then useExisting', () => {
+        // #docregion StaticClassProviderDifference
+        class Greeting {
+          salutation = 'Hello';
+        }
+
+        class FormalGreeting extends Greeting {
+          salutation = 'Greetings';
+        }
+
+        const injector = Injector.create([
+          {provide: FormalGreeting, useClass: FormalGreeting, deps: []},
+          {provide: Greeting, useClass: FormalGreeting, deps: []}
+        ]);
+
+        // The injector returns different instances.
+        // See: {provide: ?, useExisting: ?} if you want the same instance.
+        expect(injector.get(FormalGreeting)).not.toBe(injector.get(Greeting));
+        // #enddocregion
+      });
+    });
+
+    describe('ConstructorProvider', () => {
+      it('works', () => {
+        // #docregion ConstructorProvider
+        class Square {
+          name = 'square';
+        }
+
+        const injector = Injector.create({providers: [{provide: Square, deps: []}]});
+
+        const shape: Square = injector.get(Square);
+        expect(shape.name).toEqual('square');
+        expect(shape instanceof Square).toBe(true);
+        // #enddocregion
+      });
+    });
+
+    describe('ExistingProvider', () => {
+      it('works', () => {
+        // #docregion ExistingProvider
+        class Greeting {
+          salutation = 'Hello';
+        }
+
+        class FormalGreeting extends Greeting {
+          salutation = 'Greetings';
+        }
+
+        const injector = Injector.create([
+          {provide: FormalGreeting, deps: []}, {provide: Greeting, useExisting: FormalGreeting}
+        ]);
+
+        expect(injector.get(Greeting).salutation).toEqual('Greetings');
+        expect(injector.get(FormalGreeting).salutation).toEqual('Greetings');
+        expect(injector.get(FormalGreeting)).toBe(injector.get(Greeting));
+        // #enddocregion
+      });
+    });
+
+    describe('FactoryProvider', () => {
+      it('works', () => {
+        // #docregion FactoryProvider
+        const Location = new InjectionToken('location');
+        const Hash = new InjectionToken('hash');
+
+        const injector = Injector.create([
+          {provide: Location, useValue: 'http://angular.io/#someLocation'}, {
+            provide: Hash,
+            useFactory: (location: string) => location.split('#')[1],
+            deps: [Location]
+          }
+        ]);
+
+        expect(injector.get(Hash)).toEqual('someLocation');
+        // #enddocregion
+      });
+
+      it('supports optional dependencies', () => {
+        // #docregion FactoryProviderOptionalDeps
+        const Location = new InjectionToken('location');
+        const Hash = new InjectionToken('hash');
+
+        const injector = Injector.create([{
+          provide: Hash,
+          useFactory: (location: string) => `Hash for: ${location}`,
+          // use a nested array to define metadata for dependencies.
+          deps: [[new Optional(), Location]]
+        }]);
+
+        expect(injector.get(Hash)).toEqual('Hash for: null');
+        // #enddocregion
+      });
+    });
+
+  });
+}
diff --git a/packages/examples/core/di/ts/viewChild/e2e_test/view_child_spec.ts b/packages/examples/core/di/ts/viewChild/e2e_test/view_child_spec.ts
new file mode 100644
index 000000000000..5d58b46a5bb9
--- /dev/null
+++ b/packages/examples/core/di/ts/viewChild/e2e_test/view_child_spec.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 {ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+
+describe('viewChild example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let button: ElementFinder;
+  let result: ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/core/di/ts/viewChild/index.html');
+    button = element(by.css('button'));
+    result = element(by.css('div'));
+  });
+
+  it('should query view child', () => {
+    expect(result.getText()).toEqual('Selected: 1');
+
+    button.click();
+
+    expect(result.getText()).toEqual('Selected: 2');
+  });
+});
diff --git a/packages/examples/core/di/ts/viewChild/module.ts b/packages/examples/core/di/ts/viewChild/module.ts
new file mode 100644
index 000000000000..0ea1c25ec6fe
--- /dev/null
+++ b/packages/examples/core/di/ts/viewChild/module.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {Pane, ViewChildComp} from './view_child_example';
+
+@NgModule(
+    {imports: [BrowserModule], declarations: [ViewChildComp, Pane], bootstrap: [ViewChildComp]})
+export class AppModule {
+}
diff --git a/packages/examples/core/di/ts/viewChild/view_child_example.ts b/packages/examples/core/di/ts/viewChild/view_child_example.ts
new file mode 100644
index 000000000000..4f7ccd15b1f5
--- /dev/null
+++ b/packages/examples/core/di/ts/viewChild/view_child_example.ts
@@ -0,0 +1,38 @@
+/**
+ * @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
+ */
+
+// #docregion Component
+import {Component, Directive, Input, ViewChild} from '@angular/core';
+
+@Directive({selector: 'pane'})
+export class Pane {
+  // TODO(issue/24571): remove '!'.
+  @Input() id !: string;
+}
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <pane id="1" *ngIf="shouldShow"></pane>
+    <pane id="2" *ngIf="!shouldShow"></pane>
+    
+    <button (click)="toggle()">Toggle</button>
+       
+    <div>Selected: {{selectedPane}}</div> 
+  `,
+})
+export class ViewChildComp {
+  @ViewChild(Pane)
+  set pane(v: Pane) {
+    setTimeout(() => { this.selectedPane = v.id; }, 0);
+  }
+  selectedPane: string = '';
+  shouldShow = true;
+  toggle() { this.shouldShow = !this.shouldShow; }
+}
+// #enddocregion
diff --git a/packages/examples/core/di/ts/viewChild/view_child_howto.ts b/packages/examples/core/di/ts/viewChild/view_child_howto.ts
new file mode 100644
index 000000000000..a0753ddbbb1a
--- /dev/null
+++ b/packages/examples/core/di/ts/viewChild/view_child_howto.ts
@@ -0,0 +1,25 @@
+/**
+ * @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
+ */
+
+// #docregion HowTo
+import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core';
+
+@Directive({selector: 'child-directive'})
+class ChildDirective {
+}
+
+@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
+class SomeCmp implements AfterViewInit {
+  // TODO(issue/24571): remove '!'.
+  @ViewChild(ChildDirective) child !: ChildDirective;
+
+  ngAfterViewInit() {
+    // child is set
+  }
+}
+// #enddocregion
\ No newline at end of file
diff --git a/packages/examples/core/di/ts/viewChildren/e2e_test/view_children_spec.ts b/packages/examples/core/di/ts/viewChildren/e2e_test/view_children_spec.ts
new file mode 100644
index 000000000000..a61d8e1ed3b2
--- /dev/null
+++ b/packages/examples/core/di/ts/viewChildren/e2e_test/view_children_spec.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 {ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+
+describe('viewChildren example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let button: ElementFinder;
+  let result: ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/core/di/ts/viewChildren/index.html');
+    button = element(by.css('button'));
+    result = element(by.css('div'));
+  });
+
+  it('should query view children', () => {
+    expect(result.getText()).toEqual('panes: 1, 2');
+
+    button.click();
+
+    expect(result.getText()).toEqual('panes: 1, 2, 3');
+  });
+});
diff --git a/packages/examples/core/di/ts/viewChildren/module.ts b/packages/examples/core/di/ts/viewChildren/module.ts
new file mode 100644
index 000000000000..1783203c2b2d
--- /dev/null
+++ b/packages/examples/core/di/ts/viewChildren/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {Pane, ViewChildrenComp} from './view_children_example';
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [ViewChildrenComp, Pane],
+  bootstrap: [ViewChildrenComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/core/di/ts/viewChildren/view_children_example.ts b/packages/examples/core/di/ts/viewChildren/view_children_example.ts
new file mode 100644
index 000000000000..bd5e95233b6a
--- /dev/null
+++ b/packages/examples/core/di/ts/viewChildren/view_children_example.ts
@@ -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
+ */
+
+// #docregion Component
+import {AfterViewInit, Component, Directive, Input, QueryList, ViewChildren} from '@angular/core';
+
+@Directive({selector: 'pane'})
+export class Pane {
+  // TODO(issue/24571): remove '!'.
+  @Input() id !: string;
+}
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <pane id="1"></pane>
+    <pane id="2"></pane>
+    <pane id="3" *ngIf="shouldShow"></pane>
+    
+    <button (click)="show()">Show 3</button>
+       
+    <div>panes: {{serializedPanes}}</div> 
+  `,
+})
+export class ViewChildrenComp implements AfterViewInit {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(Pane) panes !: QueryList<Pane>;
+  serializedPanes: string = '';
+
+  shouldShow = false;
+
+  show() { this.shouldShow = true; }
+
+  ngAfterViewInit() {
+    this.calculateSerializedPanes();
+    this.panes.changes.subscribe((r) => { this.calculateSerializedPanes(); });
+  }
+
+  calculateSerializedPanes() {
+    setTimeout(() => { this.serializedPanes = this.panes.map(p => p.id).join(', '); }, 0);
+  }
+}
+// #enddocregion
diff --git a/packages/examples/core/di/ts/viewChildren/view_children_howto.ts b/packages/examples/core/di/ts/viewChildren/view_children_howto.ts
new file mode 100644
index 000000000000..7675788391c0
--- /dev/null
+++ b/packages/examples/core/di/ts/viewChildren/view_children_howto.ts
@@ -0,0 +1,25 @@
+/**
+ * @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
+ */
+
+// #docregion HowTo
+import {AfterViewInit, Component, Directive, QueryList, ViewChildren} from '@angular/core';
+
+@Directive({selector: 'child-directive'})
+class ChildDirective {
+}
+
+@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
+class SomeCmp implements AfterViewInit {
+  // TODO(issue/24571): remove '!'.
+  @ViewChildren(ChildDirective) viewChildren !: QueryList<ChildDirective>;
+
+  ngAfterViewInit() {
+    // viewChildren is set
+  }
+}
+// #enddocregion
\ No newline at end of file
diff --git a/packages/examples/core/testability/ts/whenStable/e2e_test/testability_example_spec.ts b/packages/examples/core/testability/ts/whenStable/e2e_test/testability_example_spec.ts
new file mode 100644
index 000000000000..544914552bd5
--- /dev/null
+++ b/packages/examples/core/testability/ts/whenStable/e2e_test/testability_example_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 {browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+
+describe('testability example', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  describe('using task tracking', () => {
+    const URL = '/core/testability/ts/whenStable/';
+
+    it('times out with a list of tasks', done => {
+      browser.get(URL);
+      browser.ignoreSynchronization = true;
+
+      // Script that runs in the browser and calls whenStable with a timeout.
+      let waitWithResultScript = function(done: any) {
+        let rootEl = document.querySelector('example-app');
+        let testability = (window as any).getAngularTestability(rootEl);
+        testability.whenStable((didWork: boolean, tasks: any) => { done(tasks); }, 1000);
+      };
+
+      element(by.css('.start-button')).click();
+
+      browser.driver.executeAsyncScript(waitWithResultScript).then((result: any[]) => {
+        let pendingTask = result[0];
+        expect(pendingTask.data.delay).toEqual(5000);
+        expect(pendingTask.source).toEqual('setTimeout');
+        expect(element(by.css('.status')).getText()).not.toContain('done');
+        done();
+      });
+    });
+
+    afterAll(() => { browser.ignoreSynchronization = false; });
+  });
+});
diff --git a/packages/examples/core/testability/ts/whenStable/module.ts b/packages/examples/core/testability/ts/whenStable/module.ts
new file mode 100644
index 000000000000..a8f49caec736
--- /dev/null
+++ b/packages/examples/core/testability/ts/whenStable/module.ts
@@ -0,0 +1,8 @@
+/**
+ * @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 {AppModule} from './testability_example';
diff --git a/packages/examples/core/testability/ts/whenStable/testability_example.ts b/packages/examples/core/testability/ts/whenStable/testability_example.ts
new file mode 100644
index 000000000000..d2df32fdcadd
--- /dev/null
+++ b/packages/examples/core/testability/ts/whenStable/testability_example.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 {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <button class="start-button" (click)="start()">Start long-running task</button>
+    <div class="status">Status: {{status}}</div>
+  `
+})
+export class StableTestCmp {
+  status = 'none';
+  start() {
+    this.status = 'running';
+    setTimeout(() => { this.status = 'done'; }, 5000);
+  }
+}
+
+@NgModule({imports: [BrowserModule], declarations: [StableTestCmp], bootstrap: [StableTestCmp]})
+export class AppModule {
+}
diff --git a/packages/examples/core/testing/ts/fake_async.ts b/packages/examples/core/testing/ts/fake_async.ts
new file mode 100644
index 000000000000..10e9ca2f3323
--- /dev/null
+++ b/packages/examples/core/testing/ts/fake_async.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 {discardPeriodicTasks, fakeAsync, tick} from '@angular/core/testing';
+
+
+// #docregion basic
+describe('this test', () => {
+  it('looks async but is synchronous', <any>fakeAsync((): void => {
+       let flag = false;
+       setTimeout(() => { flag = true; }, 100);
+       expect(flag).toBe(false);
+       tick(50);
+       expect(flag).toBe(false);
+       tick(50);
+       expect(flag).toBe(true);
+     }));
+});
+// #enddocregion
+
+// #docregion pending
+describe('this test', () => {
+  it('aborts a periodic timer', <any>fakeAsync((): void => {
+       // This timer is scheduled but doesn't need to complete for the
+       // test to pass (maybe it's a timeout for some operation).
+       // Leaving it will cause the test to fail...
+       setInterval(() => {}, 100);
+
+       // Unless we clean it up first.
+       discardPeriodicTasks();
+     }));
+});
+// #enddocregion
diff --git a/packages/examples/core/ts/.gitkeep b/packages/examples/core/ts/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/examples/core/ts/bootstrap/bootstrap.ts b/packages/examples/core/ts/bootstrap/bootstrap.ts
new file mode 100644
index 000000000000..26d3c81994b4
--- /dev/null
+++ b/packages/examples/core/ts/bootstrap/bootstrap.ts
@@ -0,0 +1,27 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+// #docregion bootstrap
+@Component({selector: 'my-app', template: 'Hello {{ name }}!'})
+class MyApp {
+  name: string = 'World';
+}
+
+@NgModule({imports: [BrowserModule], bootstrap: [MyApp]})
+class AppModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
+}
+
+// #enddocregion
diff --git a/packages/examples/core/ts/change_detect/change-detection.ts b/packages/examples/core/ts/change_detect/change-detection.ts
new file mode 100644
index 000000000000..8124ab43deed
--- /dev/null
+++ b/packages/examples/core/ts/change_detect/change-detection.ts
@@ -0,0 +1,96 @@
+/**
+ * @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
+ */
+/* tslint:disable:no-console  */
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive} from '@angular/core';
+
+
+// #docregion mark-for-check
+@Component({
+  selector: 'my-app',
+  template: `Number of ticks: {{numberOfTicks}}`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+class AppComponent {
+  numberOfTicks = 0;
+
+  constructor(private ref: ChangeDetectorRef) {
+    setInterval(() => {
+      this.numberOfTicks++;
+      // require view to be updated
+      this.ref.markForCheck();
+    }, 1000);
+  }
+}
+// #enddocregion mark-for-check
+
+// #docregion detach
+class DataListProvider {
+  // in a real application the returned data will be different every time
+  get data() { return [1, 2, 3, 4, 5]; }
+}
+
+@Component({
+  selector: 'giant-list',
+  template: `
+      <li *ngFor="let d of dataProvider.data">Data {{d}}</li>
+    `,
+})
+class GiantList {
+  constructor(private ref: ChangeDetectorRef, private dataProvider: DataListProvider) {
+    ref.detach();
+    setInterval(() => { this.ref.detectChanges(); }, 5000);
+  }
+}
+
+@Component({
+  selector: 'app',
+  providers: [DataListProvider],
+  template: `
+      <giant-list><giant-list>
+    `,
+})
+class App {
+}
+// #enddocregion detach
+
+// #docregion reattach
+class DataProvider {
+  data = 1;
+  constructor() {
+    setInterval(() => { this.data = 2; }, 500);
+  }
+}
+
+
+@Component({selector: 'live-data', inputs: ['live'], template: 'Data: {{dataProvider.data}}'})
+class LiveData {
+  constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {}
+
+  set live(value: boolean) {
+    if (value) {
+      this.ref.reattach();
+    } else {
+      this.ref.detach();
+    }
+  }
+}
+
+@Component({
+  selector: 'app',
+  providers: [DataProvider],
+  template: `
+       Live Update: <input type="checkbox" [(ngModel)]="live">
+       <live-data [live]="live"><live-data>
+     `,
+})
+
+class App1 {
+  live = true;
+}
+// #enddocregion reattach
diff --git a/packages/examples/core/ts/metadata/directives.ts b/packages/examples/core/ts/metadata/directives.ts
new file mode 100644
index 000000000000..d1fa0b28aad8
--- /dev/null
+++ b/packages/examples/core/ts/metadata/directives.ts
@@ -0,0 +1,66 @@
+/**
+ * @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
+ */
+/* tslint:disable:no-console  */
+import {Component, Directive, EventEmitter} from '@angular/core';
+
+// #docregion component-input
+@Component({
+  selector: 'app-bank-account',
+  inputs: ['bankName', 'id: account-id'],
+  template: `
+    Bank Name: {{ bankName }}
+    Account Id: {{ id }}
+  `
+})
+export class BankAccountComponent {
+  bankName: string|null = null;
+  id: string|null = null;
+
+  // this property is not bound, and won't be automatically updated by Angular
+  normalizedBankName: string|null = null;
+}
+
+@Component({
+  selector: 'app-my-input',
+  template: `
+    <app-bank-account
+      bankName="RBC"
+      account-id="4747">
+    </app-bank-account>
+  `
+})
+export class MyInputComponent {
+}
+// #enddocregion component-input
+
+// #docregion component-output-interval
+@Directive({selector: 'app-interval-dir', outputs: ['everySecond', 'fiveSecs: everyFiveSeconds']})
+export class IntervalDirComponent {
+  everySecond = new EventEmitter<string>();
+  fiveSecs = new EventEmitter<string>();
+
+  constructor() {
+    setInterval(() => this.everySecond.emit('event'), 1000);
+    setInterval(() => this.fiveSecs.emit('event'), 5000);
+  }
+}
+
+@Component({
+  selector: 'app-my-output',
+  template: `
+    <app-interval-dir
+      (everySecond)="onEverySecond()"
+      (everyFiveSeconds)="onEveryFiveSeconds()">
+    </app-interval-dir>
+  `
+})
+export class MyOutputComponent {
+  onEverySecond() { console.log('second'); }
+  onEveryFiveSeconds() { console.log('five seconds'); }
+}
+// #enddocregion component-output-interval
\ No newline at end of file
diff --git a/packages/examples/core/ts/metadata/encapsulation.ts b/packages/examples/core/ts/metadata/encapsulation.ts
new file mode 100644
index 000000000000..04ac6928cced
--- /dev/null
+++ b/packages/examples/core/ts/metadata/encapsulation.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 {Component, ViewEncapsulation} from '@angular/core';
+
+// #docregion longform
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>Hello World!</h1>
+    <span class="red">Shadow DOM Rocks!</span>
+  `,
+  styles: [`
+    :host {
+      display: block;
+      border: 1px solid black;
+    }
+    h1 {
+      color: blue;
+    }
+    .red {
+      background-color: red;
+    }
+
+  `],
+  encapsulation: ViewEncapsulation.ShadowDom
+})
+class MyApp {
+}
+// #enddocregion
diff --git a/packages/examples/core/ts/metadata/lifecycle_hooks_spec.ts b/packages/examples/core/ts/metadata/lifecycle_hooks_spec.ts
new file mode 100644
index 000000000000..a4a0d76b5963
--- /dev/null
+++ b/packages/examples/core/ts/metadata/lifecycle_hooks_spec.ts
@@ -0,0 +1,151 @@
+/**
+ * @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 {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, DoCheck, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, Type} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+
+(function() {
+  describe('lifecycle hooks examples', () => {
+    it('should work with ngOnInit', () => {
+      // #docregion OnInit
+      @Component({selector: 'my-cmp', template: `...`})
+      class MyComponent implements OnInit {
+        ngOnInit() {
+          // ...
+        }
+      }
+      // #enddocregion
+
+      expect(createAndLogComponent(MyComponent)).toEqual([['ngOnInit', []]]);
+    });
+
+    it('should work with ngDoCheck', () => {
+      // #docregion DoCheck
+      @Component({selector: 'my-cmp', template: `...`})
+      class MyComponent implements DoCheck {
+        ngDoCheck() {
+          // ...
+        }
+      }
+      // #enddocregion
+
+      expect(createAndLogComponent(MyComponent)).toEqual([['ngDoCheck', []]]);
+    });
+
+    it('should work with ngAfterContentChecked', () => {
+      // #docregion AfterContentChecked
+      @Component({selector: 'my-cmp', template: `...`})
+      class MyComponent implements AfterContentChecked {
+        ngAfterContentChecked() {
+          // ...
+        }
+      }
+      // #enddocregion
+
+      expect(createAndLogComponent(MyComponent)).toEqual([['ngAfterContentChecked', []]]);
+    });
+
+    it('should work with ngAfterContentInit', () => {
+      // #docregion AfterContentInit
+      @Component({selector: 'my-cmp', template: `...`})
+      class MyComponent implements AfterContentInit {
+        ngAfterContentInit() {
+          // ...
+        }
+      }
+      // #enddocregion
+
+      expect(createAndLogComponent(MyComponent)).toEqual([['ngAfterContentInit', []]]);
+    });
+
+    it('should work with ngAfterViewChecked', () => {
+      // #docregion AfterViewChecked
+      @Component({selector: 'my-cmp', template: `...`})
+      class MyComponent implements AfterViewChecked {
+        ngAfterViewChecked() {
+          // ...
+        }
+      }
+      // #enddocregion
+
+      expect(createAndLogComponent(MyComponent)).toEqual([['ngAfterViewChecked', []]]);
+    });
+
+    it('should work with ngAfterViewInit', () => {
+      // #docregion AfterViewInit
+      @Component({selector: 'my-cmp', template: `...`})
+      class MyComponent implements AfterViewInit {
+        ngAfterViewInit() {
+          // ...
+        }
+      }
+      // #enddocregion
+
+      expect(createAndLogComponent(MyComponent)).toEqual([['ngAfterViewInit', []]]);
+    });
+
+    it('should work with ngOnDestroy', () => {
+      // #docregion OnDestroy
+      @Component({selector: 'my-cmp', template: `...`})
+      class MyComponent implements OnDestroy {
+        ngOnDestroy() {
+          // ...
+        }
+      }
+      // #enddocregion
+
+      expect(createAndLogComponent(MyComponent)).toEqual([['ngOnDestroy', []]]);
+    });
+
+    it('should work with ngOnChanges', () => {
+      // #docregion OnChanges
+      @Component({selector: 'my-cmp', template: `...`})
+      class MyComponent implements OnChanges {
+        // TODO(issue/24571): remove '!'.
+        @Input()
+        prop !: number;
+
+        ngOnChanges(changes: SimpleChanges) {
+          // changes.prop contains the old and the new value...
+        }
+      }
+      // #enddocregion
+
+      const log = createAndLogComponent(MyComponent, ['prop']);
+      expect(log.length).toBe(1);
+      expect(log[0][0]).toBe('ngOnChanges');
+      const changes: SimpleChanges = log[0][1][0];
+      expect(changes['prop'].currentValue).toBe(true);
+    });
+  });
+
+  function createAndLogComponent(clazz: Type<any>, inputs: string[] = []): any[] {
+    const log: any[] = [];
+    createLoggingSpiesFromProto(clazz, log);
+
+    const inputBindings = inputs.map(input => `[${input}] = true`).join(' ');
+
+    @Component({template: `<my-cmp ${inputBindings}></my-cmp>`})
+    class ParentComponent {
+    }
+
+
+    const fixture = TestBed.configureTestingModule({declarations: [ParentComponent, clazz]})
+                        .createComponent(ParentComponent);
+    fixture.detectChanges();
+    fixture.destroy();
+    return log;
+  }
+
+  function createLoggingSpiesFromProto(clazz: Type<any>, log: any[]) {
+    const proto = clazz.prototype;
+    Object.keys(proto).forEach((method) => {
+      proto[method] = (...args: any[]) => { log.push([method, args]); };
+    });
+  }
+})();
diff --git a/packages/examples/core/ts/metadata/metadata.ts b/packages/examples/core/ts/metadata/metadata.ts
new file mode 100644
index 000000000000..179436741e4a
--- /dev/null
+++ b/packages/examples/core/ts/metadata/metadata.ts
@@ -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
+ */
+
+import {Attribute, Component, Directive, Pipe} from '@angular/core';
+
+class CustomDirective {}
+
+// #docregion component
+@Component({selector: 'greet', template: 'Hello {{name}}!'})
+class Greet {
+  name: string = 'World';
+}
+// #enddocregion
+
+// #docregion attributeFactory
+@Component({selector: 'page', template: 'Title: {{title}}'})
+class Page {
+  title: string;
+  constructor(@Attribute('title') title: string) { this.title = title; }
+}
+// #enddocregion
+
+// #docregion attributeMetadata
+@Directive({selector: 'input'})
+class InputAttrDirective {
+  constructor(@Attribute('type') type: string) {
+    // type would be 'text' in this example
+  }
+}
+// #enddocregion
+
+// #docregion directive
+@Directive({selector: 'input'})
+class InputDirective {
+  constructor() {
+    // Add some logic.
+  }
+}
+// #enddocregion
+
+// #docregion pipe
+@Pipe({name: 'lowercase'})
+class Lowercase {
+  transform(v: string, args: any[]) { return v.toLowerCase(); }
+}
+// #enddocregion
diff --git a/packages/examples/core/ts/platform/platform.ts b/packages/examples/core/ts/platform/platform.ts
new file mode 100644
index 000000000000..f66891fe75ff
--- /dev/null
+++ b/packages/examples/core/ts/platform/platform.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 {Component, createPlatformFactory} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+// #docregion longform
+@Component({selector: 'my-app', template: 'Hello World'})
+class MyApp {
+}
+
+const myPlatformFactory = createPlatformFactory(platformBrowserDynamic, 'myPlatform');
+myPlatformFactory().bootstrapModule(MyApp);
+// #enddocregion
diff --git a/packages/examples/core/ts/prod_mode/my_component.ts b/packages/examples/core/ts/prod_mode/my_component.ts
new file mode 100644
index 000000000000..392d1d45f59f
--- /dev/null
+++ b/packages/examples/core/ts/prod_mode/my_component.ts
@@ -0,0 +1,13 @@
+/**
+ * @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';
+
+@Component({selector: 'my-component', template: '<h1>My Component</h1>'})
+export class MyComponent {
+}
diff --git a/packages/examples/core/ts/prod_mode/prod_mode_example.ts b/packages/examples/core/ts/prod_mode/prod_mode_example.ts
new file mode 100644
index 000000000000..4dcb7a55e2c0
--- /dev/null
+++ b/packages/examples/core/ts/prod_mode/prod_mode_example.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
+ */
+
+// #docregion enableProdMode
+import {NgModule, enableProdMode} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {MyComponent} from './my_component';
+
+enableProdMode();
+@NgModule({imports: [BrowserModule], bootstrap: [MyComponent]})
+class AppModule {
+}
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion
diff --git a/packages/examples/forms/ts/formBuilder/e2e_test/form_builder_spec.ts b/packages/examples/forms/ts/formBuilder/e2e_test/form_builder_spec.ts
new file mode 100644
index 000000000000..55d4a43a5566
--- /dev/null
+++ b/packages/examples/forms/ts/formBuilder/e2e_test/form_builder_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
+ */
+
+import {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('formBuilder example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+  let paragraphs: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/formBuilder/index.html');
+    inputs = element.all(by.css('input'));
+    paragraphs = element.all(by.css('p'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('value')).toEqual('Nancy');
+    expect(inputs.get(1).getAttribute('value')).toEqual('Drew');
+  });
+
+  it('should update the validation status', () => {
+    expect(paragraphs.get(1).getText()).toEqual('Validation status: VALID');
+
+    inputs.get(0).click();
+    inputs.get(0).clear();
+    inputs.get(0).sendKeys('a');
+    expect(paragraphs.get(1).getText()).toEqual('Validation status: INVALID');
+  });
+
+});
diff --git a/packages/examples/forms/ts/formBuilder/form_builder_example.ts b/packages/examples/forms/ts/formBuilder/form_builder_example.ts
new file mode 100644
index 000000000000..e6fbd9c3eb6b
--- /dev/null
+++ b/packages/examples/forms/ts/formBuilder/form_builder_example.ts
@@ -0,0 +1,59 @@
+/**
+ * @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
+ */
+
+// #docregion Component, disabled-control
+import {Component, Inject} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+// #enddocregion disabled-control
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form">
+      <div formGroupName="name">
+        <input formControlName="first" placeholder="First">
+        <input formControlName="last" placeholder="Last">
+      </div>
+      <input formControlName="email" placeholder="Email">
+      <button>Submit</button>
+    </form>
+    
+    <p>Value: {{ form.value | json }}</p>
+    <p>Validation status: {{ form.status }}</p>
+  `
+})
+export class FormBuilderComp {
+  form: FormGroup;
+
+  constructor(@Inject(FormBuilder) fb: FormBuilder) {
+    this.form = fb.group({
+      name: fb.group({
+        first: ['Nancy', Validators.minLength(2)],
+        last: 'Drew',
+      }),
+      email: '',
+    });
+  }
+}
+// #enddocregion
+
+// #docregion disabled-control
+@Component({
+  selector: 'app-disabled-form-control',
+  template: `
+    <input [formControl]="control" placeholder="First">
+  `
+})
+export class DisabledFormControlComponent {
+  control: FormControl;
+
+  constructor(private fb: FormBuilder) {
+    this.control = fb.control({value: 'my val', disabled: true});
+  }
+}
+// #enddocregion disabled-control
\ No newline at end of file
diff --git a/packages/examples/forms/ts/formBuilder/module.ts b/packages/examples/forms/ts/formBuilder/module.ts
new file mode 100644
index 000000000000..d34292d1d335
--- /dev/null
+++ b/packages/examples/forms/ts/formBuilder/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {FormBuilderComp} from './form_builder_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [FormBuilderComp],
+  bootstrap: [FormBuilderComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/nestedFormArray/e2e_test/nested_form_array_spec.ts b/packages/examples/forms/ts/nestedFormArray/e2e_test/nested_form_array_spec.ts
new file mode 100644
index 000000000000..e594b2729070
--- /dev/null
+++ b/packages/examples/forms/ts/nestedFormArray/e2e_test/nested_form_array_spec.ts
@@ -0,0 +1,43 @@
+/**
+ * @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 {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('nestedFormArray example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+  let buttons: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/nestedFormArray/index.html');
+    inputs = element.all(by.css('input'));
+    buttons = element.all(by.css('button'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('value')).toEqual('SF');
+    expect(inputs.get(1).getAttribute('value')).toEqual('NY');
+  });
+
+  it('should add inputs programmatically', () => {
+    expect(inputs.count()).toBe(2);
+
+    buttons.get(1).click();
+    inputs = element.all(by.css('input'));
+
+    expect(inputs.count()).toBe(3);
+  });
+
+  it('should set the value programmatically', () => {
+    buttons.get(2).click();
+    expect(inputs.get(0).getAttribute('value')).toEqual('LA');
+    expect(inputs.get(1).getAttribute('value')).toEqual('MTV');
+  });
+
+});
diff --git a/packages/examples/forms/ts/nestedFormArray/module.ts b/packages/examples/forms/ts/nestedFormArray/module.ts
new file mode 100644
index 000000000000..eb2478a6e4a3
--- /dev/null
+++ b/packages/examples/forms/ts/nestedFormArray/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {NestedFormArray} from './nested_form_array_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [NestedFormArray],
+  bootstrap: [NestedFormArray]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/nestedFormArray/nested_form_array_example.ts b/packages/examples/forms/ts/nestedFormArray/nested_form_array_example.ts
new file mode 100644
index 000000000000..1554c7ef1783
--- /dev/null
+++ b/packages/examples/forms/ts/nestedFormArray/nested_form_array_example.ts
@@ -0,0 +1,49 @@
+/**
+ * @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
+ */
+
+/* tslint:disable:no-console  */
+// #docregion Component
+import {Component} from '@angular/core';
+import {FormArray, FormControl, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <div formArrayName="cities">
+        <div *ngFor="let city of cities.controls; index as i">
+          <input [formControlName]="i" placeholder="City">
+        </div>
+      </div>
+      <button>Submit</button>
+    </form>
+    
+    <button (click)="addCity()">Add City</button>
+    <button (click)="setPreset()">Set preset</button>
+  `,
+})
+export class NestedFormArray {
+  form = new FormGroup({
+    cities: new FormArray([
+      new FormControl('SF'),
+      new FormControl('NY'),
+    ]),
+  });
+
+  get cities(): FormArray { return this.form.get('cities') as FormArray; }
+
+  addCity() { this.cities.push(new FormControl()); }
+
+  onSubmit() {
+    console.log(this.cities.value);  // ['SF', 'NY']
+    console.log(this.form.value);    // { cities: ['SF', 'NY'] }
+  }
+
+  setPreset() { this.cities.patchValue(['LA', 'MTV']); }
+}
+// #enddocregion
diff --git a/packages/examples/forms/ts/nestedFormGroup/e2e_test/nested_form_group_spec.ts b/packages/examples/forms/ts/nestedFormGroup/e2e_test/nested_form_group_spec.ts
new file mode 100644
index 000000000000..6de78dfe0968
--- /dev/null
+++ b/packages/examples/forms/ts/nestedFormGroup/e2e_test/nested_form_group_spec.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
+ */
+
+import {ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('nestedFormGroup example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let firstInput: ElementFinder;
+  let lastInput: ElementFinder;
+  let button: ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/nestedFormGroup/index.html');
+    firstInput = element(by.css('[formControlName="first"]'));
+    lastInput = element(by.css('[formControlName="last"]'));
+    button = element(by.css('button:not([type="submit"])'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(firstInput.getAttribute('value')).toEqual('Nancy');
+    expect(lastInput.getAttribute('value')).toEqual('Drew');
+  });
+
+  it('should show the error when name is invalid', () => {
+    firstInput.click();
+    firstInput.clear();
+    firstInput.sendKeys('a');
+
+    expect(element(by.css('p')).getText()).toEqual('Name is invalid.');
+  });
+
+  it('should set the value programmatically', () => {
+    button.click();
+    expect(firstInput.getAttribute('value')).toEqual('Bess');
+    expect(lastInput.getAttribute('value')).toEqual('Marvin');
+  });
+
+});
diff --git a/packages/examples/forms/ts/nestedFormGroup/module.ts b/packages/examples/forms/ts/nestedFormGroup/module.ts
new file mode 100644
index 000000000000..5773d5281f2c
--- /dev/null
+++ b/packages/examples/forms/ts/nestedFormGroup/module.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
+  */
+
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {NestedFormGroupComp} from './nested_form_group_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [NestedFormGroupComp],
+  bootstrap: [NestedFormGroupComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/nestedFormGroup/nested_form_group_example.ts b/packages/examples/forms/ts/nestedFormGroup/nested_form_group_example.ts
new file mode 100644
index 000000000000..38c61535b871
--- /dev/null
+++ b/packages/examples/forms/ts/nestedFormGroup/nested_form_group_example.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
+ */
+
+/* tslint:disable:no-console  */
+// #docregion Component
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <p *ngIf="name.invalid">Name is invalid.</p>
+
+      <div formGroupName="name">
+        <input formControlName="first" placeholder="First name">
+        <input formControlName="last" placeholder="Last name">
+      </div>
+      <input formControlName="email" placeholder="Email">
+      <button type="submit">Submit</button>
+    </form>
+
+    <button (click)="setPreset()">Set preset</button>
+`,
+})
+export class NestedFormGroupComp {
+  form = new FormGroup({
+    name: new FormGroup({
+      first: new FormControl('Nancy', Validators.minLength(2)),
+      last: new FormControl('Drew', Validators.required)
+    }),
+    email: new FormControl()
+  });
+
+  get first(): any { return this.form.get('name.first'); }
+
+  get name(): any { return this.form.get('name'); }
+
+  onSubmit() {
+    console.log(this.first.value);  // 'Nancy'
+    console.log(this.name.value);   // {first: 'Nancy', last: 'Drew'}
+    console.log(this.form.value);   // {name: {first: 'Nancy', last: 'Drew'}, email: ''}
+    console.log(this.form.status);  // VALID
+  }
+
+  setPreset() { this.name.setValue({first: 'Bess', last: 'Marvin'}); }
+}
+// #enddocregion
diff --git a/packages/examples/forms/ts/ngModelGroup/e2e_test/ng_model_group_spec.ts b/packages/examples/forms/ts/ngModelGroup/e2e_test/ng_model_group_spec.ts
new file mode 100644
index 000000000000..176a4eb8aec4
--- /dev/null
+++ b/packages/examples/forms/ts/ngModelGroup/e2e_test/ng_model_group_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 {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('ngModelGroup example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+  let buttons: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/ngModelGroup/index.html');
+    inputs = element.all(by.css('input'));
+    buttons = element.all(by.css('button'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('value')).toEqual('Nancy');
+    expect(inputs.get(1).getAttribute('value')).toEqual('Drew');
+  });
+
+  it('should show the error when name is invalid', () => {
+    inputs.get(0).click();
+    inputs.get(0).clear();
+    inputs.get(0).sendKeys('a');
+
+    expect(element(by.css('p')).getText()).toEqual('Name is invalid.');
+  });
+
+  it('should set the value when changing the domain model', () => {
+    buttons.get(1).click();
+    expect(inputs.get(0).getAttribute('value')).toEqual('Bess');
+    expect(inputs.get(1).getAttribute('value')).toEqual('Marvin');
+  });
+
+});
diff --git a/packages/examples/forms/ts/ngModelGroup/module.ts b/packages/examples/forms/ts/ngModelGroup/module.ts
new file mode 100644
index 000000000000..ce06883c6736
--- /dev/null
+++ b/packages/examples/forms/ts/ngModelGroup/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModelGroupComp} from './ng_model_group_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [NgModelGroupComp],
+  bootstrap: [NgModelGroupComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/ngModelGroup/ng_model_group_example.ts b/packages/examples/forms/ts/ngModelGroup/ng_model_group_example.ts
new file mode 100644
index 000000000000..fe794843f153
--- /dev/null
+++ b/packages/examples/forms/ts/ngModelGroup/ng_model_group_example.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
+ */
+
+/* tslint:disable:no-console  */
+// #docregion Component
+import {Component} from '@angular/core';
+import {NgForm} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
+      <p *ngIf="nameCtrl.invalid">Name is invalid.</p>
+    
+      <div ngModelGroup="name" #nameCtrl="ngModelGroup">
+        <input name="first" [ngModel]="name.first" minlength="2">
+        <input name="last" [ngModel]="name.last" required>
+      </div>
+      
+      <input name="email" ngModel> 
+      <button>Submit</button>
+    </form>
+    
+    <button (click)="setValue()">Set value</button>
+  `,
+})
+export class NgModelGroupComp {
+  name = {first: 'Nancy', last: 'Drew'};
+
+  onSubmit(f: NgForm) {
+    console.log(f.value);  // {name: {first: 'Nancy', last: 'Drew'}, email: ''}
+    console.log(f.valid);  // true
+  }
+
+  setValue() { this.name = {first: 'Bess', last: 'Marvin'}; }
+}
+// #enddocregion
diff --git a/packages/examples/forms/ts/radioButtons/e2e_test/radio_button_spec.ts b/packages/examples/forms/ts/radioButtons/e2e_test/radio_button_spec.ts
new file mode 100644
index 000000000000..04b0ddd715ef
--- /dev/null
+++ b/packages/examples/forms/ts/radioButtons/e2e_test/radio_button_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 {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('radioButtons example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+  let paragraphs: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/radioButtons/index.html');
+    inputs = element.all(by.css('input'));
+    paragraphs = element.all(by.css('p'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(1).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(paragraphs.get(0).getText()).toEqual('Form value: { "food": "lamb" }');
+    expect(paragraphs.get(1).getText()).toEqual('myFood value: lamb');
+  });
+
+  it('update model and other buttons as the UI value changes', () => {
+    inputs.get(0).click();
+
+    expect(inputs.get(0).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(1).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(paragraphs.get(0).getText()).toEqual('Form value: { "food": "beef" }');
+    expect(paragraphs.get(1).getText()).toEqual('myFood value: beef');
+  });
+});
diff --git a/packages/examples/forms/ts/radioButtons/module.ts b/packages/examples/forms/ts/radioButtons/module.ts
new file mode 100644
index 000000000000..6a8151e88e8b
--- /dev/null
+++ b/packages/examples/forms/ts/radioButtons/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {RadioButtonComp} from './radio_button_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [RadioButtonComp],
+  bootstrap: [RadioButtonComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/radioButtons/radio_button_example.ts b/packages/examples/forms/ts/radioButtons/radio_button_example.ts
new file mode 100644
index 000000000000..d5a331b3a1f8
--- /dev/null
+++ b/packages/examples/forms/ts/radioButtons/radio_button_example.ts
@@ -0,0 +1,28 @@
+/**
+ * @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
+ */
+
+// #docregion TemplateDriven
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form #f="ngForm">
+      <input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
+      <input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
+      <input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
+    </form>
+    
+    <p>Form value: {{ f.value | json }}</p>  <!-- {food: 'lamb' } -->
+    <p>myFood value: {{ myFood }}</p>  <!-- 'lamb' -->
+  `,
+})
+export class RadioButtonComp {
+  myFood = 'lamb';
+}
+// #enddocregion
diff --git a/packages/examples/forms/ts/reactiveRadioButtons/e2e_test/reactive_radio_button_spec.ts b/packages/examples/forms/ts/reactiveRadioButtons/e2e_test/reactive_radio_button_spec.ts
new file mode 100644
index 000000000000..d4286d5199db
--- /dev/null
+++ b/packages/examples/forms/ts/reactiveRadioButtons/e2e_test/reactive_radio_button_spec.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('radioButtons example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/reactiveRadioButtons/index.html');
+    inputs = element.all(by.css('input'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(1).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(element(by.css('p')).getText()).toEqual('Form value: { "food": "lamb" }');
+  });
+
+  it('update model and other buttons as the UI value changes', () => {
+    inputs.get(0).click();
+
+    expect(inputs.get(0).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(1).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(element(by.css('p')).getText()).toEqual('Form value: { "food": "beef" }');
+  });
+});
diff --git a/packages/examples/forms/ts/reactiveRadioButtons/module.ts b/packages/examples/forms/ts/reactiveRadioButtons/module.ts
new file mode 100644
index 000000000000..17f67b430b20
--- /dev/null
+++ b/packages/examples/forms/ts/reactiveRadioButtons/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {ReactiveRadioButtonComp} from './reactive_radio_button_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [ReactiveRadioButtonComp],
+  bootstrap: [ReactiveRadioButtonComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts b/packages/examples/forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts
new file mode 100644
index 000000000000..f227acf303b4
--- /dev/null
+++ b/packages/examples/forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts
@@ -0,0 +1,30 @@
+/**
+ * @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
+ */
+
+// #docregion Reactive
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form">
+      <input type="radio" formControlName="food" value="beef" > Beef
+      <input type="radio" formControlName="food" value="lamb"> Lamb
+      <input type="radio" formControlName="food" value="fish"> Fish
+    </form>
+    
+    <p>Form value: {{ form.value | json }}</p>  <!-- {food: 'lamb' } -->
+  `,
+})
+export class ReactiveRadioButtonComp {
+  form = new FormGroup({
+    food: new FormControl('lamb'),
+  });
+}
+// #enddocregion
diff --git a/packages/examples/forms/ts/reactiveSelectControl/e2e_test/reactive_select_control_spec.ts b/packages/examples/forms/ts/reactiveSelectControl/e2e_test/reactive_select_control_spec.ts
new file mode 100644
index 000000000000..5d2b338804d8
--- /dev/null
+++ b/packages/examples/forms/ts/reactiveSelectControl/e2e_test/reactive_select_control_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
+ */
+
+import {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('reactiveSelectControl example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let select: ElementFinder;
+  let options: ElementArrayFinder;
+  let p: ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/reactiveSelectControl/index.html');
+    select = element(by.css('select'));
+    options = element.all(by.css('option'));
+    p = element(by.css('p'));
+  });
+
+  it('should populate the initial selection', () => {
+    expect(select.getAttribute('value')).toEqual('3: Object');
+    expect(options.get(3).getAttribute('selected')).toBe('true');
+  });
+
+  it('should update the model when the value changes in the UI', () => {
+    select.click();
+    options.get(0).click();
+
+    expect(p.getText()).toEqual('Form value: { "state": { "name": "Arizona", "abbrev": "AZ" } }');
+  });
+
+});
diff --git a/packages/examples/forms/ts/reactiveSelectControl/module.ts b/packages/examples/forms/ts/reactiveSelectControl/module.ts
new file mode 100644
index 000000000000..47c53b3fe7e9
--- /dev/null
+++ b/packages/examples/forms/ts/reactiveSelectControl/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {ReactiveSelectComp} from './reactive_select_control_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [ReactiveSelectComp],
+  bootstrap: [ReactiveSelectComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/reactiveSelectControl/reactive_select_control_example.ts b/packages/examples/forms/ts/reactiveSelectControl/reactive_select_control_example.ts
new file mode 100644
index 000000000000..d8a080fa8aa1
--- /dev/null
+++ b/packages/examples/forms/ts/reactiveSelectControl/reactive_select_control_example.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
+ */
+
+// #docregion Component
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form">
+      <select formControlName="state">
+        <option *ngFor="let state of states" [ngValue]="state">
+          {{ state.abbrev }}
+        </option>
+      </select>
+    </form>
+    
+     <p>Form value: {{ form.value | json }}</p> 
+     <!-- {state: {name: 'New York', abbrev: 'NY'} } -->
+  `,
+})
+export class ReactiveSelectComp {
+  states = [
+    {name: 'Arizona', abbrev: 'AZ'},
+    {name: 'California', abbrev: 'CA'},
+    {name: 'Colorado', abbrev: 'CO'},
+    {name: 'New York', abbrev: 'NY'},
+    {name: 'Pennsylvania', abbrev: 'PA'},
+  ];
+
+  form = new FormGroup({
+    state: new FormControl(this.states[3]),
+  });
+}
+// #enddocregion
diff --git a/packages/examples/forms/ts/selectControl/e2e_test/select_control_spec.ts b/packages/examples/forms/ts/selectControl/e2e_test/select_control_spec.ts
new file mode 100644
index 000000000000..f79efa27bbf6
--- /dev/null
+++ b/packages/examples/forms/ts/selectControl/e2e_test/select_control_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 {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('selectControl example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let select: ElementFinder;
+  let options: ElementArrayFinder;
+  let p: ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/selectControl/index.html');
+    select = element(by.css('select'));
+    options = element.all(by.css('option'));
+    p = element(by.css('p'));
+  });
+
+  it('should initially select the placeholder option',
+     () => { expect(options.get(0).getAttribute('selected')).toBe('true'); });
+
+  it('should update the model when the value changes in the UI', () => {
+    select.click();
+    options.get(1).click();
+
+    expect(p.getText()).toEqual('Form value: { "state": { "name": "Arizona", "abbrev": "AZ" } }');
+  });
+
+});
diff --git a/packages/examples/forms/ts/selectControl/module.ts b/packages/examples/forms/ts/selectControl/module.ts
new file mode 100644
index 000000000000..f2adc8633588
--- /dev/null
+++ b/packages/examples/forms/ts/selectControl/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {SelectControlComp} from './select_control_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [SelectControlComp],
+  bootstrap: [SelectControlComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/selectControl/select_control_example.ts b/packages/examples/forms/ts/selectControl/select_control_example.ts
new file mode 100644
index 000000000000..a1527bc973b2
--- /dev/null
+++ b/packages/examples/forms/ts/selectControl/select_control_example.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
+ */
+
+// #docregion Component
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form #f="ngForm">
+      <select name="state" ngModel>
+        <option value="" disabled>Choose a state</option>
+        <option *ngFor="let state of states" [ngValue]="state">
+          {{ state.abbrev }}
+        </option>
+      </select>
+    </form>
+    
+     <p>Form value: {{ f.value | json }}</p>
+     <!-- example value: {state: {name: 'New York', abbrev: 'NY'} } -->
+  `,
+})
+export class SelectControlComp {
+  states = [
+    {name: 'Arizona', abbrev: 'AZ'},
+    {name: 'California', abbrev: 'CA'},
+    {name: 'Colorado', abbrev: 'CO'},
+    {name: 'New York', abbrev: 'NY'},
+    {name: 'Pennsylvania', abbrev: 'PA'},
+  ];
+}
+// #enddocregion
diff --git a/packages/examples/forms/ts/simpleForm/e2e_test/simple_form_spec.ts b/packages/examples/forms/ts/simpleForm/e2e_test/simple_form_spec.ts
new file mode 100644
index 000000000000..6f176ca56ae4
--- /dev/null
+++ b/packages/examples/forms/ts/simpleForm/e2e_test/simple_form_spec.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
+ */
+
+import {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('simpleForm example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+  let paragraphs: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/simpleForm/index.html');
+    inputs = element.all(by.css('input'));
+    paragraphs = element.all(by.css('p'));
+  });
+
+  it('should update the domain model as you type', () => {
+    inputs.get(0).click();
+    inputs.get(0).sendKeys('Nancy');
+
+    inputs.get(1).click();
+    inputs.get(1).sendKeys('Drew');
+
+    expect(paragraphs.get(0).getText()).toEqual('First name value: Nancy');
+    expect(paragraphs.get(2).getText()).toEqual('Form value: { "first": "Nancy", "last": "Drew" }');
+  });
+
+  it('should report the validity correctly', () => {
+    expect(paragraphs.get(1).getText()).toEqual('First name valid: false');
+    expect(paragraphs.get(3).getText()).toEqual('Form valid: false');
+    inputs.get(0).click();
+    inputs.get(0).sendKeys('a');
+
+    expect(paragraphs.get(1).getText()).toEqual('First name valid: true');
+    expect(paragraphs.get(3).getText()).toEqual('Form valid: true');
+  });
+
+});
diff --git a/packages/examples/forms/ts/simpleForm/module.ts b/packages/examples/forms/ts/simpleForm/module.ts
new file mode 100644
index 000000000000..12037114e4e9
--- /dev/null
+++ b/packages/examples/forms/ts/simpleForm/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {SimpleFormComp} from './simple_form_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [SimpleFormComp],
+  bootstrap: [SimpleFormComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/simpleForm/simple_form_example.ts b/packages/examples/forms/ts/simpleForm/simple_form_example.ts
new file mode 100644
index 000000000000..b648cab7ca26
--- /dev/null
+++ b/packages/examples/forms/ts/simpleForm/simple_form_example.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
+ */
+
+/* tslint:disable:no-console  */
+// #docregion Component
+import {Component} from '@angular/core';
+import {NgForm} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form #f="ngForm" (ngSubmit)="onSubmit(f)" 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>
+  `,
+})
+export class SimpleFormComp {
+  onSubmit(f: NgForm) {
+    console.log(f.value);  // { first: '', last: '' }
+    console.log(f.valid);  // false
+  }
+}
+// #enddocregion
diff --git a/packages/examples/forms/ts/simpleFormControl/e2e_test/simple_form_control_spec.ts b/packages/examples/forms/ts/simpleFormControl/e2e_test/simple_form_control_spec.ts
new file mode 100644
index 000000000000..5436952a63a4
--- /dev/null
+++ b/packages/examples/forms/ts/simpleFormControl/e2e_test/simple_form_control_spec.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 {ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('simpleFormControl example', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  describe('index view', () => {
+    let input: ElementFinder;
+    let valueP: ElementFinder;
+    let statusP: ElementFinder;
+
+    beforeEach(() => {
+      browser.get('/forms/ts/simpleFormControl/index.html');
+      input = element(by.css('input'));
+      valueP = element(by.css('p:first-of-type'));
+      statusP = element(by.css('p:last-of-type'));
+    });
+
+    it('should populate the form control value in the DOM', () => {
+      expect(input.getAttribute('value')).toEqual('value');
+      expect(valueP.getText()).toEqual('Value: value');
+    });
+
+    it('should update the value as user types', () => {
+      input.click();
+      input.sendKeys('s!');
+
+      expect(valueP.getText()).toEqual('Value: values!');
+    });
+
+    it('should show the correct validity state', () => {
+      expect(statusP.getText()).toEqual('Validation status: VALID');
+
+      input.click();
+      input.clear();
+      input.sendKeys('a');
+      expect(statusP.getText()).toEqual('Validation status: INVALID');
+    });
+
+    it('should set the value programmatically', () => {
+      element(by.css('button')).click();
+      expect(input.getAttribute('value')).toEqual('new value');
+    });
+
+  });
+});
diff --git a/packages/examples/forms/ts/simpleFormControl/module.ts b/packages/examples/forms/ts/simpleFormControl/module.ts
new file mode 100644
index 000000000000..a16a1f436914
--- /dev/null
+++ b/packages/examples/forms/ts/simpleFormControl/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {SimpleFormControl} from './simple_form_control_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [SimpleFormControl],
+  bootstrap: [SimpleFormControl]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/simpleFormControl/simple_form_control_example.ts b/packages/examples/forms/ts/simpleFormControl/simple_form_control_example.ts
new file mode 100644
index 000000000000..cd799034c7bf
--- /dev/null
+++ b/packages/examples/forms/ts/simpleFormControl/simple_form_control_example.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
+ */
+
+// #docregion Component
+import {Component} from '@angular/core';
+import {FormControl, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+     <input [formControl]="control">
+      
+     <p>Value: {{ control.value }}</p>
+     <p>Validation status: {{ control.status }}</p>
+     
+     <button (click)="setValue()">Set value</button>
+  `,
+})
+export class SimpleFormControl {
+  control: FormControl = new FormControl('value', Validators.minLength(2));
+
+  setValue() { this.control.setValue('new value'); }
+}
+// #enddocregion
diff --git a/packages/examples/forms/ts/simpleFormGroup/e2e_test/simple_form_group_spec.ts b/packages/examples/forms/ts/simpleFormGroup/e2e_test/simple_form_group_spec.ts
new file mode 100644
index 000000000000..5e2b3c8fdfa2
--- /dev/null
+++ b/packages/examples/forms/ts/simpleFormGroup/e2e_test/simple_form_group_spec.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
+ */
+
+import {ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('formControlName example', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  describe('index view', () => {
+    let firstInput: ElementFinder;
+    let lastInput: ElementFinder;
+
+    beforeEach(() => {
+      browser.get('/forms/ts/simpleFormGroup/index.html');
+      firstInput = element(by.css('[formControlName="first"]'));
+      lastInput = element(by.css('[formControlName="last"]'));
+    });
+
+    it('should populate the form control values in the DOM', () => {
+      expect(firstInput.getAttribute('value')).toEqual('Nancy');
+      expect(lastInput.getAttribute('value')).toEqual('Drew');
+    });
+
+    it('should show the error when the form is invalid', () => {
+      firstInput.click();
+      firstInput.clear();
+      firstInput.sendKeys('a');
+
+      expect(element(by.css('div')).getText()).toEqual('Name is too short.');
+    });
+
+    it('should set the value programmatically', () => {
+      element(by.css('button:not([type="submit"])')).click();
+      expect(firstInput.getAttribute('value')).toEqual('Carson');
+      expect(lastInput.getAttribute('value')).toEqual('Drew');
+    });
+
+  });
+});
diff --git a/packages/examples/forms/ts/simpleFormGroup/module.ts b/packages/examples/forms/ts/simpleFormGroup/module.ts
new file mode 100644
index 000000000000..cbafcdd50352
--- /dev/null
+++ b/packages/examples/forms/ts/simpleFormGroup/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {SimpleFormGroup} from './simple_form_group_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [SimpleFormGroup],
+  bootstrap: [SimpleFormGroup]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/simpleFormGroup/simple_form_group_example.ts b/packages/examples/forms/ts/simpleFormGroup/simple_form_group_example.ts
new file mode 100644
index 000000000000..7ca0d21abe4a
--- /dev/null
+++ b/packages/examples/forms/ts/simpleFormGroup/simple_form_group_example.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
+ */
+
+/* tslint:disable:no-console  */
+// #docregion Component
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <div *ngIf="first.invalid"> Name is too short. </div>
+
+      <input formControlName="first" placeholder="First name">
+      <input formControlName="last" placeholder="Last name">
+
+      <button type="submit">Submit</button>
+   </form>
+   <button (click)="setValue()">Set preset value</button>
+  `,
+})
+export class SimpleFormGroup {
+  form = new FormGroup({
+    first: new FormControl('Nancy', Validators.minLength(2)),
+    last: new FormControl('Drew'),
+  });
+
+  get first(): any { return this.form.get('first'); }
+
+  onSubmit(): void {
+    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
+  }
+
+  setValue() { this.form.setValue({first: 'Carson', last: 'Drew'}); }
+}
+
+
+// #enddocregion
diff --git a/packages/examples/forms/ts/simpleNgModel/e2e_test/simple_ng_model_spec.ts b/packages/examples/forms/ts/simpleNgModel/e2e_test/simple_ng_model_spec.ts
new file mode 100644
index 000000000000..a54faabaa25b
--- /dev/null
+++ b/packages/examples/forms/ts/simpleNgModel/e2e_test/simple_ng_model_spec.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
+ */
+
+import {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('simpleNgModel example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let input: ElementFinder;
+  let paragraphs: ElementArrayFinder;
+  let button: ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/simpleNgModel/index.html');
+    input = element(by.css('input'));
+    paragraphs = element.all(by.css('p'));
+    button = element(by.css('button'));
+  });
+
+  it('should update the domain model as you type', () => {
+    input.click();
+    input.sendKeys('Carson');
+
+    expect(paragraphs.get(0).getText()).toEqual('Value: Carson');
+  });
+
+  it('should report the validity correctly', () => {
+    expect(paragraphs.get(1).getText()).toEqual('Valid: false');
+    input.click();
+    input.sendKeys('a');
+
+    expect(paragraphs.get(1).getText()).toEqual('Valid: true');
+  });
+
+  it('should set the value by changing the domain model', () => {
+    button.click();
+    expect(input.getAttribute('value')).toEqual('Nancy');
+  });
+
+});
diff --git a/packages/examples/forms/ts/simpleNgModel/module.ts b/packages/examples/forms/ts/simpleNgModel/module.ts
new file mode 100644
index 000000000000..9f0872c5448c
--- /dev/null
+++ b/packages/examples/forms/ts/simpleNgModel/module.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
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {SimpleNgModelComp} from './simple_ng_model_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [SimpleNgModelComp],
+  bootstrap: [SimpleNgModelComp]
+})
+export class AppModule {
+}
diff --git a/packages/examples/forms/ts/simpleNgModel/simple_ng_model_example.ts b/packages/examples/forms/ts/simpleNgModel/simple_ng_model_example.ts
new file mode 100644
index 000000000000..3b0c068d5446
--- /dev/null
+++ b/packages/examples/forms/ts/simpleNgModel/simple_ng_model_example.ts
@@ -0,0 +1,28 @@
+/**
+ * @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
+ */
+
+// #docregion Component
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <input [(ngModel)]="name" #ctrl="ngModel" required>
+
+    <p>Value: {{ name }}</p>
+    <p>Valid: {{ ctrl.valid }}</p>
+    
+    <button (click)="setValue()">Set value</button>
+  `,
+})
+export class SimpleNgModelComp {
+  name: string = '';
+
+  setValue() { this.name = 'Nancy'; }
+}
+// #enddocregion
diff --git a/packages/examples/http/ts/.gitkeep b/packages/examples/http/ts/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/examples/platform-browser/dom/debug/ts/by/by.ts b/packages/examples/platform-browser/dom/debug/ts/by/by.ts
new file mode 100644
index 000000000000..70283ebda742
--- /dev/null
+++ b/packages/examples/platform-browser/dom/debug/ts/by/by.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 {DebugElement} from '@angular/core';
+import {By} from '@angular/platform-browser';
+
+let debugElement: DebugElement = undefined !;
+class MyDirective {}
+
+// #docregion by_all
+debugElement.query(By.all());
+// #enddocregion
+
+// #docregion by_css
+debugElement.query(By.css('[attribute]'));
+// #enddocregion
+
+// #docregion by_directive
+debugElement.query(By.directive(MyDirective));
+// #enddocregion
diff --git a/packages/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts b/packages/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts
new file mode 100644
index 000000000000..0e47ad0b6f47
--- /dev/null
+++ b/packages/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts
@@ -0,0 +1,23 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+@Component({selector: 'my-component'})
+class MyAppComponent {
+}
+
+// #docregion providers
+@NgModule({imports: [BrowserModule], bootstrap: [MyAppComponent]})
+class AppModule {
+}
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion
diff --git a/packages/examples/test.sh b/packages/examples/test.sh
new file mode 100755
index 000000000000..c8827305a80c
--- /dev/null
+++ b/packages/examples/test.sh
@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+(
+  cd `dirname $0`
+  ./build.sh
+
+  gulp serve-examples &
+  trap "kill $!" EXIT
+
+  (
+    cd ../../
+    NODE_PATH=${NODE_PATH:-}:dist/all
+    $(npm bin)/protractor protractor-examples-e2e.conf.js --bundles=true
+  )
+)
diff --git a/packages/examples/testing/ts/testing.ts b/packages/examples/testing/ts/testing.ts
new file mode 100644
index 000000000000..ac193163a224
--- /dev/null
+++ b/packages/examples/testing/ts/testing.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
+ */
+
+
+let db: any;
+class MyService {}
+class MyMockService implements MyService {}
+
+// #docregion describeIt
+describe('some component', () => {
+  it('does something', () => {
+                           // This is a test.
+                       });
+});
+// #enddocregion
+
+// #docregion fdescribe
+/* tslint:disable-next-line:no-jasmine-focus */
+fdescribe('some component', () => {
+  it('has a test', () => {
+                       // This test will run.
+                   });
+});
+describe('another component', () => {
+  it('also has a test', () => { throw 'This test will not run.'; });
+});
+// #enddocregion
+
+// #docregion xdescribe
+xdescribe(
+    'some component', () => { it('has a test', () => { throw 'This test will not run.'; }); });
+describe('another component', () => {
+  it('also has a test', () => {
+                            // This test will run.
+                        });
+});
+// #enddocregion
+
+// #docregion fit
+describe('some component', () => {
+  /* tslint:disable-next-line:no-jasmine-focus */
+  fit('has a test', () => {
+                        // This test will run.
+                    });
+  it('has another test', () => { throw 'This test will not run.'; });
+});
+// #enddocregion
+
+// #docregion xit
+describe('some component', () => {
+  xit('has a test', () => { throw 'This test will not run.'; });
+  it('has another test', () => {
+                             // This test will run.
+                         });
+});
+// #enddocregion
+
+// #docregion beforeEach
+describe('some component', () => {
+  beforeEach(() => { db.connect(); });
+  it('uses the db', () => {
+                        // Database is connected.
+                    });
+});
+// #enddocregion
+
+// #docregion afterEach
+describe('some component', () => {
+  afterEach((done: Function) => { db.reset().then((_: any) => done()); });
+  it('uses the db', () => {
+                        // This test can leave the database in a dirty state.
+                        // The afterEach will ensure it gets reset.
+                    });
+});
+// #enddocregion
diff --git a/packages/examples/tsconfig-build.json b/packages/examples/tsconfig-build.json
new file mode 100644
index 000000000000..ac40446b1cfa
--- /dev/null
+++ b/packages/examples/tsconfig-build.json
@@ -0,0 +1,23 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "module": "commonjs",
+    "emitDecoratorMetadata": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/*": ["../../dist/packages-dist/*"],
+      "rxjs/*": ["../../node_modules/rxjs/*"]
+    },
+    "outDir": "../../dist/examples",
+    "types": ["angular"]
+  },
+
+  "include": [
+    "../../node_modules/@types/jasminewd2/index.d.ts",
+    "../../tools/types-ext/jasminewd2.d.ts",
+    "../types.d.ts",
+    "**/*.ts"
+  ]
+}
diff --git a/packages/examples/tsconfig.json b/packages/examples/tsconfig.json
new file mode 100644
index 000000000000..aa43ab7164e0
--- /dev/null
+++ b/packages/examples/tsconfig.json
@@ -0,0 +1,19 @@
+// WARNING:
+// This file is used to build the e2e tests only.
+// The rest of the files are included in `/packages/tsconfig.json`.
+{
+  "extends": "../tsconfig.json",
+
+  "compilerOptions": {
+    "types": []
+  },
+
+  "include": [
+    "../../node_modules/@types/jasminewd2/index.d.ts",
+    "../../tools/types-ext/jasminewd2.d.ts",
+    "../types.d.ts",
+    "**/e2e_test/*"
+  ],
+
+  "exclude": []
+}
diff --git a/packages/examples/upgrade/static/ts/full/e2e_test/static_full_spec.ts b/packages/examples/upgrade/static/ts/full/e2e_test/static_full_spec.ts
new file mode 100644
index 000000000000..d9416097404c
--- /dev/null
+++ b/packages/examples/upgrade/static/ts/full/e2e_test/static_full_spec.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 {browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+
+function loadPage() {
+  browser.rootEl = 'example-app';
+  browser.get('/upgrade/static/ts/full/');
+}
+
+describe('upgrade/static (full)', () => {
+  beforeEach(loadPage);
+  afterEach(verifyNoBrowserErrors);
+
+  it('should render the `ng2-heroes` component', () => {
+    expect(element(by.css('h1')).getText()).toEqual('Heroes');
+    expect(element.all(by.css('p')).get(0).getText()).toEqual('There are 3 heroes.');
+  });
+
+  it('should render 3 ng1-hero components', () => {
+    const heroComponents = element.all(by.css('ng1-hero'));
+    expect(heroComponents.count()).toEqual(3);
+  });
+
+  it('should add a new hero when the "Add Hero" button is pressed', () => {
+    const addHeroButton = element.all(by.css('button')).last();
+    expect(addHeroButton.getText()).toEqual('Add Hero');
+    addHeroButton.click();
+    const heroComponents = element.all(by.css('ng1-hero'));
+    expect(heroComponents.last().element(by.css('h2')).getText()).toEqual('Kamala Khan');
+  });
+
+  it('should remove a hero when the "Remove" button is pressed', () => {
+    let firstHero = element.all(by.css('ng1-hero')).get(0);
+    expect(firstHero.element(by.css('h2')).getText()).toEqual('Superman');
+
+    const removeHeroButton = firstHero.element(by.css('button'));
+    expect(removeHeroButton.getText()).toEqual('Remove');
+    removeHeroButton.click();
+
+    const heroComponents = element.all(by.css('ng1-hero'));
+    expect(heroComponents.count()).toEqual(2);
+
+    firstHero = element.all(by.css('ng1-hero')).get(0);
+    expect(firstHero.element(by.css('h2')).getText()).toEqual('Wonder Woman');
+  });
+});
diff --git a/packages/examples/upgrade/static/ts/full/module.ts b/packages/examples/upgrade/static/ts/full/module.ts
new file mode 100644
index 000000000000..1e7c155dbfcc
--- /dev/null
+++ b/packages/examples/upgrade/static/ts/full/module.ts
@@ -0,0 +1,181 @@
+/**
+ * @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
+ */
+// #docplaster
+import {Component, Directive, ElementRef, EventEmitter, Inject, Injectable, Injector, Input, NgModule, Output} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {UpgradeComponent, UpgradeModule, downgradeComponent, downgradeInjectable} from '@angular/upgrade/static';
+
+declare var angular: ng.IAngularStatic;
+
+interface Hero {
+  name: string;
+  description: string;
+}
+
+// #docregion ng1-text-formatter-service
+class TextFormatter {
+  titleCase(value: string) { return value.replace(/((^|\s)[a-z])/g, (_, c) => c.toUpperCase()); }
+}
+
+// #enddocregion
+// #docregion Angular Stuff
+// #docregion ng2-heroes
+// This Angular component will be "downgraded" to be used in AngularJS
+@Component({
+  selector: 'ng2-heroes',
+  // This template uses the upgraded `ng1-hero` component
+  // Note that because its element is compiled by Angular we must use camelCased attribute names
+  template: `<header><ng-content selector="h1"></ng-content></header>
+             <ng-content selector=".extra"></ng-content>
+             <div *ngFor="let hero of heroes">
+               <ng1-hero [hero]="hero" (onRemove)="removeHero.emit(hero)"><strong>Super Hero</strong></ng1-hero>
+             </div>
+             <button (click)="addHero.emit()">Add Hero</button>`,
+})
+class Ng2HeroesComponent {
+  @Input() heroes !: Hero[];
+  @Output() addHero = new EventEmitter();
+  @Output() removeHero = new EventEmitter();
+}
+// #enddocregion
+
+// #docregion ng2-heroes-service
+// This Angular service will be "downgraded" to be used in AngularJS
+@Injectable()
+class HeroesService {
+  heroes: Hero[] = [
+    {name: 'superman', description: 'The man of steel'},
+    {name: 'wonder woman', description: 'Princess of the Amazons'},
+    {name: 'thor', description: 'The hammer-wielding god'}
+  ];
+
+  // #docregion use-ng1-upgraded-service
+  constructor(textFormatter: TextFormatter) {
+    // Change all the hero names to title case, using the "upgraded" AngularJS service
+    this.heroes.forEach((hero: Hero) => hero.name = textFormatter.titleCase(hero.name));
+  }
+  // #enddocregion
+
+  addHero() {
+    this.heroes =
+        this.heroes.concat([{name: 'Kamala Khan', description: 'Epic shape-shifting healer'}]);
+  }
+
+  removeHero(hero: Hero) { this.heroes = this.heroes.filter((item: Hero) => item !== hero); }
+}
+// #enddocregion
+
+// #docregion ng1-hero-wrapper
+// This Angular directive will act as an interface to the "upgraded" AngularJS component
+@Directive({selector: 'ng1-hero'})
+class Ng1HeroComponentWrapper extends UpgradeComponent {
+  // The names of the input and output properties here must match the names of the
+  // `<` and `&` bindings in the AngularJS component that is being wrapped
+  @Input() hero !: Hero;
+  @Output() onRemove !: EventEmitter<void>;
+
+  constructor(elementRef: ElementRef, injector: Injector) {
+    // We must pass the name of the directive as used by AngularJS to the super
+    super('ng1Hero', elementRef, injector);
+  }
+}
+// #enddocregion
+
+// #docregion ng2-module
+// This NgModule represents the Angular pieces of the application
+@NgModule({
+  declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],
+  providers: [
+    HeroesService,
+    // #docregion upgrade-ng1-service
+    // Register an Angular provider whose value is the "upgraded" AngularJS service
+    {provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']}
+    // #enddocregion
+  ],
+  // All components that are to be "downgraded" must be declared as `entryComponents`
+  entryComponents: [Ng2HeroesComponent],
+  // We must import `UpgradeModule` to get access to the AngularJS core services
+  imports: [BrowserModule, UpgradeModule]
+})
+// #docregion bootstrap-ng1
+class Ng2AppModule {
+  // #enddocregion ng2-module
+  constructor(private upgrade: UpgradeModule) {}
+
+  ngDoBootstrap() {
+    // We bootstrap the AngularJS app.
+    this.upgrade.bootstrap(document.body, [ng1AppModule.name]);
+  }
+  // #docregion ng2-module
+}
+// #enddocregion bootstrap-ng1
+// #enddocregion ng2-module
+// #enddocregion
+
+
+// #docregion Angular 1 Stuff
+// #docregion ng1-module
+// This Angular 1 module represents the AngularJS pieces of the application
+const ng1AppModule = angular.module('ng1AppModule', []);
+// #enddocregion
+
+// #docregion ng1-hero
+// This AngularJS component will be "upgraded" to be used in Angular
+ng1AppModule.component('ng1Hero', {
+  bindings: {hero: '<', onRemove: '&'},
+  transclude: true,
+  template: `<div class="title" ng-transclude></div>
+             <h2>{{ $ctrl.hero.name }}</h2>
+             <p>{{ $ctrl.hero.description }}</p>
+             <button ng-click="$ctrl.onRemove()">Remove</button>`
+});
+// #enddocregion
+
+// #docregion ng1-text-formatter-service
+// This AngularJS service will be "upgraded" to be used in Angular
+ng1AppModule.service('textFormatter', [TextFormatter]);
+// #enddocregion
+
+// #docregion downgrade-ng2-heroes-service
+// Register an AngularJS service, whose value is the "downgraded" Angular injectable.
+ng1AppModule.factory('heroesService', downgradeInjectable(HeroesService) as any);
+// #enddocregion
+
+// #docregion ng2-heroes-wrapper
+// This directive will act as the interface to the "downgraded" Angular component
+ng1AppModule.directive('ng2Heroes', downgradeComponent({component: Ng2HeroesComponent}));
+// #enddocregion
+
+// #docregion example-app
+// This is our top level application component
+ng1AppModule.component('exampleApp', {
+  // We inject the "downgraded" HeroesService into this AngularJS component
+  // (We don't need the `HeroesService` type for AngularJS DI - it just helps with TypeScript
+  // compilation)
+  controller: [
+    'heroesService', function(heroesService: HeroesService) { this.heroesService = heroesService; }
+  ],
+  // This template makes use of the downgraded `ng2-heroes` component
+  // Note that because its element is compiled by AngularJS we must use kebab-case attributes
+  // for inputs and outputs
+  template: `<link rel="stylesheet" href="./styles.css">
+          <ng2-heroes [heroes]="$ctrl.heroesService.heroes" (add-hero)="$ctrl.heroesService.addHero()" (remove-hero)="$ctrl.heroesService.removeHero($event)">
+            <h1>Heroes</h1>
+            <p class="extra">There are {{ $ctrl.heroesService.heroes.length }} heroes.</p>
+          </ng2-heroes>`
+});
+// #enddocregion
+// #enddocregion
+
+
+// #docregion bootstrap-ng2
+// We bootstrap the Angular module as we would do in a normal Angular app.
+// (We are using the dynamic browser platform as this example has not been compiled AoT.)
+platformBrowserDynamic().bootstrapModule(Ng2AppModule);
+// #enddocregion
diff --git a/packages/examples/upgrade/static/ts/full/styles.css b/packages/examples/upgrade/static/ts/full/styles.css
new file mode 100644
index 000000000000..f3785c1c229d
--- /dev/null
+++ b/packages/examples/upgrade/static/ts/full/styles.css
@@ -0,0 +1,17 @@
+ng2-heroes {
+  border: solid black 2px;
+  display: block;
+  padding: 5px;
+}
+
+ng1-hero {
+  border: solid green 2px;
+  margin-top: 5px;
+  padding: 5px;
+  display: block;
+}
+
+.title {
+  background-color: blue;
+  color: white;
+}
diff --git a/packages/examples/upgrade/static/ts/lite/e2e_test/e2e_util.ts b/packages/examples/upgrade/static/ts/lite/e2e_test/e2e_util.ts
new file mode 100644
index 000000000000..c429b5000024
--- /dev/null
+++ b/packages/examples/upgrade/static/ts/lite/e2e_test/e2e_util.ts
@@ -0,0 +1,64 @@
+/**
+ * @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 {ElementFinder, by} from 'protractor';
+
+declare global {
+  namespace jasmine {
+  interface Matchers<T> {
+    toBeAHero(): Promise<void>;
+    toHaveName(exectedName: string): Promise<void>;
+  }
+  }
+}
+
+const isTitleCased = (text: string) =>
+    text.split(/\s+/).every(word => word[0] === word[0].toUpperCase());
+
+export function addCustomMatchers() {
+  jasmine.addMatchers({
+    toBeAHero:
+        () => ({
+          compare(actualNg1Hero: ElementFinder | undefined) {
+            const getText = (selector: string) =>
+                actualNg1Hero !.element(by.css(selector)).getText();
+            const result = {
+              message: 'Expected undefined to be an `ng1Hero` ElementFinder.',
+              pass: !!actualNg1Hero &&
+                  Promise.all(['.title', 'h2', 'p'].map(getText) as PromiseLike<string>[])
+                      .then(([actualTitle, actualName, actualDescription]) => {
+                        const pass = (actualTitle === 'Super Hero') && isTitleCased(actualName) &&
+                            (actualDescription.length > 0);
+
+                        const actualHero =
+                            `Hero(${actualTitle}, ${actualName}, ${actualDescription})`;
+                        result.message =
+                            `Expected ${actualHero}'${pass ? ' not' : ''} to be a real hero.`;
+
+                        return pass;
+                      })
+            };
+            return result;
+          }
+        }),
+        toHaveName: () => ({
+          compare(actualNg1Hero: ElementFinder | undefined, expectedName: string) {
+            const result = {
+              message: 'Expected undefined to be an `ng1Hero` ElementFinder.',
+              pass: !!actualNg1Hero && actualNg1Hero.element(by.css('h2')).getText().then(actualName => {
+                const pass = actualName === expectedName;
+                result.message =
+                    `Expected Hero(${actualName})${pass ? ' not' : ''} to have name '${expectedName}'.`;
+                return pass;
+              })
+            };
+            return result;
+          }
+        }),
+  } as any);
+}
diff --git a/packages/examples/upgrade/static/ts/lite/e2e_test/static_lite_spec.ts b/packages/examples/upgrade/static/ts/lite/e2e_test/static_lite_spec.ts
new file mode 100644
index 000000000000..5e7b6395ef14
--- /dev/null
+++ b/packages/examples/upgrade/static/ts/lite/e2e_test/static_lite_spec.ts
@@ -0,0 +1,89 @@
+/**
+ * @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 {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
+
+import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+import {addCustomMatchers} from './e2e_util';
+
+function loadPage() {
+  browser.rootEl = 'example-app';
+  browser.get('/upgrade/static/ts/lite/');
+}
+
+describe('upgrade/static (lite)', () => {
+  let showHideBtn: ElementFinder;
+  let ng2Heroes: ElementFinder;
+  let ng2HeroesHeader: ElementFinder;
+  let ng2HeroesExtra: ElementFinder;
+  let ng2HeroesAddBtn: ElementFinder;
+  let ng1Heroes: ElementArrayFinder;
+
+  const expectHeroes = (isShown: boolean, ng1HeroCount = 3, statusMessage = 'Ready') => {
+    // Verify the show/hide button text.
+    expect(showHideBtn.getText()).toBe(isShown ? 'Hide heroes' : 'Show heroes');
+
+    // Verify the `<ng2-heroes>` component.
+    expect(ng2Heroes.isPresent()).toBe(isShown);
+    if (isShown) {
+      expect(ng2HeroesHeader.getText()).toBe('Heroes');
+      expect(ng2HeroesExtra.getText()).toBe(`Status: ${statusMessage}`);
+    }
+
+    // Verify the `<ng1-hero>` components.
+    expect(ng1Heroes.count()).toBe(isShown ? ng1HeroCount : 0);
+    if (isShown) {
+      ng1Heroes.each(ng1Hero => expect(ng1Hero).toBeAHero());
+    }
+  };
+
+  beforeEach(() => {
+    showHideBtn = element(by.binding('toggleBtnText'));
+
+    ng2Heroes = element(by.css('.ng2-heroes'));
+    ng2HeroesHeader = ng2Heroes.element(by.css('h1'));
+    ng2HeroesExtra = ng2Heroes.element(by.css('.extra'));
+    ng2HeroesAddBtn = ng2Heroes.element(by.buttonText('Add Hero'));
+
+    ng1Heroes = element.all(by.css('.ng1-hero'));
+  });
+  beforeEach(addCustomMatchers);
+  beforeEach(loadPage);
+  afterEach(verifyNoBrowserErrors);
+
+  it('should initially not render the heroes', () => expectHeroes(false));
+
+  it('should toggle the heroes when clicking the "show/hide" button', () => {
+    showHideBtn.click();
+    expectHeroes(true);
+
+    showHideBtn.click();
+    expectHeroes(false);
+  });
+
+  it('should add a new hero when clicking the "add" button', () => {
+    showHideBtn.click();
+    ng2HeroesAddBtn.click();
+
+    expectHeroes(true, 4, 'Added hero Kamala Khan');
+    expect(ng1Heroes.last()).toHaveName('Kamala Khan');
+  });
+
+  it('should remove a hero when clicking its "remove" button', () => {
+    showHideBtn.click();
+
+    const firstHero = ng1Heroes.first();
+    expect(firstHero).toHaveName('Superman');
+
+    const removeBtn = firstHero.element(by.buttonText('Remove'));
+    removeBtn.click();
+
+    expectHeroes(true, 2, 'Removed hero Superman');
+    expect(ng1Heroes.first()).not.toHaveName('Superman');
+  });
+});
diff --git a/packages/examples/upgrade/static/ts/lite/module.ts b/packages/examples/upgrade/static/ts/lite/module.ts
new file mode 100644
index 000000000000..0a2e9b95f5a7
--- /dev/null
+++ b/packages/examples/upgrade/static/ts/lite/module.ts
@@ -0,0 +1,220 @@
+/**
+ * @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
+ */
+
+// #docplaster
+import {Component, Directive, ElementRef, EventEmitter, Inject, Injectable, Injector, Input, NgModule, Output, StaticProvider} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+// #docregion basic-how-to
+// Alternatively, we could import and use an `NgModuleFactory` instead:
+// import {MyLazyAngularModuleNgFactory} from './my-lazy-angular-module.ngfactory';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+// #enddocregion
+/* tslint:disable: no-duplicate-imports */
+import {UpgradeComponent} from '@angular/upgrade/static';
+import {downgradeComponent} from '@angular/upgrade/static';
+import {downgradeInjectable} from '@angular/upgrade/static';
+// #docregion basic-how-to
+import {downgradeModule} from '@angular/upgrade/static';
+// #enddocregion
+/* tslint:enable: no-duplicate-imports */
+
+
+declare var angular: ng.IAngularStatic;
+
+interface Hero {
+  name: string;
+  description: string;
+}
+
+
+// This Angular service will use an "upgraded" AngularJS service.
+@Injectable()
+class HeroesService {
+  heroes: Hero[] = [
+    {name: 'superman', description: 'The man of steel'},
+    {name: 'wonder woman', description: 'Princess of the Amazons'},
+    {name: 'thor', description: 'The hammer-wielding god'}
+  ];
+
+  constructor(@Inject('titleCase') titleCase: (v: string) => string) {
+    // Change all the hero names to title case, using the "upgraded" AngularJS service.
+    this.heroes.forEach((hero: Hero) => hero.name = titleCase(hero.name));
+  }
+
+  addHero() {
+    const newHero: Hero = {name: 'Kamala Khan', description: 'Epic shape-shifting healer'};
+    this.heroes = this.heroes.concat([newHero]);
+    return newHero;
+  }
+
+  removeHero(hero: Hero) { this.heroes = this.heroes.filter((item: Hero) => item !== hero); }
+}
+
+
+// This Angular component will be "downgraded" to be used in AngularJS.
+@Component({
+  selector: 'ng2-heroes',
+  // This template uses the "upgraded" `ng1-hero` component
+  // (Note that because its element is compiled by Angular we must use camelCased attribute names.)
+  template: `
+    <div class="ng2-heroes">
+      <header><ng-content selector="h1"></ng-content></header>
+      <ng-content selector=".extra"></ng-content>
+      <div *ngFor="let hero of this.heroesService.heroes">
+        <ng1-hero [hero]="hero" (onRemove)="onRemoveHero(hero)">
+          <strong>Super Hero</strong>
+        </ng1-hero>
+      </div>
+      <button (click)="onAddHero()">Add Hero</button>
+    </div>
+  `,
+})
+class Ng2HeroesComponent {
+  @Output() private addHero = new EventEmitter<Hero>();
+  @Output() private removeHero = new EventEmitter<Hero>();
+
+  constructor(
+      @Inject('$rootScope') private $rootScope: ng.IRootScopeService,
+      public heroesService: HeroesService) {}
+
+  onAddHero() {
+    const newHero = this.heroesService.addHero();
+    this.addHero.emit(newHero);
+
+    // When a new instance of an "upgraded" component - such as `ng1Hero` - is created, we want to
+    // run a `$digest` to initialize its bindings. Here, the component will be created by `ngFor`
+    // asynchronously, thus we have to schedule the `$digest` to also happen asynchronously.
+    this.$rootScope.$applyAsync();
+  }
+
+  onRemoveHero(hero: Hero) {
+    this.heroesService.removeHero(hero);
+    this.removeHero.emit(hero);
+  }
+}
+
+
+// This Angular directive will act as an interface to the "upgraded" AngularJS component.
+@Directive({selector: 'ng1-hero'})
+class Ng1HeroComponentWrapper extends UpgradeComponent {
+  // The names of the input and output properties here must match the names of the
+  // `<` and `&` bindings in the AngularJS component that is being wrapped.
+  @Input() hero !: Hero;
+  @Output() onRemove !: EventEmitter<void>;
+
+  constructor(elementRef: ElementRef, injector: Injector) {
+    // We must pass the name of the directive as used by AngularJS to the super.
+    super('ng1Hero', elementRef, injector);
+  }
+}
+
+
+// This Angular module represents the Angular pieces of the application.
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],
+  providers: [
+    HeroesService,
+    // Register an Angular provider whose value is the "upgraded" AngularJS service.
+    {provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']}
+  ],
+  // All components that are to be "downgraded" must be declared as `entryComponents`.
+  entryComponents: [Ng2HeroesComponent]
+  // Note that there are no `bootstrap` components, since the "downgraded" component
+  // will be instantiated by ngUpgrade.
+})
+class MyLazyAngularModule {
+  // Empty placeholder method to prevent the `Compiler` from complaining.
+  ngDoBootstrap() {}
+}
+
+
+// #docregion basic-how-to
+
+
+// The function that will bootstrap the Angular module (when/if necessary).
+// (This would be omitted if we provided an `NgModuleFactory` directly.)
+const ng2BootstrapFn = (extraProviders: StaticProvider[]) =>
+    platformBrowserDynamic(extraProviders).bootstrapModule(MyLazyAngularModule);
+// #enddocregion
+// (We are using the dynamic browser platform, as this example has not been compiled AoT.)
+
+
+// #docregion basic-how-to
+
+
+// This AngularJS module represents the AngularJS pieces of the application.
+const myMainAngularJsModule = angular.module('myMainAngularJsModule', [
+  // We declare a dependency on the "downgraded" Angular module.
+  downgradeModule(ng2BootstrapFn)
+  // or
+  // downgradeModule(MyLazyAngularModuleFactory)
+]);
+// #enddocregion
+
+
+// This AngularJS component will be "upgraded" to be used in Angular.
+myMainAngularJsModule.component('ng1Hero', {
+  bindings: {hero: '<', onRemove: '&'},
+  transclude: true,
+  template: `
+    <div class="ng1-hero">
+      <div class="title" ng-transclude></div>
+      <h2>{{ $ctrl.hero.name }}</h2>
+      <p>{{ $ctrl.hero.description }}</p>
+      <button ng-click="$ctrl.onRemove()">Remove</button>
+    </div>
+  `
+});
+
+
+// This AngularJS service will be "upgraded" to be used in Angular.
+myMainAngularJsModule.factory(
+    'titleCase', () => (value: string) => value.replace(/(^|\s)[a-z]/g, m => m.toUpperCase()));
+
+
+// This directive will act as the interface to the "downgraded" Angular component.
+myMainAngularJsModule.directive(
+    'ng2Heroes', downgradeComponent({
+      component: Ng2HeroesComponent,
+      // Optionally, disable `$digest` propagation to avoid unnecessary change detection.
+      // (Change detection is still run when the inputs of a "downgraded" component change.)
+      propagateDigest: false
+    }));
+
+
+// This is our top level application component.
+myMainAngularJsModule.component('exampleApp', {
+  // This template makes use of the "downgraded" `ng2-heroes` component,
+  // but loads it lazily only when/if the user clicks the button.
+  // (Note that because its element is compiled by AngularJS,
+  //  we must use kebab-case attributes for inputs and outputs.)
+  template: `
+    <link rel="stylesheet" href="./styles.css">
+    <button ng-click="$ctrl.toggleHeroes()">{{ $ctrl.toggleBtnText() }}</button>
+    <ng2-heroes
+        ng-if="$ctrl.showHeroes"
+        (add-hero)="$ctrl.setStatusMessage('Added hero ' + $event.name)"
+        (remove-hero)="$ctrl.setStatusMessage('Removed hero ' + $event.name)">
+      <h1>Heroes</h1>
+      <p class="extra">Status: {{ $ctrl.statusMessage }}</p>
+    </ng2-heroes>
+  `,
+  controller: function() {
+    this.showHeroes = false;
+    this.statusMessage = 'Ready';
+
+    this.setStatusMessage = (msg: string) => this.statusMessage = msg;
+    this.toggleHeroes = () => this.showHeroes = !this.showHeroes;
+    this.toggleBtnText = () => `${this.showHeroes ? 'Hide' : 'Show'} heroes`;
+  }
+});
+
+
+// We bootstrap the Angular module as we would do in a normal Angular app.
+angular.bootstrap(document.body, [myMainAngularJsModule.name]);
diff --git a/packages/examples/upgrade/static/ts/lite/styles.css b/packages/examples/upgrade/static/ts/lite/styles.css
new file mode 100644
index 000000000000..f3785c1c229d
--- /dev/null
+++ b/packages/examples/upgrade/static/ts/lite/styles.css
@@ -0,0 +1,17 @@
+ng2-heroes {
+  border: solid black 2px;
+  display: block;
+  padding: 5px;
+}
+
+ng1-hero {
+  border: solid green 2px;
+  margin-top: 5px;
+  padding: 5px;
+  display: block;
+}
+
+.title {
+  background-color: blue;
+  color: white;
+}
diff --git a/packages/examples/web_workers/ts/.gitkeep b/packages/examples/web_workers/ts/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/forms/BUILD.bazel b/packages/forms/BUILD.bazel
new file mode 100644
index 000000000000..668f0b47eb54
--- /dev/null
+++ b/packages/forms/BUILD.bazel
@@ -0,0 +1,33 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "forms",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/forms",
+    deps = [
+        "//packages/core",
+        "//packages/platform-browser",
+        "@rxjs",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = ["package.json"],
+    entry_point = "packages/forms/index.js",
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "release-with-framework",
+    ],
+    deps = [
+        ":forms",
+    ],
+)
diff --git a/packages/forms/index.ts b/packages/forms/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/forms/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';
diff --git a/packages/forms/package.json b/packages/forms/package.json
new file mode 100644
index 000000000000..9b644c186bea
--- /dev/null
+++ b/packages/forms/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@angular/forms",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - directives and services for creating forms",
+  "main": "./bundles/forms.umd.js",
+  "module": "./fesm5/forms.js",
+  "es2015": "./fesm2015/forms.js",
+  "esm5": "./esm5/forms.js",
+  "esm2015": "./esm2015/forms.js",
+  "fesm5": "./fesm5/forms.js",
+  "fesm2015": "./fesm2015/forms.js",
+  "typings": "./forms.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "rxjs": "^6.0.0",
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/common": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/forms/public_api.ts b/packages/forms/public_api.ts
new file mode 100644
index 000000000000..eb91a3bb4f32
--- /dev/null
+++ b/packages/forms/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/forms';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/forms/rollup.config.js b/packages/forms/rollup.config.js
new file mode 100644
index 000000000000..d4567e15c76e
--- /dev/null
+++ b/packages/forms/rollup.config.js
@@ -0,0 +1,31 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  'rxjs': 'rxjs',
+  'rxjs/operators': 'rxjs.operators',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/forms/fesm5/forms.js',
+  dest: '../../dist/packages-dist/forms/bundles/forms.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/forms'},
+  moduleName: 'ng.forms',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/forms/src/directives.ts b/packages/forms/src/directives.ts
new file mode 100644
index 000000000000..02e455a4ceb0
--- /dev/null
+++ b/packages/forms/src/directives.ts
@@ -0,0 +1,84 @@
+/**
+ * @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 {NgModule, Type} from '@angular/core';
+
+import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
+import {DefaultValueAccessor} from './directives/default_value_accessor';
+import {NgControlStatus, NgControlStatusGroup} from './directives/ng_control_status';
+import {NgForm} from './directives/ng_form';
+import {NgFormSelectorWarning} from './directives/ng_form_selector_warning';
+import {NgModel} from './directives/ng_model';
+import {NgModelGroup} from './directives/ng_model_group';
+import {NgNoValidate} from './directives/ng_no_validate_directive';
+import {NumberValueAccessor} from './directives/number_value_accessor';
+import {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
+import {RangeValueAccessor} from './directives/range_value_accessor';
+import {FormControlDirective} from './directives/reactive_directives/form_control_directive';
+import {FormControlName} from './directives/reactive_directives/form_control_name';
+import {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
+import {FormArrayName, FormGroupName} from './directives/reactive_directives/form_group_name';
+import {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
+import {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
+import {CheckboxRequiredValidator, EmailValidator, MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
+
+export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
+export {ControlValueAccessor} from './directives/control_value_accessor';
+export {DefaultValueAccessor} from './directives/default_value_accessor';
+export {NgControl} from './directives/ng_control';
+export {NgControlStatus, NgControlStatusGroup} from './directives/ng_control_status';
+export {NgForm} from './directives/ng_form';
+export {NG_FORM_SELECTOR_WARNING, NgFormSelectorWarning} from './directives/ng_form_selector_warning';
+export {NgModel} from './directives/ng_model';
+export {NgModelGroup} from './directives/ng_model_group';
+export {NumberValueAccessor} from './directives/number_value_accessor';
+export {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
+export {RangeValueAccessor} from './directives/range_value_accessor';
+export {FormControlDirective, NG_MODEL_WITH_FORM_CONTROL_WARNING} from './directives/reactive_directives/form_control_directive';
+export {FormControlName} from './directives/reactive_directives/form_control_name';
+export {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
+export {FormArrayName, FormGroupName} from './directives/reactive_directives/form_group_name';
+export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
+export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
+
+export const SHARED_FORM_DIRECTIVES: Type<any>[] = [
+  NgNoValidate,
+  NgSelectOption,
+  NgSelectMultipleOption,
+  DefaultValueAccessor,
+  NumberValueAccessor,
+  RangeValueAccessor,
+  CheckboxControlValueAccessor,
+  SelectControlValueAccessor,
+  SelectMultipleControlValueAccessor,
+  RadioControlValueAccessor,
+  NgControlStatus,
+  NgControlStatusGroup,
+  RequiredValidator,
+  MinLengthValidator,
+  MaxLengthValidator,
+  PatternValidator,
+  CheckboxRequiredValidator,
+  EmailValidator,
+];
+
+export const TEMPLATE_DRIVEN_DIRECTIVES: Type<any>[] =
+    [NgModel, NgModelGroup, NgForm, NgFormSelectorWarning];
+
+export const REACTIVE_DRIVEN_DIRECTIVES: Type<any>[] =
+    [FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName];
+
+/**
+ * Internal module used for sharing directives between FormsModule and ReactiveFormsModule
+ */
+@NgModule({
+  declarations: SHARED_FORM_DIRECTIVES,
+  exports: SHARED_FORM_DIRECTIVES,
+})
+export class InternalFormsSharedModule {
+}
diff --git a/packages/forms/src/directives/abstract_control_directive.ts b/packages/forms/src/directives/abstract_control_directive.ts
new file mode 100644
index 000000000000..c0d049bfc8cd
--- /dev/null
+++ b/packages/forms/src/directives/abstract_control_directive.ts
@@ -0,0 +1,165 @@
+/**
+ * @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';
+import {AbstractControl} from '../model';
+import {ValidationErrors} from './validators';
+
+/**
+ * Base class for control directives.
+ *
+ * Only used internally in the forms module.
+ *
+ *
+ */
+export abstract class AbstractControlDirective {
+  /**
+   * The `FormControl`, `FormGroup`, or `FormArray`
+   * that backs this directive. Most properties fall through to that
+   * instance.
+   */
+  abstract get control(): AbstractControl|null;
+
+  /** The value of the control. */
+  get value(): any { return this.control ? this.control.value : null; }
+
+  /**
+   * A control is `valid` when its `status === VALID`.
+   *
+   * In order to have this status, the control must have passed all its
+   * validation checks.
+   */
+  get valid(): boolean|null { return this.control ? this.control.valid : null; }
+
+  /**
+   * A control is `invalid` when its `status === INVALID`.
+   *
+   * In order to have this status, the control must have failed
+   * at least one of its validation checks.
+   */
+  get invalid(): boolean|null { return this.control ? this.control.invalid : null; }
+
+  /**
+   * A control is `pending` when its `status === PENDING`.
+   *
+   * In order to have this status, the control must be in the
+   * middle of conducting a validation check.
+   */
+  get pending(): boolean|null { return this.control ? this.control.pending : null; }
+
+  /**
+   * A control is `disabled` when its `status === DISABLED`.
+   *
+   * Disabled controls are exempt from validation checks and
+   * are not included in the aggregate value of their ancestor
+   * controls.
+   */
+  get disabled(): boolean|null { return this.control ? this.control.disabled : null; }
+
+  /**
+   * A control is `enabled` as long as its `status !== DISABLED`.
+   *
+   * In other words, it has a status of `VALID`, `INVALID`, or
+   * `PENDING`.
+   */
+  get enabled(): boolean|null { return this.control ? this.control.enabled : null; }
+
+  /**
+   * Returns any errors generated by failing validation. If there
+   * are no errors, it will return null.
+   */
+  get errors(): ValidationErrors|null { return this.control ? this.control.errors : null; }
+
+  /**
+   * A control is `pristine` if the user has not yet changed
+   * the value in the UI.
+   *
+   * Note that programmatic changes to a control's value will
+   * *not* mark it dirty.
+   */
+  get pristine(): boolean|null { return this.control ? this.control.pristine : null; }
+
+  /**
+   * A control is `dirty` if the user has changed the value
+   * in the UI.
+   *
+   * Note that programmatic changes to a control's value will
+   * *not* mark it dirty.
+   */
+  get dirty(): boolean|null { return this.control ? this.control.dirty : null; }
+
+  /**
+   * A control is marked `touched` once the user has triggered
+   * a `blur` event on it.
+   */
+  get touched(): boolean|null { return this.control ? this.control.touched : null; }
+
+  get status(): string|null { return this.control ? this.control.status : null; }
+
+  /**
+   * A control is `untouched` if the user has not yet triggered
+   * a `blur` event on it.
+   */
+  get untouched(): boolean|null { return this.control ? this.control.untouched : null; }
+
+  /**
+   * Emits an event every time the validation status of the control
+   * is re-calculated.
+   */
+  get statusChanges(): Observable<any>|null {
+    return this.control ? this.control.statusChanges : null;
+  }
+
+  /**
+   * Emits an event every time the value of the control changes, in
+   * the UI or programmatically.
+   */
+  get valueChanges(): Observable<any>|null {
+    return this.control ? this.control.valueChanges : null;
+  }
+
+  /**
+   * Returns an array that represents the path from the top-level form
+   * to this control. Each index is the string name of the control on
+   * that level.
+   */
+  get path(): string[]|null { return null; }
+
+  /**
+   * Resets the form control. This means by default:
+   *
+   * * it is marked as `pristine`
+   * * it is marked as `untouched`
+   * * value is set to null
+   *
+   * For more information, see `AbstractControl`.
+   */
+  reset(value: any = undefined): void {
+    if (this.control) this.control.reset(value);
+  }
+
+  /**
+   * Returns true if the control with the given path has the error specified. Otherwise
+   * returns false.
+   *
+   * If no path is given, it checks for the error on the present control.
+   */
+  hasError(errorCode: string, path?: string[]): boolean {
+    return this.control ? this.control.hasError(errorCode, path) : false;
+  }
+
+  /**
+   * Returns error data if the control with the given path has the error specified. Otherwise
+   * returns null or undefined.
+   *
+   * If no path is given, it checks for the error on the present control.
+   */
+  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
new file mode 100644
index 000000000000..ff1cf3212597
--- /dev/null
+++ b/packages/forms/src/directives/abstract_form_group_directive.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 {OnDestroy, OnInit} from '@angular/core';
+
+import {FormGroup} from '../model';
+
+import {ControlContainer} from './control_container';
+import {Form} from './form_interface';
+import {composeAsyncValidators, composeValidators, controlPath} from './shared';
+import {AsyncValidatorFn, ValidatorFn} from './validators';
+
+
+
+/**
+ * This is a base class for code shared between `NgModelGroup` and `FormGroupName`.
+ *
+ *
+ */
+export class AbstractFormGroupDirective extends ControlContainer implements OnInit, OnDestroy {
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _parent !: ControlContainer;
+
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _validators !: any[];
+
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _asyncValidators !: any[];
+
+  ngOnInit(): void {
+    this._checkParentType();
+    this.formDirective !.addFormGroup(this);
+  }
+
+  ngOnDestroy(): void {
+    if (this.formDirective) {
+      this.formDirective.removeFormGroup(this);
+    }
+  }
+
+  /**
+   * Get the `FormGroup` backing this binding.
+   */
+  get control(): FormGroup { return this.formDirective !.getFormGroup(this); }
+
+  /**
+   * Get the path to this control group.
+   */
+  get path(): string[] { return controlPath(this.name, this._parent); }
+
+  /**
+   * Get the `Form` to which this group belongs.
+   */
+  get formDirective(): Form|null { return this._parent ? this._parent.formDirective : null; }
+
+  get validator(): ValidatorFn|null { return composeValidators(this._validators); }
+
+  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
new file mode 100644
index 000000000000..dd8ee87b5a3e
--- /dev/null
+++ b/packages/forms/src/directives/checkbox_value_accessor.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 {Directive, ElementRef, Renderer2, forwardRef} from '@angular/core';
+
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+
+export const CHECKBOX_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => CheckboxControlValueAccessor),
+  multi: true,
+};
+
+/**
+ * The accessor for writing a value and listening to changes on a checkbox input element.
+ *
+ *  ### Example
+ *  ```
+ *  <input type="checkbox" name="rememberLogin" ngModel>
+ *  ```
+ *
+ *
+ */
+@Directive({
+  selector:
+      'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
+  host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},
+  providers: [CHECKBOX_VALUE_ACCESSOR]
+})
+export class CheckboxControlValueAccessor implements ControlValueAccessor {
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
+
+  writeValue(value: any): void {
+    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.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+  }
+}
diff --git a/packages/forms/src/directives/control_container.ts b/packages/forms/src/directives/control_container.ts
new file mode 100644
index 000000000000..1f5cd0293fdf
--- /dev/null
+++ b/packages/forms/src/directives/control_container.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 {AbstractControlDirective} from './abstract_control_directive';
+import {Form} from './form_interface';
+
+
+/**
+ * A directive that contains multiple `NgControl`s.
+ *
+ * Only used by the forms module.
+ *
+ *
+ */
+export abstract class ControlContainer extends AbstractControlDirective {
+  // TODO(issue/24571): remove '!'.
+  name !: string;
+
+  /**
+   * Get the form to which this container belongs.
+   */
+  get formDirective(): Form|null { return null; }
+
+  /**
+   * Get the path to this container.
+   */
+  get path(): string[]|null { return null; }
+}
diff --git a/packages/forms/src/directives/control_value_accessor.ts b/packages/forms/src/directives/control_value_accessor.ts
new file mode 100644
index 000000000000..569647c579ce
--- /dev/null
+++ b/packages/forms/src/directives/control_value_accessor.ts
@@ -0,0 +1,118 @@
+/**
+ * @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 `ControlValueAccessor` acts as a bridge between the Angular forms API and a
+ * native element in the DOM.
+ *
+ * Implement this interface if you want to create a custom form control directive
+ * that integrates with Angular forms.
+ *
+ *
+ */
+export interface ControlValueAccessor {
+  /**
+   * Writes a new value to the element.
+   *
+   * This method will be called by the forms API to write to the view when programmatic
+   * (model -> view) changes are requested.
+   *
+   * Example implementation of `writeValue`:
+   *
+   * ```ts
+   * writeValue(value: any): void {
+   *   this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
+   * }
+   * ```
+   */
+  writeValue(obj: any): void;
+
+  /**
+   * Registers a callback function that should be called when the control's value
+   * changes in the UI.
+   *
+   * This is called by the forms API on initialization so it can update the form
+   * model when values propagate from the view (view -> model).
+   *
+   * If you are implementing `registerOnChange` in your own value accessor, you
+   * will typically want to save the given function so your class can call it
+   * at the appropriate time.
+   *
+   * ```ts
+   * registerOnChange(fn: (_: any) => void): void {
+   *   this._onChange = fn;
+   * }
+   * ```
+   *
+   * When the value changes in the UI, your class should call the registered
+   * function to allow the forms API to update itself:
+   *
+   * ```ts
+   * host: {
+   *    (change): '_onChange($event.target.value)'
+   * }
+   * ```
+   *
+   */
+  registerOnChange(fn: any): void;
+
+  /**
+   * Registers a callback function that should be called when the control receives
+   * a blur event.
+   *
+   * This is called by the forms API on initialization so it can update the form model
+   * on blur.
+   *
+   * If you are implementing `registerOnTouched` in your own value accessor, you
+   * will typically want to save the given function so your class can call it
+   * when the control should be considered blurred (a.k.a. "touched").
+   *
+   * ```ts
+   * registerOnTouched(fn: any): void {
+   *   this._onTouched = fn;
+   * }
+   * ```
+   *
+   * On blur (or equivalent), your class should call the registered function to allow
+   * the forms API to update itself:
+   *
+   * ```ts
+   * host: {
+   *    '(blur)': '_onTouched()'
+   * }
+   * ```
+   */
+  registerOnTouched(fn: any): void;
+
+  /**
+   * This function is called by the forms API when the control status changes to
+   * or from "DISABLED". Depending on the value, it should enable or disable the
+   * appropriate DOM element.
+   *
+   * Example implementation of `setDisabledState`:
+   *
+   * ```ts
+   * setDisabledState(isDisabled: boolean): void {
+   *   this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+   * }
+   * ```
+   *
+   * @param isDisabled
+   */
+  setDisabledState?(isDisabled: boolean): void;
+}
+
+/**
+ * Used to provide a `ControlValueAccessor` for form controls.
+ *
+ * See `DefaultValueAccessor` for how to implement one.
+ *
+ */
+export const NG_VALUE_ACCESSOR = new InjectionToken<ControlValueAccessor>('NgValueAccessor');
diff --git a/packages/forms/src/directives/default_value_accessor.ts b/packages/forms/src/directives/default_value_accessor.ts
new file mode 100644
index 000000000000..b082fd0688e3
--- /dev/null
+++ b/packages/forms/src/directives/default_value_accessor.ts
@@ -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
+ */
+
+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';
+
+export const DEFAULT_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => DefaultValueAccessor),
+  multi: true
+};
+
+/**
+ * We must check whether the agent is Android because composition events
+ * behave differently between iOS and Android.
+ */
+function _isAndroid(): boolean {
+  const userAgent = getDOM() ? getDOM().getUserAgent() : '';
+  return /android (\d+)/.test(userAgent.toLowerCase());
+}
+
+/**
+ * Turn this mode on if you want form directives to buffer IME input until compositionend
+ * @experimental
+ */
+export const COMPOSITION_BUFFER_MODE = new InjectionToken<boolean>('CompositionEventMode');
+
+/**
+ * The default accessor for writing a value and listening to changes that is used by the
+ * `NgModel`, `FormControlDirective`, and `FormControlName` directives.
+ *
+ *  ### Example
+ *  ```
+ *  <input type="text" name="searchQuery" ngModel>
+ *  ```
+ *
+ *
+ */
+@Directive({
+  selector:
+      'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
+  // TODO: vsavkin replace the above selector with the one below it once
+  // https://github.com/angular/angular/issues/3011 is implemented
+  // selector: '[ngModel],[formControl],[formControlName]',
+  host: {
+    '(input)': '$any(this)._handleInput($event.target.value)',
+    '(blur)': 'onTouched()',
+    '(compositionstart)': '$any(this)._compositionStart()',
+    '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
+  },
+  providers: [DEFAULT_VALUE_ACCESSOR]
+})
+export class DefaultValueAccessor implements ControlValueAccessor {
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  /** Whether the user is creating a composition string (IME events). */
+  private _composing = false;
+
+  constructor(
+      private _renderer: Renderer2, private _elementRef: ElementRef,
+      @Optional() @Inject(COMPOSITION_BUFFER_MODE) private _compositionMode: boolean) {
+    if (this._compositionMode == null) {
+      this._compositionMode = !_isAndroid();
+    }
+  }
+
+  writeValue(value: any): void {
+    const normalizedValue = value == null ? '' : value;
+    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.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+  }
+
+  /** @internal */
+  _handleInput(value: any): void {
+    if (!this._compositionMode || (this._compositionMode && !this._composing)) {
+      this.onChange(value);
+    }
+  }
+
+  /** @internal */
+  _compositionStart(): void { this._composing = true; }
+
+  /** @internal */
+  _compositionEnd(value: any): void {
+    this._composing = false;
+    this._compositionMode && this.onChange(value);
+  }
+}
diff --git a/packages/forms/src/directives/error_examples.ts b/packages/forms/src/directives/error_examples.ts
new file mode 100644
index 000000000000..d68553b88cbf
--- /dev/null
+++ b/packages/forms/src/directives/error_examples.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 const FormErrorExamples = {
+  formControlName: `
+    <div [formGroup]="myGroup">
+      <input formControlName="firstName">
+    </div>
+
+    In your class:
+
+    this.myGroup = new FormGroup({
+       firstName: new FormControl()
+    });`,
+
+  formGroupName: `
+    <div [formGroup]="myGroup">
+       <div formGroupName="person">
+          <input formControlName="firstName">
+       </div>
+    </div>
+
+    In your class:
+
+    this.myGroup = new FormGroup({
+       person: new FormGroup({ firstName: new FormControl() })
+    });`,
+
+  formArrayName: `
+    <div [formGroup]="myGroup">
+      <div formArrayName="cities">
+        <div *ngFor="let city of cityArray.controls; index as i">
+          <input [formControlName]="i">
+        </div>
+      </div>
+    </div>
+
+    In your class:
+
+    this.cityArray = new FormArray([new FormControl('SF')]);
+    this.myGroup = new FormGroup({
+      cities: this.cityArray
+    });`,
+
+  ngModelGroup: `
+    <form>
+       <div ngModelGroup="person">
+          <input [(ngModel)]="person.name" name="firstName">
+       </div>
+    </form>`,
+
+  ngModelWithFormGroup: `
+    <div [formGroup]="myGroup">
+       <input formControlName="firstName">
+       <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
+    </div>
+  `
+};
diff --git a/packages/forms/src/directives/form_interface.ts b/packages/forms/src/directives/form_interface.ts
new file mode 100644
index 000000000000..d2790aa1d804
--- /dev/null
+++ b/packages/forms/src/directives/form_interface.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 {FormControl, FormGroup} from '../model';
+
+import {AbstractFormGroupDirective} from './abstract_form_group_directive';
+import {NgControl} from './ng_control';
+
+
+
+/**
+ * An interface that `FormGroupDirective` and `NgForm` implement.
+ *
+ * Only used by the forms module.
+ *
+ *
+ */
+export interface Form {
+  /**
+   * Add a control to this form.
+   */
+  addControl(dir: NgControl): void;
+
+  /**
+   * Remove a control from this form.
+   */
+  removeControl(dir: NgControl): void;
+
+  /**
+   * Look up the `FormControl` associated with a particular `NgControl`.
+   */
+  getControl(dir: NgControl): FormControl;
+
+  /**
+   * Add a group of controls to this form.
+   */
+  addFormGroup(dir: AbstractFormGroupDirective): void;
+
+  /**
+   * Remove a group of controls from this form.
+   */
+  removeFormGroup(dir: AbstractFormGroupDirective): void;
+
+  /**
+   * Look up the `FormGroup` associated with a particular `AbstractFormGroupDirective`.
+   */
+  getFormGroup(dir: AbstractFormGroupDirective): FormGroup;
+
+  /**
+   * Update the model for a particular control with a new value.
+   */
+  updateModel(dir: NgControl, value: any): void;
+}
diff --git a/packages/forms/src/directives/ng_control.ts b/packages/forms/src/directives/ng_control.ts
new file mode 100644
index 000000000000..b5b028c7de10
--- /dev/null
+++ b/packages/forms/src/directives/ng_control.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 {AbstractControlDirective} from './abstract_control_directive';
+import {ControlContainer} from './control_container';
+import {ControlValueAccessor} from './control_value_accessor';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from './validators';
+
+function unimplemented(): any {
+  throw new Error('unimplemented');
+}
+
+/**
+ * A base class that all control directive extend.
+ * It binds a `FormControl` object to a DOM element.
+ *
+ * Used internally by Angular forms.
+ *
+ *
+ */
+export abstract class NgControl extends AbstractControlDirective {
+  /** @internal */
+  _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|null { return <ValidatorFn>unimplemented(); }
+  get asyncValidator(): AsyncValidatorFn|null { return <AsyncValidatorFn>unimplemented(); }
+
+  abstract viewToModelUpdate(newValue: any): void;
+}
diff --git a/packages/forms/src/directives/ng_control_status.ts b/packages/forms/src/directives/ng_control_status.ts
new file mode 100644
index 000000000000..44ebb8d9ebe3
--- /dev/null
+++ b/packages/forms/src/directives/ng_control_status.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 {Directive, Self} from '@angular/core';
+
+import {AbstractControlDirective} from './abstract_control_directive';
+import {ControlContainer} from './control_container';
+import {NgControl} from './ng_control';
+
+export class AbstractControlStatus {
+  private _cd: AbstractControlDirective;
+
+  constructor(cd: AbstractControlDirective) { this._cd = cd; }
+
+  get ngClassUntouched(): boolean { return this._cd.control ? this._cd.control.untouched : false; }
+  get ngClassTouched(): boolean { return this._cd.control ? this._cd.control.touched : false; }
+  get ngClassPristine(): boolean { return this._cd.control ? this._cd.control.pristine : false; }
+  get ngClassDirty(): boolean { return this._cd.control ? this._cd.control.dirty : false; }
+  get ngClassValid(): boolean { return this._cd.control ? this._cd.control.valid : false; }
+  get ngClassInvalid(): boolean { return this._cd.control ? this._cd.control.invalid : false; }
+  get ngClassPending(): boolean { return this._cd.control ? this._cd.control.pending : false; }
+}
+
+export const ngControlStatusHost = {
+  '[class.ng-untouched]': 'ngClassUntouched',
+  '[class.ng-touched]': 'ngClassTouched',
+  '[class.ng-pristine]': 'ngClassPristine',
+  '[class.ng-dirty]': 'ngClassDirty',
+  '[class.ng-valid]': 'ngClassValid',
+  '[class.ng-invalid]': 'ngClassInvalid',
+  '[class.ng-pending]': 'ngClassPending',
+};
+
+/**
+ * Directive automatically applied to Angular form controls that sets CSS classes
+ * based on control status. The following classes are applied as the properties
+ * become true:
+ *
+ * * ng-valid
+ * * ng-invalid
+ * * ng-pending
+ * * ng-pristine
+ * * ng-dirty
+ * * ng-untouched
+ * * ng-touched
+ *
+ *
+ */
+@Directive({selector: '[formControlName],[ngModel],[formControl]', host: ngControlStatusHost})
+export class NgControlStatus extends AbstractControlStatus {
+  constructor(@Self() cd: NgControl) { super(cd); }
+}
+
+/**
+ * Directive automatically applied to Angular form groups that sets CSS classes
+ * based on control status (valid/invalid/dirty/etc).
+ *
+ *
+ */
+@Directive({
+  selector:
+      '[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]',
+  host: ngControlStatusHost
+})
+export class NgControlStatusGroup extends AbstractControlStatus {
+  constructor(@Self() cd: ControlContainer) { super(cd); }
+}
diff --git a/packages/forms/src/directives/ng_form.ts b/packages/forms/src/directives/ng_form.ts
new file mode 100644
index 000000000000..db914b4a33f0
--- /dev/null
+++ b/packages/forms/src/directives/ng_form.ts
@@ -0,0 +1,210 @@
+/**
+ * @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 {AfterViewInit, Directive, EventEmitter, Inject, Input, Optional, Self, forwardRef} from '@angular/core';
+
+import {AbstractControl, FormControl, FormGroup, FormHooks} from '../model';
+import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
+
+import {ControlContainer} from './control_container';
+import {Form} from './form_interface';
+import {NgControl} from './ng_control';
+import {NgModel} from './ng_model';
+import {NgModelGroup} from './ng_model_group';
+import {composeAsyncValidators, composeValidators, removeDir, setUpControl, setUpFormContainer, syncPendingControls} from './shared';
+
+export const formDirectiveProvider: any = {
+  provide: ControlContainer,
+  useExisting: forwardRef(() => NgForm)
+};
+
+const resolvedPromise = Promise.resolve(null);
+
+/**
+ * @description
+ *
+ * Creates a top-level `FormGroup` instance and binds it to a form
+ * to track aggregate form value and validation status.
+ *
+ * As soon as you import the `FormsModule`, this directive becomes active by default on
+ * all `<form>` tags.  You don't need to add a special selector.
+ *
+ * You can export the directive into a local template variable using `ngForm` as the key
+ * (ex: `#myForm="ngForm"`). This is optional, but useful.  Many properties from the underlying
+ * `FormGroup` instance are duplicated on the directive itself, so a reference to it
+ * will give you access to the aggregate value and validity status of the form, as well as
+ * user interaction properties like `dirty` and `touched`.
+ *
+ * To register child controls with the form, you'll want to use `NgModel` with a
+ * `name` attribute.  You can also use `NgModelGroup` if you'd like to create
+ * sub-groups within the form.
+ *
+ * You can listen to the directive's `ngSubmit` event to be notified when the user has
+ * triggered a form submission. The `ngSubmit` event will be emitted with the original form
+ * submission event.
+ *
+ * In template driven forms, all `<form>` tags are automatically tagged as `NgForm`.
+ * If you want to import the `FormsModule` but skip its usage in some forms,
+ * for example, to use native HTML5 validation, you can add `ngNoForm` and the `<form>`
+ * tags won't create an `NgForm` directive. In reactive forms, using `ngNoForm` is
+ * unnecessary because the `<form>` tags are inert. In that case, you would
+ * refrain from using the `formGroup` directive.
+ *
+ * Support for using `ngForm` element selector has been deprecated in Angular v6 and will be removed
+ * in Angular v9.
+ *
+ * This has been deprecated to keep selectors consistent with other core Angular selectors,
+ * as element selectors are typically written in kebab-case.
+ *
+ * Now deprecated:
+ * ```html
+ * <ngForm #myForm="ngForm">
+ * ```
+ *
+ * After:
+ * ```html
+ * <ng-form #myForm="ngForm">
+ * ```
+ *
+ * {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
+ *
+ * * **npm package**: `@angular/forms`
+ *
+ * * **NgModule**: `FormsModule`
+ *
+ */
+@Directive({
+  selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]',
+  providers: [formDirectiveProvider],
+  host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
+  outputs: ['ngSubmit'],
+  exportAs: 'ngForm'
+})
+export class NgForm extends ControlContainer implements Form,
+    AfterViewInit {
+  public readonly submitted: boolean = false;
+
+  private _directives: NgModel[] = [];
+
+  form: FormGroup;
+  ngSubmit = new EventEmitter();
+
+  /**
+   * Options for the `NgForm` instance. Accepts the following properties:
+   *
+   * **updateOn**: Serves as the default `updateOn` value for all child `NgModels` below it
+   * (unless a child has explicitly set its own value for this in `ngModelOptions`).
+   * Potential values: `'change'` | `'blur'` | `'submit'`
+   *
+   * ```html
+   * <form [ngFormOptions]="{updateOn: 'blur'}">
+   *    <input name="one" ngModel>  <!-- this ngModel will update on blur -->
+   * </form>
+   * ```
+   *
+   */
+  // TODO(issue/24571): remove '!'.
+  @Input('ngFormOptions') options !: {updateOn?: FormHooks};
+
+  constructor(
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) {
+    super();
+    this.form =
+        new FormGroup({}, composeValidators(validators), composeAsyncValidators(asyncValidators));
+  }
+
+  ngAfterViewInit() { this._setUpdateStrategy(); }
+
+  get formDirective(): Form { return this; }
+
+  get control(): FormGroup { return this.form; }
+
+  get path(): string[] { return []; }
+
+  get controls(): {[key: string]: AbstractControl} { return this.form.controls; }
+
+  addControl(dir: NgModel): void {
+    resolvedPromise.then(() => {
+      const container = this._findContainer(dir.path);
+      (dir as{control: FormControl}).control =
+          <FormControl>container.registerControl(dir.name, dir.control);
+      setUpControl(dir.control, dir);
+      dir.control.updateValueAndValidity({emitEvent: false});
+      this._directives.push(dir);
+    });
+  }
+
+  getControl(dir: NgModel): FormControl { return <FormControl>this.form.get(dir.path); }
+
+  removeControl(dir: NgModel): void {
+    resolvedPromise.then(() => {
+      const container = this._findContainer(dir.path);
+      if (container) {
+        container.removeControl(dir.name);
+      }
+      removeDir<NgModel>(this._directives, dir);
+    });
+  }
+
+  addFormGroup(dir: NgModelGroup): void {
+    resolvedPromise.then(() => {
+      const container = this._findContainer(dir.path);
+      const group = new FormGroup({});
+      setUpFormContainer(group, dir);
+      container.registerControl(dir.name, group);
+      group.updateValueAndValidity({emitEvent: false});
+    });
+  }
+
+  removeFormGroup(dir: NgModelGroup): void {
+    resolvedPromise.then(() => {
+      const container = this._findContainer(dir.path);
+      if (container) {
+        container.removeControl(dir.name);
+      }
+    });
+  }
+
+  getFormGroup(dir: NgModelGroup): FormGroup { return <FormGroup>this.form.get(dir.path); }
+
+  updateModel(dir: NgControl, value: any): void {
+    resolvedPromise.then(() => {
+      const ctrl = <FormControl>this.form.get(dir.path !);
+      ctrl.setValue(value);
+    });
+  }
+
+  setValue(value: {[key: string]: any}): void { this.control.setValue(value); }
+
+  onSubmit($event: Event): boolean {
+    (this as{submitted: boolean}).submitted = true;
+    syncPendingControls(this.form, this._directives);
+    this.ngSubmit.emit($event);
+    return false;
+  }
+
+  onReset(): void { this.resetForm(); }
+
+  resetForm(value: any = undefined): void {
+    this.form.reset(value);
+    (this as{submitted: boolean}).submitted = false;
+  }
+
+  private _setUpdateStrategy() {
+    if (this.options && this.options.updateOn != null) {
+      this.form._updateOn = this.options.updateOn;
+    }
+  }
+
+  /** @internal */
+  _findContainer(path: string[]): FormGroup {
+    path.pop();
+    return path.length ? <FormGroup>this.form.get(path) : this.form;
+  }
+}
diff --git a/packages/forms/src/directives/ng_form_selector_warning.ts b/packages/forms/src/directives/ng_form_selector_warning.ts
new file mode 100644
index 000000000000..6f418a7fc384
--- /dev/null
+++ b/packages/forms/src/directives/ng_form_selector_warning.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {Directive, Inject, InjectionToken, Optional} from '@angular/core';
+import {TemplateDrivenErrors} from './template_driven_errors';
+
+/**
+ * Token to provide to turn off the warning when using 'ngForm' deprecated selector.
+ */
+export const NG_FORM_SELECTOR_WARNING = new InjectionToken('NgFormSelectorWarning');
+
+/**
+ * This directive is solely used to display warnings when the deprecated `ngForm` selector is used.
+ *
+ * @deprecated in Angular v6 and will be removed in Angular v9.
+ *
+ */
+@Directive({selector: 'ngForm'})
+export class NgFormSelectorWarning {
+  /**
+   * Static property used to track whether the deprecation warning for this selector has been sent.
+   * Used to support warning config of "once".
+   *
+   * @internal
+   */
+  static _ngFormWarning = false;
+
+  constructor(@Optional() @Inject(NG_FORM_SELECTOR_WARNING) ngFormWarning: string|null) {
+    if (((!ngFormWarning || ngFormWarning === 'once') && !NgFormSelectorWarning._ngFormWarning) ||
+        ngFormWarning === 'always') {
+      TemplateDrivenErrors.ngFormWarning();
+      NgFormSelectorWarning._ngFormWarning = true;
+    }
+  }
+}
diff --git a/packages/forms/src/directives/ng_model.ts b/packages/forms/src/directives/ng_model.ts
new file mode 100644
index 000000000000..966bbe04b2fa
--- /dev/null
+++ b/packages/forms/src/directives/ng_model.ts
@@ -0,0 +1,277 @@
+/**
+ * @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 {Directive, EventEmitter, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
+
+import {FormControl, FormHooks} from '../model';
+import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
+
+import {AbstractFormGroupDirective} from './abstract_form_group_directive';
+import {ControlContainer} from './control_container';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+import {NgControl} from './ng_control';
+import {NgForm} from './ng_form';
+import {NgModelGroup} from './ng_model_group';
+import {composeAsyncValidators, composeValidators, controlPath, isPropertyUpdated, selectValueAccessor, setUpControl} from './shared';
+import {TemplateDrivenErrors} from './template_driven_errors';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from './validators';
+
+export const formControlBinding: any = {
+  provide: NgControl,
+  useExisting: forwardRef(() => NgModel)
+};
+
+/**
+ * `ngModel` forces an additional change detection run when its inputs change:
+ * E.g.:
+ * ```
+ * <div>{{myModel.valid}}</div>
+ * <input [(ngModel)]="myValue" #myModel="ngModel">
+ * ```
+ * I.e. `ngModel` can export itself on the element and then be used in the template.
+ * Normally, this would result in expressions before the `input` that use the exported directive
+ * to have and old value as they have been
+ * dirty checked before. As this is a very common case for `ngModel`, we added this second change
+ * detection run.
+ *
+ * Notes:
+ * - this is just one extra run no matter how many `ngModel` have been changed.
+ * - this is a general problem when using `exportAs` for directives!
+ */
+const resolvedPromise = Promise.resolve(null);
+
+/**
+ * @description
+ *
+ * Creates a `FormControl` instance from a domain model and binds it
+ * to a form control element.
+ *
+ * The `FormControl` instance will track the value, user interaction, and
+ * validation status of the control and keep the view synced with the model. If used
+ * within a parent form, the directive will also register itself with the form as a child
+ * control.
+ *
+ * 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 `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
+ * the domain model in your class as well.
+ *
+ * If you wish to inspect the properties of the associated `FormControl` (like
+ * validity state), you can also export the directive into a local template variable using
+ * `ngModel` as the key (ex: `#myVar="ngModel"`). You can then access the control using the
+ * directive's `control` property, but most properties you'll need (like `valid` and `dirty`)
+ * will fall through to the control anyway, so you can access them directly. You can see a
+ * full list of properties directly available in `AbstractControlDirective`.
+ *
+ * The following is an example of a simple standalone control using `ngModel`:
+ *
+ * {@example forms/ts/simpleNgModel/simple_ng_model_example.ts region='Component'}
+ *
+ * When using the `ngModel` within `<form>` tags, you'll also need to supply a `name` attribute
+ * so that the control can be registered with the parent form under that name.
+ *
+ * It's worth noting that in the context of a parent form, you often can skip one-way or
+ * two-way binding because the parent form will sync the value for you. You can access
+ * its properties by exporting it into a local template variable using `ngForm` (ex:
+ * `#f="ngForm"`). Then you can pass it where it needs to go on submit.
+ *
+ * If you do need to populate initial values into your form, using a one-way binding for
+ * `ngModel` tends to be sufficient as long as you use the exported form's value rather
+ * than the domain model's value on submit.
+ *
+ * Take a look at an example of using `ngModel` within a form:
+ *
+ * {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
+ *
+ * To see `ngModel` examples with different form control types, see:
+ *
+ * * Radio buttons: `RadioControlValueAccessor`
+ * * Selects: `SelectControlValueAccessor`
+ *
+ * **npm package**: `@angular/forms`
+ *
+ * **NgModule**: `FormsModule`
+ *
+ *
+ */
+@Directive({
+  selector: '[ngModel]:not([formControlName]):not([formControl])',
+  providers: [formControlBinding],
+  exportAs: 'ngModel'
+})
+export class NgModel extends NgControl implements OnChanges,
+    OnDestroy {
+  public readonly control: FormControl = new FormControl();
+  /** @internal */
+  _registered = false;
+  viewModel: any;
+
+  // TODO(issue/24571): remove '!'.
+  @Input() name !: string;
+  // TODO(issue/24571): remove '!'.
+  @Input('disabled') isDisabled !: boolean;
+  @Input('ngModel') model: any;
+
+  /**
+   * Options object for this `ngModel` instance. You can configure the following properties:
+   *
+   * **name**: An alternative to setting the name attribute on the form control element.
+   * Sometimes, especially with custom form components, the name attribute might be used
+   * as an `@Input` property for a different purpose. In cases like these, you can configure
+   * the `ngModel` name through this option.
+   *
+   * ```html
+   * <form>
+   *   <my-person-control name="Nancy" ngModel [ngModelOptions]="{name: 'user'}">
+   *   </my-person-control>
+   * </form>
+   * <!-- form value: {user: ''} -->
+   * ```
+   *
+   * **standalone**: Defaults to false. If this is set to true, the `ngModel` will not
+   * register itself with its parent form, and will act as if it's not in the form. This
+   * can be handy if you have form meta-controls, a.k.a. form elements nested in
+   * the `<form>` tag that control the display of the form, but don't contain form data.
+   *
+   * ```html
+   * <form>
+   *   <input name="login" ngModel placeholder="Login">
+   *   <input type="checkbox" ngModel [ngModelOptions]="{standalone: true}"> Show more options?
+   * </form>
+   * <!-- form value: {login: ''} -->
+   * ```
+   *
+   * **updateOn**: Defaults to `'change'`. Defines the event upon which the form control
+   * value and validity will update. Also accepts `'blur'` and `'submit'`.
+   *
+   * ```html
+   * <input [(ngModel)]="firstName" [ngModelOptions]="{updateOn: 'blur'}">
+   * ```
+   *
+   */
+  // TODO(issue/24571): remove '!'.
+  @Input('ngModelOptions')
+  options !: {name?: string, standalone?: boolean, updateOn?: FormHooks};
+
+  @Output('ngModelChange') update = new EventEmitter();
+
+  constructor(@Optional() @Host() parent: ControlContainer,
+              @Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
+              @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<AsyncValidator|AsyncValidatorFn>,
+              @Optional() @Self() @Inject(NG_VALUE_ACCESSOR)
+              valueAccessors: ControlValueAccessor[]) {
+                super();
+                this._parent = parent;
+                this._rawValidators = validators || [];
+                this._rawAsyncValidators = asyncValidators || [];
+                this.valueAccessor = selectValueAccessor(this, valueAccessors);
+              }
+
+              ngOnChanges(changes: SimpleChanges) {
+                this._checkForErrors();
+                if (!this._registered) this._setUpControl();
+                if ('isDisabled' in changes) {
+                  this._updateDisabled(changes);
+                }
+
+                if (isPropertyUpdated(changes, this.viewModel)) {
+                  this._updateValue(this.model);
+                  this.viewModel = this.model;
+                }
+              }
+
+              ngOnDestroy(): void { this.formDirective && this.formDirective.removeControl(this); }
+
+              get path(): string[] {
+                return this._parent ? controlPath(this.name, this._parent) : [this.name];
+              }
+
+              get formDirective(): any { return this._parent ? this._parent.formDirective : null; }
+
+              get validator(): ValidatorFn|null { return composeValidators(this._rawValidators); }
+
+              get asyncValidator(): AsyncValidatorFn|null {
+                return composeAsyncValidators(this._rawAsyncValidators);
+              }
+
+              viewToModelUpdate(newValue: any): void {
+                this.viewModel = newValue;
+                this.update.emit(newValue);
+              }
+
+              private _setUpControl(): void {
+                this._setUpdateStrategy();
+                this._isStandalone() ? this._setUpStandalone() :
+                                       this.formDirective.addControl(this);
+                this._registered = true;
+              }
+
+              private _setUpdateStrategy(): void {
+                if (this.options && this.options.updateOn != null) {
+                  this.control._updateOn = this.options.updateOn;
+                }
+              }
+
+              private _isStandalone(): boolean {
+                return !this._parent || !!(this.options && this.options.standalone);
+              }
+
+              private _setUpStandalone(): void {
+                setUpControl(this.control, this);
+                this.control.updateValueAndValidity({emitEvent: false});
+              }
+
+              private _checkForErrors(): void {
+                if (!this._isStandalone()) {
+                  this._checkParentType();
+                }
+                this._checkName();
+              }
+
+              private _checkParentType(): void {
+                if (!(this._parent instanceof NgModelGroup) &&
+                    this._parent instanceof AbstractFormGroupDirective) {
+                  TemplateDrivenErrors.formGroupNameException();
+                } else if (
+                    !(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
+                  TemplateDrivenErrors.modelParentException();
+                }
+              }
+
+              private _checkName(): void {
+                if (this.options && this.options.name) this.name = this.options.name;
+
+                if (!this._isStandalone() && !this.name) {
+                  TemplateDrivenErrors.missingNameException();
+                }
+              }
+
+              private _updateValue(value: any): void {
+                resolvedPromise.then(
+                    () => { this.control.setValue(value, {emitViewToModelChange: false}); });
+              }
+
+              private _updateDisabled(changes: SimpleChanges) {
+                const disabledValue = changes['isDisabled'].currentValue;
+
+                const isDisabled =
+                    disabledValue === '' || (disabledValue && disabledValue !== 'false');
+
+                resolvedPromise.then(() => {
+                  if (isDisabled && !this.control.disabled) {
+                    this.control.disable();
+                  } else if (!isDisabled && this.control.disabled) {
+                    this.control.enable();
+                  }
+                });
+              }
+}
diff --git a/packages/forms/src/directives/ng_model_group.ts b/packages/forms/src/directives/ng_model_group.ts
new file mode 100644
index 000000000000..e6d88209c867
--- /dev/null
+++ b/packages/forms/src/directives/ng_model_group.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 {Directive, Host, Inject, Input, OnDestroy, OnInit, Optional, Self, SkipSelf, forwardRef} from '@angular/core';
+
+import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
+
+import {AbstractFormGroupDirective} from './abstract_form_group_directive';
+import {ControlContainer} from './control_container';
+import {NgForm} from './ng_form';
+import {TemplateDrivenErrors} from './template_driven_errors';
+
+export const modelGroupProvider: any = {
+  provide: ControlContainer,
+  useExisting: forwardRef(() => NgModelGroup)
+};
+
+/**
+ * @description
+ *
+ * Creates and binds a `FormGroup` instance to a DOM element.
+ *
+ * This directive can only be used as a child of `NgForm` (or in other words,
+ * within `<form>` tags).
+ *
+ * Use this directive if you'd like to create a sub-group within a form. This can
+ * come in handy if you want to validate a sub-group of your form separately from
+ * the rest of your form, or if some values in your domain model make more sense to
+ * consume together in a nested object.
+ *
+ * Pass in the name you'd like this sub-group to have and it will become the key
+ * for the sub-group in the form's full value. You can also export the directive into
+ * a local template variable using `ngModelGroup` (ex: `#myGroup="ngModelGroup"`).
+ *
+ * {@example forms/ts/ngModelGroup/ng_model_group_example.ts region='Component'}
+ *
+ * * **npm package**: `@angular/forms`
+ *
+ * * **NgModule**: `FormsModule`
+ *
+ *
+ */
+@Directive({selector: '[ngModelGroup]', providers: [modelGroupProvider], exportAs: 'ngModelGroup'})
+export class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy {
+  // TODO(issue/24571): remove '!'.
+  @Input('ngModelGroup') name !: string;
+
+  constructor(
+      @Host() @SkipSelf() parent: ControlContainer,
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) {
+    super();
+    this._parent = parent;
+    this._validators = validators;
+    this._asyncValidators = asyncValidators;
+  }
+
+  /** @internal */
+  _checkParentType(): void {
+    if (!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
+      TemplateDrivenErrors.modelGroupParentException();
+    }
+  }
+}
diff --git a/packages/forms/src/directives/ng_no_validate_directive.ts b/packages/forms/src/directives/ng_no_validate_directive.ts
new file mode 100644
index 000000000000..b20f07a95c44
--- /dev/null
+++ b/packages/forms/src/directives/ng_no_validate_directive.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 {Directive} from '@angular/core';
+
+/**
+ * @description
+ *
+ * Adds `novalidate` attribute to all forms by default.
+ *
+ * `novalidate` is used to disable browser's native form validation.
+ *
+ * If you want to use native validation with Angular forms, just add `ngNativeValidate` attribute:
+ *
+ * ```
+ * <form ngNativeValidate></form>
+ * ```
+ *
+ * @experimental
+ */
+@Directive({
+  selector: 'form:not([ngNoForm]):not([ngNativeValidate])',
+  host: {'novalidate': ''},
+})
+export class NgNoValidate {
+}
diff --git a/packages/forms/src/directives/normalize_validator.ts b/packages/forms/src/directives/normalize_validator.ts
new file mode 100644
index 000000000000..3a08e61558c6
--- /dev/null
+++ b/packages/forms/src/directives/normalize_validator.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 {AbstractControl} from '../model';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from './validators';
+
+export function normalizeValidator(validator: ValidatorFn | Validator): ValidatorFn {
+  if ((<Validator>validator).validate) {
+    return (c: AbstractControl) => (<Validator>validator).validate(c);
+  } else {
+    return <ValidatorFn>validator;
+  }
+}
+
+export function normalizeAsyncValidator(validator: AsyncValidatorFn | AsyncValidator):
+    AsyncValidatorFn {
+  if ((<AsyncValidator>validator).validate) {
+    return (c: AbstractControl) => (<AsyncValidator>validator).validate(c);
+  } else {
+    return <AsyncValidatorFn>validator;
+  }
+}
diff --git a/packages/forms/src/directives/number_value_accessor.ts b/packages/forms/src/directives/number_value_accessor.ts
new file mode 100644
index 000000000000..96a823f72f93
--- /dev/null
+++ b/packages/forms/src/directives/number_value_accessor.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 {Directive, ElementRef, Renderer2, forwardRef} from '@angular/core';
+
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+
+export const NUMBER_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => NumberValueAccessor),
+  multi: true
+};
+
+/**
+ * The accessor for writing a number value and listening to changes that is used by the
+ * `NgModel`, `FormControlDirective`, and `FormControlName` directives.
+ *
+ *  ### Example
+ *  ```
+ *  <input type="number" [(ngModel)]="age">
+ *  ```
+ */
+@Directive({
+  selector:
+      'input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]',
+  host: {
+    '(change)': 'onChange($event.target.value)',
+    '(input)': 'onChange($event.target.value)',
+    '(blur)': 'onTouched()'
+  },
+  providers: [NUMBER_VALUE_ACCESSOR]
+})
+export class NumberValueAccessor implements ControlValueAccessor {
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  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.setProperty(this._elementRef.nativeElement, 'value', normalizedValue);
+  }
+
+  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.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
new file mode 100644
index 000000000000..9816da683fed
--- /dev/null
+++ b/packages/forms/src/directives/radio_control_value_accessor.ts
@@ -0,0 +1,158 @@
+/**
+ * @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 {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';
+
+export const RADIO_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => RadioControlValueAccessor),
+  multi: true
+};
+
+/**
+ * Internal class used by Angular to uncheck radio buttons with the matching name.
+ */
+@Injectable()
+export class RadioControlRegistry {
+  private _accessors: any[] = [];
+
+  add(control: NgControl, accessor: RadioControlValueAccessor) {
+    this._accessors.push([control, accessor]);
+  }
+
+  remove(accessor: RadioControlValueAccessor) {
+    for (let i = this._accessors.length - 1; i >= 0; --i) {
+      if (this._accessors[i][1] === accessor) {
+        this._accessors.splice(i, 1);
+        return;
+      }
+    }
+  }
+
+  select(accessor: RadioControlValueAccessor) {
+    this._accessors.forEach((c) => {
+      if (this._isSameGroup(c, accessor) && c[1] !== accessor) {
+        c[1].fireUncheck(accessor.value);
+      }
+    });
+  }
+
+  private _isSameGroup(
+      controlPair: [NgControl, RadioControlValueAccessor],
+      accessor: RadioControlValueAccessor): boolean {
+    if (!controlPair[0].control) return false;
+    return controlPair[0]._parent === accessor._control._parent &&
+        controlPair[1].name === accessor.name;
+  }
+}
+
+/**
+ * @description
+ *
+ * Writes radio control values and listens to radio control changes.
+ *
+ * Used by `NgModel`, `FormControlDirective`, and `FormControlName`
+ * to keep the view synced with the `FormControl` model.
+ *
+ * If you have imported the `FormsModule` or the `ReactiveFormsModule`, this
+ * value accessor will be active on any radio control that has a form directive. You do
+ * **not** need to add a special selector to activate it.
+ *
+ * ### How to use radio buttons with form directives
+ *
+ * To use radio buttons in a template-driven form, you'll want to ensure that radio buttons
+ * in the same group have the same `name` attribute.  Radio buttons with different `name`
+ * attributes do not affect each other.
+ *
+ * {@example forms/ts/radioButtons/radio_button_example.ts region='TemplateDriven'}
+ *
+ * When using radio buttons in a reactive form, radio buttons in the same group should have the
+ * same `formControlName`. You can also add a `name` attribute, but it's optional.
+ *
+ * {@example forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts region='Reactive'}
+ *
+ *  * **npm package**: `@angular/forms`
+ *
+ *
+ */
+@Directive({
+  selector:
+      'input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]',
+  host: {'(change)': 'onChange()', '(blur)': 'onTouched()'},
+  providers: [RADIO_VALUE_ACCESSOR]
+})
+export class RadioControlValueAccessor implements ControlValueAccessor,
+    OnDestroy, OnInit {
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _state !: boolean;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _control !: NgControl;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _fn !: Function;
+  onChange = () => {};
+  onTouched = () => {};
+
+  // TODO(issue/24571): remove '!'.
+  @Input() name !: string;
+  // TODO(issue/24571): remove '!'.
+  @Input() formControlName !: string;
+  @Input() value: any;
+
+  constructor(
+      private _renderer: Renderer2, private _elementRef: ElementRef,
+      private _registry: RadioControlRegistry, private _injector: Injector) {}
+
+  ngOnInit(): void {
+    this._control = this._injector.get(NgControl);
+    this._checkName();
+    this._registry.add(this._control, this);
+  }
+
+  ngOnDestroy(): void { this._registry.remove(this); }
+
+  writeValue(value: any): void {
+    this._state = value === this.value;
+    this._renderer.setProperty(this._elementRef.nativeElement, 'checked', this._state);
+  }
+
+  registerOnChange(fn: (_: any) => {}): void {
+    this._fn = fn;
+    this.onChange = () => {
+      fn(this.value);
+      this._registry.select(this);
+    };
+  }
+
+  fireUncheck(value: any): void { this.writeValue(value); }
+
+  registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+  }
+
+  private _checkName(): void {
+    if (this.name && this.formControlName && this.name !== this.formControlName) {
+      this._throwNameError();
+    }
+    if (!this.name && this.formControlName) this.name = this.formControlName;
+  }
+
+  private _throwNameError(): void {
+    throw new Error(`
+      If you define both a name and a formControlName attribute on your radio button, their values
+      must match. Ex: <input type="radio" formControlName="food" name="food">
+    `);
+  }
+}
diff --git a/packages/forms/src/directives/range_value_accessor.ts b/packages/forms/src/directives/range_value_accessor.ts
new file mode 100644
index 000000000000..0be4c6ed0d31
--- /dev/null
+++ b/packages/forms/src/directives/range_value_accessor.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 {Directive, ElementRef, Renderer2, StaticProvider, forwardRef} from '@angular/core';
+
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+
+export const RANGE_VALUE_ACCESSOR: StaticProvider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => RangeValueAccessor),
+  multi: true
+};
+
+/**
+ * The accessor for writing a range value and listening to changes that is used by the
+ * `NgModel`, `FormControlDirective`, and `FormControlName` directives.
+ *
+ *  ### Example
+ *  ```
+ *  <input type="range" [(ngModel)]="age" >
+ *  ```
+ */
+@Directive({
+  selector:
+      'input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]',
+  host: {
+    '(change)': 'onChange($event.target.value)',
+    '(input)': 'onChange($event.target.value)',
+    '(blur)': 'onTouched()'
+  },
+  providers: [RANGE_VALUE_ACCESSOR]
+})
+export class RangeValueAccessor implements ControlValueAccessor {
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
+
+  writeValue(value: any): void {
+    this._renderer.setProperty(this._elementRef.nativeElement, 'value', parseFloat(value));
+  }
+
+  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.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
new file mode 100644
index 000000000000..51b9068aae2d
--- /dev/null
+++ b/packages/forms/src/directives/reactive_directives/form_control_directive.ts
@@ -0,0 +1,219 @@
+/**
+ * @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 {Directive, EventEmitter, Inject, InjectionToken, Input, OnChanges, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
+
+import {FormControl} from '../../model';
+import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '../control_value_accessor';
+import {NgControl} from '../ng_control';
+import {ReactiveErrors} from '../reactive_errors';
+import {_ngModelWarning, composeAsyncValidators, composeValidators, isPropertyUpdated, selectValueAccessor, setUpControl} from '../shared';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from '../validators';
+
+
+/**
+ * Token to provide to turn off the ngModel warning on formControl and formControlName.
+ */
+export const NG_MODEL_WITH_FORM_CONTROL_WARNING =
+    new InjectionToken('NgModelWithFormControlWarning');
+
+export const formControlBinding: any = {
+  provide: NgControl,
+  useExisting: forwardRef(() => FormControlDirective)
+};
+
+/**
+ * @description
+ *
+ * Syncs a standalone `FormControl` instance to a form control element.
+ *
+ * This directive ensures that any values written to the `FormControl`
+ * instance programmatically will be written to the DOM element (model -> view). Conversely,
+ * any values written to the DOM element through user input will be reflected in the
+ * `FormControl` instance (view -> model).
+ *
+ * Use this directive if you'd like to create and manage a `FormControl` instance directly.
+ * Simply create a `FormControl`, save it to your component class, and pass it into the
+ * `FormControlDirective`.
+ *
+ * This directive is designed to be used as a standalone control.  Unlike `FormControlName`,
+ * it does not require that your `FormControl` instance be part of any parent
+ * `FormGroup`, and it won't be registered to any `FormGroupDirective` that
+ * exists above it.
+ *
+ * **Get the value**: the `value` property is always synced and available on the
+ * `FormControl` instance. See a full list of available properties in
+ * `AbstractControl`.
+ *
+ * **Set the value**: You can pass in an initial value when instantiating the `FormControl`,
+ * or you can set it programmatically later using {@link AbstractControl#setValue setValue} or
+ * {@link AbstractControl#patchValue 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 valueChanges} event.  You can also listen to
+ * {@link AbstractControl#statusChanges statusChanges} to be notified when the validation status is
+ * re-calculated.
+ *
+ * ### Example
+ *
+ * {@example forms/ts/simpleFormControl/simple_form_control_example.ts region='Component'}
+ *
+ * * **npm package**: `@angular/forms`
+ *
+ * * **NgModule**: `ReactiveFormsModule`
+ *
+ * ### Use with ngModel
+ *
+ * Support for using the `ngModel` input property and `ngModelChange` event with reactive
+ * form directives has been deprecated in Angular v6 and will be removed in Angular v7.
+ *
+ * Now deprecated:
+ * ```html
+ * <input [formControl]="control" [(ngModel)]="value">
+ * ```
+ *
+ * ```ts
+ * this.value = 'some value';
+ * ```
+ *
+ * This has been deprecated for a few reasons. First, developers have found this pattern
+ * confusing. It seems like the actual `ngModel` directive is being used, but in fact it's
+ * an input/output property named `ngModel` on the reactive form directive that simply
+ * approximates (some of) its behavior. Specifically, it allows getting/setting the value
+ * and intercepting value events. However, some of `ngModel`'s other features - like
+ * delaying updates with`ngModelOptions` or exporting the directive - simply don't work,
+ * which has understandably caused some confusion.
+ *
+ * In addition, this pattern mixes template-driven and reactive forms strategies, which
+ * we generally don't recommend because it doesn't take advantage of the full benefits of
+ * either strategy. Setting the value in the template violates the template-agnostic
+ * principles behind reactive forms, whereas adding a `FormControl`/`FormGroup` layer in
+ * the class removes the convenience of defining forms in the template.
+ *
+ * To update your code before v7, you'll want to decide whether to stick with reactive form
+ * directives (and get/set values using reactive forms patterns) or switch over to
+ * template-driven directives.
+ *
+ * After (choice 1 - use reactive forms):
+ *
+ * ```html
+ * <input [formControl]="control">
+ * ```
+ *
+ * ```ts
+ * this.control.setValue('some value');
+ * ```
+ *
+ * After (choice 2 - use template-driven forms):
+ *
+ * ```html
+ * <input [(ngModel)]="value">
+ * ```
+ *
+ * ```ts
+ * this.value = 'some value';
+ * ```
+ *
+ * By default, when you use this pattern, you will see a deprecation warning once in dev
+ * mode. You can choose to silence this warning by providing a config for
+ * `ReactiveFormsModule` at import time:
+ *
+ * ```ts
+ * imports: [
+ *   ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
+ * ]
+ * ```
+ *
+ * Alternatively, you can choose to surface a separate warning for each instance of this
+ * pattern with a config value of `"always"`. This may help to track down where in the code
+ * the pattern is being used as the code is being updated.
+ *
+ *
+ */
+@Directive({selector: '[formControl]', providers: [formControlBinding], exportAs: 'ngForm'})
+
+export class FormControlDirective extends NgControl implements OnChanges {
+  viewModel: any;
+
+  // TODO(issue/24571): remove '!'.
+  @Input('formControl') form !: FormControl;
+
+  @Input('disabled')
+  set isDisabled(isDisabled: boolean) { ReactiveErrors.disabledAttrWarning(); }
+
+  // TODO(kara): remove next 4 properties once deprecation period is over
+
+  /** @deprecated as of v6 */
+  @Input('ngModel') model: any;
+
+  /** @deprecated as of v6 */
+  @Output('ngModelChange') update = new EventEmitter();
+
+  /**
+   * Static property used to track whether any ngModel warnings have been sent across
+   * all instances of FormControlDirective. Used to support warning config of "once".
+   *
+   * @internal
+   */
+  static _ngModelWarningSentOnce = false;
+
+  /**
+   * Instance property used to track whether an ngModel warning has been sent out for this
+   * particular FormControlDirective instance. Used to support warning config of "always".
+   *
+   * @internal
+   */
+  _ngModelWarningSent = false;
+
+  constructor(@Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
+              @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<AsyncValidator|AsyncValidatorFn>,
+              @Optional() @Self() @Inject(NG_VALUE_ACCESSOR)
+              valueAccessors: ControlValueAccessor[],
+              @Optional() @Inject(NG_MODEL_WITH_FORM_CONTROL_WARNING) private _ngModelWarningConfig: string|null) {
+                super();
+                this._rawValidators = validators || [];
+                this._rawAsyncValidators = asyncValidators || [];
+                this.valueAccessor = selectValueAccessor(this, valueAccessors);
+              }
+
+              ngOnChanges(changes: SimpleChanges): void {
+                if (this._isControlChanged(changes)) {
+                  setUpControl(this.form, this);
+                  if (this.control.disabled && this.valueAccessor !.setDisabledState) {
+                    this.valueAccessor !.setDisabledState !(true);
+                  }
+                  this.form.updateValueAndValidity({emitEvent: false});
+                }
+                if (isPropertyUpdated(changes, this.viewModel)) {
+                  _ngModelWarning(
+                      'formControl', FormControlDirective, this, this._ngModelWarningConfig);
+                  this.form.setValue(this.model);
+                  this.viewModel = this.model;
+                }
+              }
+
+              get path(): string[] { return []; }
+
+              get validator(): ValidatorFn|null { return composeValidators(this._rawValidators); }
+
+              get asyncValidator(): AsyncValidatorFn|null {
+                return composeAsyncValidators(this._rawAsyncValidators);
+              }
+
+              get control(): FormControl { return this.form; }
+
+              viewToModelUpdate(newValue: any): void {
+                this.viewModel = newValue;
+                this.update.emit(newValue);
+              }
+
+              private _isControlChanged(changes: {[key: string]: any}): boolean {
+                return changes.hasOwnProperty('form');
+              }
+}
diff --git a/packages/forms/src/directives/reactive_directives/form_control_name.ts b/packages/forms/src/directives/reactive_directives/form_control_name.ts
new file mode 100644
index 000000000000..66cfa050e735
--- /dev/null
+++ b/packages/forms/src/directives/reactive_directives/form_control_name.ts
@@ -0,0 +1,253 @@
+/**
+ * @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 {Directive, EventEmitter, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, SkipSelf, forwardRef} from '@angular/core';
+
+import {FormControl} from '../../model';
+import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
+import {AbstractFormGroupDirective} from '../abstract_form_group_directive';
+import {ControlContainer} from '../control_container';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '../control_value_accessor';
+import {NgControl} from '../ng_control';
+import {ReactiveErrors} from '../reactive_errors';
+import {_ngModelWarning, composeAsyncValidators, composeValidators, controlPath, isPropertyUpdated, selectValueAccessor} from '../shared';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from '../validators';
+
+import {NG_MODEL_WITH_FORM_CONTROL_WARNING} from './form_control_directive';
+import {FormGroupDirective} from './form_group_directive';
+import {FormArrayName, FormGroupName} from './form_group_name';
+
+export const controlNameBinding: any = {
+  provide: NgControl,
+  useExisting: forwardRef(() => FormControlName)
+};
+
+/**
+ * @description
+ *
+ * Syncs a `FormControl` in an existing `FormGroup` to a form control
+ * element by name.
+ *
+ * This directive ensures that any values written to the `FormControl`
+ * instance programmatically will be written to the DOM element (model -> view). Conversely,
+ * any values written to the DOM element through user input will be reflected in the
+ * `FormControl` instance (view -> model).
+ *
+ * This directive is designed to be used with a parent `FormGroupDirective` (selector:
+ * `[formGroup]`).
+ *
+ * It accepts the string name of the `FormControl` instance you want to
+ * link, and will look for a `FormControl` registered with that name in the
+ * closest `FormGroup` or `FormArray` above it.
+ *
+ * **Access the control**: You can access the `FormControl` associated with
+ * this directive by using the {@link AbstractControl#get get} method.
+ * Ex: `this.form.get('first');`
+ *
+ * **Get value**: the `value` property is always synced and available on the `FormControl`.
+ * See a full list of available properties in `AbstractControl`.
+ *
+ *  **Set value**: You can set an initial value for the control when instantiating the
+ *  `FormControl`, or you can set it programmatically later using
+ *  {@link AbstractControl#setValue setValue} or {@link AbstractControl#patchValue 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 valueChanges} event.  You can also listen to
+ * {@link AbstractControl#statusChanges statusChanges} to be notified when the validation status is
+ * re-calculated.
+ *
+ * ### Example
+ *
+ * In this example, we create form controls for first name and last name.
+ *
+ * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
+ *
+ * To see `formControlName` examples with different form control types, see:
+ *
+ * * Radio buttons: `RadioControlValueAccessor`
+ * * Selects: `SelectControlValueAccessor`
+ *
+ * **npm package**: `@angular/forms`
+ *
+ * **NgModule**: `ReactiveFormsModule`
+ *
+ * ### Use with ngModel
+ *
+ * Support for using the `ngModel` input property and `ngModelChange` event with reactive
+ * form directives has been deprecated in Angular v6 and will be removed in Angular v7.
+ *
+ * Now deprecated:
+ * ```html
+ * <form [formGroup]="form">
+ *   <input formControlName="first" [(ngModel)]="value">
+ * </form>
+ * ```
+ *
+ * ```ts
+ * this.value = 'some value';
+ * ```
+ *
+ * This has been deprecated for a few reasons. First, developers have found this pattern
+ * confusing. It seems like the actual `ngModel` directive is being used, but in fact it's
+ * an input/output property named `ngModel` on the reactive form directive that simply
+ * approximates (some of) its behavior. Specifically, it allows getting/setting the value
+ * and intercepting value events. However, some of `ngModel`'s other features - like
+ * delaying updates with`ngModelOptions` or exporting the directive - simply don't work,
+ * which has understandably caused some confusion.
+ *
+ * In addition, this pattern mixes template-driven and reactive forms strategies, which
+ * we generally don't recommend because it doesn't take advantage of the full benefits of
+ * either strategy. Setting the value in the template violates the template-agnostic
+ * principles behind reactive forms, whereas adding a `FormControl`/`FormGroup` layer in
+ * the class removes the convenience of defining forms in the template.
+ *
+ * To update your code before v7, you'll want to decide whether to stick with reactive form
+ * directives (and get/set values using reactive forms patterns) or switch over to
+ * template-driven directives.
+ *
+ * After (choice 1 - use reactive forms):
+ *
+ * ```html
+ * <form [formGroup]="form">
+ *   <input formControlName="first">
+ * </form>
+ * ```
+ *
+ * ```ts
+ * this.form.get('first').setValue('some value');
+ * ```
+ *
+ * After (choice 2 - use template-driven forms):
+ *
+ * ```html
+ * <input [(ngModel)]="value">
+ * ```
+ *
+ * ```ts
+ * this.value = 'some value';
+ * ```
+ *
+ * By default, when you use this pattern, you will see a deprecation warning once in dev
+ * mode. You can choose to silence this warning by providing a config for
+ * `ReactiveFormsModule` at import time:
+ *
+ * ```ts
+ * imports: [
+ *   ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
+ * ]
+ * ```
+ *
+ * Alternatively, you can choose to surface a separate warning for each instance of this
+ * pattern with a config value of `"always"`. This may help to track down where in the code
+ * the pattern is being used as the code is being updated.
+ *
+ *
+ */
+@Directive({selector: '[formControlName]', providers: [controlNameBinding]})
+export class FormControlName extends NgControl implements OnChanges, OnDestroy {
+  private _added = false;
+  /** @internal */
+  viewModel: any;
+  // TODO(issue/24571): remove '!'.
+  readonly control !: FormControl;
+
+  // TODO(issue/24571): remove '!'.
+  @Input('formControlName') name !: string;
+
+  @Input('disabled')
+  set isDisabled(isDisabled: boolean) { ReactiveErrors.disabledAttrWarning(); }
+
+  // TODO(kara): remove next 4 properties once deprecation period is over
+
+  /** @deprecated as of v6 */
+  @Input('ngModel') model: any;
+
+  /** @deprecated as of v6 */
+  @Output('ngModelChange') update = new EventEmitter();
+
+  /**
+   * Static property used to track whether any ngModel warnings have been sent across
+   * all instances of FormControlName. Used to support warning config of "once".
+   *
+   * @internal
+   */
+  static _ngModelWarningSentOnce = false;
+
+  /**
+   * Instance property used to track whether an ngModel warning has been sent out for this
+   * particular FormControlName instance. Used to support warning config of "always".
+   *
+   * @internal
+   */
+  _ngModelWarningSent = false;
+
+  constructor(
+      @Optional() @Host() @SkipSelf() parent: ControlContainer,
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
+          Array<AsyncValidator|AsyncValidatorFn>,
+      @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
+      @Optional() @Inject(NG_MODEL_WITH_FORM_CONTROL_WARNING) private _ngModelWarningConfig: string|
+      null) {
+    super();
+    this._parent = parent;
+    this._rawValidators = validators || [];
+    this._rawAsyncValidators = asyncValidators || [];
+    this.valueAccessor = selectValueAccessor(this, valueAccessors);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this._added) this._setUpControl();
+    if (isPropertyUpdated(changes, this.viewModel)) {
+      _ngModelWarning('formControlName', FormControlName, this, this._ngModelWarningConfig);
+      this.viewModel = this.model;
+      this.formDirective.updateModel(this, this.model);
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.formDirective) {
+      this.formDirective.removeControl(this);
+    }
+  }
+
+  viewToModelUpdate(newValue: any): void {
+    this.viewModel = newValue;
+    this.update.emit(newValue);
+  }
+
+  get path(): string[] { return controlPath(this.name, this._parent !); }
+
+  get formDirective(): any { return this._parent ? this._parent.formDirective : null; }
+
+  get validator(): ValidatorFn|null { return composeValidators(this._rawValidators); }
+
+  get asyncValidator(): AsyncValidatorFn {
+    return composeAsyncValidators(this._rawAsyncValidators) !;
+  }
+
+  private _checkParentType(): void {
+    if (!(this._parent instanceof FormGroupName) &&
+        this._parent instanceof AbstractFormGroupDirective) {
+      ReactiveErrors.ngModelGroupException();
+    } else if (
+        !(this._parent instanceof FormGroupName) && !(this._parent instanceof FormGroupDirective) &&
+        !(this._parent instanceof FormArrayName)) {
+      ReactiveErrors.controlParentException();
+    }
+  }
+
+  private _setUpControl() {
+    this._checkParentType();
+    (this as{control: FormControl}).control = this.formDirective.addControl(this);
+    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
new file mode 100644
index 000000000000..05b244ac5953
--- /dev/null
+++ b/packages/forms/src/directives/reactive_directives/form_group_directive.ts
@@ -0,0 +1,184 @@
+/**
+ * @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 {Directive, EventEmitter, Inject, Input, OnChanges, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
+import {FormArray, FormControl, FormGroup} from '../../model';
+import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../../validators';
+import {ControlContainer} from '../control_container';
+import {Form} from '../form_interface';
+import {ReactiveErrors} from '../reactive_errors';
+import {cleanUpControl, composeAsyncValidators, composeValidators, removeDir, setUpControl, setUpFormContainer, syncPendingControls} from '../shared';
+
+import {FormControlName} from './form_control_name';
+import {FormArrayName, FormGroupName} from './form_group_name';
+
+export const formDirectiveProvider: any = {
+  provide: ControlContainer,
+  useExisting: forwardRef(() => FormGroupDirective)
+};
+
+/**
+ * @description
+ *
+ * Binds an existing `FormGroup` to a DOM element.
+ *
+ * This directive accepts an existing `FormGroup` instance. It will then use this
+ * `FormGroup` instance to match any child `FormControl`, `FormGroup`,
+ * and `FormArray` instances to child `FormControlName`, `FormGroupName`,
+ * and `FormArrayName` directives.
+ *
+ * **Set value**: You can set the form's initial value when instantiating the
+ * `FormGroup`, or you can set it programmatically later using the `FormGroup`'s
+ * {@link AbstractControl#setValue setValue} or {@link AbstractControl#patchValue patchValue}
+ * methods.
+ *
+ * **Listen to value**: If you want to listen to changes in the value of the form, you can subscribe
+ * to the `FormGroup`'s {@link AbstractControl#valueChanges valueChanges} event.  You can also
+ * listen to its {@link AbstractControl#statusChanges 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
+ * triggered a form submission. The `ngSubmit` event will be emitted with the original form
+ * submission event.
+ *
+ * ### Example
+ *
+ * In this example, we create form controls for first name and last name.
+ *
+ * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
+ *
+ * **npm package**: `@angular/forms`
+ *
+ * **NgModule**: `ReactiveFormsModule`
+ *
+ *
+ */
+@Directive({
+  selector: '[formGroup]',
+  providers: [formDirectiveProvider],
+  host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
+  exportAs: 'ngForm'
+})
+export class FormGroupDirective extends ControlContainer implements Form,
+    OnChanges {
+  public readonly submitted: boolean = false;
+
+  // TODO(issue/24571): remove '!'.
+  private _oldForm !: FormGroup;
+  directives: FormControlName[] = [];
+
+  @Input('formGroup') form: FormGroup = null !;
+  @Output() ngSubmit = new EventEmitter();
+
+  constructor(
+      @Optional() @Self() @Inject(NG_VALIDATORS) private _validators: any[],
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) private _asyncValidators: any[]) {
+    super();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this._checkFormPresent();
+    if (changes.hasOwnProperty('form')) {
+      this._updateValidators();
+      this._updateDomValue();
+      this._updateRegistrations();
+    }
+  }
+
+  get formDirective(): Form { return this; }
+
+  get control(): FormGroup { return this.form; }
+
+  get path(): string[] { return []; }
+
+  addControl(dir: FormControlName): FormControl {
+    const ctrl: any = this.form.get(dir.path);
+    setUpControl(ctrl, dir);
+    ctrl.updateValueAndValidity({emitEvent: false});
+    this.directives.push(dir);
+    return ctrl;
+  }
+
+  getControl(dir: FormControlName): FormControl { return <FormControl>this.form.get(dir.path); }
+
+  removeControl(dir: FormControlName): void { removeDir<FormControlName>(this.directives, dir); }
+
+  addFormGroup(dir: FormGroupName): void {
+    const ctrl: any = this.form.get(dir.path);
+    setUpFormContainer(ctrl, dir);
+    ctrl.updateValueAndValidity({emitEvent: false});
+  }
+
+  removeFormGroup(dir: FormGroupName): void {}
+
+  getFormGroup(dir: FormGroupName): FormGroup { return <FormGroup>this.form.get(dir.path); }
+
+  addFormArray(dir: FormArrayName): void {
+    const ctrl: any = this.form.get(dir.path);
+    setUpFormContainer(ctrl, dir);
+    ctrl.updateValueAndValidity({emitEvent: false});
+  }
+
+  removeFormArray(dir: FormArrayName): void {}
+
+  getFormArray(dir: FormArrayName): FormArray { return <FormArray>this.form.get(dir.path); }
+
+  updateModel(dir: FormControlName, value: any): void {
+    const ctrl  = <FormControl>this.form.get(dir.path);
+    ctrl.setValue(value);
+  }
+
+  onSubmit($event: Event): boolean {
+    (this as{submitted: boolean}).submitted = true;
+    syncPendingControls(this.form, this.directives);
+    this.ngSubmit.emit($event);
+    return false;
+  }
+
+  onReset(): void { this.resetForm(); }
+
+  resetForm(value: any = undefined): void {
+    this.form.reset(value);
+    (this as{submitted: boolean}).submitted = false;
+  }
+
+
+  /** @internal */
+  _updateDomValue() {
+    this.directives.forEach(dir => {
+      const newCtrl: any = this.form.get(dir.path);
+      if (dir.control !== newCtrl) {
+        cleanUpControl(dir.control, dir);
+        if (newCtrl) setUpControl(newCtrl, dir);
+        (dir as{control: FormControl}).control = newCtrl;
+      }
+    });
+
+    this.form._updateTreeValidity({emitEvent: false});
+  }
+
+  private _updateRegistrations() {
+    this.form._registerOnCollectionChange(() => this._updateDomValue());
+    if (this._oldForm) this._oldForm._registerOnCollectionChange(() => {});
+    this._oldForm = this.form;
+  }
+
+  private _updateValidators() {
+    const sync = composeValidators(this._validators);
+    this.form.validator = Validators.compose([this.form.validator !, sync !]);
+
+    const async = composeAsyncValidators(this._asyncValidators);
+    this.form.asyncValidator = Validators.composeAsync([this.form.asyncValidator !, async !]);
+  }
+
+  private _checkFormPresent() {
+    if (!this.form) {
+      ReactiveErrors.missingFormException();
+    }
+  }
+}
diff --git a/packages/forms/src/directives/reactive_directives/form_group_name.ts b/packages/forms/src/directives/reactive_directives/form_group_name.ts
new file mode 100644
index 000000000000..b53d1464ab4b
--- /dev/null
+++ b/packages/forms/src/directives/reactive_directives/form_group_name.ts
@@ -0,0 +1,204 @@
+/**
+ * @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 {Directive, Host, Inject, Input, OnDestroy, OnInit, Optional, Self, SkipSelf, forwardRef} from '@angular/core';
+
+import {FormArray} from '../../model';
+import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
+import {AbstractFormGroupDirective} from '../abstract_form_group_directive';
+import {ControlContainer} from '../control_container';
+import {ReactiveErrors} from '../reactive_errors';
+import {composeAsyncValidators, composeValidators, controlPath} from '../shared';
+import {AsyncValidatorFn, ValidatorFn} from '../validators';
+
+import {FormGroupDirective} from './form_group_directive';
+
+export const formGroupNameProvider: any = {
+  provide: ControlContainer,
+  useExisting: forwardRef(() => FormGroupName)
+};
+
+/**
+ * @description
+ *
+ * Syncs a nested `FormGroup` to a DOM element.
+ *
+ * This directive can only be used with a parent `FormGroupDirective` (selector:
+ * `[formGroup]`).
+ *
+ * It accepts the string name of the nested `FormGroup` you want to link, and
+ * will look for a `FormGroup` registered with that name in the parent
+ * `FormGroup` instance you passed into `FormGroupDirective`.
+ *
+ * Nested form groups can come in handy when you want to validate a sub-group of a
+ * form separately from the rest or when you'd like to group the values of certain
+ * controls into their own nested object.
+ *
+ * **Access the group**: You can access the associated `FormGroup` using the
+ * {@link AbstractControl#get 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')`
+ *
+ * **Get the value**: the `value` property is always synced and available on the
+ * `FormGroup`. See a full list of available properties in `AbstractControl`.
+ *
+ * **Set the value**: You can set an initial value for each child control when instantiating
+ * the `FormGroup`, or you can set it programmatically later using
+ * {@link AbstractControl#setValue setValue} or {@link AbstractControl#patchValue 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 valueChanges} event.  You can also listen to
+ * {@link AbstractControl#statusChanges statusChanges} to be notified when the validation status is
+ * re-calculated.
+ *
+ * ### Example
+ *
+ * {@example forms/ts/nestedFormGroup/nested_form_group_example.ts region='Component'}
+ *
+ * * **npm package**: `@angular/forms`
+ *
+ * * **NgModule**: `ReactiveFormsModule`
+ *
+ *
+ */
+@Directive({selector: '[formGroupName]', providers: [formGroupNameProvider]})
+export class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy {
+  // TODO(issue/24571): remove '!'.
+  @Input('formGroupName') name !: string;
+
+  constructor(
+      @Optional() @Host() @SkipSelf() parent: ControlContainer,
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) {
+    super();
+    this._parent = parent;
+    this._validators = validators;
+    this._asyncValidators = asyncValidators;
+  }
+
+  /** @internal */
+  _checkParentType(): void {
+    if (_hasInvalidParent(this._parent)) {
+      ReactiveErrors.groupParentException();
+    }
+  }
+}
+
+export const formArrayNameProvider: any = {
+  provide: ControlContainer,
+  useExisting: forwardRef(() => FormArrayName)
+};
+
+/**
+ * @description
+ *
+ * Syncs a nested `FormArray` to a DOM element.
+ *
+ * This directive is designed to be used with a parent `FormGroupDirective` (selector:
+ * `[formGroup]`).
+ *
+ * It accepts the string name of the nested `FormArray` you want to link, and
+ * will look for a `FormArray` registered with that name in the parent
+ * `FormGroup` instance you passed into `FormGroupDirective`.
+ *
+ * Nested form arrays can come in handy when you have a group of form controls but
+ * you're not sure how many there will be. Form arrays allow you to create new
+ * form controls dynamically.
+ *
+ * **Access the array**: You can access the associated `FormArray` using the
+ * {@link AbstractControl#get get} method on the parent `FormGroup`.
+ * Ex: `this.form.get('cities')`.
+ *
+ * **Get the value**: the `value` property is always synced and available on the
+ * `FormArray`. See a full list of available properties in `AbstractControl`.
+ *
+ * **Set the value**: You can set an initial value for each child control when instantiating
+ * the `FormArray`, or you can set the value programmatically later using the
+ * `FormArray`'s {@link AbstractControl#setValue setValue} or
+ * {@link AbstractControl#patchValue patchValue} methods.
+ *
+ * **Listen to value**: If you want to listen to changes in the value of the array, you can
+ * subscribe to the `FormArray`'s {@link AbstractControl#valueChanges valueChanges} event.
+ * You can also listen to its {@link AbstractControl#statusChanges statusChanges} event to be
+ * notified when the validation status is re-calculated.
+ *
+ * **Add new controls**: You can add new controls to the `FormArray` dynamically by calling
+ * its {@link FormArray#push push} method.
+ * Ex: `this.form.get('cities').push(new FormControl());`
+ *
+ * ### Example
+ *
+ * {@example forms/ts/nestedFormArray/nested_form_array_example.ts region='Component'}
+ *
+ * * **npm package**: `@angular/forms`
+ *
+ * * **NgModule**: `ReactiveFormsModule`
+ *
+ *
+ */
+@Directive({selector: '[formArrayName]', providers: [formArrayNameProvider]})
+export class FormArrayName extends ControlContainer implements OnInit, OnDestroy {
+  /** @internal */
+  _parent: ControlContainer;
+
+  /** @internal */
+  _validators: any[];
+
+  /** @internal */
+  _asyncValidators: any[];
+
+  // TODO(issue/24571): remove '!'.
+  @Input('formArrayName') name !: string;
+
+  constructor(
+      @Optional() @Host() @SkipSelf() parent: ControlContainer,
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) {
+    super();
+    this._parent = parent;
+    this._validators = validators;
+    this._asyncValidators = asyncValidators;
+  }
+
+  ngOnInit(): void {
+    this._checkParentType();
+    this.formDirective !.addFormArray(this);
+  }
+
+  ngOnDestroy(): void {
+    if (this.formDirective) {
+      this.formDirective.removeFormArray(this);
+    }
+  }
+
+  get control(): FormArray { return this.formDirective !.getFormArray(this); }
+
+  get formDirective(): FormGroupDirective|null {
+    return this._parent ? <FormGroupDirective>this._parent.formDirective : null;
+  }
+
+  get path(): string[] { return controlPath(this.name, this._parent); }
+
+  get validator(): ValidatorFn|null { return composeValidators(this._validators); }
+
+  get asyncValidator(): AsyncValidatorFn|null {
+    return composeAsyncValidators(this._asyncValidators);
+  }
+
+  private _checkParentType(): void {
+    if (_hasInvalidParent(this._parent)) {
+      ReactiveErrors.arrayParentException();
+    }
+  }
+}
+
+function _hasInvalidParent(parent: ControlContainer): boolean {
+  return !(parent instanceof FormGroupName) && !(parent instanceof FormGroupDirective) &&
+      !(parent instanceof FormArrayName);
+}
diff --git a/packages/forms/src/directives/reactive_errors.ts b/packages/forms/src/directives/reactive_errors.ts
new file mode 100644
index 000000000000..acca6a319f49
--- /dev/null
+++ b/packages/forms/src/directives/reactive_errors.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 {FormErrorExamples as Examples} from './error_examples';
+
+export class ReactiveErrors {
+  static controlParentException(): void {
+    throw new Error(
+        `formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
+       directive and pass it an existing FormGroup instance (you can create one in your class).
+
+      Example:
+
+      ${Examples.formControlName}`);
+  }
+
+  static ngModelGroupException(): void {
+    throw new Error(
+        `formControlName cannot be used with an ngModelGroup parent. It is only compatible with parents
+       that also have a "form" prefix: formGroupName, formArrayName, or formGroup.
+
+       Option 1:  Update the parent to be formGroupName (reactive form strategy)
+
+        ${Examples.formGroupName}
+
+        Option 2: Use ngModel instead of formControlName (template-driven strategy)
+
+        ${Examples.ngModelGroup}`);
+  }
+  static missingFormException(): void {
+    throw new Error(`formGroup expects a FormGroup instance. Please pass one in.
+
+       Example:
+
+       ${Examples.formControlName}`);
+  }
+
+  static groupParentException(): void {
+    throw new Error(
+        `formGroupName must be used with a parent formGroup directive.  You'll want to add a formGroup
+      directive and pass it an existing FormGroup instance (you can create one in your class).
+
+      Example:
+
+      ${Examples.formGroupName}`);
+  }
+
+  static arrayParentException(): void {
+    throw new Error(
+        `formArrayName must be used with a parent formGroup directive.  You'll want to add a formGroup
+       directive and pass it an existing FormGroup instance (you can create one in your class).
+
+        Example:
+
+        ${Examples.formArrayName}`);
+  }
+
+  static disabledAttrWarning(): void {
+    console.warn(`
+      It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
+      when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
+      you. We recommend using this approach to avoid 'changed after checked' errors.
+       
+      Example: 
+      form = new FormGroup({
+        first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
+        last: new FormControl('Drew', Validators.required)
+      });
+    `);
+  }
+
+  static ngModelWarning(directiveName: string): void {
+    console.warn(`
+    It looks like you're using ngModel on the same form field as ${directiveName}. 
+    Support for using the ngModel input property and ngModelChange event with 
+    reactive form directives has been deprecated in Angular v6 and will be removed 
+    in Angular v7.
+    
+    For more information on this, see our API docs here:
+    https://angular.io/api/forms/${directiveName === 'formControl' ? 'FormControlDirective' 
+      : 'FormControlName'}#use-with-ngmodel
+    `);
+  }
+}
diff --git a/packages/forms/src/directives/select_control_value_accessor.ts b/packages/forms/src/directives/select_control_value_accessor.ts
new file mode 100644
index 000000000000..1597ae8872be
--- /dev/null
+++ b/packages/forms/src/directives/select_control_value_accessor.ts
@@ -0,0 +1,205 @@
+/**
+ * @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 {Directive, ElementRef, Host, Input, OnDestroy, Optional, Renderer2, StaticProvider, forwardRef, ɵlooseIdentical as looseIdentical} from '@angular/core';
+
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+
+export const SELECT_VALUE_ACCESSOR: StaticProvider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => SelectControlValueAccessor),
+  multi: true
+};
+
+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);
+}
+
+function _extractId(valueString: string): string {
+  return valueString.split(':')[0];
+}
+
+/**
+ * @description
+ *
+ * Writes values and listens to changes on a select element.
+ *
+ * Used by `NgModel`, `FormControlDirective`, and `FormControlName`
+ * to keep the view synced with the `FormControl` model.
+ *
+ * If you have imported the `FormsModule` or the `ReactiveFormsModule`, this
+ * value accessor will be active on any select control that has a form directive. You do
+ * **not** need to add a special selector to activate it.
+ *
+ * ### How to use select controls with form directives
+ *
+ * To use a select in a template-driven form, simply add an `ngModel` and a `name`
+ * attribute to the main `<select>` tag.
+ *
+ * If your option values are simple strings, you can bind to the normal `value` property
+ * on the option.  If your option values happen to be objects (and you'd like to save the
+ * selection in your form as an object), use `ngValue` instead:
+ *
+ * {@example forms/ts/selectControl/select_control_example.ts region='Component'}
+ *
+ * In reactive forms, you'll also want to add your form directive (`formControlName` or
+ * `formControl`) on the main `<select>` tag. Like in the former example, you have the
+ * choice of binding to the  `value` or `ngValue` property on the select's options.
+ *
+ * {@example forms/ts/reactiveSelectControl/reactive_select_control_example.ts region='Component'}
+ *
+ * ### Caveat: Option selection
+ *
+ * Angular uses object identity to select option. It's possible for the identities of items
+ * to change while the data does not. This can happen, for example, if the items are produced
+ * from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the
+ * second response will produce objects with different identities.
+ *
+ * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
+ * `compareWith` takes a **function** which has two arguments: `option1` and `option2`.
+ * If `compareWith` is given, Angular selects option by the return value of the function.
+ *
+ * #### Syntax
+ *
+ * ```
+ * <select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
+ *     <option *ngFor="let country of countries" [ngValue]="country">
+ *         {{country.name}}
+ *     </option>
+ * </select>
+ *
+ * compareFn(c1: Country, c2: Country): boolean {
+ *     return c1 && c2 ? c1.id === c2.id : c1 === c2;
+ * }
+ * ```
+ *
+ * Note: We listen to the 'change' event because 'input' events aren't fired
+ * for selects in Firefox and IE:
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1024350
+ * https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/
+ *
+ * * **npm package**: `@angular/forms`
+ *
+ *
+ */
+@Directive({
+  selector:
+      'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
+  host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
+  providers: [SELECT_VALUE_ACCESSOR]
+})
+export class SelectControlValueAccessor implements ControlValueAccessor {
+  value: any;
+  /** @internal */
+  _optionMap: Map<string, any> = new Map<string, any>();
+  /** @internal */
+  _idCounter: number = 0;
+
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  @Input()
+  set compareWith(fn: (o1: any, o2: any) => boolean) {
+    if (typeof fn !== 'function') {
+      throw new Error(`compareWith must be a function, but received ${JSON.stringify(fn)}`);
+    }
+    this._compareWith = fn;
+  }
+
+  private _compareWith: (o1: any, o2: any) => boolean = looseIdentical;
+
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
+
+  writeValue(value: any): void {
+    this.value = value;
+    const id: string|null = this._getOptionId(value);
+    if (id == null) {
+      this._renderer.setProperty(this._elementRef.nativeElement, 'selectedIndex', -1);
+    }
+    const valueString = _buildValueString(id, value);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'value', valueString);
+  }
+
+  registerOnChange(fn: (value: any) => any): void {
+    this.onChange = (valueString: string) => {
+      this.value = this._getOptionValue(valueString);
+      fn(this.value);
+    };
+  }
+  registerOnTouched(fn: () => any): void { this.onTouched = fn; }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+  }
+
+  /** @internal */
+  _registerOption(): string { return (this._idCounter++).toString(); }
+
+  /** @internal */
+  _getOptionId(value: any): string|null {
+    for (const id of Array.from(this._optionMap.keys())) {
+      if (this._compareWith(this._optionMap.get(id), value)) return id;
+    }
+    return null;
+  }
+
+  /** @internal */
+  _getOptionValue(valueString: string): any {
+    const id: string = _extractId(valueString);
+    return this._optionMap.has(id) ? this._optionMap.get(id) : valueString;
+  }
+}
+
+/**
+ * @description
+ *
+ * Marks `<option>` as dynamic, so Angular can be notified when options change.
+ *
+ * See docs for `SelectControlValueAccessor` for usage examples.
+ *
+ *
+ */
+@Directive({selector: 'option'})
+export class NgSelectOption implements OnDestroy {
+  // TODO(issue/24571): remove '!'.
+  id !: string;
+
+  constructor(
+      private _element: ElementRef, private _renderer: Renderer2,
+      @Optional() @Host() private _select: SelectControlValueAccessor) {
+    if (this._select) this.id = this._select._registerOption();
+  }
+
+  @Input('ngValue')
+  set ngValue(value: any) {
+    if (this._select == null) return;
+    this._select._optionMap.set(this.id, value);
+    this._setElementValue(_buildValueString(this.id, value));
+    this._select.writeValue(this._select.value);
+  }
+
+  @Input('value')
+  set value(value: any) {
+    this._setElementValue(value);
+    if (this._select) this._select.writeValue(this._select.value);
+  }
+
+  /** @internal */
+  _setElementValue(value: string): void {
+    this._renderer.setProperty(this._element.nativeElement, 'value', value);
+  }
+
+  ngOnDestroy(): void {
+    if (this._select) {
+      this._select._optionMap.delete(this.id);
+      this._select.writeValue(this._select.value);
+    }
+  }
+}
diff --git a/packages/forms/src/directives/select_multiple_control_value_accessor.ts b/packages/forms/src/directives/select_multiple_control_value_accessor.ts
new file mode 100644
index 000000000000..d30433b1aaf6
--- /dev/null
+++ b/packages/forms/src/directives/select_multiple_control_value_accessor.ts
@@ -0,0 +1,229 @@
+/**
+ * @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 {Directive, ElementRef, Host, Input, OnDestroy, Optional, Renderer2, StaticProvider, forwardRef, ɵlooseIdentical as looseIdentical} from '@angular/core';
+
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+
+export const SELECT_MULTIPLE_VALUE_ACCESSOR: StaticProvider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => SelectMultipleControlValueAccessor),
+  multi: true
+};
+
+function _buildValueString(id: string, value: any): string {
+  if (id == null) return `${value}`;
+  if (typeof value === 'string') value = `'${value}'`;
+  if (value && typeof value === 'object') value = 'Object';
+  return `${id}: ${value}`.slice(0, 50);
+}
+
+function _extractId(valueString: string): string {
+  return valueString.split(':')[0];
+}
+
+/** Mock interface for HTML Options */
+interface HTMLOption {
+  value: string;
+  selected: boolean;
+}
+
+/** Mock interface for HTMLCollection */
+abstract class HTMLCollection {
+  // TODO(issue/24571): remove '!'.
+  length !: number;
+  abstract item(_: number): HTMLOption;
+}
+
+/**
+ * The accessor for writing a value and listening to changes on a select element.
+ *
+ *  ### Caveat: Options selection
+ *
+ * Angular uses object identity to select options. It's possible for the identities of items
+ * to change while the data does not. This can happen, for example, if the items are produced
+ * from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the
+ * second response will produce objects with different identities.
+ *
+ * To customize the default option comparison algorithm, `<select multiple>` supports `compareWith`
+ * input. `compareWith` takes a **function** which has two arguments: `option1` and `option2`.
+ * If `compareWith` is given, Angular selects options by the return value of the function.
+ *
+ * #### Syntax
+ *
+ * ```
+ * <select multiple [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
+ *     <option *ngFor="let country of countries" [ngValue]="country">
+ *         {{country.name}}
+ *     </option>
+ * </select>
+ *
+ * compareFn(c1: Country, c2: Country): boolean {
+ *     return c1 && c2 ? c1.id === c2.id : c1 === c2;
+ * }
+ * ```
+ *
+ *
+ */
+@Directive({
+  selector:
+      'select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]',
+  host: {'(change)': 'onChange($event.target)', '(blur)': 'onTouched()'},
+  providers: [SELECT_MULTIPLE_VALUE_ACCESSOR]
+})
+export class SelectMultipleControlValueAccessor implements ControlValueAccessor {
+  value: any;
+  /** @internal */
+  _optionMap: Map<string, NgSelectMultipleOption> = new Map<string, NgSelectMultipleOption>();
+  /** @internal */
+  _idCounter: number = 0;
+
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  @Input()
+  set compareWith(fn: (o1: any, o2: any) => boolean) {
+    if (typeof fn !== 'function') {
+      throw new Error(`compareWith must be a function, but received ${JSON.stringify(fn)}`);
+    }
+    this._compareWith = fn;
+  }
+
+  private _compareWith: (o1: any, o2: any) => boolean = looseIdentical;
+
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
+
+  writeValue(value: any): void {
+    this.value = value;
+    let optionSelectedStateSetter: (opt: NgSelectMultipleOption, o: any) => void;
+    if (Array.isArray(value)) {
+      // convert values to ids
+      const ids = value.map((v) => this._getOptionId(v));
+      optionSelectedStateSetter = (opt, o) => { opt._setSelected(ids.indexOf(o.toString()) > -1); };
+    } else {
+      optionSelectedStateSetter = (opt, o) => { opt._setSelected(false); };
+    }
+    this._optionMap.forEach(optionSelectedStateSetter);
+  }
+
+  registerOnChange(fn: (value: any) => any): void {
+    this.onChange = (_: any) => {
+      const selected: Array<any> = [];
+      if (_.hasOwnProperty('selectedOptions')) {
+        const options: HTMLCollection = _.selectedOptions;
+        for (let i = 0; i < options.length; i++) {
+          const opt: any = options.item(i);
+          const val: any = this._getOptionValue(opt.value);
+          selected.push(val);
+        }
+      }
+      // Degrade on IE
+      else {
+        const options: HTMLCollection = <HTMLCollection>_.options;
+        for (let i = 0; i < options.length; i++) {
+          const opt: HTMLOption = options.item(i);
+          if (opt.selected) {
+            const val: any = this._getOptionValue(opt.value);
+            selected.push(val);
+          }
+        }
+      }
+      this.value = selected;
+      fn(selected);
+    };
+  }
+  registerOnTouched(fn: () => any): void { this.onTouched = fn; }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+  }
+
+  /** @internal */
+  _registerOption(value: NgSelectMultipleOption): string {
+    const id: string = (this._idCounter++).toString();
+    this._optionMap.set(id, value);
+    return id;
+  }
+
+  /** @internal */
+  _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;
+    }
+    return null;
+  }
+
+  /** @internal */
+  _getOptionValue(valueString: string): any {
+    const id: string = _extractId(valueString);
+    return this._optionMap.has(id) ? this._optionMap.get(id) !._value : valueString;
+  }
+}
+
+/**
+ * Marks `<option>` as dynamic, so Angular can be notified when options change.
+ *
+ * ### Example
+ *
+ * ```
+ * <select multiple name="city" ngModel>
+ *   <option *ngFor="let c of cities" [value]="c"></option>
+ * </select>
+ * ```
+ */
+@Directive({selector: 'option'})
+export class NgSelectMultipleOption implements OnDestroy {
+  // TODO(issue/24571): remove '!'.
+  id !: string;
+  /** @internal */
+  _value: any;
+
+  constructor(
+      private _element: ElementRef, private _renderer: Renderer2,
+      @Optional() @Host() private _select: SelectMultipleControlValueAccessor) {
+    if (this._select) {
+      this.id = this._select._registerOption(this);
+    }
+  }
+
+  @Input('ngValue')
+  set ngValue(value: any) {
+    if (this._select == null) return;
+    this._value = value;
+    this._setElementValue(_buildValueString(this.id, value));
+    this._select.writeValue(this._select.value);
+  }
+
+  @Input('value')
+  set value(value: any) {
+    if (this._select) {
+      this._value = value;
+      this._setElementValue(_buildValueString(this.id, value));
+      this._select.writeValue(this._select.value);
+    } else {
+      this._setElementValue(value);
+    }
+  }
+
+  /** @internal */
+  _setElementValue(value: string): void {
+    this._renderer.setProperty(this._element.nativeElement, 'value', value);
+  }
+
+  /** @internal */
+  _setSelected(selected: boolean) {
+    this._renderer.setProperty(this._element.nativeElement, 'selected', selected);
+  }
+
+  ngOnDestroy(): void {
+    if (this._select) {
+      this._select._optionMap.delete(this.id);
+      this._select.writeValue(this._select.value);
+    }
+  }
+}
diff --git a/packages/forms/src/directives/shared.ts b/packages/forms/src/directives/shared.ts
new file mode 100644
index 000000000000..282be9901a20
--- /dev/null
+++ b/packages/forms/src/directives/shared.ts
@@ -0,0 +1,238 @@
+/**
+ * @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 {isDevMode, ɵlooseIdentical as looseIdentical} from '@angular/core';
+
+import {FormArray, FormControl, FormGroup} from '../model';
+import {Validators} from '../validators';
+import {AbstractControlDirective} from './abstract_control_directive';
+import {AbstractFormGroupDirective} from './abstract_form_group_directive';
+import {CheckboxControlValueAccessor} from './checkbox_value_accessor';
+import {ControlContainer} from './control_container';
+import {ControlValueAccessor} from './control_value_accessor';
+import {DefaultValueAccessor} from './default_value_accessor';
+import {NgControl} from './ng_control';
+import {normalizeAsyncValidator, normalizeValidator} from './normalize_validator';
+import {NumberValueAccessor} from './number_value_accessor';
+import {RadioControlValueAccessor} from './radio_control_value_accessor';
+import {RangeValueAccessor} from './range_value_accessor';
+import {FormArrayName} from './reactive_directives/form_group_name';
+import {ReactiveErrors} from './reactive_errors';
+import {SelectControlValueAccessor} from './select_control_value_accessor';
+import {SelectMultipleControlValueAccessor} from './select_multiple_control_value_accessor';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from './validators';
+
+
+export function controlPath(name: string, parent: ControlContainer): string[] {
+  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);
+
+  setUpViewChangePipeline(control, dir);
+  setUpModelChangePipeline(control, dir);
+
+  setUpBlurPipeline(control, dir);
+
+  if (dir.valueAccessor !.setDisabledState) {
+    control.registerOnDisabledChange(
+        (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());
+  });
+
+  dir._rawAsyncValidators.forEach((validator: AsyncValidator | AsyncValidatorFn) => {
+    if ((<Validator>validator).registerOnValidatorChange)
+      (<Validator>validator).registerOnValidatorChange !(() => control.updateValueAndValidity());
+  });
+}
+
+export function cleanUpControl(control: FormControl, dir: NgControl) {
+  dir.valueAccessor !.registerOnChange(() => _noControlError(dir));
+  dir.valueAccessor !.registerOnTouched(() => _noControlError(dir));
+
+  dir._rawValidators.forEach((validator: any) => {
+    if (validator.registerOnValidatorChange) {
+      validator.registerOnValidatorChange(null);
+    }
+  });
+
+  dir._rawAsyncValidators.forEach((validator: any) => {
+    if (validator.registerOnValidatorChange) {
+      validator.registerOnValidatorChange(null);
+    }
+  });
+
+  if (control) control._clearChangeFns();
+}
+
+function setUpViewChangePipeline(control: FormControl, dir: NgControl): void {
+  dir.valueAccessor !.registerOnChange((newValue: any) => {
+    control._pendingValue = newValue;
+    control._pendingChange = true;
+    control._pendingDirty = true;
+
+    if (control.updateOn === 'change') updateControl(control, dir);
+  });
+}
+
+function setUpBlurPipeline(control: FormControl, dir: NgControl): void {
+  dir.valueAccessor !.registerOnTouched(() => {
+    control._pendingTouched = true;
+
+    if (control.updateOn === 'blur' && control._pendingChange) updateControl(control, dir);
+    if (control.updateOn !== 'submit') control.markAsTouched();
+  });
+}
+
+function updateControl(control: FormControl, dir: NgControl): void {
+  if (control._pendingDirty) control.markAsDirty();
+  control.setValue(control._pendingValue, {emitModelToViewChange: false});
+  dir.viewToModelUpdate(control._pendingValue);
+  control._pendingChange = false;
+}
+
+function setUpModelChangePipeline(control: FormControl, dir: NgControl): void {
+  control.registerOnChange((newValue: any, emitModelEvent: boolean) => {
+    // control -> view
+    dir.valueAccessor !.writeValue(newValue);
+
+    // control -> ngModel
+    if (emitModelEvent) dir.viewToModelUpdate(newValue);
+  });
+}
+
+export function setUpFormContainer(
+    control: FormGroup | FormArray, dir: AbstractFormGroupDirective | FormArrayName) {
+  if (control == null) _throwError(dir, 'Cannot find control with');
+  control.validator = Validators.compose([control.validator, dir.validator]);
+  control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
+}
+
+function _noControlError(dir: NgControl) {
+  return _throwError(dir, 'There is no FormControl instance attached to form control element with');
+}
+
+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]) {
+    messageEnd = `name: '${dir.path}'`;
+  } else {
+    messageEnd = 'unspecified name attribute';
+  }
+  throw new Error(`${message} ${messageEnd}`);
+}
+
+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|
+    null {
+  return validators != null ? Validators.composeAsync(validators.map(normalizeAsyncValidator)) :
+                              null;
+}
+
+export function isPropertyUpdated(changes: {[key: string]: any}, viewModel: any): boolean {
+  if (!changes.hasOwnProperty('model')) return false;
+  const change = changes['model'];
+
+  if (change.isFirstChange()) return true;
+  return !looseIdentical(viewModel, change.currentValue);
+}
+
+const BUILTIN_ACCESSORS = [
+  CheckboxControlValueAccessor,
+  RangeValueAccessor,
+  NumberValueAccessor,
+  SelectControlValueAccessor,
+  SelectMultipleControlValueAccessor,
+  RadioControlValueAccessor,
+];
+
+export function isBuiltInAccessor(valueAccessor: ControlValueAccessor): boolean {
+  return BUILTIN_ACCESSORS.some(a => valueAccessor.constructor === a);
+}
+
+export function syncPendingControls(form: FormGroup, directives: NgControl[]): void {
+  form._syncPendingControls();
+  directives.forEach(dir => {
+    const control = dir.control as FormControl;
+    if (control.updateOn === 'submit' && control._pendingChange) {
+      dir.viewToModelUpdate(control._pendingValue);
+      control._pendingChange = false;
+    }
+  });
+}
+
+// TODO: vsavkin remove it once https://github.com/angular/angular/issues/3011 is implemented
+export function selectValueAccessor(
+    dir: NgControl, valueAccessors: ControlValueAccessor[]): ControlValueAccessor|null {
+  if (!valueAccessors) return null;
+
+  if (!Array.isArray(valueAccessors))
+    _throwError(dir, 'Value accessor was not provided as an array for form control with');
+
+  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;
+
+    } else if (isBuiltInAccessor(v)) {
+      if (builtinAccessor)
+        _throwError(dir, 'More than one built-in value accessor matches form control with');
+      builtinAccessor = v;
+
+    } else {
+      if (customAccessor)
+        _throwError(dir, 'More than one custom value accessor matches form control with');
+      customAccessor = v;
+    }
+  });
+
+  if (customAccessor) return customAccessor;
+  if (builtinAccessor) return builtinAccessor;
+  if (defaultAccessor) return defaultAccessor;
+
+  _throwError(dir, 'No valid value accessor for form control with');
+  return null;
+}
+
+export function removeDir<T>(list: T[], el: T): void {
+  const index = list.indexOf(el);
+  if (index > -1) list.splice(index, 1);
+}
+
+// TODO(kara): remove after deprecation period
+export function _ngModelWarning(
+    name: string, type: {_ngModelWarningSentOnce: boolean},
+    instance: {_ngModelWarningSent: boolean}, warningConfig: string | null) {
+  if (!isDevMode() || warningConfig === 'never') return;
+
+  if (((warningConfig === null || warningConfig === 'once') && !type._ngModelWarningSentOnce) ||
+      (warningConfig === 'always' && !instance._ngModelWarningSent)) {
+    ReactiveErrors.ngModelWarning(name);
+    type._ngModelWarningSentOnce = true;
+    instance._ngModelWarningSent = true;
+  }
+}
diff --git a/packages/forms/src/directives/template_driven_errors.ts b/packages/forms/src/directives/template_driven_errors.ts
new file mode 100644
index 000000000000..6fee9ad08407
--- /dev/null
+++ b/packages/forms/src/directives/template_driven_errors.ts
@@ -0,0 +1,77 @@
+/**
+ * @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 {FormErrorExamples as Examples} from './error_examples';
+
+export class TemplateDrivenErrors {
+  static modelParentException(): void {
+    throw new Error(`
+      ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
+      formGroup's partner directive "formControlName" instead.  Example:
+
+      ${Examples.formControlName}
+
+      Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:
+
+      Example:
+
+      ${Examples.ngModelWithFormGroup}`);
+  }
+
+  static formGroupNameException(): void {
+    throw new Error(`
+      ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.
+
+      Option 1: Use formControlName instead of ngModel (reactive strategy):
+
+      ${Examples.formGroupName}
+
+      Option 2:  Update ngModel's parent be ngModelGroup (template-driven strategy):
+
+      ${Examples.ngModelGroup}`);
+  }
+
+  static missingNameException() {
+    throw new Error(
+        `If ngModel is used within a form tag, either the name attribute must be set or the form
+      control must be defined as 'standalone' in ngModelOptions.
+
+      Example 1: <input [(ngModel)]="person.firstName" name="first">
+      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">`);
+  }
+
+  static modelGroupParentException() {
+    throw new Error(`
+      ngModelGroup cannot be used with a parent formGroup directive.
+
+      Option 1: Use formGroupName instead of ngModelGroup (reactive strategy):
+
+      ${Examples.formGroupName}
+
+      Option 2:  Use a regular form tag instead of the formGroup directive (template-driven strategy):
+
+      ${Examples.ngModelGroup}`);
+  }
+
+  static ngFormWarning() {
+    console.warn(`
+    It looks like you're using 'ngForm'.
+
+    Support for using the 'ngForm' element selector has been deprecated in Angular v6 and will be removed
+    in Angular v9.
+
+    Use 'ng-form' instead.
+
+    Before:
+    <ngForm #myForm="ngForm">
+
+    After:
+    <ng-form #myForm="ngForm">
+    `);
+  }
+}
diff --git a/packages/forms/src/directives/validators.ts b/packages/forms/src/directives/validators.ts
new file mode 100644
index 000000000000..2297c42b5848
--- /dev/null
+++ b/packages/forms/src/directives/validators.ts
@@ -0,0 +1,331 @@
+/**
+ * @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 {Directive, Input, OnChanges, SimpleChanges, StaticProvider, forwardRef} from '@angular/core';
+import {Observable} from 'rxjs';
+
+import {AbstractControl} from '../model';
+import {NG_VALIDATORS, Validators} from '../validators';
+
+
+/** @experimental */
+export type ValidationErrors = {
+  [key: string]: any
+};
+
+/**
+ * An interface that can be implemented by classes that can act as validators.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * @Directive({
+ *   selector: '[custom-validator]',
+ *   providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
+ * })
+ * class CustomValidatorDirective implements Validator {
+ *   validate(c: Control): {[key: string]: any} {
+ *     return {"custom": true};
+ *   }
+ * }
+ * ```
+ *
+ *
+ */
+export interface Validator {
+  validate(c: AbstractControl): ValidationErrors|null;
+  registerOnValidatorChange?(fn: () => void): void;
+}
+
+/** @experimental */
+export interface AsyncValidator extends Validator {
+  validate(c: AbstractControl): Promise<ValidationErrors|null>|Observable<ValidationErrors|null>;
+}
+
+export const REQUIRED_VALIDATOR: StaticProvider = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => RequiredValidator),
+  multi: true
+};
+
+export const CHECKBOX_REQUIRED_VALIDATOR: StaticProvider = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => CheckboxRequiredValidator),
+  multi: true
+};
+
+
+/**
+ * A Directive that adds the `required` validator to any controls marked with the
+ * `required` attribute, via the `NG_VALIDATORS` binding.
+ *
+ * ### Example
+ *
+ * ```
+ * <input name="fullName" ngModel required>
+ * ```
+ *
+ *
+ */
+@Directive({
+  selector:
+      ':not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]',
+  providers: [REQUIRED_VALIDATOR],
+  host: {'[attr.required]': 'required ? "" : null'}
+})
+export class RequiredValidator implements Validator {
+  // TODO(issue/24571): remove '!'.
+  private _required !: boolean;
+  // TODO(issue/24571): remove '!'.
+  private _onChange !: () => void;
+
+  @Input()
+  get required(): boolean|string { return this._required; }
+
+  set required(value: boolean|string) {
+    this._required = value != null && value !== false && `${value}` !== 'false';
+    if (this._onChange) this._onChange();
+  }
+
+  validate(c: AbstractControl): ValidationErrors|null {
+    return this.required ? Validators.required(c) : null;
+  }
+
+  registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
+}
+
+
+/**
+ * A Directive that adds the `required` validator to checkbox controls marked with the
+ * `required` attribute, via the `NG_VALIDATORS` binding.
+ *
+ * ### Example
+ *
+ * ```
+ * <input type="checkbox" name="active" ngModel required>
+ * ```
+ *
+ * @experimental
+ */
+@Directive({
+  selector:
+      'input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]',
+  providers: [CHECKBOX_REQUIRED_VALIDATOR],
+  host: {'[attr.required]': 'required ? "" : null'}
+})
+export class CheckboxRequiredValidator extends RequiredValidator {
+  validate(c: AbstractControl): ValidationErrors|null {
+    return this.required ? Validators.requiredTrue(c) : null;
+  }
+}
+
+/**
+ * Provider which adds `EmailValidator` to `NG_VALIDATORS`.
+ */
+export const EMAIL_VALIDATOR: any = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => EmailValidator),
+  multi: true
+};
+
+/**
+ * A Directive that adds the `email` validator to controls marked with the
+ * `email` attribute, via the `NG_VALIDATORS` binding.
+ *
+ * ### Example
+ *
+ * ```
+ * <input type="email" name="email" ngModel email>
+ * <input type="email" name="email" ngModel email="true">
+ * <input type="email" name="email" ngModel [email]="true">
+ * ```
+ *
+ * @experimental
+ */
+@Directive({
+  selector: '[email][formControlName],[email][formControl],[email][ngModel]',
+  providers: [EMAIL_VALIDATOR]
+})
+export class EmailValidator implements Validator {
+  // TODO(issue/24571): remove '!'.
+  private _enabled !: boolean;
+  // TODO(issue/24571): remove '!'.
+  private _onChange !: () => void;
+
+  @Input()
+  set email(value: boolean|string) {
+    this._enabled = value === '' || value === true || value === 'true';
+    if (this._onChange) this._onChange();
+  }
+
+  validate(c: AbstractControl): ValidationErrors|null {
+    return this._enabled ? Validators.email(c) : null;
+  }
+
+  registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
+}
+
+export interface ValidatorFn { (c: AbstractControl): ValidationErrors|null; }
+
+export interface AsyncValidatorFn {
+  (c: AbstractControl): Promise<ValidationErrors|null>|Observable<ValidationErrors|null>;
+}
+
+/**
+ * Provider which adds `MinLengthValidator` to `NG_VALIDATORS`.
+ *
+ * ## Example:
+ *
+ * {@example common/forms/ts/validators/validators.ts region='min'}
+ */
+export const MIN_LENGTH_VALIDATOR: any = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => MinLengthValidator),
+  multi: true
+};
+
+/**
+ * A directive which installs the `MinLengthValidator` for any `formControlName`,
+ * `formControl`, or control with `ngModel` that also has a `minlength` attribute.
+ *
+ *
+ */
+@Directive({
+  selector: '[minlength][formControlName],[minlength][formControl],[minlength][ngModel]',
+  providers: [MIN_LENGTH_VALIDATOR],
+  host: {'[attr.minlength]': 'minlength ? minlength : null'}
+})
+export class MinLengthValidator implements Validator,
+    OnChanges {
+  // TODO(issue/24571): remove '!'.
+  private _validator !: ValidatorFn;
+  // TODO(issue/24571): remove '!'.
+  private _onChange !: () => void;
+
+  // TODO(issue/24571): remove '!'.
+  @Input() minlength !: string;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('minlength' in changes) {
+      this._createValidator();
+      if (this._onChange) this._onChange();
+    }
+  }
+
+  validate(c: AbstractControl): ValidationErrors|null {
+    return this.minlength == null ? null : this._validator(c);
+  }
+
+  registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
+
+  private _createValidator(): void {
+    this._validator = Validators.minLength(parseInt(this.minlength, 10));
+  }
+}
+
+/**
+ * Provider which adds `MaxLengthValidator` to `NG_VALIDATORS`.
+ *
+ * ## Example:
+ *
+ * {@example common/forms/ts/validators/validators.ts region='max'}
+ */
+export const MAX_LENGTH_VALIDATOR: any = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => MaxLengthValidator),
+  multi: true
+};
+
+/**
+ * A directive which installs the `MaxLengthValidator` for any `formControlName`,
+ * `formControl`, or control with `ngModel` that also has a `maxlength` attribute.
+ *
+ *
+ */
+@Directive({
+  selector: '[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]',
+  providers: [MAX_LENGTH_VALIDATOR],
+  host: {'[attr.maxlength]': 'maxlength ? maxlength : null'}
+})
+export class MaxLengthValidator implements Validator,
+    OnChanges {
+  // TODO(issue/24571): remove '!'.
+  private _validator !: ValidatorFn;
+  // TODO(issue/24571): remove '!'.
+  private _onChange !: () => void;
+
+  // TODO(issue/24571): remove '!'.
+  @Input() maxlength !: string;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('maxlength' in changes) {
+      this._createValidator();
+      if (this._onChange) this._onChange();
+    }
+  }
+
+  validate(c: AbstractControl): ValidationErrors|null {
+    return this.maxlength != null ? this._validator(c) : null;
+  }
+
+  registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
+
+  private _createValidator(): void {
+    this._validator = Validators.maxLength(parseInt(this.maxlength, 10));
+  }
+}
+
+
+export const PATTERN_VALIDATOR: any = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => PatternValidator),
+  multi: true
+};
+
+
+/**
+ * A Directive that adds the `pattern` validator to any controls marked with the
+ * `pattern` attribute, via the `NG_VALIDATORS` binding. Uses attribute value
+ * as the regex to validate Control value against.  Follows pattern attribute
+ * semantics; i.e. regex must match entire Control value.
+ *
+ * ### Example
+ *
+ * ```
+ * <input [name]="fullName" pattern="[a-zA-Z ]*" ngModel>
+ * ```
+ *
+ */
+@Directive({
+  selector: '[pattern][formControlName],[pattern][formControl],[pattern][ngModel]',
+  providers: [PATTERN_VALIDATOR],
+  host: {'[attr.pattern]': 'pattern ? pattern : null'}
+})
+export class PatternValidator implements Validator,
+    OnChanges {
+  // TODO(issue/24571): remove '!'.
+  private _validator !: ValidatorFn;
+  // TODO(issue/24571): remove '!'.
+  private _onChange !: () => void;
+
+  // TODO(issue/24571): remove '!'.
+  @Input() pattern !: string | RegExp;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('pattern' in changes) {
+      this._createValidator();
+      if (this._onChange) this._onChange();
+    }
+  }
+
+  validate(c: AbstractControl): ValidationErrors|null { return this._validator(c); }
+
+  registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
+
+  private _createValidator(): void { this._validator = Validators.pattern(this.pattern); }
+}
diff --git a/packages/forms/src/form_builder.ts b/packages/forms/src/form_builder.ts
new file mode 100644
index 000000000000..9b3c4570ecc4
--- /dev/null
+++ b/packages/forms/src/form_builder.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 {Injectable} from '@angular/core';
+
+import {AsyncValidatorFn, ValidatorFn} from './directives/validators';
+import {AbstractControl, FormArray, FormControl, FormGroup} from './model';
+
+/**
+ * @description
+ * Creates an `AbstractControl` from a user-specified configuration.
+ *
+ * The `FormBuilder` provides syntactic sugar that shortens creating instances of a `FormControl`,
+ * `FormGroup`, or `FormArray`. It reduces the amount of boilerplate needed to build complex
+ * forms.
+ *
+ * @see [Reactive Forms Guide](/guide/reactive-forms)
+ *
+ */
+@Injectable()
+export class FormBuilder {
+  /**
+   * @description
+   * Construct a new `FormGroup` instance.
+   *
+   * @param controlsConfig A collection of child controls. The key for each child is the name
+   * under which it is registered.
+   *
+   * @param extra An object of configuration options for the `FormGroup`.
+   * * `validator`: A synchronous validator function, or an array of validator functions
+   * * `asyncValidator`: A single async validator or array of async validator functions
+   *
+   */
+  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;
+    return new FormGroup(controls, validator, asyncValidator);
+  }
+
+  /**
+   * @description
+   * Construct a new `FormControl` instance.
+   *
+   * @param formState Initializes the control with an initial value,
+   * or an object that defines the initial value and disabled state.
+   *
+   * @param validator A synchronous validator function, or an array of synchronous validator
+   * functions.
+   *
+   * @param asyncValidator A single async validator or array of async validator functions
+   *
+   * @usageNotes
+   *
+   * ### Initialize a control as disabled
+   *
+   * The following example returns a control with an initial value in a disabled state.
+   *
+   * <code-example path="forms/ts/formBuilder/form_builder_example.ts"
+   *   linenums="false" region="disabled-control">
+   * </code-example>
+   *
+   */
+  control(
+      formState: any, validator?: ValidatorFn|ValidatorFn[]|null,
+      asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null): FormControl {
+    return new FormControl(formState, validator, asyncValidator);
+  }
+
+  /**
+   * @description
+   * Construct a new `FormArray` instance.
+   *
+   * @param controlsConfig An array of child controls. The key for each child control is its index
+   * in the array.
+   *
+   * @param validator A synchronous validator function, or an array of synchronous validator
+   * functions.
+   *
+   * @param asyncValidator A single async validator or array of async validator functions
+   */
+  array(
+      controlsConfig: any[], validator?: ValidatorFn|ValidatorFn[]|null,
+      asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null): FormArray {
+    const controls = controlsConfig.map(c => this._createControl(c));
+    return new FormArray(controls, validator, asyncValidator);
+  }
+
+  /** @internal */
+  _reduceControls(controlsConfig: {[k: string]: any}): {[key: string]: AbstractControl} {
+    const controls: {[key: string]: AbstractControl} = {};
+    Object.keys(controlsConfig).forEach(controlName => {
+      controls[controlName] = this._createControl(controlsConfig[controlName]);
+    });
+    return controls;
+  }
+
+  /** @internal */
+  _createControl(controlConfig: any): AbstractControl {
+    if (controlConfig instanceof FormControl || controlConfig instanceof FormGroup ||
+        controlConfig instanceof FormArray) {
+      return controlConfig;
+
+    } else if (Array.isArray(controlConfig)) {
+      const value = controlConfig[0];
+      const validator: ValidatorFn = controlConfig.length > 1 ? controlConfig[1] : null;
+      const asyncValidator: AsyncValidatorFn = controlConfig.length > 2 ? controlConfig[2] : null;
+      return this.control(value, validator, asyncValidator);
+
+    } else {
+      return this.control(controlConfig);
+    }
+  }
+}
diff --git a/packages/forms/src/form_providers.ts b/packages/forms/src/form_providers.ts
new file mode 100644
index 000000000000..e2084343e161
--- /dev/null
+++ b/packages/forms/src/form_providers.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 {ModuleWithProviders, NgModule} from '@angular/core';
+
+import {InternalFormsSharedModule, NG_FORM_SELECTOR_WARNING, NG_MODEL_WITH_FORM_CONTROL_WARNING, REACTIVE_DRIVEN_DIRECTIVES, TEMPLATE_DRIVEN_DIRECTIVES} from './directives';
+import {RadioControlRegistry} from './directives/radio_control_value_accessor';
+import {FormBuilder} from './form_builder';
+
+/**
+ * The ng module for forms.
+ *
+ */
+@NgModule({
+  declarations: TEMPLATE_DRIVEN_DIRECTIVES,
+  providers: [RadioControlRegistry],
+  exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
+})
+export class FormsModule {
+  static withConfig(opts: {
+    /** @deprecated as of v6 */ warnOnDeprecatedNgFormSelector?: 'never' | 'once' | 'always',
+  }): ModuleWithProviders {
+    return {
+      ngModule: FormsModule,
+      providers:
+          [{provide: NG_FORM_SELECTOR_WARNING, useValue: opts.warnOnDeprecatedNgFormSelector}]
+    };
+  }
+}
+
+/**
+ * The ng module for reactive forms.
+ *
+ */
+@NgModule({
+  declarations: [REACTIVE_DRIVEN_DIRECTIVES],
+  providers: [FormBuilder, RadioControlRegistry],
+  exports: [InternalFormsSharedModule, REACTIVE_DRIVEN_DIRECTIVES]
+})
+export class ReactiveFormsModule {
+  static withConfig(opts: {
+    /** @deprecated as of v6 */ warnOnNgModelWithFormControl: 'never' | 'once' | 'always'
+  }): ModuleWithProviders<ReactiveFormsModule> {
+    return {
+      ngModule: ReactiveFormsModule,
+      providers: [{
+        provide: NG_MODEL_WITH_FORM_CONTROL_WARNING,
+        useValue: opts.warnOnNgModelWithFormControl
+      }]
+    };
+  }
+}
diff --git a/packages/forms/src/forms.ts b/packages/forms/src/forms.ts
new file mode 100644
index 000000000000..324f5668dabb
--- /dev/null
+++ b/packages/forms/src/forms.ts
@@ -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
+ */
+
+/**
+ * @module
+ * @description
+ * This module is used for handling user input, by defining and building a `FormGroup` that
+ * consists of `FormControl` objects, and mapping them onto the DOM. `FormControl`
+ * objects can then be used to read information from the form DOM elements.
+ *
+ * Forms providers are not included in default providers; you must import these providers
+ * explicitly.
+ */
+
+
+export {AbstractControlDirective} from './directives/abstract_control_directive';
+export {AbstractFormGroupDirective} from './directives/abstract_form_group_directive';
+export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
+export {ControlContainer} from './directives/control_container';
+export {ControlValueAccessor, NG_VALUE_ACCESSOR} from './directives/control_value_accessor';
+export {COMPOSITION_BUFFER_MODE, DefaultValueAccessor} from './directives/default_value_accessor';
+export {Form} from './directives/form_interface';
+export {NgControl} from './directives/ng_control';
+export {NgControlStatus, NgControlStatusGroup} from './directives/ng_control_status';
+export {NgForm} from './directives/ng_form';
+export {NgFormSelectorWarning} from './directives/ng_form_selector_warning';
+export {NgModel} from './directives/ng_model';
+export {NgModelGroup} from './directives/ng_model_group';
+export {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
+export {FormControlDirective} from './directives/reactive_directives/form_control_directive';
+export {FormControlName} from './directives/reactive_directives/form_control_name';
+export {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
+export {FormArrayName} from './directives/reactive_directives/form_group_name';
+export {FormGroupName} from './directives/reactive_directives/form_group_name';
+export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
+export {SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
+export {AsyncValidator, AsyncValidatorFn, CheckboxRequiredValidator, EmailValidator, MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, ValidationErrors, Validator, ValidatorFn} from './directives/validators';
+export {FormBuilder} from './form_builder';
+export {AbstractControl, AbstractControlOptions, FormArray, FormControl, FormGroup} from './model';
+export {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from './validators';
+export {VERSION} from './version';
+
+export * from './form_providers';
diff --git a/packages/forms/src/model.ts b/packages/forms/src/model.ts
new file mode 100644
index 000000000000..8f42962aebb1
--- /dev/null
+++ b/packages/forms/src/model.ts
@@ -0,0 +1,1852 @@
+/**
+ * @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 {EventEmitter} from '@angular/core';
+import {Observable} from 'rxjs';
+import {composeAsyncValidators, composeValidators} from './directives/shared';
+import {AsyncValidatorFn, ValidationErrors, ValidatorFn} from './directives/validators';
+import {toObservable} from './validators';
+
+/**
+ * Reports that a FormControl is valid, meaning that no errors exist in the input value.
+ *
+ * @see `status`
+ */
+export const VALID = 'VALID';
+
+/**
+ * Reports that a FormControl is invalid, meaning that an error exists in the input value.
+ *
+ * @see `status`
+ */
+export const INVALID = 'INVALID';
+
+/**
+ * Reports that a FormControl is pending, meaning that that async validation is occurring and
+ * errors are not yet available for the input value.
+ *
+ * @see `markAsPending`
+ * @see `status`
+ */
+export const PENDING = 'PENDING';
+
+/**
+ * Reports that a FormControl is disabled, meaning that the control is exempt from ancestor
+ * calculations of validity or value.
+ *
+ * @see `markAsDisabled`
+ * @see `status`
+ */
+export const DISABLED = 'DISABLED';
+
+function _find(control: AbstractControl, path: Array<string|number>| string, delimiter: string) {
+  if (path == null) return null;
+
+  if (!(path instanceof Array)) {
+    path = (<string>path).split(delimiter);
+  }
+  if (path instanceof Array && (path.length === 0)) return null;
+
+  return (<Array<string|number>>path).reduce((v: AbstractControl, name) => {
+    if (v instanceof FormGroup) {
+      return v.controls.hasOwnProperty(name as string) ? v.controls[name] : null;
+    }
+
+    if (v instanceof FormArray) {
+      return v.at(<number>name) || null;
+    }
+
+    return null;
+  }, control);
+}
+
+function coerceToValidator(
+    validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null): ValidatorFn|
+    null {
+  const validator =
+      (isOptionsObj(validatorOrOpts) ? (validatorOrOpts as AbstractControlOptions).validators :
+                                       validatorOrOpts) as ValidatorFn |
+      ValidatorFn[] | null;
+
+  return Array.isArray(validator) ? composeValidators(validator) : validator || null;
+}
+
+function coerceToAsyncValidator(
+    asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null, validatorOrOpts?: ValidatorFn |
+        ValidatorFn[] | AbstractControlOptions | null): AsyncValidatorFn|null {
+  const origAsyncValidator =
+      (isOptionsObj(validatorOrOpts) ? (validatorOrOpts as AbstractControlOptions).asyncValidators :
+                                       asyncValidator) as AsyncValidatorFn |
+      AsyncValidatorFn | null;
+
+  return Array.isArray(origAsyncValidator) ? composeAsyncValidators(origAsyncValidator) :
+                                             origAsyncValidator || null;
+}
+
+export type FormHooks = 'change' | 'blur' | 'submit';
+
+/**
+ * Interface for options provided to an `AbstractControl`.
+ *
+ * @experimental
+ */
+export interface AbstractControlOptions {
+  /**
+   * List of validators applied to control.
+   */
+  validators?: ValidatorFn|ValidatorFn[]|null;
+  /**
+   * List of async validators applied to control.
+   */
+  asyncValidators?: AsyncValidatorFn|AsyncValidatorFn[]|null;
+  /**
+   * The event name for control to update upon.
+   */
+  updateOn?: 'change'|'blur'|'submit';
+}
+
+
+function isOptionsObj(
+    validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null): boolean {
+  return validatorOrOpts != null && !Array.isArray(validatorOrOpts) &&
+      typeof validatorOrOpts === 'object';
+}
+
+
+/**
+ * This is the base class for `FormControl`, `FormGroup`, and `FormArray`.
+ *
+ * It provides some of the shared behavior that all controls and groups of controls have, like
+ * running validators, calculating status, and resetting state. It also defines the properties
+ * that are shared between all sub-classes, like `value`, `valid`, and `dirty`. It shouldn't be
+ * instantiated directly.
+ *
+ * @see [Forms Guide](/guide/forms)
+ * @see [Reactive Forms Guide](/guide/reactive-forms)
+ * @see [Dynamic Forms Guide](/guide/dynamic-form)
+ *
+ */
+export abstract class AbstractControl {
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _pendingDirty !: boolean;
+
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _pendingTouched !: boolean;
+
+  /** @internal */
+  _onCollectionChange = () => {};
+
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _updateOn !: FormHooks;
+
+  // TODO(issue/24571): remove '!'.
+  private _parent !: FormGroup | FormArray;
+  private _asyncValidationSubscription: any;
+
+  /**
+   * The current value of the control.
+   *
+   * * For a `FormControl`, the current value.
+   * * For a `FormGroup`, the values of enabled controls as an object
+   * with a key-value pair for each member of the group.
+   * * For a `FormArray`, the values of enabled controls as an array.
+   *
+   */
+  public readonly value: any;
+
+  /**
+   * Initialize the AbstractControl instance.
+   *
+   * @param validator The function that determines the synchronous validity of this control.
+   * @param asyncValidator The function that determines the asynchronous validity of this
+   * control.
+   */
+  constructor(public validator: ValidatorFn|null, public asyncValidator: AsyncValidatorFn|null) {}
+
+  /**
+   * The parent control.
+   */
+  get parent(): FormGroup|FormArray { return this._parent; }
+
+  /**
+   * The validation status of the control. There are four possible
+   * validation status values:
+   *
+   * * **VALID**: This control has passed all validation checks.
+   * * **INVALID**: This control has failed at least one validation check.
+   * * **PENDING**: This control is in the midst of conducting a validation check.
+   * * **DISABLED**: This control is exempt from validation checks.
+   *
+   * These status values are mutually exclusive, so a control cannot be
+   * both valid AND invalid or invalid AND disabled.
+   */
+  // TODO(issue/24571): remove '!'.
+  public readonly status !: string;
+
+  /**
+   * A control is `valid` when its `status` is `VALID`.
+   *
+   * @see `status`
+   *
+   * @returns True if the control has passed all of its validation tests,
+   * false otherwise.
+   */
+  get valid(): boolean { return this.status === VALID; }
+
+  /**
+   * A control is `invalid` when its `status` is `INVALID`.
+   *
+   * @see `status`
+   *
+   * @returns True if this control has failed one or more of its validation checks,
+   * false otherwise.
+   */
+  get invalid(): boolean { return this.status === INVALID; }
+
+  /**
+   * A control is `pending` when its `status` is `PENDING`.
+   *
+   * @see `status`
+   *
+   * @returns True if this control is in the process of conducting a validation check,
+   * false otherwise.
+   */
+  get pending(): boolean { return this.status == PENDING; }
+
+  /**
+   * A control is `disabled` when its `status` is `DISABLED`.
+   *
+   * @see `status`
+   *
+   * Disabled controls are exempt from validation checks and
+   * are not included in the aggregate value of their ancestor
+   * controls.
+   *
+   * @returns True if the control is disabled, false otherwise.
+   */
+  get disabled(): boolean { return this.status === DISABLED; }
+
+  /**
+   * A control is `enabled` as long as its `status` is not `DISABLED`.
+   *
+   * @see `status`
+   *
+   * @returns True if the control has any status other than 'DISABLED',
+   * false if the status is 'DISABLED'.
+   *
+   */
+  get enabled(): boolean { return this.status !== DISABLED; }
+
+  /**
+   * An object containing any errors generated by failing validation,
+   * or null if there are no errors.
+   */
+  // TODO(issue/24571): remove '!'.
+  public readonly errors !: ValidationErrors | null;
+
+  /**
+   * A control is `pristine` if the user has not yet changed
+   * the value in the UI.
+   *
+   * @returns True if the user has not yet changed the value in the UI; compare `dirty`.
+   * Programmatic changes to a control's value do not mark it dirty.
+   */
+  public readonly pristine: boolean = true;
+
+  /**
+   * A control is `dirty` if the user has changed the value
+   * in the UI.
+   *
+   * @returns True if the user has changed the value of this control in the UI; compare `pristine`.
+   * Programmatic changes to a control's value do not mark it dirty.
+   */
+  get dirty(): boolean { return !this.pristine; }
+
+  /**
+   * True if the control is marked as `touched`.
+   *
+   * A control is marked `touched` once the user has triggered
+   * a `blur` event on it.
+   */
+  public readonly touched: boolean = false;
+
+  /**
+   * True if the control has not been marked as touched
+   *
+   * A control is `untouched` if the user has not yet triggered
+   * a `blur` event on it.
+   */
+  get untouched(): boolean { return !this.touched; }
+
+  /**
+   * A multicasting observable that emits an event every time the value of the control changes, in
+   * the UI or programmatically.
+   */
+  // TODO(issue/24571): remove '!'.
+  public readonly valueChanges !: Observable<any>;
+
+  /**
+   * A multicasting observable that emits an event every time the validation `status` of the control
+   * recalculates.
+   */
+  // TODO(issue/24571): remove '!'.
+  public readonly statusChanges !: Observable<any>;
+
+  /**
+   * Reports the update strategy of the `AbstractControl` (meaning
+   * the event on which the control updates itself).
+   * Possible values: `'change'` | `'blur'` | `'submit'`
+   * Default value: `'change'`
+   */
+  get updateOn(): FormHooks {
+    return this._updateOn ? this._updateOn : (this.parent ? this.parent.updateOn : 'change');
+  }
+
+  /**
+   * Sets the synchronous validators that are active on this control.  Calling
+   * this overwrites any existing sync validators.
+   */
+  setValidators(newValidator: ValidatorFn|ValidatorFn[]|null): void {
+    this.validator = coerceToValidator(newValidator);
+  }
+
+  /**
+   * Sets the async validators that are active on this control. Calling this
+   * overwrites any existing async validators.
+   */
+  setAsyncValidators(newValidator: AsyncValidatorFn|AsyncValidatorFn[]|null): void {
+    this.asyncValidator = coerceToAsyncValidator(newValidator);
+  }
+
+  /**
+   * Empties out the sync validator list.
+   */
+  clearValidators(): void { this.validator = null; }
+
+  /**
+   * Empties out the async validator list.
+   */
+  clearAsyncValidators(): void { this.asyncValidator = null; }
+
+  /**
+   * Marks the control as `touched`. A control is touched by focus and
+   * blur events that do not change the value; compare `markAsDirty`;
+   *
+   *  @param opts Configuration options that determine how the control propagates changes
+   * and emits events events after marking is applied.
+   * * `onlySelf`: When true, mark only this control. When false or not supplied,
+   * marks all direct ancestors. Default is false.
+   */
+  markAsTouched(opts: {onlySelf?: boolean} = {}): void {
+    (this as{touched: boolean}).touched = true;
+
+    if (this._parent && !opts.onlySelf) {
+      this._parent.markAsTouched(opts);
+    }
+  }
+
+  /**
+   * Marks the control as `untouched`.
+   *
+   * If the control has any children, also marks all children as `untouched`
+   * and recalculates the `touched` status of all parent controls.
+   *
+   *  @param opts Configuration options that determine how the control propagates changes
+   * and emits events after the marking is applied.
+   * * `onlySelf`: When true, mark only this control. When false or not supplied,
+   * marks all direct ancestors. Default is false.
+   */
+  markAsUntouched(opts: {onlySelf?: boolean} = {}): void {
+    (this as{touched: boolean}).touched = false;
+    this._pendingTouched = false;
+
+    this._forEachChild(
+        (control: AbstractControl) => { control.markAsUntouched({onlySelf: true}); });
+
+    if (this._parent && !opts.onlySelf) {
+      this._parent._updateTouched(opts);
+    }
+  }
+
+  /**
+   * Marks the control as `dirty`. A control becomes dirty when
+   * the control's is changed through the UI; compare `markAsTouched`.
+   *
+   *  @param opts Configuration options that determine how the control propagates changes
+   * and emits events after marking is applied.
+   * * `onlySelf`: When true, mark only this control. When false or not supplied,
+   * marks all direct ancestors. Default is false.
+   */
+  markAsDirty(opts: {onlySelf?: boolean} = {}): void {
+    (this as{pristine: boolean}).pristine = false;
+
+    if (this._parent && !opts.onlySelf) {
+      this._parent.markAsDirty(opts);
+    }
+  }
+
+  /**
+   * Marks the control as `pristine`.
+   *
+   * If the control has any children, marks all children as `pristine`,
+   * and recalculates the `pristine` status of all parent
+   * controls.
+   *
+   *  @param opts Configuration options that determine how the control emits events after
+   * marking is applied.
+   * * `onlySelf`: When true, mark only this control. When false or not supplied,
+   * marks all direct ancestors. Default is false..
+   */
+  markAsPristine(opts: {onlySelf?: boolean} = {}): void {
+    (this as{pristine: boolean}).pristine = true;
+    this._pendingDirty = false;
+
+    this._forEachChild((control: AbstractControl) => { control.markAsPristine({onlySelf: true}); });
+
+    if (this._parent && !opts.onlySelf) {
+      this._parent._updatePristine(opts);
+    }
+  }
+
+  /**
+   * Marks the control as `pending`.
+   *
+   * A control is pending while the control performs async validation.
+   *
+   *  @param opts Configuration options that determine how the control propagates changes and
+   * emits events after marking is applied.
+   * * `onlySelf`: When true, mark only this control. When false or not supplied,
+   * marks all direct ancestors. Default is false..
+   * * `emitEvent`: When true or not supplied (the default), the `statusChanges`
+   * observable emits an event with the latest status the control is marked pending.
+   * When false, no events are emitted.
+   *
+   */
+  markAsPending(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+    (this as{status: string}).status = PENDING;
+
+    if (opts.emitEvent !== false) {
+      (this.statusChanges as EventEmitter<any>).emit(this.status);
+    }
+
+    if (this._parent && !opts.onlySelf) {
+      this._parent.markAsPending(opts);
+    }
+  }
+
+  /**
+   * Disables the control. This means the control is exempt from validation checks and
+   * excluded from the aggregate value of any parent. Its status is `DISABLED`.
+   *
+   * If the control has children, all children are also disabled.
+   *
+   *  @param opts Configuration options that determine how the control propagates
+   * changes and emits events after the control is disabled.
+   * * `onlySelf`: When true, mark only this control. When false or not supplied,
+   * marks all direct ancestors. Default is false..
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control is disabled.
+   * When false, no events are emitted.
+   */
+  disable(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+    (this as{status: string}).status = DISABLED;
+    (this as{errors: ValidationErrors | null}).errors = null;
+    this._forEachChild(
+        (control: AbstractControl) => { control.disable({...opts, onlySelf: true}); });
+    this._updateValue();
+
+    if (opts.emitEvent !== false) {
+      (this.valueChanges as EventEmitter<any>).emit(this.value);
+      (this.statusChanges as EventEmitter<string>).emit(this.status);
+    }
+
+    this._updateAncestors(opts);
+    this._onDisabledChange.forEach((changeFn) => changeFn(true));
+  }
+
+  /**
+   * Enables the control. This means the control is included in validation checks and
+   * the aggregate value of its parent. Its status recalculates based on its value and
+   * its validators.
+   *
+   * By default, if the control has children, all children are enabled.
+   *
+   *  @param opts Configure options that control how the control propagates changes and
+   * emits events when marked as untouched
+   * * `onlySelf`: When true, mark only this control. When false or not supplied,
+   * marks all direct ancestors. Default is false..
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control is enabled.
+   * When false, no events are emitted.
+   */
+  enable(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+    (this as{status: string}).status = VALID;
+    this._forEachChild(
+        (control: AbstractControl) => { control.enable({...opts, onlySelf: true}); });
+    this.updateValueAndValidity({onlySelf: true, emitEvent: opts.emitEvent});
+
+    this._updateAncestors(opts);
+    this._onDisabledChange.forEach((changeFn) => changeFn(false));
+  }
+
+  private _updateAncestors(opts: {onlySelf?: boolean, emitEvent?: boolean}) {
+    if (this._parent && !opts.onlySelf) {
+      this._parent.updateValueAndValidity(opts);
+      this._parent._updatePristine();
+      this._parent._updateTouched();
+    }
+  }
+
+  /**
+   * @param parent Sets the parent of the control
+   */
+  setParent(parent: FormGroup|FormArray): void { this._parent = parent; }
+
+  /**
+   * Sets the value of the control. Abstract method (implemented in sub-classes).
+   */
+  abstract setValue(value: any, options?: Object): void;
+
+  /**
+   * Patches the value of the control. Abstract method (implemented in sub-classes).
+   */
+  abstract patchValue(value: any, options?: Object): void;
+
+  /**
+   * Resets the control. Abstract method (implemented in sub-classes).
+   */
+  abstract reset(value?: any, options?: Object): void;
+
+  /**
+   * Recalculates the value and validation status of the control.
+   *
+   * By default, it also updates the value and validity of its ancestors.
+   *
+   * @param opts Configuration options determine how the control propagates changes and emits events
+   * after updates and validity checks are applied.
+   * * `onlySelf`: When true, only update this control. When false or not supplied,
+   * update all direct ancestors. Default is false..
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control is updated.
+   * When false, no events are emitted.
+   */
+  updateValueAndValidity(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+    this._setInitialStatus();
+    this._updateValue();
+
+    if (this.enabled) {
+      this._cancelExistingSubscription();
+      (this as{errors: ValidationErrors | null}).errors = this._runValidator();
+      (this as{status: string}).status = this._calculateStatus();
+
+      if (this.status === VALID || this.status === PENDING) {
+        this._runAsyncValidator(opts.emitEvent);
+      }
+    }
+
+    if (opts.emitEvent !== false) {
+      (this.valueChanges as EventEmitter<any>).emit(this.value);
+      (this.statusChanges as EventEmitter<string>).emit(this.status);
+    }
+
+    if (this._parent && !opts.onlySelf) {
+      this._parent.updateValueAndValidity(opts);
+    }
+  }
+
+  /** @internal */
+  _updateTreeValidity(opts: {emitEvent?: boolean} = {emitEvent: true}) {
+    this._forEachChild((ctrl: AbstractControl) => ctrl._updateTreeValidity(opts));
+    this.updateValueAndValidity({onlySelf: true, emitEvent: opts.emitEvent});
+  }
+
+  private _setInitialStatus() {
+    (this as{status: string}).status = this._allControlsDisabled() ? DISABLED : VALID;
+  }
+
+  private _runValidator(): ValidationErrors|null {
+    return this.validator ? this.validator(this) : null;
+  }
+
+  private _runAsyncValidator(emitEvent?: boolean): void {
+    if (this.asyncValidator) {
+      (this as{status: string}).status = PENDING;
+      const obs = toObservable(this.asyncValidator(this));
+      this._asyncValidationSubscription =
+          obs.subscribe((errors: ValidationErrors | null) => this.setErrors(errors, {emitEvent}));
+    }
+  }
+
+  private _cancelExistingSubscription(): void {
+    if (this._asyncValidationSubscription) {
+      this._asyncValidationSubscription.unsubscribe();
+    }
+  }
+
+  /**
+   * Sets errors on a form control when running validations manually, rather than automatically.
+   *
+   * Calling `setErrors` also updates the validity of the parent control.
+   *
+   * ### Manually set the errors for a control
+   *
+   * ```
+   * const login = new FormControl('someLogin');
+   * login.setErrors({
+   *   notUnique: true
+   * });
+   *
+   * expect(login.valid).toEqual(false);
+   * expect(login.errors).toEqual({ notUnique: true });
+   *
+   * login.setValue('someOtherLogin');
+   *
+   * expect(login.valid).toEqual(true);
+   * ```
+   */
+  setErrors(errors: ValidationErrors|null, opts: {emitEvent?: boolean} = {}): void {
+    (this as{errors: ValidationErrors | null}).errors = errors;
+    this._updateControlsErrors(opts.emitEvent !== false);
+  }
+
+  /**
+   * Retrieves a child control given the control's name or path.
+   *
+   * @param path A dot-delimited string or array of string/number values that define the path to the
+   * control.
+   *
+   * ### Retrieve a nested control
+   *
+   * For example, to get a `name` control nested within a `person` sub-group:
+   *
+   * * `this.form.get('person.name');`
+   *
+   * -OR-
+   *
+   * * `this.form.get(['person', 'name']);`
+   */
+  get(path: Array<string|number>|string): AbstractControl|null { return _find(this, path, '.'); }
+
+  /**
+   * Reports error data for a specific error occurring in this control or in another control.
+   *
+   * @param errorCode The error code for which to retrieve data
+   * @param path The path to a control to check. If not supplied, checks for the error in this
+   * control.
+   *
+   * @returns The error data if the control with the given path has the given error, otherwise null
+   * or undefined.
+   */
+  getError(errorCode: string, path?: string[]): any {
+    const control = path ? this.get(path) : this;
+    return control && control.errors ? control.errors[errorCode] : null;
+  }
+
+  /**
+   * Reports whether the control with the given path has the error specified.
+   *
+   * @param errorCode The error code for which to retrieve data
+   * @param path The path to a control to check. If not supplied, checks for the error in this
+   * control.
+   * @returns True when the control with the given path has the error, otherwise false.
+   */
+  hasError(errorCode: string, path?: string[]): boolean { return !!this.getError(errorCode, path); }
+
+  /**
+   * Retrieves the top-level ancestor of this control.
+   */
+  get root(): AbstractControl {
+    let x: AbstractControl = this;
+
+    while (x._parent) {
+      x = x._parent;
+    }
+
+    return x;
+  }
+
+  /** @internal */
+  _updateControlsErrors(emitEvent: boolean): void {
+    (this as{status: string}).status = this._calculateStatus();
+
+    if (emitEvent) {
+      (this.statusChanges as EventEmitter<string>).emit(this.status);
+    }
+
+    if (this._parent) {
+      this._parent._updateControlsErrors(emitEvent);
+    }
+  }
+
+  /** @internal */
+  _initObservables() {
+    (this as{valueChanges: Observable<any>}).valueChanges = new EventEmitter();
+    (this as{statusChanges: Observable<any>}).statusChanges = new EventEmitter();
+  }
+
+
+  private _calculateStatus(): string {
+    if (this._allControlsDisabled()) return DISABLED;
+    if (this.errors) return INVALID;
+    if (this._anyControlsHaveStatus(PENDING)) return PENDING;
+    if (this._anyControlsHaveStatus(INVALID)) return INVALID;
+    return VALID;
+  }
+
+  /** @internal */
+  abstract _updateValue(): void;
+
+  /** @internal */
+  abstract _forEachChild(cb: Function): void;
+
+  /** @internal */
+  abstract _anyControls(condition: Function): boolean;
+
+  /** @internal */
+  abstract _allControlsDisabled(): boolean;
+
+  /** @internal */
+  abstract _syncPendingControls(): boolean;
+
+  /** @internal */
+  _anyControlsHaveStatus(status: string): boolean {
+    return this._anyControls((control: AbstractControl) => control.status === status);
+  }
+
+  /** @internal */
+  _anyControlsDirty(): boolean {
+    return this._anyControls((control: AbstractControl) => control.dirty);
+  }
+
+  /** @internal */
+  _anyControlsTouched(): boolean {
+    return this._anyControls((control: AbstractControl) => control.touched);
+  }
+
+  /** @internal */
+  _updatePristine(opts: {onlySelf?: boolean} = {}): void {
+    (this as{pristine: boolean}).pristine = !this._anyControlsDirty();
+
+    if (this._parent && !opts.onlySelf) {
+      this._parent._updatePristine(opts);
+    }
+  }
+
+  /** @internal */
+  _updateTouched(opts: {onlySelf?: boolean} = {}): void {
+    (this as{touched: boolean}).touched = this._anyControlsTouched();
+
+    if (this._parent && !opts.onlySelf) {
+      this._parent._updateTouched(opts);
+    }
+  }
+
+  /** @internal */
+  _onDisabledChange: Function[] = [];
+
+  /** @internal */
+  _isBoxedValue(formState: any): boolean {
+    return typeof formState === 'object' && formState !== null &&
+        Object.keys(formState).length === 2 && 'value' in formState && 'disabled' in formState;
+  }
+
+  /** @internal */
+  _registerOnCollectionChange(fn: () => void): void { this._onCollectionChange = fn; }
+
+  /** @internal */
+  _setUpdateStrategy(opts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null): void {
+    if (isOptionsObj(opts) && (opts as AbstractControlOptions).updateOn != null) {
+      this._updateOn = (opts as AbstractControlOptions).updateOn !;
+    }
+  }
+}
+
+/**
+ * Tracks the value and validation status of an individual form control.
+ *
+ * This is one of the three fundamental building blocks of Angular forms, along with
+ * `FormGroup` and `FormArray`. It extends the `AbstractControl` class that
+ * implements most of the base functionality for accessing the value, validation status,
+ * user interactions and events.
+ *
+ * @see `AbstractControl`
+ * @see [Reactive Forms Guide](guide/reactive-forms)
+ * @see [Usage Notes](#usage-notes)
+ *
+ * @usageNotes
+ *
+ * ### Initializing Form Controls
+ *
+ * Instantiate a `FormControl`, with an initial value.
+ *
+ * ```ts
+ * const control = new FormControl('some value');
+ * console.log(control.value);     // 'some value'
+ *```
+ *
+ * The following example initializes the control with a form state object. The `value`
+ * and `disabled` keys are required in this case.
+ *
+ * ```ts
+ * const control = new FormControl({ value: 'n/a', disabled: true });
+ * console.log(control.value);     // 'n/a'
+ * console.log(control.status);    // 'DISABLED'
+ * ```
+ *
+ * The following example initializes the control with a sync validator.
+ *
+ * ```ts
+ * const control = new FormControl('', Validators.required);
+ * console.log(control.value);      // ''
+ * console.log(control.status);     // 'INVALID'
+ * ```
+ *
+ * The following example initializes the control using an options object.
+ *
+ * ```ts
+ * const control = new FormControl('', {
+ *    validators: Validators.required,
+ *    asyncValidators: myAsyncValidator
+ * });
+ * ```
+ *
+ * ### Configure the control to update on a blur event
+ *
+ * Set the `updateOn` option to `'blur'` to update on the blur `event`.
+ *
+ * ```ts
+ * const control = new FormControl('', { updateOn: 'blur' });
+ * ```
+ *
+ * ### Configure the control to update on a submit event
+ *
+ * Set the `updateOn` option to `'submit'` to update on a submit `event`.
+ *
+ * ```ts
+ * const control = new FormControl('', { updateOn: 'submit' });
+ * ```
+ *
+ * ### Reset the control back to an initial value
+ *
+ * You reset to a specific form state by passing through a standalone
+ * value or a form state object that contains both a value and a disabled state
+ * (these are the only two properties that cannot be calculated).
+ *
+ * ```ts
+ * const control = new FormControl('Nancy');
+ *
+ * console.log(control.value); // 'Nancy'
+ *
+ * control.reset('Drew');
+ *
+ * console.log(control.value); // 'Drew'
+ * ```
+ *
+ * ### Reset the control back to an initial value and disabled
+ *
+ * ```
+ * const control = new FormControl('Nancy');
+ *
+ * console.log(control.value); // 'Nancy'
+ * console.log(control.status); // 'VALID'
+ *
+ * control.reset({ value: 'Drew', disabled: true });
+ *
+ * console.log(control.value); // 'Drew'
+ * console.log(control.status); // 'DISABLED'
+ *
+*/
+export class FormControl extends AbstractControl {
+  /** @internal */
+  _onChange: Function[] = [];
+
+  /** @internal */
+  _pendingValue: any;
+
+  /** @internal */
+  _pendingChange: any;
+
+  /**
+  * Creates a new `FormControl` instance.
+  *
+  * @param formState Initializes the control with an initial value,
+  * or an object that defines the initial value and disabled state.
+  *
+  * @param validatorOrOpts A synchronous validator function, or an array of
+  * such functions, or an `AbstractControlOptions` object that contains validation functions
+  * and a validation trigger.
+  *
+  * @param asyncValidator A single async validator or array of async validator functions
+  *
+  */
+  constructor(
+      formState: any = null,
+      validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null,
+      asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null) {
+    super(
+        coerceToValidator(validatorOrOpts),
+        coerceToAsyncValidator(asyncValidator, validatorOrOpts));
+    this._applyFormState(formState);
+    this._setUpdateStrategy(validatorOrOpts);
+    this.updateValueAndValidity({onlySelf: true, emitEvent: false});
+    this._initObservables();
+  }
+
+  /**
+   * Sets a new value for the form control.
+   *
+   * @param value The new value for the control.
+   * @param options Configuration options that determine how the control proopagates changes
+   * and emits events when the value changes.
+   * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
+   * updateValueAndValidity} method.
+   *
+   * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
+   * false.
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control value is updated.
+   * When false, no events are emitted.
+   * * `emitModelToViewChange`: When true or not supplied  (the default), each change triggers an
+   * `onChange` event to
+   * update the view.
+   * * `emitViewToModelChange`: When true or not supplied (the default), each change triggers an
+   * `ngModelChange`
+   * event to update the model.
+   *
+   */
+  setValue(value: any, options: {
+    onlySelf?: boolean,
+    emitEvent?: boolean,
+    emitModelToViewChange?: boolean,
+    emitViewToModelChange?: boolean
+  } = {}): void {
+    (this as{value: any}).value = this._pendingValue = value;
+    if (this._onChange.length && options.emitModelToViewChange !== false) {
+      this._onChange.forEach(
+          (changeFn) => changeFn(this.value, options.emitViewToModelChange !== false));
+    }
+    this.updateValueAndValidity(options);
+  }
+
+  /**
+   * Patches the value of a control.
+   *
+   * This function is functionally the same as {@link FormControl#setValue setValue} at this level.
+   * It exists for symmetry with {@link FormGroup#patchValue patchValue} on `FormGroups` and
+   * `FormArrays`, where it does behave differently.
+   *
+   * @see `setValue` for options
+   */
+  patchValue(value: any, options: {
+    onlySelf?: boolean,
+    emitEvent?: boolean,
+    emitModelToViewChange?: boolean,
+    emitViewToModelChange?: boolean
+  } = {}): void {
+    this.setValue(value, options);
+  }
+
+  /**
+   * Resets the form control, marking it `pristine` and `untouched`, and setting
+   * the value to null.
+   *
+   * @param formState Resets the control with an initial value,
+   * or an object that defines the initial value and disabled state.
+   *
+   * @param options Configuration options that determine how the control propagates changes
+   * and emits events after the value changes.
+   *
+   * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
+   * false.
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control is reset.
+   * When false, no events are emitted.
+   *
+   */
+  reset(formState: any = null, options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+    this._applyFormState(formState);
+    this.markAsPristine(options);
+    this.markAsUntouched(options);
+    this.setValue(this.value, options);
+    this._pendingChange = false;
+  }
+
+  /**
+   * @internal
+   */
+  _updateValue() {}
+
+  /**
+   * @internal
+   */
+  _anyControls(condition: Function): boolean { return false; }
+
+  /**
+   * @internal
+   */
+  _allControlsDisabled(): boolean { return this.disabled; }
+
+  /**
+   * Register a listener for change events.
+   *
+   * @param fn The method that is called when the value changes
+   */
+  registerOnChange(fn: Function): void { this._onChange.push(fn); }
+
+  /**
+   * @internal
+   */
+  _clearChangeFns(): void {
+    this._onChange = [];
+    this._onDisabledChange = [];
+    this._onCollectionChange = () => {};
+  }
+
+  /**
+   * Register a listener for disabled events.
+   *
+   * @param fn The method that is called when the disabled status changes.
+   */
+  registerOnDisabledChange(fn: (isDisabled: boolean) => void): void {
+    this._onDisabledChange.push(fn);
+  }
+
+  /**
+   * @internal
+   */
+  _forEachChild(cb: Function): void {}
+
+  /** @internal */
+  _syncPendingControls(): boolean {
+    if (this.updateOn === 'submit') {
+      if (this._pendingDirty) this.markAsDirty();
+      if (this._pendingTouched) this.markAsTouched();
+      if (this._pendingChange) {
+        this.setValue(this._pendingValue, {onlySelf: true, emitModelToViewChange: false});
+        return true;
+      }
+    }
+    return false;
+  }
+
+  private _applyFormState(formState: any) {
+    if (this._isBoxedValue(formState)) {
+      (this as{value: any}).value = this._pendingValue = formState.value;
+      formState.disabled ? this.disable({onlySelf: true, emitEvent: false}) :
+                           this.enable({onlySelf: true, emitEvent: false});
+    } else {
+      (this as{value: any}).value = this._pendingValue = formState;
+    }
+  }
+}
+
+/**
+ * Tracks the value and validity state of a group of `FormControl` instances.
+ *
+ * A `FormGroup` aggregates the values of each child `FormControl` into one object,
+ * with each control name as the key.  It calculates its status by reducing the status values
+ * of its children. For example, if one of the controls in a group is invalid, the entire
+ * group becomes invalid.
+ *
+ * `FormGroup` is one of the three fundamental building blocks used to define forms in Angular,
+ * along with `FormControl` and `FormArray`.
+ *
+ * When instantiating a `FormGroup`, pass in a collection of child controls as the first
+ * argument. The key for each child registers the name for the control.
+ *
+ * @usageNotes
+ *
+ * ### Create a form group with 2 controls
+ *
+ * ```
+ * const form = new FormGroup({
+ *   first: new FormControl('Nancy', Validators.minLength(2)),
+ *   last: new FormControl('Drew'),
+ * });
+ *
+ * console.log(form.value);   // {first: 'Nancy', last; 'Drew'}
+ * console.log(form.status);  // 'VALID'
+ * ```
+ *
+ * ### Create a form group with a group-level validator
+ *
+ * You include group-level validators as the second arg, or group-level async
+ * validators as the third arg. These come in handy when you want to perform validation
+ * that considers the value of more than one child control.
+ *
+ * ```
+ * const form = new FormGroup({
+ *   password: new FormControl('', Validators.minLength(2)),
+ *   passwordConfirm: new FormControl('', Validators.minLength(2)),
+ * }, passwordMatchValidator);
+ *
+ *
+ * function passwordMatchValidator(g: FormGroup) {
+ *    return g.get('password').value === g.get('passwordConfirm').value
+ *       ? null : {'mismatch': true};
+ * }
+ * ```
+ *
+ * Like `FormControl` instances, you choose to pass in
+ * validators and async validators as part of an options object.
+ *
+ * ```
+ * const form = new FormGroup({
+ *   password: new FormControl('')
+ *   passwordConfirm: new FormControl('')
+ * }, { validators: passwordMatchValidator, asyncValidators: otherValidator });
+ * ```
+ *
+ * ### Set the updateOn property for all controls in a form group
+ *
+ * The options object is used to set a default value for each child
+ * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
+ * group level, all child controls default to 'blur', unless the child
+ * has explicitly specified a different `updateOn` value.
+ *
+ * ```ts
+ * const c = new FormGroup({
+ *   one: new FormControl()
+ * }, { updateOn: 'blur' });
+ * ```
+ */
+export class FormGroup extends AbstractControl {
+  /**
+  * Creates a new `FormGroup` instance.
+  *
+  * @param controls A collection of child controls. The key for each child is the name
+  * under which it is registered.
+  *
+  * @param validatorOrOpts A synchronous validator function, or an array of
+  * such functions, or an `AbstractControlOptions` object that contains validation functions
+  * and a validation trigger.
+  *
+  * @param asyncValidator A single async validator or array of async validator functions
+  *
+  */
+  constructor(
+      public controls: {[key: string]: AbstractControl},
+      validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null,
+      asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null) {
+    super(
+        coerceToValidator(validatorOrOpts),
+        coerceToAsyncValidator(asyncValidator, validatorOrOpts));
+    this._initObservables();
+    this._setUpdateStrategy(validatorOrOpts);
+    this._setUpControls();
+    this.updateValueAndValidity({onlySelf: true, emitEvent: false});
+  }
+
+  /**
+   * Registers a control with the group's list of controls.
+   *
+   * This method does not update the value or validity of the control.
+   * Use {@link FormGroup#addControl addControl} instead.
+   *
+   * @param name The control name to register in the collection
+   * @param control Provides the control for the given name
+   */
+  registerControl(name: string, control: AbstractControl): AbstractControl {
+    if (this.controls[name]) return this.controls[name];
+    this.controls[name] = control;
+    control.setParent(this);
+    control._registerOnCollectionChange(this._onCollectionChange);
+    return control;
+  }
+
+  /**
+   * Add a control to this group.
+   *
+   * This method also updates the value and validity of the control.
+   *
+   * @param name The control name to add to the collection
+   * @param control Provides the control for the given name
+   */
+  addControl(name: string, control: AbstractControl): void {
+    this.registerControl(name, control);
+    this.updateValueAndValidity();
+    this._onCollectionChange();
+  }
+
+  /**
+   * Remove a control from this group.
+   *
+   * @param name The control name to remove from the collection
+   */
+  removeControl(name: string): void {
+    if (this.controls[name]) this.controls[name]._registerOnCollectionChange(() => {});
+    delete (this.controls[name]);
+    this.updateValueAndValidity();
+    this._onCollectionChange();
+  }
+
+  /**
+   * Replace an existing control.
+   *
+   * @param name The control name to replace in the collection
+   * @param control Provides the control for the given name
+   */
+  setControl(name: string, control: AbstractControl): void {
+    if (this.controls[name]) this.controls[name]._registerOnCollectionChange(() => {});
+    delete (this.controls[name]);
+    if (control) this.registerControl(name, control);
+    this.updateValueAndValidity();
+    this._onCollectionChange();
+  }
+
+  /**
+   * Check whether there is an enabled control with the given name in the group.
+   *
+   * Reports false for disabled controls. If you'd like to check for existence in the group
+   * only, use {@link AbstractControl#get get} instead.
+   *
+   * @param name The control name to check for existence in the collection
+   *
+   * @returns false for disabled controls, true otherwise.
+   */
+  contains(controlName: string): boolean {
+    return this.controls.hasOwnProperty(controlName) && this.controls[controlName].enabled;
+  }
+
+  /**
+   * Sets the value of the `FormGroup`. It accepts an object that matches
+   * the structure of the group, with control names as keys.
+   *
+   * ### Set the complete value for the form group
+   *
+   * ```
+   * const form = new FormGroup({
+   *   first: new FormControl(),
+   *   last: new FormControl()
+   * });
+   *
+   * console.log(form.value);   // {first: null, last: null}
+   *
+   * form.setValue({first: 'Nancy', last: 'Drew'});
+   * console.log(form.value);   // {first: 'Nancy', last: 'Drew'}
+   *
+   * ```
+   * @throws When strict checks fail, such as setting the value of a control
+   * that doesn't exist or if you excluding the value of a control.
+   *
+   * @param value The new value for the control that matches the structure of the group.
+   * @param options Configuration options that determine how the control propagates changes
+   * and emits events after the value changes.
+   * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
+   * updateValueAndValidity} method.
+   *
+   * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
+   * false.
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control value is updated.
+   * When false, no events are emitted.
+   */
+  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: options.emitEvent});
+    });
+    this.updateValueAndValidity(options);
+  }
+
+  /**
+   * Patches the value of the `FormGroup`. It accepts an object with control
+   * names as keys, and does its best to match the values to the correct controls
+   * in the group.
+   *
+   * It accepts both super-sets and sub-sets of the group without throwing an error.
+   *
+   * ### Patch the value for a form group
+   *
+   *  ```
+   *  const form = new FormGroup({
+   *     first: new FormControl(),
+   *     last: new FormControl()
+   *  });
+   *  console.log(form.value);   // {first: null, last: null}
+   *
+   *  form.patchValue({first: 'Nancy'});
+   *  console.log(form.value);   // {first: 'Nancy', last: null}
+   *
+   *  ```
+   *
+   * @param value The object that matches the structure of the group
+   * @param options Configure options that determines how the control propagates changes and
+   * emits events after the value is patched
+   * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
+   * true.
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control value is updated.
+   * When false, no events are emitted.
+   * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
+   * updateValueAndValidity} method.
+   */
+  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: options.emitEvent});
+      }
+    });
+    this.updateValueAndValidity(options);
+  }
+
+  /**
+   * Resets the `FormGroup`, marks all descendants are marked `pristine` and `untouched`, and
+   * the value of all descendants to null.
+   *
+   * You reset to a specific form state by passing in a map of states
+   * that matches the structure of your form, with control names as keys. The state
+   * is a standalone value or a form state object with both a value and a disabled
+   * status.
+   *
+   * @param formState Resets the control with an initial value,
+   * or an object that defines the initial value and disabled state.
+   *
+   * @param options Configuration options that determine how the control propagates changes
+   * and emits events when the group is reset.
+   * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
+   * false.
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control is reset.
+   * When false, no events are emitted.
+   * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
+   * updateValueAndValidity} method.
+   *
+   * @usageNotes
+   *
+   * ### Reset the form group values
+   *
+   * ```ts
+   * const form = new FormGroup({
+   *   first: new FormControl('first name'),
+   *   last: new FormControl('last name')
+   * });
+   *
+   * console.log(form.value);  // {first: 'first name', last: 'last name'}
+   *
+   * form.reset({ first: 'name', last: 'last name' });
+   *
+   * console.log(form.value);  // {first: 'name', last: 'last name'}
+   * ```
+   *
+   * ### Reset the form group values and disabled status
+   *
+   * ```
+   * const form = new FormGroup({
+   *   first: new FormControl('first name'),
+   *   last: new FormControl('last name')
+   * });
+   *
+   * form.reset({
+   *   first: {value: 'name', disabled: true},
+   *   last: 'last'
+   * });
+   *
+   * console.log(this.form.value);  // {first: 'name', last: 'last name'}
+   * console.log(this.form.get('first').status);  // 'DISABLED'
+   * ```
+   */
+  reset(value: any = {}, options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+    this._forEachChild((control: AbstractControl, name: string) => {
+      control.reset(value[name], {onlySelf: true, emitEvent: options.emitEvent});
+    });
+    this.updateValueAndValidity(options);
+    this._updatePristine(options);
+    this._updateTouched(options);
+  }
+
+  /**
+   * The aggregate value of the `FormGroup`, including any disabled controls.
+   *
+   * Retrieves all values regardless of disabled status.
+   * The `value` property is the best way to get the value of the group, because
+   * it excludes disabled controls in the `FormGroup`.
+   */
+  getRawValue(): any {
+    return this._reduceChildren(
+        {}, (acc: {[k: string]: AbstractControl}, control: AbstractControl, name: string) => {
+          acc[name] = control instanceof FormControl ? control.value : (<any>control).getRawValue();
+          return acc;
+        });
+  }
+
+  /** @internal */
+  _syncPendingControls(): boolean {
+    let subtreeUpdated = this._reduceChildren(false, (updated: boolean, child: AbstractControl) => {
+      return child._syncPendingControls() ? true : updated;
+    });
+    if (subtreeUpdated) this.updateValueAndValidity({onlySelf: true});
+    return subtreeUpdated;
+  }
+
+  /** @internal */
+  _throwIfControlMissing(name: string): void {
+    if (!Object.keys(this.controls).length) {
+      throw new Error(`
+        There are no form controls registered with this group yet.  If you're using ngModel,
+        you may want to check next tick (e.g. use setTimeout).
+      `);
+    }
+    if (!this.controls[name]) {
+      throw new Error(`Cannot find form control with name: ${name}.`);
+    }
+  }
+
+  /** @internal */
+  _forEachChild(cb: (v: any, k: string) => void): void {
+    Object.keys(this.controls).forEach(k => cb(this.controls[k], k));
+  }
+
+  /** @internal */
+  _setUpControls(): void {
+    this._forEachChild((control: AbstractControl) => {
+      control.setParent(this);
+      control._registerOnCollectionChange(this._onCollectionChange);
+    });
+  }
+
+  /** @internal */
+  _updateValue(): void { (this as{value: any}).value = this._reduceValue(); }
+
+  /** @internal */
+  _anyControls(condition: Function): boolean {
+    let res = false;
+    this._forEachChild((control: AbstractControl, name: string) => {
+      res = res || (this.contains(name) && condition(control));
+    });
+    return res;
+  }
+
+  /** @internal */
+  _reduceValue() {
+    return this._reduceChildren(
+        {}, (acc: {[k: string]: AbstractControl}, control: AbstractControl, name: string) => {
+          if (control.enabled || this.disabled) {
+            acc[name] = control.value;
+          }
+          return acc;
+        });
+  }
+
+  /** @internal */
+  _reduceChildren(initValue: any, fn: Function) {
+    let res = initValue;
+    this._forEachChild(
+        (control: AbstractControl, name: string) => { res = fn(res, control, name); });
+    return res;
+  }
+
+  /** @internal */
+  _allControlsDisabled(): boolean {
+    for (const controlName of Object.keys(this.controls)) {
+      if (this.controls[controlName].enabled) {
+        return false;
+      }
+    }
+    return Object.keys(this.controls).length > 0 || this.disabled;
+  }
+
+  /** @internal */
+  _checkAllValuesPresent(value: any): void {
+    this._forEachChild((control: AbstractControl, name: string) => {
+      if (value[name] === undefined) {
+        throw new Error(`Must supply a value for form control with name: '${name}'.`);
+      }
+    });
+  }
+}
+
+/**
+ * Tracks the value and validity state of an array of `FormControl`,
+ * `FormGroup` or `FormArray` instances.
+ *
+ * A `FormArray` aggregates the values of each child `FormControl` into an array.
+ * It calculates its status by reducing the status values of its children. For example, if one of
+ * the controls in a `FormArray` is invalid, the entire array becomes invalid.
+ *
+ * `FormArray` is one of the three fundamental building blocks used to define forms in Angular,
+ * along with `FormControl` and `FormGroup`.
+ *
+ * @usageNotes
+ *
+ * ### Create an array of form controls
+ *
+ * ```
+ * const arr = new FormArray([
+ *   new FormControl('Nancy', Validators.minLength(2)),
+ *   new FormControl('Drew'),
+ * ]);
+ *
+ * console.log(arr.value);   // ['Nancy', 'Drew']
+ * console.log(arr.status);  // 'VALID'
+ * ```
+ *
+ * ### Create a form array with array-level validators
+ *
+ * You include array-level validators and async validators. These come in handy
+ * when you want to perform validation that considers the value of more than one child
+ * control.
+ *
+ * The two types of validators are passed in separately as the second and third arg
+ * respectively, or together as part of an options object.
+ *
+ * ```
+ * const arr = new FormArray([
+ *   new FormControl('Nancy'),
+ *   new FormControl('Drew')
+ * ], {validators: myValidator, asyncValidators: myAsyncValidator});
+ * ```
+ *
+  * ### Set the updateOn property for all controls in a form array
+ *
+ * The options object is used to set a default value for each child
+ * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
+ * array level, all child controls default to 'blur', unless the child
+ * has explicitly specified a different `updateOn` value.
+ *
+ * ```ts
+ * const arr = new FormArray([
+ *    new FormControl()
+ * ], {updateOn: 'blur'});
+ * ```
+ *
+ * ### Adding or removing controls from a form array
+ *
+ * To change the controls in the array, use the `push`, `insert`, or `removeAt` methods
+ * in `FormArray` itself. These methods ensure the controls are properly tracked in the
+ * form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
+ * the `FormArray` directly, as that result in strange and unexpected behavior such
+ * as broken change detection.
+ *
+ *
+ */
+export class FormArray extends AbstractControl {
+  /**
+  * Creates a new `FormArray` instance.
+  *
+  * @param controls An array of child controls. Each child control is given an index
+  * wheh it is registered.
+  *
+  * @param validatorOrOpts A synchronous validator function, or an array of
+  * such functions, or an `AbstractControlOptions` object that contains validation functions
+  * and a validation trigger.
+  *
+  * @param asyncValidator A single async validator or array of async validator functions
+  *
+  */
+  constructor(
+      public controls: AbstractControl[],
+      validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null,
+      asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null) {
+    super(
+        coerceToValidator(validatorOrOpts),
+        coerceToAsyncValidator(asyncValidator, validatorOrOpts));
+    this._initObservables();
+    this._setUpdateStrategy(validatorOrOpts);
+    this._setUpControls();
+    this.updateValueAndValidity({onlySelf: true, emitEvent: false});
+  }
+
+  /**
+   * Get the `AbstractControl` at the given `index` in the array.
+   *
+   * @param index Index in the array to retrieve the control
+   */
+  at(index: number): AbstractControl { return this.controls[index]; }
+
+  /**
+   * Insert a new `AbstractControl` at the end of the array.
+   *
+   * @param control Form control to be inserted
+   */
+  push(control: AbstractControl): void {
+    this.controls.push(control);
+    this._registerControl(control);
+    this.updateValueAndValidity();
+    this._onCollectionChange();
+  }
+
+  /**
+   * Insert a new `AbstractControl` at the given `index` in the array.
+   *
+   * @param index Index in the array to insert the control
+   * @param control Form control to be inserted
+   */
+  insert(index: number, control: AbstractControl): void {
+    this.controls.splice(index, 0, control);
+
+    this._registerControl(control);
+    this.updateValueAndValidity();
+  }
+
+  /**
+   * Remove the control at the given `index` in the array.
+   *
+   * @param index Index in the array to remove the control
+   */
+  removeAt(index: number): void {
+    if (this.controls[index]) this.controls[index]._registerOnCollectionChange(() => {});
+    this.controls.splice(index, 1);
+    this.updateValueAndValidity();
+  }
+
+  /**
+   * Replace an existing control.
+   *
+   * @param index Index in the array to replace the control
+   * @param control The `AbstractControl` control to replace the existing control
+   */
+  setControl(index: number, control: AbstractControl): void {
+    if (this.controls[index]) this.controls[index]._registerOnCollectionChange(() => {});
+    this.controls.splice(index, 1);
+
+    if (control) {
+      this.controls.splice(index, 0, control);
+      this._registerControl(control);
+    }
+
+    this.updateValueAndValidity();
+    this._onCollectionChange();
+  }
+
+  /**
+   * Length of the control array.
+   */
+  get length(): number { return this.controls.length; }
+
+  /**
+   * Sets the value of the `FormArray`. It accepts an array that matches
+   * the structure of the control.
+   *
+   * This method performs strict checks, and throws an error if you try
+   * to set the value of a control that doesn't exist or if you exclude the
+   * value of a control.
+   *
+   * ### Set the values for the controls in the form array
+   *
+   * ```
+   * const arr = new FormArray([
+   *   new FormControl(),
+   *   new FormControl()
+   * ]);
+   * console.log(arr.value);   // [null, null]
+   *
+   * arr.setValue(['Nancy', 'Drew']);
+   * console.log(arr.value);   // ['Nancy', 'Drew']
+   * ```
+   *
+   * @param value Array of values for the controls
+   * @param options Configure options that determine how the control propagates changes and
+   * emits events after the value changes
+   *
+   * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
+   * is false.
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control value is updated.
+   * When false, no events are emitted.
+   * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
+   * updateValueAndValidity} method.
+   */
+  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: options.emitEvent});
+    });
+    this.updateValueAndValidity(options);
+  }
+
+  /**
+   * Patches the value of the `FormArray`. It accepts an array that matches the
+   * structure of the control, and does its best to match the values to the correct
+   * controls in the group.
+   *
+   * It accepts both super-sets and sub-sets of the array without throwing an error.
+   *
+   * ### Patch the values for controls in a form array
+   *
+   * ```
+   * const arr = new FormArray([
+   *    new FormControl(),
+   *    new FormControl()
+   * ]);
+   * console.log(arr.value);   // [null, null]
+   *
+   * arr.patchValue(['Nancy']);
+   * console.log(arr.value);   // ['Nancy', null]
+   * ```
+   *
+   * @param value Array of latest values for the controls
+   * @param options Configure options that determine how the control propagates changes and
+   * emits events after the value changes
+   *
+   * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
+   * is false.
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control value is updated.
+   * When false, no events are emitted.
+   * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
+   * updateValueAndValidity} method.
+   */
+  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: options.emitEvent});
+      }
+    });
+    this.updateValueAndValidity(options);
+  }
+
+  /**
+   * Resets the `FormArray` and all descendants are marked `pristine` and `untouched`, and the
+   * value of all descendants to null or null maps.
+   *
+   * You reset to a specific form state by passing in an array of states
+   * that matches the structure of the control. The state is a standalone value
+   * or a form state object with both a value and a disabled status.
+   *
+   * ### Reset the values in a form array
+   *
+   * ```ts
+   * const arr = new FormArray([
+   *    new FormControl(),
+   *    new FormControl()
+   * ]);
+   * arr.reset(['name', 'last name']);
+   *
+   * console.log(this.arr.value);  // ['name', 'last name']
+   * ```
+   *
+   * ### Reset the values in a form array and the disabled status for the first control
+   *
+   * ```
+   * this.arr.reset([
+   *   {value: 'name', disabled: true},
+   *   'last'
+   * ]);
+   *
+   * console.log(this.arr.value);  // ['name', 'last name']
+   * console.log(this.arr.get(0).status);  // 'DISABLED'
+   * ```
+   *
+   * @param value Array of values for the controls
+   * @param options Configure options that determine how the control propagates changes and
+   * emits events after the value changes
+   *
+   * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
+   * is false.
+   * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   * observables emit events with the latest status and value when the control is reset.
+   * When false, no events are emitted.
+   * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
+   * updateValueAndValidity} method.
+   */
+  reset(value: any = [], options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+    this._forEachChild((control: AbstractControl, index: number) => {
+      control.reset(value[index], {onlySelf: true, emitEvent: options.emitEvent});
+    });
+    this.updateValueAndValidity(options);
+    this._updatePristine(options);
+    this._updateTouched(options);
+  }
+
+  /**
+   * The aggregate value of the array, including any disabled controls.
+   *
+   * Reports all values regardless of disabled status.
+   * For enabled controls only, the `value` property is the best way to get the value of the array.
+   */
+  getRawValue(): any[] {
+    return this.controls.map((control: AbstractControl) => {
+      return control instanceof FormControl ? control.value : (<any>control).getRawValue();
+    });
+  }
+
+  /** @internal */
+  _syncPendingControls(): boolean {
+    let subtreeUpdated = this.controls.reduce((updated: boolean, child: AbstractControl) => {
+      return child._syncPendingControls() ? true : updated;
+    }, false);
+    if (subtreeUpdated) this.updateValueAndValidity({onlySelf: true});
+    return subtreeUpdated;
+  }
+
+  /** @internal */
+  _throwIfControlMissing(index: number): void {
+    if (!this.controls.length) {
+      throw new Error(`
+        There are no form controls registered with this array yet.  If you're using ngModel,
+        you may want to check next tick (e.g. use setTimeout).
+      `);
+    }
+    if (!this.at(index)) {
+      throw new Error(`Cannot find form control at index ${index}`);
+    }
+  }
+
+  /** @internal */
+  _forEachChild(cb: Function): void {
+    this.controls.forEach((control: AbstractControl, index: number) => { cb(control, index); });
+  }
+
+  /** @internal */
+  _updateValue(): void {
+    (this as{value: any}).value =
+        this.controls.filter((control) => control.enabled || this.disabled)
+            .map((control) => control.value);
+  }
+
+  /** @internal */
+  _anyControls(condition: Function): boolean {
+    return this.controls.some((control: AbstractControl) => control.enabled && condition(control));
+  }
+
+  /** @internal */
+  _setUpControls(): void {
+    this._forEachChild((control: AbstractControl) => this._registerControl(control));
+  }
+
+  /** @internal */
+  _checkAllValuesPresent(value: any): void {
+    this._forEachChild((control: AbstractControl, i: number) => {
+      if (value[i] === undefined) {
+        throw new Error(`Must supply a value for form control at index: ${i}.`);
+      }
+    });
+  }
+
+  /** @internal */
+  _allControlsDisabled(): boolean {
+    for (const control of this.controls) {
+      if (control.enabled) return false;
+    }
+    return this.controls.length > 0 || this.disabled;
+  }
+
+  private _registerControl(control: AbstractControl) {
+    control.setParent(this);
+    control._registerOnCollectionChange(this._onCollectionChange);
+  }
+}
diff --git a/packages/forms/src/validators.ts b/packages/forms/src/validators.ts
new file mode 100644
index 000000000000..d871f0daa7bf
--- /dev/null
+++ b/packages/forms/src/validators.ts
@@ -0,0 +1,393 @@
+/**
+ * @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, ɵisObservable as isObservable, ɵisPromise as isPromise} from '@angular/core';
+import {Observable, forkJoin, from} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {AsyncValidatorFn, ValidationErrors, Validator, ValidatorFn} from './directives/validators';
+import {AbstractControl, FormControl} from './model';
+
+function isEmptyInputValue(value: any): boolean {
+  // we don't check for string here so it also works with arrays
+  return value == null || value.length === 0;
+}
+
+/**
+ * @description
+ * An `InjectionToken` for registering additional synchronous validators used with `AbstractControl`s.
+ *
+ * @see `NG_ASYNC_VALIDATORS`
+ * 
+ * @usageNotes
+ * 
+ * ### Providing a custom validator
+ * 
+ * The following example registers a custom validator directive. Adding the validator to the 
+ * existing collection of validators requires the `multi: true` option.
+ *
+ * ```typescript
+ * @Directive({
+ *   selector: '[customValidator]',
+ *   providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
+ * })
+ * class CustomValidatorDirective implements Validator {
+ *   validate(control: AbstractControl): ValidationErrors | null {
+ *     return { 'custom': true };
+ *   }
+ * }
+ * ```
+ *
+ */
+export const NG_VALIDATORS = new InjectionToken<Array<Validator|Function>>('NgValidators');
+
+/**
+ * @description
+ * An `InjectionToken` for registering additional asynchronous validators used with `AbstractControl`s.
+ *
+ * @see `NG_VALIDATORS`
+ * 
+ */
+export const NG_ASYNC_VALIDATORS =
+    new InjectionToken<Array<Validator|Function>>('NgAsyncValidators');
+
+const EMAIL_REGEXP =
+    /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
+
+/**
+ * @description
+ * Provides a set of built-in validators that can be used by form controls.
+ *
+ * A validator is a function that processes a `FormControl` or collection of
+ * controls and returns an error map or null. A null map means that validation has passed.
+ * 
+ * @see [Form Validation](/guide/form-validation)
+ *
+ */
+export class Validators {
+  /**
+   * @description
+   * Validator that requires the control's value to be greater than or equal to the provided number.
+   * The validator exists only as a function and not as a directive.
+   *
+   * @usageNotes
+   *
+   * ### Validate against a minimum of 3
+   *
+   * ```typescript
+   * const control = new FormControl(2, Validators.min(3));
+   *
+   * console.log(control.errors); // {min: {min: 3, actual: 2}}
+   * ```
+   *
+   * @returns A validator function that returns an error map with the
+   * `min` property if the validation check fails, otherwise `null`.
+   *
+   */
+  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;
+    };
+  }
+
+  /**
+   * @description
+   * Validator that requires the control's value to be less than or equal to the provided number.
+   * The validator exists only as a function and not as a directive.
+   *
+   * @usageNotes
+   *
+   * ### Validate against a maximum of 15
+   *
+   * ```typescript
+   * const control = new FormControl(16, Validators.max(15));
+   *
+   * console.log(control.errors); // {max: {max: 15, actual: 16}}
+   * ```
+   *
+   * @returns A validator function that returns an error map with the
+   * `max` property if the validation check fails, otherwise `null`.
+   *
+   */
+  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;
+    };
+  }
+
+  /**
+   * @description
+   * Validator that requires the control have a non-empty value.
+   *
+   * @usageNotes
+   *
+   * ### Validate that the field is non-empty
+   *
+   * ```typescript
+   * const control = new FormControl('', Validators.required);
+   *
+   * console.log(control.errors); // {required: true}
+   * ```
+   *
+   * @returns An error map with the `required` property
+   * if the validation check fails, otherwise `null`.
+   *
+   */
+  static required(control: AbstractControl): ValidationErrors|null {
+    return isEmptyInputValue(control.value) ? {'required': true} : null;
+  }
+
+  /**
+   * @description
+   * Validator that requires the control's value be true. This validator is commonly
+   * used for required checkboxes.
+   *
+   * @usageNotes
+   *
+   * ### Validate that the field value is true
+   *
+   * ```typescript
+   * const control = new FormControl('', Validators.requiredTrue);
+   *
+   * console.log(control.errors); // {required: true}
+   * ```
+   *
+   * @returns An error map that contains the `required` property
+   * set to `true` if the validation check fails, otherwise `null`.
+   */
+  static requiredTrue(control: AbstractControl): ValidationErrors|null {
+    return control.value === true ? null : {'required': true};
+  }
+
+  /**
+   * @description
+   * Validator that requires the control's value pass an email validation test.
+   *
+   * @usageNotes
+   *
+   * ### Validate that the field matches a valid email pattern
+   *
+   * ```typescript
+   * const control = new FormControl('bad@', Validators.email);
+   *
+   * console.log(control.errors); // {email: true}
+   * ```
+   *
+   * @returns An error map with the `email` property
+   * if the validation check fails, otherwise `null`.
+   *
+   */
+  static email(control: AbstractControl): ValidationErrors|null {
+    if (isEmptyInputValue(control.value)) {
+      return null;  // don't validate empty values to allow optional controls
+    }
+    return EMAIL_REGEXP.test(control.value) ? null : {'email': true};
+  }
+
+  /**
+   * @description
+   * Validator that requires the length of the control's value to be greater than or equal
+   * to the provided minimum length. This validator is also provided by default if you use the
+   * the HTML5 `minlength` attribute.
+   *
+   * @usageNotes
+   *
+   * ### Validate that the field has a minimum of 3 characters
+   *
+   * ```typescript
+   * const control = new FormControl('ng', Validators.minLength(3));
+   *
+   * console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}
+   * ```
+   *
+   * ```html
+   * <input minlength="5">
+   * ```
+   *
+   * @returns A validator function that returns an error map with the
+   * `minlength` if the validation check fails, otherwise `null`.
+   */
+  static minLength(minLength: number): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (isEmptyInputValue(control.value)) {
+        return null;  // don't validate empty values to allow optional controls
+      }
+      const length: number = control.value ? control.value.length : 0;
+      return length < minLength ?
+          {'minlength': {'requiredLength': minLength, 'actualLength': length}} :
+          null;
+    };
+  }
+
+  /**
+   * @description
+   * Validator that requires the length of the control's value to be less than or equal
+   * to the provided maximum length. This validator is also provided by default if you use the
+   * the HTML5 `maxlength` attribute.
+   *
+   * @usageNotes
+   *
+   * ### Validate that the field has maximum of 5 characters
+   *
+   * ```typescript
+   * const control = new FormControl('Angular', Validators.maxLength(5));
+   *
+   * console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}
+   * ```
+   *
+   * ```html
+   * <input maxlength="5">
+   * ```
+   *
+   * @returns A validator function that returns an error map with the
+   * `maxlength` property if the validation check fails, otherwise `null`.
+   */
+  static maxLength(maxLength: number): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const length: number = control.value ? control.value.length : 0;
+      return length > maxLength ?
+          {'maxlength': {'requiredLength': maxLength, 'actualLength': length}} :
+          null;
+    };
+  }
+
+  /**
+   * @description
+   * Validator that requires the control's value to match a regex pattern. This validator is also
+   * provided
+   * by default if you use the HTML5 `pattern` attribute.
+   *
+   * @usageNotes
+   *
+   * ### Validate that the field only contains letters or spaces
+   *
+   * ```typescript
+   * const control = new FormControl('1', Validators.pattern('[a-zA-Z ]*'));
+   *
+   * console.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}
+   * ```
+   *
+   * ```html
+   * <input pattern="[a-zA-Z ]*">
+   * ```
+   *
+   * @returns A validator function that returns an error map with the
+   * `pattern` property if the validation check fails, otherwise `null`.
+   */
+  static pattern(pattern: string|RegExp): ValidatorFn {
+    if (!pattern) return Validators.nullValidator;
+    let regex: RegExp;
+    let regexStr: string;
+    if (typeof pattern === 'string') {
+      regexStr = '';
+
+      if (pattern.charAt(0) !== '^') regexStr += '^';
+
+      regexStr += pattern;
+
+      if (pattern.charAt(pattern.length - 1) !== '$') regexStr += '$';
+
+      regex = new RegExp(regexStr);
+    } else {
+      regexStr = pattern.toString();
+      regex = pattern;
+    }
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (isEmptyInputValue(control.value)) {
+        return null;  // don't validate empty values to allow optional controls
+      }
+      const value: string = control.value;
+      return regex.test(value) ? null :
+                                 {'pattern': {'requiredPattern': regexStr, 'actualValue': value}};
+    };
+  }
+
+  /**
+   * @description
+   * Validator that performs no operation.
+   */
+  static nullValidator(c: AbstractControl): ValidationErrors|null { return null; }
+
+  /**
+   * @description
+   * Compose multiple validators into a single function that returns the union
+   * of the individual error maps for the provided control.
+   *
+   * @returns A validator function that returns an error map with the
+   * merged error maps of the validators if the validation check fails, otherwise `null`.
+   */
+  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: ValidatorFn[] = validators.filter(isPresent) as any;
+    if (presentValidators.length == 0) return null;
+
+    return function(control: AbstractControl) {
+      return _mergeErrors(_executeValidators(control, presentValidators));
+    };
+  }
+
+  /**
+   * @description
+   * Compose multiple async validators into a single function that returns the union
+   * of the individual error objects for the provided control.
+   *
+   * @returns A validator function that returns an error map with the
+   * merged error objects of the async validators if the validation check fails, otherwise `null`.
+  */
+  static composeAsync(validators: (AsyncValidatorFn|null)[]): AsyncValidatorFn|null {
+    if (!validators) return null;
+    const presentValidators: AsyncValidatorFn[] = validators.filter(isPresent) as any;
+    if (presentValidators.length == 0) return null;
+
+    return function(control: AbstractControl) {
+      const observables = _executeAsyncValidators(control, presentValidators).map(toObservable);
+      return forkJoin(observables).pipe(map(_mergeErrors));
+    };
+  }
+}
+
+function isPresent(o: any): boolean {
+  return o != null;
+}
+
+export function toObservable(r: any): Observable<any> {
+  const obs = isPromise(r) ? from(r) : r;
+  if (!(isObservable(obs))) {
+    throw new Error(`Expected validator to return Promise or Observable.`);
+  }
+  return obs;
+}
+
+function _executeValidators(control: AbstractControl, validators: ValidatorFn[]): any[] {
+  return validators.map(v => v(control));
+}
+
+function _executeAsyncValidators(control: AbstractControl, validators: AsyncValidatorFn[]): any[] {
+  return validators.map(v => v(control));
+}
+
+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 Object.keys(res).length === 0 ? null : res;
+}
diff --git a/packages/forms/src/version.ts b/packages/forms/src/version.ts
new file mode 100644
index 000000000000..af66f0fa278a
--- /dev/null
+++ b/packages/forms/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/core';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/forms/test/BUILD.bazel b/packages/forms/test/BUILD.bazel
new file mode 100644
index 000000000000..7daeea939162
--- /dev/null
+++ b/packages/forms/test/BUILD.bazel
@@ -0,0 +1,33 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/forms",
+        "//packages/platform-browser",
+        "//packages/platform-browser/testing",
+        "@rxjs",
+        "@rxjs//operators",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/forms/test/directives_spec.ts b/packages/forms/test/directives_spec.ts
new file mode 100644
index 000000000000..0876818c2a48
--- /dev/null
+++ b/packages/forms/test/directives_spec.ts
@@ -0,0 +1,690 @@
+/**
+ * @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 {SimpleChange} from '@angular/core';
+import {fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {AbstractControl, CheckboxControlValueAccessor, ControlValueAccessor, DefaultValueAccessor, FormArray, FormArrayName, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, NgControl, NgForm, NgModel, NgModelGroup, SelectControlValueAccessor, SelectMultipleControlValueAccessor, ValidationErrors, Validator, Validators} from '@angular/forms';
+import {composeValidators, selectValueAccessor} from '@angular/forms/src/directives/shared';
+import {SpyNgControl, SpyValueAccessor} from './spies';
+
+class DummyControlValueAccessor implements ControlValueAccessor {
+  writtenValue: any;
+
+  registerOnChange(fn: any) {}
+  registerOnTouched(fn: any) {}
+
+  writeValue(obj: any): void { this.writtenValue = obj; }
+}
+
+class CustomValidatorDirective implements Validator {
+  validate(c: FormControl): ValidationErrors { return {'custom': true}; }
+}
+
+function asyncValidator(expected: any, timeout = 0) {
+  return (c: AbstractControl): any => {
+    let resolve: (result: any) => void = undefined !;
+    const promise = new Promise(res => { resolve = res; });
+    const res = c.value != expected ? {'async': true} : null;
+    if (timeout == 0) {
+      resolve(res);
+    } else {
+      setTimeout(() => { resolve(res); }, timeout);
+    }
+    return promise;
+  };
+}
+
+{
+  describe('Form Directives', () => {
+    let defaultAccessor: DefaultValueAccessor;
+
+    beforeEach(() => { defaultAccessor = new DefaultValueAccessor(null !, null !, null !); });
+
+    describe('shared', () => {
+      describe('selectValueAccessor', () => {
+        let dir: NgControl;
+
+        beforeEach(() => { dir = <any>new SpyNgControl(); });
+
+        it('should throw when given an empty array',
+           () => { expect(() => selectValueAccessor(dir, [])).toThrowError(); });
+
+        it('should throw when accessor is not provided as array', () => {
+          expect(() => selectValueAccessor(dir, {} as any[]))
+              .toThrowError(
+                  `Value accessor was not provided as an array for form control with unspecified name attribute`);
+        });
+
+        it('should return the default value accessor when no other provided',
+           () => { expect(selectValueAccessor(dir, [defaultAccessor])).toEqual(defaultAccessor); });
+
+        it('should return checkbox accessor when provided', () => {
+          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 !);
+          expect(selectValueAccessor(dir, [
+            defaultAccessor, selectAccessor
+          ])).toEqual(selectAccessor);
+        });
+
+        it('should return select multiple accessor when provided', () => {
+          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 !);
+          expect(() => selectValueAccessor(dir, [checkboxAccessor, selectAccessor])).toThrowError();
+        });
+
+        it('should return custom accessor when provided', () => {
+          const customAccessor: ControlValueAccessor = new SpyValueAccessor() as any;
+          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: ControlValueAccessor = new SpyValueAccessor() as any;
+          const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null !, null !);
+          expect(selectValueAccessor(
+                     dir, <any>[defaultAccessor, customAccessor, selectMultipleAccessor]))
+              .toEqual(customAccessor);
+        });
+
+        it('should throw when more than one custom accessor is provided', () => {
+          const customAccessor: ControlValueAccessor = <any>new SpyValueAccessor();
+          expect(() => selectValueAccessor(dir, [customAccessor, customAccessor])).toThrowError();
+        });
+      });
+
+      describe('composeValidators', () => {
+        it('should compose functions', () => {
+          const dummy1 = (_: any /** TODO #9100 */) => ({'dummy1': true});
+          const dummy2 = (_: any /** TODO #9100 */) => ({'dummy2': true});
+          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()]) !;
+          expect(v(new FormControl(''))).toEqual({'dummy1': true, 'custom': true});
+        });
+      });
+    });
+
+    describe('formGroup', () => {
+      let form: FormGroupDirective;
+      let formModel: FormGroup;
+      let loginControlDir: FormControlName;
+
+      beforeEach(() => {
+        form = new FormGroupDirective([], []);
+        formModel = new FormGroup({
+          'login': new FormControl(),
+          'passwords': new FormGroup(
+              {'password': new FormControl(), 'passwordConfirm': new FormControl()})
+        });
+        form.form = formModel;
+
+        loginControlDir = new FormControlName(
+            form, [Validators.required], [asyncValidator('expected')], [defaultAccessor], null);
+        loginControlDir.name = 'login';
+        loginControlDir.valueAccessor = new DummyControlValueAccessor();
+      });
+
+      it('should reexport control properties', () => {
+        expect(form.control).toBe(formModel);
+        expect(form.value).toBe(formModel.value);
+        expect(form.valid).toBe(formModel.valid);
+        expect(form.invalid).toBe(formModel.invalid);
+        expect(form.pending).toBe(formModel.pending);
+        expect(form.errors).toBe(formModel.errors);
+        expect(form.pristine).toBe(formModel.pristine);
+        expect(form.dirty).toBe(formModel.dirty);
+        expect(form.touched).toBe(formModel.touched);
+        expect(form.untouched).toBe(formModel.untouched);
+        expect(form.statusChanges).toBe(formModel.statusChanges);
+        expect(form.valueChanges).toBe(formModel.valueChanges);
+      });
+
+      it('should reexport control methods', () => {
+        expect(form.hasError('required')).toBe(formModel.hasError('required'));
+        expect(form.getError('required')).toBe(formModel.getError('required'));
+
+        formModel.setErrors({required: true});
+        expect(form.hasError('required')).toBe(formModel.hasError('required'));
+        expect(form.getError('required')).toBe(formModel.getError('required'));
+      });
+
+      describe('addControl', () => {
+        it('should throw when no control found', () => {
+          const dir = new FormControlName(form, null !, null !, [defaultAccessor], null);
+          dir.name = 'invalidName';
+
+          expect(() => form.addControl(dir))
+              .toThrowError(new RegExp(`Cannot find control with name: 'invalidName'`));
+        });
+
+        it('should throw for a named control when no value accessor', () => {
+          const dir = new FormControlName(form, null !, null !, null !, null);
+          dir.name = 'login';
+
+          expect(() => form.addControl(dir))
+              .toThrowError(new RegExp(`No value accessor for form control with name: 'login'`));
+        });
+
+        it('should throw when no value accessor with path', () => {
+          const group = new FormGroupName(form, null !, null !);
+          const dir = new FormControlName(group, null !, null !, null !, null);
+          group.name = 'passwords';
+          dir.name = 'password';
+
+          expect(() => form.addControl(dir))
+              .toThrowError(new RegExp(
+                  `No value accessor for form control with path: 'passwords -> password'`));
+        });
+
+        it('should set up validators', fakeAsync(() => {
+             form.addControl(loginControlDir);
+
+             // sync validators are set
+             expect(formModel.hasError('required', ['login'])).toBe(true);
+             expect(formModel.hasError('async', ['login'])).toBe(false);
+
+             (<FormControl>formModel.get('login')).setValue('invalid value');
+
+             // sync validator passes, running async validators
+             expect(formModel.pending).toBe(true);
+
+             tick();
+
+             expect(formModel.hasError('required', ['login'])).toBe(false);
+             expect(formModel.hasError('async', ['login'])).toBe(true);
+           }));
+
+        it('should write value to the DOM', () => {
+          (<FormControl>formModel.get(['login'])).setValue('initValue');
+
+          form.addControl(loginControlDir);
+
+          expect((<any>loginControlDir.valueAccessor).writtenValue).toEqual('initValue');
+        });
+
+        it('should add the directive to the list of directives included in the form', () => {
+          form.addControl(loginControlDir);
+          expect(form.directives).toEqual([loginControlDir]);
+        });
+      });
+
+      describe('addFormGroup', () => {
+        const matchingPasswordsValidator = (g: FormGroup) => {
+          if (g.controls['password'].value != g.controls['passwordConfirm'].value) {
+            return {'differentPasswords': true};
+          } else {
+            return null;
+          }
+        };
+
+        it('should set up validator', fakeAsync(() => {
+             const group = new FormGroupName(
+                 form, [matchingPasswordsValidator], [asyncValidator('expected')]);
+             group.name = 'passwords';
+             form.addFormGroup(group);
+
+             (<FormControl>formModel.get(['passwords', 'password'])).setValue('somePassword');
+             (<FormControl>formModel.get([
+               'passwords', 'passwordConfirm'
+             ])).setValue('someOtherPassword');
+
+             // sync validators are set
+             expect(formModel.hasError('differentPasswords', ['passwords'])).toEqual(true);
+
+             (<FormControl>formModel.get([
+               'passwords', 'passwordConfirm'
+             ])).setValue('somePassword');
+
+             // sync validators pass, running async validators
+             expect(formModel.pending).toBe(true);
+
+             tick();
+
+             expect(formModel.hasError('async', ['passwords'])).toBe(true);
+           }));
+      });
+
+      describe('removeControl', () => {
+        it('should remove the directive to the list of directives included in the form', () => {
+          form.addControl(loginControlDir);
+          form.removeControl(loginControlDir);
+          expect(form.directives).toEqual([]);
+        });
+      });
+
+      describe('ngOnChanges', () => {
+        it('should update dom values of all the directives', () => {
+          form.addControl(loginControlDir);
+
+          (<FormControl>formModel.get(['login'])).setValue('new value');
+
+          form.ngOnChanges({});
+
+          expect((<any>loginControlDir.valueAccessor).writtenValue).toEqual('new value');
+        });
+
+        it('should set up a sync validator', () => {
+          const formValidator = (c: AbstractControl) => ({'custom': true});
+          const f = new FormGroupDirective([formValidator], []);
+          f.form = formModel;
+          f.ngOnChanges({'form': new SimpleChange(null, null, false)});
+
+          expect(formModel.errors).toEqual({'custom': true});
+        });
+
+        it('should set up an async validator', fakeAsync(() => {
+             const f = new FormGroupDirective([], [asyncValidator('expected')]);
+             f.form = formModel;
+             f.ngOnChanges({'form': new SimpleChange(null, null, false)});
+
+             tick();
+
+             expect(formModel.errors).toEqual({'async': true});
+           }));
+      });
+    });
+
+    describe('NgForm', () => {
+      let form: any /** TODO #9100 */;
+      let formModel: FormGroup;
+      let loginControlDir: any /** TODO #9100 */;
+      let personControlGroupDir: any /** TODO #9100 */;
+
+      beforeEach(() => {
+        form = new NgForm([], []);
+        formModel = form.form;
+
+        personControlGroupDir = new NgModelGroup(form, [], []);
+        personControlGroupDir.name = 'person';
+
+        loginControlDir = new NgModel(personControlGroupDir, null !, null !, [defaultAccessor]);
+        loginControlDir.name = 'login';
+        loginControlDir.valueAccessor = new DummyControlValueAccessor();
+      });
+
+      it('should reexport control properties', () => {
+        expect(form.control).toBe(formModel);
+        expect(form.value).toBe(formModel.value);
+        expect(form.valid).toBe(formModel.valid);
+        expect(form.invalid).toBe(formModel.invalid);
+        expect(form.pending).toBe(formModel.pending);
+        expect(form.errors).toBe(formModel.errors);
+        expect(form.pristine).toBe(formModel.pristine);
+        expect(form.dirty).toBe(formModel.dirty);
+        expect(form.touched).toBe(formModel.touched);
+        expect(form.untouched).toBe(formModel.untouched);
+        expect(form.statusChanges).toBe(formModel.statusChanges);
+        expect(form.status).toBe(formModel.status);
+        expect(form.valueChanges).toBe(formModel.valueChanges);
+        expect(form.disabled).toBe(formModel.disabled);
+        expect(form.enabled).toBe(formModel.enabled);
+      });
+
+      it('should reexport control methods', () => {
+        expect(form.hasError('required')).toBe(formModel.hasError('required'));
+        expect(form.getError('required')).toBe(formModel.getError('required'));
+
+        formModel.setErrors({required: true});
+        expect(form.hasError('required')).toBe(formModel.hasError('required'));
+        expect(form.getError('required')).toBe(formModel.getError('required'));
+      });
+
+      describe('addControl & addFormGroup', () => {
+        it('should create a control with the given name', fakeAsync(() => {
+             form.addFormGroup(personControlGroupDir);
+             form.addControl(loginControlDir);
+
+             flushMicrotasks();
+
+             expect(formModel.get(['person', 'login'])).not.toBeNull;
+           }));
+
+        // should update the form's value and validity
+      });
+
+      describe('removeControl & removeFormGroup', () => {
+        it('should remove control', fakeAsync(() => {
+             form.addFormGroup(personControlGroupDir);
+             form.addControl(loginControlDir);
+
+             form.removeFormGroup(personControlGroupDir);
+             form.removeControl(loginControlDir);
+
+             flushMicrotasks();
+
+             expect(formModel.get(['person'])).toBeNull();
+             expect(formModel.get(['person', 'login'])).toBeNull();
+           }));
+
+        // should update the form's value and validity
+      });
+
+      it('should set up sync validator', fakeAsync(() => {
+           const formValidator = (c: any /** TODO #9100 */) => ({'custom': true});
+           const f = new NgForm([formValidator], []);
+
+           tick();
+
+           expect(f.form.errors).toEqual({'custom': true});
+         }));
+
+      it('should set up async validator', fakeAsync(() => {
+           const f = new NgForm([], [asyncValidator('expected')]);
+
+           tick();
+
+           expect(f.form.errors).toEqual({'async': true});
+         }));
+    });
+
+    describe('FormGroupName', () => {
+      let formModel: any /** TODO #9100 */;
+      let controlGroupDir: any /** TODO #9100 */;
+
+      beforeEach(() => {
+        formModel = new FormGroup({'login': new FormControl(null)});
+
+        const parent = new FormGroupDirective([], []);
+        parent.form = new FormGroup({'group': formModel});
+        controlGroupDir = new FormGroupName(parent, [], []);
+        controlGroupDir.name = 'group';
+      });
+
+      it('should reexport control properties', () => {
+        expect(controlGroupDir.control).toBe(formModel);
+        expect(controlGroupDir.value).toBe(formModel.value);
+        expect(controlGroupDir.valid).toBe(formModel.valid);
+        expect(controlGroupDir.invalid).toBe(formModel.invalid);
+        expect(controlGroupDir.pending).toBe(formModel.pending);
+        expect(controlGroupDir.errors).toBe(formModel.errors);
+        expect(controlGroupDir.pristine).toBe(formModel.pristine);
+        expect(controlGroupDir.dirty).toBe(formModel.dirty);
+        expect(controlGroupDir.touched).toBe(formModel.touched);
+        expect(controlGroupDir.untouched).toBe(formModel.untouched);
+        expect(controlGroupDir.statusChanges).toBe(formModel.statusChanges);
+        expect(controlGroupDir.status).toBe(formModel.status);
+        expect(controlGroupDir.valueChanges).toBe(formModel.valueChanges);
+        expect(controlGroupDir.disabled).toBe(formModel.disabled);
+        expect(controlGroupDir.enabled).toBe(formModel.enabled);
+      });
+
+      it('should reexport control methods', () => {
+        expect(controlGroupDir.hasError('required')).toBe(formModel.hasError('required'));
+        expect(controlGroupDir.getError('required')).toBe(formModel.getError('required'));
+
+        formModel.setErrors({required: true});
+        expect(controlGroupDir.hasError('required')).toBe(formModel.hasError('required'));
+        expect(controlGroupDir.getError('required')).toBe(formModel.getError('required'));
+      });
+    });
+
+    describe('FormArrayName', () => {
+      let formModel: FormArray;
+      let formArrayDir: FormArrayName;
+
+      beforeEach(() => {
+        const parent = new FormGroupDirective([], []);
+        formModel = new FormArray([new FormControl('')]);
+        parent.form = new FormGroup({'array': formModel});
+        formArrayDir = new FormArrayName(parent, [], []);
+        formArrayDir.name = 'array';
+      });
+
+      it('should reexport control properties', () => {
+        expect(formArrayDir.control).toBe(formModel);
+        expect(formArrayDir.value).toBe(formModel.value);
+        expect(formArrayDir.valid).toBe(formModel.valid);
+        expect(formArrayDir.invalid).toBe(formModel.invalid);
+        expect(formArrayDir.pending).toBe(formModel.pending);
+        expect(formArrayDir.errors).toBe(formModel.errors);
+        expect(formArrayDir.pristine).toBe(formModel.pristine);
+        expect(formArrayDir.dirty).toBe(formModel.dirty);
+        expect(formArrayDir.touched).toBe(formModel.touched);
+        expect(formArrayDir.status).toBe(formModel.status);
+        expect(formArrayDir.untouched).toBe(formModel.untouched);
+        expect(formArrayDir.disabled).toBe(formModel.disabled);
+        expect(formArrayDir.enabled).toBe(formModel.enabled);
+      });
+
+      it('should reexport control methods', () => {
+        expect(formArrayDir.hasError('required')).toBe(formModel.hasError('required'));
+        expect(formArrayDir.getError('required')).toBe(formModel.getError('required'));
+
+        formModel.setErrors({required: true});
+        expect(formArrayDir.hasError('required')).toBe(formModel.hasError('required'));
+        expect(formArrayDir.getError('required')).toBe(formModel.getError('required'));
+      });
+    });
+
+    describe('FormControlDirective', () => {
+      let controlDir: any /** TODO #9100 */;
+      let control: any /** TODO #9100 */;
+      const checkProperties = function(control: AbstractControl) {
+        expect(controlDir.control).toBe(control);
+        expect(controlDir.value).toBe(control.value);
+        expect(controlDir.valid).toBe(control.valid);
+        expect(controlDir.invalid).toBe(control.invalid);
+        expect(controlDir.pending).toBe(control.pending);
+        expect(controlDir.errors).toBe(control.errors);
+        expect(controlDir.pristine).toBe(control.pristine);
+        expect(controlDir.dirty).toBe(control.dirty);
+        expect(controlDir.touched).toBe(control.touched);
+        expect(controlDir.untouched).toBe(control.untouched);
+        expect(controlDir.statusChanges).toBe(control.statusChanges);
+        expect(controlDir.status).toBe(control.status);
+        expect(controlDir.valueChanges).toBe(control.valueChanges);
+        expect(controlDir.disabled).toBe(control.disabled);
+        expect(controlDir.enabled).toBe(control.enabled);
+      };
+
+      beforeEach(() => {
+        controlDir = new FormControlDirective([Validators.required], [], [defaultAccessor], null);
+        controlDir.valueAccessor = new DummyControlValueAccessor();
+
+        control = new FormControl(null);
+        controlDir.form = control;
+      });
+
+      it('should reexport control properties', () => { checkProperties(control); });
+
+      it('should reexport control methods', () => {
+        expect(controlDir.hasError('required')).toBe(control.hasError('required'));
+        expect(controlDir.getError('required')).toBe(control.getError('required'));
+
+        control.setErrors({required: true});
+        expect(controlDir.hasError('required')).toBe(control.hasError('required'));
+        expect(controlDir.getError('required')).toBe(control.getError('required'));
+      });
+
+      it('should reexport new control properties', () => {
+        const newControl = new FormControl(null);
+        controlDir.form = newControl;
+        controlDir.ngOnChanges({'form': new SimpleChange(control, newControl, false)});
+
+        checkProperties(newControl);
+      });
+
+      it('should set up validator', () => {
+        expect(control.valid).toBe(true);
+
+        // this will add the required validator and recalculate the validity
+        controlDir.ngOnChanges({'form': new SimpleChange(null, control, false)});
+
+        expect(control.valid).toBe(false);
+      });
+    });
+
+    describe('NgModel', () => {
+      let ngModel: NgModel;
+      let control: FormControl;
+
+      beforeEach(() => {
+        ngModel = new NgModel(
+            null !, [Validators.required], [asyncValidator('expected')], [defaultAccessor]);
+        ngModel.valueAccessor = new DummyControlValueAccessor();
+        control = ngModel.control;
+      });
+
+      it('should reexport control properties', () => {
+        expect(ngModel.control).toBe(control);
+        expect(ngModel.value).toBe(control.value);
+        expect(ngModel.valid).toBe(control.valid);
+        expect(ngModel.invalid).toBe(control.invalid);
+        expect(ngModel.pending).toBe(control.pending);
+        expect(ngModel.errors).toBe(control.errors);
+        expect(ngModel.pristine).toBe(control.pristine);
+        expect(ngModel.dirty).toBe(control.dirty);
+        expect(ngModel.touched).toBe(control.touched);
+        expect(ngModel.untouched).toBe(control.untouched);
+        expect(ngModel.statusChanges).toBe(control.statusChanges);
+        expect(ngModel.status).toBe(control.status);
+        expect(ngModel.valueChanges).toBe(control.valueChanges);
+        expect(ngModel.disabled).toBe(control.disabled);
+        expect(ngModel.enabled).toBe(control.enabled);
+      });
+
+      it('should reexport control methods', () => {
+        expect(ngModel.hasError('required')).toBe(control.hasError('required'));
+        expect(ngModel.getError('required')).toBe(control.getError('required'));
+
+        control.setErrors({required: true});
+        expect(ngModel.hasError('required')).toBe(control.hasError('required'));
+        expect(ngModel.getError('required')).toBe(control.getError('required'));
+      });
+
+      it('should throw when no value accessor with named control', () => {
+        const namedDir = new NgModel(null !, null !, null !, null !);
+        namedDir.name = 'one';
+
+        expect(() => namedDir.ngOnChanges({}))
+            .toThrowError(new RegExp(`No value accessor for form control with name: 'one'`));
+      });
+
+      it('should throw when no value accessor with unnamed control', () => {
+        const unnamedDir = new NgModel(null !, null !, null !, null !);
+
+        expect(() => unnamedDir.ngOnChanges({}))
+            .toThrowError(
+                new RegExp(`No value accessor for form control with unspecified name attribute`));
+      });
+
+      it('should set up validator', fakeAsync(() => {
+           // this will add the required validator and recalculate the validity
+           ngModel.ngOnChanges({});
+           tick();
+
+           expect(ngModel.control.errors).toEqual({'required': true});
+
+           ngModel.control.setValue('someValue');
+           tick();
+
+           expect(ngModel.control.errors).toEqual({'async': true});
+         }));
+
+      it('should mark as disabled properly', fakeAsync(() => {
+           ngModel.ngOnChanges({isDisabled: new SimpleChange('', undefined, false)});
+           tick();
+           expect(ngModel.control.disabled).toEqual(false);
+
+           ngModel.ngOnChanges({isDisabled: new SimpleChange('', null, false)});
+           tick();
+           expect(ngModel.control.disabled).toEqual(false);
+
+           ngModel.ngOnChanges({isDisabled: new SimpleChange('', false, false)});
+           tick();
+           expect(ngModel.control.disabled).toEqual(false);
+
+           ngModel.ngOnChanges({isDisabled: new SimpleChange('', 'false', false)});
+           tick();
+           expect(ngModel.control.disabled).toEqual(false);
+
+           ngModel.ngOnChanges({isDisabled: new SimpleChange('', 0, false)});
+           tick();
+           expect(ngModel.control.disabled).toEqual(false);
+
+           ngModel.ngOnChanges({isDisabled: new SimpleChange(null, '', false)});
+           tick();
+           expect(ngModel.control.disabled).toEqual(true);
+
+           ngModel.ngOnChanges({isDisabled: new SimpleChange(null, 'true', false)});
+           tick();
+           expect(ngModel.control.disabled).toEqual(true);
+
+           ngModel.ngOnChanges({isDisabled: new SimpleChange(null, true, false)});
+           tick();
+           expect(ngModel.control.disabled).toEqual(true);
+
+           ngModel.ngOnChanges({isDisabled: new SimpleChange(null, 'anything else', false)});
+           tick();
+           expect(ngModel.control.disabled).toEqual(true);
+
+         }));
+    });
+
+    describe('FormControlName', () => {
+      let formModel: any /** TODO #9100 */;
+      let controlNameDir: any /** TODO #9100 */;
+
+      beforeEach(() => {
+        formModel = new FormControl('name');
+
+        const parent = new FormGroupDirective([], []);
+        parent.form = new FormGroup({'name': formModel});
+        controlNameDir = new FormControlName(parent, [], [], [defaultAccessor], null);
+        controlNameDir.name = 'name';
+        (controlNameDir as{control: FormControl}).control = formModel;
+      });
+
+      it('should reexport control properties', () => {
+        expect(controlNameDir.control).toBe(formModel);
+        expect(controlNameDir.value).toBe(formModel.value);
+        expect(controlNameDir.valid).toBe(formModel.valid);
+        expect(controlNameDir.invalid).toBe(formModel.invalid);
+        expect(controlNameDir.pending).toBe(formModel.pending);
+        expect(controlNameDir.errors).toBe(formModel.errors);
+        expect(controlNameDir.pristine).toBe(formModel.pristine);
+        expect(controlNameDir.dirty).toBe(formModel.dirty);
+        expect(controlNameDir.touched).toBe(formModel.touched);
+        expect(controlNameDir.untouched).toBe(formModel.untouched);
+        expect(controlNameDir.statusChanges).toBe(formModel.statusChanges);
+        expect(controlNameDir.status).toBe(formModel.status);
+        expect(controlNameDir.valueChanges).toBe(formModel.valueChanges);
+        expect(controlNameDir.disabled).toBe(formModel.disabled);
+        expect(controlNameDir.enabled).toBe(formModel.enabled);
+      });
+
+      it('should reexport control methods', () => {
+        expect(controlNameDir.hasError('required')).toBe(formModel.hasError('required'));
+        expect(controlNameDir.getError('required')).toBe(formModel.getError('required'));
+
+        formModel.setErrors({required: true});
+        expect(controlNameDir.hasError('required')).toBe(formModel.hasError('required'));
+        expect(controlNameDir.getError('required')).toBe(formModel.getError('required'));
+      });
+    });
+  });
+}
diff --git a/packages/forms/test/form_array_spec.ts b/packages/forms/test/form_array_spec.ts
new file mode 100644
index 000000000000..95c608828cf3
--- /dev/null
+++ b/packages/forms/test/form_array_spec.ts
@@ -0,0 +1,1155 @@
+/**
+ * @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 {fakeAsync, tick} from '@angular/core/testing';
+import {AsyncTestCompleter, beforeEach, describe, inject, it} from '@angular/core/testing/src/testing_internal';
+import {AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors} from '@angular/forms';
+import {Validators} from '@angular/forms/src/validators';
+import {of } from 'rxjs';
+
+(function() {
+  function asyncValidator(expected: string, timeouts = {}) {
+    return (c: AbstractControl) => {
+      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;
+
+      if (t == 0) {
+        resolve(res);
+      } else {
+        setTimeout(() => { resolve(res); }, t);
+      }
+
+      return promise;
+    };
+  }
+
+  describe('FormArray', () => {
+
+    describe('adding/removing', () => {
+      let a: FormArray;
+      let c1: FormControl, c2: FormControl, c3: FormControl;
+
+      beforeEach(() => {
+        a = new FormArray([]);
+        c1 = new FormControl(1);
+        c2 = new FormControl(2);
+        c3 = new FormControl(3);
+      });
+
+      it('should support pushing', () => {
+        a.push(c1);
+        expect(a.length).toEqual(1);
+        expect(a.controls).toEqual([c1]);
+      });
+
+      it('should support removing', () => {
+        a.push(c1);
+        a.push(c2);
+        a.push(c3);
+
+        a.removeAt(1);
+
+        expect(a.controls).toEqual([c1, c3]);
+      });
+
+      it('should support inserting', () => {
+        a.push(c1);
+        a.push(c3);
+
+        a.insert(1, c2);
+
+        expect(a.controls).toEqual([c1, c2, c3]);
+      });
+    });
+
+    describe('value', () => {
+      it('should be the reduced value of the child controls', () => {
+        const a = new FormArray([new FormControl(1), new FormControl(2)]);
+        expect(a.value).toEqual([1, 2]);
+      });
+
+      it('should be an empty array when there are no child controls', () => {
+        const a = new FormArray([]);
+        expect(a.value).toEqual([]);
+      });
+    });
+
+    describe('getRawValue()', () => {
+      let a: FormArray;
+
+      it('should work with nested form groups/arrays', () => {
+        a = new FormArray([
+          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(1) as FormArray).at(1).disable();
+
+        expect(a.getRawValue()).toEqual([{'c2': 'v2', 'c3': 'v3'}, ['v4', 'v5']]);
+      });
+    });
+
+    describe('setValue', () => {
+      let c: FormControl, c2: FormControl, a: FormArray;
+
+      beforeEach(() => {
+        c = new FormControl('');
+        c2 = new FormControl('');
+        a = new FormArray([c, c2]);
+      });
+
+      it('should set its own value', () => {
+        a.setValue(['one', 'two']);
+        expect(a.value).toEqual(['one', 'two']);
+      });
+
+      it('should set child values', () => {
+        a.setValue(['one', 'two']);
+        expect(c.value).toEqual('one');
+        expect(c2.value).toEqual('two');
+      });
+
+      it('should set values for disabled child controls', () => {
+        c2.disable();
+        a.setValue(['one', 'two']);
+        expect(c2.value).toEqual('two');
+        expect(a.value).toEqual(['one']);
+        expect(a.getRawValue()).toEqual(['one', 'two']);
+      });
+
+      it('should set value for disabled arrays', () => {
+        a.disable();
+        a.setValue(['one', 'two']);
+        expect(c.value).toEqual('one');
+        expect(c2.value).toEqual('two');
+        expect(a.value).toEqual(['one', 'two']);
+      });
+
+      it('should set parent values', () => {
+        const form = new FormGroup({'parent': a});
+        a.setValue(['one', 'two']);
+        expect(form.value).toEqual({'parent': ['one', 'two']});
+      });
+
+      it('should not update the parent explicitly specified', () => {
+        const form = new FormGroup({'parent': a});
+        a.setValue(['one', 'two'], {onlySelf: true});
+
+        expect(form.value).toEqual({parent: ['', '']});
+      });
+
+      it('should throw if fields are missing from supplied value (subset)', () => {
+        expect(() => a.setValue([, 'two']))
+            .toThrowError(new RegExp(`Must supply a value for form control at index: 0`));
+      });
+
+      it('should throw if a value is provided for a missing control (superset)', () => {
+        expect(() => a.setValue([
+          'one', 'two', 'three'
+        ])).toThrowError(new RegExp(`Cannot find form control at index 2`));
+      });
+
+      it('should throw if a value is not provided for a disabled control', () => {
+        c2.disable();
+        expect(() => a.setValue(['one']))
+            .toThrowError(new RegExp(`Must supply a value for form control at index: 1`));
+      });
+
+      it('should throw if no controls are set yet', () => {
+        const empty = new FormArray([]);
+        expect(() => empty.setValue(['one']))
+            .toThrowError(new RegExp(`no form controls registered with this array`));
+      });
+
+      describe('setValue() events', () => {
+        let form: FormGroup;
+        let logger: any[];
+
+        beforeEach(() => {
+          form = new FormGroup({'parent': a});
+          logger = [];
+        });
+
+        it('should emit one valueChange event per control', () => {
+          form.valueChanges.subscribe(() => logger.push('form'));
+          a.valueChanges.subscribe(() => logger.push('array'));
+          c.valueChanges.subscribe(() => logger.push('control1'));
+          c2.valueChanges.subscribe(() => logger.push('control2'));
+
+          a.setValue(['one', 'two']);
+          expect(logger).toEqual(['control1', 'control2', 'array', 'form']);
+        });
+
+        it('should not fire an event when explicitly specified', fakeAsync(() => {
+             form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             a.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c2.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+
+             a.setValue(['one', 'two'], {emitEvent: false});
+             tick();
+           }));
+
+        it('should emit one statusChange event per control', () => {
+          form.statusChanges.subscribe(() => logger.push('form'));
+          a.statusChanges.subscribe(() => logger.push('array'));
+          c.statusChanges.subscribe(() => logger.push('control1'));
+          c2.statusChanges.subscribe(() => logger.push('control2'));
+
+          a.setValue(['one', 'two']);
+          expect(logger).toEqual(['control1', 'control2', 'array', 'form']);
+        });
+      });
+    });
+
+    describe('patchValue', () => {
+      let c: FormControl, c2: FormControl, a: FormArray;
+
+      beforeEach(() => {
+        c = new FormControl('');
+        c2 = new FormControl('');
+        a = new FormArray([c, c2]);
+      });
+
+      it('should set its own value', () => {
+        a.patchValue(['one', 'two']);
+        expect(a.value).toEqual(['one', 'two']);
+      });
+
+      it('should set child values', () => {
+        a.patchValue(['one', 'two']);
+        expect(c.value).toEqual('one');
+        expect(c2.value).toEqual('two');
+      });
+
+      it('should patch disabled control values', () => {
+        c2.disable();
+        a.patchValue(['one', 'two']);
+        expect(c2.value).toEqual('two');
+        expect(a.value).toEqual(['one']);
+        expect(a.getRawValue()).toEqual(['one', 'two']);
+      });
+
+      it('should patch disabled control arrays', () => {
+        a.disable();
+        a.patchValue(['one', 'two']);
+        expect(c.value).toEqual('one');
+        expect(c2.value).toEqual('two');
+        expect(a.value).toEqual(['one', 'two']);
+      });
+
+      it('should set parent values', () => {
+        const form = new FormGroup({'parent': a});
+        a.patchValue(['one', 'two']);
+        expect(form.value).toEqual({'parent': ['one', 'two']});
+      });
+
+      it('should not update the parent explicitly specified', () => {
+        const form = new FormGroup({'parent': a});
+        a.patchValue(['one', 'two'], {onlySelf: true});
+
+        expect(form.value).toEqual({parent: ['', '']});
+      });
+
+      it('should ignore fields that are missing from supplied value (subset)', () => {
+        a.patchValue([, 'two']);
+        expect(a.value).toEqual(['', 'two']);
+      });
+
+      it('should not ignore fields that are null', () => {
+        a.patchValue([null]);
+        expect(a.value).toEqual([null, '']);
+      });
+
+      it('should ignore any value provided for a missing control (superset)', () => {
+        a.patchValue([, , 'three']);
+        expect(a.value).toEqual(['', '']);
+      });
+
+      describe('patchValue() events', () => {
+        let form: FormGroup;
+        let logger: any[];
+
+        beforeEach(() => {
+          form = new FormGroup({'parent': a});
+          logger = [];
+        });
+
+        it('should emit one valueChange event per control', () => {
+          form.valueChanges.subscribe(() => logger.push('form'));
+          a.valueChanges.subscribe(() => logger.push('array'));
+          c.valueChanges.subscribe(() => logger.push('control1'));
+          c2.valueChanges.subscribe(() => logger.push('control2'));
+
+          a.patchValue(['one', 'two']);
+          expect(logger).toEqual(['control1', 'control2', 'array', 'form']);
+        });
+
+        it('should not emit valueChange events for skipped controls', () => {
+          form.valueChanges.subscribe(() => logger.push('form'));
+          a.valueChanges.subscribe(() => logger.push('array'));
+          c.valueChanges.subscribe(() => logger.push('control1'));
+          c2.valueChanges.subscribe(() => logger.push('control2'));
+
+          a.patchValue(['one']);
+          expect(logger).toEqual(['control1', 'array', 'form']);
+        });
+
+        it('should not fire an event when explicitly specified', fakeAsync(() => {
+             form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             a.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c2.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+
+             a.patchValue(['one', 'two'], {emitEvent: false});
+             tick();
+           }));
+
+        it('should emit one statusChange event per control', () => {
+          form.statusChanges.subscribe(() => logger.push('form'));
+          a.statusChanges.subscribe(() => logger.push('array'));
+          c.statusChanges.subscribe(() => logger.push('control1'));
+          c2.statusChanges.subscribe(() => logger.push('control2'));
+
+          a.patchValue(['one', 'two']);
+          expect(logger).toEqual(['control1', 'control2', 'array', 'form']);
+        });
+      });
+    });
+
+    describe('reset()', () => {
+      let c: FormControl, c2: FormControl, a: FormArray;
+
+      beforeEach(() => {
+        c = new FormControl('initial value');
+        c2 = new FormControl('');
+        a = new FormArray([c, c2]);
+      });
+
+      it('should set its own value if value passed', () => {
+        a.setValue(['new value', 'new value']);
+
+        a.reset(['initial value', '']);
+        expect(a.value).toEqual(['initial value', '']);
+      });
+
+      it('should not update the parent when explicitly specified', () => {
+        const form = new FormGroup({'a': a});
+        a.reset(['one', 'two'], {onlySelf: true});
+
+        expect(form.value).toEqual({a: ['initial value', '']});
+      });
+
+      it('should set its own value if boxed value passed', () => {
+        a.setValue(['new value', 'new value']);
+
+        a.reset([{value: 'initial value', disabled: false}, '']);
+        expect(a.value).toEqual(['initial value', '']);
+      });
+
+      it('should clear its own value if no value passed', () => {
+        a.setValue(['new value', 'new value']);
+
+        a.reset();
+        expect(a.value).toEqual([null, null]);
+      });
+
+      it('should set the value of each of its child controls if value passed', () => {
+        a.setValue(['new value', 'new value']);
+
+        a.reset(['initial value', '']);
+        expect(c.value).toBe('initial value');
+        expect(c2.value).toBe('');
+      });
+
+      it('should clear the value of each of its child controls if no value', () => {
+        a.setValue(['new value', 'new value']);
+
+        a.reset();
+        expect(c.value).toBe(null);
+        expect(c2.value).toBe(null);
+      });
+
+      it('should set the value of its parent if value passed', () => {
+        const form = new FormGroup({'a': a});
+        a.setValue(['new value', 'new value']);
+
+        a.reset(['initial value', '']);
+        expect(form.value).toEqual({'a': ['initial value', '']});
+      });
+
+      it('should clear the value of its parent if no value passed', () => {
+        const form = new FormGroup({'a': a});
+        a.setValue(['new value', 'new value']);
+
+        a.reset();
+        expect(form.value).toEqual({'a': [null, null]});
+      });
+
+      it('should mark itself as pristine', () => {
+        a.markAsDirty();
+        expect(a.pristine).toBe(false);
+
+        a.reset();
+        expect(a.pristine).toBe(true);
+      });
+
+      it('should mark all child controls as pristine', () => {
+        c.markAsDirty();
+        c2.markAsDirty();
+        expect(c.pristine).toBe(false);
+        expect(c2.pristine).toBe(false);
+
+        a.reset();
+        expect(c.pristine).toBe(true);
+        expect(c2.pristine).toBe(true);
+      });
+
+      it('should mark the parent as pristine if all siblings pristine', () => {
+        const c3 = new FormControl('');
+        const form = new FormGroup({'a': a, 'c3': c3});
+
+        a.markAsDirty();
+        expect(form.pristine).toBe(false);
+
+        a.reset();
+        expect(form.pristine).toBe(true);
+      });
+
+      it('should not mark the parent pristine if any dirty siblings', () => {
+        const c3 = new FormControl('');
+        const form = new FormGroup({'a': a, 'c3': c3});
+
+        a.markAsDirty();
+        c3.markAsDirty();
+        expect(form.pristine).toBe(false);
+
+        a.reset();
+        expect(form.pristine).toBe(false);
+      });
+
+      it('should mark itself as untouched', () => {
+        a.markAsTouched();
+        expect(a.untouched).toBe(false);
+
+        a.reset();
+        expect(a.untouched).toBe(true);
+      });
+
+      it('should mark all child controls as untouched', () => {
+        c.markAsTouched();
+        c2.markAsTouched();
+        expect(c.untouched).toBe(false);
+        expect(c2.untouched).toBe(false);
+
+        a.reset();
+        expect(c.untouched).toBe(true);
+        expect(c2.untouched).toBe(true);
+      });
+
+      it('should mark the parent untouched if all siblings untouched', () => {
+        const c3 = new FormControl('');
+        const form = new FormGroup({'a': a, 'c3': c3});
+
+        a.markAsTouched();
+        expect(form.untouched).toBe(false);
+
+        a.reset();
+        expect(form.untouched).toBe(true);
+      });
+
+      it('should not mark the parent untouched if any touched siblings', () => {
+        const c3 = new FormControl('');
+        const form = new FormGroup({'a': a, 'c3': c3});
+
+        a.markAsTouched();
+        c3.markAsTouched();
+        expect(form.untouched).toBe(false);
+
+        a.reset();
+        expect(form.untouched).toBe(false);
+      });
+
+      it('should retain previous disabled state', () => {
+        a.disable();
+        a.reset();
+
+        expect(a.disabled).toBe(true);
+      });
+
+      it('should set child disabled state if boxed value passed', () => {
+        a.disable();
+        a.reset([{value: '', disabled: false}, '']);
+
+        expect(c.disabled).toBe(false);
+        expect(a.disabled).toBe(false);
+      });
+
+
+      describe('reset() events', () => {
+        let form: FormGroup, c3: FormControl, logger: any[];
+
+        beforeEach(() => {
+          c3 = new FormControl('');
+          form = new FormGroup({'a': a, 'c3': c3});
+          logger = [];
+        });
+
+        it('should emit one valueChange event per reset control', () => {
+          form.valueChanges.subscribe(() => logger.push('form'));
+          a.valueChanges.subscribe(() => logger.push('array'));
+          c.valueChanges.subscribe(() => logger.push('control1'));
+          c2.valueChanges.subscribe(() => logger.push('control2'));
+          c3.valueChanges.subscribe(() => logger.push('control3'));
+
+          a.reset();
+          expect(logger).toEqual(['control1', 'control2', 'array', 'form']);
+        });
+
+        it('should not fire an event when explicitly specified', fakeAsync(() => {
+             form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             a.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c2.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c3.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+
+             a.reset([], {emitEvent: false});
+             tick();
+           }));
+
+        it('should emit one statusChange event per reset control', () => {
+          form.statusChanges.subscribe(() => logger.push('form'));
+          a.statusChanges.subscribe(() => logger.push('array'));
+          c.statusChanges.subscribe(() => logger.push('control1'));
+          c2.statusChanges.subscribe(() => logger.push('control2'));
+          c3.statusChanges.subscribe(() => logger.push('control3'));
+
+          a.reset();
+          expect(logger).toEqual(['control1', 'control2', 'array', 'form']);
+        });
+      });
+    });
+
+    describe('errors', () => {
+      it('should run the validator when the value changes', () => {
+        const simpleValidator = (c: FormArray) =>
+            c.controls[0].value != 'correct' ? {'broken': true} : null;
+
+        const c = new FormControl(null);
+        const g = new FormArray([c], simpleValidator);
+
+        c.setValue('correct');
+
+        expect(g.valid).toEqual(true);
+        expect(g.errors).toEqual(null);
+
+        c.setValue('incorrect');
+
+        expect(g.valid).toEqual(false);
+        expect(g.errors).toEqual({'broken': true});
+      });
+    });
+
+
+    describe('dirty', () => {
+      let c: FormControl;
+      let a: FormArray;
+
+      beforeEach(() => {
+        c = new FormControl('value');
+        a = new FormArray([c]);
+      });
+
+      it('should be false after creating a control', () => { expect(a.dirty).toEqual(false); });
+
+      it('should be true after changing the value of the control', () => {
+        c.markAsDirty();
+
+        expect(a.dirty).toEqual(true);
+      });
+    });
+
+    describe('touched', () => {
+      let c: FormControl;
+      let a: FormArray;
+
+      beforeEach(() => {
+        c = new FormControl('value');
+        a = new FormArray([c]);
+      });
+
+      it('should be false after creating a control', () => { expect(a.touched).toEqual(false); });
+
+      it('should be true after child control is marked as touched', () => {
+        c.markAsTouched();
+
+        expect(a.touched).toEqual(true);
+      });
+    });
+
+
+    describe('pending', () => {
+      let c: FormControl;
+      let a: FormArray;
+
+      beforeEach(() => {
+        c = new FormControl('value');
+        a = new FormArray([c]);
+      });
+
+      it('should be false after creating a control', () => {
+        expect(c.pending).toEqual(false);
+        expect(a.pending).toEqual(false);
+      });
+
+      it('should be true after changing the value of the control', () => {
+        c.markAsPending();
+
+        expect(c.pending).toEqual(true);
+        expect(a.pending).toEqual(true);
+      });
+
+      it('should not update the parent when onlySelf = true', () => {
+        c.markAsPending({onlySelf: true});
+
+        expect(c.pending).toEqual(true);
+        expect(a.pending).toEqual(false);
+      });
+
+      describe('status change events', () => {
+        let logger: string[];
+
+        beforeEach(() => {
+          logger = [];
+          a.statusChanges.subscribe((status) => logger.push(status));
+        });
+
+        it('should emit event after marking control as pending', () => {
+          c.markAsPending();
+          expect(logger).toEqual(['PENDING']);
+        });
+
+        it('should not emit event from parent when onlySelf is true', () => {
+          c.markAsPending({onlySelf: true});
+          expect(logger).toEqual([]);
+        });
+
+        it('should not emit event when emitEvent = false', () => {
+          c.markAsPending({emitEvent: false});
+          expect(logger).toEqual([]);
+        });
+
+        it('should emit event when parent is markedAsPending', () => {
+          a.markAsPending();
+          expect(logger).toEqual(['PENDING']);
+        });
+      });
+
+    });
+
+    describe('valueChanges', () => {
+      let a: FormArray;
+      let c1: any /** TODO #9100 */, c2: any /** TODO #9100 */;
+
+      beforeEach(() => {
+        c1 = new FormControl('old1');
+        c2 = new FormControl('old2');
+        a = new FormArray([c1, c2]);
+      });
+
+      it('should fire an event after the value has been updated',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           a.valueChanges.subscribe({
+             next: (value: any) => {
+               expect(a.value).toEqual(['new1', 'old2']);
+               expect(value).toEqual(['new1', 'old2']);
+               async.done();
+             }
+           });
+           c1.setValue('new1');
+         }));
+
+      it('should fire an event after the control\'s observable fired an event',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           let controlCallbackIsCalled = false;
+
+
+           c1.valueChanges.subscribe({next: (value: any) => { controlCallbackIsCalled = true; }});
+
+           a.valueChanges.subscribe({
+             next: (value: any) => {
+               expect(controlCallbackIsCalled).toBe(true);
+               async.done();
+             }
+           });
+
+           c1.setValue('new1');
+         }));
+
+      it('should fire an event when a control is removed',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           a.valueChanges.subscribe({
+             next: (value: any) => {
+               expect(value).toEqual(['old1']);
+               async.done();
+             }
+           });
+
+           a.removeAt(1);
+         }));
+
+      it('should fire an event when a control is added',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           a.removeAt(1);
+
+           a.valueChanges.subscribe({
+             next: (value: any) => {
+               expect(value).toEqual(['old1', 'old2']);
+               async.done();
+             }
+           });
+
+           a.push(c2);
+         }));
+    });
+
+    describe('get', () => {
+      it('should return null when path is null', () => {
+        const g = new FormGroup({});
+        expect(g.get(null !)).toEqual(null);
+      });
+
+      it('should return null when path is empty', () => {
+        const g = new FormGroup({});
+        expect(g.get([])).toEqual(null);
+      });
+
+      it('should return null when path is invalid', () => {
+        const g = new FormGroup({});
+        expect(g.get('invalid')).toEqual(null);
+      });
+
+      it('should return a child of a control group', () => {
+        const g = new FormGroup({
+          'one': new FormControl('111'),
+          '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');
+      });
+
+      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');
+      });
+    });
+
+    describe('validator', () => {
+      function simpleValidator(c: AbstractControl): ValidationErrors|null {
+        return c.get([0]) !.value === 'correct' ? null : {'broken': true};
+      }
+
+      function arrayRequiredValidator(c: AbstractControl): ValidationErrors|null {
+        return Validators.required(c.get([0]) as AbstractControl);
+      }
+
+      it('should set a single validator', () => {
+        const a = new FormArray([new FormControl()], simpleValidator);
+        expect(a.valid).toBe(false);
+        expect(a.errors).toEqual({'broken': true});
+
+        a.setValue(['correct']);
+        expect(a.valid).toBe(true);
+      });
+
+      it('should set a single validator from options obj', () => {
+        const a = new FormArray([new FormControl()], {validators: simpleValidator});
+        expect(a.valid).toBe(false);
+        expect(a.errors).toEqual({'broken': true});
+
+        a.setValue(['correct']);
+        expect(a.valid).toBe(true);
+      });
+
+      it('should set multiple validators from an array', () => {
+        const a = new FormArray([new FormControl()], [simpleValidator, arrayRequiredValidator]);
+        expect(a.valid).toBe(false);
+        expect(a.errors).toEqual({'required': true, 'broken': true});
+
+        a.setValue(['c']);
+        expect(a.valid).toBe(false);
+        expect(a.errors).toEqual({'broken': true});
+
+        a.setValue(['correct']);
+        expect(a.valid).toBe(true);
+      });
+
+      it('should set multiple validators from options obj', () => {
+        const a = new FormArray(
+            [new FormControl()], {validators: [simpleValidator, arrayRequiredValidator]});
+        expect(a.valid).toBe(false);
+        expect(a.errors).toEqual({'required': true, 'broken': true});
+
+        a.setValue(['c']);
+        expect(a.valid).toBe(false);
+        expect(a.errors).toEqual({'broken': true});
+
+        a.setValue(['correct']);
+        expect(a.valid).toBe(true);
+      });
+    });
+
+    describe('asyncValidator', () => {
+      function otherObservableValidator() { return of ({'other': true}); }
+
+      it('should run the async validator', fakeAsync(() => {
+           const c = new FormControl('value');
+           const g = new FormArray([c], null !, asyncValidator('expected'));
+
+           expect(g.pending).toEqual(true);
+
+           tick();
+
+           expect(g.errors).toEqual({'async': true});
+           expect(g.pending).toEqual(false);
+         }));
+
+      it('should set a single async validator from options obj', fakeAsync(() => {
+           const g = new FormArray(
+               [new FormControl('value')], {asyncValidators: asyncValidator('expected')});
+
+           expect(g.pending).toEqual(true);
+
+           tick();
+
+           expect(g.errors).toEqual({'async': true});
+           expect(g.pending).toEqual(false);
+         }));
+
+      it('should set multiple async validators from an array', fakeAsync(() => {
+           const g = new FormArray(
+               [new FormControl('value')], null !,
+               [asyncValidator('expected'), otherObservableValidator]);
+
+           expect(g.pending).toEqual(true);
+
+           tick();
+
+           expect(g.errors).toEqual({'async': true, 'other': true});
+           expect(g.pending).toEqual(false);
+         }));
+
+      it('should set multiple async validators from options obj', fakeAsync(() => {
+           const g = new FormArray(
+               [new FormControl('value')],
+               {asyncValidators: [asyncValidator('expected'), otherObservableValidator]});
+
+           expect(g.pending).toEqual(true);
+
+           tick();
+
+           expect(g.errors).toEqual({'async': true, 'other': true});
+           expect(g.pending).toEqual(false);
+         }));
+    });
+
+    describe('disable() & enable()', () => {
+      let a: FormArray;
+      let c: FormControl;
+      let c2: FormControl;
+
+      beforeEach(() => {
+        c = new FormControl(null);
+        c2 = new FormControl(null);
+        a = new FormArray([c, c2]);
+      });
+
+      it('should mark the array as disabled', () => {
+        expect(a.disabled).toBe(false);
+        expect(a.valid).toBe(true);
+
+        a.disable();
+        expect(a.disabled).toBe(true);
+        expect(a.valid).toBe(false);
+
+        a.enable();
+        expect(a.disabled).toBe(false);
+        expect(a.valid).toBe(true);
+      });
+
+      it('should set the array status as disabled', () => {
+        expect(a.status).toBe('VALID');
+
+        a.disable();
+        expect(a.status).toBe('DISABLED');
+
+        a.enable();
+        expect(a.status).toBe('VALID');
+      });
+
+      it('should mark children of the array as disabled', () => {
+        expect(c.disabled).toBe(false);
+        expect(c2.disabled).toBe(false);
+
+        a.disable();
+        expect(c.disabled).toBe(true);
+        expect(c2.disabled).toBe(true);
+
+        a.enable();
+        expect(c.disabled).toBe(false);
+        expect(c2.disabled).toBe(false);
+      });
+
+      it('should ignore disabled controls in validation', () => {
+        const g = new FormGroup({
+          nested: new FormArray([new FormControl(null, Validators.required)]),
+          two: new FormControl('two')
+        });
+        expect(g.valid).toBe(false);
+
+        g.get('nested') !.disable();
+        expect(g.valid).toBe(true);
+
+        g.get('nested') !.enable();
+        expect(g.valid).toBe(false);
+      });
+
+      it('should ignore disabled controls when serializing value', () => {
+        const g = new FormGroup(
+            {nested: new FormArray([new FormControl('one')]), two: new FormControl('two')});
+        expect(g.value).toEqual({'nested': ['one'], 'two': 'two'});
+
+        g.get('nested') !.disable();
+        expect(g.value).toEqual({'two': 'two'});
+
+        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();
+        expect(g.dirty).toBe(true);
+
+        g.get('nested') !.disable();
+        expect(g.get('nested') !.dirty).toBe(true);
+        expect(g.dirty).toEqual(false);
+
+        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();
+        expect(g.touched).toBe(true);
+
+        g.get('nested') !.disable();
+        expect(g.get('nested') !.touched).toBe(true);
+        expect(g.touched).toEqual(false);
+
+        g.get('nested') !.enable();
+        expect(g.touched).toEqual(true);
+      });
+
+      it('should keep empty, disabled arrays disabled when updating validity', () => {
+        const arr = new FormArray([]);
+        expect(arr.status).toEqual('VALID');
+
+        arr.disable();
+        expect(arr.status).toEqual('DISABLED');
+
+        arr.updateValueAndValidity();
+        expect(arr.status).toEqual('DISABLED');
+
+        arr.push(new FormControl({value: '', disabled: true}));
+        expect(arr.status).toEqual('DISABLED');
+
+        arr.push(new FormControl());
+        expect(arr.status).toEqual('VALID');
+      });
+
+      it('should re-enable empty, disabled arrays', () => {
+        const arr = new FormArray([]);
+        arr.disable();
+        expect(arr.status).toEqual('DISABLED');
+
+        arr.enable();
+        expect(arr.status).toEqual('VALID');
+      });
+
+      it('should not run validators on disabled controls', () => {
+        const validator = jasmine.createSpy('validator');
+        const arr = new FormArray([new FormControl()], validator);
+        expect(validator.calls.count()).toEqual(1);
+
+        arr.disable();
+        expect(validator.calls.count()).toEqual(1);
+
+        arr.setValue(['value']);
+        expect(validator.calls.count()).toEqual(1);
+
+        arr.enable();
+        expect(validator.calls.count()).toEqual(2);
+      });
+
+      describe('disabled errors', () => {
+        it('should clear out array errors when disabled', () => {
+          const arr = new FormArray([new FormControl()], () => ({'expected': true}));
+          expect(arr.errors).toEqual({'expected': true});
+
+          arr.disable();
+          expect(arr.errors).toEqual(null);
+
+          arr.enable();
+          expect(arr.errors).toEqual({'expected': true});
+        });
+
+        it('should re-populate array errors when enabled from a child', () => {
+          const arr = new FormArray([new FormControl()], () => ({'expected': true}));
+          arr.disable();
+          expect(arr.errors).toEqual(null);
+
+          arr.push(new FormControl());
+          expect(arr.errors).toEqual({'expected': true});
+        });
+
+        it('should clear out async array errors when disabled', fakeAsync(() => {
+             const arr = new FormArray([new FormControl()], null !, asyncValidator('expected'));
+             tick();
+             expect(arr.errors).toEqual({'async': true});
+
+             arr.disable();
+             expect(arr.errors).toEqual(null);
+
+             arr.enable();
+             tick();
+             expect(arr.errors).toEqual({'async': true});
+           }));
+
+        it('should re-populate async array errors when enabled from a child', fakeAsync(() => {
+             const arr = new FormArray([new FormControl()], null !, asyncValidator('expected'));
+             tick();
+             expect(arr.errors).toEqual({'async': true});
+
+             arr.disable();
+             expect(arr.errors).toEqual(null);
+
+             arr.push(new FormControl());
+             tick();
+             expect(arr.errors).toEqual({'async': true});
+           }));
+      });
+
+      describe('disabled events', () => {
+        let logger: string[];
+        let c: FormControl;
+        let a: FormArray;
+        let form: FormGroup;
+
+        beforeEach(() => {
+          logger = [];
+          c = new FormControl('', Validators.required);
+          a = new FormArray([c]);
+          form = new FormGroup({a: a});
+        });
+
+        it('should emit value change events in the right order', () => {
+          c.valueChanges.subscribe(() => logger.push('control'));
+          a.valueChanges.subscribe(() => logger.push('array'));
+          form.valueChanges.subscribe(() => logger.push('form'));
+
+          a.disable();
+          expect(logger).toEqual(['control', 'array', 'form']);
+        });
+
+        it('should emit status change events in the right order', () => {
+          c.statusChanges.subscribe(() => logger.push('control'));
+          a.statusChanges.subscribe(() => logger.push('array'));
+          form.statusChanges.subscribe(() => logger.push('form'));
+
+          a.disable();
+          expect(logger).toEqual(['control', 'array', 'form']);
+        });
+
+        it('should not emit value change events when emitEvent = false', () => {
+          c.valueChanges.subscribe(() => logger.push('control'));
+          a.valueChanges.subscribe(() => logger.push('array'));
+          form.valueChanges.subscribe(() => logger.push('form'));
+
+          a.disable({emitEvent: false});
+          expect(logger).toEqual([]);
+          a.enable({emitEvent: false});
+          expect(logger).toEqual([]);
+        });
+
+        it('should not emit status change events when emitEvent = false', () => {
+          c.statusChanges.subscribe(() => logger.push('control'));
+          a.statusChanges.subscribe(() => logger.push('array'));
+          form.statusChanges.subscribe(() => logger.push('form'));
+
+          a.disable({emitEvent: false});
+          expect(logger).toEqual([]);
+          a.enable({emitEvent: false});
+          expect(logger).toEqual([]);
+        });
+
+      });
+
+      describe('setControl()', () => {
+        let c: FormControl;
+        let a: FormArray;
+
+        beforeEach(() => {
+          c = new FormControl('one');
+          a = new FormArray([c]);
+        });
+
+        it('should replace existing control with new control', () => {
+          const c2 = new FormControl('new!', Validators.minLength(10));
+          a.setControl(0, c2);
+
+          expect(a.controls[0]).toEqual(c2);
+          expect(a.value).toEqual(['new!']);
+          expect(a.valid).toBe(false);
+        });
+
+        it('should add control if control did not exist before', () => {
+          const c2 = new FormControl('new!', Validators.minLength(10));
+          a.setControl(1, c2);
+
+          expect(a.controls[1]).toEqual(c2);
+          expect(a.value).toEqual(['one', 'new!']);
+          expect(a.valid).toBe(false);
+        });
+
+        it('should remove control if new control is null', () => {
+          a.setControl(0, null !);
+          expect(a.controls[0]).not.toBeDefined();
+          expect(a.value).toEqual([]);
+        });
+
+        it('should only emit value change event once', () => {
+          const logger: string[] = [];
+          const c2 = new FormControl('new!');
+          a.valueChanges.subscribe(() => logger.push('change!'));
+          a.setControl(0, c2);
+          expect(logger).toEqual(['change!']);
+        });
+
+      });
+
+    });
+  });
+})();
diff --git a/packages/forms/test/form_builder_spec.ts b/packages/forms/test/form_builder_spec.ts
new file mode 100644
index 000000000000..bf7596eade38
--- /dev/null
+++ b/packages/forms/test/form_builder_spec.ts
@@ -0,0 +1,123 @@
+/**
+ * @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 {fakeAsync, tick} from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {FormBuilder} from '@angular/forms';
+import {of } from 'rxjs';
+
+(function() {
+  function syncValidator(_: any /** TODO #9100 */): any /** TODO #9100 */ { return null; }
+  function asyncValidator(_: any /** TODO #9100 */) { return Promise.resolve(null); }
+
+  describe('Form Builder', () => {
+    let b: FormBuilder;
+
+    beforeEach(() => { b = new FormBuilder(); });
+
+    it('should create controls from a value', () => {
+      const g = b.group({'login': 'some value'});
+
+      expect(g.controls['login'].value).toEqual('some value');
+    });
+
+    it('should create controls from a boxed value', () => {
+      const g = b.group({'login': {value: 'some value', disabled: true}});
+
+      expect(g.controls['login'].value).toEqual('some value');
+      expect(g.controls['login'].disabled).toEqual(true);
+    });
+
+    it('should create controls from an array', () => {
+      const g = b.group(
+          {'login': ['some value'], 'password': ['some value', syncValidator, asyncValidator]});
+
+      expect(g.controls['login'].value).toEqual('some value');
+      expect(g.controls['password'].value).toEqual('some value');
+      expect(g.controls['password'].validator).toEqual(syncValidator);
+      expect(g.controls['password'].asyncValidator).toEqual(asyncValidator);
+    });
+
+    it('should use controls whose form state is a primitive value', () => {
+      const g = b.group({'login': b.control('some value', syncValidator, asyncValidator)});
+
+      expect(g.controls['login'].value).toEqual('some value');
+      expect(g.controls['login'].validator).toBe(syncValidator);
+      expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
+    });
+
+    it('should support controls with no validators and whose form state is null', () => {
+      const g = b.group({'login': b.control(null)});
+      expect(g.controls['login'].value).toBeNull();
+      expect(g.controls['login'].validator).toBeNull();
+      expect(g.controls['login'].asyncValidator).toBeNull();
+    });
+
+    it('should support controls with validators and whose form state is null', () => {
+      const g = b.group({'login': b.control(null, syncValidator, asyncValidator)});
+      expect(g.controls['login'].value).toBeNull();
+      expect(g.controls['login'].validator).toBe(syncValidator);
+      expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
+    });
+
+    it('should support controls with no validators and whose form state is undefined', () => {
+      const g = b.group({'login': b.control(undefined)});
+      expect(g.controls['login'].value).toBeNull();
+      expect(g.controls['login'].validator).toBeNull();
+      expect(g.controls['login'].asyncValidator).toBeNull();
+    });
+
+    it('should support controls with validators and whose form state is undefined', () => {
+      const g = b.group({'login': b.control(undefined, syncValidator, asyncValidator)});
+      expect(g.controls['login'].value).toBeNull();
+      expect(g.controls['login'].validator).toBe(syncValidator);
+      expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
+    });
+
+    it('should create groups with a custom validator', () => {
+      const g = b.group(
+          {'login': 'some value'}, {'validator': syncValidator, 'asyncValidator': asyncValidator});
+
+      expect(g.validator).toBe(syncValidator);
+      expect(g.asyncValidator).toBe(asyncValidator);
+    });
+
+    it('should create control arrays', () => {
+      const c = b.control('three');
+      const e = b.control(null);
+      const f = b.control(undefined);
+      const a = b.array(
+          ['one', ['two', syncValidator], c, b.array(['four']), e, f], syncValidator,
+          asyncValidator);
+
+      expect(a.value).toEqual(['one', 'two', 'three', ['four'], null, null]);
+      expect(a.validator).toBe(syncValidator);
+      expect(a.asyncValidator).toBe(asyncValidator);
+    });
+
+    it('should create control arrays with multiple async validators', fakeAsync(() => {
+         function asyncValidator1() { return of ({'async1': true}); }
+         function asyncValidator2() { return of ({'async2': true}); }
+
+         const a = b.array(['one', 'two'], null, [asyncValidator1, asyncValidator2]);
+         expect(a.value).toEqual(['one', 'two']);
+
+         tick();
+
+         expect(a.errors).toEqual({'async1': true, 'async2': true});
+       }));
+
+    it('should create control arrays with multiple sync validators', () => {
+      function syncValidator1() { return {'sync1': true}; }
+      function syncValidator2() { return {'sync2': true}; }
+
+      const a = b.array(['one', 'two'], [syncValidator1, syncValidator2]);
+      expect(a.value).toEqual(['one', 'two']);
+      expect(a.errors).toEqual({'sync1': true, 'sync2': true});
+    });
+  });
+})();
diff --git a/packages/forms/test/form_control_spec.ts b/packages/forms/test/form_control_spec.ts
new file mode 100644
index 000000000000..2bc06e1171cb
--- /dev/null
+++ b/packages/forms/test/form_control_spec.ts
@@ -0,0 +1,1197 @@
+/**
+ * @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 {EventEmitter} from '@angular/core';
+import {fakeAsync, tick} from '@angular/core/testing';
+import {AsyncTestCompleter, beforeEach, describe, inject, it} from '@angular/core/testing/src/testing_internal';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+
+import {FormArray} from '@angular/forms/src/model';
+
+(function() {
+  function asyncValidator(expected: string, timeouts = {}) {
+    return (c: FormControl) => {
+      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;
+
+      if (t == 0) {
+        resolve(res);
+      } else {
+        setTimeout(() => { resolve(res); }, t);
+      }
+
+      return promise;
+    };
+  }
+
+  function asyncValidatorReturningObservable(c: FormControl) {
+    const e = new EventEmitter();
+    Promise.resolve(null).then(() => { e.emit({'async': true}); });
+    return e;
+  }
+
+  function otherAsyncValidator() { return Promise.resolve({'other': true}); }
+
+  function syncValidator(_: any /** TODO #9100 */): any /** TODO #9100 */ { return null; }
+
+  describe('FormControl', () => {
+    it('should default the value to null', () => {
+      const c = new FormControl();
+      expect(c.value).toBe(null);
+    });
+
+    describe('boxed values', () => {
+      it('should support valid boxed values on creation', () => {
+        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');
+      });
+
+      it('should honor boxed value with disabled control when validating', () => {
+        const c = new FormControl({value: '', disabled: true}, Validators.required);
+        expect(c.disabled).toBe(true);
+        expect(c.valid).toBe(false);
+        expect(c.status).toBe('DISABLED');
+      });
+
+      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 !);
+        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 !);
+        expect(c.value).toEqual({value: '', test: 'test'});
+        expect(c.disabled).toBe(false);
+      });
+
+    });
+
+    describe('updateOn', () => {
+
+      it('should default to on change', () => {
+        const c = new FormControl('');
+        expect(c.updateOn).toEqual('change');
+      });
+
+      it('should default to on change with an options obj', () => {
+        const c = new FormControl('', {validators: Validators.required});
+        expect(c.updateOn).toEqual('change');
+      });
+
+      it('should set updateOn when updating on blur', () => {
+        const c = new FormControl('', {updateOn: 'blur'});
+        expect(c.updateOn).toEqual('blur');
+      });
+
+      describe('in groups and arrays', () => {
+        it('should default to group updateOn when not set in control', () => {
+          const g =
+              new FormGroup({one: new FormControl(), two: new FormControl()}, {updateOn: 'blur'});
+
+          expect(g.get('one') !.updateOn).toEqual('blur');
+          expect(g.get('two') !.updateOn).toEqual('blur');
+        });
+
+        it('should default to array updateOn when not set in control', () => {
+          const a = new FormArray([new FormControl(), new FormControl()], {updateOn: 'blur'});
+
+          expect(a.get([0]) !.updateOn).toEqual('blur');
+          expect(a.get([1]) !.updateOn).toEqual('blur');
+        });
+
+        it('should set updateOn with nested groups', () => {
+          const g = new FormGroup(
+              {
+                group: new FormGroup({one: new FormControl(), two: new FormControl()}),
+              },
+              {updateOn: 'blur'});
+
+          expect(g.get('group.one') !.updateOn).toEqual('blur');
+          expect(g.get('group.two') !.updateOn).toEqual('blur');
+          expect(g.get('group') !.updateOn).toEqual('blur');
+        });
+
+        it('should set updateOn with nested arrays', () => {
+          const g = new FormGroup(
+              {
+                arr: new FormArray([new FormControl(), new FormControl()]),
+              },
+              {updateOn: 'blur'});
+
+          expect(g.get(['arr', 0]) !.updateOn).toEqual('blur');
+          expect(g.get(['arr', 1]) !.updateOn).toEqual('blur');
+          expect(g.get('arr') !.updateOn).toEqual('blur');
+        });
+
+        it('should allow control updateOn to override group updateOn', () => {
+          const g = new FormGroup(
+              {one: new FormControl('', {updateOn: 'change'}), two: new FormControl()},
+              {updateOn: 'blur'});
+
+          expect(g.get('one') !.updateOn).toEqual('change');
+          expect(g.get('two') !.updateOn).toEqual('blur');
+        });
+
+        it('should set updateOn with complex setup', () => {
+          const g = new FormGroup({
+            group: new FormGroup(
+                {one: new FormControl('', {updateOn: 'change'}), two: new FormControl()},
+                {updateOn: 'blur'}),
+            groupTwo: new FormGroup({one: new FormControl()}, {updateOn: 'submit'}),
+            three: new FormControl()
+          });
+
+          expect(g.get('group.one') !.updateOn).toEqual('change');
+          expect(g.get('group.two') !.updateOn).toEqual('blur');
+          expect(g.get('groupTwo.one') !.updateOn).toEqual('submit');
+          expect(g.get('three') !.updateOn).toEqual('change');
+        });
+
+
+      });
+
+    });
+
+    describe('validator', () => {
+
+      it('should run validator with the initial value', () => {
+        const c = new FormControl('value', Validators.required);
+        expect(c.valid).toEqual(true);
+      });
+
+      it('should rerun the validator when the value changes', () => {
+        const c = new FormControl('value', Validators.required);
+        c.setValue(null);
+        expect(c.valid).toEqual(false);
+      });
+
+      it('should support arrays of validator functions if passed', () => {
+        const c = new FormControl('value', [Validators.required, Validators.minLength(3)]);
+        c.setValue('a');
+        expect(c.valid).toEqual(false);
+
+        c.setValue('aaa');
+        expect(c.valid).toEqual(true);
+      });
+
+      it('should support single validator from options obj', () => {
+        const c = new FormControl(null, {validators: Validators.required});
+        expect(c.valid).toEqual(false);
+        expect(c.errors).toEqual({required: true});
+
+        c.setValue('value');
+        expect(c.valid).toEqual(true);
+      });
+
+      it('should support multiple validators from options obj', () => {
+        const c =
+            new FormControl(null, {validators: [Validators.required, Validators.minLength(3)]});
+        expect(c.valid).toEqual(false);
+        expect(c.errors).toEqual({required: true});
+
+        c.setValue('aa');
+        expect(c.valid).toEqual(false);
+        expect(c.errors).toEqual({minlength: {requiredLength: 3, actualLength: 2}});
+
+        c.setValue('aaa');
+        expect(c.valid).toEqual(true);
+      });
+
+      it('should support a null validators value', () => {
+        const c = new FormControl(null, {validators: null});
+        expect(c.valid).toEqual(true);
+      });
+
+      it('should support an empty options obj', () => {
+        const c = new FormControl(null, {});
+        expect(c.valid).toEqual(true);
+      });
+
+      it('should return errors', () => {
+        const c = new FormControl(null, Validators.required);
+        expect(c.errors).toEqual({'required': true});
+      });
+
+      it('should set single validator', () => {
+        const c = new FormControl(null);
+        expect(c.valid).toEqual(true);
+
+        c.setValidators(Validators.required);
+
+        c.setValue(null);
+        expect(c.valid).toEqual(false);
+
+        c.setValue('abc');
+        expect(c.valid).toEqual(true);
+      });
+
+      it('should set multiple validators from array', () => {
+        const c = new FormControl('');
+        expect(c.valid).toEqual(true);
+
+        c.setValidators([Validators.minLength(5), Validators.required]);
+
+        c.setValue('');
+        expect(c.valid).toEqual(false);
+
+        c.setValue('abc');
+        expect(c.valid).toEqual(false);
+
+        c.setValue('abcde');
+        expect(c.valid).toEqual(true);
+      });
+
+      it('should clear validators', () => {
+        const c = new FormControl('', Validators.required);
+        expect(c.valid).toEqual(false);
+
+        c.clearValidators();
+        expect(c.validator).toEqual(null);
+
+        c.setValue('');
+        expect(c.valid).toEqual(true);
+      });
+
+      it('should add after clearing', () => {
+        const c = new FormControl('', Validators.required);
+        expect(c.valid).toEqual(false);
+
+        c.clearValidators();
+        expect(c.validator).toEqual(null);
+
+        c.setValidators([Validators.required]);
+        expect(c.validator).not.toBe(null);
+      });
+    });
+
+    describe('asyncValidator', () => {
+      it('should run validator with the initial value', fakeAsync(() => {
+           const c = new FormControl('value', null !, asyncValidator('expected'));
+           tick();
+
+           expect(c.valid).toEqual(false);
+           expect(c.errors).toEqual({'async': true});
+         }));
+
+      it('should support validators returning observables', fakeAsync(() => {
+           const c = new FormControl('value', null !, asyncValidatorReturningObservable);
+           tick();
+
+           expect(c.valid).toEqual(false);
+           expect(c.errors).toEqual({'async': true});
+         }));
+
+      it('should rerun the validator when the value changes', fakeAsync(() => {
+           const c = new FormControl('value', null !, asyncValidator('expected'));
+
+           c.setValue('expected');
+           tick();
+
+           expect(c.valid).toEqual(true);
+         }));
+
+      it('should run the async validator only when the sync validator passes', fakeAsync(() => {
+           const c = new FormControl('', Validators.required, asyncValidator('expected'));
+           tick();
+
+           expect(c.errors).toEqual({'required': true});
+
+           c.setValue('some value');
+           tick();
+
+           expect(c.errors).toEqual({'async': true});
+         }));
+
+      it('should mark the control as pending while running the async validation', fakeAsync(() => {
+           const c = new FormControl('', null !, asyncValidator('expected'));
+
+           expect(c.pending).toEqual(true);
+
+           tick();
+
+           expect(c.pending).toEqual(false);
+         }));
+
+      it('should only use the latest async validation run', fakeAsync(() => {
+           const c = new FormControl(
+               '', null !, asyncValidator('expected', {'long': 200, 'expected': 100}));
+
+           c.setValue('long');
+           c.setValue('expected');
+
+           tick(300);
+
+           expect(c.valid).toEqual(true);
+         }));
+
+      it('should support arrays of async validator functions if passed', fakeAsync(() => {
+           const c =
+               new FormControl('value', null !, [asyncValidator('expected'), otherAsyncValidator]);
+           tick();
+
+           expect(c.errors).toEqual({'async': true, 'other': true});
+         }));
+
+
+      it('should support a single async validator from options obj', fakeAsync(() => {
+           const c = new FormControl('value', {asyncValidators: asyncValidator('expected')});
+           expect(c.pending).toEqual(true);
+           tick();
+
+           expect(c.valid).toEqual(false);
+           expect(c.errors).toEqual({'async': true});
+         }));
+
+      it('should support multiple async validators from options obj', fakeAsync(() => {
+           const c = new FormControl(
+               'value', {asyncValidators: [asyncValidator('expected'), otherAsyncValidator]});
+           expect(c.pending).toEqual(true);
+           tick();
+
+           expect(c.valid).toEqual(false);
+           expect(c.errors).toEqual({'async': true, 'other': true});
+         }));
+
+      it('should support a mix of validators from options obj', fakeAsync(() => {
+           const c = new FormControl(
+               '', {validators: Validators.required, asyncValidators: asyncValidator('expected')});
+           tick();
+           expect(c.errors).toEqual({required: true});
+
+           c.setValue('value');
+           expect(c.pending).toBe(true);
+
+           tick();
+           expect(c.valid).toEqual(false);
+           expect(c.errors).toEqual({'async': true});
+         }));
+
+      it('should add single async validator', fakeAsync(() => {
+           const c = new FormControl('value', null !);
+
+           c.setAsyncValidators(asyncValidator('expected'));
+           expect(c.asyncValidator).not.toEqual(null);
+
+           c.setValue('expected');
+           tick();
+
+           expect(c.valid).toEqual(true);
+         }));
+
+      it('should add async validator from array', fakeAsync(() => {
+           const c = new FormControl('value', null !);
+
+           c.setAsyncValidators([asyncValidator('expected')]);
+           expect(c.asyncValidator).not.toEqual(null);
+
+           c.setValue('expected');
+           tick();
+
+           expect(c.valid).toEqual(true);
+         }));
+
+      it('should clear async validators', fakeAsync(() => {
+           const c = new FormControl('value', [asyncValidator('expected'), otherAsyncValidator]);
+
+           c.clearValidators();
+
+           expect(c.asyncValidator).toEqual(null);
+         }));
+
+      it('should not change validity state if control is disabled while async validating',
+         fakeAsync(() => {
+           const c = new FormControl('value', [asyncValidator('expected')]);
+           c.disable();
+           tick();
+           expect(c.status).toEqual('DISABLED');
+         }));
+    });
+
+    describe('dirty', () => {
+      it('should be false after creating a control', () => {
+        const c = new FormControl('value');
+        expect(c.dirty).toEqual(false);
+      });
+
+      it('should be true after changing the value of the control', () => {
+        const c = new FormControl('value');
+        c.markAsDirty();
+        expect(c.dirty).toEqual(true);
+      });
+    });
+
+    describe('touched', () => {
+      it('should be false after creating a control', () => {
+        const c = new FormControl('value');
+        expect(c.touched).toEqual(false);
+      });
+
+      it('should be true after markAsTouched runs', () => {
+        const c = new FormControl('value');
+        c.markAsTouched();
+        expect(c.touched).toEqual(true);
+      });
+    });
+
+    describe('setValue', () => {
+      let g: FormGroup, c: FormControl;
+      beforeEach(() => {
+        c = new FormControl('oldValue');
+        g = new FormGroup({'one': c});
+      });
+
+      it('should set the value of the control', () => {
+        c.setValue('newValue');
+        expect(c.value).toEqual('newValue');
+      });
+
+      it('should invoke ngOnChanges if it is present', () => {
+        let ngOnChanges: any;
+        c.registerOnChange((v: any) => ngOnChanges = ['invoked', v]);
+
+        c.setValue('newValue');
+
+        expect(ngOnChanges).toEqual(['invoked', 'newValue']);
+      });
+
+      it('should not invoke on change when explicitly specified', () => {
+        let onChange: any = null;
+        c.registerOnChange((v: any) => onChange = ['invoked', v]);
+
+        c.setValue('newValue', {emitModelToViewChange: false});
+
+        expect(onChange).toBeNull();
+      });
+
+      it('should set the parent', () => {
+        c.setValue('newValue');
+        expect(g.value).toEqual({'one': 'newValue'});
+      });
+
+      it('should not set the parent when explicitly specified', () => {
+        c.setValue('newValue', {onlySelf: true});
+        expect(g.value).toEqual({'one': 'oldValue'});
+      });
+
+      it('should fire an event', fakeAsync(() => {
+           c.valueChanges.subscribe((value) => { expect(value).toEqual('newValue'); });
+
+           c.setValue('newValue');
+           tick();
+         }));
+
+      it('should not fire an event when explicitly specified', fakeAsync(() => {
+           c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+
+           c.setValue('newValue', {emitEvent: false});
+           tick();
+         }));
+
+      it('should work on a disabled control', () => {
+        g.addControl('two', new FormControl('two'));
+        c.disable();
+        c.setValue('new value');
+        expect(c.value).toEqual('new value');
+        expect(g.value).toEqual({'two': 'two'});
+      });
+    });
+
+    describe('patchValue', () => {
+      let g: FormGroup, c: FormControl;
+      beforeEach(() => {
+        c = new FormControl('oldValue');
+        g = new FormGroup({'one': c});
+      });
+
+      it('should set the value of the control', () => {
+        c.patchValue('newValue');
+        expect(c.value).toEqual('newValue');
+      });
+
+      it('should invoke ngOnChanges if it is present', () => {
+        let ngOnChanges: any;
+        c.registerOnChange((v: any) => ngOnChanges = ['invoked', v]);
+
+        c.patchValue('newValue');
+
+        expect(ngOnChanges).toEqual(['invoked', 'newValue']);
+      });
+
+      it('should not invoke on change when explicitly specified', () => {
+        let onChange: any = null;
+        c.registerOnChange((v: any) => onChange = ['invoked', v]);
+
+        c.patchValue('newValue', {emitModelToViewChange: false});
+
+        expect(onChange).toBeNull();
+      });
+
+      it('should set the parent', () => {
+        c.patchValue('newValue');
+        expect(g.value).toEqual({'one': 'newValue'});
+      });
+
+      it('should not set the parent when explicitly specified', () => {
+        c.patchValue('newValue', {onlySelf: true});
+        expect(g.value).toEqual({'one': 'oldValue'});
+      });
+
+      it('should fire an event', fakeAsync(() => {
+           c.valueChanges.subscribe((value) => { expect(value).toEqual('newValue'); });
+
+           c.patchValue('newValue');
+           tick();
+         }));
+
+      it('should not fire an event when explicitly specified', fakeAsync(() => {
+           c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+
+           c.patchValue('newValue', {emitEvent: false});
+
+           tick();
+         }));
+
+      it('should patch value on a disabled control', () => {
+        g.addControl('two', new FormControl('two'));
+        c.disable();
+
+        c.patchValue('new value');
+        expect(c.value).toEqual('new value');
+        expect(g.value).toEqual({'two': 'two'});
+      });
+    });
+
+    describe('reset()', () => {
+      let c: FormControl;
+
+      beforeEach(() => { c = new FormControl('initial value'); });
+
+      it('should reset to a specific value if passed', () => {
+        c.setValue('new value');
+        expect(c.value).toBe('new value');
+
+        c.reset('initial value');
+        expect(c.value).toBe('initial value');
+      });
+
+      it('should not set the parent when explicitly specified', () => {
+        const g = new FormGroup({'one': c});
+        c.patchValue('newValue', {onlySelf: true});
+        expect(g.value).toEqual({'one': 'initial value'});
+      });
+
+      it('should reset to a specific value if passed with boxed value', () => {
+        c.setValue('new value');
+        expect(c.value).toBe('new value');
+
+        c.reset({value: 'initial value', disabled: false});
+        expect(c.value).toBe('initial value');
+      });
+
+      it('should clear the control value if no value is passed', () => {
+        c.setValue('new value');
+        expect(c.value).toBe('new value');
+
+        c.reset();
+        expect(c.value).toBe(null);
+      });
+
+      it('should update the value of any parent controls with passed value', () => {
+        const g = new FormGroup({'one': c});
+        c.setValue('new value');
+        expect(g.value).toEqual({'one': 'new value'});
+
+        c.reset('initial value');
+        expect(g.value).toEqual({'one': 'initial value'});
+      });
+
+      it('should update the value of any parent controls with null value', () => {
+        const g = new FormGroup({'one': c});
+        c.setValue('new value');
+        expect(g.value).toEqual({'one': 'new value'});
+
+        c.reset();
+        expect(g.value).toEqual({'one': null});
+      });
+
+      it('should mark the control as pristine', () => {
+        c.markAsDirty();
+        expect(c.pristine).toBe(false);
+
+        c.reset();
+        expect(c.pristine).toBe(true);
+      });
+
+      it('should set the parent pristine state if all pristine', () => {
+        const g = new FormGroup({'one': c});
+        c.markAsDirty();
+        expect(g.pristine).toBe(false);
+
+        c.reset();
+        expect(g.pristine).toBe(true);
+      });
+
+      it('should not set the parent pristine state if it has other dirty controls', () => {
+        const c2 = new FormControl('two');
+        const g = new FormGroup({'one': c, 'two': c2});
+        c.markAsDirty();
+        c2.markAsDirty();
+
+        c.reset();
+        expect(g.pristine).toBe(false);
+      });
+
+      it('should mark the control as untouched', () => {
+        c.markAsTouched();
+        expect(c.untouched).toBe(false);
+
+        c.reset();
+        expect(c.untouched).toBe(true);
+      });
+
+      it('should set the parent untouched state if all untouched', () => {
+        const g = new FormGroup({'one': c});
+        c.markAsTouched();
+        expect(g.untouched).toBe(false);
+
+        c.reset();
+        expect(g.untouched).toBe(true);
+      });
+
+      it('should not set the parent untouched state if other touched controls', () => {
+        const c2 = new FormControl('two');
+        const g = new FormGroup({'one': c, 'two': c2});
+        c.markAsTouched();
+        c2.markAsTouched();
+
+        c.reset();
+        expect(g.untouched).toBe(false);
+      });
+
+      it('should retain the disabled state of the control', () => {
+        c.disable();
+        c.reset();
+
+        expect(c.disabled).toBe(true);
+      });
+
+      it('should set disabled state based on boxed value if passed', () => {
+        c.disable();
+        c.reset({value: null, disabled: false});
+
+        expect(c.disabled).toBe(false);
+      });
+
+      describe('reset() events', () => {
+        let g: FormGroup, c2: FormControl, logger: any[];
+
+        beforeEach(() => {
+          c2 = new FormControl('two');
+          g = new FormGroup({'one': c, 'two': c2});
+          logger = [];
+        });
+
+        it('should emit one valueChange event per reset control', () => {
+          g.valueChanges.subscribe(() => logger.push('group'));
+          c.valueChanges.subscribe(() => logger.push('control1'));
+          c2.valueChanges.subscribe(() => logger.push('control2'));
+
+          c.reset();
+          expect(logger).toEqual(['control1', 'group']);
+        });
+
+        it('should not fire an event when explicitly specified', fakeAsync(() => {
+             g.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c2.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+
+             c.reset(null, {emitEvent: false});
+
+             tick();
+           }));
+
+        it('should emit one statusChange event per reset control', () => {
+          g.statusChanges.subscribe(() => logger.push('group'));
+          c.statusChanges.subscribe(() => logger.push('control1'));
+          c2.statusChanges.subscribe(() => logger.push('control2'));
+
+          c.reset();
+          expect(logger).toEqual(['control1', 'group']);
+        });
+
+        it('should emit one statusChange event per disabled control', () => {
+          g.statusChanges.subscribe(() => logger.push('group'));
+          c.statusChanges.subscribe(() => logger.push('control1'));
+          c2.statusChanges.subscribe(() => logger.push('control2'));
+
+          c.reset({value: null, disabled: true});
+          expect(logger).toEqual(['control1', 'group']);
+        });
+      });
+
+    });
+
+    describe('valueChanges & statusChanges', () => {
+      let c: FormControl;
+
+      beforeEach(() => { c = new FormControl('old', Validators.required); });
+
+      it('should fire an event after the value has been updated',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           c.valueChanges.subscribe({
+             next: (value: any) => {
+               expect(c.value).toEqual('new');
+               expect(value).toEqual('new');
+               async.done();
+             }
+           });
+           c.setValue('new');
+         }));
+
+      it('should fire an event after the status has been updated to invalid', fakeAsync(() => {
+           c.statusChanges.subscribe({
+             next: (status: any) => {
+               expect(c.status).toEqual('INVALID');
+               expect(status).toEqual('INVALID');
+             }
+           });
+
+           c.setValue('');
+           tick();
+         }));
+
+      it('should fire an event after the status has been updated to pending', fakeAsync(() => {
+           const c = new FormControl('old', Validators.required, asyncValidator('expected'));
+
+           const log: any[] /** TODO #9100 */ = [];
+           c.valueChanges.subscribe({next: (value: any) => log.push(`value: '${value}'`)});
+
+           c.statusChanges.subscribe({next: (status: any) => log.push(`status: '${status}'`)});
+
+           c.setValue('');
+           tick();
+
+           c.setValue('nonEmpty');
+           tick();
+
+           c.setValue('expected');
+           tick();
+
+           expect(log).toEqual([
+             'value: \'\'',
+             'status: \'INVALID\'',
+             'value: \'nonEmpty\'',
+             'status: \'PENDING\'',
+             'status: \'INVALID\'',
+             'value: \'expected\'',
+             'status: \'PENDING\'',
+             'status: \'VALID\'',
+           ]);
+         }));
+
+      // TODO: remove the if statement after making observable delivery sync
+      it('should update set errors and status before emitting an event',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           c.valueChanges.subscribe((value: any /** TODO #9100 */) => {
+             expect(c.valid).toEqual(false);
+             expect(c.errors).toEqual({'required': true});
+             async.done();
+           });
+           c.setValue('');
+         }));
+
+      it('should return a cold observable',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           c.setValue('will be ignored');
+           c.valueChanges.subscribe({
+             next: (value: any) => {
+               expect(value).toEqual('new');
+               async.done();
+             }
+           });
+           c.setValue('new');
+         }));
+    });
+
+    describe('setErrors', () => {
+      it('should set errors on a control', () => {
+        const c = new FormControl('someValue');
+
+        c.setErrors({'someError': true});
+
+        expect(c.valid).toEqual(false);
+        expect(c.errors).toEqual({'someError': true});
+      });
+
+      it('should reset the errors and validity when the value changes', () => {
+        const c = new FormControl('someValue', Validators.required);
+
+        c.setErrors({'someError': true});
+        c.setValue('');
+
+        expect(c.errors).toEqual({'required': true});
+      });
+
+      it('should update the parent group\'s validity', () => {
+        const c = new FormControl('someValue');
+        const g = new FormGroup({'one': c});
+
+        expect(g.valid).toEqual(true);
+
+        c.setErrors({'someError': true});
+
+        expect(g.valid).toEqual(false);
+      });
+
+      it('should not reset parent\'s errors', () => {
+        const c = new FormControl('someValue');
+        const g = new FormGroup({'one': c});
+
+        g.setErrors({'someGroupError': true});
+        c.setErrors({'someError': true});
+
+        expect(g.errors).toEqual({'someGroupError': true});
+      });
+
+      it('should reset errors when updating a value', () => {
+        const c = new FormControl('oldValue');
+        const g = new FormGroup({'one': c});
+
+        g.setErrors({'someGroupError': true});
+        c.setErrors({'someError': true});
+
+        c.setValue('newValue');
+
+        expect(c.errors).toEqual(null);
+        expect(g.errors).toEqual(null);
+      });
+    });
+
+    describe('disable() & enable()', () => {
+
+      it('should mark the control as disabled', () => {
+        const c = new FormControl(null);
+        expect(c.disabled).toBe(false);
+        expect(c.valid).toBe(true);
+
+        c.disable();
+        expect(c.disabled).toBe(true);
+        expect(c.valid).toBe(false);
+
+        c.enable();
+        expect(c.disabled).toBe(false);
+        expect(c.valid).toBe(true);
+      });
+
+      it('should set the control status as disabled', () => {
+        const c = new FormControl(null);
+        expect(c.status).toEqual('VALID');
+
+        c.disable();
+        expect(c.status).toEqual('DISABLED');
+
+        c.enable();
+        expect(c.status).toEqual('VALID');
+      });
+
+      it('should retain the original value when disabled', () => {
+        const c = new FormControl('some value');
+        expect(c.value).toEqual('some value');
+
+        c.disable();
+        expect(c.value).toEqual('some value');
+
+        c.enable();
+        expect(c.value).toEqual('some value');
+      });
+
+      it('should keep the disabled control in the group, but return false for contains()', () => {
+        const c = new FormControl('');
+        const g = new FormGroup({'one': c});
+
+        expect(g.get('one')).toBeDefined();
+        expect(g.contains('one')).toBe(true);
+
+        c.disable();
+        expect(g.get('one')).toBeDefined();
+        expect(g.contains('one')).toBe(false);
+      });
+
+      it('should mark the parent group disabled if all controls are disabled', () => {
+        const c = new FormControl();
+        const c2 = new FormControl();
+        const g = new FormGroup({'one': c, 'two': c2});
+        expect(g.enabled).toBe(true);
+
+        c.disable();
+        expect(g.enabled).toBe(true);
+
+        c2.disable();
+        expect(g.enabled).toBe(false);
+
+        c.enable();
+        expect(g.enabled).toBe(true);
+      });
+
+      it('should update the parent group value when child control status changes', () => {
+        const c = new FormControl('one');
+        const c2 = new FormControl('two');
+        const g = new FormGroup({'one': c, 'two': c2});
+        expect(g.value).toEqual({'one': 'one', 'two': 'two'});
+
+        c.disable();
+        expect(g.value).toEqual({'two': 'two'});
+
+        c2.disable();
+        expect(g.value).toEqual({'one': 'one', 'two': 'two'});
+
+        c.enable();
+        expect(g.value).toEqual({'one': 'one'});
+      });
+
+      it('should mark the parent array disabled if all controls are disabled', () => {
+        const c = new FormControl();
+        const c2 = new FormControl();
+        const a = new FormArray([c, c2]);
+        expect(a.enabled).toBe(true);
+
+        c.disable();
+        expect(a.enabled).toBe(true);
+
+        c2.disable();
+        expect(a.enabled).toBe(false);
+
+        c.enable();
+        expect(a.enabled).toBe(true);
+      });
+
+      it('should update the parent array value when child control status changes', () => {
+        const c = new FormControl('one');
+        const c2 = new FormControl('two');
+        const a = new FormArray([c, c2]);
+        expect(a.value).toEqual(['one', 'two']);
+
+        c.disable();
+        expect(a.value).toEqual(['two']);
+
+        c2.disable();
+        expect(a.value).toEqual(['one', 'two']);
+
+        c.enable();
+        expect(a.value).toEqual(['one']);
+      });
+
+      it('should ignore disabled controls in validation', () => {
+        const c = new FormControl(null, Validators.required);
+        const c2 = new FormControl(null);
+        const g = new FormGroup({one: c, two: c2});
+        expect(g.valid).toBe(false);
+
+        c.disable();
+        expect(g.valid).toBe(true);
+
+        c.enable();
+        expect(g.valid).toBe(false);
+      });
+
+      it('should ignore disabled controls when serializing value in a group', () => {
+        const c = new FormControl('one');
+        const c2 = new FormControl('two');
+        const g = new FormGroup({one: c, two: c2});
+        expect(g.value).toEqual({one: 'one', two: 'two'});
+
+        c.disable();
+        expect(g.value).toEqual({two: 'two'});
+
+        c.enable();
+        expect(g.value).toEqual({one: 'one', two: 'two'});
+      });
+
+      it('should ignore disabled controls when serializing value in an array', () => {
+        const c = new FormControl('one');
+        const c2 = new FormControl('two');
+        const a = new FormArray([c, c2]);
+        expect(a.value).toEqual(['one', 'two']);
+
+        c.disable();
+        expect(a.value).toEqual(['two']);
+
+        c.enable();
+        expect(a.value).toEqual(['one', 'two']);
+      });
+
+      it('should ignore disabled controls when determining dirtiness', () => {
+        const c = new FormControl('one');
+        const c2 = new FormControl('two');
+        const g = new FormGroup({one: c, two: c2});
+        c.markAsDirty();
+        expect(g.dirty).toBe(true);
+
+        c.disable();
+        expect(c.dirty).toBe(true);
+        expect(g.dirty).toBe(false);
+
+        c.enable();
+        expect(g.dirty).toBe(true);
+      });
+
+      it('should ignore disabled controls when determining touched state', () => {
+        const c = new FormControl('one');
+        const c2 = new FormControl('two');
+        const g = new FormGroup({one: c, two: c2});
+        c.markAsTouched();
+        expect(g.touched).toBe(true);
+
+        c.disable();
+        expect(c.touched).toBe(true);
+        expect(g.touched).toBe(false);
+
+        c.enable();
+        expect(g.touched).toBe(true);
+      });
+
+      it('should not run validators on disabled controls', () => {
+        const validator = jasmine.createSpy('validator');
+        const c = new FormControl('', validator);
+        expect(validator.calls.count()).toEqual(1);
+
+        c.disable();
+        expect(validator.calls.count()).toEqual(1);
+
+        c.setValue('value');
+        expect(validator.calls.count()).toEqual(1);
+
+        c.enable();
+        expect(validator.calls.count()).toEqual(2);
+      });
+
+      describe('disabled errors', () => {
+        it('should clear out the errors when disabled', () => {
+          const c = new FormControl('', Validators.required);
+          expect(c.errors).toEqual({required: true});
+
+          c.disable();
+          expect(c.errors).toEqual(null);
+
+          c.enable();
+          expect(c.errors).toEqual({required: true});
+        });
+
+        it('should clear out async errors when disabled', fakeAsync(() => {
+             const c = new FormControl('', null !, asyncValidator('expected'));
+             tick();
+             expect(c.errors).toEqual({'async': true});
+
+             c.disable();
+             expect(c.errors).toEqual(null);
+
+             c.enable();
+             tick();
+             expect(c.errors).toEqual({'async': true});
+           }));
+      });
+
+      describe('disabled events', () => {
+        let logger: string[];
+        let c: FormControl;
+        let g: FormGroup;
+
+        beforeEach(() => {
+          logger = [];
+          c = new FormControl('', Validators.required);
+          g = new FormGroup({one: c});
+        });
+
+        it('should emit a statusChange event when disabled status changes', () => {
+          c.statusChanges.subscribe((status: string) => logger.push(status));
+
+          c.disable();
+          expect(logger).toEqual(['DISABLED']);
+
+          c.enable();
+          expect(logger).toEqual(['DISABLED', 'INVALID']);
+
+        });
+
+        it('should emit status change events in correct order', () => {
+          c.statusChanges.subscribe(() => logger.push('control'));
+          g.statusChanges.subscribe(() => logger.push('group'));
+
+          c.disable();
+          expect(logger).toEqual(['control', 'group']);
+        });
+
+        it('should throw when sync validator passed into async validator param', () => {
+          const fn = () => new FormControl('', syncValidator, syncValidator);
+          // test for the specific error since without the error check it would still throw an error
+          // but
+          // not a meaningful one
+          expect(fn).toThrowError(`Expected validator to return Promise or Observable.`);
+        });
+
+        it('should not emit value change events when emitEvent = false', () => {
+          c.valueChanges.subscribe(() => logger.push('control'));
+          g.valueChanges.subscribe(() => logger.push('group'));
+
+          c.disable({emitEvent: false});
+          expect(logger).toEqual([]);
+          c.enable({emitEvent: false});
+          expect(logger).toEqual([]);
+        });
+
+        it('should not emit status change events when emitEvent = false', () => {
+          c.statusChanges.subscribe(() => logger.push('control'));
+          g.statusChanges.subscribe(() => logger.push('form'));
+
+          c.disable({emitEvent: false});
+          expect(logger).toEqual([]);
+          c.enable({emitEvent: false});
+          expect(logger).toEqual([]);
+        });
+
+      });
+    });
+    describe('pending', () => {
+      let c: FormControl;
+
+      beforeEach(() => { c = new FormControl('value'); });
+
+      it('should be false after creating a control', () => { expect(c.pending).toEqual(false); });
+
+      it('should be true after changing the value of the control', () => {
+        c.markAsPending();
+        expect(c.pending).toEqual(true);
+      });
+
+      describe('status change events', () => {
+        let logger: string[];
+
+        beforeEach(() => {
+          logger = [];
+          c.statusChanges.subscribe((status) => logger.push(status));
+        });
+
+        it('should emit event after marking control as pending', () => {
+          c.markAsPending();
+          expect(logger).toEqual(['PENDING']);
+        });
+
+        it('should not emit event when emitEvent = false', () => {
+          c.markAsPending({emitEvent: false});
+          expect(logger).toEqual([]);
+        });
+
+      });
+    });
+  });
+})();
diff --git a/packages/forms/test/form_group_spec.ts b/packages/forms/test/form_group_spec.ts
new file mode 100644
index 000000000000..5b3f622070e0
--- /dev/null
+++ b/packages/forms/test/form_group_spec.ts
@@ -0,0 +1,1213 @@
+/**
+ * @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 {EventEmitter} from '@angular/core';
+import {async, fakeAsync, tick} from '@angular/core/testing';
+import {AsyncTestCompleter, beforeEach, describe, inject, it} from '@angular/core/testing/src/testing_internal';
+import {AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, Validators} from '@angular/forms';
+import {of } from 'rxjs';
+
+
+(function() {
+  function simpleValidator(c: AbstractControl): ValidationErrors|null {
+    return c.get('one') !.value === 'correct' ? null : {'broken': true};
+  }
+
+  function asyncValidator(expected: string, timeouts = {}) {
+    return (c: AbstractControl) => {
+      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;
+
+      if (t == 0) {
+        resolve(res);
+      } else {
+        setTimeout(() => { resolve(res); }, t);
+      }
+
+      return promise;
+    };
+  }
+
+  function asyncValidatorReturningObservable(c: FormControl) {
+    const e = new EventEmitter();
+    Promise.resolve(null).then(() => { e.emit({'async': true}); });
+    return e;
+  }
+
+  function otherObservableValidator() { return of ({'other': true}); }
+
+  describe('FormGroup', () => {
+    describe('value', () => {
+      it('should be the reduced value of the child controls', () => {
+        const g = new FormGroup({'one': new FormControl('111'), 'two': new FormControl('222')});
+        expect(g.value).toEqual({'one': '111', 'two': '222'});
+      });
+
+      it('should be empty when there are no child controls', () => {
+        const g = new FormGroup({});
+        expect(g.value).toEqual({});
+      });
+
+      it('should support nested groups', () => {
+        const g = new FormGroup({
+          'one': new FormControl('111'),
+          'nested': new FormGroup({'two': new FormControl('222')})
+        });
+        expect(g.value).toEqual({'one': '111', 'nested': {'two': '222'}});
+
+        (<FormControl>(g.get('nested.two'))).setValue('333');
+
+        expect(g.value).toEqual({'one': '111', 'nested': {'two': '333'}});
+      });
+    });
+
+    describe('getRawValue', () => {
+      let fg: FormGroup;
+
+      it('should work with nested form groups/arrays', () => {
+        fg = new FormGroup({
+          'c1': new FormControl('v1'),
+          '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('array') as FormArray).at(1).disable();
+
+        expect(fg.getRawValue())
+            .toEqual({'c1': 'v1', 'group': {'c2': 'v2', 'c3': 'v3'}, 'array': ['v4', 'v5']});
+      });
+
+    });
+
+    describe('adding and removing controls', () => {
+      it('should update value and validity when control is added', () => {
+        const g = new FormGroup({'one': new FormControl('1')});
+        expect(g.value).toEqual({'one': '1'});
+        expect(g.valid).toBe(true);
+
+        g.addControl('two', new FormControl('2', Validators.minLength(10)));
+
+        expect(g.value).toEqual({'one': '1', 'two': '2'});
+        expect(g.valid).toBe(false);
+      });
+
+      it('should update value and validity when control is removed', () => {
+        const g = new FormGroup(
+            {'one': new FormControl('1'), 'two': new FormControl('2', Validators.minLength(10))});
+        expect(g.value).toEqual({'one': '1', 'two': '2'});
+        expect(g.valid).toBe(false);
+
+        g.removeControl('two');
+
+        expect(g.value).toEqual({'one': '1'});
+        expect(g.valid).toBe(true);
+      });
+    });
+
+    describe('dirty', () => {
+      let c: FormControl, g: FormGroup;
+
+      beforeEach(() => {
+        c = new FormControl('value');
+        g = new FormGroup({'one': c});
+      });
+
+      it('should be false after creating a control', () => { expect(g.dirty).toEqual(false); });
+
+      it('should be true after changing the value of the control', () => {
+        c.markAsDirty();
+
+        expect(g.dirty).toEqual(true);
+      });
+    });
+
+
+    describe('touched', () => {
+      let c: FormControl, g: FormGroup;
+
+      beforeEach(() => {
+        c = new FormControl('value');
+        g = new FormGroup({'one': c});
+      });
+
+      it('should be false after creating a control', () => { expect(g.touched).toEqual(false); });
+
+      it('should be true after control is marked as touched', () => {
+        c.markAsTouched();
+
+        expect(g.touched).toEqual(true);
+      });
+    });
+
+    describe('setValue', () => {
+      let c: FormControl, c2: FormControl, g: FormGroup;
+
+      beforeEach(() => {
+        c = new FormControl('');
+        c2 = new FormControl('');
+        g = new FormGroup({'one': c, 'two': c2});
+      });
+
+      it('should set its own value', () => {
+        g.setValue({'one': 'one', 'two': 'two'});
+        expect(g.value).toEqual({'one': 'one', 'two': 'two'});
+      });
+
+      it('should set child values', () => {
+        g.setValue({'one': 'one', 'two': 'two'});
+        expect(c.value).toEqual('one');
+        expect(c2.value).toEqual('two');
+      });
+
+      it('should set child control values if disabled', () => {
+        c2.disable();
+        g.setValue({'one': 'one', 'two': 'two'});
+        expect(c2.value).toEqual('two');
+        expect(g.value).toEqual({'one': 'one'});
+        expect(g.getRawValue()).toEqual({'one': 'one', 'two': 'two'});
+      });
+
+      it('should set group value if group is disabled', () => {
+        g.disable();
+        g.setValue({'one': 'one', 'two': 'two'});
+        expect(c.value).toEqual('one');
+        expect(c2.value).toEqual('two');
+
+        expect(g.value).toEqual({'one': 'one', 'two': 'two'});
+      });
+
+      it('should set parent values', () => {
+        const form = new FormGroup({'parent': g});
+        g.setValue({'one': 'one', 'two': 'two'});
+        expect(form.value).toEqual({'parent': {'one': 'one', 'two': 'two'}});
+      });
+
+      it('should not update the parent when explicitly specified', () => {
+        const form = new FormGroup({'parent': g});
+        g.setValue({'one': 'one', 'two': 'two'}, {onlySelf: true});
+
+        expect(form.value).toEqual({parent: {'one': '', 'two': ''}});
+      });
+
+      it('should throw if fields are missing from supplied value (subset)', () => {
+        expect(() => g.setValue({
+          'one': 'one'
+        })).toThrowError(new RegExp(`Must supply a value for form control with name: 'two'`));
+      });
+
+      it('should throw if a value is provided for a missing control (superset)', () => {
+        expect(() => g.setValue({'one': 'one', 'two': 'two', 'three': 'three'}))
+            .toThrowError(new RegExp(`Cannot find form control with name: three`));
+      });
+
+      it('should throw if a value is not provided for a disabled control', () => {
+        c2.disable();
+        expect(() => g.setValue({
+          'one': 'one'
+        })).toThrowError(new RegExp(`Must supply a value for form control with name: 'two'`));
+      });
+
+      it('should throw if no controls are set yet', () => {
+        const empty = new FormGroup({});
+        expect(() => empty.setValue({
+          'one': 'one'
+        })).toThrowError(new RegExp(`no form controls registered with this group`));
+      });
+
+      describe('setValue() events', () => {
+        let form: FormGroup;
+        let logger: any[];
+
+        beforeEach(() => {
+          form = new FormGroup({'parent': g});
+          logger = [];
+        });
+
+        it('should emit one valueChange event per control', () => {
+          form.valueChanges.subscribe(() => logger.push('form'));
+          g.valueChanges.subscribe(() => logger.push('group'));
+          c.valueChanges.subscribe(() => logger.push('control1'));
+          c2.valueChanges.subscribe(() => logger.push('control2'));
+
+          g.setValue({'one': 'one', 'two': 'two'});
+          expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
+        });
+
+        it('should not fire an event when explicitly specified', fakeAsync(() => {
+             form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             g.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+
+             g.setValue({'one': 'one', 'two': 'two'}, {emitEvent: false});
+             tick();
+           }));
+
+        it('should emit one statusChange event per control', () => {
+          form.statusChanges.subscribe(() => logger.push('form'));
+          g.statusChanges.subscribe(() => logger.push('group'));
+          c.statusChanges.subscribe(() => logger.push('control1'));
+          c2.statusChanges.subscribe(() => logger.push('control2'));
+
+          g.setValue({'one': 'one', 'two': 'two'});
+          expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
+        });
+      });
+    });
+
+    describe('patchValue', () => {
+      let c: FormControl, c2: FormControl, g: FormGroup;
+
+      beforeEach(() => {
+        c = new FormControl('');
+        c2 = new FormControl('');
+        g = new FormGroup({'one': c, 'two': c2});
+      });
+
+      it('should set its own value', () => {
+        g.patchValue({'one': 'one', 'two': 'two'});
+        expect(g.value).toEqual({'one': 'one', 'two': 'two'});
+      });
+
+      it('should set child values', () => {
+        g.patchValue({'one': 'one', 'two': 'two'});
+        expect(c.value).toEqual('one');
+        expect(c2.value).toEqual('two');
+      });
+
+      it('should patch disabled control values', () => {
+        c2.disable();
+        g.patchValue({'one': 'one', 'two': 'two'});
+        expect(c2.value).toEqual('two');
+        expect(g.value).toEqual({'one': 'one'});
+        expect(g.getRawValue()).toEqual({'one': 'one', 'two': 'two'});
+      });
+
+      it('should patch disabled control groups', () => {
+        g.disable();
+        g.patchValue({'one': 'one', 'two': 'two'});
+        expect(c.value).toEqual('one');
+        expect(c2.value).toEqual('two');
+        expect(g.value).toEqual({'one': 'one', 'two': 'two'});
+      });
+
+      it('should set parent values', () => {
+        const form = new FormGroup({'parent': g});
+        g.patchValue({'one': 'one', 'two': 'two'});
+        expect(form.value).toEqual({'parent': {'one': 'one', 'two': 'two'}});
+      });
+
+      it('should not update the parent when explicitly specified', () => {
+        const form = new FormGroup({'parent': g});
+        g.patchValue({'one': 'one', 'two': 'two'}, {onlySelf: true});
+
+        expect(form.value).toEqual({parent: {'one': '', 'two': ''}});
+      });
+
+      it('should ignore fields that are missing from supplied value (subset)', () => {
+        g.patchValue({'one': 'one'});
+        expect(g.value).toEqual({'one': 'one', 'two': ''});
+      });
+
+      it('should not ignore fields that are null', () => {
+        g.patchValue({'one': null});
+        expect(g.value).toEqual({'one': null, 'two': ''});
+      });
+
+      it('should ignore any value provided for a missing control (superset)', () => {
+        g.patchValue({'three': 'three'});
+        expect(g.value).toEqual({'one': '', 'two': ''});
+      });
+
+      describe('patchValue() events', () => {
+        let form: FormGroup;
+        let logger: any[];
+
+        beforeEach(() => {
+          form = new FormGroup({'parent': g});
+          logger = [];
+        });
+
+        it('should emit one valueChange event per control', () => {
+          form.valueChanges.subscribe(() => logger.push('form'));
+          g.valueChanges.subscribe(() => logger.push('group'));
+          c.valueChanges.subscribe(() => logger.push('control1'));
+          c2.valueChanges.subscribe(() => logger.push('control2'));
+
+          g.patchValue({'one': 'one', 'two': 'two'});
+          expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
+        });
+
+        it('should not emit valueChange events for skipped controls', () => {
+          form.valueChanges.subscribe(() => logger.push('form'));
+          g.valueChanges.subscribe(() => logger.push('group'));
+          c.valueChanges.subscribe(() => logger.push('control1'));
+          c2.valueChanges.subscribe(() => logger.push('control2'));
+
+          g.patchValue({'one': 'one'});
+          expect(logger).toEqual(['control1', 'group', 'form']);
+        });
+
+        it('should not fire an event when explicitly specified', fakeAsync(() => {
+             form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             g.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+
+             g.patchValue({'one': 'one', 'two': 'two'}, {emitEvent: false});
+             tick();
+           }));
+
+        it('should emit one statusChange event per control', () => {
+          form.statusChanges.subscribe(() => logger.push('form'));
+          g.statusChanges.subscribe(() => logger.push('group'));
+          c.statusChanges.subscribe(() => logger.push('control1'));
+          c2.statusChanges.subscribe(() => logger.push('control2'));
+
+          g.patchValue({'one': 'one', 'two': 'two'});
+          expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
+        });
+      });
+    });
+
+    describe('reset()', () => {
+      let c: FormControl, c2: FormControl, g: FormGroup;
+
+      beforeEach(() => {
+        c = new FormControl('initial value');
+        c2 = new FormControl('');
+        g = new FormGroup({'one': c, 'two': c2});
+      });
+
+      it('should set its own value if value passed', () => {
+        g.setValue({'one': 'new value', 'two': 'new value'});
+
+        g.reset({'one': 'initial value', 'two': ''});
+        expect(g.value).toEqual({'one': 'initial value', 'two': ''});
+      });
+
+      it('should set its own value if boxed value passed', () => {
+        g.setValue({'one': 'new value', 'two': 'new value'});
+
+        g.reset({'one': {value: 'initial value', disabled: false}, 'two': ''});
+        expect(g.value).toEqual({'one': 'initial value', 'two': ''});
+      });
+
+      it('should clear its own value if no value passed', () => {
+        g.setValue({'one': 'new value', 'two': 'new value'});
+
+        g.reset();
+        expect(g.value).toEqual({'one': null, 'two': null});
+      });
+
+      it('should set the value of each of its child controls if value passed', () => {
+        g.setValue({'one': 'new value', 'two': 'new value'});
+
+        g.reset({'one': 'initial value', 'two': ''});
+        expect(c.value).toBe('initial value');
+        expect(c2.value).toBe('');
+      });
+
+      it('should clear the value of each of its child controls if no value passed', () => {
+        g.setValue({'one': 'new value', 'two': 'new value'});
+
+        g.reset();
+        expect(c.value).toBe(null);
+        expect(c2.value).toBe(null);
+      });
+
+      it('should set the value of its parent if value passed', () => {
+        const form = new FormGroup({'g': g});
+        g.setValue({'one': 'new value', 'two': 'new value'});
+
+        g.reset({'one': 'initial value', 'two': ''});
+        expect(form.value).toEqual({'g': {'one': 'initial value', 'two': ''}});
+      });
+
+      it('should clear the value of its parent if no value passed', () => {
+        const form = new FormGroup({'g': g});
+        g.setValue({'one': 'new value', 'two': 'new value'});
+
+        g.reset();
+        expect(form.value).toEqual({'g': {'one': null, 'two': null}});
+      });
+
+      it('should not update the parent when explicitly specified', () => {
+        const form = new FormGroup({'g': g});
+        g.reset({'one': 'new value', 'two': 'new value'}, {onlySelf: true});
+
+        expect(form.value).toEqual({g: {'one': 'initial value', 'two': ''}});
+      });
+
+      it('should mark itself as pristine', () => {
+        g.markAsDirty();
+        expect(g.pristine).toBe(false);
+
+        g.reset();
+        expect(g.pristine).toBe(true);
+      });
+
+      it('should mark all child controls as pristine', () => {
+        c.markAsDirty();
+        c2.markAsDirty();
+        expect(c.pristine).toBe(false);
+        expect(c2.pristine).toBe(false);
+
+        g.reset();
+        expect(c.pristine).toBe(true);
+        expect(c2.pristine).toBe(true);
+      });
+
+      it('should mark the parent as pristine if all siblings pristine', () => {
+        const c3 = new FormControl('');
+        const form = new FormGroup({'g': g, 'c3': c3});
+
+        g.markAsDirty();
+        expect(form.pristine).toBe(false);
+
+        g.reset();
+        expect(form.pristine).toBe(true);
+      });
+
+      it('should not mark the parent pristine if any dirty siblings', () => {
+        const c3 = new FormControl('');
+        const form = new FormGroup({'g': g, 'c3': c3});
+
+        g.markAsDirty();
+        c3.markAsDirty();
+        expect(form.pristine).toBe(false);
+
+        g.reset();
+        expect(form.pristine).toBe(false);
+      });
+
+      it('should mark itself as untouched', () => {
+        g.markAsTouched();
+        expect(g.untouched).toBe(false);
+
+        g.reset();
+        expect(g.untouched).toBe(true);
+      });
+
+      it('should mark all child controls as untouched', () => {
+        c.markAsTouched();
+        c2.markAsTouched();
+        expect(c.untouched).toBe(false);
+        expect(c2.untouched).toBe(false);
+
+        g.reset();
+        expect(c.untouched).toBe(true);
+        expect(c2.untouched).toBe(true);
+      });
+
+      it('should mark the parent untouched if all siblings untouched', () => {
+        const c3 = new FormControl('');
+        const form = new FormGroup({'g': g, 'c3': c3});
+
+        g.markAsTouched();
+        expect(form.untouched).toBe(false);
+
+        g.reset();
+        expect(form.untouched).toBe(true);
+      });
+
+      it('should not mark the parent untouched if any touched siblings', () => {
+        const c3 = new FormControl('');
+        const form = new FormGroup({'g': g, 'c3': c3});
+
+        g.markAsTouched();
+        c3.markAsTouched();
+        expect(form.untouched).toBe(false);
+
+        g.reset();
+        expect(form.untouched).toBe(false);
+      });
+
+      it('should retain previous disabled state', () => {
+        g.disable();
+        g.reset();
+
+        expect(g.disabled).toBe(true);
+      });
+
+      it('should set child disabled state if boxed value passed', () => {
+        g.disable();
+        g.reset({'one': {value: '', disabled: false}, 'two': ''});
+
+        expect(c.disabled).toBe(false);
+        expect(g.disabled).toBe(false);
+      });
+
+      describe('reset() events', () => {
+        let form: FormGroup, c3: FormControl, logger: any[];
+
+        beforeEach(() => {
+          c3 = new FormControl('');
+          form = new FormGroup({'g': g, 'c3': c3});
+          logger = [];
+        });
+
+        it('should emit one valueChange event per reset control', () => {
+          form.valueChanges.subscribe(() => logger.push('form'));
+          g.valueChanges.subscribe(() => logger.push('group'));
+          c.valueChanges.subscribe(() => logger.push('control1'));
+          c2.valueChanges.subscribe(() => logger.push('control2'));
+          c3.valueChanges.subscribe(() => logger.push('control3'));
+
+          g.reset();
+          expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
+        });
+
+        it('should not fire an event when explicitly specified', fakeAsync(() => {
+             form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             g.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+             c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
+
+             g.reset({}, {emitEvent: false});
+             tick();
+           }));
+
+        it('should emit one statusChange event per reset control', () => {
+          form.statusChanges.subscribe(() => logger.push('form'));
+          g.statusChanges.subscribe(() => logger.push('group'));
+          c.statusChanges.subscribe(() => logger.push('control1'));
+          c2.statusChanges.subscribe(() => logger.push('control2'));
+          c3.statusChanges.subscribe(() => logger.push('control3'));
+
+          g.reset();
+          expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
+        });
+
+        it('should emit one statusChange event per reset control', () => {
+          form.statusChanges.subscribe(() => logger.push('form'));
+          g.statusChanges.subscribe(() => logger.push('group'));
+          c.statusChanges.subscribe(() => logger.push('control1'));
+          c2.statusChanges.subscribe(() => logger.push('control2'));
+          c3.statusChanges.subscribe(() => logger.push('control3'));
+
+          g.reset({'one': {value: '', disabled: true}});
+          expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
+        });
+      });
+
+    });
+
+    describe('contains', () => {
+      let group: FormGroup;
+
+      beforeEach(() => {
+        group = new FormGroup({
+          'required': new FormControl('requiredValue'),
+          'optional': new FormControl({value: 'disabled value', disabled: true})
+        });
+      });
+
+      it('should return false when the component is disabled',
+         () => { expect(group.contains('optional')).toEqual(false); });
+
+      it('should return false when there is no component with the given name',
+         () => { expect(group.contains('something else')).toEqual(false); });
+
+      it('should return true when the component is enabled', () => {
+        expect(group.contains('required')).toEqual(true);
+
+        group.enable();
+
+        expect(group.contains('optional')).toEqual(true);
+      });
+
+      it('should support controls with dots in their name', () => {
+        expect(group.contains('some.name')).toBe(false);
+        group.addControl('some.name', new FormControl());
+
+        expect(group.contains('some.name')).toBe(true);
+      });
+    });
+
+    describe('retrieve', () => {
+      let group: FormGroup;
+
+      beforeEach(() => {
+        group = new FormGroup({
+          'required': new FormControl('requiredValue'),
+        });
+      });
+
+      it('should not get inherited properties',
+         () => { expect(group.get('constructor')).toBe(null); });
+    });
+
+    describe('statusChanges', () => {
+      let control: FormControl;
+      let group: FormGroup;
+
+      beforeEach(async(() => {
+        control = new FormControl('', asyncValidatorReturningObservable);
+        group = new FormGroup({'one': control});
+      }));
+
+
+      // TODO(kara): update these tests to use fake Async
+      it('should fire a statusChange if child has async validation change',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const loggedValues: string[] = [];
+           group.statusChanges.subscribe({
+             next: (status: string) => {
+               loggedValues.push(status);
+               if (loggedValues.length === 2) {
+                 expect(loggedValues).toEqual(['PENDING', 'INVALID']);
+               }
+               async.done();
+             }
+           });
+           control.setValue('');
+         }));
+    });
+
+    describe('getError', () => {
+      it('should return the error when it is present', () => {
+        const c = new FormControl('', Validators.required);
+        const g = new FormGroup({'one': c});
+        expect(c.getError('required')).toEqual(true);
+        expect(g.getError('required', ['one'])).toEqual(true);
+      });
+
+      it('should return null otherwise', () => {
+        const c = new FormControl('not empty', Validators.required);
+        const g = new FormGroup({'one': c});
+        expect(c.getError('invalid')).toEqual(null);
+        expect(g.getError('required', ['one'])).toEqual(null);
+        expect(g.getError('required', ['invalid'])).toEqual(null);
+      });
+    });
+
+    describe('validator', () => {
+
+      function containsValidator(c: AbstractControl): ValidationErrors|null {
+        return c.get('one') !.value && c.get('one') !.value.indexOf('c') !== -1 ? null :
+                                                                                  {'missing': true};
+      }
+
+      it('should run a single validator when the value changes', () => {
+        const c = new FormControl(null);
+        const g = new FormGroup({'one': c}, simpleValidator);
+
+        c.setValue('correct');
+
+        expect(g.valid).toEqual(true);
+        expect(g.errors).toEqual(null);
+
+        c.setValue('incorrect');
+
+        expect(g.valid).toEqual(false);
+        expect(g.errors).toEqual({'broken': true});
+      });
+
+      it('should support multiple validators from array', () => {
+        const g = new FormGroup({one: new FormControl()}, [simpleValidator, containsValidator]);
+        expect(g.valid).toEqual(false);
+        expect(g.errors).toEqual({missing: true, broken: true});
+
+        g.setValue({one: 'c'});
+        expect(g.valid).toEqual(false);
+        expect(g.errors).toEqual({broken: true});
+
+        g.setValue({one: 'correct'});
+        expect(g.valid).toEqual(true);
+      });
+
+      it('should set single validator from options obj', () => {
+        const g = new FormGroup({one: new FormControl()}, {validators: simpleValidator});
+        expect(g.valid).toEqual(false);
+        expect(g.errors).toEqual({broken: true});
+
+        g.setValue({one: 'correct'});
+        expect(g.valid).toEqual(true);
+      });
+
+      it('should set multiple validators from options obj', () => {
+        const g = new FormGroup(
+            {one: new FormControl()}, {validators: [simpleValidator, containsValidator]});
+        expect(g.valid).toEqual(false);
+        expect(g.errors).toEqual({missing: true, broken: true});
+
+        g.setValue({one: 'c'});
+        expect(g.valid).toEqual(false);
+        expect(g.errors).toEqual({broken: true});
+
+        g.setValue({one: 'correct'});
+        expect(g.valid).toEqual(true);
+      });
+
+    });
+
+    describe('asyncValidator', () => {
+      it('should run the async validator', fakeAsync(() => {
+           const c = new FormControl('value');
+           const g = new FormGroup({'one': c}, null !, asyncValidator('expected'));
+
+           expect(g.pending).toEqual(true);
+
+           tick(1);
+
+           expect(g.errors).toEqual({'async': true});
+           expect(g.pending).toEqual(false);
+         }));
+
+      it('should set multiple async validators from array', fakeAsync(() => {
+           const g = new FormGroup(
+               {'one': new FormControl('value')}, null !,
+               [asyncValidator('expected'), otherObservableValidator]);
+           expect(g.pending).toEqual(true);
+
+           tick();
+           expect(g.errors).toEqual({'async': true, 'other': true});
+           expect(g.pending).toEqual(false);
+         }));
+
+      it('should set single async validator from options obj', fakeAsync(() => {
+           const g = new FormGroup(
+               {'one': new FormControl('value')}, {asyncValidators: asyncValidator('expected')});
+           expect(g.pending).toEqual(true);
+
+           tick();
+           expect(g.errors).toEqual({'async': true});
+           expect(g.pending).toEqual(false);
+         }));
+
+      it('should set multiple async validators from options obj', fakeAsync(() => {
+           const g = new FormGroup(
+               {'one': new FormControl('value')},
+               {asyncValidators: [asyncValidator('expected'), otherObservableValidator]});
+           expect(g.pending).toEqual(true);
+
+           tick();
+           expect(g.errors).toEqual({'async': true, 'other': true});
+           expect(g.pending).toEqual(false);
+         }));
+
+      it('should set the parent group\'s status to pending', fakeAsync(() => {
+           const c = new FormControl('value', null !, asyncValidator('expected'));
+           const g = new FormGroup({'one': c});
+
+           expect(g.pending).toEqual(true);
+
+           tick(1);
+
+           expect(g.pending).toEqual(false);
+         }));
+
+      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'));
+
+           tick(1);
+
+           expect(g.errors).toEqual({'async': true});
+           expect(g.get('one') !.errors).toEqual({'async': true});
+         }));
+    });
+
+    describe('disable() & enable()', () => {
+      it('should mark the group as disabled', () => {
+        const g = new FormGroup({'one': new FormControl(null)});
+        expect(g.disabled).toBe(false);
+        expect(g.valid).toBe(true);
+
+        g.disable();
+        expect(g.disabled).toBe(true);
+        expect(g.valid).toBe(false);
+
+        g.enable();
+        expect(g.disabled).toBe(false);
+        expect(g.valid).toBe(true);
+      });
+
+      it('should set the group status as disabled', () => {
+        const g = new FormGroup({'one': new FormControl(null)});
+        expect(g.status).toEqual('VALID');
+
+        g.disable();
+        expect(g.status).toEqual('DISABLED');
+
+        g.enable();
+        expect(g.status).toBe('VALID');
+      });
+
+      it('should mark children of the group as disabled', () => {
+        const c1 = new FormControl(null);
+        const c2 = new FormControl(null);
+        const g = new FormGroup({'one': c1, 'two': c2});
+        expect(c1.disabled).toBe(false);
+        expect(c2.disabled).toBe(false);
+
+        g.disable();
+        expect(c1.disabled).toBe(true);
+        expect(c2.disabled).toBe(true);
+
+        g.enable();
+        expect(c1.disabled).toBe(false);
+        expect(c2.disabled).toBe(false);
+      });
+
+      it('should ignore disabled controls in validation', () => {
+        const g = new FormGroup({
+          nested: new FormGroup({one: new FormControl(null, Validators.required)}),
+          two: new FormControl('two')
+        });
+        expect(g.valid).toBe(false);
+
+        g.get('nested') !.disable();
+        expect(g.valid).toBe(true);
+
+        g.get('nested') !.enable();
+        expect(g.valid).toBe(false);
+      });
+
+      it('should ignore disabled controls when serializing value', () => {
+        const g = new FormGroup(
+            {nested: new FormGroup({one: new FormControl('one')}), two: new FormControl('two')});
+        expect(g.value).toEqual({'nested': {'one': 'one'}, 'two': 'two'});
+
+        g.get('nested') !.disable();
+        expect(g.value).toEqual({'two': 'two'});
+
+        g.get('nested') !.enable();
+        expect(g.value).toEqual({'nested': {'one': 'one'}, 'two': 'two'});
+      });
+
+      it('should update its value when disabled with disabled children', () => {
+        const g = new FormGroup(
+            {nested: new FormGroup({one: new FormControl('one'), two: new FormControl('two')})});
+
+        g.get('nested.two') !.disable();
+        expect(g.value).toEqual({nested: {one: 'one'}});
+
+        g.get('nested') !.disable();
+        expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
+
+        g.get('nested') !.enable();
+        expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
+      });
+
+      it('should update its value when enabled with disabled children', () => {
+        const g = new FormGroup(
+            {nested: new FormGroup({one: new FormControl('one'), two: new FormControl('two')})});
+
+        g.get('nested.two') !.disable();
+        expect(g.value).toEqual({nested: {one: 'one'}});
+
+        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();
+        expect(g.dirty).toBe(true);
+
+        g.get('nested') !.disable();
+        expect(g.get('nested') !.dirty).toBe(true);
+        expect(g.dirty).toEqual(false);
+
+        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();
+        expect(g.touched).toBe(true);
+
+        g.get('nested') !.disable();
+        expect(g.get('nested') !.touched).toBe(true);
+        expect(g.touched).toEqual(false);
+
+        g.get('nested') !.enable();
+        expect(g.touched).toEqual(true);
+      });
+
+      it('should keep empty, disabled groups disabled when updating validity', () => {
+        const group = new FormGroup({});
+        expect(group.status).toEqual('VALID');
+
+        group.disable();
+        expect(group.status).toEqual('DISABLED');
+
+        group.updateValueAndValidity();
+        expect(group.status).toEqual('DISABLED');
+
+        group.addControl('one', new FormControl({value: '', disabled: true}));
+        expect(group.status).toEqual('DISABLED');
+
+        group.addControl('two', new FormControl());
+        expect(group.status).toEqual('VALID');
+      });
+
+      it('should re-enable empty, disabled groups', () => {
+        const group = new FormGroup({});
+        group.disable();
+        expect(group.status).toEqual('DISABLED');
+
+        group.enable();
+        expect(group.status).toEqual('VALID');
+      });
+
+      it('should not run validators on disabled controls', () => {
+        const validator = jasmine.createSpy('validator');
+        const g = new FormGroup({'one': new FormControl()}, validator);
+        expect(validator.calls.count()).toEqual(1);
+
+        g.disable();
+        expect(validator.calls.count()).toEqual(1);
+
+        g.setValue({one: 'value'});
+        expect(validator.calls.count()).toEqual(1);
+
+        g.enable();
+        expect(validator.calls.count()).toEqual(2);
+      });
+
+      describe('disabled errors', () => {
+        it('should clear out group errors when disabled', () => {
+          const g = new FormGroup({'one': new FormControl()}, () => ({'expected': true}));
+          expect(g.errors).toEqual({'expected': true});
+
+          g.disable();
+          expect(g.errors).toEqual(null);
+
+          g.enable();
+          expect(g.errors).toEqual({'expected': true});
+        });
+
+        it('should re-populate group errors when enabled from a child', () => {
+          const g = new FormGroup({'one': new FormControl()}, () => ({'expected': true}));
+          g.disable();
+          expect(g.errors).toEqual(null);
+
+          g.addControl('two', new FormControl());
+          expect(g.errors).toEqual({'expected': true});
+        });
+
+        it('should clear out async group errors when disabled', fakeAsync(() => {
+             const g =
+                 new FormGroup({'one': new FormControl()}, null !, asyncValidator('expected'));
+             tick();
+             expect(g.errors).toEqual({'async': true});
+
+             g.disable();
+             expect(g.errors).toEqual(null);
+
+             g.enable();
+             tick();
+             expect(g.errors).toEqual({'async': true});
+           }));
+
+        it('should re-populate async group errors when enabled from a child', fakeAsync(() => {
+             const g =
+                 new FormGroup({'one': new FormControl()}, null !, asyncValidator('expected'));
+             tick();
+             expect(g.errors).toEqual({'async': true});
+
+             g.disable();
+             expect(g.errors).toEqual(null);
+
+             g.addControl('two', new FormControl());
+             tick();
+             expect(g.errors).toEqual({'async': true});
+           }));
+      });
+
+      describe('disabled events', () => {
+        let logger: string[];
+        let c: FormControl;
+        let g: FormGroup;
+        let form: FormGroup;
+
+        beforeEach(() => {
+          logger = [];
+          c = new FormControl('', Validators.required);
+          g = new FormGroup({one: c});
+          form = new FormGroup({g: g});
+        });
+
+        it('should emit value change events in the right order', () => {
+          c.valueChanges.subscribe(() => logger.push('control'));
+          g.valueChanges.subscribe(() => logger.push('group'));
+          form.valueChanges.subscribe(() => logger.push('form'));
+
+          g.disable();
+          expect(logger).toEqual(['control', 'group', 'form']);
+        });
+
+        it('should emit status change events in the right order', () => {
+          c.statusChanges.subscribe(() => logger.push('control'));
+          g.statusChanges.subscribe(() => logger.push('group'));
+          form.statusChanges.subscribe(() => logger.push('form'));
+
+          g.disable();
+          expect(logger).toEqual(['control', 'group', 'form']);
+        });
+
+        it('should not emit value change events when emitEvent = false', () => {
+          c.valueChanges.subscribe(() => logger.push('control'));
+          g.valueChanges.subscribe(() => logger.push('group'));
+          form.valueChanges.subscribe(() => logger.push('form'));
+
+          g.disable({emitEvent: false});
+          expect(logger).toEqual([]);
+          g.enable({emitEvent: false});
+          expect(logger).toEqual([]);
+        });
+
+        it('should not emit status change events when emitEvent = false', () => {
+          c.statusChanges.subscribe(() => logger.push('control'));
+          g.statusChanges.subscribe(() => logger.push('group'));
+          form.statusChanges.subscribe(() => logger.push('form'));
+
+          g.disable({emitEvent: false});
+          expect(logger).toEqual([]);
+          g.enable({emitEvent: false});
+          expect(logger).toEqual([]);
+        });
+
+      });
+
+    });
+
+    describe('updateTreeValidity()', () => {
+      let c: FormControl, c2: FormControl, c3: FormControl;
+      let nested: FormGroup, form: FormGroup;
+      let logger: string[];
+
+      beforeEach(() => {
+        c = new FormControl('one');
+        c2 = new FormControl('two');
+        c3 = new FormControl('three');
+        nested = new FormGroup({one: c, two: c2});
+        form = new FormGroup({nested: nested, three: c3});
+        logger = [];
+
+        c.statusChanges.subscribe(() => logger.push('one'));
+        c2.statusChanges.subscribe(() => logger.push('two'));
+        c3.statusChanges.subscribe(() => logger.push('three'));
+        nested.statusChanges.subscribe(() => logger.push('nested'));
+        form.statusChanges.subscribe(() => logger.push('form'));
+      });
+
+      it('should update tree validity', () => {
+        (form as any)._updateTreeValidity();
+        expect(logger).toEqual(['one', 'two', 'nested', 'three', 'form']);
+      });
+
+      it('should not emit events when turned off', () => {
+        (form as any)._updateTreeValidity({emitEvent: false});
+        expect(logger).toEqual([]);
+      });
+
+    });
+
+    describe('setControl()', () => {
+      let c: FormControl;
+      let g: FormGroup;
+
+      beforeEach(() => {
+        c = new FormControl('one');
+        g = new FormGroup({one: c});
+      });
+
+      it('should replace existing control with new control', () => {
+        const c2 = new FormControl('new!', Validators.minLength(10));
+        g.setControl('one', c2);
+
+        expect(g.controls['one']).toEqual(c2);
+        expect(g.value).toEqual({one: 'new!'});
+        expect(g.valid).toBe(false);
+      });
+
+      it('should add control if control did not exist before', () => {
+        const c2 = new FormControl('new!', Validators.minLength(10));
+        g.setControl('two', c2);
+
+        expect(g.controls['two']).toEqual(c2);
+        expect(g.value).toEqual({one: 'one', two: 'new!'});
+        expect(g.valid).toBe(false);
+      });
+
+      it('should remove control if new control is null', () => {
+        g.setControl('one', null !);
+        expect(g.controls['one']).not.toBeDefined();
+        expect(g.value).toEqual({});
+      });
+
+      it('should only emit value change event once', () => {
+        const logger: string[] = [];
+        const c2 = new FormControl('new!');
+        g.valueChanges.subscribe(() => logger.push('change!'));
+        g.setControl('one', c2);
+        expect(logger).toEqual(['change!']);
+      });
+
+    });
+
+    describe('pending', () => {
+      let c: FormControl;
+      let g: FormGroup;
+
+      beforeEach(() => {
+        c = new FormControl('value');
+        g = new FormGroup({'one': c});
+      });
+
+      it('should be false after creating a control', () => { expect(g.pending).toEqual(false); });
+
+      it('should be true after changing the value of the control', () => {
+        c.markAsPending();
+        expect(g.pending).toEqual(true);
+      });
+
+      it('should not update the parent when onlySelf = true', () => {
+        c.markAsPending({onlySelf: true});
+        expect(g.pending).toEqual(false);
+      });
+
+      describe('status change events', () => {
+        let logger: string[];
+
+        beforeEach(() => {
+          logger = [];
+          g.statusChanges.subscribe((status) => logger.push(status));
+        });
+
+        it('should emit event after marking control as pending', () => {
+          c.markAsPending();
+          expect(logger).toEqual(['PENDING']);
+        });
+
+        it('should not emit event when onlySelf = true', () => {
+          c.markAsPending({onlySelf: true});
+          expect(logger).toEqual([]);
+        });
+
+        it('should not emit event when emitEvent = false', () => {
+          c.markAsPending({emitEvent: false});
+          expect(logger).toEqual([]);
+        });
+
+        it('should emit event when parent is markedAsPending', () => {
+          g.markAsPending();
+          expect(logger).toEqual(['PENDING']);
+        });
+      });
+    });
+
+  });
+})();
diff --git a/packages/forms/test/reactive_integration_spec.ts b/packages/forms/test/reactive_integration_spec.ts
new file mode 100644
index 000000000000..22a1c161919e
--- /dev/null
+++ b/packages/forms/test/reactive_integration_spec.ts
@@ -0,0 +1,2638 @@
+/**
+ * @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, Input, Type, forwardRef} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {AbstractControl, AsyncValidator, AsyncValidatorFn, COMPOSITION_BUFFER_MODE, FormArray, FormControl, FormControlDirective, FormControlName, 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 {merge, timer} from 'rxjs';
+import {tap} from 'rxjs/operators';
+
+import {MyInput, MyInputForm} from './value_accessor_integration_spec';
+
+{
+  describe('reactive forms integration tests', () => {
+
+    function initTest<T>(component: Type<T>, ...directives: Type<any>[]): ComponentFixture<T> {
+      TestBed.configureTestingModule(
+          {declarations: [component, ...directives], imports: [FormsModule, ReactiveFormsModule]});
+      return TestBed.createComponent(component);
+    }
+
+    describe('basic functionality', () => {
+      it('should work with single controls', () => {
+        const fixture = initTest(FormControlComp);
+        const control = new FormControl('old value');
+        fixture.componentInstance.control = control;
+        fixture.detectChanges();
+
+        // model -> view
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.nativeElement.value).toEqual('old value');
+
+        input.nativeElement.value = 'updated value';
+        dispatchEvent(input.nativeElement, 'input');
+
+        // view -> model
+        expect(control.value).toEqual('updated value');
+      });
+
+      it('should work with formGroups (model -> view)', () => {
+        const fixture = initTest(FormGroupComp);
+        fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
+        fixture.detectChanges();
+
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.nativeElement.value).toEqual('loginValue');
+      });
+
+      it('should add novalidate by default to form', () => {
+        const fixture = initTest(FormGroupComp);
+        fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
+        fixture.detectChanges();
+
+        const form = fixture.debugElement.query(By.css('form'));
+        expect(form.nativeElement.getAttribute('novalidate')).toEqual('');
+      });
+
+      it('work with formGroups (view -> model)', () => {
+        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'));
+        input.nativeElement.value = 'updatedValue';
+        dispatchEvent(input.nativeElement, 'input');
+
+        expect(form.value).toEqual({'login': 'updatedValue'});
+      });
+
+    });
+
+    describe('re-bound form groups', () => {
+
+      it('should update DOM elements initially', () => {
+        const fixture = initTest(FormGroupComp);
+        fixture.componentInstance.form = new FormGroup({'login': new FormControl('oldValue')});
+        fixture.detectChanges();
+
+        fixture.componentInstance.form = new FormGroup({'login': new FormControl('newValue')});
+        fixture.detectChanges();
+
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.nativeElement.value).toEqual('newValue');
+      });
+
+      it('should update model when UI changes', () => {
+        const fixture = initTest(FormGroupComp);
+        fixture.componentInstance.form = new FormGroup({'login': new FormControl('oldValue')});
+        fixture.detectChanges();
+
+        const newForm = new FormGroup({'login': new FormControl('newValue')});
+        fixture.componentInstance.form = newForm;
+        fixture.detectChanges();
+
+        const input = fixture.debugElement.query(By.css('input'));
+        input.nativeElement.value = 'Nancy';
+        dispatchEvent(input.nativeElement, 'input');
+        fixture.detectChanges();
+
+        expect(newForm.value).toEqual({login: 'Nancy'});
+
+        newForm.setValue({login: 'Carson'});
+        fixture.detectChanges();
+        expect(input.nativeElement.value).toEqual('Carson');
+      });
+
+      it('should update nested form group model when UI changes', () => {
+        const fixture = initTest(NestedFormGroupComp);
+        fixture.componentInstance.form = new FormGroup(
+            {'signin': new FormGroup({'login': new FormControl(), 'password': new FormControl()})});
+        fixture.detectChanges();
+
+        const newForm = new FormGroup({
+          'signin': new FormGroup(
+              {'login': new FormControl('Nancy'), 'password': new FormControl('secret')})
+        });
+        fixture.componentInstance.form = newForm;
+        fixture.detectChanges();
+
+        const inputs = fixture.debugElement.queryAll(By.css('input'));
+        expect(inputs[0].nativeElement.value).toEqual('Nancy');
+        expect(inputs[1].nativeElement.value).toEqual('secret');
+
+        inputs[0].nativeElement.value = 'Carson';
+        dispatchEvent(inputs[0].nativeElement, 'input');
+        fixture.detectChanges();
+
+        expect(newForm.value).toEqual({signin: {login: 'Carson', password: 'secret'}});
+
+        newForm.setValue({signin: {login: 'Bess', password: 'otherpass'}});
+        fixture.detectChanges();
+        expect(inputs[0].nativeElement.value).toEqual('Bess');
+      });
+
+      it('should pick up dir validators from form controls', () => {
+        const fixture = initTest(LoginIsEmptyWrapper, LoginIsEmptyValidator);
+        const form = new FormGroup({
+          'login': new FormControl(''),
+          'min': new FormControl(''),
+          'max': new FormControl(''),
+          'pattern': new FormControl('')
+        });
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+        expect(form.get('login') !.errors).toEqual({required: true});
+
+        const newForm = new FormGroup({
+          'login': new FormControl(''),
+          'min': new FormControl(''),
+          'max': new FormControl(''),
+          'pattern': new FormControl('')
+        });
+        fixture.componentInstance.form = newForm;
+        fixture.detectChanges();
+
+        expect(newForm.get('login') !.errors).toEqual({required: true});
+      });
+
+      it('should pick up dir validators from nested form groups', () => {
+        const fixture = initTest(NestedFormGroupComp, LoginIsEmptyValidator);
+        const form = new FormGroup({
+          'signin':
+              new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
+        });
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+        expect(form.get('signin') !.valid).toBe(false);
+
+        const newForm = new FormGroup({
+          'signin':
+              new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
+        });
+        fixture.componentInstance.form = newForm;
+        fixture.detectChanges();
+
+        expect(form.get('signin') !.valid).toBe(false);
+      });
+
+      it('should strip named controls that are not found', () => {
+        const fixture = initTest(NestedFormGroupComp, LoginIsEmptyValidator);
+        const form = new FormGroup({
+          'signin':
+              new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
+        });
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+
+        form.addControl('email', new FormControl('email'));
+        fixture.detectChanges();
+
+        let emailInput = fixture.debugElement.query(By.css('[formControlName="email"]'));
+        expect(emailInput.nativeElement.value).toEqual('email');
+
+        const newForm = new FormGroup({
+          'signin':
+              new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
+        });
+        fixture.componentInstance.form = newForm;
+        fixture.detectChanges();
+
+        emailInput = fixture.debugElement.query(By.css('[formControlName="email"]'));
+        expect(emailInput as any).toBe(null);  // TODO: Review use of `any` here (#19904)
+      });
+
+      it('should strip array controls that are not found', () => {
+        const fixture = initTest(FormArrayComp);
+        const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
+        const form = new FormGroup({cities: cityArray});
+        fixture.componentInstance.form = form;
+        fixture.componentInstance.cityArray = cityArray;
+        fixture.detectChanges();
+
+        let inputs = fixture.debugElement.queryAll(By.css('input'));
+        expect(inputs[2]).not.toBeDefined();
+        cityArray.push(new FormControl('LA'));
+        fixture.detectChanges();
+
+        inputs = fixture.debugElement.queryAll(By.css('input'));
+        expect(inputs[2]).toBeDefined();
+
+        const newArr = new FormArray([new FormControl('SF'), new FormControl('NY')]);
+        const newForm = new FormGroup({cities: newArr});
+        fixture.componentInstance.form = newForm;
+        fixture.componentInstance.cityArray = newArr;
+        fixture.detectChanges();
+
+        inputs = fixture.debugElement.queryAll(By.css('input'));
+        expect(inputs[2]).not.toBeDefined();
+      });
+
+      describe('nested control rebinding', () => {
+
+        it('should attach dir to control when leaf control changes', () => {
+          const form = new FormGroup({'login': new FormControl('oldValue')});
+          const fixture = initTest(FormGroupComp);
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          form.removeControl('login');
+          form.addControl('login', new FormControl('newValue'));
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input'));
+          expect(input.nativeElement.value).toEqual('newValue');
+
+          input.nativeElement.value = 'user input';
+          dispatchEvent(input.nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(form.value).toEqual({login: 'user input'});
+
+          form.setValue({login: 'Carson'});
+          fixture.detectChanges();
+          expect(input.nativeElement.value).toEqual('Carson');
+        });
+
+        it('should attach dirs to all child controls when group control changes', () => {
+          const fixture = initTest(NestedFormGroupComp, LoginIsEmptyValidator);
+          const form = new FormGroup({
+            signin: new FormGroup(
+                {login: new FormControl('oldLogin'), password: new FormControl('oldPassword')})
+          });
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          form.removeControl('signin');
+          form.addControl(
+              'signin',
+              new FormGroup(
+                  {login: new FormControl('newLogin'), password: new FormControl('newPassword')}));
+          fixture.detectChanges();
+
+          const inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.value).toEqual('newLogin');
+          expect(inputs[1].nativeElement.value).toEqual('newPassword');
+
+          inputs[0].nativeElement.value = 'user input';
+          dispatchEvent(inputs[0].nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(form.value).toEqual({signin: {login: 'user input', password: 'newPassword'}});
+
+          form.setValue({signin: {login: 'Carson', password: 'Drew'}});
+          fixture.detectChanges();
+          expect(inputs[0].nativeElement.value).toEqual('Carson');
+          expect(inputs[1].nativeElement.value).toEqual('Drew');
+        });
+
+        it('should attach dirs to all present child controls when array control changes', () => {
+          const fixture = initTest(FormArrayComp);
+          const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
+          const form = new FormGroup({cities: cityArray});
+          fixture.componentInstance.form = form;
+          fixture.componentInstance.cityArray = cityArray;
+          fixture.detectChanges();
+
+          form.removeControl('cities');
+          form.addControl('cities', new FormArray([new FormControl('LA')]));
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input'));
+          expect(input.nativeElement.value).toEqual('LA');
+
+          input.nativeElement.value = 'MTV';
+          dispatchEvent(input.nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(form.value).toEqual({cities: ['MTV']});
+
+          form.setValue({cities: ['LA']});
+          fixture.detectChanges();
+          expect(input.nativeElement.value).toEqual('LA');
+        });
+
+        it('should remove controls correctly after re-binding a form array', () => {
+          const fixture = initTest(FormArrayComp);
+          const cityArray =
+              new FormArray([new FormControl('SF'), new FormControl('NY'), new FormControl('LA')]);
+          const form = new FormGroup({cities: cityArray});
+          fixture.componentInstance.form = form;
+          fixture.componentInstance.cityArray = cityArray;
+          fixture.detectChanges();
+
+          const newArr =
+              new FormArray([new FormControl('SF'), new FormControl('NY'), new FormControl('LA')]);
+          fixture.componentInstance.cityArray = newArr;
+          form.setControl('cities', newArr);
+          fixture.detectChanges();
+
+          newArr.removeAt(0);
+          fixture.detectChanges();
+
+          let inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.value).toEqual('NY');
+          expect(inputs[1].nativeElement.value).toEqual('LA');
+
+          let firstInput = inputs[0].nativeElement;
+          firstInput.value = 'new value';
+          dispatchEvent(firstInput, 'input');
+          fixture.detectChanges();
+
+          expect(newArr.value).toEqual(['new value', 'LA']);
+
+          newArr.removeAt(0);
+          fixture.detectChanges();
+
+          firstInput = fixture.debugElement.query(By.css('input')).nativeElement;
+          firstInput.value = 'last one';
+          dispatchEvent(firstInput, 'input');
+          fixture.detectChanges();
+
+          expect(newArr.value).toEqual(['last one']);
+
+          newArr.get([0]) !.setValue('set value');
+          fixture.detectChanges();
+
+          firstInput = fixture.debugElement.query(By.css('input')).nativeElement;
+          expect(firstInput.value).toEqual('set value');
+        });
+
+        it('should submit properly after removing controls on a re-bound array', () => {
+          const fixture = initTest(FormArrayComp);
+          const cityArray =
+              new FormArray([new FormControl('SF'), new FormControl('NY'), new FormControl('LA')]);
+          const form = new FormGroup({cities: cityArray});
+          fixture.componentInstance.form = form;
+          fixture.componentInstance.cityArray = cityArray;
+          fixture.detectChanges();
+
+          const newArr =
+              new FormArray([new FormControl('SF'), new FormControl('NY'), new FormControl('LA')]);
+          fixture.componentInstance.cityArray = newArr;
+          form.setControl('cities', newArr);
+          fixture.detectChanges();
+
+          newArr.removeAt(0);
+          fixture.detectChanges();
+
+          const formEl = fixture.debugElement.query(By.css('form'));
+          expect(() => dispatchEvent(formEl.nativeElement, 'submit')).not.toThrowError();
+        });
+
+        it('should insert controls properly on a re-bound array', () => {
+          const fixture = initTest(FormArrayComp);
+          const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
+          const form = new FormGroup({cities: cityArray});
+          fixture.componentInstance.form = form;
+          fixture.componentInstance.cityArray = cityArray;
+          fixture.detectChanges();
+
+          const newArr = new FormArray([new FormControl('SF'), new FormControl('NY')]);
+          fixture.componentInstance.cityArray = newArr;
+          form.setControl('cities', newArr);
+          fixture.detectChanges();
+
+          newArr.insert(1, new FormControl('LA'));
+          fixture.detectChanges();
+
+          let inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.value).toEqual('SF');
+          expect(inputs[1].nativeElement.value).toEqual('LA');
+          expect(inputs[2].nativeElement.value).toEqual('NY');
+
+          const lastInput = inputs[2].nativeElement;
+          lastInput.value = 'Tulsa';
+          dispatchEvent(lastInput, 'input');
+          fixture.detectChanges();
+
+          expect(newArr.value).toEqual(['SF', 'LA', 'Tulsa']);
+
+          newArr.get([2]) !.setValue('NY');
+          fixture.detectChanges();
+
+          expect(lastInput.value).toEqual('NY');
+        });
+
+      });
+
+    });
+
+    describe('form arrays', () => {
+      it('should support form arrays', () => {
+        const fixture = initTest(FormArrayComp);
+        const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
+        const form = new FormGroup({cities: cityArray});
+        fixture.componentInstance.form = form;
+        fixture.componentInstance.cityArray = cityArray;
+        fixture.detectChanges();
+
+        const inputs = fixture.debugElement.queryAll(By.css('input'));
+
+        // model -> view
+        expect(inputs[0].nativeElement.value).toEqual('SF');
+        expect(inputs[1].nativeElement.value).toEqual('NY');
+        expect(form.value).toEqual({cities: ['SF', 'NY']});
+
+        inputs[0].nativeElement.value = 'LA';
+        dispatchEvent(inputs[0].nativeElement, 'input');
+        fixture.detectChanges();
+
+        //  view -> model
+        expect(form.value).toEqual({cities: ['LA', 'NY']});
+      });
+
+      it('should support pushing new controls to form arrays', () => {
+        const fixture = initTest(FormArrayComp);
+        const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
+        const form = new FormGroup({cities: cityArray});
+        fixture.componentInstance.form = form;
+        fixture.componentInstance.cityArray = cityArray;
+        fixture.detectChanges();
+
+        cityArray.push(new FormControl('LA'));
+        fixture.detectChanges();
+
+        const inputs = fixture.debugElement.queryAll(By.css('input'));
+        expect(inputs[2].nativeElement.value).toEqual('LA');
+        expect(form.value).toEqual({cities: ['SF', 'NY', 'LA']});
+      });
+
+      it('should support form groups nested in form arrays', () => {
+        const fixture = initTest(FormArrayNestedGroup);
+        const cityArray = new FormArray([
+          new FormGroup({town: new FormControl('SF'), state: new FormControl('CA')}),
+          new FormGroup({town: new FormControl('NY'), state: new FormControl('NY')})
+        ]);
+        const form = new FormGroup({cities: cityArray});
+        fixture.componentInstance.form = form;
+        fixture.componentInstance.cityArray = cityArray;
+        fixture.detectChanges();
+
+        const inputs = fixture.debugElement.queryAll(By.css('input'));
+        expect(inputs[0].nativeElement.value).toEqual('SF');
+        expect(inputs[1].nativeElement.value).toEqual('CA');
+        expect(inputs[2].nativeElement.value).toEqual('NY');
+        expect(inputs[3].nativeElement.value).toEqual('NY');
+        expect(form.value).toEqual({
+          cities: [{town: 'SF', state: 'CA'}, {town: 'NY', state: 'NY'}]
+        });
+
+        inputs[0].nativeElement.value = 'LA';
+        dispatchEvent(inputs[0].nativeElement, 'input');
+        fixture.detectChanges();
+
+        expect(form.value).toEqual({
+          cities: [{town: 'LA', state: 'CA'}, {town: 'NY', state: 'NY'}]
+        });
+      });
+
+    });
+
+    describe('programmatic changes', () => {
+      it('should update the value in the DOM when setValue() is called', () => {
+        const fixture = initTest(FormGroupComp);
+        const login = new FormControl('oldValue');
+        const form = new FormGroup({'login': login});
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+
+        login.setValue('newValue');
+        fixture.detectChanges();
+
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.nativeElement.value).toEqual('newValue');
+      });
+
+      describe('disabled controls', () => {
+        it('should add disabled attribute to an individual control when instantiated as disabled',
+           () => {
+             const fixture = initTest(FormControlComp);
+             const control = new FormControl({value: 'some value', disabled: true});
+             fixture.componentInstance.control = control;
+             fixture.detectChanges();
+
+             const input = fixture.debugElement.query(By.css('input'));
+             expect(input.nativeElement.disabled).toBe(true);
+
+             control.enable();
+             fixture.detectChanges();
+             expect(input.nativeElement.disabled).toBe(false);
+           });
+
+        it('should add disabled attribute to formControlName when instantiated as disabled', () => {
+          const fixture = initTest(FormGroupComp);
+          const control = new FormControl({value: 'some value', disabled: true});
+          fixture.componentInstance.form = new FormGroup({login: control});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input'));
+          expect(input.nativeElement.disabled).toBe(true);
+
+          control.enable();
+          fixture.detectChanges();
+          expect(input.nativeElement.disabled).toBe(false);
+        });
+
+        it('should add disabled attribute to an individual control when disable() is called',
+           () => {
+             const fixture = initTest(FormControlComp);
+             const control = new FormControl('some value');
+             fixture.componentInstance.control = control;
+             fixture.detectChanges();
+
+             control.disable();
+             fixture.detectChanges();
+
+             const input = fixture.debugElement.query(By.css('input'));
+             expect(input.nativeElement.disabled).toBe(true);
+
+             control.enable();
+             fixture.detectChanges();
+             expect(input.nativeElement.disabled).toBe(false);
+           });
+
+        it('should add disabled attribute to child controls when disable() is called on group',
+           () => {
+             const fixture = initTest(FormGroupComp);
+             const form = new FormGroup({'login': new FormControl('login')});
+             fixture.componentInstance.form = form;
+             fixture.detectChanges();
+
+             form.disable();
+             fixture.detectChanges();
+
+             const inputs = fixture.debugElement.queryAll(By.css('input'));
+             expect(inputs[0].nativeElement.disabled).toBe(true);
+
+             form.enable();
+             fixture.detectChanges();
+             expect(inputs[0].nativeElement.disabled).toBe(false);
+           });
+
+
+        it('should not add disabled attribute to custom controls when disable() is called', () => {
+          const fixture = initTest(MyInputForm, MyInput);
+          const control = new FormControl('some value');
+          fixture.componentInstance.form = new FormGroup({login: control});
+          fixture.detectChanges();
+
+          control.disable();
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('my-input'));
+          expect(input.nativeElement.getAttribute('disabled')).toBe(null);
+        });
+
+      });
+
+    });
+
+    describe('user input', () => {
+
+      it('should mark controls as touched after interacting with the DOM control', () => {
+        const fixture = initTest(FormGroupComp);
+        const login = new FormControl('oldValue');
+        const form = new FormGroup({'login': login});
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+
+        const loginEl = fixture.debugElement.query(By.css('input'));
+        expect(login.touched).toBe(false);
+
+        dispatchEvent(loginEl.nativeElement, 'blur');
+
+        expect(login.touched).toBe(true);
+      });
+
+    });
+
+    describe('submit and reset events', () => {
+      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.detectChanges();
+
+        const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+        dispatchEvent(formEl, 'submit');
+
+        fixture.detectChanges();
+        expect(fixture.componentInstance.event.type).toEqual('submit');
+      });
+
+      it('should mark formGroup as submitted on submit event', () => {
+        const fixture = initTest(FormGroupComp);
+        fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
+        fixture.detectChanges();
+
+        const formGroupDir = fixture.debugElement.children[0].injector.get(FormGroupDirective);
+        expect(formGroupDir.submitted).toBe(false);
+
+        const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+        dispatchEvent(formEl, 'submit');
+
+        fixture.detectChanges();
+        expect(formGroupDir.submitted).toEqual(true);
+      });
+
+      it('should set value in UI when form resets to that value programmatically', () => {
+        const fixture = initTest(FormGroupComp);
+        const login = new FormControl('some value');
+        const form = new FormGroup({'login': login});
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+
+        const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
+        expect(loginEl.value).toBe('some value');
+
+        form.reset({'login': 'reset value'});
+        expect(loginEl.value).toBe('reset value');
+      });
+
+      it('should clear value in UI when form resets programmatically', () => {
+        const fixture = initTest(FormGroupComp);
+        const login = new FormControl('some value');
+        const form = new FormGroup({'login': login});
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+
+        const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
+        expect(loginEl.value).toBe('some value');
+
+        form.reset();
+        expect(loginEl.value).toBe('');
+      });
+
+    });
+
+    describe('value changes and status changes', () => {
+
+      it('should mark controls as dirty before emitting a value change event', () => {
+        const fixture = initTest(FormGroupComp);
+        const login = new FormControl('oldValue');
+        fixture.componentInstance.form = new FormGroup({'login': login});
+        fixture.detectChanges();
+
+        login.valueChanges.subscribe(() => { expect(login.dirty).toBe(true); });
+
+        const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
+        loginEl.value = 'newValue';
+
+        dispatchEvent(loginEl, 'input');
+      });
+
+      it('should mark control as pristine before emitting a value change event when resetting ',
+         () => {
+           const fixture = initTest(FormGroupComp);
+           const login = new FormControl('oldValue');
+           const form = new FormGroup({'login': login});
+           fixture.componentInstance.form = form;
+           fixture.detectChanges();
+
+           const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
+           loginEl.value = 'newValue';
+           dispatchEvent(loginEl, 'input');
+
+           expect(login.pristine).toBe(false);
+
+           login.valueChanges.subscribe(() => { expect(login.pristine).toBe(true); });
+
+           form.reset();
+         });
+
+    });
+
+    describe('setting status classes', () => {
+      it('should work with single fields', () => {
+        const fixture = initTest(FormControlComp);
+        const control = new FormControl('', Validators.required);
+        fixture.componentInstance.control = control;
+        fixture.detectChanges();
+
+        const input = fixture.debugElement.query(By.css('input')).nativeElement;
+        expect(sortedClassList(input)).toEqual(['ng-invalid', 'ng-pristine', 'ng-untouched']);
+
+        dispatchEvent(input, 'blur');
+        fixture.detectChanges();
+
+        expect(sortedClassList(input)).toEqual(['ng-invalid', 'ng-pristine', 'ng-touched']);
+
+        input.value = 'updatedValue';
+        dispatchEvent(input, 'input');
+        fixture.detectChanges();
+
+        expect(sortedClassList(input)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
+      });
+
+      it('should work with single fields and async validators', fakeAsync(() => {
+           const fixture = initTest(FormControlComp);
+           const control = new FormControl('', null !, uniqLoginAsyncValidator('good'));
+           fixture.debugElement.componentInstance.control = control;
+           fixture.detectChanges();
+
+           const input = fixture.debugElement.query(By.css('input')).nativeElement;
+           expect(sortedClassList(input)).toEqual(['ng-pending', 'ng-pristine', 'ng-untouched']);
+
+           dispatchEvent(input, 'blur');
+           fixture.detectChanges();
+           expect(sortedClassList(input)).toEqual(['ng-pending', 'ng-pristine', 'ng-touched']);
+
+           input.value = 'good';
+           dispatchEvent(input, 'input');
+           tick();
+           fixture.detectChanges();
+
+           expect(sortedClassList(input)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
+         }));
+
+      it('should work with single fields that combines async and sync validators', fakeAsync(() => {
+           const fixture = initTest(FormControlComp);
+           const control =
+               new FormControl('', Validators.required, uniqLoginAsyncValidator('good'));
+           fixture.debugElement.componentInstance.control = control;
+           fixture.detectChanges();
+
+           const input = fixture.debugElement.query(By.css('input')).nativeElement;
+           expect(sortedClassList(input)).toEqual(['ng-invalid', 'ng-pristine', 'ng-untouched']);
+
+           dispatchEvent(input, 'blur');
+           fixture.detectChanges();
+           expect(sortedClassList(input)).toEqual(['ng-invalid', 'ng-pristine', 'ng-touched']);
+
+           input.value = 'bad';
+           dispatchEvent(input, 'input');
+           fixture.detectChanges();
+
+           expect(sortedClassList(input)).toEqual(['ng-dirty', 'ng-pending', 'ng-touched']);
+
+           tick();
+           fixture.detectChanges();
+
+           expect(sortedClassList(input)).toEqual(['ng-dirty', 'ng-invalid', 'ng-touched']);
+
+           input.value = 'good';
+           dispatchEvent(input, 'input');
+           tick();
+           fixture.detectChanges();
+
+           expect(sortedClassList(input)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
+         }));
+
+      it('should work with single fields in parent forms', () => {
+        const fixture = initTest(FormGroupComp);
+        const form = new FormGroup({'login': new FormControl('', Validators.required)});
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+
+        const input = fixture.debugElement.query(By.css('input')).nativeElement;
+        expect(sortedClassList(input)).toEqual(['ng-invalid', 'ng-pristine', 'ng-untouched']);
+
+        dispatchEvent(input, 'blur');
+        fixture.detectChanges();
+
+        expect(sortedClassList(input)).toEqual(['ng-invalid', 'ng-pristine', 'ng-touched']);
+
+        input.value = 'updatedValue';
+        dispatchEvent(input, 'input');
+        fixture.detectChanges();
+
+        expect(sortedClassList(input)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
+      });
+
+      it('should work with formGroup', () => {
+        const fixture = initTest(FormGroupComp);
+        const form = new FormGroup({'login': new FormControl('', Validators.required)});
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+
+        const input = fixture.debugElement.query(By.css('input')).nativeElement;
+        const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+
+        expect(sortedClassList(formEl)).toEqual(['ng-invalid', 'ng-pristine', 'ng-untouched']);
+
+        dispatchEvent(input, 'blur');
+        fixture.detectChanges();
+
+        expect(sortedClassList(formEl)).toEqual(['ng-invalid', 'ng-pristine', 'ng-touched']);
+
+        input.value = 'updatedValue';
+        dispatchEvent(input, 'input');
+        fixture.detectChanges();
+
+        expect(sortedClassList(formEl)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
+      });
+
+    });
+
+    describe('updateOn options', () => {
+
+      describe('on blur', () => {
+
+        it('should not update value or validity based on user input until blur', () => {
+          const fixture = initTest(FormControlComp);
+          const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until blur.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until blur.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.value)
+              .toEqual('Nancy', 'Expected value to change once control is blurred.');
+          expect(control.valid).toBe(true, 'Expected validation to run once control is blurred.');
+        });
+
+        it('should not update parent group value/validity from child until blur', () => {
+          const fixture = initTest(FormGroupComp);
+          const form = new FormGroup(
+              {login: new FormControl('', {validators: Validators.required, updateOn: 'blur'})});
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(form.value)
+              .toEqual({login: ''}, 'Expected group value to remain unchanged until blur.');
+          expect(form.valid).toBe(false, 'Expected no validation to occur on group until blur.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(form.value)
+              .toEqual({login: 'Nancy'}, 'Expected group value to change once input blurred.');
+          expect(form.valid).toBe(true, 'Expected validation to run once input blurred.');
+        });
+
+        it('should not wait for blur event to update if value is set programmatically', () => {
+          const fixture = initTest(FormControlComp);
+          const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          control.setValue('Nancy');
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          expect(input.value).toEqual('Nancy', 'Expected value to propagate to view immediately.');
+          expect(control.value).toEqual('Nancy', 'Expected model value to update immediately.');
+          expect(control.valid).toBe(true, 'Expected validation to run immediately.');
+        });
+
+        it('should not update dirty state until control is blurred', () => {
+          const fixture = initTest(FormControlComp);
+          const control = new FormControl('', {updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          expect(control.dirty).toBe(false, 'Expected control to start out pristine.');
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.dirty).toBe(false, 'Expected control to stay pristine until blurred.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.dirty).toBe(true, 'Expected control to update dirty state when blurred.');
+        });
+
+        it('should update touched when control is blurred', () => {
+          const fixture = initTest(FormControlComp);
+          const control = new FormControl('', {updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          expect(control.touched).toBe(false, 'Expected control to start out untouched.');
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.touched)
+              .toBe(true, 'Expected control to update touched state when blurred.');
+        });
+
+        it('should continue waiting for blur to update if previously blurred', () => {
+          const fixture = initTest(FormControlComp);
+          const control =
+              new FormControl('Nancy', {validators: Validators.required, updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          dispatchEvent(input, 'focus');
+          input.value = '';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.value)
+              .toEqual('Nancy', 'Expected value to remain unchanged until second blur.');
+          expect(control.valid).toBe(true, 'Expected validation not to run until second blur.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to update when blur occurs again.');
+          expect(control.valid).toBe(false, 'Expected validation to run when blur occurs again.');
+        });
+
+        it('should not use stale pending value if value set programmatically', () => {
+          const fixture = initTest(FormControlComp);
+          const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'aa';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          control.setValue('Nancy');
+          fixture.detectChanges();
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(input.value).toEqual('Nancy', 'Expected programmatic value to stick after blur.');
+        });
+
+        it('should set initial value and validity on init', () => {
+          const fixture = initTest(FormControlComp);
+          const control =
+              new FormControl('Nancy', {validators: Validators.maxLength(3), updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+          expect(input.value).toEqual('Nancy', 'Expected value to be set in the view.');
+          expect(control.value).toEqual('Nancy', 'Expected initial model value to be set.');
+          expect(control.valid).toBe(false, 'Expected validation to run on initial value.');
+        });
+
+        it('should reset properly', () => {
+          const fixture = initTest(FormControlComp);
+          const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'aa';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+          expect(control.dirty).toBe(true, 'Expected control to be dirty on blur.');
+
+          control.reset();
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(input.value).toEqual('', 'Expected view value to reset');
+          expect(control.value).toBe(null, 'Expected pending value to reset.');
+          expect(control.dirty).toBe(false, 'Expected pending dirty value to reset.');
+        });
+
+        it('should not emit valueChanges or statusChanges until blur', () => {
+          const fixture = initTest(FormControlComp);
+          const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+          const values: string[] = [];
+
+          const sub =
+              merge(control.valueChanges, control.statusChanges).subscribe(val => values.push(val));
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(values).toEqual([], 'Expected no valueChanges or statusChanges on input.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(values).toEqual(
+              ['Nancy', 'VALID'], 'Expected valueChanges and statusChanges on blur.');
+
+          sub.unsubscribe();
+        });
+
+        it('should not emit valueChanges or statusChanges on blur if value unchanged', () => {
+          const fixture = initTest(FormControlComp);
+          const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+          const values: string[] = [];
+
+          const sub =
+              merge(control.valueChanges, control.statusChanges).subscribe(val => values.push(val));
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+          expect(values).toEqual(
+              [], 'Expected no valueChanges or statusChanges if value unchanged.');
+
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+          expect(values).toEqual([], 'Expected no valueChanges or statusChanges on input.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+          expect(values).toEqual(
+              ['Nancy', 'VALID'],
+              'Expected valueChanges and statusChanges on blur if value changed.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+          expect(values).toEqual(
+              ['Nancy', 'VALID'],
+              'Expected valueChanges and statusChanges not to fire again on blur unless value changed.');
+
+          input.value = 'Bess';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+          expect(values).toEqual(
+              ['Nancy', 'VALID'],
+              'Expected valueChanges and statusChanges not to fire on input after blur.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+          expect(values).toEqual(
+              ['Nancy', 'VALID', 'Bess', 'VALID'],
+              'Expected valueChanges and statusChanges to fire again on blur if value changed.');
+
+          sub.unsubscribe();
+        });
+
+        it('should mark as pristine properly if pending dirty', () => {
+          const fixture = initTest(FormControlComp);
+          const control = new FormControl('', {updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'aa';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          control.markAsPristine();
+          expect(control.dirty).toBe(false, 'Expected control to become pristine.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.dirty).toBe(false, 'Expected pending dirty value to reset.');
+        });
+
+        it('should update on blur with group updateOn', () => {
+          const fixture = initTest(FormGroupComp);
+          const control = new FormControl('', Validators.required);
+          const formGroup = new FormGroup({login: control}, {updateOn: 'blur'});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until blur.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until blur.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.value)
+              .toEqual('Nancy', 'Expected value to change once control is blurred.');
+          expect(control.valid).toBe(true, 'Expected validation to run once control is blurred.');
+
+        });
+
+        it('should update on blur with array updateOn', () => {
+          const fixture = initTest(FormArrayComp);
+          const control = new FormControl('', Validators.required);
+          const cityArray = new FormArray([control], {updateOn: 'blur'});
+          const formGroup = new FormGroup({cities: cityArray});
+          fixture.componentInstance.form = formGroup;
+          fixture.componentInstance.cityArray = cityArray;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until blur.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until blur.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.value)
+              .toEqual('Nancy', 'Expected value to change once control is blurred.');
+          expect(control.valid).toBe(true, 'Expected validation to run once control is blurred.');
+
+        });
+
+
+        it('should allow child control updateOn blur to override group updateOn', () => {
+          const fixture = initTest(NestedFormGroupComp);
+          const loginControl =
+              new FormControl('', {validators: Validators.required, updateOn: 'change'});
+          const passwordControl = new FormControl('', Validators.required);
+          const formGroup = new FormGroup(
+              {signin: new FormGroup({login: loginControl, password: passwordControl})},
+              {updateOn: 'blur'});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const [loginInput, passwordInput] = fixture.debugElement.queryAll(By.css('input'));
+          loginInput.nativeElement.value = 'Nancy';
+          dispatchEvent(loginInput.nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(loginControl.value).toEqual('Nancy', 'Expected value change on input.');
+          expect(loginControl.valid).toBe(true, 'Expected validation to run on input.');
+
+          passwordInput.nativeElement.value = 'Carson';
+          dispatchEvent(passwordInput.nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(passwordControl.value)
+              .toEqual('', 'Expected value to remain unchanged until blur.');
+          expect(passwordControl.valid).toBe(false, 'Expected no validation to occur until blur.');
+
+          dispatchEvent(passwordInput.nativeElement, 'blur');
+          fixture.detectChanges();
+
+          expect(passwordControl.value)
+              .toEqual('Carson', 'Expected value to change once control is blurred.');
+          expect(passwordControl.valid)
+              .toBe(true, 'Expected validation to run once control is blurred.');
+        });
+
+
+      });
+
+      describe('on submit', () => {
+
+        it('should set initial value and validity on init', () => {
+          const fixture = initTest(FormGroupComp);
+          const form = new FormGroup({
+            login:
+                new FormControl('Nancy', {validators: Validators.required, updateOn: 'submit'})
+          });
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          expect(input.value).toEqual('Nancy', 'Expected initial value to propagate to view.');
+          expect(form.value).toEqual({login: 'Nancy'}, 'Expected initial value to be set.');
+          expect(form.valid).toBe(true, 'Expected form to run validation on initial value.');
+        });
+
+        it('should not update value or validity until submit', () => {
+          const fixture = initTest(FormGroupComp);
+          const formGroup = new FormGroup(
+              {login: new FormControl('', {validators: Validators.required, updateOn: 'submit'})});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(formGroup.value)
+              .toEqual({login: ''}, 'Expected form value to remain unchanged on input.');
+          expect(formGroup.valid).toBe(false, 'Expected form validation not to run on input.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(formGroup.value)
+              .toEqual({login: ''}, 'Expected form value to remain unchanged on blur.');
+          expect(formGroup.valid).toBe(false, 'Expected form validation not to run on blur.');
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(formGroup.value)
+              .toEqual({login: 'Nancy'}, 'Expected form value to update on submit.');
+          expect(formGroup.valid).toBe(true, 'Expected form validation to run on submit.');
+        });
+
+        it('should not update after submit until a second submit', () => {
+          const fixture = initTest(FormGroupComp);
+          const formGroup = new FormGroup(
+              {login: new FormControl('', {validators: Validators.required, updateOn: 'submit'})});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          input.value = '';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(formGroup.value)
+              .toEqual({login: 'Nancy'}, 'Expected value not to change until a second submit.');
+          expect(formGroup.valid)
+              .toBe(true, 'Expected validation not to run until a second submit.');
+
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(formGroup.value)
+              .toEqual({login: ''}, 'Expected value to update on the second submit.');
+          expect(formGroup.valid).toBe(false, 'Expected validation to run on a second submit.');
+        });
+
+        it('should not wait for submit to set value programmatically', () => {
+          const fixture = initTest(FormGroupComp);
+          const formGroup = new FormGroup(
+              {login: new FormControl('', {validators: Validators.required, updateOn: 'submit'})});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          formGroup.setValue({login: 'Nancy'});
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          expect(input.value).toEqual('Nancy', 'Expected view value to update immediately.');
+          expect(formGroup.value)
+              .toEqual({login: 'Nancy'}, 'Expected form value to update immediately.');
+          expect(formGroup.valid).toBe(true, 'Expected form validation to run immediately.');
+        });
+
+        it('should not update dirty until submit', () => {
+          const fixture = initTest(FormGroupComp);
+          const formGroup = new FormGroup({login: new FormControl('', {updateOn: 'submit'})});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(formGroup.dirty).toBe(false, 'Expected dirty not to change on input.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(formGroup.dirty).toBe(false, 'Expected dirty not to change on blur.');
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(formGroup.dirty).toBe(true, 'Expected dirty to update on submit.');
+        });
+
+        it('should not update touched until submit', () => {
+          const fixture = initTest(FormGroupComp);
+          const formGroup = new FormGroup({login: new FormControl('', {updateOn: 'submit'})});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(formGroup.touched).toBe(false, 'Expected touched not to change until submit.');
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(formGroup.touched).toBe(true, 'Expected touched to update on submit.');
+        });
+
+        it('should reset properly', () => {
+          const fixture = initTest(FormGroupComp);
+          const formGroup = new FormGroup(
+              {login: new FormControl('', {validators: Validators.required, updateOn: 'submit'})});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          formGroup.reset();
+          fixture.detectChanges();
+
+          expect(input.value).toEqual('', 'Expected view value to reset.');
+          expect(formGroup.value).toEqual({login: null}, 'Expected form value to reset');
+          expect(formGroup.dirty).toBe(false, 'Expected dirty to stay false on reset.');
+          expect(formGroup.touched).toBe(false, 'Expected touched to stay false on reset.');
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(formGroup.value)
+              .toEqual({login: null}, 'Expected form value to stay empty on submit');
+          expect(formGroup.dirty).toBe(false, 'Expected dirty to stay false on submit.');
+          expect(formGroup.touched).toBe(false, 'Expected touched to stay false on submit.');
+        });
+
+        it('should not emit valueChanges or statusChanges until submit', () => {
+          const fixture = initTest(FormGroupComp);
+          const control =
+              new FormControl('', {validators: Validators.required, updateOn: 'submit'});
+          const formGroup = new FormGroup({login: control});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const values: any[] = [];
+          const streams = merge(
+              control.valueChanges, control.statusChanges, formGroup.valueChanges,
+              formGroup.statusChanges);
+          const sub = streams.subscribe(val => values.push(val));
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(values).toEqual([], 'Expected no valueChanges or statusChanges on input');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(values).toEqual([], 'Expected no valueChanges or statusChanges on blur');
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(values).toEqual(
+              ['Nancy', 'VALID', {login: 'Nancy'}, 'VALID'],
+              'Expected valueChanges and statusChanges to update on submit.');
+
+          sub.unsubscribe();
+        });
+
+        it('should not emit valueChanges or statusChanges on submit if value unchanged', () => {
+          const fixture = initTest(FormGroupComp);
+          const control =
+              new FormControl('', {validators: Validators.required, updateOn: 'submit'});
+          const formGroup = new FormGroup({login: control});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const values: (string | {[key: string]: string})[] = [];
+          const streams = merge(
+              control.valueChanges, control.statusChanges, formGroup.valueChanges,
+              formGroup.statusChanges);
+          const sub = streams.subscribe(val => values.push(val));
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+          expect(values).toEqual(
+              [], 'Expected no valueChanges or statusChanges if value unchanged.');
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+          expect(values).toEqual([], 'Expected no valueChanges or statusChanges on input.');
+
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+          expect(values).toEqual(
+              ['Nancy', 'VALID', {login: 'Nancy'}, 'VALID'],
+              'Expected valueChanges and statusChanges on submit if value changed.');
+
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+          expect(values).toEqual(
+              ['Nancy', 'VALID', {login: 'Nancy'}, 'VALID'],
+              'Expected valueChanges and statusChanges not to fire again if value unchanged.');
+
+          input.value = 'Bess';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(values).toEqual(
+              ['Nancy', 'VALID', {login: 'Nancy'}, 'VALID'],
+              'Expected valueChanges and statusChanges not to fire on input after submit.');
+
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(values).toEqual(
+              [
+                'Nancy', 'VALID', {login: 'Nancy'}, 'VALID', 'Bess', 'VALID', {login: 'Bess'},
+                'VALID'
+              ],
+              'Expected valueChanges and statusChanges to fire again on submit if value changed.');
+
+          sub.unsubscribe();
+        });
+
+        it('should not run validation for onChange controls on submit', () => {
+          const validatorSpy = jasmine.createSpy('validator');
+          const groupValidatorSpy = jasmine.createSpy('groupValidatorSpy');
+
+          const fixture = initTest(NestedFormGroupComp);
+          const formGroup = new FormGroup({
+            signin: new FormGroup({login: new FormControl(), password: new FormControl()}),
+            email: new FormControl('', {updateOn: 'submit'})
+          });
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          formGroup.get('signin.login') !.setValidators(validatorSpy);
+          formGroup.get('signin') !.setValidators(groupValidatorSpy);
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(validatorSpy).not.toHaveBeenCalled();
+          expect(groupValidatorSpy).not.toHaveBeenCalled();
+
+        });
+
+        it('should mark as untouched properly if pending touched', () => {
+          const fixture = initTest(FormGroupComp);
+          const formGroup = new FormGroup({login: new FormControl('', {updateOn: 'submit'})});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          formGroup.markAsUntouched();
+          fixture.detectChanges();
+
+          expect(formGroup.touched).toBe(false, 'Expected group to become untouched.');
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(formGroup.touched).toBe(false, 'Expected touched to stay false on submit.');
+        });
+
+        it('should update on submit with group updateOn', () => {
+          const fixture = initTest(FormGroupComp);
+          const control = new FormControl('', Validators.required);
+          const formGroup = new FormGroup({login: control}, {updateOn: 'submit'});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until submit.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until submit.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until submit.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until submit.');
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('Nancy', 'Expected value to change on submit.');
+          expect(control.valid).toBe(true, 'Expected validation to run on submit.');
+
+        });
+
+        it('should update on submit with array updateOn', () => {
+          const fixture = initTest(FormArrayComp);
+          const control = new FormControl('', Validators.required);
+          const cityArray = new FormArray([control], {updateOn: 'submit'});
+          const formGroup = new FormGroup({cities: cityArray});
+          fixture.componentInstance.form = formGroup;
+          fixture.componentInstance.cityArray = cityArray;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until submit.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until submit.');
+
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('Nancy', 'Expected value to change once control on submit');
+          expect(control.valid).toBe(true, 'Expected validation to run on submit.');
+
+        });
+
+        it('should allow child control updateOn submit to override group updateOn', () => {
+          const fixture = initTest(NestedFormGroupComp);
+          const loginControl =
+              new FormControl('', {validators: Validators.required, updateOn: 'change'});
+          const passwordControl = new FormControl('', Validators.required);
+          const formGroup = new FormGroup(
+              {signin: new FormGroup({login: loginControl, password: passwordControl})},
+              {updateOn: 'submit'});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const [loginInput, passwordInput] = fixture.debugElement.queryAll(By.css('input'));
+          loginInput.nativeElement.value = 'Nancy';
+          dispatchEvent(loginInput.nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(loginControl.value).toEqual('Nancy', 'Expected value change on input.');
+          expect(loginControl.valid).toBe(true, 'Expected validation to run on input.');
+
+          passwordInput.nativeElement.value = 'Carson';
+          dispatchEvent(passwordInput.nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(passwordControl.value)
+              .toEqual('', 'Expected value to remain unchanged until submit.');
+          expect(passwordControl.valid)
+              .toBe(false, 'Expected no validation to occur until submit.');
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(passwordControl.value).toEqual('Carson', 'Expected value to change on submit.');
+          expect(passwordControl.valid).toBe(true, 'Expected validation to run on submit.');
+        });
+
+      });
+
+    });
+
+    describe('ngModel interactions', () => {
+      let warnSpy: jasmine.Spy;
+
+      beforeEach(() => {
+        // Reset `_ngModelWarningSentOnce` on `FormControlDirective` and `FormControlName` types.
+        (FormControlDirective as any)._ngModelWarningSentOnce = false;
+        (FormControlName as any)._ngModelWarningSentOnce = false;
+
+        warnSpy = spyOn(console, 'warn');
+      });
+
+      describe('deprecation warnings', () => {
+
+        it('should warn once by default when using ngModel with formControlName', fakeAsync(() => {
+             const fixture = initTest(FormGroupNgModel);
+             fixture.componentInstance.form =
+                 new FormGroup({'login': new FormControl(''), 'password': new FormControl('')});
+             fixture.detectChanges();
+             tick();
+
+             expect(warnSpy.calls.count()).toEqual(1);
+             expect(warnSpy.calls.mostRecent().args[0])
+                 .toMatch(
+                     /It looks like you're using ngModel on the same form field as formControlName/gi);
+
+             fixture.componentInstance.login = 'some value';
+             fixture.detectChanges();
+             tick();
+
+             expect(warnSpy.calls.count()).toEqual(1);
+           }));
+
+        it('should warn once by default when using ngModel with formControl', fakeAsync(() => {
+             const fixture = initTest(FormControlNgModel);
+             fixture.componentInstance.control = new FormControl('');
+             fixture.componentInstance.passwordControl = new FormControl('');
+             fixture.detectChanges();
+             tick();
+
+             expect(warnSpy.calls.count()).toEqual(1);
+             expect(warnSpy.calls.mostRecent().args[0])
+                 .toMatch(
+                     /It looks like you're using ngModel on the same form field as formControl/gi);
+
+             fixture.componentInstance.login = 'some value';
+             fixture.detectChanges();
+             tick();
+
+             expect(warnSpy.calls.count()).toEqual(1);
+           }));
+
+        it('should warn once for each instance when global provider is provided with "always"',
+           fakeAsync(() => {
+             TestBed.configureTestingModule({
+               declarations: [FormControlNgModel],
+               imports:
+                   [ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'always'})]
+             });
+
+             const fixture = TestBed.createComponent(FormControlNgModel);
+             fixture.componentInstance.control = new FormControl('');
+             fixture.componentInstance.passwordControl = new FormControl('');
+             fixture.detectChanges();
+             tick();
+
+             expect(warnSpy.calls.count()).toEqual(2);
+             expect(warnSpy.calls.mostRecent().args[0])
+                 .toMatch(
+                     /It looks like you're using ngModel on the same form field as formControl/gi);
+           }));
+
+        it('should silence warnings when global provider is provided with "never"',
+           fakeAsync(() => {
+             TestBed.configureTestingModule({
+               declarations: [FormControlNgModel],
+               imports: [ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'})]
+             });
+
+             const fixture = TestBed.createComponent(FormControlNgModel);
+             fixture.componentInstance.control = new FormControl('');
+             fixture.componentInstance.passwordControl = new FormControl('');
+             fixture.detectChanges();
+             tick();
+
+             expect(warnSpy).not.toHaveBeenCalled();
+           }));
+
+      });
+
+      it('should support ngModel for complex forms', fakeAsync(() => {
+           const fixture = initTest(FormGroupNgModel);
+           fixture.componentInstance.form =
+               new FormGroup({'login': new FormControl(''), 'password': new FormControl('')});
+           fixture.componentInstance.login = 'oldValue';
+           fixture.detectChanges();
+           tick();
+
+           const input = fixture.debugElement.query(By.css('input')).nativeElement;
+           expect(input.value).toEqual('oldValue');
+
+           input.value = 'updatedValue';
+           dispatchEvent(input, 'input');
+
+           tick();
+           expect(fixture.componentInstance.login).toEqual('updatedValue');
+         }));
+
+      it('should support ngModel for single fields', fakeAsync(() => {
+           const fixture = initTest(FormControlNgModel);
+           fixture.componentInstance.control = new FormControl('');
+           fixture.componentInstance.passwordControl = new FormControl('');
+           fixture.componentInstance.login = 'oldValue';
+           fixture.detectChanges();
+           tick();
+
+           const input = fixture.debugElement.query(By.css('input')).nativeElement;
+           expect(input.value).toEqual('oldValue');
+
+           input.value = 'updatedValue';
+           dispatchEvent(input, 'input');
+           tick();
+
+           expect(fixture.componentInstance.login).toEqual('updatedValue');
+         }));
+
+      it('should not update the view when the value initially came from the view', fakeAsync(() => {
+           if (isNode) return;
+           const fixture = initTest(FormControlNgModel);
+           fixture.componentInstance.control = new FormControl('');
+           fixture.componentInstance.passwordControl = new FormControl('');
+           fixture.detectChanges();
+           tick();
+
+           const input = fixture.debugElement.query(By.css('input')).nativeElement;
+           input.value = 'aa';
+           input.setSelectionRange(1, 2);
+           dispatchEvent(input, 'input');
+
+           fixture.detectChanges();
+           tick();
+
+           // selection start has not changed because we did not reset the value
+           expect(input.selectionStart).toEqual(1);
+         }));
+
+      it('should work with updateOn submit', fakeAsync(() => {
+           const fixture = initTest(FormGroupNgModel);
+           const formGroup = new FormGroup(
+               {login: new FormControl('', {updateOn: 'submit'}), password: new FormControl('')});
+           fixture.componentInstance.form = formGroup;
+           fixture.componentInstance.login = 'initial';
+           fixture.detectChanges();
+           tick();
+
+           const input = fixture.debugElement.query(By.css('input')).nativeElement;
+           input.value = 'Nancy';
+           dispatchEvent(input, 'input');
+           fixture.detectChanges();
+           tick();
+
+           expect(fixture.componentInstance.login)
+               .toEqual('initial', 'Expected ngModel value to remain unchanged on input.');
+
+           const form = fixture.debugElement.query(By.css('form')).nativeElement;
+           dispatchEvent(form, 'submit');
+           fixture.detectChanges();
+           tick();
+
+           expect(fixture.componentInstance.login)
+               .toEqual('Nancy', 'Expected ngModel value to update on submit.');
+
+         }));
+
+    });
+
+    describe('validations', () => {
+      it('required validator should validate checkbox', () => {
+        const fixture = initTest(FormControlCheckboxRequiredValidator);
+        const control = new FormControl(false, Validators.requiredTrue);
+        fixture.componentInstance.control = control;
+        fixture.detectChanges();
+
+        const checkbox = fixture.debugElement.query(By.css('input'));
+        expect(checkbox.nativeElement.checked).toBe(false);
+        expect(control.hasError('required')).toEqual(true);
+
+        checkbox.nativeElement.checked = true;
+        dispatchEvent(checkbox.nativeElement, 'change');
+        fixture.detectChanges();
+
+        expect(checkbox.nativeElement.checked).toBe(true);
+        expect(control.hasError('required')).toEqual(false);
+      });
+
+      it('should use sync validators defined in html', () => {
+        const fixture = initTest(LoginIsEmptyWrapper, LoginIsEmptyValidator);
+        const form = new FormGroup({
+          'login': new FormControl(''),
+          'min': new FormControl(''),
+          'max': new FormControl(''),
+          'pattern': new FormControl('')
+        });
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+
+        const required = fixture.debugElement.query(By.css('[required]'));
+        const minLength = fixture.debugElement.query(By.css('[minlength]'));
+        const maxLength = fixture.debugElement.query(By.css('[maxlength]'));
+        const pattern = fixture.debugElement.query(By.css('[pattern]'));
+
+        required.nativeElement.value = '';
+        minLength.nativeElement.value = '1';
+        maxLength.nativeElement.value = '1234';
+        pattern.nativeElement.value = '12';
+
+        dispatchEvent(required.nativeElement, 'input');
+        dispatchEvent(minLength.nativeElement, 'input');
+        dispatchEvent(maxLength.nativeElement, 'input');
+        dispatchEvent(pattern.nativeElement, 'input');
+
+        expect(form.hasError('required', ['login'])).toEqual(true);
+        expect(form.hasError('minlength', ['min'])).toEqual(true);
+        expect(form.hasError('maxlength', ['max'])).toEqual(true);
+        expect(form.hasError('pattern', ['pattern'])).toEqual(true);
+        expect(form.hasError('loginIsEmpty')).toEqual(true);
+
+        required.nativeElement.value = '1';
+        minLength.nativeElement.value = '123';
+        maxLength.nativeElement.value = '123';
+        pattern.nativeElement.value = '123';
+
+        dispatchEvent(required.nativeElement, 'input');
+        dispatchEvent(minLength.nativeElement, 'input');
+        dispatchEvent(maxLength.nativeElement, 'input');
+        dispatchEvent(pattern.nativeElement, 'input');
+
+        expect(form.valid).toEqual(true);
+      });
+
+      it('should use sync validators using bindings', () => {
+        const fixture = initTest(ValidationBindingsForm);
+        const form = new FormGroup({
+          'login': new FormControl(''),
+          'min': new FormControl(''),
+          'max': new FormControl(''),
+          'pattern': new FormControl('')
+        });
+        fixture.componentInstance.form = form;
+        fixture.componentInstance.required = true;
+        fixture.componentInstance.minLen = 3;
+        fixture.componentInstance.maxLen = 3;
+        fixture.componentInstance.pattern = '.{3,}';
+        fixture.detectChanges();
+
+        const required = fixture.debugElement.query(By.css('[name=required]'));
+        const minLength = fixture.debugElement.query(By.css('[name=minlength]'));
+        const maxLength = fixture.debugElement.query(By.css('[name=maxlength]'));
+        const pattern = fixture.debugElement.query(By.css('[name=pattern]'));
+
+        required.nativeElement.value = '';
+        minLength.nativeElement.value = '1';
+        maxLength.nativeElement.value = '1234';
+        pattern.nativeElement.value = '12';
+
+        dispatchEvent(required.nativeElement, 'input');
+        dispatchEvent(minLength.nativeElement, 'input');
+        dispatchEvent(maxLength.nativeElement, 'input');
+        dispatchEvent(pattern.nativeElement, 'input');
+
+        expect(form.hasError('required', ['login'])).toEqual(true);
+        expect(form.hasError('minlength', ['min'])).toEqual(true);
+        expect(form.hasError('maxlength', ['max'])).toEqual(true);
+        expect(form.hasError('pattern', ['pattern'])).toEqual(true);
+
+        required.nativeElement.value = '1';
+        minLength.nativeElement.value = '123';
+        maxLength.nativeElement.value = '123';
+        pattern.nativeElement.value = '123';
+
+        dispatchEvent(required.nativeElement, 'input');
+        dispatchEvent(minLength.nativeElement, 'input');
+        dispatchEvent(maxLength.nativeElement, 'input');
+        dispatchEvent(pattern.nativeElement, 'input');
+
+        expect(form.valid).toEqual(true);
+      });
+
+      it('changes on bound properties should change the validation state of the form', () => {
+        const fixture = initTest(ValidationBindingsForm);
+        const form = new FormGroup({
+          'login': new FormControl(''),
+          'min': new FormControl(''),
+          'max': new FormControl(''),
+          'pattern': new FormControl('')
+        });
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+
+        const required = fixture.debugElement.query(By.css('[name=required]'));
+        const minLength = fixture.debugElement.query(By.css('[name=minlength]'));
+        const maxLength = fixture.debugElement.query(By.css('[name=maxlength]'));
+        const pattern = fixture.debugElement.query(By.css('[name=pattern]'));
+
+        required.nativeElement.value = '';
+        minLength.nativeElement.value = '1';
+        maxLength.nativeElement.value = '1234';
+        pattern.nativeElement.value = '12';
+
+        dispatchEvent(required.nativeElement, 'input');
+        dispatchEvent(minLength.nativeElement, 'input');
+        dispatchEvent(maxLength.nativeElement, 'input');
+        dispatchEvent(pattern.nativeElement, 'input');
+
+        expect(form.hasError('required', ['login'])).toEqual(false);
+        expect(form.hasError('minlength', ['min'])).toEqual(false);
+        expect(form.hasError('maxlength', ['max'])).toEqual(false);
+        expect(form.hasError('pattern', ['pattern'])).toEqual(false);
+        expect(form.valid).toEqual(true);
+
+        fixture.componentInstance.required = true;
+        fixture.componentInstance.minLen = 3;
+        fixture.componentInstance.maxLen = 3;
+        fixture.componentInstance.pattern = '.{3,}';
+        fixture.detectChanges();
+
+        dispatchEvent(required.nativeElement, 'input');
+        dispatchEvent(minLength.nativeElement, 'input');
+        dispatchEvent(maxLength.nativeElement, 'input');
+        dispatchEvent(pattern.nativeElement, 'input');
+
+        expect(form.hasError('required', ['login'])).toEqual(true);
+        expect(form.hasError('minlength', ['min'])).toEqual(true);
+        expect(form.hasError('maxlength', ['max'])).toEqual(true);
+        expect(form.hasError('pattern', ['pattern'])).toEqual(true);
+        expect(form.valid).toEqual(false);
+
+        expect(required.nativeElement.getAttribute('required')).toEqual('');
+        expect(fixture.componentInstance.minLen.toString())
+            .toEqual(minLength.nativeElement.getAttribute('minlength'));
+        expect(fixture.componentInstance.maxLen.toString())
+            .toEqual(maxLength.nativeElement.getAttribute('maxlength'));
+        expect(fixture.componentInstance.pattern.toString())
+            .toEqual(pattern.nativeElement.getAttribute('pattern'));
+
+        fixture.componentInstance.required = false;
+        fixture.componentInstance.minLen = null !;
+        fixture.componentInstance.maxLen = null !;
+        fixture.componentInstance.pattern = null !;
+        fixture.detectChanges();
+
+        expect(form.hasError('required', ['login'])).toEqual(false);
+        expect(form.hasError('minlength', ['min'])).toEqual(false);
+        expect(form.hasError('maxlength', ['max'])).toEqual(false);
+        expect(form.hasError('pattern', ['pattern'])).toEqual(false);
+        expect(form.valid).toEqual(true);
+
+        expect(required.nativeElement.getAttribute('required')).toEqual(null);
+        expect(required.nativeElement.getAttribute('minlength')).toEqual(null);
+        expect(required.nativeElement.getAttribute('maxlength')).toEqual(null);
+        expect(required.nativeElement.getAttribute('pattern')).toEqual(null);
+      });
+
+      it('should support rebound controls with rebound validators', () => {
+        const fixture = initTest(ValidationBindingsForm);
+        const form = new FormGroup({
+          'login': new FormControl(''),
+          'min': new FormControl(''),
+          'max': new FormControl(''),
+          'pattern': new FormControl('')
+        });
+        fixture.componentInstance.form = form;
+        fixture.componentInstance.required = true;
+        fixture.componentInstance.minLen = 3;
+        fixture.componentInstance.maxLen = 3;
+        fixture.componentInstance.pattern = '.{3,}';
+        fixture.detectChanges();
+
+        const newForm = new FormGroup({
+          'login': new FormControl(''),
+          'min': new FormControl(''),
+          'max': new FormControl(''),
+          'pattern': new FormControl('')
+        });
+        fixture.componentInstance.form = newForm;
+        fixture.detectChanges();
+
+        fixture.componentInstance.required = false;
+        fixture.componentInstance.minLen = null !;
+        fixture.componentInstance.maxLen = null !;
+        fixture.componentInstance.pattern = null !;
+        fixture.detectChanges();
+
+        expect(newForm.hasError('required', ['login'])).toEqual(false);
+        expect(newForm.hasError('minlength', ['min'])).toEqual(false);
+        expect(newForm.hasError('maxlength', ['max'])).toEqual(false);
+        expect(newForm.hasError('pattern', ['pattern'])).toEqual(false);
+        expect(newForm.valid).toEqual(true);
+      });
+
+      it('should use async validators defined in the html', fakeAsync(() => {
+           const fixture = initTest(UniqLoginWrapper, UniqLoginValidator);
+           const form = new FormGroup({'login': new FormControl('')});
+           tick();
+           fixture.componentInstance.form = form;
+           fixture.detectChanges();
+
+           expect(form.pending).toEqual(true);
+           tick(100);
+
+           expect(form.hasError('uniqLogin', ['login'])).toEqual(true);
+
+           const input = fixture.debugElement.query(By.css('input'));
+           input.nativeElement.value = 'expected';
+           dispatchEvent(input.nativeElement, 'input');
+           tick(100);
+
+           expect(form.valid).toEqual(true);
+         }));
+
+      it('should use sync validators defined in the model', () => {
+        const fixture = initTest(FormGroupComp);
+        const form = new FormGroup({'login': new FormControl('aa', Validators.required)});
+        fixture.componentInstance.form = form;
+        fixture.detectChanges();
+        expect(form.valid).toEqual(true);
+
+        const input = fixture.debugElement.query(By.css('input'));
+        input.nativeElement.value = '';
+        dispatchEvent(input.nativeElement, 'input');
+
+        expect(form.valid).toEqual(false);
+      });
+
+      it('should use async validators defined in the model', fakeAsync(() => {
+           const fixture = initTest(FormGroupComp);
+           const control =
+               new FormControl('', Validators.required, uniqLoginAsyncValidator('expected'));
+           const form = new FormGroup({'login': control});
+           fixture.componentInstance.form = form;
+           fixture.detectChanges();
+           tick();
+
+           expect(form.hasError('required', ['login'])).toEqual(true);
+
+           const input = fixture.debugElement.query(By.css('input'));
+           input.nativeElement.value = 'wrong value';
+           dispatchEvent(input.nativeElement, 'input');
+
+           expect(form.pending).toEqual(true);
+           tick();
+
+           expect(form.hasError('uniqLogin', ['login'])).toEqual(true);
+
+           input.nativeElement.value = 'expected';
+           dispatchEvent(input.nativeElement, 'input');
+           tick();
+
+           expect(form.valid).toEqual(true);
+         }));
+
+      it('async validator should not override result of sync validator', fakeAsync(() => {
+           const fixture = initTest(FormGroupComp);
+           const control =
+               new FormControl('', Validators.required, uniqLoginAsyncValidator('expected', 100));
+           fixture.componentInstance.form = new FormGroup({'login': control});
+           fixture.detectChanges();
+           tick();
+
+           expect(control.hasError('required')).toEqual(true);
+
+           const input = fixture.debugElement.query(By.css('input'));
+           input.nativeElement.value = 'expected';
+           dispatchEvent(input.nativeElement, 'input');
+
+           expect(control.pending).toEqual(true);
+
+           input.nativeElement.value = '';
+           dispatchEvent(input.nativeElement, 'input');
+           tick(110);
+
+           expect(control.valid).toEqual(false);
+         }));
+
+      it('should cancel observable properly between validation runs', fakeAsync(() => {
+           const fixture = initTest(FormControlComp);
+           const resultArr: number[] = [];
+           fixture.componentInstance.control =
+               new FormControl('', null !, observableValidator(resultArr));
+           fixture.detectChanges();
+           tick(100);
+
+           expect(resultArr.length).toEqual(1, `Expected source observable to emit once on init.`);
+
+           const input = fixture.debugElement.query(By.css('input'));
+           input.nativeElement.value = 'a';
+           dispatchEvent(input.nativeElement, 'input');
+           fixture.detectChanges();
+
+           input.nativeElement.value = 'aa';
+           dispatchEvent(input.nativeElement, 'input');
+           fixture.detectChanges();
+
+           tick(100);
+           expect(resultArr.length)
+               .toEqual(2, `Expected original observable to be canceled on the next value change.`);
+         }));
+
+
+    });
+
+    describe('errors', () => {
+
+      it('should throw if a form isn\'t passed into formGroup', () => {
+        const fixture = initTest(FormGroupComp);
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(new RegExp(`formGroup expects a FormGroup instance`));
+      });
+
+      it('should throw if formControlName is used without a control container', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+          <input type="text" formControlName="login">
+        `
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(
+                new RegExp(`formControlName must be used with a parent formGroup directive`));
+      });
+
+      it('should throw if formControlName is used with NgForm', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+          <form>
+            <input type="text" formControlName="login">
+          </form>
+        `
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(
+                new RegExp(`formControlName must be used with a parent formGroup directive.`));
+      });
+
+      it('should throw if formControlName is used with NgModelGroup', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+          <form>
+            <div ngModelGroup="parent">
+              <input type="text" formControlName="login">
+            </div>
+          </form>
+        `
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(
+                new RegExp(`formControlName cannot be used with an ngModelGroup parent.`));
+      });
+
+      it('should throw if formGroupName is used without a control container', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+          <div formGroupName="person">
+            <input type="text" formControlName="login">
+          </div>
+        `
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(
+                new RegExp(`formGroupName must be used with a parent formGroup directive`));
+      });
+
+      it('should throw if formGroupName is used with NgForm', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+          <form>
+            <div formGroupName="person">
+              <input type="text" formControlName="login">
+            </div>
+          </form>
+        `
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(
+                new RegExp(`formGroupName must be used with a parent formGroup directive.`));
+      });
+
+      it('should throw if formArrayName is used without a control container', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+         <div formArrayName="cities">
+           <input type="text" formControlName="login">
+         </div>`
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(
+                new RegExp(`formArrayName must be used with a parent formGroup directive`));
+      });
+
+      it('should throw if ngModel is used alone under formGroup', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+         <div [formGroup]="form">
+           <input type="text" [(ngModel)]="data">
+         </div>
+        `
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+        fixture.componentInstance.form = new FormGroup({});
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(new RegExp(
+                `ngModel cannot be used to register form controls with a parent formGroup directive.`));
+      });
+
+      it('should not throw if ngModel is used alone under formGroup with standalone: true', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+         <div [formGroup]="form">
+            <input type="text" [(ngModel)]="data" [ngModelOptions]="{standalone: true}">
+         </div>
+        `
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+        fixture.componentInstance.form = new FormGroup({});
+
+        expect(() => fixture.detectChanges()).not.toThrowError();
+      });
+
+      it('should throw if ngModel is used alone with formGroupName', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+          <div [formGroup]="form">
+            <div formGroupName="person">
+              <input type="text" [(ngModel)]="data">
+            </div>
+          </div>
+        `
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+        fixture.componentInstance.form = new FormGroup({person: new FormGroup({})});
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(new RegExp(
+                `ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.`));
+      });
+
+      it('should throw if ngModelGroup is used with formGroup', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+          <div [formGroup]="form">
+            <div ngModelGroup="person">
+              <input type="text" [(ngModel)]="data">
+            </div>
+          </div>
+        `
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+        fixture.componentInstance.form = new FormGroup({});
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(
+                new RegExp(`ngModelGroup cannot be used with a parent formGroup directive`));
+      });
+
+      it('should throw if radio button name does not match formControlName attr', () => {
+        TestBed.overrideComponent(FormGroupComp, {
+          set: {
+            template: `
+          <form [formGroup]="form">hav
+            <input type="radio" formControlName="food" name="drink" value="chicken">
+          </form>`
+          }
+        });
+        const fixture = initTest(FormGroupComp);
+        fixture.componentInstance.form = new FormGroup({'food': new FormControl('fish')});
+
+        expect(() => fixture.detectChanges())
+            .toThrowError(new RegExp('If you define both a name and a formControlName'));
+      });
+
+    });
+
+    describe('IME events', () => {
+
+      it('should determine IME event handling depending on platform by default', () => {
+        const fixture = initTest(FormControlComp);
+        fixture.componentInstance.control = new FormControl('oldValue');
+        fixture.detectChanges();
+
+        const inputEl = fixture.debugElement.query(By.css('input'));
+        const inputNativeEl = inputEl.nativeElement;
+        expect(inputNativeEl.value).toEqual('oldValue');
+
+        inputEl.triggerEventHandler('compositionstart', null);
+
+        inputNativeEl.value = 'updatedValue';
+        dispatchEvent(inputNativeEl, 'input');
+        const isAndroid = /android (\d+)/.test(getDOM().getUserAgent().toLowerCase());
+
+        if (isAndroid) {
+          // On Android, values should update immediately
+          expect(fixture.componentInstance.control.value).toEqual('updatedValue');
+        } else {
+          // On other platforms, values should wait for compositionend
+          expect(fixture.componentInstance.control.value).toEqual('oldValue');
+
+          inputEl.triggerEventHandler('compositionend', {target: {value: 'updatedValue'}});
+          fixture.detectChanges();
+          expect(fixture.componentInstance.control.value).toEqual('updatedValue');
+        }
+      });
+
+      it('should hold IME events until compositionend if composition mode', () => {
+        TestBed.overrideComponent(
+            FormControlComp,
+            {set: {providers: [{provide: COMPOSITION_BUFFER_MODE, useValue: true}]}});
+        const fixture = initTest(FormControlComp);
+        fixture.componentInstance.control = new FormControl('oldValue');
+        fixture.detectChanges();
+
+        const inputEl = fixture.debugElement.query(By.css('input'));
+        const inputNativeEl = inputEl.nativeElement;
+        expect(inputNativeEl.value).toEqual('oldValue');
+
+        inputEl.triggerEventHandler('compositionstart', null);
+
+        inputNativeEl.value = 'updatedValue';
+        dispatchEvent(inputNativeEl, 'input');
+
+        // should not update when compositionstart
+        expect(fixture.componentInstance.control.value).toEqual('oldValue');
+
+        inputEl.triggerEventHandler('compositionend', {target: {value: 'updatedValue'}});
+
+        fixture.detectChanges();
+
+        // should update when compositionend
+        expect(fixture.componentInstance.control.value).toEqual('updatedValue');
+      });
+
+      it('should work normally with composition events if composition mode is off', () => {
+        TestBed.overrideComponent(
+            FormControlComp,
+            {set: {providers: [{provide: COMPOSITION_BUFFER_MODE, useValue: false}]}});
+        const fixture = initTest(FormControlComp);
+        fixture.componentInstance.control = new FormControl('oldValue');
+        fixture.detectChanges();
+
+        const inputEl = fixture.debugElement.query(By.css('input'));
+        const inputNativeEl = inputEl.nativeElement;
+        expect(inputNativeEl.value).toEqual('oldValue');
+
+        inputEl.triggerEventHandler('compositionstart', null);
+
+        inputNativeEl.value = 'updatedValue';
+        dispatchEvent(inputNativeEl, 'input');
+        fixture.detectChanges();
+
+        // formControl should update normally
+        expect(fixture.componentInstance.control.value).toEqual('updatedValue');
+      });
+
+    });
+
+  });
+}
+
+function uniqLoginAsyncValidator(expectedValue: string, timeout: number = 0) {
+  return (c: AbstractControl) => {
+    let resolve: (result: any) => void;
+    const promise = new Promise(res => { resolve = res; });
+    const res = (c.value == expectedValue) ? null : {'uniqLogin': true};
+    setTimeout(() => resolve(res), timeout);
+    return promise;
+  };
+}
+
+function observableValidator(resultArr: number[]): AsyncValidatorFn {
+  return (c: AbstractControl) => {
+    return timer(100).pipe(tap((resp: any) => resultArr.push(resp)));
+  };
+}
+
+function loginIsEmptyGroupValidator(c: FormGroup) {
+  return c.controls['login'].value == '' ? {'loginIsEmpty': true} : null;
+}
+
+@Directive({
+  selector: '[login-is-empty-validator]',
+  providers: [{provide: NG_VALIDATORS, useValue: loginIsEmptyGroupValidator, multi: true}]
+})
+class LoginIsEmptyValidator {
+}
+
+@Directive({
+  selector: '[uniq-login-validator]',
+  providers: [{
+    provide: NG_ASYNC_VALIDATORS,
+    useExisting: forwardRef(() => UniqLoginValidator),
+    multi: true
+  }]
+})
+class UniqLoginValidator implements AsyncValidator {
+  @Input('uniq-login-validator') expected: any;
+
+  validate(c: AbstractControl) { return uniqLoginAsyncValidator(this.expected)(c); }
+}
+
+function sortedClassList(el: HTMLElement) {
+  return getDOM().classList(el).sort();
+}
+
+@Component({selector: 'form-control-comp', template: `<input type="text" [formControl]="control">`})
+class FormControlComp {
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
+}
+
+@Component({
+  selector: 'form-group-comp',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="event=$event">
+      <input type="text" formControlName="login">
+    </form>`
+})
+class FormGroupComp {
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  event !: Event;
+}
+
+@Component({
+  selector: 'nested-form-group-comp',
+  template: `
+    <form [formGroup]="form">
+      <div formGroupName="signin" login-is-empty-validator>
+        <input formControlName="login">
+        <input formControlName="password">
+      </div>
+      <input *ngIf="form.contains('email')" formControlName="email">
+    </form>`
+})
+class NestedFormGroupComp {
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+}
+
+@Component({
+  selector: 'form-array-comp',
+  template: `
+    <form [formGroup]="form">
+      <div formArrayName="cities">
+        <div *ngFor="let city of cityArray.controls; let i=index">
+          <input [formControlName]="i">
+        </div>
+      </div>
+     </form>`
+})
+class FormArrayComp {
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  cityArray !: FormArray;
+}
+
+@Component({
+  selector: 'form-array-nested-group',
+  template: `
+     <div [formGroup]="form">
+      <div formArrayName="cities">
+        <div *ngFor="let city of cityArray.controls; let i=index" [formGroupName]="i">
+          <input formControlName="town">
+          <input formControlName="state">
+        </div>
+      </div>
+     </div>`
+})
+class FormArrayNestedGroup {
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  cityArray !: FormArray;
+}
+
+@Component({
+  selector: 'form-group-ng-model',
+  template: `
+  <form [formGroup]="form">
+    <input type="text" formControlName="login" [(ngModel)]="login">
+    <input type="text" formControlName="password" [(ngModel)]="password">
+   </form>`
+})
+class FormGroupNgModel {
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  login !: string;
+  // TODO(issue/24571): remove '!'.
+  password !: string;
+}
+
+@Component({
+  selector: 'form-control-ng-model',
+  template: `
+    <input type="text" [formControl]="control" [(ngModel)]="login">
+    <input type="text" [formControl]="passwordControl" [(ngModel)]="password">
+  `
+})
+class FormControlNgModel {
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
+  // TODO(issue/24571): remove '!'.
+  login !: string;
+  // TODO(issue/24571): remove '!'.
+  passwordControl !: FormControl;
+  // TODO(issue/24571): remove '!'.
+  password !: string;
+}
+
+@Component({
+  selector: 'login-is-empty-wrapper',
+  template: `
+    <div [formGroup]="form" login-is-empty-validator>
+      <input type="text" formControlName="login" required>
+      <input type="text" formControlName="min" minlength="3">
+      <input type="text" formControlName="max" maxlength="3">
+      <input type="text" formControlName="pattern" pattern=".{3,}">
+   </div>`
+})
+class LoginIsEmptyWrapper {
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+}
+
+@Component({
+  selector: 'validation-bindings-form',
+  template: `
+    <div [formGroup]="form">
+      <input name="required" type="text" formControlName="login" [required]="required">
+      <input name="minlength" type="text" formControlName="min" [minlength]="minLen">
+      <input name="maxlength" type="text" formControlName="max" [maxlength]="maxLen">
+      <input name="pattern" type="text" formControlName="pattern" [pattern]="pattern">
+   </div>`
+})
+class ValidationBindingsForm {
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  required !: boolean;
+  // TODO(issue/24571): remove '!'.
+  minLen !: number;
+  // TODO(issue/24571): remove '!'.
+  maxLen !: number;
+  // TODO(issue/24571): remove '!'.
+  pattern !: string;
+}
+
+@Component({
+  selector: 'form-control-checkbox-validator',
+  template: `<input type="checkbox" [formControl]="control">`
+})
+class FormControlCheckboxRequiredValidator {
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
+}
+
+@Component({
+  selector: 'uniq-login-wrapper',
+  template: `
+  <div [formGroup]="form">
+    <input type="text" formControlName="login" uniq-login-validator="expected">
+  </div>`
+})
+class UniqLoginWrapper {
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+}
diff --git a/packages/forms/test/spies.ts b/packages/forms/test/spies.ts
new file mode 100644
index 000000000000..1f6b3940c755
--- /dev/null
+++ b/packages/forms/test/spies.ts
@@ -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
+ */
+
+import {ChangeDetectorRef} from '@angular/core/src/change_detection/change_detector_ref';
+import {SpyObject} from '@angular/core/testing/src/testing_internal';
+
+export class SpyChangeDetectorRef extends SpyObject {
+  constructor() {
+    super(ChangeDetectorRef);
+    this.spy('markForCheck');
+  }
+}
+
+export class SpyNgControl extends SpyObject { path = []; }
+
+export class SpyValueAccessor extends SpyObject { writeValue: any; }
diff --git a/packages/forms/test/template_integration_spec.ts b/packages/forms/test/template_integration_spec.ts
new file mode 100644
index 000000000000..ed487c032e1c
--- /dev/null
+++ b/packages/forms/test/template_integration_spec.ts
@@ -0,0 +1,1932 @@
+/**
+ * @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, Type, forwardRef} from '@angular/core';
+import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/testing';
+import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormControl, FormsModule, NG_ASYNC_VALIDATORS, NgForm, NgFormSelectorWarning, NgModel} 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 {merge} from 'rxjs';
+
+import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integration_spec';
+
+{
+  describe('template-driven forms integration tests', () => {
+
+    function initTest<T>(component: Type<T>, ...directives: Type<any>[]): ComponentFixture<T> {
+      TestBed.configureTestingModule(
+          {declarations: [component, ...directives], imports: [FormsModule]});
+      return TestBed.createComponent(component);
+    }
+
+    describe('basic functionality', () => {
+      it('should support ngModel for standalone fields', fakeAsync(() => {
+           const fixture = initTest(StandaloneNgModel);
+           fixture.componentInstance.name = 'oldValue';
+
+           fixture.detectChanges();
+           tick();
+
+           // model -> view
+           const input = fixture.debugElement.query(By.css('input')).nativeElement;
+           expect(input.value).toEqual('oldValue');
+
+           input.value = 'updatedValue';
+           dispatchEvent(input, 'input');
+           tick();
+
+           // view -> model
+           expect(fixture.componentInstance.name).toEqual('updatedValue');
+         }));
+
+      it('should support ngModel registration with a parent form', fakeAsync(() => {
+           const fixture = initTest(NgModelForm);
+           fixture.componentInstance.name = 'Nancy';
+
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           expect(form.value).toEqual({name: 'Nancy'});
+           expect(form.valid).toBe(false);
+         }));
+
+      it('should add novalidate by default to form element', fakeAsync(() => {
+           const fixture = initTest(NgModelForm);
+
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.query(By.css('form'));
+           expect(form.nativeElement.getAttribute('novalidate')).toEqual('');
+         }));
+
+      it('should be possible to use native validation and angular forms', fakeAsync(() => {
+           const fixture = initTest(NgModelNativeValidateForm);
+
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.query(By.css('form'));
+           expect(form.nativeElement.hasAttribute('novalidate')).toEqual(false);
+         }));
+
+      it('should support ngModelGroup', fakeAsync(() => {
+           const fixture = initTest(NgModelGroupForm);
+           fixture.componentInstance.first = 'Nancy';
+           fixture.componentInstance.last = 'Drew';
+           fixture.componentInstance.email = 'some email';
+
+           fixture.detectChanges();
+           tick();
+
+           // model -> view
+           const inputs = fixture.debugElement.queryAll(By.css('input'));
+           expect(inputs[0].nativeElement.value).toEqual('Nancy');
+           expect(inputs[1].nativeElement.value).toEqual('Drew');
+
+           inputs[0].nativeElement.value = 'Carson';
+           dispatchEvent(inputs[0].nativeElement, 'input');
+           tick();
+
+           // view -> model
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           expect(form.value).toEqual({name: {first: 'Carson', last: 'Drew'}, email: 'some email'});
+         }));
+
+      it('should add controls and control groups to form control model', fakeAsync(() => {
+           const fixture = initTest(NgModelGroupForm);
+           fixture.componentInstance.first = 'Nancy';
+           fixture.componentInstance.last = 'Drew';
+           fixture.componentInstance.email = 'some email';
+
+           fixture.detectChanges();
+           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');
+         }));
+
+      it('should remove controls and control groups from form control model', fakeAsync(() => {
+           const fixture = initTest(NgModelNgIfForm);
+           fixture.componentInstance.emailShowing = true;
+           fixture.componentInstance.first = 'Nancy';
+           fixture.componentInstance.email = 'some email';
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           expect(form.control.get('email') !.value).toEqual('some email');
+           expect(form.value).toEqual({name: {first: 'Nancy'}, email: 'some email'});
+
+           // should remove individual control successfully
+           fixture.componentInstance.emailShowing = false;
+           fixture.detectChanges();
+           tick();
+
+           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');
+
+           // should remove form group successfully
+           fixture.componentInstance.groupShowing = false;
+           fixture.detectChanges();
+           tick();
+
+           expect(form.control.get('name')).toBe(null);
+           expect(form.control.get('name.first')).toBe(null);
+           expect(form.value).toEqual({});
+         }));
+
+      it('should set status classes with ngModel', async(() => {
+           const fixture = initTest(NgModelForm);
+           fixture.componentInstance.name = 'aa';
+           fixture.detectChanges();
+           fixture.whenStable().then(() => {
+             fixture.detectChanges();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             expect(sortedClassList(input)).toEqual(['ng-invalid', 'ng-pristine', 'ng-untouched']);
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(sortedClassList(input)).toEqual(['ng-invalid', 'ng-pristine', 'ng-touched']);
+
+             input.value = 'updatedValue';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             expect(sortedClassList(input)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
+           });
+         }));
+
+      it('should set status classes with ngModel and async validators', fakeAsync(() => {
+
+           const fixture = initTest(NgModelAsyncValidation, NgAsyncValidator);
+           fixture.whenStable().then(() => {
+             fixture.detectChanges();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             expect(sortedClassList(input)).toEqual(['ng-pending', 'ng-pristine', 'ng-untouched']);
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(sortedClassList(input)).toEqual(['ng-pending', 'ng-pristine', 'ng-touched']);
+
+             input.value = 'updatedValue';
+             dispatchEvent(input, 'input');
+             tick();
+             fixture.detectChanges();
+
+             expect(sortedClassList(input)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
+           });
+         }));
+
+      it('should set status classes with ngModelGroup and ngForm', async(() => {
+           const fixture = initTest(NgModelGroupForm);
+           fixture.componentInstance.first = '';
+           fixture.detectChanges();
+
+           const form = fixture.debugElement.query(By.css('form')).nativeElement;
+           const modelGroup = fixture.debugElement.query(By.css('[ngModelGroup]')).nativeElement;
+           const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+           // ngModelGroup creates its control asynchronously
+           fixture.whenStable().then(() => {
+             fixture.detectChanges();
+             expect(sortedClassList(modelGroup)).toEqual([
+               'ng-invalid', 'ng-pristine', 'ng-untouched'
+             ]);
+
+             expect(sortedClassList(form)).toEqual(['ng-invalid', 'ng-pristine', 'ng-untouched']);
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(sortedClassList(modelGroup)).toEqual([
+               'ng-invalid', 'ng-pristine', 'ng-touched'
+             ]);
+             expect(sortedClassList(form)).toEqual(['ng-invalid', 'ng-pristine', 'ng-touched']);
+
+             input.value = 'updatedValue';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+
+             expect(sortedClassList(modelGroup)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
+             expect(sortedClassList(form)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
+           });
+         }));
+
+      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);
+      });
+
+      it('should not add novalidate when ngNoForm is used', () => {
+        const fixture = initTest(NgNoFormComp);
+        fixture.detectChanges();
+        const form = fixture.debugElement.query(By.css('form'));
+        expect(form.nativeElement.hasAttribute('novalidate')).toEqual(false);
+      });
+    });
+
+    describe('name and ngModelOptions', () => {
+      it('should throw if ngModel has a parent form but no name attr or standalone label', () => {
+        const fixture = initTest(InvalidNgModelNoName);
+        expect(() => fixture.detectChanges())
+            .toThrowError(new RegExp(`name attribute must be set`));
+      });
+
+      it('should not throw if ngModel has a parent form, no name attr, and a standalone label',
+         () => {
+           const fixture = initTest(NgModelOptionsStandalone);
+           expect(() => fixture.detectChanges()).not.toThrow();
+         });
+
+      it('should not register standalone ngModels with parent form', fakeAsync(() => {
+           const fixture = initTest(NgModelOptionsStandalone);
+           fixture.componentInstance.one = 'some data';
+           fixture.componentInstance.two = 'should not show';
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           const inputs = fixture.debugElement.queryAll(By.css('input'));
+           tick();
+
+           expect(form.value).toEqual({one: 'some data'});
+           expect(inputs[1].nativeElement.value).toEqual('should not show');
+         }));
+
+      it('should override name attribute with ngModelOptions name if provided', fakeAsync(() => {
+           const fixture = initTest(NgModelForm);
+           fixture.componentInstance.options = {name: 'override'};
+           fixture.componentInstance.name = 'some data';
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           expect(form.value).toEqual({override: 'some data'});
+         }));
+    });
+
+    describe('updateOn', () => {
+
+      describe('blur', () => {
+
+        it('should default updateOn to change', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             const name = form.control.get('name') as FormControl;
+             expect((name as any)._updateOn).toBeUndefined();
+             expect(name.updateOn).toEqual('change');
+           }));
+
+
+        it('should set control updateOn to blur properly', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             const name = form.control.get('name') as FormControl;
+             expect((name as any)._updateOn).toEqual('blur');
+             expect(name.updateOn).toEqual('blur');
+           }));
+
+        it('should always set value and validity on init', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Nancy Drew';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(input.value).toEqual('Nancy Drew', 'Expected initial view value to be set.');
+             expect(form.value)
+                 .toEqual({name: 'Nancy Drew'}, 'Expected initial control value be set.');
+             expect(form.valid).toBe(true, 'Expected validation to run on initial value.');
+           }));
+
+        it('should always set value programmatically right away', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Nancy Drew';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             fixture.componentInstance.name = 'Carson';
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(input.value)
+                 .toEqual('Carson', 'Expected view value to update on programmatic change.');
+             expect(form.value)
+                 .toEqual(
+                     {name: 'Carson'}, 'Expected form value to update on programmatic change.');
+             expect(form.valid)
+                 .toBe(false, 'Expected validation to run immediately on programmatic change.');
+           }));
+
+        it('should update value/validity on blur', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Carson';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(fixture.componentInstance.name)
+                 .toEqual('Carson', 'Expected value not to update on input.');
+             expect(form.valid).toBe(false, 'Expected validation not to run on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.name)
+                 .toEqual('Nancy Drew', 'Expected value to update on blur.');
+             expect(form.valid).toBe(true, 'Expected validation to run on blur.');
+           }));
+
+        it('should wait for second blur to update value/validity again', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Carson';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             input.value = 'Carson';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(fixture.componentInstance.name)
+                 .toEqual('Nancy Drew', 'Expected value not to update until another blur.');
+             expect(form.valid).toBe(true, 'Expected validation not to run until another blur.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.name)
+                 .toEqual('Carson', 'Expected value to update on second blur.');
+             expect(form.valid).toBe(false, 'Expected validation to run on second blur.');
+           }));
+
+        it('should not update dirtiness until blur', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.dirty).toBe(false, 'Expected dirtiness not to update on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(form.dirty).toBe(true, 'Expected dirtiness to update on blur.');
+           }));
+
+        it('should not update touched until blur', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.touched).toBe(false, 'Expected touched not to update on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(form.touched).toBe(true, 'Expected touched to update on blur.');
+           }));
+
+        it('should not emit valueChanges or statusChanges until blur', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const values: any[] = [];
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+
+             const sub = merge(form.valueChanges !, form.statusChanges !)
+                             .subscribe(val => values.push(val));
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             expect(values).toEqual([], 'Expected no valueChanges or statusChanges on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(values).toEqual(
+                 [{name: 'Nancy Drew'}, 'VALID'],
+                 'Expected valueChanges and statusChanges on blur.');
+
+             sub.unsubscribe();
+           }));
+
+        it('should not fire ngModelChange event on blur unless value has changed', fakeAsync(() => {
+             const fixture = initTest(NgModelChangesForm);
+             fixture.componentInstance.name = 'Carson';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual([], 'Expected ngModelChanges not to fire.');
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual([], 'Expected ngModelChanges not to fire if value unchanged.');
+
+             input.value = 'Carson';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual([], 'Expected ngModelChanges not to fire on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual(
+                     ['fired'], 'Expected ngModelChanges to fire once blurred if value changed.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual(
+                     ['fired'],
+                     'Expected ngModelChanges not to fire again on blur unless value changed.');
+
+             input.value = 'Bess';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual(['fired'], 'Expected ngModelChanges not to fire on input after blur.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual(
+                     ['fired', 'fired'],
+                     'Expected ngModelChanges to fire again on blur if value changed.');
+
+           }));
+
+      });
+
+      describe('submit', () => {
+
+        it('should set control updateOn to submit properly', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             const name = form.control.get('name') as FormControl;
+             expect((name as any)._updateOn).toEqual('submit');
+             expect(name.updateOn).toEqual('submit');
+           }));
+
+        it('should always set value and validity on init', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Nancy Drew';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(input.value).toEqual('Nancy Drew', 'Expected initial view value to be set.');
+             expect(form.value)
+                 .toEqual({name: 'Nancy Drew'}, 'Expected initial control value be set.');
+             expect(form.valid).toBe(true, 'Expected validation to run on initial value.');
+           }));
+
+        it('should always set value programmatically right away', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Nancy Drew';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             fixture.componentInstance.name = 'Carson';
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(input.value)
+                 .toEqual('Carson', 'Expected view value to update on programmatic change.');
+             expect(form.value)
+                 .toEqual(
+                     {name: 'Carson'}, 'Expected form value to update on programmatic change.');
+             expect(form.valid)
+                 .toBe(false, 'Expected validation to run immediately on programmatic change.');
+           }));
+
+
+        it('should update on submit', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Carson';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(fixture.componentInstance.name)
+                 .toEqual('Carson', 'Expected value not to update on input.');
+             expect(form.valid).toBe(false, 'Expected validation not to run on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+             tick();
+
+             expect(fixture.componentInstance.name)
+                 .toEqual('Carson', 'Expected value not to update on blur.');
+             expect(form.valid).toBe(false, 'Expected validation not to run on blur.');
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.name)
+                 .toEqual('Nancy Drew', 'Expected value to update on submit.');
+             expect(form.valid).toBe(true, 'Expected validation to run on submit.');
+           }));
+
+        it('should wait until second submit to update again', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Carson';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+             tick();
+
+             input.value = 'Carson';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(fixture.componentInstance.name)
+                 .toEqual('Nancy Drew', 'Expected value not to update until second submit.');
+             expect(form.valid).toBe(true, 'Expected validation not to run until second submit.');
+
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+             tick();
+
+             expect(fixture.componentInstance.name)
+                 .toEqual('Carson', 'Expected value to update on second submit.');
+             expect(form.valid).toBe(false, 'Expected validation to run on second submit.');
+           }));
+
+        it('should not run validation for onChange controls on submit', fakeAsync(() => {
+             const validatorSpy = jasmine.createSpy('validator');
+             const groupValidatorSpy = jasmine.createSpy('groupValidatorSpy');
+
+             const fixture = initTest(NgModelGroupForm);
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             form.control.get('name') !.setValidators(groupValidatorSpy);
+             form.control.get('name.last') !.setValidators(validatorSpy);
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(validatorSpy).not.toHaveBeenCalled();
+             expect(groupValidatorSpy).not.toHaveBeenCalled();
+           }));
+
+        it('should not update dirtiness until submit', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.dirty).toBe(false, 'Expected dirtiness not to update on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+             tick();
+
+             expect(form.dirty).toBe(false, 'Expected dirtiness not to update on blur.');
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(form.dirty).toBe(true, 'Expected dirtiness to update on submit.');
+           }));
+
+        it('should not update touched until submit', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.touched).toBe(false, 'Expected touched not to update on blur.');
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(form.touched).toBe(true, 'Expected touched to update on submit.');
+           }));
+
+        it('should reset properly', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Nancy' as string | null;
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             form.resetForm();
+             fixture.detectChanges();
+             tick();
+
+             expect(input.value).toEqual('', 'Expected view value to reset.');
+             expect(form.value).toEqual({name: null}, 'Expected form value to reset.');
+             expect(fixture.componentInstance.name)
+                 .toEqual(null, 'Expected ngModel value to reset.');
+             expect(form.dirty).toBe(false, 'Expected dirty to stay false on reset.');
+             expect(form.touched).toBe(false, 'Expected touched to stay false on reset.');
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(form.value)
+                 .toEqual({name: null}, 'Expected form value to stay empty on submit');
+             expect(fixture.componentInstance.name)
+                 .toEqual(null, 'Expected ngModel value to stay empty on submit.');
+             expect(form.dirty).toBe(false, 'Expected dirty to stay false on submit.');
+             expect(form.touched).toBe(false, 'Expected touched to stay false on submit.');
+           }));
+
+        it('should not emit valueChanges or statusChanges until submit', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const values: any[] = [];
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+
+             const sub = merge(form.valueChanges !, form.statusChanges !)
+                             .subscribe(val => values.push(val));
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             expect(values).toEqual([], 'Expected no valueChanges or statusChanges on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+             tick();
+
+             expect(values).toEqual([], 'Expected no valueChanges or statusChanges on blur.');
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(values).toEqual(
+                 [{name: 'Nancy Drew'}, 'VALID'],
+                 'Expected valueChanges and statusChanges on submit.');
+             sub.unsubscribe();
+           }));
+
+        it('should not fire ngModelChange event on submit unless value has changed',
+           fakeAsync(() => {
+             const fixture = initTest(NgModelChangesForm);
+             fixture.componentInstance.name = 'Carson';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual([], 'Expected ngModelChanges not to fire if value unchanged.');
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Carson';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual([], 'Expected ngModelChanges not to fire on input.');
+
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual(
+                     ['fired'], 'Expected ngModelChanges to fire once submitted if value changed.');
+
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual(
+                     ['fired'],
+                     'Expected ngModelChanges not to fire again on submit unless value changed.');
+
+             input.value = 'Bess';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual(['fired'], 'Expected ngModelChanges not to fire on input after submit.');
+
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.events)
+                 .toEqual(
+                     ['fired', 'fired'],
+                     'Expected ngModelChanges to fire again on submit if value changed.');
+           }));
+
+      });
+
+      describe('ngFormOptions', () => {
+
+        it('should use ngFormOptions value when ngModelOptions are not set', fakeAsync(() => {
+             const fixture = initTest(NgModelOptionsStandalone);
+             fixture.componentInstance.options = {name: 'two'};
+             fixture.componentInstance.formOptions = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             const controlOne = form.control.get('one') !as FormControl;
+             expect((controlOne as any)._updateOn).toBeUndefined();
+             expect(controlOne.updateOn)
+                 .toEqual('blur', 'Expected first control to inherit updateOn from parent form.');
+
+             const controlTwo = form.control.get('two') !as FormControl;
+             expect((controlTwo as any)._updateOn).toBeUndefined();
+             expect(controlTwo.updateOn)
+                 .toEqual('blur', 'Expected last control to inherit updateOn from parent form.');
+           }));
+
+        it('should actually update using ngFormOptions value', fakeAsync(() => {
+             const fixture = initTest(NgModelOptionsStandalone);
+             fixture.componentInstance.one = '';
+             fixture.componentInstance.formOptions = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.value).toEqual({one: ''}, 'Expected value not to update on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(form.value).toEqual({one: 'Nancy Drew'}, 'Expected value to update on blur.');
+           }));
+
+        it('should allow ngModelOptions updateOn to override ngFormOptions', fakeAsync(() => {
+             const fixture = initTest(NgModelOptionsStandalone);
+             fixture.componentInstance.options = {updateOn: 'blur', name: 'two'};
+             fixture.componentInstance.formOptions = {updateOn: 'change'};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             const controlOne = form.control.get('one') !as FormControl;
+             expect((controlOne as any)._updateOn).toBeUndefined();
+             expect(controlOne.updateOn)
+                 .toEqual('change', 'Expected control updateOn to inherit form updateOn.');
+
+             const controlTwo = form.control.get('two') !as FormControl;
+             expect((controlTwo as any)._updateOn)
+                 .toEqual('blur', 'Expected control to set blur override.');
+             expect(controlTwo.updateOn)
+                 .toEqual('blur', 'Expected control updateOn to override form updateOn.');
+           }));
+
+        it('should update using ngModelOptions override', fakeAsync(() => {
+             const fixture = initTest(NgModelOptionsStandalone);
+             fixture.componentInstance.one = '';
+             fixture.componentInstance.two = '';
+             fixture.componentInstance.options = {updateOn: 'blur', name: 'two'};
+             fixture.componentInstance.formOptions = {updateOn: 'change'};
+             fixture.detectChanges();
+             tick();
+
+             const [inputOne, inputTwo] = fixture.debugElement.queryAll(By.css('input'));
+             inputOne.nativeElement.value = 'Nancy Drew';
+             dispatchEvent(inputOne.nativeElement, 'input');
+             fixture.detectChanges();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.value)
+                 .toEqual({one: 'Nancy Drew', two: ''}, 'Expected first value to update on input.');
+
+             inputTwo.nativeElement.value = 'Carson Drew';
+             dispatchEvent(inputTwo.nativeElement, 'input');
+             fixture.detectChanges();
+             tick();
+
+             expect(form.value)
+                 .toEqual(
+                     {one: 'Nancy Drew', two: ''}, 'Expected second value not to update on input.');
+
+             dispatchEvent(inputTwo.nativeElement, 'blur');
+             fixture.detectChanges();
+
+             expect(form.value)
+                 .toEqual(
+                     {one: 'Nancy Drew', two: 'Carson Drew'},
+                     'Expected second value to update on blur.');
+           }));
+
+        it('should not use ngFormOptions for standalone ngModels', fakeAsync(() => {
+             const fixture = initTest(NgModelOptionsStandalone);
+             fixture.componentInstance.two = '';
+             fixture.componentInstance.options = {standalone: true};
+             fixture.componentInstance.formOptions = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const inputTwo = fixture.debugElement.queryAll(By.css('input'))[1].nativeElement;
+             inputTwo.value = 'Nancy Drew';
+             dispatchEvent(inputTwo, 'input');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.two)
+                 .toEqual('Nancy Drew', 'Expected standalone ngModel not to inherit blur update.');
+           }));
+
+      });
+
+    });
+
+    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 !;
+
+           const form = fixture.debugElement.query(By.css('form'));
+           dispatchEvent(form.nativeElement, 'submit');
+           tick();
+
+           expect(fixture.componentInstance.event.type).toEqual('submit');
+         }));
+
+      it('should mark NgForm as submitted on submit event', fakeAsync(() => {
+           const fixture = initTest(NgModelForm);
+
+           tick();
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           expect(form.submitted).toBe(false);
+
+           const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+           dispatchEvent(formEl, 'submit');
+           tick();
+
+           expect(form.submitted).toBe(true);
+         }));
+
+      it('should reset the form to empty when reset event is fired', fakeAsync(() => {
+           const fixture = initTest(NgModelForm);
+           fixture.componentInstance.name = 'should be cleared' as string | null;
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           const formEl = fixture.debugElement.query(By.css('form'));
+           const input = fixture.debugElement.query(By.css('input'));
+
+           expect(input.nativeElement.value).toBe('should be cleared');       // view value
+           expect(fixture.componentInstance.name).toBe('should be cleared');  // ngModel value
+           expect(form.value.name).toEqual('should be cleared');              // control value
+
+           dispatchEvent(formEl.nativeElement, 'reset');
+           fixture.detectChanges();
+           tick();
+
+           expect(input.nativeElement.value).toBe('');         // view value
+           expect(fixture.componentInstance.name).toBe(null);  // ngModel value
+           expect(form.value.name).toEqual(null);              // control value
+         }));
+
+      it('should reset the form submit state when reset button is clicked', fakeAsync(() => {
+           const fixture = initTest(NgModelForm);
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           const formEl = fixture.debugElement.query(By.css('form'));
+
+           dispatchEvent(formEl.nativeElement, 'submit');
+           fixture.detectChanges();
+           tick();
+           expect(form.submitted).toBe(true);
+
+           dispatchEvent(formEl.nativeElement, 'reset');
+           fixture.detectChanges();
+           tick();
+           expect(form.submitted).toBe(false);
+         }));
+    });
+
+    describe('valueChange and statusChange events', () => {
+      it('should emit valueChanges and statusChanges on init', fakeAsync(() => {
+           const fixture = initTest(NgModelForm);
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           fixture.componentInstance.name = 'aa';
+           fixture.detectChanges();
+
+           expect(form.valid).toEqual(true);
+           expect(form.value).toEqual({});
+
+           let formValidity: string = undefined !;
+           let formValue: Object = undefined !;
+
+           form.statusChanges !.subscribe((status: string) => formValidity = status);
+           form.valueChanges !.subscribe((value: string) => formValue = value);
+
+           tick();
+
+           expect(formValidity).toEqual('INVALID');
+           expect(formValue).toEqual({name: 'aa'});
+         }));
+
+      it('should mark controls dirty before emitting the value change event', fakeAsync(() => {
+           const fixture = initTest(NgModelForm);
+           const form = fixture.debugElement.children[0].injector.get(NgForm).form;
+
+           fixture.detectChanges();
+           tick();
+
+           form.get('name') !.valueChanges.subscribe(
+               () => { expect(form.get('name') !.dirty).toBe(true); });
+
+           const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+           inputEl.value = 'newValue';
+
+           dispatchEvent(inputEl, 'input');
+         }));
+
+      it('should mark controls pristine before emitting the value change event when resetting ',
+         fakeAsync(() => {
+           const fixture = initTest(NgModelForm);
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm).form;
+           const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+           const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+
+           inputEl.value = 'newValue';
+           dispatchEvent(inputEl, 'input');
+
+           expect(form.get('name') !.pristine).toBe(false);
+
+           form.get('name') !.valueChanges.subscribe(
+               () => { expect(form.get('name') !.pristine).toBe(true); });
+
+           dispatchEvent(formEl, 'reset');
+         }));
+    });
+
+    describe('disabled controls', () => {
+      it('should not consider disabled controls in value or validation', fakeAsync(() => {
+           const fixture = initTest(NgModelGroupForm);
+           fixture.componentInstance.isDisabled = false;
+           fixture.componentInstance.first = '';
+           fixture.componentInstance.last = 'Drew';
+           fixture.componentInstance.email = 'some email';
+           fixture.detectChanges();
+           tick();
+
+           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);
+
+           fixture.componentInstance.isDisabled = true;
+           fixture.detectChanges();
+           tick();
+
+           expect(form.value).toEqual({name: {last: 'Drew'}, email: 'some email'});
+           expect(form.valid).toBe(true);
+           expect(form.control.get('name.first') !.disabled).toBe(true);
+         }));
+
+      it('should add disabled attribute in the UI if disable() is called programmatically',
+         fakeAsync(() => {
+           const fixture = initTest(NgModelGroupForm);
+           fixture.componentInstance.isDisabled = false;
+           fixture.componentInstance.first = 'Nancy';
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           form.control.get('name.first') !.disable();
+           fixture.detectChanges();
+           tick();
+
+           const input = fixture.debugElement.query(By.css(`[name="first"]`));
+           expect(input.nativeElement.disabled).toBe(true);
+         }));
+
+      it('should disable a custom control if disabled attr is added', async(() => {
+           const fixture = initTest(NgModelCustomWrapper, NgModelCustomComp);
+           fixture.componentInstance.name = 'Nancy';
+           fixture.componentInstance.isDisabled = true;
+           fixture.detectChanges();
+           fixture.whenStable().then(() => {
+             fixture.detectChanges();
+             fixture.whenStable().then(() => {
+               const form = fixture.debugElement.children[0].injector.get(NgForm);
+               expect(form.control.get('name') !.disabled).toBe(true);
+
+               const customInput = fixture.debugElement.query(By.css('[name="custom"]'));
+               expect(customInput.nativeElement.disabled).toEqual(true);
+             });
+           });
+         }));
+
+      it('should disable a control with unbound disabled attr', fakeAsync(() => {
+           TestBed.overrideComponent(NgModelForm, {
+             set: {
+               template: `
+            <form>
+             <input name="name" [(ngModel)]="name" disabled>
+            </form>
+          `,
+             }
+           });
+           const fixture = initTest(NgModelForm);
+           fixture.detectChanges();
+           tick();
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           expect(form.control.get('name') !.disabled).toBe(true);
+
+           const input = fixture.debugElement.query(By.css('input'));
+           expect(input.nativeElement.disabled).toEqual(true);
+
+           form.control.enable();
+           fixture.detectChanges();
+           tick();
+           expect(input.nativeElement.disabled).toEqual(false);
+         }));
+
+    });
+
+    describe('validation directives', () => {
+
+      it('required validator should validate checkbox', fakeAsync(() => {
+           const fixture = initTest(NgModelCheckboxRequiredValidator);
+           fixture.detectChanges();
+           tick();
+
+           const control =
+               fixture.debugElement.children[0].injector.get(NgForm).control.get('checkbox') !;
+
+           const input = fixture.debugElement.query(By.css('input'));
+           expect(input.nativeElement.checked).toBe(false);
+           expect(control.hasError('required')).toBe(false);
+
+           fixture.componentInstance.required = true;
+           fixture.detectChanges();
+           tick();
+
+           expect(input.nativeElement.checked).toBe(false);
+           expect(control.hasError('required')).toBe(true);
+
+           input.nativeElement.checked = true;
+           dispatchEvent(input.nativeElement, 'change');
+           fixture.detectChanges();
+           tick();
+
+           expect(input.nativeElement.checked).toBe(true);
+           expect(control.hasError('required')).toBe(false);
+
+           input.nativeElement.checked = false;
+           dispatchEvent(input.nativeElement, 'change');
+           fixture.detectChanges();
+           tick();
+
+           expect(input.nativeElement.checked).toBe(false);
+           expect(control.hasError('required')).toBe(true);
+         }));
+
+      it('should validate email', fakeAsync(() => {
+           const fixture = initTest(NgModelEmailValidator);
+           fixture.detectChanges();
+           tick();
+
+           const control =
+               fixture.debugElement.children[0].injector.get(NgForm).control.get('email') !;
+
+           const input = fixture.debugElement.query(By.css('input'));
+           expect(control.hasError('email')).toBe(false);
+
+           fixture.componentInstance.validatorEnabled = true;
+           fixture.detectChanges();
+           tick();
+
+           expect(input.nativeElement.value).toEqual('');
+           expect(control.hasError('email')).toBe(false);
+
+           input.nativeElement.value = '@';
+           dispatchEvent(input.nativeElement, 'input');
+           tick();
+
+           expect(input.nativeElement.value).toEqual('@');
+           expect(control.hasError('email')).toBe(true);
+
+           input.nativeElement.value = 'test@gmail.com';
+           dispatchEvent(input.nativeElement, 'input');
+           fixture.detectChanges();
+           tick();
+
+           expect(input.nativeElement.value).toEqual('test@gmail.com');
+           expect(control.hasError('email')).toBe(false);
+
+           input.nativeElement.value = 'text';
+           dispatchEvent(input.nativeElement, 'input');
+           fixture.detectChanges();
+           tick();
+
+           expect(input.nativeElement.value).toEqual('text');
+           expect(control.hasError('email')).toBe(true);
+         }));
+
+      it('should support dir validators using bindings', fakeAsync(() => {
+           const fixture = initTest(NgModelValidationBindings);
+           fixture.componentInstance.required = true;
+           fixture.componentInstance.minLen = 3;
+           fixture.componentInstance.maxLen = 3;
+           fixture.componentInstance.pattern = '.{3,}';
+           fixture.detectChanges();
+           tick();
+
+           const required = fixture.debugElement.query(By.css('[name=required]'));
+           const minLength = fixture.debugElement.query(By.css('[name=minlength]'));
+           const maxLength = fixture.debugElement.query(By.css('[name=maxlength]'));
+           const pattern = fixture.debugElement.query(By.css('[name=pattern]'));
+
+           required.nativeElement.value = '';
+           minLength.nativeElement.value = '1';
+           maxLength.nativeElement.value = '1234';
+           pattern.nativeElement.value = '12';
+
+           dispatchEvent(required.nativeElement, 'input');
+           dispatchEvent(minLength.nativeElement, 'input');
+           dispatchEvent(maxLength.nativeElement, 'input');
+           dispatchEvent(pattern.nativeElement, 'input');
+           fixture.detectChanges();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           expect(form.control.hasError('required', ['required'])).toEqual(true);
+           expect(form.control.hasError('minlength', ['minlength'])).toEqual(true);
+           expect(form.control.hasError('maxlength', ['maxlength'])).toEqual(true);
+           expect(form.control.hasError('pattern', ['pattern'])).toEqual(true);
+
+           required.nativeElement.value = '1';
+           minLength.nativeElement.value = '123';
+           maxLength.nativeElement.value = '123';
+           pattern.nativeElement.value = '123';
+
+           dispatchEvent(required.nativeElement, 'input');
+           dispatchEvent(minLength.nativeElement, 'input');
+           dispatchEvent(maxLength.nativeElement, 'input');
+           dispatchEvent(pattern.nativeElement, 'input');
+
+           expect(form.valid).toEqual(true);
+         }));
+
+      it('should support optional fields with string pattern validator', fakeAsync(() => {
+           const fixture = initTest(NgModelMultipleValidators);
+           fixture.componentInstance.required = false;
+           fixture.componentInstance.pattern = '[a-z]+';
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           const input = fixture.debugElement.query(By.css('input'));
+
+           input.nativeElement.value = '';
+           dispatchEvent(input.nativeElement, 'input');
+           fixture.detectChanges();
+           expect(form.valid).toBeTruthy();
+
+           input.nativeElement.value = '1';
+           dispatchEvent(input.nativeElement, 'input');
+           fixture.detectChanges();
+           expect(form.valid).toBeFalsy();
+           expect(form.control.hasError('pattern', ['tovalidate'])).toBeTruthy();
+         }));
+
+      it('should support optional fields with RegExp pattern validator', fakeAsync(() => {
+           const fixture = initTest(NgModelMultipleValidators);
+           fixture.componentInstance.required = false;
+           fixture.componentInstance.pattern = /^[a-z]+$/;
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           const input = fixture.debugElement.query(By.css('input'));
+
+           input.nativeElement.value = '';
+           dispatchEvent(input.nativeElement, 'input');
+           fixture.detectChanges();
+           expect(form.valid).toBeTruthy();
+
+           input.nativeElement.value = '1';
+           dispatchEvent(input.nativeElement, 'input');
+           fixture.detectChanges();
+           expect(form.valid).toBeFalsy();
+           expect(form.control.hasError('pattern', ['tovalidate'])).toBeTruthy();
+         }));
+
+      it('should support optional fields with minlength validator', fakeAsync(() => {
+           const fixture = initTest(NgModelMultipleValidators);
+           fixture.componentInstance.required = false;
+           fixture.componentInstance.minLen = 2;
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           const input = fixture.debugElement.query(By.css('input'));
+
+           input.nativeElement.value = '';
+           dispatchEvent(input.nativeElement, 'input');
+           fixture.detectChanges();
+           expect(form.valid).toBeTruthy();
+
+           input.nativeElement.value = '1';
+           dispatchEvent(input.nativeElement, 'input');
+           fixture.detectChanges();
+           expect(form.valid).toBeFalsy();
+           expect(form.control.hasError('minlength', ['tovalidate'])).toBeTruthy();
+         }));
+
+      it('changes on bound properties should change the validation state of the form',
+         fakeAsync(() => {
+           const fixture = initTest(NgModelValidationBindings);
+           fixture.detectChanges();
+           tick();
+
+           const required = fixture.debugElement.query(By.css('[name=required]'));
+           const minLength = fixture.debugElement.query(By.css('[name=minlength]'));
+           const maxLength = fixture.debugElement.query(By.css('[name=maxlength]'));
+           const pattern = fixture.debugElement.query(By.css('[name=pattern]'));
+
+           required.nativeElement.value = '';
+           minLength.nativeElement.value = '1';
+           maxLength.nativeElement.value = '1234';
+           pattern.nativeElement.value = '12';
+
+           dispatchEvent(required.nativeElement, 'input');
+           dispatchEvent(minLength.nativeElement, 'input');
+           dispatchEvent(maxLength.nativeElement, 'input');
+           dispatchEvent(pattern.nativeElement, 'input');
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           expect(form.control.hasError('required', ['required'])).toEqual(false);
+           expect(form.control.hasError('minlength', ['minlength'])).toEqual(false);
+           expect(form.control.hasError('maxlength', ['maxlength'])).toEqual(false);
+           expect(form.control.hasError('pattern', ['pattern'])).toEqual(false);
+           expect(form.valid).toEqual(true);
+
+           fixture.componentInstance.required = true;
+           fixture.componentInstance.minLen = 3;
+           fixture.componentInstance.maxLen = 3;
+           fixture.componentInstance.pattern = '.{3,}';
+           fixture.detectChanges();
+
+           dispatchEvent(required.nativeElement, 'input');
+           dispatchEvent(minLength.nativeElement, 'input');
+           dispatchEvent(maxLength.nativeElement, 'input');
+           dispatchEvent(pattern.nativeElement, 'input');
+
+           expect(form.control.hasError('required', ['required'])).toEqual(true);
+           expect(form.control.hasError('minlength', ['minlength'])).toEqual(true);
+           expect(form.control.hasError('maxlength', ['maxlength'])).toEqual(true);
+           expect(form.control.hasError('pattern', ['pattern'])).toEqual(true);
+           expect(form.valid).toEqual(false);
+
+           expect(required.nativeElement.getAttribute('required')).toEqual('');
+           expect(fixture.componentInstance.minLen.toString())
+               .toEqual(minLength.nativeElement.getAttribute('minlength'));
+           expect(fixture.componentInstance.maxLen.toString())
+               .toEqual(maxLength.nativeElement.getAttribute('maxlength'));
+           expect(fixture.componentInstance.pattern.toString())
+               .toEqual(pattern.nativeElement.getAttribute('pattern'));
+
+           fixture.componentInstance.required = false;
+           fixture.componentInstance.minLen = null !;
+           fixture.componentInstance.maxLen = null !;
+           fixture.componentInstance.pattern = null !;
+           fixture.detectChanges();
+
+           expect(form.control.hasError('required', ['required'])).toEqual(false);
+           expect(form.control.hasError('minlength', ['minlength'])).toEqual(false);
+           expect(form.control.hasError('maxlength', ['maxlength'])).toEqual(false);
+           expect(form.control.hasError('pattern', ['pattern'])).toEqual(false);
+           expect(form.valid).toEqual(true);
+
+           expect(required.nativeElement.getAttribute('required')).toEqual(null);
+           expect(required.nativeElement.getAttribute('minlength')).toEqual(null);
+           expect(required.nativeElement.getAttribute('maxlength')).toEqual(null);
+           expect(required.nativeElement.getAttribute('pattern')).toEqual(null);
+         }));
+
+      it('should update control status', fakeAsync(() => {
+           const fixture = initTest(NgModelChangeState);
+           const inputEl = fixture.debugElement.query(By.css('input'));
+           const inputNativeEl = inputEl.nativeElement;
+           const onNgModelChange = jasmine.createSpy('onNgModelChange');
+           fixture.componentInstance.onNgModelChange = onNgModelChange;
+           fixture.detectChanges();
+           tick();
+
+           expect(onNgModelChange).not.toHaveBeenCalled();
+
+           inputNativeEl.value = 'updated';
+           onNgModelChange.and.callFake((ngModel: NgModel) => {
+             expect(ngModel.invalid).toBe(true);
+             expect(ngModel.value).toBe('updated');
+           });
+           dispatchEvent(inputNativeEl, 'input');
+           expect(onNgModelChange).toHaveBeenCalled();
+           tick();
+
+           inputNativeEl.value = '333';
+           onNgModelChange.and.callFake((ngModel: NgModel) => {
+             expect(ngModel.invalid).toBe(false);
+             expect(ngModel.value).toBe('333');
+           });
+           dispatchEvent(inputNativeEl, 'input');
+           expect(onNgModelChange).toHaveBeenCalledTimes(2);
+           tick();
+         }));
+
+    });
+
+    describe('IME events', () => {
+      it('should determine IME event handling depending on platform by default', fakeAsync(() => {
+           const fixture = initTest(StandaloneNgModel);
+           const inputEl = fixture.debugElement.query(By.css('input'));
+           const inputNativeEl = inputEl.nativeElement;
+           fixture.componentInstance.name = 'oldValue';
+           fixture.detectChanges();
+           tick();
+           expect(inputNativeEl.value).toEqual('oldValue');
+
+           inputEl.triggerEventHandler('compositionstart', null);
+
+           inputNativeEl.value = 'updatedValue';
+           dispatchEvent(inputNativeEl, 'input');
+           tick();
+
+           const isAndroid = /android (\d+)/.test(getDOM().getUserAgent().toLowerCase());
+           if (isAndroid) {
+             // On Android, values should update immediately
+             expect(fixture.componentInstance.name).toEqual('updatedValue');
+           } else {
+             // On other platforms, values should wait until compositionend
+             expect(fixture.componentInstance.name).toEqual('oldValue');
+
+             inputEl.triggerEventHandler('compositionend', {target: {value: 'updatedValue'}});
+
+             fixture.detectChanges();
+             tick();
+
+             expect(fixture.componentInstance.name).toEqual('updatedValue');
+           }
+         }));
+
+      it('should hold IME events until compositionend if composition mode', fakeAsync(() => {
+           TestBed.overrideComponent(
+               StandaloneNgModel,
+               {set: {providers: [{provide: COMPOSITION_BUFFER_MODE, useValue: true}]}});
+           const fixture = initTest(StandaloneNgModel);
+           const inputEl = fixture.debugElement.query(By.css('input'));
+           const inputNativeEl = inputEl.nativeElement;
+           fixture.componentInstance.name = 'oldValue';
+           fixture.detectChanges();
+           tick();
+           expect(inputNativeEl.value).toEqual('oldValue');
+
+           inputEl.triggerEventHandler('compositionstart', null);
+
+           inputNativeEl.value = 'updatedValue';
+           dispatchEvent(inputNativeEl, 'input');
+           tick();
+
+           // ngModel should not update when compositionstart
+           expect(fixture.componentInstance.name).toEqual('oldValue');
+
+           inputEl.triggerEventHandler('compositionend', {target: {value: 'updatedValue'}});
+
+           fixture.detectChanges();
+           tick();
+
+           // ngModel should update when compositionend
+           expect(fixture.componentInstance.name).toEqual('updatedValue');
+         }));
+
+      it('should work normally with composition events if composition mode is off',
+         fakeAsync(() => {
+           TestBed.overrideComponent(
+               StandaloneNgModel,
+               {set: {providers: [{provide: COMPOSITION_BUFFER_MODE, useValue: false}]}});
+           const fixture = initTest(StandaloneNgModel);
+
+           const inputEl = fixture.debugElement.query(By.css('input'));
+           const inputNativeEl = inputEl.nativeElement;
+           fixture.componentInstance.name = 'oldValue';
+           fixture.detectChanges();
+           tick();
+           expect(inputNativeEl.value).toEqual('oldValue');
+
+           inputEl.triggerEventHandler('compositionstart', null);
+
+           inputNativeEl.value = 'updatedValue';
+           dispatchEvent(inputNativeEl, 'input');
+           tick();
+
+           // ngModel should update normally
+           expect(fixture.componentInstance.name).toEqual('updatedValue');
+         }));
+
+    });
+
+    describe('ngModel corner cases', () => {
+      it('should update the view when the model is set back to what used to be in the view',
+         fakeAsync(() => {
+           const fixture = initTest(StandaloneNgModel);
+           fixture.componentInstance.name = '';
+           fixture.detectChanges();
+           tick();
+
+           const input = fixture.debugElement.query(By.css('input')).nativeElement;
+           input.value = 'aa';
+           input.selectionStart = 1;
+           dispatchEvent(input, 'input');
+
+           fixture.detectChanges();
+           tick();
+           expect(fixture.componentInstance.name).toEqual('aa');
+
+           // Programmatically update the input value to be "bb".
+           fixture.componentInstance.name = 'bb';
+           fixture.detectChanges();
+           tick();
+           expect(input.value).toEqual('bb');
+
+           // Programatically set it back to "aa".
+           fixture.componentInstance.name = 'aa';
+           fixture.detectChanges();
+           tick();
+           expect(input.value).toEqual('aa');
+         }));
+
+      it('should not crash when validity is checked from a binding', fakeAsync(() => {
+           const fixture = initTest(NgModelValidBinding);
+           tick();
+           expect(() => fixture.detectChanges()).not.toThrowError();
+         }));
+    });
+
+    describe('ngForm deprecation warnings', () => {
+      let warnSpy: jasmine.Spy;
+
+      @Component({selector: 'ng-form-deprecated', template: `<ngForm></ngForm><ngForm></ngForm>`})
+      class ngFormDeprecated {
+      }
+
+      beforeEach(() => {
+        (NgFormSelectorWarning as any)._ngFormWarning = false;
+
+        warnSpy = spyOn(console, 'warn');
+      });
+
+      describe(`when using the deprecated 'ngForm' selector`, () => {
+        it(`should only warn once when global provider is provided with "once"`, () => {
+          TestBed.configureTestingModule({
+            declarations: [ngFormDeprecated],
+            imports: [FormsModule.withConfig({warnOnDeprecatedNgFormSelector: 'once'})]
+          });
+          TestBed.createComponent(ngFormDeprecated);
+          expect(warnSpy).toHaveBeenCalledTimes(1);
+          expect(warnSpy.calls.mostRecent().args[0])
+              .toMatch(/It looks like you're using 'ngForm'/gi);
+        });
+
+        it(`should only warn once by default`, () => {
+          initTest(ngFormDeprecated);
+          expect(warnSpy).toHaveBeenCalledTimes(1);
+          expect(warnSpy.calls.mostRecent().args[0])
+              .toMatch(/It looks like you're using 'ngForm'/gi);
+        });
+
+        it(`should not warn when global provider is provided with "never"`, () => {
+          TestBed.configureTestingModule({
+            declarations: [ngFormDeprecated],
+            imports: [FormsModule.withConfig({warnOnDeprecatedNgFormSelector: 'never'})]
+          });
+          TestBed.createComponent(ngFormDeprecated);
+          expect(warnSpy).not.toHaveBeenCalled();
+        });
+
+        it(`should only warn for each instance when global provider is provided with "always"`,
+           () => {
+             TestBed.configureTestingModule({
+               declarations: [ngFormDeprecated],
+               imports: [FormsModule.withConfig({warnOnDeprecatedNgFormSelector: 'always'})]
+             });
+
+             TestBed.createComponent(ngFormDeprecated);
+             expect(warnSpy).toHaveBeenCalledTimes(2);
+             expect(warnSpy.calls.mostRecent().args[0])
+                 .toMatch(/It looks like you're using 'ngForm'/gi);
+           });
+      });
+    });
+  });
+}
+
+@Component({
+  selector: 'standalone-ng-model',
+  template: `
+    <input type="text" [(ngModel)]="name">
+  `
+})
+class StandaloneNgModel {
+  // TODO(issue/24571): remove '!'.
+  name !: string;
+}
+
+@Component({
+  selector: 'ng-model-form',
+  template: `
+    <form (ngSubmit)="event=$event" (reset)="onReset()">
+      <input name="name" [(ngModel)]="name" minlength="10" [ngModelOptions]="options">
+    </form>
+  `
+})
+class NgModelForm {
+  // TODO(issue/24571): remove '!'.
+  name !: string | null;
+  // TODO(issue/24571): remove '!'.
+  event !: Event;
+  options = {};
+
+  onReset() {}
+}
+
+@Component({selector: 'ng-model-native-validate-form', template: `<form ngNativeValidate></form>`})
+class NgModelNativeValidateForm {
+}
+
+@Component({
+  selector: 'ng-model-group-form',
+  template: `
+    <form>
+      <div ngModelGroup="name">
+        <input name="first" [(ngModel)]="first" required [disabled]="isDisabled">
+        <input name="last" [(ngModel)]="last">
+      </div>
+      <input name="email" [(ngModel)]="email" [ngModelOptions]="options">
+    </form>
+  `
+})
+class NgModelGroupForm {
+  // TODO(issue/24571): remove '!'.
+  first !: string;
+  // TODO(issue/24571): remove '!'.
+  last !: string;
+  // TODO(issue/24571): remove '!'.
+  email !: string;
+  // TODO(issue/24571): remove '!'.
+  isDisabled !: boolean;
+  options = {updateOn: 'change'};
+}
+
+@Component({
+  selector: 'ng-model-valid-binding',
+  template: `
+    <form>
+      <div ngModelGroup="name" #group="ngModelGroup">
+        <input name="first" [(ngModel)]="first" required>
+        {{ group.valid }}
+      </div>
+    </form>
+  `
+})
+class NgModelValidBinding {
+  // TODO(issue/24571): remove '!'.
+  first !: string;
+}
+
+
+@Component({
+  selector: 'ng-model-ngif-form',
+  template: `
+    <form>
+      <div ngModelGroup="name" *ngIf="groupShowing">
+        <input name="first" [(ngModel)]="first">
+      </div>
+      <input name="email" [(ngModel)]="email" *ngIf="emailShowing">
+    </form>
+  `
+})
+class NgModelNgIfForm {
+  // TODO(issue/24571): remove '!'.
+  first !: string;
+  groupShowing = true;
+  emailShowing = true;
+  // TODO(issue/24571): remove '!'.
+  email !: string;
+}
+
+@Component({
+  selector: 'ng-no-form',
+  template: `
+    <form ngNoForm>
+      <input name="name">
+    </form>
+  `
+})
+class NgNoFormComp {
+}
+
+@Component({
+  selector: 'invalid-ng-model-noname',
+  template: `
+    <form>
+      <input [(ngModel)]="name">
+    </form>
+  `
+})
+class InvalidNgModelNoName {
+}
+
+@Component({
+  selector: 'ng-model-options-standalone',
+  template: `
+    <form [ngFormOptions]="formOptions">
+      <input name="one" [(ngModel)]="one">
+      <input [(ngModel)]="two" [ngModelOptions]="options">
+    </form>
+  `
+})
+class NgModelOptionsStandalone {
+  // TODO(issue/24571): remove '!'.
+  one !: string;
+  // TODO(issue/24571): remove '!'.
+  two !: string;
+  options: {name?: string, standalone?: boolean, updateOn?: string} = {standalone: true};
+  formOptions = {};
+}
+
+@Component({
+  selector: 'ng-model-validation-bindings',
+  template: `
+    <form>
+      <input name="required" ngModel  [required]="required">
+      <input name="minlength" ngModel  [minlength]="minLen">
+      <input name="maxlength" ngModel [maxlength]="maxLen">
+      <input name="pattern" ngModel  [pattern]="pattern">
+    </form>
+  `
+})
+class NgModelValidationBindings {
+  // TODO(issue/24571): remove '!'.
+  required !: boolean;
+  // TODO(issue/24571): remove '!'.
+  minLen !: number;
+  // TODO(issue/24571): remove '!'.
+  maxLen !: number;
+  // TODO(issue/24571): remove '!'.
+  pattern !: string;
+}
+
+@Component({
+  selector: 'ng-model-multiple-validators',
+  template: `
+    <form>
+      <input name="tovalidate" ngModel  [required]="required" [minlength]="minLen" [pattern]="pattern">
+    </form>
+  `
+})
+class NgModelMultipleValidators {
+  // TODO(issue/24571): remove '!'.
+  required !: boolean;
+  // TODO(issue/24571): remove '!'.
+  minLen !: number;
+  // TODO(issue/24571): remove '!'.
+  pattern !: string | RegExp;
+}
+
+@Component({
+  selector: 'ng-model-checkbox-validator',
+  template:
+      `<form><input type="checkbox" [(ngModel)]="accepted" [required]="required" name="checkbox"></form>`
+})
+class NgModelCheckboxRequiredValidator {
+  accepted: boolean = false;
+  required: boolean = false;
+}
+
+@Component({
+  selector: 'ng-model-email',
+  template: `<form><input type="email" ngModel [email]="validatorEnabled" name="email"></form>`
+})
+class NgModelEmailValidator {
+  validatorEnabled: boolean = false;
+}
+
+@Directive({
+  selector: '[ng-async-validator]',
+  providers: [
+    {provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => NgAsyncValidator), multi: true}
+  ]
+})
+class NgAsyncValidator implements AsyncValidator {
+  validate(c: AbstractControl) { return Promise.resolve(null); }
+}
+
+@Component({
+  selector: 'ng-model-async-validation',
+  template: `<input name="async" ngModel ng-async-validator>`
+})
+class NgModelAsyncValidation {
+}
+
+@Component({
+  selector: 'ng-model-changes-form',
+  template: `
+    <form>
+      <input name="async" [ngModel]="name" (ngModelChange)="log()"
+             [ngModelOptions]="options">
+    </form>
+  `
+})
+class NgModelChangesForm {
+  // TODO(issue/24571): remove '!'.
+  name !: string;
+  events: string[] = [];
+  options: any;
+
+  log() { this.events.push('fired'); }
+}
+
+@Component({
+  selector: 'ng-model-change-state',
+  template: `
+    <input #ngModel="ngModel" ngModel [maxlength]="4"
+           (ngModelChange)="onNgModelChange(ngModel)">
+  `
+})
+class NgModelChangeState {
+  onNgModelChange = () => {};
+}
+
+function sortedClassList(el: HTMLElement) {
+  const l = getDOM().classList(el);
+  l.sort();
+  return l;
+}
diff --git a/packages/forms/test/validators_spec.ts b/packages/forms/test/validators_spec.ts
new file mode 100644
index 000000000000..148157e2bacc
--- /dev/null
+++ b/packages/forms/test/validators_spec.ts
@@ -0,0 +1,461 @@
+/**
+ * @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 {fakeAsync, tick} from '@angular/core/testing';
+import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {AbstractControl, AsyncValidatorFn, FormArray, FormControl, Validators} from '@angular/forms';
+import {normalizeAsyncValidator} from '@angular/forms/src/directives/normalize_validator';
+import {AsyncValidator, ValidationErrors, ValidatorFn} from '@angular/forms/src/directives/validators';
+import {Observable, of , timer} from 'rxjs';
+import {first, map} from 'rxjs/operators';
+
+(function() {
+  function validator(key: string, error: any): ValidatorFn {
+    return (c: AbstractControl) => {
+      const r: ValidationErrors = {};
+      r[key] = error;
+      return r;
+    };
+  }
+
+  class AsyncValidatorDirective implements AsyncValidator {
+    constructor(private expected: string, private error: any) {}
+
+    validate(c: any): Observable<ValidationErrors> {
+      return Observable.create((obs: any) => {
+        const error = this.expected !== c.value ? this.error : null;
+        obs.next(error);
+        obs.complete();
+      });
+    }
+  }
+
+  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}); });
+
+      it('should error on null',
+         () => { expect(Validators.required(new FormControl(null))).toEqual({'required': true}); });
+
+      it('should not error on undefined', () => {
+        expect(Validators.required(new FormControl(undefined))).toEqual({'required': true});
+      });
+
+      it('should not error on a non-empty string',
+         () => { expect(Validators.required(new FormControl('not empty'))).toBeNull(); });
+
+      it('should accept zero as valid',
+         () => { expect(Validators.required(new FormControl(0))).toBeNull(); });
+
+      it('should error on an empty array',
+         () => expect(Validators.required(new FormControl([]))).toEqual({'required': true}));
+
+      it('should not error on a non-empty array',
+         () => expect(Validators.required(new FormControl([1, 2]))).toBeNull());
+    });
+
+    describe('requiredTrue', () => {
+      it('should error on false',
+         () => expect(Validators.requiredTrue(new FormControl(false))).toEqual({'required': true}));
+
+      it('should not error on true',
+         () => expect(Validators.requiredTrue(new FormControl(true))).toBeNull());
+    });
+
+    describe('email', () => {
+      it('should not error on an empty string',
+         () => expect(Validators.email(new FormControl(''))).toBeNull());
+
+      it('should not error on null',
+         () => expect(Validators.email(new FormControl(null))).toBeNull());
+
+      it('should error on invalid email',
+         () => expect(Validators.email(new FormControl('some text'))).toEqual({'email': true}));
+
+      it('should not error on valid email',
+         () => expect(Validators.email(new FormControl('test@gmail.com'))).toBeNull());
+    });
+
+    describe('minLength', () => {
+      it('should not error on an empty string',
+         () => { expect(Validators.minLength(2)(new FormControl(''))).toBeNull(); });
+
+      it('should not error on null',
+         () => { expect(Validators.minLength(2)(new FormControl(null))).toBeNull(); });
+
+      it('should not error on undefined',
+         () => { expect(Validators.minLength(2)(new FormControl(undefined))).toBeNull(); });
+
+      it('should not error on valid strings',
+         () => { expect(Validators.minLength(2)(new FormControl('aa'))).toBeNull(); });
+
+      it('should error on short strings', () => {
+        expect(Validators.minLength(2)(new FormControl('a'))).toEqual({
+          'minlength': {'requiredLength': 2, 'actualLength': 1}
+        });
+      });
+
+      it('should not error when FormArray has valid length', () => {
+        const fa = new FormArray([new FormControl(''), new FormControl('')]);
+        expect(Validators.minLength(2)(fa)).toBeNull();
+      });
+
+      it('should error when FormArray has invalid length', () => {
+        const fa = new FormArray([new FormControl('')]);
+        expect(Validators.minLength(2)(fa)).toEqual({
+          'minlength': {'requiredLength': 2, 'actualLength': 1}
+        });
+      });
+    });
+
+    describe('maxLength', () => {
+      it('should not error on an empty string',
+         () => { expect(Validators.maxLength(2)(new FormControl(''))).toBeNull(); });
+
+      it('should not error on null',
+         () => { expect(Validators.maxLength(2)(new FormControl(null))).toBeNull(); });
+
+      it('should not error on undefined',
+         () => { expect(Validators.maxLength(2)(new FormControl(undefined))).toBeNull(); });
+
+      it('should not error on valid strings',
+         () => { expect(Validators.maxLength(2)(new FormControl('aa'))).toBeNull(); });
+
+      it('should error on long strings', () => {
+        expect(Validators.maxLength(2)(new FormControl('aaa'))).toEqual({
+          'maxlength': {'requiredLength': 2, 'actualLength': 3}
+        });
+      });
+
+      it('should not error when FormArray has valid length', () => {
+        const fa = new FormArray([new FormControl(''), new FormControl('')]);
+        expect(Validators.maxLength(2)(fa)).toBeNull();
+      });
+
+      it('should error when FormArray has invalid length', () => {
+        const fa = new FormArray([new FormControl(''), new FormControl('')]);
+        expect(Validators.maxLength(1)(fa)).toEqual({
+          'maxlength': {'requiredLength': 1, 'actualLength': 2}
+        });
+      });
+    });
+
+    describe('pattern', () => {
+      it('should not error on an empty string',
+         () => { expect(Validators.pattern('[a-zA-Z ]+')(new FormControl(''))).toBeNull(); });
+
+      it('should not error on null',
+         () => { expect(Validators.pattern('[a-zA-Z ]+')(new FormControl(null))).toBeNull(); });
+
+      it('should not error on undefined', () => {
+        expect(Validators.pattern('[a-zA-Z ]+')(new FormControl(undefined))).toBeNull();
+      });
+
+      it('should not error on null value and "null" pattern',
+         () => { expect(Validators.pattern('null')(new FormControl(null))).toBeNull(); });
+
+      it('should not error on valid strings',
+         () => expect(Validators.pattern('[a-zA-Z ]*')(new FormControl('aaAA'))).toBeNull());
+
+      it('should error on failure to match string', () => {
+        expect(Validators.pattern('[a-zA-Z ]*')(new FormControl('aaa0'))).toEqual({
+          'pattern': {'requiredPattern': '^[a-zA-Z ]*$', 'actualValue': 'aaa0'}
+        });
+      });
+
+      it('should accept RegExp object', () => {
+        const pattern: RegExp = new RegExp('[a-zA-Z ]+');
+        expect(Validators.pattern(pattern)(new FormControl('aaAA'))).toBeNull();
+      });
+
+      it('should error on failure to match RegExp object', () => {
+        const pattern: RegExp = new RegExp('^[a-zA-Z ]*$');
+        expect(Validators.pattern(pattern)(new FormControl('aaa0'))).toEqual({
+          'pattern': {'requiredPattern': '/^[a-zA-Z ]*$/', 'actualValue': 'aaa0'}
+        });
+      });
+
+      it('should not error on "null" pattern',
+         () => expect(Validators.pattern(null !)(new FormControl('aaAA'))).toBeNull());
+
+      it('should not error on "undefined" pattern',
+         () => expect(Validators.pattern(undefined !)(new FormControl('aaAA'))).toBeNull());
+
+      it('should work with pattern string containing both boundary symbols',
+         () => expect(Validators.pattern('^[aA]*$')(new FormControl('aaAA'))).toBeNull());
+
+      it('should work with pattern string containing only start boundary symbols',
+         () => expect(Validators.pattern('^[aA]*')(new FormControl('aaAA'))).toBeNull());
+
+      it('should work with pattern string containing only end boundary symbols',
+         () => expect(Validators.pattern('[aA]*$')(new FormControl('aaAA'))).toBeNull());
+
+      it('should work with pattern string not containing any boundary symbols',
+         () => expect(Validators.pattern('[aA]*')(new FormControl('aaAA'))).toBeNull());
+    });
+
+    describe('compose', () => {
+      it('should return null when given 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)]) !;
+        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)]) !;
+        expect(c(new FormControl(''))).toEqual({'a': 2});
+      });
+
+      it('should return null when no errors', () => {
+        const c = Validators.compose([Validators.nullValidator, Validators.nullValidator]) !;
+        expect(c(new FormControl(''))).toBeNull();
+      });
+
+      it('should ignore nulls', () => {
+        const c = Validators.compose([null !, Validators.required]) !;
+        expect(c(new FormControl(''))).toEqual({'required': true});
+      });
+    });
+
+    describe('composeAsync', () => {
+
+      describe('promises', () => {
+        function promiseValidator(response: {[key: string]: any}): AsyncValidatorFn {
+          return (c: AbstractControl) => {
+            const res = c.value != 'expected' ? response : null;
+            return Promise.resolve(res);
+          };
+        }
+
+        it('should return null when given null',
+           () => { expect(Validators.composeAsync(null !)).toBeNull(); });
+
+        it('should collect errors from all the validators', fakeAsync(() => {
+             const v = Validators.composeAsync(
+                 [promiseValidator({'one': true}), promiseValidator({'two': true})]) !;
+
+             let errorMap: {[key: string]: any} = undefined !;
+             (v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
+                 .pipe(first())
+                 .subscribe((errors: {[key: string]: any}) => errorMap = errors);
+             tick();
+
+             expect(errorMap).toEqual({'one': true, 'two': true});
+           }));
+
+        it('should normalize and evaluate async validator-directives correctly', fakeAsync(() => {
+             const v = Validators.composeAsync([normalizeAsyncValidator(
+                 new AsyncValidatorDirective('expected', {'one': true}))]) !;
+
+             let errorMap: {[key: string]: any} = undefined !;
+             (v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
+                 .pipe(first())
+                 .subscribe((errors: {[key: string]: any}) => errorMap = errors);
+             tick();
+
+             expect(errorMap).toEqual({'one': true});
+           }));
+
+        it('should return null when no errors', fakeAsync(() => {
+             const v = Validators.composeAsync([promiseValidator({'one': true})]) !;
+
+             let errorMap: {[key: string]: any} = undefined !;
+             (v(new FormControl('expected')) as Observable<ValidationErrors|null>)
+                 .pipe(first())
+                 .subscribe((errors: {[key: string]: any}) => errorMap = errors);
+             tick();
+
+             expect(errorMap).toBeNull();
+           }));
+
+        it('should ignore nulls', fakeAsync(() => {
+             const v = Validators.composeAsync([promiseValidator({'one': true}), null !]) !;
+
+             let errorMap: {[key: string]: any} = undefined !;
+             (v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
+                 .pipe(first())
+                 .subscribe((errors: {[key: string]: any}) => errorMap = errors);
+             tick();
+
+             expect(errorMap).toEqual({'one': true});
+           }));
+      });
+
+      describe('observables', () => {
+        function observableValidator(response: {[key: string]: any}): AsyncValidatorFn {
+          return (c: AbstractControl) => {
+            const res = c.value != 'expected' ? response : null;
+            return of (res);
+          };
+        }
+
+        it('should return null when given null',
+           () => { expect(Validators.composeAsync(null !)).toBeNull(); });
+
+        it('should collect errors from all the validators', () => {
+          const v = Validators.composeAsync(
+              [observableValidator({'one': true}), observableValidator({'two': true})]) !;
+
+          let errorMap: {[key: string]: any} = undefined !;
+          (v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
+              .pipe(first())
+              .subscribe((errors: {[key: string]: any}) => errorMap = errors);
+
+          expect(errorMap).toEqual({'one': true, 'two': true});
+        });
+
+        it('should normalize and evaluate async validator-directives correctly', () => {
+          const v = Validators.composeAsync(
+              [normalizeAsyncValidator(new AsyncValidatorDirective('expected', {'one': true}))]) !;
+
+          let errorMap: {[key: string]: any} = undefined !;
+          (v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
+              .pipe(first())
+              .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})]) !;
+
+          let errorMap: {[key: string]: any} = undefined !;
+          (v(new FormControl('expected')) as Observable<ValidationErrors|null>)
+              .pipe(first())
+              .subscribe((errors: {[key: string]: any}) => errorMap = errors);
+
+          expect(errorMap).toBeNull();
+        });
+
+        it('should ignore nulls', () => {
+          const v = Validators.composeAsync([observableValidator({'one': true}), null !]) !;
+
+          let errorMap: {[key: string]: any} = undefined !;
+          (v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
+              .pipe(first())
+              .subscribe((errors: {[key: string]: any}) => errorMap = errors);
+
+          expect(errorMap).toEqual({'one': true});
+        });
+
+        it('should wait for all validators before setting errors', fakeAsync(() => {
+             function getTimerObs(time: number, errorMap: {[key: string]: any}): AsyncValidatorFn {
+               return (c: AbstractControl) => { return timer(time).pipe(map(() => errorMap)); };
+             }
+
+             const v = Validators.composeAsync(
+                 [getTimerObs(100, {one: true}), getTimerObs(200, {two: true})]) !;
+
+             let errorMap: {[key: string]: any} = undefined !;
+             (v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
+                 .pipe(first())
+                 .subscribe((errors: {[key: string]: any}) => errorMap = errors);
+
+             tick(100);
+             expect(errorMap).not.toBeDefined(
+                 `Expected errors not to be set until all validators came back.`);
+
+             tick(100);
+             expect(errorMap).toEqual(
+                 {one: true, two: true}, `Expected errors to merge once all validators resolved.`);
+           }));
+      });
+
+    });
+  });
+})();
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 000000000000..3a9c8317cddb
--- /dev/null
+++ b/packages/forms/test/value_accessor_integration_spec.ts
@@ -0,0 +1,1433 @@
+/**
+ * @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, 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, NgModel, 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';
+
+{
+  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`, () => {
+          if (isNode) return;
+          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`, () => {
+          if (isNode) return;
+          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', () => {
+          if (isNode) return;
+          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);
+        });
+
+        it('should support re-assigning the options array with compareWith', () => {
+          if (isNode) return;
+          const fixture = initTest(FormControlSelectWithCompareFn);
+          fixture.detectChanges();
+
+          // Option IDs start out as 0 and 1, so setting the select value to "1: Object"
+          // will select the second option (NY).
+          const select = fixture.debugElement.query(By.css('select'));
+          select.nativeElement.value = '1: Object';
+          dispatchEvent(select.nativeElement, 'change');
+          fixture.detectChanges();
+
+          expect(fixture.componentInstance.form.value).toEqual({city: {id: 2, name: 'NY'}});
+
+          fixture.componentInstance.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
+          fixture.detectChanges();
+
+          // Now that the options array has been re-assigned, new option instances will
+          // be created by ngFor. These instances will have different option IDs, subsequent
+          // to the first: 2 and 3. For the second option to stay selected, the select
+          // value will need to have the ID of the current second option: 3.
+          const nyOption = fixture.debugElement.queryAll(By.css('option'))[1];
+          expect(select.nativeElement.value).toEqual('3: Object');
+          expect(nyOption.nativeElement.selected).toBe(true);
+        });
+
+      });
+
+      describe('in template-driven forms', () => {
+        it('with option values that are objects', fakeAsync(() => {
+             if (isNode) return;
+             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(() => {
+             if (isNode) return;
+             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(() => {
+             if (isNode) return;
+             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(() => {
+             if (isNode) return;
+             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);
+           }));
+
+        it('should support re-assigning the options array with compareWith', fakeAsync(() => {
+             if (isNode) return;
+             const fixture = initTest(NgModelSelectWithCustomCompareFnForm);
+             fixture.componentInstance.selectedCity = {id: 1, name: 'SF'};
+             fixture.componentInstance.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
+             fixture.detectChanges();
+             tick();
+
+             // Option IDs start out as 0 and 1, so setting the select value to "1: Object"
+             // will select the second option (NY).
+             const select = fixture.debugElement.query(By.css('select'));
+             select.nativeElement.value = '1: Object';
+             dispatchEvent(select.nativeElement, 'change');
+             fixture.detectChanges();
+
+             const model = fixture.debugElement.children[0].injector.get(NgModel);
+             expect(model.value).toEqual({id: 2, name: 'NY'});
+
+             fixture.componentInstance.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
+             fixture.detectChanges();
+             tick();
+
+             // Now that the options array has been re-assigned, new option instances will
+             // be created by ngFor. These instances will have different option IDs, subsequent
+             // to the first: 2 and 3. For the second option to stay selected, the select
+             // value will need to have the ID of the current second option: 3.
+             const nyOption = fixture.debugElement.queryAll(By.css('option'))[1];
+             expect(select.nativeElement.value).toEqual('3: Object');
+             expect(nyOption.nativeElement.selected).toBe(true);
+           }));
+
+
+      });
+
+    });
+
+    describe('select multiple controls', () => {
+
+      describe('in reactive forms', () => {
+
+        it('should support primitive values', () => {
+          if (isNode) return;
+          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', () => {
+          if (isNode) return;
+          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(() => {
+             if (isNode) return;
+             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(() => {
+             if (isNode) return;
+             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(() => {
+             if (isNode) return;
+             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(() => {
+           if (isNode) return;
+           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 {
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
+}
+
+@Component({
+  selector: 'form-group-comp',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="event=$event">
+      <input type="text" formControlName="login">
+    </form>`
+})
+export class FormGroupComp {
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  myGroup !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  event !: Event;
+}
+
+@Component({
+  selector: 'form-control-number-input',
+  template: `<input type="number" [formControl]="control">`
+})
+class FormControlNumberInput {
+  // TODO(issue/24571): remove '!'.
+  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}|null = {};
+  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 {
+  // TODO(issue/24571): remove '!'.
+  selectedCities !: any[];
+  cities: any[] = [];
+}
+
+@Component({
+  selector: 'form-control-range-input',
+  template: `<input type="range" [formControl]="control">`
+})
+class FormControlRangeInput {
+  // TODO(issue/24571): remove '!'.
+  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 {
+  // TODO(issue/24571): remove '!'.
+  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 {
+  // TODO(issue/24571): remove '!'.
+  food !: string;
+  // TODO(issue/24571): remove '!'.
+  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;
+  // TODO(issue/24571): remove '!'.
+  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();
+  // TODO(issue/24571): remove '!'.
+  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 {
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+}
+
+@Component({
+  selector: 'wrapped-value-form',
+  template: `
+    <div [formGroup]="form">
+      <input type="text" formControlName="login" wrapped-value>
+    </div>`
+})
+class WrappedValueForm {
+  // TODO(issue/24571): remove '!'.
+  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 {
+  // TODO(issue/24571): remove '!'.
+  model !: string;
+  @Input('disabled') isDisabled: boolean = false;
+  // TODO(issue/24571): remove '!'.
+  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 {
+  // TODO(issue/24571): remove '!'.
+  name !: string;
+  isDisabled = false;
+}
diff --git a/packages/forms/tsconfig-build.json b/packages/forms/tsconfig-build.json
new file mode 100644
index 000000000000..d766f005fef0
--- /dev/null
+++ b/packages/forms/tsconfig-build.json
@@ -0,0 +1,31 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/core/testing": ["../../dist/packages/core/testing"],
+      "@angular/common": ["../../dist/packages/common"],
+      "@angular/common/testing": ["../../dist/packages/common/testing"],
+      "@angular/compiler": ["../../dist/packages/compiler"],
+      "@angular/compiler/testing": ["../../dist/packages/compiler/testing"],
+      "@angular/platform-browser": ["../../dist/packages/platform-browser"]
+    },
+    "outDir": "../../dist/packages/forms"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "forms.js",
+    "flatModuleId": "@angular/forms"
+  }
+}
diff --git a/packages/goog.d.ts b/packages/goog.d.ts
new file mode 100644
index 000000000000..69473ca3d3b5
--- /dev/null
+++ b/packages/goog.d.ts
@@ -0,0 +1,24 @@
+/**
+ * @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
+ */
+
+
+/**
+ * Typings for google closure.
+ */
+declare namespace goog {
+  /**
+   * Note: Don't use this to check for advanced compilation,
+   * as it is sometimes true.
+   */
+  export const DEBUG: boolean;
+}
+
+/**
+ * Use this flag to check for advanced compilation.
+ */
+declare const COMPILED: boolean;
diff --git a/packages/http/BUILD.bazel b/packages/http/BUILD.bazel
new file mode 100644
index 000000000000..66b8230f1dee
--- /dev/null
+++ b/packages/http/BUILD.bazel
@@ -0,0 +1,36 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "http",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/http",
+    deps = [
+        "//packages/core",
+        "//packages/platform-browser",
+        "@rxjs",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "//packages/http/testing:package.json",
+    ],
+    entry_point = "packages/http/index.js",
+    tags = [
+        "ivy-jit",
+        "release-with-framework",
+    ],
+    deps = [
+        ":http",
+        "//packages/http/testing",
+    ],
+)
diff --git a/packages/http/index.ts b/packages/http/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/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';
diff --git a/packages/http/package.json b/packages/http/package.json
new file mode 100644
index 000000000000..eac22ac7a31c
--- /dev/null
+++ b/packages/http/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@angular/http",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - the http service",
+  "main": "./bundles/http.umd.js",
+  "module": "./fesm5/http.js",
+  "es2015": "./fesm2015/http.js",
+  "esm5": "./esm5/http.js",
+  "esm2015": "./esm2015/http.js",
+  "fesm5": "./fesm5/http.js",
+  "fesm2015": "./fesm2015/http.js",
+  "typings": "./http.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "rxjs": "^6.0.0",
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/http/public_api.ts b/packages/http/public_api.ts
new file mode 100644
index 000000000000..778427176d02
--- /dev/null
+++ b/packages/http/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/index';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/http/rollup.config.js b/packages/http/rollup.config.js
new file mode 100644
index 000000000000..2557452ef94e
--- /dev/null
+++ b/packages/http/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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  'rxjs': 'rxjs'
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/http/fesm5/http.js',
+  dest: '../../dist/packages-dist/http/bundles/http.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/http'},
+  moduleName: 'ng.http',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/http/src/backends/browser_jsonp.ts b/packages/http/src/backends/browser_jsonp.ts
new file mode 100644
index 000000000000..d5112c7a886f
--- /dev/null
+++ b/packages/http/src/backends/browser_jsonp.ts
@@ -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
+ */
+
+import {Injectable} from '@angular/core';
+
+let _nextRequestId = 0;
+export const JSONP_HOME = '__ng_jsonp__';
+let _jsonpConnections: {[key: string]: any}|null = null;
+
+function _getJsonpConnections(): {[key: string]: any} {
+  const w: {[key: string]: any} = typeof window == 'object' ? window : {};
+  if (_jsonpConnections === null) {
+    _jsonpConnections = w[JSONP_HOME] = {};
+  }
+  return _jsonpConnections;
+}
+
+// Make sure not to evaluate this in a non-browser environment!
+@Injectable()
+export class BrowserJsonp {
+  // Construct a <script> element with the specified URL
+  build(url: string): any {
+    const node = document.createElement('script');
+    node.src = url;
+    return node;
+  }
+
+  nextRequestID(): string { return `__req${_nextRequestId++}`; }
+
+  requestCallback(id: string): string { return `${JSONP_HOME}.${id}.finished`; }
+
+  exposeConnection(id: string, connection: any) {
+    const connections = _getJsonpConnections();
+    connections[id] = connection;
+  }
+
+  removeConnection(id: string) {
+    const connections = _getJsonpConnections();
+    connections[id] = null;
+  }
+
+  // Attach the <script> element to the DOM
+  send(node: any) { document.body.appendChild(<Node>(node)); }
+
+  // Remove <script> element from the DOM
+  cleanup(node: any) {
+    if (node.parentNode) {
+      node.parentNode.removeChild(<Node>(node));
+    }
+  }
+}
diff --git a/packages/http/src/backends/browser_xhr.ts b/packages/http/src/backends/browser_xhr.ts
new file mode 100644
index 000000000000..00ae0e60a0d7
--- /dev/null
+++ b/packages/http/src/backends/browser_xhr.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 {Injectable} from '@angular/core';
+
+/**
+ * A backend for http that uses the `XMLHttpRequest` browser API.
+ *
+ * Take care not to evaluate this in non-browser contexts.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+@Injectable()
+export class BrowserXhr {
+  constructor() {}
+  build(): any { return <any>(new XMLHttpRequest()); }
+}
diff --git a/packages/http/src/backends/jsonp_backend.ts b/packages/http/src/backends/jsonp_backend.ts
new file mode 100644
index 000000000000..85a015cb3d1f
--- /dev/null
+++ b/packages/http/src/backends/jsonp_backend.ts
@@ -0,0 +1,154 @@
+/**
+ * @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, Observer} from 'rxjs';
+
+import {ResponseOptions} from '../base_response_options';
+import {ReadyState, RequestMethod, ResponseType} from '../enums';
+import {Connection, ConnectionBackend} from '../interfaces';
+import {Request} from '../static_request';
+import {Response} from '../static_response';
+
+import {BrowserJsonp} from './browser_jsonp';
+
+const JSONP_ERR_NO_CALLBACK = 'JSONP injected script did not invoke callback.';
+const JSONP_ERR_WRONG_METHOD = 'JSONP requests must use GET request method.';
+
+/**
+ * Base class for an in-flight JSONP request.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export class JSONPConnection implements Connection {
+  // TODO(issue/24571): remove '!'.
+  private _id !: string;
+  // TODO(issue/24571): remove '!'.
+  private _script !: Element;
+  private _responseData: any;
+  private _finished: boolean = false;
+
+  /**
+   * The {@link ReadyState} of this request.
+   */
+  // TODO(issue/24571): remove '!'.
+  readyState !: ReadyState;
+
+  /**
+   * The outgoing HTTP request.
+   */
+  request: Request;
+
+  /**
+   * An observable that completes with the response, when the request is finished.
+   */
+  response: Observable<Response>;
+
+  /** @internal */
+  constructor(
+      req: Request, private _dom: BrowserJsonp, private baseResponseOptions?: ResponseOptions) {
+    if (req.method !== RequestMethod.Get) {
+      throw new TypeError(JSONP_ERR_WRONG_METHOD);
+    }
+    this.request = req;
+    this.response = new Observable<Response>((responseObserver: Observer<Response>) => {
+
+      this.readyState = ReadyState.Loading;
+      const id = this._id = _dom.nextRequestID();
+
+      _dom.exposeConnection(id, this);
+
+      // Workaround Dart
+      // url = url.replace(/=JSONP_CALLBACK(&|$)/, `generated method`);
+      const callback = _dom.requestCallback(this._id);
+      let url: string = req.url;
+      if (url.indexOf('=JSONP_CALLBACK&') > -1) {
+        url = url.replace('=JSONP_CALLBACK&', `=${callback}&`);
+      } else if (url.lastIndexOf('=JSONP_CALLBACK') === url.length - '=JSONP_CALLBACK'.length) {
+        url = url.substring(0, url.length - '=JSONP_CALLBACK'.length) + `=${callback}`;
+      }
+
+      const script = this._script = _dom.build(url);
+
+      const onLoad = (event: Event) => {
+        if (this.readyState === ReadyState.Cancelled) return;
+        this.readyState = ReadyState.Done;
+        _dom.cleanup(script);
+        if (!this._finished) {
+          let responseOptions =
+              new ResponseOptions({body: JSONP_ERR_NO_CALLBACK, type: ResponseType.Error, url});
+          if (baseResponseOptions) {
+            responseOptions = baseResponseOptions.merge(responseOptions);
+          }
+          responseObserver.error(new Response(responseOptions));
+          return;
+        }
+
+        let responseOptions = new ResponseOptions({body: this._responseData, url});
+        if (this.baseResponseOptions) {
+          responseOptions = this.baseResponseOptions.merge(responseOptions);
+        }
+
+        responseObserver.next(new Response(responseOptions));
+        responseObserver.complete();
+      };
+
+      const onError = (error: Error) => {
+        if (this.readyState === ReadyState.Cancelled) return;
+        this.readyState = ReadyState.Done;
+        _dom.cleanup(script);
+        let responseOptions = new ResponseOptions({body: error.message, type: ResponseType.Error});
+        if (baseResponseOptions) {
+          responseOptions = baseResponseOptions.merge(responseOptions);
+        }
+        responseObserver.error(new Response(responseOptions));
+      };
+
+      script.addEventListener('load', onLoad);
+      script.addEventListener('error', onError);
+
+      _dom.send(script);
+
+      return () => {
+        this.readyState = ReadyState.Cancelled;
+        script.removeEventListener('load', onLoad);
+        script.removeEventListener('error', onError);
+        this._dom.cleanup(script);
+      };
+    });
+  }
+
+  /**
+   * Callback called when the JSONP request completes, to notify the application
+   * of the new data.
+   */
+  finished(data?: any) {
+    // Don't leak connections
+    this._finished = true;
+    this._dom.removeConnection(this._id);
+    if (this.readyState === ReadyState.Cancelled) return;
+    this._responseData = data;
+  }
+}
+
+/**
+ * A {@link ConnectionBackend} that uses the JSONP strategy of making requests.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+@Injectable()
+export class JSONPBackend extends ConnectionBackend {
+  /** @internal */
+  constructor(private _browserJSONP: BrowserJsonp, private _baseResponseOptions: ResponseOptions) {
+    super();
+  }
+
+  createConnection(request: Request): JSONPConnection {
+    return new JSONPConnection(request, this._browserJSONP, this._baseResponseOptions);
+  }
+}
diff --git a/packages/http/src/backends/xhr_backend.ts b/packages/http/src/backends/xhr_backend.ts
new file mode 100644
index 000000000000..44cda08ad91c
--- /dev/null
+++ b/packages/http/src/backends/xhr_backend.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 {Injectable} from '@angular/core';
+import {ɵgetDOM as getDOM} from '@angular/platform-browser';
+import {Observable, Observer} from 'rxjs';
+import {ResponseOptions} from '../base_response_options';
+import {ContentType, ReadyState, RequestMethod, ResponseContentType, ResponseType} from '../enums';
+import {Headers} from '../headers';
+import {getResponseURL, isSuccess} from '../http_utils';
+import {Connection, ConnectionBackend, XSRFStrategy} from '../interfaces';
+import {Request} from '../static_request';
+import {Response} from '../static_response';
+import {BrowserXhr} from './browser_xhr';
+
+const XSSI_PREFIX = /^\)\]\}',?\n/;
+
+/**
+ * Creates connections using `XMLHttpRequest`. Given a fully-qualified
+ * request, an `XHRConnection` will immediately create an `XMLHttpRequest` object and send the
+ * request.
+ *
+ * This class would typically not be created or interacted with directly inside applications, though
+ * the {@link MockConnection} may be interacted with in tests.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export class XHRConnection implements Connection {
+  request: Request;
+  /**
+   * Response {@link EventEmitter} which emits a single {@link Response} value on load event of
+   * `XMLHttpRequest`.
+   */
+  response: Observable<Response>;
+  // TODO(issue/24571): remove '!'.
+  readyState !: ReadyState;
+  constructor(req: Request, browserXHR: BrowserXhr, baseResponseOptions?: ResponseOptions) {
+    this.request = req;
+    this.response = new Observable<Response>((responseObserver: Observer<Response>) => {
+      const _xhr: XMLHttpRequest = browserXHR.build();
+      _xhr.open(RequestMethod[req.method].toUpperCase(), req.url);
+      if (req.withCredentials != null) {
+        _xhr.withCredentials = req.withCredentials;
+      }
+      // load event handler
+      const onLoad = () => {
+        // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
+        let status: number = _xhr.status === 1223 ? 204 : _xhr.status;
+
+        let body: any = null;
+
+        // HTTP 204 means no content
+        if (status !== 204) {
+          // responseText is the old-school way of retrieving response (supported by IE8 & 9)
+          // response/responseType properties were introduced in ResourceLoader Level2 spec
+          // (supported by IE10)
+          body = (typeof _xhr.response === 'undefined') ? _xhr.responseText : _xhr.response;
+
+          // Implicitly strip a potential XSSI prefix.
+          if (typeof body === 'string') {
+            body = body.replace(XSSI_PREFIX, '');
+          }
+        }
+
+        // fix status code when it is 0 (0 status is undocumented).
+        // Occurs when accessing file resources or on Android 4.1 stock browser
+        // while retrieving files from application cache.
+        if (status === 0) {
+          status = body ? 200 : 0;
+        }
+
+        const headers: Headers = Headers.fromResponseHeaderString(_xhr.getAllResponseHeaders());
+        // IE 9 does not provide the way to get URL of response
+        const url = getResponseURL(_xhr) || req.url;
+        const statusText: string = _xhr.statusText || 'OK';
+
+        let responseOptions = new ResponseOptions({body, status, headers, statusText, url});
+        if (baseResponseOptions != null) {
+          responseOptions = baseResponseOptions.merge(responseOptions);
+        }
+        const response = new Response(responseOptions);
+        response.ok = isSuccess(status);
+        if (response.ok) {
+          responseObserver.next(response);
+          // TODO(gdi2290): defer complete if array buffer until done
+          responseObserver.complete();
+          return;
+        }
+        responseObserver.error(response);
+      };
+      // error event handler
+      const onError = (err: ErrorEvent) => {
+        let responseOptions = new ResponseOptions({
+          body: err,
+          type: ResponseType.Error,
+          status: _xhr.status,
+          statusText: _xhr.statusText,
+        });
+        if (baseResponseOptions != null) {
+          responseOptions = baseResponseOptions.merge(responseOptions);
+        }
+        responseObserver.error(new Response(responseOptions));
+      };
+
+      this.setDetectedContentType(req, _xhr);
+
+      if (req.headers == null) {
+        req.headers = new Headers();
+      }
+      if (!req.headers.has('Accept')) {
+        req.headers.append('Accept', 'application/json, text/plain, */*');
+      }
+      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) {
+        switch (req.responseType) {
+          case ResponseContentType.ArrayBuffer:
+            _xhr.responseType = 'arraybuffer';
+            break;
+          case ResponseContentType.Json:
+            _xhr.responseType = 'json';
+            break;
+          case ResponseContentType.Text:
+            _xhr.responseType = 'text';
+            break;
+          case ResponseContentType.Blob:
+            _xhr.responseType = 'blob';
+            break;
+          default:
+            throw new Error('The selected responseType is not supported');
+        }
+      }
+
+      _xhr.addEventListener('load', onLoad);
+      _xhr.addEventListener('error', onError);
+
+      _xhr.send(this.request.getBody());
+
+      return () => {
+        _xhr.removeEventListener('load', onLoad);
+        _xhr.removeEventListener('error', onError);
+        _xhr.abort();
+      };
+    });
+  }
+
+  setDetectedContentType(req: any /** TODO Request */, _xhr: any /** XMLHttpRequest */) {
+    // Skip if a custom Content-Type header is provided
+    if (req.headers != null && req.headers.get('Content-Type') != null) {
+      return;
+    }
+
+    // Set the detected content type
+    switch (req.contentType) {
+      case ContentType.NONE:
+        break;
+      case ContentType.JSON:
+        _xhr.setRequestHeader('content-type', 'application/json');
+        break;
+      case ContentType.FORM:
+        _xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
+        break;
+      case ContentType.TEXT:
+        _xhr.setRequestHeader('content-type', 'text/plain');
+        break;
+      case ContentType.BLOB:
+        const blob = req.blob();
+        if (blob.type) {
+          _xhr.setRequestHeader('content-type', blob.type);
+        }
+        break;
+    }
+  }
+}
+
+/**
+ * `XSRFConfiguration` sets up Cross Site Request Forgery (XSRF) protection for the application
+ * using a cookie. See https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)
+ * for more information on XSRF.
+ *
+ * Applications can configure custom cookie and header names by binding an instance of this class
+ * with different `cookieName` and `headerName` values. See the main HTTP documentation for more
+ * details.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export class CookieXSRFStrategy implements XSRFStrategy {
+  constructor(
+      private _cookieName: string = 'XSRF-TOKEN', private _headerName: string = 'X-XSRF-TOKEN') {}
+
+  configureRequest(req: Request): void {
+    const xsrfToken = getDOM().getCookie(this._cookieName);
+    if (xsrfToken) {
+      req.headers.set(this._headerName, xsrfToken);
+    }
+  }
+}
+
+/**
+ * Creates {@link XHRConnection} instances.
+ *
+ * This class would typically not be used by end users, but could be
+ * overridden if a different backend implementation should be used,
+ * such as in a node backend.
+ *
+ * ### Example
+ *
+ * ```
+ * import {Http, MyNodeBackend, HTTP_PROVIDERS, BaseRequestOptions} from '@angular/http';
+ * @Component({
+ *   viewProviders: [
+ *     HTTP_PROVIDERS,
+ *     {provide: Http, useFactory: (backend, options) => {
+ *       return new Http(backend, options);
+ *     }, deps: [MyNodeBackend, BaseRequestOptions]}]
+ * })
+ * class MyComponent {
+ *   constructor(http:Http) {
+ *     http.request('people.json').subscribe(res => this.people = res.json());
+ *   }
+ * }
+ * ```
+ * @deprecated see https://angular.io/guide/http
+ */
+@Injectable()
+export class XHRBackend implements ConnectionBackend {
+  constructor(
+      private _browserXHR: BrowserXhr, private _baseResponseOptions: ResponseOptions,
+      private _xsrfStrategy: XSRFStrategy) {}
+
+  createConnection(request: Request): XHRConnection {
+    this._xsrfStrategy.configureRequest(request);
+    return new XHRConnection(request, this._browserXHR, this._baseResponseOptions);
+  }
+}
diff --git a/packages/http/src/base_request_options.ts b/packages/http/src/base_request_options.ts
new file mode 100644
index 000000000000..e0acd15062ed
--- /dev/null
+++ b/packages/http/src/base_request_options.ts
@@ -0,0 +1,208 @@
+/**
+ * @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 {RequestMethod, ResponseContentType} from './enums';
+import {Headers} from './headers';
+import {normalizeMethodName} from './http_utils';
+import {RequestOptionsArgs} from './interfaces';
+import {URLSearchParams} from './url_search_params';
+
+
+/**
+ * Creates a request options object to be optionally provided when instantiating a
+ * {@link Request}.
+ *
+ * This class is based on the `RequestInit` description in the [Fetch
+ * Spec](https://fetch.spec.whatwg.org/#requestinit).
+ *
+ * All values are null by default. Typical defaults can be found in the {@link BaseRequestOptions}
+ * class, which sub-classes `RequestOptions`.
+ *
+ * ```typescript
+ * import {RequestOptions, Request, RequestMethod} from '@angular/http';
+ *
+ * const options = new RequestOptions({
+ *   method: RequestMethod.Post,
+ *   url: 'https://google.com'
+ * });
+ * const req = new Request(options);
+ * console.log('req.method:', RequestMethod[req.method]); // Post
+ * console.log('options.url:', options.url); // https://google.com
+ * ```
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export class RequestOptions {
+  /**
+   * Http method with which to execute a {@link Request}.
+   * Acceptable methods are defined in the {@link RequestMethod} enum.
+   */
+  method: RequestMethod|string|null;
+  /**
+   * {@link Headers} to be attached to a {@link Request}.
+   */
+  headers: Headers|null;
+  /**
+   * Body to be used when creating a {@link Request}.
+   */
+  body: any;
+  /**
+   * Url with which to perform a {@link Request}.
+   */
+  url: string|null;
+  /**
+   * Search parameters to be included in a {@link Request}.
+   */
+  params: URLSearchParams;
+  /**
+   * @deprecated from 4.0.0. Use params instead.
+   */
+  get search(): URLSearchParams { return this.params; }
+  /**
+   * @deprecated from 4.0.0. Use params instead.
+   */
+  set search(params: URLSearchParams) { this.params = params; }
+  /**
+   * Enable use credentials for a {@link Request}.
+   */
+  withCredentials: boolean|null;
+  /*
+   * Select a buffer to store the response, such as ArrayBuffer, Blob, Json (or Document)
+   */
+  responseType: ResponseContentType|null;
+
+  // TODO(Dzmitry): remove search when this.search is removed
+  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;
+    this.url = url != null ? url : null;
+    this.params = this._mergeSearchParams(params || search);
+    this.withCredentials = withCredentials != null ? withCredentials : null;
+    this.responseType = responseType != null ? responseType : null;
+  }
+
+  /**
+   * Creates a copy of the `RequestOptions` instance, using the optional input as values to override
+   * existing values. This method will not change the values of the instance on which it is being
+   * called.
+   *
+   * Note that `headers` and `search` will override existing values completely if present in
+   * the `options` object. If these values should be merged, it should be done prior to calling
+   * `merge` on the `RequestOptions` instance.
+   *
+   * ```typescript
+   * import {RequestOptions, Request, RequestMethod} from '@angular/http';
+   *
+   * const options = new RequestOptions({
+   *   method: RequestMethod.Post
+   * });
+   * const req = new Request(options.merge({
+   *   url: 'https://google.com'
+   * }));
+   * console.log('req.method:', RequestMethod[req.method]); // Post
+   * console.log('options.url:', options.url); // null
+   * console.log('req.url:', req.url); // https://google.com
+   * ```
+   */
+  merge(options?: RequestOptionsArgs): RequestOptions {
+    return new RequestOptions({
+      method: options && options.method != null ? options.method : this.method,
+      headers: options && options.headers != null ? options.headers : new Headers(this.headers),
+      body: options && options.body != null ? options.body : this.body,
+      url: options && options.url != null ? options.url : this.url,
+      params: options && this._mergeSearchParams(options.params || options.search),
+      withCredentials: options && options.withCredentials != null ? options.withCredentials :
+                                                                    this.withCredentials,
+      responseType: options && options.responseType != null ? options.responseType :
+                                                              this.responseType
+    });
+  }
+
+  private _mergeSearchParams(params?: string|URLSearchParams|{[key: string]: any | any[]}|
+                             null): URLSearchParams {
+    if (!params) return this.params;
+
+    if (params instanceof URLSearchParams) {
+      return params.clone();
+    }
+
+    if (typeof params === 'string') {
+      return new URLSearchParams(params);
+    }
+
+    return this._parseParams(params);
+  }
+
+  private _parseParams(objParams: {[key: string]: any | any[]} = {}): URLSearchParams {
+    const params = new URLSearchParams();
+    Object.keys(objParams).forEach((key: string) => {
+      const value: any|any[] = objParams[key];
+      if (Array.isArray(value)) {
+        value.forEach((item: any) => this._appendParam(key, item, params));
+      } else {
+        this._appendParam(key, value, params);
+      }
+    });
+    return params;
+  }
+
+  private _appendParam(key: string, value: any, params: URLSearchParams): void {
+    if (typeof value !== 'string') {
+      value = JSON.stringify(value);
+    }
+    params.append(key, value);
+  }
+}
+
+/**
+ * Subclass of {@link RequestOptions}, with default values.
+ *
+ * Default values:
+ *  * method: {@link RequestMethod RequestMethod.Get}
+ *  * headers: empty {@link Headers} object
+ *
+ * This class could be extended and bound to the {@link RequestOptions} class
+ * when configuring an {@link Injector}, in order to override the default options
+ * used by {@link Http} to create and send {@link Request Requests}.
+ *
+ * ```typescript
+ * import {BaseRequestOptions, RequestOptions} from '@angular/http';
+ *
+ * class MyOptions extends BaseRequestOptions {
+ *   search: string = 'coreTeam=true';
+ * }
+ *
+ * {provide: RequestOptions, useClass: MyOptions};
+ * ```
+ *
+ * The options could also be extended when manually creating a {@link Request}
+ * object.
+ *
+ * ```
+ * import {BaseRequestOptions, Request, RequestMethod} from '@angular/http';
+ *
+ * const options = new BaseRequestOptions();
+ * const req = new Request(options.merge({
+ *   method: RequestMethod.Post,
+ *   url: 'https://google.com'
+ * }));
+ * console.log('req.method:', RequestMethod[req.method]); // Post
+ * console.log('options.url:', options.url); // null
+ * console.log('req.url:', req.url); // https://google.com
+ * ```
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+@Injectable()
+export class BaseRequestOptions extends RequestOptions {
+  constructor() { super({method: RequestMethod.Get, headers: new Headers()}); }
+}
diff --git a/packages/http/src/base_response_options.ts b/packages/http/src/base_response_options.ts
new file mode 100644
index 000000000000..6c82cb62d7f8
--- /dev/null
+++ b/packages/http/src/base_response_options.ts
@@ -0,0 +1,166 @@
+/**
+ * @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 {ResponseType} from './enums';
+import {Headers} from './headers';
+import {ResponseOptionsArgs} from './interfaces';
+
+
+/**
+ * Creates a response options object to be optionally provided when instantiating a
+ * {@link Response}.
+ *
+ * This class is based on the `ResponseInit` description in the [Fetch
+ * Spec](https://fetch.spec.whatwg.org/#responseinit).
+ *
+ * All values are null by default. Typical defaults can be found in the
+ * {@link BaseResponseOptions} class, which sub-classes `ResponseOptions`.
+ *
+ * This class may be used in tests to build {@link Response Responses} for
+ * mock responses (see {@link MockBackend}).
+ *
+ * ### Example
+ *
+ * ```typescript
+ * import {ResponseOptions, Response} from '@angular/http';
+ *
+ * var options = new ResponseOptions({
+ *   body: '{"name":"Jeff"}'
+ * });
+ * var res = new Response(options);
+ *
+ * console.log('res.json():', res.json()); // Object {name: "Jeff"}
+ * ```
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export class ResponseOptions {
+  // TODO: FormData | Blob
+  /**
+   * String, Object, ArrayBuffer or Blob representing the body of the {@link Response}.
+   */
+  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|null;
+  /**
+   * Response {@link Headers headers}
+   */
+  headers: Headers|null;
+  /**
+   * @internal
+   */
+  statusText: string|null;
+  /**
+   * @internal
+   */
+  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;
+    this.statusText = statusText != null ? statusText : null;
+    this.type = type != null ? type : null;
+    this.url = url != null ? url : null;
+  }
+
+  /**
+   * Creates a copy of the `ResponseOptions` instance, using the optional input as values to
+   * override
+   * existing values. This method will not change the values of the instance on which it is being
+   * called.
+   *
+   * This may be useful when sharing a base `ResponseOptions` object inside tests,
+   * where certain properties may change from test to test.
+   *
+   * ### Example
+   *
+   * ```typescript
+   * import {ResponseOptions, Response} from '@angular/http';
+   *
+   * var options = new ResponseOptions({
+   *   body: {name: 'Jeff'}
+   * });
+   * var res = new Response(options.merge({
+   *   url: 'https://google.com'
+   * }));
+   * console.log('options.url:', options.url); // null
+   * console.log('res.json():', res.json()); // Object {name: "Jeff"}
+   * console.log('res.url:', res.url); // https://google.com
+   * ```
+   */
+  merge(options?: ResponseOptionsArgs): ResponseOptions {
+    return new ResponseOptions({
+      body: options && options.body != null ? options.body : this.body,
+      status: options && options.status != null ? options.status : this.status,
+      headers: options && options.headers != null ? options.headers : this.headers,
+      statusText: options && options.statusText != null ? options.statusText : this.statusText,
+      type: options && options.type != null ? options.type : this.type,
+      url: options && options.url != null ? options.url : this.url,
+    });
+  }
+}
+
+/**
+ * Subclass of {@link ResponseOptions}, with default values.
+ *
+ * Default values:
+ *  * status: 200
+ *  * headers: empty {@link Headers} object
+ *
+ * This class could be extended and bound to the {@link ResponseOptions} class
+ * when configuring an {@link Injector}, in order to override the default options
+ * used by {@link Http} to create {@link Response Responses}.
+ *
+ * ### Example
+ *
+ * ```typescript
+ * import {provide} from '@angular/core';
+ * import {bootstrap} from '@angular/platform-browser/browser';
+ * import {HTTP_PROVIDERS, Headers, Http, BaseResponseOptions, ResponseOptions} from
+ * '@angular/http';
+ * import {App} from './myapp';
+ *
+ * class MyOptions extends BaseResponseOptions {
+ *   headers:Headers = new Headers({network: 'github'});
+ * }
+ *
+ * bootstrap(App, [HTTP_PROVIDERS, {provide: ResponseOptions, useClass: MyOptions}]);
+ * ```
+ *
+ * The options could also be extended when manually creating a {@link Response}
+ * object.
+ *
+ * ### Example
+ *
+ * ```
+ * import {BaseResponseOptions, Response} from '@angular/http';
+ *
+ * var options = new BaseResponseOptions();
+ * var res = new Response(options.merge({
+ *   body: 'Angular',
+ *   headers: new Headers({framework: 'angular'})
+ * }));
+ * console.log('res.headers.get("framework"):', res.headers.get('framework')); // angular
+ * console.log('res.text():', res.text()); // Angular;
+ * ```
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+@Injectable()
+export class BaseResponseOptions extends ResponseOptions {
+  constructor() {
+    super({status: 200, statusText: 'Ok', type: ResponseType.Default, headers: new Headers()});
+  }
+}
diff --git a/packages/http/src/body.ts b/packages/http/src/body.ts
new file mode 100644
index 000000000000..4b091fb5b981
--- /dev/null
+++ b/packages/http/src/body.ts
@@ -0,0 +1,104 @@
+/**
+ * @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 {stringToArrayBuffer} from './http_utils';
+import {URLSearchParams} from './url_search_params';
+
+
+/**
+ * HTTP request body used by both {@link Request} and {@link Response}
+ * https://fetch.spec.whatwg.org/#body
+ */
+export abstract class Body {
+  /**
+   * @internal
+   */
+  protected _body: any;
+
+  /**
+   * Attempts to return body as parsed `JSON` object, or raises an exception.
+   */
+  json(): any {
+    if (typeof this._body === 'string') {
+      return JSON.parse(<string>this._body);
+    }
+
+    if (this._body instanceof ArrayBuffer) {
+      return JSON.parse(this.text());
+    }
+
+    return this._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(encodingHint: 'legacy'|'iso-8859' = 'legacy'): string {
+    if (this._body instanceof URLSearchParams) {
+      return this._body.toString();
+    }
+
+    if (this._body instanceof ArrayBuffer) {
+      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) {
+      return '';
+    }
+
+    if (typeof this._body === 'object') {
+      return JSON.stringify(this._body, null, 2);
+    }
+
+    return this._body.toString();
+  }
+
+  /**
+   * Return the body as an ArrayBuffer
+   */
+  arrayBuffer(): ArrayBuffer {
+    if (this._body instanceof ArrayBuffer) {
+      return <ArrayBuffer>this._body;
+    }
+
+    return stringToArrayBuffer(this.text());
+  }
+
+  /**
+    * Returns the request's body as a Blob, assuming that body exists.
+    */
+  blob(): Blob {
+    if (this._body instanceof Blob) {
+      return <Blob>this._body;
+    }
+
+    if (this._body instanceof ArrayBuffer) {
+      return new Blob([this._body]);
+    }
+
+    throw new Error('The request body isn\'t either a blob or an array buffer');
+  }
+}
diff --git a/packages/http/src/enums.ts b/packages/http/src/enums.ts
new file mode 100644
index 000000000000..4152cbe3a186
--- /dev/null
+++ b/packages/http/src/enums.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
+ */
+
+/**
+ * Supported http methods.
+ * @deprecated see https://angular.io/guide/http
+ */
+export enum RequestMethod {
+  Get,
+  Post,
+  Put,
+  Delete,
+  Options,
+  Head,
+  Patch
+}
+
+/**
+ * All possible states in which a connection can be, based on
+ * [States](http://www.w3.org/TR/XMLHttpRequest/#states) from the `XMLHttpRequest` spec, but with an
+ * additional "CANCELLED" state.
+ * @deprecated see https://angular.io/guide/http
+ */
+export enum ReadyState {
+  Unsent,
+  Open,
+  HeadersReceived,
+  Loading,
+  Done,
+  Cancelled
+}
+
+/**
+ * Acceptable response types to be associated with a {@link Response}, based on
+ * [ResponseType](https://fetch.spec.whatwg.org/#responsetype) from the Fetch spec.
+ * @deprecated see https://angular.io/guide/http
+ */
+export enum ResponseType {
+  Basic,
+  Cors,
+  Default,
+  Error,
+  Opaque
+}
+
+/**
+ * Supported content type to be automatically associated with a {@link Request}.
+ * @deprecated see https://angular.io/guide/http
+ */
+export enum ContentType {
+  NONE,
+  JSON,
+  FORM,
+  FORM_DATA,
+  TEXT,
+  BLOB,
+  ARRAY_BUFFER
+}
+
+/**
+ * Define which buffer to use to store the response
+ * @deprecated see https://angular.io/guide/http
+ */
+export enum ResponseContentType {
+  Text,
+  Json,
+  ArrayBuffer,
+  Blob
+}
diff --git a/packages/http/src/headers.ts b/packages/http/src/headers.ts
new file mode 100644
index 000000000000..9374bcbf8a16
--- /dev/null
+++ b/packages/http/src/headers.ts
@@ -0,0 +1,186 @@
+/**
+ * @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
+ */
+
+/**
+ * Polyfill for [Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers/Headers), as
+ * specified in the [Fetch Spec](https://fetch.spec.whatwg.org/#headers-class).
+ *
+ * The only known difference between this `Headers` implementation and the spec is the
+ * lack of an `entries` method.
+ *
+ * ### Example
+ *
+ * ```
+ * import {Headers} from '@angular/http';
+ *
+ * var firstHeaders = new Headers();
+ * firstHeaders.append('Content-Type', 'image/jpeg');
+ * console.log(firstHeaders.get('Content-Type')) //'image/jpeg'
+ *
+ * // Create headers from Plain Old JavaScript Object
+ * var secondHeaders = new Headers({
+ *   'X-My-Custom-Header': 'Angular'
+ * });
+ * console.log(secondHeaders.get('X-My-Custom-Header')); //'Angular'
+ *
+ * var thirdHeaders = new Headers(secondHeaders);
+ * console.log(thirdHeaders.get('X-My-Custom-Header')); //'Angular'
+ * ```
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export class Headers {
+  /** @internal header names are lower case */
+  _headers: Map<string, string[]> = new Map();
+  /** @internal map lower case names to actual names */
+  _normalizedNames: Map<string, string> = new Map();
+
+  // TODO(vicb): any -> string|string[]
+  constructor(headers?: Headers|{[name: string]: any}|null) {
+    if (!headers) {
+      return;
+    }
+
+    if (headers instanceof Headers) {
+      headers.forEach((values: string[], name: string) => {
+        values.forEach(value => this.append(name, value));
+      });
+      return;
+    }
+
+    Object.keys(headers).forEach((name: string) => {
+      const values: string[] = Array.isArray(headers[name]) ? headers[name] : [headers[name]];
+      this.delete(name);
+      values.forEach(value => this.append(name, value));
+    });
+  }
+
+  /**
+   * Returns a new Headers instance from the given DOMString of Response Headers
+   */
+  static fromResponseHeaderString(headersString: string): Headers {
+    const headers = new Headers();
+
+    headersString.split('\n').forEach(line => {
+      const index = line.indexOf(':');
+      if (index > 0) {
+        const name = line.slice(0, index);
+        const value = line.slice(index + 1).trim();
+        headers.set(name, value);
+      }
+    });
+
+    return headers;
+  }
+
+  /**
+   * Appends a header to existing list of header values for a given header name.
+   */
+  append(name: string, value: string): void {
+    const values = this.getAll(name);
+
+    if (values === null) {
+      this.set(name, value);
+    } else {
+      values.push(value);
+    }
+  }
+
+  /**
+   * Deletes all header values for the given name.
+   */
+  delete (name: string): void {
+    const lcName = name.toLowerCase();
+    this._normalizedNames.delete(lcName);
+    this._headers.delete(lcName);
+  }
+
+  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));
+  }
+
+  /**
+   * Returns first header that matches given name.
+   */
+  get(name: string): string|null {
+    const values = this.getAll(name);
+
+    if (values === null) {
+      return null;
+    }
+
+    return values.length > 0 ? values[0] : null;
+  }
+
+  /**
+   * Checks for existence of header by given name.
+   */
+  has(name: string): boolean { return this._headers.has(name.toLowerCase()); }
+
+  /**
+   * Returns the names of the headers
+   */
+  keys(): string[] { return Array.from(this._normalizedNames.values()); }
+
+  /**
+   * Sets or overrides header value for given name.
+   */
+  set(name: string, value: string|string[]): void {
+    if (Array.isArray(value)) {
+      if (value.length) {
+        this._headers.set(name.toLowerCase(), [value.join(',')]);
+      }
+    } else {
+      this._headers.set(name.toLowerCase(), [value]);
+    }
+    this.mayBeSetNormalizedName(name);
+  }
+
+  /**
+   * Returns values of all headers.
+   */
+  values(): string[][] { return Array.from(this._headers.values()); }
+
+  /**
+   * Returns string of all headers.
+   */
+  // TODO(vicb): returns {[name: string]: string[]}
+  toJSON(): {[name: string]: any} {
+    const serialized: {[name: string]: string[]} = {};
+
+    this._headers.forEach((values: string[], name: string) => {
+      const split: string[] = [];
+      values.forEach(v => split.push(...v.split(',')));
+      serialized[this._normalizedNames.get(name) !] = split;
+    });
+
+    return serialized;
+  }
+
+  /**
+   * Returns list of header values for a given name.
+   */
+  getAll(name: string): string[]|null {
+    return this.has(name) ? this._headers.get(name.toLowerCase()) || null : null;
+  }
+
+  /**
+   * This method is not implemented.
+   */
+  entries() { throw new Error('"entries" method is not implemented on Headers class'); }
+
+  private mayBeSetNormalizedName(name: string): void {
+    const lcName = name.toLowerCase();
+
+    if (!this._normalizedNames.has(lcName)) {
+      this._normalizedNames.set(lcName, name);
+    }
+  }
+}
diff --git a/packages/http/src/http.ts b/packages/http/src/http.ts
new file mode 100644
index 000000000000..529fbdac2b20
--- /dev/null
+++ b/packages/http/src/http.ts
@@ -0,0 +1,228 @@
+/**
+ * @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';
+
+import {BaseRequestOptions, RequestOptions} from './base_request_options';
+import {RequestMethod} from './enums';
+import {ConnectionBackend, RequestArgs, RequestOptionsArgs} from './interfaces';
+import {Request} from './static_request';
+import {Response} from './static_response';
+
+function httpRequest(backend: ConnectionBackend, request: Request): Observable<Response> {
+  return backend.createConnection(request).response;
+}
+
+function mergeOptions(
+    defaultOpts: BaseRequestOptions, providedOpts: RequestOptionsArgs | undefined,
+    method: RequestMethod, url: string): RequestArgs {
+  const newOptions = defaultOpts;
+  if (providedOpts) {
+    // Hack so Dart can used named parameters
+    return newOptions.merge(new RequestOptions({
+      method: providedOpts.method || method,
+      url: providedOpts.url || url,
+      search: providedOpts.search,
+      params: providedOpts.params,
+      headers: providedOpts.headers,
+      body: providedOpts.body,
+      withCredentials: providedOpts.withCredentials,
+      responseType: providedOpts.responseType
+    })) as RequestArgs;
+  }
+
+  return newOptions.merge(new RequestOptions({method, url})) as RequestArgs;
+}
+
+/**
+ * Performs http requests using `XMLHttpRequest` as the default backend.
+ *
+ * `Http` is available as an injectable class, with methods to perform http requests. Calling
+ * `request` returns an `Observable` which will emit a single {@link Response} when a
+ * response is received.
+ *
+ * ### Example
+ *
+ * ```typescript
+ * import {Http, HTTP_PROVIDERS} from '@angular/http';
+ * import {map} from 'rxjs/operators';
+ *
+ * @Component({
+ *   selector: 'http-app',
+ *   viewProviders: [HTTP_PROVIDERS],
+ *   templateUrl: 'people.html'
+ * })
+ * class PeopleComponent {
+ *   constructor(http: Http) {
+ *     http.get('people.json')
+ *       // Call map on the response observable to get the parsed people object
+ *       .pipe(map(res => res.json()))
+ *       // Subscribe to the observable to get the parsed people object and attach it to the
+ *       // component
+ *       .subscribe(people => this.people = people);
+ *   }
+ * }
+ * ```
+ *
+ *
+ * ### Example
+ *
+ * ```
+ * http.get('people.json').subscribe((res:Response) => this.people = res.json());
+ * ```
+ *
+ * The default construct used to perform requests, `XMLHttpRequest`, is abstracted as a "Backend" (
+ * {@link XHRBackend} in this case), which could be mocked with dependency injection by replacing
+ * the {@link XHRBackend} provider, as in the following example:
+ *
+ * ### Example
+ *
+ * ```typescript
+ * import {BaseRequestOptions, Http} from '@angular/http';
+ * import {MockBackend} from '@angular/http/testing';
+ * var injector = Injector.resolveAndCreate([
+ *   BaseRequestOptions,
+ *   MockBackend,
+ *   {provide: Http, useFactory:
+ *       function(backend, defaultOptions) {
+ *         return new Http(backend, defaultOptions);
+ *       },
+ *       deps: [MockBackend, BaseRequestOptions]}
+ * ]);
+ * var http = injector.get(Http);
+ * http.get('request-from-mock-backend.json').subscribe((res:Response) => doSomething(res));
+ * ```
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+@Injectable()
+export class Http {
+  constructor(protected _backend: ConnectionBackend, protected _defaultOptions: RequestOptions) {}
+
+  /**
+   * Performs any type of http request. First argument is required, and can either be a url or
+   * a {@link Request} instance. If the first argument is a url, an optional {@link RequestOptions}
+   * object can be provided as the 2nd argument. The options object will be merged with the values
+   * of {@link BaseRequestOptions} before performing the request.
+   */
+  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
+    let responseObservable: any;
+    if (typeof url === 'string') {
+      responseObservable = httpRequest(
+          this._backend,
+          new Request(mergeOptions(this._defaultOptions, options, RequestMethod.Get, <string>url)));
+    } else if (url instanceof Request) {
+      responseObservable = httpRequest(this._backend, url);
+    } else {
+      throw new Error('First argument must be a url string or Request instance.');
+    }
+    return responseObservable;
+  }
+
+  /**
+   * Performs a request with `get` http method.
+   */
+  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
+    return this.request(
+        new Request(mergeOptions(this._defaultOptions, options, RequestMethod.Get, url)));
+  }
+
+  /**
+   * Performs a request with `post` http method.
+   */
+  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
+    return this.request(new Request(mergeOptions(
+        this._defaultOptions.merge(new RequestOptions({body: body})), options, RequestMethod.Post,
+        url)));
+  }
+
+  /**
+   * Performs a request with `put` http method.
+   */
+  put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
+    return this.request(new Request(mergeOptions(
+        this._defaultOptions.merge(new RequestOptions({body: body})), options, RequestMethod.Put,
+        url)));
+  }
+
+  /**
+   * Performs a request with `delete` http method.
+   */
+  delete (url: string, options?: RequestOptionsArgs): Observable<Response> {
+    return this.request(
+        new Request(mergeOptions(this._defaultOptions, options, RequestMethod.Delete, url)));
+  }
+
+  /**
+   * Performs a request with `patch` http method.
+   */
+  patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
+    return this.request(new Request(mergeOptions(
+        this._defaultOptions.merge(new RequestOptions({body: body})), options, RequestMethod.Patch,
+        url)));
+  }
+
+  /**
+   * Performs a request with `head` http method.
+   */
+  head(url: string, options?: RequestOptionsArgs): Observable<Response> {
+    return this.request(
+        new Request(mergeOptions(this._defaultOptions, options, RequestMethod.Head, url)));
+  }
+
+  /**
+   * Performs a request with `options` http method.
+   */
+  options(url: string, options?: RequestOptionsArgs): Observable<Response> {
+    return this.request(
+        new Request(mergeOptions(this._defaultOptions, options, RequestMethod.Options, url)));
+  }
+}
+
+
+/**
+ * @deprecated see https://angular.io/guide/http
+ */
+@Injectable()
+export class Jsonp extends Http {
+  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
+    super(backend, defaultOptions);
+  }
+
+  /**
+   * Performs any type of http request. First argument is required, and can either be a url or
+   * a {@link Request} instance. If the first argument is a url, an optional {@link RequestOptions}
+   * object can be provided as the 2nd argument. The options object will be merged with the values
+   * of {@link BaseRequestOptions} before performing the request.
+   *
+   * @security Regular XHR is the safest alternative to JSONP for most applications, and is
+   * supported by all current browsers. Because JSONP creates a `<script>` element with
+   * contents retrieved from a remote source, attacker-controlled data introduced by an untrusted
+   * source could expose your application to XSS risks. Data exposed by JSONP may also be
+   * readable by malicious third-party websites. In addition, JSONP introduces potential risk for
+   * future security issues (e.g. content sniffing).  For more detail, see the
+   * [Security Guide](http://g.co/ng/security).
+   */
+  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
+    let responseObservable: any;
+    if (typeof url === 'string') {
+      url =
+          new Request(mergeOptions(this._defaultOptions, options, RequestMethod.Get, <string>url));
+    }
+    if (url instanceof Request) {
+      if (url.method !== RequestMethod.Get) {
+        throw new Error('JSONP requests must use GET request method.');
+      }
+      responseObservable = httpRequest(this._backend, url);
+    } else {
+      throw new Error('First argument must be a url string or Request instance.');
+    }
+    return responseObservable;
+  }
+}
diff --git a/packages/http/src/http_module.ts b/packages/http/src/http_module.ts
new file mode 100644
index 000000000000..89c86e935df9
--- /dev/null
+++ b/packages/http/src/http_module.ts
@@ -0,0 +1,77 @@
+/**
+ * @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
+ * The http module provides services to perform http requests. To get started, see the {@link Http}
+ * class.
+ */
+import {NgModule} from '@angular/core';
+
+import {BrowserJsonp} from './backends/browser_jsonp';
+import {BrowserXhr} from './backends/browser_xhr';
+import {JSONPBackend} from './backends/jsonp_backend';
+import {CookieXSRFStrategy, XHRBackend} from './backends/xhr_backend';
+import {BaseRequestOptions, RequestOptions} from './base_request_options';
+import {BaseResponseOptions, ResponseOptions} from './base_response_options';
+import {Http, Jsonp} from './http';
+import {XSRFStrategy} from './interfaces';
+
+
+export function _createDefaultCookieXSRFStrategy() {
+  return new CookieXSRFStrategy();
+}
+
+export function httpFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions): Http {
+  return new Http(xhrBackend, requestOptions);
+}
+
+export function jsonpFactory(jsonpBackend: JSONPBackend, requestOptions: RequestOptions): Jsonp {
+  return new Jsonp(jsonpBackend, requestOptions);
+}
+
+
+/**
+ * The module that includes http's providers
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+@NgModule({
+  providers: [
+    // TODO(pascal): use factory type annotations once supported in DI
+    // issue: https://github.com/angular/angular/issues/3183
+    {provide: Http, useFactory: httpFactory, deps: [XHRBackend, RequestOptions]},
+    BrowserXhr,
+    {provide: RequestOptions, useClass: BaseRequestOptions},
+    {provide: ResponseOptions, useClass: BaseResponseOptions},
+    XHRBackend,
+    {provide: XSRFStrategy, useFactory: _createDefaultCookieXSRFStrategy},
+  ],
+})
+export class HttpModule {
+}
+
+/**
+ * The module that includes jsonp's providers
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+@NgModule({
+  providers: [
+    // TODO(pascal): use factory type annotations once supported in DI
+    // issue: https://github.com/angular/angular/issues/3183
+    {provide: Jsonp, useFactory: jsonpFactory, deps: [JSONPBackend, RequestOptions]},
+    BrowserJsonp,
+    {provide: RequestOptions, useClass: BaseRequestOptions},
+    {provide: ResponseOptions, useClass: BaseResponseOptions},
+    JSONPBackend,
+  ],
+})
+export class JsonpModule {
+}
diff --git a/packages/http/src/http_utils.ts b/packages/http/src/http_utils.ts
new file mode 100644
index 000000000000..694d40eebd3b
--- /dev/null
+++ b/packages/http/src/http_utils.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 {RequestMethod} from './enums';
+
+export function normalizeMethodName(method: string | RequestMethod): RequestMethod {
+  if (typeof method !== 'string') return method;
+
+  switch (method.toUpperCase()) {
+    case 'GET':
+      return RequestMethod.Get;
+    case 'POST':
+      return RequestMethod.Post;
+    case 'PUT':
+      return RequestMethod.Put;
+    case 'DELETE':
+      return RequestMethod.Delete;
+    case 'OPTIONS':
+      return RequestMethod.Options;
+    case 'HEAD':
+      return RequestMethod.Head;
+    case 'PATCH':
+      return RequestMethod.Patch;
+  }
+  throw new Error(`Invalid request method. The method "${method}" is not supported.`);
+}
+
+export const isSuccess = (status: number): boolean => (status >= 200 && status < 300);
+
+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 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++) {
+    view[i] = input.charCodeAt(i);
+  }
+  return view.buffer;
+}
diff --git a/packages/http/src/index.ts b/packages/http/src/index.ts
new file mode 100644
index 000000000000..5011be91b41a
--- /dev/null
+++ b/packages/http/src/index.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
+ */
+
+export {BrowserXhr} from './backends/browser_xhr';
+export {JSONPBackend, JSONPConnection} from './backends/jsonp_backend';
+export {CookieXSRFStrategy, XHRBackend, XHRConnection} from './backends/xhr_backend';
+export {BaseRequestOptions, RequestOptions} from './base_request_options';
+export {BaseResponseOptions, ResponseOptions} from './base_response_options';
+export {ReadyState, RequestMethod, ResponseContentType, ResponseType} from './enums';
+export {Headers} from './headers';
+export {Http, Jsonp} from './http';
+export {HttpModule, JsonpModule} from './http_module';
+export {Connection, ConnectionBackend, RequestOptionsArgs, ResponseOptionsArgs, XSRFStrategy} from './interfaces';
+export {Request} from './static_request';
+export {Response} from './static_response';
+export {QueryEncoder, URLSearchParams} from './url_search_params';
+export {VERSION} from './version';
diff --git a/packages/http/src/interfaces.ts b/packages/http/src/interfaces.ts
new file mode 100644
index 000000000000..e8252f32da13
--- /dev/null
+++ b/packages/http/src/interfaces.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 {ReadyState, RequestMethod, ResponseContentType, ResponseType} from './enums';
+import {Headers} from './headers';
+import {Request} from './static_request';
+import {URLSearchParams} from './url_search_params';
+
+/**
+ * Abstract class from which real backends are derived.
+ *
+ * The primary purpose of a `ConnectionBackend` is to create new connections to fulfill a given
+ * {@link Request}.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export abstract class ConnectionBackend { abstract createConnection(request: any): Connection; }
+
+/**
+ * Abstract class from which real connections are derived.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export abstract class Connection {
+  // TODO(issue/24571): remove '!'.
+  readyState !: ReadyState;
+  // TODO(issue/24571): remove '!'.
+  request !: Request;
+  response: any;  // TODO: generic of <Response>;
+}
+
+/**
+ * An XSRFStrategy configures XSRF protection (e.g. via headers) on an HTTP request.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export abstract class XSRFStrategy { abstract configureRequest(req: Request): void; }
+
+/**
+ * Interface for options to construct a RequestOptions, based on
+ * [RequestInit](https://fetch.spec.whatwg.org/#requestinit) from the Fetch spec.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export interface RequestOptionsArgs {
+  url?: string|null;
+  method?: string|RequestMethod|null;
+  /** @deprecated from 4.0.0. Use params instead. */
+  search?: string|URLSearchParams|{[key: string]: any | any[]}|null;
+  params?: string|URLSearchParams|{[key: string]: any | any[]}|null;
+  headers?: Headers|null;
+  body?: any;
+  withCredentials?: boolean|null;
+  responseType?: ResponseContentType|null;
+}
+
+/**
+ * Required structure when constructing new Request();
+ */
+export interface RequestArgs extends RequestOptionsArgs { url: string|null; }
+
+/**
+ * Interface for options to construct a Response, based on
+ * [ResponseInit](https://fetch.spec.whatwg.org/#responseinit) from the Fetch spec.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export interface ResponseOptionsArgs {
+  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
new file mode 100644
index 000000000000..524c2e64bff1
--- /dev/null
+++ b/packages/http/src/static_request.ts
@@ -0,0 +1,190 @@
+/**
+ * @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 {Body} from './body';
+import {ContentType, RequestMethod, ResponseContentType} from './enums';
+import {Headers} from './headers';
+import {normalizeMethodName} from './http_utils';
+import {RequestArgs} from './interfaces';
+import {URLSearchParams} from './url_search_params';
+
+
+// TODO(jeffbcross): properly implement body accessors
+/**
+ * Creates `Request` instances from provided values.
+ *
+ * The Request's interface is inspired by the Request constructor defined in the [Fetch
+ * Spec](https://fetch.spec.whatwg.org/#request-class),
+ * but is considered a static value whose body can be accessed many times. There are other
+ * differences in the implementation, but this is the most significant.
+ *
+ * `Request` instances are typically created by higher-level classes, like {@link Http} and
+ * {@link Jsonp}, but it may occasionally be useful to explicitly create `Request` instances.
+ * One such example is when creating services that wrap higher-level services, like {@link Http},
+ * where it may be useful to generate a `Request` with arbitrary headers and search params.
+ *
+ * ```typescript
+ * import {Injectable, Injector} from '@angular/core';
+ * import {HTTP_PROVIDERS, Http, Request, RequestMethod} from '@angular/http';
+ *
+ * @Injectable()
+ * class AutoAuthenticator {
+ *   constructor(public http:Http) {}
+ *   request(url:string) {
+ *     return this.http.request(new Request({
+ *       method: RequestMethod.Get,
+ *       url: url,
+ *       search: 'password=123'
+ *     }));
+ *   }
+ * }
+ *
+ * var injector = Injector.resolveAndCreate([HTTP_PROVIDERS, AutoAuthenticator]);
+ * var authenticator = injector.get(AutoAuthenticator);
+ * authenticator.request('people.json').subscribe(res => {
+ *   //URL should have included '?password=123'
+ *   console.log('people', res.json());
+ * });
+ * ```
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export class Request extends Body {
+  /**
+   * Http method with which to perform the request.
+   */
+  method: RequestMethod;
+  /**
+   * {@link Headers} instance
+   */
+  headers: Headers;
+  /** Url of the remote resource */
+  url: string;
+  /** Type of the request body **/
+  private contentType: ContentType;
+  /** Enable use credentials */
+  withCredentials: boolean;
+  /** Buffer to store the response */
+  responseType: ResponseContentType;
+  constructor(requestOptions: RequestArgs) {
+    super();
+    // TODO: assert that url is present
+    const url = requestOptions.url;
+    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) {
+          prefix = (this.url[this.url.length - 1] == '&') ? '' : '&';
+        }
+        // TODO: just delete search-query-looking string in url?
+        this.url = url + prefix + params;
+      }
+    }
+    this._body = requestOptions.body;
+    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 !;
+  }
+
+  /**
+   * Returns the content type enum based on header options.
+   */
+  detectContentType(): ContentType {
+    switch (this.headers.get('content-type')) {
+      case 'application/json':
+        return ContentType.JSON;
+      case 'application/x-www-form-urlencoded':
+        return ContentType.FORM;
+      case 'multipart/form-data':
+        return ContentType.FORM_DATA;
+      case 'text/plain':
+      case 'text/html':
+        return ContentType.TEXT;
+      case 'application/octet-stream':
+        return this._body instanceof ArrayBuffer ? ContentType.ARRAY_BUFFER : ContentType.BLOB;
+      default:
+        return this.detectContentTypeFromBody();
+    }
+  }
+
+  /**
+   * Returns the content type of request's body based on its type.
+   */
+  detectContentTypeFromBody(): ContentType {
+    if (this._body == null) {
+      return ContentType.NONE;
+    } else if (this._body instanceof URLSearchParams) {
+      return ContentType.FORM;
+    } else if (this._body instanceof FormData) {
+      return ContentType.FORM_DATA;
+    } else if (this._body instanceof Blob) {
+      return ContentType.BLOB;
+    } else if (this._body instanceof ArrayBuffer) {
+      return ContentType.ARRAY_BUFFER;
+    } else if (this._body && typeof this._body === 'object') {
+      return ContentType.JSON;
+    } else {
+      return ContentType.TEXT;
+    }
+  }
+
+  /**
+   * Returns the request's body according to its type. If body is undefined, return
+   * null.
+   */
+  getBody(): any {
+    switch (this.contentType) {
+      case ContentType.JSON:
+        return this.text();
+      case ContentType.FORM:
+        return this.text();
+      case ContentType.FORM_DATA:
+        return this._body;
+      case ContentType.TEXT:
+        return this.text();
+      case ContentType.BLOB:
+        return this.blob();
+      case ContentType.ARRAY_BUFFER:
+        return this.arrayBuffer();
+      default:
+        return null;
+    }
+  }
+}
+
+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: ArrayBufferConstructor =
+    (w as any /** TODO #9100 */)['ArrayBuffer'] || noop;
diff --git a/packages/http/src/static_response.ts b/packages/http/src/static_response.ts
new file mode 100644
index 000000000000..668cf146fbd1
--- /dev/null
+++ b/packages/http/src/static_response.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 {ResponseOptions} from './base_response_options';
+import {Body} from './body';
+import {ResponseType} from './enums';
+import {Headers} from './headers';
+
+
+/**
+ * Creates `Response` instances from provided values.
+ *
+ * Though this object isn't
+ * usually instantiated by end-users, it is the primary object interacted with when it comes time to
+ * add data to a view.
+ *
+ * ### Example
+ *
+ * ```
+ * http.request('my-friends.txt').subscribe(response => this.friends = response.text());
+ * ```
+ *
+ * The Response's interface is inspired by the Response constructor defined in the [Fetch
+ * Spec](https://fetch.spec.whatwg.org/#response-class), but is considered a static value whose body
+ * can be accessed many times. There are other differences in the implementation, but this is the
+ * most significant.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export class Response extends Body {
+  /**
+   * One of "basic", "cors", "default", "error", or "opaque".
+   *
+   * Defaults to "default".
+   */
+  type: ResponseType;
+  /**
+   * True if the response's status is within 200-299
+   */
+  ok: boolean;
+  /**
+   * URL of response.
+   *
+   * Defaults to empty string.
+   */
+  url: string;
+  /**
+   * Status code returned by server.
+   *
+   * Defaults to 200.
+   */
+  status: number;
+  /**
+   * Text representing the corresponding reason phrase to the `status`, as defined in [ietf rfc 2616
+   * section 6.1.1](https://tools.ietf.org/html/rfc2616#section-6.1.1)
+   *
+   * Defaults to "OK"
+   */
+  statusText: string|null;
+  /**
+   * Non-standard property
+   *
+   * Denotes how many of the response body's bytes have been loaded, for example if the response is
+   * the result of a progress event.
+   */
+  // TODO(issue/24571): remove '!'.
+  bytesLoaded !: number;
+  /**
+   * Non-standard property
+   *
+   * Denotes how many bytes are expected in the final response body.
+   */
+  // TODO(issue/24571): remove '!'.
+  totalBytes !: number;
+  /**
+   * Headers object based on the `Headers` class in the [Fetch
+   * Spec](https://fetch.spec.whatwg.org/#headers-class).
+   */
+  headers: Headers|null;
+
+  constructor(responseOptions: ResponseOptions) {
+    super();
+    this._body = responseOptions.body;
+    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 !;
+  }
+
+  toString(): string {
+    return `Response with status: ${this.status} ${this.statusText} for URL: ${this.url}`;
+  }
+}
diff --git a/packages/http/src/url_search_params.ts b/packages/http/src/url_search_params.ts
new file mode 100644
index 000000000000..5c9669a46371
--- /dev/null
+++ b/packages/http/src/url_search_params.ts
@@ -0,0 +1,184 @@
+/**
+ * @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
+ */
+
+function paramParser(rawParams: string = ''): 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 ? [param, ''] : [param.slice(0, eqIdx), param.slice(eqIdx + 1)];
+      const list = map.get(key) || [];
+      list.push(val);
+      map.set(key, list);
+    });
+  }
+  return map;
+}
+/**
+ * @deprecated see https://angular.io/guide/http
+ **/
+export class QueryEncoder {
+  encodeKey(k: string): string { return standardEncoding(k); }
+
+  encodeValue(v: string): string { return standardEncoding(v); }
+}
+
+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, '/');
+}
+
+/**
+ * Map-like representation of url search parameters, based on
+ * [URLSearchParams](https://url.spec.whatwg.org/#urlsearchparams) in the url living standard,
+ * with several extensions for merging URLSearchParams objects:
+ *   - setAll()
+ *   - appendAll()
+ *   - replaceAll()
+ *
+ * This class accepts an optional second parameter of ${@link QueryEncoder},
+ * which is used to serialize parameters before making a request. By default,
+ * `QueryEncoder` encodes keys and values of parameters using `encodeURIComponent`,
+ * and then un-encodes certain characters that are allowed to be part of the query
+ * according to IETF RFC 3986: https://tools.ietf.org/html/rfc3986.
+ *
+ * These are the characters that are not encoded: `! $ \' ( ) * + , ; A 9 - . _ ~ ? /`
+ *
+ * If the set of allowed query characters is not acceptable for a particular backend,
+ * `QueryEncoder` can be subclassed and provided as the 2nd argument to URLSearchParams.
+ *
+ * ```
+ * import {URLSearchParams, QueryEncoder} from '@angular/http';
+ * class MyQueryEncoder extends QueryEncoder {
+ *   encodeKey(k: string): string {
+ *     return myEncodingFunction(k);
+ *   }
+ *
+ *   encodeValue(v: string): string {
+ *     return myEncodingFunction(v);
+ *   }
+ * }
+ *
+ * let params = new URLSearchParams('', new MyQueryEncoder());
+ * ```
+ * @deprecated see https://angular.io/guide/http
+ */
+export class URLSearchParams {
+  paramsMap: Map<string, string[]>;
+  constructor(
+      public rawParams: string = '', private queryEncoder: QueryEncoder = new QueryEncoder()) {
+    this.paramsMap = paramParser(rawParams);
+  }
+
+  clone(): URLSearchParams {
+    const clone = new URLSearchParams('', this.queryEncoder);
+    clone.appendAll(this);
+    return clone;
+  }
+
+  has(param: string): boolean { return this.paramsMap.has(param); }
+
+  get(param: string): string|null {
+    const storedParam = this.paramsMap.get(param);
+
+    return Array.isArray(storedParam) ? storedParam[0] : null;
+  }
+
+  getAll(param: string): string[] { return this.paramsMap.get(param) || []; }
+
+  set(param: string, val: string) {
+    if (val === void 0 || val === null) {
+      this.delete(param);
+      return;
+    }
+    const list = this.paramsMap.get(param) || [];
+    list.length = 0;
+    list.push(val);
+    this.paramsMap.set(param, list);
+  }
+
+  // A merge operation
+  // For each name-values pair in `searchParams`, perform `set(name, values[0])`
+  //
+  // E.g: "a=[1,2,3], c=[8]" + "a=[4,5,6], b=[7]" = "a=[4], c=[8], b=[7]"
+  //
+  // TODO(@caitp): document this better
+  setAll(searchParams: URLSearchParams) {
+    searchParams.paramsMap.forEach((value, param) => {
+      const list = this.paramsMap.get(param) || [];
+      list.length = 0;
+      list.push(value[0]);
+      this.paramsMap.set(param, list);
+    });
+  }
+
+  append(param: string, val: string): void {
+    if (val === void 0 || val === null) return;
+    const list = this.paramsMap.get(param) || [];
+    list.push(val);
+    this.paramsMap.set(param, list);
+  }
+
+  // A merge operation
+  // For each name-values pair in `searchParams`, perform `append(name, value)`
+  // for each value in `values`.
+  //
+  // E.g: "a=[1,2], c=[8]" + "a=[3,4], b=[7]" = "a=[1,2,3,4], c=[8], b=[7]"
+  //
+  // TODO(@caitp): document this better
+  appendAll(searchParams: URLSearchParams) {
+    searchParams.paramsMap.forEach((value, param) => {
+      const list = this.paramsMap.get(param) || [];
+      for (let i = 0; i < value.length; ++i) {
+        list.push(value[i]);
+      }
+      this.paramsMap.set(param, list);
+    });
+  }
+
+
+  // A merge operation
+  // For each name-values pair in `searchParams`, perform `delete(name)`,
+  // followed by `set(name, values)`
+  //
+  // E.g: "a=[1,2,3], c=[8]" + "a=[4,5,6], b=[7]" = "a=[4,5,6], c=[8], b=[7]"
+  //
+  // TODO(@caitp): document this better
+  replaceAll(searchParams: URLSearchParams) {
+    searchParams.paramsMap.forEach((value, param) => {
+      const list = this.paramsMap.get(param) || [];
+      list.length = 0;
+      for (let i = 0; i < value.length; ++i) {
+        list.push(value[i]);
+      }
+      this.paramsMap.set(param, list);
+    });
+  }
+
+  toString(): string {
+    const paramsList: string[] = [];
+    this.paramsMap.forEach((values, k) => {
+      values.forEach(
+          v => paramsList.push(
+              this.queryEncoder.encodeKey(k) + '=' + this.queryEncoder.encodeValue(v)));
+    });
+    return paramsList.join('&');
+  }
+
+  delete (param: string): void { this.paramsMap.delete(param); }
+}
diff --git a/packages/http/src/version.ts b/packages/http/src/version.ts
new file mode 100644
index 000000000000..8b6e32cb6f81
--- /dev/null
+++ b/packages/http/src/version.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
+ */
+
+/**
+ * @module
+ * @description
+ * Entry point for all public APIs of the common package.
+ */
+
+import {Version} from '@angular/core';
+/**
+ * @deprecated see https://angular.io/guide/http
+ */
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/http/test/BUILD.bazel b/packages/http/test/BUILD.bazel
new file mode 100644
index 000000000000..05c83ed83a96
--- /dev/null
+++ b/packages/http/test/BUILD.bazel
@@ -0,0 +1,33 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/http",
+        "//packages/http/testing",
+        "//packages/platform-browser",
+        "//packages/platform-browser/testing",
+        "@rxjs",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/http/test/backends/jsonp_backend_spec.ts b/packages/http/test/backends/jsonp_backend_spec.ts
new file mode 100644
index 000000000000..724cec7107d7
--- /dev/null
+++ b/packages/http/test/backends/jsonp_backend_spec.ts
@@ -0,0 +1,167 @@
+/**
+ * @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 '@angular/core';
+import {AsyncTestCompleter, SpyObject, afterEach, beforeEach, describe, inject, it} from '@angular/core/testing/src/testing_internal';
+import {BrowserJsonp} from '@angular/http/src/backends/browser_jsonp';
+import {JSONPBackend, JSONPConnection} from '@angular/http/src/backends/jsonp_backend';
+import {BaseRequestOptions, RequestOptions} from '@angular/http/src/base_request_options';
+import {BaseResponseOptions, ResponseOptions} from '@angular/http/src/base_response_options';
+import {ReadyState, RequestMethod, ResponseType} from '@angular/http/src/enums';
+import {Request} from '@angular/http/src/static_request';
+import {Response} from '@angular/http/src/static_response';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+let existingScripts: MockBrowserJsonp[] = [];
+
+class MockBrowserJsonp extends BrowserJsonp {
+  // TODO(issue/24571): remove '!'.
+  src !: string;
+  callbacks = new Map<string, (data: any) => any>();
+
+  addEventListener(type: string, cb: (data: any) => any) { this.callbacks.set(type, cb); }
+
+  removeEventListener(type: string, cb: Function) { this.callbacks.delete(type); }
+
+  dispatchEvent(type: string, argument: any = {}) {
+    const cb = this.callbacks.get(type);
+    if (cb) {
+      cb(argument);
+    }
+  }
+
+  build(url: string) {
+    const script = new MockBrowserJsonp();
+    script.src = url;
+    existingScripts.push(script);
+    return script;
+  }
+
+  send(node: any) { /* noop */
+  }
+  cleanup(node: any) { /* noop */
+  }
+}
+
+{
+  describe('JSONPBackend', () => {
+    let backend: JSONPBackend;
+    let sampleRequest: Request;
+
+    beforeEach(() => {
+      const injector = Injector.create([
+        {provide: ResponseOptions, useClass: BaseResponseOptions, deps: []},
+        {provide: BrowserJsonp, useClass: MockBrowserJsonp, deps: []},
+        {provide: JSONPBackend, useClass: JSONPBackend, deps: [BrowserJsonp, ResponseOptions]}
+      ]);
+      backend = injector.get(JSONPBackend);
+      const base = new BaseRequestOptions();
+      sampleRequest =
+          new Request(base.merge(new RequestOptions({url: 'https://google.com'})) as any);
+    });
+
+    afterEach(() => { existingScripts = []; });
+
+    it('should create a connection', () => {
+      let instance: JSONPConnection = undefined !;
+      expect(() => instance = backend.createConnection(sampleRequest)).not.toThrow();
+      expect(instance).toBeAnInstanceOf(JSONPConnection);
+    });
+
+
+    describe('JSONPConnection', () => {
+      it('should use the injected BaseResponseOptions to create the response',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const connection = new (JSONPConnection as any)(
+               sampleRequest, new MockBrowserJsonp(),
+               new ResponseOptions({type: ResponseType.Error}));
+           connection.response.subscribe((res: Response) => {
+             expect(res.type).toBe(ResponseType.Error);
+             async.done();
+           });
+           connection.finished();
+           existingScripts[0].dispatchEvent('load');
+         }));
+
+      it('should ignore load/callback when disposed',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const connection = new (JSONPConnection as any)(sampleRequest, new MockBrowserJsonp());
+           const spy = new SpyObject();
+           const loadSpy = spy.spy('load');
+           const errorSpy = spy.spy('error');
+           const returnSpy = spy.spy('cancelled');
+
+           const request = connection.response.subscribe(loadSpy, errorSpy, returnSpy);
+           request.unsubscribe();
+
+           connection.finished('Fake data');
+           existingScripts[0].dispatchEvent('load');
+
+           setTimeout(() => {
+             expect(connection.readyState).toBe(ReadyState.Cancelled);
+             expect(loadSpy).not.toHaveBeenCalled();
+             expect(errorSpy).not.toHaveBeenCalled();
+             expect(returnSpy).not.toHaveBeenCalled();
+             async.done();
+           }, 10);
+         }));
+
+      it('should report error if loaded without invoking callback',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const connection = new (JSONPConnection as any)(sampleRequest, new MockBrowserJsonp());
+           connection.response.subscribe(
+               () => async.fail('Response listener should not be called'), (err: Response) => {
+                 expect(err.text()).toBe('JSONP injected script did not invoke callback.');
+                 async.done();
+               });
+
+           existingScripts[0].dispatchEvent('load');
+         }));
+
+      it('should report error if script contains error',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const connection = new (JSONPConnection as any)(sampleRequest, new MockBrowserJsonp());
+
+           connection.response.subscribe(
+               () => async.fail('Response listener should not be called'), (err: Response) => {
+                 expect(err.text()).toBe('Oops!');
+                 async.done();
+               });
+
+           existingScripts[0].dispatchEvent('error', ({message: 'Oops!'}));
+         }));
+
+      it('should throw if request method is not GET', () => {
+        [RequestMethod.Post, RequestMethod.Put, RequestMethod.Delete, RequestMethod.Options,
+         RequestMethod.Head, RequestMethod.Patch]
+            .forEach(method => {
+              const base = new BaseRequestOptions();
+              const req = new Request(base.merge(
+                  new RequestOptions({url: 'https://google.com', method: method})) as any);
+              expect(
+                  () => new (JSONPConnection as any)(req, new MockBrowserJsonp())
+                            .response.subscribe())
+                  .toThrowError();
+            });
+      });
+
+      it('should respond with data passed to callback',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const connection = new (JSONPConnection as any)(sampleRequest, new MockBrowserJsonp());
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.json()).toEqual(({fake_payload: true, blob_id: 12345}));
+             async.done();
+           });
+
+           connection.finished(({fake_payload: true, blob_id: 12345}));
+           existingScripts[0].dispatchEvent('load');
+         }));
+    });
+  });
+}
diff --git a/packages/http/test/backends/mock_backend_spec.ts b/packages/http/test/backends/mock_backend_spec.ts
new file mode 100644
index 000000000000..ade1e47c674e
--- /dev/null
+++ b/packages/http/test/backends/mock_backend_spec.ts
@@ -0,0 +1,122 @@
+/**
+ * @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 '@angular/core';
+import {AsyncTestCompleter, beforeEach, describe, inject, it, xit} from '@angular/core/testing/src/testing_internal';
+import {BaseRequestOptions, RequestOptions} from '@angular/http/src/base_request_options';
+import {BaseResponseOptions, ResponseOptions} from '@angular/http/src/base_response_options';
+import {Request} from '@angular/http/src/static_request';
+import {Response} from '@angular/http/src/static_response';
+import {MockBackend, MockConnection} from '@angular/http/testing/src/mock_backend';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+import {ReplaySubject} from 'rxjs';
+
+{
+  describe('MockBackend', () => {
+
+    let backend: MockBackend;
+    let sampleRequest1: Request;
+    let sampleResponse1: Response;
+    let sampleRequest2: Request;
+    let sampleResponse2: Response;
+
+    beforeEach(() => {
+      const injector = Injector.create([
+        {provide: ResponseOptions, useClass: BaseResponseOptions, deps: []},
+        {provide: MockBackend, deps: []}
+      ]);
+      backend = injector.get(MockBackend);
+      const base = new BaseRequestOptions();
+      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'})) as any);
+      sampleResponse2 = new Response(new ResponseOptions({body: 'response2'}));
+    });
+
+    it('should create a new MockBackend', () => { expect(backend).toBeAnInstanceOf(MockBackend); });
+
+    it('should create a new MockConnection', () => {
+      expect(backend.createConnection(sampleRequest1)).toBeAnInstanceOf(MockConnection);
+    });
+
+    it('should create a new connection and allow subscription', () => {
+      const connection: MockConnection = backend.createConnection(sampleRequest1);
+      connection.response.subscribe(() => {});
+    });
+
+    it('should allow responding after subscription',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const connection: MockConnection = backend.createConnection(sampleRequest1);
+         connection.response.subscribe(() => { async.done(); });
+         connection.mockRespond(sampleResponse1);
+       }));
+
+    it('should allow subscribing after responding',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const connection: MockConnection = backend.createConnection(sampleRequest1);
+         connection.mockRespond(sampleResponse1);
+         connection.response.subscribe(() => { async.done(); });
+       }));
+
+    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.mockError(new Error('nope'));
+       }));
+
+    it('should not throw when there are no unresolved requests',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const connection: MockConnection = backend.createConnection(sampleRequest1);
+         connection.response.subscribe(() => { async.done(); });
+         connection.mockRespond(sampleResponse1);
+         backend.verifyNoPendingRequests();
+       }));
+
+    xit('should throw when there are unresolved requests',
+        inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+          const connection: MockConnection = backend.createConnection(sampleRequest1);
+          connection.response.subscribe(() => { async.done(); });
+          backend.verifyNoPendingRequests();
+        }));
+
+    it('should work when requests are resolved out of order',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const connection1: MockConnection = backend.createConnection(sampleRequest1);
+         const connection2: MockConnection = backend.createConnection(sampleRequest1);
+         connection1.response.subscribe(() => { async.done(); });
+         connection2.response.subscribe(() => {});
+         connection2.mockRespond(sampleResponse1);
+         connection1.mockRespond(sampleResponse1);
+         backend.verifyNoPendingRequests();
+       }));
+
+    xit('should allow double subscribing',
+        inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+          const responses: Response[] = [sampleResponse1, sampleResponse2];
+          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);
+        }));
+
+    // TODO(robwormald): readyStates are leaving?
+    it('should allow resolution of requests manually', () => {
+      const connection1: MockConnection = backend.createConnection(sampleRequest1);
+      const connection2: MockConnection = backend.createConnection(sampleRequest1);
+      connection1.response.subscribe(() => {});
+      connection2.response.subscribe(() => {});
+      backend.resolveAllConnections();
+      backend.verifyNoPendingRequests();
+    });
+  });
+}
diff --git a/packages/http/test/backends/xhr_backend_spec.ts b/packages/http/test/backends/xhr_backend_spec.ts
new file mode 100644
index 000000000000..8c2228c711eb
--- /dev/null
+++ b/packages/http/test/backends/xhr_backend_spec.ts
@@ -0,0 +1,770 @@
+/**
+ * @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 {AsyncTestCompleter, SpyObject, afterEach, beforeEach, beforeEachProviders, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {BrowserXhr} from '@angular/http/src/backends/browser_xhr';
+import {CookieXSRFStrategy, XHRBackend, XHRConnection} from '@angular/http/src/backends/xhr_backend';
+import {BaseRequestOptions, RequestOptions} from '@angular/http/src/base_request_options';
+import {BaseResponseOptions, ResponseOptions} from '@angular/http/src/base_response_options';
+import {ResponseContentType, ResponseType} from '@angular/http/src/enums';
+import {Headers} from '@angular/http/src/headers';
+import {XSRFStrategy} from '@angular/http/src/interfaces';
+import {Request} from '@angular/http/src/static_request';
+import {Response} from '@angular/http/src/static_response';
+import {URLSearchParams} from '@angular/http/src/url_search_params';
+import {ɵgetDOM as getDOM} from '@angular/platform-browser';
+
+let abortSpy: any;
+let sendSpy: any;
+let openSpy: any;
+let setRequestHeaderSpy: any;
+let existingXHRs: MockBrowserXHR[] = [];
+
+class MockBrowserXHR extends BrowserXhr {
+  abort: any;
+  send: any;
+  open: any;
+  response: any;
+  responseType: string;
+  // TODO(issue/24571): remove '!'.
+  responseText !: string;
+  setRequestHeader: any;
+  callbacks = new Map<string, Function>();
+  // TODO(issue/24571): remove '!'.
+  status !: number;
+  // TODO(issue/24571): remove '!'.
+  responseHeaders !: string;
+  // TODO(issue/24571): remove '!'.
+  responseURL !: string;
+  // TODO(issue/24571): remove '!'.
+  statusText !: string;
+  // TODO(issue/24571): remove '!'.
+  withCredentials !: boolean;
+
+  constructor() {
+    super();
+    const spy = new SpyObject();
+    this.abort = abortSpy = spy.spy('abort');
+    this.send = sendSpy = spy.spy('send');
+    this.open = openSpy = spy.spy('open');
+    this.setRequestHeader = setRequestHeaderSpy = spy.spy('setRequestHeader');
+    // If responseType is supported by the browser, then it should be set to an empty string.
+    // (https://www.w3.org/TR/XMLHttpRequest/#the-responsetype-attribute)
+    this.responseType = '';
+  }
+
+  setStatusCode(status: number) { this.status = status; }
+
+  setStatusText(statusText: string) { this.statusText = statusText; }
+
+  setResponse(value: string) { this.response = value; }
+
+  setResponseText(value: string) { this.responseText = value; }
+
+  setResponseURL(value: string) { this.responseURL = value; }
+
+  setResponseHeaders(value: string) { this.responseHeaders = value; }
+
+  getAllResponseHeaders() { return this.responseHeaders || ''; }
+
+  getResponseHeader(key: string) {
+    return Headers.fromResponseHeaderString(this.responseHeaders).get(key);
+  }
+
+  addEventListener(type: string, cb: Function) { this.callbacks.set(type, cb); }
+
+  removeEventListener(type: string, cb: Function) { this.callbacks.delete(type); }
+
+  dispatchEvent(type: string) { this.callbacks.get(type) !({}); }
+
+  build() {
+    const xhr = new MockBrowserXHR();
+    existingXHRs.push(xhr);
+    return xhr;
+  }
+}
+
+{
+  describe('XHRBackend', () => {
+    let backend: XHRBackend;
+    let sampleRequest: Request;
+
+    beforeEachProviders(
+        () =>
+            [{provide: ResponseOptions, useClass: BaseResponseOptions},
+             {provide: BrowserXhr, useClass: MockBrowserXHR}, XHRBackend,
+             {provide: XSRFStrategy, useValue: new CookieXSRFStrategy()},
+    ]);
+
+    beforeEach(inject([XHRBackend], (be: XHRBackend) => {
+      backend = be;
+      const base = new BaseRequestOptions();
+      sampleRequest =
+          new Request(base.merge(new RequestOptions({url: 'https://google.com'})) as any);
+    }));
+
+    afterEach(() => { existingXHRs = []; });
+
+    describe('creating a connection', () => {
+      @Injectable()
+      class NoopXsrfStrategy implements XSRFStrategy {
+        configureRequest(req: Request) {}
+      }
+      beforeEachProviders(() => [{provide: XSRFStrategy, useClass: NoopXsrfStrategy}]);
+
+      it('succeeds',
+         () => { expect(() => backend.createConnection(sampleRequest)).not.toThrow(); });
+    });
+
+    if (getDOM().supportsCookies()) {
+      describe('XSRF support', () => {
+        it('sets an XSRF header by default', () => {
+          getDOM().setCookie('XSRF-TOKEN', 'magic XSRF value');
+          backend.createConnection(sampleRequest);
+          expect(sampleRequest.headers.get('X-XSRF-TOKEN')).toBe('magic XSRF value');
+        });
+        it('should allow overwriting of existing headers', () => {
+          getDOM().setCookie('XSRF-TOKEN', 'magic XSRF value');
+          sampleRequest.headers.set('X-XSRF-TOKEN', 'already set');
+          backend.createConnection(sampleRequest);
+          expect(sampleRequest.headers.get('X-XSRF-TOKEN')).toBe('magic XSRF value');
+        });
+
+        describe('configuration', () => {
+          beforeEachProviders(() => [{
+                                provide: XSRFStrategy,
+                                useValue: new CookieXSRFStrategy('my cookie', 'X-MY-HEADER')
+                              }]);
+
+          it('uses the configured names', () => {
+            getDOM().setCookie('my cookie', 'XSRF value');
+            backend.createConnection(sampleRequest);
+            expect(sampleRequest.headers.get('X-MY-HEADER')).toBe('XSRF value');
+          });
+        });
+      });
+    }
+
+    describe('XHRConnection', () => {
+      it('should use the injected BaseResponseOptions to create the response',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(),
+               new ResponseOptions({type: ResponseType.Error}));
+           connection.response.subscribe((res: Response) => {
+             expect(res.type).toBe(ResponseType.Error);
+             async.done();
+           });
+           existingXHRs[0].setStatusCode(200);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should complete a request', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(),
+               new ResponseOptions({type: ResponseType.Error}));
+           connection.response.subscribe(
+               (res: Response) => { expect(res.type).toBe(ResponseType.Error); }, null !,
+               () => { async.done(); });
+           existingXHRs[0].setStatusCode(200);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should call abort when disposed', () => {
+        const connection = new XHRConnection(sampleRequest, new MockBrowserXHR());
+        const request = connection.response.subscribe();
+        request.unsubscribe();
+        expect(abortSpy).toHaveBeenCalled();
+      });
+
+      it('should create an error Response on error',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(),
+               new ResponseOptions({type: ResponseType.Error}));
+           connection.response.subscribe(null !, (res: Response) => {
+             expect(res.type).toBe(ResponseType.Error);
+             async.done();
+           });
+           existingXHRs[0].dispatchEvent('error');
+         }));
+
+      it('should set the status text and status code on error',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(),
+               new ResponseOptions({type: ResponseType.Error}));
+           connection.response.subscribe(null !, (res: Response) => {
+             expect(res.type).toBe(ResponseType.Error);
+             expect(res.status).toEqual(0);
+             expect(res.statusText).toEqual('');
+             async.done();
+           });
+           const xhr = existingXHRs[0];
+           // status=0 with a text='' is common for CORS errors
+           xhr.setStatusCode(0);
+           xhr.setStatusText('');
+           xhr.dispatchEvent('error');
+         }));
+
+      it('should call open with method and url when subscribed to', () => {
+        const connection = new XHRConnection(sampleRequest, new MockBrowserXHR());
+        expect(openSpy).not.toHaveBeenCalled();
+        connection.response.subscribe();
+        expect(openSpy).toHaveBeenCalledWith('GET', sampleRequest.url);
+      });
+
+      it('should call send on the backend with request body when subscribed to', () => {
+        const body = 'Some body to love';
+        const base = new BaseRequestOptions();
+        const connection = new XHRConnection(
+            new Request(base.merge(new RequestOptions({body: body})) as any), new MockBrowserXHR());
+        expect(sendSpy).not.toHaveBeenCalled();
+        connection.response.subscribe();
+        expect(sendSpy).toHaveBeenCalledWith(body);
+      });
+
+      it('should attach headers to the request', () => {
+        const headers =
+            new Headers({'Content-Type': 'text/xml', 'Breaking-Bad': '<3', 'X-Multi': ['a', 'b']});
+
+        const base = new BaseRequestOptions();
+        const connection = new XHRConnection(
+            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');
+        expect(setRequestHeaderSpy).toHaveBeenCalledWith('X-Multi', 'a,b');
+      });
+
+      it('should attach default Accept header', () => {
+        const headers = new Headers();
+        const base = new BaseRequestOptions();
+        const connection = new XHRConnection(
+            new Request(base.merge(new RequestOptions({headers})) as any), new MockBrowserXHR());
+        connection.response.subscribe();
+        expect(setRequestHeaderSpy)
+            .toHaveBeenCalledWith('Accept', 'application/json, text/plain, */*');
+      });
+
+      it('should not override user provided Accept header', () => {
+        const headers = new Headers({'Accept': 'text/xml'});
+        const base = new BaseRequestOptions();
+        const connection = new XHRConnection(
+            new Request(base.merge(new RequestOptions({headers})) as any), new MockBrowserXHR());
+        connection.response.subscribe();
+        expect(setRequestHeaderSpy).toHaveBeenCalledWith('Accept', 'text/xml');
+      });
+
+      it('should skip content type detection if custom content type header is set', () => {
+        const headers = new Headers({'Content-Type': 'text/plain'});
+        const body = {test: 'val'};
+        const base = new BaseRequestOptions();
+        const connection = new XHRConnection(
+            new Request(base.merge(new RequestOptions({body: body, headers: headers})) as any),
+            new MockBrowserXHR());
+        connection.response.subscribe();
+        expect(setRequestHeaderSpy).toHaveBeenCalledWith('Content-Type', 'text/plain');
+        expect(setRequestHeaderSpy).not.toHaveBeenCalledWith('Content-Type', 'application/json');
+        expect(setRequestHeaderSpy).not.toHaveBeenCalledWith('content-type', 'application/json');
+      });
+
+      it('should use object body and detect content type header to the request', () => {
+        const body = {test: 'val'};
+        const base = new BaseRequestOptions();
+        const connection = new XHRConnection(
+            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');
+      });
+
+      it('should use number body and detect content type header to the request', () => {
+        const body = 23;
+        const base = new BaseRequestOptions();
+        const connection = new XHRConnection(
+            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');
+      });
+
+      it('should use string body and detect content type header to the request', () => {
+        const body = 'some string';
+        const base = new BaseRequestOptions();
+        const connection = new XHRConnection(
+            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');
+      });
+
+      it('should use URLSearchParams body and detect content type header to the request', () => {
+        const body = new URLSearchParams();
+        body.set('test1', 'val1');
+        body.set('test2', 'val2');
+        const base = new BaseRequestOptions();
+        const connection = new XHRConnection(
+            new Request(base.merge(new RequestOptions({body: body})) as any), new MockBrowserXHR());
+        connection.response.subscribe();
+        expect(sendSpy).toHaveBeenCalledWith('test1=val1&test2=val2');
+        expect(setRequestHeaderSpy)
+            .toHaveBeenCalledWith(
+                'content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
+      });
+
+      if ((global as any /** TODO #9100 */)['Blob']) {
+        // `new Blob(...)` throws an 'Illegal constructor' exception in Android browser <= 4.3,
+        // but a BlobBuilder can be used instead
+        const createBlob = (data: Array<string>, datatype: string) => {
+          let newBlob: Blob;
+          try {
+            newBlob = new Blob(data || [], datatype ? {type: datatype} : {});
+          } catch (e) {
+            const BlobBuilder = (<any>global).BlobBuilder || (<any>global).WebKitBlobBuilder ||
+                (<any>global).MozBlobBuilder || (<any>global).MSBlobBuilder;
+            const builder = new BlobBuilder();
+            builder.append(data);
+            newBlob = builder.getBlob(datatype);
+          }
+          return newBlob;
+        };
+
+        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');
+          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})) as any),
+              new MockBrowserXHR());
+          connection.response.subscribe();
+          expect(sendSpy).toHaveBeenCalledWith(body);
+          expect(setRequestHeaderSpy).not.toHaveBeenCalledWith();
+        });
+
+        it('should use blob body and detect content type header to the request', () => {
+          const body = createBlob(['body { color: red; }'], 'text/css');
+          const base = new BaseRequestOptions();
+          const connection = new XHRConnection(
+              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 base = new BaseRequestOptions();
+          const connection = new XHRConnection(
+              new Request(base.merge(new RequestOptions({body: body}))), new MockBrowserXHR());
+          connection.response.subscribe();
+          expect(sendSpy).toHaveBeenCalledWith(body);
+          expect(setRequestHeaderSpy).not.toHaveBeenCalledWith();
+        });
+
+        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 base = new BaseRequestOptions();
+             const connection = new XHRConnection(
+                 new Request(base.merge(new RequestOptions({body: body, headers: headers}))),
+                 new MockBrowserXHR());
+             connection.response.subscribe();
+             expect(sendSpy).toHaveBeenCalledWith(body);
+             expect(setRequestHeaderSpy).toHaveBeenCalledWith('Content-Type', 'text/css');
+           });
+
+        it('should use array buffer body to the request', () => {
+          const body = new ArrayBuffer(512);
+          const longInt8View = new Uint8Array(body);
+          for (let i = 0; i < longInt8View.length; i++) {
+            longInt8View[i] = i % 255;
+          }
+          const base = new BaseRequestOptions();
+          const connection = new XHRConnection(
+              new Request(base.merge(new RequestOptions({body: body}))), new MockBrowserXHR());
+          connection.response.subscribe();
+          expect(sendSpy).toHaveBeenCalledWith(body);
+          expect(setRequestHeaderSpy).not.toHaveBeenCalledWith();
+        });
+
+        it('should use array buffer body without type with custom content type header to the request',
+           () => {
+             const headers = new Headers({'Content-Type': 'text/css'});
+             const body = new ArrayBuffer(512);
+             const longInt8View = new Uint8Array(body);
+             for (let i = 0; i < longInt8View.length; i++) {
+               longInt8View[i] = i % 255;
+             }
+             const base = new BaseRequestOptions();
+             const connection = new XHRConnection(
+                 new Request(base.merge(new RequestOptions({body: body, headers: headers}))),
+                 new MockBrowserXHR());
+             connection.response.subscribe();
+             expect(sendSpy).toHaveBeenCalledWith(body);
+             expect(setRequestHeaderSpy).toHaveBeenCalledWith('Content-Type', 'text/css');
+           });
+      }
+
+      it('should return the correct status code',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 418;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+
+           connection.response.subscribe(
+               (res: Response) => {
+
+               },
+               (errRes: Response) => {
+                 expect(errRes.status).toBe(statusCode);
+                 async.done();
+               });
+
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should call next and complete on 200 codes',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           let nextCalled = false;
+           let errorCalled = false;
+           const statusCode = 200;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+
+           connection.response.subscribe(
+               (res: Response) => {
+                 nextCalled = true;
+                 expect(res.status).toBe(statusCode);
+               },
+               (errRes: Response) => { errorCalled = true; },
+               () => {
+                 expect(nextCalled).toBe(true);
+                 expect(errorCalled).toBe(false);
+                 async.done();
+               });
+
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should set ok to true on 200 return',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 200;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.ok).toBe(true);
+             async.done();
+           });
+
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should set ok to false on 300 return',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 300;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+
+           connection.response.subscribe(
+               (res: Response) => { throw 'should not be called'; },
+               (errRes: Response) => {
+                 expect(errRes.ok).toBe(false);
+                 async.done();
+               });
+
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should call error and not complete on 300+ codes',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           let nextCalled = false;
+           const errorCalled = false;
+           const statusCode = 301;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+
+           connection.response.subscribe(
+               (res: Response) => { nextCalled = true; },
+               (errRes: Response) => {
+                 expect(errRes.status).toBe(statusCode);
+                 expect(nextCalled).toBe(false);
+                 async.done();
+               },
+               () => { throw 'should not be called'; });
+
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should normalize IE\'s 1223 status code into 204',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 1223;
+           const normalizedCode = 204;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.status).toBe(normalizedCode);
+             async.done();
+           });
+
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should ignore response body for 204 status code',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 204;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.text()).toBe('');
+             async.done();
+           });
+
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].setResponseText('Doge');
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should normalize responseText and response',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const responseBody = 'Doge';
+
+           const connection1 =
+               new XHRConnection(sampleRequest, new MockBrowserXHR(), new ResponseOptions());
+
+           const connection2 =
+               new XHRConnection(sampleRequest, new MockBrowserXHR(), new ResponseOptions());
+
+           connection1.response.subscribe((res: Response) => {
+             expect(res.text()).toBe(responseBody);
+
+             connection2.response.subscribe((res: Response) => {
+               expect(res.text()).toBe(responseBody);
+               async.done();
+             });
+             existingXHRs[1].setStatusCode(200);
+             existingXHRs[1].setResponse(responseBody);
+             existingXHRs[1].dispatchEvent('load');
+           });
+           existingXHRs[0].setStatusCode(200);
+           existingXHRs[0].setResponseText(responseBody);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should strip XSSI prefixes', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const conn =
+               new XHRConnection(sampleRequest, new MockBrowserXHR(), new ResponseOptions());
+           conn.response.subscribe((res: Response) => {
+             expect(res.text()).toBe('{json: "object"}');
+             async.done();
+           });
+           existingXHRs[0].setStatusCode(200);
+           existingXHRs[0].setResponseText(')]}\'\n{json: "object"}');
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should strip XSSI prefixes', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const conn =
+               new XHRConnection(sampleRequest, new MockBrowserXHR(), new ResponseOptions());
+           conn.response.subscribe((res: Response) => {
+             expect(res.text()).toBe('{json: "object"}');
+             async.done();
+           });
+           existingXHRs[0].setStatusCode(200);
+           existingXHRs[0].setResponseText(')]}\',\n{json: "object"}');
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should strip XSSI prefix from errors',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const conn =
+               new XHRConnection(sampleRequest, new MockBrowserXHR(), new ResponseOptions());
+           conn.response.subscribe(null !, (res: Response) => {
+             expect(res.text()).toBe('{json: "object"}');
+             async.done();
+           });
+           existingXHRs[0].setStatusCode(404);
+           existingXHRs[0].setResponseText(')]}\'\n{json: "object"}');
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should parse response headers and add them to the response',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 200;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+
+           const responseHeaderString = `Date: Fri, 20 Nov 2015 01:45:26 GMT
+Content-Type: application/json; charset=utf-8
+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');
+             async.done();
+           });
+
+           existingXHRs[0].setResponseHeaders(responseHeaderString);
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should add the responseURL to the response',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 200;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.url).toEqual('http://google.com');
+             async.done();
+           });
+
+           existingXHRs[0].setResponseURL('http://google.com');
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should add use the X-Request-URL in CORS situations',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 200;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+           const responseHeaders = `X-Request-URL: http://somedomain.com
+           Foo: Bar`;
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.url).toEqual('http://somedomain.com');
+             async.done();
+           });
+
+           existingXHRs[0].setResponseHeaders(responseHeaders);
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should return request url if it cannot be retrieved from response',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 200;
+           const connection = new XHRConnection(
+               sampleRequest, new MockBrowserXHR(), new ResponseOptions({status: statusCode}));
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.url).toEqual('https://google.com');
+             async.done();
+           });
+
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should set the status text property from the XMLHttpRequest instance if present',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusText = 'test';
+           const connection = new XHRConnection(sampleRequest, new MockBrowserXHR());
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.statusText).toBe(statusText);
+             async.done();
+           });
+
+           existingXHRs[0].setStatusText(statusText);
+           existingXHRs[0].setStatusCode(200);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should set status text to "OK" if it is not present in XMLHttpRequest instance',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const connection = new XHRConnection(sampleRequest, new MockBrowserXHR());
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.statusText).toBe('OK');
+             async.done();
+           });
+
+           existingXHRs[0].setStatusCode(200);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should set withCredentials to true when defined in request options for CORS situations',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 200;
+           sampleRequest.withCredentials = true;
+           const mockXhr = new MockBrowserXHR();
+           const connection =
+               new XHRConnection(sampleRequest, mockXhr, new ResponseOptions({status: statusCode}));
+           const responseHeaders = `X-Request-URL: http://somedomain.com
+           Foo: Bar`;
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.url).toEqual('http://somedomain.com');
+             expect(existingXHRs[0].withCredentials).toBeTruthy();
+             async.done();
+           });
+
+           existingXHRs[0].setResponseHeaders(responseHeaders);
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should set the responseType attribute to blob when the corresponding response content type is present',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const statusCode = 200;
+           const base = new BaseRequestOptions();
+           const connection = new XHRConnection(
+               new Request(
+                   base.merge(new RequestOptions({responseType: ResponseContentType.Blob}))),
+               new MockBrowserXHR());
+
+           connection.response.subscribe((res: Response) => {
+             expect(existingXHRs[0].responseType).toBe('blob');
+             async.done();
+           });
+
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+
+      it('should not throw invalidStateError if response without body and responseType not equal to text',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const base = new BaseRequestOptions();
+           const connection = new XHRConnection(
+               new Request(
+                   base.merge(new RequestOptions({responseType: ResponseContentType.Json}))),
+               new MockBrowserXHR());
+
+           connection.response.subscribe((res: Response) => {
+             expect(res.json()).toBe(null);
+             async.done();
+           });
+
+           existingXHRs[0].setStatusCode(204);
+           existingXHRs[0].dispatchEvent('load');
+         }));
+    });
+  });
+}
diff --git a/packages/http/test/base_request_options_spec.ts b/packages/http/test/base_request_options_spec.ts
new file mode 100644
index 000000000000..ce2b0811c1fe
--- /dev/null
+++ b/packages/http/test/base_request_options_spec.ts
@@ -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
+ */
+
+import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {BaseRequestOptions, RequestOptions} from '@angular/http/src/base_request_options';
+import {RequestMethod} from '@angular/http/src/enums';
+import {Headers} from '@angular/http/src/headers';
+
+{
+  describe('BaseRequestOptions', () => {
+    it('should create a new object when calling merge', () => {
+      const options1 = new BaseRequestOptions();
+      const options2 = options1.merge(new RequestOptions({method: RequestMethod.Delete}));
+      expect(options2).not.toBe(options1);
+      expect(options2.method).toBe(RequestMethod.Delete);
+    });
+
+    it('should retain previously merged values when merging again', () => {
+      const options1 = new BaseRequestOptions();
+      const options2 = options1.merge(new RequestOptions({method: RequestMethod.Delete}));
+      expect(options2.method).toBe(RequestMethod.Delete);
+    });
+
+    it('should accept search params as object', () => {
+      const params = {a: 1, b: 'text', c: [1, 2, '3']};
+      const options = new RequestOptions({params});
+
+      expect(options.params.paramsMap.size).toBe(3);
+      expect(options.params.paramsMap.get('a')).toEqual(['1']);
+      expect(options.params.paramsMap.get('b')).toEqual(['text']);
+      expect(options.params.paramsMap.get('c')).toEqual(['1', '2', '3']);
+    });
+
+    it('should merge search params as object', () => {
+      const options1 = new BaseRequestOptions();
+      const params = {a: 1, b: 'text', c: [1, 2, '3']};
+      const options2 = options1.merge(new RequestOptions({params}));
+
+      expect(options2.params.paramsMap.size).toBe(3);
+      expect(options2.params.paramsMap.get('a')).toEqual(['1']);
+      expect(options2.params.paramsMap.get('b')).toEqual(['text']);
+      expect(options2.params.paramsMap.get('c')).toEqual(['1', '2', '3']);
+    });
+
+    it('should create a new headers object when calling merge', () => {
+      const options1 = new RequestOptions({headers: new Headers()});
+      const options2 = options1.merge();
+      expect(options2.headers).not.toBe(options1.headers);
+    });
+  });
+}
diff --git a/packages/http/test/headers_spec.ts b/packages/http/test/headers_spec.ts
new file mode 100644
index 000000000000..f5684ceeb913
--- /dev/null
+++ b/packages/http/test/headers_spec.ts
@@ -0,0 +1,192 @@
+/**
+ * @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 {Headers} from '@angular/http/src/headers';
+
+{
+  describe('Headers', () => {
+
+    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 Headers(httpHeaders);
+        const secondHeadersObj = new Headers(secondHeaders);
+        expect(secondHeadersObj.get('Content-Type')).toEqual('image/jpeg');
+      });
+
+      it('should merge values in provided dictionary', () => {
+        const headers = new Headers({'foo': 'bar'});
+        expect(headers.get('foo')).toEqual('bar');
+        expect(headers.getAll('foo')).toEqual(['bar']);
+      });
+
+      it('should not alter the values of a provided header template', () => {
+        // Spec at https://fetch.spec.whatwg.org/#concept-headers-fill
+        // test for https://github.com/angular/angular/issues/6845
+        const firstHeaders = new Headers();
+        const secondHeaders = new Headers(firstHeaders);
+        secondHeaders.append('Content-Type', 'image/jpeg');
+        expect(firstHeaders.has('Content-Type')).toEqual(false);
+      });
+
+      it('should preserve the list of values', () => {
+        const src = new Headers();
+        src.append('foo', 'a');
+        src.append('foo', 'b');
+        src.append('foo', 'c');
+        const dst = new Headers(src);
+        expect(dst.getAll('foo')).toEqual(src.getAll('foo'));
+      });
+
+      it('should keep the last value when initialized from an object', () => {
+        const headers = new Headers({
+          '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 Headers({'foo': 'bar'});
+        expect(headers.get('foo')).toEqual('bar');
+
+        headers.set('foo', 'baz');
+        expect(headers.get('foo')).toEqual('baz');
+
+        headers.set('fOO', 'bat');
+        expect(headers.get('foo')).toEqual('bat');
+      });
+
+      it('should preserve the case of the first call', () => {
+        const headers = new Headers();
+        headers.set('fOo', 'baz');
+        headers.set('foo', 'bat');
+        expect(JSON.stringify(headers)).toEqual('{"fOo":["bat"]}');
+      });
+
+      it('should preserve cases after cloning', () => {
+        const headers = new Headers();
+        headers.set('fOo', 'baz');
+        headers.set('foo', 'bat');
+        expect(JSON.stringify(new Headers(headers))).toEqual('{"fOo":["bat"]}');
+      });
+
+      it('should convert input array to string', () => {
+        const headers = new Headers();
+        headers.set('foo', ['bar', 'baz']);
+        expect(headers.get('foo')).toEqual('bar,baz');
+        expect(headers.getAll('foo')).toEqual(['bar,baz']);
+      });
+    });
+
+    describe('.get()', () => {
+      it('should be case insensitive', () => {
+        const headers = new Headers();
+        headers.set('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 Headers({bar: []});
+        expect(headers.get('bar')).toEqual(null);
+        expect(headers.get('foo')).toEqual(null);
+      });
+    });
+
+    describe('.getAll()', () => {
+      it('should be case insensitive', () => {
+        const headers = new Headers({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 Headers();
+        expect(headers.getAll('foo')).toEqual(null);
+      });
+    });
+
+    describe('.delete', () => {
+      it('should be case insensitive', () => {
+        const headers = new Headers();
+
+        headers.set('foo', 'baz');
+        expect(headers.has('foo')).toEqual(true);
+        headers.delete('foo');
+        expect(headers.has('foo')).toEqual(false);
+
+        headers.set('foo', 'baz');
+        expect(headers.has('foo')).toEqual(true);
+        headers.delete('FOO');
+        expect(headers.has('foo')).toEqual(false);
+      });
+    });
+
+    describe('.append', () => {
+      it('should append a value to the list', () => {
+        const headers = new Headers();
+        headers.append('foo', 'bar');
+        headers.append('foo', 'baz');
+        expect(headers.get('foo')).toEqual('bar');
+        expect(headers.getAll('foo')).toEqual(['bar', 'baz']);
+      });
+
+      it('should preserve the case of the first call', () => {
+        const headers = new Headers();
+
+        headers.append('FOO', 'bar');
+        headers.append('foo', 'baz');
+        expect(JSON.stringify(headers)).toEqual('{"FOO":["bar","baz"]}');
+      });
+    });
+
+    describe('.toJSON()', () => {
+      let headers: Headers;
+      let values: string[];
+      let ref: {[name: string]: string[]};
+
+      beforeEach(() => {
+        values = ['application/jeisen', 'application/jason', 'application/patrickjs'];
+        headers = new Headers();
+        headers.set('Accept', values);
+        ref = {'Accept': values};
+      });
+
+      it('should be serializable with toJSON',
+         () => { expect(JSON.stringify(headers)).toEqual(JSON.stringify(ref)); });
+
+      it('should be able to recreate serializedHeaders', () => {
+        const parsedHeaders = JSON.parse(JSON.stringify(headers));
+        const recreatedHeaders = new Headers(parsedHeaders);
+        expect(JSON.stringify(parsedHeaders)).toEqual(JSON.stringify(recreatedHeaders));
+      });
+    });
+
+    describe('.fromResponseHeaderString()', () => {
+      it('should parse a response header string', () => {
+        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 = Headers.fromResponseHeaderString(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/http/test/http_spec.ts b/packages/http/test/http_spec.ts
new file mode 100644
index 000000000000..669de8b0f515
--- /dev/null
+++ b/packages/http/test/http_spec.ts
@@ -0,0 +1,539 @@
+/**
+ * @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 '@angular/core';
+import {TestBed, getTestBed} from '@angular/core/testing';
+import {AsyncTestCompleter, afterEach, beforeEach, describe, inject, it} from '@angular/core/testing/src/testing_internal';
+import {stringToArrayBuffer} from '@angular/http/src/http_utils';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+import {Observable, zip} from 'rxjs';
+
+import {BaseRequestOptions, ConnectionBackend, Http, HttpModule, JSONPBackend, Jsonp, JsonpModule, Request, RequestMethod, RequestOptions, Response, ResponseContentType, ResponseOptions, URLSearchParams, XHRBackend} from '../index';
+import {MockBackend, MockConnection} from '../testing/src/mock_backend';
+
+{
+  describe('injectables', () => {
+    const url = 'http://foo.bar';
+    let http: Http;
+    let injector: Injector;
+    let jsonpBackend: MockBackend;
+    let xhrBackend: MockBackend;
+    let jsonp: Jsonp;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [HttpModule, JsonpModule],
+        providers: [
+          {provide: XHRBackend, useClass: MockBackend},
+          {provide: JSONPBackend, useClass: MockBackend}
+        ]
+      });
+      injector = getTestBed();
+    });
+
+    it('should allow using jsonpInjectables and httpInjectables in same injector',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+
+         http = injector.get(Http);
+         jsonp = injector.get(Jsonp);
+         jsonpBackend = injector.get(JSONPBackend) as any as MockBackend;
+         xhrBackend = injector.get(XHRBackend) as any as MockBackend;
+
+         let xhrCreatedConnections = 0;
+         let jsonpCreatedConnections = 0;
+
+         xhrBackend.connections.subscribe(() => {
+           xhrCreatedConnections++;
+           expect(xhrCreatedConnections).toEqual(1);
+           if (jsonpCreatedConnections) {
+             async.done();
+           }
+         });
+
+         http.get(url).subscribe(() => {});
+
+         jsonpBackend.connections.subscribe(() => {
+           jsonpCreatedConnections++;
+           expect(jsonpCreatedConnections).toEqual(1);
+           if (xhrCreatedConnections) {
+             async.done();
+           }
+         });
+
+         jsonp.request(url).subscribe(() => {});
+       }));
+  });
+
+  describe('http', () => {
+    const url = 'http://foo.bar';
+    let http: Http;
+    let injector: Injector;
+    let backend: MockBackend;
+    let baseResponse: Response;
+    let jsonp: Jsonp;
+
+    beforeEach(() => {
+      injector = Injector.create([
+        {provide: BaseRequestOptions, deps: []}, {provide: MockBackend, deps: []}, {
+          provide: Http,
+          useFactory: function(backend: ConnectionBackend, defaultOptions: BaseRequestOptions) {
+            return new Http(backend, defaultOptions);
+          },
+          deps: [MockBackend, BaseRequestOptions]
+        },
+        {
+          provide: Jsonp,
+          useFactory: function(backend: ConnectionBackend, defaultOptions: BaseRequestOptions) {
+            return new Jsonp(backend, defaultOptions);
+          },
+          deps: [MockBackend, BaseRequestOptions]
+        }
+      ]);
+      http = injector.get(Http);
+      jsonp = injector.get(Jsonp);
+      backend = injector.get(MockBackend);
+      baseResponse = new Response(new ResponseOptions({body: 'base response'}));
+      spyOn(Http.prototype, 'request').and.callThrough();
+    });
+
+    afterEach(() => backend.verifyNoPendingRequests());
+
+    describe('Http', () => {
+      describe('.request()', () => {
+        it('should return an Observable',
+           () => { expect(http.request(url)).toBeAnInstanceOf(Observable); });
+
+
+        it('should accept a fully-qualified request as its only parameter',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.url).toBe('https://google.com');
+               c.mockRespond(new Response(new ResponseOptions({body: 'Thank you'})));
+               async.done();
+             });
+             http.request(new Request(new RequestOptions({url: 'https://google.com'})))
+                 .subscribe((res: Response) => {});
+           }));
+
+        it('should accept a fully-qualified request as its only parameter',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.url).toBe('https://google.com');
+               expect(c.request.method).toBe(RequestMethod.Post);
+               c.mockRespond(new Response(new ResponseOptions({body: 'Thank you'})));
+               async.done();
+             });
+             http.request(new Request(new RequestOptions(
+                              {url: 'https://google.com', method: RequestMethod.Post})))
+                 .subscribe((res: Response) => {});
+           }));
+
+
+        it('should perform a get request for given url if only passed a string',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => c.mockRespond(baseResponse));
+             http.request('http://basic.connection').subscribe((res: Response) => {
+               expect(res.text()).toBe('base response');
+               async.done();
+             });
+           }));
+
+        it('should perform a post request for given url if options include a method',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.method).toEqual(RequestMethod.Post);
+               c.mockRespond(baseResponse);
+             });
+             const requestOptions = new RequestOptions({method: RequestMethod.Post});
+             http.request('http://basic.connection', requestOptions).subscribe((res: Response) => {
+               expect(res.text()).toBe('base response');
+               async.done();
+             });
+           }));
+
+        it('should perform a post request for given url if options include a method',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.method).toEqual(RequestMethod.Post);
+               c.mockRespond(baseResponse);
+             });
+             const requestOptions = {method: RequestMethod.Post};
+             http.request('http://basic.connection', requestOptions).subscribe((res: Response) => {
+               expect(res.text()).toBe('base response');
+               async.done();
+             });
+           }));
+
+        it('should perform a get request and complete the response',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => c.mockRespond(baseResponse));
+             http.request('http://basic.connection')
+                 .subscribe(
+                     (res: Response) => { expect(res.text()).toBe('base response'); }, null !,
+                     () => { async.done(); });
+           }));
+
+        it('should perform multiple get requests and complete the responses',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => c.mockRespond(baseResponse));
+
+             http.request('http://basic.connection').subscribe((res: Response) => {
+               expect(res.text()).toBe('base response');
+             });
+             http.request('http://basic.connection')
+                 .subscribe(
+                     (res: Response) => { expect(res.text()).toBe('base response'); }, null !,
+                     () => { async.done(); });
+           }));
+
+        it('should throw if url is not a string or Request', () => {
+          const req = <Request>{};
+          expect(() => http.request(req))
+              .toThrowError('First argument must be a url string or Request instance.');
+        });
+      });
+
+
+      describe('.get()', () => {
+        it('should perform a get request for given url',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.method).toBe(RequestMethod.Get);
+               expect(http.request).toHaveBeenCalled();
+               backend.resolveAllConnections();
+               async.done();
+             });
+             expect(http.request).not.toHaveBeenCalled();
+             http.get(url).subscribe((res: Response) => {});
+           }));
+      });
+
+
+      describe('.post()', () => {
+        it('should perform a post request for given url',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.method).toBe(RequestMethod.Post);
+               expect(http.request).toHaveBeenCalled();
+               backend.resolveAllConnections();
+               async.done();
+             });
+             expect(http.request).not.toHaveBeenCalled();
+             http.post(url, 'post me').subscribe((res: Response) => {});
+           }));
+
+
+        it('should attach the provided body to the request',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             const body = 'this is my post body';
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.text()).toBe(body);
+               backend.resolveAllConnections();
+               async.done();
+             });
+             http.post(url, body).subscribe((res: Response) => {});
+           }));
+      });
+
+
+      describe('.put()', () => {
+        it('should perform a put request for given url',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.method).toBe(RequestMethod.Put);
+               expect(http.request).toHaveBeenCalled();
+               backend.resolveAllConnections();
+               async.done();
+             });
+             expect(http.request).not.toHaveBeenCalled();
+             http.put(url, 'put me').subscribe((res: Response) => {});
+           }));
+
+        it('should attach the provided body to the request',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             const body = 'this is my put body';
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.text()).toBe(body);
+               backend.resolveAllConnections();
+               async.done();
+             });
+             http.put(url, body).subscribe((res: Response) => {});
+           }));
+      });
+
+
+      describe('.delete()', () => {
+        it('should perform a delete request for given url',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.method).toBe(RequestMethod.Delete);
+               expect(http.request).toHaveBeenCalled();
+               backend.resolveAllConnections();
+               async.done();
+             });
+             expect(http.request).not.toHaveBeenCalled();
+             http.delete(url).subscribe((res: Response) => {});
+           }));
+      });
+
+
+      describe('.patch()', () => {
+        it('should perform a patch request for given url',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.method).toBe(RequestMethod.Patch);
+               expect(http.request).toHaveBeenCalled();
+               backend.resolveAllConnections();
+               async.done();
+             });
+             expect(http.request).not.toHaveBeenCalled();
+             http.patch(url, 'this is my patch body').subscribe((res: Response) => {});
+           }));
+
+        it('should attach the provided body to the request',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             const body = 'this is my patch body';
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.text()).toBe(body);
+               backend.resolveAllConnections();
+               async.done();
+             });
+             http.patch(url, body).subscribe((res: Response) => {});
+           }));
+      });
+
+
+      describe('.head()', () => {
+        it('should perform a head request for given url',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.method).toBe(RequestMethod.Head);
+               expect(http.request).toHaveBeenCalled();
+               backend.resolveAllConnections();
+               async.done();
+             });
+             expect(http.request).not.toHaveBeenCalled();
+             http.head(url).subscribe((res: Response) => {});
+           }));
+      });
+
+
+      describe('.options()', () => {
+        it('should perform an options request for given url',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.method).toBe(RequestMethod.Options);
+               expect(http.request).toHaveBeenCalled();
+               backend.resolveAllConnections();
+               async.done();
+             });
+             expect(http.request).not.toHaveBeenCalled();
+             http.options(url).subscribe((res: Response) => {});
+           }));
+      });
+
+
+      describe('searchParams', () => {
+        it('should append search params to url',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             const params = new URLSearchParams();
+             params.append('q', 'puppies');
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.url).toEqual('https://www.google.com?q=puppies');
+               backend.resolveAllConnections();
+               async.done();
+             });
+             http.get('https://www.google.com', new RequestOptions({search: params}))
+                 .subscribe((res: Response) => {});
+           }));
+
+        it('should append string search params to url',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.url).toEqual('https://www.google.com?q=piggies');
+               backend.resolveAllConnections();
+               async.done();
+             });
+             http.get('https://www.google.com', new RequestOptions({search: 'q=piggies'}))
+                 .subscribe((res: Response) => {});
+           }));
+
+        it('should produce valid url when url already contains a query',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.url).toEqual('https://www.google.com?q=angular&as_eq=1.x');
+               backend.resolveAllConnections();
+               async.done();
+             });
+             http.get('https://www.google.com?q=angular', new RequestOptions({search: 'as_eq=1.x'}))
+                 .subscribe((res: Response) => {});
+           }));
+      });
+
+      describe('params', () => {
+        it('should append params to url',
+           inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+             backend.connections.subscribe((c: MockConnection) => {
+               expect(c.request.url).toEqual('https://www.google.com?q=puppies');
+               backend.resolveAllConnections();
+               async.done();
+             });
+             http.get('https://www.google.com', {params: {q: 'puppies'}})
+                 .subscribe((res: Response) => {});
+           }));
+      });
+
+      describe('string method names', () => {
+        it('should allow case insensitive strings for method names', () => {
+          inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+            backend.connections.subscribe((c: MockConnection) => {
+              expect(c.request.method).toBe(RequestMethod.Post);
+              c.mockRespond(new Response(new ResponseOptions({body: 'Thank you'})));
+              async.done();
+            });
+            http.request(
+                    new Request(new RequestOptions({url: 'https://google.com', method: 'PosT'})))
+                .subscribe((res: Response) => {});
+          });
+        });
+
+        it('should throw when invalid string parameter is passed for method name', () => {
+          expect(() => {
+            http.request(
+                new Request(new RequestOptions({url: 'https://google.com', method: 'Invalid'})));
+          }).toThrowError('Invalid request method. The method "Invalid" is not supported.');
+        });
+      });
+    });
+
+    describe('Jsonp', () => {
+      describe('.request()', () => {
+        it('should throw if url is not a string or Request', () => {
+          const req = <Request>{};
+          expect(() => jsonp.request(req))
+              .toThrowError('First argument must be a url string or Request instance.');
+        });
+      });
+    });
+
+    describe('response buffer', () => {
+
+      it('should attach the provided buffer to the response',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           backend.connections.subscribe((c: MockConnection) => {
+             expect(c.request.responseType).toBe(ResponseContentType.ArrayBuffer);
+             c.mockRespond(new Response(new ResponseOptions({body: new ArrayBuffer(32)})));
+             async.done();
+           });
+           http.get(
+                   'https://www.google.com',
+                   new RequestOptions({responseType: ResponseContentType.ArrayBuffer}))
+               .subscribe((res: Response) => {});
+         }));
+
+      it('should be able to consume a buffer containing a String as any response type',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           backend.connections.subscribe((c: MockConnection) => c.mockRespond(baseResponse));
+           http.get('https://www.google.com').subscribe((res: Response) => {
+             expect(res.arrayBuffer()).toBeAnInstanceOf(ArrayBuffer);
+             expect(res.text()).toBe('base response');
+             async.done();
+           });
+         }));
+
+
+      it('should be able to consume a buffer containing an ArrayBuffer as any response type',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const arrayBuffer = stringToArrayBuffer('{"response": "ok"}');
+           backend.connections.subscribe(
+               (c: MockConnection) =>
+                   c.mockRespond(new Response(new ResponseOptions({body: arrayBuffer}))));
+           http.get('https://www.google.com').subscribe((res: Response) => {
+             expect(res.arrayBuffer()).toBe(arrayBuffer);
+             expect(res.text()).toEqual('{"response": "ok"}');
+             expect(res.json()).toEqual({response: 'ok'});
+             async.done();
+           });
+         }));
+
+      it('should be able to consume a buffer containing an Object as any response type',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const simpleObject = {'content': 'ok'};
+           backend.connections.subscribe(
+               (c: MockConnection) =>
+                   c.mockRespond(new Response(new ResponseOptions({body: simpleObject}))));
+           http.get('https://www.google.com').subscribe((res: Response) => {
+             expect(res.arrayBuffer()).toBeAnInstanceOf(ArrayBuffer);
+             expect(res.text()).toEqual(JSON.stringify(simpleObject, null, 2));
+             expect(res.json()).toBe(simpleObject);
+             async.done();
+           });
+         }));
+
+      it('should preserve encoding of ArrayBuffer response',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const message = 'é@θЂ';
+           const arrayBuffer = stringToArrayBuffer(message);
+           backend.connections.subscribe(
+               (c: MockConnection) =>
+                   c.mockRespond(new Response(new ResponseOptions({body: arrayBuffer}))));
+           http.get('https://www.google.com').subscribe((res: Response) => {
+             expect(res.arrayBuffer()).toBeAnInstanceOf(ArrayBuffer);
+             expect(res.text()).toEqual(message);
+             async.done();
+           });
+         }));
+
+      it('should preserve encoding of String response',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const message = 'é@θЂ';
+           backend.connections.subscribe(
+               (c: MockConnection) =>
+                   c.mockRespond(new Response(new ResponseOptions({body: message}))));
+           http.get('https://www.google.com').subscribe((res: Response) => {
+             expect(res.arrayBuffer()).toEqual(stringToArrayBuffer(message));
+             async.done();
+           });
+         }));
+
+      it('should have an equivalent response independently of the buffer used',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const message = {'param': 'content'};
+
+           backend.connections.subscribe((c: MockConnection) => {
+             const body = (): any => {
+               switch (c.request.responseType) {
+                 case ResponseContentType.Text:
+                   return JSON.stringify(message, null, 2);
+                 case ResponseContentType.Json:
+                   return message;
+                 case ResponseContentType.ArrayBuffer:
+                   return stringToArrayBuffer(JSON.stringify(message, null, 2));
+               }
+             };
+             c.mockRespond(new Response(new ResponseOptions({body: body()})));
+           });
+
+           zip(http.get(
+                   'https://www.google.com',
+                   new RequestOptions({responseType: ResponseContentType.Text})),
+               http.get(
+                   'https://www.google.com',
+                   new RequestOptions({responseType: ResponseContentType.Json})),
+               http.get(
+                   'https://www.google.com',
+                   new RequestOptions({responseType: ResponseContentType.ArrayBuffer})))
+               .subscribe((res: Array<any>) => {
+                 expect(res[0].text()).toEqual(res[1].text());
+                 expect(res[1].text()).toEqual(res[2].text());
+                 async.done();
+               });
+         }));
+    });
+  });
+}
diff --git a/packages/http/test/static_request_spec.ts b/packages/http/test/static_request_spec.ts
new file mode 100644
index 000000000000..06072d045aac
--- /dev/null
+++ b/packages/http/test/static_request_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 {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {RequestOptions} from '@angular/http/src/base_request_options';
+import {ContentType} from '@angular/http/src/enums';
+import {Headers} from '@angular/http/src/headers';
+import {stringToArrayBuffer, stringToArrayBuffer8} from '@angular/http/src/http_utils';
+import {ArrayBuffer, Request} from '@angular/http/src/static_request';
+import {ɵgetDOM as getDOM} from '@angular/platform-browser';
+
+{
+  describe('Request', () => {
+    describe('detectContentType', () => {
+      it('should return ContentType.NONE', () => {
+        const req =
+            new Request(new RequestOptions({url: 'test', method: 'GET', body: null}) as any);
+
+        expect(req.detectContentType()).toEqual(ContentType.NONE);
+      });
+
+      it('should return ContentType.JSON', () => {
+        const req = new Request(new RequestOptions({
+          url: 'test',
+          method: 'GET',
+          body: null,
+          headers: new Headers({'content-type': 'application/json'})
+        }) as any);
+
+        expect(req.detectContentType()).toEqual(ContentType.JSON);
+      });
+
+      it('should return ContentType.FORM', () => {
+        const req = new Request(new RequestOptions({
+          url: 'test',
+          method: 'GET',
+          body: null,
+          headers: new Headers({'content-type': 'application/x-www-form-urlencoded'})
+        }) as any);
+
+        expect(req.detectContentType()).toEqual(ContentType.FORM);
+      });
+
+      it('should return ContentType.FORM_DATA', () => {
+        const req = new Request(new RequestOptions({
+          url: 'test',
+          method: 'GET',
+          body: null,
+          headers: new Headers({'content-type': 'multipart/form-data'})
+        }) as any);
+
+        expect(req.detectContentType()).toEqual(ContentType.FORM_DATA);
+      });
+
+      it('should return ContentType.TEXT', () => {
+        const req = new Request(new RequestOptions({
+          url: 'test',
+          method: 'GET',
+          body: null,
+          headers: new Headers({'content-type': 'text/plain'})
+        }) as any);
+
+        expect(req.detectContentType()).toEqual(ContentType.TEXT);
+      });
+
+      it('should return ContentType.BLOB', () => {
+        const req = new Request(new RequestOptions({
+          url: 'test',
+          method: 'GET',
+          body: null,
+          headers: new Headers({'content-type': 'application/octet-stream'})
+        }) as any);
+
+        expect(req.detectContentType()).toEqual(ContentType.BLOB);
+      });
+
+      it('should not create a blob out of ArrayBuffer', () => {
+        const req = new Request(new RequestOptions({
+          url: 'test',
+          method: 'GET',
+          body: new ArrayBuffer(1),
+          headers: new Headers({'content-type': 'application/octet-stream'})
+        }) as any);
+
+        expect(req.detectContentType()).toEqual(ContentType.ARRAY_BUFFER);
+      });
+    });
+
+    it('should return empty string if no body is present', () => {
+      const req = new Request(new RequestOptions({
+        url: 'test',
+        method: 'GET',
+        body: null,
+        headers: new Headers({'content-type': 'application/json'})
+      }) as any);
+
+      expect(req.text()).toEqual('');
+    });
+
+    it('should return empty string if body is undefined', () => {
+      const reqOptions = new RequestOptions(
+          {url: 'test', method: 'GET', headers: new Headers({'content-type': 'application/json'})});
+      delete reqOptions.body;
+      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/static_response_spec.ts b/packages/http/test/static_response_spec.ts
new file mode 100644
index 000000000000..00300ef13749
--- /dev/null
+++ b/packages/http/test/static_response_spec.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+import {ResponseOptions} from '@angular/http/src/base_response_options';
+import {Response} from '@angular/http/src/static_response';
+
+
+
+{
+  describe('Response', () => {
+    it('should be ok for 200 statuses', () => {
+      expect(new Response(new ResponseOptions({status: 200})).ok).toEqual(true);
+      expect(new Response(new ResponseOptions({status: 299})).ok).toEqual(true);
+    });
+
+    it('should not be ok for non 200 statuses', () => {
+      expect(new Response(new ResponseOptions({status: 199})).ok).toEqual(false);
+      expect(new Response(new ResponseOptions({status: 300})).ok).toEqual(false);
+    });
+  });
+}
diff --git a/packages/http/test/url_search_params_spec.ts b/packages/http/test/url_search_params_spec.ts
new file mode 100644
index 000000000000..8144ce95ae9a
--- /dev/null
+++ b/packages/http/test/url_search_params_spec.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 {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {URLSearchParams} from '@angular/http/src/url_search_params';
+
+{
+  describe('URLSearchParams', () => {
+    it('should conform to spec', () => {
+      const paramsString = 'q=URLUtils.searchParams&topic=api';
+      const searchParams = new URLSearchParams(paramsString);
+
+      // Tests borrowed from example at
+      // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
+      // Compliant with spec described at https://url.spec.whatwg.org/#urlsearchparams
+      expect(searchParams.has('topic')).toBe(true);
+      expect(searchParams.has('foo')).toBe(false);
+      expect(searchParams.get('topic')).toEqual('api');
+      expect(searchParams.getAll('topic')).toEqual(['api']);
+      expect(searchParams.get('foo')).toBe(null);
+      searchParams.append('topic', 'webdev');
+      expect(searchParams.getAll('topic')).toEqual(['api', 'webdev']);
+      expect(searchParams.toString()).toEqual('q=URLUtils.searchParams&topic=api&topic=webdev');
+      searchParams.delete('topic');
+      expect(searchParams.toString()).toEqual('q=URLUtils.searchParams');
+
+      // Test default constructor
+      expect(new URLSearchParams().toString()).toBe('');
+    });
+
+
+    it('should optionally accept a custom parser', () => {
+      const fooEveryThingParser = {
+        encodeKey() { return 'I AM KEY'; },
+        encodeValue() { return 'I AM VALUE'; }
+      };
+      const params = new URLSearchParams('', fooEveryThingParser);
+      params.set('myKey', 'myValue');
+      expect(params.toString()).toBe('I AM KEY=I AM VALUE');
+    });
+
+
+    it('should encode special characters in params', () => {
+      const searchParams = new URLSearchParams();
+      searchParams.append('a', '1+1');
+      searchParams.append('b c', '2');
+      searchParams.append('d%', '3$');
+      expect(searchParams.toString()).toEqual('a=1+1&b%20c=2&d%25=3$');
+    });
+
+
+    it('should not encode allowed characters', () => {
+      /*
+       * https://tools.ietf.org/html/rfc3986#section-3.4
+       * Allowed: ( pchar / "/" / "?" )
+       * pchar: unreserved / pct-encoded / sub-delims / ":" / "@"
+       * unreserved: ALPHA / DIGIT / "-" / "." / "_" / "~"
+       * pct-encoded: "%" HEXDIG HEXDIG
+       * sub-delims: "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="
+       *
+       * & and = are excluded and should be encoded inside keys and values
+       * because URLSearchParams is responsible for inserting this.
+       **/
+
+      let params = new URLSearchParams();
+      '! $ \' ( ) * + , ; A 9 - . _ ~ ? / ='.split(' ').forEach(
+          (char, idx) => { params.set(`a${idx}`, char); });
+      expect(params.toString())
+          .toBe(
+              `a0=!&a1=$&a2=\'&a3=(&a4=)&a5=*&a6=+&a7=,&a8=;&a9=A&a10=9&a11=-&a12=.&a13=_&a14=~&a15=?&a16=/&a17==`
+                  .replace(/\s/g, ''));
+
+
+      // Original example from https://github.com/angular/angular/issues/9348 for posterity
+      params = new URLSearchParams();
+      params.set('q', 'repo:janbaer/howcani+type:issue');
+      params.set('sort', 'created');
+      params.set('order', 'desc');
+      params.set('page', '1');
+      expect(params.toString())
+          .toBe('q=repo:janbaer/howcani+type:issue&sort=created&order=desc&page=1');
+    });
+
+
+    it('should support map-like merging operation via setAll()', () => {
+      const mapA = new URLSearchParams('a=1&a=2&a=3&c=8');
+      const mapB = new URLSearchParams('a=4&a=5&a=6&b=7');
+      mapA.setAll(mapB);
+      expect(mapA.has('a')).toBe(true);
+      expect(mapA.has('b')).toBe(true);
+      expect(mapA.has('c')).toBe(true);
+      expect(mapA.getAll('a')).toEqual(['4']);
+      expect(mapA.getAll('b')).toEqual(['7']);
+      expect(mapA.getAll('c')).toEqual(['8']);
+      expect(mapA.toString()).toEqual('a=4&c=8&b=7');
+    });
+
+
+    it('should support multimap-like merging operation via appendAll()', () => {
+      const mapA = new URLSearchParams('a=1&a=2&a=3&c=8');
+      const mapB = new URLSearchParams('a=4&a=5&a=6&b=7');
+      mapA.appendAll(mapB);
+      expect(mapA.has('a')).toBe(true);
+      expect(mapA.has('b')).toBe(true);
+      expect(mapA.has('c')).toBe(true);
+      expect(mapA.getAll('a')).toEqual(['1', '2', '3', '4', '5', '6']);
+      expect(mapA.getAll('b')).toEqual(['7']);
+      expect(mapA.getAll('c')).toEqual(['8']);
+      expect(mapA.toString()).toEqual('a=1&a=2&a=3&a=4&a=5&a=6&c=8&b=7');
+    });
+
+
+    it('should support multimap-like merging operation via replaceAll()', () => {
+      const mapA = new URLSearchParams('a=1&a=2&a=3&c=8');
+      const mapB = new URLSearchParams('a=4&a=5&a=6&b=7');
+      mapA.replaceAll(mapB);
+      expect(mapA.has('a')).toBe(true);
+      expect(mapA.has('b')).toBe(true);
+      expect(mapA.has('c')).toBe(true);
+      expect(mapA.getAll('a')).toEqual(['4', '5', '6']);
+      expect(mapA.getAll('b')).toEqual(['7']);
+      expect(mapA.getAll('c')).toEqual(['8']);
+      expect(mapA.toString()).toEqual('a=4&a=5&a=6&c=8&b=7');
+    });
+
+    it('should support a clone operation via clone()', () => {
+      const fooQueryEncoder = {
+        encodeKey(k: string) { return encodeURIComponent(k); },
+        encodeValue(v: string) { return encodeURIComponent(v); }
+      };
+      const paramsA = new URLSearchParams('', fooQueryEncoder);
+      paramsA.set('a', '2');
+      paramsA.set('q', '4+');
+      paramsA.set('c', '8');
+      const paramsB = new URLSearchParams();
+      paramsB.set('a', '2');
+      paramsB.set('q', '4+');
+      paramsB.set('c', '8');
+      expect(paramsB.toString()).toEqual('a=2&q=4+&c=8');
+      const paramsC = paramsA.clone();
+      expect(paramsC.has('a')).toBe(true);
+      expect(paramsC.has('b')).toBe(false);
+      expect(paramsC.has('c')).toBe(true);
+      expect(paramsC.toString()).toEqual('a=2&q=4%2B&c=8');
+    });
+
+    it('should remove the parameter when set to undefined or null', () => {
+      const params = new URLSearchParams('q=Q');
+      params.set('q', undefined !);
+      expect(params.has('q')).toBe(false);
+      expect(params.toString()).toEqual('');
+      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 !);
+      expect(params.toString()).toEqual('q=Q');
+      params.append('q', null !);
+      expect(params.toString()).toEqual('q=Q');
+    });
+
+  });
+}
diff --git a/packages/http/testing/BUILD.bazel b/packages/http/testing/BUILD.bazel
new file mode 100644
index 000000000000..8b55de61f475
--- /dev/null
+++ b/packages/http/testing/BUILD.bazel
@@ -0,0 +1,16 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(["**/*.ts"]),
+    module_name = "@angular/http/testing",
+    deps = [
+        "//packages/core",
+        "//packages/http",
+        "@rxjs",
+    ],
+)
diff --git a/packages/http/testing/index.ts b/packages/http/testing/index.ts
new file mode 100644
index 000000000000..7d009e7f45dd
--- /dev/null
+++ b/packages/http/testing/index.ts
@@ -0,0 +1,15 @@
+/**
+ * @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 './public_api';
diff --git a/packages/http/testing/package.json b/packages/http/testing/package.json
new file mode 100644
index 000000000000..705ff2d21bc9
--- /dev/null
+++ b/packages/http/testing/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/http/testing",
+  "typings": "./testing.d.ts",
+  "main": "../bundles/http-testing.umd.js",
+  "module": "../fesm5/testing.js",
+  "es2015": "../fesm2015/testing.js",
+  "esm5": "../esm5/testing/testing.js",
+  "esm2015": "../esm2015/testing/testing.js",
+  "fesm5": "../fesm5/testing.js",
+  "fesm2015": "../fesm2015/testing.js"
+}
diff --git a/packages/http/testing/public_api.ts b/packages/http/testing/public_api.ts
new file mode 100644
index 000000000000..fcc511dc6e48
--- /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 this package.
+ */
+export * from './src/testing';
diff --git a/packages/http/testing/rollup.config.js b/packages/http/testing/rollup.config.js
new file mode 100644
index 000000000000..7281922084da
--- /dev/null
+++ b/packages/http/testing/rollup.config.js
@@ -0,0 +1,31 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/http': 'ng.http',
+  'rxjs': 'rxjs',
+  'rxjs/operators': 'rxjs.operators',
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/http/fesm5/testing.js',
+  dest: '../../../dist/packages-dist/http/bundles/http-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/http/testing'},
+  moduleName: 'ng.http.testing',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/http/testing/src/mock_backend.ts b/packages/http/testing/src/mock_backend.ts
new file mode 100644
index 000000000000..5d6bdd173bf1
--- /dev/null
+++ b/packages/http/testing/src/mock_backend.ts
@@ -0,0 +1,291 @@
+/**
+ * @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 {Connection, ConnectionBackend, ReadyState, Request, Response} from '@angular/http';
+import {ReplaySubject, Subject} from 'rxjs';
+import {take} from 'rxjs/operators';
+
+
+/**
+ *
+ * Mock Connection to represent a {@link Connection} for tests.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+export class MockConnection implements Connection {
+  // TODO: Name `readyState` should change to be more generic, and states could be made to be more
+  // descriptive than ResourceLoader states.
+  /**
+   * Describes the state of the connection, based on `XMLHttpRequest.readyState`, but with
+   * additional states. For example, state 5 indicates an aborted connection.
+   */
+  readyState: ReadyState;
+
+  /**
+   * {@link Request} instance used to create the connection.
+   */
+  request: Request;
+
+  /**
+   * {@link EventEmitter} of {@link Response}. Can be subscribed to in order to be notified when a
+   * response is available.
+   */
+  response: ReplaySubject<Response>;
+
+  constructor(req: Request) {
+    this.response = <any>new ReplaySubject(1).pipe(take(1));
+    this.readyState = ReadyState.Open;
+    this.request = req;
+  }
+
+  /**
+   * Sends a mock response to the connection. This response is the value that is emitted to the
+   * {@link EventEmitter} returned by {@link Http}.
+   *
+   * ### Example
+   *
+   * ```
+   * var connection;
+   * backend.connections.subscribe(c => connection = c);
+   * http.request('data.json').subscribe(res => console.log(res.text()));
+   * connection.mockRespond(new Response(new ResponseOptions({ body: 'fake response' }))); //logs
+   * 'fake response'
+   * ```
+   *
+   */
+  mockRespond(res: Response) {
+    if (this.readyState === ReadyState.Done || this.readyState === ReadyState.Cancelled) {
+      throw new Error('Connection has already been resolved');
+    }
+    this.readyState = ReadyState.Done;
+    this.response.next(res);
+    this.response.complete();
+  }
+
+  /**
+   * Not yet implemented!
+   *
+   * Sends the provided {@link Response} to the `downloadObserver` of the `Request`
+   * associated with this connection.
+   */
+  mockDownload(res: Response) {
+    // this.request.downloadObserver.onNext(res);
+    // if (res.bytesLoaded === res.totalBytes) {
+    //   this.request.downloadObserver.onCompleted();
+    // }
+  }
+
+  // TODO(jeffbcross): consider using Response type
+  /**
+   * Emits the provided error object as an error to the {@link Response} {@link EventEmitter}
+   * returned
+   * from {@link Http}.
+   *
+   * ### Example
+   *
+   * ```
+   * var connection;
+   * backend.connections.subscribe(c => connection = c);
+   * http.request('data.json').subscribe(res => res, err => console.log(err)));
+   * connection.mockError(new Error('error'));
+   * ```
+   *
+   */
+  mockError(err?: Error) {
+    // Matches ResourceLoader semantics
+    this.readyState = ReadyState.Done;
+    this.response.error(err);
+  }
+}
+
+/**
+ * A mock backend for testing the {@link Http} service.
+ *
+ * This class can be injected in tests, and should be used to override providers
+ * to other backends, such as {@link XHRBackend}.
+ *
+ * ### Example
+ *
+ * ```
+ * import {Injectable, Injector} from '@angular/core';
+ * import {async, fakeAsync, tick} from '@angular/core/testing';
+ * import {BaseRequestOptions, ConnectionBackend, Http, RequestOptions} from '@angular/http';
+ * import {Response, ResponseOptions} from '@angular/http';
+ * import {MockBackend, MockConnection} from '@angular/http/testing';
+ *
+ * const HERO_ONE = 'HeroNrOne';
+ * const HERO_TWO = 'WillBeAlwaysTheSecond';
+ *
+ * @Injectable()
+ * class HeroService {
+ *   constructor(private http: Http) {}
+ *
+ *   getHeroes(): Promise<String[]> {
+ *     return this.http.get('myservices.de/api/heroes')
+ *         .toPromise()
+ *         .then(response => response.json().data)
+ *         .catch(e => this.handleError(e));
+ *   }
+ *
+ *   private handleError(error: any): Promise<any> {
+ *     console.error('An error occurred', error);
+ *     return Promise.reject(error.message || error);
+ *   }
+ * }
+ *
+ * describe('MockBackend HeroService Example', () => {
+ *   beforeEach(() => {
+ *     this.injector = Injector.create([
+ *       {provide: ConnectionBackend, useClass: MockBackend},
+ *       {provide: RequestOptions, useClass: BaseRequestOptions},
+ *       Http,
+ *       HeroService,
+ *     ]);
+ *     this.heroService = this.injector.get(HeroService);
+ *     this.backend = this.injector.get(ConnectionBackend) as MockBackend;
+ *     this.backend.connections.subscribe((connection: any) => this.lastConnection = connection);
+ *   });
+ *
+ *   it('getHeroes() should query current service url', () => {
+ *     this.heroService.getHeroes();
+ *     expect(this.lastConnection).toBeDefined('no http service connection at all?');
+ *     expect(this.lastConnection.request.url).toMatch(/api\/heroes$/, 'url invalid');
+ *   });
+ *
+ *   it('getHeroes() should return some heroes', fakeAsync(() => {
+ *        let result: String[];
+ *        this.heroService.getHeroes().then((heroes: String[]) => result = heroes);
+ *        this.lastConnection.mockRespond(new Response(new ResponseOptions({
+ *          body: JSON.stringify({data: [HERO_ONE, HERO_TWO]}),
+ *        })));
+ *        tick();
+ *        expect(result.length).toEqual(2, 'should contain given amount of heroes');
+ *        expect(result[0]).toEqual(HERO_ONE, ' HERO_ONE should be the first hero');
+ *        expect(result[1]).toEqual(HERO_TWO, ' HERO_TWO should be the second hero');
+ *      }));
+ *
+ *   it('getHeroes() while server is down', fakeAsync(() => {
+ *        let result: String[];
+ *        let catchedError: any;
+ *        this.heroService.getHeroes()
+ *            .then((heroes: String[]) => result = heroes)
+ *            .catch((error: any) => catchedError = error);
+ *        this.lastConnection.mockError(new Response(new ResponseOptions({
+ *          status: 404,
+ *          statusText: 'URL not Found',
+ *        })));
+ *        tick();
+ *        expect(result).toBeUndefined();
+ *        expect(catchedError).toBeDefined();
+ *      }));
+ * });
+ * ```
+ *
+ * This method only exists in the mock implementation, not in real Backends.
+ *
+ * @deprecated see https://angular.io/guide/http
+ */
+@Injectable()
+export class MockBackend implements ConnectionBackend {
+  /**
+   * {@link EventEmitter}
+   * of {@link MockConnection} instances that have been created by this backend. Can be subscribed
+   * to in order to respond to connections.
+   *
+   * ### Example
+   *
+   * ```
+   * import {Injector} from '@angular/core';
+   * import {fakeAsync, tick} from '@angular/core/testing';
+   * import {BaseRequestOptions, ConnectionBackend, Http, RequestOptions} from '@angular/http';
+   * import {Response, ResponseOptions} from '@angular/http';
+   * import {MockBackend, MockConnection} from '@angular/http/testing';
+   *
+   * it('should get a response', fakeAsync(() => {
+   *      let connection:
+   *          MockConnection;  // this will be set when a new connection is emitted from the
+   *                           // backend.
+   *      let text: string;    // this will be set from mock response
+   *      let injector = Injector.create([
+   *        {provide: ConnectionBackend, useClass: MockBackend},
+   *        {provide: RequestOptions, useClass: BaseRequestOptions},
+   *        Http,
+   *      ]);
+   *      let backend = injector.get(ConnectionBackend);
+   *      let http = injector.get(Http);
+   *      backend.connections.subscribe((c: MockConnection) => connection = c);
+   *      http.request('something.json').toPromise().then((res: any) => text = res.text());
+   *      connection.mockRespond(new Response(new ResponseOptions({body: 'Something'})));
+   *      tick();
+   *      expect(text).toBe('Something');
+   *    }));
+   * ```
+   *
+   * This property only exists in the mock implementation, not in real Backends.
+   */
+  connections: any;  //<MockConnection>
+
+  /**
+   * An array representation of `connections`. This array will be updated with each connection that
+   * is created by this backend.
+   *
+   * This property only exists in the mock implementation, not in real Backends.
+   */
+  connectionsArray: MockConnection[];
+  /**
+   * {@link EventEmitter} of {@link MockConnection} instances that haven't yet been resolved (i.e.
+   * with a `readyState`
+   * less than 4). Used internally to verify that no connections are pending via the
+   * `verifyNoPendingRequests` method.
+   *
+   * This property only exists in the mock implementation, not in real Backends.
+   */
+  pendingConnections: any;  // Subject<MockConnection>
+  constructor() {
+    this.connectionsArray = [];
+    this.connections = new Subject();
+    this.connections.subscribe(
+        (connection: MockConnection) => this.connectionsArray.push(connection));
+    this.pendingConnections = new Subject();
+  }
+
+  /**
+   * Checks all connections, and raises an exception if any connection has not received a response.
+   *
+   * This method only exists in the mock implementation, not in real Backends.
+   */
+  verifyNoPendingRequests() {
+    let pending = 0;
+    this.pendingConnections.subscribe((c: MockConnection) => pending++);
+    if (pending > 0) throw new Error(`${pending} pending connections to be resolved`);
+  }
+
+  /**
+   * Can be used in conjunction with `verifyNoPendingRequests` to resolve any not-yet-resolve
+   * connections, if it's expected that there are connections that have not yet received a response.
+   *
+   * This method only exists in the mock implementation, not in real Backends.
+   */
+  resolveAllConnections() { this.connections.subscribe((c: MockConnection) => c.readyState = 4); }
+
+  /**
+   * Creates a new {@link MockConnection}. This is equivalent to calling `new
+   * MockConnection()`, except that it also will emit the new `Connection` to the `connections`
+   * emitter of this `MockBackend` instance. This method will usually only be used by tests
+   * against the framework itself, not by end-users.
+   */
+  createConnection(req: Request): MockConnection {
+    if (!req || !(req instanceof Request)) {
+      throw new Error(`createConnection requires an instance of Request, got ${req}`);
+    }
+    const connection = new MockConnection(req);
+    this.connections.next(connection);
+    return connection;
+  }
+}
diff --git a/packages/http/testing/src/testing.ts b/packages/http/testing/src/testing.ts
new file mode 100644
index 000000000000..e54b3f901852
--- /dev/null
+++ b/packages/http/testing/src/testing.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 platform-server/testing package.
+ */
+export * from './mock_backend';
diff --git a/packages/http/testing/tsconfig-build.json b/packages/http/testing/tsconfig-build.json
new file mode 100644
index 000000000000..caef5194fb5b
--- /dev/null
+++ b/packages/http/testing/tsconfig-build.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/core": ["../../../dist/packages/core"],
+      "@angular/http": ["../../../dist/packages/http"],
+      "rxjs/*": ["../../../node_modules/rxjs/*"]
+    },
+    "outDir": "../../../dist/packages/http"
+  },
+
+  "files": [
+    "public_api.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "testing.js",
+    "flatModuleId": "@angular/http/testing"
+  }
+}
diff --git a/packages/http/tsconfig-build.json b/packages/http/tsconfig-build.json
new file mode 100644
index 000000000000..4c42fd535984
--- /dev/null
+++ b/packages/http/tsconfig-build.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/common": ["../../dist/packages/common"],
+      "@angular/platform-browser": ["../../dist/packages/platform-browser"]
+    },
+    "outDir": "../../dist/packages/http"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "http.js",
+    "flatModuleId": "@angular/http"
+  }
+}
diff --git a/packages/language-service/BUILD.bazel b/packages/language-service/BUILD.bazel
new file mode 100644
index 000000000000..66acec4ca0cb
--- /dev/null
+++ b/packages/language-service/BUILD.bazel
@@ -0,0 +1,33 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "npm_package", "ts_library")
+
+ts_library(
+    name = "language-service",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/language-service",
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli",
+        "//packages/core",
+    ],
+)
+
+npm_package(
+    name = "npm_package",
+    srcs = ["package.json"],
+    tags = [
+        "ivy-jit",
+        "release-with-framework",
+    ],
+    deps = [
+        ":language-service",
+        "//packages/language-service/bundles:language-service",
+    ],
+)
diff --git a/packages/language-service/bundles/BUILD.bazel b/packages/language-service/bundles/BUILD.bazel
new file mode 100644
index 000000000000..4a999d23852d
--- /dev/null
+++ b/packages/language-service/bundles/BUILD.bazel
@@ -0,0 +1,14 @@
+load(":rollup.bzl", "ls_rollup_bundle")
+
+ls_rollup_bundle(
+    name = "language-service",
+    entry_point = "packages/language-service/index.js",
+    globals = {
+        "typescript": "ts",
+        "path": "path",
+        "fs": "fs",
+    },
+    license_banner = "banner.js.txt",
+    visibility = ["//packages/language-service:__pkg__"],
+    deps = ["//packages/language-service"],
+)
diff --git a/packages/language-service/bundles/banner.js.txt b/packages/language-service/bundles/banner.js.txt
new file mode 100644
index 000000000000..82e0ee92b0fe
--- /dev/null
+++ b/packages/language-service/bundles/banner.js.txt
@@ -0,0 +1,20 @@
+/**
+ * @license Angular v0.0.0-PLACEHOLDER
+ * (c) 2010-2018 Google, Inc. https://angular.io/
+ * License: MIT
+ */
+
+var $reflect = {defineMetadata: function() {}, getOwnMetadata: function() {}};
+var Reflect = (typeof global !== 'undefined' ? global : {})['Reflect'] || {};
+Object.keys($reflect).forEach(function(key) { Reflect[key] = Reflect[key] || $reflect[key]; });
+var $deferred, $resolved, $provided;
+function $getModule(name) { return $provided[name] || require(name); }
+function define(modules, cb) { $deferred = { modules: modules, cb: cb }; }
+module.exports = function(provided) {
+  if ($resolved) return $resolved;
+  var result = {};
+  $provided = Object.assign({'reflect-metadata': $reflect}, provided || {}, { exports: result });
+  $deferred.cb.apply(this, $deferred.modules.map($getModule));
+  $resolved = result;
+  return result;
+}
diff --git a/packages/language-service/bundles/rollup.bzl b/packages/language-service/bundles/rollup.bzl
new file mode 100644
index 000000000000..08083b669936
--- /dev/null
+++ b/packages/language-service/bundles/rollup.bzl
@@ -0,0 +1,51 @@
+"""Custom rollup_bundle for language service.
+
+Overrides format to AMD and produces only umd and min, no FESM.
+
+We do this so that we bundle all of the dependencies into the bundle
+except for typescript, fs and path.
+
+This allows editors and other tools to easily use the language service bundle
+without having to provide all of the angular specific peer dependencies.
+"""
+
+load(
+    "@build_bazel_rules_nodejs//internal/rollup:rollup_bundle.bzl",
+    "ROLLUP_ATTRS",
+    "rollup_module_mappings_aspect",
+    "run_rollup",
+    "run_uglify",
+    "write_rollup_config",
+)
+load("//packages/bazel/src:esm5.bzl", "esm5_outputs_aspect", "esm5_root_dir", "flatten_esm5")
+
+# Note: the file is called "umd.js" and "umd.min.js" because of historical
+# reasons. The format is actually amd and not umd, but we are afraid to rename
+# the file because that would likely break the IDE and other integrations that
+# have the path hardcoded in them.
+_ROLLUP_OUTPUTS = {
+    "build_umd": "%{name}.umd.js",
+    "build_umd_min": "%{name}.umd.min.js",
+}
+
+def _ls_rollup_bundle(ctx):
+    esm5_sources = flatten_esm5(ctx)
+    rollup_config = write_rollup_config(
+        ctx,
+        root_dir = "/".join([ctx.bin_dir.path, ctx.label.package, esm5_root_dir(ctx)]),
+        output_format = "amd",
+    )
+    run_rollup(ctx, esm5_sources, rollup_config, ctx.outputs.build_umd)
+    source_map = run_uglify(ctx, ctx.outputs.build_umd, ctx.outputs.build_umd_min)
+    return DefaultInfo(files = depset([ctx.outputs.build_umd, ctx.outputs.build_umd_min, source_map]))
+
+ls_rollup_bundle = rule(
+    implementation = _ls_rollup_bundle,
+    attrs = dict(ROLLUP_ATTRS, **{
+        "deps": attr.label_list(aspects = [
+            rollup_module_mappings_aspect,
+            esm5_outputs_aspect,
+        ]),
+    }),
+    outputs = _ROLLUP_OUTPUTS,
+)
diff --git a/packages/language-service/index.ts b/packages/language-service/index.ts
new file mode 100644
index 000000000000..f258660ce2ac
--- /dev/null
+++ b/packages/language-service/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 './language-service';
diff --git a/packages/language-service/language-service.ts b/packages/language-service/language-service.ts
new file mode 100644
index 000000000000..4e0fc2b3be37
--- /dev/null
+++ b/packages/language-service/language-service.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 language service package.
+ */
+export {createLanguageService} from './src/language_service';
+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/package.json b/packages/language-service/package.json
new file mode 100644
index 000000000000..06b29761e844
--- /dev/null
+++ b/packages/language-service/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@angular/language-service",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - language services",
+  "main": "./bundles/language-service.umd.js",
+  "module": "./fesm5/language-service.js",
+  "typings": "./language-service.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  }
+}
diff --git a/packages/language-service/rollup.config.js b/packages/language-service/rollup.config.js
new file mode 100644
index 000000000000..7404f938e468
--- /dev/null
+++ b/packages/language-service/rollup.config.js
@@ -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
+ */
+
+const commonjs = require('rollup-plugin-commonjs');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+const path = require('path');
+const fs = require('fs');
+
+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 locations = {'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)
+  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 + '/fesm5/' + packageName + '.js';
+    return r;
+  }
+  if (id && (id == 'rxjs' || id.startsWith('rxjs/'))) {
+    return `${rxjsLocation}${id.replace('rxjs', '')}/index.js`;
+  }
+  if (id == 'tslib') {
+    return tslibLocation + '/tslib.es6.js';
+  }
+}
+
+var banner = fs.readFileSync('bundles/banner.js.txt', 'utf8');
+
+module.exports = {
+  entry: '../../dist/packages-dist/language-service/fesm5/language-service.js',
+  dest: '../../dist/packages-dist/language-service/bundles/language-service.umd.js',
+  format: 'amd',
+  amd: {
+      // Don't name this module, causes
+      // Loading the language service caused the following exception: TypeError:
+      // $deferred.modules.map is not a function
+      // id: '@angular/language-service'
+  },
+  moduleName: 'ng.language_service',
+  exports: 'named',
+  external: [
+    'fs',
+    'path',
+    'typescript',
+  ],
+  globals: {
+    'typescript': 'ts',
+    'path': 'path',
+    'fs': 'fs',
+  },
+  banner: banner,
+  plugins: [{resolveId: resolve}, commonjs(), sourcemaps()]
+};
diff --git a/packages/language-service/src/common.ts b/packages/language-service/src/common.ts
new file mode 100644
index 000000000000..ba578b647a28
--- /dev/null
+++ b/packages/language-service/src/common.ts
@@ -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
+ */
+
+import {CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeSummary, CssSelector, Node as HtmlAst, ParseError, Parser, TemplateAst} from '@angular/compiler';
+
+import {Diagnostic, TemplateSource} from './types';
+
+export interface AstResult {
+  htmlAst?: HtmlAst[];
+  templateAst?: TemplateAst[];
+  directive?: CompileDirectiveMetadata;
+  directives?: CompileDirectiveSummary[];
+  pipes?: CompilePipeSummary[];
+  parseErrors?: ParseError[];
+  expressionParser?: Parser;
+  errors?: Diagnostic[];
+}
+
+export interface TemplateInfo {
+  position?: number;
+  fileName?: string;
+  template: TemplateSource;
+  htmlAst: HtmlAst[];
+  directive: CompileDirectiveMetadata;
+  directives: CompileDirectiveSummary[];
+  pipes: CompilePipeSummary[];
+  templateAst: TemplateAst[];
+  expressionParser: Parser;
+}
+
+export interface AttrInfo {
+  name: string;
+  input?: boolean;
+  output?: boolean;
+  template?: boolean;
+  fromHtml?: boolean;
+}
+
+export type SelectorInfo = {
+  selectors: CssSelector[],
+  map: Map<CssSelector, CompileDirectiveSummary>
+};
diff --git a/packages/language-service/src/completions.ts b/packages/language-service/src/completions.ts
new file mode 100644
index 000000000000..3412abffefea
--- /dev/null
+++ b/packages/language-service/src/completions.ts
@@ -0,0 +1,499 @@
+/**
+ * @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, 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/src/language_services';
+
+import {AstResult, AttrInfo, SelectorInfo, TemplateInfo} from './common';
+import {getExpressionCompletions} from './expressions';
+import {attributeNames, elementNames, eventNames, propertyNames} from './html_info';
+import {BuiltinType, Completion, Completions, Span, Symbol, SymbolDeclaration, SymbolTable, TemplateSource} from './types';
+import {diagnosticInfoFromTemplateInfo, findTemplateAstAt, flatten, getSelectors, hasTemplateReference, inSpan, removeSuffix, spanOf, uniqueByName} from './utils';
+
+const TEMPLATE_ATTR_PREFIX = '*';
+
+const hiddenHtmlElements = {
+  html: true,
+  script: true,
+  noscript: true,
+  base: true,
+  body: true,
+  title: true,
+  head: true,
+  link: true,
+};
+
+export function getTemplateCompletions(templateInfo: TemplateInfo): Completions|undefined {
+  let result: Completions|undefined = undefined;
+  let {htmlAst, templateAst, template} = templateInfo;
+  // The templateNode starts at the delimiter character so we add 1 to skip it.
+  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) {
+                  result = elementCompletions(templateInfo, path);
+                }
+              }
+            },
+            visitComment(ast) {},
+            visitExpansion(ast) {},
+            visitExpansionCase(ast) {}
+          },
+          null);
+    }
+  }
+  return result;
+}
+
+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);
+  }
+  return undefined;
+}
+
+function attributeCompletionsForElement(
+    info: TemplateInfo, elementName: string, element?: Element): Completions {
+  const attributes = getAttributeInfosForElement(info, elementName, element);
+
+  // Map all the attributes to a completion
+  return attributes.map<Completion>(attr => ({
+                                      kind: attr.fromHtml ? 'html attribute' : 'attribute',
+                                      name: nameOfAttr(attr),
+                                      sort: attr.name
+                                    }));
+}
+
+function getAttributeInfosForElement(
+    info: TemplateInfo, elementName: string, element?: Element): AttrInfo[] {
+  let attributes: AttrInfo[] = [];
+
+  // Add html attributes
+  let htmlAttributes = attributeNames(elementName) || [];
+  if (htmlAttributes) {
+    attributes.push(...htmlAttributes.map<AttrInfo>(name => ({name, fromHtml: true})));
+  }
+
+  // Add html properties
+  let htmlProperties = propertyNames(elementName);
+  if (htmlProperties) {
+    attributes.push(...htmlProperties.map<AttrInfo>(name => ({name, input: true})));
+  }
+
+  // Add html events
+  let htmlEvents = eventNames(elementName);
+  if (htmlEvents) {
+    attributes.push(...htmlEvents.map<AttrInfo>(name => ({name, output: true})));
+  }
+
+  let {selectors, map: selectorMap} = getSelectors(info);
+  if (selectors && selectors.length) {
+    // All the attributes that are selectable should be shown.
+    const applicableSelectors =
+        selectors.filter(selector => !selector.element || selector.element == elementName);
+    const selectorAndAttributeNames =
+        applicableSelectors.map(selector => ({selector, attrs: selector.attrs.filter(a => !!a)}));
+    let attrs = flatten(selectorAndAttributeNames.map<AttrInfo[]>(selectorAndAttr => {
+      const directive = selectorMap.get(selectorAndAttr.selector) !;
+      const result = selectorAndAttr.attrs.map<AttrInfo>(
+          name => ({name, input: name in directive.inputs, output: name in directive.outputs}));
+      return result;
+    }));
+
+    // Add template attribute if a directive contains a template reference
+    selectorAndAttributeNames.forEach(selectorAndAttr => {
+      const selector = selectorAndAttr.selector;
+      const directive = selectorMap.get(selector);
+      if (directive && hasTemplateReference(directive.type) && selector.attrs.length &&
+          selector.attrs[0]) {
+        attrs.push({name: selector.attrs[0], template: true});
+      }
+    });
+
+    // All input and output properties of the matching directives should be added.
+    let elementSelector = element ?
+        createElementCssSelector(element) :
+        createElementCssSelector(new Element(elementName, [], [], null !, null, null));
+
+    let matcher = new SelectorMatcher();
+    matcher.addSelectables(selectors);
+    matcher.match(elementSelector, selector => {
+      let directive = selectorMap.get(selector);
+      if (directive) {
+        attrs.push(...Object.keys(directive.inputs).map(name => ({name, input: true})));
+        attrs.push(...Object.keys(directive.outputs).map(name => ({name, output: true})));
+      }
+    });
+
+    // If a name shows up twice, fold it into a single value.
+    attrs = foldAttrs(attrs);
+
+    // Now expand them back out to ensure that input/output shows up as well as input and
+    // output.
+    attributes.push(...flatten(attrs.map(expandedAttr)));
+  }
+  return attributes;
+}
+
+function attributeValueCompletions(
+    info: TemplateInfo, position: number, attr: Attribute): Completions|undefined {
+  const path = findTemplateAstAt(info.templateAst, position);
+  const mostSpecific = path.tail;
+  const dinfo = diagnosticInfoFromTemplateInfo(info);
+  if (mostSpecific) {
+    const visitor =
+        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 = findTemplateAstAt(info.templateAst, position, /* allowWidening */ true);
+      if (widerPath.tail) {
+        const widerVisitor = new ExpressionVisitor(
+            info, position, attr, () => getExpressionScope(dinfo, widerPath, false));
+        widerPath.tail.visit(widerVisitor, null);
+        return widerVisitor.result;
+      }
+    }
+    return visitor.result;
+  }
+}
+
+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) as string[];
+
+  let components =
+      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
+  return uniqueByName(htmlElements.concat(components));
+}
+
+function entityCompletions(value: string, position: number): Completions|undefined {
+  // Look for entity completions
+  const re = /&[A-Za-z]*;?(?!\d)/g;
+  let found: RegExpExecArray|null;
+  let result: Completions|undefined = undefined;
+  while (found = re.exec(value)) {
+    let len = found[0].length;
+    if (position >= found.index && position < (found.index + len)) {
+      result = Object.keys(NAMED_ENTITIES)
+                   .map<Completion>(name => ({kind: 'entity', name: `&${name};`, sort: name}));
+      break;
+    }
+  }
+  return result;
+}
+
+function interpolationCompletions(info: TemplateInfo, position: number): Completions|undefined {
+  // Look for an interpolation in at the position.
+  const templatePath = findTemplateAstAt(info.templateAst, position);
+  const mostSpecific = templatePath.tail;
+  if (mostSpecific) {
+    let visitor = new ExpressionVisitor(
+        info, position, undefined,
+        () => getExpressionScope(diagnosticInfoFromTemplateInfo(info), templatePath, false));
+    mostSpecific.visit(visitor, null);
+    return uniqueByName(visitor.result);
+  }
+}
+
+// There is a special case of HTML where text that contains a unclosed tag is treated as
+// text. For exaple '<h1> Some <a text </h1>' produces a text nodes inside of the H1
+// element "Some <a text". We, however, want to treat this as if the user was requesting
+// 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: AstPath<HtmlAst>): Completions|
+    undefined {
+  let tail = path.tail;
+  if (tail instanceof Text) {
+    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 || 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,
+      getExpressionScope?: () => SymbolTable) {
+    super();
+    this.getExpressionScope = getExpressionScope || (() => info.template.members);
+  }
+
+  visitDirectiveProperty(ast: BoundDirectivePropertyAst): void {
+    this.attributeValueCompletions(ast.value);
+  }
+
+  visitElementProperty(ast: BoundElementPropertyAst): void {
+    this.attributeValueCompletions(ast.value);
+  }
+
+  visitEvent(ast: BoundEventAst): void { this.attributeValueCompletions(ast.handler); }
+
+  visitElement(ast: ElementAst): void {
+    if (this.attr && getSelectors(this.info) && this.attr.name.startsWith(TEMPLATE_ATTR_PREFIX)) {
+      // The value is a template expression but the expression AST was not produced when the
+      // TemplateAst was produce so
+      // do that now.
+
+      const key = this.attr.name.substr(TEMPLATE_ATTR_PREFIX.length);
+
+      // Find the selector
+      const selectorInfo = getSelectors(this.info);
+      const selectors = selectorInfo.selectors;
+      const selector =
+          selectors.filter(s => s.attrs.some((attr, i) => i % 2 == 0 && attr == key))[0];
+
+      const templateBindingResult =
+          this.info.expressionParser.parseTemplateBindings(key, this.attr.value, null);
+
+      // find the template binding that contains the position
+      if (!this.attr.valueSpan) return;
+      const valueRelativePosition = this.position - this.attr.valueSpan.start.offset - 1;
+      const bindings = templateBindingResult.templateBindings;
+      const binding =
+          bindings.find(
+              binding => inSpan(valueRelativePosition, binding.span, /* exclusive */ true)) ||
+          bindings.find(binding => inSpan(valueRelativePosition, binding.span));
+
+      const keyCompletions = () => {
+        let keys: string[] = [];
+        if (selector) {
+          const attrNames = selector.attrs.filter((_, i) => i % 2 == 0);
+          keys = attrNames.filter(name => name.startsWith(key) && name != key)
+                     .map(name => lowerName(name.substr(key.length)));
+        }
+        keys.push('let');
+        this.result = keys.map(key => <Completion>{kind: 'key', name: key, sort: key});
+      };
+
+      if (!binding || (binding.key == key && !binding.expression)) {
+        // We are in the root binding. We should return `let` and keys that are left in the
+        // selector.
+        keyCompletions();
+      } else if (binding.keyIsVar) {
+        const equalLocation = this.attr.value.indexOf('=');
+        this.result = [];
+        if (equalLocation >= 0 && valueRelativePosition >= equalLocation) {
+          // 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);
+          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();
+        }
+      } else {
+        // If the position is in the expression or after the key or there is no key, return the
+        // expression completions
+        if ((binding.expression && inSpan(valueRelativePosition, binding.expression.ast.span)) ||
+            (binding.key &&
+             valueRelativePosition > binding.span.start + (binding.key.length - key.length)) ||
+            !binding.key) {
+          const span = new ParseSpan(0, this.attr.value.length);
+          this.attributeValueCompletions(
+              binding.expression ? binding.expression.ast :
+                                   new PropertyRead(span, new ImplicitReceiver(span), ''),
+              valueRelativePosition);
+        } else {
+          keyCompletions();
+        }
+      }
+    }
+  }
+
+  visitBoundText(ast: BoundTextAst) {
+    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);
+      if (completions) {
+        this.result = this.symbolsToCompletions(completions);
+      }
+    }
+  }
+
+  private attributeValueCompletions(value: AST, position?: number) {
+    const symbols = getExpressionCompletions(
+        this.getExpressionScope(), value, position == null ? this.attributeValuePosition : position,
+        this.info.template.query);
+    if (symbols) {
+      this.result = this.symbolsToCompletions(symbols);
+    }
+  }
+
+  private symbolsToCompletions(symbols: Symbol[]): Completions {
+    return symbols.filter(s => !s.name.startsWith('__') && s.public)
+        .map(symbol => <Completion>{kind: symbol.kind, name: symbol.name, sort: symbol.name});
+  }
+
+  private get attributeValuePosition() {
+    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);
+}
+
+function nameOfAttr(attr: AttrInfo): string {
+  let name = attr.name;
+  if (attr.output) {
+    name = removeSuffix(name, 'Events');
+    name = removeSuffix(name, 'Changed');
+  }
+  let result = [name];
+  if (attr.input) {
+    result.unshift('[');
+    result.push(']');
+  }
+  if (attr.output) {
+    result.unshift('(');
+    result.push(')');
+  }
+  if (attr.template) {
+    result.unshift('*');
+  }
+  return result.join('');
+}
+
+const templateAttr = /^(\w+:)?(template$|^\*)/;
+function createElementCssSelector(element: Element): CssSelector {
+  const cssSelector = new CssSelector();
+  let elNameNoNs = splitNsName(element.name)[1];
+
+  cssSelector.setElement(elNameNoNs);
+
+  for (let attr of element.attrs) {
+    if (!attr.name.match(templateAttr)) {
+      let [_, attrNameNoNs] = splitNsName(attr.name);
+      cssSelector.addAttribute(attrNameNoNs, attr.value);
+      if (attr.name.toLowerCase() == 'class') {
+        const classes = attr.value.split(/s+/g);
+        classes.forEach(className => cssSelector.addClassName(className));
+      }
+    }
+  }
+  return cssSelector;
+}
+
+function foldAttrs(attrs: AttrInfo[]): AttrInfo[] {
+  let inputOutput = new Map<string, AttrInfo>();
+  let templates = new Map<string, AttrInfo>();
+  let result: AttrInfo[] = [];
+  attrs.forEach(attr => {
+    if (attr.fromHtml) {
+      return attr;
+    }
+    if (attr.template) {
+      let duplicate = templates.get(attr.name);
+      if (!duplicate) {
+        result.push({name: attr.name, template: true});
+        templates.set(attr.name, attr);
+      }
+    }
+    if (attr.input || attr.output) {
+      let duplicate = inputOutput.get(attr.name);
+      if (duplicate) {
+        duplicate.input = duplicate.input || attr.input;
+        duplicate.output = duplicate.output || attr.output;
+      } else {
+        let cloneAttr: AttrInfo = {name: attr.name};
+        if (attr.input) cloneAttr.input = true;
+        if (attr.output) cloneAttr.output = true;
+        result.push(cloneAttr);
+        inputOutput.set(attr.name, cloneAttr);
+      }
+    }
+  });
+  return result;
+}
+
+function expandedAttr(attr: AttrInfo): AttrInfo[] {
+  if (attr.input && attr.output) {
+    return [
+      attr, {name: attr.name, input: true, output: false},
+      {name: attr.name, input: false, output: true}
+    ];
+  }
+  return [attr];
+}
+
+function lowerName(name: string): string {
+  return name && (name[0].toLowerCase() + name.substr(1));
+}
diff --git a/packages/language-service/src/definitions.ts b/packages/language-service/src/definitions.ts
new file mode 100644
index 000000000000..76a6e0a1be7d
--- /dev/null
+++ b/packages/language-service/src/definitions.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {TemplateInfo} from './common';
+import {locateSymbol} from './locate_symbol';
+import {Definition} from './types';
+
+export function getDefinition(info: TemplateInfo): Definition {
+  const result = locateSymbol(info);
+  return result && result.symbol.definition;
+}
diff --git a/packages/language-service/src/diagnostics.ts b/packages/language-service/src/diagnostics.ts
new file mode 100644
index 000000000000..2ee1e3184169
--- /dev/null
+++ b/packages/language-service/src/diagnostics.ts
@@ -0,0 +1,98 @@
+/**
+ * @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 {NgAnalyzedModules, StaticSymbol} from '@angular/compiler';
+import {DiagnosticTemplateInfo, getTemplateExpressionDiagnostics} from '@angular/compiler-cli/src/language_services';
+
+import {AstResult} from './common';
+import {Declarations, Diagnostic, DiagnosticKind, DiagnosticMessageChain, Diagnostics, Span, TemplateSource} from './types';
+import {offsetSpan, spanOf} from './utils';
+
+export interface AstProvider {
+  getTemplateAst(template: TemplateSource, fileName: string): AstResult;
+}
+
+export function getTemplateDiagnostics(
+    fileName: string, astProvider: AstProvider, templates: TemplateSource[]): Diagnostics {
+  const results: Diagnostics = [];
+  for (const template of templates) {
+    const ast = astProvider.getTemplateAst(template, fileName);
+    if (ast) {
+      if (ast.parseErrors && ast.parseErrors.length) {
+        results.push(...ast.parseErrors.map<Diagnostic>(
+            e => ({
+              kind: DiagnosticKind.Error,
+              span: offsetSpan(spanOf(e.span), template.span.start),
+              message: e.msg
+            })));
+      } 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) {
+        results.push(...ast.errors.map<Diagnostic>(
+            e => ({kind: e.kind, span: e.span || template.span, message: e.message})));
+      }
+    }
+  }
+  return results;
+}
+
+export function getDeclarationDiagnostics(
+    declarations: Declarations, modules: NgAnalyzedModules): Diagnostics {
+  const results: Diagnostics = [];
+
+  let directives: Set<StaticSymbol>|undefined = undefined;
+  for (const declaration of declarations) {
+    const report = (message: string | DiagnosticMessageChain, span?: Span) => {
+      results.push(<Diagnostic>{
+        kind: DiagnosticKind.Error,
+        span: span || declaration.declarationSpan, message
+      });
+    };
+    for (const error of declaration.errors) {
+      report(error.message, error.span);
+    }
+    if (declaration.metadata) {
+      if (declaration.metadata.isComponent) {
+        if (!modules.ngModuleByPipeOrDirective.has(declaration.type)) {
+          report(
+              `Component '${declaration.type.name}' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration`);
+        }
+        const {template, templateUrl} = declaration.metadata.template !;
+        if (template === null && !templateUrl) {
+          report(`Component '${declaration.type.name}' must have a template or templateUrl`);
+        } else if (template && templateUrl) {
+          report(
+              `Component '${declaration.type.name}' must not have both template and templateUrl`);
+        }
+      } else {
+        if (!directives) {
+          directives = new Set();
+          modules.ngModules.forEach(module => {
+            module.declaredDirectives.forEach(
+                directive => { directives !.add(directive.reference); });
+          });
+        }
+        if (!directives.has(declaration.type)) {
+          report(
+              `Directive '${declaration.type.name}' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration`);
+        }
+      }
+    }
+  }
+
+  return results;
+}
diff --git a/packages/language-service/src/expressions.ts b/packages/language-service/src/expressions.ts
new file mode 100644
index 000000000000..95b0018c8181
--- /dev/null
+++ b/packages/language-service/src/expressions.ts
@@ -0,0 +1,169 @@
+/**
+ * @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, ASTWithSource, AstPath as AstPathBase, NullAstVisitor, visitAstChildren} from '@angular/compiler';
+import {AstType} from '@angular/compiler-cli/src/language_services';
+
+import {BuiltinType, Span, Symbol, SymbolQuery, SymbolTable} from './types';
+import {inSpan} from './utils';
+
+type AstPath = AstPathBase<AST>;
+
+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 = findAstAt(ast, position);
+  if (path.empty) return undefined;
+  const tail = path.tail !;
+  let result: SymbolTable|undefined = scope;
+
+  function getType(ast: AST): Symbol { return new AstType(scope, query, {}).getType(ast); }
+
+  // If the completion request is in a not in a pipe or property access then the global scope
+  // (that is the scope of the implicit receiver) is the right scope as the user is typing the
+  // beginning of an expression.
+  tail.visit({
+    visitBinary(ast) {},
+    visitChain(ast) {},
+    visitConditional(ast) {},
+    visitFunctionCall(ast) {},
+    visitImplicitReceiver(ast) {},
+    visitInterpolation(ast) { result = undefined; },
+    visitKeyedRead(ast) {},
+    visitKeyedWrite(ast) {},
+    visitLiteralArray(ast) {},
+    visitLiteralMap(ast) {},
+    visitLiteralPrimitive(ast) {},
+    visitMethodCall(ast) {},
+    visitPipe(ast) {
+      if (position >= ast.exp.span.end &&
+          (!ast.args || !ast.args.length || position < (<AST>ast.args[0]).span.start)) {
+        // We are in a position a pipe name is expected.
+        result = query.getPipes();
+      }
+    },
+    visitPrefixNot(ast) {},
+    visitNonNullAssert(ast) {},
+    visitPropertyRead(ast) {
+      const receiverType = getType(ast.receiver);
+      result = receiverType ? receiverType.members() : scope;
+    },
+    visitPropertyWrite(ast) {
+      const receiverType = getType(ast.receiver);
+      result = receiverType ? receiverType.members() : scope;
+    },
+    visitQuote(ast) {
+      // For a quote, return the members of any (if there are any).
+      result = query.getBuiltinType(BuiltinType.Any).members();
+    },
+    visitSafeMethodCall(ast) {
+      const receiverType = getType(ast.receiver);
+      result = receiverType ? receiverType.members() : scope;
+    },
+    visitSafePropertyRead(ast) {
+      const receiverType = getType(ast.receiver);
+      result = receiverType ? receiverType.members() : scope;
+    },
+  });
+
+  return result && result.values();
+}
+
+export function getExpressionSymbol(
+    scope: SymbolTable, ast: AST, position: number,
+    query: SymbolQuery): {symbol: Symbol, span: Span}|undefined {
+  const path = findAstAt(ast, position, /* excludeEmpty */ true);
+  if (path.empty) return undefined;
+  const tail = path.tail !;
+
+  function getType(ast: AST): Symbol { return new AstType(scope, query, {}).getType(ast); }
+
+  let symbol: Symbol|undefined = undefined;
+  let span: Span|undefined = undefined;
+
+  // If the completion request is in a not in a pipe or property access then the global scope
+  // (that is the scope of the implicit receiver) is the right scope as the user is typing the
+  // beginning of an expression.
+  tail.visit({
+    visitBinary(ast) {},
+    visitChain(ast) {},
+    visitConditional(ast) {},
+    visitFunctionCall(ast) {},
+    visitImplicitReceiver(ast) {},
+    visitInterpolation(ast) {},
+    visitKeyedRead(ast) {},
+    visitKeyedWrite(ast) {},
+    visitLiteralArray(ast) {},
+    visitLiteralMap(ast) {},
+    visitLiteralPrimitive(ast) {},
+    visitMethodCall(ast) {
+      const receiverType = getType(ast.receiver);
+      symbol = receiverType && receiverType.members().get(ast.name);
+      span = ast.span;
+    },
+    visitPipe(ast) {
+      if (position >= ast.exp.span.end &&
+          (!ast.args || !ast.args.length || position < (<AST>ast.args[0]).span.start)) {
+        // We are in a position a pipe name is expected.
+        const pipes = query.getPipes();
+        if (pipes) {
+          symbol = pipes.get(ast.name);
+          span = ast.span;
+        }
+      }
+    },
+    visitPrefixNot(ast) {},
+    visitNonNullAssert(ast) {},
+    visitPropertyRead(ast) {
+      const receiverType = getType(ast.receiver);
+      symbol = receiverType && receiverType.members().get(ast.name);
+      span = ast.span;
+    },
+    visitPropertyWrite(ast) {
+      const receiverType = getType(ast.receiver);
+      symbol = receiverType && receiverType.members().get(ast.name);
+      span = ast.span;
+    },
+    visitQuote(ast) {},
+    visitSafeMethodCall(ast) {
+      const receiverType = getType(ast.receiver);
+      symbol = receiverType && receiverType.members().get(ast.name);
+      span = ast.span;
+    },
+    visitSafePropertyRead(ast) {
+      const receiverType = getType(ast.receiver);
+      symbol = receiverType && receiverType.members().get(ast.name);
+      span = ast.span;
+    },
+  });
+
+  if (symbol && span) {
+    return {symbol, span};
+  }
+}
diff --git a/packages/language-service/src/hover.ts b/packages/language-service/src/hover.ts
new file mode 100644
index 000000000000..bc28e2f349f8
--- /dev/null
+++ b/packages/language-service/src/hover.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {TemplateInfo} from './common';
+import {locateSymbol} from './locate_symbol';
+import {Hover, HoverTextSection, Symbol} from './types';
+
+export function getHover(info: TemplateInfo): Hover|undefined {
+  const result = locateSymbol(info);
+  if (result) {
+    return {text: hoverTextOf(result.symbol), span: result.span};
+  }
+}
+
+function hoverTextOf(symbol: Symbol): HoverTextSection[] {
+  const result: HoverTextSection[] =
+      [{text: symbol.kind}, {text: ' '}, {text: symbol.name, language: symbol.language}];
+  const container = symbol.container;
+  if (container) {
+    result.push({text: ' of '}, {text: container.name, language: container.language});
+  }
+  return result;
+}
\ No newline at end of file
diff --git a/packages/language-service/src/html_info.ts b/packages/language-service/src/html_info.ts
new file mode 100644
index 000000000000..45f3f1bb0f19
--- /dev/null
+++ b/packages/language-service/src/html_info.ts
@@ -0,0 +1,463 @@
+/**
+ * @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
+ */
+
+// Information about the HTML DOM elements
+
+// This section defines the HTML elements and attribute surface of HTML 4
+// which is derived from https://www.w3.org/TR/html4/strict.dtd
+type attrType = string | string[];
+type hash<T> = {
+  [name: string]: T
+};
+
+const values: attrType[] = [
+  'ID',
+  'CDATA',
+  'NAME',
+  ['ltr', 'rtl'],
+  ['rect', 'circle', 'poly', 'default'],
+  'NUMBER',
+  ['nohref'],
+  ['ismap'],
+  ['declare'],
+  ['DATA', 'REF', 'OBJECT'],
+  ['GET', 'POST'],
+  'IDREF',
+  ['TEXT', 'PASSWORD', 'CHECKBOX', 'RADIO', 'SUBMIT', 'RESET', 'FILE', 'HIDDEN', 'IMAGE', 'BUTTON'],
+  ['checked'],
+  ['disabled'],
+  ['readonly'],
+  ['multiple'],
+  ['selected'],
+  ['button', 'submit', 'reset'],
+  ['void', 'above', 'below', 'hsides', 'lhs', 'rhs', 'vsides', 'box', 'border'],
+  ['none', 'groups', 'rows', 'cols', 'all'],
+  ['left', 'center', 'right', 'justify', 'char'],
+  ['top', 'middle', 'bottom', 'baseline'],
+  'IDREFS',
+  ['row', 'col', 'rowgroup', 'colgroup'],
+  ['defer']
+];
+
+const groups: hash<number>[] = [
+  {id: 0},
+  {
+    onclick: 1,
+    ondblclick: 1,
+    onmousedown: 1,
+    onmouseup: 1,
+    onmouseover: 1,
+    onmousemove: 1,
+    onmouseout: 1,
+    onkeypress: 1,
+    onkeydown: 1,
+    onkeyup: 1
+  },
+  {lang: 2, dir: 3},
+  {onload: 1, onunload: 1},
+  {name: 1},
+  {href: 1},
+  {type: 1},
+  {alt: 1},
+  {tabindex: 5},
+  {media: 1},
+  {nohref: 6},
+  {usemap: 1},
+  {src: 1},
+  {onfocus: 1, onblur: 1},
+  {charset: 1},
+  {declare: 8, classid: 1, codebase: 1, data: 1, codetype: 1, archive: 1, standby: 1},
+  {title: 1},
+  {value: 1},
+  {cite: 1},
+  {datetime: 1},
+  {accept: 1},
+  {shape: 4, coords: 1},
+  { for: 11
+  },
+  {action: 1, method: 10, enctype: 1, onsubmit: 1, onreset: 1, 'accept-charset': 1},
+  {valuetype: 9},
+  {longdesc: 1},
+  {width: 1},
+  {disabled: 14},
+  {readonly: 15, onselect: 1},
+  {accesskey: 1},
+  {size: 5, multiple: 16},
+  {onchange: 1},
+  {label: 1},
+  {selected: 17},
+  {type: 12, checked: 13, size: 1, maxlength: 5},
+  {rows: 5, cols: 5},
+  {type: 18},
+  {height: 1},
+  {summary: 1, border: 1, frame: 19, rules: 20, cellspacing: 1, cellpadding: 1, datapagesize: 1},
+  {align: 21, char: 1, charoff: 1, valign: 22},
+  {span: 5},
+  {abbr: 1, axis: 1, headers: 23, scope: 24, rowspan: 5, colspan: 5},
+  {profile: 1},
+  {'http-equiv': 2, name: 2, content: 1, scheme: 1},
+  {class: 1, style: 1},
+  {hreflang: 2, rel: 1, rev: 1},
+  {ismap: 7},
+  { defer: 25, event: 1, for : 1 }
+];
+
+const elements: {[name: string]: number[]} = {
+  TT: [0, 1, 2, 16, 44],
+  I: [0, 1, 2, 16, 44],
+  B: [0, 1, 2, 16, 44],
+  BIG: [0, 1, 2, 16, 44],
+  SMALL: [0, 1, 2, 16, 44],
+  EM: [0, 1, 2, 16, 44],
+  STRONG: [0, 1, 2, 16, 44],
+  DFN: [0, 1, 2, 16, 44],
+  CODE: [0, 1, 2, 16, 44],
+  SAMP: [0, 1, 2, 16, 44],
+  KBD: [0, 1, 2, 16, 44],
+  VAR: [0, 1, 2, 16, 44],
+  CITE: [0, 1, 2, 16, 44],
+  ABBR: [0, 1, 2, 16, 44],
+  ACRONYM: [0, 1, 2, 16, 44],
+  SUB: [0, 1, 2, 16, 44],
+  SUP: [0, 1, 2, 16, 44],
+  SPAN: [0, 1, 2, 16, 44],
+  BDO: [0, 2, 16, 44],
+  BR: [0, 16, 44],
+  BODY: [0, 1, 2, 3, 16, 44],
+  ADDRESS: [0, 1, 2, 16, 44],
+  DIV: [0, 1, 2, 16, 44],
+  A: [0, 1, 2, 4, 5, 6, 8, 13, 14, 16, 21, 29, 44, 45],
+  MAP: [0, 1, 2, 4, 16, 44],
+  AREA: [0, 1, 2, 5, 7, 8, 10, 13, 16, 21, 29, 44],
+  LINK: [0, 1, 2, 5, 6, 9, 14, 16, 44, 45],
+  IMG: [0, 1, 2, 4, 7, 11, 12, 16, 25, 26, 37, 44, 46],
+  OBJECT: [0, 1, 2, 4, 6, 8, 11, 15, 16, 26, 37, 44],
+  PARAM: [0, 4, 6, 17, 24],
+  HR: [0, 1, 2, 16, 44],
+  P: [0, 1, 2, 16, 44],
+  H1: [0, 1, 2, 16, 44],
+  H2: [0, 1, 2, 16, 44],
+  H3: [0, 1, 2, 16, 44],
+  H4: [0, 1, 2, 16, 44],
+  H5: [0, 1, 2, 16, 44],
+  H6: [0, 1, 2, 16, 44],
+  PRE: [0, 1, 2, 16, 44],
+  Q: [0, 1, 2, 16, 18, 44],
+  BLOCKQUOTE: [0, 1, 2, 16, 18, 44],
+  INS: [0, 1, 2, 16, 18, 19, 44],
+  DEL: [0, 1, 2, 16, 18, 19, 44],
+  DL: [0, 1, 2, 16, 44],
+  DT: [0, 1, 2, 16, 44],
+  DD: [0, 1, 2, 16, 44],
+  OL: [0, 1, 2, 16, 44],
+  UL: [0, 1, 2, 16, 44],
+  LI: [0, 1, 2, 16, 44],
+  FORM: [0, 1, 2, 4, 16, 20, 23, 44],
+  LABEL: [0, 1, 2, 13, 16, 22, 29, 44],
+  INPUT: [0, 1, 2, 4, 7, 8, 11, 12, 13, 16, 17, 20, 27, 28, 29, 31, 34, 44, 46],
+  SELECT: [0, 1, 2, 4, 8, 13, 16, 27, 30, 31, 44],
+  OPTGROUP: [0, 1, 2, 16, 27, 32, 44],
+  OPTION: [0, 1, 2, 16, 17, 27, 32, 33, 44],
+  TEXTAREA: [0, 1, 2, 4, 8, 13, 16, 27, 28, 29, 31, 35, 44],
+  FIELDSET: [0, 1, 2, 16, 44],
+  LEGEND: [0, 1, 2, 16, 29, 44],
+  BUTTON: [0, 1, 2, 4, 8, 13, 16, 17, 27, 29, 36, 44],
+  TABLE: [0, 1, 2, 16, 26, 38, 44],
+  CAPTION: [0, 1, 2, 16, 44],
+  COLGROUP: [0, 1, 2, 16, 26, 39, 40, 44],
+  COL: [0, 1, 2, 16, 26, 39, 40, 44],
+  THEAD: [0, 1, 2, 16, 39, 44],
+  TBODY: [0, 1, 2, 16, 39, 44],
+  TFOOT: [0, 1, 2, 16, 39, 44],
+  TR: [0, 1, 2, 16, 39, 44],
+  TH: [0, 1, 2, 16, 39, 41, 44],
+  TD: [0, 1, 2, 16, 39, 41, 44],
+  HEAD: [2, 42],
+  TITLE: [2],
+  BASE: [5],
+  META: [2, 43],
+  STYLE: [2, 6, 9, 16],
+  SCRIPT: [6, 12, 14, 47],
+  NOSCRIPT: [0, 1, 2, 16, 44],
+  HTML: [2]
+};
+
+const defaultAttributes = [0, 1, 2, 4];
+
+export function elementNames(): string[] {
+  return Object.keys(elements).sort().map(v => v.toLowerCase());
+}
+
+function compose(indexes: number[] | undefined): hash<attrType> {
+  const result: hash<attrType> = {};
+  if (indexes) {
+    for (let index of indexes) {
+      const group = groups[index];
+      for (let name in group)
+        if (group.hasOwnProperty(name)) result[name] = values[group[name]];
+    }
+  }
+  return result;
+}
+
+export function attributeNames(element: string): string[] {
+  return Object.keys(compose(elements[element.toUpperCase()] || defaultAttributes)).sort();
+}
+
+export function attributeType(element: string, attribute: string): string|string[]|undefined {
+  return compose(elements[element.toUpperCase()] || defaultAttributes)[attribute.toLowerCase()];
+}
+
+// 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,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',
+  'formaction': 'formAction',
+  'innerHtml': 'innerHTML',
+  'readonly': 'readOnly',
+  'tabindex': 'tabIndex'
+};
+
+const EVENT = 'event';
+const BOOLEAN = 'boolean';
+const NUMBER = 'number';
+const STRING = 'string';
+const OBJECT = 'object';
+
+export class SchemaInformation {
+  schema = <{[element: string]: {[property: string]: string}}>{};
+
+  constructor() {
+    SCHEMA.forEach(encodedType => {
+      const parts = encodedType.split('|');
+      const properties = parts[1].split(',');
+      const typeParts = (parts[0] + '^').split('^');
+      const typeName = typeParts[0];
+      const type = <{[property: string]: string}>{};
+      typeName.split(',').forEach(tag => this.schema[tag.toLowerCase()] = type);
+      const superName = typeParts[1];
+      const superType = superName && this.schema[superName.toLowerCase()];
+      if (superType) {
+        for (const key in superType) {
+          type[key] = superType[key];
+        }
+      }
+      properties.forEach((property: string) => {
+        if (property == '') {
+        } else if (property.startsWith('*')) {
+          type[property.substring(1)] = EVENT;
+        } else if (property.startsWith('!')) {
+          type[property.substring(1)] = BOOLEAN;
+        } else if (property.startsWith('#')) {
+          type[property.substring(1)] = NUMBER;
+        } else if (property.startsWith('%')) {
+          type[property.substring(1)] = OBJECT;
+        } else {
+          type[property] = STRING;
+        }
+      });
+    });
+  }
+
+  allKnownElements(): string[] { return Object.keys(this.schema); }
+
+  eventsOf(elementName: string): string[] {
+    const elementType = this.schema[elementName.toLowerCase()] || {};
+    return Object.keys(elementType).filter(property => elementType[property] === EVENT);
+  }
+
+  propertiesOf(elementName: string): string[] {
+    const elementType = this.schema[elementName.toLowerCase()] || {};
+    return Object.keys(elementType).filter(property => elementType[property] !== EVENT);
+  }
+
+  typeOf(elementName: string, property: string): string {
+    return (this.schema[elementName.toLowerCase()] || {})[property];
+  }
+
+  private static _instance: SchemaInformation;
+
+  static get instance(): SchemaInformation {
+    let result = SchemaInformation._instance;
+    if (!result) {
+      result = SchemaInformation._instance = new SchemaInformation();
+    }
+    return result;
+  }
+}
+
+export function eventNames(elementName: string): string[] {
+  return SchemaInformation.instance.eventsOf(elementName);
+}
+
+export function propertyNames(elementName: string): string[] {
+  return SchemaInformation.instance.propertiesOf(elementName);
+}
+
+export function propertyType(elementName: string, propertyName: string): string {
+  return SchemaInformation.instance.typeOf(elementName, propertyName);
+}
diff --git a/packages/language-service/src/language_service.ts b/packages/language-service/src/language_service.ts
new file mode 100644
index 000000000000..8e3daa1ae43e
--- /dev/null
+++ b/packages/language-service/src/language_service.ts
@@ -0,0 +1,188 @@
+/**
+ * @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 {CompileMetadataResolver, CompileNgModuleMetadata, CompilePipeSummary, CompilerConfig, DomElementSchemaRegistry, HtmlParser, I18NHtmlParser, Lexer, NgAnalyzedModules, Parser, TemplateParser} from '@angular/compiler';
+
+import {AstResult, TemplateInfo} from './common';
+import {getTemplateCompletions} from './completions';
+import {getDefinition} from './definitions';
+import {getDeclarationDiagnostics, getTemplateDiagnostics} from './diagnostics';
+import {getHover} from './hover';
+import {Completions, Definition, Diagnostic, DiagnosticKind, Diagnostics, Hover, LanguageService, LanguageServiceHost, Pipes, Span, TemplateSource} from './types';
+
+
+/**
+ * Create an instance of an Angular `LanguageService`.
+ *
+ * @experimental
+ */
+export function createLanguageService(host: LanguageServiceHost): LanguageService {
+  return new LanguageServiceImpl(host);
+}
+
+class LanguageServiceImpl implements LanguageService {
+  constructor(private host: LanguageServiceHost) {}
+
+  private get metadataResolver(): CompileMetadataResolver { return this.host.resolver; }
+
+  getTemplateReferences(): string[] { return this.host.getTemplateReferences(); }
+
+  getDiagnostics(fileName: string): Diagnostics|undefined {
+    let results: Diagnostics = [];
+    let templates = this.host.getTemplates(fileName);
+    if (templates && templates.length) {
+      results.push(...getTemplateDiagnostics(fileName, this, templates));
+    }
+
+    let declarations = this.host.getDeclarations(fileName);
+    if (declarations && declarations.length) {
+      const summary = this.host.getAnalyzedModules();
+      results.push(...getDeclarationDiagnostics(declarations, summary));
+    }
+
+    return uniqueBySpan(results);
+  }
+
+  getPipesAt(fileName: string, position: number): CompilePipeSummary[] {
+    let templateInfo = this.getTemplateAstAtPosition(fileName, position);
+    if (templateInfo) {
+      return templateInfo.pipes;
+    }
+    return [];
+  }
+
+  getCompletionsAt(fileName: string, position: number): Completions {
+    let templateInfo = this.getTemplateAstAtPosition(fileName, position);
+    if (templateInfo) {
+      return getTemplateCompletions(templateInfo);
+    }
+  }
+
+  getDefinitionAt(fileName: string, position: number): Definition {
+    let templateInfo = this.getTemplateAstAtPosition(fileName, position);
+    if (templateInfo) {
+      return getDefinition(templateInfo);
+    }
+  }
+
+  getHoverAt(fileName: string, position: number): Hover|undefined {
+    let templateInfo = this.getTemplateAstAtPosition(fileName, position);
+    if (templateInfo) {
+      return getHover(templateInfo);
+    }
+  }
+
+  private getTemplateAstAtPosition(fileName: string, position: number): TemplateInfo|undefined {
+    let template = this.host.getTemplateAt(fileName, position);
+    if (template) {
+      let astResult = this.getTemplateAst(template, fileName);
+      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,
+          templateAst: astResult.templateAst,
+          expressionParser: astResult.expressionParser
+        };
+    }
+    return undefined;
+  }
+
+  getTemplateAst(template: TemplateSource, contextFile: string): AstResult {
+    let result: AstResult|undefined = undefined;
+    try {
+      const resolvedMetadata =
+          this.metadataResolver.getNonNormalizedDirectiveMetadata(template.type as any);
+      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, 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 = undefined;
+        let ngModule = analyzedModules.ngModuleByPipeOrDirective.get(template.type);
+        if (!ngModule) {
+          // Reported by the the declaration diagnostics.
+          ngModule = findSuitableDefaultModule(analyzedModules);
+        }
+        if (ngModule) {
+          const resolvedDirectives = ngModule.transitiveModule.directives.map(
+              d => this.host.resolver.getNonNormalizedDirectiveMetadata(d.reference));
+          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, directives, pipes, schemas);
+          result = {
+            htmlAst: htmlResult.rootNodes,
+            templateAst: parseResult.templateAst,
+            directive: metadata, directives, pipes,
+            parseErrors: parseResult.errors, expressionParser, errors
+          };
+        }
+      }
+    } catch (e) {
+      let span = template.span;
+      if (e.fileName == contextFile) {
+        span = template.query.getSpanAt(e.line, e.column) || span;
+      }
+      result = {errors: [{kind: DiagnosticKind.Error, message: e.message, span}]};
+    }
+    return result || {};
+  }
+}
+
+function removeMissing<T>(values: (T | null | undefined)[]): T[] {
+  return values.filter(e => !!e) as T[];
+}
+
+function uniqueBySpan < T extends {
+  span: Span;
+}
+> (elements: T[] | undefined): T[]|undefined {
+  if (elements) {
+    const result: T[] = [];
+    const map = new Map<number, Set<number>>();
+    for (const element of elements) {
+      let span = element.span;
+      let set = map.get(span.start);
+      if (!set) {
+        set = new Set();
+        map.set(span.start, set);
+      }
+      if (!set.has(span.end)) {
+        set.add(span.end);
+        result.push(element);
+      }
+    }
+    return result;
+  }
+}
+
+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;
+    if (moduleSize > resultSize) {
+      result = module;
+      resultSize = moduleSize;
+    }
+  }
+  return result;
+}
diff --git a/packages/language-service/src/locate_symbol.ts b/packages/language-service/src/locate_symbol.ts
new file mode 100644
index 000000000000..c1e9a0e1618b
--- /dev/null
+++ b/packages/language-service/src/locate_symbol.ts
@@ -0,0 +1,198 @@
+/**
+ * @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, Attribute, BoundDirectivePropertyAst, BoundEventAst, ElementAst, TemplateAst, TemplateAstPath, findNode, tokenReference} from '@angular/compiler';
+import {getExpressionScope} from '@angular/compiler-cli/src/language_services';
+
+import {TemplateInfo} from './common';
+import {getExpressionSymbol} from './expressions';
+import {Definition, Location, Span, Symbol, SymbolTable} from './types';
+import {diagnosticInfoFromTemplateInfo, findTemplateAstAt, inSpan, offsetSpan, spanOf} from './utils';
+
+export interface SymbolInfo {
+  symbol: Symbol;
+  span: Span;
+}
+
+export function locateSymbol(info: TemplateInfo): SymbolInfo|undefined {
+  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 = 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 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;
+        }
+      }
+      return false;
+    };
+    path.tail.visit(
+        {
+          visitNgContent(ast) {},
+          visitEmbeddedTemplate(ast) {},
+          visitElement(ast) {
+            const component = ast.directives.find(d => d.directive.isComponent);
+            if (component) {
+              symbol = info.template.query.getTypeSymbol(component.directive.type.reference);
+              symbol = symbol && new OverrideKindSymbol(symbol, 'component');
+              span = spanOf(ast);
+            } else {
+              // Find a directive that matches the element name
+              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);
+              }
+            }
+          },
+          visitReference(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 = symbol && new OverrideKindSymbol(symbol, 'event');
+              span = spanOf(ast);
+            }
+          },
+          visitElementProperty(ast) { attributeValueSymbol(ast.value); },
+          visitAttr(ast) {},
+          visitBoundText(ast) {
+            const expressionPosition = templatePosition - ast.sourceSpan.start.offset;
+            if (inSpan(expressionPosition, ast.value.span)) {
+              const dinfo = diagnosticInfoFromTemplateInfo(info);
+              const scope = getExpressionScope(dinfo, path, /* includeEvent */ false);
+              const result =
+                  getExpressionSymbol(scope, ast.value, expressionPosition, info.template.query);
+              if (result) {
+                symbol = result.symbol;
+                span = offsetSpan(result.span, ast.sourceSpan.start.offset);
+              }
+            }
+          },
+          visitText(ast) {},
+          visitDirective(ast) {
+            symbol = info.template.query.getTypeSymbol(ast.directive.type.reference);
+            span = spanOf(ast);
+          },
+          visitDirectiveProperty(ast) {
+            if (!attributeValueSymbol(ast.value)) {
+              symbol = findInputBinding(info, path, ast);
+              span = spanOf(ast);
+            }
+          }
+        },
+        null);
+    if (symbol && span) {
+      return {symbol, span: offsetSpan(span, info.template.span.start)};
+    }
+  }
+}
+
+function findAttribute(info: TemplateInfo): Attribute|undefined {
+  if (info.position) {
+    const templatePosition = info.position - info.template.span.start;
+    const path = findNode(info.htmlAst, templatePosition);
+    return path.first(Attribute);
+  }
+}
+
+function findInputBinding(
+    info: TemplateInfo, path: TemplateAstPath, binding: BoundDirectivePropertyAst): Symbol|
+    undefined {
+  const element = path.first(ElementAst);
+  if (element) {
+    for (const directive of element.directives) {
+      const invertedInput = invertMap(directive.directive.inputs);
+      const fieldName = invertedInput[binding.templateName];
+      if (fieldName) {
+        const classSymbol = info.template.query.getTypeSymbol(directive.directive.type.reference);
+        if (classSymbol) {
+          return classSymbol.members().get(fieldName);
+        }
+      }
+    }
+  }
+}
+
+function findOutputBinding(
+    info: TemplateInfo, path: TemplateAstPath, binding: BoundEventAst): Symbol|undefined {
+  const element = path.first(ElementAst);
+  if (element) {
+    for (const directive of element.directives) {
+      const invertedOutputs = invertMap(directive.directive.outputs);
+      const fieldName = invertedOutputs[binding.name];
+      if (fieldName) {
+        const classSymbol = info.template.query.getTypeSymbol(directive.directive.type.reference);
+        if (classSymbol) {
+          return classSymbol.members().get(fieldName);
+        }
+      }
+    }
+  }
+}
+
+function invertMap(obj: {[name: string]: string}): {[name: string]: string} {
+  const result: {[name: string]: string} = {};
+  for (const name of Object.keys(obj)) {
+    const v = obj[name];
+    result[v] = name;
+  }
+  return result;
+}
+
+/**
+ * Wrap a symbol and change its kind to component.
+ */
+class OverrideKindSymbol implements Symbol {
+  public readonly kind: string;
+  constructor(private sym: Symbol, kindOverride: string) { this.kind = kindOverride; }
+
+  get name(): string { return this.sym.name; }
+
+  get language(): string { return this.sym.language; }
+
+  get type(): Symbol|undefined { return this.sym.type; }
+
+  get container(): Symbol|undefined { return this.sym.container; }
+
+  get public(): boolean { return this.sym.public; }
+
+  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(); }
+
+  signatures() { return this.sym.signatures(); }
+
+  selectSignature(types: Symbol[]) { return this.sym.selectSignature(types); }
+
+  indexed(argument: Symbol) { return this.sym.indexed(argument); }
+}
diff --git a/packages/language-service/src/reflector_host.ts b/packages/language-service/src/reflector_host.ts
new file mode 100644
index 000000000000..42df27c8cc05
--- /dev/null
+++ b/packages/language-service/src/reflector_host.ts
@@ -0,0 +1,82 @@
+/**
+ * @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 {StaticSymbolResolverHost} from '@angular/compiler';
+import {CompilerOptions, MetadataCollector, MetadataReaderCache, MetadataReaderHost, createMetadataReaderCache, readMetadata} from '@angular/compiler-cli/src/language_services';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+class ReflectorModuleModuleResolutionHost implements ts.ModuleResolutionHost, MetadataReaderHost {
+  // Note: verboseInvalidExpressions is important so that
+  // the collector will collect errors instead of throwing
+  private metadataCollector = new MetadataCollector({verboseInvalidExpression: true});
+
+  constructor(private host: ts.LanguageServiceHost, private getProgram: () => ts.Program) {
+    if (host.directoryExists)
+      this.directoryExists = directoryName => this.host.directoryExists !(directoryName);
+  }
+
+  fileExists(fileName: string): boolean { return !!this.host.getScriptSnapshot(fileName); }
+
+  readFile(fileName: string): string {
+    let snapshot = this.host.getScriptSnapshot(fileName);
+    if (snapshot) {
+      return snapshot.getText(0, snapshot.getLength());
+    }
+
+    // Typescript readFile() declaration should be `readFile(fileName: string): string | undefined
+    return undefined !;
+  }
+
+  // TODO(issue/24571): remove '!'.
+  directoryExists !: (directoryName: string) => boolean;
+
+  getSourceFileMetadata(fileName: string) {
+    const sf = this.getProgram().getSourceFile(fileName);
+    return sf ? this.metadataCollector.getMetadata(sf) : undefined;
+  }
+
+  cacheMetadata(fileName: string) {
+    // Don't cache the metadata for .ts files as they might change in the editor!
+    return fileName.endsWith('.d.ts');
+  }
+}
+
+export class ReflectorHost implements StaticSymbolResolverHost {
+  private moduleResolutionCache: ts.ModuleResolutionCache;
+  private hostAdapter: ReflectorModuleModuleResolutionHost;
+  private metadataReaderCache = createMetadataReaderCache();
+
+  constructor(
+      getProgram: () => ts.Program, serviceHost: ts.LanguageServiceHost,
+      private options: CompilerOptions) {
+    this.hostAdapter = new ReflectorModuleModuleResolutionHost(serviceHost, getProgram);
+    this.moduleResolutionCache =
+        ts.createModuleResolutionCache(serviceHost.getCurrentDirectory(), (s) => s);
+  }
+
+  getMetadataFor(modulePath: string): {[key: string]: any}[]|undefined {
+    return readMetadata(modulePath, this.hostAdapter, this.metadataReaderCache);
+  }
+
+  moduleNameToFileName(moduleName: string, containingFile?: string): string|null {
+    if (!containingFile) {
+      if (moduleName.indexOf('.') === 0) {
+        throw new Error('Resolution of relative paths requires a containing file.');
+      }
+      // Any containing file gives the same result for absolute imports
+      containingFile = path.join(this.options.basePath !, 'index.ts').replace(/\\/g, '/');
+    }
+    const resolved =
+        ts.resolveModuleName(moduleName, containingFile !, this.options, this.hostAdapter)
+            .resolvedModule;
+    return resolved ? resolved.resolvedFileName : null;
+  }
+
+  getOutputName(filePath: string) { return filePath; }
+}
diff --git a/packages/language-service/src/ts_plugin.ts b/packages/language-service/src/ts_plugin.ts
new file mode 100644
index 000000000000..00853dc8ad30
--- /dev/null
+++ b/packages/language-service/src/ts_plugin.ts
@@ -0,0 +1,304 @@
+/**
+ * @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 ts from 'typescript';
+
+import {createLanguageService} from './language_service';
+import {Completion, Diagnostic, DiagnosticMessageChain, 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();
+  }
+}
+
+export function create(info: any /* ts.server.PluginCreateInfo */): ts.LanguageService {
+  // Create the proxy
+  const proxy: ts.LanguageService = Object.create(null);
+  let oldLS: ts.LanguageService = info.languageService;
+
+  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 tryFilenameFiveCall<T, P1, P2, P3, P4, P5>(
+      m: (fileName: string, p1: P1, p2: P2, p3: P3, p4: P4, p5: P5) =>
+          T): (fileName: string, p1: P1, p2: P2, p3: P3, p4: P4, p5: P5) => T {
+    return (fileName, p1, p2, p3, p4, p5) =>
+               tryCall(fileName, () => <T>(m.call(ls, fileName, p1, p2, p3, p4, p5)));
+  }
+
+
+  function typescriptOnly(ls: ts.LanguageService): ts.LanguageService {
+    const languageService: ts.LanguageService = {
+      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: tryFilenameTwoCall(ls.getCompletionsAtPosition),
+      getCompletionEntryDetails: tryFilenameFiveCall(ls.getCompletionEntryDetails),
+      getCompletionEntrySymbol: tryFilenameThreeCall(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),
+      getSpanOfEnclosingComment: tryFilenameTwoCall(ls.getSpanOfEnclosingComment),
+      getCodeFixesAtPosition: tryFilenameFiveCall(ls.getCodeFixesAtPosition),
+      applyCodeActionCommand:
+          <any>((action: any) => tryCall(undefined, () => ls.applyCodeActionCommand(action))),
+      getEmitOutput: tryFilenameCall(ls.getEmitOutput),
+      getProgram: () => ls.getProgram(),
+      dispose: () => ls.dispose(),
+      getApplicableRefactors: tryFilenameTwoCall(ls.getApplicableRefactors),
+      getEditsForRefactor: tryFilenameFiveCall(ls.getEditsForRefactor),
+      getDefinitionAndBoundSpan: tryFilenameOneCall(ls.getDefinitionAndBoundSpan),
+      getCombinedCodeFix:
+          (scope: ts.CombinedCodeFixScope, fixId: {}, formatOptions: ts.FormatCodeSettings,
+           preferences: ts.UserPreferences) =>
+              tryCall(
+                  undefined, () => ls.getCombinedCodeFix(scope, fixId, formatOptions, preferences)),
+      // TODO(kyliau): dummy implementation to compile with ts 2.8, create real one
+      getSuggestionDiagnostics: (fileName: string) => [],
+      // TODO(kyliau): dummy implementation to compile with ts 2.8, create real one
+      organizeImports: (scope: ts.CombinedCodeFixScope, formatOptions: ts.FormatCodeSettings) => [],
+      // TODO: dummy implementation to compile with ts 2.9, create a real one
+      getEditsForFileRename:
+          (oldFilePath: string, newFilePath: string, formatOptions: ts.FormatCodeSettings,
+           preferences: ts.UserPreferences | undefined) => []
+    } as ts.LanguageService;
+    return languageService;
+  }
+
+  oldLS = typescriptOnly(oldLS);
+
+  for (const k in oldLS) {
+    (<any>proxy)[k] = function() { return (oldLS as any)[k].apply(oldLS, arguments); };
+  }
+
+  function completionToEntry(c: Completion): ts.CompletionEntry {
+    return {
+      // TODO: remove any and fix type error.
+      kind: c.kind as any,
+      name: c.name,
+      sortText: c.sort,
+      kindModifiers: ''
+    };
+  }
+
+  function diagnosticChainToDiagnosticChain(chain: DiagnosticMessageChain):
+      ts.DiagnosticMessageChain {
+    return {
+      messageText: chain.message,
+      category: ts.DiagnosticCategory.Error,
+      code: 0,
+      next: chain.next ? diagnosticChainToDiagnosticChain(chain.next) : undefined
+    };
+  }
+
+  function diagnosticMessageToDiagnosticMessageText(message: string | DiagnosticMessageChain):
+      string|ts.DiagnosticMessageChain {
+    if (typeof message === 'string') {
+      return message;
+    }
+    return diagnosticChainToDiagnosticChain(message);
+  }
+
+  function diagnosticToDiagnostic(d: Diagnostic, file: ts.SourceFile): ts.Diagnostic {
+    const result = {
+      file,
+      start: d.span.start,
+      length: d.span.end - d.span.start,
+      messageText: diagnosticMessageToDiagnosticMessageText(d.message),
+      category: ts.DiagnosticCategory.Error,
+      code: 0,
+      source: 'ng'
+    };
+    return result;
+  }
+
+  function tryOperation<T>(attempting: string, callback: () => T): T|null {
+    try {
+      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, options: ts.GetCompletionsAtPositionOptions|undefined) {
+    let base = oldLS.getCompletionsAtPosition(fileName, position, options) || {
+      isGlobalCompletion: false,
+      isMemberCompletion: false,
+      isNewIdentifierLocation: false,
+      entries: []
+    };
+    tryOperation('get completions', () => {
+      const results = ls.getCompletionsAt(fileName, position);
+      if (results && results.length) {
+        if (base === undefined) {
+          base = {
+            isGlobalCompletion: false,
+            isMemberCompletion: false,
+            isNewIdentifierLocation: false,
+            entries: []
+          };
+        }
+        for (const entry of results) {
+          base.entries.push(completionToEntry(entry));
+        }
+      }
+    });
+    return base;
+  };
+
+  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: ts.SymbolDisplayPart[] = [];
+        for (const part of ours.text) {
+          displayParts.push({kind: part.language || 'angular', text: part.text});
+        }
+        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},
+        };
+        if (tags) {
+          (<any>base).tags = tags;
+        }
+      }
+    });
+
+    return base;
+  };
+
+  proxy.getSemanticDiagnostics = function(fileName: string) {
+    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);
+      if (ours && ours.length) {
+        const file = oldLS.getProgram().getSourceFile(fileName);
+        if (file) {
+          base.push.apply(base, ours.map(d => diagnosticToDiagnostic(d, file)));
+        }
+      }
+    });
+
+    return base;
+  };
+
+  proxy.getDefinitionAtPosition = function(
+                                      fileName: string, position: number): ts.DefinitionInfo[] {
+    let base = oldLS.getDefinitionAtPosition(fileName, position);
+    if (base && base.length) {
+      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: '',
+                   // TODO: remove any and fix type error.
+                   kind: 'definition' as any,
+                   containerName: loc.fileName,
+                   containerKind: 'file' as any,
+                 });
+               }
+             }
+             return base;
+           }) || [];
+  };
+
+  return proxy;
+}
diff --git a/packages/language-service/src/types.ts b/packages/language-service/src/types.ts
new file mode 100644
index 000000000000..28be7c8f9739
--- /dev/null
+++ b/packages/language-service/src/types.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 {CompileDirectiveMetadata, CompileMetadataResolver, CompilePipeSummary, NgAnalyzedModules, StaticSymbol} from '@angular/compiler';
+import {BuiltinType, DeclarationKind, Definition, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from '@angular/compiler-cli/src/language_services';
+
+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 language context the template is in.
+ *
+ * A host interface; see `LanguageSeriviceHost`.
+ *
+ * @experimental
+ */
+export interface TemplateSource {
+  /**
+   * The source of the template.
+   */
+  readonly source: string;
+
+  /**
+   * The version of the source. As files are modified the version should change. That is, if the
+   * `LanguageService` requesting template information 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.
+   */
+  readonly version: string;
+
+  /**
+   * The span of the template within the source file.
+   */
+  readonly span: Span;
+
+  /**
+   * A static symbol for the template's component.
+   */
+  readonly type: StaticSymbol;
+
+  /**
+   * The `SymbolTable` for the members of the component.
+   */
+  readonly members: SymbolTable;
+
+  /**
+   * A `SymbolQuery` for the context of the template.
+   */
+  readonly query: SymbolQuery;
+}
+
+/**
+ * A sequence of template sources.
+ *
+ * A host type; see `LanguageSeriviceHost`.
+ *
+ * @experimental
+ */
+export type TemplateSources = TemplateSource[] | undefined;
+
+
+/**
+ * Error information found getting declaration information
+ *
+ * A host type; see `LanguageServiceHost`.
+ *
+ * @experimental
+ */
+export interface DeclarationError {
+  /**
+   * The span of the error in the declaration's module.
+   */
+  readonly span: Span;
+
+  /**
+   * The message to display describing the error or a chain
+   * of messages.
+   */
+  readonly message: string|DiagnosticMessageChain;
+}
+
+/**
+ * Information about the component declarations.
+ *
+ * A file might contain a declaration without a template because the file contains only
+ * templateUrl references. However, the compoennt declaration might contain errors that
+ * need to be reported such as the template string is missing or the component is not
+ * declared in a module. These error should be reported on the declaration, not the
+ * template.
+ *
+ * A host type; see `LanguageSeriviceHost`.
+ *
+ * @experimental
+ */
+export interface Declaration {
+  /**
+   * The static symbol of the compponent being declared.
+   */
+  readonly type: StaticSymbol;
+
+  /**
+   * The span of the declaration annotation reference (e.g. the 'Component' or 'Directive'
+   * reference).
+   */
+  readonly declarationSpan: Span;
+
+  /**
+   * Reference to the compiler directive metadata for the declaration.
+   */
+  readonly metadata?: CompileDirectiveMetadata;
+
+  /**
+   * Error reported trying to get the metadata.
+   */
+  readonly errors: DeclarationError[];
+}
+
+/**
+ * A sequence of declarations.
+ *
+ * A host type; see `LanguageSeriviceHost`.
+ *
+ * @experimental
+ */
+export type Declarations = Declaration[];
+
+/**
+ * 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.
+ *
+ * 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.
+ *
+ * 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 changes 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.
+ *
+ * @experimental
+ */
+export interface LanguageServiceHost {
+  /**
+   * The resolver to use to find compiler metadata.
+   */
+  readonly resolver: CompileMetadataResolver;
+
+  /**
+   * 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`.
+   */
+  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.
+   */
+  getTemplates(fileName: string): TemplateSources;
+
+  /**
+   * Returns the Angular declarations in the given file.
+   */
+  getDeclarations(fileName: string): Declarations;
+
+  /**
+   * Return a summary of all Angular modules in the project.
+   */
+  getAnalyzedModules(): NgAnalyzedModules;
+
+  /**
+   * Return a list all the template files referenced by the project.
+   */
+  getTemplateReferences(): string[];
+}
+
+/**
+ * An item of the completion result to be displayed by an editor.
+ *
+ * A `LanguageService` interface.
+ *
+ * @experimental
+ */
+export interface Completion {
+  /**
+   * The kind of comletion.
+   */
+  kind: DeclarationKind;
+
+  /**
+   * The name of the completion to be displayed
+   */
+  name: string;
+
+  /**
+   * The key to use to sort the completions for display.
+   */
+  sort: string;
+}
+
+/**
+ * A sequence of completions.
+ *
+ * @experimental
+ */
+export type Completions = Completion[] | undefined;
+
+/**
+ * A file and span.
+ */
+export interface Location {
+  fileName: string;
+  span: Span;
+}
+
+/**
+ * The kind of diagnostic message.
+ *
+ * @experimental
+ */
+export enum DiagnosticKind {
+  Error,
+  Warning,
+}
+
+/**
+ * A template diagnostics message chain. This is similar to the TypeScript
+ * DiagnosticMessageChain. The messages are intended to be formatted as separate
+ * sentence fragments and indented.
+ *
+ * For compatibility previous implementation, the values are expected to override
+ * toString() to return a formatted message.
+ *
+ * @experimental
+ */
+export interface DiagnosticMessageChain {
+  /**
+   * The text of the diagnostic message to display.
+   */
+  message: string;
+
+  /**
+   * The next message in the chain.
+   */
+  next?: DiagnosticMessageChain;
+}
+
+/**
+ * An template diagnostic message to display.
+ *
+ * @experimental
+ */
+export interface Diagnostic {
+  /**
+   * The kind of diagnostic message
+   */
+  kind: DiagnosticKind;
+
+  /**
+   * The source span that should be highlighted.
+   */
+  span: Span;
+
+  /**
+   * The text of the diagnostic message to display or a chain of messages.
+   */
+  message: string|DiagnosticMessageChain;
+}
+
+/**
+ * A sequence of diagnostic message.
+ *
+ * @experimental
+ */
+export type Diagnostics = Diagnostic[];
+
+/**
+ * A section of hover text. If the text is code then language should be provided.
+ * Otherwise the text is assumed to be Markdown text that will be sanitized.
+ */
+export interface HoverTextSection {
+  /**
+   * Source code or markdown text describing the symbol a the hover location.
+   */
+  readonly text: string;
+
+  /**
+   * The language of the source if `text` is a source code fragment.
+   */
+  readonly language?: string;
+}
+
+/**
+ * Hover information for a symbol at the hover location.
+ */
+export interface Hover {
+  /**
+   * The hover text to display for the symbol at the hover location. If the text includes
+   * source code, the section will specify which language it should be interpreted as.
+   */
+  readonly text: HoverTextSection[];
+
+  /**
+   * The span of source the hover covers.
+   */
+  readonly span: Span;
+}
+
+/**
+ * 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`.
+ *
+ * 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`.
+ *
+ * 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`.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * @experimental
+ */
+export interface LanguageService {
+  /**
+   * Returns a list of all the external templates referenced by the project.
+   */
+  getTemplateReferences(): string[]|undefined;
+
+  /**
+   * Returns a list of all error for all templates in the given file.
+   */
+  getDiagnostics(fileName: string): Diagnostics|undefined;
+
+  /**
+   * Return the completions at the given position.
+   */
+  getCompletionsAt(fileName: string, position: number): Completions|undefined;
+
+  /**
+   * Return the definition location for the symbol at position.
+   */
+  getDefinitionAt(fileName: string, position: number): Definition|undefined;
+
+  /**
+   * Return the hover information for the symbol at position.
+   */
+  getHoverAt(fileName: string, position: number): Hover|undefined;
+
+  /**
+   * Return the pipes that are available at the given position.
+   */
+  getPipesAt(fileName: string, position: number): CompilePipeSummary[];
+}
diff --git a/packages/language-service/src/typescript_host.ts b/packages/language-service/src/typescript_host.ts
new file mode 100644
index 000000000000..de1e9f4afe21
--- /dev/null
+++ b/packages/language-service/src/typescript_host.ts
@@ -0,0 +1,654 @@
+/**
+ * @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, CompilerConfig, DEFAULT_INTERPOLATION_CONFIG, DirectiveNormalizer, DirectiveResolver, DomElementSchemaRegistry, FormattedError, FormattedMessageChain, HtmlParser, InterpolationConfig, JitSummaryResolver, NgAnalyzedModules, NgModuleResolver, ParseTreeResult, PipeResolver, ResourceLoader, StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, SummaryResolver, analyzeNgModules, createOfflineCompileUrlResolver, isFormattedError} from '@angular/compiler';
+import {CompilerOptions, getClassMembersFromDeclaration, getPipesTable, getSymbolQuery} from '@angular/compiler-cli/src/language_services';
+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, Declaration, DeclarationError, DeclarationKind, Declarations, Definition, DiagnosticMessageChain, LanguageService, LanguageServiceHost, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable, TemplateSource, TemplateSources} from './types';
+import {isTypescriptVersion} from './utils';
+
+
+
+/**
+ * Create a `LanguageServiceHost`
+ */
+export function createLanguageServiceFromTypescript(
+    host: ts.LanguageServiceHost, service: ts.LanguageService): LanguageService {
+  const ngHost = new TypeScriptServiceHost(host, service);
+  const ngServer = createLanguageService(ngHost);
+  ngHost.setSite(ngServer);
+  return ngServer;
+}
+
+/**
+ * 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
+ * syntactically incorrect templates.
+ */
+export class DummyHtmlParser extends HtmlParser {
+  parse(
+      source: string, url: string, parseExpansionForms: boolean = false,
+      interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): ParseTreeResult {
+    return new ParseTreeResult([], []);
+  }
+}
+
+/**
+ * Avoid loading resources in the language servcie by using a dummy loader.
+ */
+export class DummyResourceLoader extends ResourceLoader {
+  get(url: string): Promise<string> { return Promise.resolve(''); }
+}
+
+/**
+ * An implementation of a `LanguageServiceHost` for a TypeScript project.
+ *
+ * The `TypeScriptServiceHost` implements the Angular `LanguageServiceHost` using
+ * the TypeScript language services.
+ *
+ * @experimental
+ */
+export class TypeScriptServiceHost implements LanguageServiceHost {
+  // TODO(issue/24571): remove '!'.
+  private _resolver !: CompileMetadataResolver | null;
+  private _staticSymbolCache = new StaticSymbolCache();
+  // TODO(issue/24571): remove '!'.
+  private _summaryResolver !: AotSummaryResolver;
+  // TODO(issue/24571): remove '!'.
+  private _staticSymbolResolver !: StaticSymbolResolver;
+  // TODO(issue/24571): remove '!'.
+  private _reflector !: StaticReflector | null;
+  // TODO(issue/24571): remove '!'.
+  private _reflectorHost !: ReflectorHost;
+  // TODO(issue/24571): remove '!'.
+  private _checker !: ts.TypeChecker | null;
+  private _typeCache: Symbol[] = [];
+  private context: string|undefined;
+  private lastProgram: ts.Program|undefined;
+  private modulesOutOfDate: boolean = true;
+  // TODO(issue/24571): remove '!'.
+  private analyzedModules !: NgAnalyzedModules | null;
+  // TODO(issue/24571): remove '!'.
+  private service !: LanguageService;
+  // TODO(issue/24571): remove '!'.
+  private fileToComponent !: Map<string, StaticSymbol>| null;
+  // TODO(issue/24571): remove '!'.
+  private templateReferences !: string[] | null;
+  // TODO(issue/24571): remove '!'.
+  private collectedErrors !: Map<string, any[]>| null;
+  private fileVersions = new Map<string, string>();
+
+  constructor(private host: ts.LanguageServiceHost, private tsService: ts.LanguageService) {}
+
+  setSite(service: LanguageService) { this.service = service; }
+
+  /**
+   * Angular LanguageServiceHost implementation
+   */
+  get resolver(): CompileMetadataResolver {
+    this.validate();
+    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 DummyResourceLoader();
+      const urlResolver = createOfflineCompileUrlResolver();
+      const htmlParser = new DummyHtmlParser();
+      // 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, htmlParser, moduleResolver, directiveResolver, pipeResolver,
+          new JitSummaryResolver(), elementSchemaRegistry, directiveNormalizer, new Console(),
+          this._staticSymbolCache, this.reflector,
+          (error, type) => this.collectError(error, type && type.filePath));
+    }
+    return result;
+  }
+
+  getTemplateReferences(): string[] {
+    this.ensureTemplateMap();
+    return this.templateReferences || [];
+  }
+
+  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);
+      }
+    } else {
+      this.ensureTemplateMap();
+      // TODO: Cannocalize the file?
+      const componentType = this.fileToComponent !.get(fileName);
+      if (componentType) {
+        return this.getSourceFromType(
+            fileName, this.host.getScriptVersion(fileName), componentType);
+      }
+    }
+    return undefined;
+  }
+
+  getAnalyzedModules(): NgAnalyzedModules {
+    this.updateAnalyzedModules();
+    return this.ensureAnalyzedModules();
+  }
+
+  private ensureAnalyzedModules(): NgAnalyzedModules {
+    let analyzedModules = this.analyzedModules;
+    if (!analyzedModules) {
+      if (this.host.getScriptFileNames().length === 0) {
+        analyzedModules = {
+          files: [],
+          ngModuleByPipeOrDirective: new Map(),
+          ngModules: [],
+        };
+      } else {
+        const analyzeHost = {isSourceFile(filePath: string) { return true; }};
+        const programFiles = this.program.getSourceFiles().map(sf => sf.fileName);
+        analyzedModules =
+            analyzeNgModules(programFiles, analyzeHost, this.staticSymbolResolver, this.resolver);
+      }
+      this.analyzedModules = analyzedModules;
+    }
+    return analyzedModules;
+  }
+
+  getTemplates(fileName: string): TemplateSources {
+    this.ensureTemplateMap();
+    const componentType = this.fileToComponent !.get(fileName);
+    if (componentType) {
+      const templateSource = this.getTemplateAt(fileName, 0);
+      if (templateSource) {
+        return [templateSource];
+      }
+    } else {
+      let version = this.host.getScriptVersion(fileName);
+      let result: TemplateSource[] = [];
+
+      // Find each template string in the file
+      let visit = (child: ts.Node) => {
+        let templateSource = this.getSourceFromNode(fileName, version, child);
+        if (templateSource) {
+          result.push(templateSource);
+        } else {
+          ts.forEachChild(child, visit);
+        }
+      };
+
+      let sourceFile = this.getSourceFile(fileName);
+      if (sourceFile) {
+        this.context = (sourceFile as any).path || sourceFile.fileName;
+        ts.forEachChild(sourceFile, visit);
+      }
+      return result.length ? result : undefined;
+    }
+  }
+
+  getDeclarations(fileName: string): Declarations {
+    const result: Declarations = [];
+    const sourceFile = this.getSourceFile(fileName);
+    if (sourceFile) {
+      let visit = (child: ts.Node) => {
+        let declaration = this.getDeclarationFromNode(sourceFile, child);
+        if (declaration) {
+          result.push(declaration);
+        } else {
+          ts.forEachChild(child, visit);
+        }
+      };
+      ts.forEachChild(sourceFile, visit);
+    }
+    return result;
+  }
+
+  getSourceFile(fileName: string): ts.SourceFile|undefined {
+    return this.tsService.getProgram().getSourceFile(fileName);
+  }
+
+  updateAnalyzedModules() {
+    this.validate();
+    if (this.modulesOutOfDate) {
+      this.analyzedModules = null;
+      this._reflector = null;
+      this.templateReferences = null;
+      this.fileToComponent = null;
+      this.ensureAnalyzedModules();
+      this.modulesOutOfDate = false;
+    }
+  }
+
+  private get program() { return this.tsService.getProgram(); }
+
+  private get checker() {
+    let checker = this._checker;
+    if (!checker) {
+      checker = this._checker = this.program.getTypeChecker();
+    }
+    return checker;
+  }
+
+  private validate() {
+    const program = this.program;
+    if (this.lastProgram !== program) {
+      // Invalidate file that have changed in the static symbol resolver
+      const invalidateFile = (fileName: string) =>
+          this._staticSymbolResolver.invalidateFile(fileName);
+      this.clearCaches();
+      const seen = new Set<string>();
+      for (let sourceFile of this.program.getSourceFiles()) {
+        const fileName = sourceFile.fileName;
+        seen.add(fileName);
+        const version = this.host.getScriptVersion(fileName);
+        const lastVersion = this.fileVersions.get(fileName);
+        if (version != lastVersion) {
+          this.fileVersions.set(fileName, version);
+          if (this._staticSymbolResolver) {
+            invalidateFile(fileName);
+          }
+        }
+      }
+
+      // Remove file versions that are no longer in the file and invalidate them.
+      const missing = Array.from(this.fileVersions.keys()).filter(f => !seen.has(f));
+      missing.forEach(f => this.fileVersions.delete(f));
+      if (this._staticSymbolResolver) {
+        missing.forEach(invalidateFile);
+      }
+
+      this.lastProgram = program;
+    }
+  }
+
+  private clearCaches() {
+    this._checker = null;
+    this._typeCache = [];
+    this._resolver = null;
+    this.collectedErrors = null;
+    this.modulesOutOfDate = true;
+  }
+
+  private ensureTemplateMap() {
+    if (!this.fileToComponent || !this.templateReferences) {
+      const fileToComponent = new Map<string, StaticSymbol>();
+      const templateReference: string[] = [];
+      const ngModuleSummary = this.getAnalyzedModules();
+      const urlResolver = createOfflineCompileUrlResolver();
+      for (const module of ngModuleSummary.ngModules) {
+        for (const directive of module.declaredDirectives) {
+          const {metadata} = this.resolver.getNonNormalizedDirectiveMetadata(directive.reference) !;
+          if (metadata.isComponent && metadata.template && metadata.template.templateUrl) {
+            const templateName = urlResolver.resolve(
+                this.reflector.componentModuleUrl(directive.reference),
+                metadata.template.templateUrl);
+            fileToComponent.set(templateName, directive.reference);
+            templateReference.push(templateName);
+          }
+        }
+      }
+      this.fileToComponent = fileToComponent;
+      this.templateReferences = templateReference;
+    }
+  }
+
+  private getSourceFromDeclaration(
+      fileName: string, version: string, source: string, span: Span, type: StaticSymbol,
+      declaration: ts.ClassDeclaration, node: ts.Node, sourceFile: ts.SourceFile): TemplateSource
+      |undefined {
+    let queryCache: SymbolQuery|undefined = undefined;
+    const t = this;
+    if (declaration) {
+      return {
+        version,
+        source,
+        span,
+        type,
+        get members() {
+          return getClassMembersFromDeclaration(t.program, t.checker, sourceFile, declaration);
+        },
+        get query() {
+          if (!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;
+        }
+      };
+    }
+  }
+
+  private getSourceFromNode(fileName: string, version: string, node: ts.Node): TemplateSource
+      |undefined {
+    let result: TemplateSource|undefined = undefined;
+    const t = this;
+    switch (node.kind) {
+      case ts.SyntaxKind.NoSubstitutionTemplateLiteral:
+      case ts.SyntaxKind.StringLiteral:
+        let [declaration, decorator] = this.getTemplateClassDeclFromNode(node);
+        if (declaration && declaration.name) {
+          const sourceFile = this.getSourceFile(fileName);
+          if (sourceFile) {
+            return this.getSourceFromDeclaration(
+                fileName, version, this.stringOf(node) || '', shrink(spanOf(node)),
+                this.reflector.getStaticSymbol(sourceFile.fileName, declaration.name.text),
+                declaration, node, sourceFile);
+          }
+        }
+        break;
+    }
+    return result;
+  }
+
+  private getSourceFromType(fileName: string, version: string, type: StaticSymbol): TemplateSource
+      |undefined {
+    let result: TemplateSource|undefined = undefined;
+    const declaration = this.getTemplateClassFromStaticSymbol(type);
+    if (declaration) {
+      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;
+  }
+
+  private get reflectorHost(): ReflectorHost {
+    let result = this._reflectorHost;
+    if (!result) {
+      if (!this.context) {
+        // Make up a context by finding the first script and using that as the base dir.
+        const scriptFileNames = this.host.getScriptFileNames();
+        if (0 === scriptFileNames.length) {
+          throw new Error('Internal error: no script file names found');
+        }
+        this.context = scriptFileNames[0];
+      }
+
+      // Use the file context's directory as the base directory.
+      // The host's getCurrentDirectory() is not reliable as it is always "" in
+      // tsserver. We don't need the exact base directory, just one that contains
+      // a source file.
+      const source = this.tsService.getProgram().getSourceFile(this.context);
+      if (!source) {
+        throw new Error('Internal error: no context could be determined');
+      }
+
+      const tsConfigPath = findTsConfig(source.fileName);
+      const basePath = path.dirname(tsConfigPath || this.context);
+      const options: CompilerOptions = {basePath, genDir: basePath};
+      const compilerOptions = this.host.getCompilationSettings();
+      if (compilerOptions && compilerOptions.baseUrl) {
+        options.baseUrl = compilerOptions.baseUrl;
+      }
+      if (compilerOptions && compilerOptions.paths) {
+        options.paths = compilerOptions.paths;
+      }
+      result = this._reflectorHost =
+          new ReflectorHost(() => this.tsService.getProgram(), this.host, options);
+    }
+    return result;
+  }
+
+  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);
+    }
+  }
+
+  private get staticSymbolResolver(): StaticSymbolResolver {
+    let result = this._staticSymbolResolver;
+    if (!result) {
+      this._summaryResolver = new AotSummaryResolver(
+          {
+            loadSummary(filePath: string) { return null; },
+            isSourceFile(sourceFilePath: string) { return true; },
+            toSummaryFileName(sourceFilePath: string) { return sourceFilePath; },
+            fromSummaryFileName(filePath: string): string{return filePath;},
+          },
+          this._staticSymbolCache);
+      result = this._staticSymbolResolver = new StaticSymbolResolver(
+          this.reflectorHost as any, this._staticSymbolCache, this._summaryResolver,
+          (e, filePath) => this.collectError(e, filePath !));
+    }
+    return result;
+  }
+
+  private get reflector(): StaticReflector {
+    let result = this._reflector;
+    if (!result) {
+      const ssr = this.staticSymbolResolver;
+      result = this._reflector = new StaticReflector(
+          this._summaryResolver, ssr, [], [], (e, filePath) => this.collectError(e, filePath !));
+    }
+    return result;
+  }
+
+  private getTemplateClassFromStaticSymbol(type: StaticSymbol): ts.ClassDeclaration|undefined {
+    const source = this.getSourceFile(type.filePath);
+    if (source) {
+      const declarationNode = 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;
+          }
+        }
+      });
+      return declarationNode as ts.ClassDeclaration;
+    }
+
+    return undefined;
+  }
+
+  private static missingTemplate: [ts.ClassDeclaration | undefined, ts.Expression|undefined] =
+      [undefined, undefined];
+
+  /**
+   * Given a template string node, see if it is an Angular template string, and if so return the
+   * containing class.
+   */
+  private getTemplateClassDeclFromNode(currentToken: ts.Node):
+      [ts.ClassDeclaration | undefined, ts.Expression|undefined] {
+    // Verify we are in a 'template' property assignment, in an object literal, which is an call
+    // arg, in a decorator
+    let parentNode = currentToken.parent;  // PropertyAssignment
+    if (!parentNode) {
+      return TypeScriptServiceHost.missingTemplate;
+    }
+    if (parentNode.kind !== ts.SyntaxKind.PropertyAssignment) {
+      return TypeScriptServiceHost.missingTemplate;
+    } else {
+      // TODO: Is this different for a literal, i.e. a quoted property name like "template"?
+      if ((parentNode as any).name.text !== 'template') {
+        return TypeScriptServiceHost.missingTemplate;
+      }
+    }
+    parentNode = parentNode.parent;  // ObjectLiteralExpression
+    if (!parentNode || parentNode.kind !== ts.SyntaxKind.ObjectLiteralExpression) {
+      return TypeScriptServiceHost.missingTemplate;
+    }
+
+    parentNode = parentNode.parent;  // CallExpression
+    if (!parentNode || parentNode.kind !== ts.SyntaxKind.CallExpression) {
+      return TypeScriptServiceHost.missingTemplate;
+    }
+    const callTarget = (<ts.CallExpression>parentNode).expression;
+
+    let decorator = parentNode.parent;  // Decorator
+    if (!decorator || decorator.kind !== ts.SyntaxKind.Decorator) {
+      return TypeScriptServiceHost.missingTemplate;
+    }
+
+    let declaration = <ts.ClassDeclaration>decorator.parent;  // ClassDeclaration
+    if (!declaration || declaration.kind !== ts.SyntaxKind.ClassDeclaration) {
+      return TypeScriptServiceHost.missingTemplate;
+    }
+    return [declaration, callTarget];
+  }
+
+  private getCollectedErrors(defaultSpan: Span, sourceFile: ts.SourceFile): DeclarationError[] {
+    const errors = (this.collectedErrors && this.collectedErrors.get(sourceFile.fileName));
+    return (errors && errors.map((e: any) => {
+             const line = e.line || (e.position && e.position.line);
+             const column = e.column || (e.position && e.position.column);
+             const span = spanAt(sourceFile, line, column) || defaultSpan;
+             if (isFormattedError(e)) {
+               return errorToDiagnosticWithChain(e, span);
+             }
+             return {message: e.message, span};
+           })) ||
+        [];
+  }
+
+  private getDeclarationFromNode(sourceFile: ts.SourceFile, node: ts.Node): Declaration|undefined {
+    if (node.kind == ts.SyntaxKind.ClassDeclaration && node.decorators &&
+        (node as ts.ClassDeclaration).name) {
+      for (const decorator of node.decorators) {
+        if (decorator.expression && decorator.expression.kind == ts.SyntaxKind.CallExpression) {
+          const classDeclaration = node as ts.ClassDeclaration;
+          if (classDeclaration.name) {
+            const call = decorator.expression as ts.CallExpression;
+            const target = call.expression;
+            const type = this.checker.getTypeAtLocation(target);
+            if (type) {
+              const staticSymbol =
+                  this.reflector.getStaticSymbol(sourceFile.fileName, classDeclaration.name.text);
+              try {
+                if (this.resolver.isDirective(staticSymbol as any)) {
+                  const {metadata} =
+                      this.resolver.getNonNormalizedDirectiveMetadata(staticSymbol as any) !;
+                  const declarationSpan = spanOf(target);
+                  return {
+                    type: staticSymbol,
+                    declarationSpan,
+                    metadata,
+                    errors: this.getCollectedErrors(declarationSpan, sourceFile)
+                  };
+                }
+              } catch (e) {
+                if (e.message) {
+                  this.collectError(e, sourceFile.fileName);
+                  const declarationSpan = spanOf(target);
+                  return {
+                    type: staticSymbol,
+                    declarationSpan,
+                    errors: this.getCollectedErrors(declarationSpan, sourceFile)
+                  };
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  private stringOf(node: ts.Node): string|undefined {
+    switch (node.kind) {
+      case ts.SyntaxKind.NoSubstitutionTemplateLiteral:
+        return (<ts.LiteralExpression>node).text;
+      case ts.SyntaxKind.StringLiteral:
+        return (<ts.StringLiteral>node).text;
+    }
+  }
+
+  private findNode(sourceFile: ts.SourceFile, position: number): ts.Node|undefined {
+    function find(node: ts.Node): ts.Node|undefined {
+      if (position >= node.getStart() && position < node.getEnd()) {
+        return ts.forEachChild(node, find) || node;
+      }
+    }
+
+    return find(sourceFile);
+  }
+}
+
+
+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 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 chainedMessage(chain: DiagnosticMessageChain, indent = ''): string {
+  return indent + chain.message + (chain.next ? chainedMessage(chain.next, indent + '  ') : '');
+}
+
+class DiagnosticMessageChainImpl implements DiagnosticMessageChain {
+  constructor(public message: string, public next?: DiagnosticMessageChain) {}
+  toString(): string { return chainedMessage(this); }
+}
+
+function convertChain(chain: FormattedMessageChain): DiagnosticMessageChain {
+  return {message: chain.message, next: chain.next ? convertChain(chain.next) : undefined};
+}
+
+function errorToDiagnosticWithChain(error: FormattedError, span: Span): DeclarationError {
+  return {message: error.chain ? convertChain(error.chain) : error.message, span};
+}
diff --git a/packages/language-service/src/utils.ts b/packages/language-service/src/utils.ts
new file mode 100644
index 000000000000..d9914d8c7d87
--- /dev/null
+++ b/packages/language-service/src/utils.ts
@@ -0,0 +1,179 @@
+/**
+ * @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 {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/src/language_services';
+import * as ts from 'typescript';
+
+import {SelectorInfo, TemplateInfo} from './common';
+import {Span} from './types';
+
+export interface SpanHolder {
+  sourceSpan: ParseSourceSpan;
+  endSourceSpan?: ParseSourceSpan|null;
+  children?: SpanHolder[];
+}
+
+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)) {
+    return {start: span.start.offset, end: span.end.offset};
+  } else {
+    if (span.endSourceSpan) {
+      return {start: span.sourceSpan.start.offset, end: span.endSourceSpan.end.offset};
+    } else if (span.children && span.children.length) {
+      return {
+        start: span.sourceSpan.start.offset,
+        end: spanOf(span.children[span.children.length - 1]) !.end
+      };
+    }
+    return {start: span.sourceSpan.start.offset, end: span.sourceSpan.end.offset};
+  }
+}
+
+export function inSpan(position: number, span?: Span, exclusive?: boolean): boolean {
+  return span != null && (exclusive ? position >= span.start && position < span.end :
+                                      position >= span.start && position <= span.end);
+}
+
+export function offsetSpan(span: Span, amount: number): Span {
+  return {start: span.start + amount, end: span.end + amount};
+}
+
+export function isNarrower(spanA: Span, spanB: Span): boolean {
+  return spanA.start >= spanB.start && spanA.end <= spanB.end;
+}
+
+export 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;
+}
+
+export function getSelectors(info: TemplateInfo): SelectorInfo {
+  const map = new Map<CssSelector, CompileDirectiveSummary>();
+  const selectors: CssSelector[] = flatten(info.directives.map(directive => {
+    const selectors: CssSelector[] = CssSelector.parse(directive.selector !);
+    selectors.forEach(selector => map.set(selector, directive));
+    return selectors;
+  }));
+  return {selectors, map};
+}
+
+export function flatten<T>(a: T[][]) {
+  return (<T[]>[]).concat(...a);
+}
+
+export function removeSuffix(value: string, suffix: string) {
+  if (value.endsWith(suffix)) return value.substring(0, value.length - suffix.length);
+  return value;
+}
+
+export function uniqueByName < T extends {
+  name: string;
+}
+> (elements: T[] | undefined): T[]|undefined {
+  if (elements) {
+    const result: T[] = [];
+    const set = new Set<string>();
+    for (const element of elements) {
+      if (!set.has(element.name)) {
+        set.add(element.name);
+        result.push(element);
+      }
+    }
+    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/src/version.ts b/packages/language-service/src/version.ts
new file mode 100644
index 000000000000..af66f0fa278a
--- /dev/null
+++ b/packages/language-service/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/core';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/language-service/test/BUILD.bazel b/packages/language-service/test/BUILD.bazel
new file mode 100644
index 000000000000..81d9cd081178
--- /dev/null
+++ b/packages/language-service/test/BUILD.bazel
@@ -0,0 +1,30 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/compiler-cli/test:test_utils",
+        "//packages/language-service",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    data = [
+        "//packages/common:npm_package",
+        "//packages/compiler:npm_package",
+        "//packages/core:npm_package",
+        "//packages/forms:npm_package",
+    ],
+    # disable since tests are running but not yet passing
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
diff --git a/packages/language-service/test/completions_spec.ts b/packages/language-service/test/completions_spec.ts
new file mode 100644
index 000000000000..84f5281b73c1
--- /dev/null
+++ b/packages/language-service/test/completions_spec.ts
@@ -0,0 +1,263 @@
+/**
+ * @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 'reflect-metadata';
+import * as ts from 'typescript';
+
+import {createLanguageService} from '../src/language_service';
+import {Completions} from '../src/types';
+import {TypeScriptServiceHost} from '../src/typescript_host';
+
+import {toh} from './test_data';
+import {MockTypescriptHost} from './test_utils';
+
+describe('completions', () => {
+  let documentRegistry = ts.createDocumentRegistry();
+  let mockHost = new MockTypescriptHost(['/app/main.ts', '/app/parsing-cases.ts'], toh);
+  let service = ts.createLanguageService(mockHost, documentRegistry);
+  let ngHost = new TypeScriptServiceHost(mockHost, service);
+  let ngService = createLanguageService(ngHost);
+  ngHost.setSite(ngService);
+
+  it('should be able to get entity completions',
+     () => { contains('/app/test.ng', 'entity-amp', '&amp;', '&gt;', '&lt;', '&iota;'); });
+
+  it('should be able to return html elements', () => {
+    let htmlTags = ['h1', 'h2', 'div', 'span'];
+    let locations = ['empty', 'start-tag-h1', 'h1-content', 'start-tag', 'start-tag-after-h'];
+    for (let location of locations) {
+      contains('/app/test.ng', location, ...htmlTags);
+    }
+  });
+
+  it('should be able to return element diretives',
+     () => { contains('/app/test.ng', 'empty', 'my-app'); });
+
+  it('should be able to return h1 attributes',
+     () => { contains('/app/test.ng', 'h1-after-space', 'id', 'dir', 'lang', 'onclick'); });
+
+  it('should be able to find common angular attributes',
+     () => { contains('/app/test.ng', 'div-attributes', '(click)', '[ngClass]'); });
+
+  it('should be able to get completions in some random garbage', () => {
+    const fileName = '/app/test.ng';
+    mockHost.override(fileName, ' > {{tle<\n  {{retl  ><bel/beled}}di>\n   la</b  </d    &a  ');
+    expect(() => ngService.getCompletionsAt(fileName, 31)).not.toThrow();
+    mockHost.override(fileName, undefined !);
+  });
+
+  it('should be able to infer the type of a ngForOf', () => {
+    addCode(
+        `
+      interface Person {
+        name: string,
+        street: string
+      }
+
+      @Component({template: '<div *ngFor="let person of people">{{person.~{name}name}}</div'})
+      export class MyComponent {
+        people: Person[]
+      }`,
+        () => { contains('/app/app.component.ts', 'name', 'name', 'street'); });
+  });
+
+  it('should be able to infer the type of a ngForOf with an async pipe', () => {
+    addCode(
+        `
+      interface Person {
+        name: string,
+        street: string
+      }
+
+      @Component({template: '<div *ngFor="let person of people | async">{{person.~{name}name}}</div'})
+      export class MyComponent {
+        people: Promise<Person[]>;
+      }`,
+        () => { contains('/app/app.component.ts', 'name', 'name', 'street'); });
+  });
+
+  it('should be able to complete every character in the file', () => {
+    const fileName = '/app/test.ng';
+
+    expect(() => {
+      let chance = 0.05;
+      let requests = 0;
+      function tryCompletionsAt(position: number) {
+        try {
+          if (Math.random() < chance) {
+            ngService.getCompletionsAt(fileName, position);
+            requests++;
+          }
+        } catch (e) {
+          // Emit enough diagnostic information to reproduce the error.
+          console.error(
+              `Position: ${position}\nContent: "${mockHost.getFileContent(fileName)}"\nStack:\n${e.stack}`);
+          throw e;
+        }
+      }
+      try {
+        const originalContent = mockHost.getFileContent(fileName) !;
+
+        // For each character in the file, add it to the file and request a completion after it.
+        for (let index = 0, len = originalContent.length; index < len; index++) {
+          const content = originalContent.substr(0, index);
+          mockHost.override(fileName, content);
+          tryCompletionsAt(index);
+        }
+
+        // For the complete file, try to get a completion at every character.
+        mockHost.override(fileName, originalContent);
+        for (let index = 0, len = originalContent.length; index < len; index++) {
+          tryCompletionsAt(index);
+        }
+
+        // Delete random characters in the file until we get an empty file.
+        let content = originalContent;
+        while (content.length > 0) {
+          const deleteIndex = Math.floor(Math.random() * content.length);
+          content = content.slice(0, deleteIndex - 1) + content.slice(deleteIndex + 1);
+          mockHost.override(fileName, content);
+
+          const requestIndex = Math.floor(Math.random() * content.length);
+          tryCompletionsAt(requestIndex);
+        }
+
+        // Build up the string from zero asking for a completion after every char
+        buildUp(originalContent, (text, position) => {
+          mockHost.override(fileName, text);
+          tryCompletionsAt(position);
+        });
+      } finally {
+        mockHost.override(fileName, undefined !);
+      }
+    }).not.toThrow();
+  });
+
+  describe('with regression tests', () => {
+    it('should not crash with an incomplete component', () => {
+      expect(() => {
+        const code = `
+@Component({
+  template: '~{inside-template}'
+})
+export class MyComponent {
+
+}`;
+        addCode(code, fileName => { contains(fileName, 'inside-template', 'h1'); });
+      }).not.toThrow();
+    });
+
+    it('should hot crash with an incomplete class', () => {
+      expect(() => {
+        addCode('\nexport class', fileName => { ngHost.updateAnalyzedModules(); });
+      }).not.toThrow();
+    });
+
+  });
+
+  it('should respect paths configuration', () => {
+    mockHost.overrideOptions(options => {
+      options.baseUrl = '/app';
+      options.paths = {'bar/*': ['foo/bar/*']};
+      return options;
+    });
+    mockHost.addScript('/app/foo/bar/shared.ts', `
+      export interface Node {
+        children: Node[];
+      }
+    `);
+    mockHost.addScript('/app/my.component.ts', `
+      import { Component } from '@angular/core';
+      import { Node } from 'bar/shared';
+
+      @Component({
+        selector: 'my-component',
+        template: '{{tree.~{tree} }}'
+      })
+      export class MyComponent {
+        tree: Node;
+      }
+    `);
+    ngHost.updateAnalyzedModules();
+    contains('/app/my.component.ts', 'tree', 'children');
+  });
+
+  function addCode(code: string, cb: (fileName: string, content?: string) => void) {
+    const fileName = '/app/app.component.ts';
+    const originalContent = mockHost.getFileContent(fileName);
+    const newContent = originalContent + code;
+    mockHost.override(fileName, originalContent + code);
+    ngHost.updateAnalyzedModules();
+    try {
+      cb(fileName, newContent);
+    } finally {
+      mockHost.override(fileName, undefined !);
+    }
+  }
+
+  function contains(fileName: string, locationMarker: string, ...names: string[]) {
+    let location = mockHost.getMarkerLocations(fileName) ![locationMarker];
+    if (location == null) {
+      throw new Error(`No marker ${locationMarker} found.`);
+    }
+    expectEntries(locationMarker, ngService.getCompletionsAt(fileName, location), ...names);
+  }
+});
+
+
+function expectEntries(locationMarker: string, completions: Completions, ...names: string[]) {
+  let entries: {[name: string]: boolean} = {};
+  if (!completions) {
+    throw new Error(
+        `Expected result from ${locationMarker} to include ${names.join(', ')} but no result provided`);
+  }
+  if (!completions.length) {
+    throw new Error(
+        `Expected result from ${locationMarker} to include ${names.join(', ')} an empty result provided`);
+  } else {
+    for (let entry of completions) {
+      entries[entry.name] = true;
+    }
+    let missing = names.filter(name => !entries[name]);
+    if (missing.length) {
+      throw new Error(
+          `Expected result from ${locationMarker} to include at least one of the following, ${missing.join(', ')}, in the list of entries ${completions.map(entry => entry.name).join(', ')}`);
+    }
+  }
+}
+
+function buildUp(originalText: string, cb: (text: string, position: number) => void) {
+  let count = originalText.length;
+
+  let inString: boolean[] = (new Array(count)).fill(false);
+  let unused: number[] = (new Array(count)).fill(1).map((v, i) => i);
+
+  function getText() {
+    return new Array(count)
+        .fill(1)
+        .map((v, i) => i)
+        .filter(i => inString[i])
+        .map(i => originalText[i])
+        .join('');
+  }
+
+  function randomUnusedIndex() { return Math.floor(Math.random() * unused.length); }
+
+  while (unused.length > 0) {
+    let unusedIndex = randomUnusedIndex();
+    let index = unused[unusedIndex];
+    if (index == null) throw new Error('Internal test buildup error');
+    if (inString[index]) throw new Error('Internal test buildup error');
+    inString[index] = true;
+    unused.splice(unusedIndex, 1);
+    let text = getText();
+    let position =
+        inString.filter((_, i) => i <= index).map(v => v ? 1 : 0).reduce((p, v) => p + v, 0);
+    cb(text, position);
+  }
+}
diff --git a/packages/language-service/test/definitions_spec.ts b/packages/language-service/test/definitions_spec.ts
new file mode 100644
index 000000000000..8c0aced32057
--- /dev/null
+++ b/packages/language-service/test/definitions_spec.ts
@@ -0,0 +1,168 @@
+/**
+ * @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 ts from 'typescript';
+
+import {createLanguageService} from '../src/language_service';
+import {Span} from '../src/types';
+import {TypeScriptServiceHost} from '../src/typescript_host';
+
+import {toh} from './test_data';
+
+import {MockTypescriptHost,} from './test_utils';
+
+describe('definitions', () => {
+  let documentRegistry = ts.createDocumentRegistry();
+  let mockHost = new MockTypescriptHost(['/app/main.ts', '/app/parsing-cases.ts'], toh);
+  let service = ts.createLanguageService(mockHost, documentRegistry);
+  let ngHost = new TypeScriptServiceHost(mockHost, service);
+  let ngService = createLanguageService(ngHost);
+  ngHost.setSite(ngService);
+
+  it('should be able to find field in an interpolation', () => {
+    localReference(
+        ` @Component({template: '{{«name»}}'}) export class MyComponent { «∆name∆: string;» }`);
+  });
+
+  it('should be able to find a field in a attribute reference', () => {
+    localReference(
+        ` @Component({template: '<input [(ngModel)]="«name»">'}) export class MyComponent { «∆name∆: string;» }`);
+  });
+
+  it('should be able to find a method from a call', () => {
+    localReference(
+        ` @Component({template: '<div (click)="«myClick»();"></div>'}) export class MyComponent { «∆myClick∆() { }»}`);
+  });
+
+  it('should be able to find a field reference in an *ngIf', () => {
+    localReference(
+        ` @Component({template: '<div *ngIf="«include»"></div>'}) export class MyComponent { «∆include∆ = true;»}`);
+  });
+
+  it('should be able to find a reference to a component', () => {
+    reference(
+        'parsing-cases.ts',
+        ` @Component({template: '<«test-comp»></test-comp>'}) export class MyComponent { }`);
+  });
+
+  it('should be able to find an event provider', () => {
+    reference(
+        '/app/parsing-cases.ts', 'test',
+        ` @Component({template: '<test-comp («test»)="myHandler()"></div>'}) export class MyComponent { myHandler() {} }`);
+  });
+
+  it('should be able to find an input provider', () => {
+    reference(
+        '/app/parsing-cases.ts', 'tcName',
+        ` @Component({template: '<test-comp [«tcName»]="name"></div>'}) export class MyComponent { name = 'my name'; }`);
+  });
+
+  it('should be able to find a pipe', () => {
+    reference(
+        'async_pipe.d.ts',
+        ` @Component({template: '<div *ngIf="input | «async»"></div>'}) export class MyComponent { input: EventEmitter; }`);
+  });
+
+  function localReference(code: string) {
+    addCode(code, fileName => {
+      const refResult = mockHost.getReferenceMarkers(fileName) !;
+      for (const name in refResult.references) {
+        const references = refResult.references[name];
+        const definitions = refResult.definitions[name];
+        expect(definitions).toBeDefined();  // If this fails the test data is wrong.
+        for (const reference of references) {
+          const definition = ngService.getDefinitionAt(fileName, reference.start);
+          if (definition) {
+            definition.forEach(d => expect(d.fileName).toEqual(fileName));
+            const match = matchingSpan(definition.map(d => d.span), definitions);
+            if (!match) {
+              throw new Error(
+                  `Expected one of ${stringifySpans(definition.map(d => d.span))} to match one of ${stringifySpans(definitions)}`);
+            }
+          } else {
+            throw new Error('Expected a definition');
+          }
+        }
+      }
+    });
+  }
+
+  function reference(referencedFile: string, code: string): void;
+  function reference(referencedFile: string, span: Span, code: string): void;
+  function reference(referencedFile: string, definition: string, code: string): void;
+  function reference(referencedFile: string, p1?: any, p2?: any): void {
+    const code: string = p2 ? p2 : p1;
+    const definition: string = p2 ? p1 : undefined;
+    let span: Span = p2 && p1.start != null ? p1 : undefined;
+    if (definition && !span) {
+      const referencedFileMarkers = mockHost.getReferenceMarkers(referencedFile) !;
+      expect(referencedFileMarkers).toBeDefined();  // If this fails the test data is wrong.
+      const spans = referencedFileMarkers.definitions[definition];
+      expect(spans).toBeDefined();  // If this fails the test data is wrong.
+      span = spans[0];
+    }
+    addCode(code, fileName => {
+      const refResult = mockHost.getReferenceMarkers(fileName) !;
+      let tests = 0;
+      for (const name in refResult.references) {
+        const references = refResult.references[name];
+        expect(reference).toBeDefined();  // If this fails the test data is wrong.
+        for (const reference of references) {
+          tests++;
+          const definition = ngService.getDefinitionAt(fileName, reference.start);
+          if (definition) {
+            definition.forEach(d => {
+              if (d.fileName.indexOf(referencedFile) < 0) {
+                throw new Error(
+                    `Expected reference to file ${referencedFile}, received ${d.fileName}`);
+              }
+              if (span) {
+                expect(d.span).toEqual(span);
+              }
+            });
+          } else {
+            throw new Error('Expected a definition');
+          }
+        }
+      }
+      if (!tests) {
+        throw new Error('Expected at least one reference (test data error)');
+      }
+    });
+  }
+
+  function addCode(code: string, cb: (fileName: string, content?: string) => void) {
+    const fileName = '/app/app.component.ts';
+    const originalContent = mockHost.getFileContent(fileName);
+    const newContent = originalContent + code;
+    mockHost.override(fileName, originalContent + code);
+    try {
+      cb(fileName, newContent);
+    } finally {
+      mockHost.override(fileName, undefined !);
+    }
+  }
+});
+
+function matchingSpan(aSpans: Span[], bSpans: Span[]): Span|undefined {
+  for (const a of aSpans) {
+    for (const b of bSpans) {
+      if (a.start == b.start && a.end == b.end) {
+        return a;
+      }
+    }
+  }
+}
+
+function stringifySpan(span: Span) {
+  return span ? `(${span.start}-${span.end})` : '<undefined>';
+}
+
+function stringifySpans(spans: Span[]) {
+  return spans ? `[${spans.map(stringifySpan).join(', ')}]` : '<empty>';
+}
\ No newline at end of file
diff --git a/packages/language-service/test/diagnostics_spec.ts b/packages/language-service/test/diagnostics_spec.ts
new file mode 100644
index 000000000000..d8692fe35e5c
--- /dev/null
+++ b/packages/language-service/test/diagnostics_spec.ts
@@ -0,0 +1,391 @@
+/**
+ * @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 ts from 'typescript';
+
+import {createLanguageService} from '../src/language_service';
+import {Diagnostics, LanguageService} from '../src/types';
+import {TypeScriptServiceHost} from '../src/typescript_host';
+
+import {toh} from './test_data';
+import {MockTypescriptHost, diagnosticMessageContains, findDiagnostic, includeDiagnostic, noDiagnostics} from './test_utils';
+
+describe('diagnostics', () => {
+  let mockHost: MockTypescriptHost;
+  let ngHost: TypeScriptServiceHost;
+  let ngService: LanguageService;
+
+  beforeEach(() => {
+    mockHost = new MockTypescriptHost(['/app/main.ts', '/app/parsing-cases.ts'], toh);
+    const documentRegistry = ts.createDocumentRegistry();
+    const service = ts.createLanguageService(mockHost, documentRegistry);
+    ngHost = new TypeScriptServiceHost(mockHost, service);
+    ngService = createLanguageService(ngHost);
+    ngHost.setSite(ngService);
+  });
+
+  it('should be no diagnostics for test.ng',
+     () => { expect(ngService.getDiagnostics('/app/test.ng')).toEqual([]); });
+
+  describe('for semantic errors', () => {
+    const fileName = '/app/test.ng';
+
+    function diagnostics(template: string): Diagnostics {
+      try {
+        mockHost.override(fileName, template);
+        return ngService.getDiagnostics(fileName) !;
+      } finally {
+        mockHost.override(fileName, undefined !);
+      }
+    }
+
+    function accept(template: string) { noDiagnostics(diagnostics(template)); }
+
+    function reject(template: string, message: string): void;
+    function reject(template: string, message: string, at: string): void;
+    function reject(template: string, message: string, location: string): void;
+    function reject(template: string, message: string, location: string, len: number): void;
+    function reject(template: string, message: string, at?: number | string, len?: number): void {
+      if (typeof at == 'string') {
+        len = at.length;
+        at = template.indexOf(at);
+      }
+      includeDiagnostic(diagnostics(template), message, at, len);
+    }
+
+    describe('regression', () => {
+      it('should be able to return diagnostics if reflector gets invalidated', () => {
+        const fileName = '/app/main.ts';
+        ngService.getDiagnostics(fileName);
+        (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', () => {
+      it('should accept an event',
+         () => { accept('<div (click)="myClick($event)">Click me!</div>'); });
+      it('should reject it when not in an event binding', () => {
+        reject('<div [tabIndex]="$event"></div>', '\'$event\' is not defined', '$event');
+      });
+    });
+  });
+
+  describe('with regression tests', () => {
+
+    it('should not crash with a incomplete *ngFor', () => {
+      expect(() => {
+        const code =
+            '\n@Component({template: \'<div *ngFor></div> ~{after-div}\'}) export class MyComponent {}';
+        addCode(code, fileName => { ngService.getDiagnostics(fileName); });
+      }).not.toThrow();
+    });
+
+    it('should report a component not in a module', () => {
+      const code = '\n@Component({template: \'<div></div>\'}) export class MyComponent {}';
+      addCode(code, (fileName, content) => {
+        const diagnostics = ngService.getDiagnostics(fileName);
+        const offset = content !.lastIndexOf('@Component') + 1;
+        const len = 'Component'.length;
+        includeDiagnostic(
+            diagnostics !, 'Component \'MyComponent\' is not included in a module', offset, len);
+      });
+    });
+
+    it('should not report an error for a form\'s host directives', () => {
+      const code = '\n@Component({template: \'<form></form>\'}) export class MyComponent {}';
+      addCode(code, (fileName, content) => {
+        const diagnostics = ngService.getDiagnostics(fileName);
+        expectOnlyModuleDiagnostics(diagnostics);
+      });
+    });
+
+    it('should not throw getting diagnostics for an index expression', () => {
+      const code =
+          ` @Component({template: '<a *ngIf="(auth.isAdmin | async) || (event.leads && event.leads[(auth.uid | async)])"></a>'}) export class MyComponent {}`;
+      addCode(
+          code, fileName => { expect(() => ngService.getDiagnostics(fileName)).not.toThrow(); });
+    });
+
+    it('should not throw using a directive with no value', () => {
+      const code =
+          ` @Component({template: '<form><input [(ngModel)]="name" required /></form>'}) export class MyComponent { name = 'some name'; }`;
+      addCode(
+          code, fileName => { expect(() => ngService.getDiagnostics(fileName)).not.toThrow(); });
+    });
+
+    it('should report an error for invalid metadata', () => {
+      const code =
+          ` @Component({template: '', provider: [{provide: 'foo', useFactor: () => 'foo' }]}) export class MyComponent { name = 'some name'; }`;
+      addCode(code, (fileName, content) => {
+        const diagnostics = ngService.getDiagnostics(fileName);
+        includeDiagnostic(
+            diagnostics !, 'Function expressions are not supported in decorators', '() => \'foo\'',
+            content);
+      });
+    });
+
+    it('should not throw for an invalid class', () => {
+      const code = ` @Component({template: ''}) class`;
+      addCode(
+          code, fileName => { expect(() => ngService.getDiagnostics(fileName)).not.toThrow(); });
+    });
+
+    it('should not report an error for sub-types of string', () => {
+      const code =
+          ` @Component({template: \`<div *ngIf="something === 'foo'"></div>\`}) export class MyComponent { something: 'foo' | 'bar'; }`;
+      addCode(code, fileName => {
+        const diagnostics = ngService.getDiagnostics(fileName);
+        expectOnlyModuleDiagnostics(diagnostics);
+      });
+    });
+
+    it('should report a warning if an event results in a callable expression', () => {
+      const code =
+          ` @Component({template: \`<div (click)="onClick"></div>\`}) export class MyComponent { onClick() { } }`;
+      addCode(code, (fileName, content) => {
+        const diagnostics = ngService.getDiagnostics(fileName);
+        includeDiagnostic(
+            diagnostics !, 'Unexpected callable expression. Expected a method call', 'onClick',
+            content);
+      });
+    });
+
+    // #13412
+    it('should not report an error for using undefined', () => {
+      const code =
+          ` @Component({template: \`<div *ngIf="something === undefined"></div>\`}) export class MyComponent { something = 'foo'; }})`;
+      addCode(code, fileName => {
+        const diagnostics = ngService.getDiagnostics(fileName);
+        expectOnlyModuleDiagnostics(diagnostics);
+      });
+    });
+
+    // Issue #13326
+    it('should report a narrow span for invalid pipes', () => {
+      const code =
+          ` @Component({template: '<p> Using an invalid pipe {{data | dat}} </p>'}) export class MyComponent { data = 'some data'; }`;
+      addCode(code, fileName => {
+        const diagnostic = findDiagnostic(ngService.getDiagnostics(fileName) !, 'pipe') !;
+        expect(diagnostic).not.toBeUndefined();
+        expect(diagnostic.span.end - diagnostic.span.start).toBeLessThan(11);
+      });
+    });
+
+    // Issue #19406
+    it('should allow empty template', () => {
+      const appComponent = `
+        import { Component } from '@angular/core';
+
+        @Component({
+          template : '',
+        })
+        export class AppComponent {}
+      `;
+      const fileName = '/app/app.component.ts';
+      mockHost.override(fileName, appComponent);
+      const diagnostics = ngService.getDiagnostics(fileName);
+      expect(diagnostics).toEqual([]);
+    });
+
+    // Issue #15460
+    it('should be able to find members defined on an ancestor type', () => {
+      const app_component = `
+        import { Component } from '@angular/core';
+        import { NgForm } from '@angular/common';
+
+        @Component({
+          selector: 'example-app',
+          template: \`
+             <form #f="ngForm" (ngSubmit)="onSubmit(f)" 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>
+         \`,
+        })
+        export class AppComponent {
+          onSubmit(form: NgForm) {}
+        }
+      `;
+      const fileName = '/app/app.component.ts';
+      mockHost.override(fileName, app_component);
+      const diagnostic = ngService.getDiagnostics(fileName);
+      expect(diagnostic).toEqual([]);
+    });
+
+    it('should report an error for invalid providers', () => {
+      addCode(
+          `
+        @Component({
+          template: '',
+          providers: [null]
+       })
+       export class MyComponent {}
+      `,
+          fileName => {
+            const diagnostics = ngService.getDiagnostics(fileName) !;
+            const expected = findDiagnostic(diagnostics, 'Invalid providers for');
+            const notExpected = findDiagnostic(diagnostics, 'Cannot read property');
+            expect(expected).toBeDefined();
+            expect(notExpected).toBeUndefined();
+          });
+    });
+
+    // Issue #15768
+    it('should be able to parse a template reference', () => {
+      addCode(
+          `
+        @Component({
+          selector: 'my-component',
+          template: \`
+            <div *ngIf="comps | async; let comps; else loading">
+            </div>
+            <ng-template #loading>Loading comps...</ng-template>
+          \`
+        })
+        export class MyComponent {}
+      `,
+          fileName => expectOnlyModuleDiagnostics(ngService.getDiagnostics(fileName)));
+    });
+
+    // Issue #15625
+    it('should not report errors for localization syntax', () => {
+      addCode(
+          `
+          @Component({
+            selector: 'my-component',
+            template: \`
+            <div>
+                {fieldCount, plural, =0 {no fields} =1 {1 field} other {{{fieldCount}} fields}}
+            </div>
+            \`
+          })
+          export class MyComponent {
+            fieldCount: number;
+          }
+      `,
+          fileName => {
+            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([]);
+    });
+
+    it('should not report errors for using the now removed OpaqueToken (support for v4)', () => {
+      const app_component = `
+        import { Component, Inject, OpaqueToken } from '@angular/core';
+        import { NgForm } from '@angular/common';
+
+        export const token = new OpaqueToken();
+
+        @Component({
+          selector: 'example-app',
+          template: '...'
+        })
+        export class AppComponent {
+          constructor (@Inject(token) value: string) {}
+          onSubmit(form: NgForm) {}
+        }
+      `;
+      const fileName = '/app/app.component.ts';
+      mockHost.override(fileName, app_component);
+      const diagnostics = ngService.getDiagnostics(fileName);
+      expect(diagnostics).toEqual([]);
+    });
+
+    function addCode(code: string, cb: (fileName: string, content?: string) => void) {
+      const fileName = '/app/app.component.ts';
+      const originalContent = mockHost.getFileContent(fileName);
+      const newContent = originalContent + code;
+      mockHost.override(fileName, originalContent + code);
+      ngHost.updateAnalyzedModules();
+      try {
+        cb(fileName, newContent);
+      } finally {
+        mockHost.override(fileName, undefined !);
+      }
+    }
+
+    function expectOnlyModuleDiagnostics(diagnostics: Diagnostics | undefined) {
+      // Expect only the 'MyComponent' diagnostic
+      if (!diagnostics) throw new Error('Expecting Diagnostics');
+      if (diagnostics.length > 1) {
+        const unexpectedDiagnostics =
+            diagnostics.filter(diag => !diagnosticMessageContains(diag.message, 'MyComponent'))
+                .map(diag => `(${diag.span.start}:${diag.span.end}): ${diag.message}`);
+
+        if (unexpectedDiagnostics.length) {
+          fail(`Unexpected diagnostics:\n  ${unexpectedDiagnostics.join('\n  ')}`);
+          return;
+        }
+      }
+      expect(diagnostics.length).toBe(1);
+      expect(diagnosticMessageContains(diagnostics[0].message, 'MyComponent')).toBeTruthy();
+    }
+  });
+});
diff --git a/packages/language-service/test/hover_spec.ts b/packages/language-service/test/hover_spec.ts
new file mode 100644
index 000000000000..b07ecb79c5c6
--- /dev/null
+++ b/packages/language-service/test/hover_spec.ts
@@ -0,0 +1,114 @@
+/**
+ * @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 'reflect-metadata';
+
+import * as ts from 'typescript';
+
+import {createLanguageService} from '../src/language_service';
+import {Hover} from '../src/types';
+import {TypeScriptServiceHost} from '../src/typescript_host';
+
+import {toh} from './test_data';
+import {MockTypescriptHost} from './test_utils';
+
+describe('hover', () => {
+  let documentRegistry = ts.createDocumentRegistry();
+  let mockHost = new MockTypescriptHost(['/app/main.ts', '/app/parsing-cases.ts'], toh);
+  let service = ts.createLanguageService(mockHost, documentRegistry);
+  let ngHost = new TypeScriptServiceHost(mockHost, service);
+  let ngService = createLanguageService(ngHost);
+  ngHost.setSite(ngService);
+
+
+  it('should be able to find field in an interpolation', () => {
+    hover(
+        ` @Component({template: '{{«name»}}'}) export class MyComponent { name: string; }`,
+        'property name of MyComponent');
+  });
+
+  it('should be able to find a field in a attribute reference', () => {
+    hover(
+        ` @Component({template: '<input [(ngModel)]="«name»">'}) export class MyComponent { name: string; }`,
+        'property name of MyComponent');
+  });
+
+  it('should be able to find a method from a call', () => {
+    hover(
+        ` @Component({template: '<div (click)="«∆myClick∆()»;"></div>'}) export class MyComponent { myClick() { }}`,
+        'method myClick of MyComponent');
+  });
+
+  it('should be able to find a field reference in an *ngIf', () => {
+    hover(
+        ` @Component({template: '<div *ngIf="«include»"></div>'}) export class MyComponent { include = true;}`,
+        'property include of MyComponent');
+  });
+
+  it('should be able to find a reference to a component', () => {
+    hover(
+        ` @Component({template: '«<∆test∆-comp></test-comp>»'}) export class MyComponent { }`,
+        'component TestComponent');
+  });
+
+  it('should be able to find an event provider', () => {
+    hover(
+        ` @Component({template: '<test-comp «(∆test∆)="myHandler()"»></div>'}) export class MyComponent { myHandler() {} }`,
+        'event testEvent of TestComponent');
+  });
+
+  it('should be able to find an input provider', () => {
+    hover(
+        ` @Component({template: '<test-comp «[∆tcName∆]="name"»></div>'}) export class MyComponent { name = 'my name'; }`,
+        '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;
+      const markers = mockHost.getReferenceMarkers(fileName) !;
+      const keys = Object.keys(markers.references).concat(Object.keys(markers.definitions));
+      for (const referenceName of keys) {
+        const references = (markers.references[referenceName] ||
+                            []).concat(markers.definitions[referenceName] || []);
+        for (const reference of references) {
+          tests++;
+          const hover = ngService.getHoverAt(fileName, reference.start);
+          if (!hover) throw new Error(`Expected a hover at location ${reference.start}`);
+          expect(hover.span).toEqual(reference);
+          expect(toText(hover)).toEqual(hoverText);
+        }
+      }
+      expect(tests).toBeGreaterThan(0);  // If this fails the test is wrong.
+    });
+  }
+
+  function addCode(code: string, cb: (fileName: string, content?: string) => void) {
+    const fileName = '/app/app.component.ts';
+    const originalContent = mockHost.getFileContent(fileName);
+    const newContent = originalContent + code;
+    mockHost.override(fileName, originalContent + code);
+    try {
+      cb(fileName, newContent);
+    } finally {
+      mockHost.override(fileName, undefined !);
+    }
+  }
+
+  function toText(hover: Hover): string { return hover.text.map(h => h.text).join(''); }
+});
\ No newline at end of file
diff --git a/packages/language-service/test/html_info_spec.ts b/packages/language-service/test/html_info_spec.ts
new file mode 100644
index 000000000000..62cefdbfc22c
--- /dev/null
+++ b/packages/language-service/test/html_info_spec.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 {DomElementSchemaRegistry} from '@angular/compiler';
+import {SchemaInformation} from '../src/html_info';
+
+describe('html_info', () => {
+  const domRegistry = new DomElementSchemaRegistry();
+
+  it('should have the same elements as the dom registry', () => {
+    // If this test fails, replace the SCHEMA constant in html_info with the one
+    // from dom_element_schema_registry and also verify the code to interpret
+    // the schema is the same.
+    const domElements = domRegistry.allKnownElementNames();
+    const infoElements = SchemaInformation.instance.allKnownElements();
+    const uniqueToDom = uniqueElements(infoElements, domElements);
+    const uniqueToInfo = uniqueElements(domElements, infoElements);
+    expect(uniqueToDom).toEqual([]);
+    expect(uniqueToInfo).toEqual([]);
+  });
+
+  it('should have at least a sub-set of properties', () => {
+    const elements = SchemaInformation.instance.allKnownElements();
+    for (const element of elements) {
+      for (const prop of SchemaInformation.instance.propertiesOf(element)) {
+        expect(domRegistry.hasProperty(element, prop, []));
+      }
+    }
+  });
+
+});
+
+function uniqueElements<T>(a: T[], b: T[]): T[] {
+  const s = new Set<T>();
+  for (const aItem of a) {
+    s.add(aItem);
+  }
+  const result: T[] = [];
+  const reported = new Set<T>();
+  for (const bItem of b) {
+    if (!s.has(bItem) && !reported.has(bItem)) {
+      reported.add(bItem);
+      result.push(bItem);
+    }
+  }
+  return result;
+}
\ No newline at end of file
diff --git a/packages/language-service/test/language_service_spec.ts b/packages/language-service/test/language_service_spec.ts
new file mode 100644
index 000000000000..38d3de127792
--- /dev/null
+++ b/packages/language-service/test/language_service_spec.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 ts from 'typescript';
+
+import {createLanguageService} from '../src/language_service';
+import {Completions, LanguageService} from '../src/types';
+import {TypeScriptServiceHost} from '../src/typescript_host';
+
+import {toh} from './test_data';
+import {MockTypescriptHost} from './test_utils';
+
+describe('service without angular', () => {
+  let mockHost = new MockTypescriptHost(['/app/main.ts', '/app/parsing-cases.ts'], toh);
+  mockHost.forgetAngular();
+  let service = ts.createLanguageService(mockHost);
+  let ngHost = new TypeScriptServiceHost(mockHost, service);
+  let ngService = createLanguageService(ngHost);
+  const fileName = '/app/test.ng';
+  let position = mockHost.getMarkerLocations(fileName) !['h1-content'];
+
+  it('should not crash a get template references',
+     () => expect(() => ngService.getTemplateReferences()));
+  it('should not crash a get diagnostics',
+     () => 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 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/reflector_host_spec.ts b/packages/language-service/test/reflector_host_spec.ts
new file mode 100644
index 000000000000..0f58ce06df66
--- /dev/null
+++ b/packages/language-service/test/reflector_host_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
+ */
+
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {createLanguageService} from '../src/language_service';
+import {ReflectorHost} from '../src/reflector_host';
+import {Completions, LanguageService} from '../src/types';
+import {TypeScriptServiceHost} from '../src/typescript_host';
+
+import {toh} from './test_data';
+import {MockTypescriptHost} from './test_utils';
+
+describe('reflector_host_spec', () => {
+
+  // Regression #21811
+  it('should be able to find angular under windows', () => {
+    const originalJoin = path.join;
+    let mockHost = new MockTypescriptHost(
+        ['/app/main.ts', '/app/parsing-cases.ts'], toh, 'app/node_modules',
+        {...path, join: (...args: string[]) => originalJoin.apply(path, args)});
+    let service = ts.createLanguageService(mockHost);
+    let ngHost = new TypeScriptServiceHost(mockHost, service);
+    let ngService = createLanguageService(ngHost);
+    const reflectorHost = new ReflectorHost(() => undefined as any, mockHost, {basePath: '\\app'});
+
+    spyOn(path, 'join').and.callFake((...args: string[]) => { return path.win32.join(...args); });
+    const result = reflectorHost.moduleNameToFileName('@angular/core');
+    expect(result).not.toBeNull('could not find @angular/core using path.win32');
+  });
+});
\ No newline at end of file
diff --git a/packages/language-service/test/template_references_spec.ts b/packages/language-service/test/template_references_spec.ts
new file mode 100644
index 000000000000..78040ecb4d36
--- /dev/null
+++ b/packages/language-service/test/template_references_spec.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 ts from 'typescript';
+
+import {createLanguageService} from '../src/language_service';
+import {Completions, Diagnostic, Diagnostics, LanguageService} from '../src/types';
+import {TypeScriptServiceHost} from '../src/typescript_host';
+
+import {toh} from './test_data';
+import {MockTypescriptHost} from './test_utils';
+
+describe('references', () => {
+  let documentRegistry = ts.createDocumentRegistry();
+  let mockHost: MockTypescriptHost;
+  let service: ts.LanguageService;
+  let program: ts.Program;
+  let ngHost: TypeScriptServiceHost;
+  let ngService: LanguageService = createLanguageService(undefined !);
+
+  beforeEach(() => {
+    mockHost = new MockTypescriptHost(['/app/main.ts', '/app/parsing-cases.ts'], toh);
+    service = ts.createLanguageService(mockHost, documentRegistry);
+    program = service.getProgram();
+    ngHost = new TypeScriptServiceHost(mockHost, service);
+    ngService = createLanguageService(ngHost);
+    ngHost.setSite(ngService);
+  });
+
+  it('should be able to get template references',
+     () => { expect(() => ngService.getTemplateReferences()).not.toThrow(); });
+
+  it('should be able to determine that test.ng is a template reference',
+     () => { expect(ngService.getTemplateReferences()).toContain('/app/test.ng'); });
+
+  it('should be able to get template references for an invalid project', () => {
+    const moduleCode = `
+      import {NgModule} from '@angular/core';
+      import {NewClass} from './test.component';
+
+      @NgModule({declarations: [NewClass]}) export class TestModule {}`;
+    const classCode = `
+      export class NewClass {}
+
+      @Component({})
+      export class SomeComponent {}
+    `;
+    mockHost.addScript('/app/test.module.ts', moduleCode);
+    mockHost.addScript('/app/test.component.ts', classCode);
+    expect(() => { ngService.getTemplateReferences(); }).not.toThrow();
+  });
+
+});
\ No newline at end of file
diff --git a/packages/language-service/test/test_data.ts b/packages/language-service/test/test_data.ts
new file mode 100644
index 000000000000..b4eb785ef144
--- /dev/null
+++ b/packages/language-service/test/test_data.ts
@@ -0,0 +1,233 @@
+/**
+ * @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 {MockData} from './test_utils';
+
+export const toh = {
+  'foo.ts': `export * from './app/app.component.ts';`,
+  app: {
+    'app.component.ts': `import { Component } from '@angular/core';
+
+export class Hero {
+  id: number;
+  name: string;
+}
+
+@Component({
+  selector: 'my-app',
+  template: \`~{empty}
+    <~{start-tag}h~{start-tag-after-h}1~{start-tag-h1} ~{h1-after-space}>~{h1-content} {{~{sub-start}title~{sub-end}}}</h1>
+    ~{after-h1}<h2>{{~{h2-hero}hero.~{h2-name}name}} details!</h2>
+    <div><label>id: </label>{{~{label-hero}hero.~{label-id}id}}</div>
+    <div ~{div-attributes}>
+      <label>name: </label>
+    </div>
+    &~{entity-amp}amp;
+    \`
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+  hero: Hero = {
+    id: 1,
+    name: 'Windstorm'
+  };
+  private internal: string;
+}`,
+    'main.ts': `
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppComponent }   from './app.component';
+import { CaseIncompleteOpen, CaseMissingClosing, CaseUnknown, Pipes, TemplateReference, NoValueAttribute,
+         AttributeBinding, StringModel,PropertyBinding, EventBinding, TwoWayBinding, EmptyInterpolation,
+         ForOfEmpty, ForLetIEqual, ForOfLetEmpty, ForUsingComponent, References, TestComponent} from './parsing-cases';
+import { WrongFieldReference, WrongSubFieldReference, PrivateReference, ExpectNumericType, LowercasePipe } from './expression-cases';
+import { UnknownPeople, UnknownEven, UnknownTrackBy } from './ng-for-cases';
+import { ShowIf } from './ng-if-cases';
+
+@NgModule({
+  imports: [CommonModule, FormsModule],
+  declarations: [AppComponent, CaseIncompleteOpen, CaseMissingClosing, CaseUnknown, Pipes, TemplateReference, NoValueAttribute,
+    AttributeBinding, StringModel, PropertyBinding, EventBinding, TwoWayBinding, EmptyInterpolation, ForOfEmpty, ForOfLetEmpty,
+    ForLetIEqual, ForUsingComponent, References, TestComponent, WrongFieldReference, WrongSubFieldReference, PrivateReference,
+    ExpectNumericType, UnknownPeople, UnknownEven, UnknownTrackBy, ShowIf, LowercasePipe]
+})
+export class AppModule {}
+
+declare function bootstrap(v: any): void;
+
+bootstrap(AppComponent);
+`,
+    'parsing-cases.ts': `
+import {Component, Directive, Input, Output, EventEmitter} from '@angular/core';
+import {Hero} from './app.component';
+
+@Component({template: '<h1>Some <~{incomplete-open-lt}a~{incomplete-open-a} ~{incomplete-open-attr} text</h1>'})
+export class CaseIncompleteOpen {}
+
+@Component({template: '<h1>Some <a> ~{missing-closing} text</h1>'})
+export class CaseMissingClosing {}
+
+@Component({template: '<h1>Some <unknown ~{unknown-element}> text</h1>'})
+export class CaseUnknown {}
+
+@Component({template: '<h1>{{data | ~{before-pipe}lowe~{in-pipe}rcase~{after-pipe} }}'})
+export class Pipes {
+  data = 'Some string';
+}
+
+@Component({template: '<h1 h~{no-value-attribute}></h1>'})
+export class NoValueAttribute {}
+
+
+@Component({template: '<h1 model="~{attribute-binding-model}test"></h1>'})
+export class AttributeBinding {
+  test: string;
+}
+
+@Component({template: '<h1 [model]="~{property-binding-model}test"></h1>'})
+export class PropertyBinding {
+  test: string;
+}
+
+@Component({template: '<h1 (model)="~{event-binding-model}modelChanged()"></h1>'})
+export class EventBinding {
+  test: string;
+
+  modelChanged() {}
+}
+
+@Component({template: '<h1 [(model)]="~{two-way-binding-model}test"></h1>'})
+export class TwoWayBinding {
+  test: string;
+}
+
+@Directive({selector: '[string-model]'})
+export class StringModel {
+  @Input() model: string;
+  @Output() modelChanged: EventEmitter<string>;
+}
+
+interface Person {
+  name: string;
+  age: number
+}
+
+@Component({template: '<div *ngFor="~{for-empty}"></div>'})
+export class ForOfEmpty {}
+
+@Component({template: '<div *ngFor="let ~{for-let-empty}"></div>'})
+export class ForOfLetEmpty {}
+
+@Component({template: '<div *ngFor="let i = ~{for-let-i-equal}"></div>'})
+export class ForLetIEqual {}
+
+@Component({template: '<div *ngFor="~{for-let}let ~{for-person}person ~{for-of}of ~{for-people}people"> <span>Name: {{~{for-interp-person}person.~{for-interp-name}name}}</span><span>Age: {{person.~{for-interp-age}age}}</span></div>'})
+export class ForUsingComponent {
+  people: Person[];
+}
+
+@Component({template: '<div #div> <test-comp #test1> {{~{test-comp-content}}} {{test1.~{test-comp-after-test}name}} {{div.~{test-comp-after-div}.innerText}} </test-comp> </div> <test-comp #test2></test-comp>'})
+export class References {}
+
+@Component({selector: 'test-comp', template: '<div>Testing: {{name}}</div>'})
+export class TestComponent {
+  «@Input('∆tcName∆') name = 'test';»
+  «@Output('∆test∆') testEvent = new EventEmitter();»
+}
+
+@Component({templateUrl: 'test.ng'})
+export class TemplateReference {
+  title = 'Some title';
+  hero: Hero = {
+    id: 1,
+    name: 'Windstorm'
+  };
+  anyValue: any;
+  myClick(event: any) {
+
+  }
+}
+
+@Component({template: '{{~{empty-interpolation}}}'})
+export class EmptyInterpolation {
+  title = 'Some title';
+  subTitle = 'Some sub title';
+}
+`,
+    'expression-cases.ts': `
+import {Component} from '@angular/core';
+
+export interface Person {
+  name: string;
+  age: number;
+}
+
+@Component({template: '{{~{foo}foo~{foo-end}}}'})
+export class WrongFieldReference {
+  bar = 'bar';
+}
+
+@Component({template: '{{~{nam}person.nam~{nam-end}}}'})
+export class WrongSubFieldReference {
+  person: Person = { name: 'Bob', age: 23 };
+}
+
+@Component({template: '{{~{myField}myField~{myField-end}}}'})
+export class PrivateReference {
+  private myField = 'My Field';
+}
+
+@Component({template: '{{~{mod}"a" ~{mod-end}% 2}}'})
+export class ExpectNumericType {}
+
+@Component({template: '{{ (name | lowercase).~{string-pipe}substring }}'})
+export class LowercasePipe {
+  name: string;
+}
+`,
+    'ng-for-cases.ts': `
+import {Component} from '@angular/core';
+
+export interface Person {
+  name: string;
+  age: number;
+}
+
+@Component({template: '<div *ngFor="let person of ~{people_1}people_1~{people_1-end}"> <span>{{person.name}}</span> </div>'})
+export class UnknownPeople {}
+
+@Component({template: '<div ~{even_1}*ngFor="let person of people; let e = even_1"~{even_1-end}><span>{{person.name}}</span> </div>'})
+export class UnknownEven {
+  people: Person[];
+}
+
+@Component({template: '<div *ngFor="let person of people; trackBy ~{trackBy_1}trackBy_1~{trackBy_1-end}"><span>{{person.name}}</span> </div>'})
+export class UnknownTrackBy {
+  people: Person[];
+}
+`,
+    'ng-if-cases.ts': `
+import {Component} from '@angular/core';
+
+@Component({template: '<div ~{implicit}*ngIf="show; let l=unknown"~{implicit-end}>Showing now!</div>'})
+export class ShowIf {
+  show = false;
+}
+`,
+    'test.ng': `~{empty}
+    <~{start-tag}h~{start-tag-after-h}1~{start-tag-h1} ~{h1-after-space}>~{h1-content} {{~{sub-start}title~{sub-end}}}</h1>
+    ~{after-h1}<h2>{{~{h2-hero}hero.~{h2-name}name}} details!</h2>
+    <div><label>id: </label>{{~{label-hero}hero.~{label-id}id}}</div>
+    <div ~{div-attributes}>
+      <label>name: </label>
+    </div>
+    &~{entity-amp}amp;
+    `
+  }
+};
diff --git a/packages/language-service/test/test_utils.ts b/packages/language-service/test/test_utils.ts
new file mode 100644
index 000000000000..9032df624834
--- /dev/null
+++ b/packages/language-service/test/test_utils.ts
@@ -0,0 +1,375 @@
+/**
+ * @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 {isInBazel, setup} from '@angular/compiler-cli/test/test_support';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {Diagnostic, DiagnosticMessageChain, Diagnostics, Span} from '../src/types';
+
+export type MockData = string | MockDirectory;
+
+export type MockDirectory = {
+  [name: string]: MockData | undefined;
+};
+
+const angularts = /@angular\/(\w|\/|-)+\.tsx?$/;
+const rxjsts = /rxjs\/(\w|\/)+\.tsx?$/;
+const rxjsmetadata = /rxjs\/(\w|\/)+\.metadata\.json?$/;
+const tsxfile = /\.tsx$/;
+
+/* The missing cache does two things. First it improves performance of the
+   tests as it reduces the number of OS calls made during testing. Also it
+   improves debugging experience as fewer exceptions are raised allow you
+   to use stopping on all exceptions. */
+const missingCache = new Map<string, boolean>();
+const cacheUsed = new Set<string>();
+const reportedMissing = new Set<string>();
+
+/**
+ * The cache is valid if all the returned entries are empty.
+ */
+export function validateCache(): {exists: string[], unused: string[], reported: string[]} {
+  const exists: string[] = [];
+  const unused: string[] = [];
+  for (const fileName of iterableToArray(missingCache.keys())) {
+    if (fs.existsSync(fileName)) {
+      exists.push(fileName);
+    }
+    if (!cacheUsed.has(fileName)) {
+      unused.push(fileName);
+    }
+  }
+  return {exists, unused, reported: iterableToArray(reportedMissing.keys())};
+}
+
+missingCache.set('/node_modules/@angular/core.d.ts', true);
+missingCache.set('/node_modules/@angular/animations.d.ts', true);
+missingCache.set('/node_modules/@angular/platform-browser/animations.d.ts', true);
+missingCache.set('/node_modules/@angular/common.d.ts', true);
+missingCache.set('/node_modules/@angular/forms.d.ts', true);
+missingCache.set('/node_modules/@angular/core/src/di/provider.metadata.json', true);
+missingCache.set(
+    '/node_modules/@angular/core/src/change_detection/pipe_transform.metadata.json', true);
+missingCache.set('/node_modules/@angular/core/src/reflection/types.metadata.json', true);
+missingCache.set(
+    '/node_modules/@angular/core/src/reflection/platform_reflection_capabilities.metadata.json',
+    true);
+missingCache.set('/node_modules/@angular/forms/src/directives/form_interface.metadata.json', true);
+
+export class MockTypescriptHost implements ts.LanguageServiceHost {
+  private angularPath: string|undefined;
+  // TODO(issue/24571): remove '!'.
+  private nodeModulesPath !: string;
+  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,
+      private node_modules: string = 'node_modules', private myPath: typeof path = path) {
+    const moduleFilename = module.filename.replace(/\\/g, '/');
+    if (isInBazel()) {
+      const support = setup();
+      this.nodeModulesPath = path.join(support.basePath, 'node_modules');
+      this.angularPath = path.join(this.nodeModulesPath, '@angular');
+    } else {
+      const angularIndex = moduleFilename.indexOf('@angular');
+      if (angularIndex >= 0)
+        this.angularPath =
+            moduleFilename.substr(0, angularIndex).replace('/all/', '/all/@angular/');
+      const distIndex = moduleFilename.indexOf('/dist/all');
+      if (distIndex >= 0)
+        this.nodeModulesPath = myPath.join(moduleFilename.substr(0, distIndex), 'node_modules');
+    }
+    this.options = {
+      target: ts.ScriptTarget.ES5,
+      module: ts.ModuleKind.CommonJS,
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+      emitDecoratorMetadata: true,
+      experimentalDecorators: true,
+      removeComments: false,
+      noImplicitAny: false,
+      lib: ['lib.es2015.d.ts', 'lib.dom.d.ts'],
+    };
+  }
+
+  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; }
+
+  getScriptVersion(fileName: string): string {
+    return (this.scriptVersion.get(fileName) || 0).toString();
+  }
+
+  getScriptSnapshot(fileName: string): ts.IScriptSnapshot|undefined {
+    const content = this.getFileContent(fileName);
+    if (content) return ts.ScriptSnapshot.fromString(content);
+    return undefined;
+  }
+
+  getCurrentDirectory(): string { return '/'; }
+
+  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);
+    } else if (effectiveName == '/' + this.node_modules) {
+      return true;
+    } else {
+      return fs.existsSync(effectiveName);
+    }
+  }
+
+  fileExists(fileName: string): boolean { return this.getRawFileContent(fileName) != null; }
+
+  getMarkerLocations(fileName: string): {[name: string]: number}|undefined {
+    let content = this.getRawFileContent(fileName);
+    if (content) {
+      return getLocationMarkers(content);
+    }
+  }
+
+  getReferenceMarkers(fileName: string): ReferenceResult|undefined {
+    let content = this.getRawFileContent(fileName);
+    if (content) {
+      return getReferenceMarkers(content);
+    }
+  }
+
+  getFileContent(fileName: string): string|undefined {
+    const content = this.getRawFileContent(fileName);
+    if (content) return removeReferenceMarkers(removeLocationMarkers(content));
+  }
+
+  private getRawFileContent(fileName: string): string|undefined {
+    if (this.overrides.has(fileName)) {
+      return this.overrides.get(fileName);
+    }
+    let basename = path.basename(fileName);
+    if (/^lib.*\.d\.ts$/.test(basename)) {
+      let libPath = ts.getDefaultLibFilePath(this.getCompilationSettings());
+      return fs.readFileSync(this.myPath.join(path.dirname(libPath), basename), 'utf8');
+    } else {
+      if (missingCache.has(fileName)) {
+        cacheUsed.add(fileName);
+        return undefined;
+      }
+      let effectiveName = this.getEffectiveName(fileName);
+      if (effectiveName === fileName)
+        return open(fileName, this.data);
+      else if (
+          !fileName.match(angularts) && !fileName.match(rxjsts) && !fileName.match(rxjsmetadata) &&
+          !fileName.match(tsxfile)) {
+        if (fs.existsSync(effectiveName)) {
+          return fs.readFileSync(effectiveName, 'utf8');
+        } else {
+          missingCache.set(fileName, true);
+          reportedMissing.add(fileName);
+          cacheUsed.add(fileName);
+        }
+      }
+    }
+  }
+
+  private getEffectiveName(name: string): string {
+    const node_modules = this.node_modules;
+    const at_angular = '/@angular';
+    if (name.startsWith('/' + node_modules)) {
+      if (this.nodeModulesPath && !name.startsWith('/' + node_modules + at_angular)) {
+        let result = this.myPath.join(this.nodeModulesPath, name.substr(node_modules.length + 1));
+        if (!name.match(rxjsts))
+          if (fs.existsSync(result)) {
+            return result;
+          }
+      }
+      if (this.angularPath && name.startsWith('/' + node_modules + at_angular)) {
+        return this.myPath.join(
+            this.angularPath, name.substr(node_modules.length + at_angular.length + 1));
+      }
+    }
+    return name;
+  }
+}
+
+function iterableToArray<T>(iterator: IterableIterator<T>) {
+  const result: T[] = [];
+  while (true) {
+    const next = iterator.next();
+    if (next.done) break;
+    result.push(next.value);
+  }
+  return result;
+}
+
+function find(fileName: string, data: MockData): MockData|undefined {
+  let names = fileName.split('/');
+  if (names.length && !names[0].length) names.shift();
+  let current = data;
+  for (let name of names) {
+    if (typeof current === 'string')
+      return undefined;
+    else
+      current = (<MockDirectory>current)[name] !;
+    if (!current) return undefined;
+  }
+  return current;
+}
+
+function open(fileName: string, data: MockData): string|undefined {
+  let result = find(fileName, data);
+  if (typeof result === 'string') {
+    return result;
+  }
+  return undefined;
+}
+
+function directoryExists(dirname: string, data: MockData): boolean {
+  let result = find(dirname, data);
+  return !!result && typeof result !== 'string';
+}
+
+const locationMarker = /\~\{(\w+(-\w+)*)\}/g;
+
+function removeLocationMarkers(value: string): string {
+  return value.replace(locationMarker, '');
+}
+
+function getLocationMarkers(value: string): {[name: string]: number} {
+  value = removeReferenceMarkers(value);
+  let result: {[name: string]: number} = {};
+  let adjustment = 0;
+  value.replace(locationMarker, (match: string, name: string, _: any, index: number): string => {
+    result[name] = index - adjustment;
+    adjustment += match.length;
+    return '';
+  });
+  return result;
+}
+
+const referenceMarker = /«(((\w|\-)+)|([^∆]*∆(\w+)∆.[^»]*))»/g;
+const definitionMarkerGroup = 1;
+const nameMarkerGroup = 2;
+
+export type ReferenceMarkers = {
+  [name: string]: Span[]
+};
+export interface ReferenceResult {
+  text: string;
+  definitions: ReferenceMarkers;
+  references: ReferenceMarkers;
+}
+
+function getReferenceMarkers(value: string): ReferenceResult {
+  const references: ReferenceMarkers = {};
+  const definitions: ReferenceMarkers = {};
+  value = removeLocationMarkers(value);
+
+  let adjustment = 0;
+  const text = value.replace(
+      referenceMarker, (match: string, text: string, reference: string, _: string,
+                        definition: string, definitionName: string, index: number): string => {
+        const result = reference ? text : text.replace(/∆/g, '');
+        const span: Span = {start: index - adjustment, end: index - adjustment + result.length};
+        const markers = reference ? references : definitions;
+        const name = reference || definitionName;
+        (markers[name] = (markers[name] || [])).push(span);
+        adjustment += match.length - result.length;
+        return result;
+      });
+
+  return {text, definitions, references};
+}
+
+function removeReferenceMarkers(value: string): string {
+  return value.replace(referenceMarker, (match, text) => text.replace(/∆/g, ''));
+}
+
+export function noDiagnostics(diagnostics: Diagnostics) {
+  if (diagnostics && diagnostics.length) {
+    throw new Error(`Unexpected diagnostics: \n  ${diagnostics.map(d => d.message).join('\n  ')}`);
+  }
+}
+
+export function diagnosticMessageContains(
+    message: string | DiagnosticMessageChain, messageFragment: string): boolean {
+  if (typeof message == 'string') {
+    return message.indexOf(messageFragment) >= 0;
+  }
+  if (message.message.indexOf(messageFragment) >= 0) {
+    return true;
+  }
+  if (message.next) {
+    return diagnosticMessageContains(message.next, messageFragment);
+  }
+  return false;
+}
+
+export function findDiagnostic(diagnostics: Diagnostic[], messageFragment: string): Diagnostic|
+    undefined {
+  return diagnostics.find(d => diagnosticMessageContains(d.message, messageFragment));
+}
+
+export function includeDiagnostic(
+    diagnostics: Diagnostics, message: string, text?: string, len?: string): void;
+export function includeDiagnostic(
+    diagnostics: Diagnostics, message: string, at?: number, len?: number): void;
+export function includeDiagnostic(diagnostics: Diagnostics, message: string, p1?: any, p2?: any) {
+  expect(diagnostics).toBeDefined();
+  if (diagnostics) {
+    const diagnostic = findDiagnostic(diagnostics, message);
+    expect(diagnostic).toBeDefined(`no diagnostic contains '${message}`);
+    if (diagnostic && p1 != null) {
+      const at = typeof p1 === 'number' ? p1 : p2.indexOf(p1);
+      const len = typeof p2 === 'number' ? p2 : p1.length;
+      expect(diagnostic.span.start)
+          .toEqual(
+              at,
+              `expected message '${message}' was reported at ${diagnostic.span.start} but should be ${at}`);
+      if (len != null) {
+        expect(diagnostic.span.end - diagnostic.span.start)
+            .toEqual(len, `expected '${message}'s span length to be ${len}`);
+      }
+    }
+  }
+}
diff --git a/packages/language-service/test/ts_plugin_spec.ts b/packages/language-service/test/ts_plugin_spec.ts
new file mode 100644
index 000000000000..8dc23effd9a2
--- /dev/null
+++ b/packages/language-service/test/ts_plugin_spec.ts
@@ -0,0 +1,272 @@
+/**
+ * @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 'reflect-metadata';
+
+import * as ts from 'typescript';
+
+import {create} from '../src/ts_plugin';
+
+import {toh} from './test_data';
+import {MockTypescriptHost} from './test_utils';
+
+describe('plugin', () => {
+  let documentRegistry = ts.createDocumentRegistry();
+  let mockHost = new MockTypescriptHost(['/app/main.ts', '/app/parsing-cases.ts'], toh);
+  let service = ts.createLanguageService(mockHost, documentRegistry);
+  let program = service.getProgram();
+
+  const mockProject = {projectService: {logger: {info: function() {}}}};
+
+  it('should not report errors on tour of heroes', () => {
+    expectNoDiagnostics(service.getCompilerOptionsDiagnostics());
+    for (let source of program.getSourceFiles()) {
+      expectNoDiagnostics(service.getSyntacticDiagnostics(source.fileName));
+      expectNoDiagnostics(service.getSemanticDiagnostics(source.fileName));
+    }
+  });
+
+
+  let plugin = create(
+      {ts: ts, languageService: service, project: mockProject, languageServiceHost: mockHost});
+
+  it('should not report template errors on tour of heroes', () => {
+    for (let source of program.getSourceFiles()) {
+      // Ignore all 'cases.ts' files as they intentionally contain errors.
+      if (!source.fileName.endsWith('cases.ts')) {
+        expectNoDiagnostics(plugin.getSemanticDiagnostics(source.fileName));
+      }
+    }
+  });
+
+  it('should be able to get entity completions',
+     () => { contains('app/app.component.ts', 'entity-amp', '&amp;', '&gt;', '&lt;', '&iota;'); });
+
+  it('should be able to return html elements', () => {
+    let htmlTags = ['h1', 'h2', 'div', 'span'];
+    let locations = ['empty', 'start-tag-h1', 'h1-content', 'start-tag', 'start-tag-after-h'];
+    for (let location of locations) {
+      contains('app/app.component.ts', location, ...htmlTags);
+    }
+  });
+
+  it('should be able to return element directives',
+     () => { contains('app/app.component.ts', 'empty', 'my-app'); });
+
+  it('should be able to return h1 attributes',
+     () => { contains('app/app.component.ts', 'h1-after-space', 'id', 'dir', 'lang', 'onclick'); });
+
+  it('should be able to find common angular attributes', () => {
+    contains('app/app.component.ts', 'div-attributes', '(click)', '[ngClass]', '*ngIf', '*ngFor');
+  });
+
+  it('should be able to return attribute names with an incompete attribute',
+     () => { contains('app/parsing-cases.ts', 'no-value-attribute', 'id', 'dir', 'lang'); });
+
+  it('should be able to return attributes of an incomplete element', () => {
+    contains('app/parsing-cases.ts', 'incomplete-open-lt', 'a');
+    contains('app/parsing-cases.ts', 'incomplete-open-a', 'a');
+    contains('app/parsing-cases.ts', 'incomplete-open-attr', 'id', 'dir', 'lang');
+  });
+
+  it('should be able to return completions with a missing closing tag',
+     () => { contains('app/parsing-cases.ts', 'missing-closing', 'h1', 'h2'); });
+
+  it('should be able to return common attributes of an unknown tag',
+     () => { contains('app/parsing-cases.ts', 'unknown-element', 'id', 'dir', 'lang'); });
+
+  it('should be able to get the completions at the beginning of an interpolation',
+     () => { contains('app/app.component.ts', 'h2-hero', 'hero', 'title'); });
+
+  it('should not include private members of a class',
+     () => { contains('app/app.component.ts', 'h2-hero', '-internal'); });
+
+  it('should be able to get the completions at the end of an interpolation',
+     () => { contains('app/app.component.ts', 'sub-end', 'hero', 'title'); });
+
+  it('should be able to get the completions in a property',
+     () => { contains('app/app.component.ts', 'h2-name', 'name', 'id'); });
+
+  it('should be able to get a list of pipe values', () => {
+    contains('app/parsing-cases.ts', 'before-pipe', 'lowercase', 'uppercase');
+    contains('app/parsing-cases.ts', 'in-pipe', 'lowercase', 'uppercase');
+    contains('app/parsing-cases.ts', 'after-pipe', 'lowercase', 'uppercase');
+  });
+
+  it('should be able to get completions in an empty interpolation',
+     () => { contains('app/parsing-cases.ts', 'empty-interpolation', 'title', 'subTitle'); });
+
+  describe('with attributes', () => {
+    it('should be able to complete property value',
+       () => { contains('app/parsing-cases.ts', 'property-binding-model', 'test'); });
+    it('should be able to complete an event',
+       () => { contains('app/parsing-cases.ts', 'event-binding-model', 'modelChanged'); });
+    it('should be able to complete a two-way binding',
+       () => { contains('app/parsing-cases.ts', 'two-way-binding-model', 'test'); });
+  });
+
+  describe('with a *ngFor', () => {
+    it('should include a let for empty attribute',
+       () => { contains('app/parsing-cases.ts', 'for-empty', 'let'); });
+    it('should suggest NgForRow members for let initialization expression', () => {
+      contains(
+          'app/parsing-cases.ts', 'for-let-i-equal', 'index', 'count', 'first', 'last', 'even',
+          'odd');
+    });
+    it('should include a let', () => { contains('app/parsing-cases.ts', 'for-let', 'let'); });
+    it('should include an "of"', () => { contains('app/parsing-cases.ts', 'for-of', 'of'); });
+    it('should include field reference',
+       () => { contains('app/parsing-cases.ts', 'for-people', 'people'); });
+    it('should include person in the let scope',
+       () => { contains('app/parsing-cases.ts', 'for-interp-person', 'person'); });
+    // TODO: Enable when we can infer the element type of the ngFor
+    // it('should include determine person\'s type as Person', () => {
+    //   contains('app/parsing-cases.ts', 'for-interp-name', 'name', 'age');
+    //   contains('app/parsing-cases.ts', 'for-interp-age', 'name', 'age');
+    // });
+  });
+
+  describe('for pipes', () => {
+    it('should be able to resolve lowercase',
+       () => { contains('app/expression-cases.ts', 'string-pipe', 'substring'); });
+  });
+
+  describe('with references', () => {
+    it('should list references',
+       () => { contains('app/parsing-cases.ts', 'test-comp-content', 'test1', 'test2', 'div'); });
+    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 reference the element if no component', () => {
+    //   contains('app/parsing-cases.ts', 'test-comp-after-div', 'innerText');
+    // });
+  });
+
+  describe('for semantic errors', () => {
+    it('should report access to an unknown field', () => {
+      expectSemanticError(
+          'app/expression-cases.ts', 'foo',
+          'Identifier \'foo\' is not defined. The component declaration, template variable declarations, and element references do not contain such a member');
+    });
+    it('should report access to an unknown sub-field', () => {
+      expectSemanticError(
+          'app/expression-cases.ts', 'nam',
+          'Identifier \'nam\' is not defined. \'Person\' does not contain such a member');
+    });
+    it('should report access to a private member', () => {
+      expectSemanticError(
+          'app/expression-cases.ts', 'myField',
+          'Identifier \'myField\' refers to a private member of the component');
+    });
+    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) {
+        expectSemanticError('app/ng-for-cases.ts', locationMarker, message);
+      }
+      it('should report an unknown field', () => {
+        expectError(
+            'people_1',
+            'Identifier \'people_1\' is not defined. The component declaration, template variable declarations, and element references do not contain such a member');
+      });
+      it('should report an unknown context reference', () => {
+        expectError('even_1', 'The template context does not defined a member called \'even_1\'');
+      });
+      it('should report an unknown value in a key expression', () => {
+        expectError(
+            'trackBy_1',
+            'Identifier \'trackBy_1\' is not defined. The component declaration, template variable declarations, and element references do not contain such a member');
+      });
+    });
+    describe('in ngIf', () => {
+      function expectError(locationMarker: string, message: string) {
+        expectSemanticError('app/ng-if-cases.ts', locationMarker, message);
+      }
+      it('should report an implicit context reference', () => {
+        expectError(
+            'implicit', 'The template context does not defined a member called \'unknown\'');
+      });
+    });
+  });
+
+  function getMarkerLocation(fileName: string, locationMarker: string): number {
+    const location = mockHost.getMarkerLocations(fileName) ![locationMarker];
+    if (location == null) {
+      throw new Error(`No marker ${locationMarker} found.`);
+    }
+    return location;
+  }
+  function contains(fileName: string, locationMarker: string, ...names: string[]) {
+    const location = getMarkerLocation(fileName, locationMarker);
+    expectEntries(
+        locationMarker, plugin.getCompletionsAtPosition(fileName, location, undefined), ...names);
+  }
+
+  function expectEmpty(fileName: string, locationMarker: string) {
+    const location = getMarkerLocation(fileName, locationMarker);
+    expect(plugin.getCompletionsAtPosition(fileName, location, undefined).entries || []).toEqual([
+    ]);
+  }
+
+  function expectSemanticError(fileName: string, locationMarker: string, message: string) {
+    const start = getMarkerLocation(fileName, locationMarker);
+    const end = getMarkerLocation(fileName, locationMarker + '-end');
+    const errors = plugin.getSemanticDiagnostics(fileName);
+    for (const error of errors) {
+      if (error.messageText.toString().indexOf(message) >= 0) {
+        expect(error.start).toEqual(start);
+        expect(error.length).toEqual(end - start);
+        return;
+      }
+    }
+    throw new Error(`Expected error messages to contain ${message}, in messages:\n  ${errors
+                        .map(e => e.messageText.toString())
+                        .join(',\n  ')}`);
+  }
+});
+
+
+function expectEntries(locationMarker: string, info: ts.CompletionInfo, ...names: string[]) {
+  let entries: {[name: string]: boolean} = {};
+  if (!info) {
+    throw new Error(`Expected result from ${locationMarker} to include ${names.join(
+        ', ')} but no result provided`);
+  } else {
+    for (let entry of info.entries) {
+      entries[entry.name] = true;
+    }
+    let shouldContains = names.filter(name => !name.startsWith('-'));
+    let shouldNotContain = names.filter(name => name.startsWith('-'));
+    let missing = shouldContains.filter(name => !entries[name]);
+    let present = shouldNotContain.map(name => name.substr(1)).filter(name => entries[name]);
+    if (missing.length) {
+      throw new Error(`Expected result from ${locationMarker
+          } to include at least one of the following, ${missing
+              .join(', ')}, in the list of entries ${info.entries.map(entry => entry.name)
+              .join(', ')}`);
+    }
+    if (present.length) {
+      throw new Error(`Unexpected member${present.length > 1 ? 's' :
+                                                   ''
+                                                   } included in result: ${present.join(', ')}`);
+    }
+  }
+}
+
+function expectNoDiagnostics(diagnostics: ts.Diagnostic[]) {
+  for (const diagnostic of diagnostics) {
+    let message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
+    if (diagnostic.file && diagnostic.start) {
+      let {line, character} = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+      console.error(`${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`);
+    } else {
+      console.error(`${message}`);
+    }
+  }
+  expect(diagnostics.length).toBe(0);
+}
diff --git a/packages/language-service/test/typescript_host_spec.ts b/packages/language-service/test/typescript_host_spec.ts
new file mode 100644
index 000000000000..8f492234ee6b
--- /dev/null
+++ b/packages/language-service/test/typescript_host_spec.ts
@@ -0,0 +1,65 @@
+/**
+ * @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 'reflect-metadata';
+import * as ts from 'typescript';
+
+import {TypeScriptServiceHost} from '../src/typescript_host';
+
+import {toh} from './test_data';
+import {MockTypescriptHost} from './test_utils';
+
+
+describe('completions', () => {
+  let host: ts.LanguageServiceHost;
+  let service: ts.LanguageService;
+  let ngHost: TypeScriptServiceHost;
+
+  beforeEach(() => {
+    host = new MockTypescriptHost(['/app/main.ts'], toh);
+    service = ts.createLanguageService(host);
+  });
+
+  it('should be able to create a typescript host',
+     () => { expect(() => new TypeScriptServiceHost(host, service)).not.toThrow(); });
+
+  beforeEach(() => { ngHost = new TypeScriptServiceHost(host, service); });
+
+  it('should be able to analyze modules',
+     () => { expect(ngHost.getAnalyzedModules()).toBeDefined(); });
+
+  it('should be able to analyze modules in without a tsconfig.json file', () => {
+    host = new MockTypescriptHost(['foo.ts'], toh);
+    service = ts.createLanguageService(host);
+    ngHost = new TypeScriptServiceHost(host, service);
+    expect(ngHost.getAnalyzedModules()).toBeDefined();
+  });
+
+  it('should not throw if there is no script names', () => {
+    host = new MockTypescriptHost([], toh);
+    service = ts.createLanguageService(host);
+    ngHost = new TypeScriptServiceHost(host, service);
+    expect(() => ngHost.getAnalyzedModules()).not.toThrow();
+  });
+
+  it('should clear the caches if program changes', () => {
+    // First create a TypescriptHost with empty script names
+    host = new MockTypescriptHost([], toh);
+    service = ts.createLanguageService(host);
+    ngHost = new TypeScriptServiceHost(host, service);
+    expect(ngHost.getAnalyzedModules().ngModules).toEqual([]);
+    // Now add a script, this would change the program
+    const fileName = '/app/main.ts';
+    const content = (host as MockTypescriptHost).getFileContent(fileName) !;
+    (host as MockTypescriptHost).addScript(fileName, content);
+    // If the caches are not cleared, we would get back an empty array.
+    // But if the caches are cleared then the analyzed modules will be non-empty.
+    expect(ngHost.getAnalyzedModules().ngModules.length).not.toEqual(0);
+  });
+
+});
diff --git a/packages/language-service/tsconfig-build.json b/packages/language-service/tsconfig-build.json
new file mode 100644
index 000000000000..5641c2bd1967
--- /dev/null
+++ b/packages/language-service/tsconfig-build.json
@@ -0,0 +1,30 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/animation": ["../../dist/packages/animation"],
+      "@angular/animation/browser": ["../../dist/packages/animation/browser"],
+      "@angular/core/testing": ["../../dist/packages/core/testing"],
+      "@angular/common": ["../../dist/packages/common"],
+      "@angular/compiler": ["../../dist/packages/compiler"],
+      "@angular/compiler-cli": ["../../dist/packages/compiler-cli"],
+      "@angular/compiler-cli/*": ["../../dist/packages/compiler-cli/*"],
+      "@angular/http": ["../../dist/packages/http"],
+      "@angular/platform-server": ["../../dist/packages/platform-server"],
+      "@angular/platform-browser": ["../../dist/packages/platform-browser"]
+    },
+    "outDir": "../../dist/packages/language-service"
+  },
+
+  "files": [
+    "index.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts",
+    "../../node_modules/@types/node/index.d.ts",
+    "../../node_modules/@types/jasmine/index.d.ts"
+  ]
+}
diff --git a/packages/license-banner.txt b/packages/license-banner.txt
new file mode 100644
index 000000000000..5e6eac320c7c
--- /dev/null
+++ b/packages/license-banner.txt
@@ -0,0 +1,5 @@
+/**
+ * @license Angular v0.0.0-PLACEHOLDER
+ * (c) 2010-2018 Google, Inc. https://angular.io/
+ * License: MIT
+ */
diff --git a/packages/platform-browser-dynamic/BUILD.bazel b/packages/platform-browser-dynamic/BUILD.bazel
new file mode 100644
index 000000000000..7eea343f5c40
--- /dev/null
+++ b/packages/platform-browser-dynamic/BUILD.bazel
@@ -0,0 +1,38 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "platform-browser-dynamic",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/platform-browser-dynamic",
+    deps = [
+        "//packages:types",
+        "//packages/common",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/platform-browser",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "//packages/platform-browser-dynamic/testing:package.json",
+    ],
+    entry_point = "packages/platform-browser-dynamic/index.js",
+    tags = [
+        "ivy-jit",
+        "release-with-framework",
+    ],
+    deps = [
+        ":platform-browser-dynamic",
+        "//packages/platform-browser-dynamic/testing",
+    ],
+)
diff --git a/packages/platform-browser-dynamic/index.ts b/packages/platform-browser-dynamic/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/platform-browser-dynamic/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';
diff --git a/packages/platform-browser-dynamic/package.json b/packages/platform-browser-dynamic/package.json
new file mode 100644
index 000000000000..bb057bf2c4cb
--- /dev/null
+++ b/packages/platform-browser-dynamic/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@angular/platform-browser-dynamic",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - library for using Angular in a web browser with JIT compilation",
+  "main": "./bundles/platform-browser-dynamic.umd.js",
+  "module": "./fesm5/platform-browser-dynamic.js",
+  "es2015": "./fesm2015/platform-browser-dynamic.js",
+  "esm5": "./esm5/platform-browser-dynamic.js",
+  "esm2015": "./esm2015/platform-browser-dynamic.js",
+  "fesm5": "./fesm5/platform-browser-dynamic.js",
+  "fesm2015": "./fesm2015/platform-browser-dynamic.js",
+  "typings": "./platform-browser-dynamic.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/common": "0.0.0-PLACEHOLDER",
+    "@angular/compiler": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/platform-browser-dynamic/public_api.ts b/packages/platform-browser-dynamic/public_api.ts
new file mode 100644
index 000000000000..165e7a063073
--- /dev/null
+++ b/packages/platform-browser-dynamic/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/platform-browser-dynamic';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/platform-browser-dynamic/rollup.config.js b/packages/platform-browser-dynamic/rollup.config.js
new file mode 100644
index 000000000000..7c7d2ae0053c
--- /dev/null
+++ b/packages/platform-browser-dynamic/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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/platform-browser-dynamic/fesm5/platform-browser-dynamic.js',
+  dest: '../../dist/packages-dist/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/platform-browser-dynamic'},
+  moduleName: 'ng.platformBrowserDynamic',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/platform-browser-dynamic/src/compiler_factory.ts b/packages/platform-browser-dynamic/src/compiler_factory.ts
new file mode 100644
index 000000000000..dd7e887f058a
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/compiler_factory.ts
@@ -0,0 +1,222 @@
+/**
+ * @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 {Compiler, CompilerFactory, ComponentFactory, CompilerOptions, ModuleWithComponentFactories, Inject, InjectionToken, Optional, PACKAGE_ROOT_URL, PlatformRef, StaticProvider, TRANSLATIONS, Type, isDevMode, platformCore, ɵConsole as Console, ViewEncapsulation, Injector, NgModuleFactory, TRANSLATIONS_FORMAT, MissingTranslationStrategy,} from '@angular/core';
+
+import {StaticSymbolCache, JitCompiler, ProviderMeta, ExternalReference, I18NHtmlParser, Identifiers, ViewCompiler, CompileMetadataResolver, UrlResolver, TemplateParser, NgModuleCompiler, JitSummaryResolver, SummaryResolver, StyleCompiler, PipeResolver, ElementSchemaRegistry, DomElementSchemaRegistry, ResourceLoader, NgModuleResolver, HtmlParser, CompileReflector, CompilerConfig, DirectiveNormalizer, DirectiveResolver, Lexer, Parser} from '@angular/compiler';
+
+import {JitReflector} from './compiler_reflector';
+
+export const ERROR_COLLECTOR_TOKEN = new InjectionToken('ErrorCollector');
+
+/**
+ * A default provider for {@link PACKAGE_ROOT_URL} that maps to '/'.
+ */
+export const DEFAULT_PACKAGE_URL_PROVIDER = {
+  provide: PACKAGE_ROOT_URL,
+  useValue: '/'
+};
+
+const _NO_RESOURCE_LOADER: ResourceLoader = {
+  get(url: string): Promise<string>{
+      throw new Error(
+          `No ResourceLoader implementation has been provided. Can't read the url "${url}"`);}
+};
+
+const baseHtmlParser = new InjectionToken('HtmlParser');
+
+export class CompilerImpl implements Compiler {
+  private _delegate: JitCompiler;
+  public readonly injector: Injector;
+  constructor(
+      injector: Injector, private _metadataResolver: CompileMetadataResolver,
+      templateParser: TemplateParser, styleCompiler: StyleCompiler, viewCompiler: ViewCompiler,
+      ngModuleCompiler: NgModuleCompiler, summaryResolver: SummaryResolver<Type<any>>,
+      compileReflector: CompileReflector, compilerConfig: CompilerConfig, console: Console) {
+    this._delegate = new JitCompiler(
+        _metadataResolver, templateParser, styleCompiler, viewCompiler, ngModuleCompiler,
+        summaryResolver, compileReflector, compilerConfig, console,
+        this.getExtraNgModuleProviders.bind(this));
+    this.injector = injector;
+  }
+
+  private getExtraNgModuleProviders() {
+    return [this._metadataResolver.getProviderMetadata(
+        new ProviderMeta(Compiler, {useValue: this}))];
+  }
+
+  compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T> {
+    return this._delegate.compileModuleSync(moduleType) as NgModuleFactory<T>;
+  }
+  compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>> {
+    return this._delegate.compileModuleAsync(moduleType) as Promise<NgModuleFactory<T>>;
+  }
+  compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T> {
+    const result = this._delegate.compileModuleAndAllComponentsSync(moduleType);
+    return {
+      ngModuleFactory: result.ngModuleFactory as NgModuleFactory<T>,
+      componentFactories: result.componentFactories as ComponentFactory<any>[],
+    };
+  }
+  compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
+      Promise<ModuleWithComponentFactories<T>> {
+    return this._delegate.compileModuleAndAllComponentsAsync(moduleType)
+        .then((result) => ({
+                ngModuleFactory: result.ngModuleFactory as NgModuleFactory<T>,
+                componentFactories: result.componentFactories as ComponentFactory<any>[],
+              }));
+  }
+  loadAotSummaries(summaries: () => any[]) { this._delegate.loadAotSummaries(summaries); }
+  hasAotSummary(ref: Type<any>): boolean { return this._delegate.hasAotSummary(ref); }
+  getComponentFactory<T>(component: Type<T>): ComponentFactory<T> {
+    return this._delegate.getComponentFactory(component) as ComponentFactory<T>;
+  }
+  clearCache(): void { this._delegate.clearCache(); }
+  clearCacheFor(type: Type<any>) { this._delegate.clearCacheFor(type); }
+  getModuleId(moduleType: Type<any>): string|undefined {
+    const meta = this._metadataResolver.getNgModuleMetadata(moduleType);
+    return meta && meta.id || undefined;
+  }
+}
+
+/**
+ * A set of providers that provide `JitCompiler` and its dependencies to use for
+ * template compilation.
+ */
+export const COMPILER_PROVIDERS = <StaticProvider[]>[
+  {provide: CompileReflector, useValue: new JitReflector()},
+  {provide: ResourceLoader, useValue: _NO_RESOURCE_LOADER},
+  {provide: JitSummaryResolver, deps: []},
+  {provide: SummaryResolver, useExisting: JitSummaryResolver},
+  {provide: Console, deps: []},
+  {provide: Lexer, deps: []},
+  {provide: Parser, deps: [Lexer]},
+  {
+    provide: baseHtmlParser,
+    useClass: HtmlParser,
+    deps: [],
+  },
+  {
+    provide: I18NHtmlParser,
+    useFactory: (parser: HtmlParser, translations: string | null, format: string,
+                 config: CompilerConfig, console: Console) => {
+      translations = translations || '';
+      const missingTranslation =
+          translations ? config.missingTranslation ! : MissingTranslationStrategy.Ignore;
+      return new I18NHtmlParser(parser, translations, format, missingTranslation, console);
+    },
+    deps: [
+      baseHtmlParser,
+      [new Optional(), new Inject(TRANSLATIONS)],
+      [new Optional(), new Inject(TRANSLATIONS_FORMAT)],
+      [CompilerConfig],
+      [Console],
+    ]
+  },
+  {
+    provide: HtmlParser,
+    useExisting: I18NHtmlParser,
+  },
+  {
+    provide: TemplateParser, deps: [CompilerConfig, CompileReflector,
+    Parser, ElementSchemaRegistry,
+    I18NHtmlParser, Console]
+  },
+  { provide: DirectiveNormalizer, deps: [ResourceLoader, UrlResolver, HtmlParser, CompilerConfig]},
+  { provide: CompileMetadataResolver, deps: [CompilerConfig, HtmlParser, NgModuleResolver,
+                      DirectiveResolver, PipeResolver,
+                      SummaryResolver,
+                      ElementSchemaRegistry,
+                      DirectiveNormalizer, Console,
+                      [Optional, StaticSymbolCache],
+                      CompileReflector,
+                      [Optional, ERROR_COLLECTOR_TOKEN]]},
+  DEFAULT_PACKAGE_URL_PROVIDER,
+  { provide: StyleCompiler, deps: [UrlResolver]},
+  { provide: ViewCompiler, deps: [CompileReflector]},
+  { provide: NgModuleCompiler, deps: [CompileReflector] },
+  { provide: CompilerConfig, useValue: new CompilerConfig()},
+  { provide: Compiler, useClass: CompilerImpl, deps: [Injector, CompileMetadataResolver,
+                                TemplateParser, StyleCompiler,
+                                ViewCompiler, NgModuleCompiler,
+                                SummaryResolver, CompileReflector, CompilerConfig,
+                                Console]},
+  { provide: DomElementSchemaRegistry, deps: []},
+  { provide: ElementSchemaRegistry, useExisting: DomElementSchemaRegistry},
+  { provide: UrlResolver, deps: [PACKAGE_ROOT_URL]},
+  { provide: DirectiveResolver, deps: [CompileReflector]},
+  { provide: PipeResolver, deps: [CompileReflector]},
+  { provide: NgModuleResolver, deps: [CompileReflector]},
+];
+
+/**
+ * @experimental
+ */
+export class JitCompilerFactory implements CompilerFactory {
+  private _defaultOptions: CompilerOptions[];
+
+  /* @internal */
+  constructor(defaultOptions: CompilerOptions[]) {
+    const compilerOptions: CompilerOptions = {
+      useJit: true,
+      defaultEncapsulation: ViewEncapsulation.Emulated,
+      missingTranslation: MissingTranslationStrategy.Warning,
+    };
+
+    this._defaultOptions = [compilerOptions, ...defaultOptions];
+  }
+  createCompiler(options: CompilerOptions[] = []): Compiler {
+    const opts = _mergeOptions(this._defaultOptions.concat(options));
+    const injector = Injector.create([
+      COMPILER_PROVIDERS, {
+        provide: CompilerConfig,
+        useFactory: () => {
+          return new CompilerConfig({
+            // let explicit values from the compiler options overwrite options
+            // from the app providers
+            useJit: opts.useJit,
+            jitDevMode: isDevMode(),
+            // let explicit values from the compiler options overwrite options
+            // from the app providers
+            defaultEncapsulation: opts.defaultEncapsulation,
+            missingTranslation: opts.missingTranslation,
+            preserveWhitespaces: opts.preserveWhitespaces,
+          });
+        },
+        deps: []
+      },
+      opts.providers !
+    ]);
+    return injector.get(Compiler);
+  }
+}
+
+function _mergeOptions(optionsArr: CompilerOptions[]): CompilerOptions {
+  return {
+    useJit: _lastDefined(optionsArr.map(options => options.useJit)),
+    defaultEncapsulation: _lastDefined(optionsArr.map(options => options.defaultEncapsulation)),
+    providers: _mergeArrays(optionsArr.map(options => options.providers !)),
+    missingTranslation: _lastDefined(optionsArr.map(options => options.missingTranslation)),
+    preserveWhitespaces: _lastDefined(optionsArr.map(options => options.preserveWhitespaces)),
+  };
+}
+
+function _lastDefined<T>(args: T[]): T|undefined {
+  for (let i = args.length - 1; i >= 0; i--) {
+    if (args[i] !== undefined) {
+      return args[i];
+    }
+  }
+  return undefined;
+}
+
+function _mergeArrays(parts: any[][]): any[] {
+  const result: any[] = [];
+  parts.forEach((part) => part && result.push(...part));
+  return result;
+}
diff --git a/packages/platform-browser-dynamic/src/compiler_reflector.ts b/packages/platform-browser-dynamic/src/compiler_reflector.ts
new file mode 100644
index 000000000000..c0663fcddad1
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/compiler_reflector.ts
@@ -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
+ */
+
+import {CompileReflector, ExternalReference, Identifiers, getUrlScheme, syntaxError} from '@angular/compiler';
+import {ANALYZE_FOR_ENTRY_COMPONENTS, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, LOCALE_ID, NgModuleFactory, NgModuleRef, QueryList, Renderer, SecurityContext, TRANSLATIONS_FORMAT, TemplateRef, ViewContainerRef, ViewEncapsulation, ɵCodegenComponentFactoryResolver, ɵEMPTY_ARRAY, ɵEMPTY_MAP, ɵReflectionCapabilities as ReflectionCapabilities, ɵand, ɵccf, ɵcmf, ɵcrt, ɵdid, ɵeld, ɵinlineInterpolate, ɵinterpolate, ɵmod, ɵmpd, ɵncd, ɵnov, ɵpad, ɵpid, ɵpod, ɵppd, ɵprd, ɵqud, ɵregisterModuleFactory, ɵstringify as stringify, ɵted, ɵunv, ɵvid} from '@angular/core';
+
+export const MODULE_SUFFIX = '';
+const builtinExternalReferences = createBuiltinExternalReferencesMap();
+
+export class JitReflector implements CompileReflector {
+  private 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);
+  }
+  tryAnnotations(typeOrFunc: /*Type*/ any): any[] { return this.annotations(typeOrFunc); }
+  annotations(typeOrFunc: /*Type*/ any): any[] {
+    return this.reflectionCapabilities.annotations(typeOrFunc);
+  }
+  shallowAnnotations(typeOrFunc: /*Type*/ any): any[] {
+    throw new Error('Not supported in JIT mode');
+  }
+  propMetadata(typeOrFunc: /*Type*/ any): {[key: string]: any[]} {
+    return this.reflectionCapabilities.propMetadata(typeOrFunc);
+  }
+  hasLifecycleHook(type: any, lcProperty: string): boolean {
+    return this.reflectionCapabilities.hasLifecycleHook(type, lcProperty);
+  }
+  guards(type: any): {[key: string]: any} { return this.reflectionCapabilities.guards(type); }
+  resolveExternalReference(ref: ExternalReference): any {
+    return builtinExternalReferences.get(ref) || ref.runtime;
+  }
+}
+
+
+function createBuiltinExternalReferencesMap() {
+  const map = new Map<ExternalReference, any>();
+  map.set(Identifiers.ANALYZE_FOR_ENTRY_COMPONENTS, ANALYZE_FOR_ENTRY_COMPONENTS);
+  map.set(Identifiers.ElementRef, ElementRef);
+  map.set(Identifiers.NgModuleRef, NgModuleRef);
+  map.set(Identifiers.ViewContainerRef, ViewContainerRef);
+  map.set(Identifiers.ChangeDetectorRef, ChangeDetectorRef);
+  map.set(Identifiers.QueryList, QueryList);
+  map.set(Identifiers.TemplateRef, TemplateRef);
+  map.set(Identifiers.CodegenComponentFactoryResolver, ɵCodegenComponentFactoryResolver);
+  map.set(Identifiers.ComponentFactoryResolver, ComponentFactoryResolver);
+  map.set(Identifiers.ComponentFactory, ComponentFactory);
+  map.set(Identifiers.ComponentRef, ComponentRef);
+  map.set(Identifiers.NgModuleFactory, NgModuleFactory);
+  map.set(Identifiers.createModuleFactory, ɵcmf);
+  map.set(Identifiers.moduleDef, ɵmod);
+  map.set(Identifiers.moduleProviderDef, ɵmpd);
+  map.set(Identifiers.RegisterModuleFactoryFn, ɵregisterModuleFactory);
+  map.set(Identifiers.Injector, Injector);
+  map.set(Identifiers.ViewEncapsulation, ViewEncapsulation);
+  map.set(Identifiers.ChangeDetectionStrategy, ChangeDetectionStrategy);
+  map.set(Identifiers.SecurityContext, SecurityContext);
+  map.set(Identifiers.LOCALE_ID, LOCALE_ID);
+  map.set(Identifiers.TRANSLATIONS_FORMAT, TRANSLATIONS_FORMAT);
+  map.set(Identifiers.inlineInterpolate, ɵinlineInterpolate);
+  map.set(Identifiers.interpolate, ɵinterpolate);
+  map.set(Identifiers.EMPTY_ARRAY, ɵEMPTY_ARRAY);
+  map.set(Identifiers.EMPTY_MAP, ɵEMPTY_MAP);
+  map.set(Identifiers.Renderer, Renderer);
+  map.set(Identifiers.viewDef, ɵvid);
+  map.set(Identifiers.elementDef, ɵeld);
+  map.set(Identifiers.anchorDef, ɵand);
+  map.set(Identifiers.textDef, ɵted);
+  map.set(Identifiers.directiveDef, ɵdid);
+  map.set(Identifiers.providerDef, ɵprd);
+  map.set(Identifiers.queryDef, ɵqud);
+  map.set(Identifiers.pureArrayDef, ɵpad);
+  map.set(Identifiers.pureObjectDef, ɵpod);
+  map.set(Identifiers.purePipeDef, ɵppd);
+  map.set(Identifiers.pipeDef, ɵpid);
+  map.set(Identifiers.nodeValue, ɵnov);
+  map.set(Identifiers.ngContentDef, ɵncd);
+  map.set(Identifiers.unwrapValue, ɵunv);
+  map.set(Identifiers.createRendererType2, ɵcrt);
+  map.set(Identifiers.createComponentFactory, ɵccf);
+  return map;
+}
\ No newline at end of file
diff --git a/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts b/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts
new file mode 100644
index 000000000000..93641b2e2b9e
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 {CompilerFactory, PlatformRef, Provider, StaticProvider, createPlatformFactory, platformCore} from '@angular/core';
+
+import {platformCoreDynamic} from './platform_core_dynamic';
+import {INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS} from './platform_providers';
+import {CachedResourceLoader} from './resource_loader/resource_loader_cache';
+
+export * from './private_export';
+export {VERSION} from './version';
+export {JitCompilerFactory} from './compiler_factory';
+
+/**
+ * @experimental
+ */
+export const RESOURCE_CACHE_PROVIDER: Provider[] =
+    [{provide: ResourceLoader, useClass: CachedResourceLoader, deps: []}];
+
+export const platformBrowserDynamic = createPlatformFactory(
+    platformCoreDynamic, 'browserDynamic', INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS);
diff --git a/packages/platform-browser-dynamic/src/platform_core_dynamic.ts b/packages/platform-browser-dynamic/src/platform_core_dynamic.ts
new file mode 100644
index 000000000000..987bc1e6731c
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/platform_core_dynamic.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
+ */
+
+import {COMPILER_OPTIONS, CompilerFactory, PlatformRef, StaticProvider, createPlatformFactory, platformCore} from '@angular/core';
+import {JitCompilerFactory} from './compiler_factory';
+
+/**
+ * A platform that included corePlatform and the compiler.
+ *
+ * @experimental
+ */
+export const platformCoreDynamic = createPlatformFactory(platformCore, 'coreDynamic', [
+  {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
+  {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
+]);
diff --git a/packages/platform-browser-dynamic/src/platform_providers.ts b/packages/platform-browser-dynamic/src/platform_providers.ts
new file mode 100644
index 000000000000..f477ee77b7a3
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/platform_providers.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 {ɵPLATFORM_BROWSER_ID as PLATFORM_BROWSER_ID} from '@angular/common';
+import {ResourceLoader} from '@angular/compiler';
+import {COMPILER_OPTIONS, PLATFORM_ID, StaticProvider} from '@angular/core';
+
+import {ɵINTERNAL_BROWSER_PLATFORM_PROVIDERS as INTERNAL_BROWSER_PLATFORM_PROVIDERS} from '@angular/platform-browser';
+
+import {ResourceLoaderImpl} from './resource_loader/resource_loader_impl';
+
+export const INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS: StaticProvider[] = [
+  INTERNAL_BROWSER_PLATFORM_PROVIDERS,
+  {
+    provide: COMPILER_OPTIONS,
+    useValue: {providers: [{provide: ResourceLoader, useClass: ResourceLoaderImpl, deps: []}]},
+    multi: true
+  },
+  {provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID},
+];
diff --git a/packages/platform-browser-dynamic/src/private_export.ts b/packages/platform-browser-dynamic/src/private_export.ts
new file mode 100644
index 000000000000..42da202adc73
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/private_export.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
+ */
+
+export {CompilerImpl as ɵCompilerImpl} from './compiler_factory';
+export {platformCoreDynamic as ɵplatformCoreDynamic} from './platform_core_dynamic';
+export {INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS as ɵINTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS} from './platform_providers';
+export {ResourceLoaderImpl as ɵResourceLoaderImpl} from './resource_loader/resource_loader_impl';
diff --git a/packages/platform-browser-dynamic/src/resource_loader/resource_loader_cache.ts b/packages/platform-browser-dynamic/src/resource_loader/resource_loader_cache.ts
new file mode 100644
index 000000000000..4fb4d71c9041
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/resource_loader/resource_loader_cache.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 {ɵglobal as global} from '@angular/core';
+
+/**
+ * An implementation of ResourceLoader that uses a template cache to avoid doing an actual
+ * ResourceLoader.
+ *
+ * The template cache needs to be built and loaded into window.$templateCache
+ * via a separate mechanism.
+ */
+export class CachedResourceLoader extends ResourceLoader {
+  private _cache: {[url: string]: string};
+
+  constructor() {
+    super();
+    this._cache = (<any>global).$templateCache;
+    if (this._cache == null) {
+      throw new Error('CachedResourceLoader: Template cache was not found in $templateCache.');
+    }
+  }
+
+  get(url: string): Promise<string> {
+    if (this._cache.hasOwnProperty(url)) {
+      return Promise.resolve(this._cache[url]);
+    } else {
+      return <Promise<any>>Promise.reject(
+          'CachedResourceLoader: Did not find cached template for ' + url);
+    }
+  }
+}
diff --git a/packages/platform-browser-dynamic/src/resource_loader/resource_loader_impl.ts b/packages/platform-browser-dynamic/src/resource_loader/resource_loader_impl.ts
new file mode 100644
index 000000000000..4e5dfd6e5e3b
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/resource_loader/resource_loader_impl.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 {ResourceLoader} from '@angular/compiler';
+import {Injectable} from '@angular/core';
+
+
+@Injectable()
+export class ResourceLoaderImpl extends ResourceLoader {
+  get(url: string): Promise<string> {
+    let resolve: (result: any) => void;
+    let reject: (error: any) => void;
+    const promise = new Promise<string>((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.responseType = 'text';
+
+    xhr.onload = function() {
+      // responseText is the old-school way of retrieving response (supported by IE8 & 9)
+      // response/responseType properties were introduced in ResourceLoader Level2 spec (supported
+      // by IE10)
+      const response = xhr.response || xhr.responseText;
+
+      // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
+      let status = xhr.status === 1223 ? 204 : xhr.status;
+
+      // fix status code when it is 0 (0 status is undocumented).
+      // Occurs when accessing file resources or on Android 4.1 stock browser
+      // while retrieving files from application cache.
+      if (status === 0) {
+        status = response ? 200 : 0;
+      }
+
+      if (200 <= status && status <= 300) {
+        resolve(response);
+      } else {
+        reject(`Failed to load ${url}`);
+      }
+    };
+
+    xhr.onerror = function() { reject(`Failed to load ${url}`); };
+
+    xhr.send();
+    return promise;
+  }
+}
diff --git a/packages/platform-browser-dynamic/src/version.ts b/packages/platform-browser-dynamic/src/version.ts
new file mode 100644
index 000000000000..af66f0fa278a
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/core';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/platform-browser-dynamic/test/BUILD.bazel b/packages/platform-browser-dynamic/test/BUILD.bazel
new file mode 100644
index 000000000000..0abf9783799a
--- /dev/null
+++ b/packages/platform-browser-dynamic/test/BUILD.bazel
@@ -0,0 +1,39 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser-dynamic/testing",
+        "//packages/platform-browser/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    # dissable since tests are running but not yet passing
+    tags = ["manual"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    static_files = [
+        "//packages/platform-browser/test:static_assets/test.html",
+        "//packages/platform-browser/test:browser/static_assets/200.html",
+    ],
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/platform-browser-dynamic/test/metadata_overrider_spec.ts b/packages/platform-browser-dynamic/test/metadata_overrider_spec.ts
new file mode 100644
index 000000000000..05367b167f21
--- /dev/null
+++ b/packages/platform-browser-dynamic/test/metadata_overrider_spec.ts
@@ -0,0 +1,152 @@
+/**
+ * @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 {MetadataOverrider} from '@angular/platform-browser-dynamic/testing/src/metadata_overrider';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+interface SomeMetadataType {
+  plainProp?: string;
+  getterProp?: string;
+  arrayProp?: any[];
+}
+
+interface OtherMetadataType extends SomeMetadataType {
+  otherPlainProp?: string;
+}
+
+class SomeMetadata implements SomeMetadataType {
+  plainProp: string;
+  private _getterProp: string;
+  get getterProp(): string { return this._getterProp; }
+  arrayProp: any[];
+
+  constructor(options: SomeMetadataType) {
+    this.plainProp = options.plainProp !;
+    this._getterProp = options.getterProp !;
+    this.arrayProp = options.arrayProp !;
+  }
+}
+
+class OtherMetadata extends SomeMetadata implements OtherMetadataType {
+  otherPlainProp: string;
+
+  constructor(options: OtherMetadataType) {
+    super({
+      plainProp: options.plainProp,
+      getterProp: options.getterProp,
+      arrayProp: options.arrayProp
+    });
+
+    this.otherPlainProp = options.otherPlainProp !;
+  }
+}
+
+{
+  describe('metadata overrider', () => {
+    let overrider: MetadataOverrider;
+
+    beforeEach(() => { overrider = new MetadataOverrider(); });
+
+    it('should return a new instance with the same values', () => {
+      const oldInstance = new SomeMetadata({plainProp: 'somePlainProp', getterProp: 'someInput'});
+      const newInstance = overrider.overrideMetadata(SomeMetadata, oldInstance, {});
+      expect(newInstance).not.toBe(oldInstance);
+      expect(newInstance).toBeAnInstanceOf(SomeMetadata);
+      expect(newInstance).toEqual(oldInstance);
+    });
+
+    it('should set individual properties and keep others', () => {
+      const oldInstance =
+          new SomeMetadata({plainProp: 'somePlainProp', getterProp: 'someGetterProp'});
+      const newInstance =
+          overrider.overrideMetadata(SomeMetadata, oldInstance, {set: {plainProp: 'newPlainProp'}});
+      expect(newInstance)
+          .toEqual(new SomeMetadata({plainProp: 'newPlainProp', getterProp: 'someGetterProp'}));
+    });
+
+    describe('add properties', () => {
+      it('should replace non array values', () => {
+        const oldInstance =
+            new SomeMetadata({plainProp: 'somePlainProp', getterProp: 'someGetterProp'});
+        const newInstance = overrider.overrideMetadata(
+            SomeMetadata, oldInstance, {add: {plainProp: 'newPlainProp'}});
+        expect(newInstance)
+            .toEqual(new SomeMetadata({plainProp: 'newPlainProp', getterProp: 'someGetterProp'}));
+      });
+
+      it('should add to array values', () => {
+        const oldInstance = new SomeMetadata({arrayProp: ['a']});
+        const newInstance =
+            overrider.overrideMetadata(SomeMetadata, oldInstance, {add: {arrayProp: ['b']}});
+        expect(newInstance).toEqual(new SomeMetadata({arrayProp: ['a', 'b']}));
+      });
+    });
+
+    describe('remove', () => {
+      it('should set values to undefined if their value matches', () => {
+        const oldInstance =
+            new SomeMetadata({plainProp: 'somePlainProp', getterProp: 'someGetterProp'});
+        const newInstance = overrider.overrideMetadata(
+            SomeMetadata, oldInstance, {remove: {plainProp: 'somePlainProp'}});
+        expect(newInstance)
+            .toEqual(new SomeMetadata({plainProp: undefined, getterProp: 'someGetterProp'}));
+      });
+
+      it('should leave values if their value does not match', () => {
+        const oldInstance =
+            new SomeMetadata({plainProp: 'somePlainProp', getterProp: 'someGetterProp'});
+        const newInstance = overrider.overrideMetadata(
+            SomeMetadata, oldInstance, {remove: {plainProp: 'newPlainProp'}});
+        expect(newInstance)
+            .toEqual(new SomeMetadata({plainProp: 'somePlainProp', getterProp: 'someGetterProp'}));
+      });
+
+      it('should remove a value from an array', () => {
+        const oldInstance =
+            new SomeMetadata({arrayProp: ['a', 'b', 'c'], getterProp: 'someGetterProp'});
+        const newInstance = overrider.overrideMetadata(
+            SomeMetadata, oldInstance, {remove: {arrayProp: ['a', 'c']}});
+        expect(newInstance)
+            .toEqual(new SomeMetadata({arrayProp: ['b'], getterProp: 'someGetterProp'}));
+      });
+
+      it('should support types as values', () => {
+        class Class1 {}
+        class Class2 {}
+        class Class3 {}
+
+        const instance1 = new SomeMetadata({arrayProp: [Class1, Class2, Class3]});
+        const instance2 =
+            overrider.overrideMetadata(SomeMetadata, instance1, {remove: {arrayProp: [Class1]}});
+        expect(instance2).toEqual(new SomeMetadata({arrayProp: [Class2, Class3]}));
+        const instance3 =
+            overrider.overrideMetadata(SomeMetadata, instance2, {remove: {arrayProp: [Class3]}});
+        expect(instance3).toEqual(new SomeMetadata({arrayProp: [Class2]}));
+
+      });
+    });
+
+    describe('subclasses', () => {
+      it('should set individual properties and keep others', () => {
+        const oldInstance = new OtherMetadata({
+          plainProp: 'somePlainProp',
+          getterProp: 'someGetterProp',
+          otherPlainProp: 'newOtherProp'
+        });
+        const newInstance = overrider.overrideMetadata(
+            OtherMetadata, oldInstance, {set: {plainProp: 'newPlainProp'}});
+        expect(newInstance).toEqual(new OtherMetadata({
+          plainProp: 'newPlainProp',
+          getterProp: 'someGetterProp',
+          otherPlainProp: 'newOtherProp'
+        }));
+      });
+
+    });
+  });
+}
diff --git a/packages/platform-browser-dynamic/test/resource_loader/resource_loader_cache_setter.ts b/packages/platform-browser-dynamic/test/resource_loader/resource_loader_cache_setter.ts
new file mode 100644
index 000000000000..44e53100f842
--- /dev/null
+++ b/packages/platform-browser-dynamic/test/resource_loader/resource_loader_cache_setter.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 function setTemplateCache(cache: any /** TODO #9100 */): void {
+  (<any>window).$templateCache = cache;
+}
diff --git a/packages/platform-browser-dynamic/test/resource_loader/resource_loader_cache_spec.ts b/packages/platform-browser-dynamic/test/resource_loader/resource_loader_cache_spec.ts
new file mode 100644
index 000000000000..4f109fbbe1bc
--- /dev/null
+++ b/packages/platform-browser-dynamic/test/resource_loader/resource_loader_cache_spec.ts
@@ -0,0 +1,84 @@
+/**
+ * @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, UrlResolver} from '@angular/compiler';
+import {Component} from '@angular/core';
+import {TestBed, async, fakeAsync, tick} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+import {CachedResourceLoader} from '../../src/resource_loader/resource_loader_cache';
+
+import {setTemplateCache} from './resource_loader_cache_setter';
+
+{
+  describe('CachedResourceLoader', () => {
+    let resourceLoader: CachedResourceLoader;
+
+    function createCachedResourceLoader(): CachedResourceLoader {
+      setTemplateCache({'test.html': '<div>Hello</div>'});
+      return new CachedResourceLoader();
+    }
+    beforeEach(fakeAsync(() => {
+      TestBed.configureCompiler({
+        providers: [
+          {provide: UrlResolver, useClass: TestUrlResolver, deps: []},
+          {provide: ResourceLoader, useFactory: createCachedResourceLoader, deps: []}
+        ]
+      });
+
+      TestBed.configureTestingModule({declarations: [TestComponent]});
+      TestBed.compileComponents();
+    }));
+
+    it('should throw exception if $templateCache is not found', () => {
+      setTemplateCache(null);
+      expect(() => {
+        resourceLoader = new CachedResourceLoader();
+      }).toThrowError('CachedResourceLoader: Template cache was not found in $templateCache.');
+    });
+
+    it('should resolve the Promise with the cached file content on success', async(() => {
+         setTemplateCache({'test.html': '<div>Hello</div>'});
+         resourceLoader = new CachedResourceLoader();
+         resourceLoader.get('test.html').then((text) => { expect(text).toBe('<div>Hello</div>'); });
+       }));
+
+    it('should reject the Promise on failure', async(() => {
+         resourceLoader = new CachedResourceLoader();
+         resourceLoader.get('unknown.html')
+             .then((text) => { throw new Error('Not expected to succeed.'); })
+             .catch((error) => {/** success */});
+       }));
+
+    it('should allow fakeAsync Tests to load components with templateUrl synchronously',
+       fakeAsync(() => {
+         TestBed.configureTestingModule({declarations: [TestComponent]});
+         TestBed.compileComponents();
+         tick();
+
+         const fixture = TestBed.createComponent(TestComponent);
+
+         // This should initialize the fixture.
+         tick();
+
+         expect(fixture.debugElement.children[0].nativeElement).toHaveText('Hello');
+       }));
+  });
+}
+
+@Component({selector: 'test-cmp', templateUrl: 'test.html'})
+class TestComponent {
+}
+
+class TestUrlResolver extends UrlResolver {
+  resolve(baseUrl: string, url: string): string {
+    // Don't use baseUrl to get the same URL as templateUrl.
+    // This is to remove any difference between Dart and TS tests.
+    return url;
+  }
+}
diff --git a/packages/platform-browser-dynamic/test/resource_loader/resource_loader_impl_spec.ts b/packages/platform-browser-dynamic/test/resource_loader/resource_loader_impl_spec.ts
new file mode 100644
index 000000000000..b10eb07eaeac
--- /dev/null
+++ b/packages/platform-browser-dynamic/test/resource_loader/resource_loader_impl_spec.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
+ */
+
+import {AsyncTestCompleter, beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {ResourceLoaderImpl} from '../../src/resource_loader/resource_loader_impl';
+
+{
+  describe('ResourceLoaderImpl', () => {
+    let resourceLoader: ResourceLoaderImpl;
+
+    // TODO(juliemr): This file currently won't work with dart unit tests run using
+    // exclusive it or describe (iit or ddescribe). This is because when
+    // pub run test is executed against this specific file the relative paths
+    // will be relative to here, so url200 should look like
+    // static_assets/200.html.
+    // We currently have no way of detecting this.
+    const url200 = '/base/angular/packages/platform-browser/test/browser/static_assets/200.html';
+    const url404 = '/bad/path/404.html';
+
+    beforeEach(() => { resourceLoader = new ResourceLoaderImpl(); });
+
+    it('should resolve the Promise with the file content on success',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         resourceLoader.get(url200).then((text) => {
+           expect(text.trim()).toEqual('<p>hey</p>');
+           async.done();
+         });
+       }), 10000);
+
+    it('should reject the Promise on failure',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         resourceLoader.get(url404).catch((e) => {
+           expect(e).toEqual(`Failed to load ${url404}`);
+           async.done();
+           return null;
+         });
+       }), 10000);
+  });
+}
diff --git a/packages/platform-browser-dynamic/test/testing_public_browser_spec.ts b/packages/platform-browser-dynamic/test/testing_public_browser_spec.ts
new file mode 100644
index 000000000000..70d733e1bb9a
--- /dev/null
+++ b/packages/platform-browser-dynamic/test/testing_public_browser_spec.ts
@@ -0,0 +1,151 @@
+/**
+ * @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 {Compiler, Component, NgModule} from '@angular/core';
+import {TestBed, async, fakeAsync, inject, tick} from '@angular/core/testing';
+
+import {ResourceLoaderImpl} from '../src/resource_loader/resource_loader_impl';
+
+
+
+// Components for the tests.
+class FancyService {
+  value: string = 'real value';
+  getAsyncValue() { return Promise.resolve('async value'); }
+  getTimeoutValue() {
+    return new Promise(
+        (resolve, reject) => { setTimeout(() => { resolve('timeout value'); }, 10); });
+  }
+}
+
+@Component({
+  selector: 'external-template-comp',
+  templateUrl: '/base/angular/packages/platform-browser/test/static_assets/test.html'
+})
+class ExternalTemplateComp {
+}
+
+@Component({selector: 'bad-template-comp', templateUrl: 'non-existent.html'})
+class BadTemplateUrl {
+}
+
+// Tests for angular/testing bundle specific to the browser environment.
+// For general tests, see test/testing/testing_public_spec.ts.
+{
+  describe('test APIs for the browser', () => {
+    describe('using the async helper', () => {
+      let actuallyDone: boolean;
+
+      beforeEach(() => { actuallyDone = false; });
+
+      afterEach(() => { expect(actuallyDone).toEqual(true); });
+
+      it('should run async tests with ResourceLoaders', async(() => {
+           const resourceLoader = new ResourceLoaderImpl();
+           resourceLoader
+               .get('/base/angular/packages/platform-browser/test/static_assets/test.html')
+               .then(() => { actuallyDone = true; });
+         }),
+         10000);  // Long timeout here because this test makes an actual ResourceLoader.
+    });
+
+    describe('using the test injector with the inject helper', () => {
+      describe('setting up Providers', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule(
+              {providers: [{provide: FancyService, useValue: new FancyService()}]});
+        });
+
+        it('provides a real ResourceLoader instance',
+           inject([ResourceLoader], (resourceLoader: ResourceLoader) => {
+             expect(resourceLoader instanceof ResourceLoaderImpl).toBeTruthy();
+           }));
+
+        it('should allow the use of fakeAsync',
+           fakeAsync(inject([FancyService], (service: any /** TODO #9100 */) => {
+             let value: any /** TODO #9100 */;
+             service.getAsyncValue().then(function(val: any /** TODO #9100 */) { value = val; });
+             tick();
+             expect(value).toEqual('async value');
+           })));
+      });
+    });
+
+    describe('Compiler', () => {
+      it('should return NgModule id when asked', () => {
+        @NgModule({
+          id: 'test-module',
+        })
+        class TestModule {
+        }
+
+        TestBed.configureTestingModule({
+          imports: [TestModule],
+        });
+        const compiler = TestBed.get(Compiler) as Compiler;
+        expect(compiler.getModuleId(TestModule)).toBe('test-module');
+      });
+    });
+
+    describe('errors', () => {
+      let originalJasmineIt: any;
+
+      const patchJasmineIt = () => {
+        let resolve: (result: any) => void;
+        let reject: (error: any) => void;
+        const promise = new Promise((res, rej) => {
+          resolve = res;
+          reject = rej;
+        });
+        originalJasmineIt = jasmine.getEnv().it;
+        jasmine.getEnv().it = (description: string, fn: (done: DoneFn) => void): any => {
+          const done = (() => resolve(null)) as DoneFn;
+          done.fail = reject;
+          fn(done);
+          return null;
+        };
+        return promise;
+      };
+
+      const restoreJasmineIt = () => { jasmine.getEnv().it = originalJasmineIt; };
+
+      it('should fail when an ResourceLoader fails', done => {
+        const itPromise = patchJasmineIt();
+
+        it('should fail with an error from a promise', async(() => {
+             TestBed.configureTestingModule({declarations: [BadTemplateUrl]});
+             TestBed.compileComponents();
+           }));
+
+        itPromise.then(
+            () => { done.fail('Expected test to fail, but it did not'); },
+            (err: any) => {
+              expect(err.message)
+                  .toEqual('Uncaught (in promise): Failed to load non-existent.html');
+              done();
+            });
+        restoreJasmineIt();
+      }, 10000);
+    });
+
+    describe('TestBed createComponent', function() {
+      it('should allow an external templateUrl', async(() => {
+           TestBed.configureTestingModule({declarations: [ExternalTemplateComp]});
+           TestBed.compileComponents().then(() => {
+             const componentFixture = TestBed.createComponent(ExternalTemplateComp);
+             componentFixture.detectChanges();
+             expect(componentFixture.nativeElement.textContent).toEqual('from external template');
+           });
+         }),
+         10000);  // Long timeout here because this test makes an actual ResourceLoader request, and
+                  // is slow
+                  // on Edge.
+    });
+  });
+}
diff --git a/packages/platform-browser-dynamic/testing/BUILD.bazel b/packages/platform-browser-dynamic/testing/BUILD.bazel
new file mode 100644
index 000000000000..eecbc31e88ae
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/BUILD.bazel
@@ -0,0 +1,20 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(["**/*.ts"]),
+    module_name = "@angular/platform-browser-dynamic/testing",
+    deps = [
+        "//packages/compiler",
+        "//packages/compiler/testing",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser/testing",
+    ],
+)
diff --git a/packages/platform-browser-dynamic/testing/index.ts b/packages/platform-browser-dynamic/testing/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/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';
diff --git a/packages/platform-browser-dynamic/testing/package.json b/packages/platform-browser-dynamic/testing/package.json
new file mode 100644
index 000000000000..217c05756951
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/platform-browser-dynamic/testing",
+  "typings": "./testing.d.ts",
+  "main": "../bundles/platform-browser-dynamic-testing.umd.js",
+  "module": "../fesm5/testing.js",
+  "es2015": "../fesm2015/testing.js",
+  "esm5": "../esm5/testing/testing.js",
+  "esm2015": "../esm2015/testing/testing.js",
+  "fesm5": "../fesm5/testing.js",
+  "fesm2015": "../fesm2015/testing.js"
+}
diff --git a/packages/platform-browser-dynamic/testing/public_api.ts b/packages/platform-browser-dynamic/testing/public_api.ts
new file mode 100644
index 000000000000..fcc511dc6e48
--- /dev/null
+++ b/packages/platform-browser-dynamic/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 this package.
+ */
+export * from './src/testing';
diff --git a/packages/platform-browser-dynamic/testing/rollup.config.js b/packages/platform-browser-dynamic/testing/rollup.config.js
new file mode 100644
index 000000000000..60e34047f410
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/rollup.config.js
@@ -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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+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'
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/platform-browser-dynamic/fesm5/testing.js',
+  dest:
+      '../../../dist/packages-dist/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/platform-browser-dynamic/testing'},
+  moduleName: 'ng.platformBrowserDynamic.testing',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/platform-browser-dynamic/testing/src/compiler_factory.ts b/packages/platform-browser-dynamic/testing/src/compiler_factory.ts
new file mode 100644
index 000000000000..28fcfde2b2f3
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/src/compiler_factory.ts
@@ -0,0 +1,106 @@
+/**
+ * @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 {CompileReflector, DirectiveResolver, ERROR_COMPONENT_TYPE, NgModuleResolver, PipeResolver} from '@angular/compiler';
+import {MockDirectiveResolver, MockNgModuleResolver, MockPipeResolver} from '@angular/compiler/testing';
+import {CompilerFactory, CompilerOptions, Component, ComponentFactory, Directive, Injector, ModuleWithComponentFactories, NgModule, NgModuleFactory, Pipe, StaticProvider, Type, ɵstringify as stringify} from '@angular/core';
+import {MetadataOverride, ɵTestingCompiler as TestingCompiler, ɵTestingCompilerFactory as TestingCompilerFactory} from '@angular/core/testing';
+import {ɵCompilerImpl as CompilerImpl} from '@angular/platform-browser-dynamic';
+
+import {MetadataOverrider} from './metadata_overrider';
+
+export const COMPILER_PROVIDERS: StaticProvider[] = [
+  {provide: MockPipeResolver, deps: [CompileReflector]},
+  {provide: PipeResolver, useExisting: MockPipeResolver},
+  {provide: MockDirectiveResolver, deps: [CompileReflector]},
+  {provide: DirectiveResolver, useExisting: MockDirectiveResolver},
+  {provide: MockNgModuleResolver, deps: [CompileReflector]},
+  {provide: NgModuleResolver, useExisting: MockNgModuleResolver},
+];
+
+export class TestingCompilerFactoryImpl implements TestingCompilerFactory {
+  constructor(private _injector: Injector, private _compilerFactory: CompilerFactory) {}
+
+  createTestingCompiler(options: CompilerOptions[]): TestingCompiler {
+    const compiler = <CompilerImpl>this._compilerFactory.createCompiler(options);
+    return new TestingCompilerImpl(
+        compiler, compiler.injector.get(MockDirectiveResolver),
+        compiler.injector.get(MockPipeResolver), compiler.injector.get(MockNgModuleResolver));
+  }
+}
+
+export class TestingCompilerImpl implements TestingCompiler {
+  private _overrider = new MetadataOverrider();
+  constructor(
+      private _compiler: CompilerImpl, private _directiveResolver: MockDirectiveResolver,
+      private _pipeResolver: MockPipeResolver, private _moduleResolver: MockNgModuleResolver) {}
+  get injector(): Injector { return this._compiler.injector; }
+
+  compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T> {
+    return this._compiler.compileModuleSync(moduleType);
+  }
+
+  compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>> {
+    return this._compiler.compileModuleAsync(moduleType);
+  }
+  compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T> {
+    return this._compiler.compileModuleAndAllComponentsSync(moduleType);
+  }
+
+  compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
+      Promise<ModuleWithComponentFactories<T>> {
+    return this._compiler.compileModuleAndAllComponentsAsync(moduleType);
+  }
+
+  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));
+    this.clearCacheFor(ngModule);
+  }
+  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));
+    this.clearCacheFor(directive);
+  }
+  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));
+    this.clearCacheFor(component);
+  }
+  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));
+    this.clearCacheFor(pipe);
+  }
+  loadAotSummaries(summaries: () => any[]) { this._compiler.loadAotSummaries(summaries); }
+  clearCache(): void { this._compiler.clearCache(); }
+  clearCacheFor(type: Type<any>) { this._compiler.clearCacheFor(type); }
+
+  getComponentFromError(error: Error) { return (error as any)[ERROR_COMPONENT_TYPE] || null; }
+
+  getModuleId(moduleType: Type<any>): string|undefined {
+    return this._moduleResolver.resolve(moduleType, true).id;
+  }
+}
diff --git a/packages/platform-browser-dynamic/testing/src/dom_test_component_renderer.ts b/packages/platform-browser-dynamic/testing/src/dom_test_component_renderer.ts
new file mode 100644
index 000000000000..12eea18d4575
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/src/dom_test_component_renderer.ts
@@ -0,0 +1,31 @@
+/**
+ * @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, Injectable} from '@angular/core';
+import {TestComponentRenderer} from '@angular/core/testing';
+import {DOCUMENT, ɵgetDOM as getDOM} from '@angular/platform-browser';
+
+/**
+ * A DOM based implementation of the TestComponentRenderer.
+ */
+@Injectable()
+export class DOMTestComponentRenderer extends TestComponentRenderer {
+  constructor(@Inject(DOCUMENT) private _doc: any) { super(); }
+
+  insertRootElement(rootElId: string) {
+    const rootEl = <HTMLElement>getDOM().firstChild(
+        getDOM().content(getDOM().createTemplate(`<div id="${rootElId}"></div>`)));
+
+    // TODO(juliemr): can/should this be optional?
+    const oldRoots = getDOM().querySelectorAll(this._doc, '[id^=root]');
+    for (let i = 0; i < oldRoots.length; i++) {
+      getDOM().remove(oldRoots[i]);
+    }
+    getDOM().appendChild(this._doc.body, rootEl);
+  }
+}
diff --git a/packages/platform-browser-dynamic/testing/src/metadata_overrider.ts b/packages/platform-browser-dynamic/testing/src/metadata_overrider.ts
new file mode 100644
index 000000000000..56b90566087b
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/src/metadata_overrider.ts
@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+
+// `MetadataOverrider` has been moved to core/testing to allow using it from the render3 TestBed
+export {ɵMetadataOverrider as MetadataOverrider} from '@angular/core/testing';
diff --git a/packages/platform-browser-dynamic/testing/src/platform_core_dynamic_testing.ts b/packages/platform-browser-dynamic/testing/src/platform_core_dynamic_testing.ts
new file mode 100644
index 000000000000..0f2202bca99f
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/src/platform_core_dynamic_testing.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 {COMPILER_OPTIONS, CompilerFactory, Injector, PlatformRef, createPlatformFactory} from '@angular/core';
+import {ɵTestingCompilerFactory as TestingCompilerFactory} from '@angular/core/testing';
+import {ɵplatformCoreDynamic as platformCoreDynamic} from '@angular/platform-browser-dynamic';
+
+import {COMPILER_PROVIDERS, TestingCompilerFactoryImpl} from './compiler_factory';
+
+/**
+ * Platform for dynamic tests
+ *
+ * @experimental
+ */
+export const platformCoreDynamicTesting: (extraProviders?: any[]) => PlatformRef =
+    createPlatformFactory(platformCoreDynamic, 'coreDynamicTesting', [
+      {provide: COMPILER_OPTIONS, useValue: {providers: COMPILER_PROVIDERS}, multi: true}, {
+        provide: TestingCompilerFactory,
+        useClass: TestingCompilerFactoryImpl,
+        deps: [Injector, CompilerFactory]
+      }
+    ]);
diff --git a/packages/platform-browser-dynamic/testing/src/private_export_testing.ts b/packages/platform-browser-dynamic/testing/src/private_export_testing.ts
new file mode 100644
index 000000000000..5f61c707d153
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/src/private_export_testing.ts
@@ -0,0 +1,10 @@
+/**
+ * @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 {DOMTestComponentRenderer as ɵDOMTestComponentRenderer} from './dom_test_component_renderer';
+export {platformCoreDynamicTesting as ɵplatformCoreDynamicTesting} from './platform_core_dynamic_testing';
diff --git a/packages/platform-browser-dynamic/testing/src/testing.ts b/packages/platform-browser-dynamic/testing/src/testing.ts
new file mode 100644
index 000000000000..d849378d8109
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/src/testing.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 {NgModule, PlatformRef, StaticProvider, createPlatformFactory} from '@angular/core';
+import {TestComponentRenderer} from '@angular/core/testing';
+import {ɵINTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS as INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS} from '@angular/platform-browser-dynamic';
+import {BrowserTestingModule} from '@angular/platform-browser/testing';
+
+import {DOMTestComponentRenderer} from './dom_test_component_renderer';
+import {platformCoreDynamicTesting} from './platform_core_dynamic_testing';
+
+export * from './private_export_testing';
+
+export const platformBrowserDynamicTesting = createPlatformFactory(
+    platformCoreDynamicTesting, 'browserDynamicTesting',
+    INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS);
+
+/**
+ * NgModule for testing.
+ *
+ *
+ */
+@NgModule({
+  exports: [BrowserTestingModule],
+  providers: [
+    {provide: TestComponentRenderer, useClass: DOMTestComponentRenderer},
+  ]
+})
+export class BrowserDynamicTestingModule {
+}
diff --git a/packages/platform-browser-dynamic/testing/tsconfig-build.json b/packages/platform-browser-dynamic/testing/tsconfig-build.json
new file mode 100644
index 000000000000..398fe63fc509
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/tsconfig-build.json
@@ -0,0 +1,34 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/core": ["../../../dist/packages/core"],
+      "@angular/core/testing": ["../../../dist/packages/core/testing"],
+      "@angular/common": ["../../../dist/packages/common"],
+      "@angular/common/testing": ["../../../dist/packages/common/testing"],
+      "@angular/compiler": ["../../../dist/packages/compiler"],
+      "@angular/compiler/testing": ["../../../dist/packages/compiler/testing"],
+      "@angular/platform-browser": ["../../../dist/packages/platform-browser"],
+      "@angular/platform-browser/testing": ["../../../dist/packages/platform-browser/testing"],
+      "@angular/platform-browser-dynamic": ["../../../dist/packages/platform-browser-dynamic"]
+    },
+    "outDir": "../../../dist/packages/platform-browser-dynamic"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../../node_modules/@types/jasmine/index.d.ts",
+    "../../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "testing.js",
+    "flatModuleId": "@angular/platform-browser-dynamic/testing"
+  }
+}
diff --git a/packages/platform-browser-dynamic/tsconfig-build.json b/packages/platform-browser-dynamic/tsconfig-build.json
new file mode 100644
index 000000000000..27dabc973f1e
--- /dev/null
+++ b/packages/platform-browser-dynamic/tsconfig-build.json
@@ -0,0 +1,33 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/core/testing": ["../../dist/packages/core/testing"],
+      "@angular/common": ["../../dist/packages/common"],
+      "@angular/common/testing": ["../../dist/packages/common/testing"],
+      "@angular/compiler": ["../../dist/packages/compiler"],
+      "@angular/compiler/testing": ["../../dist/packages/compiler/testing"],
+      "@angular/platform-browser": ["../../dist/packages/platform-browser"],
+      "@angular/platform-browser/testing": ["../../dist/packages/platform-browser/testing"]
+    },
+    "outDir": "../../dist/packages/platform-browser-dynamic"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/@types/jasmine/index.d.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "platform-browser-dynamic.js",
+    "flatModuleId": "@angular/platform-browser-dynamic"
+  }
+}
diff --git a/packages/platform-browser/BUILD.bazel b/packages/platform-browser/BUILD.bazel
new file mode 100644
index 000000000000..e1c7384f9be1
--- /dev/null
+++ b/packages/platform-browser/BUILD.bazel
@@ -0,0 +1,39 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "platform-browser",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/platform-browser",
+    deps = [
+        "//packages:types",
+        "//packages/common",
+        "//packages/core",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "//packages/platform-browser/animations:package.json",
+        "//packages/platform-browser/testing:package.json",
+    ],
+    entry_point = "packages/platform-browser/index.js",
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "release-with-framework",
+    ],
+    deps = [
+        ":platform-browser",
+        "//packages/platform-browser/animations",
+        "//packages/platform-browser/testing",
+    ],
+)
diff --git a/packages/platform-browser/animations/BUILD.bazel b/packages/platform-browser/animations/BUILD.bazel
new file mode 100644
index 000000000000..efb6d4546917
--- /dev/null
+++ b/packages/platform-browser/animations/BUILD.bazel
@@ -0,0 +1,23 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "animations",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/platform-browser/animations",
+    deps = [
+        "//packages/animations",
+        "//packages/animations/browser",
+        "//packages/common",
+        "//packages/core",
+        "//packages/platform-browser",
+    ],
+)
diff --git a/packages/platform-browser/animations/index.ts b/packages/platform-browser/animations/index.ts
new file mode 100644
index 000000000000..969471c0986d
--- /dev/null
+++ b/packages/platform-browser/animations/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 verifcation. `ngc`
+// replaces this file with production index.ts when it rewrites private symbol
+// names.
+
+export * from './public_api';
diff --git a/packages/platform-browser/animations/package.json b/packages/platform-browser/animations/package.json
new file mode 100644
index 000000000000..8862a25b6fbe
--- /dev/null
+++ b/packages/platform-browser/animations/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@angular/platform-browser/animations",
+  "typings": "./animations.d.ts",
+  "main": "../bundles/platform-browser-animations.umd.js",
+  "module": "../fesm5/animations.js",
+  "es2015": "../fesm2015/animations.js",
+  "esm5": "../esm5/animations/animations.js",
+  "esm2015": "../esm2015/animations/animations.js",
+  "fesm5": "../fesm5/animations.js",
+  "fesm2015": "../fesm2015/animations.js",
+  "sideEffects": false
+}
diff --git a/packages/platform-browser/animations/public_api.ts b/packages/platform-browser/animations/public_api.ts
new file mode 100644
index 000000000000..3ebc27ff03b4
--- /dev/null
+++ b/packages/platform-browser/animations/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 this package.
+ */
+export * from './src/animations';
diff --git a/packages/platform-browser/animations/rollup.config.js b/packages/platform-browser/animations/rollup.config.js
new file mode 100644
index 000000000000..3faf53673873
--- /dev/null
+++ b/packages/platform-browser/animations/rollup.config.js
@@ -0,0 +1,30 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+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'
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/platform-browser/fesm5/animations.js',
+  dest: '../../../dist/packages-dist/platform-browser/bundles/platform-browser-animations.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/platform-browser/animations'},
+  moduleName: 'ng.platformBrowser.animations',
+  plugins: [resolve(), sourcemaps()],
+  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 000000000000..030fb70d0163
--- /dev/null
+++ b/packages/platform-browser/animations/src/animation_builder.ts
@@ -0,0 +1,100 @@
+/**
+ * @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 {Inject, Injectable, RendererFactory2, RendererType2, ViewEncapsulation} from '@angular/core';
+import {DOCUMENT} from '@angular/platform-browser';
+
+import {AnimationRenderer} from './animation_renderer';
+
+@Injectable()
+export class BrowserAnimationBuilder extends AnimationBuilder {
+  private _nextAnimationId = 0;
+  private _renderer: AnimationRenderer;
+
+  constructor(rootRenderer: RendererFactory2, @Inject(DOCUMENT) doc: any) {
+    super();
+    const typeData = {
+      id: '0',
+      encapsulation: ViewEncapsulation.None,
+      styles: [],
+      data: {animation: []}
+    } as RendererType2;
+    this._renderer = rootRenderer.createRenderer(doc.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
new file mode 100644
index 000000000000..bdaee22f97c0
--- /dev/null
+++ b/packages/platform-browser/animations/src/animation_renderer.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 {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;
+  private promise: Promise<any> = Promise.resolve(0);
+
+  constructor(
+      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 {
+    const EMPTY_NAMESPACE_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(
+            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() {
+    // always use promise to schedule microtask instead of use Zone
+    this.promise.then(() => { 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 BaseAnimationRenderer implements Renderer2 {
+  constructor(
+      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; }
+
+  destroyNode: ((n: any) => void)|null;
+
+  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) { return this.delegate.createComment(value); }
+
+  createText(value: string) { return this.delegate.createText(value); }
+
+  appendChild(parent: any, newChild: any): void {
+    this.delegate.appendChild(parent, newChild);
+    this.engine.onInsert(this.namespaceId, newChild, parent, false);
+  }
+
+  insertBefore(parent: any, newChild: any, refChild: any): void {
+    this.delegate.insertBefore(parent, newChild, refChild);
+    this.engine.onInsert(this.namespaceId, newChild, parent, true);
+  }
+
+  removeChild(parent: any, oldChild: any): void {
+    this.engine.onRemove(this.namespaceId, oldChild, this.delegate);
+  }
+
+  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|null|undefined): void {
+    this.delegate.removeAttribute(el, name, namespace);
+  }
+
+  addClass(el: any, name: string): void { this.delegate.addClass(el, name); }
+
+  removeClass(el: any, name: string): void { this.delegate.removeClass(el, name); }
+
+  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|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); }
+
+  listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void {
+    return this.delegate.listen(target, eventName, callback);
+  }
+
+  protected disableAnimations(element: any, value: boolean) {
+    this.engine.disableAnimations(element, value);
+  }
+}
+
+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) == ANIMATION_PREFIX) {
+      if (name.charAt(1) == '.' && name == DISABLE_ANIMATIONS_FLAG) {
+        value = value === undefined ? true : !!value;
+        this.disableAnimations(el, value as boolean);
+      } else {
+        this.engine.process(this.namespaceId, el, name.substr(1), value);
+      }
+    } else {
+      this.delegate.setProperty(el, name, value);
+    }
+  }
+
+  listen(target: 'window'|'document'|'body'|any, eventName: string, callback: (event: any) => any):
+      () => void {
+    if (eventName.charAt(0) == ANIMATION_PREFIX) {
+      const element = resolveElementFromTarget(target);
+      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);
+  }
+}
+
+function resolveElementFromTarget(target: 'window' | 'document' | 'body' | any): any {
+  switch (target) {
+    case 'body':
+      return document.body;
+    case 'document':
+      return document;
+    case 'window':
+      return window;
+    default:
+      return target;
+  }
+}
+
+function parseTriggerCallbackName(triggerName: string) {
+  const dotIndex = triggerName.indexOf('.');
+  const trigger = triggerName.substring(0, dotIndex);
+  const phase = triggerName.substr(dotIndex + 1);
+  return [trigger, phase];
+}
diff --git a/packages/platform-browser/animations/src/animations.ts b/packages/platform-browser/animations/src/animations.ts
new file mode 100644
index 000000000000..0d5692ad7ba9
--- /dev/null
+++ b/packages/platform-browser/animations/src/animations.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 animation APIs of the animation browser package.
+ */
+export {BrowserAnimationsModule, NoopAnimationsModule} from './module';
+
+export {ANIMATION_MODULE_TYPE} from './providers';
+
+export * from './private_export';
diff --git a/packages/platform-browser/animations/src/module.ts b/packages/platform-browser/animations/src/module.ts
new file mode 100644
index 000000000000..39ad025556a7
--- /dev/null
+++ b/packages/platform-browser/animations/src/module.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {BROWSER_ANIMATIONS_PROVIDERS, BROWSER_NOOP_ANIMATIONS_PROVIDERS} from './providers';
+
+/**
+ * @experimental Animation support is experimental.
+ */
+@NgModule({
+  exports: [BrowserModule],
+  providers: BROWSER_ANIMATIONS_PROVIDERS,
+})
+export class BrowserAnimationsModule {
+}
+
+/**
+ * @experimental Animation support is experimental.
+ */
+@NgModule({
+  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
new file mode 100644
index 000000000000..b37f0e7b9514
--- /dev/null
+++ b/packages/platform-browser/animations/src/private_export.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 {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
new file mode 100644
index 000000000000..4832287101e1
--- /dev/null
+++ b/packages/platform-browser/animations/src/providers.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 {AnimationBuilder} from '@angular/animations';
+import {AnimationDriver, ɵAnimationEngine as AnimationEngine, ɵAnimationStyleNormalizer as AnimationStyleNormalizer, ɵCssKeyframesDriver as CssKeyframesDriver, ɵNoopAnimationDriver as NoopAnimationDriver, ɵWebAnimationsDriver as WebAnimationsDriver, ɵWebAnimationsStyleNormalizer as WebAnimationsStyleNormalizer, ɵsupportsWebAnimations as supportsWebAnimations} from '@angular/animations/browser';
+import {DOCUMENT} from '@angular/common';
+import {Inject, Injectable, InjectionToken, 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 AnimationEngine {
+  constructor(
+      @Inject(DOCUMENT) doc: any, driver: AnimationDriver, normalizer: AnimationStyleNormalizer) {
+    super(doc.body, driver, normalizer);
+  }
+}
+
+export function instantiateSupportedAnimationDriver() {
+  return supportsWebAnimations() ? new WebAnimationsDriver() : new CssKeyframesDriver();
+}
+
+export function instantiateDefaultStyleNormalizer() {
+  return new WebAnimationsStyleNormalizer();
+}
+
+export function instantiateRendererFactory(
+    renderer: DomRendererFactory2, engine: AnimationEngine, zone: NgZone) {
+  return new AnimationRendererFactory(renderer, engine, zone);
+}
+
+/**
+ * @experimental Animation support is experimental.
+ */
+export const ANIMATION_MODULE_TYPE =
+    new InjectionToken<'NoopAnimations'|'BrowserAnimations'>('AnimationModuleType');
+
+const SHARED_ANIMATION_PROVIDERS: Provider[] = [
+  {provide: AnimationBuilder, useClass: BrowserAnimationBuilder},
+  {provide: AnimationStyleNormalizer, useFactory: instantiateDefaultStyleNormalizer},
+  {provide: AnimationEngine, useClass: InjectableAnimationEngine}, {
+    provide: RendererFactory2,
+    useFactory: instantiateRendererFactory,
+    deps: [DomRendererFactory2, AnimationEngine, NgZone]
+  }
+];
+
+/**
+ * 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},
+  {provide: ANIMATION_MODULE_TYPE, useValue: 'BrowserAnimations'}, ...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: AnimationDriver, useClass: NoopAnimationDriver},
+  {provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations'}, ...SHARED_ANIMATION_PROVIDERS
+];
diff --git a/packages/platform-browser/animations/test/noop_animations_module_spec.ts b/packages/platform-browser/animations/test/noop_animations_module_spec.ts
new file mode 100644
index 000000000000..bb9bb8f76aad
--- /dev/null
+++ b/packages/platform-browser/animations/test/noop_animations_module_spec.ts
@@ -0,0 +1,96 @@
+/**
+ * @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, style, transition, trigger} from '@angular/animations';
+import {ɵAnimationEngine} from '@angular/animations/browser';
+import {Component} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+
+import {NoopAnimationsModule} from '../src/module';
+
+{
+  describe('NoopAnimationsModule', () => {
+    beforeEach(() => { TestBed.configureTestingModule({imports: [NoopAnimationsModule]}); });
+
+    it('should flush and fire callbacks when the zone becomes stable', (async) => {
+      @Component({
+        selector: 'my-cmp',
+        template:
+            '<div [@myAnimation]="exp" (@myAnimation.start)="onStart($event)" (@myAnimation.done)="onDone($event)"></div>',
+        animations: [trigger(
+            'myAnimation',
+            [transition(
+                '* => state', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
+      })
+      class Cmp {
+        exp: any;
+        startEvent: any;
+        doneEvent: any;
+        onStart(event: any) { this.startEvent = event; }
+        onDone(event: any) { this.doneEvent = event; }
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+      cmp.exp = 'state';
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        expect(cmp.startEvent.triggerName).toEqual('myAnimation');
+        expect(cmp.startEvent.phaseName).toEqual('start');
+        expect(cmp.doneEvent.triggerName).toEqual('myAnimation');
+        expect(cmp.doneEvent.phaseName).toEqual('done');
+        async();
+      });
+    });
+
+    it('should handle leave animation callbacks even if the element is destroyed in the process',
+       (async) => {
+         @Component({
+           selector: 'my-cmp',
+           template:
+               '<div *ngIf="exp" @myAnimation (@myAnimation.start)="onStart($event)" (@myAnimation.done)="onDone($event)"></div>',
+           animations: [trigger(
+               'myAnimation',
+               [transition(
+                   ':leave', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
+         })
+         class Cmp {
+           exp: any;
+           startEvent: any;
+           doneEvent: any;
+           onStart(event: any) { this.startEvent = event; }
+           onDone(event: any) { this.doneEvent = event; }
+         }
+
+         TestBed.configureTestingModule({declarations: [Cmp]});
+         const engine = TestBed.get(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(Cmp);
+         const cmp = fixture.componentInstance;
+
+         cmp.exp = true;
+         fixture.detectChanges();
+         fixture.whenStable().then(() => {
+           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/animations/tsconfig-build.json b/packages/platform-browser/animations/tsconfig-build.json
new file mode 100644
index 000000000000..b0f35fcdd6ea
--- /dev/null
+++ b/packages/platform-browser/animations/tsconfig-build.json
@@ -0,0 +1,32 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "rxjs/*": ["../../../node_modules/rxjs/*"],
+      "@angular/common": ["../../../dist/packages/common"],
+      "@angular/core": ["../../../dist/packages/core"],
+      "@angular/core/testing": ["../../../dist/packages/core/testing"],
+      "@angular/animations": ["../../../dist/packages/animations"],
+      "@angular/animations/browser": ["../../../dist/packages/animations/browser"],
+      "@angular/platform-browser": ["../../../dist/packages/platform-browser"]
+    },
+    "outDir": "../../../dist/packages/platform-browser"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../../node_modules/zone.js/dist/zone.js.d.ts",
+    "../../system.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "animations.js",
+    "flatModuleId": "@angular/platform-browser/animations"
+  }
+}
diff --git a/packages/platform-browser/index.ts b/packages/platform-browser/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/platform-browser/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';
diff --git a/packages/platform-browser/package.json b/packages/platform-browser/package.json
new file mode 100644
index 000000000000..5af06e81b4fc
--- /dev/null
+++ b/packages/platform-browser/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@angular/platform-browser",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - library for using Angular in a web browser",
+  "main": "./bundles/platform-browser.umd.js",
+  "module": "./fesm5/platform-browser.js",
+  "es2015": "./fesm2015/platform-browser.js",
+  "esm5": "./esm5/platform-browser.js",
+  "esm2015": "./esm2015/platform-browser.js",
+  "fesm5": "./fesm5/platform-browser.js",
+  "fesm2015": "./fesm2015/platform-browser.js",
+  "typings": "./platform-browser.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/common": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/platform-browser/public_api.ts b/packages/platform-browser/public_api.ts
new file mode 100644
index 000000000000..2bc44797c2a0
--- /dev/null
+++ b/packages/platform-browser/public_api.ts
@@ -0,0 +1,15 @@
+/**
+ * @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 this package.
+ */
+export * from './src/platform-browser';
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/platform-browser/rollup.config.js b/packages/platform-browser/rollup.config.js
new file mode 100644
index 000000000000..af01efe10f5d
--- /dev/null
+++ b/packages/platform-browser/rollup.config.js
@@ -0,0 +1,27 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/platform-browser/fesm5/platform-browser.js',
+  dest: '../../dist/packages-dist/platform-browser/bundles/platform-browser.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/platform-browser'},
+  moduleName: 'ng.platformBrowser',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/platform-browser/src/browser.ts b/packages/platform-browser/src/browser.ts
new file mode 100644
index 000000000000..6da39369361e
--- /dev/null
+++ b/packages/platform-browser/src/browser.ts
@@ -0,0 +1,122 @@
+/**
+ * @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, PlatformLocation, ɵPLATFORM_BROWSER_ID as PLATFORM_BROWSER_ID} from '@angular/common';
+import {APP_ID, ApplicationModule, ErrorHandler, Inject, ModuleWithProviders, NgModule, NgZone, Optional, PLATFORM_ID, PLATFORM_INITIALIZER, PlatformRef, RendererFactory2, Sanitizer, SkipSelf, StaticProvider, Testability, createPlatformFactory, platformCore, ɵAPP_ROOT as APP_ROOT, ɵConsole as Console} from '@angular/core';
+
+import {BrowserDomAdapter} from './browser/browser_adapter';
+import {BrowserPlatformLocation} from './browser/location/browser_platform_location';
+import {SERVER_TRANSITION_PROVIDERS, TRANSITION_ID} from './browser/server-transition';
+import {BrowserGetTestability} from './browser/testability';
+import {ELEMENT_PROBE_PROVIDERS} from './dom/debug/ng_probe';
+import {DomRendererFactory2} from './dom/dom_renderer';
+import {DOCUMENT} from './dom/dom_tokens';
+import {DomEventsPlugin} from './dom/events/dom_events';
+import {EVENT_MANAGER_PLUGINS, EventManager} from './dom/events/event_manager';
+import {HAMMER_GESTURE_CONFIG, HAMMER_LOADER, HammerGestureConfig, HammerGesturesPlugin} from './dom/events/hammer_gestures';
+import {KeyEventsPlugin} from './dom/events/key_events';
+import {DomSharedStylesHost, SharedStylesHost} from './dom/shared_styles_host';
+import {DomSanitizer, DomSanitizerImpl} from './security/dom_sanitization_service';
+
+export const INTERNAL_BROWSER_PLATFORM_PROVIDERS: StaticProvider[] = [
+  {provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID},
+  {provide: PLATFORM_INITIALIZER, useValue: initDomAdapter, multi: true},
+  {provide: PlatformLocation, useClass: BrowserPlatformLocation, deps: [DOCUMENT]},
+  {provide: DOCUMENT, useFactory: _document, deps: []},
+];
+
+/**
+ * @security Replacing built-in sanitization providers exposes the application to XSS risks.
+ * Attacker-controlled data introduced by an unsanitized provider could expose your
+ * application to XSS risks. For more detail, see the [Security Guide](http://g.co/ng/security).
+ * @experimental
+ */
+export const BROWSER_SANITIZATION_PROVIDERS: StaticProvider[] = [
+  {provide: Sanitizer, useExisting: DomSanitizer},
+  {provide: DomSanitizer, useClass: DomSanitizerImpl, deps: [DOCUMENT]},
+];
+
+export const platformBrowser: (extraProviders?: StaticProvider[]) => PlatformRef =
+    createPlatformFactory(platformCore, 'browser', INTERNAL_BROWSER_PLATFORM_PROVIDERS);
+
+export function initDomAdapter() {
+  BrowserDomAdapter.makeCurrent();
+  BrowserGetTestability.init();
+}
+
+export function errorHandler(): ErrorHandler {
+  return new ErrorHandler();
+}
+
+export function _document(): any {
+  return document;
+}
+
+export const BROWSER_MODULE_PROVIDERS: StaticProvider[] = [
+  BROWSER_SANITIZATION_PROVIDERS,
+  {provide: APP_ROOT, useValue: true},
+  {provide: ErrorHandler, useFactory: errorHandler, deps: []},
+  {
+    provide: EVENT_MANAGER_PLUGINS,
+    useClass: DomEventsPlugin,
+    multi: true,
+    deps: [DOCUMENT, NgZone, PLATFORM_ID]
+  },
+  {provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true, deps: [DOCUMENT]},
+  {
+    provide: EVENT_MANAGER_PLUGINS,
+    useClass: HammerGesturesPlugin,
+    multi: true,
+    deps: [DOCUMENT, HAMMER_GESTURE_CONFIG, Console, [new Optional(), HAMMER_LOADER]]
+  },
+  {provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig, deps: []},
+  {
+    provide: DomRendererFactory2,
+    useClass: DomRendererFactory2,
+    deps: [EventManager, DomSharedStylesHost]
+  },
+  {provide: RendererFactory2, useExisting: DomRendererFactory2},
+  {provide: SharedStylesHost, useExisting: DomSharedStylesHost},
+  {provide: DomSharedStylesHost, useClass: DomSharedStylesHost, deps: [DOCUMENT]},
+  {provide: Testability, useClass: Testability, deps: [NgZone]},
+  {provide: EventManager, useClass: EventManager, deps: [EVENT_MANAGER_PLUGINS, NgZone]},
+  ELEMENT_PROBE_PROVIDERS,
+];
+
+/**
+ * The ng module for the browser.
+ *
+ *
+ */
+@NgModule({providers: BROWSER_MODULE_PROVIDERS, exports: [CommonModule, ApplicationModule]})
+export class BrowserModule {
+  constructor(@Optional() @SkipSelf() @Inject(BrowserModule) parentModule: BrowserModule|null) {
+    if (parentModule) {
+      throw new Error(
+          `BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.`);
+    }
+  }
+
+  /**
+   * Configures a browser-based application to transition from a server-rendered app, if
+   * one is present on the page. The specified parameters must include an application id,
+   * which must match between the client and server applications.
+   *
+   * @experimental
+   */
+  static withServerTransition(params: {appId: string}): ModuleWithProviders<BrowserModule> {
+    return {
+      ngModule: BrowserModule,
+      providers: [
+        {provide: APP_ID, useValue: params.appId},
+        {provide: TRANSITION_ID, useExisting: APP_ID},
+        SERVER_TRANSITION_PROVIDERS,
+      ],
+    };
+  }
+}
diff --git a/packages/platform-browser/src/browser/browser_adapter.ts b/packages/platform-browser/src/browser/browser_adapter.ts
new file mode 100644
index 000000000000..e11f9698225a
--- /dev/null
+++ b/packages/platform-browser/src/browser/browser_adapter.ts
@@ -0,0 +1,419 @@
+/**
+ * @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 as parseCookieValue} from '@angular/common';
+import {ɵglobal as global} from '@angular/core';
+
+import {setRootDomAdapter} from '../dom/dom_adapter';
+
+import {GenericBrowserDomAdapter} from './generic_browser_adapter';
+
+const _attrToPropMap = {
+  'class': 'className',
+  'innerHtml': 'innerHTML',
+  'readonly': 'readOnly',
+  'tabindex': 'tabIndex',
+};
+
+const DOM_KEY_LOCATION_NUMPAD = 3;
+
+// Map to convert some key or keyIdentifier values to what will be returned by getEventKey
+const _keyMap: {[k: string]: string} = {
+  // The following values are here for cross-browser compatibility and to match the W3C standard
+  // cf http://www.w3.org/TR/DOM-Level-3-Events-key/
+  '\b': 'Backspace',
+  '\t': 'Tab',
+  '\x7F': 'Delete',
+  '\x1B': 'Escape',
+  'Del': 'Delete',
+  'Esc': 'Escape',
+  'Left': 'ArrowLeft',
+  'Right': 'ArrowRight',
+  'Up': 'ArrowUp',
+  'Down': 'ArrowDown',
+  'Menu': 'ContextMenu',
+  'Scroll': 'ScrollLock',
+  'Win': 'OS'
+};
+
+// There is a bug in Chrome for numeric keypad keys:
+// https://code.google.com/p/chromium/issues/detail?id=155654
+// 1, 2, 3 ... are reported as A, B, C ...
+const _chromeNumKeyPadMap = {
+  'A': '1',
+  'B': '2',
+  'C': '3',
+  'D': '4',
+  'E': '5',
+  'F': '6',
+  'G': '7',
+  'H': '8',
+  'I': '9',
+  'J': '*',
+  'K': '+',
+  'M': '-',
+  'N': '.',
+  'O': '/',
+  '\x60': '0',
+  '\x90': 'NumLock'
+};
+
+let nodeContains: (a: any, b: any) => boolean;
+
+if (global['Node']) {
+  nodeContains = global['Node'].prototype.contains || function(node) {
+    return !!(this.compareDocumentPosition(node) & 16);
+  };
+}
+
+/**
+ * A `DomAdapter` powered by full browser DOM APIs.
+ *
+ * @security Tread carefully! Interacting with the DOM directly is dangerous and
+ * can introduce XSS risks.
+ */
+/* tslint:disable:requireParameterType no-console */
+export class BrowserDomAdapter extends GenericBrowserDomAdapter {
+  parse(templateHtml: string) { throw new Error('parse not implemented'); }
+  static makeCurrent() { setRootDomAdapter(new BrowserDomAdapter()); }
+  hasProperty(element: Node, name: string): boolean { return name in element; }
+  setProperty(el: Node, name: string, value: any) { (<any>el)[name] = value; }
+  getProperty(el: Node, name: string): any { return (<any>el)[name]; }
+  invoke(el: Node, methodName: string, args: any[]): any { (<any>el)[methodName](...args); }
+
+  // TODO(tbosch): move this into a separate environment class once we have it
+  logError(error: string): void {
+    if (window.console) {
+      if (console.error) {
+        console.error(error);
+      } else {
+        console.log(error);
+      }
+    }
+  }
+
+  log(error: string): void {
+    if (window.console) {
+      window.console.log && window.console.log(error);
+    }
+  }
+
+  logGroup(error: string): void {
+    if (window.console) {
+      window.console.group && window.console.group(error);
+    }
+  }
+
+  logGroupEnd(): void {
+    if (window.console) {
+      window.console.groupEnd && window.console.groupEnd();
+    }
+  }
+
+  get attrToPropMap(): any { return _attrToPropMap; }
+
+  contains(nodeA: any, nodeB: any): boolean { return nodeContains.call(nodeA, nodeB); }
+  querySelector(el: Element, selector: string): any { return el.querySelector(selector); }
+  querySelectorAll(el: any, selector: string): any[] { return el.querySelectorAll(selector); }
+  on(el: Node, evt: any, listener: any) { el.addEventListener(evt, listener, false); }
+  onAndCancel(el: Node, evt: any, listener: any): Function {
+    el.addEventListener(evt, listener, false);
+    // Needed to follow Dart's subscription semantic, until fix of
+    // https://code.google.com/p/dart/issues/detail?id=17406
+    return () => { el.removeEventListener(evt, listener, false); };
+  }
+  dispatchEvent(el: Node, evt: any) { el.dispatchEvent(evt); }
+  createMouseEvent(eventType: string): MouseEvent {
+    const evt: MouseEvent = this.getDefaultDocument().createEvent('MouseEvent');
+    evt.initEvent(eventType, true, true);
+    return evt;
+  }
+  createEvent(eventType: any): Event {
+    const evt: Event = this.getDefaultDocument().createEvent('Event');
+    evt.initEvent(eventType, true, true);
+    return evt;
+  }
+  preventDefault(evt: Event) {
+    evt.preventDefault();
+    evt.returnValue = false;
+  }
+  isPrevented(evt: Event): boolean {
+    return evt.defaultPrevented || evt.returnValue != null && !evt.returnValue;
+  }
+  getInnerHTML(el: HTMLElement): string { return el.innerHTML; }
+  getTemplateContent(el: Node): Node|null {
+    return 'content' in el && this.isTemplateElement(el) ? (<any>el).content : null;
+  }
+  getOuterHTML(el: HTMLElement): string { return el.outerHTML; }
+  nodeName(node: Node): string { return node.nodeName; }
+  nodeValue(node: Node): string|null { return node.nodeValue; }
+  type(node: HTMLInputElement): string { return node.type; }
+  content(node: Node): Node {
+    if (this.hasProperty(node, 'content')) {
+      return (<any>node).content;
+    } else {
+      return node;
+    }
+  }
+  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;
+    const res = new Array(childNodes.length);
+    for (let i = 0; i < childNodes.length; i++) {
+      res[i] = childNodes[i];
+    }
+    return res;
+  }
+  clearNodes(el: Node) {
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+  }
+  appendChild(el: Node, node: Node) { el.appendChild(node); }
+  removeChild(el: Node, node: Node) { el.removeChild(node); }
+  replaceChild(el: Node, newChild: Node, oldChild: Node) { el.replaceChild(newChild, oldChild); }
+  remove(node: Node): Node {
+    if (node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+    return node;
+  }
+  insertBefore(parent: Node, ref: Node, node: Node) { parent.insertBefore(node, ref); }
+  insertAllBefore(parent: Node, ref: Node, nodes: Node[]) {
+    nodes.forEach((n: any) => parent.insertBefore(n, ref));
+  }
+  insertAfter(parent: Node, ref: Node, node: any) { parent.insertBefore(node, ref.nextSibling); }
+  setInnerHTML(el: Element, value: string) { el.innerHTML = value; }
+  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; }
+  getChecked(el: any): boolean { return el.checked; }
+  setChecked(el: any, value: boolean) { el.checked = value; }
+  createComment(text: string): Comment { return this.getDefaultDocument().createComment(text); }
+  createTemplate(html: any): HTMLElement {
+    const t = this.getDefaultDocument().createElement('template');
+    t.innerHTML = html;
+    return t;
+  }
+  createElement(tagName: string, doc?: Document): HTMLElement {
+    doc = doc || this.getDefaultDocument();
+    return doc.createElement(tagName);
+  }
+  createElementNS(ns: string, tagName: string, doc?: Document): Element {
+    doc = doc || this.getDefaultDocument();
+    return doc.createElementNS(ns, tagName);
+  }
+  createTextNode(text: string, doc?: Document): Text {
+    doc = doc || this.getDefaultDocument();
+    return doc.createTextNode(text);
+  }
+  createScriptTag(attrName: string, attrValue: string, doc?: Document): HTMLScriptElement {
+    doc = doc || this.getDefaultDocument();
+    const el = <HTMLScriptElement>doc.createElement('SCRIPT');
+    el.setAttribute(attrName, attrValue);
+    return el;
+  }
+  createStyleElement(css: string, doc?: Document): HTMLStyleElement {
+    doc = doc || this.getDefaultDocument();
+    const style = <HTMLStyleElement>doc.createElement('style');
+    this.appendChild(style, this.createTextNode(css, doc));
+    return style;
+  }
+  createShadowRoot(el: HTMLElement): DocumentFragment { return (<any>el).createShadowRoot(); }
+  getShadowRoot(el: HTMLElement): DocumentFragment { return (<any>el).shadowRoot; }
+  getHost(el: HTMLElement): HTMLElement { return (<any>el).host; }
+  clone(node: Node): Node { return node.cloneNode(true); }
+  getElementsByClassName(element: any, name: string): HTMLElement[] {
+    return element.getElementsByClassName(name);
+  }
+  getElementsByTagName(element: any, name: string): HTMLElement[] {
+    return element.getElementsByTagName(name);
+  }
+  classList(element: any): any[] { return Array.prototype.slice.call(element.classList, 0); }
+  addClass(element: any, className: string) { element.classList.add(className); }
+  removeClass(element: any, className: string) { element.classList.remove(className); }
+  hasClass(element: any, className: string): boolean {
+    return element.classList.contains(className);
+  }
+  setStyle(element: any, styleName: string, styleValue: string) {
+    element.style[styleName] = styleValue;
+  }
+  removeStyle(element: any, stylename: string) {
+    // IE requires '' instead of null
+    // see https://github.com/angular/angular/issues/7916
+    element.style[stylename] = '';
+  }
+  getStyle(element: any, stylename: string): string { return element.style[stylename]; }
+  hasStyle(element: any, styleName: string, styleValue?: string|null): boolean {
+    const value = this.getStyle(element, styleName) || '';
+    return styleValue ? value == styleValue : value.length > 0;
+  }
+  tagName(element: any): string { return element.tagName; }
+  attributeMap(element: any): Map<string, string> {
+    const res = new Map<string, string>();
+    const elAttrs = element.attributes;
+    for (let i = 0; i < elAttrs.length; i++) {
+      const attrib = elAttrs.item(i);
+      res.set(attrib.name, attrib.value);
+    }
+    return res;
+  }
+  hasAttribute(element: Element, attribute: string): boolean {
+    return element.hasAttribute(attribute);
+  }
+  hasAttributeNS(element: Element, ns: string, attribute: string): boolean {
+    return element.hasAttributeNS(ns, attribute);
+  }
+  getAttribute(element: Element, attribute: string): string|null {
+    return element.getAttribute(attribute);
+  }
+  getAttributeNS(element: Element, ns: string, name: string): string {
+    return element.getAttributeNS(ns, name);
+  }
+  setAttribute(element: Element, name: string, value: string) { element.setAttribute(name, value); }
+  setAttributeNS(element: Element, ns: string, name: string, value: string) {
+    element.setAttributeNS(ns, name, value);
+  }
+  removeAttribute(element: Element, attribute: string) { element.removeAttribute(attribute); }
+  removeAttributeNS(element: Element, ns: string, name: string) {
+    element.removeAttributeNS(ns, name);
+  }
+  templateAwareRoot(el: Node): any { return this.isTemplateElement(el) ? this.content(el) : el; }
+  createHtmlDocument(): HTMLDocument {
+    return document.implementation.createHTMLDocument('fakeTitle');
+  }
+  getDefaultDocument(): Document { return document; }
+  getBoundingClientRect(el: Element): any {
+    try {
+      return el.getBoundingClientRect();
+    } catch (e) {
+      return {top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0};
+    }
+  }
+  getTitle(doc: Document): string { return doc.title; }
+  setTitle(doc: Document, newTitle: string) { doc.title = newTitle || ''; }
+  elementMatches(n: any, selector: string): boolean {
+    if (this.isElementNode(n)) {
+      return n.matches && n.matches(selector) ||
+          n.msMatchesSelector && n.msMatchesSelector(selector) ||
+          n.webkitMatchesSelector && n.webkitMatchesSelector(selector);
+    }
+
+    return false;
+  }
+  isTemplateElement(el: Node): boolean {
+    return this.isElementNode(el) && el.nodeName === 'TEMPLATE';
+  }
+  isTextNode(node: Node): boolean { return node.nodeType === Node.TEXT_NODE; }
+  isCommentNode(node: Node): boolean { return node.nodeType === Node.COMMENT_NODE; }
+  isElementNode(node: Node): boolean { return node.nodeType === Node.ELEMENT_NODE; }
+  hasShadowRoot(node: any): boolean {
+    return node.shadowRoot != null && node instanceof HTMLElement;
+  }
+  isShadowRoot(node: any): boolean { return node instanceof DocumentFragment; }
+  importIntoDoc(node: Node): any { return document.importNode(this.templateAwareRoot(node), true); }
+  adoptNode(node: Node): any { return document.adoptNode(node); }
+  getHref(el: Element): string { return el.getAttribute('href') !; }
+
+  getEventKey(event: any): string {
+    let key = event.key;
+    if (key == null) {
+      key = event.keyIdentifier;
+      // keyIdentifier is defined in the old draft of DOM Level 3 Events implemented by Chrome and
+      // Safari cf
+      // http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/events.html#Events-KeyboardEvents-Interfaces
+      if (key == null) {
+        return 'Unidentified';
+      }
+      if (key.startsWith('U+')) {
+        key = String.fromCharCode(parseInt(key.substring(2), 16));
+        if (event.location === DOM_KEY_LOCATION_NUMPAD && _chromeNumKeyPadMap.hasOwnProperty(key)) {
+          // There is a bug in Chrome for numeric keypad keys:
+          // https://code.google.com/p/chromium/issues/detail?id=155654
+          // 1, 2, 3 ... are reported as A, B, C ...
+          key = (_chromeNumKeyPadMap as any)[key];
+        }
+      }
+    }
+
+    return _keyMap[key] || key;
+  }
+  getGlobalEventTarget(doc: Document, target: string): EventTarget|null {
+    if (target === 'window') {
+      return window;
+    }
+    if (target === 'document') {
+      return doc;
+    }
+    if (target === 'body') {
+      return doc.body;
+    }
+    return null;
+  }
+  getHistory(): History { return window.history; }
+  getLocation(): Location { return window.location; }
+  getBaseHref(doc: Document): string|null {
+    const href = getBaseElementHref();
+    return href == null ? null : relativePath(href);
+  }
+  resetBaseElement(): void { baseElement = null; }
+  getUserAgent(): string { return window.navigator.userAgent; }
+  setData(element: Element, name: string, value: string) {
+    this.setAttribute(element, 'data-' + name, value);
+  }
+  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
+  supportsWebAnimation(): boolean {
+    return typeof(<any>Element).prototype['animate'] === 'function';
+  }
+  performanceNow(): number {
+    // performance.now() is not available in all browsers, see
+    // http://caniuse.com/#search=performance.now
+    return window.performance && window.performance.now ? window.performance.now() :
+                                                          new Date().getTime();
+  }
+
+  supportsCookies(): boolean { return true; }
+
+  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
+    // not clear other cookies.
+    document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
+  }
+}
+
+let baseElement: HTMLElement|null = null;
+function getBaseElementHref(): string|null {
+  if (!baseElement) {
+    baseElement = document.querySelector('base') !;
+    if (!baseElement) {
+      return null;
+    }
+  }
+  return baseElement.getAttribute('href');
+}
+
+// based on urlUtils.js in AngularJS 1
+let urlParsingNode: any;
+function relativePath(url: any): string {
+  if (!urlParsingNode) {
+    urlParsingNode = document.createElement('a');
+  }
+  urlParsingNode.setAttribute('href', url);
+  return (urlParsingNode.pathname.charAt(0) === '/') ? urlParsingNode.pathname :
+                                                       '/' + urlParsingNode.pathname;
+}
diff --git a/packages/platform-browser/src/browser/generic_browser_adapter.ts b/packages/platform-browser/src/browser/generic_browser_adapter.ts
new file mode 100644
index 000000000000..9e631917c985
--- /dev/null
+++ b/packages/platform-browser/src/browser/generic_browser_adapter.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 {DomAdapter} from '../dom/dom_adapter';
+
+
+
+/**
+ * Provides DOM operations in any browser environment.
+ *
+ * @security Tread carefully! Interacting with the DOM directly is dangerous and
+ * can introduce XSS risks.
+ */
+export abstract class GenericBrowserDomAdapter extends DomAdapter {
+  private _animationPrefix: string|null = null;
+  private _transitionEnd: string|null = null;
+  constructor() {
+    super();
+    try {
+      const element = this.createElement('div', document);
+      if (this.getStyle(element, 'animationName') != null) {
+        this._animationPrefix = '';
+      } else {
+        const domPrefixes = ['Webkit', 'Moz', 'O', 'ms'];
+
+        for (let i = 0; i < domPrefixes.length; i++) {
+          if (this.getStyle(element, domPrefixes[i] + 'AnimationName') != null) {
+            this._animationPrefix = '-' + domPrefixes[i].toLowerCase() + '-';
+            break;
+          }
+        }
+      }
+
+      const transEndEventNames: {[key: string]: string} = {
+        WebkitTransition: 'webkitTransitionEnd',
+        MozTransition: 'transitionend',
+        OTransition: 'oTransitionEnd otransitionend',
+        transition: 'transitionend'
+      };
+
+      Object.keys(transEndEventNames).forEach((key: string) => {
+        if (this.getStyle(element, key) != null) {
+          this._transitionEnd = transEndEventNames[key];
+        }
+      });
+    } catch (e) {
+      this._animationPrefix = null;
+      this._transitionEnd = null;
+    }
+  }
+
+  getDistributedNodes(el: HTMLElement): Node[] { return (<any>el).getDistributedNodes(); }
+  resolveAndSetHref(el: HTMLAnchorElement, baseUrl: string, href: string) {
+    el.href = href == null ? baseUrl : baseUrl + '/../' + href;
+  }
+  supportsDOMEvents(): boolean { return true; }
+  supportsNativeShadowDOM(): boolean {
+    return typeof(<any>document.body).createShadowRoot === 'function';
+  }
+  getAnimationPrefix(): string { return this._animationPrefix ? this._animationPrefix : ''; }
+  getTransitionEnd(): string { return this._transitionEnd ? this._transitionEnd : ''; }
+  supportsAnimation(): boolean {
+    return this._animationPrefix != null && this._transitionEnd != null;
+  }
+}
diff --git a/packages/platform-browser/src/browser/location/browser_platform_location.ts b/packages/platform-browser/src/browser/location/browser_platform_location.ts
new file mode 100644
index 000000000000..a9708b16b0c2
--- /dev/null
+++ b/packages/platform-browser/src/browser/location/browser_platform_location.ts
@@ -0,0 +1,77 @@
+/**
+ * @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 {LocationChangeListener, PlatformLocation} from '@angular/common';
+import {Inject, Injectable} from '@angular/core';
+
+import {getDOM} from '../../dom/dom_adapter';
+import {DOCUMENT} from '../../dom/dom_tokens';
+
+import {supportsState} from './history';
+
+
+
+/**
+ * `PlatformLocation` encapsulates all of the direct calls to platform APIs.
+ * This class should not be used directly by an application developer. Instead, use
+ * {@link Location}.
+ */
+@Injectable()
+export class BrowserPlatformLocation extends PlatformLocation {
+  // TODO(issue/24571): remove '!'.
+  public readonly location !: Location;
+  // TODO(issue/24571): remove '!'.
+  private _history !: History;
+
+  constructor(@Inject(DOCUMENT) private _doc: any) {
+    super();
+    this._init();
+  }
+
+  // This is moved to its own method so that `MockPlatformLocationStrategy` can overwrite it
+  /** @internal */
+  _init() {
+    (this as{location: Location}).location = getDOM().getLocation();
+    this._history = getDOM().getHistory();
+  }
+
+  getBaseHrefFromDOM(): string { return getDOM().getBaseHref(this._doc) !; }
+
+  onPopState(fn: LocationChangeListener): void {
+    getDOM().getGlobalEventTarget(this._doc, 'window').addEventListener('popstate', fn, false);
+  }
+
+  onHashChange(fn: LocationChangeListener): void {
+    getDOM().getGlobalEventTarget(this._doc, 'window').addEventListener('hashchange', fn, false);
+  }
+
+  get pathname(): string { return this.location.pathname; }
+  get search(): string { return this.location.search; }
+  get hash(): string { return this.location.hash; }
+  set pathname(newPath: string) { this.location.pathname = newPath; }
+
+  pushState(state: any, title: string, url: string): void {
+    if (supportsState()) {
+      this._history.pushState(state, title, url);
+    } else {
+      this.location.hash = url;
+    }
+  }
+
+  replaceState(state: any, title: string, url: string): void {
+    if (supportsState()) {
+      this._history.replaceState(state, title, url);
+    } else {
+      this.location.hash = url;
+    }
+  }
+
+  forward(): void { this._history.forward(); }
+
+  back(): void { this._history.back(); }
+}
diff --git a/packages/platform-browser/src/browser/location/history.ts b/packages/platform-browser/src/browser/location/history.ts
new file mode 100644
index 000000000000..b7b3f3f067d0
--- /dev/null
+++ b/packages/platform-browser/src/browser/location/history.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 function supportsState(): boolean {
+  return !!window.history.pushState;
+}
\ No newline at end of file
diff --git a/packages/platform-browser/src/browser/meta.ts b/packages/platform-browser/src/browser/meta.ts
new file mode 100644
index 000000000000..aacb96549804
--- /dev/null
+++ b/packages/platform-browser/src/browser/meta.ts
@@ -0,0 +1,124 @@
+/**
+ * @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, Injectable, inject} from '@angular/core';
+
+import {DomAdapter, getDOM} from '../dom/dom_adapter';
+import {DOCUMENT} from '../dom/dom_tokens';
+
+
+
+/**
+ * Represents a meta element.
+ *
+ * @experimental
+ */
+export type MetaDefinition = {
+  charset?: string; content?: string; httpEquiv?: string; id?: string; itemprop?: string;
+  name?: string;
+  property?: string;
+  scheme?: string;
+  url?: string;
+} &
+{
+  // TODO(IgorMinar): this type looks wrong
+  [prop: string]: string;
+};
+
+/**
+ * Factory to create Meta service.
+ */
+export function createMeta() {
+  return new Meta(inject(DOCUMENT));
+}
+
+/**
+ * A service that can be used to get and add meta tags.
+ *
+ * @experimental
+ */
+@Injectable({providedIn: 'root', useFactory: createMeta, deps: []})
+export class Meta {
+  private _dom: DomAdapter;
+  constructor(@Inject(DOCUMENT) private _doc: any) { this._dom = getDOM(); }
+
+  addTag(tag: MetaDefinition, forceCreation: boolean = false): HTMLMetaElement|null {
+    if (!tag) return null;
+    return this._getOrCreateElement(tag, forceCreation);
+  }
+
+  addTags(tags: MetaDefinition[], forceCreation: boolean = false): HTMLMetaElement[] {
+    if (!tags) return [];
+    return tags.reduce((result: HTMLMetaElement[], tag: MetaDefinition) => {
+      if (tag) {
+        result.push(this._getOrCreateElement(tag, forceCreation));
+      }
+      return result;
+    }, []);
+  }
+
+  getTag(attrSelector: string): HTMLMetaElement|null {
+    if (!attrSelector) return null;
+    return this._dom.querySelector(this._doc, `meta[${attrSelector}]`) || null;
+  }
+
+  getTags(attrSelector: string): HTMLMetaElement[] {
+    if (!attrSelector) return [];
+    const list /*NodeList*/ = this._dom.querySelectorAll(this._doc, `meta[${attrSelector}]`);
+    return list ? [].slice.call(list) : [];
+  }
+
+  updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement|null {
+    if (!tag) return null;
+    selector = selector || this._parseSelector(tag);
+    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) !); }
+
+  removeTagElement(meta: HTMLMetaElement): void {
+    if (meta) {
+      this._dom.remove(meta);
+    }
+  }
+
+  private _getOrCreateElement(meta: MetaDefinition, forceCreation: boolean = false):
+      HTMLMetaElement {
+    if (!forceCreation) {
+      const selector: string = this._parseSelector(meta);
+      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
+      if (elem && this._containsAttributes(meta, elem)) return elem;
+    }
+    const element: HTMLMetaElement = this._dom.createElement('meta') as HTMLMetaElement;
+    this._setMetaElementAttributes(meta, element);
+    const head = this._dom.getElementsByTagName(this._doc, 'head')[0];
+    this._dom.appendChild(head, element);
+    return element;
+  }
+
+  private _setMetaElementAttributes(tag: MetaDefinition, el: HTMLMetaElement): HTMLMetaElement {
+    Object.keys(tag).forEach((prop: string) => this._dom.setAttribute(el, prop, tag[prop]));
+    return el;
+  }
+
+  private _parseSelector(tag: MetaDefinition): string {
+    const attr: string = tag.name ? 'name' : 'property';
+    return `${attr}="${tag[attr]}"`;
+  }
+
+  private _containsAttributes(tag: MetaDefinition, elem: HTMLMetaElement): boolean {
+    return Object.keys(tag).every((key: string) => this._dom.getAttribute(elem, key) === tag[key]);
+  }
+}
diff --git a/packages/platform-browser/src/browser/server-transition.ts b/packages/platform-browser/src/browser/server-transition.ts
new file mode 100644
index 000000000000..fde6a705f771
--- /dev/null
+++ b/packages/platform-browser/src/browser/server-transition.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 {APP_INITIALIZER, ApplicationInitStatus, Inject, InjectionToken, Injector, StaticProvider} from '@angular/core';
+
+import {getDOM} from '../dom/dom_adapter';
+import {DOCUMENT} from '../dom/dom_tokens';
+
+/**
+ * An id that identifies a particular application being bootstrapped, that should
+ * match across the client/server boundary.
+ */
+export const TRANSITION_ID = new InjectionToken('TRANSITION_ID');
+
+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));
+    });
+  };
+}
+
+export const SERVER_TRANSITION_PROVIDERS: StaticProvider[] = [
+  {
+    provide: APP_INITIALIZER,
+    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
new file mode 100644
index 000000000000..c057ed03bb10
--- /dev/null
+++ b/packages/platform-browser/src/browser/testability.ts
@@ -0,0 +1,67 @@
+/**
+ * @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 {GetTestability, Testability, TestabilityRegistry, setTestabilityGetter, ɵglobal as global} from '@angular/core';
+
+import {getDOM} from '../dom/dom_adapter';
+
+export class BrowserGetTestability implements GetTestability {
+  static init() { setTestabilityGetter(new BrowserGetTestability()); }
+
+  addToWindow(registry: TestabilityRegistry): void {
+    global['getAngularTestability'] = (elem: any, findInAncestors: boolean = true) => {
+      const testability = registry.findTestabilityInTree(elem, findInAncestors);
+      if (testability == null) {
+        throw new Error('Could not find testability for element.');
+      }
+      return testability;
+    };
+
+    global['getAllAngularTestabilities'] = () => registry.getAllTestabilities();
+
+    global['getAllAngularRootElements'] = () => registry.getAllRootElements();
+
+    const whenAllStable = (callback: any /** TODO #9100 */) => {
+      const testabilities = global['getAllAngularTestabilities']();
+      let count = testabilities.length;
+      let didWork = false;
+      const decrement = function(didWork_: any /** TODO #9100 */) {
+        didWork = didWork || didWork_;
+        count--;
+        if (count == 0) {
+          callback(didWork);
+        }
+      };
+      testabilities.forEach(function(testability: any /** TODO #9100 */) {
+        testability.whenStable(decrement);
+      });
+    };
+
+    if (!global['frameworkStabilizers']) {
+      global['frameworkStabilizers'] = [];
+    }
+    global['frameworkStabilizers'].push(whenAllStable);
+  }
+
+  findTestabilityInTree(registry: TestabilityRegistry, elem: any, findInAncestors: boolean):
+      Testability|null {
+    if (elem == null) {
+      return null;
+    }
+    const t = registry.getTestability(elem);
+    if (t != null) {
+      return t;
+    } else if (!findInAncestors) {
+      return null;
+    }
+    if (getDOM().isShadowRoot(elem)) {
+      return this.findTestabilityInTree(registry, getDOM().getHost(elem), true);
+    }
+    return this.findTestabilityInTree(registry, getDOM().parentElement(elem), true);
+  }
+}
diff --git a/packages/platform-browser/src/browser/title.ts b/packages/platform-browser/src/browser/title.ts
new file mode 100644
index 000000000000..be4fe547a097
--- /dev/null
+++ b/packages/platform-browser/src/browser/title.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
+ */
+
+import {Inject, Injectable, inject} from '@angular/core';
+
+import {getDOM} from '../dom/dom_adapter';
+import {DOCUMENT} from '../dom/dom_tokens';
+
+/**
+ * Factory to create Title service.
+ */
+export function createTitle() {
+  return new Title(inject(DOCUMENT));
+}
+
+/**
+ * A service that can be used to get and set the title of a current HTML document.
+ *
+ * Since an Angular application can't be bootstrapped on the entire HTML document (`<html>` tag)
+ * it is not possible to bind to the `text` property of the `HTMLTitleElement` elements
+ * (representing the `<title>` tag). Instead, this service can be used to set and get the current
+ * title value.
+ *
+ * @experimental
+ */
+@Injectable({providedIn: 'root', useFactory: createTitle, deps: []})
+export class Title {
+  constructor(@Inject(DOCUMENT) private _doc: any) {}
+  /**
+   * Get the title of the current HTML document.
+   */
+  getTitle(): string { return getDOM().getTitle(this._doc); }
+
+  /**
+   * Set the title of the current HTML document.
+   * @param newTitle
+   */
+  setTitle(newTitle: string) { getDOM().setTitle(this._doc, newTitle); }
+}
diff --git a/packages/platform-browser/src/browser/tools/browser.ts b/packages/platform-browser/src/browser/tools/browser.ts
new file mode 100644
index 000000000000..2f233c470094
--- /dev/null
+++ b/packages/platform-browser/src/browser/tools/browser.ts
@@ -0,0 +1,10 @@
+/**
+ * @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 win = typeof window !== 'undefined' && window || <any>{};
+export {win as window};
diff --git a/packages/platform-browser/src/browser/tools/common_tools.ts b/packages/platform-browser/src/browser/tools/common_tools.ts
new file mode 100644
index 000000000000..f4f7d05894ee
--- /dev/null
+++ b/packages/platform-browser/src/browser/tools/common_tools.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 {ApplicationRef, ComponentRef} from '@angular/core';
+import {getDOM} from '../../dom/dom_adapter';
+import {window} from './browser';
+
+export class ChangeDetectionPerfRecord {
+  constructor(public msPerTick: number, public numTicks: number) {}
+}
+
+/**
+ * Entry point for all Angular profiling-related debug tools. This object
+ * corresponds to the `ng.profiler` in the dev console.
+ */
+export class AngularProfiler {
+  appRef: ApplicationRef;
+
+  constructor(ref: ComponentRef<any>) { this.appRef = ref.injector.get(ApplicationRef); }
+
+  // tslint:disable:no-console
+  /**
+   * Exercises change detection in a loop and then prints the average amount of
+   * time in milliseconds how long a single round of change detection takes for
+   * the current state of the UI. It runs a minimum of 5 rounds for a minimum
+   * of 500 milliseconds.
+   *
+   * Optionally, a user may pass a `config` parameter containing a map of
+   * options. Supported options are:
+   *
+   * `record` (boolean) - causes the profiler to record a CPU profile while
+   * it exercises the change detector. Example:
+   *
+   * ```
+   * ng.profiler.timeChangeDetection({record: true})
+   * ```
+   */
+  timeChangeDetection(config: any): ChangeDetectionPerfRecord {
+    const record = config && config['record'];
+    const profileName = 'Change Detection';
+    // Profiler is not available in Android browsers, nor in IE 9 without dev tools opened
+    const isProfilerAvailable = window.console.profile != null;
+    if (record && isProfilerAvailable) {
+      window.console.profile(profileName);
+    }
+    const start = getDOM().performanceNow();
+    let numTicks = 0;
+    while (numTicks < 5 || (getDOM().performanceNow() - start) < 500) {
+      this.appRef.tick();
+      numTicks++;
+    }
+    const end = getDOM().performanceNow();
+    if (record && isProfilerAvailable) {
+      // need to cast to <any> because type checker thinks there's no argument
+      // while in fact there is:
+      //
+      // https://developer.mozilla.org/en-US/docs/Web/API/Console/profileEnd
+      (<any>window.console.profileEnd)(profileName);
+    }
+    const msPerTick = (end - start) / numTicks;
+    window.console.log(`ran ${numTicks} change detection cycles`);
+    window.console.log(`${msPerTick.toFixed(2)} ms per check`);
+
+    return new ChangeDetectionPerfRecord(msPerTick, numTicks);
+  }
+}
diff --git a/packages/platform-browser/src/browser/tools/tools.ts b/packages/platform-browser/src/browser/tools/tools.ts
new file mode 100644
index 000000000000..1ebbbb14d9ce
--- /dev/null
+++ b/packages/platform-browser/src/browser/tools/tools.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {ComponentRef} from '@angular/core';
+import {exportNgVar} from '../../dom/util';
+import {AngularProfiler} from './common_tools';
+
+const PROFILER_GLOBAL_NAME = 'profiler';
+
+/**
+ * Enabled Angular debug tools that are accessible via your browser's
+ * developer console.
+ *
+ * Usage:
+ *
+ * 1. Open developer console (e.g. in Chrome Ctrl + Shift + j)
+ * 1. Type `ng.` (usually the console will show auto-complete suggestion)
+ * 1. Try the change detection profiler `ng.profiler.timeChangeDetection()`
+ *    then hit Enter.
+ *
+ * @experimental All debugging apis are currently experimental.
+ */
+export function enableDebugTools<T>(ref: ComponentRef<T>): ComponentRef<T> {
+  exportNgVar(PROFILER_GLOBAL_NAME, new AngularProfiler(ref));
+  return ref;
+}
+
+/**
+ * Disables Angular tools.
+ *
+ * @experimental All debugging apis are currently experimental.
+ */
+export function disableDebugTools(): void {
+  exportNgVar(PROFILER_GLOBAL_NAME, null);
+}
diff --git a/packages/platform-browser/src/browser/transfer_state.ts b/packages/platform-browser/src/browser/transfer_state.ts
new file mode 100644
index 000000000000..4a765961b80e
--- /dev/null
+++ b/packages/platform-browser/src/browser/transfer_state.ts
@@ -0,0 +1,165 @@
+/**
+ * @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 {APP_ID, Injectable, NgModule} from '@angular/core';
+import {DOCUMENT} from '../dom/dom_tokens';
+
+export function escapeHtml(text: string): string {
+  const escapedText: {[k: string]: string} = {
+    '&': '&a;',
+    '"': '&q;',
+    '\'': '&s;',
+    '<': '&l;',
+    '>': '&g;',
+  };
+  return text.replace(/[&"'<>]/g, s => escapedText[s]);
+}
+
+export function unescapeHtml(text: string): string {
+  const unescapedText: {[k: string]: string} = {
+    '&a;': '&',
+    '&q;': '"',
+    '&s;': '\'',
+    '&l;': '<',
+    '&g;': '>',
+  };
+  return text.replace(/&[^;]+;/g, s => unescapedText[s]);
+}
+
+/**
+ * A type-safe key to use with `TransferState`.
+ *
+ * Example:
+ *
+ * ```
+ * const COUNTER_KEY = makeStateKey<number>('counter');
+ * let value = 10;
+ *
+ * transferState.set(COUNTER_KEY, value);
+ * ```
+ *
+ * @experimental
+ */
+export type StateKey<T> = string & {__not_a_string: never};
+
+/**
+ * Create a `StateKey<T>` that can be used to store value of type T with `TransferState`.
+ *
+ * Example:
+ *
+ * ```
+ * const COUNTER_KEY = makeStateKey<number>('counter');
+ * let value = 10;
+ *
+ * transferState.set(COUNTER_KEY, value);
+ * ```
+ *
+ * @experimental
+ */
+export function makeStateKey<T = void>(key: string): StateKey<T> {
+  return key as StateKey<T>;
+}
+
+/**
+ * A key value store that is transferred from the application on the server side to the application
+ * on the client side.
+ *
+ * `TransferState` will be available as an injectable token. To use it import
+ * `ServerTransferStateModule` on the server and `BrowserTransferStateModule` on the client.
+ *
+ * The values in the store are serialized/deserialized using JSON.stringify/JSON.parse. So only
+ * boolean, number, string, null and non-class objects will be serialized and deserialzied in a
+ * non-lossy manner.
+ *
+ * @experimental
+ */
+@Injectable()
+export class TransferState {
+  private store: {[k: string]: {} | undefined} = {};
+  private onSerializeCallbacks: {[k: string]: () => {} | undefined} = {};
+
+  /** @internal */
+  static init(initState: {}) {
+    const transferState = new TransferState();
+    transferState.store = initState;
+    return transferState;
+  }
+
+  /**
+   * Get the value corresponding to a key. Return `defaultValue` if key is not found.
+   */
+  get<T>(key: StateKey<T>, defaultValue: T): T {
+    return this.store[key] !== undefined ? this.store[key] as T : defaultValue;
+  }
+
+  /**
+   * Set the value corresponding to a key.
+   */
+  set<T>(key: StateKey<T>, value: T): void { this.store[key] = value; }
+
+  /**
+   * Remove a key from the store.
+   */
+  remove<T>(key: StateKey<T>): void { delete this.store[key]; }
+
+  /**
+   * Test whether a key exists in the store.
+   */
+  hasKey<T>(key: StateKey<T>) { return this.store.hasOwnProperty(key); }
+
+  /**
+   * Register a callback to provide the value for a key when `toJson` is called.
+   */
+  onSerialize<T>(key: StateKey<T>, callback: () => T): void {
+    this.onSerializeCallbacks[key] = callback;
+  }
+
+  /**
+   * Serialize the current state of the store to JSON.
+   */
+  toJson(): string {
+    // Call the onSerialize callbacks and put those values into the store.
+    for (const key in this.onSerializeCallbacks) {
+      if (this.onSerializeCallbacks.hasOwnProperty(key)) {
+        try {
+          this.store[key] = this.onSerializeCallbacks[key]();
+        } catch (e) {
+          console.warn('Exception in onSerialize callback: ', e);
+        }
+      }
+    }
+    return JSON.stringify(this.store);
+  }
+}
+
+export function initTransferState(doc: Document, appId: string) {
+  // Locate the script tag with the JSON data transferred from the server.
+  // The id of the script tag is set to the Angular appId + 'state'.
+  const script = doc.getElementById(appId + '-state');
+  let initialState = {};
+  if (script && script.textContent) {
+    try {
+      initialState = JSON.parse(unescapeHtml(script.textContent));
+    } catch (e) {
+      console.warn('Exception while restoring TransferState for app ' + appId, e);
+    }
+  }
+  return TransferState.init(initialState);
+}
+
+/**
+ * NgModule to install on the client side while using the `TransferState` to transfer state from
+ * server to client.
+ *
+ * @experimental
+ */
+@NgModule({
+  providers: [{provide: TransferState, useFactory: initTransferState, deps: [DOCUMENT, APP_ID]}],
+})
+export class BrowserTransferStateModule {
+}
diff --git a/packages/platform-browser/src/dom/debug/by.ts b/packages/platform-browser/src/dom/debug/by.ts
new file mode 100644
index 000000000000..866885c44a2a
--- /dev/null
+++ b/packages/platform-browser/src/dom/debug/by.ts
@@ -0,0 +1,54 @@
+/**
+ * @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 {DebugElement, Predicate, Type} from '@angular/core';
+import {getDOM} from '../../dom/dom_adapter';
+
+
+
+/**
+ * Predicates for use with {@link DebugElement}'s query functions.
+ *
+ * @experimental All debugging apis are currently experimental.
+ */
+export class By {
+  /**
+   * Match all elements.
+   *
+   * ## Example
+   *
+   * {@example platform-browser/dom/debug/ts/by/by.ts region='by_all'}
+   */
+  static all(): Predicate<DebugElement> { return (debugElement) => true; }
+
+  /**
+   * Match elements by the given CSS selector.
+   *
+   * ## Example
+   *
+   * {@example platform-browser/dom/debug/ts/by/by.ts region='by_css'}
+   */
+  static css(selector: string): Predicate<DebugElement> {
+    return (debugElement) => {
+      return debugElement.nativeElement != null ?
+          getDOM().elementMatches(debugElement.nativeElement, selector) :
+          false;
+    };
+  }
+
+  /**
+   * Match elements that have the given directive present.
+   *
+   * ## Example
+   *
+   * {@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;
+  }
+}
diff --git a/packages/platform-browser/src/dom/debug/ng_probe.ts b/packages/platform-browser/src/dom/debug/ng_probe.ts
new file mode 100644
index 000000000000..fff61b86adb2
--- /dev/null
+++ b/packages/platform-browser/src/dom/debug/ng_probe.ts
@@ -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
+ */
+
+import * as core from '@angular/core';
+import {exportNgVar} from '../util';
+
+const CORE_TOKENS = {
+  'ApplicationRef': core.ApplicationRef,
+  'NgZone': core.NgZone,
+};
+
+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|null {
+  return core.getDebugNode(element);
+}
+
+export function _createNgProbe(coreTokens: core.NgProbeToken[]): any {
+  exportNgVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
+  exportNgVar(CORE_TOKENS_GLOBAL_NAME, {...CORE_TOKENS, ..._ngProbeTokensToMap(coreTokens || [])});
+  return () => inspectNativeElement;
+}
+
+function _ngProbeTokensToMap(tokens: core.NgProbeToken[]): {[name: string]: any} {
+  return tokens.reduce((prev: any, t: any) => (prev[t.name] = t.token, prev), {});
+}
+
+/**
+ * Providers which support debugging Angular applications (e.g. via `ng.probe`).
+ */
+export const ELEMENT_PROBE_PROVIDERS: core.Provider[] = [
+  {
+    provide: core.APP_INITIALIZER,
+    useFactory: _createNgProbe,
+    deps: [
+      [core.NgProbeToken, new core.Optional()],
+    ],
+    multi: true,
+  },
+];
diff --git a/packages/platform-browser/src/dom/dom_adapter.ts b/packages/platform-browser/src/dom/dom_adapter.ts
new file mode 100644
index 000000000000..5057f6dfbb46
--- /dev/null
+++ b/packages/platform-browser/src/dom/dom_adapter.ts
@@ -0,0 +1,165 @@
+/**
+ * @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 {Type} from '@angular/core';
+
+let _DOM: DomAdapter = null !;
+
+export function getDOM() {
+  return _DOM;
+}
+
+export function setDOM(adapter: DomAdapter) {
+  _DOM = adapter;
+}
+
+export function setRootDomAdapter(adapter: DomAdapter) {
+  if (!_DOM) {
+    _DOM = adapter;
+  }
+}
+
+/* tslint:disable:requireParameterType */
+/**
+ * Provides DOM operations in an environment-agnostic way.
+ *
+ * @security Tread carefully! Interacting with the DOM directly is dangerous and
+ * can introduce XSS risks.
+ */
+export abstract class DomAdapter {
+  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;
+  abstract invoke(el: Element, methodName: string, args: any[]): any;
+
+  abstract logError(error: any): any;
+  abstract log(error: any): any;
+  abstract logGroup(error: any): any;
+  abstract logGroupEnd(): any;
+
+  /**
+   * Maps attribute names to their corresponding property names for cases
+   * where attribute name doesn't match property name.
+   */
+  get attrToPropMap(): {[key: string]: string} { return this._attrToPropMap; }
+  set attrToPropMap(value: {[key: string]: string}) { this._attrToPropMap = value; }
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _attrToPropMap !: {[key: string]: string};
+
+  abstract contains(nodeA: any, nodeB: any): boolean;
+  abstract parse(templateHtml: string): any;
+  abstract querySelector(el: any, selector: string): any;
+  abstract querySelectorAll(el: any, selector: string): any[];
+  abstract on(el: any, evt: any, listener: any): any;
+  abstract onAndCancel(el: any, evt: any, listener: any): Function;
+  abstract dispatchEvent(el: any, evt: any): any;
+  abstract createMouseEvent(eventType: any): any;
+  abstract createEvent(eventType: string): any;
+  abstract preventDefault(evt: any): any;
+  abstract isPrevented(evt: any): boolean;
+  abstract getInnerHTML(el: any): string;
+  /** Returns content if el is a <template> element, null otherwise. */
+  abstract getTemplateContent(el: any): any;
+  abstract getOuterHTML(el: any): string;
+  abstract nodeName(node: any): string;
+  abstract nodeValue(node: any): string|null;
+  abstract type(node: any): string;
+  abstract content(node: any): any;
+  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;
+  abstract appendChild(el: any, node: any): any;
+  abstract removeChild(el: any, node: any): any;
+  abstract replaceChild(el: any, newNode: any, oldNode: any): any;
+  abstract remove(el: any): Node;
+  abstract insertBefore(parent: any, ref: any, node: any): any;
+  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|null;
+  abstract setText(el: any, value: string): any;
+  abstract getValue(el: any): string;
+  abstract setValue(el: any, value: string): any;
+  abstract getChecked(el: any): boolean;
+  abstract setChecked(el: any, value: boolean): any;
+  abstract createComment(text: string): any;
+  abstract createTemplate(html: any): HTMLElement;
+  abstract createElement(tagName: any, doc?: any): HTMLElement;
+  abstract createElementNS(ns: string, tagName: string, doc?: any): Element;
+  abstract createTextNode(text: string, doc?: any): Text;
+  abstract createScriptTag(attrName: string, attrValue: string, doc?: any): HTMLElement;
+  abstract createStyleElement(css: string, doc?: any): HTMLStyleElement;
+  abstract createShadowRoot(el: any): any;
+  abstract getShadowRoot(el: any): any;
+  abstract getHost(el: any): any;
+  abstract getDistributedNodes(el: any): Node[];
+  abstract clone /*<T extends Node>*/ (node: Node /*T*/): Node /*T*/;
+  abstract getElementsByClassName(element: any, name: string): HTMLElement[];
+  abstract getElementsByTagName(element: any, name: string): HTMLElement[];
+  abstract classList(element: any): any[];
+  abstract addClass(element: any, className: string): any;
+  abstract removeClass(element: any, className: string): any;
+  abstract hasClass(element: any, className: string): boolean;
+  abstract setStyle(element: any, styleName: string, styleValue: string): any;
+  abstract removeStyle(element: any, styleName: string): any;
+  abstract getStyle(element: any, styleName: string): string;
+  abstract hasStyle(element: any, styleName: string, styleValue?: string): boolean;
+  abstract tagName(element: any): string;
+  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|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;
+  abstract removeAttribute(element: any, attribute: string): any;
+  abstract removeAttributeNS(element: any, ns: string, attribute: string): any;
+  abstract templateAwareRoot(el: any): any;
+  abstract createHtmlDocument(): HTMLDocument;
+  abstract getDefaultDocument(): Document;
+  abstract getBoundingClientRect(el: any): any;
+  abstract getTitle(doc: Document): string;
+  abstract setTitle(doc: Document, newTitle: string): any;
+  abstract elementMatches(n: any, selector: string): boolean;
+  abstract isTemplateElement(el: any): boolean;
+  abstract isTextNode(node: any): boolean;
+  abstract isCommentNode(node: any): boolean;
+  abstract isElementNode(node: any): boolean;
+  abstract hasShadowRoot(node: any): boolean;
+  abstract isShadowRoot(node: any): boolean;
+  abstract importIntoDoc /*<T extends Node>*/ (node: Node /*T*/): Node /*T*/;
+  abstract adoptNode /*<T extends Node>*/ (node: Node /*T*/): Node /*T*/;
+  abstract getHref(element: any): string;
+  abstract getEventKey(event: any): string;
+  abstract resolveAndSetHref(element: any, baseUrl: string, href: string): any;
+  abstract supportsDOMEvents(): boolean;
+  abstract supportsNativeShadowDOM(): boolean;
+  abstract getGlobalEventTarget(doc: Document, target: string): any;
+  abstract getHistory(): History;
+  abstract getLocation(): Location;
+  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|null;
+  abstract supportsWebAnimation(): boolean;
+  abstract performanceNow(): number;
+  abstract getAnimationPrefix(): string;
+  abstract getTransitionEnd(): string;
+  abstract supportsAnimation(): boolean;
+
+  abstract supportsCookies(): boolean;
+  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
new file mode 100644
index 000000000000..9b583692ce8a
--- /dev/null
+++ b/packages/platform-browser/src/dom/dom_renderer.ts
@@ -0,0 +1,290 @@
+/**
+ * @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, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, ViewEncapsulation} from '@angular/core';
+
+import {EventManager} from './events/event_manager';
+import {DomSharedStylesHost} from './shared_styles_host';
+
+export const NAMESPACE_URIS: {[ns: string]: string} = {
+  'svg': 'http://www.w3.org/2000/svg',
+  'xhtml': 'http://www.w3.org/1999/xhtml',
+  'xlink': 'http://www.w3.org/1999/xlink',
+  'xml': 'http://www.w3.org/XML/1998/namespace',
+  'xmlns': 'http://www.w3.org/2000/xmlns/',
+};
+
+const COMPONENT_REGEX = /%COMP%/g;
+export const COMPONENT_VARIABLE = '%COMP%';
+export const HOST_ATTR = `_nghost-${COMPONENT_VARIABLE}`;
+export const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;
+
+export function shimContentAttribute(componentShortId: string): string {
+  return CONTENT_ATTR.replace(COMPONENT_REGEX, componentShortId);
+}
+
+export function shimHostAttribute(componentShortId: string): string {
+  return HOST_ATTR.replace(COMPONENT_REGEX, componentShortId);
+}
+
+export function flattenStyles(
+    compId: string, styles: Array<any|any[]>, target: string[]): string[] {
+  for (let i = 0; i < styles.length; i++) {
+    let style = styles[i];
+
+    if (Array.isArray(style)) {
+      flattenStyles(compId, style, target);
+    } else {
+      style = style.replace(COMPONENT_REGEX, compId);
+      target.push(style);
+    }
+  }
+  return target;
+}
+
+function decoratePreventDefault(eventHandler: Function): Function {
+  return (event: any) => {
+    const allowDefaultBehavior = eventHandler(event);
+    if (allowDefaultBehavior === false) {
+      // TODO(tbosch): move preventDefault into event plugins...
+      event.preventDefault();
+      event.returnValue = false;
+    }
+  };
+}
+
+@Injectable()
+export class DomRendererFactory2 implements RendererFactory2 {
+  private rendererByCompId = new Map<string, Renderer2>();
+  private defaultRenderer: Renderer2;
+
+  constructor(private eventManager: EventManager, private sharedStylesHost: DomSharedStylesHost) {
+    this.defaultRenderer = new DefaultDomRenderer2(eventManager);
+  }
+
+  createRenderer(element: any, type: RendererType2|null): Renderer2 {
+    if (!element || !type) {
+      return this.defaultRenderer;
+    }
+    switch (type.encapsulation) {
+      case ViewEncapsulation.Emulated: {
+        let renderer = this.rendererByCompId.get(type.id);
+        if (!renderer) {
+          renderer =
+              new EmulatedEncapsulationDomRenderer2(this.eventManager, this.sharedStylesHost, type);
+          this.rendererByCompId.set(type.id, renderer);
+        }
+        (<EmulatedEncapsulationDomRenderer2>renderer).applyToHost(element);
+        return renderer;
+      }
+      case ViewEncapsulation.Native:
+      case ViewEncapsulation.ShadowDom:
+        return new ShadowDomRenderer(this.eventManager, this.sharedStylesHost, element, type);
+      default: {
+        if (!this.rendererByCompId.has(type.id)) {
+          const styles = flattenStyles(type.id, type.styles, []);
+          this.sharedStylesHost.addStyles(styles);
+          this.rendererByCompId.set(type.id, this.defaultRenderer);
+        }
+        return this.defaultRenderer;
+      }
+    }
+  }
+
+  begin() {}
+  end() {}
+}
+
+class DefaultDomRenderer2 implements Renderer2 {
+  data: {[key: string]: any} = Object.create(null);
+
+  constructor(private eventManager: EventManager) {}
+
+  destroy(): void {}
+
+  destroyNode: null;
+
+  createElement(name: string, namespace?: string): any {
+    if (namespace) {
+      return document.createElementNS(NAMESPACE_URIS[namespace], name);
+    }
+
+    return document.createElement(name);
+  }
+
+  createComment(value: string): any { return document.createComment(value); }
+
+  createText(value: string): any { return document.createTextNode(value); }
+
+  appendChild(parent: any, newChild: any): void { parent.appendChild(newChild); }
+
+  insertBefore(parent: any, newChild: any, refChild: any): void {
+    if (parent) {
+      parent.insertBefore(newChild, refChild);
+    }
+  }
+
+  removeChild(parent: any, oldChild: any): void {
+    if (parent) {
+      parent.removeChild(oldChild);
+    }
+  }
+
+  selectRootElement(selectorOrNode: string|any): any {
+    let el: any = typeof selectorOrNode === 'string' ? document.querySelector(selectorOrNode) :
+                                                       selectorOrNode;
+    if (!el) {
+      throw new Error(`The selector "${selectorOrNode}" did not match any elements`);
+    }
+    el.textContent = '';
+    return el;
+  }
+
+  parentNode(node: any): any { return node.parentNode; }
+
+  nextSibling(node: any): any { return node.nextSibling; }
+
+  setAttribute(el: any, name: string, value: string, namespace?: string): void {
+    if (namespace) {
+      name = `${namespace}:${name}`;
+      const namespaceUri = NAMESPACE_URIS[namespace];
+      if (namespaceUri) {
+        el.setAttributeNS(namespaceUri, name, value);
+      } else {
+        el.setAttribute(name, value);
+      }
+    } else {
+      el.setAttribute(name, value);
+    }
+  }
+
+  removeAttribute(el: any, name: string, namespace?: string): void {
+    if (namespace) {
+      const namespaceUri = NAMESPACE_URIS[namespace];
+      if (namespaceUri) {
+        el.removeAttributeNS(namespaceUri, name);
+      } else {
+        el.removeAttribute(`${namespace}:${name}`);
+      }
+    } else {
+      el.removeAttribute(name);
+    }
+  }
+
+  addClass(el: any, name: string): void { el.classList.add(name); }
+
+  removeClass(el: any, name: string): void { el.classList.remove(name); }
+
+  setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
+    if (flags & RendererStyleFlags2.DashCase) {
+      el.style.setProperty(
+          style, value, !!(flags & RendererStyleFlags2.Important) ? 'important' : '');
+    } else {
+      el.style[style] = value;
+    }
+  }
+
+  removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
+    if (flags & RendererStyleFlags2.DashCase) {
+      el.style.removeProperty(style);
+    } else {
+      // IE requires '' instead of null
+      // see https://github.com/angular/angular/issues/7916
+      el.style[style] = '';
+    }
+  }
+
+  setProperty(el: any, name: string, value: any): void {
+    checkNoSyntheticProp(name, 'property');
+    el[name] = value;
+  }
+
+  setValue(node: any, value: string): void { node.nodeValue = value; }
+
+  listen(target: 'window'|'document'|'body'|any, event: string, callback: (event: any) => boolean):
+      () => void {
+    checkNoSyntheticProp(event, 'listener');
+    if (typeof target === 'string') {
+      return <() => void>this.eventManager.addGlobalEventListener(
+          target, event, decoratePreventDefault(callback));
+    }
+    return <() => void>this.eventManager.addEventListener(
+               target, event, decoratePreventDefault(callback)) as() => void;
+  }
+}
+
+const AT_CHARCODE = '@'.charCodeAt(0);
+function checkNoSyntheticProp(name: string, nameKind: string) {
+  if (name.charCodeAt(0) === AT_CHARCODE) {
+    throw new Error(
+        `Found the synthetic ${nameKind} ${name}. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.`);
+  }
+}
+
+class EmulatedEncapsulationDomRenderer2 extends DefaultDomRenderer2 {
+  private contentAttr: string;
+  private hostAttr: string;
+
+  constructor(
+      eventManager: EventManager, sharedStylesHost: DomSharedStylesHost,
+      private component: RendererType2) {
+    super(eventManager);
+    const styles = flattenStyles(component.id, component.styles, []);
+    sharedStylesHost.addStyles(styles);
+
+    this.contentAttr = shimContentAttribute(component.id);
+    this.hostAttr = shimHostAttribute(component.id);
+  }
+
+  applyToHost(element: any) { super.setAttribute(element, this.hostAttr, ''); }
+
+  createElement(parent: any, name: string): Element {
+    const el = super.createElement(parent, name);
+    super.setAttribute(el, this.contentAttr, '');
+    return el;
+  }
+}
+
+class ShadowDomRenderer extends DefaultDomRenderer2 {
+  private shadowRoot: any;
+
+  constructor(
+      eventManager: EventManager, private sharedStylesHost: DomSharedStylesHost,
+      private hostEl: any, private component: RendererType2) {
+    super(eventManager);
+    if (component.encapsulation === ViewEncapsulation.ShadowDom) {
+      this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});
+    } else {
+      this.shadowRoot = (hostEl as any).createShadowRoot();
+    }
+    this.sharedStylesHost.addHost(this.shadowRoot);
+    const styles = flattenStyles(component.id, component.styles, []);
+    for (let i = 0; i < styles.length; i++) {
+      const styleEl = document.createElement('style');
+      styleEl.textContent = styles[i];
+      this.shadowRoot.appendChild(styleEl);
+    }
+  }
+
+  private nodeOrShadowRoot(node: any): any { return node === this.hostEl ? this.shadowRoot : node; }
+
+  destroy() { this.sharedStylesHost.removeHost(this.shadowRoot); }
+
+  appendChild(parent: any, newChild: any): void {
+    return super.appendChild(this.nodeOrShadowRoot(parent), newChild);
+  }
+  insertBefore(parent: any, newChild: any, refChild: any): void {
+    return super.insertBefore(this.nodeOrShadowRoot(parent), newChild, refChild);
+  }
+  removeChild(parent: any, oldChild: any): void {
+    return super.removeChild(this.nodeOrShadowRoot(parent), oldChild);
+  }
+  parentNode(node: any): any {
+    return this.nodeOrShadowRoot(super.parentNode(this.nodeOrShadowRoot(node)));
+  }
+}
diff --git a/packages/platform-browser/src/dom/dom_tokens.ts b/packages/platform-browser/src/dom/dom_tokens.ts
new file mode 100644
index 000000000000..aa05acce33ad
--- /dev/null
+++ b/packages/platform-browser/src/dom/dom_tokens.ts
@@ -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
+ */
+
+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).
+ *
+ * @deprecated import from `@angular/common` instead.
+ */
+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
new file mode 100644
index 000000000000..4e1895adba06
--- /dev/null
+++ b/packages/platform-browser/src/dom/events/dom_events.ts
@@ -0,0 +1,231 @@
+/**
+ * @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 {isPlatformServer} from '@angular/common';
+import {Inject, Injectable, NgZone, Optional, PLATFORM_ID} from '@angular/core';
+
+
+import {DOCUMENT} from '../dom_tokens';
+
+import {EventManagerPlugin} from './event_manager';
+
+/**
+ * Detect if Zone is present. If it is then use simple zone aware 'addEventListener'
+ * since Angular can do much more
+ * efficient bookkeeping than Zone can, because we have additional information. This speeds up
+ * addEventListener by 3x.
+ */
+const __symbol__ =
+    (typeof Zone !== 'undefined') && (Zone as any)['__symbol__'] || function(v: string): string {
+      return '__zone_symbol__' + v;
+    };
+const ADD_EVENT_LISTENER: 'addEventListener' = __symbol__('addEventListener');
+const REMOVE_EVENT_LISTENER: 'removeEventListener' = __symbol__('removeEventListener');
+
+const symbolNames: {[key: string]: string} = {};
+
+const FALSE = 'FALSE';
+const ANGULAR = 'ANGULAR';
+const NATIVE_ADD_LISTENER = 'addEventListener';
+const NATIVE_REMOVE_LISTENER = 'removeEventListener';
+
+// use the same symbol string which is used in zone.js
+const stopSymbol = '__zone_symbol__propagationStopped';
+const stopMethodSymbol = '__zone_symbol__stopImmediatePropagation';
+
+const blackListedEvents: string[] =
+    (typeof Zone !== 'undefined') && (Zone as any)[__symbol__('BLACK_LISTED_EVENTS')];
+let blackListedMap: {[eventName: string]: string};
+if (blackListedEvents) {
+  blackListedMap = {};
+  blackListedEvents.forEach(eventName => { blackListedMap[eventName] = eventName; });
+}
+
+const isBlackListedEvent = function(eventName: string) {
+  if (!blackListedMap) {
+    return false;
+  }
+  return blackListedMap.hasOwnProperty(eventName);
+};
+
+interface TaskData {
+  zone: any;
+  handler: Function;
+}
+
+// a global listener to handle all dom event,
+// so we do not need to create a closure every time
+const globalListener = function(event: Event) {
+  const symbolName = symbolNames[event.type];
+  if (!symbolName) {
+    return;
+  }
+  const taskDatas: TaskData[] = this[symbolName];
+  if (!taskDatas) {
+    return;
+  }
+  const args: any = [event];
+  if (taskDatas.length === 1) {
+    // if taskDatas only have one element, just invoke it
+    const taskData = taskDatas[0];
+    if (taskData.zone !== Zone.current) {
+      // only use Zone.run when Zone.current not equals to stored zone
+      return taskData.zone.run(taskData.handler, this, args);
+    } else {
+      return taskData.handler.apply(this, args);
+    }
+  } else {
+    // copy tasks as a snapshot to avoid event handlers remove
+    // itself or others
+    const copiedTasks = taskDatas.slice();
+    for (let i = 0; i < copiedTasks.length; i++) {
+      // if other listener call event.stopImmediatePropagation
+      // just break
+      if ((event as any)[stopSymbol] === true) {
+        break;
+      }
+      const taskData = copiedTasks[i];
+      if (taskData.zone !== Zone.current) {
+        // only use Zone.run when Zone.current not equals to stored zone
+        taskData.zone.run(taskData.handler, this, args);
+      } else {
+        taskData.handler.apply(this, args);
+      }
+    }
+  }
+};
+
+@Injectable()
+export class DomEventsPlugin extends EventManagerPlugin {
+  constructor(
+      @Inject(DOCUMENT) doc: any, private ngZone: NgZone,
+      @Optional() @Inject(PLATFORM_ID) platformId: {}|null) {
+    super(doc);
+
+    if (!platformId || !isPlatformServer(platformId)) {
+      this.patchEvent();
+    }
+  }
+
+  private patchEvent() {
+    if (typeof Event === 'undefined' || !Event || !Event.prototype) {
+      return;
+    }
+    if ((Event.prototype as any)[stopMethodSymbol]) {
+      // already patched by zone.js
+      return;
+    }
+    const delegate = (Event.prototype as any)[stopMethodSymbol] =
+        Event.prototype.stopImmediatePropagation;
+    Event.prototype.stopImmediatePropagation = function() {
+      if (this) {
+        this[stopSymbol] = true;
+      }
+
+      // should call native delegate in case
+      // in some environment part of the application
+      // will not use the patched Event
+      delegate && delegate.apply(this, arguments);
+    };
+  }
+
+  // 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 {
+    /**
+     * 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 use a simple version of zone aware addEventListener instead.
+     * The result is faster registration and the zone will be restored.
+     * But ZoneSpec.onScheduleTask, ZoneSpec.onInvokeTask, ZoneSpec.onCancelTask
+     * will not be invoked
+     * We also 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;
+    const zoneJsLoaded = element[ADD_EVENT_LISTENER];
+    let callback: EventListener = handler as EventListener;
+    // if zonejs is loaded and current zone is not ngZone
+    // we keep Zone.current on target for later restoration.
+    if (zoneJsLoaded && (!NgZone.isInAngularZone() || isBlackListedEvent(eventName))) {
+      let symbolName = symbolNames[eventName];
+      if (!symbolName) {
+        symbolName = symbolNames[eventName] = __symbol__(ANGULAR + eventName + FALSE);
+      }
+      let taskDatas: TaskData[] = (element as any)[symbolName];
+      const globalListenerRegistered = taskDatas && taskDatas.length > 0;
+      if (!taskDatas) {
+        taskDatas = (element as any)[symbolName] = [];
+      }
+
+      const zone = isBlackListedEvent(eventName) ? Zone.root : Zone.current;
+      if (taskDatas.length === 0) {
+        taskDatas.push({zone: zone, handler: callback});
+      } else {
+        let callbackRegistered = false;
+        for (let i = 0; i < taskDatas.length; i++) {
+          if (taskDatas[i].handler === callback) {
+            callbackRegistered = true;
+            break;
+          }
+        }
+        if (!callbackRegistered) {
+          taskDatas.push({zone: zone, handler: callback});
+        }
+      }
+
+      if (!globalListenerRegistered) {
+        element[ADD_EVENT_LISTENER](eventName, globalListener, false);
+      }
+    } else {
+      element[NATIVE_ADD_LISTENER](eventName, callback, false);
+    }
+    return () => this.removeEventListener(element, eventName, callback);
+  }
+
+  removeEventListener(target: any, eventName: string, callback: Function): void {
+    let underlyingRemove = target[REMOVE_EVENT_LISTENER];
+    // zone.js not loaded, use native removeEventListener
+    if (!underlyingRemove) {
+      return target[NATIVE_REMOVE_LISTENER].apply(target, [eventName, callback, false]);
+    }
+    let symbolName = symbolNames[eventName];
+    let taskDatas: TaskData[] = symbolName && target[symbolName];
+    if (!taskDatas) {
+      // addEventListener not using patched version
+      // just call native removeEventListener
+      return target[NATIVE_REMOVE_LISTENER].apply(target, [eventName, callback, false]);
+    }
+    // fix issue 20532, should be able to remove
+    // listener which was added inside of ngZone
+    let found = false;
+    for (let i = 0; i < taskDatas.length; i++) {
+      // remove listener from taskDatas if the callback equals
+      if (taskDatas[i].handler === callback) {
+        found = true;
+        taskDatas.splice(i, 1);
+        break;
+      }
+    }
+    if (found) {
+      if (taskDatas.length === 0) {
+        // all listeners are removed, we can remove the globalListener from target
+        underlyingRemove.apply(target, [eventName, globalListener, false]);
+      }
+    } else {
+      // not found in taskDatas, the callback may be added inside of ngZone
+      // use native remove listener to remove the callback
+      target[NATIVE_REMOVE_LISTENER].apply(target, [eventName, callback, false]);
+    }
+  }
+}
diff --git a/packages/platform-browser/src/dom/events/event_manager.ts b/packages/platform-browser/src/dom/events/event_manager.ts
new file mode 100644
index 000000000000..f362b9c0d202
--- /dev/null
+++ b/packages/platform-browser/src/dom/events/event_manager.ts
@@ -0,0 +1,105 @@
+/**
+ * @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, Injectable, InjectionToken, NgZone} from '@angular/core';
+
+import {getDOM} from '../dom_adapter';
+
+/**
+ * The injection token for the event-manager plug-in service.
+ */
+export const EVENT_MANAGER_PLUGINS =
+    new InjectionToken<EventManagerPlugin[]>('EventManagerPlugins');
+
+/**
+ * An injectable service that provides event management for Angular
+ * through a browser plug-in.
+ */
+@Injectable()
+export class EventManager {
+  private _plugins: EventManagerPlugin[];
+  private _eventNameToPlugin = new Map<string, EventManagerPlugin>();
+
+  /**
+   * Initializes an instance of the event-manager service.
+   */
+  constructor(@Inject(EVENT_MANAGER_PLUGINS) plugins: EventManagerPlugin[], private _zone: NgZone) {
+    plugins.forEach(p => p.manager = this);
+    this._plugins = plugins.slice().reverse();
+  }
+
+  /**
+   * Registers a handler for a specific element and event.
+   *
+   * @param element The HTML element to receive event notifications.
+   * @param eventName The name of the event to listen for.
+   * @param handler A function to call when the notification occurs. Receives the
+   * event object as an argument.
+   * @returns  A callback function that can be used to remove the handler.
+   */
+  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
+    const plugin = this._findPluginFor(eventName);
+    return plugin.addEventListener(element, eventName, handler);
+  }
+
+  /**
+   * Registers a global handler for an event in a target view.
+   *
+   * @param target A target for global event notifications. One of "window", "document", or "body".
+   * @param eventName The name of the event to listen for.
+   * @param handler A function to call when the notification occurs. Receives the
+   * event object as an argument.
+   * @returns A callback function that can be used to remove the handler.
+   */
+  addGlobalEventListener(target: string, eventName: string, handler: Function): Function {
+    const plugin = this._findPluginFor(eventName);
+    return plugin.addGlobalEventListener(target, eventName, handler);
+  }
+
+  /**
+   * Retrieves the compilation zone in which event listeners are registered.
+   */
+  getZone(): NgZone { return this._zone; }
+
+  /** @internal */
+  _findPluginFor(eventName: string): EventManagerPlugin {
+    const plugin = this._eventNameToPlugin.get(eventName);
+    if (plugin) {
+      return plugin;
+    }
+
+    const plugins = this._plugins;
+    for (let i = 0; i < plugins.length; i++) {
+      const plugin = plugins[i];
+      if (plugin.supports(eventName)) {
+        this._eventNameToPlugin.set(eventName, plugin);
+        return plugin;
+      }
+    }
+    throw new Error(`No event manager plugin found for event ${eventName}`);
+  }
+}
+
+export abstract class EventManagerPlugin {
+  constructor(private _doc: any) {}
+
+  // TODO(issue/24571): remove '!'.
+  manager !: EventManager;
+
+  abstract supports(eventName: string): boolean;
+
+  abstract addEventListener(element: HTMLElement, eventName: string, handler: Function): Function;
+
+  addGlobalEventListener(element: string, eventName: string, handler: Function): Function {
+    const target: HTMLElement = getDOM().getGlobalEventTarget(this._doc, element);
+    if (!target) {
+      throw new Error(`Unsupported event target ${target} for event ${eventName}`);
+    }
+    return this.addEventListener(target, eventName, handler);
+  }
+}
diff --git a/packages/platform-browser/src/dom/events/hammer_gestures.ts b/packages/platform-browser/src/dom/events/hammer_gestures.ts
new file mode 100644
index 000000000000..7e2a5db2272e
--- /dev/null
+++ b/packages/platform-browser/src/dom/events/hammer_gestures.ts
@@ -0,0 +1,222 @@
+/**
+ * @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, Injectable, InjectionToken, Optional, ɵConsole as Console} from '@angular/core';
+
+import {DOCUMENT} from '../dom_tokens';
+
+import {EventManagerPlugin} from './event_manager';
+
+/**
+ * Supported HammerJS recognizer event names.
+ */
+const EVENT_NAMES = {
+  // pan
+  'pan': true,
+  'panstart': true,
+  'panmove': true,
+  'panend': true,
+  'pancancel': true,
+  'panleft': true,
+  'panright': true,
+  'panup': true,
+  'pandown': true,
+  // pinch
+  'pinch': true,
+  'pinchstart': true,
+  'pinchmove': true,
+  'pinchend': true,
+  'pinchcancel': true,
+  'pinchin': true,
+  'pinchout': true,
+  // press
+  'press': true,
+  'pressup': true,
+  // rotate
+  'rotate': true,
+  'rotatestart': true,
+  'rotatemove': true,
+  'rotateend': true,
+  'rotatecancel': true,
+  // swipe
+  'swipe': true,
+  'swipeleft': true,
+  'swiperight': true,
+  'swipeup': true,
+  'swipedown': true,
+  // tap
+  'tap': true,
+};
+
+/**
+ * DI token for providing [HammerJS](http://hammerjs.github.io/) support to Angular.
+ * @see `HammerGestureConfig`
+ *
+ * @experimental
+ */
+export const HAMMER_GESTURE_CONFIG = new InjectionToken<HammerGestureConfig>('HammerGestureConfig');
+
+
+/** Function that loads HammerJS, returning a promise that is resolved once HammerJs is loaded. */
+export type HammerLoader = () => Promise<void>;
+
+/** Injection token used to provide a {@link HammerLoader} to Angular. */
+export const HAMMER_LOADER = new InjectionToken<HammerLoader>('HammerLoader');
+
+export interface HammerInstance {
+  on(eventName: string, callback?: Function): void;
+  off(eventName: string, callback?: Function): void;
+}
+
+/**
+ * An injectable [HammerJS Manager](http://hammerjs.github.io/api/#hammer.manager)
+ * for gesture recognition. Configures specific event recognition.
+ * @experimental
+ */
+@Injectable()
+export class HammerGestureConfig {
+  /**
+   * A set of supported event names for gestures to be used in Angular.
+   * Angular supports all built-in recognizers, as listed in
+   * [HammerJS documentation](http://hammerjs.github.io/).
+   */
+  events: string[] = [];
+
+  /**
+  * Maps gesture event names to a set of configuration options
+  * that specify overrides to the default values for specific properties.
+  *
+  * The key is a supported event name to be configured,
+  * and the options object contains a set of properties, with override values
+  * to be applied to the named recognizer event.
+  * For example, to disable recognition of the rotate event, specify
+  *  `{"rotate": {"enable": false}}`.
+  *
+  * Properties that are not present take the HammerJS default values.
+  * For information about which properties are supported for which events,
+  * and their allowed and default values, see
+  * [HammerJS documentation](http://hammerjs.github.io/).
+  *
+  */
+  overrides: {[key: string]: Object} = {};
+
+  /**
+   * Properties whose default values can be overridden for a given event.
+   * Different sets of properties apply to different events.
+   * For information about which properties are supported for which events,
+   * and their allowed and default values, see
+   * [HammerJS documentation](http://hammerjs.github.io/).
+   */
+  options?: {
+    cssProps?: any; domEvents?: boolean; enable?: boolean | ((manager: any) => boolean);
+    preset?: any[];
+    touchAction?: string;
+    recognizers?: any[];
+    inputClass?: any;
+    inputTarget?: EventTarget;
+  };
+
+  /**
+   * Creates a [HammerJS Manager](http://hammerjs.github.io/api/#hammer.manager)
+   * and attaches it to a given HTML element.
+   * @param element The element that will recognize gestures.
+   * @returns A HammerJS event-manager object.
+   */
+  buildHammer(element: HTMLElement): HammerInstance {
+    const mc = new Hammer !(element, this.options);
+
+    mc.get('pinch').set({enable: true});
+    mc.get('rotate').set({enable: true});
+
+    for (const eventName in this.overrides) {
+      mc.get(eventName).set(this.overrides[eventName]);
+    }
+
+    return mc;
+  }
+}
+
+@Injectable()
+export class HammerGesturesPlugin extends EventManagerPlugin {
+  constructor(
+      @Inject(DOCUMENT) doc: any,
+      @Inject(HAMMER_GESTURE_CONFIG) private _config: HammerGestureConfig, private console: Console,
+      @Optional() @Inject(HAMMER_LOADER) private loader?: HammerLoader|null) {
+    super(doc);
+  }
+
+  supports(eventName: string): boolean {
+    if (!EVENT_NAMES.hasOwnProperty(eventName.toLowerCase()) && !this.isCustomEvent(eventName)) {
+      return false;
+    }
+
+    if (!(window as any).Hammer && !this.loader) {
+      this.console.warn(
+          `The "${eventName}" event cannot be bound because Hammer.JS is not ` +
+          `loaded and no custom loader has been specified.`);
+      return false;
+    }
+
+    return true;
+  }
+
+  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
+    const zone = this.manager.getZone();
+    eventName = eventName.toLowerCase();
+
+    // If Hammer is not present but a loader is specified, we defer adding the event listener
+    // until Hammer is loaded.
+    if (!(window as any).Hammer && this.loader) {
+      // This `addEventListener` method returns a function to remove the added listener.
+      // Until Hammer is loaded, the returned function needs to *cancel* the registration rather
+      // than remove anything.
+      let cancelRegistration = false;
+      let deregister: Function = () => { cancelRegistration = true; };
+
+      this.loader()
+          .then(() => {
+            // If Hammer isn't actually loaded when the custom loader resolves, give up.
+            if (!(window as any).Hammer) {
+              this.console.warn(
+                  `The custom HAMMER_LOADER completed, but Hammer.JS is not present.`);
+              deregister = () => {};
+              return;
+            }
+
+            if (!cancelRegistration) {
+              // Now that Hammer is loaded and the listener is being loaded for real,
+              // the deregistration function changes from canceling registration to removal.
+              deregister = this.addEventListener(element, eventName, handler);
+            }
+          })
+          .catch(() => {
+            this.console.warn(
+                `The "${eventName}" event cannot be bound because the custom ` +
+                `Hammer.JS loader failed.`);
+            deregister = () => {};
+          });
+
+      // Return a function that *executes* `deregister` (and not `deregister` itself) so that we
+      // can change the behavior of `deregister` once the listener is added. Using a closure in
+      // this way allows us to avoid any additional data structures to track listener removal.
+      return () => { deregister(); };
+    }
+
+    return zone.runOutsideAngular(() => {
+      // Creating the manager bind events, must be done outside of angular
+      const mc = this._config.buildHammer(element);
+      const callback = function(eventObj: HammerInput) {
+        zone.runGuarded(function() { handler(eventObj); });
+      };
+      mc.on(eventName, callback);
+      return () => mc.off(eventName, callback);
+    });
+  }
+
+  isCustomEvent(eventName: string): boolean { return this._config.events.indexOf(eventName) > -1; }
+}
diff --git a/packages/platform-browser/src/dom/events/key_events.ts b/packages/platform-browser/src/dom/events/key_events.ts
new file mode 100644
index 000000000000..bcf26c9ec999
--- /dev/null
+++ b/packages/platform-browser/src/dom/events/key_events.ts
@@ -0,0 +1,146 @@
+/**
+ * @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, Injectable, NgZone} from '@angular/core';
+
+import {getDOM} from '../dom_adapter';
+import {DOCUMENT} from '../dom_tokens';
+
+import {EventManagerPlugin} from './event_manager';
+
+/**
+ * Defines supported modifiers for key events.
+ */
+const MODIFIER_KEYS = ['alt', 'control', 'meta', 'shift'];
+
+/**
+ * Retrieves modifiers from key-event objects.
+ */
+const MODIFIER_KEY_GETTERS: {[key: string]: (event: KeyboardEvent) => boolean} = {
+  'alt': (event: KeyboardEvent) => event.altKey,
+  'control': (event: KeyboardEvent) => event.ctrlKey,
+  'meta': (event: KeyboardEvent) => event.metaKey,
+  'shift': (event: KeyboardEvent) => event.shiftKey
+};
+
+/**
+ * @experimental
+ * A browser plug-in that provides support for handling of key events in Angular.
+ */
+@Injectable()
+export class KeyEventsPlugin extends EventManagerPlugin {
+  /**
+   * Initializes an instance of the browser plug-in.
+   * @param doc The document in which key events will be detected.
+   */
+  constructor(@Inject(DOCUMENT) doc: any) { super(doc); }
+
+  /**
+    * Reports whether a named key event is supported.
+    * @param eventName The event name to query.
+    * @return True if the named key event is supported.
+   */
+  supports(eventName: string): boolean { return KeyEventsPlugin.parseEventName(eventName) != null; }
+
+  /**
+   * Registers a handler for a specific element and key event.
+   * @param element The HTML element to receive event notifications.
+   * @param eventName The name of the key event to listen for.
+   * @param handler A function to call when the notification occurs. Receives the
+   * event object as an argument.
+   * @returns The key event that was registered.
+  */
+  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
+    const parsedEvent = KeyEventsPlugin.parseEventName(eventName) !;
+
+    const outsideHandler =
+        KeyEventsPlugin.eventCallback(parsedEvent['fullKey'], handler, this.manager.getZone());
+
+    return this.manager.getZone().runOutsideAngular(() => {
+      return getDOM().onAndCancel(element, parsedEvent['domEventName'], outsideHandler);
+    });
+  }
+
+  static parseEventName(eventName: string): {[key: string]: string}|null {
+    const parts: string[] = eventName.toLowerCase().split('.');
+
+    const domEventName = parts.shift();
+    if ((parts.length === 0) || !(domEventName === 'keydown' || domEventName === 'keyup')) {
+      return null;
+    }
+
+    const key = KeyEventsPlugin._normalizeKey(parts.pop() !);
+
+    let fullKey = '';
+    MODIFIER_KEYS.forEach(modifierName => {
+      const index: number = parts.indexOf(modifierName);
+      if (index > -1) {
+        parts.splice(index, 1);
+        fullKey += modifierName + '.';
+      }
+    });
+    fullKey += key;
+
+    if (parts.length != 0 || key.length === 0) {
+      // returning null instead of throwing to let another plugin process the event
+      return null;
+    }
+
+    const result: {[k: string]: string} = {};
+    result['domEventName'] = domEventName;
+    result['fullKey'] = fullKey;
+    return result;
+  }
+
+  static getEventFullKey(event: KeyboardEvent): string {
+    let fullKey = '';
+    let key = getDOM().getEventKey(event);
+    key = key.toLowerCase();
+    if (key === ' ') {
+      key = 'space';  // for readability
+    } else if (key === '.') {
+      key = 'dot';  // because '.' is used as a separator in event names
+    }
+    MODIFIER_KEYS.forEach(modifierName => {
+      if (modifierName != key) {
+        const modifierGetter = MODIFIER_KEY_GETTERS[modifierName];
+        if (modifierGetter(event)) {
+          fullKey += modifierName + '.';
+        }
+      }
+    });
+    fullKey += key;
+    return fullKey;
+  }
+
+  /**
+   * Configures a handler callback for a key event.
+   * @param fullKey The event name that combines all simultaneous keystrokes.
+   * @param handler The function that responds to the key event.
+   * @param zone The zone in which the event occurred.
+   * @returns A callback function.
+   */
+  static eventCallback(fullKey: any, handler: Function, zone: NgZone): Function {
+    return (event: any /** TODO #9100 */) => {
+      if (KeyEventsPlugin.getEventFullKey(event) === fullKey) {
+        zone.runGuarded(() => handler(event));
+      }
+    };
+  }
+
+  /** @internal */
+  static _normalizeKey(keyName: string): string {
+    // TODO: switch to a Map if the mapping grows too much
+    switch (keyName) {
+      case 'esc':
+        return 'escape';
+      default:
+        return keyName;
+    }
+  }
+}
diff --git a/packages/platform-browser/src/dom/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts
new file mode 100644
index 000000000000..097e036fb80d
--- /dev/null
+++ b/packages/platform-browser/src/dom/shared_styles_host.ts
@@ -0,0 +1,63 @@
+/**
+ * @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, Injectable, OnDestroy} from '@angular/core';
+import {getDOM} from './dom_adapter';
+import {DOCUMENT} from './dom_tokens';
+
+@Injectable()
+export class SharedStylesHost {
+  /** @internal */
+  protected _stylesSet = new Set<string>();
+
+  addStyles(styles: string[]): void {
+    const additions = new Set<string>();
+    styles.forEach(style => {
+      if (!this._stylesSet.has(style)) {
+        this._stylesSet.add(style);
+        additions.add(style);
+      }
+    });
+    this.onStylesAdded(additions);
+  }
+
+  onStylesAdded(additions: Set<string>): void {}
+
+  getAllStyles(): string[] { return Array.from(this._stylesSet); }
+}
+
+@Injectable()
+export class DomSharedStylesHost extends SharedStylesHost implements OnDestroy {
+  private _hostNodes = new Set<Node>();
+  private _styleNodes = new Set<Node>();
+  constructor(@Inject(DOCUMENT) private _doc: any) {
+    super();
+    this._hostNodes.add(_doc.head);
+  }
+
+  private _addStylesToHost(styles: Set<string>, host: Node): void {
+    styles.forEach((style: string) => {
+      const styleEl = this._doc.createElement('style');
+      styleEl.textContent = style;
+      this._styleNodes.add(host.appendChild(styleEl));
+    });
+  }
+
+  addHost(hostNode: Node): void {
+    this._addStylesToHost(this._stylesSet, hostNode);
+    this._hostNodes.add(hostNode);
+  }
+
+  removeHost(hostNode: Node): void { this._hostNodes.delete(hostNode); }
+
+  onStylesAdded(additions: Set<string>): void {
+    this._hostNodes.forEach(hostNode => this._addStylesToHost(additions, hostNode));
+  }
+
+  ngOnDestroy(): void { this._styleNodes.forEach(styleNode => getDOM().remove(styleNode)); }
+}
diff --git a/packages/platform-browser/src/dom/util.ts b/packages/platform-browser/src/dom/util.ts
new file mode 100644
index 000000000000..7f5b18cb6a7e
--- /dev/null
+++ b/packages/platform-browser/src/dom/util.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 {ɵglobal as global} from '@angular/core';
+
+const CAMEL_CASE_REGEXP = /([A-Z])/g;
+const DASH_CASE_REGEXP = /-([a-z])/g;
+
+
+export function camelCaseToDashCase(input: string): string {
+  return input.replace(CAMEL_CASE_REGEXP, (...m: string[]) => '-' + m[1].toLowerCase());
+}
+
+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 (typeof COMPILED === 'undefined' || !COMPILED) {
+    // Note: we can't export `ng` when using closure enhanced optimization as:
+    // - closure declares globals itself for minified names, which sometimes clobber our `ng` global
+    // - we can't declare a closure extern as the namespace `ng` is already used within Google
+    //   for typings for angularJS (via `goog.provide('ng....')`).
+    const ng = global['ng'] = (global['ng'] as{[key: string]: any} | undefined) || {};
+    ng[name] = value;
+  }
+}
diff --git a/packages/platform-browser/src/platform-browser.externs.js b/packages/platform-browser/src/platform-browser.externs.js
new file mode 100644
index 000000000000..41ad83accbac
--- /dev/null
+++ b/packages/platform-browser/src/platform-browser.externs.js
@@ -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
+ *
+ * @externs
+ */
+
+/**
+ * @suppress {duplicate}
+ */
+var getAngularTestability;
+/**
+ * @suppress {duplicate}
+ */
+var getAllAngularTestabilities;
+/**
+ * @suppress {duplicate}
+ */
+var getAllAngularRootElements;
+/**
+ * @suppress {duplicate}
+ */
+var frameworkStabilizers;
diff --git a/packages/platform-browser/src/platform-browser.ts b/packages/platform-browser/src/platform-browser.ts
new file mode 100644
index 000000000000..28cee18de752
--- /dev/null
+++ b/packages/platform-browser/src/platform-browser.ts
@@ -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 {BrowserModule, platformBrowser} from './browser';
+export {Meta, MetaDefinition} from './browser/meta';
+export {Title} from './browser/title';
+export {disableDebugTools, enableDebugTools} from './browser/tools/tools';
+export {BrowserTransferStateModule, StateKey, TransferState, makeStateKey} from './browser/transfer_state';
+export {By} from './dom/debug/by';
+export {DOCUMENT} from './dom/dom_tokens';
+export {EVENT_MANAGER_PLUGINS, EventManager} from './dom/events/event_manager';
+export {HAMMER_GESTURE_CONFIG, HAMMER_LOADER, HammerGestureConfig, HammerLoader} from './dom/events/hammer_gestures';
+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
new file mode 100644
index 000000000000..0deb396d776e
--- /dev/null
+++ b/packages/platform-browser/src/private_export.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
+ */
+
+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 {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';
+export {escapeHtml as ɵescapeHtml} from './browser/transfer_state';
+export {ELEMENT_PROBE_PROVIDERS as ɵELEMENT_PROBE_PROVIDERS} from './dom/debug/ng_probe';
+export {DomAdapter as ɵDomAdapter, getDOM as ɵgetDOM, setRootDomAdapter as ɵsetRootDomAdapter} from './dom/dom_adapter';
+export {DomRendererFactory2 as ɵDomRendererFactory2, NAMESPACE_URIS as ɵNAMESPACE_URIS, flattenStyles as ɵflattenStyles, shimContentAttribute as ɵshimContentAttribute, shimHostAttribute as ɵshimHostAttribute} from './dom/dom_renderer';
+export {DomEventsPlugin as ɵDomEventsPlugin} from './dom/events/dom_events';
+export {HammerGesturesPlugin as ɵHammerGesturesPlugin} from './dom/events/hammer_gestures';
+export {KeyEventsPlugin as ɵKeyEventsPlugin} from './dom/events/key_events';
+export {DomSharedStylesHost as ɵDomSharedStylesHost, SharedStylesHost as ɵSharedStylesHost} from './dom/shared_styles_host';
+export {DomSanitizerImpl as ɵDomSanitizerImpl} from './security/dom_sanitization_service';
diff --git a/packages/platform-browser/src/security/dom_sanitization_service.ts b/packages/platform-browser/src/security/dom_sanitization_service.ts
new file mode 100644
index 000000000000..7c2dd51bb52c
--- /dev/null
+++ b/packages/platform-browser/src/security/dom_sanitization_service.ts
@@ -0,0 +1,231 @@
+/**
+ * @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, Injectable, Sanitizer, SecurityContext, ɵ_sanitizeHtml as _sanitizeHtml, ɵ_sanitizeStyle as _sanitizeStyle, ɵ_sanitizeUrl as _sanitizeUrl} from '@angular/core';
+
+import {DOCUMENT} from '../dom/dom_tokens';
+
+export {SecurityContext};
+
+
+
+/**
+ * Marker interface for a value that's safe to use in a particular context.
+ *
+ *
+ */
+export interface SafeValue {}
+
+/**
+ * Marker interface for a value that's safe to use as HTML.
+ *
+ *
+ */
+export interface SafeHtml extends SafeValue {}
+
+/**
+ * Marker interface for a value that's safe to use as style (CSS).
+ *
+ *
+ */
+export interface SafeStyle extends SafeValue {}
+
+/**
+ * Marker interface for a value that's safe to use as JavaScript.
+ *
+ *
+ */
+export interface SafeScript extends SafeValue {}
+
+/**
+ * Marker interface for a value that's safe to use as a URL linking to a document.
+ *
+ *
+ */
+export interface SafeUrl extends SafeValue {}
+
+/**
+ * Marker interface for a value that's safe to use as a URL to load executable code from.
+ *
+ *
+ */
+export interface SafeResourceUrl extends SafeValue {}
+
+/**
+ * DomSanitizer helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing
+ * values to be safe to use in the different DOM contexts.
+ *
+ * For example, when binding a URL in an `<a [href]="someValue">` hyperlink, `someValue` will be
+ * sanitized so that an attacker cannot inject e.g. a `javascript:` URL that would execute code on
+ * the website.
+ *
+ * In specific situations, it might be necessary to disable sanitization, for example if the
+ * application genuinely needs to produce a `javascript:` style link with a dynamic value in it.
+ * Users can bypass security by constructing a value with one of the `bypassSecurityTrust...`
+ * methods, and then binding to that value from the template.
+ *
+ * These situations should be very rare, and extraordinary care must be taken to avoid creating a
+ * Cross Site Scripting (XSS) security bug!
+ *
+ * When using `bypassSecurityTrust...`, make sure to call the method as early as possible and as
+ * close as possible to the source of the value, to make it easy to verify no security bug is
+ * created by its use.
+ *
+ * It is not required (and not recommended) to bypass security if the value is safe, e.g. a URL that
+ * does not start with a suspicious protocol, or an HTML snippet that does not contain dangerous
+ * code. The sanitizer leaves safe values intact.
+ *
+ * @security Calling any of the `bypassSecurityTrust...` APIs disables Angular's built-in
+ * sanitization for the value passed in. Carefully check and audit all values and code paths going
+ * into this call. Make sure any user data is appropriately escaped for this security context.
+ * For more detail, see the [Security Guide](http://g.co/ng/security).
+ *
+ *
+ */
+export abstract class DomSanitizer implements Sanitizer {
+  /**
+   * Sanitizes a value for use in the given SecurityContext.
+   *
+   * If value is trusted for the context, this method will unwrap the contained safe value and use
+   * it directly. Otherwise, value will be sanitized to be safe in the given context, for example
+   * 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: SafeValue|string|null): string|null;
+
+  /**
+   * Bypass security and trust the given value to be safe HTML. Only use this when the bound HTML
+   * is unsafe (e.g. contains `<script>` tags) and the code should be executed. The sanitizer will
+   * leave safe HTML intact, so in most situations this method should not be used.
+   *
+   * **WARNING:** calling this method with untrusted user data exposes your application to XSS
+   * security risks!
+   */
+  abstract bypassSecurityTrustHtml(value: string): SafeHtml;
+
+  /**
+   * Bypass security and trust the given value to be safe style value (CSS).
+   *
+   * **WARNING:** calling this method with untrusted user data exposes your application to XSS
+   * security risks!
+   */
+  abstract bypassSecurityTrustStyle(value: string): SafeStyle;
+
+  /**
+   * Bypass security and trust the given value to be safe JavaScript.
+   *
+   * **WARNING:** calling this method with untrusted user data exposes your application to XSS
+   * security risks!
+   */
+  abstract bypassSecurityTrustScript(value: string): SafeScript;
+
+  /**
+   * Bypass security and trust the given value to be a safe style URL, i.e. a value that can be used
+   * in hyperlinks or `<img src>`.
+   *
+   * **WARNING:** calling this method with untrusted user data exposes your application to XSS
+   * security risks!
+   */
+  abstract bypassSecurityTrustUrl(value: string): SafeUrl;
+
+  /**
+   * Bypass security and trust the given value to be a safe resource URL, i.e. a location that may
+   * be used to load executable code from, like `<script src>`, or `<iframe src>`.
+   *
+   * **WARNING:** calling this method with untrusted user data exposes your application to XSS
+   * security risks!
+   */
+  abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl;
+}
+
+
+@Injectable()
+export class DomSanitizerImpl extends DomSanitizer {
+  constructor(@Inject(DOCUMENT) private _doc: any) { super(); }
+
+  sanitize(ctx: SecurityContext, value: SafeValue|string|null): string|null {
+    if (value == null) return null;
+    switch (ctx) {
+      case SecurityContext.NONE:
+        return value as string;
+      case SecurityContext.HTML:
+        if (value instanceof SafeHtmlImpl) return value.changingThisBreaksApplicationSecurity;
+        this.checkNotSafeValue(value, 'HTML');
+        return _sanitizeHtml(this._doc, String(value));
+      case SecurityContext.STYLE:
+        if (value instanceof SafeStyleImpl) return value.changingThisBreaksApplicationSecurity;
+        this.checkNotSafeValue(value, 'Style');
+        return _sanitizeStyle(value as string);
+      case SecurityContext.SCRIPT:
+        if (value instanceof SafeScriptImpl) return value.changingThisBreaksApplicationSecurity;
+        this.checkNotSafeValue(value, 'Script');
+        throw new Error('unsafe value used in a script context');
+      case SecurityContext.URL:
+        if (value instanceof SafeResourceUrlImpl || value instanceof SafeUrlImpl) {
+          // Allow resource URLs in URL contexts, they are strictly more trusted.
+          return value.changingThisBreaksApplicationSecurity;
+        }
+        this.checkNotSafeValue(value, 'URL');
+        return _sanitizeUrl(String(value));
+      case SecurityContext.RESOURCE_URL:
+        if (value instanceof SafeResourceUrlImpl) {
+          return value.changingThisBreaksApplicationSecurity;
+        }
+        this.checkNotSafeValue(value, 'ResourceURL');
+        throw new Error(
+            'unsafe value used in a resource URL context (see http://g.co/ng/security#xss)');
+      default:
+        throw new Error(`Unexpected SecurityContext ${ctx} (see http://g.co/ng/security#xss)`);
+    }
+  }
+
+  private checkNotSafeValue(value: any, expectedType: string) {
+    if (value instanceof SafeValueImpl) {
+      throw new Error(
+          `Required a safe ${expectedType}, got a ${value.getTypeName()} ` +
+          `(see http://g.co/ng/security#xss)`);
+    }
+  }
+
+  bypassSecurityTrustHtml(value: string): SafeHtml { return new SafeHtmlImpl(value); }
+  bypassSecurityTrustStyle(value: string): SafeStyle { return new SafeStyleImpl(value); }
+  bypassSecurityTrustScript(value: string): SafeScript { return new SafeScriptImpl(value); }
+  bypassSecurityTrustUrl(value: string): SafeUrl { return new SafeUrlImpl(value); }
+  bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl {
+    return new SafeResourceUrlImpl(value);
+  }
+}
+
+abstract class SafeValueImpl implements SafeValue {
+  constructor(public changingThisBreaksApplicationSecurity: string) {
+    // empty
+  }
+
+  abstract getTypeName(): string;
+
+  toString() {
+    return `SafeValue must use [property]=binding: ${this.changingThisBreaksApplicationSecurity}` +
+        ` (see http://g.co/ng/security#xss)`;
+  }
+}
+
+class SafeHtmlImpl extends SafeValueImpl implements SafeHtml {
+  getTypeName() { return 'HTML'; }
+}
+class SafeStyleImpl extends SafeValueImpl implements SafeStyle {
+  getTypeName() { return 'Style'; }
+}
+class SafeScriptImpl extends SafeValueImpl implements SafeScript {
+  getTypeName() { return 'Script'; }
+}
+class SafeUrlImpl extends SafeValueImpl implements SafeUrl {
+  getTypeName() { return 'URL'; }
+}
+class SafeResourceUrlImpl extends SafeValueImpl implements SafeResourceUrl {
+  getTypeName() { return 'ResourceURL'; }
+}
diff --git a/packages/platform-browser/src/version.ts b/packages/platform-browser/src/version.ts
new file mode 100644
index 000000000000..af66f0fa278a
--- /dev/null
+++ b/packages/platform-browser/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/core';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/platform-browser/test/BUILD.bazel b/packages/platform-browser/test/BUILD.bazel
new file mode 100644
index 000000000000..622b9c9edb93
--- /dev/null
+++ b/packages/platform-browser/test/BUILD.bazel
@@ -0,0 +1,49 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+exports_files([
+    "browser/static_assets/200.html",
+    "static_assets/test.html",
+])
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/animations",
+        "//packages/animations/browser",
+        "//packages/animations/browser/testing",
+        "//packages/common",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser/animations",
+        "//packages/platform-browser/testing",
+        "@rxjs",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    # dissable since tests are running but not yet passing
+    tags = ["manual"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    static_files = [
+        ":static_assets/test.html",
+    ],
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/platform-browser/test/animation/animation_renderer_spec.ts b/packages/platform-browser/test/animation/animation_renderer_spec.ts
new file mode 100644
index 000000000000..8373cb1e93ac
--- /dev/null
+++ b/packages/platform-browser/test/animation/animation_renderer_spec.ts
@@ -0,0 +1,378 @@
+/**
+ * @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, animate, state, style, transition, trigger} from '@angular/animations';
+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 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';
+
+(function() {
+  if (isNode) return;
+  describe('AnimationRenderer', () => {
+    let element: any;
+    beforeEach(() => {
+      element = el('<div></div>');
+
+      TestBed.configureTestingModule({
+        providers: [{provide: AnimationEngine, useClass: MockAnimationEngine}],
+        imports: [BrowserAnimationsModule]
+      });
+    });
+
+    function makeRenderer(animationTriggers: any[] = []) {
+      const type = <RendererType2>{
+        id: 'id',
+        encapsulation: null !,
+        styles: [],
+        data: {'animation': animationTriggers}
+      };
+      return (TestBed.get(RendererFactory2) as AnimationRendererFactory)
+          .createRenderer(element, type);
+    }
+
+    it('should hook into the engine\'s insert operations when appending children', () => {
+      const renderer = makeRenderer();
+      const engine = TestBed.get(AnimationEngine) as MockAnimationEngine;
+      const container = el('<div></div>');
+
+      renderer.appendChild(container, element);
+      expect(engine.captures['onInsert'].pop()).toEqual([element]);
+    });
+
+    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 container = el('<div></div>');
+         const element2 = el('<div></div>');
+         container.appendChild(element2);
+
+         renderer.insertBefore(container, element, element2);
+         expect(engine.captures['onInsert'].pop()).toEqual([element]);
+       });
+
+    it('should hook into the engine\'s insert operations when removing children', () => {
+      const renderer = makeRenderer();
+      const engine = TestBed.get(AnimationEngine) as MockAnimationEngine;
+      const container = el('<div></div>');
+
+      renderer.removeChild(container, element);
+      expect(engine.captures['onRemove'].pop()).toEqual([element]);
+    });
+
+    it('should hook into the engine\'s setProperty call if the property begins with `@`', () => {
+      const renderer = makeRenderer();
+      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, '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 cb = (event: any): boolean => { return true; };
+
+        renderer.listen(element, 'event', cb);
+        expect(engine.captures['listen']).toBeFalsy();
+
+        renderer.listen(element, '@event.phase', cb);
+        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 cb = (event: any): boolean => { return true; };
+
+           renderer.listen('body', '@event', cb);
+           expect(engine.captures['listen'].pop()[0]).toBe(document.body);
+
+           renderer.listen('document', '@event', cb);
+           expect(engine.captures['listen'].pop()[0]).toBe(document);
+
+           renderer.listen('window', '@event', cb);
+           expect(engine.captures['listen'].pop()[0]).toBe(window);
+         });
+    });
+
+    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 (isNode) return;
+
+      it('should flush and fire callbacks when the zone becomes stable', (async) => {
+        @Component({
+          selector: 'my-cmp',
+          template: '<div [@myAnimation]="exp" (@myAnimation.start)="onStart($event)"></div>',
+          animations: [trigger(
+              'myAnimation',
+              [transition(
+                  '* => state',
+                  [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
+        })
+        class Cmp {
+          exp: any;
+          event: any;
+          onStart(event: any) { this.event = event; }
+        }
+
+        TestBed.configureTestingModule({
+          providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}],
+          declarations: [Cmp]
+        });
+
+        const engine = TestBed.get(AnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 'state';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(cmp.event.triggerName).toEqual('myAnimation');
+          expect(cmp.event.phaseName).toEqual('start');
+          cmp.event = null;
+
+          engine.flush();
+          expect(cmp.event).toBeFalsy();
+          async();
+        });
+      });
+
+      it('should properly insert/remove nodes through the animation renderer that do not contain animations',
+         (async) => {
+           @Component({
+             selector: 'my-cmp',
+             template: '<div #elm *ngIf="exp"></div>',
+             animations: [trigger(
+                 'someAnimation',
+                 [transition(
+                     '* => *', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
+           })
+           class Cmp {
+             exp: any;
+             @ViewChild('elm') public element: any;
+           }
+
+           TestBed.configureTestingModule({
+             providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}],
+             declarations: [Cmp]
+           });
+
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp = true;
+           fixture.detectChanges();
+
+           fixture.whenStable().then(() => {
+             cmp.exp = false;
+             const element = cmp.element;
+             expect(element.nativeElement.parentNode).toBeTruthy();
+
+             fixture.detectChanges();
+             fixture.whenStable().then(() => {
+               expect(element.nativeElement.parentNode).toBeFalsy();
+               async();
+             });
+           });
+         });
+
+      it('should only queue up dom removals if the element itself contains a valid leave animation',
+         () => {
+           @Component({
+             selector: 'my-cmp',
+             template: `
+               <div #elm1 *ngIf="exp1"></div>
+               <div #elm2 @animation1 *ngIf="exp2"></div>
+               <div #elm3 @animation2 *ngIf="exp3"></div>
+            `,
+             animations: [
+               trigger('animation1', [transition('a => b', [])]),
+               trigger('animation2', [transition(':leave', [])]),
+             ]
+           })
+           class Cmp {
+             exp1: any = true;
+             exp2: any = true;
+             exp3: any = true;
+
+             @ViewChild('elm1') public elm1: any;
+
+             @ViewChild('elm2') public elm2: any;
+
+             @ViewChild('elm3') public elm3: any;
+           }
+
+           TestBed.configureTestingModule({
+             providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}],
+             declarations: [Cmp]
+           });
+
+           const engine = TestBed.get(AnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           fixture.detectChanges();
+           const elm1 = cmp.elm1;
+           const elm2 = cmp.elm2;
+           const elm3 = cmp.elm3;
+           assertHasParent(elm1);
+           assertHasParent(elm2);
+           assertHasParent(elm3);
+           engine.flush();
+           finishPlayers(engine.players);
+
+           cmp.exp1 = false;
+           fixture.detectChanges();
+           assertHasParent(elm1, false);
+           assertHasParent(elm2);
+           assertHasParent(elm3);
+           engine.flush();
+           expect(engine.players.length).toEqual(0);
+
+           cmp.exp2 = false;
+           fixture.detectChanges();
+           assertHasParent(elm1, false);
+           assertHasParent(elm2, false);
+           assertHasParent(elm3);
+           engine.flush();
+           expect(engine.players.length).toEqual(0);
+
+           cmp.exp3 = false;
+           fixture.detectChanges();
+           assertHasParent(elm1, false);
+           assertHasParent(elm2, false);
+           assertHasParent(elm3);
+           engine.flush();
+           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 InjectableAnimationEngine {
+  captures: {[method: string]: any[]} = {};
+  triggers: AnimationTriggerMetadata[] = [];
+
+  private _capture(name: string, args: any[]) {
+    const data = this.captures[name] = this.captures[name] || [];
+    data.push(args);
+  }
+
+  registerTrigger(componentId: string, namespaceId: string, trigger: AnimationTriggerMetadata) {
+    this.triggers.push(trigger);
+  }
+
+  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');
+  }
+}
+
+
+function assertHasParent(element: any, yes: boolean = true) {
+  const parent = element.nativeElement.parentNode;
+  if (yes) {
+    expect(parent).toBeTruthy();
+  } else {
+    expect(parent).toBeFalsy();
+  }
+}
+
+function finishPlayers(players: AnimationPlayer[]) {
+  players.forEach(player => player.finish());
+}
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 000000000000..66202e035eea
--- /dev/null
+++ b/packages/platform-browser/test/animation/browser_animation_builder_spec.ts
@@ -0,0 +1,109 @@
+/**
+ * @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';
+
+{
+  describe('BrowserAnimationBuilder', () => {
+    if (isNode) return;
+    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/bootstrap_spec.ts b/packages/platform-browser/test/browser/bootstrap_spec.ts
new file mode 100644
index 000000000000..a087d54f6cde
--- /dev/null
+++ b/packages/platform-browser/test/browser/bootstrap_spec.ts
@@ -0,0 +1,448 @@
+/**
+ * @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 {isPlatformBrowser} from '@angular/common';
+import {APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, Compiler, Component, Directive, ErrorHandler, Inject, Input, LOCALE_ID, NgModule, OnDestroy, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, Provider, StaticProvider, Type, VERSION, createPlatformFactory} from '@angular/core';
+import {ApplicationRef, destroyPlatform} from '@angular/core/src/application_ref';
+import {Console} from '@angular/core/src/console';
+import {ComponentRef} from '@angular/core/src/linker/component_factory';
+import {Testability, TestabilityRegistry} from '@angular/core/src/testability/testability';
+import {AsyncTestCompleter, Log, afterEach, beforeEach, beforeEachProviders, describe, fit, inject, it} from '@angular/core/testing/src/testing_internal';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {DOCUMENT} from '@angular/platform-browser/src/dom/dom_tokens';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+@Component({selector: 'non-existent', template: ''})
+class NonExistentComp {
+}
+
+@Component({selector: 'hello-app', template: '{{greeting}} world!'})
+class HelloRootCmp {
+  greeting: string;
+  constructor() { this.greeting = 'hello'; }
+}
+
+@Component({selector: 'hello-app', template: 'before: <ng-content></ng-content> after: done'})
+class HelloRootCmpContent {
+  constructor() {}
+}
+
+@Component({selector: 'hello-app-2', template: '{{greeting}} world, again!'})
+class HelloRootCmp2 {
+  greeting: string;
+  constructor() { this.greeting = 'hello'; }
+}
+
+@Component({selector: 'hello-app', template: ''})
+class HelloRootCmp3 {
+  appBinding: any /** TODO #9100 */;
+
+  constructor(@Inject('appBinding') appBinding: any /** TODO #9100 */) {
+    this.appBinding = appBinding;
+  }
+}
+
+@Component({selector: 'hello-app', template: ''})
+class HelloRootCmp4 {
+  appRef: any /** TODO #9100 */;
+
+  constructor(@Inject(ApplicationRef) appRef: ApplicationRef) { this.appRef = appRef; }
+}
+
+@Component({selector: 'hello-app'})
+class HelloRootMissingTemplate {
+}
+
+@Directive({selector: 'hello-app'})
+class HelloRootDirectiveIsNotCmp {
+}
+
+@Component({selector: 'hello-app', template: ''})
+class HelloOnDestroyTickCmp implements OnDestroy {
+  appRef: ApplicationRef;
+  constructor(@Inject(ApplicationRef) appRef: ApplicationRef) { this.appRef = appRef; }
+
+  ngOnDestroy(): void { this.appRef.tick(); }
+}
+
+@Component({selector: 'hello-app', templateUrl: './sometemplate.html'})
+class HelloUrlCmp {
+  greeting = 'hello';
+}
+
+@Directive({selector: '[someDir]', host: {'[title]': 'someDir'}})
+class SomeDirective {
+  // TODO(issue/24571): remove '!'.
+  @Input()
+  someDir !: string;
+}
+
+@Pipe({name: 'somePipe'})
+class SomePipe {
+  transform(value: string): any { return `transformed ${value}`; }
+}
+
+@Component({selector: 'hello-app', template: `<div  [someDir]="'someValue' | somePipe"></div>`})
+class HelloCmpUsingPlatformDirectiveAndPipe {
+  show: boolean = false;
+}
+
+@Component({selector: 'hello-app', template: '<some-el [someProp]="true">hello world!</some-el>'})
+class HelloCmpUsingCustomElement {
+}
+
+class MockConsole {
+  res: any[][] = [];
+  error(...s: any[]): void { this.res.push(s); }
+}
+
+
+class DummyConsole implements Console {
+  public warnings: string[] = [];
+
+  log(message: string) {}
+  warn(message: string) { this.warnings.push(message); }
+}
+
+
+class TestModule {}
+function bootstrap(
+    cmpType: any, providers: Provider[] = [], platformProviders: StaticProvider[] = [],
+    imports: Type<any>[] = []): Promise<any> {
+  @NgModule({
+    imports: [BrowserModule, ...imports],
+    declarations: [cmpType],
+    bootstrap: [cmpType],
+    providers: providers,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  })
+  class TestModule {
+  }
+  return platformBrowserDynamic(platformProviders).bootstrapModule(TestModule);
+}
+
+{
+  let el: any /** TODO #9100 */, el2: any /** TODO #9100 */, testProviders: Provider[],
+      lightDom: any /** TODO #9100 */;
+
+  describe('bootstrap factory method', () => {
+    if (isNode) return;
+    let compilerConsole: DummyConsole;
+
+    beforeEachProviders(() => { return [Log]; });
+
+    beforeEach(inject([DOCUMENT], (doc: any) => {
+      destroyPlatform();
+      compilerConsole = new DummyConsole();
+      testProviders = [{provide: Console, useValue: compilerConsole}];
+
+      const oldRoots = getDOM().querySelectorAll(doc, 'hello-app,hello-app-2,light-dom-el');
+      for (let i = 0; i < oldRoots.length; i++) {
+        getDOM().remove(oldRoots[i]);
+      }
+
+      el = getDOM().createElement('hello-app', doc);
+      el2 = getDOM().createElement('hello-app-2', doc);
+      lightDom = getDOM().createElement('light-dom-el', doc);
+      getDOM().appendChild(doc.body, el);
+      getDOM().appendChild(doc.body, el2);
+      getDOM().appendChild(el, lightDom);
+      getDOM().setText(lightDom, 'loading');
+    }));
+
+    afterEach(destroyPlatform);
+
+    it('should throw if bootstrapped Directive is not a Component',
+       inject([AsyncTestCompleter], (done: AsyncTestCompleter) => {
+         const logger = new MockConsole();
+         const errorHandler = new ErrorHandler();
+         (errorHandler as any)._console = logger as any;
+         expect(
+             () => bootstrap(
+                 HelloRootDirectiveIsNotCmp, [{provide: ErrorHandler, useValue: errorHandler}]))
+             .toThrowError(`HelloRootDirectiveIsNotCmp cannot be used as an entry component.`);
+         done.done();
+       }));
+
+    it('should throw if no element is found',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const logger = new MockConsole();
+         const errorHandler = new ErrorHandler();
+         (errorHandler as any)._console = logger as any;
+         bootstrap(NonExistentComp, [
+           {provide: ErrorHandler, useValue: errorHandler}
+         ]).then(null, (reason) => {
+           expect(reason.message)
+               .toContain('The selector "non-existent" did not match any elements');
+           async.done();
+           return null;
+         });
+       }));
+
+    it('should throw if no provider', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const logger = new MockConsole();
+         const errorHandler = new ErrorHandler();
+         (errorHandler as any)._console = logger as any;
+
+         class IDontExist {}
+
+         @Component({selector: 'cmp', template: 'Cmp'})
+         class CustomCmp {
+           constructor(iDontExist: IDontExist) {}
+         }
+
+         @Component({
+           selector: 'hello-app',
+           template: '<cmp></cmp>',
+         })
+         class RootCmp {
+         }
+
+         @NgModule({declarations: [CustomCmp], exports: [CustomCmp]})
+         class CustomModule {
+         }
+
+         bootstrap(RootCmp, [{provide: ErrorHandler, useValue: errorHandler}], [], [
+           CustomModule
+         ]).then(null, (e: Error) => {
+           expect(e.message).toContain(
+               'StaticInjectorError(TestModule)[CustomCmp -> IDontExist]: \n' +
+               '  StaticInjectorError(Platform: core)[CustomCmp -> IDontExist]: \n' +
+               '    NullInjectorError: No provider for IDontExist!');
+           async.done();
+           return null;
+         });
+       }));
+
+    if (getDOM().supportsDOMEvents()) {
+      it('should forward the error to promise when bootstrap fails',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const logger = new MockConsole();
+           const errorHandler = new ErrorHandler();
+           (errorHandler as any)._console = logger as any;
+
+           const refPromise =
+               bootstrap(NonExistentComp, [{provide: ErrorHandler, useValue: errorHandler}]);
+           refPromise.then(null, (reason: any) => {
+             expect(reason.message)
+                 .toContain('The selector "non-existent" did not match any elements');
+             async.done();
+           });
+         }));
+
+      it('should invoke the default exception handler when bootstrap fails',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           const logger = new MockConsole();
+           const errorHandler = new ErrorHandler();
+           (errorHandler as any)._console = logger as any;
+
+           const refPromise =
+               bootstrap(NonExistentComp, [{provide: ErrorHandler, useValue: errorHandler}]);
+           refPromise.then(null, (reason) => {
+             expect(logger.res[0].join('#'))
+                 .toContain('ERROR#Error: The selector "non-existent" did not match any elements');
+             async.done();
+             return null;
+           });
+         }));
+    }
+
+    it('should create an injector promise', () => {
+      const refPromise = bootstrap(HelloRootCmp, testProviders);
+      expect(refPromise).toEqual(jasmine.any(Promise));
+    });
+
+    it('should set platform name to browser',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const refPromise = bootstrap(HelloRootCmp, testProviders);
+         refPromise.then((ref) => {
+           expect(isPlatformBrowser(ref.injector.get(PLATFORM_ID))).toBe(true);
+           async.done();
+         });
+       }));
+
+    it('should display hello world', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const refPromise = bootstrap(HelloRootCmp, testProviders);
+         refPromise.then((ref) => {
+           expect(el).toHaveText('hello world!');
+           expect(el.getAttribute('ng-version')).toEqual(VERSION.full);
+           async.done();
+         });
+       }));
+
+    it('should throw a descriptive error if BrowserModule is installed again via a lazily loaded module',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         @NgModule({imports: [BrowserModule]})
+         class AsyncModule {
+         }
+         bootstrap(HelloRootCmp, testProviders)
+             .then((ref: ComponentRef<HelloRootCmp>) => {
+               const compiler: Compiler = ref.injector.get(Compiler);
+               return compiler.compileModuleAsync(AsyncModule).then(factory => {
+                 expect(() => factory.create(ref.injector))
+                     .toThrowError(
+                         `BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.`);
+               });
+             })
+             .then(() => async.done(), err => async.fail(err));
+       }));
+
+    it('should support multiple calls to bootstrap',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const refPromise1 = bootstrap(HelloRootCmp, testProviders);
+         const refPromise2 = bootstrap(HelloRootCmp2, testProviders);
+         Promise.all([refPromise1, refPromise2]).then((refs) => {
+           expect(el).toHaveText('hello world!');
+           expect(el2).toHaveText('hello world, again!');
+           async.done();
+         });
+       }));
+
+    it('should not crash if change detection is invoked when the root component is disposed',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         bootstrap(HelloOnDestroyTickCmp, testProviders).then((ref) => {
+           expect(() => ref.destroy()).not.toThrow();
+           async.done();
+         });
+       }));
+
+    it('should unregister change detectors when components are disposed',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         bootstrap(HelloRootCmp, testProviders).then((ref) => {
+           const appRef = ref.injector.get(ApplicationRef);
+           ref.destroy();
+           expect(() => appRef.tick()).not.toThrow();
+           async.done();
+         });
+       }));
+
+    it('should make the provided bindings available to the application component',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const refPromise = bootstrap(
+             HelloRootCmp3, [testProviders, {provide: 'appBinding', useValue: 'BoundValue'}]);
+
+         refPromise.then((ref) => {
+           expect(ref.injector.get('appBinding')).toEqual('BoundValue');
+           async.done();
+         });
+       }));
+
+    it('should not override locale provided during bootstrap',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const refPromise =
+             bootstrap(HelloRootCmp, [testProviders], [{provide: LOCALE_ID, useValue: 'fr-FR'}]);
+
+         refPromise.then(ref => {
+           expect(ref.injector.get(LOCALE_ID)).toEqual('fr-FR');
+           async.done();
+         });
+       }));
+
+    it('should avoid cyclic dependencies when root component requires Lifecycle through DI',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const refPromise = bootstrap(HelloRootCmp4, testProviders);
+
+         refPromise.then((ref) => {
+           const appRef = ref.injector.get(ApplicationRef);
+           expect(appRef).toBeDefined();
+           async.done();
+         });
+       }));
+
+    it('should run platform initializers',
+       inject([Log, AsyncTestCompleter], (log: Log, async: AsyncTestCompleter) => {
+         const p = createPlatformFactory(platformBrowserDynamic, 'someName', [
+           {provide: PLATFORM_INITIALIZER, useValue: log.fn('platform_init1'), multi: true},
+           {provide: PLATFORM_INITIALIZER, useValue: log.fn('platform_init2'), multi: true}
+         ])();
+
+         @NgModule({
+           imports: [BrowserModule],
+           providers: [
+             {provide: APP_INITIALIZER, useValue: log.fn('app_init1'), multi: true},
+             {provide: APP_INITIALIZER, useValue: log.fn('app_init2'), multi: true}
+           ]
+         })
+         class SomeModule {
+           ngDoBootstrap() {}
+         }
+
+         expect(log.result()).toEqual('platform_init1; platform_init2');
+         log.clear();
+         p.bootstrapModule(SomeModule).then(() => {
+           expect(log.result()).toEqual('app_init1; app_init2');
+           async.done();
+         });
+       }));
+
+    it('should remove styles when transitioning from a server render',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+
+         @Component({
+           selector: 'root',
+           template: 'root',
+         })
+         class RootCmp {
+         }
+
+         @NgModule({
+           bootstrap: [RootCmp],
+           declarations: [RootCmp],
+           imports: [BrowserModule.withServerTransition({appId: 'my-app'})],
+         })
+         class TestModule {
+         }
+
+         // First, set up styles to be removed.
+         const dom = getDOM();
+         const platform = platformBrowserDynamic();
+         const document = platform.injector.get(DOCUMENT);
+         const style = dom.createElement('style', document);
+         dom.setAttribute(style, 'ng-transition', 'my-app');
+         dom.appendChild(document.head, style);
+
+         const root = dom.createElement('root', document);
+         dom.appendChild(document.body, root);
+
+         platform.bootstrapModule(TestModule).then(() => {
+           const styles: HTMLElement[] =
+               Array.prototype.slice.apply(dom.getElementsByTagName(document, 'style') || []);
+           styles.forEach(
+               style => { expect(dom.getAttribute(style, 'ng-transition')).not.toBe('my-app'); });
+           async.done();
+         });
+       }));
+
+    it('should register each application with the testability registry',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const refPromise1: Promise<ComponentRef<any>> = bootstrap(HelloRootCmp, testProviders);
+         const refPromise2: Promise<ComponentRef<any>> = bootstrap(HelloRootCmp2, testProviders);
+
+         Promise.all([refPromise1, refPromise2]).then((refs: ComponentRef<any>[]) => {
+           const registry = refs[0].injector.get(TestabilityRegistry);
+           const testabilities =
+               [refs[0].injector.get(Testability), refs[1].injector.get(Testability)];
+           Promise.all(testabilities).then((testabilities: Testability[]) => {
+             expect(registry.findTestabilityInTree(el)).toEqual(testabilities[0]);
+             expect(registry.findTestabilityInTree(el2)).toEqual(testabilities[1]);
+             async.done();
+           });
+         });
+       }));
+
+    it('should allow to pass schemas', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         bootstrap(HelloCmpUsingCustomElement, testProviders).then((compRef) => {
+           expect(el).toHaveText('hello world!');
+           async.done();
+         });
+       }));
+
+  });
+}
diff --git a/packages/platform-browser/test/browser/browser_adapter_spec.ts b/packages/platform-browser/test/browser/browser_adapter_spec.ts
new file mode 100644
index 000000000000..77538fd76692
--- /dev/null
+++ b/packages/platform-browser/test/browser/browser_adapter_spec.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 {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
+
+{
+  describe('cookies', () => {
+    if (isNode) return;
+    it('sets cookie values', () => {
+      getDOM().setCookie('my test cookie', 'my test value');
+      getDOM().setCookie('my other cookie', 'my test value 2');
+      expect(getDOM().getCookie('my test cookie')).toBe('my test value');
+    });
+  });
+}
diff --git a/packages/platform-browser/test/browser/meta_spec.ts b/packages/platform-browser/test/browser/meta_spec.ts
new file mode 100644
index 000000000000..66325a40f75e
--- /dev/null
+++ b/packages/platform-browser/test/browser/meta_spec.ts
@@ -0,0 +1,202 @@
+/**
+ * @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 {TestBed} from '@angular/core/testing';
+import {BrowserModule, Meta} from '@angular/platform-browser';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('Meta service', () => {
+    let doc: Document;
+    let metaService: Meta;
+    let defaultMeta: HTMLMetaElement;
+
+    beforeEach(() => {
+      doc = getDOM().createHtmlDocument();
+      metaService = new Meta(doc);
+      defaultMeta = getDOM().createElement('meta', doc) as HTMLMetaElement;
+      getDOM().setAttribute(defaultMeta, 'property', 'fb:app_id');
+      getDOM().setAttribute(defaultMeta, 'content', '123456789');
+      getDOM().appendChild(getDOM().getElementsByTagName(doc, 'head')[0], defaultMeta);
+    });
+
+    afterEach(() => getDOM().remove(defaultMeta));
+
+    it('should return meta tag matching selector', () => {
+      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 actual: HTMLMetaElement[] = metaService.getTags('name=author');
+      expect(actual.length).toEqual(2);
+      expect(getDOM().getAttribute(actual[0], 'content')).toEqual('page author');
+      expect(getDOM().getAttribute(actual[1], 'content')).toEqual('another page author');
+
+      // clean up
+      metaService.removeTagElement(tag1);
+      metaService.removeTagElement(tag2);
+    });
+
+    it('should return null if meta tag does not exist', () => {
+      const actual: HTMLMetaElement = metaService.getTag('fake=fake') !;
+      expect(actual).toBeNull();
+    });
+
+    it('should remove meta tag by the given selector', () => {
+      const selector = 'name=author';
+      expect(metaService.getTag(selector)).toBeNull();
+
+      metaService.addTag({name: 'author', content: 'page author'});
+
+      expect(metaService.getTag(selector)).not.toBeNull();
+
+      metaService.removeTag(selector);
+
+      expect(metaService.getTag(selector)).toBeNull();
+    });
+
+    it('should remove meta tag by the given element', () => {
+      const selector = 'name=keywords';
+      expect(metaService.getTag(selector)).toBeNull();
+
+      metaService.addTags([{name: 'keywords', content: 'meta test'}]);
+
+      const meta = metaService.getTag(selector) !;
+      expect(meta).not.toBeNull();
+
+      metaService.removeTagElement(meta);
+
+      expect(metaService.getTag(selector)).toBeNull();
+    });
+
+    it('should update meta tag matching the given selector', () => {
+      const selector = 'property="fb:app_id"';
+      metaService.updateTag({content: '4321'}, selector);
+
+      const actual = metaService.getTag(selector);
+      expect(actual).not.toBeNull();
+      expect(getDOM().getAttribute(actual, 'content')).toEqual('4321');
+    });
+
+    it('should extract selector from the tag definition', () => {
+      const selector = 'property="fb:app_id"';
+      metaService.updateTag({property: 'fb:app_id', content: '666'});
+
+      const actual = metaService.getTag(selector);
+      expect(actual).not.toBeNull();
+      expect(getDOM().getAttribute(actual, 'content')).toEqual('666');
+    });
+
+    it('should create meta tag if it does not exist', () => {
+      const selector = 'name="twitter:title"';
+
+      metaService.updateTag({name: 'twitter:title', content: 'Content Title'}, selector);
+
+      const actual = metaService.getTag(selector) !;
+      expect(actual).not.toBeNull();
+      expect(getDOM().getAttribute(actual, 'content')).toEqual('Content Title');
+
+      // clean up
+      metaService.removeTagElement(actual);
+    });
+
+    it('should add new meta tag', () => {
+      const selector = 'name="og:title"';
+      expect(metaService.getTag(selector)).toBeNull();
+
+      metaService.addTag({name: 'og:title', content: 'Content Title'});
+
+      const actual = metaService.getTag(selector) !;
+      expect(actual).not.toBeNull();
+      expect(getDOM().getAttribute(actual, 'content')).toEqual('Content Title');
+
+      // clean up
+      metaService.removeTagElement(actual);
+    });
+
+    it('should add multiple new meta tags', () => {
+      const nameSelector = 'name="twitter:title"';
+      const propertySelector = 'property="og:title"';
+      expect(metaService.getTag(nameSelector)).toBeNull();
+      expect(metaService.getTag(propertySelector)).toBeNull();
+
+      metaService.addTags([
+        {name: 'twitter:title', content: 'Content Title'},
+        {property: 'og:title', content: 'Content Title'}
+      ]);
+      const twitterMeta = metaService.getTag(nameSelector) !;
+      const fbMeta = metaService.getTag(propertySelector) !;
+      expect(twitterMeta).not.toBeNull();
+      expect(fbMeta).not.toBeNull();
+
+      // clean up
+      metaService.removeTagElement(twitterMeta);
+      metaService.removeTagElement(fbMeta);
+    });
+
+    it('should not add meta tag if it is already present on the page and has the same attr', () => {
+      const selector = 'property="fb:app_id"';
+      expect(metaService.getTags(selector).length).toEqual(1);
+
+      metaService.addTag({property: 'fb:app_id', content: '123456789'});
+
+      expect(metaService.getTags(selector).length).toEqual(1);
+    });
+
+    it('should add meta tag if it is already present on the page and but has different attr',
+       () => {
+         const selector = 'property="fb:app_id"';
+         expect(metaService.getTags(selector).length).toEqual(1);
+
+         const meta = metaService.addTag({property: 'fb:app_id', content: '666'}) !;
+
+         expect(metaService.getTags(selector).length).toEqual(2);
+
+         // clean up
+         metaService.removeTagElement(meta);
+       });
+
+    it('should add meta tag if it is already present on the page and force true', () => {
+      const selector = 'property="fb:app_id"';
+      expect(metaService.getTags(selector).length).toEqual(1);
+
+      const meta = metaService.addTag({property: 'fb:app_id', content: '123456789'}, true) !;
+
+      expect(metaService.getTags(selector).length).toEqual(2);
+
+      // clean up
+      metaService.removeTagElement(meta);
+    });
+
+  });
+
+  describe('integration test', () => {
+
+    @Injectable()
+    class DependsOnMeta {
+      constructor(public meta: Meta) {}
+    }
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [BrowserModule],
+        providers: [DependsOnMeta],
+      });
+    });
+
+    it('should inject Meta service when using BrowserModule',
+       () => expect(TestBed.get(DependsOnMeta).meta).toBeAnInstanceOf(Meta));
+  });
+}
diff --git a/packages/platform-browser/test/browser/rectangle_mock.ts b/packages/platform-browser/test/browser/rectangle_mock.ts
new file mode 100644
index 000000000000..8985c34b6c3f
--- /dev/null
+++ b/packages/platform-browser/test/browser/rectangle_mock.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 createRectangle(
+    left: any /** TODO #9100 */, top: any /** TODO #9100 */, width: any /** TODO #9100 */,
+    height: any /** TODO #9100 */) {
+  return {left, top, width, height};
+}
diff --git a/modules/angular2/test/services/static_assets/200.html b/packages/platform-browser/test/browser/static_assets/200.html
similarity index 100%
rename from modules/angular2/test/services/static_assets/200.html
rename to packages/platform-browser/test/browser/static_assets/200.html
diff --git a/packages/platform-browser/test/browser/title_spec.ts b/packages/platform-browser/test/browser/title_spec.ts
new file mode 100644
index 000000000000..a9032eb4f5cc
--- /dev/null
+++ b/packages/platform-browser/test/browser/title_spec.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 {Injectable} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {BrowserModule, Title} from '@angular/platform-browser';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('title service', () => {
+    let doc: Document;
+    let initialTitle: string;
+    let titleService: Title;
+
+    beforeEach(() => {
+      doc = getDOM().createHtmlDocument();
+      initialTitle = getDOM().getTitle(doc);
+      titleService = new Title(doc);
+    });
+
+    afterEach(() => { getDOM().setTitle(doc, initialTitle); });
+
+    it('should allow reading initial title',
+       () => { expect(titleService.getTitle()).toEqual(initialTitle); });
+
+    it('should set a title on the injected document', () => {
+      titleService.setTitle('test title');
+      expect(getDOM().getTitle(doc)).toEqual('test title');
+      expect(titleService.getTitle()).toEqual('test title');
+    });
+
+    it('should reset title to empty string if title not provided', () => {
+      titleService.setTitle(null !);
+      expect(getDOM().getTitle(doc)).toEqual('');
+    });
+  });
+
+  describe('integration test', () => {
+
+    @Injectable()
+    class DependsOnTitle {
+      constructor(public title: Title) {}
+    }
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [BrowserModule],
+        providers: [DependsOnTitle],
+      });
+    });
+
+    it('should inject Title service when using BrowserModule',
+       () => { expect(TestBed.get(DependsOnTitle).title).toBeAnInstanceOf(Title); });
+  });
+}
diff --git a/packages/platform-browser/test/browser/tools/spies.ts b/packages/platform-browser/test/browser/tools/spies.ts
new file mode 100644
index 000000000000..40f3bdce9e98
--- /dev/null
+++ b/packages/platform-browser/test/browser/tools/spies.ts
@@ -0,0 +1,28 @@
+/**
+ * @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, ɵglobal as global} from '@angular/core';
+import {ApplicationRef} from '@angular/core/src/application_ref';
+import {SpyObject} from '@angular/core/testing/src/testing_internal';
+
+export class SpyApplicationRef extends SpyObject {
+  constructor() { super(ApplicationRef); }
+}
+
+export class SpyComponentRef extends SpyObject {
+  injector: any /** TODO #9100 */;
+  constructor() {
+    super();
+    this.injector =
+        Injector.create([{provide: ApplicationRef, useClass: SpyApplicationRef, deps: []}]);
+  }
+}
+
+export function callNgProfilerTimeChangeDetection(config?: any /** TODO #9100 */): void {
+  (<any>global).ng.profiler.timeChangeDetection(config);
+}
diff --git a/packages/platform-browser/test/browser/tools/tools_spec.ts b/packages/platform-browser/test/browser/tools/tools_spec.ts
new file mode 100644
index 000000000000..e66f217d4585
--- /dev/null
+++ b/packages/platform-browser/test/browser/tools/tools_spec.ts
@@ -0,0 +1,25 @@
+/**
+ * @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 {disableDebugTools, enableDebugTools} from '@angular/platform-browser';
+
+import {SpyComponentRef, callNgProfilerTimeChangeDetection} from './spies';
+
+{
+  describe('profiler', () => {
+    if (isNode) return;
+    beforeEach(() => { enableDebugTools((<any>new SpyComponentRef())); });
+
+    afterEach(() => { disableDebugTools(); });
+
+    it('should time change detection', () => { callNgProfilerTimeChangeDetection(); });
+
+    it('should time change detection with recording',
+       () => { callNgProfilerTimeChangeDetection({'record': true}); });
+  });
+}
diff --git a/packages/platform-browser/test/browser/transfer_state_spec.ts b/packages/platform-browser/test/browser/transfer_state_spec.ts
new file mode 100644
index 000000000000..d7dae0b4ecf8
--- /dev/null
+++ b/packages/platform-browser/test/browser/transfer_state_spec.ts
@@ -0,0 +1,133 @@
+/**
+ * @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 {TestBed} from '@angular/core/testing';
+import {BrowserModule, BrowserTransferStateModule, TransferState} from '@angular/platform-browser';
+import {StateKey, escapeHtml, makeStateKey, unescapeHtml} from '@angular/platform-browser/src/browser/transfer_state';
+import {DOCUMENT} from '@angular/platform-browser/src/dom/dom_tokens';
+
+(function() {
+  function removeScriptTag(doc: Document, id: string) {
+    const existing = doc.getElementById(id);
+    if (existing) {
+      doc.body.removeChild(existing);
+    }
+  }
+
+  function addScriptTag(doc: Document, appId: string, data: {}) {
+    const script = doc.createElement('script');
+    const id = appId + '-state';
+    script.id = id;
+    script.setAttribute('type', 'application/json');
+    script.textContent = escapeHtml(JSON.stringify(data));
+
+    // Remove any stale script tags.
+    removeScriptTag(doc, id);
+
+    doc.body.appendChild(script);
+  }
+
+  describe('TransferState', () => {
+    const APP_ID = 'test-app';
+    let doc: Document;
+
+    const TEST_KEY = makeStateKey<number>('test');
+    const DELAYED_KEY = makeStateKey<string>('delayed');
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [
+          BrowserModule.withServerTransition({appId: APP_ID}),
+          BrowserTransferStateModule,
+        ]
+      });
+      doc = TestBed.get(DOCUMENT);
+    });
+
+    afterEach(() => { removeScriptTag(doc, APP_ID + '-state'); });
+
+    it('is initialized from script tag', () => {
+      addScriptTag(doc, APP_ID, {test: 10});
+      const transferState: TransferState = TestBed.get(TransferState);
+      expect(transferState.get(TEST_KEY, 0)).toBe(10);
+    });
+
+    it('is initialized to empty state if script tag not found', () => {
+      const transferState: TransferState = TestBed.get(TransferState);
+      expect(transferState.get(TEST_KEY, 0)).toBe(0);
+    });
+
+    it('supports adding new keys using set', () => {
+      const transferState: TransferState = TestBed.get(TransferState);
+      transferState.set(TEST_KEY, 20);
+      expect(transferState.get(TEST_KEY, 0)).toBe(20);
+      expect(transferState.hasKey(TEST_KEY)).toBe(true);
+    });
+
+    it('supports setting and accessing value \'0\' via get', () => {
+      const transferState: TransferState = TestBed.get(TransferState);
+      transferState.set(TEST_KEY, 0);
+      expect(transferState.get(TEST_KEY, 20)).toBe(0);
+      expect(transferState.hasKey(TEST_KEY)).toBe(true);
+    });
+
+    it('supports setting and accessing value \'false\' via get', () => {
+      const transferState: TransferState = TestBed.get(TransferState);
+      transferState.set(TEST_KEY, false);
+      expect(transferState.get(TEST_KEY, true)).toBe(false);
+      expect(transferState.hasKey(TEST_KEY)).toBe(true);
+    });
+
+    it('supports setting and accessing value \'null\' via get', () => {
+      const transferState: TransferState = TestBed.get(TransferState);
+      transferState.set(TEST_KEY, null);
+      expect(transferState.get(TEST_KEY, 20 as any)).toBe(null);
+      expect(transferState.hasKey(TEST_KEY)).toBe(true);
+    });
+
+    it('supports removing keys', () => {
+      const transferState: TransferState = TestBed.get(TransferState);
+      transferState.set(TEST_KEY, 20);
+      transferState.remove(TEST_KEY);
+      expect(transferState.get(TEST_KEY, 0)).toBe(0);
+      expect(transferState.hasKey(TEST_KEY)).toBe(false);
+    });
+
+    it('supports serialization using toJson()', () => {
+      const transferState: TransferState = TestBed.get(TransferState);
+      transferState.set(TEST_KEY, 20);
+      expect(transferState.toJson()).toBe('{"test":20}');
+    });
+
+    it('calls onSerialize callbacks when calling toJson()', () => {
+      const transferState: TransferState = TestBed.get(TransferState);
+      transferState.set(TEST_KEY, 20);
+
+      let value = 'initial';
+      transferState.onSerialize(DELAYED_KEY, () => value);
+      value = 'changed';
+
+      expect(transferState.toJson()).toBe('{"test":20,"delayed":"changed"}');
+    });
+  });
+
+  describe('escape/unescape', () => {
+    it('works with all escaped characters', () => {
+      const testString = '</script><script>alert(\'Hello&\' + "World");';
+      const testObj = {testString};
+      const escaped = escapeHtml(JSON.stringify(testObj));
+      expect(escaped).toBe(
+          '{&q;testString&q;:&q;&l;/script&g;&l;script&g;' +
+          'alert(&s;Hello&a;&s; + \\&q;World\\&q;);&q;}');
+
+      const unescapedObj = JSON.parse(unescapeHtml(escaped));
+      expect(unescapedObj['testString']).toBe(testString);
+    });
+  });
+})();
diff --git a/packages/platform-browser/test/browser_util_spec.ts b/packages/platform-browser/test/browser_util_spec.ts
new file mode 100644
index 000000000000..664f2cc3667f
--- /dev/null
+++ b/packages/platform-browser/test/browser_util_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 {BrowserDetection} from '../testing/src/browser_util';
+
+{
+  describe('BrowserDetection', () => {
+
+    const browsers = [
+      {
+        name: 'Chrome',
+        ua: 'Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.125 Safari/537.36',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: false,
+        isWebkit: true,
+        isIOS7: false,
+        isSlow: false,
+        isChromeDesktop: true,
+        isOldChrome: false
+      },
+      {
+        name: 'Chrome mobile',
+        ua: 'Mozilla/5.0 (Linux; Android 5.1.1; D5803 Build/23.4.A.0.546) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.133 Mobile Safari/537.36',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: false,
+        isWebkit: true,
+        isIOS7: false,
+        isSlow: false,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'Firefox',
+        ua: 'Mozilla/5.0 (X11; Linux i686; rv:40.0) Gecko/20100101 Firefox/40.0',
+        isFirefox: true,
+        isAndroid: false,
+        isEdge: false,
+        isIE: false,
+        isWebkit: false,
+        isIOS7: false,
+        isSlow: false,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'IE9',
+        ua: 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727)',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: true,
+        isWebkit: false,
+        isIOS7: false,
+        isSlow: true,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'IE10',
+        ua: 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C)',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: true,
+        isWebkit: false,
+        isIOS7: false,
+        isSlow: true,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'IE11',
+        ua: 'Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; rv:11.0) like Gecko',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: true,
+        isWebkit: false,
+        isIOS7: false,
+        isSlow: true,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'IEMobile',
+        ua: 'Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 520) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: true,
+        isWebkit: false,
+        isIOS7: false,
+        isSlow: true,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'Edge',
+        ua: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: true,
+        isIE: false,
+        isWebkit: false,
+        isIOS7: false,
+        isSlow: false,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'Android4.1',
+        ua: 'Mozilla/5.0 (Linux; U; Android 4.1.1; en-us; Android SDK built for x86 Build/JRO03H) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
+        isFirefox: false,
+        isAndroid: true,
+        isEdge: false,
+        isIE: false,
+        isWebkit: true,
+        isIOS7: false,
+        isSlow: true,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'Android4.2',
+        ua: 'Mozilla/5.0 (Linux; U; Android 4.2; en-us; Android SDK built for x86 Build/JOP40C) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
+        isFirefox: false,
+        isAndroid: true,
+        isEdge: false,
+        isIE: false,
+        isWebkit: true,
+        isIOS7: false,
+        isSlow: true,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'Android4.3',
+        ua: 'Mozilla/5.0 (Linux; U; Android 4.3; en-us; Android SDK built for x86 Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
+        isFirefox: false,
+        isAndroid: true,
+        isEdge: false,
+        isIE: false,
+        isWebkit: true,
+        isIOS7: false,
+        isSlow: true,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'Android4.4',
+        ua: 'Mozilla/5.0 (Linux; Android 4.4.2; Android SDK built for x86 Build/KK) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: false,
+        isWebkit: true,
+        isIOS7: false,
+        isSlow: false,
+        isChromeDesktop: false,
+        isOldChrome: true
+      },
+      {
+        name: 'Safari7',
+        ua: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/600.7.12 (KHTML, like Gecko) Version/7.1.7 Safari/537.85.16',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: false,
+        isWebkit: true,
+        isIOS7: false,
+        isSlow: false,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'Safari8',
+        ua: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/600.7.12 (KHTML, like Gecko) Version/8.0.7 Safari/600.7.12',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: false,
+        isWebkit: true,
+        isIOS7: false,
+        isSlow: false,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'iOS7',
+        ua: 'Mozilla/5.0 (iPhone; CPU iPhone OS 7_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D167 Safari/9537.53',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: false,
+        isWebkit: true,
+        isIOS7: true,
+        isSlow: true,
+        isChromeDesktop: false,
+        isOldChrome: false
+      },
+      {
+        name: 'iOS8',
+        ua: 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_4 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12H141 Safari/600.1.4',
+        isFirefox: false,
+        isAndroid: false,
+        isEdge: false,
+        isIE: false,
+        isWebkit: true,
+        isIOS7: false,
+        isSlow: false,
+        isChromeDesktop: false,
+        isOldChrome: false
+      }
+    ];
+
+    browsers.forEach((browser: {[key: string]: any}) => {
+      it(`should detect ${browser[ 'name']}`, () => {
+        const bd = new BrowserDetection(<string>browser['ua']);
+        expect(bd.isFirefox).toBe(browser['isFirefox']);
+        expect(bd.isAndroid).toBe(browser['isAndroid']);
+        expect(bd.isEdge).toBe(browser['isEdge']);
+        expect(bd.isIE).toBe(browser['isIE']);
+        expect(bd.isWebkit).toBe(browser['isWebkit']);
+        expect(bd.isIOS7).toBe(browser['isIOS7']);
+        expect(bd.isSlow).toBe(browser['isSlow']);
+        expect(bd.isChromeDesktop).toBe(browser['isChromeDesktop']);
+        expect(bd.isOldChrome).toBe(browser['isOldChrome']);
+      });
+    });
+  });
+}
diff --git a/packages/platform-browser/test/dom/dom_renderer_spec.ts b/packages/platform-browser/test/dom/dom_renderer_spec.ts
new file mode 100644
index 000000000000..9e69d3d5adc7
--- /dev/null
+++ b/packages/platform-browser/test/dom/dom_renderer_spec.ts
@@ -0,0 +1,162 @@
+/**
+ * @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, Renderer2, ViewEncapsulation} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser/src/dom/debug/by';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+import {NAMESPACE_URIS} from '../../src/dom/dom_renderer';
+
+{
+  describe('DefaultDomRendererV2', () => {
+    if (isNode) return;
+    let renderer: Renderer2;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          TestCmp, SomeApp, CmpEncapsulationEmulated, CmpEncapsulationNative, CmpEncapsulationNone,
+          CmpEncapsulationNative
+        ]
+      });
+      renderer = TestBed.createComponent(TestCmp).componentInstance.renderer;
+    });
+
+    describe('setAttribute', () => {
+      describe('with namespace', () => {
+        it('xmlns', () => shouldSetAttributeWithNs('xmlns'));
+        it('xml', () => shouldSetAttributeWithNs('xml'));
+        it('svg', () => shouldSetAttributeWithNs('svg'));
+        it('xhtml', () => shouldSetAttributeWithNs('xhtml'));
+        it('xlink', () => shouldSetAttributeWithNs('xlink'));
+
+        it('unknown', () => {
+          const div = document.createElement('div');
+          expect(div.hasAttribute('unknown:name')).toBe(false);
+
+          renderer.setAttribute(div, 'name', 'value', 'unknown');
+
+          expect(div.getAttribute('unknown:name')).toBe('value');
+        });
+
+        function shouldSetAttributeWithNs(namespace: string): void {
+          const namespaceUri = NAMESPACE_URIS[namespace];
+          const div = document.createElement('div');
+          expect(div.hasAttributeNS(namespaceUri, 'name')).toBe(false);
+
+          renderer.setAttribute(div, 'name', 'value', namespace);
+
+          expect(div.getAttributeNS(namespaceUri, 'name')).toBe('value');
+        }
+      });
+    });
+
+    describe('removeAttribute', () => {
+      describe('with namespace', () => {
+        it('xmlns', () => shouldRemoveAttributeWithNs('xmlns'));
+        it('xml', () => shouldRemoveAttributeWithNs('xml'));
+        it('svg', () => shouldRemoveAttributeWithNs('svg'));
+        it('xhtml', () => shouldRemoveAttributeWithNs('xhtml'));
+        it('xlink', () => shouldRemoveAttributeWithNs('xlink'));
+
+        it('unknown', () => {
+          const div = document.createElement('div');
+          div.setAttribute('unknown:name', 'value');
+          expect(div.hasAttribute('unknown:name')).toBe(true);
+
+          renderer.removeAttribute(div, 'name', 'unknown');
+
+          expect(div.hasAttribute('unknown:name')).toBe(false);
+        });
+
+        function shouldRemoveAttributeWithNs(namespace: string): void {
+          const namespaceUri = NAMESPACE_URIS[namespace];
+          const div = document.createElement('div');
+          div.setAttributeNS(namespaceUri, `${namespace}:name`, 'value');
+          expect(div.hasAttributeNS(namespaceUri, 'name')).toBe(true);
+
+          renderer.removeAttribute(div, 'name', namespace);
+
+          expect(div.hasAttributeNS(namespaceUri, 'name')).toBe(false);
+        }
+      });
+    });
+
+    // other browsers don't support shadow dom
+    if (browserDetection.isChromeDesktop) {
+      it('should allow to style components with emulated encapsulation and no encapsulation inside of components with shadow DOM',
+         () => {
+           const fixture = TestBed.createComponent(SomeApp);
+
+           const cmp = fixture.debugElement.query(By.css('cmp-native')).nativeElement;
+
+
+           const native = cmp.shadowRoot.querySelector('.native');
+           expect(window.getComputedStyle(native).color).toEqual('rgb(255, 0, 0)');
+
+           const emulated = cmp.shadowRoot.querySelector('.emulated');
+           expect(window.getComputedStyle(emulated).color).toEqual('rgb(0, 0, 255)');
+
+           const none = cmp.shadowRoot.querySelector('.none');
+           expect(window.getComputedStyle(none).color).toEqual('rgb(0, 255, 0)');
+         });
+    }
+  });
+}
+
+@Component({
+  selector: 'cmp-native',
+  template: `<div class="native"></div><cmp-emulated></cmp-emulated><cmp-none></cmp-none>`,
+  styles: [`.native { color: red; }`],
+  encapsulation: ViewEncapsulation.Native
+})
+class CmpEncapsulationNative {
+}
+
+@Component({
+  selector: 'cmp-emulated',
+  template: `<div class="emulated"></div>`,
+  styles: [`.emulated { color: blue; }`],
+  encapsulation: ViewEncapsulation.Emulated
+})
+class CmpEncapsulationEmulated {
+}
+
+@Component({
+  selector: 'cmp-none',
+  template: `<div class="none"></div>`,
+  styles: [`.none { color: lime; }`],
+  encapsulation: ViewEncapsulation.None
+})
+class CmpEncapsulationNone {
+}
+
+@Component({
+  selector: 'cmp-shadow',
+  template: `<div class="shadow"></div><cmp-emulated></cmp-emulated><cmp-none></cmp-none>`,
+  styles: [`.native { color: red; }`],
+  encapsulation: ViewEncapsulation.ShadowDom
+})
+class CmpEncapsulationShadow {
+}
+
+@Component({
+  selector: 'some-app',
+  template: `
+	  <cmp-native></cmp-native>
+	  <cmp-emulated></cmp-emulated>
+	  <cmp-none></cmp-none>
+  `,
+})
+export class SomeApp {
+}
+
+@Component({selector: 'test-cmp', template: ''})
+class TestCmp {
+  constructor(public renderer: Renderer2) {}
+}
diff --git a/packages/platform-browser/test/dom/events/event_manager_spec.ts b/packages/platform-browser/test/dom/events/event_manager_spec.ts
new file mode 100644
index 000000000000..b294e4e5c0af
--- /dev/null
+++ b/packages/platform-browser/test/dom/events/event_manager_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 {NgZone} from '@angular/core/src/zone/ng_zone';
+import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {DomEventsPlugin} from '@angular/platform-browser/src/dom/events/dom_events';
+import {EventManager, EventManagerPlugin} from '@angular/platform-browser/src/dom/events/event_manager';
+import {el} from '../../../testing/src/browser_util';
+
+(function() {
+  if (isNode) return;
+  let domEventPlugin: DomEventsPlugin;
+  let doc: any;
+  let zone: NgZone;
+
+  describe('EventManager', () => {
+
+    beforeEach(() => {
+      doc = getDOM().supportsDOMEvents() ? document : getDOM().createHtmlDocument();
+      zone = new NgZone({});
+      domEventPlugin = new DomEventsPlugin(doc, zone, null);
+    });
+
+    it('should delegate event bindings to plugins that are passed in from the most generic one to the most specific one',
+       () => {
+         const element = el('<div></div>');
+         const handler = (e: any /** TODO #9100 */) => e;
+         const plugin = new FakeEventManagerPlugin(doc, ['click']);
+         const manager = new EventManager([domEventPlugin, plugin], new FakeNgZone());
+         manager.addEventListener(element, 'click', handler);
+         expect(plugin.eventHandler['click']).toBe(handler);
+       });
+
+    it('should delegate event bindings to the first plugin supporting the event', () => {
+      const element = el('<div></div>');
+      const clickHandler = (e: any /** TODO #9100 */) => e;
+      const dblClickHandler = (e: any /** TODO #9100 */) => e;
+      const plugin1 = new FakeEventManagerPlugin(doc, ['dblclick']);
+      const plugin2 = new FakeEventManagerPlugin(doc, ['click', 'dblclick']);
+      const manager = new EventManager([plugin2, plugin1], new FakeNgZone());
+      manager.addEventListener(element, 'click', clickHandler);
+      manager.addEventListener(element, 'dblclick', dblClickHandler);
+      expect(plugin2.eventHandler['click']).toBe(clickHandler);
+      expect(plugin1.eventHandler['dblclick']).toBe(dblClickHandler);
+    });
+
+    it('should throw when no plugin can handle the event', () => {
+      const element = el('<div></div>');
+      const plugin = new FakeEventManagerPlugin(doc, ['dblclick']);
+      const manager = new EventManager([plugin], new FakeNgZone());
+      expect(() => manager.addEventListener(element, 'click', null !))
+          .toThrowError('No event manager plugin found for event click');
+    });
+
+    it('events are caught when fired from a child', () => {
+      const element = el('<div><div></div></div>');
+      // Workaround for https://bugs.webkit.org/show_bug.cgi?id=122755
+      getDOM().appendChild(doc.body, element);
+
+      const child = getDOM().firstChild(element);
+      const dispatchedEvent = getDOM().createMouseEvent('click');
+      let receivedEvent: any /** TODO #9100 */ = null;
+      const handler = (e: any /** TODO #9100 */) => { receivedEvent = e; };
+      const manager = new EventManager([domEventPlugin], new FakeNgZone());
+      manager.addEventListener(element, 'click', handler);
+      getDOM().dispatchEvent(child, dispatchedEvent);
+
+      expect(receivedEvent).toBe(dispatchedEvent);
+    });
+
+    it('should add and remove global event listeners', () => {
+      const element = el('<div><div></div></div>');
+      getDOM().appendChild(doc.body, element);
+      const dispatchedEvent = getDOM().createMouseEvent('click');
+      let receivedEvent: any /** TODO #9100 */ = null;
+      const handler = (e: any /** TODO #9100 */) => { receivedEvent = e; };
+      const manager = new EventManager([domEventPlugin], new FakeNgZone());
+
+      const remover = manager.addGlobalEventListener('document', 'click', handler);
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvent).toBe(dispatchedEvent);
+
+      receivedEvent = null;
+      remover();
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvent).toBe(null);
+    });
+
+    it('should keep zone when addEventListener', () => {
+      const Zone = (window as any)['Zone'];
+
+      const element = el('<div><div></div></div>');
+      getDOM().appendChild(doc.body, element);
+      const dispatchedEvent = getDOM().createMouseEvent('click');
+      let receivedEvent: any /** TODO #9100 */ = null;
+      let receivedZone: any = null;
+      const handler = (e: any /** TODO #9100 */) => {
+        receivedEvent = e;
+        receivedZone = Zone.current;
+      };
+      const manager = new EventManager([domEventPlugin], new FakeNgZone());
+
+      let remover: any = null;
+      Zone.root.run(() => { remover = manager.addEventListener(element, 'click', handler); });
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvent).toBe(dispatchedEvent);
+      expect(receivedZone.name).toBe(Zone.root.name);
+
+      receivedEvent = null;
+      remover && remover();
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvent).toBe(null);
+    });
+
+    it('should keep zone when addEventListener multiple times', () => {
+      const Zone = (window as any)['Zone'];
+
+      const element = el('<div><div></div></div>');
+      getDOM().appendChild(doc.body, element);
+      const dispatchedEvent = getDOM().createMouseEvent('click');
+      let receivedEvents: any[] /** TODO #9100 */ = [];
+      let receivedZones: any[] = [];
+      const handler1 = (e: any /** TODO #9100 */) => {
+        receivedEvents.push(e);
+        receivedZones.push(Zone.current.name);
+      };
+      const handler2 = (e: any /** TODO #9100 */) => {
+        receivedEvents.push(e);
+        receivedZones.push(Zone.current.name);
+      };
+      const manager = new EventManager([domEventPlugin], new FakeNgZone());
+
+      let remover1: any = null;
+      let remover2: any = null;
+      Zone.root.run(() => { remover1 = manager.addEventListener(element, 'click', handler1); });
+      Zone.root.fork({name: 'test'}).run(() => {
+        remover2 = manager.addEventListener(element, 'click', handler2);
+      });
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvents).toEqual([dispatchedEvent, dispatchedEvent]);
+      expect(receivedZones).toEqual([Zone.root.name, 'test']);
+
+      receivedEvents = [];
+      remover1 && remover1();
+      remover2 && remover2();
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvents).toEqual([]);
+    });
+
+    it('should support event.stopImmediatePropagation', () => {
+      const Zone = (window as any)['Zone'];
+
+      const element = el('<div><div></div></div>');
+      getDOM().appendChild(doc.body, element);
+      const dispatchedEvent = getDOM().createMouseEvent('click');
+      let receivedEvents: any[] /** TODO #9100 */ = [];
+      let receivedZones: any[] = [];
+      const handler1 = (e: any /** TODO #9100 */) => {
+        receivedEvents.push(e);
+        receivedZones.push(Zone.current.name);
+        e.stopImmediatePropagation();
+      };
+      const handler2 = (e: any /** TODO #9100 */) => {
+        receivedEvents.push(e);
+        receivedZones.push(Zone.current.name);
+      };
+      const manager = new EventManager([domEventPlugin], new FakeNgZone());
+
+      let remover1: any = null;
+      let remover2: any = null;
+      Zone.root.run(() => { remover1 = manager.addEventListener(element, 'click', handler1); });
+      Zone.root.fork({name: 'test'}).run(() => {
+        remover2 = manager.addEventListener(element, 'click', handler2);
+      });
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvents).toEqual([dispatchedEvent]);
+      expect(receivedZones).toEqual([Zone.root.name]);
+
+      receivedEvents = [];
+      remover1 && remover1();
+      remover2 && remover2();
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvents).toEqual([]);
+    });
+
+    it('should handle event correctly when one handler remove itself ', () => {
+      const Zone = (window as any)['Zone'];
+
+      const element = el('<div><div></div></div>');
+      getDOM().appendChild(doc.body, element);
+      const dispatchedEvent = getDOM().createMouseEvent('click');
+      let receivedEvents: any[] /** TODO #9100 */ = [];
+      let receivedZones: any[] = [];
+      let remover1: any = null;
+      let remover2: any = null;
+      const handler1 = (e: any /** TODO #9100 */) => {
+        receivedEvents.push(e);
+        receivedZones.push(Zone.current.name);
+        remover1 && remover1();
+      };
+      const handler2 = (e: any /** TODO #9100 */) => {
+        receivedEvents.push(e);
+        receivedZones.push(Zone.current.name);
+      };
+      const manager = new EventManager([domEventPlugin], new FakeNgZone());
+
+      Zone.root.run(() => { remover1 = manager.addEventListener(element, 'click', handler1); });
+      Zone.root.fork({name: 'test'}).run(() => {
+        remover2 = manager.addEventListener(element, 'click', handler2);
+      });
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvents).toEqual([dispatchedEvent, dispatchedEvent]);
+      expect(receivedZones).toEqual([Zone.root.name, 'test']);
+
+      receivedEvents = [];
+      remover1 && remover1();
+      remover2 && remover2();
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvents).toEqual([]);
+    });
+
+    it('should only add same callback once when addEventListener', () => {
+      const Zone = (window as any)['Zone'];
+
+      const element = el('<div><div></div></div>');
+      getDOM().appendChild(doc.body, element);
+      const dispatchedEvent = getDOM().createMouseEvent('click');
+      let receivedEvents: any[] /** TODO #9100 */ = [];
+      let receivedZones: any[] = [];
+      const handler = (e: any /** TODO #9100 */) => {
+        receivedEvents.push(e);
+        receivedZones.push(Zone.current.name);
+      };
+      const manager = new EventManager([domEventPlugin], new FakeNgZone());
+
+      let remover1: any = null;
+      let remover2: any = null;
+      Zone.root.run(() => { remover1 = manager.addEventListener(element, 'click', handler); });
+      Zone.root.fork({name: 'test'}).run(() => {
+        remover2 = manager.addEventListener(element, 'click', handler);
+      });
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvents).toEqual([dispatchedEvent]);
+      expect(receivedZones).toEqual([Zone.root.name]);
+
+      receivedEvents = [];
+      remover1 && remover1();
+      remover2 && remover2();
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvents).toEqual([]);
+    });
+
+    it('should be able to remove event listener which was added inside of ngZone', () => {
+      const Zone = (window as any)['Zone'];
+
+      const element = el('<div><div></div></div>');
+      getDOM().appendChild(doc.body, element);
+      const dispatchedEvent = getDOM().createMouseEvent('click');
+      let receivedEvents: any[] /** TODO #9100 */ = [];
+      let receivedZones: any[] = [];
+      const handler1 = (e: any /** TODO #9100 */) => {
+        receivedEvents.push(e);
+        receivedZones.push(Zone.current.name);
+      };
+      const handler2 = (e: any /** TODO #9100 */) => {
+        receivedEvents.push(e);
+        receivedZones.push(Zone.current.name);
+      };
+      const manager = new EventManager([domEventPlugin], new FakeNgZone());
+
+      let remover1: any = null;
+      let remover2: any = null;
+      // handler1 is added in root zone
+      Zone.root.run(() => { remover1 = manager.addEventListener(element, 'click', handler1); });
+      // handler2 is added in 'angular' zone
+      Zone.root.fork({name: 'fakeAngularZone', properties: {isAngularZone: true}}).run(() => {
+        remover2 = manager.addEventListener(element, 'click', handler2);
+      });
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvents).toEqual([dispatchedEvent, dispatchedEvent]);
+      expect(receivedZones).toEqual([Zone.root.name, 'fakeAngularZone']);
+
+      receivedEvents = [];
+      remover1 && remover1();
+      remover2 && remover2();
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      // handler1 and handler2 are added in different zone
+      // one is angular zone, the other is not
+      // should still be able to remove them correctly
+      expect(receivedEvents).toEqual([]);
+    });
+
+    it('should run blackListedEvents handler outside of ngZone', () => {
+      const Zone = (window as any)['Zone'];
+      const element = el('<div><div></div></div>');
+      getDOM().appendChild(doc.body, element);
+      const dispatchedEvent = getDOM().createMouseEvent('scroll');
+      let receivedEvent: any /** TODO #9100 */ = null;
+      let receivedZone: any = null;
+      const handler = (e: any /** TODO #9100 */) => {
+        receivedEvent = e;
+        receivedZone = Zone.current;
+      };
+      const manager = new EventManager([domEventPlugin], new FakeNgZone());
+
+      let remover = manager.addEventListener(element, 'scroll', handler);
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvent).toBe(dispatchedEvent);
+      expect(receivedZone.name).toBe(Zone.root.name);
+
+      receivedEvent = null;
+      remover && remover();
+      getDOM().dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvent).toBe(null);
+    });
+  });
+})();
+
+/** @internal */
+class FakeEventManagerPlugin extends EventManagerPlugin {
+  eventHandler: {[event: string]: Function} = {};
+
+  constructor(doc: any, public supportedEvents: string[]) { super(doc); }
+
+  supports(eventName: string): boolean { return this.supportedEvents.indexOf(eventName) > -1; }
+
+  addEventListener(element: any, eventName: string, handler: Function) {
+    this.eventHandler[eventName] = handler;
+    return () => { delete (this.eventHandler[eventName]); };
+  }
+}
+
+class FakeNgZone extends NgZone {
+  constructor() { super({enableLongStackTrace: false}); }
+  run<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T { return fn(); }
+  runOutsideAngular(fn: Function) { return fn(); }
+}
diff --git a/packages/platform-browser/test/dom/events/hammer_gestures_spec.ts b/packages/platform-browser/test/dom/events/hammer_gestures_spec.ts
new file mode 100644
index 000000000000..cf82361a9bc0
--- /dev/null
+++ b/packages/platform-browser/test/dom/events/hammer_gestures_spec.ts
@@ -0,0 +1,154 @@
+/**
+ * @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 {NgZone} from '@angular/core';
+import {fakeAsync, inject, tick} from '@angular/core/testing';
+import {afterEach, beforeEach, describe, expect, it,} from '@angular/core/testing/src/testing_internal';
+import {EventManager} from '@angular/platform-browser';
+import {HammerGestureConfig, HammerGesturesPlugin,} from '@angular/platform-browser/src/dom/events/hammer_gestures';
+
+{
+  describe('HammerGesturesPlugin', () => {
+    let plugin: HammerGesturesPlugin;
+    let fakeConsole: any;
+    if (isNode) return;
+
+    beforeEach(() => { fakeConsole = {warn: jasmine.createSpy('console.warn')}; });
+
+    describe('with no custom loader', () => {
+      beforeEach(() => {
+        plugin = new HammerGesturesPlugin(document, new HammerGestureConfig(), fakeConsole);
+      });
+
+      it('should implement addGlobalEventListener', () => {
+        spyOn(plugin, 'addEventListener').and.callFake(() => {});
+
+        expect(() => {
+          plugin.addGlobalEventListener('document', 'swipe', () => {});
+        }).not.toThrowError();
+      });
+
+      it('should warn user and do nothing when Hammer.js not loaded', () => {
+        expect(plugin.supports('swipe')).toBe(false);
+        expect(fakeConsole.warn)
+            .toHaveBeenCalledWith(
+                `The "swipe" event cannot be bound because Hammer.JS is not ` +
+                `loaded and no custom loader has been specified.`);
+      });
+    });
+
+    describe('with a custom loader', () => {
+      // Use a fake custom loader for tests, with helper functions to resolve or reject.
+      let loader: () => Promise<void>;
+      let resolveLoader: () => void;
+      let failLoader: () => void;
+
+      // Arbitrary element and listener for testing.
+      let someElement: HTMLDivElement;
+      let someListener: () => void;
+
+      // Keep track of whatever value is in `window.Hammer` before the test so it can be
+      // restored afterwards so that this test doesn't care whether Hammer is actually loaded.
+      let originalHammerGlobal: any;
+
+      // Fake Hammer instance ("mc") used to test the underlying event registration.
+      let fakeHammerInstance: {on: () => void, off: () => void};
+
+      // Inject the NgZone so that we can make it available to the plugin through a fake
+      // EventManager.
+      let ngZone: NgZone;
+      beforeEach(inject([NgZone], (z: NgZone) => { ngZone = z; }));
+
+      beforeEach(() => {
+        originalHammerGlobal = (window as any).Hammer;
+        (window as any).Hammer = undefined;
+
+        fakeHammerInstance = {
+          on: jasmine.createSpy('mc.on'),
+          off: jasmine.createSpy('mc.off'),
+        };
+
+        loader = () => new Promise((resolve, reject) => {
+          resolveLoader = resolve;
+          failLoader = reject;
+        });
+
+        // Make the hammer config return a fake hammer instance
+        const hammerConfig = new HammerGestureConfig();
+        spyOn(hammerConfig, 'buildHammer').and.returnValue(fakeHammerInstance);
+
+        plugin = new HammerGesturesPlugin(document, hammerConfig, fakeConsole, loader);
+
+        // Use a fake EventManager that has access to the NgZone.
+        plugin.manager = { getZone: () => ngZone } as EventManager;
+
+        someElement = document.createElement('div');
+        someListener = () => {};
+      });
+
+      afterEach(() => { (window as any).Hammer = originalHammerGlobal; });
+
+      it('should not log a warning when HammerJS is not loaded', () => {
+        plugin.addEventListener(someElement, 'swipe', () => {});
+        expect(fakeConsole.warn).not.toHaveBeenCalled();
+      });
+
+      it('should defer registering an event until Hammer is loaded', fakeAsync(() => {
+           plugin.addEventListener(someElement, 'swipe', someListener);
+           expect(fakeHammerInstance.on).not.toHaveBeenCalled();
+
+           (window as any).Hammer = {};
+           resolveLoader();
+           tick();
+
+           expect(fakeHammerInstance.on).toHaveBeenCalledWith('swipe', jasmine.any(Function));
+         }));
+
+      it('should cancel registration if an event is removed before being added', fakeAsync(() => {
+           const deregister = plugin.addEventListener(someElement, 'swipe', someListener);
+           deregister();
+
+           (window as any).Hammer = {};
+           resolveLoader();
+           tick();
+
+           expect(fakeHammerInstance.on).not.toHaveBeenCalled();
+         }));
+
+      it('should remove a listener after Hammer is loaded', fakeAsync(() => {
+           const removeListener = plugin.addEventListener(someElement, 'swipe', someListener);
+
+           (window as any).Hammer = {};
+           resolveLoader();
+           tick();
+
+           removeListener();
+           expect(fakeHammerInstance.off).toHaveBeenCalledWith('swipe', jasmine.any(Function));
+         }));
+
+      it('should log a warning when the loader fails', fakeAsync(() => {
+           plugin.addEventListener(someElement, 'swipe', () => {});
+           failLoader();
+           tick();
+
+           expect(fakeConsole.warn)
+               .toHaveBeenCalledWith(
+                   `The "swipe" event cannot be bound because the custom Hammer.JS loader failed.`);
+         }));
+
+      it('should load a warning if the loader resolves and Hammer is not present', fakeAsync(() => {
+           plugin.addEventListener(someElement, 'swipe', () => {});
+           resolveLoader();
+           tick();
+
+           expect(fakeConsole.warn)
+               .toHaveBeenCalledWith(
+                   `The custom HAMMER_LOADER completed, but Hammer.JS is not present.`);
+         }));
+    });
+  });
+}
diff --git a/packages/platform-browser/test/dom/events/key_events_spec.ts b/packages/platform-browser/test/dom/events/key_events_spec.ts
new file mode 100644
index 000000000000..648852de64e9
--- /dev/null
+++ b/packages/platform-browser/test/dom/events/key_events_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 {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {KeyEventsPlugin} from '@angular/platform-browser/src/dom/events/key_events';
+
+{
+  describe('KeyEventsPlugin', () => {
+    if (isNode) return;
+
+    it('should ignore unrecognized events', () => {
+      expect(KeyEventsPlugin.parseEventName('keydown')).toEqual(null);
+      expect(KeyEventsPlugin.parseEventName('keyup')).toEqual(null);
+      expect(KeyEventsPlugin.parseEventName('keydown.unknownmodifier.enter')).toEqual(null);
+      expect(KeyEventsPlugin.parseEventName('keyup.unknownmodifier.enter')).toEqual(null);
+      expect(KeyEventsPlugin.parseEventName('unknownevent.control.shift.enter')).toEqual(null);
+      expect(KeyEventsPlugin.parseEventName('unknownevent.enter')).toEqual(null);
+    });
+
+    it('should correctly parse event names', () => {
+      // key with no modifier
+      expect(KeyEventsPlugin.parseEventName('keydown.enter'))
+          .toEqual({'domEventName': 'keydown', 'fullKey': 'enter'});
+      expect(KeyEventsPlugin.parseEventName('keyup.enter'))
+          .toEqual({'domEventName': 'keyup', 'fullKey': 'enter'});
+
+      // key with modifiers:
+      expect(KeyEventsPlugin.parseEventName('keydown.control.shift.enter'))
+          .toEqual({'domEventName': 'keydown', 'fullKey': 'control.shift.enter'});
+      expect(KeyEventsPlugin.parseEventName('keyup.control.shift.enter'))
+          .toEqual({'domEventName': 'keyup', 'fullKey': 'control.shift.enter'});
+
+      // key with modifiers in a different order:
+      expect(KeyEventsPlugin.parseEventName('keydown.shift.control.enter'))
+          .toEqual({'domEventName': 'keydown', 'fullKey': 'control.shift.enter'});
+      expect(KeyEventsPlugin.parseEventName('keyup.shift.control.enter'))
+          .toEqual({'domEventName': 'keyup', 'fullKey': 'control.shift.enter'});
+
+      // key that is also a modifier:
+      expect(KeyEventsPlugin.parseEventName('keydown.shift.control'))
+          .toEqual({'domEventName': 'keydown', 'fullKey': 'shift.control'});
+      expect(KeyEventsPlugin.parseEventName('keyup.shift.control'))
+          .toEqual({'domEventName': 'keyup', 'fullKey': 'shift.control'});
+
+      expect(KeyEventsPlugin.parseEventName('keydown.control.shift'))
+          .toEqual({'domEventName': 'keydown', 'fullKey': 'control.shift'});
+      expect(KeyEventsPlugin.parseEventName('keyup.control.shift'))
+          .toEqual({'domEventName': 'keyup', 'fullKey': 'control.shift'});
+
+    });
+
+    it('should alias esc to escape', () => {
+      expect(KeyEventsPlugin.parseEventName('keyup.control.esc'))
+          .toEqual(KeyEventsPlugin.parseEventName('keyup.control.escape'));
+    });
+
+    it('should implement addGlobalEventListener', () => {
+      const plugin = new KeyEventsPlugin(document);
+
+      spyOn(plugin, 'addEventListener').and.callFake(() => {});
+
+      expect(() => plugin.addGlobalEventListener('window', 'keyup.control.esc', () => {}))
+          .not.toThrowError();
+    });
+
+  });
+}
diff --git a/packages/platform-browser/test/dom/shadow_dom_spec.ts b/packages/platform-browser/test/dom/shadow_dom_spec.ts
new file mode 100644
index 000000000000..b7a1b8f1e5c2
--- /dev/null
+++ b/packages/platform-browser/test/dom/shadow_dom_spec.ts
@@ -0,0 +1,122 @@
+/**
+ * @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, EventEmitter, Injector, Input, NgModule, Output, Renderer2, ViewEncapsulation, destroyPlatform} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {BrowserModule} from '@angular/platform-browser';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+function supportsShadowDOMV1() {
+  const testEl = document.createElement('div');
+  return (typeof customElements !== 'undefined') && (typeof testEl.attachShadow !== 'undefined');
+}
+
+if (supportsShadowDOMV1()) {
+  describe('ShadowDOM Support', () => {
+
+    let testContainer: HTMLDivElement;
+
+    beforeEach(() => { TestBed.configureTestingModule({imports: [TestModule]}); });
+
+    it('should attach and use a shadowRoot when ViewEncapsulation.Native is set', () => {
+      const compEl = TestBed.createComponent(ShadowComponent).nativeElement;
+      expect(compEl.shadowRoot !.textContent).toEqual('Hello World');
+    });
+
+    it('should use the shadow root to encapsulate styles', () => {
+      const compEl = TestBed.createComponent(StyledShadowComponent).nativeElement;
+      expect(window.getComputedStyle(compEl).border).toEqual('1px solid rgb(0, 0, 0)');
+      const redDiv = compEl.shadowRoot.querySelector('div.red');
+      expect(window.getComputedStyle(redDiv).border).toEqual('1px solid rgb(255, 0, 0)');
+    });
+
+    it('should allow the usage of <slot> elements', () => {
+      const el = TestBed.createComponent(ShadowSlotComponent).nativeElement;
+      const projectedContent = document.createTextNode('Hello Slot!');
+      el.appendChild(projectedContent);
+      const slot = el.shadowRoot !.querySelector('slot');
+
+      expect(slot !.assignedNodes().length).toBe(1);
+      expect(slot !.assignedNodes()[0].textContent).toBe('Hello Slot!');
+    });
+
+    it('should allow the usage of named <slot> elements', () => {
+      const el = TestBed.createComponent(ShadowSlotsComponent).nativeElement;
+
+      const headerContent = document.createElement('h1');
+      headerContent.setAttribute('slot', 'header');
+      headerContent.textContent = 'Header Text!';
+
+      const articleContent = document.createElement('span');
+      articleContent.setAttribute('slot', 'article');
+      articleContent.textContent = 'Article Text!';
+
+      const articleSubcontent = document.createElement('span');
+      articleSubcontent.setAttribute('slot', 'article');
+      articleSubcontent.textContent = 'Article Subtext!';
+
+      el.appendChild(headerContent);
+      el.appendChild(articleContent);
+      el.appendChild(articleSubcontent);
+
+      const headerSlot = el.shadowRoot !.querySelector('slot[name=header]') as HTMLSlotElement;
+      const articleSlot = el.shadowRoot !.querySelector('slot[name=article]') as HTMLSlotElement;
+
+      expect(headerSlot !.assignedNodes().length).toBe(1);
+      expect(headerSlot !.assignedNodes()[0].textContent).toBe('Header Text!');
+      expect(headerContent.assignedSlot).toBe(headerSlot);
+
+      expect(articleSlot !.assignedNodes().length).toBe(2);
+      expect(articleSlot !.assignedNodes()[0].textContent).toBe('Article Text!');
+      expect(articleSlot !.assignedNodes()[1].textContent).toBe('Article Subtext!');
+      expect(articleContent.assignedSlot).toBe(articleSlot);
+      expect(articleSubcontent.assignedSlot).toBe(articleSlot);
+    });
+  });
+}
+
+@Component(
+    {selector: 'shadow-comp', template: 'Hello World', encapsulation: ViewEncapsulation.ShadowDom})
+class ShadowComponent {
+}
+
+@Component({
+  selector: 'styled-shadow-comp',
+  template: '<div class="red"></div>',
+  encapsulation: ViewEncapsulation.ShadowDom,
+  styles: [`:host { border: 1px solid black; } .red { border: 1px solid red; }`]
+})
+class StyledShadowComponent {
+}
+
+@Component({
+  selector: 'shadow-slot-comp',
+  template: '<slot></slot>',
+  encapsulation: ViewEncapsulation.ShadowDom
+})
+class ShadowSlotComponent {
+}
+
+@Component({
+  selector: 'shadow-slots-comp',
+  template:
+      '<header><slot name="header"></slot></header><article><slot name="article"></slot></article>',
+  encapsulation: ViewEncapsulation.ShadowDom
+})
+class ShadowSlotsComponent {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [ShadowComponent, ShadowSlotComponent, ShadowSlotsComponent, StyledShadowComponent],
+  entryComponents:
+      [ShadowComponent, ShadowSlotComponent, ShadowSlotsComponent, StyledShadowComponent],
+})
+class TestModule {
+  ngDoBootstrap() {}
+}
diff --git a/packages/platform-browser/test/dom/shared_styles_host_spec.ts b/packages/platform-browser/test/dom/shared_styles_host_spec.ts
new file mode 100644
index 000000000000..c7c16bbbd1ea
--- /dev/null
+++ b/packages/platform-browser/test/dom/shared_styles_host_spec.ts
@@ -0,0 +1,59 @@
+/**
+ * @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 {beforeEach, describe, it} from '@angular/core/testing/src/testing_internal';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {DomSharedStylesHost} from '@angular/platform-browser/src/dom/shared_styles_host';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+{
+  describe('DomSharedStylesHost', () => {
+    let doc: Document;
+    let ssh: DomSharedStylesHost;
+    let someHost: Element;
+    beforeEach(() => {
+      doc = getDOM().createHtmlDocument();
+      doc.title = '';
+      ssh = new DomSharedStylesHost(doc);
+      someHost = getDOM().createElement('div');
+    });
+
+    it('should add existing styles to new hosts', () => {
+      ssh.addStyles(['a {};']);
+      ssh.addHost(someHost);
+      expect(getDOM().getInnerHTML(someHost)).toEqual('<style>a {};</style>');
+    });
+
+    it('should add new styles to hosts', () => {
+      ssh.addHost(someHost);
+      ssh.addStyles(['a {};']);
+      expect(getDOM().getInnerHTML(someHost)).toEqual('<style>a {};</style>');
+    });
+
+    it('should add styles only once to hosts', () => {
+      ssh.addStyles(['a {};']);
+      ssh.addHost(someHost);
+      ssh.addStyles(['a {};']);
+      expect(getDOM().getInnerHTML(someHost)).toEqual('<style>a {};</style>');
+    });
+
+    it('should use the document head as default host', () => {
+      ssh.addStyles(['a {};', 'b {};']);
+      expect(doc.head).toHaveText('a {};b {};');
+    });
+
+    it('should remove style nodes on destroy', () => {
+      ssh.addStyles(['a {};']);
+      ssh.addHost(someHost);
+      expect(getDOM().getInnerHTML(someHost)).toEqual('<style>a {};</style>');
+
+      ssh.ngOnDestroy();
+      expect(getDOM().getInnerHTML(someHost)).toEqual('');
+    });
+  });
+}
diff --git a/packages/platform-browser/test/security/dom_sanitization_service_spec.ts b/packages/platform-browser/test/security/dom_sanitization_service_spec.ts
new file mode 100644
index 000000000000..759b95c7803e
--- /dev/null
+++ b/packages/platform-browser/test/security/dom_sanitization_service_spec.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 {SecurityContext} from '@angular/core';
+import * as t from '@angular/core/testing/src/testing_internal';
+
+import {DomSanitizerImpl} from '../../src/security/dom_sanitization_service';
+
+{
+  t.describe('DOM Sanitization Service', () => {
+    t.it('accepts resource URL values for resource contexts', () => {
+      const svc = new DomSanitizerImpl(null);
+      const resourceUrl = svc.bypassSecurityTrustResourceUrl('http://hello/world');
+      t.expect(svc.sanitize(SecurityContext.URL, resourceUrl)).toBe('http://hello/world');
+    });
+  });
+}
diff --git a/packages/platform-browser/test/static_assets/test.html b/packages/platform-browser/test/static_assets/test.html
new file mode 100644
index 000000000000..4c2b23755fe7
--- /dev/null
+++ b/packages/platform-browser/test/static_assets/test.html
@@ -0,0 +1 @@
+<span>from external template</span>
diff --git a/packages/platform-browser/test/testing_public_spec.ts b/packages/platform-browser/test/testing_public_spec.ts
new file mode 100644
index 000000000000..d2f40319043c
--- /dev/null
+++ b/packages/platform-browser/test/testing_public_spec.ts
@@ -0,0 +1,1008 @@
+/**
+ * @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 {CompilerConfig, ResourceLoader} from '@angular/compiler';
+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';
+
+// Services, and components for the tests.
+
+@Component({selector: 'child-comp', template: `<span>Original {{childBinding}}</span>`})
+@Injectable()
+class ChildComp {
+  childBinding: string;
+  constructor() { this.childBinding = 'Child'; }
+}
+
+@Component({selector: 'child-comp', template: `<span>Mock</span>`})
+@Injectable()
+class MockChildComp {
+}
+
+@Component({
+  selector: 'parent-comp',
+  template: `Parent(<child-comp></child-comp>)`,
+})
+@Injectable()
+class ParentComp {
+}
+
+@Component({selector: 'my-if-comp', template: `MyIf(<span *ngIf="showMore">More</span>)`})
+@Injectable()
+class MyIfComp {
+  showMore: boolean = false;
+}
+
+@Component({selector: 'child-child-comp', template: `<span>ChildChild</span>`})
+@Injectable()
+class ChildChildComp {
+}
+
+@Component({
+  selector: 'child-comp',
+  template: `<span>Original {{childBinding}}(<child-child-comp></child-child-comp>)</span>`,
+})
+@Injectable()
+class ChildWithChildComp {
+  childBinding: string;
+  constructor() { this.childBinding = 'Child'; }
+}
+
+class FancyService {
+  value: string = 'real value';
+  getAsyncValue() { return Promise.resolve('async value'); }
+  getTimeoutValue() {
+    return new Promise<string>((resolve, reject) => setTimeout(() => resolve('timeout value'), 10));
+  }
+}
+
+class MockFancyService extends FancyService {
+  value: string = 'mocked out value';
+}
+
+@Component({
+  selector: 'my-service-comp',
+  providers: [FancyService],
+  template: `injected value: {{fancyService.value}}`
+})
+class TestProvidersComp {
+  constructor(private fancyService: FancyService) {}
+}
+
+@Component({
+  selector: 'my-service-comp',
+  viewProviders: [FancyService],
+  template: `injected value: {{fancyService.value}}`
+})
+class TestViewProvidersComp {
+  constructor(private fancyService: FancyService) {}
+}
+
+@Directive({selector: '[someDir]', host: {'[title]': 'someDir'}})
+class SomeDirective {
+  // TODO(issue/24571): remove '!'.
+  @Input()
+  someDir !: string;
+}
+
+@Pipe({name: 'somePipe'})
+class SomePipe {
+  transform(value: string) { return `transformed ${value}`; }
+}
+
+@Component({selector: 'comp', template: `<div  [someDir]="'someValue' | somePipe"></div>`})
+class CompUsingModuleDirectiveAndPipe {
+}
+
+@NgModule()
+class SomeLibModule {
+}
+
+@Component({
+  selector: 'comp',
+  templateUrl: '/base/angular/packages/platform-browser/test/static_assets/test.html'
+})
+class CompWithUrlTemplate {
+}
+
+{
+  describe('public testing API', () => {
+    describe('using the async helper with context passing', () => {
+      beforeEach(function() { this.actuallyDone = false; });
+
+      afterEach(function() { expect(this.actuallyDone).toEqual(true); });
+
+      it('should run normal tests', function() { this.actuallyDone = true; });
+
+      it('should run normal async tests', function(done) {
+        setTimeout(() => {
+          this.actuallyDone = true;
+          done();
+        }, 0);
+      });
+
+      it('should run async tests with tasks',
+         async(function() { setTimeout(() => this.actuallyDone = true, 0); }));
+
+      it('should run async tests with promises', async(function() {
+           const p = new Promise((resolve, reject) => setTimeout(resolve, 10));
+           p.then(() => this.actuallyDone = true);
+         }));
+    });
+
+    describe('basic context passing to inject, fakeAsync and withModule helpers', () => {
+      const moduleConfig = {
+        providers: [FancyService],
+      };
+
+      beforeEach(function() { this.contextModified = false; });
+
+      afterEach(function() { expect(this.contextModified).toEqual(true); });
+
+      it('should pass context to inject helper',
+         inject([], function() { this.contextModified = true; }));
+
+      it('should pass context to fakeAsync helper',
+         fakeAsync(function() { this.contextModified = true; }));
+
+      it('should pass context to withModule helper - simple',
+         withModule(moduleConfig, function() { this.contextModified = true; }));
+
+      it('should pass context to withModule helper - advanced',
+         withModule(moduleConfig).inject([FancyService], function(service: FancyService) {
+           expect(service.value).toBe('real value');
+           this.contextModified = true;
+         }));
+
+      it('should preserve context when async and inject helpers are combined',
+         async(inject([], function() { setTimeout(() => this.contextModified = true, 0); })));
+
+      it('should preserve context when fakeAsync and inject helpers are combined',
+         fakeAsync(inject([], function() {
+           setTimeout(() => this.contextModified = true, 0);
+           tick(1);
+         })));
+    });
+
+    describe('using the test injector with the inject helper', () => {
+      describe('setting up Providers', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule(
+              {providers: [{provide: FancyService, useValue: new FancyService()}]});
+
+          it('should use set up providers', inject([FancyService], (service: FancyService) => {
+               expect(service.value).toEqual('real value');
+             }));
+
+          it('should wait until returned promises',
+             async(inject([FancyService], (service: FancyService) => {
+               service.getAsyncValue().then((value) => expect(value).toEqual('async value'));
+               service.getTimeoutValue().then((value) => expect(value).toEqual('timeout value'));
+             })));
+
+          it('should allow the use of fakeAsync',
+             fakeAsync(inject([FancyService], (service: FancyService) => {
+               let value: string = undefined !;
+               service.getAsyncValue().then((val) => value = val);
+               tick();
+               expect(value).toEqual('async value');
+             })));
+
+          it('should allow use of "done"', (done) => {
+            inject([FancyService], (service: FancyService) => {
+              let count = 0;
+              const id = setInterval(() => {
+                count++;
+                if (count > 2) {
+                  clearInterval(id);
+                  done();
+                }
+              }, 5);
+            })();  // inject needs to be invoked explicitly with ().
+          });
+
+          describe('using beforeEach', () => {
+            beforeEach(inject([FancyService], (service: FancyService) => {
+              service.value = 'value modified in beforeEach';
+            }));
+
+            it('should use modified providers', inject([FancyService], (service: FancyService) => {
+                 expect(service.value).toEqual('value modified in beforeEach');
+               }));
+          });
+
+          describe('using async beforeEach', () => {
+            beforeEach(async(inject([FancyService], (service: FancyService) => {
+              service.getAsyncValue().then((value) => service.value = value);
+            })));
+
+            it('should use asynchronously modified value',
+               inject([FancyService], (service: FancyService) => {
+                 expect(service.value).toEqual('async value');
+               }));
+          });
+        });
+      });
+    });
+
+    describe('using the test injector with modules', () => {
+      const moduleConfig = {
+        providers: [FancyService],
+        imports: [SomeLibModule],
+        declarations: [SomeDirective, SomePipe, CompUsingModuleDirectiveAndPipe],
+      };
+
+      describe('setting up a module', () => {
+        beforeEach(() => TestBed.configureTestingModule(moduleConfig));
+
+        it('should use set up providers', inject([FancyService], (service: FancyService) => {
+             expect(service.value).toEqual('real value');
+           }));
+
+        it('should be able to create any declared components', () => {
+          const compFixture = TestBed.createComponent(CompUsingModuleDirectiveAndPipe);
+          expect(compFixture.componentInstance).toBeAnInstanceOf(CompUsingModuleDirectiveAndPipe);
+        });
+
+        it('should use set up directives and pipes', () => {
+          const compFixture = TestBed.createComponent(CompUsingModuleDirectiveAndPipe);
+          const el = compFixture.debugElement;
+
+          compFixture.detectChanges();
+          expect(el.children[0].properties['title']).toBe('transformed someValue');
+        });
+
+        it('should use set up imported modules',
+           inject([SomeLibModule], (libModule: SomeLibModule) => {
+             expect(libModule).toBeAnInstanceOf(SomeLibModule);
+           }));
+
+        describe('provided schemas', () => {
+          @Component({template: '<some-element [someUnknownProp]="true"></some-element>'})
+          class ComponentUsingInvalidProperty {
+          }
+
+          beforeEach(() => {
+            TestBed.configureTestingModule(
+                {schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [ComponentUsingInvalidProperty]});
+          });
+
+          it('should not error on unknown bound properties on custom elements when using the CUSTOM_ELEMENTS_SCHEMA',
+             () => {
+               expect(TestBed.createComponent(ComponentUsingInvalidProperty).componentInstance)
+                   .toBeAnInstanceOf(ComponentUsingInvalidProperty);
+             });
+        });
+      });
+
+      describe('per test modules', () => {
+        it('should use set up providers',
+           withModule(moduleConfig).inject([FancyService], (service: FancyService) => {
+             expect(service.value).toEqual('real value');
+           }));
+
+        it('should use set up directives and pipes', withModule(moduleConfig, () => {
+             const compFixture = TestBed.createComponent(CompUsingModuleDirectiveAndPipe);
+             const el = compFixture.debugElement;
+
+             compFixture.detectChanges();
+             expect(el.children[0].properties['title']).toBe('transformed someValue');
+           }));
+
+        it('should use set up library modules',
+           withModule(moduleConfig).inject([SomeLibModule], (libModule: SomeLibModule) => {
+             expect(libModule).toBeAnInstanceOf(SomeLibModule);
+           }));
+      });
+
+      describe('components with template url', () => {
+        beforeEach(async(() => {
+          TestBed.configureTestingModule({declarations: [CompWithUrlTemplate]});
+          TestBed.compileComponents();
+        }));
+
+        it('should allow to createSync components with templateUrl after explicit async compilation',
+           () => {
+             const fixture = TestBed.createComponent(CompWithUrlTemplate);
+             expect(fixture.nativeElement).toHaveText('from external template');
+           });
+      });
+
+      describe('overwriting metadata', () => {
+        @Pipe({name: 'undefined'})
+        class SomePipe {
+          transform(value: string): string { return `transformed ${value}`; }
+        }
+
+        @Directive({selector: '[undefined]'})
+        class SomeDirective {
+          someProp = 'hello';
+        }
+
+        @Component({selector: 'comp', template: 'someText'})
+        class SomeComponent {
+        }
+
+        @Component({selector: 'comp', template: 'someOtherText'})
+        class SomeOtherComponent {
+        }
+
+        @NgModule({declarations: [SomeComponent, SomeDirective, SomePipe]})
+        class SomeModule {
+        }
+
+        beforeEach(() => TestBed.configureTestingModule({imports: [SomeModule]}));
+
+        describe('module', () => {
+          beforeEach(() => {
+            TestBed.overrideModule(SomeModule, {set: {declarations: [SomeOtherComponent]}});
+          });
+          it('should work', () => {
+            expect(TestBed.createComponent(SomeOtherComponent).componentInstance)
+                .toBeAnInstanceOf(SomeOtherComponent);
+          });
+        });
+
+        describe('component', () => {
+          beforeEach(() => {
+            TestBed.overrideComponent(
+                SomeComponent, {set: {selector: 'comp', template: 'newText'}});
+          });
+          it('should work', () => {
+            expect(TestBed.createComponent(SomeComponent).nativeElement).toHaveText('newText');
+          });
+        });
+
+        describe('directive', () => {
+          beforeEach(() => {
+            TestBed
+                .overrideComponent(
+                    SomeComponent, {set: {selector: 'comp', template: `<div someDir></div>`}})
+                .overrideDirective(
+                    SomeDirective, {set: {selector: '[someDir]', host: {'[title]': 'someProp'}}});
+          });
+          it('should work', () => {
+            const compFixture = TestBed.createComponent(SomeComponent);
+            compFixture.detectChanges();
+            expect(compFixture.debugElement.children[0].properties['title']).toEqual('hello');
+          });
+        });
+
+        describe('pipe', () => {
+          beforeEach(() => {
+            TestBed
+                .overrideComponent(
+                    SomeComponent, {set: {selector: 'comp', template: `{{'hello' | somePipe}}`}})
+                .overridePipe(SomePipe, {set: {name: 'somePipe'}})
+                .overridePipe(SomePipe, {add: {pure: false}});
+          });
+          it('should work', () => {
+            const compFixture = TestBed.createComponent(SomeComponent);
+            compFixture.detectChanges();
+            expect(compFixture.nativeElement).toHaveText('transformed hello');
+          });
+        });
+
+        describe('template', () => {
+          let testBedSpy: any;
+          beforeEach(() => {
+            testBedSpy = spyOn(getTestBed(), 'overrideComponent').and.callThrough();
+            TestBed.overrideTemplate(SomeComponent, 'newText');
+          });
+          it(`should override component's template`, () => {
+            const fixture = TestBed.createComponent(SomeComponent);
+            expect(fixture.nativeElement).toHaveText('newText');
+            expect(testBedSpy).toHaveBeenCalledWith(SomeComponent, {
+              set: {template: 'newText', templateUrl: null}
+            });
+          });
+        });
+      });
+
+      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');
+          });
+
+          it('should keep imported NgModules eager', () => {
+            let someModule: SomeModule|undefined;
+
+            @NgModule()
+            class SomeModule {
+              constructor() { someModule = this; }
+            }
+
+            TestBed.configureTestingModule({
+              providers: [
+                {provide: 'a', useValue: 'aValue'},
+              ],
+              imports: [SomeModule]
+            });
+            TestBed.overrideProvider('a', {useValue: 'mockValue'});
+
+            expect(TestBed.get('a')).toBe('mockValue');
+            expect(someModule).toBeAnInstanceOf(SomeModule);
+          });
+
+          it('should keep imported NgModules lazy with deprecatedOverrideProvider', () => {
+            let someModule: SomeModule|undefined;
+
+            @NgModule()
+            class SomeModule {
+              constructor() { someModule = this; }
+            }
+
+            TestBed.configureTestingModule({
+              providers: [
+                {provide: 'a', useValue: 'aValue'},
+              ],
+              imports: [SomeModule]
+            });
+            TestBed.deprecatedOverrideProvider('a', {useValue: 'mockValue'});
+
+            expect(TestBed.get('a')).toBe('mockValue');
+            expect(someModule).toBeUndefined();
+          });
+
+          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('overrideTemplateUsingTestingModule', () => {
+        it('should compile the template in the context of the testing module', () => {
+          @Component({selector: 'comp', template: 'a'})
+          class MyComponent {
+            prop = 'some prop';
+          }
+
+          let testDir: TestDir|undefined;
+
+          @Directive({selector: '[test]'})
+          class TestDir {
+            constructor() { testDir = this; }
+
+            // TODO(issue/24571): remove '!'.
+            @Input('test')
+            test !: string;
+          }
+
+          TestBed.overrideTemplateUsingTestingModule(
+              MyComponent, '<div [test]="prop">Hello world!</div>');
+
+          const fixture = TestBed.configureTestingModule({declarations: [MyComponent, TestDir]})
+                              .createComponent(MyComponent);
+          fixture.detectChanges();
+          expect(fixture.nativeElement).toHaveText('Hello world!');
+          expect(testDir).toBeAnInstanceOf(TestDir);
+          expect(testDir !.test).toBe('some prop');
+        });
+
+        it('should throw if the TestBed is already created', () => {
+          @Component({selector: 'comp', template: 'a'})
+          class MyComponent {
+          }
+
+          TestBed.get(Injector);
+
+          expect(() => TestBed.overrideTemplateUsingTestingModule(MyComponent, 'b'))
+              .toThrowError(
+                  /Cannot override template when the test module has already been instantiated/);
+        });
+
+        it('should reset overrides when the testing module is resetted', () => {
+          @Component({selector: 'comp', template: 'a'})
+          class MyComponent {
+          }
+
+          TestBed.overrideTemplateUsingTestingModule(MyComponent, 'b');
+
+          const fixture = TestBed.resetTestingModule()
+                              .configureTestingModule({declarations: [MyComponent]})
+                              .createComponent(MyComponent);
+          expect(fixture.nativeElement).toHaveText('a');
+        });
+      });
+
+      describe('setting up the compiler', () => {
+
+        describe('providers', () => {
+          beforeEach(() => {
+            const resourceLoaderGet = jasmine.createSpy('resourceLoaderGet')
+                                          .and.returnValue(Promise.resolve('Hello world!'));
+            TestBed.configureTestingModule({declarations: [CompWithUrlTemplate]});
+            TestBed.configureCompiler(
+                {providers: [{provide: ResourceLoader, useValue: {get: resourceLoaderGet}}]});
+          });
+
+          it('should use set up providers', fakeAsync(() => {
+               TestBed.compileComponents();
+               tick();
+               const compFixture = TestBed.createComponent(CompWithUrlTemplate);
+               expect(compFixture.nativeElement).toHaveText('Hello world!');
+             }));
+        });
+
+        describe('useJit true', () => {
+          beforeEach(() => TestBed.configureCompiler({useJit: true}));
+          it('should set the value into CompilerConfig',
+             inject([CompilerConfig], (config: CompilerConfig) => {
+               expect(config.useJit).toBe(true);
+             }));
+        });
+        describe('useJit false', () => {
+          beforeEach(() => TestBed.configureCompiler({useJit: false}));
+          it('should set the value into CompilerConfig',
+             inject([CompilerConfig], (config: CompilerConfig) => {
+               expect(config.useJit).toBe(false);
+             }));
+        });
+      });
+    });
+
+    describe('errors', () => {
+      let originalJasmineIt: (description: string, func: () => void) => jasmine.Spec;
+      let originalJasmineBeforeEach: (beforeEachFunction: (done: DoneFn) => void) => void;
+
+      const patchJasmineIt = () => {
+        let resolve: (result: any) => void;
+        let reject: (error: any) => void;
+        const promise = new Promise((res, rej) => {
+          resolve = res;
+          reject = rej;
+        });
+        originalJasmineIt = jasmine.getEnv().it;
+        jasmine.getEnv().it = (description: string, fn: (done: DoneFn) => void): any => {
+          const done = <DoneFn>(() => resolve(null));
+          done.fail = (err) => reject(err);
+          fn(done);
+          return null;
+        };
+        return promise;
+      };
+
+      const restoreJasmineIt = () => jasmine.getEnv().it = originalJasmineIt;
+
+      const patchJasmineBeforeEach = () => {
+        let resolve: (result: any) => void;
+        let reject: (error: any) => void;
+        const promise = new Promise((res, rej) => {
+          resolve = res;
+          reject = rej;
+        });
+        originalJasmineBeforeEach = jasmine.getEnv().beforeEach;
+        jasmine.getEnv().beforeEach = (fn: (done: DoneFn) => void) => {
+          const done = <DoneFn>(() => resolve(null));
+          done.fail = (err) => reject(err);
+          fn(done);
+        };
+        return promise;
+      };
+
+      const restoreJasmineBeforeEach = () => jasmine.getEnv().beforeEach =
+          originalJasmineBeforeEach;
+
+      it('should fail when an asynchronous error is thrown', (done) => {
+        const itPromise = patchJasmineIt();
+        const barError = new Error('bar');
+
+        it('throws an async error',
+           async(inject([], () => setTimeout(() => { throw barError; }, 0))));
+
+        itPromise.then(() => done.fail('Expected test to fail, but it did not'), (err) => {
+          expect(err).toEqual(barError);
+          done();
+        });
+        restoreJasmineIt();
+      });
+
+      it('should fail when a returned promise is rejected', (done) => {
+        const itPromise = patchJasmineIt();
+
+        it('should fail with an error from a promise', async(inject([], () => {
+             let reject: (error: any) => void = undefined !;
+             const promise = new Promise((_, rej) => reject = rej);
+             const p = promise.then(() => expect(1).toEqual(2));
+
+             reject('baz');
+             return p;
+           })));
+
+        itPromise.then(() => done.fail('Expected test to fail, but it did not'), (err) => {
+          expect(err.message).toEqual('Uncaught (in promise): baz');
+          done();
+        });
+        restoreJasmineIt();
+      });
+
+      describe('components', () => {
+        let resourceLoaderGet: jasmine.Spy;
+        beforeEach(() => {
+          resourceLoaderGet = jasmine.createSpy('resourceLoaderGet')
+                                  .and.returnValue(Promise.resolve('Hello world!'));
+          TestBed.configureCompiler(
+              {providers: [{provide: ResourceLoader, useValue: {get: resourceLoaderGet}}]});
+        });
+
+        it('should report an error for declared components with templateUrl which never call TestBed.compileComponents',
+           () => {
+             const itPromise = patchJasmineIt();
+
+             expect(
+                 () =>
+                     it('should fail', withModule(
+                                           {declarations: [CompWithUrlTemplate]},
+                                           () => TestBed.createComponent(CompWithUrlTemplate))))
+                 .toThrowError(
+                     `This test module uses the component ${stringify(CompWithUrlTemplate)} which is using a "templateUrl" or "styleUrls", but they were never compiled. ` +
+                     `Please call "TestBed.compileComponents" before your test.`);
+
+             restoreJasmineIt();
+           });
+
+      });
+
+      it('should error on unknown bound properties on custom elements by default', () => {
+        @Component({template: '<some-element [someUnknownProp]="true"></some-element>'})
+        class ComponentUsingInvalidProperty {
+        }
+
+        const itPromise = patchJasmineIt();
+
+        expect(
+            () => it(
+                'should fail', withModule(
+                                   {declarations: [ComponentUsingInvalidProperty]},
+                                   () => TestBed.createComponent(ComponentUsingInvalidProperty))))
+            .toThrowError(/Can't bind to 'someUnknownProp'/);
+
+        restoreJasmineIt();
+      });
+    });
+
+    describe('creating components', () => {
+
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          declarations: [
+            ChildComp,
+            MyIfComp,
+            ChildChildComp,
+            ParentComp,
+            TestProvidersComp,
+            TestViewProvidersComp,
+          ]
+        });
+      });
+
+      it('should instantiate a component with valid DOM', async(() => {
+           const fixture = TestBed.createComponent(ChildComp);
+           fixture.detectChanges();
+
+           expect(fixture.nativeElement).toHaveText('Original Child');
+         }));
+
+      it('should allow changing members of the component', async(() => {
+           const componentFixture = TestBed.createComponent(MyIfComp);
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('MyIf()');
+
+           componentFixture.componentInstance.showMore = true;
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('MyIf(More)');
+         }));
+
+      it('should override a template', async(() => {
+           TestBed.overrideComponent(ChildComp, {set: {template: '<span>Mock</span>'}});
+           const componentFixture = TestBed.createComponent(ChildComp);
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('Mock');
+
+         }));
+
+      it('should override a provider', async(() => {
+           TestBed.overrideComponent(
+               TestProvidersComp,
+               {set: {providers: [{provide: FancyService, useClass: MockFancyService}]}});
+           const componentFixture = TestBed.createComponent(TestProvidersComp);
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('injected value: mocked out value');
+         }));
+
+
+      it('should override a viewProvider', async(() => {
+           TestBed.overrideComponent(
+               TestViewProvidersComp,
+               {set: {viewProviders: [{provide: FancyService, useClass: MockFancyService}]}});
+
+           const componentFixture = TestBed.createComponent(TestViewProvidersComp);
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('injected value: mocked out value');
+         }));
+    });
+    describe('using alternate components', () => {
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          declarations: [
+            MockChildComp,
+            ParentComp,
+          ]
+        });
+      });
+
+      it('should override component dependencies', async(() => {
+
+           const componentFixture = TestBed.createComponent(ParentComp);
+           componentFixture.detectChanges();
+           expect(componentFixture.nativeElement).toHaveText('Parent(Mock)');
+         }));
+    });
+  });
+}
diff --git a/packages/platform-browser/testing/BUILD.bazel b/packages/platform-browser/testing/BUILD.bazel
new file mode 100644
index 000000000000..7f94b76b21f4
--- /dev/null
+++ b/packages/platform-browser/testing/BUILD.bazel
@@ -0,0 +1,16 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(["**/*.ts"]),
+    module_name = "@angular/platform-browser/testing",
+    deps = [
+        "//packages/core",
+        "//packages/platform-browser",
+        "@rxjs",
+    ],
+)
diff --git a/packages/platform-browser/testing/index.ts b/packages/platform-browser/testing/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/platform-browser/testing/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';
diff --git a/packages/platform-browser/testing/package.json b/packages/platform-browser/testing/package.json
new file mode 100644
index 000000000000..1a00568c53da
--- /dev/null
+++ b/packages/platform-browser/testing/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/platform-browser/testing",
+  "typings": "./testing.d.ts",
+  "main": "../bundles/platform-browser-testing.umd.js",
+  "module": "../fesm5/testing.js",
+  "es2015": "../fesm2015/testing.js",
+  "esm5": "../esm5/testing/testing.js",
+  "esm2015": "../esm2015/testing/testing.js",
+  "fesm5": "../fesm5/testing.js",
+  "fesm2015": "../fesm2015/testing.js"
+}
diff --git a/packages/platform-browser/testing/public_api.ts b/packages/platform-browser/testing/public_api.ts
new file mode 100644
index 000000000000..fcc511dc6e48
--- /dev/null
+++ b/packages/platform-browser/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 this package.
+ */
+export * from './src/testing';
diff --git a/packages/platform-browser/testing/rollup.config.js b/packages/platform-browser/testing/rollup.config.js
new file mode 100644
index 000000000000..9409d2131cca
--- /dev/null
+++ b/packages/platform-browser/testing/rollup.config.js
@@ -0,0 +1,28 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/platform-browser': 'ng.platformBrowser'
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/platform-browser/fesm5/testing.js',
+  dest: '../../../dist/packages-dist/platform-browser/bundles/platform-browser-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/platform-browser/testing'},
+  moduleName: 'ng.platformBrowser.testing',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/platform-browser/testing/src/browser.ts b/packages/platform-browser/testing/src/browser.ts
new file mode 100644
index 000000000000..2ed2e6c194ce
--- /dev/null
+++ b/packages/platform-browser/testing/src/browser.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 {APP_ID, NgModule, NgZone, PLATFORM_INITIALIZER, PlatformRef, StaticProvider, createPlatformFactory, platformCore} from '@angular/core';
+import {BrowserModule, ɵBrowserDomAdapter as BrowserDomAdapter, ɵELEMENT_PROBE_PROVIDERS as ELEMENT_PROBE_PROVIDERS} from '@angular/platform-browser';
+import {BrowserDetection, createNgZone} from './browser_util';
+
+function initBrowserTests() {
+  BrowserDomAdapter.makeCurrent();
+  BrowserDetection.setup();
+}
+
+const _TEST_BROWSER_PLATFORM_PROVIDERS: StaticProvider[] =
+    [{provide: PLATFORM_INITIALIZER, useValue: initBrowserTests, multi: true}];
+
+/**
+ * Platform for testing
+ *
+ *
+ */
+export const platformBrowserTesting =
+    createPlatformFactory(platformCore, 'browserTesting', _TEST_BROWSER_PLATFORM_PROVIDERS);
+
+/**
+ * NgModule for testing.
+ *
+ *
+ */
+@NgModule({
+  exports: [BrowserModule],
+  providers: [
+    {provide: APP_ID, useValue: 'a'},
+    ELEMENT_PROBE_PROVIDERS,
+    {provide: NgZone, useFactory: createNgZone},
+  ]
+})
+export class BrowserTestingModule {
+}
diff --git a/packages/platform-browser/testing/src/browser_util.ts b/packages/platform-browser/testing/src/browser_util.ts
new file mode 100644
index 000000000000..221c924fe9df
--- /dev/null
+++ b/packages/platform-browser/testing/src/browser_util.ts
@@ -0,0 +1,138 @@
+/**
+ * @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 {NgZone, ɵglobal as global} from '@angular/core';
+import {ɵgetDOM as getDOM} from '@angular/platform-browser';
+
+export let browserDetection: BrowserDetection;
+
+export class BrowserDetection {
+  private _overrideUa: string|null;
+  private get _ua(): string {
+    if (typeof this._overrideUa === 'string') {
+      return this._overrideUa;
+    }
+
+    return getDOM() ? getDOM().getUserAgent() : '';
+  }
+
+  static setup() { browserDetection = new BrowserDetection(null); }
+
+  constructor(ua: string|null) { this._overrideUa = ua; }
+
+  get isFirefox(): boolean { return this._ua.indexOf('Firefox') > -1; }
+
+  get isAndroid(): boolean {
+    return this._ua.indexOf('Mozilla/5.0') > -1 && this._ua.indexOf('Android') > -1 &&
+        this._ua.indexOf('AppleWebKit') > -1 && this._ua.indexOf('Chrome') == -1 &&
+        this._ua.indexOf('IEMobile') == -1;
+  }
+
+  get isEdge(): boolean { return this._ua.indexOf('Edge') > -1; }
+
+  get isIE(): boolean { return this._ua.indexOf('Trident') > -1; }
+
+  get isWebkit(): boolean {
+    return this._ua.indexOf('AppleWebKit') > -1 && this._ua.indexOf('Edge') == -1 &&
+        this._ua.indexOf('IEMobile') == -1;
+  }
+
+  get isIOS7(): boolean {
+    return (this._ua.indexOf('iPhone OS 7') > -1 || this._ua.indexOf('iPad OS 7') > -1) &&
+        this._ua.indexOf('IEMobile') == -1;
+  }
+
+  get isSlow(): boolean { return this.isAndroid || this.isIE || this.isIOS7; }
+
+  // The Intl API is only natively supported in Chrome, Firefox, IE11 and Edge.
+  // This detector is needed in tests to make the difference between:
+  // 1) IE11/Edge: they have a native Intl API, but with some discrepancies
+  // 2) IE9/IE10: they use the polyfill, and so no discrepancies
+  get supportsNativeIntlApi(): boolean {
+    return !!(<any>global).Intl && (<any>global).Intl !== (<any>global).IntlPolyfill;
+  }
+
+  get isChromeDesktop(): boolean {
+    return this._ua.indexOf('Chrome') > -1 && this._ua.indexOf('Mobile Safari') == -1 &&
+        this._ua.indexOf('Edge') == -1;
+  }
+
+  // "Old Chrome" means Chrome 3X, where there are some discrepancies in the Intl API.
+  // Android 4.4 and 5.X have such browsers by default (respectively 30 and 39).
+  get isOldChrome(): boolean {
+    return this._ua.indexOf('Chrome') > -1 && this._ua.indexOf('Chrome/3') > -1 &&
+        this._ua.indexOf('Edge') == -1;
+  }
+}
+
+BrowserDetection.setup();
+
+export function dispatchEvent(element: any, eventType: any): void {
+  getDOM().dispatchEvent(element, getDOM().createEvent(eventType));
+}
+
+export function el(html: string): HTMLElement {
+  return <HTMLElement>getDOM().firstChild(getDOM().content(getDOM().createTemplate(html)));
+}
+
+export function normalizeCSS(css: string): string {
+  return css.replace(/\s+/g, ' ')
+      .replace(/:\s/g, ':')
+      .replace(/'/g, '"')
+      .replace(/ }/g, '}')
+      .replace(/url\((\"|\s)(.+)(\"|\s)\)(\s*)/g, (...match: string[]) => `url("${match[2]}")`)
+      .replace(/\[(.+)=([^"\]]+)\]/g, (...match: string[]) => `[${match[1]}="${match[2]}"]`);
+}
+
+const _singleTagWhitelist = ['br', 'hr', 'input'];
+export function stringifyElement(el: any /** TODO #9100 */): string {
+  let result = '';
+  if (getDOM().isElementNode(el)) {
+    const tagName = getDOM().tagName(el).toLowerCase();
+
+    // Opening tag
+    result += `<${tagName}`;
+
+    // Attributes in an ordered way
+    const attributeMap = getDOM().attributeMap(el);
+    const keys: string[] = Array.from(attributeMap.keys()).sort();
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const attValue = attributeMap.get(key);
+      const lowerCaseKey = key.toLowerCase();
+      if (typeof attValue !== 'string') {
+        result += ` ${lowerCaseKey}`;
+      } else {
+        result += ` ${lowerCaseKey}="${attValue}"`;
+      }
+    }
+    result += '>';
+
+    // Children
+    const childrenRoot = getDOM().templateAwareRoot(el);
+    const children = childrenRoot ? getDOM().childNodes(childrenRoot) : [];
+    for (let j = 0; j < children.length; j++) {
+      result += stringifyElement(children[j]);
+    }
+
+    // Closing tag
+    if (_singleTagWhitelist.indexOf(tagName) == -1) {
+      result += `</${tagName}>`;
+    }
+  } else if (getDOM().isCommentNode(el)) {
+    result += `<!--${getDOM().nodeValue(el)}-->`;
+  } else {
+    result += getDOM().getText(el);
+  }
+
+  return result;
+}
+
+export function createNgZone(): NgZone {
+  return new NgZone({enableLongStackTrace: true});
+}
diff --git a/packages/platform-browser/testing/src/matchers.ts b/packages/platform-browser/testing/src/matchers.ts
new file mode 100644
index 000000000000..3c9ae4ba48b7
--- /dev/null
+++ b/packages/platform-browser/testing/src/matchers.ts
@@ -0,0 +1,269 @@
+/**
+ * @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 {ɵglobal as global} from '@angular/core';
+import {ɵgetDOM as getDOM} from '@angular/platform-browser';
+
+
+
+/**
+ * Jasmine matchers that check Angular specific conditions.
+ */
+export interface NgMatchers<T = any> extends jasmine.Matchers<T> {
+  /**
+   * Expect the value to be a `Promise`.
+   *
+   * ## Example
+   *
+   * {@example testing/ts/matchers.ts region='toBePromise'}
+   */
+  toBePromise(): boolean;
+
+  /**
+   * Expect the value to be an instance of a class.
+   *
+   * ## Example
+   *
+   * {@example testing/ts/matchers.ts region='toBeAnInstanceOf'}
+   */
+  toBeAnInstanceOf(expected: any): boolean;
+
+  /**
+   * Expect the element to have exactly the given text.
+   *
+   * ## Example
+   *
+   * {@example testing/ts/matchers.ts region='toHaveText'}
+   */
+  toHaveText(expected: string): boolean;
+
+  /**
+   * Expect the element to have the given CSS class.
+   *
+   * ## Example
+   *
+   * {@example testing/ts/matchers.ts region='toHaveCssClass'}
+   */
+  toHaveCssClass(expected: string): boolean;
+
+  /**
+   * Expect the element to have the given CSS styles.
+   *
+   * ## Example
+   *
+   * {@example testing/ts/matchers.ts region='toHaveCssStyle'}
+   */
+  toHaveCssStyle(expected: {[k: string]: string}|string): boolean;
+
+  /**
+   * Expect a class to implement the interface of the given class.
+   *
+   * ## Example
+   *
+   * {@example testing/ts/matchers.ts region='toImplement'}
+   */
+  toImplement(expected: any): boolean;
+
+  /**
+   * Expect an exception to contain the given error text.
+   *
+   * ## Example
+   *
+   * {@example testing/ts/matchers.ts region='toContainError'}
+   */
+  toContainError(expected: any): boolean;
+
+  /**
+   * Invert the matchers.
+   */
+  not: NgMatchers<T>;
+}
+
+const _global = <any>(typeof window === 'undefined' ? global : window);
+
+/**
+ * Jasmine matching function with Angular matchers mixed in.
+ *
+ * ## Example
+ *
+ * {@example testing/ts/matchers.ts region='toHaveText'}
+ */
+export const expect: <T = any>(actual: T) => NgMatchers<T> = _global.expect;
+
+
+// Some Map polyfills don't polyfill Map.toString correctly, which
+// gives us bad error messages in tests.
+// The only way to do this in Jasmine is to monkey patch a method
+// to the object :-(
+(Map as any).prototype['jasmineToString'] = function() {
+  const m = this;
+  if (!m) {
+    return '' + m;
+  }
+  const res: any[] = [];
+  m.forEach((v: any, k: any) => { res.push(`${String(k)}:${String(v)}`); });
+  return `{ ${res.join(',')} }`;
+};
+
+_global.beforeEach(function() {
+  // Custom handler for Map as we use Jasmine 2.4, and support for maps is not
+  // added until Jasmine 2.6.
+  jasmine.addCustomEqualityTester(function compareMap(actual: any, expected: any): boolean {
+    if (actual instanceof Map) {
+      let pass = actual.size === expected.size;
+      if (pass) {
+        actual.forEach((v: any, k: any) => {
+          pass = pass && jasmine.matchersUtil.equals(v, expected.get(k));
+        });
+      }
+      return pass;
+    } else {
+      // TODO(misko): we should change the return, but jasmine.d.ts is not null safe
+      return undefined !;
+    }
+  });
+  jasmine.addMatchers({
+    toBePromise: function() {
+      return {
+        compare: function(actual: any) {
+          const pass = typeof actual === 'object' && typeof actual.then === 'function';
+          return {pass: pass, get message() { return 'Expected ' + actual + ' to be a promise'; }};
+        }
+      };
+    },
+
+    toBeAnInstanceOf: function() {
+      return {
+        compare: function(actual: any, expectedClass: any) {
+          const pass = typeof actual === 'object' && actual instanceof expectedClass;
+          return {
+            pass: pass,
+            get message() {
+              return 'Expected ' + actual + ' to be an instance of ' + expectedClass;
+            }
+          };
+        }
+      };
+    },
+
+    toHaveText: function() {
+      return {
+        compare: function(actual: any, expectedText: string) {
+          const actualText = elementText(actual);
+          return {
+            pass: actualText == expectedText,
+            get message() { return 'Expected ' + actualText + ' to be equal to ' + expectedText; }
+          };
+        }
+      };
+    },
+
+    toHaveCssClass: function() {
+      return {compare: buildError(false), negativeCompare: buildError(true)};
+
+      function buildError(isNot: boolean) {
+        return function(actual: any, className: string) {
+          return {
+            pass: getDOM().hasClass(actual, className) == !isNot,
+            get message() {
+              return `Expected ${actual.outerHTML} ${isNot ? 'not ' : ''}to contain the CSS class "${className}"`;
+            }
+          };
+        };
+      }
+    },
+
+    toHaveCssStyle: function() {
+      return {
+        compare: function(actual: any, styles: {[k: string]: string}|string) {
+          let allPassed: boolean;
+          if (typeof styles === 'string') {
+            allPassed = getDOM().hasStyle(actual, styles);
+          } else {
+            allPassed = Object.keys(styles).length !== 0;
+            Object.keys(styles).forEach(prop => {
+              allPassed = allPassed && getDOM().hasStyle(actual, prop, styles[prop]);
+            });
+          }
+
+          return {
+            pass: allPassed,
+            get message() {
+              const expectedValueStr = typeof styles === 'string' ? styles : JSON.stringify(styles);
+              return `Expected ${actual.outerHTML} ${!allPassed ? ' ' : 'not '}to contain the
+                      CSS ${typeof styles === 'string' ? 'property' : 'styles'} "${expectedValueStr}"`;
+            }
+          };
+        }
+      };
+    },
+
+    toContainError: function() {
+      return {
+        compare: function(actual: any, expectedText: any) {
+          const errorMessage = actual.toString();
+          return {
+            pass: errorMessage.indexOf(expectedText) > -1,
+            get message() { return 'Expected ' + errorMessage + ' to contain ' + expectedText; }
+          };
+        }
+      };
+    },
+
+    toImplement: function() {
+      return {
+        compare: function(actualObject: any, expectedInterface: any) {
+          const intProps = Object.keys(expectedInterface.prototype);
+
+          const missedMethods: any[] = [];
+          intProps.forEach((k) => {
+            if (!actualObject.constructor.prototype[k]) missedMethods.push(k);
+          });
+
+          return {
+            pass: missedMethods.length == 0,
+            get message() {
+              return 'Expected ' + actualObject + ' to have the following methods: ' +
+                  missedMethods.join(', ');
+            }
+          };
+        }
+      };
+    }
+  });
+});
+
+function elementText(n: any): string {
+  const hasNodes = (n: any) => {
+    const children = getDOM().childNodes(n);
+    return children && children.length > 0;
+  };
+
+  if (n instanceof Array) {
+    return n.map(elementText).join('');
+  }
+
+  if (getDOM().isCommentNode(n)) {
+    return '';
+  }
+
+  if (getDOM().isElementNode(n) && getDOM().tagName(n) == 'CONTENT') {
+    return elementText(Array.prototype.slice.apply(getDOM().getDistributedNodes(n)));
+  }
+
+  if (getDOM().hasShadowRoot(n)) {
+    return elementText(getDOM().childNodesAsList(getDOM().getShadowRoot(n)));
+  }
+
+  if (hasNodes(n)) {
+    return elementText(getDOM().childNodesAsList(n));
+  }
+
+  return getDOM().getText(n) !;
+}
diff --git a/packages/platform-browser/testing/src/testing.ts b/packages/platform-browser/testing/src/testing.ts
new file mode 100644
index 000000000000..fd7ecd27076c
--- /dev/null
+++ b/packages/platform-browser/testing/src/testing.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 platform-browser/testing package.
+ */
+export * from './browser';
diff --git a/packages/platform-browser/testing/tsconfig-build.json b/packages/platform-browser/testing/tsconfig-build.json
new file mode 100644
index 000000000000..41f39c9acadc
--- /dev/null
+++ b/packages/platform-browser/testing/tsconfig-build.json
@@ -0,0 +1,31 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/core": ["../../../dist/packages/core"],
+      "@angular/core/testing": ["../../../dist/packages/core/testing"],
+      "@angular/common": ["../../../dist/packages/common"],
+      "@angular/common/testing": ["../../../dist/packages/common/testing"],
+      "@angular/platform-browser": ["../../../dist/packages/platform-browser"]
+    },
+    "outDir": "../../../dist/packages/platform-browser"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../../node_modules/@types/hammerjs/index.d.ts",
+    "../../../node_modules/@types/jasmine/index.d.ts",
+    "../../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "testing.js",
+    "flatModuleId": "@angular/platform-browser/testing"
+  }
+}
diff --git a/packages/platform-browser/tsconfig-build.json b/packages/platform-browser/tsconfig-build.json
new file mode 100644
index 000000000000..f1c58e2ef681
--- /dev/null
+++ b/packages/platform-browser/tsconfig-build.json
@@ -0,0 +1,29 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/platform-browser/animations": ["../../dist/packages/platform-browser/animations"],
+      "@angular/common": ["../../dist/packages/common"]
+    },
+    "outDir": "../../dist/packages/platform-browser"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/@types/hammerjs/index.d.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts",
+    "../goog.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "platform-browser.js",
+    "flatModuleId": "@angular/platform-browser"
+  }
+}
diff --git a/packages/platform-server/BUILD.bazel b/packages/platform-server/BUILD.bazel
new file mode 100644
index 000000000000..f1f8242cfb96
--- /dev/null
+++ b/packages/platform-server/BUILD.bazel
@@ -0,0 +1,43 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "platform-server",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/platform-server",
+    deps = [
+        "//packages/animations/browser",
+        "//packages/common",
+        "//packages/common/http",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/http",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser/animations",
+        "@rxjs",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "//packages/platform-server/testing:package.json",
+    ],
+    entry_point = "packages/platform-server/index.js",
+    tags = [
+        "ivy-jit",
+        "release-with-framework",
+    ],
+    deps = [
+        ":platform-server",
+        "//packages/platform-server/testing",
+    ],
+)
diff --git a/packages/platform-server/index.ts b/packages/platform-server/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/platform-server/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';
diff --git a/packages/platform-server/package.json b/packages/platform-server/package.json
new file mode 100644
index 000000000000..cbfd8087e9cb
--- /dev/null
+++ b/packages/platform-server/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@angular/platform-server",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - library for using Angular in Node.js",
+  "main": "./bundles/platform-server.umd.js",
+  "module": "./fesm5/platform-server.js",
+  "es2015": "./fesm2015/platform-server.js",
+  "esm5": "./esm5/platform-server.js",
+  "esm2015": "./esm2015/platform-server.js",
+  "fesm5": "./fesm5/platform-server.js",
+  "fesm2015": "./fesm2015/platform-server.js",
+  "typings": "./platform-server.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/animations": "0.0.0-PLACEHOLDER",
+    "@angular/common": "0.0.0-PLACEHOLDER",
+    "@angular/compiler": "0.0.0-PLACEHOLDER",
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser-dynamic": "0.0.0-PLACEHOLDER"
+  },
+  "dependencies": {
+    "domino": "^2.0.1",
+    "tslib": "^1.9.0",
+    "xhr2": "^0.1.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false,
+  "engines" : {
+    "node" : ">=8.0"
+  }
+}
diff --git a/packages/platform-server/public_api.ts b/packages/platform-server/public_api.ts
new file mode 100644
index 000000000000..13238d82bd82
--- /dev/null
+++ b/packages/platform-server/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/platform-server';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/platform-server/rollup.config.js b/packages/platform-server/rollup.config.js
new file mode 100644
index 000000000000..81f39156846a
--- /dev/null
+++ b/packages/platform-server/rollup.config.js
@@ -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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/animations': 'ng.animations',
+  '@angular/animations/browser': 'ng.animations.browser',
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/common/http': 'ng.common.http',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/http': 'ng.http',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/platform-browser/animations': 'ng.platformBrowser.animations',
+  '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
+  'rxjs': 'rxjs',
+  'rxjs/operators': 'rxjs.operators',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/platform-server/fesm5/platform-server.js',
+  dest: '../../dist/packages-dist/platform-server/bundles/platform-server.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/platform-server'},
+  moduleName: 'ng.platformServer',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/platform-server/src/domino_adapter.ts b/packages/platform-server/src/domino_adapter.ts
new file mode 100644
index 000000000000..17bf3c4fc95c
--- /dev/null
+++ b/packages/platform-server/src/domino_adapter.ts
@@ -0,0 +1,224 @@
+/**
+ * @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 domino = require('domino');
+
+import {ɵBrowserDomAdapter as BrowserDomAdapter, ɵsetRootDomAdapter as setRootDomAdapter} from '@angular/platform-browser';
+
+function _notImplemented(methodName: string) {
+  return new Error('This method is not implemented in DominoAdapter: ' + methodName);
+}
+
+function setDomTypes() {
+  // Make all Domino types available as types in the global env.
+  Object.assign(global, domino.impl);
+  (global as any)['KeyboardEvent'] = domino.impl.Event;
+}
+
+/**
+ * Parses a document string to a Document object.
+ */
+export function parseDocument(html: string, url = '/') {
+  let window = domino.createWindow(html, url);
+  let doc = window.document;
+  return doc;
+}
+
+/**
+ * Serializes a document to string.
+ */
+export function serializeDocument(doc: Document): string {
+  return (doc as any).serialize();
+}
+
+/**
+ * DOM Adapter for the server platform based on https://github.com/fgnass/domino.
+ */
+export class DominoAdapter extends BrowserDomAdapter {
+  static makeCurrent() {
+    setDomTypes();
+    setRootDomAdapter(new DominoAdapter());
+  }
+
+  private static defaultDoc: Document;
+
+  logError(error: string) { console.error(error); }
+
+  log(error: string) {
+    // tslint:disable-next-line:no-console
+    console.log(error);
+  }
+
+  logGroup(error: string) { console.error(error); }
+
+  logGroupEnd() {}
+
+  supportsDOMEvents(): boolean { return false; }
+  supportsNativeShadowDOM(): boolean { return false; }
+
+  contains(nodeA: any, nodeB: any): boolean {
+    let inner = nodeB;
+    while (inner) {
+      if (inner === nodeA) return true;
+      inner = inner.parent;
+    }
+    return false;
+  }
+
+  createHtmlDocument(): HTMLDocument {
+    return parseDocument('<html><head><title>fakeTitle</title></head><body></body></html>');
+  }
+
+  getDefaultDocument(): Document {
+    if (!DominoAdapter.defaultDoc) {
+      DominoAdapter.defaultDoc = domino.createDocument();
+    }
+    return DominoAdapter.defaultDoc;
+  }
+
+  createShadowRoot(el: any, doc: Document = document): DocumentFragment {
+    el.shadowRoot = doc.createDocumentFragment();
+    el.shadowRoot.parent = el;
+    return el.shadowRoot;
+  }
+  getShadowRoot(el: any): DocumentFragment { return el.shadowRoot; }
+
+  isTextNode(node: any): boolean { return node.nodeType === DominoAdapter.defaultDoc.TEXT_NODE; }
+  isCommentNode(node: any): boolean {
+    return node.nodeType === DominoAdapter.defaultDoc.COMMENT_NODE;
+  }
+  isElementNode(node: any): boolean {
+    return node ? node.nodeType === DominoAdapter.defaultDoc.ELEMENT_NODE : false;
+  }
+  hasShadowRoot(node: any): boolean { return node.shadowRoot != null; }
+  isShadowRoot(node: any): boolean { return this.getShadowRoot(node) == node; }
+
+  getProperty(el: Element, name: string): any {
+    if (name === 'href') {
+      // Domino tries tp resolve href-s which we do not want. Just return the
+      // attribute value.
+      return this.getAttribute(el, 'href');
+    } else if (name === 'innerText') {
+      // Domino does not support innerText. Just map it to textContent.
+      return el.textContent;
+    }
+    return (<any>el)[name];
+  }
+
+  setProperty(el: Element, name: string, value: any) {
+    if (name === 'href') {
+      // Even though the server renderer reflects any properties to attributes
+      // map 'href' to attribute just to handle when setProperty is directly called.
+      this.setAttribute(el, 'href', value);
+    } else if (name === 'innerText') {
+      // Domino does not support innerText. Just map it to textContent.
+      el.textContent = value;
+    }
+    (<any>el)[name] = value;
+  }
+
+  getGlobalEventTarget(doc: Document, target: string): EventTarget|null {
+    if (target === 'window') {
+      return doc.defaultView;
+    }
+    if (target === 'document') {
+      return doc;
+    }
+    if (target === 'body') {
+      return doc.body;
+    }
+    return null;
+  }
+
+  getBaseHref(doc: Document): string {
+    const base = this.querySelector(doc.documentElement, 'base');
+    let href = '';
+    if (base) {
+      href = this.getHref(base);
+    }
+    // TODO(alxhub): Need relative path logic from BrowserDomAdapter here?
+    return href;
+  }
+
+  /** @internal */
+  _readStyleAttribute(element: any): {[name: string]: string} {
+    const styleMap: {[name: string]: string} = {};
+    const styleAttribute = element.getAttribute('style');
+    if (styleAttribute) {
+      const styleList = styleAttribute.split(/;+/g);
+      for (let i = 0; i < styleList.length; i++) {
+        const style = styleList[i].trim();
+        if (style.length > 0) {
+          const colonIndex = style.indexOf(':');
+          if (colonIndex === -1) {
+            throw new Error(`Invalid CSS style: ${style}`);
+          }
+          const name = style.substr(0, colonIndex).trim();
+          styleMap[name] = style.substr(colonIndex + 1).trim();
+        }
+      }
+    }
+    return styleMap;
+  }
+  /** @internal */
+  _writeStyleAttribute(element: any, styleMap: {[name: string]: string}) {
+    let styleAttrValue = '';
+    for (const key in styleMap) {
+      const newValue = styleMap[key];
+      if (newValue) {
+        styleAttrValue += key + ':' + styleMap[key] + ';';
+      }
+    }
+    element.setAttribute('style', styleAttrValue);
+  }
+  setStyle(element: any, styleName: string, styleValue?: string|null) {
+    styleName = styleName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    const styleMap = this._readStyleAttribute(element);
+    styleMap[styleName] = styleValue || '';
+    this._writeStyleAttribute(element, styleMap);
+  }
+  removeStyle(element: any, styleName: string) {
+    // IE requires '' instead of null
+    // see https://github.com/angular/angular/issues/7916
+    this.setStyle(element, styleName, '');
+  }
+  getStyle(element: any, styleName: string): string {
+    const styleMap = this._readStyleAttribute(element);
+    return styleMap[styleName] || '';
+  }
+  hasStyle(element: any, styleName: string, styleValue?: string): boolean {
+    const value = this.getStyle(element, styleName);
+    return styleValue ? value == styleValue : value.length > 0;
+  }
+
+  dispatchEvent(el: Node, evt: any) {
+    el.dispatchEvent(evt);
+
+    // Dispatch the event to the window also.
+    const doc = el.ownerDocument || el;
+    const win = (doc as any).defaultView;
+    if (win) {
+      win.dispatchEvent(evt);
+    }
+  }
+
+  getHistory(): History { throw _notImplemented('getHistory'); }
+  getLocation(): Location { throw _notImplemented('getLocation'); }
+  getUserAgent(): string { return 'Fake user agent'; }
+
+  supportsWebAnimation(): boolean { return false; }
+  performanceNow(): number { return Date.now(); }
+  getAnimationPrefix(): string { return ''; }
+  getTransitionEnd(): string { return 'transitionend'; }
+  supportsAnimation(): boolean { return true; }
+
+  getDistributedNodes(el: any): Node[] { throw _notImplemented('getDistributedNodes'); }
+
+  supportsCookies(): boolean { return false; }
+  getCookie(name: string): string { throw _notImplemented('getCookie'); }
+  setCookie(name: string, value: string) { throw _notImplemented('setCookie'); }
+}
diff --git a/packages/platform-server/src/http.ts b/packages/platform-server/src/http.ts
new file mode 100644
index 000000000000..58453a80ee41
--- /dev/null
+++ b/packages/platform-server/src/http.ts
@@ -0,0 +1,173 @@
+/**
+ * @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 xhr2: any = require('xhr2');
+
+import {Injectable, Injector, Optional, Provider, InjectFlags} from '@angular/core';
+import {BrowserXhr, Connection, ConnectionBackend, Http, ReadyState, Request, RequestOptions, Response, XHRBackend, XSRFStrategy} from '@angular/http';
+
+import {HttpEvent, HttpRequest, HttpHandler, HttpInterceptor, HTTP_INTERCEPTORS, HttpBackend, XhrFactory, ɵHttpInterceptingHandler as HttpInterceptingHandler} from '@angular/common/http';
+
+import {Observable, Observer, Subscription} from 'rxjs';
+
+const isAbsoluteUrl = /^[a-zA-Z\-\+.]+:\/\//;
+
+function validateRequestUrl(url: string): void {
+  if (!isAbsoluteUrl.test(url)) {
+    throw new Error(`URLs requested via Http on the server must be absolute. URL: ${url}`);
+  }
+}
+
+@Injectable()
+export class ServerXhr implements BrowserXhr {
+  build(): XMLHttpRequest { return new xhr2.XMLHttpRequest(); }
+}
+
+@Injectable()
+export class ServerXsrfStrategy implements XSRFStrategy {
+  configureRequest(req: Request): void {}
+}
+
+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 = null;
+      let savedResult: any = null;
+      let savedError: any = null;
+
+      const scheduleTask = (_task: Task) => {
+        task = _task;
+        scheduled = true;
+
+        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) => {
+        if (!scheduled) {
+          return;
+        }
+        scheduled = false;
+        if (sub) {
+          sub.unsubscribe();
+          sub = null;
+        }
+      };
+
+      const onComplete = () => {
+        if (savedError !== null) {
+          observer.error(savedError);
+        } else {
+          observer.next(savedResult);
+          observer.complete();
+        }
+      };
+
+      // 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(
+          'ZoneMacroTaskWrapper.subscribe', onComplete, {}, () => null, cancelTask);
+      scheduleTask(_task);
+
+      return () => {
+        if (scheduled && task) {
+          task.zone.cancelTask(task);
+          scheduled = false;
+        }
+        if (sub) {
+          sub.unsubscribe();
+          sub = null;
+        }
+      };
+    });
+  }
+
+  protected abstract delegate(request: S): Observable<R>;
+}
+
+export class ZoneMacroTaskConnection extends ZoneMacroTaskWrapper<Request, Response> implements
+    Connection {
+  response: Observable<Response>;
+  // TODO(issue/24571): remove '!'.
+  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;
+  }
+}
+
+export class ZoneMacroTaskBackend implements ConnectionBackend {
+  constructor(private backend: XHRBackend) {}
+
+  createConnection(request: any): ZoneMacroTaskConnection {
+    return new ZoneMacroTaskConnection(request, this.backend);
+  }
+}
+
+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, injector: Injector) {
+  const realBackend: HttpBackend = new HttpInterceptingHandler(backend, injector);
+  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: XhrFactory, useClass: ServerXhr}, {
+    provide: HttpHandler,
+    useFactory: zoneWrappedInterceptingHandler,
+    deps: [HttpBackend, Injector]
+  }
+];
diff --git a/packages/platform-server/src/location.ts b/packages/platform-server/src/location.ts
new file mode 100644
index 000000000000..d7dbcb2df83a
--- /dev/null
+++ b/packages/platform-server/src/location.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 {LocationChangeEvent, LocationChangeListener, PlatformLocation} from '@angular/common';
+import {Inject, Injectable, Optional} from '@angular/core';
+import {DOCUMENT, ɵgetDOM as getDOM} from '@angular/platform-browser';
+import {Subject} from 'rxjs';
+import * as url from 'url';
+import {INITIAL_CONFIG, PlatformConfig} from './tokens';
+
+
+function parseUrl(urlStr: string): {pathname: string, search: string, hash: string} {
+  const parsedUrl = url.parse(urlStr);
+  return {
+    pathname: parsedUrl.pathname || '',
+    search: parsedUrl.search || '',
+    hash: parsedUrl.hash || '',
+  };
+}
+
+/**
+ * Server-side implementation of URL state. Implements `pathname`, `search`, and `hash`
+ * but not the state stack.
+ */
+@Injectable()
+export class ServerPlatformLocation implements PlatformLocation {
+  public readonly pathname: string = '/';
+  public readonly search: string = '';
+  public readonly hash: string = '';
+  private _hashUpdate = new Subject<LocationChangeEvent>();
+
+  constructor(
+      @Inject(DOCUMENT) private _doc: any, @Optional() @Inject(INITIAL_CONFIG) _config: any) {
+    const config = _config as PlatformConfig | null;
+    if (!!config && !!config.url) {
+      const parsedUrl = parseUrl(config.url);
+      this.pathname = parsedUrl.pathname;
+      this.search = parsedUrl.search;
+      this.hash = parsedUrl.hash;
+    }
+  }
+
+  getBaseHrefFromDOM(): string { return getDOM().getBaseHref(this._doc) !; }
+
+  onPopState(fn: LocationChangeListener): void {
+    // No-op: a state stack is not implemented, so
+    // no events will ever come.
+  }
+
+  onHashChange(fn: LocationChangeListener): void { this._hashUpdate.subscribe(fn); }
+
+  get url(): string { return `${this.pathname}${this.search}${this.hash}`; }
+
+  private setHash(value: string, oldUrl: string) {
+    if (this.hash === value) {
+      // Don't fire events if the hash has not changed.
+      return;
+    }
+    (this as{hash: string}).hash = value;
+    const newUrl = this.url;
+    scheduleMicroTask(() => this._hashUpdate.next({
+      type: 'hashchange', state: null, oldUrl, newUrl
+    } as LocationChangeEvent));
+  }
+
+  replaceState(state: any, title: string, newUrl: string): void {
+    const oldUrl = this.url;
+    const parsedUrl = parseUrl(newUrl);
+    (this as{pathname: string}).pathname = parsedUrl.pathname;
+    (this as{search: string}).search = parsedUrl.search;
+    this.setHash(parsedUrl.hash, oldUrl);
+  }
+
+  pushState(state: any, title: string, newUrl: string): void {
+    this.replaceState(state, title, newUrl);
+  }
+
+  forward(): void { throw new Error('Not implemented'); }
+
+  back(): void { throw new Error('Not implemented'); }
+}
+
+export function scheduleMicroTask(fn: Function) {
+  Zone.current.scheduleMicroTask('scheduleMicrotask', fn);
+}
diff --git a/packages/platform-server/src/platform-server.ts b/packages/platform-server/src/platform-server.ts
new file mode 100644
index 000000000000..762cefdd88f2
--- /dev/null
+++ b/packages/platform-server/src/platform-server.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {PlatformState} from './platform_state';
+export {ServerModule, platformDynamicServer, platformServer} from './server';
+export {BEFORE_APP_SERIALIZED, INITIAL_CONFIG, PlatformConfig} from './tokens';
+export {ServerTransferStateModule} from './transfer_state';
+export {renderModule, renderModuleFactory} from './utils';
+
+export * from './private_export';
+export {VERSION} from './version';
diff --git a/packages/platform-server/src/platform_state.ts b/packages/platform-server/src/platform_state.ts
new file mode 100644
index 000000000000..d12898addb74
--- /dev/null
+++ b/packages/platform-server/src/platform_state.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 {Inject, Injectable} from '@angular/core';
+import {DOCUMENT, ɵgetDOM as getDOM} from '@angular/platform-browser';
+
+import {serializeDocument} from './domino_adapter';
+
+/**
+ * Representation of the current platform state.
+ *
+ * @experimental
+ */
+@Injectable()
+export class PlatformState {
+  constructor(@Inject(DOCUMENT) private _doc: any) {}
+
+  /**
+   * Renders the current state of the platform to string.
+   */
+  renderToString(): string { return serializeDocument(this._doc); }
+
+  /**
+   * Returns the current DOM state.
+   */
+  getDocument(): any { return this._doc; }
+}
diff --git a/packages/platform-server/src/private_export.ts b/packages/platform-server/src/private_export.ts
new file mode 100644
index 000000000000..d49e76e391c2
--- /dev/null
+++ b/packages/platform-server/src/private_export.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 {INTERNAL_SERVER_PLATFORM_PROVIDERS as ɵINTERNAL_SERVER_PLATFORM_PROVIDERS, SERVER_RENDER_PROVIDERS as ɵSERVER_RENDER_PROVIDERS} from './server';
+export {ServerRendererFactory2 as ɵServerRendererFactory2} from './server_renderer';
\ No newline at end of file
diff --git a/packages/platform-server/src/server.ts b/packages/platform-server/src/server.ts
new file mode 100644
index 000000000000..a09d0882dbb7
--- /dev/null
+++ b/packages/platform-server/src/server.ts
@@ -0,0 +1,104 @@
+/**
+ * @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 {ɵAnimationEngine} from '@angular/animations/browser';
+import {PlatformLocation, ViewportScroller, ɵNullViewportScroller as NullViewportScroller, ɵPLATFORM_SERVER_ID as PLATFORM_SERVER_ID} from '@angular/common';
+import {HttpClientModule} from '@angular/common/http';
+import {Injectable, InjectionToken, Injector, NgModule, NgZone, Optional, PLATFORM_ID, PLATFORM_INITIALIZER, PlatformRef, Provider, RendererFactory2, RootRenderer, StaticProvider, Testability, createPlatformFactory, isDevMode, platformCore, ɵALLOW_MULTIPLE_PLATFORMS as ALLOW_MULTIPLE_PLATFORMS} from '@angular/core';
+import {HttpModule} from '@angular/http';
+import {BrowserModule, DOCUMENT, EVENT_MANAGER_PLUGINS, ɵSharedStylesHost as SharedStylesHost, ɵTRANSITION_ID, ɵgetDOM as getDOM} from '@angular/platform-browser';
+import {ɵplatformCoreDynamic as platformCoreDynamic} from '@angular/platform-browser-dynamic';
+import {NoopAnimationsModule, ɵAnimationRendererFactory} from '@angular/platform-browser/animations';
+
+import {DominoAdapter, parseDocument} from './domino_adapter';
+import {SERVER_HTTP_PROVIDERS} from './http';
+import {ServerPlatformLocation} from './location';
+import {PlatformState} from './platform_state';
+import {ServerEventManagerPlugin} from './server_events';
+import {ServerRendererFactory2} from './server_renderer';
+import {ServerStylesHost} from './styles_host';
+import {INITIAL_CONFIG, PlatformConfig} from './tokens';
+
+function notSupported(feature: string): Error {
+  throw new Error(`platform-server does not support '${feature}'.`);
+}
+
+export const INTERNAL_SERVER_PLATFORM_PROVIDERS: StaticProvider[] = [
+  {provide: DOCUMENT, useFactory: _document, deps: [Injector]},
+  {provide: PLATFORM_ID, useValue: PLATFORM_SERVER_ID},
+  {provide: PLATFORM_INITIALIZER, useFactory: initDominoAdapter, multi: true, deps: [Injector]}, {
+    provide: PlatformLocation,
+    useClass: ServerPlatformLocation,
+    deps: [DOCUMENT, [Optional, INITIAL_CONFIG]]
+  },
+  {provide: PlatformState, deps: [DOCUMENT]},
+  // Add special provider that allows multiple instances of platformServer* to be created.
+  {provide: ALLOW_MULTIPLE_PLATFORMS, useValue: true}
+];
+
+function initDominoAdapter(injector: Injector) {
+  return () => { DominoAdapter.makeCurrent(); };
+}
+
+export function instantiateServerRendererFactory(
+    renderer: RendererFactory2, engine: ɵAnimationEngine, zone: NgZone) {
+  return new ɵAnimationRendererFactory(renderer, engine, zone);
+}
+
+export const SERVER_RENDER_PROVIDERS: Provider[] = [
+  ServerRendererFactory2,
+  {
+    provide: RendererFactory2,
+    useFactory: instantiateServerRendererFactory,
+    deps: [ServerRendererFactory2, ɵAnimationEngine, NgZone]
+  },
+  ServerStylesHost,
+  {provide: SharedStylesHost, useExisting: ServerStylesHost},
+  {provide: EVENT_MANAGER_PLUGINS, multi: true, useClass: ServerEventManagerPlugin},
+];
+
+/**
+ * The ng module for the server.
+ *
+ * @experimental
+ */
+@NgModule({
+  exports: [BrowserModule],
+  imports: [HttpModule, HttpClientModule, NoopAnimationsModule],
+  providers: [
+    SERVER_RENDER_PROVIDERS,
+    SERVER_HTTP_PROVIDERS,
+    {provide: Testability, useValue: null},
+    {provide: ViewportScroller, useClass: NullViewportScroller},
+  ],
+})
+export class ServerModule {
+}
+
+function _document(injector: Injector) {
+  let config: PlatformConfig|null = injector.get(INITIAL_CONFIG, null);
+  if (config && config.document) {
+    return parseDocument(config.document, config.url);
+  } else {
+    return getDOM().createHtmlDocument();
+  }
+}
+
+/**
+ * @experimental
+ */
+export const platformServer =
+    createPlatformFactory(platformCore, 'server', INTERNAL_SERVER_PLATFORM_PROVIDERS);
+
+/**
+ * The server platform that supports the runtime compiler.
+ *
+ * @experimental
+ */
+export const platformDynamicServer =
+    createPlatformFactory(platformCoreDynamic, 'serverDynamic', INTERNAL_SERVER_PLATFORM_PROVIDERS);
diff --git a/packages/platform-server/src/server_events.ts b/packages/platform-server/src/server_events.ts
new file mode 100644
index 000000000000..25598633a991
--- /dev/null
+++ b/packages/platform-server/src/server_events.ts
@@ -0,0 +1,30 @@
+/**
+ * @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, Injectable} from '@angular/core';
+import {DOCUMENT, ɵgetDOM as getDOM} from '@angular/platform-browser';
+
+@Injectable()
+export class ServerEventManagerPlugin /* extends EventManagerPlugin which is private */ {
+  constructor(@Inject(DOCUMENT) private doc: any) {}
+
+  // Handle all events on the server.
+  supports(eventName: string) { return true; }
+
+  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
+    return getDOM().onAndCancel(element, eventName, handler);
+  }
+
+  addGlobalEventListener(element: string, eventName: string, handler: Function): Function {
+    const target: HTMLElement = getDOM().getGlobalEventTarget(this.doc, element);
+    if (!target) {
+      throw new Error(`Unsupported event target ${target} for event ${eventName}`);
+    }
+    return this.addEventListener(target, eventName, handler);
+  }
+}
diff --git a/packages/platform-server/src/server_renderer.ts b/packages/platform-server/src/server_renderer.ts
new file mode 100644
index 000000000000..9cd29cfa6a49
--- /dev/null
+++ b/packages/platform-server/src/server_renderer.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 {DomElementSchemaRegistry} from '@angular/compiler';
+import {APP_ID, Inject, Injectable, NgZone, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
+import {DOCUMENT, EventManager, ɵNAMESPACE_URIS as NAMESPACE_URIS, ɵSharedStylesHost as SharedStylesHost, ɵflattenStyles as flattenStyles, ɵgetDOM as getDOM, ɵshimContentAttribute as shimContentAttribute, ɵshimHostAttribute as shimHostAttribute} from '@angular/platform-browser';
+
+const EMPTY_ARRAY: any[] = [];
+
+@Injectable()
+export class ServerRendererFactory2 implements RendererFactory2 {
+  private rendererByCompId = new Map<string, Renderer2>();
+  private defaultRenderer: Renderer2;
+  private schema = new DomElementSchemaRegistry();
+
+  constructor(
+      private eventManager: EventManager, private ngZone: NgZone,
+      @Inject(DOCUMENT) private document: any, private sharedStylesHost: SharedStylesHost) {
+    this.defaultRenderer = new DefaultServerRenderer2(eventManager, document, ngZone, this.schema);
+  }
+
+  createRenderer(element: any, type: RendererType2|null): Renderer2 {
+    if (!element || !type) {
+      return this.defaultRenderer;
+    }
+    switch (type.encapsulation) {
+      case ViewEncapsulation.Native:
+      case ViewEncapsulation.Emulated: {
+        let renderer = this.rendererByCompId.get(type.id);
+        if (!renderer) {
+          renderer = new EmulatedEncapsulationServerRenderer2(
+              this.eventManager, this.document, this.ngZone, this.sharedStylesHost, this.schema,
+              type);
+          this.rendererByCompId.set(type.id, renderer);
+        }
+        (<EmulatedEncapsulationServerRenderer2>renderer).applyToHost(element);
+        return renderer;
+      }
+      case ViewEncapsulation.Native:
+        throw new Error('Native encapsulation is not supported on the server!');
+      default: {
+        if (!this.rendererByCompId.has(type.id)) {
+          const styles = flattenStyles(type.id, type.styles, []);
+          this.sharedStylesHost.addStyles(styles);
+          this.rendererByCompId.set(type.id, this.defaultRenderer);
+        }
+        return this.defaultRenderer;
+      }
+    }
+  }
+
+  begin() {}
+  end() {}
+}
+
+class DefaultServerRenderer2 implements Renderer2 {
+  data: {[key: string]: any} = Object.create(null);
+
+  constructor(
+      private eventManager: EventManager, protected document: any, private ngZone: NgZone,
+      private schema: DomElementSchemaRegistry) {}
+
+  destroy(): void {}
+
+  destroyNode: null;
+
+  createElement(name: string, namespace?: string, debugInfo?: any): any {
+    if (namespace) {
+      return getDOM().createElementNS(NAMESPACE_URIS[namespace], name, this.document);
+    }
+
+    return getDOM().createElement(name, this.document);
+  }
+
+  createComment(value: string, debugInfo?: any): any { return getDOM().createComment(value); }
+
+  createText(value: string, debugInfo?: any): any { return getDOM().createTextNode(value); }
+
+  appendChild(parent: any, newChild: any): void { getDOM().appendChild(parent, newChild); }
+
+  insertBefore(parent: any, newChild: any, refChild: any): void {
+    if (parent) {
+      getDOM().insertBefore(parent, refChild, newChild);
+    }
+  }
+
+  removeChild(parent: any, oldChild: any): void {
+    if (parent) {
+      getDOM().removeChild(parent, oldChild);
+    }
+  }
+
+  selectRootElement(selectorOrNode: string|any, debugInfo?: any): any {
+    let el: any;
+    if (typeof selectorOrNode === 'string') {
+      el = getDOM().querySelector(this.document, selectorOrNode);
+      if (!el) {
+        throw new Error(`The selector "${selectorOrNode}" did not match any elements`);
+      }
+    } else {
+      el = selectorOrNode;
+    }
+    getDOM().clearNodes(el);
+    return el;
+  }
+
+  parentNode(node: any): any { return getDOM().parentElement(node); }
+
+  nextSibling(node: any): any { return getDOM().nextSibling(node); }
+
+  setAttribute(el: any, name: string, value: string, namespace?: string): void {
+    if (namespace) {
+      getDOM().setAttributeNS(el, NAMESPACE_URIS[namespace], namespace + ':' + name, value);
+    } else {
+      getDOM().setAttribute(el, name, value);
+    }
+  }
+
+  removeAttribute(el: any, name: string, namespace?: string): void {
+    if (namespace) {
+      getDOM().removeAttributeNS(el, NAMESPACE_URIS[namespace], name);
+    } else {
+      getDOM().removeAttribute(el, name);
+    }
+  }
+
+  addClass(el: any, name: string): void { getDOM().addClass(el, name); }
+
+  removeClass(el: any, name: string): void { getDOM().removeClass(el, name); }
+
+  setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
+    getDOM().setStyle(el, style, value);
+  }
+
+  removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
+    getDOM().removeStyle(el, style);
+  }
+
+  // The value was validated already as a property binding, against the property name.
+  // To know this value is safe to use as an attribute, the security context of the
+  // attribute with the given name is checked against that security context of the
+  // property.
+  private _isSafeToReflectProperty(tagName: string, propertyName: string): boolean {
+    return this.schema.securityContext(tagName, propertyName, true) ===
+        this.schema.securityContext(tagName, propertyName, false);
+  }
+
+  setProperty(el: any, name: string, value: any): void {
+    checkNoSyntheticProp(name, 'property');
+    getDOM().setProperty(el, name, value);
+    // Mirror property values for known HTML element properties in the attributes.
+    // Skip `innerhtml` which is conservatively marked as an attribute for security
+    // purposes but is not actually an attribute.
+    const tagName = (el.tagName as string).toLowerCase();
+    if (value != null && (typeof value === 'number' || typeof value == 'string') &&
+        name.toLowerCase() !== 'innerhtml' && this.schema.hasElement(tagName, EMPTY_ARRAY) &&
+        this.schema.hasProperty(tagName, name, EMPTY_ARRAY) &&
+        this._isSafeToReflectProperty(tagName, name)) {
+      this.setAttribute(el, name, value.toString());
+    }
+  }
+
+  setValue(node: any, value: string): void { getDOM().setText(node, value); }
+
+  listen(
+      target: 'document'|'window'|'body'|any, eventName: string,
+      callback: (event: any) => boolean): () => void {
+    checkNoSyntheticProp(eventName, 'listener');
+    if (typeof target === 'string') {
+      return <() => void>this.eventManager.addGlobalEventListener(
+          target, eventName, this.decoratePreventDefault(callback));
+    }
+    return <() => void>this.eventManager.addEventListener(
+               target, eventName, this.decoratePreventDefault(callback)) as() => void;
+  }
+
+  private decoratePreventDefault(eventHandler: Function): Function {
+    return (event: any) => {
+      // Run the event handler inside the ngZone because event handlers are not patched
+      // by Zone on the server. This is required only for tests.
+      const allowDefaultBehavior = this.ngZone.runGuarded(() => eventHandler(event));
+      if (allowDefaultBehavior === false) {
+        event.preventDefault();
+        event.returnValue = false;
+      }
+    };
+  }
+}
+
+const AT_CHARCODE = '@'.charCodeAt(0);
+function checkNoSyntheticProp(name: string, nameKind: string) {
+  if (name.charCodeAt(0) === AT_CHARCODE) {
+    throw new Error(
+        `Found the synthetic ${nameKind} ${name}. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.`);
+  }
+}
+
+class EmulatedEncapsulationServerRenderer2 extends DefaultServerRenderer2 {
+  private contentAttr: string;
+  private hostAttr: string;
+
+  constructor(
+      eventManager: EventManager, document: any, ngZone: NgZone, sharedStylesHost: SharedStylesHost,
+      schema: DomElementSchemaRegistry, private component: RendererType2) {
+    super(eventManager, document, ngZone, schema);
+    // Add a 's' prefix to style attributes to indicate server.
+    const componentId = 's' + component.id;
+    const styles = flattenStyles(componentId, component.styles, []);
+    sharedStylesHost.addStyles(styles);
+
+    this.contentAttr = shimContentAttribute(componentId);
+    this.hostAttr = shimHostAttribute(componentId);
+  }
+
+  applyToHost(element: any) { super.setAttribute(element, this.hostAttr, ''); }
+
+  createElement(parent: any, name: string): Element {
+    const el = super.createElement(parent, name, this.document);
+    super.setAttribute(el, this.contentAttr, '');
+    return el;
+  }
+}
diff --git a/packages/platform-server/src/styles_host.ts b/packages/platform-server/src/styles_host.ts
new file mode 100644
index 000000000000..fa19f0faebbb
--- /dev/null
+++ b/packages/platform-server/src/styles_host.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 {ApplicationRef, Inject, Injectable, Optional} from '@angular/core';
+import {DOCUMENT, ɵDomAdapter as DomAdapter, ɵSharedStylesHost as SharedStylesHost, ɵTRANSITION_ID, ɵgetDOM as getDOM} from '@angular/platform-browser';
+
+@Injectable()
+export class ServerStylesHost extends SharedStylesHost {
+  private head: any = null;
+
+  constructor(
+      @Inject(DOCUMENT) private doc: any,
+      @Optional() @Inject(ɵTRANSITION_ID) private transitionId: string) {
+    super();
+    this.head = getDOM().getElementsByTagName(doc, 'head')[0];
+  }
+
+  private _addStyle(style: string): void {
+    let adapter = getDOM();
+    const el = adapter.createElement('style');
+    adapter.setText(el, style);
+    if (!!this.transitionId) {
+      adapter.setAttribute(el, 'ng-transition', this.transitionId);
+    }
+    adapter.appendChild(this.head, el);
+  }
+
+  onStylesAdded(additions: Set<string>) { additions.forEach(style => this._addStyle(style)); }
+}
diff --git a/packages/platform-server/src/tokens.ts b/packages/platform-server/src/tokens.ts
new file mode 100644
index 000000000000..f1369d6e2214
--- /dev/null
+++ b/packages/platform-server/src/tokens.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 {InjectionToken} from '@angular/core';
+
+/**
+ * Config object passed to initialize the platform.
+ *
+ * @experimental
+ */
+export interface PlatformConfig {
+  document?: string;
+  url?: string;
+}
+
+/**
+ * The DI token for setting the initial config for the platform.
+ *
+ * @experimental
+ */
+export const INITIAL_CONFIG = new InjectionToken<PlatformConfig>('Server.INITIAL_CONFIG');
+
+/**
+ * A function that will be executed when calling `renderModuleFactory` or `renderModule` just
+ * before current platform state is rendered to string.
+ *
+ * @experimental
+ */
+export const BEFORE_APP_SERIALIZED =
+    new InjectionToken<Array<() => void>>('Server.RENDER_MODULE_HOOK');
diff --git a/packages/platform-server/src/transfer_state.ts b/packages/platform-server/src/transfer_state.ts
new file mode 100644
index 000000000000..fa34af38911c
--- /dev/null
+++ b/packages/platform-server/src/transfer_state.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 {APP_ID, NgModule} from '@angular/core';
+import {DOCUMENT, TransferState, ɵescapeHtml as escapeHtml} from '@angular/platform-browser';
+
+import {BEFORE_APP_SERIALIZED} from './tokens';
+
+export function serializeTransferStateFactory(
+    doc: Document, appId: string, transferStore: TransferState) {
+  return () => {
+    const script = doc.createElement('script');
+    script.id = appId + '-state';
+    script.setAttribute('type', 'application/json');
+    script.textContent = escapeHtml(transferStore.toJson());
+    doc.body.appendChild(script);
+  };
+}
+
+/**
+ * NgModule to install on the server side while using the `TransferState` to transfer state from
+ * server to client.
+ *
+ * @experimental
+ */
+@NgModule({
+  providers: [
+    TransferState, {
+      provide: BEFORE_APP_SERIALIZED,
+      useFactory: serializeTransferStateFactory,
+      deps: [DOCUMENT, APP_ID, TransferState],
+      multi: true,
+    }
+  ]
+})
+export class ServerTransferStateModule {
+}
diff --git a/packages/platform-server/src/utils.ts b/packages/platform-server/src/utils.ts
new file mode 100644
index 000000000000..177a32e4c92d
--- /dev/null
+++ b/packages/platform-server/src/utils.ts
@@ -0,0 +1,102 @@
+/**
+ * @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 {ApplicationRef, NgModuleFactory, NgModuleRef, PlatformRef, StaticProvider, Type} from '@angular/core';
+import {ɵTRANSITION_ID} from '@angular/platform-browser';
+import {first} from 'rxjs/operators';
+
+import {PlatformState} from './platform_state';
+import {platformDynamicServer, platformServer} from './server';
+import {BEFORE_APP_SERIALIZED, INITIAL_CONFIG} from './tokens';
+
+interface PlatformOptions {
+  document?: string;
+  url?: string;
+  extraProviders?: StaticProvider[];
+}
+
+function _getPlatform(
+    platformFactory: (extraProviders: StaticProvider[]) => PlatformRef,
+    options: PlatformOptions): PlatformRef {
+  const extraProviders = options.extraProviders ? options.extraProviders : [];
+  return platformFactory([
+    {provide: INITIAL_CONFIG, useValue: {document: options.document, url: options.url}},
+    extraProviders
+  ]);
+}
+
+function _render<T>(
+    platform: PlatformRef, moduleRefPromise: Promise<NgModuleRef<T>>): Promise<string> {
+  return moduleRefPromise.then((moduleRef) => {
+    const transitionId = moduleRef.injector.get(ɵTRANSITION_ID, null);
+    if (!transitionId) {
+      throw new Error(
+          `renderModule[Factory]() requires the use of BrowserModule.withServerTransition() to ensure
+the server-rendered app can be properly bootstrapped into a client app.`);
+    }
+    const applicationRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
+    return applicationRef.isStable.pipe((first((isStable: boolean) => isStable)))
+        .toPromise()
+        .then(() => {
+          const platformState = platform.injector.get(PlatformState);
+
+          // Run any BEFORE_APP_SERIALIZED callbacks just before rendering to string.
+          const callbacks = moduleRef.injector.get(BEFORE_APP_SERIALIZED, null);
+          if (callbacks) {
+            for (const callback of callbacks) {
+              try {
+                callback();
+              } catch (e) {
+                // Ignore exceptions.
+                console.warn('Ignoring BEFORE_APP_SERIALIZED Exception: ', e);
+              }
+            }
+          }
+
+          const output = platformState.renderToString();
+          platform.destroy();
+          return output;
+        });
+  });
+}
+
+/**
+ * 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.
+ *
+ * @experimental
+ */
+export function renderModule<T>(
+    module: Type<T>, options: {document?: string, url?: string, extraProviders?: StaticProvider[]}):
+    Promise<string> {
+  const platform = _getPlatform(platformDynamicServer, options);
+  return _render(platform, platform.bootstrapModule(module));
+}
+
+/**
+ * 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: {document?: string, url?: string, extraProviders?: StaticProvider[]}):
+    Promise<string> {
+  const platform = _getPlatform(platformServer, options);
+  return _render(platform, platform.bootstrapModuleFactory(moduleFactory));
+}
diff --git a/packages/platform-server/src/version.ts b/packages/platform-server/src/version.ts
new file mode 100644
index 000000000000..af66f0fa278a
--- /dev/null
+++ b/packages/platform-server/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/core';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/platform-server/test/BUILD.bazel b/packages/platform-server/test/BUILD.bazel
new file mode 100644
index 000000000000..9ab6cbc5dd13
--- /dev/null
+++ b/packages/platform-server/test/BUILD.bazel
@@ -0,0 +1,33 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/animations",
+        "//packages/common",
+        "//packages/common/http",
+        "//packages/common/http/testing",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/http",
+        "//packages/http/testing",
+        "//packages/platform-browser",
+        "//packages/platform-server",
+        "@rxjs",
+        "@rxjs//operators",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
diff --git a/packages/platform-server/test/integration_spec.ts b/packages/platform-server/test/integration_spec.ts
new file mode 100644
index 000000000000..1b77bab5e60f
--- /dev/null
+++ b/packages/platform-server/test/integration_spec.ts
@@ -0,0 +1,870 @@
+/**
+ * @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, state, style, transition, trigger} from '@angular/animations';
+import {APP_BASE_HREF, PlatformLocation, isPlatformServer} from '@angular/common';
+import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {ApplicationRef, CompilerFactory, Component, HostListener, Inject, Injectable, 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';
+import {MockBackend, MockConnection} from '@angular/http/testing';
+import {BrowserModule, DOCUMENT, StateKey, Title, TransferState, makeStateKey} from '@angular/platform-browser';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {BEFORE_APP_SERIALIZED, INITIAL_CONFIG, PlatformState, ServerModule, ServerTransferStateModule, platformDynamicServer, renderModule, renderModuleFactory} from '@angular/platform-server';
+import {Observable} from 'rxjs';
+import {first} from 'rxjs/operators';
+
+@Component({selector: 'app', template: `Works!`})
+class MyServerApp {
+}
+
+@NgModule({
+  bootstrap: [MyServerApp],
+  declarations: [MyServerApp],
+  imports: [ServerModule],
+  providers: [
+    MockBackend,
+    {provide: XHRBackend, useExisting: MockBackend},
+  ]
+})
+class ExampleModule {
+}
+
+function getTitleRenderHook(doc: any) {
+  return () => {
+    // Set the title as part of the render hook.
+    doc.title = 'RenderHook';
+  };
+}
+
+function exceptionRenderHook() {
+  throw new Error('error');
+}
+
+function getMetaRenderHook(doc: any) {
+  return () => {
+    // Add a meta tag before rendering the document.
+    const metaElement = doc.createElement('meta');
+    metaElement.setAttribute('name', 'description');
+    doc.head.appendChild(metaElement);
+  };
+}
+
+@NgModule({
+  bootstrap: [MyServerApp],
+  declarations: [MyServerApp],
+  imports: [BrowserModule.withServerTransition({appId: 'render-hook'}), ServerModule],
+  providers: [
+    {provide: BEFORE_APP_SERIALIZED, useFactory: getTitleRenderHook, multi: true, deps: [DOCUMENT]},
+  ]
+})
+class RenderHookModule {
+}
+
+@NgModule({
+  bootstrap: [MyServerApp],
+  declarations: [MyServerApp],
+  imports: [BrowserModule.withServerTransition({appId: 'render-hook'}), ServerModule],
+  providers: [
+    {provide: BEFORE_APP_SERIALIZED, useFactory: getTitleRenderHook, multi: true, deps: [DOCUMENT]},
+    {provide: BEFORE_APP_SERIALIZED, useValue: exceptionRenderHook, multi: true},
+    {provide: BEFORE_APP_SERIALIZED, useFactory: getMetaRenderHook, multi: true, deps: [DOCUMENT]},
+  ]
+})
+class MultiRenderHookModule {
+}
+
+@Component({selector: 'app', template: `Works too!`})
+class MyServerApp2 {
+}
+
+@NgModule({declarations: [MyServerApp2], imports: [ServerModule], bootstrap: [MyServerApp2]})
+class ExampleModule2 {
+}
+
+@Component({selector: 'app', template: ``})
+class TitleApp {
+  constructor(private title: Title) {}
+  ngOnInit() { this.title.setTitle('Test App Title'); }
+}
+
+@NgModule({declarations: [TitleApp], imports: [ServerModule], bootstrap: [TitleApp]})
+class TitleAppModule {
+}
+
+@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!';
+                                 this.h1 = 'fine';
+                               }, 10));
+  }
+}
+
+@NgModule({
+  declarations: [MyAsyncServerApp],
+  imports: [BrowserModule.withServerTransition({appId: 'async-server'}), ServerModule],
+  bootstrap: [MyAsyncServerApp]
+})
+class AsyncServerModule {
+}
+
+@Component({selector: 'app', template: '<svg><use xlink:href="#clear"></use></svg>'})
+class SVGComponent {
+}
+
+@NgModule({
+  declarations: [SVGComponent],
+  imports: [BrowserModule.withServerTransition({appId: 'svg-server'}), ServerModule],
+  bootstrap: [SVGComponent]
+})
+class SVGServerModule {
+}
+
+@Component({
+  selector: 'app',
+  template: `<div [@myAnimation]="state">{{text}}</div>`,
+  animations: [trigger(
+      'myAnimation',
+      [
+        state('void', style({'opacity': '0'})),
+        state('active', style({
+                'opacity': '1',                       // simple supported property
+                'font-weight': 'bold',                // property with dashed name
+                'transform': 'translate3d(0, 0, 0)',  // not natively supported by Domino
+              })),
+        transition('void => *', [animate('0ms')]),
+      ], )]
+})
+class MyAnimationApp {
+  state = 'active';
+  constructor(private builder: AnimationBuilder) {}
+
+  text = 'Works!';
+}
+
+@NgModule({
+  declarations: [MyAnimationApp],
+  imports: [BrowserModule.withServerTransition({appId: 'anim-server'}), ServerModule],
+  bootstrap: [MyAnimationApp]
+})
+class AnimationServerModule {
+}
+
+@Component({
+  selector: 'app',
+  template: `<div>Works!</div>`,
+  styles: ['div {color: blue; } :host { color: red; }']
+})
+class MyStylesApp {
+}
+
+@NgModule({
+  declarations: [MyStylesApp],
+  imports: [BrowserModule.withServerTransition({appId: 'example-styles'}), ServerModule],
+  bootstrap: [MyStylesApp]
+})
+class ExampleStylesModule {
+}
+
+@NgModule({
+  bootstrap: [MyServerApp],
+  declarations: [MyServerApp],
+  imports: [HttpModule, ServerModule],
+  providers: [
+    MockBackend,
+    {provide: XHRBackend, useExisting: MockBackend},
+  ]
+})
+export class HttpBeforeExampleModule {
+}
+
+@NgModule({
+  bootstrap: [MyServerApp],
+  declarations: [MyServerApp],
+  imports: [ServerModule, HttpModule],
+  providers: [
+    MockBackend,
+    {provide: XHRBackend, useExisting: MockBackend},
+  ]
+})
+export class HttpAfterExampleModule {
+}
+
+@NgModule({
+  bootstrap: [MyServerApp],
+  declarations: [MyServerApp],
+  imports: [ServerModule, HttpClientModule, HttpClientTestingModule],
+})
+export class HttpClientExampleModule {
+}
+
+@Injectable()
+export class MyHttpInterceptor implements HttpInterceptor {
+  constructor(private http: HttpClient) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(req);
+  }
+}
+
+@NgModule({
+  bootstrap: [MyServerApp],
+  declarations: [MyServerApp],
+  imports: [ServerModule, HttpClientModule, HttpClientTestingModule],
+  providers: [
+    {provide: HTTP_INTERCEPTORS, multi: true, useClass: MyHttpInterceptor},
+  ],
+})
+export class HttpInterceptorExampleModule {
+}
+
+@Component({selector: 'app', template: `<img [src]="'link'">`})
+class ImageApp {
+}
+
+@NgModule({declarations: [ImageApp], imports: [ServerModule], bootstrap: [ImageApp]})
+class ImageExampleModule {
+}
+
+@Component({
+  selector: 'app',
+  template: 'Native works',
+  encapsulation: ViewEncapsulation.Native,
+  styles: [':host { color: red; }']
+})
+class NativeEncapsulationApp {
+}
+
+@NgModule({
+  declarations: [NativeEncapsulationApp],
+  imports: [BrowserModule.withServerTransition({appId: 'test'}), ServerModule],
+  bootstrap: [NativeEncapsulationApp]
+})
+class NativeExampleModule {
+}
+
+@Component({selector: 'my-child', template: 'Works!'})
+class MyChildComponent {
+  // TODO(issue/24571): remove '!'.
+  @Input() public attr !: boolean;
+}
+
+@Component({selector: 'app', template: '<my-child [attr]="false"></my-child>'})
+class MyHostComponent {
+}
+
+@NgModule({
+  declarations: [MyHostComponent, MyChildComponent],
+  bootstrap: [MyHostComponent],
+  imports: [ServerModule, BrowserModule.withServerTransition({appId: 'false-attributes'})]
+})
+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 {
+}
+
+@Component({selector: 'app', template: '<div [innerHTML]="html"></div>'})
+class HTMLTypesApp {
+  html = '<b>foo</b> bar';
+  constructor(@Inject(DOCUMENT) doc: Document) {}
+}
+
+@NgModule({
+  declarations: [HTMLTypesApp],
+  imports: [BrowserModule.withServerTransition({appId: 'inner-html'}), ServerModule],
+  bootstrap: [HTMLTypesApp]
+})
+class HTMLTypesModule {
+}
+
+const TEST_KEY = makeStateKey<number>('test');
+const STRING_KEY = makeStateKey<string>('testString');
+
+@Component({selector: 'app', template: 'Works!'})
+class TransferComponent {
+  constructor(private transferStore: TransferState) {}
+  ngOnInit() { this.transferStore.set(TEST_KEY, 10); }
+}
+
+@Component({selector: 'esc-app', template: 'Works!'})
+class EscapedComponent {
+  constructor(private transferStore: TransferState) {}
+  ngOnInit() {
+    this.transferStore.set(STRING_KEY, '</script><script>alert(\'Hello&\' + "World");');
+  }
+}
+
+@NgModule({
+  bootstrap: [TransferComponent],
+  declarations: [TransferComponent],
+  imports: [
+    BrowserModule.withServerTransition({appId: 'transfer'}),
+    ServerModule,
+    ServerTransferStateModule,
+  ]
+})
+class TransferStoreModule {
+}
+
+@NgModule({
+  bootstrap: [EscapedComponent],
+  declarations: [EscapedComponent],
+  imports: [
+    BrowserModule.withServerTransition({appId: 'transfer'}),
+    ServerModule,
+    ServerTransferStateModule,
+  ]
+})
+class EscapedTransferStoreModule {
+}
+
+@Component({selector: 'app', template: '<input [hidden]="true"><input [hidden]="false">'})
+class MyHiddenComponent {
+  @Input()
+  name = '';
+}
+
+@NgModule({
+  declarations: [MyHiddenComponent],
+  bootstrap: [MyHiddenComponent],
+  imports: [ServerModule, BrowserModule.withServerTransition({appId: 'hidden-attributes'})]
+})
+class HiddenModule {
+}
+
+(function() {
+  if (getDOM().supportsDOMEvents()) return;  // NODE only
+
+  describe('platform-server integration', () => {
+    beforeEach(() => {
+      if (getPlatform()) destroyPlatform();
+    });
+
+    it('should bootstrap', async(() => {
+         const platform = platformDynamicServer(
+             [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+
+         platform.bootstrapModule(ExampleModule).then((moduleRef) => {
+           expect(isPlatformServer(moduleRef.injector.get(PLATFORM_ID))).toBe(true);
+           const doc = moduleRef.injector.get(DOCUMENT);
+
+           expect(doc.head).toBe(getDOM().querySelector(doc, 'head'));
+           expect(doc.body).toBe(getDOM().querySelector(doc, 'body'));
+
+           expect(getDOM().getText(doc.documentElement)).toEqual('Works!');
+
+           platform.destroy();
+         });
+       }));
+
+    it('should allow multiple platform instances', async(() => {
+         const platform = platformDynamicServer(
+             [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+
+         const platform2 = platformDynamicServer(
+             [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+
+
+         platform.bootstrapModule(ExampleModule).then((moduleRef) => {
+           const doc = moduleRef.injector.get(DOCUMENT);
+           expect(getDOM().getText(doc.documentElement)).toEqual('Works!');
+           platform.destroy();
+         });
+
+         platform2.bootstrapModule(ExampleModule2).then((moduleRef) => {
+           const doc = moduleRef.injector.get(DOCUMENT);
+           expect(getDOM().getText(doc.documentElement)).toEqual('Works too!');
+           platform2.destroy();
+         });
+       }));
+
+    it('adds title to the document using Title service', async(() => {
+         const platform = platformDynamicServer([{
+           provide: INITIAL_CONFIG,
+           useValue:
+               {document: '<html><head><title></title></head><body><app></app></body></html>'}
+         }]);
+         platform.bootstrapModule(TitleAppModule).then(ref => {
+           const state = ref.injector.get(PlatformState);
+           const doc = ref.injector.get(DOCUMENT);
+           const title = getDOM().querySelector(doc, 'title');
+           expect(getDOM().getText(title)).toBe('Test App Title');
+           expect(state.renderToString()).toContain('<title>Test App Title</title>');
+         });
+       }));
+
+    it('should get base href from document', async(() => {
+         const platform = platformDynamicServer([{
+           provide: INITIAL_CONFIG,
+           useValue:
+               {document: '<html><head><base href="/"></head><body><app></app></body></html>'}
+         }]);
+         platform.bootstrapModule(ExampleModule).then((moduleRef) => {
+           const location = moduleRef.injector.get(PlatformLocation);
+           expect(location.getBaseHrefFromDOM()).toEqual('/');
+           platform.destroy();
+         });
+       }));
+
+    it('adds styles with ng-transition attribute', async(() => {
+         const platform = platformDynamicServer([{
+           provide: INITIAL_CONFIG,
+           useValue: {document: '<html><head></head><body><app></app></body></html>'}
+         }]);
+         platform.bootstrapModule(ExampleStylesModule).then(ref => {
+           const doc = ref.injector.get(DOCUMENT);
+           const head = getDOM().getElementsByTagName(doc, 'head')[0];
+           const styles: any[] = head.children as any;
+           expect(styles.length).toBe(1);
+           expect(getDOM().getText(styles[0])).toContain('color: red');
+           expect(getDOM().getAttribute(styles[0], 'ng-transition')).toBe('example-styles');
+         });
+       }));
+
+    it('copies known properties to attributes', async(() => {
+         const platform = platformDynamicServer(
+             [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+         platform.bootstrapModule(ImageExampleModule).then(ref => {
+           const appRef: ApplicationRef = ref.injector.get(ApplicationRef);
+           const app = appRef.components[0].location.nativeElement;
+           const img = getDOM().getElementsByTagName(app, 'img')[0] as any;
+           expect(img.attributes['src'].value).toEqual('link');
+         });
+       }));
+
+    describe('PlatformLocation', () => {
+      it('is injectable', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(ExampleModule).then(appRef => {
+             const location: PlatformLocation = appRef.injector.get(PlatformLocation);
+             expect(location.pathname).toBe('/');
+             platform.destroy();
+           });
+         }));
+      it('is configurable via INITIAL_CONFIG', () => {
+        platformDynamicServer([{
+          provide: INITIAL_CONFIG,
+          useValue: {document: '<app></app>', url: 'http://test.com/deep/path?query#hash'}
+        }])
+            .bootstrapModule(ExampleModule)
+            .then(appRef => {
+              const location: PlatformLocation = appRef.injector.get(PlatformLocation);
+              expect(location.pathname).toBe('/deep/path');
+              expect(location.search).toBe('?query');
+              expect(location.hash).toBe('#hash');
+            });
+      });
+      it('handles empty search and hash portions of the url', () => {
+        platformDynamicServer([{
+          provide: INITIAL_CONFIG,
+          useValue: {document: '<app></app>', url: 'http://test.com/deep/path'}
+        }])
+            .bootstrapModule(ExampleModule)
+            .then(appRef => {
+              const location: PlatformLocation = appRef.injector.get(PlatformLocation);
+              expect(location.pathname).toBe('/deep/path');
+              expect(location.search).toBe('');
+              expect(location.hash).toBe('');
+            });
+      });
+      it('pushState causes the URL to update', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(ExampleModule).then(appRef => {
+             const location: PlatformLocation = appRef.injector.get(PlatformLocation);
+             location.pushState(null, 'Test', '/foo#bar');
+             expect(location.pathname).toBe('/foo');
+             expect(location.hash).toBe('#bar');
+             platform.destroy();
+           });
+         }));
+      it('allows subscription to the hash state', done => {
+        const platform =
+            platformDynamicServer([{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+        platform.bootstrapModule(ExampleModule).then(appRef => {
+          const location: PlatformLocation = appRef.injector.get(PlatformLocation);
+          expect(location.pathname).toBe('/');
+          location.onHashChange((e: any) => {
+            expect(e.type).toBe('hashchange');
+            expect(e.oldUrl).toBe('/');
+            expect(e.newUrl).toBe('/foo#bar');
+            platform.destroy();
+            done();
+          });
+          location.pushState(null, 'Test', '/foo#bar');
+        });
+      });
+    });
+
+    describe('render', () => {
+      let doc: string;
+      let called: boolean;
+      let expectedOutput =
+          '<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.
+        doc = '<html><head></head><body><app></app></body></html>';
+        called = false;
+        (global as any)['window'] = undefined;
+        (global as any)['document'] = undefined;
+      });
+      afterEach(() => { expect(called).toBe(true); });
+
+      it('using long form should work', async(() => {
+           const platform =
+               platformDynamicServer([{provide: INITIAL_CONFIG, useValue: {document: doc}}]);
+
+           platform.bootstrapModule(AsyncServerModule)
+               .then((moduleRef) => {
+                 const applicationRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
+                 return applicationRef.isStable.pipe(first((isStable: boolean) => isStable))
+                     .toPromise();
+               })
+               .then((b) => {
+                 expect(platform.injector.get(PlatformState).renderToString()).toBe(expectedOutput);
+                 platform.destroy();
+                 called = true;
+               });
+         }));
+
+      it('using renderModule should work', async(() => {
+           renderModule(AsyncServerModule, {document: doc}).then(output => {
+             expect(output).toBe(expectedOutput);
+             called = true;
+           });
+         }));
+
+      it('using renderModuleFactory should work',
+         async(inject([PlatformRef], (defaultPlatform: PlatformRef) => {
+           const compilerFactory: CompilerFactory =
+               defaultPlatform.injector.get(CompilerFactory, null);
+           const moduleFactory =
+               compilerFactory.createCompiler().compileModuleSync(AsyncServerModule);
+           renderModuleFactory(moduleFactory, {document: doc}).then(output => {
+             expect(output).toBe(expectedOutput);
+             called = true;
+           });
+         })));
+
+      it('works with SVG elements', async(() => {
+           renderModule(SVGServerModule, {document: doc}).then(output => {
+             expect(output).toBe(
+                 '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER">' +
+                 '<svg><use xlink:href="#clear"></use></svg></app></body></html>');
+             called = true;
+           });
+         }));
+
+      it('works with animation', async(() => {
+           renderModule(AnimationServerModule, {document: doc}).then(output => {
+             expect(output).toContain('Works!');
+             expect(output).toContain('ng-trigger-myAnimation');
+             expect(output).toContain('opacity:1;');
+             expect(output).toContain('transform:translate3d(0, 0, 0);');
+             expect(output).toContain('font-weight:bold;');
+             called = true;
+           });
+         }));
+
+      it('should handle ViewEncapsulation.Native', async(() => {
+           renderModule(NativeExampleModule, {document: doc}).then(output => {
+             expect(output).not.toBe('');
+             expect(output).toContain('color: red');
+             called = true;
+           });
+         }));
+
+
+      it('sets a prefix for the _nghost and _ngcontent attributes', async(() => {
+           renderModule(ExampleStylesModule, {document: doc}).then(output => {
+             expect(output).toMatch(
+                 /<html><head><style ng-transition="example-styles">div\[_ngcontent-sc\d+\] {color: blue; } \[_nghost-sc\d+\] { color: red; }<\/style><\/head><body><app _nghost-sc\d+="" ng-version="0.0.0-PLACEHOLDER"><div _ngcontent-sc\d+="">Works!<\/div><\/app><\/body><\/html>/);
+             called = true;
+           });
+         }));
+
+      it('should handle false values on attributes', async(() => {
+           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;
+           });
+         }));
+
+      it('should work with sanitizer to handle "innerHTML"', async(() => {
+           // Clear out any global states. These should be set when platform-server
+           // is initialized.
+           (global as any).Node = undefined;
+           (global as any).Document = undefined;
+           renderModule(HTMLTypesModule, {document: doc}).then(output => {
+             expect(output).toBe(
+                 '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER">' +
+                 '<div><b>foo</b> bar</div></app></body></html>');
+             called = true;
+           });
+         }));
+
+      it('should handle element property "hidden"', async(() => {
+           renderModule(HiddenModule, {document: doc}).then(output => {
+             expect(output).toBe(
+                 '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER">' +
+                 '<input hidden=""><input></app></body></html>');
+             called = true;
+           });
+         }));
+
+      it('should call render hook', async(() => {
+           renderModule(RenderHookModule, {document: doc}).then(output => {
+             // title should be added by the render hook.
+             expect(output).toBe(
+                 '<html><head><title>RenderHook</title></head><body>' +
+                 '<app ng-version="0.0.0-PLACEHOLDER">Works!</app></body></html>');
+             called = true;
+           });
+         }));
+
+      it('should call multiple render hooks', async(() => {
+           const consoleSpy = spyOn(console, 'warn');
+           renderModule(MultiRenderHookModule, {document: doc}).then(output => {
+             // title should be added by the render hook.
+             expect(output).toBe(
+                 '<html><head><title>RenderHook</title><meta name="description"></head>' +
+                 '<body><app ng-version="0.0.0-PLACEHOLDER">Works!</app></body></html>');
+             expect(consoleSpy).toHaveBeenCalled();
+             called = true;
+           });
+         }));
+    });
+
+    describe('http', () => {
+      it('can inject Http', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(ExampleModule).then(ref => {
+             expect(ref.injector.get(Http) instanceof Http).toBeTruthy();
+           });
+         }));
+      it('can make Http requests', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(ExampleModule).then(ref => {
+             const mock = ref.injector.get(MockBackend);
+             const http = ref.injector.get(Http);
+             ref.injector.get<NgZone>(NgZone).run(() => {
+               NgZone.assertInAngularZone();
+               mock.connections.subscribe((mc: MockConnection) => {
+                 NgZone.assertInAngularZone();
+                 expect(mc.request.url).toBe('http://localhost/testing');
+                 mc.mockRespond(new Response(new ResponseOptions({body: 'success!', status: 200})));
+               });
+               http.get('http://localhost/testing').subscribe(resp => {
+                 NgZone.assertInAngularZone();
+                 expect(resp.text()).toBe('success!');
+               });
+             });
+           });
+         }));
+      it('requests are macrotasks', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(ExampleModule).then(ref => {
+             const mock = ref.injector.get(MockBackend);
+             const http = ref.injector.get(Http);
+             expect(ref.injector.get<NgZone>(NgZone).hasPendingMacrotasks).toBeFalsy();
+             ref.injector.get<NgZone>(NgZone).run(() => {
+               NgZone.assertInAngularZone();
+               mock.connections.subscribe((mc: MockConnection) => {
+                 expect(ref.injector.get<NgZone>(NgZone).hasPendingMacrotasks).toBeTruthy();
+                 mc.mockRespond(new Response(new ResponseOptions({body: 'success!', status: 200})));
+               });
+               http.get('http://localhost/testing').subscribe(resp => {
+                 expect(resp.text()).toBe('success!');
+               });
+             });
+           });
+         }));
+      it('works when HttpModule is included before ServerModule', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(HttpBeforeExampleModule).then(ref => {
+             const mock = ref.injector.get(MockBackend);
+             const http = ref.injector.get(Http);
+             expect(ref.injector.get<NgZone>(NgZone).hasPendingMacrotasks).toBeFalsy();
+             ref.injector.get<NgZone>(NgZone).run(() => {
+               NgZone.assertInAngularZone();
+               mock.connections.subscribe((mc: MockConnection) => {
+                 expect(ref.injector.get<NgZone>(NgZone).hasPendingMacrotasks).toBeTruthy();
+                 mc.mockRespond(new Response(new ResponseOptions({body: 'success!', status: 200})));
+               });
+               http.get('http://localhost/testing').subscribe(resp => {
+                 expect(resp.text()).toBe('success!');
+               });
+             });
+           });
+         }));
+      it('works when HttpModule is included after ServerModule', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(HttpAfterExampleModule).then(ref => {
+             const mock = ref.injector.get(MockBackend);
+             const http = ref.injector.get(Http);
+             expect(ref.injector.get<NgZone>(NgZone).hasPendingMacrotasks).toBeFalsy();
+             ref.injector.get<NgZone>(NgZone).run(() => {
+               NgZone.assertInAngularZone();
+               mock.connections.subscribe((mc: MockConnection) => {
+                 expect(ref.injector.get<NgZone>(NgZone).hasPendingMacrotasks).toBeTruthy();
+                 mc.mockRespond(new Response(new ResponseOptions({body: 'success!', status: 200})));
+               });
+               http.get('http://localhost/testing').subscribe(resp => {
+                 expect(resp.text()).toBe('success!');
+               });
+             });
+           });
+         }));
+      it('throws when given a relative URL', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(ExampleModule).then(ref => {
+             const http = ref.injector.get(Http);
+             expect(() => http.get('/testing'))
+                 .toThrowError(
+                     'URLs requested via Http on the server must be absolute. URL: /testing');
+           });
+         }));
+    });
+    describe('HttpClient', () => {
+      it('can inject HttpClient', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(HttpClientExampleModule).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(HttpClientExampleModule).then(ref => {
+             const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
+             const http = ref.injector.get(HttpClient);
+             ref.injector.get<NgZone>(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(HttpClientExampleModule).then(ref => {
+             const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
+             const http = ref.injector.get(HttpClient);
+             ref.injector.get<NgZone>(NgZone).run(() => {
+               http.get('http://localhost/testing').subscribe(body => {
+                 expect(body).toEqual('success!');
+               });
+               expect(ref.injector.get<NgZone>(NgZone).hasPendingMacrotasks).toBeTruthy();
+               mock.expectOne('http://localhost/testing').flush('success!');
+               expect(ref.injector.get<NgZone>(NgZone).hasPendingMacrotasks).toBeFalsy();
+             });
+           });
+         }));
+      it('can use HttpInterceptor that injects HttpClient', () => {
+        const platform =
+            platformDynamicServer([{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+        platform.bootstrapModule(HttpInterceptorExampleModule).then(ref => {
+          const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
+          const http = ref.injector.get(HttpClient);
+          ref.injector.get<NgZone>(NgZone).run(() => {
+            http.get('http://localhost/testing').subscribe(body => {
+              NgZone.assertInAngularZone();
+              expect(body).toEqual('success!');
+            });
+            mock.expectOne('http://localhost/testing').flush('success!');
+          });
+        });
+      });
+    });
+
+    describe('ServerTransferStoreModule', () => {
+      let called = false;
+      const defaultExpectedOutput =
+          '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER">Works!</app><script id="transfer-state" type="application/json">{&q;test&q;:10}</script></body></html>';
+
+      beforeEach(() => { called = false; });
+      afterEach(() => { expect(called).toBe(true); });
+
+      it('adds transfer script tag when using renderModule', async(() => {
+           renderModule(TransferStoreModule, {document: '<app></app>'}).then(output => {
+             expect(output).toBe(defaultExpectedOutput);
+             called = true;
+           });
+         }));
+
+      it('adds transfer script tag when using renderModuleFactory',
+         async(inject([PlatformRef], (defaultPlatform: PlatformRef) => {
+           const compilerFactory: CompilerFactory =
+               defaultPlatform.injector.get(CompilerFactory, null);
+           const moduleFactory =
+               compilerFactory.createCompiler().compileModuleSync(TransferStoreModule);
+           renderModuleFactory(moduleFactory, {document: '<app></app>'}).then(output => {
+             expect(output).toBe(defaultExpectedOutput);
+             called = true;
+           });
+         })));
+
+      it('cannot break out of <script> tag in serialized output', async(() => {
+           renderModule(EscapedTransferStoreModule, {
+             document: '<esc-app></esc-app>'
+           }).then(output => {
+             expect(output).toBe(
+                 '<html><head></head><body><esc-app ng-version="0.0.0-PLACEHOLDER">Works!</esc-app>' +
+                 '<script id="transfer-state" type="application/json">' +
+                 '{&q;testString&q;:&q;&l;/script&g;&l;script&g;' +
+                 'alert(&s;Hello&a;&s; + \\&q;World\\&q;);&q;}</script></body></html>');
+             called = true;
+           });
+         }));
+    });
+  });
+})();
diff --git a/packages/platform-server/testing/BUILD.bazel b/packages/platform-server/testing/BUILD.bazel
new file mode 100644
index 000000000000..5a00c83396f1
--- /dev/null
+++ b/packages/platform-server/testing/BUILD.bazel
@@ -0,0 +1,17 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(["**/*.ts"]),
+    module_name = "@angular/platform-server/testing",
+    deps = [
+        "//packages/core",
+        "//packages/platform-browser-dynamic/testing",
+        "//packages/platform-browser/animations",
+        "//packages/platform-server",
+    ],
+)
diff --git a/packages/platform-server/testing/index.ts b/packages/platform-server/testing/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/platform-server/testing/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';
diff --git a/packages/platform-server/testing/package.json b/packages/platform-server/testing/package.json
new file mode 100644
index 000000000000..ed539f92b969
--- /dev/null
+++ b/packages/platform-server/testing/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/platform-server/testing",
+  "typings": "./testing.d.ts",
+  "main": "../bundles/platform-server-testing.umd.js",
+  "module": "../fesm5/testing.js",
+  "es2015": "../fesm2015/testing.js",
+  "esm5": "../esm5/testing/testing.js",
+  "esm2015": "../esm2015/testing/testing.js",
+  "fesm5": "../fesm5/testing.js",
+  "fesm2015": "../fesm2015/testing.js"
+}
diff --git a/packages/platform-server/testing/public_api.ts b/packages/platform-server/testing/public_api.ts
new file mode 100644
index 000000000000..e95d9f8ef071
--- /dev/null
+++ b/packages/platform-server/testing/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/testing';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/platform-server/testing/rollup.config.js b/packages/platform-server/testing/rollup.config.js
new file mode 100644
index 000000000000..1dbe00b8b5d2
--- /dev/null
+++ b/packages/platform-server/testing/rollup.config.js
@@ -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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+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-browser/animations': 'ng.platformBrowser.animations',
+  '@angular/platform-server': 'ng.platformServer',
+  '@angular/platform-browser-dynamic/testing': 'ng.platformBrowserDynamic.testing'
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/platform-server/fesm5/testing.js',
+  dest: '../../../dist/packages-dist/platform-server/bundles/platform-server-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/platform-server/testing'},
+  moduleName: 'ng.platformServer.testing',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/platform-server/testing/src/server.ts b/packages/platform-server/testing/src/server.ts
new file mode 100644
index 000000000000..974d74d8d83d
--- /dev/null
+++ b/packages/platform-server/testing/src/server.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 {NgModule, PlatformRef, StaticProvider, createPlatformFactory} from '@angular/core';
+import {BrowserDynamicTestingModule, ɵplatformCoreDynamicTesting as platformCoreDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {ɵINTERNAL_SERVER_PLATFORM_PROVIDERS as INTERNAL_SERVER_PLATFORM_PROVIDERS, ɵSERVER_RENDER_PROVIDERS as SERVER_RENDER_PROVIDERS} from '@angular/platform-server';
+
+
+/**
+ * Platform for testing
+ *
+ * @experimental API related to bootstrapping are still under review.
+ */
+export const platformServerTesting = createPlatformFactory(
+    platformCoreDynamicTesting, 'serverTesting', INTERNAL_SERVER_PLATFORM_PROVIDERS);
+
+/**
+ * NgModule for testing.
+ *
+ * @experimental API related to bootstrapping are still under review.
+ */
+@NgModule({
+  exports: [BrowserDynamicTestingModule],
+  imports: [NoopAnimationsModule],
+  providers: SERVER_RENDER_PROVIDERS
+})
+export class ServerTestingModule {
+}
diff --git a/packages/platform-server/testing/src/testing.ts b/packages/platform-server/testing/src/testing.ts
new file mode 100644
index 000000000000..40fa4bee35b9
--- /dev/null
+++ b/packages/platform-server/testing/src/testing.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 platform-browser-dynamic/testing package.
+ */
+export * from './server';
diff --git a/packages/platform-server/testing/tsconfig-build.json b/packages/platform-server/testing/tsconfig-build.json
new file mode 100644
index 000000000000..b5aa98165d07
--- /dev/null
+++ b/packages/platform-server/testing/tsconfig-build.json
@@ -0,0 +1,42 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/animations": ["../../../dist/packages/animations"],
+      "@angular/animations/browser": ["../../../dist/packages/animations/browser"],
+      "@angular/core": ["../../../dist/packages/core"],
+      "@angular/core/testing": ["../../../dist/packages/core/testing"],
+      "@angular/common": ["../../../dist/packages/common"],
+      "@angular/common/http": ["../../../dist/packages/common/http"],
+      "@angular/common/testing": ["../../../dist/packages/common/testing"],
+      "@angular/compiler": ["../../../dist/packages/compiler"],
+      "@angular/compiler/testing": ["../../../dist/packages/compiler/testing"],
+      "@angular/http": ["../../../dist/packages/http"],
+      "@angular/platform-browser": ["../../../dist/packages/platform-browser"],
+      "@angular/platform-browser/animations": ["../../../dist/packages/platform-browser/animations"],
+      "@angular/platform-browser/testing": ["../../../dist/packages/platform-browser/testing"],
+      "@angular/platform-browser-dynamic": ["../../../dist/packages/platform-browser-dynamic"],
+      "@angular/platform-browser-dynamic/testing": ["../../../dist/packages/platform-browser-dynamic/testing"],
+      "@angular/platform-server": ["../../../dist/packages/platform-server"]
+    },
+    "outDir": "../../../dist/packages/platform-server"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../../node_modules/@types/jasmine/index.d.ts",
+    "../../../node_modules/@types/node/index.d.ts",
+    "../../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "testing.js",
+    "flatModuleId": "@angular/platform-server/testing"
+  }
+}
diff --git a/packages/platform-server/tsconfig-build.json b/packages/platform-server/tsconfig-build.json
new file mode 100644
index 000000000000..180dbe5df52b
--- /dev/null
+++ b/packages/platform-server/tsconfig-build.json
@@ -0,0 +1,35 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/animations": ["../../dist/packages/animations"],
+      "@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"],
+      "@angular/platform-browser/animations": ["../../dist/packages/platform-browser/animations"],
+      "@angular/platform-browser-dynamic": ["../../dist/packages/platform-browser-dynamic"]
+    },
+    "outDir": "../../dist/packages/platform-server"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/@types/node/index.d.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "platform-server.js",
+    "flatModuleId": "@angular/platform-server"
+  }
+}
diff --git a/packages/platform-webworker-dynamic/BUILD.bazel b/packages/platform-webworker-dynamic/BUILD.bazel
new file mode 100644
index 000000000000..4e3d7260cdb7
--- /dev/null
+++ b/packages/platform-webworker-dynamic/BUILD.bazel
@@ -0,0 +1,32 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "platform-webworker-dynamic",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/platform-webworker-dynamic",
+    deps = [
+        "//packages:types",
+        "//packages/common",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/platform-browser-dynamic",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = ["package.json"],
+    entry_point = "packages/platform-webworker-dynamic/index.js",
+    tags = [
+        "ivy-jit",
+        "release-with-framework",
+    ],
+    deps = [":platform-webworker-dynamic"],
+)
diff --git a/packages/platform-webworker-dynamic/index.ts b/packages/platform-webworker-dynamic/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/platform-webworker-dynamic/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';
diff --git a/packages/platform-webworker-dynamic/package.json b/packages/platform-webworker-dynamic/package.json
new file mode 100644
index 000000000000..9c9f83733727
--- /dev/null
+++ b/packages/platform-webworker-dynamic/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@angular/platform-webworker-dynamic",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - library for using Angular in a web browser with web workers",
+  "main": "./bundles/platform-webworker-dynamic.umd.js",
+  "module": "./fesm5/platform-webworker-dynamic.js",
+  "es2015": "./fesm2015/platform-webworker-dynamic.js",
+  "esm5": "./esm5/platform-webworker-dynamic.js",
+  "esm2015": "./esm2015/platform-webworker-dynamic.js",
+  "fesm5": "./fesm5/platform-webworker-dynamic.js",
+  "fesm2015": "./fesm2015/platform-webworker-dynamic.js",
+  "typings": "./platform-webworker-dynamic.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "@angular/common": "0.0.0-PLACEHOLDER",
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/compiler": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser": "0.0.0-PLACEHOLDER",
+    "@angular/platform-webworker": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/platform-webworker-dynamic/public_api.ts b/packages/platform-webworker-dynamic/public_api.ts
new file mode 100644
index 000000000000..cf23ca699e16
--- /dev/null
+++ b/packages/platform-webworker-dynamic/public_api.ts
@@ -0,0 +1,15 @@
+/**
+ * @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 this package.
+ */
+export * from './src/platform-webworker-dynamic';
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/platform-webworker-dynamic/rollup.config.js b/packages/platform-webworker-dynamic/rollup.config.js
new file mode 100644
index 000000000000..471ffbe3c9e6
--- /dev/null
+++ b/packages/platform-webworker-dynamic/rollup.config.js
@@ -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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+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',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/platform-webworker-dynamic/fesm5/platform-webworker-dynamic.js',
+  dest:
+      '../../dist/packages-dist/platform-webworker-dynamic/bundles/platform-webworker-dynamic.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/platform-webworker-dynamic'},
+  moduleName: 'ng.platformWebworkerDynamic',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/platform-webworker-dynamic/src/platform-webworker-dynamic.ts b/packages/platform-webworker-dynamic/src/platform-webworker-dynamic.ts
new file mode 100644
index 000000000000..0e4feb530ac7
--- /dev/null
+++ b/packages/platform-webworker-dynamic/src/platform-webworker-dynamic.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {ɵPLATFORM_WORKER_UI_ID as PLATFORM_WORKER_UI_ID} from '@angular/common';
+import {ResourceLoader} from '@angular/compiler';
+import {COMPILER_OPTIONS, PLATFORM_ID, PlatformRef, StaticProvider, createPlatformFactory} from '@angular/core';
+import {ɵResourceLoaderImpl as ResourceLoaderImpl, ɵplatformCoreDynamic as platformCoreDynamic} from '@angular/platform-browser-dynamic';
+
+export {VERSION} from './version';
+
+
+/**
+ * @experimental API related to bootstrapping are still under review.
+ */
+export const platformWorkerAppDynamic =
+    createPlatformFactory(platformCoreDynamic, 'workerAppDynamic', [
+      {
+        provide: COMPILER_OPTIONS,
+        useValue: {providers: [{provide: ResourceLoader, useClass: ResourceLoaderImpl, deps: []}]},
+        multi: true
+      },
+      {provide: PLATFORM_ID, useValue: PLATFORM_WORKER_UI_ID}
+    ]);
diff --git a/packages/platform-webworker-dynamic/src/version.ts b/packages/platform-webworker-dynamic/src/version.ts
new file mode 100644
index 000000000000..af66f0fa278a
--- /dev/null
+++ b/packages/platform-webworker-dynamic/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/core';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/platform-webworker-dynamic/tsconfig-build.json b/packages/platform-webworker-dynamic/tsconfig-build.json
new file mode 100644
index 000000000000..de65f48f3ea8
--- /dev/null
+++ b/packages/platform-webworker-dynamic/tsconfig-build.json
@@ -0,0 +1,30 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/common": ["../../dist/packages/common"],
+      "@angular/compiler": ["../../dist/packages/compiler"],
+      "@angular/platform-browser": ["../../dist/packages/platform-browser"],
+      "@angular/platform-browser-dynamic": ["../../dist/packages/platform-browser-dynamic"],
+      "@angular/platform-webworker": ["../../dist/packages/platform-webworker"]
+    },
+    "outDir": "../../dist/packages/platform-webworker-dynamic"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "platform-webworker-dynamic.js",
+    "flatModuleId": "@angular/platform-webworker-dynamic"
+  }
+}
diff --git a/packages/platform-webworker/BUILD.bazel b/packages/platform-webworker/BUILD.bazel
new file mode 100644
index 000000000000..c21890fc2100
--- /dev/null
+++ b/packages/platform-webworker/BUILD.bazel
@@ -0,0 +1,34 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "platform-webworker",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/platform-webworker",
+    deps = [
+        "//packages:types",
+        "//packages/common",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/platform-browser",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = ["package.json"],
+    entry_point = "packages/platform-webworker/index.js",
+    tags = [
+        "ivy-jit",
+        "release-with-framework",
+    ],
+    deps = [
+        ":platform-webworker",
+    ],
+)
diff --git a/packages/platform-webworker/index.ts b/packages/platform-webworker/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/platform-webworker/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';
diff --git a/packages/platform-webworker/package.json b/packages/platform-webworker/package.json
new file mode 100644
index 000000000000..2f47e815077b
--- /dev/null
+++ b/packages/platform-webworker/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@angular/platform-webworker",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - library for using Angular in a web browser with web workers",
+  "main": "./bundles/platform-webworker.umd.js",
+  "module": "./fesm5/platform-webworker.js",
+  "es2015": "./fesm2015/platform-webworker.js",
+  "esm5": "./esm5/platform-webworker.js",
+  "esm2015": "./esm2015/platform-webworker.js",
+  "fesm5": "./fesm5/platform-webworker.js",
+  "fesm2015": "./fesm2015/platform-webworker.js",
+  "typings": "./platform-webworker.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "@angular/common": "0.0.0-PLACEHOLDER",
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/platform-webworker/public_api.ts b/packages/platform-webworker/public_api.ts
new file mode 100644
index 000000000000..f9db0bde6816
--- /dev/null
+++ b/packages/platform-webworker/public_api.ts
@@ -0,0 +1,15 @@
+/**
+ * @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 this package.
+ */
+export * from './src/platform-webworker';
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/platform-webworker/rollup.config.js b/packages/platform-webworker/rollup.config.js
new file mode 100644
index 000000000000..91d8e4a14d43
--- /dev/null
+++ b/packages/platform-webworker/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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  'rxjs': 'rxjs',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/platform-webworker/fesm5/platform-webworker.js',
+  dest: '../../dist/packages-dist/platform-webworker/bundles/platform-webworker.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/platform-webworker'},
+  moduleName: 'ng.platformWebworker',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/platform-webworker/src/platform-webworker.ts b/packages/platform-webworker/src/platform-webworker.ts
new file mode 100644
index 000000000000..37552b455a7f
--- /dev/null
+++ b/packages/platform-webworker/src/platform-webworker.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
+ */
+
+import {PlatformRef, StaticProvider} from '@angular/core';
+
+import {WORKER_SCRIPT, platformWorkerUi} from './worker_render';
+
+export {VERSION} from './version';
+export {ClientMessageBroker, ClientMessageBrokerFactory, FnArg, UiArguments} from './web_workers/shared/client_message_broker';
+export {MessageBus, MessageBusSink, MessageBusSource} from './web_workers/shared/message_bus';
+export {SerializerTypes} from './web_workers/shared/serializer';
+export {ReceivedMessage, ServiceMessageBroker, ServiceMessageBrokerFactory} from './web_workers/shared/service_message_broker';
+export {WORKER_UI_LOCATION_PROVIDERS} from './web_workers/ui/location_providers';
+export {WORKER_APP_LOCATION_PROVIDERS} from './web_workers/worker/location_providers';
+export {WorkerAppModule, platformWorkerApp} from './worker_app';
+export {platformWorkerUi} from './worker_render';
+
+/**
+ * Bootstraps the worker ui.
+ *
+ * @experimental
+ */
+export function bootstrapWorkerUi(
+    workerScriptUri: string, customProviders: StaticProvider[] = []): Promise<PlatformRef> {
+  // For now, just creates the worker ui platform...
+  const platform = platformWorkerUi([
+    {provide: WORKER_SCRIPT, useValue: workerScriptUri},
+    ...customProviders,
+  ]);
+
+  return Promise.resolve(platform);
+}
diff --git a/packages/platform-webworker/src/version.ts b/packages/platform-webworker/src/version.ts
new file mode 100644
index 000000000000..af66f0fa278a
--- /dev/null
+++ b/packages/platform-webworker/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/core';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/platform-webworker/src/web_workers/shared/api.ts b/packages/platform-webworker/src/web_workers/shared/api.ts
new file mode 100644
index 000000000000..b56882079626
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/shared/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
+ */
+
+import {InjectionToken} from '@angular/core';
+
+export const ON_WEB_WORKER = new InjectionToken<boolean>('WebWorker.onWebWorker');
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
new file mode 100644
index 000000000000..595033969192
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/shared/client_message_broker.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 {EventEmitter, Injectable, Type, ɵstringify as stringify} from '@angular/core';
+import {MessageBus} from './message_bus';
+import {Serializer, SerializerTypes} from './serializer';
+
+/**
+ * @experimental WebWorker support in Angular is experimental.
+ */
+@Injectable()
+export class ClientMessageBrokerFactory {
+  /** @internal */
+  _serializer: Serializer;
+
+  /** @internal */
+  constructor(private _messageBus: MessageBus, _serializer: Serializer) {
+    this._serializer = _serializer;
+  }
+
+  /**
+   * Initializes the given channel and attaches a new {@link ClientMessageBroker} to it.
+   */
+  createMessageBroker(channel: string, runInZone: boolean = true): ClientMessageBroker {
+    this._messageBus.initChannel(channel, runInZone);
+    return new ClientMessageBroker(this._messageBus, this._serializer, channel);
+  }
+}
+
+interface PromiseCompleter {
+  resolve: (result: any) => void;
+  reject: (err: any) => void;
+}
+
+/**
+ * @experimental WebWorker support in Angular is experimental.
+ */
+export class ClientMessageBroker {
+  private _pending = new Map<string, PromiseCompleter>();
+  private _sink: EventEmitter<any>;
+  /** @internal */
+  public _serializer: Serializer;
+
+  /** @internal */
+  constructor(messageBus: MessageBus, _serializer: Serializer, private channel: any) {
+    this._sink = messageBus.to(channel);
+    this._serializer = _serializer;
+    const source = messageBus.from(channel);
+
+    source.subscribe({next: (message: ResponseMessageData) => this._handleMessage(message)});
+  }
+
+  private _generateMessageId(name: string): string {
+    const time: string = stringify(new Date().getTime());
+    let iteration: number = 0;
+    let id: string = name + time + stringify(iteration);
+    while (this._pending.has(id)) {
+      id = `${name}${time}${iteration}`;
+      iteration++;
+    }
+    return id;
+  }
+
+  runOnService(args: UiArguments, returnType: Type<any>|SerializerTypes|null): Promise<any>|null {
+    const fnArgs: any[] = [];
+    if (args.args) {
+      args.args.forEach(argument => {
+        if (argument.type != null) {
+          fnArgs.push(this._serializer.serialize(argument.value, argument.type));
+        } else {
+          fnArgs.push(argument.value);
+        }
+      });
+    }
+
+    let promise: Promise<any>|null;
+    let id: string|null = null;
+    if (returnType != null) {
+      let completer: PromiseCompleter = undefined !;
+      promise = new Promise((resolve, reject) => { completer = {resolve, reject}; });
+      id = this._generateMessageId(args.method);
+      this._pending.set(id, completer);
+
+      promise.catch((err) => {
+        if (console && console.error) {
+          // tslint:disable-next-line:no-console
+          console.error(err);
+        }
+
+        completer.reject(err);
+      });
+
+      promise = promise.then(
+          (v: any) => this._serializer ? this._serializer.deserialize(v, returnType) : v);
+    } else {
+      promise = null;
+    }
+
+    const message: RequestMessageData = {
+      'method': args.method,
+      'args': fnArgs,
+    };
+    if (id != null) {
+      message['id'] = id;
+    }
+    this._sink.emit(message);
+
+    return promise;
+  }
+
+  private _handleMessage(message: ResponseMessageData): void {
+    if (message.type === 'result' || message.type === 'error') {
+      const id = message.id !;
+      if (this._pending.has(id)) {
+        if (message.type === 'result') {
+          this._pending.get(id) !.resolve(message.value);
+        } else {
+          this._pending.get(id) !.reject(message.value);
+        }
+        this._pending.delete(id);
+      }
+    }
+  }
+}
+
+interface RequestMessageData {
+  method: string;
+  args?: any[];
+  id?: string;
+}
+
+interface ResponseMessageData {
+  type: 'result'|'error';
+  value?: any;
+  id?: string;
+}
+
+/**
+ * @experimental WebWorker support in Angular is experimental.
+ */
+export class FnArg {
+  constructor(
+      public value: any, public type: Type<any>|SerializerTypes = SerializerTypes.PRIMITIVE) {}
+}
+
+/**
+ * @experimental WebWorker support in Angular is experimental.
+ */
+export class UiArguments {
+  constructor(public method: string, public args?: FnArg[]) {}
+}
diff --git a/packages/platform-webworker/src/web_workers/shared/message_bus.ts b/packages/platform-webworker/src/web_workers/shared/message_bus.ts
new file mode 100644
index 000000000000..bf158c927fd0
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/shared/message_bus.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 {EventEmitter, NgZone} from '@angular/core';
+
+
+
+/**
+ * Message Bus is a low level API used to communicate between the UI and the background.
+ * Communication is based on a channel abstraction. Messages published in a
+ * given channel to one MessageBusSink are received on the same channel
+ * by the corresponding MessageBusSource.
+ *
+ * @experimental WebWorker support in Angular is currenlty experimental.
+ */
+export abstract class MessageBus implements MessageBusSource, MessageBusSink {
+  /**
+   * Sets up a new channel on the MessageBus.
+   * MUST be called before calling from or to on the channel.
+   * If runInZone is true then the source will emit events inside the angular zone
+   * and the sink will buffer messages and send only once the zone exits.
+   * if runInZone is false then the source will emit events inside the global zone
+   * and the sink will send messages immediately.
+   */
+  abstract initChannel(channel: string, runInZone?: boolean): void;
+
+  /**
+   * Assigns this bus to the given zone.
+   * Any callbacks attached to channels where runInZone was set to true on initialization
+   * will be executed in the given zone.
+   */
+  abstract attachToZone(zone: NgZone): void;
+
+  /**
+   * Returns an {@link EventEmitter} that emits every time a message
+   * is received on the given channel.
+   */
+  abstract from(channel: string): EventEmitter<any>;
+
+
+  /**
+   * Returns an {@link EventEmitter} for the given channel
+   * To publish methods to that channel just call next on the returned emitter
+   */
+  abstract to(channel: string): EventEmitter<any>;
+}
+
+/**
+ * @experimental WebWorker support in Angular is currenlty experimental.
+ */
+export interface MessageBusSource {
+  /**
+   * Sets up a new channel on the MessageBusSource.
+   * MUST be called before calling from on the channel.
+   * If runInZone is true then the source will emit events inside the angular zone.
+   * if runInZone is false then the source will emit events inside the global zone.
+   */
+  initChannel(channel: string, runInZone: boolean): void;
+
+  /**
+   * Assigns this source to the given zone.
+   * Any channels which are initialized with runInZone set to true will emit events that will be
+   * executed within the given zone.
+   */
+  attachToZone(zone: NgZone): void;
+
+  /**
+   * Returns an {@link EventEmitter} that emits every time a message
+   * is received on the given channel.
+   */
+  from(channel: string): EventEmitter<any>;
+}
+
+/**
+ * @experimental WebWorker support in Angular is currenlty experimental.
+ */
+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 immediately.
+   */
+  initChannel(channel: string, runInZone: boolean): void;
+
+  /**
+   * Assigns this sink to the given zone.
+   * Any channels which are initialized with runInZone set to true will wait for the given zone
+   * to exit before sending messages.
+   */
+  attachToZone(zone: NgZone): void;
+
+  /**
+   * Returns an {@link EventEmitter} for the given channel
+   * To publish methods to that channel just call next on the returned emitter
+   */
+  to(channel: string): EventEmitter<any>;
+}
diff --git a/packages/platform-webworker/src/web_workers/shared/messaging_api.ts b/packages/platform-webworker/src/web_workers/shared/messaging_api.ts
new file mode 100644
index 000000000000..1a4200c0f4d5
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/shared/messaging_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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
+ */
+
+/**
+ * All channels used by angular's WebWorker components are listed here.
+ * You should not use these channels in your application code.
+ */
+export const RENDERER_2_CHANNEL = 'v2.ng-Renderer';
+export const EVENT_2_CHANNEL = 'v2.ng-Events';
+
+export const ROUTER_CHANNEL = 'ng-Router';
diff --git a/packages/platform-webworker/src/web_workers/shared/post_message_bus.ts b/packages/platform-webworker/src/web_workers/shared/post_message_bus.ts
new file mode 100644
index 000000000000..dfb01bc6e4c3
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/shared/post_message_bus.ts
@@ -0,0 +1,154 @@
+/**
+ * @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 {EventEmitter, Injectable, NgZone} from '@angular/core';
+
+import {MessageBus, MessageBusSink, MessageBusSource} from './message_bus';
+
+
+
+// TODO(jteplitz602): Replace this with the definition in lib.webworker.d.ts(#3492)
+export interface PostMessageTarget {
+  postMessage: (message: any, transfer?: [ArrayBuffer]) => void;
+}
+
+export class PostMessageBusSink implements MessageBusSink {
+  // TODO(issue/24571): remove '!'.
+  private _zone !: NgZone;
+  private _channels: {[key: string]: _Channel} = {};
+  private _messageBuffer: Array<Object> = [];
+
+  constructor(private _postMessageTarget: PostMessageTarget) {}
+
+  attachToZone(zone: NgZone): void {
+    this._zone = zone;
+    this._zone.runOutsideAngular(
+        () => { this._zone.onStable.subscribe({next: () => { this._handleOnEventDone(); }}); });
+  }
+
+  initChannel(channel: string, runInZone: boolean = true): void {
+    if (this._channels.hasOwnProperty(channel)) {
+      throw new Error(`${channel} has already been initialized`);
+    }
+
+    const emitter = new EventEmitter(false);
+    const channelInfo = new _Channel(emitter, runInZone);
+    this._channels[channel] = channelInfo;
+    emitter.subscribe((data: Object) => {
+      const message = {channel: channel, message: data};
+      if (runInZone) {
+        this._messageBuffer.push(message);
+      } else {
+        this._sendMessages([message]);
+      }
+    });
+  }
+
+  to(channel: string): EventEmitter<any> {
+    if (this._channels.hasOwnProperty(channel)) {
+      return this._channels[channel].emitter;
+    } else {
+      throw new Error(`${channel} is not set up. Did you forget to call initChannel?`);
+    }
+  }
+
+  private _handleOnEventDone() {
+    if (this._messageBuffer.length > 0) {
+      this._sendMessages(this._messageBuffer);
+      this._messageBuffer = [];
+    }
+  }
+
+  private _sendMessages(messages: Array<Object>) { this._postMessageTarget.postMessage(messages); }
+}
+
+export class PostMessageBusSource implements MessageBusSource {
+  // TODO(issue/24571): remove '!'.
+  private _zone !: NgZone;
+  private _channels: {[key: string]: _Channel} = {};
+
+  constructor(eventTarget?: EventTarget) {
+    if (eventTarget) {
+      eventTarget.addEventListener('message', (ev: MessageEvent) => this._handleMessages(ev));
+    } else {
+      // if no eventTarget is given we assume we're in a WebWorker and listen on the global scope
+      const workerScope = <EventTarget>self;
+      workerScope.addEventListener('message', (ev: MessageEvent) => this._handleMessages(ev));
+    }
+  }
+
+  attachToZone(zone: NgZone) { this._zone = zone; }
+
+  initChannel(channel: string, runInZone: boolean = true) {
+    if (this._channels.hasOwnProperty(channel)) {
+      throw new Error(`${channel} has already been initialized`);
+    }
+
+    const emitter = new EventEmitter(false);
+    const channelInfo = new _Channel(emitter, runInZone);
+    this._channels[channel] = channelInfo;
+  }
+
+  from(channel: string): EventEmitter<any> {
+    if (this._channels.hasOwnProperty(channel)) {
+      return this._channels[channel].emitter;
+    } else {
+      throw new Error(`${channel} is not set up. Did you forget to call initChannel?`);
+    }
+  }
+
+  private _handleMessages(ev: MessageEvent): void {
+    const messages = ev.data;
+    for (let i = 0; i < messages.length; i++) {
+      this._handleMessage(messages[i]);
+    }
+  }
+
+  private _handleMessage(data: any): void {
+    const channel = data.channel;
+    if (this._channels.hasOwnProperty(channel)) {
+      const channelInfo = this._channels[channel];
+      if (channelInfo.runInZone) {
+        this._zone.run(() => { channelInfo.emitter.emit(data.message); });
+      } else {
+        channelInfo.emitter.emit(data.message);
+      }
+    }
+  }
+}
+
+/**
+ * A TypeScript implementation of {@link MessageBus} for communicating via JavaScript's
+ * postMessage API.
+ */
+@Injectable()
+export class PostMessageBus implements MessageBus {
+  constructor(public sink: PostMessageBusSink, public source: PostMessageBusSource) {}
+
+  attachToZone(zone: NgZone): void {
+    this.source.attachToZone(zone);
+    this.sink.attachToZone(zone);
+  }
+
+  initChannel(channel: string, runInZone: boolean = true): void {
+    this.source.initChannel(channel, runInZone);
+    this.sink.initChannel(channel, runInZone);
+  }
+
+  from(channel: string): EventEmitter<any> { return this.source.from(channel); }
+
+  to(channel: string): EventEmitter<any> { return this.sink.to(channel); }
+}
+
+/**
+ * Helper class that wraps a channel's {@link EventEmitter} and
+ * keeps track of if it should run in the zone.
+ */
+class _Channel {
+  constructor(public emitter: EventEmitter<any>, public runInZone: boolean) {}
+}
diff --git a/packages/platform-webworker/src/web_workers/shared/render_store.ts b/packages/platform-webworker/src/web_workers/shared/render_store.ts
new file mode 100644
index 000000000000..cce0610defcf
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/shared/render_store.ts
@@ -0,0 +1,40 @@
+/**
+ * @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';
+
+@Injectable()
+export class RenderStore {
+  private _nextIndex = 0;
+  private _lookupById = new Map<number, any>();
+  private _lookupByObject = new Map<any, number>();
+
+  allocateId(): number { return this._nextIndex++; }
+
+  store(obj: any, id: number): void {
+    if (id == null) return;
+    this._lookupById.set(id, obj);
+    this._lookupByObject.set(obj, id);
+  }
+
+  remove(obj: any): void {
+    const index = this._lookupByObject.get(obj);
+    if (index != null) {
+      this._lookupByObject.delete(obj);
+      this._lookupById.delete(index);
+    }
+  }
+
+  deserialize(id: number): any {
+    return this._lookupById.has(id) ? this._lookupById.get(id) : null;
+  }
+
+  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
new file mode 100644
index 000000000000..3ed371d0478a
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/shared/serializer.ts
@@ -0,0 +1,134 @@
+/**
+ * @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, RenderComponentType, RendererType2, Type, ɵstringify as stringify} from '@angular/core';
+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,
+}
+
+export class LocationType {
+  constructor(
+      public href: string, public protocol: string, public host: string, public hostname: string,
+      public port: string, public pathname: string|null, public search: string, public hash: string,
+      public origin: string) {}
+}
+
+@Injectable()
+export class Serializer {
+  constructor(private _renderStore: RenderStore) {}
+
+  serialize(obj: any, type: Type<any>|SerializerTypes = SerializerTypes.PRIMITIVE): Object {
+    if (obj == null || type === SerializerTypes.PRIMITIVE) {
+      return obj;
+    }
+    if (Array.isArray(obj)) {
+      return obj.map(v => this.serialize(v, type));
+    }
+    if (type === SerializerTypes.RENDER_STORE_OBJECT) {
+      return this._renderStore.serialize(obj) !;
+    }
+    if (type === RenderComponentType) {
+      return this._serializeRenderComponentType(obj);
+    }
+    if (type === SerializerTypes.RENDERER_TYPE_2) {
+      return this._serializeRendererType2(obj);
+    }
+    if (type === LocationType) {
+      return this._serializeLocation(obj);
+    }
+    throw new Error(`No serializer for type ${stringify(type)}`);
+  }
+
+  deserialize(map: any, type: Type<any>|SerializerTypes = SerializerTypes.PRIMITIVE, data?: any):
+      any {
+    if (map == null || type === SerializerTypes.PRIMITIVE) {
+      return map;
+    }
+    if (Array.isArray(map)) {
+      return map.map(val => this.deserialize(val, type, data));
+    }
+    if (type === SerializerTypes.RENDER_STORE_OBJECT) {
+      return this._renderStore.deserialize(map);
+    }
+    if (type === RenderComponentType) {
+      return this._deserializeRenderComponentType(map);
+    }
+    if (type === SerializerTypes.RENDERER_TYPE_2) {
+      return this._deserializeRendererType2(map);
+    }
+    if (type === LocationType) {
+      return this._deserializeLocation(map);
+    }
+    throw new Error(`No deserializer for type ${stringify(type)}`);
+  }
+
+  private _serializeLocation(loc: LocationType): Object {
+    return {
+      'href': loc.href,
+      'protocol': loc.protocol,
+      'host': loc.host,
+      'hostname': loc.hostname,
+      'port': loc.port,
+      'pathname': loc.pathname,
+      'search': loc.search,
+      'hash': loc.hash,
+      'origin': loc.origin,
+    };
+  }
+
+  private _deserializeLocation(loc: {[key: string]: any}): LocationType {
+    return new LocationType(
+        loc['href'], loc['protocol'], loc['host'], loc['hostname'], loc['port'], loc['pathname'],
+        loc['search'], loc['hash'], loc['origin']);
+  }
+
+  private _serializeRenderComponentType(type: RenderComponentType): Object {
+    return {
+      'id': type.id,
+      'templateUrl': type.templateUrl,
+      'slotCount': type.slotCount,
+      'encapsulation': this.serialize(type.encapsulation),
+      'styles': this.serialize(type.styles),
+    };
+  }
+
+  private _deserializeRenderComponentType(props: {[key: string]: any}): RenderComponentType {
+    return new RenderComponentType(
+        props['id'], props['templateUrl'], props['slotCount'],
+        this.deserialize(props['encapsulation']), this.deserialize(props['styles']), {});
+  }
+
+  private _serializeRendererType2(type: RendererType2): {[key: string]: any} {
+    return {
+      'id': type.id,
+      'encapsulation': this.serialize(type.encapsulation),
+      'styles': this.serialize(type.styles),
+      'data': this.serialize(type.data),
+    };
+  }
+
+  private _deserializeRendererType2(props: {[key: string]: any}): RendererType2 {
+    return {
+      id: props['id'],
+      encapsulation: props['encapsulation'],
+      styles: this.deserialize(props['styles']),
+      data: this.deserialize(props['data'])
+    };
+  }
+}
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
new file mode 100644
index 000000000000..a2466e228b74
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/shared/service_message_broker.ts
@@ -0,0 +1,100 @@
+/**
+ * @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 {EventEmitter, Injectable, Type} from '@angular/core';
+import {MessageBus} from '../shared/message_bus';
+import {Serializer, SerializerTypes} from '../shared/serializer';
+
+
+/**
+ * @experimental WebWorker support in Angular is currently experimental.
+ */
+@Injectable()
+export class ServiceMessageBrokerFactory {
+  /** @internal */
+  _serializer: Serializer;
+
+  /** @internal */
+  constructor(private _messageBus: MessageBus, _serializer: Serializer) {
+    this._serializer = _serializer;
+  }
+
+  /**
+   * Initializes the given channel and attaches a new {@link ServiceMessageBroker} to it.
+   */
+  createMessageBroker(channel: string, runInZone: boolean = true): ServiceMessageBroker {
+    this._messageBus.initChannel(channel, runInZone);
+    return new ServiceMessageBroker(this._messageBus, this._serializer, channel);
+  }
+}
+
+/**
+ * Helper class for UIComponents that allows components to register methods.
+ * If a registered method message is received from the broker on the worker,
+ * the UIMessageBroker deserializes its arguments and calls the registered method.
+ * If that method returns a promise, the UIMessageBroker returns the result to the worker.
+ *
+ * @experimental WebWorker support in Angular is currently experimental.
+ */
+export class ServiceMessageBroker {
+  private _sink: EventEmitter<any>;
+  private _methods = new Map<string, Function>();
+
+  /** @internal */
+  constructor(messageBus: MessageBus, private _serializer: Serializer, private channel: string) {
+    this._sink = messageBus.to(channel);
+    const source = messageBus.from(channel);
+    source.subscribe({next: (message: any) => this._handleMessage(message)});
+  }
+
+  registerMethod(
+      methodName: string, signature: Array<Type<any>|SerializerTypes>|null,
+      method: (..._: any[]) => Promise<any>| void, returnType?: Type<any>|SerializerTypes): void {
+    this._methods.set(methodName, (message: ReceivedMessage) => {
+      const serializedArgs = message.args;
+      const numArgs = signature ? signature.length : 0;
+      const deserializedArgs = new Array(numArgs);
+      for (let i = 0; i < numArgs; i++) {
+        const serializedArg = serializedArgs[i];
+        deserializedArgs[i] = this._serializer.deserialize(serializedArg, signature ![i]);
+      }
+
+      const promise = method(...deserializedArgs);
+      if (returnType && promise) {
+        this._wrapWebWorkerPromise(message.id, promise, returnType);
+      }
+    });
+  }
+
+  private _handleMessage(message: ReceivedMessage): void {
+    if (this._methods.has(message.method)) {
+      this._methods.get(message.method) !(message);
+    }
+  }
+
+  private _wrapWebWorkerPromise(id: string, promise: Promise<any>, type: Type<any>|SerializerTypes):
+      void {
+    promise.then((result: any) => {
+      this._sink.emit({
+        'type': 'result',
+        'value': this._serializer.serialize(result, type),
+        'id': id,
+      });
+    });
+  }
+}
+
+/**
+ * @experimental WebWorker support in Angular is currently experimental.
+ */
+export interface ReceivedMessage {
+  method: string;
+  args: any[];
+  id: string;
+  type: string;
+}
diff --git a/packages/platform-webworker/src/web_workers/ui/event_dispatcher.ts b/packages/platform-webworker/src/web_workers/ui/event_dispatcher.ts
new file mode 100644
index 000000000000..9092bbb4abac
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/ui/event_dispatcher.ts
@@ -0,0 +1,120 @@
+/**
+ * @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 {EventEmitter} from '@angular/core';
+import {Serializer, SerializerTypes} from '../shared/serializer';
+
+import {serializeEventWithTarget, serializeGenericEvent, serializeKeyboardEvent, serializeMouseEvent, serializeTransitionEvent} from './event_serializer';
+
+export class EventDispatcher {
+  constructor(private _sink: EventEmitter<any>, private _serializer: Serializer) {}
+
+  dispatchAnimationEvent(player: any, phaseName: string, element: any): boolean {
+    this._sink.emit({
+      'element': this._serializer.serialize(element, SerializerTypes.RENDER_STORE_OBJECT),
+      'animationPlayer': this._serializer.serialize(player, SerializerTypes.RENDER_STORE_OBJECT),
+      'phaseName': phaseName,
+    });
+    return true;
+  }
+
+  dispatchRenderEvent(element: any, eventTarget: string, eventName: string, event: any): boolean {
+    let serializedEvent: any;
+    // TODO (jteplitz602): support custom events #3350
+    switch (event.type) {
+      case 'click':
+      case 'mouseup':
+      case 'mousedown':
+      case 'dblclick':
+      case 'contextmenu':
+      case 'mouseenter':
+      case 'mouseleave':
+      case 'mousemove':
+      case 'mouseout':
+      case 'mouseover':
+      case 'show':
+        serializedEvent = serializeMouseEvent(event);
+        break;
+      case 'keydown':
+      case 'keypress':
+      case 'keyup':
+        serializedEvent = serializeKeyboardEvent(event);
+        break;
+      case 'input':
+      case 'change':
+      case 'blur':
+        serializedEvent = serializeEventWithTarget(event);
+        break;
+      case 'abort':
+      case 'afterprint':
+      case 'beforeprint':
+      case 'cached':
+      case 'canplay':
+      case 'canplaythrough':
+      case 'chargingchange':
+      case 'chargingtimechange':
+      case 'close':
+      case 'dischargingtimechange':
+      case 'DOMContentLoaded':
+      case 'downloading':
+      case 'durationchange':
+      case 'emptied':
+      case 'ended':
+      case 'error':
+      case 'fullscreenchange':
+      case 'fullscreenerror':
+      case 'invalid':
+      case 'languagechange':
+      case 'levelfchange':
+      case 'loadeddata':
+      case 'loadedmetadata':
+      case 'obsolete':
+      case 'offline':
+      case 'online':
+      case 'open':
+      case 'orientatoinchange':
+      case 'pause':
+      case 'pointerlockchange':
+      case 'pointerlockerror':
+      case 'play':
+      case 'playing':
+      case 'ratechange':
+      case 'readystatechange':
+      case 'reset':
+      case 'scroll':
+      case 'seeked':
+      case 'seeking':
+      case 'stalled':
+      case 'submit':
+      case 'success':
+      case 'suspend':
+      case 'timeupdate':
+      case 'updateready':
+      case 'visibilitychange':
+      case 'volumechange':
+      case 'waiting':
+        serializedEvent = serializeGenericEvent(event);
+        break;
+      case 'transitionend':
+        serializedEvent = serializeTransitionEvent(event);
+        break;
+      default:
+        throw new Error(eventName + ' not supported on WebWorkers');
+    }
+
+    this._sink.emit({
+      'element': this._serializer.serialize(element, SerializerTypes.RENDER_STORE_OBJECT),
+      'eventName': eventName,
+      'eventTarget': eventTarget,
+      'event': serializedEvent,
+    });
+
+    // TODO(kegluneq): Eventually, we want the user to indicate from the UI side whether the event
+    // should be canceled, but for now just call `preventDefault` on the original DOM event.
+    return false;
+  }
+}
diff --git a/packages/platform-webworker/src/web_workers/ui/event_serializer.ts b/packages/platform-webworker/src/web_workers/ui/event_serializer.ts
new file mode 100644
index 000000000000..026f7763f3a9
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/ui/event_serializer.ts
@@ -0,0 +1,70 @@
+/**
+ * @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 MOUSE_EVENT_PROPERTIES = [
+  'altKey', 'button', 'clientX', 'clientY', 'metaKey', 'movementX', 'movementY', 'offsetX',
+  'offsetY', 'region', 'screenX', 'screenY', 'shiftKey'
+];
+
+const KEYBOARD_EVENT_PROPERTIES = [
+  'altkey', 'charCode', 'code', 'ctrlKey', 'isComposing', 'key', 'keyCode', 'location', 'metaKey',
+  'repeat', 'shiftKey', 'which'
+];
+
+const TRANSITION_EVENT_PROPERTIES = ['propertyName', 'elapsedTime', 'pseudoElement'];
+
+const EVENT_PROPERTIES = ['type', 'bubbles', 'cancelable'];
+
+const NODES_WITH_VALUE = new Set(
+    ['input', 'select', 'option', 'button', 'li', 'meter', 'progress', 'param', 'textarea']);
+
+export function serializeGenericEvent(e: Event): {[key: string]: any} {
+  return serializeEvent(e, EVENT_PROPERTIES);
+}
+
+// TODO(jteplitz602): Allow users to specify the properties they need rather than always
+// adding value and files #3374
+export function serializeEventWithTarget(e: Event): {[key: string]: any} {
+  const serializedEvent = serializeEvent(e, EVENT_PROPERTIES);
+  return addTarget(e, serializedEvent);
+}
+
+export function serializeMouseEvent(e: MouseEvent): {[key: string]: any} {
+  return serializeEvent(e, MOUSE_EVENT_PROPERTIES);
+}
+
+export function serializeKeyboardEvent(e: KeyboardEvent): {[key: string]: any} {
+  const serializedEvent = serializeEvent(e, KEYBOARD_EVENT_PROPERTIES);
+  return addTarget(e, serializedEvent);
+}
+
+export function serializeTransitionEvent(e: TransitionEvent): {[key: string]: any} {
+  const serializedEvent = serializeEvent(e, TRANSITION_EVENT_PROPERTIES);
+  return addTarget(e, serializedEvent);
+}
+
+// TODO(jteplitz602): #3374. See above.
+function addTarget(e: Event, serializedEvent: {[key: string]: any}): {[key: string]: any} {
+  if (NODES_WITH_VALUE.has((<HTMLElement>e.target).tagName.toLowerCase())) {
+    const target = <HTMLInputElement>e.target;
+    serializedEvent['target'] = {'value': target.value};
+    if (target.files) {
+      serializedEvent['target']['files'] = target.files;
+    }
+  }
+  return serializedEvent;
+}
+
+function serializeEvent(e: any, properties: string[]): {[key: string]: any} {
+  const serialized: {[k: string]: any} = {};
+  for (let i = 0; i < properties.length; i++) {
+    const prop = properties[i];
+    serialized[prop] = e[prop];
+  }
+  return serialized;
+}
diff --git a/packages/platform-webworker/src/web_workers/ui/location_providers.ts b/packages/platform-webworker/src/web_workers/ui/location_providers.ts
new file mode 100644
index 000000000000..56b6790e56d8
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/ui/location_providers.ts
@@ -0,0 +1,39 @@
+/**
+ * @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 {Injector, NgZone, PLATFORM_INITIALIZER, StaticProvider} from '@angular/core';
+import {ɵBrowserPlatformLocation as BrowserPlatformLocation} from '@angular/platform-browser';
+
+import {MessageBus} from '../shared/message_bus';
+import {Serializer} from '../shared/serializer';
+import {ServiceMessageBrokerFactory} from '../shared/service_message_broker';
+
+import {MessageBasedPlatformLocation} from './platform_location';
+
+
+
+/**
+ * A list of {@link Provider}s. To use the router in a Worker enabled application you must
+ * include these providers when setting up the render thread.
+ * @experimental
+ */
+export const WORKER_UI_LOCATION_PROVIDERS = <StaticProvider[]>[
+  {provide: MessageBasedPlatformLocation, deps: [ServiceMessageBrokerFactory,
+    BrowserPlatformLocation, MessageBus, Serializer]},
+  {provide: BrowserPlatformLocation, deps: [DOCUMENT]},
+  {provide: PLATFORM_INITIALIZER, useFactory: initUiLocation, multi: true, deps: [Injector]}
+];
+
+function initUiLocation(injector: Injector): () => void {
+  return () => {
+    const zone = injector.get<NgZone>(NgZone);
+
+    zone.runGuarded(() => injector.get(MessageBasedPlatformLocation).start());
+  };
+}
diff --git a/packages/platform-webworker/src/web_workers/ui/platform_location.ts b/packages/platform-webworker/src/web_workers/ui/platform_location.ts
new file mode 100644
index 000000000000..2e0811e55f65
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/ui/platform_location.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 {LocationChangeListener} from '@angular/common';
+import {EventEmitter, Injectable} from '@angular/core';
+import {ɵBrowserPlatformLocation as BrowserPlatformLocation} from '@angular/platform-browser';
+import {MessageBus} from '../shared/message_bus';
+import {ROUTER_CHANNEL} from '../shared/messaging_api';
+import {LocationType, Serializer, SerializerTypes} from '../shared/serializer';
+import {ServiceMessageBroker, ServiceMessageBrokerFactory} from '../shared/service_message_broker';
+
+@Injectable()
+export class MessageBasedPlatformLocation {
+  private _channelSink: EventEmitter<Object>;
+  private _broker: ServiceMessageBroker;
+
+  constructor(
+      private _brokerFactory: ServiceMessageBrokerFactory,
+      private _platformLocation: BrowserPlatformLocation, bus: MessageBus,
+      private _serializer: Serializer) {
+    this._platformLocation.onPopState(<LocationChangeListener>this._sendUrlChangeEvent.bind(this));
+    this._platformLocation.onHashChange(
+        <LocationChangeListener>this._sendUrlChangeEvent.bind(this));
+    this._broker = this._brokerFactory.createMessageBroker(ROUTER_CHANNEL);
+    this._channelSink = bus.to(ROUTER_CHANNEL);
+  }
+
+  start(): void {
+    const P = SerializerTypes.PRIMITIVE;
+
+    this._broker.registerMethod('getLocation', null, this._getLocation.bind(this), LocationType);
+    this._broker.registerMethod('setPathname', [P], this._setPathname.bind(this));
+    this._broker.registerMethod(
+        'pushState', [P, P, P], this._platformLocation.pushState.bind(this._platformLocation));
+    this._broker.registerMethod(
+        'replaceState', [P, P, P],
+        this._platformLocation.replaceState.bind(this._platformLocation));
+    this._broker.registerMethod(
+        'forward', null, this._platformLocation.forward.bind(this._platformLocation));
+    this._broker.registerMethod(
+        'back', null, this._platformLocation.back.bind(this._platformLocation));
+  }
+
+  private _getLocation(): Promise<Location> {
+    return Promise.resolve(this._platformLocation.location);
+  }
+
+  private _sendUrlChangeEvent(e: Event): void {
+    this._channelSink.emit({
+      'event': {'type': e.type},
+      'location': this._serializer.serialize(this._platformLocation.location, LocationType),
+    });
+  }
+
+  private _setPathname(pathname: string): void { this._platformLocation.pathname = pathname; }
+}
diff --git a/packages/platform-webworker/src/web_workers/ui/renderer.ts b/packages/platform-webworker/src/web_workers/ui/renderer.ts
new file mode 100644
index 000000000000..6aceacd925c7
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/ui/renderer.ts
@@ -0,0 +1,146 @@
+/**
+ * @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, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '@angular/core';
+
+import {MessageBus} from '../shared/message_bus';
+import {EVENT_2_CHANNEL, RENDERER_2_CHANNEL} from '../shared/messaging_api';
+import {RenderStore} from '../shared/render_store';
+import {Serializer, SerializerTypes} from '../shared/serializer';
+import {ServiceMessageBroker, ServiceMessageBrokerFactory} from '../shared/service_message_broker';
+import {EventDispatcher} from '../ui/event_dispatcher';
+
+@Injectable()
+export class MessageBasedRenderer2 {
+  // TODO(issue/24571): remove '!'.
+  private _eventDispatcher !: EventDispatcher;
+
+  constructor(
+      private _brokerFactory: ServiceMessageBrokerFactory, private _bus: MessageBus,
+      private _serializer: Serializer, private _renderStore: RenderStore,
+      private _rendererFactory: RendererFactory2) {}
+
+  start(): void {
+    const broker = this._brokerFactory.createMessageBroker(RENDERER_2_CHANNEL);
+
+    this._bus.initChannel(EVENT_2_CHANNEL);
+    this._eventDispatcher = new EventDispatcher(this._bus.to(EVENT_2_CHANNEL), this._serializer);
+
+    const [RSO, P, CRT] = [
+      SerializerTypes.RENDER_STORE_OBJECT,
+      SerializerTypes.PRIMITIVE,
+      SerializerTypes.RENDERER_TYPE_2,
+    ];
+
+    const methods: any[][] = [
+      ['createRenderer', this.createRenderer, RSO, CRT, P],
+      ['createElement', this.createElement, RSO, P, P, P],
+      ['createComment', this.createComment, RSO, P, P], ['createText', this.createText, RSO, P, P],
+      ['appendChild', this.appendChild, RSO, RSO, RSO],
+      ['insertBefore', this.insertBefore, RSO, RSO, RSO, RSO],
+      ['removeChild', this.removeChild, RSO, RSO, RSO],
+      ['selectRootElement', this.selectRootElement, RSO, P, P],
+      ['parentNode', this.parentNode, RSO, RSO, P], ['nextSibling', this.nextSibling, RSO, RSO, P],
+      ['setAttribute', this.setAttribute, RSO, RSO, P, P, P],
+      ['removeAttribute', this.removeAttribute, RSO, RSO, P, P],
+      ['addClass', this.addClass, RSO, RSO, P], ['removeClass', this.removeClass, RSO, RSO, P],
+      ['setStyle', this.setStyle, RSO, RSO, P, P, P],
+      ['removeStyle', this.removeStyle, RSO, RSO, P, P],
+      ['setProperty', this.setProperty, RSO, RSO, P, P], ['setValue', this.setValue, RSO, RSO, P],
+      ['listen', this.listen, RSO, RSO, P, P, P], ['unlisten', this.unlisten, RSO, RSO],
+      ['destroy', this.destroy, RSO], ['destroyNode', this.destroyNode, RSO, P]
+
+    ];
+
+    methods.forEach(([name, method, ...argTypes]: any[]) => {
+      broker.registerMethod(name, argTypes, method.bind(this));
+    });
+  }
+
+  private destroy(r: Renderer2) { r.destroy(); }
+
+  private destroyNode(r: Renderer2, node: any) {
+    if (r.destroyNode) {
+      r.destroyNode(node);
+    }
+    this._renderStore.remove(node);
+  }
+
+  private createRenderer(el: any, type: RendererType2, id: number) {
+    this._renderStore.store(this._rendererFactory.createRenderer(el, type), id);
+  }
+
+  private createElement(r: Renderer2, name: string, namespace: string, id: number) {
+    this._renderStore.store(r.createElement(name, namespace), id);
+  }
+
+  private createComment(r: Renderer2, value: string, id: number) {
+    this._renderStore.store(r.createComment(value), id);
+  }
+
+  private createText(r: Renderer2, value: string, id: number) {
+    this._renderStore.store(r.createText(value), id);
+  }
+
+  private appendChild(r: Renderer2, parent: any, child: any) { r.appendChild(parent, child); }
+
+  private insertBefore(r: Renderer2, parent: any, child: any, ref: any) {
+    r.insertBefore(parent, child, ref);
+  }
+
+  private removeChild(r: Renderer2, parent: any, child: any) { r.removeChild(parent, child); }
+
+  private selectRootElement(r: Renderer2, selector: string, id: number) {
+    this._renderStore.store(r.selectRootElement(selector), id);
+  }
+
+  private parentNode(r: Renderer2, node: any, id: number) {
+    this._renderStore.store(r.parentNode(node), id);
+  }
+
+  private nextSibling(r: Renderer2, node: any, id: number) {
+    this._renderStore.store(r.nextSibling(node), id);
+  }
+
+  private setAttribute(r: Renderer2, el: any, name: string, value: string, namespace: string) {
+    r.setAttribute(el, name, value, namespace);
+  }
+
+  private removeAttribute(r: Renderer2, el: any, name: string, namespace: string) {
+    r.removeAttribute(el, name, namespace);
+  }
+
+  private addClass(r: Renderer2, el: any, name: string) { r.addClass(el, name); }
+
+  private removeClass(r: Renderer2, el: any, name: string) { r.removeClass(el, name); }
+
+  private setStyle(r: Renderer2, el: any, style: string, value: any, flags: RendererStyleFlags2) {
+    r.setStyle(el, style, value, flags);
+  }
+
+  private removeStyle(r: Renderer2, el: any, style: string, flags: RendererStyleFlags2) {
+    r.removeStyle(el, style, flags);
+  }
+
+  private setProperty(r: Renderer2, el: any, name: string, value: any) {
+    r.setProperty(el, name, value);
+  }
+
+  private setValue(r: Renderer2, node: any, value: string) { r.setValue(node, value); }
+
+  private listen(r: Renderer2, el: any, elName: string, eventName: string, unlistenId: number) {
+    const listener = (event: any) => {
+      return this._eventDispatcher.dispatchRenderEvent(el, elName, eventName, event);
+    };
+
+    const unlisten = r.listen(el || elName, eventName, listener);
+    this._renderStore.store(unlisten, unlistenId);
+  }
+
+  private unlisten(r: Renderer2, unlisten: () => boolean) { unlisten(); }
+}
diff --git a/packages/platform-webworker/src/web_workers/worker/location_providers.ts b/packages/platform-webworker/src/web_workers/worker/location_providers.ts
new file mode 100644
index 000000000000..25d671dfd200
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/worker/location_providers.ts
@@ -0,0 +1,38 @@
+/**
+ * @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_INITIALIZED, PlatformLocation} from '@angular/common';
+import {APP_INITIALIZER, InjectionToken, NgZone} from '@angular/core';
+
+import {WebWorkerPlatformLocation} from './platform_location';
+
+
+/**
+ * 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 = [
+  {provide: PlatformLocation, useClass: WebWorkerPlatformLocation}, {
+    provide: APP_INITIALIZER,
+    useFactory: appInitFnFactory,
+    multi: true,
+    deps: [PlatformLocation, NgZone]
+  },
+  {provide: LOCATION_INITIALIZED, useFactory: locationInitialized, deps: [PlatformLocation]}
+];
+
+export function locationInitialized(platformLocation: WebWorkerPlatformLocation) {
+  return platformLocation.initialized;
+}
+
+export function appInitFnFactory(platformLocation: WebWorkerPlatformLocation, zone: NgZone): () =>
+    Promise<boolean> {
+  return () => zone.runGuarded(() => platformLocation.init());
+}
diff --git a/packages/platform-webworker/src/web_workers/worker/platform_location.ts b/packages/platform-webworker/src/web_workers/worker/platform_location.ts
new file mode 100644
index 000000000000..63fe2c546b51
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/worker/platform_location.ts
@@ -0,0 +1,124 @@
+/**
+ * @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 {LocationChangeListener, PlatformLocation} from '@angular/common';
+import {EventEmitter, Injectable} from '@angular/core';
+import {ClientMessageBroker, ClientMessageBrokerFactory, FnArg, UiArguments} from '../shared/client_message_broker';
+import {MessageBus} from '../shared/message_bus';
+import {ROUTER_CHANNEL} from '../shared/messaging_api';
+import {LocationType, Serializer, SerializerTypes} from '../shared/serializer';
+
+@Injectable()
+export class WebWorkerPlatformLocation extends PlatformLocation {
+  private _broker: ClientMessageBroker;
+  private _popStateListeners: Array<Function> = [];
+  private _hashChangeListeners: Array<Function> = [];
+  private _location: LocationType = null !;
+  private _channelSource: EventEmitter<Object>;
+  public initialized: Promise<any>;
+  // TODO(issue/24571): remove '!'.
+  private initializedResolve !: () => void;
+
+  constructor(
+      brokerFactory: ClientMessageBrokerFactory, bus: MessageBus, private _serializer: Serializer) {
+    super();
+    this._broker = brokerFactory.createMessageBroker(ROUTER_CHANNEL);
+    this._channelSource = bus.from(ROUTER_CHANNEL);
+
+    this._channelSource.subscribe({
+      next: (msg: {[key: string]: any}) => {
+        let listeners: Array<Function>|null = null;
+        if (msg.hasOwnProperty('event')) {
+          const type: string = msg['event']['type'];
+          if (type === 'popstate') {
+            listeners = this._popStateListeners;
+          } else if (type === 'hashchange') {
+            listeners = this._hashChangeListeners;
+          }
+
+          if (listeners) {
+            // There was a popState or hashChange event, so the location object thas been updated
+            this._location = this._serializer.deserialize(msg['location'], LocationType);
+            listeners.forEach((fn: Function) => fn(msg['event']));
+          }
+        }
+      }
+    });
+    this.initialized = new Promise(res => this.initializedResolve = res);
+  }
+
+  /** @internal **/
+  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); });
+  }
+
+  getBaseHrefFromDOM(): string {
+    throw new Error(
+        'Attempt to get base href from DOM from WebWorker. You must either provide a value for the APP_BASE_HREF token through DI or use the hash location strategy.');
+  }
+
+  onPopState(fn: LocationChangeListener): void { this._popStateListeners.push(fn); }
+
+  onHashChange(fn: LocationChangeListener): void { this._hashChangeListeners.push(fn); }
+
+  get pathname(): string { return this._location ? this._location.pathname ! : '<unknown>'; }
+
+  get search(): string { return this._location ? this._location.search : '<unknown>'; }
+
+  get hash(): string { return this._location ? this._location.hash : '<unknown>'; }
+
+  set pathname(newPath: string) {
+    if (this._location === null) {
+      throw new Error('Attempt to set pathname before value is obtained from UI');
+    }
+
+    this._location.pathname = newPath;
+
+    const fnArgs = [new FnArg(newPath, SerializerTypes.PRIMITIVE)];
+    const args = new UiArguments('setPathname', fnArgs);
+    this._broker.runOnService(args, null);
+  }
+
+  pushState(state: any, title: string, url: string): void {
+    const fnArgs = [
+      new FnArg(state, SerializerTypes.PRIMITIVE),
+      new FnArg(title, SerializerTypes.PRIMITIVE),
+      new FnArg(url, SerializerTypes.PRIMITIVE),
+    ];
+    const args = new UiArguments('pushState', fnArgs);
+    this._broker.runOnService(args, null);
+  }
+
+  replaceState(state: any, title: string, url: string): void {
+    const fnArgs = [
+      new FnArg(state, SerializerTypes.PRIMITIVE),
+      new FnArg(title, SerializerTypes.PRIMITIVE),
+      new FnArg(url, SerializerTypes.PRIMITIVE),
+    ];
+    const args = new UiArguments('replaceState', fnArgs);
+    this._broker.runOnService(args, null);
+  }
+
+  forward(): void {
+    const args = new UiArguments('forward');
+    this._broker.runOnService(args, null);
+  }
+
+  back(): void {
+    const args = new UiArguments('back');
+    this._broker.runOnService(args, null);
+  }
+}
diff --git a/packages/platform-webworker/src/web_workers/worker/renderer.ts b/packages/platform-webworker/src/web_workers/worker/renderer.ts
new file mode 100644
index 000000000000..45ec83a40568
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/worker/renderer.ts
@@ -0,0 +1,317 @@
+/**
+ * @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, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '@angular/core';
+
+import {ClientMessageBroker, ClientMessageBrokerFactory, FnArg, UiArguments} from '../shared/client_message_broker';
+import {MessageBus} from '../shared/message_bus';
+import {EVENT_2_CHANNEL, RENDERER_2_CHANNEL} from '../shared/messaging_api';
+import {RenderStore} from '../shared/render_store';
+import {Serializer, SerializerTypes} from '../shared/serializer';
+
+export class NamedEventEmitter {
+  // TODO(issue/24571): remove '!'.
+  private _listeners !: Map<string, Function[]>;
+
+  listen(eventName: string, callback: Function) { this._getListeners(eventName).push(callback); }
+
+  unlisten(eventName: string, listener: Function) {
+    const listeners = this._getListeners(eventName);
+    const index = listeners.indexOf(listener);
+    if (index > -1) {
+      listeners.splice(index, 1);
+    }
+  }
+
+  dispatchEvent(eventName: string, event: any) {
+    const listeners = this._getListeners(eventName);
+    for (let i = 0; i < listeners.length; i++) {
+      listeners[i](event);
+    }
+  }
+
+  private _getListeners(eventName: string): Function[] {
+    if (!this._listeners) {
+      this._listeners = new Map<string, Function[]>();
+    }
+    let listeners = this._listeners.get(eventName);
+    if (!listeners) {
+      listeners = [];
+      this._listeners.set(eventName, listeners);
+    }
+    return listeners;
+  }
+}
+
+
+function eventNameWithTarget(target: string, eventName: string): string {
+  return `${target}:${eventName}`;
+}
+
+@Injectable()
+export class WebWorkerRendererFactory2 implements RendererFactory2 {
+  globalEvents = new NamedEventEmitter();
+
+  private _messageBroker: ClientMessageBroker;
+
+  constructor(
+      messageBrokerFactory: ClientMessageBrokerFactory, bus: MessageBus,
+      private _serializer: Serializer, public renderStore: RenderStore) {
+    this._messageBroker = messageBrokerFactory.createMessageBroker(RENDERER_2_CHANNEL);
+    bus.initChannel(EVENT_2_CHANNEL);
+    const source = bus.from(EVENT_2_CHANNEL);
+    source.subscribe({next: (message: any) => this._dispatchEvent(message)});
+  }
+
+  createRenderer(element: any, type: RendererType2|null): Renderer2 {
+    const renderer = new WebWorkerRenderer2(this);
+
+    const id = this.renderStore.allocateId();
+    this.renderStore.store(renderer, id);
+    this.callUI('createRenderer', [
+      new FnArg(element, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(type, SerializerTypes.RENDERER_TYPE_2),
+      new FnArg(renderer, SerializerTypes.RENDER_STORE_OBJECT),
+    ]);
+
+    return renderer;
+  }
+
+  begin() {}
+  end() {}
+
+  callUI(fnName: string, fnArgs: FnArg[]) {
+    const args = new UiArguments(fnName, fnArgs);
+    this._messageBroker.runOnService(args, null);
+  }
+
+  allocateNode(): WebWorkerRenderNode {
+    const result = new WebWorkerRenderNode();
+    const id = this.renderStore.allocateId();
+    this.renderStore.store(result, id);
+    return result;
+  }
+
+  freeNode(node: any) { this.renderStore.remove(node); }
+
+  allocateId(): number { return this.renderStore.allocateId(); }
+
+  private _dispatchEvent(message: {[key: string]: any}): void {
+    const element: WebWorkerRenderNode =
+        this._serializer.deserialize(message['element'], SerializerTypes.RENDER_STORE_OBJECT);
+
+    const eventName = message['eventName'];
+    const target = message['eventTarget'];
+    const event = message['event'];
+
+    if (target) {
+      this.globalEvents.dispatchEvent(eventNameWithTarget(target, eventName), event);
+    } else {
+      element.events.dispatchEvent(eventName, event);
+    }
+  }
+}
+
+
+export class WebWorkerRenderer2 implements Renderer2 {
+  data: {[key: string]: any} = Object.create(null);
+
+  constructor(private _rendererFactory: WebWorkerRendererFactory2) {}
+
+  private asFnArg = new FnArg(this, SerializerTypes.RENDER_STORE_OBJECT);
+
+  destroy(): void { this.callUIWithRenderer('destroy'); }
+
+  destroyNode(node: any) {
+    this.callUIWithRenderer('destroyNode', [new FnArg(node, SerializerTypes.RENDER_STORE_OBJECT)]);
+    this._rendererFactory.freeNode(node);
+  }
+
+  createElement(name: string, namespace?: string): any {
+    const node = this._rendererFactory.allocateNode();
+    this.callUIWithRenderer('createElement', [
+      new FnArg(name),
+      new FnArg(namespace),
+      new FnArg(node, SerializerTypes.RENDER_STORE_OBJECT),
+    ]);
+    return node;
+  }
+
+  createComment(value: string): any {
+    const node = this._rendererFactory.allocateNode();
+    this.callUIWithRenderer('createComment', [
+      new FnArg(value),
+      new FnArg(node, SerializerTypes.RENDER_STORE_OBJECT),
+    ]);
+    return node;
+  }
+
+  createText(value: string): any {
+    const node = this._rendererFactory.allocateNode();
+    this.callUIWithRenderer('createText', [
+      new FnArg(value),
+      new FnArg(node, SerializerTypes.RENDER_STORE_OBJECT),
+    ]);
+    return node;
+  }
+
+  appendChild(parent: any, newChild: any): void {
+    this.callUIWithRenderer('appendChild', [
+      new FnArg(parent, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(newChild, SerializerTypes.RENDER_STORE_OBJECT),
+    ]);
+  }
+
+  insertBefore(parent: any, newChild: any, refChild: any): void {
+    if (!parent) {
+      return;
+    }
+
+    this.callUIWithRenderer('insertBefore', [
+      new FnArg(parent, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(newChild, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(refChild, SerializerTypes.RENDER_STORE_OBJECT),
+    ]);
+  }
+
+  removeChild(parent: any, oldChild: any): void {
+    this.callUIWithRenderer('removeChild', [
+      new FnArg(parent, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(oldChild, SerializerTypes.RENDER_STORE_OBJECT),
+    ]);
+  }
+
+  selectRootElement(selectorOrNode: string|any): any {
+    const node = this._rendererFactory.allocateNode();
+    this.callUIWithRenderer('selectRootElement', [
+      new FnArg(selectorOrNode),
+      new FnArg(node, SerializerTypes.RENDER_STORE_OBJECT),
+    ]);
+    return node;
+  }
+
+  parentNode(node: any): any {
+    const res = this._rendererFactory.allocateNode();
+    this.callUIWithRenderer('parentNode', [
+      new FnArg(node, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(res, SerializerTypes.RENDER_STORE_OBJECT),
+    ]);
+    return res;
+  }
+
+  nextSibling(node: any): any {
+    const res = this._rendererFactory.allocateNode();
+    this.callUIWithRenderer('nextSibling', [
+      new FnArg(node, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(res, SerializerTypes.RENDER_STORE_OBJECT),
+    ]);
+    return res;
+  }
+
+  setAttribute(el: any, name: string, value: string, namespace?: string): void {
+    this.callUIWithRenderer('setAttribute', [
+      new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(name),
+      new FnArg(value),
+      new FnArg(namespace),
+    ]);
+  }
+
+  removeAttribute(el: any, name: string, namespace?: string): void {
+    this.callUIWithRenderer('removeAttribute', [
+      new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(name),
+      new FnArg(namespace),
+    ]);
+  }
+
+  addClass(el: any, name: string): void {
+    this.callUIWithRenderer('addClass', [
+      new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(name),
+    ]);
+  }
+
+  removeClass(el: any, name: string): void {
+    this.callUIWithRenderer('removeClass', [
+      new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(name),
+    ]);
+  }
+
+  setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
+    this.callUIWithRenderer('setStyle', [
+      new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(style),
+      new FnArg(value),
+      new FnArg(flags),
+    ]);
+  }
+
+  removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
+    this.callUIWithRenderer('removeStyle', [
+      new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(style),
+      new FnArg(flags),
+    ]);
+  }
+
+  setProperty(el: any, name: string, value: any): void {
+    this.callUIWithRenderer('setProperty', [
+      new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(name),
+      new FnArg(value),
+    ]);
+  }
+
+  setValue(node: any, value: string): void {
+    this.callUIWithRenderer('setValue', [
+      new FnArg(node, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(value),
+    ]);
+  }
+
+  listen(
+      target: 'window'|'document'|'body'|any, eventName: string,
+      listener: (event: any) => boolean): () => void {
+    const unlistenId = this._rendererFactory.allocateId();
+
+    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);
+    } else {
+      targetEl.events.listen(eventName, listener);
+    }
+
+    this.callUIWithRenderer('listen', [
+      new FnArg(targetEl, SerializerTypes.RENDER_STORE_OBJECT),
+      new FnArg(targetName),
+      new FnArg(eventName),
+      new FnArg(unlistenId),
+    ]);
+
+    return () => {
+      if (fullName) {
+        this._rendererFactory.globalEvents.unlisten(fullName, listener);
+      } else {
+        targetEl.events.unlisten(eventName, listener);
+      }
+      this.callUIWithRenderer('unlisten', [new FnArg(unlistenId)]);
+    };
+  }
+
+  private callUIWithRenderer(fnName: string, fnArgs: FnArg[] = []) {
+    // always pass the renderer as the first arg
+    this._rendererFactory.callUI(fnName, [this.asFnArg, ...fnArgs]);
+  }
+}
+
+export class WebWorkerRenderNode { events = new NamedEventEmitter(); }
diff --git a/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts b/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts
new file mode 100644
index 000000000000..1672f7713868
--- /dev/null
+++ b/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts
@@ -0,0 +1,169 @@
+/**
+ * @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 {ɵDomAdapter as DomAdapter, ɵsetRootDomAdapter as setRootDomAdapter} from '@angular/platform-browser';
+
+/**
+ * This adapter is required to log error messages.
+ *
+ * Note: other methods all throw as the DOM is not accessible directly in web worker context.
+ */
+export class WorkerDomAdapter extends DomAdapter {
+  static makeCurrent() { setRootDomAdapter(new WorkerDomAdapter()); }
+
+  logError(error: any) {
+    if (console.error) {
+      console.error(error);
+    } else {
+      // tslint:disable-next-line:no-console
+      console.log(error);
+    }
+  }
+
+  log(error: any) {
+    // tslint:disable-next-line:no-console
+    console.log(error);
+  }
+
+  logGroup(error: any) {
+    if (console.group) {
+      console.group(error);
+      this.logError(error);
+    } else {
+      // tslint:disable-next-line:no-console
+      console.log(error);
+    }
+  }
+
+  logGroupEnd() {
+    if (console.groupEnd) {
+      console.groupEnd();
+    }
+  }
+
+  contains(nodeA: any, nodeB: any): boolean { throw 'not implemented'; }
+  hasProperty(element: any, name: string): boolean { throw 'not implemented'; }
+  setProperty(el: Element, name: string, value: any) { throw 'not implemented'; }
+  getProperty(el: Element, name: string): any { throw 'not implemented'; }
+  invoke(el: Element, methodName: string, args: any[]): any { throw 'not implemented'; }
+
+  get attrToPropMap(): {[key: string]: string} { throw 'not implemented'; }
+  set attrToPropMap(value: {[key: string]: string}) { throw 'not implemented'; }
+
+  parse(templateHtml: string) { throw 'not implemented'; }
+  querySelector(el: any, selector: string): HTMLElement { throw 'not implemented'; }
+  querySelectorAll(el: any, selector: string): any[] { throw 'not implemented'; }
+  on(el: any, evt: any, listener: any) { throw 'not implemented'; }
+  onAndCancel(el: any, evt: any, listener: any): Function { throw 'not implemented'; }
+  dispatchEvent(el: any, evt: any) { throw 'not implemented'; }
+  createMouseEvent(eventType: any): any { throw 'not implemented'; }
+  createEvent(eventType: string): any { throw 'not implemented'; }
+  preventDefault(evt: any) { throw 'not implemented'; }
+  isPrevented(evt: any): boolean { throw 'not implemented'; }
+  getInnerHTML(el: any): string { throw 'not implemented'; }
+  getTemplateContent(el: any): any { throw 'not implemented'; }
+  getOuterHTML(el: any): string { throw 'not implemented'; }
+  nodeName(node: any): string { throw 'not implemented'; }
+  nodeValue(node: any): string { throw 'not implemented'; }
+  type(node: any): string { throw 'not implemented'; }
+  content(node: any): any { throw 'not implemented'; }
+  firstChild(el: any): Node { throw 'not implemented'; }
+  nextSibling(el: any): Node { throw 'not implemented'; }
+  parentElement(el: any): Node { throw 'not implemented'; }
+  childNodes(el: any): Node[] { throw 'not implemented'; }
+  childNodesAsList(el: any): Node[] { throw 'not implemented'; }
+  clearNodes(el: any) { throw 'not implemented'; }
+  appendChild(el: any, node: any) { throw 'not implemented'; }
+  removeChild(el: any, node: any) { throw 'not implemented'; }
+  replaceChild(el: any, newNode: any, oldNode: any) { throw 'not implemented'; }
+  remove(el: any): Node { throw 'not implemented'; }
+  insertBefore(parent: any, el: any, node: any) { throw 'not implemented'; }
+  insertAllBefore(parent: any, el: any, nodes: any) { throw 'not implemented'; }
+  insertAfter(parent: any, el: any, node: any) { throw 'not implemented'; }
+  setInnerHTML(el: any, value: any) { throw 'not implemented'; }
+  getText(el: any): string { throw 'not implemented'; }
+  setText(el: any, value: string) { throw 'not implemented'; }
+  getValue(el: any): string { throw 'not implemented'; }
+  setValue(el: any, value: string) { throw 'not implemented'; }
+  getChecked(el: any): boolean { throw 'not implemented'; }
+  setChecked(el: any, value: boolean) { throw 'not implemented'; }
+  createComment(text: string): any { throw 'not implemented'; }
+  createTemplate(html: any): HTMLElement { throw 'not implemented'; }
+  createElement(tagName: any, doc?: any): HTMLElement { throw 'not implemented'; }
+  createElementNS(ns: string, tagName: string, doc?: any): Element { throw 'not implemented'; }
+  createTextNode(text: string, doc?: any): Text { throw 'not implemented'; }
+  createScriptTag(attrName: string, attrValue: string, doc?: any): HTMLElement {
+    throw 'not implemented';
+  }
+  createStyleElement(css: string, doc?: any): HTMLStyleElement { throw 'not implemented'; }
+  createShadowRoot(el: any): any { throw 'not implemented'; }
+  getShadowRoot(el: any): any { throw 'not implemented'; }
+  getHost(el: any): any { throw 'not implemented'; }
+  getDistributedNodes(el: any): Node[] { throw 'not implemented'; }
+  clone(node: Node): Node { throw 'not implemented'; }
+  getElementsByClassName(element: any, name: string): HTMLElement[] { throw 'not implemented'; }
+  getElementsByTagName(element: any, name: string): HTMLElement[] { throw 'not implemented'; }
+  classList(element: any): any[] { throw 'not implemented'; }
+  addClass(element: any, className: string) { throw 'not implemented'; }
+  removeClass(element: any, className: string) { throw 'not implemented'; }
+  hasClass(element: any, className: string): boolean { throw 'not implemented'; }
+  setStyle(element: any, styleName: string, styleValue: string) { throw 'not implemented'; }
+  removeStyle(element: any, styleName: string) { throw 'not implemented'; }
+  getStyle(element: any, styleName: string): string { throw 'not implemented'; }
+  hasStyle(element: any, styleName: string, styleValue?: string): boolean {
+    throw 'not implemented';
+  }
+  tagName(element: any): string { throw 'not implemented'; }
+  attributeMap(element: any): Map<string, string> { throw 'not implemented'; }
+  hasAttribute(element: any, attribute: string): boolean { throw 'not implemented'; }
+  hasAttributeNS(element: any, ns: string, attribute: string): boolean { throw 'not implemented'; }
+  getAttribute(element: any, attribute: string): string { throw 'not implemented'; }
+  getAttributeNS(element: any, ns: string, attribute: string): string { throw 'not implemented'; }
+  setAttribute(element: any, name: string, value: string) { throw 'not implemented'; }
+  setAttributeNS(element: any, ns: string, name: string, value: string) { throw 'not implemented'; }
+  removeAttribute(element: any, attribute: string) { throw 'not implemented'; }
+  removeAttributeNS(element: any, ns: string, attribute: string) { throw 'not implemented'; }
+  templateAwareRoot(el: any) { throw 'not implemented'; }
+  createHtmlDocument(): HTMLDocument { throw 'not implemented'; }
+  getDefaultDocument(): Document { throw 'not implemented'; }
+  getBoundingClientRect(el: any) { throw 'not implemented'; }
+  getTitle(doc: Document): string { throw 'not implemented'; }
+  setTitle(doc: Document, newTitle: string) { throw 'not implemented'; }
+  elementMatches(n: any, selector: string): boolean { throw 'not implemented'; }
+  isTemplateElement(el: any): boolean { throw 'not implemented'; }
+  isTextNode(node: any): boolean { throw 'not implemented'; }
+  isCommentNode(node: any): boolean { throw 'not implemented'; }
+  isElementNode(node: any): boolean { throw 'not implemented'; }
+  hasShadowRoot(node: any): boolean { throw 'not implemented'; }
+  isShadowRoot(node: any): boolean { throw 'not implemented'; }
+  importIntoDoc(node: Node): Node { throw 'not implemented'; }
+  adoptNode(node: Node): Node { throw 'not implemented'; }
+  getHref(element: any): string { throw 'not implemented'; }
+  getEventKey(event: any): string { throw 'not implemented'; }
+  resolveAndSetHref(element: any, baseUrl: string, href: string) { throw 'not implemented'; }
+  supportsDOMEvents(): boolean { throw 'not implemented'; }
+  supportsNativeShadowDOM(): boolean { throw 'not implemented'; }
+  getGlobalEventTarget(doc: Document, target: string): any { throw 'not implemented'; }
+  getHistory(): History { throw 'not implemented'; }
+  getLocation(): Location { throw 'not implemented'; }
+  getBaseHref(doc: Document): string { throw 'not implemented'; }
+  resetBaseElement(): void { throw 'not implemented'; }
+  getUserAgent(): string { return 'Fake user agent'; }
+  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'; }
+  performanceNow(): number { throw 'not implemented'; }
+  getAnimationPrefix(): string { throw 'not implemented'; }
+  getTransitionEnd(): string { throw 'not implemented'; }
+  supportsAnimation(): boolean { throw 'not implemented'; }
+  supportsWebAnimation(): boolean { throw 'not implemented'; }
+
+  supportsCookies(): boolean { return false; }
+  getCookie(name: string): string { throw 'not implemented'; }
+  setCookie(name: string, value: string) { throw 'not implemented'; }
+}
diff --git a/packages/platform-webworker/src/worker_app.ts b/packages/platform-webworker/src/worker_app.ts
new file mode 100644
index 000000000000..6fbb10206acc
--- /dev/null
+++ b/packages/platform-webworker/src/worker_app.ts
@@ -0,0 +1,82 @@
+/**
+ * @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, ViewportScroller, ɵNullViewportScroller as NullViewportScroller, ɵPLATFORM_WORKER_APP_ID as PLATFORM_WORKER_APP_ID} from '@angular/common';
+import {APP_INITIALIZER, ApplicationModule, ErrorHandler, NgModule, NgZone, PLATFORM_ID, PlatformRef, RendererFactory2, RootRenderer, StaticProvider, createPlatformFactory, platformCore} from '@angular/core';
+import {DOCUMENT, ɵBROWSER_SANITIZATION_PROVIDERS as BROWSER_SANITIZATION_PROVIDERS} from '@angular/platform-browser';
+
+import {ON_WEB_WORKER} from './web_workers/shared/api';
+import {ClientMessageBrokerFactory} from './web_workers/shared/client_message_broker';
+import {MessageBus} from './web_workers/shared/message_bus';
+import {PostMessageBus, PostMessageBusSink, PostMessageBusSource} from './web_workers/shared/post_message_bus';
+import {RenderStore} from './web_workers/shared/render_store';
+import {Serializer} from './web_workers/shared/serializer';
+import {ServiceMessageBrokerFactory} from './web_workers/shared/service_message_broker';
+import {WebWorkerRendererFactory2} from './web_workers/worker/renderer';
+import {WorkerDomAdapter} from './web_workers/worker/worker_adapter';
+
+
+
+/**
+ * @experimental
+ */
+export const platformWorkerApp = createPlatformFactory(
+    platformCore, 'workerApp', [{provide: PLATFORM_ID, useValue: PLATFORM_WORKER_APP_ID}]);
+
+export function errorHandler(): ErrorHandler {
+  return new ErrorHandler();
+}
+
+
+// TODO(jteplitz602): remove this and compile with lib.webworker.d.ts (#3492)
+const _postMessage = {
+  postMessage: (message: any, transferrables?: [ArrayBuffer]) => {
+    (<any>postMessage)(message, transferrables);
+  }
+};
+
+export function createMessageBus(zone: NgZone): MessageBus {
+  const sink = new PostMessageBusSink(_postMessage);
+  const source = new PostMessageBusSource();
+  const bus = new PostMessageBus(sink, source);
+  bus.attachToZone(zone);
+  return bus;
+}
+
+export function setupWebWorker(): void {
+  WorkerDomAdapter.makeCurrent();
+}
+
+/**
+ * The ng module for the worker app side.
+ *
+ * @experimental
+ */
+@NgModule({
+  providers: [
+    BROWSER_SANITIZATION_PROVIDERS,
+    Serializer,
+    {provide: DOCUMENT, useValue: null},
+    ClientMessageBrokerFactory,
+    ServiceMessageBrokerFactory,
+    WebWorkerRendererFactory2,
+    {provide: RendererFactory2, useExisting: WebWorkerRendererFactory2},
+    {provide: ON_WEB_WORKER, useValue: true},
+    RenderStore,
+    {provide: ErrorHandler, useFactory: errorHandler, deps: []},
+    {provide: MessageBus, useFactory: createMessageBus, deps: [NgZone]},
+    {provide: APP_INITIALIZER, useValue: setupWebWorker, multi: true},
+    {provide: ViewportScroller, useClass: NullViewportScroller, deps: []},
+  ],
+  exports: [
+    CommonModule,
+    ApplicationModule,
+  ]
+})
+export class WorkerAppModule {
+}
diff --git a/packages/platform-webworker/src/worker_render.ts b/packages/platform-webworker/src/worker_render.ts
new file mode 100644
index 000000000000..0fe5e4194694
--- /dev/null
+++ b/packages/platform-webworker/src/worker_render.ts
@@ -0,0 +1,176 @@
+/**
+ * @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, ɵPLATFORM_WORKER_UI_ID as PLATFORM_WORKER_UI_ID} from '@angular/common';
+import {ErrorHandler, Injectable, InjectionToken, Injector, NgZone, PLATFORM_ID, PLATFORM_INITIALIZER, PlatformRef, RendererFactory2, RootRenderer, StaticProvider, Testability, createPlatformFactory, isDevMode, platformCore, ɵAPP_ID_RANDOM_PROVIDER as APP_ID_RANDOM_PROVIDER} from '@angular/core';
+import {DOCUMENT, EVENT_MANAGER_PLUGINS, EventManager, HAMMER_GESTURE_CONFIG, HammerGestureConfig, ɵBROWSER_SANITIZATION_PROVIDERS as BROWSER_SANITIZATION_PROVIDERS, ɵBrowserDomAdapter as BrowserDomAdapter, ɵBrowserGetTestability as BrowserGetTestability, ɵDomEventsPlugin as DomEventsPlugin, ɵDomRendererFactory2 as DomRendererFactory2, ɵDomSharedStylesHost as DomSharedStylesHost, ɵHammerGesturesPlugin as HammerGesturesPlugin, ɵKeyEventsPlugin as KeyEventsPlugin, ɵSharedStylesHost as SharedStylesHost, ɵgetDOM as getDOM} from '@angular/platform-browser';
+
+import {ON_WEB_WORKER} from './web_workers/shared/api';
+import {ClientMessageBrokerFactory} from './web_workers/shared/client_message_broker';
+import {MessageBus} from './web_workers/shared/message_bus';
+import {PostMessageBus, PostMessageBusSink, PostMessageBusSource} from './web_workers/shared/post_message_bus';
+import {RenderStore} from './web_workers/shared/render_store';
+import {Serializer} from './web_workers/shared/serializer';
+import {ServiceMessageBrokerFactory} from './web_workers/shared/service_message_broker';
+import {MessageBasedRenderer2} from './web_workers/ui/renderer';
+
+
+
+/**
+ * Wrapper class that exposes the Worker
+ * and underlying {@link MessageBus} for lower level message passing.
+ *
+ * @experimental WebWorker support is currently experimental.
+ */
+@Injectable()
+export class WebWorkerInstance {
+  // TODO(issue/24571): remove '!'.
+  public worker !: Worker;
+  // TODO(issue/24571): remove '!'.
+  public bus !: MessageBus;
+
+  /** @internal */
+  public init(worker: Worker, bus: MessageBus) {
+    this.worker = worker;
+    this.bus = bus;
+  }
+}
+
+/**
+ * @experimental WebWorker support is currently experimental.
+ */
+export const WORKER_SCRIPT = new InjectionToken<string>('WebWorkerScript');
+
+/**
+ * A multi-provider used to automatically call the `start()` method after the service is
+ * created.
+ *
+ * @experimental WebWorker support is currently experimental.
+ */
+export const WORKER_UI_STARTABLE_MESSAGING_SERVICE =
+    new InjectionToken<({start: () => void})[]>('WorkerRenderStartableMsgService');
+
+export const _WORKER_UI_PLATFORM_PROVIDERS: StaticProvider[] = [
+  {provide: NgZone, useFactory: createNgZone, deps: []},
+  {
+    provide: MessageBasedRenderer2,
+    deps: [ServiceMessageBrokerFactory, MessageBus, Serializer, RenderStore, RendererFactory2]
+  },
+  {provide: WORKER_UI_STARTABLE_MESSAGING_SERVICE, useExisting: MessageBasedRenderer2, multi: true},
+  BROWSER_SANITIZATION_PROVIDERS,
+  {provide: ErrorHandler, useFactory: _exceptionHandler, deps: []},
+  {provide: DOCUMENT, useFactory: _document, deps: []},
+  // TODO(jteplitz602): Investigate if we definitely need EVENT_MANAGER on the render thread
+  // #5298
+  {
+    provide: EVENT_MANAGER_PLUGINS,
+    useClass: DomEventsPlugin,
+    deps: [DOCUMENT, NgZone],
+    multi: true
+  },
+  {provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, deps: [DOCUMENT], multi: true},
+  {
+    provide: EVENT_MANAGER_PLUGINS,
+    useClass: HammerGesturesPlugin,
+    deps: [DOCUMENT, HAMMER_GESTURE_CONFIG],
+    multi: true
+  },
+  {provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig, deps: []},
+  APP_ID_RANDOM_PROVIDER,
+  {provide: DomRendererFactory2, deps: [EventManager, DomSharedStylesHost]},
+  {provide: RendererFactory2, useExisting: DomRendererFactory2},
+  {provide: SharedStylesHost, useExisting: DomSharedStylesHost},
+  {
+    provide: ServiceMessageBrokerFactory,
+    useClass: ServiceMessageBrokerFactory,
+    deps: [MessageBus, Serializer]
+  },
+  {
+    provide: ClientMessageBrokerFactory,
+    useClass: ClientMessageBrokerFactory,
+    deps: [MessageBus, Serializer]
+  },
+  {provide: Serializer, deps: [RenderStore]},
+  {provide: ON_WEB_WORKER, useValue: false},
+  {provide: RenderStore, deps: []},
+  {provide: DomSharedStylesHost, deps: [DOCUMENT]},
+  {provide: Testability, deps: [NgZone]},
+  {provide: EventManager, deps: [EVENT_MANAGER_PLUGINS, NgZone]},
+  {provide: WebWorkerInstance, deps: []},
+  {
+    provide: PLATFORM_INITIALIZER,
+    useFactory: initWebWorkerRenderPlatform,
+    multi: true,
+    deps: [Injector]
+  },
+  {provide: PLATFORM_ID, useValue: PLATFORM_WORKER_UI_ID},
+  {provide: MessageBus, useFactory: messageBusFactory, deps: [WebWorkerInstance]},
+];
+
+function initializeGenericWorkerRenderer(injector: Injector) {
+  const bus = injector.get(MessageBus);
+  const zone = injector.get<NgZone>(NgZone);
+  bus.attachToZone(zone);
+
+  // initialize message services after the bus has been created
+  const services = injector.get(WORKER_UI_STARTABLE_MESSAGING_SERVICE);
+  zone.runGuarded(() => { services.forEach((svc: any) => { svc.start(); }); });
+}
+
+function messageBusFactory(instance: WebWorkerInstance): MessageBus {
+  return instance.bus;
+}
+
+function initWebWorkerRenderPlatform(injector: Injector): () => void {
+  return () => {
+    BrowserDomAdapter.makeCurrent();
+    BrowserGetTestability.init();
+    let scriptUri: string;
+    try {
+      scriptUri = injector.get(WORKER_SCRIPT);
+    } catch (e) {
+      throw new Error(
+          'You must provide your WebWorker\'s initialization script with the WORKER_SCRIPT token');
+    }
+
+    const instance = injector.get(WebWorkerInstance);
+    spawnWebWorker(scriptUri, instance);
+
+    initializeGenericWorkerRenderer(injector);
+  };
+}
+
+/**
+ * @experimental WebWorker support is currently experimental.
+ */
+export const platformWorkerUi =
+    createPlatformFactory(platformCore, 'workerUi', _WORKER_UI_PLATFORM_PROVIDERS);
+
+function _exceptionHandler(): ErrorHandler {
+  return new ErrorHandler();
+}
+
+function _document(): any {
+  return document;
+}
+
+function createNgZone(): NgZone {
+  return new NgZone({enableLongStackTrace: isDevMode()});
+}
+
+/**
+ * Spawns a new class and initializes the WebWorkerInstance
+ */
+function spawnWebWorker(uri: string, instance: WebWorkerInstance): void {
+  const webWorker: Worker = new Worker(uri);
+  const sink = new PostMessageBusSink(webWorker);
+  const source = new PostMessageBusSource(webWorker);
+  const bus = new PostMessageBus(sink, source);
+
+  instance.init(webWorker, bus);
+}
diff --git a/packages/platform-webworker/test/BUILD.bazel b/packages/platform-webworker/test/BUILD.bazel
new file mode 100644
index 000000000000..d0937bdf77cf
--- /dev/null
+++ b/packages/platform-webworker/test/BUILD.bazel
@@ -0,0 +1,35 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser-dynamic/testing",
+        "//packages/platform-browser/testing",
+        "//packages/platform-webworker",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    deps = [
+        ":test_lib",
+    ],
+)
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
new file mode 100644
index 000000000000..344c4f4bbc6d
--- /dev/null
+++ b/packages/platform-webworker/test/web_workers/shared/message_bus_spec.ts
@@ -0,0 +1,160 @@
+/**
+ * @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 {NgZone} from '@angular/core';
+import {withModule} from '@angular/core/testing/src/test_bed';
+import {AsyncTestCompleter, MockNgZone, beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {MessageBus} from '@angular/platform-webworker/src/web_workers/shared/message_bus';
+
+import {createConnectedMessageBus} from './message_bus_util';
+
+{
+  /**
+   * Tests the PostMessageBus
+   */
+  describe('MessageBus', () => {
+    let bus: MessageBus;
+
+    beforeEach(() => { bus = createConnectedMessageBus(); });
+
+    it('should pass messages in the same channel from sink to source',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const CHANNEL = 'CHANNEL 1';
+         const MESSAGE = 'Test message';
+         bus.initChannel(CHANNEL, false);
+
+         const fromEmitter = bus.from(CHANNEL);
+         fromEmitter.subscribe({
+           next: (message: any) => {
+             expect(message).toEqual(MESSAGE);
+             async.done();
+           }
+         });
+         const toEmitter = bus.to(CHANNEL);
+         toEmitter.emit(MESSAGE);
+       }));
+
+    it('should broadcast', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const CHANNEL = 'CHANNEL 1';
+         const MESSAGE = 'TESTING';
+         const NUM_LISTENERS = 2;
+         bus.initChannel(CHANNEL, false);
+
+         let callCount = 0;
+         const emitHandler = (message: any) => {
+           expect(message).toEqual(MESSAGE);
+           callCount++;
+           if (callCount == NUM_LISTENERS) {
+             async.done();
+           }
+         };
+
+         for (let i = 0; i < NUM_LISTENERS; i++) {
+           const emitter = bus.from(CHANNEL);
+           emitter.subscribe({next: emitHandler});
+         }
+
+         const toEmitter = bus.to(CHANNEL);
+         toEmitter.emit(MESSAGE);
+       }));
+
+    it('should keep channels independent',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const CHANNEL_ONE = 'CHANNEL 1';
+         const CHANNEL_TWO = 'CHANNEL 2';
+         const MESSAGE_ONE = 'This is a message on CHANNEL 1';
+         const MESSAGE_TWO = 'This is a message on CHANNEL 2';
+         let callCount = 0;
+         bus.initChannel(CHANNEL_ONE, false);
+         bus.initChannel(CHANNEL_TWO, false);
+
+         const firstFromEmitter = bus.from(CHANNEL_ONE);
+         firstFromEmitter.subscribe({
+           next: (message: any) => {
+             expect(message).toEqual(MESSAGE_ONE);
+             callCount++;
+             if (callCount == 2) {
+               async.done();
+             }
+           }
+         });
+         const secondFromEmitter = bus.from(CHANNEL_TWO);
+         secondFromEmitter.subscribe({
+           next: (message: any) => {
+             expect(message).toEqual(MESSAGE_TWO);
+             callCount++;
+             if (callCount == 2) {
+               async.done();
+             }
+           }
+         });
+
+         const firstToEmitter = bus.to(CHANNEL_ONE);
+         firstToEmitter.emit(MESSAGE_ONE);
+
+         const secondToEmitter = bus.to(CHANNEL_TWO);
+         secondToEmitter.emit(MESSAGE_TWO);
+       }));
+  });
+
+  describe('PostMessageBusSink', () => {
+    let bus: MessageBus;
+    const CHANNEL = 'Test Channel';
+
+    function setup(runInZone: boolean, zone: NgZone) {
+      bus.attachToZone(zone);
+      bus.initChannel(CHANNEL, runInZone);
+    }
+
+    /**
+     * Flushes pending messages and then runs the given function.
+     */
+    // TODO(mlaval): timeout is fragile, test to be rewritten
+    function flushMessages(fn: () => void) { setTimeout(fn, 50); }
+
+    it('should buffer messages and wait for the zone to exit before sending',
+       withModule({providers: [{provide: NgZone, useClass: MockNgZone}]})
+           .inject(
+               [AsyncTestCompleter, NgZone],
+               (async: AsyncTestCompleter, zone: MockNgZone) => {
+                 bus = createConnectedMessageBus();
+                 setup(true, zone);
+
+                 let wasCalled = false;
+                 bus.from(CHANNEL).subscribe({next: (message: any) => { wasCalled = true; }});
+                 bus.to(CHANNEL).emit('hi');
+
+
+                 flushMessages(() => {
+                   expect(wasCalled).toBeFalsy();
+
+                   zone.simulateZoneExit();
+                   flushMessages(() => {
+                     expect(wasCalled).toBeTruthy();
+                     async.done();
+                   });
+                 });
+               }),
+       500);
+
+    it('should send messages immediately when run outside the zone',
+       inject([AsyncTestCompleter, NgZone], (async: AsyncTestCompleter, zone: MockNgZone) => {
+         bus = createConnectedMessageBus();
+         setup(false, zone);
+
+         let wasCalled = false;
+         bus.from(CHANNEL).subscribe({next: (message: any) => { wasCalled = true; }});
+         bus.to(CHANNEL).emit('hi');
+
+         flushMessages(() => {
+           expect(wasCalled).toBeTruthy();
+           async.done();
+         });
+       }), 10000);
+  });
+}
diff --git a/packages/platform-webworker/test/web_workers/shared/message_bus_util.ts b/packages/platform-webworker/test/web_workers/shared/message_bus_util.ts
new file mode 100644
index 000000000000..5b14c33b7aeb
--- /dev/null
+++ b/packages/platform-webworker/test/web_workers/shared/message_bus_util.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 {MessageBus} from '@angular/platform-webworker/src/web_workers/shared/message_bus';
+import {PostMessageBus, PostMessageBusSink, PostMessageBusSource} from '@angular/platform-webworker/src/web_workers/shared/post_message_bus';
+
+
+/*
+ * Returns a PostMessageBus that's sink is connected to its own source.
+ * Useful for testing the sink and source.
+ */
+export function createConnectedMessageBus(): MessageBus {
+  const mockPostMessage = new MockPostMessage();
+  const source = new PostMessageBusSource(<any>mockPostMessage);
+  const sink = new PostMessageBusSink(mockPostMessage);
+
+  return new PostMessageBus(sink, source);
+}
+
+class MockPostMessage {
+  // TODO(issue/24571): remove '!'.
+  private _listener !: EventListener;
+
+  addEventListener(type: string, listener: EventListener, useCapture?: boolean): void {
+    if (type === 'message') {
+      this._listener = listener;
+    }
+  }
+
+  postMessage(data: any, transfer?: [ArrayBuffer]): void { this._listener(<any>{data: data}); }
+}
diff --git a/packages/platform-webworker/test/web_workers/shared/mock_event_emitter.ts b/packages/platform-webworker/test/web_workers/shared/mock_event_emitter.ts
new file mode 100644
index 000000000000..19f2a304596b
--- /dev/null
+++ b/packages/platform-webworker/test/web_workers/shared/mock_event_emitter.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 {EventEmitter} from '@angular/core';
+
+export class MockEventEmitter<T> extends EventEmitter<T> {
+  private _nextFns: Function[] = [];
+
+  constructor() { super(); }
+
+  subscribe(generator: any): any {
+    this._nextFns.push(generator.next);
+    return new MockDisposable();
+  }
+
+  emit(value: any) { this._nextFns.forEach(fn => fn(value)); }
+}
+
+class MockDisposable {
+  isUnsubscribed: boolean = false;
+  unsubscribe(): void {}
+}
diff --git a/packages/platform-webworker/test/web_workers/shared/render_store_spec.ts b/packages/platform-webworker/test/web_workers/shared/render_store_spec.ts
new file mode 100644
index 000000000000..35d720a3e9e5
--- /dev/null
+++ b/packages/platform-webworker/test/web_workers/shared/render_store_spec.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 {RenderStore} from '@angular/platform-webworker/src/web_workers/shared/render_store';
+
+{
+  describe('RenderStoreSpec', () => {
+    let store: RenderStore;
+    beforeEach(() => { store = new RenderStore(); });
+
+    it('should allocate ids', () => {
+      expect(store.allocateId()).toBe(0);
+      expect(store.allocateId()).toBe(1);
+    });
+
+    it('should serialize objects', () => {
+      const id = store.allocateId();
+      const obj = 'testObject';
+      store.store(obj, id);
+      expect(store.serialize(obj)).toBe(id);
+    });
+
+    it('should deserialize objects', () => {
+      const id = store.allocateId();
+      const obj = 'testObject';
+      store.store(obj, id);
+      expect(store.deserialize(id)).toBe(obj);
+    });
+
+  });
+}
diff --git a/packages/platform-webworker/test/web_workers/shared/service_message_broker_spec.ts b/packages/platform-webworker/test/web_workers/shared/service_message_broker_spec.ts
new file mode 100644
index 000000000000..03ed2934ce72
--- /dev/null
+++ b/packages/platform-webworker/test/web_workers/shared/service_message_broker_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 {beforeEach, beforeEachProviders, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {ON_WEB_WORKER} from '@angular/platform-webworker/src/web_workers/shared/api';
+import {RenderStore} from '@angular/platform-webworker/src/web_workers/shared/render_store';
+import {Serializer, SerializerTypes} from '@angular/platform-webworker/src/web_workers/shared/serializer';
+import {ServiceMessageBroker} from '@angular/platform-webworker/src/web_workers/shared/service_message_broker';
+
+import {createPairedMessageBuses} from './web_worker_test_util';
+
+{
+  const CHANNEL = 'UIMessageBroker Test Channel';
+  const TEST_METHOD = 'TEST_METHOD';
+  const PASSED_ARG_1 = 5;
+  const PASSED_ARG_2 = 'TEST';
+  const RESULT = 20;
+  const ID = 'methodId';
+
+  beforeEachProviders(() => [Serializer, {provide: ON_WEB_WORKER, useValue: true}, RenderStore]);
+
+  describe('UIMessageBroker', () => {
+    let messageBuses: any /** TODO #9100 */;
+
+    beforeEach(() => {
+      messageBuses = createPairedMessageBuses();
+      messageBuses.ui.initChannel(CHANNEL);
+      messageBuses.worker.initChannel(CHANNEL);
+    });
+    it('should call registered method with correct arguments',
+       inject([Serializer], (serializer: Serializer) => {
+         const broker = new (ServiceMessageBroker as any)(messageBuses.ui, serializer, CHANNEL);
+         broker.registerMethod(
+             TEST_METHOD, [SerializerTypes.PRIMITIVE, SerializerTypes.PRIMITIVE],
+             (arg1: any, arg2: any) => {
+               expect(arg1).toEqual(PASSED_ARG_1);
+               expect(arg2).toEqual(PASSED_ARG_2);
+             });
+         messageBuses.worker.to(CHANNEL).emit({
+           'method': TEST_METHOD,
+           'args': [PASSED_ARG_1, PASSED_ARG_2],
+         });
+       }));
+
+    it('should return promises to the worker', inject([Serializer], (serializer: Serializer) => {
+         const broker = new (ServiceMessageBroker as any)(messageBuses.ui, serializer, CHANNEL);
+         broker.registerMethod(TEST_METHOD, [SerializerTypes.PRIMITIVE], (arg1: any) => {
+           expect(arg1).toEqual(PASSED_ARG_1);
+           return new Promise((res, rej) => {
+             try {
+               res(RESULT);
+             } catch (e) {
+               rej(e);
+             }
+           });
+         });
+         messageBuses.worker.to(CHANNEL).emit(
+             {'method': TEST_METHOD, 'id': ID, 'args': [PASSED_ARG_1]});
+         messageBuses.worker.from(CHANNEL).subscribe({
+           next: (data: any) => {
+             expect(data.type).toEqual('result');
+             expect(data.id).toEqual(ID);
+             expect(data.value).toEqual(RESULT);
+           },
+         });
+       }));
+  });
+}
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
new file mode 100644
index 000000000000..16abca11fa92
--- /dev/null
+++ b/packages/platform-webworker/test/web_workers/shared/web_worker_test_util.ts
@@ -0,0 +1,138 @@
+/**
+ * @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 {Type} from '@angular/core';
+import {NgZone} from '@angular/core/src/zone/ng_zone';
+import {ClientMessageBroker, ClientMessageBrokerFactory, UiArguments} from '@angular/platform-webworker/src/web_workers/shared/client_message_broker';
+import {MessageBus, MessageBusSink, MessageBusSource} from '@angular/platform-webworker/src/web_workers/shared/message_bus';
+import {SpyMessageBroker} from '../worker/spies';
+
+import {MockEventEmitter} from './mock_event_emitter';
+
+/**
+ * Returns two MessageBus instances that are attached to each other.
+ * Such that whatever goes into one's sink comes out the others source.
+ */
+export function createPairedMessageBuses(): PairedMessageBuses {
+  const firstChannels: {[key: string]: MockEventEmitter<any>} = {};
+  const workerMessageBusSink = new MockMessageBusSink(firstChannels);
+  const uiMessageBusSource = new MockMessageBusSource(firstChannels);
+
+  const secondChannels: {[key: string]: MockEventEmitter<any>} = {};
+  const uiMessageBusSink = new MockMessageBusSink(secondChannels);
+  const workerMessageBusSource = new MockMessageBusSource(secondChannels);
+
+  return new PairedMessageBuses(
+      new MockMessageBus(uiMessageBusSink, uiMessageBusSource),
+      new MockMessageBus(workerMessageBusSink, workerMessageBusSource));
+}
+
+/**
+ * Spies on the given {@link SpyMessageBroker} and expects a call with the given methodName
+ * andvalues.
+ * If a handler is provided it will be called to handle the request.
+ * Only intended to be called on a given broker instance once.
+ */
+export function expectBrokerCall(
+    broker: SpyMessageBroker, methodName: string, vals?: Array<any>,
+    handler?: (..._: any[]) => Promise<any>| void): void {
+  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); });
+    }
+    let promise: Promise<any>|void = null !;
+    if (handler != null) {
+      const givenValues = args.args !.map((arg) => arg.value);
+      if (givenValues.length > 0) {
+        promise = handler(givenValues);
+      } else {
+        promise = handler();
+      }
+    }
+    if (promise == null) {
+      promise = new Promise((res, rej) => {
+        try {
+          res();
+        } catch (e) {
+          rej(e);
+        }
+      });
+    }
+    return promise;
+  });
+}
+
+export class PairedMessageBuses {
+  constructor(public ui: MessageBus, public worker: MessageBus) {}
+}
+
+export class MockMessageBusSource implements MessageBusSource {
+  constructor(private _channels: {[key: string]: MockEventEmitter<any>}) {}
+
+  initChannel(channel: string, runInZone = true) {
+    if (!this._channels.hasOwnProperty(channel)) {
+      this._channels[channel] = new MockEventEmitter();
+    }
+  }
+
+  from(channel: string): MockEventEmitter<any> {
+    if (!this._channels.hasOwnProperty(channel)) {
+      throw new Error(`${channel} is not set up. Did you forget to call initChannel?`);
+    }
+    return this._channels[channel];
+  }
+
+  attachToZone(zone: NgZone) {}
+}
+
+export class MockMessageBusSink implements MessageBusSink {
+  constructor(private _channels: {[key: string]: MockEventEmitter<any>}) {}
+
+  initChannel(channel: string, runInZone = true) {
+    if (!this._channels.hasOwnProperty(channel)) {
+      this._channels[channel] = new MockEventEmitter();
+    }
+  }
+
+  to(channel: string): MockEventEmitter<any> {
+    if (!this._channels.hasOwnProperty(channel)) {
+      this._channels[channel] = new MockEventEmitter();
+    }
+    return this._channels[channel];
+  }
+
+  attachToZone(zone: NgZone) {}
+}
+
+/**
+ * Mock implementation of the {@link MessageBus} for tests.
+ * Runs syncronously, and does not support running within the zone.
+ */
+export class MockMessageBus extends MessageBus {
+  constructor(public sink: MockMessageBusSink, public source: MockMessageBusSource) { super(); }
+
+  initChannel(channel: string, runInZone = true) {
+    this.sink.initChannel(channel, runInZone);
+    this.source.initChannel(channel, runInZone);
+  }
+
+  to(channel: string): MockEventEmitter<any> { return this.sink.to(channel); }
+
+  from(channel: string): MockEventEmitter<any> { return this.source.from(channel); }
+
+  attachToZone(zone: NgZone) {}
+}
+
+export const _ClientMessageBrokerFactory: {new (a: any, b: any): ClientMessageBrokerFactory} =
+    ClientMessageBrokerFactory;
+export class MockMessageBrokerFactory extends _ClientMessageBrokerFactory {
+  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
new file mode 100644
index 000000000000..9599f0c3dd6f
--- /dev/null
+++ b/packages/platform-webworker/test/web_workers/worker/platform_location_spec.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 {Type} from '@angular/core';
+import {UiArguments} from '@angular/platform-webworker/src/web_workers/shared/client_message_broker';
+import {MessageBus} from '@angular/platform-webworker/src/web_workers/shared/message_bus';
+import {LocationType, SerializerTypes} from '@angular/platform-webworker/src/web_workers/shared/serializer';
+import {WebWorkerPlatformLocation} from '@angular/platform-webworker/src/web_workers/worker/platform_location';
+
+import {MockMessageBrokerFactory, createPairedMessageBuses, expectBrokerCall} from '../shared/web_worker_test_util';
+
+import {SpyMessageBroker} from './spies';
+
+{
+  describe('WebWorkerPlatformLocation', () => {
+    let uiBus: MessageBus = null !;
+    let workerBus: MessageBus = null !;
+    let broker: any = null;
+
+    const TEST_LOCATION = new LocationType(
+        'http://www.example.com', 'http', 'example.com', 'example.com', '80', '/', '', '',
+        'http://www.example.com');
+
+
+    function createWebWorkerPlatformLocation(loc: LocationType): WebWorkerPlatformLocation {
+      broker.spy('runOnService')
+          .and.callFake((args: UiArguments, returnType: Type<any>| SerializerTypes) => {
+            if (args.method === 'getLocation') {
+              return Promise.resolve(loc);
+            }
+          });
+      const factory = new MockMessageBrokerFactory(broker);
+      return new WebWorkerPlatformLocation(factory, workerBus, null !);
+    }
+
+    function testPushOrReplaceState(pushState: boolean) {
+      const platformLocation = createWebWorkerPlatformLocation(null !);
+      const TITLE = 'foo';
+      const URL = 'http://www.example.com/foo';
+      expectBrokerCall(broker, pushState ? 'pushState' : 'replaceState', [null, TITLE, URL]);
+      if (pushState) {
+        platformLocation.pushState(null, TITLE, URL);
+      } else {
+        platformLocation.replaceState(null, TITLE, URL);
+      }
+    }
+
+    beforeEach(() => {
+      const buses = createPairedMessageBuses();
+      uiBus = buses.ui;
+      workerBus = buses.worker;
+      workerBus.initChannel('ng-Router');
+      uiBus.initChannel('ng-Router');
+      broker = new SpyMessageBroker();
+    });
+
+    it('should throw if getBaseHrefFromDOM is called', () => {
+      const platformLocation = createWebWorkerPlatformLocation(null !);
+      expect(() => platformLocation.getBaseHrefFromDOM()).toThrowError();
+    });
+
+    it('should get location on init', () => {
+      const platformLocation = createWebWorkerPlatformLocation(null !);
+      expectBrokerCall(broker, 'getLocation');
+      (platformLocation as any).init();
+    });
+
+    it('should throw if set pathname is called before init finishes', () => {
+      const platformLocation = createWebWorkerPlatformLocation(null !);
+      (platformLocation as any).init();
+      expect(() => platformLocation.pathname = 'TEST').toThrowError();
+    });
+
+    it('should send pathname to render thread', done => {
+      const platformLocation = createWebWorkerPlatformLocation(TEST_LOCATION);
+      (platformLocation as any).init().then((_: any) => {
+        const PATHNAME = '/test';
+        expectBrokerCall(broker, 'setPathname', [PATHNAME]);
+        platformLocation.pathname = PATHNAME;
+        done();
+      });
+    });
+
+    it('should send pushState to render thread', () => { testPushOrReplaceState(true); });
+
+    it('should send replaceState to render thread', () => { testPushOrReplaceState(false); });
+  });
+}
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
new file mode 100644
index 000000000000..d66e25a96a02
--- /dev/null
+++ b/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts
@@ -0,0 +1,224 @@
+/**
+ * @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, ComponentRef, Renderer2, RendererFactory2, RendererType2, destroyPlatform} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {DomRendererFactory2} from '@angular/platform-browser/src/dom/dom_renderer';
+import {BrowserTestingModule} from '@angular/platform-browser/testing';
+import {browserDetection, dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+import {ClientMessageBrokerFactory} from '../../../src/web_workers/shared/client_message_broker';
+import {RenderStore} from '../../../src/web_workers/shared/render_store';
+import {Serializer} from '../../../src/web_workers/shared/serializer';
+import {ServiceMessageBrokerFactory} from '../../../src/web_workers/shared/service_message_broker';
+import {MessageBasedRenderer2} from '../../../src/web_workers/ui/renderer';
+import {WebWorkerRendererFactory2} from '../../../src/web_workers/worker/renderer';
+import {PairedMessageBuses, createPairedMessageBuses} from '../shared/web_worker_test_util';
+
+let lastCreatedRenderer: Renderer2;
+
+{
+  describe('Web Worker Renderer v2', () => {
+    // Don't run on server...
+    if (!getDOM().supportsDOMEvents()) return;
+    // TODO(tbosch): investigate why this is failing on iOS7 for unrelated reasons
+    // Note: it's hard to debug this as SauceLabs starts with iOS8. Maybe drop
+    // iOS7 altogether?
+    if (browserDetection.isIOS7) return;
+
+    let uiRenderStore: RenderStore;
+    let wwRenderStore: RenderStore;
+
+    beforeEach(() => destroyPlatform());
+    afterEach(() => destroyPlatform());
+
+    beforeEach(() => {
+      // UI side
+      uiRenderStore = new RenderStore();
+      const uiInjector = new TestBed();
+      uiInjector.platform = platformBrowserDynamicTesting();
+      uiInjector.ngModule = BrowserTestingModule;
+      uiInjector.configureTestingModule({
+        providers: [
+          Serializer,
+          {provide: RenderStore, useValue: uiRenderStore},
+          DomRendererFactory2,
+          {provide: RendererFactory2, useExisting: DomRendererFactory2},
+        ]
+      });
+      const uiSerializer = uiInjector.get(Serializer);
+      const domRendererFactory = uiInjector.get(RendererFactory2);
+
+      // Worker side
+      lastCreatedRenderer = null !;
+
+      wwRenderStore = new RenderStore();
+
+      TestBed.configureTestingModule({
+        declarations: [MyComp2],
+        providers: [
+          Serializer,
+          {provide: RenderStore, useValue: wwRenderStore},
+          {
+            provide: RendererFactory2,
+            useFactory:
+                (wwSerializer: Serializer) => createWebWorkerRendererFactory2(
+                    wwSerializer, uiSerializer, domRendererFactory, uiRenderStore, wwRenderStore),
+            deps: [Serializer],
+          },
+        ],
+      });
+    });
+
+    function getRenderElement(workerEl: any): any {
+      const id = wwRenderStore.serialize(workerEl) !;
+      return uiRenderStore.deserialize(id);
+    }
+
+    it('should update text nodes', () => {
+      const fixture =
+          TestBed.overrideTemplate(MyComp2, '<div>{{ctxProp}}</div>').createComponent(MyComp2);
+      const renderEl = getRenderElement(fixture.nativeElement);
+      expect(renderEl).toHaveText('');
+
+      fixture.componentInstance.ctxProp = 'Hello World!';
+      fixture.detectChanges();
+      expect(renderEl).toHaveText('Hello World!');
+    });
+
+    it('should update any element property/attributes/class/style(s) independent of the compilation on the root element and other elements',
+       () => {
+         const fixture =
+             TestBed.overrideTemplate(MyComp2, '<input [title]="y" style="position:absolute">')
+                 .createComponent(MyComp2);
+
+         const checkSetters = (componentRef: ComponentRef<any>, workerEl: any) => {
+           expect(lastCreatedRenderer).not.toBeNull();
+
+           const el = getRenderElement(workerEl);
+           lastCreatedRenderer.setProperty(workerEl, 'tabIndex', 1);
+           expect(el.tabIndex).toEqual(1);
+
+           lastCreatedRenderer.addClass(workerEl, 'a');
+           expect(getDOM().hasClass(el, 'a')).toBe(true);
+
+           lastCreatedRenderer.removeClass(workerEl, 'a');
+           expect(getDOM().hasClass(el, 'a')).toBe(false);
+
+           lastCreatedRenderer.setStyle(workerEl, 'width', '10px');
+           expect(getDOM().getStyle(el, 'width')).toEqual('10px');
+
+           lastCreatedRenderer.removeStyle(workerEl, 'width');
+           expect(getDOM().getStyle(el, 'width')).toEqual('');
+
+           lastCreatedRenderer.setAttribute(workerEl, 'someattr', 'someValue');
+           expect(getDOM().getAttribute(el, 'someattr')).toEqual('someValue');
+         };
+
+         // root element
+         checkSetters(fixture.componentRef, fixture.nativeElement);
+         // nested elements
+         checkSetters(fixture.componentRef, fixture.debugElement.children[0].nativeElement);
+       });
+
+    it('should update any template comment property/attributes', () => {
+      const fixture =
+          TestBed.overrideTemplate(MyComp2, '<ng-container *ngIf="ctxBoolProp"></ng-container>')
+              .createComponent(MyComp2);
+      fixture.componentInstance.ctxBoolProp = true;
+      fixture.detectChanges();
+      const el = getRenderElement(fixture.nativeElement);
+      expect(getDOM().getInnerHTML(el)).toContain('"ng-reflect-ng-if": "true"');
+    });
+
+    it('should add and remove fragments', () => {
+      const fixture =
+          TestBed
+              .overrideTemplate(MyComp2, '<ng-container *ngIf="ctxBoolProp">hello</ng-container>')
+              .createComponent(MyComp2);
+
+      const rootEl = getRenderElement(fixture.nativeElement);
+      expect(rootEl).toHaveText('');
+
+      fixture.componentInstance.ctxBoolProp = true;
+      fixture.detectChanges();
+      expect(rootEl).toHaveText('hello');
+
+      fixture.componentInstance.ctxBoolProp = false;
+      fixture.detectChanges();
+      expect(rootEl).toHaveText('');
+    });
+
+    if (getDOM().supportsDOMEvents()) {
+      it('should listen to events', () => {
+        const fixture = TestBed.overrideTemplate(MyComp2, '<input (change)="ctxNumProp = 1">')
+                            .createComponent(MyComp2);
+
+        const el = fixture.debugElement.children[0];
+        dispatchEvent(getRenderElement(el.nativeElement), 'change');
+        expect(fixture.componentInstance.ctxNumProp).toBe(1);
+
+        fixture.destroy();
+      });
+    }
+  });
+}
+
+@Component({selector: 'my-comp'})
+class MyComp2 {
+  ctxProp = 'initial value';
+  ctxNumProp = 0;
+  ctxBoolProp = false;
+}
+
+function createWebWorkerBrokerFactory(
+    messageBuses: PairedMessageBuses, wwSerializer: Serializer, uiSerializer: Serializer,
+    domRendererFactory: DomRendererFactory2,
+    uiRenderStore: RenderStore): ClientMessageBrokerFactory {
+  const uiMessageBus = messageBuses.ui;
+  const wwMessageBus = messageBuses.worker;
+
+  // set up the worker side
+  const wwBrokerFactory = new (ClientMessageBrokerFactory as any)(wwMessageBus, wwSerializer);
+
+  // set up the ui side
+  const uiBrokerFactory = new (ServiceMessageBrokerFactory as any)(uiMessageBus, uiSerializer);
+  const renderer = new MessageBasedRenderer2(
+      uiBrokerFactory, uiMessageBus, uiSerializer, uiRenderStore, domRendererFactory);
+  renderer.start();
+
+  return wwBrokerFactory;
+}
+
+function createWebWorkerRendererFactory2(
+    workerSerializer: Serializer, uiSerializer: Serializer, domRendererFactory: DomRendererFactory2,
+    uiRenderStore: RenderStore, workerRenderStore: RenderStore): RendererFactory2 {
+  const messageBuses = createPairedMessageBuses();
+  const brokerFactory = createWebWorkerBrokerFactory(
+      messageBuses, workerSerializer, uiSerializer, domRendererFactory, uiRenderStore);
+
+  const rendererFactory =
+      new RenderFactory(brokerFactory, messageBuses.worker, workerSerializer, workerRenderStore);
+
+  return rendererFactory;
+}
+
+class RenderFactory extends WebWorkerRendererFactory2 {
+  createRenderer(element: any, type: RendererType2|null): Renderer2 {
+    lastCreatedRenderer = super.createRenderer(element, type);
+    return lastCreatedRenderer;
+  }
+}
+
+function isOldIE() {
+  // note that this only applies to older IEs (not edge)
+  return (window as any).document['documentMode'] ? true : false;
+}
diff --git a/packages/platform-webworker/test/web_workers/worker/spies.ts b/packages/platform-webworker/test/web_workers/worker/spies.ts
new file mode 100644
index 000000000000..507e9bd9d49e
--- /dev/null
+++ b/packages/platform-webworker/test/web_workers/worker/spies.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
+ */
+
+import {SpyObject} from '@angular/core/testing/src/testing_internal';
+import {ClientMessageBroker} from '@angular/platform-webworker/src/web_workers/shared/client_message_broker';
+
+export class SpyMessageBroker extends SpyObject {
+  constructor() { super(ClientMessageBroker); }
+}
diff --git a/packages/platform-webworker/tsconfig-build.json b/packages/platform-webworker/tsconfig-build.json
new file mode 100644
index 000000000000..a62277f4cd18
--- /dev/null
+++ b/packages/platform-webworker/tsconfig-build.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/common": ["../../dist/packages/common"],
+      "@angular/platform-browser": ["../../dist/packages/platform-browser"]
+    },
+    "outDir": "../../dist/packages/platform-webworker"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "platform-webworker.js",
+    "flatModuleId": "@angular/platform-webworker"
+  }
+}
diff --git a/packages/private/testing/BUILD.bazel b/packages/private/testing/BUILD.bazel
new file mode 100644
index 000000000000..6383269e2de3
--- /dev/null
+++ b/packages/private/testing/BUILD.bazel
@@ -0,0 +1,16 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+    ),
+    module_name = "@angular/private/testing",
+    deps = [
+        "//packages/core",
+    ],
+)
diff --git a/packages/private/testing/index.ts b/packages/private/testing/index.ts
new file mode 100644
index 000000000000..c13a1acc3b3c
--- /dev/null
+++ b/packages/private/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 './src/render3';
diff --git a/packages/private/testing/src/render3.ts b/packages/private/testing/src/render3.ts
new file mode 100644
index 000000000000..94f359be179b
--- /dev/null
+++ b/packages/private/testing/src/render3.ts
@@ -0,0 +1,123 @@
+/**
+ * @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
+ */
+
+/**
+* Wraps a function in a new function which sets up document and HTML for running a test.
+*
+* This function is intended to wrap an existing testing function. The wrapper
+* adds HTML to the `body` element of the `document` and subsequently tears it down.
+*
+* This function is intended to be used with `async await` and `Promise`s. If the wrapped
+* function returns a promise (or is `async`) then the teardown is delayed until that `Promise`
+* is resolved.
+*
+* On `node` this function detects if `document` is present and if not it will create one by
+* loading `domino` and installing it.
+*
+* Example:
+*
+* ```
+* describe('something', () => {
+*   it('should do something', withBody('<my-app></my-app>', async () => {
+*     const myApp = renderComponent(MyApp);
+*     await whenRendered(myApp);
+*     expect(getRenderedText(myApp)).toEqual('Hello World!');
+*   }));
+* });
+* ```
+*
+* @param html HTML which should be inserted into `body` of the `document`.
+* @param blockFn function to wrap. The function can return promise or be `async`.
+* @experimental
+*/
+export function withBody<T extends Function>(html: string, blockFn: T): T {
+  return function(done: DoneFn) {
+    ensureDocument();
+    if (typeof blockFn === 'function') {
+      document.body.innerHTML = html;
+      const blockReturn = blockFn();
+      if (blockReturn instanceof Promise) {
+        blockReturn.then(done, done.fail);
+      } else {
+        done();
+      }
+    }
+  } as any;
+}
+
+let savedDocument: Document|undefined = undefined;
+let savedRequestAnimationFrame: ((callback: FrameRequestCallback) => number)|undefined = undefined;
+let savedNode: typeof Node|undefined = undefined;
+let requestAnimationFrameCount = 0;
+
+/**
+ * System.js uses regexp to look for `require` statements. `domino` has to be
+ * extracted into a constant so that the regexp in the System.js does not match
+ * and does not try to load domino in the browser.
+ */
+const domino: any = (function(domino) {
+  if (typeof global == 'object' && global.process && typeof require == 'function') {
+    try {
+      return require(domino);
+    } catch (e) {
+      // It is possible that we don't have domino available in which case just give up.
+    }
+  }
+  // Seems like we don't have domino, give up.
+  return null;
+})('domino');
+
+/**
+ * Ensure that global has `Document` if we are in node.js
+ * @experimental
+ */
+export function ensureDocument(): void {
+  if (domino) {
+    // we are in node.js.
+    const window = domino.createWindow('', 'http://localhost');
+    savedDocument = (global as any).document;
+    (global as any).window = window;
+    (global as any).document = window.document;
+    // Trick to avoid Event patching from
+    // https://github.com/angular/angular/blob/7cf5e95ac9f0f2648beebf0d5bd9056b79946970/packages/platform-browser/src/dom/events/dom_events.ts#L112-L132
+    // It fails with Domino with TypeError: Cannot assign to read only property
+    // 'stopImmediatePropagation' of object '#<Event>'
+    (global as any).Event = null;
+    savedNode = (global as any).Node;
+    (global as any).Node = domino.impl.Node;
+
+    savedRequestAnimationFrame = (global as any).requestAnimationFrame;
+    (global as any).requestAnimationFrame = function(cb: FrameRequestCallback): number {
+      setImmediate(cb);
+      return requestAnimationFrameCount++;
+    };
+  }
+}
+
+/**
+ * Restore the state of `Document` between tests.
+ * @experimental
+ */
+export function cleanupDocument(): void {
+  if (savedDocument) {
+    (global as any).document = savedDocument;
+    (global as any).window = undefined;
+    savedDocument = undefined;
+  }
+  if (savedNode) {
+    (global as any).Node = savedNode;
+    savedNode = undefined;
+  }
+  if (savedRequestAnimationFrame) {
+    (global as any).requestAnimationFrame = savedRequestAnimationFrame;
+    savedRequestAnimationFrame = undefined;
+  }
+}
+
+if (typeof beforeEach == 'function') beforeEach(ensureDocument);
+if (typeof afterEach == 'function') beforeEach(cleanupDocument);
diff --git a/packages/rollup.config.js b/packages/rollup.config.js
new file mode 100644
index 000000000000..af011b96c2df
--- /dev/null
+++ b/packages/rollup.config.js
@@ -0,0 +1,13 @@
+/**
+ * @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 sourcemaps = require('rollup-plugin-sourcemaps');
+
+module.exports = {
+  plugins: [sourcemaps()]
+};
diff --git a/packages/router/.gitignore b/packages/router/.gitignore
new file mode 100644
index 000000000000..4cdd7657e5f8
--- /dev/null
+++ b/packages/router/.gitignore
@@ -0,0 +1,6 @@
+node_modules/
+dist/
+typings/
+npm-debug.log
+.idea/
+package
\ No newline at end of file
diff --git a/packages/router/BUILD.bazel b/packages/router/BUILD.bazel
new file mode 100644
index 000000000000..17ecee93c93d
--- /dev/null
+++ b/packages/router/BUILD.bazel
@@ -0,0 +1,41 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "router",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/router",
+    deps = [
+        "//packages/common",
+        "//packages/core",
+        "//packages/platform-browser",
+        "@rxjs",
+        "@rxjs//operators",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "//packages/router/testing:package.json",
+        "//packages/router/upgrade:package.json",
+    ],
+    entry_point = "packages/router/index.js",
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "release-with-framework",
+    ],
+    deps = [
+        ":router",
+        "//packages/router/testing",
+        "//packages/router/upgrade",
+    ],
+)
diff --git a/packages/router/LICENSE b/packages/router/LICENSE
new file mode 100644
index 000000000000..26db104f5fbd
--- /dev/null
+++ b/packages/router/LICENSE
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2017-2018 Google, Inc. http://angular.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
\ No newline at end of file
diff --git a/packages/router/README.md b/packages/router/README.md
new file mode 100644
index 000000000000..b56a7b5a8be2
--- /dev/null
+++ b/packages/router/README.md
@@ -0,0 +1,25 @@
+Angular Router
+=========
+
+Managing state transitions is one of the hardest parts of building applications. This is especially true on the web, where you also need to ensure that the state is reflected in the URL. In addition, we often want to split applications into multiple bundles and load them on demand. Doing this transparently isn’t trivial.
+
+The Angular router is designed to solve these problems. Using the router, you can declaratively specify application state, manage state transitions while taking care of the URL, and load components on demand.
+
+## Overview
+Read the overview of the Router [here](https://vsavkin.com/angular-2-router-d9e30599f9ea).
+
+## Guide
+Read the dev guide [here](https://angular.io/docs/ts/latest/guide/router.html).
+
+## Local development
+
+```
+# keep @angular/router fresh
+$ ./scripts/karma.sh
+
+# keep @angular/core fresh
+$ ../../../node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w
+
+# start karma
+$ ./scripts/karma.sh
+```
diff --git a/packages/router/index.ts b/packages/router/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/router/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';
diff --git a/packages/router/karma-test-shim.js b/packages/router/karma-test-shim.js
new file mode 100644
index 000000000000..2d4304e5a058
--- /dev/null
+++ b/packages/router/karma-test-shim.js
@@ -0,0 +1,86 @@
+/**
+ * @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
+ */
+
+/*global jasmine, __karma__, window*/
+Error.stackTraceLimit = 5;
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
+__karma__.loaded = function() {};
+
+window.isNode = false;
+window.isBrowser = true;
+
+function isJsFile(path) {
+  return path.slice(-3) == '.js';
+}
+
+function isSpecFile(path) {
+  return path.slice(-7) == 'spec.js';
+}
+
+function isBuiltFile(path) {
+  var builtPath = '/base/dist/';
+  return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
+}
+
+var allSpecFiles = Object.keys(window.__karma__.files).filter(isSpecFile).filter(isBuiltFile);
+
+// Load our SystemJS configuration.
+System.config({
+  baseURL: '/base',
+});
+
+System.config({
+  map: {
+    '@angular': 'dist/all/@angular',
+    'rxjs': 'node_modules/rxjs',
+  },
+  packages: {
+    '@angular/core/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+    '@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': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/upgrade/static': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/router/upgrade': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/router/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs': {main: 'index.js', defaultExtension: 'js'},
+  }
+});
+
+Promise
+    .all([
+      System.import('@angular/core/testing'),
+      System.import('@angular/platform-browser-dynamic/testing')
+    ])
+    .then(function(providers) {
+      var testing = providers[0];
+      var testingBrowser = providers[1];
+
+      testing.TestBed.initTestEnvironment(
+          testingBrowser.BrowserDynamicTestingModule,
+          testingBrowser.platformBrowserDynamicTesting());
+
+    })
+    .then(function() {
+      // Finally, load all spec files.
+      // This will run the tests directly.
+      return Promise.all(
+          allSpecFiles.map(function(moduleName) { return System.import(moduleName); }));
+    })
+    .then(__karma__.start, function(v) { console.error(v); });
diff --git a/packages/router/karma.conf.js b/packages/router/karma.conf.js
new file mode 100644
index 000000000000..758973b9ce1e
--- /dev/null
+++ b/packages/router/karma.conf.js
@@ -0,0 +1,112 @@
+/**
+ * @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 browserProvidersConf = require('../../browser-providers.conf');
+const {generateSeed} = require('../../tools/jasmine-seed-generator');
+
+// Karma configuration
+module.exports = function(config) {
+  config.set({
+
+    basePath: '../../',
+
+    frameworks: ['jasmine'],
+
+    client: {
+      jasmine: {
+        random: true,
+        seed: generateSeed('router/karma.conf'),
+      },
+    },
+
+    files: [
+      // Polyfills.
+      'node_modules/core-js/client/core.js',
+      'node_modules/reflect-metadata/Reflect.js',
+      'shims_for_IE.js',
+
+      // System.js for module loading
+      'node_modules/systemjs/dist/system-polyfills.js',
+      'node_modules/systemjs/dist/system.src.js',
+
+      // Zone.js dependencies
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/zone.js/dist/zone-testing.js',
+
+      {pattern: 'node_modules/rxjs/**/*', included: false, watched: false},
+
+      // shim
+      {pattern: 'packages/router/karma-test-shim.js', included: true, watched: true},
+
+      // Angular modules
+      {pattern: 'dist/all/@angular/core/*.js', included: false, watched: false},
+      {pattern: 'dist/all/@angular/core/src/**/*.js', included: false, watched: false},
+      {pattern: 'dist/all/@angular/core/testing/**/*.js', included: false, watched: false},
+
+      {pattern: 'dist/all/@angular/common/*.js', included: false, watched: false},
+      {pattern: 'dist/all/@angular/common/src/**/*.js', included: false, watched: false},
+      {pattern: 'dist/all/@angular/common/testing/**/*.js', included: false, watched: false},
+
+      {pattern: 'dist/all/@angular/compiler/*.js', included: false, watched: false},
+      {pattern: 'dist/all/@angular/compiler/src/**/*.js', included: false, watched: false},
+      {pattern: 'dist/all/@angular/compiler/testing/**/*.js', included: false, watched: false},
+
+      {pattern: 'dist/all/@angular/platform-browser/*.js', included: false, watched: false},
+      {pattern: 'dist/all/@angular/platform-browser/src/**/*.js', included: false, watched: false},
+      {
+        pattern: 'dist/all/@angular/platform-browser/testing/**/*.js',
+        included: false,
+        watched: false
+      },
+
+      {pattern: 'dist/all/@angular/platform-browser-dynamic/*.js', included: false, watched: false},
+      {
+        pattern: 'dist/all/@angular/platform-browser-dynamic/src/**/*.js',
+        included: false,
+        watched: false
+      },
+      {
+        pattern: 'dist/all/@angular/platform-browser-dynamic/testing/**/*.js',
+        included: false,
+        watched: false
+      },
+
+      {pattern: 'dist/all/@angular/upgrade/static/*.js', included: false, watched: false},
+      {pattern: 'dist/all/@angular/upgrade/static/src/**/*.js', included: false, watched: false},
+
+      // Router
+      {pattern: 'dist/all/@angular/router/**/*.js', included: false, watched: true}
+    ],
+
+    customLaunchers: browserProvidersConf.customLaunchers,
+
+    plugins: [
+      'karma-jasmine',
+      'karma-browserstack-launcher',
+      'karma-sauce-launcher',
+      'karma-chrome-launcher',
+      'karma-sourcemap-loader',
+    ],
+
+    preprocessors: {
+      '**/*.js': ['sourcemap'],
+    },
+
+    reporters: ['dots'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    captureTimeout: 60000,
+    browserDisconnectTimeout: 60000,
+    browserDisconnectTolerance: 3,
+    browserNoActivityTimeout: 60000,
+  });
+};
diff --git a/packages/router/package.json b/packages/router/package.json
new file mode 100644
index 000000000000..115d685b8521
--- /dev/null
+++ b/packages/router/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@angular/router",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - the routing library",
+  "main": "./bundles/router.umd.js",
+  "module": "./fesm5/router.js",
+  "es2015": "./fesm2015/router.js",
+  "esm5": "./esm5/router.js",
+  "esm2015": "./esm2015/router.js",
+  "fesm5": "./fesm5/router.js",
+  "fesm2015": "./fesm2015/router.js",
+  "typings": "./router.d.ts",
+  "keywords": [
+    "angular",
+    "router"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/angular/angular.git"
+  },
+  "author": "angular",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/angular/issues"
+  },
+  "homepage": "https://github.com/angular/angular/tree/master/packages/router",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/common": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser": "0.0.0-PLACEHOLDER",
+    "rxjs": "^6.0.0"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/router/public_api.ts b/packages/router/public_api.ts
new file mode 100644
index 000000000000..778427176d02
--- /dev/null
+++ b/packages/router/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/index';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/router/rollup.config.js b/packages/router/rollup.config.js
new file mode 100644
index 000000000000..4bdd65fbd9fa
--- /dev/null
+++ b/packages/router/rollup.config.js
@@ -0,0 +1,30 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  'rxjs': 'rxjs',
+  'rxjs/operators': 'rxjs.operators',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/router/fesm5/router.js',
+  dest: '../../dist/packages-dist/router/bundles/router.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/router'},
+  moduleName: 'ng.router',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/router/scripts/build.sh b/packages/router/scripts/build.sh
new file mode 100755
index 000000000000..74a433be870e
--- /dev/null
+++ b/packages/router/scripts/build.sh
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+set -e -o pipefail
+../../../node_modules/.bin/tsc -w
\ No newline at end of file
diff --git a/packages/router/scripts/karma.sh b/packages/router/scripts/karma.sh
new file mode 100755
index 000000000000..1d4c0ecc1f5f
--- /dev/null
+++ b/packages/router/scripts/karma.sh
@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+../../../node_modules/.bin/karma start
\ No newline at end of file
diff --git a/packages/router/src/apply_redirects.ts b/packages/router/src/apply_redirects.ts
new file mode 100644
index 000000000000..81e4ba36eac1
--- /dev/null
+++ b/packages/router/src/apply_redirects.ts
@@ -0,0 +1,525 @@
+/**
+ * @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, NgModuleRef} from '@angular/core';
+import {EmptyError, Observable, Observer, from, of } from 'rxjs';
+import {catchError, concatAll, first, map, mergeMap} from 'rxjs/operators';
+
+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 {
+  public segmentGroup: UrlSegmentGroup|null;
+
+  constructor(segmentGroup?: UrlSegmentGroup) { this.segmentGroup = segmentGroup || null; }
+}
+
+class AbsoluteRedirect {
+  constructor(public urlTree: UrlTree) {}
+}
+
+function noMatch(segmentGroup: UrlSegmentGroup): Observable<UrlSegmentGroup> {
+  return new Observable<UrlSegmentGroup>(
+      (obs: Observer<UrlSegmentGroup>) => obs.error(new NoMatch(segmentGroup)));
+}
+
+function absoluteRedirect(newTree: UrlTree): Observable<any> {
+  return new Observable<UrlSegmentGroup>(
+      (obs: Observer<UrlSegmentGroup>) => obs.error(new AbsoluteRedirect(newTree)));
+}
+
+function namedOutletsRedirect(redirectTo: string): Observable<any> {
+  return new Observable<UrlSegmentGroup>(
+      (obs: Observer<UrlSegmentGroup>) => obs.error(new Error(
+          `Only absolute redirects can have named outlets. redirectTo: '${redirectTo}'`)));
+}
+
+function canLoadFails(route: Route): Observable<LoadedRouterConfig> {
+  return new Observable<LoadedRouterConfig>(
+      (obs: Observer<LoadedRouterConfig>) => obs.error(navigationCancelingError(
+          `Cannot load children because the guard of the route "path: '${route.path}'" returned false`)));
+}
+
+/**
+ * Returns the `UrlTree` with the redirection applied.
+ *
+ * Lazy modules are loaded along the way.
+ */
+export function applyRedirects(
+    moduleInjector: Injector, configLoader: RouterConfigLoader, urlSerializer: UrlSerializer,
+    urlTree: UrlTree, config: Routes): Observable<UrlTree> {
+  return new ApplyRedirects(moduleInjector, configLoader, urlSerializer, urlTree, config).apply();
+}
+
+class ApplyRedirects {
+  private allowRedirects: boolean = true;
+  private ngModule: NgModuleRef<any>;
+
+  constructor(
+      moduleInjector: Injector, private configLoader: RouterConfigLoader,
+      private urlSerializer: UrlSerializer, private urlTree: UrlTree, private config: Routes) {
+    this.ngModule = moduleInjector.get(NgModuleRef);
+  }
+
+  apply(): Observable<UrlTree> {
+    const expanded$ =
+        this.expandSegmentGroup(this.ngModule, this.config, this.urlTree.root, PRIMARY_OUTLET);
+    const urlTrees$ = expanded$.pipe(
+        map((rootSegmentGroup: UrlSegmentGroup) => this.createUrlTree(
+                rootSegmentGroup, this.urlTree.queryParams, this.urlTree.fragment !)));
+    return urlTrees$.pipe(catchError((e: any) => {
+      if (e instanceof AbsoluteRedirect) {
+        // after an absolute redirect we do not apply any more redirects!
+        this.allowRedirects = false;
+        // we need to run matching, so we can fetch all lazy-loaded modules
+        return this.match(e.urlTree);
+      }
+
+      if (e instanceof NoMatch) {
+        throw this.noMatchError(e);
+      }
+
+      throw e;
+    }));
+  }
+
+  private match(tree: UrlTree): Observable<UrlTree> {
+    const expanded$ =
+        this.expandSegmentGroup(this.ngModule, this.config, tree.root, PRIMARY_OUTLET);
+    const mapped$ = expanded$.pipe(
+        map((rootSegmentGroup: UrlSegmentGroup) =>
+                this.createUrlTree(rootSegmentGroup, tree.queryParams, tree.fragment !)));
+    return mapped$.pipe(catchError((e: any): Observable<UrlTree> => {
+      if (e instanceof NoMatch) {
+        throw this.noMatchError(e);
+      }
+
+      throw e;
+    }));
+  }
+
+  private noMatchError(e: NoMatch): any {
+    return new Error(`Cannot match any routes. URL Segment: '${e.segmentGroup}'`);
+  }
+
+  private createUrlTree(rootCandidate: UrlSegmentGroup, queryParams: Params, fragment: string):
+      UrlTree {
+    const root = rootCandidate.segments.length > 0 ?
+        new UrlSegmentGroup([], {[PRIMARY_OUTLET]: rootCandidate}) :
+        rootCandidate;
+    return new UrlTree(root, queryParams, fragment);
+  }
+
+  private expandSegmentGroup(
+      ngModule: NgModuleRef<any>, routes: Route[], segmentGroup: UrlSegmentGroup,
+      outlet: string): Observable<UrlSegmentGroup> {
+    if (segmentGroup.segments.length === 0 && segmentGroup.hasChildren()) {
+      return this.expandChildren(ngModule, routes, segmentGroup)
+          .pipe(map((children: any) => new UrlSegmentGroup([], children)));
+    }
+
+    return this.expandSegment(ngModule, segmentGroup, routes, segmentGroup.segments, outlet, true);
+  }
+
+  // Recursively expand segment groups for all the child outlets
+  private expandChildren(
+      ngModule: NgModuleRef<any>, routes: Route[],
+      segmentGroup: UrlSegmentGroup): Observable<{[name: string]: UrlSegmentGroup}> {
+    return waitForMap(
+        segmentGroup.children,
+        (childOutlet, child) => this.expandSegmentGroup(ngModule, routes, child, childOutlet));
+  }
+
+  private expandSegment(
+      ngModule: NgModuleRef<any>, segmentGroup: UrlSegmentGroup, routes: Route[],
+      segments: UrlSegment[], outlet: string,
+      allowRedirects: boolean): Observable<UrlSegmentGroup> {
+    return of (...routes).pipe(
+        map((r: any) => {
+          const expanded$ = this.expandSegmentAgainstRoute(
+              ngModule, segmentGroup, routes, r, segments, outlet, allowRedirects);
+          return expanded$.pipe(catchError((e: any) => {
+            if (e instanceof NoMatch) {
+              // TODO(i): this return type doesn't match the declared Observable<UrlSegmentGroup> -
+              // talk to Jason
+              return of (null) as any;
+            }
+            throw e;
+          }));
+        }),
+        concatAll(), first((s: any) => !!s), catchError((e: any, _: any) => {
+          if (e instanceof EmptyError || e.name === 'EmptyError') {
+            if (this.noLeftoversInUrl(segmentGroup, segments, outlet)) {
+              return of (new UrlSegmentGroup([], {}));
+            }
+            throw new NoMatch(segmentGroup);
+          }
+          throw e;
+        }));
+  }
+
+  private noLeftoversInUrl(segmentGroup: UrlSegmentGroup, segments: UrlSegment[], outlet: string):
+      boolean {
+    return segments.length === 0 && !segmentGroup.children[outlet];
+  }
+
+  private expandSegmentAgainstRoute(
+      ngModule: NgModuleRef<any>, segmentGroup: UrlSegmentGroup, routes: Route[], route: Route,
+      paths: UrlSegment[], outlet: string, allowRedirects: boolean): Observable<UrlSegmentGroup> {
+    if (getOutlet(route) !== outlet) {
+      return noMatch(segmentGroup);
+    }
+
+    if (route.redirectTo === undefined) {
+      return this.matchSegmentAgainstRoute(ngModule, segmentGroup, route, paths);
+    }
+
+    if (allowRedirects && this.allowRedirects) {
+      return this.expandSegmentAgainstRouteUsingRedirect(
+          ngModule, segmentGroup, routes, route, paths, outlet);
+    }
+
+    return noMatch(segmentGroup);
+  }
+
+  private expandSegmentAgainstRouteUsingRedirect(
+      ngModule: NgModuleRef<any>, segmentGroup: UrlSegmentGroup, routes: Route[], route: Route,
+      segments: UrlSegment[], outlet: string): Observable<UrlSegmentGroup> {
+    if (route.path === '**') {
+      return this.expandWildCardWithParamsAgainstRouteUsingRedirect(
+          ngModule, routes, route, outlet);
+    }
+
+    return this.expandRegularSegmentAgainstRouteUsingRedirect(
+        ngModule, segmentGroup, routes, route, segments, outlet);
+  }
+
+  private expandWildCardWithParamsAgainstRouteUsingRedirect(
+      ngModule: NgModuleRef<any>, routes: Route[], route: Route,
+      outlet: string): Observable<UrlSegmentGroup> {
+    const newTree = this.applyRedirectCommands([], route.redirectTo !, {});
+    if (route.redirectTo !.startsWith('/')) {
+      return absoluteRedirect(newTree);
+    }
+
+    return this.lineralizeSegments(route, newTree).pipe(mergeMap((newSegments: UrlSegment[]) => {
+      const group = new UrlSegmentGroup(newSegments, {});
+      return this.expandSegment(ngModule, group, routes, newSegments, outlet, false);
+    }));
+  }
+
+  private expandRegularSegmentAgainstRouteUsingRedirect(
+      ngModule: NgModuleRef<any>, segmentGroup: UrlSegmentGroup, routes: Route[], route: Route,
+      segments: UrlSegment[], outlet: string): Observable<UrlSegmentGroup> {
+    const {matched, consumedSegments, lastChild, positionalParamSegments} =
+        match(segmentGroup, route, segments);
+    if (!matched) return noMatch(segmentGroup);
+
+    const newTree = this.applyRedirectCommands(
+        consumedSegments, route.redirectTo !, <any>positionalParamSegments);
+    if (route.redirectTo !.startsWith('/')) {
+      return absoluteRedirect(newTree);
+    }
+
+    return this.lineralizeSegments(route, newTree).pipe(mergeMap((newSegments: UrlSegment[]) => {
+      return this.expandSegment(
+          ngModule, segmentGroup, routes, newSegments.concat(segments.slice(lastChild)), outlet,
+          false);
+    }));
+  }
+
+  private matchSegmentAgainstRoute(
+      ngModule: NgModuleRef<any>, rawSegmentGroup: UrlSegmentGroup, route: Route,
+      segments: UrlSegment[]): Observable<UrlSegmentGroup> {
+    if (route.path === '**') {
+      if (route.loadChildren) {
+        return this.configLoader.load(ngModule.injector, route)
+            .pipe(map((cfg: LoadedRouterConfig) => {
+              route._loadedConfig = cfg;
+              return new UrlSegmentGroup(segments, {});
+            }));
+      }
+
+      return of (new UrlSegmentGroup(segments, {}));
+    }
+
+    const {matched, consumedSegments, lastChild} = match(rawSegmentGroup, route, segments);
+    if (!matched) return noMatch(rawSegmentGroup);
+
+    const rawSlicedSegments = segments.slice(lastChild);
+    const childConfig$ = this.getChildConfig(ngModule, route);
+
+    return childConfig$.pipe(mergeMap((routerConfig: LoadedRouterConfig) => {
+      const childModule = routerConfig.module;
+      const childConfig = routerConfig.routes;
+
+      const {segmentGroup, slicedSegments} =
+          split(rawSegmentGroup, consumedSegments, rawSlicedSegments, childConfig);
+
+      if (slicedSegments.length === 0 && segmentGroup.hasChildren()) {
+        const expanded$ = this.expandChildren(childModule, childConfig, segmentGroup);
+        return expanded$.pipe(
+            map((children: any) => new UrlSegmentGroup(consumedSegments, children)));
+      }
+
+      if (childConfig.length === 0 && slicedSegments.length === 0) {
+        return of (new UrlSegmentGroup(consumedSegments, {}));
+      }
+
+      const expanded$ = this.expandSegment(
+          childModule, segmentGroup, childConfig, slicedSegments, PRIMARY_OUTLET, true);
+      return expanded$.pipe(
+          map((cs: UrlSegmentGroup) =>
+                  new UrlSegmentGroup(consumedSegments.concat(cs.segments), cs.children)));
+    }));
+  }
+
+  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));
+    }
+
+    if (route.loadChildren) {
+      // lazy children belong to the loaded module
+      if (route._loadedConfig !== undefined) {
+        return of (route._loadedConfig);
+      }
+
+      return runCanLoadGuard(ngModule.injector, route).pipe(mergeMap((shouldLoad: boolean) => {
+        if (shouldLoad) {
+          return this.configLoader.load(ngModule.injector, route)
+              .pipe(map((cfg: LoadedRouterConfig) => {
+                route._loadedConfig = cfg;
+                return cfg;
+              }));
+        }
+        return canLoadFails(route);
+      }));
+    }
+
+    return of (new LoadedRouterConfig([], ngModule));
+  }
+
+  private lineralizeSegments(route: Route, urlTree: UrlTree): Observable<UrlSegment[]> {
+    let res: UrlSegment[] = [];
+    let c = urlTree.root;
+    while (true) {
+      res = res.concat(c.segments);
+      if (c.numberOfChildren === 0) {
+        return of (res);
+      }
+
+      if (c.numberOfChildren > 1 || !c.children[PRIMARY_OUTLET]) {
+        return namedOutletsRedirect(route.redirectTo !);
+      }
+
+      c = c.children[PRIMARY_OUTLET];
+    }
+  }
+
+  private applyRedirectCommands(
+      segments: UrlSegment[], redirectTo: string, posParams: {[k: string]: UrlSegment}): UrlTree {
+    return this.applyRedirectCreatreUrlTree(
+        redirectTo, this.urlSerializer.parse(redirectTo), segments, posParams);
+  }
+
+  private applyRedirectCreatreUrlTree(
+      redirectTo: string, urlTree: UrlTree, segments: UrlSegment[],
+      posParams: {[k: string]: UrlSegment}): UrlTree {
+    const newRoot = this.createSegmentGroup(redirectTo, urlTree.root, segments, posParams);
+    return new UrlTree(
+        newRoot, this.createQueryParams(urlTree.queryParams, this.urlTree.queryParams),
+        urlTree.fragment);
+  }
+
+  private createQueryParams(redirectToParams: Params, actualParams: Params): Params {
+    const res: Params = {};
+    forEach(redirectToParams, (v: any, k: string) => {
+      const copySourceValue = typeof v === 'string' && v.startsWith(':');
+      if (copySourceValue) {
+        const sourceName = v.substring(1);
+        res[k] = actualParams[sourceName];
+      } else {
+        res[k] = v;
+      }
+    });
+    return res;
+  }
+
+  private createSegmentGroup(
+      redirectTo: string, group: UrlSegmentGroup, segments: UrlSegment[],
+      posParams: {[k: string]: UrlSegment}): UrlSegmentGroup {
+    const updatedSegments = this.createSegments(redirectTo, group.segments, segments, posParams);
+
+    let children: {[n: string]: UrlSegmentGroup} = {};
+    forEach(group.children, (child: UrlSegmentGroup, name: string) => {
+      children[name] = this.createSegmentGroup(redirectTo, child, segments, posParams);
+    });
+
+    return new UrlSegmentGroup(updatedSegments, children);
+  }
+
+  private createSegments(
+      redirectTo: string, redirectToSegments: UrlSegment[], actualSegments: UrlSegment[],
+      posParams: {[k: string]: UrlSegment}): UrlSegment[] {
+    return redirectToSegments.map(
+        s => s.path.startsWith(':') ? this.findPosParam(redirectTo, s, posParams) :
+                                      this.findOrReturn(s, actualSegments));
+  }
+
+  private findPosParam(
+      redirectTo: string, redirectToUrlSegment: UrlSegment,
+      posParams: {[k: string]: UrlSegment}): UrlSegment {
+    const pos = posParams[redirectToUrlSegment.path.substring(1)];
+    if (!pos)
+      throw new Error(
+          `Cannot redirect to '${redirectTo}'. Cannot find '${redirectToUrlSegment.path}'.`);
+    return pos;
+  }
+
+  private findOrReturn(redirectToUrlSegment: UrlSegment, actualSegments: UrlSegment[]): UrlSegment {
+    let idx = 0;
+    for (const s of actualSegments) {
+      if (s.path === redirectToUrlSegment.path) {
+        actualSegments.splice(idx);
+        return s;
+      }
+      idx++;
+    }
+    return redirectToUrlSegment;
+  }
+}
+
+function runCanLoadGuard(moduleInjector: Injector, route: Route): Observable<boolean> {
+  const canLoad = route.canLoad;
+  if (!canLoad || canLoad.length === 0) return of (true);
+
+  const obs = from(canLoad).pipe(map((injectionToken: any) => {
+    const guard = moduleInjector.get(injectionToken);
+    return wrapIntoObservable(guard.canLoad ? guard.canLoad(route) : guard(route));
+  }));
+
+  return andObservables(obs);
+}
+
+function match(segmentGroup: UrlSegmentGroup, route: Route, segments: UrlSegment[]): {
+  matched: boolean,
+  consumedSegments: UrlSegment[],
+  lastChild: number,
+  positionalParamSegments: {[k: string]: UrlSegment}
+} {
+  if (route.path === '') {
+    if ((route.pathMatch === 'full') && (segmentGroup.hasChildren() || segments.length > 0)) {
+      return {matched: false, consumedSegments: [], lastChild: 0, positionalParamSegments: {}};
+    }
+
+    return {matched: true, consumedSegments: [], lastChild: 0, positionalParamSegments: {}};
+  }
+
+  const matcher = route.matcher || defaultUrlMatcher;
+  const res = matcher(segments, segmentGroup, route);
+
+  if (!res) {
+    return {
+      matched: false,
+      consumedSegments: <any[]>[],
+      lastChild: 0,
+      positionalParamSegments: {},
+    };
+  }
+
+  return {
+    matched: true,
+    consumedSegments: res.consumed !,
+    lastChild: res.consumed.length !,
+    positionalParamSegments: res.posParams !,
+  };
+}
+
+function split(
+    segmentGroup: UrlSegmentGroup, consumedSegments: UrlSegment[], slicedSegments: UrlSegment[],
+    config: Route[]) {
+  if (slicedSegments.length > 0 &&
+      containsEmptyPathRedirectsWithNamedOutlets(segmentGroup, slicedSegments, config)) {
+    const s = new UrlSegmentGroup(
+        consumedSegments, createChildrenForEmptySegments(
+                              config, new UrlSegmentGroup(slicedSegments, segmentGroup.children)));
+    return {segmentGroup: mergeTrivialChildren(s), slicedSegments: []};
+  }
+
+  if (slicedSegments.length === 0 &&
+      containsEmptyPathRedirects(segmentGroup, slicedSegments, config)) {
+    const s = new UrlSegmentGroup(
+        segmentGroup.segments, addEmptySegmentsToChildrenIfNeeded(
+                                   segmentGroup, slicedSegments, config, segmentGroup.children));
+    return {segmentGroup: mergeTrivialChildren(s), slicedSegments};
+  }
+
+  return {segmentGroup, slicedSegments};
+}
+
+function mergeTrivialChildren(s: UrlSegmentGroup): UrlSegmentGroup {
+  if (s.numberOfChildren === 1 && s.children[PRIMARY_OUTLET]) {
+    const c = s.children[PRIMARY_OUTLET];
+    return new UrlSegmentGroup(s.segments.concat(c.segments), c.children);
+  }
+
+  return s;
+}
+
+function addEmptySegmentsToChildrenIfNeeded(
+    segmentGroup: UrlSegmentGroup, slicedSegments: UrlSegment[], routes: Route[],
+    children: {[name: string]: UrlSegmentGroup}): {[name: string]: UrlSegmentGroup} {
+  const res: {[name: string]: UrlSegmentGroup} = {};
+  for (const r of routes) {
+    if (isEmptyPathRedirect(segmentGroup, slicedSegments, r) && !children[getOutlet(r)]) {
+      res[getOutlet(r)] = new UrlSegmentGroup([], {});
+    }
+  }
+  return {...children, ...res};
+}
+
+function createChildrenForEmptySegments(
+    routes: Route[], primarySegmentGroup: UrlSegmentGroup): {[name: string]: UrlSegmentGroup} {
+  const res: {[name: string]: UrlSegmentGroup} = {};
+  res[PRIMARY_OUTLET] = primarySegmentGroup;
+  for (const r of routes) {
+    if (r.path === '' && getOutlet(r) !== PRIMARY_OUTLET) {
+      res[getOutlet(r)] = new UrlSegmentGroup([], {});
+    }
+  }
+  return res;
+}
+
+function containsEmptyPathRedirectsWithNamedOutlets(
+    segmentGroup: UrlSegmentGroup, segments: UrlSegment[], routes: Route[]): boolean {
+  return routes.some(
+      r => isEmptyPathRedirect(segmentGroup, segments, r) && getOutlet(r) !== PRIMARY_OUTLET);
+}
+
+function containsEmptyPathRedirects(
+    segmentGroup: UrlSegmentGroup, segments: UrlSegment[], routes: Route[]): boolean {
+  return routes.some(r => isEmptyPathRedirect(segmentGroup, segments, r));
+}
+
+function isEmptyPathRedirect(
+    segmentGroup: UrlSegmentGroup, segments: UrlSegment[], r: Route): boolean {
+  if ((segmentGroup.hasChildren() || segments.length > 0) && r.pathMatch === 'full') {
+    return false;
+  }
+
+  return r.path === '' && r.redirectTo !== undefined;
+}
+
+function getOutlet(route: Route): string {
+  return route.outlet || PRIMARY_OUTLET;
+}
diff --git a/packages/router/src/components/empty_outlet.ts b/packages/router/src/components/empty_outlet.ts
new file mode 100644
index 000000000000..d5e99f5e6860
--- /dev/null
+++ b/packages/router/src/components/empty_outlet.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';
+
+/**
+ * This component is used internally within the router to be a placeholder when an empty
+ * router-outlet is needed. For example, with a config such as:
+ *
+ * `{path: 'parent', outlet: 'nav', children: [...]}`
+ *
+ * In order to render, there needs to be a component on this config, which will default
+ * to this `EmptyOutletComponent`.
+ */
+@Component({template: `<router-outlet></router-outlet>`})
+export class EmptyOutletComponent {
+}
\ No newline at end of file
diff --git a/packages/router/src/config.ts b/packages/router/src/config.ts
new file mode 100644
index 000000000000..047c73bf9cf9
--- /dev/null
+++ b/packages/router/src/config.ts
@@ -0,0 +1,491 @@
+/**
+ * @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 {NgModuleFactory, NgModuleRef, Type} from '@angular/core';
+import {Observable} from 'rxjs';
+import {EmptyOutletComponent} from './components/empty_outlet';
+import {PRIMARY_OUTLET} from './shared';
+import {UrlSegment, UrlSegmentGroup} from './url_tree';
+
+/**
+ * @description
+ *
+ * Represents router configuration.
+ *
+ * `Routes` is an array of route configurations. Each one has the following properties:
+ *
+ * - `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`.
+ * - `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.
+ * - `canActivate` is an array of DI tokens used to look up CanActivate handlers. See
+ *   `CanActivate` for more info.
+ * - `canActivateChild` is an array of DI tokens used to look up CanActivateChild handlers. See
+ *   `CanActivateChild` for more info.
+ * - `canDeactivate` is an array of DI tokens used to look up CanDeactivate handlers. See
+ *   `CanDeactivate` for more info.
+ * - `canLoad` is an array of DI tokens used to look up CanLoad handlers. See
+ *   `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 `Resolve` for more
+ *   info.
+ * - `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.
+ * - `loadChildren` is a reference to lazy loaded child routes. See `LoadChildren` for more
+ *   info.
+ *
+ * ### Simple Configuration
+ *
+ * ```
+ * [{
+ *   path: 'team/:id',
+  *  component: Team,
+ *   children: [{
+ *     path: 'user/:name',
+ *     component: User
+ *   }]
+ * }]
+ * ```
+ *
+ * When navigating to `/team/11/user/bob`, the router will create the team component with the user
+ * component in it.
+ *
+ * ### Multiple Outlets
+ *
+ * ```
+ * [{
+ *   path: 'team/:id',
+ *   component: Team
+ * }, {
+ *   path: 'chat/:user',
+ *   component: Chat
+ *   outlet: 'aux'
+ * }]
+ * ```
+ *
+ * When navigating to `/team/11(aux:chat/jim)`, the router will create the team component next to
+ * the chat component. The chat component will be placed into the aux outlet.
+ *
+ * ### Wild Cards
+ *
+ * ```
+ * [{
+ *   path: '**',
+ *   component: Sink
+ * }]
+ * ```
+ *
+ * Regardless of where you navigate to, the router will instantiate the sink component.
+ *
+ * ### Redirects
+ *
+ * ```
+ * [{
+ *   path: 'team/:id',
+ *   component: Team,
+ *   children: [{
+ *     path: 'legacy/user/:name',
+ *     redirectTo: 'user/:name'
+ *   }, {
+ *     path: 'user/:name',
+ *     component: User
+ *   }]
+ * }]
+ * ```
+ *
+ * When navigating to '/team/11/legacy/user/jim', the router will change the url to
+ * '/team/11/user/jim', and then will instantiate the team component with the user component
+ * in it.
+ *
+ * If the `redirectTo` value starts with a '/', then it is an absolute redirect. E.g., if in the
+ * example above we change the `redirectTo` to `/user/:name`, the result url will be '/user/jim'.
+ *
+ * ### Empty Path
+ *
+ * Empty-path route configurations can be used to instantiate components that do not 'consume'
+ * any url segments. Let's look at the following configuration:
+ *
+ * ```
+ * [{
+ *   path: 'team/:id',
+ *   component: Team,
+ *   children: [{
+ *     path: '',
+ *     component: AllUsers
+ *   }, {
+ *     path: 'user/:name',
+ *     component: User
+ *   }]
+ * }]
+ * ```
+ *
+ * When navigating to `/team/11`, the router will instantiate the AllUsers component.
+ *
+ * Empty-path routes can have children.
+ *
+ * ```
+ * [{
+ *   path: 'team/:id',
+ *   component: Team,
+ *   children: [{
+ *     path: '',
+ *     component: WrapperCmp,
+ *     children: [{
+ *       path: 'user/:name',
+ *       component: User
+ *     }]
+ *   }]
+ * }]
+ * ```
+ *
+ * When navigating to `/team/11/user/jim`, the router will instantiate the wrapper component with
+ * the user component in it.
+ *
+ * An empty path route inherits its parent's params and data. This is because it cannot have its
+ * own params, and, as a result, it often uses its parent's params and data as its own.
+ *
+ * ### Matching Strategy
+ *
+ * By default the router will look at what is left in the url, and check if it starts with
+ * the specified path (e.g., `/team/11/user` starts with `team/:id`).
+ *
+ * We can change the matching strategy to make sure that the path covers the whole unconsumed url,
+ * which is akin to `unconsumedUrl === path` or `$` regular expressions.
+ *
+ * This is particularly important when redirecting empty-path routes.
+ *
+ * ```
+ * [{
+ *   path: '',
+ *   pathMatch: 'prefix', //default
+ *   redirectTo: 'main'
+ * }, {
+ *   path: 'main',
+ *   component: Main
+ * }]
+ * ```
+ *
+ * Since an empty path is a prefix of any url, even when navigating to '/main', the router will
+ * still apply the redirect.
+ *
+ * If `pathMatch: full` is provided, the router will apply the redirect if and only if navigating to
+ * '/'.
+ *
+ * ```
+ * [{
+ *   path: '',
+ *   pathMatch: 'full',
+ *   redirectTo: 'main'
+ * }, {
+ *   path: 'main',
+ *   component: Main
+ * }]
+ * ```
+ *
+ * ### Componentless Routes
+ *
+ * It is useful at times to have the ability to share parameters between sibling components.
+ *
+ * Say we have two components--ChildCmp and AuxCmp--that we want to put next to each other and both
+ * of them require some id parameter.
+ *
+ * One way to do that would be to have a bogus parent component, so both the siblings can get the id
+ * parameter from it. This is not ideal. Instead, you can use a componentless route.
+ *
+ * ```
+ * [{
+ *    path: 'parent/:id',
+ *    children: [
+ *      { path: 'a', component: MainChild },
+ *      { path: 'b', component: AuxChild, outlet: 'aux' }
+ *    ]
+ * }]
+ * ```
+ *
+ * So when navigating to `parent/10/(a//aux:b)`, the route will instantiate the main child and aux
+ * child components next to each other. In this example, the application component
+ * has to have the primary and aux outlets defined.
+ *
+ * The router will also merge the `params`, `data`, and `resolve` of the componentless parent into
+ * the `params`, `data`, and `resolve` of the children. This is done because there is no component
+ * that can inject the activated route of the componentless parent.
+ *
+ * This is especially useful when child components are defined as follows:
+ *
+ * ```
+ * [{
+ *    path: 'parent/:id',
+ *    children: [
+ *      { path: '', component: MainChild },
+ *      { path: '', component: AuxChild, outlet: 'aux' }
+ *    ]
+ * }]
+ * ```
+ *
+ * With this configuration in place, navigating to '/parent/10' will create the main child and aux
+ * components.
+ *
+ * ### Lazy Loading
+ *
+ * Lazy loading speeds up our application load time by splitting it into multiple bundles, and
+ * loading them on demand. The router is designed to make lazy loading simple and easy. Instead of
+ * providing the children property, you can provide the `loadChildren` property, as follows:
+ *
+ * ```
+ * [{
+ *   path: 'team/:id',
+ *   component: Team,
+ *   loadChildren: 'team'
+ * }]
+ * ```
+ *
+ * The router will use registered NgModuleFactoryLoader to fetch an NgModule associated with 'team'.
+ * Then it will extract the set of routes defined in that NgModule, and will transparently add
+ * those routes to the main configuration.
+ *
+ */
+export type Routes = Route[];
+
+/**
+ * @description Represents the results of the URL matching.
+ *
+ * * `consumed` is an array of the consumed URL segments.
+ * * `posParams` is a map of positional parameters.
+ *
+ * @experimental
+ */
+export type UrlMatchResult = {
+  consumed: UrlSegment[]; posParams?: {[name: string]: UrlSegment};
+};
+
+/**
+ * @description
+ *
+ * A function matching URLs
+ *
+ * A custom URL matcher can be provided when a combination of `path` and `pathMatch` isn't
+ * expressive enough.
+ *
+ * For instance, the following matcher matches html files.
+ *
+ * ```
+ * export function htmlFiles(url: UrlSegment[]) {
+ *   return url.length === 1 && url[0].path.endsWith('.html') ? ({consumed: url}) : null;
+ * }
+ *
+ * export const routes = [{ matcher: htmlFiles, component: AnyComponent }];
+ * ```
+ *
+ * @experimental
+ */
+export type UrlMatcher = (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) =>
+    UrlMatchResult;
+
+/**
+ * @description
+ *
+ * Represents the static data associated with a particular route.
+ *
+ * See `Routes` for more details.
+ *
+ */
+export type Data = {
+  [name: string]: any
+};
+
+/**
+ * @description
+ *
+ * Represents the resolved data associated with a particular route.
+ *
+ * See `Routes` for more details.
+ *
+ */
+export type ResolveData = {
+  [name: string]: any
+};
+
+/**
+ * @description
+ *
+ * The type of `loadChildren`.
+ *
+ * See `Routes` for more details.
+ *
+ */
+export type LoadChildrenCallback = () =>
+    Type<any>| NgModuleFactory<any>| Promise<Type<any>>| Observable<Type<any>>;
+
+/**
+ * @description
+ *
+ * The type of `loadChildren`.
+ *
+ * See `Routes` for more details.
+ *
+ */
+export type LoadChildren = string | LoadChildrenCallback;
+
+/**
+ * @description
+ *
+ * The type of `queryParamsHandling`.
+ *
+ * See `RouterLink` for more details.
+ *
+ */
+export type QueryParamsHandling = 'merge' | 'preserve' | '';
+
+/**
+ * @description
+ *
+ * The type of `runGuardsAndResolvers`.
+ *
+ * See `Routes` for more details.
+ * @experimental
+ */
+export type RunGuardsAndResolvers = 'paramsChange' | 'paramsOrQueryParamsChange' | 'always';
+
+/**
+ * See `Routes` for more details.
+ *
+ */
+export interface Route {
+  path?: string;
+  pathMatch?: string;
+  matcher?: UrlMatcher;
+  component?: Type<any>;
+  redirectTo?: string;
+  outlet?: string;
+  canActivate?: any[];
+  canActivateChild?: any[];
+  canDeactivate?: any[];
+  canLoad?: any[];
+  data?: Data;
+  resolve?: ResolveData;
+  children?: Routes;
+  loadChildren?: LoadChildren;
+  runGuardsAndResolvers?: RunGuardsAndResolvers;
+  /**
+   * Filled for routes with `loadChildren` once the module has been loaded
+   * @internal
+   */
+  _loadedConfig?: LoadedRouterConfig;
+}
+
+export class LoadedRouterConfig {
+  constructor(public routes: Route[], public module: NgModuleRef<any>) {}
+}
+
+export function validateConfig(config: Routes, parentPath: string = ''): void {
+  // forEach doesn't iterate undefined values
+  for (let i = 0; i < config.length; i++) {
+    const route: Route = config[i];
+    const fullPath: string = getFullPath(parentPath, route);
+    validateNode(route, fullPath);
+  }
+}
+
+function validateNode(route: Route, fullPath: string): void {
+  if (!route) {
+    throw new Error(`
+      Invalid configuration of route '${fullPath}': Encountered undefined route.
+      The reason might be an extra comma.
+
+      Example:
+      const routes: Routes = [
+        { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+        { path: 'dashboard',  component: DashboardComponent },, << two commas
+        { path: 'detail/:id', component: HeroDetailComponent }
+      ];
+    `);
+  }
+  if (Array.isArray(route)) {
+    throw new Error(`Invalid configuration of route '${fullPath}': Array cannot be specified`);
+  }
+  if (!route.component && !route.children && !route.loadChildren &&
+      (route.outlet && route.outlet !== PRIMARY_OUTLET)) {
+    throw new Error(
+        `Invalid configuration of route '${fullPath}': a componentless route without children or loadChildren cannot have a named outlet set`);
+  }
+  if (route.redirectTo && route.children) {
+    throw new Error(
+        `Invalid configuration of route '${fullPath}': redirectTo and children cannot be used together`);
+  }
+  if (route.redirectTo && route.loadChildren) {
+    throw new Error(
+        `Invalid configuration of route '${fullPath}': redirectTo and loadChildren cannot be used together`);
+  }
+  if (route.children && route.loadChildren) {
+    throw new Error(
+        `Invalid configuration of route '${fullPath}': children and loadChildren cannot be used together`);
+  }
+  if (route.redirectTo && route.component) {
+    throw new Error(
+        `Invalid configuration of route '${fullPath}': redirectTo and component cannot be used together`);
+  }
+  if (route.path && route.matcher) {
+    throw new Error(
+        `Invalid configuration of route '${fullPath}': path and matcher cannot be used together`);
+  }
+  if (route.redirectTo === void 0 && !route.component && !route.children && !route.loadChildren) {
+    throw new Error(
+        `Invalid configuration of route '${fullPath}'. One of the following must be provided: component, redirectTo, children or loadChildren`);
+  }
+  if (route.path === void 0 && route.matcher === void 0) {
+    throw new Error(
+        `Invalid configuration of route '${fullPath}': routes must have either a path or a matcher specified`);
+  }
+  if (typeof route.path === 'string' && route.path.charAt(0) === '/') {
+    throw new Error(`Invalid configuration of route '${fullPath}': path cannot start with a slash`);
+  }
+  if (route.path === '' && route.redirectTo !== void 0 && route.pathMatch === void 0) {
+    const exp =
+        `The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.`;
+    throw new Error(
+        `Invalid configuration of route '{path: "${fullPath}", redirectTo: "${route.redirectTo}"}': please provide 'pathMatch'. ${exp}`);
+  }
+  if (route.pathMatch !== void 0 && route.pathMatch !== 'full' && route.pathMatch !== 'prefix') {
+    throw new Error(
+        `Invalid configuration of route '${fullPath}': pathMatch can only be set to 'prefix' or 'full'`);
+  }
+  if (route.children) {
+    validateConfig(route.children, fullPath);
+  }
+}
+
+function getFullPath(parentPath: string, currentRoute: Route): string {
+  if (!currentRoute) {
+    return parentPath;
+  }
+  if (!parentPath && !currentRoute.path) {
+    return '';
+  } else if (parentPath && !currentRoute.path) {
+    return `${parentPath}/`;
+  } else if (!parentPath && currentRoute.path) {
+    return currentRoute.path;
+  } else {
+    return `${parentPath}/${currentRoute.path}`;
+  }
+}
+
+/**
+ * Makes a copy of the config and adds any default required properties.
+ */
+export function standardizeConfig(r: Route): Route {
+  const children = r.children && r.children.map(standardizeConfig);
+  const c = children ? {...r, children} : {...r};
+  if (!c.component && (children || c.loadChildren) && (c.outlet && c.outlet !== PRIMARY_OUTLET)) {
+    c.component = EmptyOutletComponent;
+  }
+  return c;
+}
diff --git a/packages/router/src/create_router_state.ts b/packages/router/src/create_router_state.ts
new file mode 100644
index 000000000000..842987467da3
--- /dev/null
+++ b/packages/router/src/create_router_state.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 {BehaviorSubject} from 'rxjs';
+
+import {DetachedRouteHandleInternal, RouteReuseStrategy} from './route_reuse_strategy';
+import {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot} from './router_state';
+import {TreeNode} from './utils/tree';
+
+export function createRouterState(
+    routeReuseStrategy: RouteReuseStrategy, curr: RouterStateSnapshot,
+    prevState: RouterState): RouterState {
+  const root = createNode(routeReuseStrategy, curr._root, prevState ? prevState._root : undefined);
+  return new RouterState(root, curr);
+}
+
+function createNode(
+    routeReuseStrategy: RouteReuseStrategy, curr: TreeNode<ActivatedRouteSnapshot>,
+    prevState?: TreeNode<ActivatedRoute>): TreeNode<ActivatedRoute> {
+  // reuse an activated route that is currently displayed on the screen
+  if (prevState && routeReuseStrategy.shouldReuseRoute(curr.value, prevState.value.snapshot)) {
+    const value = prevState.value;
+    value._futureSnapshot = curr.value;
+    const children = createOrReuseChildren(routeReuseStrategy, curr, prevState);
+    return new TreeNode<ActivatedRoute>(value, children);
+
+    // retrieve an activated route that is used to be displayed, but is not currently displayed
+  } else {
+    const detachedRouteHandle =
+        <DetachedRouteHandleInternal>routeReuseStrategy.retrieve(curr.value);
+    if (detachedRouteHandle) {
+      const tree: TreeNode<ActivatedRoute> = detachedRouteHandle.route;
+      setFutureSnapshotsOfActivatedRoutes(curr, tree);
+      return tree;
+
+    } else {
+      const value = createActivatedRoute(curr.value);
+      const children = curr.children.map(c => createNode(routeReuseStrategy, c));
+      return new TreeNode<ActivatedRoute>(value, children);
+    }
+  }
+}
+
+function setFutureSnapshotsOfActivatedRoutes(
+    curr: TreeNode<ActivatedRouteSnapshot>, result: TreeNode<ActivatedRoute>): void {
+  if (curr.value.routeConfig !== result.value.routeConfig) {
+    throw new Error('Cannot reattach ActivatedRouteSnapshot created from a different route');
+  }
+  if (curr.children.length !== result.children.length) {
+    throw new Error('Cannot reattach ActivatedRouteSnapshot with a different number of children');
+  }
+  result.value._futureSnapshot = curr.value;
+  for (let i = 0; i < curr.children.length; ++i) {
+    setFutureSnapshotsOfActivatedRoutes(curr.children[i], result.children[i]);
+  }
+}
+
+function createOrReuseChildren(
+    routeReuseStrategy: RouteReuseStrategy, curr: TreeNode<ActivatedRouteSnapshot>,
+    prevState: TreeNode<ActivatedRoute>) {
+  return curr.children.map(child => {
+    for (const p of prevState.children) {
+      if (routeReuseStrategy.shouldReuseRoute(p.value.snapshot, child.value)) {
+        return createNode(routeReuseStrategy, child, p);
+      }
+    }
+    return createNode(routeReuseStrategy, child);
+  });
+}
+
+function createActivatedRoute(c: ActivatedRouteSnapshot) {
+  return new ActivatedRoute(
+      new BehaviorSubject(c.url), new BehaviorSubject(c.params), new BehaviorSubject(c.queryParams),
+      new BehaviorSubject(c.fragment), new BehaviorSubject(c.data), c.outlet, c.component, c);
+}
diff --git a/packages/router/src/create_url_tree.ts b/packages/router/src/create_url_tree.ts
new file mode 100644
index 000000000000..c454af509904
--- /dev/null
+++ b/packages/router/src/create_url_tree.ts
@@ -0,0 +1,316 @@
+/**
+ * @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 {ActivatedRoute} from './router_state';
+import {PRIMARY_OUTLET, Params} from './shared';
+import {UrlSegment, UrlSegmentGroup, UrlTree} from './url_tree';
+import {forEach, last, shallowEqual} from './utils/collection';
+
+export function createUrlTree(
+    route: ActivatedRoute, urlTree: UrlTree, commands: any[], queryParams: Params,
+    fragment: string): UrlTree {
+  if (commands.length === 0) {
+    return tree(urlTree.root, urlTree.root, urlTree, queryParams, fragment);
+  }
+
+  const nav = computeNavigation(commands);
+
+  if (nav.toRoot()) {
+    return tree(urlTree.root, new UrlSegmentGroup([], {}), urlTree, queryParams, fragment);
+  }
+
+  const startingPosition = findStartingPosition(nav, urlTree, route);
+
+  const segmentGroup = startingPosition.processChildren ?
+      updateSegmentGroupChildren(
+          startingPosition.segmentGroup, startingPosition.index, nav.commands) :
+      updateSegmentGroup(startingPosition.segmentGroup, startingPosition.index, nav.commands);
+  return tree(startingPosition.segmentGroup, segmentGroup, urlTree, queryParams, fragment);
+}
+
+function isMatrixParams(command: any): boolean {
+  return typeof command === 'object' && command != null && !command.outlets && !command.segmentPath;
+}
+
+function tree(
+    oldSegmentGroup: UrlSegmentGroup, newSegmentGroup: UrlSegmentGroup, urlTree: UrlTree,
+    queryParams: Params, fragment: string): UrlTree {
+  let qp: any = {};
+  if (queryParams) {
+    forEach(queryParams, (value: any, name: any) => {
+      qp[name] = Array.isArray(value) ? value.map((v: any) => `${v}`) : `${value}`;
+    });
+  }
+
+  if (urlTree.root === oldSegmentGroup) {
+    return new UrlTree(newSegmentGroup, qp, fragment);
+  }
+
+  return new UrlTree(replaceSegment(urlTree.root, oldSegmentGroup, newSegmentGroup), qp, fragment);
+}
+
+function replaceSegment(
+    current: UrlSegmentGroup, oldSegment: UrlSegmentGroup,
+    newSegment: UrlSegmentGroup): UrlSegmentGroup {
+  const children: {[key: string]: UrlSegmentGroup} = {};
+  forEach(current.children, (c: UrlSegmentGroup, outletName: string) => {
+    if (c === oldSegment) {
+      children[outletName] = newSegment;
+    } else {
+      children[outletName] = replaceSegment(c, oldSegment, newSegment);
+    }
+  });
+  return new UrlSegmentGroup(current.segments, children);
+}
+
+class Navigation {
+  constructor(
+      public isAbsolute: boolean, public numberOfDoubleDots: number, public commands: any[]) {
+    if (isAbsolute && commands.length > 0 && isMatrixParams(commands[0])) {
+      throw new Error('Root segment cannot have matrix parameters');
+    }
+
+    const cmdWithOutlet = commands.find(c => typeof c === 'object' && c != null && c.outlets);
+    if (cmdWithOutlet && cmdWithOutlet !== last(commands)) {
+      throw new Error('{outlets:{}} has to be the last command');
+    }
+  }
+
+  public toRoot(): boolean {
+    return this.isAbsolute && this.commands.length === 1 && this.commands[0] == '/';
+  }
+}
+
+/** Transforms commands to a normalized `Navigation` */
+function computeNavigation(commands: any[]): Navigation {
+  if ((typeof commands[0] === 'string') && commands.length === 1 && commands[0] === '/') {
+    return new Navigation(true, 0, commands);
+  }
+
+  let numberOfDoubleDots = 0;
+  let isAbsolute = false;
+
+  const res: any[] = commands.reduce((res, cmd, cmdIdx) => {
+    if (typeof cmd === 'object' && cmd != null) {
+      if (cmd.outlets) {
+        const outlets: {[k: string]: any} = {};
+        forEach(cmd.outlets, (commands: any, name: string) => {
+          outlets[name] = typeof commands === 'string' ? commands.split('/') : commands;
+        });
+        return [...res, {outlets}];
+      }
+
+      if (cmd.segmentPath) {
+        return [...res, cmd.segmentPath];
+      }
+    }
+
+    if (!(typeof cmd === 'string')) {
+      return [...res, cmd];
+    }
+
+    if (cmdIdx === 0) {
+      cmd.split('/').forEach((urlPart, partIndex) => {
+        if (partIndex == 0 && urlPart === '.') {
+          // skip './a'
+        } else if (partIndex == 0 && urlPart === '') {  //  '/a'
+          isAbsolute = true;
+        } else if (urlPart === '..') {  //  '../a'
+          numberOfDoubleDots++;
+        } else if (urlPart != '') {
+          res.push(urlPart);
+        }
+      });
+
+      return res;
+    }
+
+    return [...res, cmd];
+  }, []);
+
+  return new Navigation(isAbsolute, numberOfDoubleDots, res);
+}
+
+class Position {
+  constructor(
+      public segmentGroup: UrlSegmentGroup, public processChildren: boolean, public index: number) {
+  }
+}
+
+function findStartingPosition(nav: Navigation, tree: UrlTree, route: ActivatedRoute): Position {
+  if (nav.isAbsolute) {
+    return new Position(tree.root, true, 0);
+  }
+
+  if (route.snapshot._lastPathIndex === -1) {
+    return new Position(route.snapshot._urlSegment, true, 0);
+  }
+
+  const modifier = isMatrixParams(nav.commands[0]) ? 0 : 1;
+  const index = route.snapshot._lastPathIndex + modifier;
+  return createPositionApplyingDoubleDots(
+      route.snapshot._urlSegment, index, nav.numberOfDoubleDots);
+}
+
+function createPositionApplyingDoubleDots(
+    group: UrlSegmentGroup, index: number, numberOfDoubleDots: number): Position {
+  let g = group;
+  let ci = index;
+  let dd = numberOfDoubleDots;
+  while (dd > ci) {
+    dd -= ci;
+    g = g.parent !;
+    if (!g) {
+      throw new Error('Invalid number of \'../\'');
+    }
+    ci = g.segments.length;
+  }
+  return new Position(g, false, ci - dd);
+}
+
+function getPath(command: any): any {
+  if (typeof command === 'object' && command != null && command.outlets) {
+    return command.outlets[PRIMARY_OUTLET];
+  }
+  return `${command}`;
+}
+
+function getOutlets(commands: any[]): {[k: string]: any[]} {
+  if (!(typeof commands[0] === 'object')) return {[PRIMARY_OUTLET]: commands};
+  if (commands[0].outlets === undefined) return {[PRIMARY_OUTLET]: commands};
+  return commands[0].outlets;
+}
+
+function updateSegmentGroup(
+    segmentGroup: UrlSegmentGroup, startIndex: number, commands: any[]): UrlSegmentGroup {
+  if (!segmentGroup) {
+    segmentGroup = new UrlSegmentGroup([], {});
+  }
+  if (segmentGroup.segments.length === 0 && segmentGroup.hasChildren()) {
+    return updateSegmentGroupChildren(segmentGroup, startIndex, commands);
+  }
+
+  const m = prefixedWith(segmentGroup, startIndex, commands);
+  const slicedCommands = commands.slice(m.commandIndex);
+  if (m.match && m.pathIndex < segmentGroup.segments.length) {
+    const g = new UrlSegmentGroup(segmentGroup.segments.slice(0, m.pathIndex), {});
+    g.children[PRIMARY_OUTLET] =
+        new UrlSegmentGroup(segmentGroup.segments.slice(m.pathIndex), segmentGroup.children);
+    return updateSegmentGroupChildren(g, 0, slicedCommands);
+  } else if (m.match && slicedCommands.length === 0) {
+    return new UrlSegmentGroup(segmentGroup.segments, {});
+  } else if (m.match && !segmentGroup.hasChildren()) {
+    return createNewSegmentGroup(segmentGroup, startIndex, commands);
+  } else if (m.match) {
+    return updateSegmentGroupChildren(segmentGroup, 0, slicedCommands);
+  } else {
+    return createNewSegmentGroup(segmentGroup, startIndex, commands);
+  }
+}
+
+function updateSegmentGroupChildren(
+    segmentGroup: UrlSegmentGroup, startIndex: number, commands: any[]): UrlSegmentGroup {
+  if (commands.length === 0) {
+    return new UrlSegmentGroup(segmentGroup.segments, {});
+  } else {
+    const outlets = getOutlets(commands);
+    const children: {[key: string]: UrlSegmentGroup} = {};
+
+    forEach(outlets, (commands: any, outlet: string) => {
+      if (commands !== null) {
+        children[outlet] = updateSegmentGroup(segmentGroup.children[outlet], startIndex, commands);
+      }
+    });
+
+    forEach(segmentGroup.children, (child: UrlSegmentGroup, childOutlet: string) => {
+      if (outlets[childOutlet] === undefined) {
+        children[childOutlet] = child;
+      }
+    });
+    return new UrlSegmentGroup(segmentGroup.segments, children);
+  }
+}
+
+function prefixedWith(segmentGroup: UrlSegmentGroup, startIndex: number, commands: any[]) {
+  let currentCommandIndex = 0;
+  let currentPathIndex = startIndex;
+
+  const noMatch = {match: false, pathIndex: 0, commandIndex: 0};
+  while (currentPathIndex < segmentGroup.segments.length) {
+    if (currentCommandIndex >= commands.length) return noMatch;
+    const path = segmentGroup.segments[currentPathIndex];
+    const curr = getPath(commands[currentCommandIndex]);
+    const next =
+        currentCommandIndex < commands.length - 1 ? commands[currentCommandIndex + 1] : null;
+
+    if (currentPathIndex > 0 && curr === undefined) break;
+
+    if (curr && next && (typeof next === 'object') && next.outlets === undefined) {
+      if (!compare(curr, next, path)) return noMatch;
+      currentCommandIndex += 2;
+    } else {
+      if (!compare(curr, {}, path)) return noMatch;
+      currentCommandIndex++;
+    }
+    currentPathIndex++;
+  }
+
+  return {match: true, pathIndex: currentPathIndex, commandIndex: currentCommandIndex};
+}
+
+function createNewSegmentGroup(
+    segmentGroup: UrlSegmentGroup, startIndex: number, commands: any[]): UrlSegmentGroup {
+  const paths = segmentGroup.segments.slice(0, startIndex);
+
+  let i = 0;
+  while (i < commands.length) {
+    if (typeof commands[i] === 'object' && commands[i].outlets !== undefined) {
+      const children = createNewSegmentChildren(commands[i].outlets);
+      return new UrlSegmentGroup(paths, children);
+    }
+
+    // if we start with an object literal, we need to reuse the path part from the segment
+    if (i === 0 && isMatrixParams(commands[0])) {
+      const p = segmentGroup.segments[startIndex];
+      paths.push(new UrlSegment(p.path, commands[0]));
+      i++;
+      continue;
+    }
+
+    const curr = getPath(commands[i]);
+    const next = (i < commands.length - 1) ? commands[i + 1] : null;
+    if (curr && next && isMatrixParams(next)) {
+      paths.push(new UrlSegment(curr, stringify(next)));
+      i += 2;
+    } else {
+      paths.push(new UrlSegment(curr, {}));
+      i++;
+    }
+  }
+  return new UrlSegmentGroup(paths, {});
+}
+
+function createNewSegmentChildren(outlets: {[name: string]: any}): any {
+  const children: {[key: string]: UrlSegmentGroup} = {};
+  forEach(outlets, (commands: any, outlet: string) => {
+    if (commands !== null) {
+      children[outlet] = createNewSegmentGroup(new UrlSegmentGroup([], {}), 0, commands);
+    }
+  });
+  return children;
+}
+
+function stringify(params: {[key: string]: any}): {[key: string]: string} {
+  const res: {[key: string]: string} = {};
+  forEach(params, (v: any, k: string) => res[k] = `${v}`);
+  return res;
+}
+
+function compare(path: string, params: {[key: string]: any}, segment: UrlSegment): boolean {
+  return path == segment.path && shallowEqual(params, segment.parameters);
+}
diff --git a/packages/router/src/directives/router_link.ts b/packages/router/src/directives/router_link.ts
new file mode 100644
index 000000000000..4a34f4c41477
--- /dev/null
+++ b/packages/router/src/directives/router_link.ts
@@ -0,0 +1,263 @@
+/**
+ * @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 {LocationStrategy} from '@angular/common';
+import {Attribute, Directive, ElementRef, HostBinding, HostListener, Input, OnChanges, OnDestroy, Renderer2, isDevMode} from '@angular/core';
+import {Subscription} from 'rxjs';
+
+import {QueryParamsHandling} from '../config';
+import {NavigationEnd, RouterEvent} from '../events';
+import {Router} from '../router';
+import {ActivatedRoute} from '../router_state';
+import {UrlTree} from '../url_tree';
+
+
+/**
+ * @description
+ *
+ * Lets you link to specific routes in your app.
+ *
+ * Consider the following route configuration:
+ * `[{ path: 'user/:name', component: UserCmp }]`.
+ * When linking to this `user/:name` route, you use the `RouterLink` directive.
+ *
+ * If the link is static, you can use the directive as follows:
+ * `<a routerLink="/user/bob">link to user component</a>`
+ *
+ * If you use dynamic values to generate the link, you can pass an array of path
+ * segments, followed by the params for each segment.
+ *
+ * For instance `['/team', teamId, 'user', userName, {details: true}]`
+ * means that we want to generate a link to `/team/11/user/bob;details=true`.
+ *
+ * Multiple static segments can be merged into one
+ * (e.g., `['/team/11/user', userName, {details: true}]`).
+ *
+ * The first segment name can be prepended with `/`, `./`, or `../`:
+ * * If the first segment begins with `/`, the router will look up the route from the root of the
+ *   app.
+ * * If the first segment begins with `./`, or doesn't begin with a slash, the router will
+ *   instead look in the children of the current activated route.
+ * * And if the first segment begins with `../`, the router will go up one level.
+ *
+ * You can set query params and fragment as follows:
+ *
+ * ```
+ * <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
+ *   link to user component
+ * </a>
+ * ```
+ * RouterLink will use these to generate this link: `/user/bob#education?debug=true`.
+ *
+ * (Deprecated in v4.0.0 use `queryParamsHandling` instead) You can also tell the
+ * directive to preserve the current query params and fragment:
+ *
+ * ```
+ * <a [routerLink]="['/user/bob']" preserveQueryParams preserveFragment>
+ *   link to user component
+ * </a>
+ * ```
+ *
+ * You can tell the directive to how to handle queryParams, available options are:
+ *  - `'merge'`: merge the queryParams into the current queryParams
+ *  - `'preserve'`: preserve the current queryParams
+ *  - default/`''`: use the queryParams only
+ *
+ * Same options for {@link NavigationExtras#queryParamsHandling
+ * NavigationExtras#queryParamsHandling}.
+ *
+ * ```
+ * <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
+ *   link to user component
+ * </a>
+ * ```
+ *
+ * The router link directive always treats the provided input as a delta to the current url.
+ *
+ * For instance, if the current url is `/user/(box//aux:team)`.
+ *
+ * Then the following link `<a [routerLink]="['/user/jim']">Jim</a>` will generate the link
+ * `/user/(jim//aux:team)`.
+ *
+ * See {@link Router#createUrlTree createUrlTree} for more information.
+ *
+ * @ngModule RouterModule
+ *
+ *
+ */
+@Directive({selector: ':not(a)[routerLink]'})
+export class RouterLink {
+  // TODO(issue/24571): remove '!'.
+  @Input() queryParams !: {[k: string]: any};
+  // TODO(issue/24571): remove '!'.
+  @Input() fragment !: string;
+  // TODO(issue/24571): remove '!'.
+  @Input() queryParamsHandling !: QueryParamsHandling;
+  // TODO(issue/24571): remove '!'.
+  @Input() preserveFragment !: boolean;
+  // TODO(issue/24571): remove '!'.
+  @Input() skipLocationChange !: boolean;
+  // TODO(issue/24571): remove '!'.
+  @Input() replaceUrl !: boolean;
+  private commands: any[] = [];
+  // TODO(issue/24571): remove '!'.
+  private preserve !: boolean;
+
+  constructor(
+      private router: Router, private route: ActivatedRoute,
+      @Attribute('tabindex') tabIndex: string, renderer: Renderer2, el: ElementRef) {
+    if (tabIndex == null) {
+      renderer.setAttribute(el.nativeElement, 'tabindex', '0');
+    }
+  }
+
+  @Input()
+  set routerLink(commands: any[]|string) {
+    if (commands != null) {
+      this.commands = Array.isArray(commands) ? commands : [commands];
+    } else {
+      this.commands = [];
+    }
+  }
+
+  /**
+   * @deprecated 4.0.0 use `queryParamsHandling` instead.
+   */
+  @Input()
+  set preserveQueryParams(value: boolean) {
+    if (isDevMode() && <any>console && <any>console.warn) {
+      console.warn('preserveQueryParams is deprecated!, use queryParamsHandling instead.');
+    }
+    this.preserve = value;
+  }
+
+  @HostListener('click')
+  onClick(): boolean {
+    const extras = {
+      skipLocationChange: attrBoolValue(this.skipLocationChange),
+      replaceUrl: attrBoolValue(this.replaceUrl),
+    };
+    this.router.navigateByUrl(this.urlTree, extras);
+    return true;
+  }
+
+  get urlTree(): UrlTree {
+    return this.router.createUrlTree(this.commands, {
+      relativeTo: this.route,
+      queryParams: this.queryParams,
+      fragment: this.fragment,
+      preserveQueryParams: attrBoolValue(this.preserve),
+      queryParamsHandling: this.queryParamsHandling,
+      preserveFragment: attrBoolValue(this.preserveFragment),
+    });
+  }
+}
+
+/**
+ * @description
+ *
+ * Lets you link to specific routes in your app.
+ *
+ * See `RouterLink` for more information.
+ *
+ * @ngModule RouterModule
+ *
+ *
+ */
+@Directive({selector: 'a[routerLink]'})
+export class RouterLinkWithHref implements OnChanges, OnDestroy {
+  // TODO(issue/24571): remove '!'.
+  @HostBinding('attr.target') @Input() target !: string;
+  // TODO(issue/24571): remove '!'.
+  @Input() queryParams !: {[k: string]: any};
+  // TODO(issue/24571): remove '!'.
+  @Input() fragment !: string;
+  // TODO(issue/24571): remove '!'.
+  @Input() queryParamsHandling !: QueryParamsHandling;
+  // TODO(issue/24571): remove '!'.
+  @Input() preserveFragment !: boolean;
+  // TODO(issue/24571): remove '!'.
+  @Input() skipLocationChange !: boolean;
+  // TODO(issue/24571): remove '!'.
+  @Input() replaceUrl !: boolean;
+  private commands: any[] = [];
+  private subscription: Subscription;
+  // TODO(issue/24571): remove '!'.
+  private preserve !: boolean;
+
+  // the url displayed on the anchor element.
+  // TODO(issue/24571): remove '!'.
+  @HostBinding() href !: string;
+
+  constructor(
+      private router: Router, private route: ActivatedRoute,
+      private locationStrategy: LocationStrategy) {
+    this.subscription = router.events.subscribe((s: RouterEvent) => {
+      if (s instanceof NavigationEnd) {
+        this.updateTargetUrlAndHref();
+      }
+    });
+  }
+
+  @Input()
+  set routerLink(commands: any[]|string) {
+    if (commands != null) {
+      this.commands = Array.isArray(commands) ? commands : [commands];
+    } else {
+      this.commands = [];
+    }
+  }
+
+  @Input()
+  set preserveQueryParams(value: boolean) {
+    if (isDevMode() && <any>console && <any>console.warn) {
+      console.warn('preserveQueryParams is deprecated, use queryParamsHandling instead.');
+    }
+    this.preserve = value;
+  }
+
+  ngOnChanges(changes: {}): any { this.updateTargetUrlAndHref(); }
+  ngOnDestroy(): any { this.subscription.unsubscribe(); }
+
+  @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;
+    }
+
+    if (typeof this.target === 'string' && this.target != '_self') {
+      return true;
+    }
+
+    const extras = {
+      skipLocationChange: attrBoolValue(this.skipLocationChange),
+      replaceUrl: attrBoolValue(this.replaceUrl),
+    };
+    this.router.navigateByUrl(this.urlTree, extras);
+    return false;
+  }
+
+  private updateTargetUrlAndHref(): void {
+    this.href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.urlTree));
+  }
+
+  get urlTree(): UrlTree {
+    return this.router.createUrlTree(this.commands, {
+      relativeTo: this.route,
+      queryParams: this.queryParams,
+      fragment: this.fragment,
+      preserveQueryParams: attrBoolValue(this.preserve),
+      queryParamsHandling: this.queryParamsHandling,
+      preserveFragment: attrBoolValue(this.preserveFragment),
+    });
+  }
+}
+
+function attrBoolValue(s: any): boolean {
+  return s === '' || !!s;
+}
diff --git a/packages/router/src/directives/router_link_active.ts b/packages/router/src/directives/router_link_active.ts
new file mode 100644
index 000000000000..2953fafc5a00
--- /dev/null
+++ b/packages/router/src/directives/router_link_active.ts
@@ -0,0 +1,146 @@
+/**
+ * @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 {AfterContentInit, ChangeDetectorRef, ContentChildren, Directive, ElementRef, Input, OnChanges, OnDestroy, QueryList, Renderer2, SimpleChanges} from '@angular/core';
+import {Subscription} from 'rxjs';
+
+import {NavigationEnd, RouterEvent} from '../events';
+import {Router} from '../router';
+
+import {RouterLink, RouterLinkWithHref} from './router_link';
+
+
+/**
+ *
+ * @description
+ *
+ * Lets you add a CSS class to an element when the link's route becomes active.
+ *
+ * This directive lets you add a CSS class to an element when the link's route
+ * becomes active.
+ *
+ * Consider the following example:
+ *
+ * ```
+ * <a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
+ * ```
+ *
+ * When the url is either '/user' or '/user/bob', the active-link class will
+ * be added to the `a` tag. If the url changes, the class will be removed.
+ *
+ * You can set more than one class, as follows:
+ *
+ * ```
+ * <a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
+ * <a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>
+ * ```
+ *
+ * You can configure RouterLinkActive by passing `exact: true`. This will add the classes
+ * only when the url matches the link exactly.
+ *
+ * ```
+ * <a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
+ * true}">Bob</a>
+ * ```
+ *
+ * You can assign the RouterLinkActive instance to a template variable and directly check
+ * the `isActive` status.
+ * ```
+ * <a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
+ *   Bob {{ rla.isActive ? '(already open)' : ''}}
+ * </a>
+ * ```
+ *
+ * Finally, you can apply the RouterLinkActive directive to an ancestor of a RouterLink.
+ *
+ * ```
+ * <div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
+ *   <a routerLink="/user/jim">Jim</a>
+ *   <a routerLink="/user/bob">Bob</a>
+ * </div>
+ * ```
+ *
+ * This will set the active-link class on the div tag if the url is either '/user/jim' or
+ * '/user/bob'.
+ *
+ * @ngModule RouterModule
+ *
+ *
+ */
+@Directive({
+  selector: '[routerLinkActive]',
+  exportAs: 'routerLinkActive',
+})
+export class RouterLinkActive implements OnChanges,
+    OnDestroy, AfterContentInit {
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(RouterLink, {descendants: true})
+  links !: QueryList<RouterLink>;
+  // TODO(issue/24571): remove '!'.
+  @ContentChildren(RouterLinkWithHref, {descendants: true})
+  linksWithHrefs !: QueryList<RouterLinkWithHref>;
+
+  private classes: string[] = [];
+  private subscription: Subscription;
+  public readonly isActive: boolean = false;
+
+  @Input() routerLinkActiveOptions: {exact: boolean} = {exact: false};
+
+  constructor(
+      private router: Router, private element: ElementRef, private renderer: Renderer2,
+      private cdr: ChangeDetectorRef) {
+    this.subscription = router.events.subscribe((s: RouterEvent) => {
+      if (s instanceof NavigationEnd) {
+        this.update();
+      }
+    });
+  }
+
+
+  ngAfterContentInit(): void {
+    this.links.changes.subscribe(_ => this.update());
+    this.linksWithHrefs.changes.subscribe(_ => this.update());
+    this.update();
+  }
+
+  @Input()
+  set routerLinkActive(data: string[]|string) {
+    const classes = Array.isArray(data) ? data : data.split(' ');
+    this.classes = classes.filter(c => !!c);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void { this.update(); }
+  ngOnDestroy(): void { this.subscription.unsubscribe(); }
+
+  private update(): void {
+    if (!this.links || !this.linksWithHrefs || !this.router.navigated) return;
+    Promise.resolve().then(() => {
+      const hasActiveLinks = this.hasActiveLinks();
+      if (this.isActive !== hasActiveLinks) {
+        (this as any).isActive = hasActiveLinks;
+        this.classes.forEach((c) => {
+          if (hasActiveLinks) {
+            this.renderer.addClass(this.element.nativeElement, c);
+          } else {
+            this.renderer.removeClass(this.element.nativeElement, c);
+          }
+        });
+      }
+    });
+  }
+
+  private isLinkActive(router: Router): (link: (RouterLink|RouterLinkWithHref)) => boolean {
+    return (link: RouterLink | RouterLinkWithHref) =>
+               router.isActive(link.urlTree, this.routerLinkActiveOptions.exact);
+  }
+
+  private hasActiveLinks(): boolean {
+    return this.links.some(this.isLinkActive(this.router)) ||
+        this.linksWithHrefs.some(this.isLinkActive(this.router));
+  }
+}
diff --git a/packages/router/src/directives/router_outlet.ts b/packages/router/src/directives/router_outlet.ts
new file mode 100644
index 000000000000..77d6283fc880
--- /dev/null
+++ b/packages/router/src/directives/router_outlet.ts
@@ -0,0 +1,160 @@
+/**
+ * @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, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, EventEmitter, Injector, OnDestroy, OnInit, Output, ViewContainerRef} from '@angular/core';
+
+import {Data} from '../config';
+import {ChildrenOutletContexts} from '../router_outlet_context';
+import {ActivatedRoute} from '../router_state';
+import {PRIMARY_OUTLET} from '../shared';
+
+/**
+ * @description
+ *
+ * Acts as a placeholder that Angular dynamically fills based on the current router state.
+ *
+ * ```
+ * <router-outlet></router-outlet>
+ * <router-outlet name='left'></router-outlet>
+ * <router-outlet name='right'></router-outlet>
+ * ```
+ *
+ * A router outlet will emit an activate event any time a new component is being instantiated,
+ * and a deactivate event when it is being destroyed.
+ *
+ * ```
+ * <router-outlet
+ *   (activate)='onActivate($event)'
+ *   (deactivate)='onDeactivate($event)'></router-outlet>
+ * ```
+ * @ngModule RouterModule
+ *
+ *
+ */
+@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 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.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);
+        }
+      }
+    }
+  }
+
+  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 as ActivatedRoute;
+  }
+
+  get activatedRouteData(): Data {
+    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 cmp = this.activated;
+    this.activated = null;
+    this._activatedRoute = null;
+    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;
+    this.location.insert(ref.hostView);
+  }
+
+  deactivate(): void {
+    if (this.activated) {
+      const c = this.component;
+      this.activated.destroy();
+      this.activated = null;
+      this._activatedRoute = null;
+      this.deactivateEvents.emit(c);
+    }
+  }
+
+  activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver|null) {
+    if (this.isActivated) {
+      throw new Error('Cannot activate an already activated outlet');
+    }
+    this._activatedRoute = activatedRoute;
+    const snapshot = activatedRoute._futureSnapshot;
+    const component = <any>snapshot.routeConfig !.component;
+    resolver = resolver || this.resolver;
+    const factory = resolver.resolveComponentFactory(component);
+    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 childContexts: ChildrenOutletContexts,
+      private parent: Injector) {}
+
+  get(token: any, notFoundValue?: any): any {
+    if (token === ActivatedRoute) {
+      return this.route;
+    }
+
+    if (token === ChildrenOutletContexts) {
+      return this.childContexts;
+    }
+
+    return this.parent.get(token, notFoundValue);
+  }
+}
diff --git a/packages/router/src/events.ts b/packages/router/src/events.ts
new file mode 100644
index 000000000000..4459327449bf
--- /dev/null
+++ b/packages/router/src/events.ts
@@ -0,0 +1,453 @@
+/**
+ * @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 {Route} from './config';
+import {ActivatedRouteSnapshot, RouterStateSnapshot} from './router_state';
+
+/**
+ * @description
+ *
+ * Identifies the trigger of the navigation.
+ *
+ * * 'imperative'--triggered by `router.navigateByUrl` or `router.navigate`.
+ * * 'popstate'--triggered by a popstate event
+ * * 'hashchange'--triggered by a hashchange event
+ *
+ * @experimental
+ */
+export type NavigationTrigger = 'imperative' | 'popstate' | 'hashchange';
+
+/**
+ * @description
+ *
+ * Base for events the Router goes through, as opposed to events tied to a specific
+ * Route. `RouterEvent`s will only be fired one time for any given navigation.
+ *
+ * Example:
+ *
+ * ```
+ * class MyService {
+ *   constructor(public router: Router, logger: Logger) {
+ *     router.events.filter(e => e instanceof RouterEvent).subscribe(e => {
+ *       logger.log(e.id, e.url);
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @experimental
+ */
+export class RouterEvent {
+  constructor(
+      /** @docsNotRequired */
+      public id: number,
+      /** @docsNotRequired */
+      public url: string) {}
+}
+
+/**
+ * @description
+ *
+ * Represents an event triggered when a navigation starts.
+ *
+ *
+ */
+export class NavigationStart extends RouterEvent {
+  /**
+   * Identifies the trigger of the navigation.
+   *
+   * * 'imperative'--triggered by `router.navigateByUrl` or `router.navigate`.
+   * * 'popstate'--triggered by a popstate event
+   * * 'hashchange'--triggered by a hashchange event
+   */
+  navigationTrigger?: 'imperative'|'popstate'|'hashchange';
+
+  /**
+   * This contains the navigation id that pushed the history record that the router navigates
+   * back to. This is not null only when the navigation is triggered by a popstate event.
+   *
+   * The router assigns a navigationId to every router transition/navigation. Even when the user
+   * clicks on the back button in the browser, a new navigation id will be created. So from
+   * the perspective of the router, the router never "goes back". By using the `restoredState`
+   * and its navigationId, you can implement behavior that differentiates between creating new
+   * states
+   * and popstate events. In the latter case you can restore some remembered state (e.g., scroll
+   * position).
+   */
+  restoredState?: {navigationId: number}|null;
+
+  constructor(
+      /** @docsNotRequired */
+      id: number,
+      /** @docsNotRequired */
+      url: string,
+      /** @docsNotRequired */
+      navigationTrigger: 'imperative'|'popstate'|'hashchange' = 'imperative',
+      /** @docsNotRequired */
+      restoredState: {navigationId: number}|null = null) {
+    super(id, url);
+    this.navigationTrigger = navigationTrigger;
+    this.restoredState = restoredState;
+  }
+
+  /** @docsNotRequired */
+  toString(): string { return `NavigationStart(id: ${this.id}, url: '${this.url}')`; }
+}
+
+/**
+ * @description
+ *
+ * Represents an event triggered when a navigation ends successfully.
+ *
+ *
+ */
+export class NavigationEnd extends RouterEvent {
+  constructor(
+      /** @docsNotRequired */
+      id: number,
+      /** @docsNotRequired */
+      url: string,
+      /** @docsNotRequired */
+      public urlAfterRedirects: string) {
+    super(id, url);
+  }
+
+  /** @docsNotRequired */
+  toString(): string {
+    return `NavigationEnd(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}')`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents an event triggered when a navigation is canceled.
+ *
+ *
+ */
+export class NavigationCancel extends RouterEvent {
+  constructor(
+      /** @docsNotRequired */
+      id: number,
+      /** @docsNotRequired */
+      url: string,
+      /** @docsNotRequired */
+      public reason: string) {
+    super(id, url);
+  }
+
+  /** @docsNotRequired */
+  toString(): string { return `NavigationCancel(id: ${this.id}, url: '${this.url}')`; }
+}
+
+/**
+ * @description
+ *
+ * Represents an event triggered when a navigation fails due to an unexpected error.
+ *
+ *
+ */
+export class NavigationError extends RouterEvent {
+  constructor(
+      /** @docsNotRequired */
+      id: number,
+      /** @docsNotRequired */
+      url: string,
+      /** @docsNotRequired */
+      public error: any) {
+    super(id, url);
+  }
+
+  /** @docsNotRequired */
+  toString(): string {
+    return `NavigationError(id: ${this.id}, url: '${this.url}', error: ${this.error})`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents an event triggered when routes are recognized.
+ *
+ *
+ */
+export class RoutesRecognized extends RouterEvent {
+  constructor(
+      /** @docsNotRequired */
+      id: number,
+      /** @docsNotRequired */
+      url: string,
+      /** @docsNotRequired */
+      public urlAfterRedirects: string,
+      /** @docsNotRequired */
+      public state: RouterStateSnapshot) {
+    super(id, url);
+  }
+
+  /** @docsNotRequired */
+  toString(): string {
+    return `RoutesRecognized(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state})`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents the start of the Guard phase of routing.
+ *
+ * @experimental
+ */
+export class GuardsCheckStart extends RouterEvent {
+  constructor(
+      /** @docsNotRequired */
+      id: number,
+      /** @docsNotRequired */
+      url: string,
+      /** @docsNotRequired */
+      public urlAfterRedirects: string,
+      /** @docsNotRequired */
+      public state: RouterStateSnapshot) {
+    super(id, url);
+  }
+
+  toString(): string {
+    return `GuardsCheckStart(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state})`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents the end of the Guard phase of routing.
+ *
+ * @experimental
+ */
+export class GuardsCheckEnd extends RouterEvent {
+  constructor(
+      /** @docsNotRequired */
+      id: number,
+      /** @docsNotRequired */
+      url: string,
+      /** @docsNotRequired */
+      public urlAfterRedirects: string,
+      /** @docsNotRequired */
+      public state: RouterStateSnapshot,
+      /** @docsNotRequired */
+      public shouldActivate: boolean) {
+    super(id, url);
+  }
+
+  toString(): string {
+    return `GuardsCheckEnd(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state}, shouldActivate: ${this.shouldActivate})`;
+  }
+}
+
+/**
+ * @description
+ *
+ * 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 extends RouterEvent {
+  constructor(
+      /** @docsNotRequired */
+      id: number,
+      /** @docsNotRequired */
+      url: string,
+      /** @docsNotRequired */
+      public urlAfterRedirects: string,
+      /** @docsNotRequired */
+      public state: RouterStateSnapshot) {
+    super(id, url);
+  }
+
+  toString(): string {
+    return `ResolveStart(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state})`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents the end of the Resolve phase of routing. See note on
+ * `ResolveStart` for use of this experimental API.
+ *
+ * @experimental
+ */
+export class ResolveEnd extends RouterEvent {
+  constructor(
+      /** @docsNotRequired */
+      id: number,
+      /** @docsNotRequired */
+      url: string,
+      /** @docsNotRequired */
+      public urlAfterRedirects: string,
+      /** @docsNotRequired */
+      public state: RouterStateSnapshot) {
+    super(id, url);
+  }
+
+  toString(): string {
+    return `ResolveEnd(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state})`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents an event triggered before lazy loading a route config.
+ *
+ * @experimental
+ */
+export class RouteConfigLoadStart {
+  constructor(
+      /** @docsNotRequired */
+      public route: Route) {}
+  toString(): string { return `RouteConfigLoadStart(path: ${this.route.path})`; }
+}
+
+/**
+ * @description
+ *
+ * Represents an event triggered when a route has been lazy loaded.
+ *
+ * @experimental
+ */
+export class RouteConfigLoadEnd {
+  constructor(
+      /** @docsNotRequired */
+      public route: Route) {}
+  toString(): string { return `RouteConfigLoadEnd(path: ${this.route.path})`; }
+}
+
+/**
+ * @description
+ *
+ * Represents the start of end of the Resolve phase of routing. See note on
+ * `ChildActivationEnd` for use of this experimental API.
+ *
+ * @experimental
+ */
+export class ChildActivationStart {
+  constructor(
+      /** @docsNotRequired */
+      public snapshot: ActivatedRouteSnapshot) {}
+  toString(): string {
+    const path = this.snapshot.routeConfig && this.snapshot.routeConfig.path || '';
+    return `ChildActivationStart(path: '${path}')`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents the start of end of the Resolve phase of routing. See note on
+ * `ChildActivationStart` for use of this experimental API.
+ *
+ * @experimental
+ */
+export class ChildActivationEnd {
+  constructor(
+      /** @docsNotRequired */
+      public snapshot: ActivatedRouteSnapshot) {}
+  toString(): string {
+    const path = this.snapshot.routeConfig && this.snapshot.routeConfig.path || '';
+    return `ChildActivationEnd(path: '${path}')`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents the start of end of the Resolve phase of routing. See note on
+ * `ActivationEnd` for use of this experimental API.
+ *
+ * @experimental
+ */
+export class ActivationStart {
+  constructor(
+      /** @docsNotRequired */
+      public snapshot: ActivatedRouteSnapshot) {}
+  toString(): string {
+    const path = this.snapshot.routeConfig && this.snapshot.routeConfig.path || '';
+    return `ActivationStart(path: '${path}')`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents the start of end of the Resolve phase of routing. See note on
+ * `ActivationStart` for use of this experimental API.
+ *
+ * @experimental
+ */
+export class ActivationEnd {
+  constructor(
+      /** @docsNotRequired */
+      public snapshot: ActivatedRouteSnapshot) {}
+  toString(): string {
+    const path = this.snapshot.routeConfig && this.snapshot.routeConfig.path || '';
+    return `ActivationEnd(path: '${path}')`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents a scrolling event.
+ */
+export class Scroll {
+  constructor(
+      /** @docsNotRequired */
+      readonly routerEvent: NavigationEnd,
+
+      /** @docsNotRequired */
+      readonly position: [number, number]|null,
+
+      /** @docsNotRequired */
+      readonly anchor: string|null) {}
+
+  toString(): string {
+    const pos = this.position ? `${this.position[0]}, ${this.position[1]}` : null;
+    return `Scroll(anchor: '${this.anchor}', position: '${pos}')`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents a router event, allowing you to track the lifecycle of the router.
+ *
+ * The sequence of router events is:
+ *
+ * - `NavigationStart`,
+ * - `RouteConfigLoadStart`,
+ * - `RouteConfigLoadEnd`,
+ * - `RoutesRecognized`,
+ * - `GuardsCheckStart`,
+ * - `ChildActivationStart`,
+ * - `ActivationStart`,
+ * - `GuardsCheckEnd`,
+ * - `ResolveStart`,
+ * - `ResolveEnd`,
+ * - `ActivationEnd`
+ * - `ChildActivationEnd`
+ * - `NavigationEnd`,
+ * - `NavigationCancel`,
+ * - `NavigationError`
+ * - `Scroll`
+ *
+ *
+ */
+export type Event = RouterEvent | RouteConfigLoadStart | RouteConfigLoadEnd | ChildActivationStart |
+    ChildActivationEnd | ActivationStart | ActivationEnd | Scroll;
diff --git a/packages/router/src/index.ts b/packages/router/src/index.ts
new file mode 100644
index 000000000000..19cef3be6b89
--- /dev/null
+++ b/packages/router/src/index.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {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 {ActivationEnd, ActivationStart, ChildActivationEnd, ChildActivationStart, Event, GuardsCheckEnd, GuardsCheckStart, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, ResolveEnd, ResolveStart, RouteConfigLoadEnd, RouteConfigLoadStart, RouterEvent, RoutesRecognized, Scroll} 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 {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';
+export {UrlHandlingStrategy} from './url_handling_strategy';
+export {DefaultUrlSerializer, UrlSegment, UrlSegmentGroup, UrlSerializer, UrlTree} from './url_tree';
+export {VERSION} from './version';
+
+export * from './private_export';
diff --git a/packages/router/src/interfaces.ts b/packages/router/src/interfaces.ts
new file mode 100644
index 000000000000..1d10033c0439
--- /dev/null
+++ b/packages/router/src/interfaces.ts
@@ -0,0 +1,375 @@
+/**
+ * @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';
+
+import {Route} from './config';
+import {ActivatedRouteSnapshot, RouterStateSnapshot} from './router_state';
+
+
+/**
+ * @description
+ *
+ * Interface that a class can implement to be a guard deciding if a route can be activated.
+ *
+ * ```
+ * class UserToken {}
+ * class Permissions {
+ *   canActivate(user: UserToken, id: string): boolean {
+ *     return true;
+ *   }
+ * }
+ *
+ * @Injectable()
+ * class CanActivateTeam implements CanActivate {
+ *   constructor(private permissions: Permissions, private currentUser: UserToken) {}
+ *
+ *   canActivate(
+ *     route: ActivatedRouteSnapshot,
+ *     state: RouterStateSnapshot
+ *   ): Observable<boolean>|Promise<boolean>|boolean {
+ *     return this.permissions.canActivate(this.currentUser, route.params.id);
+ *   }
+ * }
+ *
+ * @NgModule({
+ *   imports: [
+ *     RouterModule.forRoot([
+ *       {
+ *         path: 'team/:id',
+ *         component: TeamCmp,
+ *         canActivate: [CanActivateTeam]
+ *       }
+ *     ])
+ *   ],
+ *   providers: [CanActivateTeam, UserToken, Permissions]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ * You can alternatively provide a function with the `canActivate` signature:
+ *
+ * ```
+ * @NgModule({
+ *   imports: [
+ *     RouterModule.forRoot([
+ *       {
+ *         path: 'team/:id',
+ *         component: TeamCmp,
+ *         canActivate: ['canActivateTeam']
+ *       }
+ *     ])
+ *   ],
+ *   providers: [
+ *     {
+ *       provide: 'canActivateTeam',
+ *       useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
+ *     }
+ *   ]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ *
+ */
+export interface CanActivate {
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
+      Observable<boolean>|Promise<boolean>|boolean;
+}
+
+/**
+ * @description
+ *
+ * Interface that a class can implement to be a guard deciding if a child route can be activated.
+ *
+ * ```
+ * class UserToken {}
+ * class Permissions {
+ *   canActivate(user: UserToken, id: string): boolean {
+ *     return true;
+ *   }
+ * }
+ *
+ * @Injectable()
+ * class CanActivateTeam implements CanActivateChild {
+ *   constructor(private permissions: Permissions, private currentUser: UserToken) {}
+ *
+ *   canActivateChild(
+ *     route: ActivatedRouteSnapshot,
+ *     state: RouterStateSnapshot
+ *   ): Observable<boolean>|Promise<boolean>|boolean {
+ *     return this.permissions.canActivate(this.currentUser, route.params.id);
+ *   }
+ * }
+ *
+ * @NgModule({
+ *   imports: [
+ *     RouterModule.forRoot([
+ *       {
+ *         path: 'root',
+ *         canActivateChild: [CanActivateTeam],
+ *         children: [
+ *           {
+ *              path: 'team/:id',
+ *              component: Team
+ *           }
+ *         ]
+ *       }
+ *     ])
+ *   ],
+ *   providers: [CanActivateTeam, UserToken, Permissions]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ * You can alternatively provide a function with the `canActivateChild` signature:
+ *
+ * ```
+ * @NgModule({
+ *   imports: [
+ *     RouterModule.forRoot([
+ *       {
+ *         path: 'root',
+ *         canActivateChild: ['canActivateTeam'],
+ *         children: [
+ *           {
+ *             path: 'team/:id',
+ *             component: Team
+ *           }
+ *         ]
+ *       }
+ *     ])
+ *   ],
+ *   providers: [
+ *     {
+ *       provide: 'canActivateTeam',
+ *       useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
+ *     }
+ *   ]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ *
+ */
+export interface CanActivateChild {
+  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot):
+      Observable<boolean>|Promise<boolean>|boolean;
+}
+
+/**
+ * @description
+ *
+ * Interface that a class can implement to be a guard deciding if a route can be deactivated.
+ *
+ * ```
+ * class UserToken {}
+ * class Permissions {
+ *   canDeactivate(user: UserToken, id: string): boolean {
+ *     return true;
+ *   }
+ * }
+ *
+ * @Injectable()
+ * class CanDeactivateTeam implements CanDeactivate<TeamComponent> {
+ *   constructor(private permissions: Permissions, private currentUser: UserToken) {}
+ *
+ *   canDeactivate(
+ *     component: TeamComponent,
+ *     currentRoute: ActivatedRouteSnapshot,
+ *     currentState: RouterStateSnapshot,
+ *     nextState: RouterStateSnapshot
+ *   ): Observable<boolean>|Promise<boolean>|boolean {
+ *     return this.permissions.canDeactivate(this.currentUser, route.params.id);
+ *   }
+ * }
+ *
+ * @NgModule({
+ *   imports: [
+ *     RouterModule.forRoot([
+ *       {
+ *         path: 'team/:id',
+ *         component: TeamCmp,
+ *         canDeactivate: [CanDeactivateTeam]
+ *       }
+ *     ])
+ *   ],
+ *   providers: [CanDeactivateTeam, UserToken, Permissions]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ * You can alternatively provide a function with the `canDeactivate` signature:
+ *
+ * ```
+ * @NgModule({
+ *   imports: [
+ *     RouterModule.forRoot([
+ *       {
+ *         path: 'team/:id',
+ *         component: TeamCmp,
+ *         canDeactivate: ['canDeactivateTeam']
+ *       }
+ *     ])
+ *   ],
+ *   providers: [
+ *     {
+ *       provide: 'canDeactivateTeam',
+ *       useValue: (component: TeamComponent, currentRoute: ActivatedRouteSnapshot, currentState:
+ * RouterStateSnapshot, nextState: RouterStateSnapshot) => true
+ *     }
+ *   ]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ *
+ */
+export interface CanDeactivate<T> {
+  canDeactivate(
+      component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot,
+      nextState?: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean;
+}
+
+/**
+ * @description
+ *
+ * Interface that class can implement to be a data provider.
+ *
+ * ```
+ * class Backend {
+ *   fetchTeam(id: string) {
+ *     return 'someTeam';
+ *   }
+ * }
+ *
+ * @Injectable()
+ * class TeamResolver implements Resolve<Team> {
+ *   constructor(private backend: Backend) {}
+ *
+ *   resolve(
+ *     route: ActivatedRouteSnapshot,
+ *     state: RouterStateSnapshot
+ *   ): Observable<any>|Promise<any>|any {
+ *     return this.backend.fetchTeam(route.params.id);
+ *   }
+ * }
+ *
+ * @NgModule({
+ *   imports: [
+ *     RouterModule.forRoot([
+ *       {
+ *         path: 'team/:id',
+ *         component: TeamCmp,
+ *         resolve: {
+ *           team: TeamResolver
+ *         }
+ *       }
+ *     ])
+ *   ],
+ *   providers: [TeamResolver]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ * You can alternatively provide a function with the `resolve` signature:
+ *
+ * ```
+ * @NgModule({
+ *   imports: [
+ *     RouterModule.forRoot([
+ *       {
+ *         path: 'team/:id',
+ *         component: TeamCmp,
+ *         resolve: {
+ *           team: 'teamResolver'
+ *         }
+ *       }
+ *     ])
+ *   ],
+ *   providers: [
+ *     {
+ *       provide: 'teamResolver',
+ *       useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => 'team'
+ *     }
+ *   ]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ */
+export interface Resolve<T> {
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T>|Promise<T>|T;
+}
+
+
+/**
+ * @description
+ *
+ * Interface that a class can implement to be a guard deciding if a children can be loaded.
+ *
+ * ```
+ * class UserToken {}
+ * class Permissions {
+ *   canLoadChildren(user: UserToken, id: string): boolean {
+ *     return true;
+ *   }
+ * }
+ *
+ * @Injectable()
+ * class CanLoadTeamSection implements CanLoad {
+ *   constructor(private permissions: Permissions, private currentUser: UserToken) {}
+ *
+ *   canLoad(route: Route): Observable<boolean>|Promise<boolean>|boolean {
+ *     return this.permissions.canLoadChildren(this.currentUser, route);
+ *   }
+ * }
+ *
+ * @NgModule({
+ *   imports: [
+ *     RouterModule.forRoot([
+ *       {
+ *         path: 'team/:id',
+ *         component: TeamCmp,
+ *         loadChildren: 'team.js',
+ *         canLoad: [CanLoadTeamSection]
+ *       }
+ *     ])
+ *   ],
+ *   providers: [CanLoadTeamSection, UserToken, Permissions]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ * You can alternatively provide a function with the `canLoad` signature:
+ *
+ * ```
+ * @NgModule({
+ *   imports: [
+ *     RouterModule.forRoot([
+ *       {
+ *         path: 'team/:id',
+ *         component: TeamCmp,
+ *         loadChildren: 'team.js',
+ *         canLoad: ['canLoadTeamSection']
+ *       }
+ *     ])
+ *   ],
+ *   providers: [
+ *     {
+ *       provide: 'canLoadTeamSection',
+ *       useValue: (route: Route) => true
+ *     }
+ *   ]
+ * })
+ * class AppModule {}
+ * ```
+ *
+ *
+ */
+export interface CanLoad { canLoad(route: Route): Observable<boolean>|Promise<boolean>|boolean; }
diff --git a/packages/router/src/pre_activation.ts b/packages/router/src/pre_activation.ts
new file mode 100644
index 000000000000..baa7bd4e2c4b
--- /dev/null
+++ b/packages/router/src/pre_activation.ts
@@ -0,0 +1,357 @@
+/**
+ * @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 '@angular/core';
+import {Observable, from, of } from 'rxjs';
+import {concatMap, every, first, last, map, mergeMap, reduce} from 'rxjs/operators';
+
+import {LoadedRouterConfig, ResolveData, RunGuardsAndResolvers} from './config';
+import {ActivationStart, ChildActivationStart, Event} from './events';
+import {ChildrenOutletContexts, OutletContext} from './router_outlet_context';
+import {ActivatedRouteSnapshot, RouterStateSnapshot, equalParamsAndUrlSegments, inheritedParamsDataResolve} from './router_state';
+import {andObservables, forEach, shallowEqual, wrapIntoObservable} from './utils/collection';
+import {TreeNode, nodeChildrenAsMap} from './utils/tree';
+
+class CanActivate {
+  readonly route: ActivatedRouteSnapshot;
+  constructor(public path: ActivatedRouteSnapshot[]) {
+    this.route = this.path[this.path.length - 1];
+  }
+}
+
+class CanDeactivate {
+  constructor(public component: Object|null, public route: ActivatedRouteSnapshot) {}
+}
+
+/**
+ * This class bundles the actions involved in preactivation of a route.
+ */
+export class PreActivation {
+  private canActivateChecks: CanActivate[] = [];
+  private canDeactivateChecks: CanDeactivate[] = [];
+
+  constructor(
+      private future: RouterStateSnapshot, private curr: RouterStateSnapshot,
+      private moduleInjector: Injector, private forwardEvent?: (evt: Event) => void) {}
+
+  initialize(parentContexts: ChildrenOutletContexts): void {
+    const futureRoot = this.future._root;
+    const currRoot = this.curr ? this.curr._root : null;
+    this.setupChildRouteGuards(futureRoot, currRoot, parentContexts, [futureRoot.value]);
+  }
+
+  checkGuards(): Observable<boolean> {
+    if (!this.isDeactivating() && !this.isActivating()) {
+      return of (true);
+    }
+    const canDeactivate$ = this.runCanDeactivateChecks();
+    return canDeactivate$.pipe(mergeMap(
+        (canDeactivate: boolean) => canDeactivate ? this.runCanActivateChecks() : of (false)));
+  }
+
+  resolveData(paramsInheritanceStrategy: 'emptyOnly'|'always'): Observable<any> {
+    if (!this.isActivating()) return of (null);
+    return from(this.canActivateChecks)
+        .pipe(
+            concatMap(
+                (check: CanActivate) => this.runResolve(check.route, paramsInheritanceStrategy)),
+            reduce((_: any, __: any) => _));
+  }
+
+  isDeactivating(): boolean { return this.canDeactivateChecks.length !== 0; }
+
+  isActivating(): boolean { return this.canActivateChecks.length !== 0; }
+
+
+  /**
+   * Iterates over child routes and calls recursive `setupRouteGuards` to get `this` instance in
+   * proper state to run `checkGuards()` method.
+   */
+  private setupChildRouteGuards(
+      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.setupRouteGuards(
+          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.deactivateRouteAndItsChildren(v, contexts !.getContext(k)));
+  }
+
+  /**
+   * Iterates over child routes and calls recursive `setupRouteGuards` to get `this` instance in
+   * proper state to run `checkGuards()` method.
+   */
+  private setupRouteGuards(
+      futureNode: TreeNode<ActivatedRouteSnapshot>, currNode: TreeNode<ActivatedRouteSnapshot>,
+      parentContexts: ChildrenOutletContexts|null, futurePath: ActivatedRouteSnapshot[]): void {
+    const future = futureNode.value;
+    const curr = currNode ? currNode.value : null;
+    const context = parentContexts ? parentContexts.getContext(futureNode.value.outlet) : null;
+
+    // reusing the node
+    if (curr && future.routeConfig === curr.routeConfig) {
+      const shouldRunGuardsAndResolvers = this.shouldRunGuardsAndResolvers(
+          curr, future, future.routeConfig !.runGuardsAndResolvers);
+      if (shouldRunGuardsAndResolvers) {
+        this.canActivateChecks.push(new CanActivate(futurePath));
+      } else {
+        // we need to set the data
+        future.data = curr.data;
+        future._resolvedData = curr._resolvedData;
+      }
+
+      // If we have a component, we need to go through an outlet.
+      if (future.component) {
+        this.setupChildRouteGuards(
+            futureNode, currNode, context ? context.children : null, futurePath);
+
+        // if we have a componentless route, we recurse but keep the same outlet map.
+      } else {
+        this.setupChildRouteGuards(futureNode, currNode, parentContexts, futurePath);
+      }
+
+      if (shouldRunGuardsAndResolvers) {
+        const outlet = context !.outlet !;
+        this.canDeactivateChecks.push(new CanDeactivate(outlet.component, curr));
+      }
+    } else {
+      if (curr) {
+        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.setupChildRouteGuards(futureNode, null, context ? context.children : null, futurePath);
+
+        // if we have a componentless route, we recurse but keep the same outlet map.
+      } else {
+        this.setupChildRouteGuards(futureNode, null, parentContexts, futurePath);
+      }
+    }
+  }
+
+  private shouldRunGuardsAndResolvers(
+      curr: ActivatedRouteSnapshot, future: ActivatedRouteSnapshot,
+      mode: RunGuardsAndResolvers|undefined): boolean {
+    switch (mode) {
+      case 'always':
+        return true;
+
+      case 'paramsOrQueryParamsChange':
+        return !equalParamsAndUrlSegments(curr, future) ||
+            !shallowEqual(curr.queryParams, future.queryParams);
+
+      case 'paramsChange':
+      default:
+        return !equalParamsAndUrlSegments(curr, future);
+    }
+  }
+
+  private deactivateRouteAndItsChildren(
+      route: TreeNode<ActivatedRouteSnapshot>, context: OutletContext|null): void {
+    const children = nodeChildrenAsMap(route);
+    const r = route.value;
+
+    forEach(children, (node: TreeNode<ActivatedRouteSnapshot>, childName: string) => {
+      if (!r.component) {
+        this.deactivateRouteAndItsChildren(node, context);
+      } else if (context) {
+        this.deactivateRouteAndItsChildren(node, context.children.getContext(childName));
+      } else {
+        this.deactivateRouteAndItsChildren(node, null);
+      }
+    });
+
+    if (!r.component) {
+      this.canDeactivateChecks.push(new CanDeactivate(null, 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));
+    }
+  }
+
+  private runCanDeactivateChecks(): Observable<boolean> {
+    return from(this.canDeactivateChecks)
+        .pipe(
+            mergeMap((check: CanDeactivate) => this.runCanDeactivate(check.component, check.route)),
+            every((result: boolean) => result === true));
+  }
+
+  private runCanActivateChecks(): Observable<boolean> {
+    return from(this.canActivateChecks)
+        .pipe(
+            concatMap((check: CanActivate) => andObservables(from([
+                        this.fireChildActivationStart(check.route.parent),
+                        this.fireActivationStart(check.route), this.runCanActivateChild(check.path),
+                        this.runCanActivate(check.route)
+                      ]))),
+            every((result: boolean) => result === true));
+    // this.fireChildActivationStart(check.path),
+  }
+
+  /**
+   * This should fire off `ActivationStart` events for each route being activated at this
+   * level.
+   * In other words, if you're activating `a` and `b` below, `path` will contain the
+   * `ActivatedRouteSnapshot`s for both and we will fire `ActivationStart` for both. Always
+   * return
+   * `true` so checks continue to run.
+   */
+  private fireActivationStart(snapshot: ActivatedRouteSnapshot|null): Observable<boolean> {
+    if (snapshot !== null && this.forwardEvent) {
+      this.forwardEvent(new ActivationStart(snapshot));
+    }
+    return of (true);
+  }
+
+  /**
+   * This should fire off `ChildActivationStart` events for each route being activated at this
+   * level.
+   * In other words, if you're activating `a` and `b` below, `path` will contain the
+   * `ActivatedRouteSnapshot`s for both and we will fire `ChildActivationStart` for both. Always
+   * return
+   * `true` so checks continue to run.
+   */
+  private fireChildActivationStart(snapshot: ActivatedRouteSnapshot|null): Observable<boolean> {
+    if (snapshot !== null && this.forwardEvent) {
+      this.forwardEvent(new ChildActivationStart(snapshot));
+    }
+    return of (true);
+  }
+
+  private runCanActivate(future: ActivatedRouteSnapshot): Observable<boolean> {
+    const canActivate = future.routeConfig ? future.routeConfig.canActivate : null;
+    if (!canActivate || canActivate.length === 0) return of (true);
+    const obs = from(canActivate).pipe(map((c: any) => {
+      const guard = this.getToken(c, future);
+      let observable: Observable<boolean>;
+      if (guard.canActivate) {
+        observable = wrapIntoObservable(guard.canActivate(future, this.future));
+      } else {
+        observable = wrapIntoObservable(guard(future, this.future));
+      }
+      return observable.pipe(first());
+    }));
+    return andObservables(obs);
+  }
+
+  private runCanActivateChild(path: ActivatedRouteSnapshot[]): Observable<boolean> {
+    const future = path[path.length - 1];
+
+    const canActivateChildGuards = path.slice(0, path.length - 1)
+                                       .reverse()
+                                       .map(p => this.extractCanActivateChild(p))
+                                       .filter(_ => _ !== null);
+
+    return andObservables(from(canActivateChildGuards).pipe(map((d: any) => {
+      const obs = from(d.guards).pipe(map((c: any) => {
+        const guard = this.getToken(c, d.node);
+        let observable: Observable<boolean>;
+        if (guard.canActivateChild) {
+          observable = wrapIntoObservable(guard.canActivateChild(future, this.future));
+        } else {
+          observable = wrapIntoObservable(guard(future, this.future));
+        }
+        return observable.pipe(first());
+      }));
+      return andObservables(obs);
+    })));
+  }
+
+  private extractCanActivateChild(p: ActivatedRouteSnapshot):
+      {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|null, curr: ActivatedRouteSnapshot):
+      Observable<boolean> {
+    const canDeactivate = curr && curr.routeConfig ? curr.routeConfig.canDeactivate : null;
+    if (!canDeactivate || canDeactivate.length === 0) return of (true);
+    const canDeactivate$ = from(canDeactivate).pipe(mergeMap((c: any) => {
+      const guard = this.getToken(c, curr);
+      let observable: Observable<boolean>;
+      if (guard.canDeactivate) {
+        observable =
+            wrapIntoObservable(guard.canDeactivate(component, curr, this.curr, this.future));
+      } else {
+        observable = wrapIntoObservable(guard(component, curr, this.curr, this.future));
+      }
+      return observable.pipe(first());
+    }));
+    return canDeactivate$.pipe(every((result: any) => result === true));
+  }
+
+  private runResolve(
+      future: ActivatedRouteSnapshot,
+      paramsInheritanceStrategy: 'emptyOnly'|'always'): Observable<any> {
+    const resolve = future._resolve;
+    return this.resolveNode(resolve, future).pipe(map((resolvedData: any): any => {
+      future._resolvedData = resolvedData;
+      future.data = {...future.data,
+                     ...inheritedParamsDataResolve(future, paramsInheritanceStrategy).resolve};
+      return null;
+    }));
+  }
+
+  private resolveNode(resolve: ResolveData, future: ActivatedRouteSnapshot): Observable<any> {
+    const keys = Object.keys(resolve);
+    if (keys.length === 0) {
+      return of ({});
+    }
+    if (keys.length === 1) {
+      const key = keys[0];
+      return this.getResolver(resolve[key], future).pipe(map((value: any) => {
+        return {[key]: value};
+      }));
+    }
+    const data: {[k: string]: any} = {};
+    const runningResolvers$ = from(keys).pipe(mergeMap((key: string) => {
+      return this.getResolver(resolve[key], future).pipe(map((value: any) => {
+        data[key] = value;
+        return value;
+      }));
+    }));
+    return runningResolvers$.pipe(last(), map(() => 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 {
+    const config = closestLoadedConfig(snapshot);
+    const injector = config ? config.module.injector : this.moduleInjector;
+    return injector.get(token);
+  }
+}
+
+
+function closestLoadedConfig(snapshot: ActivatedRouteSnapshot): LoadedRouterConfig|null {
+  if (!snapshot) return null;
+
+  for (let s = snapshot.parent; s; s = s.parent) {
+    const route = s.routeConfig;
+    if (route && route._loadedConfig) return route._loadedConfig;
+  }
+
+  return null;
+}
diff --git a/packages/router/src/private_export.ts b/packages/router/src/private_export.ts
new file mode 100644
index 000000000000..aca5be026078
--- /dev/null
+++ b/packages/router/src/private_export.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
+ */
+
+
+export {EmptyOutletComponent as ɵEmptyOutletComponent} from './components/empty_outlet';
+export {ROUTER_PROVIDERS as ɵROUTER_PROVIDERS} from './router_module';
+export {flatten as ɵflatten} from './utils/collection';
diff --git a/packages/router/src/recognize.ts b/packages/router/src/recognize.ts
new file mode 100644
index 000000000000..6c3f8b327fb3
--- /dev/null
+++ b/packages/router/src/recognize.ts
@@ -0,0 +1,337 @@
+/**
+ * @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 {Type} from '@angular/core';
+import {Observable, Observer, of } from 'rxjs';
+
+import {Data, ResolveData, Route, Routes} from './config';
+import {ActivatedRouteSnapshot, ParamsInheritanceStrategy, RouterStateSnapshot, inheritedParamsDataResolve} from './router_state';
+import {PRIMARY_OUTLET, defaultUrlMatcher} from './shared';
+import {UrlSegment, UrlSegmentGroup, UrlTree, mapChildrenIntoArray} from './url_tree';
+import {forEach, last} from './utils/collection';
+import {TreeNode} from './utils/tree';
+
+class NoMatch {}
+
+export function recognize(
+    rootComponentType: Type<any>| null, config: Routes, urlTree: UrlTree, url: string,
+    paramsInheritanceStrategy: ParamsInheritanceStrategy = 'emptyOnly',
+    relativeLinkResolution: 'legacy' | 'corrected' = 'legacy'): Observable<RouterStateSnapshot> {
+  return new Recognizer(
+             rootComponentType, config, urlTree, url, paramsInheritanceStrategy,
+             relativeLinkResolution)
+      .recognize();
+}
+
+class Recognizer {
+  constructor(
+      private rootComponentType: Type<any>|null, private config: Routes, private urlTree: UrlTree,
+      private url: string, private paramsInheritanceStrategy: ParamsInheritanceStrategy,
+      private relativeLinkResolution: 'legacy'|'corrected') {}
+
+  recognize(): Observable<RouterStateSnapshot> {
+    try {
+      const rootSegmentGroup =
+          split(this.urlTree.root, [], [], this.config, this.relativeLinkResolution).segmentGroup;
+
+      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, {});
+
+      const rootNode = new TreeNode<ActivatedRouteSnapshot>(root, children);
+      const routeState = new RouterStateSnapshot(this.url, rootNode);
+      this.inheritParamsAndData(routeState._root);
+      return of (routeState);
+
+    } catch (e) {
+      return new Observable<RouterStateSnapshot>(
+          (obs: Observer<RouterStateSnapshot>) => obs.error(e));
+    }
+  }
+
+  inheritParamsAndData(routeNode: TreeNode<ActivatedRouteSnapshot>): void {
+    const route = routeNode.value;
+
+    const i = inheritedParamsDataResolve(route, this.paramsInheritanceStrategy);
+    route.params = Object.freeze(i.params);
+    route.data = Object.freeze(i.data);
+
+    routeNode.children.forEach(n => this.inheritParamsAndData(n));
+  }
+
+  processSegmentGroup(config: Route[], segmentGroup: UrlSegmentGroup, outlet: string):
+      TreeNode<ActivatedRouteSnapshot>[] {
+    if (segmentGroup.segments.length === 0 && segmentGroup.hasChildren()) {
+      return this.processChildren(config, segmentGroup);
+    }
+
+    return this.processSegment(config, segmentGroup, segmentGroup.segments, outlet);
+  }
+
+  processChildren(config: Route[], segmentGroup: UrlSegmentGroup):
+      TreeNode<ActivatedRouteSnapshot>[] {
+    const children = mapChildrenIntoArray(
+        segmentGroup, (child, childOutlet) => this.processSegmentGroup(config, child, childOutlet));
+    checkOutletNameUniqueness(children);
+    sortActivatedRouteSnapshots(children);
+    return children;
+  }
+
+  processSegment(
+      config: Route[], segmentGroup: UrlSegmentGroup, segments: UrlSegment[],
+      outlet: string): TreeNode<ActivatedRouteSnapshot>[] {
+    for (const r of config) {
+      try {
+        return this.processSegmentAgainstRoute(r, segmentGroup, segments, outlet);
+      } catch (e) {
+        if (!(e instanceof NoMatch)) throw e;
+      }
+    }
+    if (this.noLeftoversInUrl(segmentGroup, segments, outlet)) {
+      return [];
+    }
+
+    throw new NoMatch();
+  }
+
+  private noLeftoversInUrl(segmentGroup: UrlSegmentGroup, segments: UrlSegment[], outlet: string):
+      boolean {
+    return segments.length === 0 && !segmentGroup.children[outlet];
+  }
+
+  processSegmentAgainstRoute(
+      route: Route, rawSegment: UrlSegmentGroup, segments: UrlSegment[],
+      outlet: string): TreeNode<ActivatedRouteSnapshot>[] {
+    if (route.redirectTo) throw new NoMatch();
+
+    if ((route.outlet || PRIMARY_OUTLET) !== outlet) throw new NoMatch();
+
+    let snapshot: ActivatedRouteSnapshot;
+    let consumedSegments: UrlSegment[] = [];
+    let rawSlicedSegments: UrlSegment[] = [];
+
+    if (route.path === '**') {
+      const params = segments.length > 0 ? last(segments) !.parameters : {};
+      snapshot = new ActivatedRouteSnapshot(
+          segments, params, Object.freeze({...this.urlTree.queryParams}), this.urlTree.fragment !,
+          getData(route), outlet, route.component !, route, getSourceSegmentGroup(rawSegment),
+          getPathIndexShift(rawSegment) + segments.length, getResolve(route));
+    } else {
+      const result: MatchResult = match(rawSegment, route, segments);
+      consumedSegments = result.consumedSegments;
+      rawSlicedSegments = segments.slice(result.lastChild);
+
+      snapshot = new ActivatedRouteSnapshot(
+          consumedSegments, result.parameters, Object.freeze({...this.urlTree.queryParams}),
+          this.urlTree.fragment !, getData(route), outlet, route.component !, route,
+          getSourceSegmentGroup(rawSegment),
+          getPathIndexShift(rawSegment) + consumedSegments.length, getResolve(route));
+    }
+
+    const childConfig: Route[] = getChildConfig(route);
+
+    const {segmentGroup, slicedSegments} = split(
+        rawSegment, consumedSegments, rawSlicedSegments, childConfig, this.relativeLinkResolution);
+
+    if (slicedSegments.length === 0 && segmentGroup.hasChildren()) {
+      const children = this.processChildren(childConfig, segmentGroup);
+      return [new TreeNode<ActivatedRouteSnapshot>(snapshot, children)];
+    }
+
+    if (childConfig.length === 0 && slicedSegments.length === 0) {
+      return [new TreeNode<ActivatedRouteSnapshot>(snapshot, [])];
+    }
+
+    const children = this.processSegment(childConfig, segmentGroup, slicedSegments, PRIMARY_OUTLET);
+    return [new TreeNode<ActivatedRouteSnapshot>(snapshot, children)];
+  }
+}
+
+function sortActivatedRouteSnapshots(nodes: TreeNode<ActivatedRouteSnapshot>[]): void {
+  nodes.sort((a, b) => {
+    if (a.value.outlet === PRIMARY_OUTLET) return -1;
+    if (b.value.outlet === PRIMARY_OUTLET) return 1;
+    return a.value.outlet.localeCompare(b.value.outlet);
+  });
+}
+
+function getChildConfig(route: Route): Route[] {
+  if (route.children) {
+    return route.children;
+  }
+
+  if (route.loadChildren) {
+    return route._loadedConfig !.routes;
+  }
+
+  return [];
+}
+
+interface MatchResult {
+  consumedSegments: UrlSegment[];
+  lastChild: number;
+  parameters: any;
+}
+
+function match(segmentGroup: UrlSegmentGroup, route: Route, segments: UrlSegment[]): MatchResult {
+  if (route.path === '') {
+    if (route.pathMatch === 'full' && (segmentGroup.hasChildren() || segments.length > 0)) {
+      throw new NoMatch();
+    }
+
+    return {consumedSegments: [], lastChild: 0, parameters: {}};
+  }
+
+  const matcher = route.matcher || defaultUrlMatcher;
+  const res = matcher(segments, segmentGroup, route);
+  if (!res) throw new NoMatch();
+
+  const posParams: {[n: string]: string} = {};
+  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};
+}
+
+function checkOutletNameUniqueness(nodes: TreeNode<ActivatedRouteSnapshot>[]): void {
+  const names: {[k: string]: ActivatedRouteSnapshot} = {};
+  nodes.forEach(n => {
+    const routeWithSameOutletName = names[n.value.outlet];
+    if (routeWithSameOutletName) {
+      const p = routeWithSameOutletName.url.map(s => s.toString()).join('/');
+      const c = n.value.url.map(s => s.toString()).join('/');
+      throw new Error(`Two segments cannot have the same outlet name: '${p}' and '${c}'.`);
+    }
+    names[n.value.outlet] = n.value;
+  });
+}
+
+function getSourceSegmentGroup(segmentGroup: UrlSegmentGroup): UrlSegmentGroup {
+  let s = segmentGroup;
+  while (s._sourceSegment) {
+    s = s._sourceSegment;
+  }
+  return s;
+}
+
+function getPathIndexShift(segmentGroup: UrlSegmentGroup): number {
+  let s = segmentGroup;
+  let res = (s._segmentIndexShift ? s._segmentIndexShift : 0);
+  while (s._sourceSegment) {
+    s = s._sourceSegment;
+    res += (s._segmentIndexShift ? s._segmentIndexShift : 0);
+  }
+  return res - 1;
+}
+
+function split(
+    segmentGroup: UrlSegmentGroup, consumedSegments: UrlSegment[], slicedSegments: UrlSegment[],
+    config: Route[], relativeLinkResolution: 'legacy' | 'corrected') {
+  if (slicedSegments.length > 0 &&
+      containsEmptyPathMatchesWithNamedOutlets(segmentGroup, slicedSegments, config)) {
+    const s = new UrlSegmentGroup(
+        consumedSegments, createChildrenForEmptyPaths(
+                              segmentGroup, consumedSegments, config,
+                              new UrlSegmentGroup(slicedSegments, segmentGroup.children)));
+    s._sourceSegment = segmentGroup;
+    s._segmentIndexShift = consumedSegments.length;
+    return {segmentGroup: s, slicedSegments: []};
+  }
+
+  if (slicedSegments.length === 0 &&
+      containsEmptyPathMatches(segmentGroup, slicedSegments, config)) {
+    const s = new UrlSegmentGroup(
+        segmentGroup.segments, addEmptyPathsToChildrenIfNeeded(
+                                   segmentGroup, consumedSegments, slicedSegments, config,
+                                   segmentGroup.children, relativeLinkResolution));
+    s._sourceSegment = segmentGroup;
+    s._segmentIndexShift = consumedSegments.length;
+    return {segmentGroup: s, slicedSegments};
+  }
+
+  const s = new UrlSegmentGroup(segmentGroup.segments, segmentGroup.children);
+  s._sourceSegment = segmentGroup;
+  s._segmentIndexShift = consumedSegments.length;
+  return {segmentGroup: s, slicedSegments};
+}
+
+function addEmptyPathsToChildrenIfNeeded(
+    segmentGroup: UrlSegmentGroup, consumedSegments: UrlSegment[], slicedSegments: UrlSegment[],
+    routes: Route[], children: {[name: string]: UrlSegmentGroup},
+    relativeLinkResolution: 'legacy' | 'corrected'): {[name: string]: UrlSegmentGroup} {
+  const res: {[name: string]: UrlSegmentGroup} = {};
+  for (const r of routes) {
+    if (emptyPathMatch(segmentGroup, slicedSegments, r) && !children[getOutlet(r)]) {
+      const s = new UrlSegmentGroup([], {});
+      s._sourceSegment = segmentGroup;
+      if (relativeLinkResolution === 'legacy') {
+        s._segmentIndexShift = segmentGroup.segments.length;
+      } else {
+        s._segmentIndexShift = consumedSegments.length;
+      }
+      res[getOutlet(r)] = s;
+    }
+  }
+  return {...children, ...res};
+}
+
+function createChildrenForEmptyPaths(
+    segmentGroup: UrlSegmentGroup, consumedSegments: UrlSegment[], routes: Route[],
+    primarySegment: UrlSegmentGroup): {[name: string]: UrlSegmentGroup} {
+  const res: {[name: string]: UrlSegmentGroup} = {};
+  res[PRIMARY_OUTLET] = primarySegment;
+  primarySegment._sourceSegment = segmentGroup;
+  primarySegment._segmentIndexShift = consumedSegments.length;
+
+  for (const r of routes) {
+    if (r.path === '' && getOutlet(r) !== PRIMARY_OUTLET) {
+      const s = new UrlSegmentGroup([], {});
+      s._sourceSegment = segmentGroup;
+      s._segmentIndexShift = consumedSegments.length;
+      res[getOutlet(r)] = s;
+    }
+  }
+  return res;
+}
+
+function containsEmptyPathMatchesWithNamedOutlets(
+    segmentGroup: UrlSegmentGroup, slicedSegments: UrlSegment[], routes: Route[]): boolean {
+  return routes.some(
+      r => emptyPathMatch(segmentGroup, slicedSegments, r) && getOutlet(r) !== PRIMARY_OUTLET);
+}
+
+function containsEmptyPathMatches(
+    segmentGroup: UrlSegmentGroup, slicedSegments: UrlSegment[], routes: Route[]): boolean {
+  return routes.some(r => emptyPathMatch(segmentGroup, slicedSegments, r));
+}
+
+function emptyPathMatch(
+    segmentGroup: UrlSegmentGroup, slicedSegments: UrlSegment[], r: Route): boolean {
+  if ((segmentGroup.hasChildren() || slicedSegments.length > 0) && r.pathMatch === 'full') {
+    return false;
+  }
+
+  return r.path === '' && r.redirectTo === undefined;
+}
+
+function getOutlet(route: Route): string {
+  return route.outlet || PRIMARY_OUTLET;
+}
+
+function getData(route: Route): Data {
+  return route.data || {};
+}
+
+function getResolve(route: Route): ResolveData {
+  return route.resolve || {};
+}
diff --git a/packages/router/src/route_reuse_strategy.ts b/packages/router/src/route_reuse_strategy.ts
new file mode 100644
index 000000000000..225acaa207b0
--- /dev/null
+++ b/packages/router/src/route_reuse_strategy.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 {ComponentRef} from '@angular/core';
+
+import {OutletContext} from './router_outlet_context';
+import {ActivatedRoute, ActivatedRouteSnapshot} from './router_state';
+import {TreeNode} from './utils/tree';
+
+/**
+ * @description
+ *
+ * Represents the detached route tree.
+ *
+ * This is an opaque value the router will give to a custom route reuse strategy
+ * to store and retrieve later on.
+ *
+ * @experimental
+ */
+export type DetachedRouteHandle = {};
+
+/** @internal */
+export type DetachedRouteHandleInternal = {
+  contexts: Map<string, OutletContext>,
+  componentRef: ComponentRef<any>,
+  route: TreeNode<ActivatedRoute>,
+};
+
+/**
+ * @description
+ *
+ * Provides a way to customize when activated routes get reused.
+ *
+ * @experimental
+ */
+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.
+   *
+   * 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|null;
+
+  /** Determines if a route should be reused */
+  abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
+}
+
+/**
+ * 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
new file mode 100644
index 000000000000..8ce079e304bb
--- /dev/null
+++ b/packages/router/src/router.ts
@@ -0,0 +1,1073 @@
+/**
+ * @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 '@angular/common';
+import {Compiler, Injector, NgModuleFactoryLoader, NgModuleRef, Type, isDevMode} from '@angular/core';
+import {BehaviorSubject, Observable, Subject, Subscription, of } from 'rxjs';
+import {concatMap, map, mergeMap} from 'rxjs/operators';
+
+import {applyRedirects} from './apply_redirects';
+import {LoadedRouterConfig, QueryParamsHandling, Route, Routes, standardizeConfig, validateConfig} from './config';
+import {createRouterState} from './create_router_state';
+import {createUrlTree} from './create_url_tree';
+import {ActivationEnd, ChildActivationEnd, Event, GuardsCheckEnd, GuardsCheckStart, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, NavigationTrigger, ResolveEnd, ResolveStart, RouteConfigLoadEnd, RouteConfigLoadStart, RoutesRecognized} from './events';
+import {PreActivation} from './pre_activation';
+import {recognize} from './recognize';
+import {DefaultRouteReuseStrategy, DetachedRouteHandleInternal, RouteReuseStrategy} from './route_reuse_strategy';
+import {RouterConfigLoader} from './router_config_loader';
+import {ChildrenOutletContexts} from './router_outlet_context';
+import {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot, advanceActivatedRoute, createEmptyState, inheritedParamsDataResolve} from './router_state';
+import {Params, isNavigationCancelingError} from './shared';
+import {DefaultUrlHandlingStrategy, UrlHandlingStrategy} from './url_handling_strategy';
+import {UrlSerializer, UrlTree, containsTree, createEmptyUrlTree} from './url_tree';
+import {forEach} from './utils/collection';
+import {TreeNode, nodeChildrenAsMap} from './utils/tree';
+
+
+/**
+ * @description
+ *
+ * Represents the extra options used during navigation.
+ *
+ *
+ */
+export interface NavigationExtras {
+  /**
+   * Enables relative navigation from the current ActivatedRoute.
+   *
+   * Configuration:
+   *
+   * ```
+   * [{
+  *   path: 'parent',
+  *   component: ParentComponent,
+  *   children: [{
+  *     path: 'list',
+  *     component: ListComponent
+  *   },{
+  *     path: 'child',
+  *     component: ChildComponent
+  *   }]
+  * }]
+   * ```
+   *
+   * Navigate to list route from child route:
+   *
+   * ```
+   *  @Component({...})
+   *  class ChildComponent {
+  *    constructor(private router: Router, private route: ActivatedRoute) {}
+  *
+  *    go() {
+  *      this.router.navigate(['../list'], { relativeTo: this.route });
+  *    }
+  *  }
+   * ```
+   */
+  relativeTo?: ActivatedRoute|null;
+
+  /**
+   * Sets query parameters to the URL.
+   *
+   * ```
+   * // Navigate to /results?page=1
+   * this.router.navigate(['/results'], { queryParams: { page: 1 } });
+   * ```
+   */
+  queryParams?: Params|null;
+
+  /**
+   * Sets the hash fragment for the URL.
+   *
+   * ```
+   * // Navigate to /results#top
+   * this.router.navigate(['/results'], { fragment: 'top' });
+   * ```
+   */
+  fragment?: string;
+
+  /**
+   * Preserves the query parameters for the next navigation.
+   *
+   * deprecated, use `queryParamsHandling` instead
+   *
+   * ```
+   * // Preserve query params from /results?page=1 to /view?page=1
+   * this.router.navigate(['/view'], { preserveQueryParams: true });
+   * ```
+   *
+   * @deprecated since v4
+   */
+  preserveQueryParams?: boolean;
+
+  /**
+   *  config strategy to handle the query parameters for the next navigation.
+   *
+   * ```
+   * // from /results?page=1 to /view?page=1&page=2
+   * this.router.navigate(['/view'], { queryParams: { page: 2 },  queryParamsHandling: "merge" });
+   * ```
+   */
+  queryParamsHandling?: QueryParamsHandling|null;
+  /**
+   * Preserves the fragment for the next navigation
+   *
+   * ```
+   * // Preserve fragment from /results#top to /view#top
+   * this.router.navigate(['/view'], { preserveFragment: true });
+   * ```
+   */
+  preserveFragment?: boolean;
+  /**
+   * Navigates without pushing a new state into history.
+   *
+   * ```
+   * // Navigate silently to /view
+   * this.router.navigate(['/view'], { skipLocationChange: true });
+   * ```
+   */
+  skipLocationChange?: boolean;
+  /**
+   * Navigates while replacing the current state in history.
+   *
+   * ```
+   * // Navigate to /view
+   * this.router.navigate(['/view'], { replaceUrl: true });
+   * ```
+   */
+  replaceUrl?: boolean;
+}
+
+/**
+ * @description
+ *
+ * Error handler that is invoked when a navigation errors.
+ *
+ * If the handler returns a value, the navigation promise will be resolved with this value.
+ * If the handler throws an exception, the navigation promise will be rejected with
+ * the exception.
+ *
+ *
+ */
+export type ErrorHandler = (error: any) => any;
+
+function defaultErrorHandler(error: any): any {
+  throw error;
+}
+
+function defaultMalformedUriErrorHandler(
+    error: URIError, urlSerializer: UrlSerializer, url: string): UrlTree {
+  return urlSerializer.parse('/');
+}
+
+type NavStreamValue =
+    boolean | {appliedUrl: UrlTree, snapshot: RouterStateSnapshot, shouldActivate?: boolean};
+
+type NavigationParams = {
+  id: number,
+  rawUrl: UrlTree,
+  extras: NavigationExtras,
+  resolve: any,
+  reject: any,
+  promise: Promise<boolean>,
+  source: NavigationTrigger,
+  state: {navigationId: number} | null
+};
+
+/**
+ * @internal
+ */
+export type RouterHook = (snapshot: RouterStateSnapshot, runExtras: {
+  appliedUrlTree: UrlTree,
+  rawUrlTree: UrlTree,
+  skipLocationChange: boolean,
+  replaceUrl: boolean,
+  navigationId: number
+}) => Observable<void>;
+
+/**
+ * @internal
+ */
+function defaultRouterHook(snapshot: RouterStateSnapshot, runExtras: {
+  appliedUrlTree: UrlTree,
+  rawUrlTree: UrlTree,
+  skipLocationChange: boolean,
+  replaceUrl: boolean,
+  navigationId: number
+}): Observable<void> {
+  return of (null) as any;
+}
+
+/**
+ * @description
+ *
+ * Provides the navigation and url manipulation capabilities.
+ *
+ * See `Routes` for more details and examples.
+ *
+ * @ngModule RouterModule
+ *
+ *
+ */
+export class Router {
+  private currentUrlTree: UrlTree;
+  private rawUrlTree: UrlTree;
+  private navigations = new BehaviorSubject<NavigationParams>(null !);
+
+  // TODO(issue/24571): remove '!'.
+  private locationSubscription !: Subscription;
+  private navigationId: number = 0;
+  private configLoader: RouterConfigLoader;
+  private ngModule: NgModuleRef<any>;
+
+  public readonly events: Observable<Event> = new Subject<Event>();
+  public readonly routerState: RouterState;
+
+  /**
+   * Error handler that is invoked when a navigation errors.
+   *
+   * See `ErrorHandler` for more information.
+   */
+  errorHandler: ErrorHandler = defaultErrorHandler;
+
+  /**
+   * Malformed uri error handler is invoked when `Router.parseUrl(url)` throws an
+   * error due to containing an invalid character. The most common case would be a `%` sign
+   * that's not encoded and is not part of a percent encoded sequence.
+   */
+  malformedUriErrorHandler:
+      (error: URIError, urlSerializer: UrlSerializer,
+       url: string) => UrlTree = defaultMalformedUriErrorHandler;
+
+  /**
+   * Indicates if at least one navigation happened.
+   */
+  navigated: boolean = false;
+  private lastSuccessfulId: number = -1;
+
+  /**
+   * Used by RouterModule. This allows us to
+   * pause the navigation either before preactivation or after it.
+   * @internal
+   */
+  hooks: {beforePreactivation: RouterHook, afterPreactivation: RouterHook} = {
+    beforePreactivation: defaultRouterHook,
+    afterPreactivation: defaultRouterHook
+  };
+
+  /**
+   * Extracts and merges URLs. Used for AngularJS to Angular migrations.
+   */
+  urlHandlingStrategy: UrlHandlingStrategy = new DefaultUrlHandlingStrategy();
+
+  routeReuseStrategy: RouteReuseStrategy = new DefaultRouteReuseStrategy();
+
+  /**
+   * Define what the router should do if it receives a navigation request to the current URL.
+   * By default, the router will ignore this navigation. However, this prevents features such
+   * as a "refresh" button. Use this option to configure the behavior when navigating to the
+   * current URL. Default is 'ignore'.
+   */
+  onSameUrlNavigation: 'reload'|'ignore' = 'ignore';
+
+  /**
+   * Defines how the router merges params, data and resolved data from parent to child
+   * routes. Available options are:
+   *
+   * - `'emptyOnly'`, the default, only inherits parent params for path-less or component-less
+   *   routes.
+   * - `'always'`, enables unconditional inheritance of parent params.
+   */
+  paramsInheritanceStrategy: 'emptyOnly'|'always' = 'emptyOnly';
+
+  /**
+   * Defines when the router updates the browser URL. The default behavior is to update after
+   * successful navigation. However, some applications may prefer a mode where the URL gets
+   * updated at the beginning of navigation. The most common use case would be updating the
+   * URL early so if navigation fails, you can show an error message with the URL that failed.
+   * Available options are:
+   *
+   * - `'deferred'`, the default, updates the browser URL after navigation has finished.
+   * - `'eager'`, updates browser URL at the beginning of navigation.
+   */
+  urlUpdateStrategy: 'deferred'|'eager' = 'deferred';
+
+  /**
+   * See {@link RouterModule} for more information.
+   */
+  relativeLinkResolution: 'legacy'|'corrected' = 'legacy';
+
+  /**
+   * Creates the router service.
+   */
+  // TODO: vsavkin make internal after the final is out.
+  constructor(
+      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));
+
+    this.ngModule = injector.get(NgModuleRef);
+
+    this.resetConfig(config);
+    this.currentUrlTree = createEmptyUrlTree();
+    this.rawUrlTree = this.currentUrlTree;
+
+    this.configLoader = new RouterConfigLoader(loader, compiler, onLoadStart, onLoadEnd);
+    this.routerState = createEmptyState(this.currentUrlTree, this.rootComponentType);
+    this.processNavigations();
+  }
+
+  /**
+   * @internal
+   * TODO: this should be removed once the constructor of the router made internal
+   */
+  resetRootComponentType(rootComponentType: Type<any>): void {
+    this.rootComponentType = rootComponentType;
+    // TODO: vsavkin router 4.0 should make the root component set to null
+    // this will simplify the lifecycle of the router.
+    this.routerState.root.component = this.rootComponentType;
+  }
+
+  /**
+   * Sets up the location change listener and performs the initial navigation.
+   */
+  initialNavigation(): void {
+    this.setUpLocationChangeListener();
+    if (this.navigationId === 0) {
+      this.navigateByUrl(this.location.path(true), {replaceUrl: true});
+    }
+  }
+
+  /**
+   * Sets up the location change listener.
+   */
+  setUpLocationChangeListener(): void {
+    // Don't need to use Zone.wrap any more, because zone.js
+    // already patch onPopState, so location change callback will
+    // run into ngZone
+    if (!this.locationSubscription) {
+      this.locationSubscription = <any>this.location.subscribe((change: any) => {
+        let rawUrlTree = this.parseUrl(change['url']);
+        const source: NavigationTrigger = change['type'] === 'popstate' ? 'popstate' : 'hashchange';
+        const state = change.state && change.state.navigationId ?
+            {navigationId: change.state.navigationId} :
+            null;
+        setTimeout(
+            () => { this.scheduleNavigation(rawUrlTree, source, state, {replaceUrl: true}); }, 0);
+      });
+    }
+  }
+
+  /** The current url */
+  get url(): string { return this.serializeUrl(this.currentUrlTree); }
+
+  /** @internal */
+  triggerEvent(e: Event): void { (this.events as Subject<Event>).next(e); }
+
+  /**
+   * Resets the configuration used for navigation and generating links.
+   *
+   * ### Usage
+   *
+   * ```
+   * router.resetConfig([
+   *  { path: 'team/:id', component: TeamCmp, children: [
+   *    { path: 'simple', component: SimpleCmp },
+   *    { path: 'user/:name', component: UserCmp }
+   *  ]}
+   * ]);
+   * ```
+   */
+  resetConfig(config: Routes): void {
+    validateConfig(config);
+    this.config = config.map(standardizeConfig);
+    this.navigated = false;
+    this.lastSuccessfulId = -1;
+  }
+
+  /** @docsNotRequired */
+  ngOnDestroy(): void { this.dispose(); }
+
+  /** Disposes of the router */
+  dispose(): void {
+    if (this.locationSubscription) {
+      this.locationSubscription.unsubscribe();
+      this.locationSubscription = null !;
+    }
+  }
+
+  /**
+   * Applies an array of commands to the current url tree and creates a new url tree.
+   *
+   * When given an activate route, applies the given commands starting from the route.
+   * When not given a route, applies the given command starting from the root.
+   *
+   * ### Usage
+   *
+   * ```
+   * // create /team/33/user/11
+   * router.createUrlTree(['/team', 33, 'user', 11]);
+   *
+   * // create /team/33;expand=true/user/11
+   * router.createUrlTree(['/team', 33, {expand: true}, 'user', 11]);
+   *
+   * // you can collapse static segments like this (this works only with the first passed-in value):
+   * router.createUrlTree(['/team/33/user', userId]);
+   *
+   * // If the first segment can contain slashes, and you do not want the router to split it, you
+   * // can do the following:
+   *
+   * router.createUrlTree([{segmentPath: '/one/two'}]);
+   *
+   * // create /team/33/(user/11//right:chat)
+   * router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]);
+   *
+   * // remove the right secondary node
+   * router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]);
+   *
+   * // assuming the current url is `/team/33/user/11` and the route points to `user/11`
+   *
+   * // navigate to /team/33/user/11/details
+   * router.createUrlTree(['details'], {relativeTo: route});
+   *
+   * // navigate to /team/33/user/22
+   * router.createUrlTree(['../22'], {relativeTo: route});
+   *
+   * // navigate to /team/44/user/22
+   * router.createUrlTree(['../../team/44/user/22'], {relativeTo: route});
+   * ```
+   */
+  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 = null;
+    if (queryParamsHandling) {
+      switch (queryParamsHandling) {
+        case 'merge':
+          q = {...this.currentUrlTree.queryParams, ...queryParams};
+          break;
+        case 'preserve':
+          q = this.currentUrlTree.queryParams;
+          break;
+        default:
+          q = queryParams || null;
+      }
+    } else {
+      q = preserveQueryParams ? this.currentUrlTree.queryParams : queryParams || null;
+    }
+    if (q !== null) {
+      q = this.removeEmptyProps(q);
+    }
+    return createUrlTree(a, this.currentUrlTree, commands, q !, f !);
+  }
+
+  /**
+   * Navigate based on the provided url. This navigation is always absolute.
+   *
+   * Returns a promise that:
+   * - resolves to 'true' when navigation succeeds,
+   * - resolves to 'false' when navigation fails,
+   * - is rejected when an error happens.
+   *
+   * ### Usage
+   *
+   * ```
+   * router.navigateByUrl("/team/33/user/11");
+   *
+   * // Navigate without updating the URL
+   * router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });
+   * ```
+   *
+   * In opposite to `navigate`, `navigateByUrl` takes a whole URL
+   * and does not apply any delta to the current one.
+   */
+  navigateByUrl(url: string|UrlTree, extras: NavigationExtras = {skipLocationChange: false}):
+      Promise<boolean> {
+    const urlTree = url instanceof UrlTree ? url : this.parseUrl(url);
+    const mergedTree = this.urlHandlingStrategy.merge(urlTree, this.rawUrlTree);
+
+    return this.scheduleNavigation(mergedTree, 'imperative', null, extras);
+  }
+
+  /**
+   * Navigate based on the provided array of commands and a starting point.
+   * If no starting route is provided, the navigation is absolute.
+   *
+   * Returns a promise that:
+   * - resolves to 'true' when navigation succeeds,
+   * - resolves to 'false' when navigation fails,
+   * - is rejected when an error happens.
+   *
+   * ### Usage
+   *
+   * ```
+   * router.navigate(['team', 33, 'user', 11], {relativeTo: route});
+   *
+   * // Navigate without updating the URL
+   * router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});
+   * ```
+   *
+   * In opposite to `navigateByUrl`, `navigate` always takes a delta that is applied to the current
+   * URL.
+   */
+  navigate(commands: any[], extras: NavigationExtras = {skipLocationChange: false}):
+      Promise<boolean> {
+    validateCommands(commands);
+    return this.navigateByUrl(this.createUrlTree(commands, extras), extras);
+  }
+
+  /** Serializes a `UrlTree` into a string */
+  serializeUrl(url: UrlTree): string { return this.urlSerializer.serialize(url); }
+
+  /** Parses a string into a `UrlTree` */
+  parseUrl(url: string): UrlTree {
+    let urlTree: UrlTree;
+    try {
+      urlTree = this.urlSerializer.parse(url);
+    } catch (e) {
+      urlTree = this.malformedUriErrorHandler(e, this.urlSerializer, url);
+    }
+    return urlTree;
+  }
+
+  /** Returns whether the url is activated */
+  isActive(url: string|UrlTree, exact: boolean): boolean {
+    if (url instanceof UrlTree) {
+      return containsTree(this.currentUrlTree, url, exact);
+    }
+
+    const urlTree = this.parseUrl(url);
+    return containsTree(this.currentUrlTree, urlTree, exact);
+  }
+
+  private removeEmptyProps(params: Params): Params {
+    return Object.keys(params).reduce((result: Params, key: string) => {
+      const value: any = params[key];
+      if (value !== null && value !== undefined) {
+        result[key] = value;
+      }
+      return result;
+    }, {});
+  }
+
+  private processNavigations(): void {
+    this.navigations
+        .pipe(concatMap((nav: NavigationParams) => {
+          if (nav) {
+            this.executeScheduledNavigation(nav);
+            // a failed navigation should not stop the router from processing
+            // further navigations => the catch
+            return nav.promise.catch(() => {});
+          } else {
+            return <any>of (null);
+          }
+        }))
+        .subscribe(() => {});
+  }
+
+  private scheduleNavigation(
+      rawUrl: UrlTree, source: NavigationTrigger, state: {navigationId: number}|null,
+      extras: NavigationExtras): Promise<boolean> {
+    const lastNavigation = this.navigations.value;
+    // If the user triggers a navigation imperatively (e.g., by using navigateByUrl),
+    // and that navigation results in 'replaceState' that leads to the same URL,
+    // we should skip those.
+    if (lastNavigation && source !== 'imperative' && lastNavigation.source === 'imperative' &&
+        lastNavigation.rawUrl.toString() === rawUrl.toString()) {
+      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
+    // hashchange) every single time. The second one should be ignored. Otherwise, the URL will
+    // flicker. Handles the case when a popstate was emitted first.
+    if (lastNavigation && source == 'hashchange' && lastNavigation.source === 'popstate' &&
+        lastNavigation.rawUrl.toString() === rawUrl.toString()) {
+      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
+    // hashchange) every single time. The second one should be ignored. Otherwise, the URL will
+    // flicker. Handles the case when a hashchange was emitted first.
+    if (lastNavigation && source == 'popstate' && lastNavigation.source === 'hashchange' &&
+        lastNavigation.rawUrl.toString() === rawUrl.toString()) {
+      return Promise.resolve(true);  // return value is not used
+    }
+
+    let resolve: any = null;
+    let reject: any = null;
+
+    const promise = new Promise<boolean>((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+
+    const id = ++this.navigationId;
+    this.navigations.next({id, source, state, rawUrl, extras, resolve, reject, promise});
+
+    // Make sure that the error is propagated even though `processNavigations` catch
+    // handler does not rethrow
+    return promise.catch((e: any) => Promise.reject(e));
+  }
+
+  private executeScheduledNavigation({id, rawUrl, extras, resolve, reject, source,
+                                      state}: NavigationParams): void {
+    const url = this.urlHandlingStrategy.extract(rawUrl);
+    const urlTransition = !this.navigated || url.toString() !== this.currentUrlTree.toString();
+
+    if ((this.onSameUrlNavigation === 'reload' ? true : urlTransition) &&
+        this.urlHandlingStrategy.shouldProcessUrl(rawUrl)) {
+      if (this.urlUpdateStrategy === 'eager' && !extras.skipLocationChange) {
+        this.setBrowserUrl(rawUrl, !!extras.replaceUrl, id);
+      }
+      (this.events as Subject<Event>)
+          .next(new NavigationStart(id, this.serializeUrl(url), source, state));
+      Promise.resolve()
+          .then(
+              (_) => this.runNavigate(
+                  url, rawUrl, !!extras.skipLocationChange, !!extras.replaceUrl, id, null))
+          .then(resolve, reject);
+
+      // we cannot process the current URL, but we could process the previous one =>
+      // we need to do some cleanup
+    } else if (
+        urlTransition && this.rawUrlTree &&
+        this.urlHandlingStrategy.shouldProcessUrl(this.rawUrlTree)) {
+      (this.events as Subject<Event>)
+          .next(new NavigationStart(id, this.serializeUrl(url), source, state));
+      Promise.resolve()
+          .then(
+              (_) => this.runNavigate(
+                  url, rawUrl, false, false, id,
+                  createEmptyState(url, this.rootComponentType).snapshot))
+          .then(resolve, reject);
+
+    } else {
+      this.rawUrlTree = rawUrl;
+      resolve(null);
+    }
+  }
+
+  private runNavigate(
+      url: UrlTree, rawUrl: UrlTree, skipLocationChange: boolean, replaceUrl: boolean, id: number,
+      precreatedState: RouterStateSnapshot|null): Promise<boolean> {
+    if (id !== this.navigationId) {
+      (this.events as Subject<Event>)
+          .next(new NavigationCancel(
+              id, this.serializeUrl(url),
+              `Navigation ID ${id} is not equal to the current navigation id ${this.navigationId}`));
+      return Promise.resolve(false);
+    }
+
+    return new Promise((resolvePromise, rejectPromise) => {
+      // create an observable of the url and route state snapshot
+      // this operation do not result in any side effects
+      let urlAndSnapshot$: Observable<NavStreamValue>;
+      if (!precreatedState) {
+        const moduleInjector = this.ngModule.injector;
+        const redirectsApplied$ =
+            applyRedirects(moduleInjector, this.configLoader, this.urlSerializer, url, this.config);
+
+        urlAndSnapshot$ = redirectsApplied$.pipe(mergeMap((appliedUrl: UrlTree) => {
+          return recognize(
+                     this.rootComponentType, this.config, appliedUrl, this.serializeUrl(appliedUrl),
+                     this.paramsInheritanceStrategy, this.relativeLinkResolution)
+              .pipe(map((snapshot: any) => {
+                (this.events as Subject<Event>)
+                    .next(new RoutesRecognized(
+                        id, this.serializeUrl(url), this.serializeUrl(appliedUrl), snapshot));
+
+                return {appliedUrl, snapshot};
+              }));
+        }));
+      } else {
+        urlAndSnapshot$ = of ({appliedUrl: url, snapshot: precreatedState});
+      }
+
+      const beforePreactivationDone$ =
+          urlAndSnapshot$.pipe(mergeMap((p): Observable<NavStreamValue> => {
+            if (typeof p === 'boolean') return of (p);
+            return this.hooks
+                .beforePreactivation(p.snapshot, {
+                  navigationId: id,
+                  appliedUrlTree: url,
+                  rawUrlTree: rawUrl, skipLocationChange, replaceUrl,
+                })
+                .pipe(map(() => p));
+          }));
+
+      // run preactivation: guards and data resolvers
+      let preActivation: PreActivation;
+
+      const preactivationSetup$ = beforePreactivationDone$.pipe(map((p): NavStreamValue => {
+        if (typeof p === 'boolean') return p;
+        const {appliedUrl, snapshot} = p;
+        const moduleInjector = this.ngModule.injector;
+        preActivation = new PreActivation(
+            snapshot, this.routerState.snapshot, moduleInjector,
+            (evt: Event) => this.triggerEvent(evt));
+        preActivation.initialize(this.rootContexts);
+        return {appliedUrl, snapshot};
+      }));
+
+      const preactivationCheckGuards$ =
+          preactivationSetup$.pipe(mergeMap((p): Observable<NavStreamValue> => {
+            if (typeof p === 'boolean' || this.navigationId !== id) return of (false);
+            const {appliedUrl, snapshot} = p;
+
+            this.triggerEvent(new GuardsCheckStart(
+                id, this.serializeUrl(url), this.serializeUrl(appliedUrl), snapshot));
+
+            return preActivation.checkGuards().pipe(map((shouldActivate: boolean) => {
+              this.triggerEvent(new GuardsCheckEnd(
+                  id, this.serializeUrl(url), this.serializeUrl(appliedUrl), snapshot,
+                  shouldActivate));
+              return {appliedUrl: appliedUrl, snapshot: snapshot, shouldActivate: shouldActivate};
+            }));
+          }));
+
+      const preactivationResolveData$ =
+          preactivationCheckGuards$.pipe(mergeMap((p): Observable<NavStreamValue> => {
+            if (typeof p === 'boolean' || this.navigationId !== id) return of (false);
+
+            if (p.shouldActivate && preActivation.isActivating()) {
+              this.triggerEvent(new ResolveStart(
+                  id, this.serializeUrl(url), this.serializeUrl(p.appliedUrl), p.snapshot));
+              return preActivation.resolveData(this.paramsInheritanceStrategy).pipe(map(() => {
+                this.triggerEvent(new ResolveEnd(
+                    id, this.serializeUrl(url), this.serializeUrl(p.appliedUrl), p.snapshot));
+                return p;
+              }));
+            } else {
+              return of (p);
+            }
+          }));
+
+      const preactivationDone$ =
+          preactivationResolveData$.pipe(mergeMap((p): Observable<NavStreamValue> => {
+            if (typeof p === 'boolean' || this.navigationId !== id) return of (false);
+            return this.hooks
+                .afterPreactivation(p.snapshot, {
+                  navigationId: id,
+                  appliedUrlTree: url,
+                  rawUrlTree: rawUrl, skipLocationChange, replaceUrl,
+                })
+                .pipe(map(() => p));
+          }));
+
+
+      // create router state
+      // this operation has side effects => route state is being affected
+      const routerState$ = preactivationDone$.pipe(map((p) => {
+        if (typeof p === 'boolean' || this.navigationId !== id) return false;
+        const {appliedUrl, snapshot, shouldActivate} = p;
+        if (shouldActivate) {
+          const state = createRouterState(this.routeReuseStrategy, snapshot, this.routerState);
+          return {appliedUrl, state, shouldActivate};
+        } else {
+          return {appliedUrl, state: null, shouldActivate};
+        }
+      }));
+
+
+      this.activateRoutes(
+          routerState$, this.routerState, this.currentUrlTree, id, url, rawUrl, skipLocationChange,
+          replaceUrl, resolvePromise, rejectPromise);
+    });
+  }
+
+  /**
+   * Performs the logic of activating routes. This is a synchronous process by default. While this
+   * is a private method, it could be overridden to make activation asynchronous.
+   */
+  private activateRoutes(
+      state: Observable<false|
+                        {appliedUrl: UrlTree, state: RouterState|null, shouldActivate?: boolean}>,
+      storedState: RouterState, storedUrl: UrlTree, id: number, url: UrlTree, rawUrl: UrlTree,
+      skipLocationChange: boolean, replaceUrl: boolean, resolvePromise: any, rejectPromise: any) {
+    // applied the new router state
+    // this operation has side effects
+    let navigationIsSuccessful: boolean;
+
+    state
+        .forEach((p) => {
+          if (typeof p === 'boolean' || !p.shouldActivate || id !== this.navigationId || !p.state) {
+            navigationIsSuccessful = false;
+            return;
+          }
+          const {appliedUrl, state} = p;
+          this.currentUrlTree = appliedUrl;
+          this.rawUrlTree = this.urlHandlingStrategy.merge(this.currentUrlTree, rawUrl);
+
+          (this as{routerState: RouterState}).routerState = state;
+
+          if (this.urlUpdateStrategy === 'deferred' && !skipLocationChange) {
+            this.setBrowserUrl(this.rawUrlTree, replaceUrl, id);
+          }
+
+          new ActivateRoutes(
+              this.routeReuseStrategy, state, storedState, (evt: Event) => this.triggerEvent(evt))
+              .activate(this.rootContexts);
+
+          navigationIsSuccessful = true;
+        })
+        .then(
+            () => {
+              if (navigationIsSuccessful) {
+                this.navigated = true;
+                this.lastSuccessfulId = id;
+                (this.events as Subject<Event>)
+                    .next(new NavigationEnd(
+                        id, this.serializeUrl(url), this.serializeUrl(this.currentUrlTree)));
+                resolvePromise(true);
+              } else {
+                this.resetUrlToCurrentUrlTree();
+                (this.events as Subject<Event>)
+                    .next(new NavigationCancel(id, this.serializeUrl(url), ''));
+                resolvePromise(false);
+              }
+            },
+            (e: any) => {
+              if (isNavigationCancelingError(e)) {
+                this.navigated = true;
+                this.resetStateAndUrl(storedState, storedUrl, rawUrl);
+                (this.events as Subject<Event>)
+                    .next(new NavigationCancel(id, this.serializeUrl(url), e.message));
+
+                resolvePromise(false);
+              } else {
+                this.resetStateAndUrl(storedState, storedUrl, rawUrl);
+                (this.events as Subject<Event>)
+                    .next(new NavigationError(id, this.serializeUrl(url), e));
+                try {
+                  resolvePromise(this.errorHandler(e));
+                } catch (ee) {
+                  rejectPromise(ee);
+                }
+              }
+            });
+  }
+
+  private setBrowserUrl(url: UrlTree, replaceUrl: boolean, id: number) {
+    const path = this.urlSerializer.serialize(url);
+    if (this.location.isCurrentPathEqualTo(path) || replaceUrl) {
+      this.location.replaceState(path, '', {navigationId: id});
+    } else {
+      this.location.go(path, '', {navigationId: id});
+    }
+  }
+
+  private resetStateAndUrl(storedState: RouterState, storedUrl: UrlTree, rawUrl: UrlTree): void {
+    (this as{routerState: RouterState}).routerState = storedState;
+    this.currentUrlTree = storedUrl;
+    this.rawUrlTree = this.urlHandlingStrategy.merge(this.currentUrlTree, rawUrl);
+    this.resetUrlToCurrentUrlTree();
+  }
+
+  private resetUrlToCurrentUrlTree(): void {
+    this.location.replaceState(
+        this.urlSerializer.serialize(this.rawUrlTree), '', {navigationId: this.lastSuccessfulId});
+  }
+}
+
+class ActivateRoutes {
+  constructor(
+      private routeReuseStrategy: RouteReuseStrategy, private futureState: RouterState,
+      private currState: RouterState, private forwardEvent: (evt: Event) => void) {}
+
+  activate(parentContexts: ChildrenOutletContexts): void {
+    const futureRoot = this.futureState._root;
+    const currRoot = this.currState ? this.currState._root : null;
+
+    this.deactivateChildRoutes(futureRoot, currRoot, parentContexts);
+    advanceActivatedRoute(this.futureState.root);
+    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>|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);
+    });
+  }
+
+  private deactivateRoutes(
+      futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute>,
+      parentContext: ChildrenOutletContexts): void {
+    const future = futureNode.value;
+    const curr = currNode ? currNode.value : null;
+
+    if (future === curr) {
+      // Reusing the node, check to see if the children need to be de-activated
+      if (future.component) {
+        // 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 {
+        // if we have a componentless route, we recurse but keep the same outlet map.
+        this.deactivateChildRoutes(futureNode, currNode, parentContext);
+      }
+    } else {
+      if (curr) {
+        // Deactivate the current route which will not be re-used
+        this.deactivateRouteAndItsChildren(currNode, parentContext);
+      }
+    }
+  }
+
+  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);
+      this.forwardEvent(new ActivationEnd(c.value.snapshot));
+    });
+    if (futureNode.children.length) {
+      this.forwardEvent(new ChildActivationEnd(futureNode.value.snapshot));
+    }
+  }
+
+  private activateRoutes(
+      futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute>,
+      parentContexts: ChildrenOutletContexts): void {
+    const future = futureNode.value;
+    const curr = currNode ? currNode.value : null;
+
+    advanceActivatedRoute(future);
+
+    // reusing the node
+    if (future === curr) {
+      if (future.component) {
+        // 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 {
+        // if we have a componentless route, we recurse but keep the same outlet map.
+        this.activateChildRoutes(futureNode, currNode, parentContexts);
+      }
+    } else {
+      if (future.component) {
+        // 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);
+          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 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.
+        this.activateChildRoutes(futureNode, null, parentContexts);
+      }
+    }
+  }
+}
+
+function advanceActivatedRouteNodeAndItsChildren(node: TreeNode<ActivatedRoute>): void {
+  advanceActivatedRoute(node.value);
+  node.children.forEach(advanceActivatedRouteNodeAndItsChildren);
+}
+
+function parentLoadedConfig(snapshot: ActivatedRouteSnapshot): LoadedRouterConfig|null {
+  for (let s = snapshot.parent; s; s = s.parent) {
+    const route = s.routeConfig;
+    if (route && route._loadedConfig) return route._loadedConfig;
+    if (route && route.component) return null;
+  }
+
+  return null;
+}
+
+function validateCommands(commands: string[]): void {
+  for (let i = 0; i < commands.length; i++) {
+    const cmd = commands[i];
+    if (cmd == null) {
+      throw new Error(`The requested path contains ${cmd} segment at index ${i}`);
+    }
+  }
+}
diff --git a/packages/router/src/router_config_loader.ts b/packages/router/src/router_config_loader.ts
new file mode 100644
index 000000000000..292dc669ac4a
--- /dev/null
+++ b/packages/router/src/router_config_loader.ts
@@ -0,0 +1,60 @@
+/**
+ * @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 {Compiler, InjectionToken, Injector, NgModuleFactory, NgModuleFactoryLoader} from '@angular/core';
+// TODO(i): switch to fromPromise once it's expored in rxjs
+import {Observable, from, of } from 'rxjs';
+import {map, mergeMap} from 'rxjs/operators';
+import {LoadChildren, LoadedRouterConfig, Route, standardizeConfig} from './config';
+import {flatten, wrapIntoObservable} from './utils/collection';
+
+/**
+ * @docsNotRequired
+ * @experimental
+ */
+export const ROUTES = new InjectionToken<Route[][]>('ROUTES');
+
+export class RouterConfigLoader {
+  constructor(
+      private loader: NgModuleFactoryLoader, private compiler: Compiler,
+      private onLoadStartListener?: (r: Route) => void,
+      private onLoadEndListener?: (r: Route) => void) {}
+
+  load(parentInjector: Injector, route: Route): Observable<LoadedRouterConfig> {
+    if (this.onLoadStartListener) {
+      this.onLoadStartListener(route);
+    }
+
+    const moduleFactory$ = this.loadModuleFactory(route.loadChildren !);
+
+    return moduleFactory$.pipe(map((factory: NgModuleFactory<any>) => {
+      if (this.onLoadEndListener) {
+        this.onLoadEndListener(route);
+      }
+
+      const module = factory.create(parentInjector);
+
+      return new LoadedRouterConfig(
+          flatten(module.injector.get(ROUTES)).map(standardizeConfig), module);
+    }));
+  }
+
+  private loadModuleFactory(loadChildren: LoadChildren): Observable<NgModuleFactory<any>> {
+    if (typeof loadChildren === 'string') {
+      return from(this.loader.load(loadChildren));
+    } else {
+      return wrapIntoObservable(loadChildren()).pipe(mergeMap((t: any) => {
+        if (t instanceof NgModuleFactory) {
+          return of (t);
+        } else {
+          return from(this.compiler.compileModuleAsync(t));
+        }
+      }));
+    }
+  }
+}
diff --git a/packages/router/src/router_module.ts b/packages/router/src/router_module.ts
new file mode 100644
index 000000000000..2d90da6421db
--- /dev/null
+++ b/packages/router/src/router_module.ts
@@ -0,0 +1,627 @@
+/**
+ * @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 {APP_BASE_HREF, HashLocationStrategy, LOCATION_INITIALIZED, Location, LocationStrategy, PathLocationStrategy, PlatformLocation, ViewportScroller} from '@angular/common';
+import {ANALYZE_FOR_ENTRY_COMPONENTS, APP_BOOTSTRAP_LISTENER, APP_INITIALIZER, ApplicationRef, Compiler, ComponentRef, Inject, Injectable, InjectionToken, Injector, ModuleWithProviders, NgModule, NgModuleFactoryLoader, NgProbeToken, Optional, Provider, SkipSelf, SystemJsNgModuleLoader} from '@angular/core';
+import {ɵgetDOM as getDOM} from '@angular/platform-browser';
+import {Subject, of } from 'rxjs';
+
+import {EmptyOutletComponent} from './components/empty_outlet';
+import {Route, Routes} from './config';
+import {RouterLink, RouterLinkWithHref} from './directives/router_link';
+import {RouterLinkActive} from './directives/router_link_active';
+import {RouterOutlet} from './directives/router_outlet';
+import {RouterEvent} from './events';
+import {RouteReuseStrategy} from './route_reuse_strategy';
+import {ErrorHandler, Router} from './router';
+import {ROUTES} from './router_config_loader';
+import {ChildrenOutletContexts} from './router_outlet_context';
+import {NoPreloading, PreloadAllModules, PreloadingStrategy, RouterPreloader} from './router_preloader';
+import {RouterScroller} from './router_scroller';
+import {ActivatedRoute} from './router_state';
+import {UrlHandlingStrategy} from './url_handling_strategy';
+import {DefaultUrlSerializer, UrlSerializer, UrlTree} from './url_tree';
+import {flatten} from './utils/collection';
+
+
+
+/**
+ * @description
+ *
+ * Contains a list of directives
+ *
+ *
+ */
+const ROUTER_DIRECTIVES =
+    [RouterOutlet, RouterLink, RouterLinkWithHref, RouterLinkActive, EmptyOutletComponent];
+
+/**
+ * @description
+ *
+ * Is used in DI to configure the router.
+ *
+ *
+ */
+export const ROUTER_CONFIGURATION = new InjectionToken<ExtraOptions>('ROUTER_CONFIGURATION');
+
+/**
+ * @docsNotRequired
+ */
+export const ROUTER_FORROOT_GUARD = new InjectionToken<void>('ROUTER_FORROOT_GUARD');
+
+export const ROUTER_PROVIDERS: Provider[] = [
+  Location,
+  {provide: UrlSerializer, useClass: DefaultUrlSerializer},
+  {
+    provide: Router,
+    useFactory: setupRouter,
+    deps: [
+      ApplicationRef, UrlSerializer, ChildrenOutletContexts, Location, Injector,
+      NgModuleFactoryLoader, Compiler, ROUTES, ROUTER_CONFIGURATION,
+      [UrlHandlingStrategy, new Optional()], [RouteReuseStrategy, new Optional()]
+    ]
+  },
+  ChildrenOutletContexts,
+  {provide: ActivatedRoute, useFactory: rootRoute, deps: [Router]},
+  {provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader},
+  RouterPreloader,
+  NoPreloading,
+  PreloadAllModules,
+  {provide: ROUTER_CONFIGURATION, useValue: {enableTracing: false}},
+];
+
+export function routerNgProbeToken() {
+  return new NgProbeToken('Router', Router);
+}
+
+/**
+ * @usageNotes
+ *
+ * RouterModule can be imported multiple times: once per lazily-loaded bundle.
+ * Since the router deals with a global shared resource--location, we cannot have
+ * more than one router service active.
+ *
+ * That is why there are two ways to create the module: `RouterModule.forRoot` and
+ * `RouterModule.forChild`.
+ *
+ * * `forRoot` creates a module that contains all the directives, the given routes, and the router
+ *   service itself.
+ * * `forChild` creates a module that contains all the directives and the given routes, but does not
+ *   include the router service.
+ *
+ * When registered at the root, the module should be used as follows
+ *
+ * ```
+ * @NgModule({
+ *   imports: [RouterModule.forRoot(ROUTES)]
+ * })
+ * class MyNgModule {}
+ * ```
+ *
+ * For submodules and lazy loaded submodules the module should be used as follows:
+ *
+ * ```
+ * @NgModule({
+ *   imports: [RouterModule.forChild(ROUTES)]
+ * })
+ * class MyNgModule {}
+ * ```
+ *
+ * @description
+ *
+ * Adds router directives and providers.
+ *
+ * Managing state transitions is one of the hardest parts of building applications. This is
+ * especially true on the web, where you also need to ensure that the state is reflected in the URL.
+ * In addition, we often want to split applications into multiple bundles and load them on demand.
+ * Doing this transparently is not trivial.
+ *
+ * The Angular router solves these problems. Using the router, you can declaratively specify
+ * application states, manage state transitions while taking care of the URL, and load bundles on
+ * demand.
+ *
+ * [Read this developer guide](https://angular.io/docs/ts/latest/guide/router.html) to get an
+ * overview of how the router should be used.
+ *
+ *
+ */
+@NgModule({
+  declarations: ROUTER_DIRECTIVES,
+  exports: ROUTER_DIRECTIVES,
+  entryComponents: [EmptyOutletComponent]
+})
+export class RouterModule {
+  // Note: We are injecting the Router so it gets created eagerly...
+  constructor(@Optional() @Inject(ROUTER_FORROOT_GUARD) guard: any, @Optional() router: Router) {}
+
+  /**
+   * Creates a module with all the router providers and directives. It also optionally sets up an
+   * application listener to perform an initial navigation.
+   *
+   * Options (see `ExtraOptions`):
+   * * `enableTracing` makes the router log all its internal events to the console.
+   * * `useHash` enables the location strategy that uses the URL fragment instead of the history
+   * API.
+   * * `initialNavigation` disables the initial navigation.
+   * * `errorHandler` provides a custom error handler.
+   * * `preloadingStrategy` configures a preloading strategy (see `PreloadAllModules`).
+   * * `onSameUrlNavigation` configures how the router handles navigation to the current URL. See
+   * `ExtraOptions` for more details.
+   * * `paramsInheritanceStrategy` defines how the router merges params, data and resolved data
+   * from parent to child routes.
+   */
+  static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule> {
+    return {
+      ngModule: RouterModule,
+      providers: [
+        ROUTER_PROVIDERS,
+        provideRoutes(routes),
+        {
+          provide: ROUTER_FORROOT_GUARD,
+          useFactory: provideForRootGuard,
+          deps: [[Router, new Optional(), new SkipSelf()]]
+        },
+        {provide: ROUTER_CONFIGURATION, useValue: config ? config : {}},
+        {
+          provide: LocationStrategy,
+          useFactory: provideLocationStrategy,
+          deps: [
+            PlatformLocation, [new Inject(APP_BASE_HREF), new Optional()], ROUTER_CONFIGURATION
+          ]
+        },
+        {
+          provide: RouterScroller,
+          useFactory: createRouterScroller,
+          deps: [Router, ViewportScroller, ROUTER_CONFIGURATION]
+        },
+        {
+          provide: PreloadingStrategy,
+          useExisting: config && config.preloadingStrategy ? config.preloadingStrategy :
+                                                             NoPreloading
+        },
+        {provide: NgProbeToken, multi: true, useFactory: routerNgProbeToken},
+        provideRouterInitializer(),
+      ],
+    };
+  }
+
+  /**
+   * Creates a module with all the router directives and a provider registering routes.
+   */
+  static forChild(routes: Routes): ModuleWithProviders<RouterModule> {
+    return {ngModule: RouterModule, providers: [provideRoutes(routes)]};
+  }
+}
+
+export function createRouterScroller(
+    router: Router, viewportScroller: ViewportScroller, config: ExtraOptions): RouterScroller {
+  if (config.scrollOffset) {
+    viewportScroller.setOffset(config.scrollOffset);
+  }
+  return new RouterScroller(router, viewportScroller, config);
+}
+
+export function provideLocationStrategy(
+    platformLocationStrategy: PlatformLocation, baseHref: string, options: ExtraOptions = {}) {
+  return options.useHash ? new HashLocationStrategy(platformLocationStrategy, baseHref) :
+                           new PathLocationStrategy(platformLocationStrategy, baseHref);
+}
+
+export function provideForRootGuard(router: Router): any {
+  if (router) {
+    throw new Error(
+        `RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.`);
+  }
+  return 'guarded';
+}
+
+/**
+ * @description
+ *
+ * Registers routes.
+ *
+ * ### Example
+ *
+ * ```
+ * @NgModule({
+ *   imports: [RouterModule.forChild(ROUTES)],
+ *   providers: [provideRoutes(EXTRA_ROUTES)]
+ * })
+ * class MyNgModule {}
+ * ```
+ *
+ *
+ */
+export function provideRoutes(routes: Routes): any {
+  return [
+    {provide: ANALYZE_FOR_ENTRY_COMPONENTS, multi: true, useValue: routes},
+    {provide: ROUTES, multi: true, useValue: routes},
+  ];
+}
+
+/**
+ * @description
+ *
+ * Represents an option to configure when the initial navigation is performed.
+ *
+ * * 'enabled' - the initial navigation starts before the root component is created.
+ * The bootstrap is blocked until the initial navigation is complete.
+ * * 'disabled' - the initial navigation is not performed. The location listener is set up before
+ * the root component gets created.
+ * * 'legacy_enabled'- the initial navigation starts after the root component has been created.
+ * The bootstrap is not blocked until the initial navigation is complete. @deprecated
+ * * 'legacy_disabled'- the initial navigation is not performed. The location listener is set up
+ * after @deprecated
+ * the root component gets created.
+ * * `true` - same as 'legacy_enabled'. @deprecated since v4
+ * * `false` - same as 'legacy_disabled'. @deprecated since v4
+ *
+ * The 'enabled' option should be used for applications unless there is a reason to have
+ * more control over when the router starts its initial navigation due to some complex
+ * initialization logic. In this case, 'disabled' should be used.
+ *
+ * The 'legacy_enabled' and 'legacy_disabled' should not be used for new applications.
+ *
+ * @experimental
+ */
+export type InitialNavigation =
+    true | false | 'enabled' | 'disabled' | 'legacy_enabled' | 'legacy_disabled';
+
+/**
+ * @description
+ *
+ * Represents options to configure the router.
+ *
+ *
+ */
+export interface ExtraOptions {
+  /**
+   * Makes the router log all its internal events to the console.
+   */
+  enableTracing?: boolean;
+
+  /**
+   * Enables the location strategy that uses the URL fragment instead of the history API.
+   */
+  useHash?: boolean;
+
+  /**
+   * Disables the initial navigation.
+   */
+  initialNavigation?: InitialNavigation;
+
+  /**
+   * A custom error handler.
+   */
+  errorHandler?: ErrorHandler;
+
+  /**
+   * Configures a preloading strategy. See `PreloadAllModules`.
+   */
+  preloadingStrategy?: any;
+
+  /**
+   * Define what the router should do if it receives a navigation request to the current URL.
+   * By default, the router will ignore this navigation. However, this prevents features such
+   * as a "refresh" button. Use this option to configure the behavior when navigating to the
+   * current URL. Default is 'ignore'.
+   */
+  onSameUrlNavigation?: 'reload'|'ignore';
+
+  /**
+   * Configures if the scroll position needs to be restored when navigating back.
+   *
+   * * 'disabled'--does nothing (default).
+   * * 'top'--set the scroll position to 0,0..
+   * * 'enabled'--set the scroll position to the stored position. This option will be the default in
+   * the future.
+   *
+   * When enabled, the router stores and restores scroll positions during navigation.
+   * When navigating forward, the scroll position will be set to [0, 0], or to the anchor
+   * if one is provided.
+   *
+   * You can implement custom scroll restoration behavior as follows.
+   * ```typescript
+   * class AppModule {
+   *  constructor(router: Router, viewportScroller: ViewportScroller, store: Store<AppState>) {
+   *    router.events.pipe(filter(e => e instanceof Scroll), switchMap(e => {
+   *      return store.pipe(first(), timeout(200), map(() => e));
+   *    }).subscribe(e => {
+   *      if (e.position) {
+   *        viewportScroller.scrollToPosition(e.position);
+   *      } else if (e.anchor) {
+   *        viewportScroller.scrollToAnchor(e.anchor);
+   *      } else {
+   *        viewportScroller.scrollToPosition([0, 0]);
+   *      }
+   *    });
+   *  }
+   * }
+   * ```
+   *
+   * You can also implement component-specific scrolling like this:
+   *
+   * ```typescript
+   * class ListComponent {
+   *   list: any[];
+   *   constructor(router: Router, viewportScroller: ViewportScroller, fetcher: ListFetcher) {
+   *     const scrollEvents = router.events.filter(e => e instanceof Scroll);
+   *     listFetcher.fetch().pipe(withLatestFrom(scrollEvents)).subscribe(([list, e]) => {
+   *       this.list = list;
+   *       if (e.position) {
+   *         viewportScroller.scrollToPosition(e.position);
+   *       } else {
+   *         viewportScroller.scrollToPosition([0, 0]);
+   *       }
+   *     });
+   *   }
+   * }
+   */
+  scrollPositionRestoration?: 'disabled'|'enabled'|'top';
+
+  /**
+   * Configures if the router should scroll to the element when the url has a fragment.
+   *
+   * * 'disabled'--does nothing (default).
+   * * 'enabled'--scrolls to the element. This option will be the default in the future.
+   *
+   * Anchor scrolling does not happen on 'popstate'. Instead, we restore the position
+   * that we stored or scroll to the top.
+   */
+  anchorScrolling?: 'disabled'|'enabled';
+
+  /**
+   * Configures the scroll offset the router will use when scrolling to an element.
+   *
+   * When given a tuple with two numbers, the router will always use the numbers.
+   * When given a function, the router will invoke the function every time it restores scroll
+   * position.
+   */
+  scrollOffset?: [number, number]|(() => [number, number]);
+
+  /**
+   * Defines how the router merges params, data and resolved data from parent to child
+   * routes. Available options are:
+   *
+   * - `'emptyOnly'`, the default, only inherits parent params for path-less or component-less
+   *   routes.
+   * - `'always'`, enables unconditional inheritance of parent params.
+   */
+  paramsInheritanceStrategy?: 'emptyOnly'|'always';
+
+  /**
+   * A custom malformed uri error handler function. This handler is invoked when encodedURI contains
+   * invalid character sequences. The default implementation is to redirect to the root url dropping
+   * any path or param info. This function passes three parameters:
+   *
+   * - `'URIError'` - Error thrown when parsing a bad URL
+   * - `'UrlSerializer'` - UrlSerializer that’s configured with the router.
+   * - `'url'` -  The malformed URL that caused the URIError
+   * */
+  malformedUriErrorHandler?:
+      (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree;
+
+  /**
+   * Defines when the router updates the browser URL. The default behavior is to update after
+   * successful navigation. However, some applications may prefer a mode where the URL gets
+   * updated at the beginning of navigation. The most common use case would be updating the
+   * URL early so if navigation fails, you can show an error message with the URL that failed.
+   * Available options are:
+   *
+   * - `'deferred'`, the default, updates the browser URL after navigation has finished.
+   * - `'eager'`, updates browser URL at the beginning of navigation.
+   */
+  urlUpdateStrategy?: 'deferred'|'eager';
+
+  /**
+   * Enables a bug fix that corrects relative link resolution in components with empty paths.
+   * Example:
+   *
+   * ```
+   * const routes = [
+   *   {
+   *     path: '',
+   *     component: ContainerComponent,
+   *     children: [
+   *       { path: 'a', component: AComponent },
+   *       { path: 'b', component: BComponent },
+   *     ]
+   *   }
+   * ];
+   * ```
+   *
+   * From the `ContainerComponent`, this will not work:
+   *
+   * `<a [routerLink]="['./a']">Link to A</a>`
+   *
+   * However, this will work:
+   *
+   * `<a [routerLink]="['../a']">Link to A</a>`
+   *
+   * In other words, you're required to use `../` rather than `./`. The current default in v6
+   * is `legacy`, and this option will be removed in v7 to default to the corrected behavior.
+   */
+  relativeLinkResolution?: 'legacy'|'corrected';
+}
+
+export function setupRouter(
+    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, contexts, location, injector, loader, compiler, flatten(config));
+
+  if (urlHandlingStrategy) {
+    router.urlHandlingStrategy = urlHandlingStrategy;
+  }
+
+  if (routeReuseStrategy) {
+    router.routeReuseStrategy = routeReuseStrategy;
+  }
+
+  if (opts.errorHandler) {
+    router.errorHandler = opts.errorHandler;
+  }
+
+  if (opts.malformedUriErrorHandler) {
+    router.malformedUriErrorHandler = opts.malformedUriErrorHandler;
+  }
+
+  if (opts.enableTracing) {
+    const dom = getDOM();
+    router.events.subscribe((e: RouterEvent) => {
+      dom.logGroup(`Router Event: ${(<any>e.constructor).name}`);
+      dom.log(e.toString());
+      dom.log(e);
+      dom.logGroupEnd();
+    });
+  }
+
+  if (opts.onSameUrlNavigation) {
+    router.onSameUrlNavigation = opts.onSameUrlNavigation;
+  }
+
+  if (opts.paramsInheritanceStrategy) {
+    router.paramsInheritanceStrategy = opts.paramsInheritanceStrategy;
+  }
+
+  if (opts.urlUpdateStrategy) {
+    router.urlUpdateStrategy = opts.urlUpdateStrategy;
+  }
+
+  if (opts.relativeLinkResolution) {
+    router.relativeLinkResolution = opts.relativeLinkResolution;
+  }
+
+  return router;
+}
+
+export function rootRoute(router: Router): ActivatedRoute {
+  return router.routerState.root;
+}
+
+/**
+ * To initialize the router properly we need to do in two steps:
+ *
+ * We need to start the navigation in a APP_INITIALIZER to block the bootstrap if
+ * a resolver or a guards executes asynchronously. Second, we need to actually run
+ * activation in a BOOTSTRAP_LISTENER. We utilize the afterPreactivation
+ * hook provided by the router to do that.
+ *
+ * The router navigation starts, reaches the point when preactivation is done, and then
+ * pauses. It waits for the hook to be resolved. We then resolve it only in a bootstrap listener.
+ */
+@Injectable()
+export class RouterInitializer {
+  private initNavigation: boolean = false;
+  private resultOfPreactivationDone = new Subject<void>();
+
+  constructor(private injector: Injector) {}
+
+  appInitializer(): Promise<any> {
+    const p: Promise<any> = this.injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
+    return p.then(() => {
+      let resolve: Function = null !;
+      const res = new Promise(r => resolve = r);
+      const router = this.injector.get(Router);
+      const opts = this.injector.get(ROUTER_CONFIGURATION);
+
+      if (this.isLegacyDisabled(opts) || this.isLegacyEnabled(opts)) {
+        resolve(true);
+
+      } else if (opts.initialNavigation === 'disabled') {
+        router.setUpLocationChangeListener();
+        resolve(true);
+
+      } else if (opts.initialNavigation === 'enabled') {
+        router.hooks.afterPreactivation = () => {
+          // only the initial navigation should be delayed
+          if (!this.initNavigation) {
+            this.initNavigation = true;
+            resolve(true);
+            return this.resultOfPreactivationDone;
+
+            // subsequent navigations should not be delayed
+          } else {
+            return of (null) as any;
+          }
+        };
+        router.initialNavigation();
+
+      } else {
+        throw new Error(`Invalid initialNavigation options: '${opts.initialNavigation}'`);
+      }
+
+      return res;
+    });
+  }
+
+  bootstrapListener(bootstrappedComponentRef: ComponentRef<any>): void {
+    const opts = this.injector.get(ROUTER_CONFIGURATION);
+    const preloader = this.injector.get(RouterPreloader);
+    const routerScroller = this.injector.get(RouterScroller);
+    const router = this.injector.get(Router);
+    const ref = this.injector.get<ApplicationRef>(ApplicationRef);
+
+    if (bootstrappedComponentRef !== ref.components[0]) {
+      return;
+    }
+
+    if (this.isLegacyEnabled(opts)) {
+      router.initialNavigation();
+    } else if (this.isLegacyDisabled(opts)) {
+      router.setUpLocationChangeListener();
+    }
+
+    preloader.setUpPreloading();
+    routerScroller.init();
+    router.resetRootComponentType(ref.componentTypes[0]);
+    this.resultOfPreactivationDone.next(null !);
+    this.resultOfPreactivationDone.complete();
+  }
+
+  private isLegacyEnabled(opts: ExtraOptions): boolean {
+    return opts.initialNavigation === 'legacy_enabled' || opts.initialNavigation === true ||
+        opts.initialNavigation === undefined;
+  }
+
+  private isLegacyDisabled(opts: ExtraOptions): boolean {
+    return opts.initialNavigation === 'legacy_disabled' || opts.initialNavigation === false;
+  }
+}
+
+export function getAppInitializer(r: RouterInitializer) {
+  return r.appInitializer.bind(r);
+}
+
+export function getBootstrapListener(r: RouterInitializer) {
+  return r.bootstrapListener.bind(r);
+}
+
+/**
+ * A token for the router initializer that will be called after the app is bootstrapped.
+ *
+ * @experimental
+ */
+export const ROUTER_INITIALIZER =
+    new InjectionToken<(compRef: ComponentRef<any>) => void>('Router Initializer');
+
+export function provideRouterInitializer() {
+  return [
+    RouterInitializer,
+    {
+      provide: APP_INITIALIZER,
+      multi: true,
+      useFactory: getAppInitializer,
+      deps: [RouterInitializer]
+    },
+    {provide: ROUTER_INITIALIZER, useFactory: getBootstrapListener, deps: [RouterInitializer]},
+    {provide: APP_BOOTSTRAP_LISTENER, multi: true, useExisting: ROUTER_INITIALIZER},
+  ];
+}
diff --git a/packages/router/src/router_outlet_context.ts b/packages/router/src/router_outlet_context.ts
new file mode 100644
index 000000000000..789e8fc5b040
--- /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 `RouterOutlet`
+ *
+ *
+ */
+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) `RouterOutlet`
+ *
+ *
+ */
+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_preloader.ts b/packages/router/src/router_preloader.ts
new file mode 100644
index 000000000000..712f212c47cc
--- /dev/null
+++ b/packages/router/src/router_preloader.ts
@@ -0,0 +1,133 @@
+/**
+*@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 {Compiler, Injectable, Injector, NgModuleFactoryLoader, NgModuleRef, OnDestroy} from '@angular/core';
+import {Observable, Subscription, from, of } from 'rxjs';
+import {catchError, concatMap, filter, map, mergeAll, mergeMap} from 'rxjs/operators';
+
+import {LoadedRouterConfig, Route, Routes} from './config';
+import {Event, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart} from './events';
+import {Router} from './router';
+import {RouterConfigLoader} from './router_config_loader';
+
+
+/**
+ * @description
+ *
+ * Provides a preloading strategy.
+ *
+ * @experimental
+ */
+export abstract class PreloadingStrategy {
+  abstract preload(route: Route, fn: () => Observable<any>): Observable<any>;
+}
+
+/**
+ * @description
+ *
+ * Provides a preloading strategy that preloads all modules as quickly as possible.
+ *
+ * ```
+ * RouteModule.forRoot(ROUTES, {preloadingStrategy: PreloadAllModules})
+ * ```
+ *
+ * @experimental
+ */
+export class PreloadAllModules implements PreloadingStrategy {
+  preload(route: Route, fn: () => Observable<any>): Observable<any> {
+    return fn().pipe(catchError(() => of (null)));
+  }
+}
+
+/**
+ * @description
+ *
+ * Provides a preloading strategy that does not preload any modules.
+ *
+ * This strategy is enabled by default.
+ *
+ * @experimental
+ */
+export class NoPreloading implements PreloadingStrategy {
+  preload(route: Route, fn: () => Observable<any>): Observable<any> { return of (null); }
+}
+
+/**
+ * The preloader optimistically loads all router configurations to
+ * make navigations into lazily-loaded sections of the application faster.
+ *
+ * The preloader runs in the background. When the router bootstraps, the preloader
+ * starts listening to all navigation events. After every such event, the preloader
+ * will check if any configurations can be loaded lazily.
+ *
+ * If a route is protected by `canLoad` guards, the preloaded will not load it.
+ *
+ *
+ */
+@Injectable()
+export class RouterPreloader implements OnDestroy {
+  private loader: RouterConfigLoader;
+  // TODO(issue/24571): remove '!'.
+  private subscription !: Subscription;
+
+  constructor(
+      private router: Router, moduleLoader: NgModuleFactoryLoader, compiler: Compiler,
+      private injector: Injector, private preloadingStrategy: PreloadingStrategy) {
+    const onStartLoad = (r: Route) => router.triggerEvent(new RouteConfigLoadStart(r));
+    const onEndLoad = (r: Route) => router.triggerEvent(new RouteConfigLoadEnd(r));
+
+    this.loader = new RouterConfigLoader(moduleLoader, compiler, onStartLoad, onEndLoad);
+  }
+
+  setUpPreloading(): void {
+    this.subscription =
+        this.router.events
+            .pipe(filter((e: Event) => e instanceof NavigationEnd), concatMap(() => this.preload()))
+            .subscribe(() => {});
+  }
+
+  preload(): Observable<any> {
+    const ngModule = this.injector.get(NgModuleRef);
+    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 route of routes) {
+      // we already have the config loaded, just recurse
+      if (route.loadChildren && !route.canLoad && route._loadedConfig) {
+        const childConfig = route._loadedConfig;
+        res.push(this.processRoutes(childConfig.module, childConfig.routes));
+
+        // no config loaded, fetch the config
+      } else if (route.loadChildren && !route.canLoad) {
+        res.push(this.preloadConfig(ngModule, route));
+
+        // recurse into children
+      } else if (route.children) {
+        res.push(this.processRoutes(ngModule, route.children));
+      }
+    }
+    return from(res).pipe(mergeAll(), map((_) => void 0));
+  }
+
+  private preloadConfig(ngModule: NgModuleRef<any>, route: Route): Observable<void> {
+    return this.preloadingStrategy.preload(route, () => {
+      const loaded$ = this.loader.load(ngModule.injector, route);
+      return loaded$.pipe(mergeMap((config: LoadedRouterConfig) => {
+        route._loadedConfig = config;
+        return this.processRoutes(config.module, config.routes);
+      }));
+    });
+  }
+}
diff --git a/packages/router/src/router_scroller.ts b/packages/router/src/router_scroller.ts
new file mode 100644
index 000000000000..15a2393265b6
--- /dev/null
+++ b/packages/router/src/router_scroller.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 {ViewportScroller} from '@angular/common';
+import {OnDestroy} from '@angular/core';
+import {Unsubscribable} from 'rxjs';
+
+import {NavigationEnd, NavigationStart, Scroll} from './events';
+import {Router} from './router';
+
+export class RouterScroller implements OnDestroy {
+  // TODO(issue/24571): remove '!'.
+  private routerEventsSubscription !: Unsubscribable;
+  // TODO(issue/24571): remove '!'.
+  private scrollEventsSubscription !: Unsubscribable;
+
+  private lastId = 0;
+  private lastSource: 'imperative'|'popstate'|'hashchange'|undefined = 'imperative';
+  private restoredId = 0;
+  private store: {[key: string]: [number, number]} = {};
+
+  constructor(
+      private router: Router,
+      /** @docsNotRequired */ public readonly viewportScroller: ViewportScroller, private options: {
+        scrollPositionRestoration?: 'disabled' | 'enabled' | 'top',
+        anchorScrolling?: 'disabled'|'enabled'
+      } = {}) {}
+
+  init(): void {
+    // we want to disable the automatic scrolling because having two places
+    // responsible for scrolling results race conditions, especially given
+    // that browser don't implement this behavior consistently
+    if (this.options.scrollPositionRestoration !== 'disabled') {
+      this.viewportScroller.setHistoryScrollRestoration('manual');
+    }
+    this.routerEventsSubscription = this.createScrollEvents();
+    this.scrollEventsSubscription = this.consumeScrollEvents();
+  }
+
+  private createScrollEvents() {
+    return this.router.events.subscribe(e => {
+      if (e instanceof NavigationStart) {
+        // store the scroll position of the current stable navigations.
+        this.store[this.lastId] = this.viewportScroller.getScrollPosition();
+        this.lastSource = e.navigationTrigger;
+        this.restoredId = e.restoredState ? e.restoredState.navigationId : 0;
+      } else if (e instanceof NavigationEnd) {
+        this.lastId = e.id;
+        this.scheduleScrollEvent(e, this.router.parseUrl(e.urlAfterRedirects).fragment);
+      }
+    });
+  }
+
+  private consumeScrollEvents() {
+    return this.router.events.subscribe(e => {
+      if (!(e instanceof Scroll)) return;
+      // a popstate event. The pop state event will always ignore anchor scrolling.
+      if (e.position) {
+        if (this.options.scrollPositionRestoration === 'top') {
+          this.viewportScroller.scrollToPosition([0, 0]);
+        } else if (this.options.scrollPositionRestoration === 'enabled') {
+          this.viewportScroller.scrollToPosition(e.position);
+        }
+        // imperative navigation "forward"
+      } else {
+        if (e.anchor && this.options.anchorScrolling === 'enabled') {
+          this.viewportScroller.scrollToAnchor(e.anchor);
+        } else if (this.options.scrollPositionRestoration !== 'disabled') {
+          this.viewportScroller.scrollToPosition([0, 0]);
+        }
+      }
+    });
+  }
+
+  private scheduleScrollEvent(routerEvent: NavigationEnd, anchor: string|null): void {
+    this.router.triggerEvent(new Scroll(
+        routerEvent, this.lastSource === 'popstate' ? this.store[this.restoredId] : null, anchor));
+  }
+
+  ngOnDestroy() {
+    if (this.routerEventsSubscription) {
+      this.routerEventsSubscription.unsubscribe();
+    }
+    if (this.scrollEventsSubscription) {
+      this.scrollEventsSubscription.unsubscribe();
+    }
+  }
+}
diff --git a/packages/router/src/router_state.ts b/packages/router/src/router_state.ts
new file mode 100644
index 000000000000..658e74e9f028
--- /dev/null
+++ b/packages/router/src/router_state.ts
@@ -0,0 +1,424 @@
+/**
+ * @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 {Type} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+import {Data, ResolveData, Route} from './config';
+import {PRIMARY_OUTLET, ParamMap, Params, convertToParamMap} from './shared';
+import {UrlSegment, UrlSegmentGroup, UrlTree, equalSegments} from './url_tree';
+import {shallowEqual, shallowEqualArrays} from './utils/collection';
+import {Tree, TreeNode} from './utils/tree';
+
+
+
+/**
+ * @description
+ *
+ * Represents the state of the router.
+ *
+ * RouterState is a tree of activated routes. Every node in this tree knows about the "consumed" URL
+ * segments, the extracted parameters, and the resolved data.
+ *
+ * ### Example
+ *
+ * ```
+ * @Component({templateUrl:'template.html'})
+ * class MyComponent {
+ *   constructor(router: Router) {
+ *     const state: RouterState = router.routerState;
+ *     const root: ActivatedRoute = state.root;
+ *     const child = root.firstChild;
+ *     const id: Observable<string> = child.params.map(p => p.id);
+ *     //...
+ *   }
+ * }
+ * ```
+ *
+ * See `ActivatedRoute` for more information.
+ *
+ *
+ */
+export class RouterState extends Tree<ActivatedRoute> {
+  /** @internal */
+  constructor(
+      root: TreeNode<ActivatedRoute>,
+      /** The current snapshot of the router state */
+      public snapshot: RouterStateSnapshot) {
+    super(root);
+    setRouterState(<RouterState>this, root);
+  }
+
+  toString(): string { return this.snapshot.toString(); }
+}
+
+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({});
+  const emptyData = new BehaviorSubject({});
+  const emptyQueryParams = new BehaviorSubject({});
+  const fragment = new BehaviorSubject('');
+  const activated = new ActivatedRoute(
+      emptyUrl, emptyParams, emptyQueryParams, fragment, emptyData, PRIMARY_OUTLET, rootComponent,
+      snapshot.root);
+  activated.snapshot = snapshot.root;
+  return new RouterState(new TreeNode<ActivatedRoute>(activated, []), snapshot);
+}
+
+export function createEmptyStateSnapshot(
+    urlTree: UrlTree, rootComponent: Type<any>| null): RouterStateSnapshot {
+  const emptyParams = {};
+  const emptyData = {};
+  const emptyQueryParams = {};
+  const fragment = '';
+  const activated = new ActivatedRouteSnapshot(
+      [], emptyParams, emptyQueryParams, fragment, emptyData, PRIMARY_OUTLET, rootComponent, null,
+      urlTree.root, -1, {});
+  return new RouterStateSnapshot('', new TreeNode<ActivatedRouteSnapshot>(activated, []));
+}
+
+/**
+ * @description
+ *
+ * Contains the information about a route associated with a component loaded in an
+ * outlet.  An `ActivatedRoute` can also be used to traverse the router state tree.
+ *
+ * ```
+ * @Component({...})
+ * class MyComponent {
+ *   constructor(route: ActivatedRoute) {
+ *     const id: Observable<string> = route.params.map(p => p.id);
+ *     const url: Observable<string> = route.url.map(segments => segments.join(''));
+ *     // route.data includes both `data` and `resolve`
+ *     const user = route.data.map(d => d.user);
+ *   }
+ * }
+ * ```
+ *
+ *
+ */
+export class ActivatedRoute {
+  /** The current snapshot of this route */
+  // TODO(issue/24571): remove '!'.
+  snapshot !: ActivatedRouteSnapshot;
+  /** @internal */
+  _futureSnapshot: ActivatedRouteSnapshot;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _routerState !: RouterState;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _paramMap !: Observable<ParamMap>;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _queryParamMap !: Observable<ParamMap>;
+
+  /** @internal */
+  constructor(
+      /** An observable of the URL segments matched by this route */
+      public url: Observable<UrlSegment[]>,
+      /** An observable of the matrix parameters scoped to this route */
+      public params: Observable<Params>,
+      /** An observable of the query parameters shared by all the routes */
+      public queryParams: Observable<Params>,
+      /** An observable of the URL fragment shared by all the routes */
+      public fragment: Observable<string>,
+      /** An observable of the static and resolved data of this route. */
+      public data: Observable<Data>,
+      /** The outlet name of the route. It's a constant */
+      public outlet: string,
+      /** The component of the route. It's a constant */
+      // TODO(vsavkin): remove |string
+      public component: Type<any>|string|null, futureSnapshot: ActivatedRouteSnapshot) {
+    this._futureSnapshot = futureSnapshot;
+  }
+
+  /** The configuration used to match this route */
+  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|null { return this._routerState.parent(this); }
+
+  /** The first child of this route in the router state tree */
+  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); }
+
+  /** The path from the root of the router state tree to this route */
+  get pathFromRoot(): ActivatedRoute[] { return this._routerState.pathFromRoot(this); }
+
+  get paramMap(): Observable<ParamMap> {
+    if (!this._paramMap) {
+      this._paramMap = this.params.pipe(map((p: Params): ParamMap => convertToParamMap(p)));
+    }
+    return this._paramMap;
+  }
+
+  get queryParamMap(): Observable<ParamMap> {
+    if (!this._queryParamMap) {
+      this._queryParamMap =
+          this.queryParams.pipe(map((p: Params): ParamMap => convertToParamMap(p)));
+    }
+    return this._queryParamMap;
+  }
+
+  toString(): string {
+    return this.snapshot ? this.snapshot.toString() : `Future(${this._futureSnapshot})`;
+  }
+}
+
+export type ParamsInheritanceStrategy = 'emptyOnly' | 'always';
+
+/** @internal */
+export type Inherited = {
+  params: Params,
+  data: Data,
+  resolve: Data,
+};
+
+/**
+ * Returns the inherited params, data, and resolve for a given route.
+ * By default, this only inherits values up to the nearest path-less or component-less route.
+ * @internal
+ */
+export function inheritedParamsDataResolve(
+    route: ActivatedRouteSnapshot,
+    paramsInheritanceStrategy: ParamsInheritanceStrategy = 'emptyOnly'): Inherited {
+  const pathFromRoot = route.pathFromRoot;
+
+  let inheritingStartingFrom = 0;
+  if (paramsInheritanceStrategy !== 'always') {
+    inheritingStartingFrom = pathFromRoot.length - 1;
+
+    while (inheritingStartingFrom >= 1) {
+      const current = pathFromRoot[inheritingStartingFrom];
+      const parent = pathFromRoot[inheritingStartingFrom - 1];
+      // current route is an empty path => inherits its parent's params and data
+      if (current.routeConfig && current.routeConfig.path === '') {
+        inheritingStartingFrom--;
+
+        // parent is componentless => current route should inherit its params and data
+      } else if (!parent.component) {
+        inheritingStartingFrom--;
+
+      } else {
+        break;
+      }
+    }
+  }
+
+  return flattenInherited(pathFromRoot.slice(inheritingStartingFrom));
+}
+
+/** @internal */
+function flattenInherited(pathFromRoot: ActivatedRouteSnapshot[]): Inherited {
+  return pathFromRoot.reduce((res, curr) => {
+    const params = {...res.params, ...curr.params};
+    const data = {...res.data, ...curr.data};
+    const resolve = {...res.resolve, ...curr._resolvedData};
+    return {params, data, resolve};
+  }, <any>{params: {}, data: {}, resolve: {}});
+}
+
+/**
+ * @description
+ *
+ * Contains the information about a route associated with a component loaded in an
+ * outlet at a particular moment in time. ActivatedRouteSnapshot can also be used to
+ * traverse the router state tree.
+ *
+ * ```
+ * @Component({templateUrl:'./my-component.html'})
+ * class MyComponent {
+ *   constructor(route: ActivatedRoute) {
+ *     const id: string = route.snapshot.params.id;
+ *     const url: string = route.snapshot.url.join('');
+ *     const user = route.snapshot.data.user;
+ *   }
+ * }
+ * ```
+ *
+ *
+ */
+export class ActivatedRouteSnapshot {
+  /** The configuration used to match this route **/
+  public readonly routeConfig: Route|null;
+  /** @internal **/
+  _urlSegment: UrlSegmentGroup;
+  /** @internal */
+  _lastPathIndex: number;
+  /** @internal */
+  _resolve: ResolveData;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _resolvedData !: Data;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _routerState !: RouterStateSnapshot;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _paramMap !: ParamMap;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _queryParamMap !: ParamMap;
+
+  /** @internal */
+  constructor(
+      /** The URL segments matched by this route */
+      public url: UrlSegment[],
+      /** The matrix parameters scoped to this route */
+      public params: Params,
+      /** The query parameters shared by all the routes */
+      public queryParams: Params,
+      /** The URL fragment shared by all the routes */
+      public fragment: string,
+      /** The static and resolved data of this route */
+      public data: Data,
+      /** The outlet name of the route */
+      public outlet: string,
+      /** The component of the route */
+      public component: Type<any>|string|null, routeConfig: Route|null, urlSegment: UrlSegmentGroup,
+      lastPathIndex: number, resolve: ResolveData) {
+    this.routeConfig = routeConfig;
+    this._urlSegment = urlSegment;
+    this._lastPathIndex = lastPathIndex;
+    this._resolve = resolve;
+  }
+
+  /** 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|null { return this._routerState.parent(this); }
+
+  /** The first child of this route in the router state tree */
+  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); }
+
+  /** The path from the root of the router state tree to this route */
+  get pathFromRoot(): ActivatedRouteSnapshot[] { return this._routerState.pathFromRoot(this); }
+
+  get paramMap(): ParamMap {
+    if (!this._paramMap) {
+      this._paramMap = convertToParamMap(this.params);
+    }
+    return this._paramMap;
+  }
+
+  get queryParamMap(): ParamMap {
+    if (!this._queryParamMap) {
+      this._queryParamMap = convertToParamMap(this.queryParams);
+    }
+    return this._queryParamMap;
+  }
+
+  toString(): string {
+    const url = this.url.map(segment => segment.toString()).join('/');
+    const matched = this.routeConfig ? this.routeConfig.path : '';
+    return `Route(url:'${url}', path:'${matched}')`;
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents the state of the router at a moment in time.
+ *
+ * This is a tree of activated route snapshots. Every node in this tree knows about
+ * the "consumed" URL segments, the extracted parameters, and the resolved data.
+ *
+ * ### Example
+ *
+ * ```
+ * @Component({templateUrl:'template.html'})
+ * class MyComponent {
+ *   constructor(router: Router) {
+ *     const state: RouterState = router.routerState;
+ *     const snapshot: RouterStateSnapshot = state.snapshot;
+ *     const root: ActivatedRouteSnapshot = snapshot.root;
+ *     const child = root.firstChild;
+ *     const id: Observable<string> = child.params.map(p => p.id);
+ *     //...
+ *   }
+ * }
+ * ```
+ *
+ *
+ */
+export class RouterStateSnapshot extends Tree<ActivatedRouteSnapshot> {
+  /** @internal */
+  constructor(
+      /** The url from which this snapshot was created */
+      public url: string, root: TreeNode<ActivatedRouteSnapshot>) {
+    super(root);
+    setRouterState(<RouterStateSnapshot>this, root);
+  }
+
+  toString(): string { return serializeNode(this._root); }
+}
+
+function setRouterState<U, T extends{_routerState: U}>(state: U, node: TreeNode<T>): void {
+  node.value._routerState = state;
+  node.children.forEach(c => setRouterState(state, c));
+}
+
+function serializeNode(node: TreeNode<ActivatedRouteSnapshot>): string {
+  const c = node.children.length > 0 ? ` { ${node.children.map(serializeNode).join(', ')} } ` : '';
+  return `${node.value}${c}`;
+}
+
+/**
+ * The expectation is that the activate route is created with the right set of parameters.
+ * So we push new values into the observables only when they are not the initial values.
+ * And we detect that by checking if the snapshot field is set.
+ */
+export function advanceActivatedRoute(route: ActivatedRoute): void {
+  if (route.snapshot) {
+    const currentSnapshot = route.snapshot;
+    const nextSnapshot = route._futureSnapshot;
+    route.snapshot = nextSnapshot;
+    if (!shallowEqual(currentSnapshot.queryParams, nextSnapshot.queryParams)) {
+      (<any>route.queryParams).next(nextSnapshot.queryParams);
+    }
+    if (currentSnapshot.fragment !== nextSnapshot.fragment) {
+      (<any>route.fragment).next(nextSnapshot.fragment);
+    }
+    if (!shallowEqual(currentSnapshot.params, nextSnapshot.params)) {
+      (<any>route.params).next(nextSnapshot.params);
+    }
+    if (!shallowEqualArrays(currentSnapshot.url, nextSnapshot.url)) {
+      (<any>route.url).next(nextSnapshot.url);
+    }
+    if (!shallowEqual(currentSnapshot.data, nextSnapshot.data)) {
+      (<any>route.data).next(nextSnapshot.data);
+    }
+  } else {
+    route.snapshot = route._futureSnapshot;
+
+    // this is for resolved data
+    (<any>route.data).next(route._futureSnapshot.data);
+  }
+}
+
+
+export function equalParamsAndUrlSegments(
+    a: ActivatedRouteSnapshot, b: ActivatedRouteSnapshot): boolean {
+  const equalUrlParams = shallowEqual(a.params, b.params) && equalSegments(a.url, b.url);
+  const parentsMismatch = !a.parent !== !b.parent;
+
+  return equalUrlParams && !parentsMismatch &&
+      (!a.parent || equalParamsAndUrlSegments(a.parent, b.parent !));
+}
diff --git a/packages/router/src/shared.ts b/packages/router/src/shared.ts
new file mode 100644
index 000000000000..c43f7353d93f
--- /dev/null
+++ b/packages/router/src/shared.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 {Route, UrlMatchResult} from './config';
+import {UrlSegment, UrlSegmentGroup} from './url_tree';
+
+
+/**
+ * @description
+ *
+ * Name of the primary outlet.
+ *
+ *
+ */
+export const PRIMARY_OUTLET = 'primary';
+
+/**
+ * A collection of parameters.
+ *
+ *
+ */
+export type Params = {
+  [key: string]: any
+};
+
+/**
+ * Matrix and Query parameters.
+ *
+ * `ParamMap` makes it easier to work with parameters as they could have either a single value or
+ * multiple value. Because this should be known by the user, calling `get` or `getAll` returns the
+ * correct type (either `string` or `string[]`).
+ *
+ * The API is inspired by the URLSearchParams interface.
+ * see https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
+ *
+ *
+ */
+export interface ParamMap {
+  has(name: string): boolean;
+  /**
+   * Return a single value for the given parameter name:
+   * - the value when the parameter has a single value,
+   * - the first value if the parameter has multiple values,
+   * - `null` when there is no such parameter.
+   */
+  get(name: string): string|null;
+  /**
+   * Return an array of values for the given parameter name.
+   *
+   * If there is no such parameter, an empty array is returned.
+   */
+  getAll(name: string): string[];
+
+  /** Name of the parameters */
+  readonly keys: string[];
+}
+
+class ParamsAsMap implements ParamMap {
+  private params: Params;
+
+  constructor(params: Params) { this.params = params || {}; }
+
+  has(name: string): boolean { return this.params.hasOwnProperty(name); }
+
+  get(name: string): string|null {
+    if (this.has(name)) {
+      const v = this.params[name];
+      return Array.isArray(v) ? v[0] : v;
+    }
+
+    return null;
+  }
+
+  getAll(name: string): string[] {
+    if (this.has(name)) {
+      const v = this.params[name];
+      return Array.isArray(v) ? v : [v];
+    }
+
+    return [];
+  }
+
+  get keys(): string[] { return Object.keys(this.params); }
+}
+
+/**
+ * Convert a `Params` instance to a `ParamMap`.
+ *
+ *
+ */
+export function convertToParamMap(params: Params): ParamMap {
+  return new ParamsAsMap(params);
+}
+
+const NAVIGATION_CANCELING_ERROR = 'ngNavigationCancelingError';
+
+export function navigationCancelingError(message: string) {
+  const error = Error('NavigationCancelingError: ' + message);
+  (error as any)[NAVIGATION_CANCELING_ERROR] = true;
+  return error;
+}
+
+export function isNavigationCancelingError(error: Error) {
+  return error && (error as any)[NAVIGATION_CANCELING_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('/');
+
+  if (parts.length > segments.length) {
+    // The actual URL is shorter than the config, no match
+    return null;
+  }
+
+  if (route.pathMatch === 'full' &&
+      (segmentGroup.hasChildren() || parts.length < segments.length)) {
+    // The config is longer than the actual URL but we are looking for a full match, return null
+    return null;
+  }
+
+  const posParams: {[key: string]: UrlSegment} = {};
+
+  // Check each config part against the actual URL
+  for (let index = 0; index < parts.length; index++) {
+    const part = parts[index];
+    const segment = segments[index];
+    const isParameter = part.startsWith(':');
+    if (isParameter) {
+      posParams[part.substring(1)] = segment;
+    } else if (part !== segment.path) {
+      // The actual URL part does not match the config, no match
+      return null;
+    }
+  }
+
+  return {consumed: segments.slice(0, parts.length), posParams};
+}
diff --git a/packages/router/src/url_handling_strategy.ts b/packages/router/src/url_handling_strategy.ts
new file mode 100644
index 000000000000..8394e6868163
--- /dev/null
+++ b/packages/router/src/url_handling_strategy.ts
@@ -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
+ */
+
+import {UrlTree} from './url_tree';
+
+/**
+ * @description
+ *
+ * Provides a way to migrate AngularJS applications to Angular.
+ *
+ * @experimental
+ */
+export abstract class UrlHandlingStrategy {
+  /**
+   * Tells the router if this URL should be processed.
+   *
+   * When it returns true, the router will execute the regular navigation.
+   * When it returns false, the router will set the router state to an empty state.
+   * As a result, all the active components will be destroyed.
+   *
+   */
+  abstract shouldProcessUrl(url: UrlTree): boolean;
+
+  /**
+   * Extracts the part of the URL that should be handled by the router.
+   * The rest of the URL will remain untouched.
+   */
+  abstract extract(url: UrlTree): UrlTree;
+
+  /**
+   * Merges the URL fragment with the rest of the URL.
+   */
+  abstract merge(newUrlPart: UrlTree, rawUrl: UrlTree): UrlTree;
+}
+
+/**
+ * @experimental
+ */
+export class DefaultUrlHandlingStrategy implements UrlHandlingStrategy {
+  shouldProcessUrl(url: UrlTree): boolean { return true; }
+  extract(url: UrlTree): UrlTree { return url; }
+  merge(newUrlPart: UrlTree, wholeUrl: UrlTree): UrlTree { return newUrlPart; }
+}
\ No newline at end of file
diff --git a/packages/router/src/url_tree.ts b/packages/router/src/url_tree.ts
new file mode 100644
index 000000000000..958c3f32cb34
--- /dev/null
+++ b/packages/router/src/url_tree.ts
@@ -0,0 +1,619 @@
+/**
+ * @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 {PRIMARY_OUTLET, ParamMap, Params, convertToParamMap} from './shared';
+import {forEach, shallowEqual} from './utils/collection';
+
+export function createEmptyUrlTree() {
+  return new UrlTree(new UrlSegmentGroup([], {}), {}, null);
+}
+
+export function containsTree(container: UrlTree, containee: UrlTree, exact: boolean): boolean {
+  if (exact) {
+    return equalQueryParams(container.queryParams, containee.queryParams) &&
+        equalSegmentGroups(container.root, containee.root);
+  }
+
+  return containsQueryParams(container.queryParams, containee.queryParams) &&
+      containsSegmentGroup(container.root, containee.root);
+}
+
+function equalQueryParams(container: Params, containee: Params): boolean {
+  // TODO: This does not handle array params correctly.
+  return shallowEqual(container, containee);
+}
+
+function equalSegmentGroups(container: UrlSegmentGroup, containee: UrlSegmentGroup): boolean {
+  if (!equalPath(container.segments, containee.segments)) return false;
+  if (container.numberOfChildren !== containee.numberOfChildren) return false;
+  for (const c in containee.children) {
+    if (!container.children[c]) return false;
+    if (!equalSegmentGroups(container.children[c], containee.children[c])) return false;
+  }
+  return true;
+}
+
+function containsQueryParams(container: Params, containee: Params): boolean {
+  // TODO: This does not handle array params correctly.
+  return Object.keys(containee).length <= Object.keys(container).length &&
+      Object.keys(containee).every(key => containee[key] === container[key]);
+}
+
+function containsSegmentGroup(container: UrlSegmentGroup, containee: UrlSegmentGroup): boolean {
+  return containsSegmentGroupHelper(container, containee, containee.segments);
+}
+
+function containsSegmentGroupHelper(
+    container: UrlSegmentGroup, containee: UrlSegmentGroup, containeePaths: UrlSegment[]): boolean {
+  if (container.segments.length > containeePaths.length) {
+    const current = container.segments.slice(0, containeePaths.length);
+    if (!equalPath(current, containeePaths)) return false;
+    if (containee.hasChildren()) return false;
+    return true;
+
+  } else if (container.segments.length === containeePaths.length) {
+    if (!equalPath(container.segments, containeePaths)) return false;
+    for (const c in containee.children) {
+      if (!container.children[c]) return false;
+      if (!containsSegmentGroup(container.children[c], containee.children[c])) return false;
+    }
+    return true;
+
+  } else {
+    const current = containeePaths.slice(0, container.segments.length);
+    const next = containeePaths.slice(container.segments.length);
+    if (!equalPath(container.segments, current)) return false;
+    if (!container.children[PRIMARY_OUTLET]) return false;
+    return containsSegmentGroupHelper(container.children[PRIMARY_OUTLET], containee, next);
+  }
+}
+
+/**
+ * @description
+ *
+ * Represents the parsed URL.
+ *
+ * Since a router state is a tree, and the URL is nothing but a serialized state, the URL is a
+ * serialized tree.
+ * UrlTree is a data structure that provides a lot of affordances in dealing with URLs
+ *
+ * ### Example
+ *
+ * ```
+ * @Component({templateUrl:'template.html'})
+ * class MyComponent {
+ *   constructor(router: Router) {
+ *     const tree: UrlTree =
+ *       router.parseUrl('/team/33/(user/victor//support:help)?debug=true#fragment');
+ *     const f = tree.fragment; // return 'fragment'
+ *     const q = tree.queryParams; // returns {debug: 'true'}
+ *     const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
+ *     const s: UrlSegment[] = g.segments; // returns 2 segments 'team' and '33'
+ *     g.children[PRIMARY_OUTLET].segments; // returns 2 segments 'user' and 'victor'
+ *     g.children['support'].segments; // return 1 segment 'help'
+ *   }
+ * }
+ * ```
+ *
+ *
+ */
+export class UrlTree {
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _queryParamMap !: ParamMap;
+
+  /** @internal */
+  constructor(
+      /** The root segment group of the URL tree */
+      public root: UrlSegmentGroup,
+      /** The query params of the URL */
+      public queryParams: Params,
+      /** The fragment of the URL */
+      public fragment: string|null) {}
+
+  get queryParamMap(): ParamMap {
+    if (!this._queryParamMap) {
+      this._queryParamMap = convertToParamMap(this.queryParams);
+    }
+    return this._queryParamMap;
+  }
+
+  /** @docsNotRequired */
+  toString(): string { return DEFAULT_SERIALIZER.serialize(this); }
+}
+
+/**
+ * @description
+ *
+ * Represents the parsed URL segment group.
+ *
+ * See `UrlTree` for more information.
+ *
+ *
+ */
+export class UrlSegmentGroup {
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _sourceSegment !: UrlSegmentGroup;
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _segmentIndexShift !: number;
+  /** The parent node in the url tree */
+  parent: UrlSegmentGroup|null = null;
+
+  constructor(
+      /** The URL segments of this group. See `UrlSegment` for more information */
+      public segments: UrlSegment[],
+      /** The list of children of this group */
+      public children: {[key: string]: UrlSegmentGroup}) {
+    forEach(children, (v: any, k: any) => v.parent = this);
+  }
+
+  /** Whether the segment has child segments */
+  hasChildren(): boolean { return this.numberOfChildren > 0; }
+
+  /** Number of child segments */
+  get numberOfChildren(): number { return Object.keys(this.children).length; }
+
+  /** @docsNotRequired */
+  toString(): string { return serializePaths(this); }
+}
+
+
+/**
+ * @description
+ *
+ * Represents a single URL segment.
+ *
+ * A UrlSegment is a part of a URL between the two slashes. It contains a path and the matrix
+ * parameters associated with the segment.
+ *
+ * ## Example
+ *
+ * ```
+ * @Component({templateUrl:'template.html'})
+ * class MyComponent {
+ *   constructor(router: Router) {
+ *     const tree: UrlTree = router.parseUrl('/team;id=33');
+ *     const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
+ *     const s: UrlSegment[] = g.segments;
+ *     s[0].path; // returns 'team'
+ *     s[0].parameters; // returns {id: 33}
+ *   }
+ * }
+ * ```
+ *
+ *
+ */
+export class UrlSegment {
+  /** @internal */
+  // TODO(issue/24571): remove '!'.
+  _parameterMap !: ParamMap;
+
+  constructor(
+      /** The path part of a URL segment */
+      public path: string,
+
+      /** The matrix parameters associated with a segment */
+      public parameters: {[name: string]: string}) {}
+
+  get parameterMap() {
+    if (!this._parameterMap) {
+      this._parameterMap = convertToParamMap(this.parameters);
+    }
+    return this._parameterMap;
+  }
+
+  /** @docsNotRequired */
+  toString(): string { return serializePath(this); }
+}
+
+export function equalSegments(as: UrlSegment[], bs: UrlSegment[]): boolean {
+  return equalPath(as, bs) && as.every((a, i) => shallowEqual(a.parameters, bs[i].parameters));
+}
+
+export function equalPath(as: UrlSegment[], bs: UrlSegment[]): boolean {
+  if (as.length !== bs.length) return false;
+  return as.every((a, i) => a.path === bs[i].path);
+}
+
+export function mapChildrenIntoArray<T>(
+    segment: UrlSegmentGroup, fn: (v: UrlSegmentGroup, k: string) => T[]): T[] {
+  let res: T[] = [];
+  forEach(segment.children, (child: UrlSegmentGroup, childOutlet: string) => {
+    if (childOutlet === PRIMARY_OUTLET) {
+      res = res.concat(fn(child, childOutlet));
+    }
+  });
+  forEach(segment.children, (child: UrlSegmentGroup, childOutlet: string) => {
+    if (childOutlet !== PRIMARY_OUTLET) {
+      res = res.concat(fn(child, childOutlet));
+    }
+  });
+  return res;
+}
+
+
+/**
+ * @description
+ *
+ * Serializes and deserializes a URL string into a URL tree.
+ *
+ * The url serialization strategy is customizable. You can
+ * make all URLs case insensitive by providing a custom UrlSerializer.
+ *
+ * See `DefaultUrlSerializer` for an example of a URL serializer.
+ *
+ *
+ */
+export abstract class UrlSerializer {
+  /** Parse a url into a `UrlTree` */
+  abstract parse(url: string): UrlTree;
+
+  /** Converts a `UrlTree` into a url */
+  abstract serialize(tree: UrlTree): string;
+}
+
+/**
+ * @description
+ *
+ * A default implementation of the `UrlSerializer`.
+ *
+ * Example URLs:
+ *
+ * ```
+ * /inbox/33(popup:compose)
+ * /inbox/33;open=true/messages/44
+ * ```
+ *
+ * DefaultUrlSerializer uses parentheses to serialize secondary segments (e.g., popup:compose), the
+ * colon syntax to specify the outlet, and the ';parameter=value' syntax (e.g., open=true) to
+ * specify route specific parameters.
+ *
+ *
+ */
+export class DefaultUrlSerializer implements UrlSerializer {
+  /** Parses a url into a `UrlTree` */
+  parse(url: string): UrlTree {
+    const p = new UrlParser(url);
+    return new UrlTree(p.parseRootSegment(), p.parseQueryParams(), p.parseFragment());
+  }
+
+  /** Converts a `UrlTree` into a url */
+  serialize(tree: UrlTree): string {
+    const segment = `/${serializeSegment(tree.root, true)}`;
+    const query = serializeQueryParams(tree.queryParams);
+    const fragment =
+        typeof tree.fragment === `string` ? `#${encodeUriFragment(tree.fragment !)}` : '';
+
+    return `${segment}${query}${fragment}`;
+  }
+}
+
+const DEFAULT_SERIALIZER = new DefaultUrlSerializer();
+
+export function serializePaths(segment: UrlSegmentGroup): string {
+  return segment.segments.map(p => serializePath(p)).join('/');
+}
+
+function serializeSegment(segment: UrlSegmentGroup, root: boolean): string {
+  if (!segment.hasChildren()) {
+    return serializePaths(segment);
+  }
+
+  if (root) {
+    const primary = segment.children[PRIMARY_OUTLET] ?
+        serializeSegment(segment.children[PRIMARY_OUTLET], false) :
+        '';
+    const children: string[] = [];
+
+    forEach(segment.children, (v: UrlSegmentGroup, k: string) => {
+      if (k !== PRIMARY_OUTLET) {
+        children.push(`${k}:${serializeSegment(v, false)}`);
+      }
+    });
+
+    return children.length > 0 ? `${primary}(${children.join('//')})` : primary;
+
+  } else {
+    const children = mapChildrenIntoArray(segment, (v: UrlSegmentGroup, k: string) => {
+      if (k === PRIMARY_OUTLET) {
+        return [serializeSegment(segment.children[PRIMARY_OUTLET], false)];
+      }
+
+      return [`${k}:${serializeSegment(v, false)}`];
+
+    });
+
+    return `${serializePaths(segment)}/(${children.join('//')})`;
+  }
+}
+
+/**
+ * Encodes a URI string with the default encoding. This function will only ever be called from
+ * `encodeUriQuery` or `encodeUriSegment` as it's the base set of encodings to be used. We need
+ * a custom encoding because encodeURIComponent is too aggressive and encodes stuff that doesn't
+ * have to be encoded per https://url.spec.whatwg.org.
+ */
+function encodeUriString(s: string): string {
+  return encodeURIComponent(s)
+      .replace(/%40/g, '@')
+      .replace(/%3A/gi, ':')
+      .replace(/%24/g, '$')
+      .replace(/%2C/gi, ',');
+}
+
+/**
+ * This function should be used to encode both keys and values in a query string key/value. In
+ * the following URL, you need to call encodeUriQuery on "k" and "v":
+ *
+ * http://www.site.org/html;mk=mv?k=v#f
+ */
+export function encodeUriQuery(s: string): string {
+  return encodeUriString(s).replace(/%3B/gi, ';');
+}
+
+/**
+ * This function should be used to encode a URL fragment. In the following URL, you need to call
+ * encodeUriFragment on "f":
+ *
+ * http://www.site.org/html;mk=mv?k=v#f
+ */
+export function encodeUriFragment(s: string): string {
+  return encodeURI(s);
+}
+
+/**
+ * This function should be run on any URI segment as well as the key and value in a key/value
+ * pair for matrix params. In the following URL, you need to call encodeUriSegment on "html",
+ * "mk", and "mv":
+ *
+ * http://www.site.org/html;mk=mv?k=v#f
+ */
+export function encodeUriSegment(s: string): string {
+  return encodeUriString(s).replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/%26/gi, '&');
+}
+
+export function decode(s: string): string {
+  return decodeURIComponent(s);
+}
+
+// Query keys/values should have the "+" replaced first, as "+" in a query string is " ".
+// decodeURIComponent function will not decode "+" as a space.
+export function decodeQuery(s: string): string {
+  return decode(s.replace(/\+/g, '%20'));
+}
+
+export function serializePath(path: UrlSegment): string {
+  return `${encodeUriSegment(path.path)}${serializeMatrixParams(path.parameters)}`;
+}
+
+function serializeMatrixParams(params: {[key: string]: string}): string {
+  return Object.keys(params)
+      .map(key => `;${encodeUriSegment(key)}=${encodeUriSegment(params[key])}`)
+      .join('');
+}
+
+function serializeQueryParams(params: {[key: string]: any}): string {
+  const strParams: string[] = Object.keys(params).map((name) => {
+    const value = params[name];
+    return Array.isArray(value) ?
+        value.map(v => `${encodeUriQuery(name)}=${encodeUriQuery(v)}`).join('&') :
+        `${encodeUriQuery(name)}=${encodeUriQuery(value)}`;
+  });
+
+  return strParams.length ? `?${strParams.join("&")}` : '';
+}
+
+const SEGMENT_RE = /^[^\/()?;=#]+/;
+function matchSegments(str: string): string {
+  const match = str.match(SEGMENT_RE);
+  return match ? match[0] : '';
+}
+
+const QUERY_PARAM_RE = /^[^=?&#]+/;
+// Return the name of the query param at the start of the string or an empty string
+function matchQueryParams(str: string): string {
+  const match = str.match(QUERY_PARAM_RE);
+  return match ? match[0] : '';
+}
+
+const QUERY_PARAM_VALUE_RE = /^[^?&#]+/;
+// Return the value of the query param at the start of the string or an empty string
+function matchUrlQueryParamValue(str: string): string {
+  const match = str.match(QUERY_PARAM_VALUE_RE);
+  return match ? match[0] : '';
+}
+
+class UrlParser {
+  private remaining: string;
+
+  constructor(private url: string) { this.remaining = url; }
+
+  parseRootSegment(): UrlSegmentGroup {
+    this.consumeOptional('/');
+
+    if (this.remaining === '' || this.peekStartsWith('?') || this.peekStartsWith('#')) {
+      return new UrlSegmentGroup([], {});
+    }
+
+    // The root segment group never has segments
+    return new UrlSegmentGroup([], this.parseChildren());
+  }
+
+  parseQueryParams(): Params {
+    const params: Params = {};
+    if (this.consumeOptional('?')) {
+      do {
+        this.parseQueryParam(params);
+      } while (this.consumeOptional('&'));
+    }
+    return params;
+  }
+
+  parseFragment(): string|null {
+    return this.consumeOptional('#') ? decodeURIComponent(this.remaining) : null;
+  }
+
+  private parseChildren(): {[outlet: string]: UrlSegmentGroup} {
+    if (this.remaining === '') {
+      return {};
+    }
+
+    this.consumeOptional('/');
+
+    const segments: UrlSegment[] = [];
+    if (!this.peekStartsWith('(')) {
+      segments.push(this.parseSegment());
+    }
+
+    while (this.peekStartsWith('/') && !this.peekStartsWith('//') && !this.peekStartsWith('/(')) {
+      this.capture('/');
+      segments.push(this.parseSegment());
+    }
+
+    let children: {[outlet: string]: UrlSegmentGroup} = {};
+    if (this.peekStartsWith('/(')) {
+      this.capture('/');
+      children = this.parseParens(true);
+    }
+
+    let res: {[outlet: string]: UrlSegmentGroup} = {};
+    if (this.peekStartsWith('(')) {
+      res = this.parseParens(false);
+    }
+
+    if (segments.length > 0 || Object.keys(children).length > 0) {
+      res[PRIMARY_OUTLET] = new UrlSegmentGroup(segments, children);
+    }
+
+    return res;
+  }
+
+  // parse a segment with its matrix parameters
+  // ie `name;k1=v1;k2`
+  private parseSegment(): UrlSegment {
+    const path = matchSegments(this.remaining);
+    if (path === '' && this.peekStartsWith(';')) {
+      throw new Error(`Empty path url segment cannot have parameters: '${this.remaining}'.`);
+    }
+
+    this.capture(path);
+    return new UrlSegment(decode(path), this.parseMatrixParams());
+  }
+
+  private parseMatrixParams(): {[key: string]: any} {
+    const params: {[key: string]: any} = {};
+    while (this.consumeOptional(';')) {
+      this.parseParam(params);
+    }
+    return params;
+  }
+
+  private parseParam(params: {[key: string]: any}): void {
+    const key = matchSegments(this.remaining);
+    if (!key) {
+      return;
+    }
+    this.capture(key);
+    let value: any = '';
+    if (this.consumeOptional('=')) {
+      const valueMatch = matchSegments(this.remaining);
+      if (valueMatch) {
+        value = valueMatch;
+        this.capture(value);
+      }
+    }
+
+    params[decode(key)] = decode(value);
+  }
+
+  // Parse a single query parameter `name[=value]`
+  private parseQueryParam(params: Params): void {
+    const key = matchQueryParams(this.remaining);
+    if (!key) {
+      return;
+    }
+    this.capture(key);
+    let value: any = '';
+    if (this.consumeOptional('=')) {
+      const valueMatch = matchUrlQueryParamValue(this.remaining);
+      if (valueMatch) {
+        value = valueMatch;
+        this.capture(value);
+      }
+    }
+
+    const decodedKey = decodeQuery(key);
+    const decodedVal = decodeQuery(value);
+
+    if (params.hasOwnProperty(decodedKey)) {
+      // Append to existing values
+      let currentVal = params[decodedKey];
+      if (!Array.isArray(currentVal)) {
+        currentVal = [currentVal];
+        params[decodedKey] = currentVal;
+      }
+      currentVal.push(decodedVal);
+    } else {
+      // Create a new value
+      params[decodedKey] = decodedVal;
+    }
+  }
+
+  // parse `(a/b//outlet_name:c/d)`
+  private parseParens(allowPrimary: boolean): {[outlet: string]: UrlSegmentGroup} {
+    const segments: {[key: string]: UrlSegmentGroup} = {};
+    this.capture('(');
+
+    while (!this.consumeOptional(')') && this.remaining.length > 0) {
+      const path = matchSegments(this.remaining);
+
+      const next = this.remaining[path.length];
+
+      // if is is not one of these characters, then the segment was unescaped
+      // or the group was not closed
+      if (next !== '/' && next !== ')' && next !== ';') {
+        throw new Error(`Cannot parse url '${this.url}'`);
+      }
+
+      let outletName: string = undefined !;
+      if (path.indexOf(':') > -1) {
+        outletName = path.substr(0, path.indexOf(':'));
+        this.capture(outletName);
+        this.capture(':');
+      } else if (allowPrimary) {
+        outletName = PRIMARY_OUTLET;
+      }
+
+      const children = this.parseChildren();
+      segments[outletName] = Object.keys(children).length === 1 ? children[PRIMARY_OUTLET] :
+                                                                  new UrlSegmentGroup([], children);
+      this.consumeOptional('//');
+    }
+
+    return segments;
+  }
+
+  private peekStartsWith(str: string): boolean { return this.remaining.startsWith(str); }
+
+  // Consumes the prefix when it is present and returns whether it has been consumed
+  private consumeOptional(str: string): boolean {
+    if (this.peekStartsWith(str)) {
+      this.remaining = this.remaining.substring(str.length);
+      return true;
+    }
+    return false;
+  }
+
+  private capture(str: string): void {
+    if (!this.consumeOptional(str)) {
+      throw new Error(`Expected "${str}".`);
+    }
+  }
+}
diff --git a/packages/router/src/utils/collection.ts b/packages/router/src/utils/collection.ts
new file mode 100644
index 000000000000..dd1ccadebed0
--- /dev/null
+++ b/packages/router/src/utils/collection.ts
@@ -0,0 +1,113 @@
+/**
+ * @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 {NgModuleFactory, ɵisObservable as isObservable, ɵisPromise as isPromise} from '@angular/core';
+import {Observable, from, of } from 'rxjs';
+import {concatAll, every, last as lastValue, map, mergeAll} from 'rxjs/operators';
+
+import {PRIMARY_OUTLET} from '../shared';
+
+export function shallowEqualArrays(a: any[], b: any[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; ++i) {
+    if (!shallowEqual(a[i], b[i])) return false;
+  }
+  return true;
+}
+
+export function shallowEqual(a: {[x: string]: any}, b: {[x: string]: any}): boolean {
+  const k1 = Object.keys(a);
+  const k2 = Object.keys(b);
+  if (k1.length != k2.length) {
+    return false;
+  }
+  let key: string;
+  for (let i = 0; i < k1.length; i++) {
+    key = k1[i];
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Flattens single-level nested arrays.
+ */
+export function flatten<T>(arr: T[][]): T[] {
+  return Array.prototype.concat.apply([], arr);
+}
+
+/**
+ * Return the last element of an array.
+ */
+export function last<T>(a: T[]): T|null {
+  return a.length > 0 ? a[a.length - 1] : null;
+}
+
+/**
+ * Verifys all booleans in an array are `true`.
+ */
+export function and(bools: boolean[]): boolean {
+  return !bools.some(v => !v);
+}
+
+export function forEach<K, V>(map: {[key: string]: V}, callback: (v: V, k: string) => void): void {
+  for (const prop in map) {
+    if (map.hasOwnProperty(prop)) {
+      callback(map[prop], prop);
+    }
+  }
+}
+
+export function waitForMap<A, B>(
+    obj: {[k: string]: A}, fn: (k: string, a: A) => Observable<B>): Observable<{[k: string]: B}> {
+  if (Object.keys(obj).length === 0) {
+    return of ({});
+  }
+
+  const waitHead: Observable<B>[] = [];
+  const waitTail: Observable<B>[] = [];
+  const res: {[k: string]: B} = {};
+
+  forEach(obj, (a: A, k: string) => {
+    const mapped = fn(k, a).pipe(map((r: B) => res[k] = r));
+    if (k === PRIMARY_OUTLET) {
+      waitHead.push(mapped);
+    } else {
+      waitTail.push(mapped);
+    }
+  });
+
+  // Closure compiler has problem with using spread operator here. So just using Array.concat.
+  return of .apply(null, waitHead.concat(waitTail)).pipe(concatAll(), lastValue(), map(() => res));
+}
+
+/**
+ * ANDs Observables by merging all input observables, reducing to an Observable verifying all
+ * input Observables return `true`.
+ */
+export function andObservables(observables: Observable<Observable<any>>): Observable<boolean> {
+  return observables.pipe(mergeAll(), every((result: any) => result === true));
+}
+
+export function wrapIntoObservable<T>(value: T | NgModuleFactory<T>| Promise<T>| Observable<T>):
+    Observable<T> {
+  if (isObservable(value)) {
+    return value;
+  }
+
+  if (isPromise(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 from(Promise.resolve(value));
+  }
+
+  return of (value as T);
+}
diff --git a/packages/router/src/utils/tree.ts b/packages/router/src/utils/tree.ts
new file mode 100644
index 000000000000..a811872a6818
--- /dev/null
+++ b/packages/router/src/utils/tree.ts
@@ -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
+ */
+
+export class Tree<T> {
+  /** @internal */
+  _root: TreeNode<T>;
+
+  constructor(root: TreeNode<T>) { this._root = root; }
+
+  get root(): T { return this._root.value; }
+
+  /**
+   * @internal
+   */
+  parent(t: T): T|null {
+    const p = this.pathFromRoot(t);
+    return p.length > 1 ? p[p.length - 2] : null;
+  }
+
+  /**
+   * @internal
+   */
+  children(t: T): T[] {
+    const n = findNode(t, this._root);
+    return n ? n.children.map(t => t.value) : [];
+  }
+
+  /**
+   * @internal
+   */
+  firstChild(t: T): T|null {
+    const n = findNode(t, this._root);
+    return n && n.children.length > 0 ? n.children[0].value : null;
+  }
+
+  /**
+   * @internal
+   */
+  siblings(t: T): T[] {
+    const p = findPath(t, this._root);
+    if (p.length < 2) return [];
+
+    const c = p[p.length - 2].children.map(c => c.value);
+    return c.filter(cc => cc !== t);
+  }
+
+  /**
+   * @internal
+   */
+  pathFromRoot(t: T): T[] { return findPath(t, this._root).map(s => s.value); }
+}
+
+
+// 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;
+}
+
+// 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 child of node.children) {
+    const path = findPath(value, child);
+    if (path.length) {
+      path.unshift(node);
+      return path;
+    }
+  }
+
+  return [];
+}
+
+export class TreeNode<T> {
+  constructor(public value: T, public children: TreeNode<T>[]) {}
+
+  toString(): string { return `TreeNode(${this.value})`; }
+}
+
+// Return the list of T indexed by outlet name
+export 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);
+  }
+
+  return map;
+}
\ No newline at end of file
diff --git a/packages/router/src/version.ts b/packages/router/src/version.ts
new file mode 100644
index 000000000000..af66f0fa278a
--- /dev/null
+++ b/packages/router/src/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/core';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/router/test/BUILD.bazel b/packages/router/test/BUILD.bazel
new file mode 100644
index 000000000000..7dfa2b62b491
--- /dev/null
+++ b/packages/router/test/BUILD.bazel
@@ -0,0 +1,37 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages/common",
+        "//packages/common/testing",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser/testing",
+        "//packages/router",
+        "//packages/router/testing",
+        "@rxjs",
+        "@rxjs//operators",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/router/test/apply_redirects.spec.ts b/packages/router/test/apply_redirects.spec.ts
new file mode 100644
index 000000000000..70f9abc7f6ac
--- /dev/null
+++ b/packages/router/test/apply_redirects.spec.ts
@@ -0,0 +1,672 @@
+/**
+ * @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 {TestBed} from '@angular/core/testing';
+import {Observable, of } from 'rxjs';
+
+import {applyRedirects} from '../src/apply_redirects';
+import {LoadedRouterConfig, Routes} from '../src/config';
+import {DefaultUrlSerializer, UrlSegmentGroup, UrlTree, equalSegments} from '../src/url_tree';
+
+describe('applyRedirects', () => {
+  const serializer = new DefaultUrlSerializer();
+  let testModule: NgModuleRef<any>;
+
+  beforeEach(() => { testModule = TestBed.get(NgModuleRef); });
+
+  it('should return the same url tree when no redirects', () => {
+    checkRedirect(
+        [
+          {
+            path: 'a',
+            component: ComponentA,
+            children: [
+              {path: 'b', component: ComponentB},
+            ],
+          },
+        ],
+        '/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) => { 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', () => {
+    checkRedirect(
+        [
+          {path: 'a/:aid/b/:bid', redirectTo: 'newa/:aid/newb/:bid'},
+          {path: '**', component: ComponentC}
+        ],
+        '/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'), [
+      {path: 'a/:id', redirectTo: 'a/:other'}
+    ]).subscribe(() => {}, (e) => {
+      expect(e.message).toEqual('Cannot redirect to \'a/:other\'. Cannot find \':other\'.');
+    });
+  });
+
+  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) => { expectTreeToBe(t, '/d/a;p1=1/1;p2=2/e'); });
+  });
+
+  it('should handle preserve secondary routes', () => {
+    checkRedirect(
+        [
+          {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) => { expectTreeToBe(t, '/d/a/1/e(aux:c/d)'); });
+  });
+
+  it('should redirect secondary routes', () => {
+    checkRedirect(
+        [
+          {path: 'a/:id', component: ComponentA},
+          {path: 'c/d', redirectTo: 'f/c/d/e', outlet: 'aux'},
+          {path: '**', component: ComponentC, outlet: 'aux'}
+        ],
+        '/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', () => {
+    checkRedirect(
+        [
+          {
+            path: 'a',
+            component: ComponentA,
+            children: [
+              {path: 'b', component: ComponentB},
+            ]
+          },
+          {path: 'c', redirectTo: 'a'}
+        ],
+        'c/b', (t: UrlTree) => { expectTreeToBe(t, 'a/b'); });
+  });
+
+  it('should support redirects with both main and aux', () => {
+    checkRedirect(
+        [{
+          path: 'a',
+          children: [
+            {path: 'bb', component: ComponentB}, {path: 'b', redirectTo: 'bb'},
+
+            {path: 'cc', component: ComponentC, outlet: 'aux'},
+            {path: 'b', redirectTo: 'cc', outlet: 'aux'}
+          ]
+        }],
+        '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)', () => {
+    checkRedirect(
+        [{
+          path: 'a',
+          children: [
+            {path: 'bb', component: ComponentB}, {path: 'b', redirectTo: 'bb'},
+
+            {
+              path: 'cc',
+              component: ComponentC,
+              outlet: 'aux',
+              children: [{path: 'dd', component: ComponentC}, {path: 'd', redirectTo: 'dd'}]
+            },
+            {path: 'b', redirectTo: 'cc/d', outlet: 'aux'}
+          ]
+        }],
+        'a/(b//aux:b)', (t: UrlTree) => { expectTreeToBe(t, 'a/(bb//aux:cc/dd)'); });
+  });
+
+  it('should redirect wild cards', () => {
+    checkRedirect(
+        [
+          {path: '404', component: ComponentA},
+          {path: '**', redirectTo: '/404'},
+        ],
+        '/a/1(aux:c/d)', (t: UrlTree) => { expectTreeToBe(t, '/404'); });
+  });
+
+  it('should support absolute redirects', () => {
+    checkRedirect(
+        [
+          {
+            path: 'a',
+            component: ComponentA,
+            children: [{path: 'b/:id', redirectTo: '/absolute/:id?a=1&b=:b#f1'}]
+          },
+          {path: '**', component: ComponentC}
+        ],
+        '/a/b/1?b=2', (t: UrlTree) => { expectTreeToBe(t, '/absolute/1?a=1&b=2#f1'); });
+  });
+
+  describe('lazy loading', () => {
+    it('should load config on demand', () => {
+      const loadedConfig = new LoadedRouterConfig([{path: 'b', component: ComponentB}], testModule);
+      const loader = {
+        load: (injector: any, p: any) => {
+          if (injector !== testModule.injector) throw 'Invalid Injector';
+          return of (loadedConfig);
+        }
+      };
+      const config: Routes = [{path: 'a', component: ComponentA, loadChildren: 'children'}];
+
+      applyRedirects(testModule.injector, <any>loader, serializer, tree('a/b'), config)
+          .forEach(r => {
+            expectTreeToBe(r, '/a/b');
+            expect((config[0] as any)._loadedConfig).toBe(loadedConfig);
+          });
+    });
+
+    it('should handle the case when the loader errors', () => {
+      const loader = {
+        load: (p: any) => new Observable<any>((obs: any) => obs.error(new Error('Loading Error')))
+      };
+      const config = [{path: 'a', component: ComponentA, loadChildren: 'children'}];
+
+      applyRedirects(testModule.injector, <any>loader, serializer, tree('a/b'), config)
+          .subscribe(() => {}, (e) => { expect(e.message).toEqual('Loading Error'); });
+    });
+
+    it('should load when all canLoad guards return true', () => {
+      const loadedConfig = new LoadedRouterConfig([{path: 'b', component: ComponentB}], testModule);
+      const loader = {load: (injector: any, p: any) => of (loadedConfig)};
+
+      const guard = () => true;
+      const injector = {
+        get: (token: any) => token === 'guard1' || token === 'guard2' ? guard : {injector}
+      };
+
+      const config = [{
+        path: 'a',
+        component: ComponentA,
+        canLoad: ['guard1', 'guard2'],
+        loadChildren: 'children'
+      }];
+
+      applyRedirects(<any>injector, <any>loader, serializer, tree('a/b'), config).forEach(r => {
+        expectTreeToBe(r, '/a/b');
+      });
+    });
+
+    it('should not load when any canLoad guards return false', () => {
+      const loadedConfig = new LoadedRouterConfig([{path: 'b', component: ComponentB}], testModule);
+      const loader = {load: (injector: any, p: any) => of (loadedConfig)};
+
+      const trueGuard = () => true;
+      const falseGuard = () => false;
+      const injector = {
+        get: (token: any) => {
+          switch (token) {
+            case 'guard1':
+              return trueGuard;
+            case 'guard2':
+              return falseGuard;
+            case NgModuleRef:
+              return {injector};
+          }
+        }
+      };
+
+      const config = [{
+        path: 'a',
+        component: ComponentA,
+        canLoad: ['guard1', 'guard2'],
+        loadChildren: 'children'
+      }];
+
+      applyRedirects(<any>injector, <any>loader, serializer, tree('a/b'), config)
+          .subscribe(
+              () => { throw 'Should not reach'; },
+              (e) => {
+                expect(e.message).toEqual(
+                    `NavigationCancelingError: Cannot load children because the guard of the route "path: 'a'" returned false`);
+              });
+    });
+
+    it('should not load when any canLoad guards is rejected (promises)', () => {
+      const loadedConfig = new LoadedRouterConfig([{path: 'b', component: ComponentB}], testModule);
+      const loader = {load: (injector: any, p: any) => of (loadedConfig)};
+
+      const trueGuard = () => Promise.resolve(true);
+      const falseGuard = () => Promise.reject('someError');
+      const injector = {
+        get: (token: any) => {
+          switch (token) {
+            case 'guard1':
+              return trueGuard;
+            case 'guard2':
+              return falseGuard;
+            case NgModuleRef:
+              return {injector};
+          }
+        }
+      };
+
+      const config = [{
+        path: 'a',
+        component: ComponentA,
+        canLoad: ['guard1', 'guard2'],
+        loadChildren: 'children'
+      }];
+
+      applyRedirects(<any>injector, <any>loader, serializer, tree('a/b'), config)
+          .subscribe(
+              () => { throw 'Should not reach'; }, (e) => { expect(e).toEqual('someError'); });
+    });
+
+    it('should work with objects implementing the CanLoad interface', () => {
+      const loadedConfig = new LoadedRouterConfig([{path: 'b', component: ComponentB}], testModule);
+      const loader = {load: (injector: any, p: any) => of (loadedConfig)};
+
+      const guard = {canLoad: () => Promise.resolve(true)};
+      const injector = {get: (token: any) => token === 'guard' ? guard : {injector}};
+
+      const config =
+          [{path: 'a', component: ComponentA, canLoad: ['guard'], loadChildren: 'children'}];
+
+      applyRedirects(<any>injector, <any>loader, serializer, tree('a/b'), config)
+          .subscribe((r) => { expectTreeToBe(r, '/a/b'); }, (e) => { throw 'Should not reach'; });
+
+    });
+
+    it('should work with absolute redirects', () => {
+      const loadedConfig = new LoadedRouterConfig([{path: '', component: ComponentB}], testModule);
+
+      const loader = {load: (injector: any, p: any) => of (loadedConfig)};
+
+      const config: Routes =
+          [{path: '', pathMatch: 'full', redirectTo: '/a'}, {path: 'a', loadChildren: 'children'}];
+
+      applyRedirects(testModule.injector, <any>loader, serializer, tree(''), config).forEach(r => {
+        expectTreeToBe(r, 'a');
+        expect((config[1] as any)._loadedConfig).toBe(loadedConfig);
+      });
+    });
+
+    it('should load the configuration only once', () => {
+      const loadedConfig = new LoadedRouterConfig([{path: '', component: ComponentB}], testModule);
+
+      let called = false;
+      const loader = {
+        load: (injector: any, p: any) => {
+          if (called) throw new Error('Should not be called twice');
+          called = true;
+          return of (loadedConfig);
+        }
+      };
+
+      const config: Routes = [{path: 'a', loadChildren: 'children'}];
+
+      applyRedirects(testModule.injector, <any>loader, serializer, tree('a?k1'), config)
+          .subscribe(r => {});
+
+      applyRedirects(testModule.injector, <any>loader, serializer, tree('a?k2'), config)
+          .subscribe(
+              r => {
+                expectTreeToBe(r, 'a?k2');
+                expect((config[0] as any)._loadedConfig).toBe(loadedConfig);
+              },
+              (e) => { throw 'Should not reach'; });
+    });
+
+    it('should load the configuration of a wildcard route', () => {
+      const loadedConfig = new LoadedRouterConfig([{path: '', component: ComponentB}], testModule);
+
+      const loader = {load: (injector: any, p: any) => of (loadedConfig)};
+
+      const config: Routes = [{path: '**', loadChildren: 'children'}];
+
+      applyRedirects(testModule.injector, <any>loader, serializer, tree('xyz'), config)
+          .forEach(r => { expect((config[0] as any)._loadedConfig).toBe(loadedConfig); });
+    });
+
+    it('should load the configuration after a local redirect from a wildcard route', () => {
+      const loadedConfig = new LoadedRouterConfig([{path: '', component: ComponentB}], testModule);
+
+      const loader = {load: (injector: any, p: any) => of (loadedConfig)};
+
+      const config: Routes =
+          [{path: 'not-found', loadChildren: 'children'}, {path: '**', redirectTo: 'not-found'}];
+
+      applyRedirects(testModule.injector, <any>loader, serializer, tree('xyz'), config)
+          .forEach(r => { expect((config[0] as any)._loadedConfig).toBe(loadedConfig); });
+    });
+
+    it('should load the configuration after an absolute redirect from a wildcard route', () => {
+      const loadedConfig = new LoadedRouterConfig([{path: '', component: ComponentB}], testModule);
+
+      const loader = {load: (injector: any, p: any) => of (loadedConfig)};
+
+      const config: Routes =
+          [{path: 'not-found', loadChildren: 'children'}, {path: '**', redirectTo: '/not-found'}];
+
+      applyRedirects(testModule.injector, <any>loader, serializer, tree('xyz'), config)
+          .forEach(r => { expect((config[0] as any)._loadedConfig).toBe(loadedConfig); });
+    });
+  });
+
+  describe('empty paths', () => {
+    it('redirect from an empty path should work (local redirect)', () => {
+      checkRedirect(
+          [
+            {
+              path: 'a',
+              component: ComponentA,
+              children: [
+                {path: 'b', component: ComponentB},
+              ]
+            },
+            {path: '', redirectTo: 'a'}
+          ],
+          'b', (t: UrlTree) => { expectTreeToBe(t, 'a/b'); });
+    });
+
+    it('redirect from an empty path should work (absolute redirect)', () => {
+      checkRedirect(
+          [
+            {
+              path: 'a',
+              component: ComponentA,
+              children: [
+                {path: 'b', component: ComponentB},
+              ]
+            },
+            {path: '', redirectTo: '/a/b'}
+          ],
+          '', (t: UrlTree) => { expectTreeToBe(t, 'a/b'); });
+    });
+
+    it('should redirect empty path route only when terminal', () => {
+      const config: Routes = [
+        {
+          path: 'a',
+          component: ComponentA,
+          children: [
+            {path: 'b', component: ComponentB},
+          ]
+        },
+        {path: '', redirectTo: 'a', pathMatch: 'full'}
+      ];
+
+      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\''); });
+    });
+
+    it('redirect from an empty path should work (nested case)', () => {
+      checkRedirect(
+          [
+            {
+              path: 'a',
+              component: ComponentA,
+              children: [{path: 'b', component: ComponentB}, {path: '', redirectTo: 'b'}]
+            },
+            {path: '', redirectTo: 'a'}
+          ],
+          '', (t: UrlTree) => { expectTreeToBe(t, 'a/b'); });
+    });
+
+    it('redirect to an empty path should work', () => {
+      checkRedirect(
+          [
+            {path: '', component: ComponentA, children: [{path: 'b', component: ComponentB}]},
+            {path: 'a', redirectTo: ''}
+          ],
+          'a/b', (t: UrlTree) => { expectTreeToBe(t, 'b'); });
+    });
+
+    describe('aux split is in the middle', () => {
+      it('should create a new url segment (non-terminal)', () => {
+        checkRedirect(
+            [{
+              path: 'a',
+              children: [
+                {path: 'b', component: ComponentB},
+                {path: 'c', component: ComponentC, outlet: 'aux'},
+                {path: '', redirectTo: 'c', outlet: 'aux'}
+              ]
+            }],
+            'a/b', (t: UrlTree) => { expectTreeToBe(t, 'a/(b//aux:c)'); });
+      });
+
+      it('should create a new url segment (terminal)', () => {
+        checkRedirect(
+            [{
+              path: 'a',
+              children: [
+                {path: 'b', component: ComponentB},
+                {path: 'c', component: ComponentC, outlet: 'aux'},
+                {path: '', pathMatch: 'full', redirectTo: 'c', outlet: 'aux'}
+              ]
+            }],
+            'a/b', (t: UrlTree) => { expectTreeToBe(t, 'a/b'); });
+      });
+    });
+
+    describe('split at the end (no right child)', () => {
+      it('should create a new child (non-terminal)', () => {
+        checkRedirect(
+            [{
+              path: 'a',
+              children: [
+                {path: 'b', component: ComponentB}, {path: '', redirectTo: 'b'},
+                {path: 'c', component: ComponentC, outlet: 'aux'},
+                {path: '', redirectTo: 'c', outlet: 'aux'}
+              ]
+            }],
+            'a', (t: UrlTree) => { expectTreeToBe(t, 'a/(b//aux:c)'); });
+      });
+
+      it('should create a new child (terminal)', () => {
+        checkRedirect(
+            [{
+              path: 'a',
+              children: [
+                {path: 'b', component: ComponentB}, {path: '', redirectTo: 'b'},
+                {path: 'c', component: ComponentC, outlet: 'aux'},
+                {path: '', pathMatch: 'full', redirectTo: 'c', outlet: 'aux'}
+              ]
+            }],
+            'a', (t: UrlTree) => { expectTreeToBe(t, 'a/(b//aux:c)'); });
+      });
+
+      it('should work only only primary outlet', () => {
+        checkRedirect(
+            [{
+              path: 'a',
+              children: [
+                {path: 'b', component: ComponentB}, {path: '', redirectTo: 'b'},
+                {path: 'c', component: ComponentC, outlet: 'aux'}
+              ]
+            }],
+            'a/(aux:c)', (t: UrlTree) => { expectTreeToBe(t, 'a/(b//aux:c)'); });
+      });
+    });
+
+    describe('split at the end (right child)', () => {
+      it('should create a new child (non-terminal)', () => {
+        checkRedirect(
+            [{
+              path: 'a',
+              children: [
+                {path: 'b', component: ComponentB, children: [{path: 'd', component: ComponentB}]},
+                {path: '', redirectTo: 'b'}, {
+                  path: 'c',
+                  component: ComponentC,
+                  outlet: 'aux',
+                  children: [{path: 'e', component: ComponentC}]
+                },
+                {path: '', redirectTo: 'c', outlet: 'aux'}
+              ]
+            }],
+            'a/(d//aux:e)', (t: UrlTree) => { expectTreeToBe(t, 'a/(b/d//aux:c/e)'); });
+      });
+
+      it('should not create a new child (terminal)', () => {
+        const config: Routes = [{
+          path: 'a',
+          children: [
+            {path: 'b', component: ComponentB, children: [{path: 'd', component: ComponentB}]},
+            {path: '', redirectTo: 'b'}, {
+              path: 'c',
+              component: ComponentC,
+              outlet: 'aux',
+              children: [{path: 'e', component: ComponentC}]
+            },
+            {path: '', pathMatch: 'full', redirectTo: 'c', outlet: 'aux'}
+          ]
+        }];
+
+        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\''); });
+      });
+    });
+  });
+
+  describe('empty URL leftovers', () => {
+    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) => { expectTreeToBe(t, 'a'); });
+    });
+
+    it('should not error when no children matching and no url is left (aux routes)', () => {
+      checkRedirect(
+          [{
+            path: 'a',
+            component: ComponentA,
+            children: [
+              {path: 'b', component: ComponentB},
+              {path: '', redirectTo: 'c', outlet: 'aux'},
+              {path: 'c', component: ComponentC, outlet: 'aux'},
+            ]
+          }],
+          '/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'),
+          [{path: 'a', component: ComponentA, children: [{path: 'b', component: ComponentB}]}])
+          .subscribe(
+              (_) => { throw 'Should not be reached'; },
+              e => { expect(e.message).toEqual('Cannot match any routes. URL Segment: \'a/c\''); });
+    });
+  });
+
+  describe('custom path matchers', () => {
+    it('should use custom path matcher', () => {
+      const matcher = (s: any, g: any, r: any) => {
+        if (s[0].path === 'a') {
+          return {consumed: s.slice(0, 2), posParams: {id: s[1]}};
+        } else {
+          return null;
+        }
+      };
+
+      checkRedirect(
+          [{
+            matcher: matcher,
+            component: ComponentA,
+            children: [{path: 'b', component: ComponentB}]
+          }] as any,
+          '/a/1/b', (t: UrlTree) => { expectTreeToBe(t, 'a/1/b'); });
+    });
+  });
+
+  describe('redirecting to named outlets', () => {
+    it('should work when using absolute redirects', () => {
+      checkRedirect(
+          [
+            {path: 'a/:id', redirectTo: '/b/:id(aux:c/:id)'},
+            {path: 'b/:id', component: ComponentB},
+            {path: 'c/:id', component: ComponentC, outlet: 'aux'}
+          ],
+          '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)', () => {
+      checkRedirect(
+          [
+            {path: '**', redirectTo: '/b(aux:c)'}, {path: 'b', component: ComponentB},
+            {path: 'c', component: ComponentC, outlet: 'aux'}
+          ],
+          'a/1', (t: UrlTree) => { expectTreeToBe(t, '/b(aux:c)'); });
+    });
+
+    it('should throw when using non-absolute redirects', () => {
+      applyRedirects(
+          testModule.injector, null !, serializer, tree('a'),
+          [
+            {path: 'a', redirectTo: 'b(aux:c)'},
+          ])
+          .subscribe(
+              () => { throw new Error('should not be reached'); },
+              (e) => {
+                expect(e.message).toEqual(
+                    'Only absolute redirects can have named outlets. redirectTo: \'b(aux:c)\'');
+              });
+    });
+  });
+});
+
+function checkRedirect(config: Routes, url: string, callback: any): void {
+  applyRedirects(TestBed, null !, new DefaultUrlSerializer(), tree(url), config)
+      .subscribe(callback, e => { throw e; });
+}
+
+function tree(url: string): UrlTree {
+  return new DefaultUrlSerializer().parse(url);
+}
+
+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)}"`;
+  compareSegments(actual.root, expected.root, error);
+  expect(actual.queryParams).toEqual(expected.queryParams);
+  expect(actual.fragment).toEqual(expected.fragment);
+}
+
+function compareSegments(actual: UrlSegmentGroup, expected: UrlSegmentGroup, error: string): void {
+  expect(actual).toBeDefined(error);
+  expect(equalSegments(actual.segments, expected.segments)).toEqual(true, error);
+
+  expect(Object.keys(actual.children).length).toEqual(Object.keys(expected.children).length, error);
+
+  Object.keys(expected.children).forEach(key => {
+    compareSegments(actual.children[key], expected.children[key], error);
+  });
+}
+
+class ComponentA {}
+class ComponentB {}
+class ComponentC {}
diff --git a/packages/router/test/bootstrap.spec.ts b/packages/router/test/bootstrap.spec.ts
new file mode 100644
index 000000000000..634990a7498c
--- /dev/null
+++ b/packages/router/test/bootstrap.spec.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 {APP_BASE_HREF, Location, ViewportScroller} from '@angular/common';
+import {ApplicationRef, CUSTOM_ELEMENTS_SCHEMA, Component, NgModule, destroyPlatform} from '@angular/core';
+import {inject} from '@angular/core/testing';
+import {BrowserModule, DOCUMENT, ɵgetDOM as getDOM} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {NavigationEnd, NavigationStart, Resolve, Router, RouterModule} from '@angular/router';
+import {filter, first} from 'rxjs/operators';
+
+describe('bootstrap', () => {
+  if (isNode) return;
+  let log: any[] = [];
+  let testProviders: any[] = null !;
+
+  @Component({selector: 'test-app', template: 'root <router-outlet></router-outlet>'})
+  class RootCmp {
+    constructor() { log.push('RootCmp'); }
+  }
+
+  @Component({selector: 'test-app2', template: 'root <router-outlet></router-outlet>'})
+  class SecondRootCmp {
+  }
+
+  class TestResolver implements Resolve<any> {
+    resolve() {
+      let resolve: any = null;
+      const res = new Promise(r => resolve = r);
+      setTimeout(() => resolve('test-data'), 0);
+      return res;
+    }
+  }
+
+  beforeEach(inject([DOCUMENT], (doc: any) => {
+    destroyPlatform();
+
+    const el1 = getDOM().createElement('test-app', doc);
+    const el2 = getDOM().createElement('test-app2', doc);
+    getDOM().appendChild(doc.body, el1);
+    getDOM().appendChild(doc.body, el2);
+
+    log = [];
+    testProviders = [{provide: APP_BASE_HREF, useValue: ''}];
+  }));
+
+  afterEach(inject([DOCUMENT], (doc: any) => {
+    const oldRoots = getDOM().querySelectorAll(doc, 'test-app,test-app2');
+    for (let i = 0; i < oldRoots.length; i++) {
+      getDOM().remove(oldRoots[i]);
+    }
+  }));
+
+  it('should wait for resolvers to complete when initialNavigation = enabled', (done) => {
+    @Component({selector: 'test', template: 'test'})
+    class TestCmpEnabled {
+    }
+
+    @NgModule({
+      imports: [
+        BrowserModule, RouterModule.forRoot(
+                           [{path: '**', component: TestCmpEnabled, resolve: {test: TestResolver}}],
+                           {useHash: true, initialNavigation: 'enabled'})
+      ],
+      declarations: [RootCmp, TestCmpEnabled],
+      bootstrap: [RootCmp],
+      providers: [...testProviders, TestResolver],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    class TestModule {
+      constructor(router: Router) {
+        log.push('TestModule');
+        router.events.subscribe(e => log.push(e.constructor.name));
+      }
+    }
+
+    platformBrowserDynamic([]).bootstrapModule(TestModule).then(res => {
+      const router = res.injector.get(Router);
+      const data = router.routerState.snapshot.root.firstChild !.data;
+      expect(data['test']).toEqual('test-data');
+      expect(log).toEqual([
+        'TestModule', 'NavigationStart', 'RoutesRecognized', 'GuardsCheckStart',
+        'ChildActivationStart', 'ActivationStart', 'GuardsCheckEnd', 'ResolveStart', 'ResolveEnd',
+        'RootCmp', 'ActivationEnd', 'ChildActivationEnd', 'NavigationEnd', 'Scroll'
+      ]);
+      done();
+    });
+  });
+
+  it('should NOT wait for resolvers to complete when initialNavigation = legacy_enabled',
+     (done) => {
+       @Component({selector: 'test', template: 'test'})
+       class TestCmpLegacyEnabled {
+       }
+
+       @NgModule({
+         imports: [
+           BrowserModule,
+           RouterModule.forRoot(
+               [{path: '**', component: TestCmpLegacyEnabled, resolve: {test: TestResolver}}],
+               {useHash: true, initialNavigation: 'legacy_enabled'})
+         ],
+         declarations: [RootCmp, TestCmpLegacyEnabled],
+         bootstrap: [RootCmp],
+         providers: [...testProviders, TestResolver],
+         schemas: [CUSTOM_ELEMENTS_SCHEMA]
+       })
+       class TestModule {
+         constructor(router: Router) {
+           log.push('TestModule');
+           router.events.subscribe(e => log.push(e.constructor.name));
+         }
+       }
+
+       platformBrowserDynamic([]).bootstrapModule(TestModule).then(res => {
+         const router = res.injector.get(Router);
+         expect(router.routerState.snapshot.root.firstChild).toBeNull();
+         // ResolveEnd has not been emitted yet because bootstrap returned too early
+         expect(log).toEqual([
+           'TestModule', 'RootCmp', 'NavigationStart', 'RoutesRecognized', 'GuardsCheckStart',
+           'ChildActivationStart', 'ActivationStart', 'GuardsCheckEnd', 'ResolveStart'
+         ]);
+
+         router.events.subscribe((e) => {
+           if (e instanceof NavigationEnd) {
+             done();
+           }
+         });
+       });
+     });
+
+  it('should not run navigation when initialNavigation = disabled', (done) => {
+    @Component({selector: 'test', template: 'test'})
+    class TestCmpDiabled {
+    }
+
+    @NgModule({
+      imports: [
+        BrowserModule, RouterModule.forRoot(
+                           [{path: '**', component: TestCmpDiabled, resolve: {test: TestResolver}}],
+                           {useHash: true, initialNavigation: 'disabled'})
+      ],
+      declarations: [RootCmp, TestCmpDiabled],
+      bootstrap: [RootCmp],
+      providers: [...testProviders, TestResolver],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    class TestModule {
+      constructor(router: Router) {
+        log.push('TestModule');
+        router.events.subscribe(e => log.push(e.constructor.name));
+      }
+    }
+
+    platformBrowserDynamic([]).bootstrapModule(TestModule).then(res => {
+      const router = res.injector.get(Router);
+      expect(log).toEqual(['TestModule', 'RootCmp']);
+      done();
+    });
+  });
+
+  it('should not run navigation when initialNavigation = legacy_disabled', (done) => {
+    @Component({selector: 'test', template: 'test'})
+    class TestCmpLegacyDisabled {
+    }
+
+    @NgModule({
+      imports: [
+        BrowserModule,
+        RouterModule.forRoot(
+            [{path: '**', component: TestCmpLegacyDisabled, resolve: {test: TestResolver}}],
+            {useHash: true, initialNavigation: 'legacy_disabled'})
+      ],
+      declarations: [RootCmp, TestCmpLegacyDisabled],
+      bootstrap: [RootCmp],
+      providers: [...testProviders, TestResolver],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    class TestModule {
+      constructor(router: Router) {
+        log.push('TestModule');
+        router.events.subscribe(e => log.push(e.constructor.name));
+      }
+    }
+
+    platformBrowserDynamic([]).bootstrapModule(TestModule).then(res => {
+      const router = res.injector.get(Router);
+      expect(log).toEqual(['TestModule', 'RootCmp']);
+      done();
+    });
+  });
+
+  it('should not init router navigation listeners if a non root component is bootstrapped',
+     (done) => {
+       @NgModule({
+         imports: [BrowserModule, RouterModule.forRoot([], {useHash: true})],
+         declarations: [SecondRootCmp, RootCmp],
+         entryComponents: [SecondRootCmp],
+         bootstrap: [RootCmp],
+         providers: testProviders,
+         schemas: [CUSTOM_ELEMENTS_SCHEMA]
+       })
+       class TestModule {
+       }
+
+       platformBrowserDynamic([]).bootstrapModule(TestModule).then(res => {
+         const router = res.injector.get(Router);
+         spyOn(router as any, 'resetRootComponentType').and.callThrough();
+
+         const appRef: ApplicationRef = res.injector.get(ApplicationRef);
+         appRef.bootstrap(SecondRootCmp);
+
+         expect((router as any).resetRootComponentType).not.toHaveBeenCalled();
+
+         done();
+       });
+     });
+
+  it('should reinit router navigation listeners if a previously bootstrapped root component is destroyed',
+     (done) => {
+       @NgModule({
+         imports: [BrowserModule, RouterModule.forRoot([], {useHash: true})],
+         declarations: [SecondRootCmp, RootCmp],
+         entryComponents: [SecondRootCmp],
+         bootstrap: [RootCmp],
+         providers: testProviders,
+         schemas: [CUSTOM_ELEMENTS_SCHEMA]
+       })
+       class TestModule {
+       }
+
+       platformBrowserDynamic([]).bootstrapModule(TestModule).then(res => {
+         const router = res.injector.get(Router);
+         spyOn(router as any, 'resetRootComponentType').and.callThrough();
+
+         const appRef: ApplicationRef = res.injector.get(ApplicationRef);
+         appRef.components[0].onDestroy(() => {
+           appRef.bootstrap(SecondRootCmp);
+           expect((router as any).resetRootComponentType).toHaveBeenCalled();
+           done();
+         });
+
+         appRef.components[0].destroy();
+       });
+     });
+
+
+  it('should restore the scrolling position', async(done) => {
+    @Component({
+      selector: 'component-a',
+      template: `
+           <div style="height: 3000px;"></div>
+           <div id="marker1"></div>
+           <div style="height: 3000px;"></div>
+           <div id="marker2"></div>
+           <div style="height: 3000px;"></div>
+           <a name="marker3"></a>
+           <div style="height: 3000px;"></div>
+      `
+    })
+    class TallComponent {
+    }
+    @NgModule({
+      imports: [
+        BrowserModule,
+        RouterModule.forRoot(
+            [
+              {path: '', pathMatch: 'full', redirectTo: '/aa'},
+              {path: 'aa', component: TallComponent}, {path: 'bb', component: TallComponent},
+              {path: 'cc', component: TallComponent},
+              {path: 'fail', component: TallComponent, canActivate: ['returnFalse']}
+            ],
+            {
+              useHash: true,
+              scrollPositionRestoration: 'enabled',
+              anchorScrolling: 'enabled',
+              scrollOffset: [0, 100],
+              onSameUrlNavigation: 'reload'
+            })
+      ],
+      declarations: [TallComponent, RootCmp],
+      bootstrap: [RootCmp],
+      providers: [...testProviders, {provide: 'returnFalse', useValue: () => false}],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    class TestModule {
+    }
+
+    const res = await platformBrowserDynamic([]).bootstrapModule(TestModule);
+    const router = res.injector.get(Router);
+    const location: Location = res.injector.get(Location);
+
+    await router.navigateByUrl('/aa');
+    window.scrollTo(0, 5000);
+
+    await router.navigateByUrl('/fail');
+    expect(window.scrollY).toEqual(5000);
+
+    await router.navigateByUrl('/bb');
+    window.scrollTo(0, 3000);
+
+    expect(window.scrollY).toEqual(3000);
+
+    await router.navigateByUrl('/cc');
+    expect(window.scrollY).toEqual(0);
+
+    await router.navigateByUrl('/aa#marker2');
+    expect(window.scrollY >= 5900).toBe(true);
+    expect(window.scrollY < 6000).toBe(true);  // offset
+
+    await router.navigateByUrl('/aa#marker3');
+    expect(window.scrollY >= 8900).toBe(true);
+    expect(window.scrollY < 9000).toBe(true);
+    done();
+  });
+
+  function waitForNavigationToComplete(router: Router): Promise<any> {
+    return router.events.pipe(filter((e: any) => e instanceof NavigationEnd), first()).toPromise();
+  }
+});
diff --git a/packages/router/test/config.spec.ts b/packages/router/test/config.spec.ts
new file mode 100644
index 000000000000..1f419f2b0e7f
--- /dev/null
+++ b/packages/router/test/config.spec.ts
@@ -0,0 +1,152 @@
+/**
+ * @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 {validateConfig} from '../src/config';
+import {PRIMARY_OUTLET} from '../src/shared';
+
+describe('config', () => {
+  describe('validateConfig', () => {
+    it('should not throw when no errors', () => {
+      expect(
+          () => validateConfig([{path: 'a', redirectTo: 'b'}, {path: 'b', component: ComponentA}]))
+          .not.toThrow();
+    });
+
+    it('should not throw when a matcher is provided', () => {
+      expect(() => validateConfig([{matcher: <any>'someFunc', component: ComponentA}]))
+          .not.toThrow();
+    });
+
+    it('should throw for undefined route', () => {
+      expect(() => {
+        validateConfig(
+            [{path: 'a', component: ComponentA}, , {path: 'b', component: ComponentB}] as any);
+      }).toThrowError(/Invalid configuration of route ''/);
+    });
+
+    it('should throw for undefined route in children', () => {
+      expect(() => {
+        validateConfig([{
+          path: 'a',
+          children: [
+            {path: 'b', component: ComponentB},
+            ,
+          ]
+        }] as any);
+      }).toThrowError(/Invalid configuration of route 'a'/);
+    });
+
+    it('should throw when Array is passed', () => {
+      expect(() => {
+        validateConfig([
+          {path: 'a', component: ComponentA},
+          [{path: 'b', component: ComponentB}, {path: 'c', component: ComponentC}] as any
+        ]);
+      }).toThrowError(`Invalid configuration of route '': Array cannot be specified`);
+    });
+
+    it('should throw when redirectTo and children are used together', () => {
+      expect(() => {
+        validateConfig(
+            [{path: 'a', redirectTo: 'b', children: [{path: 'b', component: ComponentA}]}]);
+      })
+          .toThrowError(
+              `Invalid configuration of route 'a': redirectTo and children cannot be used together`);
+    });
+
+    it('should validate children and report full path', () => {
+      expect(() => validateConfig([{path: 'a', children: [{path: 'b'}]}]))
+          .toThrowError(
+              `Invalid configuration of route 'a/b'. One of the following must be provided: component, redirectTo, children or loadChildren`);
+    });
+
+    it('should properly report deeply nested path', () => {
+      expect(() => validateConfig([{
+               path: 'a',
+               children: [{path: 'b', children: [{path: 'c', children: [{path: 'd'}]}]}]
+             }]))
+          .toThrowError(
+              `Invalid configuration of route 'a/b/c/d'. One of the following must be provided: component, redirectTo, children or loadChildren`);
+    });
+
+    it('should throw when redirectTo and loadChildren are used together', () => {
+      expect(() => { validateConfig([{path: 'a', redirectTo: 'b', loadChildren: 'value'}]); })
+          .toThrowError(
+              `Invalid configuration of route 'a': redirectTo and loadChildren cannot be used together`);
+    });
+
+    it('should throw when children and loadChildren are used together', () => {
+      expect(() => { validateConfig([{path: 'a', children: [], loadChildren: 'value'}]); })
+          .toThrowError(
+              `Invalid configuration of route 'a': children and loadChildren cannot be used together`);
+    });
+
+    it('should throw when component and redirectTo are used together', () => {
+      expect(() => { validateConfig([{path: 'a', component: ComponentA, redirectTo: 'b'}]); })
+          .toThrowError(
+              `Invalid configuration of route 'a': redirectTo and component cannot be used together`);
+    });
+
+    it('should throw when path and matcher are used together', () => {
+      expect(() => { validateConfig([{path: 'a', matcher: <any>'someFunc', children: []}]); })
+          .toThrowError(
+              `Invalid configuration of route 'a': path and matcher cannot be used together`);
+    });
+
+    it('should throw when path and matcher are missing', () => {
+      expect(() => { validateConfig([{component: null, redirectTo: 'b'}] as any); })
+          .toThrowError(
+              `Invalid configuration of route '': routes must have either a path or a matcher specified`);
+    });
+
+    it('should throw when none of component and children or direct are missing', () => {
+      expect(() => { validateConfig([{path: 'a'}]); })
+          .toThrowError(
+              `Invalid configuration of route 'a'. One of the following must be provided: component, redirectTo, children or loadChildren`);
+    });
+
+    it('should throw when path starts with a slash', () => {
+      expect(() => {
+        validateConfig([<any>{path: '/a', redirectTo: 'b'}]);
+      }).toThrowError(`Invalid configuration of route '/a': path cannot start with a slash`);
+    });
+
+    it('should throw when emptyPath is used with redirectTo without explicitly providing matching',
+       () => {
+         expect(() => {
+           validateConfig([<any>{path: '', redirectTo: 'b'}]);
+         }).toThrowError(/Invalid configuration of route '{path: "", redirectTo: "b"}'/);
+       });
+
+    it('should throw when pathMatch is invalid', () => {
+      expect(() => { validateConfig([{path: 'a', pathMatch: 'invalid', component: ComponentB}]); })
+          .toThrowError(
+              /Invalid configuration of route 'a': pathMatch can only be set to 'prefix' or 'full'/);
+    });
+
+    it('should throw when path/outlet combination is invalid', () => {
+      expect(() => { validateConfig([{path: 'a', outlet: 'aux'}]); })
+          .toThrowError(
+              /Invalid configuration of route 'a': a componentless route without children or loadChildren cannot have a named outlet set/);
+      expect(() => validateConfig([{path: 'a', outlet: '', children: []}])).not.toThrow();
+      expect(() => validateConfig([{path: 'a', outlet: PRIMARY_OUTLET, children: []}]))
+          .not.toThrow();
+    });
+
+    it('should not throw when path/outlet combination is valid', () => {
+      expect(() => { validateConfig([{path: 'a', outlet: 'aux', children: []}]); }).not.toThrow();
+      expect(() => {
+        validateConfig([{path: 'a', outlet: 'aux', loadChildren: 'child'}]);
+      }).not.toThrow();
+    });
+  });
+});
+
+class ComponentA {}
+class ComponentB {}
+class ComponentC {}
diff --git a/packages/router/test/create_router_state.spec.ts b/packages/router/test/create_router_state.spec.ts
new file mode 100644
index 000000000000..0a0c2889c54b
--- /dev/null
+++ b/packages/router/test/create_router_state.spec.ts
@@ -0,0 +1,146 @@
+/**
+ * @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 {Routes} from '../src/config';
+import {createRouterState} from '../src/create_router_state';
+import {recognize} from '../src/recognize';
+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';
+import {TreeNode} from '../src/utils/tree';
+
+describe('create router state', () => {
+  const reuseStrategy = new DefaultRouteReuseStrategy();
+
+  const emptyState = () => createEmptyState(
+      new (UrlTree as any)(new UrlSegmentGroup([], {}), {}, null !), RootComponent);
+
+  it('should create new state', () => {
+    const state = createRouterState(
+        reuseStrategy, createState(
+                           [
+                             {path: 'a', component: ComponentA},
+                             {path: 'b', component: ComponentB, outlet: 'left'},
+                             {path: 'c', component: ComponentC, outlet: 'right'}
+                           ],
+                           'a(left:b//right:c)'),
+        emptyState());
+
+    checkActivatedRoute(state.root, RootComponent);
+
+    const c = (state as any).children(state.root);
+    checkActivatedRoute(c[0], ComponentA);
+    checkActivatedRoute(c[1], ComponentB, 'left');
+    checkActivatedRoute(c[2], ComponentC, 'right');
+  });
+
+  it('should reuse existing nodes when it can', () => {
+    const config = [
+      {path: 'a', component: ComponentA}, {path: 'b', component: ComponentB, outlet: 'left'},
+      {path: 'c', component: ComponentC, outlet: 'left'}
+    ];
+
+    const prevState =
+        createRouterState(reuseStrategy, createState(config, 'a(left:b)'), emptyState());
+    advanceState(prevState);
+    const state = createRouterState(reuseStrategy, createState(config, 'a(left:c)'), prevState);
+
+    expect(prevState.root).toBe(state.root);
+    const prevC = (prevState as any).children(prevState.root);
+    const currC = (state as any).children(state.root);
+
+    expect(prevC[0]).toBe(currC[0]);
+    expect(prevC[1]).not.toBe(currC[1]);
+    checkActivatedRoute(currC[1], ComponentC, 'left');
+  });
+
+  it('should handle componentless routes', () => {
+    const config = [{
+      path: 'a/:id',
+      children: [
+        {path: 'b', component: ComponentA}, {path: 'c', component: ComponentB, outlet: 'right'}
+      ]
+    }];
+
+
+    const prevState = createRouterState(
+        reuseStrategy, createState(config, 'a/1;p=11/(b//right:c)'), emptyState());
+    advanceState(prevState);
+    const state =
+        createRouterState(reuseStrategy, createState(config, 'a/2;p=22/(b//right:c)'), prevState);
+
+    expect(prevState.root).toBe(state.root);
+    const prevP = (prevState as any).firstChild(prevState.root) !;
+    const currP = (state as any).firstChild(state.root) !;
+    expect(prevP).toBe(currP);
+
+    const currC = (state as any).children(currP);
+
+    expect(currP._futureSnapshot.params).toEqual({id: '2', p: '22'});
+    expect(currP._futureSnapshot.paramMap.get('id')).toEqual('2');
+    expect(currP._futureSnapshot.paramMap.get('p')).toEqual('22');
+    checkActivatedRoute(currC[0], ComponentA);
+    checkActivatedRoute(currC[1], ComponentB, 'right');
+  });
+
+  it('should cache the retrieved routeReuseStrategy', () => {
+    const config = [
+      {path: 'a', component: ComponentA}, {path: 'b', component: ComponentB, outlet: 'left'},
+      {path: 'c', component: ComponentC, outlet: 'left'}
+    ];
+    spyOn(reuseStrategy, 'retrieve').and.callThrough();
+
+    const prevState =
+        createRouterState(reuseStrategy, createState(config, 'a(left:b)'), emptyState());
+    advanceState(prevState);
+
+    // Expect 2 calls as the baseline setup
+    expect(reuseStrategy.retrieve).toHaveBeenCalledTimes(2);
+
+    // This call should produce a reused activated route
+    const state = createRouterState(reuseStrategy, createState(config, 'a(left:c)'), prevState);
+
+    // Verify the retrieve method has been called one more time
+    expect(reuseStrategy.retrieve).toHaveBeenCalledTimes(3);
+  });
+});
+
+function advanceState(state: RouterState): void {
+  advanceNode((state as any)._root);
+}
+
+function advanceNode(node: TreeNode<ActivatedRoute>): void {
+  advanceActivatedRoute(node.value);
+  node.children.forEach(advanceNode);
+}
+
+function createState(config: Routes, url: string): RouterStateSnapshot {
+  let res: RouterStateSnapshot = undefined !;
+  recognize(RootComponent, config, tree(url), url).forEach(s => res = s);
+  return res;
+}
+
+function checkActivatedRoute(
+    actual: ActivatedRoute, cmp: Function, outlet: string = PRIMARY_OUTLET): void {
+  if (actual === null) {
+    expect(actual).toBeDefined();
+  } else {
+    expect(actual.component as any).toBe(cmp);
+    expect(actual.outlet).toEqual(outlet);
+  }
+}
+
+function tree(url: string): UrlTree {
+  return new DefaultUrlSerializer().parse(url);
+}
+
+class RootComponent {}
+class ComponentA {}
+class ComponentB {}
+class ComponentC {}
diff --git a/packages/router/test/create_url_tree.spec.ts b/packages/router/test/create_url_tree.spec.ts
new file mode 100644
index 000000000000..6b0e40a48ef9
--- /dev/null
+++ b/packages/router/test/create_url_tree.spec.ts
@@ -0,0 +1,270 @@
+/**
+ * @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 {BehaviorSubject} from 'rxjs';
+
+import {createUrlTree} from '../src/create_url_tree';
+import {ActivatedRoute, ActivatedRouteSnapshot, advanceActivatedRoute} from '../src/router_state';
+import {PRIMARY_OUTLET, Params} from '../src/shared';
+import {DefaultUrlSerializer, UrlSegmentGroup, UrlTree} from '../src/url_tree';
+
+describe('createUrlTree', () => {
+  const serializer = new DefaultUrlSerializer();
+
+  describe('query parameters', () => {
+    it('should support parameter with multiple values', () => {
+      const p1 = serializer.parse('/');
+      const t1 = createRoot(p1, ['/'], {m: ['v1', 'v2']});
+      expect(serializer.serialize(t1)).toEqual('/?m=v1&m=v2');
+
+      const p2 = serializer.parse('/a/c');
+      const t2 = create(p2.root.children[PRIMARY_OUTLET], 1, p2, ['c2'], {m: ['v1', 'v2']});
+      expect(serializer.serialize(t2)).toEqual('/a/c/c2?m=v1&m=v2');
+    });
+
+    it('should set query params', () => {
+      const p = serializer.parse('/');
+      const t = createRoot(p, [], {a: 'hey'});
+      expect(t.queryParams).toEqual({a: 'hey'});
+      expect(t.queryParamMap.get('a')).toEqual('hey');
+    });
+
+    it('should stringify query params', () => {
+      const p = serializer.parse('/');
+      const t = createRoot(p, [], <any>{a: 1});
+      expect(t.queryParams).toEqual({a: '1'});
+      expect(t.queryParamMap.get('a')).toEqual('1');
+    });
+  });
+
+  it('should navigate to the root', () => {
+    const p = serializer.parse('/');
+    const t = createRoot(p, ['/']);
+    expect(serializer.serialize(t)).toEqual('/');
+  });
+
+  it('should error when navigating to the root segment with params', () => {
+    const p = serializer.parse('/');
+    expect(() => createRoot(p, ['/', {p: 11}]))
+        .toThrowError(/Root segment cannot have matrix parameters/);
+  });
+
+  it('should support nested segments', () => {
+    const p = serializer.parse('/a/b');
+    const t = createRoot(p, ['/one', 11, 'two', 22]);
+    expect(serializer.serialize(t)).toEqual('/one/11/two/22');
+  });
+
+  it('should stringify positional parameters', () => {
+    const p = serializer.parse('/a/b');
+    const t = createRoot(p, ['/one', 11]);
+    const params = t.root.children[PRIMARY_OUTLET].segments;
+    expect(params[0].path).toEqual('one');
+    expect(params[1].path).toEqual('11');
+  });
+
+  it('should support first segments contaings slashes', () => {
+    const p = serializer.parse('/');
+    const t = createRoot(p, [{segmentPath: '/one'}, 'two/three']);
+    expect(serializer.serialize(t)).toEqual('/%2Fone/two%2Fthree');
+  });
+
+  it('should preserve secondary segments', () => {
+    const p = serializer.parse('/a/11/b(right:c)');
+    const t = createRoot(p, ['/a', 11, 'd']);
+    expect(serializer.serialize(t)).toEqual('/a/11/d(right:c)');
+  });
+
+  it('should support updating secondary segments (absolute)', () => {
+    const p = serializer.parse('/a(right:b)');
+    const t = createRoot(p, ['/', {outlets: {right: ['c']}}]);
+    expect(serializer.serialize(t)).toEqual('/a(right:c)');
+  });
+
+  it('should support updating secondary segments', () => {
+    const p = serializer.parse('/a(right:b)');
+    const t = createRoot(p, [{outlets: {right: ['c', 11, 'd']}}]);
+    expect(serializer.serialize(t)).toEqual('/a(right:c/11/d)');
+  });
+
+  it('should support updating secondary segments (nested case)', () => {
+    const p = serializer.parse('/a/(b//right:c)');
+    const t = createRoot(p, ['a', {outlets: {right: ['d', 11, 'e']}}]);
+    expect(serializer.serialize(t)).toEqual('/a/(b//right:d/11/e)');
+  });
+
+  it('should throw when outlets is not the last command', () => {
+    const p = serializer.parse('/a');
+    expect(() => createRoot(p, ['a', {outlets: {right: ['c']}}, 'c']))
+        .toThrowError('{outlets:{}} has to be the last command');
+  });
+
+  it('should support updating using a string', () => {
+    const p = serializer.parse('/a(right:b)');
+    const t = createRoot(p, [{outlets: {right: 'c/11/d'}}]);
+    expect(serializer.serialize(t)).toEqual('/a(right:c/11/d)');
+  });
+
+  it('should support updating primary and secondary segments at once', () => {
+    const p = serializer.parse('/a(right:b)');
+    const t = createRoot(p, [{outlets: {primary: 'y/z', right: 'c/11/d'}}]);
+    expect(serializer.serialize(t)).toEqual('/y/z(right:c/11/d)');
+  });
+
+  it('should support removing primary segment', () => {
+    const p = serializer.parse('/a/(b//right:c)');
+    const t = createRoot(p, ['a', {outlets: {primary: null, right: 'd'}}]);
+    expect(serializer.serialize(t)).toEqual('/a/(right:d)');
+  });
+
+  it('should support removing secondary segments', () => {
+    const p = serializer.parse('/a(right:b)');
+    const t = createRoot(p, [{outlets: {right: null}}]);
+    expect(serializer.serialize(t)).toEqual('/a');
+  });
+
+  it('should update matrix parameters', () => {
+    const p = serializer.parse('/a;pp=11');
+    const t = createRoot(p, ['/a', {pp: 22, dd: 33}]);
+    expect(serializer.serialize(t)).toEqual('/a;pp=22;dd=33');
+  });
+
+  it('should create matrix parameters', () => {
+    const p = serializer.parse('/a');
+    const t = createRoot(p, ['/a', {pp: 22, dd: 33}]);
+    expect(serializer.serialize(t)).toEqual('/a;pp=22;dd=33');
+  });
+
+  it('should create matrix parameters together with other segments', () => {
+    const p = serializer.parse('/a');
+    const t = createRoot(p, ['/a', 'b', {aa: 22, bb: 33}]);
+    expect(serializer.serialize(t)).toEqual('/a/b;aa=22;bb=33');
+  });
+
+  describe('relative navigation', () => {
+    it('should work', () => {
+      const p = serializer.parse('/a/(c//left:cp)(left:ap)');
+      const t = create(p.root.children[PRIMARY_OUTLET], 0, p, ['c2']);
+      expect(serializer.serialize(t)).toEqual('/a/(c2//left:cp)(left:ap)');
+    });
+
+    it('should work when the first command starts with a ./', () => {
+      const p = serializer.parse('/a/(c//left:cp)(left:ap)');
+      const t = create(p.root.children[PRIMARY_OUTLET], 0, p, ['./c2']);
+      expect(serializer.serialize(t)).toEqual('/a/(c2//left:cp)(left:ap)');
+    });
+
+    it('should work when the first command is ./)', () => {
+      const p = serializer.parse('/a/(c//left:cp)(left:ap)');
+      const t = create(p.root.children[PRIMARY_OUTLET], 0, p, ['./', 'c2']);
+      expect(serializer.serialize(t)).toEqual('/a/(c2//left:cp)(left:ap)');
+    });
+
+    it('should support parameters-only navigation', () => {
+      const p = serializer.parse('/a');
+      const t = create(p.root.children[PRIMARY_OUTLET], 0, p, [{k: 99}]);
+      expect(serializer.serialize(t)).toEqual('/a;k=99');
+    });
+
+    it('should support parameters-only navigation (nested case)', () => {
+      const p = serializer.parse('/a/(c//left:cp)(left:ap)');
+      const t = create(p.root.children[PRIMARY_OUTLET], 0, p, [{'x': 99}]);
+      expect(serializer.serialize(t)).toEqual('/a;x=99(left:ap)');
+    });
+
+    it('should support parameters-only navigation (with a double dot)', () => {
+      const p = serializer.parse('/a/(c//left:cp)(left:ap)');
+      const t =
+          create(p.root.children[PRIMARY_OUTLET].children[PRIMARY_OUTLET], 0, p, ['../', {x: 5}]);
+      expect(serializer.serialize(t)).toEqual('/a;x=5(left:ap)');
+    });
+
+    it('should work when index > 0', () => {
+      const p = serializer.parse('/a/c');
+      const t = create(p.root.children[PRIMARY_OUTLET], 1, p, ['c2']);
+      expect(serializer.serialize(t)).toEqual('/a/c/c2');
+    });
+
+    it('should support going to a parent (within a segment)', () => {
+      const p = serializer.parse('/a/c');
+      const t = create(p.root.children[PRIMARY_OUTLET], 1, p, ['../c2']);
+      expect(serializer.serialize(t)).toEqual('/a/c2');
+    });
+
+    it('should support going to a parent (across segments)', () => {
+      const p = serializer.parse('/q/(a/(c//left:cp)//left:qp)(left:ap)');
+
+      const t =
+          create(p.root.children[PRIMARY_OUTLET].children[PRIMARY_OUTLET], 0, p, ['../../q2']);
+      expect(serializer.serialize(t)).toEqual('/q2(left:ap)');
+    });
+
+    it('should navigate to the root', () => {
+      const p = serializer.parse('/a/c');
+      const t = create(p.root.children[PRIMARY_OUTLET], 0, p, ['../']);
+      expect(serializer.serialize(t)).toEqual('/');
+    });
+
+    it('should work with ../ when absolute url', () => {
+      const p = serializer.parse('/a/c');
+      const t = create(p.root.children[PRIMARY_OUTLET], 1, p, ['../', 'c2']);
+      expect(serializer.serialize(t)).toEqual('/a/c2');
+    });
+
+    it('should work with position = -1', () => {
+      const p = serializer.parse('/');
+      const t = create(p.root, -1, p, ['11']);
+      expect(serializer.serialize(t)).toEqual('/11');
+    });
+
+    it('should throw when too many ..', () => {
+      const p = serializer.parse('/a/(c//left:cp)(left:ap)');
+      expect(() => create(p.root.children[PRIMARY_OUTLET], 0, p, ['../../']))
+          .toThrowError('Invalid number of \'../\'');
+    });
+
+    it('should support updating secondary segments', () => {
+      const p = serializer.parse('/a/b');
+      const t = create(p.root.children[PRIMARY_OUTLET], 1, p, [{outlets: {right: ['c']}}]);
+      expect(serializer.serialize(t)).toEqual('/a/b/(right:c)');
+    });
+  });
+
+  it('should set fragment', () => {
+    const p = serializer.parse('/');
+    const t = createRoot(p, [], {}, 'fragment');
+    expect(t.fragment).toEqual('fragment');
+  });
+});
+
+function createRoot(tree: UrlTree, commands: any[], queryParams?: Params, fragment?: string) {
+  const s = new (ActivatedRouteSnapshot as any)(
+      [], <any>{}, <any>{}, '', <any>{}, PRIMARY_OUTLET, 'someComponent', null, tree.root, -1,
+      <any>null);
+  const a = new (ActivatedRoute as any)(
+      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 !);
+}
+
+function create(
+    segment: UrlSegmentGroup, startIndex: number, tree: UrlTree, commands: any[],
+    queryParams?: Params, fragment?: string) {
+  if (!segment) {
+    expect(segment).toBeDefined();
+  }
+  const s = new (ActivatedRouteSnapshot as any)(
+      [], <any>{}, <any>{}, '', <any>{}, PRIMARY_OUTLET, 'someComponent', null, <any>segment,
+      startIndex, <any>null);
+  const a = new (ActivatedRoute as any)(
+      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 !);
+}
diff --git a/packages/router/test/helpers.ts b/packages/router/test/helpers.ts
new file mode 100644
index 000000000000..674a1db8d3da
--- /dev/null
+++ b/packages/router/test/helpers.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 {Type} from '@angular/core';
+
+import {Data, ResolveData, Route} from '../src/config';
+import {ActivatedRouteSnapshot} from '../src/router_state';
+import {PRIMARY_OUTLET, ParamMap, Params, convertToParamMap} from '../src/shared';
+import {UrlSegment, UrlSegmentGroup, UrlTree, equalSegments} from '../src/url_tree';
+
+export class Logger {
+  logs: string[] = [];
+  add(thing: string) { this.logs.push(thing); }
+  empty() { this.logs.length = 0; }
+}
+
+export function provideTokenLogger(token: string, returnValue = true) {
+  return {
+    provide: token,
+    useFactory: (logger: Logger) => () => (logger.add(token), returnValue),
+    deps: [Logger]
+  };
+}
+
+export declare type ARSArgs = {
+  url?: UrlSegment[],
+  params?: Params,
+  queryParams?: Params,
+  fragment?: string,
+  data?: Data,
+  outlet?: string,
+  component: Type<any>| string | null,
+  routeConfig?: Route | null,
+  urlSegment?: UrlSegmentGroup,
+  lastPathIndex?: number,
+  resolve?: ResolveData
+};
+
+export function createActivatedRouteSnapshot(args: ARSArgs): ActivatedRouteSnapshot {
+  return new (ActivatedRouteSnapshot as any)(
+      args.url || <any>[], args.params || {}, args.queryParams || <any>null,
+      args.fragment || <any>null, args.data || <any>null, args.outlet || <any>null,
+      <any>args.component, args.routeConfig || <any>{}, args.urlSegment || <any>null,
+      args.lastPathIndex || -1, args.resolve || {});
+}
diff --git a/packages/router/test/integration.spec.ts b/packages/router/test/integration.spec.ts
new file mode 100644
index 000000000000..f4977e38db61
--- /dev/null
+++ b/packages/router/test/integration.spec.ts
@@ -0,0 +1,4329 @@
+/**
+ * @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, Location} from '@angular/common';
+import {SpyLocation} from '@angular/common/testing';
+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, ActivationEnd, ActivationStart, CanActivate, CanDeactivate, ChildActivationEnd, ChildActivationStart, DetachedRouteHandle, Event, GuardsCheckEnd, GuardsCheckStart, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, PRIMARY_OUTLET, ParamMap, Params, PreloadAllModules, PreloadingStrategy, Resolve, ResolveEnd, ResolveStart, RouteConfigLoadEnd, RouteConfigLoadStart, RouteReuseStrategy, Router, RouterEvent, RouterModule, RouterPreloader, RouterStateSnapshot, RoutesRecognized, RunGuardsAndResolvers, UrlHandlingStrategy, UrlSegmentGroup, UrlSerializer, UrlTree} from '@angular/router';
+import {Observable, Observer, of } from 'rxjs';
+import {map} from 'rxjs/operators';
+
+import {forEach} from '../src/utils/collection';
+import {RouterTestingModule, SpyNgModuleFactoryLoader} from '../testing';
+
+describe('Integration', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports:
+          [RouterTestingModule.withRoutes([{path: 'simple', component: SimpleCmp}]), TestModule]
+    });
+  });
+
+  it('should navigate with a provided config',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.navigateByUrl('/simple');
+       advance(fixture);
+
+       expect(location.path()).toEqual('/simple');
+     })));
+
+  it('should navigate from ngOnInit hook',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       router.resetConfig([
+         {path: '', component: SimpleCmp},
+         {path: 'one', component: RouteCmp},
+       ]);
+
+       const fixture = createRoot(router, RootCmpWithOnInit);
+       expect(location.path()).toEqual('/one');
+       expect(fixture.nativeElement).toHaveText('route');
+     })));
+
+  describe('navigation', function() {
+    it('should navigate to the current URL', fakeAsync(inject([Router], (router: Router) => {
+         router.onSameUrlNavigation = 'reload';
+         router.resetConfig([
+           {path: '', component: SimpleCmp},
+           {path: 'simple', component: SimpleCmp},
+         ]);
+
+         const fixture = createRoot(router, RootCmp);
+         const events: Event[] = [];
+         router.events.subscribe(e => onlyNavigationStartAndEnd(e) && events.push(e));
+
+         router.navigateByUrl('/simple');
+         tick();
+
+         router.navigateByUrl('/simple');
+         tick();
+
+         expectEvents(events, [
+           [NavigationStart, '/simple'], [NavigationEnd, '/simple'], [NavigationStart, '/simple'],
+           [NavigationEnd, '/simple']
+         ]);
+       })));
+
+    it('should set the restoredState to null when executing imperative navigations',
+       fakeAsync(inject([Router], (router: Router) => {
+         router.resetConfig([
+           {path: '', component: SimpleCmp},
+           {path: 'simple', component: SimpleCmp},
+         ]);
+
+         const fixture = createRoot(router, RootCmp);
+         let event: NavigationStart;
+         router.events.subscribe(e => {
+           if (e instanceof NavigationStart) {
+             event = e;
+           }
+         });
+
+         router.navigateByUrl('/simple');
+         tick();
+
+         expect(event !.navigationTrigger).toEqual('imperative');
+         expect(event !.restoredState).toEqual(null);
+       })));
+
+    it('should not pollute browser history when replaceUrl is set to true',
+       fakeAsync(inject([Router, Location], (router: Router, location: SpyLocation) => {
+         router.resetConfig([
+           {path: '', component: SimpleCmp}, {path: 'a', component: SimpleCmp},
+           {path: 'b', component: SimpleCmp}
+         ]);
+
+         const fixture = createRoot(router, RootCmp);
+
+         router.navigateByUrl('/a', {replaceUrl: true});
+         router.navigateByUrl('/b', {replaceUrl: true});
+         tick();
+
+         expect(location.urlChanges).toEqual(['replace: /', 'replace: /b']);
+       })));
+
+    it('should skip navigation if another navigation is already scheduled',
+       fakeAsync(inject([Router, Location], (router: Router, location: SpyLocation) => {
+         router.resetConfig([
+           {path: '', component: SimpleCmp}, {path: 'a', component: SimpleCmp},
+           {path: 'b', component: SimpleCmp}
+         ]);
+
+         const fixture = createRoot(router, RootCmp);
+
+         router.navigate(
+             ['/a'], {queryParams: {a: true}, queryParamsHandling: 'merge', replaceUrl: true});
+         router.navigate(
+             ['/b'], {queryParams: {b: true}, queryParamsHandling: 'merge', replaceUrl: true});
+         tick();
+
+         /**
+          * Why do we have '/b?b=true' and not '/b?a=true&b=true'?
+          *
+          * This is because the router has the right to stop a navigation mid-flight if another
+          * navigation has been already scheduled. This is why we can use a top-level guard
+          * to perform redirects. Calling `navigate` in such a guard will stop the navigation, and
+          * the components won't be instantiated.
+          *
+          * This is a fundamental property of the router: it only cares about its latest state.
+          *
+          * This means that components should only map params to something else, not reduce them.
+          * In other words, the following component is asking for trouble:
+          *
+          * ```
+          * class MyComponent {
+          *  constructor(a: ActivatedRoute) {
+          *    a.params.scan(...)
+          *  }
+          * }
+          * ```
+          *
+          * This also means "queryParamsHandling: 'merge'" should only be used to merge with
+          * long-living query parameters (e.g., debug).
+          */
+         expect(router.url).toEqual('/b?b=true');
+       })));
+  });
+
+  describe('should execute navigations serially', () => {
+    let log: any[] = [];
+
+    beforeEach(() => {
+      log = [];
+
+      TestBed.configureTestingModule({
+        providers: [
+          {
+            provide: 'trueRightAway',
+            useValue: () => {
+              log.push('trueRightAway');
+              return true;
+            }
+          },
+          {
+            provide: 'trueIn2Seconds',
+            useValue: () => {
+              log.push('trueIn2Seconds-start');
+              let res: any = null;
+              const p = new Promise(r => res = r);
+              setTimeout(() => {
+                log.push('trueIn2Seconds-end');
+                res(true);
+              }, 2000);
+              return p;
+            }
+          }
+        ]
+      });
+    });
+
+    describe('should advance the parent route after deactivating its children', () => {
+      @Component({template: '<router-outlet></router-outlet>'})
+      class Parent {
+        constructor(route: ActivatedRoute) {
+          route.params.subscribe((s: any) => { log.push(s); });
+        }
+      }
+
+      @Component({template: 'child1'})
+      class Child1 {
+        ngOnDestroy() { log.push('child1 destroy'); }
+      }
+
+      @Component({template: 'child2'})
+      class Child2 {
+        constructor() { log.push('child2 constructor'); }
+      }
+
+      @NgModule({
+        declarations: [Parent, Child1, Child2],
+        entryComponents: [Parent, Child1, Child2],
+        imports: [RouterModule]
+      })
+      class TestModule {
+      }
+
+      beforeEach(() => TestBed.configureTestingModule({imports: [TestModule]}));
+
+      it('should work',
+         fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+           const fixture = createRoot(router, RootCmp);
+
+           router.resetConfig([{
+             path: 'parent/:id',
+             component: Parent,
+             children: [
+               {path: 'child1', component: Child1},
+               {path: 'child2', component: Child2},
+             ]
+           }]);
+
+           router.navigateByUrl('/parent/1/child1');
+           advance(fixture);
+
+           router.navigateByUrl('/parent/2/child2');
+           advance(fixture);
+
+           expect(location.path()).toEqual('/parent/2/child2');
+           expect(log).toEqual([
+             {id: '1'},
+             'child1 destroy',
+             {id: '2'},
+             'child2 constructor',
+           ]);
+         })));
+
+    });
+
+    it('should execute navigations serialy',
+       fakeAsync(inject([Router, Location], (router: Router) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([
+           {path: 'a', component: SimpleCmp, canActivate: ['trueRightAway', 'trueIn2Seconds']},
+           {path: 'b', component: SimpleCmp, canActivate: ['trueRightAway', 'trueIn2Seconds']}
+         ]);
+
+         router.navigateByUrl('/a');
+         tick(100);
+         fixture.detectChanges();
+
+         router.navigateByUrl('/b');
+         tick(100);  // 200
+         fixture.detectChanges();
+
+         expect(log).toEqual(['trueRightAway', 'trueIn2Seconds-start']);
+
+         tick(2000);  // 2200
+         fixture.detectChanges();
+
+         expect(log).toEqual([
+           'trueRightAway', 'trueIn2Seconds-start', 'trueIn2Seconds-end', 'trueRightAway',
+           'trueIn2Seconds-start'
+         ]);
+
+         tick(2000);  // 4200
+         fixture.detectChanges();
+
+         expect(log).toEqual([
+           'trueRightAway', 'trueIn2Seconds-start', 'trueIn2Seconds-end', 'trueRightAway',
+           'trueIn2Seconds-start', 'trueIn2Seconds-end'
+         ]);
+       })));
+  });
+
+  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);
+
+       router.resetConfig([{
+         path: 'team/:id',
+         component: TeamCmp,
+         children: [{path: 'simple', component: SimpleCmp}]
+       }]);
+
+       router.navigateByUrl('/team/33/simple');
+       advance(fixture);
+
+       expect(location.path()).toEqual('/team/33/simple');
+       expect(fixture.nativeElement).toHaveText('team 33 [ simple, right:  ]');
+
+       router.navigateByUrl('/team/33');
+       advance(fixture);
+
+       expect(location.path()).toEqual('/team/33');
+       expect(fixture.nativeElement).toHaveText('team 33 [ , right:  ]');
+     })));
+
+  it('should work when an outlet is in an ngIf',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{
+         path: 'child',
+         component: OutletInNgIf,
+         children: [{path: 'simple', component: SimpleCmp}]
+       }]);
+
+       router.navigateByUrl('/child/simple');
+       advance(fixture);
+
+       expect(location.path()).toEqual('/child/simple');
+     })));
+
+  it('should work when an outlet is added/removed', fakeAsync(() => {
+       @Component({
+         selector: 'someRoot',
+         template: `[<div *ngIf="cond"><router-outlet></router-outlet></div>]`
+       })
+       class RootCmpWithLink {
+         cond: boolean = true;
+       }
+       TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
+
+       const router: Router = TestBed.get(Router);
+
+       const fixture = createRoot(router, RootCmpWithLink);
+
+       router.resetConfig([
+         {path: 'simple', component: SimpleCmp},
+         {path: 'blank', component: BlankCmp},
+       ]);
+
+       router.navigateByUrl('/simple');
+       advance(fixture);
+       expect(fixture.nativeElement).toHaveText('[simple]');
+
+       fixture.componentInstance.cond = false;
+       advance(fixture);
+       expect(fixture.nativeElement).toHaveText('[]');
+
+       fixture.componentInstance.cond = true;
+       advance(fixture);
+       expect(fixture.nativeElement).toHaveText('[simple]');
+     }));
+
+  it('should update location when navigating', fakeAsync(() => {
+       @Component({template: `record`})
+       class RecordLocationCmp {
+         private storedPath: string;
+         constructor(loc: Location) { this.storedPath = loc.path(); }
+       }
+
+       @NgModule({declarations: [RecordLocationCmp], entryComponents: [RecordLocationCmp]})
+       class TestModule {
+       }
+
+       TestBed.configureTestingModule({imports: [TestModule]});
+
+       const router = TestBed.get(Router);
+       const location = TestBed.get(Location);
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'record/:id', component: RecordLocationCmp}]);
+
+       router.navigateByUrl('/record/22');
+       advance(fixture);
+
+       const c = fixture.debugElement.children[1].componentInstance;
+       expect(location.path()).toEqual('/record/22');
+       expect(c.storedPath).toEqual('/record/22');
+
+       router.navigateByUrl('/record/33');
+       advance(fixture);
+       expect(location.path()).toEqual('/record/33');
+     }));
+
+  it('should skip location update when using NavigationExtras.skipLocationChange with navigateByUrl',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = TestBed.createComponent(RootCmp);
+       advance(fixture);
+
+       router.resetConfig([{path: 'team/:id', component: TeamCmp}]);
+
+       router.navigateByUrl('/team/22');
+       advance(fixture);
+       expect(location.path()).toEqual('/team/22');
+
+       expect(fixture.nativeElement).toHaveText('team 22 [ , right:  ]');
+
+       router.navigateByUrl('/team/33', {skipLocationChange: true});
+       advance(fixture);
+
+       expect(location.path()).toEqual('/team/22');
+
+       expect(fixture.nativeElement).toHaveText('team 33 [ , right:  ]');
+     })));
+
+  it('should skip location update when using NavigationExtras.skipLocationChange with navigate',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = TestBed.createComponent(RootCmp);
+       advance(fixture);
+
+       router.resetConfig([{path: 'team/:id', component: TeamCmp}]);
+
+       router.navigate(['/team/22']);
+       advance(fixture);
+       expect(location.path()).toEqual('/team/22');
+
+       expect(fixture.nativeElement).toHaveText('team 22 [ , right:  ]');
+
+       router.navigate(['/team/33'], {skipLocationChange: true});
+       advance(fixture);
+
+       expect(location.path()).toEqual('/team/22');
+
+       expect(fixture.nativeElement).toHaveText('team 33 [ , right:  ]');
+     })));
+
+  it('should eagerly update the URL with urlUpdateStrategy="eagar"',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = TestBed.createComponent(RootCmp);
+       advance(fixture);
+
+       router.resetConfig([{path: 'team/:id', component: TeamCmp}]);
+
+       router.navigateByUrl('/team/22');
+       advance(fixture);
+       expect(location.path()).toEqual('/team/22');
+
+       expect(fixture.nativeElement).toHaveText('team 22 [ , right:  ]');
+
+       router.urlUpdateStrategy = 'eager';
+       (router as any).hooks.beforePreactivation = () => {
+         expect(location.path()).toEqual('/team/33');
+         expect(fixture.nativeElement).toHaveText('team 22 [ , right:  ]');
+         return of (null);
+       };
+       router.navigateByUrl('/team/33');
+
+       advance(fixture);
+       expect(fixture.nativeElement).toHaveText('team 33 [ , right:  ]');
+     })));
+
+  it('should navigate back and forward',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{
+         path: 'team/:id',
+         component: TeamCmp,
+         children:
+             [{path: 'simple', component: SimpleCmp}, {path: 'user/:name', component: UserCmp}]
+       }]);
+
+       let event: NavigationStart;
+       router.events.subscribe(e => {
+         if (e instanceof NavigationStart) {
+           event = e;
+         }
+       });
+
+       router.navigateByUrl('/team/33/simple');
+       advance(fixture);
+       expect(location.path()).toEqual('/team/33/simple');
+       const simpleNavStart = event !;
+
+       router.navigateByUrl('/team/22/user/victor');
+       advance(fixture);
+       const userVictorNavStart = event !;
+
+
+       location.back();
+       advance(fixture);
+       expect(location.path()).toEqual('/team/33/simple');
+       expect(event !.navigationTrigger).toEqual('hashchange');
+       expect(event !.restoredState !.navigationId).toEqual(simpleNavStart.id);
+
+       location.forward();
+       advance(fixture);
+       expect(location.path()).toEqual('/team/22/user/victor');
+       expect(event !.navigationTrigger).toEqual('hashchange');
+       expect(event !.restoredState !.navigationId).toEqual(userVictorNavStart.id);
+     })));
+
+  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);
+
+       router.resetConfig([{
+         path: 'team/:id',
+         component: TeamCmp,
+         children: [{path: 'user/:name', component: UserCmp}]
+       }]);
+
+       const recordedEvents: any[] = [];
+       router.events.forEach(e => onlyNavigationStartAndEnd(e) && recordedEvents.push(e));
+
+       router.navigateByUrl('/team/22/user/victor');
+       advance(fixture);
+
+       (<any>location).simulateHashChange('/team/22/user/fedor');
+       advance(fixture);
+
+       (<any>location).simulateUrlPop('/team/22/user/fedor');
+       advance(fixture);
+
+       expect(fixture.nativeElement).toHaveText('team 22 [ user fedor, right:  ]');
+
+       expectEvents(recordedEvents, [
+         [NavigationStart, '/team/22/user/victor'], [NavigationEnd, '/team/22/user/victor'],
+         [NavigationStart, '/team/22/user/fedor'], [NavigationEnd, '/team/22/user/fedor']
+       ]);
+     })));
+
+  it('should update the location when the matched route does not change',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: '**', component: CollectParamsCmp}]);
+
+       router.navigateByUrl('/one/two');
+       advance(fixture);
+       const cmp = fixture.debugElement.children[1].componentInstance;
+       expect(location.path()).toEqual('/one/two');
+       expect(fixture.nativeElement).toHaveText('collect-params');
+
+       expect(cmp.recordedUrls()).toEqual(['one/two']);
+
+       router.navigateByUrl('/three/four');
+       advance(fixture);
+       expect(location.path()).toEqual('/three/four');
+       expect(fixture.nativeElement).toHaveText('collect-params');
+       expect(cmp.recordedUrls()).toEqual(['one/two', 'three/four']);
+     })));
+
+  describe('should reset location if a navigation by location is successful', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [{
+          provide: 'in1Second',
+          useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
+            let res: any = null;
+            const p = new Promise(_ => res = _);
+            setTimeout(() => res(true), 1000);
+            return p;
+          }
+        }]
+      });
+    });
+
+    it('work', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{path: 'simple', component: SimpleCmp, canActivate: ['in1Second']}]);
+
+         // Trigger two location changes to the same URL.
+         // Because of the guard the order will look as follows:
+         // - location change 'simple'
+         // - start processing the change, start a guard
+         // - location change 'simple'
+         // - the first location change gets canceled, the URL gets reset to '/'
+         // - the second location change gets finished, the URL should be reset to '/simple'
+         (<any>location).simulateUrlPop('/simple');
+         (<any>location).simulateUrlPop('/simple');
+
+         tick(2000);
+         advance(fixture);
+
+         expect(location.path()).toEqual('/simple');
+       })));
+  });
+
+  it('should support secondary routes', fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{
+         path: 'team/:id',
+         component: TeamCmp,
+         children: [
+           {path: 'user/:name', component: UserCmp},
+           {path: 'simple', component: SimpleCmp, outlet: 'right'}
+         ]
+       }]);
+
+       router.navigateByUrl('/team/22/(user/victor//right:simple)');
+       advance(fixture);
+
+       expect(fixture.nativeElement).toHaveText('team 22 [ user victor, right: simple ]');
+     })));
+
+  it('should support secondary routes in separate commands',
+     fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{
+         path: 'team/:id',
+         component: TeamCmp,
+         children: [
+           {path: 'user/:name', component: UserCmp},
+           {path: 'simple', component: SimpleCmp, outlet: 'right'}
+         ]
+       }]);
+
+       router.navigateByUrl('/team/22/user/victor');
+       advance(fixture);
+       router.navigate(['team/22', {outlets: {right: 'simple'}}]);
+       advance(fixture);
+
+       expect(fixture.nativeElement).toHaveText('team 22 [ user victor, right: simple ]');
+     })));
+
+  it('should deactivate outlets', fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{
+         path: 'team/:id',
+         component: TeamCmp,
+         children: [
+           {path: 'user/:name', component: UserCmp},
+           {path: 'simple', component: SimpleCmp, outlet: 'right'}
+         ]
+       }]);
+
+       router.navigateByUrl('/team/22/(user/victor//right:simple)');
+       advance(fixture);
+
+       router.navigateByUrl('/team/22/user/victor');
+       advance(fixture);
+
+       expect(fixture.nativeElement).toHaveText('team 22 [ user victor, right:  ]');
+     })));
+
+  it('should deactivate nested outlets', fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([
+         {
+           path: 'team/:id',
+           component: TeamCmp,
+           children: [
+             {path: 'user/:name', component: UserCmp},
+             {path: 'simple', component: SimpleCmp, outlet: 'right'}
+           ]
+         },
+         {path: '', component: BlankCmp}
+       ]);
+
+       router.navigateByUrl('/team/22/(user/victor//right:simple)');
+       advance(fixture);
+
+       router.navigateByUrl('/');
+       advance(fixture);
+
+       expect(fixture.nativeElement).toHaveText('');
+     })));
+
+  it('should set query params and fragment', fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'query', component: QueryParamsAndFragmentCmp}]);
+
+       router.navigateByUrl('/query?name=1#fragment1');
+       advance(fixture);
+       expect(fixture.nativeElement).toHaveText('query: 1 fragment: fragment1');
+
+       router.navigateByUrl('/query?name=2#fragment2');
+       advance(fixture);
+       expect(fixture.nativeElement).toHaveText('query: 2 fragment: fragment2');
+     })));
+
+  it('should ignore null and undefined query params',
+     fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'query', component: EmptyQueryParamsCmp}]);
+
+       router.navigate(['query'], {queryParams: {name: 1, age: null, page: undefined}});
+       advance(fixture);
+       const cmp = fixture.debugElement.children[1].componentInstance;
+       expect(cmp.recordedParams).toEqual([{name: '1'}]);
+     })));
+
+  it('should throw an error when one of the commands is null/undefined',
+     fakeAsync(inject([Router], (router: Router) => {
+       createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'query', component: EmptyQueryParamsCmp}]);
+
+       expect(() => router.navigate([
+         undefined, 'query'
+       ])).toThrowError(`The requested path contains undefined segment at index 0`);
+     })));
+
+  it('should push params only when they change', fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{
+         path: 'team/:id',
+         component: TeamCmp,
+         children: [{path: 'user/:name', component: UserCmp}]
+       }]);
+
+       router.navigateByUrl('/team/22/user/victor');
+       advance(fixture);
+       const team = fixture.debugElement.children[1].componentInstance;
+       const user = fixture.debugElement.children[1].children[1].componentInstance;
+
+       expect(team.recordedParams).toEqual([{id: '22'}]);
+       expect(team.snapshotParams).toEqual([{id: '22'}]);
+       expect(user.recordedParams).toEqual([{name: 'victor'}]);
+       expect(user.snapshotParams).toEqual([{name: 'victor'}]);
+
+       router.navigateByUrl('/team/22/user/fedor');
+       advance(fixture);
+
+       expect(team.recordedParams).toEqual([{id: '22'}]);
+       expect(team.snapshotParams).toEqual([{id: '22'}]);
+       expect(user.recordedParams).toEqual([{name: 'victor'}, {name: 'fedor'}]);
+       expect(user.snapshotParams).toEqual([{name: 'victor'}, {name: 'fedor'}]);
+     })));
+
+  it('should work when navigating to /', fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([
+         {path: '', pathMatch: 'full', component: SimpleCmp},
+         {path: 'user/:name', component: UserCmp}
+       ]);
+
+       router.navigateByUrl('/user/victor');
+       advance(fixture);
+
+       expect(fixture.nativeElement).toHaveText('user victor');
+
+       router.navigateByUrl('/');
+       advance(fixture);
+
+       expect(fixture.nativeElement).toHaveText('simple');
+     })));
+
+  it('should cancel in-flight navigations', fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'user/:name', component: UserCmp}]);
+
+       const recordedEvents: any[] = [];
+       router.events.forEach(e => recordedEvents.push(e));
+
+       router.navigateByUrl('/user/init');
+       advance(fixture);
+
+       const user = fixture.debugElement.children[1].componentInstance;
+
+       let r1: any, r2: any;
+       router.navigateByUrl('/user/victor') !.then(_ => r1 = _);
+       router.navigateByUrl('/user/fedor') !.then(_ => r2 = _);
+       advance(fixture);
+
+       expect(r1).toEqual(false);  // returns false because it was canceled
+       expect(r2).toEqual(true);   // returns true because it was successful
+
+       expect(fixture.nativeElement).toHaveText('user fedor');
+       expect(user.recordedParams).toEqual([{name: 'init'}, {name: 'fedor'}]);
+
+       expectEvents(recordedEvents, [
+         [NavigationStart, '/user/init'],
+         [RoutesRecognized, '/user/init'],
+         [GuardsCheckStart, '/user/init'],
+         [ChildActivationStart],
+         [ActivationStart],
+         [GuardsCheckEnd, '/user/init'],
+         [ResolveStart, '/user/init'],
+         [ResolveEnd, '/user/init'],
+         [ActivationEnd],
+         [ChildActivationEnd],
+         [NavigationEnd, '/user/init'],
+
+         [NavigationStart, '/user/victor'],
+         [NavigationCancel, '/user/victor'],
+
+         [NavigationStart, '/user/fedor'],
+         [RoutesRecognized, '/user/fedor'],
+         [GuardsCheckStart, '/user/fedor'],
+         [ChildActivationStart],
+         [ActivationStart],
+         [GuardsCheckEnd, '/user/fedor'],
+         [ResolveStart, '/user/fedor'],
+         [ResolveEnd, '/user/fedor'],
+         [ActivationEnd],
+         [ChildActivationEnd],
+         [NavigationEnd, '/user/fedor']
+       ]);
+     })));
+
+  it('should handle failed navigations gracefully', fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'user/:name', component: UserCmp}]);
+
+       const recordedEvents: any[] = [];
+       router.events.forEach(e => recordedEvents.push(e));
+
+       let e: any;
+       router.navigateByUrl('/invalid') !.catch(_ => e = _);
+       advance(fixture);
+       expect(e.message).toContain('Cannot match any routes');
+
+       router.navigateByUrl('/user/fedor');
+       advance(fixture);
+
+       expect(fixture.nativeElement).toHaveText('user fedor');
+
+       expectEvents(recordedEvents, [
+         [NavigationStart, '/invalid'], [NavigationError, '/invalid'],
+
+         [NavigationStart, '/user/fedor'], [RoutesRecognized, '/user/fedor'],
+         [GuardsCheckStart, '/user/fedor'], [ChildActivationStart], [ActivationStart],
+         [GuardsCheckEnd, '/user/fedor'], [ResolveStart, '/user/fedor'],
+         [ResolveEnd, '/user/fedor'], [ActivationEnd], [ChildActivationEnd],
+         [NavigationEnd, '/user/fedor']
+       ]);
+     })));
+
+  // Errors should behave the same for both deferred and eager URL update strategies
+  ['deferred', 'eager'].forEach((strat: any) => {
+    it('should dispatch NavigationError after the url has been reset back', fakeAsync(() => {
+         const router: Router = TestBed.get(Router);
+         const location: SpyLocation = TestBed.get(Location);
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig(
+             [{path: 'simple', component: SimpleCmp}, {path: 'throwing', component: ThrowingCmp}]);
+         router.urlUpdateStrategy = strat;
+
+         router.navigateByUrl('/simple');
+         advance(fixture);
+
+         let routerUrlBeforeEmittingError = '';
+         let locationUrlBeforeEmittingError = '';
+         router.events.forEach(e => {
+           if (e instanceof NavigationError) {
+             routerUrlBeforeEmittingError = router.url;
+             locationUrlBeforeEmittingError = location.path();
+           }
+         });
+
+         router.navigateByUrl('/throwing').catch(() => null);
+         advance(fixture);
+
+         expect(routerUrlBeforeEmittingError).toEqual('/simple');
+         expect(locationUrlBeforeEmittingError).toEqual('/simple');
+       }));
+
+    it('should reset the url with the right state when navigation errors', fakeAsync(() => {
+         const router: Router = TestBed.get(Router);
+         const location: SpyLocation = TestBed.get(Location);
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([
+           {path: 'simple1', component: SimpleCmp}, {path: 'simple2', component: SimpleCmp},
+           {path: 'throwing', component: ThrowingCmp}
+         ]);
+         router.urlUpdateStrategy = strat;
+
+         let event: NavigationStart;
+         router.events.subscribe(e => {
+           if (e instanceof NavigationStart) {
+             event = e;
+           }
+         });
+
+         router.navigateByUrl('/simple1');
+         advance(fixture);
+         const simple1NavStart = event !;
+
+         router.navigateByUrl('/throwing').catch(() => null);
+         advance(fixture);
+
+         router.navigateByUrl('/simple2');
+         advance(fixture);
+
+         location.back();
+         tick();
+
+         expect(event !.restoredState !.navigationId).toEqual(simple1NavStart.id);
+       }));
+
+    it('should not trigger another navigation when resetting the url back due to a NavigationError',
+       fakeAsync(() => {
+         const router = TestBed.get(Router);
+         router.onSameUrlNavigation = 'reload';
+
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig(
+             [{path: 'simple', component: SimpleCmp}, {path: 'throwing', component: ThrowingCmp}]);
+         router.urlUpdateStrategy = strat;
+
+         const events: any[] = [];
+         router.events.forEach((e: any) => {
+           if (e instanceof NavigationStart) {
+             events.push(e.url);
+           }
+         });
+
+         router.navigateByUrl('/simple');
+         advance(fixture);
+
+         router.navigateByUrl('/throwing').catch(() => null);
+         advance(fixture);
+
+         // we do not trigger another navigation to /simple
+         expect(events).toEqual(['/simple', '/throwing']);
+       }));
+
+  });
+
+  it('should dispatch NavigationCancel after the url has been reset back', fakeAsync(() => {
+       TestBed.configureTestingModule(
+           {providers: [{provide: 'returnsFalse', useValue: () => false}]});
+
+       const router: Router = TestBed.get(Router);
+       const location: SpyLocation = TestBed.get(Location);
+
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([
+         {path: 'simple', component: SimpleCmp},
+         {path: 'throwing', loadChildren: 'doesnotmatter', canLoad: ['returnsFalse']}
+       ]);
+
+       router.navigateByUrl('/simple');
+       advance(fixture);
+
+       let routerUrlBeforeEmittingError = '';
+       let locationUrlBeforeEmittingError = '';
+       router.events.forEach(e => {
+         if (e instanceof NavigationCancel) {
+           routerUrlBeforeEmittingError = router.url;
+           locationUrlBeforeEmittingError = location.path();
+         }
+       });
+
+       location.simulateHashChange('/throwing');
+       advance(fixture);
+
+       expect(routerUrlBeforeEmittingError).toEqual('/simple');
+       expect(locationUrlBeforeEmittingError).toEqual('/simple');
+     }));
+
+  it('should support custom error handlers', fakeAsync(inject([Router], (router: Router) => {
+       router.errorHandler = (error) => 'resolvedValue';
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'user/:name', component: UserCmp}]);
+
+       const recordedEvents: any[] = [];
+       router.events.forEach(e => recordedEvents.push(e));
+
+       let e: any;
+       router.navigateByUrl('/invalid') !.then(_ => e = _);
+       advance(fixture);
+       expect(e).toEqual('resolvedValue');
+
+       expectEvents(recordedEvents, [[NavigationStart, '/invalid'], [NavigationError, '/invalid']]);
+     })));
+
+  it('should recover from malformed uri errors',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       router.resetConfig([{path: 'simple', component: SimpleCmp}]);
+       const fixture = createRoot(router, RootCmp);
+       router.navigateByUrl('/invalid/url%with%percent');
+       advance(fixture);
+       expect(location.path()).toEqual('/');
+     })));
+
+  it('should support custom malformed uri error handler',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const customMalformedUriErrorHandler =
+           (e: URIError, urlSerializer: UrlSerializer, url: string):
+               UrlTree => { return urlSerializer.parse('/?error=The-URL-you-went-to-is-invalid'); };
+       router.malformedUriErrorHandler = customMalformedUriErrorHandler;
+
+       router.resetConfig([{path: 'simple', component: SimpleCmp}]);
+
+       const fixture = createRoot(router, RootCmp);
+       router.navigateByUrl('/invalid/url%with%percent');
+       advance(fixture);
+       expect(location.path()).toEqual('/?error=The-URL-you-went-to-is-invalid');
+     })));
+
+  it('should not swallow errors', fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'simple', component: SimpleCmp}]);
+
+       router.navigateByUrl('/invalid');
+       expect(() => advance(fixture)).toThrow();
+
+       router.navigateByUrl('/invalid2');
+       expect(() => advance(fixture)).toThrow();
+     })));
+
+
+  it('should replace state when path is equal to current path',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{
+         path: 'team/:id',
+         component: TeamCmp,
+         children:
+             [{path: 'simple', component: SimpleCmp}, {path: 'user/:name', component: UserCmp}]
+       }]);
+
+       router.navigateByUrl('/team/33/simple');
+       advance(fixture);
+
+       router.navigateByUrl('/team/22/user/victor');
+       advance(fixture);
+
+       router.navigateByUrl('/team/22/user/victor');
+       advance(fixture);
+
+       location.back();
+       advance(fixture);
+       expect(location.path()).toEqual('/team/33/simple');
+     })));
+
+  it('should handle componentless paths',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = createRoot(router, RootCmpWithTwoOutlets);
+
+       router.resetConfig([
+         {
+           path: 'parent/:id',
+           children: [
+             {path: 'simple', component: SimpleCmp},
+             {path: 'user/:name', component: UserCmp, outlet: 'right'}
+           ]
+         },
+         {path: 'user/:name', component: UserCmp}
+       ]);
+
+
+       // navigate to a componentless route
+       router.navigateByUrl('/parent/11/(simple//right:user/victor)');
+       advance(fixture);
+       expect(location.path()).toEqual('/parent/11/(simple//right:user/victor)');
+       expect(fixture.nativeElement).toHaveText('primary [simple] right [user victor]');
+
+       // navigate to the same route with different params (reuse)
+       router.navigateByUrl('/parent/22/(simple//right:user/fedor)');
+       advance(fixture);
+       expect(location.path()).toEqual('/parent/22/(simple//right:user/fedor)');
+       expect(fixture.nativeElement).toHaveText('primary [simple] right [user fedor]');
+
+       // navigate to a normal route (check deactivation)
+       router.navigateByUrl('/user/victor');
+       advance(fixture);
+       expect(location.path()).toEqual('/user/victor');
+       expect(fixture.nativeElement).toHaveText('primary [user victor] right []');
+
+       // navigate back to a componentless route
+       router.navigateByUrl('/parent/11/(simple//right:user/victor)');
+       advance(fixture);
+       expect(location.path()).toEqual('/parent/11/(simple//right:user/victor)');
+       expect(fixture.nativeElement).toHaveText('primary [simple] right [user victor]');
+     })));
+
+  it('should not deactivate aux routes when navigating from a componentless routes',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = createRoot(router, TwoOutletsCmp);
+
+       router.resetConfig([
+         {path: 'simple', component: SimpleCmp},
+         {path: 'componentless', children: [{path: 'simple', component: SimpleCmp}]},
+         {path: 'user/:name', outlet: 'aux', component: UserCmp}
+       ]);
+
+       router.navigateByUrl('/componentless/simple(aux:user/victor)');
+       advance(fixture);
+       expect(location.path()).toEqual('/componentless/simple(aux:user/victor)');
+       expect(fixture.nativeElement).toHaveText('[ simple, aux: user victor ]');
+
+       router.navigateByUrl('/simple(aux:user/victor)');
+       advance(fixture);
+       expect(location.path()).toEqual('/simple(aux:user/victor)');
+       expect(fixture.nativeElement).toHaveText('[ simple, aux: user victor ]');
+     })));
+
+  it('should emit an event when an outlet gets activated', fakeAsync(() => {
+       @Component({
+         selector: 'container',
+         template:
+             `<router-outlet (activate)="recordActivate($event)" (deactivate)="recordDeactivate($event)"></router-outlet>`
+       })
+       class Container {
+         activations: any[] = [];
+         deactivations: any[] = [];
+
+         recordActivate(component: any): void { this.activations.push(component); }
+
+         recordDeactivate(component: any): void { this.deactivations.push(component); }
+       }
+
+       TestBed.configureTestingModule({declarations: [Container]});
+
+       const router: Router = TestBed.get(Router);
+
+       const fixture = createRoot(router, Container);
+       const cmp = fixture.componentInstance;
+
+       router.resetConfig(
+           [{path: 'blank', component: BlankCmp}, {path: 'simple', component: SimpleCmp}]);
+
+       cmp.activations = [];
+       cmp.deactivations = [];
+
+       router.navigateByUrl('/blank');
+       advance(fixture);
+
+       expect(cmp.activations.length).toEqual(1);
+       expect(cmp.activations[0] instanceof BlankCmp).toBe(true);
+
+       router.navigateByUrl('/simple');
+       advance(fixture);
+
+       expect(cmp.activations.length).toEqual(2);
+       expect(cmp.activations[1] instanceof SimpleCmp).toBe(true);
+       expect(cmp.deactivations.length).toEqual(1);
+       expect(cmp.deactivations[0] instanceof BlankCmp).toBe(true);
+     }));
+
+  it('should update url and router state before activating components',
+     fakeAsync(inject([Router], (router: Router) => {
+
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'cmp', component: ComponentRecordingRoutePathAndUrl}]);
+
+       router.navigateByUrl('/cmp');
+       advance(fixture);
+
+       const cmp = fixture.debugElement.children[1].componentInstance;
+
+       expect(cmp.url).toBe('/cmp');
+       expect(cmp.path.length).toEqual(2);
+     })));
+
+
+
+  describe('data', () => {
+    class ResolveSix implements Resolve<number> {
+      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): number { return 6; }
+    }
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [
+          {provide: 'resolveTwo', useValue: (a: any, b: any) => 2},
+          {provide: 'resolveFour', useValue: (a: any, b: any) => 4},
+          {provide: 'resolveSix', useClass: ResolveSix},
+          {provide: 'resolveError', useValue: (a: any, b: any) => Promise.reject('error')},
+          {provide: 'resolveNullError', useValue: (a: any, b: any) => Promise.reject(null)},
+          {provide: 'numberOfUrlSegments', useValue: (a: any, b: any) => a.url.length},
+        ]
+      });
+    });
+
+    it('should provide resolved data', fakeAsync(inject([Router], (router: Router) => {
+         const fixture = createRoot(router, RootCmpWithTwoOutlets);
+
+         router.resetConfig([{
+           path: 'parent/:id',
+           data: {one: 1},
+           resolve: {two: 'resolveTwo'},
+           children: [
+             {path: '', data: {three: 3}, resolve: {four: 'resolveFour'}, component: RouteCmp}, {
+               path: '',
+               data: {five: 5},
+               resolve: {six: 'resolveSix'},
+               component: RouteCmp,
+               outlet: 'right'
+             }
+           ]
+         }]);
+
+         router.navigateByUrl('/parent/1');
+         advance(fixture);
+
+         const primaryCmp = fixture.debugElement.children[1].componentInstance;
+         const rightCmp = fixture.debugElement.children[3].componentInstance;
+
+         expect(primaryCmp.route.snapshot.data).toEqual({one: 1, two: 2, three: 3, four: 4});
+         expect(rightCmp.route.snapshot.data).toEqual({one: 1, two: 2, five: 5, six: 6});
+
+         const primaryRecorded: any[] = [];
+         primaryCmp.route.data.forEach((rec: any) => primaryRecorded.push(rec));
+
+         const rightRecorded: any[] = [];
+         rightCmp.route.data.forEach((rec: any) => rightRecorded.push(rec));
+
+         router.navigateByUrl('/parent/2');
+         advance(fixture);
+
+         expect(primaryRecorded).toEqual([{one: 1, three: 3, two: 2, four: 4}]);
+         expect(rightRecorded).toEqual([{one: 1, five: 5, two: 2, six: 6}]);
+       })));
+
+    it('should handle errors', fakeAsync(inject([Router], (router: Router) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig(
+             [{path: 'simple', component: SimpleCmp, resolve: {error: 'resolveError'}}]);
+
+         const recordedEvents: any[] = [];
+         router.events.subscribe(e => e instanceof RouterEvent && recordedEvents.push(e));
+
+         let e: any = null;
+         router.navigateByUrl('/simple') !.catch(error => e = error);
+         advance(fixture);
+
+         expectEvents(recordedEvents, [
+           [NavigationStart, '/simple'], [RoutesRecognized, '/simple'],
+           [GuardsCheckStart, '/simple'], [GuardsCheckEnd, '/simple'], [ResolveStart, '/simple'],
+           [NavigationError, '/simple']
+         ]);
+
+         expect(e).toEqual('error');
+       })));
+
+    it('should handle empty errors', fakeAsync(inject([Router], (router: Router) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig(
+             [{path: 'simple', component: SimpleCmp, resolve: {error: 'resolveNullError'}}]);
+
+         const recordedEvents: any[] = [];
+         router.events.subscribe(e => e instanceof RouterEvent && recordedEvents.push(e));
+
+         let e: any = 'some value';
+         router.navigateByUrl('/simple').catch(error => e = error);
+         advance(fixture);
+
+         expect(e).toEqual(null);
+       })));
+
+    it('should preserve resolved data', fakeAsync(inject([Router], (router: Router) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{
+           path: 'parent',
+           resolve: {two: 'resolveTwo'},
+           children: [
+             {path: 'child1', component: CollectParamsCmp},
+             {path: 'child2', component: CollectParamsCmp}
+           ]
+         }]);
+
+         const e: any = null;
+         router.navigateByUrl('/parent/child1');
+         advance(fixture);
+
+         router.navigateByUrl('/parent/child2');
+         advance(fixture);
+
+         const cmp = fixture.debugElement.children[1].componentInstance;
+         expect(cmp.route.snapshot.data).toEqual({two: 2});
+       })));
+
+    it('should rerun resolvers when the urls segments of a wildcard route change',
+       fakeAsync(inject([Router, Location], (router: Router) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{
+           path: '**',
+           component: CollectParamsCmp,
+           resolve: {numberOfUrlSegments: 'numberOfUrlSegments'}
+         }]);
+
+         router.navigateByUrl('/one/two');
+         advance(fixture);
+         const cmp = fixture.debugElement.children[1].componentInstance;
+
+         expect(cmp.route.snapshot.data).toEqual({numberOfUrlSegments: 2});
+
+         router.navigateByUrl('/one/two/three');
+         advance(fixture);
+
+         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 obs$.pipe(map(() => log.push('resolver1')));
+              }
+            },
+            {
+              provide: 'resolver2',
+              useValue: () => {
+                return of (null).pipe(map(() => {
+                  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', () => {
+    it('should support skipping location update for anchor router links',
+       fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+         const fixture = TestBed.createComponent(RootCmp);
+         advance(fixture);
+
+         router.resetConfig([{path: 'team/:id', component: TeamCmp}]);
+
+         router.navigateByUrl('/team/22');
+         advance(fixture);
+         expect(location.path()).toEqual('/team/22');
+         expect(fixture.nativeElement).toHaveText('team 22 [ , right:  ]');
+
+         const teamCmp = fixture.debugElement.childNodes[1].componentInstance;
+
+         teamCmp.routerLink = ['/team/0'];
+         advance(fixture);
+         const anchor = fixture.debugElement.query(By.css('a')).nativeElement;
+         anchor.click();
+         advance(fixture);
+         expect(fixture.nativeElement).toHaveText('team 0 [ , right:  ]');
+         expect(location.path()).toEqual('/team/22');
+
+         teamCmp.routerLink = ['/team/1'];
+         advance(fixture);
+         const button = fixture.debugElement.query(By.css('button')).nativeElement;
+         button.click();
+         advance(fixture);
+         expect(fixture.nativeElement).toHaveText('team 1 [ , right:  ]');
+         expect(location.path()).toEqual('/team/22');
+       })));
+
+    it('should support string router links', fakeAsync(inject([Router], (router: Router) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{
+           path: 'team/:id',
+           component: TeamCmp,
+           children: [
+             {path: 'link', component: StringLinkCmp}, {path: 'simple', component: SimpleCmp}
+           ]
+         }]);
+
+         router.navigateByUrl('/team/22/link');
+         advance(fixture);
+         expect(fixture.nativeElement).toHaveText('team 22 [ link, right:  ]');
+
+         const native = fixture.nativeElement.querySelector('a');
+         expect(native.getAttribute('href')).toEqual('/team/33/simple');
+         expect(native.getAttribute('target')).toEqual('_self');
+         native.click();
+         advance(fixture);
+
+         expect(fixture.nativeElement).toHaveText('team 33 [ simple, right:  ]');
+       })));
+
+    it('should not preserve query params and fragment by default', fakeAsync(() => {
+         @Component({
+           selector: 'someRoot',
+           template: `<router-outlet></router-outlet><a routerLink="/home">Link</a>`
+         })
+         class RootCmpWithLink {
+         }
+
+         TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
+         const router: Router = TestBed.get(Router);
+
+         const fixture = createRoot(router, RootCmpWithLink);
+
+         router.resetConfig([{path: 'home', component: SimpleCmp}]);
+
+         const native = fixture.nativeElement.querySelector('a');
+
+         router.navigateByUrl('/home?q=123#fragment');
+         advance(fixture);
+         expect(native.getAttribute('href')).toEqual('/home');
+       }));
+
+    it('should not throw when commands is null', fakeAsync(() => {
+         @Component({
+           selector: 'someCmp',
+           template:
+               `<router-outlet></router-outlet><a [routerLink]="null">Link</a><button [routerLink]="null">Button</button>`
+         })
+         class CmpWithLink {
+         }
+
+         TestBed.configureTestingModule({declarations: [CmpWithLink]});
+         const router: Router = TestBed.get(Router);
+
+         let fixture: ComponentFixture<CmpWithLink> = createRoot(router, CmpWithLink);
+         router.resetConfig([{path: 'home', component: SimpleCmp}]);
+         const anchor = fixture.nativeElement.querySelector('a');
+         const button = fixture.nativeElement.querySelector('button');
+         expect(() => anchor.click()).not.toThrow();
+         expect(() => button.click()).not.toThrow();
+       }));
+
+    it('should update hrefs when query params or fragment change', fakeAsync(() => {
+
+         @Component({
+           selector: 'someRoot',
+           template:
+               `<router-outlet></router-outlet><a routerLink="/home" preserveQueryParams preserveFragment>Link</a>`
+         })
+         class RootCmpWithLink {
+         }
+         TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
+         const router: Router = TestBed.get(Router);
+         const fixture = createRoot(router, RootCmpWithLink);
+
+         router.resetConfig([{path: 'home', component: SimpleCmp}]);
+
+         const native = fixture.nativeElement.querySelector('a');
+
+         router.navigateByUrl('/home?q=123');
+         advance(fixture);
+         expect(native.getAttribute('href')).toEqual('/home?q=123');
+
+         router.navigateByUrl('/home?q=456');
+         advance(fixture);
+         expect(native.getAttribute('href')).toEqual('/home?q=456');
+
+         router.navigateByUrl('/home?q=456#1');
+         advance(fixture);
+         expect(native.getAttribute('href')).toEqual('/home?q=456#1');
+       }));
+
+    it('should correctly use the preserve strategy', fakeAsync(() => {
+
+         @Component({
+           selector: 'someRoot',
+           template:
+               `<router-outlet></router-outlet><a routerLink="/home" [queryParams]="{q: 456}" queryParamsHandling="preserve">Link</a>`
+         })
+         class RootCmpWithLink {
+         }
+         TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
+         const router: Router = TestBed.get(Router);
+         const fixture = createRoot(router, RootCmpWithLink);
+
+         router.resetConfig([{path: 'home', component: SimpleCmp}]);
+
+         const native = fixture.nativeElement.querySelector('a');
+
+         router.navigateByUrl('/home?a=123');
+         advance(fixture);
+         expect(native.getAttribute('href')).toEqual('/home?a=123');
+       }));
+
+    it('should correctly use the merge strategy', fakeAsync(() => {
+
+         @Component({
+           selector: 'someRoot',
+           template:
+               `<router-outlet></router-outlet><a routerLink="/home" [queryParams]="{removeMe: null, q: 456}" queryParamsHandling="merge">Link</a>`
+         })
+         class RootCmpWithLink {
+         }
+         TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
+         const router: Router = TestBed.get(Router);
+         const fixture = createRoot(router, RootCmpWithLink);
+
+         router.resetConfig([{path: 'home', component: SimpleCmp}]);
+
+         const native = fixture.nativeElement.querySelector('a');
+
+         router.navigateByUrl('/home?a=123&removeMe=123');
+         advance(fixture);
+         expect(native.getAttribute('href')).toEqual('/home?a=123&q=456');
+       }));
+
+    it('should support using links on non-a tags', fakeAsync(inject([Router], (router: Router) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{
+           path: 'team/:id',
+           component: TeamCmp,
+           children: [
+             {path: 'link', component: StringLinkButtonCmp},
+             {path: 'simple', component: SimpleCmp}
+           ]
+         }]);
+
+         router.navigateByUrl('/team/22/link');
+         advance(fixture);
+         expect(fixture.nativeElement).toHaveText('team 22 [ link, right:  ]');
+
+         const button = fixture.nativeElement.querySelector('button');
+         expect(button.getAttribute('tabindex')).toEqual('0');
+         button.click();
+         advance(fixture);
+
+         expect(fixture.nativeElement).toHaveText('team 33 [ simple, right:  ]');
+       })));
+
+    it('should support absolute router links', fakeAsync(inject([Router], (router: Router) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{
+           path: 'team/:id',
+           component: TeamCmp,
+           children: [
+             {path: 'link', component: AbsoluteLinkCmp}, {path: 'simple', component: SimpleCmp}
+           ]
+         }]);
+
+         router.navigateByUrl('/team/22/link');
+         advance(fixture);
+         expect(fixture.nativeElement).toHaveText('team 22 [ link, right:  ]');
+
+         const native = fixture.nativeElement.querySelector('a');
+         expect(native.getAttribute('href')).toEqual('/team/33/simple');
+         native.click();
+         advance(fixture);
+
+         expect(fixture.nativeElement).toHaveText('team 33 [ simple, right:  ]');
+       })));
+
+    it('should support relative router links', fakeAsync(inject([Router], (router: Router) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{
+           path: 'team/:id',
+           component: TeamCmp,
+           children: [
+             {path: 'link', component: RelativeLinkCmp}, {path: 'simple', component: SimpleCmp}
+           ]
+         }]);
+
+         router.navigateByUrl('/team/22/link');
+         advance(fixture);
+         expect(fixture.nativeElement).toHaveText('team 22 [ link, right:  ]');
+
+         const native = fixture.nativeElement.querySelector('a');
+         expect(native.getAttribute('href')).toEqual('/team/22/simple');
+         native.click();
+         advance(fixture);
+
+         expect(fixture.nativeElement).toHaveText('team 22 [ simple, right:  ]');
+       })));
+
+    it('should support top-level link', fakeAsync(inject([Router], (router: Router) => {
+         const fixture = createRoot(router, RelativeLinkInIfCmp);
+         advance(fixture);
+
+         router.resetConfig(
+             [{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]);
+
+         router.navigateByUrl('/');
+         advance(fixture);
+         expect(fixture.nativeElement).toHaveText('');
+         const cmp = fixture.componentInstance;
+
+         cmp.show = true;
+         advance(fixture);
+
+         expect(fixture.nativeElement).toHaveText('link');
+         const native = fixture.nativeElement.querySelector('a');
+
+         expect(native.getAttribute('href')).toEqual('/simple');
+         native.click();
+         advance(fixture);
+
+         expect(fixture.nativeElement).toHaveText('linksimple');
+       })));
+
+    it('should support query params and fragments',
+       fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{
+           path: 'team/:id',
+           component: TeamCmp,
+           children: [
+             {path: 'link', component: LinkWithQueryParamsAndFragment},
+             {path: 'simple', component: SimpleCmp}
+           ]
+         }]);
+
+         router.navigateByUrl('/team/22/link');
+         advance(fixture);
+
+         const native = fixture.nativeElement.querySelector('a');
+         expect(native.getAttribute('href')).toEqual('/team/22/simple?q=1#f');
+         native.click();
+         advance(fixture);
+
+         expect(fixture.nativeElement).toHaveText('team 22 [ simple, right:  ]');
+
+         expect(location.path()).toEqual('/team/22/simple?q=1#f');
+       })));
+  });
+
+  describe('redirects', () => {
+    it('should work', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([
+           {path: 'old/team/:id', redirectTo: 'team/:id'}, {path: 'team/:id', component: TeamCmp}
+         ]);
+
+         router.navigateByUrl('old/team/22');
+         advance(fixture);
+
+         expect(location.path()).toEqual('/team/22');
+       })));
+
+    it('should not break the back button when trigger by location change',
+       fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+         const fixture = TestBed.createComponent(RootCmp);
+         advance(fixture);
+         router.resetConfig([
+           {path: 'initial', component: BlankCmp}, {path: 'old/team/:id', redirectTo: 'team/:id'},
+           {path: 'team/:id', component: TeamCmp}
+         ]);
+
+         location.go('initial');
+         location.go('old/team/22');
+
+         // initial navigation
+         router.initialNavigation();
+         advance(fixture);
+         expect(location.path()).toEqual('/team/22');
+
+         location.back();
+         advance(fixture);
+         expect(location.path()).toEqual('/initial');
+
+         // location change
+         (<any>location).go('/old/team/33');
+
+
+         advance(fixture);
+         expect(location.path()).toEqual('/team/33');
+
+         location.back();
+         advance(fixture);
+         expect(location.path()).toEqual('/initial');
+       })));
+  });
+
+  describe('guards', () => {
+    describe('CanActivate', () => {
+      describe('should not activate a route when CanActivate returns false', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule(
+              {providers: [{provide: 'alwaysFalse', useValue: (a: any, b: any) => false}]});
+        });
+
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             const recordedEvents: any[] = [];
+             router.events.forEach(e => recordedEvents.push(e));
+
+             router.resetConfig(
+                 [{path: 'team/:id', component: TeamCmp, canActivate: ['alwaysFalse']}]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+
+             expect(location.path()).toEqual('/');
+             expectEvents(recordedEvents, [
+               [NavigationStart, '/team/22'],
+               [RoutesRecognized, '/team/22'],
+               [GuardsCheckStart, '/team/22'],
+               [ChildActivationStart],
+               [ActivationStart],
+               [GuardsCheckEnd, '/team/22'],
+               [NavigationCancel, '/team/22'],
+             ]);
+             expect((recordedEvents[5] as GuardsCheckEnd).shouldActivate).toBe(false);
+           })));
+      });
+
+      describe(
+          'should not activate a route when CanActivate returns false (componentless route)',
+          () => {
+            beforeEach(() => {
+              TestBed.configureTestingModule(
+                  {providers: [{provide: 'alwaysFalse', useValue: (a: any, b: any) => false}]});
+            });
+
+            it('works',
+               fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+                 const fixture = createRoot(router, RootCmp);
+
+                 router.resetConfig([{
+                   path: 'parent',
+                   canActivate: ['alwaysFalse'],
+                   children: [{path: 'team/:id', component: TeamCmp}]
+                 }]);
+
+                 router.navigateByUrl('parent/team/22');
+                 advance(fixture);
+
+                 expect(location.path()).toEqual('/');
+               })));
+          });
+
+      describe('should activate a route when CanActivate returns true', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule({
+            providers: [{
+              provide: 'alwaysTrue',
+              useValue: (a: ActivatedRouteSnapshot, s: RouterStateSnapshot) => true
+            }]
+          });
+        });
+
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig(
+                 [{path: 'team/:id', component: TeamCmp, canActivate: ['alwaysTrue']}]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+
+             expect(location.path()).toEqual('/team/22');
+           })));
+      });
+
+      describe('should work when given a class', () => {
+        class AlwaysTrue implements CanActivate {
+          canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+            return true;
+          }
+        }
+
+        beforeEach(() => { TestBed.configureTestingModule({providers: [AlwaysTrue]}); });
+
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig(
+                 [{path: 'team/:id', component: TeamCmp, canActivate: [AlwaysTrue]}]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+
+             expect(location.path()).toEqual('/team/22');
+           })));
+      });
+
+      describe('should work when returns an observable', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule({
+            providers: [{
+              provide: 'CanActivate',
+              useValue: (a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
+                return Observable.create((observer: any) => { observer.next(false); });
+              }
+            }]
+          });
+        });
+
+
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig(
+                 [{path: 'team/:id', component: TeamCmp, canActivate: ['CanActivate']}]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+             expect(location.path()).toEqual('/');
+           })));
+      });
+
+      describe('should work when returns a promise', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule({
+            providers: [{
+              provide: 'CanActivate',
+              useValue: (a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
+                if (a.params['id'] === '22') {
+                  return Promise.resolve(true);
+                } else {
+                  return Promise.resolve(false);
+                }
+              }
+            }]
+          });
+        });
+
+
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig(
+                 [{path: 'team/:id', component: TeamCmp, canActivate: ['CanActivate']}]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/22');
+
+             router.navigateByUrl('/team/33');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/22');
+           })));
+      });
+
+      describe('should reset the location when cancleling a navigation', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule({
+            providers: [{
+              provide: 'alwaysFalse',
+              useValue: (a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => { return false; }
+            }]
+          });
+        });
+
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([
+               {path: 'one', component: SimpleCmp},
+               {path: 'two', component: SimpleCmp, canActivate: ['alwaysFalse']}
+             ]);
+
+             router.navigateByUrl('/one');
+             advance(fixture);
+             expect(location.path()).toEqual('/one');
+
+             location.go('/two');
+             advance(fixture);
+             expect(location.path()).toEqual('/one');
+
+           })));
+      });
+
+      describe('should redirect to / when guard returns false', () => {
+        beforeEach(() => TestBed.configureTestingModule({
+          providers: [{
+            provide: 'returnFalseAndNavigate',
+            useFactory: (router: Router) => () => {
+              router.navigate(['/']);
+              return false;
+            },
+            deps: [Router]
+          }]
+        }));
+
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             router.resetConfig([
+               {
+                 path: '',
+                 component: SimpleCmp,
+               },
+               {path: 'one', component: RouteCmp, canActivate: ['returnFalseAndNavigate']}
+             ]);
+
+             const fixture = TestBed.createComponent(RootCmp);
+             router.navigateByUrl('/one');
+             advance(fixture);
+             expect(location.path()).toEqual('/');
+             expect(fixture.nativeElement).toHaveText('simple');
+           })));
+      });
+
+      describe('runGuardsAndResolvers', () => {
+        let guardRunCount = 0;
+        let resolverRunCount = 0;
+
+        beforeEach(() => {
+          guardRunCount = 0;
+          resolverRunCount = 0;
+          TestBed.configureTestingModule({
+            providers: [
+              {
+                provide: 'guard',
+                useValue: () => {
+                  guardRunCount++;
+                  return true;
+                }
+              },
+              {provide: 'resolver', useValue: () => resolverRunCount++}
+            ]
+          });
+        });
+
+        function configureRouter(router: Router, runGuardsAndResolvers: RunGuardsAndResolvers):
+            ComponentFixture<RootCmpWithTwoOutlets> {
+          const fixture = createRoot(router, RootCmpWithTwoOutlets);
+
+          router.resetConfig([
+            {
+              path: 'a',
+              runGuardsAndResolvers,
+              component: RouteCmp,
+              canActivate: ['guard'],
+              resolve: {data: 'resolver'}
+            },
+            {path: 'b', component: SimpleCmp, outlet: 'right'}
+          ]);
+
+          router.navigateByUrl('/a');
+          advance(fixture);
+          return fixture;
+        }
+
+        it('should rerun guards and resolvers when params change',
+           fakeAsync(inject([Router], (router: Router) => {
+             const fixture = configureRouter(router, 'paramsChange');
+
+             const cmp: RouteCmp = fixture.debugElement.children[1].componentInstance;
+             const recordedData: any[] = [];
+             cmp.route.data.subscribe((data: any) => recordedData.push(data));
+
+             expect(guardRunCount).toEqual(1);
+             expect(recordedData).toEqual([{data: 0}]);
+
+             router.navigateByUrl('/a;p=1');
+             advance(fixture);
+             expect(guardRunCount).toEqual(2);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}]);
+
+             router.navigateByUrl('/a;p=2');
+             advance(fixture);
+             expect(guardRunCount).toEqual(3);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}]);
+
+             router.navigateByUrl('/a;p=2?q=1');
+             advance(fixture);
+             expect(guardRunCount).toEqual(3);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}]);
+           })));
+
+        it('should rerun guards and resolvers when query params change',
+           fakeAsync(inject([Router], (router: Router) => {
+             const fixture = configureRouter(router, 'paramsOrQueryParamsChange');
+
+             const cmp: RouteCmp = fixture.debugElement.children[1].componentInstance;
+             const recordedData: any[] = [];
+             cmp.route.data.subscribe((data: any) => recordedData.push(data));
+
+             expect(guardRunCount).toEqual(1);
+             expect(recordedData).toEqual([{data: 0}]);
+
+             router.navigateByUrl('/a;p=1');
+             advance(fixture);
+             expect(guardRunCount).toEqual(2);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}]);
+
+             router.navigateByUrl('/a;p=2');
+             advance(fixture);
+             expect(guardRunCount).toEqual(3);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}]);
+
+             router.navigateByUrl('/a;p=2?q=1');
+             advance(fixture);
+             expect(guardRunCount).toEqual(4);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}, {data: 3}]);
+
+             router.navigateByUrl('/a;p=2(right:b)?q=1');
+             advance(fixture);
+             expect(guardRunCount).toEqual(4);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}, {data: 3}]);
+           })));
+
+        it('should always rerun guards and resolvers',
+           fakeAsync(inject([Router], (router: Router) => {
+             const fixture = configureRouter(router, 'always');
+
+             const cmp: RouteCmp = fixture.debugElement.children[1].componentInstance;
+             const recordedData: any[] = [];
+             cmp.route.data.subscribe((data: any) => recordedData.push(data));
+
+             expect(guardRunCount).toEqual(1);
+             expect(recordedData).toEqual([{data: 0}]);
+
+             router.navigateByUrl('/a;p=1');
+             advance(fixture);
+             expect(guardRunCount).toEqual(2);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}]);
+
+             router.navigateByUrl('/a;p=2');
+             advance(fixture);
+             expect(guardRunCount).toEqual(3);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}]);
+
+             router.navigateByUrl('/a;p=2?q=1');
+             advance(fixture);
+             expect(guardRunCount).toEqual(4);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}, {data: 3}]);
+
+             router.navigateByUrl('/a;p=2(right:b)?q=1');
+             advance(fixture);
+             expect(guardRunCount).toEqual(5);
+             expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}, {data: 3}, {data: 4}]);
+           })));
+      });
+
+      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<boolean>(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', () => {
+      let log: any;
+
+      beforeEach(() => {
+        log = [];
+
+        TestBed.configureTestingModule({
+          providers: [
+            {
+              provide: 'CanDeactivateParent',
+              useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
+                return a.params['id'] === '22';
+              }
+            },
+            {
+              provide: 'CanDeactivateTeam',
+              useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
+                return c.route.snapshot.params['id'] === '22';
+              }
+            },
+            {
+              provide: 'CanDeactivateUser',
+              useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
+                return a.params['name'] === 'victor';
+              }
+            },
+            {
+              provide: 'RecordingDeactivate',
+              useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
+                log.push({path: a.routeConfig !.path, component: c});
+                return true;
+              }
+            },
+            {
+              provide: 'alwaysFalse',
+              useValue:
+                  (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => { return false; }
+            },
+            {
+              provide: 'alwaysFalseAndLogging',
+              useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
+                log.push('called');
+                return false;
+              }
+            },
+            {
+              provide: 'alwaysFalseWithDelayAndLogging',
+              useValue: () => {
+                log.push('called');
+                let resolve: (result: boolean) => void;
+                const promise = new Promise(res => resolve = res);
+                setTimeout(() => resolve(false), 0);
+                return promise;
+              }
+            },
+            {
+              provide: 'canActivate_alwaysTrueAndLogging',
+              useValue: () => {
+                log.push('canActivate called');
+                return true;
+              }
+            },
+          ]
+        });
+      });
+
+      describe('should not deactivate a route when CanDeactivate returns false', () => {
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig(
+                 [{path: 'team/:id', component: TeamCmp, canDeactivate: ['CanDeactivateTeam']}]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/22');
+
+             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 = false;
+             router.navigateByUrl('/team/44') !.then(res => canceledStatus = res);
+             advance(fixture);
+             expect(location.path()).toEqual('/team/33');
+             expect(canceledStatus).toEqual(false);
+           })));
+
+        it('works with componentless routes',
+           fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([
+               {
+                 path: 'grandparent',
+                 canDeactivate: ['RecordingDeactivate'],
+                 children: [{
+                   path: 'parent',
+                   canDeactivate: ['RecordingDeactivate'],
+                   children: [{
+                     path: 'child',
+                     canDeactivate: ['RecordingDeactivate'],
+                     children: [{
+                       path: 'simple',
+                       component: SimpleCmp,
+                       canDeactivate: ['RecordingDeactivate']
+                     }]
+                   }]
+                 }]
+               },
+               {path: 'simple', component: SimpleCmp}
+             ]);
+
+             router.navigateByUrl('/grandparent/parent/child/simple');
+             advance(fixture);
+             expect(location.path()).toEqual('/grandparent/parent/child/simple');
+
+             router.navigateByUrl('/simple');
+             advance(fixture);
+
+             const child = fixture.debugElement.children[1].componentInstance;
+
+             expect(log.map((a: any) => a.path)).toEqual([
+               'simple', 'child', 'parent', 'grandparent'
+             ]);
+             expect(log.map((a: any) => a.component)).toEqual([child, null, null, null]);
+           })));
+
+        it('works with aux routes',
+           fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{
+               path: 'two-outlets',
+               component: TwoOutletsCmp,
+               children: [
+                 {path: 'a', component: BlankCmp}, {
+                   path: 'b',
+                   canDeactivate: ['RecordingDeactivate'],
+                   component: SimpleCmp,
+                   outlet: 'aux'
+                 }
+               ]
+             }]);
+
+             router.navigateByUrl('/two-outlets/(a//aux:b)');
+             advance(fixture);
+             expect(location.path()).toEqual('/two-outlets/(a//aux:b)');
+
+             router.navigate(['two-outlets', {outlets: {aux: null}}]);
+             advance(fixture);
+
+             expect(log.map((a: any) => a.path)).toEqual(['b']);
+             expect(location.path()).toEqual('/two-outlets/(a)');
+           })));
+
+        it('works with a nested route',
+           fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{
+               path: 'team/:id',
+               component: TeamCmp,
+               children: [
+                 {path: '', pathMatch: 'full', component: SimpleCmp},
+                 {path: 'user/:name', component: UserCmp, canDeactivate: ['CanDeactivateUser']}
+               ]
+             }]);
+
+             router.navigateByUrl('/team/22/user/victor');
+             advance(fixture);
+
+             // this works because we can deactivate victor
+             router.navigateByUrl('/team/33');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/33');
+
+             router.navigateByUrl('/team/33/user/fedor');
+             advance(fixture);
+
+             // this doesn't work cause we cannot deactivate fedor
+             router.navigateByUrl('/team/44');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/33/user/fedor');
+           })));
+      });
+
+      it('should not create a route state if navigation is canceled',
+         fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+           const fixture = createRoot(router, RootCmp);
+
+           router.resetConfig([{
+             path: 'main',
+             component: TeamCmp,
+             children: [
+               {path: 'component1', component: SimpleCmp, canDeactivate: ['alwaysFalse']},
+               {path: 'component2', component: SimpleCmp}
+             ]
+           }]);
+
+           router.navigateByUrl('/main/component1');
+           advance(fixture);
+
+           router.navigateByUrl('/main/component2');
+           advance(fixture);
+
+           const teamCmp = fixture.debugElement.children[1].componentInstance;
+           expect(teamCmp.route.firstChild.url.value[0].path).toEqual('component1');
+           expect(location.path()).toEqual('/main/component1');
+         })));
+
+      it('should not run CanActivate when CanDeactivate returns false',
+         fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+           const fixture = createRoot(router, RootCmp);
+
+           router.resetConfig([{
+             path: 'main',
+             component: TeamCmp,
+             children: [
+               {
+                 path: 'component1',
+                 component: SimpleCmp,
+                 canDeactivate: ['alwaysFalseWithDelayAndLogging']
+               },
+               {
+                 path: 'component2',
+                 component: SimpleCmp,
+                 canActivate: ['canActivate_alwaysTrueAndLogging']
+               },
+             ]
+           }]);
+
+           router.navigateByUrl('/main/component1');
+           advance(fixture);
+           expect(location.path()).toEqual('/main/component1');
+
+           router.navigateByUrl('/main/component2');
+           advance(fixture);
+           expect(location.path()).toEqual('/main/component1');
+           expect(log).toEqual(['called']);
+         })));
+
+      it('should call guards every time when navigating to the same url over and over again',
+         fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+           const fixture = createRoot(router, RootCmp);
+
+           router.resetConfig([
+             {path: 'simple', component: SimpleCmp, canDeactivate: ['alwaysFalseAndLogging']},
+             {path: 'blank', component: BlankCmp}
+
+           ]);
+
+           router.navigateByUrl('/simple');
+           advance(fixture);
+
+           router.navigateByUrl('/blank');
+           advance(fixture);
+           expect(log).toEqual(['called']);
+           expect(location.path()).toEqual('/simple');
+
+           router.navigateByUrl('/blank');
+           advance(fixture);
+           expect(log).toEqual(['called', 'called']);
+           expect(location.path()).toEqual('/simple');
+         })));
+
+      describe('next state', () => {
+        let log: string[];
+
+        class ClassWithNextState implements CanDeactivate<TeamCmp> {
+          canDeactivate(
+              component: TeamCmp, currentRoute: ActivatedRouteSnapshot,
+              currentState: RouterStateSnapshot, nextState: RouterStateSnapshot): boolean {
+            log.push(currentState.url, nextState.url);
+            return true;
+          }
+        }
+
+        beforeEach(() => {
+          log = [];
+          TestBed.configureTestingModule({
+            providers: [
+              ClassWithNextState, {
+                provide: 'FunctionWithNextState',
+                useValue: (cmp: any, currentRoute: ActivatedRouteSnapshot,
+                           currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) => {
+                  log.push(currentState.url, nextState.url);
+                  return true;
+                }
+              }
+            ]
+          });
+        });
+
+        it('should pass next state as the 4 argument when guard is a class',
+           fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig(
+                 [{path: 'team/:id', component: TeamCmp, canDeactivate: [ClassWithNextState]}]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/22');
+
+             router.navigateByUrl('/team/33');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/33');
+             expect(log).toEqual(['/team/22', '/team/33']);
+           })));
+
+        it('should pass next state as the 4 argument when guard is a function',
+           fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([
+               {path: 'team/:id', component: TeamCmp, canDeactivate: ['FunctionWithNextState']}
+             ]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/22');
+
+             router.navigateByUrl('/team/33');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/33');
+             expect(log).toEqual(['/team/22', '/team/33']);
+           })));
+      });
+
+      describe('should work when given a class', () => {
+        class AlwaysTrue implements CanDeactivate<TeamCmp> {
+          canDeactivate(
+              component: TeamCmp, route: ActivatedRouteSnapshot,
+              state: RouterStateSnapshot): boolean {
+            return true;
+          }
+        }
+
+        beforeEach(() => { TestBed.configureTestingModule({providers: [AlwaysTrue]}); });
+
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig(
+                 [{path: 'team/:id', component: TeamCmp, canDeactivate: [AlwaysTrue]}]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/22');
+
+             router.navigateByUrl('/team/33');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/33');
+           })));
+      });
+
+
+      describe('should work when returns an observable', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule({
+            providers: [{
+              provide: 'CanDeactivate',
+              useValue: (c: TeamCmp, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
+                return Observable.create((observer: any) => { observer.next(false); });
+              }
+            }]
+          });
+        });
+
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig(
+                 [{path: 'team/:id', component: TeamCmp, canDeactivate: ['CanDeactivate']}]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/22');
+
+             router.navigateByUrl('/team/33');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/22');
+           })));
+      });
+    });
+
+    describe('CanActivateChild', () => {
+      describe('should be invoked when activating a child', () => {
+        beforeEach(() => {
+          TestBed.configureTestingModule({
+            providers: [{
+              provide: 'alwaysFalse',
+              useValue: (a: any, b: any) => a.paramMap.get('id') === '22',
+            }]
+          });
+        });
+
+        it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{
+               path: '',
+               canActivateChild: ['alwaysFalse'],
+               children: [{path: 'team/:id', component: TeamCmp}]
+             }]);
+
+             router.navigateByUrl('/team/22');
+             advance(fixture);
+
+             expect(location.path()).toEqual('/team/22');
+
+             router.navigateByUrl('/team/33') !.catch(() => {});
+             advance(fixture);
+
+             expect(location.path()).toEqual('/team/22');
+           })));
+      });
+
+      it('should find the guard provided in lazy loaded module',
+         fakeAsync(inject(
+             [Router, Location, NgModuleFactoryLoader],
+             (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+
+               @Component({selector: 'admin', template: '<router-outlet></router-outlet>'})
+               class AdminComponent {
+               }
+
+               @Component({selector: 'lazy', template: 'lazy-loaded'})
+               class LazyLoadedComponent {
+               }
+
+               @NgModule({
+                 declarations: [AdminComponent, LazyLoadedComponent],
+                 imports: [RouterModule.forChild([{
+                   path: '',
+                   component: AdminComponent,
+                   children: [{
+                     path: '',
+                     canActivateChild: ['alwaysTrue'],
+                     children: [{path: '', component: LazyLoadedComponent}]
+                   }]
+                 }])],
+                 providers: [{provide: 'alwaysTrue', useValue: () => true}],
+               })
+               class LazyLoadedModule {
+               }
+
+               loader.stubbedModules = {lazy: LazyLoadedModule};
+               const fixture = createRoot(router, RootCmp);
+
+               router.resetConfig([{path: 'admin', loadChildren: 'lazy'}]);
+
+               router.navigateByUrl('/admin');
+               advance(fixture);
+
+               expect(location.path()).toEqual('/admin');
+               expect(fixture.nativeElement).toHaveText('lazy-loaded');
+             })));
+    });
+
+    describe('CanLoad', () => {
+      let canLoadRunCount = 0;
+      beforeEach(() => {
+        canLoadRunCount = 0;
+        TestBed.configureTestingModule({
+          providers: [
+            {provide: 'alwaysFalse', useValue: (a: any) => false},
+            {
+              provide: 'returnFalseAndNavigate',
+              useFactory: (router: any) => (a: any) => {
+                router.navigate(['blank']);
+                return false;
+              },
+              deps: [Router],
+            },
+            {
+              provide: 'alwaysTrue',
+              useValue: () => {
+                canLoadRunCount++;
+                return true;
+              }
+            },
+          ]
+        });
+      });
+
+      it('should not load children when CanLoad returns false',
+         fakeAsync(inject(
+             [Router, Location, NgModuleFactoryLoader],
+             (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+
+               @Component({selector: 'lazy', template: 'lazy-loaded'})
+               class LazyLoadedComponent {
+               }
+
+               @NgModule({
+                 declarations: [LazyLoadedComponent],
+                 imports:
+                     [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])]
+               })
+               class LoadedModule {
+               }
+
+               loader.stubbedModules = {lazyFalse: LoadedModule, lazyTrue: LoadedModule};
+               const fixture = createRoot(router, RootCmp);
+
+               router.resetConfig([
+                 {path: 'lazyFalse', canLoad: ['alwaysFalse'], loadChildren: 'lazyFalse'},
+                 {path: 'lazyTrue', canLoad: ['alwaysTrue'], loadChildren: 'lazyTrue'}
+               ]);
+
+               const recordedEvents: any[] = [];
+               router.events.forEach(e => recordedEvents.push(e));
+
+
+               // failed navigation
+               router.navigateByUrl('/lazyFalse/loaded');
+               advance(fixture);
+
+               expect(location.path()).toEqual('/');
+
+               expectEvents(recordedEvents, [
+                 [NavigationStart, '/lazyFalse/loaded'],
+                 //  [GuardsCheckStart, '/lazyFalse/loaded'],
+                 [NavigationCancel, '/lazyFalse/loaded'],
+               ]);
+
+               recordedEvents.splice(0);
+
+               // successful navigation
+               router.navigateByUrl('/lazyTrue/loaded');
+               advance(fixture);
+
+               expect(location.path()).toEqual('/lazyTrue/loaded');
+
+               expectEvents(recordedEvents, [
+                 [NavigationStart, '/lazyTrue/loaded'],
+                 [RouteConfigLoadStart],
+                 [RouteConfigLoadEnd],
+                 [RoutesRecognized, '/lazyTrue/loaded'],
+                 [GuardsCheckStart, '/lazyTrue/loaded'],
+                 [ChildActivationStart],
+                 [ActivationStart],
+                 [ChildActivationStart],
+                 [ActivationStart],
+                 [GuardsCheckEnd, '/lazyTrue/loaded'],
+                 [ResolveStart, '/lazyTrue/loaded'],
+                 [ResolveEnd, '/lazyTrue/loaded'],
+                 [ActivationEnd],
+                 [ChildActivationEnd],
+                 [ActivationEnd],
+                 [ChildActivationEnd],
+                 [NavigationEnd, '/lazyTrue/loaded'],
+               ]);
+             })));
+
+      it('should support navigating from within the guard',
+         fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+
+           const fixture = createRoot(router, RootCmp);
+
+           router.resetConfig([
+             {path: 'lazyFalse', canLoad: ['returnFalseAndNavigate'], loadChildren: 'lazyFalse'},
+             {path: 'blank', component: BlankCmp}
+           ]);
+
+           const recordedEvents: any[] = [];
+           router.events.forEach(e => recordedEvents.push(e));
+
+
+           router.navigateByUrl('/lazyFalse/loaded');
+           advance(fixture);
+
+           expect(location.path()).toEqual('/blank');
+
+           expectEvents(recordedEvents, [
+             [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'], [ChildActivationStart], [ActivationStart],
+             [GuardsCheckEnd, '/blank'], [ResolveStart, '/blank'], [ResolveEnd, '/blank'],
+             [ActivationEnd], [ChildActivationEnd], [NavigationEnd, '/blank']
+           ]);
+         })));
+
+      it('should execute CanLoad only once',
+         fakeAsync(inject(
+             [Router, Location, NgModuleFactoryLoader],
+             (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+
+               @Component({selector: 'lazy', template: 'lazy-loaded'})
+               class LazyLoadedComponent {
+               }
+
+               @NgModule({
+                 declarations: [LazyLoadedComponent],
+                 imports:
+                     [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])]
+               })
+               class LazyLoadedModule {
+               }
+
+               loader.stubbedModules = {lazy: LazyLoadedModule};
+               const fixture = createRoot(router, RootCmp);
+
+               router.resetConfig([{path: 'lazy', canLoad: ['alwaysTrue'], loadChildren: 'lazy'}]);
+
+               router.navigateByUrl('/lazy/loaded');
+               advance(fixture);
+               expect(location.path()).toEqual('/lazy/loaded');
+               expect(canLoadRunCount).toEqual(1);
+
+               router.navigateByUrl('/');
+               advance(fixture);
+               expect(location.path()).toEqual('/');
+
+               router.navigateByUrl('/lazy/loaded');
+               advance(fixture);
+               expect(location.path()).toEqual('/lazy/loaded');
+               expect(canLoadRunCount).toEqual(1);
+             })));
+    });
+
+    describe('order', () => {
+
+      class Logger {
+        logs: string[] = [];
+        add(thing: string) { this.logs.push(thing); }
+      }
+
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          providers: [
+            Logger, {
+              provide: 'canActivateChild_parent',
+              useFactory: (logger: Logger) => () => (logger.add('canActivateChild_parent'), true),
+              deps: [Logger]
+            },
+            {
+              provide: 'canActivate_team',
+              useFactory: (logger: Logger) => () => (logger.add('canActivate_team'), true),
+              deps: [Logger]
+            },
+            {
+              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]
+            }
+          ]
+        });
+      });
+
+      it('should call guards in the right order',
+         fakeAsync(inject(
+             [Router, Location, Logger], (router: Router, location: Location, logger: Logger) => {
+               const fixture = createRoot(router, RootCmp);
+
+               router.resetConfig([{
+                 path: '',
+                 canActivateChild: ['canActivateChild_parent'],
+                 children: [{
+                   path: 'team/:id',
+                   canActivate: ['canActivate_team'],
+                   canDeactivate: ['canDeactivate_team'],
+                   component: TeamCmp
+                 }]
+               }]);
+
+               router.navigateByUrl('/team/22');
+               advance(fixture);
+
+               router.navigateByUrl('/team/33');
+               advance(fixture);
+
+               expect(logger.logs).toEqual([
+                 'canActivateChild_parent', 'canActivate_team',
+
+                 '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']);
+             })));
+    });
+  });
+
+  describe('route events', () => {
+    it('should fire matching (Child)ActivationStart/End events',
+       fakeAsync(inject([Router], (router: Router) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{path: 'user/:name', component: UserCmp}]);
+
+         const recordedEvents: any[] = [];
+         router.events.forEach(e => recordedEvents.push(e));
+
+         router.navigateByUrl('/user/fedor');
+         advance(fixture);
+
+         expect(fixture.nativeElement).toHaveText('user fedor');
+         expect(recordedEvents[3] instanceof ChildActivationStart).toBe(true);
+         expect(recordedEvents[3].snapshot).toBe(recordedEvents[9].snapshot.root);
+         expect(recordedEvents[9] instanceof ChildActivationEnd).toBe(true);
+         expect(recordedEvents[9].snapshot).toBe(recordedEvents[9].snapshot.root);
+
+         expect(recordedEvents[4] instanceof ActivationStart).toBe(true);
+         expect(recordedEvents[4].snapshot.routeConfig.path).toBe('user/:name');
+         expect(recordedEvents[8] instanceof ActivationEnd).toBe(true);
+         expect(recordedEvents[8].snapshot.routeConfig.path).toBe('user/:name');
+
+         expectEvents(recordedEvents, [
+           [NavigationStart, '/user/fedor'], [RoutesRecognized, '/user/fedor'],
+           [GuardsCheckStart, '/user/fedor'], [ChildActivationStart], [ActivationStart],
+           [GuardsCheckEnd, '/user/fedor'], [ResolveStart, '/user/fedor'],
+           [ResolveEnd, '/user/fedor'], [ActivationEnd], [ChildActivationEnd],
+           [NavigationEnd, '/user/fedor']
+         ]);
+       })));
+  });
+
+  describe('routerActiveLink', () => {
+    it('should set the class when the link is active (a tag)',
+       fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{
+           path: 'team/:id',
+           component: TeamCmp,
+           children: [{
+             path: 'link',
+             component: DummyLinkCmp,
+             children:
+                 [{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]
+           }]
+         }]);
+
+         router.navigateByUrl('/team/22/link;exact=true');
+         advance(fixture);
+         advance(fixture);
+         expect(location.path()).toEqual('/team/22/link;exact=true');
+
+         const nativeLink = fixture.nativeElement.querySelector('a');
+         const nativeButton = fixture.nativeElement.querySelector('button');
+         expect(nativeLink.className).toEqual('active');
+         expect(nativeButton.className).toEqual('active');
+
+         router.navigateByUrl('/team/22/link/simple');
+         advance(fixture);
+         expect(location.path()).toEqual('/team/22/link/simple');
+         expect(nativeLink.className).toEqual('');
+         expect(nativeButton.className).toEqual('');
+       })));
+
+    it('should not set the class until the first navigation succeeds', fakeAsync(() => {
+         @Component({
+           template:
+               '<router-outlet></router-outlet><a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" ></a>'
+         })
+         class RootCmpWithLink {
+         }
+
+         TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
+         const router: Router = TestBed.get(Router);
+         const loc: any = TestBed.get(Location);
+
+         const f = TestBed.createComponent(RootCmpWithLink);
+         advance(f);
+
+         const link = f.nativeElement.querySelector('a');
+         expect(link.className).toEqual('');
+
+         router.initialNavigation();
+         advance(f);
+
+         expect(link.className).toEqual('active');
+       }));
+
+
+    it('should set the class on a parent element when the link is active',
+       fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{
+           path: 'team/:id',
+           component: TeamCmp,
+           children: [{
+             path: 'link',
+             component: DummyLinkWithParentCmp,
+             children:
+                 [{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]
+           }]
+         }]);
+
+         router.navigateByUrl('/team/22/link;exact=true');
+         advance(fixture);
+         advance(fixture);
+         expect(location.path()).toEqual('/team/22/link;exact=true');
+
+         const native = fixture.nativeElement.querySelector('#link-parent');
+         expect(native.className).toEqual('active');
+
+         router.navigateByUrl('/team/22/link/simple');
+         advance(fixture);
+         expect(location.path()).toEqual('/team/22/link/simple');
+         expect(native.className).toEqual('');
+       })));
+
+    it('should set the class when the link is active',
+       fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.resetConfig([{
+           path: 'team/:id',
+           component: TeamCmp,
+           children: [{
+             path: 'link',
+             component: DummyLinkCmp,
+             children:
+                 [{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]
+           }]
+         }]);
+
+         router.navigateByUrl('/team/22/link');
+         advance(fixture);
+         advance(fixture);
+         expect(location.path()).toEqual('/team/22/link');
+
+         const native = fixture.nativeElement.querySelector('a');
+         expect(native.className).toEqual('active');
+
+         router.navigateByUrl('/team/22/link/simple');
+         advance(fixture);
+         expect(location.path()).toEqual('/team/22/link/simple');
+         expect(native.className).toEqual('active');
+       })));
+
+
+    it('should expose an isActive property', fakeAsync(() => {
+         @Component({
+           template: `<a routerLink="/team" routerLinkActive #rla="routerLinkActive"></a>
+              <p>{{rla.isActive}}</p>
+              <span *ngIf="rla.isActive"></span>
+              <span [ngClass]="{'highlight': rla.isActive}"></span>
+              <router-outlet></router-outlet>`
+         })
+         class ComponentWithRouterLink {
+         }
+
+         TestBed.configureTestingModule({declarations: [ComponentWithRouterLink]});
+         const router: Router = TestBed.get(Router);
+
+         router.resetConfig([
+           {
+             path: 'team',
+             component: TeamCmp,
+           },
+           {
+             path: 'otherteam',
+             component: TeamCmp,
+           }
+         ]);
+
+         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');
+       }));
+
+  });
+
+  describe('lazy loading', () => {
+    it('works',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader],
+           (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+             @Component({
+               selector: 'lazy',
+               template: 'lazy-loaded-parent [<router-outlet></router-outlet>]'
+             })
+             class ParentLazyLoadedComponent {
+             }
+
+             @Component({selector: 'lazy', template: 'lazy-loaded-child'})
+             class ChildLazyLoadedComponent {
+             }
+
+             @NgModule({
+               declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent],
+               imports: [RouterModule.forChild([{
+                 path: 'loaded',
+                 component: ParentLazyLoadedComponent,
+                 children: [{path: 'child', component: ChildLazyLoadedComponent}]
+               }])]
+             })
+             class LoadedModule {
+             }
+
+
+             loader.stubbedModules = {expected: LoadedModule};
+
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{path: 'lazy', loadChildren: 'expected'}]);
+
+             router.navigateByUrl('/lazy/loaded/child');
+             advance(fixture);
+
+             expect(location.path()).toEqual('/lazy/loaded/child');
+             expect(fixture.nativeElement).toHaveText('lazy-loaded-parent [lazy-loaded-child]');
+           })));
+
+    it('should have 2 injector trees: module and element',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader],
+           (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+             @Component({
+               selector: 'lazy',
+               template: 'parent[<router-outlet></router-outlet>]',
+               viewProviders: [
+                 {provide: 'shadow', useValue: 'from parent component'},
+               ],
+             })
+             class Parent {
+             }
+
+             @Component({selector: 'lazy', template: 'child'})
+             class Child {
+             }
+
+             @NgModule({
+               declarations: [Parent],
+               imports: [RouterModule.forChild([{
+                 path: 'parent',
+                 component: Parent,
+                 children: [
+                   {path: 'child', loadChildren: 'child'},
+                 ]
+               }])],
+               providers: [
+                 {provide: 'moduleName', useValue: 'parent'},
+                 {provide: 'fromParent', useValue: 'from parent'},
+               ],
+             })
+             class ParentModule {
+             }
+
+             @NgModule({
+               declarations: [Child],
+               imports: [RouterModule.forChild([{path: '', component: Child}])],
+               providers: [
+                 {provide: 'moduleName', useValue: 'child'},
+                 {provide: 'fromChild', useValue: 'from child'},
+                 {provide: 'shadow', useValue: 'from child module'},
+               ],
+             })
+             class ChildModule {
+             }
+
+             loader.stubbedModules = {
+               parent: ParentModule,
+               child: ChildModule,
+             };
+
+             const fixture = createRoot(router, RootCmp);
+             router.resetConfig([{path: 'lazy', loadChildren: 'parent'}]);
+             router.navigateByUrl('/lazy/parent/child');
+             advance(fixture);
+             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 !;
+
+             expect(pInj.get('moduleName')).toEqual('parent');
+             expect(pInj.get('fromParent')).toEqual('from parent');
+             expect(pInj.get(Parent)).toBeAnInstanceOf(Parent);
+             expect(pInj.get('fromChild', null)).toEqual(null);
+             expect(pInj.get(Child, null)).toEqual(null);
+
+             expect(cInj.get('moduleName')).toEqual('child');
+             expect(cInj.get('fromParent')).toEqual('from parent');
+             expect(cInj.get('fromChild')).toEqual('from child');
+             expect(cInj.get(Parent)).toBeAnInstanceOf(Parent);
+             expect(cInj.get(Child)).toBeAnInstanceOf(Child);
+             // The child module can not shadow the parent component
+             expect(cInj.get('shadow')).toEqual('from parent component');
+
+             const pmInj = pInj.get(NgModuleRef).injector;
+             const cmInj = cInj.get(NgModuleRef).injector;
+
+             expect(pmInj.get('moduleName')).toEqual('parent');
+             expect(cmInj.get('moduleName')).toEqual('child');
+
+             expect(pmInj.get(Parent, '-')).toEqual('-');
+             expect(cmInj.get(Parent, '-')).toEqual('-');
+             expect(pmInj.get(Child, '-')).toEqual('-');
+             expect(cmInj.get(Child, '-')).toEqual('-');
+           })));
+
+    // https://github.com/angular/angular/issues/12889
+    it('should create a single instance of lazy-loaded modules',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader],
+           (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+             @Component({
+               selector: 'lazy',
+               template: 'lazy-loaded-parent [<router-outlet></router-outlet>]'
+             })
+             class ParentLazyLoadedComponent {
+             }
+
+             @Component({selector: 'lazy', template: 'lazy-loaded-child'})
+             class ChildLazyLoadedComponent {
+             }
+
+             @NgModule({
+               declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent],
+               imports: [RouterModule.forChild([{
+                 path: 'loaded',
+                 component: ParentLazyLoadedComponent,
+                 children: [{path: 'child', component: ChildLazyLoadedComponent}]
+               }])]
+             })
+             class LoadedModule {
+               static instances = 0;
+               constructor() { LoadedModule.instances++; }
+             }
+
+             loader.stubbedModules = {expected: LoadedModule};
+             const fixture = createRoot(router, RootCmp);
+             router.resetConfig([{path: 'lazy', loadChildren: 'expected'}]);
+             router.navigateByUrl('/lazy/loaded/child');
+             advance(fixture);
+             expect(fixture.nativeElement).toHaveText('lazy-loaded-parent [lazy-loaded-child]');
+             expect(LoadedModule.instances).toEqual(1);
+           })));
+
+    // https://github.com/angular/angular/issues/13870
+    it('should create a single instance of guards for lazy-loaded modules',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader],
+           (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+             @Injectable()
+             class Service {
+             }
+
+             @Injectable()
+             class Resolver implements Resolve<Service> {
+               constructor(public service: Service) {}
+               resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+                 return this.service;
+               }
+             }
+
+             @Component({selector: 'lazy', template: 'lazy'})
+             class LazyLoadedComponent {
+               resolvedService: Service;
+               constructor(public injectedService: Service, route: ActivatedRoute) {
+                 this.resolvedService = route.snapshot.data['service'];
+               }
+             }
+
+             @NgModule({
+               declarations: [LazyLoadedComponent],
+               providers: [Service, Resolver],
+               imports: [
+                 RouterModule.forChild([{
+                   path: 'loaded',
+                   component: LazyLoadedComponent,
+                   resolve: {'service': Resolver},
+                 }]),
+               ]
+             })
+             class LoadedModule {
+             }
+
+             loader.stubbedModules = {expected: LoadedModule};
+             const fixture = createRoot(router, RootCmp);
+             router.resetConfig([{path: 'lazy', loadChildren: 'expected'}]);
+             router.navigateByUrl('/lazy/loaded');
+             advance(fixture);
+
+             expect(fixture.nativeElement).toHaveText('lazy');
+             const lzc =
+                 fixture.debugElement.query(By.directive(LazyLoadedComponent)).componentInstance;
+             expect(lzc.injectedService).toBe(lzc.resolvedService);
+           })));
+
+
+    it('should emit RouteConfigLoadStart and RouteConfigLoadEnd event when route is lazy loaded',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader],
+           (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+             @Component({
+               selector: 'lazy',
+               template: 'lazy-loaded-parent [<router-outlet></router-outlet>]',
+             })
+             class ParentLazyLoadedComponent {
+             }
+
+             @Component({selector: 'lazy', template: 'lazy-loaded-child'})
+             class ChildLazyLoadedComponent {
+             }
+
+             @NgModule({
+               declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent],
+               imports: [RouterModule.forChild([{
+                 path: 'loaded',
+                 component: ParentLazyLoadedComponent,
+                 children: [{path: 'child', component: ChildLazyLoadedComponent}],
+               }])]
+             })
+             class LoadedModule {
+             }
+
+             const events: Array<RouteConfigLoadStart|RouteConfigLoadEnd> = [];
+
+             router.events.subscribe(e => {
+               if (e instanceof RouteConfigLoadStart || e instanceof RouteConfigLoadEnd) {
+                 events.push(e);
+               }
+             });
+
+             loader.stubbedModules = {expected: LoadedModule};
+             const fixture = createRoot(router, RootCmp);
+             router.resetConfig([{path: 'lazy', loadChildren: 'expected'}]);
+
+             router.navigateByUrl('/lazy/loaded/child');
+             advance(fixture);
+
+             expect(events.length).toEqual(2);
+             expect(events[0].toString()).toEqual('RouteConfigLoadStart(path: lazy)');
+             expect(events[1].toString()).toEqual('RouteConfigLoadEnd(path: lazy)');
+           })));
+
+    it('throws an error when forRoot() is used in a lazy context',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader],
+           (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+             @Component({selector: 'lazy', template: 'should not show'})
+             class LazyLoadedComponent {
+             }
+
+             @NgModule({
+               declarations: [LazyLoadedComponent],
+               imports: [RouterModule.forRoot([{path: 'loaded', component: LazyLoadedComponent}])]
+             })
+             class LoadedModule {
+             }
+
+             loader.stubbedModules = {expected: LoadedModule};
+
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{path: 'lazy', loadChildren: 'expected'}]);
+
+             let recordedError: any = null;
+             router.navigateByUrl('/lazy/loaded') !.catch(err => recordedError = err);
+             advance(fixture);
+             expect(recordedError.message)
+                 .toEqual(
+                     `RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.`);
+           })));
+
+    it('should combine routes from multiple modules into a single configuration',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader],
+           (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+             @Component({selector: 'lazy', template: 'lazy-loaded-2'})
+             class LazyComponent2 {
+             }
+
+             @NgModule({
+               declarations: [LazyComponent2],
+               imports: [RouterModule.forChild([{path: 'loaded', component: LazyComponent2}])]
+             })
+             class SiblingOfLoadedModule {
+             }
+
+             @Component({selector: 'lazy', template: 'lazy-loaded-1'})
+             class LazyComponent1 {
+             }
+
+             @NgModule({
+               declarations: [LazyComponent1],
+               imports: [
+                 RouterModule.forChild([{path: 'loaded', component: LazyComponent1}]),
+                 SiblingOfLoadedModule
+               ]
+             })
+             class LoadedModule {
+             }
+
+             loader.stubbedModules = {expected1: LoadedModule, expected2: SiblingOfLoadedModule};
+
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([
+               {path: 'lazy1', loadChildren: 'expected1'},
+               {path: 'lazy2', loadChildren: 'expected2'}
+             ]);
+
+             router.navigateByUrl('/lazy1/loaded');
+             advance(fixture);
+             expect(location.path()).toEqual('/lazy1/loaded');
+
+             router.navigateByUrl('/lazy2/loaded');
+             advance(fixture);
+             expect(location.path()).toEqual('/lazy2/loaded');
+           })));
+
+    it('should allow lazy loaded module in named outlet',
+       fakeAsync(inject(
+           [Router, NgModuleFactoryLoader], (router: Router, loader: SpyNgModuleFactoryLoader) => {
+
+             @Component({selector: 'lazy', template: 'lazy-loaded'})
+             class LazyComponent {
+             }
+
+             @NgModule({
+               declarations: [LazyComponent],
+               imports: [RouterModule.forChild([{path: '', component: LazyComponent}])]
+             })
+             class LazyLoadedModule {
+             }
+
+             loader.stubbedModules = {lazyModule: LazyLoadedModule};
+
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{
+               path: 'team/:id',
+               component: TeamCmp,
+               children: [
+                 {path: 'user/:name', component: UserCmp},
+                 {path: 'lazy', loadChildren: 'lazyModule', outlet: 'right'},
+               ]
+             }]);
+
+
+             router.navigateByUrl('/team/22/user/john');
+             advance(fixture);
+
+             expect(fixture.nativeElement).toHaveText('team 22 [ user john, right:  ]');
+
+             router.navigateByUrl('/team/22/(user/john//right:lazy)');
+             advance(fixture);
+
+             expect(fixture.nativeElement).toHaveText('team 22 [ user john, right: lazy-loaded ]');
+           })));
+
+    it('should allow componentless named outlet to render children',
+       fakeAsync(inject(
+           [Router, NgModuleFactoryLoader], (router: Router, loader: SpyNgModuleFactoryLoader) => {
+
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{
+               path: 'team/:id',
+               component: TeamCmp,
+               children: [
+                 {path: 'user/:name', component: UserCmp},
+                 {path: 'simple', outlet: 'right', children: [{path: '', component: SimpleCmp}]},
+               ]
+             }]);
+
+
+             router.navigateByUrl('/team/22/user/john');
+             advance(fixture);
+
+             expect(fixture.nativeElement).toHaveText('team 22 [ user john, right:  ]');
+
+             router.navigateByUrl('/team/22/(user/john//right:simple)');
+             advance(fixture);
+
+             expect(fixture.nativeElement).toHaveText('team 22 [ user john, right: simple ]');
+           })));
+
+    describe('should use the injector of the lazily-loaded configuration', () => {
+      class LazyLoadedServiceDefinedInModule {}
+
+      @Component({
+        selector: 'eager-parent',
+        template: 'eager-parent <router-outlet></router-outlet>',
+      })
+      class EagerParentComponent {
+      }
+
+      @Component({
+        selector: 'lazy-parent',
+        template: 'lazy-parent <router-outlet></router-outlet>',
+      })
+      class LazyParentComponent {
+      }
+
+      @Component({
+        selector: 'lazy-child',
+        template: 'lazy-child',
+      })
+      class LazyChildComponent {
+        constructor(
+            lazy: LazyParentComponent,  // should be able to inject lazy/direct parent
+            lazyService: LazyLoadedServiceDefinedInModule,  // should be able to inject lazy service
+            eager:
+                EagerParentComponent  // should use the injector of the location to create a parent
+            ) {}
+      }
+
+      @NgModule({
+        declarations: [LazyParentComponent, LazyChildComponent],
+        imports: [RouterModule.forChild([{
+          path: '',
+          children: [{
+            path: 'lazy-parent',
+            component: LazyParentComponent,
+            children: [{path: 'lazy-child', component: LazyChildComponent}]
+          }]
+        }])],
+        providers: [LazyLoadedServiceDefinedInModule]
+      })
+      class LoadedModule {
+      }
+
+      @NgModule({
+        declarations: [EagerParentComponent],
+        entryComponents: [EagerParentComponent],
+        imports: [RouterModule]
+      })
+      class TestModule {
+      }
+
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          imports: [TestModule],
+        });
+      });
+
+      it('should use the injector of the lazily-loaded configuration',
+         fakeAsync(inject(
+             [Router, Location, NgModuleFactoryLoader],
+             (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+               loader.stubbedModules = {expected: LoadedModule};
+
+               const fixture = createRoot(router, RootCmp);
+
+               router.resetConfig([{
+                 path: 'eager-parent',
+                 component: EagerParentComponent,
+                 children: [{path: 'lazy', loadChildren: 'expected'}]
+               }]);
+
+               router.navigateByUrl('/eager-parent/lazy/lazy-parent/lazy-child');
+               advance(fixture);
+
+               expect(location.path()).toEqual('/eager-parent/lazy/lazy-parent/lazy-child');
+               expect(fixture.nativeElement).toHaveText('eager-parent lazy-parent lazy-child');
+             })));
+    });
+
+    it('works when given a callback',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader], (router: Router, location: Location) => {
+             @Component({selector: 'lazy', template: 'lazy-loaded'})
+             class LazyLoadedComponent {
+             }
+
+             @NgModule({
+               declarations: [LazyLoadedComponent],
+               imports: [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])],
+             })
+             class LoadedModule {
+             }
+
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
+
+             router.navigateByUrl('/lazy/loaded');
+             advance(fixture);
+
+             expect(location.path()).toEqual('/lazy/loaded');
+             expect(fixture.nativeElement).toHaveText('lazy-loaded');
+           })));
+
+    it('error emit an error when cannot load a config',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader],
+           (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+             loader.stubbedModules = {};
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{path: 'lazy', loadChildren: 'invalid'}]);
+
+             const recordedEvents: any[] = [];
+             router.events.forEach(e => recordedEvents.push(e));
+
+             router.navigateByUrl('/lazy/loaded') !.catch(s => {});
+             advance(fixture);
+
+             expect(location.path()).toEqual('/');
+
+             expectEvents(recordedEvents, [
+               [NavigationStart, '/lazy/loaded'],
+               [RouteConfigLoadStart],
+               [NavigationError, '/lazy/loaded'],
+             ]);
+           })));
+
+    it('should work with complex redirect rules',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader],
+           (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+             @Component({selector: 'lazy', template: 'lazy-loaded'})
+             class LazyLoadedComponent {
+             }
+
+             @NgModule({
+               declarations: [LazyLoadedComponent],
+               imports: [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])],
+             })
+             class LoadedModule {
+             }
+
+             loader.stubbedModules = {lazy: LoadedModule};
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig(
+                 [{path: 'lazy', loadChildren: 'lazy'}, {path: '**', redirectTo: 'lazy'}]);
+
+             router.navigateByUrl('/lazy/loaded');
+             advance(fixture);
+
+             expect(location.path()).toEqual('/lazy/loaded');
+           })));
+
+    it('should work with wildcard route',
+       fakeAsync(inject(
+           [Router, Location, NgModuleFactoryLoader],
+           (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+             @Component({selector: 'lazy', template: 'lazy-loaded'})
+             class LazyLoadedComponent {
+             }
+
+             @NgModule({
+               declarations: [LazyLoadedComponent],
+               imports: [RouterModule.forChild([{path: '', component: LazyLoadedComponent}])],
+             })
+             class LazyLoadedModule {
+             }
+
+             loader.stubbedModules = {lazy: LazyLoadedModule};
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{path: '**', loadChildren: 'lazy'}]);
+
+             router.navigateByUrl('/lazy');
+             advance(fixture);
+
+             expect(location.path()).toEqual('/lazy');
+             expect(fixture.nativeElement).toHaveText('lazy-loaded');
+           })));
+
+    describe('preloading', () => {
+      beforeEach(() => {
+        TestBed.configureTestingModule(
+            {providers: [{provide: PreloadingStrategy, useExisting: PreloadAllModules}]});
+        const preloader = TestBed.get(RouterPreloader);
+        preloader.setUpPreloading();
+      });
+
+      it('should work',
+         fakeAsync(inject(
+             [Router, Location, NgModuleFactoryLoader],
+             (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+               @Component({selector: 'lazy', template: 'should not show'})
+               class LazyLoadedComponent {
+               }
+
+               @NgModule({
+                 declarations: [LazyLoadedComponent],
+                 imports: [RouterModule.forChild(
+                     [{path: 'LoadedModule2', component: LazyLoadedComponent}])]
+               })
+               class LoadedModule2 {
+               }
+
+               @NgModule({
+                 imports:
+                     [RouterModule.forChild([{path: 'LoadedModule1', loadChildren: 'expected2'}])]
+               })
+               class LoadedModule1 {
+               }
+
+               loader.stubbedModules = {expected: LoadedModule1, expected2: LoadedModule2};
+
+               const fixture = createRoot(router, RootCmp);
+
+               router.resetConfig([
+                 {path: 'blank', component: BlankCmp}, {path: 'lazy', loadChildren: 'expected'}
+               ]);
+
+               router.navigateByUrl('/blank');
+               advance(fixture);
+
+               const config = router.config as any;
+               const firstConfig = config[1]._loadedConfig !;
+
+               expect(firstConfig).toBeDefined();
+               expect(firstConfig.routes[0].path).toEqual('LoadedModule1');
+
+               const secondConfig = firstConfig.routes[0]._loadedConfig !;
+               expect(secondConfig).toBeDefined();
+               expect(secondConfig.routes[0].path).toEqual('LoadedModule2');
+             })));
+
+    });
+
+    describe('custom url handling strategies', () => {
+      class CustomUrlHandlingStrategy implements UrlHandlingStrategy {
+        shouldProcessUrl(url: UrlTree): boolean {
+          return url.toString().startsWith('/include') || url.toString() === '/';
+        }
+
+        extract(url: UrlTree): UrlTree {
+          const oldRoot = url.root;
+          const children: any = {};
+          if (oldRoot.children[PRIMARY_OUTLET]) {
+            children[PRIMARY_OUTLET] = oldRoot.children[PRIMARY_OUTLET];
+          }
+          const root = new UrlSegmentGroup(oldRoot.segments, children);
+          return new (UrlTree as any)(root, url.queryParams, url.fragment);
+        }
+
+        merge(newUrlPart: UrlTree, wholeUrl: UrlTree): UrlTree {
+          const oldRoot = newUrlPart.root;
+
+          const children: any = {};
+          if (oldRoot.children[PRIMARY_OUTLET]) {
+            children[PRIMARY_OUTLET] = oldRoot.children[PRIMARY_OUTLET];
+          }
+
+          forEach(wholeUrl.root.children, (v: any, k: any) => {
+            if (k !== PRIMARY_OUTLET) {
+              children[k] = v;
+            }
+            v.parent = this;
+          });
+          const root = new UrlSegmentGroup(oldRoot.segments, children);
+          return new (UrlTree as any)(root, newUrlPart.queryParams, newUrlPart.fragment);
+        }
+      }
+
+      beforeEach(() => {
+        TestBed.configureTestingModule(
+            {providers: [{provide: UrlHandlingStrategy, useClass: CustomUrlHandlingStrategy}]});
+      });
+
+      it('should work',
+         fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+           const fixture = createRoot(router, RootCmp);
+
+           router.resetConfig([{
+             path: 'include',
+             component: TeamCmp,
+             children: [
+               {path: 'user/:name', component: UserCmp}, {path: 'simple', component: SimpleCmp}
+             ]
+           }]);
+
+           const events: any[] = [];
+           router.events.subscribe(e => e instanceof RouterEvent && events.push(e));
+
+           // supported URL
+           router.navigateByUrl('/include/user/kate');
+           advance(fixture);
+
+           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:  ]');
+           events.splice(0);
+
+           // unsupported URL
+           router.navigateByUrl('/exclude/one');
+           advance(fixture);
+
+           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'], [GuardsCheckStart, '/exclude/one'],
+             [GuardsCheckEnd, '/exclude/one'], [NavigationEnd, '/exclude/one']
+           ]);
+           events.splice(0);
+
+           // another unsupported URL
+           location.go('/exclude/two');
+           advance(fixture);
+
+           expect(location.path()).toEqual('/exclude/two');
+           expectEvents(events, []);
+
+           // back to a supported URL
+           location.go('/include/simple');
+           advance(fixture);
+
+           expect(location.path()).toEqual('/include/simple');
+           expect(fixture.nativeElement).toHaveText('team  [ simple, right:  ]');
+
+           expectEvents(events, [
+             [NavigationStart, '/include/simple'], [RoutesRecognized, '/include/simple'],
+             [GuardsCheckStart, '/include/simple'], [GuardsCheckEnd, '/include/simple'],
+             [ResolveStart, '/include/simple'], [ResolveEnd, '/include/simple'],
+             [NavigationEnd, '/include/simple']
+           ]);
+         })));
+
+      it('should handle the case when the router takes only the primary url',
+         fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+           const fixture = createRoot(router, RootCmp);
+
+           router.resetConfig([{
+             path: 'include',
+             component: TeamCmp,
+             children: [
+               {path: 'user/:name', component: UserCmp}, {path: 'simple', component: SimpleCmp}
+             ]
+           }]);
+
+           const events: any[] = [];
+           router.events.subscribe(e => e instanceof RouterEvent && events.push(e));
+
+           location.go('/include/user/kate(aux:excluded)');
+           advance(fixture);
+
+           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);
+
+           location.go('/include/user/kate(aux:excluded2)');
+           advance(fixture);
+           expectEvents(events, []);
+
+           router.navigateByUrl('/include/simple');
+           advance(fixture);
+
+           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']
+           ]);
+         })));
+    });
+  });
+
+  describe('Custom Route Reuse Strategy', () => {
+    class AttachDetachReuseStrategy implements RouteReuseStrategy {
+      stored: {[k: string]: DetachedRouteHandle} = {};
+
+      shouldDetach(route: ActivatedRouteSnapshot): boolean {
+        return route.routeConfig !.path === 'a';
+      }
+
+      store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {
+        this.stored[route.routeConfig !.path !] = detachedTree;
+      }
+
+      shouldAttach(route: ActivatedRouteSnapshot): boolean {
+        return !!this.stored[route.routeConfig !.path !];
+      }
+
+      retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+        return this.stored[route.routeConfig !.path !];
+      }
+
+      shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+        return future.routeConfig === curr.routeConfig;
+      }
+    }
+
+    class ShortLifecycle 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 {
+        if (future.routeConfig !== curr.routeConfig) {
+          return false;
+        }
+
+        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]);
+      }
+    }
+
+    it('should support attaching & detaching fragments',
+       fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+         const fixture = createRoot(router, RootCmp);
+
+         router.routeReuseStrategy = new AttachDetachReuseStrategy();
+
+         router.resetConfig([
+           {
+             path: 'a',
+             component: TeamCmp,
+             children: [{path: 'b', component: SimpleCmp}],
+           },
+           {path: 'c', component: UserCmp},
+         ]);
+
+         router.navigateByUrl('/a/b');
+         advance(fixture);
+         const teamCmp = fixture.debugElement.children[1].componentInstance;
+         const simpleCmp = fixture.debugElement.children[1].children[1].componentInstance;
+         expect(location.path()).toEqual('/a/b');
+         expect(teamCmp).toBeDefined();
+         expect(simpleCmp).toBeDefined();
+
+         router.navigateByUrl('/c');
+         advance(fixture);
+         expect(location.path()).toEqual('/c');
+         expect(fixture.debugElement.children[1].componentInstance).toBeAnInstanceOf(UserCmp);
+
+         router.navigateByUrl('/a;p=1/b;p=2');
+         advance(fixture);
+         const teamCmp2 = fixture.debugElement.children[1].componentInstance;
+         const simpleCmp2 = fixture.debugElement.children[1].children[1].componentInstance;
+         expect(location.path()).toEqual('/a;p=1/b;p=2');
+         expect(teamCmp2).toBe(teamCmp);
+         expect(simpleCmp2).toBe(simpleCmp);
+
+         expect(teamCmp.route).toBe(router.routerState.root.firstChild);
+         expect(teamCmp.route.snapshot).toBe(router.routerState.snapshot.root.firstChild);
+         expect(teamCmp.route.snapshot.params).toEqual({p: '1'});
+         expect(teamCmp.route.firstChild.snapshot.params).toEqual({p: '2'});
+       })));
+
+    it('should support shorter lifecycles',
+       fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+         const fixture = createRoot(router, RootCmp);
+         router.routeReuseStrategy = new ShortLifecycle();
+
+         router.resetConfig([{path: 'a', component: SimpleCmp}]);
+
+         router.navigateByUrl('/a');
+         advance(fixture);
+         const simpleCmp1 = fixture.debugElement.children[1].componentInstance;
+         expect(location.path()).toEqual('/a');
+
+         router.navigateByUrl('/a;p=1');
+         advance(fixture);
+         expect(location.path()).toEqual('/a;p=1');
+         const simpleCmp2 = fixture.debugElement.children[1].componentInstance;
+         expect(simpleCmp1).not.toBe(simpleCmp2);
+       })));
+  });
+});
+
+describe('Testing router options', () => {
+  describe('paramsInheritanceStrategy', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+          {imports: [RouterTestingModule.withRoutes([], {paramsInheritanceStrategy: 'always'})]});
+    });
+
+    it('should configure the router', fakeAsync(inject([Router], (router: Router) => {
+         expect(router.paramsInheritanceStrategy).toEqual('always');
+       })));
+  });
+
+  describe('malformedUriErrorHandler', () => {
+
+    function malformedUriErrorHandler(e: URIError, urlSerializer: UrlSerializer, url: string) {
+      return urlSerializer.parse('/error');
+    }
+
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+          {imports: [RouterTestingModule.withRoutes([], {malformedUriErrorHandler})]});
+    });
+
+    it('should configure the router', fakeAsync(inject([Router], (router: Router) => {
+         expect(router.malformedUriErrorHandler).toBe(malformedUriErrorHandler);
+       })));
+  });
+});
+
+function expectEvents(events: Event[], pairs: any[]) {
+  expect(events.length).toEqual(pairs.length);
+  for (let i = 0; i < events.length; ++i) {
+    expect((<any>events[i].constructor).name).toBe(pairs[i][0].name);
+    expect((<any>events[i]).url).toBe(pairs[i][1]);
+  }
+}
+
+function onlyNavigationStartAndEnd(e: Event): boolean {
+  return e instanceof NavigationStart || e instanceof NavigationEnd;
+}
+
+@Component(
+    {selector: 'link-cmp', template: `<a routerLink="/team/33/simple" [target]="'_self'">link</a>`})
+class StringLinkCmp {
+}
+
+@Component({selector: 'link-cmp', template: `<button routerLink="/team/33/simple">link</button>`})
+class StringLinkButtonCmp {
+}
+
+@Component({
+  selector: 'link-cmp',
+  template: `<router-outlet></router-outlet><a [routerLink]="['/team/33/simple']">link</a>`
+})
+class AbsoluteLinkCmp {
+}
+
+@Component({
+  selector: 'link-cmp',
+  template:
+      `<router-outlet></router-outlet><a routerLinkActive="active" [routerLinkActiveOptions]="{exact: exact}" [routerLink]="['./']">link</a>
+<button routerLinkActive="active" [routerLinkActiveOptions]="{exact: exact}" [routerLink]="['./']">button</button>
+`
+})
+class DummyLinkCmp {
+  private exact: boolean;
+  constructor(route: ActivatedRoute) {
+    this.exact = route.snapshot.paramMap.get('exact') === 'true';
+  }
+}
+
+@Component({selector: 'link-cmp', template: `<a [routerLink]="['../simple']">link</a>`})
+class RelativeLinkCmp {
+}
+
+@Component({
+  selector: 'link-cmp',
+  template: `<a [routerLink]="['../simple']" [queryParams]="{q: '1'}" fragment="f">link</a>`
+})
+class LinkWithQueryParamsAndFragment {
+}
+
+@Component({selector: 'simple-cmp', template: `simple`})
+class SimpleCmp {
+}
+
+@Component({selector: 'collect-params-cmp', template: `collect-params`})
+class CollectParamsCmp {
+  private params: any = [];
+  private urls: any = [];
+
+  constructor(private route: ActivatedRoute) {
+    route.params.forEach(p => this.params.push(p));
+    route.url.forEach(u => this.urls.push(u));
+  }
+
+  recordedUrls(): string[] {
+    return this.urls.map((a: any) => a.map((p: any) => p.path).join('/'));
+  }
+}
+
+@Component({selector: 'blank-cmp', template: ``})
+class BlankCmp {
+}
+
+@Component({
+  selector: 'team-cmp',
+  template: `team {{id | async}} ` +
+      `[ <router-outlet></router-outlet>, right: <router-outlet name="right"></router-outlet> ]` +
+      `<a [routerLink]="routerLink" skipLocationChange></a>` +
+      `<button [routerLink]="routerLink" skipLocationChange></button>`
+})
+class TeamCmp {
+  id: Observable<string>;
+  recordedParams: Params[] = [];
+  snapshotParams: Params[] = [];
+  routerLink = ['.'];
+
+  constructor(public route: ActivatedRoute) {
+    this.id = route.params.pipe(map((p: any) => p['id']));
+    route.params.forEach(p => {
+      this.recordedParams.push(p);
+      this.snapshotParams.push(route.snapshot.params);
+    });
+  }
+}
+
+@Component({
+  selector: 'two-outlets-cmp',
+  template: `[ <router-outlet></router-outlet>, aux: <router-outlet name="aux"></router-outlet> ]`
+})
+class TwoOutletsCmp {
+}
+
+
+@Component({selector: 'user-cmp', template: `user {{name | async}}`})
+class UserCmp {
+  name: Observable<string>;
+  recordedParams: Params[] = [];
+  snapshotParams: Params[] = [];
+
+  constructor(route: ActivatedRoute) {
+    this.name = route.params.pipe(map((p: any) => p['name']));
+    route.params.forEach(p => {
+      this.recordedParams.push(p);
+      this.snapshotParams.push(route.snapshot.params);
+    });
+  }
+}
+
+@Component({selector: 'wrapper', template: `<router-outlet></router-outlet>`})
+class WrapperCmp {
+}
+
+@Component(
+    {selector: 'query-cmp', template: `query: {{name | async}} fragment: {{fragment | async}}`})
+class QueryParamsAndFragmentCmp {
+  name: Observable<string|null>;
+  fragment: Observable<string>;
+
+  constructor(route: ActivatedRoute) {
+    this.name = route.queryParamMap.pipe(map((p: ParamMap) => p.get('name')));
+    this.fragment = route.fragment;
+  }
+}
+
+@Component({selector: 'empty-query-cmp', template: ``})
+class EmptyQueryParamsCmp {
+  recordedParams: Params[] = [];
+
+  constructor(route: ActivatedRoute) {
+    route.queryParams.forEach(_ => this.recordedParams.push(_));
+  }
+}
+
+@Component({selector: 'route-cmp', template: `route`})
+class RouteCmp {
+  constructor(public route: ActivatedRoute) {}
+}
+
+@Component({
+  selector: 'link-cmp',
+  template:
+      `<div *ngIf="show"><a [routerLink]="['./simple']">link</a></div> <router-outlet></router-outlet>`
+})
+class RelativeLinkInIfCmp {
+  show: boolean = false;
+}
+
+@Component(
+    {selector: 'child', template: '<div *ngIf="alwaysTrue"><router-outlet></router-outlet></div>'})
+class OutletInNgIf {
+  alwaysTrue = true;
+}
+
+@Component({
+  selector: 'link-cmp',
+  template: `<router-outlet></router-outlet>
+             <div id="link-parent" routerLinkActive="active" [routerLinkActiveOptions]="{exact: exact}">
+               <div ngClass="{one: 'true'}"><a [routerLink]="['./']">link</a></div>
+             </div>`
+})
+class DummyLinkWithParentCmp {
+  private exact: boolean;
+  constructor(route: ActivatedRoute) { this.exact = (<any>route.snapshot.params).exact === 'true'; }
+}
+
+@Component({selector: 'cmp', template: ''})
+class ComponentRecordingRoutePathAndUrl {
+  private path: any;
+  private url: any;
+
+  constructor(router: Router, route: ActivatedRoute) {
+    this.path = (router.routerState as any).pathFromRoot(route);
+    this.url = router.url.toString();
+  }
+}
+
+@Component({selector: 'root-cmp', template: `<router-outlet></router-outlet>`})
+class RootCmp {
+}
+
+@Component({selector: 'root-cmp-on-init', template: `<router-outlet></router-outlet>`})
+class RootCmpWithOnInit {
+  constructor(private router: Router) {}
+
+  ngOnInit(): void { this.router.navigate(['one']); }
+}
+
+@Component({
+  selector: 'root-cmp',
+  template:
+      `primary [<router-outlet></router-outlet>] right [<router-outlet name="right"></router-outlet>]`
+})
+class RootCmpWithTwoOutlets {
+}
+
+@Component({selector: 'throwing-cmp', template: ''})
+class ThrowingCmp {
+  constructor() { throw new Error('Throwing Cmp'); }
+}
+
+
+
+function advance(fixture: ComponentFixture<any>): void {
+  tick();
+  fixture.detectChanges();
+}
+
+function createRoot(router: Router, type: any): ComponentFixture<any> {
+  const f = TestBed.createComponent(type);
+  advance(f);
+  router.initialNavigation();
+  advance(f);
+  return f;
+}
+
+@Component({selector: 'lazy', template: 'lazy-loaded'})
+class LazyComponent {
+}
+
+
+@NgModule({
+  imports: [RouterTestingModule, CommonModule],
+  entryComponents: [
+    BlankCmp,
+    SimpleCmp,
+    TwoOutletsCmp,
+    TeamCmp,
+    UserCmp,
+    StringLinkCmp,
+    DummyLinkCmp,
+    AbsoluteLinkCmp,
+    RelativeLinkCmp,
+    DummyLinkWithParentCmp,
+    LinkWithQueryParamsAndFragment,
+    CollectParamsCmp,
+    QueryParamsAndFragmentCmp,
+    StringLinkButtonCmp,
+    WrapperCmp,
+    OutletInNgIf,
+    ComponentRecordingRoutePathAndUrl,
+    RouteCmp,
+    RootCmp,
+    RelativeLinkInIfCmp,
+    RootCmpWithTwoOutlets,
+    EmptyQueryParamsCmp,
+    ThrowingCmp
+  ],
+
+
+  exports: [
+    BlankCmp,
+    SimpleCmp,
+    TwoOutletsCmp,
+    TeamCmp,
+    UserCmp,
+    StringLinkCmp,
+    DummyLinkCmp,
+    AbsoluteLinkCmp,
+    RelativeLinkCmp,
+    DummyLinkWithParentCmp,
+    LinkWithQueryParamsAndFragment,
+    CollectParamsCmp,
+    QueryParamsAndFragmentCmp,
+    StringLinkButtonCmp,
+    WrapperCmp,
+    OutletInNgIf,
+    ComponentRecordingRoutePathAndUrl,
+    RouteCmp,
+    RootCmp,
+    RootCmpWithOnInit,
+    RelativeLinkInIfCmp,
+    RootCmpWithTwoOutlets,
+    EmptyQueryParamsCmp,
+    ThrowingCmp
+  ],
+
+
+
+  declarations: [
+    BlankCmp,
+    SimpleCmp,
+    TeamCmp,
+    TwoOutletsCmp,
+    UserCmp,
+    StringLinkCmp,
+    DummyLinkCmp,
+    AbsoluteLinkCmp,
+    RelativeLinkCmp,
+    DummyLinkWithParentCmp,
+    LinkWithQueryParamsAndFragment,
+    CollectParamsCmp,
+    QueryParamsAndFragmentCmp,
+    StringLinkButtonCmp,
+    WrapperCmp,
+    OutletInNgIf,
+    ComponentRecordingRoutePathAndUrl,
+    RouteCmp,
+    RootCmp,
+    RootCmpWithOnInit,
+    RelativeLinkInIfCmp,
+    RootCmpWithTwoOutlets,
+    EmptyQueryParamsCmp,
+    ThrowingCmp
+  ]
+})
+class TestModule {
+}
diff --git a/packages/router/test/recognize.spec.ts b/packages/router/test/recognize.spec.ts
new file mode 100644
index 000000000000..0494f2fe66cb
--- /dev/null
+++ b/packages/router/test/recognize.spec.ts
@@ -0,0 +1,855 @@
+/**
+ * @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 {Routes} from '../src/config';
+import {recognize} from '../src/recognize';
+import {ActivatedRouteSnapshot, RouterStateSnapshot} from '../src/router_state';
+import {PRIMARY_OUTLET, Params} from '../src/shared';
+import {DefaultUrlSerializer, UrlTree} from '../src/url_tree';
+
+describe('recognize', () => {
+  it('should work', () => {
+    checkRecognize([{path: 'a', component: ComponentA}], 'a', (s: any) => {
+      checkActivatedRoute(s.root, '', {}, RootComponent);
+      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 as any).firstChild(s.root) !;
+      expect(Object.isFrozen(child.params)).toBeTruthy();
+    });
+  });
+
+  it('should support secondary routes', () => {
+    checkRecognize(
+        [
+          {path: 'a', component: ComponentA}, {path: 'b', component: ComponentB, outlet: 'left'},
+          {path: 'c', component: ComponentC, outlet: 'right'}
+        ],
+        'a(left:b//right:c)', (s: RouterStateSnapshot) => {
+          const c = (s as any).children(s.root);
+          checkActivatedRoute(c[0], 'a', {}, ComponentA);
+          checkActivatedRoute(c[1], 'b', {}, ComponentB, 'left');
+          checkActivatedRoute(c[2], 'c', {}, ComponentC, 'right');
+        });
+  });
+
+  it('should set url segment and index properly', () => {
+    const url = tree('a(left:b//right:c)');
+    recognize(
+        RootComponent,
+        [
+          {path: 'a', component: ComponentA}, {path: 'b', component: ComponentB, outlet: 'left'},
+          {path: 'c', component: ComponentC, outlet: 'right'}
+        ],
+        url, 'a(left:b//right:c)')
+        .subscribe((s: any) => {
+          expect(s.root._urlSegment).toBe(url.root);
+          expect(s.root._lastPathIndex).toBe(-1);
+
+          const c = (s as any).children(s.root);
+          expect(c[0]._urlSegment).toBe((url.root as any).children[PRIMARY_OUTLET]);
+          expect(c[0]._lastPathIndex).toBe(0);
+
+          expect(c[1]._urlSegment).toBe((url.root as any).children['left']);
+          expect(c[1]._lastPathIndex).toBe(0);
+
+          expect(c[2]._urlSegment).toBe((url.root as any).children['right']);
+          expect(c[2]._lastPathIndex).toBe(0);
+        });
+  });
+
+  it('should set url segment and index properly (nested case)', () => {
+    const url = tree('a/b/c');
+    recognize(
+        RootComponent,
+        [
+          {path: 'a/b', component: ComponentA, children: [{path: 'c', component: ComponentC}]},
+        ],
+        url, 'a/b/c')
+        .subscribe((s: RouterStateSnapshot) => {
+          expect((s.root as any)._urlSegment).toBe(url.root);
+          expect((s.root as any)._lastPathIndex).toBe(-1);
+
+          const compA = (s as any).firstChild(s.root) !;
+          expect(compA._urlSegment).toBe((url.root as any).children[PRIMARY_OUTLET]);
+          expect(compA._lastPathIndex).toBe(1);
+
+          const compC = (s as any).firstChild(<any>compA) !;
+          expect(compC._urlSegment).toBe((url.root as any).children[PRIMARY_OUTLET]);
+          expect(compC._lastPathIndex).toBe(2);
+        });
+  });
+
+  it('should set url segment and index properly (wildcard)', () => {
+    const url = tree('a/b/c');
+    recognize(
+        RootComponent,
+        [
+          {path: 'a', component: ComponentA, children: [{path: '**', component: ComponentB}]},
+        ],
+        url, 'a/b/c')
+        .subscribe((s: any) => {
+          expect(s.root._urlSegment).toBe(url.root);
+          expect(s.root._lastPathIndex).toBe(-1);
+
+          const compA = (s as any).firstChild(s.root) !;
+          expect(compA._urlSegment).toBe((url as any).root.children[PRIMARY_OUTLET]);
+          expect(compA._lastPathIndex).toBe(0);
+
+          const compC = (s as any).firstChild(<any>compA) !;
+          expect(compC._urlSegment).toBe((url as any).root.children[PRIMARY_OUTLET]);
+          expect(compC._lastPathIndex).toBe(2);
+        });
+  });
+
+  it('should match routes in the depth first order', () => {
+    checkRecognize(
+        [
+          {path: 'a', component: ComponentA, children: [{path: ':id', component: ComponentB}]},
+          {path: 'a/:id', component: ComponentC}
+        ],
+        'a/paramA', (s: RouterStateSnapshot) => {
+          checkActivatedRoute(s.root, '', {}, RootComponent);
+          checkActivatedRoute((s as any).firstChild(s.root) !, 'a', {}, ComponentA);
+          checkActivatedRoute(
+              (s as any).firstChild(<any>(s as any).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 as any).firstChild(s.root) !, 'a/paramA', {id: 'paramA'}, ComponentC);
+        });
+  });
+
+  it('should use outlet name when matching secondary routes', () => {
+    checkRecognize(
+        [
+          {path: 'a', component: ComponentA}, {path: 'b', component: ComponentB, outlet: 'left'},
+          {path: 'b', component: ComponentC, outlet: 'right'}
+        ],
+        'a(right:b)', (s: RouterStateSnapshot) => {
+          const c = (s as any).children(s.root);
+          checkActivatedRoute(c[0], 'a', {}, ComponentA);
+          checkActivatedRoute(c[1], 'b', {}, ComponentC, 'right');
+        });
+  });
+
+  it('should handle non top-level secondary routes', () => {
+    checkRecognize(
+        [
+          {
+            path: 'a',
+            component: ComponentA,
+            children: [
+              {path: 'b', component: ComponentB},
+              {path: 'c', component: ComponentC, outlet: 'left'}
+            ]
+          },
+        ],
+        'a/(b//left:c)', (s: RouterStateSnapshot) => {
+          const c = (s as any).children(<any>(s as any).firstChild(s.root));
+          checkActivatedRoute(c[0], 'b', {}, ComponentB, PRIMARY_OUTLET);
+          checkActivatedRoute(c[1], 'c', {}, ComponentC, 'left');
+        });
+  });
+
+  it('should sort routes by outlet name', () => {
+    checkRecognize(
+        [
+          {path: 'a', component: ComponentA}, {path: 'c', component: ComponentC, outlet: 'c'},
+          {path: 'b', component: ComponentB, outlet: 'b'}
+        ],
+        'a(c:c//b:b)', (s: RouterStateSnapshot) => {
+          const c = (s as any).children(s.root);
+          checkActivatedRoute(c[0], 'a', {}, ComponentA);
+          checkActivatedRoute(c[1], 'b', {}, ComponentB, 'b');
+          checkActivatedRoute(c[2], 'c', {}, ComponentC, 'c');
+        });
+  });
+
+  it('should support matrix parameters', () => {
+    checkRecognize(
+        [
+          {path: 'a', component: ComponentA, children: [{path: 'b', component: ComponentB}]},
+          {path: 'c', component: ComponentC, outlet: 'left'}
+        ],
+        'a;a1=11;a2=22/b;b1=111;b2=222(left:c;c1=1111;c2=2222)', (s: RouterStateSnapshot) => {
+          const c = (s as any).children(s.root);
+          checkActivatedRoute(c[0], 'a', {a1: '11', a2: '22'}, ComponentA);
+          checkActivatedRoute(
+              (s as any).firstChild(<any>c[0]) !, 'b', {b1: '111', b2: '222'}, ComponentB);
+          checkActivatedRoute(c[1], 'c', {c1: '1111', c2: '2222'}, ComponentC, 'left');
+        });
+  });
+
+  describe('data', () => {
+    it('should set static data', () => {
+      checkRecognize(
+          [{path: 'a', data: {one: 1}, component: ComponentA}], 'a', (s: RouterStateSnapshot) => {
+            const r: ActivatedRouteSnapshot = (s as any).firstChild(s.root) !;
+            expect(r.data).toEqual({one: 1});
+          });
+    });
+
+    it('should inherit componentless route\'s data', () => {
+      checkRecognize(
+          [{
+            path: 'a',
+            data: {one: 1},
+            children: [{path: 'b', data: {two: 2}, component: ComponentB}]
+          }],
+          'a/b', (s: RouterStateSnapshot) => {
+            const r: ActivatedRouteSnapshot =
+                (s as any).firstChild(<any>(s as any).firstChild(s.root)) !;
+            expect(r.data).toEqual({one: 1, two: 2});
+          });
+    });
+
+    it('should not inherit route\'s data if it has component', () => {
+      checkRecognize(
+          [{
+            path: 'a',
+            component: ComponentA,
+            data: {one: 1},
+            children: [{path: 'b', data: {two: 2}, component: ComponentB}]
+          }],
+          'a/b', (s: any /* RouterStateSnapshot */) => {
+            const r: ActivatedRouteSnapshot = s.firstChild(<any>s.firstChild(s.root)) !;
+            expect(r.data).toEqual({two: 2});
+          });
+    });
+
+    it('should inherit route\'s data if paramsInheritanceStrategy is \'always\'', () => {
+      checkRecognize(
+          [{
+            path: 'a',
+            component: ComponentA,
+            data: {one: 1},
+            children: [{path: 'b', data: {two: 2}, component: ComponentB}]
+          }],
+          'a/b', (s: any /* RouterStateSnapshot */) => {
+            const r: ActivatedRouteSnapshot = s.firstChild(<any>s.firstChild(s.root)) !;
+            expect(r.data).toEqual({one: 1, two: 2});
+          }, 'always');
+    });
+
+    it('should set resolved data', () => {
+      checkRecognize(
+          [{path: 'a', resolve: {one: 'some-token'}, component: ComponentA}], 'a', (s: any) => {
+            const r: any = s.firstChild(s.root) !;
+            expect(r._resolve).toEqual({one: 'some-token'});
+          });
+    });
+  });
+
+  describe('empty path', () => {
+    describe('root', () => {
+      it('should work', () => {
+        checkRecognize([{path: '', component: ComponentA}], '', (s: RouterStateSnapshot) => {
+          checkActivatedRoute((s as any).firstChild(s.root) !, '', {}, ComponentA);
+        });
+      });
+
+      it('should match when terminal', () => {
+        checkRecognize(
+            [{path: '', pathMatch: 'full', component: ComponentA}], '',
+            (s: RouterStateSnapshot) => {
+              checkActivatedRoute((s as any).firstChild(s.root) !, '', {}, ComponentA);
+            });
+      });
+
+      it('should work (nested case)', () => {
+        checkRecognize(
+            [{path: '', component: ComponentA, children: [{path: '', component: ComponentB}]}], '',
+            (s: RouterStateSnapshot) => {
+              checkActivatedRoute((s as any).firstChild(s.root) !, '', {}, ComponentA);
+              checkActivatedRoute(
+                  (s as any).firstChild(<any>(s as any).firstChild(s.root)) !, '', {}, ComponentB);
+            });
+      });
+
+      it('should set url segment and index properly', () => {
+        const url = tree('') as any;
+        recognize(
+            RootComponent,
+            [{path: '', component: ComponentA, children: [{path: '', component: ComponentB}]}], url,
+            '')
+            .forEach((s: any) => {
+              expect(s.root._urlSegment).toBe(url.root);
+              expect(s.root._lastPathIndex).toBe(-1);
+
+              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)) !;
+              expect(c2._urlSegment).toBe(url.root);
+              expect(c2._lastPathIndex).toBe(-1);
+            });
+      });
+
+      it('should inherit params', () => {
+        checkRecognize(
+            [{
+              path: 'a',
+              component: ComponentA,
+              children: [
+                {path: '', component: ComponentB, children: [{path: '', component: ComponentC}]}
+              ]
+            }],
+            '/a;p=1', (s: RouterStateSnapshot) => {
+              checkActivatedRoute((s as any).firstChild(s.root) !, 'a', {p: '1'}, ComponentA);
+              checkActivatedRoute(
+                  (s as any).firstChild((s as any).firstChild(s.root) !) !, '', {p: '1'},
+                  ComponentB);
+              checkActivatedRoute(
+                  (s as any).firstChild((s as any).firstChild((s as any).firstChild(s.root) !) !) !,
+                  '', {p: '1'}, ComponentC);
+            });
+      });
+    });
+
+    describe('aux split is in the middle', () => {
+      it('should match (non-terminal)', () => {
+        checkRecognize(
+            [{
+              path: 'a',
+              component: ComponentA,
+              children: [
+                {path: 'b', component: ComponentB},
+                {path: '', component: ComponentC, outlet: 'aux'}
+              ]
+            }],
+            'a/b', (s: RouterStateSnapshot) => {
+              checkActivatedRoute((s as any).firstChild(s.root) !, 'a', {}, ComponentA);
+
+              const c = (s as any).children((s as any).firstChild(s.root) !);
+              checkActivatedRoute(c[0], 'b', {}, ComponentB);
+              checkActivatedRoute(c[1], '', {}, ComponentC, 'aux');
+            });
+      });
+
+      it('should match (non-terminal) when both primary and secondary and primary has a child',
+         () => {
+           const config = [{
+             path: 'parent',
+             children: [
+               {
+                 path: '',
+                 component: ComponentA,
+                 children: [
+                   {path: 'b', component: ComponentB},
+                   {path: 'c', component: ComponentC},
+                 ]
+               },
+               {
+                 path: '',
+                 component: ComponentD,
+                 outlet: 'secondary',
+               }
+             ]
+           }];
+
+           checkRecognize(config, 'parent/b', (s: RouterStateSnapshot) => {
+             checkActivatedRoute(s.root, '', {}, RootComponent);
+             checkActivatedRoute((s as any).firstChild(s.root) !, 'parent', {}, undefined !);
+
+             const cc = (s as any).children((s as any).firstChild(s.root) !);
+             checkActivatedRoute(cc[0], '', {}, ComponentA);
+             checkActivatedRoute(cc[1], '', {}, ComponentD, 'secondary');
+
+             checkActivatedRoute((s as any).firstChild(cc[0]) !, 'b', {}, ComponentB);
+           });
+         });
+
+      it('should match (terminal)', () => {
+        checkRecognize(
+            [{
+              path: 'a',
+              component: ComponentA,
+              children: [
+                {path: 'b', component: ComponentB},
+                {path: '', pathMatch: 'full', component: ComponentC, outlet: 'aux'}
+              ]
+            }],
+            'a/b', (s: RouterStateSnapshot) => {
+              checkActivatedRoute((s as any).firstChild(s.root) !, 'a', {}, ComponentA);
+
+              const c = (s as any).children((s as any).firstChild(s.root) !);
+              expect(c.length).toEqual(1);
+              checkActivatedRoute(c[0], 'b', {}, ComponentB);
+            });
+      });
+
+      it('should set url segment and index properly', () => {
+        const url = tree('a/b') as any;
+        recognize(
+            RootComponent, [{
+              path: 'a',
+              component: ComponentA,
+              children: [
+                {path: 'b', component: ComponentB},
+                {path: '', component: ComponentC, outlet: 'aux'}
+              ]
+            }],
+            url, 'a/b')
+            .forEach((s: any) => {
+              expect(s.root._urlSegment).toBe(url.root);
+              expect(s.root._lastPathIndex).toBe(-1);
+
+              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) !;
+              expect(b._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
+              expect(b._lastPathIndex).toBe(1);
+
+              const c = s.children(a)[1];
+              expect(c._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
+              expect(c._lastPathIndex).toBe(0);
+            });
+      });
+
+      it('should set url segment and index properly when nested empty-path segments', () => {
+        const url = tree('a') as any;
+        recognize(
+            RootComponent, [{
+              path: 'a',
+              children: [
+                {path: '', component: ComponentB, children: [{path: '', component: ComponentC}]}
+              ]
+            }],
+            url, 'a')
+            .forEach((s: any) => {
+              expect(s.root._urlSegment).toBe(url.root);
+              expect(s.root._lastPathIndex).toBe(-1);
+
+              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) !;
+              expect(b._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
+              expect(b._lastPathIndex).toBe(0);
+
+              const c = s.firstChild(b) !;
+              expect(c._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
+              expect(c._lastPathIndex).toBe(0);
+            });
+      });
+
+      it('should set url segment and index properly with the "corrected" option for nested empty-path segments',
+         () => {
+           const url = tree('a/b') as any;
+           recognize(
+               RootComponent, [{
+                 path: 'a',
+                 children: [{
+                   path: 'b',
+                   component: ComponentB,
+                   children: [{
+                     path: '',
+                     component: ComponentC,
+                     children: [{path: '', component: ComponentD}]
+                   }]
+                 }]
+               }],
+               url, 'a/b', 'emptyOnly', 'corrected')
+               .forEach((s: any) => {
+                 expect(s.root._urlSegment).toBe(url.root);
+                 expect(s.root._lastPathIndex).toBe(-1);
+
+                 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) !;
+                 expect(b._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
+                 expect(b._lastPathIndex).toBe(1);
+
+                 const c = s.firstChild(b) !;
+                 expect(c._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
+                 expect(c._lastPathIndex).toBe(1);
+
+                 const d = s.firstChild(c) !;
+                 expect(d._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
+                 expect(d._lastPathIndex).toBe(1);
+               });
+         });
+
+      it('should set url segment and index properly when nested empty-path segments (2)', () => {
+        const url = tree('');
+        recognize(
+            RootComponent, [{
+              path: '',
+              children: [
+                {path: '', component: ComponentB, children: [{path: '', component: ComponentC}]}
+              ]
+            }],
+            url, '')
+            .forEach((s: any) => {
+              expect(s.root._urlSegment).toBe(url.root);
+              expect(s.root._lastPathIndex).toBe(-1);
+
+              const a = (s as any).firstChild(s.root) !;
+              expect(a._urlSegment).toBe(url.root);
+              expect(a._lastPathIndex).toBe(-1);
+
+              const b = (s as any).firstChild(a) !;
+              expect(b._urlSegment).toBe(url.root);
+              expect(b._lastPathIndex).toBe(-1);
+
+              const c = (s as any).firstChild(b) !;
+              expect(c._urlSegment).toBe(url.root);
+              expect(c._lastPathIndex).toBe(-1);
+            });
+      });
+    });
+
+    describe('aux split at the end (no right child)', () => {
+      it('should match (non-terminal)', () => {
+        checkRecognize(
+            [{
+              path: 'a',
+              component: ComponentA,
+              children: [
+                {path: '', component: ComponentB},
+                {path: '', component: ComponentC, outlet: 'aux'},
+              ]
+            }],
+            'a', (s: RouterStateSnapshot) => {
+              checkActivatedRoute((s as any).firstChild(s.root) !, 'a', {}, ComponentA);
+
+              const c = (s as any).children((s as any).firstChild(s.root) !);
+              checkActivatedRoute(c[0], '', {}, ComponentB);
+              checkActivatedRoute(c[1], '', {}, ComponentC, 'aux');
+            });
+      });
+
+      it('should match (terminal)', () => {
+        checkRecognize(
+            [{
+              path: 'a',
+              component: ComponentA,
+              children: [
+                {path: '', pathMatch: 'full', component: ComponentB},
+                {path: '', pathMatch: 'full', component: ComponentC, outlet: 'aux'},
+              ]
+            }],
+            'a', (s: RouterStateSnapshot) => {
+              checkActivatedRoute((s as any).firstChild(s.root) !, 'a', {}, ComponentA);
+
+              const c = (s as any).children((s as any).firstChild(s.root) !);
+              checkActivatedRoute(c[0], '', {}, ComponentB);
+              checkActivatedRoute(c[1], '', {}, ComponentC, 'aux');
+            });
+      });
+
+      it('should work only only primary outlet', () => {
+        checkRecognize(
+            [{
+              path: 'a',
+              component: ComponentA,
+              children: [
+                {path: '', component: ComponentB},
+                {path: 'c', component: ComponentC, outlet: 'aux'},
+              ]
+            }],
+            'a/(aux:c)', (s: RouterStateSnapshot) => {
+              checkActivatedRoute((s as any).firstChild(s.root) !, 'a', {}, ComponentA);
+
+              const c = (s as any).children((s as any).firstChild(s.root) !);
+              checkActivatedRoute(c[0], '', {}, ComponentB);
+              checkActivatedRoute(c[1], 'c', {}, ComponentC, 'aux');
+            });
+      });
+
+      it('should work when split is at the root level', () => {
+        checkRecognize(
+            [
+              {path: '', component: ComponentA}, {path: 'b', component: ComponentB},
+              {path: 'c', component: ComponentC, outlet: 'aux'}
+            ],
+            '(aux:c)', (s: RouterStateSnapshot) => {
+              checkActivatedRoute(s.root, '', {}, RootComponent);
+
+              const children = (s as any).children(s.root);
+              expect(children.length).toEqual(2);
+              checkActivatedRoute(children[0], '', {}, ComponentA);
+              checkActivatedRoute(children[1], 'c', {}, ComponentC, 'aux');
+            });
+      });
+    });
+
+    describe('split at the end (right child)', () => {
+      it('should match (non-terminal)', () => {
+        checkRecognize(
+            [{
+              path: 'a',
+              component: ComponentA,
+              children: [
+                {path: '', component: ComponentB, children: [{path: 'd', component: ComponentD}]},
+                {
+                  path: '',
+                  component: ComponentC,
+                  outlet: 'aux',
+                  children: [{path: 'e', component: ComponentE}]
+                },
+              ]
+            }],
+            'a/(d//aux:e)', (s: RouterStateSnapshot) => {
+              checkActivatedRoute((s as any).firstChild(s.root) !, 'a', {}, ComponentA);
+
+              const c = (s as any).children((s as any).firstChild(s.root) !);
+              checkActivatedRoute(c[0], '', {}, ComponentB);
+              checkActivatedRoute((s as any).firstChild(c[0]) !, 'd', {}, ComponentD);
+              checkActivatedRoute(c[1], '', {}, ComponentC, 'aux');
+              checkActivatedRoute((s as any).firstChild(c[1]) !, 'e', {}, ComponentE);
+            });
+      });
+    });
+  });
+
+  describe('wildcards', () => {
+    it('should support simple wildcards', () => {
+      checkRecognize(
+          [{path: '**', component: ComponentA}], 'a/b/c/d;a1=11', (s: RouterStateSnapshot) => {
+            checkActivatedRoute((s as any).firstChild(s.root) !, 'a/b/c/d', {a1: '11'}, ComponentA);
+          });
+    });
+  });
+
+  describe('componentless routes', () => {
+    it('should work', () => {
+      checkRecognize(
+          [{
+            path: 'p/:id',
+            children: [
+              {path: 'a', component: ComponentA},
+              {path: 'b', component: ComponentB, outlet: 'aux'}
+            ]
+          }],
+          'p/11;pp=22/(a;pa=33//aux:b;pb=44)', (s: RouterStateSnapshot) => {
+            const p = (s as any).firstChild(s.root) !;
+            checkActivatedRoute(p, 'p/11', {id: '11', pp: '22'}, undefined !);
+
+            const c = (s as any).children(p);
+            checkActivatedRoute(c[0], 'a', {id: '11', pp: '22', pa: '33'}, ComponentA);
+            checkActivatedRoute(c[1], 'b', {id: '11', pp: '22', pb: '44'}, ComponentB, 'aux');
+          });
+    });
+
+    it('should inherit params until encounters a normal route', () => {
+      checkRecognize(
+          [{
+            path: 'p/:id',
+            children: [{
+              path: 'a/:name',
+              children: [{
+                path: 'b',
+                component: ComponentB,
+                children: [{path: 'c', component: ComponentC}]
+              }]
+            }]
+          }],
+          'p/11/a/victor/b/c', (s: RouterStateSnapshot) => {
+            const p = (s as any).firstChild(s.root) !;
+            checkActivatedRoute(p, 'p/11', {id: '11'}, undefined !);
+
+            const a = (s as any).firstChild(p) !;
+            checkActivatedRoute(a, 'a/victor', {id: '11', name: 'victor'}, undefined !);
+
+            const b = (s as any).firstChild(a) !;
+            checkActivatedRoute(b, 'b', {id: '11', name: 'victor'}, ComponentB);
+
+            const c = (s as any).firstChild(b) !;
+            checkActivatedRoute(c, 'c', {}, ComponentC);
+          });
+    });
+
+    it('should inherit all params if paramsInheritanceStrategy is \'always\'', () => {
+      checkRecognize(
+          [{
+            path: 'p/:id',
+            children: [{
+              path: 'a/:name',
+              children: [{
+                path: 'b',
+                component: ComponentB,
+                children: [{path: 'c', component: ComponentC}]
+              }]
+            }]
+          }],
+          'p/11/a/victor/b/c', (s: any /* RouterStateSnapshot */) => {
+            const c = s.firstChild(s.firstChild(s.firstChild(s.firstChild(s.root) !) !) !) !;
+            checkActivatedRoute(c, 'c', {id: '11', name: 'victor'}, ComponentC);
+          }, 'always');
+    });
+  });
+
+  describe('empty URL leftovers', () => {
+    it('should not throw when no children matching', () => {
+      checkRecognize(
+          [{path: 'a', component: ComponentA, children: [{path: 'b', component: ComponentB}]}],
+          '/a', (s: RouterStateSnapshot) => {
+            const a = (s as any).firstChild(s.root);
+            checkActivatedRoute(a !, 'a', {}, ComponentA);
+          });
+    });
+
+    it('should not throw when no children matching (aux routes)', () => {
+      checkRecognize(
+          [{
+            path: 'a',
+            component: ComponentA,
+            children: [
+              {path: 'b', component: ComponentB},
+              {path: '', component: ComponentC, outlet: 'aux'},
+            ]
+          }],
+          '/a', (s: RouterStateSnapshot) => {
+            const a = (s as any).firstChild(s.root) !;
+            checkActivatedRoute(a, 'a', {}, ComponentA);
+            checkActivatedRoute((a as any).children[0], '', {}, ComponentC, 'aux');
+          });
+    });
+  });
+
+  describe('custom path matchers', () => {
+    it('should use custom path matcher', () => {
+      const matcher = (s: any, g: any, r: any) => {
+        if (s[0].path === 'a') {
+          return {consumed: s.slice(0, 2), posParams: {id: s[1]}};
+        } else {
+          return null;
+        }
+      };
+
+      checkRecognize(
+          [{
+            matcher: matcher,
+            component: ComponentA,
+            children: [{path: 'b', component: ComponentB}]
+          }] as any,
+          '/a/1;p=99/b', (s: RouterStateSnapshot) => {
+            const a = (s as any).root.firstChild !;
+            checkActivatedRoute(a, 'a/1', {id: '1', p: '99'}, ComponentA);
+            checkActivatedRoute((a as any).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 as any).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 as any).root.firstChild !;
+            checkActivatedRoute(a, 'a', {}, ComponentA);
+          });
+    });
+  });
+
+  describe('query parameters', () => {
+    it('should support query params', () => {
+      const config = [{path: 'a', component: ComponentA}];
+      checkRecognize(config, 'a?q=11', (s: RouterStateSnapshot) => {
+        expect(s.root.queryParams).toEqual({q: '11'});
+        expect(s.root.queryParamMap.get('q')).toEqual('11');
+      });
+    });
+
+    it('should freeze query params object', () => {
+      checkRecognize([{path: 'a', component: ComponentA}], 'a?q=11', (s: RouterStateSnapshot) => {
+        expect(Object.isFrozen(s.root.queryParams)).toBeTruthy();
+      });
+    });
+
+    it('should not freeze UrlTree query params', () => {
+      const url = tree('a?q=11');
+      recognize(RootComponent, [{path: 'a', component: ComponentA}], url, 'a?q=11')
+          .subscribe((s: RouterStateSnapshot) => {
+            expect(Object.isFrozen(url.queryParams)).toBe(false);
+          });
+    });
+  });
+
+  describe('fragment', () => {
+    it('should support fragment', () => {
+      const config = [{path: 'a', component: ComponentA}];
+      checkRecognize(
+          config, 'a#f1', (s: RouterStateSnapshot) => { expect(s.root.fragment).toEqual('f1'); });
+    });
+  });
+
+  describe('error handling', () => {
+    it('should error when two routes with the same outlet name got matched', () => {
+      recognize(
+          RootComponent,
+          [
+            {path: 'a', component: ComponentA}, {path: 'b', component: ComponentB, outlet: 'aux'},
+            {path: 'c', component: ComponentC, outlet: 'aux'}
+          ],
+          tree('a(aux:b//aux:c)'), 'a(aux:b//aux:c)')
+          .subscribe((_) => {}, (s: RouterStateSnapshot) => {
+            expect(s.toString())
+                .toContain(
+                    'Two segments cannot have the same outlet name: \'aux:b\' and \'aux:c\'.');
+          });
+    });
+  });
+});
+
+function checkRecognize(
+    config: Routes, url: string, callback: any,
+    paramsInheritanceStrategy?: 'emptyOnly' | 'always'): void {
+  recognize(RootComponent, config, tree(url), url, paramsInheritanceStrategy)
+      .subscribe(callback, e => { throw e; });
+}
+
+function checkActivatedRoute(
+    actual: ActivatedRouteSnapshot, url: string, params: Params, cmp: Function,
+    outlet: string = PRIMARY_OUTLET): void {
+  if (actual === null) {
+    expect(actual).not.toBeNull();
+  } else {
+    expect(actual.url.map(s => s.path).join('/')).toEqual(url);
+    expect(actual.params).toEqual(params);
+    expect(actual.component as any).toBe(cmp);
+    expect(actual.outlet).toEqual(outlet);
+  }
+}
+
+function tree(url: string): UrlTree {
+  return new DefaultUrlSerializer().parse(url);
+}
+
+class RootComponent {}
+class ComponentA {}
+class ComponentB {}
+class ComponentC {}
+class ComponentD {}
+class ComponentE {}
diff --git a/packages/router/test/regression_integration.spec.ts b/packages/router/test/regression_integration.spec.ts
new file mode 100644
index 000000000000..ab1d0681be8d
--- /dev/null
+++ b/packages/router/test/regression_integration.spec.ts
@@ -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
+ */
+
+import {CommonModule} from '@angular/common';
+import {Component, ContentChild, NgModule, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+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();
+       }));
+
+    it('should set isActive right after looking at its children -- #18983', fakeAsync(() => {
+         @Component({
+           template: `
+          <div #rla="routerLinkActive" routerLinkActive>
+            isActive: {{rla.isActive}}
+            
+            <ng-template let-data>
+              <a [routerLink]="data">link</a>
+            </ng-template>
+
+            <ng-container #container></ng-container>
+          </div>
+        `
+         })
+         class ComponentWithRouterLink {
+           // TODO(issue/24571): remove '!'.
+           @ViewChild(TemplateRef) templateRef !: TemplateRef<any>;
+           // TODO(issue/24571): remove '!'.
+           @ViewChild('container', {read: ViewContainerRef}) container !: ViewContainerRef;
+
+           addLink() {
+             this.container.createEmbeddedView(this.templateRef, {$implicit: '/simple'});
+           }
+
+           removeLink() { this.container.clear(); }
+         }
+
+         @Component({template: 'simple'})
+         class SimpleCmp {
+         }
+
+         TestBed.configureTestingModule({
+           imports: [RouterTestingModule.withRoutes([{path: 'simple', component: SimpleCmp}])],
+           declarations: [ComponentWithRouterLink, SimpleCmp]
+         });
+
+         const router: Router = TestBed.get(Router);
+         const fixture = createRoot(router, ComponentWithRouterLink);
+         router.navigateByUrl('/simple');
+         advance(fixture);
+
+         fixture.componentInstance.addLink();
+         fixture.detectChanges();
+
+         fixture.componentInstance.removeLink();
+         advance(fixture);
+         advance(fixture);
+
+         expect(fixture.nativeElement.innerHTML).toContain('isActive: false');
+       }));
+
+  });
+
+});
+
+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
new file mode 100644
index 000000000000..df6d5d0a806f
--- /dev/null
+++ b/packages/router/test/router.spec.ts
@@ -0,0 +1,547 @@
+/**
+ * @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 '@angular/common';
+import {TestBed, inject} from '@angular/core/testing';
+
+import {Routes} from '../src/config';
+import {ChildActivationStart} from '../src/events';
+import {PreActivation} from '../src/pre_activation';
+import {Router} from '../src/router';
+import {ChildrenOutletContexts} from '../src/router_outlet_context';
+import {RouterStateSnapshot, createEmptyStateSnapshot} from '../src/router_state';
+import {DefaultUrlSerializer} from '../src/url_tree';
+import {TreeNode} from '../src/utils/tree';
+import {RouterTestingModule} from '../testing/src/router_testing_module';
+
+import {Logger, createActivatedRouteSnapshot, provideTokenLogger} from './helpers';
+
+describe('Router', () => {
+
+  describe('resetConfig', () => {
+    class TestComponent {}
+
+    beforeEach(() => { TestBed.configureTestingModule({imports: [RouterTestingModule]}); });
+
+    it('should copy config to avoid mutations of user-provided objects', () => {
+      const r: Router = TestBed.get(Router);
+      const configs: Routes = [{
+        path: 'a',
+        component: TestComponent,
+        children: [{path: 'b', component: TestComponent}, {path: 'c', component: TestComponent}]
+      }];
+      const children = configs[0].children !;
+
+      r.resetConfig(configs);
+
+      const rConfigs = r.config;
+      const rChildren = rConfigs[0].children !;
+
+      // routes array and shallow copy
+      expect(configs).not.toBe(rConfigs);
+      expect(configs[0]).not.toBe(rConfigs[0]);
+      expect(configs[0].path).toBe(rConfigs[0].path);
+      expect(configs[0].component).toBe(rConfigs[0].component);
+
+      // children should be new array and routes shallow copied
+      expect(children).not.toBe(rChildren);
+      expect(children[0]).not.toBe(rChildren[0]);
+      expect(children[0].path).toBe(rChildren[0].path);
+      expect(children[1]).not.toBe(rChildren[1]);
+      expect(children[1].path).toBe(rChildren[1].path);
+    });
+  });
+
+  describe('resetRootComponentType', () => {
+    class NewRootComponent {}
+
+    beforeEach(() => { TestBed.configureTestingModule({imports: [RouterTestingModule]}); });
+
+    it('should not change root route when updating the root component', () => {
+      const r: Router = TestBed.get(Router);
+      const root = r.routerState.root;
+
+      (r as any).resetRootComponentType(NewRootComponent);
+
+      expect(r.routerState.root).toBe(root);
+    });
+  });
+
+  describe('setUpLocationChangeListener', () => {
+    beforeEach(() => { TestBed.configureTestingModule({imports: [RouterTestingModule]}); });
+
+    it('should be idempotent', inject([Router, Location], (r: Router, location: Location) => {
+         r.setUpLocationChangeListener();
+         const a = (<any>r).locationSubscription;
+         r.setUpLocationChangeListener();
+         const b = (<any>r).locationSubscription;
+
+         expect(a).toBe(b);
+
+         r.dispose();
+         r.setUpLocationChangeListener();
+         const c = (<any>r).locationSubscription;
+
+         expect(c).not.toBe(b);
+       }));
+  });
+
+  describe('PreActivation', () => {
+    const serializer = new DefaultUrlSerializer();
+    const inj = {get: (token: any) => () => `${token}_value`};
+    let empty: RouterStateSnapshot;
+    let logger: Logger;
+    let events: any[];
+
+    const CA_CHILD = 'canActivate_child';
+    const CA_CHILD_FALSE = 'canActivate_child_false';
+    const CAC_CHILD = 'canActivateChild_child';
+    const CAC_CHILD_FALSE = 'canActivateChild_child_false';
+    const CA_GRANDCHILD = 'canActivate_grandchild';
+    const CA_GRANDCHILD_FALSE = 'canActivate_grandchild_false';
+    const CDA_CHILD = 'canDeactivate_child';
+    const CDA_CHILD_FALSE = 'canDeactivate_child_false';
+    const CDA_GRANDCHILD = 'canDeactivate_grandchild';
+    const CDA_GRANDCHILD_FALSE = 'canDeactivate_grandchild_false';
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [
+          Logger, provideTokenLogger(CA_CHILD), provideTokenLogger(CA_CHILD_FALSE, false),
+          provideTokenLogger(CAC_CHILD), provideTokenLogger(CAC_CHILD_FALSE, false),
+          provideTokenLogger(CA_GRANDCHILD), provideTokenLogger(CA_GRANDCHILD_FALSE, false),
+          provideTokenLogger(CDA_CHILD), provideTokenLogger(CDA_CHILD_FALSE, false),
+          provideTokenLogger(CDA_GRANDCHILD), provideTokenLogger(CDA_GRANDCHILD_FALSE, false)
+        ]
+      });
+
+    });
+
+    beforeEach(inject([Logger], (_logger: Logger) => {
+      empty = createEmptyStateSnapshot(serializer.parse('/'), null !);
+      logger = _logger;
+      events = [];
+    }));
+
+    describe('ChildActivation', () => {
+      it('should run', () => {
+        /**
+         * R  -->  R (ChildActivationStart)
+         *          \
+         *           child
+         */
+        let result = false;
+        const childSnapshot =
+            createActivatedRouteSnapshot({component: 'child', routeConfig: {path: 'child'}});
+        const futureState = new (RouterStateSnapshot as any)(
+            'url', new TreeNode(empty.root, [new TreeNode(childSnapshot, [])]));
+
+        const p = new PreActivation(futureState, empty, TestBed, (evt) => { events.push(evt); });
+        p.initialize(new ChildrenOutletContexts());
+        p.checkGuards().subscribe((x) => result = x, (e) => { throw e; });
+        expect(result).toBe(true);
+        expect(events.length).toEqual(2);
+        expect(events[0].snapshot).toBe(events[0].snapshot.root);
+        expect(events[1].snapshot.routeConfig.path).toBe('child');
+      });
+
+      it('should run from top to bottom', () => {
+        /**
+         * R  -->  R (ChildActivationStart)
+         *          \
+         *           child (ChildActivationStart)
+         *            \
+         *             grandchild (ChildActivationStart)
+         *              \
+         *               great grandchild
+         */
+        let result = false;
+        const childSnapshot =
+            createActivatedRouteSnapshot({component: 'child', routeConfig: {path: 'child'}});
+        const grandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'grandchild', routeConfig: {path: 'grandchild'}});
+        const greatGrandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'great-grandchild', routeConfig: {path: 'great-grandchild'}});
+        const futureState = new (RouterStateSnapshot as any)(
+            'url',
+            new TreeNode(
+                empty.root, [new TreeNode(childSnapshot, [
+                  new TreeNode(grandchildSnapshot, [new TreeNode(greatGrandchildSnapshot, [])])
+                ])]));
+
+        const p = new PreActivation(futureState, empty, TestBed, (evt) => { events.push(evt); });
+        p.initialize(new ChildrenOutletContexts());
+        p.checkGuards().subscribe((x) => result = x, (e) => { throw e; });
+
+        expect(result).toBe(true);
+        expect(events.length).toEqual(6);
+        expect(events[0].snapshot).toBe(events[0].snapshot.root);
+        expect(events[2].snapshot.routeConfig.path).toBe('child');
+        expect(events[4].snapshot.routeConfig.path).toBe('grandchild');
+        expect(events[5].snapshot.routeConfig.path).toBe('great-grandchild');
+      });
+
+      it('should not run for unchanged routes', () => {
+        /**
+         *         R  -->  R
+         *        / \
+         *   child   child (ChildActivationStart)
+         *            \
+         *             grandchild
+         */
+        let result = false;
+        const childSnapshot =
+            createActivatedRouteSnapshot({component: 'child', routeConfig: {path: 'child'}});
+        const grandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'grandchild', routeConfig: {path: 'grandchild'}});
+        const currentState = new (RouterStateSnapshot as any)(
+            'url', new TreeNode(empty.root, [new TreeNode(childSnapshot, [])]));
+        const futureState = new (RouterStateSnapshot as any)(
+            'url',
+            new TreeNode(
+                empty.root, [new TreeNode(childSnapshot, [new TreeNode(grandchildSnapshot, [])])]));
+
+        const p =
+            new PreActivation(futureState, currentState, TestBed, (evt) => { events.push(evt); });
+        p.initialize(new ChildrenOutletContexts());
+        p.checkGuards().subscribe((x) => result = x, (e) => { throw e; });
+
+        expect(result).toBe(true);
+        expect(events.length).toEqual(2);
+        expect(events[0].snapshot).not.toBe(events[0].snapshot.root);
+        expect(events[0].snapshot.routeConfig.path).toBe('child');
+      });
+
+      it('should skip multiple unchanged routes but fire for all changed routes', () => {
+        /**
+         *         R  -->  R
+         *            / \
+         *       child   child
+         *          /     \
+         * grandchild      grandchild (ChildActivationStart)
+         *                  \
+         *                   greatgrandchild (ChildActivationStart)
+         *                    \
+         *                     great-greatgrandchild
+         */
+        let result = false;
+        const childSnapshot =
+            createActivatedRouteSnapshot({component: 'child', routeConfig: {path: 'child'}});
+        const grandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'grandchild', routeConfig: {path: 'grandchild'}});
+        const greatGrandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'greatgrandchild', routeConfig: {path: 'greatgrandchild'}});
+        const greatGreatGrandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'great-greatgrandchild', routeConfig: {path: 'great-greatgrandchild'}});
+        const currentState = new (RouterStateSnapshot as any)(
+            'url',
+            new TreeNode(
+                empty.root, [new TreeNode(childSnapshot, [new TreeNode(grandchildSnapshot, [])])]));
+        const futureState = new (RouterStateSnapshot as any)(
+            'url',
+            new TreeNode(
+                empty.root,
+                [new TreeNode(
+                    childSnapshot, [new TreeNode(grandchildSnapshot, [
+                      new TreeNode(
+                          greatGrandchildSnapshot, [new TreeNode(greatGreatGrandchildSnapshot, [])])
+                    ])])]));
+
+        const p =
+            new PreActivation(futureState, currentState, TestBed, (evt) => { events.push(evt); });
+        p.initialize(new ChildrenOutletContexts());
+        p.checkGuards().subscribe((x) => result = x, (e) => { throw e; });
+
+        expect(result).toBe(true);
+        expect(events.length).toEqual(4);
+        expect(events[0] instanceof ChildActivationStart).toBe(true);
+        expect(events[0].snapshot).not.toBe(events[0].snapshot.root);
+        expect(events[0].snapshot.routeConfig.path).toBe('grandchild');
+        expect(events[2].snapshot.routeConfig.path).toBe('greatgrandchild');
+      });
+    });
+
+    describe('guards', () => {
+      it('should run CanActivate checks', () => {
+        /**
+         * R  -->  R
+         *          \
+         *           child (CA, CAC)
+         *            \
+         *             grandchild (CA)
+         */
+
+        const childSnapshot = createActivatedRouteSnapshot({
+          component: 'child',
+          routeConfig: {
+
+            canActivate: [CA_CHILD],
+            canActivateChild: [CAC_CHILD]
+          }
+        });
+        const grandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'grandchild', routeConfig: {canActivate: [CA_GRANDCHILD]}});
+
+        const futureState = new (RouterStateSnapshot as any)(
+            'url',
+            new TreeNode(
+                empty.root, [new TreeNode(childSnapshot, [new TreeNode(grandchildSnapshot, [])])]));
+
+        checkGuards(futureState, empty, TestBed, (result) => {
+          expect(result).toBe(true);
+          expect(logger.logs).toEqual([CA_CHILD, CAC_CHILD, CA_GRANDCHILD]);
+        });
+      });
+
+      it('should not run grandchild guards if child fails', () => {
+        /**
+         * R  -->  R
+         *          \
+         *           child (CA: x, CAC)
+         *            \
+         *             grandchild (CA)
+         */
+
+        const childSnapshot = createActivatedRouteSnapshot({
+          component: 'child',
+          routeConfig: {canActivate: [CA_CHILD_FALSE], canActivateChild: [CAC_CHILD]}
+        });
+        const grandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'grandchild', routeConfig: {canActivate: [CA_GRANDCHILD]}});
+
+        const futureState = new (RouterStateSnapshot as any)(
+            'url',
+            new TreeNode(
+                empty.root, [new TreeNode(childSnapshot, [new TreeNode(grandchildSnapshot, [])])]));
+
+        checkGuards(futureState, empty, TestBed, (result) => {
+          expect(result).toBe(false);
+          expect(logger.logs).toEqual([CA_CHILD_FALSE]);
+        });
+      });
+
+      it('should not run grandchild guards if child canActivateChild fails', () => {
+        /**
+         * R  -->  R
+         *          \
+         *           child (CA, CAC: x)
+         *            \
+         *             grandchild (CA)
+         */
+
+        const childSnapshot = createActivatedRouteSnapshot({
+          component: 'child',
+          routeConfig: {canActivate: [CA_CHILD], canActivateChild: [CAC_CHILD_FALSE]}
+        });
+        const grandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'grandchild', routeConfig: {canActivate: [CA_GRANDCHILD]}});
+
+        const futureState = new (RouterStateSnapshot as any)(
+            'url',
+            new TreeNode(
+                empty.root, [new TreeNode(childSnapshot, [new TreeNode(grandchildSnapshot, [])])]));
+
+        checkGuards(futureState, empty, TestBed, (result) => {
+          expect(result).toBe(false);
+          expect(logger.logs).toEqual([CA_CHILD, CAC_CHILD_FALSE]);
+        });
+      });
+
+      it('should run deactivate guards before activate guards', () => {
+        /**
+         *      R  -->  R
+         *     /         \
+         *    prev (CDA)  child (CA)
+         *                 \
+         *                  grandchild (CA)
+         */
+
+        const prevSnapshot = createActivatedRouteSnapshot(
+            {component: 'prev', routeConfig: {canDeactivate: [CDA_CHILD]}});
+
+        const childSnapshot = createActivatedRouteSnapshot({
+          component: 'child',
+          routeConfig: {canActivate: [CA_CHILD], canActivateChild: [CAC_CHILD]}
+        });
+
+        const grandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'grandchild', routeConfig: {canActivate: [CA_GRANDCHILD]}});
+
+        const currentState = new (RouterStateSnapshot as any)(
+            'prev', new TreeNode(empty.root, [new TreeNode(prevSnapshot, [])]));
+
+        const futureState = new (RouterStateSnapshot as any)(
+            'url',
+            new TreeNode(
+                empty.root, [new TreeNode(childSnapshot, [new TreeNode(grandchildSnapshot, [])])]));
+
+        checkGuards(futureState, currentState, TestBed, (result) => {
+          expect(logger.logs).toEqual([CDA_CHILD, CA_CHILD, CAC_CHILD, CA_GRANDCHILD]);
+        });
+      });
+
+      it('should not run activate if deactivate fails guards', () => {
+        /**
+         *      R  -->  R
+         *     /         \
+         *    prev (CDA)  child (CA)
+         *                 \
+         *                  grandchild (CA)
+         */
+
+        const prevSnapshot = createActivatedRouteSnapshot(
+            {component: 'prev', routeConfig: {canDeactivate: [CDA_CHILD_FALSE]}});
+        const childSnapshot = createActivatedRouteSnapshot({
+          component: 'child',
+          routeConfig: {canActivate: [CA_CHILD], canActivateChild: [CAC_CHILD]}
+        });
+        const grandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'grandchild', routeConfig: {canActivate: [CA_GRANDCHILD]}});
+
+        const currentState = new (RouterStateSnapshot as any)(
+            'prev', new TreeNode(empty.root, [new TreeNode(prevSnapshot, [])]));
+        const futureState = new (RouterStateSnapshot as any)(
+            'url',
+            new TreeNode(
+                empty.root, [new TreeNode(childSnapshot, [new TreeNode(grandchildSnapshot, [])])]));
+
+        checkGuards(futureState, currentState, TestBed, (result) => {
+          expect(result).toBe(false);
+          expect(logger.logs).toEqual([CDA_CHILD_FALSE]);
+        });
+      });
+      it('should deactivate from bottom up, then activate top down', () => {
+        /**
+         *      R     -->      R
+         *     /                \
+         *    prevChild (CDA)    child (CA)
+         *   /                    \
+         *  prevGrandchild(CDA)    grandchild (CA)
+         */
+
+        const prevChildSnapshot = createActivatedRouteSnapshot(
+            {component: 'prev_child', routeConfig: {canDeactivate: [CDA_CHILD]}});
+        const prevGrandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'prev_grandchild', routeConfig: {canDeactivate: [CDA_GRANDCHILD]}});
+        const childSnapshot = createActivatedRouteSnapshot({
+          component: 'child',
+          routeConfig: {canActivate: [CA_CHILD], canActivateChild: [CAC_CHILD]}
+        });
+        const grandchildSnapshot = createActivatedRouteSnapshot(
+            {component: 'grandchild', routeConfig: {canActivate: [CA_GRANDCHILD]}});
+
+        const currentState = new (RouterStateSnapshot as any)(
+            'prev', new TreeNode(empty.root, [
+              new TreeNode(prevChildSnapshot, [new TreeNode(prevGrandchildSnapshot, [])])
+            ]));
+
+        const futureState = new (RouterStateSnapshot as any)(
+            'url',
+            new TreeNode(
+                empty.root, [new TreeNode(childSnapshot, [new TreeNode(grandchildSnapshot, [])])]));
+
+        checkGuards(futureState, currentState, TestBed, (result) => {
+          expect(result).toBe(true);
+          expect(logger.logs).toEqual([
+            CDA_GRANDCHILD, CDA_CHILD, CA_CHILD, CAC_CHILD, CA_GRANDCHILD
+          ]);
+        });
+
+        logger.empty();
+        checkGuards(currentState, futureState, TestBed, (result) => {
+          expect(result).toBe(true);
+          expect(logger.logs).toEqual([]);
+        });
+      });
+    });
+
+    describe('resolve', () => {
+
+      it('should resolve data', () => {
+        /**
+         * R  -->  R
+         *          \
+         *           a
+         */
+        const r = {data: 'resolver'};
+        const n = createActivatedRouteSnapshot({component: 'a', resolve: r});
+        const s = new (RouterStateSnapshot as any)(
+            'url', new TreeNode(empty.root, [new TreeNode(n, [])]));
+
+        checkResolveData(s, empty, inj, () => {
+          expect(s.root.firstChild !.data).toEqual({data: 'resolver_value'});
+        });
+      });
+
+      it('should wait for the parent resolve to complete', () => {
+        /**
+         * R  -->  R
+         *          \
+         *           null (resolve: parentResolve)
+         *            \
+         *             b (resolve: childResolve)
+         */
+        const parentResolve = {data: 'resolver'};
+        const childResolve = {};
+
+        const parent = createActivatedRouteSnapshot({component: null !, resolve: parentResolve});
+        const child = createActivatedRouteSnapshot({component: 'b', resolve: childResolve});
+
+        const s = new (RouterStateSnapshot as any)(
+            'url', new TreeNode(empty.root, [new TreeNode(parent, [new TreeNode(child, [])])]));
+
+        const inj = {get: (token: any) => () => Promise.resolve(`${token}_value`)};
+
+        checkResolveData(s, empty, inj, () => {
+          expect(s.root.firstChild !.firstChild !.data).toEqual({data: 'resolver_value'});
+        });
+      });
+
+      it('should copy over data when creating a snapshot', () => {
+        /**
+         * R  -->  R         -->         R
+         *          \                     \
+         *           n1 (resolve: r1)      n21 (resolve: r1)
+         *                                  \
+         *                                   n22 (resolve: r2)
+         */
+        const r1 = {data: 'resolver1'};
+        const r2 = {data: 'resolver2'};
+
+        const n1 = createActivatedRouteSnapshot({component: 'a', resolve: r1});
+        const s1 = new (RouterStateSnapshot as any)(
+            'url', new TreeNode(empty.root, [new TreeNode(n1, [])]));
+        checkResolveData(s1, empty, inj, () => {});
+
+        const n21 = createActivatedRouteSnapshot({component: 'a', resolve: r1});
+        const n22 = createActivatedRouteSnapshot({component: 'b', resolve: r2});
+        const s2 = new (RouterStateSnapshot as any)(
+            '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'});
+        });
+      });
+    });
+  });
+});
+
+function checkResolveData(
+    future: RouterStateSnapshot, curr: RouterStateSnapshot, injector: any, check: any): void {
+  const p = new PreActivation(future, curr, injector);
+  p.initialize(new ChildrenOutletContexts());
+  p.resolveData('emptyOnly').subscribe(check, (e) => { throw e; });
+}
+
+function checkGuards(
+    future: RouterStateSnapshot, curr: RouterStateSnapshot, injector: any,
+    check: (result: boolean) => void): void {
+  const p = new PreActivation(future, curr, injector);
+  p.initialize(new ChildrenOutletContexts());
+  p.checkGuards().subscribe(check, (e) => { throw e; });
+}
diff --git a/packages/router/test/router_preloader.spec.ts b/packages/router/test/router_preloader.spec.ts
new file mode 100644
index 000000000000..8df0e8bc4623
--- /dev/null
+++ b/packages/router/test/router_preloader.spec.ts
@@ -0,0 +1,244 @@
+/**
+ * @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 {Compiler, Component, NgModule, NgModuleFactoryLoader, NgModuleRef} from '@angular/core';
+import {TestBed, fakeAsync, inject, tick} from '@angular/core/testing';
+
+import {Route, RouteConfigLoadEnd, RouteConfigLoadStart, Router, RouterModule} from '../index';
+import {LoadedRouterConfig} from '../src/config';
+import {PreloadAllModules, PreloadingStrategy, RouterPreloader} from '../src/router_preloader';
+import {RouterTestingModule, SpyNgModuleFactoryLoader} from '../testing';
+
+describe('RouterPreloader', () => {
+  @Component({template: ''})
+  class LazyLoadedCmp {
+  }
+
+  describe('should not load configurations with canLoad guard', () => {
+    @NgModule({
+      declarations: [LazyLoadedCmp],
+      imports: [RouterModule.forChild([{path: 'LoadedModule1', component: LazyLoadedCmp}])]
+    })
+    class LoadedModule {
+    }
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [RouterTestingModule.withRoutes(
+            [{path: 'lazy', loadChildren: 'expected', canLoad: ['someGuard']}])],
+        providers: [{provide: PreloadingStrategy, useExisting: PreloadAllModules}]
+      });
+    });
+
+    it('should work',
+       fakeAsync(inject(
+           [NgModuleFactoryLoader, RouterPreloader, Router],
+           (loader: SpyNgModuleFactoryLoader, preloader: RouterPreloader, router: Router) => {
+             loader.stubbedModules = {expected: LoadedModule};
+
+             preloader.preload().subscribe(() => {});
+
+             tick();
+
+             const c = router.config;
+             expect((c[0] as any)._loadedConfig).not.toBeDefined();
+           })));
+  });
+
+  describe('should preload configurations', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [RouterTestingModule.withRoutes([{path: 'lazy', loadChildren: 'expected'}])],
+        providers: [{provide: PreloadingStrategy, useExisting: PreloadAllModules}]
+      });
+    });
+
+    it('should work',
+       fakeAsync(inject(
+           [NgModuleFactoryLoader, RouterPreloader, Router, NgModuleRef],
+           (loader: SpyNgModuleFactoryLoader, preloader: RouterPreloader, router: Router,
+            testModule: NgModuleRef<any>) => {
+             const events: Array<RouteConfigLoadStart|RouteConfigLoadEnd> = [];
+             @NgModule({
+               declarations: [LazyLoadedCmp],
+               imports:
+                   [RouterModule.forChild([{path: 'LoadedModule2', component: LazyLoadedCmp}])]
+             })
+             class LoadedModule2 {
+             }
+
+             @NgModule({
+               imports:
+                   [RouterModule.forChild([{path: 'LoadedModule1', loadChildren: 'expected2'}])]
+             })
+             class LoadedModule1 {
+             }
+
+             router.events.subscribe(e => {
+               if (e instanceof RouteConfigLoadEnd || e instanceof RouteConfigLoadStart) {
+                 events.push(e);
+               }
+             });
+
+             loader.stubbedModules = {
+               expected: LoadedModule1,
+               expected2: LoadedModule2,
+             };
+
+             preloader.preload().subscribe(() => {});
+
+             tick();
+
+             const c = router.config;
+             expect(c[0].loadChildren).toEqual('expected');
+
+             const loadedConfig: LoadedRouterConfig = (c[0] as any)._loadedConfig !;
+             const module: any = loadedConfig.module;
+             expect(loadedConfig.routes[0].path).toEqual('LoadedModule1');
+             expect(module._parent).toBe(testModule);
+
+             const loadedConfig2: LoadedRouterConfig =
+                 (loadedConfig.routes[0] as any)._loadedConfig !;
+             const module2: any = loadedConfig2.module;
+             expect(loadedConfig2.routes[0].path).toEqual('LoadedModule2');
+             expect(module2._parent).toBe(module);
+
+             expect(events.map(e => e.toString())).toEqual([
+               'RouteConfigLoadStart(path: lazy)',
+               'RouteConfigLoadEnd(path: lazy)',
+               'RouteConfigLoadStart(path: LoadedModule1)',
+               'RouteConfigLoadEnd(path: LoadedModule1)',
+             ]);
+           })));
+  });
+
+  describe('should support modules that have already been loaded', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [RouterTestingModule.withRoutes([{path: 'lazy', loadChildren: 'expected'}])],
+        providers: [{provide: PreloadingStrategy, useExisting: PreloadAllModules}]
+      });
+    });
+
+    it('should work', fakeAsync(inject(
+                          [NgModuleFactoryLoader, RouterPreloader, Router, NgModuleRef, Compiler],
+                          (loader: SpyNgModuleFactoryLoader, preloader: RouterPreloader,
+                           router: Router, testModule: NgModuleRef<any>, compiler: Compiler) => {
+                            @NgModule()
+                            class LoadedModule2 {
+                            }
+
+                            const module2 = compiler.compileModuleSync(LoadedModule2).create(null);
+
+                            @NgModule({
+                              imports: [RouterModule.forChild([
+                                <Route>{
+                                  path: 'LoadedModule2',
+                                  loadChildren: 'no',
+                                  _loadedConfig: {
+                                    routes: [{path: 'LoadedModule3', loadChildren: 'expected3'}],
+                                    module: module2,
+                                  }
+                                },
+                              ])]
+                            })
+                            class LoadedModule1 {
+                            }
+
+                            @NgModule({imports: [RouterModule.forChild([])]})
+                            class LoadedModule3 {
+                            }
+
+                            loader.stubbedModules = {
+                              expected: LoadedModule1,
+                              expected3: LoadedModule3,
+                            };
+
+                            preloader.preload().subscribe(() => {});
+
+                            tick();
+
+                            const c = router.config;
+
+                            const loadedConfig: LoadedRouterConfig = (c[0] as any)._loadedConfig !;
+                            const module: any = loadedConfig.module;
+                            expect(module._parent).toBe(testModule);
+
+                            const loadedConfig2: LoadedRouterConfig =
+                                (loadedConfig.routes[0] as any)._loadedConfig !;
+                            const loadedConfig3: LoadedRouterConfig =
+                                (loadedConfig2.routes[0] as any)._loadedConfig !;
+                            const module3: any = loadedConfig3.module;
+                            expect(module3._parent).toBe(module2);
+                          })));
+  });
+
+  describe('should ignore errors', () => {
+    @NgModule({
+      declarations: [LazyLoadedCmp],
+      imports: [RouterModule.forChild([{path: 'LoadedModule1', component: LazyLoadedCmp}])]
+    })
+    class LoadedModule {
+    }
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [RouterTestingModule.withRoutes([
+          {path: 'lazy1', loadChildren: 'expected1'}, {path: 'lazy2', loadChildren: 'expected2'}
+        ])],
+        providers: [{provide: PreloadingStrategy, useExisting: PreloadAllModules}]
+      });
+    });
+
+    it('should work',
+       fakeAsync(inject(
+           [NgModuleFactoryLoader, RouterPreloader, Router],
+           (loader: SpyNgModuleFactoryLoader, preloader: RouterPreloader, router: Router) => {
+             loader.stubbedModules = {expected2: LoadedModule};
+
+             preloader.preload().subscribe(() => {});
+
+             tick();
+
+             const c = router.config;
+             expect((c[0] as any)._loadedConfig).not.toBeDefined();
+             expect((c[1] as any)._loadedConfig).toBeDefined();
+           })));
+  });
+
+  describe('should copy loaded configs', () => {
+    const configs = [{path: 'LoadedModule1', component: LazyLoadedCmp}];
+    @NgModule({declarations: [LazyLoadedCmp], imports: [RouterModule.forChild(configs)]})
+    class LoadedModule {
+    }
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [RouterTestingModule.withRoutes([{path: 'lazy1', loadChildren: 'expected'}])],
+        providers: [{provide: PreloadingStrategy, useExisting: PreloadAllModules}]
+      });
+    });
+
+    it('should work',
+       fakeAsync(inject(
+           [NgModuleFactoryLoader, RouterPreloader, Router],
+           (loader: SpyNgModuleFactoryLoader, preloader: RouterPreloader, router: Router) => {
+             loader.stubbedModules = {expected: LoadedModule};
+
+             preloader.preload().subscribe(() => {});
+
+             tick();
+
+             const c = router.config as{_loadedConfig: LoadedRouterConfig}[];
+             expect(c[0]._loadedConfig).toBeDefined();
+             expect(c[0]._loadedConfig !.routes).not.toBe(configs);
+             expect(c[0]._loadedConfig !.routes[0]).not.toBe(configs[0]);
+             expect(c[0]._loadedConfig !.routes[0].component).toBe(configs[0].component);
+           })));
+  });
+});
diff --git a/packages/router/test/router_scroller.spec.ts b/packages/router/test/router_scroller.spec.ts
new file mode 100644
index 000000000000..b5565f65f2b1
--- /dev/null
+++ b/packages/router/test/router_scroller.spec.ts
@@ -0,0 +1,168 @@
+/**
+ * @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 {fakeAsync, tick} from '@angular/core/testing';
+import {DefaultUrlSerializer, NavigationEnd, NavigationStart, RouterEvent} from '@angular/router';
+import {Subject} from 'rxjs';
+import {filter, switchMap} from 'rxjs/operators';
+
+import {Scroll} from '../src/events';
+import {RouterScroller} from '../src/router_scroller';
+
+describe('RouterScroller', () => {
+  describe('scroll to top', () => {
+    it('should scroll to the top', () => {
+      const {events, viewportScroller} =
+          createRouterScroller({scrollPositionRestoration: 'top', anchorScrolling: 'disabled'});
+
+      events.next(new NavigationStart(1, '/a'));
+      events.next(new NavigationEnd(1, '/a', '/a'));
+      expect(viewportScroller.scrollToPosition).toHaveBeenCalledWith([0, 0]);
+
+      events.next(new NavigationStart(2, '/a'));
+      events.next(new NavigationEnd(2, '/b', '/b'));
+      expect(viewportScroller.scrollToPosition).toHaveBeenCalledWith([0, 0]);
+
+      events.next(new NavigationStart(3, '/a', 'popstate'));
+      events.next(new NavigationEnd(3, '/a', '/a'));
+      expect(viewportScroller.scrollToPosition).toHaveBeenCalledWith([0, 0]);
+    });
+  });
+
+  describe('scroll to the stored position', () => {
+    it('should scroll to the stored position on popstate', () => {
+      const {events, viewportScroller} =
+          createRouterScroller({scrollPositionRestoration: 'enabled', anchorScrolling: 'disabled'});
+
+      events.next(new NavigationStart(1, '/a'));
+      events.next(new NavigationEnd(1, '/a', '/a'));
+      setScroll(viewportScroller, 10, 100);
+      expect(viewportScroller.scrollToPosition).toHaveBeenCalledWith([0, 0]);
+
+      events.next(new NavigationStart(2, '/b'));
+      events.next(new NavigationEnd(2, '/b', '/b'));
+      setScroll(viewportScroller, 20, 200);
+      expect(viewportScroller.scrollToPosition).toHaveBeenCalledWith([0, 0]);
+
+      events.next(new NavigationStart(3, '/a', 'popstate', {navigationId: 1}));
+      events.next(new NavigationEnd(3, '/a', '/a'));
+      expect(viewportScroller.scrollToPosition).toHaveBeenCalledWith([10, 100]);
+    });
+  });
+
+  describe('anchor scrolling', () => {
+    it('should work (scrollPositionRestoration is disabled)', () => {
+      const {events, viewportScroller} =
+          createRouterScroller({scrollPositionRestoration: 'disabled', anchorScrolling: 'enabled'});
+      events.next(new NavigationStart(1, '/a#anchor'));
+      events.next(new NavigationEnd(1, '/a#anchor', '/a#anchor'));
+      expect(viewportScroller.scrollToAnchor).toHaveBeenCalledWith('anchor');
+
+      events.next(new NavigationStart(2, '/a#anchor2'));
+      events.next(new NavigationEnd(2, '/a#anchor2', '/a#anchor2'));
+      expect(viewportScroller.scrollToAnchor).toHaveBeenCalledWith('anchor2');
+      viewportScroller.scrollToAnchor.calls.reset();
+
+      // we never scroll to anchor when navigating back.
+      events.next(new NavigationStart(3, '/a#anchor', 'popstate'));
+      events.next(new NavigationEnd(3, '/a#anchor', '/a#anchor'));
+      expect(viewportScroller.scrollToAnchor).not.toHaveBeenCalled();
+      expect(viewportScroller.scrollToPosition).not.toHaveBeenCalled();
+    });
+
+    it('should work (scrollPositionRestoration is enabled)', () => {
+      const {events, viewportScroller} =
+          createRouterScroller({scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled'});
+      events.next(new NavigationStart(1, '/a#anchor'));
+      events.next(new NavigationEnd(1, '/a#anchor', '/a#anchor'));
+      expect(viewportScroller.scrollToAnchor).toHaveBeenCalledWith('anchor');
+
+      events.next(new NavigationStart(2, '/a#anchor2'));
+      events.next(new NavigationEnd(2, '/a#anchor2', '/a#anchor2'));
+      expect(viewportScroller.scrollToAnchor).toHaveBeenCalledWith('anchor2');
+      viewportScroller.scrollToAnchor.calls.reset();
+
+      // we never scroll to anchor when navigating back
+      events.next(new NavigationStart(3, '/a#anchor', 'popstate', {navigationId: 1}));
+      events.next(new NavigationEnd(3, '/a#anchor', '/a#anchor'));
+      expect(viewportScroller.scrollToAnchor).not.toHaveBeenCalled();
+      expect(viewportScroller.scrollToPosition).toHaveBeenCalledWith([0, 0]);
+    });
+  });
+
+  describe('extending a scroll service', () => {
+    it('work', fakeAsync(() => {
+         const {events, viewportScroller, router} = createRouterScroller(
+             {scrollPositionRestoration: 'disabled', anchorScrolling: 'disabled'});
+
+         router.events
+             .pipe(filter(e => e instanceof Scroll && !!e.position), switchMap(p => {
+                     // can be any delay (e.g., we can wait for NgRx store to emit an event)
+                     const r = new Subject<any>();
+                     setTimeout(() => {
+                       r.next(p);
+                       r.complete();
+                     }, 1000);
+                     return r;
+                   }))
+             .subscribe((e: Scroll) => { viewportScroller.scrollToPosition(e.position); });
+
+         events.next(new NavigationStart(1, '/a'));
+         events.next(new NavigationEnd(1, '/a', '/a'));
+         setScroll(viewportScroller, 10, 100);
+
+         events.next(new NavigationStart(2, '/b'));
+         events.next(new NavigationEnd(2, '/b', '/b'));
+         setScroll(viewportScroller, 20, 200);
+
+         events.next(new NavigationStart(3, '/c'));
+         events.next(new NavigationEnd(3, '/c', '/c'));
+         setScroll(viewportScroller, 30, 300);
+
+         events.next(new NavigationStart(4, '/a', 'popstate', {navigationId: 1}));
+         events.next(new NavigationEnd(4, '/a', '/a'));
+
+         tick(500);
+         expect(viewportScroller.scrollToPosition).not.toHaveBeenCalled();
+
+         events.next(new NavigationStart(5, '/a', 'popstate', {navigationId: 1}));
+         events.next(new NavigationEnd(5, '/a', '/a'));
+
+         tick(5000);
+         expect(viewportScroller.scrollToPosition).toHaveBeenCalledWith([10, 100]);
+       }));
+  });
+
+
+  function createRouterScroller({scrollPositionRestoration, anchorScrolling}: {
+    scrollPositionRestoration: 'disabled' | 'enabled' | 'top',
+    anchorScrolling: 'disabled' | 'enabled'
+  }) {
+    const events = new Subject<RouterEvent>();
+    const router = <any>{
+      events,
+      parseUrl: (url: any) => new DefaultUrlSerializer().parse(url),
+      triggerEvent: (e: any) => events.next(e)
+    };
+
+    const viewportScroller = jasmine.createSpyObj(
+        'viewportScroller',
+        ['getScrollPosition', 'scrollToPosition', 'scrollToAnchor', 'setHistoryScrollRestoration']);
+    setScroll(viewportScroller, 0, 0);
+
+    const scroller =
+        new RouterScroller(router, viewportScroller, {scrollPositionRestoration, anchorScrolling});
+    scroller.init();
+
+    return {events, viewportScroller, router};
+  }
+
+  function setScroll(viewportScroller: any, x: number, y: number) {
+    viewportScroller.getScrollPosition.and.returnValue([x, y]);
+  }
+});
diff --git a/packages/router/test/router_state.spec.ts b/packages/router/test/router_state.spec.ts
new file mode 100644
index 000000000000..369d4ca26c4e
--- /dev/null
+++ b/packages/router/test/router_state.spec.ts
@@ -0,0 +1,210 @@
+/**
+ * @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 {BehaviorSubject} from 'rxjs';
+
+import {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot, advanceActivatedRoute, equalParamsAndUrlSegments} from '../src/router_state';
+import {Params} from '../src/shared';
+import {UrlSegment} from '../src/url_tree';
+import {TreeNode} from '../src/utils/tree';
+
+describe('RouterState & Snapshot', () => {
+  describe('RouterStateSnapshot', () => {
+    let state: RouterStateSnapshot;
+    let a: ActivatedRouteSnapshot;
+    let b: ActivatedRouteSnapshot;
+    let c: ActivatedRouteSnapshot;
+
+    beforeEach(() => {
+      a = createActivatedRouteSnapshot('a');
+      b = createActivatedRouteSnapshot('b');
+      c = createActivatedRouteSnapshot('c');
+
+      const root = new TreeNode(a, [new TreeNode(b, []), new TreeNode(c, [])]);
+
+      state = new (RouterStateSnapshot as any)('url', root);
+    });
+
+    it('should return first child', () => { expect(state.root.firstChild).toBe(b); });
+
+    it('should return children', () => {
+      const cc = state.root.children;
+      expect(cc[0]).toBe(b);
+      expect(cc[1]).toBe(c);
+    });
+
+    it('should return root', () => {
+      const b = state.root.firstChild !;
+      expect(b.root).toBe(state.root);
+    });
+
+    it('should return parent', () => {
+      const b = state.root.firstChild !;
+      expect(b.parent).toBe(state.root);
+    });
+
+    it('should return path from root', () => {
+      const b = state.root.firstChild !;
+      const p = b.pathFromRoot;
+      expect(p[0]).toBe(state.root);
+      expect(p[1]).toBe(b);
+    });
+  });
+
+  describe('RouterState', () => {
+    let state: RouterState;
+    let a: ActivatedRoute;
+    let b: ActivatedRoute;
+    let c: ActivatedRoute;
+
+    beforeEach(() => {
+      a = createActivatedRoute('a');
+      b = createActivatedRoute('b');
+      c = createActivatedRoute('c');
+
+      const root = new TreeNode(a, [new TreeNode(b, []), new TreeNode(c, [])]);
+
+      state = new (RouterState as any)(root, <any>null);
+    });
+
+    it('should return first child', () => { expect(state.root.firstChild).toBe(b); });
+
+    it('should return children', () => {
+      const cc = state.root.children;
+      expect(cc[0]).toBe(b);
+      expect(cc[1]).toBe(c);
+    });
+
+    it('should return root', () => {
+      const b = state.root.firstChild !;
+      expect(b.root).toBe(state.root);
+    });
+
+    it('should return parent', () => {
+      const b = state.root.firstChild !;
+      expect(b.parent).toBe(state.root);
+    });
+
+    it('should return path from root', () => {
+      const b = state.root.firstChild !;
+      const p = b.pathFromRoot;
+      expect(p[0]).toBe(state.root);
+      expect(p[1]).toBe(b);
+    });
+  });
+
+  describe('equalParamsAndUrlSegments', () => {
+    function createSnapshot(params: Params, url: UrlSegment[]): ActivatedRouteSnapshot {
+      const snapshot = new (ActivatedRouteSnapshot as any)(
+          url, params, <any>null, <any>null, <any>null, <any>null, <any>null, <any>null, <any>null,
+          -1, null !);
+      snapshot._routerState = new (RouterStateSnapshot as any)('', new TreeNode(snapshot, []));
+      return snapshot;
+    }
+
+    function createSnapshotPairWithParent(
+        params: [Params, Params], parentParams: [Params, Params],
+        urls: [string, string]): [ActivatedRouteSnapshot, ActivatedRouteSnapshot] {
+      const snapshot1 = createSnapshot(params[0], []);
+      const snapshot2 = createSnapshot(params[1], []);
+
+      const snapshot1Parent = createSnapshot(parentParams[0], [new UrlSegment(urls[0], {})]);
+      const snapshot2Parent = createSnapshot(parentParams[1], [new UrlSegment(urls[1], {})]);
+
+      (snapshot1 as any)._routerState = new (RouterStateSnapshot as any)(
+          '', new TreeNode(snapshot1Parent, [new TreeNode(snapshot1, [])]));
+      (snapshot2 as any)._routerState = new (RouterStateSnapshot as any)(
+          '', new TreeNode(snapshot2Parent, [new TreeNode(snapshot2, [])]));
+
+      return [snapshot1, snapshot2];
+    }
+
+    it('should return false when params are different', () => {
+      expect(equalParamsAndUrlSegments(createSnapshot({a: '1'}, []), createSnapshot({a: '2'}, [])))
+          .toEqual(false);
+    });
+
+    it('should return false when urls are different', () => {
+      expect(equalParamsAndUrlSegments(
+                 createSnapshot({a: '1'}, [new UrlSegment('a', {})]),
+                 createSnapshot({a: '1'}, [new UrlSegment('b', {})])))
+          .toEqual(false);
+    });
+
+    it('should return true othewise', () => {
+      expect(equalParamsAndUrlSegments(
+                 createSnapshot({a: '1'}, [new UrlSegment('a', {})]),
+                 createSnapshot({a: '1'}, [new UrlSegment('a', {})])))
+          .toEqual(true);
+    });
+
+    it('should return false when upstream params are different', () => {
+      const [snapshot1, snapshot2] =
+          createSnapshotPairWithParent([{a: '1'}, {a: '1'}], [{b: '1'}, {c: '1'}], ['a', 'a']);
+
+      expect(equalParamsAndUrlSegments(snapshot1, snapshot2)).toEqual(false);
+    });
+
+    it('should return false when upstream urls are different', () => {
+      const [snapshot1, snapshot2] =
+          createSnapshotPairWithParent([{a: '1'}, {a: '1'}], [{b: '1'}, {b: '1'}], ['a', 'b']);
+
+      expect(equalParamsAndUrlSegments(snapshot1, snapshot2)).toEqual(false);
+    });
+
+    it('should return true when upstream urls and params are equal', () => {
+      const [snapshot1, snapshot2] =
+          createSnapshotPairWithParent([{a: '1'}, {a: '1'}], [{b: '1'}, {b: '1'}], ['a', 'a']);
+
+      expect(equalParamsAndUrlSegments(snapshot1, snapshot2)).toEqual(true);
+    });
+  });
+
+  describe('advanceActivatedRoute', () => {
+
+    let route: ActivatedRoute;
+
+    beforeEach(() => { route = createActivatedRoute('a'); });
+
+    function createSnapshot(params: Params, url: UrlSegment[]): ActivatedRouteSnapshot {
+      const queryParams = {};
+      const fragment = '';
+      const data = {};
+      const snapshot = new (ActivatedRouteSnapshot as any)(
+          url, params, queryParams, fragment, data, <any>null, <any>null, <any>null, <any>null, -1,
+          null !);
+      const state = new (RouterStateSnapshot as any)('', new TreeNode(snapshot, []));
+      snapshot._routerState = state;
+      return snapshot;
+    }
+
+    it('should call change observers', () => {
+      const firstPlace = createSnapshot({a: '1'}, []);
+      const secondPlace = createSnapshot({a: '2'}, []);
+      route.snapshot = firstPlace;
+      (route as any)._futureSnapshot = secondPlace;
+
+      let hasSeenDataChange = false;
+      route.data.forEach((data) => { hasSeenDataChange = true; });
+      advanceActivatedRoute(route);
+      expect(hasSeenDataChange).toEqual(true);
+    });
+  });
+});
+
+function createActivatedRouteSnapshot(cmp: string) {
+  return new (ActivatedRouteSnapshot as any)(
+      <any>null, <any>null, <any>null, <any>null, <any>null, <any>null, <any>cmp, <any>null,
+      <any>null, -1, null !);
+}
+
+function createActivatedRoute(cmp: string) {
+  return new (ActivatedRoute as any)(
+      new BehaviorSubject([new UrlSegment('', {})]), new BehaviorSubject({}), <any>null, <any>null,
+      new BehaviorSubject({}), <any>null, <any>cmp, <any>null);
+}
diff --git a/packages/router/test/shared.spec.ts b/packages/router/test/shared.spec.ts
new file mode 100644
index 000000000000..f223edac7a91
--- /dev/null
+++ b/packages/router/test/shared.spec.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
+ */
+
+import {ParamMap, convertToParamMap} from '../src/shared';
+
+describe('ParamsMap', () => {
+  it('should returns whether a parameter is present', () => {
+    const map = convertToParamMap({single: 's', multiple: ['m1', 'm2']});
+    expect(map.has('single')).toEqual(true);
+    expect(map.has('multiple')).toEqual(true);
+    expect(map.has('not here')).toEqual(false);
+  });
+
+  it('should returns the name of the parameters', () => {
+    const map = convertToParamMap({single: 's', multiple: ['m1', 'm2']});
+    expect(map.keys).toEqual(['single', 'multiple']);
+  });
+
+  it('should support single valued parameters', () => {
+    const map = convertToParamMap({single: 's', multiple: ['m1', 'm2']});
+    expect(map.get('single')).toEqual('s');
+    expect(map.get('multiple')).toEqual('m1');
+  });
+
+  it('should support multiple valued parameters', () => {
+    const map = convertToParamMap({single: 's', multiple: ['m1', 'm2']});
+    expect(map.getAll('single')).toEqual(['s']);
+    expect(map.getAll('multiple')).toEqual(['m1', 'm2']);
+  });
+
+  it('should return `null` when a single valued element is absent', () => {
+    const map = convertToParamMap({});
+    expect(map.get('name')).toEqual(null);
+  });
+
+  it('should return `[]` when a multiple valued element is absent', () => {
+    const map = convertToParamMap({});
+    expect(map.getAll('name')).toEqual([]);
+  });
+});
\ No newline at end of file
diff --git a/packages/router/test/spy_ng_module_factory_loader.spec.ts b/packages/router/test/spy_ng_module_factory_loader.spec.ts
new file mode 100644
index 000000000000..076f5c2a9f52
--- /dev/null
+++ b/packages/router/test/spy_ng_module_factory_loader.spec.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
+ */
+
+import {fakeAsync, tick} from '@angular/core/testing';
+import {SpyNgModuleFactoryLoader} from '../testing/src/router_testing_module';
+
+describe('SpyNgModuleFactoryLoader', () => {
+  it('should invoke the compiler when the setter is called', () => {
+    const expected = Promise.resolve('returned');
+    const compiler: any = {compileModuleAsync: () => {}};
+    spyOn(compiler, 'compileModuleAsync').and.returnValue(expected);
+
+    const r = new SpyNgModuleFactoryLoader(<any>compiler);
+    r.stubbedModules = {'one': 'someModule'};
+
+    expect(compiler.compileModuleAsync).toHaveBeenCalledWith('someModule');
+    expect(r.stubbedModules['one']).toBe(expected);
+  });
+
+  it('should return the created promise', () => {
+    const expected: any = Promise.resolve('returned');
+    const compiler: any = {compileModuleAsync: () => expected};
+
+    const r = new SpyNgModuleFactoryLoader(<any>compiler);
+    r.stubbedModules = {'one': 'someModule'};
+
+    expect(r.load('one')).toBe(expected);
+  });
+
+  it('should return a rejected promise when given an invalid path', fakeAsync(() => {
+       const r = new SpyNgModuleFactoryLoader(<any>null);
+
+       let error: any = null;
+       r.load('two').catch((e: any) => error = e);
+
+       tick();
+
+       expect(error).toEqual(new Error('Cannot find module two'));
+     }));
+});
diff --git a/packages/router/test/url_serializer.spec.ts b/packages/router/test/url_serializer.spec.ts
new file mode 100644
index 000000000000..1fe0cf3b2663
--- /dev/null
+++ b/packages/router/test/url_serializer.spec.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 {PRIMARY_OUTLET} from '../src/shared';
+import {DefaultUrlSerializer, UrlSegmentGroup, encodeUriFragment, encodeUriQuery, encodeUriSegment, serializePath} from '../src/url_tree';
+
+describe('url serializer', () => {
+  const url = new DefaultUrlSerializer();
+
+  it('should parse the root url', () => {
+    const tree = url.parse('/');
+    expectSegment(tree.root, '');
+    expect(url.serialize(tree)).toEqual('/');
+  });
+
+  it('should parse non-empty urls', () => {
+    const tree = url.parse('one/two');
+    expectSegment(tree.root.children[PRIMARY_OUTLET], 'one/two');
+    expect(url.serialize(tree)).toEqual('/one/two');
+  });
+
+  it('should parse multiple secondary segments', () => {
+    const tree = url.parse('/one/two(left:three//right:four)');
+
+    expectSegment(tree.root.children[PRIMARY_OUTLET], 'one/two');
+    expectSegment(tree.root.children['left'], 'three');
+    expectSegment(tree.root.children['right'], 'four');
+
+    expect(url.serialize(tree)).toEqual('/one/two(left:three//right:four)');
+  });
+
+  it('should parse top-level nodes with only secondary segment', () => {
+    const tree = url.parse('/(left:one)');
+
+    expect(tree.root.numberOfChildren).toEqual(1);
+    expectSegment(tree.root.children['left'], 'one');
+
+    expect(url.serialize(tree)).toEqual('/(left:one)');
+  });
+
+  it('should parse nodes with only secondary segment', () => {
+    const tree = url.parse('/one/(left:two)');
+
+    const one = tree.root.children[PRIMARY_OUTLET];
+    expectSegment(one, 'one', true);
+    expect(one.numberOfChildren).toEqual(1);
+    expectSegment(one.children['left'], 'two');
+
+    expect(url.serialize(tree)).toEqual('/one/(left:two)');
+  });
+
+  it('should not parse empty path segments with params', () => {
+    expect(() => url.parse('/one/two/(;a=1//right:;b=2)'))
+        .toThrowError(/Empty path url segment cannot have parameters/);
+  });
+
+  it('should parse scoped secondary segments', () => {
+    const tree = url.parse('/one/(two//left:three)');
+
+    const primary = tree.root.children[PRIMARY_OUTLET];
+    expectSegment(primary, 'one', true);
+
+    expectSegment(primary.children[PRIMARY_OUTLET], 'two');
+    expectSegment(primary.children['left'], 'three');
+
+    expect(url.serialize(tree)).toEqual('/one/(two//left:three)');
+  });
+
+  it('should parse scoped secondary segments with unscoped ones', () => {
+    const tree = url.parse('/one/(two//left:three)(right:four)');
+
+    const primary = tree.root.children[PRIMARY_OUTLET];
+    expectSegment(primary, 'one', true);
+    expectSegment(primary.children[PRIMARY_OUTLET], 'two');
+    expectSegment(primary.children['left'], 'three');
+    expectSegment(tree.root.children['right'], 'four');
+
+    expect(url.serialize(tree)).toEqual('/one/(two//left:three)(right:four)');
+  });
+
+  it('should parse secondary segments that have children', () => {
+    const tree = url.parse('/one(left:two/three)');
+
+    expectSegment(tree.root.children[PRIMARY_OUTLET], 'one');
+    expectSegment(tree.root.children['left'], 'two/three');
+
+    expect(url.serialize(tree)).toEqual('/one(left:two/three)');
+  });
+
+  it('should parse an empty secondary segment group', () => {
+    const tree = url.parse('/one()');
+
+    expectSegment(tree.root.children[PRIMARY_OUTLET], 'one');
+
+    expect(url.serialize(tree)).toEqual('/one');
+  });
+
+  it('should parse key-value matrix params', () => {
+    const tree = url.parse('/one;a=11a;b=11b(left:two;c=22//right:three;d=33)');
+
+    expectSegment(tree.root.children[PRIMARY_OUTLET], 'one;a=11a;b=11b');
+    expectSegment(tree.root.children['left'], 'two;c=22');
+    expectSegment(tree.root.children['right'], 'three;d=33');
+
+    expect(url.serialize(tree)).toEqual('/one;a=11a;b=11b(left:two;c=22//right:three;d=33)');
+  });
+
+  it('should parse key only matrix params', () => {
+    const tree = url.parse('/one;a');
+
+    expectSegment(tree.root.children[PRIMARY_OUTLET], 'one;a=');
+
+    expect(url.serialize(tree)).toEqual('/one;a=');
+  });
+
+  it('should parse query params (root)', () => {
+    const tree = url.parse('/?a=1&b=2');
+    expect(tree.root.children).toEqual({});
+    expect(tree.queryParams).toEqual({a: '1', b: '2'});
+    expect(url.serialize(tree)).toEqual('/?a=1&b=2');
+  });
+
+  it('should parse query params', () => {
+    const tree = url.parse('/one?a=1&b=2');
+    expect(tree.queryParams).toEqual({a: '1', b: '2'});
+  });
+
+  it('should parse query params when with parenthesis', () => {
+    const tree = url.parse('/one?a=(11)&b=(22)');
+    expect(tree.queryParams).toEqual({a: '(11)', b: '(22)'});
+  });
+
+  it('should parse query params when with slashes', () => {
+    const tree = url.parse('/one?a=1/2&b=3/4');
+    expect(tree.queryParams).toEqual({a: '1/2', b: '3/4'});
+  });
+
+  it('should parse key only query params', () => {
+    const tree = url.parse('/one?a');
+    expect(tree.queryParams).toEqual({a: ''});
+  });
+
+  it('should parse a value-empty query param', () => {
+    const tree = url.parse('/one?a=');
+    expect(tree.queryParams).toEqual({a: ''});
+  });
+
+  it('should parse value-empty query params', () => {
+    const tree = url.parse('/one?a=&b=');
+    expect(tree.queryParams).toEqual({a: '', b: ''});
+  });
+
+  it('should serializer query params', () => {
+    const tree = url.parse('/one?a');
+    expect(url.serialize(tree)).toEqual('/one?a=');
+  });
+
+  it('should handle multiple query params of the same name into an array', () => {
+    const tree = url.parse('/one?a=foo&a=bar&a=swaz');
+    expect(tree.queryParams).toEqual({a: ['foo', 'bar', 'swaz']});
+    expect(tree.queryParamMap.get('a')).toEqual('foo');
+    expect(tree.queryParamMap.getAll('a')).toEqual(['foo', 'bar', 'swaz']);
+    expect(url.serialize(tree)).toEqual('/one?a=foo&a=bar&a=swaz');
+  });
+
+  it('should parse fragment', () => {
+    const tree = url.parse('/one#two');
+    expect(tree.fragment).toEqual('two');
+    expect(url.serialize(tree)).toEqual('/one#two');
+  });
+
+  it('should parse fragment (root)', () => {
+    const tree = url.parse('/#one');
+    expectSegment(tree.root, '');
+    expect(url.serialize(tree)).toEqual('/#one');
+  });
+
+  it('should parse empty fragment', () => {
+    const tree = url.parse('/one#');
+    expect(tree.fragment).toEqual('');
+    expect(url.serialize(tree)).toEqual('/one#');
+  });
+
+  describe('encoding/decoding', () => {
+    it('should encode/decode path segments and parameters', () => {
+      const u =
+          `/${encodeUriSegment("one two")};${encodeUriSegment("p 1")}=${encodeUriSegment("v 1")};${encodeUriSegment("p 2")}=${encodeUriSegment("v 2")}`;
+      const tree = url.parse(u);
+
+      expect(tree.root.children[PRIMARY_OUTLET].segments[0].path).toEqual('one two');
+      expect(tree.root.children[PRIMARY_OUTLET].segments[0].parameters)
+          .toEqual({['p 1']: 'v 1', ['p 2']: 'v 2'});
+      expect(url.serialize(tree)).toEqual(u);
+    });
+
+    it('should encode/decode "slash" in path segments and parameters', () => {
+      const u =
+          `/${encodeUriSegment("one/two")};${encodeUriSegment("p/1")}=${encodeUriSegment("v/1")}/three`;
+      const tree = url.parse(u);
+      const segment = tree.root.children[PRIMARY_OUTLET].segments[0];
+      expect(segment.path).toEqual('one/two');
+      expect(segment.parameters).toEqual({'p/1': 'v/1'});
+      expect(segment.parameterMap.get('p/1')).toEqual('v/1');
+      expect(segment.parameterMap.getAll('p/1')).toEqual(['v/1']);
+      expect(url.serialize(tree)).toEqual(u);
+    });
+
+    it('should encode/decode query params', () => {
+      const u =
+          `/one?${encodeUriQuery("p 1")}=${encodeUriQuery("v 1")}&${encodeUriQuery("p 2")}=${encodeUriQuery("v 2")}`;
+      const tree = url.parse(u);
+
+      expect(tree.queryParams).toEqual({'p 1': 'v 1', 'p 2': 'v 2'});
+      expect(tree.queryParamMap.get('p 1')).toEqual('v 1');
+      expect(tree.queryParamMap.get('p 2')).toEqual('v 2');
+      expect(url.serialize(tree)).toEqual(u);
+    });
+
+    it('should decode spaces in query as %20 or +', () => {
+      const u1 = `/one?foo=bar baz`;
+      const u2 = `/one?foo=bar+baz`;
+      const u3 = `/one?foo=bar%20baz`;
+
+      const u1p = url.parse(u1);
+      const u2p = url.parse(u2);
+      const u3p = url.parse(u3);
+
+      expect(url.serialize(u1p)).toBe(url.serialize(u2p));
+      expect(url.serialize(u2p)).toBe(url.serialize(u3p));
+      expect(u1p.queryParamMap.get('foo')).toBe('bar baz');
+      expect(u2p.queryParamMap.get('foo')).toBe('bar baz');
+      expect(u3p.queryParamMap.get('foo')).toBe('bar baz');
+    });
+
+    it('should encode query params leaving sub-delimiters intact', () => {
+      const percentChars = '/?#&+=[] ';
+      const percentCharsEncoded = '%2F%3F%23%26%2B%3D%5B%5D%20';
+      const intactChars = '!$\'()*,;:';
+      const params = percentChars + intactChars;
+      const paramsEncoded = percentCharsEncoded + intactChars;
+      const mixedCaseString = 'sTrInG';
+
+      expect(percentCharsEncoded).toEqual(encodeUriQuery(percentChars));
+      expect(intactChars).toEqual(encodeUriQuery(intactChars));
+      // Verify it replaces repeated characters correctly
+      expect(paramsEncoded + paramsEncoded).toEqual(encodeUriQuery(params + params));
+      // Verify it doesn't change the case of alpha characters
+      expect(mixedCaseString + paramsEncoded).toEqual(encodeUriQuery(mixedCaseString + params));
+    });
+
+    it('should encode/decode fragment', () => {
+      const u = `/one#${encodeUriFragment('one two=three four')}`;
+      const tree = url.parse(u);
+
+      expect(tree.fragment).toEqual('one two=three four');
+      expect(url.serialize(tree)).toEqual('/one#one%20two=three%20four');
+    });
+  });
+
+  describe('special character encoding/decoding', () => {
+
+    // Tests specific to https://github.com/angular/angular/issues/10280
+    it('should parse encoded parens in matrix params', () => {
+      const auxRoutesUrl = '/abc;foo=(other:val)';
+      const fooValueUrl = '/abc;foo=%28other:val%29';
+
+      const auxParsed = url.parse(auxRoutesUrl).root;
+      const fooParsed = url.parse(fooValueUrl).root;
+
+
+      // Test base case
+      expect(auxParsed.children[PRIMARY_OUTLET].segments.length).toBe(1);
+      expect(auxParsed.children[PRIMARY_OUTLET].segments[0].path).toBe('abc');
+      expect(auxParsed.children[PRIMARY_OUTLET].segments[0].parameters).toEqual({foo: ''});
+      expect(auxParsed.children['other'].segments.length).toBe(1);
+      expect(auxParsed.children['other'].segments[0].path).toBe('val');
+
+      // Confirm matrix params are URL decoded
+      expect(fooParsed.children[PRIMARY_OUTLET].segments.length).toBe(1);
+      expect(fooParsed.children[PRIMARY_OUTLET].segments[0].path).toBe('abc');
+      expect(fooParsed.children[PRIMARY_OUTLET].segments[0].parameters).toEqual({
+        foo: '(other:val)'
+      });
+    });
+
+    it('should serialize encoded parens in matrix params', () => {
+      const testUrl = '/abc;foo=%28one%29';
+
+      const parsed = url.parse(testUrl);
+
+      expect(url.serialize(parsed)).toBe('/abc;foo=%28one%29');
+    });
+
+    it('should not serialize encoded parens in query params', () => {
+      const testUrl = '/abc?foo=%28one%29';
+
+      const parsed = url.parse(testUrl);
+
+      expect(parsed.queryParams).toEqual({foo: '(one)'});
+
+      expect(url.serialize(parsed)).toBe('/abc?foo=(one)');
+    });
+
+    // Test special characters in general
+
+    // From http://www.ietf.org/rfc/rfc3986.txt
+    const unreserved = `abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~`;
+
+    it('should encode a minimal set of special characters in queryParams', () => {
+      const notEncoded = unreserved + `:@!$'*,();`;
+      const encode = ` +%&=#[]/?`;
+      const encoded = `%20%2B%25%26%3D%23%5B%5D%2F%3F`;
+
+      const parsed = url.parse('/foo');
+
+      parsed.queryParams = {notEncoded, encode};
+
+      expect(url.serialize(parsed)).toBe(`/foo?notEncoded=${notEncoded}&encode=${encoded}`);
+    });
+
+    it('should encode a minimal set of special characters in fragment', () => {
+      const notEncoded = unreserved + `:@!$'*,();+&=#/?`;
+      const encode = ' %<>`"[]';
+      const encoded = `%20%25%3C%3E%60%22%5B%5D`;
+
+      const parsed = url.parse('/foo');
+
+      parsed.fragment = notEncoded + encode;
+
+      expect(url.serialize(parsed)).toBe(`/foo#${notEncoded}${encoded}`);
+    });
+
+    it('should encode minimal special characters plus parens and semi-colon in matrix params',
+       () => {
+         const notEncoded = unreserved + `:@!$'*,&`;
+         const encode = ` /%=#()[];?+`;
+         const encoded = `%20%2F%25%3D%23%28%29%5B%5D%3B%3F%2B`;
+
+         const parsed = url.parse('/foo');
+
+         parsed.root.children[PRIMARY_OUTLET].segments[0].parameters = {notEncoded, encode};
+
+         expect(url.serialize(parsed)).toBe(`/foo;notEncoded=${notEncoded};encode=${encoded}`);
+       });
+
+    it('should encode special characters in the path the same as matrix params', () => {
+      const notEncoded = unreserved + `:@!$'*,&`;
+      const encode = ` /%=#()[];?+`;
+      const encoded = `%20%2F%25%3D%23%28%29%5B%5D%3B%3F%2B`;
+
+      const parsed = url.parse('/foo');
+
+      parsed.root.children[PRIMARY_OUTLET].segments[0].path = notEncoded + encode;
+
+      expect(url.serialize(parsed)).toBe(`/${notEncoded}${encoded}`);
+    });
+
+    it('should correctly encode ampersand in segments', () => {
+      const testUrl = '/parent&child';
+
+      const parsed = url.parse(testUrl);
+
+      expect(url.serialize(parsed)).toBe(testUrl);
+    });
+  });
+
+  describe('error handling', () => {
+    it('should throw when invalid characters inside children', () => {
+      expect(() => url.parse('/one/(left#one)'))
+          .toThrowError('Cannot parse url \'/one/(left#one)\'');
+    });
+
+    it('should throw when missing closing )', () => {
+      expect(() => url.parse('/one/(left')).toThrowError('Cannot parse url \'/one/(left\'');
+    });
+  });
+});
+
+function expectSegment(
+    segment: UrlSegmentGroup, expected: string, hasChildren: boolean = false): void {
+  if (segment.segments.filter(s => s.path === '').length > 0) {
+    throw new Error(`UrlSegments cannot be empty ${segment.segments}`);
+  }
+  const p = segment.segments.map(p => serializePath(p)).join('/');
+  expect(p).toEqual(expected);
+  expect(Object.keys(segment.children).length > 0).toEqual(hasChildren);
+}
diff --git a/packages/router/test/url_tree.spec.ts b/packages/router/test/url_tree.spec.ts
new file mode 100644
index 000000000000..2b46cb1add2c
--- /dev/null
+++ b/packages/router/test/url_tree.spec.ts
@@ -0,0 +1,149 @@
+/**
+ * @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 {DefaultUrlSerializer, containsTree} from '../src/url_tree';
+
+describe('UrlTree', () => {
+  const serializer = new DefaultUrlSerializer();
+
+  describe('DefaultUrlSerializer', () => {
+    let serializer: DefaultUrlSerializer;
+
+    beforeEach(() => { serializer = new DefaultUrlSerializer(); });
+
+    it('should parse query parameters', () => {
+      const tree = serializer.parse('/path/to?k=v&k/(a;b)=c');
+      expect(tree.queryParams).toEqual({
+        'k': 'v',
+        'k/(a;b)': 'c',
+      });
+    });
+  });
+
+  describe('containsTree', () => {
+    describe('exact = true', () => {
+      it('should return true when two tree are the same', () => {
+        const url = '/one/(one//left:three)(right:four)';
+        const t1 = serializer.parse(url);
+        const t2 = serializer.parse(url);
+        expect(containsTree(t1, t2, true)).toBe(true);
+        expect(containsTree(t2, t1, true)).toBe(true);
+      });
+
+      it('should return true when queryParams are the same', () => {
+        const t1 = serializer.parse('/one/two?test=1&page=5');
+        const t2 = serializer.parse('/one/two?test=1&page=5');
+        expect(containsTree(t1, t2, true)).toBe(true);
+      });
+
+      it('should return false when queryParams are not the same', () => {
+        const t1 = serializer.parse('/one/two?test=1&page=5');
+        const t2 = serializer.parse('/one/two?test=1');
+        expect(containsTree(t1, t2, true)).toBe(false);
+      });
+
+      it('should return false when containee is missing queryParams', () => {
+        const t1 = serializer.parse('/one/two?page=5');
+        const t2 = serializer.parse('/one/two');
+        expect(containsTree(t1, t2, true)).toBe(false);
+      });
+
+      it('should return false when paths are not the same', () => {
+        const t1 = serializer.parse('/one/two(right:three)');
+        const t2 = serializer.parse('/one/two2(right:three)');
+        expect(containsTree(t1, t2, true)).toBe(false);
+      });
+
+      it('should return false when container has an extra child', () => {
+        const t1 = serializer.parse('/one/two(right:three)');
+        const t2 = serializer.parse('/one/two');
+        expect(containsTree(t1, t2, true)).toBe(false);
+      });
+
+      it('should return false when containee has an extra child', () => {
+        const t1 = serializer.parse('/one/two');
+        const t2 = serializer.parse('/one/two(right:three)');
+        expect(containsTree(t1, t2, true)).toBe(false);
+      });
+    });
+
+    describe('exact = false', () => {
+      it('should return true when containee is missing a segment', () => {
+        const t1 = serializer.parse('/one/(two//left:three)(right:four)');
+        const t2 = serializer.parse('/one/(two//left:three)');
+        expect(containsTree(t1, t2, false)).toBe(true);
+      });
+
+      it('should return true when containee is missing some paths', () => {
+        const t1 = serializer.parse('/one/two/three');
+        const t2 = serializer.parse('/one/two');
+        expect(containsTree(t1, t2, false)).toBe(true);
+      });
+
+      it('should return true container has its paths split into multiple segments', () => {
+        const t1 = serializer.parse('/one/(two//left:three)');
+        const t2 = serializer.parse('/one/two');
+        expect(containsTree(t1, t2, false)).toBe(true);
+      });
+
+      it('should return false when containee has extra segments', () => {
+        const t1 = serializer.parse('/one/two');
+        const t2 = serializer.parse('/one/(two//left:three)');
+        expect(containsTree(t1, t2, false)).toBe(false);
+      });
+
+      it('should return false containee has segments that the container does not have', () => {
+        const t1 = serializer.parse('/one/(two//left:three)');
+        const t2 = serializer.parse('/one/(two//right:four)');
+        expect(containsTree(t1, t2, false)).toBe(false);
+      });
+
+      it('should return false when containee has extra paths', () => {
+        const t1 = serializer.parse('/one');
+        const t2 = serializer.parse('/one/two');
+        expect(containsTree(t1, t2, false)).toBe(false);
+      });
+
+      it('should return true when queryParams are the same', () => {
+        const t1 = serializer.parse('/one/two?test=1&page=5');
+        const t2 = serializer.parse('/one/two?test=1&page=5');
+        expect(containsTree(t1, t2, false)).toBe(true);
+      });
+
+      it('should return true when container contains containees queryParams', () => {
+        const t1 = serializer.parse('/one/two?test=1&u=5');
+        const t2 = serializer.parse('/one/two?u=5');
+        expect(containsTree(t1, t2, false)).toBe(true);
+      });
+
+      it('should return true when containee does not have queryParams', () => {
+        const t1 = serializer.parse('/one/two?page=5');
+        const t2 = serializer.parse('/one/two');
+        expect(containsTree(t1, t2, false)).toBe(true);
+      });
+
+      it('should return false when containee has but container does not have queryParams', () => {
+        const t1 = serializer.parse('/one/two');
+        const t2 = serializer.parse('/one/two?page=1');
+        expect(containsTree(t1, t2, false)).toBe(false);
+      });
+
+      it('should return false when containee has different queryParams', () => {
+        const t1 = serializer.parse('/one/two?page=5');
+        const t2 = serializer.parse('/one/two?test=1');
+        expect(containsTree(t1, t2, false)).toBe(false);
+      });
+
+      it('should return false when containee has more queryParams than container', () => {
+        const t1 = serializer.parse('/one/two?page=5');
+        const t2 = serializer.parse('/one/two?page=5&test=1');
+        expect(containsTree(t1, t2, false)).toBe(false);
+      });
+    });
+  });
+});
diff --git a/packages/router/test/utils/tree.spec.ts b/packages/router/test/utils/tree.spec.ts
new file mode 100644
index 000000000000..a8260fec089c
--- /dev/null
+++ b/packages/router/test/utils/tree.spec.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 {Tree, TreeNode} from '../../src/utils/tree';
+
+describe('tree', () => {
+  it('should return the root of the tree', () => {
+    const t = new Tree<any>(new TreeNode<number>(1, [])) as any;
+    expect(t.root).toEqual(1);
+  });
+
+  it('should return the parent of a node', () => {
+    const t = new Tree<any>(new TreeNode<number>(1, [new TreeNode<number>(2, [])])) as any;
+    expect(t.parent(1)).toEqual(null);
+    expect(t.parent(2)).toEqual(1);
+  });
+
+  it('should return the parent of a node (second child)', () => {
+    const t = new Tree<any>(
+        new TreeNode<number>(1, [new TreeNode<number>(2, []), new TreeNode<number>(3, [])])) as any;
+    expect(t.parent(1)).toEqual(null);
+    expect(t.parent(3)).toEqual(1);
+  });
+
+  it('should return the children of a node', () => {
+    const t = new Tree<any>(new TreeNode<number>(1, [new TreeNode<number>(2, [])])) as any;
+    expect(t.children(1)).toEqual([2]);
+    expect(t.children(2)).toEqual([]);
+  });
+
+  it('should return the first child of a node', () => {
+    const t = new Tree<any>(new TreeNode<number>(1, [new TreeNode<number>(2, [])])) as any;
+    expect(t.firstChild(1)).toEqual(2);
+    expect(t.firstChild(2)).toEqual(null);
+  });
+
+  it('should return the siblings of a node', () => {
+    const t = new Tree<any>(
+        new TreeNode<number>(1, [new TreeNode<number>(2, []), new TreeNode<number>(3, [])])) as any;
+    expect(t.siblings(2)).toEqual([3]);
+    expect(t.siblings(1)).toEqual([]);
+  });
+
+  it('should return the path to the root', () => {
+    const t = new Tree<any>(new TreeNode<number>(1, [new TreeNode<number>(2, [])])) as any;
+    expect(t.pathFromRoot(2)).toEqual([1, 2]);
+  });
+});
diff --git a/packages/router/testing/BUILD.bazel b/packages/router/testing/BUILD.bazel
new file mode 100644
index 000000000000..51e0b17ee60d
--- /dev/null
+++ b/packages/router/testing/BUILD.bazel
@@ -0,0 +1,17 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    srcs = glob(["**/*.ts"]),
+    module_name = "@angular/router/testing",
+    deps = [
+        "//packages/common",
+        "//packages/common/testing",
+        "//packages/core",
+        "//packages/router",
+    ],
+)
diff --git a/packages/router/testing/index.ts b/packages/router/testing/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/router/testing/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';
diff --git a/packages/router/testing/package.json b/packages/router/testing/package.json
new file mode 100644
index 000000000000..80a08ba3aea6
--- /dev/null
+++ b/packages/router/testing/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/router/testing",
+  "typings": "./testing.d.ts",
+  "main": "../bundles/router-testing.umd.js",
+  "module": "../fesm5/testing.js",
+  "es2015": "../fesm2015/testing.js",
+  "esm5": "../esm5/testing/testing.js",
+  "esm2015": "../esm2015/testing/testing.js",
+  "fesm5": "../fesm5/testing.js",
+  "fesm2015": "../fesm2015/testing.js"
+}
diff --git a/packages/router/testing/public_api.ts b/packages/router/testing/public_api.ts
new file mode 100644
index 000000000000..e95d9f8ef071
--- /dev/null
+++ b/packages/router/testing/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/testing';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/router/testing/rollup.config.js b/packages/router/testing/rollup.config.js
new file mode 100644
index 000000000000..2cddeb51a011
--- /dev/null
+++ b/packages/router/testing/rollup.config.js
@@ -0,0 +1,30 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+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'
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/router/fesm5/testing.js',
+  dest: '../../../dist/packages-dist/router/bundles/router-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/router/testing'},
+  moduleName: 'ng.router.testing',
+  plugins: [resolve(), sourcemaps()],
+  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
new file mode 100644
index 000000000000..4f2935a48312
--- /dev/null
+++ b/packages/router/testing/src/router_testing_module.ts
@@ -0,0 +1,193 @@
+/**
+ * @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, LocationStrategy} from '@angular/common';
+import {MockLocationStrategy, SpyLocation} from '@angular/common/testing';
+import {Compiler, Injectable, Injector, ModuleWithProviders, NgModule, NgModuleFactory, NgModuleFactoryLoader, Optional} from '@angular/core';
+import {ChildrenOutletContexts, ExtraOptions, NoPreloading, PreloadingStrategy, ROUTER_CONFIGURATION, ROUTES, Route, Router, RouterModule, Routes, UrlHandlingStrategy, UrlSerializer, provideRoutes, ɵROUTER_PROVIDERS as ROUTER_PROVIDERS, ɵflatten as flatten} from '@angular/router';
+
+
+
+/**
+ * @description
+ *
+ * Allows to simulate the loading of ng modules in tests.
+ *
+ * ```
+ * const loader = TestBed.get(NgModuleFactoryLoader);
+ *
+ * @Component({template: 'lazy-loaded'})
+ * class LazyLoadedComponent {}
+ * @NgModule({
+ *   declarations: [LazyLoadedComponent],
+ *   imports: [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])]
+ * })
+ *
+ * class LoadedModule {}
+ *
+ * // sets up stubbedModules
+ * loader.stubbedModules = {lazyModule: LoadedModule};
+ *
+ * router.resetConfig([
+ *   {path: 'lazy', loadChildren: 'lazyModule'},
+ * ]);
+ *
+ * router.navigateByUrl('/lazy/loaded');
+ * ```
+ *
+ *
+ */
+@Injectable()
+export class SpyNgModuleFactoryLoader implements NgModuleFactoryLoader {
+  /**
+   * @docsNotRequired
+   */
+  private _stubbedModules: {[path: string]: Promise<NgModuleFactory<any>>} = {};
+
+  /**
+   * @docsNotRequired
+   */
+  set stubbedModules(modules: {[path: string]: any}) {
+    const res: {[path: string]: any} = {};
+    for (const t of Object.keys(modules)) {
+      res[t] = this.compiler.compileModuleAsync(modules[t]);
+    }
+    this._stubbedModules = res;
+  }
+
+  /**
+   * @docsNotRequired
+   */
+  get stubbedModules(): {[path: string]: any} { return this._stubbedModules; }
+
+  constructor(private compiler: Compiler) {}
+
+  load(path: string): Promise<NgModuleFactory<any>> {
+    if (this._stubbedModules[path]) {
+      return this._stubbedModules[path];
+    } else {
+      return <any>Promise.reject(new Error(`Cannot find module ${path}`));
+    }
+  }
+}
+
+function isUrlHandlingStrategy(opts: ExtraOptions | UrlHandlingStrategy):
+    opts is UrlHandlingStrategy {
+  // This property check is needed because UrlHandlingStrategy is an interface and doesn't exist at
+  // runtime.
+  return 'shouldProcessUrl' in opts;
+}
+
+/**
+ * Router setup factory function used for testing.
+ *
+ *
+ */
+export function setupTestingRouter(
+    urlSerializer: UrlSerializer, contexts: ChildrenOutletContexts, location: Location,
+    loader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, routes: Route[][],
+    opts?: ExtraOptions, urlHandlingStrategy?: UrlHandlingStrategy): Router;
+
+/**
+ * Router setup factory function used for testing.
+ *
+ * @deprecated As of v5.2. The 2nd-to-last argument should be `ExtraOptions`, not
+ * `UrlHandlingStrategy`
+ */
+export function setupTestingRouter(
+    urlSerializer: UrlSerializer, contexts: ChildrenOutletContexts, location: Location,
+    loader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, routes: Route[][],
+    urlHandlingStrategy?: UrlHandlingStrategy): Router;
+
+/**
+ * Router setup factory function used for testing.
+ *
+ *
+ */
+export function setupTestingRouter(
+    urlSerializer: UrlSerializer, contexts: ChildrenOutletContexts, location: Location,
+    loader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, routes: Route[][],
+    opts?: ExtraOptions | UrlHandlingStrategy, urlHandlingStrategy?: UrlHandlingStrategy) {
+  const router = new Router(
+      null !, urlSerializer, contexts, location, injector, loader, compiler, flatten(routes));
+  if (opts) {
+    // Handle deprecated argument ordering.
+    if (isUrlHandlingStrategy(opts)) {
+      router.urlHandlingStrategy = opts;
+    } else {
+      // Handle ExtraOptions
+
+      if (opts.malformedUriErrorHandler) {
+        router.malformedUriErrorHandler = opts.malformedUriErrorHandler;
+      }
+
+      if (opts.paramsInheritanceStrategy) {
+        router.paramsInheritanceStrategy = opts.paramsInheritanceStrategy;
+      }
+    }
+  }
+
+  if (urlHandlingStrategy) {
+    router.urlHandlingStrategy = urlHandlingStrategy;
+  }
+  return router;
+}
+
+/**
+ * @description
+ *
+ * Sets up the router to be used for testing.
+ *
+ * The modules sets up the router to be used for testing.
+ * It provides spy implementations of `Location`, `LocationStrategy`, and {@link
+ * NgModuleFactoryLoader}.
+ *
+ * ### Example
+ *
+ * ```
+ * beforeEach(() => {
+ *   TestBed.configureTestModule({
+ *     imports: [
+ *       RouterTestingModule.withRoutes(
+ *         [{path: '', component: BlankCmp}, {path: 'simple', component: SimpleCmp}]
+ *       )
+ *     ]
+ *   });
+ * });
+ * ```
+ *
+ *
+ */
+@NgModule({
+  exports: [RouterModule],
+  providers: [
+    ROUTER_PROVIDERS, {provide: Location, useClass: SpyLocation},
+    {provide: LocationStrategy, useClass: MockLocationStrategy},
+    {provide: NgModuleFactoryLoader, useClass: SpyNgModuleFactoryLoader}, {
+      provide: Router,
+      useFactory: setupTestingRouter,
+      deps: [
+        UrlSerializer, ChildrenOutletContexts, Location, NgModuleFactoryLoader, Compiler, Injector,
+        ROUTES, ROUTER_CONFIGURATION, [UrlHandlingStrategy, new Optional()]
+      ]
+    },
+    {provide: PreloadingStrategy, useExisting: NoPreloading}, provideRoutes([])
+  ]
+})
+export class RouterTestingModule {
+  static withRoutes(routes: Routes, config?: ExtraOptions):
+      ModuleWithProviders<RouterTestingModule> {
+    return {
+      ngModule: RouterTestingModule,
+      providers: [
+        provideRoutes(routes),
+        {provide: ROUTER_CONFIGURATION, useValue: config ? config : {}},
+      ]
+    };
+  }
+}
diff --git a/packages/router/testing/src/testing.ts b/packages/router/testing/src/testing.ts
new file mode 100644
index 000000000000..13559e8b61d7
--- /dev/null
+++ b/packages/router/testing/src/testing.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 router/testing package.
+ */
+export * from './router_testing_module';
diff --git a/packages/router/testing/tsconfig-build.json b/packages/router/testing/tsconfig-build.json
new file mode 100644
index 000000000000..423129cda922
--- /dev/null
+++ b/packages/router/testing/tsconfig-build.json
@@ -0,0 +1,28 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/core": ["../../../dist/packages/core"],
+      "@angular/common": ["../../../dist/packages/common"],
+      "@angular/common/testing": ["../../../dist/packages/common/testing"],
+      "@angular/platform-browser": ["../../../dist/packages/platform-browser"],
+      "@angular/router": ["../../../dist/packages/router"]
+    },
+    "outDir": "../../../dist/packages/router"
+  },
+
+  "files": [
+    "public_api.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "testing.js",
+    "flatModuleId": "@angular/router/testing"
+  }
+}
diff --git a/packages/router/tsconfig-build.json b/packages/router/tsconfig-build.json
new file mode 100644
index 000000000000..c18fc6d5c721
--- /dev/null
+++ b/packages/router/tsconfig-build.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "emitDecoratorMetadata": true,
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/common": ["../../dist/packages/common"],
+      "@angular/platform-browser": ["../../dist/packages/platform-browser"]
+    },
+    "outDir": "../../dist/packages/router"
+  },
+
+  "files": [
+    "public_api.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "router.js",
+    "flatModuleId": "@angular/router"
+  }
+}
diff --git a/packages/router/upgrade/BUILD.bazel b/packages/router/upgrade/BUILD.bazel
new file mode 100644
index 000000000000..8620441e269f
--- /dev/null
+++ b/packages/router/upgrade/BUILD.bazel
@@ -0,0 +1,22 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "upgrade",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/router/upgrade",
+    deps = [
+        "//packages/common",
+        "//packages/core",
+        "//packages/router",
+        "//packages/upgrade/static",
+    ],
+)
diff --git a/packages/router/upgrade/index.ts b/packages/router/upgrade/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/router/upgrade/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';
diff --git a/packages/router/upgrade/package.json b/packages/router/upgrade/package.json
new file mode 100644
index 000000000000..8578e3a0f81c
--- /dev/null
+++ b/packages/router/upgrade/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@angular/router/upgrade",
+  "typings": "./upgrade.d.ts",
+  "main": "../bundles/router-upgrade.umd.js",
+  "module": "../fesm5/upgrade.js",
+  "es2015": "../fesm2015/upgrade.js",
+  "esm5": "../esm5/upgrade/upgrade.js",
+  "esm2015": "../esm2015/upgrade/upgrade.js",
+  "fesm5": "../fesm5/upgrade.js",
+  "fesm2015": "../fesm2015/upgrade.js",
+  "sideEffects": false
+}
diff --git a/packages/router/upgrade/public_api.ts b/packages/router/upgrade/public_api.ts
new file mode 100644
index 000000000000..3cdf8ae42fb5
--- /dev/null
+++ b/packages/router/upgrade/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/upgrade';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/router/upgrade/rollup.config.js b/packages/router/upgrade/rollup.config.js
new file mode 100644
index 000000000000..135b0f934972
--- /dev/null
+++ b/packages/router/upgrade/rollup.config.js
@@ -0,0 +1,30 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/router': 'ng.router',
+  '@angular/upgrade/static': 'ng.upgrade.static'
+};
+
+
+module.exports = {
+  entry: '../../../dist/packages-dist/router/fesm5/upgrade.js',
+  dest: '../../../dist/packages-dist/router/bundles/router-upgrade.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/router/upgrade'},
+  moduleName: 'ng.router.upgrade',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/router/upgrade/src/upgrade.ts b/packages/router/upgrade/src/upgrade.ts
new file mode 100644
index 000000000000..bd44c6310c84
--- /dev/null
+++ b/packages/router/upgrade/src/upgrade.ts
@@ -0,0 +1,113 @@
+/**
+ * @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 '@angular/common';
+import {APP_BOOTSTRAP_LISTENER, ComponentRef, InjectionToken} from '@angular/core';
+import {Router} from '@angular/router';
+import {UpgradeModule} from '@angular/upgrade/static';
+
+/**
+ * @description
+ *
+ * Creates an initializer that in addition to setting up the Angular
+ * router sets up the ngRoute integration.
+ *
+ * ```
+ * @NgModule({
+ *  imports: [
+ *   RouterModule.forRoot(SOME_ROUTES),
+ *   UpgradeModule
+ * ],
+ * providers: [
+ *   RouterUpgradeInitializer
+ * ]
+ * })
+ * export class AppModule {
+ *   ngDoBootstrap() {}
+ * }
+ * ```
+ *
+ * @experimental
+ */
+export const RouterUpgradeInitializer = {
+  provide: APP_BOOTSTRAP_LISTENER,
+  multi: true,
+  useFactory: locationSyncBootstrapListener as(ngUpgrade: UpgradeModule) => () => void,
+  deps: [UpgradeModule]
+};
+
+/**
+ * @internal
+ */
+export function locationSyncBootstrapListener(ngUpgrade: UpgradeModule) {
+  return () => { setUpLocationSync(ngUpgrade); };
+}
+
+/**
+ * @description
+ *
+ * Sets up a location synchronization.
+ *
+ * History.pushState does not fire onPopState, so the Angular location
+ * doesn't detect it. The workaround is to attach a location change listener
+ *
+ * @experimental
+ */
+export function setUpLocationSync(ngUpgrade: UpgradeModule) {
+  if (!ngUpgrade.$injector) {
+    throw new Error(`
+        RouterUpgradeInitializer can be used only after UpgradeModule.bootstrap has been called.
+        Remove RouterUpgradeInitializer and call setUpLocationSync after UpgradeModule.bootstrap.
+      `);
+  }
+
+  const router: Router = ngUpgrade.injector.get(Router);
+  const location: Location = ngUpgrade.injector.get(Location);
+
+  ngUpgrade.$injector.get('$rootScope')
+      .$on('$locationChangeStart', (_: any, next: string, __: string) => {
+        const url = resolveUrl(next);
+        const path = location.normalize(url.pathname);
+        router.navigateByUrl(path + url.search + url.hash);
+      });
+}
+
+/**
+ * Normalize and parse a URL.
+ *
+ * - Normalizing means that a relative URL will be resolved into an absolute URL in the context of
+ *   the application document.
+ * - Parsing means that the anchor's `protocol`, `hostname`, `port`, `pathname` and related
+ *   properties are all populated to reflect the normalized URL.
+ *
+ * While this approach has wide compatibility, it doesn't work as expected on IE. On IE, normalizing
+ * happens similar to other browsers, but the parsed components will not be set. (E.g. if you assign
+ * `a.href = 'foo'`, then `a.protocol`, `a.host`, etc. will not be correctly updated.)
+ * We work around that by performing the parsing in a 2nd step by taking a previously normalized URL
+ * and assigning it again. This correctly populates all properties.
+ *
+ * See
+ * https://github.com/angular/angular.js/blob/2c7400e7d07b0f6cec1817dab40b9250ce8ebce6/src/ng/urlUtils.js#L26-L33
+ * for more info.
+ */
+let anchor: HTMLAnchorElement|undefined;
+function resolveUrl(url: string): {pathname: string, search: string, hash: string} {
+  if (!anchor) {
+    anchor = document.createElement('a');
+  }
+
+  anchor.setAttribute('href', url);
+  anchor.setAttribute('href', anchor.href);
+
+  return {
+    // IE does not start `pathname` with `/` like other browsers.
+    pathname: `/${anchor.pathname.replace(/^\//, '')}`,
+    search: anchor.search,
+    hash: anchor.hash
+  };
+}
diff --git a/packages/router/upgrade/test/BUILD.bazel b/packages/router/upgrade/test/BUILD.bazel
new file mode 100644
index 000000000000..9486783a3429
--- /dev/null
+++ b/packages/router/upgrade/test/BUILD.bazel
@@ -0,0 +1,21 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages/common",
+        "//packages/core/testing",
+        "//packages/router",
+        "//packages/router/upgrade",
+        "//packages/upgrade/static",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/router/upgrade/test/upgrade.spec.ts b/packages/router/upgrade/test/upgrade.spec.ts
new file mode 100644
index 000000000000..abbb7cb9a865
--- /dev/null
+++ b/packages/router/upgrade/test/upgrade.spec.ts
@@ -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
+ */
+
+import {Location} from '@angular/common';
+import {TestBed} from '@angular/core/testing';
+import {Router} from '@angular/router';
+import {setUpLocationSync} from '@angular/router/upgrade';
+import {UpgradeModule} from '@angular/upgrade/static';
+
+describe('setUpLocationSync', () => {
+  let upgradeModule: UpgradeModule;
+  let RouterMock: any;
+  let LocationMock: any;
+
+  beforeEach(() => {
+    RouterMock = jasmine.createSpyObj('Router', ['navigateByUrl']);
+    LocationMock = jasmine.createSpyObj('Location', ['normalize']);
+
+    TestBed.configureTestingModule({
+      providers: [
+        UpgradeModule, {provide: Router, useValue: RouterMock},
+        {provide: Location, useValue: LocationMock}
+      ],
+    });
+
+    upgradeModule = TestBed.get(UpgradeModule);
+    upgradeModule.$injector = {
+      get: jasmine.createSpy('$injector.get').and.returnValue({'$on': () => undefined})
+    };
+  });
+
+  it('should throw an error if the UpgradeModule.bootstrap has not been called', () => {
+    upgradeModule.$injector = null;
+
+    expect(() => setUpLocationSync(upgradeModule)).toThrowError(`
+        RouterUpgradeInitializer can be used only after UpgradeModule.bootstrap has been called.
+        Remove RouterUpgradeInitializer and call setUpLocationSync after UpgradeModule.bootstrap.
+      `);
+  });
+
+  it('should get the $rootScope from AngularJS and set an $on watch on $locationChangeStart',
+     () => {
+       const $rootScope = jasmine.createSpyObj('$rootScope', ['$on']);
+
+       upgradeModule.$injector.get.and.callFake(
+           (name: string) => (name === '$rootScope') && $rootScope);
+
+       setUpLocationSync(upgradeModule);
+
+       expect($rootScope.$on).toHaveBeenCalledTimes(1);
+       expect($rootScope.$on).toHaveBeenCalledWith('$locationChangeStart', jasmine.any(Function));
+     });
+
+  it('should navigate by url every time $locationChangeStart is broadcasted', () => {
+    const url = 'https://google.com';
+    const pathname = '/custom/route';
+    const normalizedPathname = 'foo';
+    const query = '?query=1&query2=3';
+    const hash = '#new/hash';
+    const $rootScope = jasmine.createSpyObj('$rootScope', ['$on']);
+
+    upgradeModule.$injector.get.and.returnValue($rootScope);
+    LocationMock.normalize.and.returnValue(normalizedPathname);
+
+    setUpLocationSync(upgradeModule);
+
+    const callback = $rootScope.$on.calls.argsFor(0)[1];
+    callback({}, url + pathname + query + hash, '');
+
+    expect(LocationMock.normalize).toHaveBeenCalledTimes(1);
+    expect(LocationMock.normalize).toHaveBeenCalledWith(pathname);
+
+    expect(RouterMock.navigateByUrl).toHaveBeenCalledTimes(1);
+    expect(RouterMock.navigateByUrl).toHaveBeenCalledWith(normalizedPathname + query + hash);
+  });
+
+  it('should work correctly on browsers that do not start pathname with `/`', () => {
+    const anchorProto = HTMLAnchorElement.prototype;
+    const originalDescriptor = Object.getOwnPropertyDescriptor(anchorProto, 'pathname');
+    Object.defineProperty(anchorProto, 'pathname', {get: () => 'foo/bar'});
+
+    try {
+      const $rootScope = jasmine.createSpyObj('$rootScope', ['$on']);
+      upgradeModule.$injector.get.and.returnValue($rootScope);
+
+      setUpLocationSync(upgradeModule);
+
+      const callback = $rootScope.$on.calls.argsFor(0)[1];
+      callback({}, '', '');
+
+      expect(LocationMock.normalize).toHaveBeenCalledWith('/foo/bar');
+    } finally {
+      Object.defineProperty(anchorProto, 'pathname', originalDescriptor !);
+    }
+  });
+});
diff --git a/packages/router/upgrade/tsconfig-build.json b/packages/router/upgrade/tsconfig-build.json
new file mode 100644
index 000000000000..9b59f4ff9be6
--- /dev/null
+++ b/packages/router/upgrade/tsconfig-build.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig-build.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/common": ["../../../dist/packages/common"],
+      "@angular/core": ["../../../dist/packages/core"],
+      "@angular/platform-browser": ["../../../dist/packages/platform-browser"],
+      "@angular/router": ["../../../dist/packages/router"],
+      "@angular/upgrade/static": ["../../../dist/packages/upgrade/static"]
+    },
+    "outDir": "../../../dist/packages/router"
+  },
+
+  "files": [
+    "public_api.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "upgrade.js",
+    "flatModuleId": "@angular/router/upgrade"
+  }
+}
diff --git a/packages/service-worker/BUILD.bazel b/packages/service-worker/BUILD.bazel
new file mode 100644
index 000000000000..da9adc885fb1
--- /dev/null
+++ b/packages/service-worker/BUILD.bazel
@@ -0,0 +1,59 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "service-worker",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/service-worker",
+    deps = [
+        "//packages/common",
+        "//packages/core",
+        "@rxjs",
+        "@rxjs//operators",
+    ],
+)
+
+genrule(
+    name = "ngsw_config_binary",
+    srcs = ["//packages/service-worker/cli:ngsw_config.js"],
+    outs = ["ngsw-config.js"],
+    cmd = "echo '#!/usr/bin/env node' > $@ && cat $< >> $@",
+)
+
+genrule(
+    name = "ngsw_worker_renamed",
+    srcs = ["//packages/service-worker/worker:ngsw_worker.es6.js"],
+    outs = ["ngsw-worker.js"],
+    # Remove sourcemap since this file will be served in production site
+    # See https://github.com/angular/angular/issues/23596
+    cmd = "grep -v '//# sourceMappingURL' < $< > $@",
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "safety-worker.js",
+        "//packages/service-worker/config:package.json",
+    ],
+    data = [
+        ":ngsw_config_binary",
+        ":ngsw_worker_renamed",
+        "//packages/service-worker/config",
+    ],
+    entry_point = "packages/service-worker/index.js",
+    tags = [
+        "ivy-jit",
+        "release-with-framework",
+    ],
+    deps = [
+        ":service-worker",
+        "//packages/service-worker/config",
+    ],
+)
diff --git a/packages/service-worker/build.sh b/packages/service-worker/build.sh
new file mode 100755
index 000000000000..3bdff8974cbb
--- /dev/null
+++ b/packages/service-worker/build.sh
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+set -u -e -o pipefail
+
+BIN=$(cd .. && npm bin)
+
+$BIN/tsc -p worker/tsconfig.json
+$BIN/rollup -c worker/rollup-worker.config.js
+
+
+$BIN/tsc -p cli/tsconfig.json
+$BIN/rollup -c cli/rollup-cli.config.js
+
+cp ./safety-worker.js ../../dist/packages-dist/service-worker/safety-worker.js
+
+echo "#!/usr/bin/env node" > ../../dist/packages-dist/service-worker/ngsw-config.js
+
+cat ../../dist/packages-dist/service-worker/ngsw-config-tmp.js >> ../../dist/packages-dist/service-worker/ngsw-config.js
+rm ../../dist/packages-dist/service-worker/ngsw-config-tmp.js
\ No newline at end of file
diff --git a/packages/service-worker/cli/BUILD.bazel b/packages/service-worker/cli/BUILD.bazel
new file mode 100644
index 000000000000..089d5b3cedb4
--- /dev/null
+++ b/packages/service-worker/cli/BUILD.bazel
@@ -0,0 +1,25 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "npm_package", "ts_library")
+load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+
+ts_library(
+    name = "cli",
+    srcs = glob(
+        [
+            "*.ts",
+        ],
+    ),
+    tsconfig = ":tsconfig.json",
+    deps = [
+        "//packages/service-worker/config",
+    ],
+)
+
+ng_rollup_bundle(
+    name = "ngsw_config",
+    entry_point = "packages/service-worker/cli/main.js",
+    deps = [
+        ":cli",
+    ],
+)
diff --git a/packages/service-worker/cli/filesystem.ts b/packages/service-worker/cli/filesystem.ts
new file mode 100644
index 000000000000..2852aa3130cd
--- /dev/null
+++ b/packages/service-worker/cli/filesystem.ts
@@ -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
+ */
+
+import {Filesystem} from '@angular/service-worker/config';
+
+import {sha1Binary} from './sha1';
+
+const fs = require('fs');
+const path = require('path');
+
+export class NodeFilesystem implements Filesystem {
+  constructor(private base: string) {}
+
+  async list(_path: string): Promise<string[]> {
+    const dir = this.canonical(_path);
+    const entries = fs.readdirSync(dir).map(
+        (entry: string) => ({entry, stats: fs.statSync(path.join(dir, entry))}));
+    const files = entries.filter((entry: any) => !entry.stats.isDirectory())
+                      .map((entry: any) => path.posix.join(_path, entry.entry));
+
+    return entries.filter((entry: any) => entry.stats.isDirectory())
+        .map((entry: any) => path.posix.join(_path, entry.entry))
+        .reduce(
+            async(list: Promise<string[]>, subdir: string) =>
+                (await list).concat(await this.list(subdir)),
+            Promise.resolve(files));
+  }
+
+  async read(_path: string): Promise<string> {
+    const file = this.canonical(_path);
+    return fs.readFileSync(file).toString();
+  }
+
+  async hash(_path: string): Promise<string> {
+    const file = this.canonical(_path);
+    const contents: Buffer = fs.readFileSync(file);
+    return sha1Binary(contents as any as ArrayBuffer);
+  }
+
+  async write(_path: string, contents: string): Promise<void> {
+    const file = this.canonical(_path);
+    fs.writeFileSync(file, contents);
+  }
+
+  private canonical(_path: string): string { return path.posix.join(this.base, _path); }
+}
diff --git a/packages/service-worker/cli/main.ts b/packages/service-worker/cli/main.ts
new file mode 100644
index 000000000000..3f9df0251a27
--- /dev/null
+++ b/packages/service-worker/cli/main.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
+ */
+
+const {Generator, NgswConfig} = require('@angular/service-worker/config');
+const fs = require('fs');
+const path = require('path');
+import {NodeFilesystem} from './filesystem';
+
+
+const cwd = process.cwd();
+
+const distDir = path.join(cwd, process.argv[2]);
+const config = path.join(cwd, process.argv[3]);
+const baseHref = process.argv[4] || '/';
+
+const configParsed = JSON.parse(fs.readFileSync(config).toString());
+
+const filesystem = new NodeFilesystem(distDir);
+const gen = new Generator(filesystem, baseHref);
+
+(async() => {
+  const control = await gen.process(configParsed);
+  await filesystem.write('/ngsw.json', JSON.stringify(control, null, 2));
+})();
\ No newline at end of file
diff --git a/packages/service-worker/cli/rollup-cli.config.js b/packages/service-worker/cli/rollup-cli.config.js
new file mode 100644
index 000000000000..c63011679d6f
--- /dev/null
+++ b/packages/service-worker/cli/rollup-cli.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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+
+module.exports = {
+  entry: '../../dist/all/@angular/service-worker/cli-custom/main.js',
+  dest: '../../dist/packages-dist/service-worker/ngsw-config-tmp.js',
+  format: 'iife',
+  plugins: [resolve()],
+  external: [
+    'fs',
+    'path',
+    '@angular/service-worker/config',
+  ],
+};
diff --git a/packages/service-worker/cli/sha1.ts b/packages/service-worker/cli/sha1.ts
new file mode 100644
index 000000000000..a01f0e744e37
--- /dev/null
+++ b/packages/service-worker/cli/sha1.ts
@@ -0,0 +1,217 @@
+/**
+ * @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
+ */
+
+/**
+ * Compute the SHA1 of the given string
+ *
+ * see http://csrc.nist.gov/publications/fips/fips180-4/fips-180-4.pdf
+ *
+ * WARNING: this function has not been designed not tested with security in mind.
+ *          DO NOT USE IT IN A SECURITY SENSITIVE CONTEXT.
+ *
+ * Borrowed from @angular/compiler/src/i18n/digest.ts
+ */
+
+export function sha1(str: string): string {
+  const utf8 = str;
+  const words32 = stringToWords32(utf8, Endian.Big);
+  return _sha1(words32, utf8.length * 8);
+}
+
+export function sha1Binary(buffer: ArrayBuffer): string {
+  const words32 = arrayBufferToWords32(buffer, Endian.Big);
+  return _sha1(words32, buffer.byteLength * 8);
+}
+
+function _sha1(words32: number[], len: number): string {
+  const w = new Array(80);
+  let [a, b, c, d, e]: number[] = [0x67452301, 0xefcdab89, 0x98badcfe, 0x10325476, 0xc3d2e1f0];
+
+  words32[len >> 5] |= 0x80 << (24 - len % 32);
+  words32[((len + 64 >> 9) << 4) + 15] = len;
+
+  for (let i = 0; i < words32.length; i += 16) {
+    const [h0, h1, h2, h3, h4]: number[] = [a, b, c, d, e];
+
+    for (let j = 0; j < 80; j++) {
+      if (j < 16) {
+        w[j] = words32[i + j];
+      } else {
+        w[j] = rol32(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1);
+      }
+
+      const [f, k] = fk(j, b, c, d);
+      const temp = [rol32(a, 5), f, e, k, w[j]].reduce(add32);
+      [e, d, c, b, a] = [d, c, rol32(b, 30), a, temp];
+    }
+
+    [a, b, c, d, e] = [add32(a, h0), add32(b, h1), add32(c, h2), add32(d, h3), add32(e, h4)];
+  }
+
+  return byteStringToHexString(words32ToByteString([a, b, c, d, e]));
+}
+
+function add32(a: number, b: number): number {
+  return add32to64(a, b)[1];
+}
+
+function add32to64(a: number, b: number): [number, number] {
+  const low = (a & 0xffff) + (b & 0xffff);
+  const high = (a >>> 16) + (b >>> 16) + (low >>> 16);
+  return [high >>> 16, (high << 16) | (low & 0xffff)];
+}
+
+function add64([ah, al]: [number, number], [bh, bl]: [number, number]): [number, number] {
+  const [carry, l] = add32to64(al, bl);
+  const h = add32(add32(ah, bh), carry);
+  return [h, l];
+}
+
+function sub32(a: number, b: number): number {
+  const low = (a & 0xffff) - (b & 0xffff);
+  const high = (a >> 16) - (b >> 16) + (low >> 16);
+  return (high << 16) | (low & 0xffff);
+}
+
+// Rotate a 32b number left `count` position
+function rol32(a: number, count: number): number {
+  return (a << count) | (a >>> (32 - count));
+}
+
+// Rotate a 64b number left `count` position
+function rol64([hi, lo]: [number, number], count: number): [number, number] {
+  const h = (hi << count) | (lo >>> (32 - count));
+  const l = (lo << count) | (hi >>> (32 - count));
+  return [h, l];
+}
+
+enum Endian {
+  Little,
+  Big,
+}
+
+function fk(index: number, b: number, c: number, d: number): [number, number] {
+  if (index < 20) {
+    return [(b & c) | (~b & d), 0x5a827999];
+  }
+
+  if (index < 40) {
+    return [b ^ c ^ d, 0x6ed9eba1];
+  }
+
+  if (index < 60) {
+    return [(b & c) | (b & d) | (c & d), 0x8f1bbcdc];
+  }
+
+  return [b ^ c ^ d, 0xca62c1d6];
+}
+
+
+function stringToWords32(str: string, endian: Endian): number[] {
+  const words32 = Array((str.length + 3) >>> 2);
+
+  for (let i = 0; i < words32.length; i++) {
+    words32[i] = wordAt(str, i * 4, endian);
+  }
+
+  return words32;
+}
+
+function arrayBufferToWords32(buffer: ArrayBuffer, endian: Endian): number[] {
+  const words32 = Array((buffer.byteLength + 3) >>> 2);
+  const view = new Uint8Array(buffer);
+  for (let i = 0; i < words32.length; i++) {
+    words32[i] = wordAt(view, i * 4, endian);
+  }
+  return words32;
+}
+
+function byteAt(str: string | Uint8Array, index: number): number {
+  if (typeof str === 'string') {
+    return index >= str.length ? 0 : str.charCodeAt(index) & 0xff;
+  } else {
+    return index >= str.byteLength ? 0 : str[index] & 0xff;
+  }
+}
+
+function wordAt(str: string | Uint8Array, index: number, endian: Endian): number {
+  let word = 0;
+  if (endian === Endian.Big) {
+    for (let i = 0; i < 4; i++) {
+      word += byteAt(str, index + i) << (24 - 8 * i);
+    }
+  } else {
+    for (let i = 0; i < 4; i++) {
+      word += byteAt(str, index + i) << 8 * i;
+    }
+  }
+  return word;
+}
+
+function words32ToByteString(words32: number[]): string {
+  return words32.reduce((str, word) => str + word32ToByteString(word), '');
+}
+
+function word32ToByteString(word: number): string {
+  let str = '';
+  for (let i = 0; i < 4; i++) {
+    str += String.fromCharCode((word >>> 8 * (3 - i)) & 0xff);
+  }
+  return str;
+}
+
+function byteStringToHexString(str: string): string {
+  let hex: string = '';
+  for (let i = 0; i < str.length; i++) {
+    const b = byteAt(str, i);
+    hex += (b >>> 4).toString(16) + (b & 0x0f).toString(16);
+  }
+  return hex.toLowerCase();
+}
+
+// based on http://www.danvk.org/hex2dec.html (JS can not handle more than 56b)
+function byteStringToDecString(str: string): string {
+  let decimal = '';
+  let toThePower = '1';
+
+  for (let i = str.length - 1; i >= 0; i--) {
+    decimal = addBigInt(decimal, numberTimesBigInt(byteAt(str, i), toThePower));
+    toThePower = numberTimesBigInt(256, toThePower);
+  }
+
+  return decimal.split('').reverse().join('');
+}
+
+// x and y decimal, lowest significant digit first
+function addBigInt(x: string, y: string): string {
+  let sum = '';
+  const len = Math.max(x.length, y.length);
+  for (let i = 0, carry = 0; i < len || carry; i++) {
+    const tmpSum = carry + +(x[i] || 0) + +(y[i] || 0);
+    if (tmpSum >= 10) {
+      carry = 1;
+      sum += tmpSum - 10;
+    } else {
+      carry = 0;
+      sum += tmpSum;
+    }
+  }
+
+  return sum;
+}
+
+
+function numberTimesBigInt(num: number, b: string): string {
+  let product = '';
+  let bToThePower = b;
+  for (; num !== 0; num = num >>> 1) {
+    if (num & 1) product = addBigInt(product, bToThePower);
+    bToThePower = addBigInt(bToThePower, bToThePower);
+  }
+  return product;
+}
diff --git a/packages/service-worker/cli/tsconfig.json b/packages/service-worker/cli/tsconfig.json
new file mode 100644
index 000000000000..03305d9b4d25
--- /dev/null
+++ b/packages/service-worker/cli/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": false,
+    "strict": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "outDir": "../../../dist/all/@angular/service-worker/cli-custom",
+    "noImplicitAny": true,
+    "noFallthroughCasesInSwitch": true,
+    "rootDir": ".",
+    "paths": {
+      "@angular/service-worker/config": ["../../../dist/packages/service-worker/config"]
+    },
+    "inlineSourceMap": true,
+    "lib": ["es2015"],
+    "target": "es5",
+    "typeRoots": []
+  },
+  "files": [
+    "main.ts",
+    "../../../node_modules/@types/node/index.d.ts"
+  ]
+}
diff --git a/packages/service-worker/config/BUILD.bazel b/packages/service-worker/config/BUILD.bazel
new file mode 100644
index 000000000000..f96d578375f3
--- /dev/null
+++ b/packages/service-worker/config/BUILD.bazel
@@ -0,0 +1,15 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "config",
+    srcs = glob([
+        "*.ts",
+        "src/**/*.ts",
+    ]),
+    module_name = "@angular/service-worker/config",
+    deps = ["//packages/core"],
+)
diff --git a/packages/service-worker/config/index.ts b/packages/service-worker/config/index.ts
new file mode 100644
index 000000000000..ca39d26dcdb8
--- /dev/null
+++ b/packages/service-worker/config/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/service-worker/config/package.json b/packages/service-worker/config/package.json
new file mode 100644
index 000000000000..66d809c05bbe
--- /dev/null
+++ b/packages/service-worker/config/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@angular/service-worker/config",
+  "typings": "./index.d.ts",
+  "main": "../bundles/service-worker-config.umd.js",
+  "module": "../fesm5/config/index.js",
+  "es2015": "../fesm15/config/index.js",
+  "esm5": "../esm5/config/index.js",
+  "esm2015": "../esm2015/config/index.js",
+  "fesm5": "../fesm5/config/index.js",
+  "fesm2015": "../fesm2015/config/index.js"
+}
diff --git a/packages/service-worker/config/public_api.ts b/packages/service-worker/config/public_api.ts
new file mode 100644
index 000000000000..f2f0a533957e
--- /dev/null
+++ b/packages/service-worker/config/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 {Filesystem} from './src/filesystem';
+export {Generator} from './src/generator';
+export {AssetGroup, Config, DataGroup, Duration, Glob} from './src/in';
diff --git a/packages/service-worker/config/rollup.config.js b/packages/service-worker/config/rollup.config.js
new file mode 100644
index 000000000000..8aa5eb619c12
--- /dev/null
+++ b/packages/service-worker/config/rollup.config.js
@@ -0,0 +1,23 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/service-worker/fesm5/config.js',
+  dest: '../../../dist/packages-dist/service-worker/bundles/service-worker-config.umd.js',
+  format: 'umd',
+  exports: 'named',
+  moduleName: 'ng.serviceWorker.config',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/service-worker/config/src/duration.ts b/packages/service-worker/config/src/duration.ts
new file mode 100644
index 000000000000..a00ddaabc284
--- /dev/null
+++ b/packages/service-worker/config/src/duration.ts
@@ -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 PARSE_TO_PAIRS = /([0-9]+[^0-9]+)/g;
+const PAIR_SPLIT = /^([0-9]+)([dhmsu]+)$/;
+
+export function parseDurationToMs(duration: string): number {
+  const matches: string[] = [];
+
+  let array: RegExpExecArray|null;
+  while ((array = PARSE_TO_PAIRS.exec(duration)) !== null) {
+    matches.push(array[0]);
+  }
+  return matches
+      .map(match => {
+        const res = PAIR_SPLIT.exec(match);
+        if (res === null) {
+          throw new Error(`Not a valid duration: ${match}`);
+        }
+        let factor: number = 0;
+        switch (res[2]) {
+          case 'd':
+            factor = 86400000;
+            break;
+          case 'h':
+            factor = 3600000;
+            break;
+          case 'm':
+            factor = 60000;
+            break;
+          case 's':
+            factor = 1000;
+            break;
+          case 'u':
+            factor = 1;
+            break;
+          default:
+            throw new Error(`Not a valid duration unit: ${res[2]}`);
+        }
+        return parseInt(res[1]) * factor;
+      })
+      .reduce((total, value) => total + value, 0);
+}
diff --git a/packages/service-worker/config/src/filesystem.ts b/packages/service-worker/config/src/filesystem.ts
new file mode 100644
index 000000000000..7138d2ef03dc
--- /dev/null
+++ b/packages/service-worker/config/src/filesystem.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
+ */
+
+/**
+ * An abstraction over a virtual file system used to enable testing and operation
+ * of the config generator in different environments.
+ *
+ * @experimental
+ */
+export interface Filesystem {
+  list(dir: string): Promise<string[]>;
+  read(file: string): Promise<string>;
+  hash(file: string): Promise<string>;
+  write(file: string, contents: string): Promise<void>;
+}
\ No newline at end of file
diff --git a/packages/service-worker/config/src/generator.ts b/packages/service-worker/config/src/generator.ts
new file mode 100644
index 000000000000..659e615afd5b
--- /dev/null
+++ b/packages/service-worker/config/src/generator.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 {parseDurationToMs} from './duration';
+import {Filesystem} from './filesystem';
+import {globToRegex} from './glob';
+import {Config} from './in';
+
+const DEFAULT_NAVIGATION_URLS = [
+  '/**',           // Include all URLs.
+  '!/**/*.*',      // Exclude URLs to files (containing a file extension in the last segment).
+  '!/**/*__*',     // Exclude URLs containing `__` in the last segment.
+  '!/**/*__*/**',  // Exclude URLs containing `__` in any other segment.
+];
+
+/**
+ * Consumes service worker configuration files and processes them into control files.
+ *
+ * @experimental
+ */
+export class Generator {
+  constructor(readonly fs: Filesystem, private baseHref: string) {}
+
+  async process(config: Config): Promise<Object> {
+    const unorderedHashTable = {};
+    const assetGroups = await this.processAssetGroups(config, unorderedHashTable);
+
+    return {
+      configVersion: 1,
+      appData: config.appData,
+      index: joinUrls(this.baseHref, config.index), assetGroups,
+      dataGroups: this.processDataGroups(config),
+      hashTable: withOrderedKeys(unorderedHashTable),
+      navigationUrls: processNavigationUrls(this.baseHref, config.navigationUrls),
+    };
+  }
+
+  private async processAssetGroups(config: Config, hashTable: {[file: string]: string | undefined}):
+      Promise<Object[]> {
+    const seenMap = new Set<string>();
+    return Promise.all((config.assetGroups || []).map(async(group) => {
+      if (group.resources.versionedFiles) {
+        console.warn(
+            `Asset-group '${group.name}' in 'ngsw-config.json' uses the 'versionedFiles' option.\n` +
+            'As of v6 \'versionedFiles\' and \'files\' options have the same behavior. ' +
+            'Use \'files\' instead.');
+      }
+
+      const fileMatcher = globListToMatcher(group.resources.files || []);
+      const versionedMatcher = globListToMatcher(group.resources.versionedFiles || []);
+
+      const allFiles = await this.fs.list('/');
+
+      const plainFiles = allFiles.filter(fileMatcher).filter(file => !seenMap.has(file));
+      plainFiles.forEach(file => seenMap.add(file));
+
+      const versionedFiles = allFiles.filter(versionedMatcher).filter(file => !seenMap.has(file));
+      versionedFiles.forEach(file => seenMap.add(file));
+
+      // Add the hashes.
+      const matchedFiles = [...plainFiles, ...versionedFiles].sort();
+      await matchedFiles.reduce(async(previous, file) => {
+        await previous;
+        const hash = await this.fs.hash(file);
+        hashTable[joinUrls(this.baseHref, file)] = hash;
+      }, Promise.resolve());
+
+      return {
+        name: group.name,
+        installMode: group.installMode || 'prefetch',
+        updateMode: group.updateMode || group.installMode || 'prefetch',
+        urls: matchedFiles.map(url => joinUrls(this.baseHref, url)),
+        patterns: (group.resources.urls || []).map(url => urlToRegex(url, this.baseHref, true)),
+      };
+    }));
+  }
+
+  private processDataGroups(config: Config): Object[] {
+    return (config.dataGroups || []).map(group => {
+      return {
+        name: group.name,
+        patterns: group.urls.map(url => urlToRegex(url, this.baseHref, true)),
+        strategy: group.cacheConfig.strategy || 'performance',
+        maxSize: group.cacheConfig.maxSize,
+        maxAge: parseDurationToMs(group.cacheConfig.maxAge),
+        timeoutMs: group.cacheConfig.timeout && parseDurationToMs(group.cacheConfig.timeout),
+        version: group.version !== undefined ? group.version : 1,
+      };
+    });
+  }
+}
+
+export function processNavigationUrls(
+    baseHref: string, urls = DEFAULT_NAVIGATION_URLS): {positive: boolean, regex: string}[] {
+  return urls.map(url => {
+    const positive = !url.startsWith('!');
+    url = positive ? url : url.substr(1);
+    return {positive, regex: `^${urlToRegex(url, baseHref)}$`};
+  });
+}
+
+function globListToMatcher(globs: string[]): (file: string) => boolean {
+  const patterns = globs.map(pattern => {
+    if (pattern.startsWith('!')) {
+      return {
+        positive: false,
+        regex: new RegExp('^' + globToRegex(pattern.substr(1)) + '$'),
+      };
+    } else {
+      return {
+        positive: true,
+        regex: new RegExp('^' + globToRegex(pattern) + '$'),
+      };
+    }
+  });
+  return (file: string) => matches(file, patterns);
+}
+
+function matches(file: string, patterns: {positive: boolean, regex: RegExp}[]): boolean {
+  const res = patterns.reduce((isMatch, pattern) => {
+    if (pattern.positive) {
+      return isMatch || pattern.regex.test(file);
+    } else {
+      return isMatch && !pattern.regex.test(file);
+    }
+  }, false);
+  return res;
+}
+
+function urlToRegex(url: string, baseHref: string, literalQuestionMark?: boolean): string {
+  if (!url.startsWith('/') && url.indexOf('://') === -1) {
+    url = joinUrls(baseHref, url);
+  }
+
+  return globToRegex(url, literalQuestionMark);
+}
+
+function joinUrls(a: string, b: string): string {
+  if (a.endsWith('/') && b.startsWith('/')) {
+    return a + b.substr(1);
+  } else if (!a.endsWith('/') && !b.startsWith('/')) {
+    return a + '/' + b;
+  }
+  return a + b;
+}
+
+function withOrderedKeys<T extends{[key: string]: any}>(unorderedObj: T): T {
+  const orderedObj = {} as T;
+  Object.keys(unorderedObj).sort().forEach(key => orderedObj[key] = unorderedObj[key]);
+  return orderedObj;
+}
diff --git a/packages/service-worker/config/src/glob.ts b/packages/service-worker/config/src/glob.ts
new file mode 100644
index 000000000000..bfd22236f17c
--- /dev/null
+++ b/packages/service-worker/config/src/glob.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 QUESTION_MARK = '[^/]';
+const WILD_SINGLE = '[^/]*';
+const WILD_OPEN = '(?:.+\\/)?';
+
+const TO_ESCAPE_BASE = [
+  {replace: /\./g, with: '\\.'},
+  {replace: /\+/g, with: '\\+'},
+  {replace: /\*/g, with: WILD_SINGLE},
+];
+const TO_ESCAPE_WILDCARD_QM = [
+  ...TO_ESCAPE_BASE,
+  {replace: /\?/g, with: QUESTION_MARK},
+];
+const TO_ESCAPE_LITERAL_QM = [
+  ...TO_ESCAPE_BASE,
+  {replace: /\?/g, with: '\\?'},
+];
+
+export function globToRegex(glob: string, literalQuestionMark = false): string {
+  const toEscape = literalQuestionMark ? TO_ESCAPE_LITERAL_QM : TO_ESCAPE_WILDCARD_QM;
+  const segments = glob.split('/').reverse();
+  let regex: string = '';
+  while (segments.length > 0) {
+    const segment = segments.pop() !;
+    if (segment === '**') {
+      if (segments.length > 0) {
+        regex += WILD_OPEN;
+      } else {
+        regex += '.*';
+      }
+    } else {
+      const processed = toEscape.reduce(
+          (segment, escape) => segment.replace(escape.replace, escape.with), segment);
+      regex += processed;
+      if (segments.length > 0) {
+        regex += '\\/';
+      }
+    }
+  }
+  return regex;
+}
diff --git a/packages/service-worker/config/src/in.ts b/packages/service-worker/config/src/in.ts
new file mode 100644
index 000000000000..0328a53356db
--- /dev/null
+++ b/packages/service-worker/config/src/in.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
+ */
+
+/**
+ * @experimental
+ */
+export type Glob = string;
+
+/**
+ * @experimental
+ */
+export type Duration = string;
+
+/**
+ * A top-level Angular Service Worker configuration object.
+ *
+ * @experimental
+ */
+export interface Config {
+  appData?: {};
+  index: string;
+  assetGroups?: AssetGroup[];
+  dataGroups?: DataGroup[];
+  navigationUrls?: string[];
+}
+
+/**
+ * Configuration for a particular group of assets.
+ *
+ * @experimental
+ */
+export interface AssetGroup {
+  name: string;
+  installMode?: 'prefetch'|'lazy';
+  updateMode?: 'prefetch'|'lazy';
+  resources: {
+    files?: Glob[];
+    /** @deprecated As of v6 `versionedFiles` and `files` options have the same behavior. Use
+       `files` instead. */
+    versionedFiles?: Glob[];
+    urls?: Glob[];
+  };
+}
+
+/**
+ * Configuration for a particular group of dynamic URLs.
+ *
+ * @experimental
+ */
+export interface DataGroup {
+  name: string;
+  urls: Glob[];
+  version?: number;
+  cacheConfig: {
+    maxSize: number; maxAge: Duration; timeout?: Duration; strategy?: 'freshness' | 'performance';
+  };
+}
diff --git a/packages/service-worker/config/test/generator_spec.ts b/packages/service-worker/config/test/generator_spec.ts
new file mode 100644
index 000000000000..9932524654f6
--- /dev/null
+++ b/packages/service-worker/config/test/generator_spec.ts
@@ -0,0 +1,158 @@
+/**
+ * @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 {Generator} from '../src/generator';
+import {MockFilesystem} from '../testing/mock';
+
+{
+  describe('Generator', () => {
+    it('generates a correct config', done => {
+      const fs = new MockFilesystem({
+        '/index.html': 'This is a test',
+        '/main.css': 'This is a CSS file',
+        '/main.js': 'This is a JS file',
+        '/main.ts': 'This is a TS file',
+        '/test.txt': 'Another test',
+        '/foo/test.html': 'Another test',
+        '/ignored/x.html': 'should be ignored',
+      });
+      const gen = new Generator(fs, '/test');
+      const res = gen.process({
+        appData: {
+          test: true,
+        },
+        index: '/index.html',
+        assetGroups: [{
+          name: 'test',
+          resources: {
+            files: [
+              '/**/*.html',
+              '/**/*.?s',
+              '!/ignored/**',
+            ],
+            versionedFiles: [
+              '/**/*.txt',
+            ],
+            urls: [
+              '/absolute/**',
+              '/some/url?with+escaped+chars',
+              'relative/*.txt',
+            ]
+          }
+        }],
+        dataGroups: [{
+          name: 'other',
+          urls: [
+            '/api/**',
+            'relapi/**',
+            'https://example.com/**/*?with+escaped+chars',
+          ],
+          cacheConfig: {
+            maxSize: 100,
+            maxAge: '3d',
+            timeout: '1m',
+          }
+        }],
+        navigationUrls: [
+          '/included/absolute/**',
+          '!/excluded/absolute/**',
+          '/included/some/url/with+escaped+chars',
+          '!excluded/relative/*.txt',
+          '!/api/?*',
+          'http://example.com/included',
+          '!http://example.com/excluded',
+        ],
+      });
+      res.then(config => {
+           expect(config).toEqual({
+             configVersion: 1,
+             appData: {
+               test: true,
+             },
+             index: '/test/index.html',
+             assetGroups: [{
+               name: 'test',
+               installMode: 'prefetch',
+               updateMode: 'prefetch',
+               urls: [
+                 '/test/foo/test.html',
+                 '/test/index.html',
+                 '/test/main.js',
+                 '/test/main.ts',
+                 '/test/test.txt',
+               ],
+               patterns: [
+                 '\\/absolute\\/.*',
+                 '\\/some\\/url\\?with\\+escaped\\+chars',
+                 '\\/test\\/relative\\/[^/]*\\.txt',
+               ]
+             }],
+             dataGroups: [{
+               name: 'other',
+               patterns: [
+                 '\\/api\\/.*',
+                 '\\/test\\/relapi\\/.*',
+                 'https:\\/\\/example\\.com\\/(?:.+\\/)?[^/]*\\?with\\+escaped\\+chars',
+               ],
+               strategy: 'performance',
+               maxSize: 100,
+               maxAge: 259200000,
+               timeoutMs: 60000,
+               version: 1,
+             }],
+             navigationUrls: [
+               {positive: true, regex: '^\\/included\\/absolute\\/.*$'},
+               {positive: false, regex: '^\\/excluded\\/absolute\\/.*$'},
+               {positive: true, regex: '^\\/included\\/some\\/url\\/with\\+escaped\\+chars$'},
+               {positive: false, regex: '^\\/test\\/excluded\\/relative\\/[^/]*\\.txt$'},
+               {positive: false, regex: '^\\/api\\/[^/][^/]*$'},
+               {positive: true, regex: '^http:\\/\\/example\\.com\\/included$'},
+               {positive: false, regex: '^http:\\/\\/example\\.com\\/excluded$'},
+             ],
+             hashTable: {
+               '/test/foo/test.html': '18f6f8eb7b1c23d2bb61bff028b83d867a9e4643',
+               '/test/index.html': 'a54d88e06612d820bc3be72877c74f257b561b19',
+               '/test/main.js': '41347a66676cdc0516934c76d9d13010df420f2c',
+               '/test/main.ts': '7d333e31f0bfc4f8152732bb211a93629484c035',
+               '/test/test.txt': '18f6f8eb7b1c23d2bb61bff028b83d867a9e4643'
+             }
+           });
+           done();
+         })
+          .catch(err => done.fail(err));
+    });
+
+    it('uses default `navigationUrls` if not provided', done => {
+      const fs = new MockFilesystem({
+        '/index.html': 'This is a test',
+      });
+      const gen = new Generator(fs, '/test');
+      const res = gen.process({
+        index: '/index.html',
+      });
+      res.then(config => {
+           expect(config).toEqual({
+             configVersion: 1,
+             appData: undefined,
+             index: '/test/index.html',
+             assetGroups: [],
+             dataGroups: [],
+             navigationUrls: [
+               {positive: true, regex: '^\\/.*$'},
+               {positive: false, regex: '^\\/(?:.+\\/)?[^/]*\\.[^/]*$'},
+               {positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*$'},
+               {positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$'},
+             ],
+             hashTable: {}
+           });
+           done();
+         })
+          .catch(err => done.fail(err));
+    });
+  });
+}
diff --git a/packages/service-worker/config/testing/mock.ts b/packages/service-worker/config/testing/mock.ts
new file mode 100644
index 000000000000..fe1af9896520
--- /dev/null
+++ b/packages/service-worker/config/testing/mock.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {sha1} from '../../cli/sha1';
+import {Filesystem} from '../src/filesystem';
+
+export class MockFilesystem implements Filesystem {
+  private files = new Map<string, string>();
+
+  constructor(files: {[name: string]: string | undefined}) {
+    Object.keys(files).forEach(path => this.files.set(path, files[path] !));
+  }
+
+  async list(dir: string): Promise<string[]> {
+    return Array.from(this.files.keys()).filter(path => path.startsWith(dir));
+  }
+
+  async read(path: string): Promise<string> { return this.files.get(path) !; }
+
+  async hash(path: string): Promise<string> { return sha1(this.files.get(path) !); }
+
+  async write(path: string, contents: string): Promise<void> { this.files.set(path, contents); }
+}
\ No newline at end of file
diff --git a/packages/service-worker/config/tsconfig-build.json b/packages/service-worker/config/tsconfig-build.json
new file mode 100644
index 000000000000..e2faf6fd751e
--- /dev/null
+++ b/packages/service-worker/config/tsconfig-build.json
@@ -0,0 +1,24 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/core": ["../../../dist/packages/core"]
+    },
+    "outDir": "../../../dist/packages/service-worker"
+  },
+
+  "files": [
+    "public_api.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "flatModuleOutFile": "config.js",
+    "flatModuleId": "@angular/service-worker/config",
+    "skipTemplateCodegen": true
+  }
+}
diff --git a/packages/service-worker/index.ts b/packages/service-worker/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/service-worker/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';
diff --git a/packages/service-worker/package.json b/packages/service-worker/package.json
new file mode 100644
index 000000000000..8197ffbda43c
--- /dev/null
+++ b/packages/service-worker/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@angular/service-worker",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - service worker tooling!",
+  "main": "./bundles/service-worker.umd.js",
+  "module": "./fesm5/service-worker.js",
+  "es2015": "./fesm2015/service-worker.js",
+  "esm5": "./esm5/service-worker.js",
+  "esm2015": "./esm2015/service-worker.js",
+  "fesm5": "./fesm5/service-worker.js",
+  "fesm2015": "./fesm2015/service-worker.js",
+  "typings": "./service-worker.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/common": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "bin": {
+    "ngsw-config": "./ngsw-config.js"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/service-worker/public_api.ts b/packages/service-worker/public_api.ts
new file mode 100644
index 000000000000..778427176d02
--- /dev/null
+++ b/packages/service-worker/public_api.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 this package.
+ */
+export * from './src/index';
+
+// This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/service-worker/rollup.config.js b/packages/service-worker/rollup.config.js
new file mode 100644
index 000000000000..c491a87bc5eb
--- /dev/null
+++ b/packages/service-worker/rollup.config.js
@@ -0,0 +1,28 @@
+/**
+ * @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 resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  'rxjs': 'rxjs',
+  'rxjs/operators': 'rxjs.operators',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/service-worker/fesm5/service-worker.js',
+  dest: '../../dist/packages-dist/service-worker/bundles/service-worker.umd.js',
+  format: 'umd',
+  exports: 'named',
+  moduleName: 'ng.serviceWorker',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/service-worker/safety-worker.js b/packages/service-worker/safety-worker.js
new file mode 100644
index 000000000000..6301f64fcf92
--- /dev/null
+++ b/packages/service-worker/safety-worker.js
@@ -0,0 +1,17 @@
+/**
+ * @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
+ */
+
+// tslint:disable:no-console
+
+self.addEventListener('install', event => { self.skipWaiting(); });
+
+self.addEventListener('activate', event => {
+  event.waitUntil(self.clients.claim());
+  self.registration.unregister().then(
+      () => { console.log('NGSW Safety Worker - unregistered old service worker'); });
+});
diff --git a/packages/service-worker/src/index.ts b/packages/service-worker/src/index.ts
new file mode 100644
index 000000000000..bd89ce2ff2d0
--- /dev/null
+++ b/packages/service-worker/src/index.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
+ */
+
+/**
+* @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 {ServiceWorkerModule} from './module';
+export {SwPush} from './push';
+export {SwUpdate} from './update';
\ No newline at end of file
diff --git a/packages/service-worker/src/low_level.ts b/packages/service-worker/src/low_level.ts
new file mode 100644
index 000000000000..6929c90d2265
--- /dev/null
+++ b/packages/service-worker/src/low_level.ts
@@ -0,0 +1,166 @@
+/**
+ * @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 {ConnectableObservable, Observable, concat, defer, fromEvent, of , throwError} from 'rxjs';
+import {filter, map, publish, switchMap, take, tap} from 'rxjs/operators';
+
+export const ERR_SW_NOT_SUPPORTED = 'Service workers are disabled or not supported by this browser';
+
+export interface Version {
+  hash: string;
+  appData?: Object;
+}
+
+/**
+ * @experimental
+ */
+export interface UpdateAvailableEvent {
+  type: 'UPDATE_AVAILABLE';
+  current: Version;
+  available: Version;
+}
+
+/**
+ * @experimental
+ */
+export interface UpdateActivatedEvent {
+  type: 'UPDATE_ACTIVATED';
+  previous?: Version;
+  current: Version;
+}
+
+export type IncomingEvent = UpdateAvailableEvent | UpdateActivatedEvent;
+
+export interface TypedEvent { type: string; }
+
+interface StatusEvent {
+  type: 'STATUS';
+  nonce: number;
+  status: boolean;
+  error?: string;
+}
+
+
+function errorObservable(message: string): Observable<any> {
+  return defer(() => throwError(new Error(message)));
+}
+
+/**
+ * @experimental
+*/
+export class NgswCommChannel {
+  /**
+   * @internal
+   */
+  readonly worker: Observable<ServiceWorker>;
+
+  /**
+   * @internal
+   */
+  readonly registration: Observable<ServiceWorkerRegistration>;
+
+  /**
+   * @internal
+   */
+  readonly events: Observable<TypedEvent>;
+
+  constructor(private serviceWorker: ServiceWorkerContainer|undefined) {
+    if (!serviceWorker) {
+      this.worker = this.events = this.registration = errorObservable(ERR_SW_NOT_SUPPORTED);
+    } else {
+      const controllerChangeEvents =
+          <Observable<any>>(fromEvent(serviceWorker, 'controllerchange'));
+      const controllerChanges = <Observable<ServiceWorker|null>>(
+          controllerChangeEvents.pipe(map(() => serviceWorker.controller)));
+
+      const currentController =
+          <Observable<ServiceWorker|null>>(defer(() => of (serviceWorker.controller)));
+
+      const controllerWithChanges =
+          <Observable<ServiceWorker|null>>(concat(currentController, controllerChanges));
+      this.worker = <Observable<ServiceWorker>>(
+          controllerWithChanges.pipe(filter((c: ServiceWorker) => !!c)));
+
+      this.registration = <Observable<ServiceWorkerRegistration>>(
+          this.worker.pipe(switchMap(() => serviceWorker.getRegistration())));
+
+      const rawEvents = fromEvent(serviceWorker, 'message');
+
+      const rawEventPayload = rawEvents.pipe(map((event: MessageEvent) => event.data));
+      const eventsUnconnected =
+          (rawEventPayload.pipe(filter((event: Object) => !!event && !!(event as any)['type'])));
+      const events = eventsUnconnected.pipe(publish()) as ConnectableObservable<IncomingEvent>;
+      this.events = events;
+      events.connect();
+    }
+  }
+
+  /**
+   * @internal
+   */
+  postMessage(action: string, payload: Object): Promise<void> {
+    return this.worker
+        .pipe(take(1), tap((sw: ServiceWorker) => {
+                sw.postMessage({
+                    action, ...payload,
+                });
+              }))
+        .toPromise()
+        .then(() => undefined);
+  }
+
+  /**
+   * @internal
+   */
+  postMessageWithStatus(type: string, payload: Object, nonce: number): Promise<void> {
+    const waitForStatus = this.waitForStatus(nonce);
+    const postMessage = this.postMessage(type, payload);
+    return Promise.all([waitForStatus, postMessage]).then(() => undefined);
+  }
+
+  /**
+   * @internal
+   */
+  generateNonce(): number { return Math.round(Math.random() * 10000000); }
+
+  /**
+   * @internal
+   */
+  // TODO(i): the typings and casts in this method are wonky, we should revisit it and make the
+  // types flow correctly
+  eventsOfType<T extends TypedEvent>(type: string): Observable<T> {
+    return <Observable<T>>this.events.pipe(filter((event) => { return event.type === type; }));
+  }
+
+  /**
+   * @internal
+   */
+  // TODO(i): the typings and casts in this method are wonky, we should revisit it and make the
+  // types flow correctly
+  nextEventOfType<T extends TypedEvent>(type: string): Observable<T> {
+    return <Observable<T>>(this.eventsOfType(type).pipe(take(1)));
+  }
+
+  /**
+   * @internal
+   */
+  waitForStatus(nonce: number): Promise<void> {
+    return this.eventsOfType<StatusEvent>('STATUS')
+        .pipe(
+            filter((event: StatusEvent) => event.nonce === nonce), take(1),
+            map((event: StatusEvent) => {
+              if (event.status) {
+                return undefined;
+              }
+              throw new Error(event.error !);
+            }))
+        .toPromise();
+  }
+
+  get isEnabled(): boolean { return !!this.serviceWorker; }
+}
diff --git a/packages/service-worker/src/module.ts b/packages/service-worker/src/module.ts
new file mode 100644
index 000000000000..194758289141
--- /dev/null
+++ b/packages/service-worker/src/module.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 {isPlatformBrowser} from '@angular/common';
+import {APP_INITIALIZER, ApplicationRef, InjectionToken, Injector, ModuleWithProviders, NgModule, PLATFORM_ID} from '@angular/core';
+import {filter, take} from 'rxjs/operators';
+
+import {NgswCommChannel} from './low_level';
+import {SwPush} from './push';
+import {SwUpdate} from './update';
+
+export abstract class RegistrationOptions {
+  scope?: string;
+  enabled?: boolean;
+}
+
+export const SCRIPT = new InjectionToken<string>('NGSW_REGISTER_SCRIPT');
+
+export function ngswAppInitializer(
+    injector: Injector, script: string, options: RegistrationOptions,
+    platformId: string): Function {
+  const initializer = () => {
+    const app = injector.get<ApplicationRef>(ApplicationRef);
+    if (!(isPlatformBrowser(platformId) && ('serviceWorker' in navigator) &&
+          options.enabled !== false)) {
+      return;
+    }
+    const whenStable =
+        app.isStable.pipe(filter((stable: boolean) => !!stable), take(1)).toPromise();
+
+    // Wait for service worker controller changes, and fire an INITIALIZE action when a new SW
+    // becomes active. This allows the SW to initialize itself even if there is no application
+    // traffic.
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      if (navigator.serviceWorker.controller !== null) {
+        navigator.serviceWorker.controller.postMessage({action: 'INITIALIZE'});
+      }
+    });
+
+    // Don't return the Promise, as that will block the application until the SW is registered, and
+    // cause a crash if the SW registration fails.
+    whenStable.then(() => navigator.serviceWorker.register(script, {scope: options.scope}));
+  };
+  return initializer;
+}
+
+export function ngswCommChannelFactory(
+    opts: RegistrationOptions, platformId: string): NgswCommChannel {
+  return new NgswCommChannel(
+      isPlatformBrowser(platformId) && opts.enabled !== false ? navigator.serviceWorker :
+                                                                undefined);
+}
+
+/**
+ * @experimental
+ */
+@NgModule({
+  providers: [SwPush, SwUpdate],
+})
+export class ServiceWorkerModule {
+  /**
+   * Register the given Angular Service Worker script.
+   *
+   * If `enabled` is set to `false` in the given options, the module will behave as if service
+   * workers are not supported by the browser, and the service worker will not be registered.
+   */
+  static register(script: string, opts: {scope?: string; enabled?: boolean;} = {}):
+      ModuleWithProviders {
+    return {
+      ngModule: ServiceWorkerModule,
+      providers: [
+        {provide: SCRIPT, useValue: script},
+        {provide: RegistrationOptions, useValue: opts},
+        {
+          provide: NgswCommChannel,
+          useFactory: ngswCommChannelFactory,
+          deps: [RegistrationOptions, PLATFORM_ID]
+        },
+        {
+          provide: APP_INITIALIZER,
+          useFactory: ngswAppInitializer,
+          deps: [Injector, SCRIPT, RegistrationOptions, PLATFORM_ID],
+          multi: true,
+        },
+      ],
+    };
+  }
+}
diff --git a/packages/service-worker/src/push.ts b/packages/service-worker/src/push.ts
new file mode 100644
index 000000000000..2a9f244c7911
--- /dev/null
+++ b/packages/service-worker/src/push.ts
@@ -0,0 +1,96 @@
+/**
+ * @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 {NEVER, Observable, Subject, merge} from 'rxjs';
+import {map, switchMap, take} from 'rxjs/operators';
+
+import {ERR_SW_NOT_SUPPORTED, NgswCommChannel} from './low_level';
+
+
+/**
+ * Subscribe and listen to push notifications from the Service Worker.
+ *
+ * @experimental
+ */
+@Injectable()
+export class SwPush {
+  readonly messages: Observable<object>;
+  readonly subscription: Observable<PushSubscription|null>;
+
+  // TODO(issue/24571): remove '!'.
+  private pushManager !: Observable<PushManager>;
+  private subscriptionChanges: Subject<PushSubscription|null> =
+      new Subject<PushSubscription|null>();
+
+  constructor(private sw: NgswCommChannel) {
+    if (!sw.isEnabled) {
+      this.messages = NEVER;
+      this.subscription = NEVER;
+      return;
+    }
+    this.messages = this.sw.eventsOfType('PUSH').pipe(map((message: any) => message.data));
+
+    this.pushManager = this.sw.registration.pipe(
+        map((registration: ServiceWorkerRegistration) => { return registration.pushManager; }));
+
+    const workerDrivenSubscriptions = this.pushManager.pipe(
+        switchMap((pm: PushManager) => pm.getSubscription().then(sub => { return sub; })));
+    this.subscription = merge(workerDrivenSubscriptions, this.subscriptionChanges);
+  }
+
+  /**
+   * Returns true if the Service Worker is enabled (supported by the browser and enabled via
+   * ServiceWorkerModule).
+   */
+  get isEnabled(): boolean { return this.sw.isEnabled; }
+
+  requestSubscription(options: {serverPublicKey: string}): Promise<PushSubscription> {
+    if (!this.sw.isEnabled) {
+      return Promise.reject(new Error(ERR_SW_NOT_SUPPORTED));
+    }
+    const pushOptions: PushSubscriptionOptionsInit = {userVisibleOnly: true};
+    let key = this.decodeBase64(options.serverPublicKey.replace(/_/g, '/').replace(/-/g, '+'));
+    let applicationServerKey = new Uint8Array(new ArrayBuffer(key.length));
+    for (let i = 0; i < key.length; i++) {
+      applicationServerKey[i] = key.charCodeAt(i);
+    }
+    pushOptions.applicationServerKey = applicationServerKey;
+
+    return this.pushManager.pipe(switchMap((pm: PushManager) => pm.subscribe(pushOptions)), take(1))
+        .toPromise()
+        .then(sub => {
+          this.subscriptionChanges.next(sub);
+          return sub;
+        });
+  }
+
+  unsubscribe(): Promise<void> {
+    if (!this.sw.isEnabled) {
+      return Promise.reject(new Error(ERR_SW_NOT_SUPPORTED));
+    }
+
+    const doUnsubscribe = (sub: PushSubscription | null) => {
+      if (sub === null) {
+        throw new Error('Not subscribed to push notifications.');
+      }
+
+      return sub.unsubscribe().then(success => {
+        if (!success) {
+          throw new Error('Unsubscribe failed!');
+        }
+
+        this.subscriptionChanges.next(null);
+      });
+    };
+
+    return this.subscription.pipe(take(1), switchMap(doUnsubscribe)).toPromise();
+  }
+
+  private decodeBase64(input: string): string { return atob(input); }
+}
diff --git a/packages/service-worker/src/update.ts b/packages/service-worker/src/update.ts
new file mode 100644
index 000000000000..92ba165faeab
--- /dev/null
+++ b/packages/service-worker/src/update.ts
@@ -0,0 +1,58 @@
+/**
+ * @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 {NEVER, Observable} from 'rxjs';
+
+import {ERR_SW_NOT_SUPPORTED, NgswCommChannel, UpdateActivatedEvent, UpdateAvailableEvent} from './low_level';
+
+
+
+/**
+ * Subscribe to update notifications from the Service Worker, trigger update
+ * checks, and forcibly activate updates.
+ *
+ * @experimental
+ */
+@Injectable()
+export class SwUpdate {
+  readonly available: Observable<UpdateAvailableEvent>;
+  readonly activated: Observable<UpdateActivatedEvent>;
+
+  constructor(private sw: NgswCommChannel) {
+    if (!sw.isEnabled) {
+      this.available = NEVER;
+      this.activated = NEVER;
+      return;
+    }
+    this.available = this.sw.eventsOfType<UpdateAvailableEvent>('UPDATE_AVAILABLE');
+    this.activated = this.sw.eventsOfType<UpdateActivatedEvent>('UPDATE_ACTIVATED');
+  }
+
+  /**
+   * Returns true if the Service Worker is enabled (supported by the browser and enabled via
+   * ServiceWorkerModule).
+   */
+  get isEnabled(): boolean { return this.sw.isEnabled; }
+
+  checkForUpdate(): Promise<void> {
+    if (!this.sw.isEnabled) {
+      return Promise.reject(new Error(ERR_SW_NOT_SUPPORTED));
+    }
+    const statusNonce = this.sw.generateNonce();
+    return this.sw.postMessageWithStatus('CHECK_FOR_UPDATES', {statusNonce}, statusNonce);
+  }
+
+  activateUpdate(): Promise<void> {
+    if (!this.sw.isEnabled) {
+      return Promise.reject(new Error(ERR_SW_NOT_SUPPORTED));
+    }
+    const statusNonce = this.sw.generateNonce();
+    return this.sw.postMessageWithStatus('ACTIVATE_UPDATE', {statusNonce}, statusNonce);
+  }
+}
diff --git a/packages/service-worker/test/BUILD.bazel b/packages/service-worker/test/BUILD.bazel
new file mode 100644
index 000000000000..fcf967139bfe
--- /dev/null
+++ b/packages/service-worker/test/BUILD.bazel
@@ -0,0 +1,35 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/service-worker",
+        "//packages/service-worker/testing",
+        "//packages/service-worker/worker",
+        "//packages/service-worker/worker/testing",
+        "@rxjs",
+        "@rxjs//operators",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    bootstrap = ["angular/tools/testing/init_node_spec.js"],
+    deps = [
+        ":test_lib",
+        "//tools/testing:node",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/service-worker/test/async.ts b/packages/service-worker/test/async.ts
new file mode 100644
index 000000000000..46de95925820
--- /dev/null
+++ b/packages/service-worker/test/async.ts
@@ -0,0 +1,28 @@
+/**
+ * @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
+ */
+
+function wrap(fn: () => Promise<void>): (done: DoneFn) => void {
+  return (done: DoneFn) => { fn().then(() => done()).catch(err => done.fail(err)); };
+}
+
+export function async_beforeAll(fn: () => Promise<void>): void {
+  beforeAll(wrap(fn));
+}
+
+export function async_beforeEach(fn: () => Promise<void>): void {
+  beforeEach(wrap(fn));
+}
+
+export function async_it(desc: string, fn: () => Promise<void>): void {
+  it(desc, wrap(fn));
+}
+
+export function async_fit(desc: string, fn: () => Promise<void>): void {
+  // tslint:disable-next-line:no-jasmine-focus
+  fit(desc, wrap(fn));
+}
diff --git a/packages/service-worker/test/comm_spec.ts b/packages/service-worker/test/comm_spec.ts
new file mode 100644
index 000000000000..74399689cee5
--- /dev/null
+++ b/packages/service-worker/test/comm_spec.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 {PLATFORM_ID} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+
+import {NgswCommChannel} from '../src/low_level';
+import {RegistrationOptions, ngswCommChannelFactory} from '../src/module';
+import {SwPush} from '../src/push';
+import {SwUpdate} from '../src/update';
+import {MockPushManager, MockPushSubscription, MockServiceWorkerContainer, MockServiceWorkerRegistration, patchDecodeBase64} from '../testing/mock';
+import {async_fit, async_it} from './async';
+
+{
+  describe('ServiceWorker library', () => {
+    let mock: MockServiceWorkerContainer;
+    let comm: NgswCommChannel;
+
+    beforeEach(() => {
+      mock = new MockServiceWorkerContainer();
+      comm = new NgswCommChannel(mock as any);
+    });
+
+    describe('NgswCommsChannel', () => {
+      it('can access the registration when it comes before subscription', done => {
+        const mock = new MockServiceWorkerContainer();
+        const comm = new NgswCommChannel(mock as any);
+        const regPromise = mock.getRegistration() as any as MockServiceWorkerRegistration;
+
+        mock.setupSw();
+
+        (comm as any).registration.subscribe((reg: any) => { done(); });
+      });
+      it('can access the registration when it comes after subscription', done => {
+        const mock = new MockServiceWorkerContainer();
+        const comm = new NgswCommChannel(mock as any);
+        const regPromise = mock.getRegistration() as any as MockServiceWorkerRegistration;
+
+        (comm as any).registration.subscribe((reg: any) => { done(); });
+
+        mock.setupSw();
+      });
+    });
+
+    describe('ngswCommChannelFactory', () => {
+      it('gives disabled NgswCommChannel for platform-server', () => {
+        TestBed.configureTestingModule({
+          providers: [
+            {provide: PLATFORM_ID, useValue: 'server'},
+            {provide: RegistrationOptions, useValue: {enabled: true}}, {
+              provide: NgswCommChannel,
+              useFactory: ngswCommChannelFactory,
+              deps: [RegistrationOptions, PLATFORM_ID]
+            }
+          ]
+        });
+
+        expect(TestBed.get(NgswCommChannel).isEnabled).toEqual(false);
+      });
+      it('gives disabled NgswCommChannel when \'enabled\' option is false', () => {
+        TestBed.configureTestingModule({
+          providers: [
+            {provide: PLATFORM_ID, useValue: 'browser'},
+            {provide: RegistrationOptions, useValue: {enabled: false}}, {
+              provide: NgswCommChannel,
+              useFactory: ngswCommChannelFactory,
+              deps: [RegistrationOptions, PLATFORM_ID]
+            }
+          ]
+        });
+
+        expect(TestBed.get(NgswCommChannel).isEnabled).toEqual(false);
+      });
+      it('gives disabled NgswCommChannel when navigator.serviceWorker is undefined', () => {
+        TestBed.configureTestingModule({
+          providers: [
+            {provide: PLATFORM_ID, useValue: 'browser'},
+            {provide: RegistrationOptions, useValue: {enabled: true}},
+            {
+              provide: NgswCommChannel,
+              useFactory: ngswCommChannelFactory,
+              deps: [RegistrationOptions, PLATFORM_ID],
+            },
+          ],
+        });
+
+        const context: any = global || window;
+        const originalDescriptor = Object.getOwnPropertyDescriptor(context, 'navigator');
+        const patchedDescriptor = {value: {serviceWorker: undefined}, configurable: true};
+
+        try {
+          // Set `navigator` to `{serviceWorker: undefined}`.
+          Object.defineProperty(context, 'navigator', patchedDescriptor);
+          expect(TestBed.get(NgswCommChannel).isEnabled).toBe(false);
+        } finally {
+          if (originalDescriptor) {
+            Object.defineProperty(context, 'navigator', originalDescriptor);
+          } else {
+            delete context.navigator;
+          }
+        }
+      });
+      it('gives enabled NgswCommChannel when browser supports SW and enabled option is true',
+         () => {
+           TestBed.configureTestingModule({
+             providers: [
+               {provide: PLATFORM_ID, useValue: 'browser'},
+               {provide: RegistrationOptions, useValue: {enabled: true}}, {
+                 provide: NgswCommChannel,
+                 useFactory: ngswCommChannelFactory,
+                 deps: [RegistrationOptions, PLATFORM_ID]
+               }
+             ]
+           });
+
+           const context: any = global || window;
+           const originalDescriptor = Object.getOwnPropertyDescriptor(context, 'navigator');
+           const patchedDescriptor = {value: {serviceWorker: mock}, configurable: true};
+
+           try {
+             // Set `navigator` to `{serviceWorker: mock}`.
+             Object.defineProperty(context, 'navigator', patchedDescriptor);
+             expect(TestBed.get(NgswCommChannel).isEnabled).toBe(true);
+           } finally {
+             if (originalDescriptor) {
+               Object.defineProperty(context, 'navigator', originalDescriptor);
+             } else {
+               delete context.navigator;
+             }
+           }
+         });
+    });
+
+    describe('SwPush', () => {
+      let unpatchDecodeBase64: () => void;
+      let push: SwPush;
+
+      // Patch `SwPush.decodeBase64()` in Node.js (where `atob` is not available).
+      beforeAll(() => unpatchDecodeBase64 = patchDecodeBase64(SwPush.prototype as any));
+      afterAll(() => unpatchDecodeBase64());
+
+      beforeEach(() => {
+        push = new SwPush(comm);
+        mock.setupSw();
+      });
+
+      it('is injectable', () => {
+        TestBed.configureTestingModule({
+          providers: [
+            SwPush,
+            {provide: NgswCommChannel, useValue: comm},
+          ]
+        });
+        expect(() => TestBed.get(SwPush)).not.toThrow();
+      });
+
+      describe('requestSubscription()', () => {
+        async_it('returns a promise that resolves to the subscription', async() => {
+          const promise = push.requestSubscription({serverPublicKey: 'test'});
+          expect(promise).toEqual(jasmine.any(Promise));
+
+          const sub = await promise;
+          expect(sub).toEqual(jasmine.any(MockPushSubscription));
+        });
+
+        async_it('calls `PushManager.subscribe()` (with appropriate options)', async() => {
+          const decode = (charCodeArr: Uint8Array) =>
+              Array.from(charCodeArr).map(c => String.fromCharCode(c)).join('');
+
+          // atob('c3ViamVjdHM/') === 'subjects?'
+          const serverPublicKey = 'c3ViamVjdHM_';
+          const appServerKeyStr = 'subjects?';
+
+          const pmSubscribeSpy = spyOn(MockPushManager.prototype, 'subscribe').and.callThrough();
+          await push.requestSubscription({serverPublicKey});
+
+          expect(pmSubscribeSpy).toHaveBeenCalledTimes(1);
+          expect(pmSubscribeSpy).toHaveBeenCalledWith({
+            applicationServerKey: jasmine.any(Uint8Array),
+            userVisibleOnly: true,
+          });
+
+          const actualAppServerKey = pmSubscribeSpy.calls.first().args[0].applicationServerKey;
+          const actualAppServerKeyStr = decode(actualAppServerKey);
+          expect(actualAppServerKeyStr).toBe(appServerKeyStr);
+        });
+
+        async_it('emits the new `PushSubscription` on `SwPush.subscription`', async() => {
+          const subscriptionSpy = jasmine.createSpy('subscriptionSpy');
+          push.subscription.subscribe(subscriptionSpy);
+          const sub = await push.requestSubscription({serverPublicKey: 'test'});
+
+          expect(subscriptionSpy).toHaveBeenCalledWith(sub);
+        });
+      });
+
+      describe('unsubscribe()', () => {
+        let psUnsubscribeSpy: jasmine.Spy;
+
+        beforeEach(() => {
+          psUnsubscribeSpy = spyOn(MockPushSubscription.prototype, 'unsubscribe').and.callThrough();
+        });
+
+        async_it('rejects if currently not subscribed to push notifications', async() => {
+          try {
+            await push.unsubscribe();
+            throw new Error('`unsubscribe()` should fail');
+          } catch (err) {
+            expect(err.message).toBe('Not subscribed to push notifications.');
+          }
+        });
+
+        async_it('calls `PushSubscription.unsubscribe()`', async() => {
+          await push.requestSubscription({serverPublicKey: 'test'});
+          await push.unsubscribe();
+
+          expect(psUnsubscribeSpy).toHaveBeenCalledTimes(1);
+        });
+
+        async_it('rejects if `PushSubscription.unsubscribe()` fails', async() => {
+          psUnsubscribeSpy.and.callFake(() => { throw new Error('foo'); });
+
+          try {
+            await push.requestSubscription({serverPublicKey: 'test'});
+            await push.unsubscribe();
+            throw new Error('`unsubscribe()` should fail');
+          } catch (err) {
+            expect(err.message).toBe('foo');
+          }
+        });
+
+        async_it('rejects if `PushSubscription.unsubscribe()` returns false', async() => {
+          psUnsubscribeSpy.and.returnValue(Promise.resolve(false));
+
+          try {
+            await push.requestSubscription({serverPublicKey: 'test'});
+            await push.unsubscribe();
+            throw new Error('`unsubscribe()` should fail');
+          } catch (err) {
+            expect(err.message).toBe('Unsubscribe failed!');
+          }
+        });
+
+        async_it('emits `null` on `SwPush.subscription`', async() => {
+          const subscriptionSpy = jasmine.createSpy('subscriptionSpy');
+          push.subscription.subscribe(subscriptionSpy);
+
+          await push.requestSubscription({serverPublicKey: 'test'});
+          await push.unsubscribe();
+
+          expect(subscriptionSpy).toHaveBeenCalledWith(null);
+        });
+
+        async_it('does not emit on `SwPush.subscription` on failure', async() => {
+          const subscriptionSpy = jasmine.createSpy('subscriptionSpy');
+          const initialSubEmit = new Promise(resolve => subscriptionSpy.and.callFake(resolve));
+
+          push.subscription.subscribe(subscriptionSpy);
+          await initialSubEmit;
+          subscriptionSpy.calls.reset();
+
+          // Error due to no subscription.
+          await push.unsubscribe().catch(() => undefined);
+          expect(subscriptionSpy).not.toHaveBeenCalled();
+
+          // Subscribe.
+          await push.requestSubscription({serverPublicKey: 'test'});
+          subscriptionSpy.calls.reset();
+
+          // Error due to `PushSubscription.unsubscribe()` error.
+          psUnsubscribeSpy.and.callFake(() => { throw new Error('foo'); });
+          await push.unsubscribe().catch(() => undefined);
+          expect(subscriptionSpy).not.toHaveBeenCalled();
+
+          // Error due to `PushSubscription.unsubscribe()` failure.
+          psUnsubscribeSpy.and.returnValue(Promise.resolve(false));
+          await push.unsubscribe().catch(() => undefined);
+          expect(subscriptionSpy).not.toHaveBeenCalled();
+        });
+      });
+
+      describe('messages', () => {
+        it('receives push messages', () => {
+          const sendMessage = (type: string, message: string) =>
+              mock.sendMessage({type, data: {message}});
+
+          const receivedMessages: string[] = [];
+          push.messages.subscribe((msg: {message: string}) => receivedMessages.push(msg.message));
+
+          sendMessage('PUSH', 'this was a push message');
+          sendMessage('NOTPUSH', 'this was not a push message');
+          sendMessage('PUSH', 'this was a push message too');
+          sendMessage('HSUP', 'this was a HSUP message');
+
+          expect(receivedMessages).toEqual([
+            'this was a push message',
+            'this was a push message too',
+          ]);
+        });
+      });
+
+      describe('subscription', () => {
+        let nextSubEmitResolve: () => void;
+        let nextSubEmitPromise: Promise<void>;
+        let subscriptionSpy: jasmine.Spy;
+
+        beforeEach(() => {
+          nextSubEmitPromise = new Promise(resolve => nextSubEmitResolve = resolve);
+          subscriptionSpy = jasmine.createSpy('subscriptionSpy').and.callFake(() => {
+            nextSubEmitResolve();
+            nextSubEmitPromise = new Promise(resolve => nextSubEmitResolve = resolve);
+          });
+
+          push.subscription.subscribe(subscriptionSpy);
+        });
+
+        async_it('emits on worker-driven changes (i.e. when the controller changes)', async() => {
+          // Initial emit for the current `ServiceWorkerController`.
+          await nextSubEmitPromise;
+          expect(subscriptionSpy).toHaveBeenCalledTimes(1);
+          expect(subscriptionSpy).toHaveBeenCalledWith(null);
+
+          subscriptionSpy.calls.reset();
+
+          // Simulate a `ServiceWorkerController` change.
+          mock.setupSw();
+          await nextSubEmitPromise;
+          expect(subscriptionSpy).toHaveBeenCalledTimes(1);
+          expect(subscriptionSpy).toHaveBeenCalledWith(null);
+        });
+
+        async_it('emits on subscription changes (i.e. when subscribing/unsubscribing)', async() => {
+          await nextSubEmitPromise;
+          subscriptionSpy.calls.reset();
+
+          // Subscribe.
+          await push.requestSubscription({serverPublicKey: 'test'});
+          expect(subscriptionSpy).toHaveBeenCalledTimes(1);
+          expect(subscriptionSpy).toHaveBeenCalledWith(jasmine.any(MockPushSubscription));
+
+          subscriptionSpy.calls.reset();
+
+          // Subscribe again.
+          await push.requestSubscription({serverPublicKey: 'test'});
+          expect(subscriptionSpy).toHaveBeenCalledTimes(1);
+          expect(subscriptionSpy).toHaveBeenCalledWith(jasmine.any(MockPushSubscription));
+
+          subscriptionSpy.calls.reset();
+
+          // Unsubscribe.
+          await push.unsubscribe();
+          expect(subscriptionSpy).toHaveBeenCalledTimes(1);
+          expect(subscriptionSpy).toHaveBeenCalledWith(null);
+        });
+      });
+
+      describe('with no SW', () => {
+        beforeEach(() => {
+          comm = new NgswCommChannel(undefined);
+          push = new SwPush(comm);
+        });
+
+        it('does not crash on subscription to observables', () => {
+          push.messages.toPromise().catch(err => fail(err));
+          push.subscription.toPromise().catch(err => fail(err));
+        });
+
+        it('gives an error when registering', done => {
+          push.requestSubscription({serverPublicKey: 'test'}).catch(err => { done(); });
+        });
+
+        it('gives an error when unsubscribing',
+           done => { push.unsubscribe().catch(err => { done(); }); });
+      });
+    });
+
+    describe('SwUpdate', () => {
+      let update: SwUpdate;
+      beforeEach(() => {
+        update = new SwUpdate(comm);
+        mock.setupSw();
+      });
+      it('processes update availability notifications when sent', done => {
+        update.available.subscribe(event => {
+          expect(event.current).toEqual({hash: 'A'});
+          expect(event.available).toEqual({hash: 'B'});
+          expect(event.type).toEqual('UPDATE_AVAILABLE');
+          done();
+        });
+        mock.sendMessage({
+          type: 'UPDATE_AVAILABLE',
+          current: {
+            hash: 'A',
+          },
+          available: {
+            hash: 'B',
+          },
+        });
+      });
+      it('processes update activation notifications when sent', done => {
+        update.activated.subscribe(event => {
+          expect(event.previous).toEqual({hash: 'A'});
+          expect(event.current).toEqual({hash: 'B'});
+          expect(event.type).toEqual('UPDATE_ACTIVATED');
+          done();
+        });
+        mock.sendMessage({
+          type: 'UPDATE_ACTIVATED',
+          previous: {
+            hash: 'A',
+          },
+          current: {
+            hash: 'B',
+          },
+        });
+      });
+      it('activates updates when requested', done => {
+        mock.messages.subscribe((msg: {action: string, statusNonce: number}) => {
+          expect(msg.action).toEqual('ACTIVATE_UPDATE');
+          mock.sendMessage({
+            type: 'STATUS',
+            nonce: msg.statusNonce,
+            status: true,
+          });
+        });
+        return update.activateUpdate().then(() => done()).catch(err => done.fail(err));
+      });
+      it('reports activation failure when requested', done => {
+        mock.messages.subscribe((msg: {action: string, statusNonce: number}) => {
+          expect(msg.action).toEqual('ACTIVATE_UPDATE');
+          mock.sendMessage({
+            type: 'STATUS',
+            nonce: msg.statusNonce,
+            status: false,
+            error: 'Failed to activate',
+          });
+        });
+        return update.activateUpdate()
+            .catch(err => { expect(err.message).toEqual('Failed to activate'); })
+            .then(() => done())
+            .catch(err => done.fail(err));
+      });
+      it('is injectable', () => {
+        TestBed.configureTestingModule({
+          providers: [
+            SwUpdate,
+            {provide: NgswCommChannel, useValue: comm},
+          ]
+        });
+        expect(() => TestBed.get(SwUpdate)).not.toThrow();
+      });
+      describe('with no SW', () => {
+        beforeEach(() => { comm = new NgswCommChannel(undefined); });
+        it('can be instantiated', () => { update = new SwUpdate(comm); });
+        it('does not crash on subscription to observables', () => {
+          update = new SwUpdate(comm);
+          update.available.toPromise().catch(err => fail(err));
+          update.activated.toPromise().catch(err => fail(err));
+        });
+        it('gives an error when checking for updates', done => {
+          update = new SwUpdate(comm);
+          update.checkForUpdate().catch(err => { done(); });
+        });
+        it('gives an error when activating updates', done => {
+          update = new SwUpdate(comm);
+          update.activateUpdate().catch(err => { done(); });
+        });
+      });
+    });
+  });
+}
diff --git a/packages/service-worker/test/integration_spec.ts b/packages/service-worker/test/integration_spec.ts
new file mode 100644
index 000000000000..93cf7021f771
--- /dev/null
+++ b/packages/service-worker/test/integration_spec.ts
@@ -0,0 +1,132 @@
+/**
+ * @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';
+import {take} from 'rxjs/operators';
+
+import {NgswCommChannel} from '../src/low_level';
+import {SwPush} from '../src/push';
+import {SwUpdate} from '../src/update';
+import {MockServiceWorkerContainer, MockServiceWorkerRegistration} from '../testing/mock';
+import {CacheDatabase} from '../worker/src/db-cache';
+import {Driver} from '../worker/src/driver';
+import {Manifest} from '../worker/src/manifest';
+import {MockRequest} from '../worker/testing/fetch';
+import {MockFileSystemBuilder, MockServerStateBuilder, tmpHashTableForFs} from '../worker/testing/mock';
+import {SwTestHarness, SwTestHarnessBuilder} from '../worker/testing/scope';
+
+import {async_beforeEach, async_fit, async_it} from './async';
+
+const dist = new MockFileSystemBuilder().addFile('/only.txt', 'this is only').build();
+
+const distUpdate = new MockFileSystemBuilder().addFile('/only.txt', 'this is only v2').build();
+
+function obsToSinglePromise<T>(obs: Observable<T>): Promise<T> {
+  return obs.pipe(take(1)).toPromise();
+}
+
+const manifest: Manifest = {
+  configVersion: 1,
+  appData: {version: '1'},
+  index: '/only.txt',
+  assetGroups: [{
+    name: 'assets',
+    installMode: 'prefetch',
+    updateMode: 'prefetch',
+    urls: ['/only.txt'],
+    patterns: [],
+  }],
+  navigationUrls: [],
+  hashTable: tmpHashTableForFs(dist),
+};
+
+const manifestUpdate: Manifest = {
+  configVersion: 1,
+  appData: {version: '2'},
+  index: '/only.txt',
+  assetGroups: [{
+    name: 'assets',
+    installMode: 'prefetch',
+    updateMode: 'prefetch',
+    urls: ['/only.txt'],
+    patterns: [],
+  }],
+  navigationUrls: [],
+  hashTable: tmpHashTableForFs(distUpdate),
+};
+
+const server = new MockServerStateBuilder().withStaticFiles(dist).withManifest(manifest).build();
+
+const serverUpdate =
+    new MockServerStateBuilder().withStaticFiles(distUpdate).withManifest(manifestUpdate).build();
+
+(function() {
+  // Skip environments that don't support the minimum APIs needed to run the SW tests.
+  if (!SwTestHarness.envIsSupported()) {
+    return;
+  }
+  describe('ngsw + companion lib', () => {
+    let mock: MockServiceWorkerContainer;
+    let comm: NgswCommChannel;
+    let reg: MockServiceWorkerRegistration;
+    let scope: SwTestHarness;
+    let driver: Driver;
+
+    async_beforeEach(async() => {
+      // Fire up the client.
+      mock = new MockServiceWorkerContainer();
+      comm = new NgswCommChannel(mock as any);
+      scope = new SwTestHarnessBuilder().withServerState(server).build();
+      driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+
+      scope.clients.add('default');
+      scope.clients.getMock('default') !.queue.subscribe(msg => { mock.sendMessage(msg); });
+
+      mock.messages.subscribe(msg => { scope.handleMessage(msg, 'default'); });
+
+      mock.setupSw();
+      reg = mock.mockRegistration !;
+
+      await Promise.all(scope.handleFetch(new MockRequest('/only.txt'), 'default'));
+      await driver.initialized;
+    });
+
+    async_it('communicates back and forth via update check', async() => {
+      const update = new SwUpdate(comm);
+      await update.checkForUpdate();
+    });
+
+    async_it('detects an actual update', async() => {
+      const update = new SwUpdate(comm);
+      scope.updateServerState(serverUpdate);
+
+      const gotUpdateNotice =
+          (async() => { const notice = await obsToSinglePromise(update.available); })();
+
+      await update.checkForUpdate();
+      await gotUpdateNotice;
+    });
+
+    async_it('receives push message notifications', async() => {
+      const push = new SwPush(comm);
+      scope.updateServerState(serverUpdate);
+
+      const gotPushNotice = (async() => {
+        const message = await obsToSinglePromise(push.messages);
+        expect(message).toEqual({
+          test: 'success',
+        });
+      })();
+
+      await scope.handlePush({
+        test: 'success',
+      });
+      await gotPushNotice;
+    });
+  });
+})();
diff --git a/packages/service-worker/testing/BUILD.bazel b/packages/service-worker/testing/BUILD.bazel
new file mode 100644
index 000000000000..0e72cfe4c7be
--- /dev/null
+++ b/packages/service-worker/testing/BUILD.bazel
@@ -0,0 +1,14 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "testing",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    module_name = "@angular/service-worker/testing",
+    deps = [
+        "//packages/core",
+        "@rxjs",
+    ],
+)
diff --git a/packages/service-worker/testing/mock.ts b/packages/service-worker/testing/mock.ts
new file mode 100644
index 000000000000..3eb1cfe588f9
--- /dev/null
+++ b/packages/service-worker/testing/mock.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 {Subject} from 'rxjs';
+
+export const patchDecodeBase64 = (proto: {decodeBase64: typeof atob}) => {
+  let unpatch: () => void = () => undefined;
+
+  if ((typeof atob === 'undefined') && (typeof Buffer === 'function')) {
+    const oldDecodeBase64 = proto.decodeBase64;
+    const newDecodeBase64 = (input: string) => Buffer.from(input, 'base64').toString('binary');
+
+    proto.decodeBase64 = newDecodeBase64;
+    unpatch = () => { proto.decodeBase64 = oldDecodeBase64; };
+  }
+
+  return unpatch;
+};
+
+export class MockServiceWorkerContainer {
+  private onControllerChange: Function[] = [];
+  private onMessage: Function[] = [];
+  mockRegistration: MockServiceWorkerRegistration|null = null;
+  controller: MockServiceWorker|null = null;
+  messages = new Subject();
+
+  addEventListener(event: 'controllerchange'|'message', handler: Function) {
+    if (event === 'controllerchange') {
+      this.onControllerChange.push(handler);
+    } else if (event === 'message') {
+      this.onMessage.push(handler);
+    }
+  }
+
+  removeEventListener(event: 'controllerchange', handler: Function) {
+    if (event === 'controllerchange') {
+      this.onControllerChange = this.onControllerChange.filter(h => h !== handler);
+    } else if (event === 'message') {
+      this.onMessage = this.onMessage.filter(h => h !== handler);
+    }
+  }
+
+  async register(url: string): Promise<void> { return; }
+
+  async getRegistration(): Promise<ServiceWorkerRegistration> {
+    return this.mockRegistration as any;
+  }
+
+  setupSw(url: string = '/ngsw-worker.js'): void {
+    this.mockRegistration = new MockServiceWorkerRegistration();
+    this.controller = new MockServiceWorker(this, url);
+    this.onControllerChange.forEach(onChange => onChange(this.controller));
+  }
+
+  sendMessage(value: Object): void {
+    this.onMessage.forEach(onMessage => onMessage({
+                             data: value,
+                           }));
+  }
+}
+
+export class MockServiceWorker {
+  constructor(private mock: MockServiceWorkerContainer, readonly scriptURL: string) {}
+
+  postMessage(value: Object) { this.mock.messages.next(value); }
+}
+
+export class MockServiceWorkerRegistration {
+  pushManager: PushManager = new MockPushManager() as any;
+}
+
+export class MockPushManager {
+  private subscription: PushSubscription|null = null;
+
+  getSubscription(): Promise<PushSubscription|null> { return Promise.resolve(this.subscription); }
+
+  subscribe(options?: PushSubscriptionOptionsInit): Promise<PushSubscription> {
+    this.subscription = new MockPushSubscription() as any;
+    return Promise.resolve(this.subscription !);
+  }
+}
+
+export class MockPushSubscription {
+  unsubscribe(): Promise<boolean> { return Promise.resolve(true); }
+}
diff --git a/packages/service-worker/tsconfig-build.json b/packages/service-worker/tsconfig-build.json
new file mode 100644
index 000000000000..9e6c2b0ad293
--- /dev/null
+++ b/packages/service-worker/tsconfig-build.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/common": ["../../dist/packages/common"]
+    },
+    "outDir": "../../dist/packages/service-worker"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "flatModuleOutFile": "service-worker.js",
+    "flatModuleId": "@angular/service-worker",
+    "skipTemplateCodegen": true
+  }
+}
diff --git a/packages/service-worker/worker/BUILD.bazel b/packages/service-worker/worker/BUILD.bazel
new file mode 100644
index 000000000000..121809e63a2b
--- /dev/null
+++ b/packages/service-worker/worker/BUILD.bazel
@@ -0,0 +1,31 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+
+ts_library(
+    name = "worker",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+        exclude = ["main.ts"],
+    ),
+    tsconfig = ":tsconfig.json",
+)
+
+ts_library(
+    name = "main",
+    srcs = ["main.ts"],
+    tsconfig = ":tsconfig.json",
+    deps = [":worker"],
+)
+
+ng_rollup_bundle(
+    name = "ngsw_worker",
+    entry_point = "packages/service-worker/worker/main.js",
+    deps = [
+        ":main",
+    ],
+)
diff --git a/packages/service-worker/worker/main.ts b/packages/service-worker/worker/main.ts
new file mode 100644
index 000000000000..11f86ccb5eae
--- /dev/null
+++ b/packages/service-worker/worker/main.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {Adapter} from './src/adapter';
+import {CacheDatabase} from './src/db-cache';
+import {Driver} from './src/driver';
+
+const scope = self as any as ServiceWorkerGlobalScope;
+
+const adapter = new Adapter();
+const driver = new Driver(scope, adapter, new CacheDatabase(scope, adapter));
diff --git a/packages/service-worker/worker/rollup-worker.config.js b/packages/service-worker/worker/rollup-worker.config.js
new file mode 100644
index 000000000000..bf8be460f95f
--- /dev/null
+++ b/packages/service-worker/worker/rollup-worker.config.js
@@ -0,0 +1,13 @@
+/**
+ * @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/all/@angular/service-worker/worker-es2017/main.js',
+  dest: '../../dist/packages-dist/service-worker/ngsw-worker.js',
+  format: 'iife',
+};
diff --git a/packages/service-worker/worker/src/adapter.ts b/packages/service-worker/worker/src/adapter.ts
new file mode 100644
index 000000000000..dfd30be040e4
--- /dev/null
+++ b/packages/service-worker/worker/src/adapter.ts
@@ -0,0 +1,68 @@
+/**
+ * @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
+ */
+
+/**
+ * Adapts the service worker to its runtime environment.
+ *
+ * Mostly, this is used to mock out identifiers which are otherwise read
+ * from the global scope.
+ */
+export class Adapter {
+  /**
+   * Wrapper around the `Request` constructor.
+   */
+  newRequest(input: string|Request, init?: RequestInit): Request {
+    return new Request(input, init);
+  }
+
+  /**
+   * Wrapper around the `Response` constructor.
+   */
+  newResponse(body: any, init?: ResponseInit) { return new Response(body, init); }
+
+  /**
+   * Wrapper around the `Headers` constructor.
+   */
+  newHeaders(headers: {[name: string]: string}): Headers { return new Headers(headers); }
+
+  /**
+   * Test if a given object is an instance of `Client`.
+   */
+  isClient(source: any): source is Client { return (source instanceof Client); }
+
+  /**
+   * Read the current UNIX time in milliseconds.
+   */
+  get time(): number { return Date.now(); }
+
+  /**
+   * Extract the pathname of a URL.
+   */
+  parseUrl(url: string, relativeTo: string): {origin: string, path: string} {
+    const parsed = new URL(url, relativeTo);
+    return {origin: parsed.origin, path: parsed.pathname};
+  }
+
+  /**
+   * Wait for a given amount of time before completing a Promise.
+   */
+  timeout(ms: number): Promise<void> {
+    return new Promise<void>(resolve => { setTimeout(() => resolve(), ms); });
+  }
+}
+
+/**
+ * An event context in which an operation is taking place, which allows
+ * the delaying of Service Worker shutdown until certain triggers occur.
+ */
+export interface Context {
+  /**
+   * Delay shutdown of the Service Worker until the given promise resolves.
+   */
+  waitUntil(fn: Promise<any>): void;
+}
diff --git a/packages/service-worker/worker/src/api.ts b/packages/service-worker/worker/src/api.ts
new file mode 100644
index 000000000000..9ed515772514
--- /dev/null
+++ b/packages/service-worker/worker/src/api.ts
@@ -0,0 +1,111 @@
+/**
+ * @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 enum UpdateCacheStatus {
+  NOT_CACHED,
+  CACHED_BUT_UNUSED,
+  CACHED,
+}
+
+/**
+ * A source for old versions of URL contents and other resources.
+ *
+ * Used to abstract away the fetching of old contents, to avoid a
+ * circular dependency between the `Driver` and `AppVersion`. Without
+ * this interface, `AppVersion` would need a reference to the `Driver`
+ * to access information from other versions.
+ */
+export interface UpdateSource {
+  /**
+   * Lookup an older version of a resource for which the hash is known.
+   *
+   * If an old version of the resource doesn't exist, or exists but does
+   * not match the hash given, this returns null.
+   */
+  lookupResourceWithHash(url: string, hash: string): Promise<Response|null>;
+
+  /**
+   * Lookup an older version of a resource for which the hash is not known.
+   *
+   * This will return the most recent previous version of the resource, if
+   * it exists. It returns a `CacheState` object which encodes not only the
+   * `Response`, but the cache metadata needed to re-cache the resource in
+   * a newer `AppVersion`.
+   */
+  lookupResourceWithoutHash(url: string): Promise<CacheState|null>;
+
+  /**
+   * List the URLs of all of the resources which were previously cached.
+   *
+   * This allows for the discovery of resources which are not listed in the
+   * manifest but which were picked up because they matched URL patterns.
+   */
+  previouslyCachedResources(): Promise<string[]>;
+
+  /**
+   * Check whether a particular resource exists in the most recent cache.
+   *
+   * This returns a state value which indicates whether the resource was
+   * cached at all and whether that cache was utilized.
+   */
+  recentCacheStatus(url: string): Promise<UpdateCacheStatus>;
+}
+
+/**
+ * Metadata cached along with a URL.
+ */
+export interface UrlMetadata {
+  /**
+   * The timestamp, in UNIX time in milliseconds, of when this URL was stored
+   * in the cache.
+   */
+  ts: number;
+
+  /**
+   * Whether the resource was requested before for this particular cached
+   * instance.
+   */
+  used: boolean;
+}
+
+/**
+ * The fully cached state of a resource, including both the `Response` itself
+ * and the cache metadata.
+ */
+export interface CacheState {
+  response: Response;
+  metadata?: UrlMetadata;
+}
+
+export interface DebugLogger { log(value: string|Error, context?: string): void; }
+
+export interface DebugState {
+  state: string;
+  why: string;
+  latestHash: string|null;
+  lastUpdateCheck: number|null;
+}
+
+export interface DebugVersion {
+  hash: string;
+  manifest: Object;
+  clients: string[];
+  status: string;
+}
+
+export interface DebugIdleState {
+  queue: string[];
+  lastTrigger: number|null;
+  lastRun: number|null;
+}
+
+export interface Debuggable {
+  debugState(): Promise<DebugState>;
+  debugVersions(): Promise<DebugVersion[]>;
+  debugIdleState(): Promise<DebugIdleState>;
+}
\ No newline at end of file
diff --git a/packages/service-worker/worker/src/app-version.ts b/packages/service-worker/worker/src/app-version.ts
new file mode 100644
index 000000000000..1329c9aaf4ba
--- /dev/null
+++ b/packages/service-worker/worker/src/app-version.ts
@@ -0,0 +1,282 @@
+/**
+ * @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 {Adapter, Context} from './adapter';
+import {CacheState, UpdateCacheStatus, UpdateSource} from './api';
+import {AssetGroup, LazyAssetGroup, PrefetchAssetGroup} from './assets';
+import {DataGroup} from './data';
+import {Database} from './database';
+import {IdleScheduler} from './idle';
+import {Manifest} from './manifest';
+
+
+/**
+ * A specific version of the application, identified by a unique manifest
+ * as determined by its hash.
+ *
+ * Each `AppVersion` can be thought of as a published version of the app
+ * that can be installed as an update to any previously installed versions.
+ */
+export class AppVersion implements UpdateSource {
+  /**
+   * A Map of absolute URL paths (/foo.txt) to the known hash of their
+   * contents (if available).
+   */
+  private hashTable = new Map<string, string>();
+
+  /**
+   * All of the asset groups active in this version of the app.
+   */
+  private assetGroups: AssetGroup[];
+
+  /**
+   * All of the data groups active in this version of the app.
+   */
+  private dataGroups: DataGroup[];
+
+  /**
+   * Requests to URLs that match any of the `include` RegExps and none of the `exclude` RegExps
+   * are considered navigation requests and handled accordingly.
+   */
+  private navigationUrls: {include: RegExp[], exclude: RegExp[]};
+
+  /**
+   * Tracks whether the manifest has encountered any inconsistencies.
+   */
+  private _okay = true;
+
+  get okay(): boolean { return this._okay; }
+
+  constructor(
+      private scope: ServiceWorkerGlobalScope, private adapter: Adapter, private database: Database,
+      private idle: IdleScheduler, readonly manifest: Manifest, readonly manifestHash: string) {
+    // The hashTable within the manifest is an Object - convert it to a Map for easier lookups.
+    Object.keys(this.manifest.hashTable).forEach(url => {
+      this.hashTable.set(url, this.manifest.hashTable[url]);
+    });
+
+    // Process each `AssetGroup` declared in the manifest. Each declared group gets an `AssetGroup`
+    // instance
+    // created for it, of a type that depends on the configuration mode.
+    this.assetGroups = (manifest.assetGroups || []).map(config => {
+      // Every asset group has a cache that's prefixed by the manifest hash and the name of the
+      // group.
+      const prefix = `ngsw:${this.manifestHash}:assets`;
+      // Check the caching mode, which determines when resources will be fetched/updated.
+      switch (config.installMode) {
+        case 'prefetch':
+          return new PrefetchAssetGroup(
+              this.scope, this.adapter, this.idle, config, this.hashTable, this.database, prefix);
+        case 'lazy':
+          return new LazyAssetGroup(
+              this.scope, this.adapter, this.idle, config, this.hashTable, this.database, prefix);
+      }
+    });
+
+    // Process each `DataGroup` declared in the manifest.
+    this.dataGroups = (manifest.dataGroups || [])
+                          .map(
+                              config => new DataGroup(
+                                  this.scope, this.adapter, config, this.database,
+                                  `ngsw:${config.version}:data`));
+
+    // Create `include`/`exclude` RegExps for the `navigationUrls` declared in the manifest.
+    const includeUrls = manifest.navigationUrls.filter(spec => spec.positive);
+    const excludeUrls = manifest.navigationUrls.filter(spec => !spec.positive);
+    this.navigationUrls = {
+      include: includeUrls.map(spec => new RegExp(spec.regex)),
+      exclude: excludeUrls.map(spec => new RegExp(spec.regex)),
+    };
+  }
+
+  /**
+   * Fully initialize this version of the application. If this Promise resolves successfully, all
+   * required
+   * data has been safely downloaded.
+   */
+  async initializeFully(updateFrom?: UpdateSource): Promise<void> {
+    try {
+      // Fully initialize each asset group, in series. Starts with an empty Promise,
+      // and waits for the previous groups to have been initialized before initializing
+      // the next one in turn.
+      await this.assetGroups.reduce<Promise<void>>(async(previous, group) => {
+        // Wait for the previous groups to complete initialization. If there is a
+        // failure, this will throw, and each subsequent group will throw, until the
+        // whole sequence fails.
+        await previous;
+
+        // Initialize this group.
+        return group.initializeFully(updateFrom);
+      }, Promise.resolve());
+    } catch (err) {
+      this._okay = false;
+      throw err;
+    }
+  }
+
+  async handleFetch(req: Request, context: Context): Promise<Response|null> {
+    // Check the request against each `AssetGroup` in sequence. If an `AssetGroup` can't handle the
+    // request,
+    // it will return `null`. Thus, the first non-null response is the SW's answer to the request.
+    // So reduce
+    // the group list, keeping track of a possible response. If there is one, it gets passed
+    // through, and if
+    // not the next group is consulted to produce a candidate response.
+    const asset = await this.assetGroups.reduce(async(potentialResponse, group) => {
+      // Wait on the previous potential response. If it's not null, it should just be passed
+      // through.
+      const resp = await potentialResponse;
+      if (resp !== null) {
+        return resp;
+      }
+
+      // No response has been found yet. Maybe this group will have one.
+      return group.handleFetch(req, context);
+    }, Promise.resolve<Response|null>(null));
+
+    // The result of the above is the asset response, if there is any, or null otherwise. Return the
+    // asset
+    // response if there was one. If not, check with the data caching groups.
+    if (asset !== null) {
+      return asset;
+    }
+
+    // Perform the same reduction operation as above, but this time processing
+    // the data caching groups.
+    const data = await this.dataGroups.reduce(async(potentialResponse, group) => {
+      const resp = await potentialResponse;
+      if (resp !== null) {
+        return resp;
+      }
+
+      return group.handleFetch(req, context);
+    }, Promise.resolve<Response|null>(null));
+
+    // If the data caching group returned a response, go with it.
+    if (data !== null) {
+      return data;
+    }
+
+    // Next, check if this is a navigation request for a route. Detect circular
+    // navigations by checking if the request URL is the same as the index URL.
+    if (req.url !== this.manifest.index && this.isNavigationRequest(req)) {
+      // This was a navigation request. Re-enter `handleFetch` with a request for
+      // the URL.
+      return this.handleFetch(this.adapter.newRequest(this.manifest.index), context);
+    }
+
+    return null;
+  }
+
+  /**
+   * Determine whether the request is a navigation request.
+   * Takes into account: Request mode, `Accept` header, `navigationUrls` patterns.
+   */
+  isNavigationRequest(req: Request): boolean {
+    if (req.mode !== 'navigate') {
+      return false;
+    }
+
+    if (!this.acceptsTextHtml(req)) {
+      return false;
+    }
+
+    const urlPrefix = this.scope.registration.scope.replace(/\/$/, '');
+    const url = req.url.startsWith(urlPrefix) ? req.url.substr(urlPrefix.length) : req.url;
+    const urlWithoutQueryOrHash = url.replace(/[?#].*$/, '');
+
+    return this.navigationUrls.include.some(regex => regex.test(urlWithoutQueryOrHash)) &&
+        !this.navigationUrls.exclude.some(regex => regex.test(urlWithoutQueryOrHash));
+  }
+
+  /**
+   * Check this version for a given resource with a particular hash.
+   */
+  async lookupResourceWithHash(url: string, hash: string): Promise<Response|null> {
+    // Verify that this version has the requested resource cached. If not,
+    // there's no point in trying.
+    if (!this.hashTable.has(url)) {
+      return null;
+    }
+
+    // Next, check whether the resource has the correct hash. If not, any cached
+    // response isn't usable.
+    if (this.hashTable.get(url) !== hash) {
+      return null;
+    }
+
+    const cacheState = await this.lookupResourceWithoutHash(url);
+    return cacheState && cacheState.response;
+  }
+
+  /**
+   * Check this version for a given resource regardless of its hash.
+   */
+  lookupResourceWithoutHash(url: string): Promise<CacheState|null> {
+    // Limit the search to asset groups, and only scan the cache, don't
+    // load resources from the network.
+    return this.assetGroups.reduce(async(potentialResponse, group) => {
+      const resp = await potentialResponse;
+      if (resp !== null) {
+        return resp;
+      }
+
+      // fetchFromCacheOnly() avoids any network fetches, and returns the
+      // full set of cache data, not just the Response.
+      return group.fetchFromCacheOnly(url);
+    }, Promise.resolve<CacheState|null>(null));
+  }
+
+  /**
+   * List all unhashed resources from all asset groups.
+   */
+  previouslyCachedResources(): Promise<string[]> {
+    return this.assetGroups.reduce(async(resources, group) => {
+      return (await resources).concat(await group.unhashedResources());
+    }, Promise.resolve<string[]>([]));
+  }
+
+  async recentCacheStatus(url: string): Promise<UpdateCacheStatus> {
+    return this.assetGroups.reduce(async(current, group) => {
+      const status = await current;
+      if (status === UpdateCacheStatus.CACHED) {
+        return status;
+      }
+      const groupStatus = await group.cacheStatus(url);
+      if (groupStatus === UpdateCacheStatus.NOT_CACHED) {
+        return status;
+      }
+      return groupStatus;
+    }, Promise.resolve(UpdateCacheStatus.NOT_CACHED));
+  }
+
+  /**
+   * Erase this application version, by cleaning up all the caches.
+   */
+  async cleanup(): Promise<void> {
+    await Promise.all(this.assetGroups.map(group => group.cleanup()));
+    await Promise.all(this.dataGroups.map(group => group.cleanup()));
+  }
+
+  /**
+   * Get the opaque application data which was provided with the manifest.
+   */
+  get appData(): Object|null { return this.manifest.appData || null; }
+
+  /**
+   * Check whether a request accepts `text/html` (based on the `Accept` header).
+   */
+  private acceptsTextHtml(req: Request): boolean {
+    const accept = req.headers.get('Accept');
+    if (accept === null) {
+      return false;
+    }
+    const values = accept.split(',');
+    return values.some(value => value.trim().toLowerCase() === 'text/html');
+  }
+}
diff --git a/packages/service-worker/worker/src/assets.ts b/packages/service-worker/worker/src/assets.ts
new file mode 100644
index 000000000000..b5dc2a9f0467
--- /dev/null
+++ b/packages/service-worker/worker/src/assets.ts
@@ -0,0 +1,614 @@
+/**
+ * @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 {Adapter, Context} from './adapter';
+import {CacheState, UpdateCacheStatus, UpdateSource, UrlMetadata} from './api';
+import {Database, Table} from './database';
+import {SwCriticalError} from './error';
+import {IdleScheduler} from './idle';
+import {AssetGroupConfig} from './manifest';
+import {sha1Binary} from './sha1';
+
+/**
+ * A group of assets that are cached in a `Cache` and managed by a given policy.
+ *
+ * Concrete classes derive from this base and specify the exact caching policy.
+ */
+export abstract class AssetGroup {
+  /**
+   * A deduplication cache, to make sure the SW never makes two network requests
+   * for the same resource at once. Managed by `fetchAndCacheOnce`.
+   */
+  private inFlightRequests = new Map<string, Promise<Response>>();
+
+  /**
+   * Regular expression patterns.
+   */
+  protected patterns: RegExp[] = [];
+
+  /**
+   * A Promise which resolves to the `Cache` used to back this asset group. This
+   * is openedfrom the constructor.
+   */
+  protected cache: Promise<Cache>;
+
+  /**
+   * Group name from the configuration.
+   */
+  readonly name: string;
+
+  /**
+   * Metadata associated with specific cache entries.
+   */
+  protected metadata: Promise<Table>;
+
+
+  private origin: string;
+
+  constructor(
+      protected scope: ServiceWorkerGlobalScope, protected adapter: Adapter,
+      protected idle: IdleScheduler, protected config: AssetGroupConfig,
+      protected hashes: Map<string, string>, protected db: Database, protected prefix: string) {
+    this.name = config.name;
+    // Patterns in the config are regular expressions disguised as strings. Breathe life into them.
+    this.patterns = this.config.patterns.map(pattern => new RegExp(pattern));
+
+    // This is the primary cache, which holds all of the cached requests for this group. If a
+    // resource
+    // isn't in this cache, it hasn't been fetched yet.
+    this.cache = this.scope.caches.open(`${this.prefix}:${this.config.name}:cache`);
+
+    // This is the metadata table, which holds specific information for each cached URL, such as
+    // the timestamp of when it was added to the cache.
+    this.metadata = this.db.open(`${this.prefix}:${this.config.name}:meta`);
+
+    // Determine the origin from the registration scope. This is used to differentiate between
+    // relative and absolute URLs.
+    this.origin =
+        this.adapter.parseUrl(this.scope.registration.scope, this.scope.registration.scope).origin;
+  }
+
+  async cacheStatus(url: string): Promise<UpdateCacheStatus> {
+    const cache = await this.cache;
+    const meta = await this.metadata;
+    const res = await cache.match(this.adapter.newRequest(url));
+    if (res === undefined) {
+      return UpdateCacheStatus.NOT_CACHED;
+    }
+    try {
+      const data = await meta.read<UrlMetadata>(url);
+      if (!data.used) {
+        return UpdateCacheStatus.CACHED_BUT_UNUSED;
+      }
+    } catch (_) {
+      // Error on the side of safety and assume cached.
+    }
+    return UpdateCacheStatus.CACHED;
+  }
+
+  /**
+   * Initialize this asset group, updating from the given source if available.
+   */
+  abstract initializeFully(updateFrom?: UpdateSource): Promise<void>;
+
+  /**
+   * Clean up all the cached data for this group.
+   */
+  async cleanup(): Promise<void> {
+    await this.scope.caches.delete(`${this.prefix}:${this.config.name}:cache`);
+    await this.db.delete(`${this.prefix}:${this.config.name}:meta`);
+  }
+
+  /**
+   * Process a request for a given resource and return it, or return null if it's not available.
+   */
+  async handleFetch(req: Request, ctx: Context): Promise<Response|null> {
+    const url = this.getConfigUrl(req.url);
+    // Either the request matches one of the known resource URLs, one of the patterns for
+    // dynamically matched URLs, or neither. Determine which is the case for this request in
+    // order to decide how to handle it.
+    if (this.config.urls.indexOf(url) !== -1 || this.patterns.some(pattern => pattern.test(url))) {
+      // This URL matches a known resource. Either it's been cached already or it's missing, in
+      // which case it needs to be loaded from the network.
+
+      // Open the cache to check whether this resource is present.
+      const cache = await this.cache;
+
+      // Look for a cached response. If one exists, it can be used to resolve the fetch
+      // operation.
+      const cachedResponse = await cache.match(req);
+      if (cachedResponse !== undefined) {
+        // A response has already been cached (which presumably matches the hash for this
+        // resource). Check whether it's safe to serve this resource from cache.
+        if (this.hashes.has(url)) {
+          // This resource has a hash, and thus is versioned by the manifest. It's safe to return
+          // the response.
+          return cachedResponse;
+        } else {
+          // This resource has no hash, and yet exists in the cache. Check how old this request is
+          // to make sure it's still usable.
+          if (await this.needToRevalidate(req, cachedResponse)) {
+            this.idle.schedule(
+                `revalidate(${this.prefix}, ${this.config.name}): ${req.url}`,
+                async() => { await this.fetchAndCacheOnce(req); });
+          }
+
+          // In either case (revalidation or not), the cached response must be good.
+          return cachedResponse;
+        }
+      }
+      // No already-cached response exists, so attempt a fetch/cache operation. The original request
+      // may specify things like credential inclusion, but for assets these are not honored in order
+      // to avoid issues with opaque responses. The SW requests the data itself.
+      const res = await this.fetchAndCacheOnce(this.adapter.newRequest(req.url));
+
+      // If this is successful, the response needs to be cloned as it might be used to respond to
+      // multiple fetch operations at the same time.
+      return res.clone();
+    } else {
+      return null;
+    }
+  }
+
+  private getConfigUrl(url: string): string {
+    // If the URL is relative to the SW's own origin, then only consider the path relative to
+    // the domain root. Determine this by checking the URL's origin against the SW's.
+    const parsed = this.adapter.parseUrl(url, this.scope.registration.scope);
+    if (parsed.origin === this.origin) {
+      // The URL is relative to the SW's origin domain.
+      return parsed.path;
+    } else {
+      return url;
+    }
+  }
+
+  /**
+   * Some resources are cached without a hash, meaning that their expiration is controlled
+   * by HTTP caching headers. Check whether the given request/response pair is still valid
+   * per the caching headers.
+   */
+  private async needToRevalidate(req: Request, res: Response): Promise<boolean> {
+    // Three different strategies apply here:
+    // 1) The request has a Cache-Control header, and thus expiration needs to be based on its age.
+    // 2) The request has an Expires header, and expiration is based on the current timestamp.
+    // 3) The request has no applicable caching headers, and must be revalidated.
+    if (res.headers.has('Cache-Control')) {
+      // Figure out if there is a max-age directive in the Cache-Control header.
+      const cacheControl = res.headers.get('Cache-Control') !;
+      const cacheDirectives =
+          cacheControl
+              // Directives are comma-separated within the Cache-Control header value.
+              .split(',')
+              // Make sure each directive doesn't have extraneous whitespace.
+              .map(v => v.trim())
+              // Some directives have values (like maxage and s-maxage)
+              .map(v => v.split('='));
+
+      // Lowercase all the directive names.
+      cacheDirectives.forEach(v => v[0] = v[0].toLowerCase());
+
+      // Find the max-age directive, if one exists.
+      const maxAgeDirective = cacheDirectives.find(v => v[0] === 'max-age');
+      const cacheAge = maxAgeDirective ? maxAgeDirective[1] : undefined;
+
+      if (!cacheAge) {
+        // No usable TTL defined. Must assume that the response is stale.
+        return true;
+      }
+      try {
+        const maxAge = 1000 * parseInt(cacheAge);
+
+        // Determine the origin time of this request. If the SW has metadata on the request (which
+        // it
+        // should), it will have the time the request was added to the cache. If it doesn't for some
+        // reason, the request may have a Date header which will serve the same purpose.
+        let ts: number;
+        try {
+          // Check the metadata table. If a timestamp is there, use it.
+          const metaTable = await this.metadata;
+          ts = (await metaTable.read<UrlMetadata>(req.url)).ts;
+        } catch (e) {
+          // Otherwise, look for a Date header.
+          const date = res.headers.get('Date');
+          if (date === null) {
+            // Unable to determine when this response was created. Assume that it's stale, and
+            // revalidate it.
+            return true;
+          }
+          ts = Date.parse(date);
+        }
+        const age = this.adapter.time - ts;
+        return age < 0 || age > maxAge;
+      } catch (e) {
+        // Assume stale.
+        return true;
+      }
+    } else if (res.headers.has('Expires')) {
+      // Determine if the expiration time has passed.
+      const expiresStr = res.headers.get('Expires') !;
+      try {
+        // The request needs to be revalidated if the current time is later than the expiration
+        // time, if it parses correctly.
+        return this.adapter.time > Date.parse(expiresStr);
+      } catch (e) {
+        // The expiration date failed to parse, so revalidate as a precaution.
+        return true;
+      }
+    } else {
+      // No way to evaluate staleness, so assume the response is already stale.
+      return true;
+    }
+  }
+
+  /**
+   * Fetch the complete state of a cached resource, or return null if it's not found.
+   */
+  async fetchFromCacheOnly(url: string): Promise<CacheState|null> {
+    const cache = await this.cache;
+    const metaTable = await this.metadata;
+
+    // Lookup the response in the cache.
+    const response = await cache.match(this.adapter.newRequest(url));
+    if (response === undefined) {
+      // It's not found, return null.
+      return null;
+    }
+
+    // Next, lookup the cached metadata.
+    let metadata: UrlMetadata|undefined = undefined;
+    try {
+      metadata = await metaTable.read<UrlMetadata>(url);
+    } catch (e) {
+      // Do nothing, not found. This shouldn't happen, but it can be handled.
+    }
+
+    // Return both the response and any available metadata.
+    return {response, metadata};
+  }
+
+  /**
+   * Lookup all resources currently stored in the cache which have no associated hash.
+   */
+  async unhashedResources(): Promise<string[]> {
+    const cache = await this.cache;
+    // Start with the set of all cached URLs.
+    return (await cache.keys())
+        .map(request => request.url)
+        // Exclude the URLs which have hashes.
+        .filter(url => !this.hashes.has(url));
+  }
+
+  /**
+   * Fetch the given resource from the network, and cache it if able.
+   */
+  protected async fetchAndCacheOnce(req: Request, used: boolean = true): Promise<Response> {
+    // The `inFlightRequests` map holds information about which caching operations are currently
+    // underway for known resources. If this request appears there, another "thread" is already
+    // in the process of caching it, and this work should not be duplicated.
+    if (this.inFlightRequests.has(req.url)) {
+      // There is a caching operation already in progress for this request. Wait for it to
+      // complete, and hopefully it will have yielded a useful response.
+      return this.inFlightRequests.get(req.url) !;
+    }
+
+    // No other caching operation is being attempted for this resource, so it will be owned here.
+    // Go to the network and get the correct version.
+    const fetchOp = this.fetchFromNetwork(req);
+
+    // Save this operation in `inFlightRequests` so any other "thread" attempting to cache it
+    // will block on this chain instead of duplicating effort.
+    this.inFlightRequests.set(req.url, fetchOp);
+
+    // Make sure this attempt is cleaned up properly on failure.
+    try {
+      // Wait for a response. If this fails, the request will remain in `inFlightRequests`
+      // indefinitely.
+      const res = await fetchOp;
+
+      // It's very important that only successful responses are cached. Unsuccessful responses
+      // should never be cached as this can completely break applications.
+      if (!res.ok) {
+        throw new Error(
+            `Response not Ok (fetchAndCacheOnce): request for ${req.url} returned response ${res.status} ${res.statusText}`);
+      }
+
+      // This response is safe to cache (as long as it's cloned). Wait until the cache operation
+      // is complete.
+      const cache = await this.scope.caches.open(`${this.prefix}:${this.config.name}:cache`);
+      await cache.put(req, res.clone());
+
+      // If the request is not hashed, update its metadata, especially the timestamp. This is needed
+      // for future determination of whether this cached response is stale or not.
+      if (!this.hashes.has(req.url)) {
+        // Metadata is tracked for requests that are unhashed.
+        const meta: UrlMetadata = {ts: this.adapter.time, used};
+        const metaTable = await this.metadata;
+        await metaTable.write(req.url, meta);
+      }
+
+      return res;
+    } finally {
+      // Finally, it can be removed from `inFlightRequests`. This might result in a double-remove
+      // if some other  chain was already making this request too, but that won't hurt anything.
+      this.inFlightRequests.delete(req.url);
+    }
+  }
+
+  protected async fetchFromNetwork(req: Request, redirectLimit: number = 3): Promise<Response> {
+    // Make a cache-busted request for the resource.
+    const res = await this.cacheBustedFetchFromNetwork(req);
+
+    // Check for redirected responses, and follow the redirects.
+    if ((res as any)['redirected'] && !!res.url) {
+      // If the redirect limit is exhausted, fail with an error.
+      if (redirectLimit === 0) {
+        throw new SwCriticalError(
+            `Response hit redirect limit (fetchFromNetwork): request redirected too many times, next is ${res.url}`);
+      }
+
+      // Unwrap the redirect directly.
+      return this.fetchFromNetwork(this.adapter.newRequest(res.url), redirectLimit - 1);
+    }
+
+    return res;
+  }
+
+  /**
+   * Load a particular asset from the network, accounting for hash validation.
+   */
+  protected async cacheBustedFetchFromNetwork(req: Request): Promise<Response> {
+    const url = this.getConfigUrl(req.url);
+
+    // If a hash is available for this resource, then compare the fetched version with the
+    // canonical hash. Otherwise, the network version will have to be trusted.
+    if (this.hashes.has(url)) {
+      // It turns out this resource does have a hash. Look it up. Unless the fetched version
+      // matches this hash, it's invalid and the whole manifest may need to be thrown out.
+      const canonicalHash = this.hashes.get(url) !;
+
+      // Ideally, the resource would be requested with cache-busting to guarantee the SW gets
+      // the freshest version. However, doing this would eliminate any chance of the response
+      // being in the HTTP cache. Given that the browser has recently actively loaded the page,
+      // it's likely that many of the responses the SW needs to cache are in the HTTP cache and
+      // are fresh enough to use. In the future, this could be done by setting cacheMode to
+      // *only* check the browser cache for a cached version of the resource, when cacheMode is
+      // fully supported. For now, the resource is fetched directly, without cache-busting, and
+      // if the hash test fails a cache-busted request is tried before concluding that the
+      // resource isn't correct. This gives the benefit of acceleration via the HTTP cache
+      // without the risk of stale data, at the expense of a duplicate request in the event of
+      // a stale response.
+
+      // Fetch the resource from the network (possibly hitting the HTTP cache).
+      const networkResult = await this.safeFetch(req);
+
+      // Decide whether a cache-busted request is necessary. It might be for two independent
+      // reasons: either the non-cache-busted request failed (hopefully transiently) or if the
+      // hash of the content retrieved does not match the canonical hash from the manifest. It's
+      // only valid to access the content of the first response if the request was successful.
+      let makeCacheBustedRequest: boolean = networkResult.ok;
+      if (makeCacheBustedRequest) {
+        // The request was successful. A cache-busted request is only necessary if the hashes
+        // don't match. Compare them, making sure to clone the response so it can be used later
+        // if it proves to be valid.
+        const fetchedHash = sha1Binary(await networkResult.clone().arrayBuffer());
+        makeCacheBustedRequest = (fetchedHash !== canonicalHash);
+      }
+
+      // Make a cache busted request to the network, if necessary.
+      if (makeCacheBustedRequest) {
+        // Hash failure, the version that was retrieved under the default URL did not have the
+        // hash expected. This could be because the HTTP cache got in the way and returned stale
+        // data, or because the version on the server really doesn't match. A cache-busting
+        // request will differentiate these two situations.
+        // TODO: handle case where the URL has parameters already (unlikely for assets).
+        const cacheBustReq = this.adapter.newRequest(this.cacheBust(req.url));
+        const cacheBustedResult = await this.safeFetch(cacheBustReq);
+
+        // If the response was unsuccessful, there's nothing more that can be done.
+        if (!cacheBustedResult.ok) {
+          throw new SwCriticalError(
+              `Response not Ok (cacheBustedFetchFromNetwork): cache busted request for ${req.url} returned response ${cacheBustedResult.status} ${cacheBustedResult.statusText}`);
+        }
+
+        // Hash the contents.
+        const cacheBustedHash = sha1Binary(await cacheBustedResult.clone().arrayBuffer());
+
+        // If the cache-busted version doesn't match, then the manifest is not an accurate
+        // representation of the server's current set of files, and the SW should give up.
+        if (canonicalHash !== cacheBustedHash) {
+          throw new SwCriticalError(
+              `Hash mismatch (cacheBustedFetchFromNetwork): ${req.url}: expected ${canonicalHash}, got ${cacheBustedHash} (after cache busting)`);
+        }
+
+        // If it does match, then use the cache-busted result.
+        return cacheBustedResult;
+      }
+
+      // Excellent, the version from the network matched on the first try, with no need for
+      // cache-busting. Use it.
+      return networkResult;
+    } else {
+      // This URL doesn't exist in our hash database, so it must be requested directly.
+      return this.safeFetch(req);
+    }
+  }
+
+  /**
+   * Possibly update a resource, if it's expired and needs to be updated. A no-op otherwise.
+   */
+  protected async maybeUpdate(updateFrom: UpdateSource, req: Request, cache: Cache):
+      Promise<boolean> {
+    const url = this.getConfigUrl(req.url);
+    const meta = await this.metadata;
+    // Check if this resource is hashed and already exists in the cache of a prior version.
+    if (this.hashes.has(url)) {
+      const hash = this.hashes.get(url) !;
+
+      // Check the caches of prior versions, using the hash to ensure the correct version of
+      // the resource is loaded.
+      const res = await updateFrom.lookupResourceWithHash(url, hash);
+
+      // If a previously cached version was available, copy it over to this cache.
+      if (res !== null) {
+        // Copy to this cache.
+        await cache.put(req, res);
+        await meta.write(req.url, { ts: this.adapter.time, used: false } as UrlMetadata);
+
+        // No need to do anything further with this resource, it's now cached properly.
+        return true;
+      }
+    }
+
+    // No up-to-date version of this resource could be found.
+    return false;
+  }
+
+  /**
+   * Construct a cache-busting URL for a given URL.
+   */
+  private cacheBust(url: string): string {
+    return url + (url.indexOf('?') === -1 ? '?' : '&') + 'ngsw-cache-bust=' + Math.random();
+  }
+
+  protected async safeFetch(req: Request): Promise<Response> {
+    try {
+      return await this.scope.fetch(req);
+    } catch (err) {
+      return this.adapter.newResponse('', {
+        status: 504,
+        statusText: 'Gateway Timeout',
+      });
+    }
+  }
+}
+
+/**
+ * An `AssetGroup` that prefetches all of its resources during initialization.
+ */
+export class PrefetchAssetGroup extends AssetGroup {
+  async initializeFully(updateFrom?: UpdateSource): Promise<void> {
+    // Open the cache which actually holds requests.
+    const cache = await this.cache;
+
+    // Cache all known resources serially. As this reduce proceeds, each Promise waits
+    // on the last before starting the fetch/cache operation for the next request. Any
+    // errors cause fall-through to the final Promise which rejects.
+    await this.config.urls.reduce(async(previous: Promise<void>, url: string) => {
+      // Wait on all previous operations to complete.
+      await previous;
+
+      // Construct the Request for this url.
+      const req = this.adapter.newRequest(url);
+
+      // First, check the cache to see if there is already a copy of this resource.
+      const alreadyCached = (await cache.match(req)) !== undefined;
+
+      // If the resource is in the cache already, it can be skipped.
+      if (alreadyCached) {
+        return;
+      }
+
+      // If an update source is available.
+      if (updateFrom !== undefined && await this.maybeUpdate(updateFrom, req, cache)) {
+        return;
+      }
+
+      // Otherwise, go to the network and hopefully cache the response (if successful).
+      await this.fetchAndCacheOnce(req, false);
+    }, Promise.resolve());
+
+    // Handle updating of unknown (unhashed) resources. This is only possible if there's
+    // a source to update from.
+    if (updateFrom !== undefined) {
+      const metaTable = await this.metadata;
+
+      // Select all of the previously cached resources. These are cached unhashed resources
+      // from previous versions of the app, in any asset group.
+      await(await updateFrom.previouslyCachedResources())
+          // First, narrow down the set of resources to those which are handled by this group.
+          // Either it's a known URL, or it matches a given pattern.
+          .filter(
+              url => this.config.urls.some(cacheUrl => cacheUrl === url) ||
+                  this.patterns.some(pattern => pattern.test(url)))
+          // Finally, process each resource in turn.
+          .reduce(async(previous, url) => {
+            await previous;
+            const req = this.adapter.newRequest(url);
+
+            // It's possible that the resource in question is already cached. If so,
+            // continue to the next one.
+            const alreadyCached = (await cache.match(req) !== undefined);
+            if (alreadyCached) {
+              return;
+            }
+
+            // Get the most recent old version of the resource.
+            const res = await updateFrom.lookupResourceWithoutHash(url);
+            if (res === null || res.metadata === undefined) {
+              // Unexpected, but not harmful.
+              return;
+            }
+
+            // Write it into the cache. It may already be expired, but it can still serve
+            // traffic until it's updated (stale-while-revalidate approach).
+            await cache.put(req, res.response);
+            await metaTable.write(url, { ...res.metadata, used: false } as UrlMetadata);
+          }, Promise.resolve());
+    }
+  }
+}
+
+export class LazyAssetGroup extends AssetGroup {
+  async initializeFully(updateFrom?: UpdateSource): Promise<void> {
+    // No action necessary if no update source is available - resources managed in this group
+    // are all lazily loaded, so there's nothing to initialize.
+    if (updateFrom === undefined) {
+      return;
+    }
+
+    // Open the cache which actually holds requests.
+    const cache = await this.cache;
+
+    // Loop through the listed resources, caching any which are available.
+    await this.config.urls.reduce(async(previous: Promise<void>, url: string) => {
+      // Wait on all previous operations to complete.
+      await previous;
+
+      // Construct the Request for this url.
+      const req = this.adapter.newRequest(url);
+
+      // First, check the cache to see if there is already a copy of this resource.
+      const alreadyCached = (await cache.match(req)) !== undefined;
+
+      // If the resource is in the cache already, it can be skipped.
+      if (alreadyCached) {
+        return;
+      }
+
+      const updated = await this.maybeUpdate(updateFrom, req, cache);
+      if (this.config.updateMode === 'prefetch' && !updated) {
+        // If the resource was not updated, either it was not cached before or
+        // the previously cached version didn't match the updated hash. In that
+        // case, prefetch update mode dictates that the resource will be updated,
+        // except if it was not previously utilized. Check the status of the
+        // cached resource to see.
+
+        const cacheStatus = await updateFrom.recentCacheStatus(url);
+
+        // If the resource is not cached, or was cached but unused, then it will be
+        // loaded lazily.
+        if (cacheStatus !== UpdateCacheStatus.CACHED) {
+          return;
+        }
+
+        // Update from the network.
+        await this.fetchAndCacheOnce(req, false);
+      }
+    }, Promise.resolve());
+  }
+}
diff --git a/packages/service-worker/worker/src/data.ts b/packages/service-worker/worker/src/data.ts
new file mode 100644
index 000000000000..e1d98f2951af
--- /dev/null
+++ b/packages/service-worker/worker/src/data.ts
@@ -0,0 +1,556 @@
+/**
+ * @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 {Adapter, Context} from './adapter';
+import {Database, Table} from './database';
+import {DataGroupConfig} from './manifest';
+
+/**
+ * A metadata record of how old a particular cached resource is.
+ */
+interface AgeRecord {
+  age: number;
+}
+
+/**
+ * A node in the LRU chain for a given `DataGroup`.
+ *
+ * Serializable as previous/next are identified by their URL and are not references.
+ */
+interface LruNode {
+  /**
+   * The URL tracked by this node.
+   */
+  url: string;
+
+  /**
+   * The previous (more recent) node in the chain, or null if this is the head.
+   */
+  previous: string|null;
+
+  /**
+   * The next (less recent) node in the chain, or null if this is the tail.
+   */
+  next: string|null;
+}
+
+/**
+ * Serializable state of an entire LRU chain.
+ *
+ * Essentially a doubly linked list of URLs.
+ */
+interface LruState {
+  /**
+   * URL of the head node, or null if the chain is empty.
+   */
+  head: string|null;
+
+  /**
+   * URL of the tail node, or null if the chain is empty.
+   */
+  tail: string|null;
+
+  /**
+   * Map of URLs to data for each URL (including next/prev pointers).
+   */
+  map: {[url: string]: LruNode | undefined};
+
+  /**
+   * Count of the number of nodes in the chain.
+   */
+  count: number;
+}
+
+/**
+ * Manages an instance of `LruState` and moves URLs to the head of the
+ * chain when requested.
+ */
+class LruList {
+  state: LruState;
+  constructor(state?: LruState) {
+    if (state === undefined) {
+      state = {
+        head: null,
+        tail: null,
+        map: {},
+        count: 0,
+      };
+    }
+    this.state = state;
+  }
+
+  /**
+   * The current count of URLs in the list.
+   */
+  get size(): number { return this.state.count; }
+
+  /**
+   * Remove the tail.
+   */
+  pop(): string|null {
+    // If there is no tail, return null.
+    if (this.state.tail === null) {
+      return null;
+    }
+
+    const url = this.state.tail;
+    this.remove(url);
+
+    // This URL has been successfully evicted.
+    return url;
+  }
+
+  remove(url: string): boolean {
+    const node = this.state.map[url];
+    if (node === undefined) {
+      return false;
+    }
+
+    // Special case if removing the current head.
+    if (this.state.head === url) {
+      // The node is the current head. Special case the removal.
+      if (node.next === null) {
+        // This is the only node. Reset the cache to be empty.
+        this.state.head = null;
+        this.state.tail = null;
+        this.state.map = {};
+        this.state.count = 0;
+        return true;
+      }
+
+      // There is at least one other node. Make the next node the new head.
+      const next = this.state.map[node.next !] !;
+      next.previous = null;
+      this.state.head = next.url;
+      node.next = null;
+      delete this.state.map[url];
+      this.state.count--;
+      return true;
+    }
+
+    // The node is not the head, so it has a previous. It may or may not be the tail.
+    // If it is not, then it has a next. First, grab the previous node.
+    const previous = this.state.map[node.previous !] !;
+
+    // Fix the forward pointer to skip over node and go directly to node.next.
+    previous.next = node.next;
+
+    // node.next may or may not be set. If it is, fix the back pointer to skip over node.
+    // If it's not set, then this node happened to be the tail, and the tail needs to be
+    // updated to point to the previous node (removing the tail).
+    if (node.next !== null) {
+      // There is a next node, fix its back pointer to skip this node.
+      this.state.map[node.next] !.previous = node.previous !;
+    } else {
+      // There is no next node - the accessed node must be the tail. Move the tail pointer.
+      this.state.tail = node.previous !;
+    }
+
+    node.next = null;
+    node.previous = null;
+    delete this.state.map[url];
+    // Count the removal.
+    this.state.count--;
+
+    return true;
+  }
+
+  accessed(url: string): void {
+    // When a URL is accessed, its node needs to be moved to the head of the chain.
+    // This is accomplished in two steps:
+    //
+    // 1) remove the node from its position within the chain.
+    // 2) insert the node as the new head.
+    //
+    // Sometimes, a URL is accessed which has not been seen before. In this case, step 1 can
+    // be skipped completely (which will grow the chain by one). Of course, if the node is
+    // already the head, this whole operation can be skipped.
+    if (this.state.head === url) {
+      // The URL is already in the head position, accessing it is a no-op.
+      return;
+    }
+
+    // Look up the node in the map, and construct a new entry if it's
+    const node = this.state.map[url] || {url, next: null, previous: null};
+
+    // Step 1: remove the node from its position within the chain, if it is in the chain.
+    if (this.state.map[url] !== undefined) {
+      this.remove(url);
+    }
+
+    // Step 2: insert the node at the head of the chain.
+
+    // First, check if there's an existing head node. If there is, it has previous: null.
+    // Its previous pointer should be set to the node we're inserting.
+    if (this.state.head !== null) {
+      this.state.map[this.state.head] !.previous = url;
+    }
+
+    // The next pointer of the node being inserted gets set to the old head, before the head
+    // pointer is updated to this node.
+    node.next = this.state.head;
+
+    // The new head is the new node.
+    this.state.head = url;
+
+    // If there is no tail, then this is the first node, and is both the head and the tail.
+    if (this.state.tail === null) {
+      this.state.tail = url;
+    }
+
+    // Set the node in the map of nodes (if the URL has been seen before, this is a no-op)
+    // and count the insertion.
+    this.state.map[url] = node;
+    this.state.count++;
+  }
+}
+
+/**
+ * A group of cached resources determined by a set of URL patterns which follow a LRU policy
+ * for caching.
+ */
+export class DataGroup {
+  /**
+   * Compiled regular expression set used to determine which resources fall under the purview
+   * of this group.
+   */
+  private readonly patterns: RegExp[];
+
+  /**
+   * The `Cache` instance in which resources belonging to this group are cached.
+   */
+  private readonly cache: Promise<Cache>;
+
+  /**
+   * Tracks the LRU state of resources in this cache.
+   */
+  private _lru: LruList|null = null;
+
+  /**
+   * Database table used to store the state of the LRU cache.
+   */
+  private readonly lruTable: Promise<Table>;
+
+  /**
+   * Database table used to store metadata for resources in the cache.
+   */
+  private readonly ageTable: Promise<Table>;
+
+  constructor(
+      private scope: ServiceWorkerGlobalScope, private adapter: Adapter,
+      private config: DataGroupConfig, private db: Database, private prefix: string) {
+    this.patterns = this.config.patterns.map(pattern => new RegExp(pattern));
+    this.cache = this.scope.caches.open(`${this.prefix}:dynamic:${this.config.name}:cache`);
+    this.lruTable = this.db.open(`${this.prefix}:dynamic:${this.config.name}:lru`);
+    this.ageTable = this.db.open(`${this.prefix}:dynamic:${this.config.name}:age`);
+  }
+
+  /**
+   * Lazily initialize/load the LRU chain.
+   */
+  private async lru(): Promise<LruList> {
+    if (this._lru === null) {
+      const table = await this.lruTable;
+      try {
+        this._lru = new LruList(await table.read<LruState>('lru'));
+      } catch (e) {
+        this._lru = new LruList();
+      }
+    }
+    return this._lru;
+  }
+
+  /**
+   * Sync the LRU chain to non-volatile storage.
+   */
+  async syncLru(): Promise<void> {
+    if (this._lru === null) {
+      return;
+    }
+    const table = await this.lruTable;
+    return table.write('lru', this._lru !.state);
+  }
+
+  /**
+   * Process a fetch event and return a `Response` if the resource is covered by this group,
+   * or `null` otherwise.
+   */
+  async handleFetch(req: Request, ctx: Context): Promise<Response|null> {
+    // Do nothing
+    if (!this.patterns.some(pattern => pattern.test(req.url))) {
+      return null;
+    }
+
+    // Lazily initialize the LRU cache.
+    const lru = await this.lru();
+
+    // The URL matches this cache. First, check whether this is a mutating request or not.
+    switch (req.method) {
+      case 'OPTIONS':
+        // Don't try to cache this - it's non-mutating, but is part of a mutating request.
+        // Most likely SWs don't even see this, but this guard is here just in case.
+        return null;
+      case 'GET':
+      case 'HEAD':
+        // Handle the request with whatever strategy was selected.
+        switch (this.config.strategy) {
+          case 'freshness':
+            return this.handleFetchWithFreshness(req, ctx, lru);
+          case 'performance':
+            return this.handleFetchWithPerformance(req, ctx, lru);
+          default:
+            throw new Error(`Unknown strategy: ${this.config.strategy}`);
+        }
+      default:
+        // This was a mutating request. Assume the cache for this URL is no longer valid.
+        const wasCached = lru.remove(req.url);
+
+        // If there was a cached entry, remove it.
+        if (wasCached) {
+          await this.clearCacheForUrl(req.url);
+        }
+
+        // Sync the LRU chain to non-volatile storage.
+        await this.syncLru();
+
+        // Finally, fall back on the network.
+        return this.safeFetch(req);
+    }
+  }
+
+  private async handleFetchWithPerformance(req: Request, ctx: Context, lru: LruList):
+      Promise<Response|null> {
+    let res: Response|null|undefined = null;
+
+    // Check the cache first. If the resource exists there (and is not expired), the cached
+    // version can be used.
+    const fromCache = await this.loadFromCache(req, lru);
+    if (fromCache !== null) {
+      res = fromCache.res;
+      // Check the age of the resource.
+      if (this.config.refreshAheadMs !== undefined && fromCache.age >= this.config.refreshAheadMs) {
+        ctx.waitUntil(this.safeCacheResponse(req, this.safeFetch(req)));
+      }
+    }
+
+    if (res !== null) {
+      return res;
+    }
+
+    // No match from the cache. Go to the network. Note that this is not an 'await'
+    // call, networkFetch is the actual Promise. This is due to timeout handling.
+    const [timeoutFetch, networkFetch] = this.networkFetchWithTimeout(req);
+    res = await timeoutFetch;
+
+    // Since fetch() will always return a response, undefined indicates a timeout.
+    if (res === undefined) {
+      // The request timed out. Return a Gateway Timeout error.
+      res = this.adapter.newResponse(null, {status: 504, statusText: 'Gateway Timeout'});
+
+      // Cache the network response eventually.
+      ctx.waitUntil(this.safeCacheResponse(req, networkFetch));
+    }
+
+    // The request completed in time, so cache it inline with the response flow.
+    await this.cacheResponse(req, res, lru);
+    return res;
+  }
+
+  private async handleFetchWithFreshness(req: Request, ctx: Context, lru: LruList):
+      Promise<Response|null> {
+    // Start with a network fetch.
+    const [timeoutFetch, networkFetch] = this.networkFetchWithTimeout(req);
+    let res: Response|null|undefined;
+
+
+    // If that fetch errors, treat it as a timed out request.
+    try {
+      res = await timeoutFetch;
+    } catch (e) {
+      res = undefined;
+    }
+
+    // If the network fetch times out or errors, fall back on the cache.
+    if (res === undefined) {
+      ctx.waitUntil(this.safeCacheResponse(req, networkFetch));
+
+      // Ignore the age, the network response will be cached anyway due to the
+      // behavior of freshness.
+      const fromCache = await this.loadFromCache(req, lru);
+      res = (fromCache !== null) ? fromCache.res : null;
+    } else {
+      await this.cacheResponse(req, res, lru, true);
+    }
+
+    // Either the network fetch didn't time out, or the cache yielded a usable response.
+    // In either case, use it.
+    if (res !== null) {
+      return res;
+    }
+
+    // No response in the cache. No choice but to fall back on the full network fetch.
+    res = await networkFetch;
+    await this.cacheResponse(req, res, lru, true);
+    return res;
+  }
+
+  private networkFetchWithTimeout(req: Request): [Promise<Response|undefined>, Promise<Response>] {
+    // If there is a timeout configured, race a timeout Promise with the network fetch.
+    // Otherwise, just fetch from the network directly.
+    if (this.config.timeoutMs !== undefined) {
+      const networkFetch = this.scope.fetch(req);
+      const safeNetworkFetch = (async() => {
+        try {
+          return await networkFetch;
+        } catch (err) {
+          return this.adapter.newResponse(null, {
+            status: 504,
+            statusText: 'Gateway Timeout',
+          });
+        }
+      })();
+      const networkFetchUndefinedError = (async() => {
+        try {
+          return await networkFetch;
+        } catch (err) {
+          return undefined;
+        }
+      })();
+      // Construct a Promise<undefined> for the timeout.
+      const timeout = this.adapter.timeout(this.config.timeoutMs) as Promise<undefined>;
+      // Race that with the network fetch. This will either be a Response, or `undefined`
+      // in the event that the request errored or timed out.
+      return [Promise.race([networkFetchUndefinedError, timeout]), safeNetworkFetch];
+    } else {
+      const networkFetch = this.safeFetch(req);
+      // Do a plain fetch.
+      return [networkFetch, networkFetch];
+    }
+  }
+
+  private async safeCacheResponse(req: Request, res: Promise<Response>): Promise<void> {
+    try {
+      await this.cacheResponse(req, await res, await this.lru());
+    } catch (e) {
+      // TODO: handle this error somehow?
+    }
+  }
+
+  private async loadFromCache(req: Request, lru: LruList):
+      Promise<{res: Response, age: number}|null> {
+    // Look for a response in the cache. If one exists, return it.
+    const cache = await this.cache;
+    let res = await cache.match(req);
+    if (res !== undefined) {
+      // A response was found in the cache, but its age is not yet known. Look it up.
+      try {
+        const ageTable = await this.ageTable;
+        const age = this.adapter.time - (await ageTable.read<AgeRecord>(req.url)).age;
+        // If the response is young enough, use it.
+        if (age <= this.config.maxAge) {
+          // Successful match from the cache. Use the response, after marking it as having
+          // been accessed.
+          lru.accessed(req.url);
+          return {res, age};
+        }
+
+        // Otherwise, or if there was an error, assume the response is expired, and evict it.
+      } catch (e) {
+        // Some error getting the age for the response. Assume it's expired.
+      }
+
+      lru.remove(req.url);
+      await this.clearCacheForUrl(req.url);
+
+      // TODO: avoid duplicate in event of network timeout, maybe.
+      await this.syncLru();
+    }
+    return null;
+  }
+
+  /**
+   * Operation for caching the response from the server. This has to happen all
+   * at once, so that the cache and LRU tracking remain in sync. If the network request
+   * completes before the timeout, this logic will be run inline with the response flow.
+   * If the request times out on the server, an error will be returned but the real network
+   * request will still be running in the background, to be cached when it completes.
+   */
+  private async cacheResponse(
+      req: Request, res: Response, lru: LruList, okToCacheOpaque: boolean = false): Promise<void> {
+    // Only cache successful responses.
+    if (!res.ok || (okToCacheOpaque && res.type === 'opaque')) {
+      return;
+    }
+
+    // If caching this response would make the cache exceed its maximum size, evict something
+    // first.
+    if (lru.size >= this.config.maxSize) {
+      // The cache is too big, evict something.
+      const evictedUrl = lru.pop();
+      if (evictedUrl !== null) {
+        await this.clearCacheForUrl(evictedUrl);
+      }
+    }
+
+    // TODO: evaluate for possible race conditions during flaky network periods.
+
+    // Mark this resource as having been accessed recently. This ensures it won't be evicted
+    // until enough other resources are requested that it falls off the end of the LRU chain.
+    lru.accessed(req.url);
+
+    // Store the response in the cache (cloning because the browser will consume
+    // the body during the caching operation).
+    await(await this.cache).put(req, res.clone());
+
+    // Store the age of the cache.
+    const ageTable = await this.ageTable;
+    await ageTable.write(req.url, {age: this.adapter.time});
+
+    // Sync the LRU chain to non-volatile storage.
+    await this.syncLru();
+  }
+
+  /**
+   * Delete all of the saved state which this group uses to track resources.
+   */
+  async cleanup(): Promise<void> {
+    // Remove both the cache and the database entries which track LRU stats.
+    await Promise.all([
+      this.scope.caches.delete(`${this.prefix}:dynamic:${this.config.name}:cache`),
+      this.db.delete(`${this.prefix}:dynamic:${this.config.name}:age`),
+      this.db.delete(`${this.prefix}:dynamic:${this.config.name}:lru`),
+    ]);
+  }
+
+  /**
+   * Clear the state of the cache for a particular resource.
+   *
+   * This doesn't remove the resource from the LRU table, that is assumed to have
+   * been done already. This clears the GET and HEAD versions of the request from
+   * the cache itself, as well as the metadata stored in the age table.
+   */
+  private async clearCacheForUrl(url: string): Promise<void> {
+    const [cache, ageTable] = await Promise.all([this.cache, this.ageTable]);
+    await Promise.all([
+      cache.delete(this.adapter.newRequest(url, {method: 'GET'})),
+      cache.delete(this.adapter.newRequest(url, {method: 'HEAD'})),
+      ageTable.delete(url),
+    ]);
+  }
+
+  private async safeFetch(req: Request): Promise<Response> {
+    try {
+      return this.scope.fetch(req);
+    } catch (err) {
+      return this.adapter.newResponse(null, {
+        status: 504,
+        statusText: 'Gateway Timeout',
+      });
+    }
+  }
+}
diff --git a/packages/service-worker/worker/src/database.ts b/packages/service-worker/worker/src/database.ts
new file mode 100644
index 000000000000..f45f8fc1a41d
--- /dev/null
+++ b/packages/service-worker/worker/src/database.ts
@@ -0,0 +1,60 @@
+/**
+ * @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
+ */
+
+/**
+ * An abstract table, with the ability to read/write objects stored under keys.
+ */
+export interface Table {
+  /**
+   * Delete a key from the table.
+   */
+  'delete'(key: string): Promise<boolean>;
+
+  /**
+   * List all the keys currently stored in the table.
+   */
+  keys(): Promise<string[]>;
+
+  /**
+   * Read a key from a table, either as an Object or with a given type.
+   */
+  read(key: string): Promise<Object>;
+  read<T>(key: string): Promise<T>;
+
+  /**
+   * Write a new value for a key to the table, overwriting any previous value.
+   */
+  write(key: string, value: Object): Promise<void>;
+}
+
+/**
+ * An abstract database, consisting of multiple named `Table`s.
+ */
+export interface Database {
+  /**
+   * Delete an entire `Table` from the database, by name.
+   */
+  'delete'(table: string): Promise<boolean>;
+
+  /**
+   * List all `Table`s by name.
+   */
+  list(): Promise<string[]>;
+
+  /**
+   * Open a `Table`.
+   */
+  open(table: string): Promise<Table>;
+}
+
+/**
+ * An error returned in rejected promises if the given key is not found in the table.
+ */
+export class NotFound {
+  constructor(public table: string, public key: string) {}
+}
diff --git a/packages/service-worker/worker/src/db-cache.ts b/packages/service-worker/worker/src/db-cache.ts
new file mode 100644
index 000000000000..581aadf2fbcf
--- /dev/null
+++ b/packages/service-worker/worker/src/db-cache.ts
@@ -0,0 +1,69 @@
+/**
+ * @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 {Adapter} from './adapter';
+import {Database, NotFound, Table} from './database';
+
+
+/**
+ * An implementation of a `Database` that uses the `CacheStorage` API to serialize
+ * state within mock `Response` objects.
+ */
+export class CacheDatabase implements Database {
+  private tables = new Map<string, Promise<CacheTable>>();
+
+  constructor(private scope: ServiceWorkerGlobalScope, private adapter: Adapter) {}
+
+  'delete'(name: string): Promise<boolean> {
+    if (this.tables.has(name)) {
+      this.tables.delete(name);
+    }
+    return this.scope.caches.delete(`ngsw:db:${name}`);
+  }
+
+  list(): Promise<string[]> {
+    return this.scope.caches.keys().then(keys => keys.filter(key => key.startsWith('ngsw:db:')));
+  }
+
+  open(name: string): Promise<Table> {
+    if (!this.tables.has(name)) {
+      const table = this.scope.caches.open(`ngsw:db:${name}`)
+                        .then(cache => new CacheTable(name, cache, this.adapter));
+      this.tables.set(name, table);
+    }
+    return this.tables.get(name) !;
+  }
+}
+
+/**
+ * A `Table` backed by a `Cache`.
+ */
+export class CacheTable implements Table {
+  constructor(readonly table: string, private cache: Cache, private adapter: Adapter) {}
+
+  private request(key: string): Request { return this.adapter.newRequest('/' + key); }
+
+  'delete'(key: string): Promise<boolean> { return this.cache.delete(this.request(key)); }
+
+  keys(): Promise<string[]> {
+    return this.cache.keys().then(requests => requests.map(req => req.url.substr(1)));
+  }
+
+  read(key: string): Promise<any> {
+    return this.cache.match(this.request(key)).then(res => {
+      if (res === undefined) {
+        return Promise.reject(new NotFound(this.table, key));
+      }
+      return res.json();
+    });
+  }
+
+  write(key: string, value: Object): Promise<void> {
+    return this.cache.put(this.request(key), this.adapter.newResponse(JSON.stringify(value)));
+  }
+}
diff --git a/packages/service-worker/worker/src/debug.ts b/packages/service-worker/worker/src/debug.ts
new file mode 100644
index 000000000000..9843ef40909a
--- /dev/null
+++ b/packages/service-worker/worker/src/debug.ts
@@ -0,0 +1,111 @@
+/**
+ * @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 {Adapter} from './adapter';
+import {DebugLogger, Debuggable} from './api';
+
+const DEBUG_LOG_BUFFER_SIZE = 100;
+
+interface DebugMessage {
+  time: number;
+  value: string;
+  context: string;
+}
+
+export class DebugHandler implements DebugLogger {
+  // There are two debug log message arrays. debugLogA records new debugging messages.
+  // Once it reaches DEBUG_LOG_BUFFER_SIZE, the array is moved to debugLogB and a new
+  // array is assigned to debugLogA. This ensures that insertion to the debug log is
+  // always O(1) no matter the number of logged messages, and that the total number
+  // of messages in the log never exceeds 2 * DEBUG_LOG_BUFFER_SIZE.
+  private debugLogA: DebugMessage[] = [];
+  private debugLogB: DebugMessage[] = [];
+
+  constructor(readonly driver: Debuggable, readonly adapter: Adapter) {}
+
+  async handleFetch(req: Request): Promise<Response> {
+    const [state, versions, idle] = await Promise.all([
+      this.driver.debugState(),
+      this.driver.debugVersions(),
+      this.driver.debugIdleState(),
+    ]);
+
+    const msgState = `NGSW Debug Info:
+
+Driver state: ${state.state} (${state.why})
+Latest manifest hash: ${state.latestHash || 'none'}
+Last update check: ${this.since(state.lastUpdateCheck)}`;
+
+    const msgVersions = versions
+                            .map(version => `=== Version ${version.hash} ===
+
+Clients: ${version.clients.join(', ')}`)
+                            .join('\n\n');
+
+    const msgIdle = `=== Idle Task Queue ===
+Last update tick: ${this.since(idle.lastTrigger)}
+Last update run: ${this.since(idle.lastRun)}
+Task queue:
+${idle.queue.map(v => ' * ' + v).join('\n')}
+
+Debug log:
+${this.formatDebugLog(this.debugLogB)}
+${this.formatDebugLog(this.debugLogA)}
+`;
+
+    return this.adapter.newResponse(
+        `${msgState}
+
+${msgVersions}
+
+${msgIdle}`,
+        {headers: this.adapter.newHeaders({'Content-Type': 'text/plain'})});
+  }
+
+  since(time: number|null): string {
+    if (time === null) {
+      return 'never';
+    }
+    let age = this.adapter.time - time;
+    const days = Math.floor(age / 86400000);
+    age = age % 86400000;
+    const hours = Math.floor(age / 3600000);
+    age = age % 3600000;
+    const minutes = Math.floor(age / 60000);
+    age = age % 60000;
+    const seconds = Math.floor(age / 1000);
+    const millis = age % 1000;
+
+    return '' + (days > 0 ? `${days}d` : '') + (hours > 0 ? `${hours}h` : '') +
+        (minutes > 0 ? `${minutes}m` : '') + (seconds > 0 ? `${seconds}s` : '') +
+        (millis > 0 ? `${millis}u` : '');
+  }
+
+  log(value: string|Error, context: string = ''): void {
+    // Rotate the buffers if debugLogA has grown too large.
+    if (this.debugLogA.length === DEBUG_LOG_BUFFER_SIZE) {
+      this.debugLogB = this.debugLogA;
+      this.debugLogA = [];
+    }
+
+    // Convert errors to string for logging.
+    if (typeof value !== 'string') {
+      value = this.errorToString(value);
+    }
+
+    // Log the message.
+    this.debugLogA.push({value, time: this.adapter.time, context});
+  }
+
+  private errorToString(err: Error): string { return `${err.name}(${err.message}, ${err.stack})`; }
+
+  private formatDebugLog(log: DebugMessage[]): string {
+    return log.map(entry => `[${this.since(entry.time)}] ${entry.value} ${entry.context}`)
+        .join('\n');
+  }
+}
\ No newline at end of file
diff --git a/packages/service-worker/worker/src/driver.ts b/packages/service-worker/worker/src/driver.ts
new file mode 100644
index 000000000000..1dc99259b36c
--- /dev/null
+++ b/packages/service-worker/worker/src/driver.ts
@@ -0,0 +1,1009 @@
+/**
+ * @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 {Adapter, Context} from './adapter';
+import {CacheState, DebugIdleState, DebugState, DebugVersion, Debuggable, UpdateCacheStatus, UpdateSource} from './api';
+import {AppVersion} from './app-version';
+import {Database, Table} from './database';
+import {DebugHandler} from './debug';
+import {SwCriticalError} from './error';
+import {IdleScheduler} from './idle';
+import {Manifest, ManifestHash, hashManifest} from './manifest';
+import {MsgAny, isMsgActivateUpdate, isMsgCheckForUpdates} from './msg';
+
+type ClientId = string;
+
+type ManifestMap = {
+  [hash: string]: Manifest
+};
+type ClientAssignments = {
+  [id: string]: ManifestHash
+};
+
+const IDLE_THRESHOLD = 5000;
+
+const SUPPORTED_CONFIG_VERSION = 1;
+
+const NOTIFICATION_OPTION_NAMES = [
+  'actions', 'badge', 'body', 'dir', 'icon', 'lang', 'renotify', 'requireInteraction', 'tag',
+  'vibrate', 'data'
+];
+
+interface LatestEntry {
+  latest: string;
+}
+
+export enum DriverReadyState {
+  // The SW is operating in a normal mode, responding to all traffic.
+  NORMAL,
+
+  // The SW does not have a clean installation of the latest version of the app, but older
+  // cached versions are safe to use so long as they don't try to fetch new dependencies.
+  // This is a degraded state.
+  EXISTING_CLIENTS_ONLY,
+
+  // The SW has decided that caching is completely unreliable, and is forgoing request
+  // handling until the next restart.
+  SAFE_MODE,
+}
+
+export class Driver implements Debuggable, UpdateSource {
+  /**
+   * Tracks the current readiness condition under which the SW is operating. This controls
+   * whether the SW attempts to respond to some or all requests.
+   */
+  state: DriverReadyState = DriverReadyState.NORMAL;
+  private stateMessage: string = '(nominal)';
+
+  /**
+   * Tracks whether the SW is in an initialized state or not. Before initialization,
+   * it's not legal to respond to requests.
+   */
+  initialized: Promise<void>|null = null;
+
+  /**
+   * Maps client IDs to the manifest hash of the application version being used to serve
+   * them. If a client ID is not present here, it has not yet been assigned a version.
+   *
+   * If a ManifestHash appears here, it is also present in the `versions` map below.
+   */
+  private clientVersionMap = new Map<ClientId, ManifestHash>();
+
+  /**
+   * Maps manifest hashes to instances of `AppVersion` for those manifests.
+   */
+  private versions = new Map<ManifestHash, AppVersion>();
+
+  /**
+   * The latest version fetched from the server.
+   *
+   * Valid after initialization has completed.
+   */
+  private latestHash: ManifestHash|null = null;
+
+  private lastUpdateCheck: number|null = null;
+
+  /**
+   * Whether there is a check for updates currently scheduled due to navigation.
+   */
+  private scheduledNavUpdateCheck: boolean = false;
+
+  /**
+   * Keep track of whether we have logged an invalid `only-if-cached` request.
+   * (See `.onFetch()` for details.)
+   */
+  private loggedInvalidOnlyIfCachedRequest: boolean = false;
+
+  /**
+   * A scheduler which manages a queue of tasks that need to be executed when the SW is
+   * not doing any other work (not processing any other requests).
+   */
+  idle: IdleScheduler;
+
+  debugger: DebugHandler;
+
+  constructor(
+      private scope: ServiceWorkerGlobalScope, private adapter: Adapter, private db: Database) {
+    // Set up all the event handlers that the SW needs.
+
+    // The install event is triggered when the service worker is first installed.
+    this.scope.addEventListener('install', (event) => {
+      // SW code updates are separate from application updates, so code updates are
+      // almost as straightforward as restarting the SW. Because of this, it's always
+      // safe to skip waiting until application tabs are closed, and activate the new
+      // SW version immediately.
+      event !.waitUntil(this.scope.skipWaiting());
+    });
+
+    // The activate event is triggered when this version of the service worker is
+    // first activated.
+    this.scope.addEventListener('activate', (event) => {
+      // As above, it's safe to take over from existing clients immediately, since
+      // the new SW version will continue to serve the old application.
+      event !.waitUntil(this.scope.clients.claim());
+
+      // Rather than wait for the first fetch event, which may not arrive until
+      // the next time the application is loaded, the SW takes advantage of the
+      // activation event to schedule initialization. However, if this were run
+      // in the context of the 'activate' event, waitUntil() here would cause fetch
+      // events to block until initialization completed. Thus, the SW does a
+      // postMessage() to itself, to schedule a new event loop iteration with an
+      // entirely separate event context. The SW will be kept alive by waitUntil()
+      // within that separate context while initialization proceeds, while at the
+      // same time the activation event is allowed to resolve and traffic starts
+      // being served.
+      if (this.scope.registration.active !== null) {
+        this.scope.registration.active.postMessage({action: 'INITIALIZE'});
+      }
+    });
+
+    // Handle the fetch, message, and push events.
+    this.scope.addEventListener('fetch', (event) => this.onFetch(event !));
+    this.scope.addEventListener('message', (event) => this.onMessage(event !));
+    this.scope.addEventListener('push', (event) => this.onPush(event !));
+
+    // The debugger generates debug pages in response to debugging requests.
+    this.debugger = new DebugHandler(this, this.adapter);
+
+    // The IdleScheduler will execute idle tasks after a given delay.
+    this.idle = new IdleScheduler(this.adapter, IDLE_THRESHOLD, this.debugger);
+  }
+
+  /**
+   * The handler for fetch events.
+   *
+   * This is the transition point between the synchronous event handler and the
+   * asynchronous execution that eventually resolves for respondWith() and waitUntil().
+   */
+  private onFetch(event: FetchEvent): void {
+    const req = event.request;
+
+    // The only thing that is served unconditionally is the debug page.
+    if (this.adapter.parseUrl(req.url, this.scope.registration.scope).path === '/ngsw/state') {
+      // Allow the debugger to handle the request, but don't affect SW state in any
+      // other way.
+      event.respondWith(this.debugger.handleFetch(req));
+      return;
+    }
+
+    // If the SW is in a broken state where it's not safe to handle requests at all,
+    // returning causes the request to fall back on the network. This is preferred over
+    // `respondWith(fetch(req))` because the latter still shows in DevTools that the
+    // request was handled by the SW.
+    // TODO: try to handle DriverReadyState.EXISTING_CLIENTS_ONLY here.
+    if (this.state === DriverReadyState.SAFE_MODE) {
+      // Even though the worker is in safe mode, idle tasks still need to happen so
+      // things like update checks, etc. can take place.
+      event.waitUntil(this.idle.trigger());
+      return;
+    }
+
+    // When opening DevTools in Chrome, a request is made for the current URL (and possibly related
+    // resources, e.g. scripts) with `cache: 'only-if-cached'` and `mode: 'no-cors'`. These request
+    // will eventually fail, because `only-if-cached` is only allowed to be used with
+    // `mode: 'same-origin'`.
+    // This is likely a bug in Chrome DevTools. Avoid handling such requests.
+    // (See also https://github.com/angular/angular/issues/22362.)
+    // TODO(gkalpak): Remove once no longer necessary (i.e. fixed in Chrome DevTools).
+    if ((req.cache as string) === 'only-if-cached' && req.mode !== 'same-origin') {
+      // Log the incident only the first time it happens, to avoid spamming the logs.
+      if (!this.loggedInvalidOnlyIfCachedRequest) {
+        this.loggedInvalidOnlyIfCachedRequest = true;
+        this.debugger.log(
+            `Ignoring invalid request: 'only-if-cached' can be set only with 'same-origin' mode`,
+            `Driver.fetch(${req.url}, cache: ${req.cache}, mode: ${req.mode})`);
+      }
+      return;
+    }
+
+    // Past this point, the SW commits to handling the request itself. This could still
+    // fail (and result in `state` being set to `SAFE_MODE`), but even in that case the
+    // SW will still deliver a response.
+    event.respondWith(this.handleFetch(event));
+  }
+
+  /**
+   * The handler for message events.
+   */
+  private onMessage(event: ExtendableMessageEvent): void {
+    // Ignore message events when the SW is in safe mode, for now.
+    if (this.state === DriverReadyState.SAFE_MODE) {
+      return;
+    }
+
+    // If the message doesn't have the expected signature, ignore it.
+    const data = event.data;
+    if (!data || !data.action) {
+      return;
+    }
+
+    // Initialization is the only event which is sent directly from the SW to itself,
+    // and thus `event.source` is not a Client. Handle it here, before the check
+    // for Client sources.
+    if (data.action === 'INITIALIZE') {
+      // Only initialize if not already initialized (or initializing).
+      if (this.initialized === null) {
+        // Initialize the SW.
+        this.initialized = this.initialize();
+
+        // Wait until initialization is properly scheduled, then trigger idle
+        // events to allow it to complete (assuming the SW is idle).
+        event.waitUntil((async() => {
+          await this.initialized;
+          await this.idle.trigger();
+        })());
+      }
+
+      return;
+    }
+
+    // Only messages from true clients are accepted past this point (this is essentially
+    // a typecast).
+    if (!this.adapter.isClient(event.source)) {
+      return;
+    }
+
+    // Handle the message and keep the SW alive until it's handled.
+    event.waitUntil(this.handleMessage(data, event.source));
+  }
+
+  private onPush(msg: PushEvent): void {
+    // Push notifications without data have no effect.
+    if (!msg.data) {
+      return;
+    }
+
+    // Handle the push and keep the SW alive until it's handled.
+    msg.waitUntil(this.handlePush(msg.data.json()));
+  }
+
+  private async handleMessage(msg: MsgAny&{action: string}, from: Client): Promise<void> {
+    if (isMsgCheckForUpdates(msg)) {
+      const action = (async() => { await this.checkForUpdate(); })();
+      await this.reportStatus(from, action, msg.statusNonce);
+    } else if (isMsgActivateUpdate(msg)) {
+      await this.reportStatus(from, this.updateClient(from), msg.statusNonce);
+    }
+  }
+
+  private async handlePush(data: any): Promise<void> {
+    await this.broadcast({
+      type: 'PUSH',
+      data,
+    });
+    if (!data.notification || !data.notification.title) {
+      return;
+    }
+    const desc = data.notification as{[key: string]: string | undefined};
+    let options: {[key: string]: string | undefined} = {};
+    NOTIFICATION_OPTION_NAMES.filter(name => desc.hasOwnProperty(name))
+        .forEach(name => options[name] = desc[name]);
+    await this.scope.registration.showNotification(desc['title'] !, options);
+  }
+
+  private async reportStatus(client: Client, promise: Promise<void>, nonce: number): Promise<void> {
+    const response = {type: 'STATUS', nonce, status: true};
+    try {
+      await promise;
+      client.postMessage(response);
+    } catch (e) {
+      client.postMessage({
+        ...response,
+        status: false,
+        error: e.toString(),
+      });
+    }
+  }
+
+  async updateClient(client: Client): Promise<void> {
+    // Figure out which version the client is on. If it's not on the latest,
+    // it needs to be moved.
+    const existing = this.clientVersionMap.get(client.id);
+    if (existing === this.latestHash) {
+      // Nothing to do, this client is already on the latest version.
+      return;
+    }
+
+    // Switch the client over.
+    let previous: Object|undefined = undefined;
+
+    // Look up the application data associated with the existing version. If there
+    // isn't any, fall back on using the hash.
+    if (existing !== undefined) {
+      const existingVersion = this.versions.get(existing) !;
+      previous = this.mergeHashWithAppData(existingVersion.manifest, existing);
+    }
+
+    // Set the current version used by the client, and sync the mapping to disk.
+    this.clientVersionMap.set(client.id, this.latestHash !);
+    await this.sync();
+
+    // Notify the client about this activation.
+    const current = this.versions.get(this.latestHash !) !;
+    const notice = {
+      type: 'UPDATE_ACTIVATED',
+      previous,
+      current: this.mergeHashWithAppData(current.manifest, this.latestHash !),
+    };
+
+    client.postMessage(notice);
+  }
+
+  private async handleFetch(event: FetchEvent): Promise<Response> {
+    // Since the SW may have just been started, it may or may not have been initialized already.
+    // this.initialized will be `null` if initialization has not yet been attempted, or will be a
+    // Promise which will resolve (successfully or unsuccessfully) if it has.
+    if (this.initialized === null) {
+      // Initialization has not yet been attempted, so attempt it. This should only ever happen once
+      // per SW instantiation.
+      this.initialized = this.initialize();
+    }
+
+    // If initialization fails, the SW needs to enter a safe state, where it declines to respond to
+    // network requests.
+    try {
+      // Wait for initialization.
+      await this.initialized;
+    } catch (e) {
+      // Initialization failed. Enter a safe state.
+      this.state = DriverReadyState.SAFE_MODE;
+      this.stateMessage = `Initialization failed due to error: ${errorToString(e)}`;
+
+      // Even though the driver entered safe mode, background tasks still need to happen.
+      event.waitUntil(this.idle.trigger());
+
+      // Since the SW is already committed to responding to the currently active request,
+      // respond with a network fetch.
+      return this.safeFetch(event.request);
+    }
+
+    // On navigation requests, check for new updates.
+    if (event.request.mode === 'navigate' && !this.scheduledNavUpdateCheck) {
+      this.scheduledNavUpdateCheck = true;
+      this.idle.schedule('check-updates-on-navigation', async() => {
+        this.scheduledNavUpdateCheck = false;
+        await this.checkForUpdate();
+      });
+    }
+
+    // Decide which version of the app to use to serve this request. This is asynchronous as in
+    // some cases, a record will need to be written to disk about the assignment that is made.
+    const appVersion = await this.assignVersion(event);
+
+    // Bail out
+    if (appVersion === null) {
+      event.waitUntil(this.idle.trigger());
+      return this.safeFetch(event.request);
+    }
+
+    let res: Response|null = null;
+    try {
+      // Handle the request. First try the AppVersion. If that doesn't work, fall back on the
+      // network.
+      res = await appVersion.handleFetch(event.request, event);
+    } catch (err) {
+      if (err.isCritical) {
+        // Something went wrong with the activation of this version.
+        await this.versionFailed(appVersion, err, this.latestHash === appVersion.manifestHash);
+
+        event.waitUntil(this.idle.trigger());
+        return this.safeFetch(event.request);
+      }
+      throw err;
+    }
+
+
+    // The AppVersion will only return null if the manifest doesn't specify what to do about this
+    // request. In that case, just fall back on the network.
+    if (res === null) {
+      event.waitUntil(this.idle.trigger());
+      return this.safeFetch(event.request);
+    }
+
+    // Trigger the idle scheduling system. The Promise returned by trigger() will resolve after
+    // a specific amount of time has passed. If trigger() hasn't been called again by then (e.g.
+    // on a subsequent request), the idle task queue will be drained and the Promise won't resolve
+    // until that operation is complete as well.
+    event.waitUntil(this.idle.trigger());
+
+    // The AppVersion returned a usable response, so return it.
+    return res;
+  }
+
+  /**
+   * Attempt to quickly reach a state where it's safe to serve responses.
+   */
+  private async initialize(): Promise<void> {
+    // On initialization, all of the serialized state is read out of the 'control'
+    // table. This includes:
+    // - map of hashes to manifests of currently loaded application versions
+    // - map of client IDs to their pinned versions
+    // - record of the most recently fetched manifest hash
+    //
+    // If these values don't exist in the DB, then this is the either the first time
+    // the SW has run or the DB state has been wiped or is inconsistent. In that case,
+    // load a fresh copy of the manifest and reset the state from scratch.
+
+    // Open up the DB table.
+    const table = await this.db.open('control');
+
+    // Attempt to load the needed state from the DB. If this fails, the catch {} block
+    // will populate these variables with freshly constructed values.
+    let manifests: ManifestMap, assignments: ClientAssignments, latest: LatestEntry;
+    try {
+      // Read them from the DB simultaneously.
+      [manifests, assignments, latest] = await Promise.all([
+        table.read<ManifestMap>('manifests'),
+        table.read<ClientAssignments>('assignments'),
+        table.read<LatestEntry>('latest'),
+      ]);
+
+      // Successfully loaded from saved state. This implies a manifest exists, so
+      // the update check needs to happen in the background.
+      this.idle.schedule('init post-load (update, cleanup)', async() => {
+        await this.checkForUpdate();
+        try {
+          await this.cleanupCaches();
+        } catch (err) {
+          // Nothing to do - cleanup failed. Just log it.
+          this.debugger.log(err, 'cleanupCaches @ init post-load');
+        }
+      });
+    } catch (_) {
+      // Something went wrong. Try to start over by fetching a new manifest from the
+      // server and building up an empty initial state.
+      const manifest = await this.fetchLatestManifest();
+      const hash = hashManifest(manifest);
+      manifests = {};
+      manifests[hash] = manifest;
+      assignments = {};
+      latest = {latest: hash};
+
+      // Save the initial state to the DB.
+      await Promise.all([
+        table.write('manifests', manifests),
+        table.write('assignments', assignments),
+        table.write('latest', latest),
+      ]);
+    }
+
+    // At this point, either the state has been loaded successfully, or fresh state
+    // with a new copy of the manifest has been produced. At this point, the `Driver`
+    // can have its internals hydrated from the state.
+
+    // Initialize the `versions` map by setting each hash to a new `AppVersion` instance
+    // for that manifest.
+    Object.keys(manifests).forEach((hash: ManifestHash) => {
+      const manifest = manifests[hash];
+
+      // If the manifest is newly initialized, an AppVersion may have already been
+      // created for it.
+      if (!this.versions.has(hash)) {
+        this.versions.set(
+            hash, new AppVersion(this.scope, this.adapter, this.db, this.idle, manifest, hash));
+      }
+    });
+
+    // Map each client ID to its associated hash. Along the way, verify that the hash
+    // is still valid for that client ID. It should not be possible for a client to
+    // still be associated with a hash that was since removed from the state.
+    Object.keys(assignments).forEach((clientId: ClientId) => {
+      const hash = assignments[clientId];
+      if (this.versions.has(hash)) {
+        this.clientVersionMap.set(clientId, hash);
+      } else {
+        this.clientVersionMap.set(clientId, latest.latest);
+        this.debugger.log(
+            `Unknown version ${hash} mapped for client ${clientId}, using latest instead`,
+            `initialize: map assignments`);
+      }
+    });
+
+    // Set the latest version.
+    this.latestHash = latest.latest;
+
+    // Finally, assert that the latest version is in fact loaded.
+    if (!this.versions.has(latest.latest)) {
+      throw new Error(
+          `Invariant violated (initialize): latest hash ${latest.latest} has no known manifest`);
+    }
+
+
+
+    // Finally, wait for the scheduling of initialization of all versions in the
+    // manifest. Ordinarily this just schedules the initializations to happen during
+    // the next idle period, but in development mode this might actually wait for the
+    // full initialization.
+    // If any of these initializations fail, versionFailed() will be called either
+    // synchronously or asynchronously to handle the failure and re-map clients.
+    await Promise.all(Object.keys(manifests).map(async(hash: ManifestHash) => {
+      try {
+        // Attempt to schedule or initialize this version. If this operation is
+        // successful, then initialization either succeeded or was scheduled. If
+        // it fails, then full initialization was attempted and failed.
+        await this.scheduleInitialization(this.versions.get(hash) !, this.latestHash === hash);
+      } catch (err) {
+        this.debugger.log(err, `initialize: schedule init of ${hash}`);
+        return false;
+      }
+    }));
+  }
+
+  private lookupVersionByHash(hash: ManifestHash, debugName: string = 'lookupVersionByHash'):
+      AppVersion {
+    // The version should exist, but check just in case.
+    if (!this.versions.has(hash)) {
+      throw new Error(
+          `Invariant violated (${debugName}): want AppVersion for ${hash} but not loaded`);
+    }
+    return this.versions.get(hash) !;
+  }
+
+  /**
+   * Decide which version of the manifest to use for the event.
+   */
+  private async assignVersion(event: FetchEvent): Promise<AppVersion|null> {
+    // First, check whether the event has a (non empty) client ID. If it does, the version may
+    // already be associated.
+    const clientId = event.clientId;
+    if (clientId) {
+      // Check if there is an assigned client id.
+      if (this.clientVersionMap.has(clientId)) {
+        // There is an assignment for this client already.
+        const hash = this.clientVersionMap.get(clientId) !;
+        let appVersion = this.lookupVersionByHash(hash, 'assignVersion');
+
+        // Ordinarily, this client would be served from its assigned version. But, if this
+        // request is a navigation request, this client can be updated to the latest
+        // version immediately.
+        if (this.state === DriverReadyState.NORMAL && hash !== this.latestHash &&
+            appVersion.isNavigationRequest(event.request)) {
+          // Update this client to the latest version immediately.
+          if (this.latestHash === null) {
+            throw new Error(`Invariant violated (assignVersion): latestHash was null`);
+          }
+
+          const client = await this.scope.clients.get(clientId);
+
+          await this.updateClient(client);
+          appVersion = this.lookupVersionByHash(this.latestHash, 'assignVersion');
+        }
+
+        // TODO: make sure the version is valid.
+        return appVersion;
+      } else {
+        // This is the first time this client ID has been seen. Whether the SW is in a
+        // state to handle new clients depends on the current readiness state, so check
+        // that first.
+        if (this.state !== DriverReadyState.NORMAL) {
+          // It's not safe to serve new clients in the current state. It's possible that
+          // this is an existing client which has not been mapped yet (see below) but
+          // even if that is the case, it's invalid to make an assignment to a known
+          // invalid version, even if that assignment was previously implicit. Return
+          // undefined here to let the caller know that no assignment is possible at
+          // this time.
+          return null;
+        }
+
+        // It's safe to handle this request. Two cases apply. Either:
+        // 1) the browser assigned a client ID at the time of the navigation request, and
+        //    this is truly the first time seeing this client, or
+        // 2) a navigation request came previously from the same client, but with no client
+        //    ID attached. Browsers do this to avoid creating a client under the origin in
+        //    the event the navigation request is just redirected.
+        //
+        // In case 1, the latest version can safely be used.
+        // In case 2, the latest version can be used, with the assumption that the previous
+        // navigation request was answered under the same version. This assumption relies
+        // on the fact that it's unlikely an update will come in between the navigation
+        // request and requests for subsequent resources on that page.
+
+        // First validate the current state.
+        if (this.latestHash === null) {
+          throw new Error(`Invariant violated (assignVersion): latestHash was null`);
+        }
+
+        // Pin this client ID to the current latest version, indefinitely.
+        this.clientVersionMap.set(clientId, this.latestHash);
+        await this.sync();
+
+        // Return the latest `AppVersion`.
+        return this.lookupVersionByHash(this.latestHash, 'assignVersion');
+      }
+    } else {
+      // No client ID was associated with the request. This must be a navigation request
+      // for a new client. First check that the SW is accepting new clients.
+      if (this.state !== DriverReadyState.NORMAL) {
+        return null;
+      }
+
+      // Serve it with the latest version, and assume that the client will actually get
+      // associated with that version on the next request.
+
+      // First validate the current state.
+      if (this.latestHash === null) {
+        throw new Error(`Invariant violated (assignVersion): latestHash was null`);
+      }
+
+      // Return the latest `AppVersion`.
+      return this.lookupVersionByHash(this.latestHash, 'assignVersion');
+    }
+  }
+
+  /**
+   * Retrieve a copy of the latest manifest from the server.
+   * Return `null` if `ignoreOfflineError` is true (default: false) and the server or client are
+   * offline (detected as response status 504).
+   */
+  private async fetchLatestManifest(ignoreOfflineError?: false): Promise<Manifest>;
+  private async fetchLatestManifest(ignoreOfflineError: true): Promise<Manifest|null>;
+  private async fetchLatestManifest(ignoreOfflineError = false): Promise<Manifest|null> {
+    const res =
+        await this.safeFetch(this.adapter.newRequest('ngsw.json?ngsw-cache-bust=' + Math.random()));
+    if (!res.ok) {
+      if (res.status === 404) {
+        await this.deleteAllCaches();
+        await this.scope.registration.unregister();
+      } else if (res.status === 504 && ignoreOfflineError) {
+        return null;
+      }
+      throw new Error(`Manifest fetch failed! (status: ${res.status})`);
+    }
+    this.lastUpdateCheck = this.adapter.time;
+    return res.json();
+  }
+
+  private async deleteAllCaches(): Promise<void> {
+    await(await this.scope.caches.keys())
+        .filter(key => key.startsWith('ngsw:'))
+        .reduce(async(previous, key) => {
+          await Promise.all([
+            previous,
+            this.scope.caches.delete(key),
+          ]);
+        }, Promise.resolve());
+  }
+
+  /**
+   * Schedule the SW's attempt to reach a fully prefetched state for the given AppVersion
+   * when the SW is not busy and has connectivity. This returns a Promise which must be
+   * awaited, as under some conditions the AppVersion might be initialized immediately.
+   */
+  private async scheduleInitialization(appVersion: AppVersion, latest: boolean): Promise<void> {
+    const initialize = async() => {
+      try {
+        await appVersion.initializeFully();
+      } catch (err) {
+        this.debugger.log(err, `initializeFully for ${appVersion.manifestHash}`);
+        await this.versionFailed(appVersion, err, latest);
+      }
+    };
+    // TODO: better logic for detecting localhost.
+    if (this.scope.registration.scope.indexOf('://localhost') > -1) {
+      return initialize();
+    }
+    this.idle.schedule(`initialization(${appVersion.manifestHash})`, initialize);
+  }
+
+  private async versionFailed(appVersion: AppVersion, err: Error, latest: boolean): Promise<void> {
+    // This particular AppVersion is broken. First, find the manifest hash.
+    const broken =
+        Array.from(this.versions.entries()).find(([hash, version]) => version === appVersion);
+    if (broken === undefined) {
+      // This version is no longer in use anyway, so nobody cares.
+      return;
+    }
+    const brokenHash = broken[0];
+
+    // TODO: notify affected apps.
+
+    // The action taken depends on whether the broken manifest is the active (latest) or not.
+    // If so, the SW cannot accept new clients, but can continue to service old ones.
+    if (this.latestHash === brokenHash || latest) {
+      // The latest manifest is broken. This means that new clients are at the mercy of the
+      // network, but caches continue to be valid for previous versions. This is
+      // unfortunate but unavoidable.
+      this.state = DriverReadyState.EXISTING_CLIENTS_ONLY;
+      this.stateMessage = `Degraded due to failed initialization: ${errorToString(err)}`;
+
+      // Cancel the binding for these clients.
+      Array.from(this.clientVersionMap.keys())
+          .forEach(clientId => this.clientVersionMap.delete(clientId));
+    } else {
+      // The current version is viable, but this older version isn't. The only
+      // possible remedy is to stop serving the older version and go to the network.
+      // Figure out which clients are affected and put them on the latest.
+      const affectedClients =
+          Array.from(this.clientVersionMap.keys())
+              .filter(clientId => this.clientVersionMap.get(clientId) ! === brokenHash);
+      // Push the affected clients onto the latest version.
+      affectedClients.forEach(clientId => this.clientVersionMap.set(clientId, this.latestHash !));
+    }
+    await this.sync();
+  }
+
+  private async setupUpdate(manifest: Manifest, hash: string): Promise<void> {
+    const newVersion = new AppVersion(this.scope, this.adapter, this.db, this.idle, manifest, hash);
+
+    // Firstly, check if the manifest version is correct.
+    if (manifest.configVersion !== SUPPORTED_CONFIG_VERSION) {
+      await this.deleteAllCaches();
+      await this.scope.registration.unregister();
+      throw new Error(
+          `Invalid config version: expected ${SUPPORTED_CONFIG_VERSION}, got ${manifest.configVersion}.`);
+    }
+
+    // Cause the new version to become fully initialized. If this fails, then the
+    // version will not be available for use.
+    await newVersion.initializeFully(this);
+
+    // Install this as an active version of the app.
+    this.versions.set(hash, newVersion);
+    // Future new clients will use this hash as the latest version.
+    this.latestHash = hash;
+
+    await this.sync();
+    await this.notifyClientsAboutUpdate();
+  }
+
+  async checkForUpdate(): Promise<boolean> {
+    let hash: string = '(unknown)';
+    try {
+      const manifest = await this.fetchLatestManifest(true);
+
+      if (manifest === null) {
+        // Client or server offline. Unable to check for updates at this time.
+        // Continue to service clients (existing and new).
+        this.debugger.log('Check for update aborted. (Client or server offline.)');
+        return false;
+      }
+
+      hash = hashManifest(manifest);
+
+      // Check whether this is really an update.
+      if (this.versions.has(hash)) {
+        return false;
+      }
+
+      await this.setupUpdate(manifest, hash);
+
+      return true;
+    } catch (err) {
+      this.debugger.log(err, `Error occurred while updating to manifest ${hash}`);
+
+      this.state = DriverReadyState.EXISTING_CLIENTS_ONLY;
+      this.stateMessage = `Degraded due to failed initialization: ${errorToString(err)}`;
+
+      return false;
+    }
+  }
+
+  /**
+   * Synchronize the existing state to the underlying database.
+   */
+  private async sync(): Promise<void> {
+    // Open up the DB table.
+    const table = await this.db.open('control');
+
+    // Construct a serializable map of hashes to manifests.
+    const manifests: ManifestMap = {};
+    this.versions.forEach((version, hash) => { manifests[hash] = version.manifest; });
+
+    // Construct a serializable map of client ids to version hashes.
+    const assignments: ClientAssignments = {};
+    this.clientVersionMap.forEach((hash, clientId) => { assignments[clientId] = hash; });
+
+    // Record the latest entry. Since this is a sync which is necessarily happening after
+    // initialization, latestHash should always be valid.
+    const latest: LatestEntry = {
+      latest: this.latestHash !,
+    };
+
+    // Synchronize all of these.
+    await Promise.all([
+      table.write('manifests', manifests),
+      table.write('assignments', assignments),
+      table.write('latest', latest),
+    ]);
+  }
+
+  async cleanupCaches(): Promise<void> {
+    // Query for all currently active clients, and list the client ids. This may skip
+    // some clients in the browser back-forward cache, but not much can be done about
+    // that.
+    const activeClients: ClientId[] =
+        (await this.scope.clients.matchAll()).map(client => client.id);
+
+    // A simple list of client ids that the SW has kept track of. Subtracting
+    // activeClients from this list will result in the set of client ids which are
+    // being tracked but are no longer used in the browser, and thus can be cleaned up.
+    const knownClients: ClientId[] = Array.from(this.clientVersionMap.keys());
+
+    // Remove clients in the clientVersionMap that are no longer active.
+    knownClients.filter(id => activeClients.indexOf(id) === -1)
+        .forEach(id => this.clientVersionMap.delete(id));
+
+    // Next, determine the set of versions which are still used. All others can be
+    // removed.
+    const usedVersions = new Set<string>();
+    this.clientVersionMap.forEach((version, _) => usedVersions.add(version));
+
+    // Collect all obsolete versions by filtering out used versions from the set of all versions.
+    const obsoleteVersions =
+        Array.from(this.versions.keys())
+            .filter(version => !usedVersions.has(version) && version !== this.latestHash);
+
+    // Remove all the versions which are no longer used.
+    await obsoleteVersions.reduce(async(previous, version) => {
+      // Wait for the other cleanup operations to complete.
+      await previous;
+
+      // Try to get past the failure of one particular version to clean up (this
+      // shouldn't happen, but handle it just in case).
+      try {
+        // Get ahold of the AppVersion for this particular hash.
+        const instance = this.versions.get(version) !;
+
+        // Delete it from the canonical map.
+        this.versions.delete(version);
+
+        // Clean it up.
+        await instance.cleanup();
+      } catch (err) {
+        // Oh well? Not much that can be done here. These caches will be removed when
+        // the SW revs its format version, which happens from time to time.
+        this.debugger.log(err, `cleanupCaches - cleanup ${version}`);
+      }
+    }, Promise.resolve());
+
+    // Commit all the changes to the saved state.
+    await this.sync();
+  }
+
+  /**
+   * Determine if a specific version of the given resource is cached anywhere within the SW,
+   * and fetch it if so.
+   */
+  lookupResourceWithHash(url: string, hash: string): Promise<Response|null> {
+    return Array
+        // Scan through the set of all cached versions, valid or otherwise. It's safe to do such
+        // lookups even for invalid versions as the cached version of a resource will have the
+        // same hash regardless.
+        .from(this.versions.values())
+        // Reduce the set of versions to a single potential result. At any point along the
+        // reduction, if a response has already been identified, then pass it through, as no
+        // future operation could change the response. If no response has been found yet, keep
+        // checking versions until one is or until all versions have been exhausted.
+        .reduce(async(prev, version) => {
+          // First, check the previous result. If a non-null result has been found already, just
+          // return it.
+          if (await prev !== null) {
+            return prev;
+          }
+
+          // No result has been found yet. Try the next `AppVersion`.
+          return version.lookupResourceWithHash(url, hash);
+        }, Promise.resolve<Response|null>(null));
+  }
+
+  async lookupResourceWithoutHash(url: string): Promise<CacheState|null> {
+    await this.initialized;
+    const version = this.versions.get(this.latestHash !) !;
+    return version.lookupResourceWithoutHash(url);
+  }
+
+  async previouslyCachedResources(): Promise<string[]> {
+    await this.initialized;
+    const version = this.versions.get(this.latestHash !) !;
+    return version.previouslyCachedResources();
+  }
+
+  recentCacheStatus(url: string): Promise<UpdateCacheStatus> {
+    const version = this.versions.get(this.latestHash !) !;
+    return version.recentCacheStatus(url);
+  }
+
+  private mergeHashWithAppData(manifest: Manifest, hash: string): {hash: string, appData: Object} {
+    return {
+      hash,
+      appData: manifest.appData as Object,
+    };
+  }
+
+  async notifyClientsAboutUpdate(): Promise<void> {
+    await this.initialized;
+
+    const clients = await this.scope.clients.matchAll();
+    const next = this.versions.get(this.latestHash !) !;
+
+    await clients.reduce(async(previous, client) => {
+      await previous;
+
+      // Firstly, determine which version this client is on.
+      const version = this.clientVersionMap.get(client.id);
+      if (version === undefined) {
+        // Unmapped client - assume it's the latest.
+        return;
+      }
+
+      if (version === this.latestHash) {
+        // Client is already on the latest version, no need for a notification.
+        return;
+      }
+
+      const current = this.versions.get(version) !;
+
+      // Send a notice.
+      const notice = {
+        type: 'UPDATE_AVAILABLE',
+        current: this.mergeHashWithAppData(current.manifest, version),
+        available: this.mergeHashWithAppData(next.manifest, this.latestHash !),
+      };
+
+      client.postMessage(notice);
+
+    }, Promise.resolve());
+  }
+
+  async broadcast(msg: Object): Promise<void> {
+    const clients = await this.scope.clients.matchAll();
+    clients.forEach(client => { client.postMessage(msg); });
+  }
+
+  async debugState(): Promise<DebugState> {
+    return {
+      state: DriverReadyState[this.state],
+      why: this.stateMessage,
+      latestHash: this.latestHash,
+      lastUpdateCheck: this.lastUpdateCheck,
+    };
+  }
+
+  async debugVersions(): Promise<DebugVersion[]> {
+    // Build list of versions.
+    return Array.from(this.versions.keys()).map(hash => {
+      const version = this.versions.get(hash) !;
+      const clients = Array.from(this.clientVersionMap.entries())
+                          .filter(([clientId, version]) => version === hash)
+                          .map(([clientId, version]) => clientId);
+      return {
+        hash,
+        manifest: version.manifest, clients,
+        status: '',
+      };
+    });
+  }
+
+  async debugIdleState(): Promise<DebugIdleState> {
+    return {
+      queue: this.idle.taskDescriptions,
+      lastTrigger: this.idle.lastTrigger,
+      lastRun: this.idle.lastRun,
+    };
+  }
+
+  async safeFetch(req: Request): Promise<Response> {
+    try {
+      return await this.scope.fetch(req);
+    } catch (err) {
+      this.debugger.log(err, `Driver.fetch(${req.url})`);
+      return this.adapter.newResponse(null, {
+        status: 504,
+        statusText: 'Gateway Timeout',
+      });
+    }
+  }
+}
+
+function errorToString(error: any): string {
+  if (error instanceof Error) {
+    return `${error.message}\n${error.stack}`;
+  } else {
+    return `${error}`;
+  }
+}
diff --git a/packages/service-worker/worker/src/error.ts b/packages/service-worker/worker/src/error.ts
new file mode 100644
index 000000000000..fa445acabd2a
--- /dev/null
+++ b/packages/service-worker/worker/src/error.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 class SwCriticalError extends Error { readonly isCritical: boolean = true; }
diff --git a/packages/service-worker/worker/src/idle.ts b/packages/service-worker/worker/src/idle.ts
new file mode 100644
index 000000000000..60a8f9b6a917
--- /dev/null
+++ b/packages/service-worker/worker/src/idle.ts
@@ -0,0 +1,90 @@
+/**
+ * @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 {Adapter} from './adapter';
+import {DebugLogger} from './api';
+
+export interface IdleTask {
+  run: () => Promise<void>;
+  desc: string;
+}
+
+interface ScheduledRun {
+  cancel: boolean;
+}
+
+export class IdleScheduler {
+  private queue: IdleTask[] = [];
+  private scheduled: ScheduledRun|null = null;
+  empty: Promise<void> = Promise.resolve();
+  private emptyResolve: Function|null = null;
+  lastTrigger: number|null = null;
+  lastRun: number|null = null;
+
+  constructor(private adapter: Adapter, private threshold: number, private debug: DebugLogger) {}
+
+  async trigger(): Promise<void> {
+    this.lastTrigger = this.adapter.time;
+    if (this.queue.length === 0) {
+      return;
+    }
+
+    if (this.scheduled !== null) {
+      this.scheduled.cancel = true;
+    }
+
+    const scheduled = {
+      cancel: false,
+    };
+    this.scheduled = scheduled;
+
+    await this.adapter.timeout(this.threshold);
+
+    if (scheduled.cancel) {
+      return;
+    }
+
+    this.scheduled = null;
+
+    await this.execute();
+  }
+
+  async execute(): Promise<void> {
+    this.lastRun = this.adapter.time;
+    while (this.queue.length > 0) {
+      const queue = this.queue;
+      this.queue = [];
+
+      await queue.reduce(async(previous, task) => {
+        await previous;
+        try {
+          await task.run();
+        } catch (err) {
+          this.debug.log(err, `while running idle task ${task.desc}`);
+        }
+      }, Promise.resolve());
+    }
+
+    if (this.emptyResolve !== null) {
+      this.emptyResolve();
+      this.emptyResolve = null;
+    }
+    this.empty = Promise.resolve();
+  }
+
+  schedule(desc: string, run: () => Promise<void>): void {
+    this.queue.push({desc, run});
+    if (this.emptyResolve === null) {
+      this.empty = new Promise(resolve => { this.emptyResolve = resolve; });
+    }
+  }
+
+  get size(): number { return this.queue.length; }
+
+  get taskDescriptions(): string[] { return this.queue.map(task => task.desc); }
+}
\ No newline at end of file
diff --git a/packages/service-worker/worker/src/manifest.ts b/packages/service-worker/worker/src/manifest.ts
new file mode 100644
index 000000000000..7800afa4885e
--- /dev/null
+++ b/packages/service-worker/worker/src/manifest.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
+ */
+
+import {sha1} from './sha1';
+
+export type ManifestHash = string;
+
+export interface Manifest {
+  configVersion: number;
+  appData?: {[key: string]: string};
+  index: string;
+  assetGroups?: AssetGroupConfig[];
+  dataGroups?: DataGroupConfig[];
+  navigationUrls: {positive: boolean, regex: string}[];
+  hashTable: {[url: string]: string};
+}
+
+export interface AssetGroupConfig {
+  name: string;
+  installMode: 'prefetch'|'lazy';
+  updateMode: 'prefetch'|'lazy';
+  urls: string[];
+  patterns: string[];
+}
+
+export interface DataGroupConfig {
+  name: string;
+  version: number;
+  strategy: 'freshness'|'performance';
+  patterns: string[];
+  maxSize: number;
+  timeoutMs?: number;
+  refreshAheadMs?: number;
+  maxAge: number;
+}
+
+export function hashManifest(manifest: Manifest): ManifestHash {
+  return sha1(JSON.stringify(manifest));
+}
diff --git a/packages/service-worker/worker/src/msg.ts b/packages/service-worker/worker/src/msg.ts
new file mode 100644
index 000000000000..df539386adf0
--- /dev/null
+++ b/packages/service-worker/worker/src/msg.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 interface MsgAny { action: string; }
+
+export interface MsgCheckForUpdates {
+  action: 'CHECK_FOR_UPDATES';
+  statusNonce: number;
+}
+
+export function isMsgCheckForUpdates(msg: MsgAny): msg is MsgCheckForUpdates {
+  return msg.action === 'CHECK_FOR_UPDATES';
+}
+
+export interface MsgActivateUpdate {
+  action: 'ACTIVATE_UPDATE';
+  statusNonce: number;
+}
+
+export function isMsgActivateUpdate(msg: MsgAny): msg is MsgActivateUpdate {
+  return msg.action === 'ACTIVATE_UPDATE';
+}
+
+export interface MsgCheckVersion {
+  action: 'CHECK_VERSION';
+  nonce: number;
+}
+
+export function isMsgCheckVersion(msg: MsgAny): msg is MsgCheckVersion {
+  return msg.action === 'CHECK_VERSION';
+}
\ No newline at end of file
diff --git a/packages/service-worker/worker/src/service-worker.d.ts b/packages/service-worker/worker/src/service-worker.d.ts
new file mode 100644
index 000000000000..9d01e81e5841
--- /dev/null
+++ b/packages/service-worker/worker/src/service-worker.d.ts
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2016, Tiernan Cridland
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose with or without
+ * fee is hereby
+ * granted, provided that the above copyright notice and this permission notice appear in all
+ * copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS
+ * SOFTWARE INCLUDING ALL
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
+ * SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR
+ * PROFITS, WHETHER
+ * IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION
+ * WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ *
+ * Typings for Service Worker
+ * @author Tiernan Cridland
+ * @email tiernanc@gmail.com
+ * @license: ISC
+ */
+interface ExtendableEvent extends Event {
+  waitUntil(fn: Promise<any>): void;
+}
+
+// Client API
+
+declare class Client {
+  frameType: ClientFrameType;
+  id: string;
+  url: string;
+  postMessage(message: any): void;
+}
+
+interface Clients {
+  claim(): Promise<any>;
+  get(id: string): Promise<Client>;
+  matchAll(options?: ClientMatchOptions): Promise<Array<Client>>;
+}
+
+interface ClientMatchOptions {
+  includeUncontrolled?: boolean;
+  type?: ClientMatchTypes;
+}
+
+interface WindowClient {
+  focused: boolean;
+  visibilityState: WindowClientState;
+  focus(): Promise<WindowClient>;
+  navigate(url: string): Promise<WindowClient>;
+}
+
+type ClientFrameType = 'auxiliary' | 'top-level' | 'nested' | 'none';
+type ClientMatchTypes = 'window' | 'worker' | 'sharedworker' | 'all';
+type WindowClientState = 'hidden' | 'visible' | 'prerender' | 'unloaded';
+
+// Fetch API
+
+interface FetchEvent extends ExtendableEvent {
+  clientId: string|null;
+  request: Request;
+  respondWith(response: Promise<Response>|Response): Promise<Response>;
+}
+
+interface InstallEvent extends ExtendableEvent {
+  activeWorker: ServiceWorker;
+}
+
+interface ActivateEvent extends ExtendableEvent {}
+
+// Notification API
+
+interface NotificationEvent {
+  action: string;
+  notification: Notification;
+}
+
+// Push API
+
+interface PushEvent extends ExtendableEvent {
+  data: PushMessageData;
+}
+
+interface PushMessageData {
+  arrayBuffer(): ArrayBuffer;
+  blob(): Blob;
+  json(): any;
+  text(): string;
+}
+
+// Sync API
+
+interface SyncEvent extends ExtendableEvent {
+  lastChance: boolean;
+  tag: string;
+}
+
+interface ExtendableMessageEvent extends ExtendableEvent {
+  data: any;
+  source: Client|Object;
+}
+
+// ServiceWorkerGlobalScope
+
+interface ServiceWorkerGlobalScope {
+  caches: CacheStorage;
+  clients: Clients;
+  registration: ServiceWorkerRegistration;
+
+  addEventListener(event: 'activate', fn: (event?: ExtendableEvent) => any): void;
+  addEventListener(event: 'message', fn: (event?: ExtendableMessageEvent) => any): void;
+  addEventListener(event: 'fetch', fn: (event?: FetchEvent) => any): void;
+  addEventListener(event: 'install', fn: (event?: ExtendableEvent) => any): void;
+  addEventListener(event: 'push', fn: (event?: PushEvent) => any): void;
+  addEventListener(event: 'sync', fn: (event?: SyncEvent) => any): void;
+
+  fetch(request: Request|string): Promise<Response>;
+  skipWaiting(): Promise<void>;
+}
diff --git a/packages/service-worker/worker/src/sha1.ts b/packages/service-worker/worker/src/sha1.ts
new file mode 100644
index 000000000000..a01f0e744e37
--- /dev/null
+++ b/packages/service-worker/worker/src/sha1.ts
@@ -0,0 +1,217 @@
+/**
+ * @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
+ */
+
+/**
+ * Compute the SHA1 of the given string
+ *
+ * see http://csrc.nist.gov/publications/fips/fips180-4/fips-180-4.pdf
+ *
+ * WARNING: this function has not been designed not tested with security in mind.
+ *          DO NOT USE IT IN A SECURITY SENSITIVE CONTEXT.
+ *
+ * Borrowed from @angular/compiler/src/i18n/digest.ts
+ */
+
+export function sha1(str: string): string {
+  const utf8 = str;
+  const words32 = stringToWords32(utf8, Endian.Big);
+  return _sha1(words32, utf8.length * 8);
+}
+
+export function sha1Binary(buffer: ArrayBuffer): string {
+  const words32 = arrayBufferToWords32(buffer, Endian.Big);
+  return _sha1(words32, buffer.byteLength * 8);
+}
+
+function _sha1(words32: number[], len: number): string {
+  const w = new Array(80);
+  let [a, b, c, d, e]: number[] = [0x67452301, 0xefcdab89, 0x98badcfe, 0x10325476, 0xc3d2e1f0];
+
+  words32[len >> 5] |= 0x80 << (24 - len % 32);
+  words32[((len + 64 >> 9) << 4) + 15] = len;
+
+  for (let i = 0; i < words32.length; i += 16) {
+    const [h0, h1, h2, h3, h4]: number[] = [a, b, c, d, e];
+
+    for (let j = 0; j < 80; j++) {
+      if (j < 16) {
+        w[j] = words32[i + j];
+      } else {
+        w[j] = rol32(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1);
+      }
+
+      const [f, k] = fk(j, b, c, d);
+      const temp = [rol32(a, 5), f, e, k, w[j]].reduce(add32);
+      [e, d, c, b, a] = [d, c, rol32(b, 30), a, temp];
+    }
+
+    [a, b, c, d, e] = [add32(a, h0), add32(b, h1), add32(c, h2), add32(d, h3), add32(e, h4)];
+  }
+
+  return byteStringToHexString(words32ToByteString([a, b, c, d, e]));
+}
+
+function add32(a: number, b: number): number {
+  return add32to64(a, b)[1];
+}
+
+function add32to64(a: number, b: number): [number, number] {
+  const low = (a & 0xffff) + (b & 0xffff);
+  const high = (a >>> 16) + (b >>> 16) + (low >>> 16);
+  return [high >>> 16, (high << 16) | (low & 0xffff)];
+}
+
+function add64([ah, al]: [number, number], [bh, bl]: [number, number]): [number, number] {
+  const [carry, l] = add32to64(al, bl);
+  const h = add32(add32(ah, bh), carry);
+  return [h, l];
+}
+
+function sub32(a: number, b: number): number {
+  const low = (a & 0xffff) - (b & 0xffff);
+  const high = (a >> 16) - (b >> 16) + (low >> 16);
+  return (high << 16) | (low & 0xffff);
+}
+
+// Rotate a 32b number left `count` position
+function rol32(a: number, count: number): number {
+  return (a << count) | (a >>> (32 - count));
+}
+
+// Rotate a 64b number left `count` position
+function rol64([hi, lo]: [number, number], count: number): [number, number] {
+  const h = (hi << count) | (lo >>> (32 - count));
+  const l = (lo << count) | (hi >>> (32 - count));
+  return [h, l];
+}
+
+enum Endian {
+  Little,
+  Big,
+}
+
+function fk(index: number, b: number, c: number, d: number): [number, number] {
+  if (index < 20) {
+    return [(b & c) | (~b & d), 0x5a827999];
+  }
+
+  if (index < 40) {
+    return [b ^ c ^ d, 0x6ed9eba1];
+  }
+
+  if (index < 60) {
+    return [(b & c) | (b & d) | (c & d), 0x8f1bbcdc];
+  }
+
+  return [b ^ c ^ d, 0xca62c1d6];
+}
+
+
+function stringToWords32(str: string, endian: Endian): number[] {
+  const words32 = Array((str.length + 3) >>> 2);
+
+  for (let i = 0; i < words32.length; i++) {
+    words32[i] = wordAt(str, i * 4, endian);
+  }
+
+  return words32;
+}
+
+function arrayBufferToWords32(buffer: ArrayBuffer, endian: Endian): number[] {
+  const words32 = Array((buffer.byteLength + 3) >>> 2);
+  const view = new Uint8Array(buffer);
+  for (let i = 0; i < words32.length; i++) {
+    words32[i] = wordAt(view, i * 4, endian);
+  }
+  return words32;
+}
+
+function byteAt(str: string | Uint8Array, index: number): number {
+  if (typeof str === 'string') {
+    return index >= str.length ? 0 : str.charCodeAt(index) & 0xff;
+  } else {
+    return index >= str.byteLength ? 0 : str[index] & 0xff;
+  }
+}
+
+function wordAt(str: string | Uint8Array, index: number, endian: Endian): number {
+  let word = 0;
+  if (endian === Endian.Big) {
+    for (let i = 0; i < 4; i++) {
+      word += byteAt(str, index + i) << (24 - 8 * i);
+    }
+  } else {
+    for (let i = 0; i < 4; i++) {
+      word += byteAt(str, index + i) << 8 * i;
+    }
+  }
+  return word;
+}
+
+function words32ToByteString(words32: number[]): string {
+  return words32.reduce((str, word) => str + word32ToByteString(word), '');
+}
+
+function word32ToByteString(word: number): string {
+  let str = '';
+  for (let i = 0; i < 4; i++) {
+    str += String.fromCharCode((word >>> 8 * (3 - i)) & 0xff);
+  }
+  return str;
+}
+
+function byteStringToHexString(str: string): string {
+  let hex: string = '';
+  for (let i = 0; i < str.length; i++) {
+    const b = byteAt(str, i);
+    hex += (b >>> 4).toString(16) + (b & 0x0f).toString(16);
+  }
+  return hex.toLowerCase();
+}
+
+// based on http://www.danvk.org/hex2dec.html (JS can not handle more than 56b)
+function byteStringToDecString(str: string): string {
+  let decimal = '';
+  let toThePower = '1';
+
+  for (let i = str.length - 1; i >= 0; i--) {
+    decimal = addBigInt(decimal, numberTimesBigInt(byteAt(str, i), toThePower));
+    toThePower = numberTimesBigInt(256, toThePower);
+  }
+
+  return decimal.split('').reverse().join('');
+}
+
+// x and y decimal, lowest significant digit first
+function addBigInt(x: string, y: string): string {
+  let sum = '';
+  const len = Math.max(x.length, y.length);
+  for (let i = 0, carry = 0; i < len || carry; i++) {
+    const tmpSum = carry + +(x[i] || 0) + +(y[i] || 0);
+    if (tmpSum >= 10) {
+      carry = 1;
+      sum += tmpSum - 10;
+    } else {
+      carry = 0;
+      sum += tmpSum;
+    }
+  }
+
+  return sum;
+}
+
+
+function numberTimesBigInt(num: number, b: string): string {
+  let product = '';
+  let bToThePower = b;
+  for (; num !== 0; num = num >>> 1) {
+    if (num & 1) product = addBigInt(product, bToThePower);
+    bToThePower = addBigInt(bToThePower, bToThePower);
+  }
+  return product;
+}
diff --git a/packages/service-worker/worker/test/BUILD.bazel b/packages/service-worker/worker/test/BUILD.bazel
new file mode 100644
index 000000000000..fafb2f5f2dff
--- /dev/null
+++ b/packages/service-worker/worker/test/BUILD.bazel
@@ -0,0 +1,24 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        ["**/*.ts"],
+    ),
+    deps = [
+        "//packages:types",
+        "//packages/service-worker/config",
+        "//packages/service-worker/worker",
+        "//packages/service-worker/worker/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    srcs = [],
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/service-worker/worker/test/async.ts b/packages/service-worker/worker/test/async.ts
new file mode 100644
index 000000000000..46de95925820
--- /dev/null
+++ b/packages/service-worker/worker/test/async.ts
@@ -0,0 +1,28 @@
+/**
+ * @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
+ */
+
+function wrap(fn: () => Promise<void>): (done: DoneFn) => void {
+  return (done: DoneFn) => { fn().then(() => done()).catch(err => done.fail(err)); };
+}
+
+export function async_beforeAll(fn: () => Promise<void>): void {
+  beforeAll(wrap(fn));
+}
+
+export function async_beforeEach(fn: () => Promise<void>): void {
+  beforeEach(wrap(fn));
+}
+
+export function async_it(desc: string, fn: () => Promise<void>): void {
+  it(desc, wrap(fn));
+}
+
+export function async_fit(desc: string, fn: () => Promise<void>): void {
+  // tslint:disable-next-line:no-jasmine-focus
+  fit(desc, wrap(fn));
+}
diff --git a/packages/service-worker/worker/test/data_spec.ts b/packages/service-worker/worker/test/data_spec.ts
new file mode 100644
index 000000000000..cdfe16b7e21e
--- /dev/null
+++ b/packages/service-worker/worker/test/data_spec.ts
@@ -0,0 +1,272 @@
+/**
+ * @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 {CacheDatabase} from '../src/db-cache';
+import {Driver} from '../src/driver';
+import {Manifest} from '../src/manifest';
+import {MockRequest} from '../testing/fetch';
+import {MockFileSystemBuilder, MockServerStateBuilder, tmpHashTableForFs} from '../testing/mock';
+import {SwTestHarness, SwTestHarnessBuilder} from '../testing/scope';
+
+import {async_beforeEach, async_fit, async_it} from './async';
+
+const dist = new MockFileSystemBuilder()
+                 .addFile('/foo.txt', 'this is foo')
+                 .addFile('/bar.txt', 'this is bar')
+                 .addFile('/api/test', 'version 1')
+                 .addFile('/api/a', 'version A')
+                 .addFile('/api/b', 'version B')
+                 .addFile('/api/c', 'version C')
+                 .addFile('/api/d', 'version D')
+                 .addFile('/api/e', 'version E')
+                 .addFile('/fresh/data', 'this is fresh data')
+                 .addFile('/refresh/data', 'this is some data')
+                 .build();
+
+
+const distUpdate = new MockFileSystemBuilder()
+                       .addFile('/foo.txt', 'this is foo v2')
+                       .addFile('/bar.txt', 'this is bar')
+                       .addFile('/api/test', 'version 2')
+                       .addFile('/fresh/data', 'this is fresher data')
+                       .addFile('/refresh/data', 'this is refreshed data')
+                       .build();
+
+const manifest: Manifest = {
+  configVersion: 1,
+  index: '/index.html',
+  assetGroups: [
+    {
+      name: 'assets',
+      installMode: 'prefetch',
+      updateMode: 'prefetch',
+      urls: [
+        '/foo.txt',
+        '/bar.txt',
+      ],
+      patterns: [],
+    },
+  ],
+  dataGroups: [
+    {
+      name: 'testPerf',
+      maxSize: 3,
+      strategy: 'performance',
+      patterns: ['^/api/.*$'],
+      timeoutMs: 1000,
+      maxAge: 5000,
+      version: 1,
+    },
+    {
+      name: 'testRefresh',
+      maxSize: 3,
+      strategy: 'performance',
+      patterns: ['^/refresh/.*$'],
+      timeoutMs: 1000,
+      refreshAheadMs: 1000,
+      maxAge: 5000,
+      version: 1,
+    },
+    {
+      name: 'testFresh',
+      maxSize: 3,
+      strategy: 'freshness',
+      patterns: ['^/fresh/.*$'],
+      timeoutMs: 1000,
+      maxAge: 5000,
+      version: 1,
+    },
+  ],
+  navigationUrls: [],
+  hashTable: tmpHashTableForFs(dist),
+};
+
+const seqIncreasedManifest: Manifest = {
+  ...manifest,
+  dataGroups: [
+    {
+      ...manifest.dataGroups ![0],
+      version: 2,
+    },
+    manifest.dataGroups ![1],
+    manifest.dataGroups ![2],
+  ],
+};
+
+
+const server = new MockServerStateBuilder().withStaticFiles(dist).withManifest(manifest).build();
+
+const serverUpdate =
+    new MockServerStateBuilder().withStaticFiles(distUpdate).withManifest(manifest).build();
+
+const serverSeqUpdate = new MockServerStateBuilder()
+                            .withStaticFiles(distUpdate)
+                            .withManifest(seqIncreasedManifest)
+                            .build();
+
+const scope = new SwTestHarnessBuilder().withServerState(server).build();
+
+function asyncWrap(fn: () => Promise<void>): (done: DoneFn) => void {
+  return (done: DoneFn) => { fn().then(() => done(), err => done.fail(err)); };
+}
+
+(function() {
+  // Skip environments that don't support the minimum APIs needed to run the SW tests.
+  if (!SwTestHarness.envIsSupported()) {
+    return;
+  }
+  describe('data cache', () => {
+    let scope: SwTestHarness;
+    let driver: Driver;
+    async_beforeEach(async() => {
+      server.clearRequests();
+      scope = new SwTestHarnessBuilder().withServerState(server).build();
+      driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+
+      // Initialize.
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      server.reset();
+      serverUpdate.reset();
+    });
+
+    describe('in performance mode', () => {
+      async_it('names the caches correctly', async() => {
+        expect(await makeRequest(scope, '/api/test')).toEqual('version 1');
+        const keys = await scope.caches.keys();
+        expect(keys.every(key => key.startsWith('ngsw:'))).toEqual(true);
+      });
+
+      async_it('caches a basic request', async() => {
+        expect(await makeRequest(scope, '/api/test')).toEqual('version 1');
+        server.assertSawRequestFor('/api/test');
+        scope.advance(1000);
+        expect(await makeRequest(scope, '/api/test')).toEqual('version 1');
+        server.assertNoOtherRequests();
+      });
+
+      async_it('refreshes after awhile', async() => {
+        expect(await makeRequest(scope, '/api/test')).toEqual('version 1');
+        server.clearRequests();
+        scope.advance(10000);
+        scope.updateServerState(serverUpdate);
+        expect(await makeRequest(scope, '/api/test')).toEqual('version 2');
+      });
+
+      async_it('expires the least recently used entry', async() => {
+        expect(await makeRequest(scope, '/api/a')).toEqual('version A');
+        expect(await makeRequest(scope, '/api/b')).toEqual('version B');
+        expect(await makeRequest(scope, '/api/c')).toEqual('version C');
+        expect(await makeRequest(scope, '/api/d')).toEqual('version D');
+        expect(await makeRequest(scope, '/api/e')).toEqual('version E');
+        server.clearRequests();
+        expect(await makeRequest(scope, '/api/c')).toEqual('version C');
+        expect(await makeRequest(scope, '/api/d')).toEqual('version D');
+        expect(await makeRequest(scope, '/api/e')).toEqual('version E');
+        server.assertNoOtherRequests();
+        expect(await makeRequest(scope, '/api/a')).toEqual('version A');
+        expect(await makeRequest(scope, '/api/b')).toEqual('version B');
+        server.assertSawRequestFor('/api/a');
+        server.assertSawRequestFor('/api/b');
+        server.assertNoOtherRequests();
+      });
+
+      async_it('does not carry over cache with new version', async() => {
+        expect(await makeRequest(scope, '/api/test')).toEqual('version 1');
+        scope.updateServerState(serverSeqUpdate);
+        expect(await driver.checkForUpdate()).toEqual(true);
+        await driver.updateClient(await scope.clients.get('default'));
+        expect(await makeRequest(scope, '/api/test')).toEqual('version 2');
+      });
+    });
+
+    describe('in freshness mode', () => {
+      async_it('goes to the server first', async() => {
+        expect(await makeRequest(scope, '/fresh/data')).toEqual('this is fresh data');
+        server.assertSawRequestFor('/fresh/data');
+        server.clearRequests();
+        expect(await makeRequest(scope, '/fresh/data')).toEqual('this is fresh data');
+        server.assertSawRequestFor('/fresh/data');
+        server.assertNoOtherRequests();
+        scope.updateServerState(serverUpdate);
+        expect(await makeRequest(scope, '/fresh/data')).toEqual('this is fresher data');
+        serverUpdate.assertSawRequestFor('/fresh/data');
+        serverUpdate.assertNoOtherRequests();
+      });
+
+      async_it('falls back on the cache when server times out', async() => {
+        expect(await makeRequest(scope, '/fresh/data')).toEqual('this is fresh data');
+        server.assertSawRequestFor('/fresh/data');
+        server.clearRequests();
+        scope.updateServerState(serverUpdate);
+        serverUpdate.pause();
+        const [res, done] = makePendingRequest(scope, '/fresh/data');
+
+        await serverUpdate.nextRequest;
+
+        // Since the network request doesn't return within the timeout of 1,000ms,
+        // this should return cached data.
+        scope.advance(2000);
+
+        expect(await res).toEqual('this is fresh data');
+
+        // Unpausing allows the worker to continue with caching.
+        serverUpdate.unpause();
+        await done;
+
+        serverUpdate.pause();
+        const [res2, done2] = makePendingRequest(scope, '/fresh/data');
+        await serverUpdate.nextRequest;
+        scope.advance(2000);
+        expect(await res2).toEqual('this is fresher data');
+      });
+
+      async_it('refreshes ahead', async() => {
+        server.assertNoOtherRequests();
+        serverUpdate.assertNoOtherRequests();
+        expect(await makeRequest(scope, '/refresh/data')).toEqual('this is some data');
+        server.assertSawRequestFor('/refresh/data');
+        server.clearRequests();
+        expect(await makeRequest(scope, '/refresh/data')).toEqual('this is some data');
+        server.assertNoOtherRequests();
+        scope.updateServerState(serverUpdate);
+        scope.advance(1500);
+        expect(await makeRequest(scope, '/refresh/data')).toEqual('this is some data');
+        serverUpdate.assertSawRequestFor('/refresh/data');
+        expect(await makeRequest(scope, '/refresh/data')).toEqual('this is refreshed data');
+        serverUpdate.assertNoOtherRequests();
+      });
+    });
+  });
+})();
+
+async function makeRequest(scope: SwTestHarness, url: string, clientId?: string):
+    Promise<string|null> {
+      const [resPromise, done] = scope.handleFetch(new MockRequest(url), clientId || 'default');
+      await done;
+      const res = await resPromise;
+      if (res !== undefined) {
+        return res.text();
+      }
+      return null;
+    }
+
+function makePendingRequest(scope: SwTestHarness, url: string, clientId?: string):
+    [Promise<string|null>, Promise<void>] {
+      const [resPromise, done] = scope.handleFetch(new MockRequest(url), clientId || 'default');
+      return [
+        (async() => {
+          const res = await resPromise;
+          if (res !== undefined) {
+            return res.text();
+          }
+          return null;
+        })(),
+        done
+      ];
+    }
diff --git a/packages/service-worker/worker/test/happy_spec.ts b/packages/service-worker/worker/test/happy_spec.ts
new file mode 100644
index 000000000000..4ca3969b4a96
--- /dev/null
+++ b/packages/service-worker/worker/test/happy_spec.ts
@@ -0,0 +1,876 @@
+/**
+ * @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 {processNavigationUrls} from '../../config/src/generator';
+import {CacheDatabase} from '../src/db-cache';
+import {Driver, DriverReadyState} from '../src/driver';
+import {Manifest} from '../src/manifest';
+import {sha1} from '../src/sha1';
+import {MockRequest} from '../testing/fetch';
+import {MockFileSystemBuilder, MockServerStateBuilder, tmpHashTableForFs} from '../testing/mock';
+import {SwTestHarness, SwTestHarnessBuilder} from '../testing/scope';
+
+import {async_beforeEach, async_fit, async_it} from './async';
+
+const dist =
+    new MockFileSystemBuilder()
+        .addFile('/foo.txt', 'this is foo')
+        .addFile('/bar.txt', 'this is bar')
+        .addFile('/baz.txt', 'this is baz')
+        .addFile('/qux.txt', 'this is qux')
+        .addFile('/quux.txt', 'this is quux')
+        .addFile('/quuux.txt', 'this is quuux')
+        .addFile('/lazy/unchanged1.txt', 'this is unchanged (1)')
+        .addFile('/lazy/unchanged2.txt', 'this is unchanged (2)')
+        .addUnhashedFile('/unhashed/a.txt', 'this is unhashed', {'Cache-Control': 'max-age=10'})
+        .addUnhashedFile('/unhashed/b.txt', 'this is unhashed b', {'Cache-Control': 'no-cache'})
+        .build();
+
+const distUpdate =
+    new MockFileSystemBuilder()
+        .addFile('/foo.txt', 'this is foo v2')
+        .addFile('/bar.txt', 'this is bar')
+        .addFile('/baz.txt', 'this is baz v2')
+        .addFile('/qux.txt', 'this is qux v2')
+        .addFile('/quux.txt', 'this is quux v2')
+        .addFile('/quuux.txt', 'this is quuux v2')
+        .addFile('/lazy/unchanged1.txt', 'this is unchanged (1)')
+        .addFile('/lazy/unchanged2.txt', 'this is unchanged (2)')
+        .addUnhashedFile('/unhashed/a.txt', 'this is unhashed v2', {'Cache-Control': 'max-age=10'})
+        .addUnhashedFile('/ignored/file1', 'this is not handled by the SW')
+        .addUnhashedFile('/ignored/dir/file2', 'this is not handled by the SW either')
+        .build();
+
+const brokenFs = new MockFileSystemBuilder().addFile('/foo.txt', 'this is foo').build();
+
+const brokenManifest: Manifest = {
+  configVersion: 1,
+  index: '/foo.txt',
+  assetGroups: [{
+    name: 'assets',
+    installMode: 'prefetch',
+    updateMode: 'prefetch',
+    urls: [
+      '/foo.txt',
+    ],
+    patterns: [],
+  }],
+  dataGroups: [],
+  navigationUrls: processNavigationUrls(''),
+  hashTable: tmpHashTableForFs(brokenFs, {'/foo.txt': true}),
+};
+
+const manifest: Manifest = {
+  configVersion: 1,
+  appData: {
+    version: 'original',
+  },
+  index: '/foo.txt',
+  assetGroups: [
+    {
+      name: 'assets',
+      installMode: 'prefetch',
+      updateMode: 'prefetch',
+      urls: [
+        '/foo.txt',
+        '/bar.txt',
+        '/redirected.txt',
+      ],
+      patterns: [
+        '/unhashed/.*',
+      ],
+    },
+    {
+      name: 'other',
+      installMode: 'lazy',
+      updateMode: 'lazy',
+      urls: [
+        '/baz.txt',
+        '/qux.txt',
+      ],
+      patterns: [],
+    },
+    {
+      name: 'lazy_prefetch',
+      installMode: 'lazy',
+      updateMode: 'prefetch',
+      urls: [
+        '/quux.txt',
+        '/quuux.txt',
+        '/lazy/unchanged1.txt',
+        '/lazy/unchanged2.txt',
+      ],
+      patterns: [],
+    }
+  ],
+  navigationUrls: processNavigationUrls(''),
+  hashTable: tmpHashTableForFs(dist),
+};
+
+const manifestUpdate: Manifest = {
+  configVersion: 1,
+  appData: {
+    version: 'update',
+  },
+  index: '/foo.txt',
+  assetGroups: [
+    {
+      name: 'assets',
+      installMode: 'prefetch',
+      updateMode: 'prefetch',
+      urls: [
+        '/foo.txt',
+        '/bar.txt',
+        '/redirected.txt',
+      ],
+      patterns: [
+        '/unhashed/.*',
+      ],
+    },
+    {
+      name: 'other',
+      installMode: 'lazy',
+      updateMode: 'lazy',
+      urls: [
+        '/baz.txt',
+        '/qux.txt',
+      ],
+      patterns: [],
+    },
+    {
+      name: 'lazy_prefetch',
+      installMode: 'lazy',
+      updateMode: 'prefetch',
+      urls: [
+        '/quux.txt',
+        '/quuux.txt',
+        '/lazy/unchanged1.txt',
+        '/lazy/unchanged2.txt',
+      ],
+      patterns: [],
+    }
+  ],
+  navigationUrls: processNavigationUrls(
+      '',
+      [
+        '/**/file1',
+        '/**/file2',
+        '!/ignored/file1',
+        '!/ignored/dir/**',
+      ]),
+  hashTable: tmpHashTableForFs(distUpdate),
+};
+
+const server = new MockServerStateBuilder()
+                   .withStaticFiles(dist)
+                   .withManifest(manifest)
+                   .withRedirect('/redirected.txt', '/redirect-target.txt', 'this was a redirect')
+                   .withError('/error.txt')
+                   .build();
+
+const serverUpdate =
+    new MockServerStateBuilder()
+        .withStaticFiles(distUpdate)
+        .withManifest(manifestUpdate)
+        .withRedirect('/redirected.txt', '/redirect-target.txt', 'this was a redirect')
+        .build();
+
+const brokenServer =
+    new MockServerStateBuilder().withStaticFiles(brokenFs).withManifest(brokenManifest).build();
+
+const server404 = new MockServerStateBuilder().withStaticFiles(dist).build();
+
+const scope = new SwTestHarnessBuilder().withServerState(server).build();
+
+const manifestHash = sha1(JSON.stringify(manifest));
+const manifestUpdateHash = sha1(JSON.stringify(manifestUpdate));
+
+(function() {
+  // Skip environments that don't support the minimum APIs needed to run the SW tests.
+  if (!SwTestHarness.envIsSupported()) {
+    return;
+  }
+  describe('Driver', () => {
+    let scope: SwTestHarness;
+    let driver: Driver;
+
+    beforeEach(() => {
+      server.reset();
+      serverUpdate.reset();
+      server404.reset();
+      brokenServer.reset();
+
+      scope = new SwTestHarnessBuilder().withServerState(server).build();
+      driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+    });
+
+    async_it('initializes prefetched content correctly, after activation', async() => {
+      expect(await scope.startup(true)).toEqual(true);
+      await scope.resolveSelfMessages();
+      await driver.initialized;
+      server.assertSawRequestFor('ngsw.json');
+      server.assertSawRequestFor('/foo.txt');
+      server.assertSawRequestFor('/bar.txt');
+      server.assertSawRequestFor('/redirected.txt');
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      expect(await makeRequest(scope, '/bar.txt')).toEqual('this is bar');
+      server.assertNoOtherRequests();
+    });
+
+    async_it('initializes prefetched content correctly, after a request kicks it off', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      server.assertSawRequestFor('ngsw.json');
+      server.assertSawRequestFor('/foo.txt');
+      server.assertSawRequestFor('/bar.txt');
+      server.assertSawRequestFor('/redirected.txt');
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      expect(await makeRequest(scope, '/bar.txt')).toEqual('this is bar');
+      server.assertNoOtherRequests();
+    });
+
+    async_it('handles non-relative URLs', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      server.clearRequests();
+      expect(await makeRequest(scope, 'http://localhost/foo.txt')).toEqual('this is foo');
+      server.assertNoOtherRequests();
+    });
+
+    async_it('handles actual errors from the browser', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      server.clearRequests();
+
+      const [resPromise, done] = scope.handleFetch(new MockRequest('/error.txt'), 'default');
+      await done;
+      const res = (await resPromise) !;
+      expect(res.status).toEqual(504);
+      expect(res.statusText).toEqual('Gateway Timeout');
+    });
+
+    async_it('handles redirected responses', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      server.clearRequests();
+      expect(await makeRequest(scope, '/redirected.txt')).toEqual('this was a redirect');
+      server.assertNoOtherRequests();
+    });
+
+    async_it('caches lazy content on-request', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      server.clearRequests();
+      expect(await makeRequest(scope, '/baz.txt')).toEqual('this is baz');
+      server.assertSawRequestFor('/baz.txt');
+      server.assertNoOtherRequests();
+      expect(await makeRequest(scope, '/baz.txt')).toEqual('this is baz');
+      server.assertNoOtherRequests();
+      expect(await makeRequest(scope, '/qux.txt')).toEqual('this is qux');
+      server.assertSawRequestFor('/qux.txt');
+      server.assertNoOtherRequests();
+    });
+
+    async_it('updates to new content when requested', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+
+      const client = scope.clients.getMock('default') !;
+      expect(client.messages).toEqual([]);
+
+      scope.updateServerState(serverUpdate);
+      expect(await driver.checkForUpdate()).toEqual(true);
+      serverUpdate.assertSawRequestFor('ngsw.json');
+      serverUpdate.assertSawRequestFor('/foo.txt');
+      serverUpdate.assertSawRequestFor('/redirected.txt');
+      serverUpdate.assertNoOtherRequests();
+
+      expect(client.messages).toEqual([{
+        type: 'UPDATE_AVAILABLE',
+        current: {hash: manifestHash, appData: {version: 'original'}},
+        available: {hash: manifestUpdateHash, appData: {version: 'update'}},
+      }]);
+
+      // Default client is still on the old version of the app.
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+
+      // Sending a new client id should result in the updated version being returned.
+      expect(await makeRequest(scope, '/foo.txt', 'new')).toEqual('this is foo v2');
+
+      // Of course, the old version should still work.
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+
+      expect(await makeRequest(scope, '/bar.txt')).toEqual('this is bar');
+      serverUpdate.assertNoOtherRequests();
+    });
+
+    async_it('updates a specific client to new content on request', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+
+      const client = scope.clients.getMock('default') !;
+      expect(client.messages).toEqual([]);
+
+      scope.updateServerState(serverUpdate);
+      expect(await driver.checkForUpdate()).toEqual(true);
+      serverUpdate.clearRequests();
+      await driver.updateClient(client as any as Client);
+
+      expect(client.messages).toEqual([
+        {
+          type: 'UPDATE_AVAILABLE',
+          current: {hash: manifestHash, appData: {version: 'original'}},
+          available: {hash: manifestUpdateHash, appData: {version: 'update'}},
+        },
+        {
+          type: 'UPDATE_ACTIVATED',
+          previous: {hash: manifestHash, appData: {version: 'original'}},
+          current: {hash: manifestUpdateHash, appData: {version: 'update'}},
+        }
+      ]);
+
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo v2');
+    });
+
+    async_it('handles empty client ID', async() => {
+      const navRequest = (url: string, clientId: string | null) =>
+          makeRequest(scope, url, clientId, {
+            headers: {Accept: 'text/plain, text/html, text/css'},
+            mode: 'navigate',
+          });
+
+      // Initialize the SW.
+      expect(await navRequest('/foo/file1', '')).toEqual('this is foo');
+      expect(await navRequest('/bar/file2', null)).toEqual('this is foo');
+      await driver.initialized;
+
+      // Update to a new version.
+      scope.updateServerState(serverUpdate);
+      expect(await driver.checkForUpdate()).toEqual(true);
+
+      // Correctly handle navigation requests, even if `clientId` is null/empty.
+      expect(await navRequest('/foo/file1', '')).toEqual('this is foo v2');
+      expect(await navRequest('/bar/file2', null)).toEqual('this is foo v2');
+    });
+
+    async_it('checks for updates on restart', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+
+      scope = new SwTestHarnessBuilder()
+                  .withCacheState(scope.caches.dehydrate())
+                  .withServerState(serverUpdate)
+                  .build();
+      driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      serverUpdate.assertNoOtherRequests();
+
+      scope.advance(12000);
+      await driver.idle.empty;
+
+      serverUpdate.assertSawRequestFor('ngsw.json');
+      serverUpdate.assertSawRequestFor('/foo.txt');
+      serverUpdate.assertSawRequestFor('/redirected.txt');
+      serverUpdate.assertNoOtherRequests();
+    });
+
+    async_it('checks for updates on navigation', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      server.clearRequests();
+
+      expect(await makeRequest(scope, '/foo.txt', 'default', {
+        mode: 'navigate',
+      })).toEqual('this is foo');
+
+      scope.advance(12000);
+      await driver.idle.empty;
+
+      server.assertSawRequestFor('ngsw.json');
+    });
+
+    async_it('does not make concurrent checks for updates on navigation', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      server.clearRequests();
+
+      expect(await makeRequest(scope, '/foo.txt', 'default', {
+        mode: 'navigate',
+      })).toEqual('this is foo');
+
+      expect(await makeRequest(scope, '/foo.txt', 'default', {
+        mode: 'navigate',
+      })).toEqual('this is foo');
+
+      scope.advance(12000);
+      await driver.idle.empty;
+
+      server.assertSawRequestFor('ngsw.json');
+      server.assertNoOtherRequests();
+    });
+
+    async_it('preserves multiple client assignments across restarts', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+
+      scope.updateServerState(serverUpdate);
+      expect(await driver.checkForUpdate()).toEqual(true);
+      expect(await makeRequest(scope, '/foo.txt', 'new')).toEqual('this is foo v2');
+      serverUpdate.clearRequests();
+
+      scope = new SwTestHarnessBuilder()
+                  .withCacheState(scope.caches.dehydrate())
+                  .withServerState(serverUpdate)
+                  .build();
+      driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      expect(await makeRequest(scope, '/foo.txt', 'new')).toEqual('this is foo v2');
+      serverUpdate.assertNoOtherRequests();
+    });
+
+    async_it('updates when refreshed', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+
+      const client = scope.clients.getMock('default') !;
+
+      scope.updateServerState(serverUpdate);
+      expect(await driver.checkForUpdate()).toEqual(true);
+      serverUpdate.clearRequests();
+
+      expect(await makeRequest(scope, '/file1', 'default', {
+        headers: {
+          'Accept': 'text/plain, text/html, text/css',
+        },
+        mode: 'navigate',
+      })).toEqual('this is foo v2');
+
+      expect(client.messages).toEqual([
+        {
+          type: 'UPDATE_AVAILABLE',
+          current: {hash: manifestHash, appData: {version: 'original'}},
+          available: {hash: manifestUpdateHash, appData: {version: 'update'}},
+        },
+        {
+          type: 'UPDATE_ACTIVATED',
+          previous: {hash: manifestHash, appData: {version: 'original'}},
+          current: {hash: manifestUpdateHash, appData: {version: 'update'}},
+        }
+      ]);
+      serverUpdate.assertNoOtherRequests();
+    });
+
+    async_it('cleans up properly when manually requested', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+
+      scope.updateServerState(serverUpdate);
+      expect(await driver.checkForUpdate()).toEqual(true);
+      serverUpdate.clearRequests();
+
+      expect(await makeRequest(scope, '/foo.txt', 'new')).toEqual('this is foo v2');
+
+      // Delete the default client.
+      scope.clients.remove('default');
+
+      // After this, the old version should no longer be cached.
+      await driver.cleanupCaches();
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo v2');
+
+      serverUpdate.assertNoOtherRequests();
+    });
+
+    async_it('cleans up properly on restart', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+
+      scope = new SwTestHarnessBuilder()
+                  .withCacheState(scope.caches.dehydrate())
+                  .withServerState(serverUpdate)
+                  .build();
+      driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      serverUpdate.assertNoOtherRequests();
+
+      let keys = await scope.caches.keys();
+      let hasOriginalCaches = keys.some(name => name.startsWith(`ngsw:${manifestHash}:`));
+      expect(hasOriginalCaches).toEqual(true);
+
+      scope.clients.remove('default');
+
+      scope.advance(12000);
+      await driver.idle.empty;
+      serverUpdate.clearRequests();
+
+      driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo v2');
+
+      keys = await scope.caches.keys();
+      hasOriginalCaches = keys.some(name => name.startsWith(`ngsw:${manifestHash}:`));
+      expect(hasOriginalCaches).toEqual(false);
+    });
+
+    async_it('shows notifications for push notifications', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      await scope.handlePush({
+        notification: {
+          title: 'This is a test',
+          body: 'Test body',
+        }
+      });
+      expect(scope.notifications).toEqual([{
+        title: 'This is a test',
+        options: {body: 'Test body'},
+      }]);
+      expect(scope.clients.getMock('default') !.messages).toEqual([{
+        type: 'PUSH',
+        data: {
+          notification: {
+            title: 'This is a test',
+            body: 'Test body',
+          },
+        },
+      }]);
+    });
+
+    async_it('prefetches updates to lazy cache when set', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+
+      // Fetch some files from the `lazy_prefetch` asset group.
+      expect(await makeRequest(scope, '/quux.txt')).toEqual('this is quux');
+      expect(await makeRequest(scope, '/lazy/unchanged1.txt')).toEqual('this is unchanged (1)');
+
+      // Install update.
+      scope.updateServerState(serverUpdate);
+      expect(await driver.checkForUpdate()).toBe(true);
+
+      // Previously requested and changed: Fetch from network.
+      serverUpdate.assertSawRequestFor('/quux.txt');
+      // Never requested and changed: Don't fetch.
+      serverUpdate.assertNoRequestFor('/quuux.txt');
+      // Previously requested and unchanged: Fetch from cache.
+      serverUpdate.assertNoRequestFor('/lazy/unchanged1.txt');
+      // Never requested and unchanged: Don't fetch.
+      serverUpdate.assertNoRequestFor('/lazy/unchanged2.txt');
+
+      serverUpdate.clearRequests();
+
+      // Update client.
+      await driver.updateClient(await scope.clients.get('default'));
+
+      // Already cached.
+      expect(await makeRequest(scope, '/quux.txt')).toBe('this is quux v2');
+      serverUpdate.assertNoOtherRequests();
+
+      // Not cached: Fetch from network.
+      expect(await makeRequest(scope, '/quuux.txt')).toBe('this is quuux v2');
+      serverUpdate.assertSawRequestFor('/quuux.txt');
+
+      // Already cached (copied from old cache).
+      expect(await makeRequest(scope, '/lazy/unchanged1.txt')).toBe('this is unchanged (1)');
+      serverUpdate.assertNoOtherRequests();
+
+      // Not cached: Fetch from network.
+      expect(await makeRequest(scope, '/lazy/unchanged2.txt')).toBe('this is unchanged (2)');
+      serverUpdate.assertSawRequestFor('/lazy/unchanged2.txt');
+
+      serverUpdate.assertNoOtherRequests();
+    });
+
+    async_it('unregisters when manifest 404s', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+
+      scope.updateServerState(server404);
+      expect(await driver.checkForUpdate()).toEqual(false);
+      expect(scope.unregistered).toEqual(true);
+      expect(await scope.caches.keys()).toEqual([]);
+    });
+
+    async_it('does not unregister or change state when offline (i.e. manifest 504s)', async() => {
+      expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      await driver.initialized;
+      server.online = false;
+
+      expect(await driver.checkForUpdate()).toEqual(false);
+      expect(driver.state).toEqual(DriverReadyState.NORMAL);
+      expect(scope.unregistered).toBeFalsy();
+      expect(await scope.caches.keys()).not.toEqual([]);
+    });
+
+    describe('unhashed requests', () => {
+      async_beforeEach(async() => {
+        expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+        await driver.initialized;
+        server.clearRequests();
+      });
+
+      async_it('are cached appropriately', async() => {
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed');
+        server.assertSawRequestFor('/unhashed/a.txt');
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed');
+        server.assertNoOtherRequests();
+      });
+
+      async_it(`doesn't error when 'Cache-Control' is 'no-cache'`, async() => {
+        expect(await makeRequest(scope, '/unhashed/b.txt')).toEqual('this is unhashed b');
+        server.assertSawRequestFor('/unhashed/b.txt');
+        expect(await makeRequest(scope, '/unhashed/b.txt')).toEqual('this is unhashed b');
+        server.assertNoOtherRequests();
+      });
+
+      async_it('avoid opaque responses', async() => {
+        expect(await makeRequest(scope, '/unhashed/a.txt', 'default', {
+          credentials: 'include'
+        })).toEqual('this is unhashed');
+        server.assertSawRequestFor('/unhashed/a.txt');
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed');
+        server.assertNoOtherRequests();
+      });
+
+      async_it('expire according to Cache-Control headers', async() => {
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed');
+        server.clearRequests();
+
+        // Update the resource on the server.
+        scope.updateServerState(serverUpdate);
+
+        // Move ahead by 15 seconds.
+        scope.advance(15000);
+
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed');
+        serverUpdate.assertNoOtherRequests();
+
+        // Another 6 seconds.
+        scope.advance(6000);
+        await driver.idle.empty;
+        serverUpdate.assertSawRequestFor('/unhashed/a.txt');
+
+        // Now the new version of the resource should be served.
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed v2');
+        server.assertNoOtherRequests();
+      });
+
+      async_it('survive serialization', async() => {
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed');
+        server.clearRequests();
+
+        const state = scope.caches.dehydrate();
+        scope = new SwTestHarnessBuilder().withCacheState(state).withServerState(server).build();
+        driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+        expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+        await driver.initialized;
+        server.assertNoRequestFor('/unhashed/a.txt');
+        server.clearRequests();
+
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed');
+        server.assertNoOtherRequests();
+
+        // Advance the clock by 6 seconds, triggering the idle tasks. If an idle task
+        // was scheduled from the request above, it means that the metadata was not
+        // properly saved.
+        scope.advance(6000);
+        await driver.idle.empty;
+        server.assertNoRequestFor('/unhashed/a.txt');
+      });
+
+      async_it('get carried over during updates', async() => {
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed');
+        server.clearRequests();
+
+        scope = new SwTestHarnessBuilder()
+                    .withCacheState(scope.caches.dehydrate())
+                    .withServerState(serverUpdate)
+                    .build();
+        driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+        expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+        await driver.initialized;
+
+        scope.advance(15000);
+        await driver.idle.empty;
+        serverUpdate.assertNoRequestFor('/unhashed/a.txt');
+        serverUpdate.clearRequests();
+
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed');
+        serverUpdate.assertNoOtherRequests();
+
+        scope.advance(15000);
+        await driver.idle.empty;
+        serverUpdate.assertSawRequestFor('/unhashed/a.txt');
+
+        expect(await makeRequest(scope, '/unhashed/a.txt')).toEqual('this is unhashed v2');
+        serverUpdate.assertNoOtherRequests();
+      });
+    });
+
+    describe('routing', () => {
+      const navRequest = (url: string, init = {}) => makeRequest(scope, url, undefined, {
+        headers: {Accept: 'text/plain, text/html, text/css'},
+        mode: 'navigate', ...init,
+      });
+
+      async_beforeEach(async() => {
+        expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+        await driver.initialized;
+        server.clearRequests();
+      });
+
+      async_it('redirects to index on a route-like request', async() => {
+        expect(await navRequest('/baz')).toEqual('this is foo');
+        server.assertNoOtherRequests();
+      });
+
+      async_it('redirects to index on a request to the origin URL request', async() => {
+        expect(await navRequest('http://localhost/')).toEqual('this is foo');
+        server.assertNoOtherRequests();
+      });
+
+      async_it('does not redirect to index on a non-navigation request', async() => {
+        expect(await navRequest('/baz', {mode: undefined})).toBeNull();
+        server.assertSawRequestFor('/baz');
+      });
+
+      async_it('does not redirect to index on a request that does not accept HTML', async() => {
+        expect(await navRequest('/baz', {headers: {}})).toBeNull();
+        server.assertSawRequestFor('/baz');
+
+        expect(await navRequest('/qux', {headers: {'Accept': 'text/plain'}})).toBeNull();
+        server.assertSawRequestFor('/qux');
+      });
+
+      async_it('does not redirect to index on a request with an extension', async() => {
+        expect(await navRequest('/baz.html')).toBeNull();
+        server.assertSawRequestFor('/baz.html');
+
+        // Only considers the last path segment when checking for a file extension.
+        expect(await navRequest('/baz.html/qux')).toBe('this is foo');
+        server.assertNoOtherRequests();
+      });
+
+      async_it('does not redirect to index if the URL contains `__`', async() => {
+        expect(await navRequest('/baz/x__x')).toBeNull();
+        server.assertSawRequestFor('/baz/x__x');
+
+        expect(await navRequest('/baz/x__x/qux')).toBeNull();
+        server.assertSawRequestFor('/baz/x__x/qux');
+
+        expect(await navRequest('/baz/__')).toBeNull();
+        server.assertSawRequestFor('/baz/__');
+
+        expect(await navRequest('/baz/__/qux')).toBeNull();
+        server.assertSawRequestFor('/baz/__/qux');
+      });
+
+      describe('(with custom `navigationUrls`)', () => {
+        async_beforeEach(async() => {
+          scope.updateServerState(serverUpdate);
+          await driver.checkForUpdate();
+          serverUpdate.clearRequests();
+        });
+
+        async_it('redirects to index on a request that matches any positive pattern', async() => {
+          expect(await navRequest('/foo/file0')).toBeNull();
+          serverUpdate.assertSawRequestFor('/foo/file0');
+
+          expect(await navRequest('/foo/file1')).toBe('this is foo v2');
+          serverUpdate.assertNoOtherRequests();
+
+          expect(await navRequest('/bar/file2')).toBe('this is foo v2');
+          serverUpdate.assertNoOtherRequests();
+        });
+
+        async_it(
+            'does not redirect to index on a request that matches any negative pattern',
+            async() => {
+              expect(await navRequest('/ignored/file1')).toBe('this is not handled by the SW');
+              serverUpdate.assertSawRequestFor('/ignored/file1');
+
+              expect(await navRequest('/ignored/dir/file2'))
+                  .toBe('this is not handled by the SW either');
+              serverUpdate.assertSawRequestFor('/ignored/dir/file2');
+
+              expect(await navRequest('/ignored/directory/file2')).toBe('this is foo v2');
+              serverUpdate.assertNoOtherRequests();
+            });
+
+        async_it('strips URL query before checking `navigationUrls`', async() => {
+          expect(await navRequest('/foo/file1?query=/a/b')).toBe('this is foo v2');
+          serverUpdate.assertNoOtherRequests();
+
+          expect(await navRequest('/ignored/file1?query=/a/b'))
+              .toBe('this is not handled by the SW');
+          serverUpdate.assertSawRequestFor('/ignored/file1');
+
+          expect(await navRequest('/ignored/dir/file2?query=/a/b'))
+              .toBe('this is not handled by the SW either');
+          serverUpdate.assertSawRequestFor('/ignored/dir/file2');
+        });
+
+        async_it('strips registration scope before checking `navigationUrls`', async() => {
+          expect(await navRequest('http://localhost/ignored/file1'))
+              .toBe('this is not handled by the SW');
+          serverUpdate.assertSawRequestFor('/ignored/file1');
+        });
+      });
+    });
+
+    describe('bugs', () => {
+      async_it('does not crash with bad index hash', async() => {
+        scope = new SwTestHarnessBuilder().withServerState(brokenServer).build();
+        (scope.registration as any).scope = 'http://site.com';
+        driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+
+        expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+      });
+
+      async_it('enters degraded mode when update has a bad index', async() => {
+        expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');
+        await driver.initialized;
+        server.clearRequests();
+
+        scope = new SwTestHarnessBuilder()
+                    .withCacheState(scope.caches.dehydrate())
+                    .withServerState(brokenServer)
+                    .build();
+        driver = new Driver(scope, scope, new CacheDatabase(scope, scope));
+        await driver.checkForUpdate();
+
+        scope.advance(12000);
+        await driver.idle.empty;
+
+        expect(driver.state).toEqual(DriverReadyState.EXISTING_CLIENTS_ONLY);
+      });
+
+      async_it('ignores invalid `only-if-cached` requests ', async() => {
+        const requestFoo = (cache: RequestCache | 'only-if-cached', mode: RequestMode) =>
+            makeRequest(scope, '/foo.txt', undefined, {cache, mode});
+
+        expect(await requestFoo('default', 'no-cors')).toBe('this is foo');
+        expect(await requestFoo('only-if-cached', 'same-origin')).toBe('this is foo');
+        expect(await requestFoo('only-if-cached', 'no-cors')).toBeNull();
+      });
+    });
+  });
+})();
+
+async function makeRequest(
+    scope: SwTestHarness, url: string, clientId: string | null = 'default',
+    init?: Object): Promise<string|null> {
+  const [resPromise, done] = scope.handleFetch(new MockRequest(url, init), clientId);
+  await done;
+  const res = await resPromise;
+  if (res !== undefined && res.ok) {
+    return res.text();
+  }
+  return null;
+}
diff --git a/packages/service-worker/worker/test/idle_spec.ts b/packages/service-worker/worker/test/idle_spec.ts
new file mode 100644
index 000000000000..c7cd1da1d6c9
--- /dev/null
+++ b/packages/service-worker/worker/test/idle_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 {IdleScheduler} from '../src/idle';
+import {SwTestHarness, SwTestHarnessBuilder} from '../testing/scope';
+import {async_beforeEach, async_fit, async_it} from './async';
+
+(function() {
+  // Skip environments that don't support the minimum APIs needed to run the SW tests.
+  if (!SwTestHarness.envIsSupported()) {
+    return;
+  }
+  describe('IdleScheduler', () => {
+    let scope: SwTestHarness;
+    let idle: IdleScheduler;
+
+    beforeEach(() => {
+      scope = new SwTestHarnessBuilder().build();
+      idle = new IdleScheduler(scope, 1000, {
+        log: (v, context) => console.error(v, context),
+      });
+    });
+
+    // Validate that a single idle task executes when trigger()
+    // is called and the idle timeout passes.
+    async_it('executes scheduled work on time', async() => {
+      // Set up a single idle task to set the completed flag to true when it runs.
+      let completed: boolean = false;
+      idle.schedule('work', async() => { completed = true; });
+
+      // Simply scheduling the task should not cause it to execute.
+      expect(completed).toEqual(false);
+
+      // Trigger the idle mechanism. This returns a Promise that should resolve
+      // once the idle timeout has passed.
+      const trigger = idle.trigger();
+
+      // Advance the clock beyond the idle timeout, causing the idle tasks to run.
+      scope.advance(1100);
+
+      // It should now be possible to wait for the trigger, and for the idle queue
+      // to be empty.
+      await trigger;
+      await idle.empty;
+
+      // The task should now have run.
+      expect(completed).toEqual(true);
+    });
+
+    async_it('waits for multiple tasks to complete serially', async() => {
+      // Schedule several tasks that will increase a counter according to its
+      // current value. If these tasks execute in parallel, the writes to the counter
+      // will race, and the test will fail.
+      let counter: number = 2;
+      idle.schedule('double counter', async() => {
+        let local = counter;
+        await Promise.resolve();
+        local *= 2;
+        await Promise.resolve();
+        counter = local * 2;
+      });
+      idle.schedule('triple counter', async() => {
+        // If this expect fails, it comes out of the 'await trigger' below.
+        expect(counter).toEqual(8);
+
+        // Multiply the counter by 3 twice.
+        let local = counter;
+        await Promise.resolve();
+        local *= 3;
+        await Promise.resolve();
+        counter = local * 3;
+      });
+
+      // Trigger the idle mechanism once.
+      const trigger = idle.trigger();
+
+      // Advance the clock beyond the idle timeout, causing the idle tasks to run, and
+      // wait for them to complete.
+      scope.advance(1100);
+      await trigger;
+      await idle.empty;
+
+      // Assert that both tasks executed in the correct serial sequence by validating
+      // that the counter reached the correct value.
+      expect(counter).toEqual(2 * 2 * 2 * 3 * 3);
+    });
+
+    // Validate that a single idle task does not execute until trigger() has been called
+    // and sufficient time passes without it being called again.
+    async_it('does not execute work until timeout passes with no triggers', async() => {
+      // Set up a single idle task to set the completed flag to true when it runs.
+      let completed: boolean = false;
+      idle.schedule('work', async() => { completed = true; });
+
+      // Trigger the queue once. This trigger will start a timer for the idle timeout,
+      // but another trigger() will be called before that timeout passes.
+      const firstTrigger = idle.trigger();
+
+      // Advance the clock a little, but not enough to actually cause tasks to execute.
+      scope.advance(500);
+
+      // Assert that the task has not yet run.
+      expect(completed).toEqual(false);
+
+      // Next, trigger the queue again.
+      const secondTrigger = idle.trigger();
+
+      // Advance the clock beyond the timeout for the first trigger, but not the second.
+      // This should cause the first trigger to resolve, but without running the task.
+      scope.advance(600);
+      await firstTrigger;
+      expect(completed).toEqual(false);
+
+      // Schedule a third trigger. This is the one that will eventually resolve the task.
+      const thirdTrigger = idle.trigger();
+
+      // Again, advance beyond the second trigger and verify it didn't resolve the task.
+      scope.advance(500);
+      await secondTrigger;
+      expect(completed).toEqual(false);
+
+      // Finally, advance beyond the third trigger, which should cause the task to be
+      // executed finally.
+      scope.advance(600);
+      await thirdTrigger;
+      await idle.empty;
+
+      // The task should have executed.
+      expect(completed).toEqual(true);
+    });
+  });
+})();
\ No newline at end of file
diff --git a/packages/service-worker/worker/test/prefetch_spec.ts b/packages/service-worker/worker/test/prefetch_spec.ts
new file mode 100644
index 000000000000..d77cccee10ab
--- /dev/null
+++ b/packages/service-worker/worker/test/prefetch_spec.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 {PrefetchAssetGroup} from '../src/assets';
+import {CacheDatabase} from '../src/db-cache';
+import {IdleScheduler} from '../src/idle';
+import {MockFileSystemBuilder, MockServerStateBuilder, tmpHashTable, tmpManifestSingleAssetGroup} from '../testing/mock';
+import {SwTestHarness, SwTestHarnessBuilder} from '../testing/scope';
+
+import {async_fit, async_it} from './async';
+
+const dist = new MockFileSystemBuilder()
+                 .addFile('/foo.txt', 'this is foo')
+                 .addFile('/bar.txt', 'this is bar')
+                 .build();
+
+const manifest = tmpManifestSingleAssetGroup(dist);
+
+const server = new MockServerStateBuilder().withStaticFiles(dist).withManifest(manifest).build();
+
+const scope = new SwTestHarnessBuilder().withServerState(server).build();
+
+const db = new CacheDatabase(scope, scope);
+
+
+
+(function() {
+  // Skip environments that don't support the minimum APIs needed to run the SW tests.
+  if (!SwTestHarness.envIsSupported()) {
+    return;
+  }
+  describe('prefetch assets', () => {
+    let group: PrefetchAssetGroup;
+    let idle: IdleScheduler;
+    beforeEach(() => {
+      idle = new IdleScheduler(null !, 3000, {
+        log: (v, ctx = '') => console.error(v, ctx),
+      });
+      group = new PrefetchAssetGroup(
+          scope, scope, idle, manifest.assetGroups ![0], tmpHashTable(manifest), db, 'test');
+    });
+    async_it('initializes without crashing', async() => { await group.initializeFully(); });
+    async_it('fully caches the two files', async() => {
+      await group.initializeFully();
+      scope.updateServerState();
+      const res1 = await group.handleFetch(scope.newRequest('/foo.txt'), scope);
+      const res2 = await group.handleFetch(scope.newRequest('/bar.txt'), scope);
+      expect(await res1 !.text()).toEqual('this is foo');
+      expect(await res2 !.text()).toEqual('this is bar');
+    });
+    async_it('persists the cache across restarts', async() => {
+      await group.initializeFully();
+      const freshScope =
+          new SwTestHarnessBuilder().withCacheState(scope.caches.dehydrate()).build();
+      group = new PrefetchAssetGroup(
+          freshScope, freshScope, idle, manifest.assetGroups ![0], tmpHashTable(manifest),
+          new CacheDatabase(freshScope, freshScope), 'test');
+      await group.initializeFully();
+      const res1 = await group.handleFetch(scope.newRequest('/foo.txt'), scope);
+      const res2 = await group.handleFetch(scope.newRequest('/bar.txt'), scope);
+      expect(await res1 !.text()).toEqual('this is foo');
+      expect(await res2 !.text()).toEqual('this is bar');
+    });
+    async_it('caches properly if resources are requested before initialization', async() => {
+      const res1 = await group.handleFetch(scope.newRequest('/foo.txt'), scope);
+      const res2 = await group.handleFetch(scope.newRequest('/bar.txt'), scope);
+      expect(await res1 !.text()).toEqual('this is foo');
+      expect(await res2 !.text()).toEqual('this is bar');
+      scope.updateServerState();
+      await group.initializeFully();
+    });
+    async_it('throws if the server-side content does not match the manifest hash', async() => {
+      const badHashFs = dist.extend().addFile('/foo.txt', 'corrupted file').build();
+      const badServer =
+          new MockServerStateBuilder().withManifest(manifest).withStaticFiles(badHashFs).build();
+      const badScope = new SwTestHarnessBuilder().withServerState(badServer).build();
+      group = new PrefetchAssetGroup(
+          badScope, badScope, idle, manifest.assetGroups ![0], tmpHashTable(manifest),
+          new CacheDatabase(badScope, badScope), 'test');
+      const err = await errorFrom(group.initializeFully());
+      expect(err.message).toContain('Hash mismatch');
+    });
+  });
+})();
+
+function errorFrom(promise: Promise<any>): Promise<any> {
+  return promise.catch(err => err);
+}
diff --git a/packages/service-worker/worker/testing/BUILD.bazel b/packages/service-worker/worker/testing/BUILD.bazel
new file mode 100644
index 000000000000..3dfaa4431050
--- /dev/null
+++ b/packages/service-worker/worker/testing/BUILD.bazel
@@ -0,0 +1,15 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "testing",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/core",
+        "//packages/service-worker/worker",
+        "@rxjs",
+    ],
+)
diff --git a/packages/service-worker/worker/testing/cache.ts b/packages/service-worker/worker/testing/cache.ts
new file mode 100644
index 000000000000..b24147e2f64e
--- /dev/null
+++ b/packages/service-worker/worker/testing/cache.ts
@@ -0,0 +1,166 @@
+/**
+ * @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 {MockRequest, MockResponse} from './fetch';
+
+export interface DehydratedResponse {
+  body: string|null;
+  status: number;
+  statusText: string;
+  headers: {[name: string]: string};
+}
+
+export type DehydratedCache = {
+  [url: string]: DehydratedResponse
+};
+export type DehydratedCacheStorage = {
+  [name: string]: DehydratedCache
+};
+
+export class MockCacheStorage implements CacheStorage {
+  private caches = new Map<string, MockCache>();
+
+  constructor(private origin: string, hydrateFrom?: string) {
+    if (hydrateFrom !== undefined) {
+      const hydrated = JSON.parse(hydrateFrom) as DehydratedCacheStorage;
+      Object.keys(hydrated).forEach(
+          name => { this.caches.set(name, new MockCache(this.origin, hydrated[name])); });
+    }
+  }
+
+  async has(name: string): Promise<boolean> { return this.caches.has(name); }
+
+  async keys(): Promise<string[]> { return Array.from(this.caches.keys()); }
+
+  async open(name: string): Promise<Cache> {
+    if (!this.caches.has(name)) {
+      this.caches.set(name, new MockCache(this.origin));
+    }
+    return this.caches.get(name) as any;
+  }
+
+  async match(req: Request): Promise<Response|undefined> {
+    return await Array.from(this.caches.values())
+        .reduce<Promise<Response|undefined>>(async(answer, cache): Promise<Response|undefined> => {
+          const curr = await answer;
+          if (curr !== undefined) {
+            return curr;
+          }
+
+          return cache.match(req);
+        }, Promise.resolve<Response|undefined>(undefined));
+  }
+
+  async 'delete'(name: string): Promise<boolean> {
+    if (this.caches.has(name)) {
+      this.caches.delete(name);
+      return true;
+    }
+    return false;
+  }
+
+  dehydrate(): string {
+    const dehydrated: DehydratedCacheStorage = {};
+    Array.from(this.caches.keys()).forEach(name => {
+      const cache = this.caches.get(name) !;
+      dehydrated[name] = cache.dehydrate();
+    });
+    return JSON.stringify(dehydrated);
+  }
+}
+
+export class MockCache {
+  private cache = new Map<string, Response>();
+
+  constructor(private origin: string, hydrated?: DehydratedCache) {
+    if (hydrated !== undefined) {
+      Object.keys(hydrated).forEach(url => {
+        const resp = hydrated[url];
+        this.cache.set(
+            url, new MockResponse(
+                     resp.body,
+                     {status: resp.status, statusText: resp.statusText, headers: resp.headers}));
+      });
+    }
+  }
+
+  async add(request: RequestInfo): Promise<void> { throw 'Not implemented'; }
+
+  async addAll(requests: RequestInfo[]): Promise<void> { throw 'Not implemented'; }
+
+  async 'delete'(request: RequestInfo): Promise<boolean> {
+    const url = (typeof request === 'string' ? request : request.url);
+    if (this.cache.has(url)) {
+      this.cache.delete(url);
+      return true;
+    }
+    return false;
+  }
+
+  async keys(match?: Request|string): Promise<string[]> {
+    if (match !== undefined) {
+      throw 'Not implemented';
+    }
+    return Array.from(this.cache.keys());
+  }
+
+  async match(request: RequestInfo, options?: CacheQueryOptions): Promise<Response> {
+    let url = (typeof request === 'string' ? request : request.url);
+    if (url.startsWith(this.origin)) {
+      url = '/' + url.substr(this.origin.length);
+    }
+    // TODO: cleanup typings. Typescript doesn't know this can resolve to undefined.
+    let res = this.cache.get(url);
+    if (res !== undefined) {
+      res = res.clone();
+    }
+    return res !;
+  }
+
+  async matchAll(request?: Request|string, options?: CacheQueryOptions): Promise<Response[]> {
+    if (request === undefined) {
+      return Array.from(this.cache.values());
+    }
+    const url = (typeof request === 'string' ? request : request.url);
+    if (this.cache.has(url)) {
+      return [this.cache.get(url) !];
+    } else {
+      return [];
+    }
+  }
+
+  async put(request: RequestInfo, response: Response): Promise<void> {
+    const url = (typeof request === 'string' ? request : request.url);
+    this.cache.set(url, response.clone());
+
+    // Even though the body above is cloned, consume it here because the
+    // real cache consumes the body.
+    await response.text();
+
+    return;
+  }
+
+  dehydrate(): DehydratedCache {
+    const dehydrated: DehydratedCache = {};
+    Array.from(this.cache.keys()).forEach(url => {
+      const resp = this.cache.get(url) as MockResponse;
+      const dehydratedResp = {
+        body: resp._body,
+        status: resp.status,
+        statusText: resp.statusText,
+        headers: {},
+      } as DehydratedResponse;
+
+      resp.headers.forEach(
+          (value: string, name: string) => { dehydratedResp.headers[name] = value; });
+
+      dehydrated[url] = dehydratedResp;
+    });
+    return dehydrated;
+  }
+}
diff --git a/packages/service-worker/worker/testing/fetch.ts b/packages/service-worker/worker/testing/fetch.ts
new file mode 100644
index 000000000000..5c4dde1196c6
--- /dev/null
+++ b/packages/service-worker/worker/testing/fetch.ts
@@ -0,0 +1,176 @@
+/**
+ * @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 MockBody implements Body {
+  bodyUsed: boolean = false;
+
+  constructor(public _body: string|null) {}
+
+  async arrayBuffer(): Promise<ArrayBuffer> {
+    this.markBodyUsed();
+    if (this._body !== null) {
+      const buffer = new ArrayBuffer(this._body.length);
+      const access = new Uint8Array(buffer);
+      for (let i = 0; i < this._body.length; i++) {
+        access[i] = this._body.charCodeAt(i);
+      }
+      return buffer;
+    } else {
+      throw new Error('No body');
+    }
+  }
+
+  async blob(): Promise<Blob> { throw 'Not implemented'; }
+
+  async json(): Promise<any> {
+    this.markBodyUsed();
+    if (this._body !== null) {
+      return JSON.parse(this._body);
+    } else {
+      throw new Error('No body');
+    }
+  }
+
+  async text(): Promise<string> {
+    this.markBodyUsed();
+    if (this._body !== null) {
+      return this._body;
+    } else {
+      throw new Error('No body');
+    }
+  }
+
+  async formData(): Promise<FormData> { throw 'Not implemented'; }
+
+  private markBodyUsed(): void {
+    if (this.bodyUsed === true) {
+      throw new Error('Cannot reuse body without cloning.');
+    }
+    this.bodyUsed = true;
+  }
+}
+
+export class MockHeaders implements Headers {
+  map = new Map<string, string>();
+
+  [Symbol.iterator]() { return this.map[Symbol.iterator](); }
+
+  append(name: string, value: string): void { this.map.set(name, value); }
+
+  delete (name: string): void { this.map.delete(name); }
+
+  entries() { return this.map.entries(); }
+
+  forEach(callback: Function): void { this.map.forEach(callback as any); }
+
+  get(name: string): string|null { return this.map.get(name) || null; }
+
+  has(name: string): boolean { return this.map.has(name); }
+
+  keys() { return this.map.keys(); }
+
+  set(name: string, value: string): void { this.map.set(name, value); }
+
+  values() { return this.map.values(); }
+}
+
+export class MockRequest extends MockBody implements Request {
+  readonly cache: RequestCache = 'default';
+  readonly credentials: RequestCredentials = 'omit';
+  readonly destination: RequestDestination = 'document';
+  readonly headers: Headers = new MockHeaders();
+  readonly integrity: string = '';
+  readonly keepalive: boolean = true;
+  readonly method: string = 'GET';
+  readonly mode: RequestMode = 'cors';
+  readonly redirect: RequestRedirect = 'error';
+  readonly referrer: string = '';
+  readonly referrerPolicy: ReferrerPolicy = 'no-referrer';
+  readonly type: RequestType = '';
+  readonly signal: AbortSignal = null as any;
+
+  url: string;
+
+  constructor(input: string|Request, init: RequestInit = {}) {
+    super(init !== undefined ? (init.body as(string | null)) || null : null);
+    if (typeof input !== 'string') {
+      throw 'Not implemented';
+    }
+    this.url = input;
+    const headers = init.headers as{[key: string]: string};
+    if (headers !== undefined) {
+      if (headers instanceof MockHeaders) {
+        this.headers = headers;
+      } else {
+        Object.keys(headers).forEach(header => { this.headers.set(header, headers[header]); });
+      }
+    }
+    if (init.cache !== undefined) {
+      this.cache = init.cache;
+    }
+    if (init.mode !== undefined) {
+      this.mode = init.mode;
+    }
+    if (init.credentials !== undefined) {
+      this.credentials = init.credentials;
+    }
+  }
+
+  clone(): Request {
+    if (this.bodyUsed) {
+      throw 'Body already consumed';
+    }
+    return new MockRequest(
+        this.url,
+        {body: this._body, mode: this.mode, credentials: this.credentials, headers: this.headers});
+  }
+}
+
+export class MockResponse extends MockBody implements Response {
+  readonly headers: Headers = new MockHeaders();
+  get ok(): boolean { return this.status >= 200 && this.status < 300; }
+  readonly status: number;
+  readonly statusText: string;
+  readonly type: ResponseType = 'basic';
+  readonly url: string = '';
+  readonly body: ReadableStream|null = null;
+  readonly redirected: boolean = false;
+
+  constructor(
+      body?: any,
+      init: ResponseInit&{type?: ResponseType, redirected?: boolean, url?: string} = {}) {
+    super(typeof body === 'string' ? body : null);
+    this.status = (init.status !== undefined) ? init.status : 200;
+    this.statusText = init.statusText || 'OK';
+    const headers = init.headers as{[key: string]: string};
+    if (headers !== undefined) {
+      if (headers instanceof MockHeaders) {
+        this.headers = headers;
+      } else {
+        Object.keys(headers).forEach(header => { this.headers.set(header, headers[header]); });
+      }
+    }
+    if (init.type !== undefined) {
+      this.type = init.type;
+    }
+    if (init.redirected !== undefined) {
+      this.redirected = init.redirected;
+    }
+    if (init.url !== undefined) {
+      this.url = init.url;
+    }
+  }
+
+  clone(): Response {
+    if (this.bodyUsed) {
+      throw 'Body already consumed';
+    }
+    return new MockResponse(
+        this._body, {status: this.status, statusText: this.statusText, headers: this.headers});
+  }
+}
diff --git a/packages/service-worker/worker/testing/mock.ts b/packages/service-worker/worker/testing/mock.ts
new file mode 100644
index 000000000000..00f5b6d053cd
--- /dev/null
+++ b/packages/service-worker/worker/testing/mock.ts
@@ -0,0 +1,226 @@
+/**
+ * @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 {AssetGroupConfig, Manifest} from '../src/manifest';
+import {sha1} from '../src/sha1';
+
+import {MockResponse} from './fetch';
+
+export type HeaderMap = {
+  [key: string]: string
+};
+
+export class MockFile {
+  constructor(
+      readonly path: string, readonly contents: string, readonly headers = {},
+      readonly hashThisFile: boolean) {}
+
+  get hash(): string { return sha1(this.contents); }
+}
+
+export class MockFileSystemBuilder {
+  private resources = new Map<string, MockFile>();
+
+  addFile(path: string, contents: string, headers?: HeaderMap): MockFileSystemBuilder {
+    this.resources.set(path, new MockFile(path, contents, headers, true));
+    return this;
+  }
+
+  addUnhashedFile(path: string, contents: string, headers?: HeaderMap): MockFileSystemBuilder {
+    this.resources.set(path, new MockFile(path, contents, headers, false));
+    return this;
+  }
+
+  build(): MockFileSystem { return new MockFileSystem(this.resources); }
+}
+
+export class MockFileSystem {
+  constructor(private resources: Map<string, MockFile>) {}
+
+  lookup(path: string): MockFile|undefined { return this.resources.get(path); }
+
+  extend(): MockFileSystemBuilder {
+    const builder = new MockFileSystemBuilder();
+    Array.from(this.resources.keys()).forEach(path => {
+      const res = this.resources.get(path) !;
+      if (res.hashThisFile) {
+        builder.addFile(path, res.contents, res.headers);
+      } else {
+        builder.addUnhashedFile(path, res.contents, res.headers);
+      }
+    });
+    return builder;
+  }
+
+  list(): string[] { return Array.from(this.resources.keys()); }
+}
+
+export class MockServerStateBuilder {
+  private resources = new Map<string, Response>();
+  private errors = new Set<string>();
+
+  withStaticFiles(fs: MockFileSystem): MockServerStateBuilder {
+    fs.list().forEach(path => {
+      const file = fs.lookup(path) !;
+      this.resources.set(path, new MockResponse(file.contents, {headers: file.headers}));
+    });
+    return this;
+  }
+
+  withManifest(manifest: Manifest): MockServerStateBuilder {
+    this.resources.set('ngsw.json', new MockResponse(JSON.stringify(manifest)));
+    return this;
+  }
+
+  withRedirect(from: string, to: string, toContents: string): MockServerStateBuilder {
+    this.resources.set(from, new MockResponse(toContents, {redirected: true, url: to}));
+    this.resources.set(to, new MockResponse(toContents));
+    return this;
+  }
+
+  withError(url: string): MockServerStateBuilder {
+    this.errors.add(url);
+    return this;
+  }
+
+  build(): MockServerState { return new MockServerState(this.resources, this.errors); }
+}
+
+export class MockServerState {
+  private requests: Request[] = [];
+  private gate: Promise<void> = Promise.resolve();
+  private resolve: Function|null = null;
+  // TODO(issue/24571): remove '!'.
+  private resolveNextRequest !: Function;
+  online = true;
+  nextRequest: Promise<Request>;
+
+  constructor(private resources: Map<string, Response>, private errors: Set<string>) {
+    this.nextRequest = new Promise(resolve => { this.resolveNextRequest = resolve; });
+  }
+
+  async fetch(req: Request): Promise<Response> {
+    this.resolveNextRequest(req);
+    this.nextRequest = new Promise(resolve => { this.resolveNextRequest = resolve; });
+
+    await this.gate;
+
+    if (!this.online) {
+      throw new Error('Offline.');
+    }
+
+    if (req.credentials === 'include') {
+      return new MockResponse(null, {status: 0, statusText: '', type: 'opaque'});
+    }
+    const url = req.url.split('?')[0];
+    this.requests.push(req);
+    if (this.resources.has(url)) {
+      return this.resources.get(url) !.clone();
+    }
+    if (this.errors.has(url)) {
+      throw new Error('Intentional failure!');
+    }
+    return new MockResponse(null, {status: 404, statusText: 'Not Found'});
+  }
+
+  pause(): void {
+    this.gate = new Promise(resolve => { this.resolve = resolve; });
+  }
+
+  unpause(): void {
+    if (this.resolve === null) {
+      return;
+    }
+    this.resolve();
+    this.resolve = null;
+  }
+
+  assertSawRequestFor(url: string): void {
+    if (!this.sawRequestFor(url)) {
+      throw new Error(`Expected request for ${url}, got none.`);
+    }
+  }
+
+  assertNoRequestFor(url: string): void {
+    if (this.sawRequestFor(url)) {
+      throw new Error(`Expected no request for ${url} but saw one.`);
+    }
+  }
+
+  sawRequestFor(url: string): boolean {
+    const matching = this.requests.filter(req => req.url.split('?')[0] === url);
+    if (matching.length > 0) {
+      this.requests = this.requests.filter(req => req !== matching[0]);
+      return true;
+    }
+    return false;
+  }
+
+  assertNoOtherRequests(): void {
+    if (!this.noOtherRequests()) {
+      throw new Error(
+          `Expected no other requests, got requests for ${this.requests.map(req => req.url.split('?')[0]).join(', ')}`);
+    }
+  }
+
+  noOtherRequests(): boolean { return this.requests.length === 0; }
+
+  clearRequests(): void { this.requests = []; }
+
+  reset(): void {
+    this.clearRequests();
+    this.nextRequest = new Promise(resolve => { this.resolveNextRequest = resolve; });
+    this.gate = Promise.resolve();
+    this.resolve = null;
+    this.online = true;
+  }
+}
+
+export function tmpManifestSingleAssetGroup(fs: MockFileSystem): Manifest {
+  const files = fs.list();
+  const hashTable: {[url: string]: string} = {};
+  files.forEach(path => { hashTable[path] = fs.lookup(path) !.hash; });
+  return {
+    configVersion: 1,
+    index: '/index.html',
+    assetGroups: [
+      {
+        name: 'group',
+        installMode: 'prefetch',
+        updateMode: 'prefetch',
+        urls: files,
+        patterns: [],
+      },
+    ],
+    navigationUrls: [], hashTable,
+  };
+}
+
+export function tmpHashTableForFs(
+    fs: MockFileSystem, breakHashes: {[url: string]: boolean} = {}): {[url: string]: string} {
+  const table: {[url: string]: string} = {};
+  fs.list().forEach(path => {
+    const file = fs.lookup(path) !;
+    if (file.hashThisFile) {
+      table[path] = file.hash;
+      if (breakHashes[path]) {
+        table[path] = table[path].split('').reverse().join('');
+      }
+    }
+  });
+  return table;
+}
+
+export function tmpHashTable(manifest: Manifest): Map<string, string> {
+  const map = new Map<string, string>();
+  Object.keys(manifest.hashTable).forEach(url => {
+    const hash = manifest.hashTable[url];
+    map.set(url, hash);
+  });
+  return map;
+}
diff --git a/packages/service-worker/worker/testing/scope.ts b/packages/service-worker/worker/testing/scope.ts
new file mode 100644
index 000000000000..3c648e382ad4
--- /dev/null
+++ b/packages/service-worker/worker/testing/scope.ts
@@ -0,0 +1,340 @@
+/**
+ * @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 {Subject} from 'rxjs';
+
+import {Adapter, Context} from '../src/adapter';
+import {AssetGroupConfig, Manifest} from '../src/manifest';
+import {sha1} from '../src/sha1';
+
+import {MockCacheStorage} from './cache';
+import {MockHeaders, MockRequest, MockResponse} from './fetch';
+import {MockServerState, MockServerStateBuilder} from './mock';
+
+const EMPTY_SERVER_STATE = new MockServerStateBuilder().build();
+
+const MOCK_ORIGIN = 'http://localhost/';
+
+export class MockClient {
+  queue = new Subject<Object>();
+
+  constructor(readonly id: string) {}
+
+  readonly messages: Object[] = [];
+
+  postMessage(message: Object): void {
+    this.messages.push(message);
+    this.queue.next(message);
+  }
+}
+
+export class SwTestHarnessBuilder {
+  private server = EMPTY_SERVER_STATE;
+  private caches = new MockCacheStorage(MOCK_ORIGIN);
+
+  withCacheState(cache: string): SwTestHarnessBuilder {
+    this.caches = new MockCacheStorage(MOCK_ORIGIN, cache);
+    return this;
+  }
+
+  withServerState(state: MockServerState): SwTestHarnessBuilder {
+    this.server = state;
+    return this;
+  }
+
+  build(): SwTestHarness { return new SwTestHarness(this.server, this.caches); }
+}
+
+export class MockClients implements Clients {
+  private clients = new Map<string, MockClient>();
+
+  add(clientId: string): void {
+    if (this.clients.has(clientId)) {
+      return;
+    }
+    this.clients.set(clientId, new MockClient(clientId));
+  }
+
+  remove(clientId: string): void { this.clients.delete(clientId); }
+
+  async get(id: string): Promise<Client> { return this.clients.get(id) !as any as Client; }
+
+  getMock(id: string): MockClient|undefined { return this.clients.get(id); }
+
+  async matchAll(): Promise<Client[]> {
+    return Array.from(this.clients.values()) as any[] as Client[];
+  }
+
+  async claim(): Promise<any> {}
+}
+
+export class SwTestHarness implements ServiceWorkerGlobalScope, Adapter, Context {
+  readonly clients = new MockClients();
+  private eventHandlers = new Map<string, Function>();
+  private skippedWaiting = true;
+
+  private selfMessageQueue: any[] = [];
+  // TODO(issue/24571): remove '!'.
+  unregistered !: boolean;
+  readonly notifications: {title: string, options: Object}[] = [];
+  readonly registration: ServiceWorkerRegistration = {
+    active: {
+      postMessage: (msg: any) => { this.selfMessageQueue.push(msg); },
+    },
+    scope: MOCK_ORIGIN,
+    showNotification: (title: string, options: Object) => {
+      this.notifications.push({title, options});
+    },
+    unregister: () => { this.unregistered = true; },
+  } as any;
+
+  static envIsSupported(): boolean {
+    return (typeof URL === 'function') ||
+        (typeof require === 'function' && typeof require('url')['parse'] === 'function');
+  }
+
+  time: number;
+
+  private timers: {
+    at: number,
+    duration: number,
+    fn: Function,
+    fired: boolean,
+  }[] = [];
+
+  constructor(private server: MockServerState, readonly caches: MockCacheStorage) {
+    this.time = Date.now();
+  }
+
+  async resolveSelfMessages(): Promise<void> {
+    while (this.selfMessageQueue.length > 0) {
+      const queue = this.selfMessageQueue;
+      this.selfMessageQueue = [];
+      await queue.reduce(async(previous, msg) => {
+        await previous;
+        await this.handleMessage(msg, null);
+      }, Promise.resolve());
+    }
+  }
+
+  async startup(firstTime: boolean = false): Promise<boolean|null> {
+    if (!firstTime) {
+      return null;
+    }
+    let skippedWaiting: boolean = false;
+    if (this.eventHandlers.has('install')) {
+      const installEvent = new MockInstallEvent();
+      this.eventHandlers.get('install') !(installEvent);
+      await installEvent.ready;
+      skippedWaiting = this.skippedWaiting;
+    }
+    if (this.eventHandlers.has('activate')) {
+      const activateEvent = new MockActivateEvent();
+      this.eventHandlers.get('activate') !(activateEvent);
+      await activateEvent.ready;
+    }
+    return skippedWaiting;
+  }
+  updateServerState(server?: MockServerState): void { this.server = server || EMPTY_SERVER_STATE; }
+
+  fetch(req: string|Request): Promise<Response> {
+    if (typeof req === 'string') {
+      if (req.startsWith(MOCK_ORIGIN)) {
+        req = '/' + req.substr(MOCK_ORIGIN.length);
+      }
+      return this.server.fetch(new MockRequest(req));
+    } else {
+      const mockReq = req.clone() as MockRequest;
+      if (mockReq.url.startsWith(MOCK_ORIGIN)) {
+        mockReq.url = '/' + mockReq.url.substr(MOCK_ORIGIN.length);
+      }
+      return this.server.fetch(mockReq);
+    }
+  }
+
+  addEventListener(event: string, handler: Function): void {
+    this.eventHandlers.set(event, handler);
+  }
+
+  removeEventListener(event: string, handler?: Function): void { this.eventHandlers.delete(event); }
+
+  newRequest(url: string, init: Object = {}): Request { return new MockRequest(url, init); }
+
+  newResponse(body: string, init: Object = {}): Response { return new MockResponse(body, init); }
+
+  newHeaders(headers: {[name: string]: string}): Headers {
+    return Object.keys(headers).reduce((mock, name) => {
+      mock.set(name, headers[name]);
+      return mock;
+    }, new MockHeaders());
+  }
+
+  parseUrl(url: string, relativeTo: string): {origin: string, path: string} {
+    if (typeof URL === 'function') {
+      const obj = new URL(url, relativeTo);
+      return {origin: obj.origin, path: obj.pathname};
+    } else {
+      const obj = require('url').parse(url);
+      return {origin: obj.origin, path: obj.pathname};
+    }
+  }
+
+  async skipWaiting(): Promise<void> { this.skippedWaiting = true; }
+
+  waitUntil(promise: Promise<void>): void {}
+
+  handleFetch(req: Request, clientId: string|null = null):
+      [Promise<Response|undefined>, Promise<void>] {
+    if (!this.eventHandlers.has('fetch')) {
+      throw new Error('No fetch handler registered');
+    }
+    const event = new MockFetchEvent(req, clientId);
+    this.eventHandlers.get('fetch') !.call(this, event);
+
+    if (clientId) {
+      this.clients.add(clientId);
+    }
+
+    return [event.response, event.ready];
+  }
+
+  handleMessage(data: Object, clientId: string|null): Promise<void> {
+    if (!this.eventHandlers.has('message')) {
+      throw new Error('No message handler registered');
+    }
+    let event: MockMessageEvent;
+    if (clientId === null) {
+      event = new MockMessageEvent(data, null);
+    } else {
+      this.clients.add(clientId);
+      event = new MockMessageEvent(data, this.clients.getMock(clientId) || null);
+    }
+    this.eventHandlers.get('message') !.call(this, event);
+    return event.ready;
+  }
+
+  handlePush(data: Object): Promise<void> {
+    if (!this.eventHandlers.has('push')) {
+      throw new Error('No push handler registered');
+    }
+    const event = new MockPushEvent(data);
+    this.eventHandlers.get('push') !.call(this, event);
+    return event.ready;
+  }
+
+  timeout(ms: number): Promise<void> {
+    return new Promise(resolve => {
+      this.timers.push({
+        at: this.time + ms,
+        duration: ms,
+        fn: resolve,
+        fired: false,
+      });
+    });
+  }
+
+  advance(by: number): void {
+    this.time += by;
+    this.timers.filter(timer => !timer.fired)
+        .filter(timer => timer.at <= this.time)
+        .forEach(timer => {
+          timer.fired = true;
+          timer.fn();
+        });
+  }
+
+  isClient(obj: any): obj is Client { return obj instanceof MockClient; }
+}
+
+interface StaticFile {
+  url: string;
+  contents: string;
+  hash?: string;
+}
+
+export class AssetGroupBuilder {
+  constructor(private up: ConfigBuilder, readonly name: string) {}
+
+  private files: StaticFile[] = [];
+
+  addFile(url: string, contents: string, hashed: boolean = true): AssetGroupBuilder {
+    const file: StaticFile = {url, contents, hash: undefined};
+    if (hashed) {
+      file.hash = sha1(contents);
+    }
+    this.files.push(file);
+    return this;
+  }
+
+  finish(): ConfigBuilder { return this.up; }
+
+  toManifestGroup(): AssetGroupConfig { return null !; }
+}
+
+export class ConfigBuilder {
+  assetGroups = new Map<string, AssetGroupBuilder>();
+
+  addAssetGroup(name: string): ConfigBuilder {
+    const builder = new AssetGroupBuilder(this, name);
+    this.assetGroups.set(name, builder);
+    return this;
+  }
+
+  finish(): Manifest {
+    const assetGroups = Array.from(this.assetGroups.values()).map(group => group.toManifestGroup());
+    const hashTable = {};
+    return {
+      configVersion: 1,
+      index: '/index.html', assetGroups,
+      navigationUrls: [], hashTable,
+    };
+  }
+}
+
+class OneTimeContext implements Context {
+  private queue: Promise<void>[] = [];
+
+  waitUntil(promise: Promise<void>): void { this.queue.push(promise); }
+
+  get ready(): Promise<void> {
+    return (async() => {
+      while (this.queue.length > 0) {
+        await this.queue.shift();
+      }
+    })();
+  }
+}
+
+class MockExtendableEvent extends OneTimeContext {}
+
+class MockFetchEvent extends MockExtendableEvent {
+  response: Promise<Response|undefined> = Promise.resolve(undefined);
+
+  constructor(readonly request: Request, readonly clientId: string|null) { super(); }
+
+  respondWith(promise: Promise<Response>): Promise<Response> {
+    this.response = promise;
+    return promise;
+  }
+}
+
+class MockMessageEvent extends MockExtendableEvent {
+  constructor(readonly data: Object, readonly source: MockClient|null) { super(); }
+}
+
+class MockPushEvent extends MockExtendableEvent {
+  constructor(private _data: Object) { super(); }
+  data = {
+    json: () => this._data,
+  };
+}
+
+class MockInstallEvent extends MockExtendableEvent {}
+
+
+class MockActivateEvent extends MockExtendableEvent {}
diff --git a/packages/service-worker/worker/tsconfig.json b/packages/service-worker/worker/tsconfig.json
new file mode 100644
index 000000000000..c165ab4e8cd5
--- /dev/null
+++ b/packages/service-worker/worker/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": false,
+    "strict": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "outDir": "../../../dist/all/@angular/service-worker/worker-es2017",
+    "noImplicitAny": true,
+    "noFallthroughCasesInSwitch": true,
+    "rootDir": ".",
+    "inlineSourceMap": true,
+    "lib": ["es2015", "dom"],
+    "target": "es2017",
+    "typeRoots": []
+  },
+  "bazelOptions": {
+    "suppressTsconfigOverrideWarnings": true
+  },
+  "files": [
+    "main.ts",
+    "src/service-worker.d.ts"
+  ]
+}
diff --git a/packages/system.d.ts b/packages/system.d.ts
new file mode 100644
index 000000000000..f94cec235ebf
--- /dev/null
+++ b/packages/system.d.ts
@@ -0,0 +1,4 @@
+/**
+ * Dummy typings for systemjs.
+ */
+declare var System: any;
diff --git a/packages/tsconfig-build.json b/packages/tsconfig-build.json
new file mode 100644
index 000000000000..4979b6563fd5
--- /dev/null
+++ b/packages/tsconfig-build.json
@@ -0,0 +1,32 @@
+/**
+ * Root tsconfig file for use building all Angular packages. Note there is no rootDir
+ * and therefore any tsconfig in the package directory will need to define its own
+ * rootDir.
+ */
+{
+  "compilerOptions": {
+    "declaration": true,
+    "stripInternal": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "module": "es2015",
+    "target": "es2015",
+    "lib": ["es2015", "dom"],
+    "skipLibCheck": true,
+    // don't auto-discover @types/node, it results in a ///<reference in the .d.ts output
+    "types": [],
+    "experimentalDecorators": true,
+    // This is needed due to https://github.com/Microsoft/TypeScript/issues/17516.
+    // As tsickle will lower decorators before TS, this is not a problem for our build.
+    "emitDecoratorMetadata": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "importHelpers": true
+  },
+  "bazelOptions": {
+    "suppressTsconfigOverrideWarnings": true
+  }
+}
diff --git a/packages/tsconfig-metadata.json b/packages/tsconfig-metadata.json
new file mode 100644
index 000000000000..0fc31d74973b
--- /dev/null
+++ b/packages/tsconfig-metadata.json
@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+
+  "compilerOptions": {
+    "paths": {
+      "@angular/*": ["./*"]
+    }
+  },
+
+  "exclude": [
+    "bazel",
+    "compiler/test",
+    "compiler-cli/integrationtest",
+    "platform-server/integrationtest",
+    "common/locales",
+    "examples",
+    "**/*_spec.ts",
+    "**/*.spec.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "annotateForClosureCompiler": false,
+    "annotationsAs": "decorators"
+  }
+}
\ No newline at end of file
diff --git a/packages/tsconfig.json b/packages/tsconfig.json
new file mode 100644
index 000000000000..99c52620a9a9
--- /dev/null
+++ b/packages/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "outDir": "../dist/all/@angular",
+    "noImplicitAny": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "selenium-webdriver": ["../node_modules/@types/selenium-webdriver/index.d.ts"],
+      "rxjs/*": ["../node_modules/rxjs/*"],
+      "@angular/*": ["./*"],
+      "e2e_util/*": ["../modules/e2e_util/*"]
+    },
+    "rootDir": ".",
+    "inlineSourceMap": true,
+    "lib": ["es5", "dom", "es2015.promise", "es2015.collection", "es2015.iterable", "es2015.core"],
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "target": "es5",
+    "types": ["angular"]
+  },
+  "bazelOptions": {
+    "suppressTsconfigOverrideWarnings": true
+  },
+  "exclude": [
+    "bazel",
+    "common/locales",
+    "compiler-cli/integrationtest",
+    "elements/schematics",
+    "examples/**/e2e_test/*",
+    "platform-server/integrationtest"
+  ]
+
+}
diff --git a/packages/types.d.ts b/packages/types.d.ts
new file mode 100644
index 000000000000..530beb389c49
--- /dev/null
+++ b/packages/types.d.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
+ */
+
+// This file contains all ambient imports needed to compile the packages/ source code
+
+/// <reference types="hammerjs" />
+/// <reference types="jasmine" />
+/// <reference types="node" />
+/// <reference types="zone.js" />
+/// <reference path="./es6-subset.d.ts" />
+/// <reference path="./goog.d.ts" />
+/// <reference path="./system.d.ts" />
+
+declare let isNode: boolean;
+declare let isBrowser: boolean;
+
+declare namespace jasmine {
+  interface Matchers<T> {
+    toHaveProperties(obj: any): boolean;
+  }
+}
+
+/**
+*Jasmine matching utilities. These are added in the a more recent version of
+*the Jasmine typedefs than what we are using:
+*https://github.com/DefinitelyTyped/DefinitelyTyped/pull/20771
+*/
+declare namespace jasmine {
+  const matchersUtil: MatchersUtil;
+}
diff --git a/packages/upgrade/BUILD.bazel b/packages/upgrade/BUILD.bazel
new file mode 100644
index 000000000000..f6f7a7558349
--- /dev/null
+++ b/packages/upgrade/BUILD.bazel
@@ -0,0 +1,38 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+ng_module(
+    name = "upgrade",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/common/**/*.ts",
+            "src/dynamic/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/upgrade",
+    deps = [
+        "//packages/core",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = [
+        "package.json",
+        "//packages/upgrade/static:package.json",
+    ],
+    entry_point = "packages/upgrade/index.js",
+    tags = [
+        "ivy-jit",
+        "ivy-local",
+        "release-with-framework",
+    ],
+    deps = [
+        ":upgrade",
+        "//packages/upgrade/static",
+    ],
+)
diff --git a/packages/upgrade/index.ts b/packages/upgrade/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/upgrade/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';
diff --git a/packages/upgrade/package.json b/packages/upgrade/package.json
new file mode 100644
index 000000000000..22bbbca95f8a
--- /dev/null
+++ b/packages/upgrade/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@angular/upgrade",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular - the library for easing update from v1 to v2",
+  "main": "./bundles/upgrade.umd.js",
+  "module": "./fesm5/upgrade.js",
+  "es2015": "./fesm2015/upgrade.js",
+  "esm5": "./esm5/upgrade.js",
+  "esm2015": "./esm2015/upgrade.js",
+  "fesm5": "./fesm5/upgrade.js",
+  "fesm2015": "./fesm2015/upgrade.js",
+  "typings": "./upgrade.d.ts",
+  "author": "angular",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.9.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "0.0.0-PLACEHOLDER",
+    "@angular/compiler": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser-dynamic": "0.0.0-PLACEHOLDER"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.git"
+  },
+  "ng-update": {
+    "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
+  },
+  "sideEffects": false
+}
diff --git a/packages/upgrade/public_api.ts b/packages/upgrade/public_api.ts
new file mode 100644
index 000000000000..0d6125fe1de2
--- /dev/null
+++ b/packages/upgrade/public_api.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 this package. allowing
+ * Angular 1 and Angular 2+ to run side by side in the same application.
+ */
+export {VERSION} from './src/common/version';
+export {UpgradeAdapter, UpgradeAdapterRef} from './src/dynamic/upgrade_adapter';
+
+// This file only re-exports content of the `src` folder. Keep it that way.
diff --git a/packages/upgrade/rollup.config.js b/packages/upgrade/rollup.config.js
new file mode 100644
index 000000000000..c16303ff1956
--- /dev/null
+++ b/packages/upgrade/rollup.config.js
@@ -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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+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': 'rxjs',
+  'rxjs/operators': 'rxjs.operators',
+};
+
+module.exports = {
+  entry: '../../dist/packages-dist/upgrade/fesm5/upgrade.js',
+  dest: '../../dist/packages-dist/upgrade/bundles/upgrade.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/upgrade'},
+  moduleName: 'ng.upgrade',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/upgrade/src/common/angular1.ts b/packages/upgrade/src/common/angular1.ts
new file mode 100644
index 000000000000..3cbe8897d297
--- /dev/null
+++ b/packages/upgrade/src/common/angular1.ts
@@ -0,0 +1,289 @@
+/**
+ * @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 type Ng1Token = string;
+
+export type Ng1Expression = string | Function;
+
+export interface IAnnotatedFunction extends Function { $inject?: ReadonlyArray<Ng1Token>; }
+
+export type IInjectable = (Ng1Token | Function)[] | IAnnotatedFunction;
+
+export type SingleOrListOrMap<T> = T | T[] | {[key: string]: T};
+
+export interface IModule {
+  name: string;
+  requires: (string|IInjectable)[];
+  config(fn: IInjectable): IModule;
+  directive(selector: string, factory: IInjectable): IModule;
+  component(selector: string, component: IComponent): IModule;
+  controller(name: string, type: IInjectable): IModule;
+  factory(key: Ng1Token, factoryFn: IInjectable): IModule;
+  value(key: Ng1Token, value: any): IModule;
+  constant(token: Ng1Token, value: any): IModule;
+  run(a: IInjectable): IModule;
+}
+export interface ICompileService {
+  (element: Element|NodeList|Node[]|string, transclude?: Function): ILinkFn;
+}
+export interface ILinkFn {
+  (scope: IScope, cloneAttachFn?: ICloneAttachFunction, options?: ILinkFnOptions): IAugmentedJQuery;
+  $$slots?: {[slotName: string]: ILinkFn};
+}
+export interface ILinkFnOptions {
+  parentBoundTranscludeFn?: Function;
+  transcludeControllers?: {[key: string]: any};
+  futureParentElement?: Node;
+}
+export interface IRootScopeService {
+  $new(isolate?: boolean): IScope;
+  $id: string;
+  $parent: IScope;
+  $root: IScope;
+  $watch(exp: Ng1Expression, fn?: (a1?: any, a2?: any) => void): Function;
+  $on(event: string, fn?: (event?: any, ...args: any[]) => void): Function;
+  $destroy(): any;
+  $apply(exp?: Ng1Expression): any;
+  $digest(): any;
+  $evalAsync(exp: Ng1Expression, locals?: any): void;
+  $on(event: string, fn?: (event?: any, ...args: any[]) => void): Function;
+  $$childTail: IScope;
+  $$childHead: IScope;
+  $$nextSibling: IScope;
+  [key: string]: any;
+}
+export interface IScope extends IRootScopeService {}
+
+export interface IAngularBootstrapConfig { strictDi?: boolean; }
+export interface IDirective {
+  compile?: IDirectiveCompileFn;
+  controller?: IController;
+  controllerAs?: string;
+  bindToController?: boolean|{[key: string]: string};
+  link?: IDirectiveLinkFn|IDirectivePrePost;
+  name?: string;
+  priority?: number;
+  replace?: boolean;
+  require?: DirectiveRequireProperty;
+  restrict?: string;
+  scope?: boolean|{[key: string]: string};
+  template?: string|Function;
+  templateUrl?: string|Function;
+  templateNamespace?: string;
+  terminal?: boolean;
+  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;
+}
+export interface IDirectivePrePost {
+  pre?: IDirectiveLinkFn;
+  post?: IDirectiveLinkFn;
+}
+export interface IDirectiveLinkFn {
+  (scope: IScope, instanceElement: IAugmentedJQuery, instanceAttributes: IAttributes,
+   controller: any, transclude: ITranscludeFunction): void;
+}
+export interface IComponent {
+  bindings?: {[key: string]: string};
+  controller?: string|IInjectable;
+  controllerAs?: string;
+  require?: DirectiveRequireProperty;
+  template?: string|Function;
+  templateUrl?: string|Function;
+  transclude?: DirectiveTranscludeProperty;
+}
+export interface IAttributes {
+  $observe(attr: string, fn: (v: string) => void): void;
+  [key: string]: any;
+}
+export interface ITranscludeFunction {
+  // If the scope is provided, then the cloneAttachFn must be as well.
+  (scope: IScope, cloneAttachFn: ICloneAttachFunction): IAugmentedJQuery;
+  // If one argument is provided, then it's assumed to be the cloneAttachFn.
+  (cloneAttachFn?: ICloneAttachFunction): IAugmentedJQuery;
+}
+export interface ICloneAttachFunction {
+  // Let's hint but not force cloneAttachFn's signature
+  (clonedElement?: IAugmentedJQuery, scope?: IScope): any;
+}
+export type IAugmentedJQuery = Node[] & {
+  on?: (name: string, fn: () => void) => void;
+  data?: (name: string, value?: any) => any;
+  text?: () => string;
+  inheritedData?: (name: string, value?: any) => any;
+  contents?: () => IAugmentedJQuery;
+  parent?: () => IAugmentedJQuery;
+  empty?: () => void;
+  append?: (content: IAugmentedJQuery | string) => IAugmentedJQuery;
+  controller?: (name: string) => any;
+  isolateScope?: () => IScope;
+  injector?: () => IInjectorService;
+  remove?: () => void;
+  removeData?: () => void;
+};
+export interface IProvider { $get: IInjectable; }
+export interface IProvideService {
+  provider(token: Ng1Token, provider: IProvider): IProvider;
+  factory(token: Ng1Token, factory: IInjectable): IProvider;
+  service(token: Ng1Token, type: IInjectable): IProvider;
+  value(token: Ng1Token, value: any): IProvider;
+  constant(token: Ng1Token, value: any): void;
+  decorator(token: Ng1Token, factory: IInjectable): void;
+}
+export interface IParseService { (expression: string): ICompiledExpression; }
+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;
+}
+export interface ICacheObject {
+  put<T>(key: string, value?: T): T;
+  get(key: string): any;
+}
+export interface ITemplateCacheService extends ICacheObject {}
+export interface ITemplateRequestService {
+  (template: string|any /* TrustedResourceUrl */, ignoreRequestError?: boolean): Promise<string>;
+  totalPendingRequests: number;
+}
+export type IController = string | IInjectable;
+export interface IControllerService {
+  (controllerConstructor: IController, locals?: any, later?: any, ident?: any): any;
+  (controllerName: string, locals?: any): any;
+}
+
+export interface IInjectorService {
+  get(key: string): any;
+  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[];
+  getLocation(): string;
+  setLocation(url: string): void;
+  whenStable(callback: Function): void;
+}
+
+export interface INgModelController {
+  $render(): void;
+  $isEmpty(value: any): boolean;
+  $setValidity(validationErrorKey: string, isValid: boolean): void;
+  $setPristine(): void;
+  $setDirty(): void;
+  $setUntouched(): void;
+  $setTouched(): void;
+  $rollbackViewValue(): void;
+  $validate(): void;
+  $commitViewValue(): void;
+  $setViewValue(value: any, trigger: string): void;
+
+  $viewValue: any;
+  $modelValue: any;
+  $parsers: Function[];
+  $formatters: Function[];
+  $validators: {[key: string]: Function};
+  $asyncValidators: {[key: string]: Function};
+  $viewChangeListeners: Function[];
+  $error: Object;
+  $pending: Object;
+  $untouched: boolean;
+  $touched: boolean;
+  $pristine: boolean;
+  $dirty: boolean;
+  $valid: boolean;
+  $invalid: boolean;
+  $name: string;
+}
+
+function noNg() {
+  throw new Error('AngularJS v1.x is not loaded!');
+}
+
+
+let angular: {
+  bootstrap: (e: Element, modules: (string | IInjectable)[], config?: IAngularBootstrapConfig) =>
+                 IInjectorService,
+  module: (prefix: string, dependencies?: string[]) => IModule,
+  element: (e: string | Element | Document | IAugmentedJQuery) => IAugmentedJQuery,
+  version: {major: number},
+  resumeBootstrap: () => void,
+  getTestability: (e: Element) => ITestabilityService
+} = <any>{
+  bootstrap: noNg,
+  module: noNg,
+  element: noNg,
+  version: undefined,
+  resumeBootstrap: noNg,
+  getTestability: noNg
+};
+
+try {
+  if (window.hasOwnProperty('angular')) {
+    angular = (<any>window).angular;
+  }
+} catch (e) {
+  // ignore in CJS mode.
+}
+
+/**
+ * @deprecated Use `setAngularJSGlobal` instead.
+ */
+export function setAngularLib(ng: any): void {
+  setAngularJSGlobal(ng);
+}
+
+/**
+ * @deprecated Use `getAngularJSGlobal` instead.
+ */
+export function getAngularLib(): any {
+  return getAngularJSGlobal();
+}
+
+/**
+ * Resets the AngularJS global.
+ *
+ * Used when AngularJS is loaded lazily, and not available on `window`.
+ */
+export function setAngularJSGlobal(ng: any): void {
+  angular = ng;
+  version = ng && ng.version;
+}
+
+/**
+ * Returns the current AngularJS global.
+ */
+export function getAngularJSGlobal(): any {
+  return angular;
+}
+
+export const bootstrap: typeof angular.bootstrap = (e, modules, config?) =>
+    angular.bootstrap(e, modules, config);
+
+export const module: typeof angular.module = (prefix, dependencies?) =>
+    angular.module(prefix, dependencies);
+
+export const element: typeof angular.element = e => angular.element(e);
+
+export const resumeBootstrap: typeof angular.resumeBootstrap = () => angular.resumeBootstrap();
+
+export const getTestability: typeof angular.getTestability = e => angular.getTestability(e);
+
+export let version = angular.version;
diff --git a/packages/upgrade/src/common/component_info.ts b/packages/upgrade/src/common/component_info.ts
new file mode 100644
index 000000000000..1eab41fd65bd
--- /dev/null
+++ b/packages/upgrade/src/common/component_info.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 `PropertyBinding` represents a mapping between a property name
+ * and an attribute name. It is parsed from a string of the form
+ * `"prop: attr"`; or simply `"propAndAttr" where the property
+ * and attribute have the same identifier.
+ */
+export class PropertyBinding {
+  // TODO(issue/24571): remove '!'.
+  bracketAttr !: string;
+  // TODO(issue/24571): remove '!'.
+  bracketParenAttr !: string;
+  // TODO(issue/24571): remove '!'.
+  parenAttr !: string;
+  // TODO(issue/24571): remove '!'.
+  onAttr !: string;
+  // TODO(issue/24571): remove '!'.
+  bindAttr !: string;
+  // TODO(issue/24571): remove '!'.
+  bindonAttr !: string;
+
+  constructor(public prop: string, public attr: string) { this.parseBinding(); }
+
+  private parseBinding() {
+    this.bracketAttr = `[${this.attr}]`;
+    this.parenAttr = `(${this.attr})`;
+    this.bracketParenAttr = `[(${this.attr})]`;
+    const capitalAttr = this.attr.charAt(0).toUpperCase() + this.attr.substr(1);
+    this.onAttr = `on${capitalAttr}`;
+    this.bindAttr = `bind${capitalAttr}`;
+    this.bindonAttr = `bindon${capitalAttr}`;
+  }
+}
diff --git a/packages/upgrade/src/common/constants.ts b/packages/upgrade/src/common/constants.ts
new file mode 100644
index 000000000000..207d3867be85
--- /dev/null
+++ b/packages/upgrade/src/common/constants.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
+ */
+
+export const $COMPILE = '$compile';
+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';
+export const $SCOPE = '$scope';
+export const $TEMPLATE_CACHE = '$templateCache';
+export const $TEMPLATE_REQUEST = '$templateRequest';
+
+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;
+export const REQUIRE_NG_MODEL = '?ngModel';
+
+export const UPGRADE_MODULE_NAME = '$$UpgradeModule';
diff --git a/packages/upgrade/src/common/downgrade_component.ts b/packages/upgrade/src/common/downgrade_component.ts
new file mode 100644
index 000000000000..f536ca235b69
--- /dev/null
+++ b/packages/upgrade/src/common/downgrade_component.ts
@@ -0,0 +1,201 @@
+/**
+ * @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 {ComponentFactory, ComponentFactoryResolver, Injector, NgZone, Type} from '@angular/core';
+
+import * as angular from './angular1';
+import {$COMPILE, $INJECTOR, $PARSE, INJECTOR_KEY, LAZY_MODULE_REF, REQUIRE_INJECTOR, REQUIRE_NG_MODEL} from './constants';
+import {DowngradeComponentAdapter} from './downgrade_component_adapter';
+import {LazyModuleRef, controllerKey, getComponentName, isFunction} from './util';
+
+
+interface Thenable<T> {
+  then(callback: (value: T) => any): any;
+}
+
+/**
+ * @description
+ *
+ * A helper function that allows an Angular component to be used from AngularJS.
+ *
+ * *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
+ * library for hybrid upgrade apps that support AoT compilation*
+ *
+ * This helper function returns a factory function to be used for registering
+ * an AngularJS wrapper directive for "downgrading" an Angular component.
+ *
+ * ### Examples
+ *
+ * Let's assume that you have an Angular component called `ng2Heroes` that needs
+ * to be made available in AngularJS templates.
+ *
+ * {@example upgrade/static/ts/full/module.ts region="ng2-heroes"}
+ *
+ * We must create an AngularJS [directive](https://docs.angularjs.org/guide/directive)
+ * that will make this Angular component available inside AngularJS templates.
+ * The `downgradeComponent()` function returns a factory function that we
+ * can use to define the AngularJS directive that wraps the "downgraded" component.
+ *
+ * {@example upgrade/static/ts/full/module.ts region="ng2-heroes-wrapper"}
+ *
+ * @param info contains information about the Component that is being downgraded:
+ *
+ * * `component: Type<any>`: The type of the Component that will be downgraded
+ * * `propagateDigest?: boolean`: Whether to perform {@link ChangeDetectorRef#detectChanges
+ *   change detection} on the component on every
+ *   [$digest](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest). If set to `false`,
+ *   change detection will still be performed when any of the component's inputs changes.
+ *   (Default: true)
+ *
+ * @returns a factory function that can be used to register the component in an
+ * AngularJS module.
+ *
+ * @experimental
+ */
+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 */
+  outputs?: string[];
+  /** @deprecated since v4. This parameter is no longer used */
+  selectors?: string[];
+}): any /* angular.IInjectable */ {
+  const directiveFactory:
+      angular.IAnnotatedFunction = function(
+                                       $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',
+      terminal: true,
+      require: [REQUIRE_INJECTOR, REQUIRE_NG_MODEL],
+      link: (scope: angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes,
+             required: any[]) => {
+        // We might have to compile the contents asynchronously, because this might have been
+        // triggered by `UpgradeNg1ComponentAdapterBuilder`, before the Angular templates have
+        // been compiled.
+
+        const ngModel: angular.INgModelController = required[1];
+        let parentInjector: Injector|Thenable<Injector>|undefined = required[0];
+        let ranAsync = false;
+
+        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) !;
+
+          if (!componentFactory) {
+            throw new Error('Expecting ComponentFactory for: ' + getComponentName(info.component));
+          }
+
+          const injectorPromise = new ParentInjectorPromise(element);
+          const facade = new DowngradeComponentAdapter(
+              element, attrs, scope, ngModel, injector, $injector, $compile, $parse,
+              componentFactory, wrapCallback);
+
+          const projectableNodes = facade.compileContents();
+          facade.createComponent(projectableNodes);
+          facade.setupInputs(needsNgZone, info.propagateDigest);
+          facade.setupOutputs();
+          facade.registerCleanup();
+
+          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(() => {});
+          }
+        };
+
+        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;
+      }
+    };
+  };
+
+  // bracket-notation because of closure - see #14441
+  directiveFactory['$inject'] = [$COMPILE, $INJECTOR, $PARSE];
+  return directiveFactory;
+}
+
+/**
+ * Synchronous promise-like object to wrap parent injectors,
+ * to preserve the synchronous nature of Angular 1's $compile.
+ */
+class ParentInjectorPromise {
+  // TODO(issue/24571): remove '!'.
+  private injector !: Injector;
+  private injectorKey: string = controllerKey(INJECTOR_KEY);
+  private callbacks: ((injector: Injector) => any)[] = [];
+
+  constructor(private element: angular.IAugmentedJQuery) {
+    // Store the promise on the element.
+    element.data !(this.injectorKey, this);
+  }
+
+  then(callback: (injector: Injector) => any) {
+    if (this.injector) {
+      callback(this.injector);
+    } else {
+      this.callbacks.push(callback);
+    }
+  }
+
+  resolve(injector: Injector) {
+    this.injector = injector;
+
+    // Store the real injector on the element.
+    this.element.data !(this.injectorKey, injector);
+
+    // Release the element to prevent memory leaks.
+    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
new file mode 100644
index 000000000000..bc41baba8126
--- /dev/null
+++ b/packages/upgrade/src/common/downgrade_component_adapter.ts
@@ -0,0 +1,299 @@
+/**
+ * @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 {ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentRef, EventEmitter, Injector, OnChanges, SimpleChange, SimpleChanges, StaticProvider, Testability, TestabilityRegistry, Type} from '@angular/core';
+
+import * as angular from './angular1';
+import {PropertyBinding} from './component_info';
+import {$SCOPE} from './constants';
+import {getComponentName, hookupNgModel, strictEquals} from './util';
+
+const INITIAL_VALUE = {
+  __UNINITIALIZED__: true
+};
+
+export class DowngradeComponentAdapter {
+  private implementsOnChanges = false;
+  private inputChangeCount: number = 0;
+  private inputChanges: SimpleChanges = {};
+  private componentScope: angular.IScope;
+  // TODO(issue/24571): remove '!'.
+  private componentRef !: ComponentRef<any>;
+  private component: any;
+  // TODO(issue/24571): remove '!'.
+  private changeDetector !: ChangeDetectorRef;
+  // TODO(issue/24571): remove '!'.
+  private viewChangeDetector !: ChangeDetectorRef;
+
+  constructor(
+      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 wrapCallback: <T>(cb: () => T) => () => T) {
+    this.componentScope = scope.$new();
+  }
+
+  compileContents(): Node[][] {
+    const compiledProjectableNodes: Node[][] = [];
+    const projectableNodes: Node[][] = this.groupProjectableNodes();
+    const linkFns = projectableNodes.map(nodes => this.$compile(nodes));
+
+    this.element.empty !();
+
+    linkFns.forEach(linkFn => {
+      linkFn(this.scope, (clone: Node[]) => {
+        compiledProjectableNodes.push(clone);
+        this.element.append !(clone);
+      });
+    });
+
+    return compiledProjectableNodes;
+  }
+
+  createComponent(projectableNodes: Node[][]) {
+    const providers: StaticProvider[] = [{provide: $SCOPE, useValue: this.componentScope}];
+    const childInjector = Injector.create(
+        {providers: providers, parent: this.parentInjector, name: 'DowngradeComponentAdapter'});
+
+    this.componentRef =
+        this.componentFactory.create(childInjector, projectableNodes, this.element[0]);
+    this.viewChangeDetector = this.componentRef.injector.get(ChangeDetectorRef);
+    this.changeDetector = this.componentRef.changeDetectorRef;
+    this.component = this.componentRef.instance;
+
+    // testability hook is commonly added during component bootstrap in
+    // packages/core/src/application_ref.bootstrap()
+    // in downgraded application, component creation will take place here as well as adding the
+    // testability hook.
+    const testability = this.componentRef.injector.get(Testability, null);
+    if (testability) {
+      this.componentRef.injector.get(TestabilityRegistry)
+          .registerApplication(this.componentRef.location.nativeElement, testability);
+    }
+
+    hookupNgModel(this.ngModel, this.component);
+  }
+
+  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: string|null = null;
+
+      if (attrs.hasOwnProperty(input.attr)) {
+        const observeFn = (prop => {
+          let prevValue = INITIAL_VALUE;
+          return (currValue: any) => {
+            // 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;
+            }
+          };
+        })(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[input.bindAttr];
+      } else if (attrs.hasOwnProperty(input.bracketAttr)) {
+        expr = attrs[input.bracketAttr];
+      } else if (attrs.hasOwnProperty(input.bindonAttr)) {
+        expr = attrs[input.bindonAttr];
+      } else if (attrs.hasOwnProperty(input.bracketParenAttr)) {
+        expr = attrs[input.bracketParenAttr];
+      }
+      if (expr != null) {
+        const watchFn =
+            (prop => (currValue: any, prevValue: any) =>
+                 this.updateInput(prop, prevValue, currValue))(input.prop);
+        this.componentScope.$watch(expr, watchFn);
+      }
+    }
+
+    // Invoke `ngOnChanges()` and Change Detection (when necessary)
+    const detectChanges = () => this.changeDetector.detectChanges();
+    const prototype = this.componentFactory.componentType.prototype;
+    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 !);
+      }
+
+      this.viewChangeDetector.markForCheck();
+
+      // 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));
+    }
+
+    // If necessary, attach the view so that it will be dirty-checked.
+    // (Allow time for the initial input values to be set and `ngOnChanges()` to be called.)
+    if (needsNgZone || !propagateDigest) {
+      let unwatch: Function|null = this.componentScope.$watch(() => {
+        unwatch !();
+        unwatch = null;
+
+        const appRef = this.parentInjector.get<ApplicationRef>(ApplicationRef);
+        appRef.attachView(this.componentRef.hostView);
+      });
+    }
+  }
+
+  setupOutputs() {
+    const attrs = this.attrs;
+    const outputs = this.componentFactory.outputs || [];
+    for (let j = 0; j < outputs.length; j++) {
+      const output = new PropertyBinding(outputs[j].propName, outputs[j].templateName);
+      const bindonAttr = output.bindonAttr.substring(0, output.bindonAttr.length - 6);
+      const bracketParenAttr =
+          `[(${output.bracketParenAttr.substring(2, output.bracketParenAttr.length - 8)})]`;
+      // order below is important - first update bindings then evaluate expressions
+      if (attrs.hasOwnProperty(bindonAttr)) {
+        this.subscribeToOutput(output, attrs[bindonAttr], true);
+      }
+      if (attrs.hasOwnProperty(bracketParenAttr)) {
+        this.subscribeToOutput(output, attrs[bracketParenAttr], true);
+      }
+      if (attrs.hasOwnProperty(output.onAttr)) {
+        this.subscribeToOutput(output, attrs[output.onAttr]);
+      }
+      if (attrs.hasOwnProperty(output.parenAttr)) {
+        this.subscribeToOutput(output, attrs[output.parenAttr]);
+      }
+    }
+  }
+
+  private subscribeToOutput(output: PropertyBinding, expr: string, isAssignment: boolean = false) {
+    const getter = this.$parse(expr);
+    const setter = getter.assign;
+    if (isAssignment && !setter) {
+      throw new Error(`Expression '${expr}' is not assignable!`);
+    }
+    const emitter = this.component[output.prop] as EventEmitter<any>;
+    if (emitter) {
+      emitter.subscribe({
+        next: isAssignment ? (v: any) => setter !(this.scope, v) :
+                             (v: any) => getter(this.scope, {'$event': v})
+      });
+    } else {
+      throw new Error(
+          `Missing emitter '${output.prop}' on component '${getComponentName(this.componentFactory.componentType)}'!`);
+    }
+  }
+
+  registerCleanup() {
+    const destroyComponentRef = this.wrapCallback(() => this.componentRef.destroy());
+    let destroyed = false;
+
+    this.element.on !('$destroy', () => this.componentScope.$destroy());
+    this.componentScope.$on('$destroy', () => {
+      if (!destroyed) {
+        destroyed = true;
+        this.componentRef.injector.get(TestabilityRegistry)
+            .unregisterApplication(this.componentRef.location.nativeElement);
+        destroyComponentRef();
+      }
+    });
+  }
+
+  getInjector(): Injector { return this.componentRef.injector; }
+
+  private updateInput(prop: string, prevValue: any, currValue: any) {
+    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 !());
+  }
+}
+
+/**
+ * Group a set of DOM nodes into `ngContent` groups, based on the given content selectors.
+ */
+export function groupNodesBySelector(ngContentSelectors: string[], nodes: Node[]): Node[][] {
+  const projectableNodes: Node[][] = [];
+  let wildcardNgContentIndex: number;
+
+  for (let i = 0, ii = ngContentSelectors.length; i < ii; ++i) {
+    projectableNodes[i] = [];
+  }
+
+  for (let j = 0, jj = nodes.length; j < jj; ++j) {
+    const node = nodes[j];
+    const ngContentIndex = findMatchingNgContentIndex(node, ngContentSelectors);
+    if (ngContentIndex != null) {
+      projectableNodes[ngContentIndex].push(node);
+    }
+  }
+
+  return projectableNodes;
+}
+
+function findMatchingNgContentIndex(element: any, ngContentSelectors: string[]): number|null {
+  const ngContentIndices: number[] = [];
+  let wildcardNgContentIndex: number = -1;
+  for (let i = 0; i < ngContentSelectors.length; i++) {
+    const selector = ngContentSelectors[i];
+    if (selector === '*') {
+      wildcardNgContentIndex = i;
+    } else {
+      if (matchesSelector(element, selector)) {
+        ngContentIndices.push(i);
+      }
+    }
+  }
+  ngContentIndices.sort();
+
+  if (wildcardNgContentIndex !== -1) {
+    ngContentIndices.push(wildcardNgContentIndex);
+  }
+  return ngContentIndices.length ? ngContentIndices[0] : null;
+}
+
+let _matches: (this: any, selector: string) => boolean;
+
+function matchesSelector(el: any, selector: string): boolean {
+  if (!_matches) {
+    const elProto = <any>Element.prototype;
+    _matches = elProto.matches || elProto.matchesSelector || elProto.mozMatchesSelector ||
+        elProto.msMatchesSelector || elProto.oMatchesSelector || elProto.webkitMatchesSelector;
+  }
+  return el.nodeType === Node.ELEMENT_NODE ? _matches.call(el, selector) : false;
+}
diff --git a/packages/upgrade/src/common/downgrade_injectable.ts b/packages/upgrade/src/common/downgrade_injectable.ts
new file mode 100644
index 000000000000..c763067eb23c
--- /dev/null
+++ b/packages/upgrade/src/common/downgrade_injectable.ts
@@ -0,0 +1,57 @@
+/**
+ * @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 '@angular/core';
+import {INJECTOR_KEY} from './constants';
+
+/**
+ * @description
+ *
+ * A helper function to allow an Angular service to be accessible from AngularJS.
+ *
+ * *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
+ * library for hybrid upgrade apps that support AoT compilation*
+ *
+ * This helper function returns a factory function that provides access to the Angular
+ * service identified by the `token` parameter.
+ *
+ * ### Examples
+ *
+ * First ensure that the service to be downgraded is provided in an `NgModule`
+ * that will be part of the upgrade application. For example, let's assume we have
+ * defined `HeroesService`
+ *
+ * {@example upgrade/static/ts/full/module.ts region="ng2-heroes-service"}
+ *
+ * and that we have included this in our upgrade app `NgModule`
+ *
+ * {@example upgrade/static/ts/full/module.ts region="ng2-module"}
+ *
+ * Now we can register the `downgradeInjectable` factory function for the service
+ * on an AngularJS module.
+ *
+ * {@example upgrade/static/ts/full/module.ts region="downgrade-ng2-heroes-service"}
+ *
+ * Inside an AngularJS component's controller we can get hold of the
+ * downgraded service via the name we gave when downgrading.
+ *
+ * {@example upgrade/static/ts/full/module.ts region="example-app"}
+ *
+ * @param token an `InjectionToken` that identifies a service provided from Angular.
+ *
+ * @returns a [factory function](https://docs.angularjs.org/guide/di) that can be
+ * used to register the service on an AngularJS module.
+ *
+ * @experimental
+ */
+export function downgradeInjectable(token: any): Function {
+  const factory = function(i: Injector) { return i.get(token); };
+  (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 000000000000..c31ba7eb1c5d
--- /dev/null
+++ b/packages/upgrade/src/common/upgrade_helper.ts
@@ -0,0 +1,300 @@
+/**
+ * @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();
+    const attachChildrenFn: angular.ILinkFn = (scope, cloneAttachFn) => {
+      // Since AngularJS v1.5.8, `cloneAttachFn` will try to destroy the transclusion scope if
+      // `$template` is empty. Since the transcluded content comes from Angular, not AngularJS,
+      // there will be no transclusion scope here.
+      // Provide a dummy `scope.$destroy()` method to prevent `cloneAttachFn` from throwing.
+      scope = scope || {$destroy: () => undefined};
+      return cloneAttachFn !($template, scope);
+    };
+    let $template = contentChildNodes;
+
+    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
new file mode 100644
index 000000000000..d505aec20c86
--- /dev/null
+++ b/packages/upgrade/src/common/util.ts
@@ -0,0 +1,96 @@
+/**
+ * @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, 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) {
+    console.error(e, e.stack);
+  } else {
+    // tslint:disable-next-line:no-console
+    console.log(e, e.stack);
+  }
+  throw e;
+}
+
+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 getComponentName(component: Type<any>): string {
+  // Return the name of the component or the first line of its stringified version.
+  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>;
+  // TODO(issue/24571): remove '!'.
+  resolve !: (value?: R | PromiseLike<R>) => void;
+  // TODO(issue/24571): remove '!'.
+  reject !: (error?: any) => void;
+
+  constructor() {
+    this.promise = new Promise((res, rej) => {
+      this.resolve = res;
+      this.reject = rej;
+    });
+  }
+}
+
+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`
+ *     compatibility.
+ */
+function supportsNgModel(component: any) {
+  return typeof component.writeValue === 'function' &&
+      typeof component.registerOnChange === 'function';
+}
+
+/**
+ * Glue the AngularJS `NgModelController` (if it exists) to the component
+ * (if it implements the needed subset of the `ControlValueAccessor` interface).
+ */
+export function hookupNgModel(ngModel: angular.INgModelController, component: any) {
+  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/common/version.ts b/packages/upgrade/src/common/version.ts
new file mode 100644
index 000000000000..af66f0fa278a
--- /dev/null
+++ b/packages/upgrade/src/common/version.ts
@@ -0,0 +1,17 @@
+/**
+ * @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 common package.
+ */
+
+import {Version} from '@angular/core';
+
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/upgrade/src/dynamic/upgrade_adapter.ts b/packages/upgrade/src/dynamic/upgrade_adapter.ts
new file mode 100644
index 000000000000..cc16325dc18f
--- /dev/null
+++ b/packages/upgrade/src/dynamic/upgrade_adapter.ts
@@ -0,0 +1,687 @@
+/**
+ * @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 {Compiler, CompilerOptions, Directive, Injector, NgModule, NgModuleRef, NgZone, StaticProvider, Testability, Type} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import * as angular from '../common/angular1';
+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, LazyModuleRef, controllerKey, onError} from '../common/util';
+
+import {UpgradeNg1ComponentAdapterBuilder} from './upgrade_ng1_adapter';
+
+let upgradeCount: number = 0;
+
+/**
+ * Use `UpgradeAdapter` to allow AngularJS and Angular to coexist in a single application.
+ *
+ * The `UpgradeAdapter` allows:
+ * 1. creation of Angular component from AngularJS component directive
+ *    (See [UpgradeAdapter#upgradeNg1Component()])
+ * 2. creation of AngularJS directive from Angular component.
+ *    (See [UpgradeAdapter#downgradeNg2Component()])
+ * 3. Bootstrapping of a hybrid Angular application which contains both of the frameworks
+ *    coexisting in a single application.
+ *
+ * ## Mental Model
+ *
+ * When reasoning about how a hybrid application works it is useful to have a mental model which
+ * describes what is happening and explains what is happening at the lowest level.
+ *
+ * 1. There are two independent frameworks running in a single application, each framework treats
+ *    the other as a black box.
+ * 2. Each DOM element on the page is owned exactly by one framework. Whichever framework
+ *    instantiated the element is the owner. Each framework only updates/interacts with its own
+ *    DOM elements and ignores others.
+ * 3. AngularJS directives always execute inside AngularJS framework codebase regardless of
+ *    where they are instantiated.
+ * 4. Angular components always execute inside Angular framework codebase regardless of
+ *    where they are instantiated.
+ * 5. An AngularJS component can be upgraded to an Angular component. This creates an
+ *    Angular directive, which bootstraps the AngularJS component directive in that location.
+ * 6. An Angular component can be downgraded to an AngularJS component directive. This creates
+ *    an AngularJS directive, which bootstraps the Angular component in that location.
+ * 7. Whenever an adapter component is instantiated the host element is owned by the framework
+ *    doing the instantiation. The other framework then instantiates and owns the view for that
+ *    component. This implies that component bindings will always follow the semantics of the
+ *    instantiation framework. The syntax is always that of Angular syntax.
+ * 8. AngularJS is always bootstrapped first and owns the bottom most view.
+ * 9. The new application is running in Angular zone, and therefore it no longer needs calls to
+ *    `$apply()`.
+ *
+ * ### Example
+ *
+ * ```
+ * const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module), myCompilerOptions);
+ * const module = angular.module('myExample', []);
+ * module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2Component));
+ *
+ * module.directive('ng1Hello', function() {
+ *   return {
+ *      scope: { title: '=' },
+ *      template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
+ *   };
+ * });
+ *
+ *
+ * @Component({
+ *   selector: 'ng2-comp',
+ *   inputs: ['name'],
+ *   template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
+ *   directives:
+ * })
+ * class Ng2Component {
+ * }
+ *
+ * @NgModule({
+ *   declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
+ *   imports: [BrowserModule]
+ * })
+ * class MyNg2Module {}
+ *
+ *
+ * document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';
+ *
+ * adapter.bootstrap(document.body, ['myExample']).ready(function() {
+ *   expect(document.body.textContent).toEqual(
+ *       "ng2[ng1[Hello World!](transclude)](project)");
+ * });
+ *
+ * ```
+ *
+ * @deprecated Deprecated since v5. Use `upgrade/static` instead, which also supports
+ * [Ahead-of-Time compilation](guide/aot-compiler).
+ */
+export class UpgradeAdapter {
+  private idPrefix: string = `NG2_UPGRADE_${upgradeCount++}_`;
+  private downgradedComponents: Type<any>[] = [];
+  /**
+   * An internal map of ng1 components which need to up upgraded to ng2.
+   *
+   * We can't upgrade until injector is instantiated and we can retrieve the component metadata.
+   * For this reason we keep a list of components to upgrade until ng1 injector is bootstrapped.
+   *
+   * @internal
+   */
+  private ng1ComponentsToBeUpgraded: {[name: string]: UpgradeNg1ComponentAdapterBuilder} = {};
+  private upgradedProviders: StaticProvider[] = [];
+  // TODO(issue/24571): remove '!'.
+  private ngZone !: NgZone;
+  // TODO(issue/24571): remove '!'.
+  private ng1Module !: angular.IModule;
+  private moduleRef: NgModuleRef<any>|null = null;
+  // TODO(issue/24571): remove '!'.
+  private ng2BootstrapDeferred !: Deferred<angular.IInjectorService>;
+
+  constructor(private ng2AppModule: Type<any>, private compilerOptions?: CompilerOptions) {
+    if (!ng2AppModule) {
+      throw new Error(
+          'UpgradeAdapter cannot be instantiated without an NgModule of the Angular app.');
+    }
+  }
+
+  /**
+   * Allows Angular Component to be used from AngularJS.
+   *
+   * Use `downgradeNg2Component` to create an AngularJS Directive Definition Factory from
+   * Angular Component. The adapter will bootstrap Angular component from within the
+   * AngularJS template.
+   *
+   * ## Mental Model
+   *
+   * 1. The component is instantiated by being listed in AngularJS template. This means that the
+   *    host element is controlled by AngularJS, but the component's view will be controlled by
+   *    Angular.
+   * 2. Even thought the component is instantiated in AngularJS, it will be using Angular
+   *    syntax. This has to be done, this way because we must follow Angular components do not
+   *    declare how the attributes should be interpreted.
+   * 3. `ng-model` is controlled by AngularJS and communicates with the downgraded Angular component
+   *    by way of the `ControlValueAccessor` interface from @angular/forms. Only components that
+   *    implement this interface are eligible.
+   *
+   * ## Supported Features
+   *
+   * - Bindings:
+   *   - Attribute: `<comp name="World">`
+   *   - Interpolation:  `<comp greeting="Hello {{name}}!">`
+   *   - Expression:  `<comp [name]="username">`
+   *   - Event:  `<comp (close)="doSomething()">`
+   *   - ng-model: `<comp ng-model="name">`
+   * - Content projection: yes
+   *
+   * ### Example
+   *
+   * ```
+   * const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
+   * const module = angular.module('myExample', []);
+   * module.directive('greet', adapter.downgradeNg2Component(Greeter));
+   *
+   * @Component({
+   *   selector: 'greet',
+   *   template: '{{salutation}} {{name}}! - <ng-content></ng-content>'
+   * })
+   * class Greeter {
+   *   @Input() salutation: string;
+   *   @Input() name: string;
+   * }
+   *
+   * @NgModule({
+   *   declarations: [Greeter],
+   *   imports: [BrowserModule]
+   * })
+   * class MyNg2Module {}
+   *
+   * document.body.innerHTML =
+   *   'ng1 template: <greet salutation="Hello" [name]="world">text</greet>';
+   *
+   * adapter.bootstrap(document.body, ['myExample']).ready(function() {
+   *   expect(document.body.textContent).toEqual("ng1 template: Hello world! - text");
+   * });
+   * ```
+   */
+  downgradeNg2Component(component: Type<any>): Function {
+    this.downgradedComponents.push(component);
+
+    return downgradeComponent({component});
+  }
+
+  /**
+   * Allows AngularJS Component to be used from Angular.
+   *
+   * Use `upgradeNg1Component` to create an Angular component from AngularJS Component
+   * directive. The adapter will bootstrap AngularJS component from within the Angular
+   * template.
+   *
+   * ## Mental Model
+   *
+   * 1. The component is instantiated by being listed in Angular template. This means that the
+   *    host element is controlled by Angular, but the component's view will be controlled by
+   *    AngularJS.
+   *
+   * ## Supported Features
+   *
+   * - Bindings:
+   *   - Attribute: `<comp name="World">`
+   *   - Interpolation:  `<comp greeting="Hello {{name}}!">`
+   *   - Expression:  `<comp [name]="username">`
+   *   - Event:  `<comp (close)="doSomething()">`
+   * - Transclusion: yes
+   * - Only some of the features of
+   *   [Directive Definition Object](https://docs.angularjs.org/api/ng/service/$compile) are
+   *   supported:
+   *   - `compile`: not supported because the host element is owned by Angular, which does
+   *     not allow modifying DOM structure during compilation.
+   *   - `controller`: supported. (NOTE: injection of `$attrs` and `$transclude` is not supported.)
+   *   - `controllerAs`: supported.
+   *   - `bindToController`: supported.
+   *   - `link`: supported. (NOTE: only pre-link function is supported.)
+   *   - `name`: supported.
+   *   - `priority`: ignored.
+   *   - `replace`: not supported.
+   *   - `require`: supported.
+   *   - `restrict`: must be set to 'E'.
+   *   - `scope`: supported.
+   *   - `template`: supported.
+   *   - `templateUrl`: supported.
+   *   - `terminal`: ignored.
+   *   - `transclude`: supported.
+   *
+   *
+   * ### Example
+   *
+   * ```
+   * const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
+   * const module = angular.module('myExample', []);
+   *
+   * module.directive('greet', function() {
+   *   return {
+   *     scope: {salutation: '=', name: '=' },
+   *     template: '{{salutation}} {{name}}! - <span ng-transclude></span>'
+   *   };
+   * });
+   *
+   * module.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+   *
+   * @Component({
+   *   selector: 'ng2',
+   *   template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'
+   * })
+   * class Ng2Component {
+   * }
+   *
+   * @NgModule({
+   *   declarations: [Ng2Component, adapter.upgradeNg1Component('greet')],
+   *   imports: [BrowserModule]
+   * })
+   * class MyNg2Module {}
+   *
+   * document.body.innerHTML = '<ng2></ng2>';
+   *
+   * adapter.bootstrap(document.body, ['myExample']).ready(function() {
+   *   expect(document.body.textContent).toEqual("ng2 template: Hello world! - text");
+   * });
+   * ```
+   */
+  upgradeNg1Component(name: string): Type<any> {
+    if ((<any>this.ng1ComponentsToBeUpgraded).hasOwnProperty(name)) {
+      return this.ng1ComponentsToBeUpgraded[name].type;
+    } else {
+      return (this.ng1ComponentsToBeUpgraded[name] = new UpgradeNg1ComponentAdapterBuilder(name))
+          .type;
+    }
+  }
+
+  /**
+   * Registers the adapter's AngularJS upgrade module for unit testing in AngularJS.
+   * Use this instead of `angular.mock.module()` to load the upgrade module into
+   * the AngularJS testing injector.
+   *
+   * ### Example
+   *
+   * ```
+   * const upgradeAdapter = new UpgradeAdapter(MyNg2Module);
+   *
+   * // configure the adapter with upgrade/downgrade components and services
+   * upgradeAdapter.downgradeNg2Component(MyComponent);
+   *
+   * let upgradeAdapterRef: UpgradeAdapterRef;
+   * let $compile, $rootScope;
+   *
+   * // We must register the adapter before any calls to `inject()`
+   * beforeEach(() => {
+   *   upgradeAdapterRef = upgradeAdapter.registerForNg1Tests(['heroApp']);
+   * });
+   *
+   * beforeEach(inject((_$compile_, _$rootScope_) => {
+   *   $compile = _$compile_;
+   *   $rootScope = _$rootScope_;
+   * }));
+   *
+   * it("says hello", (done) => {
+   *   upgradeAdapterRef.ready(() => {
+   *     const element = $compile("<my-component></my-component>")($rootScope);
+   *     $rootScope.$apply();
+   *     expect(element.html()).toContain("Hello World");
+   *     done();
+   *   })
+   * });
+   *
+   * ```
+   *
+   * @param modules any AngularJS modules that the upgrade module should depend upon
+   * @returns an `UpgradeAdapterRef`, which lets you register a `ready()` callback to
+   * run assertions once the Angular components are ready to test through AngularJS.
+   */
+  registerForNg1Tests(modules?: string[]): UpgradeAdapterRef {
+    const windowNgMock = (window as any)['angular'].mock;
+    if (!windowNgMock || !windowNgMock.module) {
+      throw new Error('Failed to find \'angular.mock.module\'.');
+    }
+    this.declareNg1Module(modules);
+    windowNgMock.module(this.ng1Module.name);
+    const upgrade = new UpgradeAdapterRef();
+    this.ng2BootstrapDeferred.promise.then(
+        (ng1Injector) => { (<any>upgrade)._bootstrapDone(this.moduleRef, ng1Injector); }, onError);
+    return upgrade;
+  }
+
+  /**
+   * Bootstrap a hybrid AngularJS / Angular application.
+   *
+   * This `bootstrap` method is a direct replacement (takes same arguments) for AngularJS
+   * [`bootstrap`](https://docs.angularjs.org/api/ng/function/angular.bootstrap) method. Unlike
+   * AngularJS, this bootstrap is asynchronous.
+   *
+   * ### Example
+   *
+   * ```
+   * const adapter = new UpgradeAdapter(MyNg2Module);
+   * const module = angular.module('myExample', []);
+   * module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+   *
+   * module.directive('ng1', function() {
+   *   return {
+   *      scope: { title: '=' },
+   *      template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
+   *   };
+   * });
+   *
+   *
+   * @Component({
+   *   selector: 'ng2',
+   *   inputs: ['name'],
+   *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
+   * })
+   * class Ng2 {
+   * }
+   *
+   * @NgModule({
+   *   declarations: [Ng2, adapter.upgradeNg1Component('ng1')],
+   *   imports: [BrowserModule]
+   * })
+   * class MyNg2Module {}
+   *
+   * document.body.innerHTML = '<ng2 name="World">project</ng2>';
+   *
+   * adapter.bootstrap(document.body, ['myExample']).ready(function() {
+   *   expect(document.body.textContent).toEqual(
+   *       "ng2[ng1[Hello World!](transclude)](project)");
+   * });
+   * ```
+   */
+  bootstrap(element: Element, modules?: any[], config?: angular.IAngularBootstrapConfig):
+      UpgradeAdapterRef {
+    this.declareNg1Module(modules);
+
+    const upgrade = new UpgradeAdapterRef();
+
+    // Make sure resumeBootstrap() only exists if the current bootstrap is deferred
+    const windowAngular = (window as any /** TODO #???? */)['angular'];
+    windowAngular.resumeBootstrap = undefined;
+
+    this.ngZone.run(() => { angular.bootstrap(element, [this.ng1Module.name], config !); });
+    const ng1BootstrapPromise = new Promise((resolve) => {
+      if (windowAngular.resumeBootstrap) {
+        const originalResumeBootstrap: () => void = windowAngular.resumeBootstrap;
+        windowAngular.resumeBootstrap = function() {
+          windowAngular.resumeBootstrap = originalResumeBootstrap;
+          const r = windowAngular.resumeBootstrap.apply(this, arguments);
+          resolve();
+          return r;
+        };
+      } else {
+        resolve();
+      }
+    });
+
+    Promise.all([this.ng2BootstrapDeferred.promise, ng1BootstrapPromise]).then(([ng1Injector]) => {
+      angular.element(element).data !(controllerKey(INJECTOR_KEY), this.moduleRef !.injector);
+      this.moduleRef !.injector.get<NgZone>(NgZone).run(
+          () => { (<any>upgrade)._bootstrapDone(this.moduleRef, ng1Injector); });
+    }, onError);
+    return upgrade;
+  }
+
+  /**
+   * Allows AngularJS service to be accessible from Angular.
+   *
+   *
+   * ### Example
+   *
+   * ```
+   * class Login { ... }
+   * class Server { ... }
+   *
+   * @Injectable()
+   * class Example {
+   *   constructor(@Inject('server') server, login: Login) {
+   *     ...
+   *   }
+   * }
+   *
+   * const module = angular.module('myExample', []);
+   * module.service('server', Server);
+   * module.service('login', Login);
+   *
+   * const adapter = new UpgradeAdapter(MyNg2Module);
+   * adapter.upgradeNg1Provider('server');
+   * adapter.upgradeNg1Provider('login', {asToken: Login});
+   *
+   * adapter.bootstrap(document.body, ['myExample']).ready((ref) => {
+   *   const example: Example = ref.ng2Injector.get(Example);
+   * });
+   *
+   * ```
+   */
+  upgradeNg1Provider(name: string, options?: {asToken: any}) {
+    const token = options && options.asToken || name;
+    this.upgradedProviders.push({
+      provide: token,
+      useFactory: ($injector: angular.IInjectorService) => $injector.get(name),
+      deps: [$INJECTOR]
+    });
+  }
+
+  /**
+   * Allows Angular service to be accessible from AngularJS.
+   *
+   *
+   * ### Example
+   *
+   * ```
+   * class Example {
+   * }
+   *
+   * const adapter = new UpgradeAdapter(MyNg2Module);
+   *
+   * const module = angular.module('myExample', []);
+   * module.factory('example', adapter.downgradeNg2Provider(Example));
+   *
+   * adapter.bootstrap(document.body, ['myExample']).ready((ref) => {
+   *   const example: Example = ref.ng1Injector.get('example');
+   * });
+   *
+   * ```
+   */
+  downgradeNg2Provider(token: any): Function { return downgradeInjectable(token); }
+
+  /**
+   * Declare the AngularJS upgrade module for this adapter without bootstrapping the whole
+   * hybrid application.
+   *
+   * This method is automatically called by `bootstrap()` and `registerForNg1Tests()`.
+   *
+   * @param modules The AngularJS modules that this upgrade module should depend upon.
+   * @returns The AngularJS upgrade module that is declared by this method
+   *
+   * ### Example
+   *
+   * ```
+   * const upgradeAdapter = new UpgradeAdapter(MyNg2Module);
+   * upgradeAdapter.declareNg1Module(['heroApp']);
+   * ```
+   */
+  private declareNg1Module(modules: string[] = []): angular.IModule {
+    const delayApplyExps: Function[] = [];
+    let original$applyFn: Function;
+    let rootScopePrototype: any;
+    let rootScope: angular.IRootScopeService;
+    const upgradeAdapter = this;
+    const ng1Module = this.ng1Module = angular.module(this.idPrefix, modules);
+    const platformRef = platformBrowserDynamic();
+
+    this.ngZone = new NgZone({enableLongStackTrace: Zone.hasOwnProperty('longStackTraceZoneSpec')});
+    this.ng2BootstrapDeferred = new Deferred();
+    ng1Module.factory(INJECTOR_KEY, () => this.moduleRef !.injector.get(Injector))
+        .factory(
+            LAZY_MODULE_REF,
+            [
+              INJECTOR_KEY,
+              (injector: Injector) => ({ injector, needsNgZone: false } as LazyModuleRef)
+            ])
+        .constant(NG_ZONE_KEY, this.ngZone)
+        .factory(COMPILER_KEY, () => this.moduleRef !.injector.get(Compiler))
+        .config([
+          '$provide', '$injector',
+          (provide: angular.IProvideService, ng1Injector: angular.IInjectorService) => {
+            provide.decorator($ROOT_SCOPE, [
+              '$delegate',
+              function(rootScopeDelegate: angular.IRootScopeService) {
+                // Capture the root apply so that we can delay first call to $apply until we
+                // bootstrap Angular and then we replay and restore the $apply.
+                rootScopePrototype = rootScopeDelegate.constructor.prototype;
+                if (rootScopePrototype.hasOwnProperty('$apply')) {
+                  original$applyFn = rootScopePrototype.$apply;
+                  rootScopePrototype.$apply = (exp: any) => delayApplyExps.push(exp);
+                } else {
+                  throw new Error('Failed to find \'$apply\' on \'$rootScope\'!');
+                }
+                return rootScope = rootScopeDelegate;
+              }
+            ]);
+            if (ng1Injector.has($$TESTABILITY)) {
+              provide.decorator($$TESTABILITY, [
+                '$delegate',
+                function(testabilityDelegate: angular.ITestabilityService) {
+                  const originalWhenStable: Function = testabilityDelegate.whenStable;
+                  // Cannot use arrow function below because we need the context
+                  const newWhenStable = function(callback: Function) {
+                    originalWhenStable.call(this, function() {
+                      const ng2Testability: Testability =
+                          upgradeAdapter.moduleRef !.injector.get(Testability);
+                      if (ng2Testability.isStable()) {
+                        callback.apply(this, arguments);
+                      } else {
+                        ng2Testability.whenStable(newWhenStable.bind(this, callback));
+                      }
+                    });
+                  };
+
+                  testabilityDelegate.whenStable = newWhenStable;
+                  return testabilityDelegate;
+                }
+              ]);
+            }
+          }
+        ]);
+
+    ng1Module.run([
+      '$injector', '$rootScope',
+      (ng1Injector: angular.IInjectorService, rootScope: angular.IRootScopeService) => {
+        UpgradeNg1ComponentAdapterBuilder.resolve(this.ng1ComponentsToBeUpgraded, ng1Injector)
+            .then(() => {
+              // Note: There is a bug in TS 2.4 that prevents us from
+              // inlining this into @NgModule
+              // TODO(tbosch): find or file a bug against TypeScript for this.
+              const ngModule = {
+                providers: [
+                  {provide: $INJECTOR, useFactory: () => ng1Injector},
+                  {provide: $COMPILE, useFactory: () => ng1Injector.get($COMPILE)},
+                  this.upgradedProviders
+                ],
+                imports: [this.ng2AppModule],
+                entryComponents: this.downgradedComponents
+              };
+              // At this point we have ng1 injector and we have prepared
+              // ng1 components to be upgraded, we now can bootstrap ng2.
+              @NgModule({jit: true, ...ngModule})
+              class DynamicNgUpgradeModule {
+                constructor() {}
+                ngDoBootstrap() {}
+              }
+              platformRef
+                  .bootstrapModule(
+                      DynamicNgUpgradeModule, [this.compilerOptions !, {ngZone: this.ngZone}])
+                  .then((ref: NgModuleRef<any>) => {
+                    this.moduleRef = ref;
+                    this.ngZone.run(() => {
+                      if (rootScopePrototype) {
+                        rootScopePrototype.$apply = original$applyFn;  // restore original $apply
+                        while (delayApplyExps.length) {
+                          rootScope.$apply(delayApplyExps.shift());
+                        }
+                        rootScopePrototype = null;
+                      }
+                    });
+                  })
+                  .then(() => this.ng2BootstrapDeferred.resolve(ng1Injector), onError)
+                  .then(() => {
+                    let subscription =
+                        this.ngZone.onMicrotaskEmpty.subscribe({next: () => rootScope.$digest()});
+                    rootScope.$on('$destroy', () => { subscription.unsubscribe(); });
+                  });
+            })
+            .catch((e) => this.ng2BootstrapDeferred.reject(e));
+      }
+    ]);
+
+    return ng1Module;
+  }
+}
+
+/**
+ * Synchronous promise-like object to wrap parent injectors,
+ * to preserve the synchronous nature of AngularJS's $compile.
+ */
+class ParentInjectorPromise {
+  // TODO(issue/24571): remove '!'.
+  private injector !: Injector;
+  private callbacks: ((injector: Injector) => any)[] = [];
+
+  constructor(private element: angular.IAugmentedJQuery) {
+    // store the promise on the element
+    element.data !(controllerKey(INJECTOR_KEY), this);
+  }
+
+  then(callback: (injector: Injector) => any) {
+    if (this.injector) {
+      callback(this.injector);
+    } else {
+      this.callbacks.push(callback);
+    }
+  }
+
+  resolve(injector: Injector) {
+    this.injector = injector;
+
+    // reset the element data to point to the real injector
+    this.element.data !(controllerKey(INJECTOR_KEY), injector);
+
+    // clean out the element to prevent memory leaks
+    this.element = null !;
+
+    // run all the queued callbacks
+    this.callbacks.forEach((callback) => callback(injector));
+    this.callbacks.length = 0;
+  }
+}
+
+
+/**
+ * Use `UpgradeAdapterRef` to control a hybrid AngularJS / Angular application.
+ *
+ * @deprecated Deprecated since v5. Use `upgrade/static` instead, which also supports
+ * [Ahead-of-Time compilation](guide/aot-compiler).
+ */
+export class UpgradeAdapterRef {
+  /* @internal */
+  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 !;
+
+  /* @internal */
+  private _bootstrapDone(ngModuleRef: NgModuleRef<any>, ng1Injector: angular.IInjectorService) {
+    this.ng2ModuleRef = ngModuleRef;
+    this.ng2Injector = ngModuleRef.injector;
+    this.ng1Injector = ng1Injector;
+    this.ng1RootScope = ng1Injector.get($ROOT_SCOPE);
+    this._readyFn && this._readyFn(this);
+  }
+
+  /**
+   * Register a callback function which is notified upon successful hybrid AngularJS / Angular
+   * application has been bootstrapped.
+   *
+   * 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; }
+
+  /**
+   * Dispose of running hybrid AngularJS / Angular application.
+   */
+  public dispose() {
+    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
new file mode 100644
index 000000000000..b31657bc7b07
--- /dev/null
+++ b/packages/upgrade/src/dynamic/upgrade_ng1_adapter.ts
@@ -0,0 +1,276 @@
+/**
+ * @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 {Directive, DoCheck, ElementRef, EventEmitter, Inject, Injector, OnChanges, OnInit, SimpleChange, SimpleChanges, Type} from '@angular/core';
+
+import * as angular from '../common/angular1';
+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;
+const INITIAL_VALUE = {
+  __UNINITIALIZED__: true
+};
+const NOT_SUPPORTED: any = 'NOT_SUPPORTED';
+
+
+export class UpgradeNg1ComponentAdapterBuilder {
+  // TODO(issue/24571): remove '!'.
+  type !: Type<any>;
+  inputs: string[] = [];
+  inputsRename: string[] = [];
+  outputs: string[] = [];
+  outputsRename: string[] = [];
+  propertyOutputs: string[] = [];
+  checkProperties: string[] = [];
+  propertyMap: {[name: string]: string} = {};
+  directive: angular.IDirective|null = null;
+  // TODO(issue/24571): remove '!'.
+  template !: string;
+
+  constructor(public name: string) {
+    const selector =
+        name.replace(CAMEL_CASE, (all: string, next: string) => '-' + next.toLowerCase());
+    const self = this;
+
+    // Note: There is a bug in TS 2.4 that prevents us from
+    // inlining this into @Directive
+    // TODO(tbosch): find or file a bug against TypeScript for this.
+    const directive = {selector: selector, inputs: this.inputsRename, outputs: this.outputsRename};
+
+    @Directive({jit: true, ...directive})
+    class MyClass {
+      // TODO(issue/24571): remove '!'.
+      directive !: angular.IDirective;
+      constructor(
+          @Inject($SCOPE) scope: angular.IScope, injector: Injector, elementRef: ElementRef) {
+        const helper = new UpgradeHelper(injector, name, elementRef, this.directive);
+        return new UpgradeNg1ComponentAdapter(
+            helper, scope, self.template, self.inputs, self.outputs, self.propertyOutputs,
+            self.checkProperties, self.propertyMap) as any;
+      }
+      ngOnInit() { /* needs to be here for ng2 to properly detect it */
+      }
+      ngOnChanges() { /* needs to be here for ng2 to properly detect it */
+      }
+      ngDoCheck() { /* needs to be here for ng2 to properly detect it */
+      }
+      ngOnDestroy() { /* needs to be here for ng2 to properly detect it */
+      }
+    }
+    this.type = MyClass;
+  }
+
+  extractBindings() {
+    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;
+
+    if (typeof context == 'object') {
+      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;
+
+        // 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.`);
+        }
+      });
+    }
+  }
+
+  /**
+   * Upgrade ng1 components into Angular.
+   */
+  static resolve(
+      exportedComponents: {[name: string]: UpgradeNg1ComponentAdapterBuilder},
+      $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 = null;
+  destinationObj: IBindingDestination|null = null;
+  checkLastValues: any[] = [];
+  private directive: angular.IDirective;
+  element: Element;
+  $element: any = null;
+  componentScope: angular.IScope;
+
+  constructor(
+      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.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)[inputs[i]] = null;
+    }
+    for (let j = 0; j < outputs.length; j++) {
+      const emitter = (this as any)[outputs[j]] = new EventEmitter<any>();
+      if (this.propOuts.indexOf(outputs[j]) === -1) {
+        this.setComponentProperty(
+            outputs[j], (emitter => (value: any) => emitter.emit(value))(emitter));
+      }
+    }
+    for (let k = 0; k < propOuts.length; k++) {
+      this.checkLastValues.push(INITIAL_VALUE);
+    }
+  }
+
+  ngOnInit() {
+    // 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();
+    }
+
+    // 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);
+    }
+
+    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();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const ng1Changes: any = {};
+    Object.keys(changes).forEach(name => {
+      const change: SimpleChange = changes[name];
+      this.setComponentProperty(name, change.currentValue);
+      ng1Changes[this.propertyMap[name]] = change;
+    });
+
+    if (isFunction(this.destinationObj !.$onChanges)) {
+      this.destinationObj !.$onChanges !(ng1Changes);
+    }
+  }
+
+  ngDoCheck() {
+    const destinationObj = this.destinationObj;
+    const lastValues = this.checkLastValues;
+    const checkProperties = this.checkProperties;
+    const propOuts = this.propOuts;
+    checkProperties.forEach((propName, i) => {
+      const value = destinationObj ![propName];
+      const last = lastValues[i];
+      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();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.controllerInstance && isFunction(this.controllerInstance.$onDestroy)) {
+      this.controllerInstance.$onDestroy();
+    }
+
+    this.componentScope.$destroy();
+  }
+
+  setComponentProperty(name: string, value: any) {
+    this.destinationObj ![this.propertyMap[name]] = value;
+  }
+}
diff --git a/packages/upgrade/src/static/angular1_providers.ts b/packages/upgrade/src/static/angular1_providers.ts
new file mode 100644
index 000000000000..3481f96e8a74
--- /dev/null
+++ b/packages/upgrade/src/static/angular1_providers.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 * as angular from '../common/angular1';
+
+// We have to do a little dance to get the ng1 injector into the module injector.
+// 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|null;
+export function setTempInjectorRef(injector: angular.IInjectorService) {
+  tempInjectorRef = injector;
+}
+export function injectorFactory() {
+  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;
+}
+
+export function rootScopeFactory(i: angular.IInjectorService) {
+  return i.get('$rootScope');
+}
+
+export function compileFactory(i: angular.IInjectorService) {
+  return i.get('$compile');
+}
+
+export function parseFactory(i: angular.IInjectorService) {
+  return i.get('$parse');
+}
+
+export const angular1Providers = [
+  // We must use exported named functions for the ng2 factories to keep the compiler happy:
+  // > Metadata collected contains an error that will be reported at runtime:
+  // >   Function calls are not supported.
+  // >   Consider replacing the function or lambda with a reference to an exported function
+  {provide: '$injector', useFactory: injectorFactory, deps: []},
+  {provide: '$rootScope', useFactory: rootScopeFactory, deps: ['$injector']},
+  {provide: '$compile', useFactory: compileFactory, deps: ['$injector']},
+  {provide: '$parse', useFactory: parseFactory, deps: ['$injector']}
+];
diff --git a/packages/upgrade/src/static/downgrade_module.ts b/packages/upgrade/src/static/downgrade_module.ts
new file mode 100644
index 000000000000..ed450a77597d
--- /dev/null
+++ b/packages/upgrade/src/static/downgrade_module.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 {Injector, NgModuleFactory, NgModuleRef, StaticProvider} 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';
+
+
+/**
+ * @description
+ *
+ * A helper function for creating an AngularJS module that can bootstrap an Angular module
+ * "on-demand" (possibly lazily) when a {@link downgradeComponent downgraded component} needs to be
+ * instantiated.
+ *
+ * *Part of the [upgrade/static](api?query=upgrade/static) library for hybrid upgrade apps that
+ * support AoT compilation.*
+ *
+ * It allows loading/bootstrapping the Angular part of a hybrid application lazily and not having to
+ * pay the cost up-front. For example, you can have an AngularJS application that uses Angular for
+ * specific routes and only instantiate the Angular modules if/when the user visits one of these
+ * routes.
+ *
+ * The Angular module will be bootstrapped once (when requested for the first time) and the same
+ * reference will be used from that point onwards.
+ *
+ * `downgradeModule()` requires either an `NgModuleFactory` or a function:
+ * - `NgModuleFactory`: If you pass an `NgModuleFactory`, it will be used to instantiate a module
+ *   using `platformBrowser`'s {@link PlatformRef#bootstrapModuleFactory bootstrapModuleFactory()}.
+ * - `Function`: If you pass a function, it is expected to return a promise resolving to an
+ *   `NgModuleRef`. The function is called with an array of extra {@link StaticProvider Providers}
+ *   that are expected to be available from the returned `NgModuleRef`'s `Injector`.
+ *
+ * `downgradeModule()` returns the name of the created AngularJS wrapper module. You can use it to
+ * declare a dependency in your main AngularJS module.
+ *
+ * {@example upgrade/static/ts/lite/module.ts region="basic-how-to"}
+ *
+ * For more details on how to use `downgradeModule()` see
+ * [Upgrading for Performance](guide/upgrade-performance).
+ *
+ * @usageNotes
+ *
+ * Apart from `UpgradeModule`, you can use the rest of the `upgrade/static` helpers as usual to
+ * build a hybrid application. Note that the Angular pieces (e.g. downgraded services) will not be
+ * available until the downgraded module has been bootstrapped, i.e. by instantiating a downgraded
+ * component.
+ *
+ * <div class="alert is-important">
+ *
+ *   You cannot use `downgradeModule()` and `UpgradeModule` in the same hybrid application.<br />
+ *   Use one or the other.
+ *
+ * </div>
+ *
+ * ### Differences with `UpgradeModule`
+ *
+ * Besides their different API, there are two important internal differences between
+ * `downgradeModule()` and `UpgradeModule` that affect the behavior of hybrid applications:
+ *
+ * 1. Unlike `UpgradeModule`, `downgradeModule()` does not bootstrap the main AngularJS module
+ *    inside the {@link NgZone Angular zone}.
+ * 2. Unlike `UpgradeModule`, `downgradeModule()` does not automatically run a
+ *    [$digest()](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest) when changes are
+ *    detected in the Angular part of the application.
+ *
+ * What this means is that applications using `UpgradeModule` will run change detection more
+ * frequently in order to ensure that both frameworks are properly notified about possible changes.
+ * This will inevitably result in more change detection runs than necessary.
+ *
+ * `downgradeModule()`, on the other side, does not try to tie the two change detection systems as
+ * tightly, restricting the explicit change detection runs only to cases where it knows it is
+ * necessary (e.g. when the inputs of a downgraded component change). This improves performance,
+ * especially in change-detection-heavy applications, but leaves it up to the developer to manually
+ * notify each framework as needed.
+ *
+ * For a more detailed discussion of the differences and their implications, see
+ * [Upgrading for Performance](guide/upgrade-performance).
+ *
+ * <div class="alert is-helpful">
+ *
+ *   You can manually trigger a change detection run in AngularJS using
+ *   [scope.$apply(...)](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply) or
+ *   [$rootScope.$digest()](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest).
+ *
+ *   You can manually trigger a change detection run in Angular using {@link NgZone#run
+ *   ngZone.run(...)}.
+ *
+ * </div>
+ *
+ * @experimental
+ */
+export function downgradeModule<T>(
+    moduleFactoryOrBootstrapFn: NgModuleFactory<T>|
+    ((extraProviders: StaticProvider[]) => Promise<NgModuleRef<T>>)): string {
+  const LAZY_MODULE_NAME = UPGRADE_MODULE_NAME + '.lazy';
+  const bootstrapFn = isFunction(moduleFactoryOrBootstrapFn) ?
+      moduleFactoryOrBootstrapFn :
+      (extraProviders: StaticProvider[]) =>
+          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
new file mode 100644
index 000000000000..a63699f8b4d9
--- /dev/null
+++ b/packages/upgrade/src/static/upgrade_component.ts
@@ -0,0 +1,298 @@
+/**
+ * @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 {DoCheck, ElementRef, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, SimpleChanges, ɵlooseIdentical as looseIdentical} from '@angular/core';
+import * as angular from '../common/angular1';
+import {$SCOPE} from '../common/constants';
+import {IBindingDestination, IControllerInstance, UpgradeHelper} from '../common/upgrade_helper';
+import {isFunction} from '../common/util';
+
+const NOT_SUPPORTED: any = 'NOT_SUPPORTED';
+const INITIAL_VALUE = {
+  __UNINITIALIZED__: true
+};
+
+class Bindings {
+  twoWayBoundProperties: string[] = [];
+  twoWayBoundLastValues: any[] = [];
+
+  expressionBoundProperties: string[] = [];
+
+  propertyToOutputMap: {[propName: string]: string} = {};
+}
+
+/**
+ * @description
+ *
+ * A helper class that allows an AngularJS component to be used from Angular.
+ *
+ * *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
+ * library for hybrid upgrade apps that support AoT compilation*
+ *
+ * This helper class should be used as a base class for creating Angular directives
+ * that wrap AngularJS components that need to be "upgraded".
+ *
+ * ### Examples
+ *
+ * Let's assume that you have an AngularJS component called `ng1Hero` that needs
+ * to be made available in Angular templates.
+ *
+ * {@example upgrade/static/ts/full/module.ts region="ng1-hero"}
+ *
+ * We must create a `Directive` that will make this AngularJS component
+ * available inside Angular templates.
+ *
+ * {@example upgrade/static/ts/full/module.ts region="ng1-hero-wrapper"}
+ *
+ * In this example you can see that we must derive from the `UpgradeComponent`
+ * base class but also provide an {@link Directive `@Directive`} decorator. This is
+ * because the AoT compiler requires that this information is statically available at
+ * compile time.
+ *
+ * Note that we must do the following:
+ * * specify the directive's selector (`ng1-hero`)
+ * * specify all inputs and outputs that the AngularJS component expects
+ * * derive from `UpgradeComponent`
+ * * call the base class from the constructor, passing
+ *   * the AngularJS name of the component (`ng1Hero`)
+ *   * the `ElementRef` and `Injector` for the component wrapper
+ *
+ * @experimental
+ */
+export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
+  private helper: UpgradeHelper;
+
+  private $injector: angular.IInjectorService;
+
+  private element: Element;
+  private $element: angular.IAugmentedJQuery;
+  private $componentScope: angular.IScope;
+
+  private directive: angular.IDirective;
+  private bindings: Bindings;
+
+  // TODO(issue/24571): remove '!'.
+  private controllerInstance !: IControllerInstance;
+  // TODO(issue/24571): remove '!'.
+  private bindingDestination !: IBindingDestination;
+
+  // 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.
+  // TODO(issue/24571): remove '!'.
+  private pendingChanges !: SimpleChanges | null;
+
+  // TODO(issue/24571): remove '!'.
+  private unregisterDoCheckWatcher !: Function;
+
+  /**
+   * Create a new `UpgradeComponent` instance. You should not normally need to do this.
+   * Instead you should derive a new class from this one and call the super constructor
+   * from the base class.
+   *
+   * {@example upgrade/static/ts/full/module.ts region="ng1-hero-wrapper" }
+   *
+   * * The `name` parameter should be the name of the AngularJS directive.
+   * * The `elementRef` and `injector` parameters should be acquired from Angular by dependency
+   *   injection into the base class constructor.
+   */
+  constructor(private name: string, private elementRef: ElementRef, private injector: Injector) {
+    this.helper = new UpgradeHelper(injector, name, elementRef);
+
+    this.$injector = this.helper.$injector;
+
+    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
+    // we will put the new component scope onto the new injector for each component
+    const $parentScope = injector.get($SCOPE);
+    // QUESTION 1: Should we create an isolated scope if the scope is only true?
+    // QUESTION 2: Should we make the scope accessible through `$element.scope()/isolateScope()`?
+    this.$componentScope = $parentScope.$new(!!this.directive.scope);
+
+    this.initializeOutputs();
+  }
+
+  ngOnInit() {
+    // Collect contents, insert and compile template
+    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.helper.buildController(controllerType, this.$componentScope);
+    } else if (bindToController) {
+      throw new Error(
+          `Upgraded directive '${this.directive.name}' specifies 'bindToController' but no controller.`);
+    }
+
+    // Set up outputs
+    this.bindingDestination = bindToController ? this.controllerInstance : this.$componentScope;
+    this.bindOutputs();
+
+    // Require other controllers
+    const requiredControllers =
+        this.helper.resolveAndBindRequiredControllers(this.controllerInstance);
+
+    // Hook: $onChanges
+    if (this.pendingChanges) {
+      this.forwardChanges(this.pendingChanges);
+      this.pendingChanges = null;
+    }
+
+    // Hook: $onInit
+    if (this.controllerInstance && isFunction(this.controllerInstance.$onInit)) {
+      this.controllerInstance.$onInit();
+    }
+
+    // Hook: $doCheck
+    if (this.controllerInstance && isFunction(this.controllerInstance.$doCheck)) {
+      const callDoCheck = () => this.controllerInstance.$doCheck !();
+
+      this.unregisterDoCheckWatcher = this.$componentScope.$parent.$watch(callDoCheck);
+      callDoCheck();
+    }
+
+    // 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);
+    }
+
+    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();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.bindingDestination) {
+      this.pendingChanges = changes;
+    } else {
+      this.forwardChanges(changes);
+    }
+  }
+
+  ngDoCheck() {
+    const twoWayBoundProperties = this.bindings.twoWayBoundProperties;
+    const twoWayBoundLastValues = this.bindings.twoWayBoundLastValues;
+    const propertyToOutputMap = this.bindings.propertyToOutputMap;
+
+    twoWayBoundProperties.forEach((propName, idx) => {
+      const newValue = this.bindingDestination[propName];
+      const oldValue = twoWayBoundLastValues[idx];
+
+      if (!looseIdentical(newValue, oldValue)) {
+        const outputName = propertyToOutputMap[propName];
+        const eventEmitter: EventEmitter<any> = (this as any)[outputName];
+
+        eventEmitter.emit(newValue);
+        twoWayBoundLastValues[idx] = newValue;
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (isFunction(this.unregisterDoCheckWatcher)) {
+      this.unregisterDoCheckWatcher();
+    }
+    if (this.controllerInstance && isFunction(this.controllerInstance.$onDestroy)) {
+      this.controllerInstance.$onDestroy();
+    }
+    this.$componentScope.$destroy();
+  }
+
+  private initializeBindings(directive: angular.IDirective) {
+    const btcIsObject = typeof directive.bindToController === 'object';
+    if (btcIsObject && Object.keys(directive.scope !).length) {
+      throw new Error(
+          `Binding definitions on scope and controller at the same time is not supported.`);
+    }
+
+    const context = (btcIsObject) ? directive.bindToController : directive.scope;
+    const bindings = new Bindings();
+
+    if (typeof context == 'object') {
+      Object.keys(context).forEach(propName => {
+        const definition = context[propName];
+        const bindingType = definition.charAt(0);
+
+        // QUESTION: What about `=*`? Ignore? Throw? Support?
+
+        switch (bindingType) {
+          case '@':
+          case '<':
+            // We don't need to do anything special. They will be defined as inputs on the
+            // upgraded component facade and the change propagation will be handled by
+            // `ngOnChanges()`.
+            break;
+          case '=':
+            bindings.twoWayBoundProperties.push(propName);
+            bindings.twoWayBoundLastValues.push(INITIAL_VALUE);
+            bindings.propertyToOutputMap[propName] = propName + 'Change';
+            break;
+          case '&':
+            bindings.expressionBoundProperties.push(propName);
+            bindings.propertyToOutputMap[propName] = propName;
+            break;
+          default:
+            let json = JSON.stringify(context);
+            throw new Error(
+                `Unexpected mapping '${bindingType}' in '${json}' in '${this.name}' directive.`);
+        }
+      });
+    }
+
+    return bindings;
+  }
+
+  private initializeOutputs() {
+    // Initialize the outputs for `=` and `&` bindings
+    this.bindings.twoWayBoundProperties.concat(this.bindings.expressionBoundProperties)
+        .forEach(propName => {
+          const outputName = this.bindings.propertyToOutputMap[propName];
+          (this as any)[outputName] = new EventEmitter();
+        });
+  }
+
+  private bindOutputs() {
+    // Bind `&` bindings to the corresponding outputs
+    this.bindings.expressionBoundProperties.forEach(propName => {
+      const outputName = this.bindings.propertyToOutputMap[propName];
+      const emitter = (this as any)[outputName];
+
+      this.bindingDestination[propName] = (value: any) => emitter.emit(value);
+    });
+  }
+
+  private forwardChanges(changes: SimpleChanges) {
+    // Forward input changes to `bindingDestination`
+    Object.keys(changes).forEach(
+        propName => this.bindingDestination[propName] = changes[propName].currentValue);
+
+    if (isFunction(this.bindingDestination.$onChanges)) {
+      this.bindingDestination.$onChanges(changes);
+    }
+  }
+}
diff --git a/packages/upgrade/src/static/upgrade_module.ts b/packages/upgrade/src/static/upgrade_module.ts
new file mode 100644
index 000000000000..bf62d6e49d2e
--- /dev/null
+++ b/packages/upgrade/src/static/upgrade_module.ts
@@ -0,0 +1,286 @@
+/**
+ * @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, NgModule, NgZone, Testability} from '@angular/core';
+
+import * as angular from '../common/angular1';
+import {$$TESTABILITY, $DELEGATE, $INJECTOR, $INTERVAL, $PROVIDE, INJECTOR_KEY, LAZY_MODULE_REF, UPGRADE_MODULE_NAME} from '../common/constants';
+import {LazyModuleRef, controllerKey} from '../common/util';
+
+import {angular1Providers, setTempInjectorRef} from './angular1_providers';
+import {NgAdapterInjector} from './util';
+
+
+/**
+ * @description
+ *
+ * An `NgModule`, which you import to provide AngularJS core services,
+ * and has an instance method used to bootstrap the hybrid upgrade application.
+ *
+ * *Part of the [upgrade/static](api?query=upgrade/static)
+ * library for hybrid upgrade apps that support AoT compilation*
+ *
+ * The `upgrade/static` package contains helpers that allow AngularJS and Angular components
+ * to be used together inside a hybrid upgrade application, which supports AoT compilation.
+ *
+ * Specifically, the classes and functions in the `upgrade/static` module allow the following:
+ *
+ * 1. Creation of an Angular directive that wraps and exposes an AngularJS component so
+ *    that it can be used in an Angular template. See `UpgradeComponent`.
+ * 2. Creation of an AngularJS directive that wraps and exposes an Angular component so
+ *    that it can be used in an AngularJS template. See `downgradeComponent`.
+ * 3. Creation of an Angular root injector provider that wraps and exposes an AngularJS
+ *    service so that it can be injected into an Angular context. See
+ *    {@link UpgradeModule#upgrading-an-angular-1-service Upgrading an AngularJS service} below.
+ * 4. Creation of an AngularJS service that wraps and exposes an Angular injectable
+ *    so that it can be injected into an AngularJS context. See `downgradeInjectable`.
+ * 3. Bootstrapping of a hybrid Angular application which contains both of the frameworks
+ *    coexisting in a single application.
+ *
+ * @usageNotes
+ *
+ * ```ts
+ * import {UpgradeModule} from '@angular/upgrade/static';
+ * ```
+ *
+ * See also the {@link UpgradeModule#examples examples} below.
+ *
+ * ### Mental Model
+ *
+ * When reasoning about how a hybrid application works it is useful to have a mental model which
+ * describes what is happening and explains what is happening at the lowest level.
+ *
+ * 1. There are two independent frameworks running in a single application, each framework treats
+ *    the other as a black box.
+ * 2. Each DOM element on the page is owned exactly by one framework. Whichever framework
+ *    instantiated the element is the owner. Each framework only updates/interacts with its own
+ *    DOM elements and ignores others.
+ * 3. AngularJS directives always execute inside the AngularJS framework codebase regardless of
+ *    where they are instantiated.
+ * 4. Angular components always execute inside the Angular framework codebase regardless of
+ *    where they are instantiated.
+ * 5. An AngularJS component can be "upgraded"" to an Angular component. This is achieved by
+ *    defining an Angular directive, which bootstraps the AngularJS component at its location
+ *    in the DOM. See `UpgradeComponent`.
+ * 6. An Angular component can be "downgraded" to an AngularJS component. This is achieved by
+ *    defining an AngularJS directive, which bootstraps the Angular component at its location
+ *    in the DOM. See `downgradeComponent`.
+ * 7. Whenever an "upgraded"/"downgraded" component is instantiated the host element is owned by
+ *    the framework doing the instantiation. The other framework then instantiates and owns the
+ *    view for that component.
+ *    1. This implies that the component bindings will always follow the semantics of the
+ *       instantiation framework.
+ *    2. The DOM attributes are parsed by the framework that owns the current template. So
+ *       attributes in AngularJS templates must use kebab-case, while AngularJS templates must use
+ *       camelCase.
+ *    3. However the template binding syntax will always use the Angular style, e.g. square
+ *       brackets (`[...]`) for property binding.
+ * 8. Angular is bootstrapped first; AngularJS is bootstrapped second. AngularJS always owns the
+ *    root component of the application.
+ * 9. The new application is running in an Angular zone, and therefore it no longer needs calls to
+ *    `$apply()`.
+ *
+ * ### The `UpgradeModule` class
+ *
+ * This class is an `NgModule`, which you import to provide AngularJS core services,
+ * and has an instance method used to bootstrap the hybrid upgrade application.
+ *
+ * #### Core AngularJS services
+ * Importing this `NgModule` will add providers for the core
+ * [AngularJS services](https://docs.angularjs.org/api/ng/service) to the root injector.
+ *
+ * #### Bootstrap
+ * The runtime instance of this class contains a {@link UpgradeModule#bootstrap `bootstrap()`}
+ * method, which you use to bootstrap the top level AngularJS module onto an element in the
+ * DOM for the hybrid upgrade app.
+ *
+ * It also contains properties to access the {@link UpgradeModule#injector root injector}, the
+ * bootstrap `NgZone` and the
+ * [AngularJS $injector](https://docs.angularjs.org/api/auto/service/$injector).
+ *
+ * ### Examples
+ *
+ * Import the `UpgradeModule` into your top level {@link NgModule Angular `NgModule`}.
+ *
+ * {@example upgrade/static/ts/full/module.ts region='ng2-module'}
+ *
+ * Then inject `UpgradeModule` into your Angular `NgModule` and use it to bootstrap the top level
+ * [AngularJS module](https://docs.angularjs.org/api/ng/type/angular.Module) in the
+ * `ngDoBootstrap()` method.
+ *
+ * {@example upgrade/static/ts/full/module.ts region='bootstrap-ng1'}
+ *
+ * Finally, kick off the whole process, by bootstraping your top level Angular `NgModule`.
+ *
+ * {@example upgrade/static/ts/full/module.ts region='bootstrap-ng2'}
+ *
+ * {@a upgrading-an-angular-1-service}
+ * ### Upgrading an AngularJS service
+ *
+ * There is no specific API for upgrading an AngularJS service. Instead you should just follow the
+ * following recipe:
+ *
+ * Let's say you have an AngularJS service:
+ *
+ * {@example upgrade/static/ts/full/module.ts region="ng1-text-formatter-service"}
+ *
+ * Then you should define an Angular provider to be included in your `NgModule` `providers`
+ * property.
+ *
+ * {@example upgrade/static/ts/full/module.ts region="upgrade-ng1-service"}
+ *
+ * Then you can use the "upgraded" AngularJS service by injecting it into an Angular component
+ * or service.
+ *
+ * {@example upgrade/static/ts/full/module.ts region="use-ng1-upgraded-service"}
+ *
+ * @experimental
+ */
+@NgModule({providers: [angular1Providers]})
+export class UpgradeModule {
+  /**
+   * The AngularJS `$injector` for the upgrade application.
+   */
+  public $injector: any /*angular.IInjectorService*/;
+  /** The Angular Injector **/
+  public injector: Injector;
+
+  constructor(
+      /** The root `Injector` for the upgrade application. */
+      injector: Injector,
+      /** The bootstrap zone for the upgrade application */
+      public ngZone: NgZone) {
+    this.injector = new NgAdapterInjector(injector);
+  }
+
+  /**
+   * Bootstrap an AngularJS application from this NgModule
+   * @param element the element on which to bootstrap the AngularJS application
+   * @param [modules] the AngularJS modules to bootstrap for this application
+   * @param [config] optional extra AngularJS bootstrap configuration
+   */
+  bootstrap(
+      element: Element, modules: string[] = [], config?: any /*angular.IAngularBootstrapConfig*/) {
+    const INIT_MODULE_NAME = UPGRADE_MODULE_NAME + '.init';
+
+    // Create an ng1 module to bootstrap
+    const initModule =
+        angular
+            .module(INIT_MODULE_NAME, [])
+
+            .value(INJECTOR_KEY, this.injector)
+
+            .factory(
+                LAZY_MODULE_REF,
+                [
+                  INJECTOR_KEY,
+                  (injector: Injector) => ({ injector, needsNgZone: false } as LazyModuleRef)
+                ])
+
+            .config([
+              $PROVIDE, $INJECTOR,
+              ($provide: angular.IProvideService, $injector: angular.IInjectorService) => {
+                if ($injector.has($$TESTABILITY)) {
+                  $provide.decorator($$TESTABILITY, [
+                    $DELEGATE,
+                    (testabilityDelegate: angular.ITestabilityService) => {
+                      const originalWhenStable: Function = testabilityDelegate.whenStable;
+                      const injector = this.injector;
+                      // Cannot use arrow function below because we need the context
+                      const newWhenStable = function(callback: Function) {
+                        originalWhenStable.call(testabilityDelegate, function() {
+                          const ng2Testability: Testability = injector.get(Testability);
+                          if (ng2Testability.isStable()) {
+                            callback();
+                          } else {
+                            ng2Testability.whenStable(
+                                newWhenStable.bind(testabilityDelegate, callback));
+                          }
+                        });
+                      };
+
+                      testabilityDelegate.whenStable = newWhenStable;
+                      return testabilityDelegate;
+                    }
+                  ]);
+                }
+
+                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;
+                    }
+                  ]);
+                }
+              }
+            ])
+
+            .run([
+              $INJECTOR,
+              ($injector: angular.IInjectorService) => {
+                this.$injector = $injector;
+
+                // Initialize the ng1 $injector provider
+                setTempInjectorRef($injector);
+                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);
+
+                // 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
+                // stabilizing
+                setTimeout(() => {
+                  const $rootScope = $injector.get('$rootScope');
+                  const subscription =
+                      this.ngZone.onMicrotaskEmpty.subscribe(() => $rootScope.$digest());
+                  $rootScope.$on('$destroy', () => { subscription.unsubscribe(); });
+                }, 0);
+              }
+            ]);
+
+    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)['angular'];
+    windowAngular.resumeBootstrap = undefined;
+
+    // Bootstrap the AngularJS application inside our zone
+    this.ngZone.run(() => { angular.bootstrap(element, [upgradeModule.name], config); });
+
+    // Patch resumeBootstrap() to run inside the ngZone
+    if (windowAngular.resumeBootstrap) {
+      const originalResumeBootstrap: () => void = windowAngular.resumeBootstrap;
+      const ngZone = this.ngZone;
+      windowAngular.resumeBootstrap = function() {
+        let args = arguments;
+        windowAngular.resumeBootstrap = originalResumeBootstrap;
+        return ngZone.run(() => windowAngular.resumeBootstrap.apply(this, args));
+      };
+    }
+  }
+}
diff --git a/packages/upgrade/src/static/util.ts b/packages/upgrade/src/static/util.ts
new file mode 100644
index 000000000000..20f237fa5da8
--- /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/BUILD.bazel b/packages/upgrade/static/BUILD.bazel
new file mode 100644
index 000000000000..62ce0857d014
--- /dev/null
+++ b/packages/upgrade/static/BUILD.bazel
@@ -0,0 +1,24 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["package.json"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "static",
+    # Note: There is Bazel issue where Windows symlinks
+    #       aka. junctions are not traversed by glob.
+    srcs = glob(
+        [
+            "*.ts",
+            "src/common/**/*.ts",
+            "src/static/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/upgrade/static",
+    deps = [
+        "//packages/core",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+    ],
+)
diff --git a/packages/upgrade/static/index.ts b/packages/upgrade/static/index.ts
new file mode 100644
index 000000000000..e727e2e8a755
--- /dev/null
+++ b/packages/upgrade/static/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';
diff --git a/packages/upgrade/static/package.json b/packages/upgrade/static/package.json
new file mode 100644
index 000000000000..a91e77fa42d2
--- /dev/null
+++ b/packages/upgrade/static/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@angular/upgrade/static",
+  "typings": "./static.d.ts",
+  "main": "../bundles/upgrade-static.umd.js",
+  "module": "../fesm5/static.js",
+  "es2015": "../fesm2015/static.js",
+  "esm5": "../esm5/static/static.js",
+  "esm2015": "../esm2015/static/static.js",
+  "fesm5": "../fesm5/static.js",
+  "fesm2015": "../fesm2015/static.js",
+  "sideEffects": false
+}
diff --git a/packages/upgrade/static/public_api.ts b/packages/upgrade/static/public_api.ts
new file mode 100644
index 000000000000..c881be7a5357
--- /dev/null
+++ b/packages/upgrade/static/public_api.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 this package. allowing
+ * Angular 1 and Angular 2+ to run side by side in the same application.
+ */
+export {getAngularJSGlobal, getAngularLib, setAngularJSGlobal, 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';
+
+
+// This file only re-exports content of the `src` folder. Keep it that way.
diff --git a/packages/upgrade/static/rollup.config.js b/packages/upgrade/static/rollup.config.js
new file mode 100644
index 000000000000..844143c401cc
--- /dev/null
+++ b/packages/upgrade/static/rollup.config.js
@@ -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
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+
+const globals = {
+  '@angular/core': 'ng.core'
+};
+
+module.exports = {
+  entry: '../../../dist/packages-dist/upgrade/fesm5/static.js',
+  dest: '../../../dist/packages-dist/upgrade/bundles/upgrade-static.umd.js',
+  format: 'umd',
+  exports: 'named',
+  amd: {id: '@angular/upgrade/static'},
+  moduleName: 'ng.upgrade.static',
+  plugins: [resolve(), sourcemaps()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/upgrade/static/src b/packages/upgrade/static/src
new file mode 120000
index 000000000000..5cd551cf2693
--- /dev/null
+++ b/packages/upgrade/static/src
@@ -0,0 +1 @@
+../src
\ No newline at end of file
diff --git a/packages/upgrade/static/tsconfig-build.json b/packages/upgrade/static/tsconfig-build.json
new file mode 100644
index 000000000000..6379e3053082
--- /dev/null
+++ b/packages/upgrade/static/tsconfig-build.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "../",
+    "paths": {
+      "@angular/core": ["../../../dist/packages/core"],
+      "@angular/common": ["../../../dist/packages/common"],
+      "@angular/platform-browser": ["../../../dist/packages/platform-browser"],
+      "@angular/platform-browser-dynamic": ["../../../dist/packages/platform-browser-dynamic"]
+    },
+    "outDir": "../../../dist/packages/upgrade"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "static.js",
+    "flatModuleId": "@angular/upgrade/static"
+  }
+}
diff --git a/packages/upgrade/test/BUILD.bazel b/packages/upgrade/test/BUILD.bazel
new file mode 100644
index 000000000000..d6fc0c92e706
--- /dev/null
+++ b/packages/upgrade/test/BUILD.bazel
@@ -0,0 +1,29 @@
+load("//tools:defaults.bzl", "ts_library", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/platform-browser/testing",
+        "//packages/upgrade",
+        "//packages/upgrade/static",
+        "@rxjs",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test_web",
+    static_files = [
+        "//:angularjs_scripts",
+    ],
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/packages/upgrade/test/common/component_info_spec.ts b/packages/upgrade/test/common/component_info_spec.ts
new file mode 100644
index 000000000000..63969b110eb8
--- /dev/null
+++ b/packages/upgrade/test/common/component_info_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
+ */
+
+import {PropertyBinding} from '@angular/upgrade/src/common/component_info';
+
+{
+  describe('PropertyBinding', () => {
+    it('should process a simple binding', () => {
+      const binding = new PropertyBinding('someBinding', 'someBinding');
+      expect(binding.prop).toEqual('someBinding');
+      expect(binding.attr).toEqual('someBinding');
+      expect(binding.bracketAttr).toEqual('[someBinding]');
+      expect(binding.bracketParenAttr).toEqual('[(someBinding)]');
+      expect(binding.parenAttr).toEqual('(someBinding)');
+      expect(binding.onAttr).toEqual('onSomeBinding');
+      expect(binding.bindAttr).toEqual('bindSomeBinding');
+      expect(binding.bindonAttr).toEqual('bindonSomeBinding');
+    });
+
+    it('should process a two-part binding', () => {
+      const binding = new PropertyBinding('someProp', 'someAttr');
+      expect(binding.prop).toEqual('someProp');
+      expect(binding.attr).toEqual('someAttr');
+      expect(binding.bracketAttr).toEqual('[someAttr]');
+      expect(binding.bracketParenAttr).toEqual('[(someAttr)]');
+      expect(binding.parenAttr).toEqual('(someAttr)');
+      expect(binding.onAttr).toEqual('onSomeAttr');
+      expect(binding.bindAttr).toEqual('bindSomeAttr');
+      expect(binding.bindonAttr).toEqual('bindonSomeAttr');
+    });
+  });
+}
diff --git a/packages/upgrade/test/common/downgrade_component_adapter_spec.ts b/packages/upgrade/test/common/downgrade_component_adapter_spec.ts
new file mode 100644
index 000000000000..bf5d4cc471a6
--- /dev/null
+++ b/packages/upgrade/test/common/downgrade_component_adapter_spec.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 {Compiler, Component, ComponentFactory, Injector, NgModule, TestabilityRegistry} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import * as angular from '@angular/upgrade/src/common/angular1';
+import {DowngradeComponentAdapter, groupNodesBySelector} from '@angular/upgrade/src/common/downgrade_component_adapter';
+
+import {nodes, withEachNg1Version} from './test_helpers';
+
+withEachNg1Version(() => {
+  describe('DowngradeComponentAdapter', () => {
+    describe('groupNodesBySelector', () => {
+      it('should return an array of node collections for each selector', () => {
+        const contentNodes = nodes(
+            '<div class="x"><span>div-1 content</span></div>' +
+            '<input type="number" name="myNum">' +
+            '<input type="date" name="myDate">' +
+            '<span>span content</span>' +
+            '<div class="x"><span>div-2 content</span></div>');
+
+        const selectors = ['input[type=date]', 'span', '.x'];
+        const projectableNodes = groupNodesBySelector(selectors, contentNodes);
+        expect(projectableNodes[0]).toEqual(nodes('<input type="date" name="myDate">'));
+        expect(projectableNodes[1]).toEqual(nodes('<span>span content</span>'));
+        expect(projectableNodes[2])
+            .toEqual(nodes(
+                '<div class="x"><span>div-1 content</span></div>' +
+                '<div class="x"><span>div-2 content</span></div>'));
+      });
+
+      it('should collect up unmatched nodes for the wildcard selector', () => {
+        const contentNodes = nodes(
+            '<div class="x"><span>div-1 content</span></div>' +
+            '<input type="number" name="myNum">' +
+            '<input type="date" name="myDate">' +
+            '<span>span content</span>' +
+            '<div class="x"><span>div-2 content</span></div>');
+
+        const selectors = ['.x', '*', 'input[type=date]'];
+        const projectableNodes = groupNodesBySelector(selectors, contentNodes);
+
+        expect(projectableNodes[0])
+            .toEqual(nodes(
+                '<div class="x"><span>div-1 content</span></div>' +
+                '<div class="x"><span>div-2 content</span></div>'));
+        expect(projectableNodes[1])
+            .toEqual(nodes(
+                '<input type="number" name="myNum">' +
+                '<span>span content</span>'));
+        expect(projectableNodes[2]).toEqual(nodes('<input type="date" name="myDate">'));
+      });
+
+      it('should return an array of empty arrays if there are no nodes passed in', () => {
+        const selectors = ['.x', '*', 'input[type=date]'];
+        const projectableNodes = groupNodesBySelector(selectors, []);
+        expect(projectableNodes).toEqual([[], [], []]);
+      });
+
+      it('should return an empty array for each selector that does not match', () => {
+        const contentNodes = nodes(
+            '<div class="x"><span>div-1 content</span></div>' +
+            '<input type="number" name="myNum">' +
+            '<input type="date" name="myDate">' +
+            '<span>span content</span>' +
+            '<div class="x"><span>div-2 content</span></div>');
+
+        const projectableNodes = groupNodesBySelector([], contentNodes);
+        expect(projectableNodes).toEqual([]);
+
+        const noMatchSelectorNodes = groupNodesBySelector(['.not-there'], contentNodes);
+        expect(noMatchSelectorNodes).toEqual([[]]);
+      });
+    });
+
+    describe('testability', () => {
+
+      let adapter: DowngradeComponentAdapter;
+      let content: string;
+      let compiler: Compiler;
+      let registry: TestabilityRegistry;
+      let element: angular.IAugmentedJQuery;
+
+      class mockScope implements angular.IScope {
+        private destroyListeners: (() => void)[] = [];
+
+        $new() { return this; }
+        $watch(exp: angular.Ng1Expression, fn?: (a1?: any, a2?: any) => void) {
+          return () => {};
+        }
+        $on(event: string, fn?: (event?: any, ...args: any[]) => void) {
+          if (event === '$destroy' && fn) {
+            this.destroyListeners.push(fn);
+          }
+          return () => {};
+        }
+        $destroy() {
+          let listener: (() => void)|undefined;
+          while ((listener = this.destroyListeners.shift())) listener();
+        }
+        $apply(exp?: angular.Ng1Expression) {
+          return () => {};
+        }
+        $digest() {
+          return () => {};
+        }
+        $evalAsync(exp: angular.Ng1Expression, locals?: any) {
+          return () => {};
+        }
+        // TODO(issue/24571): remove '!'.
+        $$childTail !: angular.IScope;
+        // TODO(issue/24571): remove '!'.
+        $$childHead !: angular.IScope;
+        // TODO(issue/24571): remove '!'.
+        $$nextSibling !: angular.IScope;
+        [key: string]: any;
+        $id = 'mockScope';
+        // TODO(issue/24571): remove '!'.
+        $parent !: angular.IScope;
+        // TODO(issue/24571): remove '!'.
+        $root !: angular.IScope;
+      }
+
+      function getAdaptor(): DowngradeComponentAdapter {
+        let attrs = undefined as any;
+        let scope: angular.IScope;  // mock
+        let ngModel = undefined as any;
+        let parentInjector: Injector;  // testbed
+        let $injector = undefined as any;
+        let $compile = undefined as any;
+        let $parse = undefined as any;
+        let componentFactory: ComponentFactory<any>;  // testbed
+        let wrapCallback = (cb: any) => cb;
+
+        content = `
+          <h1> new component </h1>
+          <div> a great component </div>
+          <comp></comp>
+        `;
+        element = angular.element(content);
+        scope = new mockScope();
+
+        @Component({
+          selector: 'comp',
+          template: '',
+        })
+        class NewComponent {
+        }
+
+        @NgModule({
+          providers: [{provide: 'hello', useValue: 'component'}],
+          declarations: [NewComponent],
+          entryComponents: [NewComponent],
+        })
+        class NewModule {
+        }
+
+        const modFactory = compiler.compileModuleSync(NewModule);
+        const module = modFactory.create(TestBed);
+        componentFactory = module.componentFactoryResolver.resolveComponentFactory(NewComponent) !;
+        parentInjector = TestBed;
+
+        return new DowngradeComponentAdapter(
+            element, attrs, scope, ngModel, parentInjector, $injector, $compile, $parse,
+            componentFactory, wrapCallback);
+      }
+
+      beforeEach(() => {
+        compiler = TestBed.get(Compiler);
+        registry = TestBed.get(TestabilityRegistry);
+        adapter = getAdaptor();
+      });
+      beforeEach(() => registry.unregisterAllApplications());
+      afterEach(() => registry.unregisterAllApplications());
+
+      it('should add testabilities hook when creating components', () => {
+
+        let registry = TestBed.get(TestabilityRegistry);
+        adapter.createComponent([]);
+        expect(registry.getAllTestabilities().length).toEqual(1);
+
+        adapter = getAdaptor();  // get a new adaptor to creat a new component
+        adapter.createComponent([]);
+        expect(registry.getAllTestabilities().length).toEqual(2);
+      });
+
+      it('should remove the testability hook when destroy a component', () => {
+        const registry = TestBed.get(TestabilityRegistry);
+        expect(registry.getAllTestabilities().length).toEqual(0);
+        adapter.createComponent([]);
+        expect(registry.getAllTestabilities().length).toEqual(1);
+        adapter.registerCleanup();
+        element.remove !();
+        expect(registry.getAllTestabilities().length).toEqual(0);
+      });
+    });
+
+  });
+});
diff --git a/packages/upgrade/test/common/downgrade_injectable_spec.ts b/packages/upgrade/test/common/downgrade_injectable_spec.ts
new file mode 100644
index 000000000000..628d8f1237db
--- /dev/null
+++ b/packages/upgrade/test/common/downgrade_injectable_spec.ts
@@ -0,0 +1,25 @@
+/**
+ * @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_KEY} from '@angular/upgrade/src/common/constants';
+import {downgradeInjectable} from '@angular/upgrade/src/common/downgrade_injectable';
+
+{
+  describe('downgradeInjectable', () => {
+    it('should return an AngularJS annotated factory for the token', () => {
+      const factory = downgradeInjectable('someToken');
+      expect(factory).toEqual(jasmine.any(Function));
+      expect((factory as any).$inject).toEqual([INJECTOR_KEY]);
+
+      const injector = {get: jasmine.createSpy('get').and.returnValue('service value')};
+      const value = factory(injector);
+      expect(injector.get).toHaveBeenCalledWith('someToken');
+      expect(value).toEqual('service value');
+    });
+  });
+}
diff --git a/packages/upgrade/test/common/test_helpers.ts b/packages/upgrade/test/common/test_helpers.ts
new file mode 100644
index 000000000000..91268d9ce8eb
--- /dev/null
+++ b/packages/upgrade/test/common/test_helpers.ts
@@ -0,0 +1,142 @@
+/**
+ * @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 {setAngularJSGlobal} from '@angular/upgrade/src/common/angular1';
+
+
+const ng1Versions = [
+  {
+    label: '1.5',
+    files: ['angular-1.5/angular.js', 'angular-mocks-1.5/angular-mocks.js'],
+  },
+  {
+    label: '1.6',
+    files: ['angular-1.6/angular.js', 'angular-mocks-1.6/angular-mocks.js'],
+  },
+  {
+    label: '1.7',
+    files: ['angular/angular.js', 'angular-mocks/angular-mocks.js'],
+  },
+];
+
+export function createWithEachNg1VersionFn(setNg1: typeof setAngularJSGlobal) {
+  return (specSuite: () => void) => ng1Versions.forEach(({label, files}) => {
+    describe(`[AngularJS v${label}]`, () => {
+      // Problem:
+      // As soon as `angular-mocks.js` is loaded, it runs `beforeEach` and `afterEach` to register
+      // setup/tear down callbacks. Jasmine 2.9+ does not allow `beforeEach`/`afterEach` to be
+      // nested inside a `beforeAll` call (only inside `describe`).
+      // Hacky work-around:
+      // Patch the affected jasmine methods while loading `angular-mocks.js` (inside `beforeAll`) to
+      // capture the registered callbacks. Also, inside the `describe` call register a callback with
+      // each affected method that runs all captured callbacks.
+      // (Note: Currently, async callbacks are not supported, but that should be OK, since
+      // `angular-mocks.js` does not use them.)
+      const methodsToPatch = ['beforeAll', 'beforeEach', 'afterEach', 'afterAll'];
+      const methodCallbacks = methodsToPatch.reduce<{[name: string]: any[]}>(
+          (aggr, method) => ({...aggr, [method]: []}), {});
+      const win = window as any;
+
+      function patchJasmineMethods(): () => void {
+        const originalMethods: {[name: string]: any} = {};
+
+        methodsToPatch.forEach(method => {
+          originalMethods[method] = win[method];
+          win[method] = (cb: any) => methodCallbacks[method].push(cb);
+        });
+
+        return () => methodsToPatch.forEach(method => win[method] = originalMethods[method]);
+      }
+
+      beforeAll(done => {
+        const restoreJasmineMethods = patchJasmineMethods();
+        const onSuccess = () => {
+          restoreJasmineMethods();
+          done();
+        };
+        const onError = (err: any) => {
+          restoreJasmineMethods();
+          done.fail(err);
+        };
+
+        // Load AngularJS before running tests.
+        files
+            .reduce(
+                (prev, file) => prev.then(() => new Promise<void>((resolve, reject) => {
+                                            const script = document.createElement('script');
+                                            script.async = true;
+                                            script.onerror = reject;
+                                            script.onload = () => {
+                                              document.body.removeChild(script);
+                                              resolve();
+                                            };
+                                            script.src = `base/angular_deps/node_modules/${file}`;
+                                            document.body.appendChild(script);
+                                          })),
+                Promise.resolve())
+            .then(() => setNg1(win.angular))
+            .then(onSuccess, onError);
+
+        // When Saucelabs is flaky, some browsers (esp. mobile) take some time to load and execute
+        // the AngularJS scripts. Specifying a higher timeout here, reduces flaky-ness.
+      }, 60000);
+
+      afterAll(() => {
+        // `win.angular` will not be defined if loading the script in `berofeAll()` failed. In that
+        // case, avoid causing another error in `afterAll()`, because the reporter only shows the
+        // most recent error (thus hiding the original, possibly more informative, error message).
+        if (win.angular) {
+          // In these tests we are loading different versions of AngularJS on the same window.
+          // AngularJS leaves an "expandoId" property on `document`, which can trick subsequent
+          // `window.angular` instances into believing an app is already bootstrapped.
+          win.angular.element.cleanData([document]);
+        }
+
+        // Remove AngularJS to leave a clean state for subsequent tests.
+        setNg1(undefined);
+        delete win.angular;
+      });
+
+      methodsToPatch.forEach(method => win[method](function() {
+                               // Run the captured callbacks. (Async callbacks not supported.)
+                               methodCallbacks[method].forEach(cb => cb.call(this));
+                             }));
+
+      specSuite();
+    });
+  });
+}
+
+export function html(html: string): Element {
+  // Don't return `body` itself, because using it as a `$rootElement` for ng1
+  // will attach `$injector` to it and that will affect subsequent tests.
+  const body = document.body;
+  body.innerHTML = `<div>${html.trim()}</div>`;
+  const div = document.body.firstChild as Element;
+
+  if (div.childNodes.length === 1 && div.firstChild instanceof HTMLElement) {
+    return div.firstChild;
+  }
+
+  return div;
+}
+
+export function multiTrim(text: string | null | undefined, allSpace = false): string {
+  if (typeof text == 'string') {
+    const repl = allSpace ? '' : ' ';
+    return text.replace(/\n/g, '').replace(/\s+/g, repl).trim();
+  }
+  throw new Error('Argument can not be undefined.');
+}
+
+export function nodes(html: string) {
+  const div = document.createElement('div');
+  div.innerHTML = html.trim();
+  return Array.prototype.slice.call(div.childNodes);
+}
+
+export const withEachNg1Version = createWithEachNg1VersionFn(setAngularJSGlobal);
diff --git a/packages/upgrade/test/dynamic/test_helpers.ts b/packages/upgrade/test/dynamic/test_helpers.ts
new file mode 100644
index 000000000000..7723ecc361ce
--- /dev/null
+++ b/packages/upgrade/test/dynamic/test_helpers.ts
@@ -0,0 +1,23 @@
+/**
+ * @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 {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 $apply(adapter: UpgradeAdapterRef, exp: angular.Ng1Expression) {
+  const $rootScope = adapter.ng1Injector.get($ROOT_SCOPE) as angular.IRootScopeService;
+  $rootScope.$apply(exp);
+}
+
+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
new file mode 100644
index 000000000000..c99717d82627
--- /dev/null
+++ b/packages/upgrade/test/dynamic/upgrade_spec.ts
@@ -0,0 +1,3048 @@
+/**
+ * @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 {ChangeDetectorRef, Component, EventEmitter, Input, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory, NgZone, OnChanges, OnDestroy, Output, 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 {$apply, $digest, html, multiTrim, withEachNg1Version} from './test_helpers';
+
+declare global {
+  export var inject: Function;
+}
+
+withEachNg1Version(() => {
+  describe('adapter: ng1 to ng2', () => {
+    beforeEach(() => destroyPlatform());
+    afterEach(() => destroyPlatform());
+
+    describe('(basic use)', () => {
+      it('should have AngularJS loaded', () => expect(angular.version.major).toBe(1));
+
+      it('should instantiate ng2 in ng1 template and project content', async(() => {
+           const ng1Module = angular.module('ng1', []);
+
+           @Component({
+             selector: 'ng2',
+             template: `{{ 'NG2' }}(<ng-content></ng-content>)`,
+           })
+           class Ng2 {
+           }
+
+           @NgModule({declarations: [Ng2], imports: [BrowserModule]})
+           class Ng2Module {
+           }
+
+           const element =
+               html('<div>{{ \'ng1[\' }}<ng2>~{{ \'ng-content\' }}~</ng2>{{ \']\' }}</div>');
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2Module);
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(document.body.textContent).toEqual('ng1[NG2(~ng-content~)]');
+             ref.dispose();
+           });
+         }));
+
+      it('should instantiate ng1 in ng2 template and project content', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           @Component({
+             selector: 'ng2',
+             template: `{{ 'ng2(' }}<ng1>{{'transclude'}}</ng1>{{ ')' }}`,
+           })
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng1', () => {
+             return {transclude: true, template: '{{ "ng1" }}(<ng-transclude></ng-transclude>)'};
+           });
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+
+           const element = html('<div>{{\'ng1(\'}}<ng2></ng2>{{\')\'}}</div>');
+
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(document.body.textContent).toEqual('ng1(ng2(ng1(transclude)))');
+             ref.dispose();
+           });
+         }));
+
+      it('supports the compilerOptions argument', async(() => {
+           const platformRef = platformBrowserDynamic();
+           spyOn(platformRef, 'bootstrapModule').and.callThrough();
+           spyOn(platformRef, 'bootstrapModuleFactory').and.callThrough();
+
+           const ng1Module = angular.module('ng1', []);
+           @Component({selector: 'ng2', template: `{{ 'NG2' }}(<ng-content></ng-content>)`})
+           class Ng2 {
+           }
+
+           const element =
+               html('<div>{{ \'ng1[\' }}<ng2>~{{ \'ng-content\' }}~</ng2>{{ \']\' }}</div>');
+
+           @NgModule({
+             declarations: [Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2AppModule {
+             ngDoBootstrap() {}
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2AppModule, {providers: []});
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(platformRef.bootstrapModule).toHaveBeenCalledWith(jasmine.any(Function), [
+               {providers: []}, jasmine.any(Object)
+             ]);
+             expect(platformRef.bootstrapModuleFactory)
+                 .toHaveBeenCalledWith(
+                     jasmine.any(NgModuleFactory), {providers: [], ngZone: jasmine.any(NgZone)});
+             ref.dispose();
+           });
+         }));
+    });
+
+    describe('bootstrap errors', () => {
+      let adapter: UpgradeAdapter;
+
+      beforeEach(() => {
+        angular.module('ng1', []);
+
+        @Component({
+          selector: 'ng2',
+          template: `<BAD TEMPLATE div></div>`,
+        })
+        class ng2Component {
+        }
+
+        @NgModule({
+          declarations: [ng2Component],
+          imports: [BrowserModule],
+        })
+        class Ng2Module {
+        }
+
+        adapter = new UpgradeAdapter(Ng2Module);
+      });
+
+      it('should throw an uncaught error', fakeAsync(() => {
+           const resolveSpy = jasmine.createSpy('resolveSpy');
+           spyOn(console, 'error');
+
+           expect(() => {
+             adapter.bootstrap(html('<ng2></ng2>'), ['ng1']).ready(resolveSpy);
+             flushMicrotasks();
+           }).toThrowError();
+           expect(resolveSpy).not.toHaveBeenCalled();
+         }));
+
+      it('should output an error message to the console and re-throw', fakeAsync(() => {
+           const consoleErrorSpy: jasmine.Spy = spyOn(console, 'error');
+           expect(() => {
+             adapter.bootstrap(html('<ng2></ng2>'), ['ng1']);
+             flushMicrotasks();
+           }).toThrowError();
+           const args: any[] = consoleErrorSpy.calls.mostRecent().args;
+           expect(consoleErrorSpy).toHaveBeenCalled();
+           expect(args.length).toBeGreaterThan(0);
+           expect(args[0]).toEqual(jasmine.any(Error));
+         }));
+    });
+
+    describe('scope/component change-detection', () => {
+      it('should interleave scope and component expressions', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+           const log: string[] = [];
+           const l = (value: string) => {
+             log.push(value);
+             return value + ';';
+           };
+
+           ng1Module.directive('ng1a', () => ({template: '{{ l(\'ng1a\') }}'}));
+           ng1Module.directive('ng1b', () => ({template: '{{ l(\'ng1b\') }}'}));
+           ng1Module.run(($rootScope: any) => {
+             $rootScope.l = l;
+             $rootScope.reset = () => log.length = 0;
+           });
+
+           @Component({
+             selector: 'ng2',
+             template: `{{l('2A')}}<ng1a></ng1a>{{l('2B')}}<ng1b></ng1b>{{l('2C')}}`
+           })
+           class Ng2 {
+             l: any;
+             constructor() { this.l = l; }
+           }
+
+           @NgModule({
+             declarations:
+                 [adapter.upgradeNg1Component('ng1a'), adapter.upgradeNg1Component('ng1b'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+
+           const element =
+               html('<div>{{reset(); l(\'1A\');}}<ng2>{{l(\'1B\')}}</ng2>{{l(\'1C\')}}</div>');
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             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']);
+             ref.dispose();
+           });
+         }));
+
+
+      it('should propagate changes to a downgraded component inside the ngZone', async(() => {
+           let appComponent: AppComponent;
+           let upgradeRef: UpgradeAdapterRef;
+
+           @Component({selector: 'my-app', template: '<my-child [value]="value"></my-child>'})
+           class AppComponent {
+             // TODO(issue/24571): remove '!'.
+             value !: number;
+             constructor() { appComponent = this; }
+           }
+
+           @Component({
+             selector: 'my-child',
+             template: '<div>{{valueFromPromise}}',
+           })
+           class ChildComponent {
+             // TODO(issue/24571): remove '!'.
+             valueFromPromise !: number;
+             @Input()
+             set value(v: number) { expect(NgZone.isInAngularZone()).toBe(true); }
+
+             constructor(private zone: NgZone) {}
+
+             ngOnChanges(changes: SimpleChanges) {
+               if (changes['value'].isFirstChange()) return;
+
+               this.zone.onMicrotaskEmpty.subscribe(() => {
+                 expect(element.textContent).toEqual('5');
+                 upgradeRef.dispose();
+               });
+
+               Promise.resolve().then(() => this.valueFromPromise = changes['value'].currentValue);
+             }
+           }
+
+           @NgModule({declarations: [AppComponent, ChildComponent], imports: [BrowserModule]})
+           class Ng2Module {
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []).directive(
+               'myApp', adapter.downgradeNg2Component(AppComponent));
+
+           const element = html('<my-app></my-app>');
+
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             upgradeRef = ref;
+             appComponent.value = 5;
+           });
+         }));
+
+      // This test demonstrates https://github.com/angular/angular/issues/6385
+      // which was invalidly fixed by https://github.com/angular/angular/pull/6386
+      // it('should not trigger $digest from an async operation in a watcher', async(() => {
+      //      @Component({selector: 'my-app', template: ''})
+      //      class AppComponent {
+      //      }
+
+      //      @NgModule({declarations: [AppComponent], imports: [BrowserModule]})
+      //      class Ng2Module {
+      //      }
+
+      //      const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+      //      const ng1Module = angular.module('ng1', []).directive(
+      //          'myApp', adapter.downgradeNg2Component(AppComponent));
+
+      //      const element = html('<my-app></my-app>');
+
+      //      adapter.bootstrap(element, ['ng1']).ready((ref) => {
+      //        let doTimeout = false;
+      //        let timeoutId: number;
+      //        ref.ng1RootScope.$watch(() => {
+      //          if (doTimeout && !timeoutId) {
+      //            timeoutId = window.setTimeout(function() {
+      //              timeoutId = null;
+      //            }, 10);
+      //          }
+      //        });
+      //        doTimeout = true;
+      //      });
+      //    }));
+    });
+
+    describe('downgrade ng2 component', () => {
+      it('should allow non-element selectors for downgraded components', async(() => {
+           @Component({selector: '[itWorks]', template: 'It works'})
+           class WorksComponent {
+           }
+
+           @NgModule({declarations: [WorksComponent], imports: [BrowserModule]})
+           class Ng2Module {
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(WorksComponent));
+
+           const element = html('<ng2></ng2>');
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent !)).toBe('It works');
+           });
+         }));
+
+      it('should bind properties, events', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module =
+               angular.module('ng1', []).value('$exceptionHandler', (err: any) => { throw err; });
+
+           ng1Module.run(($rootScope: any) => {
+             $rootScope.name = 'world';
+             $rootScope.dataA = 'A';
+             $rootScope.dataB = 'B';
+             $rootScope.modelA = 'initModelA';
+             $rootScope.modelB = 'initModelB';
+             $rootScope.eventA = '?';
+             $rootScope.eventB = '?';
+           });
+           @Component({
+             selector: 'ng2',
+             inputs: ['literal', 'interpolate', 'oneWayA', 'oneWayB', 'twoWayA', 'twoWayB'],
+             outputs: [
+               'eventA', 'eventB', 'twoWayAEmitter: twoWayAChange', 'twoWayBEmitter: twoWayBChange'
+             ],
+             template: 'ignore: {{ignore}}; ' +
+                 'literal: {{literal}}; interpolate: {{interpolate}}; ' +
+                 'oneWayA: {{oneWayA}}; oneWayB: {{oneWayB}}; ' +
+                 'twoWayA: {{twoWayA}}; twoWayB: {{twoWayB}}; ({{ngOnChangesCount}})'
+           })
+           class Ng2 {
+             ngOnChangesCount = 0;
+             ignore = '-';
+             literal = '?';
+             interpolate = '?';
+             oneWayA = '?';
+             oneWayB = '?';
+             twoWayA = '?';
+             twoWayB = '?';
+             eventA = new EventEmitter();
+             eventB = new EventEmitter();
+             twoWayAEmitter = new EventEmitter();
+             twoWayBEmitter = new EventEmitter();
+             ngOnChanges(changes: SimpleChanges) {
+               const assert = (prop: string, value: any) => {
+                 if ((this as any)[prop] != value) {
+                   throw new Error(
+                       `Expected: '${prop}' to be '${value}' but was '${(this as any)[prop]}'`);
+                 }
+               };
+
+               const assertChange = (prop: string, value: any) => {
+                 assert(prop, value);
+                 if (!changes[prop]) {
+                   throw new Error(`Changes record for '${prop}' not found.`);
+                 }
+                 const actValue = changes[prop].currentValue;
+                 if (actValue != value) {
+                   throw new Error(
+                       `Expected changes record for'${prop}' to be '${value}' but was '${actValue}'`);
+                 }
+               };
+
+               switch (this.ngOnChangesCount++) {
+                 case 0:
+                   assert('ignore', '-');
+                   assertChange('literal', 'Text');
+                   assertChange('interpolate', 'Hello world');
+                   assertChange('oneWayA', 'A');
+                   assertChange('oneWayB', 'B');
+                   assertChange('twoWayA', 'initModelA');
+                   assertChange('twoWayB', 'initModelB');
+
+                   this.twoWayAEmitter.emit('newA');
+                   this.twoWayBEmitter.emit('newB');
+                   this.eventA.emit('aFired');
+                   this.eventB.emit('bFired');
+                   break;
+                 case 1:
+                   assertChange('twoWayA', 'newA');
+                   assertChange('twoWayB', 'newB');
+                   break;
+                 case 2:
+                   assertChange('interpolate', 'Hello everyone');
+                   break;
+                 default:
+                   throw new Error('Called too many times! ' + JSON.stringify(changes));
+               }
+             }
+           }
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+
+           @NgModule({
+             declarations: [Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           const element = html(`<div>
+              <ng2 literal="Text" interpolate="Hello {{name}}"
+                   bind-one-way-a="dataA" [one-way-b]="dataB"
+                   bindon-two-way-a="modelA" [(two-way-b)]="modelB"
+                   on-event-a='eventA=$event' (event-b)="eventB=$event"></ng2>
+              | modelA: {{modelA}}; modelB: {{modelB}}; eventA: {{eventA}}; eventB: {{eventB}};
+              </div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent !))
+                 .toEqual(
+                     'ignore: -; ' +
+                     'literal: Text; interpolate: Hello world; ' +
+                     'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (2) | ' +
+                     'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;');
+
+             ref.ng1RootScope.$apply('name = "everyone"');
+             expect(multiTrim(document.body.textContent !))
+                 .toEqual(
+                     'ignore: -; ' +
+                     'literal: Text; interpolate: Hello everyone; ' +
+                     'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (3) | ' +
+                     'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;');
+
+             ref.dispose();
+           });
+
+         }));
+
+      it('should support two-way binding and event listener', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const listenerSpy = jasmine.createSpy('$rootScope.listener');
+           const ng1Module = angular.module('ng1', []).run(($rootScope: angular.IScope) => {
+             $rootScope['value'] = 'world';
+             $rootScope['listener'] = listenerSpy;
+           });
+
+           @Component({selector: 'ng2', template: `model: {{model}};`})
+           class Ng2Component implements OnChanges {
+             ngOnChangesCount = 0;
+             @Input() model = '?';
+             @Output() modelChange = new EventEmitter();
+
+             ngOnChanges(changes: SimpleChanges) {
+               switch (this.ngOnChangesCount++) {
+                 case 0:
+                   expect(changes.model.currentValue).toBe('world');
+                   this.modelChange.emit('newC');
+                   break;
+                 case 1:
+                   expect(changes.model.currentValue).toBe('newC');
+                   break;
+                 default:
+                   throw new Error('Called too many times! ' + JSON.stringify(changes));
+               }
+             }
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+           @NgModule({declarations: [Ng2Component], imports: [BrowserModule]})
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           const element = html(`
+           <div>
+             <ng2 [(model)]="value" (model-change)="listener($event)"></ng2>
+             | value: {{value}}
+           </div>
+         `);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(element.textContent)).toEqual('model: newC; | value: newC');
+             expect(listenerSpy).toHaveBeenCalledWith('newC');
+             ref.dispose();
+           });
+         }));
+
+      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;
+             // TODO(issue/24571): remove '!'.
+             initialValue !: string;
+             // TODO(issue/24571): remove '!'.
+             @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', []);
+
+           ng1Module.run(($rootScope: any /** TODO #9100 */) => { $rootScope.modelA = 'A'; });
+
+           let ng2Instance: Ng2;
+           @Component({selector: 'ng2', template: '{{_value}}'})
+           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);
+             }
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2 ng-model="modelA"></ng2> | {{modelA}}</div>`);
+
+           @NgModule({
+             declarations: [Ng2],
+             imports: [BrowserModule],
+             schemas: [NO_ERRORS_SCHEMA],
+           })
+           class Ng2Module {
+           }
+
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             let $rootScope: any = ref.ng1RootScope;
+
+             expect(multiTrim(document.body.textContent)).toEqual('A | A');
+
+             $rootScope.modelA = 'B';
+             $rootScope.$apply();
+             expect(multiTrim(document.body.textContent)).toEqual('B | B');
+
+             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);
+
+             ref.dispose();
+           });
+         }));
+
+      it('should properly run cleanup when ng1 directive is destroyed', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+           const onDestroyed: EventEmitter<string> = new EventEmitter<string>();
+
+           ng1Module.directive('ng1', () => {
+             return {
+               template: '<div ng-if="!destroyIt"><ng2></ng2></div>',
+               controller: function($rootScope: any, $timeout: Function) {
+                 $timeout(() => { $rootScope.destroyIt = true; });
+               }
+             };
+           });
+
+           @Component({selector: 'ng2', template: 'test'})
+           class Ng2 {
+             ngOnDestroy() { onDestroyed.emit('destroyed'); }
+           }
+
+           @NgModule({
+             declarations: [Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html('<ng1></ng1>');
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             onDestroyed.subscribe(() => { ref.dispose(); });
+           });
+         }));
+
+      it('should properly run cleanup with multiple levels of nesting', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           let destroyed = false;
+
+           @Component(
+               {selector: 'ng2-outer', template: '<div *ngIf="!destroyIt"><ng1></ng1></div>'})
+           class Ng2OuterComponent {
+             @Input() destroyIt = false;
+           }
+
+           @Component({selector: 'ng2-inner', template: 'test'})
+           class Ng2InnerComponent implements OnDestroy {
+             ngOnDestroy() { destroyed = true; }
+           }
+
+           @NgModule({
+             imports: [BrowserModule],
+             declarations:
+                 [Ng2InnerComponent, Ng2OuterComponent, adapter.upgradeNg1Component('ng1')],
+             schemas: [NO_ERRORS_SCHEMA],
+           })
+           class Ng2Module {
+           }
+
+           const ng1Module =
+               angular.module('ng1', [])
+                   .directive('ng1', () => ({template: '<ng2-inner></ng2-inner>'}))
+                   .directive('ng2Inner', adapter.downgradeNg2Component(Ng2InnerComponent))
+                   .directive('ng2Outer', adapter.downgradeNg2Component(Ng2OuterComponent));
+
+           const element = html('<ng2-outer [destroy-it]="destroyIt"></ng2-outer>');
+
+           adapter.bootstrap(element, [ng1Module.name]).ready(ref => {
+             expect(element.textContent).toBe('test');
+             expect(destroyed).toBe(false);
+
+             $apply(ref, 'destroyIt = true');
+
+             expect(element.textContent).toBe('');
+             expect(destroyed).toBe(true);
+           });
+         }));
+
+      it('should fallback to the root ng2.injector when compiled outside the dom', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           ng1Module.directive('ng1', [
+             '$compile',
+             ($compile: Function) => {
+               return {
+                 link: function($scope: any, $element: any, $attrs: any) {
+                   const compiled = $compile('<ng2></ng2>');
+                   const template = compiled($scope);
+                   $element.append(template);
+                 }
+               };
+             }
+           ]);
+
+           @Component({selector: 'ng2', template: 'test'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html('<ng1></ng1>');
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('test');
+             ref.dispose();
+           });
+         }));
+
+      it('should support multi-slot projection', async(() => {
+           const ng1Module = angular.module('ng1', []);
+
+           @Component({
+             selector: 'ng2',
+             template: '2a(<ng-content select=".ng1a"></ng-content>)' +
+                 '2b(<ng-content select=".ng1b"></ng-content>)'
+           })
+           class Ng2 {
+           }
+
+           @NgModule({declarations: [Ng2], imports: [BrowserModule]})
+           class Ng2Module {
+           }
+
+           // The ng-if on one of the projected children is here to make sure
+           // the correct slot is targeted even with structural directives in play.
+           const element = html(
+               '<ng2><div ng-if="true" class="ng1a">1a</div><div' +
+               ' class="ng1b">1b</div></ng2>');
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2Module);
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(document.body.textContent).toEqual('2a(1a)2b(1b)');
+             ref.dispose();
+           });
+         }));
+
+      it('should correctly project structural directives', async(() => {
+           @Component({selector: 'ng2', template: 'ng2-{{ itemId }}(<ng-content></ng-content>)'})
+           class Ng2Component {
+             // TODO(issue/24571): remove '!'.
+             @Input() itemId !: string;
+           }
+
+           @NgModule({imports: [BrowserModule], declarations: [Ng2Component]})
+           class Ng2Module {
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2Module);
+           const ng1Module = angular.module('ng1', [])
+                                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component))
+                                 .run(($rootScope: angular.IRootScopeService) => {
+                                   $rootScope['items'] = [
+                                     {id: 'a', subitems: [1, 2, 3]}, {id: 'b', subitems: [4, 5, 6]},
+                                     {id: 'c', subitems: [7, 8, 9]}
+                                   ];
+                                 });
+
+           const element = html(`
+             <ng2 ng-repeat="item in items" [item-id]="item.id">
+               <div ng-repeat="subitem in item.subitems">{{ subitem }}</div>
+             </ng2>
+           `);
+
+           adapter.bootstrap(element, [ng1Module.name]).ready(ref => {
+             expect(multiTrim(document.body.textContent))
+                 .toBe('ng2-a( 123 )ng2-b( 456 )ng2-c( 789 )');
+             ref.dispose();
+           });
+         }));
+
+      it('should allow attribute selectors for components in ng2', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
+           const ng1Module = angular.module('myExample', []);
+
+           @Component({selector: '[works]', template: 'works!'})
+           class WorksComponent {
+           }
+
+           @Component({selector: 'root-component', template: 'It <div works></div>'})
+           class RootComponent {
+           }
+
+           @NgModule({imports: [BrowserModule], declarations: [RootComponent, WorksComponent]})
+           class MyNg2Module {
+           }
+
+           ng1Module.directive('rootComponent', adapter.downgradeNg2Component(RootComponent));
+
+           document.body.innerHTML = '<root-component></root-component>';
+           adapter.bootstrap(document.body.firstElementChild !, ['myExample']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('It works!');
+             ref.dispose();
+           });
+         }));
+    });
+
+    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: {{modelA}}; B: {{modelB}}; C: {{modelC}}; | ',
+               scope: {fullName: '@', modelA: '=dataA', modelB: '=dataB', modelC: '=', event: '&'},
+               link: function(scope: any) {
+                 scope.$watch('modelB', (v: string) => {
+                   if (v == 'Savkin') {
+                     scope.modelB = 'SAVKIN';
+                     scope.event('WORKS');
+
+                     // Should not update because [model-a] is uni directional
+                     scope.modelA = 'VICTOR';
+                   }
+                 });
+               }
+             };
+           };
+           ng1Module.directive('ng1', ng1);
+           @Component({
+             selector: 'ng2',
+             template:
+                 '<ng1 fullName="{{last}}, {{first}}, {{city}}" [dataA]="first" [(dataB)]="last" [modelC]="city" ' +
+                 '(event)="event=$event"></ng1>' +
+                 '<ng1 fullName="{{\'TEST\'}}" dataA="First" dataB="Last" modelC="City"></ng1>' +
+                 '{{event}}-{{last}}, {{first}}, {{city}}'
+           })
+           class Ng2 {
+             first = 'Victor';
+             last = 'Savkin';
+             city = 'SF';
+             event = '?';
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule
+             // events, and so without this we would not see the events processed.
+             setTimeout(() => {
+               expect(multiTrim(document.body.textContent))
+                   .toEqual(
+                       'Hello SAVKIN, Victor, SF; A: VICTOR; B: SAVKIN; C: SF; | Hello TEST; A: First; B: Last; C: City; | WORKS-SAVKIN, Victor, SF');
+               ref.dispose();
+             }, 0);
+           });
+         }));
+
+      it('should bind optional properties', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const ng1 = () => {
+             return {
+               template: 'Hello; A: {{modelA}}; B: {{modelB}}; | ',
+               scope: {modelA: '=?dataA', modelB: '=?'}
+             };
+           };
+           ng1Module.directive('ng1', ng1);
+           @Component({
+             selector: 'ng2',
+             template: '<ng1 [dataA]="first" [modelB]="last"></ng1>' +
+                 '<ng1 dataA="First" modelB="Last"></ng1>' +
+                 '<ng1></ng1>' +
+                 '<ng1></ng1>'
+           })
+           class Ng2 {
+             first = 'Victor';
+             last = 'Savkin';
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule
+             // events, and so without this we would not see the events processed.
+             setTimeout(() => {
+               expect(multiTrim(document.body.textContent))
+                   .toEqual(
+                       'Hello; A: Victor; B: Savkin; | Hello; A: First; B: Last; | Hello; A: ; B: ; | Hello; A: ; B: ; |');
+               ref.dispose();
+             }, 0);
+           });
+         }));
+
+      it('should bind properties, events in controller when bindToController is not used',
+         async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const ng1 = () => {
+             return {
+               restrict: 'E',
+               template: '{{someText}} - Length: {{data.length}}',
+               scope: {data: '='},
+               controller: function($scope: any) { $scope.someText = 'ng1 - Data: ' + $scope.data; }
+             };
+           };
+
+           ng1Module.directive('ng1', ng1);
+           @Component({
+             selector: 'ng2',
+             template:
+                 '{{someText}} - Length: {{dataList.length}} | <ng1 [(data)]="dataList"></ng1>'
+           })
+           class Ng2 {
+             dataList = [1, 2, 3];
+             someText = 'ng2';
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule
+             // events, and so without this we would not see the events processed.
+             setTimeout(() => {
+               expect(multiTrim(document.body.textContent))
+                   .toEqual('ng2 - Length: 3 | ng1 - Data: 1,2,3 - Length: 3');
+               ref.dispose();
+             }, 0);
+           });
+         }));
+
+      it('should bind properties, events in link function', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const ng1 = () => {
+             return {
+               restrict: 'E',
+               template: '{{someText}} - Length: {{data.length}}',
+               scope: {data: '='},
+               link: function($scope: any) { $scope.someText = 'ng1 - Data: ' + $scope.data; }
+             };
+           };
+
+           ng1Module.directive('ng1', ng1);
+           @Component({
+             selector: 'ng2',
+             template:
+                 '{{someText}} - Length: {{dataList.length}} | <ng1 [(data)]="dataList"></ng1>'
+           })
+           class Ng2 {
+             dataList = [1, 2, 3];
+             someText = 'ng2';
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule
+             // events, and so without this we would not see the events processed.
+             setTimeout(() => {
+               expect(multiTrim(document.body.textContent))
+                   .toEqual('ng2 - Length: 3 | ng1 - Data: 1,2,3 - Length: 3');
+               ref.dispose();
+             }, 0);
+           });
+         }));
+
+      it('should support templateUrl fetched from $httpBackend', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+           ng1Module.value(
+               '$httpBackend', (method: string, url: string, post: any, cbFn: Function) => {
+                 cbFn(200, `${method}:${url}`);
+               });
+
+           const ng1 = () => { return {templateUrl: 'url.html'}; };
+           ng1Module.directive('ng1', ng1);
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('GET:url.html');
+             ref.dispose();
+           });
+         }));
+
+      it('should support templateUrl as a function', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+           ng1Module.value(
+               '$httpBackend', (method: string, url: string, post: any, cbFn: Function) => {
+                 cbFn(200, `${method}:${url}`);
+               });
+
+           const ng1 = () => { return {templateUrl() { return 'url.html'; }}; };
+           ng1Module.directive('ng1', ng1);
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('GET:url.html');
+             ref.dispose();
+           });
+         }));
+
+      it('should support empty template', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const ng1 = () => { return {template: ''}; };
+           ng1Module.directive('ng1', ng1);
+
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('');
+             ref.dispose();
+           });
+         }));
+
+      it('should support template as a function', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const ng1 = () => { return {template() { return ''; }}; };
+           ng1Module.directive('ng1', ng1);
+
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('');
+             ref.dispose();
+           });
+         }));
+
+      it('should support templateUrl fetched from $templateCache', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+           ng1Module.run(($templateCache: any) => $templateCache.put('url.html', 'WORKS'));
+
+           const ng1 = () => { return {templateUrl: 'url.html'}; };
+           ng1Module.directive('ng1', ng1);
+
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('WORKS');
+             ref.dispose();
+           });
+         }));
+
+      it('should support controller with controllerAs', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const ng1 = () => {
+             return {
+               scope: true,
+               template:
+                   '{{ctl.scope}}; {{ctl.isClass}}; {{ctl.hasElement}}; {{ctl.isPublished()}}',
+               controllerAs: 'ctl',
+               controller: class {
+                 scope: any; hasElement: string; $element: any; isClass: any;
+                 constructor($scope: any, $element: any) {
+                   this.verifyIAmAClass();
+                   this.scope = $scope.$parent.$parent == $scope.$root ? 'scope' : 'wrong-scope';
+                   this.hasElement = $element[0].nodeName;
+                   this.$element = $element;
+                 } verifyIAmAClass() { this.isClass = 'isClass'; } isPublished() {
+                   return this.$element.controller('ng1') == this ? 'published' : 'not-published';
+                 }
+               }
+             };
+           };
+           ng1Module.directive('ng1', ng1);
+
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('scope; isClass; NG1; published');
+             ref.dispose();
+           });
+         }));
+
+      it('should support bindToController', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const ng1 = () => {
+             return {
+               scope: {title: '@'},
+               bindToController: true,
+               template: '{{ctl.title}}',
+               controllerAs: 'ctl',
+               controller: class {}
+             };
+           };
+           ng1Module.directive('ng1', ng1);
+
+           @Component({selector: 'ng2', template: '<ng1 title="WORKS"></ng1>'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('WORKS');
+             ref.dispose();
+           });
+         }));
+
+      it('should support bindToController with bindings', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const ng1 = () => {
+             return {
+               scope: {},
+               bindToController: {title: '@'},
+               template: '{{ctl.title}}',
+               controllerAs: 'ctl',
+               controller: class {}
+             };
+           };
+           ng1Module.directive('ng1', ng1);
+
+           @Component({selector: 'ng2', template: '<ng1 title="WORKS"></ng1>'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('WORKS');
+             ref.dispose();
+           });
+         }));
+
+      it('should support single require in linking fn', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const ng1 = ($rootScope: any) => {
+             return {
+               scope: {title: '@'},
+               bindToController: true,
+               template: '{{ctl.status}}',
+               require: 'ng1',
+               controllerAs: 'ctrl',
+               controller: class {status = 'WORKS';},
+               link: function(scope: any, element: any, attrs: any, linkController: any) {
+                 expect(scope.$root).toEqual($rootScope);
+                 expect(element[0].nodeName).toEqual('NG1');
+                 expect(linkController.status).toEqual('WORKS');
+                 scope.ctl = linkController;
+               }
+             };
+           };
+           ng1Module.directive('ng1', ng1);
+
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('WORKS');
+             ref.dispose();
+           });
+         }));
+
+      it('should support array require in linking fn', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const parent = () => { return {controller: class {parent = 'PARENT';}}; };
+           const ng1 = () => {
+             return {
+               scope: {title: '@'},
+               bindToController: true,
+               template: '{{parent.parent}}:{{ng1.status}}',
+               require: ['ng1', '^parent', '?^^notFound'],
+               controllerAs: 'ctrl',
+               controller: class {status = 'WORKS';},
+               link: function(scope: any, element: any, attrs: any, linkControllers: any) {
+                 expect(linkControllers[0].status).toEqual('WORKS');
+                 expect(linkControllers[1].parent).toEqual('PARENT');
+                 expect(linkControllers[2]).toBe(undefined);
+                 scope.ng1 = linkControllers[0];
+                 scope.parent = linkControllers[1];
+               }
+             };
+           };
+           ng1Module.directive('parent', parent);
+           ng1Module.directive('ng1', ng1);
+
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           const element = html(`<div><parent><ng2></ng2></parent></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('PARENT:WORKS');
+             ref.dispose();
+           });
+         }));
+
+      describe('with lifecycle hooks', () => {
+        it('should call `$onInit()` on controller', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const $onInitSpyA = jasmine.createSpy('$onInitA');
+             const $onInitSpyB = jasmine.createSpy('$onInitB');
+
+             @Component({selector: 'ng2', template: '<ng1-a></ng1-a> | <ng1-b></ng1-b>'})
+             class Ng2Component {
+             }
+
+             angular.module('ng1', [])
+                 .directive('ng1A', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: true,
+                                      controllerAs: '$ctrl',
+                                      controller: class {$onInit() { $onInitSpyA(); }}
+                                    }))
+                 .directive('ng1B', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: false,
+                                      controllerAs: '$ctrl',
+                                      controller: function() { this.$onInit = $onInitSpyB; }
+                                    }))
+                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             @NgModule({
+               declarations: [
+                 adapter.upgradeNg1Component('ng1A'), adapter.upgradeNg1Component('ng1B'),
+                 Ng2Component
+               ],
+               imports: [BrowserModule],
+             })
+             class Ng2Module {
+             }
+
+             const element = html(`<div><ng2></ng2></div>`);
+             adapter.bootstrap(element, ['ng1']).ready((ref) => {
+               expect($onInitSpyA).toHaveBeenCalled();
+               expect($onInitSpyB).toHaveBeenCalled();
+
+               ref.dispose();
+             });
+           }));
+
+        it('should not call `$onInit()` on scope', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const $onInitSpy = jasmine.createSpy('$onInit');
+
+             @Component({selector: 'ng2', template: '<ng1-a></ng1-a> | <ng1-b></ng1-b>'})
+             class Ng2Component {
+             }
+
+             angular.module('ng1', [])
+                 .directive('ng1A', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: true,
+                                      controllerAs: '$ctrl',
+                                      controller: function($scope: angular.IScope) {
+                                        Object.getPrototypeOf($scope).$onInit = $onInitSpy;
+                                      }
+                                    }))
+                 .directive('ng1B', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: false,
+                                      controllerAs: '$ctrl',
+                                      controller: function($scope: angular.IScope) {
+                                        $scope['$onInit'] = $onInitSpy;
+                                      }
+                                    }))
+                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             @NgModule({
+               declarations: [
+                 adapter.upgradeNg1Component('ng1A'), adapter.upgradeNg1Component('ng1B'),
+                 Ng2Component
+               ],
+               imports: [BrowserModule],
+             })
+             class Ng2Module {
+             }
+
+             const element = html(`<div><ng2></ng2></div>`);
+             adapter.bootstrap(element, ['ng1']).ready((ref) => {
+               expect($onInitSpy).not.toHaveBeenCalled();
+               ref.dispose();
+             });
+           }));
+
+        it('should call `$doCheck()` on controller', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const $doCheckSpyA = jasmine.createSpy('$doCheckA');
+             const $doCheckSpyB = jasmine.createSpy('$doCheckB');
+             let changeDetector: ChangeDetectorRef;
+
+             @Component({selector: 'ng2', template: '<ng1-a></ng1-a> | <ng1-b></ng1-b>'})
+             class Ng2Component {
+               constructor(cd: ChangeDetectorRef) { changeDetector = cd; }
+             }
+
+             angular.module('ng1', [])
+                 .directive('ng1A', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: true,
+                                      controllerAs: '$ctrl',
+                                      controller: class {$doCheck() { $doCheckSpyA(); }}
+                                    }))
+                 .directive('ng1B', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: false,
+                                      controllerAs: '$ctrl',
+                                      controller: function() { this.$doCheck = $doCheckSpyB; }
+                                    }))
+                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             @NgModule({
+               declarations: [
+                 adapter.upgradeNg1Component('ng1A'), adapter.upgradeNg1Component('ng1B'),
+                 Ng2Component
+               ],
+               imports: [BrowserModule],
+             })
+             class Ng2Module {
+             }
+
+             const element = html(`<div><ng2></ng2></div>`);
+             adapter.bootstrap(element, ['ng1']).ready((ref) => {
+               expect($doCheckSpyA).toHaveBeenCalled();
+               expect($doCheckSpyB).toHaveBeenCalled();
+
+               $doCheckSpyA.calls.reset();
+               $doCheckSpyB.calls.reset();
+               changeDetector.detectChanges();
+
+               expect($doCheckSpyA).toHaveBeenCalled();
+               expect($doCheckSpyB).toHaveBeenCalled();
+
+               ref.dispose();
+             });
+           }));
+
+        it('should not call `$doCheck()` on scope', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const $doCheckSpyA = jasmine.createSpy('$doCheckA');
+             const $doCheckSpyB = jasmine.createSpy('$doCheckB');
+             let changeDetector: ChangeDetectorRef;
+
+             @Component({selector: 'ng2', template: '<ng1-a></ng1-a> | <ng1-b></ng1-b>'})
+             class Ng2Component {
+               constructor(cd: ChangeDetectorRef) { changeDetector = cd; }
+             }
+
+             angular.module('ng1', [])
+                 .directive('ng1A', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: true,
+                                      controllerAs: '$ctrl',
+                                      controller: function($scope: angular.IScope) {
+                                        Object.getPrototypeOf($scope).$doCheck = $doCheckSpyA;
+                                      }
+                                    }))
+                 .directive('ng1B', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: false,
+                                      controllerAs: '$ctrl',
+                                      controller: function($scope: angular.IScope) {
+                                        $scope['$doCheck'] = $doCheckSpyB;
+                                      }
+                                    }))
+                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             @NgModule({
+               declarations: [
+                 adapter.upgradeNg1Component('ng1A'), adapter.upgradeNg1Component('ng1B'),
+                 Ng2Component
+               ],
+               imports: [BrowserModule],
+             })
+             class Ng2Module {
+             }
+
+             const element = html(`<div><ng2></ng2></div>`);
+             adapter.bootstrap(element, ['ng1']).ready((ref) => {
+               $doCheckSpyA.calls.reset();
+               $doCheckSpyB.calls.reset();
+               changeDetector.detectChanges();
+
+               expect($doCheckSpyA).not.toHaveBeenCalled();
+               expect($doCheckSpyB).not.toHaveBeenCalled();
+
+               ref.dispose();
+             });
+           }));
+
+        it('should call `$postLink()` on controller', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const $postLinkSpyA = jasmine.createSpy('$postLinkA');
+             const $postLinkSpyB = jasmine.createSpy('$postLinkB');
+
+             @Component({selector: 'ng2', template: '<ng1-a></ng1-a> | <ng1-b></ng1-b>'})
+             class Ng2Component {
+             }
+
+             angular.module('ng1', [])
+                 .directive('ng1A', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: true,
+                                      controllerAs: '$ctrl',
+                                      controller: class {$postLink() { $postLinkSpyA(); }}
+                                    }))
+                 .directive('ng1B', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: false,
+                                      controllerAs: '$ctrl',
+                                      controller: function() { this.$postLink = $postLinkSpyB; }
+                                    }))
+                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             @NgModule({
+               declarations: [
+                 adapter.upgradeNg1Component('ng1A'), adapter.upgradeNg1Component('ng1B'),
+                 Ng2Component
+               ],
+               imports: [BrowserModule],
+             })
+             class Ng2Module {
+             }
+
+             const element = html(`<div><ng2></ng2></div>`);
+             adapter.bootstrap(element, ['ng1']).ready((ref) => {
+               expect($postLinkSpyA).toHaveBeenCalled();
+               expect($postLinkSpyB).toHaveBeenCalled();
+
+               ref.dispose();
+             });
+           }));
+
+        it('should not call `$postLink()` on scope', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const $postLinkSpy = jasmine.createSpy('$postLink');
+
+             @Component({selector: 'ng2', template: '<ng1-a></ng1-a> | <ng1-b></ng1-b>'})
+             class Ng2Component {
+             }
+
+             angular.module('ng1', [])
+                 .directive('ng1A', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: true,
+                                      controllerAs: '$ctrl',
+                                      controller: function($scope: angular.IScope) {
+                                        Object.getPrototypeOf($scope).$postLink = $postLinkSpy;
+                                      }
+                                    }))
+                 .directive('ng1B', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: false,
+                                      controllerAs: '$ctrl',
+                                      controller: function($scope: angular.IScope) {
+                                        $scope['$postLink'] = $postLinkSpy;
+                                      }
+                                    }))
+                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             @NgModule({
+               declarations: [
+                 adapter.upgradeNg1Component('ng1A'), adapter.upgradeNg1Component('ng1B'),
+                 Ng2Component
+               ],
+               imports: [BrowserModule],
+             })
+             class Ng2Module {
+             }
+
+             const element = html(`<div><ng2></ng2></div>`);
+             adapter.bootstrap(element, ['ng1']).ready((ref) => {
+               expect($postLinkSpy).not.toHaveBeenCalled();
+               ref.dispose();
+             });
+           }));
+
+        it('should call `$onChanges()` on binding destination', fakeAsync(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const $onChangesControllerSpyA = jasmine.createSpy('$onChangesControllerA');
+             const $onChangesControllerSpyB = jasmine.createSpy('$onChangesControllerB');
+             const $onChangesScopeSpy = jasmine.createSpy('$onChangesScope');
+             let ng2Instance: any;
+
+             @Component({
+               selector: 'ng2',
+               template: '<ng1-a [valA]="val"></ng1-a> | <ng1-b [valB]="val"></ng1-b>'
+             })
+             class Ng2Component {
+               constructor() { ng2Instance = this; }
+             }
+
+             angular.module('ng1', [])
+                 .directive('ng1A', () => ({
+                                      template: '',
+                                      scope: {valA: '<'},
+                                      bindToController: true,
+                                      controllerAs: '$ctrl',
+                                      controller: function($scope: angular.IScope) {
+                                        this.$onChanges = $onChangesControllerSpyA;
+                                      }
+                                    }))
+                 .directive(
+                     'ng1B',
+                     () => ({
+                       template: '',
+                       scope: {valB: '<'},
+                       bindToController: false,
+                       controllerAs: '$ctrl',
+                       controller: class {
+                         $onChanges(changes: SimpleChanges) { $onChangesControllerSpyB(changes); }
+                       }
+                     }))
+                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component))
+                 .run(($rootScope: angular.IRootScopeService) => {
+                   Object.getPrototypeOf($rootScope).$onChanges = $onChangesScopeSpy;
+                 });
+
+
+             @NgModule({
+               declarations: [
+                 adapter.upgradeNg1Component('ng1A'), adapter.upgradeNg1Component('ng1B'),
+                 Ng2Component
+               ],
+               imports: [BrowserModule],
+             })
+             class Ng2Module {
+             }
+
+             const element = html(`<div><ng2></ng2></div>`);
+             adapter.bootstrap(element, ['ng1']).ready((ref) => {
+               // Initial `$onChanges()` call
+               tick();
+
+               expect($onChangesControllerSpyA.calls.count()).toBe(1);
+               expect($onChangesControllerSpyA.calls.argsFor(0)[0]).toEqual({
+                 valA: jasmine.any(SimpleChange)
+               });
+
+               expect($onChangesControllerSpyB).not.toHaveBeenCalled();
+
+               expect($onChangesScopeSpy.calls.count()).toBe(1);
+               expect($onChangesScopeSpy.calls.argsFor(0)[0]).toEqual({
+                 valB: jasmine.any(SimpleChange)
+               });
+
+               $onChangesControllerSpyA.calls.reset();
+               $onChangesControllerSpyB.calls.reset();
+               $onChangesScopeSpy.calls.reset();
+
+               // `$onChanges()` call after a change
+               ng2Instance.val = 'new value';
+               tick();
+               ref.ng1RootScope.$digest();
+
+               expect($onChangesControllerSpyA.calls.count()).toBe(1);
+               expect($onChangesControllerSpyA.calls.argsFor(0)[0]).toEqual({
+                 valA: jasmine.objectContaining({currentValue: 'new value'})
+               });
+
+               expect($onChangesControllerSpyB).not.toHaveBeenCalled();
+
+               expect($onChangesScopeSpy.calls.count()).toBe(1);
+               expect($onChangesScopeSpy.calls.argsFor(0)[0]).toEqual({
+                 valB: jasmine.objectContaining({currentValue: 'new value'})
+               });
+
+               ref.dispose();
+             });
+           }));
+
+        it('should call `$onDestroy()` on controller', fakeAsync(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const $onDestroySpyA = jasmine.createSpy('$onDestroyA');
+             const $onDestroySpyB = jasmine.createSpy('$onDestroyB');
+             let ng2ComponentInstance: Ng2Component;
+
+             @Component({
+               selector: 'ng2',
+               template: `
+                <div *ngIf="!ng2Destroy">
+                  <ng1-a></ng1-a> | <ng1-b></ng1-b>
+                </div>
+              `
+             })
+             class Ng2Component {
+               ng2Destroy: boolean = false;
+               constructor() { ng2ComponentInstance = this; }
+             }
+
+             // On browsers that don't support `requestAnimationFrame` (IE 9, Android <= 4.3),
+             // `$animate` will use `setTimeout(..., 16.6)` instead. This timeout will still be
+             // on
+             // the queue at the end of the test, causing it to fail.
+             // Mocking animations (via `ngAnimateMock`) avoids the issue.
+             angular.module('ng1', ['ngAnimateMock'])
+                 .directive('ng1A', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: true,
+                                      controllerAs: '$ctrl',
+                                      controller: class {$onDestroy() { $onDestroySpyA(); }}
+                                    }))
+                 .directive('ng1B', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: false,
+                                      controllerAs: '$ctrl',
+                                      controller: function() { this.$onDestroy = $onDestroySpyB; }
+                                    }))
+                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             @NgModule({
+               declarations: [
+                 adapter.upgradeNg1Component('ng1A'), adapter.upgradeNg1Component('ng1B'),
+                 Ng2Component
+               ],
+               imports: [BrowserModule],
+             })
+             class Ng2Module {
+             }
+
+             const element = html(`<div ng-if="!ng1Destroy"><ng2></ng2></div>`);
+             adapter.bootstrap(element, ['ng1']).ready((ref) => {
+               const $rootScope = ref.ng1RootScope as any;
+
+               $rootScope.ng1Destroy = false;
+               tick();
+               $rootScope.$digest();
+
+               expect($onDestroySpyA).not.toHaveBeenCalled();
+               expect($onDestroySpyB).not.toHaveBeenCalled();
+
+               $rootScope.ng1Destroy = true;
+               tick();
+               $rootScope.$digest();
+
+               expect($onDestroySpyA).toHaveBeenCalled();
+               expect($onDestroySpyB).toHaveBeenCalled();
+
+               $onDestroySpyA.calls.reset();
+               $onDestroySpyB.calls.reset();
+
+               $rootScope.ng1Destroy = false;
+               tick();
+               $rootScope.$digest();
+
+               expect($onDestroySpyA).not.toHaveBeenCalled();
+               expect($onDestroySpyB).not.toHaveBeenCalled();
+
+               ng2ComponentInstance.ng2Destroy = true;
+               tick();
+               $rootScope.$digest();
+
+               expect($onDestroySpyA).toHaveBeenCalled();
+               expect($onDestroySpyB).toHaveBeenCalled();
+
+               ref.dispose();
+             });
+           }));
+
+        it('should not call `$onDestroy()` on scope', fakeAsync(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const $onDestroySpy = jasmine.createSpy('$onDestroy');
+             let ng2ComponentInstance: Ng2Component;
+
+             @Component({
+               selector: 'ng2',
+               template: `
+                <div *ngIf="!ng2Destroy">
+                  <ng1-a></ng1-a> | <ng1-b></ng1-b>
+                </div>
+              `
+             })
+             class Ng2Component {
+               ng2Destroy: boolean = false;
+               constructor() { ng2ComponentInstance = this; }
+             }
+
+             // On browsers that don't support `requestAnimationFrame` (IE 9, Android <= 4.3),
+             // `$animate` will use `setTimeout(..., 16.6)` instead. This timeout will still be
+             // on
+             // the queue at the end of the test, causing it to fail.
+             // Mocking animations (via `ngAnimateMock`) avoids the issue.
+             angular.module('ng1', ['ngAnimateMock'])
+                 .directive('ng1A', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: true,
+                                      controllerAs: '$ctrl',
+                                      controller: function($scope: angular.IScope) {
+                                        Object.getPrototypeOf($scope).$onDestroy = $onDestroySpy;
+                                      }
+                                    }))
+                 .directive('ng1B', () => ({
+                                      template: '',
+                                      scope: {},
+                                      bindToController: false,
+                                      controllerAs: '$ctrl',
+                                      controller: function($scope: angular.IScope) {
+                                        $scope['$onDestroy'] = $onDestroySpy;
+                                      }
+                                    }))
+                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             @NgModule({
+               declarations: [
+                 adapter.upgradeNg1Component('ng1A'), adapter.upgradeNg1Component('ng1B'),
+                 Ng2Component
+               ],
+               imports: [BrowserModule],
+             })
+             class Ng2Module {
+             }
+
+             const element = html(`<div ng-if="!ng1Destroy"><ng2></ng2></div>`);
+             adapter.bootstrap(element, ['ng1']).ready((ref) => {
+               const $rootScope = ref.ng1RootScope as any;
+
+               $rootScope.ng1Destroy = false;
+               tick();
+               $rootScope.$digest();
+
+               $rootScope.ng1Destroy = true;
+               tick();
+               $rootScope.$digest();
+
+               $rootScope.ng1Destroy = false;
+               tick();
+               $rootScope.$digest();
+
+               ng2ComponentInstance.ng2Destroy = true;
+               tick();
+               $rootScope.$digest();
+
+               expect($onDestroySpy).not.toHaveBeenCalled();
+
+               ref.dispose();
+             });
+           }));
+      });
+
+      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', []);
+
+           const ng1 = {
+             bindings: {personProfile: '<'},
+             template: 'Hello {{$ctrl.personProfile.firstName}} {{$ctrl.personProfile.lastName}}',
+             controller: class {}
+           };
+           ng1Module.component('ng1', ng1);
+
+           @Component({selector: 'ng2', template: '<ng1 [personProfile]="goku"></ng1>'})
+           class Ng2 {
+             goku = {firstName: 'GOKU', lastName: 'SAN'};
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+
+           const element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual(`Hello GOKU SAN`);
+             ref.dispose();
+           });
+         }));
+
+      it('should support ng2 > ng1 > ng2', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+
+           const ng1 = {
+             template: 'ng1(<ng2b></ng2b>)',
+           };
+           ng1Module.component('ng1', ng1);
+
+           @Component({selector: 'ng2a', template: 'ng2a(<ng1></ng1>)'})
+           class Ng2a {
+           }
+           ng1Module.directive('ng2a', adapter.downgradeNg2Component(Ng2a));
+
+           @Component({selector: 'ng2b', template: 'ng2b'})
+           class Ng2b {
+           }
+           ng1Module.directive('ng2b', adapter.downgradeNg2Component(Ng2b));
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2a, Ng2b],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           const element = html(`<div><ng2a></ng2a></div>`);
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toEqual('ng2a(ng1(ng2b))');
+           });
+         }));
+    });
+
+    describe('injection', () => {
+      function SomeToken() {}
+
+      it('should export ng2 instance to ng1', async(() => {
+           @NgModule({
+             providers: [{provide: SomeToken, useValue: 'correct_value'}],
+             imports: [BrowserModule],
+           })
+           class MyNg2Module {
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
+           const module = angular.module('myExample', []);
+           module.factory('someToken', adapter.downgradeNg2Provider(SomeToken));
+           adapter.bootstrap(html('<div>'), ['myExample']).ready((ref) => {
+             expect(ref.ng1Injector.get('someToken')).toBe('correct_value');
+             ref.dispose();
+           });
+         }));
+
+      it('should export ng1 instance to ng2', async(() => {
+           @NgModule({imports: [BrowserModule]})
+           class MyNg2Module {
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
+           const module = angular.module('myExample', []);
+           module.value('testValue', 'secreteToken');
+           adapter.upgradeNg1Provider('testValue');
+           adapter.upgradeNg1Provider('testValue', {asToken: 'testToken'});
+           adapter.upgradeNg1Provider('testValue', {asToken: String});
+           adapter.bootstrap(html('<div>'), ['myExample']).ready((ref) => {
+             expect(ref.ng2Injector.get('testValue')).toBe('secreteToken');
+             expect(ref.ng2Injector.get(String)).toBe('secreteToken');
+             expect(ref.ng2Injector.get('testToken')).toBe('secreteToken');
+             ref.dispose();
+           });
+         }));
+
+      it('should respect hierarchical dependency injection for ng2', async(() => {
+           const ng1Module = angular.module('ng1', []);
+
+           @Component({selector: 'ng2-parent', template: `ng2-parent(<ng-content></ng-content>)`})
+           class Ng2Parent {
+           }
+           @Component({selector: 'ng2-child', template: `ng2-child`})
+           class Ng2Child {
+             constructor(parent: Ng2Parent) {}
+           }
+
+           @NgModule({declarations: [Ng2Parent, Ng2Child], imports: [BrowserModule]})
+           class Ng2Module {
+           }
+
+           const element = html('<ng2-parent><ng2-child></ng2-child></ng2-parent>');
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2Module);
+           ng1Module.directive('ng2Parent', adapter.downgradeNg2Component(Ng2Parent))
+               .directive('ng2Child', adapter.downgradeNg2Component(Ng2Child));
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(document.body.textContent).toEqual('ng2-parent(ng2-child)');
+             ref.dispose();
+           });
+         }));
+    });
+
+    describe('testability', () => {
+      it('should handle deferred bootstrap', async(() => {
+           @NgModule({imports: [BrowserModule]})
+           class MyNg2Module {
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
+           angular.module('ng1', []);
+           let bootstrapResumed: boolean = false;
+
+           const element = html('<div></div>');
+           window.name = 'NG_DEFER_BOOTSTRAP!' + window.name;
+
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(bootstrapResumed).toEqual(true);
+             ref.dispose();
+           });
+
+           setTimeout(() => {
+             bootstrapResumed = true;
+             (<any>window).angular.resumeBootstrap();
+           }, 100);
+         }));
+
+      it('should propagate return value of resumeBootstrap', fakeAsync(() => {
+           @NgModule({imports: [BrowserModule]})
+           class MyNg2Module {
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
+           const ng1Module = angular.module('ng1', []);
+           let a1Injector: angular.IInjectorService|undefined;
+           ng1Module.run([
+             '$injector', function($injector: angular.IInjectorService) { a1Injector = $injector; }
+           ]);
+
+           const element = html('<div></div>');
+           window.name = 'NG_DEFER_BOOTSTRAP!' + window.name;
+
+           adapter.bootstrap(element, [ng1Module.name]).ready((ref) => { ref.dispose(); });
+
+           tick(100);
+
+           const value = (<any>window).angular.resumeBootstrap();
+           expect(value).toBe(a1Injector);
+         }));
+
+      it('should wait for ng2 testability', async(() => {
+           @NgModule({imports: [BrowserModule]})
+           class MyNg2Module {
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
+           angular.module('ng1', []);
+           const element = html('<div></div>');
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             const ng2Testability: Testability = ref.ng2Injector.get(Testability);
+             ng2Testability.increasePendingRequestCount();
+             let ng2Stable = false;
+
+             angular.getTestability(element).whenStable(() => {
+               expect(ng2Stable).toEqual(true);
+               ref.dispose();
+             });
+
+             setTimeout(() => {
+               ng2Stable = true;
+               ng2Testability.decreasePendingRequestCount();
+             }, 100);
+           });
+         }));
+    });
+
+    describe('examples', () => {
+      it('should verify UpgradeAdapter example', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const module = angular.module('myExample', []);
+
+           const ng1 = () => {
+             return {
+               scope: {title: '='},
+               transclude: true,
+               template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
+             };
+           };
+           module.directive('ng1', ng1);
+
+           @Component({
+             selector: 'ng2',
+             inputs: ['name'],
+             template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
+           })
+           class Ng2 {
+           }
+
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
+
+           module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+
+           document.body.innerHTML = '<ng2 name="World">project</ng2>';
+
+           adapter.bootstrap(document.body.firstElementChild !, ['myExample']).ready((ref) => {
+             expect(multiTrim(document.body.textContent))
+                 .toEqual('ng2[ng1[Hello World!](transclude)](project)');
+             ref.dispose();
+           });
+         }));
+    });
+
+    describe('registerForNg1Tests', () => {
+      let upgradeAdapterRef: UpgradeAdapterRef;
+      let $compile: angular.ICompileService;
+      let $rootScope: angular.IRootScopeService;
+
+      beforeEach(() => {
+        const ng1Module = angular.module('ng1', []);
+
+        @Component({
+          selector: 'ng2',
+          template: 'Hello World',
+        })
+        class Ng2 {
+        }
+
+        @NgModule({declarations: [Ng2], imports: [BrowserModule]})
+        class Ng2Module {
+        }
+
+        const upgradeAdapter = new UpgradeAdapter(Ng2Module);
+        ng1Module.directive('ng2', upgradeAdapter.downgradeNg2Component(Ng2));
+
+        upgradeAdapterRef = upgradeAdapter.registerForNg1Tests(['ng1']);
+      });
+
+      beforeEach(() => {
+        inject((_$compile_: angular.ICompileService, _$rootScope_: angular.IRootScopeService) => {
+          $compile = _$compile_;
+          $rootScope = _$rootScope_;
+        });
+      });
+
+      it('should be able to test ng1 components that use ng2 components', async(() => {
+           upgradeAdapterRef.ready(() => {
+             const element = $compile('<ng2></ng2>')($rootScope);
+             $rootScope.$digest();
+             expect(element[0].textContent).toContain('Hello World');
+           });
+         }));
+    });
+  });
+});
diff --git a/packages/upgrade/test/static/angular1_providers_spec.ts b/packages/upgrade/test/static/angular1_providers_spec.ts
new file mode 100644
index 000000000000..b43b524cc03c
--- /dev/null
+++ b/packages/upgrade/test/static/angular1_providers_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 {Ng1Token} from '@angular/upgrade/static/src/common/angular1';
+import {compileFactory, injectorFactory, parseFactory, rootScopeFactory, setTempInjectorRef} from '@angular/upgrade/static/src/static/angular1_providers';
+
+{
+  describe('upgrade angular1_providers', () => {
+    describe('compileFactory', () => {
+      it('should retrieve and return `$compile`', () => {
+        const services: {[key: string]: any} = {$compile: 'foo'};
+        const mockInjector = {get: (name: Ng1Token): any => services[name], has: () => true};
+
+        expect(compileFactory(mockInjector)).toBe('foo');
+      });
+    });
+
+    describe('injectorFactory', () => {
+      it('should return the injector value that was previously set', () => {
+        const mockInjector = {get: () => {}, has: () => false};
+        setTempInjectorRef(mockInjector);
+        const injector = injectorFactory();
+        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();
+        expect(injectorFactory).toThrowError();  // ...because it has been unset
+      });
+    });
+
+    describe('parseFactory', () => {
+      it('should retrieve and return `$parse`', () => {
+        const services: {[key: string]: any} = {$parse: 'bar'};
+        const mockInjector = {get: (name: Ng1Token): any => services[name], has: () => true};
+
+        expect(parseFactory(mockInjector)).toBe('bar');
+      });
+    });
+
+    describe('rootScopeFactory', () => {
+      it('should retrieve and return `$rootScope`', () => {
+        const services: {[key: string]: any} = {$rootScope: 'baz'};
+        const mockInjector = {get: (name: Ng1Token): any => services[name], has: () => true};
+
+        expect(rootScopeFactory(mockInjector)).toBe('baz');
+      });
+    });
+  });
+}
diff --git a/packages/upgrade/test/static/integration/change_detection_spec.ts b/packages/upgrade/test/static/integration/change_detection_spec.ts
new file mode 100644
index 000000000000..b01649f92c1f
--- /dev/null
+++ b/packages/upgrade/test/static/integration/change_detection_spec.ts
@@ -0,0 +1,161 @@
+/**
+ * @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, ElementRef, Injector, Input, NgModule, NgZone, SimpleChange, SimpleChanges, destroyPlatform} from '@angular/core';
+import {async} from '@angular/core/testing';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {UpgradeComponent, UpgradeModule, downgradeComponent} from '@angular/upgrade/static';
+import * as angular from '@angular/upgrade/static/src/common/angular1';
+
+import {bootstrap, html, withEachNg1Version} from '../test_helpers';
+
+withEachNg1Version(() => {
+  describe('scope/component change-detection', () => {
+    beforeEach(() => destroyPlatform());
+    afterEach(() => destroyPlatform());
+
+    it('should interleave scope and component expressions', async(() => {
+         const log: string[] = [];
+         const l = (value: string) => {
+           log.push(value);
+           return value + ';';
+         };
+
+         @Directive({selector: 'ng1a'})
+         class Ng1aComponent extends UpgradeComponent {
+           constructor(elementRef: ElementRef, injector: Injector) {
+             super('ng1a', elementRef, injector);
+           }
+         }
+
+         @Directive({selector: 'ng1b'})
+         class Ng1bComponent extends UpgradeComponent {
+           constructor(elementRef: ElementRef, injector: Injector) {
+             super('ng1b', elementRef, injector);
+           }
+         }
+
+         @Component({
+           selector: 'ng2',
+           template: `{{l('2A')}}<ng1a></ng1a>{{l('2B')}}<ng1b></ng1b>{{l('2C')}}`
+         })
+         class Ng2Component {
+           l = l;
+         }
+
+         @NgModule({
+           declarations: [Ng1aComponent, Ng1bComponent, Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1', [])
+                               .directive('ng1a', () => ({template: '{{ l(\'ng1a\') }}'}))
+                               .directive('ng1b', () => ({template: '{{ l(\'ng1b\') }}'}))
+                               .directive('ng2', downgradeComponent({component: Ng2Component}))
+                               .run(($rootScope: angular.IRootScopeService) => {
+                                 $rootScope.l = l;
+                                 $rootScope.reset = () => log.length = 0;
+                               });
+
+         const element =
+             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;');
+           expect(log).toEqual(['1A', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
+         });
+       }));
+
+    it('should propagate changes to a downgraded component inside the ngZone', async(() => {
+         let appComponent: AppComponent;
+
+         @Component({selector: 'my-app', template: '<my-child [value]="value"></my-child>'})
+         class AppComponent {
+           // TODO(issue/24571): remove '!'.
+           value !: number;
+           constructor() { appComponent = this; }
+         }
+
+         @Component({
+           selector: 'my-child',
+           template: '<div>{{ valueFromPromise }}</div>',
+         })
+         class ChildComponent {
+           // TODO(issue/24571): remove '!'.
+           valueFromPromise !: number;
+           @Input()
+           set value(v: number) { expect(NgZone.isInAngularZone()).toBe(true); }
+
+           constructor(private zone: NgZone) {}
+
+           ngOnChanges(changes: SimpleChanges) {
+             if (changes['value'].isFirstChange()) return;
+
+             this.zone.onMicrotaskEmpty.subscribe(
+                 () => { expect(element.textContent).toEqual('5'); });
+
+             Promise.resolve().then(() => this.valueFromPromise = changes['value'].currentValue);
+           }
+         }
+
+         @NgModule({
+           declarations: [AppComponent, ChildComponent],
+           entryComponents: [AppComponent],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1', []).directive(
+             'myApp', downgradeComponent({component: AppComponent}));
+
+
+         const element = html('<my-app></my-app>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           appComponent.value = 5;
+         });
+       }));
+
+    // This test demonstrates https://github.com/angular/angular/issues/6385
+    // which was invalidly fixed by https://github.com/angular/angular/pull/6386
+    // it('should not trigger $digest from an async operation in a watcher', async(() => {
+    //      @Component({selector: 'my-app', template: ''})
+    //      class AppComponent {
+    //      }
+
+    //      @NgModule({declarations: [AppComponent], imports: [BrowserModule]})
+    //      class Ng2Module {
+    //      }
+
+    //      const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+    //      const ng1Module = angular.module('ng1', []).directive(
+    //          'myApp', adapter.downgradeNg2Component(AppComponent));
+
+    //      const element = html('<my-app></my-app>');
+
+    //      adapter.bootstrap(element, ['ng1']).ready((ref) => {
+    //        let doTimeout = false;
+    //        let timeoutId: number;
+    //        ref.ng1RootScope.$watch(() => {
+    //          if (doTimeout && !timeoutId) {
+    //            timeoutId = window.setTimeout(function() {
+    //              timeoutId = null;
+    //            }, 10);
+    //          }
+    //        });
+    //        doTimeout = true;
+    //      });
+    //    }));
+  });
+});
diff --git a/packages/upgrade/test/static/integration/content_projection_spec.ts b/packages/upgrade/test/static/integration/content_projection_spec.ts
new file mode 100644
index 000000000000..00b21ad53613
--- /dev/null
+++ b/packages/upgrade/test/static/integration/content_projection_spec.ts
@@ -0,0 +1,177 @@
+/**
+ * @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, ElementRef, Injector, Input, NgModule, destroyPlatform} from '@angular/core';
+import {async} from '@angular/core/testing';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {UpgradeComponent, UpgradeModule, downgradeComponent} from '@angular/upgrade/static';
+import * as angular from '@angular/upgrade/static/src/common/angular1';
+
+import {bootstrap, html, multiTrim, withEachNg1Version} from '../test_helpers';
+
+withEachNg1Version(() => {
+  describe('content projection', () => {
+
+    beforeEach(() => destroyPlatform());
+    afterEach(() => destroyPlatform());
+
+    it('should instantiate ng2 in ng1 template and project content', async(() => {
+
+         // the ng2 component that will be used in ng1 (downgraded)
+         @Component({selector: 'ng2', template: `{{ prop }}(<ng-content></ng-content>)`})
+         class Ng2Component {
+           prop = 'NG2';
+           ngContent = 'ng2-content';
+         }
+
+         // our upgrade module to host the component to downgrade
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         // the ng1 app module that will consume the downgraded component
+         const ng1Module = angular
+                               .module('ng1', [])
+                               // create an ng1 facade of the ng2 component
+                               .directive('ng2', downgradeComponent({component: Ng2Component}))
+                               .run(($rootScope: angular.IRootScopeService) => {
+                                 $rootScope['prop'] = 'NG1';
+                                 $rootScope['ngContent'] = 'ng1-content';
+                               });
+
+         const element = html('<div>{{ \'ng1[\' }}<ng2>~{{ ngContent }}~</ng2>{{ \']\' }}</div>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(document.body.textContent).toEqual('ng1[NG2(~ng1-content~)]');
+         });
+       }));
+
+    it('should correctly project structural directives', async(() => {
+         @Component({selector: 'ng2', template: 'ng2-{{ itemId }}(<ng-content></ng-content>)'})
+         class Ng2Component {
+           // TODO(issue/24571): remove '!'.
+           @Input() itemId !: string;
+         }
+
+         @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['items'] = [
+                                   {id: 'a', subitems: [1, 2, 3]}, {id: 'b', subitems: [4, 5, 6]},
+                                   {id: 'c', subitems: [7, 8, 9]}
+                                 ];
+                               });
+
+         const element = html(`
+           <ng2 ng-repeat="item in items" [item-id]="item.id">
+             <div ng-repeat="subitem in item.subitems">{{ subitem }}</div>
+           </ng2>
+         `);
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2-a( 123 )ng2-b( 456 )ng2-c( 789 )');
+         });
+       }));
+
+    it('should instantiate ng1 in ng2 template and project content', async(() => {
+
+         @Component({
+           selector: 'ng2',
+           template: `{{ 'ng2(' }}<ng1>{{ transclude }}</ng1>{{ ')' }}`,
+         })
+         class Ng2Component {
+           prop = 'ng2';
+           transclude = 'ng2-transclude';
+         }
+
+         @Directive({selector: 'ng1'})
+         class Ng1WrapperComponent extends UpgradeComponent {
+           constructor(elementRef: ElementRef, injector: Injector) {
+             super('ng1', elementRef, injector);
+           }
+         }
+
+         @NgModule({
+           declarations: [Ng1WrapperComponent, Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module =
+             angular.module('ng1', [])
+                 .directive('ng1', () => ({
+                                     transclude: true,
+                                     template: '{{ prop }}(<ng-transclude></ng-transclude>)'
+                                   }))
+                 .directive('ng2', downgradeComponent({component: Ng2Component}))
+                 .run(($rootScope: angular.IRootScopeService) => {
+                   $rootScope['prop'] = 'ng1';
+                   $rootScope['transclude'] = 'ng1-transclude';
+                 });
+
+         const element = html('<div>{{ \'ng1(\' }}<ng2></ng2>{{ \')\' }}</div>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(document.body.textContent).toEqual('ng1(ng2(ng1(ng2-transclude)))');
+         });
+       }));
+
+    it('should support multi-slot projection', async(() => {
+
+         @Component({
+           selector: 'ng2',
+           template: '2a(<ng-content select=".ng1a"></ng-content>)' +
+               '2b(<ng-content select=".ng1b"></ng-content>)'
+         })
+         class Ng2Component {
+           constructor() {}
+         }
+
+         @NgModule({
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1', []).directive(
+             'ng2', downgradeComponent({component: Ng2Component}));
+
+         // The ng-if on one of the projected children is here to make sure
+         // the correct slot is targeted even with structural directives in play.
+         const element = html(
+             '<ng2><div ng-if="true" class="ng1a">1a</div><div' +
+             ' class="ng1b">1b</div></ng2>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(document.body.textContent).toEqual('2a(1a)2b(1b)');
+         });
+       }));
+  });
+});
diff --git a/packages/upgrade/test/static/integration/downgrade_component_spec.ts b/packages/upgrade/test/static/integration/downgrade_component_spec.ts
new file mode 100644
index 000000000000..3e9284bf4bf6
--- /dev/null
+++ b/packages/upgrade/test/static/integration/downgrade_component_spec.ts
@@ -0,0 +1,795 @@
+/**
+ * @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 {ChangeDetectionStrategy, ChangeDetectorRef, Compiler, Component, ComponentFactoryResolver, Directive, ElementRef, EventEmitter, Injector, Input, NgModule, NgModuleRef, OnChanges, OnDestroy, 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';
+import {UpgradeComponent, UpgradeModule, downgradeComponent} from '@angular/upgrade/static';
+import * as angular from '@angular/upgrade/static/src/common/angular1';
+
+import {$apply, bootstrap, html, multiTrim, withEachNg1Version} from '../test_helpers';
+
+withEachNg1Version(() => {
+  describe('downgrade ng2 component', () => {
+
+    beforeEach(() => destroyPlatform());
+    afterEach(() => destroyPlatform());
+
+    it('should bind properties, events', async(() => {
+         const ng1Module =
+             angular.module('ng1', []).value('$exceptionHandler', (err: any) => {
+                                        throw err;
+                                      }).run(($rootScope: angular.IScope) => {
+               $rootScope['name'] = 'world';
+               $rootScope['dataA'] = 'A';
+               $rootScope['dataB'] = 'B';
+               $rootScope['modelA'] = 'initModelA';
+               $rootScope['modelB'] = 'initModelB';
+               $rootScope['eventA'] = '?';
+               $rootScope['eventB'] = '?';
+             });
+
+         @Component({
+           selector: 'ng2',
+           inputs: ['literal', 'interpolate', 'oneWayA', 'oneWayB', 'twoWayA', 'twoWayB'],
+           outputs: [
+             'eventA', 'eventB', 'twoWayAEmitter: twoWayAChange', 'twoWayBEmitter: twoWayBChange'
+           ],
+           template: 'ignore: {{ignore}}; ' +
+               'literal: {{literal}}; interpolate: {{interpolate}}; ' +
+               'oneWayA: {{oneWayA}}; oneWayB: {{oneWayB}}; ' +
+               'twoWayA: {{twoWayA}}; twoWayB: {{twoWayB}}; ({{ngOnChangesCount}})'
+         })
+         class Ng2Component implements OnChanges {
+           ngOnChangesCount = 0;
+           ignore = '-';
+           literal = '?';
+           interpolate = '?';
+           oneWayA = '?';
+           oneWayB = '?';
+           twoWayA = '?';
+           twoWayB = '?';
+           eventA = new EventEmitter();
+           eventB = new EventEmitter();
+           twoWayAEmitter = new EventEmitter();
+           twoWayBEmitter = new EventEmitter();
+
+           ngOnChanges(changes: SimpleChanges) {
+             const assert = (prop: string, value: any) => {
+               const propVal = (this as any)[prop];
+               if (propVal != value) {
+                 throw new Error(`Expected: '${prop}' to be '${value}' but was '${propVal}'`);
+               }
+             };
+
+             const assertChange = (prop: string, value: any) => {
+               assert(prop, value);
+               if (!changes[prop]) {
+                 throw new Error(`Changes record for '${prop}' not found.`);
+               }
+               const actualValue = changes[prop].currentValue;
+               if (actualValue != value) {
+                 throw new Error(
+                     `Expected changes record for'${prop}' to be '${value}' but was '${actualValue}'`);
+               }
+             };
+
+             switch (this.ngOnChangesCount++) {
+               case 0:
+                 assert('ignore', '-');
+                 assertChange('literal', 'Text');
+                 assertChange('interpolate', 'Hello world');
+                 assertChange('oneWayA', 'A');
+                 assertChange('oneWayB', 'B');
+                 assertChange('twoWayA', 'initModelA');
+                 assertChange('twoWayB', 'initModelB');
+
+                 this.twoWayAEmitter.emit('newA');
+                 this.twoWayBEmitter.emit('newB');
+                 this.eventA.emit('aFired');
+                 this.eventB.emit('bFired');
+                 break;
+               case 1:
+                 assertChange('twoWayA', 'newA');
+                 assertChange('twoWayB', 'newB');
+                 break;
+               case 2:
+                 assertChange('interpolate', 'Hello everyone');
+                 break;
+               default:
+                 throw new Error('Called too many times! ' + JSON.stringify(changes));
+             }
+           }
+         }
+
+         ng1Module.directive('ng2', downgradeComponent({
+                               component: Ng2Component,
+                             }));
+
+         @NgModule({
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const element = html(`
+           <div>
+             <ng2 literal="Text" interpolate="Hello {{name}}"
+                 bind-one-way-a="dataA" [one-way-b]="dataB"
+                 bindon-two-way-a="modelA" [(two-way-b)]="modelB"
+                 on-event-a='eventA=$event' (event-b)="eventB=$event"></ng2>
+             | modelA: {{modelA}}; modelB: {{modelB}}; eventA: {{eventA}}; eventB: {{eventB}};
+           </div>`);
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(multiTrim(document.body.textContent))
+               .toEqual(
+                   'ignore: -; ' +
+                   'literal: Text; interpolate: Hello world; ' +
+                   'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (2) | ' +
+                   'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;');
+
+           $apply(upgrade, 'name = "everyone"');
+           expect(multiTrim(document.body.textContent))
+               .toEqual(
+                   'ignore: -; ' +
+                   'literal: Text; interpolate: Hello everyone; ' +
+                   'oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (3) | ' +
+                   'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;');
+         });
+       }));
+
+    it('should bind properties to onpush components', async(() => {
+         const ng1Module =
+             angular.module('ng1', []).value('$exceptionHandler', (err: any) => {
+                                        throw err;
+                                      }).run(($rootScope: angular.IScope) => {
+               $rootScope['dataB'] = 'B';
+             });
+
+         @Component({
+           selector: 'ng2',
+           inputs: ['oneWayB'],
+           template: 'oneWayB: {{oneWayB}}',
+           changeDetection: ChangeDetectionStrategy.OnPush
+         })
+
+         class Ng2Component {
+           ngOnChangesCount = 0;
+           oneWayB = '?';
+         }
+
+         ng1Module.directive('ng2', downgradeComponent({
+                               component: Ng2Component,
+                             }));
+
+         @NgModule({
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const element = html(`
+          <div>
+            <ng2 [one-way-b]="dataB"></ng2>
+          </div>`);
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(multiTrim(document.body.textContent)).toEqual('oneWayB: B');
+           $apply(upgrade, 'dataB= "everyone"');
+           expect(multiTrim(document.body.textContent)).toEqual('oneWayB: everyone');
+         });
+       }));
+
+    it('should support two-way binding and event listener', async(() => {
+         const listenerSpy = jasmine.createSpy('$rootScope.listener');
+         const ng1Module = angular.module('ng1', []).run(($rootScope: angular.IScope) => {
+           $rootScope['value'] = 'world';
+           $rootScope['listener'] = listenerSpy;
+         });
+
+         @Component({selector: 'ng2', template: `model: {{model}};`})
+         class Ng2Component implements OnChanges {
+           ngOnChangesCount = 0;
+           @Input() model = '?';
+           @Output() modelChange = new EventEmitter();
+
+           ngOnChanges(changes: SimpleChanges) {
+             switch (this.ngOnChangesCount++) {
+               case 0:
+                 expect(changes.model.currentValue).toBe('world');
+                 this.modelChange.emit('newC');
+                 break;
+               case 1:
+                 expect(changes.model.currentValue).toBe('newC');
+                 break;
+               default:
+                 throw new Error('Called too many times! ' + JSON.stringify(changes));
+             }
+           }
+         }
+
+         ng1Module.directive('ng2', downgradeComponent({component: Ng2Component}));
+
+         @NgModule({
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const element = html(`
+          <div>
+            <ng2 [(model)]="value" (model-change)="listener($event)"></ng2>
+            | value: {{value}}
+          </div>
+        `);
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(multiTrim(element.textContent)).toEqual('model: newC; | value: newC');
+           expect(listenerSpy).toHaveBeenCalledWith('newC');
+         });
+       }));
+
+    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 still run normal Angular change-detection regardless of `propagateDigest`',
+       fakeAsync(() => {
+         let ng2Component: Ng2Component;
+
+         @Component({selector: 'ng2', template: '{{ value }}'})
+         class Ng2Component {
+           value = 'foo';
+           constructor() { setTimeout(() => this.value = 'bar', 1000); }
+         }
+
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module =
+             angular.module('ng1', [])
+                 .directive(
+                     'ng2A', downgradeComponent({component: Ng2Component, propagateDigest: true}))
+                 .directive(
+                     'ng2B', downgradeComponent({component: Ng2Component, propagateDigest: false}));
+
+         const element = html('<ng2-a></ng2-a> | <ng2-b></ng2-b>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           expect(element.textContent).toBe('foo | foo');
+
+           tick(1000);
+           expect(element.textContent).toBe('bar | bar');
+         });
+       }));
+
+    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;
+           // TODO(issue/24571): remove '!'.
+           initialValue !: string;
+           // TODO(issue/24571): remove '!'.
+           @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'; });
+
+         let ng2Instance: Ng2;
+         @Component({selector: 'ng2', template: '<span>{{_value}}</span>'})
+         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);
+           }
+         }
+
+         ng1Module.directive('ng2', downgradeComponent({component: Ng2}));
+
+         const element = html(`<div><ng2 ng-model="modelA"></ng2> | {{modelA}}</div>`);
+
+         @NgModule(
+             {declarations: [Ng2], entryComponents: [Ng2], imports: [BrowserModule, UpgradeModule]})
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         platformBrowserDynamic().bootstrapModule(Ng2Module).then((ref) => {
+           const adapter = ref.injector.get(UpgradeModule) as UpgradeModule;
+           adapter.bootstrap(element, [ng1Module.name]);
+           const $rootScope = adapter.$injector.get('$rootScope');
+
+           expect(multiTrim(document.body.textContent)).toEqual('A | A');
+
+           $rootScope.modelA = 'B';
+           $rootScope.$apply();
+           expect(multiTrim(document.body.textContent)).toEqual('B | B');
+
+           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);
+         });
+       }));
+
+    it('should properly run cleanup when ng1 directive is destroyed', async(() => {
+
+         let destroyed = false;
+         @Component({selector: 'ng2', template: 'test'})
+         class Ng2Component implements OnDestroy {
+           ngOnDestroy() { destroyed = true; }
+         }
+
+         @NgModule({
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module =
+             angular.module('ng1', [])
+                 .directive(
+                     'ng1',
+                     () => { return {template: '<div ng-if="!destroyIt"><ng2></ng2></div>'}; })
+                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+         const element = html('<ng1></ng1>');
+         platformBrowserDynamic().bootstrapModule(Ng2Module).then((ref) => {
+           const adapter = ref.injector.get(UpgradeModule) as UpgradeModule;
+           adapter.bootstrap(element, [ng1Module.name]);
+           expect(element.textContent).toContain('test');
+           expect(destroyed).toBe(false);
+
+           const $rootScope = adapter.$injector.get('$rootScope');
+           $rootScope.$apply('destroyIt = true');
+
+           expect(element.textContent).not.toContain('test');
+           expect(destroyed).toBe(true);
+         });
+       }));
+
+    it('should properly run cleanup with multiple levels of nesting', async(() => {
+         let destroyed = false;
+
+         @Component({
+           selector: 'ng2-outer',
+           template: '<div *ngIf="!destroyIt"><ng1></ng1></div>',
+         })
+         class Ng2OuterComponent {
+           @Input() destroyIt = false;
+         }
+
+         @Component({selector: 'ng2-inner', template: 'test'})
+         class Ng2InnerComponent implements OnDestroy {
+           ngOnDestroy() { destroyed = true; }
+         }
+
+         @Directive({selector: 'ng1'})
+         class Ng1ComponentFacade extends UpgradeComponent {
+           constructor(elementRef: ElementRef, injector: Injector) {
+             super('ng1', elementRef, injector);
+           }
+         }
+
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           declarations: [Ng1ComponentFacade, Ng2InnerComponent, Ng2OuterComponent],
+           entryComponents: [Ng2InnerComponent, Ng2OuterComponent],
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module =
+             angular.module('ng1', [])
+                 .directive('ng1', () => ({template: '<ng2-inner></ng2-inner>'}))
+                 .directive('ng2Inner', downgradeComponent({component: Ng2InnerComponent}))
+                 .directive('ng2Outer', downgradeComponent({component: Ng2OuterComponent}));
+
+         const element = html('<ng2-outer [destroy-it]="destroyIt"></ng2-outer>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           expect(element.textContent).toBe('test');
+           expect(destroyed).toBe(false);
+
+           $apply(upgrade, 'destroyIt = true');
+
+           expect(element.textContent).toBe('');
+           expect(destroyed).toBe(true);
+         });
+       }));
+
+    it('should work when compiled outside the dom (by fallback to the root ng2.injector)',
+       async(() => {
+
+         @Component({selector: 'ng2', template: 'test'})
+         class Ng2Component {
+         }
+
+         @NgModule({
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module =
+             angular.module('ng1', [])
+                 .directive(
+                     'ng1',
+                     [
+                       '$compile',
+                       ($compile: angular.ICompileService) => {
+                         return {
+                           link: function(
+                               $scope: angular.IScope, $element: angular.IAugmentedJQuery,
+                               $attrs: angular.IAttributes) {
+                             // here we compile some HTML that contains a downgraded component
+                             // since it is not currently in the DOM it is not able to "require"
+                             // an ng2 injector so it should use the `moduleInjector` instead.
+                             const compiled = $compile('<ng2></ng2>');
+                             const template = compiled($scope);
+                             $element.append !(template);
+                           }
+                         };
+                       }
+                     ])
+                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+         const element = html('<ng1></ng1>');
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           // the fact that the body contains the correct text means that the
+           // downgraded component was able to access the moduleInjector
+           // (since there is no other injector in this system)
+           expect(multiTrim(document.body.textContent)).toEqual('test');
+         });
+       }));
+
+    it('should allow attribute selectors for downgraded components', async(() => {
+         @Component({selector: '[itWorks]', template: 'It works'})
+         class WorksComponent {
+         }
+
+         @NgModule({
+           declarations: [WorksComponent],
+           entryComponents: [WorksComponent],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1', []).directive(
+             'worksComponent', downgradeComponent({component: WorksComponent}));
+
+         const element = html('<works-component></works-component>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(multiTrim(document.body.textContent)).toBe('It works');
+         });
+       }));
+
+    it('should allow attribute selectors for components in ng2', async(() => {
+         @Component({selector: '[itWorks]', template: 'It works'})
+         class WorksComponent {
+         }
+
+         @Component({selector: 'root-component', template: '<span itWorks></span>!'})
+         class RootComponent {
+         }
+
+         @NgModule({
+           declarations: [RootComponent, WorksComponent],
+           entryComponents: [RootComponent],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1', []).directive(
+             'rootComponent', downgradeComponent({component: RootComponent}));
+
+         const element = html('<root-component></root-component>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(multiTrim(document.body.textContent)).toBe('It works!');
+         });
+       }));
+
+    it('should respect hierarchical dependency injection for ng2', async(() => {
+         @Component({selector: 'parent', template: 'parent(<ng-content></ng-content>)'})
+         class ParentComponent {
+         }
+
+         @Component({selector: 'child', template: 'child'})
+         class ChildComponent {
+           constructor(parent: ParentComponent) {}
+         }
+
+         @NgModule({
+           declarations: [ParentComponent, ChildComponent],
+           entryComponents: [ParentComponent, ChildComponent],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module =
+             angular.module('ng1', [])
+                 .directive('parent', downgradeComponent({component: ParentComponent}))
+                 .directive('child', downgradeComponent({component: ChildComponent}));
+
+         const element = html('<parent><child></child></parent>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           expect(multiTrim(document.body.textContent)).toBe('parent(child)');
+         });
+       }));
+
+    it('should work with ng2 lazy loaded components', async(() => {
+
+         let componentInjector: Injector;
+
+         @Component({selector: 'ng2', template: ''})
+         class Ng2Component {
+           constructor(injector: Injector) { componentInjector = injector; }
+         }
+
+         @NgModule({
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule],
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         @Component({template: ''})
+         class LazyLoadedComponent {
+           constructor(public module: NgModuleRef<any>) {}
+         }
+
+         @NgModule({
+           declarations: [LazyLoadedComponent],
+           entryComponents: [LazyLoadedComponent],
+         })
+         class LazyLoadedModule {
+         }
+
+         const ng1Module = angular.module('ng1', []).directive(
+             'ng2', downgradeComponent({component: Ng2Component}));
+
+         const element = html('<ng2></ng2>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           const modInjector = upgrade.injector;
+           // Emulate the router lazy loading a module and creating a component
+           const compiler = modInjector.get(Compiler);
+           const modFactory = compiler.compileModuleSync(LazyLoadedModule);
+           const childMod = modFactory.create(modInjector);
+           const cmpFactory =
+               childMod.componentFactoryResolver.resolveComponentFactory(LazyLoadedComponent) !;
+           const lazyCmp = cmpFactory.create(componentInjector);
+
+           expect(lazyCmp.instance.module.injector).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 000000000000..d751d9a06b8f
--- /dev/null
+++ b/packages/upgrade/test/static/integration/downgrade_module_spec.ts
@@ -0,0 +1,614 @@
+/**
+ * @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 {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ApplicationRef, Component, DoCheck, Inject, Injector, Input, NgModule, NgZone, OnChanges, OnDestroy, OnInit, StaticProvider, ViewRef, 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 {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+import {downgradeComponent, downgradeModule} from '@angular/upgrade/static';
+import * as angular from '@angular/upgrade/static/src/common/angular1';
+import {$ROOT_SCOPE, INJECTOR_KEY, LAZY_MODULE_REF} from '@angular/upgrade/static/src/common/constants';
+import {LazyModuleRef} from '@angular/upgrade/static/src/common/util';
+
+import {html, multiTrim, withEachNg1Version} from '../test_helpers';
+
+
+withEachNg1Version(() => {
+  [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: StaticProvider[]) =>
+               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: StaticProvider[]) =>
+               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: StaticProvider[]) =>
+               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 destroy components inside the Angular zone', async(() => {
+           let destroyedInTheZone = false;
+
+           @Component({selector: 'ng2', template: ''})
+           class Ng2Component implements OnDestroy {
+             ngOnDestroy() { destroyedInTheZone = NgZone.isInAngularZone(); }
+           }
+
+           @NgModule({
+             declarations: [Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           const bootstrapFn = (extraProviders: StaticProvider[]) =>
+               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 ng-if="!hideNg2"></ng2>');
+           const $injector = angular.bootstrap(element, [ng1Module.name]);
+           const $rootScope = $injector.get($ROOT_SCOPE) as angular.IRootScopeService;
+
+           // Wait for the module to be bootstrapped.
+           setTimeout(() => {
+             $rootScope.$apply('hideNg2 = true');
+             expect(destroyedInTheZone).toBe(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: StaticProvider[]) =>
+               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: StaticProvider[]) =>
+               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 run the lifecycle hooks in the correct order', async(() => {
+           const logs: string[] = [];
+           let rootScope: angular.IRootScopeService;
+
+           @Component({
+             selector: 'ng2',
+             template: `
+               {{ value }}
+               <button (click)="value = 'qux'"></button>
+               <ng-content></ng-content>
+             `
+           })
+           class Ng2Component implements AfterContentChecked,
+               AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnDestroy,
+               OnInit {
+             @Input() value = 'foo';
+
+             ngAfterContentChecked() { this.log('AfterContentChecked'); }
+             ngAfterContentInit() { this.log('AfterContentInit'); }
+             ngAfterViewChecked() { this.log('AfterViewChecked'); }
+             ngAfterViewInit() { this.log('AfterViewInit'); }
+             ngDoCheck() { this.log('DoCheck'); }
+             ngOnChanges() { this.log('OnChanges'); }
+             ngOnDestroy() { this.log('OnDestroy'); }
+             ngOnInit() { this.log('OnInit'); }
+
+             private log(hook: string) { logs.push(`${hook}(${this.value})`); }
+           }
+
+           @NgModule({
+             declarations: [Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           const bootstrapFn = (extraProviders: StaticProvider[]) =>
+               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 = $rootScope;
+                     rootScope.value = 'bar';
+                   });
+
+           const element =
+               html('<div><ng2 value="{{ value }}" ng-if="!hideNg2">Content</ng2></div>');
+           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') !;
+
+               // Once initialized.
+               expect(multiTrim(element.textContent)).toBe('bar Content');
+               expect(logs).toEqual([
+                 // `ngOnChanges()` call triggered directly through the `inputChanges` $watcher.
+                 'OnChanges(bar)',
+                 // Initial CD triggered directly through the `detectChanges()` or `inputChanges`
+                 // $watcher (for `propagateDigest` true/false respectively).
+                 'OnInit(bar)',
+                 'DoCheck(bar)',
+                 'AfterContentInit(bar)',
+                 'AfterContentChecked(bar)',
+                 'AfterViewInit(bar)',
+                 'AfterViewChecked(bar)',
+                 ...(propagateDigest ?
+                         [
+                           // CD triggered directly through the `detectChanges()` $watcher (2nd
+                           // $digest).
+                           'DoCheck(bar)',
+                           'AfterContentChecked(bar)',
+                           'AfterViewChecked(bar)',
+                         ] :
+                         []),
+                 // CD triggered due to entering/leaving the NgZone (in `downgradeFn()`).
+                 'DoCheck(bar)',
+                 'AfterContentChecked(bar)',
+                 'AfterViewChecked(bar)',
+               ]);
+               logs.length = 0;
+
+               // Change inputs and run `$digest`.
+               rootScope.$apply('value = "baz"');
+               expect(multiTrim(element.textContent)).toBe('baz Content');
+               expect(logs).toEqual([
+                 // `ngOnChanges()` call triggered directly through the `inputChanges` $watcher.
+                 'OnChanges(baz)',
+                 // `propagateDigest: true` (3 CD runs):
+                 //   - CD triggered due to entering/leaving the NgZone (in `inputChanges`
+                 //   $watcher).
+                 //   - CD triggered directly through the `detectChanges()` $watcher.
+                 //   - CD triggered due to entering/leaving the NgZone (in `detectChanges`
+                 //   $watcher).
+                 // `propagateDigest: false` (2 CD runs):
+                 //   - CD triggered directly through the `inputChanges` $watcher.
+                 //   - CD triggered due to entering/leaving the NgZone (in `inputChanges`
+                 //   $watcher).
+                 'DoCheck(baz)',
+                 'AfterContentChecked(baz)',
+                 'AfterViewChecked(baz)',
+                 'DoCheck(baz)',
+                 'AfterContentChecked(baz)',
+                 'AfterViewChecked(baz)',
+                 ...(propagateDigest ?
+                         [
+                           'DoCheck(baz)',
+                           'AfterContentChecked(baz)',
+                           'AfterViewChecked(baz)',
+                         ] :
+                         []),
+               ]);
+               logs.length = 0;
+
+               // Run `$digest` (without changing inputs).
+               rootScope.$digest();
+               expect(multiTrim(element.textContent)).toBe('baz Content');
+               expect(logs).toEqual(
+                   propagateDigest ?
+                       [
+                         // CD triggered directly through the `detectChanges()` $watcher.
+                         'DoCheck(baz)',
+                         'AfterContentChecked(baz)',
+                         'AfterViewChecked(baz)',
+                         // CD triggered due to entering/leaving the NgZone (in the above $watcher).
+                         'DoCheck(baz)',
+                         'AfterContentChecked(baz)',
+                         'AfterViewChecked(baz)',
+                       ] :
+                       []);
+               logs.length = 0;
+
+               // Trigger change detection (without changing inputs).
+               button.click();
+               expect(multiTrim(element.textContent)).toBe('qux Content');
+               expect(logs).toEqual([
+                 'DoCheck(qux)',
+                 'AfterContentChecked(qux)',
+                 'AfterViewChecked(qux)',
+               ]);
+               logs.length = 0;
+
+               // Destroy the component.
+               rootScope.$apply('hideNg2 = true');
+               expect(logs).toEqual([
+                 'OnDestroy(qux)',
+               ]);
+               logs.length = 0;
+             });
+           });
+         }));
+
+      it('should detach hostViews from the ApplicationRef once destroyed', async(() => {
+           let ng2Component: Ng2Component;
+
+           @Component({selector: 'ng2', template: ''})
+           class Ng2Component {
+             constructor(public appRef: ApplicationRef) {
+               ng2Component = this;
+               spyOn(appRef, 'attachView').and.callThrough();
+               spyOn(appRef, 'detachView').and.callThrough();
+             }
+           }
+
+           @NgModule({
+             declarations: [Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           const bootstrapFn = (extraProviders: StaticProvider[]) =>
+               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 ng-if="!hideNg2"></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 the hostView to be attached (during the `$digest`).
+               const hostView: ViewRef =
+                   (ng2Component.appRef.attachView as jasmine.Spy).calls.mostRecent().args[0];
+
+               expect(hostView.destroyed).toBe(false);
+
+               $rootScope.$apply('hideNg2 = true');
+
+               expect(hostView.destroyed).toBe(true);
+               expect(ng2Component.appRef.detachView).toHaveBeenCalledWith(hostView);
+             });
+           });
+         }));
+
+      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 tickDelay = browserDetection.isIE ? 100 : 0;
+           const bootstrapFn = (extraProviders: StaticProvider[]) =>
+               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(tickDelay);  // 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(tickDelay);  // 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: StaticProvider[]) =>
+               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/examples_spec.ts b/packages/upgrade/test/static/integration/examples_spec.ts
new file mode 100644
index 000000000000..3a0989432ca4
--- /dev/null
+++ b/packages/upgrade/test/static/integration/examples_spec.ts
@@ -0,0 +1,89 @@
+/**
+ * @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, ElementRef, Injector, Input, NgModule, destroyPlatform} from '@angular/core';
+import {async} from '@angular/core/testing';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {UpgradeComponent, UpgradeModule, downgradeComponent} from '@angular/upgrade/static';
+import * as angular from '@angular/upgrade/static/src/common/angular1';
+
+import {bootstrap, html, multiTrim, withEachNg1Version} from '../test_helpers';
+
+withEachNg1Version(() => {
+  describe('examples', () => {
+
+    beforeEach(() => destroyPlatform());
+    afterEach(() => destroyPlatform());
+
+    it('should have AngularJS loaded', () => expect(angular.version.major).toBe(1));
+
+    it('should verify UpgradeAdapter example', async(() => {
+
+         // This is wrapping (upgrading) an AngularJS component to be used in an Angular
+         // component
+         @Directive({selector: 'ng1'})
+         class Ng1Component extends UpgradeComponent {
+           // TODO(issue/24571): remove '!'.
+           @Input() title !: string;
+
+           constructor(elementRef: ElementRef, injector: Injector) {
+             super('ng1', elementRef, injector);
+           }
+         }
+
+         // This is an Angular component that will be downgraded
+         @Component({
+           selector: 'ng2',
+           template: 'ng2[<ng1 [title]="nameProp">transclude</ng1>](<ng-content></ng-content>)'
+         })
+         class Ng2Component {
+           // TODO(issue/24571): remove '!'.
+           @Input('name') nameProp !: string;
+         }
+
+         // This module represents the Angular pieces of the application
+         @NgModule({
+           declarations: [Ng1Component, Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() { /* this is a placeholder to stop the bootstrapper from complaining */
+           }
+         }
+
+         // This module represents the AngularJS pieces of the application
+         const ng1Module =
+             angular
+                 .module('myExample', [])
+                 // This is an AngularJS component that will be upgraded
+                 .directive(
+                     'ng1',
+                     () => {
+                       return {
+                         scope: {title: '='},
+                         transclude: true,
+                         template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
+                       };
+                     })
+                 // This is wrapping (downgrading) an Angular component to be used in AngularJS
+                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+         // This is the (AngularJS) application bootstrap element
+         // Notice that it is actually a downgraded Angular component
+         const element = html('<ng2 name="World">project</ng2>');
+
+         // Let's use a helper function to make this simpler
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           expect(multiTrim(element.textContent))
+               .toBe('ng2[ng1[Hello World!](transclude)](project)');
+         });
+       }));
+  });
+});
diff --git a/packages/upgrade/test/static/integration/injection_spec.ts b/packages/upgrade/test/static/integration/injection_spec.ts
new file mode 100644
index 000000000000..1a427570e9f6
--- /dev/null
+++ b/packages/upgrade/test/static/integration/injection_spec.ts
@@ -0,0 +1,132 @@
+/**
+ * @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, Injector, NgModule, destroyPlatform} from '@angular/core';
+import {async} from '@angular/core/testing';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {UpgradeModule, downgradeInjectable, getAngularJSGlobal, setAngularJSGlobal} from '@angular/upgrade/static';
+import * as angular from '@angular/upgrade/static/src/common/angular1';
+import {$INJECTOR, INJECTOR_KEY} from '@angular/upgrade/static/src/common/constants';
+
+import {bootstrap, html, withEachNg1Version} from '../test_helpers';
+
+withEachNg1Version(() => {
+  describe('injection', () => {
+
+    beforeEach(() => destroyPlatform());
+    afterEach(() => destroyPlatform());
+
+    it('should downgrade ng2 service to ng1', async(() => {
+         // Tokens used in ng2 to identify services
+         const Ng2Service = new InjectionToken('ng2-service');
+
+         // Sample ng1 NgModule for tests
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           providers: [
+             {provide: Ng2Service, useValue: 'ng2 service value'},
+           ]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         // create the ng1 module that will import an ng2 service
+         const ng1Module =
+             angular.module('ng1Module', []).factory('ng2Service', downgradeInjectable(Ng2Service));
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, html('<div>'), ng1Module)
+             .then((upgrade) => {
+               const ng1Injector = upgrade.$injector;
+               expect(ng1Injector.get('ng2Service')).toBe('ng2 service value');
+             });
+       }));
+
+    it('should upgrade ng1 service to ng2', async(() => {
+         // Tokens used in ng2 to identify services
+         const Ng1Service = new InjectionToken('ng1-service');
+
+         // Sample ng1 NgModule for tests
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           providers: [
+             // the following line is the "upgrade" of an AngularJS service
+             {
+               provide: Ng1Service,
+               useFactory: (i: angular.IInjectorService) => i.get('ng1Service'),
+               deps: ['$injector']
+             }
+           ]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         // create the ng1 module that will import an ng2 service
+         const ng1Module = angular.module('ng1Module', []).value('ng1Service', 'ng1 service value');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, html('<div>'), ng1Module)
+             .then((upgrade) => {
+               const ng2Injector = upgrade.injector;
+               expect(ng2Injector.get(Ng1Service)).toBe('ng1 service value');
+             });
+       }));
+
+    it('should initialize the upgraded injector before application run blocks are executed',
+       async(() => {
+         let runBlockTriggered = false;
+
+         const ng1Module = angular.module('ng1Module', []).run([
+           INJECTOR_KEY,
+           function(injector: Injector) {
+             runBlockTriggered = true;
+             expect(injector.get($INJECTOR)).toBeDefined();
+           }
+         ]);
+
+         @NgModule({imports: [BrowserModule, UpgradeModule]})
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, html('<div>'), ng1Module).then(() => {
+           expect(runBlockTriggered).toBeTruthy();
+         });
+       }));
+
+    it('should allow resetting angular at runtime', async(() => {
+         let wrappedBootstrapCalled = false;
+
+         const n: any = getAngularJSGlobal();
+
+         setAngularJSGlobal({
+           bootstrap: (...args: any[]) => {
+             wrappedBootstrapCalled = 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(wrappedBootstrapCalled).toBe(true))
+             .then(() => setAngularJSGlobal(n));  // Reset the AngularJS global.
+       }));
+  });
+});
diff --git a/packages/upgrade/test/static/integration/testability_spec.ts b/packages/upgrade/test/static/integration/testability_spec.ts
new file mode 100644
index 000000000000..3ceeb0ab9d9a
--- /dev/null
+++ b/packages/upgrade/test/static/integration/testability_spec.ts
@@ -0,0 +1,133 @@
+/**
+ * @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 {NgModule, Testability, destroyPlatform} from '@angular/core';
+import {NgZone} from '@angular/core/src/zone/ng_zone';
+import {fakeAsync, flush, tick} from '@angular/core/testing';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {UpgradeModule} from '@angular/upgrade/static';
+import * as angular from '@angular/upgrade/static/src/common/angular1';
+
+import {bootstrap, html, withEachNg1Version} from '../test_helpers';
+
+withEachNg1Version(() => {
+  describe('testability', () => {
+
+    beforeEach(() => destroyPlatform());
+    afterEach(() => destroyPlatform());
+
+    @NgModule({imports: [BrowserModule, UpgradeModule]})
+    class Ng2Module {
+      ngDoBootstrap() {}
+    }
+
+    it('should handle deferred bootstrap', fakeAsync(() => {
+         let applicationRunning = false;
+         let stayedInTheZone: boolean = undefined !;
+         const ng1Module = angular.module('ng1', []).run(() => {
+           applicationRunning = true;
+           stayedInTheZone = NgZone.isInAngularZone();
+         });
+
+         const element = html('<div></div>');
+         window.name = 'NG_DEFER_BOOTSTRAP!' + window.name;
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module);
+
+         setTimeout(() => { (<any>window).angular.resumeBootstrap(); }, 100);
+
+         expect(applicationRunning).toEqual(false);
+         tick(100);
+         expect(applicationRunning).toEqual(true);
+         expect(stayedInTheZone).toEqual(true);
+       }));
+
+    it('should propagate return value of resumeBootstrap', fakeAsync(() => {
+         const ng1Module = angular.module('ng1', []);
+         let a1Injector: angular.IInjectorService|undefined;
+         ng1Module.run([
+           '$injector', function($injector: angular.IInjectorService) { a1Injector = $injector; }
+         ]);
+         const element = html('<div></div>');
+         window.name = 'NG_DEFER_BOOTSTRAP!' + window.name;
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module);
+
+         tick(100);
+
+         const value = (<any>window).angular.resumeBootstrap();
+         expect(value).toBe(a1Injector);
+
+         flush();
+       }));
+
+    it('should wait for ng2 testability', 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);
+           ng2Testability.increasePendingRequestCount();
+           let ng2Stable = false;
+           let ng1Stable = false;
+
+           angular.getTestability(element).whenStable(() => { ng1Stable = true; });
+
+           setTimeout(() => {
+             ng2Stable = true;
+             ng2Testability.decreasePendingRequestCount();
+           }, 100);
+
+           expect(ng1Stable).toEqual(false);
+           expect(ng2Stable).toEqual(false);
+           tick(100);
+           expect(ng1Stable).toEqual(true);
+           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
new file mode 100644
index 000000000000..9c0ee94db2c2
--- /dev/null
+++ b/packages/upgrade/test/static/integration/upgrade_component_spec.ts
@@ -0,0 +1,4001 @@
+/**
+ * @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, 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';
+import {UpgradeComponent, UpgradeModule, downgradeComponent} from '@angular/upgrade/static';
+import * as angular from '@angular/upgrade/static/src/common/angular1';
+import {$SCOPE} from '@angular/upgrade/static/src/common/constants';
+
+import {$digest, bootstrap, html, multiTrim, withEachNg1Version} from '../test_helpers';
+
+withEachNg1Version(() => {
+  describe('upgrade ng1 component', () => {
+
+    beforeEach(() => destroyPlatform());
+    afterEach(() => destroyPlatform());
+
+    describe('template/templateUrl', () => {
+      it('should support `template` (string)', async(() => {
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {template: 'Hello, Angular!'};
+
+           // 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', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+             expect(multiTrim(element.textContent)).toBe('Hello, Angular!');
+           });
+         }));
+
+      it('should support `template` (function)', async(() => {
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {template: () => 'Hello, Angular!'};
+
+           // 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', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('Hello, Angular!');
+           });
+         }));
+
+      it('should support not pass any arguments to `template` function', async(() => {
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: ($attrs: angular.IAttributes, $element: angular.IAugmentedJQuery) => {
+               expect($attrs).toBeUndefined();
+               expect($element).toBeUndefined();
+
+               return 'Hello, Angular!';
+             }
+           };
+
+           // 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', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('Hello, Angular!');
+           });
+         }));
+
+      it('should support `templateUrl` (string) fetched from `$templateCache`', async(() => {
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {templateUrl: 'ng1.component.html'};
+
+           // 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', [])
+                   .component('ng1', ng1Component)
+                   .directive('ng2', downgradeComponent({component: Ng2Component}))
+                   .run(
+                       ($templateCache: angular.ITemplateCacheService) =>
+                           $templateCache.put('ng1.component.html', 'Hello, Angular!'));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('Hello, Angular!');
+           });
+         }));
+
+      it('should support `templateUrl` (function) fetched from `$templateCache`', async(() => {
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {templateUrl: () => 'ng1.component.html'};
+
+           // 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', [])
+                   .component('ng1', ng1Component)
+                   .directive('ng2', downgradeComponent({component: Ng2Component}))
+                   .run(
+                       ($templateCache: angular.ITemplateCacheService) =>
+                           $templateCache.put('ng1.component.html', 'Hello, Angular!'));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('Hello, Angular!');
+           });
+         }));
+
+      it('should support not pass any arguments to `templateUrl` function', async(() => {
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             templateUrl: ($attrs: angular.IAttributes, $element: angular.IAugmentedJQuery) => {
+               expect($attrs).toBeUndefined();
+               expect($element).toBeUndefined();
+
+               return 'ng1.component.html';
+             }
+           };
+
+           // 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', [])
+                   .component('ng1', ng1Component)
+                   .directive('ng2', downgradeComponent({component: Ng2Component}))
+                   .run(
+                       ($templateCache: angular.ITemplateCacheService) =>
+                           $templateCache.put('ng1.component.html', 'Hello, Angular!'));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('Hello, Angular!');
+           });
+         }));
+
+      // NOT SUPPORTED YET
+      xit('should support `templateUrl` (string) fetched from the server', fakeAsync(() => {
+            // Define `ng1Component`
+            const ng1Component: angular.IComponent = {templateUrl: 'ng1.component.html'};
+
+            // 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', [])
+                    .component('ng1', ng1Component)
+                    .directive('ng2', downgradeComponent({component: Ng2Component}))
+                    .value(
+                        '$httpBackend',
+                        (method: string, url: string, post?: any, callback?: Function) =>
+                            setTimeout(
+                                () => callback !(200, `${method}:${url}`.toLowerCase()), 1000));
+
+            // Define `Ng2Module`
+            @NgModule({
+              declarations: [Ng1ComponentFacade, Ng2Component],
+              entryComponents: [Ng2Component],
+              imports: [BrowserModule, UpgradeModule]
+            })
+            class Ng2Module {
+              ngDoBootstrap() {}
+            }
+
+            // Bootstrap
+            const element = html(`<ng2></ng2>`);
+
+            bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+              tick(500);
+              expect(multiTrim(element.textContent)).toBe('');
+
+              tick(500);
+              expect(multiTrim(element.textContent)).toBe('get:ng1.component.html');
+            });
+          }));
+
+      // NOT SUPPORTED YET
+      xit('should support `templateUrl` (function) fetched from the server', fakeAsync(() => {
+            // Define `ng1Component`
+            const ng1Component: angular.IComponent = {templateUrl: () => 'ng1.component.html'};
+
+            // 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', [])
+                    .component('ng1', ng1Component)
+                    .directive('ng2', downgradeComponent({component: Ng2Component}))
+                    .value(
+                        '$httpBackend',
+                        (method: string, url: string, post?: any, callback?: Function) =>
+                            setTimeout(
+                                () => callback !(200, `${method}:${url}`.toLowerCase()), 1000));
+
+            // Define `Ng2Module`
+            @NgModule({
+              declarations: [Ng1ComponentFacade, Ng2Component],
+              entryComponents: [Ng2Component],
+              imports: [BrowserModule, UpgradeModule]
+            })
+            class Ng2Module {
+              ngDoBootstrap() {}
+            }
+
+            // Bootstrap
+            const element = html(`<ng2></ng2>`);
+
+            bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+              tick(500);
+              expect(multiTrim(element.textContent)).toBe('');
+
+              tick(500);
+              expect(multiTrim(element.textContent)).toBe('get:ng1.component.html');
+            });
+          }));
+
+      it('should support empty templates', async(() => {
+           // Define `ng1Component`s
+           const ng1ComponentA: angular.IComponent = {template: ''};
+           const ng1ComponentB: angular.IComponent = {template: () => ''};
+           const ng1ComponentC: angular.IComponent = {templateUrl: 'ng1.component.html'};
+           const ng1ComponentD: angular.IComponent = {templateUrl: () => 'ng1.component.html'};
+
+           // Define `Ng1ComponentFacade`s
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(e: ElementRef, i: Injector) { super('ng1A', e, i); }
+           }
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             constructor(e: ElementRef, i: Injector) { super('ng1B', e, i); }
+           }
+           @Directive({selector: 'ng1C'})
+           class Ng1ComponentCFacade extends UpgradeComponent {
+             constructor(e: ElementRef, i: Injector) { super('ng1C', e, i); }
+           }
+           @Directive({selector: 'ng1D'})
+           class Ng1ComponentDFacade extends UpgradeComponent {
+             constructor(e: ElementRef, i: Injector) { super('ng1D', e, i); }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               <ng1A>Ignore this</ng1A>
+               <ng1B>Ignore this</ng1B>
+               <ng1C>Ignore this</ng1C>
+               <ng1D>Ignore this</ng1D>
+             `
+           })
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1A', ng1ComponentA)
+                                 .component('ng1B', ng1ComponentB)
+                                 .component('ng1C', ng1ComponentC)
+                                 .component('ng1D', ng1ComponentD)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}))
+                                 .run(
+                                     ($templateCache: angular.ITemplateCacheService) =>
+                                         $templateCache.put('ng1.component.html', ''));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [
+               Ng1ComponentAFacade, Ng1ComponentBFacade, Ng1ComponentCFacade, Ng1ComponentDFacade,
+               Ng2Component
+             ],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule],
+             schemas: [NO_ERRORS_SCHEMA]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('');
+           });
+         }));
+    });
+
+    describe('bindings', () => {
+      it('should support `@` bindings', fakeAsync(() => {
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'Inside: {{ $ctrl.inputA }}, {{ $ctrl.inputB }}',
+             bindings: {inputA: '@inputAttrA', inputB: '@'}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Input('inputAttrA') inputA !: string;
+             // TODO(issue/24571): remove '!'.
+             @Input() inputB !: string;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // 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', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             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';
+             tick();
+
+             expect(multiTrim(element.textContent)).toBe('Inside: baz, qux | Outside: foo, bar');
+
+             ng2ComponentInstance.dataA = 'foo2';
+             ng2ComponentInstance.dataB = 'bar2';
+             $digest(adapter);
+             tick();
+
+             expect(multiTrim(element.textContent))
+                 .toBe('Inside: foo2, bar2 | Outside: foo2, bar2');
+           });
+         }));
+
+      it('should support `<` bindings', fakeAsync(() => {
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'Inside: {{ $ctrl.inputA.value }}, {{ $ctrl.inputB.value }}',
+             bindings: {inputA: '<inputAttrA', inputB: '<'}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Input('inputAttrA') inputA !: string;
+             // TODO(issue/24571): remove '!'.
+             @Input() inputB !: string;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // 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', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             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'};
+             tick();
+
+             expect(multiTrim(element.textContent)).toBe('Inside: baz, qux | Outside: foo, bar');
+
+             ng2ComponentInstance.dataA = {value: 'foo2'};
+             ng2ComponentInstance.dataB = {value: 'bar2'};
+             $digest(adapter);
+             tick();
+
+             expect(multiTrim(element.textContent))
+                 .toBe('Inside: foo2, bar2 | Outside: foo2, bar2');
+           });
+         }));
+
+      it('should support `=` bindings', fakeAsync(() => {
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'Inside: {{ $ctrl.inputA.value }}, {{ $ctrl.inputB.value }}',
+             bindings: {inputA: '=inputAttrA', inputB: '='}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Input('inputAttrA') inputA !: string;
+             // TODO(issue/24571): remove '!'.
+             @Output('inputAttrAChange') inputAChange !: EventEmitter<any>;
+             // TODO(issue/24571): remove '!'.
+             @Input() inputB !: string;
+             // TODO(issue/24571): remove '!'.
+             @Output() inputBChange !: EventEmitter<any>;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // 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', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             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'};
+             tick();
+
+             expect(multiTrim(element.textContent)).toBe('Inside: baz, qux | Outside: baz, qux');
+
+             ng2ComponentInstance.dataA = {value: 'foo2'};
+             ng2ComponentInstance.dataB = {value: 'bar2'};
+             $digest(adapter);
+             tick();
+
+             expect(multiTrim(element.textContent))
+                 .toBe('Inside: foo2, bar2 | Outside: foo2, bar2');
+           });
+         }));
+
+      it('should support `&` bindings', fakeAsync(() => {
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'Inside: -',
+             bindings: {outputA: '&outputAttrA', outputB: '&'}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Output('outputAttrA') outputA !: EventEmitter<any>;
+             // TODO(issue/24571): remove '!'.
+             @Output() outputB !: EventEmitter<any>;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // 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', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             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');
+             tick();
+
+             expect(multiTrim(element.textContent)).toBe('Inside: - | Outside: baz, qux');
+           });
+         }));
+
+      it('should bind properties, events', fakeAsync(() => {
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: `
+               Hello {{ $ctrl.fullName }};
+               A: {{ $ctrl.modelA }};
+               B: {{ $ctrl.modelB }};
+               C: {{ $ctrl.modelC }}
+             `,
+             bindings: {fullName: '@', modelA: '<dataA', modelB: '=dataB', modelC: '=', event: '&'},
+             controller: function($scope: angular.IScope) {
+               $scope.$watch('$ctrl.modelB', (v: string) => {
+                 if (v === 'Savkin') {
+                   this.modelB = 'SAVKIN';
+                   this.event('WORKS');
+
+                   // Should not update because `modelA: '<dataA'` is uni-directional.
+                   this.modelA = 'VICTOR';
+
+                   // Should not update because `[modelC]` is uni-directional.
+                   this.modelC = 'sf';
+                 }
+               });
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Input() fullName !: string;
+             @Input('dataA') modelA: any;
+             @Input('dataB') modelB: any;
+             // TODO(issue/24571): remove '!'.
+             @Output('dataBChange') modelBChange !: EventEmitter<any>;
+             @Input() modelC: any;
+             // TODO(issue/24571): remove '!'.
+             @Output() modelCChange !: EventEmitter<any>;
+             // TODO(issue/24571): remove '!'.
+             @Output() event !: EventEmitter<any>;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               <ng1 fullName="{{ last }}, {{ first }}, {{ city }}"
+                   [(dataA)]="first" [(dataB)]="last" [modelC]="city"
+                   (event)="event = $event">
+               </ng1> |
+               <ng1 fullName="{{ 'TEST' }}" dataA="First" dataB="Last" modelC="City"></ng1> |
+               {{ event }} - {{ last }}, {{ first }}, {{ city }}
+             `
+           })
+           class Ng2Component {
+             first = 'Victor';
+             last = 'Savkin';
+             city = 'SF';
+             event = '?';
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent))
+                 .toBe(
+                     'Hello Savkin, Victor, SF; A: VICTOR; B: SAVKIN; C: sf | ' +
+                     'Hello TEST; A: First; B: Last; C: City | ' +
+                     'WORKS - SAVKIN, Victor, SF');
+
+             // Detect changes
+             tick();
+
+             expect(multiTrim(element.textContent))
+                 .toBe(
+                     'Hello SAVKIN, Victor, SF; A: VICTOR; B: SAVKIN; C: sf | ' +
+                     'Hello TEST; A: First; B: Last; C: City | ' +
+                     'WORKS - SAVKIN, Victor, SF');
+           });
+         }));
+
+      it('should bind optional properties', fakeAsync(() => {
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'Inside: {{ $ctrl.inputA.value }}, {{ $ctrl.inputB }}',
+             bindings:
+                 {inputA: '=?inputAttrA', inputB: '=?', outputA: '&?outputAttrA', outputB: '&?'}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Input('inputAttrA') inputA !: string;
+             // TODO(issue/24571): remove '!'.
+             @Output('inputAttrAChange') inputAChange !: EventEmitter<any>;
+             // TODO(issue/24571): remove '!'.
+             @Input() inputB !: string;
+             // TODO(issue/24571): remove '!'.
+             @Output() inputBChange !: EventEmitter<any>;
+             // TODO(issue/24571): remove '!'.
+             @Output('outputAttrA') outputA !: EventEmitter<any>;
+             // TODO(issue/24571): remove '!'.
+             @Output() outputB !: EventEmitter<any>;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               <ng1 [(inputAttrA)]="dataA" [(inputB)]="dataB.value"></ng1> |
+               <ng1 inputB="Bar" (outputAttrA)="dataA = $event"></ng1> |
+               <ng1 (outputB)="updateDataB($event)"></ng1> |
+               <ng1></ng1> |
+               Outside: {{ dataA.value }}, {{ dataB.value }}
+             `
+           })
+           class Ng2Component {
+             dataA = {value: 'foo'};
+             dataB = {value: 'bar'};
+
+             updateDataB(value: any) { this.dataB.value = value; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           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');
+
+             expect(multiTrim(element.textContent))
+                 .toBe(
+                     'Inside: foo, bar | Inside: , Bar | Inside: , | Inside: , | Outside: foo, bar');
+
+             ng1Controller0.inputA.value = 'baz';
+             ng1Controller0.inputB = 'qux';
+             tick();
+
+             expect(multiTrim(element.textContent))
+                 .toBe(
+                     'Inside: baz, qux | Inside: , Bar | Inside: , | Inside: , | Outside: baz, qux');
+
+             ng1Controller1.outputA({value: 'foo again'});
+             ng1Controller2.outputB('bar again');
+             $digest(adapter);
+             tick();
+
+             expect(ng1Controller0.inputA).toEqual({value: 'foo again'});
+             expect(ng1Controller0.inputB).toEqual('bar again');
+             expect(multiTrim(element.textContent))
+                 .toBe(
+                     'Inside: foo again, bar again | Inside: , Bar | Inside: , | Inside: , | ' +
+                     'Outside: foo again, bar again');
+           });
+         }));
+
+      it('should bind properties, events to scope when bindToController is not used',
+         fakeAsync(() => {
+           // Define `ng1Directive`
+           const ng1Directive: angular.IDirective = {
+             template: '{{ someText }} - Data: {{ inputA }} - Length: {{ inputA.length }}',
+             scope: {inputA: '=', outputA: '&'},
+             controller: function($scope: angular.IScope) {
+               $scope['someText'] = 'ng1';
+               this.$scope = $scope;
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: '[ng1]'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Input() inputA !: string;
+             // TODO(issue/24571): remove '!'.
+             @Output() inputAChange !: EventEmitter<any>;
+             // TODO(issue/24571): remove '!'.
+             @Output() outputA !: EventEmitter<any>;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+                <div ng1 [(inputA)]="dataA" (outputA)="dataA.push($event)"></div> |
+                {{ someText }} - Data: {{ dataA }} - Length: {{ dataA.length }}
+              `
+           })
+           class Ng2Component {
+             someText = 'ng2';
+             dataA = [1, 2, 3];
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1', () => ng1Directive)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             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');
+
+             ng1Controller.$scope.inputA = [4, 5];
+             tick();
+
+             expect(multiTrim(element.textContent))
+                 .toBe('ng1 - Data: [4,5] - Length: 2 | ng2 - Data: 4,5 - Length: 2');
+
+             ng1Controller.$scope.outputA(6);
+             $digest(adapter);
+             tick();
+
+             expect(ng1Controller.$scope.inputA).toEqual([4, 5, 6]);
+             expect(multiTrim(element.textContent))
+                 .toBe('ng1 - Data: [4,5,6] - Length: 3 | ng2 - Data: 4,5,6 - Length: 3');
+           });
+         }));
+    });
+
+    describe('compiling', () => {
+      it('should compile the ng1 template in the correct DOM context', async(() => {
+           let grandParentNodeName: string;
+
+           // Define `ng1Component`
+           const ng1ComponentA: angular.IComponent = {template: 'ng1A(<ng1-b></ng1-b>)'};
+           const ng1DirectiveB: angular.IDirective = {
+             compile: tElem => {
+               grandParentNodeName = tElem.parent !().parent !()[0].nodeName;
+               return {};
+             }
+           };
+
+           // Define `Ng1ComponentAFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2ComponentX`
+           @Component({selector: 'ng2-x', template: 'ng2X(<ng1A></ng1A>)'})
+           class Ng2ComponentX {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1', [])
+                                 .component('ng1A', ng1ComponentA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2X', downgradeComponent({component: Ng2ComponentX}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentAFacade, Ng2ComponentX],
+             entryComponents: [Ng2ComponentX],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2-x></ng2-x>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(grandParentNodeName).toBe('NG2-X');
+           });
+         }));
+    });
+
+    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`
+           const ng1Directive: angular.IDirective = {
+             template:
+                 '{{ vm.scope }}; {{ vm.isClass }}; {{ vm.hasElement }}; {{ vm.isPublished() }}',
+             scope: true,
+             controllerAs: 'vm',
+             controller: class {
+               hasElement: string;  // TODO(issue/24571): remove '!'.
+               isClass !: string;
+               scope: string;
+
+               constructor(public $element: angular.IAugmentedJQuery, $scope: angular.IScope) {
+                 this.hasElement = $element[0].nodeName;
+                 this.scope = $scope.$parent.$parent === $scope.$root ? 'scope' : 'wrong-scope';
+
+                 this.verifyIAmAClass();
+               }
+
+               isPublished() {
+                 return this.$element.controller !('ng1') === this ? 'published' : 'not-published';
+               }
+
+               verifyIAmAClass() { this.isClass = 'isClass'; }
+             }
+           };
+
+           // 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', [])
+                                 .directive('ng1', () => ng1Directive)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('scope; isClass; NG1; published');
+           });
+         }));
+
+      it('should support `bindToController` (boolean)', async(() => {
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: 'Scope: {{ title }}; Controller: {{ $ctrl.title }}',
+             scope: {title: '@'},
+             bindToController: false,
+             controllerAs: '$ctrl',
+             controller: class {}
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: 'Scope: {{ title }}; Controller: {{ $ctrl.title }}',
+             scope: {title: '@'},
+             bindToController: true,
+             controllerAs: '$ctrl',
+             controller: class {}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Input() title !: string;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Input() title !: string;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+            <ng1A title="WORKS"></ng1A> |
+            <ng1B title="WORKS"></ng1B>
+          `
+           })
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule],
+             schemas: [NO_ERRORS_SCHEMA]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent))
+                 .toBe('Scope: WORKS; Controller: | Scope: ; Controller: WORKS');
+           });
+         }));
+
+      it('should support `bindToController` (object)', async(() => {
+           // Define `ng1Directive`
+           const ng1Directive: angular.IDirective = {
+             template: '{{ $ctrl.title }}',
+             scope: {},
+             bindToController: {title: '@'},
+             controllerAs: '$ctrl',
+             controller: class {}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Input() title !: string;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1 title="WORKS"></ng1>'})
+           class Ng2Component {
+             dataA = 'foo';
+             dataB = 'bar';
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1', () => ng1Directive)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('WORKS');
+           });
+         }));
+
+      it('should support `controller` as string', async(() => {
+           // Define `ng1Directive`
+           const ng1Directive: angular.IDirective = {
+             template: '{{ $ctrl.title }} {{ $ctrl.text }}',
+             scope: {title: '@'},
+             bindToController: true,
+             controller: 'Ng1Controller as $ctrl'
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             // TODO(issue/24571): remove '!'.
+             @Input() title !: string;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1 title="WORKS"></ng1>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .controller('Ng1Controller', class { text = 'GREAT'; })
+                                 .directive('ng1', () => ng1Directive)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('WORKS GREAT');
+           });
+         }));
+
+      it('should insert the compiled content before instantiating the controller', async(() => {
+           let compiledContent: string;
+           let getCurrentContent: () => string;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'Hello, {{ $ctrl.name }}!',
+             controller: class {
+               name = 'world';
+
+               constructor($element: angular.IAugmentedJQuery) {
+                 getCurrentContent = () => $element.text !();
+                 compiledContent = getCurrentContent();
+               }
+             }
+           };
+
+           // 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', [])
+                                 .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(() => {
+             expect(multiTrim(compiledContent)).toBe('Hello, {{ $ctrl.name }}!');
+             expect(multiTrim(getCurrentContent())).toBe('Hello, world!');
+           });
+         }));
+    });
+
+    describe('require', () => {
+      // NOT YET SUPPORTED
+      xdescribe('in pre-/post-link', () => {
+        it('should resolve to its own controller if falsy', async(() => {
+             // Define `ng1Directive`
+             const ng1Directive: angular.IDirective = {
+               template: 'Pre: {{ pre }} | Post: {{ post }}',
+               controller: class {value = 'foo';},
+               link: {
+                 pre: function(scope: any, elem: any, attrs: any, ctrl: any) {
+                   scope['pre'] = ctrl.value;
+                 },
+                 post: function(scope: any, elem: any, attrs: any, ctrl: any) {
+                   scope['post'] = ctrl.value;
+                 }
+               }
+             };
+
+             // 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', [])
+                                   .directive('ng1', () => ng1Directive)
+                                   .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+             // Define `Ng2Module`
+             @NgModule({
+               declarations: [Ng1ComponentFacade, Ng2Component],
+               entryComponents: [Ng2Component],
+               imports: [BrowserModule, UpgradeModule]
+             })
+             class Ng2Module {
+               ngDoBootstrap() {}
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+               expect(multiTrim(document.body.textContent)).toBe('Pre: foo | Post: foo');
+             });
+           }));
+
+        // TODO: Add more tests
+      });
+
+      describe('in controller', () => {
+        it('should be available to children', async(() => {
+             // Define `ng1Component`
+             const ng1ComponentA: angular.IComponent = {
+               template: '<ng1-b></ng1-b>',
+               controller: class {value = 'ng1A';}
+             };
+
+             const ng1ComponentB: angular.IComponent = {
+               template: 'Required: {{ $ctrl.required.value }}',
+               require: {required: '^^ng1A'}
+             };
+
+             // Define `Ng1ComponentFacade`
+             @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('ng1Module', [])
+                                   .component('ng1A', ng1ComponentA)
+                                   .component('ng1B', ng1ComponentB)
+                                   .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+             // Define `Ng2Module`
+             @NgModule({
+               declarations: [Ng1ComponentAFacade, Ng2Component],
+               entryComponents: [Ng2Component],
+               imports: [BrowserModule, UpgradeModule]
+             })
+             class Ng2Module {
+               ngDoBootstrap() {}
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+               expect(multiTrim(element.textContent)).toBe('Required: ng1A');
+             });
+           }));
+
+        it('should throw if required controller cannot be found', async(() => {
+             // Define `ng1Component`
+             const ng1ComponentA: angular.IComponent = {require: {foo: 'iDoNotExist'}};
+             const ng1ComponentB: angular.IComponent = {require: {foo: '^iDoNotExist'}};
+             const ng1ComponentC: angular.IComponent = {require: {foo: '^^iDoNotExist'}};
+
+             // Define `Ng1ComponentFacade`
+             @Directive({selector: 'ng1A'})
+             class Ng1ComponentAFacade extends UpgradeComponent {
+               constructor(elementRef: ElementRef, injector: Injector) {
+                 super('ng1A', elementRef, injector);
+               }
+             }
+
+             @Directive({selector: 'ng1B'})
+             class Ng1ComponentBFacade extends UpgradeComponent {
+               constructor(elementRef: ElementRef, injector: Injector) {
+                 super('ng1B', elementRef, injector);
+               }
+             }
+
+             @Directive({selector: 'ng1C'})
+             class Ng1ComponentCFacade extends UpgradeComponent {
+               constructor(elementRef: ElementRef, injector: Injector) {
+                 super('ng1C', elementRef, injector);
+               }
+             }
+
+             // Define `Ng2Component`
+             @Component({selector: 'ng2-a', template: '<ng1A></ng1A>'})
+             class Ng2ComponentA {
+             }
+
+             @Component({selector: 'ng2-b', template: '<ng1B></ng1B>'})
+             class Ng2ComponentB {
+             }
+
+             @Component({selector: 'ng2-c', template: '<ng1C></ng1C>'})
+             class Ng2ComponentC {
+             }
+
+             // Define `ng1Module`
+             const mockExceptionHandler = jasmine.createSpy('$exceptionHandler');
+             const ng1Module =
+                 angular.module('ng1Module', [])
+                     .component('ng1A', ng1ComponentA)
+                     .component('ng1B', ng1ComponentB)
+                     .component('ng1C', ng1ComponentC)
+                     .directive('ng2A', downgradeComponent({component: Ng2ComponentA}))
+                     .directive('ng2B', downgradeComponent({component: Ng2ComponentB}))
+                     .directive('ng2C', downgradeComponent({component: Ng2ComponentC}))
+                     .value('$exceptionHandler', mockExceptionHandler);
+
+             // Define `Ng2Module`
+             @NgModule({
+               declarations: [
+                 Ng1ComponentAFacade, Ng1ComponentBFacade, Ng1ComponentCFacade, Ng2ComponentA,
+                 Ng2ComponentB, Ng2ComponentC
+               ],
+               entryComponents: [Ng2ComponentA, Ng2ComponentB, Ng2ComponentC],
+               imports: [BrowserModule, UpgradeModule]
+             })
+             class Ng2Module {
+               ngDoBootstrap() {}
+             }
+
+             // Bootstrap
+             const elementA = html(`<ng2-a></ng2-a>`);
+             const elementB = html(`<ng2-b></ng2-b>`);
+             const elementC = html(`<ng2-c></ng2-c>`);
+
+             bootstrap(platformBrowserDynamic(), Ng2Module, elementA, ng1Module).then(() => {
+               expect(mockExceptionHandler)
+                   .toHaveBeenCalledWith(new Error(
+                       'Unable to find required \'iDoNotExist\' in upgraded directive \'ng1A\'.'));
+             });
+
+             bootstrap(platformBrowserDynamic(), Ng2Module, elementB, ng1Module).then(() => {
+               expect(mockExceptionHandler)
+                   .toHaveBeenCalledWith(new Error(
+                       'Unable to find required \'^iDoNotExist\' in upgraded directive \'ng1B\'.'));
+             });
+
+             bootstrap(platformBrowserDynamic(), Ng2Module, elementC, ng1Module).then(() => {
+               expect(mockExceptionHandler)
+                   .toHaveBeenCalledWith(new Error(
+                       'Unable to find required \'^^iDoNotExist\' in upgraded directive \'ng1C\'.'));
+             });
+           }));
+
+        it('should not throw if missing required controller is optional', async(() => {
+             // Define `ng1Component`
+             const ng1Component: angular.IComponent = {
+               require: {
+                 foo: '?iDoNotExist',
+                 bar: '^?iDoNotExist',
+                 baz: '?^^iDoNotExist',
+               }
+             };
+
+             // 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 mockExceptionHandler = jasmine.createSpy('$exceptionHandler');
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1', ng1Component)
+                                   .directive('ng2', downgradeComponent({component: Ng2Component}))
+                                   .value('$exceptionHandler', mockExceptionHandler);
+
+             // Define `Ng2Module`
+             @NgModule({
+               declarations: [Ng1ComponentFacade, Ng2Component],
+               entryComponents: [Ng2Component],
+               imports: [BrowserModule, UpgradeModule]
+             })
+             class Ng2Module {
+               ngDoBootstrap() {}
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+               expect(mockExceptionHandler).not.toHaveBeenCalled();
+             });
+           }));
+
+        it('should assign resolved values to the controller instance (if `require` is not object)',
+           async(() => {
+             // Define `ng1Component`
+             const ng1ComponentA: angular.IComponent = {
+               template: 'ng1A(<div><ng2></ng2></div>)',
+               controller: class {value = 'A';}
+             };
+
+             const ng1ComponentB: angular.IComponent = {
+               template: `ng1B({{ $ctrl.getProps() }})`,
+               require: '^ng1A',
+               controller: class {
+                 getProps() {
+                   // If all goes well, there should be no keys on `this`
+                   return Object.keys(this).join(', ');
+                 }
+               }
+             };
+
+             const ng1ComponentC: angular.IComponent = {
+               template: `ng1C({{ $ctrl.getProps() }})`,
+               require: ['?ng1A', '^ng1A', '^^ng1A', 'ng1C', '^ng1C', '?^^ng1C'],
+               controller: class {
+                 getProps() {
+                   // If all goes well, there should be no keys on `this`
+                   return Object.keys(this).join(', ');
+                 }
+               }
+             };
+
+             // Define `Ng1ComponentFacade`
+             @Directive({selector: 'ng1B'})
+             class Ng1ComponentBFacade extends UpgradeComponent {
+               constructor(elementRef: ElementRef, injector: Injector) {
+                 super('ng1B', elementRef, injector);
+               }
+             }
+
+             @Directive({selector: 'ng1C'})
+             class Ng1ComponentCFacade extends UpgradeComponent {
+               constructor(elementRef: ElementRef, injector: Injector) {
+                 super('ng1C', elementRef, injector);
+               }
+             }
+
+             // Define `Ng2Component`
+             @Component(
+                 {selector: 'ng2', template: 'ng2(<div><ng1B></ng1B> | <ng1C></ng1C></div>)'})
+             class Ng2Component {
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1A', ng1ComponentA)
+                                   .component('ng1B', ng1ComponentB)
+                                   .component('ng1C', ng1ComponentC)
+                                   .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+             // Define `Ng2Module`
+             @NgModule({
+               declarations: [Ng1ComponentBFacade, Ng1ComponentCFacade, Ng2Component],
+               entryComponents: [Ng2Component],
+               imports: [BrowserModule, UpgradeModule]
+             })
+             class Ng2Module {
+               ngDoBootstrap() {}
+             }
+
+             // Bootstrap
+             const element = html(`<ng1-a></ng1-a>`);
+
+             bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+               expect(multiTrim(element.textContent)).toBe('ng1A(ng2(ng1B() | ng1C()))');
+             });
+           }));
+
+        it('should assign resolved values to the controller instance (if `require` is object)',
+           async(() => {
+             // Define `ng1Component`
+             const ng1ComponentA: angular.IComponent = {
+               template: 'ng1A(<div><ng2></ng2></div>)',
+               controller: class {value = 'A';}
+             };
+
+             const ng1ComponentB: angular.IComponent = {
+               template: `ng1B(
+                 ng1A: {{ $ctrl.ng1ASelf.value }} |
+                 ^ng1A: {{ $ctrl.ng1ASelfUp.value }} |
+                 ^^ng1A: {{ $ctrl.ng1AParentUp.value }} |
+                 ng1B: {{ $ctrl.ng1BSelf.value }} |
+                 ^ng1B: {{ $ctrl.ng1BSelfUp.value }} |
+                 ^^ng1B: {{ $ctrl.ng1BParentUp.value }}
+               )`,
+               require: {
+                 ng1ASelf: '?ng1A',
+                 ng1ASelfUp: '^ng1A',
+                 ng1AParentUp: '^^ng1A',
+                 ng1BSelf: 'ng1B',
+                 ng1BSelfUp: '^ng1B',
+                 ng1BParentUp: '?^^ng1B',
+               },
+               controller: class {value = 'B';}
+             };
+
+             // Define `Ng1ComponentFacade`
+             @Directive({selector: 'ng1B'})
+             class Ng1ComponentBFacade extends UpgradeComponent {
+               constructor(elementRef: ElementRef, injector: Injector) {
+                 super('ng1B', elementRef, injector);
+               }
+             }
+
+             // Define `Ng2Component`
+             @Component({selector: 'ng2', template: 'ng2(<div><ng1B></ng1B></div>)'})
+             class Ng2Component {
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1A', ng1ComponentA)
+                                   .component('ng1B', ng1ComponentB)
+                                   .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+             // Define `Ng2Module`
+             @NgModule({
+               declarations: [Ng1ComponentBFacade, Ng2Component],
+               entryComponents: [Ng2Component],
+               imports: [BrowserModule, UpgradeModule]
+             })
+             class Ng2Module {
+               ngDoBootstrap() {}
+             }
+
+             // Bootstrap
+             const element = html(`<ng1-a></ng1-a>`);
+
+             bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+               expect(multiTrim(element.textContent))
+                   .toBe(
+                       'ng1A(ng2(ng1B( ng1A: | ^ng1A: A | ^^ng1A: A | ng1B: B | ^ng1B: B | ^^ng1B: )))');
+             });
+           }));
+
+        it('should assign to controller before calling `$onInit()`', async(() => {
+             // Define `ng1Component`
+             const ng1ComponentA: angular.IComponent = {
+               template: '<ng2></ng2>',
+               controller: class {value = 'ng1A';}
+             };
+
+             const ng1ComponentB: angular.IComponent = {
+               template: '$onInit: {{ $ctrl.onInitValue }}',
+               require: {required: '^^ng1A'},
+               controller: class {
+                 $onInit() {
+                   const self = this as any;
+                   self.onInitValue = self.required.value;
+                 }
+               }
+             };
+
+             // Define `Ng1ComponentFacade`
+             @Directive({selector: 'ng1B'})
+             class Ng1ComponentBFacade extends UpgradeComponent {
+               constructor(elementRef: ElementRef, injector: Injector) {
+                 super('ng1B', elementRef, injector);
+               }
+             }
+
+             // Define `Ng2Component`
+             @Component({selector: 'ng2', template: '<ng1B></ng1B>'})
+             class Ng2Component {
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1A', ng1ComponentA)
+                                   .component('ng1B', ng1ComponentB)
+                                   .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+             // Define `Ng2Module`
+             @NgModule({
+               declarations: [Ng1ComponentBFacade, Ng2Component],
+               entryComponents: [Ng2Component],
+               imports: [BrowserModule, UpgradeModule]
+             })
+             class Ng2Module {
+               ngDoBootstrap() {}
+             }
+
+             // Bootstrap
+             const element = html(`<ng1-a></ng1-a>`);
+
+             bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+               expect(multiTrim(element.textContent)).toBe('$onInit: ng1A');
+             });
+           }));
+
+        it('should use the key as name if the required controller name is omitted', async(() => {
+             // Define `ng1Component`
+             const ng1ComponentA: angular.IComponent = {
+               template: '<ng1-b></ng1-b>',
+               controller: class {value = 'A';}
+             };
+
+             const ng1ComponentB:
+                 angular.IComponent = {template: '<ng2></ng2>', controller: class {value = 'B';}};
+
+             const ng1ComponentC: angular.IComponent = {
+               template:
+                   'ng1A: {{ $ctrl.ng1A.value }} | ng1B: {{ $ctrl.ng1B.value }} | ng1C: {{ $ctrl.ng1C.value }}',
+               require: {
+                 ng1A: '^^',
+                 ng1B: '?^',
+                 ng1C: '',
+               },
+               controller: class {value = 'C';}
+             };
+
+             // Define `Ng1ComponentFacade`
+             @Directive({selector: 'ng1C'})
+             class Ng1ComponentCFacade extends UpgradeComponent {
+               constructor(elementRef: ElementRef, injector: Injector) {
+                 super('ng1C', elementRef, injector);
+               }
+             }
+
+             // Define `Ng2Component`
+             @Component({selector: 'ng2', template: '<ng1C></ng1C>'})
+             class Ng2Component {
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1A', ng1ComponentA)
+                                   .component('ng1B', ng1ComponentB)
+                                   .component('ng1C', ng1ComponentC)
+                                   .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+             // Define `Ng2Module`
+             @NgModule({
+               declarations: [Ng1ComponentCFacade, Ng2Component],
+               entryComponents: [Ng2Component],
+               imports: [BrowserModule, UpgradeModule]
+             })
+             class Ng2Module {
+               ngDoBootstrap() {}
+             }
+
+             // Bootstrap
+             const element = html('<ng1-a></ng1-a>');
+
+             bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+               expect(multiTrim(element.textContent)).toBe('ng1A: A | ng1B: B | ng1C: C');
+             });
+           }));
+      });
+    });
+
+    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');
+           const controllerOnChangesA = jasmine.createSpy('controllerOnChangesA');
+           const controllerOnChangesB = jasmine.createSpy('controllerOnChangesB');
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: '',
+             scope: {inputA: '<'},
+             bindToController: false,
+             controllerAs: '$ctrl',
+             controller:
+                 class {$onChanges(changes: SimpleChanges) { controllerOnChangesA(changes); }}
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: '',
+             scope: {inputB: '<'},
+             bindToController: true,
+             controllerAs: '$ctrl',
+             controller:
+                 class {$onChanges(changes: SimpleChanges) { controllerOnChangesB(changes); }}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             @Input() inputA: any;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             @Input() inputB: any;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: '<ng1A [inputA]="data"></ng1A> | <ng1B [inputB]="data"></ng1B>'
+           })
+           class Ng2Component {
+             data = {foo: 'bar'};
+
+             constructor() { ng2ComponentInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}))
+                                 .run(($rootScope: angular.IRootScopeService) => {
+                                   Object.getPrototypeOf($rootScope)['$onChanges'] = scopeOnChanges;
+                                 });
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             // Initial change
+             expect(scopeOnChanges.calls.count()).toBe(1);
+             expect(controllerOnChangesA).not.toHaveBeenCalled();
+             expect(controllerOnChangesB.calls.count()).toBe(1);
+
+             expect(scopeOnChanges.calls.argsFor(0)[0]).toEqual({inputA: jasmine.any(Object)});
+             expect(scopeOnChanges.calls.argsFor(0)[0].inputA.currentValue).toEqual({foo: 'bar'});
+             expect(scopeOnChanges.calls.argsFor(0)[0].inputA.isFirstChange()).toBe(true);
+             expect(controllerOnChangesB.calls.argsFor(0)[0].inputB.currentValue).toEqual({
+               foo: 'bar'
+             });
+             expect(controllerOnChangesB.calls.argsFor(0)[0].inputB.isFirstChange()).toBe(true);
+
+             // Change: Re-assign `data`
+             ng2ComponentInstance.data = {foo: 'baz'};
+             $digest(adapter);
+             tick();
+
+             expect(scopeOnChanges.calls.count()).toBe(2);
+             expect(controllerOnChangesA).not.toHaveBeenCalled();
+             expect(controllerOnChangesB.calls.count()).toBe(2);
+
+             expect(scopeOnChanges.calls.argsFor(1)[0]).toEqual({inputA: jasmine.any(Object)});
+             expect(scopeOnChanges.calls.argsFor(1)[0].inputA.previousValue).toEqual({foo: 'bar'});
+             expect(scopeOnChanges.calls.argsFor(1)[0].inputA.currentValue).toEqual({foo: 'baz'});
+             expect(scopeOnChanges.calls.argsFor(1)[0].inputA.isFirstChange()).toBe(false);
+             expect(controllerOnChangesB.calls.argsFor(1)[0].inputB.previousValue).toEqual({
+               foo: 'bar'
+             });
+             expect(controllerOnChangesB.calls.argsFor(1)[0].inputB.currentValue).toEqual({
+               foo: 'baz'
+             });
+             expect(controllerOnChangesB.calls.argsFor(1)[0].inputB.isFirstChange()).toBe(false);
+
+             // No change: Update internal property
+             ng2ComponentInstance.data.foo = 'qux';
+             $digest(adapter);
+             tick();
+
+             expect(scopeOnChanges.calls.count()).toBe(2);
+             expect(controllerOnChangesA).not.toHaveBeenCalled();
+             expect(controllerOnChangesB.calls.count()).toBe(2);
+
+             // Change: Re-assign `data` (even if it looks the same)
+             ng2ComponentInstance.data = {foo: 'qux'};
+             $digest(adapter);
+             tick();
+
+             expect(scopeOnChanges.calls.count()).toBe(3);
+             expect(controllerOnChangesA).not.toHaveBeenCalled();
+             expect(controllerOnChangesB.calls.count()).toBe(3);
+
+             expect(scopeOnChanges.calls.argsFor(2)[0]).toEqual({inputA: jasmine.any(Object)});
+             expect(scopeOnChanges.calls.argsFor(2)[0].inputA.previousValue).toEqual({foo: 'qux'});
+             expect(scopeOnChanges.calls.argsFor(2)[0].inputA.currentValue).toEqual({foo: 'qux'});
+             expect(scopeOnChanges.calls.argsFor(2)[0].inputA.isFirstChange()).toBe(false);
+             expect(controllerOnChangesB.calls.argsFor(2)[0].inputB.previousValue).toEqual({
+               foo: 'qux'
+             });
+             expect(controllerOnChangesB.calls.argsFor(2)[0].inputB.currentValue).toEqual({
+               foo: 'qux'
+             });
+             expect(controllerOnChangesB.calls.argsFor(2)[0].inputB.isFirstChange()).toBe(false);
+           });
+         }));
+
+      it('should call `$onChanges()` on binding destination (instance)', fakeAsync(() => {
+           const scopeOnChangesA = jasmine.createSpy('scopeOnChangesA');
+           const scopeOnChangesB = jasmine.createSpy('scopeOnChangesB');
+           const controllerOnChangesA = jasmine.createSpy('controllerOnChangesA');
+           const controllerOnChangesB = jasmine.createSpy('controllerOnChangesB');
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: '',
+             scope: {inputA: '<'},
+             bindToController: false,
+             controllerAs: '$ctrl',
+             controller: class {
+               constructor($scope: angular.IScope) {
+                 $scope['$onChanges'] = scopeOnChangesA;
+                 (this as any).$onChanges = controllerOnChangesA;
+               }
+             }
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: '',
+             scope: {inputB: '<'},
+             bindToController: true,
+             controllerAs: '$ctrl',
+             controller: class {
+               constructor($scope: angular.IScope) {
+                 $scope['$onChanges'] = scopeOnChangesB;
+                 (this as any).$onChanges = controllerOnChangesB;
+               }
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             @Input() inputA: any;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             @Input() inputB: any;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: '<ng1A [inputA]="data"></ng1A> | <ng1B [inputB]="data"></ng1B>'
+           })
+           class Ng2Component {
+             data = {foo: 'bar'};
+
+             constructor() { ng2ComponentInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             // Initial change
+             expect(scopeOnChangesA.calls.count()).toBe(1);
+             expect(scopeOnChangesB).not.toHaveBeenCalled();
+             expect(controllerOnChangesA).not.toHaveBeenCalled();
+             expect(controllerOnChangesB.calls.count()).toBe(1);
+
+             expect(scopeOnChangesA.calls.argsFor(0)[0].inputA.currentValue).toEqual({foo: 'bar'});
+             expect(scopeOnChangesA.calls.argsFor(0)[0].inputA.isFirstChange()).toBe(true);
+             expect(controllerOnChangesB.calls.argsFor(0)[0].inputB.currentValue).toEqual({
+               foo: 'bar'
+             });
+             expect(controllerOnChangesB.calls.argsFor(0)[0].inputB.isFirstChange()).toBe(true);
+
+             // Change: Re-assign `data`
+             ng2ComponentInstance.data = {foo: 'baz'};
+             $digest(adapter);
+             tick();
+
+             expect(scopeOnChangesA.calls.count()).toBe(2);
+             expect(scopeOnChangesB).not.toHaveBeenCalled();
+             expect(controllerOnChangesA).not.toHaveBeenCalled();
+             expect(controllerOnChangesB.calls.count()).toBe(2);
+
+             expect(scopeOnChangesA.calls.argsFor(1)[0].inputA.previousValue).toEqual({foo: 'bar'});
+             expect(scopeOnChangesA.calls.argsFor(1)[0].inputA.currentValue).toEqual({foo: 'baz'});
+             expect(scopeOnChangesA.calls.argsFor(1)[0].inputA.isFirstChange()).toBe(false);
+             expect(controllerOnChangesB.calls.argsFor(1)[0].inputB.previousValue).toEqual({
+               foo: 'bar'
+             });
+             expect(controllerOnChangesB.calls.argsFor(1)[0].inputB.currentValue).toEqual({
+               foo: 'baz'
+             });
+             expect(controllerOnChangesB.calls.argsFor(1)[0].inputB.isFirstChange()).toBe(false);
+
+             // No change: Update internal property
+             ng2ComponentInstance.data.foo = 'qux';
+             $digest(adapter);
+             tick();
+
+             expect(scopeOnChangesA.calls.count()).toBe(2);
+             expect(scopeOnChangesB).not.toHaveBeenCalled();
+             expect(controllerOnChangesA).not.toHaveBeenCalled();
+             expect(controllerOnChangesB.calls.count()).toBe(2);
+
+             // Change: Re-assign `data` (even if it looks the same)
+             ng2ComponentInstance.data = {foo: 'qux'};
+             $digest(adapter);
+             tick();
+
+             expect(scopeOnChangesA.calls.count()).toBe(3);
+             expect(scopeOnChangesB).not.toHaveBeenCalled();
+             expect(controllerOnChangesA).not.toHaveBeenCalled();
+             expect(controllerOnChangesB.calls.count()).toBe(3);
+
+             expect(scopeOnChangesA.calls.argsFor(2)[0].inputA.previousValue).toEqual({foo: 'qux'});
+             expect(scopeOnChangesA.calls.argsFor(2)[0].inputA.currentValue).toEqual({foo: 'qux'});
+             expect(scopeOnChangesA.calls.argsFor(2)[0].inputA.isFirstChange()).toBe(false);
+             expect(controllerOnChangesB.calls.argsFor(2)[0].inputB.previousValue).toEqual({
+               foo: 'qux'
+             });
+             expect(controllerOnChangesB.calls.argsFor(2)[0].inputB.currentValue).toEqual({
+               foo: 'qux'
+             });
+             expect(controllerOnChangesB.calls.argsFor(2)[0].inputB.isFirstChange()).toBe(false);
+           });
+         }));
+
+      it('should call `$onInit()` on controller', async(() => {
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: 'Called: {{ called }}',
+             bindToController: false,
+             controller: class {
+               constructor(private $scope: angular.IScope) { $scope['called'] = 'no'; }
+
+               $onInit() { this.$scope['called'] = 'yes'; }
+             }
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: 'Called: {{ called }}',
+             bindToController: true,
+             controller: class {
+               constructor($scope: angular.IScope) {
+                 $scope['called'] = 'no';
+                 (this as any)['$onInit'] = () => $scope['called'] = 'yes';
+               }
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1A></ng1A> | <ng1B></ng1B>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('Called: yes | Called: yes');
+           });
+         }));
+
+      it('should not call `$onInit()` on scope', async(() => {
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: 'Called: {{ called }}',
+             bindToController: false,
+             controller: class {
+               constructor($scope: angular.IScope) {
+                 $scope['called'] = 'no';
+                 $scope['$onInit'] = () => $scope['called'] = 'yes';
+                 Object.getPrototypeOf($scope)['$onInit'] = () => $scope['called'] = 'yes';
+               }
+             }
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: 'Called: {{ called }}',
+             bindToController: true,
+             controller: class {
+               constructor($scope: angular.IScope) {
+                 $scope['called'] = 'no';
+                 $scope['$onInit'] = () => $scope['called'] = 'yes';
+                 Object.getPrototypeOf($scope)['$onInit'] = () => $scope['called'] = 'yes';
+               }
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1A></ng1A> | <ng1B></ng1B>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('Called: no | Called: no');
+           });
+         }));
+
+      it('should call `$postLink()` on controller', async(() => {
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: 'Called: {{ called }}',
+             bindToController: false,
+             controller: class {
+               constructor(private $scope: angular.IScope) { $scope['called'] = 'no'; }
+
+               $postLink() { this.$scope['called'] = 'yes'; }
+             }
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: 'Called: {{ called }}',
+             bindToController: true,
+             controller: class {
+               constructor($scope: angular.IScope) {
+                 $scope['called'] = 'no';
+                 (this as any)['$postLink'] = () => $scope['called'] = 'yes';
+               }
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1A></ng1A> | <ng1B></ng1B>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('Called: yes | Called: yes');
+           });
+         }));
+
+      it('should not call `$postLink()` on scope', async(() => {
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: 'Called: {{ called }}',
+             bindToController: false,
+             controller: class {
+               constructor($scope: angular.IScope) {
+                 $scope['called'] = 'no';
+                 $scope['$postLink'] = () => $scope['called'] = 'yes';
+                 Object.getPrototypeOf($scope)['$postLink'] = () => $scope['called'] = 'yes';
+               }
+             }
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: 'Called: {{ called }}',
+             bindToController: true,
+             controller: class {
+               constructor($scope: angular.IScope) {
+                 $scope['called'] = 'no';
+                 $scope['$postLink'] = () => $scope['called'] = 'yes';
+                 Object.getPrototypeOf($scope)['$postLink'] = () => $scope['called'] = 'yes';
+               }
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1A></ng1A> | <ng1B></ng1B>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent)).toBe('Called: no | Called: no');
+           });
+         }));
+
+
+      it('should call `$doCheck()` on controller', async(() => {
+           const controllerDoCheckA = jasmine.createSpy('controllerDoCheckA');
+           const controllerDoCheckB = jasmine.createSpy('controllerDoCheckB');
+
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: 'ng1A',
+             bindToController: false,
+             controller: class {$doCheck() { controllerDoCheckA(); }}
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: 'ng1B',
+             bindToController: true,
+             controller: class {constructor() { (this as any)['$doCheck'] = controllerDoCheckB; }}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1A></ng1A> | <ng1B></ng1B>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             // Get to a stable `$digest` state.
+             $digest(adapter);
+
+             // Initial change.
+             // (Do not use a specific number due to differences between AngularJS 1.5/1.6.)
+             expect(controllerDoCheckA.calls.count()).toBeGreaterThan(0);
+             expect(controllerDoCheckB.calls.count()).toBeGreaterThan(0);
+             controllerDoCheckA.calls.reset();
+             controllerDoCheckB.calls.reset();
+
+             // Run a `$digest`
+             $digest(adapter);
+             expect(controllerDoCheckA.calls.count()).toBe(1);
+             expect(controllerDoCheckB.calls.count()).toBe(1);
+
+             // Run another `$digest`
+             $digest(adapter);
+             expect(controllerDoCheckA.calls.count()).toBe(2);
+             expect(controllerDoCheckB.calls.count()).toBe(2);
+           });
+         }));
+
+      it('should not call `$doCheck()` on scope', async(() => {
+           const scopeDoCheck = jasmine.createSpy('scopeDoCheck');
+
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: 'ng1A',
+             bindToController: false,
+             controller: class {
+               constructor(private $scope: angular.IScope) { $scope['$doCheck'] = scopeDoCheck; }
+             }
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: 'ng1B',
+             bindToController: true,
+             controller: class {
+               constructor(private $scope: angular.IScope) { $scope['$doCheck'] = scopeDoCheck; }
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1A></ng1A> | <ng1B></ng1B>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             // Initial change
+             expect(scopeDoCheck).not.toHaveBeenCalled();
+
+             // Run a `$digest`
+             $digest(adapter);
+             expect(scopeDoCheck).not.toHaveBeenCalled();
+
+             // Run another `$digest`
+             $digest(adapter);
+             expect(scopeDoCheck).not.toHaveBeenCalled();
+           });
+         }));
+
+
+      it('should call `$onDestroy()` on controller', async(() => {
+           const controllerOnDestroyA = jasmine.createSpy('controllerOnDestroyA');
+           const controllerOnDestroyB = jasmine.createSpy('controllerOnDestroyB');
+
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: 'ng1A',
+             scope: {},
+             bindToController: false,
+             controllerAs: '$ctrl',
+             controller: class {$onDestroy() { controllerOnDestroyA(); }}
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: 'ng1B',
+             scope: {},
+             bindToController: true,
+             controllerAs: '$ctrl',
+             controller:
+                 class {constructor() { (this as any)['$onDestroy'] = controllerOnDestroyB; }}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component(
+               {selector: 'ng2', template: '<div *ngIf="show"><ng1A></ng1A> | <ng1B></ng1B></div>'})
+           class Ng2Component {
+             // TODO(issue/24571): remove '!'.
+             @Input() show !: boolean;
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html('<ng2 [show]="!destroyFromNg2" ng-if="!destroyFromNg1"></ng2>');
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             const $rootScope = adapter.$injector.get('$rootScope') as angular.IRootScopeService;
+
+             expect(multiTrim(document.body.textContent)).toBe('ng1A | ng1B');
+             expect(controllerOnDestroyA).not.toHaveBeenCalled();
+             expect(controllerOnDestroyB).not.toHaveBeenCalled();
+
+             $rootScope.$apply('destroyFromNg1 = true');
+
+             expect(multiTrim(document.body.textContent)).toBe('');
+             expect(controllerOnDestroyA).toHaveBeenCalled();
+             expect(controllerOnDestroyB).toHaveBeenCalled();
+
+             controllerOnDestroyA.calls.reset();
+             controllerOnDestroyB.calls.reset();
+             $rootScope.$apply('destroyFromNg1 = false');
+
+             expect(multiTrim(document.body.textContent)).toBe('ng1A | ng1B');
+             expect(controllerOnDestroyA).not.toHaveBeenCalled();
+             expect(controllerOnDestroyB).not.toHaveBeenCalled();
+
+             $rootScope.$apply('destroyFromNg2 = true');
+
+             expect(multiTrim(document.body.textContent)).toBe('');
+             expect(controllerOnDestroyA).toHaveBeenCalled();
+             expect(controllerOnDestroyB).toHaveBeenCalled();
+           });
+         }));
+
+      it('should not call `$onDestroy()` on scope', async(() => {
+           const scopeOnDestroy = jasmine.createSpy('scopeOnDestroy');
+
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: 'ng1A',
+             scope: {},
+             bindToController: false,
+             controllerAs: '$ctrl',
+             controller: class {
+               constructor($scope: angular.IScope) {
+                 $scope['$onDestroy'] = scopeOnDestroy;
+                 Object.getPrototypeOf($scope)['$onDestroy'] = scopeOnDestroy;
+               }
+             }
+           };
+
+           const ng1DirectiveB: angular.IDirective = {
+             template: 'ng1B',
+             scope: {},
+             bindToController: true,
+             controllerAs: '$ctrl',
+             controller: class {
+               constructor($scope: angular.IScope) {
+                 $scope['$onDestroy'] = scopeOnDestroy;
+                 Object.getPrototypeOf($scope)['$onDestroy'] = scopeOnDestroy;
+               }
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           @Directive({selector: 'ng1B'})
+           class Ng1ComponentBFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1B', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component(
+               {selector: 'ng2', template: '<div *ngIf="show"><ng1A></ng1A> | <ng1B></ng1B></div>'})
+           class Ng2Component {
+             // TODO(issue/24571): remove '!'.
+             @Input() show !: boolean;
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html('<ng2 [show]="!destroyFromNg2" ng-if="!destroyFromNg1"></ng2>');
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             const $rootScope = adapter.$injector.get('$rootScope') as angular.IRootScopeService;
+
+             expect(multiTrim(document.body.textContent)).toBe('ng1A | ng1B');
+             expect(scopeOnDestroy).not.toHaveBeenCalled();
+
+             $rootScope.$apply('destroyFromNg1 = true');
+
+             expect(multiTrim(document.body.textContent)).toBe('');
+             expect(scopeOnDestroy).not.toHaveBeenCalled();
+
+             $rootScope.$apply('destroyFromNg1 = false');
+
+             expect(multiTrim(document.body.textContent)).toBe('ng1A | ng1B');
+             expect(scopeOnDestroy).not.toHaveBeenCalled();
+
+             $rootScope.$apply('destroyFromNg2 = true');
+
+             expect(multiTrim(document.body.textContent)).toBe('');
+             expect(scopeOnDestroy).not.toHaveBeenCalled();
+           });
+         }));
+
+      it('should be called in order `$onChanges()` > `$onInit()` > `$doCheck()` > `$postLink()`',
+         async(() => {
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             // `$doCheck()` will keep getting called as long as the interpolated value keeps
+             // changing (by appending `> $doCheck`). Only care about the first 4 values.
+             template: '{{ $ctrl.calls.slice(0, 4).join(" > ") }}',
+             bindings: {value: '<'},
+             controller: class {
+               calls: string[] = [];
+
+               $onChanges() { this.calls.push('$onChanges'); }
+
+               $onInit() { this.calls.push('$onInit'); }
+
+               $doCheck() { this.calls.push('$doCheck'); }
+
+               $postLink() { this.calls.push('$postLink'); }
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             @Input() value: any;
+
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1 value="foo"></ng1>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(multiTrim(element.textContent))
+                 .toBe('$onChanges > $onInit > $doCheck > $postLink');
+           });
+         }));
+    });
+
+    describe('destroying the upgraded component', () => {
+      it('should destroy `$componentScope`', async(() => {
+           const scopeDestroyListener = jasmine.createSpy('scopeDestroyListener');
+           let ng2ComponentAInstance: Ng2ComponentA;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             controller: class {
+               constructor($scope: angular.IScope) { $scope.$on('$destroy', scopeDestroyListener); }
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2A', template: '<ng2B *ngIf="!destroyIt"></ng2B>'})
+           class Ng2ComponentA {
+             destroyIt = false;
+
+             constructor() { ng2ComponentAInstance = this; }
+           }
+
+           @Component({selector: 'ng2B', template: '<ng1></ng1>'})
+           class Ng2ComponentB {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2A', downgradeComponent({component: Ng2ComponentA}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [Ng1ComponentFacade, Ng2ComponentA, Ng2ComponentB],
+             entryComponents: [Ng2ComponentA],
+             imports: [BrowserModule, UpgradeModule]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2-a></ng2-a>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             expect(scopeDestroyListener).not.toHaveBeenCalled();
+
+             ng2ComponentAInstance.destroyIt = true;
+             $digest(adapter);
+
+             expect(scopeDestroyListener).toHaveBeenCalled();
+           });
+         }));
+
+      it('should clean up `$doCheck()` watchers from the parent scope', async(() => {
+           let ng2Component: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component:
+               angular.IComponent = {template: 'ng1', controller: class {$doCheck() {}}};
+
+           // 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 *ngIf="doShow"></ng1>'})
+           class Ng2Component {
+             doShow: boolean = false;
+             constructor(@Inject($SCOPE) public $scope: angular.IScope) { ng2Component = 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 => {
+             const getWatcherCount: () => number = () =>
+                 (ng2Component.$scope as any).$$watchers.length;
+             const baseWatcherCount = getWatcherCount();
+
+             expect(multiTrim(document.body.textContent)).toBe('');
+
+             ng2Component.doShow = true;
+             $digest(adapter);
+             expect(multiTrim(document.body.textContent)).toBe('ng1');
+             expect(getWatcherCount()).toBe(baseWatcherCount + 1);
+
+             ng2Component.doShow = false;
+             $digest(adapter);
+             expect(multiTrim(document.body.textContent)).toBe('');
+             expect(getWatcherCount()).toBe(baseWatcherCount);
+
+             ng2Component.doShow = true;
+             $digest(adapter);
+             expect(multiTrim(document.body.textContent)).toBe('ng1');
+             expect(getWatcherCount()).toBe(baseWatcherCount + 1);
+           });
+         }));
+    });
+
+    it('should support ng2 > ng1 > ng2 (no inputs/outputs)', async(() => {
+         // Define `ng1Component`
+         const ng1Component: angular.IComponent = {template: 'ng1X(<ng2-b></ng2-b>)'};
+
+         // Define `Ng1ComponentFacade`
+         @Directive({selector: 'ng1X'})
+         class Ng1ComponentFacade extends UpgradeComponent {
+           constructor(elementRef: ElementRef, injector: Injector) {
+             super('ng1X', elementRef, injector);
+           }
+         }
+
+         // Define `Ng2Component`
+         @Component({selector: 'ng2-a', template: 'ng2A(<ng1X></ng1X>)'})
+         class Ng2ComponentA {
+         }
+
+         @Component({selector: 'ng2-b', template: 'ng2B'})
+         class Ng2ComponentB {
+         }
+
+         // Define `ng1Module`
+         const ng1Module = angular.module('ng1', [])
+                               .component('ng1X', ng1Component)
+                               .directive('ng2A', downgradeComponent({component: Ng2ComponentA}))
+                               .directive('ng2B', downgradeComponent({component: Ng2ComponentB}));
+
+         // Define `Ng2Module`
+         @NgModule({
+           declarations: [Ng1ComponentFacade, Ng2ComponentA, Ng2ComponentB],
+           entryComponents: [Ng2ComponentA, Ng2ComponentB],
+           imports: [BrowserModule, UpgradeModule],
+           schemas: [NO_ERRORS_SCHEMA],
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         // Bootstrap
+         const element = html(`<ng2-a></ng2-a>`);
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+           expect(multiTrim(document.body.textContent)).toBe('ng2A(ng1X(ng2B))');
+         });
+       }));
+
+    it('should support ng2 > ng1 > ng2 (with inputs/outputs)', fakeAsync(() => {
+         let ng2ComponentAInstance: Ng2ComponentA;
+         let ng2ComponentBInstance: Ng2ComponentB;
+         let ng1ControllerXInstance: Ng1ControllerX;
+
+         // Define `ng1Component`
+         class Ng1ControllerX {
+           // TODO(issue/24571): remove '!'.
+           ng1XInputA !: string;
+           ng1XInputB: any;
+           ng1XInputC: any;
+
+           constructor() { ng1ControllerXInstance = this; }
+         }
+         const ng1Component: angular.IComponent = {
+           template: `
+              ng1X({{ $ctrl.ng1XInputA }}, {{ $ctrl.ng1XInputB.value }}, {{ $ctrl.ng1XInputC.value }}) |
+              <ng2-b
+                [ng2-b-input1]="$ctrl.ng1XInputA"
+                [ng2-b-input-c]="$ctrl.ng1XInputC.value"
+                (ng2-b-output-c)="$ctrl.ng1XInputC = {value: $event}">
+              </ng2-b>
+            `,
+           bindings: {
+             ng1XInputA: '@',
+             ng1XInputB: '<',
+             ng1XInputC: '=',
+             ng1XOutputA: '&',
+             ng1XOutputB: '&'
+           },
+           controller: Ng1ControllerX
+         };
+
+         // Define `Ng1ComponentFacade`
+         @Directive({selector: 'ng1X'})
+         class Ng1ComponentXFacade extends UpgradeComponent {
+           // TODO(issue/24571): remove '!'.
+           @Input() ng1XInputA !: string;
+           @Input() ng1XInputB: any;
+           @Input() ng1XInputC: any;
+           // TODO(issue/24571): remove '!'.
+           @Output() ng1XInputCChange !: EventEmitter<any>;
+           // TODO(issue/24571): remove '!'.
+           @Output() ng1XOutputA !: EventEmitter<any>;
+           // TODO(issue/24571): remove '!'.
+           @Output() ng1XOutputB !: EventEmitter<any>;
+
+           constructor(elementRef: ElementRef, injector: Injector) {
+             super('ng1X', elementRef, injector);
+           }
+         }
+
+         // Define `Ng2Component`
+         @Component({
+           selector: 'ng2-a',
+           template: `
+              ng2A({{ ng2ADataA.value }}, {{ ng2ADataB.value }}, {{ ng2ADataC.value }}) |
+              <ng1X
+                  ng1XInputA="{{ ng2ADataA.value }}"
+                  bind-ng1XInputB="ng2ADataB"
+                  [(ng1XInputC)]="ng2ADataC"
+                  (ng1XOutputA)="ng2ADataA = $event"
+                  on-ng1XOutputB="ng2ADataB.value = $event">
+              </ng1X>
+            `
+         })
+         class Ng2ComponentA {
+           ng2ADataA = {value: 'foo'};
+           ng2ADataB = {value: 'bar'};
+           ng2ADataC = {value: 'baz'};
+
+           constructor() { ng2ComponentAInstance = this; }
+         }
+
+         @Component({selector: 'ng2-b', template: 'ng2B({{ ng2BInputA }}, {{ ng2BInputC }})'})
+         class Ng2ComponentB {
+           @Input('ng2BInput1') ng2BInputA: any;
+           @Input() ng2BInputC: any;
+           @Output() ng2BOutputC = new EventEmitter();
+
+           constructor() { ng2ComponentBInstance = this; }
+         }
+
+         // Define `ng1Module`
+         const ng1Module = angular.module('ng1', [])
+                               .component('ng1X', ng1Component)
+                               .directive('ng2A', downgradeComponent({component: Ng2ComponentA}))
+                               .directive('ng2B', downgradeComponent({component: Ng2ComponentB}));
+
+         // Define `Ng2Module`
+         @NgModule({
+           declarations: [Ng1ComponentXFacade, Ng2ComponentA, Ng2ComponentB],
+           entryComponents: [Ng2ComponentA, Ng2ComponentB],
+           imports: [BrowserModule, UpgradeModule],
+           schemas: [NO_ERRORS_SCHEMA],
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         // Bootstrap
+         const element = html(`<ng2-a></ng2-a>`);
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+           // Initial value propagation.
+           // (ng2A > ng1X > ng2B)
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2A(foo, bar, baz) | ng1X(foo, bar, baz) | ng2B(foo, baz)');
+
+           // Update `ng2BInputA`/`ng2BInputC`.
+           // (Should not propagate upwards.)
+           ng2ComponentBInstance.ng2BInputA = 'foo2';
+           ng2ComponentBInstance.ng2BInputC = 'baz2';
+           $digest(adapter);
+           tick();
+
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2A(foo, bar, baz) | ng1X(foo, bar, baz) | ng2B(foo2, baz2)');
+
+           // Emit from `ng2BOutputC`.
+           // (Should propagate all the way up to `ng1ADataC` and back all the way down to
+           // `ng2BInputC`.)
+           ng2ComponentBInstance.ng2BOutputC.emit('baz3');
+           $digest(adapter);
+           tick();
+
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2A(foo, bar, baz3) | ng1X(foo, bar, baz3) | ng2B(foo2, baz3)');
+
+           // Update `ng1XInputA`/`ng1XInputB`.
+           // (Should not propagate upwards, only downwards.)
+           ng1ControllerXInstance.ng1XInputA = 'foo4';
+           ng1ControllerXInstance.ng1XInputB = {value: 'bar4'};
+           $digest(adapter);
+           tick();
+
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2A(foo, bar, baz3) | ng1X(foo4, bar4, baz3) | ng2B(foo4, baz3)');
+
+           // Update `ng1XInputC`.
+           // (Should propagate upwards and downwards.)
+           ng1ControllerXInstance.ng1XInputC = {value: 'baz5'};
+           $digest(adapter);
+           tick();
+
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2A(foo, bar, baz5) | ng1X(foo4, bar4, baz5) | ng2B(foo4, baz5)');
+
+           // Update a property on `ng1XInputC`.
+           // (Should propagate upwards and downwards.)
+           ng1ControllerXInstance.ng1XInputC.value = 'baz6';
+           $digest(adapter);
+           tick();
+
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2A(foo, bar, baz6) | ng1X(foo4, bar4, baz6) | ng2B(foo4, baz6)');
+
+           // Emit from `ng1XOutputA`.
+           // (Should propagate upwards to `ng1ADataA` and back all the way down to `ng2BInputA`.)
+           (ng1ControllerXInstance as any).ng1XOutputA({value: 'foo7'});
+           $digest(adapter);
+           tick();
+
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2A(foo7, bar, baz6) | ng1X(foo7, bar4, baz6) | ng2B(foo7, baz6)');
+
+           // Emit from `ng1XOutputB`.
+           // (Should propagate upwards to `ng1ADataB`, but not downwards,
+           //  since `ng1XInputB` has been re-assigned (i.e. `ng2ADataB !== ng1XInputB`).)
+           (ng1ControllerXInstance as any).ng1XOutputB('bar8');
+           $digest(adapter);
+           tick();
+
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2A(foo7, bar8, baz6) | ng1X(foo7, bar4, baz6) | ng2B(foo7, baz6)');
+
+           // Update `ng2ADataA`/`ng2ADataB`/`ng2ADataC`.
+           // (Should propagate everywhere.)
+           ng2ComponentAInstance.ng2ADataA = {value: 'foo9'};
+           ng2ComponentAInstance.ng2ADataB = {value: 'bar9'};
+           ng2ComponentAInstance.ng2ADataC = {value: 'baz9'};
+           $digest(adapter);
+           tick();
+
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2A(foo9, bar9, baz9) | ng1X(foo9, bar9, baz9) | ng2B(foo9, baz9)');
+         });
+       }));
+
+    it('should support ng2 > ng1 > ng2 > ng1 (with `require`)', async(() => {
+         // Define `ng1Component`
+         const ng1ComponentA: angular.IComponent = {
+           template: 'ng1A(<ng2-b></ng2-b>)',
+           controller: class {value = 'ng1A';}
+         };
+
+         const ng1ComponentB: angular.IComponent = {
+           template:
+               'ng1B(^^ng1A: {{ $ctrl.ng1A.value }} | ?^^ng1B: {{ $ctrl.ng1B.value }} | ^ng1B: {{ $ctrl.ng1BSelf.value }})',
+           require: {ng1A: '^^', ng1B: '?^^', ng1BSelf: '^ng1B'},
+           controller: class {value = 'ng1B';}
+         };
+
+         // Define `Ng1ComponentFacade`
+         @Directive({selector: 'ng1A'})
+         class Ng1ComponentAFacade extends UpgradeComponent {
+           constructor(elementRef: ElementRef, injector: Injector) {
+             super('ng1A', elementRef, injector);
+           }
+         }
+
+         @Directive({selector: 'ng1B'})
+         class Ng1ComponentBFacade extends UpgradeComponent {
+           constructor(elementRef: ElementRef, injector: Injector) {
+             super('ng1B', elementRef, injector);
+           }
+         }
+
+         // Define `Ng2Component`
+         @Component({selector: 'ng2-a', template: 'ng2A(<ng1A></ng1A>)'})
+         class Ng2ComponentA {
+         }
+
+         @Component({selector: 'ng2-b', template: 'ng2B(<ng1B></ng1B>)'})
+         class Ng2ComponentB {
+         }
+
+         // Define `ng1Module`
+         const ng1Module = angular.module('ng1', [])
+                               .component('ng1A', ng1ComponentA)
+                               .component('ng1B', ng1ComponentB)
+                               .directive('ng2A', downgradeComponent({component: Ng2ComponentA}))
+                               .directive('ng2B', downgradeComponent({component: Ng2ComponentB}));
+
+         // Define `Ng2Module`
+         @NgModule({
+           declarations: [Ng1ComponentAFacade, Ng1ComponentBFacade, Ng2ComponentA, Ng2ComponentB],
+           entryComponents: [Ng2ComponentA, Ng2ComponentB],
+           imports: [BrowserModule, UpgradeModule],
+           schemas: [NO_ERRORS_SCHEMA],
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         // Bootstrap
+         const element = html(`<ng2-a></ng2-a>`);
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2A(ng1A(ng2B(ng1B(^^ng1A: ng1A | ?^^ng1B: | ^ng1B: ng1B))))');
+         });
+       }));
+  });
+});
diff --git a/packages/upgrade/test/static/test_helpers.ts b/packages/upgrade/test/static/test_helpers.ts
new file mode 100644
index 000000000000..cb94b3bb5248
--- /dev/null
+++ b/packages/upgrade/test/static/test_helpers.ts
@@ -0,0 +1,49 @@
+/**
+ * @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 {NgZone, PlatformRef, Type} from '@angular/core';
+import {UpgradeModule} from '@angular/upgrade/static';
+import * as angular from '@angular/upgrade/static/src/common/angular1';
+import {$ROOT_SCOPE} from '@angular/upgrade/static/src/common/constants';
+
+import {createWithEachNg1VersionFn} from '../common/test_helpers';
+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 (also ensuring that AngularJS errors will fail the test).
+  return platform.bootstrapModule(Ng2Module).then(ref => {
+    const ngZone = ref.injector.get<NgZone>(NgZone);
+    const upgrade = ref.injector.get(UpgradeModule);
+    const failHardModule: any = ($provide: angular.IProvideService) => {
+      $provide.value('$exceptionHandler', (err: any) => { throw err; });
+    };
+
+    // The `bootstrap()` helper is used for convenience in tests, so that we don't have to inject
+    // and call `upgrade.bootstrap()` on every Angular module.
+    // In order to closer emulate what happens in real application, ensure AngularJS is bootstrapped
+    // inside the Angular zone.
+    //
+    ngZone.run(() => upgrade.bootstrap(element, [failHardModule, ng1Module.name]));
+
+    return upgrade;
+  });
+}
+
+export const withEachNg1Version = createWithEachNg1VersionFn(angular.setAngularJSGlobal);
+
+export function $apply(adapter: UpgradeModule, exp: angular.Ng1Expression) {
+  const $rootScope = adapter.$injector.get($ROOT_SCOPE) as angular.IRootScopeService;
+  $rootScope.$apply(exp);
+}
+
+export function $digest(adapter: UpgradeModule) {
+  const $rootScope = adapter.$injector.get($ROOT_SCOPE) as angular.IRootScopeService;
+  $rootScope.$digest();
+}
diff --git a/packages/upgrade/tsconfig-build.json b/packages/upgrade/tsconfig-build.json
new file mode 100644
index 000000000000..2019498aad2a
--- /dev/null
+++ b/packages/upgrade/tsconfig-build.json
@@ -0,0 +1,29 @@
+{
+  "extends": "../tsconfig-build.json",
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@angular/core": ["../../dist/packages/core"],
+      "@angular/common": ["../../dist/packages/common"],
+      "@angular/compiler": ["../../dist/packages/compiler"],
+      "@angular/platform-browser": ["../../dist/packages/platform-browser"],
+      "@angular/platform-browser-dynamic": ["../../dist/packages/platform-browser-dynamic"]
+    },
+    "outDir": "../../dist/packages/upgrade"
+  },
+
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "upgrade.js",
+    "flatModuleId": "@angular/upgrade"
+  }
+}
diff --git a/perf-cloud-secret.template.js b/perf-cloud-secret.template.js
deleted file mode 100644
index a5053070d9f3..000000000000
--- a/perf-cloud-secret.template.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  "private_key_id": "1234",
-  "private_key": "-----BEGIN PRIVATE KEY-----SOME PRIVATE KEY-----END PRIVATE KEY-----\n",
-  "client_email": "SOME_EMAIL@developer.gserviceaccount.com",
-  "client_id": "SOME_ID",
-  "type": "service_account"
-};
\ No newline at end of file
diff --git a/protractor-dart2js.conf.js b/protractor-dart2js.conf.js
deleted file mode 100644
index ff3058bb1d75..000000000000
--- a/protractor-dart2js.conf.js
+++ /dev/null
@@ -1,16 +0,0 @@
-var data = module.exports = require('./protractor-shared.js');
-var config = data.config;
-
-config.baseUrl = 'http://localhost:8002/';
-
-config.exclude.push(
-  'dist/js/cjs/examples/e2e_test/sourcemap/sourcemap_spec.js',
-  // TODO: remove this line when largetable dart has been added
-  'dist/js/cjs/benchmarks_external/e2e_test/largetable_perf.js',
-  'dist/js/cjs/benchmarks_external/e2e_test/polymer_tree_perf.js',
-  'dist/js/cjs/benchmarks_external/e2e_test/react_tree_perf.js'
-  
-);
-
-data.createBenchpressRunner({ lang: 'dart' });
-
diff --git a/protractor-e2e.conf.js b/protractor-e2e.conf.js
new file mode 100644
index 000000000000..7afc6f56f2a8
--- /dev/null
+++ b/protractor-e2e.conf.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
+ */
+
+// Make sure that the command line is read as the first thing
+// as this could exit node if the help script should be printed.
+require('./dist/all/e2e_util/e2e_util').readCommandLine();
+
+var BROWSER_OPTIONS = {
+  LocalChrome: {
+    'browserName': 'chrome',
+  },
+  ChromeOnTravis: {
+    browserName: 'chrome',
+    chromeOptions: {
+      'args': ['--no-sandbox'],
+      'binary': process.env.CHROME_BIN,
+    }
+  }
+};
+
+exports.config = {
+  onPrepare: function() { beforeEach(function() { browser.ignoreSynchronization = false; }); },
+  allScriptsTimeout: 11000,
+  specs: ['dist/all/**/e2e_test/**/*_spec.js'],
+  exclude: [
+    'dist/all/@angular/examples/**',
+    '**/key_events/**',  // can't tell why this is failing
+    '**/sourcemap/**'    // fails only on travis
+  ],
+  capabilities: process.env.TRAVIS ? BROWSER_OPTIONS.ChromeOnTravis : BROWSER_OPTIONS.LocalChrome,
+  directConnect: true,
+  baseUrl: 'http://localhost:8000/',
+  framework: 'jasmine2',
+  jasmineNodeOpts:
+      {showColors: true, defaultTimeoutInterval: 60000, print: function(msg) { console.log(msg) }},
+  useAllAngular2AppRoots: true,
+};
diff --git a/protractor-examples-e2e.conf.js b/protractor-examples-e2e.conf.js
new file mode 100644
index 000000000000..1259ffab36ec
--- /dev/null
+++ b/protractor-examples-e2e.conf.js
@@ -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
+ */
+
+// Make sure that the command line is read as the first thing
+// as this could exit node if the help script should be printed.
+require('./dist/all/e2e_util/e2e_util').readCommandLine();
+require('reflect-metadata');
+
+Error.stackTraceLimit = 9999;
+
+var BROWSER_OPTIONS = {
+  LocalChrome: {'browserName': 'chrome'},
+  ChromeOnTravis: {
+    browserName: 'chrome',
+    chromeOptions: {
+      'args': ['--no-sandbox'],
+      'binary': process.env.CHROME_BIN,
+    }
+  },
+};
+
+exports.config = {
+  onPrepare: function() { beforeEach(function() { browser.ignoreSynchronization = false; }); },
+  allScriptsTimeout: 11000,
+  specs: ['dist/examples/**/e2e_test/*_spec.js'],
+  capabilities: process.env.TRAVIS ? BROWSER_OPTIONS.ChromeOnTravis : BROWSER_OPTIONS.LocalChrome,
+  directConnect: true,
+  baseUrl: 'http://localhost:8001/',
+  framework: 'jasmine2',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 60000,
+    print: function(msg) { console.log(msg); },
+  },
+  useAllAngular2AppRoots: true
+};
diff --git a/protractor-js-dev.conf.js b/protractor-js-dev.conf.js
deleted file mode 100644
index 8a9eb0644ee0..000000000000
--- a/protractor-js-dev.conf.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var data = module.exports = require('./protractor-shared.js');
-var config = data.config;
-config.baseUrl = 'http://localhost:8000/';
diff --git a/protractor-js-prod.conf.js b/protractor-js-prod.conf.js
deleted file mode 100644
index 0ec762bb45ad..000000000000
--- a/protractor-js-prod.conf.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var data = module.exports = require('./protractor-shared.js');
-var config = data.config;
-config.baseUrl = 'http://localhost:8001/';
diff --git a/protractor-js.conf.js b/protractor-js.conf.js
deleted file mode 100644
index b032bfad2f19..000000000000
--- a/protractor-js.conf.js
+++ /dev/null
@@ -1,10 +0,0 @@
-var data = module.exports = require('./protractor-shared.js');
-var config = data.config;
-
-config.baseUrl = 'http://localhost:8001/';
-// TODO: remove exclusion when JS verison of scrolling benchmark is available
-config.exclude.push('dist/js/cjs/benchmarks_external/e2e_test/naive_infinite_scroll_spec.js');
-config.exclude.push('dist/js/cjs/benchmarks_external/e2e_test/naive_infinite_scroll_perf.js');
-
-data.createBenchpressRunner({ lang: 'js' });
-
diff --git a/protractor-perf.conf.js b/protractor-perf.conf.js
new file mode 100644
index 000000000000..409617f29301
--- /dev/null
+++ b/protractor-perf.conf.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
+ */
+
+// Determine if we run under bazel
+const isBazel = !!process.env.RUNFILES;
+// isBazel needed while 'scripts/ci/test-e2e.sh test.e2e.protractor-e2e' is run
+// on Travis
+// TODO: port remaining protractor e2e tests to bazel protractor_web_test_suite rule
+
+// Make sure that the command line is read as the first thing
+// as this could exit node if the help script should be printed.
+const BASE = isBazel ? 'angular/modules' : 'dist/all';
+require(`./${BASE}/e2e_util/perf_util`).readCommandLine();
+
+var CHROME_OPTIONS = {
+  'args': ['--js-flags=--expose-gc', '--no-sandbox'],
+  'perfLoggingPrefs': {
+    'traceCategories': 'v8,blink.console,devtools.timeline,disabled-by-default-devtools.timeline'
+  }
+};
+
+var BROWSER_CAPS = {
+  LocalChrome: {
+    'browserName': 'chrome',
+    chromeOptions: CHROME_OPTIONS,
+    loggingPrefs: {
+      performance: 'ALL',
+      browser: 'ALL',
+    }
+  },
+  ChromeOnTravis: {
+    browserName: 'chrome',
+    chromeOptions: mergeInto(CHROME_OPTIONS, {
+      'binary': process.env.CHROME_BIN,
+    }),
+    loggingPrefs: {
+      performance: 'ALL',
+      browser: 'ALL',
+    }
+  }
+};
+
+function mergeInto(src, target) {
+  for (var prop in src) {
+    target[prop] = src[prop];
+  }
+  return target;
+}
+
+const config = {
+  onPrepare: function() { beforeEach(function() { browser.ignoreSynchronization = false; }); },
+  restartBrowserBetweenTests: true,
+  allScriptsTimeout: 11000,
+  capabilities: process.env.TRAVIS ? BROWSER_CAPS.ChromeOnTravis : BROWSER_CAPS.LocalChrome,
+  directConnect: true,
+  framework: 'jasmine2',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 60000,
+    print: function(msg) { console.log(msg); },
+  },
+  useAllAngular2AppRoots: true
+};
+
+// Bazel has different strategy for how specs and baseUrl are specified
+if (!isBazel) {
+  config.baseUrl = 'http://localhost:8000/';
+  config.specs = [
+    'dist/all/**/e2e_test/**/*_perf.spec.js',
+    'dist/all/**/e2e_test/**/*_perf.js',
+  ]
+}
+
+exports.config = config;
diff --git a/protractor-shared.js b/protractor-shared.js
deleted file mode 100644
index 69ec626ec3d9..000000000000
--- a/protractor-shared.js
+++ /dev/null
@@ -1,257 +0,0 @@
-var fs = require('fs-extra');
-
-var argv = require('yargs')
-    .usage('Angular e2e/perf test options.')
-    .options({
-      'sample-size': {
-        describe: 'Used for perf: sample size.',
-        default: 20
-      },
-      'force-gc': {
-        describe: 'Used for perf: force gc.',
-        default: false,
-        type: 'boolean'
-      },
-      'benchmark': {
-        describe: 'If true, run only the performance benchmarks. If false, run only the e2e tests.',
-        default: false
-      },
-      'dryrun': {
-        describe: 'If true, only run performance benchmarks once.',
-        default: false
-      },
-      'browsers': {
-        describe: 'Comma separated list of preconfigured browsers to use.',
-        default: 'ChromeDesktop'
-      },
-      'spec': {
-        describe: 'Comma separated file patterns to test. By default, globs all test/perf files.',
-        default: false
-      }
-    })
-    .help('ng-help')
-    .wrap(40)
-    .argv
-
-var browsers = argv['browsers'].split(',');
-
-var CHROME_OPTIONS = {
-  'args': ['--js-flags=--expose-gc'],
-  'perfLoggingPrefs': {
-    'traceCategories': 'v8,blink.console,disabled-by-default-devtools.timeline'
-  }
-};
-
-var CHROME_MOBILE_EMULATION = {
-  // Can't use 'deviceName':'Google Nexus 7 2'
-  // as this would yield wrong orientation,
-  // so we specify facts explicitly
-  'deviceMetrics': {
-    'width': 600,
-    'height': 960,
-    'pixelRatio': 2
-  }
-};
-
-var BROWSER_CAPS = {
-  Dartium: {
-    name: 'Dartium',
-    browserName: 'chrome',
-    chromeOptions: mergeInto(CHROME_OPTIONS, {
-      'mobileEmulation': CHROME_MOBILE_EMULATION,
-      'binary': process.env.DARTIUM_BIN
-    }),
-    loggingPrefs: {
-      performance: 'ALL',
-      browser: 'ALL'
-    }
-  },
-  ChromeDesktop: {
-    browserName: 'chrome',
-    chromeOptions: mergeInto(CHROME_OPTIONS, {
-      // TODO(tbosch): when we are using mobile emulation on
-      // chrome 44.0 beta, clicks are no more working.
-      // see https://github.com/angular/angular/issues/2309
-      // 'mobileEmulation': CHROME_MOBILE_EMULATION
-    }),
-    loggingPrefs: {
-      performance: 'ALL',
-      browser: 'ALL'
-    }
-  },
-  ChromeAndroid: {
-    browserName: 'chrome',
-    chromeOptions: mergeInto(CHROME_OPTIONS, {
-      'androidPackage': 'com.android.chrome',
-    }),
-    loggingPrefs: {
-      performance: 'ALL',
-      browser: 'ALL'
-    }
-  },
-  IPhoneSimulator: {
-    browserName: 'MobileSafari',
-    simulator: true,
-    CFBundleName: 'Safari',
-    device: 'iphone',
-    instruments: 'true',
-    loggingPrefs: {
-      performance: 'ALL',
-      browser: 'ALL'
-    }
-  },
-  IPadNative: {
-    browserName: 'MobileSafari',
-    simulator: false,
-    CFBundleName: 'Safari',
-    device: 'ipad',
-    loggingPrefs: {
-      performance: 'ALL',
-      browser: 'ALL'
-    }
-  }
-};
-
-var getTestFiles = function (benchmark, spec) {
-  var specFiles = [];
-  var perfFiles = [];
-  if (spec.length) {
-    spec.split(',').forEach(function (name) {
-      specFiles.push('dist/js/cjs/**/e2e_test/' + name)
-      perfFiles.push('dist/js/cjs/**/e2e_test/' + name)
-    });
-  } else {
-    specFiles.push('dist/js/cjs/**/e2e_test/**/*_spec.js');
-    perfFiles.push('dist/js/cjs/**/e2e_test/**/*_perf.js');
-  }
-  return benchmark ? perfFiles : specFiles;
-};
-
-var config = exports.config = {
-  onPrepare: function() {
-    // TODO(juliemr): remove this hack and use the config option
-    // restartBrowserBetweenTests once that is not hanging.
-    // See https://github.com/angular/protractor/issues/1983
-    patchProtractorWait(browser);
-    // During benchmarking, we need to open a new browser
-    // for every benchmark, otherwise the numbers can get skewed
-    // from other benchmarks (e.g. Chrome keeps JIT caches, ...)
-    if (argv['benchmark'] && !argv['dryrun']) {
-      var originalBrowser = browser;
-      var _tmpBrowser;
-      beforeEach(function() {
-        global.browser = originalBrowser.forkNewDriverInstance();
-        patchProtractorWait(global.browser);
-        global.element = global.browser.element;
-        global.$ = global.browser.$;
-        global.$$ = global.browser.$$;
-      });
-      afterEach(function() {
-       global.browser.quit();
-       global.browser = originalBrowser;
-      });
-    }
-  },
-
-  specs: getTestFiles(argv['benchmark'], argv['spec']),
-
-  exclude: [
-    'dist/js/cjs/**/node_modules/**',
-  ],
-
-  multiCapabilities: browsers.map(function(browserName) {
-    var caps = BROWSER_CAPS[browserName];
-    console.log('Testing against', browserName);
-    if (!caps) {
-      throw new Error('Not configured browser name: '+browserName);
-    }
-    return caps;
-  }),
-
-  framework: 'jasmine2',
-
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: argv['benchmark'] ? 1200000 : 60000
-  },
-  params: {
-    benchmark: {
-      scaling: [{
-        userAgent: /Android/, value: 0.125
-      }]
-    }
-  }
-};
-
-// Disable waiting for Angular as we don't have an integration layer yet...
-// TODO(tbosch): Implement a proper debugging API for Ng2.0, remove this here
-// and the sleeps in all tests.
-function patchProtractorWait(browser) {
-  browser.ignoreSynchronization = true;
-  var _get = browser.get;
-  var sleepInterval = process.env.TRAVIS || process.env.JENKINS_URL ? 7000 : 3000;
-  browser.get = function() {
-    var result = _get.apply(this, arguments);
-    browser.sleep(sleepInterval);
-    return result;
-  }
-}
-
-exports.createBenchpressRunner = function(options) {
-  // benchpress will also load traceur runtime as our tests are written in es6
-  var benchpress = require('./dist/build/benchpress_bundle');
-  global.benchpress = benchpress;
-
-  var nodeUuid = require('node-uuid');
-
-  // TODO(tbosch): add cloud reporter again (only when !options.test)
-  // var cloudReporterConfig;
-  // if (process.env.CLOUD_SECRET_PATH) {
-  //   console.log('using cloud reporter!');
-  //   cloudReporterConfig = {
-  //     auth: require(process.env.CLOUD_SECRET_PATH),
-  //     projectId: 'angular-perf',
-  //     datasetId: 'benchmarks',
-  //     tableId: 'ng2perf'
-  //   };
-  // }
-
-  var runId = nodeUuid.v1();
-  if (process.env.GIT_SHA) {
-    runId = process.env.GIT_SHA + ' ' + runId;
-  }
-  var resultsFolder = './dist/benchmark_results';
-  fs.ensureDirSync(resultsFolder);
-  var bindings = [
-    benchpress.SeleniumWebDriverAdapter.PROTRACTOR_BINDINGS,
-    benchpress.bind(benchpress.Options.FORCE_GC).toValue(argv['force-gc']),
-    benchpress.bind(benchpress.Options.DEFAULT_DESCRIPTION).toValue({
-      'lang': options.lang,
-      'runId': runId
-    }),
-    benchpress.JsonFileReporter.BINDINGS,
-    benchpress.bind(benchpress.JsonFileReporter.PATH).toValue(resultsFolder)
-  ];
-  if (!argv['dryrun']) {
-    bindings.push(benchpress.Validator.bindTo(benchpress.RegressionSlopeValidator));
-    bindings.push(benchpress.bind(benchpress.RegressionSlopeValidator.SAMPLE_SIZE).toValue(argv['sample-size']));
-    bindings.push(benchpress.MultiReporter.createBindings([
-      benchpress.ConsoleReporter,
-      benchpress.JsonFileReporter
-    ]));
-  } else {
-    bindings.push(benchpress.Validator.bindTo(benchpress.SizeValidator));
-    bindings.push(benchpress.bind(benchpress.SizeValidator.SAMPLE_SIZE).toValue(1));
-    bindings.push(benchpress.MultiReporter.createBindings([]));
-    bindings.push(benchpress.MultiMetric.createBindings([]));
-  }
-
-  global.benchpressRunner = new benchpress.Runner(bindings);
-}
-
-function mergeInto(src, target) {
-  for (var prop in src) {
-    target[prop] = src[prop];
-  }
-  return target;
- }
diff --git a/pubspec.yaml b/pubspec.yaml
deleted file mode 100644
index 4f02348d21c3..000000000000
--- a/pubspec.yaml
+++ /dev/null
@@ -1,7 +0,0 @@
-name: angular
-environment:
-  sdk: '>=1.9.0 <2.0.0'
-dev_dependencies:
-  guinness: '^0.1.17'
-  unittest: '^0.11.5+4'
-  quiver: '^0.21.4'
diff --git a/scripts/browserstack/start_tunnel.js b/scripts/browserstack/start_tunnel.js
new file mode 100644
index 000000000000..768eced5156a
--- /dev/null
+++ b/scripts/browserstack/start_tunnel.js
@@ -0,0 +1,68 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+var fs = require('fs');
+var http = require('http');
+var BrowserStackTunnel = require('browserstacktunnel-wrapper');
+
+var HOSTNAME = 'localhost';
+var PORTS = [9876, 9877];
+var ACCESS_KEY = process.env.BROWSER_STACK_ACCESS_KEY;
+var READY_FILE = process.env.BROWSER_PROVIDER_READY_FILE;
+var TUNNEL_IDENTIFIER = process.env.TRAVIS_JOB_NUMBER;
+
+// We need to start fake servers, otherwise the tunnel does not start.
+var fakeServers = [];
+var hosts = [];
+
+PORTS.forEach(function(port) {
+  fakeServers.push(http.createServer(function() {}).listen(port));
+  hosts.push({
+    name: HOSTNAME,
+    port: port,
+    sslFlag: 0
+  });
+});
+
+var tunnel = new BrowserStackTunnel({
+  key: ACCESS_KEY,
+  localIdentifier: TUNNEL_IDENTIFIER,
+  hosts: hosts
+});
+
+console.log('Starting tunnel on ports', PORTS.join(', '));
+tunnel.start(function(error) {
+  if (error) {
+    console.error('Can not establish the tunnel', error);
+  } else {
+    console.log('Tunnel established.');
+    fakeServers.forEach(function(server) {
+      server.close();
+    });
+
+    if (READY_FILE) {
+      fs.writeFile(READY_FILE, '');
+    }
+  }
+});
+
+tunnel.on('error', function(error) {
+  console.error(error);
+});
+
+
+// TODO(i): we should properly stop the tunnel when tests are done.
+// tunnel.stop(function(error) {
+//   if (error) {
+//     console.log(error);
+//   } else {
+//     console.log('browserStack tunnel has stopped');
+//   }
+//});
diff --git a/scripts/browserstack/start_tunnel.sh b/scripts/browserstack/start_tunnel.sh
new file mode 100755
index 000000000000..8a8d3350a0ba
--- /dev/null
+++ b/scripts/browserstack/start_tunnel.sh
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+set +x +v -u -e -o pipefail
+
+export BROWSER_STACK_ACCESS_KEY=`echo $BROWSER_STACK_ACCESS_KEY | rev`
+
+node ./scripts/browserstack/start_tunnel.js &
diff --git a/scripts/browserstack/teardown_tunnel.sh b/scripts/browserstack/teardown_tunnel.sh
new file mode 100755
index 000000000000..e8fbb330a35c
--- /dev/null
+++ b/scripts/browserstack/teardown_tunnel.sh
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+set -u -e -o pipefail
+
+
+echo "Shutting down Browserstack tunnel"
+echo "TODO: implement me, see start_tunnel.js for info on how to stop the tunnel"
diff --git a/scripts/browserstack/waitfor_tunnel.sh b/scripts/browserstack/waitfor_tunnel.sh
new file mode 100755
index 000000000000..a603a317b066
--- /dev/null
+++ b/scripts/browserstack/waitfor_tunnel.sh
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+
+# Wait for Connect to be ready before exiting
+# Time out if we wait for more than 2 minutes, so that we can print logs.
+let "counter=0"
+
+while [ ! -f $BROWSER_PROVIDER_READY_FILE ]; do
+  let "counter++"
+  if [ $counter -gt 240 ]; then
+    echo "Timed out after 2 minutes waiting for browser provider ready file"
+    # We must manually print logs here because travis will not run
+    # after_script commands if the failure occurs before the script
+    # phase.
+    ./scripts/ci/print-logs.sh
+    exit 5
+  fi
+  sleep .5
+done
diff --git a/scripts/build-packages-dist.sh b/scripts/build-packages-dist.sh
new file mode 100755
index 000000000000..b398af07d1ec
--- /dev/null
+++ b/scripts/build-packages-dist.sh
@@ -0,0 +1,68 @@
+#!/usr/bin/env bash
+# Build the dist/packages-dist directory in the same fashion as the legacy
+# /build.sh script, by building the npm packages with Bazel and copying files.
+# This is needed for scripts and tests which are not updated to the Bazel output
+# layout (which always matches the input layout).
+# Do not add new dependencies on this script, instead adapt scripts to use the
+# new layout, and write new tests as Bazel targets.
+
+set -u -e -o pipefail
+
+cd "$(dirname "$0")"
+
+# basedir is the workspace root
+readonly basedir=$(pwd)/..
+readonly bin=$(bazel info bazel-bin)
+
+function buildTargetPackages() {
+  targets="$1"
+  destPath="$2"
+  compileMode="$3"
+  desc="$4"
+
+echo "##################################"
+echo "scripts/build-packages-dist.sh:"
+echo "  building @angular/* npm packages"
+echo "  mode: ${desc}"
+echo "##################################"
+
+  echo "$targets" | xargs bazel build --define=compile=$compileMode
+
+  [ -d "${basedir}/${destPath}" ] || mkdir -p $basedir/${destPath}
+
+  dirs=`echo "$targets" | grep '//packages/[^/]*:npm_package' | sed -e 's/\/\/packages\/\(.*\):npm_package/\1/'`
+
+  for pkg in $dirs; do
+    # Skip any that don't have an "npm_package" target
+    srcDir="${bin}/packages/${pkg}/npm_package"
+    destDir="${basedir}/${destPath}/${pkg}"
+    if [ -d $srcDir ]; then
+      echo "# Copy artifacts to ${destDir}"
+      rm -rf $destDir
+      cp -R $srcDir $destDir
+      chmod -R u+w $destDir
+    fi
+  done
+}
+
+# Ideally these integration tests should run under bazel, and just list the npm
+# packages in their deps[].
+# Until then, we have to manually run bazel first to create the npm packages we
+# want to test.
+LEGACY_TARGETS=`bazel query --output=label 'kind(.*_package, //packages/...)'`
+buildTargetPackages "$LEGACY_TARGETS" "dist/packages-dist" "legacy" "Production"
+
+# We don't use the ivy build in the integration tests, only when publishing
+# snapshots.
+# This logic matches what we use in the .circleci/config.yml file to short-
+# circuit execution of the publish-packages job.
+[[  -v CIRCLE_PR_NUMBER
+    || "$CIRCLE_PROJECT_USERNAME" != "angular"
+    || "$CIRCLE_PROJECT_REPONAME" != "angular"
+]] && exit 0
+
+IVY_JIT_TARGETS=`bazel query --output=label 'attr("tags", "\[.*ivy-jit.*\]", //packages/...) intersect kind(".*_package", //packages/...)'`
+IVY_LOCAL_TARGETS=`bazel query --output=label 'attr("tags", "\[.*ivy-local.*\]", //packages/...) intersect kind(".*_package", //packages/...)'`
+buildTargetPackages "$IVY_JIT_TARGETS" "dist/packages-dist-ivy-jit" "jit" "Ivy JIT"
+buildTargetPackages "$IVY_LOCAL_TARGETS" "dist/packages-dist-ivy-local" "local" "Ivy AOT"
+
diff --git a/scripts/ci/_travis-fold.sh b/scripts/ci/_travis-fold.sh
new file mode 100644
index 000000000000..b3dd69c7251b
--- /dev/null
+++ b/scripts/ci/_travis-fold.sh
@@ -0,0 +1,83 @@
+# private variable to track folds within this script
+travisFoldStack=()
+
+function travisFoldStart() {
+  local foldName="${0#./}  ${1}"
+  # get current time as nanoseconds since the beginning of the epoch
+  foldStartTime=$(date +%s%N)
+  # convert all non alphanum chars except for "-" and "." to "--"
+  local sanitizedFoldName=${foldName//[^[:alnum:]\-\.]/--}
+  # strip trailing "-"
+  sanitizedFoldName=${sanitizedFoldName%-}
+  # push the foldName onto the stack
+  travisFoldStack+=("${sanitizedFoldName}|${foldStartTime}")
+
+  echo ""
+  if [[ ${TRAVIS:-} ]]; then
+    echo "travis_fold:start:${sanitizedFoldName}"
+    echo "travis_time:start:${sanitizedFoldName}"
+  fi
+  local enterArrow="===>  ${foldName}  ==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>==>"
+  # keep all messages consistently wide 80chars regardless of the foldName
+  echo ${enterArrow:0:100}
+  if [[ ${2:-} != "no-xtrace" ]]; then
+    # turn on verbose mode so that we have better visibility into what's going on
+    # http://tldp.org/LDP/Bash-Beginners-Guide/html/sect_02_03.html#table_02_01
+    set -x
+  fi
+}
+
+function travisFoldEnd() {
+  set +x
+  local foldName="${0#./}  ${1}"
+  # convert all non alphanum chars except for "-" and "." to "--"
+  local sanitizedFoldName=${foldName//[^[:alnum:]\-\.]/--}
+  # strip trailing "-"
+  sanitizedFoldName=${sanitizedFoldName%-}
+
+  # consult and update travisFoldStack
+  local lastFoldIndex=$(expr ${#travisFoldStack[@]} - 1)
+  local lastFoldString=${travisFoldStack[$lastFoldIndex]}
+  # split the string by | and then turn that into an array
+  local lastFoldArray=(${lastFoldString//\|/ })
+  local lastSanitizedFoldName=${lastFoldArray[0]}
+
+  if [[ ${TRAVIS:-} ]]; then
+    local lastFoldStartTime=${lastFoldArray[1]}
+    local foldFinishTime=$(date +%s%N)
+    local foldDuration=$(expr ${foldFinishTime} - ${lastFoldStartTime})
+
+    # write into build-perf.log file
+    local logIndent=$(expr ${lastFoldIndex} \* 2)
+    printf "%6ss%${logIndent}s: %s\n" $(expr ${foldDuration} / 1000000000) " " "${foldName}" >> ${LOGS_DIR}/build-perf.log
+  fi
+
+  # pop
+  travisFoldStack=(${travisFoldStack[@]:0:lastFoldIndex})
+
+  # check for misalignment
+  if [[ ${lastSanitizedFoldName} != ${sanitizedFoldName} ]]; then
+    echo "Travis fold mis-alignment detected! travisFoldEnd expected sanitized fold name '${lastSanitizedFoldName}', but received '${sanitizedFoldName}' (after sanitization)"
+    exit 1
+  fi
+
+  local returnArrow="<===  ${foldName}  <==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<=="
+  # keep all messages consistently wide 80chars regardless of the foldName
+  echo ${returnArrow:0:100}
+  echo ""
+  if [[ ${TRAVIS:-} ]]; then
+    echo "travis_time:end:${sanitizedFoldName}:start=${lastFoldStartTime},finish=${foldFinishTime},duration=${foldDuration}"
+    echo "travis_fold:end:${sanitizedFoldName}"
+  fi
+}
+
+
+function travisFoldReturnArrows() {
+  # print out return arrows so that it's easy to see the end of the script in the log
+  echo ""
+  returnArrow="<===  ${0#./}  <==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<=="
+  # keep all messages consistently wide 80chars regardless of the foldName
+  echo ${returnArrow:0:100}
+  echo "<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==<==="
+  echo ""
+}
diff --git a/scripts/ci/android_cpu.sh b/scripts/ci/android_cpu.sh
deleted file mode 100755
index 24cbe47c69cb..000000000000
--- a/scripts/ci/android_cpu.sh
+++ /dev/null
@@ -1,42 +0,0 @@
-#!/bin/bash
-set -e
-
-CPUPATH=/sys/devices/system/cpu
-WAKE_LOCK_NAME=ngperf
-
-set_governor() {
-  echo "Setting CPU frequency governor to \"$1\""
-  adb shell 'for f in '$CPUPATH'/cpu*/cpufreq/scaling_governor ; do echo '$1' > $f; done'
-}
-
-wake_lock() {
-  echo "Setting wake lock $WAKE_LOCK_NAME"
-  adb shell "echo $WAKE_LOCK_NAME > /sys/power/wake_lock"
-}
-
-wake_unlock() {
-  echo "Removing wake lock $WAKE_LOCK_NAME"
-  adb shell "echo $WAKE_LOCK_NAME > /sys/power/wake_unlock"
-}
-
-case "$1" in
-  (performance)
-    set_governor "performance"
-    ;;
-  (powersave)
-    set_governor "powersave"
-    ;;
-  (ondemand)
-    set_governor "ondemand"
-    ;;
-  (wakelock)
-    wake_lock
-    ;;
-  (wakeunlock)
-    wake_unlock
-    ;;
-  (*)
-    echo "Usage: $0 performance|powersave|ondemand|wakelock|wakeunlock"
-    exit 1
-    ;;
-esac
diff --git a/scripts/ci/angular.sh b/scripts/ci/angular.sh
new file mode 100755
index 000000000000..ec28c34232d2
--- /dev/null
+++ b/scripts/ci/angular.sh
@@ -0,0 +1,46 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# If the previous commands in the `script` section of .travis.yaml failed, then abort.
+# The variable is not set in early stages of the build, so we default to 0 there.
+# https://docs.travis-ci.com/user/environment-variables/
+if [[ ${TRAVIS_TEST_RESULT=0} == 1 ]]; then
+  exit 1;
+fi
+
+
+# this ascii art was created based on the official Angular logo from https://angular.io/presskit.html
+# converted using http://www.text-image.com/convert/
+# colors added based on http://stackoverflow.com/questions/5947742/how-to-change-the-output-color-of-echo-in-linux
+RED='\033[0;31m'
+LRED='\033[1;31m'
+WHITE='\033[1;37m'
+
+
+echo -e ${LRED}'                                          ``'${RED}'`` '
+echo -e ${LRED}'                                     `.--://'${RED}':::--.`'
+echo -e ${LRED}'                               `..-:////////'${RED}':::::::::-.``'
+echo -e ${LRED}'                          `.-::////////////'${WHITE}'oo'${RED}'::::::::::::::-.`'
+echo -e ${LRED}'                     `--://///////////////'${WHITE}'+NN+'${RED}'::::::::::::::::::-.`'
+echo -e ${LRED}'                     `///////////////////'${WHITE}'+NMMN/'${RED}':::::::::::::::::::`'
+echo -e ${LRED}'                      ///////////////////'${WHITE}'mMMMMm/'${RED}'::::::::::::::::::'
+echo -e ${LRED}'                      ://///////////////'${WHITE}'dMMMMMMd/'${RED}':::::::::::::::::'
+echo -e ${LRED}'                      -////////////////'${WHITE}'dMMMNNMMMh/'${RED}':::::::::::::::-'
+echo -e ${LRED}'                      .///////////////'${WHITE}'hMMMM++MMMMh'${RED}':::::::::::::::.'
+echo -e ${LRED}'                      `//////////////'${WHITE}'yMMMMs'${LRED}'/'${RED}':'${WHITE}'sMMMMy'${RED}'::::::::::::::`'
+echo -e ${LRED}'                       :////////////'${WHITE}'sMMMMy'${LRED}'//'${RED}'::'${WHITE}'yMMMMs'${RED}':::::::::::::'
+echo -e ${LRED}'                       -///////////'${WHITE}'oMMMMd'${LRED}'///'${RED}'::'${WHITE}'/dMMMMo'${RED}':::::::::::-'
+echo -e ${LRED}'                       .//////////'${WHITE}'+NMMMMddddddddMMMMN+'${RED}'::::::::::.'
+echo -e ${LRED}'                       `/////////'${WHITE}'+NMMMMMMMMMMMMMMMMMMN+'${RED}':::::::::`'
+echo -e ${LRED}'                        :////////'${WHITE}'mMMMMyyyyyyyyyyyyMMMMm/'${RED}'::::::::'
+echo -e ${LRED}'                        -///////'${WHITE}'mMMMMs'${LRED}'//////'${RED}'::::::'${WHITE}'sMMMMm/'${RED}'::::::-'
+echo -e ${LRED}'                        .//////'${WHITE}'dMMMMy'${LRED}'///////'${RED}':::::::'${WHITE}'yMMMMd/'${RED}':::::.'
+echo -e ${LRED}'                        `/////'${WHITE}'hMMMMd'${LRED}'////////'${RED}':::::::'${WHITE}'/dMMMMh'${RED}':::::`'
+echo -e ${LRED}'                         -://///////////////'${RED}'::::::::::::::::::-'
+echo -e ${LRED}'                           `.://////////////'${RED}'::::::::::::::-.`'
+echo -e ${LRED}'                               `-://////////'${RED}':::::::::::-`'
+echo -e ${LRED}'                                  `.-://////'${RED}':::::::-.`'
+echo -e ${LRED}'                                      `.:///'${RED}'::::.`'
+echo -e ${LRED}'                                          .-'${RED}'-` '
+
diff --git a/scripts/ci/build.sh b/scripts/ci/build.sh
new file mode 100755
index 000000000000..a14dab89acdf
--- /dev/null
+++ b/scripts/ci/build.sh
@@ -0,0 +1,65 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+# If the previous commands in the `script` section of .travis.yaml failed, then abort.
+# The variable is not set in early stages of the build, so we default to 0 there.
+# https://docs.travis-ci.com/user/environment-variables/
+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
+
+# Build the Angular packages then exit (no further build required)
+if [[ ${CI_MODE:-} == "aio_e2e" || ${CI_MODE:-} == "aio_tools_test" ]]; then
+  travisFoldStart "build.$CI_MODE"
+  (
+    ./build.sh
+  )
+  travisFoldEnd "build.$CI_MODE"
+  exit 0;
+fi
+
+travisFoldStart "tsc tools"
+  $(npm bin)/tsc -p tools
+  $(npm bin)/tsc -p packages/compiler/tsconfig-tools.json
+  $(npm bin)/tsc -p packages/compiler-cli/tsconfig-tools.json
+travisFoldEnd "tsc tools"
+
+
+travisFoldStart "tsc all"
+  node dist/tools/@angular/compiler-cli/src/main -p packages/tsconfig-metadata.json
+  $(npm bin)/tsc -p packages
+  $(npm bin)/tsc -p packages/examples
+  $(npm bin)/tsc -p modules
+travisFoldEnd "tsc all"
diff --git a/scripts/ci/build_and_test.sh b/scripts/ci/build_and_test.sh
deleted file mode 100755
index 5d7165af8d57..000000000000
--- a/scripts/ci/build_and_test.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/bash
-set -e
-
-MODE=$1
-
-echo =============================================================================
-# go to project dir
-SCRIPT_DIR=$(dirname $0)
-cd $SCRIPT_DIR/../..
-
-${SCRIPT_DIR}/build_$MODE.sh
-${SCRIPT_DIR}/test_$MODE.sh
diff --git a/scripts/ci/build_dart.sh b/scripts/ci/build_dart.sh
deleted file mode 100755
index 9ab1cddf8618..000000000000
--- a/scripts/ci/build_dart.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/bash
-set -e
-
-echo =============================================================================
-# go to project dir
-SCRIPT_DIR=$(dirname $0)
-source $SCRIPT_DIR/env_dart.sh
-cd $SCRIPT_DIR/../..
-
-./node_modules/.bin/gulp build.js.cjs build.dart benchpress.bundle
-
-pub install
diff --git a/scripts/ci/build_js.sh b/scripts/ci/build_js.sh
deleted file mode 100755
index 3217d17f7306..000000000000
--- a/scripts/ci/build_js.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/bash
-set -e
-
-echo =============================================================================
-# go to project dir
-SCRIPT_DIR=$(dirname $0)
-# this is needed because we're running JS tests in Dartium too
-source $SCRIPT_DIR/env_dart.sh
-cd $SCRIPT_DIR/../..
-
-./node_modules/.bin/gulp build.js
-./node_modules/.bin/gulp docs
diff --git a/scripts/ci/cleanup.sh b/scripts/ci/cleanup.sh
new file mode 100755
index 000000000000..7b1046d7c914
--- /dev/null
+++ b/scripts/ci/cleanup.sh
@@ -0,0 +1,36 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+case ${CI_MODE} in
+  js)
+    ;;
+  saucelabs_required)
+    travisFoldStart "teardown.sauceConnect"
+      ./scripts/sauce/sauce_connect_teardown.sh
+    travisFoldEnd "teardown.sauceConnect"
+    ;;
+  browserstack_required)
+    travisFoldStart "teardown.browserStack"
+      ./scripts/browserstack/teardown_tunnel.sh
+    travisFoldEnd "teardown.browserStack"
+    ;;
+  saucelabs_optional)
+    travisFoldStart "teardown.sauceConnect"
+      ./scripts/sauce/sauce_connect_teardown.sh
+    travisFoldEnd "teardown.sauceConnect"
+    ;;
+  browserstack_optional)
+    travisFoldStart "teardown.browserStack"
+      ./scripts/browserstack/teardown_tunnel.sh
+    travisFoldEnd "teardown.browserStack"
+    ;;
+esac
+
+# Print return arrows as a log separator
+travisFoldReturnArrows
diff --git a/scripts/ci/deploy.sh b/scripts/ci/deploy.sh
new file mode 100755
index 000000000000..ba674a265de0
--- /dev/null
+++ b/scripts/ci/deploy.sh
@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+# If the previous commands in the `script` section of .travis.yaml failed, then abort.
+# The variable is not set in early stages of the build, so we default to 0 there.
+# https://docs.travis-ci.com/user/environment-variables/
+if [[ ${TRAVIS_TEST_RESULT=0} == 1 ]]; then
+  exit 1;
+fi
+
+
+# Don't deploy Angular.io if we are running in a fork
+if [[ ${TRAVIS_REPO_SLUG} != "angular/angular" ]]; then
+  echo "Skipping deploy because this is not angular/angular."
+  exit 0
+fi
+
+
+case ${CI_MODE} in
+  aio)
+    travisFoldStart "deploy.aio"
+    (
+      cd ${TRAVIS_BUILD_DIR}/aio
+      yarn deploy-production
+    )
+    travisFoldEnd "deploy.aio"
+    ;;
+esac
diff --git a/scripts/ci/env.sh b/scripts/ci/env.sh
new file mode 100755
index 000000000000..b28dae419b64
--- /dev/null
+++ b/scripts/ci/env.sh
@@ -0,0 +1,138 @@
+#!/usr/bin/env bash
+
+# because this script is being source-ed via .travis.yaml,
+# we need to restore the original options so that that we don't interfere with
+# travis' internals
+readonly ORIGINAL_SHELL_OPTIONS=$(set +o)
+
+# this script is extra noisy and used in many places during the build so we suppress the trace with +x to reduce the noise
+set -u -e -o pipefail
+
+# sets and optionally prints environmental variable
+# usage: setEnvVar variableName variableValue
+function  setEnvVar() {
+  local name=$1
+  local value=$2
+
+  if [[ ${print} == "print" ]]; then
+    echo ${name}=${value}
+  fi
+  export ${name}="${value}"
+}
+
+# use BASH_SOURCE so that we get the right path when this script is called AND source-d
+readonly thisDir=$(cd $(dirname ${BASH_SOURCE[0]}); pwd)
+readonly print=${1:-}
+
+# print bash version just so that we know what is running all the scripts
+if [[ ${print} == "print" ]]; then
+  bash --version
+fi
+
+
+#######################
+#    CUSTOM GLOBALS   #
+#######################
+
+setEnvVar NODE_VERSION 8.9.1
+setEnvVar YARN_VERSION 1.3.2
+# Pin to a Chromium version that does not cause the aio e2e tests to flake. (See https://github.com/angular/angular/pull/20403.)
+# Revision 494239 (which was part of Chrome 62.0.3186.0) is the last version that does not cause flakes. (Latest revision checked: 508578)
+setEnvVar CHROMIUM_VERSION 494239 # Chrome 62 linux stable, see https://www.chromium.org/developers/calendar
+setEnvVar CHROMEDRIVER_VERSION_ARG "--versions.chrome 2.33"
+setEnvVar SAUCE_CONNECT_VERSION 4.4.9
+setEnvVar ANGULAR_CLI_VERSION 1.6.3
+setEnvVar PROJECT_ROOT $(cd ${thisDir}/../..; pwd)
+
+if [[ ${TRAVIS:-} ]]; then
+  case ${CI_MODE} in
+    js)
+      setEnvVar KARMA_JS_BROWSERS ChromeNoSandbox
+      ;;
+    saucelabs_required)
+      setEnvVar KARMA_JS_BROWSERS `node -e "console.log(require('/home/travis/build/angular/angular/browser-providers.conf').sauceAliases.CI_REQUIRED.join(','))"`
+      ;;
+    browserstack_required)
+      setEnvVar KARMA_JS_BROWSERS `node -e "console.log(require('/home/travis/build/angular/angular/browser-providers.conf').browserstackAliases.CI_REQUIRED.join(','))"`
+      ;;
+    saucelabs_optional)
+      setEnvVar KARMA_JS_BROWSERS `node -e "console.log(require('/home/travis/build/angular/angular/browser-providers.conf').sauceAliases.CI_OPTIONAL.join(','))"`
+      ;;
+    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
+fi
+
+
+if [[ ${TRAVIS:-} ]]; then
+  # used by xvfb that is used by Chromium
+  setEnvVar DISPLAY :99.0
+
+  # Use newer version of GCC to that is required to compile native npm modules for Node v4+ on Ubuntu Precise
+  # more info: https://docs.travis-ci.com/user/languages/javascript-with-nodejs#Node.js-v4-(or-io.js-v3)-compiler-requirements
+  setEnvVar CXX g++-4.8
+
+  # If NGBUILDS_IO_KEY not set yet, export the NGBUILDS_IO_KEY using the JWT token that Travis generated and exported for SAUCE_ACCESS_KEY.
+  # This is a workaround for travis-ci/travis-ci#7223
+  # WARNING: NGBUILDS_IO_KEY should NOT be printed
+  export NGBUILDS_IO_KEY=${NGBUILDS_IO_KEY:-$SAUCE_ACCESS_KEY}
+
+  # 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;
+  # in all other cases, the regular angular-ci account is used.
+  if [ "${TRAVIS_PULL_REQUEST}" = "false" ] && [ "${TRAVIS_BRANCH}" = "master" ]; then
+    setEnvVar SAUCE_USERNAME angular2-ci
+    # - not using use setEnvVar so that we don't print the key
+    # - we overwrite the value set by Travis JWT addon here to work around travis-ci/travis-ci#7223 for NGBUILDS_IO_KEY
+    export SAUCE_ACCESS_KEY=693ebc16208a-0b5b-1614-8d66-a2662f4e
+  else
+    setEnvVar SAUCE_USERNAME angular-ci
+    # - not using use setEnvVar so that we don't print the key
+    # - we overwrite the value set by Travis JWT addon here to work around travis-ci/travis-ci#7223 for NGBUILDS_IO_KEY
+    export SAUCE_ACCESS_KEY=9b988f434ff8-fbca-8aa4-4ae3-35442987
+  fi
+
+  setEnvVar BROWSER_STACK_USERNAME angularteam1
+  # not using use setEnvVar so that we don't print the key
+  export BROWSER_STACK_ACCESS_KEY=CaXMeMHD9pr5PHg8N7Jq
+  setEnvVar CHROME_BIN ${HOME}/.chrome/chromium/chrome-linux/chrome
+  setEnvVar BROWSER_PROVIDER_READY_FILE /tmp/angular-build/browser-provider-tunnel-init.lock
+fi
+
+
+
+#######################
+# PREEXISTING GLOBALS #
+#######################
+
+# Prepend `~/.yarn/bin` to the PATH
+setEnvVar PATH $HOME/.yarn/bin:$PATH
+
+# Append dist/all to the NODE_PATH so that cjs module resolver finds find the packages that use
+# absolute module ids (e.g. @angular/core)
+setEnvVar NODE_PATH ${NODE_PATH:-}:${PROJECT_ROOT}/dist/all:${PROJECT_ROOT}/dist/tools
+setEnvVar LOGS_DIR /tmp/angular-build/logs
+
+# strip leading "/home/travis/build/angular/angular/" or "./" path. Could this be done in one shot?
+CURRENT_SHELL_SOURCE_FILE=${BASH_SOURCE#${PROJECT_ROOT}/}
+export CURRENT_SHELL_SOURCE_FILE=${CURRENT_SHELL_SOURCE_FILE#./}
+# Prefix xtrace output with file name/line and optionally function name
+# http://wiki.bash-hackers.org/scripting/debuggingtips#making_xtrace_more_useful
+# TODO(i): I couldn't figure out how to set this via `setEnvVar` so I just set it manually
+export PS4='+(${CURRENT_SHELL_SOURCE_FILE}:${LINENO}): ${FUNCNAME[0]:+${FUNCNAME[0]}(): }'
+if [[ ${print} == "print" ]]; then
+  echo PS4=${PS4}
+fi
+
+eval "${ORIGINAL_SHELL_OPTIONS}"
diff --git a/scripts/ci/env_dart.sh b/scripts/ci/env_dart.sh
deleted file mode 100755
index 1f384ea1c672..000000000000
--- a/scripts/ci/env_dart.sh
+++ /dev/null
@@ -1,97 +0,0 @@
-#!/bin/bash
-set -e -o pipefail
-
-if [[ -z $ENV_SET ]]; then
-  export ENV_SET=1
-
-  # Map DART_SDK and DARTSDK to each other if only one is specified.
-  #
-  # TODO(chirayu): Remove this legacy DARTSDK variable support.  Check with Misko
-  # to see if he's using it on this Mac.
-  if [[ -z "$DART_SDK" ]]; then
-    : "${DARTSDK:=$DART_SDK}"
-  else
-    : "${DART_SDK:=$DARTSDK}"
-  fi
-
-  unset DART
-  PLATFORM="$(uname -s)"
-
-  case "$PLATFORM" in
-    (Darwin)
-      path=$(readlink ${BASH_SOURCE[0]}||echo './scripts/env.sh')
-      export NGDART_SCRIPT_DIR=$(dirname $path)
-      ;;
-    (Linux)
-      export NGDART_SCRIPT_DIR=$(dirname $(readlink -f ${BASH_SOURCE[0]}))
-      ;;
-    (*)
-      echo Unsupported platform $PLATFORM.  Exiting ... >&2
-      exit 3
-      ;;
-  esac
-
-  export NGDART_BASE_DIR=$(dirname $NGDART_SCRIPT_DIR)
-
-  # Try to find the SDK alongside the dart command first.
-  if [[ -z "$DART_SDK" ]]; then
-    DART=$(which dart) || true
-    if [[ -x "$DART" ]]; then
-      DART_SDK="${DART/dart-sdk\/*/dart-sdk}"
-      if [[ ! -e "$DART_SDK" ]]; then
-        unset DART DART_SDK
-      fi
-    fi
-  fi
-  # Fallback: Assume it's alongside the current directory (e.g. Travis).
-  if [[ -z "$DART_SDK" ]]; then
-    DART_SDK="$(pwd)/dart-sdk"
-  fi
-
-  : "${DART:=$DART_SDK/bin/dart}"
-
-  if [[ ! -x "$DART" ]]; then
-    echo Unable to locate the dart binary / SDK. Exiting >&2
-    exit 3
-  fi
-
-  if [[ -z "$DARTIUM" ]]; then
-    dartiumRoot="$DART_SDK/../chromium"
-    if [[ -e "$dartiumRoot" ]]; then
-      case "$PLATFORM" in
-        (Linux) export DARTIUM="$dartiumRoot/chrome" ;;
-        (Darwin) export DARTIUM="$dartiumRoot/Chromium.app/Contents/MacOS/Chromium" ;;
-        (*) echo Unsupported platform $PLATFORM.  Exiting ... >&2 ; exit 3 ;;
-      esac
-    fi
-  fi
-
-  export DART_SDK
-  export DARTSDK
-  export DART
-  export PUB=${PUB:-"$DART_SDK/bin/pub"}
-  export PUB_CACHE=$DART_SDK/pub-cache
-  export DARTANALYZER=${DARTANALYZER:-"$DART_SDK/bin/dartanalyzer"}
-  export DARTDOC=${DARTDOC:-"$DART_SDK/bin/dartdoc"}
-  export DART_DOCGEN=${DART_DOCGEN:-"$DART_SDK/bin/docgen"}
-  export DART_VM_OPTIONS="--old_gen_heap_size=2048"
-  export DARTIUM_BIN=${DARTIUM_BIN:-"$DARTIUM"}
-  export CHROME_BIN=${CHROME_BIN:-"google-chrome"}
-  export PATH=$PATH:$DART_SDK/bin
-
-  echo '*********'
-  echo '** ENV **'
-  echo '*********'
-  echo DART_SDK=$DART_SDK
-  echo DART=$DART
-  echo PUB=$PUB
-  echo DARTANALYZER=$DARTANALYZER
-  echo DARTDOC=$DARTDOC
-  echo DART_DOCGEN=$DART_DOCGEN
-  echo DARTIUM_BIN=$DARTIUM_BIN
-  echo CHROME_BIN=$CHROME_BIN
-  echo PATH=$PATH
-  echo NGDART_BASE_DIR=$NGDART_BASE_DIR
-  echo NGDART_SCRIPT_DIR=$NGDART_SCRIPT_DIR
-
-fi
diff --git a/scripts/ci/init_android.sh b/scripts/ci/init_android.sh
deleted file mode 100755
index e4bced550779..000000000000
--- a/scripts/ci/init_android.sh
+++ /dev/null
@@ -1,15 +0,0 @@
-#!/bin/bash
-set -e
-SCRIPT_DIR=$(dirname $0)
-cd $SCRIPT_DIR
-
-if [[ $PERF_BROWSERS =~ .*Android.* || $E2E_BROWSERS =~ .*Android.* ]]
-then
-  adb root usb
-  adb wait-for-device devices
-  adb reverse tcp:8001 tcp:8001
-  adb reverse tcp:8002 tcp:8002
-
-  ./android_cpu.sh performance
-  ./android_cpu.sh wakelock
-fi
diff --git a/scripts/ci/install-chromium.sh b/scripts/ci/install-chromium.sh
new file mode 100755
index 000000000000..d29247d8db23
--- /dev/null
+++ b/scripts/ci/install-chromium.sh
@@ -0,0 +1,85 @@
+#!/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
+
+## TODO (matsko|iminar): uncomment once #22231 is closed
+# 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
new file mode 100755
index 000000000000..47bd8efb79dc
--- /dev/null
+++ b/scripts/ci/install.sh
@@ -0,0 +1,110 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+TRAVIS=${TRAVIS:-}
+CI_MODE=${CI_MODE:-}
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+# If the previous commands in the `script` section of .travis.yaml failed, then abort.
+# The variable is not set in early stages of the build, so we default to 0 there.
+# https://docs.travis-ci.com/user/environment-variables/
+if [[ ${TRAVIS_TEST_RESULT=0} == 1 ]]; then
+  exit 1;
+fi
+
+
+mkdir -p ${LOGS_DIR}
+
+
+# TODO: install nvm?? it's already on travis so we don't need it
+#curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
+
+
+# Install node
+#nvm install ${NODE_VERSION}
+
+
+# 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}"
+travisFoldEnd "install-yarn"
+
+
+# Install all npm dependencies according to yarn.lock
+travisFoldStart "yarn-install"
+  (node tools/npm/check-node-modules --purge && yarn postinstall) || yarn install --frozen-lockfile --non-interactive
+travisFoldEnd "yarn-install"
+
+
+# Install bower packages
+travisFoldStart "bower-install"
+  $(npm bin)/bower install
+travisFoldEnd "bower-install"
+
+
+if [[ ${TRAVIS} &&
+  ${CI_MODE} == "aio" ||
+  ${CI_MODE} == "aio_e2e" ||
+  ${CI_MODE} == "aio_tools_test"
+]]; then
+  # angular.io: Install all yarn dependencies according to angular.io/yarn.lock
+  travisFoldStart "yarn-install.aio"
+    (
+      # HACK (don't submit with this): Build Angular
+      ./build.sh --packages=compiler,core,elements --examples=false
+
+      cd ${PROJECT_ROOT}/aio
+      yarn install --frozen-lockfile --non-interactive
+    )
+  travisFoldEnd "yarn-install.aio"
+fi
+
+# Install Chromium
+if [[ ${TRAVIS} &&
+  ${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
+
+
+# Install Sauce Connect
+if [[ ${TRAVIS}] && (${CI_MODE} == "saucelabs_required" || ${CI_MODE} == "saucelabs_optional") ]]; then
+  travisFoldStart "install-sauceConnect"
+    (
+      ${thisDir}/../sauce/sauce_connect_setup.sh
+    )
+  travisFoldEnd "install-sauceConnect"
+fi
+
+
+# Install BrowserStack Tunnel
+if [[ ${TRAVIS} && (${CI_MODE} == "browserstack_required" || ${CI_MODE} == "browserstack_optional") ]]; then
+  travisFoldStart "install-browserstack"
+    (
+      ${thisDir}/../browserstack/start_tunnel.sh
+    )
+  travisFoldEnd "install-browserstack"
+fi
+
+# Print return arrows as a log separator
+travisFoldReturnArrows
diff --git a/scripts/ci/install_dart.sh b/scripts/ci/install_dart.sh
deleted file mode 100755
index 098508d095a1..000000000000
--- a/scripts/ci/install_dart.sh
+++ /dev/null
@@ -1,30 +0,0 @@
-#!/bin/bash
-
-set -e -x
-
-DART_CHANNEL=$1
-ARCH=$2
-
-AVAILABLE_DART_VERSION=$(curl "https://storage.googleapis.com/dart-archive/channels/${DART_CHANNEL}/release/latest/VERSION" | python -c \
-    'import sys, json; print(json.loads(sys.stdin.read())["version"])')
-
-echo Fetch Dart channel: ${DART_CHANNEL}
-
-URL_PREFIX=https://storage.googleapis.com/dart-archive/channels/${DART_CHANNEL}/release/latest
-DART_SDK_URL="$URL_PREFIX/sdk/dartsdk-$ARCH-release.zip"
-DARTIUM_URL="$URL_PREFIX/dartium/dartium-$ARCH-release.zip"
-
-download_and_unzip() {
-  ZIPFILE=${1/*\//}
-  curl -O -L $1 && unzip -q $ZIPFILE && rm $ZIPFILE
-}
-
-# TODO: do these downloads in parallel
-download_and_unzip $DART_SDK_URL
-download_and_unzip $DARTIUM_URL
-
-echo Fetched new dart version $(<dart-sdk/version)
-
-if [[ -n $DARTIUM_URL ]]; then
-  mv dartium-* chromium
-fi
diff --git a/scripts/ci/offline_compiler_test.sh b/scripts/ci/offline_compiler_test.sh
new file mode 100755
index 000000000000..f44acfadbb02
--- /dev/null
+++ b/scripts/ci/offline_compiler_test.sh
@@ -0,0 +1,73 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# npm 5 symlinks from local file installations rather than copying files, but
+# webpack will not follow the symlinks.
+# We prefer to emulate how a user will install angular, so we `npm pack` the
+# packages, then install them from the resulting .tgz files later.
+ANGULAR_PKGS=$(npm pack dist/packages-dist/{common,forms,core,compiler,compiler-cli,platform-{browser,server},platform-browser-dynamic,router,http,animations} | awk "{ printf \"$PWD/\"; print }")
+
+
+PKGS=(
+  $PWD/node_modules/typescript
+  $PWD/node_modules/reflect-metadata
+  $PWD/node_modules/rxjs
+  $PWD/node_modules/zone.js
+  @types/{node@6.0.38,jasmine@2.2.33}
+  jasmine@2.4.1
+  webpack@2.1.0-beta.21
+  source-map-loader@0.2.0
+  @angular/{material,cdk}@2.0.0-beta.10
+)
+
+TMPDIR=${TMPDIR:-.}
+readonly TMP=$TMPDIR/e2e_test.$(date +%s)
+mkdir -p $TMP
+cp -R -v packages/compiler-cli/integrationtest/* $TMP
+cp -R -v modules/benchmarks $TMP
+# Try to use the same versions as angular, in particular, this will
+# cause us to install the same rxjs version.
+cp -v package.json $TMP
+
+# run in subshell to avoid polluting cwd
+(
+  cd $TMP
+  set -ex -o pipefail
+  npm install ${PKGS[*]}
+  npm install ${ANGULAR_PKGS[*]}
+
+  ./node_modules/.bin/tsc --version
+  # Compile the compiler-cli third_party simulation.
+  # Use ngc-wrapped directly so we don't produce *.ngfactory.ts files!
+
+  # Compile the compiler-cli integration tests
+  # TODO(vicb): restore the test for .xtb
+  #./node_modules/.bin/ngc -p tsconfig-build.json --i18nFile=src/messages.fi.xtb --locale=fi --i18nFormat=xtb
+
+  # Generate the metadata for the third-party modules
+  ./node_modules/.bin/ngc -p third_party_src/tsconfig-build.json
+
+  # Generate the the bundle modules
+  ./node_modules/.bin/ngc -p flat_module/tsconfig-build.json
+
+  # 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.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
+
+  node test/test_ngtools_api.js
+
+  ./node_modules/.bin/jasmine init
+  # Run compiler-cli integration tests in node
+  ./node_modules/.bin/webpack ./webpack.config.js
+  ./node_modules/.bin/jasmine ./all_spec.js
+
+  # Compile again with a differently named tsconfig file
+  mv tsconfig-build.json othername.json
+  ./node_modules/.bin/ngc -p othername.json
+)
diff --git a/scripts/ci/payload-size.js b/scripts/ci/payload-size.js
new file mode 100644
index 000000000000..bf1699ab55c8
--- /dev/null
+++ b/scripts/ci/payload-size.js
@@ -0,0 +1,44 @@
+'use strict';
+
+// Imports
+const fs = require('fs');
+
+// Get branch and project name from command line arguments.
+const [, , limitFile, project, branch, commit] = process.argv;
+
+// Load sizes.
+const currentSizes = JSON.parse(fs.readFileSync('/tmp/current.log', 'utf8'));
+const allLimitSizes = JSON.parse(fs.readFileSync(limitFile, 'utf8'));
+const limitSizes = allLimitSizes[project][branch] || allLimitSizes[project]['master'];
+
+// Check current sizes against limits.
+let failed = false;
+for (const compressionType in limitSizes) {
+  if (typeof limitSizes[compressionType] === 'object') {
+    const limitPerFile = limitSizes[compressionType];
+
+    for (const filename in limitPerFile) {
+      const expectedSize = limitPerFile[filename];
+      const actualSize = currentSizes[`${compressionType}/${filename}`];
+
+      if (Math.abs(actualSize - expectedSize) > expectedSize / 100) {
+        failed = true;
+        // We must also catch when the size is significantly lower than the payload limit, so
+        // we are forced to update the expected payload number when the payload size reduces.
+        // Otherwise, we won't be able to catch future regressions that happen to be below
+        // the artificially inflated limit.
+        const operator = actualSize > expectedSize ? 'exceeded' : 'fell below';
+        console.log(
+            `Commit ${commit} ${compressionType} ${filename} ${operator} expected size by >1% ` +
+            `(expected: ${expectedSize}, actual: ${actualSize}).`);
+      }
+    }
+  }
+}
+
+if (failed) {
+  console.log(`If this is a desired change, please update the size limits in file '${limitFile}'.`);
+  process.exit(1);
+} else {
+  console.log('Payload size <1% change check passed.');
+}
diff --git a/scripts/ci/payload-size.sh b/scripts/ci/payload-size.sh
new file mode 100644
index 000000000000..28dfd7346e08
--- /dev/null
+++ b/scripts/ci/payload-size.sh
@@ -0,0 +1,124 @@
+#!/usr/bin/env bash
+
+set -eu -o pipefail
+
+readonly PROJECT_NAME="angular-payload-size"
+NODE_MODULES_BIN=$PROJECT_ROOT/node_modules/.bin/
+
+# Calculate the size of target file uncompressed size, gzip7 size, gzip9 size
+# Write to global variable $payloadData, $filename
+calculateSize() {
+  size["uncompressed"]=$(stat -c%s "$filename")
+  label=$(echo "$filename" | sed "s/.*\///" | sed "s/\..*//")
+  payloadData="$payloadData\"uncompressed/$label\": ${size["uncompressed"]}, "
+
+  gzip -7 $filename -c >> "${filename}7.gz"
+  size["gzip7"]=$(stat -c%s "${filename}7.gz")
+  payloadData="$payloadData\"gzip7/$label\": ${size["gzip7"]}, "
+
+  gzip -9 $filename -c >> "${filename}9.gz"
+  size["gzip9"]=$(stat -c%s "${filename}9.gz")
+  payloadData="$payloadData\"gzip9/$label\": ${size["gzip9"]}, "
+}
+
+# Check whether the file size is under limit.
+# Exit with an error if limit is exceeded.
+#   $1: string - The name in database.
+#   $2: string - The payload size limit file.
+checkSize() {
+  name="$1"
+  limitFile="$2"
+  node ${PROJECT_ROOT}/scripts/ci/payload-size.js $limitFile $name $TRAVIS_BRANCH $TRAVIS_COMMIT
+}
+
+# Write timestamp to global variable `$payloadData`.
+addTimestamp() {
+  # Add Timestamp
+  timestamp=$(date +%s)
+  payloadData="$payloadData\"timestamp\": $timestamp, "
+}
+
+# Write travis commit message to global variable `$payloadData`.
+addMessage() {
+  # Grab the set of SHAs for the message. This can fail when you force push or do initial build
+  # because $TRAVIS_COMMIT_RANGE will contain the previous SHA which will not be in the
+  # force push or commit, hence we default to last commit.
+  message=$(git log --oneline $TRAVIS_COMMIT_RANGE -- || git log --oneline -n1)
+  message=$(echo $message | sed 's/\\/\\\\/g' | sed 's/"/\\"/g')
+  payloadData="$payloadData\"message\": \"$message\""
+}
+
+# Add change source: `application`, `dependencies`, or `application+dependencies`
+# Read from global variable `$parentDir`.
+# Update the change source in global variable `$payloadData`.
+addChange() {
+  yarnChanged=false
+  allChangedFiles=$(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir | wc -l)
+  allChangedFileNames=$(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir)
+
+  if [[ $allChangedFileNames == *"yarn.lock"* ]]; then
+    yarnChanged=true
+  fi
+
+  if [[ $allChangedFiles -eq 1 ]] && [[ "$yarnChanged" = true ]]; then
+    # only yarn.lock changed
+    change='dependencies'
+  elif [[ $allChangedFiles -gt 1 ]] && [[ "$yarnChanged" = true ]]; then
+    change='application+dependencies'
+  elif [[ $allChangedFiles -gt 0 ]]; then
+    change='application'
+  else
+    # Nothing changed in aio/
+    exit 0
+  fi
+  payloadData="$payloadData\"change\": \"$change\", "
+}
+
+# Upload data to firebase database if it's commit, print out data for pull requests.
+#   $1: string - The name in database.
+uploadData() {
+  name="$1"
+  payloadData="{${payloadData}}"
+
+  echo $payloadData > /tmp/current.log
+
+  readonly safeBranchName=$(echo $TRAVIS_BRANCH | sed -e 's/\./_/g')
+
+  if [[ "$TRAVIS_PULL_REQUEST" == "false" ]]; then
+    readonly dbPath=/payload/$name/$safeBranchName/$TRAVIS_COMMIT
+
+    # WARNING: FIREBASE_TOKEN should NOT be printed.
+    set +x
+    $NODE_MODULES_BIN/firebase database:update --data "$payloadData" --project $PROJECT_NAME --confirm --token "$ANGULAR_PAYLOAD_FIREBASE_TOKEN" $dbPath
+  fi
+}
+
+# Track payload size.
+#   $1: string       - The name in database.
+#   $2: string       - The file path.
+#   $3: true | false - Whether to check the payload size and fail the test if it exceeds limit.
+#   $4: true | false - Whether to record the type of changes.
+#   $5: [string]     - The payload size limit file. Only necessary if `$3` is `true`.
+trackPayloadSize() {
+  name="$1"
+  path="$2"
+  checkSize="$3"
+  trackChange="$4"
+  limitFile="${5:-}"
+
+  payloadData=""
+
+  for filename in $path; do
+    declare -A size
+    calculateSize
+  done
+  addTimestamp
+  if [[ $trackChange = true ]]; then
+    addChange
+  fi
+  addMessage
+  uploadData $name
+  if [[ $checkSize = true ]]; then
+    checkSize $name $limitFile
+  fi
+}
diff --git a/scripts/ci/perf_launch_chrome.sh b/scripts/ci/perf_launch_chrome.sh
deleted file mode 100755
index f75b6666691d..000000000000
--- a/scripts/ci/perf_launch_chrome.sh
+++ /dev/null
@@ -1,14 +0,0 @@
-#!/bin/bash
-
-platform=`uname`
-if [[ "$platform" == 'Linux' ]]; then
-  `google-chrome --js-flags="--expose-gc"`
-elif [[ "$platform" == 'Darwin' ]]; then
-  `/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary \
-      --enable-memory-info \
-      --enable-precise-memory-info \
-      --enable-memory-benchmarking \
-      --js-flags="--expose-gc --allow-natives-syntax" \
-      --disable-web-security \
-      --remote-debugging-port=9222`
-fi
\ No newline at end of file
diff --git a/scripts/ci/print-logs.sh b/scripts/ci/print-logs.sh
index 9ebf30022faf..37cbf74e3460 100755
--- a/scripts/ci/print-logs.sh
+++ b/scripts/ci/print-logs.sh
@@ -1,11 +1,18 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
-LOG_FILES=$LOGS_DIR/*
+set -u -e -o pipefail
 
-for FILE in $LOG_FILES; do
-  echo -e "\n\n\n"
-  echo "================================================================================"
-  echo " $FILE"
-  echo "================================================================================"
-  cat $FILE
-done
\ No newline at end of file
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+for FILE in ${LOGS_DIR}/*; do
+  travisFoldStart "print log file: ${FILE}"
+    cat $FILE
+  travisFoldEnd "print log file: ${FILE}"
+done
+
+
+# Print return arrows as a log separator
+travisFoldReturnArrows
diff --git a/scripts/ci/publish-build-artifacts.sh b/scripts/ci/publish-build-artifacts.sh
new file mode 100755
index 000000000000..8f30c4005366
--- /dev/null
+++ b/scripts/ci/publish-build-artifacts.sh
@@ -0,0 +1,136 @@
+#!/usr/bin/env bash
+
+set -x -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+
+# Find the most recent tag that is reachable from the current commit.
+# This is shallow clone of the repo, so we might need to fetch more commits to
+# find the tag.
+function getLatestTag {
+  local depth=`git log --oneline | wc -l`
+  local latestTag=`git describe --tags --abbrev=0 || echo NOT_FOUND`
+
+  while [ "$latestTag" == "NOT_FOUND" ]; do
+    # Avoid infinite loop.
+    if [ "$depth" -gt "1000" ]; then
+      echo "Error: Unable to find the latest tag." 1>&2
+      exit 1;
+    fi
+
+    # Increase the clone depth and look for a tag.
+    depth=$((depth + 50))
+    git fetch --depth=$depth
+    latestTag=`git describe --tags --abbrev=0 || echo NOT_FOUND`
+  done
+
+  echo $latestTag;
+}
+
+function publishRepo {
+  COMPONENT=$1
+  ARTIFACTS_DIR=$2
+
+  BUILD_REPO="${COMPONENT}-builds"
+  REPO_DIR="tmp/${BUILD_REPO}"
+
+  if [ -n "${CREATE_REPOS:-}" ]; then
+    curl -u "$ORG:$TOKEN" https://api.github.com/user/repos \
+         -d '{"name":"'$BUILD_REPO'", "auto_init": true}'
+  fi
+
+  echo "Pushing build artifacts to ${ORG}/${BUILD_REPO}"
+
+  # create local repo folder and clone build repo into it
+  rm -rf $REPO_DIR
+  mkdir -p $REPO_DIR
+  (
+    cd $REPO_DIR && \
+    git init && \
+    git remote add origin $REPO_URL && \
+    # use the remote branch if it exists
+    if git ls-remote --exit-code origin ${BRANCH}; then
+      git fetch origin ${BRANCH} --depth=1 && \
+      git checkout origin/${BRANCH}
+    fi
+    git checkout -b "${BRANCH}"
+  )
+
+  # copy over build artifacts into the repo directory
+  rm -rf $REPO_DIR/*
+  cp -R $ARTIFACTS_DIR/* $REPO_DIR/
+
+  BUILD_VER="${LATEST_TAG}+${SHORT_SHA}"
+  if [[ ${CI} ]]; then
+    (
+      # The file ~/.git_credentials is created in /.circleci/config.yml
+      cd $REPO_DIR && \
+      git config credential.helper "store --file=$HOME/.git_credentials"
+    )
+  fi
+  echo `date` > $REPO_DIR/BUILD_INFO
+  echo $SHA >> $REPO_DIR/BUILD_INFO
+
+  (
+    cd $REPO_DIR && \
+    git config user.name "${COMMITTER_USER_NAME}" && \
+    git config user.email "${COMMITTER_USER_EMAIL}" && \
+    git add --all && \
+    git commit -m "${COMMIT_MSG}" --quiet && \
+    git tag "${BUILD_VER}" && \
+    git push origin "${BRANCH}" --tags --force
+  )
+}
+
+# Publish all individual packages from packages-dist.
+function publishPackages {
+  GIT_SCHEME=$1
+  PKGS_DIST=$2
+  BRANCH=$3
+
+  for dir in $PKGS_DIST/*/
+  do
+    COMPONENT="$(basename ${dir})"
+
+    # Replace _ with - in component name.
+    COMPONENT="${COMPONENT//_/-}"
+    JS_BUILD_ARTIFACTS_DIR="${dir}"
+
+    if [[ "$GIT_SCHEME" == "ssh" ]]; then
+      REPO_URL="git@github.com:${ORG}/${COMPONENT}-builds.git"
+    elif [[ "$GIT_SCHEME" == "http" ]]; then
+      REPO_URL="https://github.com/${ORG}/${COMPONENT}-builds.git"
+    else
+      die "Don't have a way to publish to scheme $GIT_SCHEME"
+    fi
+    SHA=`git rev-parse HEAD`
+    SHORT_SHA=`git rev-parse --short HEAD`
+    COMMIT_MSG=`git log --oneline -1`
+    COMMITTER_USER_NAME=`git --no-pager show -s --format='%cN' HEAD`
+    COMMITTER_USER_EMAIL=`git --no-pager show -s --format='%cE' HEAD`
+    LATEST_TAG=`getLatestTag`
+
+    publishRepo "${COMPONENT}" "${JS_BUILD_ARTIFACTS_DIR}"
+  done
+
+  echo "Finished publishing build artifacts"
+}
+
+function publishAllBuilds() {
+  GIT_SCHEME="$1"
+
+  publishPackages $GIT_SCHEME dist/packages-dist $CUR_BRANCH
+  publishPackages $GIT_SCHEME dist/packages-dist-ivy-jit "${CUR_BRANCH}-ivy-jit"
+  publishPackages $GIT_SCHEME dist/packages-dist-ivy-local "${CUR_BRANCH}-ivy-aot"
+}
+
+# See docs/DEVELOPER.md for help
+CUR_BRANCH=${CIRCLE_BRANCH:-$(git symbolic-ref --short HEAD)}
+if [ $# -gt 0 ]; then
+  ORG=$1
+  publishAllBuilds "ssh"
+else
+  ORG="angular"
+  publishAllBuilds "http"
+fi
diff --git a/scripts/ci/test-aio-e2e.sh b/scripts/ci/test-aio-e2e.sh
new file mode 100755
index 000000000000..8d7a42bc467e
--- /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-tools.sh b/scripts/ci/test-aio-tools.sh
new file mode 100755
index 000000000000..cf608c43129d
--- /dev/null
+++ b/scripts/ci/test-aio-tools.sh
@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+travisFoldStart "test.docs"
+  (
+    cd ${PROJECT_ROOT}/aio
+    yarn tools-test
+  )
+travisFoldEnd "test.docs"
diff --git a/scripts/ci/test-aio.sh b/scripts/ci/test-aio.sh
new file mode 100755
index 000000000000..11d7967b76e8
--- /dev/null
+++ b/scripts/ci/test-aio.sh
@@ -0,0 +1,48 @@
+#!/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
+
+
+  # Lint the code
+  travisFoldStart "test.aio.lint"
+    yarn lint
+  travisFoldEnd "test.aio.lint"
+
+
+  # Run PWA-score tests
+  # (Run before unit and e2e tests, which destroy the `dist/` directory.)
+  travisFoldStart "test.aio.pwaScore"
+    yarn test-pwa-score-localhost
+  travisFoldEnd "test.aio.pwaScore"
+
+
+  # Run unit tests
+  travisFoldStart "test.aio.unit"
+    yarn test
+  travisFoldEnd "test.aio.unit"
+
+
+  # Run e2e tests
+  travisFoldStart "test.aio.e2e"
+    yarn e2e
+  travisFoldEnd "test.aio.e2e"
+
+  # Run unit tests for Firebase redirects
+  travisFoldStart "test.aio.redirects"
+    yarn redirects-test
+  travisFoldEnd "test.aio.redirects"
+
+  # Run unit tests for aio/aio-builds-setup
+  travisFoldStart "test.aio.aio-builds-setup"
+    ./aio-builds-setup/scripts/test.sh
+  travisFoldEnd "test.aio.aio-builds-setup"
+)
diff --git a/scripts/ci/test-browserstack.sh b/scripts/ci/test-browserstack.sh
new file mode 100755
index 000000000000..008813917ec0
--- /dev/null
+++ b/scripts/ci/test-browserstack.sh
@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+travisFoldStart "test.unit.browserstack"
+  ./scripts/browserstack/waitfor_tunnel.sh
+  export BROWSER_STACK_ACCESS_KEY=`echo $BROWSER_STACK_ACCESS_KEY | rev`
+  $(npm bin)/karma start ./karma-js.conf.js --single-run --browsers=${KARMA_JS_BROWSERS}
+travisFoldEnd "test.unit.browserstack"
diff --git a/scripts/ci/test-e2e.sh b/scripts/ci/test-e2e.sh
new file mode 100755
index 000000000000..bc18b729f659
--- /dev/null
+++ b/scripts/ci/test-e2e.sh
@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+travisFoldStart "test.e2e.buildPackages"
+  ./build.sh
+travisFoldEnd "test.e2e.buildPackages"
+
+travisFoldStart "test.e2e.check-cycle"
+  $(npm bin)/gulp check-cycle
+travisFoldEnd "test.e2e.check-cycle"
+
+# Serve files for e2e tests
+(
+  $(npm bin)/gulp serve &
+  $(npm bin)/gulp serve-examples &
+)
+
+travisFoldStart "test.e2e.protractor-e2e"
+  NODE_PATH=$NODE_PATH:./dist/all $(npm bin)/protractor ./protractor-e2e.conf.js --bundles=true
+travisFoldEnd "test.e2e.protractor-e2e"
+travisFoldStart "test.e2e.protractor-examples-e2e"
+  NODE_PATH=$NODE_PATH:./dist/all $(npm bin)/protractor ./protractor-examples-e2e.conf.js --bundles=true
+travisFoldEnd "test.e2e.protractor-examples-e2e"
+travisFoldStart "test.e2e.protractor-perf"
+  NODE_PATH=$NODE_PATH:./dist/all $(npm bin)/protractor ./protractor-perf.conf.js --bundles=true --dryrun
+travisFoldEnd "test.e2e.protractor-perf"
+
+# TODO(i): temporarily disable this test because we don't have rxjs backwards compatibility package
+#   and cdk+material are not yet compatible with rxjs v6
+#   uncomment when we have cdk and material releases compatible with rxjs v6
+#travisFoldStart "test.e2e.offlineCompiler"
+#  #TODO(alexeagle): move offline_compiler_test to integration/
+#  ${thisDir}/offline_compiler_test.sh
+#travisFoldEnd "test.e2e.offlineCompiler"
+
+travisFoldStart "test.e2e.source-maps"
+  ./node_modules/.bin/gulp source-map-test
+travisFoldEnd "test.e2e.source-maps"
diff --git a/scripts/ci/test-js.sh b/scripts/ci/test-js.sh
new file mode 100755
index 000000000000..ba83077c9201
--- /dev/null
+++ b/scripts/ci/test-js.sh
@@ -0,0 +1,42 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+# Run unit tests for our tools/ directory
+travisFoldStart "test.unit.tools"
+  # TODO(i): could this be rolled into the tools tests above? why is it separate?
+  travisFoldStart "test.unit.validate-commit-message"
+    (
+      cd tools/validate-commit-message
+      $(npm bin)/jasmine
+    )
+  travisFoldEnd "test.unit.validate-commit-message"
+travisFoldEnd "test.unit.tools"
+
+
+# Run unit tests in node
+travisFoldStart "test.unit.node"
+  node --harmony ./dist/tools/tsc-watch/ node runCmdsOnly
+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/compiler-cli/src/main -p packages/tsconfig-metadata.json
+travisFoldStart "test.unit.rebuildHack"
+
+
+travisFoldStart "test.unit.localChrome"
+  $(npm bin)/karma start ./karma-js.conf.js --single-run --browsers=${KARMA_JS_BROWSERS}
+travisFoldEnd "test.unit.localChrome"
+
+
+travisFoldStart "test.unit.localChrome.router"
+  $(npm bin)/karma start ./packages/router/karma.conf.js --single-run --browsers=${KARMA_JS_BROWSERS}
+travisFoldEnd "test.unit.localChrome.router"
diff --git a/scripts/ci/test-saucelabs.sh b/scripts/ci/test-saucelabs.sh
new file mode 100755
index 000000000000..e141d251e8ee
--- /dev/null
+++ b/scripts/ci/test-saucelabs.sh
@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+travisFoldStart "test.unit.saucelabs"
+  ./scripts/sauce/sauce_connect_block.sh
+  SAUCE_ACCESS_KEY=`echo $SAUCE_ACCESS_KEY | rev`
+  $(npm bin)/karma start ./karma-js.conf.js --single-run --browsers=${KARMA_JS_BROWSERS} --reporters dots,saucelabs
+travisFoldEnd "test.unit.saucelabs"
diff --git a/scripts/ci/test.sh b/scripts/ci/test.sh
new file mode 100755
index 000000000000..201616b6e895
--- /dev/null
+++ b/scripts/ci/test.sh
@@ -0,0 +1,46 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+# If the previous commands in the `script` section of .travis.yaml failed, then abort.
+# The variable is not set in early stages of the build, so we default to 0 there.
+# https://docs.travis-ci.com/user/environment-variables/
+if [[ ${TRAVIS_TEST_RESULT=0} == 1 ]]; then
+  exit 1;
+fi
+
+
+case ${CI_MODE} in
+  js)
+    ${thisDir}/test-js.sh
+    ;;
+  e2e)
+    ${thisDir}/test-e2e.sh
+    ;;
+  saucelabs_required)
+    ${thisDir}/test-saucelabs.sh
+    ;;
+  browserstack_required)
+    ${thisDir}/test-browserstack.sh
+    ;;
+  saucelabs_optional)
+    ${thisDir}/test-saucelabs.sh
+    ;;
+  browserstack_optional)
+    ${thisDir}/test-browserstack.sh
+    ;;
+  aio_tools_test)
+    ${thisDir}/test-aio-tools.sh
+    ;;
+  aio)
+    ${thisDir}/test-aio.sh
+    ;;
+  aio_e2e)
+    ${thisDir}/test-aio-e2e.sh
+    ;;
+esac
diff --git a/scripts/ci/test_dart.sh b/scripts/ci/test_dart.sh
deleted file mode 100755
index f48007a88440..000000000000
--- a/scripts/ci/test_dart.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/bash
-set -e
-
-echo =============================================================================
-# go to project dir
-SCRIPT_DIR=$(dirname $0)
-source $SCRIPT_DIR/env_dart.sh
-cd $SCRIPT_DIR/../..
-
-./node_modules/.bin/gulp test.dart --browsers=$KARMA_BROWSERS
-${SCRIPT_DIR}/test_server_dart.sh
-${SCRIPT_DIR}/test_e2e_dart.sh
diff --git a/scripts/ci/test_e2e_dart.sh b/scripts/ci/test_e2e_dart.sh
deleted file mode 100755
index 009575d1ba78..000000000000
--- a/scripts/ci/test_e2e_dart.sh
+++ /dev/null
@@ -1,26 +0,0 @@
-#!/bin/bash
-set -e
-
-echo =============================================================================
-# go to project dir
-SCRIPT_DIR=$(dirname $0)
-cd $SCRIPT_DIR/../..
-
-./node_modules/.bin/webdriver-manager update
-
-function killServer () {
-  kill $serverPid
-}
-
-./node_modules/.bin/gulp serve.js.dart2js&
-serverPid=$!
-
-./node_modules/.bin/gulp build.css.material&
-
-trap killServer EXIT
-
-# wait for server to come up!
-sleep 10
-
-./node_modules/.bin/protractor protractor-dart2js.conf.js --browsers=${E2E_BROWSERS:-Dartium}
-./node_modules/.bin/protractor protractor-dart2js.conf.js --benchmark --dryrun --browsers=${E2E_BROWSERS:-Dartium}
diff --git a/scripts/ci/test_e2e_js.sh b/scripts/ci/test_e2e_js.sh
deleted file mode 100755
index ba0f3b8a70b7..000000000000
--- a/scripts/ci/test_e2e_js.sh
+++ /dev/null
@@ -1,34 +0,0 @@
-#!/bin/bash
-set -e
-
-echo =============================================================================
-# go to project dir
-SCRIPT_DIR=$(dirname $0)
-cd $SCRIPT_DIR/../..
-
-./node_modules/.bin/webdriver-manager update
-
-function killServer () {
-  kill $serverPid
-}
-
-./node_modules/.bin/gulp serve.js.prod&
-serverPid=$!
-
-./node_modules/.bin/gulp build.css.material&
-
-trap killServer EXIT
-
-# wait for server to come up!
-sleep 10
-
-# Let protractor use default browser unless one is specified.
-OPTIONS="";
-if [[ -n "$E2E_BROWSERS" ]]; then
-  OPTIONS="--browsers=$E2E_BROWSERS";
-fi
-
-./node_modules/.bin/protractor protractor-js.conf.js $OPTIONS
-./node_modules/.bin/protractor protractor-js.conf.js $OPTIONS --benchmark --dryrun
-./node_modules/.bin/protractor dist/js/cjs/benchpress/test/firefox_extension/conf.js
-
diff --git a/scripts/ci/test_js.sh b/scripts/ci/test_js.sh
deleted file mode 100755
index 17433d11dbab..000000000000
--- a/scripts/ci/test_js.sh
+++ /dev/null
@@ -1,18 +0,0 @@
-#!/bin/bash
-set -e
-
-echo =============================================================================
-# go to project dir
-SCRIPT_DIR=$(dirname $0)
-cd $SCRIPT_DIR/../..
-
-# Issue #945 Travis still uses Dartium, and hence needs the env setup.
-# For local tests, when a developer doesn't have Dart, don't source env_dart.sh
-if  ${SCRIPT_DIR}/env_dart.sh 2>&1 > /dev/null ; then
-    source $SCRIPT_DIR/env_dart.sh
-fi
-
-./node_modules/.bin/gulp pre-test-checks
-./node_modules/.bin/gulp test.js --browsers=${KARMA_BROWSERS:-ChromeCanary}
-${SCRIPT_DIR}/test_e2e_js.sh
-./node_modules/.bin/gulp post-test-checks
diff --git a/scripts/ci/test_perf.sh b/scripts/ci/test_perf.sh
deleted file mode 100755
index 5f3c99a0601d..000000000000
--- a/scripts/ci/test_perf.sh
+++ /dev/null
@@ -1,25 +0,0 @@
-#!/bin/bash
-set -e
-
-echo =============================================================================
-# go to project dir
-SCRIPT_DIR=$(dirname $0)
-source $SCRIPT_DIR/env_dart.sh
-cd $SCRIPT_DIR/../..
-
-./node_modules/.bin/webdriver-manager update
-
-function killServer () {
-  kill $serverPid
-}
-
-./node_modules/.bin/gulp serve.js.prod serve.js.dart2js&
-serverPid=$!
-
-trap killServer EXIT
-
-# wait for server to come up!
-sleep 10
-
-./node_modules/.bin/protractor protractor-js.conf.js --browsers=$PERF_BROWSERS --benchmark
-./node_modules/.bin/protractor protractor-dart2js.conf.js --browsers=$PERF_BROWSERS --benchmark
diff --git a/scripts/ci/test_server_dart.sh b/scripts/ci/test_server_dart.sh
deleted file mode 100755
index 6bb7e2e028f3..000000000000
--- a/scripts/ci/test_server_dart.sh
+++ /dev/null
@@ -1,28 +0,0 @@
-#!/bin/bash
-set -e
-
-echo =============================================================================
-# go to project dir
-SCRIPT_DIR=$(dirname $0)
-cd $SCRIPT_DIR/../..
-
-./node_modules/.bin/webdriver-manager update
-./node_modules/.bin/webdriver-manager start&
-webdriverServerPid=$!
-ps -ef | grep webdriver-manager
-
-./node_modules/.bin/gulp serve.js.dart2js&
-serverPid=$!
-
-function killAllServers () {
-  kill $serverPid
-  pkill -P $webdriverServerPid
-}
-
-trap killAllServers EXIT
-
-# wait for server to come up!
-sleep 3
-
-./node_modules/.bin/gulp test.transpiler.unittest
-./node_modules/.bin/gulp test.server.dart --browsers=$KARMA_BROWSERS
diff --git a/scripts/git/commit-msg.js b/scripts/git/commit-msg.js
new file mode 100755
index 000000000000..255c6eff1e70
--- /dev/null
+++ b/scripts/git/commit-msg.js
@@ -0,0 +1,31 @@
+#! /usr/bin/env node
+/**
+ * @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
+ */
+
+// git commit-msg hook to check the commit message against Angular conventions
+// see `/CONTRIBUTING.md` for mode details.
+
+'use strict';
+
+const fs = require('fs');
+const checkMsg = require('../../tools/validate-commit-message');
+const msgFile = process.env['GIT_PARAMS'];
+
+let isValid = true;
+
+if (msgFile) {
+    const commitMsg = fs.readFileSync(msgFile, {encoding: 'utf-8'});
+    const firstLine = commitMsg.split('\n')[0];
+    isValid = checkMsg(firstLine);
+
+    if (!isValid) {
+        console.error('\nCheck CONTRIBUTING.md at the root of the repo for more information.')
+    }
+}
+
+process.exit(isValid ? 0 : 1);
\ No newline at end of file
diff --git a/scripts/github/merge-pr b/scripts/github/merge-pr
new file mode 100755
index 000000000000..a3206c06910f
--- /dev/null
+++ b/scripts/github/merge-pr
@@ -0,0 +1,156 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+BASEDIR=$(dirname "$0")
+BASEDIR=`(cd $BASEDIR; pwd)`
+
+PR_NUMBER=0
+PUSH_UPSTREAM=1
+FORCE=0
+while [[ $# -gt 0 ]]
+do
+  key="$1"
+
+  case $key in
+      --dryrun)
+      PUSH_UPSTREAM=0
+      shift # past argument
+      ;;
+      --force)
+      FORCE=1
+      shift # past argument
+      ;;
+      *)    # unknown option
+      PR_NUMBER="$1" # save it in an array for later
+      shift # past argument
+      ;;
+  esac
+done
+
+if [ "$PR_NUMBER" -eq 0 ]; then
+  echo "Merge github PR into the target branches if status is green"
+  echo
+  echo "$0 PR_NUMBER [--dryrun] [--force]"
+  echo
+  echo    --dryrun   Performs all operations but does not push the merge back to git@github.com:angular/angular.git.
+  echo    --force    Continues even if PR status is not green.
+  exit 0
+fi
+
+if [ -z ${TOKEN:-''} ]; then
+    echo "############################################################"
+    echo "############################################################"
+    echo "WARNING: you should set the TOKEN variable to a github token"
+    echo "############################################################"
+    echo "############################################################"
+    GH_AUTH=""
+else
+    GH_AUTH="Authorization: token $TOKEN"
+fi
+
+PULL_JSON=`curl -H "$GH_AUTH" -s https://api.github.com/repos/angular/angular/pulls/$PR_NUMBER`
+PR_SHA_COUNT=`node $BASEDIR/utils/json_extract.js commits <<< """$PULL_JSON"""`
+STATUS_JSON_URL=`node $BASEDIR/utils/json_extract.js _links.statuses.href <<< """$PULL_JSON"""`
+STATUS=`curl -H "$GH_AUTH" -s $STATUS_JSON_URL | node $BASEDIR/utils/json_extract.js description | cut -d '|' -f1`
+PR_LABELS=`curl -H "$GH_AUTH" -s https://api.github.com/repos/angular/angular/issues/$PR_NUMBER/labels`
+PR_ACTION=`echo "$PR_LABELS" | node $BASEDIR/utils/json_extract.js "name=^PR action:"`
+PR_TARGET=`echo "$PR_LABELS"  | node $BASEDIR/utils/json_extract.js "name=^PR target:"`
+PR_CLA=`echo "$PR_LABELS"  | node $BASEDIR/utils/json_extract.js "name=^cla"`
+MASTER_BRANCH='master'
+
+if [[ ! "$PR_ACTION" =~ "PR action: merge" ]]; then
+  echo The PR is missing 'PR action: merge(-assistance)' label, found: $PR_ACTION
+  exit 1
+fi
+
+if [[ "$PR_CLA" != "cla: yes" ]]; then
+  echo The PR is missing 'cla: Yes' label, found: $PR_CLA
+  exit 1
+fi
+
+if [[ "$STATUS" != "All checks passed!" ]]; then
+  echo PR $PR_NUMBER is failing with: $STATUS
+  if [[ $FORCE == 1 ]]; then
+    echo FORCING: --force flag used to ignore PR status.
+  else
+    echo Exting...
+    exit 1
+  fi
+fi
+
+if [[ $PR_TARGET == "PR target: master & patch" ]]; then
+  MERGE_MASTER=1
+  MERGE_PATCH=1
+elif [[ $PR_TARGET == "PR target: master-only" ]]; then
+  MERGE_MASTER=1
+  MERGE_PATCH=0
+elif [[ $PR_TARGET == "PR target: patch-only" ]]; then
+  MERGE_MASTER=0
+  MERGE_PATCH=1
+else
+  echo "Unknown PR target format: $PR_TARGET"
+  exit 1;
+fi
+
+CURRENT_BRANCH=`git rev-parse --abbrev-ref HEAD`
+PATCH_BRANCH=`git ls-remote --heads  git@github.com:angular/angular.git | grep -E 'refs\/heads\/[0-9]+\.[0-9]+\.x' | cut -d '/' -f3 | sort -r | head -n1`
+
+CHECKOUT_MASTER="git checkout merge_pr_master"
+CHECKOUT_PATCH="git checkout merge_pr_patch"
+RESTORE_BRANCH="git checkout $CURRENT_BRANCH"
+
+FETCH_PR="git fetch git@github.com:angular/angular.git pull/$PR_NUMBER/head:merge_pr heads/$MASTER_BRANCH:merge_pr_master heads/$PATCH_BRANCH:merge_pr_patch -f"
+BASE_PR="git checkout merge_pr~$PR_SHA_COUNT -B merge_pr_base"
+SQUASH_PR="git rebase --autosquash --interactive merge_pr_base merge_pr"
+REWRITE_MESSAGE="git filter-branch -f --msg-filter \"$BASEDIR/utils/github_closes.js $PR_NUMBER\" merge_pr_base..merge_pr"
+PUSH_BRANCHES="git push git@github.com:angular/angular.git merge_pr_master:$MASTER_BRANCH merge_pr_patch:$PATCH_BRANCH"
+CHERRY_PICK_PR="git cherry-pick merge_pr_base..merge_pr"
+
+echo "======================"
+echo "GitHub Merge PR Steps"
+echo "======================"
+echo "   $FETCH_PR"
+echo "   $BASE_PR"
+echo "   $SQUASH_PR"
+echo "   $REWRITE_MESSAGE"
+if [[ $MERGE_MASTER == 1 ]]; then
+  echo "   $CHECKOUT_MASTER && $CHERRY_PICK_PR"
+fi
+if [[ $MERGE_PATCH == 1 ]]; then
+  echo "   $CHECKOUT_PATCH && $CHERRY_PICK_PR"
+fi
+echo "   $PUSH_BRANCHES"
+echo "   $RESTORE_BRANCH"
+echo "----------------------"
+echo ">>> Fetch PR: $FETCH_PR"
+$FETCH_PR
+echo ">>> Mark base: $BASE_PR"
+$BASE_PR
+echo ">>> Autosquash: $SQUASH_PR"
+GIT_EDITOR=echo $SQUASH_PR
+echo ">>> Rewrite message: $REWRITE_MESSAGE"
+# Next line should work, but it errors, hence copy paste the command.
+# $REWRITE_MESSAGE
+git filter-branch -f --msg-filter "$BASEDIR/utils/github_closes.js $PR_NUMBER" merge_pr_base..merge_pr
+if [[ $MERGE_MASTER == 1 ]]; then
+  echo
+  echo ">>> Cherry pick to master: $CHECKOUT_MASTER && $CHERRY_PICK_PR"
+  $CHECKOUT_MASTER
+  $CHERRY_PICK_PR
+fi
+if [[ $MERGE_PATCH == 1 ]]; then
+  echo
+  echo ">>> Cherry pick to path: $CHECKOUT_PATCH && $CHERRY_PICK_PR"
+  $CHECKOUT_PATCH
+  $CHERRY_PICK_PR
+fi
+$RESTORE_BRANCH
+
+if [[ $PUSH_UPSTREAM == 1 ]]; then
+  echo ">>> Push branches to angular repo"
+  $PUSH_BRANCHES
+fi
+echo
+echo ">>>>>> SUCCESS <<<<<< PR#$PR_NUMBER merged."
+
diff --git a/scripts/github/push-pr b/scripts/github/push-pr
new file mode 100755
index 000000000000..a32eceaaae2e
--- /dev/null
+++ b/scripts/github/push-pr
@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+const shell = require('shelljs');
+shell.config.fatal = true;
+const util = require('./utils/git_util');
+
+if (require.main === module) {
+  main(process.argv.splice(2)).then(
+    (v) => process.exitCode, 
+    (e) => console.error(process.exitCode = 1, e) 
+  );
+}
+
+async function main(args) {
+  let forceWithLease = '';
+  let prNumber = 0;
+  let printHelp = false;
+
+  args.forEach((arg) => {
+    if (prNumber == 0 && arg > 0) {
+      prNumber = arg;
+    } else if (arg == '--help') {
+      printHelp = true;
+    } else if (arg == '--force-with-lease') {
+      forceWithLease = ' --force-with-lease';
+    } else {
+      shell.echo('Unexpected argument: ', arg);
+    }
+  });
+
+  if (!prNumber) {
+    const branch = util.getCurrentBranch();
+    const maybePr = branch.split('/')[1];
+    if (maybePr > 0) {
+      shell.echo(`PR number not specified. Defaulting to #${maybePr}.`);
+      prNumber = maybePr;
+    }
+  }
+
+  if (!prNumber || printHelp) {
+    shell.echo(`Push the current HEAD into an existing pull request.`);
+    shell.echo(``);
+    shell.echo(`${process.argv[1]} [PR_NUMBER] [--force-with-lease]`);
+    shell.echo(``);
+    shell.echo(`    --force-with-lease    Continues even \if change can\'t be fast-forwarded.`);
+    shell.echo(`    [PR_NUMBER]           If not present the script guesses the PR from the branch name.`);
+    return 1;
+  }
+
+  const prInfo = await util.githubPrInfo(prNumber);
+  const prPushCmd = `git push${forceWithLease} ${prInfo.repository.gitUrl} HEAD:${prInfo.branch}`;
+  shell.echo(`>>> ${prPushCmd}`);
+  shell.exec(prPushCmd);
+
+  return 0;
+ }
diff --git a/scripts/github/push-upstream b/scripts/github/push-upstream
new file mode 100755
index 000000000000..a80280885666
--- /dev/null
+++ b/scripts/github/push-upstream
@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+PATCH_BRANCH=`git branch --list '*.x' | cut -d ' ' -f2- | sort -r | head -n1`
+# Trim whitespace
+PATCH_BRANCH=`echo $PATCH_BRANCH`
+
+PUSH_BRANCHES="git push git@github.com:angular/angular.git master:master $PATCH_BRANCH:$PATCH_BRANCH"
+
+echo $PUSH_BRANCHES
+$PUSH_BRANCHES
diff --git a/scripts/github/rebase-pr b/scripts/github/rebase-pr
new file mode 100755
index 000000000000..b87dbe815fee
--- /dev/null
+++ b/scripts/github/rebase-pr
@@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+BASEDIR=$(dirname "$0")
+
+if [ $# -eq 0 ]; then
+    echo "Rebase github PR onto a branch"
+    echo
+    echo "$0 branch_to_rebase_on PR_NUMBER"
+    echo
+    exit 0
+fi
+
+REBASE_ON="$1"
+PR_NO="$2"
+
+
+HEAD_LABEL=`curl -s https://api.github.com/repos/angular/angular/pulls/$PR_NO | node $BASEDIR/utils/json_extract.js head.label`
+echo $HEAD_LABEL
+IFS=':' read -r -a array <<< "$HEAD_LABEL"
+USER="${array[0]}"
+USER_GIT_URL="git@github.com:$USER/angular.git"
+BRANCH="${array[1]}"
+OLD_BRANCH=`git branch | grep \* | cut -d ' ' -f2`
+
+echo =====================================================
+echo Rebasing $USER_GIT_URL branch $BRANCH onto $REBASE_ON
+echo =====================================================
+
+git fetch $USER_GIT_URL $BRANCH
+git co FETCH_HEAD
+PUSH_CMD="git push $USER_GIT_URL HEAD:$BRANCH -f";
+RESTORE_CMD="git co $OLD_BRANCH"
+git rebase upstream/master
+if [ $? -eq 0 ]; then
+    $PUSH_CMD
+    $RESTORE_CMD
+else
+    echo ===========================
+    echo Git rebase failed. RECOVER WITH:
+    echo "       $PUSH_CMD"
+    echo "       $RESTORE_CMD"
+    echo ===========================
+fi
diff --git a/scripts/github/review-pr b/scripts/github/review-pr
new file mode 100755
index 000000000000..d8883d038128
--- /dev/null
+++ b/scripts/github/review-pr
@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+const shell = require('shelljs');
+shell.config.fatal = true;
+const util = require('./utils/git_util');
+
+if (require.main === module) {
+  main(process.argv.splice(2)).then(
+    (v) => process.exitCode = v, 
+    (e) => console.error(process.exitCode = 1, e)
+  );
+}
+
+async function main(args) {
+  let prNumber = 0;
+
+  args.forEach((arg) => {
+    if (prNumber == 0 && arg > 0) {
+        prNumber = arg;
+    } else {
+        shell.echo('Unexpected argument: ', arg);
+    }
+  });
+
+  if (prNumber === 0) {
+    shell.echo('Bring github pull request onto your local repo for review and edit');
+    shell.echo('');
+    shell.echo(`${process.argv[1]} PR_NUMBER`);
+    shell.echo('');
+    return 1;
+  }
+
+  if (util.gitHasLocalModifications()) {
+    shell.echo('Local modification detected. exiting...');
+    return 1;
+  }
+
+  let prShaCount = (await util.githubPrInfo(prNumber)).commits;
+
+  shell.exec(`git checkout master`);
+  if (util.execNoFatal(`git rev-parse --verify --quiet pr/${prNumber}`).code == 0) {
+    shell.exec(`git branch -D pr/${prNumber}`);
+  }
+
+  shell.echo(`Fetching pull request #${prNumber} with ${prNumber} SHA(s) into branch range: pr/${prNumber}_base..pr/${prNumber}_top`);
+  shell.exec(`git fetch -f git@github.com:angular/angular.git pull/${prNumber}/head:pr/${prNumber}_top`);
+
+  shell.exec(`git branch -f pr/${prNumber}_base pr/${prNumber}_top~${prShaCount}`);
+
+  shell.echo(`======================================================================================`);
+  shell.exec(`git log --oneline --color pr/${prNumber}_base..pr/${prNumber}_top`);
+  shell.echo(`======================================================================================`);
+
+  // Reset the HEAD so that we can see changed files for review
+  shell.exec(`git checkout --force -b pr/${prNumber} pr/${prNumber}_top`);
+  shell.exec(`git reset pr/${prNumber}_base`);
+  shell.exec(`git status`);
+
+  return 0;
+}
diff --git a/scripts/github/utils/git_util.js b/scripts/github/utils/git_util.js
new file mode 100644
index 000000000000..35124df18e48
--- /dev/null
+++ b/scripts/github/utils/git_util.js
@@ -0,0 +1,95 @@
+/**
+ * @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 https = require('https');
+const shell = require('shelljs');
+
+function httpGet(server, path, headers) {
+  return new Promise((resolve, reject) => {
+    const options = {
+      hostname: server,
+      port: 443,
+      path: path,
+      method: 'GET',
+      headers: {'User-Agent': 'script', ...headers}
+    };
+    https
+        .get(
+            options,
+            (res) => {
+              let json = '';
+              res.on('data', (chunk) => json += chunk.toString());
+              res.on('end', () => resolve(json));
+            })
+        .on('error', (e) => reject(e));
+  });
+};
+
+let warnNoToken = true;
+
+async function githubGet(path) {
+  const token = process.env['TOKEN'];
+  const headers = {};
+  if (token) {
+    headers.Authorization = 'token ' + token;
+  } else if (warnNoToken) {
+    warnNoToken = false;
+    console.warn('############################################################');
+    console.warn('############################################################');
+    console.warn('WARNING: you should set the TOKEN variable to a github token');
+    console.warn('############################################################');
+    console.warn('############################################################');
+  }
+
+  return JSON.parse(await httpGet('api.github.com', '/repos/angular/angular/' + path, headers));
+};
+
+async function githubPrInfo(prNumber) {
+  const pr = (await githubGet('pulls/' + prNumber));
+  const label = pr.head.label.split(':');
+  const user = label[0];
+  const branch = label[1];
+  return {
+    commits: pr.commits,
+    repository: {
+      user: user,
+      gitUrl: `git@github.com:${user}/angular.git`,
+    },
+    branch: branch
+  };
+};  // trailing ; so that clang-format is not confused on async function
+
+function gitHasLocalModifications() {
+  return execNoFatal('git diff-index --quiet HEAD --').code != 0;
+}
+
+function execNoFatal(cmd, options) {
+  const fatal = shell.config.fatal;
+  try {
+    shell.config.fatal = false;
+    return shell.exec(cmd, options);
+  } finally {
+    shell.config.fatal = fatal;
+  }
+}
+
+function getCurrentBranch() {
+  return shell.exec('git branch', {silent: true})
+      .stdout.toString()
+      .split('\n')                      // Break into lines
+      .map((v) => v.trim())             // trim
+      .filter((b) => b[0] == '*')       // select current branch
+      .map((b) => b.split(' ')[1])[0];  // remove leading `*`
+}
+
+exports.httpGet = httpGet;
+exports.githubGet = githubGet;
+exports.githubPrInfo = githubPrInfo;
+exports.gitHasLocalModifications = gitHasLocalModifications;
+exports.execNoFatal = execNoFatal;
+exports.getCurrentBranch = getCurrentBranch;
\ No newline at end of file
diff --git a/scripts/github/utils/github_closes.js b/scripts/github/utils/github_closes.js
new file mode 100755
index 000000000000..f6015418261b
--- /dev/null
+++ b/scripts/github/utils/github_closes.js
@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+var msg = '';
+
+if (require.main === module) {
+  process.stdin.setEncoding('utf8');
+
+  process.stdin.on('readable', () => {
+    const chunk = process.stdin.read();
+    if (chunk !== null) {
+      msg += chunk;
+    }
+  });
+
+  process.stdin.on('end', () => {
+    var argv = process.argv.slice(2);
+    console.log(rewriteMsg(msg, argv[0]));
+  });
+}
+
+function rewriteMsg(msg, prNo) {
+  var lines = msg.split(/\n/);
+  lines[0] += ' (#' + prNo +')';
+  lines.push('PR Close #' + prNo);
+  return lines.join('\n');
+}
+
+exports.rewriteMsg = rewriteMsg;
\ No newline at end of file
diff --git a/scripts/github/utils/json_extract.js b/scripts/github/utils/json_extract.js
new file mode 100644
index 000000000000..4de803a18792
--- /dev/null
+++ b/scripts/github/utils/json_extract.js
@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+
+var json = '';
+
+if (require.main === module) {
+  process.stdin.setEncoding('utf8');
+
+  process.stdin.on('readable', () => {
+    const chunk = process.stdin.read();
+    if (chunk !== null) {
+      json += chunk;
+    }
+  });
+
+  process.stdin.on('end', () => {
+    var obj = JSON.parse(json);
+    var argv = process.argv.slice(2);
+    extractPaths(obj, argv).forEach(function(line) {
+      console.log(line);
+    })
+  });
+}
+
+function extractPaths(obj, paths) {
+  var lines = [];
+  paths.forEach(function(exp) {
+    var objs = obj instanceof Array ? [].concat(obj) : [obj];
+    exp.split('.').forEach(function(name) {
+      for(var i = 0; i < objs.length; i++) {
+        var o = objs[i];
+        if (o instanceof Array) {
+          // Expand and do over
+          objs = objs.slice(0, i).concat(o).concat(objs.slice(i+1, objs.length));
+          i--;
+        } else {
+          name.split("=").forEach(function(name, index) {
+            if (index == 0) {
+              objs[i] = o = o[name];
+            } else if (name.charAt(0) == '^') {
+              if (o.indexOf(name.substr(1)) !== 0) {
+                objs.splice(i, 1);
+                i--;
+              }
+            }
+          });
+        }
+      }
+    });
+    lines.push(objs.join("|"));
+  });
+  return lines;
+}
+
+exports.extractPaths = extractPaths;
\ No newline at end of file
diff --git a/scripts/github/utils/json_extract_test.js b/scripts/github/utils/json_extract_test.js
new file mode 100644
index 000000000000..fb00fabd796e
--- /dev/null
+++ b/scripts/github/utils/json_extract_test.js
@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+
+var assert = require("assert");
+var extractPaths = require('./json_extract').extractPaths;
+
+var SAMPLE_LABELS = [
+  {
+    "id": 149476251,
+    "url": "https://api.github.com/repos/angular/angular/labels/cla:%20yes",
+    "name": "cla: yes",
+    "color": "009800",
+    "default": false
+  },
+  {
+    "id": 533874619,
+    "url": "https://api.github.com/repos/angular/angular/labels/comp:%20aio",
+    "name": "comp: aio",
+    "color": "c7def8",
+    "default": false
+  },
+  {
+    "id": 133556520,
+    "url": "https://api.github.com/repos/angular/angular/labels/PR%20action:%20merge",
+    "name": "PR action: merge",
+    "color": "99ff66",
+    "default": false
+  },
+  {
+    "id": 655699838,
+    "url": "https://api.github.com/repos/angular/angular/labels/PR%20target:%20master%20&%20patch",
+    "name": "PR target: master & patch",
+    "color": "5319e7",
+    "default": false
+  }
+];
+
+assert.deepEqual(extractPaths({head: {label: 'value1'}}, ['head.label']), ['value1']);
+assert.deepEqual(extractPaths(SAMPLE_LABELS, ['name']), ['cla: yes|comp: aio|PR action: merge|PR target: master & patch']);
+assert.deepEqual(extractPaths(SAMPLE_LABELS, ['name=^PR target:']), ['PR target: master & patch']);
diff --git a/scripts/github/utils/labels.json b/scripts/github/utils/labels.json
new file mode 100644
index 000000000000..7a6384d11e09
--- /dev/null
+++ b/scripts/github/utils/labels.json
@@ -0,0 +1,30 @@
+[
+  {
+    "id": 149476251,
+    "url": "https://api.github.com/repos/angular/angular/labels/cla:%20yes",
+    "name": "cla: yes",
+    "color": "009800",
+    "default": false
+  },
+  {
+    "id": 533874619,
+    "url": "https://api.github.com/repos/angular/angular/labels/comp:%20aio",
+    "name": "comp: aio",
+    "color": "c7def8",
+    "default": false
+  },
+  {
+    "id": 133556520,
+    "url": "https://api.github.com/repos/angular/angular/labels/PR%20action:%20merge",
+    "name": "PR action: merge",
+    "color": "99ff66",
+    "default": false
+  },
+  {
+    "id": 655699838,
+    "url": "https://api.github.com/repos/angular/angular/labels/PR%20target:%20master%20&%20patch",
+    "name": "PR target: master & patch",
+    "color": "5319e7",
+    "default": false
+  }
+]
diff --git a/scripts/github/utils/pulls.json b/scripts/github/utils/pulls.json
new file mode 100644
index 000000000000..6233e4c680a8
--- /dev/null
+++ b/scripts/github/utils/pulls.json
@@ -0,0 +1,314 @@
+{
+  "url": "https://api.github.com/repos/angular/angular/pulls/18730",
+  "id": 136020267,
+  "html_url": "https://github.com/angular/angular/pull/18730",
+  "diff_url": "https://github.com/angular/angular/pull/18730.diff",
+  "patch_url": "https://github.com/angular/angular/pull/18730.patch",
+  "issue_url": "https://api.github.com/repos/angular/angular/issues/18730",
+  "number": 18730,
+  "state": "open",
+  "locked": false,
+  "title": "docs(aio): typo in metadata guide",
+  "user": {
+    "login": "cexbrayat",
+    "id": 411874,
+    "avatar_url": "https://avatars3.githubusercontent.com/u/411874?v=4",
+    "gravatar_id": "",
+    "url": "https://api.github.com/users/cexbrayat",
+    "html_url": "https://github.com/cexbrayat",
+    "followers_url": "https://api.github.com/users/cexbrayat/followers",
+    "following_url": "https://api.github.com/users/cexbrayat/following{/other_user}",
+    "gists_url": "https://api.github.com/users/cexbrayat/gists{/gist_id}",
+    "starred_url": "https://api.github.com/users/cexbrayat/starred{/owner}{/repo}",
+    "subscriptions_url": "https://api.github.com/users/cexbrayat/subscriptions",
+    "organizations_url": "https://api.github.com/users/cexbrayat/orgs",
+    "repos_url": "https://api.github.com/users/cexbrayat/repos",
+    "events_url": "https://api.github.com/users/cexbrayat/events{/privacy}",
+    "received_events_url": "https://api.github.com/users/cexbrayat/received_events",
+    "type": "User",
+    "site_admin": false
+  },
+  "body": "## PR Type\r\n\r\nSimple typo fix in aio guide\r\n\r\n<!-- Please check the one that applies to this PR using \"x\". -->\r\n```\r\n[ ] Bugfix\r\n[ ] Feature\r\n[ ] Code style update (formatting, local variables)\r\n[ ] Refactoring (no functional changes, no api changes)\r\n[ ] Build related changes\r\n[ ] CI related changes\r\n[x] Documentation content changes\r\n[ ] angular.io application / infrastructure changes\r\n[ ] Other... Please describe:\r\n```",
+  "created_at": "2017-08-16T13:11:04Z",
+  "updated_at": "2017-08-17T13:59:21Z",
+  "closed_at": null,
+  "merged_at": null,
+  "merge_commit_sha": "35f8a4fdd7b37d41d8ed71c0f9978ed3e751da43",
+  "assignee": null,
+  "assignees": [
+
+  ],
+  "requested_reviewers": [
+
+  ],
+  "milestone": null,
+  "commits_url": "https://api.github.com/repos/angular/angular/pulls/18730/commits",
+  "review_comments_url": "https://api.github.com/repos/angular/angular/pulls/18730/comments",
+  "review_comment_url": "https://api.github.com/repos/angular/angular/pulls/comments{/number}",
+  "comments_url": "https://api.github.com/repos/angular/angular/issues/18730/comments",
+  "statuses_url": "https://api.github.com/repos/angular/angular/statuses/d59a5eec6cc60e301033300957f0c959b8056650",
+  "head": {
+    "label": "cexbrayat:docs/metadata-guide",
+    "ref": "docs/metadata-guide",
+    "sha": "d59a5eec6cc60e301033300957f0c959b8056650",
+    "user": {
+      "login": "cexbrayat",
+      "id": 411874,
+      "avatar_url": "https://avatars3.githubusercontent.com/u/411874?v=4",
+      "gravatar_id": "",
+      "url": "https://api.github.com/users/cexbrayat",
+      "html_url": "https://github.com/cexbrayat",
+      "followers_url": "https://api.github.com/users/cexbrayat/followers",
+      "following_url": "https://api.github.com/users/cexbrayat/following{/other_user}",
+      "gists_url": "https://api.github.com/users/cexbrayat/gists{/gist_id}",
+      "starred_url": "https://api.github.com/users/cexbrayat/starred{/owner}{/repo}",
+      "subscriptions_url": "https://api.github.com/users/cexbrayat/subscriptions",
+      "organizations_url": "https://api.github.com/users/cexbrayat/orgs",
+      "repos_url": "https://api.github.com/users/cexbrayat/repos",
+      "events_url": "https://api.github.com/users/cexbrayat/events{/privacy}",
+      "received_events_url": "https://api.github.com/users/cexbrayat/received_events",
+      "type": "User",
+      "site_admin": false
+    },
+    "repo": {
+      "id": 25485740,
+      "name": "angular",
+      "full_name": "cexbrayat/angular",
+      "owner": {
+        "login": "cexbrayat",
+        "id": 411874,
+        "avatar_url": "https://avatars3.githubusercontent.com/u/411874?v=4",
+        "gravatar_id": "",
+        "url": "https://api.github.com/users/cexbrayat",
+        "html_url": "https://github.com/cexbrayat",
+        "followers_url": "https://api.github.com/users/cexbrayat/followers",
+        "following_url": "https://api.github.com/users/cexbrayat/following{/other_user}",
+        "gists_url": "https://api.github.com/users/cexbrayat/gists{/gist_id}",
+        "starred_url": "https://api.github.com/users/cexbrayat/starred{/owner}{/repo}",
+        "subscriptions_url": "https://api.github.com/users/cexbrayat/subscriptions",
+        "organizations_url": "https://api.github.com/users/cexbrayat/orgs",
+        "repos_url": "https://api.github.com/users/cexbrayat/repos",
+        "events_url": "https://api.github.com/users/cexbrayat/events{/privacy}",
+        "received_events_url": "https://api.github.com/users/cexbrayat/received_events",
+        "type": "User",
+        "site_admin": false
+      },
+      "private": false,
+      "html_url": "https://github.com/cexbrayat/angular",
+      "description": null,
+      "fork": true,
+      "url": "https://api.github.com/repos/cexbrayat/angular",
+      "forks_url": "https://api.github.com/repos/cexbrayat/angular/forks",
+      "keys_url": "https://api.github.com/repos/cexbrayat/angular/keys{/key_id}",
+      "collaborators_url": "https://api.github.com/repos/cexbrayat/angular/collaborators{/collaborator}",
+      "teams_url": "https://api.github.com/repos/cexbrayat/angular/teams",
+      "hooks_url": "https://api.github.com/repos/cexbrayat/angular/hooks",
+      "issue_events_url": "https://api.github.com/repos/cexbrayat/angular/issues/events{/number}",
+      "events_url": "https://api.github.com/repos/cexbrayat/angular/events",
+      "assignees_url": "https://api.github.com/repos/cexbrayat/angular/assignees{/user}",
+      "branches_url": "https://api.github.com/repos/cexbrayat/angular/branches{/branch}",
+      "tags_url": "https://api.github.com/repos/cexbrayat/angular/tags",
+      "blobs_url": "https://api.github.com/repos/cexbrayat/angular/git/blobs{/sha}",
+      "git_tags_url": "https://api.github.com/repos/cexbrayat/angular/git/tags{/sha}",
+      "git_refs_url": "https://api.github.com/repos/cexbrayat/angular/git/refs{/sha}",
+      "trees_url": "https://api.github.com/repos/cexbrayat/angular/git/trees{/sha}",
+      "statuses_url": "https://api.github.com/repos/cexbrayat/angular/statuses/{sha}",
+      "languages_url": "https://api.github.com/repos/cexbrayat/angular/languages",
+      "stargazers_url": "https://api.github.com/repos/cexbrayat/angular/stargazers",
+      "contributors_url": "https://api.github.com/repos/cexbrayat/angular/contributors",
+      "subscribers_url": "https://api.github.com/repos/cexbrayat/angular/subscribers",
+      "subscription_url": "https://api.github.com/repos/cexbrayat/angular/subscription",
+      "commits_url": "https://api.github.com/repos/cexbrayat/angular/commits{/sha}",
+      "git_commits_url": "https://api.github.com/repos/cexbrayat/angular/git/commits{/sha}",
+      "comments_url": "https://api.github.com/repos/cexbrayat/angular/comments{/number}",
+      "issue_comment_url": "https://api.github.com/repos/cexbrayat/angular/issues/comments{/number}",
+      "contents_url": "https://api.github.com/repos/cexbrayat/angular/contents/{+path}",
+      "compare_url": "https://api.github.com/repos/cexbrayat/angular/compare/{base}...{head}",
+      "merges_url": "https://api.github.com/repos/cexbrayat/angular/merges",
+      "archive_url": "https://api.github.com/repos/cexbrayat/angular/{archive_format}{/ref}",
+      "downloads_url": "https://api.github.com/repos/cexbrayat/angular/downloads",
+      "issues_url": "https://api.github.com/repos/cexbrayat/angular/issues{/number}",
+      "pulls_url": "https://api.github.com/repos/cexbrayat/angular/pulls{/number}",
+      "milestones_url": "https://api.github.com/repos/cexbrayat/angular/milestones{/number}",
+      "notifications_url": "https://api.github.com/repos/cexbrayat/angular/notifications{?since,all,participating}",
+      "labels_url": "https://api.github.com/repos/cexbrayat/angular/labels{/name}",
+      "releases_url": "https://api.github.com/repos/cexbrayat/angular/releases{/id}",
+      "deployments_url": "https://api.github.com/repos/cexbrayat/angular/deployments",
+      "created_at": "2014-10-20T20:42:42Z",
+      "updated_at": "2017-07-03T09:58:51Z",
+      "pushed_at": "2017-08-16T13:20:57Z",
+      "git_url": "git://github.com/cexbrayat/angular.git",
+      "ssh_url": "git@github.com:cexbrayat/angular.git",
+      "clone_url": "https://github.com/cexbrayat/angular.git",
+      "svn_url": "https://github.com/cexbrayat/angular",
+      "homepage": null,
+      "size": 62846,
+      "stargazers_count": 1,
+      "watchers_count": 1,
+      "language": "TypeScript",
+      "has_issues": false,
+      "has_projects": true,
+      "has_downloads": true,
+      "has_wiki": true,
+      "has_pages": false,
+      "forks_count": 0,
+      "mirror_url": null,
+      "open_issues_count": 0,
+      "forks": 0,
+      "open_issues": 0,
+      "watchers": 1,
+      "default_branch": "master"
+    }
+  },
+  "base": {
+    "label": "angular:master",
+    "ref": "master",
+    "sha": "32ff21c16bf1833d2da9f8e2ec8536f7a13f92de",
+    "user": {
+      "login": "angular",
+      "id": 139426,
+      "avatar_url": "https://avatars3.githubusercontent.com/u/139426?v=4",
+      "gravatar_id": "",
+      "url": "https://api.github.com/users/angular",
+      "html_url": "https://github.com/angular",
+      "followers_url": "https://api.github.com/users/angular/followers",
+      "following_url": "https://api.github.com/users/angular/following{/other_user}",
+      "gists_url": "https://api.github.com/users/angular/gists{/gist_id}",
+      "starred_url": "https://api.github.com/users/angular/starred{/owner}{/repo}",
+      "subscriptions_url": "https://api.github.com/users/angular/subscriptions",
+      "organizations_url": "https://api.github.com/users/angular/orgs",
+      "repos_url": "https://api.github.com/users/angular/repos",
+      "events_url": "https://api.github.com/users/angular/events{/privacy}",
+      "received_events_url": "https://api.github.com/users/angular/received_events",
+      "type": "Organization",
+      "site_admin": false
+    },
+    "repo": {
+      "id": 24195339,
+      "name": "angular",
+      "full_name": "angular/angular",
+      "owner": {
+        "login": "angular",
+        "id": 139426,
+        "avatar_url": "https://avatars3.githubusercontent.com/u/139426?v=4",
+        "gravatar_id": "",
+        "url": "https://api.github.com/users/angular",
+        "html_url": "https://github.com/angular",
+        "followers_url": "https://api.github.com/users/angular/followers",
+        "following_url": "https://api.github.com/users/angular/following{/other_user}",
+        "gists_url": "https://api.github.com/users/angular/gists{/gist_id}",
+        "starred_url": "https://api.github.com/users/angular/starred{/owner}{/repo}",
+        "subscriptions_url": "https://api.github.com/users/angular/subscriptions",
+        "organizations_url": "https://api.github.com/users/angular/orgs",
+        "repos_url": "https://api.github.com/users/angular/repos",
+        "events_url": "https://api.github.com/users/angular/events{/privacy}",
+        "received_events_url": "https://api.github.com/users/angular/received_events",
+        "type": "Organization",
+        "site_admin": false
+      },
+      "private": false,
+      "html_url": "https://github.com/angular/angular",
+      "description": "One framework. Mobile & desktop.",
+      "fork": false,
+      "url": "https://api.github.com/repos/angular/angular",
+      "forks_url": "https://api.github.com/repos/angular/angular/forks",
+      "keys_url": "https://api.github.com/repos/angular/angular/keys{/key_id}",
+      "collaborators_url": "https://api.github.com/repos/angular/angular/collaborators{/collaborator}",
+      "teams_url": "https://api.github.com/repos/angular/angular/teams",
+      "hooks_url": "https://api.github.com/repos/angular/angular/hooks",
+      "issue_events_url": "https://api.github.com/repos/angular/angular/issues/events{/number}",
+      "events_url": "https://api.github.com/repos/angular/angular/events",
+      "assignees_url": "https://api.github.com/repos/angular/angular/assignees{/user}",
+      "branches_url": "https://api.github.com/repos/angular/angular/branches{/branch}",
+      "tags_url": "https://api.github.com/repos/angular/angular/tags",
+      "blobs_url": "https://api.github.com/repos/angular/angular/git/blobs{/sha}",
+      "git_tags_url": "https://api.github.com/repos/angular/angular/git/tags{/sha}",
+      "git_refs_url": "https://api.github.com/repos/angular/angular/git/refs{/sha}",
+      "trees_url": "https://api.github.com/repos/angular/angular/git/trees{/sha}",
+      "statuses_url": "https://api.github.com/repos/angular/angular/statuses/{sha}",
+      "languages_url": "https://api.github.com/repos/angular/angular/languages",
+      "stargazers_url": "https://api.github.com/repos/angular/angular/stargazers",
+      "contributors_url": "https://api.github.com/repos/angular/angular/contributors",
+      "subscribers_url": "https://api.github.com/repos/angular/angular/subscribers",
+      "subscription_url": "https://api.github.com/repos/angular/angular/subscription",
+      "commits_url": "https://api.github.com/repos/angular/angular/commits{/sha}",
+      "git_commits_url": "https://api.github.com/repos/angular/angular/git/commits{/sha}",
+      "comments_url": "https://api.github.com/repos/angular/angular/comments{/number}",
+      "issue_comment_url": "https://api.github.com/repos/angular/angular/issues/comments{/number}",
+      "contents_url": "https://api.github.com/repos/angular/angular/contents/{+path}",
+      "compare_url": "https://api.github.com/repos/angular/angular/compare/{base}...{head}",
+      "merges_url": "https://api.github.com/repos/angular/angular/merges",
+      "archive_url": "https://api.github.com/repos/angular/angular/{archive_format}{/ref}",
+      "downloads_url": "https://api.github.com/repos/angular/angular/downloads",
+      "issues_url": "https://api.github.com/repos/angular/angular/issues{/number}",
+      "pulls_url": "https://api.github.com/repos/angular/angular/pulls{/number}",
+      "milestones_url": "https://api.github.com/repos/angular/angular/milestones{/number}",
+      "notifications_url": "https://api.github.com/repos/angular/angular/notifications{?since,all,participating}",
+      "labels_url": "https://api.github.com/repos/angular/angular/labels{/name}",
+      "releases_url": "https://api.github.com/repos/angular/angular/releases{/id}",
+      "deployments_url": "https://api.github.com/repos/angular/angular/deployments",
+      "created_at": "2014-09-18T16:12:01Z",
+      "updated_at": "2017-08-17T16:52:26Z",
+      "pushed_at": "2017-08-17T16:44:18Z",
+      "git_url": "git://github.com/angular/angular.git",
+      "ssh_url": "git@github.com:angular/angular.git",
+      "clone_url": "https://github.com/angular/angular.git",
+      "svn_url": "https://github.com/angular/angular",
+      "homepage": "https://angular.io",
+      "size": 64855,
+      "stargazers_count": 26993,
+      "watchers_count": 26993,
+      "language": "TypeScript",
+      "has_issues": true,
+      "has_projects": true,
+      "has_downloads": true,
+      "has_wiki": false,
+      "has_pages": false,
+      "forks_count": 6796,
+      "mirror_url": null,
+      "open_issues_count": 1860,
+      "forks": 6796,
+      "open_issues": 1860,
+      "watchers": 26993,
+      "default_branch": "master"
+    }
+  },
+  "_links": {
+    "self": {
+      "href": "https://api.github.com/repos/angular/angular/pulls/18730"
+    },
+    "html": {
+      "href": "https://github.com/angular/angular/pull/18730"
+    },
+    "issue": {
+      "href": "https://api.github.com/repos/angular/angular/issues/18730"
+    },
+    "comments": {
+      "href": "https://api.github.com/repos/angular/angular/issues/18730/comments"
+    },
+    "review_comments": {
+      "href": "https://api.github.com/repos/angular/angular/pulls/18730/comments"
+    },
+    "review_comment": {
+      "href": "https://api.github.com/repos/angular/angular/pulls/comments{/number}"
+    },
+    "commits": {
+      "href": "https://api.github.com/repos/angular/angular/pulls/18730/commits"
+    },
+    "statuses": {
+      "href": "https://api.github.com/repos/angular/angular/statuses/d59a5eec6cc60e301033300957f0c959b8056650"
+    }
+  },
+  "merged": false,
+  "mergeable": true,
+  "rebaseable": true,
+  "mergeable_state": "clean",
+  "merged_by": null,
+  "comments": 0,
+  "review_comments": 2,
+  "maintainer_can_modify": true,
+  "commits": 1,
+  "additions": 1,
+  "deletions": 1,
+  "changed_files": 1
+}
diff --git a/scripts/publish/changelog.js b/scripts/publish/changelog.js
deleted file mode 100755
index 98ccafa89a3c..000000000000
--- a/scripts/publish/changelog.js
+++ /dev/null
@@ -1,23 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-var fs = require('fs');
-var cl = require('conventional-changelog');
-
-var changelogFile = 'CHANGELOG.md';
-
-var config = {
-  file: changelogFile,
-  repository: 'https://github.com/angular/angular',
-  version: require('../../package.json').version
-};
-
-cl(config, function(err, log) {
-  if (err) {
-    console.error('Failed to generate changelog: ' + err);
-    return;
-  }
-
-  fs.writeFileSync(changelogFile, log);
-});
diff --git a/scripts/publish/npm_publish.sh b/scripts/publish/npm_publish.sh
deleted file mode 100755
index d8fb2bbe1f61..000000000000
--- a/scripts/publish/npm_publish.sh
+++ /dev/null
@@ -1,55 +0,0 @@
-#!/bin/bash
-set -ex
-shopt -s extglob
-
-ROOT_DIR=$(cd $(dirname $0)/../..; pwd)
-cd $ROOT_DIR
-
-gulp clean
-gulp build.js.prod build.js.dev build.js.cjs benchpress.bundle
-
-NPM_DIR=$ROOT_DIR/dist/npm
-rm -fr $NPM_DIR
-FILES='!(test|e2e_test|docs)'
-
-function publishRttsAssert {
-  NAME='rtts_assert'
-  PUBLISH_DIR=$NPM_DIR/$NAME
-  rm -fr $PUBLISH_DIR
-  mkdir -p $PUBLISH_DIR
-
-  mkdir -p $PUBLISH_DIR/es6
-  cp -r $ROOT_DIR/dist/js/prod/es6/$NAME/$FILES $PUBLISH_DIR/es6
-
-  cp -r $ROOT_DIR/dist/js/cjs/$NAME/$FILES $PUBLISH_DIR
-  npm publish $PUBLISH_DIR
-}
-
-function publishModule {
-  NAME=$1
-  PUBLISH_DIR=$NPM_DIR/$NAME
-  rm -fr $PUBLISH_DIR
-  mkdir -p $PUBLISH_DIR
-
-  mkdir -p $PUBLISH_DIR/es6/dev
-  cp -r $ROOT_DIR/dist/js/dev/es6/$NAME/$FILES $PUBLISH_DIR/es6/dev
-  mkdir -p $PUBLISH_DIR/es6/prod
-  cp -r $ROOT_DIR/dist/js/prod/es6/$NAME/$FILES $PUBLISH_DIR/es6/prod
-  mkdir -p $PUBLISH_DIR/ts
-  cp -r $ROOT_DIR/modules/$NAME/$FILES $PUBLISH_DIR/ts
-
-  if [ $NAME = "benchpress" ]; then
-    cp -r $ROOT_DIR/dist/build/benchpress_bundle/$FILES $PUBLISH_DIR
-    cp -r $ROOT_DIR/dist/js/cjs/benchpress/README.md $PUBLISH_DIR
-    cp -r $ROOT_DIR/dist/js/cjs/benchpress/LICENSE $PUBLISH_DIR
-    cp -r $ROOT_DIR/dist/js/cjs/benchpress/docs $PUBLISH_DIR
-  else
-    cp -r $ROOT_DIR/dist/js/cjs/$NAME/$FILES $PUBLISH_DIR
-  fi
-
-  npm publish $PUBLISH_DIR
-}
-
-publishRttsAssert
-publishModule angular2
-publishModule benchpress
diff --git a/scripts/publish/pub_publish.sh b/scripts/publish/pub_publish.sh
deleted file mode 100755
index d6968d2e30fd..000000000000
--- a/scripts/publish/pub_publish.sh
+++ /dev/null
@@ -1,44 +0,0 @@
-#!/bin/bash
-
-# Publishes Angular 2 packages to pub.
-
-set -ex
-shopt -s extglob
-
-DRY_RUN=false
-if [[ $1 == '--dry_run' ]]; then
-  DRY_RUN=true
-fi;
-
-ROOT_DIR=$(cd $(dirname $0)/../..; pwd)
-cd $ROOT_DIR
-
-gulp clean
-gulp build/packages.dart
-gulp build/pubspec.dart
-gulp build/analyze.dart
-gulp build.dart.material
-
-PKG_DIR=$ROOT_DIR/dist/pub
-rm -fr $PKG_DIR
-FILES='!(e2e_test|pubspec.lock)'
-
-function publishModule {
-  NAME=$1
-  PUBLISH_DIR=$PKG_DIR/$NAME
-  rm -fr $PUBLISH_DIR
-  mkdir -p $PUBLISH_DIR
-
-  cp -RP $ROOT_DIR/dist/dart/$NAME/$FILES $PUBLISH_DIR
-
-  node scripts/publish/pubspec_cleaner.js --pubspec-file=$PUBLISH_DIR/pubspec.yaml
-
-  if [[ ! $DRY_RUN ]]; then
-    (cd $PUBLISH_DIR && pub publish)
-  fi;
-}
-
-publishModule angular2
-publishModule benchpress
-publishModule benchmarks
-publishModule angular2_material
diff --git a/scripts/publish/pubspec_cleaner.js b/scripts/publish/pubspec_cleaner.js
deleted file mode 100644
index 165f120e86e3..000000000000
--- a/scripts/publish/pubspec_cleaner.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// Cleans up pubspec.yaml files prior to publishing
-// Usage: node pubspec_cleaner.js --pubspec-file=PATH_TO_PUBSPEC_YAML
-
-fs   = require('fs');
-yaml = require('js-yaml');
-yargs = require('yargs');
-
-var pubspecFileOpt = 'pubspec-file';
-var pubspecFile = yargs
-    .demand([pubspecFileOpt])
-    .argv[pubspecFileOpt];
-
-var doc = yaml.safeLoad(fs.readFileSync(pubspecFile, 'utf8'));
-
-// Pub does not allow publishing with dependency_overrides
-delete doc['dependency_overrides'];
-
-// Overwrite temporary values with real values
-delete doc['version'];
-delete doc['authors'];
-delete doc['homepage']
-
-var BASE_PACKAGE_JSON = require('../../package.json');
-doc['version'] = BASE_PACKAGE_JSON.version;
-doc['homepage'] = BASE_PACKAGE_JSON.homepage;
-doc['authors'] = Object.keys(BASE_PACKAGE_JSON.contributors).map(function(name) {
-  return BASE_PACKAGE_JSON.contributors[name];
-});
-
-fs.writeFileSync(pubspecFile, yaml.safeDump(doc));
diff --git a/scripts/release/post-check b/scripts/release/post-check
new file mode 100755
index 000000000000..d44d87725a93
--- /dev/null
+++ b/scripts/release/post-check
@@ -0,0 +1,16 @@
+
+#!/usr/bin/env bash
+
+# use for PATCH releases
+# Verify that all packages are published with correct version:
+
+mkdir tmp
+cd tmp
+npm init -y
+npm install typescript@~2.7.0 rxjs@^6.0.0 zone.js@~0.8.26 @angular/{animations,core,common,forms,router,platform-browser,platform-browser-dynamic,platform-webworker,platform-webworker-dynamic,platform-server,service-worker,compiler,compiler-cli,upgrade,language-service,elements} --save
+cd ..
+rm -rf tmp
+
+echo "CHECK THE DIST-TAGS"
+
+grep '"name": "@angular' $(find packages -name package.json) | grep -o '@angular/[^/"]*' | sort -u | xargs -n 1 -I% npm show \% name dist-tags
diff --git a/scripts/release/post-check-next b/scripts/release/post-check-next
new file mode 100755
index 000000000000..a2f8d4a4e019
--- /dev/null
+++ b/scripts/release/post-check-next
@@ -0,0 +1,16 @@
+
+#!/usr/bin/env bash
+
+# use for BETA and RC releases
+# Verify that all packages are published with correct version:
+
+mkdir tmp
+cd tmp
+npm init -y
+npm install typescript@~2.7 rxjs@^6.0.0-beta.4 zone.js@~0.8.20 @angular/{animations,core,common,forms,router,platform-browser,platform-browser-dynamic,platform-webworker,platform-webworker-dynamic,platform-server,compiler,compiler-cli,language-service,service-worker,upgrade}@next --save
+cd ..
+rm -rf tmp
+
+echo "CHECK THE DIST-TAGS"
+
+grep '"name": "@angular' $(find packages -name package.json) | grep -o '@angular/[^/"]*' | sort -u | xargs -n 1 -I% npm show \% name dist-tags
diff --git a/scripts/release/pre-check b/scripts/release/pre-check
new file mode 100755
index 000000000000..eb0e36e49ab1
--- /dev/null
+++ b/scripts/release/pre-check
@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+# Verify peer deps constraints and package.json before publishing to npm
+# There should be no npm errors
+
+mkdir tmp
+cd tmp
+npm init -y
+npm install --save ../dist/packages-dist/* typescript@~2.7 rxjs@^6.0.0-beta.4 zone.js@~0.8.20
+cd ..
+rm -rf ./tmp
diff --git a/scripts/release/publish-latest b/scripts/release/publish-latest
new file mode 100755
index 000000000000..58842dd9100e
--- /dev/null
+++ b/scripts/release/publish-latest
@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Use for BETA and RC releases
+# Query Bazel for npm_package and ng_package rules with tags=["release-with-framework"]
+# Publish them to npm (tagged next)
+
+# query for all npm packages to be released as part of the framework release
+NPM_PACKAGE_LABELS=`bazel query --output=label 'attr("tags", "\[.*release-with-framework.*\]", //packages/...) intersect kind(".*_package", //packages/...)'`
+# build all npm packages in parallel
+bazel build $NPM_PACKAGE_LABELS
+# publish all packages in sequence to make it easier to spot any errors or warnings
+for packageLabel in $NPM_PACKAGE_LABELS; do
+  echo "publishing $packageLabel"
+  bazel run -- ${packageLabel}.publish --access public --tag latest
+done
+
diff --git a/scripts/release/publish-next b/scripts/release/publish-next
new file mode 100755
index 000000000000..6322bbed5f6b
--- /dev/null
+++ b/scripts/release/publish-next
@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Use for BETA and RC releases
+# Query Bazel for npm_package and ng_package rules with tags=["release-with-framework"]
+# Publish them to npm (tagged next)
+
+# query for all npm packages to be released as part of the framework release
+NPM_PACKAGE_LABELS=`bazel query --output=label 'attr("tags", "\[.*release-with-framework.*\]", //packages/...) intersect kind(".*_package", //packages/...)'`
+# build all npm packages in parallel
+bazel build $NPM_PACKAGE_LABELS
+# publish all packages in sequence to make it easier to spot any errors or warnings
+for packageLabel in $NPM_PACKAGE_LABELS; do
+  echo "publishing $packageLabel"
+  bazel run -- ${packageLabel}.publish --access public --tag next
+done
diff --git a/scripts/sauce/sauce_connect_block.sh b/scripts/sauce/sauce_connect_block.sh
new file mode 100755
index 000000000000..ebda1fccb085
--- /dev/null
+++ b/scripts/sauce/sauce_connect_block.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Wait for Connect to be ready before exiting
+printf "Connecting to Sauce."
+while [ ! -f $BROWSER_PROVIDER_READY_FILE ]; do
+  printf "."
+  #dart2js takes longer than the travis 10 min timeout to complete
+  sleep .5
+done
+echo "Connected"
\ No newline at end of file
diff --git a/scripts/sauce/sauce_connect_setup.sh b/scripts/sauce/sauce_connect_setup.sh
new file mode 100755
index 000000000000..6500d259c9c7
--- /dev/null
+++ b/scripts/sauce/sauce_connect_setup.sh
@@ -0,0 +1,61 @@
+#!/bin/bash
+
+set +x -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/../ci/_travis-fold.sh
+
+
+
+# Setup and start Sauce Connect for your TravisCI build
+# This script requires your .travis.yml to include the following two private env variables:
+# SAUCE_USERNAME
+# SAUCE_ACCESS_KEY
+# Follow the steps at https://saucelabs.com/opensource/travis to set that up.
+#
+# Curl and run this script as part of your .travis.yml before_script section:
+# before_script:
+#   - curl https://gist.github.com/santiycr/5139565/raw/sauce_connect_setup.sh | bash
+
+CONNECT_URL="https://saucelabs.com/downloads/sc-${SAUCE_CONNECT_VERSION}-linux.tar.gz"
+CONNECT_DIR="/tmp/sauce-connect-$RANDOM"
+CONNECT_DOWNLOAD="sc-latest-linux.tar.gz"
+
+# logging disabled because it 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
+cd $CONNECT_DIR
+curl $CONNECT_URL -o $CONNECT_DOWNLOAD 2> /dev/null 1> /dev/null
+mkdir sauce-connect
+tar --extract --file=$CONNECT_DOWNLOAD --strip-components=1 --directory=sauce-connect > /dev/null
+rm $CONNECT_DOWNLOAD
+
+SAUCE_ACCESS_KEY=`echo $SAUCE_ACCESS_KEY | rev`
+
+ARGS=""
+
+# Set tunnel-id only on Travis, to make local testing easier.
+if [ ! -z "$TRAVIS_JOB_NUMBER" ]; then
+  ARGS="$ARGS --tunnel-identifier $TRAVIS_JOB_NUMBER"
+fi
+if [ ! -z "$BROWSER_PROVIDER_READY_FILE" ]; then
+  ARGS="$ARGS --readyfile $BROWSER_PROVIDER_READY_FILE"
+fi
+
+set -v
+echo "Starting Sauce Connect in the background, logging into:"
+echo "  $CONNECT_LOG"
+echo "  $CONNECT_STDOUT"
+echo "  $CONNECT_STDERR"
+sauce-connect/bin/sc -u $SAUCE_USERNAME -k $SAUCE_ACCESS_KEY $ARGS \
+  --logfile $CONNECT_LOG 2> $CONNECT_STDERR 1> $CONNECT_STDOUT &
+set +v
diff --git a/scripts/sauce/sauce_connect_teardown.sh b/scripts/sauce/sauce_connect_teardown.sh
new file mode 100755
index 000000000000..91b918a485e3
--- /dev/null
+++ b/scripts/sauce/sauce_connect_teardown.sh
@@ -0,0 +1,16 @@
+#!/bin/bash
+
+set -e -o pipefail
+
+
+echo "Shutting down Sauce Connect tunnel"
+
+killall sc
+
+while [[ -n `ps -ef | grep "sauce-connect-" | grep -v "grep"` ]]; do
+  printf "."
+  sleep .5
+done
+
+echo ""
+echo "Sauce Connect tunnel has been shut down"
diff --git a/scripts/windows/create-symlinks.sh b/scripts/windows/create-symlinks.sh
new file mode 100644
index 000000000000..09b2b7015c8d
--- /dev/null
+++ b/scripts/windows/create-symlinks.sh
@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+cd `dirname $0`
+
+UPGRADE_STATIC_DIR=./../../packages/upgrade/static
+mv ${UPGRADE_STATIC_DIR}/src ${UPGRADE_STATIC_DIR}/src.old
+cmd <<< "mklink /d \"..\\..\\packages\\upgrade\\static\\src\" \"..\\src\""
diff --git a/scripts/windows/remove-symlinks.sh b/scripts/windows/remove-symlinks.sh
new file mode 100644
index 000000000000..4d8f3d025e70
--- /dev/null
+++ b/scripts/windows/remove-symlinks.sh
@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+cd `dirname $0`
+
+UPGRADE_STATIC_DIR=./../../packages/upgrade/static
+rm ${UPGRADE_STATIC_DIR}/src
+mv ${UPGRADE_STATIC_DIR}/src.old ${UPGRADE_STATIC_DIR}/src
diff --git a/shims_for_IE.js b/shims_for_IE.js
new file mode 100644
index 000000000000..d3bb40baf46b
--- /dev/null
+++ b/shims_for_IE.js
@@ -0,0 +1,1415 @@
+// This file is used for internal testing with Karma only, it should not be used in real applications.
+
+// function.name (all IE)
+/*! @source http://stackoverflow.com/questions/6903762/function-name-not-supported-in-ie*/
+if (!Object.hasOwnProperty('name')) {
+  Object.defineProperty(Function.prototype, 'name', {
+    get: function() {
+      var matches = this.toString().match(/^\s*function\s*((?![0-9])[a-zA-Z0-9_$]*)\s*\(/);
+      var name = matches && matches.length > 1 ? matches[1] : "";
+      // For better performance only parse once, and then cache the
+      // result through a new accessor for repeated access.
+      Object.defineProperty(this, 'name', {value: name});
+      return name;
+    }
+  });
+}
+
+// URL polyfill for SystemJS (all IE)
+/*! @source https://github.com/ModuleLoader/es6-module-loader/blob/master/src/url-polyfill.js*/
+// from https://gist.github.com/Yaffle/1088850
+(function(global) {
+  function URLPolyfill(url, baseURL) {
+    if (typeof url != 'string') {
+      throw new TypeError('URL must be a string');
+    }
+    var m = String(url).replace(/^\s+|\s+$/g, "").match(/^([^:\/?#]+:)?(?:\/\/(?:([^:@\/?#]*)(?::([^:@\/?#]*))?@)?(([^:\/?#]*)(?::(\d*))?))?([^?#]*)(\?[^#]*)?(#[\s\S]*)?/);
+    if (!m) {
+      throw new RangeError();
+    }
+    var protocol = m[1] || "";
+    var username = m[2] || "";
+    var password = m[3] || "";
+    var host = m[4] || "";
+    var hostname = m[5] || "";
+    var port = m[6] || "";
+    var pathname = m[7] || "";
+    var search = m[8] || "";
+    var hash = m[9] || "";
+    if (baseURL !== undefined) {
+      var base = baseURL instanceof URLPolyfill ? baseURL : new URLPolyfill(baseURL);
+      var flag = protocol === "" && host === "" && username === "";
+      if (flag && pathname === "" && search === "") {
+        search = base.search;
+      }
+      if (flag && pathname.charAt(0) !== "/") {
+        pathname = (pathname !== "" ? (((base.host !== "" || base.username !== "") && base.pathname === "" ? "/" : "") + base.pathname.slice(0, base.pathname.lastIndexOf("/") + 1) + pathname) : base.pathname);
+      }
+      // dot segments removal
+      var output = [];
+      pathname.replace(/^(\.\.?(\/|$))+/, "")
+        .replace(/\/(\.(\/|$))+/g, "/")
+        .replace(/\/\.\.$/, "/../")
+        .replace(/\/?[^\/]*/g, function (p) {
+          if (p === "/..") {
+            output.pop();
+          } else {
+            output.push(p);
+          }
+        });
+      pathname = output.join("").replace(/^\//, pathname.charAt(0) === "/" ? "/" : "");
+      if (flag) {
+        port = base.port;
+        hostname = base.hostname;
+        host = base.host;
+        password = base.password;
+        username = base.username;
+      }
+      if (protocol === "") {
+        protocol = base.protocol;
+      }
+    }
+
+    // convert windows file URLs to use /
+    if (protocol == 'file:')
+      pathname = pathname.replace(/\\/g, '/');
+
+    this.origin = protocol + (protocol !== "" || host !== "" ? "//" : "") + host;
+    this.href = protocol + (protocol !== "" || host !== "" ? "//" : "") + (username !== "" ? username + (password !== "" ? ":" + password : "") + "@" : "") + host + pathname + search + hash;
+    this.protocol = protocol;
+    this.username = username;
+    this.password = password;
+    this.host = host;
+    this.hostname = hostname;
+    this.port = port;
+    this.pathname = pathname;
+    this.search = search;
+    this.hash = hash;
+  }
+global.URLPolyfill = URLPolyfill;
+})(typeof self != 'undefined' ? self : global);
+
+//classList (IE9)
+/*! @license please refer to http://unlicense.org/ */
+/*! @author Eli Grey */
+/*! @source https://github.com/eligrey/classList.js */
+;if("document" in self&&!("classList" in document.createElement("_"))){(function(j){"use strict";if(!("Element" in j)){return}var a="classList",f="prototype",m=j.Element[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p<o;p++){if(p in this&&this[p]===q){return p}}return -1},n=function(o,p){this.name=o;this.code=DOMException[o];this.message=p},g=function(p,o){if(o===""){throw new n("SYNTAX_ERR","An invalid or illegal string was specified")}if(/\s/.test(o)){throw new n("INVALID_CHARACTER_ERR","String contains an invalid character")}return c.call(p,o)},d=function(s){var r=k.call(s.getAttribute("class")||""),q=r?r.split(/\s+/):[],p=0,o=q.length;for(;p<o;p++){this.push(q[p])}this._updateClassName=function(){s.setAttribute("class",this.toString())}},e=d[f]=[],i=function(){return new d(this)};n[f]=Error[f];e.item=function(o){return this[o]||null};e.contains=function(o){o+="";return g(this,o)!==-1};e.add=function(){var s=arguments,r=0,p=s.length,q,o=false;do{q=s[r]+"";if(g(this,q)===-1){this.push(q);o=true}}while(++r<p);if(o){this._updateClassName()}};e.remove=function(){var t=arguments,s=0,p=t.length,r,o=false;do{r=t[s]+"";var q=g(this,r);if(q!==-1){this.splice(q,1);o=true}}while(++s<p);if(o){this._updateClassName()}};e.toggle=function(p,q){p+="";var o=this.contains(p),r=o?q!==true&&"remove":q!==false&&"add";if(r){this[r](p)}return !o};e.toString=function(){return this.join(" ")};if(b.defineProperty){var l={get:i,enumerable:true,configurable:true};try{b.defineProperty(m,a,l)}catch(h){if(h.number===-2146823252){l.enumerable=false;b.defineProperty(m,a,l)}}}else{if(b[f].__defineGetter__){m.__defineGetter__(a,i)}}}(self))};
+
+//console mock (IE9)
+if (!window.console) window.console = {};
+if (!window.console.log) window.console.log = function () { };
+if (!window.console.error) window.console.error = function () { };
+if (!window.console.warn) window.console.warn = function () { };
+if (!window.console.assert) window.console.assert = function () { };
+
+//Typed Array (IE9)
+/*! @source https://github.com/inexorabletash/polyfill/blob/master/typedarray.js */
+/*
+ Copyright (c) 2010, Linden Research, Inc.
+ Copyright (c) 2014, Joshua Bell
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+ $/LicenseInfo$
+ */
+
+// Original can be found at:
+//   https://bitbucket.org/lindenlab/llsd
+// Modifications by Joshua Bell inexorabletash@gmail.com
+//   https://github.com/inexorabletash/polyfill
+
+// ES3/ES5 implementation of the Krhonos Typed Array Specification
+//   Ref: http://www.khronos.org/registry/typedarray/specs/latest/
+//   Date: 2011-02-01
+//
+// Variations:
+//  * Allows typed_array.get/set() as alias for subscripts (typed_array[])
+//  * Gradually migrating structure from Khronos spec to ES2015 spec
+//
+// Caveats:
+//  * Beyond 10000 or so entries, polyfilled array accessors (ta[0],
+//    etc) become memory-prohibitive, so array creation will fail. Set
+//    self.TYPED_ARRAY_POLYFILL_NO_ARRAY_ACCESSORS=true to disable
+//    creation of accessors. Your code will need to use the
+//    non-standard get()/set() instead, and will need to add those to
+//    native arrays for interop.
+(function(global) {
+  'use strict';
+  var undefined = (void 0); // Paranoia
+
+  // Beyond this value, index getters/setters (i.e. array[0], array[1]) are so slow to
+  // create, and consume so much memory, that the browser appears frozen.
+  var MAX_ARRAY_LENGTH = 1e5;
+
+  // Approximations of internal ECMAScript conversion functions
+  function Type(v) {
+    switch(typeof v) {
+      case 'undefined': return 'undefined';
+      case 'boolean': return 'boolean';
+      case 'number': return 'number';
+      case 'string': return 'string';
+      default: return v === null ? 'null' : 'object';
+    }
+  }
+
+  // Class returns internal [[Class]] property, used to avoid cross-frame instanceof issues:
+  function Class(v) { return Object.prototype.toString.call(v).replace(/^\[object *|\]$/g, ''); }
+  function IsCallable(o) { return typeof o === 'function'; }
+  function ToObject(v) {
+    if (v === null || v === undefined) throw TypeError();
+    return Object(v);
+  }
+  function ToInt32(v) { return v >> 0; }
+  function ToUint32(v) { return v >>> 0; }
+
+  // Snapshot intrinsics
+  var LN2 = Math.LN2,
+    abs = Math.abs,
+    floor = Math.floor,
+    log = Math.log,
+    max = Math.max,
+    min = Math.min,
+    pow = Math.pow,
+    round = Math.round;
+
+  // emulate ES5 getter/setter API using legacy APIs
+  // http://blogs.msdn.com/b/ie/archive/2010/09/07/transitioning-existing-code-to-the-es5-getter-setter-apis.aspx
+  // (second clause tests for Object.defineProperty() in IE<9 that only supports extending DOM prototypes, but
+  // note that IE<9 does not support __defineGetter__ or __defineSetter__ so it just renders the method harmless)
+
+  (function() {
+    var orig = Object.defineProperty;
+    var dom_only = !(function(){try{return Object.defineProperty({},'x',{});}catch(_){return false;}}());
+
+    if (!orig || dom_only) {
+      Object.defineProperty = function (o, prop, desc) {
+        // In IE8 try built-in implementation for defining properties on DOM prototypes.
+        if (orig)
+          try { return orig(o, prop, desc); } catch (_) {}
+        if (o !== Object(o))
+          throw TypeError('Object.defineProperty called on non-object');
+        if (Object.prototype.__defineGetter__ && ('get' in desc))
+          Object.prototype.__defineGetter__.call(o, prop, desc.get);
+        if (Object.prototype.__defineSetter__ && ('set' in desc))
+          Object.prototype.__defineSetter__.call(o, prop, desc.set);
+        if ('value' in desc)
+          o[prop] = desc.value;
+        return o;
+      };
+    }
+  }());
+
+  // ES5: Make obj[index] an alias for obj._getter(index)/obj._setter(index, value)
+  // for index in 0 ... obj.length
+  function makeArrayAccessors(obj) {
+    if ('TYPED_ARRAY_POLYFILL_NO_ARRAY_ACCESSORS' in global)
+      return;
+
+    if (obj.length > MAX_ARRAY_LENGTH) throw RangeError('Array too large for polyfill');
+
+    function makeArrayAccessor(index) {
+      Object.defineProperty(obj, index, {
+        'get': function() { return obj._getter(index); },
+        'set': function(v) { obj._setter(index, v); },
+        enumerable: true,
+        configurable: false
+      });
+    }
+
+    var i;
+    for (i = 0; i < obj.length; i += 1) {
+      makeArrayAccessor(i);
+    }
+  }
+
+  // Internal conversion functions:
+  //    pack<Type>()   - take a number (interpreted as Type), output a byte array
+  //    unpack<Type>() - take a byte array, output a Type-like number
+
+  function as_signed(value, bits) { var s = 32 - bits; return (value << s) >> s; }
+  function as_unsigned(value, bits) { var s = 32 - bits; return (value << s) >>> s; }
+
+  function packI8(n) { return [n & 0xff]; }
+  function unpackI8(bytes) { return as_signed(bytes[0], 8); }
+
+  function packU8(n) { return [n & 0xff]; }
+  function unpackU8(bytes) { return as_unsigned(bytes[0], 8); }
+
+  function packU8Clamped(n) { n = round(Number(n)); return [n < 0 ? 0 : n > 0xff ? 0xff : n & 0xff]; }
+
+  function packI16(n) { return [n & 0xff, (n >> 8) & 0xff]; }
+  function unpackI16(bytes) { return as_signed(bytes[1] << 8 | bytes[0], 16); }
+
+  function packU16(n) { return [n & 0xff, (n >> 8) & 0xff]; }
+  function unpackU16(bytes) { return as_unsigned(bytes[1] << 8 | bytes[0], 16); }
+
+  function packI32(n) { return [n & 0xff, (n >> 8) & 0xff, (n >> 16) & 0xff, (n >> 24) & 0xff]; }
+  function unpackI32(bytes) { return as_signed(bytes[3] << 24 | bytes[2] << 16 | bytes[1] << 8 | bytes[0], 32); }
+
+  function packU32(n) { return [n & 0xff, (n >> 8) & 0xff, (n >> 16) & 0xff, (n >> 24) & 0xff]; }
+  function unpackU32(bytes) { return as_unsigned(bytes[3] << 24 | bytes[2] << 16 | bytes[1] << 8 | bytes[0], 32); }
+
+  function packIEEE754(v, ebits, fbits) {
+
+    var bias = (1 << (ebits - 1)) - 1;
+
+    function roundToEven(n) {
+      var w = floor(n), f = n - w;
+      if (f < 0.5)
+        return w;
+      if (f > 0.5)
+        return w + 1;
+      return w % 2 ? w + 1 : w;
+    }
+
+    // Compute sign, exponent, fraction
+    var s, e, f;
+    if (v !== v) {
+      // NaN
+      // http://dev.w3.org/2006/webapi/WebIDL/#es-type-mapping
+      e = (1 << ebits) - 1; f = pow(2, fbits - 1); s = 0;
+    } else if (v === Infinity || v === -Infinity) {
+      e = (1 << ebits) - 1; f = 0; s = (v < 0) ? 1 : 0;
+    } else if (v === 0) {
+      e = 0; f = 0; s = (1 / v === -Infinity) ? 1 : 0;
+    } else {
+      s = v < 0;
+      v = abs(v);
+
+      if (v >= pow(2, 1 - bias)) {
+        // Normalized
+        e = min(floor(log(v) / LN2), 1023);
+        var significand = v / pow(2, e);
+        if (significand < 1) {
+          e -= 1;
+          significand *= 2;
+        }
+        if (significand >= 2) {
+          e += 1;
+          significand /= 2;
+        }
+        var d = pow(2, fbits);
+        f = roundToEven(significand * d) - d;
+        e += bias;
+        if (f / d >= 1) {
+          e += 1;
+          f = 0;
+        }
+        if (e > 2 * bias) {
+          // Overflow
+          e = (1 << ebits) - 1;
+          f = 0;
+        }
+      } else {
+        // Denormalized
+        e = 0;
+        f = roundToEven(v / pow(2, 1 - bias - fbits));
+      }
+    }
+
+    // Pack sign, exponent, fraction
+    var bits = [], i;
+    for (i = fbits; i; i -= 1) { bits.push(f % 2 ? 1 : 0); f = floor(f / 2); }
+    for (i = ebits; i; i -= 1) { bits.push(e % 2 ? 1 : 0); e = floor(e / 2); }
+    bits.push(s ? 1 : 0);
+    bits.reverse();
+    var str = bits.join('');
+
+    // Bits to bytes
+    var bytes = [];
+    while (str.length) {
+      bytes.unshift(parseInt(str.substring(0, 8), 2));
+      str = str.substring(8);
+    }
+    return bytes;
+  }
+
+  function unpackIEEE754(bytes, ebits, fbits) {
+    // Bytes to bits
+    var bits = [], i, j, b, str,
+      bias, s, e, f;
+
+    for (i = 0; i < bytes.length; ++i) {
+      b = bytes[i];
+      for (j = 8; j; j -= 1) {
+        bits.push(b % 2 ? 1 : 0); b = b >> 1;
+      }
+    }
+    bits.reverse();
+    str = bits.join('');
+
+    // Unpack sign, exponent, fraction
+    bias = (1 << (ebits - 1)) - 1;
+    s = parseInt(str.substring(0, 1), 2) ? -1 : 1;
+    e = parseInt(str.substring(1, 1 + ebits), 2);
+    f = parseInt(str.substring(1 + ebits), 2);
+
+    // Produce number
+    if (e === (1 << ebits) - 1) {
+      return f !== 0 ? NaN : s * Infinity;
+    } else if (e > 0) {
+      // Normalized
+      return s * pow(2, e - bias) * (1 + f / pow(2, fbits));
+    } else if (f !== 0) {
+      // Denormalized
+      return s * pow(2, -(bias - 1)) * (f / pow(2, fbits));
+    } else {
+      return s < 0 ? -0 : 0;
+    }
+  }
+
+  function unpackF64(b) { return unpackIEEE754(b, 11, 52); }
+  function packF64(v) { return packIEEE754(v, 11, 52); }
+  function unpackF32(b) { return unpackIEEE754(b, 8, 23); }
+  function packF32(v) { return packIEEE754(v, 8, 23); }
+
+  //
+  // 3 The ArrayBuffer Type
+  //
+
+  (function() {
+
+    function ArrayBuffer(length) {
+      length = ToInt32(length);
+      if (length < 0) throw RangeError('ArrayBuffer size is not a small enough positive integer.');
+      Object.defineProperty(this, 'byteLength', {value: length});
+      Object.defineProperty(this, '_bytes', {value: Array(length)});
+
+      for (var i = 0; i < length; i += 1)
+        this._bytes[i] = 0;
+    }
+
+    global.ArrayBuffer = global.ArrayBuffer || ArrayBuffer;
+
+    //
+    // 5 The Typed Array View Types
+    //
+
+    function $TypedArray$() {
+
+      // %TypedArray% ( length )
+      if (!arguments.length || typeof arguments[0] !== 'object') {
+        return (function(length) {
+          length = ToInt32(length);
+          if (length < 0) throw RangeError('length is not a small enough positive integer.');
+          Object.defineProperty(this, 'length', {value: length});
+          Object.defineProperty(this, 'byteLength', {value: length * this.BYTES_PER_ELEMENT});
+          Object.defineProperty(this, 'buffer', {value: new ArrayBuffer(this.byteLength)});
+          Object.defineProperty(this, 'byteOffset', {value: 0});
+
+        }).apply(this, arguments);
+      }
+
+      // %TypedArray% ( typedArray )
+      if (arguments.length >= 1 &&
+        Type(arguments[0]) === 'object' &&
+        arguments[0] instanceof $TypedArray$) {
+        return (function(typedArray){
+          if (this.constructor !== typedArray.constructor) throw TypeError();
+
+          var byteLength = typedArray.length * this.BYTES_PER_ELEMENT;
+          Object.defineProperty(this, 'buffer', {value: new ArrayBuffer(byteLength)});
+          Object.defineProperty(this, 'byteLength', {value: byteLength});
+          Object.defineProperty(this, 'byteOffset', {value: 0});
+          Object.defineProperty(this, 'length', {value: typedArray.length});
+
+          for (var i = 0; i < this.length; i += 1)
+            this._setter(i, typedArray._getter(i));
+
+        }).apply(this, arguments);
+      }
+
+      // %TypedArray% ( array )
+      if (arguments.length >= 1 &&
+        Type(arguments[0]) === 'object' &&
+        !(arguments[0] instanceof $TypedArray$) &&
+        !(arguments[0] instanceof ArrayBuffer || Class(arguments[0]) === 'ArrayBuffer')) {
+        return (function(array) {
+
+          var byteLength = array.length * this.BYTES_PER_ELEMENT;
+          Object.defineProperty(this, 'buffer', {value: new ArrayBuffer(byteLength)});
+          Object.defineProperty(this, 'byteLength', {value: byteLength});
+          Object.defineProperty(this, 'byteOffset', {value: 0});
+          Object.defineProperty(this, 'length', {value: array.length});
+
+          for (var i = 0; i < this.length; i += 1) {
+            var s = array[i];
+            this._setter(i, Number(s));
+          }
+        }).apply(this, arguments);
+      }
+
+      // %TypedArray% ( buffer, byteOffset=0, length=undefined )
+      if (arguments.length >= 1 &&
+        Type(arguments[0]) === 'object' &&
+        (arguments[0] instanceof ArrayBuffer || Class(arguments[0]) === 'ArrayBuffer')) {
+        return (function(buffer, byteOffset, length) {
+
+          byteOffset = ToUint32(byteOffset);
+          if (byteOffset > buffer.byteLength)
+            throw RangeError('byteOffset out of range');
+
+          // The given byteOffset must be a multiple of the element
+          // size of the specific type, otherwise an exception is raised.
+          if (byteOffset % this.BYTES_PER_ELEMENT)
+            throw RangeError('buffer length minus the byteOffset is not a multiple of the element size.');
+
+          if (length === undefined) {
+            var byteLength = buffer.byteLength - byteOffset;
+            if (byteLength % this.BYTES_PER_ELEMENT)
+              throw RangeError('length of buffer minus byteOffset not a multiple of the element size');
+            length = byteLength / this.BYTES_PER_ELEMENT;
+
+          } else {
+            length = ToUint32(length);
+            byteLength = length * this.BYTES_PER_ELEMENT;
+          }
+
+          if ((byteOffset + byteLength) > buffer.byteLength)
+            throw RangeError('byteOffset and length reference an area beyond the end of the buffer');
+
+          Object.defineProperty(this, 'buffer', {value: buffer});
+          Object.defineProperty(this, 'byteLength', {value: byteLength});
+          Object.defineProperty(this, 'byteOffset', {value: byteOffset});
+          Object.defineProperty(this, 'length', {value: length});
+
+        }).apply(this, arguments);
+      }
+
+      // %TypedArray% ( all other argument combinations )
+      throw TypeError();
+    }
+
+    // Properties of the %TypedArray Instrinsic Object
+
+    // %TypedArray%.from ( source , mapfn=undefined, thisArg=undefined )
+    Object.defineProperty($TypedArray$, 'from', {value: function(iterable) {
+      return new this(iterable);
+    }});
+
+    // %TypedArray%.of ( ...items )
+    Object.defineProperty($TypedArray$, 'of', {value: function(/*...items*/) {
+      return new this(arguments);
+    }});
+
+    // %TypedArray%.prototype
+    var $TypedArrayPrototype$ = {};
+    $TypedArray$.prototype = $TypedArrayPrototype$;
+
+    // WebIDL: getter type (unsigned long index);
+    Object.defineProperty($TypedArray$.prototype, '_getter', {value: function(index) {
+      if (arguments.length < 1) throw SyntaxError('Not enough arguments');
+
+      index = ToUint32(index);
+      if (index >= this.length)
+        return undefined;
+
+      var bytes = [], i, o;
+      for (i = 0, o = this.byteOffset + index * this.BYTES_PER_ELEMENT;
+           i < this.BYTES_PER_ELEMENT;
+           i += 1, o += 1) {
+        bytes.push(this.buffer._bytes[o]);
+      }
+      return this._unpack(bytes);
+    }});
+
+    // NONSTANDARD: convenience alias for getter: type get(unsigned long index);
+    Object.defineProperty($TypedArray$.prototype, 'get', {value: $TypedArray$.prototype._getter});
+
+    // WebIDL: setter void (unsigned long index, type value);
+    Object.defineProperty($TypedArray$.prototype, '_setter', {value: function(index, value) {
+      if (arguments.length < 2) throw SyntaxError('Not enough arguments');
+
+      index = ToUint32(index);
+      if (index >= this.length)
+        return;
+
+      var bytes = this._pack(value), i, o;
+      for (i = 0, o = this.byteOffset + index * this.BYTES_PER_ELEMENT;
+           i < this.BYTES_PER_ELEMENT;
+           i += 1, o += 1) {
+        this.buffer._bytes[o] = bytes[i];
+      }
+    }});
+
+    // get %TypedArray%.prototype.buffer
+    // get %TypedArray%.prototype.byteLength
+    // get %TypedArray%.prototype.byteOffset
+    // -- applied directly to the object in the constructor
+
+    // %TypedArray%.prototype.constructor
+    Object.defineProperty($TypedArray$.prototype, 'constructor', {value: $TypedArray$});
+
+    // %TypedArray%.prototype.copyWithin (target, start, end = this.length )
+    Object.defineProperty($TypedArray$.prototype, 'copyWithin', {value: function(target, start) {
+      var end = arguments[2];
+
+      var o = ToObject(this);
+      var lenVal = o.length;
+      var len = ToUint32(lenVal);
+      len = max(len, 0);
+      var relativeTarget = ToInt32(target);
+      var to;
+      if (relativeTarget < 0)
+        to = max(len + relativeTarget, 0);
+      else
+        to = min(relativeTarget, len);
+      var relativeStart = ToInt32(start);
+      var from;
+      if (relativeStart < 0)
+        from = max(len + relativeStart, 0);
+      else
+        from = min(relativeStart, len);
+      var relativeEnd;
+      if (end === undefined)
+        relativeEnd = len;
+      else
+        relativeEnd = ToInt32(end);
+      var final;
+      if (relativeEnd < 0)
+        final = max(len + relativeEnd, 0);
+      else
+        final = min(relativeEnd, len);
+      var count = min(final - from, len - to);
+      var direction;
+      if (from < to && to < from + count) {
+        direction = -1;
+        from = from + count - 1;
+        to = to + count - 1;
+      } else {
+        direction = 1;
+      }
+      while (count > 0) {
+        o._setter(to, o._getter(from));
+        from = from + direction;
+        to = to + direction;
+        count = count - 1;
+      }
+      return o;
+    }});
+
+    // %TypedArray%.prototype.entries ( )
+    // -- defined in es6.js to shim browsers w/ native TypedArrays
+
+    // %TypedArray%.prototype.every ( callbackfn, thisArg = undefined )
+    Object.defineProperty($TypedArray$.prototype, 'every', {value: function(callbackfn) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      if (!IsCallable(callbackfn)) throw TypeError();
+      var thisArg = arguments[1];
+      for (var i = 0; i < len; i++) {
+        if (!callbackfn.call(thisArg, t._getter(i), i, t))
+          return false;
+      }
+      return true;
+    }});
+
+    // %TypedArray%.prototype.fill (value, start = 0, end = this.length )
+    Object.defineProperty($TypedArray$.prototype, 'fill', {value: function(value) {
+      var start = arguments[1],
+        end = arguments[2];
+
+      var o = ToObject(this);
+      var lenVal = o.length;
+      var len = ToUint32(lenVal);
+      len = max(len, 0);
+      var relativeStart = ToInt32(start);
+      var k;
+      if (relativeStart < 0)
+        k = max((len + relativeStart), 0);
+      else
+        k = min(relativeStart, len);
+      var relativeEnd;
+      if (end === undefined)
+        relativeEnd = len;
+      else
+        relativeEnd = ToInt32(end);
+      var final;
+      if (relativeEnd < 0)
+        final = max((len + relativeEnd), 0);
+      else
+        final = min(relativeEnd, len);
+      while (k < final) {
+        o._setter(k, value);
+        k += 1;
+      }
+      return o;
+    }});
+
+    // %TypedArray%.prototype.filter ( callbackfn, thisArg = undefined )
+    Object.defineProperty($TypedArray$.prototype, 'filter', {value: function(callbackfn) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      if (!IsCallable(callbackfn)) throw TypeError();
+      var res = [];
+      var thisp = arguments[1];
+      for (var i = 0; i < len; i++) {
+        var val = t._getter(i); // in case fun mutates this
+        if (callbackfn.call(thisp, val, i, t))
+          res.push(val);
+      }
+      return new this.constructor(res);
+    }});
+
+    // %TypedArray%.prototype.find (predicate, thisArg = undefined)
+    Object.defineProperty($TypedArray$.prototype, 'find', {value: function(predicate) {
+      var o = ToObject(this);
+      var lenValue = o.length;
+      var len = ToUint32(lenValue);
+      if (!IsCallable(predicate)) throw TypeError();
+      var t = arguments.length > 1 ? arguments[1] : undefined;
+      var k = 0;
+      while (k < len) {
+        var kValue = o._getter(k);
+        var testResult = predicate.call(t, kValue, k, o);
+        if (Boolean(testResult))
+          return kValue;
+        ++k;
+      }
+      return undefined;
+    }});
+
+    // %TypedArray%.prototype.findIndex ( predicate, thisArg = undefined )
+    Object.defineProperty($TypedArray$.prototype, 'findIndex', {value: function(predicate) {
+      var o = ToObject(this);
+      var lenValue = o.length;
+      var len = ToUint32(lenValue);
+      if (!IsCallable(predicate)) throw TypeError();
+      var t = arguments.length > 1 ? arguments[1] : undefined;
+      var k = 0;
+      while (k < len) {
+        var kValue = o._getter(k);
+        var testResult = predicate.call(t, kValue, k, o);
+        if (Boolean(testResult))
+          return k;
+        ++k;
+      }
+      return -1;
+    }});
+
+    // %TypedArray%.prototype.forEach ( callbackfn, thisArg = undefined )
+    Object.defineProperty($TypedArray$.prototype, 'forEach', {value: function(callbackfn) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      if (!IsCallable(callbackfn)) throw TypeError();
+      var thisp = arguments[1];
+      for (var i = 0; i < len; i++)
+        callbackfn.call(thisp, t._getter(i), i, t);
+    }});
+
+    // %TypedArray%.prototype.indexOf (searchElement, fromIndex = 0 )
+    Object.defineProperty($TypedArray$.prototype, 'indexOf', {value: function(searchElement) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      if (len === 0) return -1;
+      var n = 0;
+      if (arguments.length > 0) {
+        n = Number(arguments[1]);
+        if (n !== n) {
+          n = 0;
+        } else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0)) {
+          n = (n > 0 || -1) * floor(abs(n));
+        }
+      }
+      if (n >= len) return -1;
+      var k = n >= 0 ? n : max(len - abs(n), 0);
+      for (; k < len; k++) {
+        if (t._getter(k) === searchElement) {
+          return k;
+        }
+      }
+      return -1;
+    }});
+
+    // %TypedArray%.prototype.join ( separator )
+    Object.defineProperty($TypedArray$.prototype, 'join', {value: function(separator) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      var tmp = Array(len);
+      for (var i = 0; i < len; ++i)
+        tmp[i] = t._getter(i);
+      return tmp.join(separator === undefined ? ',' : separator); // Hack for IE7
+    }});
+
+    // %TypedArray%.prototype.keys ( )
+    // -- defined in es6.js to shim browsers w/ native TypedArrays
+
+    // %TypedArray%.prototype.lastIndexOf ( searchElement, fromIndex = this.length-1 )
+    Object.defineProperty($TypedArray$.prototype, 'lastIndexOf', {value: function(searchElement) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      if (len === 0) return -1;
+      var n = len;
+      if (arguments.length > 1) {
+        n = Number(arguments[1]);
+        if (n !== n) {
+          n = 0;
+        } else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0)) {
+          n = (n > 0 || -1) * floor(abs(n));
+        }
+      }
+      var k = n >= 0 ? min(n, len - 1) : len - abs(n);
+      for (; k >= 0; k--) {
+        if (t._getter(k) === searchElement)
+          return k;
+      }
+      return -1;
+    }});
+
+    // get %TypedArray%.prototype.length
+    // -- applied directly to the object in the constructor
+
+    // %TypedArray%.prototype.map ( callbackfn, thisArg = undefined )
+    Object.defineProperty($TypedArray$.prototype, 'map', {value: function(callbackfn) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      if (!IsCallable(callbackfn)) throw TypeError();
+      var res = []; res.length = len;
+      var thisp = arguments[1];
+      for (var i = 0; i < len; i++)
+        res[i] = callbackfn.call(thisp, t._getter(i), i, t);
+      return new this.constructor(res);
+    }});
+
+    // %TypedArray%.prototype.reduce ( callbackfn [, initialValue] )
+    Object.defineProperty($TypedArray$.prototype, 'reduce', {value: function(callbackfn) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      if (!IsCallable(callbackfn)) throw TypeError();
+      // no value to return if no initial value and an empty array
+      if (len === 0 && arguments.length === 1) throw TypeError();
+      var k = 0;
+      var accumulator;
+      if (arguments.length >= 2) {
+        accumulator = arguments[1];
+      } else {
+        accumulator = t._getter(k++);
+      }
+      while (k < len) {
+        accumulator = callbackfn.call(undefined, accumulator, t._getter(k), k, t);
+        k++;
+      }
+      return accumulator;
+    }});
+
+    // %TypedArray%.prototype.reduceRight ( callbackfn [, initialValue] )
+    Object.defineProperty($TypedArray$.prototype, 'reduceRight', {value: function(callbackfn) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      if (!IsCallable(callbackfn)) throw TypeError();
+      // no value to return if no initial value, empty array
+      if (len === 0 && arguments.length === 1) throw TypeError();
+      var k = len - 1;
+      var accumulator;
+      if (arguments.length >= 2) {
+        accumulator = arguments[1];
+      } else {
+        accumulator = t._getter(k--);
+      }
+      while (k >= 0) {
+        accumulator = callbackfn.call(undefined, accumulator, t._getter(k), k, t);
+        k--;
+      }
+      return accumulator;
+    }});
+
+    // %TypedArray%.prototype.reverse ( )
+    Object.defineProperty($TypedArray$.prototype, 'reverse', {value: function() {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      var half = floor(len / 2);
+      for (var i = 0, j = len - 1; i < half; ++i, --j) {
+        var tmp = t._getter(i);
+        t._setter(i, t._getter(j));
+        t._setter(j, tmp);
+      }
+      return t;
+    }});
+
+    // %TypedArray%.prototype.set(array, offset = 0 )
+    // %TypedArray%.prototype.set(typedArray, offset = 0 )
+    // WebIDL: void set(TypedArray array, optional unsigned long offset);
+    // WebIDL: void set(sequence<type> array, optional unsigned long offset);
+    Object.defineProperty($TypedArray$.prototype, 'set', {value: function(index, value) {
+      if (arguments.length < 1) throw SyntaxError('Not enough arguments');
+      var array, sequence, offset, len,
+        i, s, d,
+        byteOffset, byteLength, tmp;
+
+      if (typeof arguments[0] === 'object' && arguments[0].constructor === this.constructor) {
+        // void set(TypedArray array, optional unsigned long offset);
+        array = arguments[0];
+        offset = ToUint32(arguments[1]);
+
+        if (offset + array.length > this.length) {
+          throw RangeError('Offset plus length of array is out of range');
+        }
+
+        byteOffset = this.byteOffset + offset * this.BYTES_PER_ELEMENT;
+        byteLength = array.length * this.BYTES_PER_ELEMENT;
+
+        if (array.buffer === this.buffer) {
+          tmp = [];
+          for (i = 0, s = array.byteOffset; i < byteLength; i += 1, s += 1) {
+            tmp[i] = array.buffer._bytes[s];
+          }
+          for (i = 0, d = byteOffset; i < byteLength; i += 1, d += 1) {
+            this.buffer._bytes[d] = tmp[i];
+          }
+        } else {
+          for (i = 0, s = array.byteOffset, d = byteOffset;
+               i < byteLength; i += 1, s += 1, d += 1) {
+            this.buffer._bytes[d] = array.buffer._bytes[s];
+          }
+        }
+      } else if (typeof arguments[0] === 'object' && typeof arguments[0].length !== 'undefined') {
+        // void set(sequence<type> array, optional unsigned long offset);
+        sequence = arguments[0];
+        len = ToUint32(sequence.length);
+        offset = ToUint32(arguments[1]);
+
+        if (offset + len > this.length) {
+          throw RangeError('Offset plus length of array is out of range');
+        }
+
+        for (i = 0; i < len; i += 1) {
+          s = sequence[i];
+          this._setter(offset + i, Number(s));
+        }
+      } else {
+        throw TypeError('Unexpected argument type(s)');
+      }
+    }});
+
+    // %TypedArray%.prototype.slice ( start, end )
+    Object.defineProperty($TypedArray$.prototype, 'slice', {value: function(start, end) {
+      var o = ToObject(this);
+      var lenVal = o.length;
+      var len = ToUint32(lenVal);
+      var relativeStart = ToInt32(start);
+      var k = (relativeStart < 0) ? max(len + relativeStart, 0) : min(relativeStart, len);
+      var relativeEnd = (end === undefined) ? len : ToInt32(end);
+      var final = (relativeEnd < 0) ? max(len + relativeEnd, 0) : min(relativeEnd, len);
+      var count = final - k;
+      var c = o.constructor;
+      var a = new c(count);
+      var n = 0;
+      while (k < final) {
+        var kValue = o._getter(k);
+        a._setter(n, kValue);
+        ++k;
+        ++n;
+      }
+      return a;
+    }});
+
+    // %TypedArray%.prototype.some ( callbackfn, thisArg = undefined )
+    Object.defineProperty($TypedArray$.prototype, 'some', {value: function(callbackfn) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      if (!IsCallable(callbackfn)) throw TypeError();
+      var thisp = arguments[1];
+      for (var i = 0; i < len; i++) {
+        if (callbackfn.call(thisp, t._getter(i), i, t)) {
+          return true;
+        }
+      }
+      return false;
+    }});
+
+    // %TypedArray%.prototype.sort ( comparefn )
+    Object.defineProperty($TypedArray$.prototype, 'sort', {value: function(comparefn) {
+      if (this === undefined || this === null) throw TypeError();
+      var t = Object(this);
+      var len = ToUint32(t.length);
+      var tmp = Array(len);
+      for (var i = 0; i < len; ++i)
+        tmp[i] = t._getter(i);
+      if (comparefn) tmp.sort(comparefn); else tmp.sort(); // Hack for IE8/9
+      for (i = 0; i < len; ++i)
+        t._setter(i, tmp[i]);
+      return t;
+    }});
+
+    // %TypedArray%.prototype.subarray(begin = 0, end = this.length )
+    // WebIDL: TypedArray subarray(long begin, optional long end);
+    Object.defineProperty($TypedArray$.prototype, 'subarray', {value: function(start, end) {
+      function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
+
+      start = ToInt32(start);
+      end = ToInt32(end);
+
+      if (arguments.length < 1) { start = 0; }
+      if (arguments.length < 2) { end = this.length; }
+
+      if (start < 0) { start = this.length + start; }
+      if (end < 0) { end = this.length + end; }
+
+      start = clamp(start, 0, this.length);
+      end = clamp(end, 0, this.length);
+
+      var len = end - start;
+      if (len < 0) {
+        len = 0;
+      }
+
+      return new this.constructor(
+        this.buffer, this.byteOffset + start * this.BYTES_PER_ELEMENT, len);
+    }});
+
+    // %TypedArray%.prototype.toLocaleString ( )
+    // %TypedArray%.prototype.toString ( )
+    // %TypedArray%.prototype.values ( )
+    // %TypedArray%.prototype [ @@iterator ] ( )
+    // get %TypedArray%.prototype [ @@toStringTag ]
+    // -- defined in es6.js to shim browsers w/ native TypedArrays
+
+    function makeTypedArray(elementSize, pack, unpack) {
+      // Each TypedArray type requires a distinct constructor instance with
+      // identical logic, which this produces.
+      var TypedArray = function() {
+        Object.defineProperty(this, 'constructor', {value: TypedArray});
+        $TypedArray$.apply(this, arguments);
+        makeArrayAccessors(this);
+      };
+      if ('__proto__' in TypedArray) {
+        TypedArray.__proto__ = $TypedArray$;
+      } else {
+        TypedArray.from = $TypedArray$.from;
+        TypedArray.of = $TypedArray$.of;
+      }
+
+      TypedArray.BYTES_PER_ELEMENT = elementSize;
+
+      var TypedArrayPrototype = function() {};
+      TypedArrayPrototype.prototype = $TypedArrayPrototype$;
+
+      TypedArray.prototype = new TypedArrayPrototype();
+
+      Object.defineProperty(TypedArray.prototype, 'BYTES_PER_ELEMENT', {value: elementSize});
+      Object.defineProperty(TypedArray.prototype, '_pack', {value: pack});
+      Object.defineProperty(TypedArray.prototype, '_unpack', {value: unpack});
+
+      return TypedArray;
+    }
+
+    var Int8Array = makeTypedArray(1, packI8, unpackI8);
+    var Uint8Array = makeTypedArray(1, packU8, unpackU8);
+    var Uint8ClampedArray = makeTypedArray(1, packU8Clamped, unpackU8);
+    var Int16Array = makeTypedArray(2, packI16, unpackI16);
+    var Uint16Array = makeTypedArray(2, packU16, unpackU16);
+    var Int32Array = makeTypedArray(4, packI32, unpackI32);
+    var Uint32Array = makeTypedArray(4, packU32, unpackU32);
+    var Float32Array = makeTypedArray(4, packF32, unpackF32);
+    var Float64Array = makeTypedArray(8, packF64, unpackF64);
+
+    global.Int8Array = global.Int8Array || Int8Array;
+    global.Uint8Array = global.Uint8Array || Uint8Array;
+    global.Uint8ClampedArray = global.Uint8ClampedArray || Uint8ClampedArray;
+    global.Int16Array = global.Int16Array || Int16Array;
+    global.Uint16Array = global.Uint16Array || Uint16Array;
+    global.Int32Array = global.Int32Array || Int32Array;
+    global.Uint32Array = global.Uint32Array || Uint32Array;
+    global.Float32Array = global.Float32Array || Float32Array;
+    global.Float64Array = global.Float64Array || Float64Array;
+  }());
+
+  //
+  // 6 The DataView View Type
+  //
+
+  (function() {
+    function r(array, index) {
+      return IsCallable(array.get) ? array.get(index) : array[index];
+    }
+
+    var IS_BIG_ENDIAN = (function() {
+      var u16array = new Uint16Array([0x1234]),
+        u8array = new Uint8Array(u16array.buffer);
+      return r(u8array, 0) === 0x12;
+    }());
+
+    // DataView(buffer, byteOffset=0, byteLength=undefined)
+    // WebIDL: Constructor(ArrayBuffer buffer,
+    //                     optional unsigned long byteOffset,
+    //                     optional unsigned long byteLength)
+    function DataView(buffer, byteOffset, byteLength) {
+      if (!(buffer instanceof ArrayBuffer || Class(buffer) === 'ArrayBuffer')) throw TypeError();
+
+      byteOffset = ToUint32(byteOffset);
+      if (byteOffset > buffer.byteLength)
+        throw RangeError('byteOffset out of range');
+
+      if (byteLength === undefined)
+        byteLength = buffer.byteLength - byteOffset;
+      else
+        byteLength = ToUint32(byteLength);
+
+      if ((byteOffset + byteLength) > buffer.byteLength)
+        throw RangeError('byteOffset and length reference an area beyond the end of the buffer');
+
+      Object.defineProperty(this, 'buffer', {value: buffer});
+      Object.defineProperty(this, 'byteLength', {value: byteLength});
+      Object.defineProperty(this, 'byteOffset', {value: byteOffset});
+    };
+
+    // get DataView.prototype.buffer
+    // get DataView.prototype.byteLength
+    // get DataView.prototype.byteOffset
+    // -- applied directly to instances by the constructor
+
+    function makeGetter(arrayType) {
+      return function GetViewValue(byteOffset, littleEndian) {
+        byteOffset = ToUint32(byteOffset);
+
+        if (byteOffset + arrayType.BYTES_PER_ELEMENT > this.byteLength)
+          throw RangeError('Array index out of range');
+
+        byteOffset += this.byteOffset;
+
+        var uint8Array = new Uint8Array(this.buffer, byteOffset, arrayType.BYTES_PER_ELEMENT),
+          bytes = [];
+        for (var i = 0; i < arrayType.BYTES_PER_ELEMENT; i += 1)
+          bytes.push(r(uint8Array, i));
+
+        if (Boolean(littleEndian) === Boolean(IS_BIG_ENDIAN))
+          bytes.reverse();
+
+        return r(new arrayType(new Uint8Array(bytes).buffer), 0);
+      };
+    }
+
+    Object.defineProperty(DataView.prototype, 'getUint8', {value: makeGetter(Uint8Array)});
+    Object.defineProperty(DataView.prototype, 'getInt8', {value: makeGetter(Int8Array)});
+    Object.defineProperty(DataView.prototype, 'getUint16', {value: makeGetter(Uint16Array)});
+    Object.defineProperty(DataView.prototype, 'getInt16', {value: makeGetter(Int16Array)});
+    Object.defineProperty(DataView.prototype, 'getUint32', {value: makeGetter(Uint32Array)});
+    Object.defineProperty(DataView.prototype, 'getInt32', {value: makeGetter(Int32Array)});
+    Object.defineProperty(DataView.prototype, 'getFloat32', {value: makeGetter(Float32Array)});
+    Object.defineProperty(DataView.prototype, 'getFloat64', {value: makeGetter(Float64Array)});
+
+    function makeSetter(arrayType) {
+      return function SetViewValue(byteOffset, value, littleEndian) {
+        byteOffset = ToUint32(byteOffset);
+        if (byteOffset + arrayType.BYTES_PER_ELEMENT > this.byteLength)
+          throw RangeError('Array index out of range');
+
+        // Get bytes
+        var typeArray = new arrayType([value]),
+          byteArray = new Uint8Array(typeArray.buffer),
+          bytes = [], i, byteView;
+
+        for (i = 0; i < arrayType.BYTES_PER_ELEMENT; i += 1)
+          bytes.push(r(byteArray, i));
+
+        // Flip if necessary
+        if (Boolean(littleEndian) === Boolean(IS_BIG_ENDIAN))
+          bytes.reverse();
+
+        // Write them
+        byteView = new Uint8Array(this.buffer, byteOffset, arrayType.BYTES_PER_ELEMENT);
+        byteView.set(bytes);
+      };
+    }
+
+    Object.defineProperty(DataView.prototype, 'setUint8', {value: makeSetter(Uint8Array)});
+    Object.defineProperty(DataView.prototype, 'setInt8', {value: makeSetter(Int8Array)});
+    Object.defineProperty(DataView.prototype, 'setUint16', {value: makeSetter(Uint16Array)});
+    Object.defineProperty(DataView.prototype, 'setInt16', {value: makeSetter(Int16Array)});
+    Object.defineProperty(DataView.prototype, 'setUint32', {value: makeSetter(Uint32Array)});
+    Object.defineProperty(DataView.prototype, 'setInt32', {value: makeSetter(Int32Array)});
+    Object.defineProperty(DataView.prototype, 'setFloat32', {value: makeSetter(Float32Array)});
+    Object.defineProperty(DataView.prototype, 'setFloat64', {value: makeSetter(Float64Array)});
+
+    global.DataView = global.DataView || DataView;
+
+  }());
+
+}(self));
+
+//Blob (IE9)
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+/* Blob.js
+ * A Blob implementation.
+ * 2014-07-24
+ *
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/dsamarin
+ * License: MIT
+ *   See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+ plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+(function (view) {
+  "use strict";
+
+  view.URL = view.URL || view.webkitURL;
+
+  if (view.Blob && view.URL) {
+    try {
+      new Blob;
+      return;
+    } catch (e) {}
+  }
+
+  // Internally we use a BlobBuilder implementation to base Blob off of
+  // in order to support older browsers that only have BlobBuilder
+  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
+      var
+        get_class = function(object) {
+          return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+        }
+        , FakeBlobBuilder = function BlobBuilder() {
+          this.data = [];
+        }
+        , FakeBlob = function Blob(data, type, encoding) {
+          this.data = data;
+          this.size = data.length;
+          this.type = type;
+          this.encoding = encoding;
+        }
+        , FBB_proto = FakeBlobBuilder.prototype
+        , FB_proto = FakeBlob.prototype
+        , FileReaderSync = view.FileReaderSync
+        , FileException = function(type) {
+          this.code = this[this.name = type];
+        }
+        , file_ex_codes = (
+          "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+          + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+        ).split(" ")
+        , file_ex_code = file_ex_codes.length
+        , real_URL = view.URL || view.webkitURL || view
+        , real_create_object_URL = real_URL.createObjectURL
+        , real_revoke_object_URL = real_URL.revokeObjectURL
+        , URL = real_URL
+        , btoa = view.btoa
+        , atob = view.atob
+
+        , ArrayBuffer = view.ArrayBuffer
+        , Uint8Array = view.Uint8Array
+
+        , origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/
+        ;
+      FakeBlob.fake = FB_proto.fake = true;
+      while (file_ex_code--) {
+        FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+      }
+      // Polyfill URL
+      if (!real_URL.createObjectURL) {
+        URL = view.URL = function(uri) {
+          var
+            uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
+            , uri_origin
+            ;
+          uri_info.href = uri;
+          if (!("origin" in uri_info)) {
+            if (uri_info.protocol.toLowerCase() === "data:") {
+              uri_info.origin = null;
+            } else {
+              uri_origin = uri.match(origin);
+              uri_info.origin = uri_origin && uri_origin[1];
+            }
+          }
+          return uri_info;
+        };
+      }
+      URL.createObjectURL = function(blob) {
+        var
+          type = blob.type
+          , data_URI_header
+          ;
+        if (type === null) {
+          type = "application/octet-stream";
+        }
+        if (blob instanceof FakeBlob) {
+          data_URI_header = "data:" + type;
+          if (blob.encoding === "base64") {
+            return data_URI_header + ";base64," + blob.data;
+          } else if (blob.encoding === "URI") {
+            return data_URI_header + "," + decodeURIComponent(blob.data);
+          } if (btoa) {
+            return data_URI_header + ";base64," + btoa(blob.data);
+          } else {
+            return data_URI_header + "," + encodeURIComponent(blob.data);
+          }
+        } else if (real_create_object_URL) {
+          return real_create_object_URL.call(real_URL, blob);
+        }
+      };
+      URL.revokeObjectURL = function(object_URL) {
+        if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+          real_revoke_object_URL.call(real_URL, object_URL);
+        }
+      };
+      FBB_proto.append = function(data/*, endings*/) {
+        var bb = this.data;
+        // decode data to a binary string
+        if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+          var
+            str = ""
+            , buf = new Uint8Array(data)
+            , i = 0
+            , buf_len = buf.length
+            ;
+          for (; i < buf_len; i++) {
+            str += String.fromCharCode(buf[i]);
+          }
+          bb.push(str);
+        } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+          if (FileReaderSync) {
+            var fr = new FileReaderSync;
+            bb.push(fr.readAsBinaryString(data));
+          } else {
+            // async FileReader won't work as BlobBuilder is sync
+            throw new FileException("NOT_READABLE_ERR");
+          }
+        } else if (data instanceof FakeBlob) {
+          if (data.encoding === "base64" && atob) {
+            bb.push(atob(data.data));
+          } else if (data.encoding === "URI") {
+            bb.push(decodeURIComponent(data.data));
+          } else if (data.encoding === "raw") {
+            bb.push(data.data);
+          }
+        } else {
+          if (typeof data !== "string") {
+            data += ""; // convert unsupported types to strings
+          }
+          // decode UTF-16 to binary string
+          bb.push(unescape(encodeURIComponent(data)));
+        }
+      };
+      FBB_proto.getBlob = function(type) {
+        if (!arguments.length) {
+          type = null;
+        }
+        return new FakeBlob(this.data.join(""), type, "raw");
+      };
+      FBB_proto.toString = function() {
+        return "[object BlobBuilder]";
+      };
+      FB_proto.slice = function(start, end, type) {
+        var args = arguments.length;
+        if (args < 3) {
+          type = null;
+        }
+        return new FakeBlob(
+          this.data.slice(start, args > 1 ? end : this.data.length)
+          , type
+          , this.encoding
+        );
+      };
+      FB_proto.toString = function() {
+        return "[object Blob]";
+      };
+      FB_proto.close = function() {
+        this.size = 0;
+        delete this.data;
+      };
+      return FakeBlobBuilder;
+    }(view));
+
+  view.Blob = function(blobParts, options) {
+    var type = options ? (options.type || "") : "";
+    var builder = new BlobBuilder();
+    if (blobParts) {
+      for (var i = 0, len = blobParts.length; i < len; i++) {
+        if (Uint8Array && blobParts[i] instanceof Uint8Array) {
+          builder.append(blobParts[i].buffer);
+        }
+        else {
+          builder.append(blobParts[i]);
+        }
+      }
+    }
+    var blob = builder.getBlob(type);
+    if (!blob.slice && blob.webkitSlice) {
+      blob.slice = blob.webkitSlice;
+    }
+    return blob;
+  };
+
+  var getPrototypeOf = Object.getPrototypeOf || function(object) {
+      return object.__proto__;
+    };
+  view.Blob.prototype = getPrototypeOf(new view.Blob());
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
+
+//FormData (IE9)
+/*! @source https://github.com/francois2metz/html5-formdata/blob/master/formdata.js */
+/**
+ * Emulate FormData for some browsers
+ * MIT License
+ * (c) 2010 François de Metz
+ */
+(function(w) {
+  if (w.FormData)
+    return;
+  function FormData() {
+    this.fake = true;
+    this.boundary = "--------FormData" + Math.random();
+    this._fields = [];
+  }
+  FormData.prototype.append = function(key, value) {
+    this._fields.push([key, value]);
+  }
+  FormData.prototype.toString = function() {
+    var boundary = this.boundary;
+    var body = "";
+    this._fields.forEach(function(field) {
+      body += "--" + boundary + "\r\n";
+      // file upload
+      if (field[1].name) {
+        var file = field[1];
+        body += "Content-Disposition: form-data; name=\""+ field[0] +"\"; filename=\""+ file.name +"\"\r\n";
+        body += "Content-Type: "+ file.type +"\r\n\r\n";
+        body += file.getAsBinary() + "\r\n";
+      } else {
+        body += "Content-Disposition: form-data; name=\""+ field[0] +"\";\r\n\r\n";
+        body += field[1] + "\r\n";
+      }
+    });
+    body += "--" + boundary +"--";
+    return body;
+  }
+  w.FormData = FormData;
+})(window);
+
+// Intl (IE9, IE10, all Safari, all Android)
+/*! @source https://github.com/andyearnshaw/Intl.js */
+/*! @licence https://github.com/andyearnshaw/Intl.js/blob/master/LICENSE.txt */
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):e.IntlPolyfill=r()}(this,function(){"use strict";function e(e){if("function"==typeof Math.log10)return Math.floor(Math.log10(e));var r=Math.round(Math.log(e)*Math.LOG10E);return r-(Number("1e"+r)>e)}function r(e){for(var t in e)(e instanceof r||ee.call(e,t))&&re(this,t,{value:e[t],enumerable:!0,writable:!0,configurable:!0})}function t(){re(this,"length",{writable:!0,value:0}),arguments.length&&oe.apply(this,ae.call(arguments))}function n(){if(ue.disableRegExpRestore)return function(){};for(var e={lastMatch:RegExp.lastMatch||"",leftContext:RegExp.leftContext,multiline:RegExp.multiline,input:RegExp.input},r=!1,n=1;n<=9;n++)r=(e["$"+n]=RegExp["$"+n])||r;return function(){var n=/[.?*+^$[\]\\(){}|-]/g,a=e.lastMatch.replace(n,"\\$&"),i=new t;if(r)for(var o=1;o<=9;o++){var s=e["$"+o];s?(s=s.replace(n,"\\$&"),a=a.replace(s,"("+s+")")):a="()"+a,oe.call(i,a.slice(0,a.indexOf("(")+1)),a=a.slice(a.indexOf("(")+1)}var l=se.call(i,"")+a;l=l.replace(/(\\\(|\\\)|[^()])+/g,function(e){return"[\\s\\S]{"+e.replace("\\","").length+"}"});var c=new RegExp(l,e.multiline?"gm":"g");c.lastIndex=e.leftContext.length,c.exec(e.input)}}function a(e){if(null===e)throw new TypeError("Cannot convert null or undefined to object");return Object(e)}function i(e){return ee.call(e,"__getInternalProperties")?e.__getInternalProperties(ge):ne(null)}function o(e){Se=e}function s(e){for(var r=e.length;r--;){var t=e.charAt(r);t>="a"&&t<="z"&&(e=e.slice(0,r)+t.toUpperCase()+e.slice(r+1))}return e}function l(e){return!!ze.test(e)&&(!ke.test(e)&&!Fe.test(e))}function c(e){var r=void 0,t=void 0;e=e.toLowerCase(),t=e.split("-");for(var n=1,a=t.length;n<a;n++)if(2===t[n].length)t[n]=t[n].toUpperCase();else if(4===t[n].length)t[n]=t[n].charAt(0).toUpperCase()+t[n].slice(1);else if(1===t[n].length&&"x"!==t[n])break;e=se.call(t,"-"),(r=e.match(Oe))&&r.length>1&&(r.sort(),e=e.replace(RegExp("(?:"+Oe.source+")+","i"),se.call(r,""))),ee.call(Ee.tags,e)&&(e=Ee.tags[e]),t=e.split("-");for(var i=1,o=t.length;i<o;i++)ee.call(Ee.subtags,t[i])?t[i]=Ee.subtags[t[i]]:ee.call(Ee.extLang,t[i])&&(t[i]=Ee.extLang[t[i]][0],1===i&&Ee.extLang[t[1]][1]===t[0]&&(t=ae.call(t,i++),o-=1));return se.call(t,"-")}function u(){return Se}function g(e){var r=String(e),t=s(r);return Le.test(t)!==!1}function f(e){if(void 0===e)return new t;var r=new t;e="string"==typeof e?[e]:e;for(var n=a(e),i=n.length,o=0;o<i;){var s=String(o),u=s in n;if(u){var g=n[s];if(null===g||"string"!=typeof g&&"object"!==("undefined"==typeof g?"undefined":ir.typeof(g)))throw new TypeError("String or Object type expected");var f=String(g);if(!l(f))throw new RangeError("'"+f+"' is not a structurally valid language tag");f=c(f),te.call(r,f)===-1&&oe.call(r,f)}o++}return r}function m(e,r){for(var t=r;t;){if(te.call(e,t)>-1)return t;var n=t.lastIndexOf("-");if(n<0)return;n>=2&&"-"===t.charAt(n-2)&&(n-=2),t=t.substring(0,n)}}function v(e,t){for(var n=0,a=t.length,i=void 0,o=void 0,s=void 0;n<a&&!i;)o=t[n],s=String(o).replace(or,""),i=m(e,s),n++;var l=new r;if(void 0!==i){if(l["[[locale]]"]=i,String(o)!==String(s)){var c=o.match(or)[0],g=o.indexOf("-u-");l["[[extension]]"]=c,l["[[extensionIndex]]"]=g}}else l["[[locale]]"]=u();return l}function d(e,r){return v(e,r)}function h(e,t,n,a,i){if(0===e.length)throw new ReferenceError("No locale data has been provided for this object yet.");var o=n["[[localeMatcher]]"],s=void 0;s="lookup"===o?v(e,t):d(e,t);var l=s["[[locale]]"],u=void 0,g=void 0;if(ee.call(s,"[[extension]]")){var f=s["[[extension]]"],m=String.prototype.split;u=m.call(f,"-"),g=u.length}var h=new r;h["[[dataLocale]]"]=l;for(var p="-u",y=0,b=a.length;y<b;){var w=a[y],x=i[l],D=x[w],j=D[0],z="",k=te;if(void 0!==u){var F=k.call(u,w);if(F!==-1)if(F+1<g&&u[F+1].length>2){var O=u[F+1],S=k.call(D,O);S!==-1&&(j=O,z="-"+w+"-"+j)}else{var E=k(D,"true");E!==-1&&(j="true")}}if(ee.call(n,"[["+w+"]]")){var L=n["[["+w+"]]"];k.call(D,L)!==-1&&L!==j&&(j=L,z="")}h["[["+w+"]]"]=j,p+=z,y++}if(p.length>2){var P=l.indexOf("-x-");if(P===-1)l+=p;else{var N=l.substring(0,P),T=l.substring(P);l=N+p+T}l=c(l)}return h["[[locale]]"]=l,h}function p(e,r){for(var n=r.length,a=new t,i=0;i<n;){var o=r[i],s=String(o).replace(or,""),l=m(e,s);void 0!==l&&oe.call(a,o),i++}var c=ae.call(a);return c}function y(e,r){return p(e,r)}function b(e,t,n){var i=void 0,o=void 0;if(void 0!==n&&(n=new r(a(n)),i=n.localeMatcher,void 0!==i&&(i=String(i),"lookup"!==i&&"best fit"!==i)))throw new RangeError('matcher should be "lookup" or "best fit"');o=void 0===i||"best fit"===i?y(e,t):p(e,t);for(var s in o)ee.call(o,s)&&re(o,s,{writable:!1,configurable:!1,value:o[s]});return re(o,"length",{writable:!1}),o}function w(e,r,t,n,a){var i=e[r];if(void 0!==i){if(i="boolean"===t?Boolean(i):"string"===t?String(i):i,void 0!==n&&te.call(n,i)===-1)throw new RangeError("'"+i+"' is not an allowed value for `"+r+"`");return i}return a}function x(e,r,t,n,a){var i=e[r];if(void 0!==i){if(i=Number(i),isNaN(i)||i<t||i>n)throw new RangeError("Value is not a number or outside accepted range");return Math.floor(i)}return a}function D(){var e=arguments[0],r=arguments[1];return this&&this!==sr?j(a(this),e,r):new sr.NumberFormat(e,r)}function j(e,o,s){var l=i(e),c=n();if(l["[[initializedIntlObject]]"]===!0)throw new TypeError("`this` object has already been initialized as an Intl object");re(e,"__getInternalProperties",{value:function(){if(arguments[0]===ge)return l}}),l["[[initializedIntlObject]]"]=!0;var u=f(o);s=void 0===s?{}:a(s);var m=new r,v=w(s,"localeMatcher","string",new t("lookup","best fit"),"best fit");m["[[localeMatcher]]"]=v;var d=ue.NumberFormat["[[localeData]]"],p=h(ue.NumberFormat["[[availableLocales]]"],u,m,ue.NumberFormat["[[relevantExtensionKeys]]"],d);l["[[locale]]"]=p["[[locale]]"],l["[[numberingSystem]]"]=p["[[nu]]"],l["[[dataLocale]]"]=p["[[dataLocale]]"];var y=p["[[dataLocale]]"],b=w(s,"style","string",new t("decimal","percent","currency"),"decimal");l["[[style]]"]=b;var D=w(s,"currency","string");if(void 0!==D&&!g(D))throw new RangeError("'"+D+"' is not a valid currency code");if("currency"===b&&void 0===D)throw new TypeError("Currency code is required when style is currency");var j=void 0;"currency"===b&&(D=D.toUpperCase(),l["[[currency]]"]=D,j=z(D));var F=w(s,"currencyDisplay","string",new t("code","symbol","name"),"symbol");"currency"===b&&(l["[[currencyDisplay]]"]=F);var O=x(s,"minimumIntegerDigits",1,21,1);l["[[minimumIntegerDigits]]"]=O;var S="currency"===b?j:0,E=x(s,"minimumFractionDigits",0,20,S);l["[[minimumFractionDigits]]"]=E;var L="currency"===b?Math.max(E,j):"percent"===b?Math.max(E,0):Math.max(E,3),P=x(s,"maximumFractionDigits",E,20,L);l["[[maximumFractionDigits]]"]=P;var N=s.minimumSignificantDigits,T=s.maximumSignificantDigits;void 0===N&&void 0===T||(N=x(s,"minimumSignificantDigits",1,21,1),T=x(s,"maximumSignificantDigits",N,21,21),l["[[minimumSignificantDigits]]"]=N,l["[[maximumSignificantDigits]]"]=T);var _=w(s,"useGrouping","boolean",void 0,!0);l["[[useGrouping]]"]=_;var I=d[y],A=I.patterns,M=A[b];return l["[[positivePattern]]"]=M.positivePattern,l["[[negativePattern]]"]=M.negativePattern,l["[[boundFormat]]"]=void 0,l["[[initializedNumberFormat]]"]=!0,Q&&(e.format=k.call(e)),c(),e}function z(e){return void 0!==lr[e]?lr[e]:2}function k(){var e=null!==this&&"object"===ir.typeof(this)&&i(this);if(!e||!e["[[initializedNumberFormat]]"])throw new TypeError("`this` value for format() is not an initialized Intl.NumberFormat object.");if(void 0===e["[[boundFormat]]"]){var r=function(e){return S(this,Number(e))},t=ce.call(r,this);e["[[boundFormat]]"]=t}return e["[[boundFormat]]"]}function F(e,r){for(var t=O(e,r),n=[],a=0,i=0;t.length>i;i++){var o=t[i],s={};s.type=o["[[type]]"],s.value=o["[[value]]"],n[a]=s,a+=1}return n}function O(e,r){var n=i(e),a=n["[[dataLocale]]"],o=n["[[numberingSystem]]"],s=ue.NumberFormat["[[localeData]]"][a],l=s.symbols[o]||s.symbols.latn,c=void 0;!isNaN(r)&&r<0?(r=-r,c=n["[[negativePattern]]"]):c=n["[[positivePattern]]"];for(var u=new t,g=c.indexOf("{",0),f=0,m=0,v=c.length;g>-1&&g<v;){if(f=c.indexOf("}",g),f===-1)throw new Error;if(g>m){var d=c.substring(m,g);oe.call(u,{"[[type]]":"literal","[[value]]":d})}var h=c.substring(g+1,f);if("number"===h)if(isNaN(r)){var p=l.nan;oe.call(u,{"[[type]]":"nan","[[value]]":p})}else if(isFinite(r)){"percent"===n["[[style]]"]&&isFinite(r)&&(r*=100);var y=void 0;y=ee.call(n,"[[minimumSignificantDigits]]")&&ee.call(n,"[[maximumSignificantDigits]]")?E(r,n["[[minimumSignificantDigits]]"],n["[[maximumSignificantDigits]]"]):L(r,n["[[minimumIntegerDigits]]"],n["[[minimumFractionDigits]]"],n["[[maximumFractionDigits]]"]),cr[o]?!function(){var e=cr[o];y=String(y).replace(/\d/g,function(r){return e[r]})}():y=String(y);var b=void 0,w=void 0,x=y.indexOf(".",0);if(x>0?(b=y.substring(0,x),w=y.substring(x+1,x.length)):(b=y,w=void 0),n["[[useGrouping]]"]===!0){var D=l.group,j=[],z=s.patterns.primaryGroupSize||3,k=s.patterns.secondaryGroupSize||z;if(b.length>z){var F=b.length-z,O=F%k,S=b.slice(0,O);for(S.length&&oe.call(j,S);O<F;)oe.call(j,b.slice(O,O+k)),O+=k;oe.call(j,b.slice(F))}else oe.call(j,b);if(0===j.length)throw new Error;for(;j.length;){var P=le.call(j);oe.call(u,{"[[type]]":"integer","[[value]]":P}),j.length&&oe.call(u,{"[[type]]":"group","[[value]]":D})}}else oe.call(u,{"[[type]]":"integer","[[value]]":b});if(void 0!==w){var N=l.decimal;oe.call(u,{"[[type]]":"decimal","[[value]]":N}),oe.call(u,{"[[type]]":"fraction","[[value]]":w})}}else{var T=l.infinity;oe.call(u,{"[[type]]":"infinity","[[value]]":T})}else if("plusSign"===h){var _=l.plusSign;oe.call(u,{"[[type]]":"plusSign","[[value]]":_})}else if("minusSign"===h){var I=l.minusSign;oe.call(u,{"[[type]]":"minusSign","[[value]]":I})}else if("percentSign"===h&&"percent"===n["[[style]]"]){var A=l.percentSign;oe.call(u,{"[[type]]":"literal","[[value]]":A})}else if("currency"===h&&"currency"===n["[[style]]"]){var M=n["[[currency]]"],R=void 0;"code"===n["[[currencyDisplay]]"]?R=M:"symbol"===n["[[currencyDisplay]]"]?R=s.currencies[M]||M:"name"===n["[[currencyDisplay]]"]&&(R=M),oe.call(u,{"[[type]]":"currency","[[value]]":R})}else{var q=c.substring(g,f);oe.call(u,{"[[type]]":"literal","[[value]]":q})}m=f+1,g=c.indexOf("{",m)}if(m<v){var C=c.substring(m,v);oe.call(u,{"[[type]]":"literal","[[value]]":C})}return u}function S(e,r){for(var t=O(e,r),n="",a=0;t.length>a;a++){var i=t[a];n+=i["[[value]]"]}return n}function E(r,t,n){var a=n,i=void 0,o=void 0;if(0===r)i=se.call(Array(a+1),"0"),o=0;else{o=e(Math.abs(r));var s=Math.round(Math.exp(Math.abs(o-a+1)*Math.LN10));i=String(Math.round(o-a+1<0?r*s:r/s))}if(o>=a)return i+se.call(Array(o-a+1+1),"0");if(o===a-1)return i;if(o>=0?i=i.slice(0,o+1)+"."+i.slice(o+1):o<0&&(i="0."+se.call(Array(-(o+1)+1),"0")+i),i.indexOf(".")>=0&&n>t){for(var l=n-t;l>0&&"0"===i.charAt(i.length-1);)i=i.slice(0,-1),l--;"."===i.charAt(i.length-1)&&(i=i.slice(0,-1))}return i}function L(e,r,t,n){var a=n,i=Math.pow(10,a)*e,o=0===i?"0":i.toFixed(0),s=void 0,l=(s=o.indexOf("e"))>-1?o.slice(s+1):0;l&&(o=o.slice(0,s).replace(".",""),o+=se.call(Array(l-(o.length-1)+1),"0"));var c=void 0;if(0!==a){var u=o.length;if(u<=a){var g=se.call(Array(a+1-u+1),"0");o=g+o,u=a+1}var f=o.substring(0,u-a),m=o.substring(u-a,o.length);o=f+"."+m,c=f.length}else c=o.length;for(var v=n-t;v>0&&"0"===o.slice(-1);)o=o.slice(0,-1),v--;if("."===o.slice(-1)&&(o=o.slice(0,-1)),c<r){var d=se.call(Array(r-c+1),"0");o=d+o}return o}function P(e){for(var r=0;r<vr.length;r+=1)if(e.hasOwnProperty(vr[r]))return!1;return!0}function N(e){for(var r=0;r<mr.length;r+=1)if(e.hasOwnProperty(mr[r]))return!1;return!0}function T(e,r){for(var t={_:{}},n=0;n<mr.length;n+=1)e[mr[n]]&&(t[mr[n]]=e[mr[n]]),e._[mr[n]]&&(t._[mr[n]]=e._[mr[n]]);for(var a=0;a<vr.length;a+=1)r[vr[a]]&&(t[vr[a]]=r[vr[a]]),r._[vr[a]]&&(t._[vr[a]]=r._[vr[a]]);return t}function _(e){return e.pattern12=e.extendedPattern.replace(/'([^']*)'/g,function(e,r){return r?r:"'"}),e.pattern=e.pattern12.replace("{ampm}","").replace(gr,""),e}function I(e,r){switch(e.charAt(0)){case"G":return r.era=["short","short","short","long","narrow"][e.length-1],"{era}";case"y":case"Y":case"u":case"U":case"r":return r.year=2===e.length?"2-digit":"numeric","{year}";case"Q":case"q":return r.quarter=["numeric","2-digit","short","long","narrow"][e.length-1],"{quarter}";case"M":case"L":return r.month=["numeric","2-digit","short","long","narrow"][e.length-1],"{month}";case"w":return r.week=2===e.length?"2-digit":"numeric","{weekday}";case"W":return r.week="numeric","{weekday}";case"d":return r.day=2===e.length?"2-digit":"numeric","{day}";case"D":case"F":case"g":return r.day="numeric","{day}";case"E":return r.weekday=["short","short","short","long","narrow","short"][e.length-1],"{weekday}";case"e":return r.weekday=["numeric","2-digit","short","long","narrow","short"][e.length-1],"{weekday}";case"c":return r.weekday=["numeric",void 0,"short","long","narrow","short"][e.length-1],"{weekday}";case"a":case"b":case"B":return r.hour12=!0,"{ampm}";case"h":case"H":return r.hour=2===e.length?"2-digit":"numeric","{hour}";case"k":case"K":return r.hour12=!0,r.hour=2===e.length?"2-digit":"numeric","{hour}";case"m":return r.minute=2===e.length?"2-digit":"numeric","{minute}";case"s":return r.second=2===e.length?"2-digit":"numeric","{second}";case"S":case"A":return r.second="numeric","{second}";case"z":case"Z":case"O":case"v":case"V":case"X":case"x":return r.timeZoneName=e.length<4?"short":"long","{timeZoneName}"}}function A(e,r){if(!fr.test(r)){var t={originalPattern:r,_:{}};return t.extendedPattern=r.replace(ur,function(e){return I(e,t._)}),e.replace(ur,function(e){return I(e,t)}),_(t)}}function M(e){var r=e.availableFormats,t=e.timeFormats,n=e.dateFormats,a=[],i=void 0,o=void 0,s=void 0,l=void 0,c=void 0,u=[],g=[];for(i in r)r.hasOwnProperty(i)&&(o=r[i],s=A(i,o),s&&(a.push(s),P(s)?g.push(s):N(s)&&u.push(s)));for(i in t)t.hasOwnProperty(i)&&(o=t[i],s=A(i,o),s&&(a.push(s),u.push(s)));for(i in n)n.hasOwnProperty(i)&&(o=n[i],s=A(i,o),s&&(a.push(s),g.push(s)));for(l=0;l<u.length;l+=1)for(c=0;c<g.length;c+=1)o="long"===g[c].month?g[c].weekday?e.full:e.long:"short"===g[c].month?e.medium:e.short,s=T(g[c],u[l]),s.originalPattern=o,s.extendedPattern=o.replace("{0}",u[l].extendedPattern).replace("{1}",g[c].extendedPattern).replace(/^[,\s]+|[,\s]+$/gi,""),a.push(_(s));return a}function R(e,r){if(dr[e]&&dr[e][r]){var t;return t={originalPattern:dr[e][r],_:Re({},e,r),extendedPattern:"{"+e+"}"},Re(t,e,r),Re(t,"pattern12","{"+e+"}"),Re(t,"pattern","{"+e+"}"),t}}function q(e,r,t,n,a){var i=e[r]&&e[r][t]?e[r][t]:e.gregory[t],o={narrow:["short","long"],short:["long","narrow"],long:["short","narrow"]},s=ee.call(i,n)?i[n]:ee.call(i,o[n][0])?i[o[n][0]]:i[o[n][1]];return null!==a?s[a]:s}function C(){var e=arguments[0],r=arguments[1];return this&&this!==sr?G(a(this),e,r):new sr.DateTimeFormat(e,r)}function G(e,a,o){var l=i(e),c=n();if(l["[[initializedIntlObject]]"]===!0)throw new TypeError("`this` object has already been initialized as an Intl object");re(e,"__getInternalProperties",{value:function(){if(arguments[0]===ge)return l}}),l["[[initializedIntlObject]]"]=!0;var u=f(a);o=B(o,"any","date");var g=new r,m=w(o,"localeMatcher","string",new t("lookup","best fit"),"best fit");g["[[localeMatcher]]"]=m;var v=ue.DateTimeFormat,d=v["[[localeData]]"],p=h(v["[[availableLocales]]"],u,g,v["[[relevantExtensionKeys]]"],d);l["[[locale]]"]=p["[[locale]]"],l["[[calendar]]"]=p["[[ca]]"],l["[[numberingSystem]]"]=p["[[nu]]"],l["[[dataLocale]]"]=p["[[dataLocale]]"];var y=p["[[dataLocale]]"],b=o.timeZone;if(void 0!==b&&(b=s(b),"UTC"!==b))throw new RangeError("timeZone is not supported.");l["[[timeZone]]"]=b,g=new r;for(var x in pr)if(ee.call(pr,x)){var D=w(o,x,"string",pr[x]);g["[["+x+"]]"]=D}var j=void 0,z=d[y],k=Z(z.formats);if(m=w(o,"formatMatcher","string",new t("basic","best fit"),"best fit"),z.formats=k,"basic"===m)j=U(g,k);else{var F=w(o,"hour12","boolean");g.hour12=void 0===F?z.hour12:F,j=$(g,k)}for(var O in pr)if(ee.call(pr,O)&&ee.call(j,O)){var S=j[O];S=j._&&ee.call(j._,O)?j._[O]:S,l["[["+O+"]]"]=S}var E=void 0,L=w(o,"hour12","boolean");if(l["[[hour]]"])if(L=void 0===L?z.hour12:L,l["[[hour12]]"]=L,L===!0){var P=z.hourNo0;l["[[hourNo0]]"]=P,E=j.pattern12}else E=j.pattern;else E=j.pattern;return l["[[pattern]]"]=E,l["[[boundFormat]]"]=void 0,l["[[initializedDateTimeFormat]]"]=!0,Q&&(e.format=K.call(e)),c(),e}function Z(e){return"[object Array]"===Object.prototype.toString.call(e)?e:M(e)}function B(e,t,n){if(void 0===e)e=null;else{var i=a(e);e=new r;for(var o in i)e[o]=i[o]}var s=ne;e=s(e);var l=!0;return"date"!==t&&"any"!==t||void 0===e.weekday&&void 0===e.year&&void 0===e.month&&void 0===e.day||(l=!1),"time"!==t&&"any"!==t||void 0===e.hour&&void 0===e.minute&&void 0===e.second||(l=!1),!l||"date"!==n&&"all"!==n||(e.year=e.month=e.day="numeric"),!l||"time"!==n&&"all"!==n||(e.hour=e.minute=e.second="numeric"),e}function U(e,r){for(var t=120,n=20,a=8,i=6,o=6,s=3,l=-(1/0),c=void 0,u=0,g=r.length;u<g;){var f=r[u],m=0;for(var v in pr)if(ee.call(pr,v)){var d=e["[["+v+"]]"],h=ee.call(f,v)?f[v]:void 0;if(void 0===d&&void 0!==h)m-=n;else if(void 0!==d&&void 0===h)m-=t;else{var p=["2-digit","numeric","narrow","short","long"],y=te.call(p,d),b=te.call(p,h),w=Math.max(Math.min(b-y,2),-2);2===w?m-=i:1===w?m-=s:w===-1?m-=o:w===-2&&(m-=a)}}m>l&&(l=m,c=f),u++}return c}function $(e,r){var t=[];for(var n in pr)ee.call(pr,n)&&void 0!==e["[["+n+"]]"]&&t.push(n);if(1===t.length){var a=R(t[0],e["[["+t[0]+"]]"]);if(a)return a}for(var i=120,o=20,s=8,l=6,c=6,u=3,g=2,f=1,m=-(1/0),v=void 0,d=0,h=r.length;d<h;){var p=r[d],y=0;for(var b in pr)if(ee.call(pr,b)){var w=e["[["+b+"]]"],x=ee.call(p,b)?p[b]:void 0,D=ee.call(p._,b)?p._[b]:void 0;if(w!==D&&(y-=g),void 0===w&&void 0!==x)y-=o;else if(void 0!==w&&void 0===x)y-=i;else{var j=["2-digit","numeric","narrow","short","long"],z=te.call(j,w),k=te.call(j,x),F=Math.max(Math.min(k-z,2),-2);k<=1&&z>=2||k>=2&&z<=1?F>0?y-=l:F<0&&(y-=s):F>1?y-=u:F<-1&&(y-=c)}}p._.hour12!==e.hour12&&(y-=f),y>m&&(m=y,v=p),d++}return v}function K(){var e=null!==this&&"object"===ir.typeof(this)&&i(this);if(!e||!e["[[initializedDateTimeFormat]]"])throw new TypeError("`this` value for format() is not an initialized Intl.DateTimeFormat object.");if(void 0===e["[[boundFormat]]"]){var r=function(){var e=Number(0===arguments.length?Date.now():arguments[0]);return H(this,e)},t=ce.call(r,this);e["[[boundFormat]]"]=t}return e["[[boundFormat]]"]}function Y(e,r){if(!isFinite(r))throw new RangeError("Invalid valid date passed to format");var a=e.__getInternalProperties(ge);n();for(var i=a["[[locale]]"],o=new sr.NumberFormat([i],{useGrouping:!1}),s=new sr.NumberFormat([i],{minimumIntegerDigits:2,useGrouping:!1}),l=X(r,a["[[calendar]]"],a["[[timeZone]]"]),c=a["[[pattern]]"],u=new t,g=0,f=c.indexOf("{"),m=0,v=a["[[dataLocale]]"],d=ue.DateTimeFormat["[[localeData]]"][v].calendars,h=a["[[calendar]]"];f!==-1;){var p=void 0;if(m=c.indexOf("}",f),m===-1)throw new Error("Unclosed pattern");f>g&&oe.call(u,{type:"literal",value:c.substring(g,f)});var y=c.substring(f+1,m);if(pr.hasOwnProperty(y)){var b=a["[["+y+"]]"],w=l["[["+y+"]]"];if("year"===y&&w<=0?w=1-w:"month"===y?w++:"hour"===y&&a["[[hour12]]"]===!0&&(w%=12,0===w&&a["[[hourNo0]]"]===!0&&(w=12)),"numeric"===b)p=S(o,w);else if("2-digit"===b)p=S(s,w),p.length>2&&(p=p.slice(-2));else if(b in hr)switch(y){case"month":p=q(d,h,"months",b,l["[["+y+"]]"]);break;case"weekday":try{p=q(d,h,"days",b,l["[["+y+"]]"])}catch(e){throw new Error("Could not find weekday data for locale "+i)}break;case"timeZoneName":p="";break;case"era":try{p=q(d,h,"eras",b,l["[["+y+"]]"])}catch(e){throw new Error("Could not find era data for locale "+i)}break;default:p=l["[["+y+"]]"]}oe.call(u,{type:y,value:p})}else if("ampm"===y){var x=l["[[hour]]"];p=q(d,h,"dayPeriods",x>11?"pm":"am",null),oe.call(u,{type:"dayPeriod",value:p})}else oe.call(u,{type:"literal",value:c.substring(f,m+1)});g=m+1,f=c.indexOf("{",g)}return m<c.length-1&&oe.call(u,{type:"literal",value:c.substr(m+1)}),u}function H(e,r){for(var t=Y(e,r),n="",a=0;t.length>a;a++){var i=t[a];n+=i.value}return n}function W(e,r){for(var t=Y(e,r),n=[],a=0;t.length>a;a++){var i=t[a];n.push({type:i.type,value:i.value})}return n}function X(e,t,n){var a=new Date(e),i="get"+(n||"");return new r({"[[weekday]]":a[i+"Day"](),"[[era]]":+(a[i+"FullYear"]()>=0),"[[year]]":a[i+"FullYear"](),"[[month]]":a[i+"Month"](),"[[day]]":a[i+"Date"](),"[[hour]]":a[i+"Hours"](),"[[minute]]":a[i+"Minutes"](),"[[second]]":a[i+"Seconds"](),"[[inDST]]":!1})}function V(e,r){if(!e.number)throw new Error("Object passed doesn't contain locale data for Intl.NumberFormat");var t=void 0,n=[r],a=r.split("-");for(a.length>2&&4===a[1].length&&oe.call(n,a[0]+"-"+a[2]);t=le.call(n);)oe.call(ue.NumberFormat["[[availableLocales]]"],t),ue.NumberFormat["[[localeData]]"][t]=e.number,e.date&&(e.date.nu=e.number.nu,oe.call(ue.DateTimeFormat["[[availableLocales]]"],t),ue.DateTimeFormat["[[localeData]]"][t]=e.date);void 0===Se&&o(r)}var J=function(){var e={};try{return Object.defineProperty(e,"a",{get:function(){return 1}}),1===e.a}catch(e){return!1}}(),Q=!J&&!Object.prototype.__defineGetter__,ee=Object.prototype.hasOwnProperty,re=J?Object.defineProperty:function(e,r,t){"get"in t&&e.__defineGetter__?e.__defineGetter__(r,t.get):(!ee.call(e,r)||"value"in t)&&(e[r]=t.value)},te=Array.prototype.indexOf||function(e){var r=this;if(!r.length)return-1;for(var t=arguments[1]||0,n=r.length;t<n;t++)if(r[t]===e)return t;return-1},ne=Object.create||function(e,r){function t(){}var n=void 0;t.prototype=e,n=new t;for(var a in r)ee.call(r,a)&&re(n,a,r[a]);return n},ae=Array.prototype.slice,ie=Array.prototype.concat,oe=Array.prototype.push,se=Array.prototype.join,le=Array.prototype.shift,ce=Function.prototype.bind||function(e){var r=this,t=ae.call(arguments,1);return 1===r.length?function(){return r.apply(e,ie.call(t,ae.call(arguments)))}:function(){return r.apply(e,ie.call(t,ae.call(arguments)))}},ue=ne(null),ge=Math.random();r.prototype=ne(null),t.prototype=ne(null);var fe="[a-z]{3}(?:-[a-z]{3}){0,2}",me="(?:[a-z]{2,3}(?:-"+fe+")?|[a-z]{4}|[a-z]{5,8})",ve="[a-z]{4}",de="(?:[a-z]{2}|\\d{3})",he="(?:[a-z0-9]{5,8}|\\d[a-z0-9]{3})",pe="[0-9a-wy-z]",ye=pe+"(?:-[a-z0-9]{2,8})+",be="x(?:-[a-z0-9]{1,8})+",we="(?:en-GB-oed|i-(?:ami|bnn|default|enochian|hak|klingon|lux|mingo|navajo|pwn|tao|tay|tsu)|sgn-(?:BE-FR|BE-NL|CH-DE))",xe="(?:art-lojban|cel-gaulish|no-bok|no-nyn|zh-(?:guoyu|hakka|min|min-nan|xiang))",De="(?:"+we+"|"+xe+")",je=me+"(?:-"+ve+")?(?:-"+de+")?(?:-"+he+")*(?:-"+ye+")*(?:-"+be+")?",ze=RegExp("^(?:"+je+"|"+be+"|"+De+")$","i"),ke=RegExp("^(?!x).*?-("+he+")-(?:\\w{4,8}-(?!x-))*\\1\\b","i"),Fe=RegExp("^(?!x).*?-("+pe+")-(?:\\w+-(?!x-))*\\1\\b","i"),Oe=RegExp("-"+ye,"ig"),Se=void 0,Ee={tags:{"art-lojban":"jbo","i-ami":"ami","i-bnn":"bnn","i-hak":"hak","i-klingon":"tlh","i-lux":"lb","i-navajo":"nv","i-pwn":"pwn","i-tao":"tao","i-tay":"tay","i-tsu":"tsu","no-bok":"nb","no-nyn":"nn","sgn-BE-FR":"sfb","sgn-BE-NL":"vgt","sgn-CH-DE":"sgg","zh-guoyu":"cmn","zh-hakka":"hak","zh-min-nan":"nan","zh-xiang":"hsn","sgn-BR":"bzs","sgn-CO":"csn","sgn-DE":"gsg","sgn-DK":"dsl","sgn-ES":"ssp","sgn-FR":"fsl","sgn-GB":"bfi","sgn-GR":"gss","sgn-IE":"isg","sgn-IT":"ise","sgn-JP":"jsl","sgn-MX":"mfs","sgn-NI":"ncs","sgn-NL":"dse","sgn-NO":"nsl","sgn-PT":"psr","sgn-SE":"swl","sgn-US":"ase","sgn-ZA":"sfs","zh-cmn":"cmn","zh-cmn-Hans":"cmn-Hans","zh-cmn-Hant":"cmn-Hant","zh-gan":"gan","zh-wuu":"wuu","zh-yue":"yue"},subtags:{BU:"MM",DD:"DE",FX:"FR",TP:"TL",YD:"YE",ZR:"CD",heploc:"alalc97",in:"id",iw:"he",ji:"yi",jw:"jv",mo:"ro",ayx:"nun",bjd:"drl",ccq:"rki",cjr:"mom",cka:"cmr",cmk:"xch",drh:"khk",drw:"prs",gav:"dev",hrr:"jal",ibi:"opa",kgh:"kml",lcq:"ppr",mst:"mry",myt:"mry",sca:"hle",tie:"ras",tkk:"twm",tlw:"weo",tnf:"prs",ybd:"rki",yma:"lrr"},extLang:{aao:["aao","ar"],abh:["abh","ar"],abv:["abv","ar"],acm:["acm","ar"],acq:["acq","ar"],acw:["acw","ar"],acx:["acx","ar"],acy:["acy","ar"],adf:["adf","ar"],ads:["ads","sgn"],aeb:["aeb","ar"],aec:["aec","ar"],aed:["aed","sgn"],aen:["aen","sgn"],afb:["afb","ar"],afg:["afg","sgn"],ajp:["ajp","ar"],apc:["apc","ar"],apd:["apd","ar"],arb:["arb","ar"],arq:["arq","ar"],ars:["ars","ar"],ary:["ary","ar"],arz:["arz","ar"],ase:["ase","sgn"],asf:["asf","sgn"],asp:["asp","sgn"],asq:["asq","sgn"],asw:["asw","sgn"],auz:["auz","ar"],avl:["avl","ar"],ayh:["ayh","ar"],ayl:["ayl","ar"],ayn:["ayn","ar"],ayp:["ayp","ar"],bbz:["bbz","ar"],bfi:["bfi","sgn"],bfk:["bfk","sgn"],bjn:["bjn","ms"],bog:["bog","sgn"],bqn:["bqn","sgn"],bqy:["bqy","sgn"],btj:["btj","ms"],bve:["bve","ms"],bvl:["bvl","sgn"],bvu:["bvu","ms"],bzs:["bzs","sgn"],cdo:["cdo","zh"],cds:["cds","sgn"],cjy:["cjy","zh"],cmn:["cmn","zh"],coa:["coa","ms"],cpx:["cpx","zh"],csc:["csc","sgn"],csd:["csd","sgn"],cse:["cse","sgn"],csf:["csf","sgn"],csg:["csg","sgn"],csl:["csl","sgn"],csn:["csn","sgn"],csq:["csq","sgn"],csr:["csr","sgn"],czh:["czh","zh"],czo:["czo","zh"],doq:["doq","sgn"],dse:["dse","sgn"],dsl:["dsl","sgn"],dup:["dup","ms"],ecs:["ecs","sgn"],esl:["esl","sgn"],esn:["esn","sgn"],eso:["eso","sgn"],eth:["eth","sgn"],fcs:["fcs","sgn"],fse:["fse","sgn"],fsl:["fsl","sgn"],fss:["fss","sgn"],gan:["gan","zh"],gds:["gds","sgn"],gom:["gom","kok"],gse:["gse","sgn"],gsg:["gsg","sgn"],gsm:["gsm","sgn"],gss:["gss","sgn"],gus:["gus","sgn"],hab:["hab","sgn"],haf:["haf","sgn"],hak:["hak","zh"],hds:["hds","sgn"],hji:["hji","ms"],hks:["hks","sgn"],hos:["hos","sgn"],hps:["hps","sgn"],hsh:["hsh","sgn"],hsl:["hsl","sgn"],hsn:["hsn","zh"],icl:["icl","sgn"],ils:["ils","sgn"],inl:["inl","sgn"],ins:["ins","sgn"],ise:["ise","sgn"],isg:["isg","sgn"],isr:["isr","sgn"],jak:["jak","ms"],jax:["jax","ms"],jcs:["jcs","sgn"],jhs:["jhs","sgn"],jls:["jls","sgn"],jos:["jos","sgn"],jsl:["jsl","sgn"],jus:["jus","sgn"],kgi:["kgi","sgn"],knn:["knn","kok"],kvb:["kvb","ms"],kvk:["kvk","sgn"],kvr:["kvr","ms"],kxd:["kxd","ms"],lbs:["lbs","sgn"],lce:["lce","ms"],lcf:["lcf","ms"],liw:["liw","ms"],lls:["lls","sgn"],lsg:["lsg","sgn"],lsl:["lsl","sgn"],lso:["lso","sgn"],lsp:["lsp","sgn"],lst:["lst","sgn"],lsy:["lsy","sgn"],ltg:["ltg","lv"],lvs:["lvs","lv"],lzh:["lzh","zh"],max:["max","ms"],mdl:["mdl","sgn"],meo:["meo","ms"],mfa:["mfa","ms"],mfb:["mfb","ms"],mfs:["mfs","sgn"],min:["min","ms"],mnp:["mnp","zh"],mqg:["mqg","ms"],mre:["mre","sgn"],msd:["msd","sgn"],msi:["msi","ms"],msr:["msr","sgn"],mui:["mui","ms"],mzc:["mzc","sgn"],mzg:["mzg","sgn"],mzy:["mzy","sgn"],nan:["nan","zh"],nbs:["nbs","sgn"],ncs:["ncs","sgn"],nsi:["nsi","sgn"],nsl:["nsl","sgn"],nsp:["nsp","sgn"],nsr:["nsr","sgn"],nzs:["nzs","sgn"],okl:["okl","sgn"],orn:["orn","ms"],ors:["ors","ms"],pel:["pel","ms"],pga:["pga","ar"],pks:["pks","sgn"],prl:["prl","sgn"],prz:["prz","sgn"],psc:["psc","sgn"],psd:["psd","sgn"],pse:["pse","ms"],psg:["psg","sgn"],psl:["psl","sgn"],pso:["pso","sgn"],psp:["psp","sgn"],psr:["psr","sgn"],pys:["pys","sgn"],rms:["rms","sgn"],rsi:["rsi","sgn"],rsl:["rsl","sgn"],sdl:["sdl","sgn"],sfb:["sfb","sgn"],sfs:["sfs","sgn"],sgg:["sgg","sgn"],sgx:["sgx","sgn"],shu:["shu","ar"],slf:["slf","sgn"],sls:["sls","sgn"],sqk:["sqk","sgn"],sqs:["sqs","sgn"],ssh:["ssh","ar"],ssp:["ssp","sgn"],ssr:["ssr","sgn"],svk:["svk","sgn"],swc:["swc","sw"],swh:["swh","sw"],swl:["swl","sgn"],syy:["syy","sgn"],tmw:["tmw","ms"],tse:["tse","sgn"],tsm:["tsm","sgn"],tsq:["tsq","sgn"],tss:["tss","sgn"],tsy:["tsy","sgn"],tza:["tza","sgn"],ugn:["ugn","sgn"],ugy:["ugy","sgn"],ukl:["ukl","sgn"],uks:["uks","sgn"],urk:["urk","ms"],uzn:["uzn","uz"],uzs:["uzs","uz"],vgt:["vgt","sgn"],vkk:["vkk","ms"],vkt:["vkt","ms"],vsi:["vsi","sgn"],vsl:["vsl","sgn"],vsv:["vsv","sgn"],wuu:["wuu","zh"],xki:["xki","sgn"],xml:["xml","sgn"],xmm:["xmm","ms"],xms:["xms","sgn"],yds:["yds","sgn"],ysl:["ysl","sgn"],yue:["yue","zh"],zib:["zib","sgn"],zlm:["zlm","ms"],zmi:["zmi","ms"],zsl:["zsl","sgn"],zsm:["zsm","ms"]}},Le=/^[A-Z]{3}$/,Pe="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},Ne=function(){var e="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103;return function(r,t,n,a){var i=r&&r.defaultProps,o=arguments.length-3;if(t||0===o||(t={}),t&&i)for(var s in i)void 0===t[s]&&(t[s]=i[s]);else t||(t=i||{});if(1===o)t.children=a;else if(o>1){for(var l=Array(o),c=0;c<o;c++)l[c]=arguments[c+3];t.children=l}return{$$typeof:e,type:r,key:void 0===n?null:""+n,ref:null,props:t,_owner:null}}}(),Te=function(e){return function(){var r=e.apply(this,arguments);return new Promise(function(e,t){function n(a,i){try{var o=r[a](i),s=o.value}catch(e){return void t(e)}return o.done?void e(s):Promise.resolve(s).then(function(e){return n("next",e)},function(e){return n("throw",e)})}return n("next")})}},_e=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},Ie=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),Ae=function(e,r){for(var t in r){var n=r[t];n.configurable=n.enumerable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t,n)}return e},Me=function(e,r){for(var t=Object.getOwnPropertyNames(r),n=0;n<t.length;n++){var a=t[n],i=Object.getOwnPropertyDescriptor(r,a);i&&i.configurable&&void 0===e[a]&&Object.defineProperty(e,a,i)}return e},Re=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},qe=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},Ce=function e(r,t,n){null===r&&(r=Function.prototype);var a=Object.getOwnPropertyDescriptor(r,t);if(void 0===a){var i=Object.getPrototypeOf(r);return null===i?void 0:e(i,t,n)}if("value"in a)return a.value;var o=a.get;if(void 0!==o)return o.call(n)},Ge=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},Ze=function(e,r){return null!=r&&"undefined"!=typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](e):e instanceof r},Be=function(e){return e&&e.__esModule?e:{default:e}},Ue=function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r},$e=function(e,r){if(e!==r)throw new TypeError("Cannot instantiate an arrow function")},Ke=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},Ye=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},He=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},We="undefined"==typeof global?self:global,Xe=function e(r,t,n,a){var i=Object.getOwnPropertyDescriptor(r,t);if(void 0===i){var o=Object.getPrototypeOf(r);null!==o&&e(o,t,n,a)}else if("value"in i&&i.writable)i.value=n;else{var s=i.set;void 0!==s&&s.call(a,n)}return n},Ve=function(){function e(e,r){var t=[],n=!0,a=!1,i=void 0;try{for(var o,s=e[Symbol.iterator]();!(n=(o=s.next()).done)&&(t.push(o.value),!r||t.length!==r);n=!0);}catch(e){a=!0,i=e}finally{try{!n&&s.return&&s.return()}finally{if(a)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),Je=function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e)){for(var t,n=[],a=e[Symbol.iterator]();!(t=a.next()).done&&(n.push(t.value),
+!r||n.length!==r););return n}throw new TypeError("Invalid attempt to destructure non-iterable instance")},Qe=function(e,r){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))},er=function(e,r){return e.raw=r,e},rr=function(e,r,t){if(e===t)throw new ReferenceError(r+" is not defined - temporal dead zone");return e},tr={},nr=function(e){return Array.isArray(e)?e:Array.from(e)},ar=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)},ir=Object.freeze({jsx:Ne,asyncToGenerator:Te,classCallCheck:_e,createClass:Ie,defineEnumerableProperties:Ae,defaults:Me,defineProperty:Re,get:Ce,inherits:Ge,interopRequireDefault:Be,interopRequireWildcard:Ue,newArrowCheck:$e,objectDestructuringEmpty:Ke,objectWithoutProperties:Ye,possibleConstructorReturn:He,selfGlobal:We,set:Xe,slicedToArray:Ve,slicedToArrayLoose:Je,taggedTemplateLiteral:Qe,taggedTemplateLiteralLoose:er,temporalRef:rr,temporalUndefined:tr,toArray:nr,toConsumableArray:ar,typeof:Pe,extends:qe,instanceof:Ze}),or=/-u(?:-[0-9a-z]{2,8})+/gi,sr={};sr.getCanonicalLocales=function(e){var r=f(e),t=[];for(var n in r)t.push(r[n]);return t};var lr={BHD:3,BYR:0,XOF:0,BIF:0,XAF:0,CLF:4,CLP:0,KMF:0,DJF:0,XPF:0,GNF:0,ISK:0,IQD:3,JPY:0,JOD:3,KRW:0,KWD:3,LYD:3,OMR:3,PYG:0,RWF:0,TND:3,UGX:0,UYI:0,VUV:0,VND:0};re(sr,"NumberFormat",{configurable:!0,writable:!0,value:D}),re(sr.NumberFormat,"prototype",{writable:!1}),ue.NumberFormat={"[[availableLocales]]":[],"[[relevantExtensionKeys]]":["nu"],"[[localeData]]":{}},re(sr.NumberFormat,"supportedLocalesOf",{configurable:!0,writable:!0,value:ce.call(function(e){if(!ee.call(this,"[[availableLocales]]"))throw new TypeError("supportedLocalesOf() is not a constructor");var r=n(),t=arguments[1],a=this["[[availableLocales]]"],i=f(e);return r(),b(a,i,t)},ue.NumberFormat)}),re(sr.NumberFormat.prototype,"format",{configurable:!0,get:k}),sr.NumberFormat.prototype.formatToParts=function(e){var r=null!==this&&"object"===ir.typeof(this)&&i(this);if(!r||!r["[[initializedNumberFormat]]"])throw new TypeError("`this` value for formatToParts() is not an initialized Intl.NumberFormat object.");var t=Number(e);return F(this,t)};var cr={arab:["٠","١","٢","٣","٤","٥","٦","٧","٨","٩"],arabext:["۰","۱","۲","۳","۴","۵","۶","۷","۸","۹"],bali:["᭐","᭑","᭒","᭓","᭔","᭕","᭖","᭗","᭘","᭙"],beng:["০","১","২","৩","৪","৫","৬","৭","৮","৯"],deva:["०","१","२","३","४","५","६","७","८","९"],fullwide:["０","１","２","３","４","５","６","７","８","９"],gujr:["૦","૧","૨","૩","૪","૫","૬","૭","૮","૯"],guru:["੦","੧","੨","੩","੪","੫","੬","੭","੮","੯"],hanidec:["〇","一","二","三","四","五","六","七","八","九"],khmr:["០","១","២","៣","៤","៥","៦","៧","៨","៩"],knda:["೦","೧","೨","೩","೪","೫","೬","೭","೮","೯"],laoo:["໐","໑","໒","໓","໔","໕","໖","໗","໘","໙"],latn:["0","1","2","3","4","5","6","7","8","9"],limb:["᥆","᥇","᥈","᥉","᥊","᥋","᥌","᥍","᥎","᥏"],mlym:["൦","൧","൨","൩","൪","൫","൬","൭","൮","൯"],mong:["᠐","᠑","᠒","᠓","᠔","᠕","᠖","᠗","᠘","᠙"],mymr:["၀","၁","၂","၃","၄","၅","၆","၇","၈","၉"],orya:["୦","୧","୨","୩","୪","୫","୬","୭","୮","୯"],tamldec:["௦","௧","௨","௩","௪","௫","௬","௭","௮","௯"],telu:["౦","౧","౨","౩","౪","౫","౬","౭","౮","౯"],thai:["๐","๑","๒","๓","๔","๕","๖","๗","๘","๙"],tibt:["༠","༡","༢","༣","༤","༥","༦","༧","༨","༩"]};re(sr.NumberFormat.prototype,"resolvedOptions",{configurable:!0,writable:!0,value:function(){var e=void 0,t=new r,n=["locale","numberingSystem","style","currency","currencyDisplay","minimumIntegerDigits","minimumFractionDigits","maximumFractionDigits","minimumSignificantDigits","maximumSignificantDigits","useGrouping"],a=null!==this&&"object"===ir.typeof(this)&&i(this);if(!a||!a["[[initializedNumberFormat]]"])throw new TypeError("`this` value for resolvedOptions() is not an initialized Intl.NumberFormat object.");for(var o=0,s=n.length;o<s;o++)ee.call(a,e="[["+n[o]+"]]")&&(t[n[o]]={value:a[e],writable:!0,configurable:!0,enumerable:!0});return ne({},t)}});var ur=/(?:[Eec]{1,6}|G{1,5}|[Qq]{1,5}|(?:[yYur]+|U{1,5})|[ML]{1,5}|d{1,2}|D{1,3}|F{1}|[abB]{1,5}|[hkHK]{1,2}|w{1,2}|W{1}|m{1,2}|s{1,2}|[zZOvVxX]{1,4})(?=([^']*'[^']*')*[^']*$)/g,gr=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,fr=/[rqQASjJgwWIQq]/,mr=["era","year","month","day","weekday","quarter"],vr=["hour","minute","second","hour12","timeZoneName"],dr={second:{numeric:"s","2-digit":"ss"},minute:{numeric:"m","2-digit":"mm"},year:{numeric:"y","2-digit":"yy"},day:{numeric:"d","2-digit":"dd"},month:{numeric:"L","2-digit":"LL",narrow:"LLLLL",short:"LLL",long:"LLLL"},weekday:{narrow:"ccccc",short:"ccc",long:"cccc"}},hr=ne(null,{narrow:{},short:{},long:{}});re(sr,"DateTimeFormat",{configurable:!0,writable:!0,value:C}),re(C,"prototype",{writable:!1});var pr={weekday:["narrow","short","long"],era:["narrow","short","long"],year:["2-digit","numeric"],month:["2-digit","numeric","narrow","short","long"],day:["2-digit","numeric"],hour:["2-digit","numeric"],minute:["2-digit","numeric"],second:["2-digit","numeric"],timeZoneName:["short","long"]};ue.DateTimeFormat={"[[availableLocales]]":[],"[[relevantExtensionKeys]]":["ca","nu"],"[[localeData]]":{}},re(sr.DateTimeFormat,"supportedLocalesOf",{configurable:!0,writable:!0,value:ce.call(function(e){if(!ee.call(this,"[[availableLocales]]"))throw new TypeError("supportedLocalesOf() is not a constructor");var r=n(),t=arguments[1],a=this["[[availableLocales]]"],i=f(e);return r(),b(a,i,t)},ue.NumberFormat)}),re(sr.DateTimeFormat.prototype,"format",{configurable:!0,get:K}),sr.DateTimeFormat.prototype.formatToParts=function(){var e=null!==this&&"object"===ir.typeof(this)&&i(this);if(!e||!e["[[initializedDateTimeFormat]]"])throw new TypeError("`this` value for formatToParts() is not an initialized Intl.DateTimeFormat object.");if(void 0===e["[[boundFormatToParts]]"]){var r=function(){var e=Number(0===arguments.length?Date.now():arguments[0]);return W(this,e)},t=ce.call(r,this);e["[[boundFormatToParts]]"]=t}return e["[[boundFormatToParts]]"]},re(sr.DateTimeFormat.prototype,"resolvedOptions",{writable:!0,configurable:!0,value:function(){var e=void 0,t=new r,n=["locale","calendar","numberingSystem","timeZone","hour12","weekday","era","year","month","day","hour","minute","second","timeZoneName"],a=null!==this&&"object"===ir.typeof(this)&&i(this);if(!a||!a["[[initializedDateTimeFormat]]"])throw new TypeError("`this` value for resolvedOptions() is not an initialized Intl.DateTimeFormat object.");for(var o=0,s=n.length;o<s;o++)ee.call(a,e="[["+n[o]+"]]")&&(t[n[o]]={value:a[e],writable:!0,configurable:!0,enumerable:!0});return ne({},t)}});var yr=sr.__localeSensitiveProtos={Number:{},Date:{}};if(yr.Number.toLocaleString=function(){if("[object Number]"!==Object.prototype.toString.call(this))throw new TypeError("`this` value must be a number for Number.prototype.toLocaleString()");return S(new D(arguments[0],arguments[1]),this)},yr.Date.toLocaleString=function(){if("[object Date]"!==Object.prototype.toString.call(this))throw new TypeError("`this` value must be a Date instance for Date.prototype.toLocaleString()");var e=+this;if(isNaN(e))return"Invalid Date";var r=arguments[0],t=arguments[1];t=B(t,"any","all");var n=new C(r,t);return H(n,e)},yr.Date.toLocaleDateString=function(){if("[object Date]"!==Object.prototype.toString.call(this))throw new TypeError("`this` value must be a Date instance for Date.prototype.toLocaleDateString()");var e=+this;if(isNaN(e))return"Invalid Date";var r=arguments[0],t=arguments[1];t=B(t,"date","date");var n=new C(r,t);return H(n,e)},yr.Date.toLocaleTimeString=function(){if("[object Date]"!==Object.prototype.toString.call(this))throw new TypeError("`this` value must be a Date instance for Date.prototype.toLocaleTimeString()");var e=+this;if(isNaN(e))return"Invalid Date";var r=arguments[0],t=arguments[1];t=B(t,"time","time");var n=new C(r,t);return H(n,e)},re(sr,"__applyLocaleSensitivePrototypes",{writable:!0,configurable:!0,value:function(){re(Number.prototype,"toLocaleString",{writable:!0,configurable:!0,value:yr.Number.toLocaleString}),re(Date.prototype,"toLocaleString",{writable:!0,configurable:!0,value:yr.Date.toLocaleString});for(var e in yr.Date)ee.call(yr.Date,e)&&re(Date.prototype,e,{writable:!0,configurable:!0,value:yr.Date[e]})}}),re(sr,"__addLocaleData",{value:function(e){if(!l(e.locale))throw new Error("Object passed doesn't identify itself with a valid language tag");V(e,e.locale)}}),re(sr,"__disableRegExpRestore",{value:function(){ue.disableRegExpRestore=!0}}),"undefined"==typeof Intl)try{window.Intl=sr,sr.__applyLocaleSensitivePrototypes()}catch(e){}return sr});
+IntlPolyfill.__addLocaleData({locale:"en-US",date:{ca:["gregory","buddhist","chinese","coptic","dangi","ethioaa","ethiopic","generic","hebrew","indian","islamic","islamicc","japanese","persian","roc"],hourNo0:true,hour12:true,formats:{short:"{1}, {0}",medium:"{1}, {0}",full:"{1} 'at' {0}",long:"{1} 'at' {0}",availableFormats:{"d":"d","E":"ccc",Ed:"d E",Ehm:"E h:mm a",EHm:"E HH:mm",Ehms:"E h:mm:ss a",EHms:"E HH:mm:ss",Gy:"y G",GyMMM:"MMM y G",GyMMMd:"MMM d, y G",GyMMMEd:"E, MMM d, y G","h":"h a","H":"HH",hm:"h:mm a",Hm:"HH:mm",hms:"h:mm:ss a",Hms:"HH:mm:ss",hmsv:"h:mm:ss a v",Hmsv:"HH:mm:ss v",hmv:"h:mm a v",Hmv:"HH:mm v","M":"L",Md:"M/d",MEd:"E, M/d",MMM:"LLL",MMMd:"MMM d",MMMEd:"E, MMM d",MMMMd:"MMMM d",ms:"mm:ss","y":"y",yM:"M/y",yMd:"M/d/y",yMEd:"E, M/d/y",yMMM:"MMM y",yMMMd:"MMM d, y",yMMMEd:"E, MMM d, y",yMMMM:"MMMM y",yQQQ:"QQQ y",yQQQQ:"QQQQ y"},dateFormats:{yMMMMEEEEd:"EEEE, MMMM d, y",yMMMMd:"MMMM d, y",yMMMd:"MMM d, y",yMd:"M/d/yy"},timeFormats:{hmmsszzzz:"h:mm:ss a zzzz",hmsz:"h:mm:ss a z",hms:"h:mm:ss a",hm:"h:mm a"}},calendars:{buddhist:{months:{narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],short:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],long:["January","February","March","April","May","June","July","August","September","October","November","December"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["BE"],short:["BE"],long:["BE"]},dayPeriods:{am:"AM",pm:"PM"}},chinese:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12"],short:["Mo1","Mo2","Mo3","Mo4","Mo5","Mo6","Mo7","Mo8","Mo9","Mo10","Mo11","Mo12"],long:["Month1","Month2","Month3","Month4","Month5","Month6","Month7","Month8","Month9","Month10","Month11","Month12"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},dayPeriods:{am:"AM",pm:"PM"}},coptic:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12","13"],short:["Tout","Baba","Hator","Kiahk","Toba","Amshir","Baramhat","Baramouda","Bashans","Paona","Epep","Mesra","Nasie"],long:["Tout","Baba","Hator","Kiahk","Toba","Amshir","Baramhat","Baramouda","Bashans","Paona","Epep","Mesra","Nasie"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["ERA0","ERA1"],short:["ERA0","ERA1"],long:["ERA0","ERA1"]},dayPeriods:{am:"AM",pm:"PM"}},dangi:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12"],short:["Mo1","Mo2","Mo3","Mo4","Mo5","Mo6","Mo7","Mo8","Mo9","Mo10","Mo11","Mo12"],long:["Month1","Month2","Month3","Month4","Month5","Month6","Month7","Month8","Month9","Month10","Month11","Month12"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},dayPeriods:{am:"AM",pm:"PM"}},ethiopic:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12","13"],short:["Meskerem","Tekemt","Hedar","Tahsas","Ter","Yekatit","Megabit","Miazia","Genbot","Sene","Hamle","Nehasse","Pagumen"],long:["Meskerem","Tekemt","Hedar","Tahsas","Ter","Yekatit","Megabit","Miazia","Genbot","Sene","Hamle","Nehasse","Pagumen"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["ERA0","ERA1"],short:["ERA0","ERA1"],long:["ERA0","ERA1"]},dayPeriods:{am:"AM",pm:"PM"}},ethioaa:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12","13"],short:["Meskerem","Tekemt","Hedar","Tahsas","Ter","Yekatit","Megabit","Miazia","Genbot","Sene","Hamle","Nehasse","Pagumen"],long:["Meskerem","Tekemt","Hedar","Tahsas","Ter","Yekatit","Megabit","Miazia","Genbot","Sene","Hamle","Nehasse","Pagumen"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["ERA0"],short:["ERA0"],long:["ERA0"]},dayPeriods:{am:"AM",pm:"PM"}},generic:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12"],short:["M01","M02","M03","M04","M05","M06","M07","M08","M09","M10","M11","M12"],long:["M01","M02","M03","M04","M05","M06","M07","M08","M09","M10","M11","M12"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["ERA0","ERA1"],short:["ERA0","ERA1"],long:["ERA0","ERA1"]},dayPeriods:{am:"AM",pm:"PM"}},gregory:{months:{narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],short:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],long:["January","February","March","April","May","June","July","August","September","October","November","December"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["B","A","BCE","CE"],short:["BC","AD","BCE","CE"],long:["Before Christ","Anno Domini","Before Common Era","Common Era"]},dayPeriods:{am:"AM",pm:"PM"}},hebrew:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12","13","7"],short:["Tishri","Heshvan","Kislev","Tevet","Shevat","Adar I","Adar","Nisan","Iyar","Sivan","Tamuz","Av","Elul","Adar II"],long:["Tishri","Heshvan","Kislev","Tevet","Shevat","Adar I","Adar","Nisan","Iyar","Sivan","Tamuz","Av","Elul","Adar II"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["AM"],short:["AM"],long:["AM"]},dayPeriods:{am:"AM",pm:"PM"}},indian:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12"],short:["Chaitra","Vaisakha","Jyaistha","Asadha","Sravana","Bhadra","Asvina","Kartika","Agrahayana","Pausa","Magha","Phalguna"],long:["Chaitra","Vaisakha","Jyaistha","Asadha","Sravana","Bhadra","Asvina","Kartika","Agrahayana","Pausa","Magha","Phalguna"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["Saka"],short:["Saka"],long:["Saka"]},dayPeriods:{am:"AM",pm:"PM"}},islamic:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12"],short:["Muh.","Saf.","Rab. I","Rab. II","Jum. I","Jum. II","Raj.","Sha.","Ram.","Shaw.","Dhuʻl-Q.","Dhuʻl-H."],long:["Muharram","Safar","Rabiʻ I","Rabiʻ II","Jumada I","Jumada II","Rajab","Shaʻban","Ramadan","Shawwal","Dhuʻl-Qiʻdah","Dhuʻl-Hijjah"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["AH"],short:["AH"],long:["AH"]},dayPeriods:{am:"AM",pm:"PM"}},islamicc:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12"],short:["Muh.","Saf.","Rab. I","Rab. II","Jum. I","Jum. II","Raj.","Sha.","Ram.","Shaw.","Dhuʻl-Q.","Dhuʻl-H."],long:["Muharram","Safar","Rabiʻ I","Rabiʻ II","Jumada I","Jumada II","Rajab","Shaʻban","Ramadan","Shawwal","Dhuʻl-Qiʻdah","Dhuʻl-Hijjah"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["AH"],short:["AH"],long:["AH"]},dayPeriods:{am:"AM",pm:"PM"}},japanese:{months:{narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],short:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],long:["January","February","March","April","May","June","July","August","September","October","November","December"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["Taika (645–650)","Hakuchi (650–671)","Hakuhō (672–686)","Shuchō (686–701)","Taihō (701–704)","Keiun (704–708)","Wadō (708–715)","Reiki (715–717)","Yōrō (717–724)","Jinki (724–729)","Tenpyō (729–749)","Tenpyō-kampō (749-749)","Tenpyō-shōhō (749-757)","Tenpyō-hōji (757-765)","Tenpyō-jingo (765-767)","Jingo-keiun (767-770)","Hōki (770–780)","Ten-ō (781-782)","Enryaku (782–806)","Daidō (806–810)","Kōnin (810–824)","Tenchō (824–834)","Jōwa (834–848)","Kajō (848–851)","Ninju (851–854)","Saikō (854–857)","Ten-an (857-859)","Jōgan (859–877)","Gangyō (877–885)","Ninna (885–889)","Kanpyō (889–898)","Shōtai (898–901)","Engi (901–923)","Enchō (923–931)","Jōhei (931–938)","Tengyō (938–947)","Tenryaku (947–957)","Tentoku (957–961)","Ōwa (961–964)","Kōhō (964–968)","Anna (968–970)","Tenroku (970–973)","Ten’en (973–976)","Jōgen (976–978)","Tengen (978–983)","Eikan (983–985)","Kanna (985–987)","Eien (987–989)","Eiso (989–990)","Shōryaku (990–995)","Chōtoku (995–999)","Chōhō (999–1004)","Kankō (1004–1012)","Chōwa (1012–1017)","Kannin (1017–1021)","Jian (1021–1024)","Manju (1024–1028)","Chōgen (1028–1037)","Chōryaku (1037–1040)","Chōkyū (1040–1044)","Kantoku (1044–1046)","Eishō (1046–1053)","Tengi (1053–1058)","Kōhei (1058–1065)","Jiryaku (1065–1069)","Enkyū (1069–1074)","Shōho (1074–1077)","Shōryaku (1077–1081)","Eihō (1081–1084)","Ōtoku (1084–1087)","Kanji (1087–1094)","Kahō (1094–1096)","Eichō (1096–1097)","Jōtoku (1097–1099)","Kōwa (1099–1104)","Chōji (1104–1106)","Kashō (1106–1108)","Tennin (1108–1110)","Ten-ei (1110-1113)","Eikyū (1113–1118)","Gen’ei (1118–1120)","Hōan (1120–1124)","Tenji (1124–1126)","Daiji (1126–1131)","Tenshō (1131–1132)","Chōshō (1132–1135)","Hōen (1135–1141)","Eiji (1141–1142)","Kōji (1142–1144)","Ten’yō (1144–1145)","Kyūan (1145–1151)","Ninpei (1151–1154)","Kyūju (1154–1156)","Hōgen (1156–1159)","Heiji (1159–1160)","Eiryaku (1160–1161)","Ōho (1161–1163)","Chōkan (1163–1165)","Eiman (1165–1166)","Nin’an (1166–1169)","Kaō (1169–1171)","Shōan (1171–1175)","Angen (1175–1177)","Jishō (1177–1181)","Yōwa (1181–1182)","Juei (1182–1184)","Genryaku (1184–1185)","Bunji (1185–1190)","Kenkyū (1190–1199)","Shōji (1199–1201)","Kennin (1201–1204)","Genkyū (1204–1206)","Ken’ei (1206–1207)","Jōgen (1207–1211)","Kenryaku (1211–1213)","Kenpō (1213–1219)","Jōkyū (1219–1222)","Jōō (1222–1224)","Gennin (1224–1225)","Karoku (1225–1227)","Antei (1227–1229)","Kanki (1229–1232)","Jōei (1232–1233)","Tenpuku (1233–1234)","Bunryaku (1234–1235)","Katei (1235–1238)","Ryakunin (1238–1239)","En’ō (1239–1240)","Ninji (1240–1243)","Kangen (1243–1247)","Hōji (1247–1249)","Kenchō (1249–1256)","Kōgen (1256–1257)","Shōka (1257–1259)","Shōgen (1259–1260)","Bun’ō (1260–1261)","Kōchō (1261–1264)","Bun’ei (1264–1275)","Kenji (1275–1278)","Kōan (1278–1288)","Shōō (1288–1293)","Einin (1293–1299)","Shōan (1299–1302)","Kengen (1302–1303)","Kagen (1303–1306)","Tokuji (1306–1308)","Enkyō (1308–1311)","Ōchō (1311–1312)","Shōwa (1312–1317)","Bunpō (1317–1319)","Genō (1319–1321)","Genkō (1321–1324)","Shōchū (1324–1326)","Karyaku (1326–1329)","Gentoku (1329–1331)","Genkō (1331–1334)","Kenmu (1334–1336)","Engen (1336–1340)","Kōkoku (1340–1346)","Shōhei (1346–1370)","Kentoku (1370–1372)","Bunchū (1372–1375)","Tenju (1375–1379)","Kōryaku (1379–1381)","Kōwa (1381–1384)","Genchū (1384–1392)","Meitoku (1384–1387)","Kakei (1387–1389)","Kōō (1389–1390)","Meitoku (1390–1394)","Ōei (1394–1428)","Shōchō (1428–1429)","Eikyō (1429–1441)","Kakitsu (1441–1444)","Bun’an (1444–1449)","Hōtoku (1449–1452)","Kyōtoku (1452–1455)","Kōshō (1455–1457)","Chōroku (1457–1460)","Kanshō (1460–1466)","Bunshō (1466–1467)","Ōnin (1467–1469)","Bunmei (1469–1487)","Chōkyō (1487–1489)","Entoku (1489–1492)","Meiō (1492–1501)","Bunki (1501–1504)","Eishō (1504–1521)","Taiei (1521–1528)","Kyōroku (1528–1532)","Tenbun (1532–1555)","Kōji (1555–1558)","Eiroku (1558–1570)","Genki (1570–1573)","Tenshō (1573–1592)","Bunroku (1592–1596)","Keichō (1596–1615)","Genna (1615–1624)","Kan’ei (1624–1644)","Shōho (1644–1648)","Keian (1648–1652)","Jōō (1652–1655)","Meireki (1655–1658)","Manji (1658–1661)","Kanbun (1661–1673)","Enpō (1673–1681)","Tenna (1681–1684)","Jōkyō (1684–1688)","Genroku (1688–1704)","Hōei (1704–1711)","Shōtoku (1711–1716)","Kyōhō (1716–1736)","Genbun (1736–1741)","Kanpō (1741–1744)","Enkyō (1744–1748)","Kan’en (1748–1751)","Hōreki (1751–1764)","Meiwa (1764–1772)","An’ei (1772–1781)","Tenmei (1781–1789)","Kansei (1789–1801)","Kyōwa (1801–1804)","Bunka (1804–1818)","Bunsei (1818–1830)","Tenpō (1830–1844)","Kōka (1844–1848)","Kaei (1848–1854)","Ansei (1854–1860)","Man’en (1860–1861)","Bunkyū (1861–1864)","Genji (1864–1865)","Keiō (1865–1868)","M","T","S","H"],short:["Taika (645–650)","Hakuchi (650–671)","Hakuhō (672–686)","Shuchō (686–701)","Taihō (701–704)","Keiun (704–708)","Wadō (708–715)","Reiki (715–717)","Yōrō (717–724)","Jinki (724–729)","Tenpyō (729–749)","Tenpyō-kampō (749-749)","Tenpyō-shōhō (749-757)","Tenpyō-hōji (757-765)","Tenpyō-jingo (765-767)","Jingo-keiun (767-770)","Hōki (770–780)","Ten-ō (781-782)","Enryaku (782–806)","Daidō (806–810)","Kōnin (810–824)","Tenchō (824–834)","Jōwa (834–848)","Kajō (848–851)","Ninju (851–854)","Saikō (854–857)","Ten-an (857-859)","Jōgan (859–877)","Gangyō (877–885)","Ninna (885–889)","Kanpyō (889–898)","Shōtai (898–901)","Engi (901–923)","Enchō (923–931)","Jōhei (931–938)","Tengyō (938–947)","Tenryaku (947–957)","Tentoku (957–961)","Ōwa (961–964)","Kōhō (964–968)","Anna (968–970)","Tenroku (970–973)","Ten’en (973–976)","Jōgen (976–978)","Tengen (978–983)","Eikan (983–985)","Kanna (985–987)","Eien (987–989)","Eiso (989–990)","Shōryaku (990–995)","Chōtoku (995–999)","Chōhō (999–1004)","Kankō (1004–1012)","Chōwa (1012–1017)","Kannin (1017–1021)","Jian (1021–1024)","Manju (1024–1028)","Chōgen (1028–1037)","Chōryaku (1037–1040)","Chōkyū (1040–1044)","Kantoku (1044–1046)","Eishō (1046–1053)","Tengi (1053–1058)","Kōhei (1058–1065)","Jiryaku (1065–1069)","Enkyū (1069–1074)","Shōho (1074–1077)","Shōryaku (1077–1081)","Eihō (1081–1084)","Ōtoku (1084–1087)","Kanji (1087–1094)","Kahō (1094–1096)","Eichō (1096–1097)","Jōtoku (1097–1099)","Kōwa (1099–1104)","Chōji (1104–1106)","Kashō (1106–1108)","Tennin (1108–1110)","Ten-ei (1110-1113)","Eikyū (1113–1118)","Gen’ei (1118–1120)","Hōan (1120–1124)","Tenji (1124–1126)","Daiji (1126–1131)","Tenshō (1131–1132)","Chōshō (1132–1135)","Hōen (1135–1141)","Eiji (1141–1142)","Kōji (1142–1144)","Ten’yō (1144–1145)","Kyūan (1145–1151)","Ninpei (1151–1154)","Kyūju (1154–1156)","Hōgen (1156–1159)","Heiji (1159–1160)","Eiryaku (1160–1161)","Ōho (1161–1163)","Chōkan (1163–1165)","Eiman (1165–1166)","Nin’an (1166–1169)","Kaō (1169–1171)","Shōan (1171–1175)","Angen (1175–1177)","Jishō (1177–1181)","Yōwa (1181–1182)","Juei (1182–1184)","Genryaku (1184–1185)","Bunji (1185–1190)","Kenkyū (1190–1199)","Shōji (1199–1201)","Kennin (1201–1204)","Genkyū (1204–1206)","Ken’ei (1206–1207)","Jōgen (1207–1211)","Kenryaku (1211–1213)","Kenpō (1213–1219)","Jōkyū (1219–1222)","Jōō (1222–1224)","Gennin (1224–1225)","Karoku (1225–1227)","Antei (1227–1229)","Kanki (1229–1232)","Jōei (1232–1233)","Tenpuku (1233–1234)","Bunryaku (1234–1235)","Katei (1235–1238)","Ryakunin (1238–1239)","En’ō (1239–1240)","Ninji (1240–1243)","Kangen (1243–1247)","Hōji (1247–1249)","Kenchō (1249–1256)","Kōgen (1256–1257)","Shōka (1257–1259)","Shōgen (1259–1260)","Bun’ō (1260–1261)","Kōchō (1261–1264)","Bun’ei (1264–1275)","Kenji (1275–1278)","Kōan (1278–1288)","Shōō (1288–1293)","Einin (1293–1299)","Shōan (1299–1302)","Kengen (1302–1303)","Kagen (1303–1306)","Tokuji (1306–1308)","Enkyō (1308–1311)","Ōchō (1311–1312)","Shōwa (1312–1317)","Bunpō (1317–1319)","Genō (1319–1321)","Genkō (1321–1324)","Shōchū (1324–1326)","Karyaku (1326–1329)","Gentoku (1329–1331)","Genkō (1331–1334)","Kenmu (1334–1336)","Engen (1336–1340)","Kōkoku (1340–1346)","Shōhei (1346–1370)","Kentoku (1370–1372)","Bunchū (1372–1375)","Tenju (1375–1379)","Kōryaku (1379–1381)","Kōwa (1381–1384)","Genchū (1384–1392)","Meitoku (1384–1387)","Kakei (1387–1389)","Kōō (1389–1390)","Meitoku (1390–1394)","Ōei (1394–1428)","Shōchō (1428–1429)","Eikyō (1429–1441)","Kakitsu (1441–1444)","Bun’an (1444–1449)","Hōtoku (1449–1452)","Kyōtoku (1452–1455)","Kōshō (1455–1457)","Chōroku (1457–1460)","Kanshō (1460–1466)","Bunshō (1466–1467)","Ōnin (1467–1469)","Bunmei (1469–1487)","Chōkyō (1487–1489)","Entoku (1489–1492)","Meiō (1492–1501)","Bunki (1501–1504)","Eishō (1504–1521)","Taiei (1521–1528)","Kyōroku (1528–1532)","Tenbun (1532–1555)","Kōji (1555–1558)","Eiroku (1558–1570)","Genki (1570–1573)","Tenshō (1573–1592)","Bunroku (1592–1596)","Keichō (1596–1615)","Genna (1615–1624)","Kan’ei (1624–1644)","Shōho (1644–1648)","Keian (1648–1652)","Jōō (1652–1655)","Meireki (1655–1658)","Manji (1658–1661)","Kanbun (1661–1673)","Enpō (1673–1681)","Tenna (1681–1684)","Jōkyō (1684–1688)","Genroku (1688–1704)","Hōei (1704–1711)","Shōtoku (1711–1716)","Kyōhō (1716–1736)","Genbun (1736–1741)","Kanpō (1741–1744)","Enkyō (1744–1748)","Kan’en (1748–1751)","Hōreki (1751–1764)","Meiwa (1764–1772)","An’ei (1772–1781)","Tenmei (1781–1789)","Kansei (1789–1801)","Kyōwa (1801–1804)","Bunka (1804–1818)","Bunsei (1818–1830)","Tenpō (1830–1844)","Kōka (1844–1848)","Kaei (1848–1854)","Ansei (1854–1860)","Man’en (1860–1861)","Bunkyū (1861–1864)","Genji (1864–1865)","Keiō (1865–1868)","Meiji","Taishō","Shōwa","Heisei"],long:["Taika (645–650)","Hakuchi (650–671)","Hakuhō (672–686)","Shuchō (686–701)","Taihō (701–704)","Keiun (704–708)","Wadō (708–715)","Reiki (715–717)","Yōrō (717–724)","Jinki (724–729)","Tenpyō (729–749)","Tenpyō-kampō (749-749)","Tenpyō-shōhō (749-757)","Tenpyō-hōji (757-765)","Tenpyō-jingo (765-767)","Jingo-keiun (767-770)","Hōki (770–780)","Ten-ō (781-782)","Enryaku (782–806)","Daidō (806–810)","Kōnin (810–824)","Tenchō (824–834)","Jōwa (834–848)","Kajō (848–851)","Ninju (851–854)","Saikō (854–857)","Ten-an (857-859)","Jōgan (859–877)","Gangyō (877–885)","Ninna (885–889)","Kanpyō (889–898)","Shōtai (898–901)","Engi (901–923)","Enchō (923–931)","Jōhei (931–938)","Tengyō (938–947)","Tenryaku (947–957)","Tentoku (957–961)","Ōwa (961–964)","Kōhō (964–968)","Anna (968–970)","Tenroku (970–973)","Ten’en (973–976)","Jōgen (976–978)","Tengen (978–983)","Eikan (983–985)","Kanna (985–987)","Eien (987–989)","Eiso (989–990)","Shōryaku (990–995)","Chōtoku (995–999)","Chōhō (999–1004)","Kankō (1004–1012)","Chōwa (1012–1017)","Kannin (1017–1021)","Jian (1021–1024)","Manju (1024–1028)","Chōgen (1028–1037)","Chōryaku (1037–1040)","Chōkyū (1040–1044)","Kantoku (1044–1046)","Eishō (1046–1053)","Tengi (1053–1058)","Kōhei (1058–1065)","Jiryaku (1065–1069)","Enkyū (1069–1074)","Shōho (1074–1077)","Shōryaku (1077–1081)","Eihō (1081–1084)","Ōtoku (1084–1087)","Kanji (1087–1094)","Kahō (1094–1096)","Eichō (1096–1097)","Jōtoku (1097–1099)","Kōwa (1099–1104)","Chōji (1104–1106)","Kashō (1106–1108)","Tennin (1108–1110)","Ten-ei (1110-1113)","Eikyū (1113–1118)","Gen’ei (1118–1120)","Hōan (1120–1124)","Tenji (1124–1126)","Daiji (1126–1131)","Tenshō (1131–1132)","Chōshō (1132–1135)","Hōen (1135–1141)","Eiji (1141–1142)","Kōji (1142–1144)","Ten’yō (1144–1145)","Kyūan (1145–1151)","Ninpei (1151–1154)","Kyūju (1154–1156)","Hōgen (1156–1159)","Heiji (1159–1160)","Eiryaku (1160–1161)","Ōho (1161–1163)","Chōkan (1163–1165)","Eiman (1165–1166)","Nin’an (1166–1169)","Kaō (1169–1171)","Shōan (1171–1175)","Angen (1175–1177)","Jishō (1177–1181)","Yōwa (1181–1182)","Juei (1182–1184)","Genryaku (1184–1185)","Bunji (1185–1190)","Kenkyū (1190–1199)","Shōji (1199–1201)","Kennin (1201–1204)","Genkyū (1204–1206)","Ken’ei (1206–1207)","Jōgen (1207–1211)","Kenryaku (1211–1213)","Kenpō (1213–1219)","Jōkyū (1219–1222)","Jōō (1222–1224)","Gennin (1224–1225)","Karoku (1225–1227)","Antei (1227–1229)","Kanki (1229–1232)","Jōei (1232–1233)","Tenpuku (1233–1234)","Bunryaku (1234–1235)","Katei (1235–1238)","Ryakunin (1238–1239)","En’ō (1239–1240)","Ninji (1240–1243)","Kangen (1243–1247)","Hōji (1247–1249)","Kenchō (1249–1256)","Kōgen (1256–1257)","Shōka (1257–1259)","Shōgen (1259–1260)","Bun’ō (1260–1261)","Kōchō (1261–1264)","Bun’ei (1264–1275)","Kenji (1275–1278)","Kōan (1278–1288)","Shōō (1288–1293)","Einin (1293–1299)","Shōan (1299–1302)","Kengen (1302–1303)","Kagen (1303–1306)","Tokuji (1306–1308)","Enkyō (1308–1311)","Ōchō (1311–1312)","Shōwa (1312–1317)","Bunpō (1317–1319)","Genō (1319–1321)","Genkō (1321–1324)","Shōchū (1324–1326)","Karyaku (1326–1329)","Gentoku (1329–1331)","Genkō (1331–1334)","Kenmu (1334–1336)","Engen (1336–1340)","Kōkoku (1340–1346)","Shōhei (1346–1370)","Kentoku (1370–1372)","Bunchū (1372–1375)","Tenju (1375–1379)","Kōryaku (1379–1381)","Kōwa (1381–1384)","Genchū (1384–1392)","Meitoku (1384–1387)","Kakei (1387–1389)","Kōō (1389–1390)","Meitoku (1390–1394)","Ōei (1394–1428)","Shōchō (1428–1429)","Eikyō (1429–1441)","Kakitsu (1441–1444)","Bun’an (1444–1449)","Hōtoku (1449–1452)","Kyōtoku (1452–1455)","Kōshō (1455–1457)","Chōroku (1457–1460)","Kanshō (1460–1466)","Bunshō (1466–1467)","Ōnin (1467–1469)","Bunmei (1469–1487)","Chōkyō (1487–1489)","Entoku (1489–1492)","Meiō (1492–1501)","Bunki (1501–1504)","Eishō (1504–1521)","Taiei (1521–1528)","Kyōroku (1528–1532)","Tenbun (1532–1555)","Kōji (1555–1558)","Eiroku (1558–1570)","Genki (1570–1573)","Tenshō (1573–1592)","Bunroku (1592–1596)","Keichō (1596–1615)","Genna (1615–1624)","Kan’ei (1624–1644)","Shōho (1644–1648)","Keian (1648–1652)","Jōō (1652–1655)","Meireki (1655–1658)","Manji (1658–1661)","Kanbun (1661–1673)","Enpō (1673–1681)","Tenna (1681–1684)","Jōkyō (1684–1688)","Genroku (1688–1704)","Hōei (1704–1711)","Shōtoku (1711–1716)","Kyōhō (1716–1736)","Genbun (1736–1741)","Kanpō (1741–1744)","Enkyō (1744–1748)","Kan’en (1748–1751)","Hōreki (1751–1764)","Meiwa (1764–1772)","An’ei (1772–1781)","Tenmei (1781–1789)","Kansei (1789–1801)","Kyōwa (1801–1804)","Bunka (1804–1818)","Bunsei (1818–1830)","Tenpō (1830–1844)","Kōka (1844–1848)","Kaei (1848–1854)","Ansei (1854–1860)","Man’en (1860–1861)","Bunkyū (1861–1864)","Genji (1864–1865)","Keiō (1865–1868)","Meiji","Taishō","Shōwa","Heisei"]},dayPeriods:{am:"AM",pm:"PM"}},persian:{months:{narrow:["1","2","3","4","5","6","7","8","9","10","11","12"],short:["Farvardin","Ordibehesht","Khordad","Tir","Mordad","Shahrivar","Mehr","Aban","Azar","Dey","Bahman","Esfand"],long:["Farvardin","Ordibehesht","Khordad","Tir","Mordad","Shahrivar","Mehr","Aban","Azar","Dey","Bahman","Esfand"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["AP"],short:["AP"],long:["AP"]},dayPeriods:{am:"AM",pm:"PM"}},roc:{months:{narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],short:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],long:["January","February","March","April","May","June","July","August","September","October","November","December"]},days:{narrow:["S","M","T","W","T","F","S"],short:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],long:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},eras:{narrow:["Before R.O.C.","Minguo"],short:["Before R.O.C.","Minguo"],long:["Before R.O.C.","Minguo"]},dayPeriods:{am:"AM",pm:"PM"}}}},number:{nu:["latn"],patterns:{decimal:{positivePattern:"{number}",negativePattern:"{minusSign}{number}"},currency:{positivePattern:"{currency}{number}",negativePattern:"{minusSign}{currency}{number}"},percent:{positivePattern:"{number}{percentSign}",negativePattern:"{minusSign}{number}{percentSign}"}},symbols:{latn:{decimal:".",group:",",nan:"NaN",plusSign:"+",minusSign:"-",percentSign:"%",infinity:"∞"}},currencies:{AUD:"A$",BRL:"R$",CAD:"CA$",CNY:"CN¥",EUR:"€",GBP:"£",HKD:"HK$",ILS:"₪",INR:"₹",JPY:"¥",KRW:"₩",MXN:"MX$",NZD:"NZ$",TWD:"NT$",USD:"$",VND:"₫",XAF:"FCFA",XCD:"EC$",XOF:"CFA",XPF:"CFPF"}}});
diff --git a/test-events.js b/test-events.js
new file mode 100644
index 000000000000..e32e0a537e83
--- /dev/null
+++ b/test-events.js
@@ -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
+ */
+
+Zone[Zone.__symbol__('BLACK_LISTED_EVENTS')] = ['scroll'];
\ No newline at end of file
diff --git a/test-init.dart b/test-init.dart
deleted file mode 100644
index 7e1096de8f4b..000000000000
--- a/test-init.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-import 'package:angular2/src/dom/browser_adapter.dart';
-
-main() {
-  BrowserDomAdapter.makeCurrent();
-}
diff --git a/test-main.dart b/test-main.dart
deleted file mode 100644
index 0726d474bb70..000000000000
--- a/test-main.dart
+++ /dev/null
@@ -1,29 +0,0 @@
-import 'package:guinness/guinness.dart';
-import 'package:unittest/unittest.dart' as unit;
-
-import 'package:angular2/src/test_lib/test_lib.dart' show testSetup;
-
-main() {
-  unit.filterStacks = true;
-  unit.formatStacks = false;
-  unit.unittestConfiguration.timeout = new Duration(milliseconds: 100);
-
-  _printWarnings();
-
-  guinness.autoInit = false;
-  guinness.initSpecs();
-
-  testSetup();
-}
-
-_printWarnings () {
-  final info = guinness.suiteInfo();
-
-  if (info.activeIts.any((it) => it.exclusive)) {
-    print("WARN: iit caused some tests to be excluded");
-  }
-
-  if (info.exclusiveDescribes.isNotEmpty) {
-    print("WARN: ddescribe caused some tests to be excluded");
-  }
-}
diff --git a/test-main.js b/test-main.js
index f93f987332c0..9514ddd33026 100644
--- a/test-main.js
+++ b/test-main.js
@@ -1,10 +1,13 @@
-// Tun on full stack traces in errors to help debugging
-Error.stackTraceLimit=Infinity;
+/**
+ * @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
+ */
 
-// Use "register" extension from systemjs.
-// That's what Traceur outputs: `System.register()`.
-register(System);
-cjs(System);
+// Tun on full stack traces in errors to help debugging
+Error.stackTraceLimit = Infinity;
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
 
@@ -12,42 +15,217 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
 // we will call `__karma__.start()` later, once all the specs are loaded.
 __karma__.loaded = function() {};
 
-System.baseURL = '/base/';
-
-// So that we can import packages like `core/foo`, instead of `core/src/foo`.
-System.paths = {
-  '*': './*.js',
-  'benchpress/*': 'dist/js/dev/es5/benchpress/*.js',
-  'angular2/*': 'dist/js/dev/es5/angular2/*.js',
-  'rtts_assert/*': 'dist/js/dev/es5/rtts_assert/*.js',
-  'rx': 'node_modules/rx/dist/rx.js'
-};
-
-// Import all the specs, execute their `main()` method and kick off Karma (Jasmine).
-System.import('angular2/src/dom/browser_adapter').then(function(browser_adapter) {
-  browser_adapter.BrowserDomAdapter.makeCurrent();
-}).then(function() {
-  return Promise.all(
-    Object.keys(window.__karma__.files) // All files served by Karma.
-    .filter(onlySpecFiles)
-    .map(window.file2moduleName)        // Normalize paths to module names.
-    .map(function(path) {
-      return System.import(path).then(function(module) {
-        if (module.hasOwnProperty('main')) {
-          module.main();
-        } else {
-          throw new Error('Module ' + path + ' does not implement main() method.');
+window.isNode = false;
+window.isBrowser = true;
+
+System.config({
+  baseURL: '/base',
+  defaultJSExtensions: true,
+  map: {
+    'benchpress/*': 'dist/js/dev/es5/benchpress/*.js',
+    '@angular': 'dist/all/@angular',
+    'domino': 'dist/all/@angular/empty.js',
+    'url': 'dist/all/@angular/empty.js',
+    'xhr2': 'dist/all/@angular/empty.js',
+    '@angular/platform-server/src/domino_adapter': 'dist/all/empty.js',
+    'rxjs': 'node_modules/rxjs',
+  },
+  packages: {
+    '@angular/core/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/animations/browser/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/animations/browser': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/animations/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/animations': {main: 'index.js', defaultExtension: 'js'},
+    '@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
+    '@angular/facade': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/router/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/http/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/http': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/upgrade/static': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/upgrade': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser/animations/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser/animations': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-server/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-server': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/private/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/elements': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/ajax': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/testing': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs/websocket': {main: 'index.js', defaultExtension: 'js'},
+    'rxjs': {main: 'index.js', defaultExtension: 'js'},
+  }
+});
+
+
+// Load browser-specific CustomElement polyfills, set up the test injector, import all the specs,
+// execute their `main()` method and kick off Karma (Jasmine).
+Promise
+    .resolve()
+
+    // Load browser-specific polyfills for custom elements.
+    .then(function() { return loadCustomElementsPolyfills(); })
+
+    // Load necessary testing packages.
+    .then(function() {
+      return Promise.all([
+        System.import('@angular/core/testing'),
+        System.import('@angular/platform-browser-dynamic/testing'),
+        System.import('@angular/platform-browser/animations')
+      ]);
+    })
+
+    // Set up the test injector.
+    .then(function(mods) {
+      var coreTesting = mods[0];
+      var pbdTesting = mods[1];
+      var pbAnimations = mods[2];
+
+      coreTesting.TestBed.initTestEnvironment(
+          [pbdTesting.BrowserDynamicTestingModule, pbAnimations.NoopAnimationsModule],
+          pbdTesting.platformBrowserDynamicTesting());
+    })
+
+    // Import all the specs and execute their `main()` method.
+    .then(function() {
+      return Promise.all(Object
+                             .keys(window.__karma__.files)  // All files served by Karma.
+                             .filter(onlySpecFiles)
+                             .map(window.file2moduleName)  // Normalize paths to module names.
+                             .map(function(path) {
+                               return System.import(path).then(function(module) {
+                                 if (module.hasOwnProperty('main')) {
+                                   throw new Error('main() in specs are no longer supported');
+                                 }
+                               });
+                             }));
+    })
+
+    // Kick off karma (Jasmine).
+    .then(function() { __karma__.start(); }, function(error) { console.error(error); });
+
+
+function loadCustomElementsPolyfills() {
+  var loadedPromise = Promise.resolve();
+
+  // The custom elements polyfill relies on `MutationObserver`.
+  if (!window.MutationObserver) {
+    loadedPromise =
+        loadedPromise
+            .then(function() { return System.import('node_modules/mutation-observer/index.js'); })
+            .then(function(MutationObserver) { window.MutationObserver = MutationObserver; });
+  }
+
+  // The custom elements polyfill relies on `Object.setPrototypeOf()`.
+  if (!Object.setPrototypeOf) {
+    var getDescriptor = function getDescriptor(obj, prop) {
+      var descriptor;
+      while (obj && !descriptor) {
+        descriptor = Object.getOwnPropertyDescriptor(obj, prop);
+        obj = Object.getPrototypeOf(obj);
+      }
+      return descriptor || {};
+    };
+    var setPrototypeOf = function setPrototypeOf(obj, proto) {
+      for (var prop in proto) {
+        if (!obj.hasOwnProperty(prop)) {
+          Object.defineProperty(obj, prop, getDescriptor(proto, prop));
         }
+      }
+      return obj;
+    };
+
+    Object.defineProperty(setPrototypeOf, '$$shimmed', {value: true});
+    Object.setPrototypeOf = setPrototypeOf;
+  }
+
+  // The custom elements polyfill will patch properties and methods on `(HTML)Element` and `Node`
+  // (among others), including `(HTML)Element#innerHTML` and `Node#removeChild()`:
+  // https://github.com/webcomponents/custom-elements/blob/4f7072c0dbda4beb505d16967acfffd33337b325/src/Patch/Element.js#L28-L73
+  // https://github.com/webcomponents/custom-elements/blob/4f7072c0dbda4beb505d16967acfffd33337b325/src/Patch/Node.js#L105-L120
+  // The patched `innerHTML` setter and `removeChild()` method will try to traverse the DOM (via
+  // `nextSibling` and `parentNode` respectively), which leads to infinite loops when testing
+  // `HtmlSanitizer` with cloberred elements on browsers that do not support the `<template>`
+  // element:
+  // https://github.com/angular/angular/blob/213baa37b0b71e72d00ad7b606ebfc2ade06b934/packages/platform-browser/src/security/html_sanitizer.ts#L29-L38
+  // To avoid that, we "unpatch" these properties/methods and apply the patch only for the relevant
+  // `@angular/elements` tests.
+  var patchConfig = {'innerHTML': ['Element', 'HTMLElement'], 'removeChild': ['Node']};
+  var patchTargets = {};
+  var originalDescriptors = {};
+  if (!window.customElements) {
+    Object.keys(patchConfig).forEach(function(prop) {
+      patchConfig[prop]
+          .map(function(name) { return window[name].prototype; })
+          .some(function(candidatePatchTarget) {
+            var candidateOriginalDescriptor =
+                Object.getOwnPropertyDescriptor(candidatePatchTarget, prop);
+
+            if (candidateOriginalDescriptor) {
+              patchTargets[prop] = candidatePatchTarget;
+              originalDescriptors[prop] = candidateOriginalDescriptor;
+              return true;
+            }
+          });
+    });
+  }
+
+  var polyfillPath = !window.customElements ?
+      // Load custom elements polyfill.
+      'node_modules/@webcomponents/custom-elements/custom-elements.min.js' :
+      // Allow ES5 functions as custom element constructors.
+      'node_modules/@webcomponents/custom-elements/src/native-shim.js';
+
+  loadedPromise =
+      loadedPromise.then(function() { return System.import(polyfillPath); }).then(function() {
+        // `packages/compiler/test/schema/schema_extractor.ts` relies on `HTMLElement.name`,
+        // but custom element polyfills will replace `HTMLElement` with an anonymous function.
+        Object.defineProperty(HTMLElement, 'name', {value: 'HTMLElement'});
+
+        // Create helper functions on `window` for patching/restoring properties/methods.
+        Object.keys(patchConfig).forEach(function(prop) {
+          var patchMethod = '$$patch_' + prop;
+          var restoreMethod = '$$restore_' + prop;
+
+          if (!patchTargets[prop]) {
+            // No patching detected. Create no-op functions.
+            window[patchMethod] = window[restoreMethod] = function() {};
+          } else {
+            var patchTarget = patchTargets[prop];
+            var originalDescriptor = originalDescriptors[prop];
+            var patchedDescriptor = Object.getOwnPropertyDescriptor(patchTarget, prop);
+
+            window[patchMethod] = function() {
+              Object.defineProperty(patchTarget, prop, patchedDescriptor);
+            };
+            window[restoreMethod] = function() {
+              Object.defineProperty(patchTarget, prop, originalDescriptor);
+            };
+
+            // Restore `prop`. The patch will be manually applied only during the
+            // `@angular/elements` tests that need it.
+            window[restoreMethod]();
+          }
+        });
       });
-    }));
-})
-.then(function() {
-  __karma__.start();
-}, function(error) {
-  console.error(error.stack || error);
-  __karma__.start();
-});
 
+  return loadedPromise;
+}
 
 function onlySpecFiles(path) {
   return /_spec\.js$/.test(path);
diff --git a/test.sh b/test.sh
new file mode 100755
index 000000000000..812448f0866e
--- /dev/null
+++ b/test.sh
@@ -0,0 +1,31 @@
+#!/usr/bin/env bash
+
+set -e -o pipefail
+
+if [ $# -eq 0 ]
+  then
+    echo "Angular test runner. (No platform specified)"
+    echo
+    echo "./test.sh [node|browser|browserNoRouter|router] [--debug]"
+    echo "(--debug flag only relevant to 'node' testing - see https://github.com/angular/angular/blob/master/docs/DEBUG.md)"
+    echo
+else
+  cd `dirname $0`
+  rm -rf dist/tools
+  if [ -z ${NODE_PATH+x} ]; then
+    export NODE_PATH=$(pwd)/dist/all:$(pwd)/dist/tools
+  else
+    export NODE_PATH=$NODE_PATH:$(pwd)/dist/all/:$(pwd)/dist/tools/
+  fi
+  echo "Compiling tools..."
+  $(npm bin)/tsc -p tools
+  if [[ $1 == 'node' ]]; then
+    # Note: .metadata.json files are needed for the language service tests!
+    echo "Building compiler..."
+    $(npm bin)/tsc -p packages/compiler/tsconfig-tools.json
+    $(npm bin)/tsc -p packages/compiler-cli/tsconfig-tools.json
+    echo "Creating packages .metadata.json files..."
+    node --max-old-space-size=3000 dist/tools/@angular/compiler-cli/src/main -p packages/tsconfig-metadata.json
+  fi
+  node --harmony dist/tools/tsc-watch/ $1 watch $2
+fi
diff --git a/tools/BUILD.bazel b/tools/BUILD.bazel
new file mode 100644
index 000000000000..4509a207c35d
--- /dev/null
+++ b/tools/BUILD.bazel
@@ -0,0 +1 @@
+exports_files(["tsconfig.json"])
diff --git a/tools/bazel.rc b/tools/bazel.rc
new file mode 100644
index 000000000000..d9f63f2da3e5
--- /dev/null
+++ b/tools/bazel.rc
@@ -0,0 +1,62 @@
+###############################
+# Typescript / Angular / Sass #
+###############################
+
+# Make compilation fast, by keeping a few copies of the compilers
+# running as daemons, and cache SourceFile AST's to reduce parse time.
+build --strategy=TypeScriptCompile=worker
+build --strategy=AngularTemplateCompile=worker
+
+# Enable debugging tests with --config=debug
+test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test_strategy=exclusive --test_timeout=9999 --nocache_test_results
+
+###############################
+# Filesystem interactions     #
+###############################
+
+# Don't create symlinks like bazel-out in the project.
+# These cause VSCode to traverse a massive tree, opening file handles and
+# eventually a surprising failure with auto-discovery of the C++ toolchain in
+# MacOS High Sierra.
+# See https://github.com/bazelbuild/bazel/issues/4603
+build --symlink_prefix=/
+
+# Performance: avoid stat'ing input files
+build --watchfs
+
+###############################
+# Release support             #
+###############################
+
+# Releases should always be stamped with version control info
+build --workspace_status_command=./tools/bazel_stamp_vars.sh
+
+###############################
+# Output                      #
+###############################
+
+# A more useful default output mode for bazel query
+# Prints eg. "ng_module rule //foo:bar" rather than just "//foo:bar"
+query --output=label_kind
+
+# By default, failing tests don't print any output, it goes to the log file
+test --test_output=errors
+
+# Show which actions are run under workers,
+# and print all the actions running in parallel.
+# Helps to demonstrate that bazel uses all the cores on the machine.
+build --experimental_ui
+test --experimental_ui
+
+################################
+# Settings for CircleCI        #
+################################
+
+# Bazel flags for CircleCI are in /.circleci/bazel.rc
+
+################################
+# Temporary Settings for Ivy   #
+################################
+# to determine if the compiler used should be Ivy or ViewEngine one can use `--define=compile=local` on 
+# any bazel target. This is a temporary flag until codebase is permanently switched to Ivy.
+build --define=compile=legacy
\ No newline at end of file
diff --git a/tools/bazel_stamp_vars.sh b/tools/bazel_stamp_vars.sh
new file mode 100755
index 000000000000..3092f6c6cbc8
--- /dev/null
+++ b/tools/bazel_stamp_vars.sh
@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+# Generates the data used by the stamping feature in bazel.
+# See the section on stamping in docs/BAZEL.md
+
+set -u -e -E -o pipefail
+
+echo "Running: $0" >&2
+
+function onError {
+  echo "Failed to execute: $0"
+  echo ""
+}
+
+# Setup crash trap
+trap 'onError' ERR
+
+
+echo BUILD_SCM_HASH $(git rev-parse HEAD)
+
+if [[ "$(git tag)" == "" ]]; then
+  echo "No git tags found, can't stamp the build."
+  echo "Either fetch the tags:"
+  echo "       git fetch git@github.com:angular/angular.git --tags"
+  echo "or build without stamping by giving an empty workspace_status_command:"
+  echo "       bazel build --workspace_status_command= ..."
+  echo ""
+fi
+
+# Only match the latest tag that is a version such as 6.0.0, 6.0.0-rc.5, etc...
+# This will ignore non-version tags which would break unit tests expecting a valid version
+# number in the package headers
+BUILD_SCM_VERSION_RAW=$(git describe --match [0-9].[0-9].[0-9]* --abbrev=7 --tags HEAD)
+
+# Find out if there are any uncommitted local changes
+# TODO(i): is it ok to use "--untracked-files=no" to ignore untracked files since they should not affect anything?
+if [[ $(git status --untracked-files=no --porcelain) ]]; then LOCAL_CHANGES="true"; else LOCAL_CHANGES="false"; fi
+echo BUILD_SCM_LOCAL_CHANGES ${LOCAL_CHANGES}
+
+# Reformat `git describe` version string into a more semver-ish string
+#   From:   5.2.0-rc.0-57-g757f886
+#   To:     5.2.0-rc.0+57.sha-757f886
+#   Or:     5.2.0-rc.0+57.sha-757f886.with-local-changes
+BUILD_SCM_VERSION="$(echo ${BUILD_SCM_VERSION_RAW} | sed -E 's/-([0-9]+)-g/+\1.sha-/g')""$( if [[ $LOCAL_CHANGES == "true" ]]; then echo ".with-local-changes"; fi)"
+echo BUILD_SCM_VERSION ${BUILD_SCM_VERSION}
diff --git a/tools/broccoli/angular_builder.d.ts b/tools/broccoli/angular_builder.d.ts
deleted file mode 100644
index c7476f3c4988..000000000000
--- a/tools/broccoli/angular_builder.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-interface AngularBuilderOptions {
-  outputPath: string;
-  dartSDK?: any;
-  logs?: any;
-}
diff --git a/tools/broccoli/angular_builder.ts b/tools/broccoli/angular_builder.ts
deleted file mode 100644
index ae45e1ef579a..000000000000
--- a/tools/broccoli/angular_builder.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-var broccoli = require('broccoli');
-var fs = require('fs');
-var makeBrowserTree = require('./trees/browser_tree');
-var makeNodeTree = require('./trees/node_tree');
-var makeDartTree = require('./trees/dart_tree');
-var path = require('path');
-var printSlowTrees = require('broccoli-slow-trees');
-var Q = require('q');
-
-/**
- * BroccoliBuilder facade for all of our build pipelines.
- */
-export class AngularBuilder {
-  private nodeBuilder: BroccoliBuilder;
-  private browserDevBuilder: BroccoliBuilder;
-  private browserProdBuilder: BroccoliBuilder;
-  private dartBuilder: BroccoliBuilder;
-  private outputPath: string;
-  private firstResult: BuildResult;
-
-  constructor(public options: AngularBuilderOptions) { this.outputPath = options.outputPath; }
-
-
-  public rebuildBrowserDevTree(): Promise<BuildResult> {
-    this.browserDevBuilder = this.browserDevBuilder || this.makeBrowserDevBuilder();
-    return this.rebuild(this.browserDevBuilder, 'js.dev');
-  }
-
-
-  public rebuildBrowserProdTree(): Promise<BuildResult> {
-    this.browserProdBuilder = this.browserProdBuilder || this.makeBrowserProdBuilder();
-    return this.rebuild(this.browserProdBuilder, 'js.prod');
-  }
-
-
-  public rebuildNodeTree(): Promise<BuildResult> {
-    this.nodeBuilder = this.nodeBuilder || this.makeNodeBuilder();
-    return this.rebuild(this.nodeBuilder, 'js.cjs');
-  }
-
-
-  public rebuildDartTree(): Promise<BuildResult> {
-    this.dartBuilder = this.dartBuilder || this.makeDartBuilder();
-    return this.rebuild(this.dartBuilder, 'dart');
-  }
-
-
-  cleanup(): Promise<any> {
-    return Q.all([
-      this.nodeBuilder && this.nodeBuilder.cleanup(),
-      this.browserDevBuilder && this.browserDevBuilder.cleanup(),
-      this.browserProdBuilder && this.browserProdBuilder.cleanup()
-    ]);
-  }
-
-
-  private makeBrowserDevBuilder(): BroccoliBuilder {
-    let tree = makeBrowserTree({name: 'dev', typeAssertions: true},
-                               path.join(this.outputPath, 'js', 'dev'));
-    return new broccoli.Builder(tree);
-  }
-
-
-  private makeBrowserProdBuilder(): BroccoliBuilder {
-    let tree = makeBrowserTree({name: 'prod', typeAssertions: false},
-                               path.join(this.outputPath, 'js', 'prod'));
-    return new broccoli.Builder(tree);
-  }
-
-
-  private makeNodeBuilder(): BroccoliBuilder {
-    let tree = makeNodeTree(path.join(this.outputPath, 'js', 'cjs'));
-    return new broccoli.Builder(tree);
-  }
-
-
-  private makeDartBuilder(): BroccoliBuilder {
-    let options = {
-      outputPath: path.join(this.outputPath, 'dart'),
-      dartSDK: this.options.dartSDK,
-      logs: this.options.logs
-    };
-    let tree = makeDartTree(options);
-    return new broccoli.Builder(tree);
-  }
-
-
-  private rebuild(builder, name) {
-    return builder.build().then(
-        (result) => {
-          if (!this.firstResult) {
-            this.firstResult = result;
-          }
-
-          printSlowTrees(result.graph);
-          writeBuildLog(result, name);
-        },
-        (error) => {
-          // the build tree is the same during rebuilds, only leaf properties of the nodes change
-          // so let's traverse it and get updated values for input/cache/output paths
-          if (this.firstResult) {
-            writeBuildLog(this.firstResult, name);
-          }
-          throw error;
-        });
-  }
-}
-
-
-function writeBuildLog(result: BuildResult, name: string) {
-  let logPath = `tmp/build.${name}.log`;
-  let prevLogPath = logPath + '.previous';
-  let formattedLogContent = JSON.stringify(broccoliNodeToBuildNode(result.graph), null, 2);
-
-  if (fs.existsSync(prevLogPath)) fs.unlinkSync(prevLogPath);
-  if (fs.existsSync(logPath)) fs.renameSync(logPath, prevLogPath);
-  fs.writeFileSync(logPath, formattedLogContent, {encoding: 'utf-8'});
-}
-
-
-function broccoliNodeToBuildNode(broccoliNode) {
-  let tree = broccoliNode.tree.newStyleTree || broccoliNode.tree;
-
-  return new BuildNode(tree.description || tree.constructor.name,
-                       tree.inputPath ? [tree.inputPath] : tree.inputPaths, tree.cachePath,
-                       tree.outputPath, broccoliNode.subtrees.map(broccoliNodeToBuildNode));
-}
-
-
-class BuildNode {
-  constructor(public pluginName: string, public inputPaths: string[], public cachePath: string,
-              public outputPath: string, public inputNodes: BroccoliNode[]) {}
-}
diff --git a/tools/broccoli/broccoli-dartfmt.ts b/tools/broccoli/broccoli-dartfmt.ts
deleted file mode 100644
index 7872c81a4d20..000000000000
--- a/tools/broccoli/broccoli-dartfmt.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/// <reference path="../typings/node/node.d.ts" />
-/// <reference path="../typings/fs-extra/fs-extra.d.ts" />
-import fse = require('fs-extra');
-import path = require('path');
-import {wrapDiffingPlugin, DiffingBroccoliPlugin, DiffResult} from './diffing-broccoli-plugin';
-var spawn = require('child_process').spawn;
-var exec = require('child_process').exec;
-
-function processToPromise(process) {
-  return new Promise(function(resolve, reject) {
-    process.on('close', function(code) {
-      if (code) {
-        reject(code);
-      } else {
-        resolve();
-      }
-    });
-  });
-}
-
-class DartFormatter implements DiffingBroccoliPlugin {
-  private DARTFMT: string;
-  private verbose: boolean;
-  private firstBuild: boolean = true;
-
-  constructor(public inputPath: string, public cachePath: string, options) {
-    if (!options.dartSDK) throw new Error("Missing Dart SDK");
-    this.DARTFMT = options.dartSDK.DARTFMT;
-    this.verbose = options.logs.dartfmt;
-  }
-
-  rebuild(treeDiff: DiffResult): Promise<any> {
-    let args = ['-w'];
-    let argsLength = 2;
-    let argPackages = [];
-    let firstBuild = this.firstBuild;
-    treeDiff.addedPaths.concat(treeDiff.changedPaths)
-        .forEach((changedFile) => {
-          let sourcePath = path.join(this.inputPath, changedFile);
-          let destPath = path.join(this.cachePath, changedFile);
-          if (!firstBuild && /\.dart$/.test(changedFile)) {
-            if ((argsLength + destPath.length + 2) >= 0x2000) {
-              // Win32 command line arguments length
-              argPackages.push(args);
-              args = ['-w'];
-              argsLength = 2;
-            }
-            args.push(destPath);
-            argsLength += destPath.length + 2;
-          }
-          fse.copySync(sourcePath, destPath);
-        });
-    treeDiff.removedPaths.forEach((removedFile) => {
-      let destPath = path.join(this.cachePath, removedFile);
-      fse.removeSync(destPath);
-    });
-
-    if (!firstBuild && args.length > 1) {
-      argPackages.push(args);
-    }
-
-    let execute = (args) => {
-      if (args.length < 2) return Promise.resolve();
-      return new Promise((resolve, reject) => {
-        exec(this.DARTFMT + ' ' + args.join(' '), (err, stdout, stderr) => {
-          if (this.verbose) {
-            console.log(stdout);
-          }
-          if (err) {
-            console.error(shortenFormatterOutput(stderr));
-            reject('Formatting failed.');
-          } else {
-            resolve();
-          }
-        });
-      });
-    };
-
-    if (firstBuild) {
-      // On firstBuild, format the entire cachePath
-      this.firstBuild = false;
-      return execute(['-w', this.cachePath]);
-    }
-
-    return Promise.all(argPackages.map(execute));
-  }
-}
-
-export default wrapDiffingPlugin(DartFormatter);
-
-var ARROW_LINE = /^(\s+)\^+/;
-var BEFORE_CHARS = 15;
-var stripAnsi = require('strip-ansi');
-function shortenFormatterOutput(formatterOutput) {
-  var lines = formatterOutput.split('\n');
-  var match, line;
-  for (var i = 0; i < lines.length; i += 1) {
-    line = lines[i];
-    if (match = stripAnsi(line).match(ARROW_LINE)) {
-      let leadingWhitespace = match[1].length;
-      let leadingCodeChars = Math.min(leadingWhitespace, BEFORE_CHARS);
-      lines[i] = line.substr(leadingWhitespace - leadingCodeChars);
-      lines[i - 1] = lines[i - 1].substr(leadingWhitespace - leadingCodeChars, 80) + '…';
-    }
-  }
-  return lines.join('\n');
-}
diff --git a/tools/broccoli/broccoli-dest-copy.ts b/tools/broccoli/broccoli-dest-copy.ts
deleted file mode 100644
index ecfd90a482b6..000000000000
--- a/tools/broccoli/broccoli-dest-copy.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/// <reference path="../typings/node/node.d.ts" />
-/// <reference path="../typings/fs-extra/fs-extra.d.ts" />
-
-import fs = require('fs');
-import fse = require('fs-extra');
-import path = require('path');
-import {wrapDiffingPlugin, DiffingBroccoliPlugin, DiffResult} from './diffing-broccoli-plugin';
-
-/**
- * Intercepts each file as it is copied to the destination tempdir,
- * and tees a copy to the given path outside the tmp dir.
- */
-class DestCopy implements DiffingBroccoliPlugin {
-  constructor(private inputPath, private cachePath, private outputRoot: string) {}
-
-
-  rebuild(treeDiff: DiffResult) {
-    treeDiff.addedPaths.concat(treeDiff.changedPaths)
-        .forEach((changedFilePath) => {
-          var destFilePath = path.join(this.outputRoot, changedFilePath);
-
-          var destDirPath = path.dirname(destFilePath);
-          fse.mkdirsSync(destDirPath);
-          fse.copySync(path.join(this.inputPath, changedFilePath), destFilePath);
-        });
-
-    treeDiff.removedPaths.forEach((removedFilePath) => {
-      var destFilePath = path.join(this.outputRoot, removedFilePath);
-
-      // TODO: what about obsolete directories? we are not cleaning those up yet
-      fs.unlinkSync(destFilePath);
-    });
-  }
-}
-
-export default wrapDiffingPlugin(DestCopy);
diff --git a/tools/broccoli/broccoli-filter.d.ts b/tools/broccoli/broccoli-filter.d.ts
deleted file mode 100644
index 3a04ebea2a89..000000000000
--- a/tools/broccoli/broccoli-filter.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/// <reference path="../typings/es6-promise/es6-promise.d.ts" />
-
-interface FilterOptions {
-  extensions?: string[]
-}
-
-declare class Filter {
-  constructor(inputTree: any, options?: FilterOptions);
-  processString(contents: string, relativePath: string): string;
-  // NB: This function is probably not intended as part of the public API
-  processFile(srcDir: string, destDir: string, relativePath: string): Promise<any>;
-}
-
-export = Filter;
diff --git a/tools/broccoli/broccoli-flatten.spec.ts b/tools/broccoli/broccoli-flatten.spec.ts
deleted file mode 100644
index b58fd585d5e9..000000000000
--- a/tools/broccoli/broccoli-flatten.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/// <reference path="../typings/node/node.d.ts" />
-/// <reference path="../typings/jasmine/jasmine.d.ts" />
-
-let mockfs = require('mock-fs');
-import fs = require('fs');
-import path = require('path');
-import {TreeDiffer} from './tree-differ';
-import {DiffingFlatten} from './broccoli-flatten';
-
-describe('Flatten', () => {
-  afterEach(() => mockfs.restore());
-
-  function flatten(inputPaths) { return new DiffingFlatten(inputPaths, 'output', null); }
-
-  function read(path) { return fs.readFileSync(path, {encoding: "utf-8"}); }
-  function rm(path) { return fs.unlinkSync(path); }
-  function write(path, content) { fs.writeFileSync(path, content, {encoding: "utf-8"}); }
-
-
-  it('should flatten files and be incremental', () => {
-    let testDir = {
-      'input': {
-        'dir1': {
-          'file-1.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)}),
-          'file-2.txt': mockfs.file({content: 'file-2.txt content', mtime: new Date(1000)}),
-          'subdir-1': {
-            'file-1.1.txt': mockfs.file({content: 'file-1.1.txt content', mtime: new Date(1000)})
-          },
-          'empty-dir': {}
-        },
-      },
-      'output': {}
-    };
-    mockfs(testDir);
-
-    let differ = new TreeDiffer('testLabel', 'input');
-    let flattenedTree = flatten('input');
-    flattenedTree.rebuild(differ.diffTree());
-
-    expect(fs.readdirSync('output')).toEqual(['file-1.1.txt', 'file-1.txt', 'file-2.txt']);
-    // fails  due to a mock-fs bug related to reading symlinks?
-    // expect(read('output/file-1.1.txt')).toBe('file-1.1.txt content');
-
-
-    // delete a file
-    rm('input/dir1/file-1.txt');
-    // add a new one
-    write('input/dir1/file-3.txt', 'file-3.txt content');
-
-    flattenedTree.rebuild(differ.diffTree());
-
-    expect(fs.readdirSync('output')).toEqual(['file-1.1.txt', 'file-2.txt', 'file-3.txt']);
-  });
-
-
-  it('should throw an exception if duplicates are found', () => {
-    let testDir = {
-      'input': {
-        'dir1': {
-          'file-1.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)}),
-          'subdir-1':
-              {'file-1.txt': mockfs.file({content: 'file-1.1.txt content', mtime: new Date(1000)})},
-          'empty-dir': {}
-        },
-      },
-      'output': {}
-    };
-    mockfs(testDir);
-
-    let differ = new TreeDiffer('testLabel', 'input');
-    let flattenedTree = flatten('input');
-    expect(() => flattenedTree.rebuild(differ.diffTree()))
-        .toThrowError("Duplicate file 'file-1.txt' found in path 'dir1" + path.sep + "subdir-1" +
-                      path.sep + "file-1.txt'");
-  });
-});
diff --git a/tools/broccoli/broccoli-flatten.ts b/tools/broccoli/broccoli-flatten.ts
deleted file mode 100644
index 079c15f671de..000000000000
--- a/tools/broccoli/broccoli-flatten.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import fs = require('fs');
-import fse = require('fs-extra');
-import path = require('path');
-import {wrapDiffingPlugin, DiffingBroccoliPlugin, DiffResult} from './diffing-broccoli-plugin';
-var symlinkOrCopy = require('symlink-or-copy').sync;
-
-var isWindows = process.platform === 'win32';
-
-
-/**
- * Intercepts each changed file and replaces its contents with
- * the associated changes.
- */
-export class DiffingFlatten implements DiffingBroccoliPlugin {
-  constructor(private inputPath, private cachePath, private options) {}
-
-
-  rebuild(treeDiff: DiffResult) {
-    let pathsToUpdate = treeDiff.addedPaths;
-
-    // since we need to run on Windows as well we can't rely on symlinks being available,
-    // which means that we need to respond to both added and changed paths
-    if (isWindows) {
-      pathsToUpdate = pathsToUpdate.concat(treeDiff.changedPaths);
-    }
-
-    pathsToUpdate.forEach((changedFilePath) => {
-      var sourceFilePath = path.join(this.inputPath, changedFilePath);
-      var destFilePath = path.join(this.cachePath, path.basename(changedFilePath));
-      var destDirPath = path.dirname(destFilePath);
-
-      if (!fs.existsSync(destDirPath)) {
-        fse.mkdirpSync(destDirPath);
-      }
-
-      if (!fs.existsSync(destFilePath)) {
-        symlinkOrCopy(sourceFilePath, destFilePath);
-      } else {
-        throw new Error(`Duplicate file '${path.basename(changedFilePath)}' ` +
-                        `found in path '${changedFilePath}'`);
-      }
-    });
-
-    treeDiff.removedPaths.forEach((removedFilePath) => {
-      var destFilePath = path.join(this.cachePath, path.basename(removedFilePath));
-      fs.unlinkSync(destFilePath);
-    });
-  }
-}
-
-export default wrapDiffingPlugin(DiffingFlatten);
diff --git a/tools/broccoli/broccoli-lodash.ts b/tools/broccoli/broccoli-lodash.ts
deleted file mode 100644
index 849792f9dd0b..000000000000
--- a/tools/broccoli/broccoli-lodash.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import fs = require('fs');
-import fse = require('fs-extra');
-import path = require('path');
-var _ = require('lodash');
-import {wrapDiffingPlugin, DiffingBroccoliPlugin, DiffResult} from './diffing-broccoli-plugin';
-
-interface LodashRendererOptions {
-  encoding?: string;
-  context?: any;
-  // files option unsupported --- use Funnel on inputTree instead.
-  files?: string[];
-}
-
-const kDefaultOptions: LodashRendererOptions = {
-  encoding: 'utf-8',
-  context: {},
-  files: []
-};
-
-
-/**
- * Intercepts each changed file and replaces its contents with
- * the associated changes.
- */
-export class LodashRenderer implements DiffingBroccoliPlugin {
-  constructor(private inputPath, private cachePath,
-              private options: LodashRendererOptions = kDefaultOptions) {}
-
-  rebuild(treeDiff: DiffResult) {
-    let{encoding = 'utf-8', context = {}} = this.options;
-    let processFile = (relativePath) => {
-      let sourceFilePath = path.join(this.inputPath, relativePath);
-      let destFilePath = path.join(this.cachePath, relativePath);
-      let content = fs.readFileSync(sourceFilePath, {encoding});
-      let transformedContent = _.template(content)(context);
-      fse.outputFileSync(destFilePath, transformedContent);
-    };
-
-    let removeFile = (relativePath) => {
-      let destFilePath = path.join(this.cachePath, relativePath);
-      fs.unlinkSync(destFilePath);
-    };
-
-    treeDiff.addedPaths.concat(treeDiff.changedPaths).forEach(processFile);
-    treeDiff.removedPaths.forEach(removeFile);
-  }
-}
-
-export default wrapDiffingPlugin(LodashRenderer);
diff --git a/tools/broccoli/broccoli-merge-trees.spec.ts b/tools/broccoli/broccoli-merge-trees.spec.ts
deleted file mode 100644
index c1c659f54626..000000000000
--- a/tools/broccoli/broccoli-merge-trees.spec.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/// <reference path="../typings/node/node.d.ts" />
-/// <reference path="../typings/jasmine/jasmine.d.ts" />
-
-let mockfs = require('mock-fs');
-import fs = require('fs');
-import {TreeDiffer} from './tree-differ';
-import {MergeTrees} from './broccoli-merge-trees';
-
-describe('MergeTrees', () => {
-  afterEach(() => mockfs.restore());
-
-  function mergeTrees(inputPaths, cachePath, options) {
-    return new MergeTrees(inputPaths, cachePath, options);
-  }
-
-  function MakeTreeDiffers(rootDirs) {
-    let treeDiffers = rootDirs.map((rootDir) => new TreeDiffer('MergeTrees', rootDir));
-    treeDiffers.diffTrees = () => { return treeDiffers.map(tree => tree.diffTree()); };
-    return treeDiffers;
-  }
-
-  function read(path) { return fs.readFileSync(path, "utf-8"); }
-
-  it('should copy the file from the right-most inputTree with overwrite=true', () => {
-    let testDir: any = {
-      'tree1': {'foo.js': mockfs.file({content: 'tree1/foo.js content', mtime: new Date(1000)})},
-      'tree2': {'foo.js': mockfs.file({content: 'tree2/foo.js content', mtime: new Date(1000)})},
-      'tree3': {'foo.js': mockfs.file({content: 'tree3/foo.js content', mtime: new Date(1000)})}
-    };
-    mockfs(testDir);
-    let treeDiffer = MakeTreeDiffers(['tree1', 'tree2', 'tree3']);
-    let treeMerger = mergeTrees(['tree1', 'tree2', 'tree3'], 'dest', {overwrite: true});
-    treeMerger.rebuild(treeDiffer.diffTrees());
-    expect(read('dest/foo.js')).toBe('tree3/foo.js content');
-
-    delete testDir.tree2['foo.js'];
-    delete testDir.tree3['foo.js'];
-    mockfs(testDir);
-    treeMerger.rebuild(treeDiffer.diffTrees());
-    expect(read('dest/foo.js')).toBe('tree1/foo.js content');
-
-    testDir.tree2['foo.js'] = mockfs.file({content: 'tree2/foo.js content', mtime: new Date(1000)});
-    mockfs(testDir);
-    treeMerger.rebuild(treeDiffer.diffTrees());
-    expect(read('dest/foo.js')).toBe('tree2/foo.js content');
-  });
-
-  it('should throw if duplicates are found during the initial build', () => {
-    let testDir: any = {
-      'tree1': {'foo.js': mockfs.file({content: 'tree1/foo.js content', mtime: new Date(1000)})},
-      'tree2': {'foo.js': mockfs.file({content: 'tree2/foo.js content', mtime: new Date(1000)})},
-      'tree3': {'foo.js': mockfs.file({content: 'tree3/foo.js content', mtime: new Date(1000)})}
-    };
-    mockfs(testDir);
-    let treeDiffer = MakeTreeDiffers(['tree1', 'tree2', 'tree3']);
-    let treeMerger = mergeTrees(['tree1', 'tree2', 'tree3'], 'dest', {});
-    expect(() => treeMerger.rebuild(treeDiffer.diffTrees()))
-        .toThrowError(
-            'Duplicate path found while merging trees. Path: "foo.js".\n' +
-            'Either remove the duplicate or enable the "overwrite" option for this merge.');
-
-    testDir = {
-      'tree1': {'foo.js': mockfs.file({content: 'tree1/foo.js content', mtime: new Date(1000)})},
-      'tree2': {},
-      'tree3': {}
-    };
-    mockfs(testDir);
-  });
-
-
-  it('should throw if duplicates are found during rebuild', () => {
-    let testDir = {
-      'tree1': {'foo.js': mockfs.file({content: 'tree1/foo.js content', mtime: new Date(1000)})},
-      'tree2': {},
-      'tree3': {}
-    };
-    mockfs(testDir);
-
-    let treeDiffer = MakeTreeDiffers(['tree1', 'tree2', 'tree3']);
-    let treeMerger = mergeTrees(['tree1', 'tree2', 'tree3'], 'dest', {});
-    expect(() => treeMerger.rebuild(treeDiffer.diffTrees())).not.toThrow();
-
-
-    testDir.tree2['foo.js'] = mockfs.file({content: 'tree2/foo.js content', mtime: new Date(1000)});
-    mockfs(testDir);
-    expect(() => treeMerger.rebuild(treeDiffer.diffTrees()))
-        .toThrowError(
-            'Duplicate path found while merging trees. Path: "foo.js".\n' +
-            'Either remove the duplicate or enable the "overwrite" option for this merge.');
-  });
-});
diff --git a/tools/broccoli/broccoli-merge-trees.ts b/tools/broccoli/broccoli-merge-trees.ts
deleted file mode 100644
index 60672c1a2b25..000000000000
--- a/tools/broccoli/broccoli-merge-trees.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import fs = require('fs');
-import fse = require('fs-extra');
-import path = require('path');
-var symlinkOrCopySync = require('symlink-or-copy').sync;
-import {wrapDiffingPlugin, DiffingBroccoliPlugin, DiffResult} from './diffing-broccoli-plugin';
-
-var isWindows = process.platform === 'win32';
-
-interface MergeTreesOptions {
-  overwrite?: boolean;
-}
-
-function outputFileSync(sourcePath, destPath) {
-  let dirname = path.dirname(destPath);
-  fse.mkdirsSync(dirname, {fs: fs});
-  symlinkOrCopySync(sourcePath, destPath);
-}
-
-function pathOverwrittenError(path) {
-  const msg = 'Either remove the duplicate or enable the "overwrite" option for this merge.';
-  return new Error(`Duplicate path found while merging trees. Path: "${path}".\n${msg}`);
-}
-
-export class MergeTrees implements DiffingBroccoliPlugin {
-  private pathCache: {[key: string]: number[]} = Object.create(null);
-  public options: MergeTreesOptions;
-  private firstBuild: boolean = true;
-
-  constructor(public inputPaths: string[], public cachePath: string,
-              options: MergeTreesOptions = {}) {
-    this.options = options || {};
-  }
-
-  rebuild(treeDiffs: DiffResult[]) {
-    let overwrite = this.options.overwrite;
-    let pathsToEmit: string[] = [];
-    let pathsToRemove: string[] = [];
-    let emitted: {[key: string]: boolean} = Object.create(null);
-    let contains = (cache, val) => {
-      for (let i = 0, ii = cache.length; i < ii; ++i) {
-        if (cache[i] === val) return true;
-      }
-      return false;
-    };
-
-    let emit = (relativePath) => {
-      // ASSERT(!emitted[relativePath]);
-      pathsToEmit.push(relativePath);
-      emitted[relativePath] = true;
-    };
-
-    if (this.firstBuild) {
-      this.firstBuild = false;
-
-      // Build initial cache
-      treeDiffs.reverse().forEach((treeDiff: DiffResult, index) => {
-        index = treeDiffs.length - 1 - index;
-        treeDiff.addedPaths.forEach((changedPath) => {
-          let cache = this.pathCache[changedPath];
-          if (cache === undefined) {
-            this.pathCache[changedPath] = [index];
-            pathsToEmit.push(changedPath);
-          } else if (overwrite) {
-            // ASSERT(contains(pathsToEmit, changedPath));
-            cache.unshift(index);
-          } else {
-            throw pathOverwrittenError(changedPath);
-          }
-        });
-      });
-
-    } else {
-      // Update cache
-      treeDiffs.reverse().forEach((treeDiff: DiffResult, index) => {
-        index = treeDiffs.length - 1 - index;
-        if (treeDiff.removedPaths) {
-          treeDiff.removedPaths.forEach((removedPath) => {
-            let cache = this.pathCache[removedPath];
-            // ASSERT(cache !== undefined);
-            // ASSERT(contains(cache, index));
-            if (cache[cache.length - 1] === index) {
-              pathsToRemove.push(path.join(this.cachePath, removedPath));
-              cache.pop();
-              if (cache.length === 0) {
-                this.pathCache[removedPath] = undefined;
-              } else if (!emitted[removedPath]) {
-                if (cache.length === 1 && !overwrite) {
-                  throw pathOverwrittenError(removedPath);
-                }
-                emit(removedPath);
-              }
-            }
-          });
-        }
-
-        let pathsToUpdate = treeDiff.addedPaths;
-
-        if (isWindows) {
-          pathsToUpdate = pathsToUpdate.concat(treeDiff.changedPaths);
-        }
-
-        pathsToUpdate.forEach((changedPath) => {
-          let cache = this.pathCache[changedPath];
-          if (cache === undefined) {
-            // File was added
-            this.pathCache[changedPath] = [index];
-            emit(changedPath);
-          } else if (!contains(cache, index)) {
-            cache.push(index);
-            cache.sort((a, b) => a - b);
-            if (cache.length > 1 && !overwrite) {
-              throw pathOverwrittenError(changedPath);
-            }
-            if (cache[cache.length - 1] === index && !emitted[changedPath]) {
-              emit(changedPath);
-            }
-          }
-        });
-      });
-    }
-
-    pathsToRemove.forEach((destPath) => fse.removeSync(destPath));
-    pathsToEmit.forEach((emittedPath) => {
-      let cache = this.pathCache[emittedPath];
-      let destPath = path.join(this.cachePath, emittedPath);
-      let sourceIndex = cache[cache.length - 1];
-      let sourceInputPath = this.inputPaths[sourceIndex];
-      let sourcePath = path.join(sourceInputPath, emittedPath);
-      if (cache.length > 1) {
-        fse.removeSync(destPath);
-      }
-      outputFileSync(sourcePath, destPath);
-    });
-  }
-}
-
-export default wrapDiffingPlugin(MergeTrees);
diff --git a/tools/broccoli/broccoli-replace.ts b/tools/broccoli/broccoli-replace.ts
deleted file mode 100644
index b190b52d898e..000000000000
--- a/tools/broccoli/broccoli-replace.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import fs = require('fs');
-import fse = require('fs-extra');
-import path = require('path');
-import {wrapDiffingPlugin, DiffingBroccoliPlugin, DiffResult} from './diffing-broccoli-plugin';
-
-var minimatch = require('minimatch');
-var FILE_ENCODING = {encoding: 'utf-8'};
-
-/**
- * Intercepts each changed file and replaces its contents with
- * the associated changes.
- */
-class DiffingReplace implements DiffingBroccoliPlugin {
-  constructor(private inputPath, private cachePath, private options) {}
-
-  rebuild(treeDiff: DiffResult) {
-    var patterns = this.options.patterns;
-    var files = this.options.files;
-
-    treeDiff.addedPaths.concat(treeDiff.changedPaths)
-        .forEach((changedFilePath) => {
-          var sourceFilePath = path.join(this.inputPath, changedFilePath);
-          var destFilePath = path.join(this.cachePath, changedFilePath);
-          var destDirPath = path.dirname(destFilePath);
-
-          if (!fs.existsSync(destDirPath)) {
-            fse.mkdirpSync(destDirPath);
-          }
-
-          var fileMatches = files.some((filePath) => minimatch(changedFilePath, filePath));
-          if (fileMatches) {
-            var content = fs.readFileSync(sourceFilePath, FILE_ENCODING);
-            patterns.forEach((pattern) => {
-              var replacement = pattern.replacement;
-              if (typeof replacement === 'function') {
-                replacement = function(content) {
-                  return pattern.replacement(content, changedFilePath);
-                };
-              }
-              content = content.replace(pattern.match, replacement);
-            });
-            fs.writeFileSync(destFilePath, content, FILE_ENCODING);
-          } else if (!fs.existsSync(destFilePath)) {
-            fs.symlinkSync(sourceFilePath, destFilePath);
-          }
-        });
-
-    treeDiff.removedPaths.forEach((removedFilePath) => {
-      var destFilePath = path.join(this.cachePath, removedFilePath);
-      fs.unlinkSync(destFilePath);
-    });
-  }
-}
-
-export default wrapDiffingPlugin(DiffingReplace);
diff --git a/tools/broccoli/broccoli-tree-stabilizer.ts b/tools/broccoli/broccoli-tree-stabilizer.ts
deleted file mode 100644
index 9a1bf97a4f05..000000000000
--- a/tools/broccoli/broccoli-tree-stabilizer.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/// <reference path="broccoli.d.ts" />
-/// <reference path="../typings/node/node.d.ts" />
-
-import fs = require('fs');
-let symlinkOrCopy = require('symlink-or-copy');
-
-
-/**
- * Stabilizes the inputPath for the following plugins in the build tree.
- *
- * All broccoli plugins that inherit from `broccoli-writer` or `broccoli-filter` change their
- * outputPath during each rebuild.
- *
- * This means that all following plugins in the build tree can't rely on their inputPath being
- * immutable. This results in breakage of any plugin that is not expecting such behavior.
- *
- * For example all `DiffingBroccoliPlugin`s expect their inputPath to be stable.
- *
- * By inserting this plugin into the tree after any misbehaving plugin, we can stabilize the
- * inputPath for the following plugin in the tree and correct the surprising behavior.
- */
-class TreeStabilizer implements BroccoliTree {
-  inputPath: string;
-  outputPath: string;
-
-
-  constructor(public inputTree: BroccoliTree) {}
-
-
-  rebuild() {
-    fs.rmdirSync(this.outputPath);
-
-    // TODO: investigate if we can use rename the directory instead to improve performance on
-    // Windows
-    symlinkOrCopy.sync(this.inputPath, this.outputPath);
-  }
-
-
-  cleanup() {}
-}
-
-
-export default function stabilizeTree(inputTree) {
-  return new TreeStabilizer(inputTree);
-}
diff --git a/tools/broccoli/broccoli-ts2dart.ts b/tools/broccoli/broccoli-ts2dart.ts
deleted file mode 100644
index 13325be89c74..000000000000
--- a/tools/broccoli/broccoli-ts2dart.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/// <reference path="../typings/node/node.d.ts" />
-/// <reference path="../typings/fs-extra/fs-extra.d.ts" />
-/// <reference path="./ts2dart.d.ts" />
-
-import fs = require('fs');
-import fse = require('fs-extra');
-import path = require('path');
-import ts2dart = require('ts2dart');
-import {wrapDiffingPlugin, DiffingBroccoliPlugin, DiffResult} from './diffing-broccoli-plugin';
-
-class TSToDartTranspiler implements DiffingBroccoliPlugin {
-  static includeExtensions = ['.ts'];
-
-  private basePath: string;
-  private transpiler: ts2dart.Transpiler;
-
-  constructor(public inputPath: string, public cachePath: string, public options) {
-    options.basePath = inputPath;
-    this.transpiler = new ts2dart.Transpiler(options);
-  }
-
-  rebuild(treeDiff: DiffResult) {
-    let toEmit = [];
-    let getDartFilePath = (path: string) => path.replace(/((\.js)|(\.ts))$/i, '.dart');
-    treeDiff.addedPaths.concat(treeDiff.changedPaths)
-        .forEach((changedPath) => {
-          let inputFilePath = path.resolve(this.inputPath, changedPath);
-
-          // Ignore files which don't need to be transpiled to Dart
-          let dartInputFilePath = getDartFilePath(inputFilePath);
-          if (fs.existsSync(dartInputFilePath)) return;
-
-          // Prepare to rebuild
-          toEmit.push(path.resolve(this.inputPath, changedPath));
-        });
-
-    treeDiff.removedPaths.forEach((removedPath) => {
-      let absolutePath = path.resolve(this.inputPath, removedPath);
-
-      // Ignore files which don't need to be transpiled to Dart
-      let dartInputFilePath = getDartFilePath(absolutePath);
-      if (fs.existsSync(dartInputFilePath)) return;
-
-      let dartOutputFilePath = getDartFilePath(removedPath);
-      fs.unlinkSync(path.join(this.cachePath, dartOutputFilePath));
-    });
-
-    this.transpiler.transpile(toEmit, this.cachePath);
-  }
-}
-
-export default wrapDiffingPlugin(TSToDartTranspiler);
diff --git a/tools/broccoli/broccoli-typescript.ts b/tools/broccoli/broccoli-typescript.ts
deleted file mode 100644
index 86180fa49cb9..000000000000
--- a/tools/broccoli/broccoli-typescript.ts
+++ /dev/null
@@ -1,245 +0,0 @@
-/// <reference path="../typings/node/node.d.ts" />
-/// <reference path="../../node_modules/typescript/bin/typescript.d.ts" />
-
-import fs = require('fs');
-import fse = require('fs-extra');
-import path = require('path');
-import ts = require('typescript');
-import {wrapDiffingPlugin, DiffingBroccoliPlugin, DiffResult} from './diffing-broccoli-plugin';
-
-
-type FileRegistry = ts.Map<{version: number}>;
-
-const FS_OPTS = {
-  encoding: 'utf-8'
-};
-
-
-/**
- * Broccoli plugin that implements incremental Typescript compiler.
- *
- * It instantiates a typescript compiler instance that keeps all the state about the project and
- * can reemit only the files that actually changed.
- *
- * Limitations: only files that map directly to the changed source file via naming conventions are
- * reemited. This primarily affects code that uses `const enum`s, because changing the enum value
- * requires global emit, which can affect many files.
- */
-class DiffingTSCompiler implements DiffingBroccoliPlugin {
-  private tsOpts: ts.CompilerOptions;
-  private fileRegistry: FileRegistry = Object.create(null);
-  private rootFilePaths: string[];
-  private tsServiceHost: ts.LanguageServiceHost;
-  private tsService: ts.LanguageService;
-  private firstRun: boolean = true;
-  private previousRunFailed: boolean = false;
-
-  static includeExtensions = ['.ts'];
-  static excludeExtensions = ['.d.ts'];
-
-  constructor(public inputPath: string, public cachePath: string, public options) {
-    this.tsOpts = Object.create(options);
-    this.tsOpts.outDir = this.cachePath;
-    this.tsOpts.target = (<any>ts).ScriptTarget[options.target];
-    this.rootFilePaths = options.rootFilePaths ? options.rootFilePaths.splice(0) : [];
-    this.tsServiceHost = new CustomLanguageServiceHost(this.tsOpts, this.rootFilePaths,
-                                                       this.fileRegistry, this.inputPath);
-    this.tsService = ts.createLanguageService(this.tsServiceHost, ts.createDocumentRegistry());
-  }
-
-
-  rebuild(treeDiff: DiffResult) {
-    let pathsToEmit = [];
-    let pathsWithErrors = [];
-    let errorMessages = [];
-
-    treeDiff.addedPaths.concat(treeDiff.changedPaths)
-        .forEach((tsFilePath) => {
-          if (!this.fileRegistry[tsFilePath]) {
-            this.fileRegistry[tsFilePath] = {version: 0};
-            this.rootFilePaths.push(tsFilePath);
-          } else {
-            this.fileRegistry[tsFilePath].version++;
-          }
-
-          pathsToEmit.push(tsFilePath);
-        });
-
-    treeDiff.removedPaths.forEach((tsFilePath) => {
-      console.log('removing outputs for', tsFilePath);
-
-      this.rootFilePaths.splice(this.rootFilePaths.indexOf(tsFilePath), 1);
-      this.fileRegistry[tsFilePath] = null;
-      this.removeOutputFor(tsFilePath);
-    });
-
-    if (this.firstRun) {
-      this.firstRun = false;
-      this.doFullBuild();
-    } else {
-      pathsToEmit.forEach((tsFilePath) => {
-        let output = this.tsService.getEmitOutput(tsFilePath);
-
-        if (output.emitSkipped) {
-          let errorFound = this.collectErrors(tsFilePath);
-          if (errorFound) {
-            pathsWithErrors.push(tsFilePath);
-            errorMessages.push(errorFound);
-          }
-        } else {
-          output.outputFiles.forEach(o => {
-            let destDirPath = path.dirname(o.name);
-            fse.mkdirsSync(destDirPath);
-            fs.writeFileSync(o.name, o.text, FS_OPTS);
-          });
-        }
-      });
-
-      if (pathsWithErrors.length) {
-        this.previousRunFailed = true;
-        var error =
-            new Error('Typescript found the following errors:\n' + errorMessages.join('\n'));
-        error['showStack'] = false;
-        throw error;
-      } else if (this.previousRunFailed) {
-        this.doFullBuild();
-      }
-    }
-  }
-
-
-  private collectErrors(tsFilePath): String {
-    let allDiagnostics = this.tsService.getCompilerOptionsDiagnostics()
-                             .concat(this.tsService.getSyntacticDiagnostics(tsFilePath))
-                             .concat(this.tsService.getSemanticDiagnostics(tsFilePath));
-    let errors = [];
-
-    allDiagnostics.forEach(diagnostic => {
-      let message = ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n");
-      if (diagnostic.file) {
-        let{line, character} = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
-        errors.push(`  ${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`);
-      } else {
-        errors.push(`  Error: ${message}`);
-      }
-    });
-
-    if (errors.length) {
-      return errors.join('\n');
-    }
-  }
-
-
-  private doFullBuild() {
-    let program = this.tsService.getProgram();
-    let emitResult = program.emit(undefined, function(absoluteFilePath, fileContent) {
-      fse.mkdirsSync(path.dirname(absoluteFilePath));
-      fs.writeFileSync(absoluteFilePath, fileContent, FS_OPTS);
-    });
-
-    if (emitResult.emitSkipped) {
-      let allDiagnostics = ts.getPreEmitDiagnostics(program).concat(emitResult.diagnostics);
-      let errorMessages = [];
-
-      allDiagnostics.forEach(diagnostic => {
-        var pos = '';
-        if (diagnostic.file) {
-          var {line, character} = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
-          pos = `${diagnostic.file.fileName} (${line + 1}, ${character + 1}): `
-        }
-        var message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
-        errorMessages.push(`  ${pos}${message}`);
-      });
-
-      if (errorMessages.length) {
-        this.previousRunFailed = true;
-        var error =
-            new Error('Typescript found the following errors:\n' + errorMessages.join('\n'));
-        error['showStack'] = false;
-        throw error;
-      } else {
-        this.previousRunFailed = false;
-      }
-    }
-  }
-
-
-  private removeOutputFor(tsFilePath: string) {
-    let absoluteJsFilePath = path.join(this.cachePath, tsFilePath.replace(/\.ts$/, '.js'));
-    let absoluteMapFilePath = path.join(this.cachePath, tsFilePath.replace(/.ts$/, '.js.map'));
-    let absoluteDtsFilePath = path.join(this.cachePath, tsFilePath.replace(/\.ts$/, '.d.ts'));
-
-    if (fs.existsSync(absoluteJsFilePath)) {
-      fs.unlinkSync(absoluteJsFilePath);
-      fs.unlinkSync(absoluteMapFilePath);
-      fs.unlinkSync(absoluteDtsFilePath);
-    }
-  }
-}
-
-
-class CustomLanguageServiceHost implements ts.LanguageServiceHost {
-  private currentDirectory: string;
-  private defaultLibFilePath: string;
-
-
-  constructor(private compilerOptions: ts.CompilerOptions, private fileNames: string[],
-              private fileRegistry: FileRegistry, private treeInputPath: string) {
-    this.currentDirectory = process.cwd();
-    this.defaultLibFilePath = ts.getDefaultLibFilePath(compilerOptions).replace(/\\/g, '/');
-  }
-
-
-  getScriptFileNames(): string[] { return this.fileNames; }
-
-
-  getScriptVersion(fileName: string): string {
-    return this.fileRegistry[fileName] && this.fileRegistry[fileName].version.toString();
-  }
-
-
-  /**
-   * This method is called quite a bit to lookup 3 kinds of paths:
-   * 1/ files in the fileRegistry
-   *   - these are the files in our project that we are watching for changes
-   *   - in the future we could add caching for these files and invalidate the cache when
-   *     the file is changed lazily during lookup
-   * 2/ .d.ts and library files not in the fileRegistry
-   *   - these are not our files, they come from tsd or typescript itself
-   *   - these files change only rarely but since we need them very rarely, it's not worth the
-   *     cache invalidation hassle to cache them
-   * 3/ bogus paths that typescript compiler tries to lookup during import resolution
-   *   - these paths are tricky to cache since files come and go and paths that was bogus in the
-   *     past might not be bogus later
-   *
-   * In the initial experiments the impact of this caching was insignificant (single digit %) and
-   * not worth the potential issues with stale cache records.
-   */
-  getScriptSnapshot(tsFilePath: string): ts.IScriptSnapshot {
-    let absoluteTsFilePath = (tsFilePath == this.defaultLibFilePath) ?
-                                 tsFilePath :
-                                 path.join(this.treeInputPath, tsFilePath);
-
-    if (!fs.existsSync(absoluteTsFilePath)) {
-      // TypeScript seems to request lots of bogus paths during import path lookup and resolution,
-      // so we we just return undefined when the path is not correct.
-      return undefined;
-    }
-    return ts.ScriptSnapshot.fromString(fs.readFileSync(absoluteTsFilePath, FS_OPTS));
-  }
-
-
-  getCurrentDirectory(): string { return this.currentDirectory; }
-
-
-  getCompilationSettings(): ts.CompilerOptions { return this.compilerOptions; }
-
-
-  getDefaultLibFileName(options: ts.CompilerOptions): string {
-    // ignore options argument, options should not change during the lifetime of the plugin
-    return this.defaultLibFilePath;
-  }
-}
-
-
-export default wrapDiffingPlugin(DiffingTSCompiler);
diff --git a/tools/broccoli/broccoli-writer.d.ts b/tools/broccoli/broccoli-writer.d.ts
deleted file mode 100644
index ee52f3437fc9..000000000000
--- a/tools/broccoli/broccoli-writer.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/// <reference path="../typings/es6-promise/es6-promise.d.ts" />
-
-
-declare class Writer { write(readTree: (tree) => Promise<string>, destDir: string): Promise<any>; }
-
-export = Writer;
diff --git a/tools/broccoli/broccoli.d.ts b/tools/broccoli/broccoli.d.ts
deleted file mode 100644
index d058488c82ca..000000000000
--- a/tools/broccoli/broccoli.d.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-/// <reference path="../typings/es6-promise/es6-promise.d.ts" />
-
-
-interface BroccoliTree {
-  /**
-   * Contains the fs path for the input tree when the plugin takes only one input tree.
-   *
-   * For plugins that take multiple trees see the `inputPaths` property.
-   *
-   * This property is set just before the first rebuild and doesn't change afterwards.
-   */
-  inputPath: string;
-
-  /**
-   * Contains the array of fs paths for input trees.
-   *
-   * For plugins that take only one input tree, it might be more convenient to use the `inputPath`
-   *property instead.
-   *
-   * This property is set just before the first rebuild and doesn't change afterwards, unless
-   * plugins themselves change it.
-   *
-   * If the inputPath is outside of broccoli's temp directory, then it's lifetime is not managed by
-   *the builder.
-   * If the inputPath is within broccoli's temp directory it is an outputPath (and output directory)
-   *of another plugin.
-   * This means that while the `outputPath` doesn't change, the underlying directory is frequently
-   *recreated.
-   */
-  inputPaths?: string[];
-
-  /**
-   * Contains the fs paths for the output trees.
-   *
-   * This property is set just before the first rebuild and doesn't change afterwards, unless the
-   * plugins themselves change it.
-   *
-   * The underlying directory is also created by the builder just before the first rebuild.
-   * This directory is destroyed and recreated upon each rebuild.
-   */
-  outputPath?: string;
-
-  /**
-   * Contains the fs paths for a cache directory available to the plugin.
-   *
-   * This property is set just before the first rebuild and doesn't change afterwards.
-   *
-   * The underlying directory is also created by the builder just before the first rebuild.
-   * The lifetime of the directory is associated with the lifetime of the plugin.
-   */
-  cachePath?: string;
-
-  inputTree?: BroccoliTree;
-  inputTrees?: BroccoliTree[];
-
-  /**
-   * Trees which implement the rebuild api are wrapped automatically for api compat,
-   * and `newStyleTree` keeps a reference to the original unwrapped tree.
-   */
-  newStyleTree?: BroccoliTree;
-
-  /**
-   * Description or name of the plugin used for reporting.
-   *
-   * If missing `tree.constructor.name` is usually used instead.
-   */
-  description?: string;
-
-  rebuild(): (Promise<any>| void);
-  cleanup(): void;
-}
-
-
-interface OldBroccoliTree {
-  read?(readTree: (tree: BroccoliTree) => Promise<string>): (Promise<string>| string);
-}
-
-
-
-interface BroccoliBuilder {
-  /**
-   * Triggers a build and returns a promise for the build result
-   */
-  build(): Promise<BuildResult>;
-
-
-  /**
-   * Cleans up the whole build tree by calling `.cleanup()` method on all trees that are part of the
-   * pipeline.
-   */
-  cleanup(): Promise<any>;
-}
-
-
-interface BuildResult {
-  /**
-   * Directory that contains result of the build.
-   *
-   * This directory will contains symlinks, so it is not safe to just use it as is.
-   *
-   * Use `copy-dereference` npm package to create a safe-to-use replica of the build artifacts.
-   */
-  directory: string;
-
-
-  /**
-   * The DAG (graph) of all trees in the build pipeline.
-   */
-  graph: BroccoliNode;
-
-  /**
-   * Total time it took to make the build.
-   */
-  totalTime: number;
-}
-
-
-
-interface BroccoliNode {
-  ///**
-  // * Id of the current node
-  // */
-  // id: number; //only in master
-
-  /**
-   * Time spent processing the current node during a single rebuild.
-   */
-  selfTime: number;
-
-
-  /**
-   * Time spent processing the current node and its subtrees during a single rebuild.
-   */
-  totalTime: number;
-
-
-  /**
-   * Tree associated with the current node.
-   */
-  tree: BroccoliTree;
-
-
-  /**
-   * Child nodes with references to trees that are input for the tree of the current node.
-   */
-  subtrees: BroccoliNode[];
-
-
-  /**
-   * Parent nodes with references to trees that are consume the output of processing the current
-   * tree.
-   */
-  parents: BroccoliNode[];
-
-
-  /**
-   * Path to the directory containing the output of processing the current tree.
-   */
-  directory: string;
-}
diff --git a/tools/broccoli/diffing-broccoli-plugin.ts b/tools/broccoli/diffing-broccoli-plugin.ts
deleted file mode 100644
index 636d44d1d8eb..000000000000
--- a/tools/broccoli/diffing-broccoli-plugin.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-/// <reference path="broccoli.d.ts" />
-/// <reference path="../typings/fs-extra/fs-extra.d.ts" />
-/// <reference path="../typings/node/node.d.ts" />
-
-import fs = require('fs');
-import fse = require('fs-extra');
-import path = require('path');
-import {TreeDiffer, DiffResult} from './tree-differ';
-import stabilizeTree from './broccoli-tree-stabilizer';
-let symlinkOrCopy = require('symlink-or-copy');
-
-
-export {DiffResult} from './tree-differ';
-
-
-/**
- * Makes writing diffing plugins easy.
- *
- * Factory method that takes a class that implements the DiffingBroccoliPlugin interface and returns
- * an instance of BroccoliTree.
- *
- * @param pluginClass
- * @returns {DiffingPlugin}
- */
-export function wrapDiffingPlugin(pluginClass): DiffingPluginWrapperFactory {
-  return function() { return new DiffingPluginWrapper(pluginClass, arguments); };
-}
-
-
-export interface DiffingBroccoliPlugin {
-  rebuild(diff: (DiffResult | DiffResult[])): (Promise<DiffResult | void>| DiffResult | void);
-  cleanup ? () : void;
-}
-
-
-type DiffingPluginWrapperFactory = (inputTrees: (BroccoliTree | BroccoliTree[]), options?) =>
-    BroccoliTree;
-
-
-class DiffingPluginWrapper implements BroccoliTree {
-  treeDiffer: TreeDiffer = null;
-  treeDiffers: TreeDiffer[] = null;
-  initialized = false;
-  wrappedPlugin: DiffingBroccoliPlugin = null;
-  inputTree = null;
-  inputTrees = null;
-  description = null;
-
-  // props monkey-patched by broccoli builder:
-  inputPath = null;
-  inputPaths = null;
-  cachePath = null;
-  outputPath = null;
-
-  private diffResult: DiffResult = null;
-
-  constructor(private pluginClass, private wrappedPluginArguments) {
-    if (Array.isArray(wrappedPluginArguments[0])) {
-      this.inputTrees = this.stabilizeTrees(wrappedPluginArguments[0]);
-    } else {
-      this.inputTree = this.stabilizeTree(wrappedPluginArguments[0]);
-    }
-
-    this.description = this.pluginClass.name;
-  }
-
-  private getDiffResult(): (DiffResult | DiffResult[]) {
-    let returnOrCalculateDiffResult = (tree, index) => {
-      // returnOrCalculateDiffResult will do one of two things:
-      //
-      // If `this.diffResult` is null, calculate a DiffResult using TreeDiffer
-      // for the input tree.
-      //
-      // Otherwise, `this.diffResult` was produced from the output of the
-      // inputTree's rebuild() method, and can be used without being checked.
-      // Set `this.diffResult` to null and return the previously stored value.
-      let diffResult = tree.diffResult;
-      if (diffResult) return diffResult;
-      let differ = index === false ? this.treeDiffer : this.treeDiffers[index];
-      return differ.diffTree();
-    };
-
-    if (this.inputTrees) {
-      return this.inputTrees.map(returnOrCalculateDiffResult);
-    } else if (this.inputTree) {
-      return returnOrCalculateDiffResult(this.inputTree, false);
-    } else {
-      throw new Error("Missing TreeDiffer");
-    }
-  }
-
-  private maybeStoreDiffResult(value: (DiffResult | void)) {
-    if (!(value instanceof DiffResult)) value = null;
-    this.diffResult = <DiffResult>(value);
-  }
-
-  rebuild(): (Promise<any>| void) {
-    try {
-      let firstRun = !this.initialized;
-      this.init();
-
-      let diffResult = this.getDiffResult();
-
-      let result = this.wrappedPlugin.rebuild(diffResult);
-
-      if (result) {
-        let resultPromise = <Promise<DiffResult | void>>(result);
-        if (resultPromise.then) {
-          // rebuild() -> Promise<>
-          return resultPromise.then((result: (DiffResult | void)) => {
-            this.maybeStoreDiffResult(result);
-            this.relinkOutputAndCachePaths();
-          });
-        }
-      }
-
-      this.maybeStoreDiffResult(<(DiffResult | void)>(result));
-      this.relinkOutputAndCachePaths();
-    } catch (e) {
-      e.message = `[${this.description}]: ${e.message}`;
-      throw e;
-    }
-  }
-
-
-  cleanup() {
-    if (this.wrappedPlugin.cleanup) {
-      this.wrappedPlugin.cleanup();
-    }
-  }
-
-
-  private relinkOutputAndCachePaths() {
-    // just symlink the cache and output tree
-    fs.rmdirSync(this.outputPath);
-    symlinkOrCopy.sync(this.cachePath, this.outputPath);
-  }
-
-
-  private init() {
-    if (!this.initialized) {
-      let includeExtensions = this.pluginClass.includeExtensions || [];
-      let excludeExtensions = this.pluginClass.excludeExtensions || [];
-      let description = this.description;
-      this.initialized = true;
-      if (this.inputPaths) {
-        this.treeDiffers =
-            this.inputPaths.map((inputPath) => new TreeDiffer(
-                                    description, inputPath, includeExtensions, excludeExtensions));
-      } else if (this.inputPath) {
-        this.treeDiffer =
-            new TreeDiffer(description, this.inputPath, includeExtensions, excludeExtensions);
-      }
-      this.wrappedPlugin = new this.pluginClass(this.inputPaths || this.inputPath, this.cachePath,
-                                                this.wrappedPluginArguments[1]);
-    }
-  }
-
-
-  private stabilizeTrees(trees: BroccoliTree[]) {
-    // Prevent extensions to prevent array from being mutated from the outside.
-    // For-loop used to avoid re-allocating a new array.
-    for (let i = 0; i < trees.length; ++i) {
-      trees[i] = this.stabilizeTree(trees[i]);
-    }
-    return Object.freeze(trees);
-  }
-
-
-  private stabilizeTree(tree: BroccoliTree) {
-    // Ignore all DiffingPlugins as they are already stable, for others we don't know for sure
-    // so we need to stabilize them.
-    // Since it's not safe to use instanceof operator in node, we are checking the constructor.name.
-    //
-    // New-styler/rebuild trees should always be stable.
-    let isNewStyleTree = !!(tree['newStyleTree'] || typeof tree.rebuild === 'function' ||
-                            tree['isReadAPICompatTree'] || tree.constructor['name'] === 'Funnel');
-
-    return isNewStyleTree ? tree : stabilizeTree(tree);
-  }
-}
diff --git a/tools/broccoli/html-replace/SCRIPTS.html b/tools/broccoli/html-replace/SCRIPTS.html
deleted file mode 100644
index 5f356d831460..000000000000
--- a/tools/broccoli/html-replace/SCRIPTS.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<script src="zone-microtask.js" type="text/javascript"></script>
-<script src="long-stack-trace-zone.js" type="text/javascript"></script>
-<script src="traceur-runtime.js" type="text/javascript"></script>
-<script src="es6-module-loader-sans-promises.src.js" type="text/javascript"></script>
-<script src="system.src.js" type="text/javascript"></script>
-<script src="extension-register.js" type="text/javascript"></script>
-<script src="extension-cjs.js" type="text/javascript"></script>
-<script src="Reflect.js" type="text/javascript"></script>
-<script src="runtime_paths.js" type="text/javascript"></script>
-<script type="text/javascript">System.import('@@FILENAME_NO_EXT').then(function(m) { m.main(); }, console.error.bind(console))</script>
diff --git a/tools/broccoli/html-replace/SCRIPTS_benchmarks.html b/tools/broccoli/html-replace/SCRIPTS_benchmarks.html
deleted file mode 100644
index 3e2813b70490..000000000000
--- a/tools/broccoli/html-replace/SCRIPTS_benchmarks.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<script src="zone-microtask.js" type="text/javascript"></script>
-<script src="long-stack-trace-zone.js" type="text/javascript"></script>
-<script src="url_params_to_form.js" type="text/javascript"></script>
-<script src="traceur-runtime.js" type="text/javascript"></script>
-<script src="es6-module-loader-sans-promises.src.js" type="text/javascript"></script>
-<script src="system.src.js" type="text/javascript"></script>
-<script src="extension-register.js" type="text/javascript"></script>
-<script src="extension-cjs.js" type="text/javascript"></script>
-<script src="Reflect.js" type="text/javascript"></script>
-<script src="runtime_paths.js" type="text/javascript"></script>
-<script type="text/javascript">System.import('@@FILENAME_NO_EXT').then(function(m) { m.main(); }, console.error.bind(console))</script>
diff --git a/tools/broccoli/html-replace/SCRIPTS_benchmarks_external.html b/tools/broccoli/html-replace/SCRIPTS_benchmarks_external.html
deleted file mode 100644
index 4005350e4dad..000000000000
--- a/tools/broccoli/html-replace/SCRIPTS_benchmarks_external.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<script src="zone-microtask.js" type="text/javascript"></script>
-<script src="long-stack-trace-zone.js" type="text/javascript"></script>
-<script src="angular.js" type="text/javascript"></script>
-<script src="url_params_to_form.js" type="text/javascript"></script>
-<script src="traceur-runtime.js" type="text/javascript"></script>
-<script src="es6-module-loader-sans-promises.src.js" type="text/javascript"></script>
-<script src="system.src.js" type="text/javascript"></script>
-<script src="extension-register.js" type="text/javascript"></script>
-<script src="extension-cjs.js" type="text/javascript"></script>
-<script src="Reflect.js" type="text/javascript"></script>
-<script src="runtime_paths.js" type="text/javascript"></script>
-<script type="text/javascript">System.import('@@FILENAME_NO_EXT').then(function(m) { m.main(); }, console.error.bind(console))</script>
diff --git a/tools/broccoli/html-replace/index.ts b/tools/broccoli/html-replace/index.ts
deleted file mode 100644
index 5f401061ac5e..000000000000
--- a/tools/broccoli/html-replace/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-var fs = require('fs');
-var path = require('path');
-
-module.exports = read;
-function read(file) {
-  var content = fs.readFileSync(path.join('tools/broccoli/html-replace', file + '.html'),
-                                {encoding: 'utf-8'});
-  // TODO(broccoli): we don't really need this, it's here to make the output match the
-  // tools/build/html
-  return content.substring(0, content.lastIndexOf("\n"));
-}
diff --git a/tools/broccoli/multi_copy.ts b/tools/broccoli/multi_copy.ts
deleted file mode 100644
index f53f56e67420..000000000000
--- a/tools/broccoli/multi_copy.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/// <reference path="../typings/node/node.d.ts" />
-/// <reference path="../typings/fs-extra/fs-extra.d.ts" />
-import Writer = require('broccoli-writer');
-import fs = require('fs');
-import fsx = require('fs-extra');
-var minimatch = require('minimatch');
-var path = require('path');
-var glob = require('glob');
-
-export interface MultiCopyOptions {
-  /** The path of the file to copy. */
-  srcPath: string;
-  /** A list of glob patterns of folders to copy to, matched against the input tree. */
-  targetPatterns: string[];
-  /** List of glob patterns to *not* copy to, matched against the matches from `targetPatterns`. */
-  exclude?: string[];
-}
-
-/**
- * A writer that copies an input file from an input path into (potentially many) output locations
- * given by glob patterns, .
- */
-export class MultiCopy extends Writer {
-  constructor(private inputTree, private options: MultiCopyOptions) { super(); }
-
-  write(readTree: (tree) => Promise<string>, destDir: string): Promise<any> {
-    return readTree(this.inputTree)
-        .then((inputPath: string) => {
-          var fileName = path.basename(this.options.srcPath);
-          var data = fs.readFileSync(path.join(inputPath, this.options.srcPath), 'utf-8');
-
-          this.options.targetPatterns.forEach(pattern => {
-            var paths: string[] = glob.sync(pattern);
-            paths = paths.filter(p => fs.statSync(p).isDirectory());
-            if (this.options.exclude) {
-              paths = paths.filter(p => !this.options.exclude.some((excl) => minimatch(p, excl)));
-            }
-            paths.forEach(p => {
-              var folder = path.join(destDir, p);
-              fsx.mkdirsSync(folder);
-              var outputPath = path.join(folder, fileName);
-              fs.writeFileSync(outputPath, data);
-            });
-          });
-        });
-  }
-}
diff --git a/tools/broccoli/traceur/index.ts b/tools/broccoli/traceur/index.ts
deleted file mode 100644
index cc82a14d9dd0..000000000000
--- a/tools/broccoli/traceur/index.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/// <reference path="../../typings/fs-extra/fs-extra.d.ts" />
-/// <reference path="../../typings/node/node.d.ts" />
-
-import fs = require('fs');
-import fse = require('fs-extra');
-import path = require('path');
-import {wrapDiffingPlugin, DiffingBroccoliPlugin, DiffResult} from '../diffing-broccoli-plugin';
-
-let traceur = require('../../../../tools/transpiler');
-let xtend = require('xtend');
-
-
-class DiffingTraceurCompiler implements DiffingBroccoliPlugin {
-  constructor(public inputPath: string, public cachePath: string, public options) {}
-
-  static includeExtensions = ['.js', '.cjs'];
-
-  rebuild(treeDiff: DiffResult) {
-    treeDiff.addedPaths.concat(treeDiff.changedPaths)
-        .forEach((changedFilePath) => {
-          var traceurOpts = xtend({filename: changedFilePath}, this.options.traceurOptions);
-
-          var fsOpts = {encoding: 'utf-8'};
-          var absoluteInputFilePath = path.join(this.inputPath, changedFilePath);
-          var sourcecode = fs.readFileSync(absoluteInputFilePath, fsOpts);
-
-          var result = traceur.compile(traceurOpts, changedFilePath, sourcecode);
-
-          // TODO: we should fix the sourceMappingURL written by Traceur instead of overriding
-          // (but we might switch to typescript first)
-          var mapFilepath =
-              changedFilePath.replace(/\.\w+$/, '') + this.options.destSourceMapExtension;
-          result.js = result.js + '\n//# sourceMappingURL=./' + path.basename(mapFilepath);
-
-          var destFilepath = changedFilePath.replace(/\.\w+$/, this.options.destExtension);
-          var destFile = path.join(this.cachePath, destFilepath);
-          fse.mkdirsSync(path.dirname(destFile));
-          fs.writeFileSync(destFile, result.js, fsOpts);
-
-          var destMap = path.join(this.cachePath, mapFilepath);
-          result.sourceMap.file = destFilepath;
-          fs.writeFileSync(destMap, JSON.stringify(result.sourceMap), fsOpts);
-        });
-
-    treeDiff.removedPaths.forEach((removedFilePath) => {
-      var destFilepath = removedFilePath.replace(/\.\w+$/, this.options.destExtension);
-      var absoluteOuputFilePath = path.join(this.cachePath, destFilepath);
-      fs.unlinkSync(absoluteOuputFilePath);
-    });
-  }
-}
-
-let transpileWithTraceur = wrapDiffingPlugin(DiffingTraceurCompiler);
-let TRACEUR_RUNTIME_PATH = traceur.RUNTIME_PATH;
-
-export {transpileWithTraceur as default, TRACEUR_RUNTIME_PATH};
diff --git a/tools/broccoli/tree-differ.spec.ts b/tools/broccoli/tree-differ.spec.ts
deleted file mode 100644
index 0a2205ca522d..000000000000
--- a/tools/broccoli/tree-differ.spec.ts
+++ /dev/null
@@ -1,378 +0,0 @@
-/// <reference path="../typings/node/node.d.ts" />
-/// <reference path="../typings/jasmine/jasmine.d.ts" />
-
-let mockfs = require('mock-fs');
-import fs = require('fs');
-import path = require('path');
-import {TreeDiffer} from './tree-differ';
-
-
-describe('TreeDiffer', () => {
-
-  afterEach(() => mockfs.restore());
-
-
-  describe('diff of added and changed files', () => {
-
-    it('should list all files (but no directories) during the first diff', () => {
-      let testDir = {
-        'dir1': {
-          'file-1.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)}),
-          'file-2.txt': mockfs.file({content: 'file-2.txt content', mtime: new Date(1000)}),
-          'subdir-1': {
-            'file-1.1.txt': mockfs.file({content: 'file-1.1.txt content', mtime: new Date(1000)})
-          },
-          'empty-dir': {}
-        }
-      };
-      mockfs(testDir);
-
-      let differ = new TreeDiffer('testLabel', 'dir1');
-
-      let diffResult = differ.diffTree();
-
-      expect(diffResult.addedPaths)
-          .toEqual(['file-1.txt', 'file-2.txt', 'subdir-1' + path.sep + 'file-1.1.txt']);
-
-      expect(diffResult.changedPaths).toEqual([]);
-      expect(diffResult.removedPaths).toEqual([]);
-    });
-
-
-    it('should return empty diff if nothing has changed', () => {
-      let testDir = {
-        'dir1': {
-          'file-1.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)}),
-          'file-2.txt': mockfs.file({content: 'file-2.txt content', mtime: new Date(1000)}),
-          'subdir-1': {
-            'file-1.1.txt': mockfs.file({content: 'file-1.1.txt content', mtime: new Date(1000)})
-          },
-        }
-      };
-      mockfs(testDir);
-
-      let differ = new TreeDiffer('testLabel', 'dir1');
-
-      let diffResult = differ.diffTree();
-
-      expect(diffResult.addedPaths).not.toEqual([]);
-      expect(diffResult.changedPaths).toEqual([]);
-      expect(diffResult.removedPaths).toEqual([]);
-
-      diffResult = differ.diffTree();
-
-      expect(diffResult.addedPaths).toEqual([]);
-      expect(diffResult.changedPaths).toEqual([]);
-      expect(diffResult.removedPaths).toEqual([]);
-    });
-
-
-    it('should list only changed files during the subsequent diffs', () => {
-      let testDir = {
-        'dir1': {
-          'file-1.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)}),
-          'file-2.txt': mockfs.file({content: 'file-2.txt content', mtime: new Date(1000)}),
-          'subdir-1': {
-            'file-1.1.txt':
-                mockfs.file({content: 'file-1.1.txt content', mtime: new Date(1000)})
-          }
-        }
-      };
-      mockfs(testDir);
-
-      let differ = new TreeDiffer('testLabel', 'dir1');
-
-      let diffResult = differ.diffTree();
-
-      expect(diffResult.addedPaths)
-          .toEqual(['file-1.txt', 'file-2.txt', 'subdir-1' + path.sep + 'file-1.1.txt']);
-
-      // change two files
-      testDir['dir1']['file-1.txt'] = mockfs.file({content: 'new content', mtime: new Date(1000)});
-      testDir['dir1']['subdir-1']['file-1.1.txt'] =
-          mockfs.file({content: 'file-1.1.txt content', mtime: new Date(9999)});
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-
-      expect(diffResult.changedPaths)
-          .toEqual(['file-1.txt', 'subdir-1' + path.sep + 'file-1.1.txt']);
-
-      expect(diffResult.removedPaths).toEqual([]);
-
-      // change one file
-      testDir['dir1']['file-1.txt'] = mockfs.file({content: 'super new', mtime: new Date(1000)});
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-      expect(diffResult.changedPaths).toEqual(['file-1.txt']);
-    });
-
-
-    it('should handle changes via symbolic links', () => {
-      let testDir = {
-        'orig_path': {
-          'file-1.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)}),
-          'file-2.txt': mockfs.file({content: 'file-2.txt content', mtime: new Date(1000)}),
-          'subdir-1': {
-            'file-1.1.txt': mockfs.file({content: 'file-1.1.txt content', mtime: new Date(1000)})
-          }
-        },
-        'symlinks': {
-          'file-1.txt': mockfs.symlink({path: '../orig_path/file-1.txt'}),
-          'file-2.txt': mockfs.symlink({path: '../orig_path/file-2.txt'}),
-          'subdir-1':
-              {'file-1.1.txt': mockfs.symlink({path: '../../orig_path/subdir-1/file-1.1.txt'})}
-        }
-      };
-      mockfs(testDir);
-
-      let differ = new TreeDiffer('testLabel', 'symlinks');
-
-      let diffResult = differ.diffTree();
-
-      expect(diffResult.addedPaths)
-          .toEqual(['file-1.txt', 'file-2.txt', 'subdir-1' + path.sep + 'file-1.1.txt']);
-
-      // change two files
-      testDir['orig_path']['file-1.txt'] =
-          mockfs.file({content: 'new content', mtime: new Date(1000)});
-      testDir['orig_path']['subdir-1']['file-1.1.txt'] =
-          mockfs.file({content: 'file-1.1.txt content', mtime: new Date(9999)});
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-
-      expect(diffResult.addedPaths).toEqual([]);
-      expect(diffResult.changedPaths)
-          .toEqual(['file-1.txt', 'subdir-1' + path.sep + 'file-1.1.txt']);
-      expect(diffResult.removedPaths).toEqual([]);
-
-      // change one file
-      testDir['orig_path']['file-1.txt'] =
-          mockfs.file({content: 'super new', mtime: new Date(1000)});
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-      expect(diffResult.changedPaths).toEqual(['file-1.txt']);
-
-      // remove a link
-      delete testDir['orig_path']['file-1.txt'];
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-      expect(diffResult.addedPaths).toEqual([]);
-      expect(diffResult.changedPaths).toEqual([]);
-      expect(diffResult.removedPaths).toEqual(['file-1.txt']);
-
-      // don't report it as a removal twice
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-      expect(diffResult.changedPaths).toEqual([]);
-      expect(diffResult.removedPaths).toEqual([]);
-
-      // re-add it.
-      testDir['orig_path']['file-1.txt'] =
-          mockfs.file({content: 'super new', mtime: new Date(1000)});
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-      expect(diffResult.addedPaths).toEqual(['file-1.txt']);
-      expect(diffResult.changedPaths).toEqual([]);
-      expect(diffResult.removedPaths).toEqual([]);
-    });
-
-
-    it("should throw an error if an extension isn't prefixed with doc", () => {
-      // includeExtensions
-      expect(() => new TreeDiffer('testLabel', 'dir1', ['js']))
-          .toThrowError("Extension must begin with '.'. Was: 'js'");
-
-      // excludeExtentions
-      expect(() => new TreeDiffer('testLabel', 'dir1', [], ['js']))
-          .toThrowError("Extension must begin with '.'. Was: 'js'");
-    });
-
-
-    it('should ignore files with extensions not listed in includeExtensions', () => {
-      let testDir = {
-        'dir1': {
-          'file-1.js': mockfs.file({content: 'file-1.js content', mtime: new Date(1000)}),
-          'file-2.md': mockfs.file({content: 'file-2.md content', mtime: new Date(1000)}),
-          'file-3.coffee': mockfs.file({content: 'file-3.coffee content', mtime: new Date(1000)}),
-          'subdir-1': {
-            'file-1.1.cc': mockfs.file({content: 'file-1.1.cc content', mtime: new Date(1000)})
-          }
-        }
-      };
-      mockfs(testDir);
-
-      let differ = new TreeDiffer('testLabel', 'dir1', ['.js', '.coffee']);
-
-      let diffResult = differ.diffTree();
-
-      expect(diffResult.addedPaths).toEqual(['file-1.js', 'file-3.coffee']);
-      expect(diffResult.changedPaths).toEqual([]);
-      expect(diffResult.removedPaths).toEqual([]);
-
-      // change two files
-      testDir['dir1']['file-1.js'] = mockfs.file({content: 'new content', mtime: new Date(1000)});
-      testDir['dir1']['file-3.coffee'] =
-          mockfs.file({content: 'new content', mtime: new Date(1000)});
-      testDir['dir1']['subdir-1']['file-1.1.cc'] =
-          mockfs.file({content: 'file-1.1.cc content', mtime: new Date(9999)});
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-
-      expect(diffResult.addedPaths).toEqual([]);
-      expect(diffResult.changedPaths).toEqual(['file-1.js', 'file-3.coffee']);
-      expect(diffResult.removedPaths).toEqual([]);
-
-      // change one file
-      testDir['dir1']['file-1.js'] = mockfs.file({content: 'super new', mtime: new Date(1000)});
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-      expect(diffResult.changedPaths).toEqual(['file-1.js']);
-    });
-
-
-    it('should ignore files with extensions listed in excludeExtensions', () => {
-      let testDir = {
-        'dir1': {
-          'file-1.ts': mockfs.file({content: 'file-1.ts content', mtime: new Date(1000)}),
-          'file-1.cs': mockfs.file({content: 'file-1.cs content', mtime: new Date(1000)}),
-          'file-1d.cs': mockfs.file({content: 'file-1d.cs content', mtime: new Date(1000)}),
-          'file-1.d.cs': mockfs.file({content: 'file-1.d.cs content', mtime: new Date(1000)}),
-          'file-2.md': mockfs.file({content: 'file-2.md content', mtime: new Date(1000)}),
-          'file-3.ts': mockfs.file({content: 'file-3.ts content', mtime: new Date(1000)}),
-          'file-4.d.ts': mockfs.file({content: 'file-4.d.ts content', mtime: new Date(1000)}),
-          'subdir-1': {
-            'file-1.1.cc': mockfs.file({content: 'file-1.1.cc content', mtime: new Date(1000)})
-          }
-        }
-      };
-      mockfs(testDir);
-
-      let differ = new TreeDiffer('testLabel', 'dir1', ['.ts', '.cs'], ['.d.ts', '.d.cs']);
-
-      let diffResult = differ.diffTree();
-
-      expect(diffResult.addedPaths).toEqual(['file-1.cs', 'file-1.ts', 'file-1d.cs', 'file-3.ts']);
-
-      // change two files
-      testDir['dir1']['file-1.ts'] = mockfs.file({content: 'new content', mtime: new Date(1000)});
-      testDir['dir1']['file-1.cs'] = mockfs.file({content: 'new content', mtime: new Date(1000)});
-      testDir['dir1']['file-1.d.cs'] = mockfs.file({content: 'new content', mtime: new Date(1000)});
-      testDir['dir1']['file-3.ts'] = mockfs.file({content: 'new content', mtime: new Date(1000)});
-      testDir['dir1']['file-4.d.ts'] = mockfs.file({content: 'new content', mtime: new Date(1000)});
-      testDir['dir1']['subdir-1']['file-1.1.cc'] =
-          mockfs.file({content: 'file-1.1.cc content', mtime: new Date(9999)});
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-
-      expect(diffResult.addedPaths).toEqual([]);
-      expect(diffResult.changedPaths).toEqual(['file-1.cs', 'file-1.ts', 'file-3.ts']);
-      expect(diffResult.removedPaths).toEqual([]);
-
-      // change one file
-      testDir['dir1']['file-4.d.ts'] = mockfs.file({content: 'super new', mtime: new Date(1000)});
-      mockfs(testDir);
-
-      diffResult = differ.diffTree();
-      expect(diffResult.changedPaths).toEqual([]);
-    });
-  });
-
-  describe('diff of new files', () => {
-
-    it('should detect file additions', () => {
-      let testDir = {
-        'dir1':
-            {'file-1.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)})}
-      };
-      mockfs(testDir);
-
-      let differ = new TreeDiffer('testLabel', 'dir1');
-      differ.diffTree();
-
-      testDir['dir1']['file-2.txt'] = 'new file';
-      mockfs(testDir);
-
-      let diffResult = differ.diffTree();
-      expect(diffResult.addedPaths).toEqual(['file-2.txt']);
-      expect(diffResult.changedPaths).toEqual([]);
-      expect(diffResult.removedPaths).toEqual([]);
-    });
-
-
-    it('should detect file additions mixed with file changes', () => {
-      let testDir = {
-        'dir1':
-            {'file-1.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)})}
-      };
-      mockfs(testDir);
-
-      let differ = new TreeDiffer('testLabel', 'dir1');
-      differ.diffTree();
-
-      testDir['dir1']['file-1.txt'] = 'new content';
-      testDir['dir1']['file-2.txt'] = 'new file';
-      mockfs(testDir);
-
-      let diffResult = differ.diffTree();
-      expect(diffResult.addedPaths).toEqual(['file-2.txt']);
-      expect(diffResult.changedPaths).toEqual(['file-1.txt']);
-    });
-  });
-
-
-  describe('diff of removed files', () => {
-
-    it('should detect file removals and report them as removed files', () => {
-      let testDir = {
-        'dir1':
-            {'file-1.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)})}
-      };
-      mockfs(testDir);
-
-      let differ = new TreeDiffer('testLabel', 'dir1');
-      differ.diffTree();
-
-      delete testDir['dir1']['file-1.txt'];
-      mockfs(testDir);
-
-      let diffResult = differ.diffTree();
-      expect(diffResult.changedPaths).toEqual([]);
-      expect(diffResult.removedPaths).toEqual(['file-1.txt']);
-    });
-
-
-    it('should detect file removals mixed with file changes and additions', () => {
-      let testDir = {
-        'dir1': {
-          'file-1.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)}),
-          'file-2.txt': mockfs.file({content: 'file-1.txt content', mtime: new Date(1000)})
-        }
-      };
-
-      mockfs(testDir);
-
-      let differ = new TreeDiffer('testLabel', 'dir1');
-      differ.diffTree();
-
-      testDir['dir1']['file-1.txt'] = 'changed content';
-      delete testDir['dir1']['file-2.txt'];
-      testDir['dir1']['file-3.txt'] = 'new content';
-      mockfs(testDir);
-
-      let diffResult = differ.diffTree();
-      expect(diffResult.addedPaths).toEqual(['file-3.txt']);
-      expect(diffResult.changedPaths).toEqual(['file-1.txt']);
-      expect(diffResult.removedPaths).toEqual(['file-2.txt']);
-    });
-  });
-});
diff --git a/tools/broccoli/tree-differ.ts b/tools/broccoli/tree-differ.ts
deleted file mode 100644
index 29e4dad0ef11..000000000000
--- a/tools/broccoli/tree-differ.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-/// <reference path="../typings/node/node.d.ts" />
-
-import fs = require('fs');
-import path = require('path');
-
-
-function tryStatSync(path) {
-  try {
-    return fs.statSync(path);
-  } catch (e) {
-    if (e.code === "ENOENT") return null;
-    throw e;
-  }
-}
-
-
-export class TreeDiffer {
-  private fingerprints: {[key: string]: string} = Object.create(null);
-  private nextFingerprints: {[key: string]: string} = Object.create(null);
-  private rootDirName: string;
-  private include: RegExp = null;
-  private exclude: RegExp = null;
-
-  constructor(private label: string, private rootPath: string, includeExtensions?: string[],
-              excludeExtensions?: string[]) {
-    this.rootDirName = path.basename(rootPath);
-
-    let buildRegexp = (arr) => new RegExp(`(${arr.reduce(combine, "")})$`, "i");
-
-    this.include = (includeExtensions || []).length ? buildRegexp(includeExtensions) : null;
-    this.exclude = (excludeExtensions || []).length ? buildRegexp(excludeExtensions) : null;
-
-    function combine(prev, curr) {
-      if (curr.charAt(0) !== ".") {
-        throw new Error(`Extension must begin with '.'. Was: '${curr}'`);
-      }
-      let kSpecialRegexpChars = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g;
-      curr = '(' + curr.replace(kSpecialRegexpChars, '\\$&') + ')';
-      return prev ? (prev + '|' + curr) : curr;
-    }
-  }
-
-
-  public diffTree(): DiffResult {
-    let result = new DirtyCheckingDiffResult(this.label, this.rootDirName);
-    this.dirtyCheckPath(this.rootPath, result);
-    this.detectDeletionsAndUpdateFingerprints(result);
-    result.endTime = Date.now();
-    return result;
-  }
-
-
-  private dirtyCheckPath(rootDir: string, result: DirtyCheckingDiffResult) {
-    fs.readdirSync(rootDir).forEach((segment) => {
-      let absolutePath = path.join(rootDir, segment);
-      let pathStat = fs.lstatSync(absolutePath);
-      if (pathStat.isSymbolicLink()) {
-        pathStat = tryStatSync(absolutePath);
-        if (pathStat === null) return;
-      }
-
-      if (pathStat.isDirectory()) {
-        result.directoriesChecked++;
-        this.dirtyCheckPath(absolutePath, result);
-      } else {
-        if (!(this.include && !absolutePath.match(this.include)) &&
-            !(this.exclude && absolutePath.match(this.exclude))) {
-          result.filesChecked++;
-          let relativeFilePath = path.relative(this.rootPath, absolutePath);
-
-          switch (this.isFileDirty(absolutePath, pathStat)) {
-            case FileStatus.ADDED:
-              result.addedPaths.push(relativeFilePath);
-              break;
-            case FileStatus.CHANGED:
-              result.changedPaths.push(relativeFilePath);
-          }
-        }
-      }
-    });
-
-    return result;
-  }
-
-
-  private isFileDirty(path: string, stat: fs.Stats): FileStatus {
-    let oldFingerprint = this.fingerprints[path];
-    let newFingerprint = `${stat.mtime.getTime()} # ${stat.size}`;
-
-    this.nextFingerprints[path] = newFingerprint;
-
-    if (oldFingerprint) {
-      this.fingerprints[path] = null;
-
-      if (oldFingerprint === newFingerprint) {
-        // nothing changed
-        return FileStatus.UNCHANGED;
-      }
-
-      return FileStatus.CHANGED;
-    }
-
-    return FileStatus.ADDED;
-  }
-
-
-  private detectDeletionsAndUpdateFingerprints(result: DiffResult) {
-    for (let absolutePath in this.fingerprints) {
-      if (!(this.include && !absolutePath.match(this.include)) &&
-          !(this.exclude && absolutePath.match(this.exclude))) {
-        if (this.fingerprints[absolutePath] !== null) {
-          let relativePath = path.relative(this.rootPath, absolutePath);
-          result.removedPaths.push(relativePath);
-        }
-      }
-    }
-
-    this.fingerprints = this.nextFingerprints;
-    this.nextFingerprints = Object.create(null);
-  }
-}
-
-
-export class DiffResult {
-  public addedPaths: string[] = [];
-  public changedPaths: string[] = [];
-  public removedPaths: string[] = [];
-
-  constructor(public label: string = '') {}
-
-  log(verbose: boolean): void {}
-
-  toString(): string {
-    // TODO(@caitp): more meaningful logging
-    return '';
-  }
-}
-
-class DirtyCheckingDiffResult extends DiffResult {
-  public filesChecked: number = 0;
-  public directoriesChecked: number = 0;
-  public startTime: number = Date.now();
-  public endTime: number = null;
-
-  constructor(label: string, public directoryName: string) { super(label); }
-
-  toString() {
-    return `${pad(this.label, 30)}, ${pad(this.endTime - this.startTime, 5)}ms, ` +
-           `${pad(this.addedPaths.length + this.changedPaths.length + this.removedPaths.length, 5)} changes ` +
-           `(files: ${pad(this.filesChecked, 5)}, dirs: ${pad(this.directoriesChecked, 4)})`;
-  }
-
-  log(verbose) {
-    let prefixedPaths = this.addedPaths.map(p => `+ ${p}`)
-                            .concat(this.changedPaths.map(p => `* ${p}`))
-                            .concat(this.removedPaths.map(p => `- ${p}`));
-    console.log(`Tree diff: ${this}` + ((verbose && prefixedPaths.length) ?
-                                             ` [\n  ${prefixedPaths.join('\n  ')}\n]` :
-                                             ''));
-  }
-}
-
-
-function pad(value, length) {
-  value = '' + value;
-  let whitespaceLength = (value.length < length) ? length - value.length : 0;
-  whitespaceLength = whitespaceLength + 1;
-  return new Array(whitespaceLength).join(' ') + value;
-}
-
-
-enum FileStatus {
-  ADDED,
-  UNCHANGED,
-  CHANGED
-}
diff --git a/tools/broccoli/trees/browser_tree.ts b/tools/broccoli/trees/browser_tree.ts
deleted file mode 100644
index 50b08b549588..000000000000
--- a/tools/broccoli/trees/browser_tree.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-'use strict';
-
-var Funnel = require('broccoli-funnel');
-var htmlReplace = require('../html-replace');
-var path = require('path');
-var stew = require('broccoli-stew');
-
-import compileWithTypescript from '../broccoli-typescript';
-import destCopy from '../broccoli-dest-copy';
-import flatten from '../broccoli-flatten';
-import mergeTrees from '../broccoli-merge-trees';
-import replace from '../broccoli-replace';
-import {default as transpileWithTraceur, TRACEUR_RUNTIME_PATH} from '../traceur/index';
-
-
-var projectRootDir = path.normalize(path.join(__dirname, '..', '..', '..', '..'));
-
-
-const kServedPaths = [
-  // Relative (to /modules) paths to benchmark directories
-  'benchmarks/src',
-  'benchmarks/src/change_detection',
-  'benchmarks/src/compiler',
-  'benchmarks/src/costs',
-  'benchmarks/src/di',
-  'benchmarks/src/element_injector',
-  'benchmarks/src/largetable',
-  'benchmarks/src/naive_infinite_scroll',
-  'benchmarks/src/tree',
-
-  // Relative (to /modules) paths to external benchmark directories
-  'benchmarks_external/src',
-  'benchmarks_external/src/compiler',
-  'benchmarks_external/src/largetable',
-  'benchmarks_external/src/naive_infinite_scroll',
-  'benchmarks_external/src/tree',
-  'benchmarks_external/src/tree/react',
-
-  // Relative (to /modules) paths to example directories
-  'examples/src/benchpress',
-  'examples/src/model_driven_forms',
-  'examples/src/template_driven_forms',
-  'examples/src/person_management',
-  'examples/src/order_management',
-  'examples/src/gestures',
-  'examples/src/hello_world',
-  'examples/src/http',
-  'examples/src/key_events',
-  'examples/src/sourcemap',
-  'examples/src/todo',
-  'examples/src/zippy_component',
-  'examples/src/material/button',
-  'examples/src/material/checkbox',
-  'examples/src/material/dialog',
-  'examples/src/material/grid_list',
-  'examples/src/material/input',
-  'examples/src/material/progress-linear',
-  'examples/src/material/radio',
-  'examples/src/material/switcher'
-];
-
-
-module.exports = function makeBrowserTree(options, destinationPath) {
-  var modulesTree = new Funnel(
-      'modules',
-      {include: ['**/**'], exclude: ['**/*.cjs', 'benchmarks/e2e_test/**'], destDir: '/'});
-
-  // Use Traceur to transpile *.js sources to ES6
-  var traceurTree = transpileWithTraceur(modulesTree, {
-    destExtension: '.js',
-    destSourceMapExtension: '.map',
-    traceurOptions: {
-      sourceMaps: true,
-      annotations: true,      // parse annotations
-      types: true,            // parse types
-      script: false,          // parse as a module
-      memberVariables: true,  // parse class fields
-      modules: 'instantiate',
-      // typeAssertionModule: 'rtts_assert/rtts_assert',
-      // typeAssertions: options.typeAssertions,
-      outputLanguage: 'es6'
-    }
-  });
-
-  // Use TypeScript to transpile the *.ts files to ES6
-  // We don't care about errors: we let the TypeScript compilation to ES5
-  // in node_tree.ts do the type-checking.
-  var typescriptTree = compileWithTypescript(modulesTree, {
-    allowNonTsExtensions: false,
-    declaration: true,
-    emitDecoratorMetadata: true,
-    mapRoot: '',           // force sourcemaps to use relative path
-    noEmitOnError: false,  // temporarily ignore errors, we type-check only via cjs build
-    rootDir: '.',
-    sourceMap: true,
-    sourceRoot: '.',
-    target: 'ES6'
-  });
-
-  var es6Tree = mergeTrees([traceurTree, typescriptTree]);
-
-  // Call Traceur again to lower the ES6 build tree to ES5
-  var es5Tree = transpileWithTraceur(es6Tree, {
-    destExtension: '.js',
-    destSourceMapExtension: '.js.map',
-    traceurOptions: {modules: 'instantiate', sourceMaps: true}
-  });
-
-  // Now we add a few more files to the es6 tree that Traceur should not see
-  ['angular2', 'rtts_assert'].forEach(function(destDir) {
-    var extras = new Funnel('tools/build', {files: ['es5build.js'], destDir: destDir});
-    es6Tree = mergeTrees([es6Tree, extras]);
-  });
-
-
-  var vendorScriptsTree = flatten(new Funnel('.', {
-    files: [
-      'node_modules/zone.js/dist/zone-microtask.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js',
-      'node_modules/systemjs/dist/system.src.js',
-      'node_modules/systemjs/lib/extension-register.js',
-      'node_modules/systemjs/lib/extension-cjs.js',
-      'node_modules/rx/dist/rx.js',
-      'node_modules/reflect-metadata/Reflect.js',
-      'tools/build/snippets/runtime_paths.js',
-      path.relative(projectRootDir, TRACEUR_RUNTIME_PATH)
-    ]
-  }));
-
-  var vendorScripts_benchmark =
-      new Funnel('tools/build/snippets', {files: ['url_params_to_form.js'], destDir: '/'});
-  var vendorScripts_benchmarks_external =
-      new Funnel('node_modules/angular', {files: ['angular.js'], destDir: '/'});
-
-  // Get scripts for each benchmark or example
-  let servingTrees = kServedPaths.reduce(getServedFunnels, []);
-  function getServedFunnels(funnels, destDir) {
-    let options = {srcDir: '/', destDir: destDir};
-    funnels.push(new Funnel(vendorScriptsTree, options));
-    if (destDir.indexOf('benchmarks') > -1) {
-      funnels.push(new Funnel(vendorScripts_benchmark, options));
-    }
-    if (destDir.indexOf('benchmarks_external') > -1) {
-      funnels.push(new Funnel(vendorScripts_benchmarks_external, options));
-    }
-    return funnels;
-  }
-
-  var scriptPathPatternReplacement = {
-    match: '@@FILENAME_NO_EXT',
-    replacement: function(replacement, relativePath) {
-      return relativePath.replace(/\.\w+$/, '').replace(/\\/g, '/');
-    }
-  };
-
-  var htmlTree = new Funnel(modulesTree, {include: ['*/src/**/*.html'], destDir: '/'});
-  htmlTree = replace(htmlTree, {
-    files: ['examples*/**'],
-    patterns: [
-      {match: /\$SCRIPTS\$/, replacement: htmlReplace('SCRIPTS')},
-      scriptPathPatternReplacement
-    ]
-  });
-
-  htmlTree = replace(htmlTree, {
-    files: ['benchmarks/**'],
-    patterns: [
-      {match: /\$SCRIPTS\$/, replacement: htmlReplace('SCRIPTS_benchmarks')},
-      scriptPathPatternReplacement
-    ]
-  });
-
-  htmlTree = replace(htmlTree, {
-    files: ['benchmarks_external/**'],
-    patterns: [
-      {match: /\$SCRIPTS\$/, replacement: htmlReplace('SCRIPTS_benchmarks_external')},
-      scriptPathPatternReplacement
-    ]
-  });
-
-  var assetsTree =
-      new Funnel(modulesTree, {include: ['**/*'], exclude: ['**/*.{html,ts,dart}'], destDir: '/'});
-
-  var scripts = mergeTrees(servingTrees);
-  var polymerFiles = new Funnel('.', {
-    files: [
-      'bower_components/polymer/lib/polymer.html',
-      'tools/build/snippets/url_params_to_form.js'
-    ]
-  });
-  var polymer = stew.mv(flatten(polymerFiles), 'benchmarks_external/src/tree/polymer');
-
-  var reactFiles = new Funnel('.', {files: ['node_modules/react/dist/react.min.js']});
-  var react = stew.mv(flatten(reactFiles), 'benchmarks_external/src/tree/react');
-
-  htmlTree = mergeTrees([htmlTree, scripts, polymer, react]);
-
-  es5Tree = mergeTrees([es5Tree, htmlTree, assetsTree]);
-
-  var mergedTree = mergeTrees([stew.mv(es6Tree, '/es6'), stew.mv(es5Tree, '/es5')]);
-
-  return destCopy(mergedTree, destinationPath);
-};
diff --git a/tools/broccoli/trees/dart_tree.ts b/tools/broccoli/trees/dart_tree.ts
deleted file mode 100644
index 8e06574a7e6e..000000000000
--- a/tools/broccoli/trees/dart_tree.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-/// <reference path="../../typings/node/node.d.ts" />
-/// <reference path="../angular_builder.d.ts" />
-'use strict';
-
-import {MultiCopy} from './../multi_copy';
-import destCopy from '../broccoli-dest-copy';
-var Funnel = require('broccoli-funnel');
-import mergeTrees from '../broccoli-merge-trees';
-var path = require('path');
-import renderLodashTemplate from '../broccoli-lodash';
-var stew = require('broccoli-stew');
-import ts2dart from '../broccoli-ts2dart';
-import dartfmt from '../broccoli-dartfmt';
-import replace from '../broccoli-replace';
-
-/**
- * A funnel starting at modules, including the given filters, and moving into the root.
- * @param include Include glob filters.
- */
-function modulesFunnel(include: string[], exclude?: string[]) {
-  return new Funnel('modules', {include, destDir: '/', exclude});
-}
-
-/**
- * Replaces $SCRIPT$ in .html files with actual <script> tags.
- */
-function replaceScriptTagInHtml(placeholder: string, relativePath: string): string {
-  var scriptTags = '';
-  if (relativePath.match(/^benchmarks/)) {
-    scriptTags += '<script src="url_params_to_form.js" type="text/javascript"></script>\n';
-  }
-  var scriptName = relativePath.replace(/\\/g, '/').replace(/.*\/([^/]+)\.html$/, '$1.dart');
-  scriptTags += '<script src="' + scriptName + '" type="application/dart"></script>\n' +
-                '<script src="packages/browser/dart.js" type="text/javascript"></script>';
-  return scriptTags;
-}
-
-function stripModulePrefix(relativePath: string): string {
-  if (!relativePath.match(/^modules\//)) {
-    throw new Error('Expected path to root at modules/: ' + relativePath);
-  }
-  return relativePath.replace(/^modules\//, '');
-}
-
-function getSourceTree() {
-  // Transpile everything in 'modules' except for rtts_assertions.
-  var tsInputTree = modulesFunnel(['**/*.js', '**/*.ts', '**/*.dart'], ['rtts_assert/**/*']);
-  var transpiled = ts2dart(tsInputTree, {
-    generateLibraryName: true,
-    generateSourceMap: false,
-    translateBuiltins: true,
-  });
-  // Native sources, dart only examples, etc.
-  var dartSrcs = modulesFunnel(['**/*.dart', '**/*.ng_meta.json', '**/css/**']);
-  return mergeTrees([transpiled, dartSrcs]);
-}
-
-function fixDartFolderLayout(sourceTree) {
-  // Move around files to match Dart's layout expectations.
-  return stew.rename(sourceTree, function(relativePath) {
-    // If a file matches the `pattern`, insert the given `insertion` as the second path part.
-    var replacements = [
-      {pattern: /^benchmarks\/test\//, insertion: ''},
-      {pattern: /^benchmarks\//, insertion: 'web'},
-      {pattern: /^benchmarks_external\/test\//, insertion: ''},
-      {pattern: /^benchmarks_external\//, insertion: 'web'},
-      {pattern: /^examples\/test\//, insertion: ''},
-      {pattern: /^examples\//, insertion: 'web/'},
-      {pattern: /^[^\/]*\/test\//, insertion: ''},
-      {pattern: /^./, insertion: 'lib'},  // catch all.
-    ];
-
-    for (var i = 0; i < replacements.length; i++) {
-      var repl = replacements[i];
-      if (relativePath.match(repl.pattern)) {
-        var parts = relativePath.split('/');
-        parts.splice(1, 0, repl.insertion);
-        return path.join.apply(path, parts);
-      }
-    }
-    throw new Error('Failed to match any path: ' + relativePath);
-  });
-}
-
-function getHtmlSourcesTree() {
-  // Replace $SCRIPT$ markers in HTML files.
-  var htmlSrcsTree = modulesFunnel(['*/src/**/*.html']);
-  htmlSrcsTree = replace(
-      htmlSrcsTree,
-      {files: ['*/**'], patterns: [{match: '$SCRIPTS$', replacement: replaceScriptTagInHtml}]});
-
-  // Copy a url_params_to_form.js for each benchmark html file.
-  var urlParamsToFormTree = new MultiCopy('', {
-    srcPath: 'tools/build/snippets/url_params_to_form.js',
-    targetPatterns: ['modules/benchmarks*/src/*', 'modules/benchmarks*/src/*/*'],
-  });
-  urlParamsToFormTree = stew.rename(urlParamsToFormTree, stripModulePrefix);
-  return mergeTrees([htmlSrcsTree, urlParamsToFormTree]);
-}
-
-function getExamplesJsonTree() {
-  // Copy JSON files
-  return modulesFunnel(['examples/**/*.json']);
-}
-
-
-function getTemplatedPubspecsTree() {
-  // The JSON structure for templating pubspec.yaml files.
-  var BASE_PACKAGE_JSON = require('../../../../package.json');
-  var COMMON_PACKAGE_JSON = {
-    version: BASE_PACKAGE_JSON.version,
-    homepage: BASE_PACKAGE_JSON.homepage,
-    bugs: BASE_PACKAGE_JSON.bugs,
-    license: BASE_PACKAGE_JSON.license,
-    contributors: BASE_PACKAGE_JSON.contributors,
-    dependencies: BASE_PACKAGE_JSON.dependencies,
-    devDependencies: {
-      "yargs": BASE_PACKAGE_JSON.devDependencies['yargs'],
-      "gulp-sourcemaps": BASE_PACKAGE_JSON.devDependencies['gulp-sourcemaps'],
-      "gulp-traceur": BASE_PACKAGE_JSON.devDependencies['gulp-traceur'],
-      "gulp": BASE_PACKAGE_JSON.devDependencies['gulp'],
-      "gulp-rename": BASE_PACKAGE_JSON.devDependencies['gulp-rename'],
-      "through2": BASE_PACKAGE_JSON.devDependencies['through2']
-    }
-  };
-  // Generate pubspec.yaml from templates.
-  var pubspecs = modulesFunnel(['**/pubspec.yaml']);
-  // Then render the templates.
-  return renderLodashTemplate(pubspecs, {context: {'packageJson': COMMON_PACKAGE_JSON}});
-}
-
-function getDocsTree() {
-  // LICENSE files
-  var licenses = new MultiCopy('', {
-    srcPath: 'LICENSE',
-    targetPatterns: ['modules/*'],
-    exclude: ['*/rtts_assert'],  // Not in dart.
-  });
-  licenses = stew.rename(licenses, stripModulePrefix);
-
-  // Documentation.
-  // Rename *.dart.md -> *.dart.
-  var mdTree = stew.rename(modulesFunnel(['**/*.dart.md']),
-                           relativePath => relativePath.replace(/\.dart\.md$/, '.md'));
-  // Copy all assets, ignore .js. and .dart. (handled above).
-  var docs = modulesFunnel(['**/*.md', '**/*.png', '**/*.html', '**/*.css', '**/*.scss'],
-                           ['**/*.js.md', '**/*.dart.md']);
-  return mergeTrees([licenses, mdTree, docs]);
-}
-
-module.exports = function makeDartTree(options: AngularBuilderOptions) {
-  var dartSources = dartfmt(getSourceTree(), {dartSDK: options.dartSDK, logs: options.logs});
-  var sourceTree = mergeTrees([dartSources, getHtmlSourcesTree(), getExamplesJsonTree()]);
-  sourceTree = fixDartFolderLayout(sourceTree);
-
-  var dartTree = mergeTrees([sourceTree, getTemplatedPubspecsTree(), getDocsTree()]);
-
-  return destCopy(dartTree, options.outputPath);
-};
diff --git a/tools/broccoli/trees/node_tree.ts b/tools/broccoli/trees/node_tree.ts
deleted file mode 100644
index 080234ec2179..000000000000
--- a/tools/broccoli/trees/node_tree.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-'use strict';
-
-import destCopy from '../broccoli-dest-copy';
-import compileWithTypescript from '../broccoli-typescript';
-import transpileWithTraceur from '../traceur/index';
-var Funnel = require('broccoli-funnel');
-import mergeTrees from '../broccoli-merge-trees';
-var path = require('path');
-import renderLodashTemplate from '../broccoli-lodash';
-import replace from '../broccoli-replace';
-var stew = require('broccoli-stew');
-
-var projectRootDir = path.normalize(path.join(__dirname, '..', '..', '..', '..'));
-
-
-module.exports = function makeNodeTree(destinationPath) {
-  // list of npm packages that this build will create
-  var outputPackages = ['angular2', 'benchpress', 'rtts_assert'];
-
-  var modulesTree = new Funnel('modules', {
-    include: ['angular2/**', 'benchpress/**', 'rtts_assert/**', '**/e2e_test/**'],
-    exclude: [
-      // the following code and tests are not compatible with CJS/node environment
-      'angular2/test/core/zone/**',
-      'angular2/test/test_lib/fake_async_spec.ts',
-      'angular2/test/render/xhr_impl_spec.ts',
-      'angular2/test/forms/**'
-    ]
-  });
-
-  var nodeTree = transpileWithTraceur(modulesTree, {
-    destExtension: '.js',
-    destSourceMapExtension: '.map',
-    traceurOptions: {
-      sourceMaps: true,
-      annotations: true,      // parse annotations
-      types: true,            // parse types
-      script: false,          // parse as a module
-      memberVariables: true,  // parse class fields
-      typeAssertionModule: 'rtts_assert/rtts_assert',
-      // Don't use type assertions since this is partly transpiled by typescript
-      typeAssertions: false,
-      modules: 'commonjs'
-    }
-  });
-
-  // Now we add the LICENSE file into all the folders that will become npm packages
-  outputPackages.forEach(function(destDir) {
-    var license = new Funnel('.', {files: ['LICENSE'], destDir: destDir});
-    nodeTree = mergeTrees([nodeTree, license]);
-  });
-
-  // Get all docs and related assets and prepare them for js build
-  var docs = new Funnel(modulesTree, {include: ['**/*.md', '**/*.png'], exclude: ['**/*.dart.md']});
-  docs = stew.rename(docs, 'README.js.md', 'README.md');
-
-  // Generate shared package.json info
-  var BASE_PACKAGE_JSON = require(path.join(projectRootDir, 'package.json'));
-  var COMMON_PACKAGE_JSON = {
-    version: BASE_PACKAGE_JSON.version,
-    homepage: BASE_PACKAGE_JSON.homepage,
-    bugs: BASE_PACKAGE_JSON.bugs,
-    license: BASE_PACKAGE_JSON.license,
-    contributors: BASE_PACKAGE_JSON.contributors,
-    dependencies: BASE_PACKAGE_JSON.dependencies,
-    devDependencies: BASE_PACKAGE_JSON.devDependencies,
-    defaultDevDependencies: {
-      "yargs": BASE_PACKAGE_JSON.devDependencies['yargs'],
-      "gulp-sourcemaps": BASE_PACKAGE_JSON.devDependencies['gulp-sourcemaps'],
-      "gulp-traceur": BASE_PACKAGE_JSON.devDependencies['gulp-traceur'],
-      "gulp": BASE_PACKAGE_JSON.devDependencies['gulp'],
-      "gulp-rename": BASE_PACKAGE_JSON.devDependencies['gulp-rename'],
-      "through2": BASE_PACKAGE_JSON.devDependencies['through2']
-    }
-  };
-
-  var packageJsons = new Funnel(modulesTree, {include: ['**/package.json']});
-  packageJsons =
-      renderLodashTemplate(packageJsons, {context: {'packageJson': COMMON_PACKAGE_JSON}});
-
-  // HACK: workaround for Traceur behavior.
-  // It expects all transpiled modules to contain this marker.
-  // TODO: remove this when we no longer use traceur
-  var traceurCompatibleTsModulesTree = replace(modulesTree, {
-    files: ['**/*.ts'],
-    patterns: [
-      {
-        match: /$/,
-        replacement: function(_, relativePath) {
-          var content = "";  // we're matching an empty line
-          if (!relativePath.endsWith('.d.ts')) {
-            content += '\r\nexport var __esModule = true;\n';
-          }
-          return content;
-        }
-      }
-    ]
-  });
-
-  var typescriptTree = compileWithTypescript(traceurCompatibleTsModulesTree, {
-    allowNonTsExtensions: false,
-    emitDecoratorMetadata: true,
-    declaration: true,
-    mapRoot: '', /* force sourcemaps to use relative path */
-    module: 'commonjs',
-    noEmitOnError: true,
-    rootDir: '.',
-    rootFilePaths: ['angular2/traceur-runtime.d.ts', 'angular2/globals.d.ts'],
-    sourceMap: true,
-    sourceRoot: '.',
-    target: 'ES5'
-  });
-
-  nodeTree = mergeTrees([nodeTree, typescriptTree, docs, packageJsons]);
-
-  // Transform all tests to make them runnable in node
-  nodeTree = replace(nodeTree, {
-    files: ['**/test/**/*_spec.js'],
-    patterns: [
-      {
-        match: /$/,
-        replacement: function(_, relativePath) {
-          return "\r\n main(); \n\r" +
-                 "var parse5Adapter = require('angular2/src/dom/parse5_adapter'); " +
-                 "parse5Adapter.Parse5DomAdapter.makeCurrent();";
-        }
-      }
-    ]
-  });
-
-  // Prepend 'use strict' directive to all JS files.
-  // See https://github.com/Microsoft/TypeScript/issues/3576
-  nodeTree = replace(nodeTree, {
-    files: ['**/*.js'],
-    patterns: [{match: /^/, replacement: function() { return `'use strict';` }}]
-  });
-
-  return destCopy(nodeTree, destinationPath);
-};
diff --git a/tools/broccoli/ts2dart.d.ts b/tools/broccoli/ts2dart.d.ts
deleted file mode 100644
index f9cf4de9208d..000000000000
--- a/tools/broccoli/ts2dart.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// TODO(martinprobst): This is a hand-written declarations file. Replace with an automatically
-// generated one when TypeScript has a strategy to distribute TS source via npm.
-
-export interface TranspilerOptions {
-  failFast?: boolean;
-  generateLibraryName?: boolean;
-  generateSourceMap?: boolean;
-  basePath?: string;
-  translateBuiltins?: boolean;
-}
-
-export class Transpiler {
-  constructor(options: TranspilerOptions);
-  transpile(fileNames: string[], outdir?: string);
-}
diff --git a/tools/build/benchpress.js b/tools/build/benchpress.js
index 7ccbbc923ee7..a4de6a40c577 100644
--- a/tools/build/benchpress.js
+++ b/tools/build/benchpress.js
@@ -1,6 +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
+ */
+
 module.exports = function(gulp, plugins, config) {
-  return function(done) {
-    del(config.path, done);
-  };
+  return function(done) { del(config.path, done); };
 };
-
diff --git a/tools/build/bundle.js b/tools/build/bundle.js
deleted file mode 100644
index 3d3faf2c84ed..000000000000
--- a/tools/build/bundle.js
+++ /dev/null
@@ -1,65 +0,0 @@
-var gulp = require('gulp');
-var concat = require('gulp-concat');
-var replace = require('gulp-replace');
-var insert = require('gulp-insert');
-var fs = require('fs-extra');
-var browserify = require('browserify');
-var path = require('path');
-
-module.exports.bundle = function(buildConfig, moduleName, outputFile, outputConfig,
-    sfx) {
-  var sfx = sfx || false;
-  // loading it earlier interfers with custom traceur.
-  var Builder = require('systemjs-builder');
-  var builder = new Builder();
-  builder.config(buildConfig);
-  if (sfx) {
-    return builder.buildSFX(moduleName, outputFile, outputConfig);
-  } else {
-    return builder.build(moduleName, outputFile, outputConfig);
-  }
-};
-
-
-module.exports.modify = function(srcs, concatName) {
-  return gulp.src(srcs)
-    .pipe(concat(concatName))
-    .pipe(replace('sourceMappingURL', 'sourceMappingURLDisabled'))  // TODO: add concat for sourceMaps
-};
-
-
-module.exports.benchpressBundle = function(entries, packageJsonPath, includes, excludes, ignore, dest, cb) {
-  var b = browserify({
-    entries: entries,
-    builtins: [],
-    insertGlobalVars: ['__filename','__dirname'],
-    detectGlobals: false
-  });
-  for (var i = 0; i < excludes.length; i++) {
-    b.exclude(excludes[i]);
-  }
-  var packageJson = JSON.parse(fs.readFileSync(packageJsonPath));
-  for (var dep in packageJson.dependencies) {
-    //remove deps from package that we want to include in the bundle
-    if (includes.indexOf(dep) > -1) {
-      delete packageJson.dependencies[dep];
-    } else {
-      b.exclude(dep);
-    }
-  }
-  for (var i = 0; i < ignore.length; i++) {
-    b.ignore(ignore[i]);
-  }
-  fs.mkdirsSync(dest);
-  fs.writeFileSync(dest + '/package.json', JSON.stringify(packageJson, null, '  '));
-  b.bundle(function(err, buf) {
-    if (err) {
-      return cb(err);
-    }
-    var contents = buf.toString();
-
-    contents += 'module.exports = global.__benchpressExports;\n';
-    fs.writeFileSync(dest + '/index.js', contents);
-    cb(null);
-  });
-};
diff --git a/tools/build/dart.js b/tools/build/dart.js
deleted file mode 100644
index 7fe991809e42..000000000000
--- a/tools/build/dart.js
+++ /dev/null
@@ -1,44 +0,0 @@
-var which = require('which');
-var spawnSync = require('child_process').spawnSync;
-
-module.exports.detect = function(gulp) {
-  var DART_SDK = false;
-  try {
-    which.sync('dart');
-    if (process.platform === 'win32') {
-      DART_SDK = {
-        ANALYZER: 'dartanalyzer.bat',
-        DARTFMT: 'dartfmt.bat',
-        PUB: 'pub.bat',
-        VM: 'dart.exe'
-      };
-    } else {
-      DART_SDK = {
-        ANALYZER: 'dartanalyzer',
-        DARTFMT: 'dartfmt',
-        PUB: 'pub',
-        VM: 'dart'
-      };
-    }
-    console.log('Dart SDK detected:');
-  } catch (e) {
-    console.log('Dart SDK is not available, Dart tasks will be skipped.');
-    var gulpTaskFn = gulp.task.bind(gulp);
-    gulp.task = function (name, deps, fn) {
-      if (name.indexOf('.dart') === -1) {
-        return gulpTaskFn(name, deps, fn);
-      } else {
-        return gulpTaskFn(name, function() {
-          console.log('Dart SDK is not available. Skipping task: ' + name);
-        });
-      }
-    };
-  }
-  return DART_SDK;
-}
-
-module.exports.logVersion = function(dartSdk) {
-  console.log('DART SDK:') ;
-  console.log('- dart: ' + spawnSync(dartSdk.VM, ['--version']).stderr.toString().replace(/\n/g, ''));
-  console.log('- pub: ' + spawnSync(dartSdk.PUB, ['--version']).stdout.toString().replace(/\n/g, ''));
-}
diff --git a/tools/build/dartanalyzer.js b/tools/build/dartanalyzer.js
deleted file mode 100644
index edd51f702348..000000000000
--- a/tools/build/dartanalyzer.js
+++ /dev/null
@@ -1,196 +0,0 @@
-var Q = require('q');
-var readline = require('readline');
-var spawn = require('child_process').spawn;
-var path = require('path');
-var glob = require('glob');
-var fs = require('fs');
-var util = require('./util');
-var yaml = require('js-yaml');
-
-module.exports = function(gulp, plugins, config) {
-  return function() {
-    var tempFile = '_analyzer.dart';
-    return util.forEachSubDirSequential(config.dest, function(dir) {
-      var pubspecContents = fs.readFileSync(path.join(dir, 'pubspec.yaml'));
-      var pubspec = yaml.safeLoad(pubspecContents);
-      var packageName = pubspec.name;
-
-      var libFiles = [].slice.call(glob.sync('lib/**/*.dart', {cwd: dir}));
-
-      var webFiles = [].slice.call(glob.sync('web/**/*.dart', {cwd: dir}));
-
-      var testFiles = [].slice.call(glob.sync('test/**/*_spec.dart', {cwd: dir}));
-      var analyzeFile = ['library _analyzer;'];
-      libFiles.concat(testFiles).concat(webFiles).forEach(function(fileName, index) {
-        if (fileName !== tempFile && fileName.indexOf("/packages/") === -1) {
-          if (fileName.indexOf('lib') == 0) {
-            fileName = 'package:' + packageName + '/' + path.relative('lib', fileName).replace(/\\/g, '/');
-          }
-          analyzeFile.push('import "' + fileName + '" as mod' + index + ';');
-        }
-      });
-      fs.writeFileSync(path.join(dir, tempFile), analyzeFile.join('\n'));
-      var defer = Q.defer();
-      analyze(dir, defer.makeNodeResolver());
-      return defer.promise;
-    });
-
-    function analyze(dirName, done) {
-      // TODO remove --package-warnings once dartanalyzer handles transitive libraries
-      var args = ['--fatal-warnings', '--package-warnings', '--format=machine'].concat(tempFile);
-
-      var stream = spawn(config.command, args, {
-        // inherit stdin and stderr, but filter stdout
-        stdio: [process.stdin, process.stdout, 'pipe'],
-        cwd: dirName
-      });
-      // Filter out unused imports from our generated file.
-      // We don't reexports from the generated file
-      // as this could lead to name clashes when two files
-      // export the same thing.
-      var rl = readline.createInterface(
-          {input: stream.stderr, output: process.stdout, terminal: false});
-      var hintCount = 0;
-      var errorCount = 0;
-      var warningCount = 0;
-      rl.on('line', function(line) {
-        if (line == "find: >     bin [: No such file or directory") {
-          //Skip bad output from Dart SDK .bat files on Windows
-          return;
-        }
-        var parsedLine = _AnalyzerOutputLine.parse(line);
-        if (!parsedLine) {
-          errorCount++;
-          console.log('Unexpected output: ' + line);
-          return;
-        }
-        // TODO remove once dartanalyzer handles transitive libraries
-        // skip errors in third-party packages
-        if (parsedLine.sourcePath.indexOf(dirName) == -1) {
-          return;
-        }
-        if (parsedLine.shouldIgnore()) {
-          return;
-        }
-
-        if (parsedLine.isHint) {
-          hintCount++;
-        } else if (parsedLine.isWarning) {
-          warningCount++;
-        } else {
-          errorCount++;
-        }
-        console.log(dirName + ':' + parsedLine);
-      });
-      stream.on('close', function() {
-        var error;
-        var report = [];
-        if (errorCount > 0) {
-          report.push(errorCount + ' error(s)');
-        }
-        if (warningCount > 0) {
-          report.push(warningCount + ' warning(s)');
-        }
-        if (hintCount > 0) {
-          report.push(hintCount + ' hint(s)');
-        }
-        if (report.length > 0) {
-          error = 'Dartanalyzer showed ' + report.join(', ');
-        }
-        done(error);
-      });
-    }
-  };
-};
-
-// See https://github.com/dart-lang/analyzer_cli/blob/master/lib/src/error_formatter.dart
-function _AnalyzerOutputLine(result) {
-  this.severity = result[1];
-  this.errorType = result[2];
-  this.errorCode = result[3];
-  this.sourcePath = result[4];
-  this.lineNum = result[5];
-  this.colNum = result[6];
-  this.asciiLineLength = parseInt(result[7], 10);
-  this.errorMsg = result[8];
-
-  this.isError = Boolean(this.severity.match(/ERROR/i));
-  this.isHint = Boolean(this.severity.match(/INFO/i));
-  this.isWarning = Boolean(this.severity.match(/WARNING/i));
-}
-
-_AnalyzerOutputLine.parse = function(line) {
-  var result = _AnalyzerOutputLine._analyzerParseRegExp.exec(line);
-  return result ? new _AnalyzerOutputLine(result) : null;
-};
-
-_AnalyzerOutputLine._analyzerParseRegExp =
-    new RegExp('([^\|]+)\\|' +           // #1, severity (NONE, INFO, WARNING, ERROR)
-               '([^\|]+)\\|' +           // #2, errorCode.type (HINT, *_WARNING, *_ERROR, etc)
-               '([^\|]+)\\|' +           // #3, errorCode (UNUSED_IMPORT, UNUSED_CATCH_STACK, etc)
-               '([^\|]+[^\|\\\\])\\|' +  // #4, sourcePath with '|' chars backslash-escaped.
-               '([^\|]+)\\|' +           // #5, line number
-               '([^\|]+)\\|' +           // #6, column number
-               '([^\|]+)\\|' +           // #7, length of the ASCII line to draw
-               '(.*)$');                 // #8, error message
-
-/* Maps file path (as string) to file source (an array of strings, one per line). */
-_AnalyzerOutputLine.cache = {};
-
-_AnalyzerOutputLine.ERR_NO_SOURCE = '(Could not find source line).';
-
-_AnalyzerOutputLine.prototype = {
-  toString: function() {
-    var sourceLine = this._getSourceLine();
-    var lineText = _AnalyzerOutputLine.ERR_NO_SOURCE;
-    if (sourceLine) {
-      var repeat = function(str, num) {
-        if (str.repeat) return str.repeat(num);
-        return Array.prototype.join.call({length: num}, str);
-      };
-
-      lineText =
-          '\n' + sourceLine + '\n' + repeat(' ', this.colNum) + repeat('^', this.asciiLineLength);
-    }
-    return '[' + this.severity + '] ' + this.errorMsg + ' (' + this.sourcePath + ', line ' +
-           this.lineNum + ', col ' + this.colNum + ')' + lineText;
-  },
-
-  shouldIgnore: function() {
-    if (this.errorCode.match(/UNUSED_IMPORT/i)) {
-      if (this.sourcePath.match(/_analyzer\.dart/)) {
-        return true;
-      }
-    }
-    // TODO: https://github.com/angular/ts2dart/issues/168
-    if (this.errorCode.match(/UNUSED_CATCH_STACK/i)) {
-      return true;
-    }
-
-    // Don't worry about hints in generated files.
-    if (this.isHint && this.sourcePath.match(/generated/i)) {
-      return true;
-    }
-    return false;
-  },
-
-  // Reads the source file for the Analyzer output, caching it for future use.
-  _getSourceLine: function() {
-    var cache = _AnalyzerOutputLine.cache;
-    var sourceLines = null;
-    if (cache.hasOwnProperty(this.sourcePath)) {
-      sourceLines = cache[this.sourcePath];
-    } else {
-      try {
-        sourceLines = String(fs.readFileSync(this.sourcePath));
-        sourceLines = sourceLines.split('\n');
-      } catch (e) {
-        sourceLines = null;
-      } finally {
-        // Even if this fails, cache `null` so we don't try again.
-        cache[this.sourcePath] = sourceLines;
-      }
-    }
-    return sourceLines && this.lineNum <= sourceLines.length ? sourceLines[this.lineNum - 1] : null;
-  }
-};
diff --git a/tools/build/es5build.js b/tools/build/es5build.js
deleted file mode 100755
index 2fae5719531f..000000000000
--- a/tools/build/es5build.js
+++ /dev/null
@@ -1,75 +0,0 @@
-#!/usr/bin/env node
-
-// Attention: This file will be distributed with our npm packages!
-var gulp = require('gulp');
-var traceur = require('gulp-traceur');
-var rename = require('gulp-rename');
-var sourcemaps = require('gulp-sourcemaps');
-var through2 = require('through2');
-var fs = require('fs');
-var path = require('path');
-
-module.exports = run;
-
-if (!module.parent) {
-  var argv = require('yargs')
-      .usage('Transpile to es5.\n\n'+
-        'Usage: $0 -m [format] -s [folder] -d [folder]')
-      .example('$0 -d tmp', 'transpile in `instantate` format to tmp/')
-      .options({
-        's': {
-          alias: 'source',
-          describe: 'source folder',
-          default: '.'
-        },
-        'd': {
-          alias: 'dest',
-          describe: 'output folder',
-          demand: true
-        },
-        'm': {
-          alias: 'modules',
-          describe: 'module format, https://github.com/google/traceur-compiler/wiki/Options-for-Compiling',
-          default: 'instantiate'
-        }
-      })
-      .help('help')
-      .wrap(40)
-      .strict()
-      .argv
-  ;
-  run({
-    src: argv.s,
-    dest: argv.d,
-    modules: argv.m
-  });
-}
-
-function run(config) {
-  var src = ['!node_modules', '!node_modules/**', './**/*.js'];
-  return gulp.src(src, {cwd: config.src})
-    // TODO(tbosch): Using sourcemaps.init({loadMaps:true}) does not combine
-    // the sourcemaps correctly!
-    .pipe(sourcemaps.init())
-    .pipe(through2.obj(function(file, encoding, done) {
-      var self = this;
-      fs.readFile(file.path.replace('.js', '.map'), function(error, buffer) {
-        if (error) {
-          return done(error);
-        }
-        file.sourceMap = JSON.parse(buffer.toString());
-        // The filename needs to be the same as the one that is transpiled
-        // so that gulp-sourcemaps can update the mapping
-        file.sourceMap.file = file.relative;
-        file.sourceMap.sourceRoot = path.dirname(file.relative);
-        self.push(file);
-        done();
-      });
-    }))
-    .pipe(traceur({
-      modules: config.modules,
-      sourceMaps: true
-    }))
-    .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest(config.dest));
-};
diff --git a/tools/build/file2modulename.js b/tools/build/file2modulename.js
index ea04a730674c..5cd7810e213b 100644
--- a/tools/build/file2modulename.js
+++ b/tools/build/file2modulename.js
@@ -1,16 +1,24 @@
+/**
+ * @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
+ */
+
 function file2moduleName(filePath) {
-  return filePath.replace(/\\/g, '/')
-    // module name should be relative to `modules` and `tools` folder
-    .replace(/.*\/modules\//, '')
-    .replace(/.*\/tools\//, '')
-    //  and 'dist' folder
-    .replace(/.*\/dist\/js\/dev\/es5\//, '')
-    // module name should not include `lib`, `web` folders
-    // as they are wrapper packages for dart
-    .replace(/\/web\//, '/')
-    .replace(/\/lib\//, '/')
-    // module name should not have a suffix
-    .replace(/\.\w*$/, '');
+  return filePath
+      .replace(/\\/g, '/')
+      // module name should be relative to `modules` and `tools` folder
+      .replace(/.*\/modules\//, '')
+      //  and 'dist' folder
+      .replace(/.*\/dist\/js\/dev\/es5\//, '')
+      // module name should not include `lib`, `web` folders
+      // as they are wrapper packages for dart
+      .replace(/\/web\//, '/')
+      .replace(/\/lib\//, '/')
+      // module name should not have a suffix
+      .replace(/\.\w*$/, '');
 }
 if (typeof module !== 'undefined') {
   module.exports = file2moduleName;
diff --git a/tools/build/jsserve.js b/tools/build/jsserve.js
deleted file mode 100644
index e00fa23dc9c3..000000000000
--- a/tools/build/jsserve.js
+++ /dev/null
@@ -1,15 +0,0 @@
-module.exports = function(gulp, plugins, config) {
-  return function() {
-    plugins.connect.server({
-      root: [__dirname+'/../../'+config.path],
-      port: config.port,
-      livereload: false,
-      open: false,
-      middleware: function(connect, opt) {
-        return [
-          connect.favicon()
-        ]
-      }
-    })();
-  };
-};
diff --git a/tools/build/licensewrap.js b/tools/build/licensewrap.js
new file mode 100644
index 000000000000..694635cbf2a9
--- /dev/null
+++ b/tools/build/licensewrap.js
@@ -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
+ */
+
+var fs = require('fs');
+module.exports = function(licenseFile, outputFile) {
+  var licenseText = fs.readFileSync(licenseFile);
+  var license = '/**\n @license\n' + licenseText + '\n */\n';
+  if (outputFile) {
+    outputFile = licenseFile + '.wrapped';
+    fs.writeFileSync(outputFile, license, 'utf8');
+    return outputFile;
+  } else {
+    return license;
+  }
+};
diff --git a/tools/build/linknodemodules.js b/tools/build/linknodemodules.js
deleted file mode 100644
index acdc3b343058..000000000000
--- a/tools/build/linknodemodules.js
+++ /dev/null
@@ -1,32 +0,0 @@
-var fs = require('fs');
-var path = require('path');
-
-module.exports = function(gulp, plugins, config) {
-  return function() {
-    var nodeModulesDir = path.join(config.dir, 'node_modules');
-    if (!fs.existsSync(nodeModulesDir)) {
-      fs.mkdirSync(nodeModulesDir);
-    }
-    getSubdirs(config.dir).forEach(function(relativeFolder) {
-      if (relativeFolder === 'node_modules') {
-        return;
-      }
-      var sourceDir = path.join('..', relativeFolder);
-      var linkDir = path.join(nodeModulesDir, relativeFolder);
-      if (!fs.existsSync(linkDir)) {
-        console.log('creating link', linkDir, sourceDir);
-        fs.symlinkSync(sourceDir, linkDir, 'dir');
-      }
-    });
-  };
-};
-
-function getSubdirs(rootDir) {
-  return fs.readdirSync(rootDir).filter(function(file) {
-    if (file[0] === '.') {
-      return false;
-    }
-    var dirPath = path.join(rootDir, file);
-    return fs.statSync(dirPath).isDirectory();
-  });
-}
\ No newline at end of file
diff --git a/tools/build/logging.js b/tools/build/logging.js
index f7e3d2313e5d..fb6e8f2f5cdb 100644
--- a/tools/build/logging.js
+++ b/tools/build/logging.js
@@ -1,3 +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
+ */
+
 var kLogsArgument = /^--logs\s*=\s*(.+?)$/;
 var kTrimLeft = /^\s+/;
 var kTrimRight = /\s+$/;
@@ -15,23 +23,18 @@ function findArgvLogs() {
 }
 
 function logsToObject(logstr) {
-  return logstr.
-    split(',').
-    reduce(function(obj, key) {
-      key = camelize(key);
-      if (key.length > 0) obj[key] = true;
-      return obj;
-    }, Object.create(null));
+  return logstr.split(',').reduce(function(obj, key) {
+    key = camelize(key);
+    if (key.length > 0) obj[key] = true;
+    return obj;
+  }, Object.create(null));
   return logs;
 }
 
 function camelize(str) {
-  return str.
-    replace(kTrimLeft, '').
-    replace(kTrimRight, '').
-    replace(kCamelCase, function(match, c) {
-      return c ? c.toUpperCase() : "";
-    });
+  return str.replace(kTrimLeft, '').replace(kTrimRight, '').replace(kCamelCase, function(match, c) {
+    return c ? c.toUpperCase() : '';
+  });
 }
 
 function shouldLog(str) {
diff --git a/tools/build/pubbuild.js b/tools/build/pubbuild.js
deleted file mode 100644
index 985878d1f95c..000000000000
--- a/tools/build/pubbuild.js
+++ /dev/null
@@ -1,55 +0,0 @@
-var util = require('./util');
-var Q = require('q');
-var spawn = require('child_process').spawn;
-var through2 = require('through2');
-var path = require('path');
-var glob = require('glob');
-var fs = require('fs');
-
-module.exports = function(gulp, plugins, config) {
-  return function() {
-    var webFolders = [].slice.call(glob.sync(path.join(config.src, '*/web')));
-    return nextFolder();
-
-    function nextFolder() {
-      if (!webFolders.length) {
-        return;
-      }
-      var folder = path.resolve(path.join(webFolders.shift(), '..'));
-      var destFolder = path.resolve(path.join(config.dest, path.basename(folder)));
-      var pubMode = config.mode || 'release';
-      var pubArgs = ['build', '--mode', pubMode, '-o', destFolder];
-
-      return util.processToPromise(spawn(config.command, pubArgs, {
-        stdio: 'inherit',
-        cwd: folder
-      })).then(function() {
-        return replaceDartWithJsScripts(gulp, destFolder);
-      }).then(function() {
-        return removeWebFolder(gulp, destFolder);
-      }).then(nextFolder);
-    }
-  };
-};
-
-function replaceDartWithJsScripts(gulp, folder) {
-  return util.streamToPromise(gulp.src(path.join(folder, '**/*.html'))
-    .pipe(through2.obj(function(file, enc, done) {
-      var content = file.contents.toString();
-      content = content.replace(/\.dart/, '.dart.js');
-      content = content.replace(/application\/dart/, 'text/javascript');
-      file.contents = new Buffer(content);
-      this.push(file);
-      done();
-    }))
-    .pipe(gulp.dest(folder)));
-}
-
-function removeWebFolder(gulp, folder) {
-  var folders = [].slice.call(glob.sync(path.join(folder, 'web', '*')));
-  folders.forEach(function(subFolder) {
-    fs.renameSync(subFolder, subFolder.replace('/web/', '/'));
-  });
-  fs.rmdirSync(path.join(folder, 'web'));
-  return Q.resolve();
-}
diff --git a/tools/build/pubget.js b/tools/build/pubget.js
deleted file mode 100644
index d0f112350882..000000000000
--- a/tools/build/pubget.js
+++ /dev/null
@@ -1,30 +0,0 @@
-var util = require('./util');
-var spawn = require('child_process').spawn;
-var path = require('path');
-
-module.exports = {
-  dir: pubGetDir,
-  subDir: pubGetSubDir
-};
-
-function pubGetDir(gulp, plugins, config) {
-  return function() {
-    return util.processToPromise(spawn(config.command, ['get'], {
-      stdio: 'inherit',
-      cwd: config.dir
-    }));
-  };
-};
-
-function pubGetSubDir(gulp, plugins, config) {
-  return function() {
-    // We need to execute pubspec serially as otherwise we can get into trouble
-    // with the pub cache...
-    return util.forEachSubDirSequential(config.dir, function(subDir) {
-      return util.processToPromise(spawn(config.command, ['get'], {
-        stdio: 'inherit',
-        cwd: subDir
-      }));
-    });
-  };
-};
diff --git a/tools/build/pubserve.js b/tools/build/pubserve.js
deleted file mode 100644
index 69857885d324..000000000000
--- a/tools/build/pubserve.js
+++ /dev/null
@@ -1,13 +0,0 @@
-var util = require('./util');
-var spawn = require('child_process').spawn;
-
-module.exports = function(gulp, plugins, config, module) {
-  return function() {
-    var pubMode = config.mode || 'debug';
-    var pubArgs = ['serve', '--mode', pubMode];
-    return util.streamToPromise(spawn(config.command, pubArgs, {
-      cwd: config.path, stdio: 'inherit'
-    }));
-  };
-};
-
diff --git a/tools/build/run_server_dart_tests.js b/tools/build/run_server_dart_tests.js
deleted file mode 100644
index 84f4801faa44..000000000000
--- a/tools/build/run_server_dart_tests.js
+++ /dev/null
@@ -1,54 +0,0 @@
-var Q = require('q');
-var glob = require('glob');
-var fs = require('fs');
-var path = require('path');
-var spawn = require('child_process').spawn;
-
-var util = require('./util');
-
-module.exports = function(gulp, plugins, config) {
-  return function() {
-    if (config.dir) {
-      return run(config.dir);
-    } else {
-      return util.forEachSubDirSequential(config.dest, run);
-    }
-  };
-
-  function run(dir) {
-    var testDir = path.join(dir, 'test');
-    var relativeMasterTestFile = 'test/_all_tests.dart';
-    var testFiles = [].slice.call(glob.sync('**/*.server.spec.dart', {
-      cwd: testDir
-    }));
-    if (testFiles.length == 0) {
-      // No test files found
-      return Q.resolve();
-    }
-    var header = ['library _all_tests;', ''];
-    var main = ['main() {'];
-    testFiles.forEach(function(fileName, index) {
-      header.push('import "' + fileName + '" as test_' + index + ';');
-      main.push('  test_' + index + '.main();');
-    });
-    header.push('');
-    main.push('}');
-
-    var absMasterTestFile = path.join(dir, relativeMasterTestFile);
-    fs.writeFileSync(absMasterTestFile, header.concat(main).join('\n'));
-
-    var defer = Q.defer();
-    var done = defer.makeNodeResolver();
-    console.log('start tests');
-    util.processToPromise(spawn('dart', ['-c', relativeMasterTestFile], {
-      stdio: 'inherit',
-      cwd: dir
-    })).then(
-      function() { done(); },
-      function(error) { done(error); }
-    );
-    return defer.promise.then(function() {
-      console.log('end tests');
-    });
-  }
-};
diff --git a/tools/build/rundartpackage.js b/tools/build/rundartpackage.js
deleted file mode 100644
index 3d4b98537a04..000000000000
--- a/tools/build/rundartpackage.js
+++ /dev/null
@@ -1,44 +0,0 @@
-var util = require('./util');
-var Q = require('q');
-var spawn = require('child_process').spawn;
-var readline = require('readline');
-
-module.exports = function(gulp, plugins, config) {
-  return function() {
-    return isInstalled().then(function(installed) {
-      if (!installed) {
-        return util.processToPromise(spawn(config.pub,
-          ['global', 'activate', config.packageName, '--no-executables'], {
-          stdio: 'inherit'
-        }));
-      }
-    }).then(function() {
-      return util.processToPromise(spawn(config.pub, ['global', 'run'].concat(config.args), {
-        stdio: 'inherit'
-      }));
-    });
-  };
-
-  function isInstalled() {
-    var subProcess = spawn(config.pub, ['global', 'list'], {
-      // inherit stdin and stderr, but filter stdout
-      stdio: [process.stdin, 'pipe', process.stderr]
-    });
-    var rl = readline.createInterface({
-      input: subProcess.stdout,
-      output: process.stdout,
-      terminal: false
-    });
-    var found = false;
-    rl.on('line', function(line) {
-      if (line.indexOf(config.packageName) !== -1) {
-        found = true;
-      }
-      console.log(line);
-    });
-    return util.processToPromise(subProcess).then( function() {
-      return found;
-    });
-  }
-
-};
diff --git a/tools/build/snippets/runtime_paths.js b/tools/build/snippets/runtime_paths.js
deleted file mode 100644
index a1ff444772da..000000000000
--- a/tools/build/snippets/runtime_paths.js
+++ /dev/null
@@ -1,7 +0,0 @@
-System.paths = {
-  '*': '/*.js',
-  'rx': 'rx.js'
-};
-register(System);
-cjs(System);
-
diff --git a/tools/build/snippets/url_params_to_form.js b/tools/build/snippets/url_params_to_form.js
index 60adbd3ff8a6..a9dd0c29acb8 100644
--- a/tools/build/snippets/url_params_to_form.js
+++ b/tools/build/snippets/url_params_to_form.js
@@ -1,3 +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
+ */
+
 // helper script that will read out the url parameters
 // and store them in appropriate form fields on the page
 (function() {
@@ -6,9 +14,9 @@
   while (match = regex.exec(search)) {
     var name = match[1];
     var value = match[2];
-    var els = document.querySelectorAll('input[name="'+name+'"]');
+    var els = document.querySelectorAll('input[name="' + name + '"]');
     var el;
-    for (var i=0; i<els.length; i++) {
+    for (var i = 0; i < els.length; i++) {
       el = els[i];
       if (el.type === 'radio' || el.type === 'checkbox') {
         el.checked = el.value === value;
diff --git a/tools/build/systemjs/payload_tests_import.js b/tools/build/systemjs/payload_tests_import.js
new file mode 100644
index 000000000000..7afd373b8423
--- /dev/null
+++ b/tools/build/systemjs/payload_tests_import.js
@@ -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
+ */
+
+System.import('index').catch(console.error.bind(console));
diff --git a/tools/build/transpile.js b/tools/build/transpile.js
deleted file mode 100644
index 5a902645d6ca..000000000000
--- a/tools/build/transpile.js
+++ /dev/null
@@ -1,16 +0,0 @@
-var util = require('./util');
-var gulpTraceur = require('../transpiler/gulp-traceur');
-var file2moduleName = require('./file2modulename');
-
-module.exports = function(gulp, plugins, config) {
-  return function() {
-    return gulp.src(config.src)
-      .pipe(plugins.rename({extname: '.'+config.outputExt}))
-      .pipe(util.insertSrcFolder(plugins, config.srcFolderInsertion))
-      .pipe(gulpTraceur(
-        config.options,
-        file2moduleName)
-      )
-      .pipe(gulp.dest(config.dest));
-  };
-};
diff --git a/tools/build/util.js b/tools/build/util.js
deleted file mode 100644
index 75f8f8979ec6..000000000000
--- a/tools/build/util.js
+++ /dev/null
@@ -1,80 +0,0 @@
-var fs = require('fs');
-var path = require('path');
-var minimatch = require('minimatch');
-var path = require('path');
-var Q = require('q');
-
-module.exports = {
-  processToPromise: processToPromise,
-  streamToPromise: streamToPromise,
-  filterByFile: filterByFile,
-  subDirs: subDirs,
-  forEachSubDir: forEachSubDir,
-  forEachSubDirSequential: forEachSubDirSequential
-};
-
-function subDirs(dir) {
-  return fs.readdirSync(dir).filter(function(file) {
-    return fs.statSync(path.join(dir, file)).isDirectory();
-  });
-}
-
-function forEachSubDir(dir, callback) {
-  var dirs = subDirs(dir);
-  return Q.all(dirs.map(function(subdir) {
-    return callback(path.join(dir, subdir));
-  }));
-};
-
-function forEachSubDirSequential(dir, callback) {
-  var dirs = subDirs(dir);
-  return next(0);
-
-  function next(index) {
-    if (index < dirs.length) {
-      return callback(path.join(dir, dirs[index])).then(function() {
-        return next(index+1);
-      });
-    } else {
-      return true;
-    }
-  }
-}
-
-function processToPromise(process) {
-  var defer = Q.defer();
-  process.on('close', function(code) {
-    if (code) {
-      defer.reject(code);
-    } else {
-      defer.resolve();
-    }
-  });
-  return defer.promise;
-}
-
-function streamToPromise(stream) {
-  var defer = Q.defer();
-  stream.on('end', defer.resolve);
-  stream.on('error', defer.reject);
-  return defer.promise;
-}
-
-function filterByFile(pathMapping, folder) {
-  var folderParts = folder.split(path.sep);
-  var match;
-  var lastPattern;
-  for (var pattern in pathMapping) {
-    if (minimatch(folder, pattern)) {
-      if (!lastPattern || lastPattern.length < pattern.length) {
-        match = pathMapping[pattern];
-        lastPattern = pattern;
-      }
-    }
-  }
-  if (match !== undefined) {
-    return match;
-  } else {
-    throw new Error('No entry for folder '+folder+' found in '+JSON.stringify(pathMapping));
-  }
-}
diff --git a/tools/build/watch.js b/tools/build/watch.js
index cf544f127a58..39413efa5e81 100644
--- a/tools/build/watch.js
+++ b/tools/build/watch.js
@@ -1,3 +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
+ */
+
 var chokidar = require('chokidar');
 var runSequence = require('run-sequence');
 var path = require('path');
@@ -16,9 +24,7 @@ function watch(globs, opts, tasks) {
     if (!Array.isArray(tasks)) tasks = [tasks];
     tasks = tasks.slice();
     tasks.push(tasksDone);
-    runTasks = function runTaskSequence() {
-      runSequence.apply(null, tasks);
-    }
+    runTasks = function runTaskSequence() { runSequence.apply(null, tasks); };
   } else {
     var sync = tasks.length === 0;
     runTasks = function runCallback() {
@@ -28,7 +34,7 @@ function watch(globs, opts, tasks) {
       } catch (e) {
         return tasksDone(e);
       }
-    }
+    };
   }
 
   var events = opts.events = opts.events || ['add', 'change', 'unlink'];
@@ -42,11 +48,8 @@ function watch(globs, opts, tasks) {
   var delay = opts.delay;
   if (delay === undefined) delay = 100;
 
-  var watcher = chokidar.watch(globs, opts).
-      on('all', handleEvent).
-      on('error', function(err) {
-        throw err;
-      });
+  var watcher =
+      chokidar.watch(globs, opts).on('all', handleEvent).on('error', function(err) { throw err; });
 
   var log = function watchLogger(triggerCount) {
     // Don't report change for initial event
@@ -62,12 +65,12 @@ function watch(globs, opts, tasks) {
 
     function prettyTime() {
       var now = new Date();
-      return now.toLocaleDateString() + " at " + now.toLocaleTimeString();
+      return now.toLocaleDateString() + ' at ' + now.toLocaleTimeString();
     }
-  }
+  };
 
   if (opts.log !== undefined && !opts.log) {
-    log = function noopLog(triggerCount) {}
+    log = function noopLog(triggerCount) {};
   }
 
   var close = watcher.close.bind(watcher);
@@ -76,8 +79,8 @@ function watch(globs, opts, tasks) {
     close();
   };
 
-  var eventsRecorded = 0; // Number of events recorded
-  var timeoutId = null; // If non-null, event capture window is open
+  var eventsRecorded = 0;  // Number of events recorded
+  var timeoutId = null;    // If non-null, event capture window is open
 
   if (!ignoreInitial) {
     // synthetic event to kick off the first task run
@@ -112,6 +115,7 @@ function watch(globs, opts, tasks) {
       timeoutId = null;
     }
     if (!useRunSequence && err) {
+      // tslint:disable-next-line:no-console
       console.log('Watch task error:', err.toString());
     }
   }
diff --git a/tools/build/watch.spec.js b/tools/build/watch.spec.js
index 20a2ddd802ab..c64ea80091be 100644
--- a/tools/build/watch.spec.js
+++ b/tools/build/watch.spec.js
@@ -1,3 +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
+ */
+
 var rewire = require('rewire');
 
 describe('watch()', function() {
@@ -27,7 +35,7 @@ describe('watch()', function() {
 
   it('should fire callback once for events which occur within `delay` window', function() {
     var cb = jasmine.createSpy('callback');
-    watcher = watch('./$$fake_path/**/*', { delay: 10, log: false }, cb);
+    watcher = watch('./$$fake_path/**/*', {delay: 10, log: false}, cb);
 
     watcher._emit('add', './$$fake_path/test.txt');
     timeout.flush(9);
@@ -61,7 +69,7 @@ describe('watch()', function() {
       expect(timeout.pending).toBe(1);
     }
 
-    var watcher = watch('./$$fake_path/**/*', { delay: 10, log: false }, cb);
+    var watcher = watch('./$$fake_path/**/*', {delay: 10, log: false}, cb);
 
     watcher._emit('change', './$$fake_path/test1.txt');
     expect(timeout.pending).toBe(1);
@@ -81,7 +89,7 @@ describe('watch()', function() {
       done();
     }
 
-    var watcher = watch('./$$fake_path/**/*', { delay: 10, log: false }, cb);
+    var watcher = watch('./$$fake_path/**/*', {delay: 10, log: false}, cb);
 
     watcher._emit('change', './$$fake_path/test1.txt');
     timeout.flush();
@@ -96,7 +104,7 @@ describe('watch()', function() {
 
   it('should cancel pending callback if FSWatcher is closed', function() {
     var cb = jasmine.createSpy('callback');
-    var watcher = watch('./$$fake_path/**/*', { delay: 10, log: false }, cb);
+    var watcher = watch('./$$fake_path/**/*', {delay: 10, log: false}, cb);
 
     watcher._emit('change', './$$fake_path/test1.txt');
     expect(timeout.pending).toBe(1);
@@ -119,7 +127,7 @@ describe('watch()', function() {
       expect(timeout.pending).toBe(0);
     }
 
-    var watcher = watch('./$$fake_path/**/*', { delay: 10, log: false }, cb);
+    var watcher = watch('./$$fake_path/**/*', {delay: 10, log: false}, cb);
     watcher._emit('change', './$$fake_path/test1.txt');
 
     timeout.flush(10);
@@ -136,21 +144,13 @@ function mockTimeout() {
   var now = 0;
 
   return {
-    mocks: {
-      setTimeout: mockSetTimeout,
-      clearTimeout: mockClearTimeout
-    },
-    flush: flush,
-    get pending() { return events.length; }
+    mocks: {setTimeout: mockSetTimeout, clearTimeout: mockClearTimeout},
+    flush: flush, get pending() { return events.length; }
   };
 
   function mockSetTimeout(fn, delay) {
     delay = delay || 0;
-    events.push({
-      time: now + delay,
-      fn: fn,
-      id: id
-    });
+    events.push({time: now + delay, fn: fn, id: id});
     events.sort(function(a, b) { return a.time - b.time; });
     return id++;
   }
@@ -165,9 +165,12 @@ function mockTimeout() {
   }
 
   function flush(delay) {
-    if (delay !== undefined) now += delay;
-    else if (events.length) now = events[events.length - 1].time;
-    else throw new Error('No timer events registered');
+    if (delay !== undefined)
+      now += delay;
+    else if (events.length)
+      now = events[events.length - 1].time;
+    else
+      throw new Error('No timer events registered');
 
     while (events.length && events[0].time <= now) {
       events.shift().fn();
diff --git a/tools/build/webpack/angular2-all-testing.umd.js b/tools/build/webpack/angular2-all-testing.umd.js
new file mode 100644
index 000000000000..e070f9e38a78
--- /dev/null
+++ b/tools/build/webpack/angular2-all-testing.umd.js
@@ -0,0 +1,30 @@
+/**
+ * @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 bundle is almost identical to the angular2.umd.js
+// the only difference being "testing" exports
+exports.core = require('angular2/core');
+exports.common = require('angular2/common');
+exports.compiler = require('angular2/compiler');
+exports.platform = {
+  browser: require('angular2/platform/browser'),
+  common_dom: require('angular2/platform/common_dom'),
+
+  // this is included as compared to the angular2-all.umd.js bundle
+  testing: {browser: require('angular2/platform/testing/browser')}
+};
+exports.http = require('angular2/http');
+exports.router = require('angular2/router');
+exports.router_link_dsl = require('angular2/router/router_link_dsl.js');
+exports.instrumentation = require('angular2/instrumentation');
+exports.upgrade = require('angular2/upgrade');
+
+// this is included as compared to the angular2-all.umd.js bundle
+exports.testing = require('angular2/testing');
+exports.http.testing = require('angular2/http/testing');
+exports.router.testing = require('angular2/router/testing');
diff --git a/tools/build/webpack/angular2-all.umd.js b/tools/build/webpack/angular2-all.umd.js
new file mode 100644
index 000000000000..ffc20f4eb038
--- /dev/null
+++ b/tools/build/webpack/angular2-all.umd.js
@@ -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
+ */
+
+exports.core = require('angular2/core');
+exports.common = require('angular2/common');
+exports.compiler = require('angular2/compiler');
+exports.platform = {
+  browser: require('angular2/platform/browser'),
+  common_dom: require('angular2/platform/common_dom')
+};
+exports.http = require('angular2/http');
+exports.router = require('angular2/router');
+exports.router_link_dsl = require('angular2/router/router_link_dsl.js');
+exports.instrumentation = require('angular2/instrumentation');
+exports.upgrade = require('angular2/upgrade');
diff --git a/tools/build/webpack/promiseify.js b/tools/build/webpack/promiseify.js
new file mode 100644
index 000000000000..9cf8c2cdcf6a
--- /dev/null
+++ b/tools/build/webpack/promiseify.js
@@ -0,0 +1,39 @@
+/**
+ * @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
+ */
+
+var webpack = require('webpack');
+
+/**
+ * Wraps the original `webpack` function to convert execution
+ * result to a promise and properly report errors.
+ *
+ * @param options
+ * @returns {Function}
+ */
+function webPackPromiseify(options) {
+  return new Promise(function(resolve, reject) {
+
+    webpack(options, function(err, stats) {
+      var jsonStats = stats.toJson() || {};
+      var statsErrors = jsonStats.errors || [];
+
+      if (err) {
+        return reject(err);
+      }
+
+      if (statsErrors.length) {
+        return reject(statsErrors);
+      }
+
+      return resolve(stats);
+    });
+
+  });
+}
+
+module.exports = webPackPromiseify;
diff --git a/tools/check-environment.js b/tools/check-environment.js
index 16c473370d88..5a4a1a53374c 100644
--- a/tools/check-environment.js
+++ b/tools/check-environment.js
@@ -1,39 +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
+ */
+
+/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+   !!!                                                                                   !!!
+   !!!  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.               !!!
+   !!!                                                                                   !!!
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
+
+'use strict';
+
 var exec = require('child_process').exec;
-var semver = require('semver');
+var checkNodeModules;
+var semver;
+var issues = [];
+
+// coarse Node version check
+if (+process.version[1] < 5) {
+  issues.push('Angular build currently requires Node 5+. Use nvm to update your node version.');
+}
 
-var checkNodeModules = require('./npm/check-node-modules.js');
+try {
+  semver = require('semver');
+} catch (e) {
+  issues.push('Looks like you are missing some npm dependencies. Run: `yarn install`');
+}
 
+if (issues.length) {
+  printWarning(issues);
+  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/docs/DEVELOPER.md for more info.');
+  process.exit(1);
+}
 
-function checkEnvironment(reqs) {
+// wrap in try/catch in case someone requires from within that file
+try {
+  checkNodeModules = require('./npm/check-node-modules.js');
+} catch (e) {
+  issues.push('Looks like you are missing some npm dependencies. Run: `yarn install`');
+  throw e;
+} finally {
+  // print warnings and move on, the next steps will likely fail, but hey, we warned them.
+  printWarning(issues);
+}
 
-  exec('npm --version', function(e, stdout) {
-    var foundNpmVersion = semver.clean(stdout);
+if (require.main === module) {
+  // we are running this script directly so just run checkEnvironment against the main angular
+  // package.json
+  var engines = require(__dirname + '/../package.json').engines;
+  checkEnvironment({
+    requiredNodeVersion: engines.node,
+    requiredNpmVersion: engines.npm,
+    requiredYarnVersion: engines.yarn
+  });
+}
+
+function checkEnvironment(reqs) {
+  exec('yarn --version', function(yarnErr, yarnStdout) {
     var foundNodeVersion = process.version;
+    var foundYarnVersion = !yarnErr && semver.clean(yarnStdout);
     var issues = [];
 
-
     if (!semver.satisfies(foundNodeVersion, reqs.requiredNodeVersion)) {
-      issues.push('You are running unsupported node version. Found: ' + foundNodeVersion +
-        ' Expected: ' + reqs.requiredNodeVersion + '. Use nvm to update your node version.');
+      issues.push(
+          'You are running unsupported node version. Found: ' + foundNodeVersion + ' Expected: ' +
+          reqs.requiredNodeVersion + '. Use nvm to update your node version.');
     }
 
-    if (!semver.satisfies(foundNpmVersion, reqs.requiredNpmVersion)) {
-      issues.push('You are running unsupported npm version. Found: ' + foundNpmVersion +
-        ' Expected: ' + reqs.requiredNpmVersion + '. Run: npm update -g npm');
+    if (yarnErr) {
+      issues.push(
+          'You don\'t have yarn globally installed. This is required because we use yarn to ' +
+          'ensure that we all use the exact same npm dependencies. Installation instructions: ' +
+          'https://yarnpkg.com/lang/en/docs/install/');
+    } else if (!semver.satisfies(foundYarnVersion, reqs.requiredYarnVersion)) {
+      issues.push(
+          'You are running an unsupported yarn version. Found: ' + foundYarnVersion +
+          ' Expected: ' + reqs.requiredYarnVersion + '. This is required because we use yarn to ' +
+          'ensure that we all use the exact same npm dependencies. Installation instructions: ' +
+          'https://yarnpkg.com/lang/en/docs/install/');
     }
 
     if (!checkNodeModules()) {
-      issues.push('Your node_modules directory is stale or out of sync with npm-shrinkwrap.json. Run: npm install');
+      issues.push(
+          'Your node_modules directory is stale or out of sync with yarn.lock. Run: yarn install');
     }
 
-    if (issues.length) {
-      console.warn(Array(80).join('!'));
-      console.warn('Your environment is not in a good shape. Following issues were found:');
-      issues.forEach(function(issue) {console.warn('  - ' + issue)});
-      console.warn(Array(80).join('!'));
-    }
+    printWarning(issues);
   });
 }
 
+function printWarning(issues) {
+  if (!issues.length) return;
+
+  console.warn('');
+  console.warn('!'.repeat(110));
+  console.warn('!!!  Your environment is not in a good shape. Following issues were found:');
+  issues.forEach(function(issue) { console.warn('!!!   - ' + issue); });
+  console.warn('!'.repeat(110));
+  console.warn('');
+
+  if (process.env.CI) {
+    process.exit(1);
+  }
+}
+
 
 module.exports = checkEnvironment;
diff --git a/tools/chromedriverpatch.js b/tools/chromedriverpatch.js
deleted file mode 100644
index 4f07122cbaf3..000000000000
--- a/tools/chromedriverpatch.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Patch Protractor so that it uses ChromeDriver 2.14 instead of 2.15.
- *
- * This is necessary because as of v2.1.0, Protractor by default uses
- * chromedriver 2.15. However, angular need to test against Dartium, which
- * is an old version of Chromium which is incompatible with Chromedriver > 2.14.
- *
- * TODO(juliemr): Remove this script once Dartium has been updated.
- */
-var fs = require('fs');
-var path = require('path');
-
-var protractorConfigFile = path.resolve(require.resolve('protractor'), '../../config.json');
-
-var newConfig = {
-  "webdriverVersions": {
-    "selenium": "2.45.0",
-    "chromedriver": "2.14",
-    "iedriver": "2.45.0"
-  }
-}
-
-fs.writeFile(protractorConfigFile,  JSON.stringify(newConfig));
diff --git a/tools/cjs-jasmine/index-tools.ts b/tools/cjs-jasmine/index-tools.ts
new file mode 100644
index 000000000000..08501f29223f
--- /dev/null
+++ b/tools/cjs-jasmine/index-tools.ts
@@ -0,0 +1,55 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+const glob = require('glob');
+require('zone.js/dist/zone-node.js');
+const JasmineRunner = require('jasmine');
+const path = require('path');
+require('zone.js/dist/long-stack-trace-zone.js');
+require('zone.js/dist/task-tracking.js');
+require('zone.js/dist/proxy.js');
+require('zone.js/dist/sync-test.js');
+require('zone.js/dist/async-test.js');
+require('zone.js/dist/fake-async-test.js');
+const {generateSeed} = require('../../../tools/jasmine-seed-generator');
+
+// Let TypeScript know this is a module
+export {};
+
+const jrunner = new JasmineRunner({projectBaseDir: path.resolve(__dirname, '../../')});
+(global as any)['jasmine'] = jrunner.jasmine;
+require('zone.js/dist/jasmine-patch.js');
+
+// Turn on full stack traces in errors to help debugging
+(<any>Error)['stackTraceLimit'] = Infinity;
+
+// Config the test runner
+jrunner.jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
+jrunner.loadConfig({
+  random: true,
+  spec_dir: '',
+});
+jrunner.seed(generateSeed('cjs-jasmine/index-tools'));
+jrunner.configureDefaultReporter({showColors: process.argv.indexOf('--no-color') === -1});
+jrunner.onComplete((passed: boolean) => process.exit(passed ? 0 : 1));
+
+// Support passing multiple globs
+const rootDir = process.cwd();
+const globsIndex = process.argv.indexOf('--');
+const globs = (globsIndex === -1) ? [process.argv[2]] : process.argv.slice(globsIndex + 1);
+const specFiles = globs.map(globstr => glob.sync(globstr, {cwd: rootDir}) as string[])
+                      .reduce((allPaths, paths) => allPaths.concat(paths), []);
+
+// Load helpers and spec files
+const rootDirRequire = (relativePath: string) => require(path.join(rootDir, relativePath));
+specFiles.forEach(rootDirRequire);
+
+// Run the tests
+jrunner.execute();
diff --git a/tools/cjs-jasmine/index.ts b/tools/cjs-jasmine/index.ts
new file mode 100644
index 000000000000..8b06bad1d68a
--- /dev/null
+++ b/tools/cjs-jasmine/index.ts
@@ -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
+ */
+
+'use strict';
+
+const glob = require('glob');
+require('zone.js/dist/zone-node.js');
+const JasmineRunner = require('jasmine');
+const path = require('path');
+require('source-map-support').install();
+require('zone.js/dist/long-stack-trace-zone.js');
+require('zone.js/dist/task-tracking.js');
+require('zone.js/dist/proxy.js');
+require('zone.js/dist/sync-test.js');
+require('zone.js/dist/async-test.js');
+require('zone.js/dist/fake-async-test.js');
+require('reflect-metadata/Reflect');
+const {generateSeed} = require('../../../tools/jasmine-seed-generator');
+
+// Let TypeScript know this is a module
+export {};
+
+const jrunner = new JasmineRunner({projectBaseDir: path.resolve(__dirname, '../../')});
+(global as any)['jasmine'] = jrunner.jasmine;
+require('zone.js/dist/jasmine-patch.js');
+
+(global as any).isBrowser = false;
+(global as any).isNode = true;
+
+// Turn on full stack traces in errors to help debugging
+(<any>Error)['stackTraceLimit'] = Infinity;
+
+// Config the test runner
+jrunner.jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
+jrunner.loadConfig({
+  random: true,
+  spec_dir: '',
+});
+jrunner.seed(generateSeed('cjs-jasmine/index'));
+jrunner.configureDefaultReporter({showColors: process.argv.indexOf('--no-color') === -1});
+jrunner.onComplete((passed: boolean) => process.exit(passed ? 0 : 1));
+
+// Support passing multiple globs
+const distAll = process.cwd() + '/dist/all';
+const globsIndex = process.argv.indexOf('--');
+const globs = (globsIndex === -1) ? [process.argv[2]] : process.argv.slice(globsIndex + 1);
+const specFiles =
+    globs
+        .map(globstr => glob.sync(globstr, {
+          cwd: distAll,
+          ignore: [
+            // the following code and tests are not compatible with CJS/node environment
+            '@angular/_testing_init/**',
+            '@angular/compiler/test/aot/**',
+            '@angular/compiler/test/render3/**',
+            '@angular/compiler-cli/test/compliance/**',
+            '@angular/core/test/bundling/**',
+            '@angular/core/test/fake_async_spec.*',
+            '@angular/core/test/render3/**',
+            '@angular/core/test/zone/**',
+            '@angular/elements/**',
+            '@angular/examples/**',
+            '@angular/forms/test/**',
+            '@angular/integration_test/symbol_inspector/**',
+            '@angular/platform-browser/**',
+            '@angular/platform-browser-dynamic/**',
+            '@angular/router/test/integration/bootstrap_spec.*',
+            '@angular/router/test/route_config/route_config_spec.*',
+            '@angular/upgrade/**',
+            '@angular/**/e2e_test/**',
+            'angular1_router/**',
+            'payload_tests/**',
+          ],
+        }) as string[])
+        // Run relevant subset of browser tests for features reused on the server side.
+        // Make sure the security spec works on the server side!
+        .concat(glob.sync('@angular/platform-browser/test/security/**/*_spec.js', {cwd: distAll}))
+        .concat(['/@angular/platform-browser/test/browser/meta_spec.js'])
+        .concat(['/@angular/platform-browser/test/browser/title_spec.js'])
+        .concat(['/@angular/platform-browser/test/browser/transfer_state_spec.js'])
+        .reduce((allPaths, paths) => allPaths.concat(paths), []);
+
+// Load helpers and spec files
+const distAllRequire = (relativePath: string) => {
+  const mod = require(path.join(distAll, relativePath));
+  if (mod.main) {
+    mod.main();
+  }
+  return mod;
+};
+require('./test-cjs-main');
+distAllRequire('@angular/platform-server/src/domino_adapter').DominoAdapter.makeCurrent();
+specFiles.forEach(distAllRequire);
+
+// Run the tests
+jrunner.execute();
diff --git a/tools/cjs-jasmine/test-cjs-main.ts b/tools/cjs-jasmine/test-cjs-main.ts
new file mode 100644
index 000000000000..7720713d8f97
--- /dev/null
+++ b/tools/cjs-jasmine/test-cjs-main.ts
@@ -0,0 +1,13 @@
+/**
+ * @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 testingPlatformServer = require('../../all/@angular/platform-server/testing/src/server.js');
+const coreTesting = require('../../all/@angular/core/testing');
+
+coreTesting.TestBed.initTestEnvironment(
+    testingPlatformServer.ServerTestingModule, testingPlatformServer.platformServerTesting());
diff --git a/tools/code.angularjs.org/publish.sh b/tools/code.angularjs.org/publish.sh
index 7df033f2027e..3638616c2ef7 100755
--- a/tools/code.angularjs.org/publish.sh
+++ b/tools/code.angularjs.org/publish.sh
@@ -13,7 +13,7 @@ ARG_DEFS=(
 
 function init {
   TMP_DIR=$(resolveDir ../../tmp)
-  BUILD_DIR=$(resolveDir ../../dist/bundle)
+  BUILD_DIR=$(resolveDir ../../dist/js/bundle)
   REPO_DIR=$TMP_DIR/code.angularjs.org
   # TODO: replace with version read from the bundle dir.
   NEW_VERSION=$VERSION_NUMBER
@@ -22,12 +22,24 @@ function init {
   else
     IS_SNAPSHOT_BUILD=
   fi
+  RX_BUNDLE_DIR=$(resolveDir ../../node_modules/rxjs/bundles)
 }
 
 function prepare {
 
-  echo "-- Cloning code.angularjs.org"
-  git clone git@github.com:angular/code.angularjs.org.git $REPO_DIR --depth=1
+
+
+  if [ -d "$REPO_DIR" ]; then
+    (
+      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
+  fi
 
   echo "-- Updating code.angularjs.org"
 
@@ -44,6 +56,7 @@ function prepare {
     #
     mkdir $REPO_DIR/$NEW_VERSION
     cp -r $BUILD_DIR/* $REPO_DIR/$NEW_VERSION/
+    cp -r $RX_BUNDLE_DIR/* $REPO_DIR/$NEW_VERSION/
   fi
 
   #
diff --git a/tools/defaults.bzl b/tools/defaults.bzl
new file mode 100644
index 000000000000..19cfa66d5252
--- /dev/null
+++ b/tools/defaults.bzl
@@ -0,0 +1,108 @@
+"""Re-export of some bazel rules with repository-wide defaults."""
+
+load("@build_bazel_rules_nodejs//:defs.bzl", _npm_package = "npm_package")
+load("@build_bazel_rules_typescript//:defs.bzl", _ts_library = "ts_library", _ts_web_test_suite = "ts_web_test_suite")
+load("//packages/bazel:index.bzl", _ng_module = "ng_module", _ng_package = "ng_package")
+load("//packages/bazel/src:ng_module.bzl", _internal_global_ng_module = "internal_global_ng_module")
+
+DEFAULT_TSCONFIG = "//packages:tsconfig-build.json"
+DEFAULT_NODE_MODULES = "@angular_deps//:node_modules"
+
+# Packages which are versioned together on npm
+ANGULAR_SCOPED_PACKAGES = ["@angular/%s" % p for p in [
+    # core should be the first package because it's the main package in the group
+    # this is significant for Angular CLI and "ng update" specifically, @angular/core
+    # is considered the identifier of the group by these tools.
+    "core",
+    "bazel",
+    "common",
+    "compiler",
+    "compiler-cli",
+    "animations",
+    "elements",
+    "platform-browser",
+    "platform-browser-dynamic",
+    "forms",
+    "http",
+    "platform-server",
+    "platform-webworker",
+    "platform-webworker-dynamic",
+    "upgrade",
+    "router",
+    "language-service",
+    "service-worker",
+]]
+
+PKG_GROUP_REPLACEMENTS = {
+    "\"NG_UPDATE_PACKAGE_GROUP\"": """[
+      %s
+    ]""" % ",\n      ".join(["\"%s\"" % s for s in ANGULAR_SCOPED_PACKAGES]),
+}
+
+def ts_library(tsconfig = None, node_modules = DEFAULT_NODE_MODULES, **kwargs):
+    if not tsconfig:
+        tsconfig = DEFAULT_TSCONFIG
+    _ts_library(tsconfig = tsconfig, node_modules = node_modules, **kwargs)
+
+def ng_module(name, tsconfig = None, entry_point = None, node_modules = DEFAULT_NODE_MODULES, **kwargs):
+    if not tsconfig:
+        tsconfig = DEFAULT_TSCONFIG
+    if not entry_point:
+        entry_point = "public_api.ts"
+    _ng_module(name = name, flat_module_out_file = name, tsconfig = tsconfig, entry_point = entry_point, node_modules = node_modules, **kwargs)
+
+# ivy_ng_module behaves like ng_module, and under --define=compile=legacy it runs ngc with global
+# analysis but produces Ivy outputs. Under other compile modes, it behaves as ng_module.
+# TODO(alxhub): remove when ngtsc supports the same use cases.
+def ivy_ng_module(name, tsconfig = None, entry_point = None, **kwargs):
+    if not tsconfig:
+        tsconfig = DEFAULT_TSCONFIG
+    if not entry_point:
+        entry_point = "public_api.ts"
+    _internal_global_ng_module(name = name, flat_module_out_file = name, tsconfig = tsconfig, entry_point = entry_point, **kwargs)
+
+def ng_package(name, readme_md = None, license_banner = None, **kwargs):
+    if not readme_md:
+        readme_md = "//packages:README.md"
+    if not license_banner:
+        license_banner = "//packages:license-banner.txt"
+
+    _ng_package(
+        name = name,
+        readme_md = readme_md,
+        license_banner = license_banner,
+        replacements = PKG_GROUP_REPLACEMENTS,
+        **kwargs
+    )
+
+def npm_package(name, replacements = {}, **kwargs):
+    _npm_package(
+        name = name,
+        replacements = dict(replacements, **PKG_GROUP_REPLACEMENTS),
+        **kwargs
+    )
+
+def ts_web_test_suite(bootstrap = [], deps = [], **kwargs):
+    if not bootstrap:
+        bootstrap = ["//:web_test_bootstrap_scripts"]
+    local_deps = [
+        "@angular_deps//:node_modules/tslib/tslib.js",
+        "//tools/testing:browser",
+    ] + deps
+
+    _ts_web_test_suite(
+        bootstrap = bootstrap,
+        deps = local_deps,
+        # Run unit tests on local Chromium by default.
+        # You can exclude tests based on tags, e.g. to skip Firefox testing,
+        #   `bazel test --test_tag_filters=-browser:firefox-local [targets]`
+        browsers = [
+            "@io_bazel_rules_webtesting//browsers:chromium-local",
+            # Don't test on local Firefox by default, for faster builds.
+            # We think that bugs in Angular tend to be caught the same in any
+            # evergreen browser.
+            # "@io_bazel_rules_webtesting//browsers:firefox-local",
+            # TODO(alexeagle): add remote browsers on SauceLabs
+        ],
+        **kwargs
+    )
diff --git a/tools/gulp-tasks/README.md b/tools/gulp-tasks/README.md
new file mode 100644
index 000000000000..91fe4593209e
--- /dev/null
+++ b/tools/gulp-tasks/README.md
@@ -0,0 +1,56 @@
+# Gulp Tasks folder
+
+This folder contains one file for each task (or group of related tasks) for the project's gulpfile.
+The dependencies between the tasks is kept in the gulpfile.
+
+## Task File Structure
+Each task is defined by a factory function that accepts `gulp` as a parameter.
+Each file exports either one factory or an object of factories.
+
+E.g. The `build.js` file contains only one task:
+
+```js
+module.exports = (gulp) => (done) => {
+  ...
+};
+```
+
+E.g. The `format.js` file contains two tasks:
+
+```js
+module.exports = {
+  // Check source code for formatting errors (clang-format)
+  enforce: (gulp) => () => {
+    ...
+  },
+
+  // Format the source code with clang-format (see .clang-format)
+  format: (gulp) => () => {
+    ...
+  }
+};
+
+```
+
+## Loading Tasks
+
+The tasks are loaded in the gulp file, by requiring them. There is a helper called `loadTask(fileName, taskName)`
+will do this for us, where the `taskName` is optional if the file only exports one task.
+
+E.g. Loading the task that will run the build, from a task file that contains only one task.
+
+```js
+gulp.task('build.sh', loadTask('build'));
+```
+
+E.g. Loading the task that will enforce formatting, from a task file that contains more than one task:
+
+```js
+gulp.task('format:enforce', loadTask('format', 'enforce'));
+```
+
+E.g. Loading a task that has dependencies:
+
+```js
+gulp.task('lint', ['format:enforce', 'tools:build'], loadTask('lint'));
+```
\ No newline at end of file
diff --git a/tools/gulp-tasks/build.js b/tools/gulp-tasks/build.js
new file mode 100644
index 000000000000..870829cebc01
--- /dev/null
+++ b/tools/gulp-tasks/build.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
+ */
+
+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');
+  // 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/changelog.js b/tools/gulp-tasks/changelog.js
new file mode 100644
index 000000000000..0ffdb314486d
--- /dev/null
+++ b/tools/gulp-tasks/changelog.js
@@ -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
+ */
+
+module.exports = (gulp) => () => {
+  const conventionalChangelog = require('gulp-conventional-changelog');
+  return gulp.src('CHANGELOG.md')
+      .pipe(conventionalChangelog({preset: 'angular', releaseCount: 1}, {
+        // Conventional Changelog Context
+        // We have to manually set version number so it doesn't get prefixed with `v`
+        // See https://github.com/conventional-changelog/conventional-changelog-core/issues/10
+        currentTag: require('../../package.json').version
+      }))
+      .pipe(gulp.dest('./'));
+};
diff --git a/tools/gulp-tasks/check-cycle.js b/tools/gulp-tasks/check-cycle.js
new file mode 100644
index 000000000000..f068d17150f3
--- /dev/null
+++ b/tools/gulp-tasks/check-cycle.js
@@ -0,0 +1,25 @@
+/**
+ * @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
+ */
+
+// tslint:disable:no-console
+module.exports = (gulp) => (done) => {
+  const madge = require('madge');
+
+  const dependencyObject = madge(['dist/all/'], {
+    format: 'cjs',
+    extensions: ['.js'],
+    onParseFile: function(data) { data.src = data.src.replace(/\/\* circular \*\//g, '//'); }
+  });
+  const circularDependencies = dependencyObject.circular().getArray();
+  if (circularDependencies.length > 0) {
+    console.log('Found circular dependencies!');
+    console.log(circularDependencies);
+    process.exit(1);
+  }
+  done();
+};
diff --git a/tools/gulp-tasks/cldr.js b/tools/gulp-tasks/cldr.js
new file mode 100644
index 000000000000..29331de25207
--- /dev/null
+++ b/tools/gulp-tasks/cldr.js
@@ -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
+ */
+
+const path = require('path');
+const fs = require('fs');
+
+module.exports = {
+  extract: gulp => done => {
+    if (!fs.existsSync(path.join(__dirname, 'cldr/cldr-data'))) {
+      throw new Error(`You must run "gulp cldr:download" before you can extract the data`);
+    }
+    const extract = require('./cldr/extract');
+    return extract(gulp, done);
+  },
+
+  download: gulp => done => {
+    const cldrDownloader = require('cldr-data-downloader');
+    const cldrDataFolder = path.join(__dirname, 'cldr/cldr-data');
+    if (!fs.existsSync(cldrDataFolder)) {
+      fs.mkdirSync(cldrDataFolder);
+    }
+    cldrDownloader(path.join(__dirname, 'cldr/cldr-urls.json'), cldrDataFolder, done);
+  },
+
+  closure: gulp => done => {
+    const {RELATIVE_I18N_DATA_FOLDER} = require('./cldr/extract');
+    // tslint:disable-next-line:no-console
+    console.log(RELATIVE_I18N_DATA_FOLDER, fs.existsSync(RELATIVE_I18N_DATA_FOLDER));
+    if (!fs.existsSync(RELATIVE_I18N_DATA_FOLDER)) {
+      throw new Error(
+          `You must run "gulp cldr:extract" before you can create the closure-locale.ts file`);
+    }
+    const localeAll = require('./cldr/closure');
+    return localeAll(gulp, done);
+  },
+};
diff --git a/tools/gulp-tasks/cldr/cldr-data.js b/tools/gulp-tasks/cldr/cldr-data.js
new file mode 100644
index 000000000000..e83be06eaf8b
--- /dev/null
+++ b/tools/gulp-tasks/cldr/cldr-data.js
@@ -0,0 +1,84 @@
+// tslint:disable:file-header
+
+/**
+ * Npm module for Unicode CLDR JSON data
+ *
+ * @license
+ * Copyright 2013 Rafael Xavier de Souza
+ * Released under the MIT license
+ * https://github.com/rxaviers/cldr-data-npm/blob/master/LICENSE-MIT
+ */
+
+'use strict';
+
+const JSON_EXTENSION = /^(.*)\.json$/;
+
+const assert = require('assert');
+const _fs = require('fs');
+const _path = require('path');
+
+function argsToArray(arg) {
+  return [].slice.call(arg, 0);
+}
+
+function jsonFiles(dirName) {
+  const fileList = _fs.readdirSync(_path.join(__dirname, 'cldr-data', dirName));
+
+  return fileList.reduce(function(sum, file) {
+    if (JSON_EXTENSION.test(file)) {
+      return sum.concat(file.match(JSON_EXTENSION)[1]);
+    }
+  }, []);
+}
+
+function cldrData(path /*, ...*/) {
+  assert(
+      typeof path === 'string', 'must include path (e.g., ' +
+          '"main/en/numbers" or "supplemental/likelySubtags")');
+
+  if (arguments.length > 1) {
+    return argsToArray(arguments).reduce(function(sum, path) {
+      sum.push(cldrData(path));
+      return sum;
+    }, []);
+  }
+  return require('./cldr-data/' + path);
+}
+
+function mainPathsFor(locales) {
+  return locales.reduce(function(sum, locale) {
+    const mainFiles = jsonFiles(_path.join('main', locale));
+    mainFiles.forEach(function(mainFile) { sum.push(_path.join('main', locale, mainFile)); });
+    return sum;
+  }, []);
+}
+
+function supplementalPaths() {
+  const supplementalFiles = jsonFiles('supplemental');
+
+  return supplementalFiles.map(function(supplementalFile) {
+    return _path.join('supplemental', supplementalFile);
+  });
+}
+
+Object.defineProperty(
+    cldrData, 'availableLocales',
+    {get: function() { return cldrData('availableLocales').availableLocales; }});
+
+cldrData.all = function() {
+  const paths = supplementalPaths().concat(mainPathsFor(this.availableLocales));
+  return cldrData.apply({}, paths);
+};
+
+cldrData.entireMainFor = function(locale /*, ...*/) {
+  assert(
+      typeof locale === 'string', 'must include locale (e.g., ' +
+          '"en")');
+  return cldrData.apply({}, mainPathsFor(argsToArray(arguments)));
+};
+
+cldrData.entireSupplemental = function() {
+  return cldrData.apply({}, supplementalPaths());
+};
+
+module.exports = cldrData;
diff --git a/tools/gulp-tasks/cldr/cldr-urls.json b/tools/gulp-tasks/cldr/cldr-urls.json
new file mode 100644
index 000000000000..221c0077a8b6
--- /dev/null
+++ b/tools/gulp-tasks/cldr/cldr-urls.json
@@ -0,0 +1,22 @@
+{
+  "core": [
+    "https://github.com/unicode-cldr/cldr-core/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-segments-modern/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-dates-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-buddhist-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-chinese-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-coptic-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-dangi-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-ethiopic-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-hebrew-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-indian-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-islamic-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-japanese-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-persian-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-cal-roc-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-localenames-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-misc-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-numbers-full/archive/33.0.0.zip",
+    "https://github.com/unicode-cldr/cldr-units-full/archive/33.0.0.zip"
+  ]
+}
diff --git a/tools/gulp-tasks/cldr/closure.js b/tools/gulp-tasks/cldr/closure.js
new file mode 100644
index 000000000000..242da35bc708
--- /dev/null
+++ b/tools/gulp-tasks/cldr/closure.js
@@ -0,0 +1,158 @@
+/**
+ * @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 fs = require('fs');
+const yargs = require('yargs').argv;
+const {I18N_DATA_FOLDER, RELATIVE_I18N_DATA_FOLDER, HEADER} = require('./extract');
+const OUTPUT_NAME = `closure-locale.ts`;
+
+// tslint:disable:no-console
+module.exports = (gulp, done) => {
+  // the locales used by closure that will be used to generate the closure-locale file
+  // extracted from:
+  // https://github.com/google/closure-library/blob/master/closure/goog/i18n/datetimepatterns.js#L2136
+  let GOOG_LOCALES = [
+    'af',    'am',    'ar',    'ar-DZ', 'az',    'be',    'bg',    'bn',     'br',    'bs',
+    'ca',    'chr',   'cs',    'cy',    'da',    'de',    'de-AT', 'de-CH',  'el',    'en-AU',
+    'en-CA', 'en-GB', 'en-IE', 'en-IN', 'en-SG', 'en-ZA', 'es',    'es-419', 'es-MX', 'es-US',
+    'et',    'eu',    'fa',    'fi',    'fr',    'fr-CA', 'ga',    'gl',     'gsw',   'gu',
+    'haw',   'hi',    'hr',    'hu',    'hy',    'in',    'is',    'it',     'iw',    'ja',
+    'ka',    'kk',    'km',    'kn',    'ko',    'ky',    'ln',    'lo',     'lt',    'lv',
+    'mk',    'ml',    'mn',    'mo',    'mr',    'ms',    'mt',    'my',     'ne',    'nl',
+    'no',    'or',    'pa',    'pl',    'pt',    'pt-PT', 'ro',    'ru',     'sh',    'si',
+    'sk',    'sl',    'sq',    'sr',    'sv',    'sw',    'ta',    'te',     'th',    'tl',
+    'tr',    'uk',    'ur',    'uz',    'vi',    'zh',    'zh-CN', 'zh-HK',  'zh-TW', 'zu'
+  ];
+
+  // locale id aliases to support deprecated locale ids used by closure
+  // it maps deprecated ids --> new ids
+  // manually extracted from ./cldr-data/supplemental/aliases.json
+  const ALIASES = {
+    'in': 'id',
+    'iw': 'he',
+    'mo': 'ro-MD',
+    'no': 'nb',
+    'nb': 'no-NO',
+    'sh': 'sr-Latn',
+    'tl': 'fil',
+    'pt': 'pt-BR',
+    'zh-CN': 'zh-Hans-CN',
+    'zh-Hans-CN': 'zh-Hans',
+    'zh-HK': 'zh-Hant-HK',
+    'zh-TW': 'zh-Hant-TW',
+    'zh-Hant-TW': 'zh-Hant',
+  };
+
+  if (yargs.locales) {
+    GOOG_LOCALES = yargs.locales.split(',');
+  }
+
+  console.log(`Writing file ${I18N_DATA_FOLDER}/${OUTPUT_NAME}`);
+  fs.writeFileSync(
+      `${RELATIVE_I18N_DATA_FOLDER}/${OUTPUT_NAME}`, generateAllLocalesFile(GOOG_LOCALES, ALIASES));
+
+  console.log(`Formatting ${I18N_DATA_FOLDER}/${OUTPUT_NAME}..."`);
+  const format = require('gulp-clang-format');
+  const clangFormat = require('clang-format');
+  return gulp.src([`${I18N_DATA_FOLDER}/${OUTPUT_NAME}`], {base: '.'})
+      .pipe(format.format('file', clangFormat))
+      .pipe(gulp.dest('.'));
+};
+
+/**
+ * Generate a file that contains all locale to import for closure.
+ * Tree shaking will only keep the data for the `goog.LOCALE` locale.
+ */
+function generateAllLocalesFile(LOCALES, ALIASES) {
+  const existingLocalesAliases = {};
+  const existingLocalesData = {};
+
+  // for each locale, get the data and the list of equivalent locales
+  LOCALES.forEach(locale => {
+    const eqLocales = new Set();
+    eqLocales.add(locale);
+    if (locale.match(/-/)) {
+      eqLocales.add(locale.replace(/-/g, '_'));
+    }
+
+    // check for aliases
+    const alias = ALIASES[locale];
+    if (alias) {
+      eqLocales.add(alias);
+
+      if (alias.match(/-/)) {
+        eqLocales.add(alias.replace(/-/g, '_'));
+      }
+
+      // to avoid duplicated "case" we regroup all locales in the same "case"
+      // the simplest way to do that is to have alias aliases
+      // e.g. 'no' --> 'nb', 'nb' --> 'no-NO'
+      // which means that we'll have 'no', 'nb' and 'no-NO' in the same "case"
+      const aliasKeys = Object.keys(ALIASES);
+      for (let i = 0; i < aliasKeys.length; i++) {
+        const aliasValue = ALIASES[alias];
+        if (aliasKeys.indexOf(alias) !== -1 && !eqLocales.has(aliasValue)) {
+          eqLocales.add(aliasValue);
+
+          if (aliasValue.match(/-/)) {
+            eqLocales.add(aliasValue.replace(/-/g, '_'));
+          }
+        }
+      }
+    }
+
+    for (let l of eqLocales) {
+      // find the existing content file
+      const path = `${RELATIVE_I18N_DATA_FOLDER}/${l}.ts`;
+      if (fs.existsSync(`${RELATIVE_I18N_DATA_FOLDER}/${l}.ts`)) {
+        const localeName = formatLocale(locale);
+        existingLocalesData[locale] =
+            fs.readFileSync(path, 'utf8')
+                .replace(`${HEADER}\n`, '')
+                .replace('export default ', `export const locale_${localeName} = `)
+                .replace('function plural', `function plural_${localeName}`)
+                .replace(/,(\n  | )plural/, `, plural_${localeName}`)
+                .replace('const u = undefined;\n\n', '');
+      }
+    }
+
+    existingLocalesAliases[locale] = eqLocales;
+  });
+
+  function generateCases(locale) {
+    let str = '';
+    const eqLocales = existingLocalesAliases[locale];
+    for (let l of eqLocales) {
+      str += `case '${l}':\n`;
+    }
+
+    str += `  l = locale_${formatLocale(locale)};
+    break;\n`;
+    return str;
+  }
+
+  function formatLocale(locale) { return locale.replace(/-/g, '_'); }
+  // clang-format off
+  return `${HEADER}
+import {registerLocaleData} from '../src/i18n/locale_data';
+
+const u = undefined;
+
+${LOCALES.map(locale => `${existingLocalesData[locale]}`).join('\n')}
+
+let l: any;
+
+switch (goog.LOCALE) {
+${LOCALES.map(locale => generateCases(locale)).join('')}}
+
+if(l) {
+  registerLocaleData(l, goog.LOCALE);
+}
+`;
+  // clang-format on
+}
diff --git a/tools/gulp-tasks/cldr/extract.js b/tools/gulp-tasks/cldr/extract.js
new file mode 100644
index 000000000000..3c0e0ce16c95
--- /dev/null
+++ b/tools/gulp-tasks/cldr/extract.js
@@ -0,0 +1,575 @@
+/**
+ * @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 fs = require('fs');
+const path = require('path');
+const stringify = require('./util').stringify;
+// used to extract plural rules
+const cldr = require('cldr');
+// used to extract all other cldr data
+const cldrJs = require('cldrjs');
+
+const PACKAGE_FOLDER = 'packages/common';
+const I18N_FOLDER = `${PACKAGE_FOLDER}/src/i18n`;
+const I18N_DATA_FOLDER = `${PACKAGE_FOLDER}/locales`;
+const I18N_DATA_EXTRA_FOLDER = `${I18N_DATA_FOLDER}/extra`;
+const RELATIVE_I18N_FOLDER = path.resolve(__dirname, `../../../${I18N_FOLDER}`);
+const RELATIVE_I18N_DATA_FOLDER = path.resolve(__dirname, `../../../${I18N_DATA_FOLDER}`);
+const RELATIVE_I18N_DATA_EXTRA_FOLDER = path.resolve(__dirname, `../../../${I18N_DATA_EXTRA_FOLDER}`);
+const DEFAULT_RULE = 'function anonymous(n\n/*``*/) {\nreturn"other"\n}';
+const EMPTY_RULE = 'function anonymous(n\n/*``*/) {\n\n}';
+const WEEK_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+const HEADER = `/**
+ * @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 CODE IS GENERATED - DO NOT MODIFY
+// See angular/tools/gulp-tasks/cldr/extract.js
+`;
+
+// tslint:disable:no-console
+module.exports = (gulp, done) => {
+  const cldrData = require('./cldr-data');
+  const LOCALES = cldrData.availableLocales;
+
+  console.log(`Loading CLDR data...`);
+  cldrJs.load(cldrData.all());
+
+  console.log(`Writing locale files`);
+  if (!fs.existsSync(RELATIVE_I18N_FOLDER)) {
+    fs.mkdirSync(RELATIVE_I18N_FOLDER);
+  }
+  if (!fs.existsSync(RELATIVE_I18N_DATA_FOLDER)) {
+    fs.mkdirSync(RELATIVE_I18N_DATA_FOLDER);
+  }
+  if (!fs.existsSync(RELATIVE_I18N_DATA_EXTRA_FOLDER)) {
+    fs.mkdirSync(RELATIVE_I18N_DATA_EXTRA_FOLDER);
+  }
+
+  console.log(`Writing file ${I18N_FOLDER}/currencies.ts`);
+  fs.writeFileSync(`${RELATIVE_I18N_FOLDER}/currencies.ts`, generateCurrenciesFile());
+
+  const baseCurrencies = generateBaseCurrencies(new cldrJs('en'));
+  // additional "en" file that will be included in common
+  console.log(`Writing file ${I18N_FOLDER}/locale_en.ts`);
+  const localeEnFile = generateLocale('en', new cldrJs('en'), baseCurrencies);
+  fs.writeFileSync(`${RELATIVE_I18N_FOLDER}/locale_en.ts`, localeEnFile);
+
+  LOCALES.forEach((locale, index) => {
+    const localeData = new cldrJs(locale);
+
+    console.log(`${index + 1}/${LOCALES.length}`);
+    console.log(`\t${I18N_DATA_FOLDER}/${locale}.ts`);
+    fs.writeFileSync(`${RELATIVE_I18N_DATA_FOLDER}/${locale}.ts`, locale === 'en'? localeEnFile : generateLocale(locale, localeData, baseCurrencies));
+    console.log(`\t${I18N_DATA_EXTRA_FOLDER}/${locale}.ts`);
+    fs.writeFileSync(`${RELATIVE_I18N_DATA_EXTRA_FOLDER}/${locale}.ts`, generateLocaleExtra(locale, localeData));
+  });
+  console.log(`${LOCALES.length} locale files generated.`);
+
+  console.log(`All i18n cldr files have been generated, formatting files..."`);
+  const format = require('gulp-clang-format');
+  const clangFormat = require('clang-format');
+  return gulp
+    .src([
+      `${I18N_DATA_FOLDER}/**/*.ts`,
+      `${I18N_FOLDER}/currencies.ts`,
+      `${I18N_FOLDER}/locale_en.ts`
+    ], {base: '.'})
+    .pipe(format.format('file', clangFormat))
+    .pipe(gulp.dest('.'));
+};
+
+/**
+ * Generate file that contains basic locale data
+ */
+function generateLocale(locale, localeData, baseCurrencies) {
+  // [ localeId, dateTime, number, currency, pluralCase ]
+  let data = stringify([
+    locale,
+    ...getDateTimeTranslations(localeData),
+    ...getDateTimeSettings(localeData),
+    ...getNumberSettings(localeData),
+    ...getCurrencySettings(locale, localeData),
+    generateLocaleCurrencies(localeData, baseCurrencies)
+  ], true)
+  // We remove "undefined" added by spreading arrays when there is no value
+    .replace(/undefined/g, 'u');
+
+  // adding plural function after, because we don't want it as a string
+  data = data.substring(0, data.lastIndexOf(']')) + `, plural]`;
+
+  return `${HEADER}
+const u = undefined;
+
+${getPluralFunction(locale)}
+
+export default ${data};
+`;
+}
+
+/**
+ * Generate a file that contains extra data (for now: day period rules, and extended day period data)
+ */
+function generateLocaleExtra(locale, localeData) {
+  const dayPeriods = getDayPeriodsNoAmPm(localeData);
+  const dayPeriodRules = getDayPeriodRules(localeData);
+
+  let dayPeriodsSupplemental = [];
+
+  if (Object.keys(dayPeriods.format.narrow).length) {
+    const keys = Object.keys(dayPeriods.format.narrow);
+
+    if (keys.length !== Object.keys(dayPeriodRules).length) {
+      throw new Error(`Error: locale ${locale} has not the correct number of day period rules`);
+    }
+
+    const dayPeriodsFormat = removeDuplicates([
+      objectValues(dayPeriods.format.narrow),
+      objectValues(dayPeriods.format.abbreviated),
+      objectValues(dayPeriods.format.wide)
+    ]);
+
+    const dayPeriodsStandalone = removeDuplicates([
+      objectValues(dayPeriods['stand-alone'].narrow),
+      objectValues(dayPeriods['stand-alone'].abbreviated),
+      objectValues(dayPeriods['stand-alone'].wide)
+    ]);
+
+    const rules = keys.map(key => dayPeriodRules[key]);
+
+    dayPeriodsSupplemental = [...removeDuplicates([dayPeriodsFormat, dayPeriodsStandalone]), rules];
+  }
+
+  return `${HEADER}
+const u = undefined;
+
+export default ${stringify(dayPeriodsSupplemental).replace(/undefined/g, 'u')};
+`;
+}
+
+/**
+ * Generate a list of currencies to be used as a based for other currencies
+ * e.g.: {'ARS': [, '$'], 'AUD': ['A$', '$'], ...}
+ */
+function generateBaseCurrencies(localeData, addDigits) {
+  const currenciesData = localeData.main('numbers/currencies');
+  const fractions = new cldrJs('en').get(`supplemental/currencyData/fractions`);
+  const currencies = {};
+  Object.keys(currenciesData).forEach(key => {
+    let symbolsArray = [];
+    const symbol = currenciesData[key].symbol;
+    const symbolNarrow = currenciesData[key]['symbol-alt-narrow'];
+    if (symbol && symbol !== key) {
+      symbolsArray.push(symbol);
+    }
+    if (symbolNarrow && symbolNarrow !== symbol) {
+      if (symbolsArray.length > 0) {
+        symbolsArray.push(symbolNarrow);
+      } else {
+        symbolsArray = [undefined, symbolNarrow];
+      }
+    }
+    if (addDigits && fractions[key] && fractions[key]['_digits']) {
+      const digits = parseInt(fractions[key]['_digits'], 10);
+      if (symbolsArray.length === 2) {
+        symbolsArray.push(digits);
+      } else if (symbolsArray.length === 1) {
+        symbolsArray = [...symbolsArray, undefined, digits];
+      } else {
+        symbolsArray = [undefined, undefined, digits];
+      }
+    }
+    if (symbolsArray.length > 0) {
+      currencies[key] = symbolsArray;
+    }
+  });
+  return currencies;
+}
+
+/**
+ * To minimize the file even more, we only output the differences compared to the base currency
+ */
+function generateLocaleCurrencies(localeData, baseCurrencies) {
+  const currenciesData = localeData.main('numbers/currencies');
+  const currencies = {};
+  Object.keys(currenciesData).forEach(code => {
+    let symbolsArray = [];
+    const symbol = currenciesData[code].symbol;
+    const symbolNarrow = currenciesData[code]['symbol-alt-narrow'];
+    if (symbol && symbol !== code) {
+      symbolsArray.push(symbol);
+    }
+    if (symbolNarrow && symbolNarrow !== symbol) {
+      if (symbolsArray.length > 0) {
+        symbolsArray.push(symbolNarrow);
+      } else {
+        symbolsArray = [undefined, symbolNarrow];
+      }
+    }
+
+    // if locale data are different, set the value
+    if ((baseCurrencies[code] || []).toString() !== symbolsArray.toString()) {
+      currencies[code] = symbolsArray;
+    }
+  });
+  return currencies;
+}
+
+/**
+ * Generate a file that contains the list of currencies and their symbols
+ */
+function generateCurrenciesFile() {
+  const baseCurrencies = generateBaseCurrencies(new cldrJs('en'), true);
+
+  return `${HEADER}
+export type CurrenciesSymbols = [string] | [string | undefined, string];
+
+/** @internal */
+export const CURRENCIES_EN: {[code: string]: CurrenciesSymbols | [string | undefined, string | undefined, number]} = ${stringify(baseCurrencies, true)};
+`;
+}
+
+/**
+ * Returns data for the chosen day periods
+ * @returns {format: {narrow / abbreviated / wide: [...]}, stand-alone: {narrow / abbreviated / wide: [...]}}
+ */
+function getDayPeriods(localeData, dayPeriodsList) {
+  const dayPeriods = localeData.main(`dates/calendars/gregorian/dayPeriods`);
+  const result = {};
+  // cleaning up unused keys
+  Object.keys(dayPeriods).forEach(key1 => {          // format / stand-alone
+    result[key1] = {};
+    Object.keys(dayPeriods[key1]).forEach(key2 => {  // narrow / abbreviated / wide
+      result[key1][key2] = {};
+      Object.keys(dayPeriods[key1][key2]).forEach(key3 => {
+        if (dayPeriodsList.indexOf(key3) !== -1) {
+          result[key1][key2][key3] = dayPeriods[key1][key2][key3];
+        }
+      });
+    });
+  });
+
+  return result;
+}
+
+/**
+ * Returns the basic day periods (am/pm)
+ */
+function getDayPeriodsAmPm(localeData) {
+  return getDayPeriods(localeData, ['am', 'pm']);
+}
+
+/**
+ * Returns the extra day periods (without am/pm)
+ */
+function getDayPeriodsNoAmPm(localeData) {
+  return getDayPeriods(localeData, ['noon', 'midnight', 'morning1', 'morning2', 'afternoon1',
+    'afternoon2', 'evening1', 'evening2', 'night1', 'night2']);
+}
+
+/**
+ * Returns date-related translations for a locale
+ * @returns [ dayPeriodsFormat, dayPeriodsStandalone, daysFormat, dayStandalone, monthsFormat, monthsStandalone, eras ]
+ * each value: [ narrow, abbreviated, wide, short? ]
+ */
+function getDateTimeTranslations(localeData) {
+  const dayNames = localeData.main(`dates/calendars/gregorian/days`);
+  const monthNames = localeData.main(`dates/calendars/gregorian/months`);
+  const erasNames = localeData.main(`dates/calendars/gregorian/eras`);
+  const dayPeriods = getDayPeriodsAmPm(localeData);
+
+  const dayPeriodsFormat = removeDuplicates([
+    objectValues(dayPeriods.format.narrow),
+    objectValues(dayPeriods.format.abbreviated),
+    objectValues(dayPeriods.format.wide)
+  ]);
+
+  const dayPeriodsStandalone = removeDuplicates([
+    objectValues(dayPeriods['stand-alone'].narrow),
+    objectValues(dayPeriods['stand-alone'].abbreviated),
+    objectValues(dayPeriods['stand-alone'].wide)
+  ]);
+
+  const daysFormat = removeDuplicates([
+    objectValues(dayNames.format.narrow),
+    objectValues(dayNames.format.abbreviated),
+    objectValues(dayNames.format.wide),
+    objectValues(dayNames.format.short)
+  ]);
+
+  const daysStandalone = removeDuplicates([
+    objectValues(dayNames['stand-alone'].narrow),
+    objectValues(dayNames['stand-alone'].abbreviated),
+    objectValues(dayNames['stand-alone'].wide),
+    objectValues(dayNames['stand-alone'].short)
+  ]);
+
+  const monthsFormat = removeDuplicates([
+    objectValues(monthNames.format.narrow),
+    objectValues(monthNames.format.abbreviated),
+    objectValues(monthNames.format.wide)
+  ]);
+
+  const monthsStandalone = removeDuplicates([
+    objectValues(monthNames['stand-alone'].narrow),
+    objectValues(monthNames['stand-alone'].abbreviated),
+    objectValues(monthNames['stand-alone'].wide)
+  ]);
+
+  const eras = removeDuplicates([
+    [erasNames.eraNarrow['0'], erasNames.eraNarrow['1']],
+    [erasNames.eraAbbr['0'], erasNames.eraAbbr['1']],
+    [erasNames.eraNames['0'], erasNames.eraNames['1']]
+  ]);
+
+  const dateTimeTranslations = [
+    ...removeDuplicates([dayPeriodsFormat, dayPeriodsStandalone]),
+    ...removeDuplicates([daysFormat, daysStandalone]),
+    ...removeDuplicates([monthsFormat, monthsStandalone]),
+    eras
+  ];
+
+  return dateTimeTranslations;
+}
+
+/**
+ * Returns date, time and dateTime formats for a locale
+ * @returns [dateFormats, timeFormats, dateTimeFormats]
+ * each format: [ short, medium, long, full ]
+ */
+function getDateTimeFormats(localeData) {
+  function getFormats(data) {
+    return removeDuplicates([
+      data.short._value || data.short,
+      data.medium._value || data.medium,
+      data.long._value || data.long,
+      data.full._value || data.full
+    ]);
+  }
+
+  const dateFormats = localeData.main('dates/calendars/gregorian/dateFormats');
+  const timeFormats = localeData.main('dates/calendars/gregorian/timeFormats');
+  const dateTimeFormats = localeData.main('dates/calendars/gregorian/dateTimeFormats');
+
+  return [
+    getFormats(dateFormats),
+    getFormats(timeFormats),
+    getFormats(dateTimeFormats)
+  ];
+}
+
+/**
+ * Returns day period rules for a locale
+ * @returns string[]
+ */
+function getDayPeriodRules(localeData) {
+  const dayPeriodRules = localeData.get(`supplemental/dayPeriodRuleSet/${localeData.attributes.language}`);
+  const rules = {};
+  if (dayPeriodRules) {
+    Object.keys(dayPeriodRules).forEach(key => {
+      if (dayPeriodRules[key]._at) {
+        rules[key] = dayPeriodRules[key]._at;
+      } else {
+        rules[key] = [dayPeriodRules[key]._from, dayPeriodRules[key]._before];
+      }
+    });
+  }
+
+  return rules;
+}
+
+/**
+ * Returns the first day of the week, based on US week days
+ * @returns number
+ */
+function getFirstDayOfWeek(localeData) {
+  return WEEK_DAYS.indexOf(localeData.supplemental.weekData.firstDay());
+}
+
+/**
+ * Returns week-end range for a locale, based on US week days
+ * @returns [number, number]
+ */
+function getWeekendRange(localeData) {
+  const startDay =
+    localeData.get(`supplemental/weekData/weekendStart/${localeData.attributes.territory}`) ||
+    localeData.get('supplemental/weekData/weekendStart/001');
+  const endDay =
+    localeData.get(`supplemental/weekData/weekendEnd/${localeData.attributes.territory}`) ||
+    localeData.get('supplemental/weekData/weekendEnd/001');
+  return [WEEK_DAYS.indexOf(startDay), WEEK_DAYS.indexOf(endDay)];
+}
+
+/**
+ * Returns dateTime data for a locale
+ * @returns [ firstDayOfWeek, weekendRange, formats ]
+ */
+function getDateTimeSettings(localeData) {
+  return [getFirstDayOfWeek(localeData), getWeekendRange(localeData), ...getDateTimeFormats(localeData)];
+}
+
+/**
+ * Returns the number symbols and formats for a locale
+ * @returns [ symbols, formats ]
+ * symbols: [ decimal, group, list, percentSign, plusSign, minusSign, exponential, superscriptingExponent, perMille, infinity, nan, timeSeparator, currencyDecimal?, currencyGroup? ]
+ * formats: [ currency, decimal, percent, scientific ]
+ */
+function getNumberSettings(localeData) {
+  const decimalFormat = localeData.main('numbers/decimalFormats-numberSystem-latn/standard');
+  const percentFormat = localeData.main('numbers/percentFormats-numberSystem-latn/standard');
+  const scientificFormat = localeData.main('numbers/scientificFormats-numberSystem-latn/standard');
+  const currencyFormat = localeData.main('numbers/currencyFormats-numberSystem-latn/standard');
+  const symbols = localeData.main('numbers/symbols-numberSystem-latn');
+  const symbolValues = [
+    symbols.decimal,
+    symbols.group,
+    symbols.list,
+    symbols.percentSign,
+    symbols.plusSign,
+    symbols.minusSign,
+    symbols.exponential,
+    symbols.superscriptingExponent,
+    symbols.perMille,
+    symbols.infinity,
+    symbols.nan,
+    symbols.timeSeparator,
+  ];
+
+  if (symbols.currencyDecimal || symbols.currencyGroup) {
+    symbolValues.push(symbols.currencyDecimal);
+  }
+
+  if (symbols.currencyGroup) {
+    symbolValues.push(symbols.currencyGroup);
+  }
+
+  return [
+    symbolValues,
+    [decimalFormat, percentFormat, currencyFormat, scientificFormat]
+  ];
+}
+
+/**
+ * Returns the currency symbol and name for a locale
+ * @returns [ symbol, name ]
+ */
+function getCurrencySettings(locale, localeData) {
+  const currencyInfo = localeData.main(`numbers/currencies`);
+  let currentCurrency = '';
+
+  // find the currency currently used in this country
+  const currencies =
+    localeData.get(`supplemental/currencyData/region/${localeData.attributes.territory}`) ||
+    localeData.get(`supplemental/currencyData/region/${localeData.attributes.language.toUpperCase()}`);
+
+  if (currencies) {
+    currencies.some(currency => {
+      const keys = Object.keys(currency);
+      return keys.some(key => {
+        if (currency[key]._from && !currency[key]._to) {
+          return currentCurrency = key;
+        }
+      });
+    });
+
+    if (!currentCurrency) {
+      throw new Error(`Unable to find currency for locale "${locale}"`);
+    }
+  }
+
+  let currencySettings = [undefined, undefined];
+
+  if (currentCurrency) {
+    currencySettings = [currencyInfo[currentCurrency].symbol, currencyInfo[currentCurrency].displayName];
+  }
+
+  return currencySettings;
+}
+
+/**
+ * Transforms a string into a regexp
+ */
+function toRegExp(s) {
+  return new RegExp(s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1'), 'g');
+}
+
+/**
+ * Returns the plural function for a locale
+ * todo(ocombe): replace "cldr" extractPluralRuleFunction with our own extraction using "CldrJS"
+ * because the 2 libs can become out of sync if they use different versions of the cldr database
+ */
+function getPluralFunction(locale) {
+  let fn = cldr.extractPluralRuleFunction(locale).toString();
+
+  if (fn === EMPTY_RULE) {
+    fn = DEFAULT_RULE;
+  }
+
+  fn = fn
+    .replace(
+      toRegExp('function anonymous(n\n/*``*/) {\n'),
+      'function plural(n: number): number {\n  ')
+    .replace(toRegExp('var'), 'let')
+    .replace(toRegExp('if(typeof n==="string")n=parseInt(n,10);'), '')
+    .replace(toRegExp('\n}'), ';\n}');
+
+  // The replacement values must match the `Plural` enum from common.
+  // We do not use the enum directly to avoid depending on that package.
+  return fn
+    .replace(toRegExp('"zero"'), ' 0')
+    .replace(toRegExp('"one"'), ' 1')
+    .replace(toRegExp('"two"'), ' 2')
+    .replace(toRegExp('"few"'), ' 3')
+    .replace(toRegExp('"many"'), ' 4')
+    .replace(toRegExp('"other"'), ' 5');
+}
+
+/**
+ * Return an array of values from an object
+ */
+function objectValues(obj) {
+  return Object.keys(obj).map(key => obj[key]);
+}
+
+/**
+ * To create smaller locale files, we remove duplicated data.
+ * To be make this work we need to store similar data in arrays, if some value in an array
+ * is undefined, we can take the previous defined value instead, because it means that it has
+ * been deduplicated.
+ * e.g.: [x, y, undefined, z, undefined, undefined]
+ * The first undefined is equivalent to y, the second and third are equivalent to z
+ * Note that the first value in an array is always defined.
+ *
+ * Also since we need to know which data is assumed similar, it is important that we store those
+ * similar data in arrays to mark the delimitation between values that have different meanings
+ * (e.g. months and days).
+ *
+ * For further size improvements, "undefined" values will be replaced by a constant in the arrays
+ * as the last step of the file generation (in generateLocale and generateLocaleExtra).
+ * e.g.: [x, y, undefined, z, undefined, undefined] will be [x, y, u, z, u, u]
+ */
+function removeDuplicates(data) {
+  const dedup = [data[0]];
+  for(let i = 1; i < data.length; i++) {
+    if (stringify(data[i]) !== stringify(data[i - 1])) {
+      dedup.push(data[i]);
+    } else {
+      dedup.push(undefined);
+    }
+  }
+  return dedup;
+}
+
+module.exports.I18N_FOLDER = I18N_FOLDER;
+module.exports.I18N_DATA_FOLDER = I18N_DATA_FOLDER;
+module.exports.RELATIVE_I18N_DATA_FOLDER = RELATIVE_I18N_DATA_FOLDER;
+module.exports.HEADER = HEADER;
diff --git a/tools/gulp-tasks/cldr/util.js b/tools/gulp-tasks/cldr/util.js
new file mode 100644
index 000000000000..692f051560c6
--- /dev/null
+++ b/tools/gulp-tasks/cldr/util.js
@@ -0,0 +1,179 @@
+// tslint:disable:file-header
+
+/**
+ * Like JSON.stringify, but without double quotes around keys, and without null instead of undefined
+ * values
+ * Based on https://github.com/json5/json5/blob/master/lib/json5.js
+ * Use option "quoteKeys" to preserve quotes for keys
+ */
+module.exports.stringify = function(obj, quoteKeys) {
+  var getReplacedValueOrUndefined = function(holder, key) {
+    var value = holder[key];
+
+    // Replace the value with its toJSON value first, if possible
+    if (value && value.toJSON && typeof value.toJSON === 'function') {
+      value = value.toJSON();
+    }
+
+    return value;
+  };
+
+  function isWordChar(c) {
+    return (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9') ||
+        c === '_' || c === '$';
+  }
+
+  function isWordStart(c) {
+    return (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || c === '_' || c === '$';
+  }
+
+  function isWord(key) {
+    if (typeof key !== 'string') {
+      return false;
+    }
+    if (!isWordStart(key[0])) {
+      return false;
+    }
+    var i = 1, length = key.length;
+    while (i < length) {
+      if (!isWordChar(key[i])) {
+        return false;
+      }
+      i++;
+    }
+    return true;
+  }
+
+  // polyfills
+  function isArray(obj) {
+    if (Array.isArray) {
+      return Array.isArray(obj);
+    } else {
+      return Object.prototype.toString.call(obj) === '[object Array]';
+    }
+  }
+
+  function isDate(obj) { return Object.prototype.toString.call(obj) === '[object Date]'; }
+
+  var objStack = [];
+  function checkForCircular(obj) {
+    for (var i = 0; i < objStack.length; i++) {
+      if (objStack[i] === obj) {
+        throw new TypeError('Converting circular structure to JSON');
+      }
+    }
+  }
+
+  // Copied from Crokford's implementation of JSON
+  // See
+  // https://github.com/douglascrockford/JSON-js/blob/e39db4b7e6249f04a195e7dd0840e610cc9e941e/json2.js#L195
+  // Begin
+  var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+    escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+    meta = { // table of character substitutions
+      '\b': '\\b',
+      '\t': '\\t',
+      '\n': '\\n',
+      '\f': '\\f',
+      '\r': '\\r',
+      '"' : '\\"',
+      '\\': '\\\\'
+    };
+  function escapeString(str, keepQuotes) {
+    // If the string contains no control characters, no quote characters, and no
+    // backslash characters, then we can safely slap some quotes around it.
+    // Otherwise we must also replace the offending characters with safe escape
+    // sequences.
+    escapable.lastIndex = 0;
+    return escapable.test(str) && !keepQuotes ? '"' + str.replace(escapable, function(a) {
+      var c = meta[a];
+      return typeof c === 'string' ? c : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+    }) + '"' : '"' + str + '"';
+  }
+  // End
+
+  function internalStringify(holder, key) {
+    var buffer, res;
+
+    // Replace the value, if necessary
+    var obj_part = getReplacedValueOrUndefined(holder, key);
+
+    if (obj_part && !isDate(obj_part)) {
+      // unbox objects
+      // don't unbox dates, since will turn it into number
+      obj_part = obj_part.valueOf();
+    }
+    switch (typeof obj_part) {
+      case 'boolean':
+        return obj_part.toString();
+
+      case 'number':
+        if (isNaN(obj_part) || !isFinite(obj_part)) {
+          return 'null';
+        }
+        return obj_part.toString();
+
+      case 'string':
+        return escapeString(obj_part.toString());
+
+      case 'object':
+        if (obj_part === null) {
+          return 'null';
+        } else if (isArray(obj_part)) {
+          checkForCircular(obj_part);
+          buffer = '[';
+          objStack.push(obj_part);
+
+          for (var i = 0; i < obj_part.length; i++) {
+            res = internalStringify(obj_part, i);
+            if (res === null) {
+              buffer += 'null';
+            } /* else if (typeof res === 'undefined') {  // modified to support empty array values
+              buffer += '';
+            }*/ else {
+              buffer += res;
+            }
+            if (i < obj_part.length - 1) {
+              buffer += ',';
+            }
+          }
+          objStack.pop();
+          buffer += ']';
+        } else {
+          checkForCircular(obj_part);
+          buffer = '{';
+          var nonEmpty = false;
+          objStack.push(obj_part);
+          for (var prop in obj_part) {
+            if (obj_part.hasOwnProperty(prop)) {
+              var value = internalStringify(obj_part, prop, false);
+              if (typeof value !== 'undefined' && value !== null) {
+                nonEmpty = true;
+                key = isWord(prop) && !quoteKeys ? prop : escapeString(prop, quoteKeys);
+                buffer += key + ':' + value + ',';
+              }
+            }
+          }
+          objStack.pop();
+          if (nonEmpty) {
+            buffer = buffer.substring(0, buffer.length - 1) + '}';
+          } else {
+            buffer = '{}';
+          }
+        }
+        return buffer;
+      default:
+        // functions and undefined should be ignored
+        return undefined;
+    }
+  }
+
+  // special case...when undefined is used inside of
+  // a compound object/array, return null.
+  // but when top-level, return undefined
+  var topLevelHolder = {'': obj};
+  if (obj === undefined) {
+    return getReplacedValueOrUndefined(topLevelHolder, '', true);
+  }
+  return internalStringify(topLevelHolder, '');
+};
diff --git a/tools/gulp-tasks/format.js b/tools/gulp-tasks/format.js
new file mode 100644
index 000000000000..1ca2f2a9aab1
--- /dev/null
+++ b/tools/gulp-tasks/format.js
@@ -0,0 +1,49 @@
+/**
+ * @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 {I18N_FOLDER, I18N_DATA_FOLDER} = require('./cldr/extract');
+
+// clang-format entry points
+const srcsToFmt = [
+  'packages/**/*.{js,ts}',
+  'modules/benchmarks/**/*.{js,ts}',
+  'modules/e2e_util/**/*.{js,ts}',
+  'modules/playground/**/*.{js,ts}',
+  'tools/**/*.{js,ts}',
+  '!tools/public_api_guard/**/*.d.ts',
+  './*.{js,ts}',
+  '!**/node_modules/**',
+  '!**/dist/**',
+  '!**/built/**',
+  '!shims_for_IE.js',
+  `!${I18N_DATA_FOLDER}/**/*.{js,ts}`,
+  `!${I18N_FOLDER}/available_locales.ts`,
+  `!${I18N_FOLDER}/currencies.ts`,
+  `!${I18N_FOLDER}/locale_en.ts`,
+  '!tools/gulp-tasks/cldr/extract.js',
+  '!tools/ts-api-guardian/test/fixtures/**',
+];
+
+module.exports = {
+  // Check source code for formatting errors (clang-format)
+  enforce: (gulp) => () => {
+    const format = require('gulp-clang-format');
+    const clangFormat = require('clang-format');
+    return gulp.src(srcsToFmt).pipe(
+        format.checkFormat('file', clangFormat, {verbose: true, fail: true}));
+  },
+
+  // Format the source code with clang-format (see .clang-format)
+  format: (gulp) => () => {
+    const format = require('gulp-clang-format');
+    const clangFormat = require('clang-format');
+    return gulp.src(srcsToFmt, {base: '.'})
+        .pipe(format.format('file', clangFormat))
+        .pipe(gulp.dest('.'));
+  }
+};
diff --git a/tools/gulp-tasks/lint.js b/tools/gulp-tasks/lint.js
new file mode 100644
index 000000000000..ddc1ba05742c
--- /dev/null
+++ b/tools/gulp-tasks/lint.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
+ */
+
+// Check the coding standards and programming errors
+module.exports = (gulp) => () => {
+  const tslint = require('gulp-tslint');
+  // Built-in rules are at https://palantir.github.io/tslint/rules/
+  const path = require('path');
+  return gulp
+      .src([
+        // TODO(vicb): add .js files when supported
+        // see https://github.com/palantir/tslint/pull/1515
+        './modules/**/*.ts',
+        './modules/**/*.js',
+        './packages/**/*.ts',
+        './packages/**/*.js',
+        './tools/**/*.ts',
+        './tools/**/*.js',
+        './*.ts',
+
+        // Ignore node_modules directories
+        '!**/node_modules/**',
+
+        // Ignore built files directories
+        '!**/built/**',
+        '!**/dist/**',
+
+        // Ignore special files
+        '!**/*.externs.js',
+
+        // Ignore generated files due to lack of copyright header
+        // TODO(alfaproject): make generated files lintable
+        '!**/*.d.ts',
+        '!**/*.ngfactory.ts',
+      ])
+      .pipe(tslint({
+        configuration: path.resolve(__dirname, '../../tslint.json'),
+        formatter: 'prose',
+      }))
+      .pipe(tslint.report({emitError: true}));
+};
diff --git a/tools/gulp-tasks/platform-script-path.js b/tools/gulp-tasks/platform-script-path.js
new file mode 100644
index 000000000000..ec7af084fa9e
--- /dev/null
+++ b/tools/gulp-tasks/platform-script-path.js
@@ -0,0 +1,13 @@
+/**
+ * @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
+ */
+
+// returns the script path for the current platform
+module.exports = function platformScriptPath(path) {
+  const os = require('os');
+  return /^win/.test(os.platform()) ? `${path}.cmd` : path;
+};
diff --git a/tools/gulp-tasks/serve.js b/tools/gulp-tasks/serve.js
new file mode 100644
index 000000000000..0c0dda239a12
--- /dev/null
+++ b/tools/gulp-tasks/serve.js
@@ -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
+ */
+
+module.exports = {
+
+  // Serve the built files
+  default: (gulp) => () => {
+    const connect = require('gulp-connect');
+    const cors = require('cors');
+    const path = require('path');
+
+    connect.server({
+      root: path.resolve(__dirname, '../../dist'),
+      port: 8000,
+      livereload: false,
+      open: false,
+      middleware: (connect, opt) => [cors()],
+    });
+  },
+
+  // Serve the examples
+  examples: (gulp) => () => {
+    const connect = require('gulp-connect');
+    const cors = require('cors');
+    const path = require('path');
+
+    connect.server({
+      root: path.resolve(__dirname, '../../dist/examples'),
+      port: 8001,
+      livereload: false,
+      open: false,
+      middleware: (connect, opt) => [cors()],
+    });
+  }
+
+};
diff --git a/tools/gulp-tasks/source-map-test.js b/tools/gulp-tasks/source-map-test.js
new file mode 100644
index 000000000000..8f7af40c38e6
--- /dev/null
+++ b/tools/gulp-tasks/source-map-test.js
@@ -0,0 +1,31 @@
+/**
+ * @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 fs = require('fs');
+const path = require('path');
+const sourceMapTest = require('../source-map-test');
+
+const excludedPackages = ['bazel', 'benchpress', 'compiler-cli', 'language-service'];
+
+module.exports = (gulp) => () => {
+  const packageDir = path.resolve(process.cwd(), 'dist/packages-dist/');
+  const packages =
+      fs.readdirSync(packageDir).filter(package => excludedPackages.indexOf(package) === -1);
+
+  packages.forEach(package => {
+    if (sourceMapTest(package).length) {
+      process.exit(1);
+    }
+  });
+
+  if (!packages.length) {
+    // tslint:disable-next-line:no-console
+    console.log('No packages found in packages-dist. Unable to run source map test.');
+    process.exit(1);
+  }
+};
diff --git a/tools/gulp-tasks/tools-build.js b/tools/gulp-tasks/tools-build.js
new file mode 100644
index 000000000000..a3bbeb56ca6d
--- /dev/null
+++ b/tools/gulp-tasks/tools-build.js
@@ -0,0 +1,23 @@
+/**
+ * @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
+ */
+
+function tsc(projectPath, done) {
+  const path = require('path');
+  const platformScriptPath = require('./platform-script-path');
+  const childProcess = require('child_process');
+
+  childProcess
+      .spawn(
+          path.join(__dirname, platformScriptPath('../../node_modules/.bin/tsc')),
+          ['-p', path.join(__dirname, '../..', projectPath)], {stdio: 'inherit'})
+      .on('close', done);
+}
+
+module.exports = (gulp) => (done) => {
+  tsc('tools/', done);
+};
diff --git a/tools/gulp-tasks/validate-commit-message.js b/tools/gulp-tasks/validate-commit-message.js
new file mode 100644
index 000000000000..0b202e4a24ca
--- /dev/null
+++ b/tools/gulp-tasks/validate-commit-message.js
@@ -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
+ */
+
+
+// tslint:disable:no-console
+module.exports = (gulp) => () => {
+  const validateCommitMessage = require('../validate-commit-message');
+  const shelljs = require('shelljs');
+
+  let baseBranch = 'master';
+  const currentVersion = require('semver').parse(require('../../package.json').version);
+  const baseHead =
+      shelljs.exec(`git ls-remote --heads origin ${currentVersion.major}.${currentVersion.minor}.*`)
+          .trim()
+          .split('\n')
+          .pop();
+  if (baseHead) {
+    const match = /refs\/heads\/(.+)/.exec(baseHead);
+    baseBranch = match && match[1] || baseBranch;
+  }
+
+  // We need to fetch origin explicitly because it might be stale.
+  // I couldn't find a reliable way to do this without fetch.
+  result = shelljs.exec(
+      `git fetch origin ${baseBranch} && git log --reverse --format=%s HEAD ^origin/${baseBranch}`);
+
+  if (result.code) {
+    console.log(result.stderr);
+    process.exit(1);
+  }
+
+  const commitsByLine = result.trim().split(/\n/).filter(line => line != '');
+
+  console.log(`Examining ${commitsByLine.length} commits between HEAD and ${baseBranch}`);
+
+  if (commitsByLine.length == 0) {
+    console.log(`There are zero new commits between this HEAD and ${baseBranch}`);
+  }
+
+  const someCommitsInvalid = !commitsByLine.every(validateCommitMessage);
+
+  if (someCommitsInvalid) {
+    console.log('Please fix the failing commit messages before continuing...');
+    console.log(
+        'Commit message guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-guidelines');
+    process.exit(1);
+  }
+};
diff --git a/tools/http-server/BUILD.bazel b/tools/http-server/BUILD.bazel
new file mode 100644
index 000000000000..cea258086907
--- /dev/null
+++ b/tools/http-server/BUILD.bazel
@@ -0,0 +1 @@
+# Marker this directory is a Bazel package.
diff --git a/tools/http-server/README.md b/tools/http-server/README.md
new file mode 100644
index 000000000000..f85aa7735a81
--- /dev/null
+++ b/tools/http-server/README.md
@@ -0,0 +1,11 @@
+# http-server
+
+This is a simple Bazel wrapper around the http-server npm package.
+
+A typical frontend project is served by a specific server.
+For Angular's example applications, our needs are simple so we can just use http-server.
+Real projects might need history-server (for router support) or even better a full-featured production server like express.
+
+We modify http-server to support serving Brotli-compressed files, which end with a `.br` extension.
+This is equivalent to gzip-compression support.
+See https://github.com/alexeagle/http-server/commits/master which points to a modified ecstatic library.
diff --git a/tools/http-server/http_server.bzl b/tools/http-server/http_server.bzl
new file mode 100644
index 000000000000..7181f6b2c77d
--- /dev/null
+++ b/tools/http-server/http_server.bzl
@@ -0,0 +1,20 @@
+"""Simple Bazel wrapper around npm http-server package.
+
+See https://www.npmjs.com/package/http-server
+"""
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary")
+
+def http_server(templated_args = [], **kwargs):
+    # By default, we pass an argument pointing the http server to the
+    # package of the caller.
+    # This assumes there is an index.html in the package directory.
+    if not templated_args:
+        templated_args = [native.package_name()]
+
+    nodejs_binary(
+        node_modules = "@http-server_runtime_deps//:node_modules",
+        entry_point = "http-server/bin/http-server",
+        templated_args = templated_args,
+        **kwargs
+    )
diff --git a/tools/http-server/package.json b/tools/http-server/package.json
new file mode 100644
index 000000000000..43be8ec75b44
--- /dev/null
+++ b/tools/http-server/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "http_server",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "github:alexeagle/http-server#97205e945b69091606ed83aa0c8489e9ce65d282"
+  }
+}
diff --git a/tools/http-server/yarn.lock b/tools/http-server/yarn.lock
new file mode 100644
index 000000000000..2a3bed829209
--- /dev/null
+++ b/tools/http-server/yarn.lock
@@ -0,0 +1,125 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+async@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+colors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+
+corser@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
+
+debug@^2.2.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+"ecstatic@github:alexeagle/node-ecstatic#833f734497f72f8cf396f162f46ad48c56ddc4ca":
+  version "3.2.0"
+  resolved "https://codeload.github.com/alexeagle/node-ecstatic/tar.gz/833f734497f72f8cf396f162f46ad48c56ddc4ca"
+  dependencies:
+    he "^1.1.1"
+    mime "^1.4.1"
+    minimist "^1.1.0"
+    url-join "^2.0.2"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+he@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+
+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@github:alexeagle/http-server#97205e945b69091606ed83aa0c8489e9ce65d282":
+  version "0.11.1"
+  resolved "https://codeload.github.com/alexeagle/http-server/tar.gz/97205e945b69091606ed83aa0c8489e9ce65d282"
+  dependencies:
+    colors "1.0.3"
+    corser "~2.0.0"
+    ecstatic "github:alexeagle/node-ecstatic#833f734497f72f8cf396f162f46ad48c56ddc4ca"
+    http-proxy "^1.8.1"
+    opener "~1.4.0"
+    optimist "0.6.x"
+    portfinder "^1.0.13"
+    union "~0.4.3"
+
+mime@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@^1.1.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"
+
+mkdirp@0.5.x:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+opener@~1.4.0:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
+
+optimist@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+portfinder@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
+qs@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404"
+
+requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+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"
+
+url-join@^2.0.2:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
diff --git a/tools/jasmine-seed-generator.js b/tools/jasmine-seed-generator.js
new file mode 100644
index 000000000000..aefda38cf68c
--- /dev/null
+++ b/tools/jasmine-seed-generator.js
@@ -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
+ */
+
+'use strict';
+
+// Generate a "random" seed, suitable to be used for pseudo-randomizing jasmine tests.
+module.exports = {
+  generateSeed: caller => {
+    const seed = process.env.JASMINE_RANDOM_SEED || String(Math.random()).slice(-5);
+    // tslint:disable-next-line: no-console
+    console.log(`[${caller}] Jasmine random seed: ${seed}`);
+    return seed;
+  },
+};
diff --git a/tools/jsconfig.json b/tools/jsconfig.json
new file mode 100644
index 000000000000..c9abe59ac22f
--- /dev/null
+++ b/tools/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs"
+  }
+}
+
diff --git a/tools/ng_setup_workspace.bzl b/tools/ng_setup_workspace.bzl
new file mode 100644
index 000000000000..e73f9b250afd
--- /dev/null
+++ b/tools/ng_setup_workspace.bzl
@@ -0,0 +1,245 @@
+# 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
+
+"Install angular source dependencies"
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "yarn_install")
+load("@angular//packages/bazel/src:ng_setup_workspace.bzl", _ng_setup_workspace = "ng_setup_workspace")
+
+def ng_setup_workspace():
+    """This repository rule should be called from your WORKSPACE file.
+
+    It creates some additional Bazel external repositories that are used internally
+    to build angular
+    """
+    yarn_install(
+        name = "angular_deps",
+        package_json = "@angular//:package.json",
+        yarn_lock = "@angular//:yarn.lock",
+        data = ["@angular//:tools/yarn/check-yarn.js", "@angular//:tools/postinstall-patches.js"],
+        node_modules_filegroup = """
+filegroup(
+    name = "node_modules",
+    srcs = glob(["/".join([
+        "node_modules",
+        pkg,
+        "**",
+        ext,
+    ]) for pkg in [
+        "adm-zip",
+        "ajv",
+        "angular",
+        "angular-1.5",
+        "angular-1.6",
+        "angular-mocks",
+        "angular-mocks-1.5",
+        "angular-mocks-1.6",
+        "anymatch",
+        "arr-diff",
+        "arr-flatten",
+        "arr-union",
+        "array-unique",
+        "asn1",
+        "assert-plus",
+        "assign-symbols",
+        "async-each",
+        "asynckit",
+        "atob",
+        "aws-sign2",
+        "aws4",
+        "balanced-match",
+        "base",
+        "base64-js",
+        "binary-extensions",
+        "blocking-proxy",
+        "brace-expansion",
+        "braces",
+        "bytebuffer",
+        "cache-base",
+        "caseless",
+        "chokidar",
+        "class-utils",
+        "co",
+        "collection-visit",
+        "convert-source-map",
+        "combined-stream",
+        "component-emitter",
+        "concat-map",
+        "copy-descriptor",
+        "core-util-is",
+        "debug",
+        "decode-uri-component",
+        "define-property",
+        "delayed-stream",
+        "domino",
+        "expand-brackets",
+        "expand-range",
+        "extend",
+        "extend-shallow",
+        "extglob",
+        "extsprintf",
+        "fast-deep-equal",
+        "fast-json-stable-stringify",
+        "filename-regex",
+        "fill-range",
+        "for-in",
+        "for-own",
+        "forever-agent",
+        "form-data",
+        "fragment-cache",
+        "fs.realpath",
+        "get-value",
+        "glob",
+        "glob-base",
+        "glob-parent",
+        "graceful-fs",
+        "hammerjs",
+        "har-schema",
+        "har-validator",
+        "has-value",
+        "has-values",
+        "http-signature",
+        "https-proxy-agent",
+        "inflight",
+        "inherits",
+        "is-accessor-descriptor",
+        "is-binary-path",
+        "is-buffer",
+        "is-data-descriptor",
+        "is-descriptor",
+        "is-dotfile",
+        "is-equal-shallow",
+        "is-extendable",
+        "is-extglob",
+        "is-glob",
+        "is-number",
+        "is-plain-object",
+        "is-posix-bracket",
+        "is-primitive",
+        "is-typedarray",
+        "is-windows",
+        "isarray",
+        "isobject",
+        "isstream",
+        "jasmine",
+        "jasmine-core",
+        "jasminewd2",
+        "json-schema",
+        "json-schema-traverse",
+        "json-stable-stringify",
+        "json-stringify-safe",
+        "jsprim",
+        "kind-of",
+        "long",
+        "lru-cache",
+        "magic-string",
+        "map-cache",
+        "map-visit",
+        "math-random",
+        "micromatch",
+        "mime-db",
+        "mime-types",
+        "minimatch",
+        "minimist",
+        "mixin-deep",
+        "mock-fs",
+        "nanomatch",
+        "normalize-path",
+        "oauth-sign",
+        "object.omit",
+        "object.pick",
+        "object-copy",
+        "object-visit",
+        "once",
+        "optimist",
+        "options",
+        "os-tmpdir",
+        "parse-glob",
+        "pascalcase",
+        "path-dirname",
+        "path-is-absolute",
+        "performance-now",
+        "posix-character-classes",
+        "preserve",
+        "process-nextick-args",
+        "protobufjs",
+        "protractor",
+        "qs",
+        "randomatic",
+        "readable-stream",
+        "readdirp",
+        "reflect-metadata",
+        "regex-cache",
+        "regex-not",
+        "remove-trailing-separator",
+        "repeat-element",
+        "repeat-string",
+        "request",
+        "ret",
+        "rimraf",
+        "safe-buffer",
+        "safe-regex",
+        "safer-buffer",
+        "sax",
+        "semver",
+        "set-immediate-shim",
+        "set-value",
+        "shelljs",
+        "sigmund",
+        "snapdragon",
+        "snapdragon-node",
+        "snapdragon-util",
+        "source-map",
+        "source-map-resolve",
+        "source-map-support",
+        "source-map-url",
+        "sourcemap-codec",
+        "split-string",
+        "sshpk",
+        "static-extend",
+        "stringstream",
+        "tmp",
+        "to-object-path",
+        "to-regex",
+        "to-regex-range",
+        "tough-cookie",
+        "tsickle",
+        "tslib",
+        "tsutils",
+        "tunnel-agent",
+        "typescript",
+        "union-value",
+        "unset-value",
+        "upath",
+        "uri-js",
+        "urix",
+        "use",
+        "util-deprecate",
+        "uuid",
+        "verror",
+        "webdriver-js-extender",
+        "webdriver-manager",
+        "wordwrap",
+        "wrappy",
+        "xhr2",
+        "xml2js",
+        "xmlbuilder",
+        "zone.js",
+        "@angular-devkit/core",
+        "@angular-devkit/schematics",
+        "@types",
+        "@webcomponents/custom-elements",
+    ] for ext in [
+        "*.js",
+        "*.json",
+        "*.d.ts",
+    ]] + [
+        "node_modules/protractor/**",
+        "node_modules/@schematics/angular/**",
+    ]))
+""",
+    )
+
+    _ng_setup_workspace()
diff --git a/tools/ngcontainer/Dockerfile b/tools/ngcontainer/Dockerfile
new file mode 100644
index 000000000000..273d28f485b6
--- /dev/null
+++ b/tools/ngcontainer/Dockerfile
@@ -0,0 +1,77 @@
+FROM circleci/node:8.9.2-browsers
+
+USER root
+
+###
+# Java install
+# See https://github.com/docker-library/openjdk/blob/415b0cc42d91ef5d70597d8a24d942967728242b/8-jdk/Dockerfile
+# see https://bugs.debian.org/775775
+# and https://github.com/docker-library/java/issues/19#issuecomment-70546872
+RUN JAVA_DEBIAN_VERSION="8u131-b11-1~bpo8+1" \
+ && CA_CERTIFICATES_JAVA_VERSION="20161107~bpo8+1" \
+ && echo 'deb http://deb.debian.org/debian jessie-backports main' > /etc/apt/sources.list.d/jessie-backports.list \
+ && apt-get update \
+ && apt-get install -y \
+    openjdk-8-jre-headless="$JAVA_DEBIAN_VERSION" \
+    ca-certificates-java="$CA_CERTIFICATES_JAVA_VERSION" \
+ && rm -rf /var/lib/apt/lists/*
+
+###
+# Bazel install
+# See https://bazel.build/versions/master/docs/install-ubuntu.html#using-bazel-custom-apt-repository-recommended
+RUN BAZEL_VERSION="0.15.0" \
+ && wget -q -O - https://bazel.build/bazel-release.pub.gpg | apt-key add - \
+ && echo "deb [arch=amd64] http://storage.googleapis.com/bazel-apt stable jdk1.8" > /etc/apt/sources.list.d/bazel.list \
+ && apt-get update \
+ && apt-get install -y bazel=$BAZEL_VERSION \
+ && rm -rf /var/lib/apt/lists/*
+
+###
+# Brotli compression
+# Not available on backports so we have to pull from Debian 9
+# See https://packages.debian.org/search?keywords=brotli
+RUN echo "deb http://deb.debian.org/debian stretch main contrib" > /etc/apt/sources.list.d/stretch.list \
+ && apt-get update \
+ && apt-get install -y --no-install-recommends brotli/stretch
+
+###
+# Buildifier
+# BUILD file formatter
+# 'bazel clean --expunge' conserves size of the image
+RUN git clone https://github.com/bazelbuild/buildtools.git \
+ && (cd buildtools \
+  && bazel build //buildifier \
+  && cp bazel-bin/buildifier/linux_amd64_stripped/buildifier /usr/local/bin/ \
+  && bazel clean --expunge \
+  ) && rm -rf buildtools
+
+###
+# Skylint
+# .bzl file linter
+# Follows readme at https://github.com/bazelbuild/bazel/blob/master/site/docs/skylark/skylint.md#building-the-linter
+# 'bazel clean --expunge' conserves size of the image
+RUN git clone https://github.com/bazelbuild/bazel.git \
+ && (cd bazel \
+  && bazel build //src/tools/skylark/java/com/google/devtools/skylark/skylint:Skylint_deploy.jar \
+  && cp bazel-bin/src/tools/skylark/java/com/google/devtools/skylark/skylint/Skylint_deploy.jar /usr/local/bin \
+  && bazel clean --expunge \
+  ) && rm -rf bazel
+
+USER circleci
+
+###
+# Fix up npm global installation
+# See https://docs.npmjs.com/getting-started/fixing-npm-permissions
+RUN mkdir ~/.npm-global \
+ && npm config set prefix '~/.npm-global' \
+ && echo "export PATH=~/.npm-global/bin:$PATH" >> ~/.profile
+
+###
+# This version of ChromeDriver works with the Chrome version included
+# in the circleci/*-browsers base image above.
+# This variable is intended to be used by passing it as an argument to
+# "postinstall": "webdriver-manager update ..."
+ENV CHROMEDRIVER_VERSION_ARG "--versions.chrome 2.33"
+
+WORKDIR /home/circleci
+ENTRYPOINT ["/bin/bash", "--login"]
diff --git a/tools/ngcontainer/README.md b/tools/ngcontainer/README.md
new file mode 100644
index 000000000000..1fef76f25693
--- /dev/null
+++ b/tools/ngcontainer/README.md
@@ -0,0 +1,52 @@
+# ngcontainer
+
+This docker container provides everything needed to build and test Angular applications:
+
+- node 8.9.2
+- npm 5.5.1
+- yarn 1.3.2
+- Java 8 (for Closure Compiler and Bazel)
+- Bazel build tool v0.15.0 - http://bazel.build
+- Google Chrome 63.0.3239.84
+- Mozilla Firefox 47.0.1
+- xvfb (virtual framebuffer) for headless testing
+- Brotli compression utility, making smaller files than gzip
+
+By using this, you avoid installation steps in your CI scripts and get a more consistent dev environment.
+
+## Example
+
+See https://github.com/angular/closure-demo/blob/master/.circleci/config.yml
+where this container is used in CircleCI.
+
+To run locally:
+
+```
+$ docker run -it --rm angular/ngcontainer
+```
+
+## Running tests
+
+Any program that needs to talk to a browser (eg. protractor) should be run under xvfb when executing on a headless machine like on CI. The nice way to factor this is to have your top-level test command which you run locally:
+
+```
+$ yarn test
+```
+
+Then in your CI configuration, you'd run
+
+```
+$ xvfb-run -a yarn test
+```
+
+## For Developers
+
+Install Docker on your machine in order to build/pull/push this image.
+
+Get the teamangular password from http://valentine and log in:
+
+`$ docker login`
+
+Publish a new version:
+
+`$ tools/ngcontainer/publish.sh [tag eg. 0.2.3]`
diff --git a/tools/ngcontainer/publish.sh b/tools/ngcontainer/publish.sh
new file mode 100755
index 000000000000..c3ee330f08bb
--- /dev/null
+++ b/tools/ngcontainer/publish.sh
@@ -0,0 +1,13 @@
+set -e
+
+TAG=$1
+if [ -z $TAG ]
+  then echo "usage: $0 [tag]"; exit 1
+fi
+
+docker build . -t angular/ngcontainer:$TAG
+docker tag angular/ngcontainer:$TAG angular/ngcontainer:latest
+docker push angular/ngcontainer:$TAG
+docker push angular/ngcontainer:latest
+git tag -a "ngcontainer_${TAG}" -m "published to docker"
+git push --tags
diff --git a/tools/npm/check-node-modules b/tools/npm/check-node-modules
index 09a146289279..dff539cda194 100755
--- a/tools/npm/check-node-modules
+++ b/tools/npm/check-node-modules
@@ -2,6 +2,11 @@
 
 var checkNpm = require('./check-node-modules.js');
 
-var purgeIfStale = (process.argv.indexOf('--purge') !== -1)
+var purgeIfStale = (process.argv.indexOf('--purge') !== -1);
+
+// check-node-modules will exit(1) if we don't need to install to short-circuit `npm install`
+// see .travis.yml's `install` block to see the reason for this
+var nodeModulesOK = checkNpm(true, purgeIfStale);
+
+process.exit( nodeModulesOK ? 0 : 1);
 
-checkNpm(true, purgeIfStale);
diff --git a/tools/npm/check-node-modules.js b/tools/npm/check-node-modules.js
index 2ab8100bb57a..d644741b3082 100755
--- a/tools/npm/check-node-modules.js
+++ b/tools/npm/check-node-modules.js
@@ -1,29 +1,32 @@
-"use strict";
+/**
+ * @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
+ */
+
+'use strict';
 
 var fs = require('fs');
 var path = require('path');
+var childProcess = require('child_process');
 
-var NPM_SHRINKWRAP_FILE = 'npm-shrinkwrap.json';
-var NPM_SHRINKWRAP_CACHED_FILE = 'node_modules/npm-shrinkwrap.cached.json';
-var FS_OPTS = {encoding: 'utf-8'};
 var PROJECT_ROOT = path.join(__dirname, '../../');
 
-
+// tslint:disable:no-console
 function checkNodeModules(logOutput, purgeIfStale) {
-  var nodeModulesOK = _checkCache(NPM_SHRINKWRAP_FILE, NPM_SHRINKWRAP_CACHED_FILE);
+  var yarnCheck = childProcess.spawnSync(
+      'yarn check --integrity', {shell: true, cwd: path.resolve(__dirname, '../..')});
 
+  var nodeModulesOK = yarnCheck.status === 0;
   if (nodeModulesOK) {
     if (logOutput) console.log(':-) npm dependencies are looking good!');
   } else {
     if (logOutput) console.error(':-( npm dependencies are stale or in an in unknown state!');
     if (purgeIfStale) {
       if (logOutput) console.log('    purging...');
-
-      var nodeModulesPath = path.join(PROJECT_ROOT, 'node_modules');
-
-      if (fs.existsSync(nodeModulesPath)) {
-        _deleteDir(nodeModulesPath);
-      }
+      _deleteDir(path.join(PROJECT_ROOT, 'node_modules'));
     }
   }
 
@@ -31,30 +34,16 @@ function checkNodeModules(logOutput, purgeIfStale) {
 }
 
 
-function _checkCache(markerFile, cacheMarkerFile) {
-  var absoluteMarkerFilePath = path.join(PROJECT_ROOT, markerFile);
-  var absoluteCacheMarkerFilePath = path.join(PROJECT_ROOT, cacheMarkerFile);
-
-
-  if (!fs.existsSync(absoluteCacheMarkerFilePath)) return false;
-
-  var markerContent = fs.readFileSync(absoluteMarkerFilePath, FS_OPTS);
-  var cacheMarkerContent = fs.readFileSync(absoluteCacheMarkerFilePath, FS_OPTS);
-
-  return markerContent == cacheMarkerContent;
-}
-
-
 /**
  * Custom implementation of recursive `rm` because we can't rely on the state of node_modules to
  * pull in existing module.
  */
 function _deleteDir(path) {
-  if( fs.existsSync(path) ) {
+  if (fs.existsSync(path)) {
     var subpaths = fs.readdirSync(path);
     subpaths.forEach(function(subpath) {
-      var curPath = path + "/" + subpath;
-      if(fs.lstatSync(curPath).isDirectory()) {
+      var curPath = path + '/' + subpath;
+      if (fs.lstatSync(curPath).isDirectory()) {
         _deleteDir(curPath);
       } else {
         fs.unlinkSync(curPath);
diff --git a/tools/npm/clean-shrinkwrap.js b/tools/npm/clean-shrinkwrap.js
deleted file mode 100755
index 40e3cd15a9d9..000000000000
--- a/tools/npm/clean-shrinkwrap.js
+++ /dev/null
@@ -1,38 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * this script is just a temporary solution to deal with the issue of npm outputting the npm
- * shrinkwrap file in an unstable manner.
- *
- * See: https://github.com/npm/npm/issues/3581
- */
-
-var _ = require('lodash');
-var sorted = require('sorted-object');
-var fs = require('fs');
-var path = require('path');
-
-
-function cleanModule(moduleRecord, name) {
-
-  // keep `resolve` properties for git dependencies, delete otherwise
-  delete moduleRecord.from;
-  if (!(moduleRecord.resolved && moduleRecord.resolved.match(/^git(\+[a-z]+)?:\/\//))) {
-    delete moduleRecord.resolved;
-  }
-
-  _.forEach(moduleRecord.dependencies, function(mod, name) {
-    cleanModule(mod, name);
-  });
-}
-
-
-console.log('Reading npm-shrinkwrap.json');
-var shrinkwrap = require('../../npm-shrinkwrap.json');
-
-console.log('Cleaning shrinkwrap object');
-cleanModule(shrinkwrap, shrinkwrap.name);
-
-var cleanShrinkwrapPath = path.join(__dirname, '..', '..', 'npm-shrinkwrap.clean.json');
-console.log('Writing cleaned to', cleanShrinkwrapPath);
-fs.writeFileSync(cleanShrinkwrapPath, JSON.stringify(sorted(shrinkwrap), null, 2) + "\n");
diff --git a/tools/npm/copy-npm-shrinkwrap b/tools/npm/copy-npm-shrinkwrap
deleted file mode 100755
index ad1fea788e97..000000000000
--- a/tools/npm/copy-npm-shrinkwrap
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/usr/bin/env node
-
-var fse = require('fs-extra');
-var path = require('path');
-
-var NPM_SHRINKWRAP_FILE = 'npm-shrinkwrap.json';
-var NPM_SHRINKWRAP_CACHED_FILE = 'node_modules/npm-shrinkwrap.cached.json';
-var PROJECT_ROOT = path.join(__dirname, '../../');
-
-process.chdir(PROJECT_ROOT);
-
-fse.copySync(NPM_SHRINKWRAP_FILE, NPM_SHRINKWRAP_CACHED_FILE);
diff --git a/tools/postinstall-patches.js b/tools/postinstall-patches.js
new file mode 100644
index 000000000000..68cb13623d1c
--- /dev/null
+++ b/tools/postinstall-patches.js
@@ -0,0 +1,43 @@
+/**
+ * @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
+ */
+
+try {
+  require.resolve('shelljs');
+} catch (e) {
+  // We are in an bazel managed external node_modules repository
+  // and the resolve has failed because node did not preserve the symlink
+  // when loading the script.
+  // This can be fixed using the --preserve-symlinks-main flag which
+  // is introduced in node 10.2.0
+  console.warn(
+      'Running postinstall-patches.js script in an external repository requires --preserve-symlinks-main node flag introduced in node 10.2.0');
+  process.exit(0);
+}
+
+const {set, cd, sed, rm} = require('shelljs');
+const path = require('path');
+const log = console.log;
+
+log('===== about to run the postinstall-patches.js script     =====');
+// fail on first error
+set('-e');
+// print commands as being executed
+set('-v');
+// jump to project root
+cd(path.join(__dirname, '../'));
+
+/* EXAMPLE PATCH:
+// https://github.com/ReactiveX/rxjs/pull/3302
+// make node_modules/rxjs compilable with Typescript 2.7
+// remove when we update to rxjs v6
+log('\n# patch: reactivex/rxjs#3302 make node_modules/rxjs compilable with Typescript 2.7');
+sed('-i', '(\'response\' in xhr)', '(\'response\' in (xhr as any))',
+    'node_modules/rxjs/src/observable/dom/AjaxObservable.ts');
+*/
+
+log('===== finished running the postinstall-patches.js script =====');
diff --git a/tools/public_api_guard/BUILD.bazel b/tools/public_api_guard/BUILD.bazel
new file mode 100644
index 000000000000..fbcae7fd1eca
--- /dev/null
+++ b/tools/public_api_guard/BUILD.bazel
@@ -0,0 +1,26 @@
+load("//tools/ts-api-guardian:index.bzl", "ts_api_guardian_test")
+
+[ts_api_guardian_test(
+    name = "%s_%s_api" % (
+        bundle[0],
+        bundle[1].replace("/", "_"),
+    ),
+    actual = "packages/%s/npm_package/%s.d.ts" % (
+        bundle[0],
+        bundle[1],
+    ),
+    data = glob([
+        "%s/**/*.d.ts" % bundle[0],
+    ]) + [
+        "//packages/%s:npm_package" % bundle[0],
+    ],
+    golden = "tools/public_api_guard/%s/%s.d.ts" % (
+        bundle[0],
+        bundle[1],
+    ),
+) for bundle in [b[:-len(".d.ts")].split("/", 1) for b in glob(
+    ["**/*.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.
+    exclude = ["compiler/*"],
+)]]
diff --git a/tools/public_api_guard/animations/animations.d.ts b/tools/public_api_guard/animations/animations.d.ts
new file mode 100644
index 000000000000..32965de7d611
--- /dev/null
+++ b/tools/public_api_guard/animations/animations.d.ts
@@ -0,0 +1,218 @@
+export declare function animate(timings: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null): AnimationAnimateMetadata;
+
+export declare function animateChild(options?: AnimateChildOptions | null): AnimationAnimateChildMetadata;
+
+export declare interface AnimateChildOptions extends AnimationOptions {
+    duration?: number | string;
+}
+
+export declare type AnimateTimings = {
+    duration: number;
+    delay: number;
+    easing: string | null;
+};
+
+export declare function animation(steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationReferenceMetadata;
+
+export interface AnimationAnimateChildMetadata extends AnimationMetadata {
+    options: AnimationOptions | null;
+}
+
+export interface AnimationAnimateMetadata extends AnimationMetadata {
+    styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null;
+    timings: string | number | AnimateTimings;
+}
+
+export interface AnimationAnimateRefMetadata extends AnimationMetadata {
+    animation: AnimationReferenceMetadata;
+    options: AnimationOptions | null;
+}
+
+export declare abstract class AnimationBuilder {
+    abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;
+}
+
+/** @experimental */
+export interface AnimationEvent {
+    disabled: boolean;
+    element: any;
+    fromState: string;
+    phaseName: string;
+    toState: string;
+    totalTime: number;
+    triggerName: string;
+}
+
+export declare abstract class AnimationFactory {
+    abstract create(element: any, options?: AnimationOptions): AnimationPlayer;
+}
+
+export interface AnimationGroupMetadata extends AnimationMetadata {
+    options: AnimationOptions | null;
+    steps: AnimationMetadata[];
+}
+
+export interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {
+    steps: AnimationStyleMetadata[];
+}
+
+export interface AnimationMetadata {
+    type: AnimationMetadataType;
+}
+
+export declare const enum AnimationMetadataType {
+    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
+}
+
+export declare interface AnimationOptions {
+    delay?: number | string;
+    params?: {
+        [name: string]: any;
+    };
+}
+
+export interface AnimationPlayer {
+    beforeDestroy?: () => any;
+    parentPlayer: AnimationPlayer | null;
+    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(position: any /** TODO #9100 */): void;
+}
+
+export interface AnimationQueryMetadata extends AnimationMetadata {
+    animation: AnimationMetadata | AnimationMetadata[];
+    options: AnimationQueryOptions | null;
+    selector: string;
+}
+
+export declare interface AnimationQueryOptions extends AnimationOptions {
+    limit?: number;
+    optional?: boolean;
+}
+
+export interface AnimationReferenceMetadata extends AnimationMetadata {
+    animation: AnimationMetadata | AnimationMetadata[];
+    options: AnimationOptions | null;
+}
+
+export interface AnimationSequenceMetadata extends AnimationMetadata {
+    options: AnimationOptions | null;
+    steps: AnimationMetadata[];
+}
+
+export interface AnimationStaggerMetadata extends AnimationMetadata {
+    animation: AnimationMetadata | AnimationMetadata[];
+    timings: string | number;
+}
+
+export interface AnimationStateMetadata extends AnimationMetadata {
+    name: string;
+    options?: {
+        params: {
+            [name: string]: any;
+        };
+    };
+    styles: AnimationStyleMetadata;
+}
+
+export interface AnimationStyleMetadata extends AnimationMetadata {
+    offset: number | null;
+    styles: '*' | {
+        [key: string]: string | number;
+    } | Array<{
+        [key: string]: string | number;
+    } | '*'>;
+}
+
+export interface AnimationTransitionMetadata extends AnimationMetadata {
+    animation: AnimationMetadata | AnimationMetadata[];
+    expr: string | ((fromState: string, toState: string, element?: any, params?: {
+        [key: string]: any;
+    }) => boolean);
+    options: AnimationOptions | null;
+}
+
+export interface AnimationTriggerMetadata extends AnimationMetadata {
+    definitions: AnimationMetadata[];
+    name: string;
+    options: {
+        params?: {
+            [name: string]: any;
+        };
+    } | null;
+}
+
+export declare const AUTO_STYLE = "*";
+
+export declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata;
+
+export declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata;
+
+export declare class NoopAnimationPlayer implements AnimationPlayer {
+    parentPlayer: AnimationPlayer | null;
+    readonly totalTime: number;
+    constructor(duration?: number, delay?: 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(position: number): void;
+}
+
+export declare function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null): AnimationQueryMetadata;
+
+export declare function sequence(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationSequenceMetadata;
+
+export declare function stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata;
+
+export declare function state(name: string, styles: AnimationStyleMetadata, options?: {
+    params: {
+        [name: string]: any;
+    };
+}): AnimationStateMetadata;
+
+export declare function style(tokens: '*' | {
+    [key: string]: string | number;
+} | Array<'*' | {
+    [key: string]: string | number;
+}>): AnimationStyleMetadata;
+
+export declare function transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: {
+    [key: string]: any;
+}) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;
+
+/** @experimental */
+export declare function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata;
+
+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
new file mode 100644
index 000000000000..9cc4a9e08277
--- /dev/null
+++ b/tools/public_api_guard/animations/browser.d.ts
@@ -0,0 +1,12 @@
+/** @experimental */
+export declare abstract class AnimationDriver {
+    abstract animate(element: any, keyframes: {
+        [key: string]: string | number;
+    }[], duration: number, delay: number, easing?: string | null, previousPlayers?: any[], scrubberAccessRequested?: boolean): 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[];
+    abstract validateStyleProperty(prop: string): boolean;
+    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
new file mode 100644
index 000000000000..f964f50d998d
--- /dev/null
+++ b/tools/public_api_guard/animations/browser/testing.d.ts
@@ -0,0 +1,36 @@
+/** @experimental */
+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[];
+    validateStyleProperty(prop: string): boolean;
+    static log: AnimationPlayer[];
+}
+
+/** @experimental */
+export declare class MockAnimationPlayer extends NoopAnimationPlayer {
+    currentSnapshot: ɵStyleData;
+    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[]);
+    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
new file mode 100644
index 000000000000..d5a18fd997c8
--- /dev/null
+++ b/tools/public_api_guard/common/common.d.ts
@@ -0,0 +1,471 @@
+export declare const APP_BASE_HREF: InjectionToken<string>;
+
+export declare class AsyncPipe implements OnDestroy, PipeTransform {
+    constructor(_ref: ChangeDetectorRef);
+    ngOnDestroy(): void;
+    transform<T>(obj: Observable<T> | null | undefined): T | null;
+    transform<T>(obj: Promise<T> | null | undefined): T | null;
+    transform<T>(obj: undefined): undefined;
+    transform<T>(obj: null): null;
+}
+
+export declare class CommonModule {
+}
+
+export declare class CurrencyPipe implements PipeTransform {
+    constructor(_locale: string);
+    transform(value: any, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean, digitsInfo?: string, locale?: string): string | null;
+}
+
+export declare class DatePipe implements PipeTransform {
+    constructor(locale: string);
+    transform(value: any, format?: string, timezone?: string, locale?: string): string | null;
+}
+
+export declare class DecimalPipe implements PipeTransform {
+    constructor(_locale: string);
+    transform(value: any, digitsInfo?: string, locale?: string): string | null;
+}
+
+export declare class DeprecatedCurrencyPipe implements PipeTransform {
+    constructor(_locale: string);
+    transform(value: any, currencyCode?: string, symbolDisplay?: boolean, digits?: string): string | null;
+}
+
+export declare class DeprecatedDatePipe implements PipeTransform {
+    constructor(_locale: string);
+    transform(value: any, pattern?: string): string | null;
+}
+
+export declare class DeprecatedDecimalPipe implements PipeTransform {
+    constructor(_locale: string);
+    transform(value: any, digits?: string): string | null;
+}
+
+/** @deprecated */
+export declare class DeprecatedI18NPipesModule {
+}
+
+export declare class DeprecatedPercentPipe implements PipeTransform {
+    constructor(_locale: string);
+    transform(value: any, digits?: string): string | null;
+}
+
+export declare const DOCUMENT: InjectionToken<Document>;
+
+export declare function formatCurrency(value: number, locale: string, currency: string, currencyCode?: string, digitsInfo?: string): string;
+
+export declare function formatDate(value: string | number | Date, format: string, locale: string, timezone?: string): string;
+
+export declare function formatNumber(value: number, locale: string, digitsInfo?: string): string;
+
+export declare function formatPercent(value: number, locale: string, digitsInfo?: string): string;
+
+/** @experimental */
+export declare enum FormatWidth {
+    Short = 0,
+    Medium = 1,
+    Long = 2,
+    Full = 3
+}
+
+/** @experimental */
+export declare enum FormStyle {
+    Format = 0,
+    Standalone = 1
+}
+
+/** @experimental */
+export declare function getCurrencySymbol(code: string, format: 'wide' | 'narrow', locale?: string): string;
+
+/** @experimental */
+export declare function getLocaleCurrencyName(locale: string): string | null;
+
+/** @experimental */
+export declare function getLocaleCurrencySymbol(locale: string): string | null;
+
+/** @experimental */
+export declare function getLocaleDateFormat(locale: string, width: FormatWidth): string;
+
+/** @experimental */
+export declare function getLocaleDateTimeFormat(locale: string, width: FormatWidth): string;
+
+/** @experimental */
+export declare function getLocaleDayNames(locale: string, formStyle: FormStyle, width: TranslationWidth): string[];
+
+/** @experimental */
+export declare function getLocaleDayPeriods(locale: string, formStyle: FormStyle, width: TranslationWidth): [string, string];
+
+/** @experimental */
+export declare function getLocaleEraNames(locale: string, width: TranslationWidth): [string, string];
+
+/** @experimental */
+export declare function getLocaleExtraDayPeriodRules(locale: string): (Time | [Time, Time])[];
+
+/** @experimental */
+export declare function getLocaleExtraDayPeriods(locale: string, formStyle: FormStyle, width: TranslationWidth): string[];
+
+/** @experimental */
+export declare function getLocaleFirstDayOfWeek(locale: string): WeekDay;
+
+/** @experimental */
+export declare function getLocaleId(locale: string): string;
+
+/** @experimental */
+export declare function getLocaleMonthNames(locale: string, formStyle: FormStyle, width: TranslationWidth): string[];
+
+/** @experimental */
+export declare function getLocaleNumberFormat(locale: string, type: NumberFormatStyle): string;
+
+/** @experimental */
+export declare function getLocaleNumberSymbol(locale: string, symbol: NumberSymbol): string;
+
+/** @experimental */
+export declare function getLocalePluralCase(locale: string): (value: number) => Plural;
+
+/** @experimental */
+export declare function getLocaleTimeFormat(locale: string, width: FormatWidth): string;
+
+/** @experimental */
+export declare function getLocaleWeekEndRange(locale: string): [WeekDay, WeekDay];
+
+/** @experimental */
+export declare function getNumberOfCurrencyDigits(code: string): number;
+
+export declare class HashLocationStrategy extends LocationStrategy {
+    constructor(_platformLocation: PlatformLocation, _baseHref?: string);
+    back(): void;
+    forward(): void;
+    getBaseHref(): string;
+    onPopState(fn: LocationChangeListener): void;
+    path(includeHash?: boolean): string;
+    prepareExternalUrl(internal: string): string;
+    pushState(state: any, title: string, path: string, queryParams: string): void;
+    replaceState(state: any, title: string, path: string, queryParams: string): void;
+}
+
+/** @experimental */
+export declare class I18nPluralPipe implements PipeTransform {
+    constructor(_localization: NgLocalization);
+    transform(value: number, pluralMap: {
+        [count: string]: string;
+    }, locale?: string): string;
+}
+
+/** @experimental */
+export declare class I18nSelectPipe implements PipeTransform {
+    transform(value: string | null | undefined, mapping: {
+        [key: string]: string;
+    }): string;
+}
+
+/** @experimental */
+export declare function isPlatformBrowser(platformId: Object): boolean;
+
+/** @experimental */
+export declare function isPlatformServer(platformId: Object): boolean;
+
+/** @experimental */
+export declare function isPlatformWorkerApp(platformId: Object): boolean;
+
+/** @experimental */
+export declare function isPlatformWorkerUi(platformId: Object): boolean;
+
+export declare class JsonPipe implements PipeTransform {
+    transform(value: any): string;
+}
+
+export interface KeyValue<K, V> {
+    key: K;
+    value: V;
+}
+
+export declare class KeyValuePipe implements PipeTransform {
+    constructor(differs: KeyValueDiffers);
+    transform<K, V>(input: null, compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number): null;
+    transform<V>(input: {
+        [key: string]: V;
+    } | Map<string, V>, compareFn?: (a: KeyValue<string, V>, b: KeyValue<string, V>) => number): Array<KeyValue<string, V>>;
+    transform<V>(input: {
+        [key: number]: V;
+    } | Map<number, V>, compareFn?: (a: KeyValue<number, V>, b: KeyValue<number, V>) => number): Array<KeyValue<number, V>>;
+    transform<K, V>(input: Map<K, V>, compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number): Array<KeyValue<K, V>>;
+}
+
+export declare class Location {
+    constructor(platformStrategy: LocationStrategy);
+    back(): void;
+    forward(): void;
+    go(path: string, query?: string, state?: any): void;
+    isCurrentPathEqualTo(path: string, query?: string): boolean;
+    normalize(url: string): string;
+    path(includeHash?: boolean): string;
+    prepareExternalUrl(url: string): string;
+    replaceState(path: string, query?: string, state?: any): void;
+    subscribe(onNext: (value: PopStateEvent) => void, onThrow?: ((exception: any) => void) | null, onReturn?: (() => void) | null): SubscriptionLike;
+    static joinWithSlash(start: string, end: string): string;
+    static normalizeQueryParams(params: string): string;
+    static stripTrailingSlash(url: string): string;
+}
+
+/** @experimental */
+export declare const LOCATION_INITIALIZED: InjectionToken<Promise<any>>;
+
+/** @experimental */
+export interface LocationChangeEvent {
+    state: any;
+    type: string;
+}
+
+/** @experimental */
+export interface LocationChangeListener {
+    (event: LocationChangeEvent): any;
+}
+
+export declare abstract class LocationStrategy {
+    abstract back(): void;
+    abstract forward(): void;
+    abstract getBaseHref(): string;
+    abstract onPopState(fn: LocationChangeListener): void;
+    abstract path(includeHash?: boolean): string;
+    abstract prepareExternalUrl(internal: string): string;
+    abstract pushState(state: any, title: string, url: string, queryParams: string): void;
+    abstract replaceState(state: any, title: string, url: string, queryParams: string): void;
+}
+
+export declare class LowerCasePipe implements PipeTransform {
+    transform(value: string): string;
+}
+
+export declare class NgClass implements DoCheck {
+    klass: string;
+    ngClass: string | string[] | Set<string> | {
+        [klass: string]: any;
+    };
+    constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2);
+    ngDoCheck(): void;
+}
+
+/** @experimental */
+export declare class NgComponentOutlet implements OnChanges, OnDestroy {
+    ngComponentOutlet: Type<any>;
+    ngComponentOutletContent: any[][];
+    ngComponentOutletInjector: Injector;
+    ngComponentOutletNgModuleFactory: NgModuleFactory<any>;
+    constructor(_viewContainerRef: ViewContainerRef);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+}
+
+export declare class NgForOf<T> implements DoCheck {
+    ngForOf: NgIterable<T>;
+    ngForTemplate: TemplateRef<NgForOfContext<T>>;
+    ngForTrackBy: TrackByFunction<T>;
+    constructor(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForOfContext<T>>, _differs: IterableDiffers);
+    ngDoCheck(): void;
+}
+
+export declare class NgForOfContext<T> {
+    $implicit: T;
+    count: number;
+    readonly even: boolean;
+    readonly first: boolean;
+    index: number;
+    readonly last: boolean;
+    ngForOf: NgIterable<T>;
+    readonly odd: boolean;
+    constructor($implicit: T, ngForOf: NgIterable<T>, index: number, count: number);
+}
+
+export declare class NgIf {
+    ngIf: any;
+    ngIfElse: TemplateRef<NgIfContext> | null;
+    ngIfThen: TemplateRef<NgIfContext> | null;
+    constructor(_viewContainer: ViewContainerRef, templateRef: TemplateRef<NgIfContext>);
+}
+
+export declare class NgIfContext {
+    $implicit: any;
+    ngIf: any;
+}
+
+/** @experimental */
+export declare class NgLocaleLocalization extends NgLocalization {
+    /** @deprecated */ protected deprecatedPluralFn?: ((locale: string, value: string | number) => Plural) | null | undefined;
+    protected locale: string;
+    constructor(locale: string,
+    /** @deprecated */ deprecatedPluralFn?: ((locale: string, value: string | number) => Plural) | null | undefined);
+    getPluralCategory(value: any, locale?: string): string;
+}
+
+/** @experimental */
+export declare abstract class NgLocalization {
+    abstract getPluralCategory(value: any, locale?: string): string;
+}
+
+/** @experimental */
+export declare class NgPlural {
+    ngPlural: number;
+    constructor(_localization: NgLocalization);
+    addCase(value: string, switchView: SwitchView): void;
+}
+
+/** @experimental */
+export declare class NgPluralCase {
+    value: string;
+    constructor(value: string, template: TemplateRef<Object>, viewContainer: ViewContainerRef, ngPlural: NgPlural);
+}
+
+export declare class NgStyle implements DoCheck {
+    ngStyle: {
+        [key: string]: string;
+    };
+    constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2);
+    ngDoCheck(): void;
+}
+
+export declare class NgSwitch {
+    ngSwitch: any;
+}
+
+export declare class NgSwitchCase implements DoCheck {
+    ngSwitchCase: any;
+    constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef<Object>, ngSwitch: NgSwitch);
+    ngDoCheck(): void;
+}
+
+export declare class NgSwitchDefault {
+    constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef<Object>, ngSwitch: NgSwitch);
+}
+
+export declare class NgTemplateOutlet implements OnChanges {
+    ngTemplateOutlet: TemplateRef<any>;
+    ngTemplateOutletContext: Object;
+    constructor(_viewContainerRef: ViewContainerRef);
+    ngOnChanges(changes: SimpleChanges): void;
+}
+
+/** @experimental */
+export declare enum NumberFormatStyle {
+    Decimal = 0,
+    Percent = 1,
+    Currency = 2,
+    Scientific = 3
+}
+
+/** @experimental */
+export declare enum NumberSymbol {
+    Decimal = 0,
+    Group = 1,
+    List = 2,
+    PercentSign = 3,
+    PlusSign = 4,
+    MinusSign = 5,
+    Exponential = 6,
+    SuperscriptingExponent = 7,
+    PerMille = 8,
+    Infinity = 9,
+    NaN = 10,
+    TimeSeparator = 11,
+    CurrencyDecimal = 12,
+    CurrencyGroup = 13
+}
+
+export declare class PathLocationStrategy extends LocationStrategy {
+    constructor(_platformLocation: PlatformLocation, href?: string);
+    back(): void;
+    forward(): void;
+    getBaseHref(): string;
+    onPopState(fn: LocationChangeListener): void;
+    path(includeHash?: boolean): string;
+    prepareExternalUrl(internal: string): string;
+    pushState(state: any, title: string, url: string, queryParams: string): void;
+    replaceState(state: any, title: string, url: string, queryParams: string): void;
+}
+
+export declare class PercentPipe implements PipeTransform {
+    constructor(_locale: string);
+    transform(value: any, digitsInfo?: string, locale?: string): string | null;
+}
+
+export declare abstract class PlatformLocation {
+    abstract readonly hash: string;
+    abstract readonly pathname: string;
+    abstract readonly search: string;
+    abstract back(): void;
+    abstract forward(): void;
+    abstract getBaseHrefFromDOM(): string;
+    abstract onHashChange(fn: LocationChangeListener): void;
+    abstract onPopState(fn: LocationChangeListener): void;
+    abstract pushState(state: any, title: string, url: string): void;
+    abstract replaceState(state: any, title: string, url: string): void;
+}
+
+/** @experimental */
+export declare enum Plural {
+    Zero = 0,
+    One = 1,
+    Two = 2,
+    Few = 3,
+    Many = 4,
+    Other = 5
+}
+
+/** @experimental */
+export interface PopStateEvent {
+    pop?: boolean;
+    state?: any;
+    type?: string;
+    url?: string;
+}
+
+/** @experimental */
+export declare function registerLocaleData(data: any, localeId?: string | any, extraData?: any): void;
+
+export declare class SlicePipe implements PipeTransform {
+    transform(value: any, start: number, end?: number): any;
+}
+
+/** @experimental */
+export declare type Time = {
+    hours: number;
+    minutes: number;
+};
+
+export declare class TitleCasePipe implements PipeTransform {
+    transform(value: string): string;
+}
+
+/** @experimental */
+export declare enum TranslationWidth {
+    Narrow = 0,
+    Abbreviated = 1,
+    Wide = 2,
+    Short = 3
+}
+
+export declare class UpperCasePipe implements PipeTransform {
+    transform(value: string): string;
+}
+
+export declare const VERSION: Version;
+
+export declare abstract class ViewportScroller {
+    abstract getScrollPosition(): [number, number];
+    abstract scrollToAnchor(anchor: string): void;
+    abstract scrollToPosition(position: [number, number]): void;
+    abstract setHistoryScrollRestoration(scrollRestoration: 'auto' | 'manual'): void;
+    abstract setOffset(offset: [number, number] | (() => [number, number])): void;
+    static ngInjectableDef: never;
+}
+
+/** @experimental */
+export declare enum WeekDay {
+    Sunday = 0,
+    Monday = 1,
+    Tuesday = 2,
+    Wednesday = 3,
+    Thursday = 4,
+    Friday = 5,
+    Saturday = 6
+}
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 000000000000..370d0200523e
--- /dev/null
+++ b/tools/public_api_guard/common/http.d.ts
@@ -0,0 +1,1729 @@
+export declare const HTTP_INTERCEPTORS: InjectionToken<HttpInterceptor[]>;
+
+export declare abstract class HttpBackend implements HttpHandler {
+    abstract handle(req: HttpRequest<any>): Observable<HttpEvent<any>>;
+}
+
+export declare class HttpClient {
+    constructor(handler: HttpHandler);
+    delete<T>(url: string, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    delete(url: string, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    delete<T>(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    delete<T>(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    get(url: string, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    get<T>(url: string, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    get<T>(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    get(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    get<T>(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    head<T>(url: string, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    head(url: string, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    head<T>(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    head<T>(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    head(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        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 | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    options(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    options(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    options(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    options(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    options(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    options(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    options<T>(url: string, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    options<T>(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    options(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    options(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    options(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    options(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    options<T>(url: string, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    options(url: string, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    patch<T>(url: string, body: any | null, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    patch(url: string, body: any | null, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    patch<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    patch<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    post(url: string, body: any | null, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    post<T>(url: string, body: any | null, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    post<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    post<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    put(url: string, body: any | null, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    put<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    put<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    put<T>(url: string, body: any | null, options?: {
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<any>>;
+    request<R>(method: string, url: string, options?: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        responseType?: 'json';
+        reportProgress?: boolean;
+        withCredentials?: boolean;
+    }): Observable<R>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        observe: 'events';
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        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 | {
+            [header: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        observe: 'events';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<R>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    request<R>(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        reportProgress?: boolean;
+        observe: 'response';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<R>>;
+    request(method: string, url: string, options?: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        observe?: 'body';
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        responseType?: 'json';
+        reportProgress?: boolean;
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    request(method: string, url: string, options?: {
+        body?: any;
+        headers?: HttpHeaders | {
+            [header: string]: string | string[];
+        };
+        params?: HttpParams | {
+            [param: string]: string | string[];
+        };
+        observe?: HttpObserve;
+        reportProgress?: boolean;
+        responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
+        withCredentials?: boolean;
+    }): Observable<any>;
+}
+
+export declare class HttpClientJsonpModule {
+}
+
+export declare class HttpClientModule {
+}
+
+export declare class HttpClientXsrfModule {
+    static disable(): ModuleWithProviders;
+    static withOptions(options?: {
+        cookieName?: string;
+        headerName?: string;
+    }): ModuleWithProviders;
+}
+
+export interface HttpDownloadProgressEvent extends HttpProgressEvent {
+    partialText?: string;
+    type: HttpEventType.DownloadProgress;
+}
+
+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;
+    });
+}
+
+export declare type HttpEvent<T> = HttpSentEvent | HttpHeaderResponse | HttpResponse<T> | HttpProgressEvent | HttpUserEvent<T>;
+
+export declare enum HttpEventType {
+    Sent = 0,
+    UploadProgress = 1,
+    ResponseHeader = 2,
+    DownloadProgress = 3,
+    Response = 4,
+    User = 5
+}
+
+export declare abstract class HttpHandler {
+    abstract handle(req: HttpRequest<any>): Observable<HttpEvent<any>>;
+}
+
+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;
+}
+
+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;
+}
+
+export interface HttpInterceptor {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
+}
+
+export interface HttpParameterCodec {
+    decodeKey(key: string): string;
+    decodeValue(value: string): string;
+    encodeKey(key: string): string;
+    encodeValue(value: string): string;
+}
+
+export declare class HttpParams {
+    constructor(options?: HttpParamsOptions);
+    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;
+}
+
+export interface HttpProgressEvent {
+    loaded: number;
+    total?: number;
+    type: HttpEventType.DownloadProgress | HttpEventType.UploadProgress;
+}
+
+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;
+}
+
+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>;
+}
+
+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);
+}
+
+export interface HttpSentEvent {
+    type: HttpEventType.Sent;
+}
+
+export declare class HttpUrlEncodingCodec implements HttpParameterCodec {
+    decodeKey(key: string): string;
+    decodeValue(value: string): string;
+    encodeKey(key: string): string;
+    encodeValue(value: string): string;
+}
+
+export interface HttpUserEvent<T> {
+    type: HttpEventType.User;
+}
+
+export declare class HttpXhrBackend implements HttpBackend {
+    constructor(xhrFactory: XhrFactory);
+    handle(req: HttpRequest<any>): Observable<HttpEvent<any>>;
+}
+
+export declare abstract class HttpXsrfTokenExtractor {
+    abstract getToken(): string | null;
+}
+
+export declare class JsonpClientBackend implements HttpBackend {
+    constructor(callbackMap: JsonpCallbackContext, document: any);
+    handle(req: HttpRequest<never>): Observable<HttpEvent<any>>;
+}
+
+export declare class JsonpInterceptor {
+    constructor(jsonp: JsonpClientBackend);
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
+}
+
+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 000000000000..7387dc1486c3
--- /dev/null
+++ b/tools/public_api_guard/common/http/testing.d.ts
@@ -0,0 +1,43 @@
+export declare class HttpClientTestingModule {
+}
+
+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;
+}
+
+export interface RequestMatch {
+    method?: string;
+    url?: string;
+}
+
+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/common/testing.d.ts b/tools/public_api_guard/common/testing.d.ts
new file mode 100644
index 000000000000..187fbd044b50
--- /dev/null
+++ b/tools/public_api_guard/common/testing.d.ts
@@ -0,0 +1,34 @@
+export declare class MockLocationStrategy extends LocationStrategy {
+    internalBaseHref: string;
+    internalPath: string;
+    internalTitle: string;
+    urlChanges: string[];
+    constructor();
+    back(): void;
+    forward(): void;
+    getBaseHref(): string;
+    onPopState(fn: (value: any) => void): void;
+    path(includeHash?: boolean): string;
+    prepareExternalUrl(internal: string): string;
+    pushState(ctx: any, title: string, path: string, query: string): void;
+    replaceState(ctx: any, title: string, path: string, query: string): void;
+    simulatePopState(url: string): void;
+}
+
+/** @experimental */
+export declare class SpyLocation implements Location {
+    urlChanges: string[];
+    back(): void;
+    forward(): void;
+    go(path: string, query?: string, state?: any): void;
+    isCurrentPathEqualTo(path: string, query?: string): boolean;
+    normalize(url: string): string;
+    path(): string;
+    prepareExternalUrl(url: string): string;
+    replaceState(path: string, query?: string, state?: any): void;
+    setBaseHref(url: string): void;
+    setInitialPath(url: string): void;
+    simulateHashChange(pathname: string): void;
+    simulateUrlPop(pathname: string): void;
+    subscribe(onNext: (value: any) => void, onThrow?: ((error: any) => void) | null, onReturn?: (() => void) | null): SubscriptionLike;
+}
diff --git a/tools/public_api_guard/compiler/compiler.d.ts b/tools/public_api_guard/compiler/compiler.d.ts
new file mode 100644
index 000000000000..03e2984d60dc
--- /dev/null
+++ b/tools/public_api_guard/compiler/compiler.d.ts
@@ -0,0 +1,587 @@
+export declare class AttrAst implements TemplateAst {
+    name: string;
+    sourceSpan: ParseSourceSpan;
+    value: string;
+    constructor(name: string, value: string, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare class BoundDirectivePropertyAst implements TemplateAst {
+    directiveName: string;
+    sourceSpan: ParseSourceSpan;
+    templateName: string;
+    value: AST;
+    constructor(directiveName: string, templateName: string, value: AST, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare class BoundElementPropertyAst implements TemplateAst {
+    name: string;
+    securityContext: SecurityContext;
+    sourceSpan: ParseSourceSpan;
+    type: PropertyBindingType;
+    unit: string;
+    value: AST;
+    constructor(name: string, type: PropertyBindingType, securityContext: SecurityContext, value: AST, unit: string, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare class BoundEventAst implements TemplateAst {
+    fullName: string;
+    handler: AST;
+    name: string;
+    sourceSpan: ParseSourceSpan;
+    target: string;
+    constructor(name: string, target: string, handler: AST, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare class BoundTextAst implements TemplateAst {
+    ngContentIndex: number;
+    sourceSpan: ParseSourceSpan;
+    value: AST;
+    constructor(value: AST, ngContentIndex: number, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare class CompileDiDependencyMetadata {
+    isAttribute: boolean;
+    isHost: boolean;
+    isOptional: boolean;
+    isSelf: boolean;
+    isSkipSelf: boolean;
+    isValue: boolean;
+    query: CompileQueryMetadata;
+    token: CompileTokenMetadata;
+    value: any;
+    viewQuery: CompileQueryMetadata;
+    constructor({isAttribute, isSelf, isHost, isSkipSelf, isOptional, isValue, query, viewQuery, token, value}?: {
+        isAttribute?: boolean;
+        isSelf?: boolean;
+        isHost?: boolean;
+        isSkipSelf?: boolean;
+        isOptional?: boolean;
+        isValue?: boolean;
+        query?: CompileQueryMetadata;
+        viewQuery?: CompileQueryMetadata;
+        token?: CompileTokenMetadata;
+        value?: any;
+    });
+    toJson(): {
+        [key: string]: any;
+    };
+    static fromJson(data: {
+        [key: string]: any;
+    }): CompileDiDependencyMetadata;
+}
+
+export declare class CompileDirectiveMetadata implements CompileMetadataWithType {
+    changeDetection: ChangeDetectionStrategy;
+    exportAs: string;
+    hostAttributes: {
+        [key: string]: string;
+    };
+    hostListeners: {
+        [key: string]: string;
+    };
+    hostProperties: {
+        [key: string]: string;
+    };
+    identifier: CompileIdentifierMetadata;
+    inputs: {
+        [key: string]: string;
+    };
+    isComponent: boolean;
+    lifecycleHooks: LifecycleHooks[];
+    outputs: {
+        [key: string]: string;
+    };
+    precompile: CompileTypeMetadata[];
+    providers: CompileProviderMetadata[];
+    queries: CompileQueryMetadata[];
+    selector: string;
+    template: CompileTemplateMetadata;
+    type: CompileTypeMetadata;
+    viewProviders: CompileProviderMetadata[];
+    viewQueries: CompileQueryMetadata[];
+    constructor({type, isComponent, selector, exportAs, changeDetection, inputs, outputs, hostListeners, hostProperties, hostAttributes, lifecycleHooks, providers, viewProviders, queries, viewQueries, precompile, template}?: {
+        type?: CompileTypeMetadata;
+        isComponent?: boolean;
+        selector?: string;
+        exportAs?: string;
+        changeDetection?: ChangeDetectionStrategy;
+        inputs?: {
+            [key: string]: string;
+        };
+        outputs?: {
+            [key: string]: string;
+        };
+        hostListeners?: {
+            [key: string]: string;
+        };
+        hostProperties?: {
+            [key: string]: string;
+        };
+        hostAttributes?: {
+            [key: string]: string;
+        };
+        lifecycleHooks?: LifecycleHooks[];
+        providers?: Array<CompileProviderMetadata | CompileTypeMetadata | CompileIdentifierMetadata | any[]>;
+        viewProviders?: Array<CompileProviderMetadata | CompileTypeMetadata | CompileIdentifierMetadata | any[]>;
+        queries?: CompileQueryMetadata[];
+        viewQueries?: CompileQueryMetadata[];
+        precompile?: CompileTypeMetadata[];
+        template?: CompileTemplateMetadata;
+    });
+    toJson(): {
+        [key: string]: any;
+    };
+    static create({type, isComponent, selector, exportAs, changeDetection, inputs, outputs, host, lifecycleHooks, providers, viewProviders, queries, viewQueries, precompile, template}?: {
+        type?: CompileTypeMetadata;
+        isComponent?: boolean;
+        selector?: string;
+        exportAs?: string;
+        changeDetection?: ChangeDetectionStrategy;
+        inputs?: string[];
+        outputs?: string[];
+        host?: {
+            [key: string]: string;
+        };
+        lifecycleHooks?: LifecycleHooks[];
+        providers?: Array<CompileProviderMetadata | CompileTypeMetadata | CompileIdentifierMetadata | any[]>;
+        viewProviders?: Array<CompileProviderMetadata | CompileTypeMetadata | CompileIdentifierMetadata | any[]>;
+        queries?: CompileQueryMetadata[];
+        viewQueries?: CompileQueryMetadata[];
+        precompile?: CompileTypeMetadata[];
+        template?: CompileTemplateMetadata;
+    }): CompileDirectiveMetadata;
+    static fromJson(data: {
+        [key: string]: any;
+    }): CompileDirectiveMetadata;
+}
+
+export declare class CompileFactoryMetadata implements CompileIdentifierMetadata, CompileMetadataWithIdentifier {
+    diDeps: CompileDiDependencyMetadata[];
+    identifier: CompileIdentifierMetadata;
+    moduleUrl: string;
+    name: string;
+    prefix: string;
+    runtime: Function;
+    value: any;
+    constructor({runtime, name, moduleUrl, prefix, diDeps, value}: {
+        runtime?: Function;
+        name?: string;
+        prefix?: string;
+        moduleUrl?: string;
+        value?: boolean;
+        diDeps?: CompileDiDependencyMetadata[];
+    });
+    toJson(): {
+        [key: string]: any;
+    };
+    static fromJson(data: {
+        [key: string]: any;
+    }): CompileFactoryMetadata;
+}
+
+export declare class CompileIdentifierMetadata implements CompileMetadataWithIdentifier {
+    identifier: CompileIdentifierMetadata;
+    moduleUrl: string;
+    name: string;
+    prefix: string;
+    runtime: any;
+    value: any;
+    constructor({runtime, name, moduleUrl, prefix, value}?: {
+        runtime?: any;
+        name?: string;
+        moduleUrl?: string;
+        prefix?: string;
+        value?: any;
+    });
+    toJson(): {
+        [key: string]: any;
+    };
+    static fromJson(data: {
+        [key: string]: any;
+    }): CompileIdentifierMetadata;
+}
+
+export declare abstract class CompileMetadataWithIdentifier {
+    identifier: CompileIdentifierMetadata;
+    abstract toJson(): {
+        [key: string]: any;
+    };
+}
+
+export declare abstract class CompileMetadataWithType extends CompileMetadataWithIdentifier {
+    identifier: CompileIdentifierMetadata;
+    type: CompileTypeMetadata;
+    abstract toJson(): {
+        [key: string]: any;
+    };
+}
+
+export declare class CompilePipeMetadata implements CompileMetadataWithType {
+    identifier: CompileIdentifierMetadata;
+    lifecycleHooks: LifecycleHooks[];
+    name: string;
+    pure: boolean;
+    type: CompileTypeMetadata;
+    constructor({type, name, pure, lifecycleHooks}?: {
+        type?: CompileTypeMetadata;
+        name?: string;
+        pure?: boolean;
+        lifecycleHooks?: LifecycleHooks[];
+    });
+    toJson(): {
+        [key: string]: any;
+    };
+    static fromJson(data: {
+        [key: string]: any;
+    }): CompilePipeMetadata;
+}
+
+export declare class CompileProviderMetadata {
+    deps: CompileDiDependencyMetadata[];
+    multi: boolean;
+    token: CompileTokenMetadata;
+    useClass: CompileTypeMetadata;
+    useExisting: CompileTokenMetadata;
+    useFactory: CompileFactoryMetadata;
+    useValue: any;
+    constructor({token, useClass, useValue, useExisting, useFactory, deps, multi}: {
+        token?: CompileTokenMetadata;
+        useClass?: CompileTypeMetadata;
+        useValue?: any;
+        useExisting?: CompileTokenMetadata;
+        useFactory?: CompileFactoryMetadata;
+        deps?: CompileDiDependencyMetadata[];
+        multi?: boolean;
+    });
+    toJson(): {
+        [key: string]: any;
+    };
+    static fromJson(data: {
+        [key: string]: any;
+    }): CompileProviderMetadata;
+}
+
+export declare class CompileQueryMetadata {
+    descendants: boolean;
+    first: boolean;
+    propertyName: string;
+    read: CompileTokenMetadata;
+    selectors: Array<CompileTokenMetadata>;
+    constructor({selectors, descendants, first, propertyName, read}?: {
+        selectors?: Array<CompileTokenMetadata>;
+        descendants?: boolean;
+        first?: boolean;
+        propertyName?: string;
+        read?: CompileTokenMetadata;
+    });
+    toJson(): {
+        [key: string]: any;
+    };
+    static fromJson(data: {
+        [key: string]: any;
+    }): CompileQueryMetadata;
+}
+
+export declare const COMPILER_PROVIDERS: Array<any | Type | {
+    [k: string]: any;
+} | any[]>;
+
+export declare class CompilerConfig {
+    defaultEncapsulation: ViewEncapsulation;
+    genDebugInfo: boolean;
+    logBindingUpdate: boolean;
+    platformDirectives: any[];
+    platformPipes: any[];
+    renderTypes: RenderTypes;
+    useJit: boolean;
+    constructor({renderTypes, defaultEncapsulation, genDebugInfo, logBindingUpdate, useJit, platformDirectives, platformPipes}?: {
+        renderTypes?: RenderTypes;
+        defaultEncapsulation?: ViewEncapsulation;
+        genDebugInfo?: boolean;
+        logBindingUpdate?: boolean;
+        useJit?: boolean;
+        platformDirectives?: any[];
+        platformPipes?: any[];
+    });
+}
+
+export declare class CompileTemplateMetadata implements CompileStylesheetMetadata {
+    animations: CompileAnimationEntryMetadata[];
+    encapsulation: ViewEncapsulation;
+    externalStylesheets: CompileStylesheetMetadata[];
+    interpolation: [string, string];
+    moduleUrl: string;
+    ngContentSelectors: string[];
+    styleUrls: string[];
+    styles: string[];
+    template: string;
+    templateUrl: string;
+    constructor({encapsulation, template, templateUrl, styles, styleUrls, externalStylesheets, animations, ngContentSelectors, interpolation}?: {
+        encapsulation?: ViewEncapsulation;
+        template?: string;
+        templateUrl?: string;
+        styles?: string[];
+        styleUrls?: string[];
+        externalStylesheets?: CompileStylesheetMetadata[];
+        ngContentSelectors?: string[];
+        animations?: CompileAnimationEntryMetadata[];
+        interpolation?: [string, string];
+    });
+    toJson(): {
+        [key: string]: any;
+    };
+    static fromJson(data: {
+        [key: string]: any;
+    }): CompileTemplateMetadata;
+}
+
+export declare class CompileTokenMetadata implements CompileMetadataWithIdentifier {
+    assetCacheKey: any;
+    identifier: CompileIdentifierMetadata;
+    identifierIsInstance: boolean;
+    name: string;
+    runtimeCacheKey: any;
+    value: any;
+    constructor({value, identifier, identifierIsInstance}: {
+        value?: any;
+        identifier?: CompileIdentifierMetadata;
+        identifierIsInstance?: boolean;
+    });
+    equalsTo(token2: CompileTokenMetadata): boolean;
+    toJson(): {
+        [key: string]: any;
+    };
+    static fromJson(data: {
+        [key: string]: any;
+    }): CompileTokenMetadata;
+}
+
+export declare class CompileTypeMetadata implements CompileIdentifierMetadata, CompileMetadataWithType {
+    diDeps: CompileDiDependencyMetadata[];
+    identifier: CompileIdentifierMetadata;
+    isHost: boolean;
+    moduleUrl: string;
+    name: string;
+    prefix: string;
+    runtime: Type;
+    type: CompileTypeMetadata;
+    value: any;
+    constructor({runtime, name, moduleUrl, prefix, isHost, value, diDeps}?: {
+        runtime?: Type;
+        name?: string;
+        moduleUrl?: string;
+        prefix?: string;
+        isHost?: boolean;
+        value?: any;
+        diDeps?: CompileDiDependencyMetadata[];
+    });
+    toJson(): {
+        [key: string]: any;
+    };
+    static fromJson(data: {
+        [key: string]: any;
+    }): CompileTypeMetadata;
+}
+
+export declare function createOfflineCompileUrlResolver(): UrlResolver;
+
+export declare var DEFAULT_PACKAGE_URL_PROVIDER: {
+    provide: any;
+    useValue: string;
+};
+
+export declare class DirectiveAst implements TemplateAst {
+    directive: CompileDirectiveMetadata;
+    hostEvents: BoundEventAst[];
+    hostProperties: BoundElementPropertyAst[];
+    inputs: BoundDirectivePropertyAst[];
+    sourceSpan: ParseSourceSpan;
+    constructor(directive: CompileDirectiveMetadata, inputs: BoundDirectivePropertyAst[], hostProperties: BoundElementPropertyAst[], hostEvents: BoundEventAst[], sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare class DirectiveResolver {
+    constructor(_reflector?: ReflectorReader);
+    resolve(type: Type): DirectiveMetadata;
+}
+
+export declare class ElementAst implements TemplateAst {
+    attrs: AttrAst[];
+    children: TemplateAst[];
+    directives: DirectiveAst[];
+    hasViewContainer: boolean;
+    inputs: BoundElementPropertyAst[];
+    name: string;
+    ngContentIndex: number;
+    outputs: BoundEventAst[];
+    providers: ProviderAst[];
+    references: ReferenceAst[];
+    sourceSpan: ParseSourceSpan;
+    constructor(name: string, attrs: AttrAst[], inputs: BoundElementPropertyAst[], outputs: BoundEventAst[], references: ReferenceAst[], directives: DirectiveAst[], providers: ProviderAst[], hasViewContainer: boolean, children: TemplateAst[], ngContentIndex: number, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare abstract class ElementSchemaRegistry {
+    abstract getMappedPropName(propName: string): string;
+    abstract hasProperty(tagName: string, propName: string): boolean;
+    abstract securityContext(tagName: string, propName: string): any;
+}
+
+export declare class EmbeddedTemplateAst implements TemplateAst {
+    attrs: AttrAst[];
+    children: TemplateAst[];
+    directives: DirectiveAst[];
+    hasViewContainer: boolean;
+    ngContentIndex: number;
+    outputs: BoundEventAst[];
+    providers: ProviderAst[];
+    references: ReferenceAst[];
+    sourceSpan: ParseSourceSpan;
+    variables: VariableAst[];
+    constructor(attrs: AttrAst[], outputs: BoundEventAst[], references: ReferenceAst[], variables: VariableAst[], directives: DirectiveAst[], providers: ProviderAst[], hasViewContainer: boolean, children: TemplateAst[], ngContentIndex: number, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare class NgContentAst implements TemplateAst {
+    index: number;
+    ngContentIndex: number;
+    sourceSpan: ParseSourceSpan;
+    constructor(index: number, ngContentIndex: number, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare class NormalizedComponentWithViewDirectives {
+    component: CompileDirectiveMetadata;
+    directives: CompileDirectiveMetadata[];
+    pipes: CompilePipeMetadata[];
+    constructor(component: CompileDirectiveMetadata, directives: CompileDirectiveMetadata[], pipes: CompilePipeMetadata[]);
+}
+
+export declare class OfflineCompiler {
+    constructor(_directiveNormalizer: DirectiveNormalizer, _templateParser: TemplateParser, _styleCompiler: StyleCompiler, _viewCompiler: ViewCompiler, _outputEmitter: OutputEmitter);
+    compileTemplates(components: NormalizedComponentWithViewDirectives[]): SourceModule[];
+    normalizeDirectiveMetadata(directive: CompileDirectiveMetadata): Promise<CompileDirectiveMetadata>;
+}
+
+export declare class PipeResolver {
+    constructor(_reflector?: ReflectorReader);
+    resolve(type: Type): PipeMetadata;
+}
+
+export declare enum PropertyBindingType {
+    Property = 0,
+    Attribute = 1,
+    Class = 2,
+    Style = 3,
+    Animation = 4,
+}
+
+export declare class ProviderAst implements TemplateAst {
+    eager: boolean;
+    multiProvider: boolean;
+    providerType: ProviderAstType;
+    providers: CompileProviderMetadata[];
+    sourceSpan: ParseSourceSpan;
+    token: CompileTokenMetadata;
+    constructor(token: CompileTokenMetadata, multiProvider: boolean, eager: boolean, providers: CompileProviderMetadata[], providerType: ProviderAstType, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare enum ProviderAstType {
+    PublicService = 0,
+    PrivateService = 1,
+    Component = 2,
+    Directive = 3,
+    Builtin = 4,
+}
+
+export declare class ReferenceAst implements TemplateAst {
+    name: string;
+    sourceSpan: ParseSourceSpan;
+    value: CompileTokenMetadata;
+    constructor(name: string, value: CompileTokenMetadata, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare abstract class RenderTypes {
+    renderComment: CompileIdentifierMetadata;
+    renderElement: CompileIdentifierMetadata;
+    renderEvent: CompileIdentifierMetadata;
+    renderNode: CompileIdentifierMetadata;
+    renderText: CompileIdentifierMetadata;
+    renderer: CompileIdentifierMetadata;
+}
+
+export declare class RuntimeCompiler implements ComponentResolver, Compiler {
+    constructor(_metadataResolver: CompileMetadataResolver, _templateNormalizer: DirectiveNormalizer, _templateParser: TemplateParser, _styleCompiler: StyleCompiler, _viewCompiler: ViewCompiler, _genConfig: CompilerConfig);
+    clearCache(): void;
+    clearCacheFor(compType: Type): void;
+    compileComponentAsync<T>(compType: ConcreteType<T>): Promise<ComponentFactory<T>>;
+    compileComponentSync<T>(compType: ConcreteType<T>): ComponentFactory<T>;
+    resolveComponent(component: Type | string): Promise<ComponentFactory<any>>;
+}
+
+export declare class SourceModule {
+    moduleUrl: string;
+    source: string;
+    constructor(moduleUrl: string, source: string);
+}
+
+export declare const TEMPLATE_TRANSFORMS: any;
+
+export interface TemplateAst {
+    sourceSpan: ParseSourceSpan;
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export interface TemplateAstVisitor {
+    visitAttr(ast: AttrAst, context: any): any;
+    visitBoundText(ast: BoundTextAst, context: any): any;
+    visitDirective(ast: DirectiveAst, context: any): any;
+    visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any;
+    visitElement(ast: ElementAst, context: any): any;
+    visitElementProperty(ast: BoundElementPropertyAst, context: any): any;
+    visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any;
+    visitEvent(ast: BoundEventAst, context: any): any;
+    visitNgContent(ast: NgContentAst, context: any): any;
+    visitReference(ast: ReferenceAst, context: any): any;
+    visitText(ast: TextAst, context: any): any;
+    visitVariable(ast: VariableAst, context: any): any;
+}
+
+export declare function templateVisitAll(visitor: TemplateAstVisitor, asts: TemplateAst[], context?: any): any[];
+
+export declare class TextAst implements TemplateAst {
+    ngContentIndex: number;
+    sourceSpan: ParseSourceSpan;
+    value: string;
+    constructor(value: string, ngContentIndex: number, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare class UrlResolver {
+    constructor(_packagePrefix?: string);
+    resolve(baseUrl: string, url: string): string;
+}
+
+export declare class VariableAst implements TemplateAst {
+    name: string;
+    sourceSpan: ParseSourceSpan;
+    value: string;
+    constructor(name: string, value: string, sourceSpan: ParseSourceSpan);
+    visit(visitor: TemplateAstVisitor, context: any): any;
+}
+
+export declare class ViewResolver {
+    constructor(_reflector?: ReflectorReader);
+    resolve(component: Type): ViewMetadata;
+}
+
+export declare class XHR {
+    get(url: string): Promise<string>;
+}
diff --git a/tools/public_api_guard/compiler/testing.d.ts b/tools/public_api_guard/compiler/testing.d.ts
new file mode 100644
index 000000000000..ad64f4673567
--- /dev/null
+++ b/tools/public_api_guard/compiler/testing.d.ts
@@ -0,0 +1,44 @@
+export declare class MockDirectiveResolver extends DirectiveResolver {
+    constructor(_injector: Injector);
+    resolve(type: Type): DirectiveMetadata;
+    setProvidersOverride(type: Type, providers: any[]): void;
+    setViewProvidersOverride(type: Type, viewProviders: any[]): void;
+}
+
+export declare class MockSchemaRegistry implements ElementSchemaRegistry {
+    attrPropMapping: {
+        [key: string]: string;
+    };
+    existingProperties: {
+        [key: string]: boolean;
+    };
+    constructor(existingProperties: {
+        [key: string]: boolean;
+    }, attrPropMapping: {
+        [key: string]: string;
+    });
+    getMappedPropName(attrName: string): string;
+    hasProperty(tagName: string, property: string): boolean;
+    securityContext(tagName: string, property: string): SecurityContext;
+}
+
+export declare class MockViewResolver extends ViewResolver {
+    constructor(_injector: Injector);
+    overrideViewDirective(component: Type, from: Type, to: Type): void;
+    resolve(component: Type): ViewMetadata;
+    setAnimations(component: Type, animations: AnimationEntryMetadata[]): void;
+    setInlineTemplate(component: Type, template: string): void;
+    setView(component: Type, view: ViewMetadata): void;
+}
+
+export declare class OverridingTestComponentBuilder extends TestComponentBuilder {
+    constructor(injector: Injector);
+    createAsync<T>(rootComponentType: ConcreteType<T>): Promise<ComponentFixture<T>>;
+    createSync<T>(rootComponentType: ConcreteType<T>): ComponentFixture<T>;
+    overrideAnimations(componentType: Type, animations: AnimationEntryMetadata[]): TestComponentBuilder;
+    overrideDirective(componentType: Type, from: Type, to: Type): OverridingTestComponentBuilder;
+    overrideProviders(type: Type, providers: any[]): OverridingTestComponentBuilder;
+    overrideTemplate(componentType: Type, template: string): OverridingTestComponentBuilder;
+    overrideView(componentType: Type, view: ViewMetadata): OverridingTestComponentBuilder;
+    overrideViewProviders(type: Type, providers: any[]): OverridingTestComponentBuilder;
+}
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
new file mode 100644
index 000000000000..669cef17302d
--- /dev/null
+++ b/tools/public_api_guard/core/core.d.ts
@@ -0,0 +1,975 @@
+export interface AfterContentChecked {
+    ngAfterContentChecked(): void;
+}
+
+export interface AfterContentInit {
+    ngAfterContentInit(): void;
+}
+
+export interface AfterViewChecked {
+    ngAfterViewChecked(): void;
+}
+
+export interface AfterViewInit {
+    ngAfterViewInit(): void;
+}
+
+/** @experimental */
+export declare const ANALYZE_FOR_ENTRY_COMPONENTS: InjectionToken<any>;
+
+/** @experimental */
+export declare const APP_BOOTSTRAP_LISTENER: InjectionToken<((compRef: ComponentRef<any>) => void)[]>;
+
+/** @experimental */
+export declare const APP_ID: InjectionToken<string>;
+
+export declare const APP_INITIALIZER: InjectionToken<(() => void)[]>;
+
+export declare class ApplicationInitStatus {
+    readonly done: boolean;
+    readonly donePromise: Promise<any>;
+    constructor(appInits: (() => any)[]);
+}
+
+/** @experimental */
+export declare class ApplicationModule {
+    constructor(appRef: ApplicationRef);
+}
+
+export declare class ApplicationRef {
+    readonly componentTypes: Type<any>[];
+    readonly components: ComponentRef<any>[];
+    readonly isStable: Observable<boolean>;
+    readonly viewCount: number;
+    attachView(viewRef: ViewRef): void;
+    bootstrap<C>(componentOrFactory: ComponentFactory<C> | Type<C>, rootSelectorOrNode?: string | any): ComponentRef<C>;
+    detachView(viewRef: ViewRef): void;
+    tick(): void;
+}
+
+/** @experimental */
+export declare function asNativeElements(debugEls: DebugElement[]): any;
+
+/** @experimental */
+export declare function assertPlatform(requiredToken: any): PlatformRef;
+
+export declare const Attribute: AttributeDecorator;
+
+export declare enum ChangeDetectionStrategy {
+    OnPush = 0,
+    Default = 1
+}
+
+export declare abstract class ChangeDetectorRef {
+    abstract checkNoChanges(): void;
+    abstract detach(): void;
+    abstract detectChanges(): void;
+    abstract markForCheck(): void;
+    abstract reattach(): void;
+}
+
+export interface ClassProvider extends ClassSansProvider {
+    multi?: boolean;
+    provide: any;
+}
+
+/** @deprecated */
+export interface CollectionChangeRecord<V> extends IterableChangeRecord<V> {
+}
+
+export declare class Compiler {
+    clearCache(): void;
+    clearCacheFor(type: Type<any>): void;
+    compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>): Promise<ModuleWithComponentFactories<T>>;
+    compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T>;
+    compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>>;
+    compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T>;
+    getModuleId(moduleType: Type<any>): string | undefined;
+}
+
+/** @experimental */
+export declare const COMPILER_OPTIONS: InjectionToken<CompilerOptions[]>;
+
+/** @experimental */
+export declare abstract class CompilerFactory {
+    abstract createCompiler(options?: CompilerOptions[]): Compiler;
+}
+
+/** @experimental */
+export declare type CompilerOptions = {
+    useJit?: boolean;
+    defaultEncapsulation?: ViewEncapsulation;
+    providers?: StaticProvider[];
+    missingTranslation?: MissingTranslationStrategy;
+    preserveWhitespaces?: boolean;
+};
+
+export declare const Component: ComponentDecorator;
+
+export interface ComponentDecorator {
+    (obj: Component): TypeDecorator;
+    new (obj: Component): Component;
+}
+
+export declare abstract class ComponentFactory<C> {
+    abstract readonly componentType: Type<any>;
+    abstract readonly inputs: {
+        propName: string;
+        templateName: string;
+    }[];
+    abstract readonly ngContentSelectors: string[];
+    abstract readonly outputs: {
+        propName: string;
+        templateName: string;
+    }[];
+    abstract readonly selector: string;
+    abstract create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string | any, ngModule?: NgModuleRef<any>): ComponentRef<C>;
+}
+
+export declare abstract class ComponentFactoryResolver {
+    abstract resolveComponentFactory<T>(component: Type<T>): ComponentFactory<T>;
+    static NULL: ComponentFactoryResolver;
+}
+
+export declare abstract class ComponentRef<C> {
+    abstract readonly changeDetectorRef: ChangeDetectorRef;
+    abstract readonly componentType: Type<any>;
+    abstract readonly hostView: ViewRef;
+    abstract readonly injector: Injector;
+    abstract readonly instance: C;
+    abstract readonly location: ElementRef;
+    abstract destroy(): void;
+    abstract onDestroy(callback: Function): void;
+}
+
+/** @experimental */
+export interface ConstructorSansProvider {
+    deps?: any[];
+}
+
+export declare const ContentChild: ContentChildDecorator;
+
+export interface ContentChildDecorator {
+    (selector: Type<any> | Function | string, opts?: {
+        read?: any;
+    }): any;
+    new (selector: Type<any> | Function | string, opts?: {
+        read?: any;
+    }): ContentChild;
+}
+
+export declare const ContentChildren: ContentChildrenDecorator;
+
+export interface ContentChildrenDecorator {
+    (selector: Type<any> | Function | string, opts?: {
+        descendants?: boolean;
+        read?: any;
+    }): any;
+    new (selector: Type<any> | Function | string, opts?: {
+        descendants?: boolean;
+        read?: any;
+    }): Query;
+}
+
+/** @experimental */
+export declare function createInjector(defType: any, parent?: Injector | null, additionalProviders?: StaticProvider[] | null): Injector;
+
+/** @experimental */
+export declare function createPlatform(injector: Injector): PlatformRef;
+
+/** @experimental */
+export declare function createPlatformFactory(parentPlatformFactory: ((extraProviders?: StaticProvider[]) => PlatformRef) | null, name: string, providers?: StaticProvider[]): (extraProviders?: StaticProvider[]) => PlatformRef;
+
+export declare const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata;
+
+/** @experimental */
+export declare class DebugElement extends DebugNode {
+    attributes: {
+        [key: string]: string | null;
+    };
+    childNodes: DebugNode[];
+    readonly children: DebugElement[];
+    classes: {
+        [key: string]: boolean;
+    };
+    name: string;
+    nativeElement: any;
+    properties: {
+        [key: string]: any;
+    };
+    styles: {
+        [key: string]: string | null;
+    };
+    constructor(nativeNode: any, parent: any, _debugContext: DebugContext);
+    addChild(child: DebugNode): void;
+    insertBefore(refChild: DebugNode, newChild: DebugNode): void;
+    insertChildrenAfter(child: DebugNode, newChildren: DebugNode[]): void;
+    query(predicate: Predicate<DebugElement>): DebugElement;
+    queryAll(predicate: Predicate<DebugElement>): DebugElement[];
+    queryAllNodes(predicate: Predicate<DebugNode>): DebugNode[];
+    removeChild(child: DebugNode): void;
+    triggerEventHandler(eventName: string, eventObj: any): void;
+}
+
+/** @experimental */
+export declare class DebugNode {
+    readonly componentInstance: any;
+    readonly context: any;
+    readonly injector: Injector;
+    listeners: EventListener[];
+    nativeNode: any;
+    parent: DebugElement | null;
+    readonly providerTokens: any[];
+    readonly references: {
+        [key: string]: any;
+    };
+    constructor(nativeNode: any, parent: DebugNode | null, _debugContext: DebugContext);
+}
+
+/** @deprecated */
+export declare class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChanges<V> {
+    readonly collection: V[] | Iterable<V> | null;
+    readonly isDirty: boolean;
+    readonly length: number;
+    constructor(trackByFn?: TrackByFunction<V>);
+    check(collection: NgIterable<V>): boolean;
+    diff(collection: NgIterable<V>): DefaultIterableDiffer<V> | null;
+    forEachAddedItem(fn: (record: IterableChangeRecord_<V>) => void): void;
+    forEachIdentityChange(fn: (record: IterableChangeRecord_<V>) => void): void;
+    forEachItem(fn: (record: IterableChangeRecord_<V>) => void): void;
+    forEachMovedItem(fn: (record: IterableChangeRecord_<V>) => void): void;
+    forEachOperation(fn: (item: IterableChangeRecord<V>, previousIndex: number | null, currentIndex: number | null) => void): void;
+    forEachPreviousItem(fn: (record: IterableChangeRecord_<V>) => void): void;
+    forEachRemovedItem(fn: (record: IterableChangeRecord_<V>) => void): void;
+    onDestroy(): void;
+}
+
+/** @experimental */
+export declare function defineInjectable<T>(opts: {
+    providedIn?: Type<any> | 'root' | 'any' | null;
+    factory: () => T;
+}): never;
+
+/** @experimental */
+export declare function defineInjector(options: {
+    factory: () => any;
+    providers?: any[];
+    imports?: any[];
+}): never;
+
+/** @experimental */
+export declare function destroyPlatform(): void;
+
+export declare const Directive: DirectiveDecorator;
+
+export interface DirectiveDecorator {
+    (obj: Directive): TypeDecorator;
+    new (obj: Directive): Directive;
+}
+
+export interface DoBootstrap {
+    ngDoBootstrap(appRef: ApplicationRef): void;
+}
+
+export interface DoCheck {
+    ngDoCheck(): void;
+}
+
+export declare class ElementRef<T = any> {
+    nativeElement: T;
+    constructor(nativeElement: T);
+}
+
+/** @experimental */
+export declare abstract class EmbeddedViewRef<C> extends ViewRef {
+    abstract readonly context: C;
+    abstract readonly rootNodes: any[];
+}
+
+export declare function enableProdMode(): void;
+
+export declare class ErrorHandler {
+    handleError(error: any): void;
+}
+
+export declare class EventEmitter<T> extends Subject<T> {
+    __isAsync: boolean;
+    constructor(isAsync?: boolean);
+    emit(value?: T): void;
+    subscribe(generatorOrNext?: any, error?: any, complete?: any): any;
+}
+
+export interface ExistingProvider extends ExistingSansProvider {
+    multi?: boolean;
+    provide: any;
+}
+
+export interface FactoryProvider extends FactorySansProvider {
+    multi?: boolean;
+    provide: any;
+}
+
+/** @experimental */
+export declare function forwardRef(forwardRefFn: ForwardRefFn): Type<any>;
+
+/** @experimental */
+export interface ForwardRefFn {
+    (): any;
+}
+
+/** @experimental */
+export declare function getDebugNode(nativeNode: any): DebugNode | null;
+
+/** @experimental */
+export declare function getModuleFactory(id: string): NgModuleFactory<any>;
+
+/** @experimental */
+export declare function getPlatform(): PlatformRef | null;
+
+/** @experimental */
+export interface GetTestability {
+    addToWindow(registry: TestabilityRegistry): void;
+    findTestabilityInTree(registry: TestabilityRegistry, elem: any, findInAncestors: boolean): Testability | null;
+}
+
+export declare const Host: HostDecorator;
+
+export declare const HostBinding: HostBindingDecorator;
+
+export interface HostDecorator {
+    (): any;
+    new (): Host;
+}
+
+export declare const HostListener: HostListenerDecorator;
+
+/** @experimental */
+export declare function inject<T>(token: Type<T> | InjectionToken<T>): T;
+export declare function inject<T>(token: Type<T> | InjectionToken<T>, flags?: InjectFlags): T | null;
+
+export declare const Inject: InjectDecorator;
+
+export declare const Injectable: InjectableDecorator;
+
+export interface InjectableDecorator {
+    (): any;
+    (options?: {
+        providedIn: Type<any> | 'root' | null;
+    } & InjectableProvider): any;
+    new (): Injectable;
+    new (options?: {
+        providedIn: Type<any> | 'root' | null;
+    } & InjectableProvider): Injectable;
+}
+
+/** @experimental */
+export declare type InjectableProvider = ValueSansProvider | ExistingSansProvider | StaticClassSansProvider | ConstructorSansProvider | FactorySansProvider | ClassSansProvider;
+
+/** @experimental */
+export interface InjectableType<T> extends Type<T> {
+    ngInjectableDef: never;
+}
+
+export interface InjectDecorator {
+    (token: any): any;
+    new (token: any): Inject;
+}
+
+export declare const enum InjectFlags {
+    Default = 0,
+    Host = 1,
+    Self = 2,
+    SkipSelf = 4,
+    Optional = 8
+}
+
+export declare class InjectionToken<T> {
+    protected _desc: string;
+    readonly ngInjectableDef: never | undefined;
+    constructor(_desc: string, options?: {
+        providedIn?: Type<any> | 'root' | null;
+        factory: () => T;
+    });
+    toString(): string;
+}
+
+export declare abstract class Injector {
+    abstract get<T>(token: Type<T> | InjectionToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
+    /** @deprecated */ abstract get(token: any, notFoundValue?: any): any;
+    static NULL: Injector;
+    static THROW_IF_NOT_FOUND: Object;
+    static ngInjectableDef: never;
+    /** @deprecated */ static create(providers: StaticProvider[], parent?: Injector): Injector;
+    static create(options: {
+        providers: StaticProvider[];
+        parent?: Injector;
+        name?: string;
+    }): Injector;
+}
+
+/** @experimental */
+export declare const INJECTOR: InjectionToken<Injector>;
+
+/** @experimental */
+export interface InjectorType<T> extends Type<T> {
+    ngInjectorDef: never;
+}
+
+export declare const Input: InputDecorator;
+
+/** @experimental */
+export declare function isDevMode(): boolean;
+
+export interface IterableChangeRecord<V> {
+    readonly currentIndex: number | null;
+    readonly item: V;
+    readonly previousIndex: number | null;
+    readonly trackById: any;
+}
+
+export interface IterableChanges<V> {
+    forEachAddedItem(fn: (record: IterableChangeRecord<V>) => void): void;
+    forEachIdentityChange(fn: (record: IterableChangeRecord<V>) => void): void;
+    forEachItem(fn: (record: IterableChangeRecord<V>) => void): void;
+    forEachMovedItem(fn: (record: IterableChangeRecord<V>) => void): void;
+    forEachOperation(fn: (record: IterableChangeRecord<V>, previousIndex: number | null, currentIndex: number | null) => void): void;
+    forEachPreviousItem(fn: (record: IterableChangeRecord<V>) => void): void;
+    forEachRemovedItem(fn: (record: IterableChangeRecord<V>) => void): void;
+}
+
+export interface IterableDiffer<V> {
+    diff(object: NgIterable<V>): IterableChanges<V> | null;
+}
+
+export interface IterableDifferFactory {
+    create<V>(trackByFn?: TrackByFunction<V>): IterableDiffer<V>;
+    supports(objects: any): boolean;
+}
+
+export declare class IterableDiffers {
+    /** @deprecated */ factories: IterableDifferFactory[];
+    constructor(factories: IterableDifferFactory[]);
+    find(iterable: any): IterableDifferFactory;
+    static ngInjectableDef: never;
+    static create(factories: IterableDifferFactory[], parent?: IterableDiffers): IterableDiffers;
+    static extend(factories: IterableDifferFactory[]): StaticProvider;
+}
+
+export interface KeyValueChangeRecord<K, V> {
+    readonly currentValue: V | null;
+    readonly key: K;
+    readonly previousValue: V | null;
+}
+
+export interface KeyValueChanges<K, V> {
+    forEachAddedItem(fn: (r: KeyValueChangeRecord<K, V>) => void): void;
+    forEachChangedItem(fn: (r: KeyValueChangeRecord<K, V>) => void): void;
+    forEachItem(fn: (r: KeyValueChangeRecord<K, V>) => void): void;
+    forEachPreviousItem(fn: (r: KeyValueChangeRecord<K, V>) => void): void;
+    forEachRemovedItem(fn: (r: KeyValueChangeRecord<K, V>) => void): void;
+}
+
+export interface KeyValueDiffer<K, V> {
+    diff(object: Map<K, V>): KeyValueChanges<K, V> | null;
+    diff(object: {
+        [key: string]: V;
+    }): KeyValueChanges<string, V> | null;
+}
+
+export interface KeyValueDifferFactory {
+    create<K, V>(): KeyValueDiffer<K, V>;
+    supports(objects: any): boolean;
+}
+
+export declare class KeyValueDiffers {
+    /** @deprecated */ factories: KeyValueDifferFactory[];
+    constructor(factories: KeyValueDifferFactory[]);
+    find(kv: any): KeyValueDifferFactory;
+    static create<S>(factories: KeyValueDifferFactory[], parent?: KeyValueDiffers): KeyValueDiffers;
+    static extend<S>(factories: KeyValueDifferFactory[]): StaticProvider;
+}
+
+/** @experimental */
+export declare const LOCALE_ID: InjectionToken<string>;
+
+/** @experimental */
+export declare enum MissingTranslationStrategy {
+    Error = 0,
+    Warning = 1,
+    Ignore = 2
+}
+
+/** @experimental */
+export declare class ModuleWithComponentFactories<T> {
+    componentFactories: ComponentFactory<any>[];
+    ngModuleFactory: NgModuleFactory<T>;
+    constructor(ngModuleFactory: NgModuleFactory<T>, componentFactories: ComponentFactory<any>[]);
+}
+
+export interface ModuleWithProviders<T = any> {
+    ngModule: Type<T>;
+    providers?: Provider[];
+}
+
+export declare type NgIterable<T> = Array<T> | Iterable<T>;
+
+export declare const NgModule: NgModuleDecorator;
+
+/** @experimental */
+export declare abstract class NgModuleFactory<T> {
+    abstract readonly moduleType: Type<T>;
+    abstract create(parentInjector: Injector | null): NgModuleRef<T>;
+}
+
+export declare abstract class NgModuleFactoryLoader {
+    abstract load(path: string): Promise<NgModuleFactory<any>>;
+}
+
+export declare abstract class NgModuleRef<T> {
+    abstract readonly componentFactoryResolver: ComponentFactoryResolver;
+    abstract readonly injector: Injector;
+    abstract readonly instance: T;
+    abstract destroy(): void;
+    abstract onDestroy(callback: () => void): void;
+}
+
+/** @experimental */
+export declare class NgProbeToken {
+    name: string;
+    token: any;
+    constructor(name: string, token: any);
+}
+
+/** @experimental */
+export declare class NgZone {
+    readonly hasPendingMacrotasks: boolean;
+    readonly hasPendingMicrotasks: boolean;
+    readonly isStable: boolean;
+    readonly onError: EventEmitter<any>;
+    readonly onMicrotaskEmpty: EventEmitter<any>;
+    readonly onStable: EventEmitter<any>;
+    readonly onUnstable: EventEmitter<any>;
+    constructor({ enableLongStackTrace }: {
+        enableLongStackTrace?: boolean;
+    });
+    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;
+}
+
+/** @experimental */
+export declare const NO_ERRORS_SCHEMA: SchemaMetadata;
+
+export interface OnChanges {
+    ngOnChanges(changes: SimpleChanges): void;
+}
+
+export interface OnDestroy {
+    ngOnDestroy(): void;
+}
+
+export interface OnInit {
+    ngOnInit(): void;
+}
+
+export declare const Optional: OptionalDecorator;
+
+export interface OptionalDecorator {
+    (): any;
+    new (): Optional;
+}
+
+export declare const Output: OutputDecorator;
+
+/** @experimental */
+export declare const PACKAGE_ROOT_URL: InjectionToken<string>;
+
+export declare const Pipe: PipeDecorator;
+
+export interface PipeTransform {
+    transform(value: any, ...args: any[]): any;
+}
+
+/** @experimental */
+export declare const PLATFORM_ID: InjectionToken<Object>;
+
+/** @experimental */
+export declare const PLATFORM_INITIALIZER: InjectionToken<(() => void)[]>;
+
+/** @experimental */
+export declare const platformCore: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
+
+export declare class PlatformRef {
+    readonly destroyed: boolean;
+    readonly injector: Injector;
+    bootstrapModule<M>(moduleType: Type<M>, compilerOptions?: (CompilerOptions & BootstrapOptions) | Array<CompilerOptions & BootstrapOptions>): Promise<NgModuleRef<M>>;
+    /** @experimental */ bootstrapModuleFactory<M>(moduleFactory: NgModuleFactory<M>, options?: BootstrapOptions): Promise<NgModuleRef<M>>;
+    destroy(): void;
+    onDestroy(callback: () => void): void;
+}
+
+/** @experimental */
+export interface Predicate<T> {
+    (value: T): boolean;
+}
+
+export declare type Provider = TypeProvider | ValueProvider | ClassProvider | ConstructorProvider | ExistingProvider | FactoryProvider | any[];
+
+export declare abstract class Query {
+}
+
+export declare class QueryList<T> {
+    readonly changes: Observable<any>;
+    readonly dirty: boolean;
+    readonly first: T;
+    readonly last: T;
+    readonly length: number;
+    destroy(): void;
+    filter(fn: (item: T, index: number, array: T[]) => boolean): T[];
+    find(fn: (item: T, index: number, array: T[]) => boolean): T | undefined;
+    forEach(fn: (item: T, index: number, array: T[]) => void): void;
+    map<U>(fn: (item: T, index: number, array: T[]) => U): U[];
+    notifyOnChanges(): void;
+    reduce<U>(fn: (prevValue: U, curValue: T, curIndex: number, array: T[]) => U, init: U): U;
+    reset(res: Array<T | any[]>): void;
+    setDirty(): void;
+    some(fn: (value: T, index: number, array: T[]) => boolean): boolean;
+    toArray(): T[];
+    toString(): string;
+}
+
+/** @deprecated */
+export declare abstract class ReflectiveInjector implements Injector {
+    abstract readonly parent: Injector | null;
+    abstract createChildFromResolved(providers: ResolvedReflectiveProvider[]): ReflectiveInjector;
+    abstract get(token: any, notFoundValue?: any): any;
+    abstract instantiateResolved(provider: ResolvedReflectiveProvider): any;
+    abstract resolveAndCreateChild(providers: Provider[]): ReflectiveInjector;
+    abstract resolveAndInstantiate(provider: Provider): any;
+    /** @experimental */ static fromResolvedProviders(providers: ResolvedReflectiveProvider[], parent?: Injector): ReflectiveInjector;
+    static resolve(providers: Provider[]): ResolvedReflectiveProvider[];
+    static resolveAndCreate(providers: Provider[], parent?: Injector): ReflectiveInjector;
+}
+
+/** @deprecated */
+export declare class ReflectiveKey {
+    readonly displayName: string;
+    id: number;
+    token: Object;
+    constructor(token: Object, id: number);
+    static readonly numberOfKeys: number;
+    static get(token: Object): ReflectiveKey;
+}
+
+/** @deprecated */
+export declare class RenderComponentType {
+    animations: any;
+    encapsulation: ViewEncapsulation;
+    id: string;
+    slotCount: number;
+    styles: Array<string | any[]>;
+    templateUrl: string;
+    constructor(id: string, templateUrl: string, slotCount: number, encapsulation: ViewEncapsulation, styles: Array<string | any[]>, animations: any);
+}
+
+/** @deprecated */
+export declare abstract class Renderer {
+    abstract animate(element: any, startingStyles: any, keyframes: any[], duration: number, delay: number, easing: string, previousPlayers?: any[]): any;
+    abstract attachViewAfter(node: any, viewRootNodes: any[]): void;
+    abstract createElement(parentElement: any, name: string, debugInfo?: RenderDebugInfo): any;
+    abstract createTemplateAnchor(parentElement: any, debugInfo?: RenderDebugInfo): any;
+    abstract createText(parentElement: any, value: string, debugInfo?: RenderDebugInfo): any;
+    abstract createViewRoot(hostElement: any): any;
+    abstract destroyView(hostElement: any, viewAllNodes: any[]): void;
+    abstract detachView(viewRootNodes: any[]): void;
+    abstract invokeElementMethod(renderElement: any, methodName: string, args?: any[]): void;
+    abstract listen(renderElement: any, name: string, callback: Function): Function;
+    abstract listenGlobal(target: string, name: string, callback: Function): Function;
+    abstract projectNodes(parentElement: any, nodes: any[]): void;
+    abstract selectRootElement(selectorOrNode: string | any, debugInfo?: RenderDebugInfo): any;
+    abstract setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string): void;
+    abstract setElementAttribute(renderElement: any, attributeName: string, attributeValue: string): void;
+    abstract setElementClass(renderElement: any, className: string, isAdd: boolean): void;
+    abstract setElementProperty(renderElement: any, propertyName: string, propertyValue: any): void;
+    abstract setElementStyle(renderElement: any, styleName: string, styleValue: string): void;
+    abstract setText(renderNode: any, text: string): void;
+}
+
+/** @experimental */
+export declare abstract class Renderer2 {
+    abstract readonly data: {
+        [key: string]: any;
+    };
+    destroyNode: ((node: any) => void) | null;
+    abstract addClass(el: any, name: string): void;
+    abstract appendChild(parent: any, newChild: any): void;
+    abstract createComment(value: string): any;
+    abstract createElement(name: string, namespace?: string | null): any;
+    abstract createText(value: string): any;
+    abstract destroy(): void;
+    abstract insertBefore(parent: any, newChild: any, refChild: any): void;
+    abstract listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void;
+    abstract nextSibling(node: any): any;
+    abstract parentNode(node: any): any;
+    abstract removeAttribute(el: any, name: string, namespace?: string | null): void;
+    abstract removeChild(parent: any, oldChild: any): void;
+    abstract removeClass(el: any, name: string): void;
+    abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void;
+    abstract selectRootElement(selectorOrNode: string | any): any;
+    abstract setAttribute(el: any, name: string, value: string, namespace?: string | null): void;
+    abstract setProperty(el: any, name: string, value: any): void;
+    abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void;
+    abstract setValue(node: any, value: string): void;
+}
+
+/** @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 */
+export declare enum RendererStyleFlags2 {
+    Important = 1,
+    DashCase = 2
+}
+
+/** @experimental */
+export interface RendererType2 {
+    data: {
+        [kind: string]: any;
+    };
+    encapsulation: ViewEncapsulation;
+    id: string;
+    styles: (string | any[])[];
+}
+
+/** @experimental */
+export declare class ResolvedReflectiveFactory {
+    dependencies: ReflectiveDependency[];
+    factory: Function;
+    constructor(
+    factory: Function,
+    dependencies: ReflectiveDependency[]);
+}
+
+/** @experimental */
+export interface ResolvedReflectiveProvider {
+    key: ReflectiveKey;
+    multiProvider: boolean;
+    resolvedFactories: ResolvedReflectiveFactory[];
+}
+
+/** @experimental */
+export declare function resolveForwardRef(type: any): any;
+
+/** @deprecated */
+export declare abstract class RootRenderer {
+    abstract renderComponent(componentType: RenderComponentType): Renderer;
+}
+
+export declare abstract class Sanitizer {
+    abstract sanitize(context: SecurityContext, value: {} | string | null): string | null;
+}
+
+/** @experimental */
+export interface SchemaMetadata {
+    name: string;
+}
+
+export declare enum SecurityContext {
+    NONE = 0,
+    HTML = 1,
+    STYLE = 2,
+    SCRIPT = 3,
+    URL = 4,
+    RESOURCE_URL = 5
+}
+
+export declare const Self: SelfDecorator;
+
+export interface SelfDecorator {
+    (): any;
+    new (): Self;
+}
+
+/** @experimental */
+export declare function setTestabilityGetter(getter: GetTestability): void;
+
+export declare class SimpleChange {
+    currentValue: any;
+    firstChange: boolean;
+    previousValue: any;
+    constructor(previousValue: any, currentValue: any, firstChange: boolean);
+    isFirstChange(): boolean;
+}
+
+export interface SimpleChanges {
+    [propName: string]: SimpleChange;
+}
+
+export declare const SkipSelf: SkipSelfDecorator;
+
+export interface SkipSelfDecorator {
+    (): any;
+    new (): SkipSelf;
+}
+
+export declare type StaticProvider = ValueProvider | ExistingProvider | StaticClassProvider | ConstructorProvider | FactoryProvider | any[];
+
+/** @experimental */
+export declare class SystemJsNgModuleLoader implements NgModuleFactoryLoader {
+    constructor(_compiler: Compiler, config?: SystemJsNgModuleLoaderConfig);
+    load(path: string): Promise<NgModuleFactory<any>>;
+}
+
+/** @experimental */
+export declare abstract class SystemJsNgModuleLoaderConfig {
+    factoryPathPrefix: string;
+    factoryPathSuffix: string;
+}
+
+export declare abstract class TemplateRef<C> {
+    abstract readonly elementRef: ElementRef;
+    abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;
+}
+
+/** @experimental */
+export declare class Testability implements PublicTestability {
+    constructor(_ngZone: NgZone);
+    /** @deprecated */ decreasePendingRequestCount(): number;
+    findProviders(using: any, provider: string, exactMatch: boolean): any[];
+    /** @deprecated */ getPendingRequestCount(): number;
+    /** @deprecated */ increasePendingRequestCount(): number;
+    isStable(): boolean;
+    whenStable(doneCb: Function, timeout?: number, updateCb?: Function): void;
+}
+
+/** @experimental */
+export declare class TestabilityRegistry {
+    constructor();
+    findTestabilityInTree(elem: Node, findInAncestors?: boolean): Testability | null;
+    getAllRootElements(): any[];
+    getAllTestabilities(): Testability[];
+    getTestability(elem: any): Testability | null;
+    registerApplication(token: any, testability: Testability): void;
+    unregisterAllApplications(): void;
+    unregisterApplication(token: any): void;
+}
+
+export interface TrackByFunction<T> {
+    (index: number, item: T): any;
+}
+
+/** @experimental */
+export declare const TRANSLATIONS: InjectionToken<string>;
+
+/** @experimental */
+export declare const TRANSLATIONS_FORMAT: InjectionToken<string>;
+
+export declare const Type: FunctionConstructor;
+
+export interface TypeDecorator {
+    (target: Object, propertyKey?: string | symbol, parameterIndex?: number): void;
+    <T extends Type<any>>(type: T): T;
+}
+
+export interface TypeProvider extends Type<any> {
+}
+
+export interface ValueProvider extends ValueSansProvider {
+    multi?: boolean;
+    provide: any;
+}
+
+export declare class Version {
+    full: string;
+    readonly major: string;
+    readonly minor: string;
+    readonly patch: string;
+    constructor(full: string);
+}
+
+export declare const VERSION: Version;
+
+export declare const ViewChild: ViewChildDecorator;
+
+export interface ViewChildDecorator {
+    (selector: Type<any> | Function | string, opts?: {
+        read?: any;
+    }): any;
+    new (selector: Type<any> | Function | string, opts?: {
+        read?: any;
+    }): ViewChild;
+}
+
+export declare const ViewChildren: ViewChildrenDecorator;
+
+export interface ViewChildrenDecorator {
+    (selector: Type<any> | Function | string, opts?: {
+        read?: any;
+    }): any;
+    new (selector: Type<any> | Function | string, opts?: {
+        read?: any;
+    }): ViewChildren;
+}
+
+export declare abstract class ViewContainerRef {
+    abstract readonly element: ElementRef;
+    abstract readonly injector: Injector;
+    abstract readonly length: number;
+    /** @deprecated */ abstract readonly parentInjector: Injector;
+    abstract clear(): void;
+    abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;
+    abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>;
+    abstract detach(index?: number): ViewRef | null;
+    abstract get(index: number): ViewRef | null;
+    abstract indexOf(viewRef: ViewRef): number;
+    abstract insert(viewRef: ViewRef, index?: number): ViewRef;
+    abstract move(viewRef: ViewRef, currentIndex: number): ViewRef;
+    abstract remove(index?: number): void;
+}
+
+export declare enum ViewEncapsulation {
+    Emulated = 0,
+    Native = 1,
+    None = 2,
+    ShadowDom = 3
+}
+
+export declare abstract class ViewRef extends ChangeDetectorRef {
+    abstract readonly destroyed: boolean;
+    abstract destroy(): void;
+    abstract onDestroy(callback: Function): any /** TODO #9100 */;
+}
+
+export declare class WrappedValue {
+    /** @deprecated */ wrapped: any;
+    constructor(value: any);
+    static isWrapped(value: any): value is WrappedValue;
+    static unwrap(value: any): any;
+    static wrap(value: any): WrappedValue;
+}
+
+/** @experimental */
+export declare const wtfCreateScope: (signature: string, flags?: any) => WtfScopeFn;
+
+/** @experimental */
+export declare const wtfEndTimeRange: (range: any) => void;
+
+/** @experimental */
+export declare const wtfLeave: <T>(scope: any, returnValue?: T) => T;
+
+/** @experimental */
+export interface WtfScopeFn {
+    (arg0?: any, arg1?: any): any;
+}
+
+/** @experimental */
+export declare const wtfStartTimeRange: (rangeType: string, action: string) => any;
diff --git a/tools/public_api_guard/core/testing.d.ts b/tools/public_api_guard/core/testing.d.ts
new file mode 100644
index 000000000000..f4b77d98fd5b
--- /dev/null
+++ b/tools/public_api_guard/core/testing.d.ts
@@ -0,0 +1,126 @@
+export declare function async(fn: Function): (done: any) => any;
+
+export declare class ComponentFixture<T> {
+    changeDetectorRef: ChangeDetectorRef;
+    componentInstance: T;
+    componentRef: ComponentRef<T>;
+    debugElement: DebugElement;
+    elementRef: ElementRef;
+    nativeElement: any;
+    ngZone: NgZone | null;
+    constructor(componentRef: ComponentRef<T>, ngZone: NgZone | null, _autoDetect: boolean);
+    autoDetectChanges(autoDetect?: boolean): void;
+    checkNoChanges(): void;
+    destroy(): void;
+    detectChanges(checkNoChanges?: boolean): void;
+    isStable(): boolean;
+    whenRenderingDone(): Promise<any>;
+    whenStable(): Promise<any>;
+}
+
+/** @experimental */
+export declare const ComponentFixtureAutoDetect: InjectionToken<boolean[]>;
+
+/** @experimental */
+export declare const ComponentFixtureNoNgZone: InjectionToken<boolean[]>;
+
+/** @experimental */
+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;
+
+/** @experimental */
+export declare const getTestBed: () => TestBed;
+
+export declare function inject(tokens: any[], fn: Function): () => any;
+
+/** @experimental */
+export declare class InjectSetupWrapper {
+    constructor(_moduleDef: () => TestModuleMetadata);
+    inject(tokens: any[], fn: Function): () => any;
+}
+
+/** @experimental */
+export declare type MetadataOverride<T> = {
+    add?: Partial<T>;
+    remove?: Partial<T>;
+    set?: Partial<T>;
+};
+
+/** @experimental */
+export declare function resetFakeAsyncZone(): void;
+
+export declare const TestBed: TestBedStatic;
+
+export interface TestBedStatic {
+    new (...args: any[]): TestBed;
+    compileComponents(): Promise<any>;
+    configureCompiler(config: {
+        providers?: any[];
+        useJit?: boolean;
+    }): TestBedStatic;
+    configureTestingModule(moduleDef: TestModuleMetadata): TestBedStatic;
+    createComponent<T>(component: Type<T>): ComponentFixture<T>;
+    deprecatedOverrideProvider(token: any, provider: {
+        useFactory?: Function;
+        useValue?: any;
+        deps?: any[];
+    }): TestBedStatic;
+    deprecatedOverrideProvider(token: any, provider: {
+        useValue: any;
+    }): void;
+    /** @deprecated */ deprecatedOverrideProvider(token: any, provider: {
+        useFactory: Function;
+        deps: any[];
+    }): void;
+    get(token: any, notFoundValue?: any): any;
+    initTestEnvironment(ngModule: Type<any> | Type<any>[], platform: PlatformRef, aotSummaries?: () => any[]): TestBed;
+    overrideComponent(component: Type<any>, override: MetadataOverride<Component>): TestBedStatic;
+    overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): TestBedStatic;
+    overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): TestBedStatic;
+    overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): TestBedStatic;
+    overrideProvider(token: any, provider: {
+        useValue: any;
+    }): TestBedStatic;
+    overrideProvider(token: any, provider: {
+        useFactory?: Function;
+        useValue?: any;
+        deps?: any[];
+    }): TestBedStatic;
+    overrideProvider(token: any, provider: {
+        useFactory: Function;
+        deps: any[];
+    }): TestBedStatic;
+    overrideTemplate(component: Type<any>, template: string): TestBedStatic;
+    overrideTemplateUsingTestingModule(component: Type<any>, template: string): TestBedStatic;
+    /** @experimental */ resetTestEnvironment(): void;
+    resetTestingModule(): TestBedStatic;
+}
+
+/** @experimental */
+export declare class TestComponentRenderer {
+    insertRootElement(rootElementId: string): void;
+}
+
+/** @experimental */
+export declare type TestModuleMetadata = {
+    providers?: any[];
+    declarations?: any[];
+    imports?: any[];
+    schemas?: Array<SchemaMetadata | any[]>;
+    aotSummaries?: () => any[];
+};
+
+/** @experimental */
+export declare function tick(millis?: number): void;
+
+/** @experimental */
+export declare function withModule(moduleDef: TestModuleMetadata): InjectSetupWrapper;
+export declare function withModule(moduleDef: TestModuleMetadata, fn: Function): () => any;
diff --git a/tools/public_api_guard/elements/elements.d.ts b/tools/public_api_guard/elements/elements.d.ts
new file mode 100644
index 000000000000..4902a453b8eb
--- /dev/null
+++ b/tools/public_api_guard/elements/elements.d.ts
@@ -0,0 +1,51 @@
+/** @experimental */
+export declare function createCustomElement<P>(component: Type<any>, config: NgElementConfig): NgElementConstructor<P>;
+
+/** @experimental */
+export declare abstract class NgElement extends HTMLElement {
+    protected ngElementEventsSubscription: Subscription | null;
+    protected ngElementStrategy: NgElementStrategy;
+    abstract attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string, namespace?: string): void;
+    abstract connectedCallback(): void;
+    abstract disconnectedCallback(): void;
+}
+
+/** @experimental */
+export interface NgElementConfig {
+    injector: Injector;
+    strategyFactory?: NgElementStrategyFactory;
+}
+
+/** @experimental */
+export interface NgElementConstructor<P> {
+    readonly observedAttributes: string[];
+    new (injector: Injector): NgElement & WithProperties<P>;
+}
+
+/** @experimental */
+export interface NgElementStrategy {
+    events: Observable<NgElementStrategyEvent>;
+    connect(element: HTMLElement): void;
+    disconnect(): void;
+    getInputValue(propName: string): any;
+    setInputValue(propName: string, value: string): void;
+}
+
+/** @experimental */
+export interface NgElementStrategyEvent {
+    name: string;
+    value: any;
+}
+
+/** @experimental */
+export interface NgElementStrategyFactory {
+    create(injector: Injector): NgElementStrategy;
+}
+
+/** @experimental */
+export declare const VERSION: Version;
+
+/** @experimental */
+export declare type WithProperties<P> = {
+    [property in keyof P]: P[property];
+};
diff --git a/tools/public_api_guard/forms/forms.d.ts b/tools/public_api_guard/forms/forms.d.ts
new file mode 100644
index 000000000000..49695f77f5af
--- /dev/null
+++ b/tools/public_api_guard/forms/forms.d.ts
@@ -0,0 +1,530 @@
+export declare abstract class AbstractControl {
+    asyncValidator: AsyncValidatorFn | null;
+    readonly dirty: boolean;
+    readonly disabled: boolean;
+    readonly enabled: boolean;
+    readonly errors: ValidationErrors | null;
+    readonly invalid: boolean;
+    readonly parent: FormGroup | FormArray;
+    readonly pending: boolean;
+    readonly pristine: boolean;
+    readonly root: AbstractControl;
+    readonly status: string;
+    readonly statusChanges: Observable<any>;
+    readonly touched: boolean;
+    readonly untouched: boolean;
+    readonly updateOn: FormHooks;
+    readonly valid: boolean;
+    validator: ValidatorFn | null;
+    readonly value: any;
+    readonly valueChanges: Observable<any>;
+    constructor(validator: ValidatorFn | null, asyncValidator: AsyncValidatorFn | null);
+    clearAsyncValidators(): void;
+    clearValidators(): void;
+    disable(opts?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+    enable(opts?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+    get(path: Array<string | number> | string): AbstractControl | null;
+    getError(errorCode: string, path?: string[]): any;
+    hasError(errorCode: string, path?: string[]): boolean;
+    markAsDirty(opts?: {
+        onlySelf?: boolean;
+    }): void;
+    markAsPending(opts?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+    markAsPristine(opts?: {
+        onlySelf?: boolean;
+    }): void;
+    markAsTouched(opts?: {
+        onlySelf?: boolean;
+    }): void;
+    markAsUntouched(opts?: {
+        onlySelf?: boolean;
+    }): void;
+    abstract patchValue(value: any, options?: Object): void;
+    abstract reset(value?: any, options?: Object): void;
+    setAsyncValidators(newValidator: AsyncValidatorFn | AsyncValidatorFn[] | null): void;
+    setErrors(errors: ValidationErrors | null, opts?: {
+        emitEvent?: boolean;
+    }): void;
+    setParent(parent: FormGroup | FormArray): void;
+    setValidators(newValidator: ValidatorFn | ValidatorFn[] | null): void;
+    abstract setValue(value: any, options?: Object): void;
+    updateValueAndValidity(opts?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+}
+
+export declare abstract class AbstractControlDirective {
+    abstract readonly control: AbstractControl | null;
+    readonly dirty: boolean | null;
+    readonly disabled: boolean | null;
+    readonly enabled: boolean | null;
+    readonly errors: ValidationErrors | null;
+    readonly invalid: boolean | null;
+    readonly path: string[] | null;
+    readonly pending: boolean | null;
+    readonly pristine: boolean | null;
+    readonly status: string | 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> | null;
+    getError(errorCode: string, path?: string[]): any;
+    hasError(errorCode: string, path?: string[]): boolean;
+    reset(value?: any): void;
+}
+
+/** @experimental */
+export interface AbstractControlOptions {
+    asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null;
+    updateOn?: 'change' | 'blur' | 'submit';
+    validators?: ValidatorFn | ValidatorFn[] | null;
+}
+
+export declare class AbstractFormGroupDirective extends ControlContainer implements OnInit, OnDestroy {
+    readonly asyncValidator: AsyncValidatorFn | null;
+    readonly control: FormGroup;
+    readonly formDirective: Form | null;
+    readonly path: string[];
+    readonly validator: ValidatorFn | null;
+    ngOnDestroy(): void;
+    ngOnInit(): void;
+}
+
+/** @experimental */
+export interface AsyncValidator extends Validator {
+    validate(c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
+}
+
+export interface AsyncValidatorFn {
+    (c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
+}
+
+export declare class CheckboxControlValueAccessor implements ControlValueAccessor {
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    constructor(_renderer: Renderer2, _elementRef: ElementRef);
+    registerOnChange(fn: (_: any) => {}): void;
+    registerOnTouched(fn: () => {}): void;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: any): void;
+}
+
+/** @experimental */
+export declare class CheckboxRequiredValidator extends RequiredValidator {
+    validate(c: AbstractControl): ValidationErrors | null;
+}
+
+/** @experimental */
+export declare const COMPOSITION_BUFFER_MODE: InjectionToken<boolean>;
+
+export declare abstract class ControlContainer extends AbstractControlDirective {
+    readonly formDirective: Form | null;
+    name: string;
+    readonly path: string[] | null;
+}
+
+export interface ControlValueAccessor {
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    writeValue(obj: any): void;
+}
+
+export declare class DefaultValueAccessor implements ControlValueAccessor {
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    constructor(_renderer: Renderer2, _elementRef: ElementRef, _compositionMode: boolean);
+    registerOnChange(fn: (_: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: any): void;
+}
+
+/** @experimental */
+export declare class EmailValidator implements Validator {
+    email: boolean | string;
+    registerOnValidatorChange(fn: () => void): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+}
+
+export interface Form {
+    addControl(dir: NgControl): void;
+    addFormGroup(dir: AbstractFormGroupDirective): void;
+    getControl(dir: NgControl): FormControl;
+    getFormGroup(dir: AbstractFormGroupDirective): FormGroup;
+    removeControl(dir: NgControl): void;
+    removeFormGroup(dir: AbstractFormGroupDirective): void;
+    updateModel(dir: NgControl, value: any): void;
+}
+
+export declare class FormArray extends AbstractControl {
+    controls: AbstractControl[];
+    readonly length: number;
+    constructor(controls: AbstractControl[], validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
+    at(index: number): AbstractControl;
+    getRawValue(): any[];
+    insert(index: number, control: AbstractControl): void;
+    patchValue(value: any[], options?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+    push(control: AbstractControl): void;
+    removeAt(index: number): void;
+    reset(value?: any, options?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+    setControl(index: number, control: AbstractControl): void;
+    setValue(value: any[], options?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+}
+
+export declare class FormArrayName extends ControlContainer implements OnInit, OnDestroy {
+    readonly asyncValidator: AsyncValidatorFn | null;
+    readonly control: FormArray;
+    readonly formDirective: FormGroupDirective | null;
+    name: string;
+    readonly path: string[];
+    readonly validator: ValidatorFn | null;
+    constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
+    ngOnDestroy(): void;
+    ngOnInit(): void;
+}
+
+export declare class FormBuilder {
+    array(controlsConfig: any[], validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormArray;
+    control(formState: any, validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormControl;
+    group(controlsConfig: {
+        [key: string]: any;
+    }, extra?: {
+        [key: string]: any;
+    } | null): FormGroup;
+}
+
+export declare class FormControl extends AbstractControl {
+    constructor(formState?: any, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
+    patchValue(value: any, options?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+        emitModelToViewChange?: boolean;
+        emitViewToModelChange?: boolean;
+    }): void;
+    registerOnChange(fn: Function): void;
+    registerOnDisabledChange(fn: (isDisabled: boolean) => void): void;
+    reset(formState?: any, options?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+    setValue(value: any, options?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+        emitModelToViewChange?: boolean;
+        emitViewToModelChange?: boolean;
+    }): void;
+}
+
+export declare class FormControlDirective extends NgControl implements OnChanges {
+    readonly asyncValidator: AsyncValidatorFn | null;
+    readonly control: FormControl;
+    form: FormControl;
+    isDisabled: boolean;
+    /** @deprecated */ model: any;
+    readonly path: string[];
+    /** @deprecated */ update: EventEmitter<{}>;
+    readonly validator: ValidatorFn | null;
+    viewModel: any;
+    constructor(validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
+    ngOnChanges(changes: SimpleChanges): void;
+    viewToModelUpdate(newValue: any): void;
+}
+
+export declare class FormControlName extends NgControl implements OnChanges, OnDestroy {
+    readonly asyncValidator: AsyncValidatorFn;
+    readonly control: FormControl;
+    readonly formDirective: any;
+    isDisabled: boolean;
+    /** @deprecated */ model: any;
+    name: string;
+    readonly path: string[];
+    /** @deprecated */ update: EventEmitter<{}>;
+    readonly validator: ValidatorFn | null;
+    constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    viewToModelUpdate(newValue: any): void;
+}
+
+export declare class FormGroup extends AbstractControl {
+    controls: {
+        [key: string]: AbstractControl;
+    };
+    constructor(controls: {
+        [key: string]: AbstractControl;
+    }, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
+    addControl(name: string, control: AbstractControl): void;
+    contains(controlName: string): boolean;
+    getRawValue(): any;
+    patchValue(value: {
+        [key: string]: any;
+    }, options?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+    registerControl(name: string, control: AbstractControl): AbstractControl;
+    removeControl(name: string): void;
+    reset(value?: any, options?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+    setControl(name: string, control: AbstractControl): void;
+    setValue(value: {
+        [key: string]: any;
+    }, options?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+}
+
+export declare class FormGroupDirective extends ControlContainer implements Form, OnChanges {
+    readonly control: FormGroup;
+    directives: FormControlName[];
+    form: FormGroup;
+    readonly formDirective: Form;
+    ngSubmit: EventEmitter<{}>;
+    readonly path: string[];
+    readonly submitted: boolean;
+    constructor(_validators: any[], _asyncValidators: any[]);
+    addControl(dir: FormControlName): FormControl;
+    addFormArray(dir: FormArrayName): void;
+    addFormGroup(dir: FormGroupName): void;
+    getControl(dir: FormControlName): FormControl;
+    getFormArray(dir: FormArrayName): FormArray;
+    getFormGroup(dir: FormGroupName): FormGroup;
+    ngOnChanges(changes: SimpleChanges): void;
+    onReset(): void;
+    onSubmit($event: Event): boolean;
+    removeControl(dir: FormControlName): void;
+    removeFormArray(dir: FormArrayName): void;
+    removeFormGroup(dir: FormGroupName): void;
+    resetForm(value?: any): void;
+    updateModel(dir: FormControlName, value: any): void;
+}
+
+export declare class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy {
+    name: string;
+    constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
+}
+
+export declare class FormsModule {
+    static withConfig(opts: { warnOnDeprecatedNgFormSelector?: 'never' | 'once' | 'always';
+    }): ModuleWithProviders;
+}
+
+export declare class MaxLengthValidator implements Validator, OnChanges {
+    maxlength: string;
+    ngOnChanges(changes: SimpleChanges): void;
+    registerOnValidatorChange(fn: () => void): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+}
+
+export declare class MinLengthValidator implements Validator, OnChanges {
+    minlength: string;
+    ngOnChanges(changes: SimpleChanges): void;
+    registerOnValidatorChange(fn: () => void): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+}
+
+export declare const NG_ASYNC_VALIDATORS: InjectionToken<(Function | Validator)[]>;
+
+export declare const NG_VALIDATORS: InjectionToken<(Function | Validator)[]>;
+
+export declare const NG_VALUE_ACCESSOR: InjectionToken<ControlValueAccessor>;
+
+export declare abstract class NgControl extends AbstractControlDirective {
+    readonly asyncValidator: AsyncValidatorFn | null;
+    name: string | null;
+    readonly validator: ValidatorFn | null;
+    valueAccessor: ControlValueAccessor | null;
+    abstract viewToModelUpdate(newValue: any): void;
+}
+
+export declare class NgControlStatus extends AbstractControlStatus {
+    constructor(cd: NgControl);
+}
+
+export declare class NgControlStatusGroup extends AbstractControlStatus {
+    constructor(cd: ControlContainer);
+}
+
+export declare class NgForm extends ControlContainer implements Form, AfterViewInit {
+    readonly control: FormGroup;
+    readonly controls: {
+        [key: string]: AbstractControl;
+    };
+    form: FormGroup;
+    readonly formDirective: Form;
+    ngSubmit: EventEmitter<{}>;
+    options: {
+        updateOn?: FormHooks;
+    };
+    readonly path: string[];
+    readonly submitted: boolean;
+    constructor(validators: any[], asyncValidators: any[]);
+    addControl(dir: NgModel): void;
+    addFormGroup(dir: NgModelGroup): void;
+    getControl(dir: NgModel): FormControl;
+    getFormGroup(dir: NgModelGroup): FormGroup;
+    ngAfterViewInit(): void;
+    onReset(): void;
+    onSubmit($event: Event): boolean;
+    removeControl(dir: NgModel): void;
+    removeFormGroup(dir: NgModelGroup): void;
+    resetForm(value?: any): void;
+    setValue(value: {
+        [key: string]: any;
+    }): void;
+    updateModel(dir: NgControl, value: any): void;
+}
+
+/** @deprecated */
+export declare class NgFormSelectorWarning {
+    constructor(ngFormWarning: string | null);
+}
+
+export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
+    readonly asyncValidator: AsyncValidatorFn | null;
+    readonly control: FormControl;
+    readonly formDirective: any;
+    isDisabled: boolean;
+    model: any;
+    name: string;
+    options: {
+        name?: string;
+        standalone?: boolean;
+        updateOn?: FormHooks;
+    };
+    readonly path: string[];
+    update: EventEmitter<{}>;
+    readonly validator: ValidatorFn | null;
+    viewModel: any;
+    constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    viewToModelUpdate(newValue: any): void;
+}
+
+export declare class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy {
+    name: string;
+    constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
+}
+
+export declare class NgSelectOption implements OnDestroy {
+    id: string;
+    ngValue: any;
+    value: any;
+    constructor(_element: ElementRef, _renderer: Renderer2, _select: SelectControlValueAccessor);
+    ngOnDestroy(): void;
+}
+
+export declare class PatternValidator implements Validator, OnChanges {
+    pattern: string | RegExp;
+    ngOnChanges(changes: SimpleChanges): void;
+    registerOnValidatorChange(fn: () => void): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+}
+
+export declare class RadioControlValueAccessor implements ControlValueAccessor, OnDestroy, OnInit {
+    formControlName: string;
+    name: string;
+    onChange: () => void;
+    onTouched: () => void;
+    value: any;
+    constructor(_renderer: Renderer2, _elementRef: ElementRef, _registry: RadioControlRegistry, _injector: Injector);
+    fireUncheck(value: any): void;
+    ngOnDestroy(): void;
+    ngOnInit(): void;
+    registerOnChange(fn: (_: any) => {}): void;
+    registerOnTouched(fn: () => {}): void;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: any): void;
+}
+
+export declare class ReactiveFormsModule {
+    static withConfig(opts: { warnOnNgModelWithFormControl: 'never' | 'once' | 'always';
+    }): ModuleWithProviders<ReactiveFormsModule>;
+}
+
+export declare class RequiredValidator implements Validator {
+    required: boolean | string;
+    registerOnValidatorChange(fn: () => void): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+}
+
+export declare class SelectControlValueAccessor implements ControlValueAccessor {
+    compareWith: (o1: any, o2: any) => boolean;
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    value: any;
+    constructor(_renderer: Renderer2, _elementRef: ElementRef);
+    registerOnChange(fn: (value: any) => any): void;
+    registerOnTouched(fn: () => any): void;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: any): void;
+}
+
+export declare class SelectMultipleControlValueAccessor implements ControlValueAccessor {
+    compareWith: (o1: any, o2: any) => boolean;
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    value: any;
+    constructor(_renderer: Renderer2, _elementRef: ElementRef);
+    registerOnChange(fn: (value: any) => any): void;
+    registerOnTouched(fn: () => any): void;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: any): void;
+}
+
+/** @experimental */
+export declare type ValidationErrors = {
+    [key: string]: any;
+};
+
+export interface Validator {
+    registerOnValidatorChange?(fn: () => void): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+}
+
+export interface ValidatorFn {
+    (c: AbstractControl): ValidationErrors | null;
+}
+
+export declare class Validators {
+    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;
+    static required(control: AbstractControl): ValidationErrors | null;
+    static requiredTrue(control: AbstractControl): ValidationErrors | null;
+}
+
+export declare const VERSION: Version;
diff --git a/tools/public_api_guard/http/http.d.ts b/tools/public_api_guard/http/http.d.ts
new file mode 100644
index 000000000000..dc419ff40a50
--- /dev/null
+++ b/tools/public_api_guard/http/http.d.ts
@@ -0,0 +1,258 @@
+/** @deprecated */
+export declare class BaseRequestOptions extends RequestOptions {
+    constructor();
+}
+
+/** @deprecated */
+export declare class BaseResponseOptions extends ResponseOptions {
+    constructor();
+}
+
+/** @deprecated */
+export declare class BrowserXhr {
+    constructor();
+    build(): any;
+}
+
+/** @deprecated */
+export declare abstract class Connection {
+    readyState: ReadyState;
+    request: Request;
+    response: any;
+}
+
+/** @deprecated */
+export declare abstract class ConnectionBackend {
+    abstract createConnection(request: any): Connection;
+}
+
+/** @deprecated */
+export declare class CookieXSRFStrategy implements XSRFStrategy {
+    constructor(_cookieName?: string, _headerName?: string);
+    configureRequest(req: Request): void;
+}
+
+/** @deprecated */
+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 | 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;
+    toJSON(): {
+        [name: string]: any;
+    };
+    values(): string[][];
+    static fromResponseHeaderString(headersString: string): Headers;
+}
+
+/** @deprecated */
+export declare class Http {
+    protected _backend: ConnectionBackend;
+    protected _defaultOptions: RequestOptions;
+    constructor(_backend: ConnectionBackend, _defaultOptions: RequestOptions);
+    delete(url: string, options?: RequestOptionsArgs): Observable<Response>;
+    get(url: string, options?: RequestOptionsArgs): Observable<Response>;
+    head(url: string, options?: RequestOptionsArgs): Observable<Response>;
+    options(url: string, options?: RequestOptionsArgs): Observable<Response>;
+    patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
+    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
+    put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
+    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>;
+}
+
+/** @deprecated */
+export declare class HttpModule {
+}
+
+/** @deprecated */
+export declare class Jsonp extends Http {
+    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions);
+    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>;
+}
+
+/** @deprecated */
+export declare class JSONPBackend extends ConnectionBackend {
+    createConnection(request: Request): JSONPConnection;
+}
+
+/** @deprecated */
+export declare class JSONPConnection implements Connection {
+    readyState: ReadyState;
+    request: Request;
+    response: Observable<Response>;
+    finished(data?: any): void;
+}
+
+/** @deprecated */
+export declare class JsonpModule {
+}
+
+/** @deprecated */
+export declare class QueryEncoder {
+    encodeKey(k: string): string;
+    encodeValue(v: string): string;
+}
+
+/** @deprecated */
+export declare enum ReadyState {
+    Unsent = 0,
+    Open = 1,
+    HeadersReceived = 2,
+    Loading = 3,
+    Done = 4,
+    Cancelled = 5
+}
+
+/** @deprecated */
+export declare class Request extends Body {
+    headers: Headers;
+    method: RequestMethod;
+    responseType: ResponseContentType;
+    url: string;
+    withCredentials: boolean;
+    constructor(requestOptions: RequestArgs);
+    detectContentType(): ContentType;
+    detectContentTypeFromBody(): ContentType;
+    getBody(): any;
+}
+
+/** @deprecated */
+export declare enum RequestMethod {
+    Get = 0,
+    Post = 1,
+    Put = 2,
+    Delete = 3,
+    Options = 4,
+    Head = 5,
+    Patch = 6
+}
+
+/** @deprecated */
+export declare class RequestOptions {
+    body: any;
+    headers: Headers | null;
+    method: RequestMethod | string | null;
+    params: URLSearchParams;
+    responseType: ResponseContentType | null;
+    /** @deprecated */ search: URLSearchParams;
+    url: string | null;
+    withCredentials: boolean | null;
+    constructor(opts?: RequestOptionsArgs);
+    merge(options?: RequestOptionsArgs): RequestOptions;
+}
+
+/** @deprecated */
+export interface RequestOptionsArgs {
+    body?: any;
+    headers?: Headers | null;
+    method?: string | RequestMethod | null;
+    params?: string | URLSearchParams | {
+        [key: string]: any | any[];
+    } | null;
+    responseType?: ResponseContentType | null;
+    /** @deprecated */ search?: string | URLSearchParams | {
+        [key: string]: any | any[];
+    } | null;
+    url?: string | null;
+    withCredentials?: boolean | null;
+}
+
+/** @deprecated */
+export declare class Response extends Body {
+    bytesLoaded: number;
+    headers: Headers | null;
+    ok: boolean;
+    status: number;
+    statusText: string | null;
+    totalBytes: number;
+    type: ResponseType;
+    url: string;
+    constructor(responseOptions: ResponseOptions);
+    toString(): string;
+}
+
+/** @deprecated */
+export declare enum ResponseContentType {
+    Text = 0,
+    Json = 1,
+    ArrayBuffer = 2,
+    Blob = 3
+}
+
+/** @deprecated */
+export declare class ResponseOptions {
+    body: string | Object | ArrayBuffer | Blob | null;
+    headers: Headers | null;
+    status: number | null;
+    url: string | null;
+    constructor(opts?: ResponseOptionsArgs);
+    merge(options?: ResponseOptionsArgs): ResponseOptions;
+}
+
+/** @deprecated */
+export interface ResponseOptionsArgs {
+    body?: string | Object | FormData | ArrayBuffer | Blob | null;
+    headers?: Headers | null;
+    status?: number | null;
+    statusText?: string | null;
+    type?: ResponseType | null;
+    url?: string | null;
+}
+
+/** @deprecated */
+export declare enum ResponseType {
+    Basic = 0,
+    Cors = 1,
+    Default = 2,
+    Error = 3,
+    Opaque = 4
+}
+
+/** @deprecated */
+export declare class URLSearchParams {
+    paramsMap: Map<string, string[]>;
+    rawParams: string;
+    constructor(rawParams?: string, queryEncoder?: QueryEncoder);
+    append(param: string, val: string): void;
+    appendAll(searchParams: URLSearchParams): void;
+    clone(): URLSearchParams;
+    delete(param: string): void;
+    get(param: string): string | null;
+    getAll(param: string): string[];
+    has(param: string): boolean;
+    replaceAll(searchParams: URLSearchParams): void;
+    set(param: string, val: string): void;
+    setAll(searchParams: URLSearchParams): void;
+    toString(): string;
+}
+
+/** @deprecated */
+export declare const VERSION: Version;
+
+/** @deprecated */
+export declare class XHRBackend implements ConnectionBackend {
+    constructor(_browserXHR: BrowserXhr, _baseResponseOptions: ResponseOptions, _xsrfStrategy: XSRFStrategy);
+    createConnection(request: Request): XHRConnection;
+}
+
+/** @deprecated */
+export declare class XHRConnection implements Connection {
+    readyState: ReadyState;
+    request: Request;
+    response: Observable<Response>;
+    constructor(req: Request, browserXHR: BrowserXhr, baseResponseOptions?: ResponseOptions);
+    setDetectedContentType(req: any /** TODO Request */, _xhr: any /** XMLHttpRequest */): void;
+}
+
+/** @deprecated */
+export declare abstract class XSRFStrategy {
+    abstract configureRequest(req: Request): void;
+}
diff --git a/tools/public_api_guard/http/testing.d.ts b/tools/public_api_guard/http/testing.d.ts
new file mode 100644
index 000000000000..5b49506c1d2e
--- /dev/null
+++ b/tools/public_api_guard/http/testing.d.ts
@@ -0,0 +1,21 @@
+/** @deprecated */
+export declare class MockBackend implements ConnectionBackend {
+    connections: any;
+    connectionsArray: MockConnection[];
+    pendingConnections: any;
+    constructor();
+    createConnection(req: Request): MockConnection;
+    resolveAllConnections(): void;
+    verifyNoPendingRequests(): void;
+}
+
+/** @deprecated */
+export declare class MockConnection implements Connection {
+    readyState: ReadyState;
+    request: Request;
+    response: ReplaySubject<Response>;
+    constructor(req: Request);
+    mockDownload(res: Response): void;
+    mockError(err?: Error): void;
+    mockRespond(res: Response): 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
new file mode 100644
index 000000000000..6fa4010bc111
--- /dev/null
+++ b/tools/public_api_guard/platform-browser-dynamic/platform-browser-dynamic.d.ts
@@ -0,0 +1,11 @@
+/** @experimental */
+export declare class JitCompilerFactory implements CompilerFactory {
+    createCompiler(options?: CompilerOptions[]): Compiler;
+}
+
+export declare const platformBrowserDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
+
+/** @experimental */
+export declare const RESOURCE_CACHE_PROVIDER: Provider[];
+
+export declare const VERSION: Version;
diff --git a/tools/public_api_guard/platform-browser-dynamic/testing.d.ts b/tools/public_api_guard/platform-browser-dynamic/testing.d.ts
new file mode 100644
index 000000000000..7e0f94e0223e
--- /dev/null
+++ b/tools/public_api_guard/platform-browser-dynamic/testing.d.ts
@@ -0,0 +1,4 @@
+export declare class BrowserDynamicTestingModule {
+}
+
+export declare const platformBrowserDynamicTesting: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
diff --git a/tools/public_api_guard/platform-browser/animations.d.ts b/tools/public_api_guard/platform-browser/animations.d.ts
new file mode 100644
index 000000000000..bd3ae195d501
--- /dev/null
+++ b/tools/public_api_guard/platform-browser/animations.d.ts
@@ -0,0 +1,10 @@
+/** @experimental */
+export declare const ANIMATION_MODULE_TYPE: InjectionToken<"NoopAnimations" | "BrowserAnimations">;
+
+/** @experimental */
+export declare class BrowserAnimationsModule {
+}
+
+/** @experimental */
+export declare class NoopAnimationsModule {
+}
diff --git a/tools/public_api_guard/platform-browser/platform-browser.d.ts b/tools/public_api_guard/platform-browser/platform-browser.d.ts
new file mode 100644
index 000000000000..df3c1c135a39
--- /dev/null
+++ b/tools/public_api_guard/platform-browser/platform-browser.d.ts
@@ -0,0 +1,144 @@
+export declare class BrowserModule {
+    constructor(parentModule: BrowserModule | null);
+    /** @experimental */ static withServerTransition(params: {
+        appId: string;
+    }): ModuleWithProviders<BrowserModule>;
+}
+
+/** @experimental */
+export declare class BrowserTransferStateModule {
+}
+
+/** @experimental */
+export declare class By {
+    static all(): Predicate<DebugElement>;
+    static css(selector: string): Predicate<DebugElement>;
+    static directive(type: Type<any>): Predicate<DebugElement>;
+}
+
+/** @experimental */
+export declare function disableDebugTools(): void;
+
+/** @deprecated */
+export declare const DOCUMENT: InjectionToken<Document>;
+
+export declare abstract class DomSanitizer implements Sanitizer {
+    abstract bypassSecurityTrustHtml(value: string): SafeHtml;
+    abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl;
+    abstract bypassSecurityTrustScript(value: string): SafeScript;
+    abstract bypassSecurityTrustStyle(value: string): SafeStyle;
+    abstract bypassSecurityTrustUrl(value: string): SafeUrl;
+    abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null;
+}
+
+/** @experimental */
+export declare function enableDebugTools<T>(ref: ComponentRef<T>): ComponentRef<T>;
+
+export declare const EVENT_MANAGER_PLUGINS: InjectionToken<EventManagerPlugin[]>;
+
+export declare class EventManager {
+    constructor(plugins: EventManagerPlugin[], _zone: NgZone);
+    addEventListener(element: HTMLElement, eventName: string, handler: Function): Function;
+    addGlobalEventListener(target: string, eventName: string, handler: Function): Function;
+    getZone(): NgZone;
+}
+
+/** @experimental */
+export declare const HAMMER_GESTURE_CONFIG: InjectionToken<HammerGestureConfig>;
+
+export declare const HAMMER_LOADER: InjectionToken<HammerLoader>;
+
+/** @experimental */
+export declare class HammerGestureConfig {
+    events: string[];
+    options?: {
+        cssProps?: any;
+        domEvents?: boolean;
+        enable?: boolean | ((manager: any) => boolean);
+        preset?: any[];
+        touchAction?: string;
+        recognizers?: any[];
+        inputClass?: any;
+        inputTarget?: EventTarget;
+    };
+    overrides: {
+        [key: string]: Object;
+    };
+    buildHammer(element: HTMLElement): HammerInstance;
+}
+
+export declare type HammerLoader = () => Promise<void>;
+
+/** @experimental */
+export declare function makeStateKey<T = void>(key: string): StateKey<T>;
+
+/** @experimental */
+export declare class Meta {
+    constructor(_doc: any);
+    addTag(tag: MetaDefinition, forceCreation?: boolean): HTMLMetaElement | null;
+    addTags(tags: MetaDefinition[], forceCreation?: boolean): HTMLMetaElement[];
+    getTag(attrSelector: string): HTMLMetaElement | null;
+    getTags(attrSelector: string): HTMLMetaElement[];
+    removeTag(attrSelector: string): void;
+    removeTagElement(meta: HTMLMetaElement): void;
+    updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement | null;
+}
+
+/** @experimental */
+export declare type MetaDefinition = {
+    charset?: string;
+    content?: string;
+    httpEquiv?: string;
+    id?: string;
+    itemprop?: string;
+    name?: string;
+    property?: string;
+    scheme?: string;
+    url?: string;
+} & {
+    [prop: string]: string;
+};
+
+export declare const platformBrowser: (extraProviders?: StaticProvider[]) => PlatformRef;
+
+export interface SafeHtml extends SafeValue {
+}
+
+export interface SafeResourceUrl extends SafeValue {
+}
+
+export interface SafeScript extends SafeValue {
+}
+
+export interface SafeStyle extends SafeValue {
+}
+
+export interface SafeUrl extends SafeValue {
+}
+
+export interface SafeValue {
+}
+
+/** @experimental */
+export declare type StateKey<T> = string & {
+    __not_a_string: never;
+};
+
+/** @experimental */
+export declare class Title {
+    constructor(_doc: any);
+    getTitle(): string;
+    setTitle(newTitle: string): void;
+}
+
+/** @experimental */
+export declare class TransferState {
+    get<T>(key: StateKey<T>, defaultValue: T): T;
+    hasKey<T>(key: StateKey<T>): boolean;
+    onSerialize<T>(key: StateKey<T>, callback: () => T): void;
+    remove<T>(key: StateKey<T>): void;
+    set<T>(key: StateKey<T>, value: T): void;
+    toJson(): string;
+}
+
+export declare const VERSION: Version;
diff --git a/tools/public_api_guard/platform-browser/testing.d.ts b/tools/public_api_guard/platform-browser/testing.d.ts
new file mode 100644
index 000000000000..15ef7eaa5b29
--- /dev/null
+++ b/tools/public_api_guard/platform-browser/testing.d.ts
@@ -0,0 +1,4 @@
+export declare class BrowserTestingModule {
+}
+
+export declare const platformBrowserTesting: (extraProviders?: StaticProvider[] | 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
new file mode 100644
index 000000000000..26505af030b4
--- /dev/null
+++ b/tools/public_api_guard/platform-server/platform-server.d.ts
@@ -0,0 +1,48 @@
+/** @experimental */
+export declare const BEFORE_APP_SERIALIZED: InjectionToken<(() => void)[]>;
+
+/** @experimental */
+export declare const INITIAL_CONFIG: InjectionToken<PlatformConfig>;
+
+/** @experimental */
+export interface PlatformConfig {
+    document?: string;
+    url?: string;
+}
+
+/** @experimental */
+export declare const platformDynamicServer: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
+
+/** @experimental */
+export declare const platformServer: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
+
+/** @experimental */
+export declare class PlatformState {
+    constructor(_doc: any);
+    getDocument(): any;
+    renderToString(): string;
+}
+
+/** @experimental */
+export declare function renderModule<T>(module: Type<T>, options: {
+    document?: string;
+    url?: string;
+    extraProviders?: StaticProvider[];
+}): Promise<string>;
+
+/** @experimental */
+export declare function renderModuleFactory<T>(moduleFactory: NgModuleFactory<T>, options: {
+    document?: string;
+    url?: string;
+    extraProviders?: StaticProvider[];
+}): Promise<string>;
+
+/** @experimental */
+export declare class ServerModule {
+}
+
+/** @experimental */
+export declare class ServerTransferStateModule {
+}
+
+export declare const VERSION: Version;
diff --git a/tools/public_api_guard/platform-server/testing.d.ts b/tools/public_api_guard/platform-server/testing.d.ts
new file mode 100644
index 000000000000..faafa085eaa2
--- /dev/null
+++ b/tools/public_api_guard/platform-server/testing.d.ts
@@ -0,0 +1,6 @@
+/** @experimental */
+export declare const platformServerTesting: (extraProviders?: StaticProvider[] | 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
new file mode 100644
index 000000000000..d0ceddb3c06f
--- /dev/null
+++ b/tools/public_api_guard/platform-webworker-dynamic/platform-webworker-dynamic.d.ts
@@ -0,0 +1,4 @@
+/** @experimental */
+export declare const platformWorkerAppDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
+
+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
new file mode 100644
index 000000000000..78f321e3f498
--- /dev/null
+++ b/tools/public_api_guard/platform-webworker/platform-webworker.d.ts
@@ -0,0 +1,109 @@
+/** @experimental */
+export declare function bootstrapWorkerUi(workerScriptUri: string, customProviders?: StaticProvider[]): Promise<PlatformRef>;
+
+/** @experimental */
+export declare class ClientMessageBroker {
+    runOnService(args: UiArguments, returnType: Type<any> | SerializerTypes | null): Promise<any> | null;
+}
+
+/** @experimental */
+export declare class ClientMessageBrokerFactory {
+    createMessageBroker(channel: string, runInZone?: boolean): ClientMessageBroker;
+}
+
+/** @experimental */
+export declare class FnArg {
+    type: Type<any> | SerializerTypes;
+    value: any;
+    constructor(value: any, type?: Type<any> | SerializerTypes);
+}
+
+/** @experimental */
+export declare abstract class MessageBus implements MessageBusSource, MessageBusSink {
+    abstract attachToZone(zone: NgZone): void;
+    abstract from(channel: string): EventEmitter<any>;
+    abstract initChannel(channel: string, runInZone?: boolean): void;
+    abstract to(channel: string): EventEmitter<any>;
+}
+
+/** @experimental */
+export interface MessageBusSink {
+    attachToZone(zone: NgZone): void;
+    initChannel(channel: string, runInZone: boolean): void;
+    to(channel: string): EventEmitter<any>;
+}
+
+/** @experimental */
+export interface MessageBusSource {
+    attachToZone(zone: NgZone): void;
+    from(channel: string): EventEmitter<any>;
+    initChannel(channel: string, runInZone: boolean): void;
+}
+
+/** @experimental */
+export declare const platformWorkerApp: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
+
+/** @experimental */
+export declare const platformWorkerUi: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
+
+/** @experimental */
+export interface ReceivedMessage {
+    args: any[];
+    id: string;
+    method: string;
+    type: string;
+}
+
+/** @experimental */
+export declare const enum SerializerTypes {
+    RENDERER_TYPE_2 = 0,
+    PRIMITIVE = 1,
+    RENDER_STORE_OBJECT = 2
+}
+
+/** @experimental */
+export declare class ServiceMessageBroker {
+    registerMethod(methodName: string, signature: Array<Type<any> | SerializerTypes> | null, method: (..._: any[]) => Promise<any> | void, returnType?: Type<any> | SerializerTypes): void;
+}
+
+/** @experimental */
+export declare class ServiceMessageBrokerFactory {
+    createMessageBroker(channel: string, runInZone?: boolean): ServiceMessageBroker;
+}
+
+/** @experimental */
+export declare class UiArguments {
+    args?: FnArg[] | undefined;
+    method: string;
+    constructor(method: string, args?: FnArg[] | undefined);
+}
+
+export declare const VERSION: Version;
+
+/** @experimental */
+export declare const WORKER_APP_LOCATION_PROVIDERS: ({
+    provide: typeof PlatformLocation;
+    useClass: typeof WebWorkerPlatformLocation;
+    useFactory?: undefined;
+    multi?: undefined;
+    deps?: undefined;
+} | {
+    provide: InjectionToken<(() => void)[]>;
+    useFactory: typeof appInitFnFactory;
+    multi: boolean;
+    deps: (typeof NgZone | typeof PlatformLocation)[];
+    useClass?: undefined;
+} | {
+    provide: InjectionToken<Promise<any>>;
+    useFactory: typeof locationInitialized;
+    deps: (typeof PlatformLocation)[];
+    useClass?: undefined;
+    multi?: undefined;
+})[];
+
+/** @experimental */
+export declare const WORKER_UI_LOCATION_PROVIDERS: StaticProvider[];
+
+/** @experimental */
+export declare class WorkerAppModule {
+}
diff --git a/tools/public_api_guard/router/router.d.ts b/tools/public_api_guard/router/router.d.ts
new file mode 100644
index 000000000000..c97c290390c6
--- /dev/null
+++ b/tools/public_api_guard/router/router.d.ts
@@ -0,0 +1,547 @@
+export declare class ActivatedRoute {
+    readonly children: ActivatedRoute[];
+    component: Type<any> | string | null;
+    data: Observable<Data>;
+    readonly firstChild: ActivatedRoute | null;
+    fragment: Observable<string>;
+    outlet: string;
+    readonly paramMap: Observable<ParamMap>;
+    params: Observable<Params>;
+    readonly parent: ActivatedRoute | null;
+    readonly pathFromRoot: ActivatedRoute[];
+    readonly queryParamMap: Observable<ParamMap>;
+    queryParams: Observable<Params>;
+    readonly root: ActivatedRoute;
+    readonly routeConfig: Route | null;
+    snapshot: ActivatedRouteSnapshot;
+    url: Observable<UrlSegment[]>;
+    toString(): string;
+}
+
+export declare class ActivatedRouteSnapshot {
+    readonly children: ActivatedRouteSnapshot[];
+    component: Type<any> | string | null;
+    data: Data;
+    readonly firstChild: ActivatedRouteSnapshot | null;
+    fragment: string;
+    outlet: string;
+    readonly paramMap: ParamMap;
+    params: Params;
+    readonly parent: ActivatedRouteSnapshot | null;
+    readonly pathFromRoot: ActivatedRouteSnapshot[];
+    readonly queryParamMap: ParamMap;
+    queryParams: Params;
+    readonly root: ActivatedRouteSnapshot;
+    readonly routeConfig: Route | null;
+    url: UrlSegment[];
+    toString(): string;
+}
+
+/** @experimental */
+export declare class ActivationEnd {
+    snapshot: ActivatedRouteSnapshot;
+    constructor(
+    snapshot: ActivatedRouteSnapshot);
+    toString(): string;
+}
+
+/** @experimental */
+export declare class ActivationStart {
+    snapshot: ActivatedRouteSnapshot;
+    constructor(
+    snapshot: ActivatedRouteSnapshot);
+    toString(): string;
+}
+
+export interface CanActivate {
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
+}
+
+export interface CanActivateChild {
+    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
+}
+
+export interface CanDeactivate<T> {
+    canDeactivate(component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
+}
+
+export interface CanLoad {
+    canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean;
+}
+
+/** @experimental */
+export declare class ChildActivationEnd {
+    snapshot: ActivatedRouteSnapshot;
+    constructor(
+    snapshot: ActivatedRouteSnapshot);
+    toString(): string;
+}
+
+/** @experimental */
+export declare class ChildActivationStart {
+    snapshot: ActivatedRouteSnapshot;
+    constructor(
+    snapshot: ActivatedRouteSnapshot);
+    toString(): string;
+}
+
+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;
+}
+
+export declare function convertToParamMap(params: Params): ParamMap;
+
+export declare type Data = {
+    [name: string]: any;
+};
+
+export declare class DefaultUrlSerializer implements UrlSerializer {
+    parse(url: string): UrlTree;
+    serialize(tree: UrlTree): string;
+}
+
+/** @experimental */
+export declare type DetachedRouteHandle = {};
+
+export declare type Event = RouterEvent | RouteConfigLoadStart | RouteConfigLoadEnd | ChildActivationStart | ChildActivationEnd | ActivationStart | ActivationEnd | Scroll;
+
+export interface ExtraOptions {
+    anchorScrolling?: 'disabled' | 'enabled';
+    enableTracing?: boolean;
+    errorHandler?: ErrorHandler;
+    initialNavigation?: InitialNavigation;
+    malformedUriErrorHandler?: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree;
+    onSameUrlNavigation?: 'reload' | 'ignore';
+    paramsInheritanceStrategy?: 'emptyOnly' | 'always';
+    preloadingStrategy?: any;
+    relativeLinkResolution?: 'legacy' | 'corrected';
+    scrollOffset?: [number, number] | (() => [number, number]);
+    scrollPositionRestoration?: 'disabled' | 'enabled' | 'top';
+    urlUpdateStrategy?: 'deferred' | 'eager';
+    useHash?: boolean;
+}
+
+/** @experimental */
+export declare class GuardsCheckEnd extends RouterEvent {
+    shouldActivate: boolean;
+    state: RouterStateSnapshot;
+    urlAfterRedirects: string;
+    constructor(
+    id: number,
+    url: string,
+    urlAfterRedirects: string,
+    state: RouterStateSnapshot,
+    shouldActivate: boolean);
+    toString(): string;
+}
+
+/** @experimental */
+export declare class GuardsCheckStart extends RouterEvent {
+    state: RouterStateSnapshot;
+    urlAfterRedirects: string;
+    constructor(
+    id: number,
+    url: string,
+    urlAfterRedirects: string,
+    state: RouterStateSnapshot);
+    toString(): string;
+}
+
+export declare type LoadChildren = string | LoadChildrenCallback;
+
+export declare type LoadChildrenCallback = () => Type<any> | NgModuleFactory<any> | Promise<Type<any>> | Observable<Type<any>>;
+
+export declare class NavigationCancel extends RouterEvent {
+    reason: string;
+    constructor(
+    id: number,
+    url: string,
+    reason: string);
+    toString(): string;
+}
+
+export declare class NavigationEnd extends RouterEvent {
+    urlAfterRedirects: string;
+    constructor(
+    id: number,
+    url: string,
+    urlAfterRedirects: string);
+    toString(): string;
+}
+
+export declare class NavigationError extends RouterEvent {
+    error: any;
+    constructor(
+    id: number,
+    url: string,
+    error: any);
+    toString(): string;
+}
+
+export interface NavigationExtras {
+    fragment?: string;
+    preserveFragment?: boolean;
+    /** @deprecated */ preserveQueryParams?: boolean;
+    queryParams?: Params | null;
+    queryParamsHandling?: QueryParamsHandling | null;
+    relativeTo?: ActivatedRoute | null;
+    replaceUrl?: boolean;
+    skipLocationChange?: boolean;
+}
+
+export declare class NavigationStart extends RouterEvent {
+    navigationTrigger?: 'imperative' | 'popstate' | 'hashchange';
+    restoredState?: {
+        navigationId: number;
+    } | null;
+    constructor(
+    id: number,
+    url: string,
+    navigationTrigger?: 'imperative' | 'popstate' | 'hashchange',
+    restoredState?: {
+        navigationId: number;
+    } | null);
+    toString(): string;
+}
+
+/** @experimental */
+export declare class NoPreloading implements PreloadingStrategy {
+    preload(route: Route, fn: () => Observable<any>): Observable<any>;
+}
+
+export declare class OutletContext {
+    attachRef: ComponentRef<any> | null;
+    children: ChildrenOutletContexts;
+    outlet: RouterOutlet | null;
+    resolver: ComponentFactoryResolver | null;
+    route: ActivatedRoute | null;
+}
+
+export interface ParamMap {
+    readonly keys: string[];
+    get(name: string): string | null;
+    getAll(name: string): string[];
+    has(name: string): boolean;
+}
+
+export declare type Params = {
+    [key: string]: any;
+};
+
+/** @experimental */
+export declare class PreloadAllModules implements PreloadingStrategy {
+    preload(route: Route, fn: () => Observable<any>): Observable<any>;
+}
+
+/** @experimental */
+export declare abstract class PreloadingStrategy {
+    abstract preload(route: Route, fn: () => Observable<any>): Observable<any>;
+}
+
+export declare const PRIMARY_OUTLET = "primary";
+
+export declare function provideRoutes(routes: Routes): any;
+
+export interface Resolve<T> {
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T;
+}
+
+export declare type ResolveData = {
+    [name: string]: any;
+};
+
+/** @experimental */
+export declare class ResolveEnd extends RouterEvent {
+    state: RouterStateSnapshot;
+    urlAfterRedirects: string;
+    constructor(
+    id: number,
+    url: string,
+    urlAfterRedirects: string,
+    state: RouterStateSnapshot);
+    toString(): string;
+}
+
+/** @experimental */
+export declare class ResolveStart extends RouterEvent {
+    state: RouterStateSnapshot;
+    urlAfterRedirects: string;
+    constructor(
+    id: number,
+    url: string,
+    urlAfterRedirects: string,
+    state: RouterStateSnapshot);
+    toString(): string;
+}
+
+export interface Route {
+    canActivate?: any[];
+    canActivateChild?: any[];
+    canDeactivate?: any[];
+    canLoad?: any[];
+    children?: Routes;
+    component?: Type<any>;
+    data?: Data;
+    loadChildren?: LoadChildren;
+    matcher?: UrlMatcher;
+    outlet?: string;
+    path?: string;
+    pathMatch?: string;
+    redirectTo?: string;
+    resolve?: ResolveData;
+    runGuardsAndResolvers?: RunGuardsAndResolvers;
+}
+
+/** @experimental */
+export declare class RouteConfigLoadEnd {
+    route: Route;
+    constructor(
+    route: Route);
+    toString(): string;
+}
+
+/** @experimental */
+export declare class RouteConfigLoadStart {
+    route: Route;
+    constructor(
+    route: Route);
+    toString(): string;
+}
+
+export declare class Router {
+    config: Routes;
+    errorHandler: ErrorHandler;
+    readonly events: Observable<Event>;
+    malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree;
+    navigated: boolean;
+    onSameUrlNavigation: 'reload' | 'ignore';
+    paramsInheritanceStrategy: 'emptyOnly' | 'always';
+    relativeLinkResolution: 'legacy' | 'corrected';
+    routeReuseStrategy: RouteReuseStrategy;
+    readonly routerState: RouterState;
+    readonly url: string;
+    urlHandlingStrategy: UrlHandlingStrategy;
+    urlUpdateStrategy: 'deferred' | 'eager';
+    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;
+    navigate(commands: any[], extras?: NavigationExtras): Promise<boolean>;
+    navigateByUrl(url: string | UrlTree, extras?: NavigationExtras): Promise<boolean>;
+    ngOnDestroy(): void;
+    parseUrl(url: string): UrlTree;
+    resetConfig(config: Routes): void;
+    serializeUrl(url: UrlTree): string;
+    setUpLocationChangeListener(): void;
+}
+
+export declare const ROUTER_CONFIGURATION: InjectionToken<ExtraOptions>;
+
+/** @experimental */
+export declare const ROUTER_INITIALIZER: InjectionToken<(compRef: ComponentRef<any>) => void>;
+
+/** @experimental */
+export declare abstract class RouteReuseStrategy {
+    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 | null): void;
+}
+
+/** @experimental */
+export declare class RouterEvent {
+    id: number;
+    url: string;
+    constructor(
+    id: number,
+    url: string);
+}
+
+export declare class RouterLink {
+    fragment: string;
+    preserveFragment: boolean;
+    /** @deprecated */ preserveQueryParams: boolean;
+    queryParams: {
+        [k: string]: any;
+    };
+    queryParamsHandling: QueryParamsHandling;
+    replaceUrl: boolean;
+    routerLink: any[] | string;
+    skipLocationChange: boolean;
+    readonly urlTree: UrlTree;
+    constructor(router: Router, route: ActivatedRoute, tabIndex: string, renderer: Renderer2, el: ElementRef);
+    onClick(): boolean;
+}
+
+export declare class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {
+    readonly isActive: boolean;
+    links: QueryList<RouterLink>;
+    linksWithHrefs: QueryList<RouterLinkWithHref>;
+    routerLinkActive: string[] | string;
+    routerLinkActiveOptions: {
+        exact: boolean;
+    };
+    constructor(router: Router, element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+}
+
+export declare class RouterLinkWithHref implements OnChanges, OnDestroy {
+    fragment: string;
+    href: string;
+    preserveFragment: boolean;
+    preserveQueryParams: boolean;
+    queryParams: {
+        [k: string]: any;
+    };
+    queryParamsHandling: QueryParamsHandling;
+    replaceUrl: boolean;
+    routerLink: any[] | string;
+    skipLocationChange: boolean;
+    target: string;
+    readonly urlTree: UrlTree;
+    constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy);
+    ngOnChanges(changes: {}): any;
+    ngOnDestroy(): any;
+    onClick(button: number, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean): boolean;
+}
+
+export declare class RouterModule {
+    constructor(guard: any, router: Router);
+    static forChild(routes: Routes): ModuleWithProviders<RouterModule>;
+    static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule>;
+}
+
+export declare class RouterOutlet implements OnDestroy, OnInit {
+    activateEvents: EventEmitter<any>;
+    readonly activatedRoute: ActivatedRoute;
+    readonly activatedRouteData: Data;
+    readonly component: Object;
+    deactivateEvents: EventEmitter<any>;
+    readonly isActivated: boolean;
+    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;
+}
+
+export declare class RouterPreloader implements OnDestroy {
+    constructor(router: Router, moduleLoader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, preloadingStrategy: PreloadingStrategy);
+    ngOnDestroy(): void;
+    preload(): Observable<any>;
+    setUpPreloading(): void;
+}
+
+export declare class RouterState extends Tree<ActivatedRoute> {
+    snapshot: RouterStateSnapshot;
+    toString(): string;
+}
+
+export declare class RouterStateSnapshot extends Tree<ActivatedRouteSnapshot> {
+    url: string;
+    toString(): string;
+}
+
+export declare type Routes = Route[];
+
+/** @experimental */
+export declare const ROUTES: InjectionToken<Route[][]>;
+
+export declare class RoutesRecognized extends RouterEvent {
+    state: RouterStateSnapshot;
+    urlAfterRedirects: string;
+    constructor(
+    id: number,
+    url: string,
+    urlAfterRedirects: string,
+    state: RouterStateSnapshot);
+    toString(): string;
+}
+
+/** @experimental */
+export declare type RunGuardsAndResolvers = 'paramsChange' | 'paramsOrQueryParamsChange' | 'always';
+
+export declare class Scroll {
+    readonly anchor: string | null;
+    readonly position: [number, number] | null;
+    readonly routerEvent: NavigationEnd;
+    constructor(
+    routerEvent: NavigationEnd,
+    position: [number, number] | null,
+    anchor: string | null);
+    toString(): string;
+}
+
+/** @experimental */
+export declare abstract class UrlHandlingStrategy {
+    abstract extract(url: UrlTree): UrlTree;
+    abstract merge(newUrlPart: UrlTree, rawUrl: UrlTree): UrlTree;
+    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;
+    };
+};
+
+export declare class UrlSegment {
+    readonly parameterMap: ParamMap;
+    parameters: {
+        [name: string]: string;
+    };
+    path: string;
+    constructor(
+    path: string,
+    parameters: {
+        [name: string]: string;
+    });
+    toString(): string;
+}
+
+export declare class UrlSegmentGroup {
+    children: {
+        [key: string]: UrlSegmentGroup;
+    };
+    readonly numberOfChildren: number;
+    parent: UrlSegmentGroup | null;
+    segments: UrlSegment[];
+    constructor(
+    segments: UrlSegment[],
+    children: {
+        [key: string]: UrlSegmentGroup;
+    });
+    hasChildren(): boolean;
+    toString(): string;
+}
+
+export declare abstract class UrlSerializer {
+    abstract parse(url: string): UrlTree;
+    abstract serialize(tree: UrlTree): string;
+}
+
+export declare class UrlTree {
+    fragment: string | null;
+    readonly queryParamMap: ParamMap;
+    queryParams: Params;
+    root: UrlSegmentGroup;
+    toString(): string;
+}
+
+export declare const VERSION: Version;
diff --git a/tools/public_api_guard/router/testing.d.ts b/tools/public_api_guard/router/testing.d.ts
new file mode 100644
index 000000000000..a6396352c060
--- /dev/null
+++ b/tools/public_api_guard/router/testing.d.ts
@@ -0,0 +1,14 @@
+export declare class RouterTestingModule {
+    static withRoutes(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterTestingModule>;
+}
+
+export declare function setupTestingRouter(urlSerializer: UrlSerializer, contexts: ChildrenOutletContexts, location: Location, loader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, routes: Route[][], opts?: ExtraOptions, urlHandlingStrategy?: UrlHandlingStrategy): Router;
+export declare function setupTestingRouter(urlSerializer: UrlSerializer, contexts: ChildrenOutletContexts, location: Location, loader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, routes: Route[][], urlHandlingStrategy?: UrlHandlingStrategy): Router;
+
+export declare class SpyNgModuleFactoryLoader implements NgModuleFactoryLoader {
+    stubbedModules: {
+        [path: string]: any;
+    };
+    constructor(compiler: Compiler);
+    load(path: string): Promise<NgModuleFactory<any>>;
+}
diff --git a/tools/public_api_guard/router/upgrade.d.ts b/tools/public_api_guard/router/upgrade.d.ts
new file mode 100644
index 000000000000..2fd7d621137e
--- /dev/null
+++ b/tools/public_api_guard/router/upgrade.d.ts
@@ -0,0 +1,10 @@
+/** @experimental */
+export declare const RouterUpgradeInitializer: {
+    provide: InjectionToken<((compRef: ComponentRef<any>) => void)[]>;
+    multi: boolean;
+    useFactory: (ngUpgrade: UpgradeModule) => () => void;
+    deps: (typeof UpgradeModule)[];
+};
+
+/** @experimental */
+export declare function setUpLocationSync(ngUpgrade: UpgradeModule): void;
diff --git a/tools/public_api_guard/service-worker/config.d.ts b/tools/public_api_guard/service-worker/config.d.ts
new file mode 100644
index 000000000000..6e68fd291e7d
--- /dev/null
+++ b/tools/public_api_guard/service-worker/config.d.ts
@@ -0,0 +1,54 @@
+/** @experimental */
+export interface AssetGroup {
+    installMode?: 'prefetch' | 'lazy';
+    name: string;
+    resources: {
+        files?: Glob[];
+        /** @deprecated */ versionedFiles?: Glob[];
+        urls?: Glob[];
+    };
+    updateMode?: 'prefetch' | 'lazy';
+}
+
+/** @experimental */
+export interface Config {
+    appData?: {};
+    assetGroups?: AssetGroup[];
+    dataGroups?: DataGroup[];
+    index: string;
+    navigationUrls?: string[];
+}
+
+/** @experimental */
+export interface DataGroup {
+    cacheConfig: {
+        maxSize: number;
+        maxAge: Duration;
+        timeout?: Duration;
+        strategy?: 'freshness' | 'performance';
+    };
+    name: string;
+    urls: Glob[];
+    version?: number;
+}
+
+/** @experimental */
+export declare type Duration = string;
+
+/** @experimental */
+export interface Filesystem {
+    hash(file: string): Promise<string>;
+    list(dir: string): Promise<string[]>;
+    read(file: string): Promise<string>;
+    write(file: string, contents: string): Promise<void>;
+}
+
+/** @experimental */
+export declare class Generator {
+    readonly fs: Filesystem;
+    constructor(fs: Filesystem, baseHref: string);
+    process(config: Config): Promise<Object>;
+}
+
+/** @experimental */
+export declare type Glob = string;
diff --git a/tools/public_api_guard/service-worker/service-worker.d.ts b/tools/public_api_guard/service-worker/service-worker.d.ts
new file mode 100644
index 000000000000..e05787c01aca
--- /dev/null
+++ b/tools/public_api_guard/service-worker/service-worker.d.ts
@@ -0,0 +1,29 @@
+/** @experimental */
+export declare class ServiceWorkerModule {
+    static register(script: string, opts?: {
+        scope?: string;
+        enabled?: boolean;
+    }): ModuleWithProviders;
+}
+
+/** @experimental */
+export declare class SwPush {
+    readonly isEnabled: boolean;
+    readonly messages: Observable<object>;
+    readonly subscription: Observable<PushSubscription | null>;
+    constructor(sw: NgswCommChannel);
+    requestSubscription(options: {
+        serverPublicKey: string;
+    }): Promise<PushSubscription>;
+    unsubscribe(): Promise<void>;
+}
+
+/** @experimental */
+export declare class SwUpdate {
+    readonly activated: Observable<UpdateActivatedEvent>;
+    readonly available: Observable<UpdateAvailableEvent>;
+    readonly isEnabled: boolean;
+    constructor(sw: NgswCommChannel);
+    activateUpdate(): Promise<void>;
+    checkForUpdate(): Promise<void>;
+}
diff --git a/tools/public_api_guard/upgrade/static.d.ts b/tools/public_api_guard/upgrade/static.d.ts
new file mode 100644
index 000000000000..3cfdbc7d0793
--- /dev/null
+++ b/tools/public_api_guard/upgrade/static.d.ts
@@ -0,0 +1,46 @@
+/** @experimental */
+export declare function downgradeComponent(info: {
+    component: Type<any>;
+    /** @experimental */ propagateDigest?: boolean;
+    /** @deprecated */ inputs?: string[];
+    /** @deprecated */ outputs?: string[];
+    /** @deprecated */ selectors?: string[];
+}): any;
+
+/** @experimental */
+export declare function downgradeInjectable(token: any): Function;
+
+/** @experimental */
+export declare function downgradeModule<T>(moduleFactoryOrBootstrapFn: NgModuleFactory<T> | ((extraProviders: StaticProvider[]) => Promise<NgModuleRef<T>>)): string;
+
+export declare function getAngularJSGlobal(): any;
+
+/** @deprecated */
+export declare function getAngularLib(): any;
+
+export declare function setAngularJSGlobal(ng: any): void;
+
+/** @deprecated */
+export declare function setAngularLib(ng: any): void;
+
+/** @experimental */
+export declare class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
+    constructor(name: string, elementRef: ElementRef, injector: Injector);
+    ngDoCheck(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    ngOnInit(): void;
+}
+
+/** @experimental */
+export declare class UpgradeModule {
+    $injector: any;
+    injector: Injector;
+    ngZone: NgZone;
+    constructor(
+    injector: Injector,
+    ngZone: NgZone);
+    bootstrap(element: Element, modules?: string[], config?: any): void;
+}
+
+export declare const VERSION: Version;
diff --git a/tools/public_api_guard/upgrade/upgrade.d.ts b/tools/public_api_guard/upgrade/upgrade.d.ts
new file mode 100644
index 000000000000..17f4b857b4df
--- /dev/null
+++ b/tools/public_api_guard/upgrade/upgrade.d.ts
@@ -0,0 +1,24 @@
+/** @deprecated */
+export declare class UpgradeAdapter {
+    constructor(ng2AppModule: Type<any>, compilerOptions?: CompilerOptions | undefined);
+    bootstrap(element: Element, modules?: any[], config?: angular.IAngularBootstrapConfig): UpgradeAdapterRef;
+    downgradeNg2Component(component: Type<any>): Function;
+    downgradeNg2Provider(token: any): Function;
+    registerForNg1Tests(modules?: string[]): UpgradeAdapterRef;
+    upgradeNg1Component(name: string): Type<any>;
+    upgradeNg1Provider(name: string, options?: {
+        asToken: any;
+    }): void;
+}
+
+/** @deprecated */
+export declare class UpgradeAdapterRef {
+    ng1Injector: angular.IInjectorService;
+    ng1RootScope: angular.IRootScopeService;
+    ng2Injector: Injector;
+    ng2ModuleRef: NgModuleRef<any>;
+    dispose(): void;
+    ready(fn: (upgradeAdapterRef: UpgradeAdapterRef) => void): void;
+}
+
+export declare const VERSION: Version;
diff --git a/tools/source-map-test/index.js b/tools/source-map-test/index.js
new file mode 100644
index 000000000000..30d31af2d4fc
--- /dev/null
+++ b/tools/source-map-test/index.js
@@ -0,0 +1,82 @@
+#!/usr/bin/env node
+
+/**
+ * @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 getMappings = require('./parseMap');
+
+const CLOSURE_REGEX = /tsickle_Closure_declarations\(\)/g;
+const VAR_REGEX = /(export )?(var (\S+) =)/g;
+const FUNCTION_REGEX = /(export )?function (\S+)\((.*)\) {/g;
+const CLASS_REGEX = /var (\S+) = \(function \((\S*)\) {/g;
+const PROPERTY_REGEX = /Object.defineProperty\((\S+)\.prototype, "(\S+)", {/g;
+const METHOD_REGEX = /(\S+)\.prototype\.(\S+) = function \((\S*)\) {/g;
+const GETTER_REGEX = /get_REGEX = function \((\S*)\) {/g;
+const TYPE_COMMENT_REGEX = /\/\*\* @type {\?} \*\/ /g;
+const AFTER_EQUALS_REGEX = /([^=]+)=(.*)/g;
+const EXPORT_REGEX = /export /g;
+const TSLIB_REGEX = /tslib_\d\.__/g;
+const STRIP_PREFIX_REGEX = /ɵ/g;
+const STRIP_SUFFIX_REGEX = /([^$]+)(\$)+\d/g;
+const SYNTHETIC_REGEX = /ɵ[0-9]/;
+
+// tslint:disable:no-console
+module.exports = function sourceMapTest(package) {
+  const mappings =
+      getMappings(getBundlePath(package)).filter(mapping => shouldCheckMapping(mapping.sourceText));
+
+  console.log(`Analyzing ${mappings.length} mappings for ${package}...`);
+
+  const failures = mappings.filter(mapping => {
+    if (SYNTHETIC_REGEX.test(mapping.sourceText)) return false;
+    if (cleanSource(mapping.sourceText) !== cleanGen(mapping.genText)) {
+      console.log('source:', cleanSource(mapping.sourceText), 'gen:', cleanGen(mapping.genText));
+    }
+    return cleanSource(mapping.sourceText) !== cleanGen(mapping.genText);
+  });
+
+  logResults(failures);
+  return failures;
+};
+
+function shouldCheckMapping(text) {
+  // tsickle closure declaration does not exist in final bundle, so can't be checked
+  if (CLOSURE_REGEX.test(text)) return false;
+  return VAR_REGEX.test(text) || FUNCTION_REGEX.test(text) || CLASS_REGEX.test(text) ||
+      PROPERTY_REGEX.test(text) || METHOD_REGEX.test(text) || GETTER_REGEX.test(text);
+}
+
+function cleanSource(source) {
+  return source.replace(TYPE_COMMENT_REGEX, '')
+      .replace(EXPORT_REGEX, '')
+      .replace(STRIP_PREFIX_REGEX, '')
+      .replace(TSLIB_REGEX, '__')
+      .replace(AFTER_EQUALS_REGEX, '$1=');
+}
+
+function cleanGen(gen) {
+  return gen.replace(TYPE_COMMENT_REGEX, '')
+      .replace(STRIP_PREFIX_REGEX, '')
+      .replace(STRIP_SUFFIX_REGEX, '$1')
+      .replace(AFTER_EQUALS_REGEX, '$1=');
+}
+
+// tslint:disable:no-console
+function logResults(failures) {
+  if (failures.length) {
+    console.error(`... and source maps appear to be broken: ${failures.length} failures.`);
+    failures.forEach(failure => console.error(failure));
+  } else {
+    console.log('... and source maps look good! 100% match');
+  }
+}
+
+function getBundlePath(package) {
+  return path.resolve(process.cwd(), 'dist/packages-dist/', package, 'esm5/', package + '.js');
+}
diff --git a/tools/source-map-test/parseMap.js b/tools/source-map-test/parseMap.js
new file mode 100644
index 000000000000..758eaabaec39
--- /dev/null
+++ b/tools/source-map-test/parseMap.js
@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+/**
+ * @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 vlq = require('vlq');
+const fs = require('fs');
+const path = require('path');
+
+module.exports = function getMappings(bundlePath) {
+  const sourceMap = JSON.parse(getFile(`${bundlePath}.map`));
+  const sourcesContent = sourceMap.sourcesContent.map(file => file.split('\n'));
+  const bundleLines = getFile(bundlePath).split('\n');
+
+  let sourceLines = sourcesContent[0];
+  let sourceFileIndex = 0;
+  let sourceLineIndex = 0;
+  let sourceColIndex = 0;
+
+  return decodeLines(sourceMap).reduce((matchData, mapLine, genLineIndex) => {
+    mapLine.forEach((segment, index) => {
+      if (segment.length) {
+        const [genColDiff, sourceFileDiff, sourceLineDiff, sourceColDiff] = segment;
+
+        // if source file changes, grab new file from sourcesContent
+        if (sourceFileDiff !== 0) {
+          sourceFileIndex += sourceFileDiff;
+          sourceLines = sourcesContent[sourceFileIndex];
+        }
+
+        const genText = bundleLines[genLineIndex].trim();
+        const sourceText = sourceLines[sourceLineIndex + sourceLineDiff].trim();
+
+        // only record mappings that are long enough to be meaningful
+        if (index === 0 && genText.length > 15 && sourceText.length > 15) {
+          matchData.push({
+            genLineIndex,
+            sourceLineIndex,
+            sourceFile: sourceMap.sources[sourceFileIndex], genText, sourceText
+          });
+        }
+
+        sourceLineIndex += sourceLineDiff;
+        sourceColIndex += sourceColDiff;
+      }
+    });
+
+    return matchData;
+  }, []);
+};
+
+function getFile(filePath) {
+  return fs.readFileSync(path.resolve(process.cwd(), filePath), 'UTF-8');
+}
+
+function decodeLines(sourceMap) {
+  return sourceMap.mappings.split(';').map(
+      line => { return line.split(',').map(seg => vlq.decode(seg)); });
+}
diff --git a/tools/symbol-extractor/BUILD.bazel b/tools/symbol-extractor/BUILD.bazel
new file mode 100644
index 000000000000..fbdd5b7c538a
--- /dev/null
+++ b/tools/symbol-extractor/BUILD.bazel
@@ -0,0 +1,39 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+ts_library(
+    name = "lib",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*_spec.ts",
+            "**/*_spec",
+        ],
+    ),
+    deps = [
+        "//packages:types",
+    ],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(
+        ["**/*_spec.ts"],
+        exclude = ["symbol_extractor_spec/**"],
+    ),
+    deps = [
+        ":lib",
+        "//packages:types",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    data = glob(["symbol_extractor_spec/**"]),
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/tools/symbol-extractor/cli.ts b/tools/symbol-extractor/cli.ts
new file mode 100644
index 000000000000..383c19ff7190
--- /dev/null
+++ b/tools/symbol-extractor/cli.ts
@@ -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
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import {SymbolExtractor} from './symbol_extractor';
+
+if (require.main === module) {
+  const args = process.argv.slice(2) as[string, string];
+  process.exitCode = main(args) ? 0 : 1;
+}
+
+/**
+ * CLI main method.
+ *
+ * ```
+ *   cli javascriptFilePath.js goldenFilePath.json
+ * ```
+ */
+function main(argv: [string, string, string] | [string, string]): boolean {
+  const javascriptFilePath = require.resolve(argv[0]);
+  const goldenFilePath = require.resolve(argv[1]);
+  const doUpdate = argv[2] == '--accept';
+
+  const javascriptContent = fs.readFileSync(javascriptFilePath).toString();
+  const goldenContent = fs.readFileSync(goldenFilePath).toString();
+
+  const symbolExtractor = new SymbolExtractor(javascriptFilePath, javascriptContent);
+
+  let passed: boolean = false;
+  if (doUpdate) {
+    fs.writeFileSync(goldenFilePath, JSON.stringify(symbolExtractor.actual, undefined, 2));
+    console.error('Updated gold file:', goldenFilePath);
+    passed = true;
+  } else {
+    passed = symbolExtractor.compareAndPrintError(goldenFilePath, goldenContent);
+    if (!passed) {
+      const compile = process.env['compile'];
+      const defineFlag = (compile !== 'legacy') ? `--define=compile=${compile} ` : '';
+      console.error(`TEST FAILED!`);
+      console.error(`  To update the golden file run: `);
+      console.error(`    bazel run ${defineFlag}${process.env['BAZEL_TARGET']}.accept`);
+    }
+  }
+  return passed;
+}
diff --git a/tools/symbol-extractor/index.bzl b/tools/symbol-extractor/index.bzl
new file mode 100644
index 000000000000..1e64b4da6c6b
--- /dev/null
+++ b/tools/symbol-extractor/index.bzl
@@ -0,0 +1,35 @@
+# 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 test verifies that a set of top level symbols from a javascript file match a gold file.
+"""
+
+# This does a deep import under //internal because of not wanting the wrapper macro
+# because it introduces an extra target_bin target.
+load("@build_bazel_rules_nodejs//internal/node:node.bzl", "nodejs_binary", "nodejs_test")
+
+def js_expected_symbol_test(name, src, golden, **kwargs):
+    """This test verifies that a set of top level symbols from a javascript file match a gold file.
+    """
+    all_data = [src, golden]
+    all_data += [Label("//tools/symbol-extractor:lib")]
+    all_data += [Label("@bazel_tools//tools/bash/runfiles")]
+    entry_point = "angular/tools/symbol-extractor/cli.js"
+
+    nodejs_test(
+        name = name,
+        data = all_data,
+        entry_point = entry_point,
+        templated_args = ["$(location %s)" % src, "$(location %s)" % golden],
+        **kwargs
+    )
+
+    nodejs_binary(
+        name = name + ".accept",
+        data = all_data,
+        entry_point = entry_point,
+        templated_args = ["$(location %s)" % src, "$(location %s)" % golden, "--accept"],
+        **kwargs
+    )
diff --git a/tools/symbol-extractor/symbol_extractor.ts b/tools/symbol-extractor/symbol_extractor.ts
new file mode 100644
index 000000000000..ed34816472a2
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor.ts
@@ -0,0 +1,132 @@
+/**
+ * @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 fs from 'fs';
+import * as ts from 'typescript';
+
+
+export interface Symbol { name: string; }
+
+export class SymbolExtractor {
+  public actual: Symbol[];
+
+  static symbolSort(a: Symbol, b: Symbol): number {
+    return a.name == b.name ? 0 : a.name < b.name ? -1 : 1;
+  }
+
+  static parse(path: string, contents: string): Symbol[] {
+    const symbols: Symbol[] = [];
+    const source: ts.SourceFile = ts.createSourceFile(path, contents, ts.ScriptTarget.Latest, true);
+    let fnRecurseDepth = 0;
+    function visitor(child: ts.Node) {
+      // Left for easier debugging.
+      // console.log('>>>', ts.SyntaxKind[child.kind]);
+      switch (child.kind) {
+        case ts.SyntaxKind.FunctionExpression:
+          fnRecurseDepth++;
+          if (fnRecurseDepth <= 1) {
+            ts.forEachChild(child, visitor);
+          }
+          fnRecurseDepth--;
+          break;
+        case ts.SyntaxKind.SourceFile:
+        case ts.SyntaxKind.VariableStatement:
+        case ts.SyntaxKind.VariableDeclarationList:
+        case ts.SyntaxKind.ExpressionStatement:
+        case ts.SyntaxKind.CallExpression:
+        case ts.SyntaxKind.ParenthesizedExpression:
+        case ts.SyntaxKind.Block:
+        case ts.SyntaxKind.PrefixUnaryExpression:
+          ts.forEachChild(child, visitor);
+          break;
+        case ts.SyntaxKind.VariableDeclaration:
+          const varDecl = child as ts.VariableDeclaration;
+          if (varDecl.initializer && fnRecurseDepth !== 0) {
+            symbols.push({name: varDecl.name.getText()});
+          }
+          if (fnRecurseDepth == 0 && isRollupExportSymbol(varDecl)) {
+            ts.forEachChild(child, visitor);
+          }
+          break;
+        case ts.SyntaxKind.FunctionDeclaration:
+          const funcDecl = child as ts.FunctionDeclaration;
+          funcDecl.name && symbols.push({name: funcDecl.name.getText()});
+          break;
+        default:
+          // Left for easier debugging.
+          // console.log('###', ts.SyntaxKind[child.kind], child.getText());
+      }
+      if (symbols.length && symbols[symbols.length - 1].name == 'type') {
+        debugger;
+      }
+    }
+    visitor(source);
+    symbols.sort(SymbolExtractor.symbolSort);
+    return symbols;
+  }
+
+  static diff(actual: Symbol[], expected: string|((Symbol | string)[])): {[name: string]: string} {
+    if (typeof expected == 'string') {
+      expected = JSON.parse(expected);
+    }
+    const diff: {[name: string]: ('missing' | 'extra')} = {};
+    (expected as(Symbol | string)[]).forEach((nameOrSymbol) => {
+      diff[typeof nameOrSymbol == 'string' ? nameOrSymbol : nameOrSymbol.name] = 'missing';
+    });
+
+    actual.forEach((s) => {
+      if (diff[s.name] === 'missing') {
+        delete diff[s.name];
+      } else {
+        diff[s.name] = 'extra';
+      }
+    });
+    return diff;
+  }
+
+  constructor(private path: string, private contents: string) {
+    this.actual = SymbolExtractor.parse(path, contents);
+  }
+
+  expect(expectedSymbols: (string|Symbol)[]) {
+    expect(SymbolExtractor.diff(this.actual, expectedSymbols)).toEqual({});
+  }
+
+  compareAndPrintError(goldenFilePath: string, expected: string|((Symbol | string)[])): boolean {
+    let passed = true;
+    const diff = SymbolExtractor.diff(this.actual, expected);
+    Object.keys(diff).forEach((key) => {
+      if (passed) {
+        console.error(`Expected symbols in '${this.path}' did not match gold file.`);
+        passed = false;
+      }
+      console.error(`   Symbol: ${key} => ${diff[key]}`);
+    });
+
+    return passed;
+  }
+}
+
+function toSymbol(v: string | Symbol): Symbol {
+  return typeof v == 'string' ? {'name': v} : v as Symbol;
+}
+
+function toName(symbol: Symbol): string {
+  return symbol.name;
+}
+
+/**
+ * Detects if VariableDeclarationList is format `var ..., bundle = function(){}()`;
+ *
+ * Rollup produces this format when it wants to export symbols from a bundle.
+ * @param child
+ */
+function isRollupExportSymbol(decl: ts.VariableDeclaration): boolean {
+  return !!(decl.initializer && decl.initializer.kind == ts.SyntaxKind.CallExpression) &&
+      ts.isIdentifier(decl.name) && decl.name.text === 'bundle';
+}
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec.ts b/tools/symbol-extractor/symbol_extractor_spec.ts
new file mode 100644
index 000000000000..5a5dcbfb2b53
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {Symbol, SymbolExtractor} from './symbol_extractor';
+
+describe('scenarios', () => {
+  const symbolExtractorSpecDir = path.dirname(
+      require.resolve('angular/tools/symbol-extractor/symbol_extractor_spec/empty.json'));
+  const scenarioFiles = fs.readdirSync(symbolExtractorSpecDir);
+  for (let i = 0; i < scenarioFiles.length; i = i + 2) {
+    let jsFile = scenarioFiles[i];
+    let jsonFile = scenarioFiles[i + 1];
+    let testName = jsFile.substring(0, jsFile.lastIndexOf('.'));
+    if (!jsFile.endsWith('.js')) throw new Error('Expected: .js file found: ' + jsFile);
+    if (!jsonFile.endsWith('.json')) throw new Error('Expected: .json file found: ' + jsonFile);
+
+    // Left here so that it is easy to debug single test.
+    // if (testName !== 'hello_world_min_debug') continue;
+
+    it(testName, () => {
+      const jsFileContent = fs.readFileSync(path.join(symbolExtractorSpecDir, jsFile)).toString();
+      const jsonFileContent =
+          fs.readFileSync(path.join(symbolExtractorSpecDir, jsonFile)).toString();
+      const symbols = SymbolExtractor.parse(testName, jsFileContent);
+      const diff = SymbolExtractor.diff(symbols, jsonFileContent);
+      expect(diff).toEqual({});
+    });
+  }
+});
diff --git a/tools/symbol-extractor/symbol_extractor_spec/dont_pick_up_inner_symbols.js b/tools/symbol-extractor/symbol_extractor_spec/dont_pick_up_inner_symbols.js
new file mode 100644
index 000000000000..29a6ab8998a9
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/dont_pick_up_inner_symbols.js
@@ -0,0 +1,15 @@
+/**
+ * @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
+ */
+
+!function() {
+  function A() {
+    function ignoreA() {}
+  }
+  function B() { let ignoreB = {}; }
+  !function() { let ignoreC = {}; };
+}();
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/dont_pick_up_inner_symbols.json b/tools/symbol-extractor/symbol_extractor_spec/dont_pick_up_inner_symbols.json
new file mode 100644
index 000000000000..e09a8db68f4e
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/dont_pick_up_inner_symbols.json
@@ -0,0 +1,4 @@
+[
+  "A",
+  "B"
+]
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/empty.js b/tools/symbol-extractor/symbol_extractor_spec/empty.js
new file mode 100644
index 000000000000..fa2078a2c18b
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/empty.js
@@ -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 let __empty__;
diff --git a/tools/symbol-extractor/symbol_extractor_spec/empty.json b/tools/symbol-extractor/symbol_extractor_spec/empty.json
new file mode 100644
index 000000000000..0637a088a01e
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/empty.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/empty_iife.js b/tools/symbol-extractor/symbol_extractor_spec/empty_iife.js
new file mode 100644
index 000000000000..3b96c8508014
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/empty_iife.js
@@ -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
+ */
+
+(function() {})();
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/empty_iife.json b/tools/symbol-extractor/symbol_extractor_spec/empty_iife.json
new file mode 100644
index 000000000000..0637a088a01e
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/empty_iife.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/hello_world_min_debug.js b/tools/symbol-extractor/symbol_extractor_spec/hello_world_min_debug.js
new file mode 100644
index 000000000000..5eea71c7e56c
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/hello_world_min_debug.js
@@ -0,0 +1,675 @@
+/**
+ * @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
+ */
+
+!function() {
+  'use strict';
+  /**
+*@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
+*/
+  var ChangeDetectionStrategy, ChangeDetectorStatus, ViewEncapsulation;
+  Object;
+  ChangeDetectionStrategy || (ChangeDetectionStrategy = {});
+  ChangeDetectorStatus || (ChangeDetectorStatus = {});
+  /**
+ * @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
+ */ Object;
+  ViewEncapsulation || (ViewEncapsulation = {});
+  /**
+*@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
+ */ 'undefined' != typeof window &&
+      window,
+      'undefined' != typeof self && 'undefined' != typeof WorkerGlobalScope &&
+      self instanceof WorkerGlobalScope && self,
+      'undefined' != typeof global && global;
+  /**
+*@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
+*/
+  String;
+  /**
+*@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
+*/
+  Function;
+  var __window$1 = 'undefined' != typeof window && window, __self$1 = 'undefined' != typeof self &&
+      'undefined' != typeof WorkerGlobalScope && self instanceof WorkerGlobalScope && self,
+      __global$1 = 'undefined' != typeof global && global,
+      _root = __window$1 || __global$1 || __self$1;
+  !function() {
+    if (!_root) throw new Error('RxJS could not find any global context (window, self, global)');
+  }();
+  Array;
+  !function() { Object.setPrototypeOf || Array; }();
+  Error;
+  var RendererStyleFlags2, Symbol$1 = _root.Symbol;
+  'function' == typeof Symbol$1 && 'function' == typeof Symbol$1.for &&
+      Symbol$1.for ('rxSubscriber'),
+      function() { Object.setPrototypeOf || Array; }();
+  !function(context) {
+    var $$observable, Symbol = _root.Symbol;
+    if ('function' == typeof Symbol)
+      if (Symbol.observable)
+        $$observable = Symbol.observable;
+      else {
+        $$observable = Symbol('observable');
+        Symbol.observable = $$observable;
+      }
+    else
+      $$observable = '@@observable';
+  }();
+  (function() { Object.setPrototypeOf || Array; })(),
+      function() { Object.setPrototypeOf || Array; }();
+  !function() { Object.setPrototypeOf || Array; }();
+  (function(root) {
+    var Symbol = root.Symbol;
+    if ('function' == typeof Symbol) {
+      Symbol.iterator || (Symbol.iterator = Symbol('iterator polyfill'));
+      return Symbol.iterator;
+    }
+    var Set_1 = root.Set;
+    if (Set_1 && 'function' == typeof new Set_1()['@@iterator']) return '@@iterator';
+    var Map_1 = root.Map;
+    if (Map_1)
+      for (var keys = Object.getOwnPropertyNames(Map_1.prototype), i = 0; i < keys.length; ++i) {
+        var key = keys[i];
+        if ('entries' !== key && 'size' !== key && Map_1.prototype[key] === Map_1.prototype.entries)
+          return key;
+      }
+  })(_root),
+      function() { Object.setPrototypeOf || Array; }();
+  (function() { Object.setPrototypeOf || Array; })(),
+      function() { Object.setPrototypeOf || Array; }();
+  !function() { Object.setPrototypeOf || Array; }();
+  Error, function() { Object.setPrototypeOf || Array; }(), function() {
+    Object.setPrototypeOf || Array;
+  }(), function() { Object.setPrototypeOf || Array; }();
+  !function() { Object.setPrototypeOf || Array; }();
+  Object;
+  RendererStyleFlags2 || (RendererStyleFlags2 = {});
+  var RendererStyleFlags3, _renderCompCount = 0;
+  function executeHooks(data, allHooks, checkHooks, creationMode) {
+    var hooksToCall = creationMode ? allHooks : checkHooks;
+    null != hooksToCall &&
+        function(data, arr) {
+          for (var i = 0; i < arr.length; i += 2) arr[1 | i].call(data[arr[i]]);
+        }
+        /**
+ * @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
+ */
+        /**
+ * @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
+ */ (data, hooksToCall);
+  }
+  RendererStyleFlags3 || (RendererStyleFlags3 = {});
+  var domRendererFactory3 = {
+    createRenderer: function(hostElement, rendererType) { return document; }
+  };
+  /**
+*@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
+ */ function
+  getNextLNodeWithProjection(node) {
+    var pNextOrParent = node.pNextOrParent;
+    return pNextOrParent ? 1 == (3 & pNextOrParent.flags) ? null : pNextOrParent : node.next;
+  }
+  function getNextOrParentSiblingNode(initialNode, rootNode) {
+    for (var node = initialNode, nextNode = getNextLNodeWithProjection(node); node && !nextNode;) {
+      if ((node = node.pNextOrParent || node.parent) === rootNode) return null;
+      nextNode = node && getNextLNodeWithProjection(node);
+    }
+    return nextNode;
+  }
+  function findFirstRNode(rootNode) {
+    for (var node = rootNode; node;) {
+      var type = 3 & node.flags, nextNode = null;
+      if (3 === type) return node.native;
+      if (0 === type) {
+        var childContainerData = node.data;
+        nextNode = childContainerData.views.length ? childContainerData.views[0].child : null;
+      } else
+        nextNode = 1 === type ? node.data.head : node.child;
+      node = null === nextNode ? getNextOrParentSiblingNode(node, rootNode) : nextNode;
+    }
+    return null;
+  }
+  function canInsertNativeNode(parent, view) {
+    return 3 == (3 & parent.flags) && (parent.view !== view || null === parent.data);
+  }
+  function stringify$1(value) {
+    return 'function' == typeof value ?
+        value.name || value :
+        'string' == typeof value ? value : null == value ? '' : '' + value;
+  }
+  /**
+*@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
+*/
+  var renderer, rendererFactory, previousOrParentNode, isParent, tData, currentView, currentQueries,
+      creationMode, data, bindingIndex;
+  currentView = createLView(null, null, createTView());
+  function enterView(newView, host) {
+    var oldView = currentView;
+    data = newView.data;
+    bindingIndex = newView.bindingStartIndex || 0;
+    tData = newView.tView.data;
+    creationMode = newView.creationMode;
+    renderer = newView.renderer;
+    if (null != host) {
+      previousOrParentNode = host;
+      isParent = !0;
+    }
+    currentView = newView;
+    currentQueries = newView.queries;
+    return oldView;
+  }
+  function leaveView(newView) {
+    executeHooks(
+        currentView.data, currentView.tView.viewHooks, currentView.tView.viewCheckHooks,
+        creationMode);
+    currentView.creationMode = !1;
+    currentView.lifecycleStage = 1;
+    currentView.tView.firstTemplatePass = !1;
+    enterView(newView, null);
+  }
+  function createLView(viewId, renderer, tView, template, context) {
+    void 0 === template && (template = null);
+    void 0 === context && (context = null);
+    return {
+      parent: currentView,
+      id: viewId,
+      node: null,
+      data: [],
+      tView: tView,
+      cleanup: null,
+      renderer: renderer,
+      child: null,
+      tail: null,
+      next: null,
+      bindingStartIndex: null,
+      creationMode: !0,
+      template: template,
+      context: context,
+      dynamicViewCount: 0,
+      lifecycleStage: 1,
+      queries: null
+    };
+  }
+  function createLNode(index, type, native, state) {
+    var parent =
+            isParent ? previousOrParentNode : previousOrParentNode && previousOrParentNode.parent,
+        queries =
+            (isParent ? currentQueries : previousOrParentNode && previousOrParentNode.queries) ||
+        parent && parent.queries && parent.queries.child(),
+        isState = null != state, node = {
+          flags: type,
+          native: native,
+          view: currentView,
+          parent: parent,
+          child: null,
+          next: null,
+          nodeInjector: parent ? parent.nodeInjector : null,
+          data: isState ? state : null,
+          queries: queries,
+          tNode: null,
+          pNextOrParent: null
+        };
+    2 == (2 & type) && isState && (state.node = node);
+    if (null != index) {
+      data[index] = node;
+      index >= tData.length ? tData[index] = null : node.tNode = tData[index];
+      if (isParent) {
+        currentQueries = null;
+        previousOrParentNode.view !== currentView && 2 != (3 & previousOrParentNode.flags) ||
+            (previousOrParentNode.child = node);
+      } else
+        previousOrParentNode && (previousOrParentNode.next = node);
+    }
+    previousOrParentNode = node;
+    isParent = !0;
+    return node;
+  }
+  function renderEmbeddedTemplate(viewNode, template, context, renderer) {
+    var _isParent = isParent, _previousOrParentNode = previousOrParentNode;
+    try {
+      isParent = !0;
+      previousOrParentNode = null;
+      var cm = !1;
+      if (null == viewNode) {
+        viewNode =
+            createLNode(null, 2, null, createLView(-1, renderer, createTView(), template, context));
+        cm = !0;
+      }
+      enterView(viewNode.data, viewNode);
+      template(context, cm);
+    } finally {
+      refreshDynamicChildren();
+      leaveView(currentView.parent);
+      isParent = _isParent;
+      previousOrParentNode = _previousOrParentNode;
+    }
+    return viewNode;
+  }
+  function renderComponentOrTemplate(node, hostView, componentOrContext, template) {
+    var oldView = enterView(hostView, node);
+    try {
+      rendererFactory.begin && rendererFactory.begin();
+      template ? template(componentOrContext, creationMode) : function(
+                                                                  directiveIndex, elementIndex) {
+        !function(currentView, tView, creationMode) {
+          if (1 === currentView.lifecycleStage) {
+            executeHooks(currentView.data, tView.initHooks, tView.checkHooks, creationMode);
+            currentView.lifecycleStage = 2;
+          }
+        }(currentView, currentView.tView, creationMode);
+        !function(currentView, tView, creationMode) {
+          if (currentView.lifecycleStage < 3) {
+            executeHooks(
+                currentView.data, tView.contentHooks, tView.contentCheckHooks, creationMode);
+            currentView.lifecycleStage = 3;
+          }
+        }(currentView, currentView.tView, creationMode);
+        var template = tData[1].template;
+        if (null != template) {
+          var element = data[0], directive = getDirectiveInstance(data[1]),
+              oldView = enterView(element.data, element);
+          try {
+            template(directive, creationMode);
+          } finally {
+            refreshDynamicChildren();
+            leaveView(oldView);
+          }
+        }
+      }();
+    } finally {
+      rendererFactory.end && rendererFactory.end();
+      leaveView(oldView);
+    }
+  }
+  function createTView() {
+    return {
+      data: [],
+      firstTemplatePass: !0,
+      initHooks: null,
+      checkHooks: null,
+      contentHooks: null,
+      contentCheckHooks: null,
+      viewHooks: null,
+      viewCheckHooks: null,
+      destroyHooks: null,
+      objectLiterals: null
+    };
+  }
+  function locateHostElement(factory, elementOrSelector) {
+    rendererFactory = factory;
+    var defaultRenderer = factory.createRenderer(null, null);
+    return 'string' == typeof elementOrSelector ?
+        defaultRenderer.selectRootElement ? defaultRenderer.selectRootElement(elementOrSelector) :
+                                            defaultRenderer.querySelector(elementOrSelector) :
+        elementOrSelector;
+  }
+  function refreshDynamicChildren() {
+    for (var current = currentView.child; null !== current; current = current.next)
+      if (0 !== current.dynamicViewCount && current.views)
+        for (var container_1 = current, i = 0; i < container_1.views.length; i++) {
+          var view = container_1.views[i];
+          renderEmbeddedTemplate(view, view.data.template, view.data.context, renderer);
+        }
+  }
+  var NO_CHANGE = {};
+  function getDirectiveInstance(instanceOrArray) {
+    return Array.isArray(instanceOrArray) ? instanceOrArray[0] : instanceOrArray;
+  }
+  var EMPTY$1 = {};
+  function noop$2() {}
+  function invertObject(obj) {
+    if (null == obj) return EMPTY$1;
+    var newObj = {};
+    for (var minifiedKey in obj) newObj[obj[minifiedKey]] = minifiedKey;
+    return newObj;
+  }
+  /**
+*@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
+*/
+  /**
+*@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
+*/
+  /**
+ * @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
+ */ Object;
+  /**
+ * @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
+   */
+      function(componentType, opts) {
+        void 0 === opts && (opts = {});
+        var component, rendererFactory = opts.rendererFactory || domRendererFactory3,
+                       componentDef = componentType.ngComponentDef;
+        componentDef.type != componentType && (componentDef.type = componentType);
+        var hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag),
+            oldView = enterView(
+                createLView(
+                    -1, rendererFactory.createRenderer(hostNode, componentDef.rendererType),
+                    createTView()),
+                null);
+        try {
+          !function(rNode, def) {
+            !function() {
+              isParent = !1;
+              previousOrParentNode = null;
+            }();
+            createLNode(0, 3, rNode, createLView(-1, renderer, function(template) {
+                          return template.ngPrivateData || (template.ngPrivateData = createTView());
+                        }(def.template)));
+          }(hostNode, componentDef);
+          component = getDirectiveInstance(function(index, directive, directiveDef, queryName) {
+            var instance, flags = previousOrParentNode.flags;
+            0 == (4092 & flags) ? flags = 4100 | 3 & flags : flags += 4;
+            previousOrParentNode.flags = flags;
+            Object.defineProperty(
+                directive, '__ngHostLNode__', {enumerable: !1, value: previousOrParentNode});
+            data[1] = instance = directive;
+            if (1 >= tData.length) {
+              tData[1] = directiveDef;
+            }
+            var diPublic = directiveDef.diPublic;
+            diPublic && diPublic(directiveDef);
+            var tNode = previousOrParentNode.tNode;
+            tNode && tNode.attrs && function(instance, inputs, tNode) {
+              var directiveIndex = ((4092 & previousOrParentNode.flags) >> 2) - 1,
+                  initialInputData = tNode.initialInputs;
+              (void 0 === initialInputData || directiveIndex >= initialInputData.length) &&
+                  (initialInputData = function(directiveIndex, inputs, tNode) {
+                    var initialInputData = tNode.initialInputs || (tNode.initialInputs = []);
+                    initialInputData[directiveIndex] = null;
+                    for (var attrs = tNode.attrs, i = 0; i < attrs.length; i += 2) {
+                      var minifiedInputName = inputs[attrs[i]];
+                      void 0 !== minifiedInputName &&
+                          (initialInputData[directiveIndex] || (initialInputData[directiveIndex] = [
+                           ])).push(minifiedInputName, attrs[1 | i]);
+                    }
+                    return initialInputData;
+                  }(directiveIndex, directiveDef.inputs, tNode));
+              var initialInputs = initialInputData[directiveIndex];
+              if (initialInputs)
+                for (var i = 0; i < initialInputs.length; i += 2)
+                  instance[initialInputs[i]] = initialInputs[1 | i];
+            }(instance, 0, tNode);
+            !
+                /**
+ * @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
+ */
+                function(index, onInit, doCheck, tView) {
+                  if (!0 === tView.firstTemplatePass) {
+                    null != onInit && (tView.initHooks || (tView.initHooks = [])).push(1, onInit);
+                    if (null != doCheck) {
+                      (tView.initHooks || (tView.initHooks = [])).push(1, doCheck);
+                      (tView.checkHooks || (tView.checkHooks = [])).push(1, doCheck);
+                    }
+                  }
+                }(0, directiveDef.onInit, directiveDef.doCheck, currentView.tView);
+            return instance;
+          }(0, componentDef.n(), componentDef));
+        } finally {
+          leaveView(oldView);
+        }
+        opts.features &&
+            opts.features.forEach(function(feature) { return feature(component, componentDef); });
+        !function(component) {
+          var hostNode = component.__ngHostLNode__;
+          renderComponentOrTemplate(hostNode, hostNode.view, component);
+        }
+        /**
+ * @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
+ */ (component);
+      }(function() {
+        function HelloWorld() { this.name = 'World'; }
+        HelloWorld.ngComponentDef = function(componentDefinition) {
+          var type = componentDefinition.type, def = {
+            type: type,
+            diPublic: null,
+            n: componentDefinition.factory,
+            tag: componentDefinition.tag || null,
+            template: componentDefinition.template || null,
+            h: componentDefinition.hostBindings || noop$2,
+            inputs: invertObject(componentDefinition.inputs),
+            outputs: invertObject(componentDefinition.outputs),
+            methods: invertObject(componentDefinition.methods),
+            rendererType: function(type) {
+              if (type && '$$undefined' === type.id) {
+                var isFilled =
+                    null != type.encapsulation && type.encapsulation !== ViewEncapsulation.None ||
+                    type.styles.length || Object.keys(type.data).length;
+                type.id = isFilled ? 'c' + _renderCompCount++ : '$$empty';
+              }
+              type && '$$empty' === type.id && (type = null);
+              return type || null;
+            }(componentDefinition.rendererType) ||
+                null,
+            exportAs: componentDefinition.exportAs,
+            onInit: type.prototype.ngOnInit || null,
+            doCheck: type.prototype.ngDoCheck || null,
+            afterContentInit: type.prototype.ngAfterContentInit || null,
+            afterContentChecked: type.prototype.ngAfterContentChecked || null,
+            afterViewInit: type.prototype.ngAfterViewInit || null,
+            afterViewChecked: type.prototype.ngAfterViewChecked || null,
+            onDestroy: type.prototype.ngOnDestroy || null
+          },
+              feature = componentDefinition.features;
+          feature && feature.forEach(function(fn) { return fn(def); });
+          return def;
+        }({
+          type: HelloWorld,
+          tag: 'hello-world',
+          factory: function() { return new HelloWorld(); },
+          template: function(ctx, cm) {
+            cm && function(index, value) {
+              createLNode(0, 3, null);
+              isParent = !1;
+            }();
+            !function(index, value) {
+              var existingNode = data[0];
+              if (existingNode.native)
+                value !== NO_CHANGE &&
+                    (renderer.setValue ?
+                         renderer.setValue(existingNode.native, stringify$1(value)) :
+                         existingNode.native.textContent = stringify$1(value));
+              else {
+                existingNode.native = renderer.createText ?
+                    renderer.createText(stringify$1(value)) :
+                    renderer.createTextNode(stringify$1(value));
+                !function(node, currentView) {
+                  var parent = node.parent;
+                  if (canInsertNativeNode(parent, currentView)) {
+                    var nativeSibling = function(node, stopNode) {
+                      for (var currentNode = node; currentNode && null !== currentNode;) {
+                        var pNextOrParent = currentNode.pNextOrParent;
+                        if (pNextOrParent) {
+                          for (var pNextOrParentType = 3 & pNextOrParent.flags;
+                               1 !== pNextOrParentType;) {
+                            if (nativeNode = findFirstRNode(pNextOrParent)) return nativeNode;
+                            pNextOrParent = pNextOrParent.pNextOrParent;
+                          }
+                          currentNode = pNextOrParent;
+                        } else {
+                          for (var currentSibling = currentNode.next; currentSibling;) {
+                            var nativeNode;
+                            if (nativeNode = findFirstRNode(currentSibling)) return nativeNode;
+                            currentSibling = currentSibling.next;
+                          }
+                          var parentNode = currentNode.parent;
+                          currentNode = null;
+                          if (parentNode) {
+                            var parentType = 3 & parentNode.flags;
+                            0 !== parentType && 2 !== parentType || (currentNode = parentNode);
+                          }
+                        }
+                      }
+                      return null;
+                    }(node), renderer = currentView.renderer;
+                    renderer.listen ?
+                        renderer.insertBefore(parent.native, node.native, nativeSibling) :
+                        parent.native.insertBefore(node.native, nativeSibling, !1);
+                  }
+                }
+                /**
+* @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
+ */ (existingNode, currentView);
+              }
+            }(0, function(prefix, value, suffix) {
+              return function(value) {
+                if (creationMode) {
+                  !function() {
+                    null == currentView.bindingStartIndex &&
+                        (bindingIndex = currentView.bindingStartIndex = data.length);
+                  }();
+                  return data[bindingIndex++] = value;
+                }
+                var changed = value !== NO_CHANGE && function(a, b) {
+                  return !(a != a && value != value) && a !== value;
+                }(data[bindingIndex]);
+                changed && (data[bindingIndex] = value);
+                bindingIndex++;
+                return changed ? value : NO_CHANGE;
+              }(value) === NO_CHANGE ?
+                  NO_CHANGE :
+                  'Hello ' + stringify$1(value) + '!';
+            }(0, ctx.name));
+          }
+        });
+        return HelloWorld;
+      }());
+}();
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/hello_world_min_debug.json b/tools/symbol-extractor/symbol_extractor_spec/hello_world_min_debug.json
new file mode 100644
index 000000000000..aab644f77132
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/hello_world_min_debug.json
@@ -0,0 +1,28 @@
+[ "EMPTY$1",
+  "NO_CHANGE",
+  "Symbol$1",
+  "__global$1",
+  "__self$1",
+  "__window$1",
+  "_renderCompCount",
+  "_root",
+  "createLNode",
+  "createLView",
+  "domRendererFactory3",
+  "enterView",
+  "invertObject",
+  "leaveView",
+  "locateHostElement",
+  "noop$2",
+  "refreshDynamicChildren",
+  "renderComponentOrTemplate",
+  "renderEmbeddedTemplate",
+  "stringify$1",
+  "canInsertNativeNode",
+  "createTView",
+  "executeHooks",
+  "findFirstRNode",
+  "getDirectiveInstance",
+  "getNextLNodeWithProjection",
+  "getNextOrParentSiblingNode"
+]
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/iife_with_export.js b/tools/symbol-extractor/symbol_extractor_spec/iife_with_export.js
new file mode 100644
index 000000000000..41df5cabeba8
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/iife_with_export.js
@@ -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
+ */
+
+/**
+ * Rollup exports symbols in this particular way. This test demonstrates that we can correctly read
+ * symbols.
+ */
+var bundle = function(exports) {
+  'use strict';
+  // tslint:disable-next-line:no-console
+  console.log('Hello, Alice in Wonderland');
+  var A = function() {
+    function A() {}
+    A.prototype.a = function() { return document.a; };
+    return A;
+  }();
+  // tslint:disable-next-line:no-console
+  console.error(new A().a());
+  exports.A = A;
+  return exports;
+}({});
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/iife_with_export.json b/tools/symbol-extractor/symbol_extractor_spec/iife_with_export.json
new file mode 100644
index 000000000000..c09db23487d8
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/iife_with_export.json
@@ -0,0 +1,3 @@
+[
+  "A"
+]
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/simple.js b/tools/symbol-extractor/symbol_extractor_spec/simple.js
new file mode 100644
index 000000000000..02afdb04177d
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/simple.js
@@ -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
+ */
+
+(function() { var Class = function() {}, fn = function() {}; })();
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/simple.json b/tools/symbol-extractor/symbol_extractor_spec/simple.json
new file mode 100644
index 000000000000..40de35bc5fb2
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/simple.json
@@ -0,0 +1,8 @@
+[
+  {
+    "name": "Class"
+  },
+  {
+    "name": "fn"
+  }
+]
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/two_symbols_per_var.js b/tools/symbol-extractor/symbol_extractor_spec/two_symbols_per_var.js
new file mode 100644
index 000000000000..3326d87b10d5
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/two_symbols_per_var.js
@@ -0,0 +1,23 @@
+/**
+ * @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
+ */
+
+!function() {
+  'use strict';
+  // tslint:disable-next-line:no-console
+  console.log('Hello, Alice in Wonderland');
+  var A = function() {
+    function A() {}
+    return A.prototype.a = function() { return document.a; }, A;
+  }(), B = function() {
+    function B() {}
+    return B.prototype.b = function() { return window.b; }, B;
+  }();
+  var ignore_no_initializer;
+  // tslint:disable-next-line:no-console
+  console.error(new A().a(), new B().b());
+}();
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/two_symbols_per_var.json b/tools/symbol-extractor/symbol_extractor_spec/two_symbols_per_var.json
new file mode 100644
index 000000000000..62227abf6957
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/two_symbols_per_var.json
@@ -0,0 +1,8 @@
+[
+  {
+    "name": "A"
+  },
+  {
+    "name": "B"
+  }
+]
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/var_list.js b/tools/symbol-extractor/symbol_extractor_spec/var_list.js
new file mode 100644
index 000000000000..a9bd6f8887e5
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/var_list.js
@@ -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
+ */
+
+!function() {
+  'use strict';
+  var constant = 1, method = function() {}, clazz = class {};
+}();
\ No newline at end of file
diff --git a/tools/symbol-extractor/symbol_extractor_spec/var_list.json b/tools/symbol-extractor/symbol_extractor_spec/var_list.json
new file mode 100644
index 000000000000..1f180d75c6b3
--- /dev/null
+++ b/tools/symbol-extractor/symbol_extractor_spec/var_list.json
@@ -0,0 +1,5 @@
+[
+  "clazz",
+  "constant",
+  "method"
+]
\ No newline at end of file
diff --git a/tools/testing/BUILD.bazel b/tools/testing/BUILD.bazel
new file mode 100644
index 000000000000..11605471fcf3
--- /dev/null
+++ b/tools/testing/BUILD.bazel
@@ -0,0 +1,32 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "browser",
+    testonly = 1,
+    srcs = ["init_browser_spec.ts"],
+    deps = [
+        "//packages/core/testing",
+        "//packages/platform-browser-dynamic/testing",
+        "//packages/platform-browser/animations",
+    ],
+)
+
+ts_library(
+    name = "node",
+    testonly = 1,
+    srcs = ["init_node_spec.ts"],
+    deps = [
+        "//packages/core/testing",
+        "//packages/platform-server",
+        "//packages/platform-server/testing",
+    ],
+)
+
+ts_library(
+    name = "node_no_angular",
+    testonly = 1,
+    srcs = ["init_node_no_angular_spec.ts"],
+    deps = ["//packages:types"],
+)
diff --git a/tools/testing/README.md b/tools/testing/README.md
new file mode 100644
index 000000000000..63db6735ab4b
--- /dev/null
+++ b/tools/testing/README.md
@@ -0,0 +1,9 @@
+The spec helper files here set up the global testing environment prior to the execution of specs.
+
+There are 3 options:
+
+* `init_node_spec` - configures a node environment to test Angular applications with
+platform-server.
+* `init_node_no_angular_spec` - configures a node environment for testing without setting up
+Angular's testbed (no dependency on Angular packages is incurred).
+* `init_browser_spec` - configures a browser environment to test Angular applications.
\ No newline at end of file
diff --git a/tools/testing/init_browser_spec.ts b/tools/testing/init_browser_spec.ts
new file mode 100644
index 000000000000..138328b73494
--- /dev/null
+++ b/tools/testing/init_browser_spec.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {TestBed} from '@angular/core/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+TestBed.initTestEnvironment(
+    [BrowserDynamicTestingModule, NoopAnimationsModule], platformBrowserDynamicTesting());
+
+(window as any).isNode = false;
+(window as any).isBrowser = true;
+(window as any).global = window;
\ No newline at end of file
diff --git a/tools/testing/init_node_no_angular_spec.ts b/tools/testing/init_node_no_angular_spec.ts
new file mode 100644
index 000000000000..f2df6682dfdd
--- /dev/null
+++ b/tools/testing/init_node_no_angular_spec.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
+ */
+
+// This hack is needed to get jasmine, node and zone working inside bazel.
+// 1) we load `jasmine-core` which contains the ENV: it, describe etc...
+const jasmineCore: any = require('jasmine-core');
+// 2) We create an instance of `jasmine` ENV.
+const patchedJasmine = jasmineCore.boot(jasmineCore);
+// 3) Save the `jasmine` into global so that `zone.js/dist/jasmine-patch.js` can get a hold of it to
+// patch it.
+(global as any)['jasmine'] = patchedJasmine;
+// 4) Change the `jasmine-core` to make sure that all subsequent jasmine's have the same ENV,
+// otherwise the patch will not work.
+//    This is needed since Bazel creates a new instance of jasmine and it's ENV and we want to make
+//    sure it gets the same one.
+jasmineCore.boot = function() {
+  return patchedJasmine;
+};
+
+(global as any).isNode = true;
+(global as any).isBrowser = false;
diff --git a/tools/testing/init_node_spec.ts b/tools/testing/init_node_spec.ts
new file mode 100644
index 000000000000..78b3600e6dd3
--- /dev/null
+++ b/tools/testing/init_node_spec.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
+ */
+
+import 'zone.js/dist/zone-node.js';
+import 'zone.js/dist/long-stack-trace-zone.js';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test.js';
+import 'zone.js/dist/async-test.js';
+import 'zone.js/dist/fake-async-test.js';
+import 'zone.js/dist/task-tracking.js';
+import 'reflect-metadata/Reflect';
+
+// This hack is needed to get jasmine, node and zone working inside bazel.
+// 1) we load `jasmine-core` which contains the ENV: it, describe etc...
+const jasmineCore: any = require('jasmine-core');
+// 2) We create an instance of `jasmine` ENV.
+const patchedJasmine = jasmineCore.boot(jasmineCore);
+// 3) Save the `jasmine` into global so that `zone.js/dist/jasmine-patch.js` can get a hold of it to
+// patch it.
+(global as any)['jasmine'] = patchedJasmine;
+// 4) Change the `jasmine-core` to make sure that all subsequent jasmine's have the same ENV,
+// otherwise the patch will not work.
+//    This is needed since Bazel creates a new instance of jasmine and it's ENV and we want to make
+//    sure it gets the same one.
+jasmineCore.boot = function() {
+  return patchedJasmine;
+};
+// 5) Patch jasmine ENV with code which understands ProxyZone.
+import 'zone.js/dist/jasmine-patch.js';
+
+(global as any).isNode = true;
+(global as any).isBrowser = false;
+
+// Init TestBed
+import {TestBed} from '@angular/core/testing';
+import {ServerTestingModule, platformServerTesting} from '@angular/platform-server/testing/src/server';
+import {DominoAdapter} from '@angular/platform-server/src/domino_adapter';
+
+TestBed.initTestEnvironment(ServerTestingModule, platformServerTesting());
+DominoAdapter.makeCurrent();
diff --git a/tools/traceur-jasmine/index.js b/tools/traceur-jasmine/index.js
deleted file mode 100644
index a082354dabef..000000000000
--- a/tools/traceur-jasmine/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-'use strict';
-
-var glob = require('glob');
-var JasmineRunner = require('jasmine');
-var path = require('path');
-// Require traceur to exposes $traceurRuntime on global context so that CJS files can run
-require('traceur/bin/traceur-runtime.js');
-require('reflect-metadata/Reflect');
-
-var jrunner = new JasmineRunner();
-
-// Support passing multiple globs
-var globsIndex = process.argv.indexOf('--');
-var args;
-if (globsIndex < 0) {
-  args = [process.argv[2]];
-} else {
-  args = process.argv.slice(globsIndex + 1);
-}
-
-var specFiles = args.
-  map(function(globstr) { return glob.sync(globstr); }).
-  reduce(function(specFiles, paths) { return specFiles.concat(paths); }, []);
-
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
-
-jrunner.configureDefaultReporter({
-  showColors: process.argv.indexOf('--no-color') === -1
-});
-
-jrunner.onComplete(function(passed) {
-  process.exit(passed ? 0 : 1);
-});
-jrunner.projectBaseDir = path.resolve(__dirname, '../../');
-jrunner.specDir = '';
-jrunner.addSpecFiles(specFiles);
-jrunner.execute();
diff --git a/tools/transpiler/gulp-traceur.js b/tools/transpiler/gulp-traceur.js
deleted file mode 100644
index 42941fc30e7b..000000000000
--- a/tools/transpiler/gulp-traceur.js
+++ /dev/null
@@ -1,62 +0,0 @@
-'use strict';
-var through = require('through2');
-var compiler = require('./index');
-var path = require('path');
-
-module.exports = gulpTraceur;
-gulpTraceur.RUNTIME_PATH = compiler.RUNTIME_PATH;
-gulpTraceur.sourcesChanged = compiler.sourcesChanged;
-
-function gulpTraceur(options, resolveModuleName) {
-  options = options || {};
-
-  return through.obj(function (file, enc, done) {
-    if (file.isNull()) {
-      done();
-      return;
-    }
-
-    if (file.isStream()) {
-      throw new Error('gulp-traceur: Streaming not supported');
-    }
-
-    try {
-      var originalFilePath = file.history[0];
-      var moduleName = resolveModuleName ? resolveModuleName(file.relative) : null;
-      var result = compiler.compile(options, {
-        inputPath: originalFilePath,
-        outputPath: file.relative,
-        moduleName: moduleName
-      }, file.contents.toString());
-
-      var transpiledContent = result.js;
-      var sourceMap = result.sourceMap;
-
-      if (sourceMap) {
-        sourceMap.file = file.relative;
-        var sourceMapFile = cloneFile(file, {
-          path: file.path.replace(/\.\w+$/, '.map'),
-          contents: JSON.stringify(sourceMap)
-        });
-
-        transpiledContent += '\n//# sourceMappingURL=./' + path.basename(sourceMapFile.path);
-        this.push(sourceMapFile);
-      }
-
-      this.push(cloneFile(file, {contents: transpiledContent}));
-      done();
-    } catch (errors) {
-      if (errors.join) {
-         throw new Error('gulp-traceur:\n  ' + errors.join('\n  '));
-      } else {
-        console.error('Error when transpiling:\n  ' + originalFilePath);
-        throw errors;
-      }
-    }
-  });
-};
-
-function cloneFile(file, override) {
-  var File = file.constructor;
-  return new File({path: override.path || file.path, cwd: override.cwd || file.cwd, contents: new Buffer(override.contents || file.contents), base: override.base || file.base});
-}
diff --git a/tools/transpiler/index.js b/tools/transpiler/index.js
deleted file mode 100644
index c8b559937af0..000000000000
--- a/tools/transpiler/index.js
+++ /dev/null
@@ -1,243 +0,0 @@
-// Entry point for Node.
-
-var fs = require('fs');
-var glob = require('glob');
-var path = require('path');
-var traceur = require('traceur');
-var assert = require('assert');
-
-exports.RUNTIME_PATH = traceur.RUNTIME_PATH;
-var TRACEUR_PATH = traceur.RUNTIME_PATH.replace('traceur-runtime.js', 'traceur.js');
-var SELF_SOURCE_REGEX = /transpiler\/src/;
-var SELF_COMPILE_OPTIONS = {
-  modules: 'register',
-  memberVariables: false,
-  moduleName: true,
-  script: false // parse as a module
-};
-
-var needsReload = true;
-var oldSystemGet = System.get;
-var currentOptions;
-
-exports.reloadSources = function() {
-  needsReload = true;
-};
-
-exports.compile = function compile(options, paths, source, reloadTraceur) {
-  if (needsReload) {
-    reloadCompiler(reloadTraceur);
-    needsReload = false;
-  }
-  var inputPath, outputPath, moduleName;
-  if (typeof paths === 'string') {
-    inputPath = outputPath = paths;
-  } else {
-    inputPath = paths.inputPath;
-    outputPath = paths.inputPath;
-    moduleName = paths.moduleName;
-  }
-  outputPath = outputPath || inputPath;
-  moduleName = moduleName || inputPath;
-  moduleName = moduleName.replace(/\.\w*$/, '');
-
-  var CompilerCls = System.get('transpiler/src/compiler').Compiler;
-
-  var compiler = new CompilerCls(options, moduleName);
-  currentOptions = options;
-  var result = {
-    js: compiler.compile(source, inputPath, outputPath),
-    sourceMap: null
-  };
-  currentOptions = null;
-
-  var sourceMapString = compiler.getSourceMap();
-  if (sourceMapString) {
-    result.sourceMap = JSON.parse(sourceMapString);
-  }
-
-  if (options.outputLanguage === 'es6' && source.indexOf('$traceurRuntime') === -1) {
-    assert(result.js.indexOf('$traceurRuntime') === -1,
-      'Transpile to ES6 must not add references to $traceurRuntime, '
-        + inputPath + ' is transpiled to:\n' + result.js);
-  }
-  return result;
-};
-
-exports.init = function() {
-  if (needsReload) {
-    reloadCompiler();
-    needsReload = false;
-  }
-}
-
-// Transpile and evaluate the code in `src`.
-// Use existing traceur to compile our sources.
-function reloadCompiler(reloadTraceur) {
-  if (reloadTraceur) {
-    loadModule(TRACEUR_PATH, false);
-  }
-  glob.sync(__dirname + '/src/**/*.js').forEach(function(fileName) {
-    loadModule(fileName, true);
-  });
-
-  // Traceur modules are register with the ".js" extension but we don't want
-  // to add it to all the import statements.
-  System.get = function get(normalizedName) {
-    var m = oldSystemGet.call(this, normalizedName);
-    if (!m && normalizedName.indexOf('traceur') == 0) {
-      m = oldSystemGet.call(this, normalizedName + '.js');
-    }
-    return m;
-  };
-
-  useRttsAssertModuleForConvertingTypesToExpressions();
-  supportSuperCallsInEs6Patch();
-  convertTypesToExpressionsInEs6Patch();
-  disableGetterSetterAssertionPatch();
-  patchCommonJSModuleTransformerToSupportExportStar();
-}
-
-function loadModule(filepath, transpile) {
-  var data = fs.readFileSync(filepath, 'utf8');
-
-  if (!data) {
-    throw new Error('Failed to import ' + filepath);
-  }
-
-  if (transpile) {
-    var moduleName = path.normalize(filepath)
-      .replace(__dirname, 'transpiler')
-      .replace(/\\/g, '/')
-      .replace(/\.\w*$/, '');
-    data = traceur.compile(data, SELF_COMPILE_OPTIONS, moduleName);
-  }
-
-  ('global', eval)(data);
-}
-
-function extend(source, props) {
-  var res = {};
-  for (var prop in source) {
-    res[prop] = source[prop];
-  }
-  for (var prop in props) {
-    res[prop] = props[prop];
-  }
-  return res;
-}
-
-// TODO(tbosch): remove when traceur is fixed.
-// see https://github.com/google/traceur-compiler/issues/1700
-function supportSuperCallsInEs6Patch() {
-  var traceurVersion = System.map['traceur'];
-  var ParseTreeMapWriter = System.get(traceurVersion+'/src/outputgeneration/ParseTreeMapWriter').ParseTreeMapWriter;
-  var _enterBranch = ParseTreeMapWriter.prototype.enterBranch;
-  ParseTreeMapWriter.prototype.enterBranch = function(location) {
-    if (!location.start) {
-      // This would throw...
-      return;
-    }
-    return _enterBranch.apply(this, arguments);
-  }
-}
-
-// TODO(tbosch): Remove when traceur is fixed.
-// see https://github.com/google/traceur-compiler/issues/1699
-function convertTypesToExpressionsInEs6Patch() {
-  var traceurVersion = System.map['traceur'];
-  var TypeToExpressionTransformer = System.get(traceurVersion+'/src/codegeneration/TypeToExpressionTransformer').TypeToExpressionTransformer;
-  var PureES6Transformer = System.get(traceurVersion+'/src/codegeneration/PureES6Transformer').PureES6Transformer;
-  var UniqueIdentifierGenerator = System.get(traceurVersion+'/src/codegeneration/UniqueIdentifierGenerator').UniqueIdentifierGenerator;
-
-  var _transform = PureES6Transformer.prototype.transform;
-  PureES6Transformer.prototype.transform = function() {
-    if (!this._patched) {
-      this._patched = true;
-      var self = this;
-      this.treeTransformers_.splice(0,0, function(tree) {
-        return new TypeToExpressionTransformer(new UniqueIdentifierGenerator(), self.reporter_, self.options_).transformAny(tree);
-      });
-    }
-    return _transform.apply(this, arguments);
-  };
-}
-
-// TODO(tbosch): Disable getter/setters for assertions until traceur has a flag
-// that allows to disable them while keeping assertions and member fields enabled.
-// see https://github.com/google/traceur-compiler/issues/1625
-// Why:
-// - traceur uses field names based on numbers, which can lead to collisions when creating a subclass in a separate compiler run.
-// - this rename of fields makes debugging via the repl harder (e.g. via DevTools console)
-// - this rename can break JSON conversion of instances
-function disableGetterSetterAssertionPatch() {
-  var traceurVersion = System.map['traceur'];
-  var MemberVariableTransformer = System.get(traceurVersion+'/src/codegeneration/MemberVariableTransformer').MemberVariableTransformer;
-  var AnonBlock = System.get(traceurVersion+'/src/syntax/trees/ParseTrees.js').AnonBlock;
-  MemberVariableTransformer.prototype.transformPropertyVariableDeclaration = function(tree) {
-    return new AnonBlock(tree.location, []);
-  }
-}
-
-// TODO(tbosch): Get all types from `assert` module and not from `$traceurRuntime`.
-// With this a transpile to ES6 does no more include the `$traceurRuntime`.
-// see https://github.com/google/traceur-compiler/issues/1706
-function useRttsAssertModuleForConvertingTypesToExpressions() {
-  var traceurVersion = System.map['traceur'];
-  var original = System.get(traceurVersion+'/src/codegeneration/TypeToExpressionTransformer').TypeToExpressionTransformer;
-  var patch = System.get('transpiler/src/patch/TypeToExpressionTransformer').TypeToExpressionTransformer;
-  for (var prop in patch.prototype) {
-    original.prototype[prop] = patch.prototype[prop];
-  }
-  original.prototype.getOptions = function() { return currentOptions; };
-
-  var TypeAssertionTransformer = System.get(traceurVersion+'/src/codegeneration/TypeAssertionTransformer').TypeAssertionTransformer;
-  var createIdentifierExpression = System.get(traceurVersion+'/src/codegeneration/ParseTreeFactory').createIdentifierExpression;
-  var parseExpression = System.get(traceurVersion+'/src/codegeneration/PlaceholderParser.js').parseExpression;
-  TypeAssertionTransformer.prototype.transformBindingElementParameter_ = function(element, typeAnnotation) {
-    // Copied from https://github.com/google/traceur-compiler/commits/master/src/codegeneration/TypeAssertionTransformer.js
-    if (!element.binding.isPattern()) {
-      if (typeAnnotation) {
-        this.paramTypes_.atLeastOneParameterTyped = true;
-      } else {
-        // PATCH start
-        var typeModule = currentOptions.outputLanguage === 'es6' ? 'assert' : '$traceurRuntime';
-        typeAnnotation = parseExpression([typeModule + ".type.any"]);
-        // PATCH end
-      }
-
-      this.paramTypes_.arguments.push(
-        createIdentifierExpression(element.binding.identifierToken),
-        typeAnnotation);
-      return;
-    }
-
-    // NYI
-  }
-}
-
-// TODO(tbosch): patch exports for CommonJS to support `export * from ...`
-// see https://github.com/google/traceur-compiler/issues/1042
-function patchCommonJSModuleTransformerToSupportExportStar() {
-  var traceurVersion = System.map['traceur'];
-  var CommonJsModuleTransformer = System.get(traceurVersion+'/src/codegeneration/CommonJsModuleTransformer').CommonJsModuleTransformer;
-  var parseStatement = System.get(traceurVersion+'/src/codegeneration/PlaceholderParser.js').parseStatement;
-  var prependStatements = System.get(traceurVersion+"/src/codegeneration/PrependStatements.js").prependStatements;
-
-  var _wrapModule = CommonJsModuleTransformer.prototype.wrapModule;
-  CommonJsModuleTransformer.prototype.wrapModule = function(statements) {
-    if (this.hasStarExports()) {
-      var last = statements[statements.length - 1];
-      statements = statements.slice(0, -1);
-      var exportObject = last.expression;
-      if (exportObject.propertyNameAndValues) {
-        throw new Error('Don\'t support export * with named exports right now...');
-      }
-      statements.push(parseStatement(['module.exports = ', ';'], exportObject));
-      return statements;
-    } else {
-      return _wrapModule.apply(this, arguments);
-    }
-  }
-}
-
diff --git a/tools/transpiler/spec/a-0-subfolder/library_spec.js b/tools/transpiler/spec/a-0-subfolder/library_spec.js
deleted file mode 100644
index f0ed26b348f9..000000000000
--- a/tools/transpiler/spec/a-0-subfolder/library_spec.js
+++ /dev/null
@@ -1 +0,0 @@
-export function main() {}
diff --git a/tools/transpiler/spec/annotations_spec.js b/tools/transpiler/spec/annotations_spec.js
deleted file mode 100644
index 13e0e1d7d909..000000000000
--- a/tools/transpiler/spec/annotations_spec.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import {describe, it, expect, iit} from 'angular2/test_lib';
-import {readFirstAnnotation} from './fixtures/annotations';
-import {CONST} from 'angular2/src/facade/lang';
-
-class Inject {}
-class Bar {}
-
-class Provide {
-  token;
-
-  @CONST()
-  constructor(token) {
-    this.token = token;
-  }
-}
-
-class AnnotateMe {
-  maybe;
-
-  @CONST()
-  constructor({maybe = 'default'} = {}) {
-    this.maybe = maybe;
-  }
-}
-
-
-@Provide('Foo')
-class Foo {
-  @Inject
-  constructor() {}
-}
-
-@Provide(Foo)
-function baz() {}
-
-@AnnotateMe()
-class A {}
-
-@AnnotateMe({maybe: 'yes'})
-class B {}
-
-@AnnotateMe({maybe: {'a': 'b'}})
-class SomeClassWithMapInAnnotation {}
-
-@AnnotateMe({maybe: [23]})
-class SomeClassWithListInAnnotation {}
-
-@AnnotateMe({maybe: new Provide(0)})
-class SomeClassWithConstObject {}
-
-function annotatedParams(@Inject(Foo) f, @Inject(Bar) b) {}
-
-export function main() {
-  describe('annotations', function() {
-    it('should work', function() {
-      // Assert `Foo` class has `Provide` annotation.
-      var clazz = readFirstAnnotation(Foo);
-      expect(clazz instanceof Provide).toBe(true);
-    });
-
-    it('should work with named arguments', function() {
-      expect(readFirstAnnotation(A).maybe).toBe('default');
-      expect(readFirstAnnotation(B).maybe).toBe('yes');
-    });
-
-    it('should work with maps in named arguments', () => {
-      expect(readFirstAnnotation(SomeClassWithMapInAnnotation).maybe).toEqual({'a': 'b'});
-    });
-
-    it('should work with lists in named arguments', () => {
-      expect(readFirstAnnotation(SomeClassWithListInAnnotation).maybe).toEqual([23]);
-    });
-
-    it('should work with new instances in named arguments', () => {
-      expect(readFirstAnnotation(SomeClassWithConstObject).maybe).toEqual(new Provide(0));
-    });
-  });
-}
diff --git a/tools/transpiler/spec/arrow_functions_spec.js b/tools/transpiler/spec/arrow_functions_spec.js
deleted file mode 100644
index 60a9e28bb151..000000000000
--- a/tools/transpiler/spec/arrow_functions_spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import {describe, it, expect, iit} from 'angular2/test_lib';
-
-var inc = x => x + 1;
-
-var objLiteral = val => ({'key': val});
-
-var max = (a, b) => {
-  if (a > b) {
-    return a;
-  } else {
-    return b;
-  }
-};
-
-var namedFn = function({fn}) {
-  return fn();
-}
-
-class LexicalThis {
-  zero;
-
-  constructor() {
-    this.zero = 0;
-  }
-
-  getZero() {
-    return (() => this.zero)();
-  }
-}
-
-export function main() {
-  describe('arrow functions', function() {
-    it('should support implicit return', function() {
-      expect(inc(0)).toBe(1);
-    });
-
-    it('should support implicit return in named arguments', function() {
-      expect(namedFn({fn: () => 1})).toBe(1);
-    });
-
-    it('should support object literal', function() {
-      var o = objLiteral('val');
-      expect(o['key']).toBe('val');
-    });
-
-    it('should support complex body', function() {
-      expect(max(0, 1)).toBe(1);
-      expect(max(1, 0)).toBe(1);
-    });
-
-    it('should support complex body in named arguments', function() {
-      expect(namedFn({fn: () => {
-        return 1;
-      }})).toBe(1);
-    });
-
-    it('should support lexical this', function() {
-      var lthis = new LexicalThis();
-      expect(lthis.getZero()).toBe(0);
-    });
-
-  });
-}
diff --git a/tools/transpiler/spec/bar.js b/tools/transpiler/spec/bar.js
deleted file mode 100644
index ee9c96d3baa3..000000000000
--- a/tools/transpiler/spec/bar.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export var Bar1 = 'BAR1';
-export var Bar2 = 'BAR2';
-export function Bar3() {}
diff --git a/tools/transpiler/spec/baz.js b/tools/transpiler/spec/baz.js
deleted file mode 100644
index 280a56ac4db7..000000000000
--- a/tools/transpiler/spec/baz.js
+++ /dev/null
@@ -1 +0,0 @@
-export var Baz = 'BAZ';
diff --git a/tools/transpiler/spec/classes_spec.js b/tools/transpiler/spec/classes_spec.js
deleted file mode 100644
index d03fd3aa3ba1..000000000000
--- a/tools/transpiler/spec/classes_spec.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import {ddescribe, describe, it, expect} from 'angular2/test_lib';
-import {CONST} from './fixtures/annotations';
-
-class Foo {
-  a;
-  b;
-
-  constructor(a, b) {
-    this.a = a;
-    this.b = b;
-  }
-
-  sum() {
-    return this.a + this.b;
-  }
-}
-
-class SubFoo extends Foo {
-  c;
-
-  constructor(a, b) {
-    super(a, b);
-    this.c = 3;
-  }
-}
-
-class ConstClass {}
-
-class Const {
-  a;
-
-  @CONST
-  constructor(a:number) {
-    this.a = a;
-  }
-}
-
-class SubConst extends Const {
-  b;
-
-  @CONST
-  constructor(a:number, b:number) {
-    super(a);
-    this.b = b;
-  }
-}
-
-class HasGetters {
-  get getter():string {
-    return 'getter';
-  }
-
-  static get staticGetter():string {
-    return 'getter';
-  }
-}
-
-class WithFields {
-  name: string;
-  static id: number;
-}
-
-export function main() {
-  describe('classes', function() {
-    it('should work', function() {
-      var foo = new Foo(2, 3);
-
-      expect(foo.a).toBe(2);
-      expect(foo.b).toBe(3);
-      expect(foo.sum()).toBe(5);
-    });
-
-    it('@CONST should be transpiled to a const constructor', function() {
-      var subConst = new SubConst(1, 2);
-      expect(subConst.a).toBe(1);
-      expect(subConst.b).toBe(2);
-    });
-
-    describe('inheritance', function() {
-      it('should support super call', function () {
-        var subFoo = new SubFoo(1, 2);
-        expect(subFoo.a).toBe(1);
-        expect(subFoo.b).toBe(2);
-        expect(subFoo.c).toBe(3);
-      });
-    });
-
-    describe("getters", function () {
-      it("should call instance getters", function () {
-        var obj = new HasGetters();
-        expect(obj.getter).toEqual('getter');
-      });
-
-      it("should call static getters", function () {
-        expect(HasGetters.staticGetter).toEqual('getter');
-      });
-    });
-
-    describe('fields', function() {
-      it('should work', function() {
-        var obj = new WithFields();
-        obj.name = 'Vojta';
-        WithFields.id = 12;
-      });
-    });
-  });
-
-}
diff --git a/tools/transpiler/spec/cycle.js b/tools/transpiler/spec/cycle.js
deleted file mode 100644
index 9cc2a4842b0c..000000000000
--- a/tools/transpiler/spec/cycle.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import {foo} from './cycle_spec';
-
-export function cycle() {
-  return foo;
-}
diff --git a/tools/transpiler/spec/cycle_spec.js b/tools/transpiler/spec/cycle_spec.js
deleted file mode 100644
index 50fa4c743aae..000000000000
--- a/tools/transpiler/spec/cycle_spec.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import {describe, it, expect} from 'angular2/test_lib';
-import {cycle} from './cycle';
-
-export function main() {
-  describe('cycle', function() {
-    it('should work', function() {
-      expect(cycle()).toBe(true);
-    });
-  });
-}
-
-export var foo = true;
-
diff --git a/tools/transpiler/spec/equals_spec.js b/tools/transpiler/spec/equals_spec.js
deleted file mode 100644
index d296c495ef94..000000000000
--- a/tools/transpiler/spec/equals_spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {describe, it, expect} from 'angular2/test_lib';
-
-function same(a, b) {
-  return a === b;
-}
-
-function notSame(a, b) {
-  if ((a !== a) && (b !== b)) return true;
-  return a !== b;
-}
-
-export function main() {
-  describe('equals', function() {
-    it('should work', function() {
-      var obj = {};
-      expect(same({}, {}) == false).toBe(true);
-      expect(same(obj, obj) == true).toBe(true);
-      expect(notSame({}, {}) == true).toBe(true);
-      expect(notSame(obj, obj) == false).toBe(true);
-    });
-  });
-}
diff --git a/tools/transpiler/spec/export.js b/tools/transpiler/spec/export.js
deleted file mode 100644
index 27d3ded4d934..000000000000
--- a/tools/transpiler/spec/export.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './foo';
-export {Bar1, Bar2} from './bar';
diff --git a/tools/transpiler/spec/fixtures/annotations.dart b/tools/transpiler/spec/fixtures/annotations.dart
deleted file mode 100644
index e66506490bbf..000000000000
--- a/tools/transpiler/spec/fixtures/annotations.dart
+++ /dev/null
@@ -1,7 +0,0 @@
-import 'dart:mirrors';
-
-// TODO: this api does not yet return an array as we don't have
-// a nice array wrapper for Dart
-readFirstAnnotation(clazz) {
-  return reflectClass(clazz).metadata.first.reflectee;
-}
diff --git a/tools/transpiler/spec/fixtures/annotations.es6 b/tools/transpiler/spec/fixtures/annotations.es6
deleted file mode 100644
index 15de650d2892..000000000000
--- a/tools/transpiler/spec/fixtures/annotations.es6
+++ /dev/null
@@ -1,5 +0,0 @@
-// TODO: this api does not yet return an array as we don't have
-// a nice array wrapper for Dart
-export function readFirstAnnotation(clazz) {
-  return clazz.annotations[0];
-}
diff --git a/tools/transpiler/spec/fixtures/facade.dart b/tools/transpiler/spec/fixtures/facade.dart
deleted file mode 100644
index eea66dad1c86..000000000000
--- a/tools/transpiler/spec/fixtures/facade.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-import 'dart:collection';
-
-class MapWrapper {
-
-}
-
-/**
- * Generic iterable class to test for-of.  Provides iteration of the given list.
- */
-class IterableList extends IterableBase {
-  List values;
-  IterableList(values) {
-    this.values = values;
-  }
-  Iterator get iterator => values.iterator;
-}
diff --git a/tools/transpiler/spec/fixtures/facade.es6 b/tools/transpiler/spec/fixtures/facade.es6
deleted file mode 100644
index eb7cfca896af..000000000000
--- a/tools/transpiler/spec/fixtures/facade.es6
+++ /dev/null
@@ -1,18 +0,0 @@
-export class MapWrapper {
-
-}
-
-/**
- * Generic iterable class to test for-of.  Provides iteration of the given array.
- */
-export class IterableList {
-  constructor(values) {
-    this.values = values;
-  }
-
-  *[Symbol.iterator]() {
-    for (var value of this.values) {
-      yield value;
-    }
-  }
-}
diff --git a/tools/transpiler/spec/foo.js b/tools/transpiler/spec/foo.js
deleted file mode 100644
index 3ffe6809d645..000000000000
--- a/tools/transpiler/spec/foo.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export var Foo = 'FOO';
-export var Bar = 'BAR';
diff --git a/tools/transpiler/spec/functions_spec.js b/tools/transpiler/spec/functions_spec.js
deleted file mode 100644
index c1cd004f8a28..000000000000
--- a/tools/transpiler/spec/functions_spec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import {describe, ddescribe, it, iit, expect} from 'angular2/test_lib';
-
-function sum(a, b) {
-  return a + b;
-}
-
-class ConstructorWithNamedParams {
-  sum;
-
-  constructor(a, {b=1, c=2}) {
-    this.sum = a + b + c;
-  }
-}
-
-export function main() {
-  describe('functions', function() {
-    it('should work', function() {
-      expect(sum(1, 2)).toBe(3);
-    });
-
-    describe("named parameters", function() {
-      it('should pass named params as named params by using identifier keys', function() {
-        function f(a, {b, c}) {return a + b + c;}
-        expect(f(1, {b: 2, c: 3})).toBe(6);
-      });
-
-      it('should pass named params as a map by using quoted keys', function() {
-        function f(m) {return m["a"] + m["b"];}
-
-        expect(f({"a": 1, "b": 2})).toBe(3);
-      });
-
-      it('should compile initializers', function() {
-        function f({a=1, b=2}) {return a + b;}
-        expect(f({a:10})).toBe(12);
-      });
-
-      it("should call function with named params without passing any" +
-        "params by providing an empty object initializer", function() {
-        function f({a=1, b=2}={}) {return a + b;}
-
-        expect(f({a: 10})).toBe(12);
-        expect(f()).toBe(3);
-      });
-
-      it("should support new expressions", function () {
-        var obj = new ConstructorWithNamedParams(100, {b:10});
-        expect(obj.sum).toEqual(112);
-      });
-    });
-    
-    describe("optional params", function () {
-      it("should work", function () {
-        function optional(a=1,b=2){return a + b;}
-
-        expect(optional()).toEqual(3);
-        expect(optional(10)).toEqual(12);
-        expect(optional(10, 20)).toEqual(30);
-      });
-
-      it("should support a mix of optional and mandatory params", function () {
-        function optional(a,b=2){return a + b;}
-
-        expect(optional(1)).toEqual(3);
-        expect(optional(10)).toEqual(12);
-      });
-    });
-  });
-}
diff --git a/tools/transpiler/spec/instance_of_spec.js b/tools/transpiler/spec/instance_of_spec.js
deleted file mode 100644
index 2f76bc3d45d1..000000000000
--- a/tools/transpiler/spec/instance_of_spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import {describe, it, expect} from 'angular2/test_lib';
-
-class Foo {}
-
-export function main() {
-  describe('instanceof', function() {
-    it('should work', function() {
-      expect(new Foo() instanceof Foo);
-    });
-  });
-}
diff --git a/tools/transpiler/spec/interfaces_spec.js b/tools/transpiler/spec/interfaces_spec.js
deleted file mode 100644
index 0186bd0884a5..000000000000
--- a/tools/transpiler/spec/interfaces_spec.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import {ddescribe, describe, it, iit, expect, IS_DARTIUM} from 'angular2/test_lib';
-import {IMPLEMENTS} from './fixtures/annotations';
-
-class Interface1 {
-  one(){}
-}
-class Interface2 {
-  two(){}
-}
-
-@IMPLEMENTS(Interface1, Interface2)
-class SomeClass {
-  one(){}
-  two(){}
-}
-
-export function main() {
-  describe('interfaces', function() {
-    it('should work', function () {
-      var s = new SomeClass();
-      expect(s).toImplement(Interface1);
-      expect(s).toImplement(Interface2);
-    });
-  });
-
-}
diff --git a/tools/transpiler/spec/lang_spec.js b/tools/transpiler/spec/lang_spec.js
deleted file mode 100644
index cf66f4b47e5b..000000000000
--- a/tools/transpiler/spec/lang_spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {describe, it, expect} from 'angular2/test_lib';
-
-export function main() {
-  describe('lang', function() {
-    it('string interpolation', function() {
-      expect(`${123}-'${456}"`).toEqual('123-\'456"');
-    });
-
-    it('multiline string', function () {
-      expect(`1'
-2"`).toEqual('1\'\n2"');
-    });
-  });
-}
diff --git a/tools/transpiler/spec/reexport.js b/tools/transpiler/spec/reexport.js
deleted file mode 100644
index c7b8a12d63f0..000000000000
--- a/tools/transpiler/spec/reexport.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {Baz} from './baz';
-import {Bar1} from './bar';
-
-export {Baz} from './baz';
-
-var localVar = true;
diff --git a/tools/transpiler/spec/types_spec.js b/tools/transpiler/spec/types_spec.js
deleted file mode 100644
index 9ad29277731c..000000000000
--- a/tools/transpiler/spec/types_spec.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import {describe, xdescribe, it, expect, IS_DARTIUM} from 'angular2/test_lib';
-
-class A {}
-class B {}
-
-function sum(a: number, b: number): number {
-  return a + b;
-}
-
-function not(a: boolean): boolean {
-  return !a;
-}
-
-function generics(a: A<B>) {
-
-}
-
-function namedObjectType({a,b}:{a:A,b:B<C>}) {
-
-}
-
-class Bar {
-  constructor({
-      selector,
-      implementsTypes
-    })
-  {
-  }
-}
-
-class Foo {
-  a;
-  b;
-
-  constructor(a: number, b: number) {
-    this.a = a;
-    this.b = b;
-  }
-
-  sum(): number {
-    return this.a + this.b;
-  }
-
-  typedVariables() {
-    var foo:string = 'foo';
-  }
-}
-
-class WithFields {
-  name: string;
-  static id: number;
-  untyped;
-  static staticUntyped;
-}
-
-
-export function main() {
-  describe('types', function() {
-    it('should work', function() {
-      // TODO(vojta): test this better.
-      var f = new Foo(1, 2);
-      assert(f.sum() == 3);
-      assert(f instanceof Foo);
-
-      f.typedVariables();
-    });
-
-    xdescribe('class fields', function() {
-      it('should fail when setting wrong type value', function() {
-        var wf = new WithFields();
-
-        expect(function() {
-          wf.name = true;
-        }).toThrowError(
-          // TODO(vojta): Better error, it's not first argument, it's setting a field.
-          'Invalid arguments given!\n' +
-          '  - 1st argument has to be an instance of string, got true'
-        );
-      });
-    });
-
-    xdescribe('static class fields', function() {
-      it('should fail when setting wrong type value', function() {
-        expect(function() {
-          WithFields.id = true;
-        }).toThrowError(
-          // TODO(vojta): Better error, it's not first argument, it's setting a field.
-          'Invalid arguments given!\n' +
-          '  - 1st argument has to be an instance of number, got true'
-        );
-      });
-    });
-  });
-}
diff --git a/tools/transpiler/src/compiler.js b/tools/transpiler/src/compiler.js
deleted file mode 100644
index 7448566bbe6d..000000000000
--- a/tools/transpiler/src/compiler.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import {Compiler as TraceurCompiler} from 'traceur/src/Compiler';
-import {CollectingErrorReporter} from 'traceur/src/util/CollectingErrorReporter';
-import {Parser} from './parser';
-import {SourceFile} from 'traceur/src/syntax/SourceFile';
-import {Options} from 'traceur/src/Options';
-
-export class Compiler extends TraceurCompiler {
-
-  constructor(options, sourceRoot) {
-    super(options, sourceRoot);
-    this.moduleName_ = sourceRoot;
-  }
-
-  // Copy of the original method to use our custom Parser
-  parse(content, sourceName) {
-    if (!content) {
-      throw new Error('Compiler: no content to compile.');
-    } else if (!sourceName) {
-      throw new Error('Compiler: no source name for content.');
-    }
-
-    this.sourceMapGenerator_ = null;
-    var traceurOptions = new Options();
-    // Here we mutate the global/module options object to be used in parsing.
-    traceurOptions.setFromObject(this.options_);
-
-    var errorReporter = new CollectingErrorReporter();
-    sourceName = this.sourceName(sourceName);
-    var sourceFile = new SourceFile(sourceName, content);
-    var parser = new Parser(sourceFile, errorReporter, this.options_);
-    var tree =
-        this.options_.script ? parser.parseScript() : parser.parseModule();
-    this.throwIfErrors(errorReporter);
-    return tree;
-  }
-}
diff --git a/tools/transpiler/src/parser.js b/tools/transpiler/src/parser.js
deleted file mode 100644
index 02c598adb2ce..000000000000
--- a/tools/transpiler/src/parser.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {Parser as TraceurParser} from 'traceur/src/syntax/Parser';
-import {SyntaxErrorReporter} from 'traceur/src/util/SyntaxErrorReporter';
-import {TypeName, ImportSpecifier, ImportedBinding, BindingIdentifier} from 'traceur/src/syntax/trees/ParseTrees';
-import {PERIOD, IMPORT, STAR, AS, FROM, CLOSE_ANGLE, OPEN_ANGLE, COMMA, OPEN_CURLY, CLOSE_CURLY, COLON} from 'traceur/src/syntax/TokenType';
-
-export class Parser extends TraceurParser {
-  constructor(file, errorReporter = new SyntaxErrorReporter(), options) {
-    super(file, errorReporter, options);
-  }
-
-  // TODO: add support for object type literals to traceur!
-  parseObjectType_() {
-   this.eat_(OPEN_CURLY);
-   do {
-     var identifier = this.eatId_();
-     this.eat_(COLON);
-     var type = this.parseNamedOrPredefinedType_();
-     var typeParameters = this.parseTypeParametersOpt_();
-     // TODO(misko): save the type information
-   } while (this.eatIf_(COMMA));
-   this.eat_(CLOSE_CURLY);
- }
-}
diff --git a/tools/transpiler/src/patch/TypeToExpressionTransformer.js b/tools/transpiler/src/patch/TypeToExpressionTransformer.js
deleted file mode 100644
index d26f503022a9..000000000000
--- a/tools/transpiler/src/patch/TypeToExpressionTransformer.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// Based on https://github.com/google/traceur-compiler/blob/master/src/codegeneration/TypeToExpressionTransformer.js
-// Copyright 2012 Traceur Authors.
-// Licensed under the Apache License, Version 2.0 (the 'License');
-//
-// Modifications:
-// - use `assert` import, instead of `$traceurRuntime....` so
-//   that a transpilation to ES6 does not contain any traceur references.
-import {ParseTreeTransformer} from 'traceur/src/codegeneration/ParseTreeTransformer.js';
-import {
-  ArgumentList,
-  IdentifierExpression,
-  MemberExpression
-} from 'traceur/src/syntax/trees/ParseTrees.js';
-import {
-  parseExpression
-} from 'traceur/src/codegeneration/PlaceholderParser.js';
-
-export class TypeToExpressionTransformer extends ParseTreeTransformer {
-  // Not used. Just required to call super() by traceur.
-  constructor(idGenerator, reporter, options) {
-    super(idGenerator, reporter);
-  }
-
-  typeModule() {
-    return parseExpression([this.getOptions().outputLanguage === 'es6' ? 'assert' : '$traceurRuntime']);
-  }
-
-  transformTypeName(tree) {
-    if (tree.moduleName) {
-      var operand = this.transformAny(tree.moduleName);
-      return new MemberExpression(tree.location, operand, tree.name);
-    }
-    return new IdentifierExpression(tree.location, tree.name);
-  }
-
-  transformPredefinedType(tree) {
-    return parseExpression `${this.typeModule()}.type.${tree.typeToken})`;
-  }
-
-  transformTypeReference(tree) {
-    var typeName = this.transformAny(tree.typeName);
-    var args = this.transformAny(tree.args);
-    var argumentList = new ArgumentList(tree.location, [typeName, ...args]);
-    return parseExpression `${this.typeModule()}.genericType(${argumentList})`;
-  }
-
-  transformTypeArguments(tree) {
-    return this.transformList(tree.args);
-  }
-
-}
diff --git a/tools/transpiler/unittest/transpilertests.js b/tools/transpiler/unittest/transpilertests.js
deleted file mode 100644
index e7fff5dca677..000000000000
--- a/tools/transpiler/unittest/transpilertests.js
+++ /dev/null
@@ -1,135 +0,0 @@
-var compiler = require('../index');
-var temp = require('temp');
-var fs = require('fs');
-
-temp.track();
-
-var DEFAULT_OPTIONS = {
-  sourceMaps: false,
-  annotations: true, // parse annotations
-  types: true, // parse types
-  script: false, // parse as a module
-  memberVariables: true // parse class fields
-};
-
-describe('transpile to es6', function() {
-  var options;
-
-  beforeEach(function() {
-    options = merge(DEFAULT_OPTIONS, {outputLanguage: 'es6', typeAssertions: 'true'});
-  });
-
-  it('should preserve generic type information', function() {
-    var result = compiler.compile(options, "test.js",
-      "function f(a:List<string>){}");
-    expect(result.js).toBe('function f(a) {\n'+
-      '  assert.argumentTypes(a, assert.genericType(List, assert.type.string));\n'+
-      '}\n'+
-      'Object.defineProperty(f, "parameters", {get: function() {\n'+
-      '    return [[assert.genericType(List, assert.type.string)]];\n'+
-      '  }});\n');
-  });
-
-
-  it('should allow super() calls when transpiling to ES6 with source maps', function() {
-    options = merge(options, {sourceMaps: true});
-    var result = compiler.compile(options, "test.js",
-      "class Base {}\n" +
-      "class Test extends Base {" +
-      "  constructor() { super(); }" +
-      "}");
-    expect(result.js).toBe("class Base {}\n" +
-      "class Test extends Base {\n" +
-      "  constructor() {\n"+
-      "    super();\n"+
-      "  }\n"+
-      "}\n"+
-      "//# sourceMappingURL=test.js.map\n");
-  });
-
-  it('should convert types to expressions', function() {
-    var result = compiler.compile(options, "test.js",
-      "function f(a:string) {}");
-    expect(result.js).toBe('function f(a) {\n'+
-      '  assert.argumentTypes(a, assert.type.string);\n'+
-      '}\n' +
-      'Object.defineProperty(f, "parameters", {get: function() {\n' +
-      '    return [[assert.type.string]];\n' +
-      '  }});\n');
-  });
-
-  it('should not convert type properties to getter/setters', function() {
-    var result = compiler.compile(options, "test.js",
-      "class Test {" +
-      "  constructor() { this.a = 1; }" +
-      "}");
-    expect(result.js).toBe("class Test {\n" +
-      "  constructor() {\n"+
-      "    this.a = 1;\n"+
-      "  }\n"+
-      "}\n");
-  });
-
-  it('should remove class field declarations', function() {
-    var result = compiler.compile(options, "test.js",
-      "class Test {" +
-      "  a:number = 1;" +
-      "}");
-    expect(result.js).toBe("class Test {}\n");
-  });
-
-  it('should convert types to expressions on "assert" module', function() {
-    var result = compiler.compile(options, "test.js",
-      "function f(a:string, b) { return a+b; }");
-    expect(result.js).toBe('function f(a, b) {\n'+
-      '  assert.argumentTypes(a, assert.type.string, b, assert.type.any);\n'+
-      '  return a + b;\n'+
-      '}\n'+
-      'Object.defineProperty(f, "parameters", {get: function() {\n'+
-      '    return [[assert.type.string], []];\n'+
-      '  }});\n');
-  });
-
-});
-
-describe('transpile to cjs', function() {
-  var options;
-
-  beforeEach(function() {
-    options = merge(DEFAULT_OPTIONS, {modules: 'commonjs'});
-  });
-
-  function compileAndWrite(input) {
-    var transpiledCode = compiler.compile(options, "test.js", input).js;
-    var tempPath = temp.path({prefix: "ng2transpiler", suffix: ''});
-    var fd = fs.openSync(tempPath, 'w+');
-    fs.writeSync(fd, transpiledCode);
-    fs.closeSync(fd);
-    return tempPath.replace(/\\/g, '/');
-  }
-
-  it('should transpile export *', function() {
-    var file1 = compileAndWrite('export var a = 1');
-    var file2 = compileAndWrite('export * from "' + file1 + '"');
-    expect(require(file2).a).toBe(1);
-  });
-
-  it('should transpile export {name}', function() {
-    var file1 = compileAndWrite('export var a = 1');
-    var file2 = compileAndWrite('export {a} from "' + file1 + '"');
-    expect(require(file2).a).toBe(1);
-  });
-
-});
-
-
-function merge(a, b) {
-  var result = {};
-  for (var prop in a) {
-    result[prop] = a[prop];
-  }
-  for (var prop in b) {
-    result[prop] = b[prop];
-  }
-  return result;
-}
diff --git a/tools/travis/travis-fold.js b/tools/travis/travis-fold.js
new file mode 100644
index 000000000000..4a89309c620f
--- /dev/null
+++ b/tools/travis/travis-fold.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
+ */
+
+// tslint:disable:no-console
+module.exports = function travisFoldStart(name) {
+  if (process.env.TRAVIS) console.log('travis_fold:start:' + encode(name));
+
+  return function travisFoldEnd() {
+    if (process.env.TRAVIS) console.log('travis_fold:end:' + encode(name));
+  };
+};
+
+
+function encode(name) {
+  return name.replace(/\W/g, '-').replace(/-$/, '');
+}
diff --git a/tools/tree-shaking-test/README.md b/tools/tree-shaking-test/README.md
new file mode 100644
index 000000000000..99b4da8e2692
--- /dev/null
+++ b/tools/tree-shaking-test/README.md
@@ -0,0 +1,17 @@
+Rollup tree-shaking test
+------------------------
+
+The purpose of this test is to verify how much stuff can be tree-shaken from our packages.
+
+The test generates an empty js file that imports everything from a particular package but doesn't
+use any of the imported references.
+
+In the ideal scenario Rollup should detect that none of the references are being used and should
+create an empty bundle file.
+
+In reality there is a lot of stuff preserved in the bundle because Rollup is currently not able to
+make a safe decision to remove many of the unused symbols.
+
+To run execute: `./tools/tree-shaking-test/test.sh`
+
+then inspect `dist/tree-shaking/test/**/*.bundle.js`
diff --git a/tools/tree-shaking-test/rollup.config.js b/tools/tree-shaking-test/rollup.config.js
new file mode 100644
index 000000000000..7bef7c2cc9ec
--- /dev/null
+++ b/tools/tree-shaking-test/rollup.config.js
@@ -0,0 +1,28 @@
+/**
+ * @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
+ */
+
+class RollupNG2 {
+  resolveId(id, from) {
+    if (id.startsWith('@angular/')) {
+      const packageName = id.split('/')[1];
+      return `${__dirname}/../../packages-dist/${packageName}/@angular/packageName.es5.js`;
+    }
+
+    // if(id.startsWith('rxjs/')){
+    //   return `${__dirname}/../../../node_modules/rxjs-es/${id.replace('rxjs/', '')}.js`;
+    // }
+  }
+}
+
+export default {
+  entry: 'test.js',
+  format: 'es6',
+  plugins: [
+    new RollupNG2(),
+  ]
+};
diff --git a/tools/tree-shaking-test/test.sh b/tools/tree-shaking-test/test.sh
new file mode 100755
index 000000000000..a0792090e03d
--- /dev/null
+++ b/tools/tree-shaking-test/test.sh
@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+
+set -ex -o pipefail
+
+cd `dirname $0`
+cd ../..
+
+export NODE_PATH=${NODE_PATH}:$(pwd)/dist-packages/
+
+DEST_DIR=./dist/trees-shaking-test
+
+rm -rf ${DEST_DIR}
+
+for PACKAGE in \
+  core \
+  compiler \
+  common \
+  platform-browser \
+  platform-server \
+  http \
+  router \
+  upgrade
+do
+  echo "=======    Tree-shaking TEST: ${SRCDIR} ====="
+  TEST_DIR=${DEST_DIR}/${PACKAGE}
+  TEST_ENTRY_POINT=${TEST_DIR}/test.js
+  mkdir -p ${TEST_DIR}
+  cp ./tools/tree-shaking-test/rollup.config.js ${TEST_DIR}/
+  echo "import * as x from '@angular/${PACKAGE}'" > ${TEST_ENTRY_POINT}
+  (
+    cd ${TEST_DIR}
+    $(npm bin)/rollup --config rollup.config.js --output ${PACKAGE}.bundle.js
+  )
+
+done
diff --git a/tools/ts-api-guardian/BUILD.bazel b/tools/ts-api-guardian/BUILD.bazel
new file mode 100644
index 000000000000..689670f9f828
--- /dev/null
+++ b/tools/ts-api-guardian/BUILD.bazel
@@ -0,0 +1,64 @@
+load(
+    "@build_bazel_rules_nodejs//:defs.bzl",
+    "jasmine_node_test",
+    "node_modules_filegroup",
+    "nodejs_binary",
+    "npm_package",
+)
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+exports_files(["bin/ts-api-guardian"])
+
+ts_library(
+    name = "lib",
+    srcs = glob(["lib/*.ts"]),
+    module_name = "ts-api-guardian",
+    tsconfig = "//tools:tsconfig.json",
+    visibility = ["//visibility:public"],
+)
+
+# Copy Angular's license to govern ts-api-guardian as well.
+# We use a genrule to put it in this package, so it will be in the right root directory.
+genrule(
+    name = "license",
+    srcs = ["//:LICENSE"],
+    outs = ["LICENSE"],
+    cmd = "cp $< $@",
+)
+
+npm_package(
+    name = "ts-api-guardian",
+    srcs = [
+        "README.md",
+        "bin/ts-api-guardian",
+        "package.json",
+    ],
+    deps = [
+        ":lib",
+        ":license",
+    ],
+)
+
+#######################################3
+# Tests for this package
+
+ts_library(
+    name = "test_lib",
+    testonly = True,
+    srcs = glob(["test/*.ts"]),
+    tsconfig = "//tools:tsconfig.json",
+    deps = [":lib"],
+)
+
+jasmine_node_test(
+    name = "tests",
+    srcs = [":test_lib"],
+    bootstrap = ["angular/tools/ts-api-guardian/test/bootstrap.js"],
+    data = glob([
+        "test/fixtures/*.ts",
+        "test/fixtures/*.patch",
+    ]) + [
+        ":ts-api-guardian",
+    ],
+    node_modules = "@ts-api-guardian_runtime_deps//:node_modules",
+)
diff --git a/tools/ts-api-guardian/README.md b/tools/ts-api-guardian/README.md
new file mode 100644
index 000000000000..0f21e6e0f996
--- /dev/null
+++ b/tools/ts-api-guardian/README.md
@@ -0,0 +1,36 @@
+# Typescript API Guardian
+
+Keeps track of public API surface of a typescript library.
+
+Examples:
+
+```sh
+# Generate one declaration file
+ts-api-guardian --out api_guard.d.ts index.d.ts
+# Generate multiple declaration files
+# (output location like typescript)
+ts-api-guardian --outDir api_guard [--rootDir .] core/index.d.ts core/testing.d.ts
+# Print usage
+ts-api-guardian --help
+# Check against one declaration file
+ts-api-guardian --verify api_guard.d.ts index.d.ts
+# Check against multiple declaration files
+ts-api-guardian --verifyDir api_guard [--rootDir .] core/index.d.ts core/testing.d.ts
+```
+
+# For developers
+
+Build and test this library:
+
+```sh
+$ bazel run //:install
+$ bazel test //tools/ts-api-guardian:all
+```
+
+Publish to NPM:
+
+```sh
+$ npm whoami # should be logged in as angular
+$ grep version tools/ts-api-guardian/package.json # advance as needed
+$ bazel run //tools/ts-api-guardian:ts-api-guardian.publish
+```
diff --git a/tools/ts-api-guardian/bin/ts-api-guardian b/tools/ts-api-guardian/bin/ts-api-guardian
new file mode 100755
index 000000000000..b0cfde463b7c
--- /dev/null
+++ b/tools/ts-api-guardian/bin/ts-api-guardian
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../lib/cli').startCli();
diff --git a/tools/ts-api-guardian/index.bzl b/tools/ts-api-guardian/index.bzl
new file mode 100644
index 000000000000..e982c0550c27
--- /dev/null
+++ b/tools/ts-api-guardian/index.bzl
@@ -0,0 +1,58 @@
+# Copyright 2017 The Bazel Authors. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+"""Runs ts_api_guardian
+"""
+
+load("@build_bazel_rules_nodejs//internal/node:node.bzl", "nodejs_binary", "nodejs_test")
+
+COMMON_MODULE_IDENTIFIERS = ["angular", "jasmine", "protractor"]
+
+def ts_api_guardian_test(name, golden, actual, data = [], **kwargs):
+    """Runs ts_api_guardian
+    """
+    data += [
+        "//tools/ts-api-guardian:lib",
+        "//tools/ts-api-guardian:bin/ts-api-guardian",
+        "@bazel_tools//tools/bash/runfiles",
+    ]
+
+    args = [
+        # Needed so that node doesn't walk back to the source directory.
+        # From there, the relative imports would point to .ts files.
+        "--node_options=--preserve-symlinks",
+        "--stripExportPattern",
+        "^\(__\|ɵ\)",
+    ]
+    for i in COMMON_MODULE_IDENTIFIERS:
+        args += ["--allowModuleIdentifiers", i]
+
+    nodejs_test(
+        name = name,
+        data = data,
+        node_modules = "@ts-api-guardian_runtime_deps//:node_modules",
+        entry_point = "angular/tools/ts-api-guardian/bin/ts-api-guardian",
+        templated_args = args + ["--verify", golden, actual],
+        testonly = 1,
+        **kwargs
+    )
+
+    nodejs_binary(
+        name = name + ".accept",
+        data = data,
+        node_modules = "@ts-api-guardian_runtime_deps//:node_modules",
+        entry_point = "angular/tools/ts-api-guardian/bin/ts-api-guardian",
+        templated_args = args + ["--out", golden, actual],
+        **kwargs
+    )
diff --git a/tools/ts-api-guardian/lib/cli.ts b/tools/ts-api-guardian/lib/cli.ts
new file mode 100644
index 000000000000..6bed27067800
--- /dev/null
+++ b/tools/ts-api-guardian/lib/cli.ts
@@ -0,0 +1,178 @@
+/**
+ * @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
+ */
+
+// tslint:disable:no-console
+
+// TODO(alexeagle): why not import chalk from 'chalk'?
+// Something to do with TS default export in UMD emit...
+const chalk = require('chalk');
+import * as minimist from 'minimist';
+import * as path from 'path';
+
+import {SerializationOptions, generateGoldenFile, verifyAgainstGoldenFile} from './main';
+
+const CMD = 'ts-api-guardian';
+
+export function startCli() {
+  const {argv, mode, errors} = parseArguments(process.argv.slice(2));
+
+  const options: SerializationOptions = {
+    stripExportPattern: argv['stripExportPattern'],
+    allowModuleIdentifiers: [].concat(argv['allowModuleIdentifiers']),
+  };
+
+  for (const error of errors) {
+    console.warn(error);
+  }
+
+  if (mode === 'help') {
+    printUsageAndExit(!!errors.length);
+  } else {
+    const targets = generateFileNamePairs(argv, mode);
+
+    if (mode === 'out') {
+      for (const {entrypoint, goldenFile} of targets) {
+        generateGoldenFile(entrypoint, goldenFile, options);
+      }
+    } else {  // mode === 'verify'
+      let hasDiff = false;
+
+      for (const {entrypoint, goldenFile} of targets) {
+        const diff = verifyAgainstGoldenFile(entrypoint, goldenFile, options);
+        if (diff) {
+          hasDiff = true;
+          const lines = diff.split('\n');
+          if (lines.length) {
+            lines.pop();  // Remove trailing newline
+          }
+          for (const line of lines) {
+            const chalkMap: {[key: string]:
+                                 any} = {'-': chalk.red, '+': chalk.green, '@': chalk.cyan};
+            const chalkFunc = chalkMap[line[0]] || chalk.reset;
+            console.log(chalkFunc(line));
+          }
+        }
+      }
+
+      if (hasDiff) {
+        // Under bazel, give instructions how to use bazel run to accept the golden file.
+        if (!!process.env['BAZEL_TARGET']) {
+          console.error('\n\nAccept the new golden file:');
+          console.error(`  bazel run ${process.env['BAZEL_TARGET']}.accept`);
+        }
+        process.exit(1);
+      }
+    }
+  }
+}
+
+export function parseArguments(input: string[]):
+    {argv: minimist.ParsedArgs, mode: string, errors: string[]} {
+  let help = false;
+  const errors: string[] = [];
+
+  const argv = minimist(input, {
+    string: [
+      'out', 'outDir', 'verify', 'verifyDir', 'rootDir', 'stripExportPattern',
+      'allowModuleIdentifiers'
+    ],
+    boolean: [
+      'help',
+      // Options used by chalk automagically
+      'color', 'no-color'
+    ],
+    alias: {'outFile': 'out', 'verifyFile': 'verify'},
+    unknown: (option: string) => {
+      if (option[0] === '-') {
+        errors.push(`Unknown option: ${option}`);
+        help = true;
+        return false;  // do not add to argv._
+      } else {
+        return true;  // add to argv._
+      }
+    }
+  });
+
+  help = help || argv['help'];
+
+  if (help) {
+    return {argv, mode: 'help', errors};
+  }
+
+  let modes: string[] = [];
+
+  if (argv['out']) {
+    modes.push('out');
+  }
+  if (argv['outDir']) {
+    modes.push('out');
+  }
+  if (argv['verify']) {
+    modes.push('verify');
+  }
+  if (argv['verifyDir']) {
+    modes.push('verify');
+  }
+
+  if (!argv._.length) {
+    errors.push('No input file specified.');
+    modes = ['help'];
+  } else if (modes.length !== 1) {
+    errors.push('Specify either --out[Dir] or --verify[Dir]');
+    modes = ['help'];
+  } else if (argv._.length > 1 && !argv['outDir'] && !argv['verifyDir']) {
+    errors.push(`More than one input specified. Use --${modes[0]}Dir instead.`);
+    modes = ['help'];
+  }
+
+  return {argv, mode: modes[0], errors};
+}
+
+function printUsageAndExit(error = false) {
+  const print = error ? console.warn.bind(console) : console.log.bind(console);
+  print(`Usage:  ${CMD} [options] <file ...>
+        ${CMD} --out <output file> <entrypoint .d.ts file>
+        ${CMD} --outDir <output dir> [--rootDir .] <entrypoint .d.ts files>
+
+        ${CMD} --verify <golden file> <entrypoint .d.ts file>
+        ${CMD} --verifyDir <golden file dir> [--rootDir .] <entrypoint .d.ts files>
+
+Options:
+        --help                          Show this usage message
+
+        --out <file>                    Write golden output to file
+        --outDir <dir>                  Write golden file structure to directory
+
+        --verify <file>                 Read golden input from file
+        --verifyDir <dir>               Read golden file structure from directory
+
+        --rootDir <dir>                 Specify the root directory of input files
+
+        --stripExportPattern <regexp>   Do not output exports matching the pattern
+        --allowModuleIdentifiers <identifier>
+                                        Whitelist identifier for "* as foo" imports`);
+  process.exit(error ? 1 : 0);
+}
+
+export function generateFileNamePairs(
+    argv: minimist.ParsedArgs, mode: string): {entrypoint: string, goldenFile: string}[] {
+  if (argv[mode]) {
+    return [{entrypoint: argv._[0], goldenFile: argv[mode]}];
+
+  } else {  // argv[mode + 'Dir']
+    let rootDir = argv['rootDir'] || '.';
+    const goldenDir = argv[mode + 'Dir'];
+
+    return argv._.map((fileName: string) => {
+      return {
+        entrypoint: fileName,
+        goldenFile: path.join(goldenDir, path.relative(rootDir, fileName))
+      };
+    });
+  }
+}
diff --git a/tools/ts-api-guardian/lib/main.ts b/tools/ts-api-guardian/lib/main.ts
new file mode 100644
index 000000000000..ecba2ca1905f
--- /dev/null
+++ b/tools/ts-api-guardian/lib/main.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
+ */
+
+import {createPatch} from 'diff';
+import * as fs from 'fs';
+import * as path from 'path';
+import {SerializationOptions, publicApi} from './serializer';
+
+export {SerializationOptions, publicApi} from './serializer';
+
+export function generateGoldenFile(
+    entrypoint: string, outFile: string, options: SerializationOptions = {}): void {
+  const output = publicApi(entrypoint, options);
+  ensureDirectory(path.dirname(outFile));
+  fs.writeFileSync(outFile, output);
+}
+
+export function verifyAgainstGoldenFile(
+    entrypoint: string, goldenFile: string, options: SerializationOptions = {}): string {
+  const actual = publicApi(entrypoint, options);
+  const expected = fs.readFileSync(goldenFile).toString();
+
+  if (actual === expected) {
+    return '';
+  } else {
+    const patch = createPatch(goldenFile, expected, actual, 'Golden file', 'Generated API');
+
+    // Remove the header of the patch
+    const start = patch.indexOf('\n', patch.indexOf('\n') + 1) + 1;
+
+    return patch.substring(start);
+  }
+}
+
+function ensureDirectory(dir: string) {
+  if (!fs.existsSync(dir)) {
+    ensureDirectory(path.dirname(dir));
+    fs.mkdirSync(dir);
+  }
+}
diff --git a/tools/ts-api-guardian/lib/serializer.ts b/tools/ts-api-guardian/lib/serializer.ts
new file mode 100644
index 000000000000..3deba37bc44a
--- /dev/null
+++ b/tools/ts-api-guardian/lib/serializer.ts
@@ -0,0 +1,347 @@
+/**
+ * @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 path from 'path';
+import * as ts from 'typescript';
+
+const baseTsOptions: ts.CompilerOptions = {
+  // We don't want symbols from external modules to be resolved, so we use the
+  // classic algorithm.
+  moduleResolution: ts.ModuleResolutionKind.Classic
+};
+
+export interface SerializationOptions {
+  /**
+   * Removes all exports matching the regular expression.
+   */
+  stripExportPattern?: RegExp;
+  /**
+   * Whitelists these identifiers as modules in the output. For example,
+   * ```
+   * import * as angular from './angularjs';
+   *
+   * export class Foo extends angular.Bar {}
+   * ```
+   * will produce `export class Foo extends angular.Bar {}` and requires
+   * whitelisting angular.
+   */
+  allowModuleIdentifiers?: string[];
+}
+
+export type DiagnosticSeverity = 'warn' | 'error' | 'none';
+
+export function publicApi(fileName: string, options: SerializationOptions = {}): string {
+  return publicApiInternal(ts.createCompilerHost(baseTsOptions), fileName, baseTsOptions, options);
+}
+
+export function publicApiInternal(
+    host: ts.CompilerHost, fileName: string, tsOptions: ts.CompilerOptions,
+    options: SerializationOptions = {}): string {
+  // Since the entry point will be compared with the source files from the TypeScript program,
+  // the path needs to be normalized with forward slashes in order to work within Windows.
+  const entrypoint = path.normalize(fileName).replace(/\\/g, '/');
+
+  if (!entrypoint.match(/\.d\.ts$/)) {
+    throw new Error(`Source file "${fileName}" is not a declaration file`);
+  }
+
+  const program = ts.createProgram([entrypoint], tsOptions, host);
+  return new ResolvedDeclarationEmitter(program, entrypoint, options).emit();
+}
+
+interface Diagnostic {
+  type?: DiagnosticSeverity;
+  message: string;
+}
+
+class ResolvedDeclarationEmitter {
+  private program: ts.Program;
+  private fileName: string;
+  private typeChecker: ts.TypeChecker;
+  private options: SerializationOptions;
+  private diagnostics: Diagnostic[];
+
+  constructor(program: ts.Program, fileName: string, options: SerializationOptions) {
+    this.program = program;
+    this.fileName = fileName;
+    this.options = options;
+    this.diagnostics = [];
+
+    this.typeChecker = this.program.getTypeChecker();
+  }
+
+  emit(): string {
+    const sourceFile = this.program.getSourceFiles().find(sf => sf.fileName === this.fileName);
+    if (!sourceFile) {
+      throw new Error(`Source file "${this.fileName}" not found`);
+    }
+
+    let output = '';
+
+    const resolvedSymbols = this.getResolvedSymbols(sourceFile);
+    // Sort all symbols so that the output is more deterministic
+    resolvedSymbols.sort(symbolCompareFunction);
+
+    for (const symbol of resolvedSymbols) {
+      if (this.options.stripExportPattern && symbol.name.match(this.options.stripExportPattern)) {
+        continue;
+      }
+
+      let decl: ts.Node|undefined =
+          symbol.valueDeclaration || symbol.declarations && symbol.declarations[0];
+      if (!decl) {
+        this.diagnostics.push({
+          type: 'warn',
+          message: `${sourceFile.fileName}: error: No declaration found for symbol "${symbol.name}"`
+        });
+        continue;
+      }
+
+      // The declaration node may not be a complete statement, e.g. for var/const
+      // symbols. We need to find the complete export statement by traversing
+      // upwards.
+      while (!hasModifier(decl, ts.SyntaxKind.ExportKeyword) && decl.parent) {
+        decl = decl.parent;
+      }
+
+      if (hasModifier(decl, ts.SyntaxKind.ExportKeyword)) {
+        // Make an empty line between two exports
+        if (output) {
+          output += '\n';
+        }
+
+        // Print stability annotation
+        const sourceText = decl.getSourceFile().text;
+        const trivia = sourceText.substr(decl.pos, decl.getLeadingTriviaWidth());
+        const match = stabilityAnnotationPattern.exec(trivia);
+        if (match) {
+          output += `/** @${match[1]} */\n`;
+        }
+
+        output += stripEmptyLines(this.emitNode(decl)) + '\n';
+      } else {
+        // This may happen for symbols re-exported from external modules.
+        this.diagnostics.push({
+          type: 'warn',
+          message:
+              createErrorMessage(decl, `No export declaration found for symbol "${symbol.name}"`)
+        });
+      }
+    }
+
+    if (this.diagnostics.length) {
+      const message = this.diagnostics.map(d => d.message).join('\n');
+      console.warn(message);
+      if (this.diagnostics.some(d => d.type === 'error')) {
+        throw new Error(message);
+      }
+    }
+
+    return output;
+  }
+
+  private getResolvedSymbols(sourceFile: ts.SourceFile): ts.Symbol[] {
+    const ms = (<any>sourceFile).symbol;
+    const rawSymbols = ms ? (this.typeChecker.getExportsOfModule(ms) || []) : [];
+    return rawSymbols.map(s => {
+      if (s.flags & ts.SymbolFlags.Alias) {
+        const resolvedSymbol = this.typeChecker.getAliasedSymbol(s);
+
+        // This will happen, e.g. for symbols re-exported from external modules.
+        if (!resolvedSymbol.valueDeclaration && !resolvedSymbol.declarations) {
+          return s;
+        }
+        if (resolvedSymbol.name !== s.name) {
+          if (this.options.stripExportPattern && s.name.match(this.options.stripExportPattern)) {
+            return s;
+          }
+          throw new Error(
+              `Symbol "${resolvedSymbol.name}" was aliased as "${s.name}". ` +
+              `Aliases are not supported."`);
+        }
+
+        return resolvedSymbol;
+      } else {
+        return s;
+      }
+    });
+  }
+
+  emitNode(node: ts.Node) {
+    if (hasModifier(node, ts.SyntaxKind.PrivateKeyword)) {
+      return '';
+    }
+
+    const firstQualifier: ts.Identifier|null = getFirstQualifier(node);
+
+    if (firstQualifier) {
+      let isAllowed = false;
+
+      // Try to resolve the qualifier.
+      const resolvedSymbol = this.typeChecker.getSymbolAtLocation(firstQualifier);
+      if (resolvedSymbol && resolvedSymbol.declarations && resolvedSymbol.declarations.length > 0) {
+        // If the qualifier can be resolved, and it's not a namespaced import, then it should be
+        // allowed.
+        isAllowed =
+            resolvedSymbol.declarations.every(decl => decl.kind !== ts.SyntaxKind.NamespaceImport);
+      }
+
+      // If it is not allowed otherwise, it's allowed if it's on the list of allowed identifiers.
+      isAllowed = isAllowed ||
+          !(!this.options.allowModuleIdentifiers ||
+            this.options.allowModuleIdentifiers.indexOf(firstQualifier.text) < 0);
+      if (!isAllowed) {
+        this.diagnostics.push({
+          type: 'error',
+          message: createErrorMessage(
+              firstQualifier,
+              `Module identifier "${firstQualifier.text}" is not allowed. Remove it ` +
+                  `from source or whitelist it via --allowModuleIdentifiers.`)
+        });
+      }
+    }
+
+    let children: ts.Node[] = [];
+    if (ts.isFunctionDeclaration(node)) {
+      // Used ts.isFunctionDeclaration instead of node.kind because this is a type guard
+      const symbol = this.typeChecker.getSymbolAtLocation(node.name);
+      symbol.declarations.forEach(x => children = children.concat(x.getChildren()));
+    } else {
+      children = node.getChildren();
+    }
+
+    const sourceText = node.getSourceFile().text;
+    if (children.length) {
+      // Sort declarations under a class or an interface
+      if (node.kind === ts.SyntaxKind.SyntaxList) {
+        switch (node.parent && node.parent.kind) {
+          case ts.SyntaxKind.ClassDeclaration:
+          case ts.SyntaxKind.InterfaceDeclaration: {
+            // There can be multiple SyntaxLists under a class or an interface,
+            // since SyntaxList is just an arbitrary data structure generated
+            // by Node#getChildren(). We need to check that we are sorting the
+            // right list.
+            if (children.every(node => node.kind in memberDeclarationOrder)) {
+              children = children.slice();
+              children.sort((a: ts.NamedDeclaration, b: ts.NamedDeclaration) => {
+                // Static after normal
+                return compareFunction(
+                           hasModifier(a, ts.SyntaxKind.StaticKeyword),
+                           hasModifier(b, ts.SyntaxKind.StaticKeyword)) ||
+                    // Our predefined order
+                    compareFunction(
+                           memberDeclarationOrder[a.kind], memberDeclarationOrder[b.kind]) ||
+                    // Alphebetical order
+                    // We need safe dereferencing due to edge cases, e.g. having two call signatures
+                    compareFunction((a.name || a).getText(), (b.name || b).getText());
+              });
+            }
+            break;
+          }
+        }
+      }
+
+      let output: string = children.filter(x => x.kind !== ts.SyntaxKind.JSDocComment)
+                               .map(n => this.emitNode(n))
+                               .join('');
+
+      // Print stability annotation for fields
+      if (ts.isParameter(node) || node.kind in memberDeclarationOrder) {
+        const trivia = sourceText.substr(node.pos, node.getLeadingTriviaWidth());
+        const match = stabilityAnnotationPattern.exec(trivia);
+        if (match) {
+          // Add the annotation after the leading whitespace
+          output = output.replace(/^(\n\s*)/, `$1/** @${match[1]} */ `);
+        }
+      }
+
+      return output;
+    } else {
+      const ranges = ts.getLeadingCommentRanges(sourceText, node.pos);
+      let tail = node.pos;
+      for (const range of ranges || []) {
+        if (range.end > tail) {
+          tail = range.end;
+        }
+      }
+      return sourceText.substring(tail, node.end);
+    }
+  }
+}
+
+function symbolCompareFunction(a: ts.Symbol, b: ts.Symbol) {
+  return a.name.localeCompare(b.name);
+}
+
+function compareFunction<T>(a: T, b: T) {
+  return a === b ? 0 : a > b ? 1 : -1;
+}
+
+const memberDeclarationOrder: {[key: number]: number} = {
+  [ts.SyntaxKind.PropertySignature]: 0,
+  [ts.SyntaxKind.PropertyDeclaration]: 0,
+  [ts.SyntaxKind.GetAccessor]: 0,
+  [ts.SyntaxKind.SetAccessor]: 0,
+  [ts.SyntaxKind.CallSignature]: 1,
+  [ts.SyntaxKind.Constructor]: 2,
+  [ts.SyntaxKind.ConstructSignature]: 2,
+  [ts.SyntaxKind.IndexSignature]: 3,
+  [ts.SyntaxKind.MethodSignature]: 4,
+  [ts.SyntaxKind.MethodDeclaration]: 4
+};
+
+const stabilityAnnotationPattern = /@(experimental|stable|deprecated)\b/;
+
+function stripEmptyLines(text: string): string {
+  return text.split('\n').filter(x => !!x.length).join('\n');
+}
+
+/**
+ * Returns the first qualifier if the input node is a dotted expression.
+ */
+function getFirstQualifier(node: ts.Node): ts.Identifier|null {
+  switch (node.kind) {
+    case ts.SyntaxKind.PropertyAccessExpression: {
+      // For expression position
+      let lhs = node;
+      do {
+        lhs = (<ts.PropertyAccessExpression>lhs).expression;
+      } while (lhs && lhs.kind !== ts.SyntaxKind.Identifier);
+
+      return <ts.Identifier>lhs;
+    }
+    case ts.SyntaxKind.TypeReference: {
+      // For type position
+      let lhs: ts.Node = (<ts.TypeReferenceNode>node).typeName;
+      do {
+        lhs = (<ts.QualifiedName>lhs).left;
+      } while (lhs && lhs.kind !== ts.SyntaxKind.Identifier);
+
+      return <ts.Identifier>lhs;
+    }
+    default:
+      return null;
+  }
+}
+
+function createErrorMessage(node: ts.Node, message: string): string {
+  const sourceFile = node.getSourceFile();
+  let position;
+  if (sourceFile) {
+    const {line, character} = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+    position = `${sourceFile.fileName}(${line + 1},${character + 1})`;
+  } else {
+    position = '<unknown>';
+  }
+
+  return `${position}: error: ${message}`;
+}
+
+function hasModifier(node: ts.Node, modifierKind: ts.SyntaxKind): boolean {
+  return !!node.modifiers && node.modifiers.some(x => x.kind === modifierKind);
+}
diff --git a/tools/ts-api-guardian/package.json b/tools/ts-api-guardian/package.json
new file mode 100644
index 000000000000..41be8b44f215
--- /dev/null
+++ b/tools/ts-api-guardian/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "ts-api-guardian",
+  "version": "0.3.0",
+  "description": "Guards the API of TypeScript libraries!",
+  "main": "build/lib/main.js",
+  "typings": "build/definitions/main.d.ts",
+  "bin": {
+    "ts-api-guardian": "./bin/ts-api-guardian"
+  },
+  "directories": {
+    "test": "test"
+  },
+  "peerDependencies": {
+    "typescript": "^2.6.1"
+  },
+  "dependencies": {
+    "chalk": "^2.3.1",
+    "diff": "^3.4.0",
+    "minimist": "^1.2.0"
+  },
+  "devDependencies": {
+    "chai": "^4.1.2",
+    "jasmine": "^3.1.0",
+    "typescript": "~2.6.2"
+  },
+  "repository": {},
+  "keywords": [
+    "typescript"
+  ],
+  "contributors": [
+    "Alan Agius <alan.agius4@gmail.com> (https://github.com/alan-agius4/)",
+    "Alex Eagle <alexeagle@google.com> (https://angular.io/)",
+    "Martin Probst <martinprobst@google.com> (https://angular.io/)",
+    "Victor Savkin<vsavkin@google.com> (https://victorsavkin.com)",
+    "Igor Minar<iminar@google.com> (https://angular.io/)"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/angular/issues"
+  },
+  "homepage": "https://github.com/angular/angular/tools/ts-api-guardian"
+}
diff --git a/tools/ts-api-guardian/test/bootstrap.ts b/tools/ts-api-guardian/test/bootstrap.ts
new file mode 100644
index 000000000000..8c6514a26656
--- /dev/null
+++ b/tools/ts-api-guardian/test/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 * as path from 'path';
+// Before running tests, change directories to our directory under the runfiles
+// From runfiles we want to go to the angular/tools/ts-api-guardian subfolder.
+process.chdir(path.join(process.env['TEST_SRCDIR'], 'angular', 'tools', 'ts-api-guardian'));
diff --git a/tools/ts-api-guardian/test/cli_e2e_test.ts b/tools/ts-api-guardian/test/cli_e2e_test.ts
new file mode 100644
index 000000000000..7e102ac8783d
--- /dev/null
+++ b/tools/ts-api-guardian/test/cli_e2e_test.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 chai = require('chai');
+import * as child_process from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+import {assertFileEqual, unlinkRecursively} from './helpers';
+
+const BINARY = 'ts-api-guardian/bin/ts-api-guardian';
+
+describe('cli: e2e test', () => {
+  const outDir = path.join(process.env['TEST_TMPDIR'], 'tmp');
+
+  beforeEach(() => {
+    if (!fs.existsSync(outDir)) {
+      fs.mkdirSync(outDir);
+    }
+  });
+
+  afterEach(() => { unlinkRecursively(outDir); });
+
+  it('should print usage without any argument', () => {
+    const {stderr} = execute([]);
+    chai.assert.match(stderr, /Usage/);
+  });
+
+  it('should show help message with --help', () => {
+    const {stdout} = execute(['--help']);
+    chai.assert.match(stdout, /Usage/);
+  });
+
+  it('should generate golden file with --out', () => {
+    const simpleFile = path.join(outDir, 'simple.d.ts');
+    const {status, stderr} = execute(['--out', simpleFile, 'test/fixtures/simple.d.ts']);
+    chai.assert.equal(status, 0, stderr);
+    assertFileEqual(simpleFile, 'test/fixtures/simple_expected.d.ts');
+  });
+
+  it('should verify golden file with --verify and exit cleanly on no difference', () => {
+    const {stdout, status} =
+        execute(['--verify', 'test/fixtures/simple_expected.d.ts', 'test/fixtures/simple.d.ts']);
+    chai.assert.equal(stdout, '');
+    chai.assert.equal(status, 0);
+  });
+
+  it('should verify golden file with --verify and exit with error on difference', () => {
+    const {stdout, status} = execute(
+        ['--verify', 'test/fixtures/verify_expected.d.ts', 'test/fixtures/verify_entrypoint.d.ts']);
+    chai.assert.equal(stdout, fs.readFileSync('test/fixtures/verify.patch').toString());
+    chai.assert.equal(status, 1);
+  });
+
+  it('should generate multiple golden files with --outDir and --rootDir', () => {
+    const {status} = execute([
+      '--outDir', outDir, '--rootDir', 'test/fixtures', 'test/fixtures/simple.d.ts',
+      'test/fixtures/sorting.d.ts'
+    ]);
+    chai.assert.equal(status, 0);
+    assertFileEqual(path.join(outDir, 'simple.d.ts'), 'test/fixtures/simple_expected.d.ts');
+    assertFileEqual(path.join(outDir, 'sorting.d.ts'), 'test/fixtures/sorting_expected.d.ts');
+  });
+
+  it('should verify multiple golden files with --verifyDir and --rootDir', () => {
+    copyFile('test/fixtures/simple_expected.d.ts', path.join(outDir, 'simple.d.ts'));
+    copyFile('test/fixtures/sorting_expected.d.ts', path.join(outDir, 'sorting.d.ts'));
+    const {stdout, status} = execute([
+      '--verifyDir', outDir, '--rootDir', 'test/fixtures', 'test/fixtures/simple.d.ts',
+      'test/fixtures/sorting.d.ts'
+    ]);
+    chai.assert.equal(stdout, '');
+    chai.assert.equal(status, 0);
+  });
+
+  it('should generate respecting --stripExportPattern', () => {
+    const {stdout, status} = execute([
+      '--out', path.join(outDir, 'underscored.d.ts'), '--stripExportPattern', '^__.*',
+      'test/fixtures/underscored.d.ts'
+    ]);
+    chai.assert.equal(status, 0);
+    assertFileEqual(
+        path.join(outDir, 'underscored.d.ts'), 'test/fixtures/underscored_expected.d.ts');
+  });
+
+  it('should not throw for aliased stripped exports', () => {
+    const {stdout, status} = execute([
+      '--out', path.join(outDir, 'stripped_alias.d.ts'), '--stripExportPattern', '^__.*',
+      'test/fixtures/stripped_alias.d.ts'
+    ]);
+    chai.assert.equal(status, 0);
+    assertFileEqual(
+        path.join(outDir, 'stripped_alias.d.ts'), 'test/fixtures/stripped_alias_expected.d.ts');
+  });
+
+  it('should verify respecting --stripExportPattern', () => {
+    const {stdout, status} = execute([
+      '--verify', 'test/fixtures/underscored_expected.d.ts', 'test/fixtures/underscored.d.ts',
+      '--stripExportPattern', '^__.*'
+    ]);
+    chai.assert.equal(stdout, '');
+    chai.assert.equal(status, 0);
+  });
+
+  it('should respect --allowModuleIdentifiers', () => {
+    const {stdout, status} = execute([
+      '--verify', 'test/fixtures/module_identifier_expected.d.ts', '--allowModuleIdentifiers',
+      'foo', 'test/fixtures/module_identifier.d.ts'
+    ]);
+    chai.assert.equal(stdout, '');
+    chai.assert.equal(status, 0);
+  });
+});
+
+function copyFile(sourceFile: string, targetFile: string) {
+  fs.writeFileSync(targetFile, fs.readFileSync(sourceFile));
+}
+
+function execute(args: string[]): {stdout: string, stderr: string, status: number} {
+  const output = child_process.spawnSync(process.execPath, [path.resolve(BINARY), ...args], {
+    env: {
+      'NODE_PATH': process.cwd(),
+    }
+  });
+  chai.assert(!output.error, 'Child process failed or timed out: ' + output.error);
+  chai.assert(!output.signal, `Child process killed by signal ${output.signal}`);
+
+  return {
+    stdout: output.stdout.toString(),
+    stderr: output.stderr.toString(),
+    status: output.status
+  };
+}
diff --git a/tools/ts-api-guardian/test/cli_unit_test.ts b/tools/ts-api-guardian/test/cli_unit_test.ts
new file mode 100644
index 000000000000..278df9810344
--- /dev/null
+++ b/tools/ts-api-guardian/test/cli_unit_test.ts
@@ -0,0 +1,94 @@
+/**
+ * @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 chai = require('chai');
+import * as ts from 'typescript';
+import {parseArguments, generateFileNamePairs} from '../lib/cli';
+
+
+describe('cli: parseArguments', () => {
+  it('should show usage with error when supplied with no arguments', () => {
+    const {argv, mode, errors} = parseArguments([]);
+    chai.assert.equal(mode, 'help');
+    chai.assert.deepEqual(errors, ['No input file specified.']);
+  });
+
+  it('should show usage without error when supplied with --help', () => {
+    const {argv, mode, errors} = parseArguments(['--help']);
+    chai.assert.equal(mode, 'help');
+    chai.assert.deepEqual(errors, []);
+  });
+
+  it('should show usage with error when supplied with none of --out/verify[Dir]', () => {
+    const {argv, mode, errors} = parseArguments(['input.d.ts']);
+    chai.assert.equal(mode, 'help');
+    chai.assert.deepEqual(errors, ['Specify either --out[Dir] or --verify[Dir]']);
+  });
+
+  it('should show usage with error when supplied with both of --out/verify[Dir]', () => {
+    const {argv, mode, errors} =
+        parseArguments(['--out', 'out.d.ts', '--verifyDir', 'golden.d.ts', 'input.d.ts']);
+    chai.assert.equal(mode, 'help');
+    chai.assert.deepEqual(errors, ['Specify either --out[Dir] or --verify[Dir]']);
+  });
+
+  it('should show usage with error when supplied without input file', () => {
+    const {argv, mode, errors} = parseArguments(['--out', 'output.d.ts']);
+    chai.assert.equal(mode, 'help');
+    chai.assert.deepEqual(errors, ['No input file specified.']);
+  });
+
+  it('should show usage with error when supplied without input file', () => {
+    const {argv, mode, errors} =
+        parseArguments(['--out', 'output.d.ts', 'first.d.ts', 'second.d.ts']);
+    chai.assert.equal(mode, 'help');
+    chai.assert.deepEqual(errors, ['More than one input specified. Use --outDir instead.']);
+  });
+
+  it('should use out mode when supplied with --out', () => {
+    const {argv, mode, errors} = parseArguments(['--out', 'out.d.ts', 'input.d.ts']);
+    chai.assert.equal(argv['out'], 'out.d.ts');
+    chai.assert.deepEqual(argv._, ['input.d.ts']);
+    chai.assert.equal(mode, 'out');
+    chai.assert.deepEqual(errors, []);
+  });
+
+  it('should use verify mode when supplied with --verify', () => {
+    const {argv, mode, errors} = parseArguments(['--verify', 'out.d.ts', 'input.d.ts']);
+    chai.assert.equal(argv['verify'], 'out.d.ts');
+    chai.assert.deepEqual(argv._, ['input.d.ts']);
+    chai.assert.equal(mode, 'verify');
+    chai.assert.deepEqual(errors, []);
+  });
+});
+
+describe('cli: generateFileNamePairs', () => {
+  it('should generate one file pair in one-file mode', () => {
+    chai.assert.deepEqual(
+        generateFileNamePairs({_: ['input.d.ts'], out: 'output.d.ts'}, 'out'),
+        [{entrypoint: 'input.d.ts', goldenFile: 'output.d.ts'}]);
+  });
+
+  it('should generate file pairs in multi-file mode according to current directory', () => {
+    chai.assert.deepEqual(
+        generateFileNamePairs({_: ['src/first.d.ts', 'src/second.d.ts'], outDir: 'bank'}, 'out'), [
+          {entrypoint: 'src/first.d.ts', goldenFile: 'bank/src/first.d.ts'},
+          {entrypoint: 'src/second.d.ts', goldenFile: 'bank/src/second.d.ts'}
+        ]);
+  });
+
+  it('should generate file pairs according to rootDir if provided', () => {
+    chai.assert.deepEqual(
+        generateFileNamePairs(
+            {_: ['src/first.d.ts', 'src/second.d.ts'], outDir: 'bank', rootDir: 'src'}, 'out'),
+        [
+          {entrypoint: 'src/first.d.ts', goldenFile: 'bank/first.d.ts'},
+          {entrypoint: 'src/second.d.ts', goldenFile: 'bank/second.d.ts'}
+        ]);
+  });
+});
diff --git a/tools/ts-api-guardian/test/fixtures/classes_and_interfaces.d.ts b/tools/ts-api-guardian/test/fixtures/classes_and_interfaces.d.ts
new file mode 100644
index 000000000000..485e4ef31a9b
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/classes_and_interfaces.d.ts
@@ -0,0 +1,14 @@
+export declare class A {
+    field: string;
+    method(a: string): number;
+}
+export interface B {
+    field: A;
+}
+export declare class C {
+    private privateProp;
+    propWithDefault: number;
+    protected protectedProp: number;
+    someProp: string;
+    constructor(someProp: string, propWithDefault: number, privateProp: any, protectedProp: number);
+}
diff --git a/tools/ts-api-guardian/test/fixtures/classes_and_interfaces_expected.d.ts b/tools/ts-api-guardian/test/fixtures/classes_and_interfaces_expected.d.ts
new file mode 100644
index 000000000000..6c37af1a01d2
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/classes_and_interfaces_expected.d.ts
@@ -0,0 +1,15 @@
+export declare class A {
+    field: string;
+    method(a: string): number;
+}
+
+export interface B {
+    field: A;
+}
+
+export declare class C {
+    propWithDefault: number;
+    protected protectedProp: number;
+    someProp: string;
+    constructor(someProp: string, propWithDefault: number, privateProp: any, protectedProp: number);
+}
diff --git a/tools/ts-api-guardian/test/fixtures/empty.d.ts b/tools/ts-api-guardian/test/fixtures/empty.d.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/tools/ts-api-guardian/test/fixtures/empty.ts b/tools/ts-api-guardian/test/fixtures/empty.ts
new file mode 100644
index 000000000000..c91a05e54484
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/empty.ts
@@ -0,0 +1,7 @@
+/**
+ * @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
+ */
diff --git a/tools/ts-api-guardian/test/fixtures/empty_expected.d.ts b/tools/ts-api-guardian/test/fixtures/empty_expected.d.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/tools/ts-api-guardian/test/fixtures/enum_as_type.d.ts b/tools/ts-api-guardian/test/fixtures/enum_as_type.d.ts
new file mode 100644
index 000000000000..db4a3c65e777
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/enum_as_type.d.ts
@@ -0,0 +1,8 @@
+export declare enum Foo {
+  Alpha = 0,
+  Beta = 1,
+}
+
+export interface Bar {
+  field: Foo.Alpha,
+}
\ No newline at end of file
diff --git a/tools/ts-api-guardian/test/fixtures/enum_as_type_expected.d.ts b/tools/ts-api-guardian/test/fixtures/enum_as_type_expected.d.ts
new file mode 100644
index 000000000000..63e8c6ba32ef
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/enum_as_type_expected.d.ts
@@ -0,0 +1,8 @@
+export interface Bar {
+  field: Foo.Alpha,
+}
+
+export declare enum Foo {
+  Alpha = 0,
+  Beta = 1,
+}
diff --git a/tools/ts-api-guardian/test/fixtures/keyof.d.ts b/tools/ts-api-guardian/test/fixtures/keyof.d.ts
new file mode 100644
index 000000000000..c2b6c1749cbf
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/keyof.d.ts
@@ -0,0 +1,3 @@
+export declare type SimpleChanges<T = any> = {
+    [P in keyof T]?: any;
+};
\ No newline at end of file
diff --git a/tools/ts-api-guardian/test/fixtures/keyof_expected.d.ts b/tools/ts-api-guardian/test/fixtures/keyof_expected.d.ts
new file mode 100644
index 000000000000..b04470236813
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/keyof_expected.d.ts
@@ -0,0 +1,3 @@
+export declare type SimpleChanges<T = any> = {
+    [P in keyof T]?: any;
+};
diff --git a/tools/ts-api-guardian/test/fixtures/module_identifier.d.ts b/tools/ts-api-guardian/test/fixtures/module_identifier.d.ts
new file mode 100644
index 000000000000..fa509104356b
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/module_identifier.d.ts
@@ -0,0 +1,4 @@
+import * as foo from './somewhere';
+
+export declare class A extends foo.Bar {
+}
diff --git a/tools/ts-api-guardian/test/fixtures/module_identifier_expected.d.ts b/tools/ts-api-guardian/test/fixtures/module_identifier_expected.d.ts
new file mode 100644
index 000000000000..174b833508fe
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/module_identifier_expected.d.ts
@@ -0,0 +1,2 @@
+export declare class A extends foo.Bar {
+}
diff --git a/tools/ts-api-guardian/test/fixtures/reexported.d.ts b/tools/ts-api-guardian/test/fixtures/reexported.d.ts
new file mode 100644
index 000000000000..b583f44e4f09
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/reexported.d.ts
@@ -0,0 +1 @@
+export { A, B } from './simple';
diff --git a/tools/ts-api-guardian/test/fixtures/reexported_aliased.d.ts b/tools/ts-api-guardian/test/fixtures/reexported_aliased.d.ts
new file mode 100644
index 000000000000..058677bf1b21
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/reexported_aliased.d.ts
@@ -0,0 +1 @@
+export { A as Apple } from './classes_and_interfaces';
diff --git a/tools/ts-api-guardian/test/fixtures/reexported_classes.d.ts b/tools/ts-api-guardian/test/fixtures/reexported_classes.d.ts
new file mode 100644
index 000000000000..01a7a03a1051
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/reexported_classes.d.ts
@@ -0,0 +1 @@
+export { A } from './classes_and_interfaces';
diff --git a/tools/ts-api-guardian/test/fixtures/reexported_classes_expected.d.ts b/tools/ts-api-guardian/test/fixtures/reexported_classes_expected.d.ts
new file mode 100644
index 000000000000..b8c57509245c
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/reexported_classes_expected.d.ts
@@ -0,0 +1,4 @@
+export declare class A {
+    field: string;
+    method(a: string): number;
+}
diff --git a/tools/ts-api-guardian/test/fixtures/reexported_expected.d.ts b/tools/ts-api-guardian/test/fixtures/reexported_expected.d.ts
new file mode 100644
index 000000000000..7020ff3c3f79
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/reexported_expected.d.ts
@@ -0,0 +1,3 @@
+export declare const A: string;
+
+export declare var B: string;
diff --git a/tools/ts-api-guardian/test/fixtures/reexported_extern.d.ts b/tools/ts-api-guardian/test/fixtures/reexported_extern.d.ts
new file mode 100644
index 000000000000..0c0d859899ae
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/reexported_extern.d.ts
@@ -0,0 +1,5 @@
+/**
+ * We want to ensure that external modules are not resolved. Typescript happens
+ * to be conveniently available in our environment.
+ */
+export { CompilerHost } from 'typescript';
diff --git a/tools/ts-api-guardian/test/fixtures/reexported_extern_expected.d.ts b/tools/ts-api-guardian/test/fixtures/reexported_extern_expected.d.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/tools/ts-api-guardian/test/fixtures/reexported_star.d.ts b/tools/ts-api-guardian/test/fixtures/reexported_star.d.ts
new file mode 100644
index 000000000000..882a36dbe8c1
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/reexported_star.d.ts
@@ -0,0 +1 @@
+export * from './simple';
diff --git a/tools/ts-api-guardian/test/fixtures/reexported_star_expected.d.ts b/tools/ts-api-guardian/test/fixtures/reexported_star_expected.d.ts
new file mode 100644
index 000000000000..7020ff3c3f79
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/reexported_star_expected.d.ts
@@ -0,0 +1,3 @@
+export declare const A: string;
+
+export declare var B: string;
diff --git a/tools/ts-api-guardian/test/fixtures/simple.d.ts b/tools/ts-api-guardian/test/fixtures/simple.d.ts
new file mode 100644
index 000000000000..191760e7a0d7
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/simple.d.ts
@@ -0,0 +1,2 @@
+export declare const A: string;
+export declare var B: string;
diff --git a/tools/ts-api-guardian/test/fixtures/simple_expected.d.ts b/tools/ts-api-guardian/test/fixtures/simple_expected.d.ts
new file mode 100644
index 000000000000..7020ff3c3f79
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/simple_expected.d.ts
@@ -0,0 +1,3 @@
+export declare const A: string;
+
+export declare var B: string;
diff --git a/tools/ts-api-guardian/test/fixtures/sorting.d.ts b/tools/ts-api-guardian/test/fixtures/sorting.d.ts
new file mode 100644
index 000000000000..58b42c6515b4
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/sorting.d.ts
@@ -0,0 +1,11 @@
+export declare type E = string;
+export interface D {
+    e: number;
+}
+export declare var e: C;
+export declare class C {
+    e: number;
+    d: string;
+}
+export declare function b(): boolean;
+export declare const a: string;
diff --git a/tools/ts-api-guardian/test/fixtures/sorting_expected.d.ts b/tools/ts-api-guardian/test/fixtures/sorting_expected.d.ts
new file mode 100644
index 000000000000..d3921f8d9110
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/sorting_expected.d.ts
@@ -0,0 +1,16 @@
+export declare const a: string;
+
+export declare function b(): boolean;
+
+export declare class C {
+    d: string;
+    e: number;
+}
+
+export interface D {
+    e: number;
+}
+
+export declare var e: C;
+
+export declare type E = string;
diff --git a/tools/ts-api-guardian/test/fixtures/stripped_alias.d.ts b/tools/ts-api-guardian/test/fixtures/stripped_alias.d.ts
new file mode 100644
index 000000000000..df39a7eb0d65
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/stripped_alias.d.ts
@@ -0,0 +1,3 @@
+export {original_symbol as __private_symbol} from './stripped_alias_original';
+export class B {
+}
\ No newline at end of file
diff --git a/tools/ts-api-guardian/test/fixtures/stripped_alias_expected.d.ts b/tools/ts-api-guardian/test/fixtures/stripped_alias_expected.d.ts
new file mode 100644
index 000000000000..94fa3c9c47a3
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/stripped_alias_expected.d.ts
@@ -0,0 +1,2 @@
+export class B {
+}
diff --git a/tools/ts-api-guardian/test/fixtures/stripped_alias_original.d.ts b/tools/ts-api-guardian/test/fixtures/stripped_alias_original.d.ts
new file mode 100644
index 000000000000..76536ae8353e
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/stripped_alias_original.d.ts
@@ -0,0 +1 @@
+export let original_symbol: number;
\ No newline at end of file
diff --git a/tools/ts-api-guardian/test/fixtures/type_literals.d.ts b/tools/ts-api-guardian/test/fixtures/type_literals.d.ts
new file mode 100644
index 000000000000..1a2e41b591e1
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/type_literals.d.ts
@@ -0,0 +1,7 @@
+export class UsesTypeLiterals {
+  a: number | undefined;
+  b: number | null;
+  c: number | true;
+  d: number | null | undefined;
+  e: Array<string | null | undefined>;
+}
\ No newline at end of file
diff --git a/tools/ts-api-guardian/test/fixtures/type_literals_expected.d.ts b/tools/ts-api-guardian/test/fixtures/type_literals_expected.d.ts
new file mode 100644
index 000000000000..ce70fa6fa395
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/type_literals_expected.d.ts
@@ -0,0 +1,7 @@
+export class UsesTypeLiterals {
+  a: number | undefined;
+  b: number | null;
+  c: number | true;
+  d: number | null | undefined;
+  e: Array<string | null | undefined>;
+}
diff --git a/tools/ts-api-guardian/test/fixtures/underscored.d.ts b/tools/ts-api-guardian/test/fixtures/underscored.d.ts
new file mode 100644
index 000000000000..ee6bfd8eab13
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/underscored.d.ts
@@ -0,0 +1,3 @@
+export const __a__: string;
+export class B {
+}
diff --git a/tools/ts-api-guardian/test/fixtures/underscored_expected.d.ts b/tools/ts-api-guardian/test/fixtures/underscored_expected.d.ts
new file mode 100644
index 000000000000..94fa3c9c47a3
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/underscored_expected.d.ts
@@ -0,0 +1,2 @@
+export class B {
+}
diff --git a/tools/ts-api-guardian/test/fixtures/verify.patch b/tools/ts-api-guardian/test/fixtures/verify.patch
new file mode 100644
index 000000000000..bb23ff2ee236
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/verify.patch
@@ -0,0 +1,11 @@
+--- test/fixtures/verify_expected.d.ts	Golden file
++++ test/fixtures/verify_expected.d.ts	Generated API
+@@ -1,5 +1,6 @@
+ export interface A {
+     c: number;
+-    a(arg: any[]): any;
+-    b: string;
++    a(arg: any[]): {[name: string]: number};
+ }
++
++export declare const b: boolean;
diff --git a/tools/ts-api-guardian/test/fixtures/verify_entrypoint.d.ts b/tools/ts-api-guardian/test/fixtures/verify_entrypoint.d.ts
new file mode 100644
index 000000000000..07a6c15ae8df
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/verify_entrypoint.d.ts
@@ -0,0 +1,5 @@
+export interface A {
+    c: number;
+    a(arg: any[]): {[name: string]: number};
+}
+export { b } from './verify_submodule';
diff --git a/tools/ts-api-guardian/test/fixtures/verify_expected.d.ts b/tools/ts-api-guardian/test/fixtures/verify_expected.d.ts
new file mode 100644
index 000000000000..c7d5188ec4af
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/verify_expected.d.ts
@@ -0,0 +1,5 @@
+export interface A {
+    c: number;
+    a(arg: any[]): any;
+    b: string;
+}
diff --git a/tools/ts-api-guardian/test/fixtures/verify_submodule.d.ts b/tools/ts-api-guardian/test/fixtures/verify_submodule.d.ts
new file mode 100644
index 000000000000..a9f8f857a281
--- /dev/null
+++ b/tools/ts-api-guardian/test/fixtures/verify_submodule.d.ts
@@ -0,0 +1 @@
+export declare const b: boolean;
diff --git a/tools/ts-api-guardian/test/helpers.ts b/tools/ts-api-guardian/test/helpers.ts
new file mode 100644
index 000000000000..9c5e785b7e4b
--- /dev/null
+++ b/tools/ts-api-guardian/test/helpers.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 chai from 'chai';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function unlinkRecursively(file: string) {
+  if (fs.statSync(file).isDirectory()) {
+    for (const f of fs.readdirSync(file)) {
+      unlinkRecursively(path.join(file, f));
+    }
+    fs.rmdirSync(file);
+  } else {
+    fs.unlinkSync(file);
+  }
+}
+
+export function assertFileEqual(actualFile: string, expectedFile: string) {
+  chai.assert.equal(
+      fs.readFileSync(actualFile).toString(), fs.readFileSync(expectedFile).toString());
+}
diff --git a/tools/ts-api-guardian/test/integration_test.ts b/tools/ts-api-guardian/test/integration_test.ts
new file mode 100644
index 000000000000..eda21210e158
--- /dev/null
+++ b/tools/ts-api-guardian/test/integration_test.ts
@@ -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
+ */
+
+import * as chai from 'chai';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as main from '../lib/main';
+import {assertFileEqual, unlinkRecursively} from './helpers';
+
+describe('integration test: public api', () => {
+  let _warn: any = null;
+  let warnings: string[] = [];
+  beforeEach(() => {
+    _warn = console.warn;
+    console.warn = (...args: string[]) => warnings.push(args.join(' '));
+  });
+
+  afterEach(() => {
+    console.warn = _warn;
+    warnings = [];
+    _warn = null;
+  });
+
+  it('should handle empty files',
+     () => { check('test/fixtures/empty.d.ts', 'test/fixtures/empty_expected.d.ts'); });
+
+  it('should include symbols',
+     () => { check('test/fixtures/simple.d.ts', 'test/fixtures/simple_expected.d.ts'); });
+
+  it('should include symbols reexported explicitly',
+     () => { check('test/fixtures/reexported.d.ts', 'test/fixtures/reexported_expected.d.ts'); });
+
+  it('should include symbols reexported with *', () => {
+    check('test/fixtures/reexported_star.d.ts', 'test/fixtures/reexported_star_expected.d.ts');
+  });
+
+  it('should include members of classes and interfaces', () => {
+    check(
+        'test/fixtures/classes_and_interfaces.d.ts',
+        'test/fixtures/classes_and_interfaces_expected.d.ts');
+  });
+
+  it('should include members reexported classes', () => {
+    check(
+        'test/fixtures/reexported_classes.d.ts', 'test/fixtures/reexported_classes_expected.d.ts');
+  });
+
+  it('should remove reexported external symbols', () => {
+    check('test/fixtures/reexported_extern.d.ts', 'test/fixtures/reexported_extern_expected.d.ts');
+    chai.assert.deepEqual(warnings, [
+      'test/fixtures/reexported_extern.d.ts(5,1): error: No export declaration found for symbol "CompilerHost"'
+    ]);
+  });
+
+  it('should support type literals', () => {
+    check('test/fixtures/type_literals.d.ts', 'test/fixtures/type_literals_expected.d.ts');
+  });
+
+  it('should allow enums as types', () => {
+    check('test/fixtures/enum_as_type.d.ts', 'test/fixtures/enum_as_type_expected.d.ts');
+  });
+
+  it('should throw on passing a .ts file as an input', () => {
+    chai.assert.throws(() => {
+      main.publicApi('test/fixtures/empty.ts');
+    }, 'Source file "test/fixtures/empty.ts" is not a declaration file');
+  });
+
+  it('should respect serialization options', () => {
+    check(
+        'test/fixtures/underscored.d.ts', 'test/fixtures/underscored_expected.d.ts',
+        {stripExportPattern: /^__.*/});
+  });
+});
+
+describe('integration test: generateGoldenFile', () => {
+  const outDir = path.join(process.env['TEST_TMPDIR'], 'tmp');
+  const outFile = path.join(outDir, 'out.d.ts');
+  const deepOutFile = path.join(outDir, 'a/b/c/out.d.ts');
+
+  beforeEach(() => {
+    if (!fs.existsSync(outDir)) {
+      fs.mkdirSync(outDir);
+    }
+  });
+
+  afterEach(() => { unlinkRecursively(outDir); });
+
+
+  it('should generate a golden file', () => {
+    main.generateGoldenFile('test/fixtures/reexported_classes.d.ts', outFile);
+    assertFileEqual(outFile, 'test/fixtures/reexported_classes_expected.d.ts');
+  });
+
+  it('should generate a golden file with any ancestor directory created', () => {
+    main.generateGoldenFile('test/fixtures/reexported_classes.d.ts', deepOutFile);
+    assertFileEqual(deepOutFile, 'test/fixtures/reexported_classes_expected.d.ts');
+  });
+
+  it('should respect serialization options', () => {
+    main.generateGoldenFile(
+        'test/fixtures/underscored.d.ts', outFile, {stripExportPattern: /^__.*/});
+    assertFileEqual(outFile, 'test/fixtures/underscored_expected.d.ts');
+  });
+
+  it('should generate a golden file with keyof', () => {
+    main.generateGoldenFile('test/fixtures/keyof.d.ts', outFile);
+    assertFileEqual(outFile, 'test/fixtures/keyof_expected.d.ts');
+  });
+});
+
+describe('integration test: verifyAgainstGoldenFile', () => {
+  it('should check an entrypoint against a golden file on equal', () => {
+    const diff = main.verifyAgainstGoldenFile(
+        'test/fixtures/reexported_classes.d.ts', 'test/fixtures/reexported_classes_expected.d.ts');
+    chai.assert.equal(diff, '');
+  });
+
+  it('should check an entrypoint against a golden file with proper diff message', () => {
+    const diff = main.verifyAgainstGoldenFile(
+        'test/fixtures/verify_entrypoint.d.ts', 'test/fixtures/verify_expected.d.ts');
+    chai.assert.equal(diff, fs.readFileSync('test/fixtures/verify.patch').toString());
+  });
+
+  it('should respect serialization options', () => {
+    const diff = main.verifyAgainstGoldenFile(
+        'test/fixtures/underscored.d.ts', 'test/fixtures/underscored_expected.d.ts',
+        {stripExportPattern: /^__.*/});
+    chai.assert.equal(diff, '');
+  });
+});
+
+function check(sourceFile: string, expectedFile: string, options: main.SerializationOptions = {}) {
+  chai.assert.equal(main.publicApi(sourceFile, options), fs.readFileSync(expectedFile).toString());
+}
diff --git a/tools/ts-api-guardian/test/unit_test.ts b/tools/ts-api-guardian/test/unit_test.ts
new file mode 100644
index 000000000000..faa1ab903afa
--- /dev/null
+++ b/tools/ts-api-guardian/test/unit_test.ts
@@ -0,0 +1,505 @@
+/**
+ * @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 chai from 'chai';
+import * as ts from 'typescript';
+
+import {SerializationOptions, publicApiInternal} from '../lib/serializer';
+
+const classesAndInterfaces = `
+  export declare class A {
+      field: string;
+      method(a: string): number;
+  }
+  export interface B {
+      field: A;
+  }
+  export declare class C {
+      someProp: string;
+      propWithDefault: number;
+      private privateProp;
+      protected protectedProp: number;
+      constructor(someProp: string, propWithDefault: number, privateProp: any, protectedProp: number);
+  }
+`;
+
+describe('unit test', () => {
+  let _warn: any = null;
+  let warnings: string[] = [];
+  beforeEach(() => {
+    _warn = console.warn;
+    console.warn = (...args: string[]) => warnings.push(args.join(' '));
+  });
+
+  afterEach(() => {
+    console.warn = _warn;
+    warnings = [];
+    _warn = null;
+  });
+
+  it('should ignore private methods', () => {
+    const input = `
+      export declare class A {
+          fa(): void;
+          protected fb(): void;
+          private fc();
+      }
+    `;
+    const expected = `
+      export declare class A {
+          fa(): void;
+          protected fb(): void;
+      }
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should support overloads functions', () => {
+    const input = `
+      export declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata;
+
+      export declare function registerLocaleData(data: any, extraData?: any): void;
+      export declare function registerLocaleData(data: any, localeId?: string, extraData?: any): void;
+    `;
+
+    const expected = `
+      export declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata;
+
+      export declare function registerLocaleData(data: any, extraData?: any): void;
+      export declare function registerLocaleData(data: any, localeId?: string, extraData?: any): void;
+    `;
+
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should ignore private props', () => {
+    const input = `
+      export declare class A {
+          fa: any;
+          protected fb: any;
+          private fc;
+      }
+    `;
+    const expected = `
+      export declare class A {
+          fa: any;
+          protected fb: any;
+      }
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should support imports without capturing imports', () => {
+    const input = `
+      import {A} from './classes_and_interfaces';
+      export declare class C {
+          field: A;
+      }
+    `;
+    const expected = `
+      export declare class C {
+          field: A;
+      }
+    `;
+    check({'classes_and_interfaces.d.ts': classesAndInterfaces, 'file.d.ts': input}, expected);
+  });
+
+  it('should throw on aliased reexports', () => {
+    const input = `
+      export { A as Apple } from './classes_and_interfaces';
+    `;
+    checkThrows(
+        {'classes_and_interfaces.d.ts': classesAndInterfaces, 'file.d.ts': input},
+        'Symbol "A" was aliased as "Apple". Aliases are not supported.');
+  });
+
+  it('should remove reexported external symbols', () => {
+    const input = `
+      export { Foo } from 'some-external-module-that-cannot-be-resolved';
+    `;
+    const expected = `
+    `;
+    check({'classes_and_interfaces.d.ts': classesAndInterfaces, 'file.d.ts': input}, expected);
+    chai.assert.deepEqual(
+        warnings, ['file.d.ts(1,1): error: No export declaration found for symbol "Foo"']);
+  });
+
+  it('should sort exports', () => {
+    const input = `
+      export declare type E = string;
+      export interface D {
+          e: number;
+      }
+      export declare var e: C;
+      export declare class C {
+          e: number;
+          d: string;
+      }
+      export declare function b(): boolean;
+      export declare const a: string;
+    `;
+    const expected = `
+      export declare const a: string;
+
+      export declare function b(): boolean;
+
+      export declare class C {
+          d: string;
+          e: number;
+      }
+
+      export interface D {
+          e: number;
+      }
+
+      export declare var e: C;
+
+      export declare type E = string;
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should sort class members', () => {
+    const input = `
+      export class A {
+        f: number;
+        static foo(): void;
+        c: string;
+        static a: boolean;
+        constructor();
+        static bar(): void;
+      }
+    `;
+    const expected = `
+      export class A {
+        c: string;
+        f: number;
+        constructor();
+        static a: boolean;
+        static bar(): void;
+        static foo(): void;
+      }
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should sort interface members', () => {
+    const input = `
+      export interface A {
+        (): void;
+        [key: string]: any;
+        c(): void;
+        a: number;
+        new (): Object;
+      }
+    `;
+    const expected = `
+      export interface A {
+        a: number;
+        (): void;
+        new (): Object;
+        [key: string]: any;
+        c(): void;
+      }
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should sort class members including readonly', () => {
+    const input = `
+        export declare class DebugNode {
+          private _debugContext;
+          nativeNode: any;
+          listeners: any[];
+          parent: any | null;
+          constructor(nativeNode: any, parent: DebugNode | null, _debugContext: any);
+          readonly injector: any;
+          readonly componentInstance: any;
+          readonly context: any;
+          readonly references: {
+              [key: string]: any;
+          };
+          readonly providerTokens: any[];
+      }
+    `;
+    const expected = `
+        export declare class DebugNode {
+          readonly componentInstance: any;
+          readonly context: any;
+          readonly injector: any;
+          listeners: any[];
+          nativeNode: any;
+          parent: any | null;
+          readonly providerTokens: any[];
+          readonly references: {
+              [key: string]: any;
+          };
+          constructor(nativeNode: any, parent: DebugNode | null, _debugContext: any);
+      }
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should sort two call signatures', () => {
+    const input = `
+      export interface A {
+        (b: number): void;
+        (a: number): void;
+      }
+    `;
+    const expected = `
+      export interface A {
+        (a: number): void;
+        (b: number): void;
+      }
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should sort exports including re-exports', () => {
+    const submodule = `
+      export declare var e: C;
+      export declare class C {
+          e: number;
+          d: string;
+      }
+    `;
+    const input = `
+      export * from './submodule';
+      export declare type E = string;
+      export interface D {
+          e: number;
+      }
+      export declare function b(): boolean;
+      export declare const a: string;
+    `;
+    const expected = `
+      export declare const a: string;
+
+      export declare function b(): boolean;
+
+      export declare class C {
+          d: string;
+          e: number;
+      }
+
+      export interface D {
+          e: number;
+      }
+
+      export declare var e: C;
+
+      export declare type E = string;
+    `;
+    check({'submodule.d.ts': submodule, 'file.d.ts': input}, expected);
+  });
+
+  it('should remove module comments', () => {
+    const input = `
+      /**
+       * An amazing module.
+       * @module
+       */
+      /**
+       * Foo function.
+       */
+      export declare function foo(): boolean;
+      export declare const bar: number;
+    `;
+    const expected = `
+      export declare const bar: number;
+
+      export declare function foo(): boolean;
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should remove class and field comments', () => {
+    const input = `
+      /**
+       * Does something really cool.
+       */
+      export declare class A {
+          /**
+           * A very interesting getter.
+           */
+          b: string;
+          /**
+           * A very useful field.
+           */
+          name: string;
+      }
+    `;
+    const expected = `
+      export declare class A {
+          b: string;
+          name: string;
+      }
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should skip symbols matching specified pattern', () => {
+    const input = `
+      export const __a__: string;
+      export class B {
+      }
+    `;
+    const expected = `
+      export class B {
+      }
+    `;
+    check({'file.d.ts': input}, expected, {stripExportPattern: /^__.*/});
+  });
+
+  it('should throw on using non-whitelisted module imports in expression position', () => {
+    const input = `
+      import * as foo from './foo';
+      export declare class A extends foo.A {
+      }
+    `;
+    checkThrows(
+        {'file.d.ts': input}, 'file.d.ts(2,32): error: Module identifier "foo" is not allowed. ' +
+            'Remove it from source or whitelist it via --allowModuleIdentifiers.');
+  });
+
+  it('should throw on using non-whitelisted module imports in type position', () => {
+    const input = `
+      import * as foo from './foo';
+      export type A = foo.A;
+    `;
+    checkThrows(
+        {'file.d.ts': input}, 'file.d.ts(2,17): error: Module identifier "foo" is not allowed. ' +
+            'Remove it from source or whitelist it via --allowModuleIdentifiers.');
+  });
+
+  it('should not throw on using whitelisted module imports', () => {
+    const input = `
+      import * as foo from './foo';
+      export declare class A extends foo.A {
+      }
+    `;
+    const expected = `
+      export declare class A extends foo.A {
+      }
+    `;
+    check({'file.d.ts': input}, expected, {allowModuleIdentifiers: ['foo']});
+  });
+
+  it('should not throw if non-whitelisted module imports are not written', () => {
+    const input = `
+      import * as foo from './foo';
+      export declare class A {
+      }
+    `;
+    const expected = `
+      export declare class A {
+      }
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should keep stability annotations of exports in docstrings', () => {
+    const input = `
+      /**
+       * @deprecated This is useless now
+       */
+      export declare class A {
+      }
+      /**
+       * @experimental
+       */
+      export declare const b: string;
+      /**
+       * @stable
+       */
+      export declare var c: number;
+    `;
+    const expected = `
+      /** @deprecated */
+      export declare class A {
+      }
+
+      /** @experimental */
+      export declare const b: string;
+
+      /** @stable */
+      export declare var c: number;
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+
+  it('should keep stability annotations of fields in docstrings', () => {
+    const input = `
+      export declare class A {
+        /**
+         * @stable
+         */
+        value: number;
+        /**
+         * @experimental
+         */
+        constructor();
+        /**
+         * @deprecated
+         */
+        foo(): void;
+      }
+    `;
+    const expected = `
+      export declare class A {
+        /** @stable */ value: number;
+        /** @experimental */ constructor();
+        /** @deprecated */ foo(): void;
+      }
+    `;
+    check({'file.d.ts': input}, expected);
+  });
+});
+
+function getMockHost(files: {[name: string]: string}): ts.CompilerHost {
+  return {
+    getSourceFile: (sourceName, languageVersion) => {
+      if (!files[sourceName]) return undefined;
+      return ts.createSourceFile(
+          sourceName, stripExtraIndentation(files[sourceName]), languageVersion, true);
+    },
+    writeFile: (name, text, writeByteOrderMark) => {},
+    fileExists: (filename) => !!files[filename],
+    readFile: (filename) => stripExtraIndentation(files[filename]),
+    getDefaultLibFileName: () => 'lib.ts',
+    useCaseSensitiveFileNames: () => true,
+    getCanonicalFileName: (filename) => filename,
+    getCurrentDirectory: () => './',
+    getNewLine: () => '\n',
+    getDirectories: () => []
+  };
+}
+
+function check(
+    files: {[name: string]: string}, expected: string, options: SerializationOptions = {}) {
+  const actual = publicApiInternal(getMockHost(files), 'file.d.ts', {}, options);
+  chai.assert.equal(actual.trim(), stripExtraIndentation(expected).trim());
+}
+
+function checkThrows(files: {[name: string]: string}, error: string) {
+  chai.assert.throws(() => { publicApiInternal(getMockHost(files), 'file.d.ts', {}); }, error);
+}
+
+function stripExtraIndentation(text: string) {
+  let lines = text.split('\n');
+  // Ignore first and last new line
+  lines = lines.slice(1, lines.length - 1);
+  const commonIndent = lines.reduce((min, line) => {
+    const indent = /^( *)/.exec(line) ![1].length;
+    // Ignore empty line
+    return line.length ? Math.min(min, indent) : min;
+  }, text.length);
+
+  return lines.map(line => line.substr(commonIndent)).join('\n') + '\n';
+}
diff --git a/tools/ts-api-guardian/yarn.lock b/tools/ts-api-guardian/yarn.lock
new file mode 100644
index 000000000000..9e69506d1b5c
--- /dev/null
+++ b/tools/ts-api-guardian/yarn.lock
@@ -0,0 +1,162 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  dependencies:
+    color-convert "^1.9.0"
+
+assertion-error@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+chai@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.1.2.tgz#0f64584ba642f0f2ace2806279f4f06ca23ad73c"
+  dependencies:
+    assertion-error "^1.0.1"
+    check-error "^1.0.1"
+    deep-eql "^3.0.0"
+    get-func-name "^2.0.0"
+    pathval "^1.0.0"
+    type-detect "^4.0.0"
+
+chalk@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+check-error@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
+
+color-convert@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+deep-eql@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
+  dependencies:
+    type-detect "^4.0.0"
+
+diff@^3.4.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+
+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"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+get-func-name@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
+
+glob@^7.0.6:
+  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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+jasmine-core@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-3.1.0.tgz#a4785e135d5df65024dfc9224953df585bd2766c"
+
+jasmine@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-3.1.0.tgz#2bd59fd7ec6ec0e8acb64e09f45a68ed2ad1952a"
+  dependencies:
+    glob "^7.0.6"
+    jasmine-core "~3.1.0"
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+pathval@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
+
+supports-color@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
+  dependencies:
+    has-flag "^3.0.0"
+
+type-detect@^4.0.0:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+
+typescript@~2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
diff --git a/tools/tsc-watch/index.ts b/tools/tsc-watch/index.ts
new file mode 100644
index 000000000000..0400b3ce45fc
--- /dev/null
+++ b/tools/tsc-watch/index.ts
@@ -0,0 +1,114 @@
+/**
+ * @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
+ */
+
+/* tslint:disable:no-console  */
+import {existsSync, mkdirSync} from 'fs';
+
+import {TscWatch} from './tsc_watch';
+
+export * from './tsc_watch';
+import 'reflect-metadata';
+
+function md(dir: string, folders: string[]) {
+  if (folders.length) {
+    const next = folders.shift();
+    const path = dir + '/' + next;
+    if (!existsSync(path)) {
+      mkdirSync(path);
+    }
+    md(path, folders);
+  }
+}
+
+let tscWatch: TscWatch = null;
+const platform = process.argv.length >= 3 ? process.argv[2] : null;
+const runMode: string = process.argv.length >= 4 ? process.argv[3] : null;
+const debugMode = process.argv.some(arg => arg === '--debug');
+const BaseConfig = {
+  start: 'File change detected. Starting incremental compilation...',
+  // This regex uses a negative lookbehind group (?<! 0 ), which causes it to not match a string
+  // containing " 0 error" but to match anything else containing "error". It requires the --harmony
+  // flag to run under node versions < 9.
+  error: /(?<! 0 )error/,
+  complete: 'Found 0 errors. Watching for file changes.',
+};
+
+if (platform == 'node') {
+  const specFiles = ['@angular/**/*_spec.js'];
+  tscWatch = new TscWatch(Object.assign(
+      {
+        tsconfig: 'packages/tsconfig.json',
+        onChangeCmds: [createNodeTestCommand(specFiles, debugMode)]
+      },
+      BaseConfig));
+} else if (platform == 'browser') {
+  tscWatch = new TscWatch(Object.assign(
+      {
+        tsconfig: 'packages/tsconfig.json',
+        onStartCmds: [
+          [
+            'node', 'node_modules/karma/bin/karma', 'start', '--no-auto-watch', '--port=9876',
+            'karma-js.conf.js'
+          ],
+          [
+            'node', 'node_modules/karma/bin/karma', 'start', '--no-auto-watch', '--port=9877',
+            'packages/router/karma.conf.js'
+          ],
+        ],
+        onChangeCmds: [
+          ['node', 'node_modules/karma/bin/karma', 'run', 'karma-js.conf.js', '--port=9876'],
+          ['node', 'node_modules/karma/bin/karma', 'run', '--port=9877'],
+        ]
+      },
+      BaseConfig));
+} else if (platform == 'router') {
+  tscWatch = new TscWatch(Object.assign(
+      {
+        tsconfig: 'packages/tsconfig.json',
+        onStartCmds: [
+          [
+            'node', 'node_modules/karma/bin/karma', 'start', '--no-auto-watch', '--port=9877',
+            'packages/router/karma.conf.js'
+          ],
+        ],
+        onChangeCmds: [
+          ['node', 'node_modules/karma/bin/karma', 'run', '--port=9877'],
+        ]
+      },
+      BaseConfig));
+} else if (platform == 'browserNoRouter') {
+  tscWatch = new TscWatch(Object.assign(
+      {
+        tsconfig: 'packages/tsconfig.json',
+        onStartCmds: [[
+          'node', 'node_modules/karma/bin/karma', 'start', '--no-auto-watch', '--port=9876',
+          'karma-js.conf.js'
+        ]],
+        onChangeCmds: [
+          ['node', 'node_modules/karma/bin/karma', 'run', 'karma-js.conf.js', '--port=9876'],
+        ]
+      },
+      BaseConfig));
+} else {
+  throw new Error(`unknown platform: ${platform}`);
+}
+
+if (runMode === 'watch') {
+  tscWatch.watch();
+} else if (runMode === 'runCmdsOnly') {
+  tscWatch.runCmdsOnly();
+} else {
+  tscWatch.run();
+}
+
+function createNodeTestCommand(specFiles: string[], debugMode: boolean) {
+  return ['node']
+      .concat(debugMode ? ['--inspect'] : [])
+      .concat('dist/tools/cjs-jasmine', '--')
+      .concat(specFiles);
+}
diff --git a/tools/tsc-watch/tsc_watch.ts b/tools/tsc-watch/tsc_watch.ts
new file mode 100644
index 000000000000..49367b3f5505
--- /dev/null
+++ b/tools/tsc-watch/tsc_watch.ts
@@ -0,0 +1,188 @@
+/**
+ * @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
+ */
+
+/* tslint:disable:no-console  */
+import {spawn} from 'child_process';
+import {platform} from 'os';
+import {normalize} from 'path';
+
+enum State {
+  idle,
+  waiting,
+  error
+}
+
+export const TSC = normalize('node_modules/.bin/tsc') + (/^win/.test(platform()) ? '.cmd' : '');
+export type Command = (stdIn: any, stdErr: any) => Promise<number>;
+
+export class TscWatch {
+  private tsconfig: string[];
+  private start: string|RegExp;
+  private error: string|RegExp;
+  private complete: string|RegExp;
+  private onStartCmds: Array<string[]|Command>;
+  private onChangeCmds: Array<string[]|Command>;
+  private state: State;
+  private triggered: Promise<number> = null;
+  private runOnce: boolean = false;
+
+  constructor({tsconfig, start, error, complete, onStartCmds = null, onChangeCmds = null}: {
+    tsconfig: string | string[],
+    error: string|RegExp,
+    start: string,
+    complete: string, onStartCmds?: Array<string[]|Command>, onChangeCmds?: Array<string[]|Command>
+  }) {
+    console.log('Watching:', tsconfig, 'in', process.cwd());
+    this.tsconfig = Array.isArray(tsconfig) ? tsconfig : [tsconfig];
+    this.start = start;
+    this.error = error;
+    this.complete = complete;
+    this.onStartCmds = onStartCmds || [];
+    this.onChangeCmds = onChangeCmds || [];
+  }
+
+  watch() {
+    const tsc =
+        Promise
+            .all(this.tsconfig.map(tsconfig => {
+              const args = [TSC, '--emitDecoratorMetadata', '--project', tsconfig];
+              if (!this.runOnce) args.push('--watch');
+              return this.runCmd(
+                  args, {}, (d) => this.consumeLine(d, false), (d) => this.consumeLine(d, true));
+            }))
+            .then(
+                exitCodes =>
+                    exitCodes.reduce((prevValue, currValue) => Math.max(prevValue, currValue), 0));
+    if (this.runOnce) {
+      tsc.then(() => this.triggerCmds(), code => process.exit(code));
+    }
+    this.state = State.waiting;
+    this.onStartCmds.forEach((cmd) => this.runCmd(cmd, null, () => null, () => null));
+  }
+
+  private runCmd(
+      argsOrCmd: string[]|Command, env?: {[k: string]: string}, stdOut = pipeStdOut,
+      stdErr = pipeStdErr): Promise<number> {
+    if (typeof argsOrCmd == 'function') {
+      return (argsOrCmd as Command)(stdErr, stdOut);
+    } else if (argsOrCmd instanceof Array) {
+      const args = argsOrCmd as Array<string>;
+      return <any>new Promise((resolve, reject) => {
+               const [cmd, ...options] = args;
+               console.log('=====>', cmd, options.join(' '));
+               const childProcess = spawn(cmd, options, {stdio: 'pipe'});
+               childProcess.stdout.on('data', stdOut);
+               childProcess.stderr.on('data', stdErr);
+               const onExit = () => childProcess.kill();
+               childProcess.on('close', (code: number) => {
+                 process.removeListener('exit', onExit);
+                 console.log('EXIT:', code, '<=====', args.join(' '));
+                 code ? reject(code) : resolve(code);
+               });
+               process.on('exit', onExit);
+             })
+          .catch(reportError);
+    } else {
+      throw new Error('Expecting function or an array of strings...');
+    }
+  }
+
+  run() {
+    this.runOnce = true;
+    this.watch();
+  }
+
+  runCmdsOnly() {
+    this.runOnce = true;
+    this.triggerCmds();
+  }
+
+  consumeLine(buffer: Buffer, isStdError: boolean) {
+    const line = '' + buffer;
+    if (contains(line, this.start)) {
+      console.log('==============================================================================');
+      stdOut(buffer, isStdError);
+      this.state = State.waiting;
+    } else if (contains(line, this.error)) {
+      stdOut(buffer, isStdError);
+      this.state = State.error;
+    } else if (contains(line, this.complete)) {
+      stdOut(buffer, isStdError);
+      console.log('------------------------------------------------------------------------------');
+      if (this.state == State.error) {
+        console.log('Errors found.... (response not triggered)');
+        if (this.runOnce) process.exit(1);
+        this.state = State.idle;
+      } else {
+        if (this.triggered) {
+          this.triggered.then(
+              () => this.triggerCmds(), (e) => console.log('Error while running commands....', e));
+        } else {
+          this.triggerCmds();
+        }
+      }
+    } else {
+      stdOut(buffer, isStdError);
+    }
+  }
+
+  triggerCmds() {
+    let cmdPromise: Promise<number> = Promise.resolve(0);
+    this.onChangeCmds.forEach(
+        (cmd: string[] | Command) => cmdPromise =
+            cmdPromise.then(() => this.runCmd(<string[]>cmd)));
+    cmdPromise.then(() => this.triggered = null, (code) => {
+      if (this.runOnce) {
+        if (typeof code != 'number') {
+          console.error('Error occurred while executing commands', code);
+          process.exit(1);
+        }
+        process.exit(code);
+      } else {
+        this.triggered = null;
+      }
+    });
+    this.triggered = cmdPromise;
+  }
+}
+
+function stdOut(data: Buffer, isStdError: boolean) {
+  if (isStdError) {
+    process.stderr.write(data);
+  } else {
+    process.stdout.write(data);
+  }
+}
+
+function contains(line: string, text: string | RegExp): boolean {
+  if (typeof text == 'string') {
+    return line.indexOf(text as string) != -1;
+  } else if (text instanceof RegExp) {
+    return (text as RegExp).test(line);
+  } else {
+    throw new Error('Unknown: ' + text);
+  }
+}
+
+export function reportError(e: any) {
+  if (e.message && e.stack) {
+    console.error(e.message);
+    console.error(e.stack);
+  } else {
+    console.error(e);
+  }
+  // process.exit(1);
+  return Promise.reject(e);
+}
+
+function pipeStdOut(d: any) {
+  process.stdout.write(d);
+}
+function pipeStdErr(d: any) {
+  process.stderr.write(d);
+}
diff --git a/tools/tsconfig.json b/tools/tsconfig.json
new file mode 100644
index 000000000000..e83d703b6b36
--- /dev/null
+++ b/tools/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/tools/",
+    "noImplicitAny": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {},
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "target": "es5",
+    "skipLibCheck": true
+  },
+  "exclude": [
+    "testing",
+    "node_modules",
+    "ts-api-guardian",
+    "typings-test",
+    "public_api_guard",
+    "docs"
+  ]
+}
\ No newline at end of file
diff --git a/tools/tsd.json b/tools/tsd.json
deleted file mode 100644
index b22b848fe368..000000000000
--- a/tools/tsd.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "version": "v4",
-  "repo": "angular/DefinitelyTyped",
-  "ref": "master",
-  "path": "typings",
-  "bundle": "typings/tsd.d.ts",
-  "installed": {
-    "fs-extra/fs-extra.d.ts": {
-      "commit": "612ac88c26d767ca586908da31a4675867d8ee16"
-    },
-    "node/node.d.ts": {
-      "commit": "d5f92f93bdb49f332fa662ff1d0cc8700f02e4dc"
-    },
-    "es6-promise/es6-promise.d.ts": {
-      "commit": "d5f92f93bdb49f332fa662ff1d0cc8700f02e4dc"
-    },
-    "jasmine/jasmine.d.ts": {
-      "commit": "5996649b8eecebbd6dd2e25a6a254de1b169a65c"
-    }
-  }
-}
diff --git a/tools/tslint/requireInternalWithUnderscoreRule.ts b/tools/tslint/requireInternalWithUnderscoreRule.ts
new file mode 100644
index 000000000000..c8e5db507be9
--- /dev/null
+++ b/tools/tslint/requireInternalWithUnderscoreRule.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 {RuleFailure} from 'tslint/lib';
+import {RuleWalker} from 'tslint/lib/language/walker';
+import {AbstractRule} from 'tslint/lib/rules';
+import * as ts from 'typescript';
+
+export class Rule extends AbstractRule {
+  public apply(sourceFile: ts.SourceFile): RuleFailure[] {
+    const typedefWalker = new TypedefWalker(sourceFile, this.getOptions());
+    return this.applyWithWalker(typedefWalker);
+  }
+}
+
+class TypedefWalker extends RuleWalker {
+  protected visitPropertyDeclaration(node: ts.PropertyDeclaration): void {
+    this.assertInternalAnnotationPresent(node);
+    super.visitPropertyDeclaration(node);
+  }
+
+  public visitMethodDeclaration(node: ts.MethodDeclaration): void {
+    this.assertInternalAnnotationPresent(node);
+    super.visitMethodDeclaration(node);
+  }
+
+  private hasInternalAnnotation(range: ts.CommentRange): boolean {
+    const text = this.getSourceFile().text;
+    const comment = text.substring(range.pos, range.end);
+    return comment.indexOf('@internal') >= 0;
+  }
+
+  private assertInternalAnnotationPresent(node: ts.NamedDeclaration) {
+    if (node.name && node.name.getText().charAt(0) !== '_') return;
+    if (ts.getCombinedModifierFlags(node) & ts.ModifierFlags.Private) return;
+
+    const ranges = ts.getLeadingCommentRanges(this.getSourceFile().text, node.pos);
+    if (ranges) {
+      for (let i = 0; i < ranges.length; i++) {
+        if (this.hasInternalAnnotation(ranges[i])) return;
+      }
+    }
+    this.addFailure(this.createFailure(
+        node.getStart(), node.getWidth(),
+        `module-private member ${node.name.getText()} must be annotated @internal`));
+  }
+}
diff --git a/tools/tslint/requireReturnTypeRule.ts b/tools/tslint/requireReturnTypeRule.ts
deleted file mode 100644
index 1c3b33fbf381..000000000000
--- a/tools/tslint/requireReturnTypeRule.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/// <reference path="../../node_modules/typescript/bin/typescriptServices.d.ts" />
-/// <reference path="../../node_modules/gulp-tslint/node_modules/tslint/lib/tslint.d.ts" />
-
-export class Rule extends Lint.Rules.AbstractRule {
-  public static FAILURE_STRING = "missing type declaration";
-
-  public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
-    const typedefWalker = new TypedefWalker(sourceFile, this.getOptions());
-    return this.applyWithWalker(typedefWalker);
-  }
-}
-
-class TypedefWalker extends Lint.RuleWalker {
-  hasReturnStatement: boolean;
-
-  public visitFunctionDeclaration(node: ts.FunctionDeclaration) {
-    this.hasReturnStatement = false;
-    super.visitFunctionDeclaration(node);
-    if (this.hasReturnStatement) {
-      this.handleCallSignature(node);
-    }
-  }
-  public visitFunctionExpression(node: ts.FunctionExpression) {
-    let orig = this.hasReturnStatement;
-    super.visitFunctionExpression(node);
-    this.hasReturnStatement = orig;
-  }
-  public visitMethodDeclaration(node: ts.MethodDeclaration) {
-    this.hasReturnStatement = false;
-    super.visitMethodDeclaration(node);
-    if (this.hasReturnStatement) {
-      this.handleCallSignature(node);
-    }
-  }
-  public visitReturnStatement(node: ts.ReturnStatement) {
-    if (node.expression) {
-      this.hasReturnStatement = true;
-    }
-    super.visitReturnStatement(node);
-  }
-
-  private handleCallSignature(node: ts.SignatureDeclaration) {
-    const location = (node.parameters != null) ? node.parameters.end : null;
-    // set accessors can't have a return type.
-    if (node.kind !== ts.SyntaxKind.SetAccessor) {
-      this.checkTypeAnnotation(location, node.type, node.name);
-    }
-  }
-
-  private checkTypeAnnotation(location: number, typeAnnotation: ts.TypeNode, name?: ts.Node) {
-    if (typeAnnotation == null) {
-      let ns = "<name missing>";
-      if (name != null && name.kind === ts.SyntaxKind.Identifier) {
-        ns = (<ts.Identifier>name).text;
-      }
-      if (ns.charAt(0) === '_') return;
-      let failure = this.createFailure(location, 1, "expected " + ns + " to have a return type");
-      this.addFailure(failure);
-    }
-  }
-}
diff --git a/tools/tslint/rollupConfigRule.ts b/tools/tslint/rollupConfigRule.ts
new file mode 100644
index 000000000000..44b508d24d6e
--- /dev/null
+++ b/tools/tslint/rollupConfigRule.ts
@@ -0,0 +1,167 @@
+/**
+ * @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 fs from 'fs';
+import * as path from 'path';
+import {RuleFailure} from 'tslint/lib';
+import {AbstractRule} from 'tslint/lib/rules';
+import * as ts from 'typescript';
+
+
+function _isRollupPath(path: string) {
+  return /rollup\.config\.js$/.test(path);
+}
+
+// Regexes to blacklist.
+const sourceFilePathBlacklist = [
+  /\.spec\.ts$/,
+  /_spec\.ts$/,
+  /_perf\.ts$/,
+  /_example\.ts$/,
+  /[/\\]test[/\\]/,
+  /[/\\]testing_internal\.ts$/,
+  /[/\\]integrationtest[/\\]/,
+  /[/\\]packages[/\\]bazel[/\\]/,
+  /[/\\]packages[/\\]benchpress[/\\]/,
+  /[/\\]packages[/\\]examples[/\\]/,
+  /[/\\]packages[/\\]elements[/\\]schematics[/\\]/,
+
+  // language-service bundles everything in its UMD, so we don't need a globals. There are
+  // exceptions but we simply ignore those files from this rule.
+  /[/\\]packages[/\\]language-service[/\\]/,
+
+  // Compiler CLI is never part of a browser (there's a browser-rollup but it's managed
+  // separately.
+  /[/\\]packages[/\\]compiler-cli[/\\]/,
+
+  // service-worker is a special package that has more than one rollup config. It confuses
+  // this lint rule and we simply ignore those files.
+  /[/\\]packages[/\\]service-worker[/\\]/,
+];
+
+// Import package name whitelist. These will be ignored.
+const importsWhitelist = [
+  '@angular/compiler-cli',                        // Not used in a browser.
+  '@angular/compiler-cli/src/language_services',  // Deep import from language-service.
+  'chokidar',  // Not part of compiler-cli/browser, but still imported.
+  'reflect-metadata',
+  'tsickle',
+  'url',  // Part of node, no need to alias in rollup.
+  'zone.js',
+];
+
+const packageScopedImportWhitelist: [RegExp, string[]][] = [
+  [/service-worker[/\\]cli/, ['@angular/service-worker']],
+];
+
+
+// Return true if the file should be linted.
+function _pathShouldBeLinted(path: string) {
+  return /[/\\]packages[/\\]/.test(path) && sourceFilePathBlacklist.every(re => !re.test(path));
+}
+
+
+/**
+ *                  .--.         _________________
+ *  {\             / q {\      / globalGlobalMap /
+ *  { `\           \ (-(~`   <__________________/
+ * { '.{`\          \ \ )
+ * {'-{ ' \  .-""'-. \ \
+ * {._{'.' \/       '.) \
+ * {_.{.   {`            |
+ * {._{ ' {   ;'-=-.     |
+ *  {-.{.' {  ';-=-.`    /
+ *   {._.{.;    '-=-   .'
+ *    {_.-' `'.__  _,-'
+ *             |||`
+ *            .='==,
+ */
+interface RollupMatchInfo {
+  filePath: string;
+  globals: {[packageName: string]: string};
+}
+const globalGlobalRollupMap = new Map<string, RollupMatchInfo>();
+
+
+export class Rule extends AbstractRule {
+  public apply(sourceFile: ts.SourceFile): RuleFailure[] {
+    const allImports = <ts.ImportDeclaration[]>sourceFile.statements.filter(
+        x => x.kind === ts.SyntaxKind.ImportDeclaration);
+
+    // Ignore specs, non-package files, and examples.
+    if (!_pathShouldBeLinted(sourceFile.fileName)) {
+      return [];
+    }
+
+    // Find the rollup.config.js from this location, if it exists.
+    // If rollup cannot be found, this is an error.
+    let p = path.dirname(sourceFile.fileName);
+    let checkedPaths = [];
+    let match: RollupMatchInfo;
+
+    while (p.startsWith(process.cwd())) {
+      if (globalGlobalRollupMap.has(p)) {
+        // We already resolved for this directory, just return it.
+        match = globalGlobalRollupMap.get(p);
+        break;
+      }
+
+      const allFiles = fs.readdirSync(p);
+      const maybeRollupPath = allFiles.find(x => _isRollupPath(path.join(p, x)));
+      if (maybeRollupPath) {
+        const rollupFilePath = path.join(p, maybeRollupPath);
+        const rollupConfig = require(rollupFilePath);
+        match = {filePath: rollupFilePath, globals: rollupConfig && rollupConfig.globals};
+
+        // Update all paths that we checked along the way.
+        checkedPaths.forEach(path => globalGlobalRollupMap.set(path, match));
+        globalGlobalRollupMap.set(rollupFilePath, match);
+        break;
+      }
+
+      checkedPaths.push(p);
+      p = path.dirname(p);
+    }
+    if (!match) {
+      throw new Error(
+          `Could not find rollup.config.js for ${JSON.stringify(sourceFile.fileName)}.`);
+    }
+
+    const rollupFilePath = match.filePath;
+    const globalConfig = match.globals || Object.create(null);
+
+    return allImports
+        .map(importStatement => {
+          const modulePath = (importStatement.moduleSpecifier as ts.StringLiteral).text;
+          if (modulePath.startsWith('.')) {
+            return null;
+          }
+
+          if (importsWhitelist.indexOf(modulePath) != -1) {
+            return null;
+          }
+
+          for (const [re, arr] of packageScopedImportWhitelist) {
+            if (re.test(sourceFile.fileName) && arr.indexOf(modulePath) != -1) {
+              return null;
+            }
+          }
+
+          if (!(modulePath in globalConfig)) {
+            return new RuleFailure(
+                sourceFile, importStatement.getStart(), importStatement.getWidth(),
+                `Import ${JSON.stringify(modulePath)} could not be found in the rollup config ` +
+                    `at path ${JSON.stringify(rollupFilePath)}.`,
+                this.ruleName, );
+          }
+
+          return null;
+        })
+        .filter(x => !!x);
+  }
+}
diff --git a/tools/types-ext/jasminewd2.d.ts b/tools/types-ext/jasminewd2.d.ts
new file mode 100644
index 000000000000..3f87bc26ae88
--- /dev/null
+++ b/tools/types-ext/jasminewd2.d.ts
@@ -0,0 +1,30 @@
+/**
+ * @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
+ */
+
+/// <reference types="jasminewd2" />
+
+/**
+ * Extended typings for `jasminewd2`.
+ *
+ * The currently used `jasminewd2` version (v2.1.0), supports passing a `done` callback to a spec,
+ * but the latest typings on [DefinitelyTyped][1] do not reflect that.
+ * Overwrite the relevant function signatures to add a `done` callback.
+ *
+ * [1]:
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/566e0394859fdc1dc893658ccec6b06372d56a91/types/jasminewd2/index.d.ts#L9-L15
+ */
+declare function it(
+    expectation: string, assertion?: (done: DoneFn) => Promise<void>, timeout?: number): void;
+    declare function fit(
+        expectation: string, assertion?: (done: DoneFn) => Promise<void>, timeout?: number): void;
+    declare function xit(
+        expectation: string, assertion?: (done: DoneFn) => Promise<void>, timeout?: number): void;
+    declare function beforeEach(action: (done: DoneFn) => Promise<void>, timeout?: number): void;
+    declare function afterEach(action: (done: DoneFn) => Promise<void>, timeout?: number): void;
+    declare function beforeAll(action: (done: DoneFn) => Promise<void>, timeout?: number): void;
+    declare function afterAll(action: (done: DoneFn) => Promise<void>, timeout?: number): void;
diff --git a/tools/types.d.ts b/tools/types.d.ts
new file mode 100644
index 000000000000..ab3d9db3182b
--- /dev/null
+++ b/tools/types.d.ts
@@ -0,0 +1,5 @@
+// This file contains all ambient imports needed to compile the tools source code
+
+/// <reference types="jasmine" />
+/// <reference types="node" />
+/// <reference types="zone.js" />
diff --git a/tools/validate-commit-message/BUILD.bazel b/tools/validate-commit-message/BUILD.bazel
new file mode 100644
index 000000000000..06b1402f4313
--- /dev/null
+++ b/tools/validate-commit-message/BUILD.bazel
@@ -0,0 +1,10 @@
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+jasmine_node_test(
+    name = "validate-commit-message",
+    srcs = glob(["*.js"]),
+    data = [
+        "commit-message.json",
+        "spec/support/jasmine.json",
+    ],
+)
diff --git a/tools/validate-commit-message/commit-message.json b/tools/validate-commit-message/commit-message.json
new file mode 100644
index 000000000000..089fc4bff9d9
--- /dev/null
+++ b/tools/validate-commit-message/commit-message.json
@@ -0,0 +1,41 @@
+{
+  "maxLength": 120,
+  "types": [
+    "build",
+    "ci",
+    "docs",
+    "feat",
+    "fix",
+    "perf",
+    "refactor",
+    "release",
+    "style",
+    "test"
+  ],
+  "scopes": [
+    "aio",
+    "animations",
+    "bazel",
+    "benchpress",
+    "common",
+    "compiler",
+    "compiler-cli",
+    "core",
+    "docs-infra",
+    "elements",
+    "forms",
+    "http",
+    "ivy",
+    "language-service",
+    "platform-browser",
+    "platform-browser-dynamic",
+    "platform-server",
+    "platform-webworker",
+    "platform-webworker-dynamic",
+    "router",
+    "service-worker",
+    "upgrade",
+    "packaging",
+    "changelog"
+  ]
+}
diff --git a/tools/validate-commit-message/index.js b/tools/validate-commit-message/index.js
new file mode 100644
index 000000000000..6e45729380a0
--- /dev/null
+++ b/tools/validate-commit-message/index.js
@@ -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
+ */
+
+module.exports = require('./validate-commit-message');
\ No newline at end of file
diff --git a/tools/validate-commit-message/spec/support/jasmine.json b/tools/validate-commit-message/spec/support/jasmine.json
new file mode 100644
index 000000000000..31a39bc6a2af
--- /dev/null
+++ b/tools/validate-commit-message/spec/support/jasmine.json
@@ -0,0 +1,11 @@
+{
+  "spec_dir": "",
+  "spec_files": [
+    "**/*[sS]pec.js"
+  ],
+  "helpers": [
+    "helpers/**/*.js"
+  ],
+  "stopSpecOnExpectationFailure": false,
+  "random": false
+}
diff --git a/tools/validate-commit-message/validate-commit-message.js b/tools/validate-commit-message/validate-commit-message.js
new file mode 100644
index 000000000000..d83b00d07659
--- /dev/null
+++ b/tools/validate-commit-message/validate-commit-message.js
@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+
+/**
+ * @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
+ */
+
+/**
+ * GIT commit message format enforcement
+ *
+ * Note: this script was originally written by Vojta for AngularJS :-)
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const configPath = path.resolve(__dirname, './commit-message.json');
+const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+const PATTERN = /^(\w+)(?:\(([^)]+)\))?\: (.+)$/;
+const FIXUP_SQUASH = /^(fixup|squash)\! /i;
+const REVERT = /^revert:? /i;
+
+module.exports = function(commitSubject) {
+  const subject = commitSubject.replace(FIXUP_SQUASH, '');
+
+  if (subject.match(REVERT)) {
+    return true;
+  }
+
+  if (subject.length > config['maxLength']) {
+    error(`The commit message is longer than ${config['maxLength']} characters`, commitSubject);
+    return false;
+  }
+
+  const match = PATTERN.exec(subject);
+  if (!match) {
+    error(
+        `The commit message does not match the format of '<type>(<scope>): <subject>' OR 'Revert: "type(<scope>): <subject>"'`,
+        commitSubject);
+    return false;
+  }
+
+  const type = match[1];
+  if (config['types'].indexOf(type) === -1) {
+    error(
+        `${type} is not an allowed type.\n => TYPES: ${config['types'].join(', ')}`, commitSubject);
+    return false;
+  }
+
+  const scope = match[2];
+
+  if (scope && !config['scopes'].includes(scope)) {
+    error(
+        `"${scope}" is not an allowed scope.\n => SCOPES: ${config['scopes'].join(', ')}`,
+        commitSubject);
+    return false;
+  }
+
+  return true;
+};
+
+function error(errorMessage, commitMessage) {
+  console.error(`INVALID COMMIT MSG: "${commitMessage}"\n => ERROR: ${errorMessage}`);
+}
+
+module.exports.config = config;
diff --git a/tools/validate-commit-message/validate-commit-message.spec.js b/tools/validate-commit-message/validate-commit-message.spec.js
new file mode 100644
index 000000000000..c9d048d7bd8b
--- /dev/null
+++ b/tools/validate-commit-message/validate-commit-message.spec.js
@@ -0,0 +1,139 @@
+/**
+ * @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
+ */
+
+describe('validate-commit-message.js', function() {
+  var validateMessage = require('./validate-commit-message');
+  var SCOPES = validateMessage.config.scopes.join(', ');
+  var TYPES = validateMessage.config.types.join(', ');
+  var errors = [];
+  var logs = [];
+
+  var VALID = true;
+  var INVALID = false;
+
+  beforeEach(function() {
+    errors.length = 0;
+    logs.length = 0;
+
+    spyOn(console, 'error').and.callFake(function(msg) {
+      errors.push(msg.replace(/\x1B\[\d+m/g, ''));  // uncolor
+    });
+
+    spyOn(console, 'log').and.callFake(function(msg) {
+      logs.push(msg.replace(/\x1B\[\d+m/g, ''));  // uncolor
+    });
+  });
+
+  describe('validateMessage', function() {
+
+    it('should be valid', function() {
+      expect(validateMessage('fix(core): something')).toBe(VALID);
+      expect(validateMessage('feat(common): something')).toBe(VALID);
+      expect(validateMessage('docs(compiler): something')).toBe(VALID);
+      expect(validateMessage('style(http): something')).toBe(VALID);
+      expect(validateMessage('refactor(platform-webworker): something')).toBe(VALID);
+      expect(validateMessage('test(language-service): something')).toBe(VALID);
+      expect(validateMessage('test(packaging): something')).toBe(VALID);
+      expect(validateMessage('release: something')).toBe(VALID);
+      expect(validateMessage('release(packaging): something')).toBe(VALID);
+      expect(validateMessage('release(packaging): something')).toBe(VALID);
+      expect(validateMessage('fixup! release(packaging): something')).toBe(VALID);
+      expect(validateMessage('squash! release(packaging): something')).toBe(VALID);
+      expect(validateMessage('Revert: "release(packaging): something"')).toBe(VALID);
+      expect(validateMessage('Revert "release(packaging): something"')).toBe(VALID);
+      expect(errors).toEqual([]);
+    });
+
+    it('should fail when scope is invalid', function() {
+      expect(validateMessage('fix(Compiler): something')).toBe(INVALID);
+      expect(validateMessage('feat(bah): something')).toBe(INVALID);
+      expect(validateMessage('style(webworker): something')).toBe(INVALID);
+      expect(validateMessage('refactor(security): something')).toBe(INVALID);
+      expect(validateMessage('refactor(docs): something')).toBe(INVALID);
+      ['INVALID COMMIT MSG: "fix(Compiler): something"\n' +
+           ' => ERROR: "Compiler" is not an allowed scope.\n' +
+           ' => SCOPES: ' + SCOPES,
+       'INVALID COMMIT MSG: "feat(bah): something"\n' +
+           ' => ERROR: "bah" is not an allowed scope.\n' +
+           ' => SCOPES: ' + SCOPES,
+       'INVALID COMMIT MSG: "style(webworker): something"\n' +
+           ' => ERROR: "webworker" is not an allowed scope.\n' +
+           ' => SCOPES: ' + SCOPES,
+       'INVALID COMMIT MSG: "refactor(security): something"\n' +
+           ' => ERROR: "security" is not an allowed scope.\n' +
+           ' => SCOPES: ' + SCOPES,
+       'INVALID COMMIT MSG: "refactor(docs): something"\n' +
+           ' => ERROR: "docs" is not an allowed scope.\n' +
+           ' => SCOPES: ' + SCOPES,
+      ].forEach((expectedErrorMessage, index) => {
+        expect(expectedErrorMessage).toEqual(errors[index]);
+      });
+      expect(validateMessage('release(angular): something')).toBe(INVALID);
+    });
+
+
+    it('should validate 100 characters length', function() {
+      var msg =
+          'fix(compiler): something super mega extra giga tera long, maybe even longer and longer and longer and longer and longer and longer... ';
+
+      expect(validateMessage(msg)).toBe(INVALID);
+      expect(errors).toEqual([
+        'INVALID COMMIT MSG: "fix(compiler): something super mega extra giga tera long, maybe even longer and longer and longer and longer and longer and longer... "\n => ERROR: The commit message is longer than 120 characters'
+      ]);
+    });
+
+
+    it('should validate "<type>(<scope>): <subject>" format', function() {
+      var msg = 'not correct format';
+
+      expect(validateMessage(msg)).toBe(INVALID);
+      expect(errors).toEqual([
+        'INVALID COMMIT MSG: "not correct format"\n => ERROR: The commit message does not match the format of \'<type>(<scope>): <subject>\' OR \'Revert: "type(<scope>): <subject>"\''
+      ]);
+    });
+
+
+    it('should support "revert: type(scope):" syntax', function() {
+      const correctMsg = 'revert: fix(compiler): reduce generated code payload size by 65%';
+      expect(validateMessage(correctMsg)).toBe(VALID);
+    });
+
+    it('should support reject "revert(scope):" syntax', function() {
+      const incorretMsg = 'revert(compiler): reduce generated code payload size by 65%';
+      expect(validateMessage(incorretMsg)).toBe(INVALID);
+      expect(errors).toEqual(
+          ['INVALID COMMIT MSG: "revert(compiler): reduce generated code payload size by 65%"\n' +
+           ' => ERROR: revert is not an allowed type.\n' +
+           ' => TYPES: ' + TYPES]);
+    });
+
+    // https://github.com/angular/angular/issues/23479
+    it('should support typical Angular messages generated by git', function() {
+      const correctMsg =
+          'Revert "fix(compiler): Pretty print object instead of [Object object] (#22689)" (#23442)';
+      expect(validateMessage(correctMsg)).toBe(VALID);
+    });
+
+    it('should validate type', function() {
+      expect(validateMessage('weird($filter): something')).toBe(INVALID);
+      expect(errors).toEqual(
+          ['INVALID COMMIT MSG: "weird($filter): something"\n' +
+           ' => ERROR: weird is not an allowed type.\n' +
+           ' => TYPES: ' + TYPES]);
+    });
+
+
+    it('should allow empty scope',
+       function() { expect(validateMessage('fix: blablabla')).toBe(VALID); });
+
+    // we don't want to allow WIP. it's ok to fail the PR build in this case to show that there is
+    // work still to be done.
+    it('should not ignore msg prefixed with "WIP: "',
+       function() { expect(validateMessage('WIP: bullshit')).toBe(INVALID); });
+  });
+});
diff --git a/tools/yarn/check-yarn.js b/tools/yarn/check-yarn.js
new file mode 100644
index 000000000000..2e7d66ef63c4
--- /dev/null
+++ b/tools/yarn/check-yarn.js
@@ -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
+ */
+
+'use strict';
+
+if (process.env.npm_execpath.indexOf('yarn') === -1) {
+  throw new Error(
+      'Please use Yarn instead of NPM to install dependencies. See: https://yarnpkg.com/lang/en/docs/install/');
+}
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index 28f520ca1fc9..000000000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-    "version": "1.5.0",
-    "compilerOptions": {
-        "target": "es5",
-        "module": "commonjs",
-        "declaration": false,
-        "noImplicitAny": false,
-        "removeComments": true,
-        "noLib": false,
-        "outDir": "dist/js/cjs"
-    },
-    "filesGlob": [
-        "./src/**/*.ts",
-        "./tools/**/*.ts",
-        "!./node_modules/**",
-        "!./modules_dart/**",
-        "!./packages/**",
-        "!./dist/**",
-        "!./temp/**"
-    ]
-}
diff --git a/tslint.json b/tslint.json
new file mode 100644
index 000000000000..abf86880927c
--- /dev/null
+++ b/tslint.json
@@ -0,0 +1,31 @@
+{
+  "rulesDirectory": [
+    "dist/tools/tslint",
+    "node_modules/vrsource-tslint-rules/rules",
+    "node_modules/tslint-eslint-rules/dist/rules"
+  ],
+  "rules": {
+    "file-header": [true, "Copyright Google Inc\\."],
+    "no-console": [true, "log"],
+    "no-duplicate-imports": true,
+    "no-duplicate-variable": true,
+    "no-jasmine-focus": true,
+    "no-var-keyword": true,
+    "require-internal-with-underscore": true,
+    "rollup-config": true,
+    "semicolon": [true],
+    "variable-name": [true, "ban-keywords"],
+    "no-inner-declarations": [true, "function"]
+  },
+  "jsRules": {
+    "file-header": [true, "Copyright Google Inc\\."],
+    "no-console": [true, "log"],
+    "no-duplicate-imports": true,
+    "no-duplicate-variable": true,
+    "no-jasmine-focus": true,
+    "require-internal-with-underscore": true,
+    "semicolon": [true],
+    "variable-name": [true, "ban-keywords"],
+    "no-inner-declarations": [true, "function"]
+  }
+}
diff --git a/typing_spec/basic_spec.ts b/typing_spec/basic_spec.ts
deleted file mode 100644
index 4c8dad7ed44e..000000000000
--- a/typing_spec/basic_spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-///<reference path="../dist/docs/typings/angular2/angular2.d.ts"/>
-
-import {Component, bootstrap, View} from 'angular2/angular2'
-
-@Component({
-  selector: 'my-app'
-})
-@View({
-	template: '<h1>Hello {{ name }}</h1>'
-})
-// Component controller
-class MyAppComponent {
-  name: string;
-
-  constructor() { this.name = 'Alice'; }
-}
-
-bootstrap(MyAppComponent);
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000000..6a2fdc8d53cb
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,7702 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular-devkit/core@0.5.13":
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-0.5.13.tgz#c48c83c1bf38917e6af3f399d221d29466be9677"
+  dependencies:
+    ajv "~6.4.0"
+    chokidar "^2.0.3"
+    rxjs "^6.0.0"
+    source-map "^0.5.6"
+
+"@angular-devkit/schematics@0.5.13", "@angular-devkit/schematics@^0.5.5":
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-0.5.13.tgz#be90657c668cddae4054645a61d4cf852de51ede"
+  dependencies:
+    "@angular-devkit/core" "0.5.13"
+    rxjs "^6.0.0"
+
+"@bazel/ibazel@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@bazel/ibazel/-/ibazel-0.1.1.tgz#f970c08b4e4efb0ab17e04ade3cc610554f33bed"
+
+"@schematics/angular@^0.5.4":
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-0.5.13.tgz#e93e249f3903c8465e476c0d0a87668f0d5354bd"
+  dependencies:
+    "@angular-devkit/core" "0.5.13"
+    "@angular-devkit/schematics" "0.5.13"
+    typescript ">=2.6.2 <2.8"
+
+"@types/angular@^1.6.47":
+  version "1.6.48"
+  resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.48.tgz#e8f77bf41d00d3293421cbaaed2bafb4d5f399f9"
+
+"@types/base64-js@1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@types/base64-js/-/base64-js-1.2.5.tgz#582b2476169a6cba460a214d476c744441d873d5"
+
+"@types/chai@^4.1.2":
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.4.tgz#5ca073b330d90b4066d6ce18f60d57f2084ce8ca"
+
+"@types/chokidar@1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@types/chokidar/-/chokidar-1.7.3.tgz#ca87a53aa596c01eb93237ab4055edf71dcb9ca6"
+  dependencies:
+    "@types/node" "*"
+
+"@types/convert-source-map@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@types/convert-source-map/-/convert-source-map-1.5.1.tgz#d4d180dd6adc5cb68ad99bd56e03d637881f4616"
+
+"@types/diff@^3.2.2":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@types/diff/-/diff-3.5.1.tgz#30253f6e177564ad7da707b1ebe46d3eade71706"
+
+"@types/events@*":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/events/-/events-1.2.0.tgz#81a6731ce4df43619e5c8c945383b3e62a89ea86"
+
+"@types/fs-extra@4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-4.0.2.tgz#7b9b1bbf85962cbe029b5a83c9b530d7c75af3ba"
+  dependencies:
+    "@types/node" "*"
+
+"@types/glob@*":
+  version "5.0.35"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-5.0.35.tgz#1ae151c802cece940443b5ac246925c85189f32a"
+  dependencies:
+    "@types/events" "*"
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
+"@types/hammerjs@2.0.35":
+  version "2.0.35"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.35.tgz#7b7c950c7d54593e23bffc8d2b4feba9866a7277"
+
+"@types/jasmine@*", "@types/jasmine@^2.8.8":
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.8.tgz#bf53a7d193ea8b03867a38bfdb4fbb0e0bf066c9"
+
+"@types/jasminewd2@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/jasminewd2/-/jasminewd2-2.0.3.tgz#0d2886b0cbdae4c0eeba55e30792f584bf040a95"
+  dependencies:
+    "@types/jasmine" "*"
+
+"@types/minimatch@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
+
+"@types/minimist@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
+
+"@types/mock-fs@^3.6.30":
+  version "3.6.30"
+  resolved "https://registry.yarnpkg.com/@types/mock-fs/-/mock-fs-3.6.30.tgz#4d812541e87b23577261a5aa95f704dd3d01e410"
+  dependencies:
+    "@types/node" "*"
+
+"@types/node@*":
+  version "10.5.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.5.2.tgz#f19f05314d5421fe37e74153254201a7bf00a707"
+
+"@types/node@6.0.88":
+  version "6.0.88"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.88.tgz#f618f11a944f6a18d92b5c472028728a3e3d4b66"
+
+"@types/node@^6.0.46":
+  version "6.0.114"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.114.tgz#c42cd56479f32bc1576a5cb19f8a208da9a2b052"
+
+"@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@3.0.7":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-3.0.7.tgz#5d3613d1ab3ca08b74d19683a3a7c573129ab18f"
+
+"@types/selenium-webdriver@^2.53.35", "@types/selenium-webdriver@~2.53.39":
+  version "2.53.43"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz#2de3d718819bc20165754c4a59afb7e9833f6707"
+
+"@types/shelljs@^0.7.8":
+  version "0.7.9"
+  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.7.9.tgz#3abecb72d9cad9cd4b0e7cb86ed10a97d93ba602"
+  dependencies:
+    "@types/glob" "*"
+    "@types/node" "*"
+
+"@types/source-map@^0.5.1":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@types/source-map/-/source-map-0.5.7.tgz#165eeb583c1ef00196fe4ef4da5d7832b03b275b"
+  dependencies:
+    source-map "*"
+
+"@types/systemjs@0.19.32":
+  version "0.19.32"
+  resolved "https://registry.yarnpkg.com/@types/systemjs/-/systemjs-0.19.32.tgz#e9204c4cdbc8e275d645c00e6150e68fc5615a24"
+
+"@webcomponents/custom-elements@^1.0.4":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@webcomponents/custom-elements/-/custom-elements-1.1.2.tgz#041e4c20df35245f4d160b50d044b8cff192962c"
+
+Base64@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/Base64/-/Base64-0.2.1.tgz#ba3a4230708e186705065e66babdd4c35cf60028"
+
+JSONStream@^1.0.4:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.3.tgz#27b4b8fbbfeab4e71bcf551e7f27be8d952239bf"
+  dependencies:
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+accepts@~1.2.12, accepts@~1.2.13:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.2.13.tgz#e5f1f3928c6d95fd96558c36ec3d9d0de4a6ecea"
+  dependencies:
+    mime-types "~2.1.6"
+    negotiator "0.5.3"
+
+accepts@~1.3.0, accepts@~1.3.4:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
+  dependencies:
+    mime-types "~2.1.18"
+    negotiator "0.6.1"
+
+acorn@^1.0.3:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-1.2.2.tgz#c8ce27de0acc76d896d2b1fad3df588d9e82f014"
+
+acorn@^4.0.1:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+acorn@^5.2.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
+
+add-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
+
+addressparser@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/addressparser/-/addressparser-1.0.1.tgz#47afbe1a2a9262191db6838e4fd1d39b40821746"
+
+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.9, adm-zip@~0.4.3, adm-zip@~0.4.x:
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.11.tgz#2aa54c84c4b01a9d0fb89bb11982a51f13e3d62a"
+
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+
+agent-base@2:
+  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"
+
+agent-base@4, agent-base@^4.1.0, agent-base@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
+  dependencies:
+    es6-promisify "^5.0.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.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+ajv@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.4.0.tgz#d3aff78e9277549771daf0164cff48482b754fc6"
+  dependencies:
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+    uri-js "^3.0.2"
+
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+amdetective@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/amdetective/-/amdetective-0.0.2.tgz#260777ab35a6b9ba6edd1b8d7280d3a8ef4859b0"
+  dependencies:
+    esprima "~1.2.2"
+
+amqplib@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/amqplib/-/amqplib-0.5.2.tgz#d2d7313c7ffaa4d10bcf1e6252de4591b6cc7b63"
+  dependencies:
+    bitsyntax "~0.0.4"
+    bluebird "^3.4.6"
+    buffer-more-ints "0.0.2"
+    readable-stream "1.x >=1.1.9"
+    safe-buffer "^5.0.1"
+
+"angular-1.5@npm:angular@1.5":
+  version "1.5.11"
+  resolved "https://registry.yarnpkg.com/angular/-/angular-1.5.11.tgz#8c5ba7386f15965c9acf3429f6881553aada30d6"
+
+"angular-1.6@npm:angular@1.6":
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/angular/-/angular-1.6.10.tgz#eed3080a34d29d0f681ff119b18ce294e3f74826"
+
+"angular-mocks-1.5@npm:angular-mocks@1.5":
+  version "1.5.11"
+  resolved "https://registry.yarnpkg.com/angular-mocks/-/angular-mocks-1.5.11.tgz#a0e1dd0ea55fd77ee7a757d75536c5e964c86f81"
+
+"angular-mocks-1.6@npm:angular-mocks@1.6":
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/angular-mocks/-/angular-mocks-1.6.10.tgz#6a139e43c461d0c9a5a1acebc91e63db16031176"
+
+"angular-mocks@npm:angular-mocks@1.7":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/angular-mocks/-/angular-mocks-1.7.2.tgz#8a2bc7a7ce355697a48ab00e548b88e78f71fa52"
+
+"angular@npm:angular@1.7":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/angular/-/angular-1.7.2.tgz#687b955dbe5c533f8d73460461707af00360251f"
+
+ansi-gray@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-regex@^2.0.0, ansi-regex@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+ansi-wrap@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+
+any-promise@^1.0.0, any-promise@^1.1.0, any-promise@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+
+any-promise@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27"
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+archiver-utils@^1.0.0, 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@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-2.1.1.tgz#ff662b4a78201494a3ee544d3a33fe7496509ebc"
+  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"
+    zip-stream "^1.2.0"
+
+archiver@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-1.0.1.tgz#aaffd0fda3e03c77ee45169a781b4d9be5f3f25f"
+  dependencies:
+    archiver-utils "^1.0.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"
+    zip-stream "^1.0.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"
+
+archy@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+
+arr-flatten@^1.0.1, arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+
+array-differ@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031"
+
+array-each@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-each/-/array-each-1.0.1.tgz#a794af0c05ab1752846ee753a1f211a05ba0c44f"
+
+array-filter@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+array-ify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
+
+array-map@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
+
+array-reduce@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+
+array-slice@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
+
+array-slice@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-1.1.0.tgz#e368ea15f89bc7069f7ffb89aec3a6c7d4ac22d4"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1, array-uniq@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+
+arrify@^1.0.0, arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+ascli@~1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ascli/-/ascli-1.0.1.tgz#bcfa5974a62f18e81cabaeb49732ab4a88f906bc"
+  dependencies:
+    colour "~0.7.1"
+    optjs "~3.2.2"
+
+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@^1.1.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+
+ast-types@0.9.6:
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
+
+ast-types@0.x.x:
+  version "0.11.5"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.5.tgz#9890825d660c03c28339f315e9fa0a360e31ec28"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
+async@1.2.x:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.2.1.tgz#a4816a17cd5ff516dfa2c7698a453369b9790de0"
+
+async@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.0.1.tgz#b709cc0280a9c36f09f4536be823c838a9049e25"
+  dependencies:
+    lodash "^4.8.0"
+
+async@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@^1.3.0, async@^1.4.0, async@^1.5.2, async@~1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+async@^2.0.0, async@^2.0.1, async@^2.1.2, async@~2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
+  dependencies:
+    lodash "^4.17.10"
+
+async@~0.2.6:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
+async@~2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.4.1.tgz#62a56b279c98a11d0987096a01cc3eeb8eb7bbd7"
+  dependencies:
+    lodash "^4.14.0"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+atob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289"
+
+axios@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.15.3.tgz#2c9d638b2e191a08ea1d6cc988eadd6ba5bdc053"
+  dependencies:
+    follow-redirects "1.0.0"
+
+babel-code-frame@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-polyfill@6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.16.0.tgz#2d45021df87e26a374b6d4d1a9c65964d17f2422"
+  dependencies:
+    babel-runtime "^6.9.1"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.9.5"
+
+babel-runtime@^6.9.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base62@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/base62/-/base62-0.1.1.tgz#7b4174c2f94449753b11c2651c083da841a7b084"
+
+base64-arraybuffer@0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+
+base64-js@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+base64-js@^1.0.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
+
+base64-url@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/base64-url/-/base64-url-1.2.1.tgz#199fd661702a0e7b7dcae6e0698bb089c52f6d78"
+
+base64id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+basic-auth-connect@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz#fdb0b43962ca7b40456a7c2bb48fe173da2d2122"
+
+basic-auth@~1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-1.0.4.tgz#030935b01de7c9b94a824b29f3fccb750d3a5290"
+
+batch@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+beeper@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+big.js@^3.1.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+
+binary-extensions@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+
+"binary@>= 0.3.0 < 1", binary@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/binary/-/binary-0.3.0.tgz#9f60553bc5ce8c3386f3b553cff47462adecaa79"
+  dependencies:
+    buffers "~0.1.1"
+    chainsaw "~0.1.0"
+
+bitsyntax@~0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/bitsyntax/-/bitsyntax-0.0.4.tgz#eb10cc6f82b8c490e3e85698f07e83d46e0cba82"
+  dependencies:
+    buffer-more-ints "0.0.2"
+
+bl@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.2.tgz#a160911717103c07410cef63ef51b397c025af9c"
+  dependencies:
+    readable-stream "^2.3.5"
+    safe-buffer "^5.1.1"
+
+bl@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.1.2.tgz#fdca871a99713aa00d19e3bbba41c44787a65398"
+  dependencies:
+    readable-stream "~2.0.5"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  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.6:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+
+body-parser@^1.16.1:
+  version "1.18.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.3.tgz#5b292198ffdd553b3a0f20ded0592b956955c8b4"
+  dependencies:
+    bytes "3.0.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "~1.6.3"
+    iconv-lite "0.4.23"
+    on-finished "~2.3.0"
+    qs "6.5.2"
+    raw-body "2.3.3"
+    type-is "~1.6.16"
+
+body-parser@~1.13.3:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.13.3.tgz#c08cf330c3358e151016a05746f13f029c97fa97"
+  dependencies:
+    bytes "2.1.0"
+    content-type "~1.0.1"
+    debug "~2.2.0"
+    depd "~1.0.1"
+    http-errors "~1.3.1"
+    iconv-lite "0.4.11"
+    on-finished "~2.3.0"
+    qs "4.0.0"
+    raw-body "~2.1.2"
+    type-is "~1.6.6"
+
+body-parser@~1.14.0:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.14.2.tgz#1015cb1fe2c443858259581db53332f8d0cf50f9"
+  dependencies:
+    bytes "2.2.0"
+    content-type "~1.0.1"
+    debug "~2.2.0"
+    depd "~1.1.0"
+    http-errors "~1.3.1"
+    iconv-lite "0.4.13"
+    on-finished "~2.3.0"
+    qs "5.2.0"
+    raw-body "~2.1.5"
+    type-is "~1.6.10"
+
+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"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+bower@1.8.2:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/bower/-/bower-1.8.2.tgz#adf53529c8d4af02ef24fb8d5341c1419d33e2f7"
+
+brace-expansion@^1.0.0, brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^0.1.2:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-0.1.5.tgz#c085711085291d8b75fdd74eab0f8597280711e6"
+  dependencies:
+    expand-range "^0.1.0"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+braces@^2.3.0, braces@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+browser-resolve@^1.11.0:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-zlib@~0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserstack@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/browserstack/-/browserstack-1.5.0.tgz#b565425ad62ed72c1082a1eb979d5313c7d4754f"
+  dependencies:
+    https-proxy-agent "1.0.0"
+
+browserstacktunnel-wrapper@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/browserstacktunnel-wrapper/-/browserstacktunnel-wrapper-2.0.1.tgz#ffe1910d6e39fe86618183e826690041af53edae"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+    unzip "~0.1.9"
+
+browserstacktunnel-wrapper@~2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/browserstacktunnel-wrapper/-/browserstacktunnel-wrapper-2.0.2.tgz#3d11159c18cd202b2920b09830fbe4bd90f079b5"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+    unzip "~0.1.9"
+
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+
+buffer-alloc@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  dependencies:
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
+
+buffer-crc32@^0.2.1:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+
+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-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+
+buffer-from@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.0.tgz#87fcaa3a298358e0ade6e442cfce840740d1ad04"
+
+buffer-more-ints@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/buffer-more-ints/-/buffer-more-ints-0.0.2.tgz#26b3885d10fa13db7fc01aae3aab870199e0124c"
+
+buffer@^4.9.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+buffers@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/buffers/-/buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb"
+
+buildmail@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/buildmail/-/buildmail-4.0.1.tgz#877f7738b78729871c9a105e3b837d2be11a7a72"
+  dependencies:
+    addressparser "1.0.1"
+    libbase64 "0.1.0"
+    libmime "3.0.0"
+    libqp "1.1.0"
+    nodemailer-fetch "1.6.0"
+    nodemailer-shared "1.1.0"
+    punycode "1.4.1"
+
+builtin-modules@^1.0.0, builtin-modules@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+bytebuffer@~5:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/bytebuffer/-/bytebuffer-5.0.1.tgz#582eea4b1a873b6d020a48d58df85f0bba6cfddd"
+  dependencies:
+    long "~3"
+
+bytes@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.1.0.tgz#ac93c410e2ffc9cc7cf4b464b38289067f5e47b4"
+
+bytes@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.2.0.tgz#fd35464a403f6f9117c2de3609ecff9cae000588"
+
+bytes@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase-keys@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77"
+  dependencies:
+    camelcase "^4.1.0"
+    map-obj "^2.0.0"
+    quick-lru "^1.0.0"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^2.0.0, camelcase@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
+canonical-path@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/canonical-path/-/canonical-path-0.0.2.tgz#e31eb937a8c93ee2a01df1839794721902874574"
+
+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"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+"chainsaw@>=0.0.7 <0.1":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/chainsaw/-/chainsaw-0.0.9.tgz#11a05102d1c4c785b6d0415d336d5a3a1612913e"
+  dependencies:
+    traverse ">=0.3.0 <0.4"
+
+chainsaw@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/chainsaw/-/chainsaw-0.1.0.tgz#5eab50b28afe58074d0d58291388828b5e5fbc98"
+  dependencies:
+    traverse ">=0.3.0 <0.4"
+
+chalk@^1.0.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"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chokidar@1.7.0, chokidar@^1.0.0:
+  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"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+chokidar@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.0"
+    braces "^2.3.0"
+    glob-parent "^3.1.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    lodash.debounce "^4.0.8"
+    normalize-path "^2.1.1"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+    upath "^1.0.5"
+  optionalDependencies:
+    fsevents "^1.2.2"
+
+chownr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
+
+ci-info@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.3.tgz#710193264bb05c77b8c90d02f5aaf22216a667b2"
+
+circular-json@^0.5.4:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.5.5.tgz#64182ef359042d37cd8e767fc9de878b1e9447d3"
+
+clang-format@1.0.41:
+  version "1.0.41"
+  resolved "https://registry.yarnpkg.com/clang-format/-/clang-format-1.0.41.tgz#28552e50b0c9e44d23f85aebe3d2fbd06c93620c"
+  dependencies:
+    async "^1.5.2"
+    glob "^7.0.0"
+    resolve "^1.1.6"
+
+clang-format@^1.0.32:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clang-format/-/clang-format-1.2.3.tgz#2763561aa7449c43737480f8df3a2b5b66e6cf37"
+  dependencies:
+    async "^1.5.2"
+    glob "^7.0.0"
+    resolve "^1.1.6"
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+cldr-data-downloader@0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/cldr-data-downloader/-/cldr-data-downloader-0.3.2.tgz#8d0c98346d16486252fdc9afa36a46542fe4652f"
+  dependencies:
+    adm-zip "0.4.4"
+    mkdirp "0.5.0"
+    nopt "3.0.x"
+    npmconf "2.0.9"
+    progress "1.1.8"
+    q "1.0.1"
+    request "~2.74.0"
+    request-progress "0.3.1"
+
+cldr@4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/cldr/-/cldr-4.10.0.tgz#5a72a693728eca491bc8ee027d60fa4dc750a24f"
+  dependencies:
+    lodash "^4.17.10"
+    memoizeasync "^1.1.0"
+    passerror "^1.1.1"
+    pegjs "^0.10.0"
+    seq "^0.3.5"
+    uglify-js "^1.3.3"
+    unicoderegexp "^0.4.1"
+    xmldom "^0.1.27"
+    xpath "^0.0.27"
+
+cldrjs@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cldrjs/-/cldrjs-0.5.0.tgz#37be92d8d1a8e66c8ee12f1303ed316d85d8eb37"
+
+cli-color@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/cli-color/-/cli-color-1.2.0.tgz#3a5ae74fd76b6267af666e69e2afbbd01def34d1"
+  dependencies:
+    ansi-regex "^2.1.1"
+    d "1"
+    es5-ext "^0.10.12"
+    es6-iterator "2"
+    memoizee "^0.4.3"
+    timers-ext "0.1"
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.0.3, cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone-stats@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
+
+clone@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f"
+
+clone@^1.0.0, clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
+coffee-script@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.3.3.tgz#150d6b4cb522894369efed6a2101c20bc7f4a4f4"
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-support@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
+
+colors@0.6.0-1:
+  version "0.6.0-1"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.0-1.tgz#6dbb68ceb8bc60f2b313dcc5ce1599f06d19e67a"
+
+colors@^1.1.0, colors@^1.1.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.0.tgz#5f20c9fef6945cb1134260aab33bfbdc8295e04e"
+
+colour@~0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/colour/-/colour-0.7.1.tgz#9cb169917ec5d12c0736d3e8685746df1cadf778"
+
+combine-lists@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/combine-lists/-/combine-lists-1.0.1.tgz#458c07e09e0d900fc28b70a3fec2dacd1d2cb7f6"
+  dependencies:
+    lodash "^4.5.0"
+
+combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-1.0.0.tgz#5e6a88e7070ff5908836ead19169548c30f90bcd"
+
+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"
+
+commander@^2.5.0, commander@^2.9.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.16.0.tgz#f16390593996ceb4f3eeb020b31d78528f7f8a50"
+
+commander@~2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
+commondir@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-0.0.1.tgz#89f00fdcd51b519c578733fec563e6a6da7f5be2"
+
+commoner@^0.10.0:
+  version "0.10.8"
+  resolved "https://registry.yarnpkg.com/commoner/-/commoner-0.10.8.tgz#34fc3672cd24393e8bb47e70caa0293811f4f2c5"
+  dependencies:
+    commander "^2.5.0"
+    detective "^4.3.1"
+    glob "^5.0.15"
+    graceful-fs "^4.1.2"
+    iconv-lite "^0.4.5"
+    mkdirp "^0.5.0"
+    private "^0.1.6"
+    q "^1.1.2"
+    recast "^0.11.17"
+
+compare-func@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.2.tgz#99dd0ba457e1f9bc722b12c08ec33eeab31fa648"
+  dependencies:
+    array-ify "^1.0.0"
+    dot-prop "^3.0.0"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.2.1, component-emitter@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+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.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.2.2.tgz#524a9f10903f3a813389b0225d27c48bb751890f"
+  dependencies:
+    buffer-crc32 "^0.2.1"
+    crc32-stream "^2.0.0"
+    normalize-path "^2.0.0"
+    readable-stream "^2.0.0"
+
+compressible@~2.0.5:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.14.tgz#326c5f507fbb055f54116782b969a81b67a29da7"
+  dependencies:
+    mime-db ">= 1.34.0 < 2"
+
+compression@~1.5.2:
+  version "1.5.2"
+  resolved "http://registry.npmjs.org/compression/-/compression-1.5.2.tgz#b03b8d86e6f8ad29683cba8df91ddc6ffc77b395"
+  dependencies:
+    accepts "~1.2.12"
+    bytes "2.1.0"
+    compressible "~2.0.5"
+    debug "~2.2.0"
+    on-headers "~1.0.0"
+    vary "~1.0.1"
+
+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.7, concat-stream@^1.5.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+config-chain@~1.1.8:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.11.tgz#aba09747dfbe4c3e70e766a6e41586e1859fc6f2"
+  dependencies:
+    ini "^1.3.4"
+    proto-list "~1.2.1"
+
+connect-livereload@^0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/connect-livereload/-/connect-livereload-0.5.4.tgz#80157d1371c9f37cc14039ab1895970d119dc3bc"
+
+connect-timeout@~1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/connect-timeout/-/connect-timeout-1.6.2.tgz#de9a5ec61e33a12b6edaab7b5f062e98c599b88e"
+  dependencies:
+    debug "~2.2.0"
+    http-errors "~1.3.1"
+    ms "0.7.1"
+    on-headers "~1.0.0"
+
+connect@^2.30.0:
+  version "2.30.2"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-2.30.2.tgz#8da9bcbe8a054d3d318d74dfec903b5c39a1b609"
+  dependencies:
+    basic-auth-connect "1.0.0"
+    body-parser "~1.13.3"
+    bytes "2.1.0"
+    compression "~1.5.2"
+    connect-timeout "~1.6.2"
+    content-type "~1.0.1"
+    cookie "0.1.3"
+    cookie-parser "~1.3.5"
+    cookie-signature "1.0.6"
+    csurf "~1.8.3"
+    debug "~2.2.0"
+    depd "~1.0.1"
+    errorhandler "~1.4.2"
+    express-session "~1.11.3"
+    finalhandler "0.4.0"
+    fresh "0.3.0"
+    http-errors "~1.3.1"
+    method-override "~2.3.5"
+    morgan "~1.6.1"
+    multiparty "3.3.2"
+    on-headers "~1.0.0"
+    parseurl "~1.3.0"
+    pause "0.1.0"
+    qs "4.0.0"
+    response-time "~2.3.1"
+    serve-favicon "~2.3.0"
+    serve-index "~1.7.2"
+    serve-static "~1.10.0"
+    type-is "~1.6.6"
+    utils-merge "1.0.0"
+    vhost "~3.0.1"
+
+connect@^3.6.0:
+  version "3.6.6"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.6.tgz#09eff6c55af7236e137135a72574858b6786f524"
+  dependencies:
+    debug "2.6.9"
+    finalhandler "1.1.0"
+    parseurl "~1.3.2"
+    utils-merge "1.0.1"
+
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  dependencies:
+    date-now "^0.1.4"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+constants-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-0.0.1.tgz#92577db527ba6c4cf0a4568d84bc031f441e21f2"
+
+content-type@~1.0.1, content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+
+conventional-changelog-angular@^1.0.0, conventional-changelog-angular@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz#b27f2b315c16d0a1f23eb181309d0e6a4698ea0f"
+  dependencies:
+    compare-func "^1.3.1"
+    q "^1.5.1"
+
+conventional-changelog-atom@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.1.2.tgz#12595ad5267a6937c34cf900281b1c65198a4c63"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-atom@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.2.8.tgz#8037693455990e3256f297320a45fa47ee553a14"
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-codemirror@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.1.0.tgz#7577a591dbf9b538e7a150a7ee62f65a2872b334"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-codemirror@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.3.8.tgz#a1982c8291f4ee4d6f2f62817c6b2ecd2c4b7b47"
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-core@^1.3.0:
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-1.9.5.tgz#5db7566dad7c0cb75daf47fbb2976f7bf9928c1d"
+  dependencies:
+    conventional-changelog-writer "^2.0.3"
+    conventional-commits-parser "^2.1.0"
+    dateformat "^1.0.12"
+    get-pkg-repo "^1.0.0"
+    git-raw-commits "^1.3.0"
+    git-remote-origin-url "^2.0.0"
+    git-semver-tags "^1.2.3"
+    lodash "^4.0.0"
+    normalize-package-data "^2.3.5"
+    q "^1.4.1"
+    read-pkg "^1.1.0"
+    read-pkg-up "^1.0.1"
+    through2 "^2.0.0"
+
+conventional-changelog-core@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-2.0.11.tgz#19b5fbd55a9697773ed6661f4e32030ed7e30287"
+  dependencies:
+    conventional-changelog-writer "^3.0.9"
+    conventional-commits-parser "^2.1.7"
+    dateformat "^3.0.0"
+    get-pkg-repo "^1.0.0"
+    git-raw-commits "^1.3.6"
+    git-remote-origin-url "^2.0.0"
+    git-semver-tags "^1.3.6"
+    lodash "^4.2.1"
+    normalize-package-data "^2.3.5"
+    q "^1.5.1"
+    read-pkg "^1.1.0"
+    read-pkg-up "^1.0.1"
+    through2 "^2.0.0"
+
+conventional-changelog-ember@^0.2.0:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.2.10.tgz#dcd6e4cdc2e6c2b58653cf4d2cb1656a60421929"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-ember@^0.3.12:
+  version "0.3.12"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.3.12.tgz#b7d31851756d0fcb49b031dffeb6afa93b202400"
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-eslint@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-0.1.0.tgz#a52411e999e0501ce500b856b0a643d0330907e2"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-eslint@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.9.tgz#b13cc7e4b472c819450ede031ff1a75c0e3d07d3"
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-express@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.1.0.tgz#55c6c841c811962036c037bdbd964a54ae310fce"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-express@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.3.6.tgz#4a6295cb11785059fb09202180d0e59c358b9c2c"
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-jquery@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-0.1.0.tgz#0208397162e3846986e71273b6c79c5b5f80f510"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-jscs@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jscs/-/conventional-changelog-jscs-0.1.0.tgz#0479eb443cc7d72c58bf0bcf0ef1d444a92f0e5c"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-jshint@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.1.0.tgz#00cab8e9a3317487abd94c4d84671342918d2a07"
+  dependencies:
+    compare-func "^1.3.1"
+    q "^1.4.1"
+
+conventional-changelog-jshint@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.3.8.tgz#9051c1ac0767abaf62a31f74d2fe8790e8acc6c8"
+  dependencies:
+    compare-func "^1.3.1"
+    q "^1.5.1"
+
+conventional-changelog-preset-loader@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-1.1.8.tgz#40bb0f142cd27d16839ec6c74ee8db418099b373"
+
+conventional-changelog-writer@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-2.0.3.tgz#073b0c39f1cc8fc0fd9b1566e93833f51489c81c"
+  dependencies:
+    compare-func "^1.3.1"
+    conventional-commits-filter "^1.1.1"
+    dateformat "^1.0.11"
+    handlebars "^4.0.2"
+    json-stringify-safe "^5.0.1"
+    lodash "^4.0.0"
+    meow "^3.3.0"
+    semver "^5.0.1"
+    split "^1.0.0"
+    through2 "^2.0.0"
+
+conventional-changelog-writer@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-3.0.9.tgz#4aecdfef33ff2a53bb0cf3b8071ce21f0e994634"
+  dependencies:
+    compare-func "^1.3.1"
+    conventional-commits-filter "^1.1.6"
+    dateformat "^3.0.0"
+    handlebars "^4.0.2"
+    json-stringify-safe "^5.0.1"
+    lodash "^4.2.1"
+    meow "^4.0.0"
+    semver "^5.5.0"
+    split "^1.0.0"
+    through2 "^2.0.0"
+
+conventional-changelog@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.0.tgz#8ae3fb59feb74bbee0a25833ee1f83dad4a07874"
+  dependencies:
+    conventional-changelog-angular "^1.0.0"
+    conventional-changelog-atom "^0.1.0"
+    conventional-changelog-codemirror "^0.1.0"
+    conventional-changelog-core "^1.3.0"
+    conventional-changelog-ember "^0.2.0"
+    conventional-changelog-eslint "^0.1.0"
+    conventional-changelog-express "^0.1.0"
+    conventional-changelog-jquery "^0.1.0"
+    conventional-changelog-jscs "^0.1.0"
+    conventional-changelog-jshint "^0.1.0"
+
+conventional-changelog@^1.1.0:
+  version "1.1.24"
+  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.24.tgz#3d94c29c960f5261c002678315b756cdd3d7d1f0"
+  dependencies:
+    conventional-changelog-angular "^1.6.6"
+    conventional-changelog-atom "^0.2.8"
+    conventional-changelog-codemirror "^0.3.8"
+    conventional-changelog-core "^2.0.11"
+    conventional-changelog-ember "^0.3.12"
+    conventional-changelog-eslint "^1.0.9"
+    conventional-changelog-express "^0.3.6"
+    conventional-changelog-jquery "^0.1.0"
+    conventional-changelog-jscs "^0.1.0"
+    conventional-changelog-jshint "^0.3.8"
+    conventional-changelog-preset-loader "^1.1.8"
+
+conventional-commits-filter@^1.1.1, conventional-commits-filter@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-1.1.6.tgz#4389cd8e58fe89750c0b5fb58f1d7f0cc8ad3831"
+  dependencies:
+    is-subset "^0.1.1"
+    modify-values "^1.0.0"
+
+conventional-commits-parser@^2.1.0, conventional-commits-parser@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.1.7.tgz#eca45ed6140d72ba9722ee4132674d639e644e8e"
+  dependencies:
+    JSONStream "^1.0.4"
+    is-text-path "^1.0.0"
+    lodash "^4.2.1"
+    meow "^4.0.0"
+    split2 "^2.0.0"
+    through2 "^2.0.0"
+    trim-off-newlines "^1.0.0"
+
+convert-source-map@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+
+cookie-parser@~1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/cookie-parser/-/cookie-parser-1.3.5.tgz#9d755570fb5d17890771227a02314d9be7cf8356"
+  dependencies:
+    cookie "0.1.3"
+    cookie-signature "1.0.6"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+
+cookie@0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.1.3.tgz#e734a5c1417fce472d5aef82c381cabb64d1a435"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+
+core-js@^2.2.0, core-js@^2.4.0, core-js@^2.4.1:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
+
+core-js@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.3.0.tgz#fab83fbb0b2d8dc85fa636c4b9d34c75420c6d65"
+
+core-util-is@1.0.2, 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"
+
+cors@2.8.4:
+  version "2.8.4"
+  resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.4.tgz#2bd381f2eb201020105cd50ea59da63090694686"
+  dependencies:
+    object-assign "^4"
+    vary "^1"
+
+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"
+
+crc@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crc/-/crc-3.3.0.tgz#fa622e1bc388bf257309082d6b65200ce67090ba"
+
+crc@^3.4.4:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/crc/-/crc-3.5.0.tgz#98b8ba7d489665ba3979f59b21381374101a1964"
+
+cross-spawn@^5.0.1:
+  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"
+
+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"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
+crypto-browserify@~3.2.6:
+  version "3.2.8"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.2.8.tgz#b9b11dbe6d9651dd882a01e6cc467df718ecf189"
+  dependencies:
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+csrf@~3.0.0:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/csrf/-/csrf-3.0.6.tgz#b61120ddceeafc91e76ed5313bb5c0b2667b710a"
+  dependencies:
+    rndm "1.2.0"
+    tsscmp "1.0.5"
+    uid-safe "2.1.4"
+
+csurf@~1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/csurf/-/csurf-1.8.3.tgz#23f2a13bf1d8fce1d0c996588394442cba86a56a"
+  dependencies:
+    cookie "0.1.3"
+    cookie-signature "1.0.6"
+    csrf "~3.0.0"
+    http-errors "~1.3.1"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+custom-event@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
+
+d@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  dependencies:
+    es5-ext "^0.10.9"
+
+dargs@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/dargs/-/dargs-4.1.0.tgz#03a9dbb4b5c2f139bf14ae53f0b8a2a6a86f4e17"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+data-uri-to-buffer@1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-1.2.0.tgz#77163ea9c20d8641b4707e8f18abdf9a78f34835"
+
+date-format@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/date-format/-/date-format-1.2.0.tgz#615e828e233dd1ab9bb9ae0950e0ceccfa6ecad8"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+
+dateformat@^1.0.11, dateformat@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-1.0.12.tgz#9f124b67594c937ff706932e4a642cca8dbbfee9"
+  dependencies:
+    get-stdin "^4.0.1"
+    meow "^3.3.0"
+
+dateformat@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.2.0.tgz#4065e2013cf9fb916ddfd82efb506ad4c6769062"
+
+dateformat@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
+
+debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@~2.6.4, debug@~2.6.6:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@3.1.0, debug@^3.1.0, debug@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
+debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+decamelize-keys@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@^1.0.0, decamelize@^1.1.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"
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+
+decompress-zip@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/decompress-zip/-/decompress-zip-0.3.0.tgz#ae3bcb7e34c65879adfe77e19c30f86602b4bdb0"
+  dependencies:
+    binary "^0.3.0"
+    graceful-fs "^4.1.3"
+    mkpath "^0.1.0"
+    nopt "^3.0.1"
+    q "^1.1.2"
+    readable-stream "^1.1.8"
+    touch "0.0.3"
+
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+deepcopy@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/deepcopy/-/deepcopy-0.6.3.tgz#634780f2f8656ab771af8fa8431ed1ccee55c7b0"
+
+defaults@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  dependencies:
+    clone "^1.0.2"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+degenerator@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/degenerator/-/degenerator-1.0.4.tgz#fcf490a37ece266464d9cc431ab98c5819ced095"
+  dependencies:
+    ast-types "0.x.x"
+    escodegen "1.x.x"
+    esprima "3.x.x"
+
+del@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.0.1.tgz#80aec64c9d6d97e65cc2a9caa93c0aa6abf73aaa"
+
+depd@~1.1.0, depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+
+deprecated@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/deprecated/-/deprecated-0.0.1.tgz#f9c9af5464afa1e7a971458a8bdef2aa94d5bb19"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-file@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+detective-es6@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detective-es6/-/detective-es6-1.1.0.tgz#7c036e1f9469a848a527201edf6ec5a2eef3adab"
+  dependencies:
+    node-source-walk "~1.4.0"
+
+detective@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-0.1.1.tgz#f1e04fe973754c8907ae51edd3e230e380d76fe9"
+  dependencies:
+    uglify-js "~1.2.5"
+
+detective@^4.3.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-4.7.1.tgz#0eca7314338442febb6d65da54c10bb1c82b246e"
+  dependencies:
+    acorn "^5.2.1"
+    defined "^1.0.0"
+
+di@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
+
+diff@^2.0.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99"
+
+diff@^3.2.0, diff@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+
+doctrine@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-0.7.2.tgz#7cb860359ba3be90e040b26b729ce4bfa654c523"
+  dependencies:
+    esutils "^1.1.6"
+    isarray "0.0.1"
+
+dom-serialize@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
+  dependencies:
+    custom-event "~1.0.0"
+    ent "~2.2.0"
+    extend "^3.0.0"
+    void-elements "^2.0.0"
+
+domain-browser@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+
+domino@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.0.1.tgz#9e1d63215d0fe8dcb8202bff07effa1a216db504"
+
+dot-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
+  dependencies:
+    is-obj "^1.0.0"
+
+double-ended-queue@^2.1.0-0:
+  version "2.1.0-0"
+  resolved "https://registry.yarnpkg.com/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz#103d3527fd31528f40188130c841efdd78264e5c"
+
+duplexer2@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
+  dependencies:
+    readable-stream "~1.1.9"
+
+duplexer2@~0.1.0:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
+  dependencies:
+    readable-stream "^2.0.2"
+
+duplexer@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ecdsa-sig-formatter@1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.10.tgz#1c595000f04a8897dfb85000892a0f4c33af86c3"
+  dependencies:
+    safe-buffer "^5.0.1"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+encodeurl@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+
+end-of-stream@^1.0.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
+  dependencies:
+    once "^1.4.0"
+
+end-of-stream@~0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-0.1.5.tgz#8e177206c3c80837d85632e8b9359dfe8b2f6eaf"
+  dependencies:
+    once "~1.3.0"
+
+end-of-stream@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.1.0.tgz#e9353258baa9108965efc41cb0ef8ade2f3cfb07"
+  dependencies:
+    once "~1.3.0"
+
+engine.io-client@~3.1.0:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.1.6.tgz#5bdeb130f8b94a50ac5cbeb72583e7a4a063ddfd"
+  dependencies:
+    component-emitter "1.2.1"
+    component-inherit "0.0.3"
+    debug "~3.1.0"
+    engine.io-parser "~2.1.1"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "~3.3.1"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
+
+engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.2.tgz#4c0f4cff79aaeecbbdcfdea66a823c6085409196"
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "~0.0.7"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.4"
+    has-binary2 "~1.0.2"
+
+engine.io@~3.1.0:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.1.5.tgz#0e7ef9d690eb0b35597f1d4ad02a26ca2dba3845"
+  dependencies:
+    accepts "~1.3.4"
+    base64id "1.0.0"
+    cookie "0.3.1"
+    debug "~3.1.0"
+    engine.io-parser "~2.1.0"
+    ws "~3.3.1"
+  optionalDependencies:
+    uws "~9.14.0"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+ent@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
+
+entities@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
+errno@^0.1.3:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0, error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+errorhandler@~1.4.2:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/errorhandler/-/errorhandler-1.4.3.tgz#b7b70ed8f359e9db88092f2d20c0f831420ad83f"
+  dependencies:
+    accepts "~1.3.0"
+    escape-html "~1.0.3"
+
+es5-ext@^0.10.12, es5-ext@^0.10.14, es5-ext@^0.10.30, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14, es5-ext@~0.10.2:
+  version "0.10.45"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.45.tgz#0bfdf7b473da5919d5adf3bd25ceb754fccc3653"
+  dependencies:
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.1"
+    next-tick "1"
+
+es6-error@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.0.tgz#f094c7041f662599bb12720da059d6b9c7ff0f40"
+
+es6-iterator@2, es6-iterator@^2.0.1, es6-iterator@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
+es6-module-loader@^0.17.4:
+  version "0.17.11"
+  resolved "https://registry.yarnpkg.com/es6-module-loader/-/es6-module-loader-0.17.11.tgz#094f042e3b4d3086bcfd17380affabdfc99f35d7"
+  dependencies:
+    when "^3.7.2"
+
+es6-promise@^4.0.3:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.4.tgz#dc4221c2b16518760bd8c39a52d8f356fc00ed29"
+
+es6-promise@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.0.2.tgz#010d5858423a5f118979665f46486a95c6ee2bb6"
+
+es6-promisify@5.0.0, es6-promisify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  dependencies:
+    es6-promise "^4.0.3"
+
+es6-symbol@^3.1.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 "1"
+    es5-ext "~0.10.14"
+
+es6-weak-map@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.14"
+    es6-iterator "^2.0.1"
+    es6-symbol "^3.1.1"
+
+escape-html@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.2.tgz#d77d32fa98e38c2f41ae85e9278e0e0e6ba1022c"
+
+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:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+escodegen@1.x.x:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.10.0.tgz#f647395de22519fbd0d928ffcf1d17e0dec2603e"
+  dependencies:
+    esprima "^3.1.3"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+esprima-fb@8001.1001.0-dev-harmony-fb:
+  version "8001.1001.0-dev-harmony-fb"
+  resolved "https://registry.yarnpkg.com/esprima-fb/-/esprima-fb-8001.1001.0-dev-harmony-fb.tgz#c3190b05341d45643e093af70485ab4988e34d5e"
+
+esprima@3.x.x, esprima@^3.1.3, esprima@~3.1.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+
+esprima@^2.5.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esprima@~1.2.2:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.2.5.tgz#0993502feaf668138325756f30f9a51feeec11e9"
+
+estraverse@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+
+estree-walker@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.3.1.tgz#e6b1a51cf7292524e7237c312e5fe6660c1ce1aa"
+
+estree-walker@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39"
+
+esutils@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-1.1.6.tgz#c01ccaa9ae4b897c6d0c3e210ae52f3c7a844375"
+
+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"
+
+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 "1"
+    es5-ext "~0.10.14"
+
+event-stream@^3.1.5, event-stream@^3.3.2:
+  version "3.3.4"
+  resolved "http://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
+  dependencies:
+    duplexer "~0.1.1"
+    from "~0"
+    map-stream "~0.1.0"
+    pause-stream "0.0.11"
+    split "0.3"
+    stream-combiner "~0.0.4"
+    through "~2.3.1"
+
+eventemitter3@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-braces@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/expand-braces/-/expand-braces-0.1.2.tgz#488b1d1d2451cb3d3a6b192cfc030f44c5855fea"
+  dependencies:
+    array-slice "^0.2.3"
+    array-unique "^0.2.1"
+    braces "^0.1.2"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+expand-range@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-0.1.1.tgz#4cb8eda0993ca56fa4f41fc42f3cbb4ccadff044"
+  dependencies:
+    is-number "^0.1.1"
+    repeat-string "^0.2.2"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+expand-tilde@^2.0.0, expand-tilde@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+express-session@~1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/express-session/-/express-session-1.11.3.tgz#5cc98f3f5ff84ed835f91cbf0aabd0c7107400af"
+  dependencies:
+    cookie "0.1.3"
+    cookie-signature "1.0.6"
+    crc "3.3.0"
+    debug "~2.2.0"
+    depd "~1.0.1"
+    on-headers "~1.0.0"
+    parseurl "~1.3.0"
+    uid-safe "~2.0.0"
+    utils-merge "1.0.0"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+fancy-log@^1.1.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.2.tgz#f41125e3d84f2e7d89a43d06d958c8f78be16be1"
+  dependencies:
+    ansi-gray "^0.1.1"
+    color-support "^1.1.3"
+    time-stamp "^1.0.0"
+
+fast-deep-equal@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+
+faye-websocket@~0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+file-uri-to-path@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
+
+filename-regex@^2.0.0:
+  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.4"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^3.0.0"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+finalhandler@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.4.0.tgz#965a52d9e8d05d2b857548541fb89b53a2497d9b"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "1.0.2"
+    on-finished "~2.3.0"
+    unpipe "~1.0.0"
+
+finalhandler@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
+find-index@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+find-up@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  dependencies:
+    locate-path "^2.0.0"
+
+findup-sync@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc"
+  dependencies:
+    detect-file "^1.0.0"
+    is-glob "^3.1.0"
+    micromatch "^3.0.4"
+    resolve-dir "^1.0.1"
+
+findup-sync@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-0.3.0.tgz#37930aa5d816b777c03445e1966cc6790a4c0b16"
+  dependencies:
+    glob "~5.0.0"
+
+fined@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fined/-/fined-1.1.0.tgz#b37dc844b76a2f5e7081e884f7c0ae344f153476"
+  dependencies:
+    expand-tilde "^2.0.2"
+    is-plain-object "^2.0.3"
+    object.defaults "^1.1.0"
+    object.pick "^1.2.0"
+    parse-filepath "^1.0.1"
+
+firefox-profile@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/firefox-profile/-/firefox-profile-0.4.0.tgz#84468c13c09a65fcf36a837e6daab5956e4baad1"
+  dependencies:
+    adm-zip "~0.4.x"
+    archiver "~1.0.0"
+    async "~1.5.2"
+    fs-extra "~0.30.0"
+    ini "~1.3.3"
+    jetpack-id "1.0.0"
+    lazystream "~1.0.0"
+    lodash "~4.12.0"
+    minimist "^1.1.1"
+    node-uuid "~1.4.7"
+    xml2js "~0.4.4"
+
+firefox-profile@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/firefox-profile/-/firefox-profile-1.0.3.tgz#5a656116885a86558384fa11d102fb11eff45cf1"
+  dependencies:
+    adm-zip "~0.4.x"
+    archiver "~1.3.0"
+    async "~2.4.1"
+    fs-extra "~2.1.2"
+    ini "~1.3.3"
+    jetpack-id "1.0.0"
+    lazystream "~1.0.0"
+    lodash "~4.17.2"
+    minimist "^1.1.1"
+    uuid "^3.0.0"
+    xml2js "~0.4.4"
+
+first-chunk-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz#59bfb50cd905f60d7c394cd3d9acaab4e6ad934e"
+
+flagged-respawn@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-1.0.0.tgz#4e79ae9b2eb38bf86b3bb56bf3e0a56aa5fcabd7"
+
+follow-redirects@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.0.0.tgz#8e34298cbd2e176f254effec75a1c78cc849fd37"
+  dependencies:
+    debug "^2.2.0"
+
+follow-redirects@^1.0.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.1.tgz#67a8f14f5a1f67f962c2c46469c79eaec0a90291"
+  dependencies:
+    debug "^3.1.0"
+
+for-in@^1.0.1, for-in@^1.0.2:
+  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.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    for-in "^1.0.1"
+
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  dependencies:
+    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@~1.0.0-rc4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-1.0.1.tgz#ae315db9a4907fa065502304a66d7733475ee37c"
+  dependencies:
+    async "^2.0.1"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.11"
+
+form-data@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.0.0.tgz#6f0aebadcc5da16c13e1ecc11137d85f9b883b25"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.11"
+
+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"
+    mime-types "^2.1.12"
+
+form-data@~2.3.0, form-data@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "1.0.6"
+    mime-types "^2.1.12"
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  dependencies:
+    map-cache "^0.2.2"
+
+fresh@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+
+from@~0:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
+
+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-constants@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
+
+fs-extra@0.30.0, fs-extra@~0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+fs-extra@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.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:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+
+fs-minipass@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
+  dependencies:
+    minipass "^2.2.1"
+
+fs-promise@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/fs-promise/-/fs-promise-0.3.1.tgz#bf34050368f24d6dc9dfc6688ab5cead8f86842a"
+  dependencies:
+    any-promise "~0.1.0"
+
+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.1.2:
+  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.36"
+
+fsevents@^1.0.0, fsevents@^1.2.2:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
+  dependencies:
+    nan "^2.9.2"
+    node-pre-gyp "^0.10.0"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+"fstream@>= 0.1.30 < 1":
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-0.1.31.tgz#7337f058fbbbbefa8c9f561a28cab0849202c988"
+  dependencies:
+    graceful-fs "~3.0.2"
+    inherits "~2.0.0"
+    mkdirp "0.5"
+    rimraf "2"
+
+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"
+
+ftp@~0.3.10:
+  version "0.3.10"
+  resolved "https://registry.yarnpkg.com/ftp/-/ftp-0.3.10.tgz#9197d861ad8142f3e63d5a83bfe4c59f7330885d"
+  dependencies:
+    readable-stream "1.1.x"
+    xregexp "2.0.0"
+
+fx-runner@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fx-runner/-/fx-runner-1.0.5.tgz#713519aca7598a8319e03fa1110b89b97ef1063f"
+  dependencies:
+    commander "2.9.0"
+    fs-promise "0.3.1"
+    lodash "3.10.1"
+    shell-quote "1.6.1"
+    spawn-sync "1.0.15"
+    when "3.7.7"
+    which "1.2.4"
+    winreg "0.0.12"
+
+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"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+gaze@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-0.5.2.tgz#40b709537d24d1d45767db5a908689dfe69ac44f"
+  dependencies:
+    globule "~0.1.0"
+
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-pkg-repo@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz#c73b489c06d80cc5536c2c853f9e05232056972d"
+  dependencies:
+    hosted-git-info "^2.1.4"
+    meow "^3.3.0"
+    normalize-package-data "^2.3.0"
+    parse-github-repo-url "^1.3.0"
+    through2 "^2.0.0"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
+get-uri@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/get-uri/-/get-uri-2.0.2.tgz#5c795e71326f6ca1286f2fc82575cd2bab2af578"
+  dependencies:
+    data-uri-to-buffer "1"
+    debug "2"
+    extend "3"
+    file-uri-to-path "1"
+    ftp "~0.3.10"
+    readable-stream "2"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+git-raw-commits@^1.3.0, git-raw-commits@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.6.tgz#27c35a32a67777c1ecd412a239a6c19d71b95aff"
+  dependencies:
+    dargs "^4.0.1"
+    lodash.template "^4.0.2"
+    meow "^4.0.0"
+    split2 "^2.0.0"
+    through2 "^2.0.0"
+
+git-remote-origin-url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz#5282659dae2107145a11126112ad3216ec5fa65f"
+  dependencies:
+    gitconfiglocal "^1.0.0"
+    pify "^2.3.0"
+
+git-semver-tags@^1.2.3, git-semver-tags@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.3.6.tgz#357ea01f7280794fe0927f2806bee6414d2caba5"
+  dependencies:
+    meow "^4.0.0"
+    semver "^5.5.0"
+
+gitconfiglocal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"
+  dependencies:
+    ini "^1.3.2"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
+glob-stream@^3.1.5:
+  version "3.1.18"
+  resolved "https://registry.yarnpkg.com/glob-stream/-/glob-stream-3.1.18.tgz#9170a5f12b790306fdfe598f313f8f7954fd143b"
+  dependencies:
+    glob "^4.3.1"
+    glob2base "^0.0.12"
+    minimatch "^2.0.1"
+    ordered-read-streams "^0.1.0"
+    through2 "^0.6.1"
+    unique-stream "^1.0.0"
+
+glob-watcher@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/glob-watcher/-/glob-watcher-0.0.6.tgz#b95b4a8df74b39c83298b0c05c978b4d9a3b710b"
+  dependencies:
+    gaze "^0.5.1"
+
+glob2base@^0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/glob2base/-/glob2base-0.0.12.tgz#9d419b3e28f12e83a362164a277055922c9c0d56"
+  dependencies:
+    find-index "^0.1.1"
+
+glob@7.1.2, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, 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.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^4.3.1:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-4.5.3.tgz#c6cb73d3226c1efef04de3c56d012f03377ee15f"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^2.0.1"
+    once "^1.3.0"
+
+glob@^5.0.10, glob@^5.0.15, glob@~5.0.0:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@~3.1.21:
+  version "3.1.21"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-3.1.21.tgz#d29e0a055dea5138f4d07ed40e8982e83c2066cd"
+  dependencies:
+    graceful-fs "~1.2.0"
+    inherits "1"
+    minimatch "~0.2.11"
+
+global-modules@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
+  dependencies:
+    global-prefix "^1.0.1"
+    is-windows "^1.0.1"
+    resolve-dir "^1.0.0"
+
+global-prefix@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globule@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-0.1.0.tgz#d9c8edde1da79d125a151b79533b978676346ae5"
+  dependencies:
+    glob "~3.1.21"
+    lodash "~1.0.1"
+    minimatch "~0.2.11"
+
+glogg@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.1.tgz#dcf758e44789cc3f3d32c1f3562a3676e6a34810"
+  dependencies:
+    sparkles "^1.0.0"
+
+graceful-fs@^3.0.0, graceful-fs@~3.0.2:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-3.0.11.tgz#7613c778a1afea62f25c630a086d7f3acbbdd818"
+  dependencies:
+    natives "^1.1.0"
+
+graceful-fs@^4.1.0, graceful-fs@^4.1.2, graceful-fs@^4.1.3, 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"
+
+graceful-fs@~1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-1.2.3.tgz#15a4806a57547cb2d2dbf27f42e89a8c3451b364"
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
+graphviz@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/graphviz/-/graphviz-0.0.7.tgz#e5ae4b5429353a099609c9d4a4b518b95516efee"
+  dependencies:
+    temp "~0.4.0"
+
+gulp-clang-format@1.0.23:
+  version "1.0.23"
+  resolved "https://registry.yarnpkg.com/gulp-clang-format/-/gulp-clang-format-1.0.23.tgz#fe258586b83998491e632fc0c4fc0ecdfa10c89f"
+  dependencies:
+    clang-format "^1.0.32"
+    gulp-diff "^1.0.0"
+    gulp-util "^3.0.4"
+    pkginfo "^0.3.0"
+    stream-combiner2 "^1.1.1"
+    stream-equal "0.1.6"
+    through2 "^0.6.3"
+
+gulp-connect@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/gulp-connect/-/gulp-connect-5.0.0.tgz#f2fdf306ae911468368c2285f2d782f13eddaf4e"
+  dependencies:
+    connect "^2.30.0"
+    connect-livereload "^0.5.4"
+    event-stream "^3.3.2"
+    gulp-util "^3.0.6"
+    tiny-lr "^0.2.1"
+
+gulp-conventional-changelog@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/gulp-conventional-changelog/-/gulp-conventional-changelog-1.1.0.tgz#0aae0c02da3ec45a7b4fe258295e491b47ffa202"
+  dependencies:
+    add-stream "^1.0.0"
+    concat-stream "^1.5.0"
+    conventional-changelog "^1.1.0"
+    gulp-util "^3.0.6"
+    object-assign "^4.0.1"
+    through2 "^2.0.0"
+
+gulp-diff@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gulp-diff/-/gulp-diff-1.0.0.tgz#101b23712dd6b107bd07d05ab88ea3ac485fed77"
+  dependencies:
+    cli-color "^1.0.0"
+    diff "^2.0.2"
+    event-stream "^3.1.5"
+    gulp-util "^3.0.6"
+    through2 "^2.0.0"
+
+gulp-tslint@8.1.2:
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/gulp-tslint/-/gulp-tslint-8.1.2.tgz#e0f43194b473d7e76bb45a58fe8c60e7dfe3beb2"
+  dependencies:
+    gulp-util "~3.0.8"
+    map-stream "~0.0.7"
+    through "~2.3.8"
+
+gulp-util@^3.0.0, gulp-util@^3.0.4, gulp-util@^3.0.6, gulp-util@~3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
+  dependencies:
+    array-differ "^1.0.0"
+    array-uniq "^1.0.2"
+    beeper "^1.0.0"
+    chalk "^1.0.0"
+    dateformat "^2.0.0"
+    fancy-log "^1.1.0"
+    gulplog "^1.0.0"
+    has-gulplog "^0.1.0"
+    lodash._reescape "^3.0.0"
+    lodash._reevaluate "^3.0.0"
+    lodash._reinterpolate "^3.0.0"
+    lodash.template "^3.0.0"
+    minimist "^1.1.0"
+    multipipe "^0.1.2"
+    object-assign "^3.0.0"
+    replace-ext "0.0.1"
+    through2 "^2.0.0"
+    vinyl "^0.5.0"
+
+gulp@3.9.1:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/gulp/-/gulp-3.9.1.tgz#571ce45928dd40af6514fc4011866016c13845b4"
+  dependencies:
+    archy "^1.0.0"
+    chalk "^1.0.0"
+    deprecated "^0.0.1"
+    gulp-util "^3.0.0"
+    interpret "^1.0.0"
+    liftoff "^2.1.0"
+    minimist "^1.1.0"
+    orchestrator "^0.3.0"
+    pretty-hrtime "^1.0.0"
+    semver "^4.1.0"
+    tildify "^1.0.0"
+    v8flags "^2.0.2"
+    vinyl-fs "^0.3.0"
+
+gulplog@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gulplog/-/gulplog-1.0.0.tgz#e28c4d45d05ecbbed818363ce8f9c5926229ffe5"
+  dependencies:
+    glogg "^1.0.0"
+
+hammerjs@2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+
+handlebars@^4.0.2:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+  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-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary2@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.3.tgz#7776ac627f3ea77250cfc332dab7ddf5e4f5d11d"
+  dependencies:
+    isarray "2.0.1"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-gulplog@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce"
+  dependencies:
+    sparkles "^1.0.0"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+"hashish@>=0.0.2 <0.1":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/hashish/-/hashish-0.0.4.tgz#6d60bc6ffaf711b6afd60e426d077988014e6554"
+  dependencies:
+    traverse ">=0.2.4"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+hipchat-notifier@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hipchat-notifier/-/hipchat-notifier-1.1.0.tgz#b6d249755437c191082367799d3ba9a0f23b231e"
+  dependencies:
+    lodash "^4.0.0"
+    request "^2.0.0"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+hoek@4.x.x:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
+
+homedir-polyfill@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  dependencies:
+    parse-passwd "^1.0.0"
+
+hosted-git-info@^2.1.4:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
+
+http-browserify@^1.3.2:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/http-browserify/-/http-browserify-1.7.0.tgz#33795ade72df88acfbfd36773cefeda764735b20"
+  dependencies:
+    Base64 "~0.2.0"
+    inherits "~2.0.1"
+
+http-errors@1.6.3, http-errors@~1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+http-errors@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.3.1.tgz#197e22cdebd4198585e8694ef6786197b91ed942"
+  dependencies:
+    inherits "~2.0.1"
+    statuses "1"
+
+http-parser-js@>=0.4.0:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.13.tgz#3bd6d6fde6e3172c9334c3b33b6c193d80fe1137"
+
+http-proxy-agent@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz#e4821beef5b2142a2026bd73926fe537631c5405"
+  dependencies:
+    agent-base "4"
+    debug "3.1.0"
+
+http-proxy@^1.13.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
+  dependencies:
+    eventemitter3 "^3.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+httpntlm@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/httpntlm/-/httpntlm-1.6.1.tgz#ad01527143a2e8773cfae6a96f58656bb52a34b2"
+  dependencies:
+    httpreq ">=0.4.22"
+    underscore "~1.7.0"
+
+httpreq@>=0.4.22:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/httpreq/-/httpreq-0.4.24.tgz#4335ffd82cd969668a39465c929ac61d6393627f"
+
+https-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd"
+
+https-proxy-agent@1.0.0, https-proxy-agent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
+  dependencies:
+    agent-base "2"
+    debug "2"
+    extend "3"
+
+https-proxy-agent@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz#51552970fa04d723e04c56d04178c3f92592bbc0"
+  dependencies:
+    agent-base "^4.1.0"
+    debug "^3.1.0"
+
+husky@^0.14.3:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-0.14.3.tgz#c69ed74e2d2779769a17ba8399b54ce0b63c12c3"
+  dependencies:
+    is-ci "^1.0.10"
+    normalize-path "^1.0.0"
+    strip-indent "^2.0.0"
+
+iconv-lite@0.4.11:
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.11.tgz#2ecb42fd294744922209a2e7c404dac8793d8ade"
+
+iconv-lite@0.4.13:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+
+iconv-lite@0.4.15:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+
+iconv-lite@0.4.23, iconv-lite@^0.4.4, iconv-lite@^0.4.5:
+  version "0.4.23"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+ieee754@^1.1.4:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
+
+ignore-walk@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
+  dependencies:
+    minimatch "^3.0.4"
+
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+
+incremental-dom@0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/incremental-dom/-/incremental-dom-0.4.1.tgz#80eb151969bd52054dc29a4720c4e89abd103401"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflection@~1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/inflection/-/inflection-1.12.0.tgz#a200935656d6f5f6bc4dc7502e1aecb703228416"
+
+inflection@~1.3.0:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/inflection/-/inflection-1.3.8.tgz#cbd160da9f75b14c3cc63578d4f396784bf3014e"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-1.0.2.tgz#ca4309dadee6b54cc0b8d247e8d7c7a0975bdc9b"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+
+ini@^1.2.0, ini@^1.3.2, ini@^1.3.4, ini@~1.3.0, ini@~1.3.3:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+interpret@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+ip@^1.1.2, ip@^1.1.4, ip@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+
+is-absolute@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.1.7.tgz#847491119fccb5fb436217cc737f7faad50f603f"
+  dependencies:
+    is-relative "^0.1.0"
+
+is-absolute@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
+  dependencies:
+    is-relative "^1.0.0"
+    is-windows "^1.0.1"
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-ci@^1.0.10:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
+  dependencies:
+    ci-info "^1.0.0"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+is-dotfile@^1.0.0:
+  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"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-extglob@^2.1.0, is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-glob@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+
+is-my-ip-valid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
+
+is-my-json-valid@^2.12.4:
+  version "2.17.2"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz#6b2103a288e94ef3de5cf15d29dd85fc4b78d65c"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    is-my-ip-valid "^1.0.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-number@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-0.1.1.tgz#69a7af116963d47206ec9bd9b48a14216f1e3806"
+
+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-number@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+
+is-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+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, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-promise@^2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
+is-relative@^0.1.0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.1.3.tgz#905fee8ae86f45b3ec614bc3c15c869df0876e82"
+
+is-relative@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
+  dependencies:
+    is-unc-path "^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"
+
+is-subset@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
+
+is-text-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-1.0.1.tgz#4e1aa0fb51bfbcb3e92688001397202c1775b66e"
+  dependencies:
+    text-extensions "^1.0.0"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-unc-path@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-1.0.0.tgz#d731e8898ed090a12c352ad2eaed5095ad322c9d"
+  dependencies:
+    unc-path-regex "^0.1.2"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+is-windows@^1.0.1, is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+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"
+
+isemail@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/isemail/-/isemail-1.2.0.tgz#be03df8cc3e29de4d2c5df6501263f1fa4595e9a"
+
+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@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jasmine-core@^3.1.0, jasmine-core@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-3.1.0.tgz#a4785e135d5df65024dfc9224953df585bd2766c"
+
+jasmine-core@~2.99.0:
+  version "2.99.1"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.99.1.tgz#e6400df1e6b56e130b61c4bcd093daa7f6e8ca15"
+
+jasmine-diff@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/jasmine-diff/-/jasmine-diff-0.1.3.tgz#93ccc2dcc41028c5ddd4606558074839f2deeaa8"
+  dependencies:
+    diff "^3.2.0"
+
+jasmine@^2.5.3:
+  version "2.99.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.99.0.tgz#8ca72d102e639b867c6489856e0e18a9c7aa42b7"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.99.0"
+
+jasmine@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-3.1.0.tgz#2bd59fd7ec6ec0e8acb64e09f45a68ed2ad1952a"
+  dependencies:
+    glob "^7.0.6"
+    jasmine-core "~3.1.0"
+
+jasminewd2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
+
+jetpack-id@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/jetpack-id/-/jetpack-id-0.0.4.tgz#6fc35a394a4aea190820a2ce7f23d2bb53512a9b"
+
+jetpack-id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/jetpack-id/-/jetpack-id-1.0.0.tgz#2cf9fbae46d8074fc16b7de0071c8efebca473a6"
+
+jetpack-validation@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/jetpack-validation/-/jetpack-validation-0.0.7.tgz#5418065b029af3db7782fc53775d52a633fb04ba"
+  dependencies:
+    jetpack-id "0.0.4"
+    resolve "^0.7.1"
+    semver "^5.3.0"
+
+joi@^6.10.1:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-6.10.1.tgz#4d50c318079122000fe5f16af1ff8e1917b77e06"
+  dependencies:
+    hoek "2.x.x"
+    isemail "1.x.x"
+    moment "2.x.x"
+    topo "1.x.x"
+
+jpm-core@0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/jpm-core/-/jpm-core-0.0.11.tgz#88904d78087aadc6e9f22825dcb34a67cf2e3ac7"
+
+jpm@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jpm/-/jpm-1.3.1.tgz#430c98193e87692f9ccd72f6cb348eaf224dfe15"
+  dependencies:
+    commander "2.9.0"
+    decompress-zip "0.3.0"
+    firefox-profile "0.4.0"
+    fs-extra "0.30.0"
+    fs-promise "0.3.1"
+    fx-runner "1.0.5"
+    jetpack-id "0.0.4"
+    jetpack-validation "0.0.7"
+    jpm-core "0.0.11"
+    jsontoxml "0.0.11"
+    jszip "2.4.0"
+    lodash "4.11.1"
+    minimatch "3.0.2"
+    mozilla-toolkit-versioning "0.0.2"
+    mozilla-version-comparator "1.0.2"
+    node-watch "0.3.4"
+    object-assign "4.1.0"
+    open "0.0.5"
+    promzard "0.3.0"
+    read "1.0.7"
+    semver "5.1.0"
+    sign-addon "0.2.0"
+    tmp "0.0.28"
+    when "3.7.2"
+    xml2js "0.4.16"
+    zip-dir "1.0.2"
+
+js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+json-parse-better-errors@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+json-stringify-safe@5.0.x, 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"
+
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  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"
+
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+
+jsonpointer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+
+jsontoxml@0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/jsontoxml/-/jsontoxml-0.0.11.tgz#373ab5b2070be3737a5fb3e32fd1b7b81870caa4"
+
+jsonwebtoken@7.1.9:
+  version "7.1.9"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-7.1.9.tgz#847804e5258bec5a9499a8dc4a5e7a3bae08d58a"
+  dependencies:
+    joi "^6.10.1"
+    jws "^3.1.3"
+    lodash.once "^4.0.0"
+    ms "^0.7.1"
+    xtend "^4.0.1"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+jstransform@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/jstransform/-/jstransform-8.2.0.tgz#e43f697f7cc01a1e7c827dd9df5a79d29d0c50bb"
+  dependencies:
+    base62 "0.1.1"
+    esprima-fb "8001.1001.0-dev-harmony-fb"
+    source-map "0.1.31"
+
+jszip@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.4.0.tgz#487a93b76c3bffa6cb085cd61eb934eabe2d294f"
+  dependencies:
+    pako "~0.2.5"
+
+jszip@^2.4.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.6.1.tgz#b88f3a7b2e67a2a048152982c7a3756d9c4828f0"
+  dependencies:
+    pako "~1.0.2"
+
+jszip@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.1.5.tgz#e3c2a6c6d706ac6e603314036d43cd40beefdf37"
+  dependencies:
+    core-js "~2.3.0"
+    es6-promise "~3.0.2"
+    lie "~3.1.0"
+    pako "~1.0.2"
+    readable-stream "~2.0.6"
+
+jwa@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.1.6.tgz#87240e76c9808dbde18783cf2264ef4929ee50e6"
+  dependencies:
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.10"
+    safe-buffer "^5.0.1"
+
+jws@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.1.5.tgz#80d12d05b293d1e841e7cb8b4e69e561adcf834f"
+  dependencies:
+    jwa "^1.1.5"
+    safe-buffer "^5.0.1"
+
+karma-browserstack-launcher@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/karma-browserstack-launcher/-/karma-browserstack-launcher-1.3.0.tgz#61fe3d36b1cf10681e40f9d874bf37271fb1c674"
+  dependencies:
+    browserstack "1.5.0"
+    browserstacktunnel-wrapper "~2.0.1"
+    q "~1.5.0"
+
+karma-chrome-launcher@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz#cf1b9d07136cc18fe239327d24654c3dbc368acf"
+  dependencies:
+    fs-access "^1.0.0"
+    which "^1.2.1"
+
+karma-jasmine@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/karma-jasmine/-/karma-jasmine-1.1.2.tgz#394f2b25ffb4a644b9ada6f22d443e2fd08886c3"
+
+karma-sauce-launcher@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/karma-sauce-launcher/-/karma-sauce-launcher-1.2.0.tgz#6f2558ddef3cf56879fa27540c8ae9f8bfd16bca"
+  dependencies:
+    q "^1.5.0"
+    sauce-connect-launcher "^1.2.2"
+    saucelabs "^1.4.0"
+    wd "^1.4.0"
+
+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@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-2.0.4.tgz#b399785f57e9bab1d3c4384db33fef4dec8ae349"
+  dependencies:
+    bluebird "^3.3.0"
+    body-parser "^1.16.1"
+    chokidar "^2.0.3"
+    colors "^1.1.0"
+    combine-lists "^1.0.0"
+    connect "^3.6.0"
+    core-js "^2.2.0"
+    di "^0.0.1"
+    dom-serialize "^2.2.0"
+    expand-braces "^0.1.1"
+    glob "^7.1.1"
+    graceful-fs "^4.1.2"
+    http-proxy "^1.13.0"
+    isbinaryfile "^3.0.0"
+    lodash "^4.17.4"
+    log4js "^2.5.3"
+    mime "^1.3.4"
+    minimatch "^3.0.2"
+    optimist "^0.6.1"
+    qjobs "^1.1.4"
+    range-parser "^1.2.0"
+    rimraf "^2.6.0"
+    safe-buffer "^5.0.1"
+    socket.io "2.0.4"
+    source-map "^0.6.1"
+    tmp "0.0.33"
+    useragent "2.2.1"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    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"
+
+kind-of@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+
+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@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lazystream@^1.0.0, 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"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+libbase64@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/libbase64/-/libbase64-0.1.0.tgz#62351a839563ac5ff5bd26f12f60e9830bb751e6"
+
+libmime@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/libmime/-/libmime-3.0.0.tgz#51a1a9e7448ecbd32cda54421675bb21bc093da6"
+  dependencies:
+    iconv-lite "0.4.15"
+    libbase64 "0.1.0"
+    libqp "1.1.0"
+
+libqp@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/libqp/-/libqp-1.1.0.tgz#f5e6e06ad74b794fb5b5b66988bf728ef1dedbe8"
+
+lie@~3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  dependencies:
+    immediate "~3.0.5"
+
+liftoff@^2.1.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-2.5.0.tgz#2009291bb31cea861bbf10a7c15a28caf75c31ec"
+  dependencies:
+    extend "^3.0.0"
+    findup-sync "^2.0.0"
+    fined "^1.0.1"
+    flagged-respawn "^1.0.0"
+    is-plain-object "^2.0.4"
+    object.map "^1.0.0"
+    rechoir "^0.6.2"
+    resolve "^1.1.7"
+
+livereload-js@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/livereload-js/-/livereload-js-2.3.0.tgz#c3ab22e8aaf5bf3505d80d098cbad67726548c9a"
+
+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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+load-json-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
+loader-utils@^0.2.11:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
+lodash._basecopy@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+
+lodash._basetostring@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz#d1861d877f824a52f669832dcaf3ee15566a07d5"
+
+lodash._basevalues@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz#5b775762802bde3d3297503e26300820fdf661b7"
+
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+
+lodash._isiterateecall@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
+
+lodash._reescape@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reescape/-/lodash._reescape-3.0.0.tgz#2b1d6f5dfe07c8a355753e5f27fac7f1cde1616a"
+
+lodash._reevaluate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz#58bc74c40664953ae0b124d806996daca431e2ed"
+
+lodash._reinterpolate@^3.0.0, lodash._reinterpolate@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+
+lodash._root@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
+lodash.escape@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
+  dependencies:
+    lodash._root "^3.0.0"
+
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+
+lodash.keys@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+
+lodash.restparam@^3.0.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
+
+lodash.template@^3.0.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-3.6.2.tgz#f8cdecc6169a255be9098ae8b0c53d378931d14f"
+  dependencies:
+    lodash._basecopy "^3.0.0"
+    lodash._basetostring "^3.0.0"
+    lodash._basevalues "^3.0.0"
+    lodash._isiterateecall "^3.0.0"
+    lodash._reinterpolate "^3.0.0"
+    lodash.escape "^3.0.0"
+    lodash.keys "^3.0.0"
+    lodash.restparam "^3.0.0"
+    lodash.templatesettings "^3.0.0"
+
+lodash.template@^4.0.2:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz#fb307844753b66b9f1afa54e262c745307dba8e5"
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.escape "^3.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+
+lodash@3.10.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+lodash@4.11.1:
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.11.1.tgz#a32106eb8e2ec8e82c241611414773c9df15f8bc"
+
+lodash@4.17.10, lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.6, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.5.0, lodash@^4.8.0, lodash@~4.17.2:
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+
+lodash@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-1.0.2.tgz#8f57560c83b59fc270bd3d561b690043430e2551"
+
+lodash@~4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.12.0.tgz#2bd6dc46a040f59e686c972ed21d93dc59053258"
+
+log4js@^2.5.3:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/log4js/-/log4js-2.10.0.tgz#4980bd9148a030d69f9edde32a5b19c0a551e2c4"
+  dependencies:
+    circular-json "^0.5.4"
+    date-format "^1.2.0"
+    debug "^3.1.0"
+    semver "^5.5.0"
+    streamroller "0.7.0"
+  optionalDependencies:
+    amqplib "^0.5.2"
+    axios "^0.15.3"
+    hipchat-notifier "^1.1.0"
+    loggly "^1.1.0"
+    mailgun-js "^0.18.0"
+    nodemailer "^2.5.0"
+    redis "^2.7.1"
+    slack-node "~0.2.0"
+
+loggly@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/loggly/-/loggly-1.1.1.tgz#0a0fc1d3fa3a5ec44fdc7b897beba2a4695cebee"
+  dependencies:
+    json-stringify-safe "5.0.x"
+    request "2.75.x"
+    timespan "2.3.x"
+
+long@~3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loud-rejection@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.0.0"
+
+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:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
+
+lru-cache@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.5.0.tgz#d82388ae9c960becbea0c73bb9eb79b6c6ce9aeb"
+
+lru-cache@^4.0.1, lru-cache@^4.1.2:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+lru-queue@0.1:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
+  dependencies:
+    es5-ext "~0.10.2"
+
+madge@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/madge/-/madge-0.5.0.tgz#4da1ba55ccde09bd7642a8e721fe6cbcea32c60f"
+  dependencies:
+    amdetective "0.0.2"
+    coffee-script "1.3.3"
+    colors "0.6.0-1"
+    commander "1.0.0"
+    commondir "0.0.1"
+    detective "0.1.1"
+    detective-es6 "1.1.0"
+    graphviz "0.0.7"
+    react-tools "0.12.1"
+    resolve "0.2.3"
+    uglify-js "1.2.6"
+    walkdir "0.0.5"
+
+magic-string@^0.19.0:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.19.1.tgz#14d768013caf2ec8fdea16a49af82fc377e75201"
+  dependencies:
+    vlq "^0.2.1"
+
+magic-string@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.0.tgz#1f3696f9931ff0a1ed4c132250529e19cad6759b"
+  dependencies:
+    sourcemap-codec "^1.4.1"
+
+mailcomposer@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/mailcomposer/-/mailcomposer-4.0.1.tgz#0e1c44b2a07cf740ee17dc149ba009f19cadfeb4"
+  dependencies:
+    buildmail "4.0.1"
+    libmime "3.0.0"
+
+mailgun-js@^0.18.0:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/mailgun-js/-/mailgun-js-0.18.1.tgz#ee39aa18d7bb598a5ce9ede84afb681defc8a6b0"
+  dependencies:
+    async "~2.6.0"
+    debug "~3.1.0"
+    form-data "~2.3.0"
+    inflection "~1.12.0"
+    is-stream "^1.1.0"
+    path-proxy "~1.0.0"
+    promisify-call "^2.0.2"
+    proxy-agent "~3.0.0"
+    tsscmp "~1.0.0"
+
+make-iterator@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/make-iterator/-/make-iterator-1.0.1.tgz#29b33f312aa8f547c4a5e490f56afcec99133ad6"
+  dependencies:
+    kind-of "^6.0.2"
+
+map-cache@^0.2.0, map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+
+map-obj@^1.0.0, map-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+
+map-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
+
+map-stream@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.0.7.tgz#8a1f07896d82b10926bd3744a2420009f88974a8"
+
+map-stream@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194"
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  dependencies:
+    object-visit "^1.0.0"
+
+"match-stream@>= 0.0.2 < 1":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/match-stream/-/match-stream-0.0.2.tgz#99eb050093b34dffade421b9ac0b410a9cfa17cf"
+  dependencies:
+    buffers "~0.1.1"
+    readable-stream "~1.0.0"
+
+math-random@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.0"
+
+memoizeasync@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/memoizeasync/-/memoizeasync-1.1.0.tgz#9d7028a6f266deb733510bb7dbba5f51878c561e"
+  dependencies:
+    lru-cache "2.5.0"
+    passerror "1.1.1"
+
+memoizee@^0.4.3:
+  version "0.4.12"
+  resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.12.tgz#780e99a219c50c549be6d0fc61765080975c58fb"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.30"
+    es6-weak-map "^2.0.2"
+    event-emitter "^0.3.5"
+    is-promise "^2.1"
+    lru-queue "0.1"
+    next-tick "1"
+    timers-ext "^0.1.2"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+meow@^3.3.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  dependencies:
+    camelcase-keys "^2.0.0"
+    decamelize "^1.1.2"
+    loud-rejection "^1.0.0"
+    map-obj "^1.0.1"
+    minimist "^1.1.3"
+    normalize-package-data "^2.3.4"
+    object-assign "^4.0.1"
+    read-pkg-up "^1.0.1"
+    redent "^1.0.0"
+    trim-newlines "^1.0.0"
+
+meow@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-4.0.1.tgz#d48598f6f4b1472f35bf6317a95945ace347f975"
+  dependencies:
+    camelcase-keys "^4.0.0"
+    decamelize-keys "^1.0.0"
+    loud-rejection "^1.0.0"
+    minimist "^1.1.3"
+    minimist-options "^3.0.1"
+    normalize-package-data "^2.3.4"
+    read-pkg-up "^3.0.0"
+    redent "^2.0.0"
+    trim-newlines "^2.0.0"
+
+method-override@~2.3.5:
+  version "2.3.10"
+  resolved "https://registry.yarnpkg.com/method-override/-/method-override-2.3.10.tgz#e3daf8d5dee10dd2dce7d4ae88d62bbee77476b4"
+  dependencies:
+    debug "2.6.9"
+    methods "~1.1.2"
+    parseurl "~1.3.2"
+    vary "~1.1.2"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5, micromatch@^2.3.11:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+micromatch@^3.0.4, micromatch@^3.1.4:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+"mime-db@>= 1.34.0 < 2":
+  version "1.34.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.34.0.tgz#452d0ecff5c30346a6dc1e64b1eaee0d3719ff9a"
+
+mime-db@~1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
+
+mime-types@^2.1.11, mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.6, mime-types@~2.1.7, mime-types@~2.1.9:
+  version "2.1.18"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
+  dependencies:
+    mime-db "~1.33.0"
+
+mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+mime@^1.3.4:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+
+"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.1.7"
+
+minimatch@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.2.tgz#0f398a7300ea441e9c348c83d98ab8c9dbf9c40a"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimatch@^2.0.1:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-2.0.10.tgz#8d087c39c6b38c001b97fca7ce6d0e1e80afbac7"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimatch@~0.2.11:
+  version "0.2.14"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-0.2.14.tgz#c74e780574f63c6f9a090e90efbe6ef53a6a756a"
+  dependencies:
+    lru-cache "2"
+    sigmund "~1.0.0"
+
+minimist-options@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954"
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.1, 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"
+
+minipass@^2.2.1, minipass@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.3.tgz#a7dcc8b7b833f5d368759cce544dccb55f50f233"
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
+minizlib@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.0.tgz#11e13658ce46bc3a70a267aac58359d1e0c29ceb"
+  dependencies:
+    minipass "^2.2.1"
+
+mixin-deep@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
+mkdirp@0.5, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+mkdirp@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12"
+  dependencies:
+    minimist "0.0.8"
+
+mkpath@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/mkpath/-/mkpath-0.1.0.tgz#7554a6f8d871834cc97b5462b122c4c124d6de91"
+
+mock-fs@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/mock-fs/-/mock-fs-4.5.0.tgz#75245b966f7e3defe197b03454af9c5b355594b7"
+
+modify-values@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
+
+moment@2.x.x:
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+
+morgan@~1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.6.1.tgz#5fd818398c6819cba28a7cd6664f292fe1c0bbf2"
+  dependencies:
+    basic-auth "~1.0.3"
+    debug "~2.2.0"
+    depd "~1.0.1"
+    on-finished "~2.3.0"
+    on-headers "~1.0.0"
+
+mozilla-toolkit-versioning@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/mozilla-toolkit-versioning/-/mozilla-toolkit-versioning-0.0.2.tgz#90590e05d48dfdc35b63a22d0233a6cae7c277ff"
+
+mozilla-version-comparator@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/mozilla-version-comparator/-/mozilla-version-comparator-1.0.2.tgz#f86731e70c15d1ff5eb288d13b4db8d1e605f7fc"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+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"
+
+multiparty@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/multiparty/-/multiparty-3.3.2.tgz#35de6804dc19643e5249f3d3e3bdc6c8ce301d3f"
+  dependencies:
+    readable-stream "~1.1.9"
+    stream-counter "~0.2.0"
+
+multipipe@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-0.1.2.tgz#2a8f2ddf70eed564dff2d57f1e1a137d9f05078b"
+  dependencies:
+    duplexer2 "0.0.2"
+
+mutation-observer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/mutation-observer/-/mutation-observer-1.0.3.tgz#42e9222b101bca82e5ba9d5a7acf4a14c0f263d0"
+
+mute-stream@~0.0.4:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+
+mz@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.4.0.tgz#987ba9624d89395388c37cb4741e2caf4dd13b1a"
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
+nan@^2.3.0, nan@^2.9.2:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+natives@^1.1.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.4.tgz#2f0f224fc9a7dd53407c7667c84cf8dbe773de58"
+
+needle@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.1.tgz#b5e325bd3aae8c2678902fa296f729455d1d3a7d"
+  dependencies:
+    debug "^2.1.2"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
+negotiator@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.5.3.tgz#269d5c476810ec92edbe7b6c2f28316384f9a7e8"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+netmask@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
+
+next-tick@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+
+"node-libs-browser@>= 0.4.0 <=0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.6.0.tgz#244806d44d319e048bc8607b5cc4eaf9a29d2e3c"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "~0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "0.0.1"
+    crypto-browserify "~3.2.6"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    http-browserify "^1.3.2"
+    https-browserify "0.0.0"
+    os-browserify "~0.1.2"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "~0.2.0"
+    readable-stream "^1.1.13"
+    stream-browserify "^1.0.0"
+    string_decoder "~0.10.25"
+    timers-browserify "^1.0.1"
+    tty-browserify "0.0.0"
+    url "~0.10.1"
+    util "~0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.10.0:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
+
+node-pre-gyp@^0.6.36:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    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-source-walk@~1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/node-source-walk/-/node-source-walk-1.4.2.tgz#311ee1e18d8795874bc2229426d572cf0c356256"
+  dependencies:
+    acorn "^1.0.3"
+
+node-uuid@1.4.8, node-uuid@~1.4.7:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.8.tgz#b040eb0923968afabf8d32fb1f17f1167fdab907"
+
+node-watch@0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/node-watch/-/node-watch-0.3.4.tgz#755f64ef5f8ad4acb5bafd2c4e7f4fb6a8db0214"
+
+nodemailer-direct-transport@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/nodemailer-direct-transport/-/nodemailer-direct-transport-3.3.2.tgz#e96fafb90358560947e569017d97e60738a50a86"
+  dependencies:
+    nodemailer-shared "1.1.0"
+    smtp-connection "2.12.0"
+
+nodemailer-fetch@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/nodemailer-fetch/-/nodemailer-fetch-1.6.0.tgz#79c4908a1c0f5f375b73fe888da9828f6dc963a4"
+
+nodemailer-shared@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/nodemailer-shared/-/nodemailer-shared-1.1.0.tgz#cf5994e2fd268d00f5cf0fa767a08169edb07ec0"
+  dependencies:
+    nodemailer-fetch "1.6.0"
+
+nodemailer-smtp-pool@2.8.2:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/nodemailer-smtp-pool/-/nodemailer-smtp-pool-2.8.2.tgz#2eb94d6cf85780b1b4725ce853b9cbd5e8da8c72"
+  dependencies:
+    nodemailer-shared "1.1.0"
+    nodemailer-wellknown "0.1.10"
+    smtp-connection "2.12.0"
+
+nodemailer-smtp-transport@2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/nodemailer-smtp-transport/-/nodemailer-smtp-transport-2.7.2.tgz#03d71c76314f14ac7dbc7bf033a6a6d16d67fb77"
+  dependencies:
+    nodemailer-shared "1.1.0"
+    nodemailer-wellknown "0.1.10"
+    smtp-connection "2.12.0"
+
+nodemailer-wellknown@0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/nodemailer-wellknown/-/nodemailer-wellknown-0.1.10.tgz#586db8101db30cb4438eb546737a41aad0cf13d5"
+
+nodemailer@^2.5.0:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-2.7.2.tgz#f242e649aeeae39b6c7ed740ef7b061c404d30f9"
+  dependencies:
+    libmime "3.0.0"
+    mailcomposer "4.0.1"
+    nodemailer-direct-transport "3.3.2"
+    nodemailer-shared "1.1.0"
+    nodemailer-smtp-pool "2.8.2"
+    nodemailer-smtp-transport "2.7.2"
+    socks "1.1.9"
+
+nopt@3.0.x, nopt@^3.0.1, nopt@~3.0.1:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
+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"
+
+normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  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@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-1.0.0.tgz#32d0e472f91ff345701c15a8311018d3b0a90379"
+
+normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.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"
+
+npm-bundled@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308"
+
+npm-packlist@^1.1.6:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.1.10.tgz#1039db9e985727e464df066f4cf0ab6ef85c398a"
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+npmconf@2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/npmconf/-/npmconf-2.0.9.tgz#5c87e5fb308104eceeca781e3d9115d216351ef2"
+  dependencies:
+    config-chain "~1.1.8"
+    inherits "~2.0.0"
+    ini "^1.2.0"
+    mkdirp "^0.5.0"
+    nopt "~3.0.1"
+    once "~1.3.0"
+    osenv "^0.1.0"
+    semver "2 || 3 || 4"
+    uid-number "0.0.5"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+null-check@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/null-check/-/null-check-1.0.0.tgz#977dffd7176012b9ec30d2a39db5cf72a0439edd"
+
+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"
+
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+
+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, object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  dependencies:
+    isobject "^3.0.0"
+
+object.defaults@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.defaults/-/object.defaults-1.1.0.tgz#3a7f868334b407dea06da16d88d5cd29e435fecf"
+  dependencies:
+    array-each "^1.0.1"
+    array-slice "^1.0.0"
+    for-own "^1.0.0"
+    isobject "^3.0.0"
+
+object.map@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object.map/-/object.map-1.0.1.tgz#cf83e59dc8fcc0ad5f4250e1f78b3b81bd801d37"
+  dependencies:
+    for-own "^1.0.0"
+    make-iterator "^1.0.0"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+object.pick@^1.2.0, object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  dependencies:
+    isobject "^3.0.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+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.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:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  dependencies:
+    wrappy "1"
+
+open@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
+
+optimist@^0.6.1, optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+optionator@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+optjs@~3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/optjs/-/optjs-3.2.2.tgz#69a6ce89c442a44403141ad2f9b370bd5bb6f4ee"
+
+orchestrator@^0.3.0:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/orchestrator/-/orchestrator-0.3.8.tgz#14e7e9e2764f7315fbac184e506c7aa6df94ad7e"
+  dependencies:
+    end-of-stream "~0.1.5"
+    sequencify "~0.0.7"
+    stream-consume "~0.1.0"
+
+ordered-read-streams@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz#fd565a9af8eb4473ba69b6ed8a34352cb552f126"
+
+os-browserify@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-locale@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  dependencies:
+    execa "^0.7.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
+os-shim@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/os-shim/-/os-shim-0.1.3.tgz#6b62c3791cf7909ea35ed46e17658bb417cb3917"
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+  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.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+"over@>= 0.0.5 < 1":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/over/-/over-0.0.5.tgz#f29852e70fd7e25f360e013a8ec44c82aedb5708"
+
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  dependencies:
+    p-try "^1.0.0"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  dependencies:
+    p-limit "^1.1.0"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+
+pac-proxy-agent@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/pac-proxy-agent/-/pac-proxy-agent-2.0.2.tgz#90d9f6730ab0f4d2607dcdcd4d3d641aa26c3896"
+  dependencies:
+    agent-base "^4.2.0"
+    debug "^3.1.0"
+    get-uri "^2.0.0"
+    http-proxy-agent "^2.1.0"
+    https-proxy-agent "^2.2.1"
+    pac-resolver "^3.0.0"
+    raw-body "^2.2.0"
+    socks-proxy-agent "^3.0.0"
+
+pac-resolver@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pac-resolver/-/pac-resolver-3.0.0.tgz#6aea30787db0a891704deb7800a722a7615a6f26"
+  dependencies:
+    co "^4.6.0"
+    degenerator "^1.0.4"
+    ip "^1.1.5"
+    netmask "^1.0.6"
+    thunkify "^2.1.2"
+
+pako@~0.2.0, pako@~0.2.5:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+pako@~1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
+
+parse-filepath@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-filepath/-/parse-filepath-1.0.2.tgz#a632127f53aaf3d15876f5872f3ffac763d6c891"
+  dependencies:
+    is-absolute "^1.0.0"
+    map-cache "^0.2.0"
+    path-root "^0.1.1"
+
+parse-github-repo-url@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.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"
+
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+
+parseqs@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.0, parseurl@~1.3.1, parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+
+passerror@1.1.1, passerror@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/passerror/-/passerror-1.1.1.tgz#a25b88dbdd910a29603aec7dcb96e9a7a97687b4"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+path-proxy@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/path-proxy/-/path-proxy-1.0.0.tgz#18e8a36859fc9d2f1a53b48dee138543c020de5e"
+  dependencies:
+    inflection "~1.3.0"
+
+path-root-regex@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/path-root-regex/-/path-root-regex-0.1.2.tgz#bfccdc8df5b12dc52c8b43ec38d18d72c04ba96d"
+
+path-root@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/path-root/-/path-root-0.1.1.tgz#9a4a6814cac1c0cd73360a95f32083c8ea4745b7"
+  dependencies:
+    path-root-regex "^0.1.0"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  dependencies:
+    pify "^2.0.0"
+
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  dependencies:
+    pify "^3.0.0"
+
+pause-stream@0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
+  dependencies:
+    through "~2.3"
+
+pause@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/pause/-/pause-0.1.0.tgz#ebc8a4a8619ff0b8a81ac1513c3434ff469fdb74"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+pegjs@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/pegjs/-/pegjs-0.10.0.tgz#cf8bafae6eddff4b5a7efb185269eaaf4610ddbd"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0, pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+pkginfo@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.3.1.tgz#5b29f6a81f70717142e09e765bbeab97b4f81e21"
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+pretty-hrtime@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+
+private@^0.1.6, private@~0.1.5:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+
+process@^0.11.0, process@~0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+progress@1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+
+promisify-call@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/promisify-call/-/promisify-call-2.0.4.tgz#d48c2d45652ccccd52801ddecbd533a6d4bd5fba"
+  dependencies:
+    with-callback "^1.0.2"
+
+promzard@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/promzard/-/promzard-0.3.0.tgz#26a5d6ee8c7dee4cb12208305acfb93ba382a9ee"
+  dependencies:
+    read "1"
+
+proto-list@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
+
+protobufjs@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-5.0.0.tgz#4223063233ea96ac063ca2b554035204db524fa1"
+  dependencies:
+    ascli "~1"
+    bytebuffer "~5"
+    glob "^5.0.10"
+    yargs "^3.10.0"
+
+protractor@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/protractor/-/protractor-5.1.2.tgz#9b221741709a4c62d5cd53c6aadd54a71137e95f"
+  dependencies:
+    "@types/node" "^6.0.46"
+    "@types/q" "^0.0.32"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "0.0.5"
+    chalk "^1.1.3"
+    glob "^7.0.3"
+    jasmine "^2.5.3"
+    jasminewd2 "^2.1.0"
+    optimist "~0.6.0"
+    q "1.4.1"
+    saucelabs "~1.3.0"
+    selenium-webdriver "3.0.1"
+    source-map-support "~0.4.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
+
+proxy-agent@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/proxy-agent/-/proxy-agent-3.0.0.tgz#f6768e202889b2285d39906d3a94768416f8f713"
+  dependencies:
+    agent-base "^4.2.0"
+    debug "^3.1.0"
+    http-proxy-agent "^2.1.0"
+    https-proxy-agent "^2.2.1"
+    lru-cache "^4.1.2"
+    pac-proxy-agent "^2.0.1"
+    proxy-from-env "^1.0.0"
+    socks-proxy-agent "^3.0.0"
+
+proxy-from-env@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+"pullstream@>= 0.4.1 < 1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/pullstream/-/pullstream-0.4.1.tgz#d6fb3bf5aed697e831150eb1002c25a3f8ae1314"
+  dependencies:
+    over ">= 0.0.5 < 1"
+    readable-stream "~1.0.31"
+    setimmediate ">= 1.0.2 < 2"
+    slice-stream ">= 1.0.0 < 2"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@1.4.1, punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+
+q@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.0.1.tgz#11872aeedee89268110b10a718448ffb10112a14"
+
+q@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+q@^1.1.2, q@^1.4.1, q@^1.5.0, q@^1.5.1, q@~1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qjobs@^1.1.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.2.0.tgz#c45e9c61800bd087ef88d7e256423bdd49e5d071"
+
+qs@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-4.0.0.tgz#c31d9b74ec27df75e543a86c78728ed8d4623607"
+
+qs@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-5.2.0.tgz#a9f31142af468cb72b25b30136ba2456834916be"
+
+qs@6.5.2, qs@~6.5.1:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+
+qs@~5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-5.1.0.tgz#4d932e5c7ea411cca76a312d39a606200fd50cd9"
+
+qs@~6.2.0:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.3.tgz#1cfcb25c10a9b2b483053ff39f5dfc9233908cfe"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+querystring-es3@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+
+quick-lru@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
+
+random-bytes@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/random-bytes/-/random-bytes-1.0.0.tgz#4f68a1dc0ae58bd3fb95848c30324db75d64360b"
+
+randomatic@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.0.0.tgz#d35490030eb4f7578de292ce6dfb04a91a128923"
+  dependencies:
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    math-random "^1.0.1"
+
+range-parser@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+range-parser@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.0.3.tgz#6872823535c692e2c2a0103826afd82c2e0ff175"
+
+raw-body@2.3.3, raw-body@^2.2.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.3.tgz#1b324ece6b5706e153855bc1148c65bb7f6ea0c3"
+  dependencies:
+    bytes "3.0.0"
+    http-errors "1.6.3"
+    iconv-lite "0.4.23"
+    unpipe "1.0.0"
+
+raw-body@~2.1.2, raw-body@~2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.1.7.tgz#adfeace2e4fb3098058014d08c072dcc59758774"
+  dependencies:
+    bytes "2.4.0"
+    iconv-lite "0.4.13"
+    unpipe "1.0.0"
+
+rc@^1.1.7, rc@^1.2.7:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  dependencies:
+    deep-extend "^0.6.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+react-tools@0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/react-tools/-/react-tools-0.12.1.tgz#cd016e2f1b80d35a6006100305c068925e25e3d2"
+  dependencies:
+    commoner "^0.10.0"
+    jstransform "^8.2.0"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
+read-pkg-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^3.0.0"
+
+read-pkg@^1.0.0, read-pkg@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+read@1, read@1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
+  dependencies:
+    mute-stream "~0.0.4"
+
+readable-stream@1.1.x, "readable-stream@1.x >=1.1.9", readable-stream@^1.0.27-1, readable-stream@^1.1.13, readable-stream@^1.1.8, readable-stream@~1.1.8, readable-stream@~1.1.9:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@2, 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.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+"readable-stream@>=1.0.33-1 <1.1.0-0", readable-stream@~1.0.0, readable-stream@~1.0.31:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@~2.0.5, readable-stream@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+recast@^0.11.17:
+  version "0.11.23"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
+  dependencies:
+    ast-types "0.9.6"
+    esprima "~3.1.0"
+    private "~0.1.5"
+    source-map "~0.5.0"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  dependencies:
+    resolve "^1.1.6"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+redent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
+  dependencies:
+    indent-string "^3.0.0"
+    strip-indent "^2.0.0"
+
+redis-commands@^1.2.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/redis-commands/-/redis-commands-1.3.5.tgz#4495889414f1e886261180b1442e7295602d83a2"
+
+redis-parser@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/redis-parser/-/redis-parser-2.6.0.tgz#52ed09dacac108f1a631c07e9b69941e7a19504b"
+
+redis@^2.7.1:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/redis/-/redis-2.8.0.tgz#202288e3f58c49f6079d97af7a10e1303ae14b02"
+  dependencies:
+    double-ended-queue "^2.1.0-0"
+    redis-commands "^1.2.0"
+    redis-parser "^2.6.0"
+
+reflect-metadata@^0.1.3:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.12.tgz#311bf0c6b63cd782f228a81abe146a2bfa9c56f2"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+
+regenerator-runtime@^0.9.5:
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-0.2.2.tgz#c7a8d3236068362059a7e4651fc6884e8b1fb4ae"
+
+repeat-string@^1.5.2, repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+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"
+
+replace-ext@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
+
+request-progress@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-0.3.1.tgz#0721c105d8a96ac6b2ce8b2c89ae2d5ecfcf6b3a"
+  dependencies:
+    throttleit "~0.0.2"
+
+request@2.75.0, request@2.75.x:
+  version "2.75.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.75.0.tgz#d2b8268a286da13eaa5d01adf5d18cc90f657d93"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    bl "~1.1.2"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.0.0"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    node-uuid "~1.4.7"
+    oauth-sign "~0.8.1"
+    qs "~6.2.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+
+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.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    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.6.0"
+    uuid "^3.0.0"
+
+request@2.85.0:
+  version "2.85.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.85.0.tgz#5a03615a47c61420b3eb99b7dba204f83603e1fa"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
+request@2.x, request@^2.0.0, request@^2.74.0, request@^2.87.0:
+  version "2.87.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
+request@~2.74.0:
+  version "2.74.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.74.0.tgz#7693ca768bbb0ea5c8ce08c084a45efa05b892ab"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    bl "~1.1.2"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~1.0.0-rc4"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    node-uuid "~1.4.7"
+    oauth-sign "~0.8.1"
+    qs "~6.2.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+
+requestretry@^1.2.2:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/requestretry/-/requestretry-1.13.0.tgz#213ec1006eeb750e8b8ce54176283d15a8d55d94"
+  dependencies:
+    extend "^3.0.0"
+    lodash "^4.15.0"
+    request "^2.74.0"
+    when "^3.7.7"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+
+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"
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve-dir@^1.0.0, resolve-dir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
+  dependencies:
+    expand-tilde "^2.0.0"
+    global-modules "^1.0.0"
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+
+resolve@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-0.2.3.tgz#f1eb7fb76436f91d87fd19c5f973fe7d506f6571"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@^0.7.1:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-0.7.4.tgz#395a9ef9e873fbfe12bd14408bd91bb936003d69"
+
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.3.2:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
+  dependencies:
+    path-parse "^1.0.5"
+
+response-time@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/response-time/-/response-time-2.3.2.tgz#ffa71bab952d62f7c1d49b7434355fbc68dffc5a"
+  dependencies:
+    depd "~1.1.0"
+    on-headers "~1.0.1"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+
+rewire@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/rewire/-/rewire-2.5.2.tgz#6427de7b7feefa7d36401507eb64a5385bc58dc7"
+
+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.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+rndm@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/rndm/-/rndm-1.2.0.tgz#f33fe9cfb52bbfd520aa18323bc65db110a1b76c"
+
+rollup-plugin-commonjs@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.1.0.tgz#8ac9a87e6ea4c0d136e3e0e25ef41058957622b0"
+  dependencies:
+    acorn "^4.0.1"
+    estree-walker "^0.3.0"
+    magic-string "^0.19.0"
+    resolve "^1.1.7"
+    rollup-pluginutils "^2.0.1"
+
+rollup-plugin-node-resolve@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.0.0.tgz#8b897c4c3030d5001277b0514b25d2ca09683ee0"
+  dependencies:
+    browser-resolve "^1.11.0"
+    builtin-modules "^1.1.0"
+    is-module "^1.0.0"
+    resolve "^1.1.6"
+
+rollup-plugin-sourcemaps@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-sourcemaps/-/rollup-plugin-sourcemaps-0.4.2.tgz#62125aa94087aadf7b83ef4dfaf629b473135e87"
+  dependencies:
+    rollup-pluginutils "^2.0.1"
+    source-map-resolve "^0.5.0"
+
+rollup-pluginutils@^2.0.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.3.0.tgz#478ace04bd7f6da2e724356ca798214884738fc4"
+  dependencies:
+    estree-walker "^0.5.2"
+    micromatch "^2.3.11"
+
+rollup@0.47.4:
+  version "0.47.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.47.4.tgz#e3a55de83a78221d232ce29619a8d68189ae845e"
+
+rxjs@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.0.0.tgz#d647e029b5854617f994c82fe57a4c6747b352da"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  dependencies:
+    ret "~0.1.10"
+
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+sauce-connect-launcher@^1.2.2:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sauce-connect-launcher/-/sauce-connect-launcher-1.2.4.tgz#8d38f85242a9fbede1b2303b559f7e20c5609a1c"
+  dependencies:
+    adm-zip "~0.4.3"
+    async "^2.1.2"
+    https-proxy-agent "^2.2.1"
+    lodash "^4.16.6"
+    rimraf "^2.5.4"
+
+saucelabs@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"
+  dependencies:
+    https-proxy-agent "^2.2.1"
+
+saucelabs@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.3.0.tgz#d240e8009df7fa87306ec4578a69ba3b5c424fee"
+  dependencies:
+    https-proxy-agent "^1.0.0"
+
+sax@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
+
+sax@>=0.6.0, sax@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+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@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-3.5.0.tgz#9036c82874e6c0f5cbff0a0f18223bc31c99cb77"
+  dependencies:
+    jszip "^3.1.3"
+    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:
+    adm-zip "0.4.4"
+    rimraf "^2.2.8"
+    tmp "0.0.24"
+    ws "^1.0.1"
+    xml2js "0.4.4"
+
+"semver@2 || 3 || 4", semver@^4.1.0:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
+
+"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.3.0, semver@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
+semver@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.1.0.tgz#85f2cf8550465c4df000cf7d86f6b054106ab9e5"
+
+semver@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+semver@~5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
+
+send@0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.13.2.tgz#765e7607c8055452bba6f0b052595350986036de"
+  dependencies:
+    debug "~2.2.0"
+    depd "~1.1.0"
+    destroy "~1.0.4"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    fresh "0.3.0"
+    http-errors "~1.3.1"
+    mime "1.3.4"
+    ms "0.7.1"
+    on-finished "~2.3.0"
+    range-parser "~1.0.3"
+    statuses "~1.2.1"
+
+seq@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/seq/-/seq-0.3.5.tgz#ae02af3a424793d8ccbf212d69174e0c54dffe38"
+  dependencies:
+    chainsaw ">=0.0.7 <0.1"
+    hashish ">=0.0.2 <0.1"
+
+sequencify@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/sequencify/-/sequencify-0.0.7.tgz#90cff19d02e07027fd767f5ead3e7b95d1e7380c"
+
+serve-favicon@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/serve-favicon/-/serve-favicon-2.3.2.tgz#dd419e268de012ab72b319d337f2105013f9381f"
+  dependencies:
+    etag "~1.7.0"
+    fresh "0.3.0"
+    ms "0.7.2"
+    parseurl "~1.3.1"
+
+serve-index@~1.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.7.3.tgz#7a057fc6ee28dc63f64566e5fa57b111a86aecd2"
+  dependencies:
+    accepts "~1.2.13"
+    batch "0.5.3"
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    http-errors "~1.3.1"
+    mime-types "~2.1.9"
+    parseurl "~1.3.1"
+
+serve-static@~1.10.0:
+  version "1.10.3"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.10.3.tgz#ce5a6ecd3101fed5ec09827dac22a9c29bfb0535"
+  dependencies:
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.13.2"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+set-value@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.1"
+    to-object-path "^0.3.0"
+
+set-value@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+"setimmediate@>= 1.0.1 < 2", "setimmediate@>= 1.0.2 < 2":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+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"
+
+shell-quote@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  dependencies:
+    array-filter "~0.0.0"
+    array-map "~0.0.0"
+    array-reduce "~0.0.0"
+    jsonify "~0.0.0"
+
+shelljs@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.2.tgz#345b7df7763f4c2340d584abb532c5f752ca9e35"
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+sigmund@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+
+sign-addon@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/sign-addon/-/sign-addon-0.2.0.tgz#c8da20b7afe719d42714142226252358d5b604e9"
+  dependencies:
+    babel-polyfill "6.16.0"
+    deepcopy "0.6.3"
+    es6-error "4.0.0"
+    es6-promisify "5.0.0"
+    jsonwebtoken "7.1.9"
+    mz "2.4.0"
+    request "2.75.0"
+    source-map-support "0.4.3"
+    stream-to-promise "2.2.0"
+    when "3.7.7"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+slack-node@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/slack-node/-/slack-node-0.2.0.tgz#de4b8dddaa8b793f61dbd2938104fdabf37dfa30"
+  dependencies:
+    requestretry "^1.2.2"
+
+"slice-stream@>= 1.0.0 < 2":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slice-stream/-/slice-stream-1.0.0.tgz#5b33bd66f013b1a7f86460b03d463dec39ad3ea0"
+  dependencies:
+    readable-stream "~1.0.31"
+
+smart-buffer@^1.0.13, smart-buffer@^1.0.4:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-1.1.15.tgz#7f114b5b65fab3e2a35aa775bb12f0d1c649bf16"
+
+smtp-connection@2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/smtp-connection/-/smtp-connection-2.12.0.tgz#d76ef9127cb23c2259edb1e8349c2e8d5e2d74c1"
+  dependencies:
+    httpntlm "1.6.1"
+    nodemailer-shared "1.1.0"
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
+socket.io-adapter@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
+
+socket.io-client@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.0.4.tgz#0918a552406dc5e540b380dcd97afc4a64332f8e"
+  dependencies:
+    backo2 "1.0.2"
+    base64-arraybuffer "0.1.5"
+    component-bind "1.0.0"
+    component-emitter "1.2.1"
+    debug "~2.6.4"
+    engine.io-client "~3.1.0"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    socket.io-parser "~3.1.1"
+    to-array "0.1.4"
+
+socket.io-parser@~3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.1.3.tgz#ed2da5ee79f10955036e3da413bfd7f1e4d86c8e"
+  dependencies:
+    component-emitter "1.2.1"
+    debug "~3.1.0"
+    has-binary2 "~1.0.2"
+    isarray "2.0.1"
+
+socket.io@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.0.4.tgz#c1a4590ceff87ecf13c72652f046f716b29e6014"
+  dependencies:
+    debug "~2.6.6"
+    engine.io "~3.1.0"
+    socket.io-adapter "~1.1.0"
+    socket.io-client "2.0.4"
+    socket.io-parser "~3.1.1"
+
+socks-proxy-agent@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-3.0.1.tgz#2eae7cf8e2a82d34565761539a7f9718c5617659"
+  dependencies:
+    agent-base "^4.1.0"
+    socks "^1.1.10"
+
+socks@1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-1.1.9.tgz#628d7e4d04912435445ac0b6e459376cb3e6d691"
+  dependencies:
+    ip "^1.1.2"
+    smart-buffer "^1.0.4"
+
+socks@^1.1.10:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-1.1.10.tgz#5b8b7fc7c8f341c53ed056e929b7bf4de8ba7b5a"
+  dependencies:
+    ip "^1.1.4"
+    smart-buffer "^1.0.13"
+
+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-resolve@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
+  dependencies:
+    atob "^2.1.1"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@0.4.18, source-map-support@~0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map-support@0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.3.tgz#693c8383d4389a4569486987c219744dfc601685"
+  dependencies:
+    source-map "^0.5.3"
+
+source-map-support@^0.5.0:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.6.tgz#4435cee46b1aab62b8e8610ce60f788091c51c13"
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+
+source-map@*:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+
+source-map@0.1.31:
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.31.tgz#9f704d0d69d9e138a81badf6ebb4fde33d151c61"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.4.4, source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+sourcemap-codec@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.1.tgz#c8fd92d91889e902a07aee392bdd2c5863958ba2"
+
+sparkles@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.1.tgz#008db65edce6c50eec0c5e228e1945061dd0437c"
+
+spawn-sync@1.0.15:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
+  dependencies:
+    concat-stream "^1.4.7"
+    os-shim "^0.1.2"
+
+spdx-correct@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.0.tgz#05a5b4d7153a195bc92c3c425b69f3b2a9524c82"
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz#2c7ae61056c714a5b9b9b2b2af7d311ef5c78fe9"
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz#7a7cd28470cc6d3a1cfe6d66886f6bc430d3ac87"
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  dependencies:
+    extend-shallow "^3.0.0"
+
+split2@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
+  dependencies:
+    through2 "^2.0.2"
+
+split@0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
+  dependencies:
+    through "2"
+
+split@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
+  dependencies:
+    through "2"
+
+sprintf-js@^1.0.3:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.1.tgz#36be78320afe5801f6cea3ee78b6e5aab940ea0c"
+
+sshpk@^1.7.0:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.2.tgz#c6fc61648a3d9c4e764fd3fcdf4ea105e492ba98"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+    safer-buffer "^2.0.2"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+statuses@1, "statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+
+statuses@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.2.1.tgz#dded45cc18256d51ed40aec142489d5c61026d28"
+
+statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+stream-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-1.0.0.tgz#bf9b4abfb42b274d751479e44e0ff2656b6f1193"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^1.0.27-1"
+
+stream-combiner2@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stream-combiner2/-/stream-combiner2-1.1.1.tgz#fb4d8a1420ea362764e21ad4780397bebcb41cbe"
+  dependencies:
+    duplexer2 "~0.1.0"
+    readable-stream "^2.0.2"
+
+stream-combiner@~0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.0.4.tgz#4d5e433c185261dde623ca3f44c586bcf5c4ad14"
+  dependencies:
+    duplexer "~0.1.1"
+
+stream-consume@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/stream-consume/-/stream-consume-0.1.1.tgz#d3bdb598c2bd0ae82b8cac7ac50b1107a7996c48"
+
+stream-counter@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/stream-counter/-/stream-counter-0.2.0.tgz#ded266556319c8b0e222812b9cf3b26fa7d947de"
+  dependencies:
+    readable-stream "~1.1.8"
+
+stream-equal@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/stream-equal/-/stream-equal-0.1.6.tgz#cc522fab38516012e4d4ee47513b147b72359019"
+
+stream-to-array@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/stream-to-array/-/stream-to-array-2.3.0.tgz#bbf6b39f5f43ec30bc71babcb37557acecf34353"
+  dependencies:
+    any-promise "^1.1.0"
+
+stream-to-promise@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/stream-to-promise/-/stream-to-promise-2.2.0.tgz#b1edb2e1c8cb11289d1b503c08d3f2aef51e650f"
+  dependencies:
+    any-promise "~1.3.0"
+    end-of-stream "~1.1.0"
+    stream-to-array "~2.3.0"
+
+streamroller@0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/streamroller/-/streamroller-0.7.0.tgz#a1d1b7cf83d39afb0d63049a5acbf93493bdf64b"
+  dependencies:
+    date-format "^1.2.0"
+    debug "^3.1.0"
+    mkdirp "^0.5.1"
+    readable-stream "^2.3.0"
+
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+"string-width@^1.0.2 || 2", string-width@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+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.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4, stringstream@~0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
+
+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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.0.0"
+
+strip-bom@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-1.0.0.tgz#85b8862f3844b5a6d5ec8467a93598173a36f794"
+  dependencies:
+    first-chunk-stream "^1.0.0"
+    is-utf8 "^0.2.0"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  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-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.0.1"
+
+strip-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
+
+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"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+supports-color@^3.1.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+systemjs@0.18.10:
+  version "0.18.10"
+  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-0.18.10.tgz#4e679dc5bb04dffb9882d40b19c5daa1cd182102"
+  dependencies:
+    es6-module-loader "^0.17.4"
+    when "^3.7.2"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  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"
+
+tar-stream@^1.5.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.1.tgz#f84ef1696269d6223ca48f6e1eeede3f7e81f395"
+  dependencies:
+    bl "^1.0.0"
+    buffer-alloc "^1.1.0"
+    end-of-stream "^1.0.0"
+    fs-constants "^1.0.0"
+    readable-stream "^2.3.0"
+    to-buffer "^1.1.0"
+    xtend "^4.0.0"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+tar@^4:
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.4.tgz#ec8409fae9f665a4355cc3b4087d0820232bb8cd"
+  dependencies:
+    chownr "^1.0.1"
+    fs-minipass "^1.2.5"
+    minipass "^2.3.3"
+    minizlib "^1.1.0"
+    mkdirp "^0.5.0"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.2"
+
+temp@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/temp/-/temp-0.4.0.tgz#671ad63d57be0fe9d7294664b3fc400636678a60"
+
+text-extensions@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.7.0.tgz#faaaba2625ed746d568a23e4d0aacd9bf08a8b39"
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.0.tgz#e69e38a1babe969b0108207978b9f62b88604839"
+  dependencies:
+    any-promise "^1.0.0"
+
+throttleit@~0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-0.0.2.tgz#cfedf88e60c00dd9697b61fdd2a8343a9b680eaf"
+
+through2@^0.6.1, through2@^0.6.3:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-0.6.5.tgz#41ab9c67b29d57209071410e1d7a7a968cd3ad48"
+  dependencies:
+    readable-stream ">=1.0.33-1 <1.1.0-0"
+    xtend ">=4.0.0 <4.1.0-0"
+
+through2@^2.0.0, through2@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  dependencies:
+    readable-stream "^2.1.5"
+    xtend "~4.0.1"
+
+through@2, "through@>=2.2.7 <3", through@~2.3, through@~2.3.1, through@~2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+thunkify@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/thunkify/-/thunkify-2.1.2.tgz#faa0e9d230c51acc95ca13a361ac05ca7e04553d"
+
+tildify@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tildify/-/tildify-1.2.0.tgz#dcec03f55dca9b7aa3e5b04f21817eb56e63588a"
+  dependencies:
+    os-homedir "^1.0.0"
+
+time-stamp@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
+
+timers-browserify@^1.0.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  dependencies:
+    process "~0.11.0"
+
+timers-ext@0.1, timers-ext@^0.1.2:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.5.tgz#77147dd4e76b660c2abb8785db96574cbbd12922"
+  dependencies:
+    es5-ext "~0.10.14"
+    next-tick "1"
+
+timespan@2.3.x:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/timespan/-/timespan-2.3.0.tgz#4902ce040bd13d845c8f59b27e9d59bad6f39929"
+
+tiny-lr@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tiny-lr/-/tiny-lr-0.2.1.tgz#b3fdba802e5d56a33c2f6f10794b32e477ac729d"
+  dependencies:
+    body-parser "~1.14.0"
+    debug "~2.2.0"
+    faye-websocket "~0.10.0"
+    livereload-js "^2.2.0"
+    parseurl "~1.3.0"
+    qs "~5.1.0"
+
+tmp@0.0.24:
+  version "0.0.24"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.24.tgz#d6a5e198d14a9835cc6f2d7c3d9e302428c8cf12"
+
+tmp@0.0.28:
+  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.33, tmp@0.0.x:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  dependencies:
+    os-tmpdir "~1.0.2"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+to-buffer@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+topo@1.x.x:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/topo/-/topo-1.1.0.tgz#e9d751615d1bb87dc865db182fa1ca0a5ef536d5"
+  dependencies:
+    hoek "2.x.x"
+
+touch@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-0.0.3.tgz#51aef3d449571d4f287a5d87c9c8b49181a0db1d"
+  dependencies:
+    nopt "~1.0.10"
+
+tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
+  dependencies:
+    punycode "^1.4.1"
+
+traverse@>=0.2.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
+
+"traverse@>=0.3.0 <0.4":
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.3.9.tgz#717b8f220cc0bb7b44e40514c22b2e8bbc70d8b9"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+trim-newlines@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
+
+trim-off-newlines@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
+
+tsickle@0.32:
+  version "0.32.0"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.32.0.tgz#8027eecf5872b4451ffae821a5fdbd0b3206c139"
+  dependencies:
+    jasmine-diff "^0.1.3"
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map "^0.6.0"
+    source-map-support "^0.5.0"
+
+tslib@^1.0.0, tslib@^1.7.1, tslib@^1.8.1, tslib@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
+
+tslint-eslint-rules@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/tslint-eslint-rules/-/tslint-eslint-rules-4.1.1.tgz#7c30e7882f26bc276bff91d2384975c69daf88ba"
+  dependencies:
+    doctrine "^0.7.2"
+    tslib "^1.0.0"
+    tsutils "^1.4.0"
+
+tslint@5.7.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.7.0.tgz#c25e0d0c92fa1201c2bc30e844e08e682b4f3552"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    colors "^1.1.2"
+    commander "^2.9.0"
+    diff "^3.2.0"
+    glob "^7.1.1"
+    minimatch "^3.0.4"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.7.1"
+    tsutils "^2.8.1"
+
+tslint@~5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.1.0.tgz#51a47baeeb58956fcd617bd2cf00e2ef0eea2ed9"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    colors "^1.1.2"
+    diff "^3.2.0"
+    findup-sync "~0.3.0"
+    glob "^7.1.1"
+    optimist "~0.6.0"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tsutils "^1.4.0"
+
+tsscmp@1.0.5, tsscmp@~1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.5.tgz#7dc4a33af71581ab4337da91d85ca5427ebd9a97"
+
+tsutils@2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.20.0.tgz#303394064bc80be8ee04e10b8609ae852e9312d3"
+  dependencies:
+    tslib "^1.8.1"
+
+tsutils@^1.4.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-1.9.1.tgz#b9f9ab44e55af9681831d5f28d0aeeaf5c750cb0"
+
+tsutils@^2.8.1:
+  version "2.27.2"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.27.2.tgz#60ba88a23d6f785ec4b89c6e8179cac9b431f1c7"
+  dependencies:
+    tslib "^1.8.1"
+
+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.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"
+
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
+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-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-is@~1.6.10, type-is@~1.6.16, type-is@~1.6.6:
+  version "1.6.16"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.18"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+typescript@2.9.x:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c"
+
+"typescript@>=2.6.2 <2.8":
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
+
+uglify-es@^3.3.9:
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
+  dependencies:
+    commander "~2.13.0"
+    source-map "~0.6.1"
+
+uglify-js@1.2.6, uglify-js@~1.2.5:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-1.2.6.tgz#d354b2d3c1cf10ebc18fa78c11a28bdd9ce1580d"
+
+uglify-js@^1.3.3:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-1.3.5.tgz#4b5bfff9186effbaa888e4c9e94bd9fc4c94929d"
+
+uglify-js@^2.6:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
+uglify-js@~2.6.0:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.6.4.tgz#65ea2fb3059c9394692f15fed87c2b36c16b9adf"
+  dependencies:
+    async "~0.2.6"
+    source-map "~0.5.1"
+    uglify-to-browserify "~1.0.0"
+    yargs "~3.10.0"
+
+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.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.5.tgz#5a3db23ef5dbd55b81fce0ec9a2ac6fccdebb81e"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+uid-safe@2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/uid-safe/-/uid-safe-2.1.4.tgz#3ad6f38368c6d4c8c75ec17623fb79aa1d071d81"
+  dependencies:
+    random-bytes "~1.0.0"
+
+uid-safe@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uid-safe/-/uid-safe-2.0.0.tgz#a7f3c6ca64a1f6a5d04ec0ef3e4c3d5367317137"
+  dependencies:
+    base64-url "1.2.1"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+
+unc-path-regex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+
+underscore.string@3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.4.tgz#2c2a3f9f83e64762fdc45e6ceac65142864213db"
+  dependencies:
+    sprintf-js "^1.0.3"
+    util-deprecate "^1.0.2"
+
+underscore@1.x:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
+
+underscore@~1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209"
+
+unicoderegexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/unicoderegexp/-/unicoderegexp-0.4.1.tgz#afb10e4ef1eeddc711417bbb652bc885da9d4171"
+
+union-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^0.4.3"
+
+unique-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-1.0.0.tgz#d59a4a75427447d9aa6c91e70263f8d26a4b104b"
+
+universal-analytics@0.4.15:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/universal-analytics/-/universal-analytics-0.4.15.tgz#4abc61b159ffe765be144e07b7b739e0ee7b88ab"
+  dependencies:
+    async "1.2.x"
+    request "2.x"
+    underscore "1.x"
+    uuid "^3.0.0"
+
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+unzip@~0.1.9:
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/unzip/-/unzip-0.1.11.tgz#89749c63b058d7d90d619f86b98aa1535d3b97f0"
+  dependencies:
+    binary ">= 0.3.0 < 1"
+    fstream ">= 0.1.30 < 1"
+    match-stream ">= 0.0.2 < 1"
+    pullstream ">= 0.4.1 < 1"
+    readable-stream "~1.0.31"
+    setimmediate ">= 1.0.1 < 2"
+
+upath@^1.0.5:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
+
+uri-js@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-3.0.2.tgz#f90b858507f81dea4dcfbb3c4c3dbfa2b557faaa"
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+
+url@~0.10.1:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+use@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.0.tgz#14716bf03fdfefd03040aef58d8b4b85f3a7c544"
+  dependencies:
+    kind-of "^6.0.2"
+
+user-home@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
+
+useragent@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.2.1.tgz#cf593ef4f2d175875e8bb658ea92e18a4fd06d8e"
+  dependencies:
+    lru-cache "2.2.x"
+    tmp "0.0.x"
+
+util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+util@~0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  dependencies:
+    inherits "2.0.3"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+
+uuid@^3.0.0, uuid@^3.1.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+
+uws@~9.14.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/uws/-/uws-9.14.0.tgz#fac8386befc33a7a3705cbd58dc47b430ca4dd95"
+
+v8flags@^2.0.2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
+  dependencies:
+    user-home "^1.1.1"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz#81643bcbef1bdfecd4623793dc4648948ba98338"
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+vargs@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/vargs/-/vargs-0.1.0.tgz#6b6184da6520cc3204ce1b407cac26d92609ebff"
+
+vary@^1, vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+
+vary@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.0.1.tgz#99e4981566a286118dfb2b817357df7993376d10"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vhost@~3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/vhost/-/vhost-3.0.2.tgz#2fb1decd4c466aa88b0f9341af33dc1aff2478d5"
+
+vinyl-fs@^0.3.0:
+  version "0.3.14"
+  resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-0.3.14.tgz#9a6851ce1cac1c1cea5fe86c0931d620c2cfa9e6"
+  dependencies:
+    defaults "^1.0.0"
+    glob-stream "^3.1.5"
+    glob-watcher "^0.0.6"
+    graceful-fs "^3.0.0"
+    mkdirp "^0.5.0"
+    strip-bom "^1.0.0"
+    through2 "^0.6.1"
+    vinyl "^0.4.0"
+
+vinyl@^0.4.0:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.4.6.tgz#2f356c87a550a255461f36bbeb2a5ba8bf784847"
+  dependencies:
+    clone "^0.2.0"
+    clone-stats "^0.0.1"
+
+vinyl@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.5.3.tgz#b0455b38fc5e0cf30d4325132e461970c2091cde"
+  dependencies:
+    clone "^1.0.0"
+    clone-stats "^0.0.1"
+    replace-ext "0.0.1"
+
+vlq@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.2.tgz#e316d5257b40b86bb43cb8d5fea5d7f54d6b0ca1"
+
+vlq@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
+
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+void-elements@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+
+vrsource-tslint-rules@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/vrsource-tslint-rules/-/vrsource-tslint-rules-5.1.1.tgz#9bef7a60bc34f6cdc637d7ba1b8d745b71f6dcbe"
+  dependencies:
+    tslint "~5.1.0"
+
+walkdir@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.0.5.tgz#8b36be89c4f189249fd2d931cf133ba0c1c6fde8"
+
+walkdir@^0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.0.11.tgz#a16d025eb931bd03b52f308caed0f40fcebe9532"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+wd@^1.4.0:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/wd/-/wd-1.10.1.tgz#06cfe70a4903d7359f155866b8bafbe30aaccc3e"
+  dependencies:
+    archiver "2.1.1"
+    async "2.0.1"
+    lodash "4.17.10"
+    mkdirp "^0.5.1"
+    q "1.4.1"
+    request "2.85.0"
+    underscore.string "3.3.4"
+    vargs "0.1.0"
+
+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.1.0"
+  resolved "https://registry.yarnpkg.com/webdriver-manager/-/webdriver-manager-12.1.0.tgz#f6601e52de5f0c97fc7024c889eeb2416f2f1d9d"
+  dependencies:
+    adm-zip "^0.4.9"
+    chalk "^1.1.1"
+    del "^2.2.0"
+    glob "^7.0.3"
+    ini "^1.3.4"
+    minimist "^1.2.0"
+    q "^1.4.1"
+    request "^2.87.0"
+    rimraf "^2.5.2"
+    semver "^5.3.0"
+    xml2js "^0.4.17"
+
+webpack-core@~0.6.0:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack@1.12.9:
+  version "1.12.9"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.12.9.tgz#2a031d66189839cc5cbf2c68f80566da2e14ff4e"
+  dependencies:
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    esprima "^2.5.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser ">= 0.4.0 <=0.6.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.6.0"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.0"
+
+websocket-driver@>=0.5.1:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
+  dependencies:
+    http-parser-js ">=0.4.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
+
+when@3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.7.2.tgz#06bed1296df3a0bfd83f7f31c5e1d779bd97eae8"
+
+when@3.7.7:
+  version "3.7.7"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.7.7.tgz#aba03fc3bb736d6c88b091d013d8a8e590d84718"
+
+when@^3.7.2, when@^3.7.7:
+  version "3.7.8"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
+which@1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.4.tgz#1557f96080604e5b11b3599eb9f45b50a9efd722"
+  dependencies:
+    is-absolute "^0.1.7"
+    isexe "^1.1.1"
+
+which@^1.2.1, which@^1.2.14, which@^1.2.9:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  dependencies:
+    isexe "^2.0.0"
+
+wide-align@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  dependencies:
+    string-width "^1.0.2 || 2"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+window-size@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
+
+winreg@0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/winreg/-/winreg-0.0.12.tgz#07105554ba1a9d08979251d129475bffae3006b7"
+
+with-callback@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/with-callback/-/with-callback-1.0.2.tgz#a09629b9a920028d721404fb435bdcff5c91bc21"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+ws@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.5.tgz#cbd9e6e75e09fc5d2c90015f21f0c40875e0dd51"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
+ws@~3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
+xhr2@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.4.tgz#7f87658847716db5026323812f818cadab387a5f"
+
+xml2js@0.4.16:
+  version "0.4.16"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.16.tgz#f82fccd2f9540d7e0a9b5dac163e7471195c9db3"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "^4.1.0"
+
+xml2js@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.4.tgz#3111010003008ae19240eba17497b57c729c555d"
+  dependencies:
+    sax "0.6.x"
+    xmlbuilder ">=1.0.0"
+
+xml2js@^0.4.17, xml2js@~0.4.4:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@>=1.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-10.0.0.tgz#c64e52f8ae097fe5fd46d1c38adaade071ee1b55"
+
+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"
+
+xmlbuilder@~9.0.1:
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
+
+xmldom@^0.1.27:
+  version "0.1.27"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
+
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+
+xpath@^0.0.27:
+  version "0.0.27"
+  resolved "https://registry.yarnpkg.com/xpath/-/xpath-0.0.27.tgz#dd3421fbdcc5646ac32c48531b4d7e9d0c2cfa92"
+
+xregexp@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-2.0.0.tgz#52a63e56ca0b84a7f3a5f3d61872f126ad7a5943"
+
+"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+y18n@^3.2.0, y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
+yallist@^3.0.0, yallist@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
+
+yargs-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-9.0.1.tgz#52acc23feecac34042078ee78c0c007f5085db4c"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^7.0.0"
+
+yargs@^3.10.0:
+  version "3.32.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
+  dependencies:
+    camelcase "^2.0.1"
+    cliui "^3.0.3"
+    decamelize "^1.1.1"
+    os-locale "^1.4.0"
+    string-width "^1.0.1"
+    window-size "^0.1.4"
+    y18n "^3.2.0"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+zip-dir@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/zip-dir/-/zip-dir-1.0.2.tgz#253f907aead62a21acd8721d8b88032b2411c051"
+  dependencies:
+    async "^1.5.2"
+    jszip "^2.4.0"
+
+zip-stream@^1.0.0, zip-stream@^1.1.0, zip-stream@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"
+  dependencies:
+    archiver-utils "^1.3.0"
+    compress-commons "^1.2.0"
+    lodash "^4.8.0"
+    readable-stream "^2.0.0"
+
+zone.js@^0.8.26:
+  version "0.8.26"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.26.tgz#7bdd72f7668c5a7ad6b118148b4ea39c59d08d2d"
diff --git a/yarn.lock.readme.md b/yarn.lock.readme.md
new file mode 100644
index 000000000000..86ad15e99ed3
--- /dev/null
+++ b/yarn.lock.readme.md
@@ -0,0 +1,25 @@
+All of our npm dependencies are locked via the `yarn.lock` file for the following reasons:
+
+- our project has lots of dependencies which update at unpredictable times, so it's important that
+  we update them explicitly once in a while rather than implicitly when any of us runs `yarn install`
+- locked dependencies allow us to reuse yarn cache on travis, significantly speeding up our builds
+  (by 5 minutes or more)
+- locked dependencies allow us to detect when node_modules folder is out of date after a branch switch
+  which allows us to build the project with the correct dependencies every time
+
+Before changing a dependency, do the following:
+
+- make sure you are in sync with `upstream/master`: `git fetch upstream && git rebase upstream/master`
+- ensure that your `node_modules` directory is not stale by running `yarn install`
+
+
+To add a new dependency do the following: `yarn add <packagename> --dev`
+
+To update an existing dependency do the following: run `yarn upgrade <packagename>@<version|latest> --dev`
+or `yarn upgrade <packagename> --dev` to update to the latest version that matches version constraint
+in `package.json`
+
+To Remove an existing dependency do the following: run `yarn remove <packagename>`
+
+
+Once you've changed the dependency, commit the changes to `package.json` & `yarn.lock`, and you are done.
\ No newline at end of file